/* ==========================================================================
   EYEDIA — Shop
   ========================================================================== */

.shop-hero {
  padding: calc(var(--header-h) + 5rem) 0 4rem;
  background: radial-gradient(circle at 25% 30%, #12121a, #030305);
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
}
.shop-hero h1 {
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.shop-hero p {
  color: var(--text-muted);
  margin-top: 1rem;
  max-width: 620px;
  margin-inline: auto;
}

.payment-return {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 1.5rem auto 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--gold-20);
  border-radius: 14px;
  background: rgba(199, 161, 122, 0.08);
  color: var(--text);
}
.payment-return[hidden] { display: none; }
.payment-return > i { margin-top: 0.2rem; color: var(--gold); }
.payment-return strong { display: block; }
.payment-return p { margin: 0.25rem 0 0; color: var(--text-muted); }
.payment-return code { color: inherit; font-weight: 800; letter-spacing: 0.04em; }
.payment-return.is-success { border-color: rgba(111, 224, 152, 0.5); background: rgba(111, 224, 152, 0.08); }
.payment-return.is-success > i { color: #6fe098; }
.payment-return.is-error { border-color: rgba(255, 107, 107, 0.5); background: rgba(255, 107, 107, 0.08); }
.payment-return.is-error > i { color: #ff8585; }

.products-section { padding: 3rem 0 6rem; }

/* --------------------------------------------------------------------------
   Toolbar — search, sort, stock filter and the category tabs

   Sticky, because the catalogue is long: without it a visitor who has scrolled
   to the bottom category has to travel all the way back up to search.
   -------------------------------------------------------------------------- */

.shop-toolbar {
  position: sticky;
  /* Follows the real header height, which motion.js publishes as the header
     condenses and slides away. Falls back to the nominal height when the
     motion layer never runs. */
  top: var(--header-offset, var(--header-h));
  transition: top var(--dur) var(--ease-out);
  z-index: 900;
  padding: 1.25rem 0 1rem;
  background: rgba(5, 5, 8, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.shop-toolbar__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.shop-search {
  position: relative;
  flex: 1 1 260px;
  display: flex;
  align-items: center;
}
.shop-search > i {
  position: absolute;
  inset-inline-start: 1.1rem;
  color: var(--gold);
  font-size: 0.9rem;
  pointer-events: none;
}
.shop-search input {
  width: 100%;
  padding: 0.85rem 2.6rem;
  border-radius: 40px;
  border: 1px solid var(--gold-20);
  background: rgba(20, 20, 28, 0.8);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.shop-search input::placeholder { color: #7d7d88; }
.shop-search input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(28, 28, 38, 0.9);
}
/* The browser's own clear affordance would sit on top of ours. */
.shop-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.shop-search__clear {
  position: absolute;
  inset-inline-end: 0.9rem;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--gold-20);
  color: var(--gold);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.shop-search__clear:hover { background: var(--gold); color: #0a0a0a; }

.shop-toolbar__filters {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.shop-sort-field,
.shop-filter-field {
  display: grid;
  gap: 0.35rem;
}
.shop-sort-field label,
.shop-filter-field label,
.shop-price-filter legend {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.shop-select {
  padding: 0.8rem 1.1rem;
  border-radius: 40px;
  border: 1px solid var(--gold-20);
  background: rgba(20, 20, 28, 0.8);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.shop-select:focus { outline: none; border-color: var(--gold); color: var(--text); }
.shop-select option { background: #12121a; color: var(--text); }

.shop-advanced {
  margin-top: 0.8rem;
  border: 1px solid var(--line-soft);
  border-radius: 1rem;
  background: rgba(16, 16, 23, 0.58);
}
.shop-advanced > summary {
  min-height: 44px;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--gold-pale);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.shop-advanced > summary::-webkit-details-marker { display: none; }
.shop-advanced > summary::after {
  content: "+";
  margin-inline-start: auto;
  color: var(--text-dim);
  font-size: 1.2rem;
  line-height: 1;
}
.shop-advanced[open] > summary::after { content: "−"; }
.shop-advanced > summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.shop-advanced__count {
  min-width: 1.4rem;
  height: 1.4rem;
  padding-inline: 0.35rem;
  border-radius: 2rem;
  display: inline-grid;
  place-items: center;
  background: var(--gold);
  color: #0a0a0a;
  font-size: 0.7rem;
  font-family: "Space Grotesk", var(--font-body);
}
.shop-advanced__count[hidden] { display: none; }
.shop-advanced__body {
  padding: 0.25rem 1rem 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr)) minmax(240px, 1.35fr) auto auto;
  gap: 0.9rem;
  align-items: end;
}
.shop-advanced__body .shop-select {
  width: 100%;
  min-height: 44px;
}
.shop-price-filter {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(90px, 1fr));
  gap: 0.5rem;
}
.shop-price-filter legend { margin-bottom: 0.35rem; }
.shop-price-filter label { display: grid; gap: 0.25rem; }
.shop-price-filter label span { color: var(--text-dim); font-size: 0.7rem; }
.shop-price-filter input {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--gold-20);
  border-radius: 40px;
  background: rgba(20, 20, 28, 0.8);
  color: var(--text);
  font: inherit;
}
.shop-price-filter input:focus { outline: none; border-color: var(--gold); }
.shop-filter-reset {
  min-height: 44px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--line);
  border-radius: 40px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}
.shop-filter-reset:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.shop-filter-reset:disabled { opacity: 0.42; cursor: not-allowed; }

.shop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.shop-toggle input { accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; }
.shop-toggle:hover { color: var(--gold); }

.shop-result-count {
  margin-top: 0.5rem;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
  min-height: 1.2em;
}
.shop-result-count:empty { min-height: 0; }

/* --------------------------------------------------------------------------
   Category tabs
   -------------------------------------------------------------------------- */

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1rem;
}

.category-btn {
  padding: 0.6rem 1.4rem;
  border-radius: 40px;
  border: 1px solid var(--gold-20);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.category-btn:hover {
  color: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.category-btn.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: #0a0a0a;
}

/* --------------------------------------------------------------------------
   Product grid
   -------------------------------------------------------------------------- */

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 2rem;
}
.products-grid[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Category blocks

   One bold heading per category with its products in a row beneath it, so a
   growing catalogue stays browsable instead of turning into one long wall.
   -------------------------------------------------------------------------- */

.shop-catalogue {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.cat-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line-soft);
}

.cat-block__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.cat-block__count {
  font-size: 0.75rem;
  font-weight: 700;
  font-family: "Space Grotesk", var(--font-body);
  color: var(--gold);
  background: var(--gold-15);
  border: 1px solid var(--gold-20);
  border-radius: 40px;
  padding: 0.15rem 0.6rem;
  /* Always a Latin numeral, reading left to right, in either language. */
  direction: ltr;
  unicode-bidi: isolate;
}

.cat-rail {
  gap: 1.5rem;
  padding-bottom: 1.25rem;
  /* Focus ring would otherwise be clipped by the overflow. */
  scroll-padding-inline-start: 2px;
}
.cat-rail .product-card {
  flex: 0 0 clamp(236px, 76vw, 286px);
}

.product-card {
  background: var(--surface-solid);
  border: 1px solid var(--gold-20);
  border-radius: 1.6rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.product-card:hover {
  border-color: var(--gold);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
}

.product-card__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #0d0d12;
}
.product-card__media-open {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.product-card__media-open:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -5px;
}
.product-card__media-open img {
  width: 100%;
  height: 100%;
  /* cover on a fixed square is what keeps a row of differently proportioned
     uploads looking like one set — nothing is ever stretched out of shape. */
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.product-card:hover .product-card__media-open img { transform: scale(1.07); }

.product-card__gallery-controls {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 0.7rem;
  translate: -50% 0;
  z-index: 3;
  min-height: 44px;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 40px;
  background: rgba(5, 5, 8, 0.82);
  backdrop-filter: blur(8px);
}
.product-card__gallery-controls button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.product-card__gallery-controls button:hover,
.product-card__gallery-controls button:focus-visible {
  background: var(--gold);
  color: #0a0a0a;
  outline: none;
}
.product-card__gallery-controls span {
  min-width: 2.8rem;
  color: #fff;
  text-align: center;
  font-size: 0.7rem;
  font-family: "Space Grotesk", var(--font-body);
  direction: ltr;
}

/* Keeps the square, and the click target, when a product has no photo yet. */
.product-card__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: var(--gold);
  opacity: 0.22;
}

.product-card__peek {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(10, 10, 15, 0.75);
  color: var(--gold);
  font-size: 0.7rem;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.product-card:hover .product-card__peek,
.product-card:focus-within .product-card__peek {
  opacity: 1;
  transform: scale(1);
}

.product-card__badge {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  background: rgba(214, 54, 56, 0.92);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.75rem;
  border-radius: 40px;
}
.product-card.is-out .product-card__media-open img { filter: grayscale(100%); opacity: 0.5; }

.product-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.product-card__cat {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.75;
  font-family: "Space Grotesk", var(--font-body);
}
.is-rtl .product-card__cat { letter-spacing: 0; text-transform: none; }

.product-card__title { font-size: 1.2rem; line-height: 1.3; }

/* The title is a real permalink; the image remains an explicit quick view. */
.product-card__title-link {
  display: block;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: start;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.product-card__title-link:hover { color: var(--gold); }
.product-card__title-link:focus-visible,
.product-card__details:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.product-card__desc {
  color: var(--text-dim);
  font-size: 0.9rem;
  flex: 1;
}

/* Tells the buyer there is a size or colour to pick before they open the card. */
.product-card__opts {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--text-dim);
  opacity: 0.85;
}
.product-card__opts i { color: var(--gold); font-size: 0.7rem; }

.product-card__details {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}
.product-card__details i {
  color: var(--gold);
  transition: transform var(--dur-fast) var(--ease-out);
}
.product-card__details:hover { color: var(--gold-pale); }
.product-card__details:hover i { transform: translateX(4px); }
.is-rtl .product-card__details:hover i { transform: translateX(-4px); }

.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.product-card__price {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--gold);
  font-family: "Space Grotesk", var(--font-body);
}

.add-to-cart {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.7rem 1.3rem;
  border-radius: 40px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #0a0a0a;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(199, 161, 122, 0.24);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.add-to-cart:hover:not(:disabled) {
  background: var(--gold-bright);
  color: #0a0a0a;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(199, 161, 122, 0.34);
}
.add-to-cart:focus-visible { outline: 3px solid var(--gold-pale); outline-offset: 3px; }
.add-to-cart:disabled { opacity: 0.4; cursor: not-allowed; }

.products-empty {
  text-align: center;
  color: var(--text-dim);
  padding: 3rem 0;
}

/* --------------------------------------------------------------------------
   Floating cart button
   -------------------------------------------------------------------------- */

@keyframes eyedia-cart-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}
@keyframes eyedia-cart-remove {
  0%   { transform: translateX(0) rotate(0); }
  35%  { transform: translateX(-4px) rotate(-9deg); }
  70%  { transform: translateX(3px) rotate(7deg); }
  100% { transform: translateX(0) rotate(0); }
}

.cart-fab {
  position: fixed;
  inset-inline-end: 1.5rem;
  bottom: 5.5rem;
  z-index: 950;
  min-width: 56px;
  height: 56px;
  padding: 0 1.25rem;
  border-radius: 50%;
  border: 1px solid var(--gold-30);
  background: rgba(10, 10, 15, 0.9);
  backdrop-filter: blur(10px);
  color: var(--gold);
  font-size: 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cart-fab[hidden] { display: none; }
.cart-fab:hover { background: var(--gold); color: #0a0a0a; }
.cart-fab.has-items { border-color: var(--gold); }
.cart-fab.is-pulsing { animation: eyedia-cart-pulse 0.45s var(--ease-out); }
.cart-fab.is-removing { animation: eyedia-cart-remove 0.36s var(--ease-out); }
.cart-header i.is-pulsing { animation: eyedia-cart-pulse 0.4s var(--ease-out); }
.cart-header i.is-removing { animation: eyedia-cart-remove 0.36s var(--ease-out); }
.cart-fab__label { font-size: 0.9rem; font-weight: 800; white-space: nowrap; }

.cart-count {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 20px;
  background: var(--gold);
  color: #0a0a0a;
  font-size: 0.72rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}

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

.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}

.cart-sidebar {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  z-index: 1300;
  width: min(92vw, 420px);
  height: 100dvh;
  background: #0b0b10;
  border-inline-start: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform 0.45s var(--ease-out);
}
.is-rtl .cart-sidebar { transform: translateX(-102%); }
.cart-sidebar.is-open { transform: translateX(0); }

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.cart-header h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.15rem;
}
.cart-header i { color: var(--gold); }

.close-cart {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.close-cart:hover { color: var(--gold); }

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}
.cart-empty { color: var(--text-dim); text-align: center; padding: 3rem 0; }

.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.cart-item img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
}
.cart-item__body { display: grid; gap: 0.3rem; min-width: 0; }
.cart-item__name { font-weight: 600; font-size: 0.95rem; }
.cart-item__price { color: var(--gold); font-size: 0.88rem; }

.cart-item__qty {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
}
.cart-item__qty button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--gold-30);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  line-height: 1;
  font-size: 0.9rem;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cart-item__qty button:hover { background: var(--gold); color: #0a0a0a; }
.cart-item__qty input {
  width: 46px;
  text-align: center;
  background: #16161f;
  border: 1px solid #5a5a66;
  border-radius: 8px;
  color: #fff;
  padding: 0.25rem;
  font-family: inherit;
}

.cart-item__remove {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  transition: color var(--dur-fast) var(--ease-out);
}
.cart-item__remove:hover { color: #e74c3c; }

.cart-foot {
  padding: 1.5rem;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 1rem;
}
.cart-total {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--gold);
  text-align: end;
}

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

.checkout-section {
  padding: 5rem 0;
  background: var(--bg-panel);
  border-top: 1px solid var(--line-soft);
}
.checkout-title { text-align: center; margin-bottom: 3rem; }
.checkout-title h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.checkout-title p { color: var(--text-muted); margin-top: 0.5rem; }

.checkout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 2.5rem;
  align-items: start;
}

.order-summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
}
.order-summary h3 { margin-bottom: 1.25rem; font-size: 1.2rem; }

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.95rem;
}
.summary-row__body { display: grid; gap: 0.25rem; min-width: 0; }
.summary-row__body strong { color: var(--text); }
.summary-row__options,
.summary-row__quantity { color: var(--text-dim); font-size: 0.78rem; }
.summary-row__amount {
  color: var(--gold-pale);
  white-space: nowrap;
  font-family: "Space Grotesk", var(--font-body);
  font-variant-numeric: tabular-nums;
}

