/* ==========================================================================
   FASHFINITY DESIGN SYSTEM — single source of truth for spacing & colors
   --------------------------------------------------------------------------
   These design tokens mirror the source Shopify theme
   (/Users/vithanichandresh/Documents/fashfinity/website/theme — base.css +
   settings). They live on :root, so they apply identically on EVERY page of
   the store (home, category, product, cart, account, checkout, topics…).

   RULE: always style with these tokens (var(--spacing-*), var(--color-*),
   var(--radius-*)) — never hard-code pixel gaps or hex colors. Changing a
   value here re-themes the whole site at once.
   ========================================================================== */

:root {
  /* ---- Typography ---- */
  --font-primary--family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading-family: var(--font-primary--family);

  /* ---- Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64px) ---- */
  --spacing-2xs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* ---- Radii ---- */
  --radius-pill: 999px;
  --radius-soft: 18px;
  --radius-sm: 10px;
  --radius-circle: 50%;
  --style-border-radius-inputs: 8px;

  /* ---- Effects ---- */
  --bottom-nav-height: 60px;
  --icon-stroke-width: 1.5;
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* ---- Colors ---- */
  --color-background: #ffffff;
  --color-foreground: #1a1a1a;
  --color-accent: #d43329;
  --color-footer-background: #111111;
  --color-footer-text: #ffffff;
  --color-tint: #fbe4e4;

  /* ---- Layout ---- */
  --page-width: 90rem;
  --page-margin: 16px;
  /* raw cap; components add their own --page-margin padding for the gutter.
     wider cap = smaller side gutters on desktop (only affects screens wider
     than this; mobile viewports are always narrower, so mobile is unchanged) */
  --content-width: 112rem;
}

@media (min-width: 990px) {
  :root {
    /* The bottom tab bar is mobile-only; header icons take over on desktop */
    --bottom-nav-height: 0px;
  }
}

/* ---------- Reset / base ---------- */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary--family);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-foreground);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  margin: 0;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

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

/* Shared centered-content container used inside full-bleed bands
   (header / footer / announcement bar all keep their own background
   full-width, but their inner content lines up with everything else) */
.header-upper,
.header-lower,
.header-menu,
.center-1,
.footer-upper,
.footer-lower {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
}

/* wider, comfortable side gutter on desktop so content sits inset and every
   section lines up. mobile keeps the 16px gutter (override is desktop-only). */
@media (min-width: 990px) {
  :root {
    --page-margin: 2.5rem;
  }
}

/* on the home page each section manages its own horizontal inset, so the
   center container must not add a second gutter on top */
.html-home-page .center-1 {
  padding-left: 0;
  padding-right: 0;
}

/* account / edit-profile / order-history use the same 16px side gutter as the
   home sections (var(--spacing-md)) instead of the wider default page gutter */
.html-account-page .center-1,
.html-account-menu-page .center-1,
.html-customer-info-page .center-1,
.html-order-list-page .center-1 {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

/* ---------- Announcement bar ---------- */

.announcement-bar {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: var(--spacing-sm) 0;
  background-color: var(--color-footer-background);
  color: var(--color-footer-text);
  font-size: 0.8125rem;
  font-weight: 700;
}

.announcement-bar[hidden] {
  display: none;
}

.announcement-bar__marquee {
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
}

.announcement-bar__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0 var(--spacing-sm) 0 var(--spacing-xs);
  padding: 0;
  background: none;
  border: none;
  color: var(--color-footer-text);
  opacity: 0.85;
}

.announcement-bar__close:hover {
  opacity: 1;
}

.announcement-bar__close svg {
  width: 16px;
  height: 16px;
}

.announcement-bar__track {
  display: flex;
  width: max-content;
  animation: announcement-marquee 22s linear infinite;
}

.announcement-bar__track:hover,
.announcement-bar__track:focus-within {
  animation-play-state: paused;
}

@keyframes announcement-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.announcement-bar__message {
  flex-shrink: 0;
  padding: 0 var(--spacing-lg);
  white-space: nowrap;
}

/* ---------- Header ---------- */

.header {
  position: relative;
  z-index: 30;
  background-color: var(--color-background);
}

/* while the drawer is open, lift the whole header stacking context above the
   fixed bottom nav (z-index 40) so the drawer/backdrop cover it */
.header:has(.menu-dropdown--active) {
  z-index: 60;
}

.header .skip {
  position: absolute;
  left: -9999px;
}

.header .skip:focus {
  left: var(--spacing-sm);
  top: var(--spacing-sm);
  z-index: 100;
  padding: 0.6rem 1rem;
  background-color: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-soft);
}

/* thin top row: currency/tax/language selectors hidden, icon cluster kept
   (desktop only — mobile uses the bottom nav + hamburger drawer instead) */
.header-upper {
  display: none;
  justify-content: flex-end;
  align-items: center;
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  gap: var(--spacing-md);
}

/* header-upper now only holds the (hidden) tax/currency/language selectors, so
   it stays collapsed on every breakpoint; the icon cluster moved into the main
   header row */

.header-selectors-wrapper {
  display: none;
}

/* icon cluster (account / wishlist / cart) — hidden on mobile (bottom nav is
   used instead); shown inline in the header row on desktop */
.header-links-wrapper {
  position: relative;
  display: none;
  align-items: center;
  gap: var(--spacing-md);
}

/* Mini-cart flyout: a dropdown anchored under the cart icon, hidden until the
   cart link is hovered/focused (.active is toggled by the header script). This
   keeps the verbose "no items in your cart" copy out of the header bar. */
.flyout-cart {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  display: none;
  min-width: 20rem;
  margin-top: var(--spacing-xs);
  padding: var(--spacing-md);
  background-color: var(--color-background);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  font-size: 0.875rem;
}

.flyout-cart.active {
  display: block;
}

.header-links ul {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.header-links li {
  display: flex;
}

.header-links a {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-foreground);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.header-links a:hover,
.header-links a:focus {
  opacity: 1;
}

.header-links .wishlist-label,
.header-links .cart-label {
  display: none;
}

.header-links a.ico-wishlist,
.header-links a.ico-cart {
  position: relative;
  width: 26px;
  height: 26px;
  justify-content: center;
  opacity: 0.85;
}

.header-links a.ico-wishlist::before,
.header-links a.ico-cart::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.header-links a.ico-cart::before {
  background-image: url("/Themes/Fashfinity/Content/images/icon-cart.svg");
}

.header-links a.ico-wishlist::before {
  background-image: url("/Themes/Fashfinity/Content/images/icon-wishlist.svg");
}

.header-links a.ico-account::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin-right: 2px;
  background-image: url("/Themes/Fashfinity/Content/images/icon-account.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.header-links .wishlist-qty,
.header-links .cart-qty {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: 0.5625rem;
  line-height: 1;
}

/* nopCommerce admin convenience bar — hidden on the storefront */
.admin-header-links {
  display: none;
}

/* logo + search + category-circles block */
.header-lower {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: var(--spacing-md) var(--spacing-md);
  padding: var(--spacing-xs) var(--page-margin) var(--spacing-lg);
}

.header-spacer {
  grid-column: 3;
  grid-row: 1;
  width: 32px;
  height: 32px;
}

.header-logo {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  justify-content: center;
}

.header-logo img {
  /* logo.png is trimmed to its content (no transparent padding), so this height
     is the actual mark height and the logo aligns with the page gutter on its
     own — no negative-margin hack needed. 22px keeps the same visual size the
     padded logo had at the old max-height:42px (unchanged on mobile). */
  max-height: 22px;
  width: auto;
}

.search-box.store-search-box {
  grid-column: 1 / -1;
  grid-row: 2;
}

@media (max-width: 989px) {
  /* let the toggle button and dropdown panel place independently into
     the header-lower grid instead of as one block */
  .menu-container.menu-dropdown {
    display: contents;
  }

  .menu__toggle {
    grid-column: 1;
    grid-row: 1;
  }

  .menu {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .header-categories {
    grid-row: 4;
  }
}

.search-box form {
  position: relative;
  display: flex;
  align-items: center;
}

/* animated overlay placeholder that fades/slides between examples */
.search-box .search-rotator {
  position: absolute;
  left: 2.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: color-mix(in srgb, var(--color-foreground) 45%, transparent);
  font-size: 0.9375rem;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.search-box .search-rotator--out {
  opacity: 0;
  transform: translateY(calc(-50% - 8px));
}

.search-box .search-rotator--in {
  opacity: 0;
  transform: translateY(calc(-50% + 8px));
  transition: none;
}

.search-box input.search-box-text {
  flex: 1;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-radius: var(--radius-pill);
  padding: 0.7rem 2.75rem 0.7rem 2.75rem;
  font-family: inherit;
  font-size: 0.9375rem;
  background-color: color-mix(in srgb, var(--color-foreground) 3%, var(--color-background));
  background-image: url("/Themes/Fashfinity/Content/images/icon-search.svg");
  background-repeat: no-repeat;
  background-position: left 1.1rem center;
  background-size: 20px 20px;
}

.search-box input.search-box-text:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* clear (×) button shown while the field has text */
.search-box .search-clear {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-circle);
  background: none;
  color: var(--color-foreground);
  opacity: 0.6;
}

.search-box .search-clear:hover {
  opacity: 1;
}

/* display:flex above wins over the native [hidden] rule, so restore it */
.search-box .search-clear[hidden] {
  display: none;
}

.search-box .search-clear svg {
  width: 16px;
  height: 16px;
}

.search-box select.search-box-category {
  display: none;
}

/* autofill/autocomplete does the job of a submit button */
.search-box .search-box-button {
  display: none;
}

/* autocomplete dropdown */
.search-box .ui-autocomplete {
  list-style: none;
  margin: var(--spacing-xs) 0 0;
  padding: var(--spacing-xs);
  background-color: var(--color-background);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-soft);
  z-index: 40;
}

.search-box .ui-autocomplete .autocomplete-item {
  border-radius: var(--radius-sm);
}

.search-box .ui-autocomplete .autocomplete-item a {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  text-decoration: none;
  color: var(--color-foreground);
}

.search-box .ui-autocomplete .autocomplete-item.ui-state-focus a,
.search-box .ui-autocomplete .autocomplete-item:hover a {
  background-color: color-mix(in srgb, var(--color-foreground) 5%, transparent);
}

.search-box .autocomplete-thumb img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.search-box .autocomplete-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.search-box .autocomplete-name {
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-box .autocomplete-price {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.75;
}

.search-box .autocomplete-see-all {
  margin-top: var(--spacing-xs);
  padding-top: var(--spacing-sm);
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 8%, transparent);
}

.search-box .autocomplete-see-all a {
  display: block;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--color-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

/* main category menu — mobile: hamburger + centered logo, dropdown panel
   and category circles each take their own full-width grid row below;
   desktop: menu becomes its own flex item that wraps onto a line below
   the logo/search row (matches the original DefaultClean layout) */
.menu-container.menu-dropdown {
  position: relative;
  grid-column: 1 / -1;
}

.menu__toggle {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 0;
  cursor: pointer;
}

.menu__toggle::before,
.menu__toggle::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  height: 2px;
  background-color: var(--color-foreground);
  border-radius: 1px;
}

.menu__toggle::before {
  top: 7px;
  box-shadow: 0 6px 0 var(--color-foreground);
}

.menu__toggle::after {
  bottom: 7px;
}

.menu-backdrop {
  display: none;
}

.menu__close {
  display: none;
}

.menu__item {
  position: relative;
}

.menu__link {
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-foreground);
  opacity: 0.75;
}

.menu__link:hover {
  opacity: 1;
}

@media (max-width: 989px) {
  /* slide-in drawer, over a dark backdrop, closed off-screen by default */
  .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 45;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .menu-dropdown--active .menu-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    width: min(320px, 85vw);
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);
    padding: var(--spacing-lg);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }

  .menu-dropdown--active .menu {
    transform: translateX(0);
  }

  /* close button sits in its own top-right header row */
  .menu__close {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    width: 40px;
    height: 40px;
    margin-bottom: var(--spacing-md);
    border: 1.5px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-foreground);
    padding: 0;
  }

  .menu__close svg {
    width: 20px;
    height: 20px;
  }

  .menu__drawer-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-md);
  }

  .menu__drawer-links .menu__link {
    font-size: 1.125rem;
    font-weight: 600;
    opacity: 1;
  }

  /* account link pinned to the bottom of the drawer */
  .menu__drawer-footer {
    margin-top: auto;
    padding-top: var(--spacing-md);
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  }

  .menu__account {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-foreground);
  }

  .menu__account svg {
    width: 22px;
    height: 22px;
  }
}

/* the footer only belongs in the mobile drawer, not the desktop inline menu */
@media (min-width: 990px) {
  .menu__drawer-footer {
    display: none;
  }
}

/* category quick-nav circles (header) */
.header-categories {
  grid-column: 1 / -1;
}

.header-categories .item-grid {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
  overflow-x: auto;
  scrollbar-width: none;
}

.header-categories .item-grid::-webkit-scrollbar {
  display: none;
}

.header-categories .item-box {
  flex: 0 0 auto;
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  text-decoration: none;
  text-align: center;
}

.header-categories .item-box .picture {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-circle);
  overflow: hidden;
  background-color: var(--color-background);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
}

.header-categories .item-box .picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-categories .item-box .title {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
}

@media (min-width: 990px) {
  .header-lower {
    display: flex;
    /* one single row — never wrap the search/icons to a second line at narrow
       desktop widths (that was pushing the logo/nav out of alignment) */
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }

  .header-spacer {
    display: none;
  }

  .header-logo {
    justify-content: flex-start;
    order: 1;
    flex-shrink: 0;
  }

  /* nav sits inline right after the logo (not on its own row); may shrink */
  .menu-container.menu-dropdown {
    order: 2;
    flex: 0 1 auto;
    min-width: 0;
  }

  /* search is compact and pushed toward the right, leaving room for the icons;
     it shrinks (min-width:0) so everything stays on one row */
  .search-box.store-search-box {
    flex: 0 1 340px;
    min-width: 0;
    order: 3;
    margin-left: auto;
  }

  /* account / wishlist / cart icons at the far right of the row */
  .header-links-wrapper {
    display: flex;
    order: 4;
    flex-shrink: 0;
  }

  .menu__toggle {
    display: none;
  }

  .menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--spacing-md) var(--spacing-lg);
  }

  /* the nav links live inside .menu__drawer-links; on desktop lay them out
     as an inline horizontal row next to the logo (they only get column flex
     in the mobile drawer) */
  .menu__drawer-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-md) var(--spacing-lg);
  }

  .menu__drawer-links .menu__link {
    font-size: 0.9375rem;
    font-weight: 500;
    text-transform: none;
    white-space: nowrap;
  }

  /* redundant on desktop: same categories repeat in the homepage's
     "shop by category" section just below */
  .header-categories {
    display: none;
  }
}

/* ---------- Page / content wrapper ---------- */

/* sticky footer on ALL viewports: when a page's content is short, grow the
   content area so the footer sits at the bottom of the viewport instead of
   floating up with empty white space below it. 100dvh tracks the dynamic
   viewport height so mobile browser chrome doesn't leave a gap. */
.master-wrapper-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.master-wrapper-content {
  min-height: 40vh;
  flex: 1 0 auto;
}

/* ---------- Hero (Widgets.Swiper) ---------- */

.swiper.nop-slider {
  /* mobile (unchanged — carefully tuned small side gutters). extra bottom
     padding holds the pagination dots; overflow hidden keeps the adjacent
     slide from peeking in */
  margin: var(--spacing-lg) var(--spacing-xs) var(--spacing-xl);
  max-width: calc(var(--content-width) - (2 * var(--spacing-xs)));
  padding-bottom: var(--spacing-xl);
  overflow: hidden;
}

@media (min-width: 990px) {
  /* desktop only: center the hero and align it with the homepage sections
     (their inner content is content-width - 2*side-gutter, centered).
     NOTE: never put horizontal padding on a .swiper element — Swiper sizes
     slides from the container width and horizontal padding overflows them. */
  .swiper.nop-slider {
    max-width: calc(var(--content-width) - (2 * var(--page-margin)));
    margin-left: auto;
    margin-right: auto;
  }
}

/* rounded corners + portrait crop live on the media, so the dots below
   sit outside the image on the page background */
.swiper.nop-slider .hero-slide-media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

@media (min-width: 750px) {
  .swiper.nop-slider .hero-slide-media {
    /* full container width with a fixed banner height. NOTE: don't use
       aspect-ratio + max-height without a width here — the media then takes its
       intrinsic (height*ratio) width and leaves a gap on the right. */
    aspect-ratio: auto;
    width: 100%;
    height: 520px;
  }
}

.swiper.nop-slider .swiper-slide picture {
  display: block;
  width: 100%;
}

.swiper.nop-slider .swiper-slide img.slider-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 990px) {
  /* desktop banner is a wide crop of a tall portrait photo, so pull the visible
     band up to the model's face/upper body instead of the mid-torso */
  .swiper.nop-slider .swiper-slide img.slider-img {
    object-position: center 18%;
  }
}


.swiper.nop-slider .swiper-pagination-bullet {
  background: color-mix(in srgb, var(--color-foreground) 25%, transparent);
  opacity: 1;
}

