/* ==========================================================================
   Gul Beauty Soap page — v2.10
   Loaded only on the Products page (see functions.php).
   Everything is scoped under .gbs. Hidden "before animation" states exist only
   when <html> has .gbs-js, so the page is fully visible without JavaScript and
   with prefers-reduced-motion.
   ========================================================================== */

.gbs .gbs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.gbs .gbs-swatch{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--tint);box-shadow:inset 0 0 0 2px var(--accent);flex:none;}

/* ---------- HERO ---------- */
.gbs-hero{display:grid;gap:40px;align-items:center;padding-top:8px;padding-bottom:56px;}
@media(min-width:960px){.gbs-hero{grid-template-columns:5fr 7fr;gap:56px;}}
.gbs-hero__title{margin:0 0 20px;font-size:inherit;}
.gbs-line{display:block;overflow:hidden;padding-bottom:.08em;}
.gbs-line > span{display:block;}
.gbs-line:not(.gbs-line--sub) > span{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:clamp(2.75rem,1.6rem + 4.4vw,5rem);line-height:.98;letter-spacing:-.025em;color:var(--charcoal);}
.gbs-line--sub > span{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:600;font-size:var(--fs-4);line-height:1.2;color:var(--gul);margin-top:12px;}
.gbs-hero__lead{font-size:var(--fs-5);margin:0 0 28px;}
.gbs-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px;}
.gbs-facts{display:flex;flex-wrap:wrap;gap:12px 36px;list-style:none;margin:0;padding:24px 0 0;border-top:1px solid var(--line);font-size:var(--fs-7);color:var(--coffee);}
.gbs-facts strong{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:var(--fs-3);line-height:1;color:var(--charcoal);margin-bottom:4px;}
.gbs-hero__figure{margin:0;}
.gbs-hero__figure picture,.gbs-hero__figure img{display:block;width:100%;height:auto;}
.gbs-hero__figure img{border-radius:var(--radius);border:1px solid var(--line);background:var(--mist);}
.gbs-hero__figure figcaption{font-size:.88rem;color:var(--coffee);margin-top:10px;}

/* the one page-load moment: title lines rise, photo wipes open */
.gbs-js .gbs-line > span{transform:translateY(105%);animation:gbs-rise .85s cubic-bezier(.2,.8,.2,1) forwards;}
.gbs-js .gbs-line--sub > span{animation-delay:.14s;}
.gbs-js .gbs-hero__figure img{clip-path:inset(0 100% 0 0);animation:gbs-wipe 1.1s cubic-bezier(.77,0,.18,1) .2s forwards;}
@keyframes gbs-rise{to{transform:none;}}
@keyframes gbs-wipe{to{clip-path:inset(0 0 0 0);}}

/* ---------- FINDER ---------- */
.gbs-finder{padding-top:24px;padding-bottom:56px;}
.gbs-finder__head h2{margin-bottom:6px;}
.gbs-finder__head p{margin:0 0 22px;color:var(--coffee);}
.gbs-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;}
.gbs-chip{font:600 var(--fs-7)/1 "Bricolage Grotesque",sans-serif;padding:13px 18px;border:1px solid var(--line);background:#fff;color:var(--charcoal);border-radius:var(--radius);cursor:pointer;transition:background-color .18s,color .18s,border-color .18s,transform .18s;}
.gbs-chip:hover{border-color:var(--navy);}
.gbs-chip:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
.gbs-chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-1px);}

