/* ==========================================================================
   FASTDELHIVERY — Design System : Components
   Every reusable surface: cards, sliders, product card, cart, checkout, states.
   ========================================================================== */

/* Toasts: one stylesheet for the storefront and the admin (it has to come first). */
@import url("toast.css");

/* ==========================================================================
   Card primitive
   ========================================================================== */

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.card--hover:hover { border-color: var(--brand-100); box-shadow: var(--sh-2); transform: translateY(-4px); }
.card--flat { border-radius: var(--r); box-shadow: none; }
.card--pad-lg { padding: 28px; }

.icon-tile {
  width: 52px; height: 52px;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand-600);
  margin-bottom: 16px;
  flex: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.card--hover:hover .icon-tile { background: var(--brand); color: #fff; }

/* ==========================================================================
   Hero slider
   ========================================================================== */

.hero {
  position: relative;
  background: var(--bg-soft);
}

.hero__viewport {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  min-height: clamp(390px, 42vw, 520px);
}

.hero__track { display: flex; height: 100%; transition: transform var(--t-slow); }

.hero__slide {
  flex: 0 0 100%;
  min-width: 100%;
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(390px, 42vw, 520px);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: transparent;
}


/* The slide's text column carries .container in the markup, so it shares the
   site's gutter exactly. Only the vertical rhythm and colour belong here —
   re-declaring the width would let the hero drift out of alignment with the
   sections below it. */
.hero__content {
  position: relative;
  z-index: 2;
  padding-block: 48px;
  color: #fff;
}
.hero__inner { max-width: 620px; }

.hero__slide.is-active .hero__inner > * { animation: fd-fade-up .6s both; }
.hero__slide.is-active .hero__inner > *:nth-child(2) { animation-delay: .08s; }
.hero__slide.is-active .hero__inner > *:nth-child(3) { animation-delay: .16s; }
.hero__slide.is-active .hero__inner > *:nth-child(4) { animation-delay: .24s; }
.hero__slide.is-active .hero__inner > *:nth-child(5) { animation-delay: .32s; }

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.hero h2 {
  color: #fff;
  font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.4rem);
  margin-bottom: 14px;
}
.hero__desc {
  color: var(--on-dark);
  font-size: clamp(.95rem, .9rem + .35vw, 1.1rem);
  max-width: 520px;
  margin-bottom: 22px;
}

.hero__discount {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 26px;
  background: var(--brand);
  color: #fff;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-brand);
}
.hero__discount b { font-size: 1.4rem; font-weight: 900; letter-spacing: -.03em; }
.hero__discount span { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  backdrop-filter: blur(6px);
  transition: background var(--t-fast);
}
.hero__arrow:hover { background: var(--brand); border-color: var(--brand); }
.hero__arrow--prev { left: 18px; }
.hero__arrow--next { right: 18px; }

.hero__dots {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 9px;
}
.hero__dot {
  width: 9px; height: 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .45);
  transition: width var(--t), background var(--t);
}
.hero__dot.is-active { width: 30px; background: var(--brand); }

```css
@media (max-width: 860px) {
  .hero__arrow {
    display: none;
  }

  /* Remove black overlay on mobile */
  .hero__scrim {background: transparent;
  }
.hero__content {padding-block: 40px 62px; }
}
```

/* ---- Trust strip under hero -------------------------------------------- */
@media (max-width: 900px) {
  .trust-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: -20px;
  }
  .trust-strip__item {
    padding: 12px 6px;
    gap: 6px;
    flex-direction: column;
    text-align: center;
  }

  .trust-strip__item b {
    font-size: 11px;
  }

  .trust-strip__item span {
    font-size: 9px;
    line-height: 1.3;
  }

  .trust-strip__item svg {
    width: 22px;
    height: 22px;
  }
}

.trust-strip__item {
  background: #fff;
  padding: 20px 18px;
  display: flex;
  align-items: center;
  gap: 13px;
}
.trust-strip__item svg { color: var(--brand); flex: none; }
.trust-strip__item b { display: block; font-size: .9rem; color: var(--ink); }
.trust-strip__item span { font-size: .78rem; color: var(--muted); }

@media (max-width: 900px) { .trust-strip { grid-template-columns: repeat(2, 1fr); margin-top: -20px; } }
@media (max-width: 460px) { .trust-strip__item { padding: 14px 12px; gap: 10px; } .trust-strip__item svg { width: 22px; height: 22px; } }

/* ==========================================================================
   Category cards
   ========================================================================== */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
}

.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 24px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
  color: var(--ink);
}
.cat-card:hover { transform: translateY(-5px); border-color: var(--brand-100); box-shadow: var(--sh-2); color: var(--ink); }

.cat-card__img {
  width: 76px; height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-soft);
}
/* An uploaded icon sits whole inside the same circle: contained, never
   stretched, never cropped, never spilling past the border-radius. */
.cat-card__img--icon {
  object-fit: contain;
  padding: 8px;
}
.cat-card__name { font-weight: 800; font-size: .95rem; color: var(--ink); }
.cat-card__count { font-size: .76rem; color: var(--muted); margin-top: -6px; }
.cat-card__cta { font-size: .78rem; font-weight: 800; color: var(--brand-600); }

@media (max-width: 520px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cat-card { padding: 18px 10px; }
  .cat-card__img { width: 62px; height: 62px; }
}

/* ---- Home: category slider ----------------------------------------------
   One row however many categories there are. The row scrolls sideways — a
   swipe, a trackpad, the arrows or a mouse drag (components/rail.js) — and
   never wraps, so the section is as tall as one card. Only the row scrolls,
   inside its own box: the page itself never gets wider than the screen. */

.cat-rail { position: relative; }

.cat-rail__track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Bleed to the container's outer edges and put the gutter back as padding
     (as .rail-mobile does), so a swipe can start anywhere across the screen
     while the first card still lines up with the heading above. The block
     padding keeps the cards' hover lift and shadow from being clipped. */
  margin: -8px calc(var(--container-pad) * -1) -18px;
  padding: 8px var(--container-pad) 18px;
  scroll-padding-inline: var(--container-pad);
}
.cat-rail__track::-webkit-scrollbar { display: none; }
.cat-rail__track:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--r-lg); }

.cat-rail__track > .cat-card {
  flex: 0 0 172px;
  min-width: 0;
  scroll-snap-align: start;
}

.cat-rail__actions { align-items: center; }
[data-cat-nav][hidden] { display: none; }

@media (max-width: 520px) {
  .cat-rail__track { gap: 12px; }
  .cat-rail__track > .cat-card { flex-basis: 136px; }
}

/* Shared by every rail: a mouse drag in progress, and the hint that one is possible. */
.cat-rail__track.is-dragging,
.promo-banners__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.cat-rail__track.is-dragging a,
.promo-banners__track.is-dragging a { cursor: grabbing; }
@media (hover: hover) and (pointer: fine) {
  .is-scrollable > .cat-rail__track,
  .is-scrollable > .promo-banners__track { cursor: grab; }
}

/* ==========================================================================
   Home: promotional banners
   One uploaded image per banner, shown just above Latest Offers — so when no
   offer is live the banners fill that place. Every banner keeps its own
   proportions (never cropped, never stretched) and scales with the screen.
   ========================================================================== */

.promo-banners[hidden] { display: none; }
#offers[hidden] { display: none; }
/* Straight after Best Selling, that section's own padding is the gap. */
#best-selling + .promo-banners { padding-top: 0; }

.promo-banners__frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-soft);
}

.promo-banners__track {
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.promo-banners__track::-webkit-scrollbar { display: none; }
.promo-banners__track:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--r-lg); }

.promo-banner {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.promo-banner__link { display: block; color: inherit; }
.promo-banner__img { display: block; width: 100%; height: auto; }

/* Under the picture, never over it: "Offer Ends In" with the countdown, or —
   once the banner's end has passed — only "Offer Ended". Both take the same
   height, so a banner ending does not move anything. */
.promo-banner__status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 8px 14px;
  background: var(--navy);
  color: #fff;
}
/* A banner with a strip is as tall as the tallest slide, its strip taking up
   the difference — so a countdown and an "Offer Ended" side by side line up. */
.promo-banner--status { align-self: stretch; display: flex; flex-direction: column; }
.promo-banner--status > .promo-banner__status { flex: 1 1 auto; }
.promo-banner__status .countdown { margin-bottom: 0; flex-wrap: wrap; justify-content: center; }
.promo-banner__ended {
  display: inline-block;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
@media (max-width: 520px) {
  .promo-banner__status { padding: 8px 10px; }
  .promo-banner__status .countdown { gap: 6px; }
  .promo-banner__status .countdown__box { min-width: 40px; padding: 4px 5px; }
}

.promo-banners__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: var(--sh-2);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.promo-banners__arrow:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.promo-banners__arrow--prev { left: 14px; }
.promo-banners__arrow--next { right: 14px; }
.promo-banners__arrow[hidden] { display: none; }

.promo-banners__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.promo-banners__dots[hidden] { display: none; }

.rail-dot {
  width: 9px; height: 9px;
  border-radius: var(--r-pill);
  background: var(--line);
  transition: width var(--t), background var(--t);
}
.rail-dot.is-active { width: 28px; background: var(--brand); }
.rail-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Phones swipe; the arrows would only cover the picture. */
@media (max-width: 860px) {
  .promo-banners__arrow { display: none; }
}

/* ==========================================================================
   PRODUCT CARD — single reusable component used on every listing surface
   ========================================================================== */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
}
.product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: var(--brand-100); }

.product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--bg-soft);
  overflow: hidden;
}
.product-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.product-card:hover .product-card__img { transform: scale(1.07); }

.product-card__badges {
  position: absolute;
  top: 10px; left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 2;
}

.product-card__stock {
  position: absolute;
  bottom: 10px; left: 10px;
  z-index: 2;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px 15px 0;
  flex: 1;
}

