/* =========================================================
   VEERJI MASALA — cart.css
   Cart-page only styles. Loads AFTER style.css so it can
   reuse tokens (--cream, --ink, --saffron, --line, etc.)
   ========================================================= */

/* ---------- 1. Header override for cart page ---------- */
body.cart-page .site-header{
  background:rgba(250,246,238,.94);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
body.cart-page .site-header::after{display:none}
body.cart-page .brand-mark{color:var(--saffron)}
body.cart-page .cart-btn{
  border-color:var(--line);
  background:rgba(20,16,13,.04);
}
body.cart-page .cart-btn:hover{background:rgba(20,16,13,.1)}
body.cart-page .cart-ico{color:var(--ink)}
body.cart-page .nav-list > li > a:hover,
body.cart-page .nav-link:hover{color:var(--saffron)}

/* ---------- 2. Cart page shell ---------- */
.cart-main{
  padding-top:calc(var(--header-h) + clamp(28px, 4vw, 56px));
  padding-bottom:clamp(60px, 8vw, 110px);
  min-height:calc(100vh - 320px);
  background:linear-gradient(180deg, var(--cream) 0%, #f7f1e5 100%);
}

/* ---------- 3. Cart heading ---------- */
.cart-head{
  margin-bottom:clamp(28px, 4vw, 44px);
  max-width:760px;
}

.cart-breadcrumb{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:20px;
}
.cart-breadcrumb a{
  color:var(--saffron);
  transition:color .3s;
}
.cart-breadcrumb a:hover{color:var(--maroon)}
.cart-breadcrumb .sep{opacity:.45}

.cart-title{
  font-size:clamp(2.4rem, 5.4vw, 4rem);
  line-height:1.02;
  text-wrap:balance;
}
.cart-title em{font-style:italic;color:var(--saffron)}

.cart-sub{
  margin-top:14px;
  color:var(--muted);
  font-size:.94rem;
  max-width:52ch;
}

/* ---------- 4. Layout ---------- */
.cart-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 380px;
  gap:clamp(24px, 4vw, 48px);
  align-items:start;
}

.cart-list{display:grid;gap:16px;min-width:0}

/* ---------- 5. Cart item card ---------- */
.cart-item{
  display:grid;
  grid-template-columns:118px minmax(0, 1fr);
  gap:clamp(14px, 2vw, 22px);
  padding:clamp(14px, 2vw, 20px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-s);
  transition:box-shadow .45s var(--ease), transform .45s var(--ease);
}
.cart-item:hover{box-shadow:var(--shadow-m);transform:translateY(-2px)}

.ci-media{
  aspect-ratio:4/5;
  border-radius:14px;
  overflow:hidden;
  background:var(--cream-2);
}
.ci-media img{width:100%;height:100%;object-fit:cover}

.ci-body{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

.ci-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.ci-name{
  font-family:var(--serif);
  font-size:clamp(1.05rem, 1.5vw, 1.22rem);
  font-weight:500;
  line-height:1.25;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
}
.ci-size{
  margin-top:5px;
  font-size:.74rem;
  letter-spacing:.05em;
  color:var(--muted);
}

.ci-remove{
  flex-shrink:0;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--muted);
  font-size:1.25rem;
  line-height:1;
  transition:background .3s, color .3s, transform .3s;
}
.ci-remove:hover{background:rgba(192,57,43,.1);color:var(--danger);transform:rotate(90deg)}

.ci-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-top:auto;
}

/* Quantity control */
.qty-control{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  background:#fff;
}

.qty-btn{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  font-size:1.12rem;
  font-weight:400;
  color:var(--ink);
  transition:background .25s var(--ease), color .25s var(--ease);
  user-select:none;
}
.qty-btn:hover{background:var(--cream-2)}
.qty-btn:active{background:var(--sand)}
.qty-btn:disabled{opacity:.35;pointer-events:none}