.swiper.nop-slider .swiper-pagination-bullet-active {
  background: var(--color-accent);
  width: 20px;
  border-radius: var(--radius-pill);
}

/* pagination sits below the image, aligned to its left edge */
.swiper.nop-slider .swiper-pagination {
  position: absolute;
  top: auto;
  bottom: 0;
  /* align the dots under the image's left edge */
  left: 0;
  width: auto;
  text-align: left;
  padding-left: var(--spacing-2xs);
}

.hero-slide-media {
  position: relative;
  display: block;
  width: 100%;
}

/* nav arrows — circular white buttons over the hero */
.swiper.nop-slider .swiper-button-prev,
.swiper.nop-slider .swiper-button-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-foreground);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
  transition: background 0.15s ease, transform 0.06s ease;
}

.swiper.nop-slider .swiper-button-prev:hover,
.swiper.nop-slider .swiper-button-next:hover {
  background: #ffffff;
}

.swiper.nop-slider .swiper-button-prev:active,
.swiper.nop-slider .swiper-button-next:active {
  transform: scale(0.94);
}

.swiper.nop-slider .swiper-button-prev::after,
.swiper.nop-slider .swiper-button-next::after {
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 749px) {
  /* smaller arrows on phones */
  .swiper.nop-slider .swiper-button-prev,
  .swiper.nop-slider .swiper-button-next {
    width: 34px;
    height: 34px;
  }
  .swiper.nop-slider .swiper-button-prev::after,
  .swiper.nop-slider .swiper-button-next::after {
    font-size: 12px;
  }
}

.hero-slide-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.3) 40%, transparent 70%);
  pointer-events: none;
}

.hero-slide-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  color: #ffffff;
}

.hero-slide-overlay-heading {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.hero-slide-overlay-cta {
  display: inline-block;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  padding-bottom: var(--spacing-2xs);
  border-bottom: 2px solid currentColor;
}

@media (min-width: 750px) {
  .hero-slide-overlay {
    gap: var(--spacing-lg);
    max-width: 460px;
    padding: var(--spacing-2xl);
  }

  .hero-slide-overlay-heading {
    font-size: 2.5rem;
    letter-spacing: 0.02em;
  }
}

/* ---------- Homepage product / category rows ---------- */

.home-page-category-grid,
.home-page-product-grid,
.product-grid.bestsellers,
.promo-banner,
.brand-values,
.testimonials {
  max-width: var(--content-width);
  margin: 0 auto;
  /* horizontal inset matches the shared page gutter so home sections line up
     with the header, footer and other pages (16px mobile, 40px desktop) */
  padding: var(--spacing-lg) var(--page-margin);
}

.home-page-product-grid .title,
.product-grid.bestsellers .title,
.category-grid__heading,
.testimonials > .title {
  margin: 0 0 var(--spacing-md);
  font-size: 1.125rem;
  font-weight: 600;
}

/* section heading row with a "see all" link on the right */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.section-head .title {
  margin: 0 0 var(--spacing-md);
}

.section-head .see-all {
  flex-shrink: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}

.section-head .see-all:hover {
  text-decoration: underline;
}

/* shop by category */
.home-page-category-grid .item-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.home-page-category-grid .item-box {
  position: relative;
}

.home-page-category-grid .item-box .picture {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-soft);
  overflow: hidden;
  background-color: color-mix(in srgb, var(--color-foreground) 4%, var(--color-background));
}

.home-page-category-grid .item-box .picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-page-category-grid .item-box .title {
  position: absolute;
  left: var(--spacing-sm);
  bottom: var(--spacing-sm);
  margin: 0;
  padding: 0.4rem 1rem;
  background-color: var(--color-background);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  z-index: 2;
}

.home-page-category-grid .item-box .title a {
  text-decoration: none;
  color: var(--color-foreground);
}

/* "shop by category" heading is centered (matches the section's balanced grid) */
.category-grid__heading {
  text-align: center;
}

@media (min-width: 750px) {
  .home-page-category-grid .item-grid {
    /* smaller category cards, capped width and centered (not stretched full) */
    grid-template-columns: repeat(4, minmax(0, 210px));
    justify-content: center;
    gap: var(--spacing-lg);
  }
}

/* "new arrivals" row: horizontal scroll carousel */
.home-page-product-grid .item-grid {
  display: flex;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-2xs);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.home-page-product-grid .item-grid::-webkit-scrollbar {
  display: none;
}

.home-page-product-grid .item-box {
  flex: 0 0 62%;
  scroll-snap-align: start;
}

@media (min-width: 750px) {
  .home-page-product-grid .item-box {
    flex: 1 0 26%;
  }
}

/* bestsellers row: wrapping grid */
.product-grid.bestsellers .item-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

@media (min-width: 750px) {
  .product-grid.bestsellers .item-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
  }
}

@media (min-width: 750px) {
  /* all homepage section headings share one size on desktop */
  .home-page-product-grid .title,
  .product-grid.bestsellers .title,
  .category-grid__heading,
  .testimonials > .title {
    font-size: 1.375rem;
  }
}

/* ---------- Product card ---------- */

.product-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.product-item .picture {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-soft);
  overflow: hidden;
  background-color: color-mix(in srgb, var(--color-foreground) 4%, var(--color-background));
}

.product-item .picture img,
.product-item .picture .swiper {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-item:has(.old-price) .picture::after {
  content: "Sale";
  position: absolute;
  top: var(--spacing-xs);
  left: var(--spacing-xs);
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 2;
}

/* Out of stock: white veil over the image + centered label */
.product-item.out-of-stock .picture img,
.product-item.out-of-stock .picture .swiper {
  opacity: 0.55;
}

.product-item.out-of-stock .picture::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.55);
  z-index: 2;
  pointer-events: none;
}

.product-item .out-of-stock-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--color-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

.product-item .details {
  padding-top: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.product-item .product-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
}

.product-item .product-title a {
  color: inherit;
  text-decoration: none;
}

.product-item .sku,
.product-item .product-rating-box,
.product-item .description {
  display: none;
}

.product-item .prices {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: var(--spacing-2xs);
}

.product-item .prices .old-price {
  font-size: 0.8125rem;
  opacity: 0.5;
  text-decoration: line-through;
}

.product-item .prices .actual-price {
  font-size: 0.9375rem;
  font-weight: 700;
}

.product-item:has(.old-price) .prices .actual-price {
  color: var(--color-accent);
}

.product-item .tax-shipping-info,
.product-item .base-price-pangv {
  display: none;
}

/* product cards show image + name + price only, like the live site */
.product-item .buttons {
  display: none;
}

/* ---------- Promo banner ---------- */

.promo-banner {
  padding-top: 0;
  padding-bottom: 0;
}

.promo-banner__inner {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-xl) var(--spacing-lg);
  border-radius: var(--radius-soft);
  background-color: var(--color-tint);
  color: var(--color-foreground);
  text-align: center;
}

.promo-banner__heading {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.promo-banner__code {
  margin: var(--spacing-xs) 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.promo-banner__fine-print {
  margin: var(--spacing-sm) 0 0;
  font-size: 0.75rem;
  opacity: 0.75;
}

/* ---------- Brand values ---------- */

.brand-values__heading {
  max-width: 30ch;
  margin: 0 auto;
  color: var(--color-accent);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-align: center;
}

.brand-values__heading em {
  font-style: italic;
}

.brand-values__divider {
  width: 48px;
  height: 2px;
  margin: var(--spacing-lg) auto var(--spacing-2xl);
  background-color: var(--color-accent);
  border: none;
  border-radius: var(--radius-pill);
}

.brand-values__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl) var(--spacing-md);
}

.brand-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  text-align: center;
}

.brand-value__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}

.brand-value__icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.brand-value__icon svg {
  width: 30px;
  height: 30px;
}

.brand-value__heading {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-accent);
}

.brand-value__body {
  margin: 0;
  max-width: 26ch;
  font-size: 0.8125rem;
  line-height: 1.55;
  opacity: 0.75;
}

@media (min-width: 750px) {
  .brand-values__heading {
    max-width: 34ch;
    font-size: 1.75rem;
  }

  .brand-values__row {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }

  .brand-values__row li {
    padding: 0 var(--spacing-lg);
    border-left: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
  }

  .brand-values__row li:first-child {
    border-left: none;
    padding-left: 0;
  }
}

/* ---------- Testimonials ---------- */

.testimonials > .title {
  text-align: center;
}

.testimonials__stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.testimonial-card {
  padding: var(--spacing-lg);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-radius: var(--radius-soft);
}

.testimonial-card--highlight {
  background-color: var(--color-tint);
  border-color: transparent;
}

.testimonial-card__quote {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.testimonial-card__byline {
  margin: var(--spacing-sm) 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  opacity: 0.7;
}

@media (min-width: 750px) {
  .testimonials__stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
    justify-content: center;
    gap: var(--spacing-lg);
  }
}

/* ---------- Footer ---------- */

.footer {
  background-color: var(--color-footer-background);
  color: var(--color-footer-text);
  padding: var(--spacing-md) var(--page-margin) var(--spacing-lg);
  margin-top: var(--spacing-2xl);
}

.footer-upper {
  display: flex;
  flex-direction: column;
}

.footer-group {
  border-top: 1px solid color-mix(in srgb, var(--color-footer-text) 15%, transparent);
}

.footer-group__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: var(--spacing-md) 0;
  background: none;
  border: none;
  color: var(--color-footer-text);
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

.footer-group__chevron {
  width: 12px;
  height: 12px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-135deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.footer-group--collapsed .footer-group__chevron {
  transform: rotate(45deg);
}

.footer-group__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-lg);
  text-align: left;
}

.footer-group--collapsed .footer-group__list {
  display: none;
}

.footer-group__list a {
  color: var(--color-footer-text);
  opacity: 0.85;
  text-decoration: none;
  font-size: 0.9375rem;
}

.footer-group__list a:hover {
  opacity: 1;
}

.footer-social a {
  display: inline-flex;
  width: 28px;
  height: 28px;
}

.footer-social svg {
  width: 24px;
  height: 24px;
}

.footer-story p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  opacity: 0.85;
}

.footer-story__heading {
  font-weight: 700;
  opacity: 1 !important;
}

.footer-lower {
  padding-top: var(--spacing-xl);
  text-align: center;
}

.footer-disclaimer {
  font-size: 0.8125rem;
  opacity: 0.7;
}

@media (min-width: 750px) {
  .footer-upper {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.4fr;
    gap: var(--spacing-2xl);
    align-items: start;
  }

  .footer-group {
    border-top: none;
  }

  .footer-group__title {
    cursor: default;
    padding-top: 0;
    font-weight: 600;
  }

  .footer-group__chevron {
    display: none;
  }

  .footer-group__list {
    display: flex !important;
  }
}

/* ---------- Bottom mobile nav ---------- */

.bottom-nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: var(--bottom-nav-height);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: var(--color-background);
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
  overflow: hidden;
}

.bottom-nav__item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--color-foreground);
  opacity: 0.65;
}

.bottom-nav__item[aria-current="page"] {
  color: var(--color-accent);
  opacity: 1;
}

.bottom-nav__item svg {
  width: 22px;
  height: 22px;
}

.bottom-nav__icon-wrap {
  position: relative;
  display: flex;
}

.bottom-nav__label {
  font-size: 0.625rem;
  line-height: 1;
}

.bottom-nav__badge {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: 0.5625rem;
  line-height: 1;
}

.bottom-nav__badge[hidden] {
  display: none;
}

@media (min-width: 990px) {
  .bottom-nav {
    display: none;
  }
}

/* ---------- WhatsApp floating button ---------- */

.whatsapp-button {
  position: fixed;
  right: var(--spacing-lg);
  bottom: calc(var(--bottom-nav-height) + var(--spacing-md) + env(safe-area-inset-bottom));
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background-color: #25d366;
  color: #ffffff;
  box-shadow: var(--shadow-soft);
  z-index: 40;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.whatsapp-button:hover {
  transform: scale(1.05);
}

.whatsapp-button svg {
  width: 26px;
  height: 26px;
}

/* ---------- Shop the look (video carousel) ---------- */

.shop-the-look {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--spacing-lg) 0;
}

.shop-the-look__heading {
  margin: 0 0 var(--spacing-xl);
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.shop-the-look__viewport {
  position: relative;
}

.shop-the-look__track {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* viewport-relative side padding centres the active card; using vw (not %)
     keeps the card width math independent of this padding */
  padding: var(--spacing-md) 16vw var(--spacing-xl);
}

.shop-the-look__track::-webkit-scrollbar {
  display: none;
}

/* coverflow: large centred card, side cards only slightly smaller so they
   peek right up against it (minimal gap) */
.look-card {
  position: relative;
  flex: 0 0 66vw;
  scroll-snap-align: center;
  text-decoration: none;
  color: inherit;
  transform: scale(0.95);
  opacity: 0.92;
  transform-origin: center center;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.look-card.is-active {
  transform: scale(1);
  opacity: 1;
  z-index: 2;
}

@media (min-width: 750px) {
  /* fixed sizing on larger screens instead of huge vw values */
  .shop-the-look__track {
    padding-left: calc(50% - 165px);
    padding-right: calc(50% - 165px);
  }

  .look-card {
    flex-basis: 330px;
  }
}

/* product chip shows on every card, centre and side alike */

/* reel-style media — capped height so it never dominates the screen */
.look-card__media {
  position: relative;
  height: 56vh;
  max-height: 460px;
  border-radius: var(--radius-soft);
  overflow: hidden;
  background-color: #0d0d0d;
}

@media (min-width: 750px) {
  .look-card__media {
    height: 520px;
    max-height: none;
  }
}

.look-card__video,
.look-card__image,
.look-card__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}

/* mute / sound toggle overlaid bottom-right of the video */
.look-card__mute {
  position: absolute;
  right: var(--spacing-sm);
  bottom: var(--spacing-sm);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-circle);
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  backdrop-filter: blur(4px);
}

.look-card__mute svg {
  width: 20px;
  height: 20px;
}

/* product chip sits as its own bordered card below the media */
.look-card__chip {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  padding: var(--spacing-xs);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 14%, transparent);
  border-radius: var(--radius-soft);
  background-color: var(--color-background);
}

.look-card__thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: color-mix(in srgb, var(--color-foreground) 6%, var(--color-background));
}

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

.look-card__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
  line-height: 1.2;
}

.look-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.look-card__price {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
}

.shop-the-look__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: var(--color-background);
  color: var(--color-foreground);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.shop-the-look__arrow:hover {
  background-color: var(--color-tint);
}

.shop-the-look__arrow:active {
  transform: translateY(-50%) scale(0.94);
}

.shop-the-look__arrow svg {
  width: 22px;
  height: 22px;
}

.shop-the-look__arrow--prev {
  left: calc(-1 * var(--spacing-xs));
}

.shop-the-look__arrow--next {
  right: calc(-1 * var(--spacing-xs));
}

@media (min-width: 768px) {
  .look-card {
    width: 300px;
  }

  .shop-the-look__arrow {
    display: flex;
  }
}

@media (min-width: 990px) {
  .shop-the-look__heading {
    font-size: 1.5rem;
  }

  .shop-the-look__arrow--prev {
    left: calc(-1 * var(--spacing-lg));
  }

  .shop-the-look__arrow--next {
    right: calc(-1 * var(--spacing-lg));
  }
}

/* ==========================================================================
   Inner pages — category, search, product detail, cart, topics
   ========================================================================== */

/* shared page wrapper padding on non-home pages (horizontal gutter already
   comes from the enclosing .center-1 container) */
.category-page,
.search-page,
.product-details-page,
.shopping-cart-page,
.topic-page,
.manufacturer-page,
.account-page,
.order-details-page,
.wishlist-page {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--spacing-lg) 0 var(--spacing-2xl);
}

/* Unified page title style — matches the homepage section headings
   ("bestsellers"). Category page keeps its own .category-title styling. */
.page-title h1,
.page-title h2 {
  margin: 0 0 var(--spacing-md);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
}

@media (min-width: 750px) {
  .page-title h1,
  .page-title h2 {
    font-size: 1.375rem;
  }
}

.breadcrumb {
  margin: 0 auto var(--spacing-md);
  max-width: var(--content-width);
  font-size: 0.8125rem;
  opacity: 0.7;
}

.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.breadcrumb a {
  text-decoration: none;
  color: inherit;
}

/* ---------- Category / search listing ---------- */

.category-description,
.search-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  opacity: 0.85;
  margin-bottom: var(--spacing-md);
}

/* filter + sort toolbar */
.product-selectors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
  margin-bottom: var(--spacing-lg);
}

.product-selectors .product-sorting,
.product-selectors .product-page-size,
.product-selectors .product-viewmode {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.875rem;
}

.product-selectors select {
  border: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
  font-family: inherit;
  font-size: 0.875rem;
  background-color: var(--color-background);
}

/* two-column product grid on listing pages (matches live) */
.category-page .item-grid,
.search-page .item-grid,
.manufacturer-page .item-grid,
.recently-added-products-page .item-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg) var(--spacing-md);
}

