/* ==========================================================================
   K&K Furnitures — page-level sections
   ========================================================================== */

/* ================= HOMEPAGE HERO ================= */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:center;
  padding-block:calc(var(--nav-h) + 4rem) 5rem;overflow:hidden;background:var(--walnut);
}
@media(max-width:767px){.hero{min-height:88svh}}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(36,24,18,.92) 0%,rgba(36,24,18,.74) 45%,rgba(168,67,28,.45) 100%);
}
.hero .container{position:relative;z-index:2}
.hero__inner{max-width:780px;display:grid;gap:var(--s3);justify-items:start}
.hero h1{color:var(--porcelain)}
.hero h1 .accent{color:var(--peach);font-style:italic}
/* Authored hero lines: visible by default, GSAP animates them *from* hidden. */
.hero h1 .split-line{display:block;overflow:hidden;padding-bottom:.06em}
.hero__sub{font-size:clamp(1.02rem,1.7vw,1.22rem);color:rgba(253,247,242,.82);max-width:56ch}
.hero__trust{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;
  font-size:.84rem;color:rgba(253,247,242,.8);
}
.hero__trust span{display:flex;align-items:center;gap:.45rem}
.hero__trust svg{color:var(--peach);flex:none}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--s2);width:100%;max-width:520px}
@media(min-width:601px){.hero__ctas .btn{flex:0 0 auto}}

.scroll-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:grid;justify-items:center;gap:.5rem;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(253,247,242,.62);
}
.scroll-hint__line{width:1px;height:42px;background:linear-gradient(180deg,transparent,var(--peach));
  animation:hint 2.2s ease-in-out infinite}
@keyframes hint{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.scroll-hint__line{animation:none}}
@media(max-width:767px){.scroll-hint{display:none}}

/* split-text: mask reveal */
.split-line{display:block;overflow:hidden}
.split-line__inner{display:block}

/* ================= TRUST BAR ================= */
.trust-bar{background:var(--peach-soft);padding-block:var(--s4)}
.trust-bar__grid{display:grid;gap:var(--s3);text-align:center}
@media(min-width:640px){.trust-bar__grid{grid-template-columns:repeat(4,1fr)}}
.trust-bar__item{display:grid;gap:.2rem;justify-items:center}
.trust-bar__num{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.7rem);
  font-weight:600;color:var(--clay);line-height:1}
.trust-bar__label{font-size:.76rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--espresso-60)}

/* ================= ABOUT / TWO-COL ================= */
.two-col{display:grid;gap:var(--s5);align-items:center}
@media(min-width:900px){.two-col{grid-template-columns:1fr 1fr;gap:var(--s7)}}
.two-col__text{max-width:600px;display:grid;gap:var(--s2);align-content:start}
.two-col__media{position:relative;border-radius:var(--radius);overflow:hidden}
.two-col__media img{width:100%;height:clamp(340px,46vw,540px);object-fit:cover}
.two-col__badge{
  position:absolute;left:var(--s3);bottom:var(--s3);
  background:var(--walnut-92);color:var(--porcelain);backdrop-filter:blur(6px);
  padding:var(--s2) var(--s3);border-radius:var(--radius-sm);max-width:250px;
}
.two-col__badge strong{font-family:var(--display);font-size:1.6rem;display:block;color:var(--peach)}
.two-col__badge span{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(253,247,242,.7)}

.check-list{list-style:none;padding:0;display:grid;gap:.75rem;margin-top:var(--s1)}
.check-list li{display:grid;grid-template-columns:24px 1fr;gap:.7rem;align-items:start;font-size:.96rem}
.check-list svg{color:var(--ember);margin-top:3px}

/* ================= PINNED CRAFT STORY ================= */
.craft{background:var(--walnut);color:var(--porcelain);overflow:hidden;padding-block:0}
.craft__viewport{min-height:100svh;display:flex;align-items:center;padding-block:var(--s6)}
.craft__track{display:flex;gap:var(--s5);will-change:transform;padding-inline:var(--s3)}
.craft__intro{flex:none;width:min(440px,82vw);display:grid;gap:var(--s2);align-content:center}
.craft__panel{
  flex:none;width:min(380px,80vw);
  background:rgba(253,247,242,.05);border:1px solid rgba(253,247,242,.13);
  border-radius:var(--radius);padding:var(--s4);
  display:grid;gap:var(--s2);align-content:start;
}
.craft__step{font-family:var(--display);font-size:3.4rem;color:var(--ember);line-height:.9;opacity:.85}
.craft__panel h3{color:var(--porcelain)}
.craft__panel p{color:rgba(253,247,242,.72);font-size:.95rem}
.craft__panel img{border-radius:var(--radius-sm);height:180px;width:100%;object-fit:cover;margin-top:.5rem}
/* mobile: no pinning — becomes a normal stack */
@media(max-width:1023px){
  .craft__viewport{min-height:0;padding-block:var(--s6)}
  .craft__track{flex-direction:column;gap:var(--s3);padding-inline:0}
  .craft__intro,.craft__panel{width:100%}
}

