/* ============================================================
   RKD Sports India — supplementary styles

   The original site's stylesheets (critical/ecommerce/main/a11y) are carried
   over unchanged so the Laravel build looks identical to the PHP one. This
   file adds ONLY the handful of classes the original markup referenced but
   never actually styled — empty states, hints, badges — plus the few blocks
   that exist here because this build shows real data the original did not
   (stock notices, spec lists, validation errors).

   Nothing here overrides an original rule; if a selector already has styles
   in ecommerce.css, it is not repeated here.
   ============================================================ */

.af-hint {
  color: #6b6b6b;
  font-size: 13.5px;
  line-height: 1.6;
  margin: 8px 0;
}

/* Empty and error states. Shown instead of fabricated sample content whenever
   a list is genuinely empty or a fetch failed. */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed #ddd;
  border-radius: 14px;
  background: #fafafa;
}
.empty-state i {
  font-size: 34px;
  color: #c9c9c9;
  margin-bottom: 14px;
  display: block;
}
.empty-state h3 { margin: 0 0 8px; font-size: 19px; color: #222; }
.empty-state p  { margin: 0 0 18px; color: #6b6b6b; font-size: 14px; }
.empty-state .btn-primary { display: inline-flex; }

/* Order status pill, used on the account and tracking pages. */
.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #eef4ff;
  color: #21518c;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: .2px;
}

/* Order rows on the account page. */
.order-card {
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  background: #fff;
}
.order-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.order-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: #6b6b6b;
  font-size: 13px;
  margin-bottom: 10px;
}
.order-card-meta i { margin-right: 6px; color: #9a9a9a; }

/* Product page: specifications, features and stock. */
.spec-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 24px;
  margin: 18px 0 0;
}
.spec-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #f0f0f0;
  padding: 8px 0;
}
.spec-list dt { color: #6b6b6b; font-size: 13px; margin: 0; }
.spec-list dd { margin: 0; font-weight: 600; font-size: 13px; }

.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li { padding: 8px 0; border-bottom: 1px solid #f2f2f2; font-size: 14px; }
.feature-list i { color: #1b7a46; margin-right: 10px; }

.discount-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 6px;
  background: #e8f6ee;
  color: #1b7a46;
  font-size: 12.5px;
  font-weight: 700;
}

.stock-note { margin: 14px 0 0; font-size: 13.5px; color: #555; }
.stock-note .stock-in  { color: #1b7a46; font-weight: 600; }
.stock-note .stock-low { color: #b25000; font-weight: 600; }

/* Validation message under the size picker. Hidden until a shopper tries to
   add to the cart without choosing. */
.field-error { color: #c0261f; font-size: 13px; margin: 8px 0 0; font-weight: 600; }

/* Toasts. The original relied on its own toast module; this build ships a
   single host element in the layout. */
.toast-container {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  background: #222;
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  max-width: 320px;
}
.toast.ok   { background: #1b7a46; }
.toast.warn { background: #b23b32; }

/* An image whose stored URL is dead falls back to the local placeholder; this
   keeps it from looking like a design element. */
.img-placeholder { object-fit: contain; background: #f4f4f4; padding: 12%; }

/* Order confirmation, shown on the tracking page after checkout redirects
   here with ?placed=. The customer has just paid; an unacknowledged lookup
   form at that moment reads as though the order did not go through. */
.order-placed-banner {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #e8f6ee;
  border: 1px solid #bfe3cd;
  border-radius: 14px;
  padding: 22px 24px;
  margin: 28px 0 8px;
}
.order-placed-banner i {
  font-size: 26px;
  color: #1b7a46;
  line-height: 1.2;
  flex-shrink: 0;
}
.order-placed-banner h1 { margin: 0 0 6px; font-size: 21px; color: #14532d; }
.order-placed-banner p  { margin: 0; font-size: 14px; color: #2f5d43; line-height: 1.6; }
.order-placed-banner strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

@media (max-width: 600px) {
  .order-placed-banner { flex-direction: column; gap: 10px; padding: 18px; }
}

/* The review form on the product page. Shown only to a customer who has
   actually received the product, so it never appears as a form that will be
   refused on submit. */
.review-form {
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 24px;
  background: #fafafa;
}
.review-form h4 { margin: 0 0 14px; font-size: 16px; }
.review-form .form-group { margin-bottom: 14px; }
.review-form .af-hint { margin: 10px 0 0; }

/* Star picker. Radio inputs stay in the DOM for keyboard and screen-reader
   users; only their visual box is replaced. */
.rating-input { display: flex; gap: 4px; }
.rating-star { cursor: pointer; font-size: 22px; color: #d0d0d0; line-height: 1; }
.rating-star input { position: absolute; opacity: 0; width: 0; height: 0; }
.rating-star:hover,
.rating-star:has(input:checked) { color: #f5a623; }
/* Everything to the left of the checked star fills too, which is how a rating
   control is expected to read. */
.rating-input:has(input:checked) .rating-star { color: #f5a623; }
.rating-input .rating-star:has(input:checked) ~ .rating-star { color: #d0d0d0; }
.rating-star input:focus-visible + span { outline: 2px solid #21518c; outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Photon brand treatment

   The hero, blog and contact banners used to be stock photographs of other
   companies' shoes, fetched from a third party on every page view. They are
   replaced with the brand's own mark over a brand gradient: nobody else's
   product on our storefront, and one fewer external request.

   The mark is an SVG, so the same file serves a 28px header logo and a 900px
   watermark without shipping a photograph for either.
   ============================================================ */

.hero,
.blog-hero,
.contact-hero { position: relative; overflow: hidden; }

/* The watermark. Deliberately faint and behind everything — it is a texture,
   not a second logo competing with the one in the header. */
.hero::after,
.blog-hero::after,
.contact-hero::after {
  content: '';
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(620px, 62vw);
  aspect-ratio: 1;
  background: url('../images/photon-mark-white.svg') center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}

/* Keep the copy above the watermark. */
.hero-content,
.blog-hero .container,
.contact-hero .container { position: relative; z-index: 1; }

@media (max-width: 720px) {
  /* On a phone the watermark sits behind the headline rather than beside it,
     where at this opacity it muddies the text. */
  .hero::after,
  .blog-hero::after,
  .contact-hero::after { opacity: .05; right: -22%; }
}

/* ── The header lockup ────────────────────────────────────── */

.logo-icon.photon-mark {
  background: none !important;
  box-shadow: none !important;
  display: grid;
  place-items: center;
}
.logo-icon.photon-mark img,
.footer-logo .logo-icon.photon-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── The Photon panel on the home page ────────────────────── */

.photon-collection {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 12% 30%, rgba(238,28,37,.22) 0%, rgba(238,28,37,0) 55%),
              linear-gradient(135deg, #0A0A0A 0%, #17181C 55%, #2A0C0E 100%);
  color: #fff;
}
.photon-collection::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 78vw);
  aspect-ratio: 1;
  background: url('../images/photon-mark-white.svg') center / contain no-repeat;
  opacity: .06;
  pointer-events: none;
}
.photon-collection .container { position: relative; z-index: 1; }

/* The mark, shown properly rather than as a watermark, beside the copy. */
.photon-brandmark {
  width: min(280px, 60vw);
  aspect-ratio: 1;
  margin: 0 auto 22px;
  background: url('../images/photon-mark.svg') center / contain no-repeat;
}
.photon-wordmark {
  display: block;
  max-width: min(340px, 72vw);
  margin: 0 auto 10px;
  height: auto;
}
.photon-tagline {
  text-align: center;
  font-style: italic;
  letter-spacing: .06em;
  opacity: .85;
  margin: 0 0 6px;
}

/* The mobile menu's section labels.

   They were <h3>, which put three headings ahead of the page's own <h1> —
   anyone navigating by heading met "Shop Categories / Information / My Account"
   before the page title. They now carry the same weight visually, inheriting
   from .mobile-nav-section h3 where that rule exists, without joining the
   document outline. */
.mobile-nav-section .mobile-nav-heading {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a8a8a;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-nav-section .mobile-nav-heading i { color: #EE1C25; }

/* ============================================================
   The hidden attribute must actually hide things.

   `hidden` works through the user-agent stylesheet's `[hidden]{display:none}`,
   which any class rule setting a display value overrides — and
   `.header-action-item` sets `display:flex`. So a signed-in customer saw BOTH
   "Account" and "Sign In" in the header: the script set el.hidden = true on the
   guest link exactly as intended, and the stylesheet quietly ignored it.

   Nothing errors, the attribute is right there in the DOM, and the element is
   on screen anyway — which is why this is easy to stare past.

   Declared once, globally, so every data-auth-only / data-guest-only element
   behaves the same way no matter what display its own class sets.
   ============================================================ */
[hidden] { display: none !important; }

/* Sign Out on the account page.

   .btn-secondary is white text inside a white border — it was written for the
   dark hero, where that reads perfectly. On the white account panel it is white
   on white: the button is there, it is clickable, and it is invisible.

   Scoped to this one placement rather than changing .btn-secondary, which the
   hero and the CTA band still rely on. */
.profile-actions .btn-secondary {
  color: #333;
  border-color: #d6d6d6;
  background: #fff;
  padding: 12px 24px;
}
.profile-actions .btn-secondary:hover {
  color: #fff;
  background: #EE1C25;
  border-color: #EE1C25;
  box-shadow: 0 8px 22px rgba(238,28,37,.22);
}

/* Policy links in the footer base. The terms, privacy and returns pages
   existed but were linked from nowhere — for a returns policy, that is much
   the same as not having one. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: center;
  margin-top: 10px;
}

.footer-legal a {
  color: inherit;
  opacity: .75;
  font-size: 13px;
  text-decoration: none;
}

.footer-legal a:hover,
.footer-legal a:focus-visible { opacity: 1; text-decoration: underline; }

/* ============================================================
   Customer account dashboard
   ------------------------------------------------------------
   The page shows what a shopper actually comes here for: what they
   ordered, where it is going, and the details the shop holds about
   them. Everything below supports one of those three.
   ============================================================ */

/* Two columns: orders take the room, the side rail carries the
   address book and the shortcuts. */
.profile-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.profile-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.profile-side .profile-section { margin: 0; }

.since-badge { background: #f2f3f5; color: #55606f; }

/* Status is a word AND an icon. Dispatched and delivered are a green
   pair that many colour-blind readers cannot tell apart, so the shape
   beside the word is what separates them. */
.status-badge { display: inline-flex; align-items: center; gap: 6px; }
.status-wait { background: #F7F2DC; color: #6E6300; }
.status-move { background: #E8ECFB; color: #2B4ACB; }
.status-done { background: #E3F1E9; color: #1B7A46; }
.status-off  { background: #F1F2F4; color: #5A626D; }

/* Order cards: the pairs, then the facts, then the way to the parcel. */
.order-card { transition: border-color .15s ease, box-shadow .15s ease; }
.order-card:hover { border-color: #d9d9d9; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.order-thumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.order-thumbs img { width: 48px; height: 48px; object-fit: cover; border-radius: 9px; border: 1px solid #ececec; background: #fafafa; }
.thumb-blank { width: 48px; height: 48px; border-radius: 9px; border: 1px solid #ececec; background: #fafafa; display: grid; place-items: center; color: #b9b9b9; }
.thumb-more { font-size: 12.5px; color: #6b6b6b; font-weight: 600; }
.order-total { font-weight: 700; color: #222; }
.order-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid #f2f2f2; padding-top: 10px; }
.order-card-foot .af-hint { margin: 0; }

/* Address book. A saved address is what makes a second order a few
   taps rather than a form. */
.address-list { display: flex; flex-direction: column; gap: 12px; }
.address-card { border: 1px solid #ececec; border-radius: 12px; padding: 14px 16px; font-size: 13.5px; }
.address-card.is-default { border-color: #D62828; background: #fffafa; }
.address-card p { margin: 4px 0 0; color: #444; line-height: 1.55; }
.address-card .af-hint { margin: 6px 0 0; }
.address-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tag { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: #D62828; color: #fff; padding: 2px 8px; border-radius: 999px; }
.link-danger { background: none; border: 0; padding: 6px 0 0; font: inherit; font-size: 12.5px; color: #b3261e; cursor: pointer; text-decoration: underline; }
.link-danger:disabled { opacity: .5; cursor: default; }

/* Forms inside the dashboard — editing details, adding an address. */
.stack-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #444; }
.field small { display: block; font-weight: 400; color: #8a8a8a; font-size: 11.5px; }
.field input {
  width: 100%; border: 1px solid #dcdcdc; border-radius: 10px; padding: 10px 12px;
  font: inherit; font-size: 14px; font-weight: 400; background: #fff; color: #222;
}
.field input:focus-visible { outline: 2px solid #D62828; outline-offset: 1px; border-color: #D62828; }
.stack-form .check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #444; }
.form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-note { margin: 0; font-size: 13px; }
.form-note.is-ok  { color: #1b7a46; }
.form-note.is-bad { color: #b3261e; }

/* The side rail drops below the orders before the columns get too
   narrow to read an address in. */
@media (max-width: 900px) {
  .profile-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Footer corrections
   ------------------------------------------------------------
   The footer link columns are written as bare <a> elements, while the
   stylesheet only ever styled links inside <ul><li>. Nothing set them to
   block, so every column rendered as one run-on paragraph: "All Footwear
   Sports Shoes Casual Shoes School Shoes Hawai Slippers" reads as a
   sentence, not as six destinations, and the wrapping hid where each link
   began and ended.
   ============================================================ */
.footer-col > a:not(.footer-logo) {
  display: block;
  color: rgba(255,255,255,.58);
  font-size: 14px;
  padding: 5px 0;
  transition: color .15s ease, padding-left .15s ease;
}
.footer-col > a:not(.footer-logo):hover,
.footer-col > a:not(.footer-logo):focus-visible { color: #FF7A29; padding-left: 4px; }

/* The brand name and its tagline sat on one line, over the mark — and the name
   was all but invisible besides: .logo-name paints itself with a dark gradient
   clipped to the glyphs (-webkit-text-fill-color: transparent), which reads on
   the white header and vanishes against the black footer. Both the fill and the
   gradient have to be undone; setting `color` alone changes nothing while the
   fill stays transparent. */
.footer-logo .logo-name {
  display: block; font-size: 16px; font-weight: 800; line-height: 1.25;
  background: none; color: #fff; -webkit-text-fill-color: #fff;
}
.footer-logo .logo-tagline { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #FF7A29; font-weight: 700; margin-top: 2px; }
.footer-logo .logo-icon { flex: none; }

/* A button that is a link in every way but the element. */
button.section-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ============================================================
   Shop filters — colour
   ------------------------------------------------------------
   The swatches were circles coloured by a CSS class named after the
   value ("black-red", "navy-blue-white"). Seven of the twenty-nine
   values had a matching rule; the rest rendered as identical pale
   grey dots with no label, so the filter could not be used: nothing
   on screen said which dot was which.

   Each chip now carries the colour it names — split down the middle
   for a two-tone pair, as the shoe is — and the name in words beside
   it.
   ============================================================ */
.color-filter-options { display: flex; flex-wrap: wrap; gap: 7px; }

.color-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 6px;
  border: 1px solid #e4e4e4; border-radius: 999px;
  background: #fff; cursor: pointer;
  font: inherit; font-size: 12.5px; color: #444;
  transition: border-color .14s ease, background .14s ease;
}
.color-chip:hover { border-color: #bdbdbd; background: #fafafa; }
.color-chip.active { border-color: #D62828; background: #fff5f5; color: #D62828; font-weight: 600; }
.color-chip:focus-visible { outline: 2px solid #D62828; outline-offset: 1px; }

.color-chip-swatch {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  /* Half and half for a two-tone pair; a single colour sets both
     halves to the same value and reads as solid. */
  background: linear-gradient(135deg, var(--swatch-a) 0 50%, var(--swatch-b) 50% 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
/* White and cream disappear against the panel without an edge. */
.color-chip-swatch.is-pale { box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }

.color-chip-name { white-space: nowrap; }

/* ============================================================
   Product cards line up
   ------------------------------------------------------------
   A two-line product name pushed the price and the button down, so
   in a row of four the buttons sat at three different heights. The
   card is a column and the button is pushed to the bottom of it, so
   they align whatever the name does.
   ============================================================ */
.product-grid .product-card { display: flex; flex-direction: column; }
.product-grid .product-card-body { display: flex; flex-direction: column; flex: 1; }
.product-grid .product-card-body h3 { min-height: 2.6em; }
.product-grid .product-card-body .btn-buy,
.product-grid .product-card-body .btn-primary { margin-top: auto; }

/* The product page's colour swatch, same treatment as the shop filter. */
.color-swatch.is-pale { box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }

/* ============================================================
   Cart summary column
   ------------------------------------------------------------
   Two rules painted a card here: the wrapper (.cart-summary) and the
   card inside it (.summary-card). With the inner card hidden — an
   empty cart, or a signed-out visitor — the wrapper stayed on screen
   as a blank white box beside the "please sign in" panel, which reads
   as something that failed to load.

   The wrapper goes back to being what its name says: a sticky column.
   The card inside keeps the card styling. .checkout-summary is left
   alone, because there the wrapper IS the card.
   ============================================================ */
.cart-summary {
  background: none;
  border: 0;
  padding: 0;
}

/* The forgot-password link sat flush against the Sign In button, reading as
   part of it. */
.auth-aside { margin: 4px 0 18px; font-size: 13.5px; }
.auth-aside a { color: #D62828; font-weight: 600; }
.auth-aside a:hover { text-decoration: underline; }

/* ============================================================
   Blog cards
   ------------------------------------------------------------
   Titles, excerpts and bylines were all centred, so every line had a
   ragged left edge and the eye had to find the start of each one.
   The dates also sat at whatever height the excerpt happened to end,
   so nothing lined up across a row.
   ============================================================ */
.post-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #ececec; border-radius: 14px;
  padding: 22px; text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.post-card:hover { border-color: #ddd; box-shadow: 0 6px 22px rgba(0,0,0,.07); transform: translateY(-2px); }

.post-card-tag {
  align-self: flex-start;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #D62828; background: rgba(214,40,40,.08);
  padding: 4px 9px; border-radius: 999px; margin-bottom: 12px;
}
.post-card h3 { font-size: 17px; line-height: 1.35; margin: 0 0 9px; }
.post-card h3 a { color: #1a1a1a; }
.post-card:hover h3 a { color: #D62828; }
.post-card-excerpt { color: #5f5f5f; font-size: 13.5px; line-height: 1.65; margin: 0 0 16px; }

/* Pinned to the foot, so bylines line up across the row however long
   the excerpt runs. */
.post-card-foot {
  margin-top: auto; padding-top: 14px; border-top: 1px solid #f2f2f2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.post-card-foot small { color: #8a8a8a; font-size: 12px; }
.post-card-link { color: #D62828; font-weight: 700; font-size: 13px; white-space: nowrap; }
.post-card-link:hover { text-decoration: underline; }

/* ============================================================
   Dealer block, reused off the dark band
   ------------------------------------------------------------
   .dealer-content and .dealer-feature were written for the "Become
   an RKD Dealer" band on the home page, which is dark — so their text
   is white. The contact page reuses the same components on a light
   background, where every line of it disappeared: the address, the
   phone number, the email and the opening hours rendered as four
   orange icons with nothing beside them.

   The white now belongs to the dark band that needs it; everywhere
   else the same markup reads in ink.
   ============================================================ */
.dealer-content { color: var(--ink); }
.dealer-content p { color: #5a5a5a; }
.dealer-feature { color: #444; }

.dealer-section .dealer-content { color: var(--white); }
.dealer-section .dealer-content p { color: rgba(255,255,255,0.75); }
.dealer-section .dealer-feature { color: rgba(255,255,255,0.85); }

/* The contact page's details column: aligned with the form beside it
   rather than floating in the middle of an empty half-page. */
.contact-aside-title { font-size: 19px; font-weight: 800; margin: 0 0 18px; }
.features .dealer-grid { align-items: start; }
.features .dealer-content { padding-top: 6px; }

/* Checkout: the saved-address picker above the shipping form. The cards reuse
   .shipping-option; these only add spacing, the Default tag and the checkbox. */
.saved-addresses { margin-bottom: 22px; }
.saved-addresses-title { font-size: 13px; font-weight: 700; color: var(--grey, #6b6b6b); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 10px; }
.saved-address-option { align-items: flex-start; }
.saved-address-option input[type="radio"] { margin-top: 2px; }
.saved-address-option .option-time { line-height: 1.5; word-break: break-word; }
.saved-address-tag { font-size: 11px; font-weight: 700; color: var(--red, #d62828); background: rgba(214, 40, 40, .08); border-radius: 999px; padding: 2px 10px; }
.save-address-check { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 13.5px; color: #444; cursor: pointer; }
.save-address-check input { width: 18px; height: 18px; accent-color: var(--red, #d62828); }
.save-address-check[hidden] { display: none; }

/* Footer on phones: grid columns refuse to shrink below their longest word,
   so the support email pushed the two-column footer wider than the screen
   and gave every page a sideways scroll. */
.footer-grid > * { min-width: 0; }
.footer-col { overflow-wrap: anywhere; }
@media (max-width: 768px) {
  .footer-grid { gap: 28px 20px; }
}
/* An <input> will not shrink below its default ~20 characters, so in the
   narrow footer column it pushed the send button off the edge. */
.newsletter-input input { min-width: 0; }
.newsletter-input button { flex-shrink: 0; }