.product-card__cat {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.product-card__name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.product-card__name:hover { color: var(--brand-600); }

.product-card__desc {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__price { margin-top: auto; padding-top: 4px; }

.product-card__actions {
  display: grid;
  gap: 8px;
  padding: 14px 15px 15px;
}

@media (min-width: 861px) {
  .product-card__actions { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product-card__body { padding: 12px 12px 0; gap: 6px; }
  .product-card__actions { padding: 12px; gap: 6px; }
  .product-card__desc { display: none; }
  .product-card__name { font-size: .85rem; min-height: 2.4em; }
  .price__sell { font-size: 1rem; }
  .btn--sm { padding: 8px 10px; font-size: .78rem; }
}

/* Below ~360px, two cards leave a column narrower than the card's own buttons,
   which then spill out of the card. One card per row instead. */
@media (max-width: 360px) {
  .product-grid, .product-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Star rating ------------------------------------------------------- */

.rating { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; }
.rating__stars { display: inline-flex; gap: 1px; color: var(--star); }
.rating__stars svg { width: 13px; height: 13px; }
.rating__value { font-weight: 800; color: var(--ink); }
.rating__count { color: var(--muted-2); }

.rating--lg .rating__stars svg { width: 17px; height: 17px; }
.rating--lg { font-size: .88rem; }

/* ---- Quantity stepper -------------------------------------------------- */

.qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: #fff;
}
.qty button {
  width: 38px; height: 40px;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 700;
  transition: background var(--t-fast), color var(--t-fast);
}
.qty button:hover:not([disabled]) { background: var(--brand-50); color: var(--brand-600); }
.qty button[disabled] { opacity: .35; cursor: not-allowed; }
.qty input {
  width: 46px;
  height: 40px;
  border: 0;
  text-align: center;
  font-weight: 800;
  font-size: .92rem;
  background: transparent;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: none; }

/* ==========================================================================
   Offers
   ========================================================================== */

.offer-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 22px;
}
.offer-grid__col { display: grid; gap: 22px; }

.offer-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 240px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  isolation: isolate;
}
.offer-card__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--t-slow);
}
.offer-card:hover .offer-card__img { transform: scale(1.05); }
.offer-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(0, 0, 0, .93) 6%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .2) 100%);
}
.offer-card__body { padding: 26px; width: 100%; }
.offer-card h3 { color: #fff; margin-bottom: 6px; }
.offer-card p { color: #d9d9d9; font-size: .86rem; margin-bottom: 14px; }
.offer-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.offer-card--tall { min-height: 502px; }

.countdown { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.countdown__label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #d9d9d9; }
.countdown__boxes { display: flex; gap: 6px; }
.countdown__box {
  min-width: 42px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-xs);
  padding: 5px 7px;
  text-align: center;
  backdrop-filter: blur(4px);
}
.countdown__box b { display: block; font-size: 1rem; font-weight: 900; color: #fff; line-height: 1.2; }
.countdown__box span { font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: #d9d9d9; }
.countdown.is-expired .countdown__boxes { opacity: .55; }

@media (max-width: 900px) {
  .offer-grid { grid-template-columns: 1fr; }
  .offer-card--tall { min-height: 260px; }
}

/* ==========================================================================
   Why choose us / services
   ========================================================================== */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.feature-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.feature-card p { color: var(--muted); font-size: .88rem; margin: 0; }

.service-card { display: flex; flex-direction: column; height: 100%; }
.service-card p { flex: 1; margin-bottom: 16px; }

/* ==========================================================================
   About
   ========================================================================== */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}

.about-media { position: relative; }
.about-media img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--sh-3); }
.about-media__badge {
  position: absolute;
  right: -14px;
  bottom: 26px;
  background: #fff;
  border-radius: var(--r-lg);
  padding: 18px 22px;
  box-shadow: var(--sh-3);
  text-align: center;
  min-width: 140px;
}
.about-media__badge b { display: block; font-size: 1.7rem; font-weight: 900; color: var(--brand); letter-spacing: -.03em; }
.about-media__badge span { font-size: .76rem; font-weight: 700; color: var(--muted); }

.about-points { display: grid; gap: 16px; margin: 22px 0 26px; }
.about-point { display: flex; gap: 14px; }
.about-point__icon {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--brand-50);
  color: var(--brand-600);
  display: grid; place-items: center;
  flex: none;
}
.about-point h4 { margin-bottom: 3px; font-size: .95rem; }
.about-point p { font-size: .86rem; color: var(--muted); margin: 0; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  margin-top: 34px;
}
.stat { text-align: center; }
.stat b { display: block; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 900; color: var(--brand); letter-spacing: -.03em; }
.stat span { font-size: .82rem; color: var(--muted); font-weight: 600; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-media__badge { right: 14px; bottom: 14px; }
}

/* ==========================================================================
   Home: Media & Education slider
   Five topic cards in one row between About and the offers banner: three in
   view on a desktop, two on a tablet, one on a phone. The row scrolls natively
   (swipe, trackpad) and components/rail.js adds arrows, dots, mouse drag and
   the 4-second autoplay. Only the row scrolls, inside its own box.
   ========================================================================== */

/* The banner below brings its own top padding; together they make one gap. */
.media-edu { padding-bottom: clamp(14px, 1vw + 8px, 28px); }

.media-edu__actions { align-items: center; }
[data-medu-nav][hidden] { display: none; }

.media-edu__rail { position: relative; }

.media-edu__track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Bleed to the container's edges with the gutter put back as padding (as the
     category slider does): a swipe can start anywhere across the screen and the
     first card still lines up with the heading. The block padding keeps a
     card's hover lift and shadow from being clipped. */
  margin: -8px calc(var(--container-pad) * -1) -18px;
  padding: 8px var(--container-pad) 18px;
  scroll-padding-inline: var(--container-pad);
}
.media-edu__track::-webkit-scrollbar { display: none; }
.media-edu__track:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--r-lg); }
.media-edu__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.media-edu__track.is-dragging a { cursor: grabbing; }
@media (hover: hover) and (pointer: fine) {
  .is-scrollable > .media-edu__track { cursor: grab; }
}

.media-edu-card {
  flex: 0 0 calc((100% - 44px) / 3);
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.media-edu-card:hover { border-color: var(--brand-100); box-shadow: var(--sh-2); transform: translateY(-4px); }

/* ---- Thumbnail: a drawn tile, or a picture / video poster laid over it ---- */
.media-edu-card__thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-500) 100%);
}
.media-edu-card__thumb::before,
.media-edu-card__thumb::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 90, 31, .45), transparent 70%);
  pointer-events: none;
}
.media-edu-card__thumb::before { width: 62%; aspect-ratio: 1; right: -18%; top: -46%; }
.media-edu-card__thumb::after { width: 46%; aspect-ratio: 1; left: -16%; bottom: -44%; opacity: .7; }

.media-edu-card__thumb--video { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 100%); }
.media-edu-card__thumb--video::before,
.media-edu-card__thumb--video::after { background: radial-gradient(circle, rgba(255, 255, 255, .3), transparent 70%); }
.media-edu-card__thumb--guide { background: linear-gradient(135deg, var(--brand-50) 0%, var(--brand-100) 100%); color: var(--brand-700); }
.media-edu-card__thumb--guide::before,
.media-edu-card__thumb--guide::after { background: radial-gradient(circle, rgba(255, 90, 31, .22), transparent 70%); }
.media-edu-card__thumb--awareness { background: linear-gradient(120deg, var(--navy-700) 0%, #4d0f12 100%); }
.media-edu-card__thumb--services { background: linear-gradient(135deg, var(--bg-soft-2) 0%, #e2e2e2 100%); color: var(--navy); }
.media-edu-card__thumb--services::before,
.media-edu-card__thumb--services::after { background: radial-gradient(circle, rgba(0, 0, 0, .12), transparent 70%); }

.media-edu-card__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.media-edu-card:hover .media-edu-card__img { transform: scale(1.04); }

.media-edu-card__art,
.media-edu-card__play {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  transition: transform var(--t);
}
.media-edu-card__art {
  width: 76px; height: 76px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
}
.media-edu-card__thumb--guide .media-edu-card__art,
.media-edu-card__thumb--services .media-edu-card__art { background: #fff; border-color: #fff; box-shadow: var(--sh-2); }
.media-edu-card__play {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  box-shadow: var(--sh-3);
}
.media-edu-card__play svg { margin-left: 3px; }      /* the triangle looks centred a little right of centre */
.media-edu-card:hover .media-edu-card__art,
.media-edu-card:hover .media-edu-card__play { transform: scale(1.07); }
/* Over a real picture only the play mark stays; the drawn icon would hide it. */
.media-edu-card__img ~ .media-edu-card__art { display: none; }

.media-edu-card__tag {
  position: absolute;
  z-index: 2;
  left: 14px; top: 14px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.media-edu-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}
.media-edu-card__title { font-size: 1.08rem; margin-bottom: 8px; }
.media-edu-card__text { color: var(--muted); font-size: .9rem; margin: 0 0 18px; flex: 1; }
.media-edu-card__cta { align-self: flex-start; gap: 7px; }

.media-edu__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.media-edu__dots[hidden] { display: none; }

@media (max-width: 1024px) {
  .media-edu-card { flex-basis: calc((100% - 22px) / 2); }
}
@media (max-width: 640px) {
  .media-edu__track { gap: 14px; }
  .media-edu-card { flex-basis: 100%; scroll-snap-stop: always; }
  .media-edu-card__body { padding: 18px 18px 20px; }
  /* The arrows keep their place beside the button instead of stretching. */
  .media-edu__actions { width: 100%; }
  .media-edu__actions .slider-nav { margin-left: auto; }
}

/* ==========================================================================
   CTA banner
   ========================================================================== */

.cta-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-500) 62%, #4d0f12 100%);
  color: #fff;
  padding: clamp(34px, 4vw, 60px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.cta-banner::before,
.cta-banner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 90, 31, .42), transparent 70%);
}
.cta-banner::before { width: 340px; height: 340px; right: -70px; top: -130px; }
.cta-banner::after { width: 260px; height: 260px; left: -90px; bottom: -140px; opacity: .6; }
.cta-banner__text { position: relative; z-index: 1; max-width: 620px; }
.cta-banner h2 { color: #fff; margin-bottom: 10px; }
.cta-banner p { color: var(--on-dark-muted); margin: 0; }
.cta-banner .btn-row { position: relative; z-index: 1; }

/* ==========================================================================
   Reviews
   ========================================================================== */

.review-slider { position: relative; overflow: hidden; }
.review-track {
  display: flex;
  gap: 22px;
  transition: transform var(--t-slow);
}
.review-card {
  flex: 0 0 calc((100% - 44px) / 3);
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.review-card__quote {
  font-size: .92rem;
  line-height: 1.75;
  color: var(--ink-700);
  flex: 1;
}
.review-card__head { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-soft-2);
  flex: none;
}
.review-card__name { font-weight: 800; font-size: .92rem; color: var(--ink); }
.review-card__date { font-size: .76rem; color: var(--muted-2); }

.slider-nav { display: flex; gap: 8px; }
.slider-nav button {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: all var(--t-fast);
}
.slider-nav button:hover:not([disabled]) { background: var(--brand); border-color: var(--brand); color: #fff; }
.slider-nav button[disabled] { opacity: .4; cursor: not-allowed; }

@media (max-width: 980px) { .review-card { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 680px) { .review-card { flex-basis: 100%; padding: 22px; } }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-grid {
  display: grid;
  /* minmax(0, …): a long email address wraps instead of widening the page on a phone. */
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 30px;
  align-items: start;
}

.contact-info { display: grid; gap: 14px; }
.contact-item {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.contact-item:hover { border-color: var(--brand-100); box-shadow: var(--sh-1); }
.contact-item__icon {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--brand-50);
  color: var(--brand-600);
  display: grid; place-items: center;
  flex: none;
}
.contact-item h4 { font-size: .82rem; margin-bottom: 3px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.contact-item p, .contact-item a { font-size: .95rem; font-weight: 700; color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.contact-item > :not(.contact-item__icon) { min-width: 0; }
.contact-item a:hover { color: var(--brand-600); }

@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Toasts — in toast.css (imported at the top of this file), the one
   stylesheet the storefront and the admin share
   ========================================================================== */

/* The storefront's info toast in its black-and-white palette (the admin's stays blue). */
.toast-wrap .toast--info { border-color: var(--line); border-left-color: var(--ink); }
.toast-wrap .toast--info .toast__title { color: var(--ink); }

/* ==========================================================================
   Skeletons / loaders / states
   ========================================================================== */

.skeleton {
  background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 50%, #eef1f6 75%);
  background-size: 420px 100%;
  animation: fd-shimmer 1.25s linear infinite;
  border-radius: var(--r-xs);
}

.sk-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}
.sk-card__media { aspect-ratio: 1/1; }
.sk-card__body { padding: 15px; display: grid; gap: 9px; }
.sk-line { height: 11px; border-radius: var(--r-pill); }
.sk-line--60 { width: 60%; }
.sk-line--40 { width: 40%; }
.sk-line--80 { width: 80%; }
.sk-btn { height: 38px; border-radius: var(--r-pill); }

.empty-state {
  text-align: center;
  padding: clamp(38px, 5vw, 70px) 24px;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}
.empty-state__icon {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--muted-2);
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
}
.empty-state h1,
.empty-state h3 { font-size: clamp(1.15rem, 1rem + .55vw, 1.45rem); margin-bottom: 8px; }
.empty-state p { color: var(--muted); max-width: 440px; margin: 0 auto 22px; }

.state-error {
  background: var(--danger-bg);
  border: 1px solid rgba(225, 29, 72, .2);
  border-radius: var(--r);
  padding: 18px 20px;
  color: #9f1239;
  font-size: .9rem;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* ==========================================================================
   ALL PRODUCTS — toolbar, filters, grid
   ========================================================================== */

.shop-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.filters {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  max-height: calc(100vh - var(--header-h) - 40px);
  overflow-y: auto;
}

.filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.filters__head h3 { margin: 0; font-size: 1rem; }
.filters__reset { font-size: .78rem; font-weight: 800; color: var(--brand-600); }

.filter-group { padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.filter-group:last-child { border-bottom: 0; padding-bottom: 0; }
.filter-group__title {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
.filter-list { display: grid; gap: 9px; }

.filter-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .87rem;
  color: var(--ink-700);
  cursor: pointer;
  padding: 2px 0;
}
.filter-opt input { width: 17px; height: 17px; accent-color: var(--brand); flex: none; cursor: pointer; }
.filter-opt:hover { color: var(--brand-600); }
.filter-opt__count { margin-left: auto; font-size: .74rem; color: var(--muted-2); font-weight: 700; }

.price-inputs { display: flex; align-items: center; gap: 8px; }
.price-inputs input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-xs);
  font-size: .85rem;
  -moz-appearance: textfield;
}
.price-inputs input::-webkit-outer-spin-button,
.price-inputs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-inputs input:focus { outline: none; border-color: var(--brand); }
.price-inputs span { color: var(--muted-2); }

.shop-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 16px;
  margin-bottom: 20px;
}
.shop-toolbar__count { font-size: .87rem; color: var(--muted); }
.shop-toolbar__count b { color: var(--ink); }
.shop-toolbar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.shop-toolbar select { height: 42px; min-height: 0; width: auto; min-width: 190px; }
.shop-toolbar .field { flex-direction: row; align-items: center; gap: 8px; }
.shop-toolbar .field__label { white-space: nowrap; font-size: .8rem; color: var(--muted); }

.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--brand-700);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: .78rem;
  font-weight: 700;
}
.chip button { color: inherit; display: grid; place-items: center; opacity: .7; }
.chip button:hover { opacity: 1; }

.filters-toggle { display: none; }

@media (max-width: 1000px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filters {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 88vw);
    max-height: none;
    height: 100dvh;
    border-radius: 0;
    z-index: 91;
    transform: translateX(102%);
    transition: transform var(--t);
    box-shadow: var(--sh-3);
    padding-bottom: 90px;
  }
  .filters.is-open { transform: none; }
  .filters-toggle { display: inline-flex; }
  .filters__apply {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 14px 20px;
    background: #fff;
    border-top: 1px solid var(--line);
  }
}

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 34px; flex-wrap: wrap; }
.pagination button {
  min-width: 42px; height: 42px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line);
  background: #fff;
  font-weight: 700;
  font-size: .87rem;
  transition: all var(--t-fast);
}
.pagination button:hover:not([disabled]):not(.is-active) { border-color: var(--brand); color: var(--brand-600); }
.pagination button.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination button[disabled] { opacity: .4; cursor: not-allowed; }

