/* pages.css — Home hero, catalog, product, wholesale, legal pages */

/* ─────────── HOME HERO ─────────── */
.hero{
  position:relative;
  min-height:100vh;
  padding-top:var(--s-8);
  padding-bottom:var(--s-9);
  overflow:hidden;
  width:100%;
}
.hero__inner{
  position:relative;
  z-index:2;
  min-height:calc(100vh - var(--header-h) - var(--s-8));
  /* left-anchored: text starts where the standard wrap starts on narrow screens,
     and stays LEFT on ultra-wide screens instead of drifting toward center */
  padding-inline:clamp(20px, 4vw, 48px);
  max-width:calc(50% + var(--wrap)/2);
  display:flex;flex-direction:column;justify-content:flex-start;
}
.hero__text{
  max-width:720px;
  padding:var(--s-4) 0 0;
  position:relative;z-index:2;
}
@media (min-width:1600px){
  .hero__inner{max-width:min(72vw, 1000px)}
}
.hero__title{
  font-size:clamp(52px,8vw,144px);
  line-height:.92;
  letter-spacing:-0.04em;
  font-weight:800;
  margin:var(--s-4) 0 var(--s-5);
}
@media (max-width:960px){
  .hero__title{font-size:clamp(44px,10vw,80px)}
}
.hero__title em{font-style:normal;color:var(--wood)}
.hero__kicker{
  font-size:clamp(20px,2.2vw,32px);
  color:var(--muted-2);
  font-weight:400;
  margin:calc(var(--s-3) * -1) 0 var(--s-5);
  letter-spacing:-0.01em;
}
.hero__kicker em{font-style:normal;color:var(--wood);font-weight:600}
.hero__sub{
  font-size:clamp(16px,1.6vw,20px);
  color:var(--muted-2);
  max-width:600px;
  line-height:1.5;
  margin:0 0 var(--s-6);
}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap}

