/* ══════════════════════════════════════════════
   VESTRY — high-end fashion e-commerce demo
   Designs by Delia
   ══════════════════════════════════════════════ */
:root{
  --ink:#111111;
  --ink-2:#3A3A3A;
  --body:#5F5F5F;
  --muted:#8C8C8C;
  --paper:#FFFFFF;
  --shell:#FAF8F5;
  --stone:#F1EEE9;
  --line:#E3DFD9;
  --line-2:#CFC9C0;
  --camel:#A9814F;
  --sale:#8C2B24;
  --disp:'Tenor Sans',Optima,Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15.5px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
body.locked{overflow:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1440px;margin:0 auto;padding:0 40px;}
.wrap-n{max-width:1180px;margin:0 auto;padding:0 40px;}
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;line-height:1.14;letter-spacing:.01em;}
.eyebrow{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-size:11px;
  font-weight:500;letter-spacing:.22em;text-transform:uppercase;padding:16px 30px;border:1px solid transparent;
  cursor:pointer;transition:background .25s,color .25s,border-color .25s;}
.btn-ink{background:var(--ink);color:#fff;}
.btn-ink:hover{background:var(--ink-2);}
.btn-out{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-out:hover{background:var(--ink);color:#fff;}
.btn-light{background:#fff;color:var(--ink);}
.btn-light:hover{background:var(--stone);}
.btn-sm{padding:12px 20px;font-size:10px;}

/* ── ANNOUNCEMENT ── */
.ann{background:var(--ink);color:#fff;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:11px 20px;}
.ann b{font-weight:500;}

/* ── HEADER ── */
.hdr{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:22px 40px;}
.hdr-nav{display:flex;gap:30px;font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;}
.hdr-nav a{padding:4px 0;border-bottom:1px solid transparent;transition:border-color .2s;}
.hdr-nav a:hover,.hdr-nav a.on{border-bottom-color:var(--ink);}
.logo{font-family:var(--disp);font-size:30px;letter-spacing:.36em;text-transform:uppercase;text-align:center;padding-left:.36em;white-space:nowrap;}
.hdr-r{display:flex;justify-content:flex-end;align-items:center;gap:22px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;}
.hdr-r button{background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.bag-btn{display:inline-flex;align-items:center;gap:7px;}
.bag-count{display:inline-grid;place-items:center;min-width:19px;height:19px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px;letter-spacing:0;padding:0 5px;}
.burger{display:none;background:none;border:none;cursor:pointer;}
.burger span{display:block;width:22px;height:1px;background:var(--ink);margin:6px 0;}

/* ── HERO ── */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(520px,72vh,720px);}
.hero-copy{background:var(--shell);display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,96px);}
.hero-copy h1{font-size:clamp(38px,4.6vw,68px);margin:18px 0 20px;}
.hero-copy p{color:var(--body);font-weight:300;max-width:44ch;margin-bottom:30px;}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;}
.hero-img{position:relative;overflow:hidden;background:var(--stone);}
.hero-img img{width:100%;height:100%;object-fit:cover;}

/* ── SERVICE STRIP ── */
.svcs{border-bottom:1px solid var(--line);}
.svcs .wrap{display:grid;grid-template-columns:repeat(4,1fr);}
.svc{padding:24px 20px;text-align:center;border-right:1px solid var(--line);}
.svc:last-child{border-right:none;}
.svc b{display:block;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;}
.svc span{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;}

/* ── SECTIONS ── */
.sec{padding:clamp(56px,7vw,96px) 0;}
.sec-shell{background:var(--shell);}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px;}
.sec-head h2{font-size:clamp(26px,3.2vw,40px);margin-top:12px;}
.sec-head a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px;}

/* ── CATEGORY TILES ── */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.cat{position:relative;overflow:hidden;display:block;background:var(--stone);}
.cat img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .9s cubic-bezier(.2,0,.2,1);}
.cat:hover img{transform:scale(1.04);}
.cat-b{position:absolute;left:0;right:0;bottom:0;padding:40px 22px 22px;color:#fff;
  background:linear-gradient(to top,rgba(17,17,17,.72),rgba(17,17,17,0));}
.cat-b b{display:block;font-family:var(--disp);font-size:23px;letter-spacing:.02em;}
.cat-b span{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;margin-top:5px;opacity:.85;}

