/**
 * SACA Theme — Main Styles
 * White-based luxury design for carbon fiber brand
 */

:root {
  /* Cool, silver-toned neutrals chosen to sit well against the metallic
     SACA logo mark (charcoal-to-platinum diamond gradient). */
  --color-white: #ffffff;
  --color-off-white: #f6f6f7;
  --color-platinum: #ececee;
  --color-text: #1a1a1c;
  --color-text-muted: #6b6b70;
  --color-accent: #2f2f34;
  --color-border: #e3e3e6;
  --color-carbon: #101012;
  --color-carbon-elevated: #1a1a1d;
  --color-on-dark: #f2f2f0;
  --color-on-dark-muted: #9a9a9f;
  --gradient-metal: linear-gradient(135deg, #35353c 0%, #7c7a7d 30%, #c9c4c3 50%, #9b9798 70%, #35353c 100%);
  /* Narrower-banded metallic gradients tuned for text-fill legibility (kept
     within a moderate contrast range against their intended background,
     unlike --gradient-metal above which is too dark/too light at its
     extremes to read well as small filled text). */
  --gradient-metal-text-light: linear-gradient(100deg, #4a4a50 0%, #8c8a88 45%, #55534f 100%);
  --gradient-metal-text-dark: linear-gradient(100deg, #e5e2df 0%, #938f8d 50%, #cfccc9 100%);
  --font-sans: 'Noto Sans JP', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Noto Serif JP', 'Noto Serif TC', serif;
  --container-width: 1200px;
  --container-narrow: 800px;
  --header-height: 72px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 80px;
  --radius: 2px;
  --transition: 0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition);
}

a:hover { opacity: 0.7; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.container--narrow { max-width: var(--container-narrow); }

/*
 * Breathing room below the header for pages that start directly with a
 * plain container (shop, single product, generic pages, cart/checkout,
 * my account). Front page and About page start with their own full-bleed
 * hero sections instead of a direct .container child, so they are
 * naturally unaffected by this selector.
 */
.site-main > .container {
  padding-top: var(--spacing-lg);
}

/*
 * Breathing room above the footer. Applied to `.site-main` itself (present
 * on every template — front page, About, shop, product, generic pages,
 * cart/checkout/my account) rather than `.site-main > .container`, so no
 * page is ever left without bottom spacing regardless of its markup shape.
 */
.site-main {
  padding-bottom: var(--spacing-lg);
}

.saca-wishlist-empty {
  color: var(--color-text-muted);
  padding: var(--spacing-md) 0;
}

/*
 * My Account login / register. A single column by default; when
 * registration is enabled (WooCommerce → 設定 → アカウントと
 * プライバシー) the login template adds .saca-login--split and a second
 * column is rendered, so the two sit side-by-side from tablet width up.
 */
.saca-login__heading {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  margin-bottom: var(--spacing-md);
}

.saca-login__note {
  font-size: 13px;
  color: var(--color-text-muted);
}

@media (min-width: 769px) {
  .saca-login--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
  }
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.section-heading {
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  margin: 0 0 var(--spacing-md);
  padding-top: var(--spacing-sm);
  text-transform: uppercase;
}

.section-heading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--gradient-metal);
}

/*
 * Extremely low-opacity carbon-weave watermark for otherwise flat white /
 * off-white sections, so the material's texture is felt throughout the
 * page rather than confined to the single dark "craft" section.
 */
.section--textured {
  position: relative;
}

.section--textured::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--section-texture-image, url('../images/carbon-weave.jpg'));
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.1);
  opacity: var(--section-texture-opacity, 0.04);
  pointer-events: none;
}

.section--textured > .container {
  position: relative;
  z-index: 1;
}

/*
 * Thin metallic hairline marking a section boundary — a "line of light"
 * instead of a plain flat-color cut, echoing the logo's metal gradient.
 */
.section--hairline {
  position: relative;
}

.section--hairline::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-metal);
  z-index: 2;
}

