/* =====================================================================
   Blue Collar Empire — theme.css
   Ports the original Tailwind-based design system 1:1 into plain CSS.
   Color tokens (--color-*) are injected live by functions.php from the
   Customizer (Section 6 / 22.9); everything else lives here.
   ===================================================================== */

/* ---- Non-color design tokens ---------------------------------------- */
:root {
  --radius: 0.5rem;
  --shadow-soft: 0 6px 24px -12px hsl(222 47% 11% / 0.14);
  --shadow-elevated: 0 24px 60px -24px hsl(222 47% 11% / 0.22);
  --font-display: "Barlow Condensed", "Barlow", "Inter", sans-serif;
  --font-sans: "Inter", "Barlow", system-ui, -apple-system, sans-serif;
  --header-height: 80px;
  --header-height-mobile: 64px;
}

/* ---- Reset / base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: clip; margin: 0; }
body {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; display: block; }
button { font: inherit; background: none; border: none; cursor: pointer; padding: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
/* Author CSS `display` rules override the UA [hidden] stylesheet — keep hidden truly hidden. */
[hidden] { display: none !important; }

/* Pointer on every interactive control (links, buttons, pills, media toggles, etc.). */
a[href],
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
[data-cart-open],
[data-cart-close],
[data-cart-empty],
[data-cart-remove],
[data-cart-qty-update],
[data-product-add],
[data-product-buynow],
[data-shop-viewmore],
[data-scroll-top],
[data-mobile-nav-toggle],
.category-pill,
.product-gallery__thumb,
.owner-gallery__dot,
.owner-gallery__prev,
.owner-gallery__next,
.theme-qty-minus,
.theme-qty-plus,
.merch-card__buy-btn,
.theme-card-link,
label[for],
summary,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
select {
  cursor: pointer;
}
button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}
input, textarea, select { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; font-size: inherit; }
p { margin: 0; }

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-weight: 800; }

