/* ============================================================================
   Shopping surfaces — product cards, gallery, filters, cart, checkout, tracking
   ========================================================================== */

/* ---- product card ------------------------------------------------------- */
.pcard {
  position: relative;
  display: flex;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pcard:hover { box-shadow: var(--shadow-md); border-color: transparent; }
.pcard.is-unavailable { opacity: 0.6; }

.pcard__media { position: relative; flex: none; background: var(--color-surface-2); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.pcard__badges { position: absolute; top: var(--space-2); left: var(--space-2); display: grid; gap: 4px; justify-items: start; }
.pcard__action { position: absolute; z-index: 2; }

.pcard__body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); min-width: 0; flex: 1; }
.pcard__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--color-text);
}
.pcard__name a { color: inherit; }
.pcard__name a:hover { color: var(--brand-primary); }
.pcard__desc {
  font-size: var(--fs-caption);
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard__foot { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }

/* tile — carousels: fixed width leaves room for a floating action */
/* Phones show exactly two tiles. 62vw left a third card sliced down the middle,
   which reads as a clipping bug rather than a scroll affordance. */
.pcard--tile { flex-direction: column; flex: 0 0 calc((100% - var(--space-4)) / 2); width: auto; }
@media (min-width: 700px) { .pcard--tile { flex: 0 0 auto; width: 190px; } }
.pcard--tile .pcard__media { aspect-ratio: 1; }
.pcard--tile .pcard__action { right: var(--space-2); bottom: calc(-1 * var(--space-3)); }
.pcard--tile .pcard__name { font-size: var(--fs-body); }
.pcard--tile .pcard__body { padding-top: var(--space-5); }

/* grid — shop page. Two columns on a 360px phone leaves ~156px per card, so the action
   stays in normal flow in the footer where it can never overlap the product name. */
.pcard--grid { flex-direction: column; width: 100%; }
.pcard--grid .pcard__media { aspect-ratio: 4 / 3; }
.pcard--grid .pcard__foot {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}
.pcard--grid .pcard__action--inline { position: static; }
.pcard--grid .add-btn,
.pcard--grid .stepper { width: 100%; }
.pcard--grid .stepper { justify-content: space-between; }

/* row — dense list, action floats centred under the thumbnail */
.pcard--row { flex-direction: row-reverse; align-items: stretch; }
.pcard--row .pcard__media { width: 118px; flex: none; }
.pcard--row .pcard__action { left: 50%; transform: translateX(-50%); bottom: var(--space-3); }
.pcard--row .pcard__body { padding-right: var(--space-2); }

.product-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }

/* on the narrowest phones give each card the full width so nothing is cramped */
@media (max-width: 400px) {
  .product-grid { grid-template-columns: 1fr; }
  .pcard--grid { flex-direction: row-reverse; align-items: stretch; }
  .pcard--grid .pcard__media { width: 128px; flex: none; aspect-ratio: auto; }
  .pcard--grid .pcard__foot { flex-direction: row; align-items: center; }
  .pcard--grid .add-btn, .pcard--grid .stepper { width: auto; min-width: 92px; }
}

/* ---- pack size selector (variant-ready, see PHASE_2_DESIGN_REPORT) ------- */
.packs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pack {
  position: relative;
  min-height: 40px;
  padding: 0.35rem 0.85rem;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  background: var(--color-surface);
  border: 1.5px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.pack:hover { border-color: var(--brand-primary); }
.pack[aria-pressed="true"] { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--color-on-primary); }
.pack[disabled] { opacity: 0.4; cursor: not-allowed; }
.packs__note { width: 100%; font-size: var(--fs-caption); color: var(--color-muted); }

/* ---- category cards ----------------------------------------------------- */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 700px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
.cat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: all var(--dur) var(--ease);
}
.cat-card:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); color: var(--color-text); }
.cat-card__icon { font-size: 1.75rem; line-height: 1; }
.cat-card__name { font-family: var(--font-display); font-size: var(--fs-h4); }
.cat-card__count { font-size: var(--fs-caption); color: var(--color-muted); }

/* ---- trust strip -------------------------------------------------------- */
.trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  justify-content: center;
  max-width: 960px;
  margin-inline: auto;
}
.trust__item { justify-content: center; }
@media (min-width: 700px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}
.trust__icon { flex: none; color: var(--brand-green); }

/* ---- product detail ----------------------------------------------------- */
.pdp { display: grid; gap: var(--space-6); padding-bottom: var(--space-8); }
@media (min-width: 900px) { .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; } }