/* ================= ASSEMBLY (scroll-scrubbed SVG) ================= */
.assembly{background:var(--porcelain-2);overflow:hidden}
.assembly__wrap{display:grid;gap:var(--s5);align-items:center}
@media(min-width:1024px){.assembly__wrap{grid-template-columns:.85fr 1.15fr;gap:var(--s7)}}
.assembly__stage{position:relative;aspect-ratio:16/11;display:grid;place-items:center}
.assembly__svg{width:100%;height:auto;overflow:visible}
/* A build sequence, not a set of choices. Numbered steps on a progress rail,
   with no card/hover/selected affordance that would imply they are clickable. */
.assembly__legend{
  list-style:none;padding:0 0 0 .25rem;margin-top:var(--s3);
  display:grid;gap:0;position:relative;cursor:default;
}
.assembly__legend::before{
  content:'';position:absolute;left:15px;top:14px;bottom:14px;width:2px;
  background:var(--line);border-radius:2px;
}
.assembly__legend li{
  display:grid;grid-template-columns:32px 1fr;gap:.9rem;align-items:center;
  padding:.55rem 0;color:var(--espresso-60);font-size:.93rem;
  transition:color .3s;position:relative;
}
.assembly__legend li.is-active{color:var(--espresso);font-weight:600}
.assembly__legend .step-no{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--porcelain);color:var(--espresso-60);
  font-size:.72rem;font-weight:700;letter-spacing:.02em;
  border:2px solid var(--line);
  transition:background .3s,color .3s,border-color .3s,transform .3s;
  position:relative;z-index:1;
}
.assembly__legend li.is-active .step-no{
  background:var(--ember);border-color:var(--ember);color:#fff;transform:scale(1.08);
}
.assembly__legend li.is-done .step-no{background:var(--peach);border-color:var(--peach);color:var(--clay)}
.assembly__caption{
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--espresso-60);margin-top:var(--s3);display:flex;align-items:center;gap:.5rem;
}

/* ================= FABRIC STRIP ================= */
.fabrics{background:var(--porcelain);overflow:hidden}
.fabric-track{display:flex;gap:var(--s2);padding-block:var(--s2);will-change:transform}
.fabric-swatch{
  flex:none;width:clamp(140px,20vw,200px);aspect-ratio:1;border-radius:var(--radius);
  position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(43,30,23,.08);
}
.fabric-swatch__label{
  position:absolute;left:0;right:0;bottom:0;padding:.6rem .75rem;
  background:linear-gradient(transparent,rgba(36,24,18,.8));
  color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.fabric-swatch img{width:100%;height:100%;object-fit:cover}

/* ================= TESTIMONIALS ================= */
.review-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s4) var(--s3);display:grid;gap:var(--s2);align-content:start;
}
.stars{display:flex;gap:3px;color:var(--brass)}
.review-card blockquote{font-family:var(--display);font-size:1.22rem;line-height:1.45;font-style:italic}
.review-card__who{display:flex;align-items:center;gap:.75rem;margin-top:auto}
.avatar{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--peach);color:var(--clay);font-weight:700;font-size:.95rem;
}
.review-card__who b{display:block;font-size:.92rem}
.review-card__who span{font-size:.78rem;color:var(--espresso-60)}
.placeholder-flag{
  background:#FFF4D6;border:1px dashed var(--brass);color:#7A5A12;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.35rem .6rem;border-radius:3px;display:inline-block;
}