/* Nested italic accent inside headings/font-display -> bold amber uppercase */
h1 .italic, h2 .italic, h3 .italic, h4 .italic, .font-display .italic {
  font-style: normal;
  font-weight: 800;
  color: var(--color-amber);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.italic { font-style: italic; }

.font-sans { font-family: var(--font-sans); text-transform: none; letter-spacing: normal; }

section[id] { scroll-margin-top: var(--theme-scroll-offset, 96px); }

::selection { background: color-mix(in srgb, var(--color-navy) 85%, transparent); color: #fff; }

/* ---- Global cover-image exclusion list (Section 15.1) ---------------- */
img:not(.cover-img) { max-width: 100%; height: auto; }
.cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- Layout containers ------------------------------------------------ */
.container-wide {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .container-wide {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .container-wide {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

/* ---- Global micro-interactions ---------------------------------------- */
a, button, [role="button"] {
  transition: color 260ms cubic-bezier(0.22,1,0.36,1),
              background-color 260ms cubic-bezier(0.22,1,0.36,1),
              border-color 260ms cubic-bezier(0.22,1,0.36,1),
              box-shadow 320ms cubic-bezier(0.22,1,0.36,1),
              transform 320ms cubic-bezier(0.22,1,0.36,1),
              opacity 260ms ease;
}
a:hover, button:hover, [role="button"]:hover { transform: translateY(-1px); }
a:active, button:active, [role="button"]:active { transform: translateY(0) scale(0.98); }
a svg, button svg { transition: transform 380ms cubic-bezier(0.34,1.56,0.64,1), color 260ms ease, opacity 260ms ease; }
a:hover svg, button:hover svg { transform: translateY(-1px) rotate(-6deg) scale(1.12); }
a:active svg, button:active svg { transform: scale(0.94); }
img { transition: transform 700ms cubic-bezier(0.22,1,0.36,1), filter 700ms ease; }

@media (prefers-reduced-motion: reduce) {
  a, button, [role="button"], a svg, button svg, img { transition: none !important; transform: none !important; }
}

/* ---- Link underline ---------------------------------------------------- */
.link-underline { position: relative; display: inline-block; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform 450ms cubic-bezier(0.22,1,0.36,1);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left center; }

/* ---- Hover helpers ------------------------------------------------------ */
.hover-lift { transition: transform 400ms cubic-bezier(0.22,1,0.36,1), box-shadow 400ms cubic-bezier(0.22,1,0.36,1), border-color 400ms ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); }

.card-tilt { transition: transform 500ms cubic-bezier(0.22,1,0.36,1), box-shadow 500ms cubic-bezier(0.22,1,0.36,1), border-color 400ms ease; transform-style: preserve-3d; }
.card-tilt:hover { transform: translateY(-6px) rotateX(2deg) rotateY(-2deg) scale(1.015); box-shadow: 0 30px 60px -25px color-mix(in srgb, var(--color-navy) 35%, transparent); }

.img-zoom-wrap { overflow: hidden; }
.img-zoom { transition: transform 900ms cubic-bezier(0.22,1,0.36,1), filter 700ms ease; }
.img-zoom-wrap:hover .img-zoom { transform: scale(1.06); }

/* ---- Icon sizing helpers ------------------------------------------------ */
.icon-xxs { width: 0.875rem; height: 0.875rem; }
.icon-xs { width: 1rem; height: 1rem; }
.icon-sm { width: 1.25rem; height: 1.25rem; }
.icon-md { width: 1.75rem; height: 1.75rem; }
.icon-lg { width: 2.5rem; height: 2.5rem; }
.icon-navy { color: var(--color-navy); }
.icon-star { width: 0.875rem; height: 0.875rem; color: var(--color-amber-btn); fill: currentColor; stroke-width: 0; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  white-space: nowrap; border-radius: 9999px; font-size: 15px; font-weight: 500;
  border: 1px solid transparent; cursor: pointer;
  height: 2.75rem; padding: 0 1.5rem;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
  text-transform: none;
  background-color: var(--color-primary);
  color: var(--color-background);
}
.btn:hover { transform: scale(1.02); box-shadow: var(--shadow-soft); }
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn.is-disabled { pointer-events: none; opacity: 0.6; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-lg { height: 3rem; padding: 0 1.75rem; }
.btn-full-width { width: 100%; }
.btn-outline { background-color: transparent; color: var(--color-foreground); border-color: color-mix(in srgb, var(--color-foreground) 25%, transparent); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-ghost { background-color: transparent; color: color-mix(in srgb, var(--color-foreground) 60%, transparent); border-color: transparent; }
.btn-ghost:hover { background-color: color-mix(in srgb, var(--color-foreground) 6%, transparent); }

/* Hero + precontact CTAs keep sentence case (Section 2.2) */
.btn-hero-primary, .btn-hero-outline, .btn-precontact { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; font-size: 14px; }
.btn-hero-primary {
  background-color: var(--color-amber-btn); color: #0f172a; border-color: var(--color-amber-btn);
  box-shadow: 0 10px 25px -8px color-mix(in srgb, var(--color-amber-btn) 60%, transparent);
}
.btn-hero-primary:hover { background-color: color-mix(in srgb, var(--color-amber-btn) 88%, white 12%); }
.btn-hero-outline { background-color: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn-hero-outline:hover { background-color: #fff; color: #0f172a; }
.btn-precontact {
  background-color: var(--color-amber-btn); color: #0f172a; border-color: var(--color-amber-btn);
  box-shadow: 0 10px 25px -8px color-mix(in srgb, var(--color-amber-btn) 60%, transparent);
}
.btn-precontact:hover { background-color: color-mix(in srgb, var(--color-amber-btn) 88%, white 12%); box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--color-amber-btn) 40%, transparent); }

/* ---- Section heading / eyebrow shared primitives ----------------------- */
.eyebrow { font-size: 15px; letter-spacing: 0.4em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 60%, transparent); margin-bottom: 1.5rem; font-weight: 500; }
.eyebrow--crimson { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.4em; color: var(--color-crimson); font-weight: 700; margin-bottom: 1.25rem; text-transform: uppercase; }
.section-desc { margin-top: 1.25rem; font-size: 15px; line-height: 1.7; color: color-mix(in srgb, var(--color-foreground) 70%, transparent); max-width: 42rem; margin-left: auto; margin-right: auto; text-transform: none; font-family: var(--font-sans); }
.section-intro { text-align: center; margin-bottom: 3.5rem; }

/* ---- Animations --------------------------------------------------------- */
@keyframes theme-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes theme-slide-in-bottom { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes theme-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.animate-fade-in { animation: theme-fade-in 0.7s ease-out both; }
.animate-slide-in-bottom { animation: theme-slide-in-bottom 0.9s cubic-bezier(0.22,1,0.36,1) both; }
.animate-delay-1 { animation-delay: 120ms; }
.animate-delay-2 { animation-delay: 240ms; }

[data-aos] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 900ms cubic-bezier(0.22,1,0.36,1), transform 900ms cubic-bezier(0.22,1,0.36,1), filter 900ms cubic-bezier(0.22,1,0.36,1);
}
[data-aos].is-revealed { opacity: 1; transform: translateY(0) translateX(0) scale(1); filter: blur(0); }

.reveal-item { opacity: 0; transform: translateY(20px); transition: opacity 700ms ease-out, transform 700ms ease-out; }
.reveal-item.is-revealed, .reveal-item.is-visible { opacity: 1; transform: translateY(0); }

/* Customizer preview fallback — never leave reveal content hidden in the editor */
body.is-customizer [data-aos],
body.is-customizer .reveal-item {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

@keyframes theme-skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton-shimmer {
  background: linear-gradient(90deg, var(--color-muted) 0%, var(--color-secondary) 50%, var(--color-muted) 100%);
  background-size: 200% 100%; animation: theme-skeleton-shimmer 1.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-aos], .reveal-item, .skeleton-shimmer { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important; }
}

/* =====================================================================
   Header
   ===================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; width: 100%;
  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
  background-color: transparent; border-bottom: 1px solid transparent;
}
/* Sit below the WP admin bar so the fixed header / drawer do not overlap it. */
body.admin-bar .site-header { top: 32px; }
body.admin-bar .theme-scroll-progress { top: 32px !important; }
body.admin-bar #theme-cart-drawer {
  top: 32px;
  height: calc(100% - 32px);
}
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
  body.admin-bar .theme-scroll-progress { top: 46px !important; }
  body.admin-bar #theme-cart-drawer {
    top: 46px;
    height: calc(100% - 46px);
  }
}
body.admin-bar section[id] { scroll-margin-top: var(--theme-scroll-offset, 128px); }
@media screen and (max-width: 782px) {
  body.admin-bar section[id] { scroll-margin-top: var(--theme-scroll-offset, 142px); }
}
.site-header.is-solid {
  background-color: color-mix(in srgb, #ffffff 95%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 16px rgba(15,23,42,0.06);
}
.site-header__inner {
  width: 100%; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between;
  height: 64px; gap: 1rem;
}
@media (min-width: 640px) { .site-header__inner { padding: 0 3rem; } }
@media (min-width: 1024px) { .site-header__inner { padding: 0 6rem; height: 80px; } }
@media (min-width: 1280px) { .site-header__inner { padding: 0 10rem; } }

.site-brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex-shrink: 0; }
.site-logo-img { height: var(--logo-height, 56px); width: auto; object-fit: contain; user-select: none; transition: transform 500ms ease; max-height: 44px; }
@media (min-width: 1024px) { .site-logo-img { max-height: var(--logo-height, 56px); } }
.site-brand:hover .site-logo-img { transform: scale(1.05) rotate(-3deg); }
.site-brand__text { display: none; flex-direction: column; line-height: 1.2; }
@media (min-width: 640px) { .site-brand__text { display: flex; } }
.site-brand__line1 { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; transition: color 300ms ease; color: var(--color-foreground); }
.site-brand__line2 { font-family: system-ui, monospace; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600; color: var(--color-crimson); transition: color 300ms ease; }
@media (min-width: 1024px) { .site-brand__line1 { font-size: 17px; } }

.site-header.is-transparent .site-brand__line1 { color: #fff; filter: drop-shadow(0 1px 8px rgba(0,0,0,0.55)); }
.site-header.is-transparent .site-brand__line2 { color: #fbbf24; filter: drop-shadow(0 1px 6px rgba(0,0,0,0.6)); }

.site-nav { display: none; align-items: center; gap: 0.25rem; flex: 1; justify-content: center; }
@media (min-width: 1024px) { .site-nav { display: flex; } }
.theme-nav-list { display: flex; align-items: center; gap: 0.25rem; }
.theme-nav-list .theme-nav-link {
  position: relative; display: inline-block; padding: 0.5rem 1.25rem; font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; border-radius: 0.375rem; white-space: nowrap;
  color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
  transition: color 300ms ease;
}
.theme-nav-list .theme-nav-link:hover, .theme-nav-list .theme-nav-link.is-active { color: var(--color-navy); }
.site-header.is-transparent .theme-nav-list .theme-nav-link { color: rgba(255,255,255,0.9); filter: drop-shadow(0 1px 6px rgba(0,0,0,0.55)); }
.site-header.is-transparent .theme-nav-list .theme-nav-link:hover,
.site-header.is-transparent .theme-nav-list .theme-nav-link.is-active { color: #fcd34d; }
.theme-nav-list .theme-nav-link.is-active::after {
  content: ""; position: absolute; left: 1.25rem; right: 1.25rem; bottom: -1px; height: 2px; background: var(--color-amber-btn);
}

.site-header__actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.cart-toggle, .mobile-nav-toggle {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 0.375rem;
  color: var(--color-foreground); transition: color 300ms ease, background-color 300ms ease;
}
.cart-toggle:hover, .mobile-nav-toggle:hover { color: var(--color-amber-btn); background-color: color-mix(in srgb, var(--color-foreground) 6%, transparent); }
.site-header.is-transparent .cart-toggle, .site-header.is-transparent .mobile-nav-toggle { color: #fff; }
.site-header.is-transparent .cart-toggle:hover, .site-header.is-transparent .mobile-nav-toggle:hover { color: #fcd34d; background-color: rgba(255,255,255,0.1); }
.mobile-nav-toggle { display: inline-flex; }
@media (min-width: 1024px) { .mobile-nav-toggle { display: none; } }

.theme-cart-count {
  position: absolute; top: -2px; right: -2px; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  color: #fff; background-color: var(--color-crimson);
}
.theme-cart-count:empty { display: none; }

.mobile-nav { display: none; border-top: 1px solid var(--color-border); background-color: #fff; }
.mobile-nav.is-open { display: block; animation: theme-fade-in 0.3s ease-out; }
.mobile-nav__inner { padding: 0.75rem 1.5rem 1rem; display: flex; flex-direction: column; }
@media (min-width: 640px) { .mobile-nav__inner { padding: 0.75rem 2rem 1.25rem; } }
/* Fallback + WP menu both render as vertical stacks inside the hamburger panel. */
.mobile-nav .theme-nav-list,
.theme-mobile-nav-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}
.mobile-nav .theme-nav-list li,
.theme-mobile-nav-list li { width: 100%; }
.mobile-nav .theme-nav-list .theme-nav-link,
.mobile-nav .theme-nav-list li a,
.theme-mobile-nav-list .theme-nav-link,
.theme-mobile-nav-list li a {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
  color: color-mix(in srgb, var(--color-foreground) 90%, transparent);
  border-radius: 0;
}
.mobile-nav .theme-nav-list li:last-child .theme-nav-link,
.mobile-nav .theme-nav-list li:last-child a,
.theme-mobile-nav-list li:last-child a,
.theme-mobile-nav-list li:last-child .theme-nav-link { border-bottom: 0; }
.mobile-nav .theme-nav-list .theme-nav-link:hover,
.theme-mobile-nav-list .theme-nav-link:hover { color: var(--color-navy); }
.mobile-nav .theme-nav-list .theme-nav-link.is-active::after { display: none; }

/* =====================================================================
   Side cart drawer + overlay
   ===================================================================== */
#theme-cart-overlay {
  position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--color-foreground) 30%, transparent);
  opacity: 0; pointer-events: none; transition: opacity 300ms ease;
}
body.cart-open #theme-cart-overlay { opacity: 1; pointer-events: auto; }

#theme-cart-drawer {
  position: fixed; right: 0; top: 0; height: 100%; width: 100%; max-width: 28rem; z-index: 51;
  background-color: var(--color-background); box-shadow: var(--shadow-elevated);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 400ms cubic-bezier(0.22,1,0.36,1);
}
body.cart-open #theme-cart-drawer { transform: translateX(0); }
#theme-cart-drawer.is-updating { opacity: 0.6; pointer-events: none; }

.cart-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent); }
.cart-drawer__title { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-foreground); }
.cart-drawer__close { padding: 0.375rem; border-radius: 9999px; }
.cart-drawer__close:hover { background-color: color-mix(in srgb, var(--color-foreground) 6%, transparent); }