.saca-btn,
.button,
.woocommerce a.button,
.woocommerce button.button {
  display: inline-block;
  padding: 12px 32px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.saca-btn:hover,
.button:hover {
  background: transparent;
  color: var(--color-accent);
  opacity: 1;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.site-header::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--gradient-metal);
  opacity: 0.55;
  transition: opacity 0.3s ease;
}

/*
 * Louis Vuitton-style layout: logo fixed to the true visual center via a
 * 3-column grid, regardless of how much content sits in the side columns.
 */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-height);
  gap: var(--spacing-md);
}

.site-header__start {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  justify-self: start;
}

/*
 * Front page only: the header floats transparently over the hero (video
 * or slider) with white logo/icons, and turns solid white on hover, on
 * focus, or once main.js detects the visitor has scrolled past the hero
 * (.is-solid). Kept permanently `position: fixed` (rather than switching
 * between absolute/sticky) so only background/color transition — no
 * layout jank — while still floating above the page on scroll like the
 * regular sticky header does everywhere else.
 */
.site-header--transparent {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: transparent;
  border-bottom-color: transparent;
  --header-fg: #fff;
}

.site-header--transparent::after { opacity: 0; }

.site-header--transparent .custom-logo {
  filter: brightness(0) invert(1) !important;
}

.site-header--transparent:hover,
.site-header--transparent:focus-within,
.site-header--transparent.is-solid {
  background: var(--color-white);
  border-bottom-color: var(--color-border);
  --header-fg: var(--color-text);
}

.site-header--transparent:hover::after,
.site-header--transparent:focus-within::after,
.site-header--transparent.is-solid::after {
  opacity: 0.55;
}

.site-header--transparent:hover .custom-logo,
.site-header--transparent:focus-within .custom-logo,
.site-header--transparent.is-solid .custom-logo {
  filter: none !important;
}

.site-header__logo {
  justify-self: center;
}

.site-header__logo-text {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--header-fg, var(--color-text));
}

/*
 * WordPress cannot read intrinsic SVG dimensions natively, so uploaded SVG
 * logos often get `width="1" height="1"` attributes from the_custom_logo().
 * That alone is handled by `height` + `aspect-ratio` below — BUT this logo
 * sits in a flex item (`.site-header__logo`) with no explicit width, and
 * `aspect-ratio: auto` (i.e. "use the image's natural ratio") creates a
 * circular sizing dependency in that context: the flex item's shrink-to-fit
 * width depends on the image's rendered width, which itself depends on the
 * natural-ratio lookup, which some browsers resolve to 0x0 instead of
 * solving the loop. Using a fixed numeric ratio (matching this logo file's
 * viewBox, 588.17 x 123.5) sidesteps the natural-ratio lookup entirely and
 * renders correctly. If the logo file is ever replaced with different
 * proportions, update this ratio to match.
 *
 * On top of that, WooCommerce's own bundled stylesheet ships
 * `.woocommerce img, .woocommerce-page img { height: auto; max-width: 100%; }`.
 * That selector's specificity (0,1,1) beats a bare `.custom-logo` class
 * selector (0,1,0), so on every WooCommerce-context page (shop, category,
 * cart, checkout, my account — anywhere `<body class="woocommerce">` is
 * present) WooCommerce's rule silently won and collapsed the logo back to
 * 0x0, even though this exact same CSS worked fine on the front page / About
 * page (no `.woocommerce` body class there). `!important` guarantees this
 * theme rule always wins regardless of any plugin's selector specificity or
 * stylesheet load order.
 */
.custom-logo {
  height: 40px !important;
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
  aspect-ratio: 588.17 / 123.5 !important;
  object-fit: contain !important;
  transition: filter 0.3s ease;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  justify-self: end;
}

.header-search-toggle {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--header-fg, var(--color-text));
}

/*
 * The search field itself now lives only inside .header-search-panel
 * (see below) — it is opened via .header-search-toggle instead of being
 * permanently docked in the header.
 */
.header-search {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
}

.header-search__input {
  border: none;
  background: transparent;
  padding: 6px 8px;
  font-size: 13px;
  width: 120px;
  outline: none;
}