/* ================= SHOP ================= */
.shop-layout{display:grid;gap:var(--s4)}
@media(min-width:1024px){.shop-layout{grid-template-columns:250px 1fr;gap:var(--s6);align-items:start}}
.filters{display:grid;gap:var(--s3);align-content:start}
@media(min-width:1024px){.filters{position:sticky;top:calc(var(--nav-h) + 24px)}}
.filter-group{display:grid;gap:.6rem}
.filter-group h4{font-family:var(--body);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--espresso-60)}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  padding:.45rem .9rem;border:1px solid var(--line);border-radius:999px;
  font-size:.83rem;background:#fff;transition:all .2s;white-space:nowrap;
}
.chip:hover{border-color:var(--ember);color:var(--ember)}
.chip.is-on{background:var(--ember);border-color:var(--ember);color:#fff;font-weight:600}
.shop-toolbar{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:space-between;
  align-items:center;margin-bottom:var(--s3)}
.shop-count{font-size:.88rem;color:var(--espresso-60)}
.shop-toolbar select{width:auto;min-width:190px}
.product-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}

/* ================= PRODUCT DETAIL ================= */
.pdp{display:grid;gap:var(--s5)}
@media(min-width:1024px){.pdp{grid-template-columns:1.15fr .85fr;gap:var(--s7);align-items:start}}
.pdp__gallery{display:grid;gap:var(--s2)}
.pdp__main{border-radius:var(--radius);overflow:hidden;background:var(--porcelain-2)}
.pdp__main img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pdp__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1)}
.pdp__thumbs button{border-radius:var(--radius-sm);overflow:hidden;border:2px solid transparent;transition:border-color .2s}
.pdp__thumbs button.is-on{border-color:var(--ember)}
.pdp__thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pdp__info{display:grid;gap:var(--s2);align-content:start}
@media(min-width:1024px){.pdp__info{position:sticky;top:calc(var(--nav-h) + 24px)}}
.pdp__price{font-family:var(--display);font-size:2.6rem;font-weight:600;color:var(--espresso);line-height:1}
.swatch-row{display:flex;flex-wrap:wrap;gap:.6rem}
.swatch{
  width:42px;height:42px;border-radius:50%;border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(43,30,23,.16);transition:transform .2s,border-color .2s;
}
.swatch:hover{transform:scale(1.1)}
.swatch.is-on{border-color:var(--espresso);transform:scale(1.1)}
.spec-table{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:var(--s1)}
.spec-table th,.spec-table td{text-align:left;padding:.7rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec-table th{font-weight:700;width:42%;color:var(--espresso-60);font-size:.83rem;
  letter-spacing:.06em;text-transform:uppercase}

/* ================= BUILDER ================= */
.builder-shell{padding-top:var(--nav-h);min-height:100svh;display:grid;background:var(--porcelain)}
@media(min-width:1024px){
  .builder-shell{grid-template-columns:1fr 400px;height:100svh;overflow:hidden}
}
.builder-stage{
  position:relative;background:linear-gradient(170deg,#EFEAE4 0%,#DED5CC 100%);
  min-height:56svh;display:grid;place-items:center;overflow:hidden;
}
@media(min-width:1024px){.builder-stage{min-height:0}}
#builder-canvas{width:100%;height:100%;display:block;touch-action:none}
.builder-stage__hint{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(43,30,23,.45);
  pointer-events:none;display:flex;align-items:center;gap:.5rem;
}
.builder-fallback{padding:var(--s5) var(--s3);text-align:center;display:grid;gap:var(--s2);
  justify-items:center;max-width:460px}
.builder-loading{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--espresso-60);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}

.builder-panel{
  background:#fff;border-left:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
}
.builder-panel__head{padding:var(--s3);border-bottom:1px solid var(--line);flex:none}
.builder-panel__head h1{font-size:1.7rem}
.builder-panel__head p{font-size:.85rem;color:var(--espresso-60);margin-top:.25rem}
/* Flex column, not grid: inside the fixed-height desktop shell the grid's
   auto rows were dividing the container equally (~27px each), and .opt-group's
   overflow:hidden then clipped every 51px toggle — the panel rendered as nine
   blank lines. Flex items keep their content height. */
.builder-panel__body{
  flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--s3);
  display:flex;flex-direction:column;gap:var(--s1);
}
.builder-panel__body > *{flex:0 0 auto}
.builder-panel__foot{padding:var(--s3);border-top:1px solid var(--line);background:var(--porcelain);
  flex:none;display:grid;gap:var(--s2)}

