/* ==========================================================================
   HANGZHOU ZHIZHUO · NATURAL STONE & PEBBLE
   Design system — luxury monochrome + brushed gold
   ========================================================================== */

:root{
  --ink:#101010;
  --ink-soft:#1c1c1c;
  --paper:#f7f5f1;
  --paper-warm:#f2efe9;
  --white:#ffffff;
  --gold:#b3945f;
  --gold-deep:#9a7c47;
  --grey:#6f6c66;
  --line:rgba(16,16,16,.14);
  --line-light:rgba(255,255,255,.28);

  --font-display:"Cormorant Garamond", Georgia, serif;
  --font-sans:"Jost", "Segoe UI", sans-serif;

  --ease-lux:cubic-bezier(.22,.8,.24,1);
  --dur:.5s;

  --w-max:1440px;
  --pad:clamp(1.25rem, 4vw, 4rem);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  font-weight:300;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}
::selection{background:var(--gold);color:var(--white)}

/* ---------- type scale ---------- */
h1,h2,h3,.display,.display-hero,.display-xl,.display-lg,.display-md{font-family:var(--font-display);font-weight:500;line-height:1.08}
.display-hero{
  font-size:clamp(2.6rem, 7.2vw, 6.4rem);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:500;
}
.display-xl{font-size:clamp(2.2rem, 4.6vw, 4rem);letter-spacing:.02em}
.display-lg{font-size:clamp(1.8rem, 3.2vw, 2.8rem)}
.display-md{font-size:clamp(1.4rem, 2.2vw, 1.9rem)}
.eyebrow{
  font-family:var(--font-sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold-deep);
}
.eyebrow--light{color:var(--gold)}
.lede{font-size:clamp(1rem,1.35vw,1.15rem);font-weight:300;color:var(--grey);max-width:56ch}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--w-max);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(4rem,9vw,8.5rem)}
.section--tight{padding-block:clamp(3rem,6vw,5.5rem)}
.section--ink{background:var(--ink);color:var(--paper)}
.section--warm{background:var(--paper-warm)}
.center{text-align:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  font-family:var(--font-sans);font-size:.78rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;
  padding:1.05rem 2.6rem;
  border:1px solid currentColor;
  color:var(--ink);
  position:relative;overflow:hidden;
  transition:color var(--dur) var(--ease-lux), border-color var(--dur) var(--ease-lux);
  isolation:isolate;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur) var(--ease-lux);
}
.btn:hover{color:var(--paper)}
.btn:hover::after{transform:scaleX(1);transform-origin:left}
.btn--light{color:var(--white)}
.btn--light::after{background:var(--white)}
.btn--light:hover{color:var(--ink)}
.btn--gold{color:var(--gold-deep);border-color:var(--gold)}
.btn--gold::after{background:var(--gold)}
.btn--gold:hover{color:var(--white)}
.btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--solid::after{background:var(--gold)}
.btn--solid:hover{color:var(--white);border-color:var(--gold)}

.text-link{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.78rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-deep);position:relative;padding-bottom:.35rem;
}
.text-link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(.35);transform-origin:left;
  transition:transform var(--dur) var(--ease-lux);
}
.text-link:hover::after{transform:scaleX(1)}

/* ==========================================================================
   HEADER + MEGA MENU
   ========================================================================== */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background var(--dur) var(--ease-lux), box-shadow var(--dur) var(--ease-lux),
             transform .5s var(--ease-lux);
}
.header__inner{
  max-width:var(--w-max);margin-inline:auto;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  height:86px;
  transition:height var(--dur) var(--ease-lux);
}
.header--solid{background:rgba(247,245,241,.96);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.header--solid .header__inner{height:70px}
.header--hidden{transform:translateY(-100%)}

.logo{display:flex;flex-direction:column;line-height:1.12;letter-spacing:.16em}
.logo__main{font-family:var(--font-display);font-size:1.42rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em}
.logo__sub{font-size:.56rem;font-weight:400;letter-spacing:.44em;text-transform:uppercase;color:var(--gold-deep)}
.header--overlay:not(.header--solid){color:var(--white);text-shadow:0 1px 18px rgba(0,0,0,.45)}
.header--overlay:not(.header--solid) .logo__sub{color:var(--gold)}

.nav{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.6rem)}
.nav__link{
  font-size:.74rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;
  padding:2rem 0;position:relative;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:1.55rem;height:1px;
  background:var(--gold);transform:scaleX(0);transition:transform .45s var(--ease-lux);
}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__caret{display:inline-block;margin-left:.4rem;font-size:.6rem;transform:translateY(-1px);transition:transform .4s var(--ease-lux)}
.has-mega:hover .nav__caret{transform:rotate(180deg) translateY(1px)}

/* mega panel — anchored to the full header bar, revealed on hover/click/focus */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--paper);color:var(--ink);
  border-top:1px solid var(--line);
  box-shadow:0 40px 70px -30px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .5s var(--ease-lux), transform .5s var(--ease-lux), visibility 0s .5s;
  max-height:calc(100vh - 90px);overflow-y:auto;
}
.header.mega-open .mega{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .5s var(--ease-lux), transform .5s var(--ease-lux), visibility 0s 0s;
}
/* the bar itself goes solid while the panel is open, on every page */
.header.mega-open{
  background:rgba(247,245,241,.98);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);color:var(--ink);text-shadow:none;
}
.header.mega-open .logo__sub{color:var(--gold-deep)}
.header.mega-open .nav__caret{transform:rotate(180deg) translateY(1px)}
.has-mega{background:none;border:none;cursor:pointer}
.mega__grid{
  max-width:var(--w-max);margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border-inline:1px solid var(--line);
}
.mega__card{position:relative;overflow:hidden;background:var(--paper);display:block}
.mega__card figure{aspect-ratio:16/10;overflow:hidden;margin:0}
.mega__card img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.1s var(--ease-lux);filter:saturate(.92)}
.mega__card:hover img{transform:scale(1.09)}
.mega__card figcaption{padding:1.1rem 1.4rem 1.5rem}
.mega__title{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.04em}
.mega__hint{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-deep);margin-top:.25rem;display:inline-flex;align-items:center;gap:.5rem}
.mega__foot{
  max-width:var(--w-max);margin-inline:auto;
  display:flex;justify-content:space-between;align-items:center;
  padding:.9rem var(--pad);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);
}
.mega__foot a{color:var(--gold-deep)}