/* ==========================================================================
   PRODUCT DETAILS
   ========================================================================== */

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.pdp-gallery { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 14px; }

.pdp-stage {
  position: relative;
  aspect-ratio: 1/1;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-soft);
  cursor: zoom-in;
}
.pdp-stage img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.pdp-stage.is-zoomed img { transform: scale(1.9); }
.pdp-stage__badges { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; gap: 7px; z-index: 2; }
.pdp-stage__hint {
  position: absolute;
  right: 14px; bottom: 14px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  z-index: 2;
  pointer-events: none;
}

.pdp-thumbs { display: flex; gap: 12px; flex-wrap: wrap; }
.pdp-thumb {
  width: 76px; height: 76px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 2px solid var(--line);
  background: var(--bg-soft);
  transition: border-color var(--t-fast);
  flex: none;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb:hover { border-color: var(--brand-100); }
.pdp-thumb.is-active { border-color: var(--brand); }

.pdp-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.pdp-info h1 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.05rem); margin: 0; }

.pdp-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.pdp-meta__sep { width: 1px; height: 16px; background: var(--line); }

.pdp-price {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
}
.pdp-price__row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pdp-price__sell { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 900; color: var(--ink); letter-spacing: -.03em; }
.pdp-price__mrp { font-size: 1rem; color: var(--muted-2); text-decoration: line-through; }
.pdp-price__save { margin-top: 6px; font-size: .84rem; font-weight: 700; color: var(--success); }
.pdp-price__tax { font-size: .76rem; color: var(--muted); margin-top: 4px; }

.pdp-buy { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pdp-buy__label { font-size: .84rem; font-weight: 700; color: var(--ink); }
.pdp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pdp-actions .btn--block { grid-column: 1 / -1; }

.pdp-usp { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; padding-top: 4px; }
.pdp-usp__item { display: flex; gap: 10px; align-items: center; font-size: .82rem; font-weight: 600; color: var(--ink-700); }
.pdp-usp__item svg { color: var(--brand); flex: none; }

.spec-table { font-size: .88rem; }
.spec-table tr { border-bottom: 1px solid var(--line-2); }
.spec-table tr:last-child { border-bottom: 0; }
.spec-table th {
  text-align: left;
  padding: 11px 14px 11px 0;
  color: var(--muted);
  font-weight: 600;
  width: 42%;
  vertical-align: top;
}
.spec-table td { padding: 11px 0; color: var(--ink); font-weight: 700; }

.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; }
.tab {
  padding: 12px 18px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--brand-600); border-bottom-color: var(--brand); }
.tab-panel[hidden] { display: none; }

.review-list { display: grid; gap: 16px; }
.review-row { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.review-row__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }

@media (max-width: 900px) {
  /* minmax(0, …) for the same reason the two-column rule above uses it: a bare
     1fr floors at the column's min-content, which on a narrow phone is wider
     than the screen and scrolls the whole page sideways. */
  .pdp { grid-template-columns: minmax(0, 1fr); }
  .pdp-gallery { position: static; }
  .pdp-stage__hint { display: none; }
}
@media (max-width: 560px) {
  .pdp-thumb { width: 62px; height: 62px; }
  /* ADD TO AUTO CART and BUY NOW do not wrap, so side by side they need about
     430px. Stack them instead of letting that widen the whole page. */
  .pdp-actions { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   CART
   ========================================================================== */

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: start;
}

.cart-items { display: grid; gap: 14px; }

.cart-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cart-row:hover { border-color: var(--brand-100); box-shadow: var(--sh-1); }
.cart-row.is-removing { opacity: 0; transform: translateX(24px); transition: all var(--t); }

.cart-row__img {
  width: 104px; height: 104px;
  border-radius: var(--r);
  object-fit: cover;
  background: var(--bg-soft);
}
.cart-row__info { display: grid; gap: 6px; min-width: 0; }
.cart-row__name { font-weight: 800; font-size: .96rem; color: var(--ink); line-height: 1.4; }
.cart-row__name:hover { color: var(--brand-600); }
.cart-row__variant { font-size: .78rem; color: var(--muted); }
.cart-row__ctl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.cart-row__remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
  transition: color var(--t-fast);
}
.cart-row__remove:hover { color: var(--danger); }

.cart-row__total { text-align: right; display: grid; gap: 3px; }
.cart-row__total b { font-size: 1.12rem; font-weight: 900; color: var(--ink); letter-spacing: -.02em; }
.cart-row__total span { font-size: .76rem; color: var(--muted-2); }
.cart-row__saved { font-size: .74rem; color: var(--success); font-weight: 700; }

@media (max-width: 620px) {
  .cart-row { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
  .cart-row__img { width: 84px; height: 84px; }
  .cart-row__total { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; gap: 10px; }
}

/* ---- Summary card ------------------------------------------------------ */

.summary {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--sh-1);
}
.summary h3 { font-size: 1.08rem; margin-bottom: 18px; }
.summary__rows { display: grid; gap: 12px; padding-bottom: 16px; border-bottom: 1px dashed var(--line); }
.summary__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .89rem; }
.summary__row span { color: var(--muted); }
.summary__row b { color: var(--ink); font-weight: 700; }
.summary__row--save b { color: var(--success); }
.summary__row--free b { color: var(--success); }

.summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 18px;
}
.summary__total span { font-size: .95rem; font-weight: 800; color: var(--ink); }
.summary__total b { font-size: 1.5rem; font-weight: 900; color: var(--ink); letter-spacing: -.03em; }

