/* ============================================================
   945 CLUB — COMPONENT STYLES & LUXURY DESIGN SYSTEM
   ============================================================ */

/* Announcement Promo Bar */
.promo {
  background: var(--grey);
  color: var(--ink2);
  font-size: 12px;
  text-align: center;
  padding: 10px 44px;
  position: relative;
  border-bottom: 1px solid var(--hair);
}
.promo b { color: var(--ink); font-weight: 600; }
.promo a { color: var(--blue); text-decoration: none; }
.promo a:hover { text-decoration: underline; }
.promo .x {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--ink2);
  padding: 4px 8px;
  cursor: pointer;
  transition: opacity .2s;
}
.promo .x:hover { opacity: .7; }
.promo.hide { display: none; }

/* Sticky Navbar with Safe Area Support & Directional Scroll Slide Transition */
.navbar {
  position: sticky;
  top: 0;
  z-index: 900;
  height: calc(60px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(248, 238, 219, 0.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}
.navbar.nav-hidden {
  transform: translateY(-100%);
}
.navbar.stuck {
  border-bottom-color: rgba(0, 0, 0, 0.12);
  background: rgba(248, 238, 219, 0.96);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.navin {
  max-width: 100%;
  width: 100%;
  margin: 0;
  height: 100%;
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
}
.logo-main {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--ink);
}
.logo-sub {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .35em;
  color: var(--ink2);
  text-transform: uppercase;
  margin-top: 1px;
}
.nlinks {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin: 0 16px;
}
.nlink {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  padding: 0 14px;
  height: 60px;
  display: flex;
  align-items: center;
  color: #1C1D3D;
  opacity: 0.88;
  transition: opacity .15s, color .15s;
  white-space: nowrap;
  border-bottom: none;
  text-decoration: none;
}
.nlink:hover, .nlink.active {
  opacity: 1;
  color: #000000;
  font-weight: 700;
}
.nlink-select {
  color: #761B2C !important;
  opacity: 1;
  font-weight: 700;
}
.nlink-select:hover, .nlink-select.active {
  color: #8c5d3a !important;
  opacity: 1;
}
.msheet-select-text {
  color: #761B2C !important;
  font-weight: 700;
}
.nicons {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}
.nav-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F3E6CC;
  border-radius: 100px;
  height: 38px;
  padding: 0 16px;
  color: #5E5870;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s, border-color .2s, width .25s ease;
  width: 170px;
  user-select: none;
  margin-right: 4px;
}
.nav-search-bar:hover {
  background: #E6D5B5;
  color: #1C1D3D;
}
.nav-search-bar svg {
  color: #1C1D3D;
  flex-shrink: 0;
}
.nav-search-bar .search-placeholder {
  font-size: 14px;
  color: #5E5870;
  letter-spacing: -0.01em;
}
.nicon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 1;
  cursor: pointer;
  border: none;
  background: none;
  color: #1C1D3D;
  transition: background 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s ease;
}
.nicon:hover {
  background: #F3E6CC;
  transform: scale(1.05);
}
.nicon:active {
  transform: scale(0.95);
}
.nicon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.1;
  transition: transform 0.15s ease;
}
#accountBtn {
  width: auto;
  min-width: 44px;
  height: 44px;
  padding: 0 4px;
  border-radius: 980px;
}
.user-avatar-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F3E6CC;
  padding: 7px 16px;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 600;
  color: #1C1D3D;
  white-space: nowrap;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.user-avatar-tag:hover {
  background: #E6D5B5;
  border-color: rgba(0, 0, 0, 0.12);
}
.user-avatar-tag svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.2 !important;
}
.header-user-name {
  font-size: 14px;
  font-weight: 600;
  color: #1C1D3D;
  letter-spacing: -0.01em;
}
.badge {
  position: absolute;
  top: 1px;
  right: 1px;
  background: #1C1D3D;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 980px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}
.burger {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: none;
  color: #1C1D3D;
  border-radius: 50%;
}
.burger:hover {
  background: #F3E6CC;
}

/* Apple-Style Mega Menu (Always sits cleanly underneath navbar) */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 890;
  background: #F8EEDB;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease);
  box-shadow: 0 24px 48px rgba(0,0,0,0.08);
}
.mega.open { max-height: 480px; }
.megain {
  max-width: 1024px;
  margin: 0 auto;
  padding: 28px 24px 34px;
  display: flex;
  gap: 48px;
}
.mega-col-primary {
  flex: 0 0 240px;
}
.mega-col-secondary {
  flex: 0 0 190px;
}
.mega-eyebrow {
  display: block;
  font-size: 11px;
  color: #86868b;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.mega-list-primary {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mega-list-primary li a {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  transition: opacity .15s, color .15s;
  display: inline-block;
}
.mega-list-primary li a:hover {
  color: #383C8C;
}
.mega-list-secondary {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mega-list-secondary li a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: #5E5870;
  text-decoration: none;
  padding: 2px 0;
  transition: opacity .15s, color .15s;
  display: inline-block;
}
.mega-list-secondary li a:hover {
  color: #1C1D3D;
}
/* Menus drawn from the catalogue (js/modules/menuModel.js): five columns, each link
   with the number of cards it opens. */
.megain.is-wide { max-width: 1200px; gap: 32px; }
.megain.is-wide .mega-col-primary { flex: 0 0 170px; }
.megain.is-wide .mega-col-secondary { flex: 1 1 0; min-width: 0; }
.mega-count {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink2);
  opacity: .8;
}

/* Fullscreen Search Overlay */
/* Fullscreen Advanced Search Overlay */
/* ================= APPLE-STYLE SLIDE-DOWN SEARCH OVERLAY & HALF-BLUR ================= */
/* The blur is part of the transition, in both directions. It used to be switched off the
   instant the overlay began to close (backdrop-filter: none), so the page behind it
   snapped from frosted to sharp and the dim faded over the top. Closed it is blur(0), not
   none, so nothing is drawn; none cannot be eased. */
.searchov {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Closing: a little quicker than opening, and it eases out rather than lurching. */
  transition: opacity 0.24s ease, visibility 0.24s ease,
    backdrop-filter 0.24s ease, -webkit-backdrop-filter 0.24s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.searchov.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: opacity 0.34s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.34s cubic-bezier(0.16, 1, 0.3, 1),
    backdrop-filter 0.34s cubic-bezier(0.16, 1, 0.3, 1), -webkit-backdrop-filter 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The drawer drops in a short way while it fades, instead of sweeping down from above the
   screen: a tall results panel used to cross hundreds of pixels in a third of a second. */
.searchbox {
  background: #F8EEDB;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 34px 0 36px;
  opacity: 0;
  transform: translateY(-26px);
  transition: transform 0.24s cubic-bezier(0.4, 0, 1, 1), opacity 0.2s ease;
  box-sizing: border-box;
}

.searchov.open .searchbox {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.46s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* What is inside arrives a beat after the drawer, one part at a time. The animation starts
   whenever .open is added, so it plays on every open, and again whenever the default
   suggestions come back after the box is cleared. */
@keyframes searchRise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.searchov.open .search-input-wrapper {
  animation: searchRise 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.searchov.open #searchQuickLinks .search-sec-wrap {
  animation: searchRise 0.44s cubic-bezier(0.16, 1, 0.3, 1) 0.11s both;
}
.searchov.open #searchQuickLinks .search-sec-wrap + .search-sec-wrap {
  animation-delay: 0.17s;
}

.searchbox-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* Search Input Bar (Clean, No Underline) */
.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 0;
  border-bottom: none;
}

.search-input-icon {
  color: #86868b;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.search-input-wrapper input {
  flex: 1;
  /* A flex item will not shrink below its content: an input's is its default width (about 200px
     at this size), which squashed the clear button and pushed Cancel off a phone's edge. */
  min-width: 0;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.015em;
  border: none;
  outline: none;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #1C1D3D;
  padding: 0;
}

.search-input-wrapper input::placeholder {
  color: #86868b;
  font-weight: 400;
}

/* One cross. A type="search" field draws the browser's own clear button (a bold blue X in
   Chrome and Edge, shown while the pointer is over the field) beside the round one the page
   draws, so two crosses did the same job. The page's is the one that is styled and tested. */
.search-input-wrapper input[type="search"]::-webkit-search-cancel-button,
.search-input-wrapper input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.search-input-wrapper input[type="search"]::-ms-clear {
  display: none;
}

.search-clear-btn {
  flex-shrink: 0;
  background: #F3E6CC;
  border: 1px solid rgba(0, 0, 0, 0.06);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  cursor: pointer;
  color: #737373;
  transition: all 0.15s ease;
}
.search-clear-btn:hover {
  background: #e5e5e7;
  color: #1C1D3D;
}

.search-cancel-btn {
  flex-shrink: 0;
  white-space: nowrap;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 400;
  color: #383C8C;
  padding: 4px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
  font-family: inherit;
}
.search-cancel-btn:hover {
  opacity: 0.7;
}
/* Parsed Tags */
.search-parsed-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.search-parsed-pill {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--surface-secondary);
  color: var(--ink);
  border: 1px solid var(--hair);
  padding: 3px 10px;
  border-radius: 980px;
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Live suggestions under the box, and what the engine did about a query. */
.search-suggest {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
}
.search-suggest-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: none;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.search-suggest-item:hover, .search-suggest-item:focus-visible { background: var(--surface-secondary); outline: none; }
.search-suggest-item:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.search-suggest-hint { flex: none; font-size: 12px; color: var(--ink2); }
.search-note { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink2); }
/* The same note on the catalogue page, under its title. */
.plp-search-note { margin: -6px 0 16px; font-size: 13.5px; line-height: 1.45; color: var(--ink2); }
.search-empty { grid-column: 1 / -1; padding: 28px 0 8px; text-align: center; color: var(--ink2); }
.search-empty-icon { margin-bottom: 8px; font-size: 28px; }
.search-empty-title { margin: 0 0 4px; font-weight: 600; color: var(--ink); }
.search-empty-sub { margin: 0 0 12px; font-size: 13px; }
.search-empty .search-suggest { align-items: center; margin-top: 4px; }
.search-empty .search-suggest-item { width: auto; justify-content: center; border: 1px solid var(--hair); }

/* Sections */
.search-sec-wrap {
  margin-top: 22px;
}
.search-sec-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.search-sec-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink2, #5E5870);
  letter-spacing: 0;
  text-transform: none;
}
.btn-clear-recent {
  background: none;
  border: none;
  font-size: 11.5px;
  font-weight: 400;
  color: #383C8C;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.15s ease;
}
.btn-clear-recent:hover {
  opacity: 0.75;
  text-decoration: underline;
}

/* Apple-Style Quick Links Vertical List */
.search-quick-links-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-quick-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5.5px 0;
  font-size: 13px;
  font-weight: 500;
  color: #1C1D3D;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}
.search-arrow-icon {
  color: #86868b;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease, color 0.15s ease;
}
.search-quick-link:hover {
  color: #383C8C;
}
.search-quick-link:hover .search-arrow-icon {
  color: #383C8C;
  transform: translateX(2px);
}
.search-quick-text {
  flex: 1;
}
.search-recent-remove {
  color: #86868b;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease;
}
.search-recent-remove:hover {
  color: #ff3b30;
  background: rgba(255, 59, 48, 0.1);
}

