/* ==========================================================================
   CART.CSS  —  this page only
   Tokens, fonts, --gutter, header and footer live in common.css.
   ========================================================================== */

/* ============ TOKENS ============ */
:root{
  --head-color:#19325C;
  --text-color:#3C4B64;
  --page:#F5F8FC;
  --stone:#DAD9D1;
  --stone-line:#C7C6BC;
  --sand:#C9A176;
  --chip:#E8EDF3;
  --line:#C9D0D8;

  --r-sm:6px; --r-md:8px; --r-lg:10px;
  --shell:1440px;

  /* addons popup spacing on mobile */
  --addons-inset-y:100px;
  --addons-inset-x:16px;
}
/* Body */
body,
p,
span,
div,.header-actions a,.main-nav a,
.nav-link,.mega-side-link,
.mega-links-col a,

li{
    font-family: var(--font-secondary);
    font-style: normal;
    font-weight: 400;
    line-height:24px;
    letter-spacing:0;
}
button,
input[type="button"],
input[type="submit"] {
    font-family: var(--font-secondary);
}
body{
  margin:0;background:var(--page);color:var(--text-color);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
a {
    text-decoration: none;
    color: inherit;
}
:focus-visible{outline:2px solid var(--head-color);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--shell);margin:0 auto;padding:56px var(--gutter) 80px}

/* ============ HEAD ============ */
.cart-head h1{margin:0 0 34px;font-size:34px;line-height:1.2;font-weight:400;color:var(--head-color)}
.cart-head hr{border:0;border-top:1px solid var(--line);margin:0 0 38px}

