:root {
  --c-bg:#FAFAF9; --c-bg-alt:#F2F2F0; --c-paper:#FFFFFF;
  --c-grey-50:#F6F6F4; --c-grey-100:#ECECEA; --c-grey-200:#D9D8D5;
  --c-grey-300:#BFBDB9; --c-grey-400:#9B9994; --c-grey-500:#76746F;
  --c-grey-600:#5C5B58; --c-charcoal:#2A2A28; --c-ink:#0F0F0E;
  --font-sans:'Inter',system-ui,-apple-system,sans-serif;
  --t-display:-0.04em; --t-eyebrow:0.22em; --t-button:0.16em;
  --pad-x:clamp(20px,4vw,80px); --max-w:1440px;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-inout:cubic-bezier(0.65,0,0.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);font-weight:400;font-size:16px;line-height:1.6;color:var(--c-charcoal);background:var(--c-bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-sans);font-weight:400;color:var(--c-ink);letter-spacing:var(--t-display);line-height:1.02;margin:0 0 .4em}
p{margin:0 0 1em;color:var(--c-grey-600)}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;padding:0}
input,select,textarea{font:inherit;color:inherit}
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x);width:100%}
.eyebrow{display:inline-block;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:var(--t-eyebrow);color:var(--c-ink)}
::selection{background:var(--c-ink);color:var(--c-paper)}

/* HEADER */
.header{position:sticky;top:0;z-index:50;background:rgba(250,250,249,.78);backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid transparent;transition:border-color .3s}
.header.scrolled{border-bottom-color:var(--c-grey-200)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad-x);max-width:var(--max-w);margin:0 auto;gap:32px}
.logo{display:inline-flex;align-items:baseline;font-size:18px;font-weight:500;letter-spacing:.04em;color:var(--c-ink)}
.logo::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c-ink);margin-left:4px}
.nav{display:flex;gap:40px;font-size:13px;color:var(--c-charcoal)}
.nav a{position:relative;padding:4px 0}
.nav a.active::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;background:var(--c-ink)}
.nav a:hover{color:var(--c-ink)}
.cart-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:var(--t-button);text-transform:uppercase;color:var(--c-ink);
  padding:8px 0;background:transparent;border:none;cursor:pointer;font-family:inherit;
  position:relative;
}
.cart-btn:hover .cart-icon{transform:translateY(-1px)}
.cart-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transition:transform .3s var(--ease-out);position:relative}
.cart-icon svg{width:18px;height:18px;color:var(--c-ink);stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cart-icon .pulse{position:absolute;inset:-4px;border-radius:50%;background:var(--c-ink);opacity:0;pointer-events:none}
.cart-icon.bump{animation:bagBump .5s var(--ease-out)}
@keyframes bagBump{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-4px) scale(1.08)}60%{transform:translateY(0) scale(.96)}100%{transform:translateY(0) scale(1)}}
.cart-count{color:var(--c-grey-500);font-variant-numeric:tabular-nums}
.cart-label{display:inline}
@media (max-width:480px){.cart-label{display:none}}

/* ============== CART DRAWER ============== */
#objet-scrim{
  position:fixed;inset:0;background:rgba(15,15,14,.42);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;z-index:200;
  transition:opacity .45s var(--ease-inout);
}
#objet-scrim.open{opacity:1;pointer-events:auto}

#objet-drawer-wrap{
  position:fixed;left:0;right:0;bottom:0;z-index:201;
  display:flex;justify-content:center;
  pointer-events:none;
}
#objet-drawer{
  pointer-events:auto;
  width:100%;max-width:720px;
  background:var(--c-paper);
  border-top-left-radius:12px;border-top-right-radius:12px;
  max-height:88vh;display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .65s cubic-bezier(0.16,1,0.3,1);
  box-shadow:0 -30px 80px -20px rgba(15,15,14,.25);
  will-change:transform;
}
#objet-drawer.open{transform:translateY(0)}

.drawer-handle{
  width:48px;height:4px;background:var(--c-grey-300);border-radius:2px;
  margin:14px auto 0;
}

.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px clamp(20px,4vw,40px) 20px;
  border-bottom:1px solid var(--c-grey-200);
}
.drawer-head-text{display:flex;flex-direction:column;gap:4px}
.drawer-eyebrow{font-size:10px;font-weight:500;letter-spacing:var(--t-eyebrow);text-transform:uppercase;color:var(--c-grey-500)}
.drawer-title{font-size:22px;font-weight:400;letter-spacing:-.02em;color:var(--c-ink);margin:0;font-variant-numeric:tabular-nums}
.drawer-close{
  width:40px;height:40px;display:grid;place-items:center;
  color:var(--c-ink);border:1px solid var(--c-grey-200);border-radius:50%;
  transition:background .2s,border-color .2s,transform .2s;
}
.drawer-close:hover{background:var(--c-ink);color:var(--c-paper);border-color:var(--c-ink)}
.drawer-close svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}

