/* Single-product pages (template-parts/product-detail.php).
   Each product runs on one accent: blue (aerosol, CBD) or lime (gel, sachets, esencia). */

.pd{--pd-accent:var(--color-primary);--mono:var(--primitive-fontFamily-mono);color:var(--color-foreground);overflow-x:clip}
.pd--lime{--pd-accent:var(--color-accent)}
.pd a{text-decoration:none;color:inherit}
.pd h1,.pd h2{font-family:var(--primitive-fontFamily-display);font-weight:700;margin:0;text-transform:uppercase}
.pd-eyebrow{margin:0;font:11px var(--mono);letter-spacing:.16em;color:var(--pd-accent)}
/* WooCommerce always prints an (often empty) notices wrapper; only make room when it has a message. */
.pd-notices{max-width:1440px;margin:0 auto;padding:0 5.5vw}
.pd-notices:has(.woocommerce-message,.woocommerce-error,.woocommerce-info){padding-top:104px}
.pd-notices:has(.woocommerce-message,.woocommerce-error,.woocommerce-info)+.pd .pd-hero{padding-top:32px}

/* === Hero === */
.pd-hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center;max-width:1440px;margin:0 auto;padding:108px 5.5vw 72px}
.pd-hero-copy{display:flex;flex-direction:column;gap:26px;min-width:0;container-type:inline-size}
.pd-crumbs{font:11px var(--mono);letter-spacing:.14em;color:var(--color-foreground-subtle)}
.pd-crumbs a:hover{color:var(--pd-accent)}
.pd-crumbs span{color:var(--color-foreground)}
.pd-hero .pd-eyebrow{align-self:flex-start;padding:8px 16px;border:1px solid var(--pd-accent);border-radius:999px;font-weight:700}
/* Sized to its column (not the window) so the longest word, "LIBREMENTE.", always fits. */
.pd-title{font-size:clamp(44px,14.5cqi,128px);line-height:.86;letter-spacing:-.075em}
.pd-title span{color:var(--pd-accent)}
.pd-desc{margin:0;max-width:520px;font-size:19px;line-height:1.5;color:var(--color-foreground-muted)}
.pd-chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pd-chips-label{font:10px var(--mono);letter-spacing:.16em;color:var(--color-foreground-subtle);margin-right:6px}
.pd-chip{padding:7px 14px;background:rgba(255,255,255,.08);border-radius:999px;font:11px var(--mono);letter-spacing:.1em}
/* Wrapping row instead of fixed columns: long values ("ACOMPAÑAMIENTO") take the width they
   need and move to the next line instead of breaking mid-word. */