/* product image overlaps text — soft left-fade keeps text legible */
.hero__stage{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.hero__product{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  top:0;
  overflow:hidden;
  background:transparent;
}
.hero__product img{
  width:100%;height:100%;
  object-fit:cover;
  /* keep the shelf in the visible right-center on all viewports */
  object-position:65% 45%;
  transition:transform var(--d-slow) var(--e-out);
}
/* on very wide screens, cap image extension so photo still looks intentional and edges fade */
@media (min-width:1800px){
  .hero__product img{object-position:60% 45%}
}
.hero__product::after{
  content:"";
  position:absolute;inset:0;
  background:
    /* bottom → site: soft fade so hero blends into next section */
    linear-gradient(180deg, transparent 60%, color-mix(in oklab, var(--bg) 45%, transparent) 82%, var(--bg) 100%),
    /* right edge: subtle so ultra-wide screens don't show a hard cut */
    linear-gradient(270deg, color-mix(in oklab, var(--bg) 30%, transparent) 0%, transparent 12%),
    /* left curtain for text legibility */
    linear-gradient(90deg,
      var(--bg) 0%,
      color-mix(in oklab, var(--bg) 92%, transparent) 22%,
      color-mix(in oklab, var(--bg) 45%, transparent) 42%,
      transparent 62%);
  pointer-events:none;
}
@media (max-width:960px){
  /* stack: text on top, photo below with soft fades */
  .hero{display:flex;flex-direction:column;padding-top:var(--s-5);padding-bottom:var(--s-6);min-height:0}
  .hero__inner{order:1;padding-inline:clamp(20px,5vw,32px);max-width:none;min-height:0}
  /* hide CTA buttons on mobile — keep desktop layout intact */
  .hero__ctas{display:none}
  .hero__stage{
    order:2;
    position:relative;left:auto;right:auto;top:auto;bottom:auto;
    height:auto;overflow:hidden;
    /* negative margin pulls photo up so it overlaps the last lines of text */
    margin-top:calc(var(--s-7) * -1);margin-inline:calc(clamp(20px,5vw,32px) * -1);
  }
  .hero__product{
    position:relative;
    left:auto;right:auto;top:auto;bottom:auto;
    width:100%;max-width:none;
    aspect-ratio:5/4;
  }
  .hero__product img{
    /* shift shelf visible on the right side of the crop */
    object-position:78% 50%;
  }
  .hero__product::after{
    display:block;
    background:
      /* top fade: aggressive dissolve into beige so photo top disappears into H1/lead area */
      linear-gradient(180deg,
        var(--bg) 0%,
        color-mix(in oklab, var(--bg) 85%, transparent) 12%,
        color-mix(in oklab, var(--bg) 50%, transparent) 28%,
        transparent 52%,
        transparent 68%,
        color-mix(in oklab, var(--bg) 60%, transparent) 88%,
        var(--bg) 100%);
  }
  .hero__title{margin-top:var(--s-3)}
  .hero__sub{margin-bottom:var(--s-5)}
}
@media (max-width:640px){
  .hero__product{aspect-ratio:4/3}
}

/* CSS scroll-driven scale for hero */
@supports (animation-timeline: view()){
  .hero__product{
    animation:hero-scale linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 80%;
  }
  @keyframes hero-scale{
    0%{transform:scale(.94) translateY(20px)}
    30%{transform:scale(1) translateY(0)}
    100%{transform:scale(1.14) translateY(-6vh)}
  }
  .hero__text{
    animation:hero-fade linear both;
    animation-timeline:view();
    animation-range:exit -30% exit 80%;
  }
  @keyframes hero-fade{
    from{opacity:1;transform:translateY(0)}
    to{opacity:0;transform:translateY(-40px)}
  }
}

/* hero eyebrow strip */
.hero__meta{
  display:flex;gap:var(--s-6);flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:var(--s-4);
  margin-top:var(--s-7);
  color:var(--muted-2);font-size:12px;
  font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.14em;
}

/* ─────────── HOME CATALOG BLOCK ─────────── */
.home-catalog{padding-top:var(--s-10)}
@media (max-width:720px){
  /* pull КАТАЛОГ eyebrow up so it overlaps bottom of hero photo */
  .home-catalog{margin-top:calc(var(--s-8) * -1);padding-top:0;position:relative;z-index:3}
}
.section-title-lg{
  font-family:var(--f-display);
  font-size:clamp(56px,7vw,120px);
  font-weight:700;
  line-height:.95;
  letter-spacing:-0.03em;
  margin:0 0 var(--s-3);
  color:var(--ink);
}
.section-title-sub{
  font-family:var(--f-body);
  font-size:clamp(16px,1.4vw,20px);
  color:var(--muted-2);
  margin:0;
  line-height:1.4;
  font-weight:500;
}
.section-head{
  display:flex;justify-content:space-between;align-items:end;
  gap:var(--s-5);margin-bottom:var(--s-7);flex-wrap:wrap;
}
.section-head .lede{
  color:var(--muted-2);max-width:640px;font-size:16px;line-height:1.55;
}

/* ─────────── CARD GRID ─────────── */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s-6);
}
.grid--wide{grid-template-columns:repeat(4,1fr);gap:var(--s-5)}
@media (max-width:960px){
  .grid,.grid--wide{grid-template-columns:repeat(2,1fr);gap:var(--s-4)}
}
@media (max-width:540px){
  .grid,.grid--wide{grid-template-columns:1fr}
}