/* mobile nav */
.burger{display:none;flex-direction:column;gap:6px;padding:.6rem;z-index:110}
.burger span{display:block;width:26px;height:1.5px;background:currentColor;transition:transform .4s var(--ease-lux),opacity .3s}
.mobile-nav{
  position:fixed;inset:0;background:var(--ink);color:var(--paper);z-index:105;
  display:flex;flex-direction:column;justify-content:center;padding:var(--pad);gap:.4rem;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease-lux),visibility 0s .5s;
}
.mobile-nav.open{opacity:1;visibility:visible;transition:opacity .5s var(--ease-lux),visibility 0s 0s}
.mobile-nav a{
  font-family:var(--font-display);font-size:clamp(1.7rem,7vw,2.6rem);
  padding:.45rem 0;letter-spacing:.06em;border-bottom:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease-lux),transform .5s var(--ease-lux);
}
.mobile-nav.open a{opacity:1;transform:none}
.mobile-nav .mobile-sub{font-family:var(--font-sans);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);border:none;margin-top:1.4rem}
body.nav-open .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ==========================================================================
   HERO SLIDER
   ========================================================================== */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--ink);color:var(--white)}
.hero__slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;
}
.hero__slide.is-active{opacity:1}
.hero__slide img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);
  filter:brightness(.56) saturate(.95);
}
/* vignette so type stays legible on pale stone */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 46%, rgba(0,0,0,.38), rgba(0,0,0,0) 62%),
    linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 72%, rgba(0,0,0,.3));
}
.hero__slide.is-active img{animation:kenburns 7s var(--ease-lux) forwards}
@keyframes kenburns{from{transform:scale(1.14)}to{transform:scale(1.02)}}

.hero__content{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2rem;
  text-align:center;padding-inline:var(--pad);
}
.hero__eyebrow{
  font-size:.72rem;font-weight:400;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);
}
.hero__title{max-width:18ch}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line span{display:inline-block;transform:translateY(110%);animation:riseUp 1.1s var(--ease-lux) forwards}
.hero__title .line:nth-child(2) span{animation-delay:.12s}
@keyframes riseUp{to{transform:translateY(0)}}
.hero__sub{font-size:.92rem;font-weight:300;letter-spacing:.12em;color:rgba(255,255,255,.82);max-width:52ch}

.hero__nav{
  position:absolute;z-index:3;top:50%;width:100%;
  display:flex;justify-content:space-between;padding-inline:clamp(1rem,3vw,3rem);
  transform:translateY(-50%);pointer-events:none;
}
.hero__arrow{
  pointer-events:auto;width:58px;height:58px;border:1px solid var(--line-light);
  border-radius:50%;display:grid;place-items:center;color:var(--white);
  transition:background .45s var(--ease-lux),border-color .45s var(--ease-lux);
  backdrop-filter:blur(4px);
}
.hero__arrow:hover{background:rgba(255,255,255,.14);border-color:var(--white)}
.hero__arrow svg{width:22px;height:22px}

.hero__dots{position:absolute;bottom:2.6rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:.9rem;max-width:88vw}
.hero__dot{flex:1 1 34px;min-width:14px;max-width:34px;width:34px;height:2px;background:rgba(255,255,255,.32);position:relative;overflow:hidden;cursor:pointer}
.hero__dot .fill{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
.hero__dot.is-active .fill{animation:dotfill 8.5s linear forwards}
@keyframes dotfill{to{transform:scaleX(1)}}

.hero__scroll{
  position:absolute;bottom:2.2rem;right:var(--pad);z-index:3;
  font-size:.64rem;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.66);
  writing-mode:vertical-rl;display:flex;align-items:center;gap:.8rem;
}
.hero__scroll::after{content:"";width:1px;height:46px;background:linear-gradient(var(--gold),transparent);animation:scrollPulse 2.2s ease infinite}
@keyframes scrollPulse{0%{transform:scaleY(.3);transform-origin:top}55%{transform:scaleY(1)}100%{transform:scaleY(.3);transform-origin:top;opacity:.2}}

/* ==========================================================================
   REVEAL ANIMATIONS
   ========================================================================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-lux),transform .7s var(--ease-lux)}
.reveal.in{opacity:1;transform:none}
.reveal-img{overflow:hidden}
.reveal-img img{transform:scale(1.12);transition:transform 1.4s var(--ease-lux)}
.reveal-img.in img{transform:scale(1)}
[data-stagger] > *{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease-lux),transform .8s var(--ease-lux)}
[data-stagger].in > *{opacity:1;transform:none}

/* ==========================================================================
   HOME — category split blocks (PEBBLES / POTTERY style)
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr}
.split__panel{
  position:relative;overflow:hidden;min-height:clamp(420px,58vh,640px);
  display:grid;place-items:center;color:var(--white);text-align:center;
}
.split__panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.66);transform:scale(1.02);transition:transform 1.3s var(--ease-lux),filter 1.3s var(--ease-lux)}
.split__panel:hover img{transform:scale(1.08);filter:brightness(.5)}
.split__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.6rem;padding:2rem}
.split__title{font-size:clamp(2rem,3.6vw,3.2rem);letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.split__panel .btn{background:rgba(255,255,255,.92);color:var(--ink);border-color:transparent;padding:.95rem 2.2rem}
.split__panel .btn::after{background:var(--gold)}
.split__panel .btn:hover{color:var(--white)}

/* ==========================================================================
   HOME — obsessions carousel
   ========================================================================== */
.obsessions__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(2rem,4vw,3.4rem)}
.obsessions__title em{font-style:italic;font-weight:500}
.carousel-ctrl{display:flex;gap:.8rem}
.carousel-ctrl button{
  width:52px;height:52px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;transition:background .4s var(--ease-lux),color .4s,border-color .4s;
}
.carousel-ctrl button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.carousel-ctrl svg{width:20px;height:20px}

.carousel{display:flex;gap:clamp(1rem,2vw,2rem);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.5rem}
.carousel::-webkit-scrollbar{display:none}
.obs-card{
  flex:0 0 clamp(260px,30vw,420px);scroll-snap-align:start;position:relative;overflow:hidden;
}
.obs-card figure{aspect-ratio:4/4.6;overflow:hidden;margin:0;background:var(--paper-warm)}
.obs-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-lux)}
.obs-card:hover img{transform:scale(1.07)}
.obs-card__label{
  position:absolute;left:1.4rem;bottom:1.3rem;color:var(--white);
  font-family:var(--font-display);font-size:1.35rem;letter-spacing:.08em;text-transform:uppercase;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
.obs-card__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.42),transparent 45%)}

