/* ═══════════════════════════════════════════════
   Papelmanía Product Templates — Mobile layout (v1.5.0)
   Only affects ≤768px. Desktop is untouched.
   ═══════════════════════════════════════════════ */

/* ─── Bug fix: Design System sets .pm-qty-control{width:100%!important} under 768px
       (meant for homepage cards). On the product page it crushed the add-to-cart
       button to 0px. Scope it back. ─── */
@media (max-width: 900px) {
  .pm-product-page .pm-purchase-row .pm-qty-control { width: auto !important; flex: 0 0 auto !important; }
  .pm-product-page .pm-purchase-row .pm-btn-add-cart { flex: 1 1 auto !important; min-width: 0; }
}

/* Sticky bar: hidden by default, slides in only when the main button is off-screen */
.pm-sticky-mobile-bar { transform: translateY(110%); transition: transform 0.28s var(--ease); }
body.pm-sticky-on .pm-sticky-mobile-bar { transform: translateY(0); }
.pm-sticky-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; background: none; border: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.pm-sticky-variant { font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.pm-sticky-variant:empty { display: none; }
.pm-sticky-variant b { color: var(--ink); font-weight: 600; }
.pm-sticky-price del { font-size: 14px; color: var(--ink-muted); }
.pm-sticky-price ins { text-decoration: none; }
.pm-sticky-cta.is-out { background: var(--ink-muted) !important; pointer-events: none; }

@media (max-width: 768px) {
  /* WhatsApp float sits above the sticky bar instead of covering the button */
  .pm-whatsapp-float { transition: bottom 0.28s var(--ease), transform 0.3s var(--ease) !important; }
  body.pm-sticky-on .pm-whatsapp-float { bottom: 88px !important; right: 16px !important; width: 50px !important; height: 50px !important; }

  .pm-container { padding: 0 20px; }

  /* ═══ HERO ═══ */
  .pm-product-hero { padding: 8px 0 28px; }
  .pm-product-hero .pm-container { gap: 18px; }

  /* Gallery: square image, swipe, dots instead of thumbnails */
  .pm-product-page .pm-gallery-main,
  .pm-product-page.pm-template-kit .pm-gallery-main { aspect-ratio: 1; margin-bottom: 10px; box-shadow: var(--shadow-sm); touch-action: pan-y; }
  .pm-product-page .pm-gallery-main:hover img { transform: none; }
  .pm-product-page.pm-has-dots .pm-gallery-thumbs { display: none; }
  .pm-product-page:not(.pm-has-dots) .pm-gallery-thumbs { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; }
  .pm-gallery-dots { display: flex; justify-content: center; gap: 6px; }
  .pm-gallery-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-med); transition: all 0.25s var(--ease); }
  .pm-gallery-dot.active { width: 20px; border-radius: 4px; background: var(--ink); }
  .pm-gallery-counter { position: absolute; top: 12px; right: 12px; background: rgba(255,253,249,0.9); color: var(--ink); font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 50px; pointer-events: none; z-index: 2; }
  .pm-gallery-main { position: relative; }

  /* Info column → re-ordered: title, price + rating, style, buy, then reassurance */
  .pm-template-kit .pm-product-info { display: flex; flex-wrap: wrap; align-items: center; padding-top: 0; }
  .pm-template-kit .pm-product-info > * { width: 100%; }
  .pm-template-kit .pm-product-badge { display: none; }               /* duplicated by "Clase online incluida" */
  .pm-template-kit .pm-product-title { order: 1; font-size: 24px !important; line-height: 1.2; margin-bottom: 8px; }
  .pm-template-kit .pm-product-price { order: 2; font-size: 26px !important; margin: 0; line-height: 1.1; }
  /* Rating sits right above the description */
  .pm-template-kit .pm-product-rating { order: 9; margin: 0 0 10px; gap: 6px; }
  .pm-template-kit .pm-stock-out-badge { order: 4; width: auto; margin: 10px 0 0; }
  .pm-template-kit .pm-variant-section { order: 5; margin: 18px 0 0; }
  .pm-template-kit .pm-purchase-row,
  .pm-template-kit .pm-stock-out-notice { margin-top: 16px !important; }
  .pm-template-kit .pm-purchase-row,
  .pm-template-kit .pm-stock-out-notice { order: 6; margin-bottom: 8px; }
  .pm-template-kit .pm-product-price-note { order: 7; font-size: 12px; text-align: center; margin-bottom: 16px; }
  .pm-template-kit .pm-trust-badges-row { order: 8; }
  .pm-template-kit .pm-desc-section { order: 10; }

  /* Shipping box goes below the description so it doesn't sit right under the trust badges */
  .pm-template-kit .pm-shipping-info-box { order: 11; margin: 8px 0 0 !important; }

  /* Variants: tighter, scrollable in one row if there are many */
  .pm-product-page .pm-variant-label { font-size: 13px; margin-bottom: 8px; }
  .pm-product-page .pm-variant-label .pm-variant-current { font-weight: 400; color: var(--ink-muted); }
  .pm-product-page .pm-variant-options { gap: 6px; }
  .pm-product-page .pm-variant-option { padding: 9px 16px !important; font-size: 14px !important; min-height: 0 !important; }
  .pm-variant-section.pm-flash { animation: pmFlash 1.2s var(--ease); border-radius: 12px; }
  @keyframes pmFlash { 0%,100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 6px var(--blush); } }

  .pm-product-page .pm-qty-btn { width: 38px; height: 48px; }
  .pm-product-page .pm-qty-value { width: 30px; }
  .pm-product-page .pm-btn-add-cart { height: 50px; }

  /* Trust badges: 3 compact columns instead of 3 stacked rows */
  .pm-product-page .pm-trust-badges-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
  .pm-product-page .pm-trust-badge-item { flex-direction: column; text-align: center; gap: 6px; font-size: 11.5px; line-height: 1.3; background: var(--warm-white); border: 1px solid var(--border); border-radius: 14px !important; padding: 10px 6px; }
  .pm-product-page .pm-trust-badge-icon { width: 28px; height: 28px; font-size: 14px; }

  .pm-product-page .pm-shipping-info-box { padding: 12px 14px; margin-bottom: 16px; }
  .pm-product-page .pm-shipping-info-item { font-size: 12.5px; }
  .pm-product-page .pm-shipping-info-item + .pm-shipping-info-item { margin-top: 8px; padding-top: 8px; }

  /* Description: open but clamped, with "Leer más" */
  .pm-desc-section { padding-top: 8px; }
  .pm-desc-content.pm-clamp:not(.pm-expanded) .pm-desc-content-inner { max-height: 210px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
  .pm-desc-more { display: none; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; padding: 0 0 16px; }
  .pm-desc-content.open.pm-clamp + .pm-desc-more { display: block; }

  /* ═══ SECTIONS BELOW THE FOLD ═══ */
  .pm-whats-included, .pm-how-it-works, .pm-video-section, .pm-reviews-section,
  .pm-faq-section, .pm-about-section, .pm-social-section, .pm-related-section, .pm-newsletter-section { padding: 36px 0 !important; }
  .pm-section-header { margin-bottom: 20px; }
  .pm-section-header h2 { font-size: 22px !important; }
  .pm-section-header p { font-size: 13.5px; margin-top: 6px; }

  /* What's included: compact list rows */
  .pm-included-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .pm-included-card { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; text-align: left; padding: 12px 14px; align-items: center; }
  .pm-included-icon { width: 40px; height: 40px; font-size: 18px; margin: 0; border-radius: 10px; grid-row: span 2; }
  .pm-included-card h4 { font-size: 15px; margin-bottom: 2px; }
  .pm-included-card p { font-size: 12.5px; line-height: 1.4; }

  /* How it works: 2×2 */
  .pm-steps-grid { grid-template-columns: 1fr 1fr !important; gap: 18px 14px !important; }
  .pm-step-number { width: 40px; height: 40px; font-size: 17px; margin-bottom: 8px; }
  .pm-step-card h4 { font-size: 14.5px; margin-bottom: 3px; }
  .pm-step-card p { font-size: 12px; line-height: 1.4; }

  /* Reviews: score + bars side by side, cards as a swipeable row */
  .pm-reviews-overview { grid-template-columns: 112px 1fr !important; gap: 16px !important; margin-bottom: 20px; }
  .pm-reviews-big-score { padding: 14px 8px; }
  .pm-reviews-big-number { font-size: 38px; }
  .pm-reviews-big-stars { font-size: 13px; letter-spacing: 1px; }
  .pm-reviews-big-count { font-size: 11px; line-height: 1.3; }
  .pm-rating-bars { gap: 5px; }
  .pm-rating-bar-label { width: 62px; font-size: 11.5px; }
  .pm-rating-bar-pct { width: 30px; font-size: 11px; }
  .pm-reviews-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none; }
  .pm-reviews-grid::-webkit-scrollbar { display: none; }
  .pm-review-card { flex: 0 0 82%; scroll-snap-align: center; padding: 18px; }
  .pm-review-card:hover { transform: none; }
  .pm-review-text { font-size: 13.5px; }

  /* FAQ */
  .pm-faq-question { padding: 15px 0; font-size: 14px; }

  /* About Ana: photo beside text */
  .pm-about-inner { grid-template-columns: 110px 1fr !important; gap: 16px !important; align-items: start !important; }
  .pm-about-image { aspect-ratio: 3/4; border-radius: var(--radius); box-shadow: var(--shadow-md); }
  .pm-about-image img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
  .pm-about-stamp { display: none; }
  .pm-about-text h3 { font-size: 20px; margin-bottom: 8px; }
  .pm-about-text p { font-size: 13px; line-height: 1.6; margin-bottom: 8px; }
  .pm-about-tags { margin-top: 8px; gap: 6px; }
  .pm-about-tag { font-size: 11px; padding: 4px 10px; }

  /* Instagram feed: 4 posts, 2×2, square */
  .pm-product-page .pm-social-feed-wrapper #sb_instagram #sbi_images { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; padding: 0 !important; }
  .pm-product-page .pm-social-feed-wrapper #sb_instagram #sbi_images .sbi_item { width: 100% !important; padding: 0 !important; margin: 0 !important; }
  .pm-product-page .pm-social-feed-wrapper #sb_instagram #sbi_images .sbi_item:nth-child(n+5) { display: none !important; }
  .pm-product-page .pm-social-feed-wrapper #sb_instagram .sbi_photo_wrap,
  .pm-product-page .pm-social-feed-wrapper #sb_instagram .sbi_photo { aspect-ratio: 1 / 1 !important; height: auto !important; overflow: hidden; border-radius: 10px; }
  .pm-product-page .pm-social-feed-wrapper #sb_instagram .sbi_photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .pm-product-page .pm-social-feed-wrapper #sb_instagram .sbi_load_btn { display: none !important; }
  .pm-product-page .pm-social-feed-wrapper #sb_instagram .sb_instagram_header { margin-bottom: 10px; }

  /* Trust strip: 2×2 */
  .pm-trust-strip { padding: 22px 0; }
  .pm-trust-strip-inner { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px 12px !important; text-align: center; }
  .pm-trust-strip-item { font-size: 12.5px; }

  /* Related: 2 columns */
  .pm-related-scroll { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .pm-related-card-info { padding: 10px 12px; }
  .pm-related-card-info h4 { font-size: 13px; }
  .pm-related-card-info .price { font-size: 14px; }
}