@media (min-width: 750px) {
  .category-page .item-grid,
  .search-page .item-grid,
  .manufacturer-page .item-grid,
  .recently-added-products-page .item-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

.search-results {
  margin-top: var(--spacing-md);
}

/* ---------- Product detail ---------- */

.product-details-page .product-essential {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 750px) {
  .product-details-page .product-essential {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
  }
}

.product-details-page .gallery,
.product-details-page .picture-gallery {
  /* no rounding/clip here — the .picture element below is the single rounded,
     clipping layer, so the image corners can't disagree with a second wrapper */
}

.product-details-page .product-name h1 {
  margin: 0 0 var(--spacing-sm);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.product-details-page .product-price span {
  font-size: 1.5rem;
  font-weight: 700;
}

.product-details-page .prices {
  margin: var(--spacing-sm) 0;
}

.product-details-page .short-description {
  font-size: 0.9375rem;
  line-height: 1.6;
  opacity: 0.85;
  margin: var(--spacing-sm) 0 var(--spacing-lg);
}

/* add-to-cart as a full black pill + wishlist circle, like the live PDP */
.product-details-page .add-to-cart-panel {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
}

.product-details-page .add-to-cart-button,
.product-details-page .add-to-wishlist-button {
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.product-details-page .add-to-cart-button {
  flex: 1;
  padding: 0.9rem 1.5rem;
  background-color: var(--color-foreground);
  color: var(--color-background);
  border: none;
  font-size: 1rem;
}

.product-details-page .overview .full-description,
.product-details-page .product-collateral .full-description {
  font-size: 0.9375rem;
  line-height: 1.7;
}

.product-details-page .product-collateral {
  margin-top: var(--spacing-xl);
}

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

.shopping-cart-page .cart {
  width: 100%;
  border-collapse: collapse;
}

.shopping-cart-page .cart td,
.shopping-cart-page .cart th {
  padding: var(--spacing-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
  vertical-align: middle;
}

.shopping-cart-page .product-picture img {
  border-radius: var(--radius-sm);
}

.shopping-cart-page .cart-total {
  margin-top: var(--spacing-lg);
}

.shopping-cart-page .checkout-buttons .button-1,
.shopping-cart-page .common-buttons .button-2,
.order-summary-content .checkout-button {
  border-radius: var(--radius-pill);
  padding: 0.9rem 1.5rem;
  font-weight: 600;
  background-color: var(--color-foreground);
  color: var(--color-background);
  border: none;
}

/* ---------- Topic / policy pages ---------- */

.topic-page .topic-block-title h1,
.topic-page .page-title h1 {
  text-align: left;
  font-size: 1.125rem;
  font-weight: 600;
}

@media (min-width: 750px) {
  .topic-page .page-title h1 {
    font-size: 1.375rem;
  }
}

.topic-page .topic-block-body,
.topic-page .page-body {
  /* readable line length; left-aligned to match the (left) page title */
  max-width: 42rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* Contact page: the page already shows its own <h1>, so hide the embedded
   topic's duplicate "Contact Us" heading (whether it comes from the topic
   title or as the first heading in the topic body), and keep the intro copy
   to a readable width. */
.contact-page .topic-block-title,
.contact-page .topic-block-body > h1:first-child,
.contact-page .topic-block-body > h2:first-child {
  display: none;
}

.contact-page .topic-block-body {
  max-width: 42rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.topic-page .topic-block-body h2,
.topic-page .topic-block-body h3 {
  margin-top: var(--spacing-xl);
  font-weight: 700;
}

.topic-page .topic-block-body p {
  margin: 0 0 var(--spacing-md);
}

/* generic buttons across inner pages inherit the pill treatment */
.buttons .button-1,
.buttons .button-2 {
  border-radius: var(--radius-pill);
}

/* catalog listing pages have no sidebar in the Fashfinity design — hide the
   default nopCommerce side column and let the product grid fill the width */
.html-category-page .side-2,
.html-search-page .side-2,
.html-manufacturer-page .side-2,
.html-recently-added-products-page .side-2 {
  display: none;
}

.html-category-page .center-2,
.html-search-page .center-2,
.html-manufacturer-page .center-2,
.html-recently-added-products-page .center-2 {
  width: 100%;
  flex: 1 1 100%;
  /* Keep catalog content on the same centered container as the header logo. */
  max-width: var(--content-width);
}

/* ---------- Catalog page refinements (match live) ---------- */

/* the category quick-nav circles belong only on the homepage */
.header-categories {
  display: none;
}
.html-home-page .header-categories {
  display: block;
}
@media (min-width: 990px) {
  .html-home-page .header-categories {
    display: none;
  }
}

/* live catalog/product pages have no breadcrumb line */
.html-category-page .breadcrumb,
.html-search-page .breadcrumb,
.html-manufacturer-page .breadcrumb,
.html-product-details-page .breadcrumb {
  display: none;
}

/* the toolbar keeps only Sort (like live's "Sort by"); drop view-mode and
   per-page controls that aren't in the reference */
.product-selectors .product-viewmode,
.product-selectors .product-page-size {
  display: none;
}

.product-selectors {
  justify-content: flex-end;
}

/* ---------- Category page: title count, description toggle, filter bar ---------- */

.category-title {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.category-title h1 {
  margin: 0;
}

.category-count {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8125rem;
  opacity: 0.5;
  letter-spacing: 0.02em;
}

.category-description {
  font-size: 0.875rem;
  line-height: 1.6;
  opacity: 0.85;
  margin-bottom: var(--spacing-md);
}

.category-description__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* the raw topic HTML wraps the text in a <p>; kill its default margin so the
   "more/less" toggle sits directly under the copy */
.category-description__text > * {
  margin: 0;
}

.category-description--expanded .category-description__text {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.category-description__toggle {
  margin-top: var(--spacing-2xs);
  padding: 0;
  background: none;
  border: none;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.8125rem;
}

/* Filter + Sort toolbar (Filter left, Sort right) */
.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
  margin-bottom: var(--spacing-sm);
}

.catalog-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: none;
  border: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground);
}

.catalog-filter-toggle svg {
  width: 16px;
  height: 16px;
}

/* fold the default selectors into the toolbar row (sort only, on the right) */
.catalog-toolbar .product-selectors {
  border: none;
  padding: 0;
  margin: 0;
}

/* the price/attribute filters stay hidden until "Filter" reveals them */
.html-category-page .side-2.side-2--visible {
  display: block;
  margin-bottom: var(--spacing-lg);
}

/* ---------- Inner-page top-gap + container fixes ---------- */

/* two-column pages (category/search/product…) get a centered container gutter.
   Scoped to .center-2 so the home page's single-column wrapper is untouched. */
.center-2 {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--page-margin);
}

/* on non-home pages the category circles are hidden, so the header's bottom
   padding would otherwise leave a large empty gap before the page content —
   tighten it so inner pages sit close to the search bar like the live site */
.html-category-page .header-lower,
.html-search-page .header-lower,
.html-product-details-page .header-lower,
.html-shopping-cart-page .header-lower,
.html-topic-page .header-lower,
.html-manufacturer-page .header-lower,
.html-account-page .header-lower,
.html-account-menu-page .header-lower,
.html-order-list-page .header-lower,
.html-customer-info-page .header-lower,
.html-checkout-page .header-lower {
  padding-bottom: var(--spacing-sm);
}

/* inner-page wrappers sit snug under the header */
.category-page,
.search-page,
.product-details-page,
.shopping-cart-page,
.topic-page,
.manufacturer-page,
.account-page,
.order-details-page,
.wishlist-page {
  padding-top: var(--spacing-sm);
}

/* ---------- Filter bottom sheet ---------- */

.filter-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
}

.filter-sheet__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.filter-sheet--open .filter-sheet__backdrop {
  opacity: 1;
}

.filter-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  background-color: var(--color-background);
  border-radius: var(--radius-soft) var(--radius-soft) 0 0;
  padding: var(--spacing-lg) var(--page-margin) calc(var(--spacing-lg) + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.filter-sheet--open .filter-sheet__panel {
  transform: translateY(0);
}

.filter-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.filter-sheet__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.filter-sheet__close {
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-foreground);
}

.filter-sheet__close svg {
  width: 20px;
  height: 20px;
}

.filter-sheet__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.filter-group {
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
}

.filter-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-md) 0;
  background: none;
  border: none;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-foreground);
}

.filter-group__chevron {
  width: 11px;
  height: 11px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-135deg);
  transition: transform 0.2s ease;
}

.filter-group--collapsed .filter-group__chevron {
  transform: rotate(45deg);
}

.filter-group__content {
  padding-bottom: var(--spacing-md);
}

.filter-group--collapsed .filter-group__content {
  display: none;
}

.filter-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  font-size: 0.9375rem;
  cursor: pointer;
}

.filter-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}

.filter-check--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.filter-price {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.filter-price__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  font-size: 0.875rem;
  min-width: 0;
}

.filter-price__field input {
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  border-radius: var(--radius-pill);
  padding: 0.6rem 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
}

.filter-price__field input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.filter-sheet__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
}

.filter-sheet__clear {
  background: none;
  border: none;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  color: var(--color-foreground);
}

.filter-sheet__apply {
  padding: 0.85rem 2.25rem;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
}

@media (min-width: 750px) {
  /* on desktop, anchor the sheet as a centered dialog rather than full-width */
  .filter-sheet__panel {
    left: 50%;
    right: auto;
    bottom: 0;
    width: min(480px, 92vw);
    transform: translate(-50%, 100%);
  }
  .filter-sheet--open .filter-sheet__panel {
    transform: translate(-50%, 0);
  }
}

/* ---------- Sort: trigger text + bottom sheet ---------- */

.product-sorting {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  font-size: 0.875rem;
}

.product-sorting__label {
  opacity: 0.7;
}

/* native select kept for AJAX, hidden in favour of the custom trigger */
#products-orderby {
  display: none;
}

.sort-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: none;
  border: none;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-foreground);
}

.sort-trigger__chevron {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.sort-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
}

.sort-sheet__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sort-sheet--open .sort-sheet__backdrop {
  opacity: 1;
}

.sort-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 85vh;
  overflow-y: auto;
  background-color: var(--color-background);
  border-radius: var(--radius-soft) var(--radius-soft) 0 0;
  padding: var(--spacing-lg) var(--page-margin) calc(var(--spacing-lg) + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.sort-sheet--open .sort-sheet__panel {
  transform: translateY(0);
}

.sort-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

.sort-sheet__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.sort-sheet__close {
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-foreground);
}

.sort-sheet__close svg {
  width: 20px;
  height: 20px;
}

.sort-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 8%, transparent);
  cursor: pointer;
}

.sort-option:first-child {
  border-top: none;
}

.sort-option__text {
  font-size: 0.9375rem;
}

/* custom radio */
.sort-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sort-option__radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-circle);
  border: 1.5px solid color-mix(in srgb, var(--color-foreground) 30%, transparent);
  position: relative;
}

.sort-option input:checked + .sort-option__radio {
  border-color: var(--color-accent);
}

.sort-option input:checked + .sort-option__radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--radius-circle);
  background-color: var(--color-accent);
}

@media (min-width: 750px) {
  .sort-sheet__panel {
    left: 50%;
    right: auto;
    width: min(480px, 92vw);
    transform: translate(-50%, 100%);
  }
  .sort-sheet--open .sort-sheet__panel {
    transform: translate(-50%, 0);
  }
}

/* ---------- Active filter chip ---------- */

.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--color-accent) 10%, var(--color-background));
  color: var(--color-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.active-filter-chip__x {
  font-size: 1rem;
  line-height: 1;
}

.active-filters__clear {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground);
  text-decoration: underline;
}

/* ---------- Search page: rely on the header search bar, show results only ---------- */
.html-search-page .page-title,
.html-search-page .search-input {
  display: none;
}

.html-search-page .search-results {
  margin-top: var(--spacing-md);
}

.search-results-heading {
  margin: var(--spacing-sm) 0 0;
  font-size: 0.9375rem;
  font-weight: 400;
  opacity: 0.7;
}

/* ==========================================================================
   Web interface guidelines polish (a11y / interaction / typography)
   ========================================================================== */

:root {
  color-scheme: light;
}

/* visible keyboard focus on every interactive element (replaces the
   outline stripped from the search/price inputs) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.menu__toggle:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.search-box input.search-box-text:focus-visible,
.filter-price__field input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* intentional, snappy touch behaviour on controls */
a,
button,
input,
select,
textarea,
[role="button"],
.menu__toggle {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* numbers (prices, counts) line up on tabular figures */
.product-item .prices .actual-price,
.product-item .prices .old-price,
.look-card__price,
.category-count,
.active-filter-chip,
.product-details-page .product-price span {
  font-variant-numeric: tabular-nums;
}

/* headings wrap gracefully */
h1,
h2,
h3,
.brand-values__heading,
.shop-the-look__heading,
.hero-slide-overlay-heading,
.category-title h1,
.search-results-heading {
  text-wrap: pretty;
}

/* drawers & bottom sheets keep scroll momentum inside themselves */
.menu,
.filter-sheet__panel,
.filter-sheet__body,
.sort-sheet__panel {
  overscroll-behavior: contain;
}

/* ==========================================================================
   Product detail page (Fashfinity layout)
   ========================================================================== */

/* gallery: rounded, tall main image + thumbnail row below (main + thumbs are
   <button>s, so reset their native chrome and let the image fully cover) */
.product-details-page .picture-gallery .picture {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: var(--radius-soft);
  overflow: hidden;
  background-color: color-mix(in srgb, var(--color-foreground) 4%, var(--color-background));
  aspect-ratio: 3 / 4;
  cursor: zoom-in;
}

.product-details-page .picture-gallery .picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* the image button keeps focus after tapping to open the viewer; draw the focus
   ring flush INSIDE the rounded clip so it follows the image radius exactly and
   never leaves a white gap at the corners */
.product-details-page .picture-gallery .picture:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  border-radius: var(--radius-soft);
}

.product-details-page .picture-thumbs {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  flex-wrap: wrap;
}

.product-details-page .picture-thumbs .thumb-item {
  flex: 0 0 auto;
  width: 64px;
  aspect-ratio: 3 / 4;
  padding: 0;
  border-radius: var(--radius-soft);
  overflow: hidden;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.18s ease, border-color 0.18s ease;
}

.product-details-page .picture-thumbs .thumb-item:hover {
  opacity: 0.8;
}

.product-details-page .picture-thumbs .thumb-item.selected {
  opacity: 1;
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-background);
}

.product-details-page .picture-thumbs .thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* desktop: thumbnails as a vertical strip to the LEFT of the main image
   (mobile keeps them as a row below — this override is desktop-only) */
@media (min-width: 990px) {
  .product-details-page .picture-gallery {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .product-details-page .picture-gallery .picture {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
  }

  .product-details-page .picture-thumbs {
    order: 1;
    flex: 0 0 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-top: 0;
  }
}

/* ---------- Fullscreen image viewer (swipe + pinch-zoom) ---------- */
.pdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background-color: #f1eae6;
  overscroll-behavior: contain;
}

.pdp-lightbox[hidden] {
  display: none;
}

.pdp-lightbox__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

.pdp-lightbox__counter {
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  background-color: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.pdp-lightbox__close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-circle);
  background-color: rgba(0, 0, 0, 0.55);
  color: #fff;
}

.pdp-lightbox__close svg {
  width: 20px;
  height: 20px;
}

.pdp-lightbox__track {
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.pdp-lightbox__track::-webkit-scrollbar {
  display: none;
}

.pdp-lightbox__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.pdp-lightbox__slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* allow horizontal swipe to move between images (scrolls the snap track)
     while still permitting pinch-zoom + panning a zoomed image. "pinch-zoom"
     alone reserved the gesture for zooming and blocked swiping. */
  touch-action: pan-x pan-y pinch-zoom;
}

/* overview */
.product-details-page .product-name h1 {
  margin: 0 0 var(--spacing-xs);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.pdp-category {
  font-size: 0.9375rem;
  opacity: 0.55;
  margin-bottom: var(--spacing-md);
}

.product-details-page .product-price span {
  font-size: 1.5rem;
  font-weight: 700;
}

.pdp-tax-note {
  margin: var(--spacing-2xs) 0 var(--spacing-lg);
  font-size: 0.8125rem;
  opacity: 0.55;
}

/* heart + add-to-cart in one row */
.pdp-actions {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-md);
}

.pdp-actions__cart {
  flex: 1;
}

/* wishlist heart as an outlined circle; a toggle that fills once saved */
.pdp-wishlist-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  border-radius: var(--radius-circle);
  background-color: var(--color-background);
  color: var(--color-foreground);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.pdp-wishlist-toggle__icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transition: fill 0.18s ease;
}

.pdp-wishlist-toggle:active {
  transform: scale(0.92);
}

.pdp-wishlist-toggle.is-wishlisted {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.pdp-wishlist-toggle.is-wishlisted .pdp-wishlist-toggle__icon {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}

.pdp-wishlist-toggle:disabled {
  opacity: 0.6;
  cursor: default;
}

/* add to cart: full-width black pill, no qty stepper */
.pdp-actions__cart .qty-label,
.pdp-actions__cart .qty-dropdown,
.pdp-actions__cart .add-to-cart-qty-input,
.pdp-actions__cart input.qty-input {
  display: none;
}

.pdp-actions__cart .add-to-cart-panel {
  display: block;
}

.pdp-actions__cart .add-to-cart-button {
  width: 100%;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-foreground);
  color: var(--color-background);
  font-size: 1rem;
  font-weight: 600;
}