/* ==========================================================================
   COLLECTION PAGES
   ========================================================================== */
.page-head{padding-top:clamp(8rem,14vh,11rem)}
.collection-layout{display:grid;grid-template-columns:270px 1fr;gap:clamp(2rem,4vw,4.5rem);align-items:start}
.sidebar{position:sticky;top:110px;display:flex;flex-direction:column;gap:2.6rem}
.sidebar h3{font-size:1.3rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.search-field{position:relative}
.search-field input{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--ink);
  font:300 .95rem var(--font-sans);letter-spacing:.04em;padding:.65rem 1.8rem .65rem 0;color:var(--ink);
  outline:none;transition:border-color .3s;
}
.search-field input::placeholder{color:var(--grey)}
.search-field input:focus{border-color:var(--gold-deep)}
.search-field svg{position:absolute;right:0;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--grey)}
.side-nav a{
  display:flex;justify-content:space-between;align-items:center;
  padding:.68rem 0;border-bottom:1px solid var(--line);
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  transition:color .3s,padding-left .45s var(--ease-lux);
}
.side-nav a:hover,.side-nav a.is-active{color:var(--gold-deep);padding-left:.5rem}
.side-nav .count{font-size:.68rem;color:var(--grey);letter-spacing:.1em}

.collection-desc{max-width:68ch;color:var(--grey);margin-top:1.2rem}
.result-count{font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);margin:2.2rem 0 1.6rem}

.grid-products{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.5vw,2.6rem) clamp(1rem,2vw,2rem)}
.p-card{position:relative}
.p-card figure{aspect-ratio:1/1;overflow:hidden;margin:0;background:var(--white);position:relative}
.p-card img{width:100%;height:100%;object-fit:contain;transition:opacity .7s var(--ease-lux),transform 1.2s var(--ease-lux)}
.p-card .img-hover{position:absolute;inset:0;opacity:0}
.p-card:hover .img-hover{opacity:1}
.p-card:hover img{transform:scale(1.05)}
.p-card__body{padding:1.1rem .2rem 0}
.p-card__name{font-family:var(--font-display);font-size:1.3rem;letter-spacing:.05em}
.p-card__type{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);margin-top:.2rem}
.p-card__sizes{font-size:.78rem;color:var(--gold-deep);margin-top:.45rem;letter-spacing:.06em}
.p-card__tag{
  position:absolute;top:1rem;left:1rem;z-index:2;
  background:var(--ink);color:var(--paper);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  padding:.45rem .9rem;
}
.placeholder-fig{
  aspect-ratio:1/1;display:grid;place-items:center;background:var(--paper-warm);
  border:1px solid var(--line);
}
.placeholder-fig .ph-inner{display:flex;flex-direction:column;align-items:center;gap:.8rem;color:var(--grey)}
.placeholder-fig svg{width:44px;height:44px;opacity:.5}
.placeholder-fig span{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase}

.empty-state{padding:5rem 0;text-align:center;color:var(--grey)}
.empty-state .display-md{margin-bottom:.6rem;color:var(--ink)}

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
.product-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.gallery{position:sticky;top:110px}
.gallery__main{aspect-ratio:3/2;overflow:hidden;background:var(--white)}
.gallery__main img{width:100%;height:100%;object-fit:contain;transition:opacity .45s ease}
.gallery__thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem;margin-top:.7rem}
.gallery__thumbs button{aspect-ratio:1/1;overflow:hidden;border:1px solid transparent;padding:0;opacity:.75;transition:opacity .3s,border-color .3s}
.gallery__thumbs button.is-active,.gallery__thumbs button:hover{opacity:1;border-color:var(--gold)}
.gallery__thumbs img{width:100%;height:100%;object-fit:cover}

.p-info .crumb{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--grey);display:flex;gap:.7rem;flex-wrap:wrap}
.p-info .crumb a:hover{color:var(--gold-deep)}
.p-info h1{font-size:clamp(2.1rem,3.6vw,3.1rem);margin-top:1rem}
.p-info .p-type{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);margin-top:.45rem}
.p-info .p-desc{margin-top:1.6rem;color:var(--grey);font-size:1.02rem}
.spec-block{margin-top:2.2rem}
.spec-block h4{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);margin-bottom:.9rem;font-weight:500}
.size-pills{display:flex;flex-wrap:wrap;gap:.6rem}
.size-pill{
  border:1px solid var(--line);padding:.55rem 1.15rem;font-size:.82rem;letter-spacing:.08em;
  transition:all .3s var(--ease-lux);cursor:pointer;
}
.size-pill.is-active,.size-pill:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.spec-table{width:100%;border-collapse:collapse;font-size:.9rem}
.spec-table tr{border-bottom:1px solid var(--line)}
.spec-table td{padding:.78rem 0;vertical-align:top}
.spec-table td:first-child{width:38%;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--grey)}
.p-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}
.p-note{margin-top:1.6rem;font-size:.8rem;color:var(--grey);border-left:2px solid var(--gold);padding-left:1rem;line-height:1.7}

.related{margin-top:clamp(4rem,8vw,7rem)}
.related h2{margin-bottom:2rem}

/* ==========================================================================
   CALCULATOR
   ========================================================================== */
.calc-layout{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
.calc-panel{background:var(--white);border:1px solid var(--line);padding:clamp(1.6rem,3.4vw,3rem)}
.field{margin-bottom:1.6rem}
.field label{display:block;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--grey);margin-bottom:.55rem}
.field input,.field select{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--ink);
  font:300 1.05rem var(--font-sans);padding:.55rem 0;outline:none;color:var(--ink);
  border-radius:0;transition:border-color .3s;
}
.field input:focus,.field select:focus{border-color:var(--gold-deep)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.unit-toggle{display:inline-flex;border:1px solid var(--line)}
.unit-toggle button{padding:.5rem 1.3rem;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;transition:all .3s}
.unit-toggle button.is-active{background:var(--ink);color:var(--paper)}

.calc-result{background:var(--ink);color:var(--paper);padding:clamp(1.8rem,3.4vw,3rem);position:sticky;top:110px}
.calc-result h3{font-size:1.5rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.8rem}
.result-line{display:flex;justify-content:space-between;align-items:baseline;padding:.95rem 0;border-bottom:1px solid rgba(255,255,255,.14)}
.result-line .k{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.result-line .v{font-family:var(--font-display);font-size:1.7rem;color:var(--white)}
.result-line .v small{font-size:.9rem;color:var(--gold);margin-left:.3rem}
.result-line--gold .v{color:var(--gold)}
.calc-note{font-size:.76rem;color:rgba(255,255,255,.55);margin-top:1.4rem;line-height:1.7}

/* ==========================================================================
   ABOUT / CONTACT / SHIPPING
   ========================================================================== */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5.5rem);align-items:center}