.cart-drawer__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; }
.cart-empty-icon { width: 3rem; height: 3rem; color: color-mix(in srgb, var(--color-foreground) 30%, transparent); margin-bottom: 1rem; }
.cart-drawer__empty-text { color: color-mix(in srgb, var(--color-foreground) 65%, transparent); margin-bottom: 1.5rem; font-size: 15px; }

.cart-drawer__body { flex: 1; overflow: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.cart-drawer__item { display: flex; gap: 1rem; }
.cart-drawer__item-thumb { width: 5rem; height: 6rem; background-color: var(--color-muted); border-radius: 0.375rem; overflow: hidden; flex-shrink: 0; }
.cart-drawer__item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-drawer__item-info { flex: 1; min-width: 0; }
.cart-drawer__item-name { font-size: 15px; font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; font-family: var(--font-sans); }
.cart-drawer__item-name:hover { color: var(--color-primary); }
.cart-drawer__item-price { font-size: 15px; color: color-mix(in srgb, var(--color-foreground) 60%, transparent); margin-top: 0.125rem; }
.cart-drawer__item-controls { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.cart-drawer__qty-btn { padding: 0.25rem; border-radius: 0.25rem; }
.cart-drawer__qty-btn:hover { background-color: var(--color-muted); }
.cart-drawer__qty-value { font-size: 15px; width: 1.5rem; text-align: center; }
.cart-drawer__remove-btn { margin-left: auto; font-size: 15px; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); }
.cart-drawer__remove-btn:hover { color: var(--color-crimson); }

.cart-drawer__footer { padding: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent); display: flex; flex-direction: column; gap: 1rem; background-color: color-mix(in srgb, var(--color-secondary) 40%, transparent); }
.cart-drawer__subtotal-row { display: flex; justify-content: space-between; font-size: 15px; }
.cart-drawer__subtotal-label { color: color-mix(in srgb, var(--color-foreground) 65%, transparent); }
.cart-drawer__subtotal-value { font-weight: 500; }
.cart-drawer__note { font-size: 15px; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); }

/* =====================================================================
   Hero
   ===================================================================== */
.hero-section {
  position: relative; min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background-color: #0A0A0A;
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.8) 100%);
}
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  color: #fff;
  padding-top: 8rem;
  padding-bottom: 6rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
@media (min-width: 640px) {
  .hero-content {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .hero-content {
    padding-top: 10rem;
    padding-bottom: 8rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
.hero-badge-wrap { display: flex; justify-content: center; margin-bottom: 2rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 1rem; border-radius: 9999px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); font-size: 13px;
  letter-spacing: 0.32em; text-transform: uppercase; color: #fff; font-weight: 700; backdrop-filter: blur(4px);
}
.hero-title {
  font-family: var(--font-display); color: #fff; line-height: 0.98; margin: 0 auto; max-width: 64rem;
  filter: drop-shadow(0 2px 20px rgba(0,0,0,0.55)); font-weight: 800;
  font-size: clamp(2.4rem, 6.4vw, 4.5rem); letter-spacing: 0.005em; text-transform: uppercase;
}
.hero-title__accent { font-style: normal; font-weight: 800; color: var(--color-amber-btn); text-transform: uppercase; letter-spacing: 0.01em; }
.hero-subtitle {
  margin-top: 2rem; max-width: 42rem; margin-left: auto; margin-right: auto; font-size: 16px; color: rgba(255,255,255,0.9);
  line-height: 1.6; filter: drop-shadow(0 1px 10px rgba(0,0,0,0.4)); font-family: var(--font-sans); text-transform: none;
}
@media (min-width: 640px) { .hero-subtitle { font-size: 18px; } }
.hero-actions { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; justify-content: center; }
@media (min-width: 640px) { .hero-actions { flex-direction: row; gap: 1rem; } }

/* =====================================================================
   About
   ===================================================================== */
.about-section { padding: 6rem 0; }
@media (min-width: 768px) { .about-section { padding: 8rem 0; } }
.about-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
@media (min-width: 1024px) { .about-grid { grid-template-columns: repeat(12, 1fr); gap: 5rem; } }
.about-col-left { grid-column: 1 / -1; }
@media (min-width: 1024px) { .about-col-left { grid-column: span 5; } }
.about-col-right { grid-column: 1 / -1; }
@media (min-width: 1024px) { .about-col-right { grid-column: span 7; padding-left: 2.5rem; } }

.about-heading { font-size: 2.25rem; line-height: 1.05; color: var(--color-foreground); }
@media (min-width: 768px) { .about-heading { font-size: 3rem; } }
@media (min-width: 1024px) { .about-heading { font-size: 3.6rem; } }
.about-heading__accent { display: inline-block; transition: transform 500ms ease; }
.about-col-left:hover .about-heading__accent { transform: rotate(-2deg) scale(1.03); }
.about-lead { margin-top: 1.25rem; font-size: 15px; color: color-mix(in srgb, var(--color-foreground) 65%, transparent); line-height: 1.6; max-width: 24rem; text-transform: none; font-family: var(--font-sans); }

.about-quote-figure { margin-top: 3rem; padding-top: 2rem; }
.about-quote { position: relative; font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.3; color: color-mix(in srgb, var(--color-foreground) 90%, transparent); padding-left: 1.5rem; border-left: 4px solid transparent; text-transform: none; font-weight: 400; transition: border-color 500ms ease, transform 500ms ease; }
@media (min-width: 768px) { .about-quote { font-size: 1.8rem; } }
.about-quote-figure:hover .about-quote { border-color: var(--color-crimson); transform: translateX(4px); }
.about-quote-caption { margin-top: 1.25rem; font-size: 15px; letter-spacing: 0.32em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 60%, transparent); font-weight: 500; padding-left: 1.5rem; transition: color 300ms ease; }
.about-quote-figure:hover .about-quote-caption { color: var(--color-navy); }

.about-founded-card { margin-top: 2.5rem; border-radius: 1rem; border: 1px solid var(--color-border); background-color: var(--color-secondary); padding: 1.25rem; transition: all 500ms ease; }
.about-founded-card:hover { border-color: var(--color-navy); background-color: #fff; box-shadow: var(--shadow-elevated); transform: translateY(-4px); }
.about-founded-label { font-size: 15px; letter-spacing: 0.32em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); margin-bottom: 0.5rem; transition: color 300ms ease; }
.about-founded-card:hover .about-founded-label { color: var(--color-crimson); }
.about-founded-text { font-size: 15px; font-weight: 500; text-transform: none; font-family: var(--font-sans); }
.about-founded-rule { margin-top: 0.75rem; display: block; height: 1px; width: 1.5rem; background-color: color-mix(in srgb, var(--color-foreground) 20%, transparent); transition: all 500ms ease; }
.about-founded-card:hover .about-founded-rule { width: 4rem; background-color: var(--color-amber-btn); }

.about-mission-heading { font-size: 1.875rem; line-height: 1.15; color: var(--color-foreground); margin-bottom: 2rem; transition: color 500ms ease; cursor: default; font-weight: 400; text-transform: none; font-family: var(--font-display); }
@media (min-width: 768px) { .about-mission-heading { font-size: 2.25rem; } }
.about-mission-heading:hover { color: var(--color-navy); }
.about-mission-body { display: flex; flex-direction: column; gap: 1.5rem; font-size: 15px; line-height: 1.75; color: color-mix(in srgb, var(--color-foreground) 75%, transparent); font-family: var(--font-sans); text-transform: none; }
@media (min-width: 768px) { .about-mission-body { font-size: 16px; } }
.about-mission-accent { color: color-mix(in srgb, var(--color-foreground) 90%, transparent); font-size: 1.125rem; }
@media (min-width: 768px) { .about-mission-accent { font-size: 1.25rem; } }

.about-stats { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1rem; border-top: 1px solid var(--color-border); padding-top: 2rem; }
@media (min-width: 640px) { .about-stats { grid-template-columns: repeat(3, 1fr); } }
.about-stat { cursor: default; border-radius: 0.75rem; padding: 1rem; margin: -0.25rem; border: 1px solid transparent; transition: all 500ms ease; }
.about-stat:hover { border-color: var(--color-border); background-color: #fff; box-shadow: var(--shadow-soft); transform: translateY(-4px); }
.about-stat__value { font-size: 1.5rem; color: var(--color-foreground); transition: color 300ms ease; font-weight: 400; text-transform: none; font-family: var(--font-display); }
@media (min-width: 768px) { .about-stat__value { font-size: 1.875rem; } }
.about-stat:hover .about-stat__value { color: var(--color-navy); }
.about-stat__label { margin-top: 0.25rem; font-size: 13px; text-transform: uppercase; letter-spacing: 0.18em; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); line-height: 1.5; }
.about-stat__rule { margin-top: 0.75rem; display: block; height: 2px; width: 1.5rem; background-color: color-mix(in srgb, var(--color-foreground) 20%, transparent); transition: all 500ms ease; }
.about-stat:hover .about-stat__rule { width: 3.5rem; background-color: var(--color-amber-btn); }

/* =====================================================================
   Academies
   ===================================================================== */
.academies-section { padding: 6rem 0; background-color: var(--color-background); }
@media (min-width: 768px) { .academies-section { padding: 8rem 0; } }
.academies-heading { font-size: clamp(1.8rem, 4.2vw, 2.5rem); line-height: 1.02; color: var(--color-foreground); }
.academies-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .academies-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .academies-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.academy-card { display: flex; flex-direction: column; border-radius: 1rem; border: 1px solid var(--color-border); background-color: #fff; overflow: hidden; }
.academy-card:hover { border-color: var(--color-navy); }
.academy-card:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }
.academy-card__media { position: relative; aspect-ratio: 4/3; background-color: var(--color-muted); }
.academy-card__image { position: absolute; inset: 0; }
.academy-card__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,0.7), rgba(15,23,42,0.1), transparent); }
.academy-card__icon { position: absolute; top: 0.75rem; left: 0.75rem; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-amber-btn); box-shadow: var(--shadow-soft); color: #0f172a; }
.academy-card__tag { position: absolute; top: 0.75rem; right: 0.75rem; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; padding: 0.25rem 0.5rem; border-radius: 0.125rem; background-color: rgba(255,255,255,0.95); color: var(--color-navy); font-weight: 700; }
.academy-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.academy-card__title { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--color-foreground); margin-bottom: 0.5rem; line-height: 1.2; font-weight: 700; }
.academy-card__desc { font-size: 13.5px; color: color-mix(in srgb, var(--color-foreground) 70%, transparent); line-height: 1.6; flex: 1; text-transform: none; font-family: var(--font-sans); }
.academy-card__footer { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--color-border); padding-top: 1rem; }
.academy-card__launch { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: color-mix(in srgb, var(--color-foreground) 50%, transparent); font-weight: 600; }
.academy-card__cta { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-navy); }
.academy-card:hover .academy-card__cta { color: var(--color-crimson); }