/* Matching Products Grid */
.search-products-grid {
  display: grid;
  /* minmax(0, ...): a column may be narrower than its longest name. With plain 1fr the names
     held the columns open and the third one fell off the panel. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}
.search-product-hit {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--grey);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--hair);
  cursor: pointer;
  transition: transform .2s, border-color .2s;
  text-decoration: none;
  color: inherit;
}
.search-product-hit:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.search-hit-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}
.search-hit-info {
  flex: 1;
  min-width: 0;
}
.search-hit-brand {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink2);
}
.search-hit-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.search-hit-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.search-hit-orig {
  font-size: 11px;
  color: var(--ink2);
  text-decoration: line-through;
  margin-left: 4px;
  font-weight: 500;
}

/* ============================================================
   MOBILE MENU DRAWER (QUIET LUXURY & REFINED MINIMALISM)
   ============================================================ */
.msheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  z-index: 895;
  background: #F8EEDB;
  padding: 18px 20px 48px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y pinch-zoom;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.28s;
}
.msheet.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.msheet-inner {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Member Auth Card (Refined Apple VIP Card) */
.msheet-auth-card {
  background: #fafafc;
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.msheet-auth-card:active {
  background: #EFDFC0;
}
.msheet-auth-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.msheet-avatar-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #1C1D3D;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.msheet-avatar-circle svg {
  width: 17px;
  height: 17px;
}
.msheet-auth-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.msheet-auth-greeting {
  font-size: 14px;
  font-weight: 700;
  color: #1C1D3D;
  font-family: 'Outfit', -apple-system, sans-serif;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msheet-auth-sub {
  font-size: 11.5px;
  color: #86868b;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msheet-auth-cta {
  background: #1C1D3D;
  color: #ffffff;
  border: none;
  border-radius: 980px;
  padding: 7px 15px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.msheet-auth-cta:active {
  transform: scale(0.96);
  background: #2b2b2b;
}

/* Primary Navigation Hub (Clean Editorial Accordion System) */
.msheet-nav-section {
  display: flex;
  flex-direction: column;
}
.msheet-discovery-bar {
  display: flex;
  width: 100%;
  gap: 8px;
  margin-bottom: 14px;
  box-sizing: border-box;
}
.discovery-strip-btn {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 8px;
  background: var(--plate, #F3E6CC);
  border: 1px solid var(--hair, rgba(0, 0, 0, 0.06));
  border-radius: 12px;
  font-family: 'Outfit', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.discovery-strip-btn:active {
  transform: scale(0.97);
  background: var(--surface-tertiary, #ebecee);
}
.msheet-links-list {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  box-shadow: none;
}
.msheet-acc-item {
  border-bottom: 1px solid var(--hair, rgba(0, 0, 0, 0.06));
}
.msheet-acc-item:last-child {
  border-bottom: none;
}
.msheet-acc-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}
.msheet-acc-header:active {
  color: var(--ink);
}
.msheet-item-text {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-family: 'Outfit', -apple-system, sans-serif;
  color: var(--ink);
  line-height: 1.2;
}
.msheet-chevron {
  color: var(--ink3, #8e8e93);
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}
.msheet-acc-item.open .msheet-chevron {
  transform: rotate(90deg);
  color: var(--ink);
}

/* Sale Header Styling */
.msheet-sale-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.msheet-sale-item .msheet-item-text {
  color: #ff3b30;
}
.msheet-badge-red {
  background: rgba(255, 59, 48, 0.08);
  color: #ff3b30;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 980px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.msheet-select-item .msheet-item-text {
  font-weight: 700;
  color: var(--ink);
}
.msheet-badge-gold {
  background: rgba(212, 175, 55, 0.12);
  color: #b8860b;
  border: 1px solid rgba(212, 175, 55, 0.28);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 980px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-theme="dark"] .msheet-badge-gold,
html.dark .msheet-badge-gold,
body.dark .msheet-badge-gold {
  background: rgba(230, 200, 110, 0.16);
  color: #e6c86e;
  border-color: rgba(230, 200, 110, 0.35);
}

/* Submenu Accordion Panel (Silky Grid-Template-Rows Expand) */
.msheet-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
  overflow: hidden !important;
  visibility: hidden;
}
.msheet-acc-item:not(.open) .msheet-submenu {
  grid-template-rows: 0fr !important;
  overflow: hidden !important;
  visibility: hidden !important;
  max-height: 0 !important;
  pointer-events: none !important;
}
.msheet-acc-item.open .msheet-submenu {
  grid-template-rows: 1fr;
  visibility: visible;
  overflow: visible;
}
.msheet-submenu-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 4px 0 14px;
  border-left: 2px solid transparent;
  margin-left: 6px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  transition: padding 0.28s cubic-bezier(0.16, 1, 0.3, 1), margin-bottom 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s;
}
.msheet-acc-item.open .msheet-submenu-inner {
  padding: 4px 4px 14px 14px;
  border-left-color: rgba(0, 0, 0, 0.08);
  margin-bottom: 6px;
}
.dark .msheet-acc-item.open .msheet-submenu-inner {
  border-left-color: rgba(255, 255, 255, 0.12);
}
.msheet-sub-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 9px 4px;
  text-decoration: none;
  color: var(--ink2);
  font-family: 'Outfit', -apple-system, sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.msheet-sub-link:active {
  color: var(--ink);
  transform: translateX(4px);
}
.msheet-sub-link.is-primary {
  font-weight: 700;
  color: var(--ink);
  font-size: 16px;
}
.msheet-sub-arrow {
  color: #8e8e93;
  font-family: inherit;
  font-weight: 500;
  margin-right: 8px;
  display: inline-block;
  transition: transform 0.15s ease, color 0.15s ease;
}
.msheet-sub-link:active .msheet-sub-arrow {
  transform: translateX(3px);
  color: #1C1D3D;
}
.msheet-sub-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8e8e93;
  padding: 12px 4px 4px;
}

/* Quick Utilities Grid (Refined Dual Minimal Cards) */
.msheet-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 4px;
}
.msheet-tool-card {
  background: var(--plate, #fafafc);
  border: 1px solid var(--hair, rgba(0, 0, 0, 0.06));
  border-radius: 14px;
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}
.msheet-tool-card:active {
  background: var(--surface-tertiary, #EFDFC0);
  transform: scale(0.98);
}
.msheet-tool-card svg {
  color: #383C8C;
  flex-shrink: 0;
}
.msheet-tool-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.msheet-tool-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  font-family: 'Outfit', -apple-system, sans-serif;
  line-height: 1.2;
}
.msheet-tool-sub {
  font-size: 11px;
  color: var(--ink2);
  margin-top: 2px;
}

/* Footer Trust Guarantee */
.msheet-footer-info {
  text-align: center;
  padding: 12px 12px 0;
  font-size: 10px;
  font-weight: 600;
  color: #761B2C;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.6;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* ============================================================
   CINEMATIC FULL-SCREEN VIDEO HERO SECTION
   ============================================================ */
.hero-cinematic {
  position: relative;
  width: 100%;
  min-height: calc(100vh - var(--nav) - 38px);
  max-height: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, #F8EEDB 0%, #ebe6d8 100%);
  overflow: hidden;
  padding: 40px 24px 60px;
}

.hero-cinematic.hero-fullscreen-video {
  min-height: calc(100vh - var(--nav));
  height: 88vh;
  max-height: 1000px;
  background: #000000;
  padding: 40px 24px 80px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}

@media (min-height: 800px) {
  .hero-cinematic.hero-fullscreen-video {
    height: calc(100vh - var(--nav));
  }
}

.hero-video-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  contain: strict;
}

.hero-video-element {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate3d(-50%, -50%, 0);
  -webkit-transform: translate3d(-50%, -50%, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  object-fit: cover;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 0.6s ease-in-out;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.1) 35%,
    rgba(0, 0, 0, 0.3) 65%,
    rgba(0, 0, 0, 0.72) 100%
  );
  z-index: 2;
  pointer-events: none;
}

.hero-fullscreen-video .hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.hero-fullscreen-video .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 6px 18px;
  border-radius: 980px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.hero-fullscreen-video .hero-title {
  font-size: clamp(44px, 8.5vw, 98px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 0.94;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 14px;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.9);
}

.hero-fullscreen-video .hero-subtitle {
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 500;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, 0.94);
  max-width: 640px;
  margin: 0 auto 26px;
  line-height: 1.4;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.hero-fullscreen-video .hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.hero-fullscreen-video .hero-pill-primary {
  background: #ffffff;
  color: #000000;
  padding: 13px 32px;
  border-radius: 980px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  pointer-events: auto;
}

.hero-fullscreen-video .hero-pill-primary:hover {
  background: #F3E6CC;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 40px rgba(255, 255, 255, 0.3);
}

.hero-pill-watch {
  background: #ffffff;
  color: #000000;
  padding: 13px 26px;
  border-radius: 980px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.hero-pill-watch:hover {
  background: #F3E6CC;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 40px rgba(255, 255, 255, 0.3);
}

/* Bottom Center Carousel Dots */
.hero-dots-nav {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
  pointer-events: auto;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-dot:hover {
  background: rgba(255, 255, 255, 0.85);
}

.hero-dot.active {
  background: #ffffff;
  width: 22px;
  border-radius: 11px;
}

/* Bottom Right Controls */
.hero-controls-bar {
  position: absolute;
  bottom: 22px;
  right: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
  pointer-events: auto;
}

.hero-circle-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: #1C1D3D;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-circle-btn:hover {
  background: #ffffff;
  transform: scale(1.08);
}

@media (max-width: 768px) {
  .hero-controls-bar {
    right: 16px;
    bottom: 16px;
  }
  .hero-dots-nav {
    bottom: 20px;
  }
  .hero-fullscreen-video .hero-eyebrow {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(18, 18, 18, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.25);
  }
  .hero-circle-btn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.95);
  }
}

/* ============================================================
   SHOP YOUR WAY / EDITORIAL ENTRY GRID
   ============================================================ */
.shop-your-way-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.shop-card {
  position: relative;
  height: 380px;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  background: var(--ink);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.shop-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.shop-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease), filter .3s;
}
.shop-card:hover .shop-card-img {
  transform: scale(1.08);
}
.shop-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}
.shop-card-content {
  position: relative;
  z-index: 2;
}
.shop-card-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  display: block;
  margin-bottom: 4px;
}
.shop-card-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 8px;
}
.shop-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  opacity: 0.9;
}
.shop-card:hover .shop-card-btn {
  text-decoration: underline;
}

/* ============================================================
   SPOTLIGHT INTERACTIVE SHOWROOM & RAIL
   ============================================================ */
.spotlight-pills-wrap {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 24px;
  scrollbar-width: none;
}
.spotlight-pills-wrap::-webkit-scrollbar { display: none; }
.spotlight-pill {
  padding: 9px 20px;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 600;
  background: var(--grey);
  color: var(--ink);
  border: 1px solid var(--hair);
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}
.spotlight-pill.active, .spotlight-pill:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.spotlight-rail-wrap {
  overflow-x: auto;
  padding: 12px 0 24px;
  scrollbar-width: none;
}
.spotlight-rail-wrap::-webkit-scrollbar { display: none; }
.spotlight-rail {
  display: flex;
  gap: 20px;
  min-width: 100%;
}
.spotlight-card {
  flex: 0 0 320px;
  background: #F8EEDB;
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.spotlight-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 44px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.15);
}
.spotlight-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.spotlight-card-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
}
.spotlight-card-brand {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--ink2);
}
.spotlight-card-img-wrap {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 18px 0;
  overflow: hidden;
}
.spotlight-card-img {
  max-width: 90%;
  max-height: 160px;
  object-fit: contain;
  transition: transform .4s var(--ease);
}
.spotlight-card:hover .spotlight-card-img {
  transform: scale(1.1) rotate(-3deg);
}
.spotlight-card-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 4px;
}
.spotlight-card-sub {
  font-size: 13px;
  color: var(--ink2);
  margin-bottom: 12px;
}
.spotlight-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--grey);
  padding-top: 12px;
}
.spotlight-card-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

/* ============================================================
   BEYOND THE SHOE: APPAREL SHOWCASE (LUXURY EDITORIAL)
   ============================================================ */
#apparel.apparel-editorial-sec,
#apparel {
  background: #F8EEDB;
  padding: 68px 0 84px;
}
#apparel .wrap {
  max-width: 1260px;
  width: 100%;
  padding: 0 clamp(16px, 2.4vw, 36px);
}
.apparel-sechead {
  margin-bottom: 24px;
}
.apparel-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.apparel-header-titles {
  display: flex;
  flex-direction: column;
}
.apparel-eyebrow {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #761B2C;
  margin: 0 0 6px 0;
}
.apparel-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(30px, 3.8vw, 44px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: #1a1917;
  margin: 0;
}
.apparel-amp {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #761B2C;
  margin: 0 3px;
}
.apparel-view-all {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #383C8C;
  text-decoration: none;
  border-bottom: 1.5px solid #761B2C;
  padding-bottom: 3px;
  display: inline-block;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s, opacity 0.2s;
}
.apparel-view-all:hover {
  color: #761B2C;
  border-color: #761B2C;
}
.apparel-header-rule {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}

.apparel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.apparel-card {
  position: relative;
  aspect-ratio: 1.35 / 1;
  min-height: 155px;
  max-height: 380px;
  border-radius: 4px;
  overflow: hidden;
  background: #19191c;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.apparel-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
  border-color: rgba(197, 160, 89, 0.5);
}

.apparel-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform .65s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.apparel-card:hover .apparel-card-img {
  transform: scale(1.04);
}

/* Individual card framing for optimal garment visibility */
.apparel-card.app-tshirts .apparel-card-img { object-position: center 20%; }
.apparel-card.app-hoodies .apparel-card-img { object-position: center 12%; }
.apparel-card.app-jackets .apparel-card-img { object-position: center 12%; }
.apparel-card.app-hoodies-jackets .apparel-card-img { object-position: center 12%; }
.apparel-card.app-shorts .apparel-card-img  { object-position: center 32%; }
.apparel-card.app-pants .apparel-card-img   { object-position: center 24%; }
.apparel-card.app-bras .apparel-card-img    { object-position: center 16%; }
.apparel-card.app-accessories .apparel-card-img { object-position: center 25%; }

.apparel-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14, 15, 18, 0.02) 0%,
    rgba(14, 15, 18, 0.12) 35%,
    rgba(14, 15, 18, 0.58) 72%,
    rgba(14, 15, 18, 0.90) 100%
  );
  pointer-events: none;
  z-index: 1;
  transition: background .35s var(--ease);
}
.apparel-card:hover .apparel-card-overlay {
  background: linear-gradient(
    180deg,
    rgba(14, 15, 18, 0.02) 0%,
    rgba(14, 15, 18, 0.16) 35%,
    rgba(14, 15, 18, 0.68) 70%,
    rgba(14, 15, 18, 0.94) 100%
  );
}
.apparel-card-content {
  position: relative;
  z-index: 4;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: 100%;
  padding: 0 4px 2px 4px;
}
.apparel-card-tag {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  display: block;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  line-height: 1.2;
}
.apparel-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.apparel-card-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
}
.apparel-card-arrow {
  color: #F2E0BE;
  flex-shrink: 0;
  transition: transform 0.25s ease, color 0.25s ease;
}
.apparel-card:hover .apparel-card-arrow {
  transform: translateX(4px);
  color: #F8EEDB;
}

