:root{
    --cream:#F4EEE1;
    --cream-deep:#EBE2CC;
    --ink:#2B2620;
    --ink-soft:#5B5348;
    --paprika:#B8441F;
    --paprika-deep:#8F3417;
    --sage:#8B9A7C;
    --sage-deep:#69765C;
    --mustard:#C89A3D;
    --salt:#FBF8F1;
    --pepper:#332C24;
    --card:#FFFFFF;
    --line: rgba(43,38,32,0.12);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces', serif;
    font-weight:600;
    letter-spacing:-0.01em;
    margin:0;
  }
  a{color:inherit;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

  /* spice strip signature element */
  .spice-strip{display:flex;height:10px;width:100%;}
  .spice-strip span{flex:1;}
  .spice-strip .c1{background:var(--paprika);}
  .spice-strip .c2{background:var(--mustard);}
  .spice-strip .c3{background:var(--salt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .spice-strip .c4{background:var(--pepper);}
  .spice-strip .c5{background:var(--sage);}

  /* nav */
  header.nav{
    position:sticky;top:0;z-index:50;
    background:rgba(244,238,225,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:1180px;margin:0 auto;padding:18px 32px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .logo{
    font-family:'Fraunces', serif;font-weight:600;font-size:22px;
    letter-spacing:0.01em;
  }
  .logo em{font-style:italic;font-weight:500;color:var(--paprika);}
  nav.links{display:flex;gap:28px;font-size:14px;font-weight:500;}
  nav.links a{text-decoration:none;color:var(--ink-soft);transition:color .2s;}
  nav.links a:hover{color:var(--paprika);}

  /* hero */
  .hero{
    padding:88px 0 64px;
    position:relative;
    overflow:hidden;
  }
  .hero-grid{
    display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;
  }
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12px;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--paprika-deep);font-weight:600;margin-bottom:22px;
  }
  .eyebrow::before{content:"";width:22px;height:1px;background:var(--paprika);}
  .hero h1{font-size:56px;line-height:1.04;margin-bottom:24px;}
  .hero h1 .accent{color:var(--paprika);font-style:italic;font-weight:500;}
  .hero p.lede{font-size:18px;line-height:1.6;color:var(--ink-soft);max-width:480px;margin-bottom:32px;}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 26px;border-radius:2px;font-weight:600;font-size:14px;
    text-decoration:none;transition:transform .15s ease, box-shadow .15s ease;
    border:1px solid transparent;
  }
  .btn-primary{background:var(--pepper);color:var(--salt);}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(43,38,32,0.25);}
  .btn-ghost{border-color:var(--ink);color:var(--ink);}
  .btn-ghost:hover{background:var(--ink);color:var(--cream);}

  .hero-photo{position:relative;}
  .hero-photo img{
    border-radius:4px;
    box-shadow:0 30px 60px -20px rgba(43,38,32,0.35);
  }
  .hero-photo .tag{
    position:absolute;bottom:-18px;left:-18px;
    background:var(--salt);border:1px solid var(--line);
    padding:14px 20px;border-radius:2px;
    font-size:13px;font-weight:600;
    box-shadow:0 12px 24px rgba(43,38,32,0.15);
  }
  .hero-photo .tag span{display:block;font-family:'Fraunces',serif;font-size:20px;font-weight:600;color:var(--paprika);}

  /* section shell */
  section.product{padding:96px 0;}
  section.product:nth-of-type(even){background:var(--cream-deep);}
  .product-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    margin-bottom:44px;gap:24px;flex-wrap:wrap;
  }
  .model-tag{
    font-family:'Fraunces',serif;font-size:15px;color:var(--paprika-deep);
    font-weight:600;letter-spacing:0.04em;margin-bottom:10px;display:block;
  }
  .product-title{font-size:38px;line-height:1.1;max-width:560px;}
  .price-block{text-align:right;}
  .price{font-family:'Fraunces',serif;font-size:34px;font-weight:600;color:var(--pepper);}
  .price-note{font-size:12px;color:var(--ink-soft);}

  .product-body{
    display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:start;
  }
  .gallery-main{
    border-radius:4px;overflow:hidden;
    box-shadow:0 20px 50px -20px rgba(43,38,32,0.3);
    aspect-ratio:1/1;background:#fff;
  }
  .gallery-main img{width:100%;height:100%;object-fit:cover;}
  .gallery-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px;}
  .gallery-thumbs img{
    border-radius:3px;cursor:pointer;aspect-ratio:1/1;object-fit:cover;
    border:2px solid transparent;transition:border-color .15s;
  }
  .gallery-thumbs img.active{border-color:var(--paprika);}

  .feature-list{list-style:none;padding:0;margin:0 0 30px;}
  .feature-list li{
    display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);
    font-size:15px;line-height:1.5;
  }
  .feature-list li:first-child{padding-top:0;}
  .feature-list .dot{
    flex:none;width:8px;height:8px;border-radius:50%;background:var(--paprika);
    margin-top:7px;
  }
  .specs{
    display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;
    font-size:13px;margin-bottom:30px;padding:20px;background:var(--card);
    border-radius:4px;border:1px solid var(--line);
  }
  .specs div span{display:block;}
  .specs .k{color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.06em;font-size:11px;margin-bottom:3px;}
  .specs .v{font-weight:600;font-family:'Fraunces',serif;font-size:15px;}

  .color-swatches{display:flex;gap:10px;margin-bottom:26px;}
  .swatch{
    width:44px;height:44px;border-radius:50%;cursor:pointer;
    border:3px solid transparent;transition:border-color .15s, transform .15s;
    position:relative;
  }
  .swatch.active{border-color:var(--pepper);transform:scale(1.05);}
  .swatch-label{font-size:12px;color:var(--ink-soft);margin-top:6px;text-align:center;}
  .swatch-group{display:flex;gap:18px;margin-bottom:26px;}
  .swatch-item{text-align:center;}

  /* about */
  .about{padding:100px 0;text-align:center;}
  .about h2{font-size:34px;max-width:640px;margin:0 auto 20px;line-height:1.2;}
  .about p{max-width:560px;margin:0 auto;color:var(--ink-soft);font-size:16px;line-height:1.7;}
  .about-marks{
    display:flex;justify-content:center;gap:48px;margin-top:52px;flex-wrap:wrap;
  }
  .about-marks div{text-align:center;max-width:160px;}
  .about-marks .num{font-family:'Fraunces',serif;font-size:30px;color:var(--paprika);font-weight:600;}
  .about-marks .lbl{font-size:13px;color:var(--ink-soft);margin-top:4px;}

  footer{
    background:var(--pepper);color:var(--salt);padding:56px 0 32px;
  }
  .footer-grid{
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;
    padding-bottom:32px;border-bottom:1px solid rgba(251,248,241,0.15);margin-bottom:24px;
  }
  footer .logo{color:var(--salt);}
  footer .logo em{color:var(--mustard);}
  footer p{color:rgba(251,248,241,0.65);font-size:14px;max-width:320px;line-height:1.6;}
  .footer-cols{display:flex;gap:64px;flex-wrap:wrap;}
  .footer-col h4{font-size:13px;text-transform:uppercase;letter-spacing:0.08em;color:rgba(251,248,241,0.5);margin-bottom:14px;}
  .footer-col a{display:block;font-size:14px;margin-bottom:10px;color:rgba(251,248,241,0.85);text-decoration:none;}
  .footer-col a:hover{color:var(--mustard);}
  .footer-bottom{
    display:flex;justify-content:space-between;font-size:12px;color:rgba(251,248,241,0.45);
    flex-wrap:wrap;gap:10px;
  }

  @media (max-width:860px){
    .hero-grid{grid-template-columns:1fr;}
    .hero h1{font-size:38px;}
    .product-body{grid-template-columns:1fr;}
    .product-head{flex-direction:column;align-items:flex-start;}
    .price-block{text-align:left;}
    nav.links{display:none;}
  }