.academies-award-banner { margin-top: 3.5rem; border-radius: 1rem; border: 1px solid var(--color-border); background-color: #fff; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
@media (min-width: 768px) { .academies-award-banner { padding: 2rem; flex-direction: row; text-align: left; gap: 2.5rem; } }
.academies-award-banner__icon { width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: var(--color-amber-btn); box-shadow: var(--shadow-soft); color: #0f172a; }
.academies-award-banner__body { flex: 1; }
.academies-award-banner__heading { color: var(--color-foreground); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; }
.academies-award-banner__body p { margin-top: 0.5rem; font-size: 14px; color: color-mix(in srgb, var(--color-foreground) 70%, transparent); line-height: 1.6; max-width: 42rem; text-transform: none; font-family: var(--font-sans); }
.academies-award-banner__grad { flex-shrink: 0; color: var(--color-navy); }

/* =====================================================================
   Shop
   ===================================================================== */
.shop-section { padding: 6rem 0; background-color: #fff; }
@media (min-width: 768px) { .shop-section { padding: 8rem 0; } }
.shop-heading { font-size: clamp(1.8rem, 4.2vw, 2.5rem); line-height: 1.02; color: var(--color-foreground); }

.shop-controls { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2.5rem; }
@media (min-width: 1024px) { .shop-controls { flex-direction: row; align-items: center; justify-content: space-between; } }
.shop-categories { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.category-pill {
  padding: 0 1.25rem; height: 2.5rem; border-radius: 9999px; font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.14em; border: 1px solid var(--color-border); font-weight: 600;
  background-color: #fff; color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
}
.category-pill:hover { border-color: var(--color-navy); color: var(--color-navy); }
.category-pill.is-active { background-color: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.shop-search { position: relative; width: 100%; }
@media (min-width: 1024px) { .shop-search { width: 18rem; } }
.shop-search__icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: color-mix(in srgb, var(--color-foreground) 55%, transparent); }
.shop-search__input {
  width: 100%; height: 2.75rem; padding-left: 2.75rem; padding-right: 1rem; border-radius: 9999px;
  background-color: #fff; border: 1px solid var(--color-border); font-size: 14px; color: var(--color-foreground);
}
.shop-search__input::placeholder { color: color-mix(in srgb, var(--color-foreground) 55%, transparent); }
.shop-search__input:focus { outline: none; border-color: var(--color-navy); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-navy) 20%, transparent); }

.shop-no-results { text-align: center; padding: 5rem 0; color: color-mix(in srgb, var(--color-foreground) 65%, transparent); }

.shop-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: stretch; }
@media (min-width: 640px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shop-grid__item[hidden] { display: none; }
.shop-grid__item { display: flex; }

.merch-card { position: relative; border-radius: 1rem; overflow: hidden; background-color: #fff; border: 1px solid var(--color-border); display: flex; flex-direction: column; height: 100%; width: 100%; }
.merch-card:hover { border-color: var(--color-navy); }
.merch-card__media { position: relative; aspect-ratio: 1/1; overflow: hidden; background-color: var(--color-muted); }
.merch-card__image { position: absolute; inset: 0; }
.merch-card__badge { position: absolute; top: 0.75rem; left: 0.75rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; padding: 0.25rem 0.625rem; border-radius: 0.125rem; background-color: var(--color-crimson); color: #fff; font-weight: 700; box-shadow: var(--shadow-soft); }
.merch-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.merch-card__category { font-size: 12px; text-transform: uppercase; letter-spacing: 0.24em; color: var(--color-navy); font-weight: 700; margin-bottom: 0.5rem; }
.merch-card__title { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--color-foreground); font-weight: 700; line-height: 1.3; margin-bottom: 0.5rem; }
.merch-card__rating { display: flex; align-items: center; gap: 0.125rem; margin-bottom: 0.75rem; color: var(--color-amber-btn); }
.merch-card__rating-text { margin-left: 0.375rem; font-size: 12px; color: color-mix(in srgb, var(--color-foreground) 60%, transparent); text-transform: none; font-family: var(--font-sans); }
.merch-card__price { font-size: 18px; font-weight: 700; color: var(--color-foreground); margin-bottom: 1rem; text-transform: none; font-family: var(--font-sans); }
.merch-card__price-currency { font-size: 12px; color: color-mix(in srgb, var(--color-foreground) 50%, transparent); font-weight: 400; }
.merch-card__buy-btn {
  margin-top: auto; width: 100%; display: inline-flex; align-items: center; justify-content: center;
  height: 2.75rem; border-radius: 0.375rem; background-color: var(--color-amber-btn); color: #0f172a;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
}
.merch-card__buy-btn:hover { background-color: color-mix(in srgb, var(--color-amber-btn) 88%, white 12%); box-shadow: 0 0 24px color-mix(in srgb, var(--color-amber-btn) 55%, transparent); transform: scale(1.02); }

.shop-view-more-wrap { margin-top: 3rem; display: flex; justify-content: center; }
.shop-view-more-wrap[hidden] { display: none; }

.shop-trust-banner { margin-top: 4rem; border-radius: 0.75rem; border: 1px solid var(--color-border); background: linear-gradient(to right, var(--color-secondary), #fff, var(--color-secondary)); }
.shop-trust-banner__inner { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; }
@media (min-width: 640px) { .shop-trust-banner__inner { flex-direction: row; gap: 2rem; } }
.shop-trust-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 13px; text-transform: uppercase; letter-spacing: 0.24em; color: color-mix(in srgb, var(--color-foreground) 85%, transparent); font-weight: 600; }
.shop-trust-divider { display: none; width: 0.25rem; height: 0.25rem; border-radius: 9999px; background-color: var(--color-crimson); }
@media (min-width: 640px) { .shop-trust-divider { display: inline-block; } }

/* =====================================================================
   Meet the Owner
   ===================================================================== */
.owner-section { padding: 6rem 0; background-color: var(--color-background); }
@media (min-width: 768px) { .owner-section { padding: 8rem 0; } }
.owner-panel { border-radius: 1.5rem; border: 1px solid var(--color-border); background-color: #fff; box-shadow: 0 20px 60px -30px rgba(15,23,42,0.25); padding: 1.5rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 768px) { .owner-panel { padding: 2.5rem; } }
@media (min-width: 1024px) { .owner-panel { grid-template-columns: repeat(12, 1fr); gap: 3.5rem; padding: 3.5rem; } }
.owner-gallery-col { grid-column: 1 / -1; order: 2; }
@media (min-width: 1024px) { .owner-gallery-col { grid-column: span 6; order: 1; } }
.owner-story-col { grid-column: 1 / -1; order: 1; }
@media (min-width: 1024px) { .owner-story-col { grid-column: span 6; order: 2; } }

.owner-gallery { position: relative; overflow: hidden; border-radius: 1rem; background-color: var(--color-muted); border: 1px solid var(--color-border); aspect-ratio: 4/5; box-shadow: var(--shadow-soft); }
.owner-gallery__image { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity 700ms ease-out, transform 700ms ease-out; }
.owner-gallery__image.is-active { opacity: 1; transform: scale(1); }
.owner-gallery:hover .owner-gallery__image.is-active { transform: scale(1.03); }
.owner-gallery__founder-badge { position: absolute; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 0.125rem; background-color: var(--color-crimson); color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; box-shadow: var(--shadow-soft); z-index: 2; }
.owner-gallery__years-badge { position: absolute; bottom: 6rem; right: 1rem; background-color: rgba(255,255,255,0.95); backdrop-filter: blur(4px); padding: 0.625rem 1rem; border-radius: 0.75rem; box-shadow: var(--shadow-soft); border: 1px solid var(--color-border); transition: transform 500ms ease; z-index: 2; }
.owner-gallery:hover .owner-gallery__years-badge { transform: translateY(-4px); }
.owner-gallery__years-number { font-family: var(--font-display); color: var(--color-foreground); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.owner-gallery__years-plus { color: var(--color-crimson); }
.owner-gallery__years-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: color-mix(in srgb, var(--color-foreground) 60%, transparent); font-weight: 600; margin-top: 0.25rem; }
.owner-gallery__controls { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 4rem 1rem 1rem; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); z-index: 2; }
.owner-gallery__btn { width: 2.75rem; height: 2.75rem; border-radius: 9999px; background-color: rgba(255,255,255,0.95); backdrop-filter: blur(4px); display: inline-flex; align-items: center; justify-content: center; color: var(--color-foreground); box-shadow: var(--shadow-soft); }
.owner-gallery__btn:hover { background-color: var(--color-amber-btn); transform: scale(1.1); }
.owner-gallery__btn:active { transform: scale(0.95); }
.owner-gallery__counter { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: #fff; font-weight: 700; font-family: system-ui, monospace; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }

.owner-gallery__dots { margin-top: 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.owner-gallery__dot { height: 0.375rem; width: 1rem; border-radius: 9999px; background-color: var(--color-border); transition: all 300ms ease; }
.owner-gallery__dot.is-active { width: 2.5rem; background-color: var(--color-navy); }
.owner-gallery__dot:hover:not(.is-active) { background-color: color-mix(in srgb, var(--color-foreground) 45%, transparent); }
.owner-gallery__caption { margin-top: 0.75rem; text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: 0.24em; color: color-mix(in srgb, var(--color-foreground) 60%, transparent); font-family: system-ui, monospace; }

.owner-name { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.02; margin-bottom: 0.75rem; color: var(--color-foreground); font-weight: 800; }
.owner-name__highlight { color: color-mix(in srgb, var(--color-amber-btn) 90%, #b45309 10%); text-transform: uppercase; }
.owner-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.24em; color: color-mix(in srgb, var(--color-foreground) 70%, transparent); font-weight: 600; margin-bottom: 1.5rem; font-family: system-ui, monospace; }
.owner-body { display: flex; flex-direction: column; gap: 1.25rem; font-size: 15px; line-height: 1.75; color: color-mix(in srgb, var(--color-foreground) 70%, transparent); text-transform: none; font-family: var(--font-sans); }
@media (min-width: 768px) { .owner-body { font-size: 16px; } }

.owner-stats { margin-top: 2rem; display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .owner-stats { grid-template-columns: repeat(2, 1fr); } }
.owner-stat { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 0.75rem; border: 1px solid var(--color-border); background-color: var(--color-background); transition: all 300ms ease; }
.owner-stat:hover { border-color: var(--color-navy); background-color: #fff; box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.owner-stat__icon { width: 2.5rem; height: 2.5rem; border-radius: 9999px; background-color: var(--color-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 300ms ease; }
.owner-stat:hover .owner-stat__icon { transform: rotate(-8deg) scale(1.1); }
.owner-stat__text { min-width: 0; }
.owner-stat__value { font-family: var(--font-display); font-weight: 700; color: var(--color-foreground); font-size: 15px; line-height: 1.2; }
.owner-stat__label { font-size: 12px; color: color-mix(in srgb, var(--color-foreground) 60%, transparent); line-height: 1.2; text-transform: none; font-family: var(--font-sans); }

.owner-quote { margin-top: 2rem; padding-left: 1.25rem; border-left: 4px solid var(--color-crimson); color: color-mix(in srgb, var(--color-foreground) 85%, transparent); font-family: var(--font-display); font-size: 1.125rem; line-height: 1.3; font-weight: 400; text-transform: none; }
@media (min-width: 768px) { .owner-quote { font-size: 1.25rem; } }

.owner-cta-btn { display: inline-flex; align-items: center; gap: 0.75rem; height: 3rem; padding: 0 1.5rem; margin-top: 2rem; border-radius: 0.375rem; background-color: var(--color-amber-btn); color: #0f172a; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; }
.owner-cta-btn:hover { background-color: color-mix(in srgb, var(--color-amber-btn) 88%, white 12%); box-shadow: 0 0 24px color-mix(in srgb, var(--color-amber-btn) 55%, transparent); transform: scale(1.03); }
.owner-cta-btn__arrow { display: inline-block; transition: transform 300ms ease; }
.owner-cta-btn:hover .owner-cta-btn__arrow { transform: translateX(4px); }

/* =====================================================================
   Pre-Contact CTA
   ===================================================================== */
.precontact-section { position: relative; width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #020617; }
.precontact-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.precontact-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(15,23,42,0.55) 0%, rgba(15,23,42,0.65) 55%, rgba(15,23,42,0.85) 100%); }
.precontact-content {
  position: relative;
  z-index: 10;
  padding-top: 6rem;
  padding-bottom: 6rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
@media (min-width: 640px) {
  .precontact-content {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (min-width: 768px) {
  .precontact-content {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}
@media (min-width: 1024px) {
  .precontact-content {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
.precontact-eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; font-size: 13px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(255,255,255,0.9); margin-bottom: 1.5rem; font-weight: 600; width: 100%; }
.precontact-eyebrow__rule { height: 1px; width: 2rem; background-color: var(--color-amber-btn); }
.precontact-heading { color: #fff; line-height: 1.02; font-weight: 800; margin: 0 auto; max-width: 56rem; font-size: clamp(2rem, 5.2vw, 3.6rem); }
.precontact-desc { margin-top: 1.75rem; max-width: 36rem; margin-left: auto; margin-right: auto; font-size: 15px; color: rgba(255,255,255,0.85); line-height: 1.6; text-transform: none; font-family: var(--font-sans); }
.precontact-cta-wrap { margin-top: 2.5rem; text-shadow: none; }

/* =====================================================================
   Contact
   ===================================================================== */
.contact-section { padding-top: 6rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .contact-section { padding-top: 8rem; padding-bottom: 5rem; } }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: stretch; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: repeat(2, 1fr); gap: 5rem; } }
.contact-info-col { display: flex; flex-direction: column; height: 100%; }
.contact-heading { font-size: 2.25rem; line-height: 1.05; color: var(--color-foreground); }
@media (min-width: 768px) { .contact-heading { font-size: 3rem; } }
@media (min-width: 1024px) { .contact-heading { font-size: 3.4rem; } }
.contact-desc { margin-top: 1.5rem; font-size: 15px; color: color-mix(in srgb, var(--color-foreground) 65%, transparent); line-height: 1.6; max-width: 28rem; text-transform: none; font-family: var(--font-sans); }

.contact-touchpoints { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.contact-touchpoint { display: inline-flex; align-items: center; gap: 1rem; color: var(--color-foreground); }
a.contact-touchpoint:hover { color: var(--color-primary); }
.contact-touchpoint__icon { width: 2.75rem; height: 2.75rem; border-radius: 9999px; background-color: var(--color-secondary); border: 1px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center; transition: border-color 300ms ease; }
a.contact-touchpoint:hover .contact-touchpoint__icon { border-color: var(--color-primary); }
.contact-touchpoint__text { display: flex; flex-direction: column; text-align: left; }
.contact-touchpoint__label { font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); }
.contact-touchpoint__value { font-size: 15px; font-weight: 500; text-transform: none; font-family: var(--font-sans); }

.contact-quote-wrap { margin-top: auto; padding-top: 2.5rem; }
.contact-quote-figure { position: relative; border-radius: 1rem; border: 1px solid var(--color-border); background-color: var(--color-secondary); padding: 2.5rem 1.5rem; text-align: center; overflow: hidden; }
@media (min-width: 768px) { .contact-quote-figure { padding: 3rem 2.5rem; } }
.contact-quote-figure__mark { position: absolute; top: 0.75rem; left: 1.25rem; font-family: var(--font-display); font-style: italic; line-height: 1; color: color-mix(in srgb, var(--color-primary) 25%, transparent); user-select: none; font-size: 5rem; }
.contact-quote-figure__rule { margin: 0 auto 1.25rem; display: block; height: 1px; width: 2.5rem; background: #F5A623; }
.contact-quote-figure__text { font-family: var(--font-display); color: color-mix(in srgb, var(--color-foreground) 90%, transparent); line-height: 1.4; font-size: 1.125rem; max-width: 28rem; margin: 0 auto; font-weight: 400; text-transform: none; }
@media (min-width: 768px) { .contact-quote-figure__text { font-size: 1.25rem; } }
@media (min-width: 1024px) { .contact-quote-figure__text { font-size: 1.5rem; } }
.contact-quote-figure__caption { margin-top: 1.5rem; font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 60%, transparent); }

.contact-form { border-radius: 1rem; border: 1px solid var(--color-border); background-color: var(--color-background); padding: 1.5rem; display: flex; flex-direction: column; height: 100%; box-shadow: var(--shadow-soft); }
@media (min-width: 768px) { .contact-form { padding: 2.25rem; } }
.contact-form__fields { display: flex; flex-direction: column; gap: 1.25rem; flex: 1; }
.contact-form__row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .contact-form__row { grid-template-columns: repeat(2, 1fr); } }
.contact-form__field label { display: block; font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); margin-bottom: 0.5rem; }
.contact-input {
  width: 100%; height: 3rem; padding: 0 1rem; background-color: var(--color-background);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent); border-radius: 0.375rem;
  font-size: 15px; color: var(--color-foreground);
}
.contact-input::placeholder { color: color-mix(in srgb, var(--color-foreground) 45%, transparent); }
.contact-input:focus { outline: none; border-color: var(--color-primary); }
.contact-textarea { height: auto; padding: 0.75rem 1rem; resize: none; }
.contact-form__select-wrap { position: relative; }
.contact-select { appearance: none; padding-right: 2.5rem; }
.contact-form__select-chevron { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); }
.contact-form__submit-wrap { padding-top: 0.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.contact-form__note { font-size: 15px; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); text-align: center; }

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer { background-color: var(--color-secondary); border-top: 1px solid var(--color-border); color: color-mix(in srgb, var(--color-foreground) 90%, transparent); }
/* Keep horizontal inset — do not use padding shorthand that zeros left/right from .container-wide. */
.site-footer__inner {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
@media (min-width: 640px) {
  .site-footer__inner {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .site-footer__inner {
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: repeat(4, 1fr); gap: 3rem; } }
.site-brand--footer { display: inline-flex; }
.site-logo-img--footer { height: var(--footer-logo-height, 80px); max-height: var(--footer-logo-height, 80px); }
.site-footer__tagline { margin-top: 1rem; font-size: 13px; line-height: 1.6; max-width: 20rem; text-transform: none; font-family: var(--font-sans); }
.site-footer__social { margin-top: 1.25rem; display: flex; align-items: center; gap: 0.75rem; }
.social-btn { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--color-border); }
.social-btn:hover { color: var(--color-navy); border-color: var(--color-navy); background-color: #fff; }
.site-footer__heading { font-size: 18px; font-weight: 700; margin-bottom: 1rem; letter-spacing: 0.01em; }
.site-footer__list { display: flex; flex-direction: column; gap: 0.625rem; }
.site-footer__list a, .site-footer__list button { font-size: 13px; font-weight: 500; text-transform: none; font-family: var(--font-sans); }
.site-footer__list a:hover, .site-footer__list button:hover { color: var(--color-navy); }
.site-footer__contact-item { display: flex; align-items: flex-start; gap: 0.5rem; }
.site-footer__contact-item svg { margin-top: 0.125rem; }
.site-footer__address { font-size: 13px; line-height: 1.6; padding-top: 0.25rem; }
.site-footer__bottom { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); display: grid; grid-template-columns: 1fr; align-items: center; gap: 1rem; text-align: center; }
@media (min-width: 768px) { .site-footer__bottom { grid-template-columns: repeat(3, 1fr); } }
.site-footer__copyright { font-size: 12px; color: color-mix(in srgb, var(--color-foreground) 70%, transparent); letter-spacing: 0.01em; order: 2; text-align: center; }
@media (min-width: 768px) { .site-footer__copyright { order: 1; text-align: left; } }
.back-to-top { order: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; margin: 0 auto; }
@media (min-width: 768px) { .back-to-top { order: 2; } }
.back-to-top:hover { color: var(--color-navy); }
.back-to-top:hover svg { transform: translateY(-2px); }
.site-footer__credit { order: 3; font-size: 12px; color: color-mix(in srgb, var(--color-foreground) 70%, transparent); letter-spacing: 0.01em; text-align: center; }
@media (min-width: 768px) { .site-footer__credit { text-align: right; } }
.site-footer__credit a { color: var(--color-navy); font-weight: 600; }
.site-footer__credit a:hover { color: var(--color-crimson); }

/* =====================================================================
   Product detail page
   ===================================================================== */
.product-detail-page, .checkout-page, .product-not-found, .notfound-page, .generic-page {
  padding-top: 6rem; background-color: var(--color-background); min-height: 60vh;
}
@media (min-width: 1024px) { .product-detail-page, .checkout-page { padding-top: 7rem; } }
.product-not-found { text-align: center; padding-bottom: 5rem; }
.product-not-found h1 { margin-bottom: 1rem; }

.product-breadcrumb { padding: 1.5rem 0; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); }
.product-breadcrumb a:hover { color: var(--color-primary); }
.product-breadcrumb__sep { margin: 0 0.5rem; opacity: 0.5; }
.product-breadcrumb__current { color: var(--color-foreground); }

.product-detail-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 5rem; align-items: start; min-width: 0; }
@media (min-width: 1024px) { .product-detail-grid { grid-template-columns: repeat(12, 1fr); gap: 4rem; } }
.product-gallery-col { grid-column: 1 / -1; min-width: 0; max-width: 100%; }
@media (min-width: 1024px) { .product-gallery-col { grid-column: span 7; position: sticky; top: 7rem; } }
.product-info-col { grid-column: 1 / -1; min-width: 0; max-width: 100%; }
@media (min-width: 1024px) { .product-info-col { grid-column: span 5; } }

.product-gallery__main { position: relative; aspect-ratio: 1/1; width: 100%; background-color: var(--color-secondary); border-radius: 0.75rem; overflow: hidden; margin-bottom: 1rem; }
.product-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 0.625rem; max-width: 100%; }
.product-gallery__thumb { position: relative; width: calc(20% - 0.5rem); aspect-ratio: 1/1; background-color: var(--color-secondary); border-radius: 0.375rem; overflow: hidden; border: 2px solid transparent; }
.product-gallery__thumb.is-active { border-color: var(--color-primary); }
.product-gallery__thumb:not(.is-active):hover { border-color: color-mix(in srgb, var(--color-foreground) 20%, transparent); }

.product-info__category { font-size: 15px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 0.75rem; font-weight: 500; }
.product-info__title { font-family: var(--font-body, var(--font-sans)); font-weight: 400; text-transform: none; font-size: 1.875rem; line-height: 1.05; color: var(--color-foreground); margin-bottom: 1rem; }
@media (min-width: 768px) { .product-info__title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .product-info__title { font-size: 2.6rem; } }
.product-info__price { font-size: 20px; font-weight: 500; color: color-mix(in srgb, var(--color-foreground) 90%, transparent); margin-bottom: 1.75rem; }
.product-info__desc { font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--color-foreground) 75%, transparent); margin-bottom: 2rem; overflow-wrap: break-word; word-break: break-word; white-space: pre-line; }

.product-quantity-block { margin-bottom: 1.5rem; }
.product-quantity-label { font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); margin-bottom: 0.625rem; }
.theme-quantity-wrapper { display: inline-flex; align-items: center; border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent); border-radius: 9999px; }
.theme-qty-minus, .theme-qty-plus { padding: 0.625rem 1rem; }
.theme-qty-minus:hover, .theme-qty-plus:hover { color: var(--color-primary); }
.theme-qty-input { width: 44px; padding: 0.625rem 0; min-width: 44px; text-align: center; font-size: 15px; font-weight: 500; background: transparent; border: none; -moz-appearance: textfield; }
.theme-qty-input::-webkit-outer-spin-button, .theme-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.product-actions { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .product-actions { flex-direction: row; } }
.product-actions .btn { flex: 1 1 auto; min-width: 160px; }

.product-details-block { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent); }
.product-details-label { font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); margin-bottom: 1rem; }
.product-details-list { display: flex; flex-direction: column; gap: 0.625rem; }
.product-details-list li { font-size: 15px; color: color-mix(in srgb, var(--color-foreground) 75%, transparent); display: flex; align-items: flex-start; overflow-wrap: break-word; word-break: break-word; }
.product-details-dot { width: 4px; height: 4px; background-color: var(--color-primary); border-radius: 9999px; margin-top: 0.625rem; margin-right: 0.75rem; flex-shrink: 0; }