.summary__note {
  background: var(--success-bg);
  color: #08694a;
  font-size: .78rem;
  font-weight: 700;
  padding: 10px 13px;
  border-radius: var(--r-xs);
  margin-bottom: 14px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.summary__mini { display: grid; gap: 12px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px dashed var(--line); max-height: 260px; overflow-y: auto; }
.summary__mini-row { display: flex; gap: 11px; align-items: center; }
.summary__mini-row img { width: 46px; height: 46px; border-radius: var(--r-xs); object-fit: cover; background: var(--bg-soft); flex: none; }
.summary__mini-info { min-width: 0; flex: 1; }
.summary__mini-name {
  font-size: .82rem; font-weight: 700; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.summary__mini-qty { font-size: .74rem; color: var(--muted); }
.summary__mini-price { font-size: .84rem; font-weight: 800; color: var(--ink); white-space: nowrap; }

@media (max-width: 940px) {
  /* minmax(0, …) as on desktop: the one column never grows past the screen. */
  .cart-layout { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
}

/* ==========================================================================
   CHECKOUT
   ========================================================================== */

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  align-items: start;
}

.co-block {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 20px;
}
.co-block__head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.co-block__num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid; place-items: center;
  font-size: .85rem;
  font-weight: 800;
  flex: none;
}
.co-block__head h2 { font-size: 1.1rem; margin: 0; }
.co-block__head p { font-size: .8rem; color: var(--muted); margin: 0; }

.co-note {
  background: var(--info-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 11px 14px;
  font-size: .8rem;
  color: var(--ink-700);
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 16px;
}
.co-note svg { flex: none; margin-top: 1px; }

/* ---- Saved addresses --------------------------------------------------- */

.address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 18px; }

.address-card {
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  background: #fff;
}
.address-card:hover { border-color: var(--brand-100); box-shadow: var(--sh-1); }
.address-card.is-selected { border-color: var(--brand); background: var(--brand-50); }
.address-card.is-selected::after {
  content: "✓";
  position: absolute;
  top: 14px; right: 14px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.address-card__label { display: flex; align-items: center; gap: 8px; }
.address-card__name { font-weight: 800; font-size: .92rem; color: var(--ink); }
.address-card__mobile { font-size: .82rem; color: var(--muted); font-weight: 600; }
.address-card__text { font-size: .84rem; color: var(--ink-700); line-height: 1.6; }
.address-card__use { margin-top: auto; padding-top: 6px; }

.address-card--add {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: dashed;
  color: var(--brand-600);
  font-weight: 800;
  font-size: .88rem;
  min-height: 150px;
  gap: 10px;
}
.address-card--add:hover { background: var(--brand-50); }

.address-form { display: none; }
.address-form.is-open { display: block; animation: fd-fade-up .3s both; }

/* ---- Payment ----------------------------------------------------------- */

.pay-list { display: grid; gap: 12px; }
.pay-opt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pay-opt:hover { border-color: var(--brand-100); }
.pay-opt.is-selected { border-color: var(--brand); background: var(--brand-50); }
.pay-opt input { width: 19px; height: 19px; accent-color: var(--brand); flex: none; margin-top: 2px; }
.pay-opt__body { flex: 1; min-width: 0; }
.pay-opt__title { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: .93rem; color: var(--ink); flex-wrap: wrap; }
.pay-opt__desc { font-size: .81rem; color: var(--muted); margin-top: 3px; }
.pay-opt__icon { color: var(--brand-600); flex: none; }

@media (max-width: 940px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-layout .summary { position: static; }
}

/* ==========================================================================
   ORDER SUCCESS
   ========================================================================== */

.success-wrap { max-width: 720px; margin-inline: auto; }

.success-hero {
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(32px, 5vw, 56px) 28px;
  box-shadow: var(--sh-2);
}
.success-check {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  animation: fd-pop .55s cubic-bezier(.2, .9, .3, 1.4) both;
}
.success-hero h1 { margin-bottom: 10px; }
.success-hero > p { color: var(--muted); max-width: 480px; margin-inline: auto; }

.success-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin: 28px 0;
  text-align: left;
}
.success-meta__cell { background: #fff; padding: 16px 18px; }
.success-meta__cell span {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 5px;
}
.success-meta__cell b { font-size: .98rem; color: var(--ink); font-weight: 800; letter-spacing: -.01em; }

/* Order confirmation: the order, its payment, invoice and parcel, line by line */
.success-facts { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; text-align: left; }
.success-fact {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; font-size: .9rem; line-height: 1.5; color: var(--ink-700);
}
.success-fact b { color: var(--ink); }
.success-fact__icon {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 1px;
}
.success-fact--ok .success-fact__icon { background: var(--success-bg); color: var(--success); }
.success-fact--wait .success-fact__icon { background: var(--warn-bg); color: #a86a04; }
.success-fact--bad { border-color: var(--danger); background: var(--danger-bg); }
.success-fact--bad .success-fact__icon { background: #fff; color: var(--danger); }

.timeline { display: grid; gap: 0; margin-top: 26px; text-align: left; }
.timeline__step { display: flex; gap: 16px; }
.timeline__rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.timeline__dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-soft-2);
  color: var(--muted-2);
  display: grid; place-items: center;
  font-size: .74rem;
  font-weight: 900;
  border: 2px solid #fff;
}
.timeline__step.is-done .timeline__dot { background: var(--success); color: #fff; }
.timeline__step.is-current .timeline__dot { background: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-50); }
.timeline__line { width: 2px; flex: 1; background: var(--line); min-height: 26px; }
.timeline__step:last-child .timeline__line { display: none; }
.timeline__body { padding-bottom: 22px; }
.timeline__body b { display: block; font-size: .92rem; color: var(--ink); }
.timeline__body span { font-size: .81rem; color: var(--muted); }

/* ==========================================================================
   Content pages (about / services / policy)
   ========================================================================== */

.prose { max-width: 780px; }
.prose h2 { margin-top: 34px; }
.prose h3 { margin-top: 26px; }
.prose p, .prose li { color: var(--ink-700); font-size: .95rem; line-height: 1.8; }
.prose ul { list-style: disc; padding-left: 22px; margin-bottom: 1em; display: grid; gap: 8px; }
.prose ul li { display: list-item; }

.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }

.timeline-h { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
.timeline-h__item { position: relative; padding-top: 24px; }
.timeline-h__item::before {
  content: "";
  position: absolute;
  top: 6px; left: 0; right: 0;
  height: 2px;
  background: var(--line);
}
.timeline-h__item::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--brand-100);
}
.timeline-h__item b { display: block; color: var(--brand); font-size: .82rem; font-weight: 800; letter-spacing: .08em; }
.timeline-h__item h4 { margin: 4px 0 6px; }
.timeline-h__item p { font-size: .86rem; color: var(--muted); margin: 0; }

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  margin-bottom: 12px;
}
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  font-weight: 700;
  font-size: .94rem;
  color: var(--ink);
  text-align: left;
}
.faq-item__q svg { flex: none; transition: transform var(--t); color: var(--muted); }
.faq-item.is-open .faq-item__q { color: var(--brand-600); }
.faq-item.is-open .faq-item__q svg { transform: rotate(180deg); color: var(--brand); }
.faq-item__a { padding: 0 20px 18px; font-size: .89rem; color: var(--muted); line-height: 1.75; }
.faq-item__a[hidden] { display: none; }

/* ==========================================================================
   Horizontal scroller (mobile product rails)
   ========================================================================== */

@media (max-width: 560px) {
  .rail-mobile {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    /* Bleed to the screen edges by cancelling exactly the container's gutter,
       then put it back as padding so the first and last card still line up
       with the text above. Hard-coding the value here would overhang the
       moment --container-pad changes. */
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
    -webkit-overflow-scrolling: touch;
  }
  .rail-mobile::-webkit-scrollbar { display: none; }
  .rail-mobile > * { flex: 0 0 62%; scroll-snap-align: start; }
}

/* ==========================================================================
   MY ORDER (§26, §66)
   The customer's own order page. Built from the same primitives as Checkout
   and Order Success — .card, .success-meta, .timeline, .summary__row — with
   only the pieces that had no equivalent defined here.
   ========================================================================== */

.mo-head { margin-bottom: 24px; }
.mo-head .success-meta { margin: 0; }

.mo-layout { align-items: start; }
.mo-main { display: grid; gap: 20px; min-width: 0; }

.mo-aside {
  display: grid;
  gap: 20px;
  min-width: 0;   /* a grid item must be allowed to shrink below its content */
  position: sticky;
  top: calc(var(--header-h) + 20px);
}

.mo-card { margin: 0; }
.mo-card__title { font-size: 1.02rem; margin-bottom: 16px; }
.mo-card .timeline { margin-top: 4px; }
.mo-card .summary__total { margin-top: 14px; }

.mo-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  line-height: 1.6;
}
.mo-hint svg { flex: none; margin-top: 2px; color: var(--muted-2); }

/* ---- Cancelled / returned ------------------------------------------------ */

.mo-terminal {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  border-radius: var(--r);
  margin-bottom: 4px;
}
.mo-terminal svg { flex: none; margin-top: 1px; }
.mo-terminal b { display: block; font-size: .95rem; margin-bottom: 2px; }
.mo-terminal span { font-size: .84rem; line-height: 1.6; }
.mo-terminal--cancelled { background: var(--danger-bg); color: var(--danger); }
.mo-terminal--returned { background: var(--warn-bg); color: var(--warn); }

/* ---- Tracking ------------------------------------------------------------ */

.mo-track {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.mo-track .btn { justify-self: start; margin-top: 4px; }

/* The parcels the order ships in, under the journey. */
.mo-parcels { margin-top: 18px; }
.mo-parcels__title {
  display: flex; align-items: center; gap: 7px;
  margin: 0; font-size: .92rem; color: var(--ink);
}
.mo-parcels .mo-parcel { margin-top: 12px; padding-top: 12px; }
.mo-parcel__note { margin: -4px 0 0; font-size: .8rem; color: var(--muted); text-align: right; }
/* The courier booking could not be made: the reason, in red (My Order) */
.mo-sync-failed {
  display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 10px 12px;
  border: 1px solid var(--danger); border-radius: var(--r); background: var(--danger-bg);
  color: var(--ink-700); font-size: .86rem; line-height: 1.5;
}
.mo-sync-failed svg { flex: none; margin-top: 2px; color: var(--danger); }

/* ---- Items --------------------------------------------------------------- */

.mo-items { display: grid; gap: 16px; }

.mo-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.mo-item:last-child { padding-bottom: 0; border-bottom: 0; }

.mo-item__img {
  width: 72px; height: 72px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--bg-soft);
  flex: none;
}
.mo-item__info { flex: 1; min-width: 0; display: grid; gap: 3px; }
.mo-item__name { font-size: .92rem; font-weight: 700; color: var(--ink); line-height: 1.45; }
.mo-item__name a { color: inherit; }
.mo-item__name a:hover { color: var(--brand); }
.mo-item__meta { font-size: .79rem; color: var(--muted); }
.mo-item__meta s { color: var(--muted-2); }
.mo-item__save { font-size: .78rem; font-weight: 700; color: var(--success); }
.mo-item__total {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  flex: none;
}

/* ---- Address / customer -------------------------------------------------- */

.mo-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; }
.mo-address { font-size: .88rem; line-height: 1.75; color: var(--ink-700); margin: 0; }
.mo-address--contact { margin-top: 10px; display: flex; align-items: center; gap: 7px; }

/* ---- Key / value rows ---------------------------------------------------- */

.mo-kvs { display: grid; gap: 11px; }
.mo-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: .87rem;
}
.mo-kv > span { color: var(--muted); flex: none; }
.mo-kv > b { color: var(--ink); font-weight: 700; text-align: right; word-break: break-word; }

.mo-empty-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--muted);
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  padding: 14px 15px;
  margin: 0;
}
.mo-empty-note svg { flex: none; margin-top: 1px; color: var(--muted-2); }

.mo-card .co-note { margin-top: 14px; }
.mo-card .btn--block + .btn--block { margin-top: 10px; }
.mo-card > .btn--block { margin-top: 16px; }

.mo-btn-row { margin-top: 16px; gap: 8px; }
.mo-actions { display: grid; gap: 10px; }
/* These labels are long by design ("WHATSAPP ABOUT THIS ORDER"). They are
   full-width buttons, so letting the label wrap costs nothing and keeps the
   card from setting a 300px floor on the whole column. */
