/* Lace & Lilies — design tokens lifted from "Lace and Lilies Website.dc.html" */
:root{
--rose-50:#FBF1EF;--rose-100:#F5DEDC;--rose-300:#E3A6A0;--rose-500:#C97D74;--rose-700:#9C4A44;--rose-900:#5C2622;
--berry-500:#7D3346;--berry-700:#5A1F30;
--gold-300:#DCC490;--gold-400:#C9A66B;--gold-600:#A8823F;
--ivory-0:#FDF9F5;--cream-100:#F6EFE8;--sand-200:#EAE0D5;
--ink-900:#2E2422;--ink-700:#54453F;--ink-500:#8A7A72;--ink-300:#C7B9AF;--ink-100:#E4D9CE;
--white:#FFFFFF;
--surface-page:var(--ivory-0);--surface-card:var(--white);--surface-muted:var(--cream-100);--surface-sunken:var(--sand-200);
--text-primary:var(--ink-900);--text-secondary:var(--ink-700);--text-muted:var(--ink-500);--text-on-brand:var(--white);
--brand-primary:var(--rose-500);--brand-primary-hover:var(--rose-700);--brand-primary-tint:var(--rose-100);
--brand-accent:var(--berry-500);--brand-accent-hover:var(--berry-700);--brand-gold:var(--gold-400);
--border-default:var(--ink-100);--border-strong:var(--ink-300);
--font-display:'Cormorant Garamond',Georgia,serif;--font-body:'Jost',-apple-system,sans-serif;
--font-ui:'Montserrat','Jost',-apple-system,sans-serif;
/* The wordmark has its own face and accent, given by the owner. */
--font-mark:'Lustria','Cormorant Garamond',Georgia,serif;--mark-accent:#E9868B;
--text-heading-1:500 32px/1.2 var(--font-display);--text-heading-2:500 24px/1.3 var(--font-body);
--text-heading-3:500 20px/1.4 var(--font-body);--text-body-lg:400 18px/1.6 var(--font-body);
--text-body:400 16px/1.6 var(--font-body);--text-body-sm:400 14px/1.5 var(--font-body);
--text-caption:400 12px/1.4 var(--font-body);--text-overline:500 12px/1.4 var(--font-body);
--tracking-overline:0.14em;
--container-max:1200px;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;--radius-pill:999px;
--shadow-sm:0 1px 2px rgba(46,36,34,.06),0 1px 1px rgba(46,36,34,.04);
--shadow-md:0 6px 16px rgba(46,36,34,.08),0 2px 4px rgba(46,36,34,.05);
--shadow-lg:0 16px 40px rgba(46,36,34,.14),0 4px 10px rgba(46,36,34,.06);
--ease-standard:cubic-bezier(.4,0,.2,1);--duration-base:200ms;
}

*{box-sizing:border-box}
/* Must outrank any author `display:` rule below, or [hidden] silently stops working. */
[hidden]{display:none!important}
body{margin:0;background:var(--surface-page);font-family:var(--font-body);color:var(--text-primary)}
a{color:var(--brand-primary);text-decoration:none}
a:hover{color:var(--brand-primary-hover)}
img{max-width:100%;display:block}

.wrap{max-width:var(--container-max);margin:0 auto;padding:0 clamp(16px,4vw,48px)}

/* ---------- header: floating pill card over the hero ---------- */
.head-shell{position:fixed;top:0;left:0;right:0;z-index:50;
  padding:clamp(10px,1.6vw,18px) clamp(12px,4vw,48px)}
.head-card{max-width:1280px;margin:0 auto;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--radius-pill);
  box-shadow:0 10px 30px rgba(92,38,34,.10),0 2px 6px rgba(92,38,34,.05);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2vw,32px);
  padding:10px 10px 10px clamp(18px,2.4vw,30px)}

.wordmark{flex:none;display:flex;align-items:baseline;gap:7px}
.wordmark:hover{color:inherit}
.wordmark .w1{font-family:var(--font-mark);font-weight:400;font-size:26px;
  letter-spacing:.005em;color:var(--text-primary)}
.wordmark .amp{font-family:var(--font-mark);font-style:italic;font-weight:400;
  font-size:22px;color:var(--mark-accent)}

.nav{flex:1;display:flex;justify-content:center;align-items:center;gap:4px}
/* Pill links, like the reference bar: the active page carries a soft blush
   chip rather than a dot, which reads as a real navigation state. */
.nav-link{position:relative;font-family:var(--font-ui);font-weight:500;font-size:14.5px;
  letter-spacing:.01em;white-space:nowrap;color:var(--text-secondary);
  padding:9px 16px;border-radius:var(--radius-pill);
  transition:background var(--duration-base) var(--ease-standard),
             color var(--duration-base) var(--ease-standard)}
.nav-link:hover{background:rgba(251,241,239,.9);color:var(--brand-primary)}
.nav-link.on{background:var(--rose-50);color:var(--brand-primary-hover);font-weight:600}
.nav-link:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}

/* Solid berry pill, sized to sit inside the card's 10px inset. */
.nav-cta{flex:none;background:var(--berry-700);color:var(--white);
  padding:13px 26px;border-radius:var(--radius-pill);
  font-family:var(--font-ui);font-weight:600;font-size:14px;letter-spacing:.015em;
  white-space:nowrap;box-shadow:0 4px 14px rgba(90,31,48,.28);
  transition:background var(--duration-base) var(--ease-standard),
             transform var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard)}
.nav-cta:hover{background:var(--berry-500);color:var(--white);
  transform:translateY(-1px);box-shadow:0 6px 18px rgba(90,31,48,.34)}
.nav-cta:focus-visible{outline:2px solid var(--berry-500);outline-offset:3px}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;
  cursor:pointer;padding:6px;flex:none}
.nav-toggle span{display:block;width:22px;height:2px;border-radius:1px;background:var(--text-primary)}

.nav-panel{display:none;max-width:1280px;margin:8px auto 0;background:var(--white);
  border-radius:24px;box-shadow:0 8px 28px rgba(46,36,34,.07);
  padding:8px clamp(18px,2.5vw,32px) 20px;flex-direction:column}
.nav-panel.open{display:flex}
.panel-link{padding:14px 0;border-bottom:1px solid var(--border-default);
  font-family:var(--font-ui);font-weight:500;font-size:16px;color:var(--text-secondary)}
.panel-link.on{color:var(--brand-primary);font-weight:600}
.panel-cta{margin-top:16px;text-align:center;background:var(--berry-700);color:var(--white);
  padding:14px;border-radius:var(--radius-pill);
  font-family:var(--font-ui);font-weight:600;font-size:14px}
.panel-cta:hover{background:var(--berry-500);color:var(--white)}

@media(max-width:768px){
  .nav,.nav-cta{display:none}
  .nav-toggle{display:flex}
}

/* Pages without a hero still have to clear the fixed header. */
.page-head{text-align:center;padding:clamp(116px,14vw,158px) 0 8px}

/* ---------- hero ---------- */
/* The plate's own cream + blush wave only covers the right ~82% of the band.
   These layers continue that palette across the LEFT edge so the hero reads as
   one designed surface instead of artwork that stops behind the copy:
     1. a blush wave echoing the plate's own curve, bottom-left
     2. the flat cream ground underneath everything
   Colours are sampled from the plate itself (#FBF1E8 / #F5D8CC / #F9E3D6). */
.hero{position:relative;overflow:hidden;
  background:
    radial-gradient(120% 88% at -12% 108%,
      rgba(245,216,204,.92) 0%, rgba(249,227,214,.55) 42%, rgba(251,241,232,0) 72%),
    radial-gradient(90% 70% at 4% -14%,
      rgba(251,241,232,.98) 0%, rgba(250,236,226,.5) 55%, rgba(251,241,232,0) 100%),
    linear-gradient(135deg,#FCF4F0 0%,#FBF1EF 45%,#F7E9E4 100%)}
.hero-inner{width:100%;max-width:1320px;margin:0 auto;display:flex;align-items:flex-end;
  gap:clamp(24px,4vw,56px);padding:clamp(120px,13vw,170px) clamp(20px,4vw,48px) 0}

.hero-copy{flex:1 1 auto;min-width:0;padding-bottom:clamp(48px,7vw,96px)}
.hero-copy .eyebrow{font-family:var(--font-body);font-weight:500;font-size:13px;
  letter-spacing:var(--tracking-overline);text-transform:uppercase;
  color:var(--rose-700);margin:16px 0 24px}
.hero-copy h1{font-family:var(--font-display);font-weight:500;
  font-size:clamp(46px,6.4vw,86px);line-height:1.04;color:var(--text-primary);
  text-wrap:pretty;margin:0 0 28px}
.hero-copy h1 em{font-style:italic;color:var(--brand-primary)}
.hero-rule{width:56px;height:3px;border-radius:2px;background:var(--brand-gold);margin-bottom:28px}
.hero-copy .lede{font-family:var(--font-body);font-weight:400;font-size:18px;line-height:1.6;
  color:var(--text-secondary);max-width:400px;margin:0 0 36px}

.hero-ctas{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:44px}
.pill-primary{display:inline-flex;align-items:center;gap:14px;background:var(--brand-primary);
  color:var(--white);padding:8px 8px 8px 28px;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-weight:500;font-size:16px;white-space:nowrap}
.pill-primary:hover{background:var(--brand-primary-hover);color:var(--white)}
.pill-primary .chev{flex:none;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.24);display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1}
.pill-secondary{display:inline-flex;align-items:center;gap:10px;background:transparent;
  color:var(--brand-primary);border:1px solid var(--rose-300);padding:15px 30px;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);font-weight:500;font-size:16px;white-space:nowrap}
.pill-secondary:hover{border-color:var(--brand-primary);color:var(--brand-primary-hover)}

