/* =====================================================================
   SHOP.CSS — shared styling for cart.html and checkout.html
   Design tokens, fonts and component styles are copied verbatim from
   index.html so the Cart and Checkout pages match the rest of the site
   exactly. index.html itself is untouched — this file only serves the
   two new pages.
===================================================================== */
:root{
  --cream:#f6efe0;
  --paper:#fbf6ec;
  --wine:#6b1f2a;
  --wine-dk:#4d1620;
  --gold:#b6893f;
  --ink:#241f1c;
  --sage:#5c6b4f;
  --line:rgba(36,31,28,.14);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Jost',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Cormorant Garamond',serif;}
.mono{font-family:'DM Mono',monospace;}
a{color:inherit;}
img{display:block;max-width:100%;}

body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background-image:radial-gradient(rgba(107,31,42,.05) 1px, transparent 1.3px);
  background-size:22px 22px;
  pointer-events:none;
}

/* header (matches index.html header) */
header{
  position:sticky; top:0; z-index:50;
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
}
.wordmark{
  display:flex; align-items:center; gap:11px;
  font-size:24px; letter-spacing:.06em; font-weight:600;
  text-decoration:none; color:var(--wine);
}
.wordmark img{
  width:42px; height:42px; border-radius:50%;
  object-fit:cover; box-shadow:0 0 0 1px var(--line);
}
.wordmark span{color:var(--gold);}
.head-back{
  display:flex; align-items:center; gap:8px;
  text-decoration:none; color:var(--ink); opacity:.78;
  font-size:13px; letter-spacing:.04em; transition:opacity .2s;
}
.head-back:hover{opacity:1; color:var(--wine);}
.head-back svg{width:16px; height:16px;}

/* buttons (identical to index.html) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:3px;
  font-size:13.5px; letter-spacing:.05em;
  text-decoration:none; border:1px solid var(--ink); transition:all .2s;
  cursor:pointer; background:none; font-family:'Jost',sans-serif;
}
.btn-solid{background:var(--ink); color:var(--paper);}
.btn-solid:hover{background:var(--wine); border-color:var(--wine);}
.btn-ghost{background:transparent; color:var(--ink);}
.btn-ghost:hover{border-color:var(--wine); color:var(--wine);}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn:disabled:hover{background:var(--ink); border-color:var(--ink);}

/* page shell */
.shop-main{max-width:1180px; margin:0 auto; padding:56px 24px 100px;}
.shop-eyebrow{
  font-family:'DM Mono',monospace; font-size:12px; letter-spacing:.18em;
  color:var(--wine); margin:0 0 12px; display:flex; align-items:center; gap:10px;
}
.shop-eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);display:inline-block;}
.shop-title{font-size:clamp(28px,3.6vw,42px); margin:0 0 34px; font-weight:600;}

/* cart / checkout two-column layout */
.shop-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:44px; align-items:start;}

/* cart list (reuses the same row markup/classes as the cart drawer) */
.cart-list{background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:8px 22px;}
.cart-row{display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line);}
.cart-row:last-child{border-bottom:none;}
.cart-thumb{position:relative; width:84px; height:106px; flex:0 0 auto; border-radius:3px; overflow:hidden; background:#eee2c9;}
.cart-thumb img{width:100%; height:100%; object-fit:cover;}
.cart-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; justify-content:center;}
.cart-info .ci-code{font-family:'DM Mono',monospace; font-size:11px; opacity:.55; margin:0;}
.cart-info .ci-title{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:19px; font-weight:600; margin:0;}
.cart-info .ci-price{font-family:'DM Mono',monospace; font-size:13px; color:var(--wine-dk);}
.cart-row-foot{display:flex; align-items:center; justify-content:space-between; margin-top:4px; gap:14px; flex-wrap:wrap;}
.qty-stepper{display:flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--cream);}
.qty-stepper button{
  width:30px; height:30px; border:none; background:none; cursor:pointer;
  font-size:15px; color:var(--ink); display:flex; align-items:center; justify-content:center;
}
.qty-stepper button:hover{background:var(--line);}
.qty-stepper span{width:28px; text-align:center; font-family:'DM Mono',monospace; font-size:12.5px;}
.cart-remove{background:none; border:none; cursor:pointer; color:var(--wine); opacity:.65; padding:4px; display:flex; align-items:center; gap:6px; font-size:12px; letter-spacing:.03em;}
.cart-remove:hover{opacity:1;}
.cart-remove svg{width:15px; height:15px;}
.cart-line-total{font-family:'DM Mono',monospace; font-size:13.5px; color:var(--ink); font-weight:500;}