.mo-actions .btn { margin: 0; white-space: normal; line-height: 1.35; }

@media (max-width: 940px) {
  .mo-aside { position: static; }
}

@media (max-width: 560px) {
  .mo-item__img { width: 58px; height: 58px; }
  .mo-item__total { font-size: .92rem; }
  .mo-btn-row .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   INVOICE DOCUMENT
   The Tax Invoice is styled by its shared renderer
   (assets/js/components/invoice-document.js) — the one the admin prints too.
   The My Order page only spaces it and, in print, clears the page around it.
   ========================================================================== */

[data-invoice-doc] > .fd-inv { margin-top: 24px; }

/* ---- Printing the invoice ------------------------------------------------
   Scoped to the My Order page: PRINT INVOICE puts the document alone on the
   sheet (A4 portrait, the renderer's @page) without disturbing how any other
   page prints. */

@media print {
  body.is-printing-invoice .site-header,
  body.is-printing-invoice .site-footer,
  body.is-printing-invoice .page-hero,
  body.is-printing-invoice .fab-stack,
  body.is-printing-invoice .mobile-bar,
  body.is-printing-invoice .toast-wrap,
  body.is-printing-invoice .mo-head,
  body.is-printing-invoice .mo-layout { display: none !important; }

  body.is-printing-invoice [data-invoice-doc] > .fd-inv { margin: 0 auto; }
  body.is-printing-invoice .section { padding: 0 !important; }
}

/* ==========================================================================
   Colour swatches (§16)
   One swatch style serves the product page, the product card and the cart, so
   a colour looks the same wherever the shopper meets it.
   ========================================================================== */

.swatch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.swatch {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  background-color: var(--bg-soft-2);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.swatch:hover { transform: translateY(-1px); border-color: var(--muted-2); }

/* The chosen colour gets a clear ring, offset so a white swatch still reads. */
.swatch.is-selected {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy);
}
.swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brand);
}

/* Out of stock: still shown, struck through, still selectable so the shopper
   can see what they are missing (§16). */
.swatch.is-out { opacity: .45; }
.swatch.is-out::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(to top left,
    transparent calc(50% - 1px), var(--muted) calc(50% - 1px),
    var(--muted) calc(50% + 1px), transparent calc(50% + 1px));
}

/* On a card the swatches are smaller but just as clickable — the selected ring
   is thinner so four of them still sit comfortably in a grid cell. */
.swatch--sm { width: 24px; height: 24px; border-width: 1.5px; }
.swatch--sm.is-selected {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--navy);
}
.swatch--sm:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--brand);
}

/* In the cart a swatch is a label, not a control. */
.swatch--xs { width: 14px; height: 14px; border-width: 1px; cursor: default; }
.swatch--xs:hover { transform: none; border-color: var(--line); }

.swatch-row--card { gap: 8px; margin: 4px 0 6px; }

.swatch-row__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.swatch-row__more:hover { border-color: var(--muted-2); color: var(--ink); }

/* ---- Size summary on product cards ------------------------------------- */
.size-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 5px 0 7px;
}
.size-row__label {
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
}
.size-chip--card {
  min-width: 34px;
  padding: 5px 8px;
  border-width: 1px;
  border-radius: 6px;
  font-size: .72rem;
  text-align: center;
  text-decoration: none;
}
.size-chip--card:hover { color: var(--ink); }
.size-chip--card.is-out { opacity: .5; }
.size-row__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 5px 7px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
}
.size-row__more:hover { border-color: var(--muted-2); color: var(--ink); }

/* ---- Product page block ------------------------------------------------- */

.pdp-colours {
  margin: 20px 0 4px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pdp-colours__head {
  margin-bottom: 12px;
  font-size: .95rem;
}
.pdp-colours__head b { font-weight: 700; }

/* ---- Cart line ---------------------------------------------------------- */

.cart-row__colour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: .8rem;
  color: var(--muted);
}
.cart-row__colour b { color: var(--ink); font-weight: 600; }

@media (max-width: 620px) {
  .swatch { width: 34px; height: 34px; }
}

/* ==========================================================================
   Size / variant chips (§18)
   The product's other option axis. A size has no colour to show, so it reads
   as a labelled chip — but it behaves exactly like a swatch: selectable,
   struck through when out of stock, and a real product choice.
   ========================================================================== */

.pdp-variants {
  margin: 4px 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
/* A colour block directly above already drew the rule between them. */
.pdp-colours + .pdp-variants { margin-top: -4px; border-top: 0; }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.size-chip {
  position: relative;
  flex: 0 0 auto;
  min-width: 52px;
  padding: 10px 16px;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.size-chip:hover { transform: translateY(-1px); border-color: var(--muted-2); }

.size-chip.is-selected {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy);
}
.size-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brand);
}

/* Out of stock: still listed and still selectable, so the shopper can see
   exactly which size is the one they cannot have. */
.size-chip.is-out { opacity: .5; color: var(--muted); }
.size-chip.is-out::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-sm);
  background: linear-gradient(to top left,
    transparent calc(50% - 1px), var(--muted) calc(50% - 1px),
    var(--muted) calc(50% + 1px), transparent calc(50% + 1px));
}

/* ==========================================================================
   Product page panels (§18)
   Available offers and Delivery & services — two short lists that carry the
   commercial promise beside the buy button rather than hiding it in a tab.
   ========================================================================== */

.pdp-panel {
  margin-top: 4px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-soft);
}

.pdp-panel__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.pdp-panel__head svg { color: var(--brand); flex: none; }

.pdp-offers {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pdp-offers__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.pdp-offers__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--brand);
}

.pdp-offers__body {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: .82rem;
  color: var(--muted);
  text-decoration: none;
}
.pdp-offers__body b { font-size: .85rem; font-weight: 700; color: var(--ink); }
a.pdp-offers__body:hover b { color: var(--brand); }
a.pdp-offers__body:hover { text-decoration: none; }

@media (max-width: 620px) {
  .size-chip { min-width: 46px; padding: 9px 13px; }
  .pdp-panel { padding: 15px; }
}

/* ==========================================================================
   Customer account
   The only part of the storefront that cares who the visitor is. Everything
   else stays open, so these styles never gate anything — they only show state.
   ========================================================================== */

/* ---- Header account button --------------------------------------------- */

.account-menu { display: flex; align-items: center; }
.account-menu__wrap { position: relative; }

.account-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: .85rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.account-btn:hover { border-color: var(--brand); box-shadow: var(--sh-1); }

.account-btn__text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.account-btn__hint { font-size: .68rem; color: var(--muted); }
.account-btn__name {
  display: inline-flex; align-items: center; gap: 3px;
  font-weight: 700; font-size: .84rem;
}

.account-avatar {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
}

/* ---- The drop-down ------------------------------------------------------ */

.account-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 248px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-3);
}
.account-pop__head {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 6px;
}
.account-pop__head b { font-size: .92rem; }
.account-pop__head span { font-size: .76rem; color: var(--muted); overflow-wrap: anywhere; }

.account-pop__link {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: .87rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account-pop__link:hover { background: var(--bg-soft); }
.account-pop__link--danger { color: var(--danger); }
.account-pop__link--danger:hover { background: var(--danger-bg); }

/* ---- Drawer (mobile) ---------------------------------------------------- */

.drawer__account {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 4px 10px;
}
.drawer__account b { font-size: .95rem; }
.drawer__account span { font-size: .78rem; color: var(--muted); }
.drawer__link--danger { color: var(--danger); }

/* ==========================================================================
   Sign in / register card
   ========================================================================== */

.auth-wrap { max-width: 520px; margin-inline: auto; }
.auth-note { margin-bottom: 16px; }

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 24px;
  padding: 4px;
  background: var(--bg-soft);
  border-radius: var(--r);
}
.auth-tab {
  padding: 11px 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.auth-tab.is-active { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }

.auth-foot {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 18px 0 0;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--muted);
}

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

/* ==========================================================================
   The account area
   ========================================================================== */

.account-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.account-side { position: sticky; top: 96px; display: grid; gap: 12px; }

.account-id { display: flex; align-items: center; gap: 12px; }
.account-id__avatar {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
}
.account-id b { display: block; font-size: .95rem; }
.account-id__code { font-size: .76rem; color: var(--muted); }

.account-nav {
  display: grid;
  gap: 2px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}
.account-nav__link {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-700);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account-nav__link:hover { background: var(--bg-soft); color: var(--ink); }
.account-nav__link.is-active { background: var(--brand-50); color: var(--brand-700); font-weight: 700; }
.account-nav__link--danger { color: var(--danger); }
.account-nav__link--danger:hover { background: var(--danger-bg); }

.account-main { min-width: 0; }
.account-h { margin: 0 0 6px; font-size: 1.15rem; }

.account-stats { margin-top: 20px; }

/* ---- Saved addresses ---------------------------------------------------- */

.addr-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: 14px;
}
.addr-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  font-size: .85rem;
}
.addr-card b { display: block; }
.addr-card p { margin: 0; color: var(--ink-700); line-height: 1.6; overflow-wrap: anywhere; }

/* The default address: a green frame and its own badge, so it cannot be missed. */
.addr-card.is-default { border: 2px solid var(--success); padding: 13px 15px; }

.addr-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.addr-section__sub { margin: 0; font-size: .84rem; }

.addr-card__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.addr-card__top .badge svg { width: 12px; height: 12px; }
.addr-card__name { font-size: .95rem; color: var(--ink); overflow-wrap: anywhere; }
.addr-card__mobile { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .82rem; }

.addr-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
}
.addr-card__actions .btn { min-height: 36px; padding: 6px 12px; font-size: .8rem; }
.addr-card__delete { color: var(--danger); }
.addr-card__delete:hover { background: var(--danger-bg); color: var(--danger); }
.addr-card__hint { margin: 0; font-size: .76rem; color: var(--muted); line-height: 1.5; }

.addr-form__note { margin: 0 0 14px; }
.addr-form__default {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  font-size: .86rem; font-weight: 700; color: var(--success);
}
.addr-form__alert { margin-top: 16px; }

/* ---- A dialog (My Account → the address form) ----------------------------
   Centred on wide screens; on a phone it fills the screen, its form scrolls
   and the buttons stay in reach at the bottom. */

.fd-modal {
  position: fixed;
  inset: 0;
  z-index: 120;          /* over the header (60), drawer (91) and floating buttons (55) */
  display: grid;
  place-items: center;
  padding: 16px;
}
.fd-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.fd-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(660px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.fd-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 14px 22px;
  border-bottom: 1px solid var(--line);
}
.fd-modal__head h3 { margin: 0; font-size: 1.1rem; }
.fd-modal__body { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px 20px; }
.fd-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}

@media (max-width: 560px) {
  .fd-modal { padding: 0; place-items: stretch; }
  .fd-modal__panel { width: 100%; max-height: none; height: 100vh; height: 100dvh; border-radius: 0; }
  .fd-modal__body { padding: 16px; }
  .fd-modal__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .fd-modal__foot .btn { flex: 1 1 0; }
}

