/* Sigma Guys — Rewards Cart drawer */
.sgc, .sgc * { box-sizing: border-box; margin: 0; padding: 0; }
.sgc {
  --sgc-brand: #0B3B3C;
  --sgc-brand-hover: #0f5051;
  --sgc-orange: #F37021;
  --sgc-orange-ink: #C2510E;
  --sgc-orange-tint: #FFF0E6;
  --sgc-green: #1f7a45;
  --sgc-green-tint: #e3f4ea;
  --sgc-green-line: #c4e6d1;
  --sgc-ink: #0c0c0d;
  --sgc-ink-soft: #2b2b2e;
  --sgc-mute: #6b6b70;
  --sgc-mute-2: #8a8a90;
  --sgc-line: #e6e6e8;
  --sgc-line-2: #d6d6da;
  --sgc-panel: #f1f2f4;
  position: relative;
  width: 100%;
  max-width: 390px;
  height: 100%;
  max-height: 844px;
  background: var(--sgc-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--sgc-ink);
}
.sgc button { font-family: inherit; cursor: pointer; border: none; background: none; }
.sgc a { color: var(--sgc-brand); }

/* Header */
.sgc-head { background: #fff; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.sgc-head-row { display: flex; align-items: center; justify-content: space-between; }
.sgc-title { display: flex; align-items: baseline; gap: 8px; }
.sgc-title h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.sgc-title span { font-size: 12px; color: var(--sgc-mute); font-weight: 500; }
.sgc-close { width: 28px; height: 28px; border-radius: 50%; background: var(--sgc-panel) !important; display: flex; align-items: center; justify-content: center; }
.sgc-trust { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; background: var(--sgc-green-tint); border: 1px solid var(--sgc-green-line); border-radius: 8px; padding: 6px 10px; color: var(--sgc-green); font-size: 13px; }
.sgc-trust svg { flex: 0 0 auto; }
.sgc-shine { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0)); animation: sgcShine 3.2s ease-in-out infinite; pointer-events: none; }

