/* ==========================================================================
   THE ADORÉE — PAGES
   Page-specific composition only. Components live in components.css.

   Moved verbatim from the approved prototype (adoree-prototype-v3.html).
   Declarations are unchanged. Every value that can be a token is a token;
   the tokens themselves live in tokens.css and are never edited here.
   ========================================================================== */


/* ---------- Home — hero ---------- */
/* ---------- hero ---------- */
.hero{position:relative;height:min(94vh,900px);min-height:540px;overflow:hidden;margin-top:calc(-1 * var(--header-h))}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--e-soft);z-index:0}
.hero__slide.on{opacity:1;z-index:1}
.hero__slide img,.hero__slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;transform:scale(1.06);
  transition:transform 9s linear;z-index:0}
.hero__slide.on img,.hero__slide.on video{transform:scale(1)}
.hero__slide::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(51,44,45,.42) 0%,rgba(51,44,45,.12) 34%,rgba(51,44,45,.52) 100%)}

/* ---------- Specular light sweep on hero (single load sheen, non-looping) ---------- */
@keyframes light-sweep {
  0% { transform: translate3d(-100%, -100%, 0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate3d(100%, 100%, 0); opacity: 0; }
}
.hero::before,
.pagehero::before,
.lx-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, 0.04) 47%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 53%,
    transparent 60%
  );
  transform: translate3d(-100%, -100%, 0);
  pointer-events: none;
  z-index: 2;
  animation: light-sweep 2.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s 1 forwards;
}
.hero__inner{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--gutter) clamp(48px,7vw,104px);max-width:var(--maxw);margin:0 auto;color:var(--c-white)}
.hero__inner .eyebrow{color:rgba(255,255,255,.82)}
.hero h1, .hero .t-hero{color:var(--c-white);max-width:16ch;margin:var(--s-4) 0 var(--s-5)}
.hero__sub{color:rgba(255,255,255,.9);max-width:44ch;margin-bottom:var(--s-6);font-size:var(--t-lead)}
.hero__cta{display:flex;gap:var(--s-3);flex-wrap:wrap}
.hero__dots{position:absolute;left:var(--gutter);bottom:clamp(22px,3vw,40px);z-index:4;display:flex;gap:var(--s-2)}
.hero__dots button{width:34px;height:2px;background:rgba(255,255,255,.42);transition:background var(--d-fast)}
.hero__dots button.on{background:var(--c-white)}
@media(max-width:900px){.hero{height:min(88vh,720px)}}

/* ---------- Home — palette band ---------- */
/* ---------- palette band ---------- */
.palette{background:var(--c-bg);position:relative}
.palette.has-bg{position:relative;clip-path:inset(0);overflow:hidden;padding-bottom:clamp(40px,5vw,64px)}
.palette.has-bg .palette__bg{
  position:fixed;top:0;left:0;
  width:100vw!important;height:100vh!important;
  min-width:100vw!important;min-height:100vh!important;
  max-width:none!important;max-height:none!important;
  object-fit:cover!important;
  z-index:0;pointer-events:none;
  animation:none!important;transform:none!important;will-change:transform
}
.palette.has-bg .palette__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.78) calc(100% - 120px),var(--c-bg) 100%);
  z-index:1;pointer-events:none
}
.palette.has-bg > :not(.palette__bg):not(.palette__overlay),
.palette.has-bg > .wrap{position:relative;z-index:2}
.palette a.btn{color:var(--c-white)!important;text-decoration:none!important}
.palette a.btn:hover{background:var(--c-white)!important;color:var(--c-btn)!important;border-color:var(--c-btn)!important}
.palette .palette__cta{text-align:center;margin-top:clamp(28px,3.5vw,40px)}
.tones{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--c-line);border:1px solid var(--c-line)}
.tone{background:var(--c-surface);padding:clamp(26px,3vw,44px);text-align:center;transition:background var(--d-mid)}
.tone:hover{background:var(--c-bg)}
.tone__sw{display:flex;justify-content:center;gap:7px;margin-bottom:var(--s-5)}
.tone__sw span{width:30px;height:30px;border-radius:var(--r-pill)}
.tone h3{margin-bottom:var(--s-3)}
.tone p{color:var(--c-muted);font-size:var(--t-small)}
@media(max-width:800px){.tones{grid-template-columns:1fr}}

/* ---------- Home / Our Story — editorial split layout ---------- */
.edit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,26px)}
.edit--asym{grid-template-columns:4.5fr 7fr;gap:clamp(20px,3.5vw,64px);align-items:center}

@media(max-width:900px){.edit,.edit--asym{grid-template-columns:1fr}.edit__tile{min-height:420px}}


/* ---------- Home — category grid ---------- */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,26px)}