/* ---- Order history ------------------------------------------------------ */

.order-list { display: grid; gap: 12px; margin-top: 18px; }

.order-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.order-row:hover { border-color: var(--brand-100); box-shadow: var(--sh-1); }

.order-row__thumbs { display: flex; }
.order-row__thumbs img {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  border: 2px solid #fff;
  object-fit: cover;
  background: var(--bg-soft);
}
.order-row__thumbs img + img { margin-left: -12px; }

.order-row__info { display: grid; gap: 3px; min-width: 0; }
.order-row__info b { font-size: .92rem; }
.order-row__info .muted { font-size: .78rem; }
/* What is on the order: "Basmati Rice × 2 · Atta × 1". */
.order-row__lines { font-size: .8rem; color: var(--ink-700); overflow-wrap: anywhere; }
.order-row__info .order-row__lines b { font-size: inherit; font-weight: 700; }
.order-row__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }

.order-row__end { display: grid; gap: 8px; justify-items: end; text-align: right; }
.order-row__end b { font-size: 1rem; }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; }

@media (max-width: 1000px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-side { position: static; }
  .account-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
}

@media (max-width: 620px) {
  /* The header keeps the icon; the words move into the drawer. */
  .account-btn__text { display: none; }
  .account-btn { padding: 8px; }
  .account-pop { right: -8px; min-width: 230px; }

  .order-row { grid-template-columns: auto minmax(0, 1fr); }
  .order-row__end { grid-column: 1 / -1; justify-items: stretch; text-align: left; }
  .order-row__end .btn { width: 100%; }
}

/* ==========================================================================
   Review summary (product page)
   The headline above the review list: the average, its stars, and how many
   approved reviews that average is built from. One definition, one number.
   ========================================================================== */

.review-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.review-summary__score {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.review-summary__count {
  font-size: .86rem;
  color: var(--muted);
}

/* The average sits on the left, the star breakdown beside it; on a narrow
   screen the breakdown drops underneath at full width. */
.review-summary__figure {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ==========================================================================
   Rating breakdown (§31)
   One row per star level. The bar is the share of approved reviews at that
   level, so the five rows always add up to the count beside the average.
   ========================================================================== */

.rating-breakdown {
  display: grid;
  gap: 6px;
  min-width: 220px;
  flex: 1 1 240px;
  max-width: 420px;
}

.rating-breakdown__row {
  display: grid;
  grid-template-columns: 42px 1fr 40px;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  color: var(--muted);
}

.rating-breakdown__label { white-space: nowrap; color: var(--ink); font-weight: 600; }

.rating-breakdown__track {
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.rating-breakdown__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--star, #f5a623);
  /* A level with no reviews renders a zero-width bar, not an empty gap. */
  min-width: 0;
  transition: width .3s ease;
}

.rating-breakdown__count { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   A single review
   ========================================================================== */

.review-list__title {
  font-size: 1rem;
  margin: 24px 0 14px;
}

.review-row__title { font-size: .95rem; margin: 0 0 6px; }
.review-row__text { margin: 0; font-size: .9rem; line-height: 1.7; white-space: pre-line; }

/* Only ever shown when the review is tied to a real order of that product. */
.review-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e7f7ec;
  color: #1c7a3e;
  font-size: .7rem;
  font-weight: 700;
  vertical-align: middle;
}

.review-verified svg { width: 12px; height: 12px; }

/* ---- Customer photos --------------------------------------------------- */

.review-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.review-photos__thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2, #f4f6fa);
  cursor: zoom-in;
  transition: transform .15s ease, border-color .15s ease;
}

.review-photos__thumb:hover { transform: translateY(-2px); border-color: var(--muted-2); }
.review-photos__thumb:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.review-photos__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Lightbox ---------------------------------------------------------- */

.review-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 16, 24, .88);
}

.review-lightbox__img {
  max-width: min(92vw, 900px);
  max-height: 88vh;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
}

.review-lightbox__close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
}

.review-lightbox__close:hover { background: rgba(255, 255, 255, .26); }
.review-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ==========================================================================
   Write a review (§31)
   ========================================================================== */

.review-form {
  margin-top: 28px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2, #f9fafc);
}

.review-form h3 { margin: 0 0 6px; font-size: 1.05rem; }
.review-form__intro { margin: 0 0 16px; font-size: .85rem; }
.review-form--locked p { margin: 0 0 14px; font-size: .88rem; }

.review-form__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* The identity fields are filled from the account and not editable here, so
   they read as information rather than as inputs waiting to be typed in. */