/* inline status line for cart errors (shown by the page JS) */
.cart-msg{margin:0 0 14px;font-size:14px;display:none}
.cart-msg.is-error{display:block;color:#B3261E}
.cart-msg.is-success{display:block;color:#1E7A46}

/* ============ LAYOUT ============ */
.cart{display:grid;grid-template-columns:minmax(0,1fr) 424px;column-gap:110px;align-items:start;}

/* ============ ITEMS ============ */
.items{min-width:0}
.item{
  display:grid;
  /* column 2 takes the free space (was minmax(0,max-content), which let a
     long product name widen the column and move the stepper and Remove to
     a different spot on every row) */
  grid-template-columns:112px minmax(0,1fr) auto auto;
  column-gap:32px;row-gap:14px;align-items:center;padding:0 0 34px;
}
.item+.item{border-top:1px solid var(--line);padding-top:34px}
.item.is-out{display:none}
.item.is-busy{opacity:.55;pointer-events:none}   /* while a qty/remove request is in flight */

.item .shot{grid-row:1/3;width:112px;height:100px;border-radius:var(--r-md);overflow:hidden;background:#EDE7DF}
.item .shot img{width:100%;height:100%;object-fit:cover}

.item h2{grid-column:2;grid-row:1;margin:0;font-size:20px;font-weight:500;color:#000;}

/* Egg / Eggless tag beside the product name */
.item h2 .chip{
  display:inline-flex;align-items:center;vertical-align:middle;margin-left:10px;
  background:var(--chip);color:var(--head-color);font-family:inherit;
  font-size:12px;font-weight:500;line-height:1;padding:6px 10px;
  border-radius:var(--r-sm);white-space:nowrap;
}
.item h2 .chip.is-eggless{background:#E4F0E7;color:#1E7A46}
.item h2 .chip.is-egg{background:#F6EEE6;color:#84461F}

.meta{grid-column:2;grid-row:2;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.meta .amount{font-size:18px;font-weight:600;color:var(--head-color)}
.meta .wlabel{font-size:15px;color:var(--head-color)}
.meta .wchip{background:var(--chip);border-radius:var(--r-sm);padding:6px 14px;font-size:14px;color:var(--head-color)}

/* ---------- Quantity stepper: one filled pill, no borders ---------- */
.qty{
  grid-column:3;
  grid-row:2;
  justify-self:end;            /* keeps it in line with Remove on every row */
  display:inline-flex;
  align-items:center;
  background:#E1E1DC;          /* the plain fill */
  border:0;
  border-radius:8px;
  height:40px;
  overflow:hidden;
}
.qty button{
  width:34px;
  height:100%;
  border:0;                    /* kills any inherited button border */
  background:none;             /* no separate bg on the +/- */
  color:#1D364D;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.qty button:hover{background:#C7C6BC;}
.qty output{
  min-width:28px;
  text-align:center;
  font-size:15px;
  font-weight:500;
  color:#1D364D;
}

.remove{
  border:none;
  grid-column:4;grid-row:2;justify-self:end;      /* ← new */
  height:40px;padding:0 34px;border-radius:var(--r-sm);
  background:var(--sand);color:#fff;font-size:16px;
}

/* ============ SUMMARY ============ */
.summary{background:#E1E1DC;border:1px solid var(--stone-line);border-radius:var(--r-lg);padding:30px}
.total{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.total h2{margin:0;font-size:28px;font-weight:400;color:#000;}
.total .grand{
  font-family:'Config Condensed', sans-serif;
  font-weight:600; /* SemiBold */
  font-size:32px;
  line-height:28px;
  letter-spacing:0%;
  color:#000; /* Rich Black */
}
.sub{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;font-size:15px;color:#000;}
.pin-line{font-size:13px;color:var(--text-color);margin:8px 0 0}
.summary hr{border:0;border-top:1px solid #000;margin:24px 0}
.checkout{
  width:100%;height:56px;border-radius:var(--r-sm);
  background:var(--head-color);color:#fff;font-size:17px;font-weight:500;
}

/* ============ EMPTY STATE ============ */
.empty-state{display:none}
.is-empty .cart-head,
.is-empty .cart{display:none}
.is-empty .empty-state{display:block}

.empty-state h1{margin:0 0 18px;font-size:34px;line-height:1.2;font-weight:500;color:var(--head-color)}
.empty-copy{margin:0 0 26px;font-size:17px;line-height:1.5;color:#1A1A1A}
.shop-now{
  display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;
  border-radius:4px;background:var(--head-color);color:#fff;font-size:15px;text-decoration:none;
}
.shop-now:hover{background:#16293C}

/* --- promo banner (built in markup so it reflows; swap for your export if you prefer) --- */
.promo{
  position:relative;margin:44px 0 0;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(135deg,#26394F 0%,#1B2A3D 100%);
  display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:600px;
}
.promo-copy{padding:0 40px 0 90px;color:var(--sand)}
.promo-kicker{
  margin:0;font-size:58px;line-height:.98;font-weight:700;letter-spacing:-1px;
  text-transform:uppercase;
}
.promo-display{
  margin:6px 0 34px;
  font-size:78px;line-height:.96;letter-spacing:-1px;text-transform:uppercase;
}
.promo-badge{
  margin:0;display:inline-block;background:var(--sand);color:#2A2118;
  padding:16px 28px;border-radius:4px;font-size:22px;font-weight:600;line-height:1.25;
  text-transform:uppercase;letter-spacing:.2px;
}
.promo-art{
  position:relative;align-self:stretch;display:grid;place-items:center;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.055) 0 42px,transparent 42px 96px);
}
.promo-cake{width:70%;max-width:360px;height:auto;border-radius:50%}
.order-now{
  position:absolute;left:50%;bottom:9%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 20px;
  border:1.5px solid #fff;border-radius:6px;color:#fff;font-size:15px;
  text-decoration:none;white-space:nowrap;
}
.order-now:hover{background:rgba(255,255,255,.14)}

/* ============ MOBILE ============ */
@media (max-width:900px){
  .wrap{padding:28px var(--gutter) 48px}
  .cart-head h1{font-size:26px;margin-bottom:20px}
  .cart-head hr{margin-bottom:24px}

  .cart{grid-template-columns:1fr;row-gap:8px}

.item{
  grid-template-columns:92px max-content minmax(0,1fr);
  column-gap:14px;row-gap:12px;padding-bottom:26px;
}
.item+.item{padding-top:26px}
.item .shot{grid-row:1/4;width:92px;height:88px}
.item h2{grid-column:2/4;grid-row:1;font-size:18px}
.item h2 .chip{font-size:11px;padding:5px 8px;margin-left:8px}
.meta{grid-column:2/4;grid-row:2;gap:14px}
.meta .amount{font-size:17px}

.qty{grid-column:2;grid-row:3;justify-self:start}
.remove{border:none;grid-column:3;grid-row:3;justify-self:stretch;width:100%;padding:0;text-align:center}

  .summary{margin-top:16px;padding:24px}
  .total h2{font-size:22px}
  .total .grand{font-size:26px}
  .checkout{height:52px;font-size:16px}

  /* empty state */
  .empty-state h1{font-size:24px;margin-bottom:14px}
  .empty-copy{font-size:16px;margin-bottom:20px}
  .shop-now{height:44px;padding:0 20px;font-size:14px}

  .promo{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    min-height:0;margin-top:30px;padding-top:36px;
  }
  .promo-copy{order:1;padding:0 22px}
  .promo-kicker{font-size:30px}
  .promo-display{font-size:38px;margin-bottom:22px}
  .promo-badge{font-size:13px;padding:10px 16px}
  .order-now{order:2;position:static;transform:none;margin:24px 0 26px}
  .promo-art{order:3;width:100%;padding:26px 0 34px}
  .promo-cake{width:58%;max-width:220px}
}
button {border: none;}
span{font-weight:500;}
@media (max-width:420px){
  .item h2 .chip{margin-left:6px}
}
@media (max-width: 767px) {
    .qty output {
        min-width: 10px;
        text-align: center;
    }
}
@media (prefers-reduced-motion:no-preference){
  .checkout,.remove,.qty button,.shop-now,.order-now{transition:background-color .15s ease,opacity .15s ease}
}

/* ================================================================
   ADDONS MODAL — opens from "Proceed to Checkout"
   ================================================================ */
.addons-overlay{
  position:fixed;inset:0;z-index:60;background:rgba(29,54,77,.45);
  display:none;padding:24px;overflow:auto;
}
.addons-overlay[open],.addons-overlay.is-open{display:grid;place-items:start center}
body.no-scroll{overflow:hidden}

.addons{
  position:relative;width:100%;max-width:1000px;background:var(--page);
  border-radius:2px;padding:60px 64px 64px;margin:auto;
}
.addons-close{
  position:absolute;top:0;right:0;width:64px;height:64px;
  background:var(--head-color);color:#fff;display:grid;place-items:center;
}
.addons h2{margin:0 0 44px;font-size:40px;line-height:1.2;font-weight:400;color:var(--head-color);max-width:900px}

.addon-list{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none;margin:0 0 44px;padding:0}
.addon{display:flex;flex-direction:column}
.addon.is-busy{opacity:.55;pointer-events:none}   /* while its add/remove request runs */
.addon .shot{width:100%;height:auto;aspect-ratio:253/198;border-radius:var(--r-md);overflow:hidden;background:#EDE7DF}
.addon .shot img{width:100%;height:100%;object-fit:cover}
.addon h3{margin:14px 0 0;font-size:16px;font-weight:500;color:#000;}
.addon-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 14px}
.addon-row .amount{font-size:15px;font-weight:600;color:var(--head-color);}
/* ---------- Addon quantity stepper: one filled pill, no borders ---------- */
.aqty{
  display:inline-flex;
  align-items:center;
  background:#E1E1DC;
  border:0;
  border-radius:8px;
  height:32px;
  overflow:hidden;
}
.aqty button{
  width:28px;
  height:100%;
  border:0;
  background:none;
  color:var(--head-color);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.aqty button:hover{background:#CDAF8C;}
.aqty output{
  min-width:22px;
  text-align:center;
  font-size:14px;
  font-weight:500;
  color:var(--head-color);
}
.addon-add{
  margin-top:auto;width:100%;height:44px;border-radius:var(--r-sm);
  background:var(--head-color);color:#fff;font-size:16px;
}
.addon-add[aria-pressed="true"]{background:var(--sand)}

.dots{display:none;justify-content:center;gap:10px;margin:0 0 26px;padding:0;list-style:none}
.dots button{width:9px;height:9px;border-radius:50%;background:#C6CEDA;padding:0}
.dots button[aria-current="true"]{background:var(--head-color)}

.addons-foot{
  background:var(--stone);border:1px solid var(--stone-line);border-radius:var(--r-lg);
  padding:30px;display:grid;grid-template-columns:minmax(0,1fr) 452px;column-gap:60px;align-items:center;
}
.foot-lines{min-width:0}
.foot-lines .line{display:flex;justify-content:space-between;gap:20px;font-size:15px;font-weight:600!important;color:#000;padding:2px 0}
 #base-amt, #addon-amt{
  font-weight:600!important;
}
#base-label,#addon-label{
    font-weight:500!important;
}
.foot-lines hr{border:0;border-top:1px solid var(--stone-line);margin:22px 0}
.foot-total{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.foot-total span:first-child{font-size:28px;font-weight:500;color:#000;}
.foot-total .grand{font-size:30px;font-weight:700;color:#000;}
.foot-actions{display:grid;gap:16px}
.foot-actions button{height:60px;border-radius:var(--r-sm);background:var(--head-color);color:#fff;font-size:17px;font-weight:500}
.foot-actions button:disabled{opacity:.6;cursor:default}

/* ---- addons modal on mobile ---- */
@media (max-width:900px){
  .addons-overlay{
    padding:var(--addons-inset-y) var(--addons-inset-x);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .addons-overlay.is-open{place-items:start center}

  .addons{
    max-width:100%;min-height:0;margin:56px auto auto;
    border-radius:var(--r-lg);padding:22px 20px 32px;
    overflow:hidden;box-shadow:0 18px 48px rgba(29,54,77,.22);
  }
  /* The close button sat at top:-56px - OUTSIDE the popup, floating
     above it, and 56px square. It now sits in the popup's own top-right
     corner at a normal tap size. */
  .addons-close{
    top:8px;right:8px;width:34px;height:34px;
    background:none;color:var(--head-color);
    border-radius:50%;box-shadow:none;
  }
  .addons-close:active{background:rgba(25,50,92,.06)}
  .addons-close svg{width:20px;height:20px;stroke-width:2}

  .addons h2{font-size:22px;margin:0 0 20px;max-width:calc(100% - 44px);line-height:1.25}

  /* product name: one line, cut with an ellipsis instead of wrapping and
     pushing the Add button down on the taller cards */
  .addon h3{
    margin-top:12px;
    font-size:14px;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .addon-list{
    display:flex;gap:16px;margin:0 20px 18px;padding:0 20px; 
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .addon-list::-webkit-scrollbar{display:none}
  .addon{flex:0 0 78%;scroll-snap-align:start}
  .addon .shot{aspect-ratio:253/210}
  .addon-add{height:40px;}
  
  .dots{display:flex}

  .addons-foot{display:block;background:none;border:0;margin-top:10px;padding:0;border-radius:0}
  .foot-lines{background:var(--stone);border:1px solid var(--stone-line);border-radius:var(--r-lg);padding:22px}
  .foot-lines hr{margin:16px 0}
  .foot-total span:first-child{font-size:22px}
  .foot-total .grand{font-size:24px}
  .foot-actions{margin-top:18px}
  .foot-actions button{height:52px;font-size:16px}
}
@media (max-width:420px){
  :root{--addons-inset-y:40px;--addons-inset-x:12px}
  .addons{padding:22px 16px 26px}
  .addon-list{margin:0 16px 16px;padding:0 16px}
  .addon{flex:0 0 82%}
}

.qty-stepper{display:flex;align-items:center;justify-content:center;gap:16px;background:#1B3358;border:1px solid #1B3358;border-radius:7px;padding:6px 10px;}
.qty-stepper button{background:none;border:none;color:#F6FAFF;font-size:16px;line-height:1;cursor:pointer;padding:0;width:14px;appearance:none;outline:none;box-shadow:none;-webkit-tap-highlight-color:transparent;}
.qty-stepper output{font-size:14px;font-weight:500;color:#F6FAFF;min-width:14px;text-align:center;}
.is-busy button[disabled],
button[disabled]{opacity:.55;cursor:default;}

/* addons popup carousel dots — same hexagon marker the product rows use */
@media (max-width:768px){
  #addon-dots{display:flex;justify-content:center;gap:14px;margin:18px 0 0;padding:0;list-style:none;}
  #addon-dots li{display:block;line-height:0;}
  #addon-dots button{
    width:12px;height:12px;padding:0;border:none;border-radius:0;cursor:pointer;
    background:rgba(27,51,88,.22);
    clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    transition:background .2s ease;
    -webkit-tap-highlight-color:transparent;
  }
  #addon-dots button[aria-current="true"]{background:#1B3358;}
}
/* ==========================================================
   MID-RANGE FIX (901px – 1299px) + fluid desktop
   ========================================================== */

/* 1. Summary column and gaps shrink with the viewport instead
      of staying at 424px / 110px and starving the items column. */
@media (min-width:901px){
  .cart{
    grid-template-columns:minmax(0,1fr) clamp(300px,30vw,424px);
    column-gap:clamp(24px,4vw,110px);
  }
  .item{ column-gap:clamp(14px,1.8vw,32px); }
  .meta{ gap:clamp(10px,1.5vw,22px); }
  .remove{ padding:0 clamp(16px,2.2vw,34px); }
  .item h2{ overflow-wrap:break-word; }
}

/* 2. Below 1300px there isn't room for name + qty + Remove on
      one line, so give qty/Remove their own row. */
@media (min-width:901px) and (max-width:1299px){
  .item{
    grid-template-columns:112px minmax(0,1fr) auto;
    row-gap:12px;
  }
  .item .shot{ grid-row:1 / 4; }
  .item h2{ grid-column:2 / 4; grid-row:1; font-size:18px; }
  .meta{ grid-column:2 / 4; grid-row:2; }
  .qty{ grid-column:2; grid-row:3; justify-self:start; }
  .remove{ grid-column:3; grid-row:3; justify-self:end; }

  .summary{ padding:24px; }
  .total h2{ font-size:24px; }
  .total .grand{ font-size:28px; }
  .checkout{ height:52px; font-size:16px; }

  /* pincode row can't hold a 200px field + Apply at this width */
  .summary .panel.store-panel .pin-field{ width:auto; min-width:0; }
  .summary .panel.store-panel .apply{ padding:0 16px; }
}

/* 3. Weight chip was wrapping to its own line — keep it inline. */
.meta .wlabel,
.meta .wchip{ white-space:nowrap; }
html, body{ max-width:100%; overflow-x:hidden; }
img, picture, svg, video{ max-width:100%; height:auto; }
.wrap, .cart, .items, .item, .summary{ min-width:0; }
.item > *{ min-width:0; }
@media (max-width:480px){
  .item{
    grid-template-columns:80px minmax(0,1fr);
    column-gap:12px; row-gap:10px; padding-bottom:22px;
  }
  .item+.item{ padding-top:22px; }
  .item .shot{ grid-row:1 / 3; width:80px; height:76px; }

  .item h2{ grid-column:2; grid-row:1; font-size:16px; line-height:1.3; }
  .meta{ grid-column:2; grid-row:2; gap:8px 12px; }
  .meta .amount{ font-size:16px; }
  .meta .wchip{ padding:4px 10px; font-size:13px; }

  /* qty + Remove get their own full-width row under the image */
  .qty{ grid-column:1 / -1; grid-row:3; justify-self:start; height:36px; }
  .remove{ grid-column:1 / -1; grid-row:4; justify-self:stretch;
           width:100%; height:40px; font-size:15px; }
           
     .summary .panel.store-panel .pin-field {
          width:125px;
     }
}

/* addons scroller: margin OR padding, not both */
@media (max-width:900px){
  .addon-list{ margin:0 0 18px; padding:0 20px; }
}
@media (max-width:420px){
  .addon-list{ margin:0 0 16px; padding:0 16px; }
}