.trust{display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap}
.trust .lines{display:flex;flex-direction:column;gap:6px}
.trust .rating{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.trust .rating .stars{color:var(--brand-gold);font-size:17px;letter-spacing:2px;line-height:1}
.trust .rating b{font-family:var(--font-body);font-weight:500;font-size:17px;color:var(--text-primary)}
.trust .rating small,.trust .note{font-family:var(--font-body);font-size:14px;color:var(--text-muted)}

.scroll-hint{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.scroll-hint .label{font-family:var(--font-body);font-size:14px;line-height:1.35;
  color:var(--brand-primary);text-align:center}
.scroll-hint .ring{width:34px;height:34px;border-radius:50%;border:1px solid var(--rose-300);
  display:flex;align-items:center;justify-content:center;color:var(--brand-primary)}

/* The plate is used whole: `contain` guarantees the browser never crops it,
   and anchoring it bottom-right sits the models on the right while the copy
   runs over the flat cream the artwork already leaves on the left. */
.hero{background-image:linear-gradient(135deg,#FCF4F0 0%,#FBF1EF 45%,#F7E9E4 100%);
  background-repeat:no-repeat}
/* The models' gowns run to the very bottom edge of this plate, so ANY
   vertical crop cuts them off at the hem. `auto 100%` sizes the plate by
   HEIGHT, which guarantees the whole figure is always visible — the plate
   then takes ~82% of the width and the copy sits over the flat cream it
   carries on its left, which is what that empty area was drawn for. */
.hero::before{content:'';position:absolute;inset:0;
  background-image:url('../assets/hero-arch-v2.png');
  background-size:auto 100%;background-position:right bottom;
  background-repeat:no-repeat;
  transform:translateZ(0);        /* own layer: no re-resample on scroll */
  backface-visibility:hidden}

/* Tall enough for the figures to read at full length, capped so the hero is
   still a comfortable screenful on a laptop. */
/* One source of truth for the band height. The inner box must NOT also carry
   min-height — with its own top padding it then grew the hero past this value,
   and the plate (sized to this height) stopped short of the new bottom edge,
   which is what re-cut the hems. */
/* min-height, never a fixed height: a hard height clipped the headline behind
   the fixed header once the copy needed more room than the band. */
.hero{min-height:clamp(660px,50vw,880px)}
.hero-inner{position:relative;z-index:1;min-height:inherit;
  align-items:center;padding-top:clamp(112px,10vw,140px);padding-bottom:28px}
.hero-copy{flex:0 1 44%;max-width:540px;padding-bottom:0}
.hero-plate{display:none}

/* Cream veil under the copy only. The plate's own cream runs to ~47% of its
   width, so the veil fades out before the arch and never dims the photo. */
.hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(251,241,232,.88) 0%, rgba(251,241,232,.70) 26%,
    rgba(251,241,232,.28) 38%, rgba(251,241,232,0) 48%)}

/* Below ~1500px the height-fitted plate reaches far enough left to sit under
   the CTA row, so carry the veil further across. */
@media(min-width:1081px) and (max-width:1500px){
  .hero-copy{flex:0 1 50%}
  .hero::after{background:linear-gradient(90deg,
    rgba(251,241,232,.96) 0%, rgba(251,241,232,.90) 28%,
    rgba(251,241,232,.58) 42%, rgba(251,241,232,0) 58%)}
}

@media(max-width:1080px){
  /* Too short to overlay at this width — stack, and show the plate in full. */
  .hero::before{display:none}
  .hero-inner{flex-direction:column;align-items:stretch;padding-bottom:0;min-height:0}
  .hero-copy{flex:none;max-width:none;padding-bottom:clamp(36px,6vw,56px)}
  .scroll-hint{display:none}
  .hero-plate{display:block;width:100%;height:auto;margin:0 auto}
}

/* ---------- section furniture ---------- */
.section{padding:80px 0}
.section.tight{padding:64px 0}
.section-head{text-align:center;margin-bottom:40px}
.section-head h2{font-family:var(--font-display);font-weight:600;
  font-size:clamp(28px,5vw,40px);margin:0 0 12px;color:var(--text-primary)}
.section-head h2.big{font-size:clamp(30px,5.5vw,48px)}
.section-head p{font-family:var(--font-ui);font-weight:400;font-size:15px;line-height:1.65;
  color:var(--text-secondary);margin:0;max-width:620px;margin-inline:auto}
.section-head .eyebrow{font-family:var(--font-ui);font-weight:600;font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:12px}
.eyebrow.rose{color:var(--brand-primary)}
.eyebrow.berry{color:var(--brand-accent)}
.center{text-align:center}
.btn-link{display:inline-block;font:500 var(--text-body);padding:13px 30px;
  border-radius:var(--radius-pill);border:1px solid var(--border-strong);color:var(--text-primary)}
.btn-link:hover{border-color:var(--brand-primary);color:var(--brand-primary)}
.btn-link.solid{background:var(--brand-primary);color:var(--white);border-color:var(--brand-primary)}
.btn-link.solid:hover{background:var(--brand-primary-hover);color:var(--white)}

/* ---------- reusable full-bleed blush band ---------- */
/* Hide the horizontal scrollbar on scroll strips (spec: applied globally). */
div::-webkit-scrollbar{height:0;width:0}

.band{position:relative;overflow:hidden;margin-top:24px;
  background:linear-gradient(180deg,#F9E3E1 0%,#F7DEDC 45%,#F9E5E3 100%);
  padding:clamp(76px,9vw,110px) clamp(16px,4vw,48px) clamp(68px,8vw,96px)}
/* The curves arc INWARD: cream ellipses bulge into the band, so this is two
   overlays rather than border-radius on the band itself. The -5%/110% overhang
   keeps the ellipse ends off-screen so only the arc reads. */
.band::before,.band::after{content:'';position:absolute;left:-5%;width:110%;
  height:clamp(40px,5vw,72px);background:var(--surface-page)}
.band::before{top:-1px;border-radius:0 0 50% 50% / 0 0 100% 100%}
.band::after{bottom:-1px;border-radius:50% 50% 0 0 / 100% 100% 0 0}
.band-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto}

.fav-head{text-align:center;margin-bottom:20px}
.fav-head .overline{font-family:var(--font-ui);font-weight:600;font-size:11.5px;
  letter-spacing:var(--tracking-overline);text-transform:uppercase;
  color:var(--berry-500);margin-bottom:14px}
.fav-head h2{font-family:var(--font-display);font-weight:500;
  font-size:clamp(32px,5.5vw,54px);color:var(--text-primary);margin:0 0 16px}
.fav-head p{font-family:var(--font-ui);font-weight:400;font-size:15px;line-height:1.65;
  color:var(--text-secondary);max-width:520px;margin:0 auto}

.fav-hint{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-bottom:18px}
.fav-hint span{font-family:var(--font-body);font-weight:500;font-size:11px;
  letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--rose-700)}
.fav-hint i{font-style:normal;font-size:16px;color:var(--rose-700);line-height:1}

.fav-rail{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;
  touch-action:pan-x;-webkit-overflow-scrolling:touch;cursor:grab;padding:4px 0 12px}
.fav-rail::-webkit-scrollbar{height:0;width:0}
.fav-rail.dragging{cursor:grabbing}
/* Swallows the click that fires when a drag ends over a card, so panning the
   strip never opens a dress you only meant to scroll past. */
.fav-rail.dragging .fav-card{pointer-events:none}

.fav-card{flex:none;width:236px;cursor:pointer;color:inherit;
  background:var(--surface-card);
  border-radius:14px 14px var(--radius-lg) var(--radius-lg);
  box-shadow:0 10px 30px rgba(92,38,34,.10);overflow:hidden;
  transition:transform var(--duration-base) var(--ease-standard)}
.fav-card:hover{color:inherit;transform:translateY(-3px)}
.fav-card:focus-visible{outline:2px solid var(--brand-primary);outline-offset:3px}
/* 3/4.1 rather than 3/4 — the taller crop is what reads as editorial. */
.fav-card .media{aspect-ratio:3/4.1;position:relative;background:var(--rose-50)}
.fav-card .media img{width:100%;height:100%;object-fit:cover}
.fav-card .media .empty{width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:14px;
  font:var(--text-body-sm);color:var(--text-muted)}
.fav-card .flag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);
  color:var(--brand-accent);font:var(--text-caption);padding:4px 10px;
  border-radius:var(--radius-pill)}
.fav-card .body{padding:16px 20px 20px}
.fav-card .cat{font-family:var(--font-body);font-weight:500;font-size:11px;
  letter-spacing:var(--tracking-overline);text-transform:uppercase;
  color:var(--brand-gold);margin-bottom:6px}
.fav-card .name{font-family:var(--font-display);font-weight:500;font-size:23px;
  color:var(--text-primary);margin-bottom:10px}
.fav-card .go{display:flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--rose-700)}

.fav-more{text-align:center;margin-top:44px}
.pill-outline{display:inline-block;font-family:var(--font-body);font-weight:500;font-size:16px;
  color:var(--berry-700);border:1px solid var(--rose-300);background:rgba(255,255,255,.55);
  padding:15px 34px;border-radius:var(--radius-pill)}
.pill-outline:hover{background:var(--white);color:var(--berry-500)}

/* ---------- how it works ---------- */
/* Grid, not flex-wrap: three equal columns keep the numbered markers on one
   line and the copy blocks the same width. */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);
  max-width:1000px;margin:0 auto}
.step{text-align:center}
.step .n{width:54px;height:54px;border-radius:50%;
  background:linear-gradient(145deg,var(--rose-100),var(--rose-50));
  border:1px solid rgba(227,166,160,.45);
  color:var(--brand-primary-hover);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-ui);font-weight:700;font-size:19px;letter-spacing:0;
  box-shadow:0 4px 12px rgba(201,125,116,.16);margin:0 auto 18px}
.step h3{font-family:var(--font-ui);font-weight:700;font-size:17px;letter-spacing:-.005em;
  color:var(--text-primary);margin:0 0 10px}
.step p{font-family:var(--font-ui);font-weight:400;font-size:14px;line-height:1.65;
  color:var(--text-secondary);margin:0;max-width:300px;margin-inline:auto}
@media(max-width:760px){
  .steps{grid-template-columns:1fr;gap:34px}
}

/* ---------- about / social / cta ---------- */
.split{display:flex;gap:48px;align-items:center;flex-wrap:wrap;margin-bottom:48px}
.split.flip{flex-wrap:wrap-reverse}
.split .col{flex:1;min-width:280px}
.split .col p{margin:0 0 20px}
.split .col p:last-child{margin-bottom:0}
.split .shot{flex:1;min-width:280px;aspect-ratio:4/5;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-md);background:var(--surface-sunken)}
.split .shot img{width:100%;height:100%;object-fit:cover}

.social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.social-card{display:flex;align-items:center;gap:16px;background:var(--surface-card);
  border:1px solid var(--border-default);border-radius:var(--radius-lg);
  padding:20px 22px;color:var(--text-primary);
  transition:box-shadow var(--duration-base) var(--ease-standard),
  transform var(--duration-base) var(--ease-standard),
  border-color var(--duration-base) var(--ease-standard)}
.social-card:hover{color:var(--text-primary);box-shadow:var(--shadow-md);
  transform:translateY(-2px);border-color:var(--border-strong)}
/* The logos are square brand marks. Rounding the image itself also clips the
   black corners the Instagram mark picked up when it was saved as a JPEG. */
.social-card .logo{flex:none;width:46px;height:46px;border-radius:12px;
  object-fit:cover;background:var(--white)}
.social-card .meta{min-width:0}
.social-card .p{font-family:var(--font-body);font-weight:500;font-size:11px;
  letter-spacing:var(--tracking-overline);text-transform:uppercase;
  color:var(--text-muted);margin-bottom:3px}
.social-card .h{font:500 17px var(--font-body);color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.social-card .x{font:var(--text-body-sm);color:var(--text-muted);margin-top:2px}

.cta-band{padding:96px clamp(16px,4vw,48px);background:var(--surface-muted);text-align:center}
.cta-band h2{font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:clamp(28px,5vw,40px);margin:0 0 28px;color:var(--text-primary)}

/* ---------- contact ---------- */
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;margin-bottom:40px}
.info-card{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
  border-radius:var(--radius-lg);padding:26px 24px;
  box-shadow:0 8px 24px rgba(92,38,34,.06)}
.info-card .k{font-family:var(--font-body);font-weight:500;font-size:11px;
  letter-spacing:var(--tracking-overline);text-transform:uppercase;
  color:var(--brand-gold);margin-bottom:10px}
.info-card p{font:var(--text-body);color:var(--text-secondary);margin:0}
.info-card a{color:var(--rose-700)}
.info-card a:hover{color:var(--berry-500)}
.contact-cta{text-align:center}
.btn-berry{display:inline-block;background:var(--berry-700);color:var(--white);
  font-family:var(--font-body);font-weight:500;font-size:16px;
  padding:15px 34px;border-radius:var(--radius-pill)}
.btn-berry:hover{background:var(--berry-500);color:var(--white)}

/* ---------- closing call to action ---------- */
.cta-band{padding:clamp(76px,9vw,104px) clamp(16px,4vw,48px);text-align:center;
  background:var(--surface-page)}
.cta-band .orn{width:56px;height:3px;border-radius:2px;background:var(--brand-gold);
  margin:0 auto 26px}
.cta-band h2{font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(32px,5.5vw,52px);margin:0 0 14px;color:var(--text-primary)}
.cta-band p{font:var(--text-body);color:var(--text-secondary);margin:0 0 32px}

/* ---------- footer ---------- */
.site-foot{background:var(--ink-900);color:var(--ivory-0);
  padding:clamp(56px,7vw,80px) clamp(16px,4vw,48px) 28px}
.foot-grid{max-width:var(--container-max);margin:0 auto clamp(36px,5vw,52px);display:grid;
  grid-template-columns:1.4fr 1fr 1.2fr 1fr;gap:clamp(28px,4vw,48px)}