.gallery { display: grid; gap: var(--space-3); }
.gallery__main {
  position: relative;
  aspect-ratio: 1;
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__zoom {
  position: absolute; right: var(--space-3); bottom: var(--space-3);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: rgba(255, 253, 249, 0.92);
  border: none; border-radius: 50%;
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
}
.gallery__thumbs { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumb {
  flex: none;
  width: 64px; height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-2);
  cursor: pointer;
}
.gallery__thumb[aria-current="true"] { border-color: var(--brand-primary); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.pdp__title { font-size: var(--fs-h1); margin-bottom: var(--space-2); }
.pdp__price { margin-block: var(--space-4); }
.pdp__price .price__now { font-size: var(--fs-h2); }
.pdp__buy { display: grid; gap: var(--space-3); margin-block: var(--space-5); }
.pdp__buy-row { display: flex; gap: var(--space-3); align-items: center; }
.pdp__buy-row .btn { flex: 1; }

.pdp__facts { display: grid; gap: 0; margin-top: var(--space-5); border-top: 1px solid var(--color-line); }
.pdp__fact { display: grid; grid-template-columns: 40% 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); font-size: var(--fs-sm); }
.pdp__fact dt { color: var(--color-muted); }
.pdp__fact dd { color: var(--color-text); }
.pdp__fact--pending dd { color: var(--color-muted); font-style: italic; }

.accordion { border-top: 1px solid var(--color-line); }
.accordion__item { border-bottom: 1px solid var(--color-line); }
.accordion__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) 0;
  background: none; border: none;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.accordion__trigger::after { content: "＋"; color: var(--brand-primary); font-size: var(--fs-h4); }
.accordion__trigger[aria-expanded="true"]::after { content: "－"; }
.accordion__panel { padding-bottom: var(--space-4); font-size: var(--fs-sm); color: var(--color-muted); }

/* ---- filters ------------------------------------------------------------ */
.filter-bar { display: flex; gap: var(--space-2); align-items: center; overflow-x: auto; scrollbar-width: none; padding-block: var(--space-3); }
.filter-bar::-webkit-scrollbar { display: none; }
.filter-sheet__body { display: grid; gap: var(--space-6); }
.filter-group__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }
.filter-group__options { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.toolbar {
  position: sticky;
  /* the measured header height, falling back to the token before JS runs */
  top: var(--header-real-h, var(--header-h));
  /* was a bare z-index:40 competing with whatever the grid produced; now an
     explicit tier below the header. The negative inline margin lets the
     background span the page gutter, so content scrolling underneath is
     properly occluded instead of showing either side of the bar. */
  z-index: var(--z-toolbar);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  margin-inline: calc(-1 * var(--space-4));
  padding-inline: var(--space-4);
  /* Carries the page's grain. A flat fill read as a smooth band slicing through
     the textured page as content scrolled under it. */
  background-color: var(--color-bg);
  background-image: var(--paper-texture);
  background-size: var(--paper-texture-size);
  border-bottom: 1px solid var(--color-line);
  /* a soft edge under the bar so it reads as sitting above the grid rather
     than as a gap punched through it */
  box-shadow: 0 6px 12px -8px rgba(90, 52, 30, 0.35);
}
.toolbar__count { font-size: var(--fs-caption); color: var(--color-muted); margin-right: auto; white-space: nowrap; }
.toolbar select {
  min-height: 42px;
  padding: 0 var(--space-3);
  border: 1.5px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--fs-sm);
}

/* ---- cart --------------------------------------------------------------- */
.cart-layout { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .cart-layout { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--space-7); } }

.cline {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-line);
}
.cline__media { width: 76px; height: 76px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface-2); }
.cline__media img { width: 100%; height: 100%; object-fit: cover; }
.cline__name { font-family: var(--font-display); font-size: var(--fs-h4); }
.cline__meta { font-size: var(--fs-caption); color: var(--color-muted); }
.cline__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.cline__total { font-weight: var(--fw-semibold); }
.cline__remove { background: none; border: none; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-muted); cursor: pointer; padding: var(--space-1) 0; }
.cline__remove:hover { color: var(--color-danger); }

.summary {
  position: sticky;
  top: calc(var(--header-real-h, var(--header-h)) + var(--space-4));
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.summary__title { font-family: var(--font-display); font-size: var(--fs-h3); margin-bottom: var(--space-4); }
.bill__row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; font-size: var(--fs-sm); color: var(--color-muted); }
.bill__row span:last-child { color: var(--color-text); font-variant-numeric: tabular-nums; }
.bill__row--total {
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-line-strong);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.bill__row--discount span:last-child { color: var(--color-success); }
.summary__actions { display: grid; gap: var(--space-3); margin-top: var(--space-5); }

.coupon { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.coupon input { flex: 1; min-height: 44px; }

/* ---- checkout stepper --------------------------------------------------- */
.stepper-nav { display: flex; gap: var(--space-2); margin-block: var(--space-5); overflow-x: auto; scrollbar-width: none; }
.stepper-nav::-webkit-scrollbar { display: none; }
.stepper-nav__item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-muted);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: none; border: none;
}
.stepper-nav__num {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--color-surface-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}
.stepper-nav__item[aria-current="step"] { background: var(--brand-primary-soft); color: var(--brand-primary); }
.stepper-nav__item[aria-current="step"] .stepper-nav__num { background: var(--brand-primary); color: var(--color-on-primary); }
.stepper-nav__item.is-done { color: var(--color-success); }
.stepper-nav__item.is-done .stepper-nav__num { background: var(--color-success); color: var(--color-on-status); }