.review-form input[readonly] {
  background: var(--line-soft, #eef1f6);
  color: var(--muted);
  cursor: not-allowed;
}

.review-form__who { margin: 8px 0 18px; }
.review-form .field { margin-bottom: 16px; }

.review-form__previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.review-form__preview {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.review-form__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

.review-form__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.review-form__status { margin: 0; font-size: .84rem; color: var(--muted); }
.review-form__status.is-error { color: var(--danger, #b42318); font-weight: 600; }

/* ---- Star picker ------------------------------------------------------- */

.star-picker {
  display: flex;
  align-items: center;
  gap: 4px;
}

.star-picker__star {
  padding: 2px;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
  /* Unselected stars are outlines; choosing one fills it and everything to
     its left, which is what makes the scale readable at a glance. */
  color: var(--muted-2);
  transition: transform .12s ease, color .12s ease;
}

.star-picker__star:hover { transform: scale(1.12); }
.star-picker__star.is-on { color: var(--star, #f5a623); }
.star-picker__star:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.star-picker__label {
  margin-left: 10px;
  font-size: .82rem;
  color: var(--muted);
}

.star-picker__label.is-set { color: var(--ink); font-weight: 700; }

@media (max-width: 680px) {
  .review-summary { gap: 16px; }
  .rating-breakdown { max-width: none; }
  .review-form { padding: 18px; }
  .review-photos__thumb { width: 64px; height: 64px; }
}

/* ==========================================================================
   About Us image card

   The card itself is unchanged — same rounded corners, same shadow, same
   badge in the same place. All that is added is a fixed shape for the card so
   that whatever the seller uploads fills it without distorting: portrait,
   landscape or square all crop to the same frame rather than pushing the
   column taller or shorter than the text beside it.
   ========================================================================== */

.about-media--uploaded {
  /* A frame with the proportions the design was drawn at (900 × 760). */
  aspect-ratio: 900 / 760;
  overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
}

.about-media--uploaded img {
  width: 100%;
  height: 100%;
  /* Fills the frame and crops the overflow, so the aspect ratio of the
     uploaded file is never stretched. */
  object-fit: cover;
  object-position: center;
  display: block;
  /* The frame now carries these, so the image must not round or shadow again
     inside it. */
  border-radius: 0;
  box-shadow: none;
}

/* The badge overhangs the card on the right, exactly as before — it is a
   sibling of the image, so cropping the image never clips it. */
.about-media--uploaded .about-media__badge { z-index: 2; }

@supports not (aspect-ratio: 1) {
  /* Older engines: hold the same shape with the padding trick. */
  .about-media--uploaded { position: relative; height: 0; padding-bottom: 84.4%; }
  .about-media--uploaded img { position: absolute; inset: 0; }
}

@media (max-width: 900px) {
  /* Stacked layout: a little shorter, so the photo does not dominate the
     screen before the text is reached. */
  .about-media--uploaded { aspect-ratio: 16 / 11; }
}

@media (max-width: 620px) {
  .about-media--uploaded { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Order tracking (§8, §14)

   Two surfaces share this block: the tracking column added to each My Orders
   row, and the public track.html page. They use the same status colours, so a
   parcel that reads "Out for Delivery" in the account looks the same when the
   AWB is pasted into the tracking page.
   ========================================================================== */

/* ---- My Orders: the tracking column ------------------------------------ */

/* The order row was `thumbs | info | end`, with the middle column stretching
   to fill the gap. Tracking claims that space as a column of its own, so the
   price and actions stay pinned right exactly where they were. */
.order-row--tracked { grid-template-columns: auto minmax(0, 1fr) minmax(0, auto) auto; }

.order-row__track {
  display: grid;
  gap: 3px;
  align-content: center;
  min-width: 0;
  padding: 0 14px;
  border-left: 1px dashed var(--line);
  border-right: 1px dashed var(--line);
}

.order-row__track-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.order-row__awb {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86rem;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.order-row__track-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}

.order-row__track .btn { margin-top: 6px; }

/* No AWB yet — say so rather than showing an empty column. */
.order-row__track--empty .order-row__awb {
  font-family: inherit;
  font-weight: 500;
  font-size: .8rem;
  color: var(--muted);
}

/* The review call to action sits with the actions, under "View order". */
.order-row__end .btn--review { white-space: nowrap; }

/* Amount paid / pending under each order in My Orders */
.order-row__amounts { font-size: .78rem; color: var(--ink-700); }
.order-row__amounts b { font-size: .8rem; }
.order-row__end .btn { white-space: nowrap; }

/* Per-product review link on the My Order page (§24). */
.mo-item__review { justify-self: start; margin-top: 8px; }

/* ---- Track page -------------------------------------------------------- */

.track-page { max-width: var(--container-narrow); margin-inline: auto; }

.track-form { margin-bottom: 22px; }

.track-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 6px;
}

.track-form__row .input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.track-form__status { margin: 10px 0 0; font-size: .86rem; min-height: 1.2em; }
.track-form__status.is-error { color: var(--danger); font-weight: 600; }

.track-result { margin-bottom: 22px; }
.track-result:focus { outline: none; }

.track-result__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.track-result__eyebrow {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.track-result__status {
  display: block;
  margin-top: 3px;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--brand);
}

.track-result__head .badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.track-h {
  margin: 26px 0 12px;
  font-size: .95rem;
  font-weight: 700;
}

/* ---- Banners ----------------------------------------------------------- */

.track-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: var(--r);
}

.track-banner__body { display: grid; gap: 2px; flex: 1 1 200px; min-width: 0; }
.track-banner__body b { font-size: .95rem; }
.track-banner__body span { font-size: .84rem; }
.track-banner__icon { display: flex; }

.track-banner--delivered { background: var(--success-bg); color: var(--success); }
.track-banner--delivered .track-banner__body b,
.track-banner--delivered .track-banner__body span { color: var(--ink-700); }

.track-banner--cancelled { background: var(--danger-bg); color: var(--danger); }
.track-banner--returned  { background: var(--warn-bg);   color: var(--warn); }
.track-banner--cancelled .track-banner__body b,
.track-banner--returned  .track-banner__body b { color: var(--ink); }
.track-banner--cancelled .track-banner__body span,
.track-banner--returned  .track-banner__body span { color: var(--ink-700); }

/* ---- How long it took, or how long it has left -------------------------
   The one figure a customer looks for first, so it is given its own panel
   above the details rather than a row inside them. */

.track-delivery {
  padding: 16px 18px;
  margin-bottom: 18px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

.track-delivery--done {
  background: var(--success-bg);
  border-color: transparent;
}

.track-delivery__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.track-delivery__icon { display: flex; color: var(--success); }

.track-delivery__headline {
  font-size: 1.22rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.2;
}

.track-delivery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 18px;
}

.track-delivery__cell { display: grid; gap: 3px; min-width: 0; }
.track-delivery__cell span {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.track-delivery__cell b {
  font-size: .95rem;
  font-weight: 800;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.track-delivery__status { color: var(--brand-600); letter-spacing: .02em; }

@media (max-width: 520px) {
  .track-delivery { padding: 14px; }
  .track-delivery__headline { font-size: 1.06rem; }
  .track-delivery__grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Support: email only, no helpline ---------------------------------- */

.track-support {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  font-size: .87rem;
  color: var(--muted);
}
.track-support svg { flex: none; color: var(--brand-600); }
.track-support a { font-weight: 800; color: var(--brand-600); overflow-wrap: anywhere; }
.track-support a:hover { text-decoration: underline; }

/* ---- Key / value summary ----------------------------------------------- */

.track-kv {
  display: grid;
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.track-kv__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px;
  background: #fff;
  font-size: .87rem;
}

.track-kv__row span { color: var(--muted); }
.track-kv__row b { text-align: right; overflow-wrap: anywhere; }
.track-awb { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---- Items ------------------------------------------------------------- */

.track-items { margin-top: 4px; }

.track-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2);
}

.track-item:last-child { border-bottom: 0; }
.track-item__body { display: grid; gap: 2px; min-width: 0; }
.track-item__body b { font-size: .88rem; }
.track-item__body .muted { font-size: .78rem; }

.track-item__media img {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--bg-soft);
}

.track-item__blank {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  color: var(--muted-2);
}

/* ---- Timeline ---------------------------------------------------------- */

.track-timeline { list-style: none; margin: 0; padding: 0; }

.track-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  min-height: 56px;
}

.track-step__rail {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
}

.track-step__dot {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fff;
  color: #fff;
  transition: background var(--t-fast), border-color var(--t-fast);
}

/* The connector between one dot and the next. The last step has no next, so
   its line is hidden rather than left dangling. */
.track-step__line {
  width: 2px;
  min-height: 14px;
  height: 100%;
  background: var(--line);
}

.track-step:last-child .track-step__line { background: transparent; }

.track-step__body { padding-bottom: 18px; display: grid; gap: 2px; min-width: 0; }
.track-step__label { font-size: .9rem; }
.track-step__meta { font-size: .78rem; color: var(--muted); }
.track-step__note { font-size: .8rem; color: var(--ink-700); }

/* Reached: a solid brand dot with a tick, and a solid line onward. */
.track-step--done .track-step__dot {
  background: var(--brand);
  border-color: var(--brand);
}
.track-step--done .track-step__line { background: var(--brand-100); }

/* Where the parcel is now: the one step that draws the eye. */
.track-step--current .track-step__dot {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 5px var(--brand-50);
}
.track-step--current .track-step__label { color: var(--brand); }
.track-step--current .track-step__line { background: var(--line); }

/* Still to come: visibly inactive, and honest about having no timestamp. */
.track-step--pending .track-step__dot { background: #fff; border-color: var(--line); }
.track-step--pending .track-step__label,
.track-step--pending .track-step__meta { color: var(--muted-2); }

@media (prefers-reduced-motion: reduce) {
  .track-step__dot { transition: none; }
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 900px) {
  /* Tracking drops to its own full-width row, between the order details and
     the price, which is the stacked order §26 asks for. */
  .order-row--tracked { grid-template-columns: auto minmax(0, 1fr); }
  .order-row__track {
    grid-column: 1 / -1;
    padding: 12px 0 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px dashed var(--line);
  }
  .order-row__track .btn { justify-self: start; }
}

@media (max-width: 620px) {
  .track-form__row { grid-template-columns: 1fr; }
  .track-form__row .btn { width: 100%; }

  .track-result__status { font-size: 1.2rem; }

  .track-kv__row { flex-direction: column; gap: 2px; }
  .track-kv__row b { text-align: left; }

  /* The review button moves under the product rather than squeezing beside it. */
  .track-item { grid-template-columns: auto minmax(0, 1fr); }
  .track-item__action { grid-column: 1 / -1; }
  .track-item__action .btn { width: 100%; }

  .order-row__track .btn { width: 100%; }
}

/* ==========================================================================
   CHECKOUT SUITE — coupon, progress, address actions, payment, processing
   Built on the existing checkout tokens above (.co-block, .address-card,
   .pay-opt, .summary). Nothing here restyles an existing component.
   ========================================================================== */

/* ---- Coupon box (inside .summary) -------------------------------------- */

.coupon-box {
  border: 1px dashed var(--brand-100);
  background: var(--brand-50);
  border-radius: var(--r-sm);
  padding: 12px;
  margin-bottom: 16px;
}
.coupon-box__label {
  display: flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 800; color: var(--ink); margin-bottom: 9px;
}
.coupon-box__row { display: flex; gap: 8px; }
.coupon-box__row input {
  /* width 0 + flex 1: the field fills the row but never forces it wider than a 320px phone. */
  flex: 1; width: 0; min-width: 0; min-height: 40px;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  padding: 8px 11px; font-size: .86rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; background: #fff;
}
.coupon-box__row input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted-2); }
.coupon-box__row input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.coupon-box__row .btn { min-height: 40px; padding-inline: 16px; flex: none; }
.coupon-box__error { display: block; font-size: .76rem; color: var(--danger); font-weight: 600; margin-top: 7px; }
.coupon-box__applied {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid rgba(14, 159, 110, .28);
  border-radius: var(--r-xs); padding: 9px 11px;
}
.coupon-box__applied svg { color: var(--success); flex: none; }
.coupon-box__code { font-weight: 900; letter-spacing: .05em; color: var(--ink); font-size: .86rem; }
.coupon-box__saving { display: block; font-size: .75rem; color: var(--success); font-weight: 700; }
.coupon-box__remove { margin-left: auto; font-size: .76rem; font-weight: 800; color: var(--danger); }

.summary__row--coupon b { color: var(--success); }

.campaign-banner {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(90deg, var(--brand-50), #fff);
  border: 1px solid var(--brand-100); border-radius: var(--r);
  padding: 12px 16px; margin-bottom: 18px;
}
.campaign-banner__icon { font-size: 1.5rem; line-height: 1; }
.campaign-banner b { display: block; color: var(--ink); font-size: .92rem; }
.campaign-banner span { font-size: .8rem; color: var(--muted); }

/* ---- Checkout progress -------------------------------------------------- */

.co-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 26px;
  counter-reset: none;
}
.co-steps__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.co-steps__item::before {
  content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px;
  background: var(--line); z-index: 0;
}
.co-steps__item:first-child::before { display: none; }
.co-steps__item.is-done::before,
.co-steps__item.is-current::before { background: var(--brand); }
.co-steps__dot {
  position: relative; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 2px solid var(--line); color: var(--muted-2);
  font-size: .82rem; font-weight: 900;
}
.co-steps__item.is-done .co-steps__dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.co-steps__item.is-current .co-steps__dot { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 5px var(--brand-50); }
.co-steps__label { font-size: .78rem; font-weight: 700; color: var(--muted); }
.co-steps__item.is-current .co-steps__label { color: var(--ink); font-weight: 800; }
.co-steps__item a { color: inherit; }

/* ---- Address actions ---------------------------------------------------- */

.address-card__top { display: flex; align-items: center; gap: 8px; padding-right: 26px; }
.address-card__actions { display: flex; gap: 14px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); }
.address-card__actions button { font-size: .78rem; font-weight: 800; color: var(--brand-600); }
.address-card__actions button[data-address-delete] { color: var(--danger); }
.address-card__actions button[data-address-default] { color: var(--muted); margin-left: auto; }
.address-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.addr-types { display: flex; gap: 10px; flex-wrap: wrap; }
.addr-type {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: 8px 16px; font-size: .85rem; font-weight: 700; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.addr-type input { accent-color: var(--brand); margin: 0; }
.addr-type:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }

.co-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.co-actions .btn--primary { margin-left: auto; }

/* ---- Payment method ----------------------------------------------------- */

.pay-opt.is-disabled { opacity: .55; cursor: not-allowed; }
.pay-opt__logos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pay-opt__logo {
  font-size: .7rem; font-weight: 900; letter-spacing: .02em;
  padding: 4px 9px; border-radius: var(--r-xs);
  background: var(--bg-soft-2); color: var(--ink-700);
}
.pay-opt__logo--phonepe { background: #5f259f; color: #fff; }

.pay-split {
  margin-top: 14px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 14px 16px; display: grid; gap: 9px;
}
.pay-split__title { font-size: .8rem; font-weight: 800; color: var(--ink); }
.pay-split__row { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; }
.pay-split__row span { color: var(--muted); }
.pay-split__row b { color: var(--ink); }
.pay-split__row--now { padding-top: 9px; border-top: 1px dashed var(--line); }
.pay-split__row--now b { color: var(--brand-600); font-size: 1rem; }
.pay-split__note { font-size: .76rem; color: #08694a; background: var(--success-bg); padding: 8px 10px; border-radius: var(--r-xs); display: flex; gap: 7px; }

/* Step 3 (2026-11-07): Prepaid and Cash on Delivery side by side, and under
   them what the chosen one means — the COD split, or the Manual UPI / Bank
   details (read-only) with the Transaction ID box. */
.pay-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pay-list--two .pay-opt { align-items: center; padding: 14px 16px; gap: 12px; }
.pay-list--two .pay-opt input { margin-top: 0; }
@media (max-width: 560px) { .pay-list--two { grid-template-columns: 1fr; } }

.pay-details { margin-top: 14px; display: grid; gap: 14px; }
.pay-details .pay-split { margin-top: 0; }

.pay-manual {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  padding: 16px; display: grid; gap: 14px;
}
.pay-manual__amount {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px dashed var(--line);
}
.pay-manual__amount span { font-size: .84rem; font-weight: 700; color: var(--muted); }
.pay-manual__amount b { font-size: 1.15rem; font-weight: 900; color: var(--brand-600); }

.pay-manual__grid { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 16px; align-items: start; }
.pay-manual__grid--one { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 620px) { .pay-manual__grid { grid-template-columns: minmax(0, 1fr); } }

.pay-manual__scan { display: grid; gap: 10px; justify-items: center; text-align: center; }
.pay-manual__qr {
  width: 180px; max-width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px; background: #fff;
}
.pay-manual__scan-label { font-size: .82rem; font-weight: 800; color: var(--ink); }
.pay-manual__upi {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px;
}
.pay-manual__upi-label { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: .74rem; font-weight: 800; color: var(--muted); }
.pay-manual__upi b { flex: 1; min-width: 0; font-size: .86rem; color: var(--ink); overflow-wrap: anywhere; }
.pay-manual__copy {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-xs); background: #fff; color: var(--brand-600);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pay-manual__copy:hover, .pay-manual__copy.is-copied { border-color: var(--brand); background: var(--brand-50); }

.pay-manual__bank { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.pay-manual__bank h4 {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px;
  font-size: .88rem; font-weight: 800; color: var(--ink);
  background: var(--bg-soft); border-bottom: 1px solid var(--line);
}
.pay-manual__bank h4 svg { color: var(--brand-600); flex: none; }
.pay-manual__bank dl { margin: 0; }
.pay-manual__bank-row {
  display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 10px;
  padding: 9px 14px; border-top: 1px solid var(--line-2); font-size: .84rem;
}
.pay-manual__bank-row:first-child { border-top: 0; }
.pay-manual__bank-row dt { color: var(--muted); font-weight: 700; }
.pay-manual__bank-row dd { margin: 0; color: var(--ink); font-weight: 800; overflow-wrap: anywhere; }
@media (max-width: 400px) { .pay-manual__bank-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

.pay-manual__note {
  display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--info-bg); font-size: .82rem; line-height: 1.5; color: var(--ink-700); white-space: pre-line;
}
.pay-manual__note svg { flex: none; margin-top: 2px; color: var(--info); }
.pay-manual__txn { margin: 0; }
.pay-manual__verify { display: flex; align-items: center; gap: 7px; margin: 0; font-size: .78rem; color: var(--muted); }
.pay-manual__verify svg { flex: none; color: var(--success); }

/* Order confirmation: what was paid, and what is left for the door. */
.success-pay { max-width: 440px; margin: 22px auto 0; text-align: left; }
.success-sub { color: var(--ink-700); font-weight: 600; max-width: 480px; margin: 8px auto 0; }
/* "Congratulations! Your COD order has been placed successfully." is a sentence, not a word. */
.success-hero h1.success-title { font-size: clamp(1.45rem, 1.05rem + 1.6vw, 2.15rem); line-height: 1.2; max-width: 560px; margin-inline: auto; }
/* Five facts about the order on one row where they fit. */
.success-hero .success-meta { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }

/* ---- Payment processing ------------------------------------------------- */

.pp-wrap { max-width: 560px; margin-inline: auto; }
.pp-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 36px);
  box-shadow: var(--sh-2); text-align: center;
}
.pp-provider {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 18px;
  display: grid; place-items: center;
  background: #5f259f; color: #fff; font-size: 1.7rem; font-weight: 900;
}
.pp-card h1 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin-bottom: 6px; }
.pp-card > p { color: var(--muted); margin: 0 auto; max-width: 400px; }
.pp-amount { font-size: 2rem; font-weight: 900; color: var(--ink); letter-spacing: -.03em; margin: 18px 0 4px; }
.pp-amount-label { font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.pp-spinner {
  width: 54px; height: 54px; margin: 22px auto;
  border-radius: 50%; border: 4px solid var(--brand-100); border-top-color: var(--brand);
  animation: fd-spin .9s linear infinite;
}
.pp-state-icon {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 18px;
  display: grid; place-items: center; animation: fd-pop .5s both;
}
.pp-state-icon--ok { background: var(--success-bg); color: var(--success); }
.pp-state-icon--fail { background: var(--danger-bg); color: var(--danger); }
.pp-state-icon--wait { background: var(--warn-bg); color: #a86a04; }
.pp-secure {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 22px; font-size: .8rem; color: var(--muted);
}
.pp-trust { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.pp-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; color: var(--muted); }
.pp-trust svg { color: var(--success); }

.upi-box { margin-top: 22px; text-align: left; display: grid; gap: 14px; }
.upi-box__qr {
  width: 220px; max-width: 100%; margin: 0 auto;
  border: 1px solid var(--line); border-radius: var(--r); padding: 10px; background: #fff;
}
.upi-box__id {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-soft); border-radius: var(--r-sm); padding: 10px 14px;
}
.upi-box__id span { font-size: .76rem; color: var(--muted); }
.upi-box__id b { display: block; font-size: .95rem; color: var(--ink); word-break: break-all; }
.upi-box__id .btn { margin-left: auto; flex: none; }
.upi-box__steps { margin: 0; padding-left: 18px; list-style: decimal; font-size: .84rem; color: var(--ink-700); display: grid; gap: 4px; }
/* Manual / UPI / Bank: the seller's bank account, and their own instructions. */
.upi-box__bank { background: var(--bg-soft); border-radius: var(--r-sm); padding: 10px 14px; }
.upi-box__bank span { font-size: .76rem; color: var(--muted); }
.upi-box__bank p { margin: 2px 0 0; font-size: .9rem; font-weight: 600; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.upi-box__note {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--info-bg); border-radius: var(--r-sm); padding: 10px 14px;
  font-size: .84rem; line-height: 1.5; color: var(--ink-700); white-space: pre-line;
}
.upi-box__note svg { flex: none; margin-top: 2px; color: var(--info); }

@media (max-width: 620px) {
  .co-steps__label { font-size: .68rem; }
  .co-steps__dot { width: 28px; height: 28px; font-size: .74rem; }
  .co-steps__item::before { top: 13px; }
  /* Full width, and a long label ("PAY ₹1,299 & PLACE COD ORDER") wraps rather than widening the page. */
  .co-actions .btn { flex: 1 1 100%; white-space: normal; }
  .co-actions .btn--primary { margin-left: 0; order: -1; }
  .coupon-box__row .btn { padding-inline: 12px; }
  .pp-amount { font-size: 1.7rem; }
}

/* Trust Strip — Four items in one row on desktop and mobile */

.trust-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0;
}

.trust-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  min-width: 0;
  padding: 12px 6px;
}

.trust-strip__item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.trust-strip__item b {
  font-size: 11px;
  line-height: 1.3;
}

.trust-strip__item span {
  font-size: 9px;
  line-height: 1.3;
}

/* Mobile */
@media (max-width: 600px) {
  .trust-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .trust-strip__item {
    padding: 10px 3px;
    gap: 5px;
  }

  .trust-strip__item b {
    font-size: 10px;
  }

  .trust-strip__item span {
    font-size: 8px;
  }
}

/* =========================================================
   LATEST OFFERS — HORIZONTAL SLIDER
   ========================================================= */

#offers .offer-grid {
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
}

/* Horizontal track */

#offers .offer-slider__track {
  display: flex;
  flex-direction: row;
  gap: 22px;

  width: 100%;
  min-width: 0;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;

  padding: 4px 0 14px;
}

#offers .offer-slider__track::-webkit-scrollbar {
  display: none;
}