.pdp-returns {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: var(--spacing-md) 0 0;
  font-size: 0.875rem;
}

.pdp-returns svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* accordions */
.pdp-accordions {
  margin-top: var(--spacing-xl);
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
}

.pdp-acc {
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
}

.pdp-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-md) 0;
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-foreground);
  text-align: left;
}

.pdp-acc__chevron {
  width: 11px;
  height: 11px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-135deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.pdp-acc--collapsed .pdp-acc__chevron {
  transform: rotate(45deg);
}

.pdp-acc__body {
  padding-bottom: var(--spacing-lg);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.pdp-acc__body p {
  margin: 0 0 var(--spacing-md);
}

.pdp-acc__body p:last-child {
  margin-bottom: 0;
}

/* rich-text description: restore list markers (the global ul/ol reset strips them) */
.pdp-acc__body ul,
.pdp-acc__body ol {
  margin: 0 0 var(--spacing-md) 1.25rem;
  padding-left: 0.5rem;
}

.pdp-acc__body ul {
  list-style: disc;
}

.pdp-acc__body ol {
  list-style: decimal;
}

.pdp-acc__body li {
  margin-bottom: 0.35rem;
}

.pdp-acc__body h2,
.pdp-acc__body h3 {
  margin: var(--spacing-md) 0 var(--spacing-2xs);
  line-height: 1.3;
}

.pdp-acc__body h2 { font-size: 1.15rem; }
.pdp-acc__body h3 { font-size: 1.02rem; }

.pdp-acc__body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pdp-acc--collapsed .pdp-acc__body {
  display: none;
}

/* ---------- Catalog pager ---------- */
.pager ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-xs);
  list-style: none;
  margin: var(--spacing-xl) 0;
  padding: 0;
}

.pager li a,
.pager li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--spacing-sm);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 14%, transparent);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-foreground);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.pager li a:hover {
  border-color: var(--color-foreground);
}

.pager li.current-page span {
  background: var(--color-foreground);
  border-color: var(--color-foreground);
  color: #ffffff;
}

.pager li.previous-page a,
.pager li.next-page a,
.pager li.first-page a,
.pager li.last-page a {
  padding: 0 var(--spacing-md);
}

@media (min-width: 750px) {
  .product-details-page .product-essential {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
  }
}

/* ==========================================================================
   PDP: size pills, size chart, old-price, action alignment
   ========================================================================== */

/* size (radio attribute) rendered as selectable pills */
.pdp-size-wrap {
  position: relative;
  margin: var(--spacing-lg) 0;
}

.product-details-page .attributes {
  margin: 0;
}

.product-details-page .attributes .text-prompt {
  display: inline-block;
  margin-bottom: var(--spacing-sm);
  font-size: 0.9375rem;
  font-weight: 600;
}

.product-details-page .attributes dt,
.product-details-page .attributes dd {
  margin: 0;
}

.product-details-page .option-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-details-page .option-list li {
  margin: 0;
}

.product-details-page .option-list input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.product-details-page .option-list label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 0.55rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 22%, transparent);
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.product-details-page .option-list input[type="radio"]:checked + label {
  border-color: var(--color-foreground);
  background-color: var(--color-foreground);
  color: var(--color-background);
}

.product-details-page .option-list input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Out-of-stock size: strike-through + not selectable */
.product-details-page .option-list li.disabled {
  pointer-events: none;
}

.product-details-page .option-list li.disabled label {
  text-decoration: line-through;
  color: color-mix(in srgb, var(--color-foreground) 40%, transparent);
  border-color: color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-style: dashed;
  cursor: not-allowed;
}

/* Out-of-stock size in a dropdown */
.product-details-page .attributes select option.disabled,
.product-details-page .attributes select option:disabled {
  text-decoration: line-through;
  color: color-mix(in srgb, var(--color-foreground) 40%, transparent);
}

.pdp-sizechart-link {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline;
}

/* size chart modal (centered) */
/* size chart: bottom sheet on mobile, centered modal on desktop */
.sizechart {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sizechart[hidden] {
  display: none;
}

.sizechart__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.sizechart--open .sizechart__backdrop {
  opacity: 1;
}

.sizechart__panel {
  position: relative;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  background-color: var(--color-background);
  border-radius: var(--radius-soft) var(--radius-soft) 0 0;
  padding: var(--spacing-xl) var(--spacing-lg) calc(var(--spacing-lg) + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-overflow-scrolling: touch;
}

/* drag handle (mobile bottom sheet) */
.sizechart__panel::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-foreground) 20%, transparent);
}

.sizechart--open .sizechart__panel {
  transform: translateY(0);
}

@media (min-width: 750px) {
  /* desktop: centered modal */
  .sizechart {
    align-items: center;
    padding: var(--page-margin);
  }

  .sizechart__panel {
    width: min(440px, 100%);
    border-radius: var(--radius-soft);
    padding: var(--spacing-lg);
    transform: translateY(16px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .sizechart__panel::before {
    display: none;
  }

  .sizechart--open .sizechart__panel {
    transform: translateY(0);
    opacity: 1;
  }
}

.sizechart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

.sizechart__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.sizechart__close {
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--color-foreground);
}

.sizechart__close svg {
  width: 18px;
  height: 18px;
}

.sizechart__note {
  margin: 0 0 var(--spacing-md);
  font-size: 0.8125rem;
  opacity: 0.7;
  line-height: 1.5;
}

.sizechart__scroll {
  overflow-x: auto;
}

.sizechart__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.sizechart__table th,
.sizechart__table td {
  padding: var(--spacing-sm);
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
  font-variant-numeric: tabular-nums;
}

.sizechart__table th {
  font-weight: 700;
}

/* old price on the PDP: hide the "Old price:" label, keep struck-through value */
.product-details-page .old-product-price span:first-child {
  display: none;
}

.product-details-page .old-product-price span:last-child {
  text-decoration: line-through;
  opacity: 0.5;
  font-size: 0.9375rem;
}

/* heart + add-to-cart: vertically aligned, equal height */
.pdp-actions {
  align-items: center;
}

/* ==========================================================================
   Wishlist grid, Cart, Checkout
   ========================================================================== */

/* ---------- Wishlist as a product grid ---------- */
.wishlist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg) var(--spacing-md);
}

@media (min-width: 750px) {
  .wishlist-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

.wishlist-card .picture {
  position: relative;
}

.wishlist-card__remove {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-circle);
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--color-foreground);
  box-shadow: var(--shadow-soft);
}

.wishlist-card__remove svg {
  width: 16px;
  height: 16px;
}

.wishlist-empty {
  padding: var(--spacing-2xl) 0;
  text-align: center;
  font-size: 0.9375rem;
  opacity: 0.7;
}

/* ---------- Cart ---------- */
.shopping-cart-page .cart {
  width: 100%;
  /* rows are laid out with CSS grid (below), which breaks native table sizing and
     collapses rows to their content width — make the table + body block so the grid
     rows stretch to the full available width instead of leaving empty space */
  display: block;
}

.shopping-cart-page .cart thead {
  display: none; /* mobile-first: rows read as cards */
}

.shopping-cart-page .cart tbody {
  display: block;
  width: 100%;
}

.shopping-cart-page .cart tbody tr {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  grid-template-areas:
    "pic info      info"
    "pic subtotal  subtotal"
    "pic qty       remove";
  gap: var(--spacing-xs) var(--spacing-md);
  align-items: center;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
}

.shopping-cart-page .cart td {
  padding: 0;
  border: none;
}

.shopping-cart-page .cart .product-picture { grid-area: pic; align-self: stretch; display: flex; }
.shopping-cart-page .cart .product { grid-area: info; align-self: start; }
.shopping-cart-page .cart .quantity { grid-area: qty; justify-self: start; align-self: center; }
.shopping-cart-page .cart .subtotal { grid-area: subtotal; justify-self: start; text-align: left; font-weight: 700; align-self: center; }
.shopping-cart-page .cart .remove-from-cart { grid-area: remove; justify-self: end; align-self: center; }
.shopping-cart-page .cart .unit-price,
.shopping-cart-page .cart .sku { display: none; }

.shopping-cart-page .cart .product-picture img {
  width: 104px;
  height: 100%;
  min-height: 104px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.shopping-cart-page .cart .product-name {
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-foreground);
}

.shopping-cart-page .cart .qty-input {
  width: 56px;
  padding: 0.4rem;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  border-radius: var(--radius-pill);
}

.shopping-cart-page .cart .qty-label,
.shopping-cart-page .cart .td-title { display: none; }

/* size / attributes + inline "Edit" link under the product name */
.shopping-cart-page .cart .product .attributes {
  margin-top: 3px;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
}

.shopping-cart-page .cart .product .edit-item a {
  display: inline-block;
  margin-top: 3px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-foreground);
  text-decoration: underline;
}

.shopping-cart-page .cart .product .edit-item a:hover {
  color: var(--color-accent);
}

/* compact quantity dropdown — clothing rarely needs multiples, so a small
   "1 v" select replaces the wider – [n] + stepper and frees up horizontal space */
.shopping-cart-page .cart .qty-dropdown {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.45rem 1.9rem 0.45rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  border-radius: var(--radius-pill);
  background-color: var(--color-background);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--color-foreground);
  cursor: pointer;
  line-height: 1.2;
}

.shopping-cart-page .cart .qty-dropdown:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* quantity stepper (– [n] +) */
.shopping-cart-page .product-quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.shopping-cart-page .product-quantity .quantity.up,
.shopping-cart-page .product-quantity .quantity.down {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  user-select: none;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-family: inherit;
}

.shopping-cart-page .product-quantity .quantity.up::before { content: "+"; }
.shopping-cart-page .product-quantity .quantity.down::before { content: "\2013"; }

.shopping-cart-page .cart .product-quantity .qty-input {
  width: 42px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 0;
  border-left: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  text-align: center;
}

/* remove control: hide raw checkbox, show remove-btn as an "x" */
.shopping-cart-page .remove-from-cart input[type="checkbox"] { display: none; }

.shopping-cart-page .remove-from-cart .remove-btn {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-accent);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

.shopping-cart-page .remove-from-cart .remove-btn::before {
  content: "Remove";
}

.shopping-cart-page .remove-from-cart .remove-btn:hover {
  text-decoration: underline;
}

/* cart action buttons (update / continue shopping) sit under the items */
.shopping-cart-page .cart-options {
  margin-top: var(--spacing-md);
}

.shopping-cart-page .cart-options .common-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.shopping-cart-page .cart-options .common-buttons .button-2,
.shopping-cart-page .cart-options .common-buttons .update-cart-button {
  padding: 0.6rem 1.2rem;
  background: none;
  color: var(--color-foreground);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

/* order totals / summary as a right-aligned card */
.shopping-cart-page .cart-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-lg);
}

.shopping-cart-page .cart-collaterals:empty {
  display: none;
}

/* the summary wrapper must fill its footer/column so Sub-Total spreads
   label-left / value-right and the Checkout button runs full width */
.shopping-cart-page .cart-collaterals {
  width: 100%;
}

.shopping-cart-page .totals {
  width: 100%;
  max-width: 400px;
  padding: 0;
  /* no border here: each cart item already has a bottom divider, so the last one
     separates the items from the summary. The summary starts flush at the top
     (aligned with the items) rather than adding a second, redundant divider. */
}

/* the cart is an estimate — shipping & tax are only known at checkout, so keep the
   summary minimal (just Sub-Total) like a premium cart rather than showing Rs 0.00 rows
   and a duplicate Total that equals the subtotal */
.shopping-cart-page .totals .shipping-cost,
.shopping-cart-page .totals .tax-value,
.shopping-cart-page .totals .tax-rate,
.shopping-cart-page .totals .additional-fees,
.shopping-cart-page .totals .order-total {
  display: none;
}

/* with Total hidden, make the remaining Sub-Total read as the headline figure */
.shopping-cart-page .totals .order-subtotal .cart-total-left label,
.shopping-cart-page .totals .order-subtotal .cart-total-right {
  font-size: 1.0625rem;
  font-weight: 700;
}

.shopping-cart-page .totals .cart-total {
  width: 100%;
  border-collapse: collapse;
}

.shopping-cart-page .total-info .cart-total tr td,
.shopping-cart-page .totals .cart-total td {
  padding: var(--spacing-2xs) 0;
  font-size: 0.9375rem;
}

.shopping-cart-page .totals .cart-total .cart-total-right {
  text-align: right;
  font-weight: 600;
}

.shopping-cart-page .order-total td {
  padding-top: var(--spacing-sm) !important;
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
  font-size: 1.125rem !important;
  font-weight: 700;
}

.shopping-cart-page .checkout-buttons,
.shopping-cart-page .addon-buttons {
  margin-top: var(--spacing-md);
}

.shopping-cart-page .checkout-button {
  display: block;
  width: 100%;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-foreground);
  color: var(--color-background);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.shopping-cart-page .checkout-button:hover {
  background-color: var(--color-accent);
}

.order-summary-content .no-data {
  padding: var(--spacing-2xl) 0;
  text-align: center;
  opacity: 0.7;
}

@media (max-width: 989px) {
  .shopping-cart-page .totals {
    max-width: none;
  }
}

/* desktop: items on the left, sticky summary on the right (no dead space) */
@media (min-width: 990px) {
  .shopping-cart-page .order-summary-content form {
    display: grid;
    grid-template-columns: 1fr 380px;
    grid-template-areas:
      "items   summary"
      "options summary";
    column-gap: var(--spacing-2xl);
    align-items: start;
  }

  .shopping-cart-page .table-wrapper { grid-area: items; }
  .shopping-cart-page .cart-options { grid-area: options; }

  .shopping-cart-page .cart-footer {
    grid-area: summary;
    margin-top: 0;
    position: sticky;
    top: var(--spacing-lg);
  }

  /* summary sits in a rounded bordered card (like the reference cart) */
  .shopping-cart-page .totals {
    max-width: none;
    border: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
    border-radius: 16px;
    padding: var(--spacing-lg);
  }

  /* keep "Remove" right next to the quantity instead of at the far right edge
     of the (wide) items column */
  .shopping-cart-page .cart tbody tr {
    grid-template-columns: 104px auto 1fr;
  }

  .shopping-cart-page .cart .remove-from-cart {
    justify-self: start;
  }
}

/* ---------- Checkout address form ---------- */
.checkout-page,
.checkout-data {
  max-width: 640px;
  margin: 0 auto;
}

/* each OPC step already has its own <h2> heading — hide the redundant
   step-number badge for a cleaner, simpler checkout */
.checkout-page .step-title {
  display: none;
}

.checkout-page .section.order-summary .title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.checkout-page .page-title h1,
.order-progress + * .page-title h1 {
  font-size: 1.125rem;
  font-weight: 600;
}

@media (min-width: 750px) {
  .checkout-page .page-title h1,
  .order-progress + * .page-title h1 {
    font-size: 1.375rem;
  }
}

.checkout-page .inputs,
.address-item .inputs,
.enter-address .inputs {
  margin-bottom: var(--spacing-md);
}

.checkout-page label,
.enter-address label {
  display: block;
  margin-bottom: var(--spacing-2xs);
  font-size: 0.875rem;
  font-weight: 500;
}

.checkout-page input[type="text"],
.checkout-page input[type="email"],
.checkout-page input[type="tel"],
.checkout-page select,
.enter-address input[type="text"],
.enter-address input[type="email"],
.enter-address input[type="tel"],
.enter-address select {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9375rem;
  background-color: var(--color-background);
}

.checkout-page .buttons button,
.checkout-page .checkout-buttons button,
.checkout-buttons .button-1 {
  padding: 0.9rem 2rem;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-foreground);
  color: var(--color-background);
  font-weight: 600;
}

/* order summary table on checkout steps (payment / confirm) — read-only rows
   rendered as mobile cards. The EDITABLE cart on the cart page is handled
   separately under .shopping-cart-page, so scope this to .html-checkout-page. */
@media (max-width: 749px) {
  .html-checkout-page .cart {
    width: 100%;
    border-collapse: collapse;
  }

  .html-checkout-page .cart thead {
    display: none;
  }

  .html-checkout-page .cart tbody tr {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "pic name"
      "pic price"
      "pic qty"
      "pic total";
    column-gap: var(--spacing-md);
    row-gap: var(--spacing-2xs);
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
    align-items: start;
  }

  .html-checkout-page .cart td {
    padding: 0;
    border: none;
  }

  .html-checkout-page .cart .sku { display: none; }
  .html-checkout-page .cart .product-picture { grid-area: pic; }
  .html-checkout-page .cart .product { grid-area: name; }
  .html-checkout-page .cart .unit-price { grid-area: price; }
  .html-checkout-page .cart .quantity { grid-area: qty; }
  .html-checkout-page .cart .subtotal { grid-area: total; }

  .html-checkout-page .cart .product-picture img {
    width: 64px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
  }

  .html-checkout-page .cart .product-name {
    font-weight: 500;
    text-decoration: none;
    color: var(--color-foreground);
  }

  .html-checkout-page .cart .unit-price,
  .html-checkout-page .cart .quantity,
  .html-checkout-page .cart .subtotal {
    display: flex;
    gap: var(--spacing-2xs);
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--color-foreground) 75%, transparent);
  }

  .html-checkout-page .cart .product-unit-price,
  .html-checkout-page .cart .product-subtotal {
    font-weight: 600;
    color: var(--color-foreground);
  }

  .html-checkout-page .cart .td-title {
    display: inline;
    opacity: 0.7;
  }

  /* throwaway manual card form (replaced once Razorpay is active): stack rows */
  .payment-info-page .payment-info table td {
    display: block;
    width: 100%;
    padding: 0;
  }

  .payment-info-page .payment-info table tr {
    display: block;
    margin-bottom: var(--spacing-sm);
  }

  .payment-info-page .payment-info table input[type="text"],
  .payment-info-page .payment-info table select {
    width: 100% !important;
    padding: 0.7rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
  }
}