/* ---------- Cart & Checkout ---------- */
.cart-btn{
  position:relative;background:none;border:none;cursor:pointer;
  display:flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;
  font-weight:600;font-size:14px;color:var(--ink);padding:6px;
}
.cart-btn svg{width:20px;height:20px;}
#cart-badge{
  position:absolute;top:-4px;right:-4px;background:var(--paprika);color:#fff;
  font-size:10px;font-weight:700;width:17px;height:17px;border-radius:50%;
  align-items:center;justify-content:center;display:none;
}

.overlay{
  position:fixed;inset:0;background:rgba(43,38,32,0.45);z-index:200;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.overlay.open{opacity:1;pointer-events:auto;}

#cart-drawer{
  position:fixed;top:0;right:0;height:100%;width:420px;max-width:92vw;
  background:var(--salt);z-index:210;transform:translateX(100%);
  transition:transform .3s ease;display:flex;flex-direction:column;
  box-shadow:-20px 0 40px rgba(0,0,0,0.15);
}
#cart-drawer.open{transform:translateX(0);}
.cart-header{
  padding:22px 24px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
}
.cart-header h3{font-size:20px;}
.cart-header button{background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink-soft);}
#cart-items{flex:1;overflow-y:auto;padding:20px 24px;}
.cart-empty{color:var(--ink-soft);font-size:14px;}
.cart-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start;}
.cart-item img{width:64px;height:64px;object-fit:cover;border-radius:4px;flex:none;}
.cart-item-info{flex:1;}
.cart-item-name{font-size:14px;font-weight:600;}
.cart-item-variant{font-weight:400;color:var(--ink-soft);}
.cart-item-price{font-size:13px;color:var(--ink-soft);margin:2px 0 8px;}
.qty-stepper{display:flex;align-items:center;gap:10px;}
.qty-stepper button{
  width:24px;height:24px;border-radius:50%;border:1px solid var(--line);
  background:#fff;cursor:pointer;font-size:14px;line-height:1;
}
.cart-item-remove{background:none;border:none;font-size:18px;color:var(--ink-soft);cursor:pointer;}
.cart-footer{padding:20px 24px;border-top:1px solid var(--line);}
.cart-subtotal-row{display:flex;justify-content:space-between;font-size:15px;font-weight:600;margin-bottom:14px;}
#cart-checkout-btn{width:100%;justify-content:center;}
#cart-checkout-btn:disabled{opacity:0.4;cursor:not-allowed;}