@media(max-width:900px){.foot-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.foot-grid .lede{max-width:300px}
.foot-wordmark{display:flex;align-items:baseline;gap:7px;margin-bottom:14px}
.foot-wordmark span{font-family:var(--font-mark);font-weight:400;font-size:23px;color:var(--ivory-0)}
.foot-wordmark i{font-family:var(--font-mark);font-style:italic;font-weight:400;
  font-size:19px;color:var(--gold-300)}
.foot-grid p{font:var(--text-body-sm);color:var(--ink-300);margin:0 0 6px}
.foot-h{font-family:var(--font-body);font-weight:500;font-size:11px;
  letter-spacing:var(--tracking-overline);text-transform:uppercase;
  color:var(--ink-500);margin-bottom:16px}
.foot-nav{display:flex;flex-direction:column;gap:11px}
.foot-link{font:var(--text-body-sm);color:var(--ink-300);width:fit-content}
.foot-link:hover{color:var(--gold-300)}
.foot-social{display:flex;gap:10px}
.foot-social a{width:36px;height:36px;border-radius:10px;overflow:hidden;
  display:block;opacity:.92;transition:opacity var(--duration-base) var(--ease-standard),
  transform var(--duration-base) var(--ease-standard)}
.foot-social a:hover{opacity:1;transform:translateY(-2px)}
.foot-social img{width:100%;height:100%;object-fit:cover}
.foot-bottom{max-width:var(--container-max);margin:0 auto;
  border-top:1px solid var(--ink-700);padding-top:22px;
  font:var(--text-caption);color:var(--ink-500);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.admin-link{font:var(--text-caption);color:var(--ink-300);border:1px solid var(--ink-700);
  padding:7px 16px;border-radius:var(--radius-pill);
  transition:all var(--duration-base) var(--ease-standard)}
.admin-link:hover{color:var(--gold-300);border-color:var(--gold-600)}

/* ---------- page head ---------- */
.page-head h1{font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:clamp(30px,5.5vw,48px);margin:0 0 12px}
.page-head p{font:var(--text-body);color:var(--text-secondary);margin:0}

/* ---------- category pills ---------- */
.pills{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:36px 0 48px}
.pill{font:var(--text-body-sm);padding:9px 20px;border-radius:var(--radius-pill);cursor:pointer;
  background:var(--white);color:var(--text-secondary);border:1px solid var(--border-default);
  transition:background var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard)}
.pill:hover{border-color:var(--border-strong)}
.pill.active{background:var(--brand-accent);color:var(--white);border-color:var(--brand-accent)}

/* ---------- dress grid ---------- */
/* auto-FILL, not auto-fit: auto-fit collapses the empty tracks and lets a
   two-item row stretch each card to half the container. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px;
  padding-bottom:96px;align-items:start}
.card{background:var(--surface-card);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:box-shadow var(--duration-base) var(--ease-standard),
  transform var(--duration-base) var(--ease-standard)}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.card{cursor:pointer}
.card:focus-visible{outline:2px solid var(--brand-primary);outline-offset:3px}
.card .shots{position:absolute;bottom:12px;right:12px;background:rgba(46,36,34,.62);
  color:var(--white);font:var(--text-caption);padding:3px 10px;border-radius:var(--radius-pill)}
.card-media{aspect-ratio:3/4;position:relative;background:var(--surface-sunken)}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-media .empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font:var(--text-body-sm);color:var(--text-muted);text-align:center;padding:16px}
.badge{position:absolute;top:14px;left:14px;background:var(--surface-card);color:var(--brand-accent);
  font:var(--text-caption);padding:5px 12px;border-radius:var(--radius-pill);box-shadow:var(--shadow-sm)}
.card-body{padding:20px}
.card-cat{font:var(--text-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;
  color:var(--brand-gold);margin-bottom:6px}
.card-name{font:var(--text-heading-3);color:var(--text-primary)}
.card-price{font:var(--text-body-sm);color:var(--text-secondary);margin-top:6px}
.thumbs{display:flex;gap:6px;padding:0 20px 18px}
.thumbs img{width:38px;height:48px;object-fit:cover;border-radius:var(--radius-sm);
  border:1px solid var(--border-default);cursor:pointer}
.thumbs img.on{border-color:var(--brand-accent)}

/* ---------- category cards (home) ---------- */
/* Exactly two equal columns, centred and capped, so the pair reads as a
   feature rather than a row that ran out of cards. `1fr 1fr` (not auto-fill)
   is what guarantees the two are identical in width. */
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px);
  max-width:940px;margin:0 auto;padding-bottom:88px;align-items:stretch}
.cat-grid .state{grid-column:1/-1}
@media(max-width:640px){
  .cat-grid{grid-template-columns:1fr;max-width:420px}
}
.cat-card{background:var(--surface-card);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;color:inherit;
  border:1px solid rgba(228,217,206,.7);
  transition:transform var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard)}
.cat-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);color:inherit}
.cat-card:focus-visible{outline:2px solid var(--brand-primary);outline-offset:3px}
.cat-card .media{position:relative;aspect-ratio:4/5;background:var(--rose-50);overflow:hidden}
.cat-card .media img{width:100%;height:100%;object-fit:cover;
  transition:transform 500ms var(--ease-standard)}
.cat-card:hover .media img{transform:scale(1.04)}
.cat-card .media img.ph{object-fit:contain;background:var(--rose-50)}
.cat-card:hover .media img.ph{transform:none}
.cat-card .media .empty{width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:16px;
  font:var(--text-body-sm);color:var(--text-muted)}
.cat-card .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 24px 22px}
.cat-card .bar b{font-family:var(--font-ui);font-weight:700;font-size:19px;
  letter-spacing:-.01em;color:var(--text-primary);display:block}
.cat-card .bar i{color:var(--brand-primary);font-size:19px;line-height:1;font-style:normal;
  transition:transform var(--duration-base) var(--ease-standard)}
.cat-card:hover .bar i{transform:translateX(5px)}
.cat-card .bar .n{font-family:var(--font-ui);font-weight:500;font-size:12.5px;
  color:var(--text-muted);display:block;margin-top:5px;letter-spacing:.01em}

.overline{font:var(--text-overline);letter-spacing:var(--tracking-overline);
  text-transform:uppercase;color:var(--brand-primary);margin-bottom:12px}
.back-link{display:inline-block;font:var(--text-body-sm);color:var(--text-secondary);margin-bottom:8px}
.back-link:hover{color:var(--brand-primary)}

/* ---------- dress modal ---------- */
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(46,36,34,.55);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,32px);overflow-y:auto}
.modal-card{position:relative;background:var(--surface-card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);width:100%;max-width:880px;max-height:90vh;overflow:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
@media(max-width:768px){.modal-card{grid-template-columns:1fr}}

.m-close{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;
  border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.92);
  color:var(--text-primary);font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.m-close:hover{background:var(--white);color:var(--rose-700)}

.m-gallery{background:var(--surface-muted);padding:16px}
.m-main{aspect-ratio:3/4;border-radius:var(--radius-md);overflow:hidden;
  position:relative;background:var(--surface-sunken)}
.m-main img{width:100%;height:100%;object-fit:cover}
.m-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font:var(--text-body-sm);color:var(--text-muted)}
.m-thumbs{display:flex;gap:8px;margin-top:10px}
.m-thumb{flex:1;aspect-ratio:3/4;padding:0;border:2px solid transparent;cursor:pointer;
  border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-sunken);
  max-width:78px}
.m-thumb img{width:100%;height:100%;object-fit:cover}
.m-thumb.on{border-color:var(--brand-primary)}

.m-info{padding:clamp(24px,3vw,34px)}
.m-cat{font-family:var(--font-body);font-weight:500;font-size:11px;
  letter-spacing:var(--tracking-overline);text-transform:uppercase;
  color:var(--brand-gold);margin-bottom:8px}
.m-name{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3.4vw,34px);
  color:var(--text-primary);margin:0 0 12px}
.m-badge{display:inline-block;background:var(--brand-primary-tint);color:var(--berry-500);
  font:var(--text-caption);padding:4px 12px;border-radius:var(--radius-pill);
  margin-bottom:14px}
.m-price{font:500 17px var(--font-body);color:var(--text-primary);margin-bottom:16px}
.m-desc{font:var(--text-body);color:var(--text-secondary);margin:0 0 20px}
.m-desc.muted{color:var(--text-muted);font-style:italic}
.m-count{font:var(--text-caption);color:var(--text-muted);margin-bottom:22px}
.m-cta{display:inline-block}

/* ---------- states ---------- */
.state{grid-column:1/-1;text-align:center;padding:72px 20px;color:var(--text-muted);font:var(--text-body)}
.state.error{color:var(--rose-700)}
.state code{font:var(--text-body-sm);background:var(--surface-muted);padding:2px 6px;border-radius:4px}

/* ---------- footer ---------- */
.site-foot{background:var(--ink-900);color:var(--ivory-0);padding:56px clamp(16px,4vw,48px) 32px}
.foot-grid{max-width:var(--container-max);margin:0 auto 32px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px}
.foot-grid .lede{max-width:280px}
.foot-grid .brand{color:var(--ivory-0);display:block;margin-bottom:12px}
.foot-grid p{font:var(--text-body-sm);color:var(--ink-300);margin:0 0 6px}
.foot-bottom{max-width:var(--container-max);margin:0 auto;border-top:1px solid var(--ink-700);
  padding-top:20px;font:var(--text-caption);color:var(--ink-500);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.admin-link{font:var(--text-caption);color:var(--ink-300);border:1px solid var(--ink-700);
  padding:7px 16px;border-radius:var(--radius-pill);transition:all var(--duration-base) var(--ease-standard)}
.admin-link:hover{color:var(--gold-300);border-color:var(--gold-600)}

/* ================= ADMIN ================= */
.admin-body{background:var(--surface-muted)}
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:44px 40px;width:100%;max-width:400px;text-align:center}
.login-card .brand{display:block;margin-bottom:6px}
.login-card p{font:var(--text-body-sm);color:var(--text-muted);margin:0 0 28px}

.field{display:block;text-align:left;margin-bottom:16px}
.field span{display:block;font:var(--text-overline);letter-spacing:var(--tracking-overline);
  text-transform:uppercase;color:var(--text-muted);margin-bottom:7px}
input,select,textarea{width:100%;font:var(--text-body);font-family:var(--font-body);
  padding:11px 14px;border:1px solid var(--border-default);border-radius:var(--radius-sm);
  background:var(--white);color:var(--text-primary)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-primary-tint);
  border-color:var(--brand-primary)}
textarea{resize:vertical;min-height:74px}

.btn{font:500 var(--text-body);font-family:var(--font-body);border:none;cursor:pointer;
  padding:12px 26px;border-radius:var(--radius-pill);background:var(--brand-primary);color:var(--white);
  transition:background var(--duration-base) var(--ease-standard)}
.btn:hover{background:var(--brand-primary-hover)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.wide{width:100%}
.btn.ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border-strong)}
.btn.ghost:hover{background:var(--surface-muted);color:var(--text-primary)}
.btn.danger{background:transparent;color:var(--rose-700);border:1px solid var(--rose-300);
  padding:7px 15px;font:var(--text-body-sm);font-family:var(--font-body)}
.btn.danger:hover{background:var(--rose-50)}
.btn.sm{padding:8px 18px;font:var(--text-body-sm);font-family:var(--font-body)}

.msg{font:var(--text-body-sm);padding:11px 14px;border-radius:var(--radius-sm);margin-bottom:16px;display:none}
.msg.show{display:block}
.msg.err{background:var(--rose-50);color:var(--rose-700)}
.msg.ok{background:#EDF5EE;color:#2F6B3A}

.admin-head{background:var(--ink-900);color:var(--ivory-0);padding:0 clamp(16px,4vw,32px)}
.admin-head .inner{max-width:1100px;margin:0 auto;height:68px;display:flex;
  align-items:center;justify-content:space-between;gap:16px}
.admin-head .brand{color:var(--ivory-0)}
.admin-head .tag{font:var(--text-caption);letter-spacing:var(--tracking-overline);
  text-transform:uppercase;color:var(--gold-300);margin-left:10px}
.admin-head a{color:var(--ink-300);font:var(--text-body-sm);margin-right:18px}
.admin-head a:hover{color:var(--gold-300)}

.admin-main{max-width:1160px;margin:0 auto;padding:32px clamp(16px,4vw,32px) 96px;
  display:grid;grid-template-columns:390px 1fr;gap:28px;align-items:start}
@media(max-width:920px){.admin-main{grid-template-columns:1fr}}

.icon-btn{width:30px;height:30px;flex:none;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--border-default);background:var(--white);color:var(--text-muted);
  font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:all var(--duration-base) var(--ease-standard)}
.icon-btn:hover{border-color:var(--border-strong);color:var(--text-primary)}
.icon-btn:disabled{opacity:.3;cursor:not-allowed}
.icon-btn.star.on{background:var(--gold-300);border-color:var(--gold-400);color:var(--ink-900)}
.icon-btn.del:hover{border-color:var(--rose-300);color:var(--rose-700);background:var(--rose-50)}
.row-tools{display:flex;gap:6px;flex:none}
.star-note{font:var(--text-caption);color:var(--gold-600)}

.panel{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px}
.panel h2{font:var(--text-heading-2);margin:0 0 4px}
.panel .hint{font:var(--text-body-sm);color:var(--text-muted);margin:0 0 20px}