.drawer-list{
  flex:1;overflow-y:auto;padding:8px clamp(20px,4vw,40px);
  display:flex;flex-direction:column;
  scrollbar-width:thin;scrollbar-color:var(--c-grey-300) transparent;
}
.drawer-list::-webkit-scrollbar{width:6px}
.drawer-list::-webkit-scrollbar-thumb{background:var(--c-grey-300);border-radius:3px}

.drawer-item{
  display:grid;grid-template-columns:80px 1fr 32px;gap:16px;
  padding:20px 0;border-bottom:1px solid var(--c-grey-100);
  align-items:center;
}
.drawer-item:last-child{border-bottom:none}
.drawer-thumb{aspect-ratio:4/5;background:var(--c-grey-100);border-radius:2px;overflow:hidden;width:80px}
.drawer-thumb img{width:100%;height:100%;object-fit:cover}
.drawer-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.drawer-cat{font-size:10px;letter-spacing:var(--t-eyebrow);text-transform:uppercase;color:var(--c-grey-500)}
.drawer-name{font-size:15px;font-weight:400;letter-spacing:-.01em;color:var(--c-ink);margin:0;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer-row{display:flex;align-items:center;justify-content:space-between;margin-top:4px;gap:12px}
.drawer-price{font-size:14px;font-weight:500;color:var(--c-ink);font-variant-numeric:tabular-nums}

.qty-stepper-sm{display:inline-flex;align-items:center;border:1px solid var(--c-grey-300);height:32px}
.qty-stepper-sm button{width:26px;height:30px;font-size:13px;color:var(--c-ink);transition:background .2s}
.qty-stepper-sm button:hover{background:var(--c-grey-100)}
.qty-stepper-sm span{min-width:24px;text-align:center;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}

.drawer-remove{
  width:28px;height:28px;color:var(--c-grey-400);
  display:grid;place-items:center;border-radius:50%;
  transition:color .2s,background .2s;
}
.drawer-remove:hover{color:var(--c-ink);background:var(--c-grey-100)}
.drawer-remove svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.6}

.drawer-foot{
  border-top:1px solid var(--c-grey-200);
  padding:24px clamp(20px,4vw,40px) calc(24px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:14px;
  background:var(--c-bg);
}
.drawer-totals{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.drawer-tot{display:flex;justify-content:space-between;font-size:13px;color:var(--c-grey-600)}
.drawer-tot.big{font-size:18px;font-weight:500;color:var(--c-ink);padding-top:12px;margin-top:4px;border-top:1px solid var(--c-grey-200);letter-spacing:-.01em}
.drawer-tot span,.drawer-tot strong{font-variant-numeric:tabular-nums}

.drawer-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:8px}
.drawer-actions .btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--c-ink);height:52px;font-size:11px;
  letter-spacing:var(--t-button);text-transform:uppercase;font-weight:500;
  border-radius:2px;color:var(--c-ink);padding:0;
}
.drawer-actions .btn-ghost::after{display:none}
.drawer-actions .btn-ghost:hover{background:var(--c-ink);color:var(--c-paper)}
.drawer-actions .btn-primary{height:52px;padding:0 20px}

.drawer-empty{
  padding:64px 24px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:14px;
}
.drawer-empty .icon{
  width:64px;height:64px;border-radius:50%;border:1px solid var(--c-grey-200);
  display:grid;place-items:center;margin-bottom:8px;color:var(--c-grey-400);
}
.drawer-empty .icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.4}
.drawer-empty h3{font-size:24px;font-weight:300;letter-spacing:-.02em;margin:0;color:var(--c-ink)}
.drawer-empty p{color:var(--c-grey-500);font-size:13px;margin:0}

/* Bottom sheet — same on all sizes, centered via wrapper */
@media(max-width:760px){.nav{display:none}}

/* PAGE HEAD (shared on shop/cart/checkout) */
.page-head{padding:clamp(40px,6vw,96px) 0 clamp(24px,4vw,48px)}
.page-head-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x);display:flex;flex-direction:column;gap:12px}
.page-title{font-size:clamp(2.6rem,6vw,5rem);font-weight:300;letter-spacing:-.04em;line-height:.96;color:var(--c-ink);margin:0}
.page-sub{font-size:14px;color:var(--c-grey-500);max-width:60ch}