.duo figure{margin:0;overflow:hidden}
.duo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/4.4}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem}
.stat .n{font-family:var(--font-display);font-size:clamp(2.4rem,4vw,3.4rem);color:var(--gold-deep)}
.stat .l{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--grey);margin-top:.3rem}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:3rem}
.step{background:var(--paper);padding:2.4rem 1.6rem;position:relative;transition:background .45s var(--ease-lux)}
.step::after{content:"";position:absolute;top:0;inset-inline-start:0;height:100%;width:2px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease-lux)}
.step:hover{background:var(--paper-warm)}
.step:hover::after{transform:scaleY(1)}
.step__ico{display:block;width:32px;height:32px;color:var(--gold-deep);margin-bottom:1.1rem;transition:transform .45s var(--ease-lux)}
.step__ico svg{width:100%;height:100%}
.step:hover .step__ico{transform:translateY(-3px)}
.step .no{font-family:var(--font-display);font-size:1.15rem;letter-spacing:.08em;color:var(--gold-deep);opacity:.55}
.step h4{font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;margin:.5rem 0 .5rem;font-weight:500}
.step p{font-size:.85rem;color:var(--grey)}
.section--ink .step__ico{color:var(--gold)}

.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,5vw,5rem)}
.contact-card{border:1px solid var(--line);padding:2rem;margin-bottom:1.2rem;display:flex;gap:1.4rem;align-items:flex-start;transition:border-color .4s}
.contact-card:hover{border-color:var(--gold)}
.contact-card svg{width:26px;height:26px;color:var(--gold-deep);flex-shrink:0;margin-top:.2rem}
.contact-card h4{font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;font-weight:500;margin-bottom:.35rem}
.contact-card p,.contact-card a{font-size:.95rem;color:var(--grey);line-height:1.6}
.contact-card a:hover{color:var(--gold-deep)}

.form-panel{background:var(--white);border:1px solid var(--line);padding:clamp(1.8rem,3.5vw,3rem)}
textarea{resize:vertical;min-height:120px;width:100%;background:transparent;border:none;border-bottom:1px solid var(--ink);font:300 1rem var(--font-sans);padding:.55rem 0;outline:none}
textarea:focus{border-color:var(--gold-deep)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--ink);color:rgba(255,255,255,.72);margin-top:0}
.footer__cta{border-bottom:1px solid rgba(255,255,255,.1);padding:clamp(3rem,6vw,5rem) 0;text-align:center}
.footer__cta .display-lg{color:var(--white);max-width:26ch;margin-inline:auto}
.footer__grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:clamp(2rem,4vw,4rem);
  padding:clamp(3rem,5vw,4.5rem) 0;
}
.footer h5{font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;font-weight:500}
.footer a{transition:color .3s}
.footer a:hover{color:var(--white)}
.footer li{margin-bottom:.55rem;font-size:.9rem}
.footer .logo{color:var(--white);margin-bottom:1rem}
.footer .about-line{font-size:.9rem;max-width:34ch;line-height:1.8}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:1.6rem 0;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.72rem;letter-spacing:.14em;color:rgba(255,255,255,.4);
}

/* ==========================================================================
   WHATSAPP FLOAT
   ========================================================================== */
.wa-float{
  position:fixed;right:1.6rem;bottom:1.6rem;z-index:90;
  width:60px;height:60px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;color:#fff;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.55);
  transition:transform .4s var(--ease-lux),box-shadow .4s;
}
.wa-float:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 18px 40px -8px rgba(37,211,102,.65)}
.wa-float svg{width:32px;height:32px}
.wa-float::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid #25D366;animation:waPulse 2.4s ease-out infinite;
}
@keyframes waPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.65);opacity:0}}
.wa-float .tip{
  position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);
  background:var(--ink);color:var(--paper);font-size:.72rem;letter-spacing:.14em;
  padding:.55rem 1rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .35s;
}
.wa-float:hover .tip{opacity:1}