/* ---------- PDP add-to-cart disabled until a size is chosen ---------- */
.pdp-actions__cart .add-to-cart-button:disabled,
.pdp-actions__cart .add-to-cart-button.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ================================================================
   Account / Auth / Address / Orders  (simple, on-brand utility pages)
   ================================================================ */

/* page shell + titles shared by these pages */
.login-page,
.registration-page,
.registration-result-page,
.password-recovery-page,
.order-details-page,
.order-list-page,
.return-request-page {
  max-width: var(--page-width);
  margin: 0 auto;
  /* horizontal gutter comes once from the enclosing .center-1 (16px) */
  padding: var(--spacing-xl) 0 var(--spacing-3xl);
}

.account-page .page-title h1,
.login-page .page-title h1,
.registration-page .page-title h1,
.registration-result-page .page-title h1,
.password-recovery-page .page-title h1,
.order-list-page .page-title h1,
.order-details-page .page-title h1 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
}

@media (min-width: 750px) {
  .account-page .page-title h1,
  .login-page .page-title h1,
  .registration-page .page-title h1,
  .registration-result-page .page-title h1,
  .password-recovery-page .page-title h1,
  .order-list-page .page-title h1,
  .order-details-page .page-title h1 {
    font-size: 1.375rem;
  }
}

/* account pages are single-column (no side nav): keep the content in one
   centered column and let the horizontal gutter come from the enclosing
   .center-1 (the same 16px inset the home page uses) instead of adding a
   second wrapper gutter or trapping .center-1 in a narrow sidebar track. */
.html-account-page .master-column-wrapper {
  max-width: var(--content-width);
  margin: 0 auto;
  /* no padding here: the horizontal gutter comes from the enclosing .center-1
     (16px, same as home) and the vertical rhythm from the inner ff-* component
     (spacing-lg / spacing-2xl) — keeping it in one place avoids double gaps. */
  padding: 0;
  display: block;
}

/* the account content sits in the grid's second track — undo the global
   .center-2 container so it fills the column instead of re-centering */
.html-account-page .center-2 {
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* account side navigation */
.block-account-navigation .title {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: var(--spacing-sm);
}

.block-account-navigation .list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--spacing-2xs);
  display: flex;
  flex-direction: row;
  gap: var(--spacing-2xs);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.block-account-navigation .list::-webkit-scrollbar {
  display: none;
}

.block-account-navigation .list li {
  flex: 0 0 auto;
}

.block-account-navigation .list li a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-foreground);
  font-size: 0.9375rem;
  opacity: 0.8;
  white-space: nowrap;
}

@media (min-width: 750px) {
  .block-account-navigation .list {
    flex-direction: column;
    overflow: visible;
    padding: 0;
  }
}

.block-account-navigation .list li a:hover {
  background-color: color-mix(in srgb, var(--color-foreground) 5%, transparent);
  opacity: 1;
}

.block-account-navigation .list li.active a {
  background-color: var(--color-tint);
  font-weight: 600;
  opacity: 1;
}

/* hide always-on tabs not wanted in a simple store */
.block-account-navigation .customer-recurring-payments,
.customer-recurring-payments {
  display: none;
}

/* generic form styling (customer info, register, login, address, password) */
.account-page .fieldset .title,
.login-page .fieldset .title,
.registration-page .fieldset .title,
.address-edit-page .fieldset .title,
.enter-address .title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: var(--spacing-lg) 0 var(--spacing-sm);
  padding-bottom: var(--spacing-2xs);
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
}

.account-page .fieldset:first-of-type .title,
.registration-page .fieldset:first-of-type .title {
  margin-top: 0;
}

.account-page .inputs,
.login-page .inputs,
.registration-page .inputs,
.password-recovery-page .inputs,
.enter-address .inputs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xs);
  margin-bottom: var(--spacing-md);
  max-width: 460px;
}

.account-page .inputs label,
.login-page .inputs label,
.registration-page .inputs label,
.password-recovery-page .inputs label,
.enter-address .inputs label {
  font-size: 0.875rem;
  font-weight: 500;
}

.account-page .inputs input[type="text"],
.account-page .inputs input[type="email"],
.account-page .inputs input[type="tel"],
.account-page .inputs input[type="password"],
.account-page .inputs select,
.login-page .inputs input[type="text"],
.login-page .inputs input[type="email"],
.login-page .inputs input[type="password"],
.registration-page .inputs input[type="text"],
.registration-page .inputs input[type="email"],
.registration-page .inputs input[type="tel"],
.registration-page .inputs input[type="password"],
.registration-page .inputs select,
.password-recovery-page .inputs input[type="email"],
.enter-address .inputs input[type="text"],
.enter-address .inputs input[type="email"],
.enter-address .inputs input[type="tel"],
.enter-address .inputs select {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9375rem;
  background-color: var(--color-background);
}

.account-page .inputs input:focus,
.login-page .inputs input:focus,
.registration-page .inputs input:focus,
.enter-address .inputs input:focus,
.enter-address .inputs select:focus {
  outline: none;
  border-color: var(--color-foreground);
}

.required {
  color: var(--color-accent);
  margin-left: 2px;
}

.field-validation-error,
.message-error,
.validation-summary-errors {
  color: var(--color-accent);
  font-size: 0.8125rem;
}

/* terms-of-service "read" trigger renders as an inline text link (it is a
   <button> for keyboard/AT support, but should not look like a chrome button) */
.terms-of-service .read {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-foreground);
  text-decoration: underline;
  cursor: pointer;
}

/* checkbox rows (remember me, etc.) */
.account-page .inputs.reversed,
.login-page .inputs.reversed,
.registration-page .inputs.reversed {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-2xs);
}

/* primary + secondary buttons across these pages */
.account-page .buttons .button-1,
.account-page .buttons input[type="submit"],
.login-page .buttons .button-1,
.login-page .buttons input[type="submit"],
.registration-page .buttons .button-1,
.registration-page .buttons input[type="submit"],
.registration-result-page .buttons .button-1,
.password-recovery-page .buttons .button-1,
.address-edit-page .buttons .button-1,
.address-list-page .add-button .button-1,
.order-details-page .button-1,
.button-1.save-customer-info-button,
.button-1.register-next-step-button,
.button-1.login-button,
.button-1.save-address-button {
  display: inline-block;
  padding: 0.85rem 2rem;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-foreground);
  color: var(--color-background);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.account-page .buttons .button-1:hover,
.login-page .buttons .button-1:hover,
.registration-page .buttons .button-1:hover,
.button-1.save-customer-info-button:hover,
.button-1.register-next-step-button:hover,
.button-1.login-button:hover,
.button-1.save-address-button:hover {
  background-color: var(--color-accent);
}

/* login page: two side-by-side blocks */
.login-page .customer-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2xl);
  align-items: start;
}

.login-page .returning-wrapper,
.login-page .new-wrapper {
  padding: var(--spacing-xl);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-radius: var(--radius-soft);
}

.login-page .topic-block,
.login-page .new-wrapper .text {
  margin-bottom: var(--spacing-md);
}

/* address list */
.address-list-page .address-list,
.order-list-page .order-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
}

.address-list-page .section.address-item,
.order-list-page .section.order-item {
  padding: var(--spacing-lg);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-radius: var(--radius-soft);
}

.address-list-page .address-item .title,
.order-list-page .order-item .title {
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.address-list-page .buttons,
.order-list-page .buttons {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.address-list-page .button-2,
.order-list-page .button-2 {
  padding: 0.5rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-foreground);
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: none;
}

.address-list-page .button-2.delete-address-button:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.address-list-page .add-button {
  margin-bottom: var(--spacing-md);
}

.no-data {
  padding: var(--spacing-2xl) 0;
  opacity: 0.65;
}

/* mobile: stack account layout + login blocks */
@media (max-width: 767px) {
  .account-page .master-column-wrapper {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .login-page .customer-blocks {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Secondary pages: contact / orders / returns / wishlist
   --------------------------------------------------------------------------
   Additive, on-brand styling for pages still using raw nopCommerce markup.
   Reuses the same tokens + conventions as the account/checkout forms above:
   full-width padded inputs (--radius-sm), pill buttons in --color-foreground,
   hairline borders via color-mix, --color-tint / --radius-soft cards.
   ========================================================================== */

/* shared page shell for the secondary pages (mirrors the account pages) */
.contact-page,
.registration-result-page,
.return-request-list-page {
  max-width: var(--page-width);
  margin: 0 auto;
  /* horizontal gutter comes once from the enclosing .center-1 (16px) */
  padding: var(--spacing-xl) 0 var(--spacing-3xl);
}

.contact-page .page-title h1,
.return-request-page .page-title h1,
.return-request-list-page .page-title h1,
.registration-result-page .page-title h1 {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
}

/* ---------- Generic textarea styling (match the shared input treatment) ---------- */
.contact-page textarea,
.return-request-page textarea,
.order-details-page textarea,
.wishlist-page textarea,
.enter-address textarea,
.account-page textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  background-color: var(--color-background);
  resize: vertical;
}

.contact-page textarea:focus,
.return-request-page textarea:focus,
.order-details-page textarea:focus,
.wishlist-page textarea:focus,
.enter-address textarea:focus,
.account-page textarea:focus {
  outline: none;
  border-color: var(--color-foreground);
}

/* ---------- 1. Contact us page ---------- */
.contact-page .fieldset,
.contact-page .form-fields {
  max-width: 560px;
}

.contact-page .inputs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xs);
  margin-bottom: var(--spacing-md);
  max-width: 560px;
}

.contact-page .inputs label {
  font-size: 0.875rem;
  font-weight: 500;
}

.contact-page .inputs input[type="text"],
.contact-page .inputs input[type="email"],
.contact-page .inputs input[type="tel"],
.contact-page .inputs textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9375rem;
  background-color: var(--color-background);
}

.contact-page .inputs input:focus,
.contact-page .inputs textarea:focus {
  outline: none;
  border-color: var(--color-foreground);
}

.contact-page .buttons {
  max-width: 560px;
  margin-top: var(--spacing-md);
}

.contact-page .buttons .button-1,
.contact-page .buttons input[type="submit"] {
  display: inline-block;
  padding: 0.85rem 2rem;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-foreground);
  color: var(--color-background);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.contact-page .buttons .button-1:hover,
.contact-page .buttons input[type="submit"]:hover {
  background-color: var(--color-accent);
}

.contact-page .result {
  max-width: 560px;
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  border-radius: var(--radius-soft);
  background-color: var(--color-tint);
}

/* ---------- 2. Order details page ---------- */
.order-details-page .section {
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-radius: var(--radius-soft);
}

.order-details-page .section .title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 var(--spacing-sm);
  padding-bottom: var(--spacing-2xs);
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
}

/* order-overview / billing-info / shipping-info in a responsive 2-col grid */
.order-details-page .order-overview,
.order-details-page .billing-info,
.order-details-page .shipping-info {
  padding: var(--spacing-lg);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-radius: var(--radius-soft);
}

.order-details-page .order-overview {
  background-color: var(--color-tint);
}

.order-details-page .billing-info-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.order-details-page .billing-info .title,
.order-details-page .shipping-info .title {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: var(--spacing-sm);
}

/* products table */
.order-details-page .data-table,
.order-details-page table.cart {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.order-details-page .data-table th,
.order-details-page .cart-header-row th {
  text-align: left;
  padding: var(--spacing-sm);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
}

.order-details-page .data-table td,
.order-details-page .cart-item-row td {
  padding: var(--spacing-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 8%, transparent);
  vertical-align: top;
}

/* totals aligned right */
.order-details-page .total-info,
.order-details-page .cart-total {
  margin-top: var(--spacing-lg);
  margin-left: auto;
  max-width: 360px;
}

.order-details-page .cart-total td,
.order-details-page .total-info td {
  padding: var(--spacing-2xs) var(--spacing-sm);
  text-align: right;
}

.order-details-page .cart-total .order-total,
.order-details-page .total-info .order-total {
  font-weight: 700;
  font-size: 1.0625rem;
}

/* ---------- 3. Order list: recurring / return blocks + detail links ---------- */
.order-list-page .recurring-payments .title,
.order-list-page .return-items .title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: var(--spacing-lg) 0 var(--spacing-sm);
  padding-bottom: var(--spacing-2xs);
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
}

.order-list-page .order-item .button-2 {
  padding: 0.5rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-foreground);
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: none;
}

.order-list-page .order-item .button-2:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ---------- 4. Password recovery page ---------- */
.password-recovery-page .fieldset,
.password-recovery-page .form-fields,
.password-recovery-page .buttons {
  max-width: 460px;
}

.password-recovery-page .result,
.password-recovery-page .message-success {
  max-width: 460px;
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  border-radius: var(--radius-soft);
  background-color: var(--color-tint);
}

/* ---------- 5. Return request pages ---------- */
.return-request-page .fieldset .title,
.return-request-list-page .fieldset .title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: var(--spacing-lg) 0 var(--spacing-sm);
  padding-bottom: var(--spacing-2xs);
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
}

.return-request-page .fieldset:first-of-type .title {
  margin-top: 0;
}

.return-request-page .inputs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xs);
  margin-bottom: var(--spacing-md);
  max-width: 560px;
}

.return-request-page .inputs label {
  font-size: 0.875rem;
  font-weight: 500;
}

.return-request-page .inputs input[type="text"],
.return-request-page .inputs select,
.return-request-page .inputs textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9375rem;
  background-color: var(--color-background);
}

.return-request-page .inputs input:focus,
.return-request-page .inputs select:focus,
.return-request-page .inputs textarea:focus {
  outline: none;
  border-color: var(--color-foreground);
}

.return-request-page .buttons {
  margin-top: var(--spacing-md);
}

.return-request-page .buttons .button-1,
.return-request-page .buttons input[type="submit"] {
  display: inline-block;
  padding: 0.85rem 2rem;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-foreground);
  color: var(--color-background);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.return-request-page .buttons .button-1:hover,
.return-request-page .buttons input[type="submit"]:hover {
  background-color: var(--color-accent);
}

/* return request list table */
.return-request-list-page .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin-top: var(--spacing-md);
}

.return-request-list-page .data-table th {
  text-align: left;
  padding: var(--spacing-sm);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
}

.return-request-list-page .data-table td {
  padding: var(--spacing-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 8%, transparent);
}

/* ---------- 6. Wishlist buttons (grid itself is already styled) ---------- */
.wishlist-content .buttons .button-1,
.wishlist-content .buttons input[type="submit"] {
  display: inline-block;
  padding: 0.85rem 2rem;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-foreground);
  color: var(--color-background);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.wishlist-content .buttons .button-1:hover,
.wishlist-content .buttons input[type="submit"]:hover {
  background-color: var(--color-accent);
}

.wishlist-content .buttons .button-2 {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-foreground);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.wishlist-content .buttons .button-2:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.wishlist-content .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

/* ---------- 7. Registration result page ---------- */
.registration-result-page .result {
  text-align: center;
  max-width: 560px;
  margin: 0 auto var(--spacing-xl);
  font-size: 1.0625rem;
}

.registration-result-page .buttons {
  text-align: center;
}

.registration-result-page .buttons .button-1:hover {
  background-color: var(--color-accent);
}

/* ---------- Responsive: stack grids under 767px ---------- */
@media (max-width: 767px) {
  .order-details-page .billing-info-wrap {
    grid-template-columns: 1fr;
  }

  .order-details-page .total-info,
  .order-details-page .cart-total {
    max-width: none;
  }

  .order-details-page .data-table,
  .return-request-list-page .data-table {
    display: block;
    overflow-x: auto;
  }
}

/* ==========================================================================
   MULTI-STEP CHECKOUT — progress stepper, confirm summary, order completed
   --------------------------------------------------------------------------
   Standard (non one-page) checkout. Steps shown: Cart -> Address -> Payment
   -> Complete (Shipping + Confirm are folded in, see CheckoutProgress view).
   All spacing/colors come from the :root design tokens.
   ========================================================================== */

/* ---------- Progress stepper (numbered circles + connecting line) ---------- */
.order-progress {
  max-width: var(--content-width);
  margin: 0 auto var(--spacing-2xl);
  padding: var(--spacing-lg) var(--page-margin) 0;
}

.order-progress ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.order-progress li {
  position: relative;
  flex: 1 1 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 0;
}

/* numbered circle */
.order-progress li::before {
  content: attr(data-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-circle);
  background-color: var(--color-background);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 25%, transparent);
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
  font-weight: 600;
  font-size: 0.875rem;
  position: relative;
  z-index: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* connecting line between circles (drawn to the previous step) */
.order-progress li:not(:first-child)::after {
  content: "";
  position: absolute;
  top: 1.125rem;
  right: 50%;
  width: 100%;
  height: 2px;
  background-color: color-mix(in srgb, var(--color-foreground) 15%, transparent);
  z-index: 0;
}