.qty-input{
  width:44px;
  height:38px;
  border:0;
  text-align:center;
  font:inherit;
  font-size:.92rem;
  font-weight:600;
  background:transparent;
  color:var(--ink);
  -moz-appearance:textfield;
  appearance:textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-input:focus{outline:none;background:var(--cream-2)}

/* Price block */
.ci-price{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  text-align:right;
}
.ci-unit{
  font-size:.72rem;
  letter-spacing:.04em;
  color:var(--muted);
}
.ci-total{
  font-family:var(--serif);
  font-size:clamp(1.05rem, 1.4vw, 1.24rem);
  font-weight:500;
  color:var(--ink);
  line-height:1;
}

/* ---------- 6. Summary panel ---------- */
.cart-summary{
  position:sticky;
  top:calc(var(--header-h) + 24px);
  padding:clamp(22px, 3vw, 30px) clamp(20px, 3vw, 28px);
  background:var(--ink);
  color:var(--cream);
  border-radius:22px;
  box-shadow:var(--shadow-l);
}

.cart-summary h3{
  font-family:var(--serif);
  font-size:1.32rem;
  font-weight:500;
  color:var(--cream);
  margin-bottom:22px;
}

.summary-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:11px 0;
  font-size:.88rem;
  color:rgba(250,246,238,.7);
  border-bottom:1px solid rgba(250,246,238,.1);
}
.summary-row b{color:var(--cream);font-weight:500;white-space:nowrap}
.summary-row--muted b{
  font-size:.78rem;
  font-weight:400;
  color:rgba(250,246,238,.55);
  white-space:normal;
  text-align:right;
}

.summary-total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-top:6px;
  padding:20px 0 4px;
}
.summary-total span{
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--saffron-2);
}
.summary-total b{
  font-family:var(--serif);
  font-size:clamp(1.7rem, 3.4vw, 2rem);
  font-weight:500;
  color:var(--cream);
  line-height:1;
}

.cart-summary .btn-wa{
  width:100%;
  justify-content:center;
  margin-top:22px;
}
.cart-summary .btn-wa:disabled{
  background:rgba(250,246,238,.14);
  color:rgba(250,246,238,.38);
  box-shadow:none;
  cursor:not-allowed;
  transform:none;
}

.summary-links{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:20px;
  font-size:.74rem;
}
.summary-links a,
.summary-links button{
  color:rgba(250,246,238,.6);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .3s, border-color .3s;
}
.summary-links a:hover,
.summary-links button:hover{
  color:var(--cream);
  border-color:var(--saffron-2);
}

/* ---------- 7. Empty state ---------- */
.cart-empty{
  text-align:center;
  padding:clamp(56px, 10vw, 110px) clamp(20px, 4vw, 48px);
  background:#fff;
  border:1px dashed rgba(20,16,13,.16);
  border-radius:22px;
}

.cart-empty-icon{
  width:84px;
  height:84px;
  margin:0 auto 26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--cream-2);
  color:var(--saffron);
}
.cart-empty-icon svg{width:36px;height:36px}

.cart-empty h3{
  font-size:clamp(1.6rem, 3vw, 2.1rem);
  font-weight:500;
  margin-bottom:12px;
}
.cart-empty p{
  color:var(--muted);
  font-size:.92rem;
  max-width:44ch;
  margin:0 auto 28px;
  line-height:1.65;
}
.cart-empty .btn-wa{
  background:var(--ink);
  box-shadow:0 18px 40px -16px rgba(20,16,13,.55);
}
.cart-empty .btn-wa:hover{background:var(--saffron)}

/* ---------- 8. Responsive ---------- */
@media (max-width:1024px){
  .cart-layout{grid-template-columns:minmax(0, 1fr)}
  .cart-summary{position:static}
}

@media (max-width:720px){
  .cart-item{
    grid-template-columns:88px minmax(0, 1fr);
    gap:14px;
    padding:14px;
    border-radius:16px;
  }
  .ci-media{border-radius:12px}
  .ci-name{font-size:1.02rem}
  .ci-size{font-size:.7rem}
  .ci-remove{width:30px;height:30px;font-size:1.15rem}

  .qty-btn{width:34px;height:34px;font-size:1rem}
  .qty-input{width:38px;height:34px;font-size:.88rem}

  .ci-unit{display:none}
  .ci-total{font-size:1.02rem}

  .cart-summary{padding:22px 20px;border-radius:18px}
  .cart-summary h3{font-size:1.2rem;margin-bottom:18px}
}

@media (max-width:480px){
  .cart-item{
    grid-template-columns:72px minmax(0, 1fr);
    gap:12px;
    padding:12px;
  }
  .ci-foot{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .ci-price{
    align-items:flex-start;
    text-align:left;
    flex-direction:row;
    justify-content:space-between;
    align-items:baseline;
  }
  .ci-price::before{
    content:"Subtotal";
    font-size:.7rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
    font-weight:600;
  }
  .ci-total{order:2}
  .cart-breadcrumb{font-size:.66rem}
  .summary-links{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ---------- 9. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .cart-item,
  .ci-remove,
  .qty-btn,
  .summary-links a,
  .summary-links button{
    transition-duration:.001ms !important;
  }
  .cart-item:hover{transform:none}
  .ci-remove:hover{transform:none}
}