/* back to top */
.to-top{
  position:fixed;right:1.75rem;bottom:6.6rem;z-index:89;width:44px;height:44px;
  border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:all .4s var(--ease-lux);
  font-size:.6rem;letter-spacing:.2em;flex-direction:column;
}
.to-top.show{opacity:1;visibility:visible}
.to-top:hover{background:var(--ink);color:var(--paper)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .grid-products{grid-template-columns:repeat(2,1fr)}
  .mega__grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:flex}
  .collection-layout{grid-template-columns:1fr}
  .sidebar{position:static;flex-direction:column}
  .product-layout,.calc-layout,.duo,.contact-grid{grid-template-columns:1fr}
  .gallery{position:static}
  .calc-result{position:static}
  .split{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .grid-products{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr;gap:1.4rem}
  /* keep prev/next arrows on phones — smaller, always tappable */
  .hero__arrow{width:42px;height:42px;background:rgba(16,16,16,.18)}
  .hero__arrow svg{width:18px;height:18px}
  .hero__nav{padding-inline:.55rem}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   ELEVATION PASS — preloader, grain, marquee, lightbox, editorial details
   ========================================================================== */

/* ---------- preloader curtain ---------- */
.preloader{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:grid;place-items:center;
  transition:transform 1s cubic-bezier(.76,0,.24,1);
}
.preloader.done{transform:translateY(-100%)}
.preloader__mark{display:flex;flex-direction:column;align-items:center;gap:.6rem;overflow:hidden}
.preloader__word{
  font-family:var(--font-display);font-size:clamp(2rem,6vw,3.4rem);letter-spacing:.34em;
  color:var(--paper);text-transform:uppercase;padding-left:.34em;
  animation:plRise 1s var(--ease-lux) both .1s;
}
.preloader__line{width:0;height:1px;background:var(--gold);animation:plLine .9s var(--ease-lux) both .55s}
.preloader__sub{
  font:400 .6rem var(--font-sans);letter-spacing:.5em;color:var(--gold);text-transform:uppercase;
  padding-left:.5em;animation:plRise .8s var(--ease-lux) both .7s;
}
@keyframes plRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes plLine{to{width:120px}}
body.loading{overflow:hidden}

/* ---------- film grain ---------- */
.grain{
  position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  background-repeat:repeat;
  animation:grainShift 1.2s steps(3) infinite;
}
@keyframes grainShift{
  0%,100%{background-position:0 0}
  33%{background-position:-90px 50px}
  66%{background-position:70px -70px}
}

/* ---------- marquee ---------- */
.marquee{
  overflow:hidden;border-block:1px solid var(--line);padding:1.15rem 0;
  background:var(--paper);white-space:nowrap;
}
.marquee__track{display:inline-flex;gap:0;animation:marquee 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{
  font-family:var(--font-display);font-size:1.05rem;letter-spacing:.34em;text-transform:uppercase;
  padding-inline:1.6rem;color:var(--ink);display:inline-flex;align-items:center;gap:3.2rem;
}
.marquee__item::after{content:"·";color:var(--gold);font-size:1.3rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- parallax figures ---------- */
.plx{overflow:hidden}
.plx img{transform:scale(1.14);will-change:transform}

/* ---------- product card index numerals ---------- */
.p-card__idx{
  position:absolute;top:.9rem;right:1rem;z-index:2;
  font-family:var(--font-display);font-size:.95rem;letter-spacing:.14em;
  color:rgba(255,255,255,.85);text-shadow:0 1px 12px rgba(0,0,0,.4);
  font-variant-numeric:tabular-nums;
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:150;background:rgba(10,10,10,.94);
  display:grid;place-items:center;padding:4vmin;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease-lux),visibility 0s .45s;
}
.lightbox.open{opacity:1;visibility:visible;transition:opacity .45s var(--ease-lux),visibility 0s 0s}
.lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.lightbox__close{
  position:absolute;top:2rem;right:2.4rem;color:#fff;font-size:.75rem;letter-spacing:.34em;
  text-transform:uppercase;display:flex;align-items:center;gap:.8rem;
}
.lightbox__close:hover{color:var(--gold)}
.gallery__main{cursor:zoom-in}

/* ---------- footer watermark ---------- */
.footer{position:relative;overflow:hidden}
.footer__watermark{
  position:absolute;left:50%;bottom:-.18em;transform:translateX(-50%);
  font-family:var(--font-display);font-size:clamp(6rem,19vw,17rem);line-height:1;
  letter-spacing:.12em;text-transform:uppercase;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.05);pointer-events:none;user-select:none;white-space:nowrap;
}
.footer .wrap{position:relative;z-index:2}

/* ---------- image fade-in on load ---------- */
img.lazy-fade{opacity:0;transition:opacity .8s var(--ease-lux)}
img.lazy-fade.loaded{opacity:1}

/* ---------- collection hero band ---------- */
.col-band{position:relative;height:clamp(240px,34vh,380px);overflow:hidden;background:var(--ink)}
.col-band img{width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(.9)}
.col-band__title{
  position:absolute;inset:0;display:grid;place-items:center;color:var(--white);
  text-transform:uppercase;letter-spacing:.14em;text-align:center;padding-inline:1rem;
}

/* ==========================================================================
   MOBILE HARDENING — iOS / Android
   ========================================================================== */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}

/* 16px+ inputs so iOS Safari never zoom-jumps on focus */
.search-field input{font-size:1rem}
.field input,.field select,textarea{font-size:max(1rem,1.05rem)}

/* keyboard focus — visible, on-brand */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn:focus-visible,.nav__link:focus-visible{outline-offset:5px}

/* floating buttons clear the iPhone home bar */
.wa-float{bottom:calc(1.6rem + env(safe-area-inset-bottom));right:calc(1.6rem + env(safe-area-inset-right))}
.to-top{bottom:calc(6.6rem + env(safe-area-inset-bottom))}

/* mobile nav: scrollable on short screens, staggered entrance, safe areas */
.mobile-nav{
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-top:max(var(--pad),env(safe-area-inset-top),86px);
  padding-bottom:max(var(--pad),env(safe-area-inset-bottom));
  justify-content:flex-start;
}
.mobile-nav.open a{transition-delay:calc(var(--i,0)*45ms)}

/* comfortable touch targets */
@media (hover:none){
  .size-pill{padding:.75rem 1.3rem}
  .gallery__thumbs{grid-template-columns:repeat(5,1fr)}
  .gallery__thumbs button{min-width:44px}
  .carousel-ctrl button{width:48px;height:48px}
  .hero__dots{gap:1.1rem}
  .hero__dot{height:3px;width:40px}
  /* hover-only affordances get an always-on state on touch */
  .p-card .img-hover{display:none}
  .text-link::after{transform:scaleX(1)}
}

/* very small phones */
@media (max-width:400px){
  .display-hero{font-size:2.3rem;letter-spacing:.1em}
  .btn{padding:.95rem 1.7rem;letter-spacing:.2em}
  .wrap{padding-inline:1.1rem}
  .hero__sub{font-size:.85rem}
}

/* landscape phones — hero can't rely on tall viewport */
@media (max-height:480px){
  .hero{min-height:480px}
  .hero__content{gap:1.2rem}
}

/* ---------- full-bleed editorial band ---------- */
.edit-band{position:relative;min-height:clamp(480px,72vh,720px);display:grid;place-items:center;overflow:hidden;text-align:center;color:var(--white)}
.edit-band img,.edit-band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.edit-band__veil{position:absolute;inset:0;background:linear-gradient(rgba(10,10,10,.46),rgba(10,10,10,.28) 45%,rgba(10,10,10,.52))}
.edit-band__inner{position:relative;z-index:2;padding-block:5rem}
.edit-band blockquote{margin:1.2rem 0;font-style:italic;font-weight:500}

/* bestseller tag */
.p-card__tag--gold{background:var(--gold);color:var(--white)}

/* ==========================================================================
   HEADER SEARCH OVERLAY
   ========================================================================== */
.header__actions{display:flex;align-items:center;gap:.4rem}
.nav-search{padding:.65rem;display:grid;place-items:center;border-radius:50%;transition:background .3s}
.nav-search svg{width:20px;height:20px}
.nav-search:hover{background:rgba(128,128,128,.14)}