/* completed steps: filled in the brand foreground */
.order-progress li.completed-step::before {
  background-color: var(--color-foreground);
  border-color: var(--color-foreground);
  color: var(--color-background);
}

.order-progress li.completed-step:not(:first-child)::after {
  background-color: var(--color-foreground);
}

/* current step: highlighted in the accent color */
.order-progress li.current-step::before {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-background);
}

.order-progress li.current-step:not(:first-child)::after {
  background-color: var(--color-foreground);
}

/* labels */
.order-progress li a,
.order-progress li span {
  font-size: 0.8125rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
  text-decoration: none;
  line-height: 1.2;
}

.order-progress li.completed-step a,
.order-progress li.completed-step span {
  color: var(--color-foreground);
}

.order-progress li.completed-step a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.order-progress li.current-step a,
.order-progress li.current-step span {
  color: var(--color-foreground);
  font-weight: 600;
}

/* responsive: condense + allow horizontal scroll under 767px */
@media (max-width: 767px) {
  .order-progress {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .order-progress ul {
    min-width: 22rem;
  }

  .order-progress li::before {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
  }

  .order-progress li:not(:first-child)::after {
    top: 0.875rem;
  }

  .order-progress li a,
  .order-progress li span {
    font-size: 0.6875rem;
  }
}

/* ---------- Confirm-order page: order review as a clean card ---------- */
.confirm-order-page .checkout-data,
.order-confirm-page .checkout-data {
  max-width: 720px;
}

.order-confirm-page .section.order-summary {
  background-color: var(--color-background);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-radius: var(--radius-soft);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.order-confirm-page .section.order-summary .cart {
  width: 100%;
}

/* totals aligned to the right within the confirm summary card */
.order-confirm-page .section.order-summary .totals {
  margin-top: var(--spacing-lg);
  margin-left: auto;
  max-width: 22rem;
}

.order-confirm-page .section.order-summary .total-info .cart-total tr td {
  padding: var(--spacing-2xs) 0;
}

.order-confirm-page .section.order-summary .total-info .cart-total .order-total {
  font-weight: 700;
  font-size: 1.05rem;
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  padding-top: var(--spacing-sm);
}

/* place-order / confirm button as a full-width brand pill */
.order-confirm-page .confirm-order .buttons {
  margin-top: var(--spacing-lg);
}

.order-confirm-page .confirm-order-next-step-button,
.confirm-order-page .confirm-order-next-step-button {
  display: block;
  width: 100%;
  padding: 0.95rem 2rem;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-foreground);
  color: var(--color-background);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.order-confirm-page .confirm-order-next-step-button:hover,
.confirm-order-page .confirm-order-next-step-button:hover {
  background-color: var(--color-accent);
}

.order-confirm-page .confirm-order-next-step-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- Cart: empty state "Continue shopping" ---------- */
.order-summary-content .no-data.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  opacity: 1;
}

.order-summary-content .cart-empty .cart-empty-message {
  margin: 0;
  font-size: 1.05rem;
  opacity: 0.7;
}

.order-summary-content .cart-empty .continue-shopping-button {
  display: inline-block;
  padding: 0.9rem 2rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-foreground);
  color: var(--color-background);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.order-summary-content .cart-empty .continue-shopping-button:hover {
  background-color: var(--color-accent);
}

/* ---------- Order completed: centered success state ---------- */
.order-completed-page .checkout-data {
  max-width: 520px;
}

.order-completed-page .section.order-completed {
  text-align: center;
  background-color: var(--color-tint);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 8%, transparent);
  border-radius: var(--radius-soft);
  padding: var(--spacing-2xl) var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.order-completed-page .order-completed-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto var(--spacing-md);
  border-radius: var(--radius-circle);
  background-color: var(--color-foreground);
  color: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-completed-page .order-completed-icon svg {
  width: 2rem;
  height: 2rem;
}

.order-completed-page .section.order-completed .title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 var(--spacing-2xs);
}

.order-completed-page .order-completed-subtitle {
  margin: 0 0 var(--spacing-lg);
  opacity: 0.7;
}

.order-completed-page .details {
  margin-bottom: var(--spacing-lg);
}

.order-completed-page .order-number {
  display: inline-flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--color-background);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-radius: var(--radius-sm);
}

.order-completed-page .order-number-label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

.order-completed-page .order-number-value {
  font-size: 1.5rem;
  font-weight: 700;
}

.order-completed-page .section.order-completed .buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  align-items: stretch;
}

.order-completed-page .view-order-button,
.order-completed-page .order-completed-continue-button {
  display: block;
  width: 100%;
  padding: 0.9rem 2rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--color-foreground);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.order-completed-page .view-order-button {
  background-color: var(--color-foreground);
  color: var(--color-background);
}

.order-completed-page .view-order-button:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.order-completed-page .order-completed-continue-button {
  background-color: transparent;
  color: var(--color-foreground);
}

.order-completed-page .order-completed-continue-button:hover {
  background-color: var(--color-foreground);
  color: var(--color-background);
}

/* ================================================================
   Universal form-control normalization for utility / auth pages
   (covers tel/number/search + any new pages like phone-login/OTP so
   every text-like input, select and textarea is consistently styled)
   ================================================================ */
.login-page .inputs input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.registration-page .inputs input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.account-page .inputs input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.checkout-page .inputs input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.contact-page .inputs input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.enter-address .inputs input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.phone-login-page .inputs input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.password-recovery-page .inputs input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.return-request-page .inputs input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.login-page .inputs select,
.registration-page .inputs select,
.account-page .inputs select,
.checkout-page .inputs select,
.contact-page .inputs select,
.enter-address .inputs select,
.return-request-page .inputs select,
.login-page .inputs textarea,
.registration-page .inputs textarea,
.account-page .inputs textarea,
.checkout-page .inputs textarea,
.contact-page .inputs textarea,
.enter-address .inputs textarea,
.return-request-page .inputs textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9375rem;
  background-color: var(--color-background);
}

.login-page .inputs input:focus,
.phone-login-page .inputs input:focus,
.contact-page .inputs input:focus,
.contact-page .inputs textarea:focus {
  outline: none;
  border-color: var(--color-foreground);
}

/* OTP entry: large, centered, spaced code input */
.phone-login-page .otp-input,
.phone-login-page input#code,
.phone-login-page .inputs input[name="code"] {
  max-width: 260px;
  text-align: center;
  letter-spacing: 0.4em;
  font-size: 1.25rem;
  font-weight: 600;
}

/* dev-mode OTP note */
.phone-login-page .otp-dev-note,
.phone-login-page .dev-otp {
  margin: var(--spacing-sm) 0;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-tint);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

/* ================================================================
   Web Interface Guidelines polish (accessibility + consistency)
   ================================================================ */

/* 1. Visible keyboard focus ring for every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.menu__link:focus-visible,
.attribute-squares label:focus-visible,
.product-item a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 2. Comfortable tap targets on touch devices */
@media (pointer: coarse) {
  .header-links a,
  .header-links button,
  .menu__link,
  .footer a,
  .pager li a,
  .remove-btn,
  .menu__close,
  .product-quantity .quantity.up,
  .product-quantity .quantity.down,
  .write-review-button,
  .search-box button {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* 3. Smooth hover/active affordance (motion-safe only) */
@media (prefers-reduced-motion: no-preference) {
  .button-1,
  .button-2,
  .checkout-button,
  .add-to-cart-button,
  .menu__link,
  .product-item .picture img,
  .header-categories .item-box .picture img {
    transition: background-color 0.2s ease, color 0.2s ease,
      border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  }

  .button-1:active,
  .button-2:active,
  .checkout-button:active,
  .add-to-cart-button:not(:disabled):active {
    transform: translateY(1px);
  }
}

/* Respect reduced-motion: kill non-essential animation/transition */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 4. Consistent disabled styling for all buttons */
button:disabled,
.button-1:disabled,
.button-2:disabled,
.button-1.disabled,
.button-2.disabled,
input[type="submit"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* 5. Prevent horizontal overflow on small screens */
img,
video,
iframe {
  max-width: 100%;
}

@media (max-width: 767px) {
  .data-table,
  .cart,
  .order-details-area table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ---------- 404 / Page not found ---------- */
.page-not-found-page,
.not-found-page {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--spacing-3xl) var(--page-margin);
  text-align: center;
}

.page-not-found-page .page-title h1,
.not-found-page .page-title h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

.page-not-found-page .page-body,
.not-found-page .page-body {
  max-width: 34rem;
  margin: 0 auto var(--spacing-lg);
  opacity: 0.75;
}

.page-not-found-page .pnf-actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.page-not-found-page .pnf-actions .button-1 {
  display: inline-block;
  padding: 0.85rem 2rem;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-foreground);
  color: var(--color-background);
  font-weight: 600;
  text-decoration: none;
}

.page-not-found-page .pnf-actions .button-2 {
  display: inline-block;
  padding: 0.85rem 2rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-foreground);
  font-weight: 600;
  text-decoration: none;
}

.page-not-found-page .pnf-actions .button-1:hover {
  background-color: var(--color-accent);
}

/* ==========================================================================
   Fashfinity single-address checkout — address cards + add/edit bottom sheet
   ========================================================================== */

.ff-address-page .order-progress {
  margin-bottom: var(--spacing-lg);
}

.ff-address {
  max-width: 60rem;
  margin: 0 auto;
  /* horizontal gutter is provided by the enclosing .center-1 (var(--page-margin));
     don't add a second one here or the content is over-inset on mobile */
  padding: var(--spacing-lg) 0 0;
}

/* title row: heading + action on the right, aligned on the text baseline like the
   source theme's section headers (title + "see all"). */
.ff-address__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.ff-address__title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-foreground);
  margin-bottom: 0;
}

@media (min-width: 750px) {
  .ff-address__title {
    font-size: 1.375rem;
  }
}

.ff-address__warning {
  color: var(--color-accent);
  font-size: 0.875rem;
  margin-bottom: var(--spacing-md);
}

.ff-address__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

/* --- selectable address card --- */
/* NOTE: selector is scoped to .ff-address so it out-specifies the global
   `.checkout-page label { display: block }` rule (this card is a <label>). */
.ff-address .ff-addr-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: 0;
  padding: var(--spacing-lg);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-radius: var(--radius-soft);
  background-color: var(--color-background);
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.ff-addr-card:hover {
  border-color: color-mix(in srgb, var(--color-foreground) 22%, transparent);
}

.ff-addr-card:has(.ff-addr-card__radio:checked) {
  border-color: var(--color-accent);
  background-color: color-mix(in srgb, var(--color-tint) 45%, transparent);
  box-shadow: var(--shadow-soft);
}

/* native radio hidden; custom dot shown */
.ff-addr-card__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ff-addr-card__dot {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  aspect-ratio: 1 / 1;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--color-foreground) 30%, transparent);
  background-color: var(--color-background);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.ff-addr-card__radio:checked + .ff-addr-card__dot {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  box-shadow: inset 0 0 0 3px var(--color-background);
}

.ff-addr-card__radio:focus-visible + .ff-addr-card__dot {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.ff-addr-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.ff-addr-card__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.ff-addr-card__name {
  font-weight: 700;
  color: var(--color-foreground);
}

.ff-addr-card__lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.ff-addr-card__phone {
  margin-top: var(--spacing-xs);
  color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
  font-size: 0.9375rem;
}

.ff-addr-card__phone strong {
  color: var(--color-foreground);
}

.ff-addr-card__actions {
  flex: 0 0 auto;
}

.ff-addr-card__edit {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-2xs) var(--spacing-sm);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 18%, transparent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-foreground);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.ff-addr-card__edit:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* --- compact "New Address" action (inline with the title, see-all convention) --- */
.ff-address__add {
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-accent);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.ff-address__add:hover {
  opacity: 0.75;
}

.ff-address__add-icon {
  font-weight: 700;
  margin-right: var(--spacing-2xs);
}

.ff-address__continue {
  margin-top: var(--spacing-xl);
}

/* primary CTA — matches the theme's other primary buttons (dark pill, accent on
   hover). Scoped to .ff-address so it isn't left with the browser default. */
.ff-address .ff-address__continue-btn {
  display: block;
  width: 100%;
  padding: 0.95rem 2rem;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-foreground);
  color: var(--color-background);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.ff-address .ff-address__continue-btn:hover {
  background-color: color-mix(in srgb, var(--color-foreground) 82%, #ffffff);
}

.ff-address .ff-address__continue-btn:active {
  transform: translateY(1px);
}

/* --- bottom sheet --- */
body.ff-sheet-lock {
  overflow: hidden;
}

.ff-sheet {
  position: fixed;
  inset: 0;
  z-index: 1100;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.ff-sheet--open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.ff-sheet__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
}

.ff-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background);
  border-radius: var(--radius-soft) var(--radius-soft) 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.ff-sheet--open .ff-sheet__panel {
  transform: translateY(0);
}

.ff-sheet__handle {
  width: 44px;
  height: 4px;
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--color-foreground) 20%, transparent);
  margin: var(--spacing-sm) auto var(--spacing-xs);
}

.ff-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
}

.ff-sheet__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-foreground);
}

.ff-sheet__close {
  border: none;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
  cursor: pointer;
}

.ff-sheet__close:hover {
  color: var(--color-foreground);
}

.ff-sheet__content {
  padding: var(--spacing-lg);
  overflow-y: auto;
}

.ff-sheet__footer {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
  background-color: var(--color-background);
}

.ff-sheet__footer .ff-sheet__save,
.ff-sheet__footer .ff-sheet__cancel {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: filter 0.2s ease;
}

/* primary (Save) — brand accent pill */
.ff-sheet__footer .ff-sheet__save {
  flex: 1 1 auto;
  border: none;
  background-color: var(--color-accent);
  color: #ffffff;
}

.ff-sheet__footer .ff-sheet__save:hover {
  filter: brightness(0.92);
}

/* secondary (Cancel) — outline pill */
.ff-sheet__footer .ff-sheet__cancel {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  background-color: var(--color-background);
  color: var(--color-foreground);
}

.ff-sheet__footer .ff-sheet__cancel:hover {
  background-color: color-mix(in srgb, var(--color-foreground) 5%, transparent);
}

/* required markers in the shared address form render loose after the input
   (default nopCommerce partial) — drop the stray asterisk so the address sheet
   AND the account add/edit address pages read clean like the app-style forms */
.edit-address .required {
  display: none;
}

/* on wider screens present the sheet as a centered modal card */
@media (min-width: 48rem) {
  .ff-sheet__panel {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(34rem, 92vw);
    max-height: 88vh;
    border-radius: var(--radius-soft);
    transform: translate(-50%, -46%);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
  }

  .ff-sheet--open .ff-sheet__panel {
    transform: translate(-50%, -50%);
    opacity: 1;
  }

  .ff-sheet__handle {
    display: none;
  }
}

/* ==========================================================================
   Checkout: hide storefront search + collapsible order-summary bar
   ========================================================================== */

/* the search box is noise during checkout and on the account/profile pages
   (mobile has limited space) */
.html-checkout-page .store-search-box,
.html-customer-info-page .store-search-box,
.html-account-menu-page .store-search-box,
.html-order-list-page .store-search-box,
.html-address-list-page .store-search-box,
.html-change-password-page .store-search-box {
  display: none;
}

/* on desktop there's plenty of room, so keep the search box on the account
   pages so their header matches the rest of the site (the search box is also
   what pushes the account/wishlist/cart icons to the right). checkout stays
   simplified. */
@media (min-width: 990px) {
  .html-customer-info-page .store-search-box,
  .html-account-menu-page .store-search-box,
  .html-order-list-page .store-search-box,
  .html-address-list-page .store-search-box,
  .html-change-password-page .store-search-box {
    display: block;
  }
}

/* no bottom tab bar on nested/flow pages (checkout, product details) — and reclaim
   the space the fixed bar normally reserves at the bottom of the body */
.html-checkout-page,
.html-product-details-page {
  --bottom-nav-height: 0px;
}

.html-checkout-page .bottom-nav,
.html-product-details-page .bottom-nav {
  display: none;
}

/* collapsible order summary (native <details>) shown on the address step */
/* order summary sits inline just above "Pay now"; collapses to a compact row */
.ff-summary {
  margin: var(--spacing-xl) 0 var(--spacing-lg);
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
}

.ff-summary__bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  cursor: pointer;
  list-style: none;
}

.ff-summary__bar::-webkit-details-marker {
  display: none;
}

/* --- collapsed: thumbnail + "Total / N items" + grand total --- */
.ff-summary__collapsed {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
}

.ff-summary__thumb-stack {
  flex: 0 0 auto;
  width: 46px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  background-color: color-mix(in srgb, var(--color-foreground) 4%, var(--color-background));
}

.ff-summary__thumb-stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ff-summary__coltext {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.ff-summary__coltotal {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-foreground);
}

.ff-summary__colcount {
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
}

.ff-summary__colprice {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
}

.ff-summary__colprice .ff-summary__cur {
  padding: 2px 6px;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--color-foreground) 8%, transparent);
  color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
  font-size: 0.6875rem;
  opacity: 1;
  margin-right: 0;
}

.ff-summary__colamount {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-foreground);
}