/* Body */
.sgc-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.sgc-card { background: #fff; border-radius: 14px; }

/* Rewards progress */
.sgc-progress { flex: 0 0 auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.sgc-progress-head { display: flex; align-items: center; gap: 10px; }
.sgc-progress-icon { width: 26px; height: 26px; border-radius: 7px; background: var(--sgc-brand); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sgc-progress-text { font-size: 13px; font-weight: 600; line-height: 1.3; text-wrap: pretty; }
.sgc-progress-text strong { color: var(--sgc-orange-ink); }
.sgc-track { position: relative; }
.sgc-track-base, .sgc-track-fill { position: absolute; left: 0; top: 9px; height: 4px; border-radius: 4px; }
.sgc-track-base { right: 0; background: var(--sgc-line); }
.sgc-track-fill { background: var(--sgc-brand); overflow: hidden; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.sgc-track-fill::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0)); animation: sgcShimmer 1.8s linear infinite; }
.sgc-nodes { position: relative; display: grid; grid-template-columns: repeat(var(--sgc-tiers, 4), minmax(0, 1fr)); }
.sgc-node { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.sgc-dot-wrap { position: relative; width: 22px; height: 22px; }
.sgc-dot { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: #fff; border: 2px solid var(--sgc-line-2); transition: background .3s; }
.sgc-ping { position: absolute; inset: 0; border-radius: 50%; background: var(--sgc-brand); animation: sgcPing 1.5s ease-out infinite; }
.sgc-node-amt { font-size: 11px; font-weight: 700; color: var(--sgc-mute-2); }
.sgc-node-label { font-size: 10px; font-weight: 600; color: var(--sgc-mute-2); }
.sgc-node.is-next .sgc-dot { border-color: var(--sgc-brand); }
.sgc-node.is-next .sgc-node-amt { color: var(--sgc-ink); }
.sgc-node.is-next .sgc-node-label { color: var(--sgc-brand); }
.sgc-node.is-reached .sgc-dot { background: var(--sgc-brand); border-color: var(--sgc-brand); }
.sgc-node.is-reached .sgc-node-amt { color: var(--sgc-ink); }
.sgc-node.is-reached .sgc-node-label { color: var(--sgc-green); }

/* Items */
.sgc-items { flex: 1 0 auto; min-height: 150px; max-height: none; padding: 2px 12px 4px; display: flex; flex-direction: column; }
.sgc-items-head { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--sgc-line-2); }
.sgc-items-head strong { font-size: 14px; font-weight: 700; }
.sgc-items-head span { font-size: 12px; color: var(--sgc-mute); font-weight: 500; }
.sgc-items-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.sgc-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--sgc-panel); flex: 0 0 auto; animation: sgcPop .4s ease-out both; }
.sgc-row:last-child { border-bottom: none; }
.sgc-thumb { width: 34px; height: 34px; border-radius: 10px; background: var(--sgc-panel); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--sgc-mute); }
.sgc-thumb img { height: 32px; width: auto; }
.sgc-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sgc-row-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgc-row-sub { font-size: 12px; color: var(--sgc-mute-2); }
.sgc-row-sub s { text-decoration: line-through; }
.sgc-stepper { display: flex; align-items: center; border: 1px solid var(--sgc-line-2); border-radius: 8px; height: 28px; box-shadow: 0 2px 6px rgba(12,12,13,.06); }
.sgc-stepper button { width: 26px; height: 26px; font-size: 15px; font-weight: 700; color: var(--sgc-brand); }
.sgc-stepper span { min-width: 16px; text-align: center; font-size: 13px; font-weight: 700; }
.sgc-line { min-width: 48px; text-align: right; font-size: 13px; font-weight: 700; }
.sgc-row.is-gift { animation: sgcPop .5s cubic-bezier(.2,1.2,.4,1) both; }
.sgc-row.is-gift .sgc-thumb { background: var(--sgc-green-tint); color: var(--sgc-green); }
.sgc-row.is-gift .sgc-row-sub { color: var(--sgc-green); font-weight: 600; }
.sgc-gift-price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.sgc-gift-price s { font-size: 11px; color: var(--sgc-mute-2); }
.sgc-gift-price b { font-size: 14px; font-weight: 700; color: var(--sgc-green); }
.sgc-row.is-locked .sgc-thumb { background: none; border: 1.5px dashed #c9c9ce; color: var(--sgc-mute-2); }
.sgc-row.is-locked .sgc-row-name, .sgc-row.is-locked .sgc-row-sub { color: var(--sgc-mute); }
.sgc-row.is-locked > s { font-size: 11px; color: var(--sgc-mute-2); }
.sgc-empty { padding: 18px 0; text-align: center; font-size: 13px; color: var(--sgc-mute); }

/* Upsells */
.sgc-upsell { flex: 0 0 auto; padding: 10px 0 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.sgc-upsell-head { display: flex; align-items: center; gap: 6px; padding-right: 12px; }
.sgc-upsell-title { font-size: 12px; font-weight: 800; letter-spacing: .16em; background: linear-gradient(90deg, var(--sgc-orange), var(--sgc-brand), var(--sgc-orange)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sgcSweep 4s linear infinite; }
.sgc-twinkle { color: var(--sgc-orange); animation: sgcTwinkle 1.4s ease-in-out infinite; }
.sgc-tiles { scrollbar-width: none; display: flex; gap: 8px; overflow-x: auto; padding: 6px 12px 2px 0; }
.sgc-tile { flex: 0 0 88px; width: 88px; min-width: 0; display: flex; flex-direction: column; gap: 2px; animation: sgcRise .5s ease-out both; }
.sgc-tile-img { position: relative; width: 88px; height: 72px; }
.sgc-tile-img > div { position: absolute; inset: 0; border-radius: 12px; background: var(--sgc-panel); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--sgc-mute-2); }
.sgc-tile-img img { height: 66px; width: auto; }
.sgc-add { position: absolute; right: -5px; top: -5px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--sgc-line) !important; background: #fff !important; color: var(--sgc-orange); box-shadow: 0 4px 10px rgba(12,12,13,.12); display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.sgc-add:active { transform: scale(.9); }
.sgc-tile-name { margin-top: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgc-tile-price { display: flex; align-items: baseline; gap: 4px; }
.sgc-tile-price b { font-size: 13px; font-weight: 700; }
.sgc-tile-price span { font-size: 10px; font-weight: 700; color: var(--sgc-green); }
.sgc-tile-unlock { font-size: 10px; font-weight: 700; color: var(--sgc-orange-ink); line-height: 1.25; }

/* Footer */
.sgc-foot { background: #fff; border-top: 1px solid var(--sgc-line); padding: 10px 12px 12px; display: flex; align-items: center; gap: 12px; }
.sgc-total { display: flex; flex-direction: column; gap: 1px; }
.sgc-total-row { display: flex; align-items: baseline; gap: 6px; }
.sgc-total-row b { font-size: 18px; font-weight: 700; }
.sgc-total-row s { font-size: 12px; color: var(--sgc-mute-2); }
.sgc-total small { font-size: 11px; font-weight: 700; color: var(--sgc-green); }
.sgc-cta { position: relative; overflow: hidden; flex: 1; background: var(--sgc-brand) !important; color: #fff; height: 44px; border-radius: 12px; font-size: 15px; font-weight: 700; }
.sgc-cta:hover { background: var(--sgc-brand-hover) !important; }
.sgc-cta .sgc-shine { width: 30%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.28), rgba(255,255,255,0)); animation: sgcShine 2.8s ease-in-out infinite; }

/* Unlock toast + confetti */
.sgc-toast { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 10; transform: translateY(-140%); opacity: 0; transition: transform .45s cubic-bezier(.2,1.3,.4,1), opacity .3s; pointer-events: none; background: var(--sgc-brand); color: #fff; border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 16px 30px rgba(11,59,60,.35); }
.sgc-toast.is-on { transform: translateY(0); opacity: 1; }
.sgc-toast-icon { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--sgc-brand); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sgc-toast-text { display: flex; flex-direction: column; gap: 2px; }
.sgc-toast-text small { font-size: 10px; font-weight: 700; letter-spacing: .2em; color: #a6e3bd; }
.sgc-toast-text b { font-size: 14px; font-weight: 700; }
/* Confetti burst — covers the whole drawer and sits above its content. Two
   cannons fire up and inward from the bottom corners while a third group
   drifts down from above, over a brief radial flash. Each piece carries its
   own geometry inline; see burstConfetti() in floating-cart-reward.js. */
.sgc-confetti { position: absolute; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; }
.sgc-confetti .sgc-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%, rgba(243,112,33,.22), rgba(11,59,60,0) 62%); animation: sgcFlash 1.2s ease-out forwards; }
.sgc-confetti span { position: absolute; }

@keyframes sgcShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@keyframes sgcShine { 0%, 60% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(320%) skewX(-20deg); } }
@keyframes sgcPing { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes sgcPop { 0% { transform: scale(.92); opacity: 0; } 60% { transform: scale(1.02); opacity: 1; } 100% { transform: scale(1); } }
@keyframes sgcRise { 0% { transform: translateY(14px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes sgcTwinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.7) rotate(25deg); opacity: .6; } }
@keyframes sgcSweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes sgcConfetti { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
@keyframes sgcCannon { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 45% { transform: translate(calc(var(--dx) * .75), var(--dy)) rotate(calc(var(--r) * .5)); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) * .35)) rotate(var(--r)); opacity: 0; } }
@keyframes sgcFall { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
@keyframes sgcFlash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sgcToastPop { 0% { transform: scale(1); } 30% { transform: scale(1.06); } 100% { transform: scale(1); } }


.sgc-tiles::-webkit-scrollbar { display: none; }
@media (min-height: 700px) { .sgc-items { flex: 1 1 0; } }

/* ==========================================================================
   Sigma theme integration overrides
   --------------------------------------------------------------------------
   Everything above this line is the prototype stylesheet, kept verbatim so it
   can be re-synced when the design is updated. Only the rules below adapt it
   to the live drawer (#floating-cart is a bootstrap .modal.fullRight, not the
   prototype's standalone 390x844 demo box).
   ========================================================================== */

/* Fill the drawer instead of the demo's fixed box. */
#floating-cart .wrap { height: 100%; display: flex; flex-direction: column; min-height: 0; }
#floating-cart .wrap > .offcanvas-body { padding: 0; height: 100%; min-height: 0; display: flex; }
#floating-cart .sgc { max-width: none; max-height: none; height: 100%; border-radius: 0; }

/* Let the modal shell be the full-height right panel the drawer expects. */
#floating-cart .modal-dialog, #floating-cart .modal-content { height: 100%; max-height: 100%; }


/* Theme resets that leak in from the sigma stylesheets. */
.sgc a, .sgc a:hover { text-decoration: none; }
.sgc img { max-width: 100%; }
.sgc .sgc-cta { text-decoration: none; }

/* Dot pop when a tier is newly crossed (added by floating-cart-reward.js). */
.sgc-node.justunlocked .sgc-dot { animation: sgcNodePop .6s ease; }
@keyframes sgcNodePop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* Continuity across the AJAX re-render (see floating-cart-reward.js).
   A row or tile that was already on screen before the refresh must not replay
   its entrance animation — in the design the DOM persists, so only genuinely
   new items pop in. */
.sgc-row.sgc-seen, .sgc-tile.sgc-seen { animation: none !important; }

/* Pressed/added state for a tile's + button, matching the design. */
.sgc-add:active { transform: scale(.9); }
.sgc-add.is-added { background: var(--sgc-orange) !important; color: #fff !important; border-color: var(--sgc-orange) !important; }

/* Reduced motion: deliberately NOT honoured - do not re-add the rule.
   The designer's export carried a reduced-motion media query that set
   animation and transition to none, with !important, on every descendant of
   .sgc. The source design (Claude Design "Rewards Cart - Milestones v2") has
   no such block and animates regardless.

   That rule made the entire drawer static for anyone with the OS animation
   setting switched off - which is exactly how it surfaced: the reviewer's own
   machine had it enabled, so none of the animation work was visible while the
   Claude Design prototype, which does not check, animated normally in the very
   same browser.

   Decision 2026-10-08: match the design exactly - animations always on. */

/* The CTA is an <a> here, not the prototype's <button>, so that it keeps the
   theme's href + onclick + #floatingCartBuyNow wiring. Two things a <button>
   gives for free that an anchor does not:
     - COLOUR: ".sgc a" (0,1,1) outranks ".sgc-cta" (0,1,0), so the label
       painted dark green on the dark green button and vanished.
     - LAYOUT: a button centres its own label; an anchor leaves it at the
       top-left of the 44px box.
   Re-assert both. Do not drop these when re-syncing the prototype CSS. */
.sgc a.sgc-cta, .sgc a.sgc-cta:hover, .sgc a.sgc-cta:focus, .sgc a.sgc-cta span { color: #fff; }
.sgc a.sgc-cta { display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; line-height: 1; }

/* ==========================================================================
   Item row — redesigned (Rewards Cart - Milestones v2, 2026-10-09)
   The row became a two-line block: a main line (larger thumb, name, variant
   pill + stepper, stacked price/MRP/save) and an optional dashed nudge to a
   bigger variant that would unlock the next tier.
   ========================================================================== */
.sgc-row { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 0; }
.sgc-row-main { display: flex; align-items: center; gap: 10px; }
.sgc-thumb-lg { width: 52px; height: 52px; border-radius: 10px; flex: 0 0 auto; font-size: 12px; }
.sgc-thumb-lg img { height: 48px; width: auto; }
.sgc-row .sgc-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sgc-row .sgc-row-name { font-size: 14px; font-weight: 700; }
.sgc-row-controls { display: flex; align-items: center; gap: 6px; }

/* Variant pill */
.sgc-pack { position: relative; flex: 1; min-width: 0; }
.sgc-pack-select { width: 100%; appearance: none; -webkit-appearance: none; height: 30px; border: 1.5px solid var(--sgc-line-2); border-radius: 999px; background: #fff; padding: 0 26px 0 12px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--sgc-ink); cursor: pointer; }
.sgc-pack-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--sgc-mute); }

/* Stepper becomes a pill to match the variant control */
.sgc-row .sgc-stepper { border: 1.5px solid var(--sgc-line-2); border-radius: 999px; height: 30px; box-shadow: none; flex: 0 0 auto; }
.sgc-row .sgc-stepper button { width: 24px; height: 26px; font-size: 14px; }
.sgc-row .sgc-stepper span { min-width: 14px; font-size: 12px; }

/* Price column: line total, struck MRP, saving */
.sgc-row-money { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: 0 0 auto; min-width: 64px; }
.sgc-row-money .sgc-line { font-size: 15px; font-weight: 700; }
.sgc-line-mrp { font-size: 12px; color: var(--sgc-mute-2); text-decoration: line-through; }
.sgc-line-save { font-size: 12px; font-weight: 700; color: var(--sgc-green); }

/* "Switch to X to unlock Y" */
.sgc-upgrade-hint { margin-left: 62px; display: flex; align-items: center; gap: 6px; border: 1px dashed var(--sgc-brand); background: #eef5f5; border-radius: 8px; padding: 5px 8px; font-size: 11px; font-weight: 600; color: var(--sgc-brand); text-align: left; width: calc(100% - 62px); }
.sgc-upgrade-hint:hover { background: #e3eeee; }
.sgc-upgrade-hint svg { flex: 0 0 auto; }
.sgc-upgrade-hint .hl { color: var(--sgc-orange-ink); }

/* The gift and locked rows keep the original single-line layout. */
.sgc-row.is-gift, .sgc-row.is-locked { flex-direction: row; align-items: center; gap: 10px; padding: 7px 0; }

/* ==========================================================================
   Price breakdown — the expandable panel above the CTA
   Collapsed by default; the chevron beside the total slides it up, the way
   the Shopflo cart on tugain.in does it.
   ========================================================================== */
.sgc-foot { flex-direction: column; align-items: stretch; gap: 0; }
.sgc-foot-main { display: flex; align-items: center; gap: 12px; }

.sgc-breakdown {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease, margin-bottom .35s ease;
  display: flex; flex-direction: column; gap: 7px;
  font-size: 12px; color: var(--sgc-ink-soft);
}
.sgc-foot.is-open .sgc-breakdown { max-height: 340px; opacity: 1; margin-bottom: 10px; }

.sgc-bd-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sgc-bd-row > span { color: var(--sgc-mute); }
.sgc-bd-row > b { font-weight: 600; white-space: nowrap; }
.sgc-bd-row > b.is-off { color: var(--sgc-green); }
.sgc-bd-row > b.is-off s { color: var(--sgc-mute-2); font-weight: 500; margin-left: 4px; }
.sgc-bd-row.is-grand { border-top: 1px dashed var(--sgc-line-2); padding-top: 8px; margin-top: 1px; }
.sgc-bd-row.is-grand > span { color: var(--sgc-ink); font-weight: 700; }
.sgc-bd-row.is-grand > b { font-size: 14px; font-weight: 700; }
.sgc-bd-saved { text-align: center; font-size: 11px; font-weight: 700; color: var(--sgc-green); background: var(--sgc-green-tint); border-radius: 8px; padding: 5px 8px; }

/* Chevron that opens it — points down when closed, up when open. */
.sgc-bd-toggle { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: none; padding: 0; color: var(--sgc-mute); transition: transform .3s ease, color .2s; }
.sgc-bd-toggle:hover { color: var(--sgc-ink); }
.sgc-foot.is-open .sgc-bd-toggle { transform: rotate(180deg); color: var(--sgc-ink); }

/* Upsell tile call-to-action — a full-width outlined "+ ADD" bar beneath each
   tile, as on tugain.in, replacing the prototype's small floating + in the
   image corner. The prototype's own .sgc-add rules use !important on border
   and background, so these have to as well. */
.sgc-tile { position: relative; justify-content: space-between; }
.sgc-add {
  position: static; width: 100%; height: 26px; margin-top: 6px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 1.5px solid var(--sgc-green) !important;
  background: #fff !important; color: var(--sgc-green);
  border-radius: 8px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  box-shadow: none; transition: background .2s ease, color .2s ease, transform .15s ease;
}
.sgc-add svg { width: 11px; height: 11px; flex: 0 0 auto; }
.sgc-add:hover { background: var(--sgc-green-tint) !important; }
.sgc-add:active { transform: scale(.97); }
.sgc-add.is-added { background: var(--sgc-green) !important; color: #fff !important; }

/* ==========================================================================
   Type scale — legibility bump
   --------------------------------------------------------------------------
   The prototype's sizes are drawn for a 390px-wide drawer. The live drawer is
   the full modal width, so the same pixel sizes read noticeably smaller and
   denser than the design does. Everything below lifts the scale while keeping
   the design's hierarchy and weights intact. Sizes only - no colour, weight
   or spacing changes - so this stays easy to dial back in one block.
   ========================================================================== */

/* Header */
.sgc-title h2 { font-size: 19px; }
.sgc-title span { font-size: 13px; }
.sgc-trust { font-size: 14px; }

/* Reward progress */
.sgc-progress-text { font-size: 14px; }
.sgc-node-amt { font-size: 12.5px; }
.sgc-node-label { font-size: 11.5px; }

/* Items */
.sgc-items-head strong { font-size: 15px; }
.sgc-items-head span { font-size: 12.5px; }
.sgc-row .sgc-row-name { font-size: 15.5px; }
.sgc-row-sub { font-size: 13px; }
.sgc-pack-select { font-size: 13px; }
.sgc-row .sgc-stepper button { font-size: 16px; }
.sgc-row .sgc-stepper span { font-size: 13.5px; }
.sgc-row-money .sgc-line { font-size: 16.5px; }
.sgc-line-mrp, .sgc-line-save { font-size: 13px; }
.sgc-upgrade-hint { font-size: 12.5px; }
.sgc-row.is-gift .sgc-row-name, .sgc-row.is-locked .sgc-row-name { font-size: 14.5px; }
.sgc-row.is-gift .sgc-row-sub, .sgc-row.is-locked .sgc-row-sub { font-size: 13px; }
.sgc-gift-price b { font-size: 15px; }
.sgc-gift-price s, .sgc-row.is-locked > s { font-size: 12.5px; }
.sgc-empty { font-size: 14px; }

/* Upsell tiles — widened a little so the larger type is not truncated. */
.sgc-tiles { gap: 10px; }
.sgc-tile { flex: 0 0 104px; width: 104px; }
.sgc-tile-img { width: 104px; height: 84px; }
.sgc-tile-img img { height: 78px; }
.sgc-upsell-title { font-size: 13px; }
.sgc-tile-name { font-size: 13px; }
.sgc-tile-price b { font-size: 14.5px; }
.sgc-tile-price span { font-size: 11px; }
.sgc-tile-unlock { font-size: 11px; }
.sgc-add { height: 30px; font-size: 12px; }
.sgc-add svg { width: 12px; height: 12px; }

/* Footer + breakdown */
.sgc-breakdown { font-size: 13px; }
.sgc-bd-row.is-grand > b { font-size: 16px; }
.sgc-bd-saved { font-size: 12.5px; }
.sgc-total-row b { font-size: 21px; }
.sgc-total-row s { font-size: 13px; }
.sgc-total small { font-size: 12px; }
.sgc-cta { font-size: 16.5px; }

/* Reward progress block — 15px, regular weight (requested 2026-10-10).
   Colour is left doing the work that weight used to: the reward name in the
   headline keeps its orange, and reached/next nodes keep green and brand.
   Labels wrap rather than truncate, since "FREE TestoBoost" at 15px is wider
   than a quarter of the drawer. */
.sgc-progress .sgc-progress-text,
.sgc-progress .sgc-progress-text strong,
.sgc-progress .sgc-node-amt,
.sgc-progress .sgc-node-label {
  font-size: 15px;
  font-weight: 400;
}
.sgc-progress .sgc-node-label { line-height: 1.25; }
.sgc-progress .sgc-nodes { gap: 4px; }

/* Progress node labels at 14px; the amounts above them stay 15px. */
.sgc-progress .sgc-node-label { font-size: 14px; }

/* Product names and their variant options — regular weight, not bold.
   Covers the cart lines, the unlocked gift and the locked preview, so every
   product name in the items list reads the same. */
.sgc-row .sgc-row-name,
.sgc-row.is-gift .sgc-row-name,
.sgc-row.is-locked .sgc-row-name,
.sgc-pack-select,
.sgc-pack-select option { font-weight: 400; }

/* Upsell tile product names — regular weight, matching the items list.
   The price, the % off and the "Unlocks ..." badge keep their weight. */
.sgc-tile-name { font-weight: 400; }

/* ==========================================================================
   Items card hugs its contents; ADD & UNLOCK MORE sits right beneath it
   --------------------------------------------------------------------------
   The items card used to grow to fill the drawer (flex-grow 1 plus a 150px
   floor), which pushed the upsell block to the very bottom and left a large
   blank area whenever the cart held only one or two lines.

   With grow switched off it sizes to its content, so the upsell block rides
   up directly under it and the spare space falls below both. As lines are
   added the card grows until there is no room left, then shrink takes over:
   the card stops growing and its list scrolls inside itself, so the upsell
   block never scrolls out of view. .sgc-body keeps overflow-y:auto as a last
   resort for very short viewports, once the card is down to its floor.
   ========================================================================== */
.sgc-items { flex: 0 1 auto; min-height: 84px; }
@media (min-height: 700px) { .sgc-items { flex: 0 1 auto; } }

/* Footer saving line — "You save ₹899 · Free delivery".
   Was 12px/700; now 14px at regular weight. Keeps the green. */
.sgc-total small { font-size: 14px; font-weight: 400; }

/* "Switch to X to unlock Y" nudge — restore its dashed box.
   The sheet's own reset, ".sgc button { border: none; background: none }",
   has specificity (0,1,1) and so outranked the single-class rule above,
   stripping the border and tint and leaving the nudge as bare text. Every
   other button here works around that with !important; this raises
   specificity instead, which is cheaper to reason about later. */
.sgc button.sgc-upgrade-hint {
  border: 1px dashed var(--sgc-brand);
  background: #eef5f5;
}
.sgc button.sgc-upgrade-hint:hover { background: #e3eeee; }

/* ==========================================================================
   Type scale — pulled back ~2-3px (2026-10-12)
   --------------------------------------------------------------------------
   The earlier bump was made against the wide desktop modal. On a phone the
   drawer is about the 390px the design was drawn for, so that bump left
   everything oversized. This block restates every size 2-3px smaller while
   keeping the hierarchy, and touches sizes only - the regular weights set
   earlier are left alone. Selectors mirror the ones they override so the
   specificity matches.
   ========================================================================== */

/* Header */
.sgc-title h2 { font-size: 16px; }
.sgc-title span { font-size: 11px; }
.sgc-trust { font-size: 12px; }

/* Reward progress */
.sgc-progress .sgc-progress-text,
.sgc-progress .sgc-progress-text strong { font-size: 13px; }
.sgc-progress .sgc-node-amt { font-size: 13px; }
.sgc-progress .sgc-node-label { font-size: 12px; }

/* Items */
.sgc-items-head strong { font-size: 13px; }
.sgc-items-head span { font-size: 11px; }
.sgc-row .sgc-row-name { font-size: 13px; }
.sgc-row-sub { font-size: 11px; }
.sgc-pack-select { font-size: 11.5px; }
.sgc-row .sgc-stepper button { font-size: 14px; }
.sgc-row .sgc-stepper span { font-size: 12px; }
.sgc-row-money .sgc-line { font-size: 14px; }
.sgc-line-mrp, .sgc-line-save { font-size: 11px; }
.sgc-upgrade-hint { font-size: 11px; }
.sgc-row.is-gift .sgc-row-name, .sgc-row.is-locked .sgc-row-name { font-size: 12.5px; }
.sgc-row.is-gift .sgc-row-sub, .sgc-row.is-locked .sgc-row-sub { font-size: 11px; }
.sgc-gift-price b { font-size: 13px; }
.sgc-gift-price s, .sgc-row.is-locked > s { font-size: 11px; }
.sgc-empty { font-size: 12px; }

/* Upsell tiles */
.sgc-upsell-title { font-size: 11.5px; }
.sgc-tile-name { font-size: 11.5px; }
.sgc-tile-price b { font-size: 12.5px; }
.sgc-tile-price span { font-size: 10px; }
.sgc-tile-unlock { font-size: 10px; }
.sgc-add { font-size: 10.5px; height: 27px; }
.sgc-add svg { width: 11px; height: 11px; }

/* Footer + breakdown */
.sgc-breakdown { font-size: 11.5px; }
.sgc-bd-row.is-grand > b { font-size: 14px; }
.sgc-bd-saved { font-size: 11px; }
.sgc-total-row b { font-size: 18px; }
.sgc-total-row s { font-size: 11px; }
.sgc-total small { font-size: 12px; }
.sgc-cta { font-size: 14.5px; }

/* ==========================================================================
   ADD & UNLOCK MORE — compacted (2026-10-12)
   The tiles were enlarged earlier to stop the bigger type truncating. Now
   that the scale has come back down they can shrink again: a shorter image,
   tighter padding and gaps, and a slimmer ADD bar. Roughly 35px shorter
   overall, and narrower tiles mean more of them visible per row.
   ========================================================================== */
.sgc-upsell { padding: 7px 0 7px 12px; gap: 3px; }
.sgc-tiles { gap: 8px; padding: 4px 12px 0 0; }
.sgc-tile { flex: 0 0 90px; width: 90px; gap: 1px; }
.sgc-tile-img { width: 90px; height: 64px; }
.sgc-tile-img img { height: 60px; }
.sgc-tile-name { margin-top: 2px; }
.sgc-tile-unlock { line-height: 1.2; }
.sgc-add { height: 24px; margin-top: 4px; }

/* ==========================================================================
   Full-bleed drawer on mobile (2026-10-12)
   --------------------------------------------------------------------------
   The theme pins the cart panel with
     .modal.fullRight .modal-dialog .modal-content { position: absolute; right: 0 }
     .modal-shopping-cart .modal-content { max-width: 708px !important }
   With a right edge but no left one, the panel shrink-wraps its content, so
   on a phone it stops short and leaves a strip of the page showing down the
   left. Pinning the left edge and lifting the cap makes it full bleed.
   Phones only - desktop keeps the 708px panel exactly as it is.
   ========================================================================== */
@media (max-width: 767.98px) {
  /* The modal itself can carry Bootstrap's scrollbar padding. */
  #floating-cart { padding: 0 !important; }

  /* Every link in the chain pinned to the viewport. The theme gives
     .modal-content "position:absolute; right:0; margin:auto" with no width,
     so any ancestor that shrink-wraps leaves the panel centred with a gap at
     each end - 100vw on all three removes the guesswork. */
  #floating-cart .modal-dialog {
    width: 100vw; min-width: 100vw; max-width: 100vw;
    margin: 0; padding: 0;
  }
  #floating-cart .modal-content {
    width: 100vw; min-width: 100vw; max-width: 100vw !important;
    left: 0; right: 0; margin: 0; padding: 0;
    border-radius: 0;
  }
  /* .modal-content is display:flex;flex-direction:row here, so .wrap must be
     told to grow - as a default flex item it sizes to its content. */
  #floating-cart .wrap { flex: 1 1 auto; width: 100%; min-width: 0; }
  #floating-cart .sgc { width: 100%; max-width: none; border-radius: 0; }
}

/* ==========================================================================
   Header, footer and body layout pass (2026-10-12)
   ========================================================================== */

/* Trust bar — 30px narrower and pulled up tight under the "Your Cart" line. */
/* The close button is 28px wide and flush right, so a 30px inset left only
   about 2px of clearance - the green box's rounded corner was touching it.
   44px gives it real room. Shorter vertical padding and less header padding
   also lift the whole group closer to the "Your Cart" line. */
.sgc-head { gap: 1px; padding: 8px 14px 10px; }
.sgc-trust { width: calc(100% - 44px); padding: 4px 9px; margin-top: 0; }

/* The reward progress now lives inside the white header block, so it drops
   its card chrome and reads as part of the header instead of a panel on a
   panel. A hairline keeps it separated from the trust bar. */
.sgc-head .sgc-progress {
  background: transparent;
  border-radius: 0;
  padding: 8px 0 2px;
  margin-top: 4px;
  border-top: 1px solid var(--sgc-line);
}

/* Place Order takes more of the footer; the totals keep only what they need. */
.sgc-foot-main { gap: 8px; }
.sgc-total { flex: 0 1 auto; min-width: 0; }
.sgc-cta { flex: 1 1 auto; min-width: 58%; }

/* No scrollbar inside "Your items" — the card grows to fit every line and the
   drawer body scrolls instead, which also keeps ADD & UNLOCK MORE directly
   under it however many lines there are. */
.sgc-items { flex: 0 0 auto; min-height: 0; }
.sgc-items-list { overflow-y: visible; flex: 0 0 auto; min-height: 0; }
.sgc-body { overflow-y: auto; }

/* ADD & UNLOCK MORE sits flush against the items card. */
.sgc-body { gap: 0; }
.sgc-body > .sgc-items { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sgc-body > .sgc-upsell { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 1px solid var(--sgc-line); }
.sgc-body > .sgc-progress { margin-bottom: 8px; }

/* ==========================================================================
   Tile add control — back to the design's corner + (2026-10-12)
   Supersedes the full-width ADD bar: the button returns to the top-right of
   the tile image. Restated in full rather than by deleting the bar rules, so
   this block is the single place the control is defined.
   ========================================================================== */
.sgc-tile-img { position: relative; }
.sgc-add {
  position: absolute; right: -5px; top: -5px;
  width: 26px; height: 26px; min-width: 0;
  margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--sgc-line) !important;
  background: #fff !important;
  color: var(--sgc-orange);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(12,12,13,.12);
  font-size: 0;                       /* no text label in this variant */
  transition: background .25s ease, color .25s ease, transform .2s ease;
  z-index: 2;
}
.sgc-add svg { width: 15px; height: 15px; }
.sgc-add:hover { background: #fff !important; }
.sgc-add:active { transform: scale(.9); }
.sgc-add.is-added {
  background: var(--sgc-orange) !important;
  color: #fff !important;
  border-color: var(--sgc-orange) !important;
}

/* ==========================================================================
   One scrollable block + footer tweaks (2026-10-13)
   ========================================================================== */

/* Header, reward progress, items and upsell now live in .sgc-scrollarea and
   scroll as a single white panel. .sgc itself stays non-scrolling, which is
   what keeps the toast and the confetti pinned over the whole drawer rather
   than drifting with the content. */
.sgc-scrollarea {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff;
  display: flex; flex-direction: column;
}

/* Everything inside reads as one continuous block: no gaps, no insets, no
   card corners - just hairlines where one section meets the next. */
.sgc-body { overflow: visible; flex: 0 0 auto; padding: 0; gap: 0; }
.sgc-body > .sgc-card { border-radius: 0; }
.sgc-items { border-top: 1px solid var(--sgc-line); }
.sgc-items, .sgc-upsell { flex: 0 0 auto; }

/* Footer stays put while that block scrolls, and below the confetti. */
.sgc-foot { flex: 0 0 auto; position: relative; z-index: 5; }

/* Place Order, 10% narrower than the 58% it was given earlier. */
.sgc-cta { min-width: 52%; }

/* Price-details chevron: the visible glyph is bigger and the tap target is
   40px square, which is what an iPhone needs - the old 20px button was well
   under the usable minimum. Negative margins absorb the growth so the total
   row's layout does not shift. */
.sgc-bd-toggle {
  width: 40px; height: 40px;
  margin: -10px -10px -10px -4px;
  align-self: center;
}
.sgc-bd-toggle svg { width: 16px; height: 16px; }

/* Confetti above everything, across the full drawer. */
.sgc-confetti { z-index: 30; }

/* Confetti must paint over the header and progress bar too.
   Nothing in the header carried a z-index, so its stacking position relative
   to the overlay was left to default ordering - and the opaque white header
   was winning, cutting the burst off at its bottom edge. Making the scroll
   area its own stacking context at z-index 0 pins everything inside it
   (header, progress, items, upsell) below the overlay, with no ambiguity. */
.sgc-scrollarea { position: relative; z-index: 0; }
.sgc-confetti { z-index: 40; }