.row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border-default)}
.row:last-child{border-bottom:none}
.row .grow{flex:1;min-width:0}
.row .t{font:500 var(--text-body);color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .s{font:var(--text-body-sm);color:var(--text-muted)}
.row-thumb{width:44px;height:56px;object-fit:cover;border-radius:var(--radius-sm);
  background:var(--surface-sunken);flex:none}

/* category rows double as the type picker for the dress form */
.row.pick{cursor:pointer;padding-left:10px;padding-right:10px;margin:0 -10px;
  border-radius:var(--radius-sm)}
.row.pick:hover{background:var(--surface-muted)}
.row.pick.sel{background:var(--brand-primary-tint)}
.cat-thumb{width:44px;height:56px;flex:none;border-radius:var(--radius-sm);cursor:pointer;
  background:var(--surface-sunken);position:relative;overflow:hidden;
  border:1.5px dashed var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  font:var(--text-caption);color:var(--text-muted);text-align:center;line-height:1.2}
.cat-thumb:hover{border-color:var(--brand-primary);color:var(--brand-primary)}
.cat-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-thumb.has{border-style:solid;border-color:var(--border-default)}
.panel-sub{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px}
.panel-sub .hint{margin:0}
.chip{font:var(--text-caption);background:var(--brand-primary-tint);color:var(--rose-700);
  padding:5px 12px;border-radius:var(--radius-pill);white-space:nowrap}

.inline{display:flex;gap:10px;align-items:flex-end}
.inline .field{flex:1;margin-bottom:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.divider{height:1px;background:var(--border-default);margin:24px 0}

/* auto-fill, not a fixed 3: the tile count now grows with the uploads. */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:10px;margin-top:7px}
.slot{aspect-ratio:3/4;border:1.5px dashed var(--border-strong);border-radius:var(--radius-sm);
  background:var(--surface-muted);display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;overflow:hidden;font:var(--text-caption);color:var(--text-muted)}
.slot:hover{border-color:var(--brand-primary);color:var(--brand-primary)}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot.busy,.cat-thumb.busy{border-style:solid;border-color:var(--brand-primary);
  background:var(--brand-primary-tint);color:var(--rose-700);cursor:progress}
.slot .x{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;
  background:rgba(46,36,34,.72);color:#fff;border:none;cursor:pointer;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0}
.empty-note{font:var(--text-body-sm);color:var(--text-muted);padding:20px 0;text-align:center}

/* =====================================================================
   MOBILE REFINEMENTS
   Everything below is inside a media query — desktop is untouched.
   ===================================================================== */
@media (max-width:768px){

  /* --- breathing room: 16px read as "stuck to the edge" --- */
  .wrap{padding:0 20px}
  .section{padding:56px 0}
  .section.tight{padding:44px 0}
  .section-head{margin-bottom:28px}
  .section-head h2,.section-head h2.big{font-size:clamp(26px,7.5vw,34px)}
  .section-head p{font-size:15px}
  .band{margin-top:16px;padding:60px 20px 56px}
  .band::before,.band::after{height:32px}
  .cta-band{padding:60px 20px}
  .cta-band h2{font-size:clamp(28px,8vw,36px)}

  /* --- header: floating pill + circular burgundy hamburger --- */
  .head-shell{padding:14px 16px}
  .head-card{background:rgba(255,255,255,.96);border-radius:22px;
    padding:14px 16px 14px 22px;gap:12px}
  .wordmark{gap:8px}
  .wordmark .w1{font-size:26px}
  .wordmark .amp{font-size:21px}

  /* A filled circle, not a bare glyph — 52px clears the 44px touch minimum. */
  .nav-toggle{width:52px;height:52px;border-radius:50%;background:var(--berry-700);
    align-items:center;justify-content:center;gap:5px;padding:0}
  .nav-toggle span{width:20px;height:2px;border-radius:2px;background:var(--white)}

  .nav-panel{margin-top:8px;border-radius:20px;padding:8px 22px 22px}
  /* Divider on the top of every link but the first: that leaves no trailing
     rule above the CTA, and it holds however many links NAV grows to. */
  .panel-link{padding:15px 0;font-size:18px;border-bottom:none}
  .panel-link + .panel-link{border-top:1px solid var(--border-default)}
  .panel-cta{padding:16px;margin-top:16px;font-size:16px}

  /* --- hero: centred copy, full-bleed plate --- */
  .hero{background:linear-gradient(180deg,#FCF4F0 0%,#FBF1EF 55%,#F9E9E5 100%)}
  .hero-inner{padding:104px 22px 0;gap:0}
  .hero-copy{padding-bottom:0;text-align:center;max-width:none}
  .hero-copy .eyebrow{font-size:12px;margin:0 0 18px}
  .hero-copy h1{font-size:clamp(44px,12.5vw,56px);line-height:1.06;margin:0 0 22px}
  .hero-rule{margin:0 auto 22px}
  .hero-copy .lede{font-size:16px;max-width:340px;margin:0 auto 30px}

  .hero-ctas{flex-direction:column;gap:0;margin-bottom:0}
  /* Full-width solid pill here. The desktop inset circle is swapped for a plain
     arrow — at this width the circle crowds the label. */
  .pill-primary{width:100%;justify-content:center;gap:14px;
    padding:20px 24px;font-size:17px;margin-bottom:18px}
  .pill-primary .chev{display:none}
  .pill-primary::after{content:'92';font-size:19px;line-height:1}
  /* Secondary drops to a plain text link. */
  .pill-secondary{width:100%;justify-content:center;border:none;background:none;
    padding:0;font-size:16px;margin-bottom:26px;gap:8px}
  .pill-secondary span{display:none}
  .pill-secondary::after{content:'92';font-size:17px;line-height:1}

  /* Trust collapses to one centred row; the second line and the scroll cue
     are desktop-only. */
  .trust{justify-content:center;gap:16px;margin-bottom:0}
  .trust .note{display:none}
  .trust .lines{gap:0}
  .trust .rating{gap:8px;justify-content:center}
  .trust .rating .stars{font-size:15px;letter-spacing:1px}
  .trust .rating b{font-weight:600;font-size:19px}
  .trust .rating small{font-size:14px}

  /* Bleeds past the 22px copy margin to both viewport edges. */
  .hero-plate{width:calc(100% + 44px);max-width:none;margin:30px 0 0 -22px}

  /* --- favourites carousel --- */
  .fav-head{margin-bottom:14px}
  .fav-head h2{font-size:clamp(27px,7.5vw,36px);margin-bottom:12px}
  .fav-head p{font-size:15px}
  .fav-hint{margin-bottom:14px}
  /* Run the rail edge to edge so a card peeks past the margin — that peek is
     what tells you the strip scrolls. Cards still start at the text margin. */
  .fav-rail{margin:0 -20px;padding:4px 20px 12px;gap:14px}
  .fav-card{width:196px;border-radius:12px 12px 16px 16px}
  .fav-card .body{padding:13px 15px 16px}
  .fav-card .name{font-size:20px;margin-bottom:8px}
  .fav-more{margin-top:32px}
  .pill-outline{padding:13px 26px;font-size:15px}

  /* --- dress + category cards --- */
  .grid{gap:16px;padding-bottom:64px}
  .cat-grid{gap:16px;padding-bottom:64px}
  .card-body{padding:14px 16px 16px}
  .card-name{font-size:17px}
  .badge{top:10px;left:10px}
  .cat-card .bar{padding:14px 16px}
  .cat-card .bar b{font-size:19px}
  .pills{gap:8px;margin:24px 0 28px}
  .pill{padding:8px 16px}

  /* --- stacked content blocks --- */
  .split{gap:24px;margin-bottom:32px}
  .split .shot{width:100%}
  .steps{gap:30px}
  .step{max-width:none}
  .contact-cards{gap:14px;margin-bottom:28px}
  .info-card{padding:20px 18px}
  .social-grid{gap:12px}
  .social-card{padding:16px 18px;gap:14px}

  /* --- page heads (no hero to clear, just the fixed bar) --- */
  .page-head{padding:100px 0 4px}
  .page-head h1{font-size:clamp(28px,8.5vw,40px)}
  .page-head p{font-size:15px}

  /* --- dress modal: a near-full-screen sheet is easier to read and close --- */
  .modal-overlay{padding:0;align-items:stretch}
  .modal-card{max-width:none;max-height:none;min-height:100%;border-radius:0}
  .m-gallery{padding:12px}
  .m-main{aspect-ratio:4/5}
  .m-info{padding:20px 20px 40px}
  .m-close{top:10px;right:10px;width:38px;height:38px}
  .m-cta{display:block;text-align:center}

  /* --- footer --- */
  .site-foot{padding:48px 20px 24px}
  .foot-grid{gap:28px;margin-bottom:30px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:14px;padding-top:18px}

  /* --- admin --- */
  .admin-head{padding:0 16px}
  .admin-head .inner{height:auto;padding:14px 0;flex-wrap:wrap;gap:10px}
  .admin-main{padding:20px 16px 64px;gap:18px}
  .panel{padding:20px 18px}
  .two{grid-template-columns:1fr}          /* paired fields were too narrow */
  .login-card{padding:34px 24px}
}

/* Below ~400px the single trust row measures wider than the viewport, so it
   wraps to two centred lines and the divider — now a stray mark — is dropped.
   Wrapping beats the horizontal scrollbar an overflow would create at 375px. */
@media (max-width:400px){
  .trust{gap:12px}
  .trust .rating{flex-wrap:wrap}
  .fav-card{width:172px}
}

/* ---------- placeholder cover ---------- */
/* Contain, not cover: the branded plate is drawn to fit the frame exactly and
   must never be cropped the way a real photograph is. */
.cat-card .media img.ph{object-fit:contain;background:var(--rose-50)}

/* ---------- "view full photo" affordance on a cropped cover ---------- */
.cat-card .media{position:relative}
.zoom-btn{position:absolute;left:50%;bottom:14px;transform:translate(-50%,6px);
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border:0;border-radius:var(--radius-pill);cursor:pointer;
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  box-shadow:var(--shadow-md);color:var(--text-primary);
  font:500 13px/1 var(--font-body);white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity var(--duration-base) var(--ease-standard),
             transform var(--duration-base) var(--ease-standard)}
.zoom-btn span{font-size:14px;line-height:1}
.cat-card:hover .zoom-btn,
.cat-card:focus-within .zoom-btn{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.zoom-btn:hover{background:var(--white);color:var(--brand-primary)}
.zoom-btn:focus-visible{opacity:1;transform:translate(-50%,0);pointer-events:auto;
  outline:2px solid var(--brand-primary);outline-offset:2px}
/* Coarse pointers have no hover — keep the button permanently visible there. */
@media (hover:none){
  .zoom-btn{opacity:1;transform:translate(-50%,0);pointer-events:auto}
}

/* ---------- full-photo lightbox ---------- */
.lb{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  gap:clamp(4px,2vw,20px);padding:clamp(14px,4vw,48px);
  background:rgba(46,36,34,.88);backdrop-filter:blur(4px)}
.lb-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:100%;max-height:100%;min-width:0}
/* CONTAIN is the whole point of this component — the photo is shown entire. */
.lb-img{max-width:min(1100px,100%);max-height:calc(100vh - 150px);
  width:auto;height:auto;object-fit:contain;
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background:var(--ink-900)}
.lb-cap{font:var(--text-body-sm);color:var(--cream-100);text-align:center;
  letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.lb-x{position:absolute;top:clamp(12px,3vw,26px);right:clamp(12px,3vw,26px);
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);color:var(--white);font-size:19px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--duration-base) var(--ease-standard)}
.lb-x:hover{background:rgba(255,255,255,.28)}
.lb-nav{flex:none;width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);color:var(--white);
  font:400 30px/1 var(--font-body);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--duration-base) var(--ease-standard)}
.lb-nav:hover{background:rgba(255,255,255,.28)}
.lb-x:focus-visible,.lb-nav:focus-visible{outline:2px solid var(--white);outline-offset:2px}
@media (max-width:640px){
  .lb-img{max-height:calc(100vh - 190px)}
  .lb-nav{position:absolute;bottom:20px}
  .lb-prev{left:22px}
  .lb-next{right:22px}
}
@media (prefers-reduced-motion:reduce){
  .zoom-btn{transition:none}
}

.m-main .zoom-btn{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.card-media img.ph,.fav-card .media img.ph{object-fit:contain;background:var(--rose-50)}

/* ---------- category quick-view: a shop grid, not a list of boxes ---------- */
.cq{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;
  padding:clamp(0px,3vw,40px);background:rgba(46,36,34,.62);backdrop-filter:blur(5px)}
.cq-sheet{background:var(--surface-page);width:min(1180px,100%);max-height:100%;
  border-radius:clamp(0px,2vw,var(--radius-xl));overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}

.cq-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:clamp(20px,3vw,30px) clamp(20px,3.5vw,36px) 20px;
  background:var(--white);border-bottom:1px solid var(--border-default)}
.cq-eyebrow{font:var(--text-overline);letter-spacing:var(--tracking-overline);
  text-transform:uppercase;color:var(--brand-primary);margin-bottom:7px}
.cq-head h2{margin:0;font:500 clamp(27px,3.4vw,36px)/1.15 var(--font-display);color:var(--text-primary)}
.cq-count{margin:6px 0 0;font:var(--text-body-sm);color:var(--text-muted)}
.cq-x{flex:none;width:40px;height:40px;border:1px solid var(--border-default);border-radius:50%;
  background:var(--white);cursor:pointer;color:var(--text-secondary);font-size:15px;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--duration-base) var(--ease-standard),
             color var(--duration-base) var(--ease-standard)}
.cq-x:hover{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--white)}

.cq-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:clamp(20px,3vw,30px) clamp(20px,3.5vw,36px) clamp(24px,3.5vw,36px)}

/* auto-fill + 1fr: every tile is exactly the same width on every row */
.cq-grid{display:grid;gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

/* The card is a flex column so bodies align even with 1- or 2-line names. */
.cq-card{display:flex;flex-direction:column;background:var(--surface-card);
  border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden;
  cursor:pointer;text-align:left;
  transition:transform var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard)}