/* Sections */
.sec { padding: 76px 0; }
.sec.tight { padding: 50px 0; }
.sec.grey { background: #F8EEDB; }
.sechead { margin-bottom: 32px; }
.sechead .h2 { margin-bottom: 6px; }
.sechead .row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* Luxury Section Kicker Badges */
.sechead-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1C1D3D;
  background: #f4f4f7;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.sechead-kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #383C8C;
  flex-shrink: 0;
}
.sechead-kicker-trending .sechead-kicker-dot {
  background: #10b981;
  box-shadow: 0 0 0 2.5px rgba(16, 185, 129, 0.22);
}

/* Luxury Section Action Links & Circular Arrow Controls */
.sechead-action-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sechead-action-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: #1C1D3D;
  text-decoration: none;
  letter-spacing: -0.01em;
  padding: 8px 18px;
  border-radius: 980px;
  background: #F3E6CC;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sechead-action-link:hover {
  background: #1C1D3D;
  color: #ffffff;
  border-color: #1C1D3D;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.sechead-action-link svg {
  transition: transform 0.2s ease;
}
.sechead-action-link:hover svg {
  transform: translateX(3px);
}
.arrows {
  display: flex;
  align-items: center;
  gap: 8px;
}
.arw {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #F8EEDB;
  color: #1C1D3D;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.arw:hover {
  background: #1C1D3D;
  color: #ffffff;
  border-color: #1C1D3D;
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.arw:active {
  transform: scale(0.96);
}

/* Matching Container for Trending (reduced by 30% for refined card sizing) */
#trending .wrap {
  max-width: 1260px;
  width: 100%;
  padding: 0 clamp(16px, 2.4vw, 36px);
}
@media (max-width: 768px) {
  #trending .wrap {
    padding: 0 14px;
  }
}
@media (max-width: 600px) {
  .sechead-action-group {
    width: 100%;
    justify-content: space-between;
    margin-top: 6px;
  }
  .sechead-action-link {
    font-size: 12.5px;
    padding: 6px 14px;
  }
  .arw {
    width: 34px;
    height: 34px;
  }
}

/* ============================================================
   FEATURED BRANDS -- cream paper cards on the indigo night band
   Same in both themes: the band is the dark theme of this page.

   One card, seven times (similarity): the same size, the same three parts
   -- a badge only when it says something, the logo, then name, line and
   "Shop now" held together at the foot (proximity). Nike is set apart by a
   burgundy ring and its badge, not by being bigger. On a wide screen all
   seven fit, so there is nothing to scroll and no arrow; narrower, the row
   scrolls and the arrows sit BELOW it with the dots, never over a logo.
   ============================================================ */
.featured-brands-sec {
  padding: 76px 0 84px;
  background: #16173F;
  background: radial-gradient(120% 90% at 50% 0%, #2E3278 0%, #1B1D4B 55%, #0E0F28 100%);
  position: relative;
  overflow: hidden;
  color: #F8EEDB;
}

.featured-brands-wrap {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.featured-brands-header {
  text-align: center;
  margin-bottom: 40px;
}

.featured-brands-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242, 224, 190, 0.72);
  margin: 0 0 12px;
}
.featured-brands-eyebrow::before,
.featured-brands-eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: rgba(227, 166, 177, 0.55);
}

.featured-brands-title {
  font-family: 'Playfair Display', 'Bodoni MT', 'Didot', Georgia, serif;
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #F8EEDB;
  margin: 0 0 10px;
  line-height: 1.12;
}

.featured-brands-subtitle {
  font-size: clamp(13px, 1.4vw, 15px);
  color: rgba(242, 224, 190, 0.62);
  margin: 0;
  letter-spacing: 0.01em;
}

.featured-brands-carousel-container {
  width: 100%;
}

.featured-brands-track {
  position: relative; /* the cards' offsetParent, for centring a card on arrow */
  perspective: 1100px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 16px;
  padding: 10px 2px 22px;
}

.featured-brand-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 272px;
  padding: 14px 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, #FBF4E6 0%, #F2E0BE 100%);
  border: 1px solid rgba(242, 224, 190, 0.35);
  box-shadow: 0 16px 32px -14px rgba(8, 9, 30, 0.65);
  color: #1C1D3D;
  cursor: pointer;
  outline: none;
  user-select: none;
  transform: translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
/* A soft light that follows the pointer across the card. */
.featured-brand-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(280px circle at calc((var(--px, 0) + 0.5) * 100%) calc((var(--py, 0) + 0.5) * 100%),
    rgba(255, 250, 238, 0.7), rgba(255, 250, 238, 0) 60%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.featured-brand-card.is-hero {
  box-shadow: 0 16px 32px -14px rgba(8, 9, 30, 0.65), inset 0 0 0 1.5px rgba(118, 27, 44, 0.55);
}
.featured-brand-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(242, 224, 190, 0.9), 0 16px 32px -14px rgba(8, 9, 30, 0.65);
}

.fb-card-top {
  display: flex;
  min-height: 22px;
  transform: translate(calc(var(--px, 0) * -5px), calc(var(--py, 0) * -4px));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.fb-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(56, 60, 140, 0.08);
  color: #383C8C;
  white-space: nowrap;
}
.fb-badge:empty { display: none; }
.fb-badge.fb-badge-hero { background: #761B2C; color: #F8EEDB; }

.fb-img-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 112px;
  margin: 6px -4px 12px;
  overflow: hidden;
}
/* The logo files are white squares: cropped to the band and multiplied, the
   white becomes the card and only the mark is left. */
.fb-img {
  width: 100%;
  height: 112px;
  object-fit: cover;
  mix-blend-mode: multiply;
  /* Lifts a near-white backdrop (Puma.jpg is #FDFDFD around a pure-white box)
     to white, so no rectangle survives the multiply. */
  filter: brightness(1.025);
  transform: translate(calc(var(--px, 0) * 12px), calc(var(--py, 0) * 10px)) scale(var(--zoom, 1));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-user-drag: none;
}

.fb-dots-indicator { display: none; }

.fb-card-bottom {
  display: flex;
  flex-direction: column;
  transform: translate(calc(var(--px, 0) * -4px), calc(var(--py, 0) * -3px));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* The brand's live count, set by featuredBrands.js, replaces the tooltip
   that used to open over the logo. */
.fb-card-bottom[data-count]::after { content: attr(data-count) ' styles \2192'; white-space: nowrap; }
.fb-brand-name {
  font-family: 'Playfair Display', 'Bodoni MT', 'Didot', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #383C8C;
  margin: 0 0 3px;
}
.fb-brand-desc {
  font-size: 12px;
  line-height: 1.35;
  color: #5E5870;
  margin: 0;
  min-height: 2.7em; /* two lines, so every "Shop now" sits on one line across the row */
}
.fb-card-bottom::after {
  content: 'Shop now \2192';
  margin-top: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #383C8C;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  /* Fast while the pointer steers it, slow when it settles back. */
  .featured-brand-card:hover {
    --lift: -8px;
    --zoom: 1.06;
    box-shadow: 0 30px 50px -18px rgba(8, 9, 30, 0.85);
    transition: transform 0.14s ease-out, box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .featured-brand-card:hover .fb-card-top,
  .featured-brand-card:hover .fb-img,
  .featured-brand-card:hover .fb-card-bottom { transition-duration: 0.14s; }
  .featured-brand-card:hover::after { opacity: 1; }
  .featured-brand-card.is-hero:hover {
    box-shadow: 0 30px 50px -18px rgba(8, 9, 30, 0.85), inset 0 0 0 1.5px rgba(118, 27, 44, 0.7);
  }
  .featured-brand-card:hover .fb-card-bottom::after { transform: translateX(4px); }
}

/* Entrance: the row flips up out of the band, one card after another, the
   first time it scrolls into view (featuredBrands.js adds .fb-in; --i is the
   card's place). `backwards`, so a card that never animates is still there. */
@keyframes fbFlipIn {
  from { opacity: 0; transform: translateY(60px) rotateX(-58deg) scale(0.92); }
}
.featured-brands-sec.fb-in .featured-brand-card {
  animation: fbFlipIn 0.95s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 85ms);
}

/* Not stocked yet: the mark steps back, the words stay readable. */
.featured-brand-card.is-coming-soon { cursor: default; }
.featured-brand-card.is-coming-soon .fb-img { filter: grayscale(1) brightness(1.025); opacity: 0.42; }
.featured-brand-card.is-coming-soon .fb-badge { background: transparent; color: #5E5870; box-shadow: inset 0 0 0 1px rgba(94, 88, 112, 0.35); }
.featured-brand-card.is-coming-soon .fb-card-bottom::after { content: 'Coming soon'; color: #8A8196; }
@media (hover: hover) {
  .featured-brand-card.is-coming-soon:hover { --lift: 0px; --zoom: 1; box-shadow: 0 16px 32px -14px rgba(8, 9, 30, 0.65); }
  .featured-brand-card.is-coming-soon:hover::after { opacity: 0; }
}

/* Arrows and dots, together, under the row. Hidden while all seven fit. */
.fb-controls {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
}
.fb-nav-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(242, 224, 190, 0.45);
  color: #F2E0BE;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.fb-nav-arrow:hover { background: #F2E0BE; border-color: #F2E0BE; color: #383C8C; }
.fb-nav-arrow:focus-visible { outline: 2px solid #F2E0BE; outline-offset: 3px; }
.fb-nav-arrow svg { width: 18px; height: 18px; }

.featured-brands-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fb-page-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(242, 224, 190, 0.3);
  cursor: pointer;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
}
.fb-page-dot:hover { background: rgba(242, 224, 190, 0.6); }
.fb-page-dot.active { width: 22px; background: #F2E0BE; }

@media (max-width: 1180px) {
  .featured-brands-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 10px 24px 22px;
    margin: 0 -24px;
    scroll-padding: 0 24px;
  }
  .featured-brands-track::-webkit-scrollbar { display: none; }
  .featured-brand-card {
    flex: 0 0 200px;
    scroll-snap-align: start;
  }
  .fb-controls { display: flex; }
}

@media (max-width: 640px) {
  .featured-brands-sec { padding: 56px 0 60px; }
  .featured-brands-header { margin-bottom: 28px; }
  .featured-brands-wrap { padding: 0 16px; }
  .featured-brands-track { padding: 8px 16px 20px; margin: 0 -16px; scroll-padding: 0 16px; }
  .featured-brand-card { flex-basis: 56vw; max-width: 220px; min-height: 256px; }
  .fb-nav-arrow { display: none; } /* a phone swipes; the dots say where you are */
}

/* Sliding View Pagination Indicators (Matching Pic 4) */
.rail-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  margin-bottom: 6px;
  user-select: none;
}

.rail-page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.rail-page-dot:hover {
  background: rgba(0, 0, 0, 0.45);
}

.rail-page-dot.active {
  background: #1C1D3D;
  width: 24px;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

@media (min-width: 769px) {
  #genderDiscoveryPagination,
  #trendRailPagination {
    display: none;
  }
}

/* Legacy Brands Grid Fallback */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.brand-card {
  background: #F8EEDB;
  border-radius: 18px;
  border: 1px solid #eef0f4;
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 380px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}
.brand-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.12), 0 8px 18px -4px rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
}
.brand-card-top { margin-bottom: 8px; }
.brand-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #00875a;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}
.brand-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 4px;
  color: #0f1115;
  line-height: 1.1;
}
.brand-sub {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.35;
}
.brand-card-img-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 14px;
  min-height: 140px;
  max-height: 150px;
}
.brand-card-img {
  width: 100%;
  max-height: 145px;
  object-fit: contain;
  border-radius: 8px;
  transition: transform .35s ease;
}
.brand-card:hover .brand-card-img {
  transform: scale(1.03);
}
.brand-card-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #edf0f3;
  padding-top: 14px;
  margin-top: auto;
}
.brand-card-bottom .lnk {
  font-size: 13px;
  font-weight: 700;
  color: #383C8C;
  text-align: center;
}

/* ============================================================
   SHOP BY PURPOSE (COMPACT CATEGORY GRID)
   ============================================================ */
.purpose-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.purpose-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 220px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--hair);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.purpose-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(0,0,0,.06);
  border-color: rgba(0,0,0,0.15);
}
.purpose-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink2);
  text-transform: uppercase;
}
.purpose-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.01em;
  margin-top: 4px;
  color: var(--ink);
  line-height: 1.2;
}
/* The image is absolutely positioned at right:-5% with width:65%, so its box
   starts at ~40% of the card. The text block was unconstrained and .purpose-desc
   used a fixed 160px cap that does not scale down as the card narrows, so the
   description ran under the shoe ("ZoomX, BOOST, NITR|", "Turf boots, jerseys &
   club|"). Constrain the TEXT COLUMN as a percentage instead, and lift it above
   the image. Card size, background, hover lift and image animation are untouched. */