.header-search__submit {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-text);
}

.header-action {
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px;
  color: var(--header-fg, var(--color-text));
}

.header-action__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  color: var(--color-white);
  background: var(--color-accent);
  border-radius: 50%;
}

/*
 * Always-on hamburger: the drawer (see .nav-drawer below) is now the sole
 * entry point to the primary menu on every breakpoint, matching the
 * Louis Vuitton-style layout the client asked for.
 */
.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

.menu-toggle__bar {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--header-fg, var(--color-text));
}

/* Hamburger drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 210;
  visibility: hidden;
  pointer-events: none;
}

.nav-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.nav-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 18, 0.45);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.nav-drawer.is-open .nav-drawer__overlay { opacity: 1; }

.nav-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(440px, 88vw);
  background: var(--color-white);
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.08);
}

.nav-drawer.is-open .nav-drawer__panel { transform: translateX(0); }

.nav-drawer__close {
  align-self: flex-end;
  background: none;
  border: none;
  padding: 8px;
  margin: 0 0 var(--spacing-xl);
  cursor: pointer;
  color: var(--color-text);
}

.nav-drawer__nav .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.nav-drawer__nav .menu a {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Header search panel */
.header-search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 150;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.header-search-panel.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.header-search-panel__inner {
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-xl);
}

.header-search-panel .header-search {
  max-width: 480px;
  margin: 0 auto var(--spacing-lg);
  border-bottom: 1px solid var(--color-text);
}

.header-search-panel .header-search__input { width: 100%; font-size: 16px; }

.header-search-panel__suggestions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
}

.header-search-panel__heading {
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--spacing-sm);
}

.header-search-panel__products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.header-search-panel__product {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.header-search-panel__product-image img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  display: block;
}

.header-search-panel__product-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.3;
}

.header-search-panel__product-price {
  color: var(--color-text-muted);
  font-size: 12px;
}

/* Language switcher */
.lang-switcher { position: relative; }

.lang-switcher__toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--header-fg, var(--color-text));
}

.lang-switcher__menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 80px;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.lang-switcher__menu[hidden] { display: none; }

.lang-switcher__link {
  display: block;
  padding: 8px 16px;
  font-size: 12px;
  letter-spacing: 0.05em;
}

.lang-switcher__link.is-active { font-weight: 500; }

/* Hero slider */
.hero-slider { position: relative; background: var(--color-off-white); }

/*
 * Soft fade-to-white at the bottom edge, so the transition into the About
 * section below reads as a deliberate hand-off rather than a hard cut.
 * pointer-events: none keeps Swiper's pagination/nav fully clickable.
 */
.hero-slider::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  background: linear-gradient(to bottom, transparent, var(--color-white));
  pointer-events: none;
  z-index: 1;
}

.hero-slider__swiper { width: 100%; }

.hero-slider__slide {
  position: relative;
  aspect-ratio: 21 / 9;
  min-height: 400px;
  overflow: hidden;
}

.hero-slider__image,
.hero-slider__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slider__placeholder {
  background: linear-gradient(135deg, var(--color-off-white) 0%, var(--color-platinum) 50%, var(--color-off-white) 100%);
}

.hero-slider__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  background: linear-gradient(to right, rgba(255, 255, 255, var(--hero-overlay-a1, 0.85)) 0%, rgba(255, 255, 255, var(--hero-overlay-a2, 0.2)) 60%, transparent 100%);
}

.hero-slider__overlay--none {
  background: none;
}

.hero-slider__title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 300;
  letter-spacing: 0.15em;
  margin: 0;
  text-transform: uppercase;
}

.hero-slider__subtitle {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-style: italic;
  letter-spacing: 0.2em;
  margin: var(--spacing-sm) 0 0;
  color: var(--color-text-muted);
}

.hero-slider__cta {
  margin-top: var(--spacing-md);
}

.hero-slider__nav {
  color: var(--color-accent) !important;
}

.hero-slider__nav::after {
  font-size: 20px !important;
}