.cq-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);
  border-color:var(--brand-primary-tint)}
.cq-card:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}

.cq-media{position:relative;aspect-ratio:3/4;background:var(--rose-50);overflow:hidden}
.cq-media img{width:100%;height:100%;object-fit:cover;
  transition:transform 400ms var(--ease-standard)}
.cq-card:hover .cq-media img{transform:scale(1.045)}
/* the drawn plate is sized to its frame — scaling or cropping it looks broken */
.cq-media img.ph{object-fit:contain}
.cq-card:hover .cq-media img.ph{transform:none}

.cq-badge{position:absolute;top:10px;left:10px;padding:5px 11px;border-radius:var(--radius-pill);
  background:var(--brand-accent);color:var(--text-on-brand);
  font:500 11px/1 var(--font-body);letter-spacing:.04em}
.cq-shots{position:absolute;bottom:10px;right:10px;padding:4px 9px;border-radius:var(--radius-pill);
  background:rgba(46,36,34,.62);color:var(--white);font:400 11px/1 var(--font-body)}

/* margin-top:auto on the CTA pins it to the bottom: all bodies end level. */
.cq-body{flex:1;display:flex;flex-direction:column;padding:13px 15px 15px}
.cq-name{margin:0;font:500 19px/1.3 var(--font-display);color:var(--text-primary);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.6em}
.cq-price{margin-top:7px;font:500 16px/1.3 var(--font-body);color:var(--brand-accent)}
.cq-price small{font:400 12px/1 var(--font-body);color:var(--text-muted)}
.cq-ask{font:400 13px/1.3 var(--font-body);color:var(--text-muted)}
.cq-cta{margin-top:auto;padding-top:11px;display:flex;align-items:center;gap:6px;
  font:500 13px/1 var(--font-body);color:var(--brand-primary)}
.cq-cta span{transition:transform var(--duration-base) var(--ease-standard)}
.cq-card:hover .cq-cta span{transform:translateX(4px)}

.cq-none{padding:46px 20px 54px;text-align:center;color:var(--text-secondary)}
.cq-none img{margin:0 auto 18px;opacity:.85}
.cq-none p{margin:0 0 6px;font:var(--text-body)}
.cq-none .muted{font:var(--text-body-sm);color:var(--text-muted)}

.cq-foot{flex:none;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  padding:16px clamp(20px,3.5vw,36px);
  background:var(--white);border-top:1px solid var(--border-default)}

@media (max-width:520px){
  .cq-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .cq-name{font-size:17px}
  .cq-foot .pill-outline,.cq-foot .btn-berry{flex:1;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .cq-card,.cq-media img,.cq-cta span{transition:none}
  .cq-card:hover{transform:none}
  .cq-card:hover .cq-media img{transform:none}
}

/* ---------- favorites: level bodies so the rail reads as one shelf ---------- */
/* Without this a 2-line name pushes "View gown" down and the row looks ragged. */
.fav-card{display:flex;flex-direction:column}
.fav-card .body{flex:1;display:flex;flex-direction:column}
.fav-card .name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.6em}
.fav-card .price{font:500 15px/1.3 var(--font-body);color:var(--brand-accent);margin-bottom:10px}
.fav-card .price small{font:400 11px/1 var(--font-body);color:var(--text-muted)}
.fav-card .price .ask{font:400 12px/1.3 var(--font-body);color:var(--text-muted)}
.fav-card .go{margin-top:auto}

/* ---------- typography pass: Montserrat for UI text, serif for display ----------
   The Cormorant display face carries the brand on headlines; every supporting
   string (labels, meta, body copy, buttons) moves to Montserrat so the site
   reads as one system instead of two competing sans faces. */
.step h3,.step p,.cq-name,.cq-price,.cq-cta,.cq-eyebrow,.cq-count,
.fav-card .cat,.fav-card .price,.fav-card .go,
.cat-card .bar b,.cat-card .bar .n,
.social-card .p,.social-card .h,.social-card .x,
.foot-col h4,.foot-link,.foot-note,.foot-blurb,
.pill-primary,.pill-secondary,.pill-outline,.btn-link,.btn-berry,
.trust .rating,.trust .note,.fav-hint,.hero-copy .eyebrow{
  font-family:var(--font-ui)}

.fav-card .name,.cq-name{font-family:var(--font-ui);font-weight:700;letter-spacing:-.01em}
.fav-card .cat,.cq-eyebrow{font-weight:600;letter-spacing:.14em}
.hero-copy .lede{font-family:var(--font-ui);font-weight:400}
.hero-copy .eyebrow{font-weight:600;letter-spacing:.15em}
.pill-primary,.pill-secondary,.pill-outline,.btn-berry{font-weight:600;letter-spacing:.01em}

/* Footer + social cards */
.foot-col h4{font-weight:700;font-size:11.5px;letter-spacing:.16em}
.foot-link,.foot-blurb,.foot-note{font-weight:400}
.social-card .p{font-weight:600;font-size:11.5px;letter-spacing:.14em}
.social-card .h{font-weight:600;font-size:15px}
.social-card .x{font-weight:400;font-size:13px}

/* ---------- featured pair: "Our Favorites" now mirrors "Find Your Style" ---- */
/* Two cards, not a rolling strip. The rail keeps its class so the blush band
   styling still applies, but it lays out as a centred pair. */
.fav-rail{display:grid !important;grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.4vw,32px);max-width:940px;margin:0 auto;
  overflow:visible !important;cursor:default !important}
.fav-rail .state{grid-column:1/-1}
.fav-card{width:auto !important;flex:none !important;cursor:pointer}
.fav-shots{position:absolute;bottom:12px;right:12px;padding:5px 11px;
  border-radius:var(--radius-pill);background:rgba(46,36,34,.62);color:var(--white);
  font-family:var(--font-ui);font-weight:500;font-size:11.5px}
@media(max-width:640px){
  .fav-rail{grid-template-columns:1fr;max-width:420px}
}
/* The auto-scroll hint no longer applies to a static pair. */
.fav-hint{display:none}

/* ---------- "View more" on a category card ---------- */
.shot-count{position:absolute;bottom:12px;right:12px;padding:5px 11px;
  border-radius:var(--radius-pill);background:rgba(46,36,34,.62);color:var(--white);
  font-family:var(--font-ui);font-weight:500;font-size:11.5px}
.view-more{flex:none;display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:var(--radius-pill);
  background:var(--rose-50);border:1px solid rgba(227,166,160,.5);
  font-family:var(--font-ui);font-weight:600;font-size:13px;
  color:var(--brand-primary-hover);white-space:nowrap;
  transition:background var(--duration-base) var(--ease-standard),
             color var(--duration-base) var(--ease-standard)}
.view-more i{font-style:normal;font-size:14px;line-height:1;
  transition:transform var(--duration-base) var(--ease-standard)}
.cat-card:hover .view-more{background:var(--brand-primary);color:var(--white);
  border-color:var(--brand-primary)}
.cat-card:hover .view-more i{transform:translateX(4px)}

/* The quick-view's own "View all photos" is a button, not a link — keep it
   visually identical to the pill-outline anchor beside it. */
button.pill-outline{cursor:pointer;font-family:var(--font-ui);font-weight:600;
  font-size:15px;line-height:1}

/* Tile media opens the full gallery */
.cq-media{cursor:zoom-in}

/* Marks which upload is the cover — the first one, which the grids read. */
.cover-tag{position:absolute;left:6px;bottom:6px;padding:3px 8px;
  border-radius:var(--radius-pill);background:rgba(46,36,34,.72);color:var(--white);
  font-family:var(--font-ui);font-weight:600;font-size:10px;letter-spacing:.06em}

/* Square crop: this pair is a signpost into Find Your Style, so the cards
   should read as compact tiles rather than full-height portraits. */
.fav-rail .fav-card .media img{width:100%;height:100%;object-fit:cover;
  transition:transform 500ms var(--ease-standard)}
.fav-rail .fav-card:hover .media img{transform:scale(1.04)}
.fav-rail .fav-card .media img.ph{object-fit:contain;background:var(--rose-50)}
.fav-rail .fav-card:hover .media img.ph{transform:none}
.fav-rail .fav-card{transition:transform var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard)}

/* ---------- admin: edit mode ---------- */
.form-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:20px 0 14px}
.form-head h3{margin:0;font-family:var(--font-ui);font-weight:700;font-size:16px;
  letter-spacing:-.01em;color:var(--text-primary)}

/* The row tool cluster is shared by dress rows and type rows. */
.admin-body .row-tools{display:flex;align-items:center;gap:8px;flex:none}
.btn.sm{padding:8px 15px;font-size:13px}
.btn.ghost{background:transparent;border:1px solid var(--border-strong);
  color:var(--text-secondary)}
.btn.ghost:hover{background:var(--surface-muted);color:var(--text-primary);
  border-color:var(--brand-primary)}
.btn.danger.sm{padding:8px 15px;font-size:13px}

/* "Gawing cover" appears on a photo tile that is not currently the cover. */
.slot .mk{position:absolute;left:6px;right:6px;bottom:6px;padding:5px 8px;
  border:0;border-radius:var(--radius-pill);cursor:pointer;
  background:rgba(255,255,255,.94);color:var(--brand-primary-hover);
  font-family:var(--font-ui);font-weight:600;font-size:10.5px;line-height:1.3;
  opacity:0;transition:opacity var(--duration-base) var(--ease-standard)}
.slot:hover .mk,.slot .mk:focus-visible{opacity:1}
@media (hover:none){ .slot .mk{opacity:1} }

/* The form is the busiest surface in the panel — give it Montserrat too. */
.admin-body .field span{font-family:var(--font-ui);font-weight:600;font-size:11px;
  letter-spacing:.13em}
.admin-body .field input,.admin-body .field textarea,.admin-body .field select{
  font-family:var(--font-ui);font-weight:400;font-size:14.5px}
.admin-body .row .t{font-family:var(--font-ui);font-weight:600;font-size:14.5px}
.admin-body .row .s{font-family:var(--font-ui);font-weight:400;font-size:12.5px}
.admin-body .hint{font-family:var(--font-ui);font-weight:400;font-size:13px;line-height:1.6}
.admin-body .btn{font-family:var(--font-ui);font-weight:600;letter-spacing:.01em}
.admin-body .chip{font-family:var(--font-ui);font-weight:600;font-size:11.5px}
.admin-body h2{font-family:var(--font-ui);font-weight:700;letter-spacing:-.015em}
.admin-body .empty-note{font-family:var(--font-ui);font-weight:400;font-size:13.5px}

/* The trailing "+ Add" tile is an action, not a photo — make that obvious. */
.slot.add{border-style:dashed;border-color:var(--rose-300);
  background:var(--rose-50);color:var(--brand-primary-hover);
  font-family:var(--font-ui);font-weight:600;font-size:12.5px}
.slot.add:hover{background:var(--brand-primary-tint);border-color:var(--brand-primary)}
.slot.busy{font-family:var(--font-ui);font-weight:500;font-size:11.5px;
  color:var(--text-muted);border-style:solid;border-color:var(--border-default)}

/* The global message sat at the top of a long page, so an upload failure
   scrolled out of sight and photos appeared to vanish silently. Pin it. */
.admin-body #globalMsg{position:sticky;top:12px;z-index:40}
.admin-body .msg.show{font-family:var(--font-ui);font-weight:500;font-size:13.5px;
  box-shadow:var(--shadow-md)}

/* ---------- admin: photo dropzone ---------- */
/* Dragging a whole selection in is the reliable path — the OS picker needs
   Ctrl+click, which is the step admins miss and which made photos "vanish". */
.dropzone{border:1.5px dashed var(--border-strong);border-radius:var(--radius-md);
  padding:14px;background:var(--surface-page);
  transition:border-color var(--duration-base) var(--ease-standard),
             background var(--duration-base) var(--ease-standard)}
.dropzone.over{border-color:var(--brand-primary);border-style:solid;
  background:var(--rose-50);box-shadow:inset 0 0 0 3px rgba(201,125,116,.14)}
.dz-hint{margin:12px 2px 2px;font-family:var(--font-ui);font-weight:400;
  font-size:12.5px;line-height:1.6;color:var(--text-muted)}
.dz-hint b{font-weight:700;color:var(--text-secondary)}
.dropzone .slots{margin-top:0}


/* =====================================================================
   ADMIN PANEL — tabbed workspace
   Same tokens as the storefront so the two never drift apart.
   ===================================================================== */
.admin-body{background:var(--surface-muted)}

/* ---- header ---- */
.ap-head{background:var(--white);border-bottom:1px solid var(--border-default);
  position:sticky;top:0;z-index:30}