.purpose-card > div {
  position: relative;
  z-index: 1;
  max-width: 54%;
}
.purpose-desc {
  font-size: 12px;
  color: var(--ink2);
  margin-top: 3px;
  max-width: 100%;
}
.purpose-img {
  position: absolute;
  right: -5%;
  bottom: 5%;
  width: 65%;
  max-height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.1));
  transition: transform .4s var(--ease);
}
.purpose-card:hover .purpose-img {
  transform: scale(1.1) translateX(-6px) rotate(-2deg);
}
/* Purpose card — semantic background palette */
.purpose-card.pur-running    { background: #f2f0f8; } /* pale lavender */
.purpose-card.pur-basketball { background: #fdf0f0; } /* warm blush */
.purpose-card.pur-training   { background: #f0f7f2; } /* pale sage */
.purpose-card.pur-football   { background: #f0f3f7; } /* soft cool grey */
.purpose-card.pur-gym        { background: #faf8f2; } /* warm ivory */
.purpose-card.pur-lifestyle  { background: #f8f5ef; } /* light sand */
.purpose-card.pur-outdoor    { background: #f3f4f0; } /* pale stone */
.purpose-card.pur-slides     { background: #eff5fb; } /* soft pale blue */
/* Legacy fallbacks kept for any other uses */
.purpose-card.a { background: #f4f6fb; }
.purpose-card.b { background: #fbf8f2; }
.purpose-card.c { background: #f2f8f5; }
.purpose-card.d { background: #fdf4f4; }
.purpose-card.e { background: #f7f7fa; }

/* ============================================================
   TRENDING CAROUSEL & PRODUCT CARDS
   ============================================================ */
.railwrap { position: relative; }
.trend-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 24px 24px;
  margin: 0 -24px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.trend-rail::-webkit-scrollbar { display: none; }
.trend-rail .pcard {
  flex: 0 0 clamp(240px, 22vw, 290px);
  min-width: 0;
  scroll-snap-align: start;
}

/* ============================================================
   945SELECT — LUXURY EDITORIAL CURATION (MATCHING REFERENCE)
   ============================================================ */
.select945-sec {
  padding-top: 24px;
  padding-bottom: 24px;
}

.select945-wrap {
  width: 100%;
}

.select945-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.select945-title {
  margin: 0;
  padding: 0;
  line-height: 1.05;
}

.select945-title-link {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  cursor: pointer;
}

.select945-title-link:hover,
.select945-title-link:focus-visible {
  text-decoration: none !important;
  opacity: 0.9;
}

.select945-num {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 46px);
  color: var(--ink, #1C1D3D);
  letter-spacing: -0.02em;
  line-height: 1;
}

.select945-word {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 48px);
  color: #761B2C;
  margin-left: 8px;
  letter-spacing: -0.01em;
  line-height: 1;
}

.select945-sub {
  margin: 10px 0 0 0;
  font-family: var(--font-body, 'Inter', -apple-system, sans-serif);
  font-size: 14.5px;
  color: #5E5870;
  line-height: 1.45;
  font-weight: 400;
}

.select945-cta {
  margin-top: 14px;
  font-family: var(--font-body, 'Inter', -apple-system, sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink, #1C1D3D);
  text-decoration: none;
  border: none;
  border-bottom: 1.5px solid #761B2C;
  padding: 0 0 3px 0;
  border-radius: 0;
  background: transparent !important;
  display: inline-block;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.select945-cta:hover,
.select945-cta:focus-visible {
  opacity: 0.75;
  border-bottom-color: #8c6a38;
}

.select945-rule {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 22px 0 24px 0;
}

/* --- Cards in the select945 rail ---
   Same card as everywhere else (theme.css, "ONE PRODUCT CARD"); only the
   title keeps the editorial serif. The rail used to re-lay every row --
   eyebrow above the name, a taller name, a bigger button -- so a 945 Select
   card stood 20-50px taller than the same product in the grid. */
#select945Rail .pname {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: normal;
}

/* --- Trailing "View The Full Edit" Card (Pic 3) --- */
.select945-edit-card {
  flex: 0 0 clamp(240px, 22vw, 290px);
  min-width: 0;
  scroll-snap-align: start;
  border: 1.5px solid #761B2C;
  border-radius: 14px;
  background: var(--bg-page, #F8EEDB);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 32px 20px;
  box-sizing: border-box;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  align-self: stretch;
}

.select945-edit-card:hover {
  transform: translateY(-3px);
  border-color: #8c6a38;
  box-shadow: 0 10px 24px rgba(179, 142, 93, 0.16);
}

.select945-edit-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.select945-edit-num {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(48px, 5.5vw, 60px);
  font-weight: 400;
  color: #761B2C;
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.select945-edit-label {
  font-family: var(--font-body, 'Inter', -apple-system, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink, #1C1D3D);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.select945-edit-arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.select945-edit-card:hover .select945-edit-arrow {
  transform: translateX(4px);
}

/* ============================================================
   SHARED EDITORIAL SECTION HEADERS (CATEGORY & NEW DROPS)
   ============================================================ */
.editorial-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.editorial-header-titles {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.editorial-eyebrow-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.editorial-eyebrow {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #555558;
}
.editorial-eyebrow-line {
  display: inline-block;
  width: 44px;
  height: 1px;
  background: rgba(0, 0, 0, 0.18);
}
.editorial-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #1a1917;
  margin: 0;
}
.editorial-view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #1a1917;
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 4px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.editorial-view-all:hover {
  opacity: 0.7;
  transform: translateX(2px);
}

/* ============================================================
   NEW DROPS & TOP PICKS: EDITORIAL CATEGORY SHOWCASE
   ============================================================ */
.trend-editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 395px));
  justify-content: center;
  gap: 16px;
}
.trend-editorial-card {
  position: relative;
  height: 252px;
  border-radius: 16px;
  overflow: hidden;
  background: #0f1115;
  text-decoration: none;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 16px;
  border: 1px solid var(--hair);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.trend-editorial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
}
.trend-editorial-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.trend-card-shoes .trend-editorial-img {
  object-position: center center;
}
.trend-card-apparel .trend-editorial-img {
  object-position: center top;
}
.trend-card-accessories .trend-editorial-img {
  object-position: center 60%;
}
.trend-editorial-card:hover .trend-editorial-img {
  transform: scale(1.04);
}
.trend-editorial-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 14, 18, 0) 0%,
    rgba(12, 14, 18, 0.04) 35%,
    rgba(12, 14, 18, 0.45) 65%,
    rgba(12, 14, 18, 0.88) 100%
  );
  pointer-events: none;
  transition: background .35s var(--ease);
}
.trend-editorial-card:hover .trend-editorial-overlay {
  background: linear-gradient(
    180deg,
    rgba(12, 14, 18, 0) 0%,
    rgba(12, 14, 18, 0.08) 32%,
    rgba(12, 14, 18, 0.52) 65%,
    rgba(12, 14, 18, 0.92) 100%
  );
}
.trend-editorial-content {
  position: relative;
  z-index: 2;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}
.trend-editorial-tag {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.trend-editorial-footer-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}
.trend-editorial-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.18;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  margin: 0;
  flex: 1 1 auto;
}
.trend-editorial-circle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #ffffff;
  flex-shrink: 0;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.trend-editorial-card:hover .trend-editorial-circle-btn {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.75);
  transform: translateX(2px);
}
.trend-editorial-card:hover .trend-editorial-btn {
  background: #F3E6CC;
  color: #000;
  transform: scale(1.04);
}
.trend-editorial-card:hover .trend-editorial-btn svg {
  transform: translateX(3px);
}

/* ============================================================
   PREMIUM NIKE PRODUCT CARD (WISHLIST, COLOR DOTS, SIZE HOVER)
   ============================================================ */
.pcard {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  transition: transform .25s ease, opacity .2s ease;
  /* Removed content-visibility:auto — causes layout jump/stutter on scroll */
  contain: layout style;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  will-change: auto;
}
.pcard:hover {
  opacity: 0.97;
}
/* Suppress hover re-computation on all cards while page is scrolling */
body[style*="--scroll-pe"] .pcard {
  pointer-events: none;
}

.pcard-plate {
  background: #F3E6CC;
  border-radius: 16px;
  padding: 8px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  min-height: unset;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}

/* Dual Image Media Stage */
.pcard-img-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pcard-art {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  /* Removed mix-blend-mode:multiply — forces GPU compositing per-card, heavy overdraw */
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
  filter: none;
}
.pcard:hover .pcard-art {
  transform: scale(1.05);
}
.pcard-art-primary {
  opacity: 1;
  position: relative;
  z-index: 1;
}
.pcard-art-secondary {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  z-index: 2;
  transform: scale(0.98);
}
.pcard:hover .pcard-art-primary.has-sec {
  opacity: 0;
}
.pcard:hover .pcard-art-secondary {
  opacity: 1;
  transform: scale(1.05);
}

/* Wishlist Heart Button (Top-Right Floating Circle) */
.pcard-wish-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F8EEDB;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1C1D3D;
  cursor: pointer;
  z-index: 6;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pcard-wish-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.pcard-wish-btn svg {
  width: 18px;
  height: 18px;
  stroke: #1C1D3D;
  stroke-width: 1.8;
  fill: none;
  transition: fill .2s ease, transform .2s ease;
}
.pcard-wish-btn.active svg {
  fill: #1C1D3D;
  stroke: #1C1D3D;
  transform: scale(1.08);
}

/* Product Tag (Exact Nike Burnt Orange) */
.pcard-tag-red {
  font-size: 14px;
  font-weight: 600;
  color: #761B2C;
  margin-top: 12px;
  line-height: 1.2;
}

/* Product Title */
.pname {
  font-size: 16px;
  font-weight: 600;
  color: #1C1D3D;
  margin-top: 3px;
  line-height: 1.3;
}

/* Product Subtitle / Description */
.pdesc {
  font-size: 15px;
  font-weight: 400;
  color: #5E5870;
  margin-top: 2px;
  line-height: 1.3;
}

/* Color Swatches and Dots */
.pcolor-swatches {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.pcolor-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  display: inline-block;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.pcolor-dot:hover {
  transform: scale(1.25);
  border-color: #1C1D3D;
}
.pcolor-count-label {
  font-size: 13px;
  color: #5E5870;
  margin-left: 4px;
  font-weight: 400;
}

/* Price Details */
.pprice {
  font-size: 16px;
  font-weight: 600;
  color: #1C1D3D;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pprice s {
  color: #5E5870;
  font-weight: 400;
  font-size: 14px;
}
.pcard-discount-tag {
  border: 1px solid #761B2C;
  color: #761B2C;
  background: transparent;
  border-radius: 9999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  margin-left: 2px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  vertical-align: middle;
}

/* Card Footer with Add to Bag Button */
.pcard-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.pcard-footer .pprice {
  margin-top: 0;
}
.pcard-add-cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 38px;
  padding: 0 14px;
  border-radius: 100px;
  background: #1C1D3D;
  color: #ffffff;
  border: 1px solid #1C1D3D;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
  user-select: none;
}
.pcard-add-cart-btn:hover {
  background: #000000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  transform: translateY(-1px);
}
.pcard-add-cart-btn:active {
  transform: scale(0.97);
}
.pcard-add-cart-btn svg {
  stroke-width: 2.2;
}

/* ============================================================
   OFFICIAL NIKE-STYLE PLP EXPERIENCE (IMAGES 3, 4, 5 ALIGNMENT)
   ============================================================ */
.plp-nike-section {
  display: block;
  padding: 16px 0 80px;
  background: #F8EEDB;
}
.wrap-wide {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 900px) {
  .wrap-wide { padding: 0 20px; }
}

/* Nike Breadcrumb */
/* Nike Breadcrumb & Back Navigation */
.nike-plp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 500;
  color: #5E5870;
}

.nike-crumb-home {
  color: #5E5870;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.nike-crumb-home:hover {
  color: #1C1D3D;
  text-decoration: underline;
}
.nike-crumb-sep {
  color: #cccccc;
  font-size: 11px;
}
.nike-crumb-current {
  color: #1C1D3D;
  font-weight: 600;
}

/* PLP Top Bar (Static Flow on Desktop) */
.nike-plp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 8px 0 16px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.nike-plp-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.nike-plp-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #1C1D3D;
  margin: 0;
  line-height: 1.15;
}
.nike-plp-count {
  font-size: 14px;
  font-weight: 600;
  color: #5E5870;
  background: #F3E6CC;
  padding: 3px 10px;
  border-radius: 980px;
  letter-spacing: -0.01em;
}
.nike-plp-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Luxury Filter Toggle Button Pill */
.nike-toggle-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1C1D3D;
  background: #F8EEDB;
  border: 1px solid #e5e5e7;
  border-radius: 980px;
  padding: 7px 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  user-select: none;
  position: relative;
}
.nike-toggle-filters-btn:hover {
  background: #ede9d8;
  border-color: #1C1D3D;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.nike-toggle-filters-btn:active {
  transform: scale(0.97);
}
.nike-toggle-filters-btn .nike-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1C1D3D;
}

/* Luxury Custom Sort Selector (Apple / Nike Inspired) */
.nike-sort-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  user-select: none;
}
.nike-sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  background: #F8EEDB;
  border: 1px solid #e5e5e7;
  border-radius: 980px;
  padding: 5px 12px;
  height: 32px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1C1D3D;
  cursor: pointer;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  font-family: inherit;
  white-space: nowrap;
}
.nike-sort-btn:hover {
  background: #ede9d8;
  border-color: #1C1D3D;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.nike-sort-btn:focus-visible {
  border-color: #1C1D3D;
  box-shadow: 0 0 0 2px rgba(17, 17, 19, 0.15);
}
.nike-sort-chevron {
  color: #1C1D3D;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
.nike-sort-btn[aria-expanded="true"] .nike-sort-chevron {
  transform: rotate(180deg);
}

/* Dropdown Menu Box (Small, Compact, Luxury Glassmorphism) */
.nike-sort-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  min-width: 170px;
  background: #F8EEDB;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s ease;
  pointer-events: none;
}
.nike-sort-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Dropdown Option Items */
.nike-sort-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 500;
  color: #48484a;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.nike-sort-option:hover {
  background: #F3E6CC;
  color: #1C1D3D;
}
.nike-sort-option.active {
  background: #EFE2C6;
  color: #1C1D3D;
  font-weight: 600;
}
.nike-sort-check {
  display: none;
  color: #1C1D3D;
  margin-left: 8px;
  flex-shrink: 0;
}
.nike-sort-option.active .nike-sort-check {
  display: block;
}

/* 2-Column Grid Layout */
.nike-plp-body {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 36px;
  align-items: stretch; /* Allows sidebar to stick along the entire height of the product grid */
  transition: all 0.3s ease;
}
.nike-plp-body.filters-hidden {
  grid-template-columns: 0px 1fr;
  gap: 0;
}
.nike-plp-body.filters-hidden .nike-sidebar {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-30px);
  width: 0;
  overflow: hidden;
  padding: 0;
}