/* product card */
.card{
  position:relative;
  display:flex;flex-direction:column;
  border-radius:var(--r-lg);
  background:transparent;
  transition:transform var(--d-mid) var(--e-out);
  text-decoration:none;color:inherit;
}
.card:hover{transform:translateY(-4px)}
.card__media{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:#e6e0d5;
  margin-bottom:var(--s-4);
  isolation:isolate;
}
.card__media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--d-slow) var(--e-out),opacity var(--d-mid) var(--e-out);
}
.card__media img.card__alt{
  opacity:0;transform:scale(1.02);z-index:2;
}
.card:hover .card__media img.card__main{transform:scale(1.05)}
.card:hover .card__media img.card__alt{opacity:1;transform:scale(1)}
/* card gallery slides (arrow-nav) */
.card__slide{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity var(--d-mid) var(--e-out);
  z-index:1;
}
.card__slide.is-active{opacity:1;z-index:2}
.card__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:34px;height:34px;border-radius:999px;
  border:none;background:rgba(255,255,255,.9);
  color:var(--ink);font-size:20px;line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--d-mid) var(--e-out),background .2s;
  box-shadow:0 2px 10px rgba(0,0,0,.14);
}
.card:hover .card__nav{opacity:1}
.card__nav:hover{background:#fff}
.card__nav--prev{left:10px}
.card__nav--next{right:10px}
.card__dots{
  position:absolute;left:0;right:0;bottom:10px;z-index:4;
  display:flex;justify-content:center;gap:6px;
  pointer-events:none;
}
.card__dot{
  width:6px;height:6px;border-radius:999px;
  background:rgba(255,255,255,.55);transition:background .2s;
  box-shadow:0 0 0 1px rgba(0,0,0,.05);
}
.card__dot.is-active{background:#fff}
@media (hover:none){
  .card__nav{opacity:1}
}
.card__body{
  display:flex;flex-direction:column;gap:6px;padding:0 4px;
}
.card__sku{
  font-family:var(--f-mono);font-size:11px;
  color:var(--muted-2);text-transform:uppercase;letter-spacing:.12em;
}
.card__name{
  font-family:var(--f-display);font-weight:600;font-size:18px;
  letter-spacing:-0.015em;line-height:1.2;color:var(--ink);
}
.card__variant{font-size:13px;color:var(--muted-2)}
.card__price{
  font-family:var(--f-mono);font-size:13px;color:var(--ink);
  margin-top:6px;letter-spacing:.02em;
}
.card__price .from{color:var(--muted-2);margin-right:4px;font-size:11px;text-transform:uppercase;letter-spacing:.12em}

/* ─────────── FILTERS ─────────── */
.filters{
  display:flex;flex-wrap:wrap;gap:var(--s-3);
  margin:0 0 var(--s-6);
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.filters__label{
  font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted-2);margin-right:6px;
}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--line);background:transparent;
  font-size:13px;color:var(--ink);cursor:pointer;
  transition:all var(--d-fast) var(--e-out);
}
.chip:hover{border-color:var(--ink)}
.chip.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip__dot{
  width:12px;height:12px;border-radius:50%;
  border:1px solid var(--line);
}
.chip__dot--white{background:#fff}
.chip__dot--black{background:#111}
.chip__dot--wotan{background:#a67d5a}
.chip__dot--cement{background:#c9c3b8}
.chip__dot--cement-dark{background:#5c5952}
.chip__count{font-family:var(--f-mono);font-size:10px;color:var(--muted-2);margin-left:4px}
.chip.active .chip__count{color:rgba(247,245,241,.7)}

/* ─────────── PRODUCT PAGE ─────────── */
.product{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--s-8);
  padding-top:var(--s-6);
  align-items:start;
}
.product__gallery{
  position:sticky;top:calc(var(--header-h) + 24px);
  display:flex;flex-direction:column;gap:var(--s-3);
}
.product__main{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--card);
}
.product__main img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  animation:crossfade var(--d-mid) var(--e-out);
}
@keyframes crossfade{
  from{opacity:0;transform:scale(1.02)}
  to{opacity:1;transform:scale(1)}
}
.product__thumbs{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
}
.product__thumb{
  aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;
  background:var(--card);cursor:pointer;
  border:2px solid transparent;
  transition:border-color var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out);
}
.product__thumb img{width:100%;height:100%;object-fit:cover}
.product__thumb:hover{transform:translateY(-2px)}
.product__thumb.active{border-color:var(--ink)}

.product__info{
  padding:var(--s-4) 0;
  display:flex;flex-direction:column;gap:var(--s-5);
}
.product__meta{
  display:flex;gap:var(--s-3);align-items:center;
  font-family:var(--f-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted-2);
}
.product__sku{color:var(--ink)}
.product__title{
  font-size:clamp(32px,4.4vw,54px);
  line-height:1;letter-spacing:-0.03em;
  margin:0;font-weight:700;
}
.product__variant{
  font-size:18px;color:var(--muted-2);font-weight:400;
}
.product__prices{
  display:flex;flex-direction:column;gap:6px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:var(--s-5) 0;
}
.product__price-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);
}
.product__price-label{color:var(--muted-2);font-size:14px}
.product__price-val{
  font-family:var(--f-mono);font-weight:500;font-size:18px;color:var(--ink);
  letter-spacing:.02em;
}
.product__price-val--wholesale{color:var(--wood)}
.product__poa{
  color:var(--muted-2);font-size:13px;font-style:italic;
}
.product__ctas{display:flex;flex-direction:column;gap:10px}
.product__ctas .btn{justify-content:center;min-height:52px}
.product__marketplaces{
  display:flex;gap:10px;flex-wrap:wrap;
}
.product__marketplaces .btn{flex:1;min-width:160px}
.product__marketplaces .btn:hover{border-color:var(--wood);color:var(--wood)}