/* Adaptive reflow by tile count */
.cats[data-count="3"]{grid-template-columns:repeat(3,1fr)}
.cats[data-count="4"]{grid-template-columns:repeat(2,1fr)}
.cats[data-count="5"]{grid-template-columns:repeat(6,1fr)}
.cats[data-count="5"] > :nth-child(-n+2){grid-column:span 3}
.cats[data-count="5"] > :nth-child(n+3){grid-column:span 2}
.cats[data-count="6"]{grid-template-columns:repeat(3,1fr)}
.cats[data-count="8"]{grid-template-columns:repeat(4,1fr)}

@media(min-width:641px) and (max-width:1023px){
  .cats[data-count="3"]{grid-template-columns:repeat(2,1fr)}
  .cats[data-count="3"] > :last-child{grid-column:span 2}
  .cats[data-count="5"]{grid-template-columns:repeat(2,1fr)}
  .cats[data-count="5"] > :nth-child(-n+2){grid-column:auto}
  .cats[data-count="5"] > :nth-child(n+3){grid-column:auto}
  .cats[data-count="5"] > :last-child{grid-column:span 2}
  .cats[data-count="6"],.cats[data-count="8"]{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:640px){
  .cats,
  .cats[data-count="3"],
  .cats[data-count="4"],
  .cats[data-count="5"],
  .cats[data-count="6"],
  .cats[data-count="8"]{grid-template-columns:1fr}
  .cats[data-count="3"] > :last-child,
  .cats[data-count="5"] > :nth-child(-n+2),
  .cats[data-count="5"] > :nth-child(n+3),
  .cats[data-count="5"] > :last-child{grid-column:auto}
  .cat--tall{grid-row:auto;min-height:340px}
}

/* ---------- Home — word row over image ---------- */
.wordband{position:relative;overflow:hidden;padding-block:clamp(64px,9vw,150px)}
.wordband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wordband::after{content:'';position:absolute;inset:0;background:rgba(249,244,245,.58)}
.wordband__row{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-6);
  font-family:var(--f-display);font-size:clamp(28px,4.6vw,62px);letter-spacing:var(--ls-display)}
.wordband__row a{transition:color var(--d-fast)}
.wordband__row a:hover{color:var(--c-accent)}
.floatcards{position:relative;z-index:3;display:flex;justify-content:space-between;gap:var(--s-5);
  max-width:var(--maxw);margin:0 auto;padding:clamp(40px,5vw,80px) var(--gutter) 0}

@media(max-width:820px){.floatcards{display:none}}

/* ---------- Home / Our Story — cut band ---------- */
/* ---------- height-enhancing feature ---------- */
.cutband{background:var(--c-dark);color:var(--c-on-dark)}
.cutband h2,.cutband h3{color:var(--c-on-dark)}
.cutband .eyebrow{color:var(--c-on-dark-muted)}
.cutband p{color:var(--c-on-dark-muted)}
.cuts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px)}
/* A7 — the rule was white, which only resolves on .cutband. size-guide.html
   already worked around that with an inline border-color on every .cut. The
   default is now the light-ground hairline and the white one is scoped to the
   dark band, so the component works on either ground. No page changes
   appearance: the cutband pages keep the white rule, and size-guide's inline
   override already set exactly this value. */
.cut{border-top:1px solid var(--c-line);padding-top:var(--s-5)}
.cutband .cut{border-top-color:rgba(255,255,255,.18)}
.cut .n{font-family:var(--f-h3);font-size:var(--t-h3);color:var(--c-accent);display:block;margin-bottom:var(--s-3)}
.cut h3{font-size:var(--t-h4);margin-bottom:var(--s-3)}
.cuts--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1040px){.cuts--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.cuts,.cuts--4{grid-template-columns:1fr}}

/* ---------- Home — instagram grid ---------- */
/* ---------- instagram ---------- */
.iggrid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-2)}
.iggrid > div,.iggrid > a{aspect-ratio:1;background:var(--c-surface-2);overflow:hidden;position:relative;display:block}
.iggrid img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out)}
@media(hover:hover) and (pointer:fine){
  .iggrid > div:hover img,.iggrid > a:hover img{transform:scale(1.07)}
}
@media(max-width:900px){.iggrid{grid-template-columns:repeat(3,1fr)}}

/* ---------- Home / Our Story — newsletter ---------- */
.news{position:relative;overflow:hidden;padding:clamp(48px,7vw,120px) var(--gutter);text-align:center}
.news img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.news::after{content:'';position:absolute;inset:0;background:rgba(51,44,45,.5)}
.news__in{position:relative;z-index:2;color:var(--c-white);max-width:620px;margin:0 auto}
.news h2{color:var(--c-white);margin:var(--s-3) 0 var(--s-4)}
.news p{color:rgba(255,255,255,.86)}
.news .eyebrow{color:rgba(255,255,255,.78)}

/* ---------- Shop / Our Story — page hero and breadcrumb ---------- */
.pagehero{position:relative;height:min(52vh,440px);min-height:280px;overflow:hidden;
  margin-top:calc(-1 * var(--header-h));display:flex;align-items:flex-end}