.checkout-totals {
  margin: 1.25rem 0 0;
  display: grid;
  gap: 0.55rem;
}
.checkout-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text-muted);
}
.checkout-totals dt,
.checkout-totals dd { margin: 0; }
.checkout-totals dd {
  font-family: "Space Grotesk", var(--font-body);
  font-variant-numeric: tabular-nums;
}
.checkout-totals__grand {
  margin-top: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  color: var(--gold) !important;
  font-size: 1.2rem;
  font-weight: 800;
}

.coupon-form {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
}
.coupon-form__heading {
  margin-bottom: 0.7rem;
}
.coupon-form__heading label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 700;
}
.coupon-form__optional {
  display: inline-flex;
  margin-inline-start: 0.4rem;
  padding: 0.12rem 0.48rem;
  border: 1px solid var(--gold-30);
  border-radius: 999px;
  color: var(--gold-pale);
  font-size: 0.68rem;
  line-height: 1.35;
  vertical-align: middle;
}
.coupon-form__heading p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.5;
}
.coupon-form--checkout {
  margin-top: 1.25rem;
}
.coupon-form__controls { display: flex; gap: 0.6rem; }
.coupon-form__controls input {
  min-width: 0;
  flex: 1;
  min-height: 46px;
  padding: 0.75rem 1rem;
  border: 1px solid #5a5a66;
  border-radius: 40px;
  background: #1e1e2a;
  color: #fff;
  font: inherit;
  text-transform: uppercase;
}
.coupon-form__controls input:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.coupon-form__controls .btn { min-height: 46px; padding: 0.75rem 1.2rem; }
.coupon-form__status {
  min-height: 1.35em;
  margin-top: 0.55rem;
  font-size: 0.82rem;
}
.coupon-form__status.is-ok { color: #6fe098; }
.coupon-form__status.is-error { color: #ff8f8f; }

.checkout-form {
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.checkout-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.checkout-field { display: grid; align-content: start; }
.checkout-field--wide { grid-column: 1 / -1; }
.checkout-field label {
  margin: 0 0 0.4rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}
.checkout-field label span { color: var(--gold); }
.checkout-form .checkout-field input,
.checkout-form .checkout-field textarea,
.tracking-form .checkout-field input {
  margin: 0;
  border-radius: 1rem;
}
.checkout-form .checkout-field textarea { min-height: 96px; }
.checkout-form > .eyedia-form__captcha { margin-top: 1.5rem; }
.checkout-form > .btn { margin-top: 1.25rem; }

.order-success {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem);
  border: 1px solid var(--gold-30);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.order-success > i { color: #6fe098; font-size: 2.8rem; }
.order-success h3 { margin-top: 1rem; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.order-success > p { margin-top: 0.75rem; color: var(--text-muted); }
.order-success__reference {
  width: fit-content;
  margin: 1.25rem auto !important;
  padding: 0.8rem 1.1rem;
  display: grid;
  gap: 0.2rem;
  border: 1px solid var(--gold-30);
  border-radius: 0.8rem;
}
.order-success__reference span { font-size: 0.72rem; color: var(--text-dim); }
.order-success__reference strong {
  color: var(--gold);
  font-family: "Space Grotesk", var(--font-body);
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Order tracking
   -------------------------------------------------------------------------- */

.order-tracking {
  padding: 5rem 0;
  border-top: 1px solid var(--line-soft);
  background: #08080c;
}
.order-tracking__inner { max-width: 960px; }
.order-tracking__intro {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.order-tracking__intro > i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--gold-30);
  border-radius: 50%;
  color: var(--gold);
}
.order-tracking__intro h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.order-tracking__intro p { margin-top: 0.45rem; color: var(--text-muted); }
.tracking-form {
  margin-top: 1.75rem;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.tracking-form .btn { min-height: 52px; }
.tracking-form__status { grid-column: 1 / -1; margin: 0; }

.tracking-result {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--gold-30);
  border-radius: var(--radius);
  background: var(--surface);
}
.tracking-result__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.tracking-result__head > div { display: grid; gap: 0.25rem; }
.tracking-result__head span { color: var(--text-dim); font-size: 0.76rem; }
.tracking-result__head strong { color: var(--gold); font-size: 1.15rem; }
.tracking-result__meta {
  margin: 1.25rem 0 0;
  padding: 1rem 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.tracking-result__meta div { display: grid; gap: 0.25rem; }
.tracking-result__meta dt { color: var(--text-dim); font-size: 0.72rem; }
.tracking-result__meta dd { margin: 0; color: var(--text); font-weight: 700; }
.tracking-result__items { margin-top: 1.25rem; }
.tracking-result__items h3 { margin-bottom: 0.5rem; font-size: 1rem; }
.tracking-item {
  padding: 0.75rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.tracking-item > div { display: grid; gap: 0.2rem; }
.tracking-item span { color: var(--text-dim); font-size: 0.8rem; }

/* --------------------------------------------------------------------------
   Quick-view modal
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.modal.is-open { opacity: 1; }

.modal-content {
  position: relative;
  width: min(100%, 520px);
  /* vh resolves against iOS Safari's large viewport (toolbars retracted), so
     88vh can exceed the visible area and push the close button off-screen.
     A percentage resolves against the fixed, inset:0 grid area instead. */
  max-height: min(88dvh, 100%);
  overflow-y: auto;
  background: #0d0d13;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  display: grid;
  gap: 0.9rem;
  transform: translateY(24px) scale(0.97);
  transition: transform var(--dur) var(--ease-out);
}
.modal.is-open .modal-content { transform: translateY(0) scale(1); }

.modal-close {
  position: absolute;
  top: 0.75rem;
  inset-inline-end: 1rem;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.modal-close:hover { color: var(--gold); }

/* Side by side once there is room for it: the picture stays visible while the
   buyer works down the choices, instead of scrolling away above them. */
.modal-content--product {
  width: min(100%, 840px);
  padding: 0;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch;
  overflow: hidden;
}

.modal-media {
  position: relative;
  background: #08080c;
  min-height: 260px;
  display: flex;
  flex-direction: column;
}
.modal-media:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -4px;
}
.modal-gallery__stage {
  position: relative;
  flex: 1;
  min-height: 260px;
}
/*
 * Absolute, so the picture takes its height from the details column beside it
 * rather than the other way round. Sizing it intrinsically makes the two fight:
 * the row height depends on the image and the image height depends on the row.
 */
.modal-product-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.modal-gallery__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 2.5rem;
  opacity: 0.25;
}
.modal-gallery__placeholder[hidden] { display: none; }
.modal-gallery__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(5, 5, 8, 0.76);
  color: #fff;
  cursor: pointer;
}
.modal-gallery__nav[hidden] { display: none; }
.modal-gallery__nav--prev { inset-inline-start: 0.8rem; }
.modal-gallery__nav--next { inset-inline-end: 0.8rem; }
.modal-gallery__nav:hover,
.modal-gallery__nav:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #0a0a0a;
  outline: none;
}
.modal-gallery__status {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 0.75rem;
  translate: -50% 0;
  z-index: 2;
  min-width: 3.2rem;
  padding: 0.35rem 0.65rem;
  border-radius: 40px;
  background: rgba(5, 5, 8, 0.78);
  color: #fff;
  text-align: center;
  font-size: 0.72rem;
  direction: ltr;
}
.modal-gallery__status:empty { display: none; }
.modal-gallery__thumbs {
  padding: 0.65rem;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-top: 1px solid var(--line-soft);
}
.modal-gallery__thumbs[hidden] { display: none; }
.modal-gallery__thumbs [role="listitem"] { flex: 0 0 auto; }
.modal-gallery__thumbs button {
  width: 58px;
  height: 58px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0.65rem;
  overflow: hidden;
  background: #12121a;
  cursor: pointer;
}
.modal-gallery__thumbs button.is-active { border-color: var(--gold); }
.modal-gallery__thumbs button:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 2px; }
.modal-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-media .product-card__badge { inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 1; }

/* Keeps the first lines clear of the close button in the corner. */
.modal-content--product .modal-cat,
.modal-content--product h2 { padding-inline-end: 2.2rem; }

.modal-content--product .modal-close {
  z-index: 3;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(8, 8, 12, 0.6);
}

.modal-body {
  padding: 2.25rem 2rem 2rem;
  display: grid;
  gap: 0.8rem;
  align-content: start;
  /* The picture column is fixed; the details scroll if the options run long. */
  overflow-y: auto;
  max-height: min(86dvh, 100%);
}

.modal-cat {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: "Space Grotesk", var(--font-body);
}
.is-rtl .modal-cat { letter-spacing: 0; text-transform: none; }

.modal-content h2 { font-size: 1.5rem; line-height: 1.25; }
.modal-price {
  color: var(--gold);
  font-size: 1.5rem;
  font-weight: 800;
  font-family: "Space Grotesk", var(--font-body);
}
.modal-content p { color: var(--text-muted); }
.modal-desc { line-height: 1.65; }
.modal-sku {
  font-size: 0.78rem;
  color: var(--text-dim);
  opacity: 0.8;
}

.modal-product-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold-pale);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}
.modal-product-link i { color: var(--gold); transition: transform var(--dur-fast) var(--ease-out); }
.modal-product-link:hover i { transform: translateX(4px); }
.is-rtl .modal-product-link:hover i { transform: translateX(-4px); }
.modal-product-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Choosable options
   -------------------------------------------------------------------------- */