#checkout-overlay{z-index:300;}
#checkout-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.95);
  background:var(--salt);width:520px;max-width:92vw;max-height:88vh;overflow-y:auto;
  border-radius:6px;z-index:310;opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  box-shadow:0 40px 80px rgba(0,0,0,0.3);
}
#checkout-overlay.open #checkout-modal{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
.checkout-head{padding:22px 28px 0;display:flex;justify-content:space-between;align-items:center;}
.checkout-head button{background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink-soft);}
#checkout-stepper{display:flex;gap:6px;padding:18px 28px;font-size:11px;color:var(--ink-soft);}
.checkout-step-dot{display:flex;align-items:center;gap:6px;flex:1;}
.checkout-step-dot span{
  width:20px;height:20px;border-radius:50%;background:var(--line);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink-soft);
  flex:none;
}
.checkout-step-dot.active span{background:var(--paprika);color:#fff;}
.checkout-step-dot.done span{background:var(--sage);color:#fff;}
#checkout-body{padding:8px 28px 28px;}
#checkout-body h3{font-size:20px;margin-bottom:16px;}
.checkout-form label{display:block;font-size:12px;color:var(--ink-soft);margin:12px 0 4px;text-transform:uppercase;letter-spacing:0.04em;}
.checkout-form input{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:3px;
  font-family:'Inter',sans-serif;font-size:14px;background:#fff;
}
.checkout-form input:disabled{background:var(--cream-deep);color:var(--ink-soft);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.option-card{
  display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);
  border-radius:4px;margin-bottom:10px;cursor:pointer;background:#fff;
}
.option-card.selected{border-color:var(--paprika);background:rgba(184,68,31,0.05);}
.option-price{margin-left:auto;font-weight:600;}
.muted{color:var(--ink-soft);font-size:13px;}
.checkout-nav{display:flex;justify-content:space-between;gap:12px;margin-top:20px;}
.summary-block{padding:14px 0;border-bottom:1px solid var(--line);}
.summary-block strong{font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-soft);}
.summary-line{display:flex;justify-content:space-between;font-size:14px;margin-top:8px;}
.summary-total{display:flex;justify-content:space-between;padding:18px 0;font-family:'Fraunces',serif;font-size:22px;font-weight:600;}
.demo-notice{
  margin-top:18px;padding:16px;background:rgba(200,154,61,0.15);
  border:1px solid var(--mustard);border-radius:4px;font-size:13px;line-height:1.6;
}

/* Legal pages */
.legal-page{padding:70px 0 100px;}
.legal-page h1{font-size:38px;margin-bottom:8px;}
.legal-page .updated{color:var(--ink-soft);font-size:13px;margin-bottom:40px;display:block;}
.legal-page h2{font-family:'Fraunces',serif;font-size:22px;margin:36px 0 12px;}
.legal-page p, .legal-page li{font-size:15px;line-height:1.7;color:var(--ink-soft);}
.legal-page ul{padding-left:20px;}
.legal-page strong{color:var(--ink);}
.legal-page a{color:var(--paprika-deep);}
.todo-note{
  background:rgba(184,68,31,0.08);border:1px dashed var(--paprika);
  padding:14px 18px;border-radius:4px;font-size:13px;margin:16px 0;color:var(--paprika-deep);
}