/*
 * Hero video — replaces the slider entirely when a video is uploaded via
 * the customizer. Full-viewport height (rather than the slider's 21:9
 * aspect-ratio) so the transparent header has a substantial first view to
 * float over, matching the brand-movie-as-first-view request.
 */
.hero-video {
  position: relative;
  height: 100vh;
  min-height: 560px;
  max-height: 960px;
  overflow: hidden;
  background: var(--color-off-white);
}

.hero-video::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  background: linear-gradient(to bottom, transparent, var(--color-white));
  pointer-events: none;
  z-index: 1;
}

/*
 * Some source videos have letterboxing (black bars) baked into the footage
 * itself — object-fit: cover alone cannot remove pixels that are part of
 * the frame, since it only crops the box to the container's aspect ratio.
 * The extra `scale()` (--hero-video-zoom, adjustable in the customizer)
 * uniformly crops a fixed proportion off every edge regardless of the
 * viewport's width/height, so it reliably trims baked-in bars at any
 * screen size rather than only at specific aspect ratios.
 */
.hero-video__player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(var(--hero-video-zoom, 1));
  transform-origin: center center;
}

.hero-video__mute {
  position: absolute;
  right: var(--spacing-lg);
  bottom: calc(var(--spacing-lg) + 24px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(16, 16, 18, 0.35);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hero-video__mute:hover {
  background: rgba(16, 16, 18, 0.55);
  border-color: #fff;
}

.hero-video__mute-icon { display: none; }

.hero-video__mute.is-muted .hero-video__mute-icon--off { display: block; }
.hero-video__mute:not(.is-muted) .hero-video__mute-icon--on { display: block; }

/* Brand intro */
.brand-intro {
  padding: var(--spacing-xl) 0;
  background: var(--color-white);
}

.brand-intro__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  align-items: center;
}

.brand-intro__heading {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 var(--spacing-sm);
  background: var(--gradient-metal-text-light);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.brand-intro__tagline {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  margin: 0 0 var(--spacing-md);
}

.brand-intro__text {
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-md);
  max-width: 480px;
}

.brand-intro__link {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-text);
}

.brand-intro__texture,
.brand-intro__image {
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--color-border);
}

.brand-intro__texture {
  background-image: url('../images/carbon-weave.jpg');
  background-size: cover;
  background-position: center;
  filter: grayscale(1) invert(1) brightness(1.4) contrast(0.75);
}

.brand-intro__image {
  height: 100%;
  object-fit: cover;
}

/* Real carbon-fiber twill texture, reused across light and dark sections. */
.carbon-weave {
  background-image: url('../images/carbon-weave.jpg');
  background-size: cover;
  background-position: center;
}

.carbon-weave--dark { filter: grayscale(1) brightness(0.85) contrast(1.15); }

.carbon-weave--light { filter: grayscale(1) invert(1) brightness(1.4) contrast(0.75); }

/* Craft / material story section (dark accent) */
.craft-section {
  position: relative;
  overflow: hidden;
  padding: var(--spacing-xl) 0;
  background: var(--color-carbon);
  color: var(--color-on-dark);
}

.craft-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.craft-section__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(16, 16, 18, 0.55) 0%, rgba(16, 16, 18, 0.9) 100%);
}

.craft-section__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-narrow);
  margin: 0 auto;
  text-align: center;
}

.craft-section__heading {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 var(--spacing-sm);
  background: var(--gradient-metal-text-dark);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.craft-section__tagline {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  margin: 0 0 var(--spacing-md);
}

.craft-section__text {
  color: var(--color-on-dark-muted);
  margin: 0 auto var(--spacing-lg);
  max-width: 560px;
}

.craft-section__link {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  border-bottom: 1px solid var(--color-on-dark);
  padding-bottom: 2px;
}

/* About page */
.about-hero {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-on-dark);
}

.about-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.about-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(16, 16, 18, 0.5) 0%, rgba(16, 16, 18, 0.85) 100%);
}

.about-hero__inner { position: relative; z-index: 1; padding: var(--spacing-xl) var(--spacing-md); }