.checkout-step { display: none; }
.checkout-step.is-active { display: block; animation: fade-in var(--dur-slow) var(--ease-out); }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } }
.checkout-nav { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.checkout-nav .btn { flex: 1; }

.form-row { display: grid; gap: var(--space-4); }
@media (min-width: 600px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }

/* ---- order tracking timeline -------------------------------------------- */
.timeline { display: grid; gap: 0; margin-block: var(--space-5); }
.timeline__step { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-4); }
.timeline__marker { display: grid; justify-items: center; }
.timeline__dot {
  width: 14px; height: 14px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 2px solid var(--color-line-strong);
  flex: none;
}
.timeline__line { width: 2px; flex: 1; min-height: 26px; background: var(--color-line); }
.timeline__step:last-child .timeline__line { display: none; }
.timeline__body { padding-bottom: var(--space-4); }
.timeline__title { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--color-muted); }
.timeline__step.is-done .timeline__dot { background: var(--color-success); border-color: var(--color-success); }
.timeline__step.is-done .timeline__line { background: var(--color-success); }
.timeline__step.is-done .timeline__title { color: var(--color-text); }
.timeline__step.is-current .timeline__dot { background: var(--brand-primary); border-color: var(--brand-primary); box-shadow: 0 0 0 4px var(--brand-primary-soft); }
.timeline__step.is-current .timeline__title { color: var(--brand-primary); font-weight: var(--fw-bold); }
.timeline--cancelled .timeline__step.is-current .timeline__dot { background: var(--color-danger); border-color: var(--color-danger); box-shadow: 0 0 0 4px var(--color-danger-soft); }

/* ---- order confirmation ------------------------------------------------- */
.confirm-hero {
  display: grid; justify-items: center; gap: var(--space-3);
  padding: var(--space-7) var(--space-4);
  text-align: center;
  background: var(--color-success-soft);
  border-radius: var(--radius-lg);
  margin-block: var(--space-5);
}
.confirm-hero__tick {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  background: var(--color-success);
  color: var(--color-on-status);
  border-radius: 50%;
  font-size: 1.75rem;
}
.order-code {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: 0.08em;
}

.pay-panel { display: grid; justify-items: center; gap: var(--space-4); text-align: center; padding: var(--space-5); }
/* pure white, not a token: UPI QR contrast is a scanner requirement */
.qr-box { background: #fff; padding: var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.qr-box svg { display: block; width: 190px; height: 190px; }
.pay-vpa { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--color-muted); letter-spacing: 0.04em; }
.ref-form { display: flex; gap: var(--space-2); width: 100%; max-width: 380px; }
.ref-form input { flex: 1; }

/* ---- reviews ------------------------------------------------------------ */
.review { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line); }
.review__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.review__author { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.review__date { font-size: var(--fs-caption); color: var(--color-muted); margin-left: auto; }
.stars { display: inline-flex; gap: 2px; color: var(--brand-accent); font-size: var(--fs-sm); }
.stars--empty { color: var(--color-line-strong); }

/* ---- ad carousel -------------------------------------------------------- */
.ads { margin-inline: calc(-1 * var(--space-4)); }
.ads__track {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--space-4);
  scrollbar-width: none;
}
.ads__track::-webkit-scrollbar { display: none; }
.ad-slide {
  scroll-snap-align: center;
  /* phones show exactly one slide; the track's own padding is the gutter */
  flex: 0 0 100%;
  min-height: 150px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--ad-bg, var(--brand-primary));
  background-size: cover;
  background-position: center;
  color: var(--ad-fg, #fff);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease);
}
.ad-slide:hover { transform: translateY(-2px); color: var(--ad-fg, #fff); }
.ad-slide h3 { color: inherit; font-size: var(--fs-h3); }
.ad-slide p { font-size: var(--fs-sm); opacity: 0.92; margin-top: 2px; }
.ad-slide__cta { display: inline-block; margin-top: var(--space-3); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.ads__dots { display: flex; gap: 6px; justify-content: center; }
.ads__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-line-strong); transition: all var(--dur) var(--ease); }
.ads__dots i.is-active { background: var(--brand-primary); width: 20px; border-radius: 3px; }

/* From tablet up the slides share the row instead of being a fixed fraction of
   it. A fixed 38% meant three slides always totalled >100% and the last one was
   clipped at the edge, which reads as a bug rather than a carousel peek.
   min-width keeps them legible, so a long ad list still scrolls. */
@media (min-width: 700px) {
  .ad-slide { flex: 1 1 0; min-width: 240px; }
}

/* dots are only meaningful when the track actually scrolls */
.ads__dots[hidden] { display: none; }