.modal-options { display: grid; gap: 1.1rem; margin-top: 0.4rem; }

.opt-group { border: 0; padding: 0; margin: 0; }
.opt-group legend {
  padding: 0;
  margin-bottom: 0.55rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.is-rtl .opt-group legend { letter-spacing: 0; text-transform: none; }

.opt-values { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.opt-chip { position: relative; cursor: pointer; }
/* The radio stays in the accessibility tree and keeps keyboard behaviour —
   it is the visible chip that is restyled, not a div pretending to be one. */
.opt-chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.opt-chip span {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 40px;
  border: 1px solid var(--gold-20);
  background: rgba(20, 20, 28, 0.6);
  color: var(--text-muted);
  font-size: 0.87rem;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.opt-chip:hover span { border-color: var(--gold); color: var(--gold); }
.opt-chip input:checked + span {
  background: var(--gold);
  border-color: var(--gold);
  color: #0a0a0a;
  font-weight: 700;
}
.opt-chip input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

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

.modal-qty {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.4rem;
}
.modal-qty__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.is-rtl .modal-qty__label { letter-spacing: 0; text-transform: none; }

.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem;
  border: 1px solid var(--gold-20);
  border-radius: 40px;
}
.qty-stepper button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--gold);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.qty-stepper button:hover { background: var(--gold); color: #0a0a0a; }
.qty-stepper input {
  width: 46px;
  text-align: center;
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  /* The stepper buttons replace the native spinners. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty-stepper input:focus { outline: none; }

.cart-item__opts {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.checkout-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.checkout-note i { color: var(--gold); margin-top: 0.2rem; }

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

@media (max-width: 1080px) {
  .shop-advanced__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .shop-price-filter { grid-column: 1 / -1; }
  .shop-advanced__body .shop-toggle,
  .shop-filter-reset { justify-self: start; }
}

@media (max-width: 780px) {
  /* Below this the two columns would each be too narrow to read, so the
     picture goes back on top of the details. */
  .modal-content--product {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 520px);
    max-height: min(88dvh, 100%);
    overflow-y: auto;
  }
  .modal-media { min-height: 0; }
  .modal-gallery__stage { flex: 0 0 auto; min-height: 0; aspect-ratio: 1 / 1; }
  .modal-body { max-height: none; overflow: visible; padding: 1.75rem 1.5rem 1.5rem; }

  .checkout-form__grid { grid-template-columns: minmax(0, 1fr); }
  .checkout-field--wide { grid-column: auto; }
  .tracking-form { grid-template-columns: minmax(0, 1fr); }
  .tracking-form__status { grid-column: auto; }
  .tracking-result__meta { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1.25rem; }
  .product-card__body { padding: 1.1rem; }
  .product-card__foot { flex-direction: column; align-items: stretch; }
  .add-to-cart { justify-content: center; }
  .cart-fab { inset-inline-end: 1rem; bottom: 5rem; }

  /* Tightened hard: this bar is sticky, and on a phone every pixel it keeps
     is a pixel of catalogue the visitor cannot see. */
  .shop-toolbar { padding: 0.7rem 0 0.55rem; }
  .shop-toolbar__row { gap: 0.6rem; }
  .shop-search input { padding: 0.68rem 2.4rem; font-size: 0.9rem; }
  .shop-toolbar__filters { width: 100%; gap: 0.6rem; }
  .shop-sort-field { width: 100%; }
  .shop-select { flex: 1 1 auto; padding: 0.6rem 0.9rem; }
  .shop-toggle { font-size: 0.85rem; }
  .shop-result-count { margin-top: 0.35rem; font-size: 0.78rem; }
  .category-btn { padding: 0.45rem 1.05rem; font-size: 0.85rem; }
  .category-tabs {
    /* One scrolling row rather than five wrapped lines eating the screen. */
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    justify-content: flex-start;
    scrollbar-width: none;
    margin-top: 0.6rem;
    padding-bottom: 0.2rem;
  }
  .category-tabs::-webkit-scrollbar { display: none; }
  .category-btn { flex: 0 0 auto; }
  .cat-block__head { margin-bottom: 1.1rem; }
  .shop-catalogue { gap: 2.5rem; }

  .shop-advanced__body {
    grid-template-columns: minmax(0, 1fr);
    max-height: min(52dvh, 430px);
    overflow-y: auto;
  }
  .shop-price-filter { grid-column: auto; }
  .shop-advanced__body .shop-toggle,
  .shop-filter-reset { justify-self: stretch; justify-content: center; }
  .checkout-form,
  .order-summary { padding: 1.25rem; }
  .coupon-form__controls { flex-direction: column; }
  .tracking-result__head,
  .tracking-item { align-items: flex-start; flex-direction: column; }
  .cart-fab { max-width: calc(100vw - 2rem); bottom: calc(5rem + env(safe-area-inset-bottom)); }

  /* Checkout is a focused task on phones. Stop the catalogue toolbar from
     sitting over its heading, and remove floating controls that otherwise
     cover the summary, coupon and form fields. Visibility also keeps the
     inactive controls out of the accessibility tree. */
  body.shop-checkout-active .shop-toolbar {
    position: static;
    top: auto;
  }
  body.shop-checkout-active .checkout-section {
    scroll-margin-top: calc(var(--header-h) + 1rem);
  }
  body.shop-checkout-active .cart-fab,
  body.shop-checkout-active .to-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-fab.is-pulsing,
  .cart-fab.is-removing,
  .cart-header i.is-pulsing,
  .cart-header i.is-removing { animation: none; }
  .product-card__media-open img,
  .product-card__details i,
  .modal-product-link i { transition: none; }
}