.search-overlay{
  position:fixed;inset:0;z-index:160;
  background:rgba(247,245,241,.98);backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease-lux),visibility 0s .4s;
  overflow-y:auto;
}
.search-overlay.open{opacity:1;visibility:visible;transition:opacity .4s var(--ease-lux),visibility 0s 0s}
.search-overlay__close{
  position:absolute;top:1.6rem;right:clamp(1.2rem,4vw,3rem);
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);
  padding:.6rem;
}
.search-overlay__close:hover{color:var(--ink)}
.search-overlay__inner{padding-top:clamp(5.5rem,14vh,9rem);padding-bottom:4rem;max-width:860px}
.search-overlay__field{
  display:flex;align-items:center;gap:1.1rem;
  border-bottom:1px solid var(--ink);padding-bottom:.9rem;
}
.search-overlay__field svg{width:26px;height:26px;color:var(--gold-deep);flex-shrink:0}
.search-overlay__field input{
  width:100%;background:none;border:none;outline:none;
  font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.4rem);
  color:var(--ink);letter-spacing:.02em;
}
.search-overlay__field input::placeholder{color:rgba(16,16,16,.35)}
.search-overlay__hint{font-size:.78rem;letter-spacing:.12em;color:var(--grey);margin-top:.9rem}
.search-overlay__count{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);margin:2.2rem 0 .8rem}
.search-overlay__empty{color:var(--grey);padding:1.4rem 0}
.s-row{
  display:flex;align-items:center;gap:1.2rem;padding:.85rem .6rem;
  border-bottom:1px solid var(--line);transition:background .25s,padding-left .35s var(--ease-lux);
}
.s-row:hover{background:rgba(179,148,95,.07);padding-left:1rem}
.s-row img,.s-row__ph{width:58px;height:58px;object-fit:cover;flex-shrink:0;background:var(--paper-warm)}
.s-row__body{flex:1;min-width:0}
.s-row__name{font-family:var(--font-display);font-size:1.15rem;display:block}
.s-row__bs{font-style:normal;font-family:var(--font-sans);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--white);background:var(--gold);padding:.18rem .55rem;vertical-align:2px;margin-left:.5rem}
.s-row__type{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);display:block;margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-row__sizes{font-size:.8rem;color:var(--gold-deep);white-space:nowrap}
@media (max-width:560px){ .s-row__sizes{display:none} }

/* ---------- product image copy-protection ----------
   Images only: no drag ghost, no long-press select. Page text stays
   fully selectable and accessible. */
img{
  -webkit-user-drag:none;
  user-drag:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  /* long-press lands on the parent card/button, so the mobile
     "Save image" sheet never opens; all clicks are handled by parents */
  pointer-events:none;
}

/* to-top: TOP label above arrow */
.to-top{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:48px;line-height:1}
.to-top__word{font-size:.5rem;letter-spacing:.22em}
.to-top__arrow{font-size:.9rem}

/* ---------- logo sub-line now longer (factory supply) ---------- */
.logo__sub{letter-spacing:.14em;font-size:.52rem;white-space:nowrap}
@media (max-width:520px){ .logo__sub{white-space:normal;letter-spacing:.1em;max-width:200px;line-height:1.3} }

/* ---------- nav: fit the longer "Shipping & Order Enquiry" ---------- */
.nav{gap:clamp(1rem,1.9vw,2rem)}
.nav__link{font-size:.7rem;letter-spacing:.18em}

/* ---------- steps grid: no empty trailing cell when odd count ---------- */
@media (max-width:1080px){
  .steps .step:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ---------- search suggestions dropdown (collection sidebar) ---------- */
.search-field{position:relative}
.search-suggest{
  position:absolute;left:0;right:0;top:calc(100% + .4rem);z-index:40;
  background:var(--white);border:1px solid var(--line);box-shadow:0 20px 40px -20px rgba(0,0,0,.3);
  max-height:60vh;overflow-y:auto;display:none;
}
.search-suggest.show{display:block}
.ss-row{display:flex;align-items:center;gap:.8rem;padding:.6rem .7rem;border-bottom:1px solid var(--line);transition:background .2s}
.ss-row:last-child{border-bottom:none}
.ss-row:hover{background:var(--paper-warm)}
.ss-row img,.ss-row__ph{width:44px;height:44px;object-fit:cover;flex-shrink:0;background:var(--paper-warm)}
.ss-row__name{font-family:var(--font-display);font-size:1rem;line-height:1.1}
.ss-row__type{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}

/* ---------- enquiry: tonnes field + port datalist ---------- */
.enq-tons{max-width:140px}

/* ---------- product gallery arrows (hover / touch) ---------- */
.gallery__main{position:relative}
.gal-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(247,245,241,.82);backdrop-filter:blur(4px);color:var(--ink);
  border:1px solid var(--line);
  opacity:0;transition:opacity .35s var(--ease-lux),background .3s;cursor:pointer;
}
.gal-arrow--prev{left:.9rem}
.gal-arrow--next{right:.9rem}
.gal-arrow svg{width:22px;height:22px}
.gallery__main:hover .gal-arrow{opacity:1}
.gal-arrow:hover{background:var(--ink);color:var(--paper)}
/* always visible on touch devices */
@media (hover:none){ .gal-arrow{opacity:.9} }
.gallery__main{touch-action:pan-y}

/* ==========================================================================
   LANGUAGE SWITCH + ARABIC / RTL
   ========================================================================== */
.lang-switch{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .55rem;border:1px solid currentColor;border-radius:2px;
  font-family:var(--font-sans);font-size:.7rem;letter-spacing:.1em;
  opacity:.8;transition:opacity .3s;
}
.lang-switch:hover{opacity:1}
.lang-switch__opt{opacity:.5;transition:opacity .3s}
.lang-switch__opt.is-active{opacity:1;font-weight:500}
.lang-switch__ar{font-size:1rem;line-height:1;font-family:"Cairo","Amiri",sans-serif}
.lang-switch__sep{opacity:.35}

/* ---- Arabic type + direction ---- */
html[lang="ar"]{
  --font-display:"Amiri","Cormorant Garamond",Georgia,serif;
  --font-sans:"Cairo","Jost","Segoe UI",sans-serif;
}
/* letter-spacing breaks joined Arabic script — neutralise it, and drop
   uppercase (meaningless in Arabic) on the tracked Latin-style elements */
html[lang="ar"] *{letter-spacing:normal !important}
html[lang="ar"] .eyebrow,
html[lang="ar"] .btn,
html[lang="ar"] .nav__link,
html[lang="ar"] .text-link,
html[lang="ar"] .logo__sub,
html[lang="ar"] .mega__hint,
html[lang="ar"] .mega__foot,
html[lang="ar"] .display-hero,
html[lang="ar"] .side-nav,
html[lang="ar"] .ss-row__type,
html[lang="ar"] .s-row__type,
html[lang="ar"] .stat .l,
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{text-transform:none}
/* Arabic display faces sit tighter — give headings a little more air */
html[lang="ar"] .display-hero,
html[lang="ar"] .display-xl,
html[lang="ar"] .display-lg,
html[lang="ar"] .display-md,
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{line-height:1.3}