.pagehero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 26%;z-index:0}
.pagehero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(51,44,45,.5),rgba(51,44,45,.34));z-index:1}
.pagehero__in{position:relative;z-index:3;color:var(--c-white);width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--gutter) clamp(28px,4vw,56px)}
.pagehero h1{color:var(--c-white);margin-top:var(--s-3)}
.crumb{font-size:var(--t-micro);letter-spacing:var(--ls-ui);text-transform:uppercase;color:var(--c-muted);
  padding-block:var(--s-5)}

/* ---------- Shop — archive layout ---------- */
.shop{display:grid;grid-template-columns:250px 1fr;gap:clamp(24px,3vw,56px);align-items:start}

@media(max-width:900px){.shop{grid-template-columns:1fr}.filters{display:none}.filters.open{display:block;position:static;max-height:none;overflow-y:visible;padding-right:0;padding-bottom:var(--s-4)}
  .mobfilter{display:inline-flex}}

/* ---------- Product — gallery, info column, buy controls ---------- */
.pdp{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,80px);align-items:start}
.gal{display:grid;grid-template-columns:88px 1fr;gap:var(--s-3)}
.gal__thumbs{display:grid;gap:var(--s-3);align-content:start}
.gal__thumbs button{aspect-ratio:4/5;background:var(--c-surface-2);border:1px solid transparent;overflow:hidden;
  transition:border-color var(--d-fast),opacity var(--d-fast);cursor:pointer;padding:0;opacity:.72}
.gal__thumbs button:hover{opacity:1;border-color:rgba(181,149,139,.45)}
.gal__thumbs button.on{border-color:var(--c-accent);opacity:1}
.gal__thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.gal__main{aspect-ratio:4/5;background:var(--c-surface-2);overflow:hidden;position:relative;outline:none}
.gal__main img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s var(--e-ui)}
.gal__arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;min-width:30px;min-height:30px;
  border-radius:var(--r-pill);background:rgba(249,244,245,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(61,53,54,.12);color:var(--c-text);display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:3;opacity:.8;padding:0;
  transition:opacity var(--d-fast),background var(--d-fast),transform var(--d-fast),color var(--d-fast)}
.gal__arrow:hover{opacity:1;background:rgba(249,244,245,.95);color:var(--c-btn);transform:translateY(-50%) scale(1.08)}
.gal__arrow:active{transform:translateY(-50%) scale(.95)}
.gal__arrow--prev{left:var(--s-3)}
.gal__arrow--next{right:var(--s-3)}
.gal__arrow svg{width:12px;height:12px;display:block;stroke:currentColor}
@media(hover:none){.gal__arrow{opacity:.9}}
.pdp__info{position:sticky;top:104px}
.pdp h1{margin:var(--s-3) 0 var(--s-4)}
.price{font-size:var(--t-h3);font-family:var(--f-h3);margin-bottom:var(--s-5)}
.price s, .price del{color:var(--c-muted);font-size:var(--t-lead);margin-right:var(--s-3);text-decoration:line-through;opacity:.75}
.price ins{text-decoration:none;font-weight:600}
.pdp-offer-deadline{margin-top:var(--s-2);font-size:var(--t-small);color:var(--c-accent);font-weight:500}
.pdp-coming-soon .btn.is-disabled{background:var(--c-surface-2);color:var(--c-muted);border:1px solid var(--c-line);cursor:not-allowed;opacity:.85}
.toneline{display:flex;align-items:center;gap:var(--s-3);padding-block:var(--s-4);
  border-block:1px solid var(--c-line);font-size:var(--t-small);color:var(--c-muted);margin-bottom:var(--s-5)}
.swatches{display:flex;gap:var(--s-3);margin:var(--s-3) 0 var(--s-6)}
.swatch{width:36px;height:36px;border-radius:var(--r-pill);border:1px solid var(--c-line);position:relative;
  transition:transform var(--d-fast)}
.swatch.on::after{content:'';position:absolute;inset:-5px;border:1px solid var(--c-accent);border-radius:var(--r-pill)}
.swatch:hover{transform:scale(1.06)}
.sizes{display:flex;gap:var(--s-2);margin:var(--s-3) 0 var(--s-5);flex-wrap:wrap}
.size{min-width:54px;height:46px;padding-inline:var(--s-3);border:1px solid var(--c-inactive);display:flex;
  align-items:center;justify-content:center;font-size:var(--t-small);transition:var(--d-fast)}
.size:hover{border-color:var(--c-accent)}
.size.on{background:var(--c-text);color:var(--c-white);border-color:var(--c-text)}
.size.out{color:var(--c-inactive);text-decoration:line-through;cursor:not-allowed}
.stock{font-size:var(--t-micro);letter-spacing:var(--ls-ui);text-transform:uppercase;color:var(--c-text);
  margin-bottom:var(--s-5);display:flex;align-items:center;gap:var(--s-2)}