/* Every offer card */

#offers .offer-slider__track > .offer-card {
  flex: 0 0 calc(50% - 11px);
  width: calc(50% - 11px);
  min-width: 0;

  margin: 0;
  scroll-snap-align: start;
}

/* Navigation buttons */

#offers .offer-slider__controls {
  position: absolute;
  right: 0;
  top: -52px;

  display: flex;
  gap: 8px;

  z-index: 5;
}

#offers .offer-slider__arrow {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--line);
  border-radius: 50%;

  background: #fff;
  color: var(--text);

  cursor: pointer;
  font-size: 16px;
  transition: background .2s, color .2s;
}

#offers .offer-slider__arrow:hover {
  background: var(--brand);
  color: #fff;
}

/* Mobile slider */

@media (max-width: 600px) {
  #offers .offer-slider__track {
    gap: 14px;
  }

  #offers .offer-slider__track > .offer-card {
    flex: 0 0 88%;
    width: 88%;
  }

  #offers .offer-slider__controls {
    top: -48px;
  }

  #offers .offer-slider__arrow {
    width: 32px;
    height: 32px;
  }
}
/* Remove dark overlay from offer banners */
.offer-card::before {
  background: none !important;
}

/* ==========================================================
   FOOTER BOTTOM - RED STRIP WITH WHITE TEXT
   ========================================================== */

.site-footer .footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;

  width: 100%;
  min-height: 60px;

  background: #ff1e1e;
  color: #ffffff;

  padding: 14px 20px;
  margin: 0;

  border: none;
  border-top: none;
  border-bottom: none;

  box-sizing: border-box;
}

/* Copyright - Left Side */

.site-footer .footer__bottom > span {
  color: #ffffff;
  white-space: nowrap;
  font-size: 13px;
}

/* Privacy Policy Links - Right Side */

.site-footer .footer__bottom nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;

  margin: 0;
  padding: 0;
}

.site-footer .footer__bottom nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.site-footer .footer__bottom nav a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Powered by Fastdelhivery */

.site-footer .footer__credit {
  color: #ffffff;
  background: transparent;

  margin: 0;
  padding: 0;

  border: none;
  text-align: center;
  font-size: 13px;
}

.site-footer .footer__credit a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

/* Remove unwanted white line */

.site-footer .footer__bottom::before,
.site-footer .footer__bottom::after,
.site-footer .footer__credit::before,
.site-footer .footer__credit::after {
  display: none;
  content: none;
}

/* ==========================================================
   FOOTER BOTTOM - FULL WIDTH RED STRIP
   ========================================================== */

.site-footer {
  width: 100%;
  overflow: hidden;
}

/* Footer Bottom */

.site-footer .footer__bottom {
  display: grid;

  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  width: 100%;
  max-width: 100%;

  min-height: 60px;

  background: #ff1e1e;
  color: #ffffff;

  padding: 14px 20px;
  margin: 0;

  border: none;
  box-sizing: border-box;
}

/* Copyright - Left */

.site-footer .footer__bottom > span {
  justify-self: start;

  color: #ffffff;
  font-size: 13px;
  white-space: nowrap;
}

/* Powered By - Center */

.site-footer .footer__credit {
  grid-column: 2;
  grid-row: 1;

  justify-self: center;
  align-self: center;

  color: #ffffff;
  background: transparent;

  margin: 0;
  padding: 0;

  border: none;
  text-align: center;
  font-size: 13px;
  white-space: nowrap;
}

.site-footer .footer__credit a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

/* Policy Links - Right */

.site-footer .footer__bottom nav {
  justify-self: end;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 18px;

  margin: 0;
  padding: 0;
}

.site-footer .footer__bottom nav a {
  color: #ffffff;

  font-size: 13px;
  font-weight: 500;

  text-decoration: none;
  white-space: nowrap;
}

.site-footer .footer__bottom nav a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Remove unwanted extra credit line */

.site-footer .footer__credit::before,
.site-footer .footer__credit::after,
.site-footer .footer__bottom::before,
.site-footer .footer__bottom::after {
  display: none;
  content: none;
}

/* ==========================================================
   MOBILE RESPONSIVE
   ========================================================== */

@media (max-width: 768px) {

  .site-footer .footer__bottom {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 12px;

    width: 100%;
    max-width: 100%;

    min-height: auto;

    padding: 18px 12px;
    margin: 0;

    box-sizing: border-box;
  }

  .site-footer .footer__bottom > span {
    text-align: center;
    white-space: normal;

    font-size: 12px;
    line-height: 1.5;
  }

  .site-footer .footer__credit {
    position: static;

    text-align: center;
    white-space: normal;

    font-size: 12px;
  }

  .site-footer .footer__bottom nav {
    display: flex;

    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    gap: 8px 14px;

    width: 100%;
    margin: 0;
    padding: 0;
  }

  .site-footer .footer__bottom nav a {
    font-size: 12px;
    white-space: normal;
    text-align: center;
  }
}