.ap-head-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:16px clamp(16px,3vw,28px) 12px}
.ap-brand{display:flex;align-items:center;gap:12px}
.ap-mark{width:38px;height:38px;border-radius:11px;flex:none;
  background:linear-gradient(145deg,var(--rose-300),var(--berry-500));
  color:var(--white);display:flex;align-items:center;justify-content:center;font-size:19px}
.ap-t{font-family:var(--font-ui);font-weight:700;font-size:15.5px;color:var(--text-primary)}
.ap-s{font-family:var(--font-ui);font-weight:400;font-size:12.5px;color:var(--text-muted)}
.ap-actions{display:flex;gap:9px}
.ap-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;
  border:1px solid var(--border-default);border-radius:9px;background:var(--white);
  font-family:var(--font-ui);font-weight:600;font-size:13px;color:var(--text-secondary);
  cursor:pointer;transition:all var(--duration-base) var(--ease-standard)}
.ap-btn:hover{border-color:var(--brand-primary);color:var(--brand-primary)}

/* ---- tabs ---- */
.ap-tabs{max-width:1180px;margin:0 auto;display:flex;gap:4px;
  padding:0 clamp(16px,3vw,28px);overflow-x:auto}
.ap-tab{position:relative;border:0;background:none;cursor:pointer;white-space:nowrap;
  padding:11px 15px 14px;font-family:var(--font-ui);font-weight:600;font-size:13.5px;
  color:var(--text-muted);border-bottom:2px solid transparent;
  transition:color var(--duration-base) var(--ease-standard)}
.ap-tab:hover{color:var(--text-secondary)}
.ap-tab.on{color:var(--brand-accent);border-bottom-color:var(--brand-accent)}

/* ---- panes ---- */
.ap-main{max-width:1180px;margin:0 auto;padding:clamp(18px,3vw,30px) clamp(16px,3vw,28px) 80px}
.ap-pane{display:none}
.ap-pane.on{display:block}
.ap-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:16px}
.ap-bar h2{margin:0;font-family:var(--font-ui);font-weight:700;font-size:21px;
  letter-spacing:-.02em;color:var(--text-primary)}
.ap-count{margin:3px 0 0;font-family:var(--font-ui);font-weight:400;font-size:13px;
  color:var(--text-muted)}
.ap-note{margin:0 0 16px;font-family:var(--font-ui);font-weight:400;font-size:13px;
  line-height:1.6;color:var(--text-muted)}
.ap-add{display:inline-flex;align-items:center;gap:7px;padding:11px 20px;border:0;
  border-radius:10px;background:var(--berry-700);color:var(--white);cursor:pointer;
  font-family:var(--font-ui);font-weight:600;font-size:13.5px;
  transition:background var(--duration-base) var(--ease-standard)}
.ap-add:hover{background:var(--berry-500)}
.ap-add:disabled{opacity:.55;cursor:not-allowed}
.ap-inline{display:flex;gap:9px}
.ap-inline input{padding:11px 14px;border:1px solid var(--border-default);
  border-radius:10px;font-family:var(--font-ui);font-size:13.5px;min-width:190px}
.ap-inline input:focus{outline:none;border-color:var(--brand-primary)}
.ap-empty{padding:38px 20px;text-align:center;background:var(--white);
  border:1px solid var(--border-default);border-radius:var(--radius-md);
  font-family:var(--font-ui);font-weight:400;font-size:13.5px;color:var(--text-muted)}

/* ---- dress rows ---- */
.ap-row{display:flex;gap:14px;align-items:flex-start;background:var(--white);
  border:1px solid var(--border-default);border-radius:var(--radius-md);
  padding:14px;margin-bottom:11px;
  transition:box-shadow var(--duration-base) var(--ease-standard)}
.ap-row:hover{box-shadow:var(--shadow-sm)}
.ap-thumb{width:70px;height:88px;flex:none;object-fit:cover;border-radius:9px;
  background:var(--rose-50)}
.ap-thumb.ph{background:var(--surface-sunken)}
.ap-row-main{flex:1;min-width:0}
.ap-row-t{font-family:var(--font-ui);font-weight:700;font-size:15px;
  color:var(--text-primary);margin-bottom:3px}
.ap-row-s{font-family:var(--font-ui);font-weight:400;font-size:13px;
  color:var(--text-muted)}
.ap-row-n{font-family:var(--font-ui);font-weight:400;font-size:12px;
  color:var(--text-muted);margin-top:2px}
.ap-row-tools{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.ap-row-move{display:flex;flex-direction:column;gap:5px;flex:none}
.ap-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;
  border:1px solid var(--border-default);border-radius:8px;background:var(--white);
  font-family:var(--font-ui);font-weight:600;font-size:12.5px;
  color:var(--text-secondary);cursor:pointer;
  transition:all var(--duration-base) var(--ease-standard)}
.ap-chip:hover{border-color:var(--brand-primary);color:var(--brand-primary)}
.ap-chip.danger{color:var(--rose-700)}
.ap-chip.danger:hover{background:var(--rose-50);border-color:var(--rose-700)}
.ap-icon{width:30px;height:30px;border:1px solid var(--border-default);border-radius:8px;
  background:var(--white);cursor:pointer;color:var(--text-secondary);font-size:13px;
  display:flex;align-items:center;justify-content:center}
.ap-icon:hover:not(:disabled){border-color:var(--brand-primary);color:var(--brand-primary)}
.ap-icon:disabled{opacity:.3;cursor:not-allowed}

/* ---- type cards ---- */
.ap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.ap-card{background:var(--white);border:1px solid var(--border-default);
  border-radius:var(--radius-md);overflow:hidden;
  transition:box-shadow var(--duration-base) var(--ease-standard)}
.ap-card:hover{box-shadow:var(--shadow-md)}
.ap-card-media{position:relative;aspect-ratio:16/10;background:var(--surface-sunken);
  cursor:pointer;overflow:hidden}
.ap-card-media img{width:100%;height:100%;object-fit:cover}
.ap-nocover{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-ui);font-size:12.5px;color:var(--text-muted)}
.ap-card-edit{position:absolute;inset:auto 0 0 0;padding:8px;text-align:center;
  background:rgba(46,36,34,.7);color:var(--white);font-family:var(--font-ui);
  font-weight:600;font-size:11.5px;opacity:0;
  transition:opacity var(--duration-base) var(--ease-standard)}
.ap-card-media:hover .ap-card-edit{opacity:1}
.ap-card-body{padding:13px 15px 15px}
.ap-card-t{font-family:var(--font-ui);font-weight:700;font-size:15px;color:var(--text-primary)}
.ap-star{color:var(--gold-400)}
.ap-card-s{font-family:var(--font-ui);font-weight:400;font-size:12.5px;
  color:var(--text-muted);margin-top:2px}
.ap-card-tools{display:flex;align-items:center;gap:6px;margin-top:11px;flex-wrap:wrap}
.ap-card-move{display:flex;gap:5px;margin-left:auto}

/* ---- site text ---- */
.ap-group{background:var(--white);border:1px solid var(--border-default);
  border-radius:var(--radius-md);padding:18px 20px 6px;margin-bottom:14px}
.ap-group h3{margin:0 0 14px;font-family:var(--font-ui);font-weight:700;font-size:14px;
  color:var(--text-primary)}
.ap-field{display:block;margin-bottom:14px}
.ap-field > span{display:block;margin-bottom:6px;font-family:var(--font-ui);
  font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted)}
.ap-field input,.ap-field textarea,.ap-field select{width:100%;padding:11px 13px;
  border:1px solid var(--border-default);border-radius:9px;background:var(--white);
  font-family:var(--font-ui);font-weight:400;font-size:14px;color:var(--text-primary)}
.ap-field textarea{min-height:76px;resize:vertical;line-height:1.55}
.ap-field input:focus,.ap-field textarea:focus,.ap-field select:focus{
  outline:none;border-color:var(--brand-primary);
  box-shadow:0 0 0 3px rgba(201,125,116,.14)}
.ap-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---- dress editor modal ---- */
.ap-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;
  justify-content:center;padding:clamp(0px,3vw,32px);
  background:rgba(46,36,34,.55);backdrop-filter:blur(4px)}
.ap-sheet{background:var(--surface-page);width:min(660px,100%);max-height:100%;
  border-radius:clamp(0px,2vw,var(--radius-lg));display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg);overflow:hidden}
.ap-sheet-head{flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;background:var(--white);border-bottom:1px solid var(--border-default)}
.ap-sheet-head h3{margin:0;font-family:var(--font-ui);font-weight:700;font-size:16px;
  color:var(--text-primary)}
.ap-x{width:34px;height:34px;border:1px solid var(--border-default);border-radius:50%;
  background:var(--white);cursor:pointer;color:var(--text-secondary);font-size:14px;
  display:flex;align-items:center;justify-content:center}
.ap-x:hover{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--white)}
.ap-sheet-body{flex:1;overflow-y:auto;padding:20px 22px}
.ap-sheet-foot{flex:none;display:flex;gap:10px;justify-content:flex-end;
  padding:14px 22px;background:var(--white);border-top:1px solid var(--border-default)}
.ap-save{padding:12px 26px;border:0;border-radius:10px;background:var(--brand-primary);
  color:var(--white);cursor:pointer;font-family:var(--font-ui);font-weight:600;font-size:14px;
  transition:background var(--duration-base) var(--ease-standard)}
.ap-save:hover{background:var(--brand-primary-hover)}
.ap-save:disabled{opacity:.6;cursor:not-allowed}

/* ---- messages ---- */
.admin-body #globalMsg{max-width:1180px;margin:14px auto 0;
  width:calc(100% - clamp(32px,6vw,56px));position:sticky;top:118px;z-index:25}

@media(max-width:700px){
  .ap-two{grid-template-columns:1fr}
  .ap-row{flex-wrap:wrap}
  .ap-row-move{flex-direction:row}
}


/* =====================================================================
   CATEGORY PAGE — one section per dress, all its photos beneath it
   ===================================================================== */
.dg{margin-bottom:clamp(34px,4.5vw,56px)}
.dg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding-bottom:14px;margin-bottom:16px;
  border-bottom:1px solid var(--border-default)}
.dg-name{margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(24px,3vw,32px);letter-spacing:-.01em;color:var(--text-primary)}
.dg-meta{margin:5px 0 0;font-family:var(--font-ui);font-weight:400;font-size:13.5px;
  color:var(--text-muted)}
.dg-meta b{font-weight:700;color:var(--brand-accent)}
.dg-desc{margin:9px 0 0;max-width:60ch;font-family:var(--font-ui);font-weight:400;
  font-size:14px;line-height:1.65;color:var(--text-secondary)}
.dg-cta{flex:none;padding:11px 22px;border-radius:var(--radius-pill);
  background:var(--berry-700);color:var(--white);
  font-family:var(--font-ui);font-weight:600;font-size:13.5px;white-space:nowrap;
  transition:background var(--duration-base) var(--ease-standard)}
.dg-cta:hover{background:var(--berry-500);color:var(--white)}

.dg-grid{display:grid;gap:clamp(12px,1.6vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.dg-shot{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;cursor:zoom-in;
  border-radius:var(--radius-md);background:var(--rose-50);
  border:1px solid rgba(228,217,206,.8);
  transition:transform var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard)}
.dg-shot:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.dg-shot:focus-visible{outline:2px solid var(--brand-primary);outline-offset:3px}
.dg-shot img{width:100%;height:100%;object-fit:cover;
  transition:transform 500ms var(--ease-standard)}
.dg-shot:hover img{transform:scale(1.05)}
/* The drawn plate is sized to its frame — cropping or scaling it looks broken. */
.dg-shot img.ph{object-fit:contain;background:var(--rose-50)}
.dg-shot:hover img.ph{transform:none}
.dg-shot.empty{cursor:default}
.dg-shot figcaption{position:absolute;right:9px;bottom:9px;padding:4px 9px;
  border-radius:var(--radius-pill);background:rgba(46,36,34,.6);color:var(--white);
  font-family:var(--font-ui);font-weight:500;font-size:11px;
  opacity:0;transition:opacity var(--duration-base) var(--ease-standard)}
.dg-shot:hover figcaption{opacity:1}

/* Smooth in-page jumps: Curated for You -> Find Your Style, and the category
   page's back link returning to that section. */
html{scroll-behavior:smooth}
#styles{scroll-margin-top:clamp(96px,11vw,132px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dg-shot,.dg-shot img{transition:none}
  .dg-shot:hover{transform:none}
  .dg-shot:hover img{transform:none}
}
@media(max-width:560px){
  .dg-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .dg-cta{width:100%;text-align:center}
}

/* Arriving from Curated for You: briefly ring the matching card so the eye
   lands on it instead of hunting the section for what was just clicked. */