.pd-stats{display:flex;flex-wrap:wrap;gap:20px 24px}
.pd-stats div{flex:1 0 auto;min-width:110px;display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--color-border-default)}
.pd-stats b{font-size:clamp(20px,2.2vw,30px);letter-spacing:-.04em;white-space:nowrap}
.pd-stats span{font:10px/1.6 var(--mono);letter-spacing:.14em;color:var(--color-foreground-subtle)}
.pd-price{font-size:44px;font-weight:700;letter-spacing:-.04em}
.pd-price del{opacity:.45;font-size:.6em;margin-right:10px}
.pd-price ins{text-decoration:none}
/* "Lleva más, paga menos" (inc/woocommerce.php vp_unit_tiers): 1 / 2 / 3 units with envío incluido. */
.pd-tiers{display:flex;flex-direction:column;gap:12px}
.pd-tiers-title{margin:0;font:11px var(--mono);letter-spacing:.16em;color:var(--pd-accent)}
.pd-tiers ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pd-tiers li{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--color-border-default);border-radius:14px}
.pd-tiers li.is-best{border-color:var(--pd-accent)}
.pd-tier-qty{font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-foreground-subtle)}
.pd-tiers b{font-size:clamp(18px,1.8vw,24px);letter-spacing:-.03em;white-space:nowrap}
.pd-tier-each{font:10px/1.5 var(--mono);color:var(--color-foreground-muted)}
.pd-tiers li.is-best .pd-tier-each{color:var(--pd-accent)}
.pd-buy{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.pd-cart{display:flex;flex-wrap:wrap;gap:14px}
.pd-qty{display:flex;align-items:center;height:60px;border:1px solid var(--color-border-default);border-radius:999px}
.pd-qty button{width:52px;height:58px;background:none;border:0;color:inherit;font-size:22px;cursor:pointer}
.pd-qty button:hover{color:var(--pd-accent)}
.pd-qty input{width:40px;height:40px;border:0;background:none;color:inherit;text-align:center;font:700 16px var(--mono);-moz-appearance:textfield;appearance:textfield}
.pd-qty input::-webkit-outer-spin-button,.pd-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pd-cta{display:inline-flex;align-items:center;gap:10px;height:60px;padding:0 34px;border:0;border-radius:999px;background:var(--pd-accent);color:var(--color-foreground-on-accent);font:700 14px var(--mono);letter-spacing:.14em;cursor:pointer;transition:background .25s,color .25s}
.pd-cta:hover{background:var(--color-foreground)}
.pd-cta:hover .cta-arrow{transform:translateX(4px)}
.pd-ghost{display:inline-flex;align-items:center;gap:10px;height:60px;padding:0 24px;border:1px solid var(--color-border-strong);border-radius:999px;font:12px var(--mono);letter-spacing:.14em;transition:border-color .25s,color .25s}
.pd-ghost:hover{border-color:var(--pd-accent);color:var(--pd-accent)}
.pd-ghost svg{width:18px;height:18px}
.pd-soldout{margin:0;font:700 13px var(--mono);letter-spacing:.14em;color:var(--color-foreground-subtle)}
.pd-note{margin:0;font:10px var(--mono);letter-spacing:.14em;color:var(--color-foreground-subtle)}

/* Black stage: the PNGs are transparent and the packs already carry the cells pattern,
   so no texture behind them. */
.pd-hero-media{position:relative;height:min(820px,72vw);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--color-background)}
/* White halo: brightest right behind the product, fading out radially to the black. A vertical
   oval whose horizontal radius stays under half the panel width, so it reaches 0 before the sides. */
.pd-ring{position:absolute;inset:0;
  background:radial-gradient(ellipse 36% 32% at 50% 50%,rgba(255,255,255,.62) 0%,rgba(255,255,255,.46) 42%,rgba(255,255,255,.2) 72%,rgba(255,255,255,.06) 90%,rgba(255,255,255,0) 100%)}
.pd-hero-media picture{position:relative;z-index:1;display:flex;justify-content:center;width:100%;height:100%;align-items:center}
/* A second, tighter glow that follows the pack's own outline. */
.pd-hero-media img{max-height:66%;max-width:62%;object-fit:contain;filter:drop-shadow(0 0 24px rgba(255,255,255,.35)) drop-shadow(0 0 80px rgba(255,255,255,.18));transform:rotate(var(--tilt,0deg))}
/* The homepage seal animation also shifts it out of its card (translate 30%), which here
   pushed it past the panel's edge; same pulse, no shift. */
.pd-hero-media .product-seal{top:36px;right:36px;width:170px;height:170px;transform:rotate(-10deg);animation:pd-seal-pulse 3s ease-in-out infinite}
@keyframes pd-seal-pulse{0%,100%{transform:rotate(-10deg) scale(1)}50%{transform:rotate(-10deg) scale(1.05)}}
.pd-media-tag{position:absolute;bottom:26px;z-index:2;font:11px var(--mono);letter-spacing:.16em;color:var(--color-foreground-subtle)}
.pd-media-tag--left{left:26px}
.pd-media-tag--right{right:26px}

/* === Marquee === */
.pd-marquee{height:76px;background:var(--pd-accent);overflow:hidden;display:flex;align-items:center}
.pd-marquee-track{display:flex;gap:48px;white-space:nowrap;font:700 22px var(--mono);letter-spacing:.08em;color:var(--color-foreground-on-accent);animation:pd-marquee 28s linear infinite}
.pd-marquee-track i{font-style:normal}
@keyframes pd-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* === Lifestyle photo === */
/* The lifestyle photos are portrait/square: a fixed column, cropped only downward,
   so the browser never has to enlarge them. */