/* ---- flip fixed / positioned UI for RTL ---- */
html[dir="rtl"] .wa-float{right:auto;left:1.6rem}
html[dir="rtl"] .wa-float .tip{right:auto;left:calc(100% + 14px)}
html[dir="rtl"] .to-top{right:auto;left:1.75rem}
html[dir="rtl"] .nav__caret{margin-left:0;margin-right:.4rem}
html[dir="rtl"] .gal-arrow--prev{left:auto;right:.9rem}
html[dir="rtl"] .gal-arrow--next{right:auto;left:.9rem}
html[dir="rtl"] .gal-arrow svg{transform:scaleX(-1)}
/* keep hero prev/next arrows pointing outward (← left, → right) in RTL */
html[dir="rtl"] .hero__nav{direction:ltr}
html[dir="rtl"] .search-field svg{right:auto;left:0}
html[dir="rtl"] .search-field input{padding:.65rem 0 .65rem 1.8rem}
@media (max-width:640px){
  html[dir="rtl"] .wa-float{right:auto;left:calc(1.6rem + env(safe-area-inset-left))}
  html[dir="rtl"] .to-top{right:auto;left:calc(1.75rem + env(safe-area-inset-left))}
}

/* ==========================================================================
   RTL NUMBER / SIZE / PHONE DIRECTION
   Latin numbers, size ranges (50–80mm) and phone numbers must keep their
   left-to-right order even inside right-to-left Arabic text.
   ========================================================================== */
html[dir="rtl"] .size-pill,
html[dir="rtl"] .stat .n,
html[dir="rtl"] .s-row__sizes,
html[dir="rtl"] .spec-table td,
html[dir="rtl"] a[href*="wa.me"]:not(.wa-float),
html[dir="rtl"] a[href^="tel:"]{ direction:ltr; unicode-bidi:isolate; }
html[dir="rtl"] .p-card__sizes,
html[dir="rtl"] .enq-meta{ direction:ltr; unicode-bidi:isolate; text-align:right; }

/* ==========================================================================
   3-UP STEP GRID (About "Three promises") — no orphan empty cell
   ========================================================================== */
.steps--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1080px){ .steps--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .steps--3{grid-template-columns:1fr} }

/* ==========================================================================
   USABILITY — visible keyboard focus (accessibility), snappier feel
   ========================================================================== */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:1px;
}
:focus:not(:focus-visible){outline:none}

/* ==========================================================================
   ABOUT INTRO — heading + image duo (replaces the bare text hero)
   ========================================================================== */
.about-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about-intro__fig{margin:0;aspect-ratio:4/5;overflow:hidden}
.about-intro__fig img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .about-intro{grid-template-columns:1fr;gap:2.2rem}
  .about-intro__fig{aspect-ratio:16/10}
}

/* ==========================================================================
   FACTORY BAND — slow Ken-Burns motion on the real factory still
   (used where an autoplay video isn't viable; respects reduced-motion)
   ========================================================================== */
.edit-band--motion img{animation:kbFactory 22s ease-in-out infinite alternate;will-change:transform}
@keyframes kbFactory{
  from{transform:scale(1.04) translate(0,0)}
  to{transform:scale(1.15) translate(-2%,-1.4%)}
}
@media (prefers-reduced-motion:reduce){ .edit-band--motion img{animation:none} }

/* ==========================================================================
   MOBILE NAV CLOSE (✕) + HERO TOUCH
   ========================================================================== */
.mobile-nav__close{
  position:absolute;top:calc(1rem + env(safe-area-inset-top));inset-inline-end:calc(1.1rem + env(safe-area-inset-right));
  width:52px;height:52px;display:grid;place-items:center;
  font-size:1.5rem;line-height:1;color:var(--paper);
  border:1px solid rgba(255,255,255,.28);border-radius:50%;
  opacity:0;transition:opacity .5s var(--ease-lux) .15s;
}
.mobile-nav.open .mobile-nav__close{opacity:1}
.mobile-nav__close:active{background:rgba(255,255,255,.14)}
/* horizontal swipes belong to the slider; vertical scroll stays native */
.hero{touch-action:pan-y}

/* "You may also like" grid — 4-up only on wide screens; inherits the
   normal 2-col / 1-col responsive behaviour on tablets and phones */
@media (min-width:1081px){ .grid-products--related{grid-template-columns:repeat(4,1fr)} }

/* ==========================================================================
   iOS / ANDROID POLISH
   ========================================================================== */