/* ============================================================
   PREMIUM COMPACT NIKE-GRADE PLP FILTER SIDEBAR
   ============================================================ */
.nike-sidebar {
  position: sticky;
  top: calc(var(--nav) + 16px);
  align-self: flex-start;
  max-height: calc(100vh - var(--nav) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 14px;
  padding-bottom: 32px;
  /* Only transition opacity/width — animating 'top' triggers layout on every frame */
  transition: opacity 0.3s ease, width 0.3s ease;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.navbar.nav-hidden ~ #catalogView .nike-sidebar {
  top: 16px;
  max-height: calc(100vh - 32px);
}
.nike-sidebar::-webkit-scrollbar {
  display: none;
  width: 0;
}

/* Sidebar Top Header & Reset Button */
.nike-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e5e5e7;
}
.nike-sidebar-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nike-sidebar-heading {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1C1D3D;
}
.nike-active-filter-count {
  font-size: 10px;
  font-weight: 700;
  background: #1C1D3D;
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 980px;
  line-height: 1.2;
}
.nike-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #F3E6CC;
  border: 1px solid #e5e5e7;
  color: #1C1D3D;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 980px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: auto !important;
  user-select: none;
}
.nike-reset-btn:hover {
  background: #1C1D3D;
  color: #ffffff;
  border-color: #1C1D3D;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}
.nike-reset-btn:active {
  transform: scale(0.96);
}
.nike-reset-btn svg {
  width: 11px;
  height: 11px;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nike-reset-btn:hover svg {
  transform: rotate(-180deg);
}
.nike-reset-btn.has-filters {
  background: #1C1D3D;
  color: #ffffff;
  border-color: #1C1D3D;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.nike-reset-btn.has-filters:hover {
  background: #2c2c2e;
  border-color: #2c2c2e;
}

.nike-sidebar-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nike-sidebar-close-btn {
  display: none;
  background: #F3E6CC;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: #1C1D3D;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nike-sidebar-close-btn:hover {
  background: #E6D5B5;
}
.nike-sidebar-mobile-footer {
  display: none;
}
.nike-sidebar-body {
  display: block;
}

/* Accordion Filters (Compact & Refined) */
.nike-accordion-item {
  border-top: 1px solid #EFE2C6;
  padding: 8px 0;
}
.nike-accordion-item:first-of-type {
  border-top: none;
}
.nike-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  font-size: 13.5px;
  font-weight: 600;
  color: #1C1D3D;
  cursor: pointer;
  text-align: left;
  padding: 2px 0;
  transition: color 0.15s ease;
}
.nike-accordion-header:hover {
  color: #000000;
}
.nike-acc-icon {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  color: #5E5870;
  width: 12px;
  height: 12px;
}
.nike-accordion-item.open .nike-acc-icon {
  transform: rotate(180deg);
  color: #1C1D3D;
}
.nike-accordion-content {
  display: none;
  padding-top: 4px;
}
.nike-accordion-item.open .nike-accordion-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Premium Custom Checkboxes (Compact 15px) */
.nike-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3.5px 6px;
  margin: 0 -6px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 0.15s ease;
}
.nike-checkbox-label:hover {
  background: #F3E6CC;
}
.nike-checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.nike-custom-check {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1.5px solid #D8C49E;
  background: #F8EEDB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.nike-checkbox-label:hover .nike-custom-check {
  border-color: #8e8e93;
}
.nike-checkbox-label input[type="checkbox"]:checked ~ .nike-custom-check {
  background: #1C1D3D;
  border-color: #1C1D3D;
  box-shadow: 0 2px 5px rgba(0,0,0,0.18);
}
.nike-custom-check svg {
  width: 9.5px;
  height: 9.5px;
  stroke: #ffffff;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
}
.nike-checkbox-label input[type="checkbox"]:checked ~ .nike-custom-check svg {
  transform: scale(1);
  opacity: 1;
}
.nike-checkbox-text {
  font-size: 13px;
  font-weight: 400;
  color: #1C1D3D;
  line-height: 1.3;
  transition: color 0.15s ease, font-weight 0.15s ease;
  flex: 1;
}
.nike-checkbox-label input[type="checkbox"]:checked ~ .nike-checkbox-text {
  font-weight: 600;
  color: #000000;
}

/* ---- Filters drawn from the catalogue (js/modules/facetSidebar.js) ----
   Every colour is a theme token, so the same rules read in light and dark. */
#facetsA > .nike-accordion-item,
#facetsB > .nike-accordion-item { border-top: 1px solid var(--hair); }
#facetsA > .nike-accordion-item:first-child { border-top: none; }
/* An author rule on display (the labels are flex) beats the hidden attribute: say so. */
#nikeSidebar [hidden] { display: none !important; }

.fx-count {
  margin-left: auto;
  padding-left: 8px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink2);
}
/* Unavailable, not invisible: still readable (about 4.5:1), told apart by the lighter weight and the cursor. */
.fx-opt.is-zero, .fx-swatch.is-zero, .fx-select.is-zero { opacity: .65; cursor: default; }
/* Keyboard focus only: a mouse click left a ring beside the tick until the next click elsewhere. */
.fx-opt:has(input:focus-visible) .nike-custom-check { outline: 2px solid var(--ink); outline-offset: 2px; }
.fx-group {
  margin: 8px 0 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink2);
}
.fx-empty { margin: 4px 0; font-size: 12.5px; color: var(--ink2); }

/* 945 Select: a premium catalogue, so it leads the list as a card, not a checkbox. */
.fx-select {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 10px;
  padding: 12px 14px;
  background: var(--surface-secondary);
  border: 1px solid var(--hair);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fx-select input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.fx-select:hover { border-color: var(--ink2); }
.fx-select.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.fx-select:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.fx-select-mark { flex: none; font-size: 17px; line-height: 1; color: var(--burgundy); }
.fx-select-text { flex: 1; min-width: 0; }
.fx-select-text strong { display: block; font-size: 13.5px; color: var(--ink); }
.fx-select-text small { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.35; color: var(--ink2); }

/* Colour: one to a row, so the name and the count both stay readable. */
.fx-swatches { display: flex; flex-direction: column; gap: 1px; }
.fx-swatch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.fx-swatch:hover { background: var(--surface-secondary); }
.fx-swatch input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.fx-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22); }
.fx-dot.is-outlined { box-shadow: inset 0 0 0 1px var(--ink2); }
/* On the night page a black dot needs a light rim, or only its name says what it is. */
:root[data-theme="dark"] .fx-dot:not(.is-outlined) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38); }
.fx-swatch input:checked ~ .fx-dot { box-shadow: 0 0 0 2px var(--surface-primary), 0 0 0 4px var(--ink); }
.fx-swatch input:focus-visible ~ .fx-dot { outline: 2px solid var(--ink); outline-offset: 4px; }
.fx-sw-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-swatch input:checked ~ .fx-sw-name { font-weight: 600; }

/* A size nobody has with the other filters chosen: still readable, plainly not a good click. */
.nike-size-box.fx-dim { opacity: .55; text-decoration: line-through; text-decoration-thickness: 1px; }
/* The apparel size boxes are drawn from the stock (facetSidebar.js): each is a label over a real checkbox. */
.fx-sz input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.fx-sz:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Premium Compact Size Matrix & Department Tabs */
.nike-size-dept-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  background: #F3E6CC;
  padding: 3px;
  border-radius: 99px;
}
.nike-size-dept-tab {
  flex: 1;
  padding: 5px 0;
  border: none;
  background: transparent;
  color: #5E5870;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.16s ease;
  font-family: inherit;
  text-align: center;
}
.nike-size-dept-tab:hover {
  color: #1C1D3D;
}
.nike-size-dept-tab.active {
  background: #1C1D3D;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.nike-size-dept-panel {
  display: none;
}
.nike-size-dept-panel.active {
  display: block;
}

.nike-clean-size-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding-top: 2px;
}

.nike-size-subhead {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #5E5870;
  margin: 10px 0 6px;
}

.nike-acc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nike-acc-badge {
  font-size: 11px;
  font-weight: 700;
  background: #1C1D3D;
  color: #ffffff;
  padding: 1px 7px;
  border-radius: 99px;
  line-height: 1.4;
}

.nike-size-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding-top: 3px;
}
.nike-size-box {
  border: 1.2px solid #e5e5e7;
  border-radius: 6px;
  padding: 8px 3px;
  background: #F8EEDB;
  font-size: 12px;
  font-weight: 600;
  color: #1C1D3D;
  cursor: pointer;
  text-align: center;
  transition: all 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nike-size-box:hover {
  border-color: #1C1D3D;
  background: #f8f8f9;
}
.nike-size-box.active {
  border-color: #1C1D3D;
  background: #1C1D3D;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.14);
  transform: translateY(-1px);
}
.nike-size-box.has-dual-size {
  flex-direction: column;
  padding: 4px 2px;
  min-height: 40px;
  gap: 1px;
}
.nike-size-box .sz-box-pri {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  color: inherit;
}
.nike-size-box .sz-box-sec {
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.1;
  opacity: 0.68;
  color: inherit;
}
.nike-size-box.active .sz-box-sec {
  opacity: 0.88;
}

/* Active Filter Chips Bar Above PLP Grid */
.nike-active-chips-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid #EFE2C6;
}
.nike-active-chips-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.nike-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F3E6CC;
  border: 1px solid #e5e5e7;
  color: #1C1D3D;
  padding: 5px 12px;
  border-radius: 980px;
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nike-active-chip:hover {
  background: #E6D5B5;
  border-color: #D8C49E;
}
.nike-active-chip-x {
  font-size: 11px;
  color: #5E5870;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  transition: all 0.15s ease;
}
.nike-active-chip:hover .nike-active-chip-x {
  background: #1C1D3D;
  color: #ffffff;
}
.nike-clear-all-chips-btn {
  background: none;
  border: none;
  color: #5E5870;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.15s ease;
  margin-left: 4px;
}
.nike-clear-all-chips-btn:hover {
  color: #ff3b30;
}