.about-hero__eyebrow {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
  margin: 0 0 var(--spacing-sm);
}

.about-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  margin: 0;
  text-transform: uppercase;
}

.about-content {
  padding: var(--spacing-xl) 0;
}

.about-content__prose {
  max-width: var(--container-narrow);
  margin: 0 auto;
  font-size: 16px;
  color: var(--color-text);
}

.about-content__prose p { margin: 0 0 var(--spacing-md); }

/*
 * Generic styling for standard block-editor content (headings, columns,
 * images) inside the About page body, so editors can freely add
 * paragraphs/images/columns from the normal editor and have them match the
 * theme's look without any custom markup or theme-file edits.
 */
.about-content__prose h2,
.about-content__prose h3,
.about-content__prose h4 {
  font-family: var(--font-serif);
  letter-spacing: 0.04em;
  margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.about-content__prose .wp-block-columns {
  margin: var(--spacing-lg) 0 var(--spacing-md);
  text-align: center;
}

.about-content__prose .wp-block-column h3,
.about-content__prose .wp-block-column h4 {
  margin-top: 0;
}

.about-content__prose figure,
.about-content__prose img {
  margin: var(--spacing-lg) 0;
  border-radius: var(--radius);
}

.about-video {
  padding: var(--spacing-xl) 0;
  background: var(--color-carbon);
}

.about-video__frame {
  max-width: var(--container-width);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
}

.about-video__player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-video__caption {
  max-width: var(--container-width);
  margin: var(--spacing-sm) auto 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--color-on-dark-muted);
}

.about-video__empty {
  max-width: var(--container-width);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-dark-muted);
  border: 1px dashed rgba(242, 242, 240, 0.2);
  border-radius: var(--radius);
  font-size: 13px;
}

/* Category grid */
.category-grid {
  padding: var(--spacing-xl) 0;
  background: var(--color-off-white);
}

.category-grid__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
}

.category-grid__item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius);
}

.category-grid__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-metal);
  z-index: 2;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.category-grid__item:hover::before {
  transform: scaleX(1);
}

.category-grid__image,
.category-grid__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Background image/filter come from the .carbon-weave / .carbon-weave--light
   utility classes applied alongside this in the template, so the placeholder
   reads as brand-appropriate material rather than an unrelated grey block. */
.category-grid__placeholder {
  background-color: var(--color-platinum);
}

.category-grid__item:hover .category-grid__image,
.category-grid__item:hover .category-grid__placeholder {
  transform: scale(1.03);
}

.category-grid__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-md);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  background: linear-gradient(transparent, rgba(0,0,0,0.5));
}

.category-grid__index {
  display: block;
  font-family: var(--font-serif);
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 2px;
}

/* Product section */
.product-section {
  padding: var(--spacing-xl) 0;
}

.product-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.product-section__link {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border);
}

.product-section__empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--spacing-lg);
}

/* Category showcase: full-width banner between category product rows */
.showcase-banner {
  width: 100%;
  line-height: 0;
}

.showcase-banner__link {
  display: block;
  overflow: hidden;
}

.showcase-banner__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.showcase-banner__link:hover .showcase-banner__image {
  transform: scale(1.02);
}