@keyframes ll-spot{
  0%{box-shadow:0 0 0 0 rgba(201,125,116,.55)}
  70%{box-shadow:0 0 0 14px rgba(201,125,116,0)}
  100%{box-shadow:0 0 0 0 rgba(201,125,116,0)}
}
.cat-card.spotlight{animation:ll-spot 1.6s var(--ease-standard) 2;
  border-color:var(--brand-primary)}
@media (prefers-reduced-motion:reduce){
  .cat-card.spotlight{animation:none;border-color:var(--brand-primary)}
}

/* The per-dress "add photos" action is the one an admin reaches for most,
   so it reads as the primary chip on the row. */
.ap-chip.primary{background:var(--rose-50);border-color:var(--rose-300);
  color:var(--brand-primary-hover)}
.ap-chip.primary:hover{background:var(--brand-primary);border-color:var(--brand-primary);
  color:var(--white)}
.ap-shotcount{font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--text-muted)}
/* Wider tiles once a dress carries many photos, so 20 shots still scan. */
.ap-sheet .slots{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}

/* The photo field is a div now (a label re-fired the picker), so give it the
   same block spacing the real labels get. */
div.ap-field{display:block;margin-bottom:14px}
div.ap-field > span{display:block;margin-bottom:6px;font-family:var(--font-ui);
  font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted)}

/* =====================================================================
   LOOKBOOK — a slow, continuous rail of paired shots
   Smaller cards than Find Your Style on purpose: this is a browsing strip,
   not a decision point, so several read at once and the motion carries it.
   ===================================================================== */
.look-stage{position:relative;padding-bottom:74px}

.look-rail{display:flex;gap:clamp(12px,1.4vw,18px);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  padding:6px 2px 18px;cursor:grab;
  /* The strip is dragged and auto-scrolled, so no snap and no smooth: both
     fight the rAF loop that drives it. */
  scroll-behavior:auto}
.look-rail::-webkit-scrollbar{display:none}
.look-rail.dragging{cursor:grabbing}
.look-rail .state{flex:1;text-align:center}

/* Fixed width, not a grid track — a flex rail needs a definite size to loop. */
.look-card{flex:0 0 auto;width:clamp(168px,15vw,208px);
  display:flex;flex-direction:column;cursor:pointer;
  background:var(--surface-card);border:1px solid rgba(228,217,206,.85);
  border-radius:var(--radius-md);overflow:hidden;
  box-shadow:0 4px 14px rgba(92,38,34,.06);
  transition:transform 260ms var(--ease-standard),
             box-shadow 260ms var(--ease-standard),
             border-color 260ms var(--ease-standard)}
.look-card:hover{transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(92,38,34,.16);
  border-color:var(--rose-300)}
.look-card:focus-visible{outline:2px solid var(--brand-primary);outline-offset:3px}

.look-media{position:relative;aspect-ratio:3/4;background:var(--rose-50);overflow:hidden}
.look-media img{width:100%;height:100%;object-fit:cover;
  transition:transform 600ms var(--ease-standard)}
.look-card:hover .look-media img{transform:scale(1.07)}
.look-more{position:absolute;right:9px;bottom:9px;padding:4px 10px;
  border-radius:var(--radius-pill);background:rgba(46,36,34,.66);color:var(--white);
  font-family:var(--font-ui);font-weight:600;font-size:11px;
  backdrop-filter:blur(3px)}

.look-body{flex:1;display:flex;flex-direction:column;padding:12px 14px 14px}
.look-name{margin:0;font-family:var(--font-ui);font-weight:700;font-size:14px;
  letter-spacing:-.01em;color:var(--text-primary);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.look-go{margin-top:auto;padding-top:9px;display:flex;align-items:center;gap:5px;
  font-family:var(--font-ui);font-weight:600;font-size:12px;color:var(--brand-primary)}
.look-go span{transition:transform 260ms var(--ease-standard)}
.look-card:hover .look-go span{transform:translateX(4px)}

/* Soft edges so cards enter and leave the strip instead of being cut off. */
.look-stage::before,.look-stage::after{content:'';position:absolute;top:0;bottom:74px;
  width:clamp(28px,5vw,72px);pointer-events:none;z-index:2}
.look-stage::before{left:0;
  background:linear-gradient(90deg,var(--surface-page) 12%,rgba(253,249,245,0) 100%)}
.look-stage::after{right:0;
  background:linear-gradient(270deg,var(--surface-page) 12%,rgba(253,249,245,0) 100%)}

.look-pause{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  z-index:3;display:inline-flex;align-items:center;gap:8px;
  padding:10px 22px;border:1px solid var(--border-default);
  border-radius:var(--radius-pill);background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);cursor:pointer;
  font-family:var(--font-ui);font-weight:600;font-size:12.5px;
  letter-spacing:.04em;color:var(--text-secondary);
  transition:all 260ms var(--ease-standard)}
.look-pause:hover{border-color:var(--brand-primary);color:var(--brand-primary);
  background:var(--white)}
.look-pause:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}

@media(max-width:560px){
  .look-card{width:148px}
  .look-name{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .look-card,.look-media img,.look-go span,.look-pause{transition:none}
  .look-card:hover{transform:none}
  .look-card:hover .look-media img{transform:none}
}
}

/* The pause control is gone — hover already stops the rail, and a lone button
   under the strip carried no meaning for a viewer. */
.look-pause{display:none}

/* =====================================================================
   CONTACT — one panel, two columns
   The old page split one question across four stacked sections; this puts
   the action and the facts side by side so nothing has to be hunted for.
   ===================================================================== */
.ct-shell{padding:clamp(112px,13vw,150px) 0 clamp(60px,8vw,96px)}
.ct-panel{display:grid;grid-template-columns:1.05fr .95fr;
  background:var(--surface-card);border:1px solid var(--border-default);
  border-radius:clamp(18px,2.4vw,var(--radius-xl));overflow:hidden;
  box-shadow:0 24px 60px rgba(92,38,34,.10)}

.ct-left{padding:clamp(30px,4vw,52px);
  background:linear-gradient(160deg,#FFFFFF 0%,var(--rose-50) 100%)}
.ct-title{margin:12px 0 0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(34px,4.6vw,52px);line-height:1.08;letter-spacing:-.01em;
  color:var(--text-primary)}
.ct-lede{margin:16px 0 0;max-width:38ch;font-family:var(--font-ui);font-weight:400;
  font-size:15px;line-height:1.68;color:var(--text-secondary)}

.ct-primary{display:inline-flex;align-items:center;justify-content:center;
  margin-top:26px;padding:15px 30px;border-radius:var(--radius-pill);
  background:var(--berry-700);color:var(--white);
  font-family:var(--font-ui);font-weight:600;font-size:14.5px;
  box-shadow:0 8px 22px rgba(90,31,48,.26);
  transition:background var(--duration-base) var(--ease-standard),
             transform var(--duration-base) var(--ease-standard)}
.ct-primary:hover{background:var(--berry-500);color:var(--white);transform:translateY(-2px)}

.ct-hint{margin:18px 0 0;max-width:40ch;font-family:var(--font-ui);font-weight:400;
  font-size:13px;line-height:1.65;color:var(--text-muted)}
.ct-hint b{font-weight:700;color:var(--text-secondary)}

.ct-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;
  padding-top:22px;border-top:1px solid rgba(228,217,206,.9)}
.ct-soc{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;
  border:1px solid var(--border-default);border-radius:var(--radius-pill);
  background:var(--white);font-family:var(--font-ui);font-weight:500;font-size:12.5px;
  color:var(--text-secondary);
  transition:border-color var(--duration-base) var(--ease-standard),
             color var(--duration-base) var(--ease-standard)}
.ct-soc:hover{border-color:var(--brand-primary);color:var(--brand-primary)}
.ct-soc img{width:22px;height:22px;border-radius:6px;object-fit:cover;flex:none}

.ct-right{padding:clamp(30px,4vw,52px);display:flex;flex-direction:column}
.ct-facts{margin:0;display:grid;gap:22px}
.ct-facts dt{font-family:var(--font-ui);font-weight:600;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--brand-gold);
  margin-bottom:7px}
.ct-facts dd{margin:0;font-family:var(--font-ui);font-weight:400;font-size:14.5px;
  line-height:1.7;color:var(--text-secondary)}
.ct-facts .muted{color:var(--text-muted);font-size:13.5px}
.ct-map{display:block;margin-top:8px;font-weight:600;font-size:13.5px;
  color:var(--brand-primary)}
.ct-secondary{margin-top:auto;padding-top:26px;font-family:var(--font-ui);
  font-weight:600;font-size:13.5px;color:var(--brand-primary)}

@media(max-width:860px){
  .ct-panel{grid-template-columns:1fr}
  .ct-right{border-top:1px solid var(--border-default)}
}
@media (prefers-reduced-motion:reduce){
  .ct-primary{transition:none}
  .ct-primary:hover{transform:none}
}

/* =====================================================================
   HEADING WEIGHT PASS
   The reference site gets its impact from scale and contrast, not from a
   different typeface. Push both here while keeping the Cormorant serif —
   that face is the brand, and swapping it for a bold sans would read as
   sportswear rather than bridal.
   ===================================================================== */
.section-head h2,
.fav-head h2,
.page-head h1{
  font-weight:600;
  letter-spacing:-.018em;
  color:var(--ink-900)}

.section-head h2{font-size:clamp(32px,4.4vw,50px);line-height:1.08}
.fav-head h2{font-size:clamp(32px,4.4vw,50px);line-height:1.08}
.page-head h1{font-size:clamp(38px,5.4vw,64px);line-height:1.06}

/* The eyebrow is what makes a big heading feel deliberate rather than loud:
   small, wide-tracked, and clearly a label above the statement. */
.section-head .eyebrow,
.fav-head .overline,
.page-head .overline{
  font-family:var(--font-ui);font-weight:700;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}

/* More air under a heading so the larger type does not crowd its sub-line. */
.section-head{margin-bottom:clamp(30px,4vw,48px)}
.section-head p{margin-top:14px;font-size:15.5px}

/* The step markers carry the same jump in weight. */
.step .n{font-size:20px;font-weight:800}
.step h3{font-size:17.5px;font-weight:700;letter-spacing:-.01em}

/* Card titles across the site — one weight, so nothing reads as an accident. */
.cat-card .bar b,.look-name,.cq-name,.dg-name,.ap-row-t{font-weight:700}
.dg-name{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.015em}

@media(max-width:640px){
  .section-head h2,.fav-head h2{font-size:clamp(27px,7.5vw,34px)}
  .page-head h1{font-size:clamp(31px,8.5vw,40px)}
}

/* ---------- Site Text: image rows ---------- */
/* Without an explicit size the preview rendered at the photo's natural width
   and swallowed the page. A fixed thumb keeps the row scannable. */
.ap-imgfield{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px;border:1px solid var(--border-default);border-radius:10px;
  background:var(--surface-page)}
.ap-imgprev{width:120px;height:90px;flex:none;object-fit:cover;
  border-radius:8px;background:var(--surface-sunken);display:block}
.ap-imgprev.none{display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--border-strong);
  font-family:var(--font-ui);font-weight:500;font-size:11.5px;color:var(--text-muted)}
.ap-imgacts{display:flex;gap:8px;flex-wrap:wrap}

/* =====================================================================
   OUR FAVORITES — a compact pair, not a second hero
   This section is a jump link into Find Your Style below it, so it should
   read as a signpost. At full width it competed with the real chooser.
   ===================================================================== */
.fav-rail{max-width:560px !important;gap:clamp(14px,1.8vw,20px) !important}

/* 4/5 was portrait enough to dominate; 1/1 keeps both faces without the
   card becoming a column of its own. */
.fav-rail .fav-card .media{aspect-ratio:1/1}
.fav-rail .fav-card{border-radius:var(--radius-md);
  border:1px solid rgba(228,217,206,.85);
  box-shadow:0 4px 14px rgba(92,38,34,.06)}
.fav-rail .fav-card:hover{transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(92,38,34,.14)}
.fav-rail .fav-card .body{padding:13px 16px 15px}
.fav-rail .fav-card .name{font-size:16px;margin-bottom:3px;-webkit-line-clamp:1;
  min-height:0}
.fav-rail .fav-card .cat{font-size:10px;margin-bottom:5px}
.fav-rail .fav-card .price{font-size:12.5px;margin-bottom:9px}
.fav-rail .fav-card .go{font-size:12px}
.fav-shots{padding:4px 9px;font-size:10.5px}

/* The heading can ease off too — the section below it is the destination. */
.band .fav-head h2{font-size:clamp(26px,3.2vw,38px)}
.band .fav-head p{font-size:14.5px;max-width:46ch;margin-inline:auto}
.band .fav-head{margin-bottom:clamp(22px,3vw,32px)}