/* Nike 4-Column Product Grid (25% smaller card size for all categories) */
.nike-main-grid-wrap {
  width: 100%;
}
.catalog-grid.nike-plp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 14px;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 1200px) {
  .catalog-grid.nike-plp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 12px;
  }
}
@media (max-width: 768px) {
  .nike-plp-body {
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .nike-sidebar {
    display: none;
  }
  .catalog-grid.nike-plp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Exact Nike Product Card Styling (PLP Grid) */
.nike-plp-grid .pcard,
.catalog-grid .pcard {
  height: 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 14px;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
  box-shadow: none;
  box-sizing: border-box;
}
.nike-plp-grid .pcard-plate,
.pcard-plate {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #F3E6CC;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
  transition: background 0.2s ease;
}
.nike-plp-grid .pcard-img-wrap,
.pcard-img-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nike-plp-grid .pcard-art,
.pcard-art {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: multiply;
  filter: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nike-plp-grid .pcard:hover .pcard-art,
.pcard:hover .pcard-art {
  transform: scale(1.05);
}
.nike-plp-grid .pcard-wish-btn,
.pcard-wish-btn {
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  /* Removed backdrop-filter:blur — one blur pass per card × hundreds of cards = GPU killer */
  background: #F8EEDB;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.06);
}
.nike-plp-grid .pcard-wish-btn svg,
.pcard-wish-btn svg {
  width: 15px;
  height: 15px;
}
.nike-plp-grid .pcard-tag-red,
.pcard-tag-red {
  font-size: 11px;
  font-weight: 700;
  color: #761B2C;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 8px;
  height: 16px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.nike-plp-grid .pname,
.pname {
  font-size: 13.5px;
  font-weight: 700;
  color: #1C1D3D;
  margin-top: 2px;
  height: 18px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.nike-plp-grid .pdesc,
.pdesc {
  font-size: 11.5px;
  font-weight: 400;
  color: #5E5870;
  margin-top: 1px;
  height: 16px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.nike-plp-grid .pcolor-swatches,
.pcolor-swatches {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  height: 18px;
  line-height: 18px;
  box-sizing: border-box;
}
.nike-plp-grid .pcolor-dot,
.pcolor-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.nike-plp-grid .pcolor-count-label,
.pcolor-count-label {
  font-size: 11px;
  color: #5E5870;
  margin-left: 2px;
  white-space: nowrap;
}
.nike-plp-grid .pcard-footer,
.pcard-footer {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
}
.nike-plp-grid .pprice,
.pprice {
  font-size: 14px;
  font-weight: 700;
  color: #1C1D3D;
  height: 20px;
  line-height: 20px;
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.nike-plp-grid .pcard-add-cart-btn,
.pcard-add-cart-btn {
  height: 34px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 980px;
  background: #1C1D3D;
  color: #ffffff;
  padding: 0 10px;
  gap: 4px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1C1D3D;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  box-sizing: border-box;
}
.nike-plp-grid .pcard-add-cart-btn:active,
.pcard-add-cart-btn:active {
  transform: scale(0.96);
  background: #333333;
}
.nike-plp-grid .prating,
.nike-plp-grid .pbrand,
.nike-plp-grid .qa {
  display: none;
}
.active-chips-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 20px;
}
.active-chips-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 980px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
}
.active-chip:hover { opacity: 0.85; }
.active-chip-close { font-size: 11px; margin-left: 2px; }
.clear-all-chips-btn {
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: #ff3b30;
  cursor: pointer;
  padding: 4px 8px;
}
.clear-all-chips-btn:hover { text-decoration: underline; }

/* Filter Quick Bar */
.filter-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 14px;
  margin-bottom: 26px;
  scrollbar-width: none;
  align-items: center;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-pill {
  background: var(--grey);
  border: 1px solid transparent;
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 980px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all .2s ease;
}
.filter-pill:hover { background: #E6D5B5; border-color: var(--hair); }
.filter-pill.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  font-weight: 600;
}
.filter-divider {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--hair);
  margin: 0 4px;
}
.sort-select {
  padding: 8px 14px;
  border: 1px solid var(--hair);
  border-radius: 980px;
  background: #F8EEDB;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  color: var(--ink);
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.brand-hero-content { flex: 1; }
.brand-hero-img {
  width: min(260px, 35%);
  max-height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.08));
}

/* ============================================================
   COMPACT FIT FINDER CTA BANNER
   ============================================================ */
.fit-banner {
  background: #F8EEDB;
  border-radius: 24px;
  border: 1px solid var(--hair);
  padding: 44px 36px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: center;
}
.fit-banner-brands {
  display: grid;
  gap: 10px;
}
.fit-brand-badge {
  background: var(--grey);
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--hair);
}

/* ============================================================
   TRUST & BENEFITS
   ============================================================ */
.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.trust .t h5 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 4px;
  color: var(--ink);
}
.trust .t p {
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.4;
}
.trust .ic {
  width: 32px;
  height: 32px;
  margin: 0 auto 10px;
  color: var(--accent);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--grey);
  padding: 48px 0 28px;
  font-size: 13px;
  color: var(--ink2);
  border-top: 1px solid var(--hair);
}
.fcols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  padding-bottom: 28px;
}
.fcols h6 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.fcols ul { list-style: none; display: grid; gap: 9px; }
.fcols a:hover { text-decoration: underline; color: var(--ink); }
.frule {
  border-top: 1px solid var(--hair);
  padding-top: 18px;
  font-size: 12px;
  color: var(--ink2);
}
.fbot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--hair);
  margin-top: 14px;
  padding-top: 14px;
  font-size: 12px;
}
.fbot .fl { display: flex; gap: 16px; flex-wrap: wrap; }

/* ============================================================
   PREMIUM PRODUCT DETAIL PAGE (PDP) & 3D VIEWER STYLING
   ============================================================ */
.pv-modal-card {
  max-width: 1040px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 24px;
  padding: 34px;
  background: #F8EEDB;
  position: relative;
}
.pv-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 36px;
  align-items: start;
}
.pv-gallery {
  position: sticky;
  top: 0;
  align-self: start;
}
.pv-media-stage-wrap {
  position: relative;
  background: var(--grey);
  border-radius: 20px;
  overflow: hidden;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hair);
}
.pv-3d-toggle-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 12;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: 980px;
  border: 1px solid rgba(0,0,0,0.08);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.pv-3d-toggle-btn:hover {
  background: var(--ink);
  color: #fff;
}
.pv-3d-toggle-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.pv-photo-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pv-photo-stage img {
  max-width: 90%;
  max-height: 290px;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.12));
  transition: transform .3s var(--ease);
}
.pv-photo-stage:hover img {
  transform: scale(1.04);
}
.pv-3d-canvas-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  background: radial-gradient(circle at center, #F3E6CC 0%, #E6D5B5 100%);
}
.pv-3d-controls-hint {
  position: absolute;
  bottom: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink2);
  pointer-events: auto;
}
.pv-3d-reset-btn {
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--hair);
  border-radius: 980px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.pv-thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.pv-thumbnails::-webkit-scrollbar { display: none; }
.pv-thumb-btn {
  border: 2px solid transparent;
  background: var(--grey);
  border-radius: 10px;
  padding: 3px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .2s;
}
.pv-thumb-btn.active {
  border-color: var(--ink);
}
.pv-gallery-footer-badges {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink2);
}

/* Header & Details */
.pv-brand {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--ink2);
  text-transform: uppercase;
}
.pv-stock-status-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 980px;
  background: rgba(52,199,89,0.12);
  color: #248a3d;
}
.pv-stock-status-pill.out {
  background: rgba(255,59,48,0.12);
  color: #ff3b30;
}
.pv-stock-status-pill.low {
  background: rgba(255,149,0,0.12);
  color: #d97706;
}
.pv-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.15;
  margin: 6px 0;
}
.pv-pricing-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 8px;
}
.pv-price {
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
}
.pv-original-price {
  font-size: 16px;
  color: var(--ink2);
  font-weight: 500;
}
.pv-tax-inclusive {
  font-size: 12px;
  color: var(--ink2);
  margin-top: 4px;
}
.pv-rating-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
}

/* Variant Switcher */
.pv-variant-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
}
.pv-variant-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.pv-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink2);
}
.pv-color-name {
  font-weight: 700;
  color: var(--ink);
}
.pv-variant-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.pv-variant-card {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--hair);
  background: var(--grey);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all .2s;
}
.pv-variant-card.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.pv-variant-swatch-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
}

/* Sizing Selector */
.pv-size-block {
  margin-top: 18px;
}
.pv-size-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.pv-size-guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}
.pv-size-guide-btn:hover { text-decoration: underline; }
.pv-size-stock-hint {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  margin-top: 8px;
}

/* Actions */
.pv-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  align-items: center;
}
.pv-wish-btn {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: #F8EEDB;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
  color: var(--ink2);
  flex-shrink: 0;
}
.pv-wish-btn:hover {
  border-color: #ff2d55;
  color: #ff2d55;
}
.pv-wish-btn.active {
  background: rgba(255,45,85,0.08);
  border-color: #ff2d55;
  color: #ff2d55;
}
.pv-wish-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Guarantees */
.pv-guarantees-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 22px;
  background: var(--grey);
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--hair);
}
.pv-guarantee-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pv-guarantee-item svg {
  color: var(--ink);
  flex-shrink: 0;
}
.pv-guarantee-item strong {
  font-size: 12px;
  color: var(--ink);
  display: block;
}
.pv-guarantee-item p {
  font-size: 11px;
  color: var(--ink2);
  margin: 0;
}

/* Specs */
.pv-specs-section {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
}
.pv-specs-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  font-size: 12px;
}
.pv-spec-cell {
  background: var(--grey);
  padding: 10px 14px;
  border-radius: 8px;
}
.pv-spec-cell span {
  display: block;
  font-size: 11px;
  color: var(--ink2);
}
.pv-spec-cell strong {
  color: var(--ink);
}

/* Reviews Breakdown */
.pv-reviews-section {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
}
.pv-reviews-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.pv-reviews-score-card {
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--grey);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 16px;
}
.pv-score-big {
  font-size: 36px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
}
.pv-star-bars {
  flex: 1;
  display: grid;
  gap: 4px;
}
.pv-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.pv-bar-track {
  flex: 1;
  height: 6px;
  background: var(--hair);
  border-radius: 4px;
  overflow: hidden;
}
.pv-bar-fill {
  height: 100%;
  background: #761B2C;
  border-radius: 4px;
}
/* Star rating picker — used on the "Write a Review" form (My Orders) */
.review-star-input {
  display: flex;
  gap: 4px;
}
.review-star-btn {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--hair);
  cursor: pointer;
  padding: 2px;
  transition: color 0.15s ease, transform 0.1s ease;
}
.review-star-btn:hover { transform: scale(1.08); }
.review-star-btn.active { color: #761B2C; }

/* Related Products Rail */
.pv-related-section, .pv-recently-viewed-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
}
.pv-related-title {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
  margin-bottom: 12px;
}
.pv-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.pv-related-card {
  background: var(--grey);
  border-radius: 10px;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pv-related-card:hover { transform: translateY(-3px); }
.pv-related-img {
  width: 100%;
  height: 70px;
  object-fit: contain;
  margin-bottom: 6px;
}
.pv-related-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pv-related-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink2);
  margin-top: 2px;
}

/* ============================================================
   MINIMAL NIKE SINGLE-LINE FOOTER
   ============================================================ */
.nike-footer {
  padding: 36px 0 44px;
  background: #F8EEDB;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 48px;
}
.nike-footer-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  font-size: 12px;
  color: #5E5870;
}
.nike-footer-copy {
  color: #5E5870;
  font-size: 12px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.nike-footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.nike-footer-link {
  color: #5E5870;
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  transition: color 0.15s ease;
}
.nike-footer-link:hover {
  color: #1C1D3D;
  text-decoration: underline;
}
/* ============================================================
   CUSTOMER UNIFIED AUTH & 9-SECTION ACCOUNT PORTAL STYLES
   ============================================================ */
/* ================= LUXURY CUSTOMER AUTH MODAL ================= */
.auth-box {
  max-width: 380px;
  width: min(380px, 92vw);
  padding: 22px 24px 20px;
  border-radius: 20px;
  background: #F8EEDB;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.22), 0 0 1px 1px rgba(0, 0, 0, 0.04);
  position: relative;
  box-sizing: border-box;
}

.auth-header-wrap {
  text-align: center;
  margin-bottom: 14px;
}

.auth-brand-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink2, #5E5870);
  margin-bottom: 3px;
}

.auth-main-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #1C1D3D;
  margin: 0 0 3px 0;
  line-height: 1.2;
}