/* Floating contact CTA (bottom-right, all pages) */
.contact-cta {
  position: fixed;
  right: var(--spacing-md);
  bottom: var(--spacing-md);
  z-index: 190;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  background: var(--color-text);
  color: var(--color-white);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.contact-cta:hover {
  color: var(--color-white);
  background: var(--color-text-strong, var(--color-text));
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.contact-cta__icon {
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .contact-cta {
    right: var(--spacing-sm);
    bottom: var(--spacing-sm);
    padding: 11px 16px;
    font-size: 12px;
  }
}

/* WooCommerce breadcrumb */
.woocommerce-breadcrumb {
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.woocommerce-breadcrumb a { color: var(--color-text-muted); }
.woocommerce-breadcrumb a:hover { color: var(--color-text); }

/* Shop layout: sidebar + main content */
.shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  align-items: start;
}

.shop-sidebar__section {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.shop-sidebar__section:last-child { border-bottom: none; }

.shop-sidebar__heading {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 var(--spacing-sm);
}

.shop-sidebar__categories {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.shop-sidebar__categories ul {
  list-style: none;
  margin: 4px 0 4px 12px;
  padding: 0;
}

.shop-sidebar__categories li { margin-bottom: 4px; }

.shop-sidebar__categories a {
  display: block;
  padding: 6px 0;
  color: var(--color-text-muted);
}

.shop-sidebar__categories li.is-active > a,
.shop-sidebar__categories li.current-cat > a {
  color: var(--color-text);
  font-weight: 500;
}

.shop-sidebar__price-inputs {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.shop-sidebar__price-inputs input {
  width: 100%;
  min-width: 0;
  padding: 8px;
  font-size: 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.shop-sidebar__price-sep { color: var(--color-text-muted); }

.shop-sidebar__price-submit {
  width: 100%;
  text-align: center;
  padding: 10px 16px;
  font-size: 12px;
}

/* Shop toolbar: result count / ordering / view toggle */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.shop-toolbar .woocommerce-result-count {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.shop-toolbar .woocommerce-ordering {
  margin: 0 0 0 auto;
}

.shop-toolbar .woocommerce-ordering select {
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.shop-view-toggle { display: flex; gap: 4px; }

.shop-view-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--color-text-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}

.shop-view-toggle__btn.is-active {
  color: var(--color-white);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Wishlist toast notification */
.saca-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 12px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--color-text);
  color: var(--color-white);
  font-size: 13px;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 999;
}

.saca-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.saca-toast::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2327ae60'/%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.saca-toast.is-toast--removed::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23767676'/%3E%3Cpath d='M8 12h8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Product grid */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * WooCommerce's own CSS adds a clearfix via `ul.products::before/::after`
 * (`content: " "; display: table;`) — meant for the classic float-based
 * layout. Once the list becomes a CSS grid (above), these pseudo-elements
 * are not automatically excluded and are laid out as real (empty) grid
 * items, producing a blank cell before the first product. Removing them
 * entirely is safe since grid doesn't need a float clearfix.
 */
ul.products::before,
ul.products::after {
  content: none !important;
  display: none !important;
}

.product-card { margin: 0 !important; width: 100% !important; }

.product-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card__image-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-off-white);
  margin-bottom: var(--spacing-sm);
}

.product-card__image-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-metal);
  z-index: 2;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.product-card:hover .product-card__image-wrap::before { transform: scaleX(1); }

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-card__image { transform: scale(1.02); }

.product-card__title {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.03em;
  margin: 0 0 4px;
}

.product-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.product-card__price {
  font-size: 14px;
  color: var(--color-text-muted);
}

.product-card__wishlist {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.15s ease;
}

.product-card__wishlist:hover { color: var(--color-text); }

.product-card__wishlist:active { transform: scale(0.9); }

.product-card__wishlist-icon { transition: transform 0.2s ease; }

.product-card__wishlist.is-active {
  color: #c0392b;
}

.product-card__wishlist.is-active .product-card__wishlist-icon {
  fill: currentColor;
  transform: scale(1.1);
}

.product-card__actions {
  margin-top: auto;
  padding-top: var(--spacing-sm);
}

.product-card__actions .button {
  width: 100%;
  text-align: center;
  padding: 10px 16px;
  font-size: 11px;
}

/* Shop list view (toggled via .shop-view-toggle__btn) */
ul.products.products--list {
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
}

.products--list .product-card__inner {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.products--list .product-card__link {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--spacing-md);
  min-width: 0;
}

.products--list .product-card__image-wrap {
  width: 96px;
  flex-shrink: 0;
  margin-bottom: 0;
}

.products--list .product-card__title {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.products--list .product-card__meta {
  flex-shrink: 0;
  gap: var(--spacing-md);
}

.products--list .product-card__actions {
  margin-top: 0;
  padding-top: 0;
  flex-shrink: 0;
  width: auto;
}

.products--list .product-card__actions .button { width: auto; }

/* Footer */
.site-footer {
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-xl) 0 var(--spacing-md);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.site-footer__logo-text {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.site-footer__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted);
  margin: var(--spacing-sm) 0 0;
}

.site-footer__heading {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 var(--spacing-sm);
}

.footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-menu li { margin-bottom: 8px; }

.footer-menu a {
  font-size: 14px;
  color: var(--color-text-muted);
}

.site-footer__social {
  display: flex;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  transition: color var(--transition), border-color var(--transition);
}

.social-link svg {
  width: 14px;
  height: 14px;
}

.social-link:hover {
  color: var(--color-text);
  border-color: var(--color-text);
  opacity: 1;
}

.site-footer__bottom {
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.site-footer__copyright {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
  text-align: center;
}

/* WooCommerce general */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--radius);
  border-top: none !important;
}

.woocommerce .quantity .qty {
  padding: 8px;
  border: 1px solid var(--color-border);
}

/* Responsive */
@media (max-width: 1024px) {
  ul.products,
  .category-grid__items {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .brand-intro__inner {
    grid-template-columns: 1fr;
  }

  .about-pillars__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .shop-layout {
    grid-template-columns: 1fr;
  }

  .shop-sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
  }

  .shop-sidebar__section {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  /*
   * At desktop width the 40px-tall logo has plenty of room either side of
   * it, but on narrow phone screens that same fixed pixel height eats a
   * large share of the viewport width (the logo's aspect ratio keeps it
   * roughly 4.8x wider than tall), crowding the icons beside it and, in
   * the worst case, pushing the cart icon out of the visible header
   * entirely. Scaling the logo (and the header row itself) down for
   * narrow screens keeps every icon visible with breathing room.
   */
  .site-header__inner {
    height: 56px;
    gap: var(--spacing-xs);
  }

  .custom-logo { height: 26px !important; }

  .site-header__logo-text { font-size: 1.1rem; }

  .site-header__start,
  .site-header__actions {
    gap: 0;
  }

  .menu-toggle,
  .header-search-toggle,
  .header-action {
    padding: 6px;
  }

  .nav-drawer__panel { width: 100%; }

  .header-search-panel__suggestions {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
  }

  .hero-slider__slide {
    aspect-ratio: 4 / 3;
    min-height: 300px;
  }

  /*
   * Portrait phones crop a landscape brand video aggressively when
   * object-fit: cover and the letterbox-zoom are both applied. On this
   * breakpoint, fill the visible screen and show the full frame
   * (contain) so the movie is not reduced to a centre strip.
   */
  .hero-video {
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    max-height: none;
    background: #0a0a0a;
  }

  .hero-video__player {
    object-fit: contain;
    transform: none;
  }

  ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .shop-sidebar {
    grid-template-columns: 1fr;
  }

  .shop-toolbar {
    justify-content: flex-start;
  }

  .shop-toolbar .woocommerce-ordering {
    margin-left: 0;
  }

  .products--list .product-card__inner {
    flex-wrap: wrap;
  }

  .products--list .product-card__actions {
    width: 100%;
    margin-top: var(--spacing-xs);
  }

  .products--list .product-card__actions .button { width: 100%; }
}

@media (max-width: 480px) {
  ul.products {
    grid-template-columns: 1fr;
  }

  .category-grid__items {
    grid-template-columns: repeat(2, 1fr);
  }

  .header-search-panel__suggestions {
    grid-template-columns: 1fr;
  }

  .site-header__inner {
    gap: 2px;
  }

  .custom-logo { height: 22px !important; }

  .header-action svg,
  .header-search-toggle svg {
    width: 18px;
    height: 18px;
  }

  .menu-toggle__bar { width: 18px; }

  .header-action,
  .menu-toggle,
  .header-search-toggle {
    padding: 4px;
  }

  .hero-video__mute {
    right: var(--spacing-md);
    bottom: calc(var(--spacing-md) + 24px);
  }
}