/* --- expanded header --- */
.ff-summary__openhead {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  width: 100%;
}

.ff-summary__openlabel {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-foreground);
}

.ff-summary[open] .ff-summary__collapsed {
  display: none;
}

.ff-summary[open] .ff-summary__openhead {
  display: flex;
}

.ff-summary__chevron {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
}

.ff-summary__body {
  padding: 0 0 var(--spacing-sm);
}

.ff-summary__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.ff-summary__item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--spacing-md);
  align-items: start;
}

.ff-summary__thumb {
  position: relative;
  width: 56px;
}

.ff-summary__thumb img {
  width: 56px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.ff-summary__qty {
  position: absolute;
  top: -6px;
  left: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-foreground);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
}

.ff-summary__name {
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--color-foreground);
}

.ff-summary__price {
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-foreground);
}

.ff-summary__totals {
  margin: var(--spacing-lg) 0 0;
  padding-top: var(--spacing-md);
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
}

.ff-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin: 0 0 var(--spacing-2xs);
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--color-foreground) 80%, transparent);
}

.ff-summary__row dt,
.ff-summary__row dd {
  margin: 0;
}

.ff-summary__shipping {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ff-summary__row--grand {
  margin-top: var(--spacing-sm);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-foreground);
}

.ff-summary__cur {
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.6;
  margin-right: 2px;
}

.ff-summary__tax {
  margin: var(--spacing-2xs) 0 0;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
}

/* ==========================================================================
   Single-page checkout — Razorpay payment blurb + "Pay now"
   ========================================================================== */

.ff-pay {
  margin-bottom: var(--spacing-2xl);
}

.ff-pay__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-foreground);
  margin: var(--spacing-md) 0 var(--spacing-2xs);
}

@media (min-width: 750px) {
  .ff-pay__title {
    font-size: 1.375rem;
  }
}

.ff-pay__secure {
  margin: 0 0 var(--spacing-md);
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
}

.ff-pay__method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1.5px solid var(--color-foreground);
  border-radius: var(--radius-sm);
  background-color: color-mix(in srgb, var(--color-foreground) 3%, transparent);
}

.ff-pay__method-name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-foreground);
  line-height: 1.35;
}

.ff-pay__badges {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  flex-shrink: 0;
}

.ff-pay__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
  border-radius: 4px;
  background-color: var(--color-background);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-foreground);
}

.ff-pay__badge--more {
  color: var(--color-foreground);
  border-color: color-mix(in srgb, var(--color-foreground) 40%, transparent);
}

.ff-pay__redirect {
  margin: var(--spacing-sm) 0 0;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  background-color: color-mix(in srgb, var(--color-foreground) 4%, transparent);
  font-size: 0.875rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
}

.ff-pay__btn {
  margin-top: var(--spacing-xl);
}

.ff-pay__error {
  margin-top: var(--spacing-md);
  font-weight: 500;
}

/* Payment-mode selector (full online vs advance + Cash on Delivery) */
.ff-paymode {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-md);
}

/* NOTE: scoped to .ff-pay so it out-specifies the global
   `.checkout-page label { display: block }` rule (this card is a <label>). */
.ff-pay .ff-paymode__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-radius: var(--radius-sm);
  background-color: var(--color-background);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.ff-pay .ff-paymode__card:hover {
  border-color: color-mix(in srgb, var(--color-foreground) 22%, transparent);
}

.ff-pay .ff-paymode__card:has(.ff-paymode__radio:checked) {
  border-color: var(--color-accent);
  background-color: color-mix(in srgb, var(--color-tint) 45%, transparent);
  box-shadow: var(--shadow-soft);
}

/* native radio hidden; custom dot shown */
.ff-paymode__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ff-paymode__dot {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  aspect-ratio: 1 / 1;
  margin-top: 2px;
  border-radius: var(--radius-circle);
  border: 2px solid color-mix(in srgb, var(--color-foreground) 30%, transparent);
  background-color: var(--color-background);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.ff-paymode__radio:checked + .ff-paymode__dot {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  box-shadow: inset 0 0 0 3px var(--color-background);
}

.ff-paymode__radio:focus-visible + .ff-paymode__dot {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.ff-paymode__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ff-paymode__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.ff-paymode__name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-foreground);
}

.ff-paymode__amount {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-foreground);
  font-variant-numeric: tabular-nums;
}

.ff-paymode__sub {
  font-size: 0.875rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-foreground) 65%, transparent);
}

.ff-paymode__note {
  color: color-mix(in srgb, var(--color-foreground) 50%, transparent);
}

/* ==========================================================================
   My Account — mobile menu landing (/customer/account)
   ========================================================================== */

.ff-account {
  max-width: 40rem;
  margin: 0 auto;
  /* side gutter comes from the enclosing .center-1 (16px, same as home) */
  padding: var(--spacing-lg) 0 var(--spacing-2xl);
}

.ff-account__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-foreground);
  margin: 0 0 var(--spacing-lg);
}

@media (min-width: 750px) {
  .ff-account__title {
    font-size: 1.375rem;
  }
}

/* user card */
.ff-account__user {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-radius: var(--radius-soft);
  background-color: color-mix(in srgb, var(--color-foreground) 4%, transparent);
  margin-bottom: var(--spacing-lg);
}

.ff-account__user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ff-account__name {
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--color-foreground);
}

.ff-account__contact {
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--color-foreground) 65%, transparent);
  word-break: break-word;
}

.ff-account__edit {
  flex-shrink: 0;
  color: var(--color-accent);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.ff-account__edit:hover {
  text-decoration: underline;
}

/* menu list */
.ff-account__menu {
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  margin-bottom: var(--spacing-xl);
}

.ff-account__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-2xs);
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  color: var(--color-foreground);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.ff-account__row:hover {
  background-color: color-mix(in srgb, var(--color-foreground) 3%, transparent);
}

.ff-account__chevron {
  flex-shrink: 0;
  color: color-mix(in srgb, var(--color-foreground) 45%, transparent);
}

/* logout */
.ff-account__logout {
  display: block;
  width: 100%;
  padding: 0.95rem 2rem;
  border: 1px solid var(--color-foreground);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-foreground);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ff-account__logout:hover {
  background-color: var(--color-foreground);
  color: var(--color-background);
}

/* ==========================================================================
   Edit profile — mobile app style form
   ========================================================================== */

.ff-profile {
  max-width: 40rem;
  margin: 0 auto;
  /* side gutter comes from the enclosing .center-1 (16px, same as home);
     vertical rhythm matches .ff-orders / .ff-saved so every account page
     starts at the same height */
  padding: var(--spacing-lg) 0 var(--spacing-2xl);
}

.ff-profile__title {
  margin: 0 0 var(--spacing-lg);
  text-align: left;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-foreground);
}

@media (min-width: 750px) {
  .ff-profile__title {
    font-size: 1.375rem;
  }
}

.ff-profile__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.ff-profile__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.ff-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  min-width: 0;
}

.ff-field > label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
}

.ff-field input,
.ff-field select {
  box-sizing: border-box;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 18%, transparent);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9375rem;
  background-color: var(--color-background);
  color: var(--color-foreground);
}

.ff-profile__note {
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
  font-size: 0.875rem;
}

.ff-profile__forgot {
  align-self: flex-start;
  margin-top: var(--spacing-2xs);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

.ff-profile__forgot:hover {
  text-decoration: underline;
}

.ff-field input:focus,
.ff-field select:focus {
  outline: none;
  border-color: var(--color-foreground);
}

/* birthdate: inline day/month/year selects */
.ff-field--dob .date-picker,
.ff-field--dob > div:not([class]) {
  display: flex;
  gap: var(--spacing-sm);
}

.ff-field--dob select {
  flex: 1 1 0;
}

/* gender radios */
.ff-gender {
  display: flex;
  gap: var(--spacing-lg);
  padding: 0.55rem 0;
  flex-wrap: wrap;
}

.ff-gender__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--color-foreground);
}

.ff-gender__opt input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}

.ff-profile__save {
  margin-top: var(--spacing-md);
  width: 100%;
  padding: 1rem 2rem;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.1s ease;
}

.ff-profile__save:hover {
  filter: brightness(0.94);
}

.ff-profile__save:active {
  transform: translateY(1px);
}

/* ==========================================================================
   My Orders — mobile app style card list
   ========================================================================== */

.ff-orders {
  max-width: 40rem;
  margin: 0 auto;
  /* horizontal gutter comes from the enclosing .center-1 — don't double it */
  padding: var(--spacing-lg) 0 var(--spacing-2xl);
}

.ff-orders__title {
  margin: 0 0 var(--spacing-lg);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-foreground);
}

@media (min-width: 750px) {
  .ff-orders__title {
    font-size: 1.375rem;
  }
}

.ff-orders__period {
  flex-shrink: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 18%, transparent);
  border-radius: var(--radius-sm);
  background-color: var(--color-background);
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--color-foreground);
}

.ff-orders__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.ff-orders__card {
  padding: var(--spacing-lg);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-radius: var(--radius-soft);
  background-color: var(--color-background);
}

/* order id + download invoice, with a dashed rule beneath (like the reference) */
.ff-orders__idrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px dashed color-mix(in srgb, var(--color-foreground) 22%, transparent);
}

.ff-orders__id {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
}

.ff-orders__id strong {
  color: var(--color-foreground);
}

.ff-orders__invoice {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-foreground);
  text-decoration: underline;
}

.ff-orders__invoice:hover {
  color: var(--color-accent);
}

/* status row (tappable → order details) */
.ff-orders__statusrow {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  text-decoration: none;
  color: var(--color-foreground);
}

.ff-orders__status-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-circle);
  border: 1.5px solid currentColor;
  color: color-mix(in srgb, var(--color-foreground) 45%, transparent);
}

.ff-orders__status-icon.complete {
  color: #1a7f5a;
}

.ff-orders__status-icon.cancelled {
  color: var(--color-accent);
}

.ff-orders__status-icon.processing,
.ff-orders__status-icon.pending {
  color: #9a6f08;
}

.ff-orders__statustext {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ff-orders__statuslabel {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-foreground);
}

.ff-orders__statusdate {
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
}

/* product preview rows */
.ff-orders__product {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding-top: var(--spacing-md);
  text-decoration: none;
  color: var(--color-foreground);
}

.ff-orders__thumb {
  flex-shrink: 0;
  width: 64px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: color-mix(in srgb, var(--color-foreground) 4%, var(--color-background));
}

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

.ff-orders__prodinfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ff-orders__prodname {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-foreground);
}

.ff-orders__prodattr,
.ff-orders__prodqty {
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
}

.ff-orders__end {
  margin: var(--spacing-xl) 0 0;
  text-align: center;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--color-foreground) 50%, transparent);
}

.ff-orders__chevron {
  flex-shrink: 0;
  color: color-mix(in srgb, var(--color-foreground) 40%, transparent);
}

.ff-orders__return {
  display: inline-block;
  margin-top: var(--spacing-2xs);
  padding-left: var(--spacing-2xs);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

.ff-orders__return:hover {
  text-decoration: underline;
}

.ff-orders__empty {
  padding: var(--spacing-2xl) 0;
  text-align: center;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
}

/* ==========================================================================
   Returns — history list + request form (mobile app style)
   ========================================================================== */

.ff-returns {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--spacing-lg) 0 var(--spacing-2xl);
}

.ff-returns__title {
  margin: 0 0 var(--spacing-lg);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-foreground);
}

@media (min-width: 750px) {
  .ff-returns__title {
    font-size: 1.375rem;
  }
}

.ff-returns__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.ff-returns__card {
  padding: var(--spacing-md);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-radius: var(--radius-soft);
  background-color: var(--color-background);
}

.ff-returns__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 8%, transparent);
}

.ff-returns__num {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--color-foreground) 65%, transparent);
}

.ff-returns__num strong {
  color: var(--color-foreground);
}

.ff-returns__status {
  flex-shrink: 0;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--color-foreground) 8%, transparent);
  color: color-mix(in srgb, var(--color-foreground) 75%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* status colour cues (class names come from the localized status, lowercased) */
.ff-returns__status--pending,
.ff-returns__status--pendingexternalprovider {
  background-color: color-mix(in srgb, #d98a00 16%, transparent);
  color: #9a6200;
}

.ff-returns__status--itemsrefunded,
.ff-returns__status--itemsrepaired,
.ff-returns__status--itemsreplaced,
.ff-returns__status--itemsreturned {
  background-color: color-mix(in srgb, #1a8f4c 16%, transparent);
  color: #10713a;
}

.ff-returns__status--requestrejected,
.ff-returns__status--cancelled {
  background-color: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent);
}

.ff-returns__product {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-2xs);
  margin-bottom: var(--spacing-sm);
  text-decoration: none;
  color: var(--color-foreground);
}

.ff-returns__prodname {
  font-weight: 500;
}

.ff-returns__prodqty {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
}

.ff-returns__meta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  margin: 0;
}

.ff-returns__row {
  display: flex;
  gap: var(--spacing-sm);
  font-size: 0.875rem;
}

.ff-returns__row dt {
  flex-shrink: 0;
  min-width: 5.5rem;
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
}

.ff-returns__row dd {
  margin: 0;
  color: var(--color-foreground);
}

.ff-returns__row--comments {
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.ff-returns__empty {
  padding: var(--spacing-2xl) 0;
  text-align: center;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
}

/* --- return request form --- */

.ff-return__order {
  margin: calc(-1 * var(--spacing-sm)) 0 var(--spacing-lg);
}

.ff-return__order a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

.ff-return__order a:hover {
  text-decoration: underline;
}

.ff-return__result {
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-foreground);
  font-size: 0.9375rem;
}

.ff-return__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.ff-return__subtitle {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-foreground);
}

.ff-return__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.ff-return__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-radius: var(--radius-soft);
}

.ff-return__iteminfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ff-return__itemname {
  font-weight: 500;
  color: var(--color-foreground);
  text-decoration: none;
}

.ff-return__itemattr {
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
}

.ff-return__itemprice {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
}

.ff-return__itemqty {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  flex-shrink: 0;
}

.ff-return__itemqty label {
  font-size: 0.7rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
}

.ff-return__itemqty select {
  padding: 0.5rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 18%, transparent);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9375rem;
  background-color: var(--color-background);
  color: var(--color-foreground);
}

.ff-return__comment {
  box-sizing: border-box;
  width: 100%;
  min-height: 6rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 18%, transparent);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9375rem;
  background-color: var(--color-background);
  color: var(--color-foreground);
  resize: vertical;
}

.ff-return__comment:focus {
  outline: none;
  border-color: var(--color-foreground);
}

/* ==========================================================================
   Saved Addresses — mobile app style card list
   ========================================================================== */

.ff-saved {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--spacing-lg) 0 var(--spacing-2xl);
}

.ff-saved__title {
  margin: 0 0 var(--spacing-lg);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-foreground);
}

@media (min-width: 750px) {
  .ff-saved__title {
    font-size: 1.375rem;
  }
}

.ff-saved__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.ff-saved__card {
  padding: var(--spacing-lg);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-radius: var(--radius-soft);
  background-color: var(--color-background);
}

.ff-saved__cardhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
}

.ff-saved__name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-foreground);
}

.ff-saved__actions {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.ff-saved__edit,
.ff-saved__delete {
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.ff-saved__edit {
  color: var(--color-foreground);
}

.ff-saved__edit:hover {
  color: var(--color-accent);
}

.ff-saved__delete {
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
}

.ff-saved__delete:hover {
  color: var(--color-accent);
}

.ff-saved__lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
}

.ff-saved__phone {
  margin-top: var(--spacing-xs);
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
}

.ff-saved__phone strong {
  color: var(--color-foreground);
}

.ff-saved__empty {
  padding: var(--spacing-2xl) 0;
  text-align: center;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
}

/* add new address — full-width outlined action */
.ff-saved__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2xs);
  width: 100%;
  padding: 0.95rem 2rem;
  border: 1px dashed color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-accent);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ff-saved__add:hover {
  background-color: color-mix(in srgb, var(--color-tint) 40%, transparent);
  border-color: var(--color-accent);
}