.product__specs{
  border-top:1px solid var(--line);
  padding-top:var(--s-5);
}
.product__specs h3{margin-bottom:var(--s-4);font-size:16px;font-family:var(--f-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.product__specs dl{margin:0;display:grid;grid-template-columns:1fr 1.4fr;gap:12px 16px}
.product__specs dt{color:var(--muted-2);font-size:14px}
.product__specs dd{margin:0;color:var(--ink);font-size:15px}

.product__related{
  margin-top:var(--s-9);
}
.product__related h3{
  font-family:var(--f-display);font-weight:600;font-size:24px;letter-spacing:-0.02em;
  text-transform:none;color:var(--ink);margin-bottom:var(--s-5);
}

@media (max-width:900px){
  .product{grid-template-columns:1fr;gap:var(--s-6)}
  .product__gallery{position:static}
}

/* ─────────── WHOLESALE ─────────── */
.wholesale{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);
  padding-top:var(--s-7);
}
.wholesale__intro h1{
  font-size:clamp(40px,6vw,80px);letter-spacing:-0.035em;margin:0 0 var(--s-5);
}
.wholesale__intro .lede{
  font-size:18px;color:var(--muted-2);line-height:1.55;
}
.wholesale__facts{
  margin-top:var(--s-6);display:flex;flex-direction:column;gap:var(--s-4);
  border-top:1px solid var(--line);padding-top:var(--s-6);
}
.wholesale__fact{
  display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:baseline;
}
.wholesale__fact .k{
  font-size:16px;color:var(--ink);font-weight:500;line-height:1.4;
}
.wholesale__fact .v{
  font-family:var(--f-mono);font-size:12px;color:var(--muted-2);
  letter-spacing:.04em;line-height:1.6;
}
@media (max-width:640px){
  .wholesale__fact{grid-template-columns:1fr;gap:2px}
}
.wholesale__form{
  background:var(--card);
  border-radius:var(--r-lg);
  padding:clamp(24px,4vw,44px);
}
.wholesale__form h2{font-size:24px;margin-bottom:var(--s-5)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.form-grid .full{grid-column:1/-1}
.form-hint{font-size:12px;color:var(--muted-2);margin-top:-2px}
.form-actions{display:flex;flex-direction:column;gap:12px;grid-column:1/-1;margin-top:var(--s-2)}
.form-actions .btn{width:100%;justify-content:center;min-height:56px}
.form-actions .btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
@media (max-width:900px){
  .wholesale{grid-template-columns:1fr;gap:var(--s-7)}
  .form-grid{grid-template-columns:1fr}
}

/* home-embedded wholesale strip */
.wholesale-strip{
  background:var(--ink);color:var(--bg);
  border-radius:var(--r-xl);
  padding:clamp(32px,6vw,72px);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:end;
}
.wholesale-strip h2{color:var(--bg);font-size:clamp(28px,4vw,52px)}
.wholesale-strip .lede{color:rgba(247,245,241,.7);max-width:480px;line-height:1.55;font-size:16px;margin-top:var(--s-4)}
.wholesale-strip .btn{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.wholesale-strip .btn:hover{background:var(--wood);color:var(--bg);border-color:var(--wood);box-shadow:none}
@media (max-width:720px){
  .wholesale-strip{grid-template-columns:1fr;gap:var(--s-5);padding:var(--s-6)}
}

/* home why grid — square image cards with caption overlay at bottom */
.why{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);
}
.why__item{
  position:relative;margin:0;
  aspect-ratio:1/1;
  border-radius:24px;
  overflow:hidden;
  background:var(--card);
  box-shadow:0 2px 12px rgba(26,25,24,.06);
  isolation:isolate;
}
.why__img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  z-index:1;
}
.why__cap{
  position:absolute;left:0;right:0;bottom:0;
  z-index:2;
  padding:var(--s-6) var(--s-5) var(--s-5);
  display:flex;flex-direction:column;gap:6px;
  color:#fff;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,.15) 40%,
    rgba(0,0,0,.65) 100%);
}
.why__title{
  font-family:var(--f-display);font-weight:600;font-size:22px;line-height:1.15;letter-spacing:-0.02em;
  color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}
.why__desc{
  color:rgba(255,255,255,.85);font-size:13px;line-height:1.45;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}
@media (max-width:960px){
  .why{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:540px){
  .why{grid-template-columns:1fr}
}

/* home marketplaces */
.markets{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);
}
.markets a{
  padding:var(--s-7) var(--s-6);border-radius:24px;
  background:linear-gradient(180deg, #fff 0%, color-mix(in oklab, var(--card) 60%, #fff) 100%);
  color:var(--ink);
  display:flex;flex-direction:column;gap:var(--s-3);
  border:1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  box-shadow:
    0 1px 2px rgba(26,25,24,.06),
    0 6px 16px rgba(26,25,24,.06),
    0 20px 40px rgba(26,25,24,.04),
    inset 0 1px 0 #fff;
  transition:transform var(--d-mid) var(--e-out),box-shadow var(--d-mid) var(--e-out),border-color var(--d-mid) var(--e-out);
}
.markets a:hover{
  border-color:color-mix(in oklab, var(--ink) 28%, transparent);
  transform:translateY(-4px);
  box-shadow:
    0 2px 4px rgba(26,25,24,.10),
    0 12px 28px rgba(26,25,24,.14),
    0 32px 60px rgba(26,25,24,.08),
    inset 0 1px 0 #fff;
}
.markets__name{font-family:var(--f-display);font-weight:600;font-size:24px;letter-spacing:-0.02em}
.markets__note{color:var(--muted-2);font-size:14px}
.markets__cta{
  margin-top:auto;font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--wood);
}
@media (max-width:720px){.markets{grid-template-columns:1fr}}