/* FOOTER */
.footer{background:var(--c-bg);padding:80px 0 32px;border-top:1px solid var(--c-grey-200);margin-top:120px}
.footer-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x);display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.footer h3{font-size:24px;font-weight:300;letter-spacing:-.02em;margin:0 0 8px}
.footer-h{font-size:11px;font-weight:500;letter-spacing:var(--t-eyebrow);text-transform:uppercase;color:var(--c-ink);margin-bottom:16px}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:8px}
.footer a{font-size:13px;color:var(--c-grey-600)}
.footer a:hover{color:var(--c-ink)}
.footer-bottom{max-width:var(--max-w);margin:64px auto 0;padding:24px var(--pad-x) 0;border-top:1px solid var(--c-grey-200);display:flex;justify-content:space-between;font-size:11px;letter-spacing:var(--t-eyebrow);text-transform:uppercase;color:var(--c-grey-500);flex-wrap:wrap;gap:8px}
@media (max-width:900px){.footer-inner{grid-template-columns:1fr 1fr;gap:32px}}

/* BUTTONS */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--c-ink);color:var(--c-paper);padding:16px 28px;font-size:12px;font-weight:500;letter-spacing:var(--t-button);text-transform:uppercase;border-radius:2px;transition:background .3s,transform .2s}
.btn-primary:hover{background:var(--c-charcoal);transform:translateY(-2px);color:var(--c-paper)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:var(--t-button);text-transform:uppercase;color:var(--c-ink);position:relative;padding:16px 4px}
.btn-ghost::after{content:'';position:absolute;left:4px;right:4px;bottom:12px;height:1px;background:var(--c-ink);transform:scaleX(1);transform-origin:left center;transition:transform .4s var(--ease-out)}
.btn-ghost:hover::after{transform:scaleX(0);transform-origin:right center}

/* SHARED PRODUCT CARD (used in shop + related) */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(32px,4vw,64px) clamp(24px,3vw,40px)}
@media (max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){.grid{grid-template-columns:repeat(2,1fr);gap:40px 20px}}
@media (max-width:480px){.grid{grid-template-columns:1fr}}

.card{position:relative;padding:32px 0 24px;display:flex;flex-direction:column;isolation:isolate}
.card-link{display:block;color:inherit;text-decoration:none}
.card-shape{position:absolute;inset:0 -8% 25% -8%;z-index:-1;opacity:.5;pointer-events:none}
.card-shape svg{width:100%;height:100%}
.card-media{position:relative;padding:0 16px}
.card-num{position:absolute;top:-18px;left:16px;font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--c-grey-400);z-index:2}
.card-tag{position:absolute;top:-18px;right:16px;font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--c-ink);z-index:2}
.well{position:relative;width:100%;aspect-ratio:4/5;background:var(--c-grey-50);overflow:hidden;isolation:isolate}
.well img,.well video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 600ms var(--ease-inout)}
.well img{opacity:1}.well video{opacity:0}
.well.hovered img{opacity:0}.well.hovered video{opacity:1}
@media (hover:none){.well video{display:none}}
.card-meta{padding:18px 16px 0;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.card-meta-top{display:flex;flex-direction:column;gap:4px}
.cat{font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--c-grey-500)}
.title{font-size:15px;font-weight:400;color:var(--c-ink);margin:0;letter-spacing:-.005em;position:relative;display:inline-block}
.title::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--c-ink);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease-out)}
.card:hover .title::after{transform:scaleX(1)}
.price{font-size:14px;font-weight:500;color:var(--c-ink);font-variant-numeric:tabular-nums}
.price .was{text-decoration:line-through;color:var(--c-grey-400);font-weight:400;margin-right:6px;font-size:12px}
.add-btn{
  position:absolute;top:28px;right:24px;
  display:inline-flex;align-items:center;justify-content:center;
  height:38px;padding:0;
  background:var(--c-ink);color:var(--c-paper);
  font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  border-radius:999px;
  transition:max-width .7s cubic-bezier(0.16,1,0.3,1),background .3s ease,box-shadow .3s ease;
  z-index:3;cursor:pointer;font-family:inherit;
  max-width:38px;min-width:38px;overflow:hidden;
  box-shadow:0 4px 12px -4px rgba(15,15,14,0);
}
.add-btn .plus{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex-shrink:0;position:relative;
}
.add-btn .plus::before,.add-btn .plus::after{
  content:'';position:absolute;background:currentColor;top:50%;left:50%;
}
.add-btn .plus::before{width:12px;height:1.2px;transform:translate(-50%,-50%)}
.add-btn .plus::after{width:1.2px;height:12px;transform:translate(-50%,-50%);transition:transform .4s cubic-bezier(0.16,1,0.3,1)}
.add-btn .label{
  opacity:0;white-space:nowrap;
  transform:translateX(-6px);padding-right:18px;
  transition:opacity .35s ease,transform .55s cubic-bezier(0.16,1,0.3,1);
}
.card:hover .add-btn{
  max-width:220px;
  box-shadow:0 8px 20px -6px rgba(15,15,14,.25);
}
.card:hover .add-btn .label{opacity:1;transform:translateX(0);transition-delay:.15s}
.add-btn:hover{background:var(--c-charcoal)}
.add-btn:hover .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
@media (hover:none){
  .add-btn{max-width:38px}
  .add-btn .label{display:none}
}