.pd-story{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:72px;align-items:center;max-width:1440px;margin:0 auto;padding:110px 5.5vw}
.pd-story--right{grid-template-columns:minmax(0,1fr) minmax(0,520px)}
.pd-story--right .pd-story-photo{order:2}
.pd-story-photo{display:block;height:640px;overflow:hidden}
.pd-story-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pd-story-copy{max-width:620px;display:flex;flex-direction:column;gap:22px}
.pd-story h2{font-size:clamp(44px,5.4vw,84px);line-height:.9;letter-spacing:-.075em}
.pd-story-copy p:last-child{margin:0;font-size:19px;line-height:1.5;color:var(--color-foreground-muted)}

/* Full-width band, only for the 16:9 photos made for it (vp_product_details() 'band'). */
.pd-band-photo{position:relative;height:min(700px,48.5vw);overflow:hidden}
.pd-band-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pd-band-photo::after{content:"";position:absolute;inset:0;pointer-events:none}
.pd-band-photo--text-left::after{background:linear-gradient(90deg,rgba(5,6,7,.9) 0%,rgba(5,6,7,.45) 42%,rgba(5,6,7,0) 65%)}
.pd-band-photo--text-right::after{background:linear-gradient(270deg,rgba(5,6,7,.9) 0%,rgba(5,6,7,.45) 42%,rgba(5,6,7,0) 65%)}
/* Kept to the outer ~30% so it never lands on the person, who sits near the middle. */
.pd-band-photo .pd-story-copy{position:absolute;z-index:1;bottom:72px;max-width:min(480px,29vw);gap:18px}
.pd-band-photo .pd-story-copy p:last-child{font-size:clamp(15px,1.35vw,19px)}
/* band 'narrow' => true: person close to the middle, keep the text to the outer ~24%. */
.pd-band-photo--narrow .pd-story-copy{max-width:min(400px,24vw)}
.pd-band-photo--narrow h2{font-size:clamp(30px,3.7vw,64px)}
.pd-band-photo--text-left .pd-story-copy{left:5.5vw}
.pd-band-photo--text-right .pd-story-copy{right:5.5vw;text-align:right;align-items:flex-end}
.pd-band-photo h2{font-size:clamp(34px,4.4vw,76px);line-height:.9;letter-spacing:-.075em}

/* === Cómo se usa === */
.pd-steps{background:var(--color-background-deep);padding:120px 5.5vw;display:flex;flex-direction:column;gap:56px}
.pd-section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.pd-section-head h2{font-size:clamp(44px,5vw,72px);line-height:.9;letter-spacing:-.075em}
.pd-section-head p{margin:0;font:11px var(--mono);letter-spacing:.14em;color:var(--color-foreground-subtle)}
.pd-steps-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pd-steps-grid li{padding:36px;border:1px solid var(--color-border-subtle);display:flex;flex-direction:column;gap:20px;min-height:220px}
.pd-step-num{font:13px var(--mono);letter-spacing:.14em;color:var(--pd-accent)}
.pd-steps-grid b{font-size:34px;letter-spacing:-.05em}
.pd-steps-grid p{margin:0;font-size:17px;line-height:1.55;color:var(--color-foreground-muted)}
.pd-band{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px 40px;padding:32px 36px;background:var(--pd-accent);color:var(--color-foreground-on-accent)}
.pd-band p{margin:0;max-width:760px;font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.35}
.pd-band a{display:inline-flex;align-items:center;height:52px;padding:0 24px;border:1.5px solid currentColor;border-radius:999px;font:700 12px var(--mono);letter-spacing:.14em}
.pd-band a:hover{background:var(--color-foreground-on-accent);color:var(--pd-accent)}