.stock::before{content:'';width:6px;height:6px;border-radius:var(--r-pill);background:var(--c-accent)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--c-inactive);margin-bottom:var(--s-4)}
.qty button{width:42px;height:46px;font-size:16px}
.qty span{width:44px;text-align:center;font-size:var(--t-small)}
.pdpbuy{display:flex;gap:var(--s-2);margin-bottom:var(--s-4)}
.pdpbuy .btn{flex:1}
.pdpmeta{display:flex;gap:var(--s-5);flex-wrap:wrap;font-size:var(--t-micro);letter-spacing:var(--ls-ui);
  text-transform:uppercase;color:var(--c-muted);margin-bottom:var(--s-6)}

@media(max-width:860px){
  .pdp{grid-template-columns:1fr}.gal{grid-template-columns:1fr}
  .gal__thumbs{grid-auto-flow:column;grid-auto-columns:74px;overflow-x:auto;order:2}
  .pdp__info{position:static}
  .stickybuy.on{display:flex}
}

/* ---------- Product — editorial band and fit grid ---------- */
.pdp-ed{position:relative;overflow:hidden;margin-block:clamp(48px,6vw,110px)}
.pdp-ed__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.5vw,44px);align-items:center}
.pdp-ed__grid img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media(max-width:860px){.pdp-ed__grid{grid-template-columns:1fr}}
.fitgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)}
.fitgrid>div{border-top:1px solid var(--c-line);padding-top:var(--s-5)}
.fitgrid h4{font-family:var(--f-h4);font-size:var(--t-h4);margin-bottom:var(--s-3)}
.fitgrid p{color:var(--c-muted);font-size:var(--t-small)}
@media(max-width:760px){.fitgrid{grid-template-columns:1fr}}

.ph-video{position:relative;background:var(--c-surface-2);aspect-ratio:16/9;display:flex;align-items:center;
  justify-content:center;border:1px dashed var(--c-inactive)}
.ph-video span{font-size:var(--t-micro);letter-spacing:var(--ls-ui);text-transform:uppercase;color:var(--c-muted)}
/* A8 — the slot the review plugin mounts into. Same marked-placeholder idiom as
   .ph-video, but sized by its content rather than by an aspect ratio, because
   the plugin's height depends on how many reviews there are. */
.ph-embed{background:var(--c-surface-2);border:1px dashed var(--c-inactive);
  padding:clamp(32px,5vw,72px) var(--s-5);text-align:center}
.ph-embed span{display:block;font-size:var(--t-micro);letter-spacing:var(--ls-ui);
  text-transform:uppercase;color:var(--c-muted);margin-bottom:var(--s-4)}
.ph-embed p{max-width:56ch;margin-inline:auto;font-size:var(--t-small);color:var(--c-text)}

/* ---------- Find Your Palette — full-page background ---------- */
body.page-template-page-find-your-palette,
body:has(.quiz) {
  background-color: var(--c-bg);
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.40)),
    url('../img/adoree-palette-bg.jpg');
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.40)),
    image-set(
      url('../img/adoree-palette-bg.webp') type('image/webp'),
      url('../img/adoree-palette-bg.jpg') type('image/jpeg')
    );
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


/* ---------- Find Your Palette — quiz ---------- */
.quiz-head { margin-bottom: clamp(28px, 4vw, 52px); }
.quiz-guide { max-width: 48ch; margin: var(--s-3) auto 0; font-size: var(--t-small); color: var(--c-muted); line-height: 1.6; }
.quiz {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 40px rgba(31, 27, 28, 0.05), 0 2px 6px rgba(31, 27, 28, 0.02);
  border-radius: 4px;
  padding: clamp(32px, 4.5vw, 64px) clamp(20px, 4vw, 52px);
}
.q { display: none; }
.q.on { display: block; }
.q h2 { margin: var(--s-4) 0 var(--s-8); font-size: clamp(20px, 2.2vw, 28px); font-weight: 400; line-height: 1.35; }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.opt {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  padding: var(--s-7) var(--s-5);
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
  transition: transform var(--d-fast) var(--e-ui), border-color var(--d-fast), box-shadow var(--d-fast);
}
.opt:hover {
  border-color: var(--c-accent);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(184, 115, 87, 0.12);
}
.opt .lb { font-family: var(--f-h4); font-size: var(--t-h4); margin-bottom: var(--s-2); color: var(--c-text); }
.opt .sub { font-size: var(--t-small); color: var(--c-muted); }
.prog { height: 2px; background: rgba(0, 0, 0, 0.06); margin-top: var(--s-8); border-radius: 1px; overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--c-accent); transition: width var(--d-mid) var(--e-ui); }
.result { display: none; }
.result.on { display: block; }
.result .big { font-family: var(--f-display); font-size: var(--t-h1); margin: var(--s-4) 0; }
@media(max-width:720px) {
  .opts { grid-template-columns: 1fr; }
  .quiz { padding: var(--s-6) var(--s-4); }
}