.product-features { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent); }
.product-feature { text-align: center; }
.product-feature svg { margin: 0 auto 0.5rem; color: var(--color-primary); }
.product-feature p { font-size: 15px; letter-spacing: 0.15em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 60%, transparent); }

.related-products-section { padding: 5rem 0; border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent); }
.related-products__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2.5rem; }
.related-products__head .section-heading { font-size: 1.875rem; }
@media (min-width: 768px) { .related-products__head .section-heading { font-size: 2.25rem; } }
.related-products__viewall { display: none; align-items: center; gap: 0.375rem; font-size: 15px; font-weight: 500; color: color-mix(in srgb, var(--color-foreground) 70%, transparent); }
@media (min-width: 640px) { .related-products__viewall { display: inline-flex; } }
.related-products__viewall:hover { color: var(--color-primary); }
.related-products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.5rem; }
@media (min-width: 640px) { .related-products-grid { gap: 1.5rem 2.5rem; row-gap: 2.5rem; } }
@media (min-width: 1024px) { .related-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* theme-product-card: shared visual wrapper across contexts (Section 31.13) */
.theme-product-card { position: relative; display: flex; flex-direction: column; height: 100%; }
.theme-product-card > .theme-card-link { position: absolute; inset: 0; z-index: 2; pointer-events: auto; }
.theme-product-card *:not(.theme-card-link) { pointer-events: none; }
.theme-product-card .product-card__add-btn,
.theme-product-card .product-card__quickview { pointer-events: auto; }
.product-card__media { position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: 0.75rem; margin-bottom: 1rem; background-color: var(--color-secondary); border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent); transition: border-color 300ms ease; }
.theme-product-card:hover .product-card__media { border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); }
.product-card__image { position: absolute; inset: 0; }
.theme-product-card:hover .product-card__image { transform: scale(1.04); }
.product-card__soldout { position: absolute; top: 0.75rem; left: 0.75rem; background-color: var(--color-primary); color: var(--color-background); font-size: 15px; font-weight: 500; padding: 0.25rem 0.625rem; border-radius: 9999px; z-index: 3; }
.product-card__quick-actions { position: absolute; inset-inline: 0.75rem; bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; opacity: 0; transition: opacity 500ms ease-out; z-index: 3; }
.theme-product-card:hover .product-card__quick-actions { opacity: 1; }
.product-card__add-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.5rem; border-radius: 9999px; background-color: var(--color-primary); color: var(--color-background); font-size: 15px; font-weight: 500; letter-spacing: 0.01em; box-shadow: var(--shadow-soft); text-transform: none; }
.product-card__add-btn:hover { background-color: color-mix(in srgb, var(--color-primary) 90%, transparent); }
.product-card__quickview { width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background-color: color-mix(in srgb, var(--color-background) 90%, transparent); backdrop-filter: blur(4px); color: var(--color-foreground); border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent); box-shadow: var(--shadow-soft); }
.product-card__body { padding: 0 0.125rem; }
.product-card__category { font-size: 15px; text-transform: uppercase; letter-spacing: 0.24em; color: color-mix(in srgb, var(--color-primary) 80%, transparent); margin-bottom: 0.375rem; }
.product-card__title { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.3; color: var(--color-foreground); }
@media (min-width: 768px) { .product-card__title { font-size: 1.35rem; } }
@media (min-width: 1024px) { .product-card__title { font-size: 1.5rem; } }
.theme-product-card:hover .product-card__title { color: var(--color-primary); }
.product-card__price { margin-top: 0.375rem; font-size: 15px; font-weight: 500; color: var(--color-primary); }