.auth-main-subtitle {
  font-size: 13px;
  color: var(--ink2, #5E5870);
  line-height: 1.45;
  margin: 0;
}

/* Precision Segmented Tabs */
.auth-nav-tabs {
  display: flex;
  background: var(--surface-secondary, #F3E6CC);
  padding: 3.5px;
  border-radius: 11px;
  margin-bottom: 15px;
  gap: 3px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.auth-nav-tab {
  flex: 1;
  padding: 7px 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2, #5E5870);
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  user-select: none;
}

.auth-nav-tab:hover {
  color: var(--ink, #1C1D3D);
}

.auth-nav-tab.active {
  background: var(--surface-primary, #F8EEDB);
  color: var(--ink, #1C1D3D);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.04);
  font-weight: 600;
}

.auth-flow-step {
  animation: fadeInStep .22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInStep {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Form Controls Inside Auth Box */
.auth-box .form-group {
  margin-bottom: 11px;
}

.auth-box .form-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #666666;
  margin-bottom: 4px;
}

.auth-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.auth-field-header label {
  margin-bottom: 0 !important;
}

.auth-forgot-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2, #5E5870);
  text-decoration: none;
  transition: color 0.15s ease;
}

.auth-forgot-link:hover {
  color: #1C1D3D;
  text-decoration: underline;
}

.auth-box .form-control {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(28, 29, 61, 0.28);
  border-radius: 11px;
  font-size: 14px;
  color: #1C1D3D;
  background: #FFFBF3;
  box-sizing: border-box;
  font-family: inherit;
  transition: all 0.15s ease;
}

.auth-box .form-control:focus {
  border-color: #383C8C;
  outline: none;
  box-shadow: 0 0 0 3px rgba(56, 60, 140, 0.16);
}

.auth-box .form-control::placeholder {
  color: #7A748E;
  font-size: 13px;
}

/* Password Input & Show Button */
.auth-pwd-wrap {
  position: relative;
}

.auth-pwd-wrap .form-control {
  padding-right: 50px;
}

.btn-toggle-pwd {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  background: #F3E6CC;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: #555558;
  cursor: pointer;
  padding: 3px 7px;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-toggle-pwd:hover {
  background: #E6D5B5;
  color: #1C1D3D;
}

.auth-google-btn {
  width: 100%;
  height: 38px;
  border-radius: 9px;
  background: #F8EEDB;
  color: #1C1D3D;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid #dcdce0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}

.auth-google-btn:hover {
  background: #f7f7f8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.auth-google-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--ink2, #5E5870);
  font-size: 12px;
  margin: 16px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #e5e5e8;
}

.auth-divider span {
  padding: 0 10px;
}

/* Submit Button */
.auth-submit-btn {
  width: 100%;
  height: 38px;
  margin-top: 5px;
  border-radius: 9px;
  background: #1C1D3D;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid #1C1D3D;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-submit-btn:hover {
  background: #27272a;
  border-color: #27272a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.auth-submit-btn:active {
  transform: translateY(0);
}

/* Footer Switcher Note */
.auth-footer-note {
  text-align: center;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink2, #5E5870);
}

.auth-text-link {
  background: none;
  border: none;
  color: #1C1D3D;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: 11.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.15s ease;
}

.auth-text-link:hover {
  opacity: 0.75;
}

/* Terms & Inline Errors */
.auth-terms-box {
  margin: 6px 0 8px;
}

.auth-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: #737373;
  cursor: pointer;
}

.auth-checkbox-label input[type="checkbox"] {
  accent-color: #1C1D3D;
  width: 13px;
  height: 13px;
  cursor: pointer;
  margin: 0;
}

.auth-checkbox-label a {
  color: #1C1D3D;
  text-decoration: underline;
}

.auth-inline-error {
  background: #fff2f2;
  border: 1px solid #ffcdd2;
  color: #d32f2f;
  font-size: 10.5px;
  padding: 4px 8px;
  border-radius: 6px;
  margin-top: 4px;
}

/* 9-Section Account Portal */
.account-portal-box {
  max-width: 780px;
  width: min(780px, 94vw);
  max-height: min(88vh, calc(100dvh - 36px));
  margin: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 32px 36px;
  border-radius: 24px;
  background: #F8EEDB;
  box-shadow: 0 30px 80px rgba(0,0,0,0.22);
  box-sizing: border-box;
}
.account-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 20px;
}
/* The close button is the card's first child and has no stacking level. On a phone
   (responsive.css) the header is position: relative, so it paints over the button and
   takes its taps: the X was on screen and did nothing. */
#customerAccountCloseBtn { z-index: 2; }
.account-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgba(56,60,140,0.12);
  color: var(--indigo);
  padding: 4px 10px;
  border-radius: 20px;
}
/* The tabs WRAP; they do not scroll sideways.

   This was `flex-wrap: nowrap` with `overflow-x: auto` and the scrollbar hidden
   on both engines. Eight pills need 821px and the strip is 708px wide, so
   Security and Settings sat past the right edge with nothing to indicate they
   were there -- no scrollbar, no fade, no arrows. On a trackpad you could swipe
   blindly to them; with a mouse the Security and Settings tabs were simply
   unreachable, and nothing on screen suggested they existed.

   Wrapping shows all eight at every width. A second row costs ~40px of a modal
   that already scrolls vertically; an unreachable tab costs the whole feature. */
.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--hair);
}
.account-tab-btn {
  background: var(--grey, #F3E6CC);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2, #86868b);
  padding: 8px 16px;
  border-radius: 980px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease;
}
.account-tab-btn:hover {
  color: var(--ink, #1C1D3D);
  background: #E6D5B5;
}
.account-tab-btn.active {
  background: #1C1D3D !important;
  color: #ffffff !important;
  border-color: #1C1D3D !important;
}

/* Settings > preference rows. These used the photo plate (a fixed cream) as their fill with theme-coloured
   text on top, so on the dark sheet the title and the line under it were light-on-light and unreadable.
   Surface and text tokens both flip with the theme, so they cannot disagree. */
.account-pref {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  background: var(--surface-secondary);
  border: 1px solid var(--hair);
  border-radius: 14px;
  cursor: pointer;
}
.account-pref strong {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
  color: var(--ink);
}
.account-pref span {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink2);
}
.account-pref input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--indigo);
}

/* Order Cards */
.order-history-card {
  background: #F8EEDB;
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  transition: transform .2s, box-shadow .2s;
}
.order-history-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 14px;
}
.order-id-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  display: block;
}
.order-date-label {
  font-size: 12px;
  color: var(--ink2);
}
.order-status-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--grey);
  color: var(--ink);
}
.order-status-badge.status-confirmed, .order-status-badge.status-delivered {
  background: rgba(52,199,89,0.12);
  color: #28cd41;
}
.order-status-badge.status-processing, .order-status-badge.status-shipped {
  background: rgba(0,113,227,0.12);
  color: var(--blue);
}
.order-status-badge.status-cancelled {
  background: rgba(255,59,48,0.12);
  color: #ff3b30;
}
/* Money returned. Its own colour, not the cancelled red: a refund is a
   finished transaction, and a customer scanning their orders should be able to
   tell "we sent your money back" from "this never happened". */
.order-status-badge.status-refunded {
  background: rgba(139,92,246,0.12);
  color: #6d28d9;
}
.order-item-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
.order-item-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--grey);
  flex-shrink: 0;
}
.order-item-info {
  flex: 1;
  min-width: 0;
}
.order-item-info h5 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-item-info span {
  font-size: 11px;
  color: var(--ink2);
}
.order-item-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.order-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  margin-top: 12px;
  font-size: 13px;
}

/* Account Portal Actions & Form Buttons */
.account-portal-box button[type="submit"],
.account-tab-content button[type="submit"],
.account-portal-box .btn-primary,
#btnBagCheckoutModal {
  padding: 13px 28px;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: #1C1D3D;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

.account-portal-box button[type="submit"]:hover,
.account-tab-content button[type="submit"]:hover,
.account-portal-box .btn-primary:hover,
#btnBagCheckoutModal:hover {
  background: #000000;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.account-portal-box button[type="submit"]:active,
.account-tab-content button[type="submit"]:active,
.account-portal-box .btn-primary:active,
#btnBagCheckoutModal:active {
  transform: scale(0.96) !important;
}

#accountSignOutBtn,
#btnRevokeAllSessions,
.account-portal-box .btn-secondary {
  padding: 8px 18px;
  border-radius: 980px;
  font-size: 13px;
  font-weight: 600;
  background: #F3E6CC;
  color: #1C1D3D !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

#accountSignOutBtn:hover,
#btnRevokeAllSessions:hover,
.account-portal-box .btn-secondary:hover {
  background: #E6D5B5;
  color: #000000 !important;
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-1.5px);
}

#accountSignOutBtn:active,
#btnRevokeAllSessions:active,
.account-portal-box .btn-secondary:active {
  transform: scale(0.96) !important;
}

/* Empty Card */
.account-empty-card {
  text-align: center;
  padding: 48px 24px;
  background: var(--grey);
  border-radius: 18px;
  color: var(--ink2);
}
.account-empty-card svg {
  color: var(--ink2);
  margin-bottom: 12px;
}
.account-empty-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}
.account-empty-card p {
  font-size: 13px;
  margin: 0;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* Saved Addresses */
.saved-address-card {
  background: var(--grey);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  position: relative;
}
.saved-address-card.default {
  border-color: var(--blue);
  background: rgba(0,113,227,0.02);
}
.default-badge {
  font-size: 10px;
  font-weight: 800;
  color: var(--blue);
  background: rgba(0,113,227,0.12);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}
.btn-del-addr {
  background: none;
  border: none;
  color: var(--ink2);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all .15s;
}
.btn-del-addr:hover {
  color: #ff3b30;
  background: rgba(255,59,48,0.1);
}

/* Wishlist Grid inside Account (25% smaller compact card grid) */
.account-wishlist-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 12px;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .account-wishlist-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 10px;
  }
}
@media (max-width: 640px) {
  .account-wishlist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 8px;
  }
}

.account-wishlist-grid .pcard {
  flex: none;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
.account-wishlist-grid .pcard-plate {
  aspect-ratio: 1 / 1;
  background: #F3E6CC;
  border-radius: 8px;
  overflow: hidden;
}
.account-wishlist-grid .pcard-wish-btn {
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
}
.account-wishlist-grid .pcard-tag-red {
  font-size: 11px;
  margin-top: 8px;
}
.account-wishlist-grid .pname {
  font-size: 13px;
  margin-top: 2px;
  line-height: 1.25;
}
.account-wishlist-grid .pdesc {
  font-size: 12px;
  margin-top: 2px;
}
.account-wishlist-grid .pprice {
  font-size: 13px;
  margin-top: 4px;
}
.account-wishlist-grid .pcolor-swatches {
  margin-top: 4px;
  gap: 4px;
}
.account-wishlist-grid .pcolor-dot {
  width: 10px;
  height: 10px;
}
.account-wishlist-grid .pcard-add-cart-btn {
  height: 32px;
  font-size: 11px;
  padding: 0 10px;
  margin-top: 6px;
}



/* ============================================================
   FOOTER — 945 CLUB
   Four columns over a bottom bar, with an oversized wordmark behind.
   Colours come from tokens.css only, so the footer tracks the rest of
   the theme instead of drifting to its own greys.
   ============================================================ */
.club-footer {
  position: relative;
  overflow: hidden;              /* crops the wordmark; no horizontal scroll */
  background: #ede9dc;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--ink2);
  font-size: 14px;
}
.club-footer-inner {
  position: relative;
  padding: 64px 0 0;
}
.club-footer-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: 40px 32px;
  padding-bottom: 48px;
}

/* --- brand column --- */
.club-footer-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 18px;
  text-decoration: none;
  color: var(--ink);
}
.club-footer-logo .logo-main {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.club-footer-logo .logo-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.club-footer-blurb {
  max-width: 34ch;
  margin: 0 0 14px;
  line-height: 1.6;
  color: var(--ink2);
}
.club-footer-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink-tertiary);
}

/* --- link columns --- */
.club-footer-heading {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.club-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.club-footer-col a {
  color: var(--ink2);
  text-decoration: none;
  transition: color .18s ease;
}
.club-footer-col a:hover,
.club-footer-col a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- bottom bar --- */
.club-footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 0 22px;
  border-top: 1px solid var(--hair);
  font-size: 12.5px;
  color: var(--ink-tertiary);
}

/* --- oversized wordmark ---
   In normal flow BELOW the copyright bar, in a band of its own, so it never
   sits behind text. The negative bottom margin crops its descender space
   against the footer's own overflow:hidden, which is what gives it the
   half-cut look rather than floating in whitespace. */
.club-footer-mark {
  margin: 0 0 -0.2em;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(60px, 15.5vw, 250px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.8;
  color: var(--ink);
  opacity: 0.06;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}



/* ===== PDP: colour name, description and specs =====
   The modal showed a title, a price and a size and nothing else -- not the
   style code the customer quotes to support, not the colourway name printed on
   the box, not what the thing actually is. */
/* A class that sets `display` outranks the user-agent's `[hidden]` rule, so
   these need to say it themselves or el.hidden does nothing. */
.pv-colour-line[hidden],
.pv-details-block[hidden] { display: none !important; }

.pv-colour-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
}
.pv-colour-label {
  color: var(--ink-secondary, #5E5870);
}
.pv-colour-value {
  font-weight: 600;
  color: var(--ink-primary, #1C1D3D);
  /* Colourways run long -- "OLIVE GREY/BLACK-OFF NOIR-VARSITY RED" -- so let
     them wrap rather than push the panel wide. */
  overflow-wrap: anywhere;
}

.pv-details-block {
  margin: 18px 0 4px;
  padding-top: 18px;
  border-top: 1px solid var(--hair, rgba(0, 0, 0, .1));
}
.pv-details-copy {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-secondary, #5E5870);
}
.pv-spec-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  margin: 0;
  font-size: 13px;
}
.pv-spec-list dt {
  color: var(--ink-secondary, #5E5870);
}
.pv-spec-list dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink-primary, #1C1D3D);
  overflow-wrap: anywhere;
}
/* The style code is a reference customers copy, so make it selectable-looking
   and monospaced rather than prose. */
.pv-spec-list dd.pv-spec-code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .01em;
}


/* ===== Consent bar =====
   Anchored to the bottom rather than covering the page: the visitor can still
   read what they came for while deciding, and both choices are equally weighted
   buttons, because a reject that is harder to find than an accept is not a
   free choice. */