/* ---------- Cart / checkout / account ---------- */
.two{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(28px,4vw,72px);align-items:start}
@media(max-width:900px){.two{grid-template-columns:1fr}}
.line{display:grid;grid-template-columns:96px 1fr auto;gap:var(--s-4);padding-block:var(--s-5);
  border-bottom:1px solid var(--c-line);align-items:start}
.line img{aspect-ratio:3/4;object-fit:cover;background:var(--c-surface-2)}
.line .nm{font-family:var(--f-h4);font-size:var(--t-h4);margin-bottom:var(--s-2)}
.line .v{font-size:var(--t-small);color:var(--c-muted)}

.pay{border:1px solid var(--c-inactive);padding:var(--s-4);display:flex;gap:var(--s-3);align-items:flex-start;
  margin-bottom:var(--s-3);cursor:pointer;transition:border-color var(--d-fast)}
.pay.on{border-color:var(--c-accent)}
.pay .radio{width:16px;height:16px;border-radius:var(--r-pill);border:1px solid var(--c-inactive);flex-shrink:0;margin-top:3px}
.pay.on .radio{border:5px solid var(--c-accent)}

/* ---------- WooCommerce Cart & Checkout Layout ---------- */
body.woocommerce-cart,
body.woocommerce-checkout {
  overflow-x: clip;
}
body.woocommerce-cart .article,
body.woocommerce-checkout .article {
  max-width: var(--maxw);
  margin: 0 auto;
}
body.woocommerce-cart .sec,
body.woocommerce-checkout .sec {
  padding-top: clamp(32px, 5vw, 64px);
}

/* ---------- Cart Row Layout ---------- */
.cart-items {
  width: 100%;
}
.cart-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-line);
}
.cart-row__img {
  width: 72px;
  aspect-ratio: 4/5;
  overflow: hidden;
  flex-shrink: 0;
}
.cart-row__info {
  flex: 1 1 auto;
  min-width: 0;
}
.cart-row__qty {
  flex-shrink: 0;
}
.cart-row__total {
  font-weight: 500;
  min-width: 70px;
  text-align: right;
  flex-shrink: 0;
}
.cart-row__remove {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .cart-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    grid-template-areas:
      "img info remove"
      "img actions total";
    gap: var(--s-2) var(--s-3);
    align-items: start;
  }
  .cart-row__img { grid-area: img; width: 64px; }
  .cart-row__info { grid-area: info; }
  .cart-row__remove { grid-area: remove; text-align: right; }
  .cart-row__qty { grid-area: actions; margin-top: var(--s-2); }
  .cart-row__total { grid-area: total; text-align: right; align-self: center; margin-top: var(--s-2); min-width: 0; }
}

/* ---------- WooCommerce Gutenberg Checkout Block ---------- */
.wp-block-woocommerce-checkout,
.wc-block-components-order-summary,
.wc-block-components-order-summary__content,
.wc-block-components-order-summary-item {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.wc-block-components-order-summary-item__total-price {
  flex-shrink: 0 !important;
  text-align: right !important;
}
.wc-block-components-notices__snackbar {
  max-width: 100% !important;
}
.wp-block-woocommerce-checkout {
  width: 100%;
}
@media (min-width: 860px) {
  .wp-block-woocommerce-checkout.alignwide,
  .wp-block-woocommerce-checkout {
    display: flex;
    gap: clamp(32px, 4vw, 64px);
    align-items: flex-start;
  }
  .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-fields-block,
  .wp-block-woocommerce-checkout .wc-block-checkout__main {
    flex: 1.4 1 0%;
    min-width: 0;
  }
  .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-totals-block,
  .wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
    flex: 1 1 380px;
    min-width: 380px;
    max-width: 460px;
  }
}

.wc-block-components-order-summary-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--s-3) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.wc-block-components-order-summary-item__image {
  flex: 0 0 52px !important;
  width: 52px !important;
}
.wc-block-components-order-summary-item__image img {
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
  border-radius: var(--r-sm, 2px) !important;
}
.wc-block-components-order-summary-item__description {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.wc-block-components-order-summary-item__description .wc-block-cart-item__prices {
  display: none !important;
}
.wc-block-components-order-summary-item__title {
  font-family: var(--f-body) !important;
  font-weight: 500 !important;
}
.wc-block-components-order-summary-item__total-price {
  flex: 0 0 auto !important;
  text-align: right !important;
  align-self: flex-start !important;
}
.wc-block-components-order-summary-item__total-price .wc-block-components-product-price {
  white-space: nowrap !important;
}
.wc-block-components-order-summary-item__total-price .wc-block-components-sale-badge {
  display: block !important;
  font-size: var(--t-micro) !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
}

/* Customisation and product details */
.wc-block-components-product-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin-top: 4px !important;
  font-size: var(--t-micro) !important;
  color: var(--c-muted) !important;
}
.wc-block-components-product-details__item {
  display: block !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}
.wc-block-components-product-details .wc-block-components-product-details__separator,
.wc-block-components-product-details span[aria-hidden="true"] {
  display: none !important;
}
.wc-block-components-product-metadata__description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  word-break: break-word;
}