/* ── PRODUCT GRID ── */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px) clamp(14px,1.6vw,24px);}
.pcard{position:relative;}
.pcard-img{position:relative;overflow:hidden;background:var(--stone);display:block;}
.pcard-img img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1s cubic-bezier(.2,0,.2,1),opacity .4s;}
.pcard:hover .pcard-img img{transform:scale(1.045);}
.ptag{position:absolute;top:0;left:0;background:#fff;color:var(--ink);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;padding:7px 12px;z-index:2;}
.ptag.sale{background:var(--sale);color:#fff;}
.padd{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;}
.pcard:hover .padd{opacity:1;transform:none;}
.padd .btn{width:100%;}
.pcard-b{padding:16px 2px 0;}
.pcard-b h3{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.01em;}
.pcard-b .pbrand{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
.pprice{display:flex;align-items:baseline;gap:10px;margin-top:7px;font-size:14px;}
.pprice .was{color:var(--muted);text-decoration:line-through;font-size:13px;}
.pprice .now{color:var(--sale);}
.pswatch{display:flex;gap:6px;margin-top:11px;}
.pswatch i{width:12px;height:12px;border-radius:50%;border:1px solid var(--line-2);display:block;}

/* ── EDITORIAL BAND ── */
.edit{display:grid;grid-template-columns:1.15fr .85fr;align-items:stretch;}
.edit-img{overflow:hidden;background:var(--stone);}
.edit-img img{width:100%;height:100%;object-fit:cover;min-height:340px;}
.edit-copy{background:var(--stone);display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,5vw,80px);}
.edit-copy h2{font-size:clamp(26px,3.2vw,44px);margin:16px 0 18px;}
.edit-copy p{color:var(--body);font-weight:300;margin-bottom:26px;max-width:46ch;}

/* ── NEWSLETTER ── */
.news{background:var(--ink);color:#fff;text-align:center;padding:clamp(50px,6vw,84px) 0;}
.news h2{font-size:clamp(24px,3vw,38px);margin:14px 0 12px;}
.news p{color:#B9B5AF;font-weight:300;max-width:46ch;margin:0 auto 26px;}
.news .eyebrow{color:#8C8C8C;}
.news-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.news-row input{background:transparent;border:1px solid rgba(255,255,255,.32);color:#fff;padding:15px 18px;
  font-family:var(--sans);font-size:14px;min-width:280px;}
.news-row input:focus{outline:none;border-color:#fff;}
.news-row input::placeholder{color:#9A9691;}

/* ── FOOTER ── */
.foot{background:var(--shell);border-top:1px solid var(--line);padding:56px 0 30px;}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:34px;}
.foot h4{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin-bottom:16px;}
.foot a{display:block;font-size:13.5px;color:var(--body);margin-bottom:9px;}
.foot a:hover{color:var(--ink);}
.foot .logo{text-align:left;font-size:26px;padding-left:0;margin-bottom:14px;}
.foot p{font-size:13.5px;color:var(--body);font-weight:300;max-width:34ch;}
.foot-bot{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--muted);}

/* ── SHOP PAGE ── */
.crumbs{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:22px 0 0;}
.crumbs a:hover{color:var(--ink);}
.shop-head{padding:18px 0 26px;border-bottom:1px solid var(--line);}
.shop-head h1{font-size:clamp(30px,3.6vw,46px);}
.shop-head p{color:var(--body);font-weight:300;margin-top:10px;max-width:56ch;}
.shop-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid var(--line);}
.shop-count{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.sortwrap{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.sortwrap select{font-family:var(--sans);font-size:12.5px;letter-spacing:.04em;text-transform:none;color:var(--ink);
  border:1px solid var(--line);background:#fff;padding:10px 14px;cursor:pointer;}
.sortwrap select:focus{outline:none;border-color:var(--ink);}

.shop-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(26px,3.4vw,54px);padding:34px 0 0;align-items:start;}
.filters h4{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px;}
.fgroup{padding:0 0 24px;margin-bottom:24px;border-bottom:1px solid var(--line);}
.fgroup:last-of-type{border-bottom:none;}
.fopt{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--body);cursor:pointer;padding:5px 0;}
.fopt input{position:absolute;opacity:0;width:0;height:0;}
.fopt .box{width:14px;height:14px;border:1px solid var(--line-2);display:inline-block;position:relative;flex:0 0 auto;transition:all .2s;}
.fopt input:checked + .box{background:var(--ink);border-color:var(--ink);}
.fopt input:checked + .box::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);}
.fopt:hover{color:var(--ink);}
.sizes{display:flex;flex-wrap:wrap;gap:7px;}
.size{font-family:var(--sans);font-size:12px;letter-spacing:.06em;min-width:40px;padding:9px 6px;border:1px solid var(--line);background:#fff;color:var(--body);cursor:pointer;transition:all .2s;}
.size:hover{border-color:var(--line-2);}
.size.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.swatches{display:flex;flex-wrap:wrap;gap:9px;}
.sw{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);cursor:pointer;position:relative;transition:transform .2s;}
.sw:hover{transform:scale(1.08);}
.sw.on{box-shadow:0 0 0 1px #fff inset,0 0 0 2px var(--ink);}
.fclear{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;background:none;border:none;
  border-bottom:1px solid var(--ink);padding:0 0 3px;cursor:pointer;color:var(--ink);margin-top:6px;}
.nores{padding:60px 0;text-align:center;color:var(--muted);display:none;}
.nores.show{display:block;}
.nores b{display:block;font-family:var(--disp);font-size:24px;color:var(--ink);margin-bottom:8px;}

/* ── CART DRAWER ── */
.scrim{position:fixed;inset:0;background:rgba(17,17,17,.42);opacity:0;pointer-events:none;transition:opacity .35s;z-index:100;}
.scrim.on{opacity:1;pointer-events:auto;}
.cart{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:#fff;z-index:101;
  transform:translateX(102%);transition:transform .42s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;}
.cart.on{transform:none;}
.cart-top{display:flex;align-items:center;justify-content:space-between;padding:24px 26px;border-bottom:1px solid var(--line);}
.cart-top h3{font-size:20px;letter-spacing:.06em;}
.cart-close{background:none;border:none;font-size:22px;line-height:1;cursor:pointer;color:var(--ink);}
.ship{padding:16px 26px;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.04em;color:var(--body);}
.ship-bar{height:2px;background:var(--stone);margin-top:10px;}
.ship-bar i{display:block;height:100%;background:var(--ink);width:0;transition:width .5s;}
.cart-items{flex:1;overflow-y:auto;padding:8px 26px;}
.citem{display:grid;grid-template-columns:72px 1fr auto;gap:14px;padding:20px 0;border-bottom:1px solid var(--line);}
.citem img{width:72px;height:90px;object-fit:cover;background:var(--stone);}
.citem h4{font-family:var(--sans);font-size:13.5px;font-weight:500;}
.citem .cb{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px;}
.citem .cmeta{font-size:12.5px;color:var(--muted);margin-top:4px;}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);margin-top:9px;}
.qty button{background:none;border:none;width:26px;height:26px;cursor:pointer;font-size:14px;line-height:1;color:var(--ink);}
.qty span{min-width:24px;text-align:center;font-size:13px;}
.citem .cp{font-size:13.5px;white-space:nowrap;}
.cart-empty{padding:60px 26px;text-align:center;color:var(--muted);font-size:14px;}
.cart-bot{border-top:1px solid var(--line);padding:22px 26px 26px;}
.crow{display:flex;justify-content:space-between;font-size:14px;margin-bottom:10px;}
.crow.tot{font-size:16px;font-family:var(--disp);padding-top:12px;border-top:1px solid var(--line);}
.cart-bot .btn{width:100%;margin-top:14px;}
.cart-note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:12px;}

/* ══ TEMPLATE BADGE ══ */
.badge{position:fixed;right:18px;bottom:18px;z-index:95;background:#141414;color:#F5F1E9;
  font-family:inherit;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 18px;text-decoration:none;box-shadow:0 12px 30px rgba(0,0,0,.28);transition:transform .3s;}
.badge:hover{transform:translateY(-3px);}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .pgrid{grid-template-columns:repeat(3,1fr);}
  .cats{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  .hdr-nav{display:none;}
  .burger{display:block;}
  .hdr-in{grid-template-columns:auto 1fr auto;padding:18px 24px;}
  .logo{font-size:23px;text-align:center;}
  .hero,.edit{grid-template-columns:1fr;}
  .hero-img{min-height:420px;order:-1;}
  .shop-layout{grid-template-columns:1fr;}
  .filters{border-bottom:1px solid var(--line);padding-bottom:18px;}
  .svcs .wrap{grid-template-columns:repeat(2,1fr);}
  .svc:nth-child(2){border-right:none;}
  .svc:nth-child(1),.svc:nth-child(2){border-bottom:1px solid var(--line);}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .wrap,.wrap-n{padding:0 22px;}
  .hdr-in{padding:16px 22px;}
  .pgrid{grid-template-columns:repeat(2,1fr);}
  .padd{opacity:1;transform:none;}
  .foot-grid{grid-template-columns:1fr;}
  .badge{right:10px;bottom:10px;font-size:9.5px;padding:10px 13px;letter-spacing:.1em;}
  .hdr-r .hdr-hide{display:none;}
}