.shop-empty{
  text-align:center; padding:70px 24px; display:flex; flex-direction:column; align-items:center; gap:14px;
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
}
.shop-empty svg{width:44px; height:44px; color:var(--gold);}
.shop-empty p{margin:0; opacity:.7; max-width:34ch; font-size:14.5px;}

/* order summary panel (used on both cart + checkout pages) */
.summary-card{
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:26px 24px; position:sticky; top:100px;
}
.summary-card h3{margin:0 0 18px; font-size:20px; font-weight:600;}
.summary-row{display:flex; justify-content:space-between; font-size:14px; padding:8px 0; opacity:.78;}
.summary-row.total{
  border-top:1px solid var(--line); margin-top:8px; padding-top:16px;
  font-size:16px; opacity:1; font-weight:500;
}
.summary-row.total b{font-family:'DM Mono',monospace; font-size:19px; color:var(--wine-dk);}
.summary-card .btn{width:100%; margin-top:18px;}
.summary-card .btn + .btn{margin-top:10px;}
.summary-mini-list{margin:0 0 6px; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px;}
.summary-mini-list li{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; opacity:.75;}
.summary-mini-list li span:first-child{max-width:70%;}

/* checkout form */
.checkout-form{background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:30px 28px;}
.form-section-title{font-size:15px; font-weight:600; margin:0 0 18px; letter-spacing:.02em;}
.form-section-title:not(:first-child){margin-top:8px; padding-top:26px; border-top:1px solid var(--line);}
.field{margin-bottom:18px;}
.field label{display:block; font-size:12.5px; letter-spacing:.03em; margin-bottom:7px; opacity:.8;}
.field label .req{color:var(--wine); margin-left:2px;}
.field input,
.field textarea{
  width:100%; border:1px solid var(--line); background:var(--cream);
  border-radius:4px; padding:12px 14px; font-family:'Jost',sans-serif;
  font-size:14px; color:var(--ink); transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus,
.field textarea:focus{outline:none; border-color:var(--wine); box-shadow:0 0 0 3px rgba(107,31,42,.1);}
.field textarea{resize:vertical; min-height:90px;}
.field.error input,
.field.error textarea{border-color:#a4302f; background:#fdf2f1;}
.field-error-msg{display:none; color:#a4302f; font-size:12px; margin-top:6px;}
.field.error .field-error-msg{display:block;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.honeypot{position:absolute; left:-9999px; top:-9999px; opacity:0; pointer-events:none;}

.form-status{
  margin-top:16px; padding:14px 16px; border-radius:6px; font-size:13.5px; display:none;
}
.form-status.show{display:block;}
.form-status.error{background:#fdf2f1; color:#a4302f; border:1px solid rgba(164,48,47,.3);}

.order-success{
  text-align:center; padding:60px 24px; background:var(--paper);
  border:1px solid var(--line); border-radius:10px;
}
.order-success svg{width:52px; height:52px; color:var(--sage); margin:0 auto 18px;}
.order-success h2{margin:0 0 12px; font-size:clamp(24px,3vw,32px); font-weight:600;}
.order-success p{margin:0 auto; max-width:48ch; opacity:.78; font-size:15px; line-height:1.7;}
.order-success .btn{margin-top:26px;}

footer.shop-footer{
  border-top:1px solid var(--line); padding:26px 24px; text-align:center;
  font-family:'DM Mono',monospace; font-size:12px; opacity:.55;
}

@media (max-width:900px){
  .shop-grid{grid-template-columns:1fr;}
  .summary-card{position:static;}
  .field-row{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .shop-main{padding:36px 16px 80px;}
  .header-inner{padding:14px 16px;}
  .cart-thumb{width:64px; height:80px;}
  .cart-info .ci-title{font-size:16px;}
  .checkout-form{padding:24px 18px;}
  .cart-list{padding:4px 16px;}
}