.ff-saved__add-icon {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

/* ==========================================================================
   PRIMARY BUTTON COLOR — single source of truth
   --------------------------------------------------------------------------
   Every primary call-to-action across the store uses the brand accent as its
   fill and darkens slightly on hover. Kept in one place (and last in the
   cascade) so the primary colour is consistent site-wide and easy to retheme.
   Secondary (.button-2) and utility buttons (logout, size chips, progress
   bar) are intentionally excluded.
   ========================================================================== */
.product-details-page .add-to-cart-button,
.pdp-actions__cart .add-to-cart-button,
.order-summary-content .checkout-button,
.shopping-cart-page .checkout-buttons .button-1,
.shopping-cart-page .checkout-button,
.checkout-buttons .button-1,
.checkout-page .buttons button,
.checkout-page .checkout-buttons button,
.account-page .buttons .button-1,
.account-page .buttons input[type="submit"],
.login-page .buttons .button-1,
.login-page .buttons input[type="submit"],
.registration-page .buttons .button-1,
.registration-page .buttons input[type="submit"],
.registration-result-page .buttons .button-1,
.password-recovery-page .buttons .button-1,
.address-edit-page .buttons .button-1,
.address-list-page .add-button .button-1,
.order-details-page .button-1,
.button-1.save-customer-info-button,
.button-1.register-next-step-button,
.button-1.login-button,
.button-1.save-address-button,
.contact-page .buttons .button-1,
.contact-page .buttons input[type="submit"],
.return-request-page .buttons .button-1,
.return-request-page .buttons input[type="submit"],
.wishlist-content .buttons .button-1,
.wishlist-content .buttons input[type="submit"],
.order-confirm-page .confirm-order-next-step-button,
.confirm-order-page .confirm-order-next-step-button,
.order-summary-content .cart-empty .continue-shopping-button,
.order-completed-page .view-order-button,
.order-completed-page .order-completed-continue-button,
.page-not-found-page .pnf-actions .button-1,
.ff-address .ff-address__continue-btn,
.ff-profile__save {
  background-color: var(--color-accent);
  color: #ffffff;
  transition: filter 0.2s ease, transform 0.1s ease;
}

.product-details-page .add-to-cart-button:hover,
.pdp-actions__cart .add-to-cart-button:hover,
.order-summary-content .checkout-button:hover,
.shopping-cart-page .checkout-buttons .button-1:hover,
.shopping-cart-page .checkout-button:hover,
.checkout-buttons .button-1:hover,
.checkout-page .buttons button:hover,
.checkout-page .checkout-buttons button:hover,
.account-page .buttons .button-1:hover,
.account-page .buttons input[type="submit"]:hover,
.login-page .buttons .button-1:hover,
.login-page .buttons input[type="submit"]:hover,
.registration-page .buttons .button-1:hover,
.registration-page .buttons input[type="submit"]:hover,
.registration-result-page .buttons .button-1:hover,
.password-recovery-page .buttons .button-1:hover,
.address-edit-page .buttons .button-1:hover,
.address-list-page .add-button .button-1:hover,
.order-details-page .button-1:hover,
.button-1.save-customer-info-button:hover,
.button-1.register-next-step-button:hover,
.button-1.login-button:hover,
.button-1.save-address-button:hover,
.contact-page .buttons .button-1:hover,
.contact-page .buttons input[type="submit"]:hover,
.return-request-page .buttons .button-1:hover,
.return-request-page .buttons input[type="submit"]:hover,
.wishlist-content .buttons .button-1:hover,
.wishlist-content .buttons input[type="submit"]:hover,
.order-confirm-page .confirm-order-next-step-button:hover,
.confirm-order-page .confirm-order-next-step-button:hover,
.order-summary-content .cart-empty .continue-shopping-button:hover,
.order-completed-page .view-order-button:hover,
.order-completed-page .order-completed-continue-button:hover,
.page-not-found-page .pnf-actions .button-1:hover,
.ff-address .ff-address__continue-btn:hover,
.ff-profile__save:hover {
  background-color: var(--color-accent);
  filter: brightness(0.92);
}

/* ==========================================================================
   Reusable bottom-sheet confirm + toast (app-style replacements for the
   browser confirm()/alert() dialogs and jQuery-UI popups). Driven by the
   global window.ffConfirm() / window.ffToast() helpers in _FfUi.cshtml.
   ========================================================================== */
.ff-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.ff-modal[hidden] {
  display: none;
}

.ff-modal__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.ff-modal--open .ff-modal__scrim {
  opacity: 1;
}

.ff-modal__panel {
  position: relative;
  width: min(30rem, 100%);
  background-color: var(--color-background);
  border-radius: var(--radius-soft) var(--radius-soft) 0 0;
  padding: var(--spacing-lg) var(--spacing-lg) calc(var(--spacing-lg) + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.ff-modal--open .ff-modal__panel {
  transform: translateY(0);
}

@media (min-width: 750px) {
  /* on desktop, center it like a compact card rather than a full-width sheet */
  .ff-modal {
    align-items: center;
  }

  .ff-modal__panel {
    border-radius: var(--radius-soft);
    transform: translateY(12px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .ff-modal--open .ff-modal__panel {
    opacity: 1;
  }
}

.ff-modal__handle {
  width: 2.25rem;
  height: 0.25rem;
  margin: 0 auto var(--spacing-md);
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--color-foreground) 18%, transparent);
}

.ff-modal__title {
  margin: 0 0 var(--spacing-xs);
  font-size: 1.0625rem;
  font-weight: 600;
}

.ff-modal__msg {
  margin: 0 0 var(--spacing-lg);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-foreground) 75%, transparent);
}

.ff-modal__actions {
  display: flex;
  gap: var(--spacing-sm);
}

.ff-modal__actions button {
  flex: 1;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  background-color: var(--color-background);
  color: var(--color-foreground);
  transition: filter 0.2s ease;
}

.ff-modal__ok {
  border-color: transparent !important;
  background-color: var(--color-accent) !important;
  color: #ffffff !important;
}

.ff-modal__ok:hover {
  filter: brightness(0.92);
}

/* toast stack — sits above the mobile bottom nav */
.ff-toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + var(--spacing-md));
  transform: translateX(-50%);
  z-index: 250;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  width: max-content;
  max-width: calc(100vw - 2 * var(--page-margin));
  pointer-events: none;
}

.ff-toast {
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-foreground);
  color: var(--color-background);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.ff-toast--in {
  opacity: 1;
  transform: translateY(0);
}

.ff-toast--error {
  background-color: var(--color-accent);
}

/* Quantity stepper: show as [ − ] [ n ] [ + ] (decrement first) — the
   conventional order. Markup renders .up before .down, so reorder visually. */
.shopping-cart-page .product-quantity .quantity.down {
  order: -1;
}

/* Auth (login / OTP) helper text + OTP input, reused inside .ff-profile forms */
.ff-field__hint {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
}

.ff-profile__lead {
  margin: 0;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--color-foreground) 75%, transparent);
}

.ff-field input.otp-input {
  letter-spacing: 0.5em;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
}

/* Required markers sit inline in the label (see the ff-profile forms). On the
   default contact form the marker renders loose after the input and drops onto
   its own line — hide that stray asterisk so every form reads the same. */
.contact-page .inputs > .required {
  display: none;
}

/* ==========================================================================
   Order details — mobile app style cards (matches .ff-orders / .ff-saved)
   ========================================================================== */

.ff-order {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--spacing-lg) 0 var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.ff-order__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-foreground);
}

@media (min-width: 750px) {
  .ff-order__title {
    font-size: 1.375rem;
  }
}

/* Print / PDF / Cancel action links */
.ff-order__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-top: calc(-1 * var(--spacing-2xs));
}

.ff-order__action {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-foreground);
  text-decoration: underline;
}

.ff-order__action:hover {
  color: var(--color-accent);
}

.ff-order__action--danger {
  color: var(--color-accent);
}

/* Summary highlight card (tinted, with a status icon) */
.ff-order__summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-radius: var(--radius-soft);
  background-color: var(--color-tint);
}

.ff-order__summary.cancelled {
  background-color: color-mix(in srgb, var(--color-foreground) 6%, var(--color-background));
}

.ff-order__status-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-circle);
  border: 1.5px solid currentColor;
  background-color: var(--color-background);
  color: color-mix(in srgb, var(--color-foreground) 45%, transparent);
}

.ff-order__status-icon.complete {
  color: #1a7f5a;
}

.ff-order__status-icon.cancelled {
  color: var(--color-accent);
}

.ff-order__status-icon.processing,
.ff-order__status-icon.pending {
  color: #9a6f08;
}

.ff-order__summaryinfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ff-order__summarystatus {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-foreground);
}

.ff-order__summarydate,
.ff-order__summarytotal {
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--color-foreground) 65%, transparent);
}

.ff-order__summarytotal strong {
  color: var(--color-foreground);
}

/* Generic content card */
.ff-order__card {
  padding: var(--spacing-lg);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-radius: var(--radius-soft);
  background-color: var(--color-background);
}

.ff-order__cardtitle {
  margin: 0 0 var(--spacing-sm);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
}

.ff-order__lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-foreground) 78%, transparent);
}

.ff-order__linename {
  font-weight: 700;
  color: var(--color-foreground);
}

.ff-order__lines strong {
  color: var(--color-foreground);
}

/* Shipping method row under the shipping address */
.ff-order__subrow {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px dashed color-mix(in srgb, var(--color-foreground) 18%, transparent);
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--color-foreground) 78%, transparent);
}

/* Retry-payment / re-order / return buttons */
.ff-order__btn {
  display: inline-block;
  margin-top: var(--spacing-md);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  color: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.ff-order__btn:hover {
  background-color: color-mix(in srgb, var(--color-accent) 88%, #000);
  color: #fff;
}

.ff-order__btn--ghost {
  background-color: transparent;
  border: 1.5px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  color: var(--color-foreground);
}

.ff-order__btn--ghost:hover {
  background-color: color-mix(in srgb, var(--color-foreground) 5%, transparent);
  color: var(--color-foreground);
}

.ff-order__hint {
  margin: var(--spacing-xs) 0 0;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
}

/* Partial-payment (advance + COD) summary on the order details page */
.ff-order__partial {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-radius: var(--radius-sm);
  background-color: color-mix(in srgb, var(--color-foreground) 3%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.ff-order__partial-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
  font-size: 0.9375rem;
}

.ff-order__partial-ok {
  color: #1a7f4b;
  font-weight: 600;
}

.ff-order__partial-row--due strong {
  color: var(--color-accent);
}

/* Cancel-order bottom sheet: confirmation + reason */
.ff-cancel__intro {
  margin: 0 0 var(--spacing-md);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
}

.ff-cancel__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  margin-bottom: var(--spacing-md);
}

.ff-cancel__field > label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-foreground);
}

.ff-cancel__select,
.ff-cancel__note {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  border-radius: var(--radius-sm);
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: inherit;
  font-size: 0.9375rem;
}

.ff-cancel__select:focus,
.ff-cancel__note:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-tint);
}

.ff-cancel__note {
  resize: vertical;
  min-height: 56px;
}

.ff-order__link {
  display: inline-block;
  margin-top: var(--spacing-2xs);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

.ff-order__link:hover {
  text-decoration: underline;
}

/* Product rows */
.ff-order__products {
  display: flex;
  flex-direction: column;
}

.ff-order__product {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 8%, transparent);
}

.ff-order__product:first-child {
  padding-top: var(--spacing-xs);
  border-top: none;
}

.ff-order__thumb {
  flex-shrink: 0;
  width: 64px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: color-mix(in srgb, var(--color-foreground) 4%, var(--color-background));
}

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

.ff-order__prodinfo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ff-order__prodname {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-foreground);
}

.ff-order__prodname a {
  color: inherit;
  text-decoration: none;
}

.ff-order__prodname a:hover {
  color: var(--color-accent);
}

.ff-order__prodattr,
.ff-order__prodsku,
.ff-order__prodmeta {
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
}

.ff-order__prodmeta {
  margin-top: 2px;
}

.ff-order__times {
  opacity: 0.6;
}

.ff-order__prodtotal {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-foreground);
  white-space: nowrap;
}

.ff-order__taxnote {
  margin: var(--spacing-md) 0 0;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
}

/* Shipments + order notes */
.ff-order__shipments,
.ff-order__notes {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.ff-order__shipment + .ff-order__shipment,
.ff-order__note + .ff-order__note {
  padding-top: var(--spacing-md);
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 8%, transparent);
}

.ff-order__note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--color-foreground) 78%, transparent);
}

.ff-order__notedate {
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
}

/* Totals */
.ff-order__totals {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.ff-order__totalrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--color-foreground) 75%, transparent);
}

.ff-order__totalrow span:last-child {
  font-weight: 600;
  color: var(--color-foreground);
}

.ff-order__totalrow--grand {
  margin-top: var(--spacing-xs);
  padding-top: var(--spacing-sm);
  border-top: 1px dashed color-mix(in srgb, var(--color-foreground) 22%, transparent);
  font-size: 1.0625rem;
}

.ff-order__totalrow--grand span {
  color: var(--color-foreground);
}

.ff-order__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.ff-order__cta .ff-order__btn {
  flex: 1 1 auto;
}

/* ==========================================================================
   Single-page checkout — payment overlay + inline error
   ========================================================================== */

.ff-pay-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-foreground) 55%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.ff-pay-overlay[hidden] {
  display: none;
}

.ff-pay-overlay__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-2xl);
  background: var(--color-background);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.ff-pay-overlay__spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
  border-top-color: var(--color-accent);
  animation: ff-spin 0.8s linear infinite;
}

.ff-pay-overlay__text {
  font-weight: 600;
  color: var(--color-foreground);
}

@keyframes ff-spin {
  to { transform: rotate(360deg); }
}

.ff-pay__error {
  margin: var(--spacing-md) 0 0;
}

/* ==========================================================================
   Order confirmation (thank-you) page
   ========================================================================== */

.ff-confirm {
  max-width: 540px;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-lg);
  text-align: center;
}

.ff-confirm__badge {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
}

.ff-confirm__check {
  width: 88px;
  height: 88px;
}

.ff-confirm__check-circle {
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: ff-confirm-circle 0.6s ease-out forwards;
}

.ff-confirm__check-mark {
  stroke: var(--color-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: ff-confirm-mark 0.35s 0.55s ease-out forwards;
}

@keyframes ff-confirm-circle {
  to { stroke-dashoffset: 0; }
}

@keyframes ff-confirm-mark {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ff-confirm__check-circle,
  .ff-confirm__check-mark { animation: none; stroke-dashoffset: 0; }
  .ff-pay-overlay__spinner { animation-duration: 2s; }
}

.ff-confirm__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-foreground);
  margin: 0 0 var(--spacing-2xs);
}

.ff-confirm__subtitle {
  margin: 0 auto var(--spacing-lg);
  max-width: 420px;
  color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
  line-height: 1.5;
}

.ff-confirm__ordernum {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1.5px dashed color-mix(in srgb, var(--color-foreground) 25%, transparent);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-lg);
}

.ff-confirm__ordernum-label {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
}

.ff-confirm__ordernum-value {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-foreground);
}

.ff-confirm__card {
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  border-radius: 16px;
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.ff-confirm__items {
  list-style: none;
  margin: 0 0 var(--spacing-md);
  padding: 0;
}

.ff-confirm__item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0;
  font-size: 0.95rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 8%, transparent);
}

.ff-confirm__item:last-child {
  border-bottom: 0;
}

.ff-confirm__item-qty {
  min-width: 28px;
  color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
  font-weight: 600;
}

.ff-confirm__item-name {
  flex: 1;
  color: var(--color-foreground);
}

.ff-confirm__item-price {
  font-weight: 600;
  color: var(--color-foreground);
  white-space: nowrap;
}

.ff-confirm__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--spacing-md);
  border-top: 1.5px solid var(--color-foreground);
  font-weight: 700;
}

.ff-confirm__total-value {
  font-size: 1.15rem;
  color: var(--color-foreground);
}

/* partial payment: the "pay on delivery" row sits under "paid online" without the heavy divider */
.ff-confirm__total--due {
  border-top: 0;
  padding-top: var(--spacing-2xs);
}

.ff-confirm__total--due .ff-confirm__total-value {
  color: var(--color-accent);
}

.ff-confirm__card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-foreground);
  margin: 0 0 0.5rem;
}

.ff-confirm__address p {
  margin: 0.15rem 0;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--color-foreground) 75%, transparent);
  line-height: 1.5;
}

.ff-confirm__addr-name {
  font-weight: 600;
  color: var(--color-foreground) !important;
}

.ff-confirm__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

.ff-confirm__btn {
  display: block;
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.ff-confirm__btn--primary {
  background: var(--color-foreground);
  color: var(--color-background);
}

.ff-confirm__btn--ghost {
  border: 1.5px solid var(--color-foreground);
  color: var(--color-foreground);
}

.ff-confirm__btn:hover {
  opacity: 0.88;
}

@media (min-width: 750px) {
  .ff-confirm__actions {
    flex-direction: row-reverse;
  }
}

/* ==========================================================================
   Policy pages (refund / return) — beautiful, simple long-form layout
   ========================================================================== */

.ff-policy {
  max-width: 640px;
  margin: 0 auto;
}

.ff-policy__lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-foreground) 82%, transparent);
  margin: 0 0 var(--spacing-2xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
}

.ff-policy__section {
  margin-bottom: var(--spacing-2xl);
}

.ff-policy__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-foreground);
  margin: 0 0 var(--spacing-sm);
}

.ff-policy__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.ff-policy__section > p {
  margin: 0 0 var(--spacing-sm);
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-foreground) 80%, transparent);
}

.ff-policy__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ff-policy__list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.5rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-foreground) 80%, transparent);
}

.ff-policy__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.ff-policy__note {
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-background));
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
  border-radius: 16px;
  padding: var(--spacing-lg);
  margin: var(--spacing-2xl) 0;
}

.ff-policy__note-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 var(--spacing-sm);
}

.ff-policy__note-title::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.ff-policy__note .ff-policy__list li::before {
  background: var(--color-accent);
}

.ff-policy__contact {
  text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-2xl);
}

.ff-policy__contact-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-foreground);
  margin: 0 0 0.4rem;
}

.ff-policy__contact p {
  margin: 0.25rem 0;
  color: color-mix(in srgb, var(--color-foreground) 75%, transparent);
}

.ff-policy__contact a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}

.ff-policy__contact a:hover {
  text-decoration: underline;
}