.consent-bar[hidden] { display: none !important; }
.consent-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 890; /* under the sheets and dialogs (895+): at 9998 it covered their buttons */
  background: var(--surface-primary, #fff);
  border-top: 1px solid var(--hair, rgba(0,0,0,.12));
  box-shadow: 0 -6px 24px rgba(0,0,0,.07);
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
}
.consent-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.consent-copy { flex: 1 1 460px; min-width: 0; }
.consent-title {
  margin: 0 0 4px; font-size: 14px; font-weight: 700;
  color: var(--ink-primary, #1C1D3D);
}
.consent-body {
  margin: 0; font-size: 12.5px; line-height: 1.55;
  color: var(--ink-secondary, #5E5870); max-width: 78ch;
}
.consent-body a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.consent-actions button {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 10px 22px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ink-primary, #1C1D3D);
  transition: opacity .15s ease;
}
.consent-reject { background: transparent; color: var(--ink-primary, #1C1D3D); }
.consent-accept { background: var(--ink-primary, #1C1D3D); color: var(--surface-primary, #fff); }
.consent-actions button:hover { opacity: .82; }
.consent-actions button:focus-visible {
  outline: 2px solid var(--blue, #383C8C); outline-offset: 2px;
}
@media (max-width: 640px) {
  .consent-inner { gap: 14px; }
  .consent-actions { width: 100%; }
  .consent-actions button { flex: 1; }
}

/* ===== Delete account ===== */
.danger-zone {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--hair, rgba(0,0,0,.12));
}
.danger-zone h4 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.danger-zone p {
  font-size: 13px; line-height: 1.55; color: var(--ink-secondary, #5E5870);
  margin: 0 0 14px; max-width: 68ch;
}
.btn-danger-outline {
  font: inherit; font-size: 13px; font-weight: 600; padding: 9px 18px;
  border-radius: 999px; cursor: pointer;
  background: transparent; color: #B3261E; border: 1px solid #B3261E;
}
[data-theme="dark"] .btn-danger-outline { color: #FF9B90; border-color: #FF9B90; }
.btn-danger-outline:hover { background: rgba(192,57,43,.07); }
.btn-danger-outline:focus-visible { outline: 2px solid #c0392b; outline-offset: 2px; }
.delete-confirm {
  margin-top: 14px; padding: 16px; border-radius: 12px;
  border: 1px solid rgba(192,57,43,.35); background: rgba(192,57,43,.04);
}
.delete-confirm[hidden] { display: none !important; }
.delete-confirm ul { margin: 8px 0 12px; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.delete-confirm input[type="text"] {
  width: 100%; max-width: 260px; padding: 9px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--hair, rgba(0,0,0,.2)); border-radius: 8px; margin-bottom: 12px;
}
.delete-confirm-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Brand stage hotspots for brands we do not stock.
   The stage art shows five brands; the catalogue currently holds one. Dimming
   the dead hotspots is the honest middle ground until the art is redrawn --
   see docs/07-known-gaps.md. */
.stage-pedestal-link[data-in-stock="false"],
.brand-card[data-in-stock="false"] {
  opacity: 0.38;
  filter: grayscale(1);
  cursor: not-allowed;
}
.stage-pedestal-link[data-in-stock="false"]:hover,
.brand-card[data-in-stock="false"]:hover {
  opacity: 0.5;
}

/* Controls for brands we do not stock.
   The `hidden` attribute alone is not enough: it sets display:none only in the
   UA stylesheet, so any author rule beats it -- and these labels and sheet
   links are display:flex, so they stayed on screen while reporting hidden ===
   true. This needs the !important to win. */
[data-hidden-reason="brand-not-stocked"] { display: none !important; }

/* ---------- brand logo image ----------
   Replaces the text wordmark. Sized by HEIGHT with width:auto, so a lockup of
   any shape drops in at the same visual height and simply takes the horizontal
   room it needs. The 2029 one is 1.89 wide against the last one's 1.58, and
   nothing here was retuned for it.

   Light and dark are separate files rather than a filter: the build paints one
   alpha in the site's ink and in the artwork's own off-white
   (scripts/build_brand_assets.py), and theme.css shows the one that matches. */
.logo-img {
  display: block;
  /* The asset is tight to its ink, so all 44 pixels are logo, with 8px of bar
     left either side. The wordmark is the bottom quarter of this lockup, so at
     44 its numerals stand about 10px -- which is why the phone size below does
     not go under 34. */
  height: 44px;
  width: auto;
  max-width: 100%;

  /* One pixel up, kept from the previous lockup (whose ink sat low in its
     box) and not re-tuned for this one. */
  position: relative;
  top: -1px;
}
.logo-img-full { height: 62px; }

.club-footer-logo .logo-img { height: 62px; }

@media (max-width: 720px) {
  /* The bar tightens before the logo does: 34 is the smallest height at which
     "945club" is still readable, and the nav links wrap below it anyway. */
  .logo-img { height: 34px; }
  .logo-img-full { height: 50px; }
}

.msheet-direct-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}
.msheet-direct-header:active {
  color: var(--ink);
}

/* ============================================================
   BRAND LOGO ANIMATION RIBBON (CONTINUOUS SEAMLESS MARQUEE)
   ============================================================ */
.brands-marquee-sec {
  position: relative;
  width: 100%;
  height: clamp(54px, 4.5vw, 65px);
  background: #F8EEDB;
  border-top: none;
  border-bottom: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

.brands-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: brandMarqueeInfinite 21s linear infinite;
  will-change: transform;
}

.brands-marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(25px, 3.6vw, 50px);
  flex-shrink: 0;
}

.brand-divider {
  width: 1px;
  height: 26px;
  background: rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.brand-strip-logo {
  display: block;
  width: auto;
  object-fit: contain;
  filter: contrast(1.04);
}

.logo-nike {
  height: 28px;
}

.logo-adidas {
  height: 29px;
}

.logo-puma {
  height: 26.5px;
}

.logo-asics {
  height: 23px;
}

.logo-skechers {
  height: 17.5px;
}

.logo-crocs {
  height: 19.5px;
}

@keyframes brandMarqueeInfinite {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-33.333333%, 0, 0);
  }
}

@media (max-width: 600px) {
  .brands-marquee-sec {
    height: 50px;
  }
  .brand-divider {
    height: 21px;
  }
  .logo-nike { height: 23px; }
  .logo-adidas { height: 24px; }
  .logo-puma { height: 22px; }
  .logo-asics { height: 20px; }
  .logo-skechers { height: 15px; }
  .logo-crocs { height: 16px; }
}

/* ============================================================
   PROMOTIONAL CAMPAIGN BANNER CAROUSEL
   ============================================================ */
.nh-banner-carousel-sec {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.nh-banner-carousel-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  position: relative;
}

.nh-banner-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 1774 / 887;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  user-select: none;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}

.nh-banner-carousel.is-dragging,
.nh-banner-carousel.is-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
}

.nh-banner-track {
  display: grid;
  width: 100%;
  height: 100%;
}

.nh-banner-slide {
  /* Slides stack and crossfade; the incoming one settles from a slight zoom. */
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  line-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.75s;
}
.nh-banner-slide.active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.nh-banner-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
  line-height: 0;
  overflow: hidden;
}

.nh-banner-pic {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.nh-banner-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 6s cubic-bezier(0.16, 1, 0.3, 1);
}
.nh-banner-slide.active .nh-banner-img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .nh-banner-slide, .nh-banner-img, .nh-bc-copy, .nh-bc-stage { transition: none; transform: none; }
}

/* Pagination indicator (dots + active elongated pill, matching reference) */
.nh-banner-dots {
  position: absolute;
  bottom: clamp(16px, 2.4vw, 32px);
  right: clamp(18px, 2.8vw, 36px);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.nh-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The dot stays small; its hit area is 24 px tall and fills the gap to its neighbours
   (half the gap each side, so no two overlap), as #heroDotsNav's dots do. */
.nh-banner-dot { position: relative; }
.nh-banner-dot::before { content: ''; position: absolute; inset: -8px -4px; }
.nh-banner-dot:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.2);
}

.nh-banner-dot.active {
  width: 24px;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}



@media (max-width: 768px) {
  .nh-banner-carousel {
    aspect-ratio: 948 / 1659;
    border-radius: 0;
  }
  .nh-banner-carousel-sec {
    padding: 0;
    margin: 0;
  }

  .nh-banner-dots {
    bottom: 12px;
    right: 14px;
    padding: 5px 9px;
    gap: 6px;
  }
  .nh-banner-dot {
    width: 6px;
    height: 6px;
  }
  .nh-banner-dot::before { inset: -9px -3px; }
  .nh-banner-dot.active {
    width: 18px;
  }
}

/* Category slides drawn by the page (index.html .nh-bc, filled by js/home.js paintBanners):
   the "New drop" banner's layout in the site's own type -- a cream wall, a burgundy block,
   the category in heavy capitals, a burgundy Shop now -- with a real in-stock product on a
   cream plate. Fixed colours, as the image banners have: the dark theme leaves them alone. */
.nh-banner-link.nh-bc-link {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  padding: 0 clamp(24px, 5.5vw, 96px);
  background: radial-gradient(120% 90% at 18% 30%, #FBF3E4 0%, #EFE3CC 62%, #E2D2B5 100%);
  color: #1C1D3D;
  line-height: 1.2;
  cursor: default;
}
.nh-bc-link::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 40%;
  background: linear-gradient(180deg, #6E1A2A, #4A0F1B);
}
.nh-bc-link::after {
  display: none;
}
.nh-bc-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(6px, 0.8vw, 12px);
  min-width: 0;
}
.nh-bc-site { font: 700 clamp(11px, 1vw, 15px) / 1 'Outfit', sans-serif; letter-spacing: 0.12em; }
.nh-bc-brand { font: 900 clamp(22px, 3.2vw, 54px) / 0.9 'Outfit', sans-serif; letter-spacing: -0.02em; text-transform: uppercase; }
.nh-bc-title { font: 900 clamp(38px, 6.2vw, 112px) / 0.88 'Outfit', sans-serif; letter-spacing: -0.045em; text-transform: uppercase; }
.nh-bc-sub { display: flex; align-items: center; gap: 14px; font: 700 clamp(13px, 1.8vw, 28px) / 1 'Outfit', sans-serif; letter-spacing: 0.02em; text-transform: uppercase; }
.nh-bc-sub::before { content: ''; width: clamp(26px, 4vw, 70px); height: 3px; background: currentColor; }
.nh-bc-ctas { display: flex; flex-wrap: wrap; gap: clamp(8px, 0.9vw, 14px); margin-top: clamp(8px, 1.4vw, 22px); }
/* Two classes deep: `.nh a { color: inherit }` would otherwise take the button's colour. */
.nh-bc-ctas :is(.nh-bc-btn, .nh-bc-all) {
  padding: clamp(10px, 1vw, 16px) clamp(20px, 2.2vw, 36px);
  border: 2px solid transparent;
  border-radius: 999px;
  font: 700 clamp(12px, 1.3vw, 20px) / 1 'Outfit', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, color 0.3s ease;
}
.nh-bc-ctas .nh-bc-btn { background: linear-gradient(180deg, #7E1F31, #4A0F1B); color: #F8EEDB; box-shadow: 0 10px 24px -10px rgba(74, 15, 27, 0.7); }
.nh-bc-ctas .nh-bc-all { border-color: #1C1D3D; color: #1C1D3D; }
.nh-bc-ctas .nh-bc-all:hover { background: #1C1D3D; color: #F8EEDB; }
.nh-bc-ctas :is(.nh-bc-btn, .nh-bc-all):hover { transform: translateY(-2px); }
.nh-bc-ctas :is(.nh-bc-btn, .nh-bc-all):focus-visible { outline: 3px solid #383C8C; outline-offset: 3px; }
.nh-bc-pick { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 clamp(10px, 0.95vw, 14px) / 1.3 'Inter', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #5E5870; }
.nh-bc-stage {
  display: block;
  position: relative;
  z-index: 1;
  justify-self: center;
  width: min(84%, 38vw);
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: #FFF6E3;
  box-shadow: 0 40px 60px -30px rgba(28, 29, 61, 0.45);
  overflow: hidden;
}
.nh-bc-img { display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 8%; object-fit: contain; mix-blend-mode: multiply; }
/* Arriving: the words and the plate settle as the slide fades in. */
.nh-bc-copy, .nh-bc-stage { transform: translateY(18px); transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); }
.nh-banner-slide.active .nh-bc-copy, .nh-banner-slide.active .nh-bc-stage { transform: none; }
.nh-banner-slide.active .nh-bc-stage { transition-delay: 0.12s; }
@media (max-width: 768px) {
  .nh-banner-link.nh-bc-link { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: center; gap: 28px; padding: 13% 7% 18%; }
  /* Below the words, behind the plate: dark capitals never cross it. */
  .nh-bc-link::before { top: 46%; right: 0; width: 50%; }
  .nh-bc-link::after { display: none; }
  .nh-bc-brand { font-size: 8vw; }
  .nh-bc-title { font-size: 12.5vw; }
  .nh-bc-sub { font-size: 4.6vw; }
  .nh-bc-ctas :is(.nh-bc-btn, .nh-bc-all) { font-size: 3.6vw; }
  .nh-bc-pick { font-size: 2.9vw; }
  .nh-bc-stage { width: 84%; align-self: end; }
}