/* === Ficha técnica + relacionados (paper) === */
.pd-specs,.pd-related{background:var(--color-surface-alt);color:var(--color-foreground-on-alt)}
.pd-specs{padding:120px 5.5vw;display:grid;grid-template-columns:5fr 7fr;gap:24px}
.pd-specs-head{display:flex;flex-direction:column;gap:24px}
.pd-specs-head .pd-eyebrow{color:var(--color-foreground-on-alt-subtle)}
.pd-specs h2,.pd-related h2{color:var(--primitive-color-ink-700);letter-spacing:-.075em;line-height:.9}
.pd-specs h2{font-size:clamp(44px,5vw,72px)}
.pd-specs-head>p:last-child{margin:0;font-size:17px;line-height:1.55;color:var(--color-foreground-on-alt-muted)}
.pd-specs-list{margin:0;border-bottom:1px solid var(--color-border-on-alt)}
.pd-specs-list div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:22px 0;border-top:1px solid var(--color-border-on-alt)}
.pd-specs-list dt{font:12px var(--mono);letter-spacing:.14em;color:var(--color-foreground-on-alt-subtle)}
.pd-specs-list dd{margin:0;font-size:16px;font-weight:700;line-height:1.5;color:var(--primitive-color-ink-700)}
.pd-related{padding:0 5.5vw 120px;display:flex;flex-direction:column;gap:40px}
.pd-related h2{font-size:clamp(36px,4vw,56px);border-top:2px solid var(--primitive-color-ink-700);padding-top:40px}
.pd-related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pd-card{display:flex;flex-direction:column;gap:12px;color:var(--primitive-color-ink-700);transition:transform .25s}
.pd-card:hover{transform:translateY(-4px)}
.pd-card-media{height:300px;background:#fff;display:flex;align-items:center;justify-content:center}
.pd-card-media img{max-height:250px;max-width:80%;object-fit:contain}
.pd-card-eyebrow{font:10px var(--mono);letter-spacing:.14em;color:var(--color-foreground-on-alt-subtle)}
.pd-card-name{font-size:22px;font-weight:700;letter-spacing:-.04em}
.pd-card-price{font-size:16px;font-weight:700}
.pd-card-price del{opacity:.5;margin-right:6px}
.pd-card-price ins{text-decoration:none}
.pd-card-link{font:11px var(--mono);letter-spacing:.14em;color:#1066C4}

.pd-footer{padding:64px 5.5vw;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px;border-top:1px solid var(--color-border-subtle)}
.pd-footer img{height:56px}
.pd-footer p{margin:0;max-width:560px;font:11px/1.8 var(--mono);letter-spacing:.1em;color:var(--color-foreground-subtle);text-align:right}
.pd-footer a:hover{color:var(--color-accent)}

@media(max-width:900px){
  .pd-hero{grid-template-columns:1fr;gap:32px;padding:76px 18px 56px}
  .pd-hero-media{order:-1;height:auto;aspect-ratio:1/1.05}
  .pd-hero-media .product-seal{top:16px;right:16px;width:110px;height:110px}
  .pd-desc,.pd-story-copy p:last-child{font-size:17px}
  .pd-price{font-size:36px}
  /* Phones: quantity, buy button and WhatsApp each get a full row so no label wraps. */
  .pd-cart,.pd-buy{width:100%}
  .pd-cart{flex-direction:column;gap:12px}
  .pd-qty{justify-content:space-between;height:56px}
  .pd-qty input{flex:1}
  .pd-cta,.pd-ghost{width:100%;height:56px;justify-content:center;white-space:nowrap}
  .pd-cta{padding:0 16px;font-size:13px;letter-spacing:.1em}
  .pd-chips-label{flex-basis:100%}
  /* Phones: the three key stats sit in one row; labels shrink so each fits its column.
     CBD has five, one of them "ACOMPAÑAMIENTO", so it keeps two columns. */
  .pd-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px}
  .pd-stats div{min-width:0}
  .pd-stats b{font-size:17px;overflow-wrap:normal}
  .pd-stats span{font-size:9px;letter-spacing:.06em;line-height:1.5}
  .pd-stats:has(>div:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-stats:has(>div:nth-child(4)) div:last-child:nth-child(odd){grid-column:span 2}
  .pd-note{letter-spacing:.08em;line-height:1.7}
  .pd-marquee{height:60px}
  .pd-marquee-track{font-size:17px;gap:32px}
  /* Mobile uses the landscape crops from products/mobile/ at their own ratio. */
  .pd-story,.pd-story--right{grid-template-columns:1fr;gap:28px;padding:0 0 64px}
  .pd-story--right .pd-story-photo{order:0}
  .pd-story-photo{height:auto;aspect-ratio:960/713}
  .pd-story-copy{padding:0 18px}
  /* At small sizes -.075em glues words together ("UNARESPIRACIÓN"). */
  .pd-title,.pd h2{letter-spacing:-.05em;word-spacing:.08em}
  /* Phones: vertical crop (products/mobile/<x>-band-mobile.webp, person in the lower 2/3).
     Eyebrow + title sit over the top of the photo on a dark fade; the paragraph goes under it. */
  .pd-band-photo{height:auto;display:grid;grid-template-columns:minmax(0,1fr);padding-bottom:64px}
  .pd-band-photo picture{grid-area:1/1}
  .pd-band-photo img{height:auto}
  .pd-band-photo::after,.pd-band-photo--text-left::after,.pd-band-photo--text-right::after{position:static;grid-area:1/1;z-index:0;
    background:linear-gradient(180deg,rgba(5,6,7,.88) 0%,rgba(5,6,7,.55) 22%,rgba(5,6,7,0) 42%)}
  .pd-band-photo .pd-story-copy{display:contents}
  .pd-band-photo .pd-eyebrow,.pd-band-photo h2{grid-area:1/1;align-self:start;z-index:1;text-align:left;margin-left:18px;margin-right:18px}
  .pd-band-photo .pd-eyebrow{margin-top:22px}
  .pd-band-photo h2{margin-top:44px;font-size:clamp(34px,10vw,48px)}
  .pd-band-photo .pd-story-copy p:last-child{grid-area:2/1;margin:24px 18px 0;text-align:left;font-size:17px}
  /* 'mobile' => 'left': person on the right of the crop, title over the free left ~42% on a side fade. */
  .pd-band-photo--mobile-left::after{background:linear-gradient(90deg,rgba(5,6,7,.9) 0%,rgba(5,6,7,.6) 28%,rgba(5,6,7,0) 50%)}
  .pd-band-photo--mobile-left .pd-eyebrow,.pd-band-photo--mobile-left h2{max-width:42%;margin-right:0}
  .pd-band-photo--mobile-left .pd-eyebrow{margin-top:20px;font-size:10px;letter-spacing:.12em}
  .pd-band-photo--mobile-left h2{margin-top:50px;font-size:clamp(24px,7.2vw,36px)}
  .pd-band-photo--mobile-left.pd-band-photo--narrow .pd-eyebrow,.pd-band-photo--mobile-left.pd-band-photo--narrow h2{max-width:36%}
  /* Sized so the longest single word ("MOVIMIENTO.") still fits the 36% column. */
  .pd-band-photo--mobile-left.pd-band-photo--narrow h2{font-size:clamp(19px,5.6vw,28px)}
  /* Photos with no free space at all (band 'mobile' => 'below'): all text under the photo. */
  .pd-band-photo--mobile-below::after{display:none}
  .pd-band-photo--mobile-below .pd-eyebrow{grid-area:2/1;margin-top:28px}
  .pd-band-photo--mobile-below h2{grid-area:3/1;margin-top:14px}
  .pd-band-photo--mobile-below .pd-story-copy p:last-child{grid-area:4/1;margin-top:18px}
  .pd-steps,.pd-specs{padding:72px 18px}
  .pd-steps-grid,.pd-specs{grid-template-columns:1fr}
  .pd-steps-grid li{min-height:0;padding:28px}
  .pd-specs-list div{grid-template-columns:1fr;gap:8px}
  .pd-related{padding:0 18px 72px}
  .pd-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .pd-card-media{height:200px}
  .pd-card-media img{max-height:170px}
  .pd-card-name{font-size:17px}
  .pd-footer{padding:48px 18px}
  .pd-footer p{text-align:left}
}
@media(prefers-reduced-motion:reduce){.pd-marquee-track{animation:none}}