.gbs-picks{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,1fr);}
@media(min-width:640px){.gbs-picks{grid-template-columns:repeat(3,1fr);}}
@media(min-width:960px){.gbs-picks{grid-template-columns:repeat(5,1fr);}}
.gbs-picks li{margin:0;}
.gbs-picks a{position:relative;display:flex;flex-direction:column;gap:4px;height:100%;padding:16px 16px 18px;background:var(--tint);border-radius:var(--radius);border:2px solid transparent;color:var(--charcoal);text-decoration:none;transition:transform .25s,opacity .25s,border-color .25s,box-shadow .25s;}
.gbs-picks a:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
.gbs-picks .gbs-swatch{width:22px;height:22px;background:#fff;margin-bottom:8px;}
.gbs-pick__name{font:700 var(--fs-5)/1.1 "Bricolage Grotesque",sans-serif;}
.gbs-pick__for{font-size:.82rem;line-height:1.35;color:var(--coffee);}
.gbs-pick__flag{position:absolute;top:12px;right:12px;font:600 .72rem/1 "Bricolage Grotesque",sans-serif;background:var(--accent);color:#fff;padding:5px 8px;border-radius:2px;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;}
.gbs-picks.has-filter li.is-match a{border-color:var(--accent);transform:translateY(-6px);box-shadow:0 14px 26px -16px var(--accent);}
.gbs-picks.has-filter li.is-match .gbs-pick__flag{opacity:1;transform:none;}
.gbs-picks.has-filter li:not(.is-match) a{opacity:.38;}

/* ---------- STICKY SWITCHER ---------- */
.gbs-switch{position:sticky;top:68px;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.gbs-switch__in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;}
.gbs-switch__in::-webkit-scrollbar{display:none;}
.gbs-switch a{position:relative;display:inline-flex;align-items:center;gap:9px;padding:15px 16px;font:600 var(--fs-7)/1 "Bricolage Grotesque",sans-serif;color:var(--coffee);text-decoration:none;white-space:nowrap;transition:color .2s;}
.gbs-switch a::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.gbs-switch a:hover{color:var(--charcoal);}
.gbs-switch a.is-active{color:var(--charcoal);}
.gbs-switch a.is-active::after{transform:scaleX(1);}
.gbs-switch a:focus-visible{outline:2px solid var(--navy);outline-offset:-2px;}

/* ---------- SOAP PANELS ---------- */
.gbs-soap{background:var(--tint);padding:80px 0;scroll-margin-top:124px;overflow:hidden;}
.gbs-soap__grid{display:grid;gap:40px;align-items:center;}
@media(min-width:900px){
  .gbs-soap__grid{grid-template-columns:1fr 1fr;gap:72px;}
  .gbs-soap.is-flip .gbs-stage{order:2;}
}
.gbs-stage{position:relative;aspect-ratio:1/1;max-width:560px;width:100%;margin:0 auto;background:var(--tint);container-type:inline-size;will-change:transform;transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.gbs-stage picture{display:block;}
.gbs-stage img{display:block;width:100%;height:auto;position:relative;z-index:1;}
/* product photos are shot on pure white; multiply lets the panel colour show through */
.gbs-stage img{mix-blend-mode:multiply;}
.gbs-ghost{position:absolute;z-index:0;left:0;top:3%;font:800 clamp(4rem,10vw,8rem)/.9 "Bricolage Grotesque",sans-serif;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px var(--accent);opacity:.32;font-size:19cqw;pointer-events:none;user-select:none;white-space:nowrap;will-change:transform;}
.gbs-soap.is-flip .gbs-ghost{left:auto;right:0;}

.gbs-soap__body{max-width:560px;}
.gbs-for{margin:0 0 10px;font-size:var(--fs-7);color:var(--ink-soft);}
.gbs-for strong{font-family:"Bricolage Grotesque",sans-serif;}
.gbs-soap__name{font-size:var(--fs-1);line-height:1;margin:0 0 14px;color:var(--charcoal);}
.gbs-soap__tag{font-size:var(--fs-5);margin:0 0 26px;}

.gbs-benefits{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px;}
.gbs-benefits li{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;font-size:.98rem;line-height:1.45;}
.gbs-benefits svg{margin-top:1px;overflow:visible;}
.gbs-benefits .c{fill:#fff;stroke:var(--accent);stroke-width:1.5;}
.gbs-benefits .t{fill:none;stroke:var(--ink-soft);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.gbs-js .gbs-benefits .c{stroke-dasharray:66;stroke-dashoffset:66;}
.gbs-js .gbs-benefits .t{stroke-dasharray:20;stroke-dashoffset:20;}
.gbs-js .gbs-soap.is-in .gbs-benefits .c{stroke-dashoffset:0;transition:stroke-dashoffset .6s ease calc(var(--i) * 110ms + 250ms);}
.gbs-js .gbs-soap.is-in .gbs-benefits .t{stroke-dashoffset:0;transition:stroke-dashoffset .35s ease calc(var(--i) * 110ms + 650ms);}

/* the photo settles into place when its panel arrives */
.gbs-js .gbs-stage img{transform:scale(.9) rotate(-5deg);transition:transform 1s cubic-bezier(.2,.8,.2,1);}
.gbs-js .gbs-soap.is-in .gbs-stage img{transform:none;}

.gbs-meta{margin:0 0 20px;padding:18px 0 0;border-top:1px solid rgba(10,31,60,.18);display:grid;gap:14px;}
.gbs-meta dt{font:700 var(--fs-7)/1.2 "Bricolage Grotesque",sans-serif;color:var(--ink-soft);margin-bottom:3px;}
.gbs-meta dd{margin:0;font-size:.92rem;line-height:1.5;}
.gbs-badges{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.gbs-badges li{font:600 .78rem/1 "Bricolage Grotesque",sans-serif;padding:7px 11px;border:1px solid var(--accent);background:rgba(255,255,255,.6);color:var(--ink-soft);border-radius:2px;}

/* ---------- COMPARE ---------- */
.gbs-compare h2{margin-bottom:28px;}
.gbs-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);}
.gbs-table-wrap:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
.gbs-table{width:100%;min-width:640px;border-collapse:collapse;font-size:.95rem;}
.gbs-table th,.gbs-table td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);}
.gbs-table thead th{background:var(--charcoal);color:#fff;font:600 var(--fs-7)/1.2 "Bricolage Grotesque",sans-serif;border-bottom:0;}
.gbs-table tbody tr{transition:background-color .2s;}
.gbs-table tbody tr:hover{background:var(--tint);}
.gbs-table tbody tr:last-child > *{border-bottom:0;}
.gbs-table tbody th{font:700 1rem/1.2 "Bricolage Grotesque",sans-serif;white-space:nowrap;}
.gbs-table tbody th a{display:inline-flex;align-items:center;gap:10px;color:var(--charcoal);text-decoration:none;}
.gbs-table tbody th a:hover{color:var(--gul);}

/* ---------- HOW TO USE ---------- */
.gbs-use{background:var(--charcoal);color:#fff;padding:88px 0;}
.gbs-use h2{color:#fff;margin-bottom:40px;}
.gbs-use__steps{list-style:none;margin:0;padding:0;display:grid;gap:36px;counter-reset:use;}
@media(min-width:800px){.gbs-use__steps{grid-template-columns:repeat(3,1fr);gap:48px;}}
.gbs-use__steps li{counter-increment:use;position:relative;padding-top:68px;}
.gbs-use__steps li::before{content:counter(use);position:absolute;top:0;left:0;font:800 3.4rem/1 "Bricolage Grotesque",sans-serif;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.7);}
.gbs-use__steps li::after{content:"";position:absolute;top:26px;left:52px;right:0;height:1px;background:rgba(255,255,255,.22);}
.gbs-use__steps h3{color:#fff;font-size:var(--fs-4);margin-bottom:8px;}
.gbs-use__steps p{margin:0;opacity:.82;font-size:.98rem;}

/* ---------- RESPONSIVE / MOTION ---------- */
@media(max-width:899px){
  .gbs-soap{padding:56px 0;}
  .gbs-stage{max-width:420px;}
  .gbs-use__steps li::after{display:none;}
}
@media(max-width:480px){
  .gbs-switch a{padding:14px 12px;}
}
@media(prefers-reduced-motion:reduce){
  .gbs-js .gbs-line > span,
  .gbs-js .gbs-hero__figure img{animation:none;transform:none;clip-path:none;}
  .gbs-js .gbs-stage img{transform:none;transition:none;}
  .gbs-js .gbs-benefits .c,.gbs-js .gbs-benefits .t{stroke-dashoffset:0;transition:none;}
  .gbs-stage{transition:none;}
  .gbs-picks a,.gbs-pick__flag,.gbs-chip,.gbs-switch a::after{transition:none;}
}