/* Guard against the global `section` block padding leaking into panel chrome. */
.builder-panel section{padding-block:0}
.opt-group{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;padding-block:0}
.opt-group__toggle{
  width:100%;padding:.9rem 1rem;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);text-align:left;transition:background .2s;
}
.opt-group__toggle:hover{background:var(--porcelain)}
.opt-group__toggle b{font-size:.86rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.opt-group__val{font-size:.82rem;color:var(--ember);font-weight:600}
.opt-group__chev{transition:transform .3s var(--ease);color:var(--espresso-60);flex:none}
.opt-group.is-open .opt-group__chev{transform:rotate(180deg)}
.opt-group__body{display:none;padding:0 1rem 1rem;gap:.5rem}
.opt-group.is-open .opt-group__body{display:grid}

.opt-row{display:flex;flex-wrap:wrap;gap:.45rem}
.opt{
  padding:.5rem .85rem;border:1px solid var(--line);border-radius:6px;background:#fff;
  font-size:.83rem;transition:all .18s;text-align:left;
}
.opt:hover{border-color:var(--ember)}
.opt.is-on{background:var(--espresso);border-color:var(--espresso);color:var(--porcelain);font-weight:600}
.opt__price{display:block;font-size:.68rem;opacity:.65;margin-top:1px}

.colour-row{display:flex;flex-wrap:wrap;gap:.5rem}
.colour{width:38px;height:38px;border-radius:50%;border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(43,30,23,.18);transition:transform .18s,border-color .18s}
.colour:hover{transform:scale(1.12)}
.colour.is-on{border-color:var(--espresso);transform:scale(1.12)}

.toggle-row{display:grid;gap:.4rem}
.toggle{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:.6rem .8rem;border:1px solid var(--line);border-radius:6px;font-size:.85rem;
  transition:all .18s;background:#fff;text-align:left;width:100%;
}
.toggle:hover{border-color:var(--ember)}
.toggle.is-on{border-color:var(--ember);background:#FFF6EF}
.toggle__box{width:19px;height:19px;border-radius:4px;border:1.5px solid var(--line);
  flex:none;display:grid;place-items:center;color:#fff;transition:all .18s}
.toggle.is-on .toggle__box{background:var(--ember);border-color:var(--ember)}

.builder-price{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.builder-price__val{font-family:var(--display);font-size:2.1rem;font-weight:600;line-height:1}
.builder-price__note{font-size:.72rem;color:var(--espresso-60);line-height:1.4}
.builder-actions{display:grid;gap:.6rem}
@media(min-width:420px){.builder-actions{grid-template-columns:1fr 1fr}}
.builder-actions .btn{width:100%}
.builder-summary{font-size:.78rem;color:var(--espresso-60);line-height:1.6}

/* ================= CONTACT ================= */
.contact-grid{display:grid;gap:var(--s5)}
@media(min-width:900px){.contact-grid{grid-template-columns:1.15fr .85fr;gap:var(--s6);align-items:start}}
.contact-panel{display:grid;gap:var(--s3);align-content:start}
.contact-item{display:grid;grid-template-columns:46px 1fr;gap:var(--s2);align-items:start}
.contact-item__icon{width:46px;height:46px;border-radius:10px;background:var(--peach-soft);
  color:var(--clay);display:grid;place-items:center}
.contact-item b{display:block;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--espresso-60);margin-bottom:2px}
.contact-item a,.contact-item span{font-size:1rem}
.wa-card{background:#F0FBF3;border:1px solid #BFEBCE;border-radius:var(--radius);
  padding:var(--s3);display:grid;gap:var(--s2)}
.form-grid{display:grid;gap:var(--s3)}
@media(min-width:600px){.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}}
.areas-list{display:flex;flex-wrap:wrap;gap:.5rem}
.area-tag{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.4rem .85rem;font-size:.82rem}

/* ================= CART PAGE ================= */
.cart-layout{display:grid;gap:var(--s5)}
@media(min-width:900px){.cart-layout{grid-template-columns:1.4fr .6fr;gap:var(--s6);align-items:start}}
.summary-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s4) var(--s3);display:grid;gap:var(--s2)}
@media(min-width:900px){.summary-box{position:sticky;top:calc(var(--nav-h) + 24px)}}
.summary-row{display:flex;justify-content:space-between;gap:var(--s2);font-size:.94rem}
.summary-row.is-total{border-top:1px solid var(--line);padding-top:var(--s2);
  margin-top:var(--s1);font-weight:700;font-size:1.05rem;align-items:baseline}

/* ================= 404 ================= */
.err-page{min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:calc(var(--nav-h) + 3rem) var(--s3) var(--s6);background:var(--walnut);color:var(--porcelain)}
.err-page .container{display:grid;gap:var(--s3);justify-items:center}
.err-code{font-family:var(--display);font-size:clamp(5rem,18vw,11rem);line-height:.85;color:var(--ember)}