/* no grey tap flash; no 300ms double-tap delay on controls */
a,button,input,select,textarea,.size-pill{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* iOS renders search/text inputs with its own rounded chrome — reset it */
input[type="search"],input[type="text"],input[type="email"],input[type="tel"],
input[type="number"],input[type="date"]{-webkit-appearance:none;appearance:none;border-radius:0}
/* momentum scrolling for horizontal carousels */
.carousel{-webkit-overflow-scrolling:touch}
/* hero: vh fallback for older iOS Safari that lacks svh */
.hero{height:100vh;height:100svh}
/* inputs at 16px+ on phones so iOS doesn't zoom the page on focus */
@media (max-width:640px){
  input,select,textarea{font-size:16px}
}

/* ==========================================================================
   ARABIC HERO DESCENDERS + IMAGE WATERMARK
   ========================================================================== */
/* the reveal mask clips Arabic descenders (ج ي ق) — give them room in RTL */
html[dir="rtl"] .hero__title .line{padding-bottom:.26em;margin-bottom:-.26em}
html[dir="rtl"] .hero__title{line-height:1.34}

/* capture deterrent veil — appears only when a screen-grab is attempted
   (PrintScreen key); invisible during normal browsing */
.ss-veil{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:rgba(16,16,16,.94);color:var(--gold);
  font-family:var(--font-display);font-size:clamp(1.6rem,5vw,3.4rem);
  letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;
  pointer-events:none;
}

/* ==========================================================================
   PRINT PROTECTION — no photography leaves the site via Ctrl+P / print-to-PDF.
   Text, specs and contact details stay printable and tidy.
   ========================================================================== */
@media print{
  /* photography never prints */
  img,video{display:none !important}

  /* screen chrome has no place on paper */
  .hero,.marquee,.grain,.preloader,.wa-float,.to-top,.burger,.nav-search,
  .lang-switch,.mega,.mobile-nav,.search-overlay,.gal-arrow,.hero__nav,
  .hero__dots,.lightbox,.edit-band{display:none !important}

  /* every product image slot prints a copyright card instead */
  .p-card figure::before{
    content:"© Zhizhuo — photography online only";
    display:grid;place-items:center;height:30mm;
    border:1px solid #bbb;padding:4mm;text-align:center;
    font-family:Georgia,serif;font-size:8.5pt;color:#666;
  }
  .gallery__main::before{
    content:"© Hangzhou Zhizhuo — product photography is copyright-protected and available on the website only.";
    display:grid;place-items:center;height:50mm;
    border:1px solid #bbb;padding:8mm;text-align:center;
    font-family:Georgia,serif;font-size:10pt;color:#555;
  }
  .gallery__main{aspect-ratio:auto}
  .gallery__main::after{display:none}          /* screen watermark not needed here */
  figure{min-height:auto}

  /* every printed page carries the ownership line */
  body::after{
    content:"© Hangzhou Zhizhuo · Natural Stone & Pebble — all product photography is copyright-protected. WhatsApp +44 7593 117811 · anwaarali@zzstones.com";
    display:block;margin-top:10mm;padding-top:4mm;
    border-top:1px solid #999;text-align:center;
    font-family:Georgia,serif;font-size:8.5pt;color:#555;
  }
}

/* logo → home: enlarge the tap target (invisible) so fingertips can't miss it */
.header .logo{padding:.55rem .65rem;margin:-.55rem -.65rem}

/* ==========================================================================
   MARQUEE — RTL geometry + Arabic-safe type + clickable items
   ========================================================================== */
/* the loop animation is built for LTR flow; keep the strip LTR in Arabic so
   it never scrolls past its content (the "goes blank" bug). Arabic text
   inside each item still renders correctly. */
html[dir="rtl"] .marquee{direction:ltr}
/* wide tracking tears Arabic's joined letters apart — keep it near-solid */
html[dir="rtl"] .marquee__item{letter-spacing:.04em}
.marquee__item{transition:color .3s var(--ease-lux)}
.marquee__item:hover{color:var(--gold-deep)}

/* ==========================================================================
   ACCESSIBILITY PASS — skip link, contrast, search keyboard highlight
   ========================================================================== */
.skip-link{
  position:fixed;top:-100px;left:1rem;z-index:300;
  background:var(--ink);color:var(--paper);padding:.8rem 1.4rem;
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  transition:top .25s var(--ease-lux);
}
.skip-link:focus{top:1rem;outline:2px solid var(--gold)}
html[dir="rtl"] .skip-link{left:auto;right:1rem}

/* enquiry panel labels & footer smallprint were below contrast minimums */
.calc-result .field label{color:rgba(255,255,255,.8)!important}
.calc-note{color:rgba(255,255,255,.75)}
.footer__bottom{color:rgba(255,255,255,.62)}

/* keyboard-highlighted row in the search overlay */
.s-row.is-hot{background:rgba(179,148,95,.14);outline:1px solid var(--gold)}

/* ==========================================================================
   QUOTE CART — badge, sticky enquire bar, container gauge, hover loupe
   ========================================================================== */
/* header basket count */
.enq-badge{
  display:inline-grid;place-items:center;min-width:1.15rem;height:1.15rem;
  margin-inline-start:.45rem;padding-inline:.25rem;border-radius:999px;
  background:var(--gold);color:var(--white);
  font-size:.62rem;font-weight:500;letter-spacing:0;vertical-align:middle;
}
.enq-badge[hidden]{display:none}
.mobile-nav .enq-badge{font-size:.8rem;min-width:1.5rem;height:1.5rem}

/* sticky enquire bar — phones/tablets only, slides up when the CTAs scroll away */
.sticky-enquire{
  position:fixed;left:0;right:0;bottom:0;z-index:96;
  display:none;align-items:center;gap:.8rem;
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(16,16,16,.96);backdrop-filter:blur(10px);
  color:var(--paper);border-top:1px solid rgba(255,255,255,.14);
  transform:translateY(105%);transition:transform .45s var(--ease-lux);
}
.sticky-enquire.show{transform:none}
.sticky-enquire__name{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-display);font-size:1rem;
}
.sticky-enquire__btn{
  flex-shrink:0;padding:.65rem 1.1rem;border:1px solid var(--gold);color:var(--gold);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
}
.sticky-enquire__wa{
  flex-shrink:0;width:40px;height:40px;display:grid;place-items:center;
  background:#25D366;color:#fff;border-radius:50%;
}
.sticky-enquire__wa svg{width:22px;height:22px}
@media (max-width:900px){
  .sticky-enquire{display:flex}
  /* lift the float buttons clear of the bar on product pages */
  body[data-page="product"] .wa-float{bottom:calc(4.6rem + env(safe-area-inset-bottom))}
  body[data-page="product"] .to-top{bottom:calc(9.4rem + env(safe-area-inset-bottom))}
}

/* container fill gauge in the enquiry panel */
.fill-gauge{margin-top:1.2rem}
.fill-gauge__bar{
  height:14px;border:1px solid rgba(255,255,255,.35);border-radius:3px;
  overflow:hidden;background:rgba(255,255,255,.06);
}
.fill-gauge__fill{
  height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  transition:width .6s var(--ease-lux);
}
.fill-gauge__label{font-size:.74rem;color:rgba(255,255,255,.8);margin-top:.45rem;letter-spacing:.04em}
html[dir="rtl"] .fill-gauge__label{direction:ltr;unicode-bidi:isolate;text-align:right}

/* magnifier loupe over the product gallery (desktop hover only) */
.loupe{
  position:absolute;width:140px;height:140px;border-radius:50%;
  border:1px solid rgba(255,255,255,.9);box-shadow:0 6px 24px rgba(0,0,0,.35);
  background-repeat:no-repeat;background-color:var(--white);
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;
  transition:opacity .25s ease;z-index:4;
}

/* ==========================================================================
   BEST-SELLERS AUTO-DRIFT + SINGLE WHATSAPP ON MOBILE PRODUCT PAGES
   ========================================================================== */
/* snap fights the glide — the drifting track scrolls freely */
.carousel[data-drift]{scroll-snap-type:none}

/* the sticky enquire bar already carries WhatsApp — one icon is enough */
@media (max-width:900px){
  body[data-page="product"] .wa-float{display:none}
  body[data-page="product"] .to-top{bottom:calc(5.2rem + env(safe-area-inset-bottom))}
}