/* =====================================================================
   Checkout
   ===================================================================== */
.checkout-continue-link { display: inline-flex; align-items: center; font-size: 15px; color: color-mix(in srgb, var(--color-foreground) 65%, transparent); margin-bottom: 1.5rem; gap: 0.5rem; }
.checkout-continue-link:hover { color: var(--color-primary); }
.checkout-title { font-size: 2.25rem; margin-bottom: 2.5rem; }
@media (min-width: 768px) { .checkout-title { font-size: 3rem; } }
.checkout-content {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
@media (min-width: 640px) {
  .checkout-content {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .checkout-content {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
.checkout-empty,
.checkout-success {
  padding-top: 5rem;
  padding-bottom: 5rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  text-align: center;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 640px) {
  .checkout-empty,
  .checkout-success {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
.checkout-empty__icon { color: color-mix(in srgb, var(--color-foreground) 30%, transparent); margin: 0 auto 1.5rem; }
.checkout-empty__text, .checkout-success__text { color: color-mix(in srgb, var(--color-foreground) 65%, transparent); margin-bottom: 2rem; font-size: 15px; }
.checkout-success__icon { width: 4rem; height: 4rem; background-color: var(--color-primary); color: var(--color-background); border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }

.checkout-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 1024px) { .checkout-grid { grid-template-columns: repeat(12, 1fr); gap: 3.5rem; } }
.checkout-form { grid-column: 1 / -1; order: 2; display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 1024px) { .checkout-form { grid-column: span 7; order: 1; } }
.checkout-summary { grid-column: 1 / -1; order: 1; }
@media (min-width: 1024px) { .checkout-summary { grid-column: span 5; order: 2; } }
.checkout-section__heading { font-size: 1.5rem; margin-bottom: 1.25rem; }
.checkout-form__row-2 { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .checkout-form__row-2 { grid-template-columns: repeat(2, 1fr); } }
.checkout-form__row-6 { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .checkout-form__row-6 { grid-template-columns: repeat(6, 1fr); } }
.checkout-form__span-2 { grid-column: span 1; }
@media (min-width: 640px) { .checkout-form__span-2 { grid-column: span 2; } }
.checkout-form__span-6 { grid-column: 1 / -1; }
.checkout-form__note { font-size: 15px; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); text-align: center; }

.checkout-summary__card { background-color: var(--color-secondary); border: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent); border-radius: 1rem; padding: 1.5rem; }
@media (min-width: 1024px) { .checkout-summary__card { padding: 1.75rem; position: sticky; top: 7rem; } }
.checkout-summary__items { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.5rem; }
.checkout-summary__item { display: flex; gap: 1rem; }
.checkout-summary__item-thumb { width: 5rem; height: 6rem; background-color: var(--color-background); border-radius: 0.375rem; overflow: hidden; flex-shrink: 0; }
.checkout-summary__item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.checkout-summary__item-info { flex: 1; min-width: 0; }
.checkout-summary__item-name { font-size: 15px; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkout-summary__item-price { font-size: 15px; color: color-mix(in srgb, var(--color-foreground) 60%, transparent); margin-top: 0.125rem; }
.checkout-summary__item-controls { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.checkout-summary__item-total { font-size: 15px; font-weight: 500; }
.checkout-summary__totals { border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent); padding-top: 1.25rem; display: flex; flex-direction: column; gap: 0.625rem; font-size: 15px; }
.checkout-summary__row { display: flex; justify-content: space-between; }
.checkout-summary__row span:first-child { color: color-mix(in srgb, var(--color-foreground) 65%, transparent); }
.checkout-summary__free { color: var(--color-primary); font-weight: 500; }
.checkout-summary__row--total { padding-top: 0.75rem; border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent); font-size: 1rem; font-weight: 500; }

/* =====================================================================
   404
   ===================================================================== */
.notfound-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: var(--color-muted); padding-top: 0; }
.notfound-page__inner { text-align: center; }
.notfound-page__code { font-size: 2.25rem; font-weight: 700; margin-bottom: 1rem; }
.notfound-page__message { font-size: 1.25rem; color: color-mix(in srgb, var(--color-foreground) 70%, transparent); margin-bottom: 1rem; text-transform: none; }
.notfound-page__link { color: var(--color-primary); text-decoration: underline; }
.notfound-page__link:hover { color: color-mix(in srgb, var(--color-primary) 90%, transparent); }

.page-title { font-size: 2.25rem; margin: 2rem 0 1.5rem; }
.entry-content { padding-bottom: 4rem; font-size: 15px; line-height: 1.7; }

/* =====================================================================
   Generic section-heading fallback (used where no more specific scale
   is defined, e.g. empty/success states, 404-adjacent content).
   Section headings elsewhere define their OWN scale per Section 2.2 —
   this is only a sane fallback, not a global override.
   ===================================================================== */
.section-heading { font-size: 1.875rem; line-height: 1.1; color: var(--color-foreground); }
@media (min-width: 768px) { .section-heading { font-size: 2.5rem; } }

/* =====================================================================
   Single product / add-to-cart button style parity
   ===================================================================== */
.product-add-to-cart, .product-buy-now {
  font-family: var(--font-sans); text-transform: none; letter-spacing: normal; font-weight: 500;
}
.single_add_to_cart_button.button:disabled,
.single_add_to_cart_button.button.disabled,
.add_to_cart_button.button:disabled,
.add_to_cart_button.button.disabled,
.btn:disabled, .btn.is-disabled {
  cursor: not-allowed !important; opacity: 0.4 !important; pointer-events: none !important;
}

/* =====================================================================
   WooCommerce default pages (shop, cart, checkout, account, product)
   ===================================================================== */
.woocommerce-page .site-main,
.woocommerce .site-main,
body.woocommerce-cart .generic-page .container-wide,
body.woocommerce-checkout .generic-page .container-wide,
body.woocommerce-account .generic-page .container-wide,
body.woocommerce-shop .generic-page .container-wide,
body.single-product .generic-page .container-wide,
.woocommerce-page .container-wide,
.woocommerce .woocommerce {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .woocommerce-page .site-main,
  .woocommerce .site-main,
  body.woocommerce-cart .generic-page .container-wide,
  body.woocommerce-checkout .generic-page .container-wide,
  body.woocommerce-account .generic-page .container-wide,
  body.woocommerce-shop .generic-page .container-wide,
  body.single-product .generic-page .container-wide,
  .woocommerce-page .container-wide,
  .woocommerce .woocommerce {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .woocommerce-page .site-main,
  .woocommerce .site-main,
  body.woocommerce-cart .generic-page .container-wide,
  body.woocommerce-checkout .generic-page .container-wide,
  body.woocommerce-account .generic-page .container-wide,
  body.woocommerce-shop .generic-page .container-wide,
  body.single-product .generic-page .container-wide,
  .woocommerce-page .container-wide,
  .woocommerce .woocommerce {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

/* When WC renders inside the generic page template, keep vertical room under the fixed header. */
body.woocommerce-page .generic-page,
body.woocommerce .generic-page,
body.woocommerce-cart .generic-page,
body.woocommerce-checkout .generic-page,
body.woocommerce-account .generic-page,
body.single-product .generic-page {
  padding-top: 6rem;
  padding-bottom: 3rem;
}
@media (min-width: 1024px) {
  body.woocommerce-page .generic-page,
  body.woocommerce .generic-page,
  body.woocommerce-cart .generic-page,
  body.woocommerce-checkout .generic-page,
  body.woocommerce-account .generic-page,
  body.single-product .generic-page {
    padding-top: 7rem;
  }
}

/* =====================================================================
   Responsive safety (Section 11.13-equivalent)
   ===================================================================== */
.product-detail-grid, .product-gallery-col, .product-info-col, .checkout-grid, .checkout-form, .checkout-summary {
  min-width: 0;
}