@media(max-width:640px){
  /* Layout for this breakpoint lives in the mobile grid block below. */
  .fav-rail .fav-card .name{font-size:15px}
}

/* Footer Messenger link — quieter than the header pill, since the footer is
   already a low-key surface, but still unmistakably an action. */
.foot-msg{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  padding:10px 18px;border:1px solid rgba(220,196,144,.42);
  border-radius:var(--radius-pill);background:rgba(255,255,255,.06);
  font-family:var(--font-ui);font-weight:600;font-size:12.5px;
  color:var(--gold-300);white-space:nowrap;
  transition:background var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard),
             color var(--duration-base) var(--ease-standard)}
.foot-msg:hover{background:var(--gold-300);border-color:var(--gold-300);
  color:var(--ink-900)}
.foot-msg:focus-visible{outline:2px solid var(--gold-300);outline-offset:2px}

/* With a single account left, auto-fit stretched the one card across the
   whole row. Cap it and centre it so it reads as a deliberate single link. */
.social-grid{max-width:400px;margin-inline:auto}
.social-grid .social-card{justify-content:flex-start}

/* =====================================================================
   MOBILE NAV — bigger, evenly spaced tap targets
   The old links were text-sized rows: hard to aim at, and unfriendly to
   anyone with poor eyesight. Each row is now a full-width target.
   ===================================================================== */
@media(max-width:768px){
  .nav-panel{padding:14px 18px 20px;border-radius:20px;gap:0}
  .panel-link{display:flex;align-items:center;
    /* 56px is a comfortable target — well past the 44px minimum. */
    min-height:56px;padding:0 6px;
    font-family:var(--font-ui);font-weight:600;font-size:17px;
    color:var(--text-primary);border-bottom:1px solid rgba(228,217,206,.75)}
  .panel-link:last-of-type{border-bottom:0}
  .panel-link.on{color:var(--brand-primary);font-weight:700}
  /* A dot marks the current page without shifting the row's height. */
  .panel-link.on::after{content:'';width:6px;height:6px;border-radius:50%;
    background:var(--brand-primary);margin-left:10px}
  .panel-cta{min-height:54px;display:flex;align-items:center;justify-content:center;
    margin-top:18px;font-size:15px;border-radius:var(--radius-pill)}

  /* The toggle itself was a small three-line glyph; make it a real button. */
  .nav-toggle{width:46px;height:46px;border-radius:50%;
    background:var(--berry-700);align-items:center;justify-content:center;gap:4px;
    padding:0;flex:none}
  .nav-toggle span{width:18px;height:2px;background:var(--white)}
}

/* =====================================================================
   MOBILE: two cards per row everywhere
   One card per row turned every gallery into an endless scroll. Two keeps
   the page short while the tiles stay big enough to read and to tap.
   ===================================================================== */
@media(max-width:640px){
  /* Find Your Style, the collection grid, and What We Carry all share this. */
  .cat-grid,
  .grid,
  .dg-grid{grid-template-columns:1fr 1fr !important;gap:12px !important;
    max-width:none !important}

  /* Our Favorites stays a pair too. The card carries a fixed width from the
     old flex rail, which overflowed the grid track — clear it so the two
     cards actually share the row. */
  /* .band already pads 20px each side at this width, so the rail only needs
     its own overflow cleared and a min-width:0 on the cards — a grid item
     defaults to min-content, which is what pushed the second card wide. */
  /* One card per row here on purpose: Our Favorites is a signpost, and a
     single full-width card reads more clearly than a cramped pair. The
     `margin:0 -20px` from the old scrolling rail must still be cleared. */
  .fav-rail{grid-template-columns:1fr !important;max-width:none !important;
    gap:14px !important;overflow:visible !important;
    margin:0 !important;padding:0 !important}
  .fav-rail .fav-card{width:auto !important;min-width:0}
  .fav-rail .fav-card .media,
  .fav-rail .fav-card .body{min-width:0}

  /* Sized so two fit without the type collapsing. */
  .cat-card .bar{padding:12px 13px 14px;flex-direction:column;align-items:flex-start;
    gap:10px}
  .cat-card .bar b{font-size:15px}
  .cat-card .bar .n{font-size:11.5px;margin-top:3px}
  .view-more{width:100%;justify-content:center;padding:9px 12px;font-size:12px}

  .card-body,.cq-body{padding:11px 12px 13px}
  .card-name,.cq-name{font-size:14px}
  .card-price,.cq-price{font-size:13px}
  .card-cat,.cq-eyebrow{font-size:10px}

  .fav-rail .fav-card .body{padding:15px 18px 17px}
  .fav-rail .fav-card .name{font-size:17px}
  .fav-rail .fav-card .price{font-size:13px}
  .fav-rail .fav-card .go{font-size:13px}
  .fav-shots,.shot-count{padding:3px 8px;font-size:10px}
}

/* =====================================================================
   MOBILE OVERFLOW GUARD
   A couple of min-width:280px columns are wider than a 430px phone once
   padding is counted, which stretched the whole document and made every
   section look like it was spilling off the right edge.
   ===================================================================== */
@media(max-width:640px){
  .split .col,
  .split .shot{min-width:0}
  .steps{grid-template-columns:1fr}
}
/* Nothing on the page should scroll the body sideways. */
html,body{max-width:100%;overflow-x:hidden}

/* =====================================================================
   ABOUT — longer measure, better rhythm
   The story columns were short lines floating in a wide gap, which read as
   unfinished. Give the text room and a proper reading size.
   ===================================================================== */
.split{gap:clamp(28px,4vw,56px);align-items:center}
.split .col{flex:1 1 460px}
.split .shot{flex:1 1 420px}
.split .col p{font-family:var(--font-ui);font-weight:400;
  font-size:16px;line-height:1.78;color:var(--text-secondary);
  max-width:62ch;margin:0 0 20px;text-wrap:pretty}
/* The opening paragraph carries the idea, so it sets slightly larger. */
.split .col p:first-of-type{font-size:17.5px;line-height:1.72;
  color:var(--ink-700)}
.split .col p:last-child{margin-bottom:0}

@media(max-width:640px){
  .split .col p{font-size:15.5px;line-height:1.72}
  .split .col p:first-of-type{font-size:16.5px}
}

/* Two per row in the collection on mobile too — the same reasoning as the
   other grids: a long catalogue should not become an endless column. */
@media(max-width:640px){
  .collection-grid,
  .cq-grid{grid-template-columns:1fr 1fr !important;gap:12px !important}
}

/* =====================================================================
   ADMIN TABS ON MOBILE — scrollable with an edge hint
   "Site Text" sat off-screen with nothing to say the row moved. The fade
   and the arrow make the overflow visible instead of hidden.
   ===================================================================== */
@media(max-width:768px){
  .ap-tabs{position:relative;scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;padding-right:38px}
  .ap-tabs::-webkit-scrollbar{display:none}
  .ap-tabs{scrollbar-width:none}
  .ap-tab{padding:12px 13px 15px;font-size:13px}

  /* The arrow is a real control, not decoration — tapping it scrolls. */
  .ap-tabs-next{position:absolute;right:6px;top:50%;transform:translateY(-50%);
    z-index:4;width:32px;height:32px;border:1px solid var(--border-default);
    border-radius:50%;background:var(--white);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    color:var(--brand-primary);font-size:15px;line-height:1;
    box-shadow:0 2px 8px rgba(46,36,34,.12)}
  .ap-tabs-wrap{position:relative}
  .ap-tabs-wrap::after{content:'';position:absolute;right:0;top:0;bottom:0;
    width:52px;pointer-events:none;z-index:3;
    background:linear-gradient(270deg,var(--white) 30%,rgba(255,255,255,0) 100%)}
}

/* =====================================================================
   FOOTER ON MOBILE — tighter, two columns
   auto-fit collapsed every block into its own full-width row, which made
   the footer nearly as tall as a page section.
   ===================================================================== */
@media(max-width:640px){
  .site-foot{padding:36px 20px 20px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:22px 18px;margin-bottom:22px}
  /* The wordmark and blurb read as the footer's heading, so they span. */
  .foot-grid .lede{grid-column:1/-1;max-width:none}
  .foot-grid .lede p{font-size:13px;line-height:1.6}
  .foot-h{font-size:10.5px;margin-bottom:9px}
  .foot-nav{gap:7px}
  .foot-link{font-size:13.5px}
  .foot-grid p{font-size:13px;line-height:1.55}
  .foot-msg{margin-top:12px;padding:9px 14px;font-size:11.5px}
  .foot-social img{width:34px;height:34px}
  .foot-bottom{padding-top:14px;font-size:11.5px;gap:10px}
}

/* =====================================================================
   FOOTER OVERFLOW FIX
   A grid item defaults to min-width:auto, so a column refuses to shrink
   below its longest unbreakable run — the email address and the address
   line. At 360px that pushed the footer 54px past the screen and clipped
   the right-hand column.
   ===================================================================== */
.foot-grid > *{min-width:0}
.foot-grid p,
.foot-grid .foot-link{overflow-wrap:anywhere;word-break:break-word}
/* The email is one long token; let it wrap rather than widen the column. */
.foot-grid a[href^="mailto:"]{display:inline-block;max-width:100%}

@media(max-width:640px){
  /* Below this the two-column footer has no room for a long address, so the
     Visit block gets the full width and the short blocks pair up. */
  .foot-grid{grid-template-columns:1fr 1fr;gap:20px 16px}
  .foot-grid > div:nth-child(3){grid-column:1/-1}
  .foot-grid p{font-size:12.5px}
}

/* =====================================================================
   REVEAL ON SCROLL
   Small and quick on purpose: 14px of travel over 620ms. Anything larger
   reads as a page that is still loading, and anything slower makes the
   visitor wait for the site to catch up with their scrolling.
   ===================================================================== */
.has-reveal .reveal{opacity:0;transform:translateY(14px);
  transition:opacity 620ms var(--ease-standard) var(--reveal-delay,0ms),
             transform 620ms var(--ease-standard) var(--reveal-delay,0ms);
  will-change:opacity,transform}
.has-reveal .reveal.is-in{opacity:1;transform:none}

/* Once the movement is done, drop the hint so the browser stops holding a
   layer for every card on a long page. */
.has-reveal .reveal.is-in{will-change:auto}

/* The hero should never wait for anything — it is the first thing seen. */
.hero .reveal{opacity:1 !important;transform:none !important}

/* Section headings lead their own group, so they move a touch further. */
.has-reveal .section-head.reveal,
.has-reveal .fav-head.reveal{transform:translateY(20px)}
.has-reveal .section-head.reveal.is-in,
.has-reveal .fav-head.reveal.is-in{transform:none}

@media (prefers-reduced-motion:reduce){
  .has-reveal .reveal{opacity:1;transform:none;transition:none}
}

/* =====================================================================
   HERO TRUST ROW — refined after the avatars came out
   Without the portraits beside it the rating had to carry the row on its
   own, so it gets a touch more presence and clearer spacing.
   ===================================================================== */
.trust .rating{gap:12px;align-items:baseline}
.trust .rating .stars{font-size:15px;letter-spacing:3px;
  /* Baseline-align the glyphs with the number beside them. */
  position:relative;top:1px}
.trust .rating b{font-family:var(--font-ui);font-weight:700;font-size:19px;
  letter-spacing:-.01em;color:var(--text-primary)}
.trust .rating small{font-size:13.5px}
.trust .lines{gap:8px}
.trust .note{font-size:13.5px;line-height:1.5}

/* The new headline is a longer phrase than the one this size was tuned for,
   so it wrapped to three lines and pushed the CTAs down. Ease the scale and
   tighten the leading to bring it back to two. */
.hero-copy h1{font-size:clamp(40px,5.4vw,72px);line-height:1.02;
  letter-spacing:-.015em}
@media(max-width:640px){
  .hero-copy h1{font-size:clamp(34px,10vw,44px)}
}

/* The story's opening line, sitting above the paragraphs beside the photo.
   Serif and larger than the body so it reads as the story's own title, but
   smaller than a section heading — it belongs to this column, not the page. */
.ab-story-head{margin:0 0 20px;font-family:var(--font-display);font-weight:600;
  font-size:clamp(25px,2.7vw,34px);line-height:1.18;letter-spacing:-.012em;
  color:var(--text-primary);text-wrap:pretty}
/* Shorter paragraphs need a touch more air between them to read as steps. */
.split .col p{margin-bottom:18px}
@media(max-width:640px){
  .ab-story-head{font-size:clamp(21px,6vw,26px);margin-bottom:16px}
  .ab-story-head br{display:none}
}

/* The owner types sizes into the description on separate lines — Size, Bust,
   Waist, Length. HTML collapses those newlines, so a careful measurement list
   arrived as one unbroken run. `pre-line` keeps the line breaks while still
   wrapping long lines normally. */
.m-desc,.dg-desc{white-space:pre-line}