/* Totals and line items */
.wc-block-components-totals-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 16px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.wc-block-components-totals-item .wc-block-components-totals-item__label {
  font-family: var(--f-body, inherit) !important;
  font-size: 14px !important;
  color: var(--c-text, #3D3536) !important;
  flex-grow: 1 !important;
  line-height: 1.4 !important;
}
.wc-block-components-totals-item .wc-block-components-totals-item__value {
  font-family: var(--f-body, inherit) !important;
  font-size: 14px !important;
  color: var(--c-text, #3D3536) !important;
  text-align: right !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}
.wc-block-components-totals-item.wc-block-components-totals-footer-item {
  padding: 12px 16px 16px 16px !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--c-text, #3D3536) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--c-text, #3D3536) !important;
}
.wc-block-components-totals-shipping .wc-block-components-totals-item__value {
  white-space: nowrap !important;
}

/* ---------- WooCommerce Checkout Form Inputs & Alignment ---------- */
.wc-block-components-text-input {
  padding-top: 0 !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  line-height: normal !important;
  position: relative !important;
}
.wc-block-components-address-form__first_name,
.wc-block-components-address-form__last_name {
  margin-top: 12px !important;
}

/* Base input box styling */
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="url"],
.wc-block-components-text-input input {
  height: 50px !important;
  box-sizing: border-box !important;
  background-color: #FFFFFF !important;
  border: 1px solid var(--c-line, #E5E0DC) !important;
  border-radius: 2px !important;
  font-family: var(--f-body, inherit) !important;
  font-size: 14px !important;
  color: var(--c-text, #3D3536) !important;
  line-height: 20px !important;
  padding: 14px 16px !important;
  transition: border-color 0.2s ease, padding 0.2s ease, box-shadow 0.2s ease !important;
}

/* When active, focused, or filled, adjust padding so typed text sits in the lower half */
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input:focus-within input,
.wc-block-components-text-input:has(input:not(:placeholder-shown)) input {
  padding: 20px 16px 6px 16px !important;
}

.wc-block-components-text-input input:focus {
  border-color: var(--c-btn, #7D5A4F) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px var(--c-btn, #7D5A4F) !important;
}

/* Label styling — centered vertically in the box when empty */
.wc-block-components-text-input label {
  position: absolute !important;
  left: 16px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: var(--f-body, inherit) !important;
  font-size: 14px !important;
  color: var(--c-muted, #8C827A) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  margin: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform-origin: left top !important;
  z-index: 2 !important;
}

/* Floating label when active, focused, or non-empty — sits cleanly at top: 7px */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input:focus-within label,
.wc-block-components-text-input:has(input:not(:placeholder-shown)) label {
  top: 7px !important;
  transform: none !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--c-muted, #8C827A) !important;
  line-height: 1 !important;
}

.wc-block-components-text-input:focus-within label {
  color: var(--c-btn, #7D5A4F) !important;
}

/* Harmonize select dropdowns (Country/Region and State) */
.wc-blocks-components-select {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  position: relative !important;
  height: 50px !important;
}
.wc-blocks-components-select label {
  top: 7px !important;
  left: 16px !important;
  inset-inline-start: 16px !important;
  font-family: var(--f-body, inherit) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--c-muted, #8C827A) !important;
  line-height: 1 !important;
  opacity: 1 !important;
}
.wc-blocks-components-select:focus-within label {
  color: var(--c-btn, #7D5A4F) !important;
}
.wc-blocks-components-select .wc-blocks-components-select__container select {
  height: 50px !important;
  padding: 20px 16px 6px 16px !important;
  border: 1px solid var(--c-line, #E5E0DC) !important;
  border-radius: 2px !important;
  font-family: var(--f-body, inherit) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--c-text, #3D3536) !important;
  background-color: #FFFFFF !important;
}
.wc-blocks-components-select .wc-blocks-components-select__container select:focus {
  border-color: var(--c-btn, #7D5A4F) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px var(--c-btn, #7D5A4F) !important;
}

/* ---------- Blog — index and article ---------- */
/* ═══════════ BLOG ═══════════ */
.feat{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3vw,56px);align-items:center;
  margin-bottom:clamp(40px,5vw,80px)}
.feat img{width:100%;aspect-ratio:4/3;object-fit:cover}
.feat h2{margin:var(--s-4) 0 var(--s-4)}
@media(max-width:860px){.feat{grid-template-columns:1fr}}
.article{max-width:760px;margin:0 auto}
.article p{margin-bottom:var(--s-5);color:var(--c-text)}
.article h2{margin:var(--s-8) 0 var(--s-4)}
.article figure{margin:var(--s-8) 0}
.article figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.article figcaption{font-size:var(--t-small);color:var(--c-muted);margin-top:var(--s-3)}
.article blockquote{border-left:2px solid var(--c-accent);padding-left:var(--s-5);margin:var(--s-7) 0;
  font-family:var(--f-h3);font-size:var(--t-h3);line-height:1.4}
.meta-row{display:flex;gap:var(--s-5);flex-wrap:wrap;font-size:var(--t-micro);letter-spacing:var(--ls-ui);
  text-transform:uppercase;color:var(--c-muted);margin-bottom:var(--s-6)}

/* ---------- Our Story — founders and timeline ---------- */
/* ═══════════ FOUNDERS ═══════════ */
.founders{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,64px)}
.founder img{width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:var(--s-5)}
.founder h3{font-size:var(--t-h3);margin-bottom:var(--s-2)}
.founder .role{font-size:var(--t-micro);letter-spacing:var(--ls-ui);text-transform:uppercase;
  color:var(--c-accent);margin-bottom:var(--s-4);display:block}
.founder p{color:var(--c-muted);font-size:var(--t-small)}
@media(max-width:760px){.founders{grid-template-columns:1fr}}
/* A7 — one founder carried large, the team beneath. Same .founder unit in both
   places; the lead only changes the arrangement and the type scale. */
.founder--lead{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,72px);
  align-items:center;margin-bottom:clamp(48px,6vw,96px)}
.founder--lead img{margin-bottom:0}
.founder--lead h3{font-size:var(--t-h2)}
.founder--lead p{font-size:var(--t-lead)}
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,64px)}
@media(max-width:760px){.founder--lead{grid-template-columns:1fr}}
@media(max-width:640px){.team{grid-template-columns:1fr}}
.timeline{border-left:1px solid var(--c-line);padding-left:clamp(20px,3vw,44px)}
.tl-item{position:relative;padding-bottom:var(--s-8)}
.tl-item::before{content:'';position:absolute;left:calc(-1 * clamp(20px,3vw,44px) - 4px);top:8px;
  width:7px;height:7px;border-radius:var(--r-pill);background:var(--c-accent)}
.tl-item .yr{font-family:var(--f-h3);font-size:var(--t-h3);color:var(--c-accent);display:block;margin-bottom:var(--s-2)}
.tl-item h3{font-size:var(--t-h4);margin-bottom:var(--s-3)}
.tl-item p{color:var(--c-muted);font-size:var(--t-small)}

/* ---------- Palette intro / CTA ---------- */
.palette-intro .sec-head{padding-bottom:0}
.palette-cta{text-align:center}

/* ---------- My Account — login / register split ---------- */
#customer_login{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start;
  max-width:var(--maxw);margin:0 auto;padding:clamp(32px,5vw,80px) var(--gutter)}
#customer_login > div{padding:clamp(24px,3vw,48px);background:var(--c-surface)}
#customer_login h2{font-family:var(--f-display);font-size:var(--t-h3);margin-bottom:var(--s-5)}
@media(max-width:760px){#customer_login{grid-template-columns:1fr}}

/* Lost password and account navigation */
.woocommerce-ResetPassword{max-width:480px;margin:clamp(32px,5vw,80px) auto;padding:0 var(--gutter)}
.woocommerce-MyAccount-navigation ul{list-style:none;padding:0;display:flex;gap:var(--s-4);flex-wrap:wrap;
  border-bottom:1px solid var(--c-line);padding-bottom:var(--s-4);margin-bottom:var(--s-6)}
.woocommerce-MyAccount-navigation a{font-size:var(--t-small);text-transform:uppercase;letter-spacing:var(--ls-ui);
  color:var(--c-muted);text-decoration:none;padding-bottom:var(--s-2);border-bottom:2px solid transparent;
  transition:color var(--d-fast),border-color var(--d-fast)}
.woocommerce-MyAccount-navigation .is-active a,
.woocommerce-MyAccount-navigation a:hover{color:var(--c-text);border-bottom-color:var(--c-accent)}
.woocommerce-MyAccount-content{max-width:var(--maxw);margin:0 auto}

/* ==========================================================================
   CLASSIC WOOCOMMERCE CHECKOUT STYLING (The Adorée Luxury Architecture)
   ========================================================================== */
body.woocommerce-checkout {
  font-family: var(--f-body, 'Jost', -apple-system, BlinkMacSystemFont, sans-serif);
  color: var(--c-text, #3D3536);
  background: var(--c-bg, #FFFFFF);
}

body.woocommerce-checkout h1,
body.woocommerce-checkout h2,
body.woocommerce-checkout h3,
body.woocommerce-checkout .t-h1,
body.woocommerce-checkout .t-h2,
body.woocommerce-checkout .t-h3 {
  font-family: var(--f-display, 'Marcellus', Georgia, serif);
  font-weight: 400;
  color: var(--c-text, #3D3536);
}

.woocommerce-checkout .two {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: flex-start;
}

@media (max-width: 900px) {
  .woocommerce-checkout .two {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3 {
  font-size: var(--t-h3, 20px);
  margin-bottom: var(--s-5, 20px);
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}

@media (max-width: 600px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
}

.woocommerce-checkout .form-row {
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100% !important;
  float: none !important;
}

.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row#billing_address_1_field,
.woocommerce-checkout .form-row#billing_address_2_field,
.woocommerce-checkout .form-row#billing_country_field,
.woocommerce-checkout .form-row#billing_company_field,
.woocommerce-checkout .form-row#billing_email_field,
.woocommerce-checkout .form-row#billing_phone_field,
.woocommerce-checkout .form-row#order_comments_field {
  grid-column: 1 / -1;
}

.woocommerce-checkout .form-row label {
  font-family: var(--f-body, 'Jost', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted, #8C827A);
  margin-bottom: 6px;
  line-height: 1.2;
}

.woocommerce-checkout .form-row label .required {
  color: var(--c-accent, #7F271B);
  text-decoration: none;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  width: 100%;
  height: 48px;
  padding: 12px 14px;
  background-color: #FFFFFF;
  border: 1px solid var(--c-line, #E5E0DC);
  border-radius: 2px;
  font-family: var(--f-body, 'Jost', sans-serif);
  font-size: 14px;
  color: var(--c-text, #3D3536);
  line-height: 20px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-checkout .form-row textarea {
  height: 80px;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
  border-color: var(--c-accent, #7F271B);
  outline: none;
  box-shadow: 0 0 0 1px var(--c-accent, #7F271B);
}

.woocommerce-checkout .checkout__summary .panel {
  background: var(--c-surface-1, #FAFAF8);
  border: 1px solid var(--c-line, #E5E0DC);
  border-radius: 4px;
  padding: clamp(20px, 3vw, 32px);
  position: sticky;
  top: 100px;
}

.woocommerce-checkout table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  margin-bottom: var(--s-5, 20px);
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid var(--c-line, #E5E0DC);
  font-family: var(--f-body, 'Jost', sans-serif);
  font-size: 14px;
  color: var(--c-text, #3D3536);
  text-align: left;
}

.woocommerce-checkout table.shop_table td.product-total,
.woocommerce-checkout table.shop_table th.product-total {
  text-align: right;
  font-weight: 500;
}

.woocommerce-checkout table.shop_table .product-name {
  font-size: 14px;
  line-height: 1.4;
}

.woocommerce-checkout table.shop_table .product-name .variation {
  margin-top: 6px;
  font-size: 11px;
  color: var(--c-muted, #8C827A);
  line-height: 1.5;
}

.woocommerce-checkout table.shop_table .product-name .variation dt,
.woocommerce-checkout table.shop_table .product-name .variation dd {
  display: inline;
  margin: 0;
}

.woocommerce-checkout table.shop_table .product-name .variation dd::after {
  content: " · ";
}

.woocommerce-checkout table.shop_table .product-name .variation dd:last-child::after {
  content: "";
}

.woocommerce-checkout table.shop_table tr.cart-subtotal th,
.woocommerce-checkout table.shop_table tr.cart-subtotal td,
.woocommerce-checkout table.shop_table tr.woocommerce-shipping-totals th,
.woocommerce-checkout table.shop_table tr.woocommerce-shipping-totals td {
  font-size: 14px;
}

.woocommerce-checkout table.shop_table tr.order-total th,
.woocommerce-checkout table.shop_table tr.order-total td {
  font-size: 18px;
  font-weight: 600;
  border-top: 2px solid var(--c-line, #E5E0DC);
  border-bottom: none;
  padding-top: 16px;
  color: var(--c-text, #3D3536);
}

.woocommerce-checkout #payment {
  background: transparent;
  border: none;
  padding: 0;
  margin-top: var(--s-4, 16px);
}

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  border: 1px solid var(--c-line, #E5E0DC);
  border-radius: 4px;
  padding: 16px 20px;
  background: #FFFFFF;
  transition: all 0.2s ease;
  position: relative;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked),
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.is-selected {
  border-color: var(--c-accent, #7F271B);
  background: var(--c-surface-1, #FAFAF8);
  box-shadow: 0 1px 4px rgba(127, 39, 27, 0.08);
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input[type="radio"] {
  accent-color: var(--c-accent, #7F271B);
  margin-right: 10px;
  transform: scale(1.1);
  vertical-align: middle;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
  font-family: var(--f-body, 'Jost', sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text, #3D3536);
  cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .payment_box {
  margin: 12px 0 0 24px;
  padding: 8px 0 0;
  border-top: 1px dashed var(--c-line, #E5E0DC);
  background: transparent !important;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-muted, #8C827A);
}

.woocommerce-checkout #payment #place_order {
  width: 100%;
  height: 52px;
  background-color: var(--c-btn, #7D5A4F);
  color: #FFFFFF;
  border: none;
  border-radius: 2px;
  font-family: var(--f-body, 'Jost', sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.woocommerce-checkout #payment #place_order:hover {
  background-color: var(--c-accent, #7F271B);
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--c-muted, #8C827A);
  line-height: 1.5;
}