/* ─────────── LEGAL / STATIC PAGES ─────────── */
.legal{
  max-width:var(--wrap-narrow);
  margin-inline:auto;
  padding-top:var(--s-7);
}
.legal h1{
  font-size:clamp(36px,5vw,64px);
  letter-spacing:-0.035em;
  margin-bottom:var(--s-6);
}
.legal h2{
  font-size:clamp(22px,2.4vw,28px);
  margin-top:var(--s-7);margin-bottom:var(--s-4);
  font-weight:600;letter-spacing:-0.02em;
}
.legal p, .legal li{color:var(--ink);line-height:1.7;font-size:16px}
.legal ol, .legal ul{padding-left:24px;margin:0 0 1.2em}
.legal ol li, .legal ul li{margin-bottom:8px}
.legal .lede{font-size:18px;color:var(--muted-2);margin-bottom:var(--s-6)}
.legal a{color:var(--wood);text-decoration:underline;text-underline-offset:2px}

/* Contacts specific */
.contacts{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);
  padding-top:var(--s-7);
}
.contacts__col h1{font-size:clamp(36px,5vw,64px);margin:0 0 var(--s-6);letter-spacing:-0.035em}
.contacts__list{
  display:flex;flex-direction:column;gap:var(--s-4);
  border-top:1px solid var(--line);padding-top:var(--s-5);
}
.contacts__row{display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:baseline}
.contacts__k{font-family:var(--f-mono);font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.14em}
.contacts__v{font-size:16px;color:var(--ink);line-height:1.5}
.contacts__v a{color:var(--wood);text-decoration:underline;text-underline-offset:3px}
.contacts__card{
  background:var(--card);border-radius:var(--r-lg);padding:clamp(24px,4vw,40px);
  display:flex;flex-direction:column;gap:var(--s-4);
}
.contacts__card h3{font-size:20px;font-weight:600;margin:0}
@media (max-width:820px){
  .contacts{grid-template-columns:1fr;gap:var(--s-6)}
  .contacts__row{grid-template-columns:110px 1fr}
}

/* thanks page */
.thanks{
  max-width:var(--wrap-narrow);margin-inline:auto;text-align:center;
  padding-top:var(--s-10);padding-bottom:var(--s-9);
}
.thanks h1{font-size:clamp(40px,6vw,80px);margin:0 0 var(--s-5);letter-spacing:-0.035em}
.thanks p{color:var(--muted-2);font-size:18px;line-height:1.6;max-width:540px;margin:0 auto var(--s-6)}
.thanks__actions{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* skeleton */
.skeleton{
  background:linear-gradient(90deg,var(--card) 0%,#e6e0d5 50%,var(--card) 100%);
  background-size:200% 100%;
  animation:skel 1.4s ease-in-out infinite;
  border-radius:var(--r-lg);
  aspect-ratio:4/5;
}
@keyframes skel{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ─── Email verification widget (wholesale form) ─── */
.email-verify{
  margin-top:8px;
  display:flex;flex-direction:column;gap:8px;
}
.email-verify .btn-sm{
  padding:6px 12px;font-size:13px;align-self:flex-start;
  border:1px solid var(--border);
  background:transparent;color:var(--text);
}
.email-verify .btn-sm:hover:not(:disabled){background:var(--card)}
.email-verify .btn-sm:disabled{opacity:.5;cursor:not-allowed}
.email-verify [hidden]{display:none !important}
.email-verify__code{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.email-verify__code .input-sm{
  padding:6px 10px;font-size:14px;max-width:140px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);
  font-family:var(--font-mono, monospace);letter-spacing:.15em;
}
.email-verify__ok{
  color:#0d7a3a;font-size:13px;font-weight:500;
}
.email-verify__hint{font-size:12px}
body.is-submitting{cursor:progress}
body.is-submitting button[type=submit]{pointer-events:none;opacity:.7}