/* ==========================================================================
   MotoJoy — main.css
   Plain CSS, mobile-first.

   Design token VALUES live in theme.json. The :root block below is an alias
   layer only — it maps this stylesheet's historical token names onto the
   variables WordPress generates from theme.json, so component CSS keeps
   working unchanged. See section 1.

   Contents:
     1. Design tokens (:root alias layer)
     2. Modern minimal reset
     3. Base typography & elements
     4. Accessibility helpers (.sr-only, .skip-link)
     5. Layout utilities (.container, .flex, .grid)
     6. Buttons
     7. Content (posts, pages, pagination, 404)
     8. Global site chrome
     9. Contact page
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens — ALIAS LAYER

   Values live in theme.json. This block contains aliases only: every property
   maps a legacy token name onto the variable WordPress generates from
   theme.json. Adding a literal value here reintroduces exactly the drift this
   migration removed — two files disagreeing about one value, with no way to
   tell which one is authoritative.

   To change a value, edit theme.json. Not this file.

   These aliases resolve through the `global-styles` inline stylesheet that
   WordPress prints in wp_head. If that handle is ever dequeued — a common
   performance "optimisation", and something a caching or optimisation plugin
   may do automatically — every alias below resolves to nothing and the site
   loses its entire visual system at once. See CLAUDE.md §5.
   -------------------------------------------------------------------------- */
:root {
  /* Colours. */
  --color-bg: var(--wp--preset--color--bg);
  --color-bg-surface: var(--wp--preset--color--surface);
  --color-text: var(--wp--preset--color--ink);
  --color-text-muted: var(--wp--preset--color--text-muted);
  /* Primary action is ink, not brand — design-system.md §3.3. */
  --color-accent: var(--wp--preset--color--ink);
  --color-accent-text: var(--wp--preset--color--brand-deep);
  --color-accent-hover: var(--wp--preset--color--ink-soft);
  /* Two different jobs, deliberately two different tokens — design-system.md §6.
     --color-border is the decorative hairline grid. Control boundaries (inputs,
     selects, checkboxes, outline buttons) must use --color-control-border,
     which is dark enough to meet the 3:1 non-text contrast requirement; the
     hairline at 1.28:1 does not, and never did. */
  --color-border: var(--wp--preset--color--rule);
  --color-border-soft: var(--wp--preset--color--rule);
  --color-control-border: var(--wp--preset--color--border);

  /* Ink-plane counterparts. --color-text-muted is 2.46:1 on ink and
     --color-border is 13.13:1 there, so neither works on a dark plane.
     --color-control-border needs no dark variant: it clears 3:1 everywhere. */
  --color-text-on-dark-muted: var(--wp--preset--color--text-on-dark-muted);
  --color-rule-on-dark: var(--wp--preset--color--rule-on-dark);

  /* Depth. The only two shadow primitives in the system — design-system.md §6.
     --shadow-hard is for temporary floating layers only (modal, drawer, filter
     sheet, dropdown); the directional variants mirror the offset so it falls
     toward the content rather than off the screen edge the layer is anchored
     to. --shadow-edge marks a selected swatch or active filter. Never both on
     one element. Nothing else gets a shadow. */
  --shadow-hard: var(--wp--preset--shadow--hard);
  --shadow-hard-right: var(--wp--preset--shadow--hard-right);
  --shadow-hard-bottom-right: var(--wp--preset--shadow--hard-bottom-right);
  --shadow-edge: var(--wp--preset--shadow--edge);

  /* Focus. Deliberately outside the brand hue so it is never mistaken for a
     brand accent — design-system.md §3.1, §10. */
  --color-focus: var(--wp--preset--color--focus);
  --focus-ring-width: var(--wp--custom--focus-ring-width);
  --focus-ring-offset: var(--wp--custom--focus-ring-offset);

  /* Design-system role names. Prefer these in new component CSS: the
     --color-accent* names above are inherited from the starter theme and are
     misnomers here (accent is ink, not a brand colour). */
  --color-ink: var(--wp--preset--color--ink);
  --color-ink-soft: var(--wp--preset--color--ink-soft);
  --color-text-on-dark: var(--wp--preset--color--text-on-dark);
  --color-text-disabled: var(--wp--preset--color--text-disabled);
  --color-brand: var(--wp--preset--color--brand);
  --color-brand-hover: var(--wp--preset--color--brand-hover);
  --color-brand-tint: var(--wp--preset--color--brand-tint);
  --color-success: var(--wp--preset--color--success);
  --color-success-tint: var(--wp--preset--color--success-tint);
  --color-warning: var(--wp--preset--color--warning);
  --color-warning-tint: var(--wp--preset--color--warning-tint);
  --color-error: var(--wp--preset--color--error);
  --color-error-tint: var(--wp--preset--color--error-tint);

  /* Controls. Buttons and inputs share these so they align when adjacent. */
  --control-h: var(--wp--custom--control-h);
  --control-h-mobile: var(--wp--custom--control-h-mobile);
  --control-h-compact: var(--wp--custom--control-h-compact);
  --text-button: var(--wp--preset--font-size--button);
  --tracking-label: var(--wp--custom--tracking-label);
  --duration-fast: var(--wp--custom--duration-fast);

  /* Consumed by component CSS but never declared until now — every one of
     these was a live defect. --color-bg-card alone is used 41 times across
     eight stylesheets, and 37 of those had no fallback, so the declaration was
     invalid at computed-value time and painted nothing at all. */
  --color-bg-card: var(--wp--preset--color--surface-raised);
  --color-bg-light: var(--wp--preset--color--surface);
  --color-text-on-light: var(--wp--preset--color--ink);
  --color-green: var(--wp--preset--color--success);

  /* Typography. */
  --font-primary: var(--wp--preset--font-family--sans);
  --font-size-base: var(--wp--preset--font-size--body);
  --line-height-base: var(--wp--custom--leading-body);

  /* Motion. --ease-out is consumed by category-rail.css with a working `ease-out`
     fallback, so it never broke — but it silently bypassed the design system's
     easing curve. */
  --ease-out: var(--wp--custom--ease-out);

  /* Spacing scale. Maps onto the 9-step scale in theme.json. */
  --spacing-xs: var(--wp--preset--spacing--1);
  --spacing-sm: var(--wp--preset--spacing--2);
  --spacing-md: var(--wp--preset--spacing--4);
  --spacing-lg: var(--wp--preset--spacing--6);
  --spacing-xl: var(--wp--preset--spacing--8);

  /* Layout. */
  --container-width: var(--wp--custom--width-wide);

  /* JS publishes the measured value after load. This token-built fallback
     matches the fixed mobile chrome before enhancement. */
  --header-height: calc(
    var(--wp--custom--header-utility-h-mobile) +
    var(--wp--custom--header-mobile-h)
  );

  /* Shape. Zero radius everywhere, no exceptions — design-system.md §6,
     CLAUDE.md §5. The four names are kept so component CSS does not have to
     change; they all resolve to the same zero. Do not reintroduce a scale
     here: depth comes from planes, 1px rules and the two shadow presets. */
  --radius: var(--wp--custom--radius);
  --radius-md: var(--wp--custom--radius);
  --radius-lg: var(--wp--custom--radius);
  --radius-pill: var(--wp--custom--radius);
}

/* --------------------------------------------------------------------------
   2. Modern minimal reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Anchor jumps (FAQ jump row, skip link) land instantly for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

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

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

/* Heading size, weight, line-height and tracking come from theme.json
   (styles.elements.h1–h6). Do not add a bare h1–h6 rule here: WordPress emits
   element styles unwrapped at specificity (0,0,1), main.css prints after
   global-styles, so any rule here silently wins and defeats theme.json. */

/* --------------------------------------------------------------------------
   3. Base typography & elements
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

p,
ul,
ol,
figure {
  margin-bottom: var(--spacing-md);
}

a {
  color: var(--color-accent-text);
  transition: color 0.2s ease;
}

/* Link hover comes from theme.json (styles.elements.link[":hover"] -> brand-hover,
   per design-system.md §3.3, where brand red keeps link hover). The rule that
   used to sit here set the same colour as the base `a` rule, so links did not
   change on hover at all. theme.json's pseudo-state selector outranks the bare
   `a` above, so removing it is what makes hover work. */

/* Reads the preset directly: dark planes (header utility bar, footer, ink
   and brand blocks) swap it for focus-on-dark, and an alias resolved on
   :root would not follow them. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--wp--preset--color--focus);
  outline-offset: var(--focus-ring-offset);
}

/* --------------------------------------------------------------------------
   4. Accessibility helpers
   -------------------------------------------------------------------------- */

/* Visually hidden, but available to screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: offscreen until it receives keyboard focus. */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--spacing-sm);
  z-index: 1000;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--wp--preset--color--text-on-dark);
  background-color: var(--color-accent);
  border-radius: var(--radius);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: var(--spacing-sm);
  color: var(--wp--preset--color--text-on-dark);
}

/* --------------------------------------------------------------------------
   5. Layout utilities
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--wp--custom--gutter);
}

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

.grid {
  display: grid;
  gap: var(--spacing-lg);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
/* Five variants, design-system.md §8.1.

   Primary is INK, never brand red (§3.3): on a product page the buy action has
   to dominate photography, badges and financing widgets, and if the buy button,
   the sale badge and the validation error are all red then red stops meaning
   anything. Brand red is a marking colour — it gets its own variant, for
   marketing CTAs in a hero or brand plane only.

   Nothing lifts, scales or glows. Depth is planes, rules and the two shadow
   presets (§6). Colour is the only thing that changes on hover. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  min-height: var(--control-h-mobile);
  padding-inline: var(--spacing-lg);
  color: var(--color-text-on-dark);
  font-size: var(--text-button);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  background-color: var(--color-ink);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition:
    background-color var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    color var(--duration-fast) ease;
}

@media (min-width: 48em) {
  .button {
    min-height: var(--control-h);
  }
}

.button:hover,
.button:focus-visible {
  color: var(--color-text-on-dark);
  background-color: var(--color-ink-soft);
}

/* Brand: marketing CTA inside a hero or brand plane. Never the buy action. */
.button--brand {
  background-color: var(--color-brand);
}

.button--brand:hover,
.button--brand:focus-visible {
  background-color: var(--color-brand-hover);
}

/* Secondary: transparent, ink label, control-weight border so it meets the
   3:1 non-text requirement. */
.button--secondary {
  color: var(--color-text);
  background-color: transparent;
  border-color: var(--color-control-border);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  color: var(--color-text);
  background-color: var(--color-bg-surface);
  border-color: var(--color-text);
}

/* Ghost: tertiary and in-cell. No border; underline on hover. */
.button--ghost {
  color: var(--color-text);
  background-color: transparent;
}

.button--ghost:hover,
.button--ghost:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
}

/* On-ink: actions sitting inside the dark plane (utility bar, footer). */
.button--on-ink {
  color: var(--color-ink);
  background-color: var(--color-text-on-dark);
}

.button--on-ink:hover,
.button--on-ink:focus-visible {
  color: var(--color-ink);
  background-color: var(--color-bg-surface);
}

/* Compact: in-cell actions and filter controls. Declared after the width
   query above so it wins at every viewport. */
.button--compact {
  min-height: var(--control-h-compact);
  padding-inline: var(--spacing-md);
}

/* Disabled must never be the only feedback — pair it with an explanatory
   line (§8.1). Styled neutral, not as an error. */
.button:disabled,
.button[aria-disabled='true'] {
  color: var(--color-text-disabled);
  background-color: var(--color-bg-surface);
  border-color: transparent;
  cursor: not-allowed;
}

/* Loading: the caller locks the width to prevent layout shift and swaps the
   label to a determinate state ("Dedama…"), per §8.1. */
.button[aria-busy='true'] {
  cursor: progress;
}

/* --------------------------------------------------------------------------
   7. Content
   -------------------------------------------------------------------------- */
.site-main {
  padding-block: var(--spacing-xl);
}

/* Blog index grid: 1 / 2 / 3 columns as the viewport grows. */
.posts-list {
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .posts-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .posts-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.post-card__thumb img {
  margin-bottom: var(--spacing-sm);
  border-radius: var(--radius);
}

.post-card__title {
  margin-bottom: var(--spacing-xs);
  font-size: 1.25rem;
}

.entry-meta {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.entry-thumbnail {
  margin-bottom: var(--spacing-lg);
}

.entry-thumbnail img {
  border-radius: var(--radius);
}

/* Pagination. */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xl);
}

.pagination .page-numbers {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}

.pagination .current {
  color: var(--wp--preset--color--text-on-dark);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   8. Global site chrome

   Header and footer markup is owned by header.php and footer.php. This section
   owns their complete presentation and responsive states.
   -------------------------------------------------------------------------- */
.site-header {
  --header-viewport-offset: 0px;

  position: sticky;
  top: 0;
  z-index: 100;
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--bg);
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateY(0);
  transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}

/* Scroll direction is tracked in main.js; hiding is transform-only so the
   sticky element's box (and --header-height) never changes size. */
.site-header.is-header-hidden {
  transform: translateY(-100%);
}

.admin-bar .site-header {
  --header-viewport-offset: 32px;

  top: 32px;
}

/* Lock the root only. Hiding body overflow too turns body into the scroll
   container, which re-anchors the sticky header to the document top. */
html.has-mobile-menu-open {
  overflow: hidden;
}

.site-header__utility {
  height: var(--wp--custom--header-utility-h-mobile);
  color: var(--wp--preset--color--text-on-dark);
  background: var(--wp--preset--color--ink);
  --wp--preset--color--focus: var(--wp--preset--color--focus-on-dark);
}

.site-header__utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--4);
  height: 100%;
  padding-inline: var(--wp--custom--gutter);
}

.site-header__utility-label,
.site-header__utility-links {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2);
  margin: 0;
  font-size: var(--wp--custom--header-utility-fs);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* One line at the strip's fixed height: the label clips rather than wraps,
   and the hours drop below 480px where label and phone cannot share a row. */
.site-header__utility-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.site-header__utility-hours {
  display: none;
}

@media (min-width: 480px) {
  .site-header__utility-hours {
    display: inline;
  }
}

.site-header__utility-links {
  flex: 0 0 auto;
  gap: var(--wp--preset--spacing--3);
}

.site-header__utility-marker {
  flex: 0 0 auto;
  width: var(--wp--preset--spacing--2);
  height: var(--wp--preset--spacing--2);
  background: var(--wp--preset--color--brand);
}

.site-header__utility a {
  color: var(--wp--preset--color--text-on-dark);
}

.site-header__utility a:hover,
.site-header__utility a:focus-visible {
  color: var(--wp--preset--color--text-on-dark);
  text-decoration: underline;
  text-underline-offset: var(--wp--preset--spacing--1);
}

.site-header__phone {
  font-variant-numeric: tabular-nums;
}

.site-header__account {
  display: none;
}

.site-header__shell {
  position: relative;
  display: grid;
  grid-template-columns: var(--wp--custom--header-mobile-brand-w) minmax(0, 1fr);
  grid-template-rows: var(--wp--custom--header-mobile-h);
  width: 100%;
  background: var(--wp--preset--color--bg);
  box-shadow: none;
}

.site-header__shell::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 1px;
  background: var(--wp--preset--color--ink);
  pointer-events: none;
}

.site-branding {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: var(--wp--custom--header-mobile-h);
  padding-inline: var(--wp--preset--spacing--3);
}

.site-branding .custom-logo-link,
.site-branding__fallback {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--3);
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--heading-3);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--wp--custom--tracking-heading);
}

.site-branding .custom-logo-link {
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.site-branding .custom-logo-link:focus-visible,
.site-branding__fallback:focus-visible {
  outline-color: var(--wp--preset--color--ink);
  outline-offset: calc(0px - var(--wp--custom--focus-ring-width));
}

.site-branding .custom-logo {
  width: auto;
  max-width: 100%;
  max-height: calc(var(--wp--preset--spacing--5) + var(--wp--preset--spacing--1));
}

.site-branding__mark {
  width: var(--wp--preset--spacing--5);
  height: var(--wp--preset--spacing--5);
  border: 3px solid currentColor;
  border-radius: 0;
}

.site-header__tools {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  grid-template-columns:
    var(--wp--custom--header-mobile-search-w)
    minmax(0, 1fr)
    var(--wp--custom--header-mobile-menu-w);
  min-width: 0;
  height: var(--wp--custom--header-mobile-h);
}

.site-header__search {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 220;
  display: block;
  min-width: 0;
  padding: var(--wp--preset--spacing--3);
  background: var(--wp--preset--color--bg);
  border-top: 1px solid var(--wp--preset--color--rule);
  border-bottom: 1px solid var(--wp--preset--color--ink);
  box-shadow: none;
}

.js .site-header__search {
  display: none;
}

.js .site-header__search.is-open {
  display: block;
}

.ws-search {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
}

.ws-search__field {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  min-height: var(--wp--custom--touch-min);
  padding-inline: var(--wp--preset--spacing--4);
  background: var(--wp--preset--color--bg);
  border: 1px solid var(--wp--preset--color--border);
  border-right: 0;
  border-radius: 0;
  transition: border-color var(--wp--custom--duration-fast) ease;
}

.ws-search__field:focus-within {
  border-color: var(--wp--preset--color--ink);
  outline: var(--wp--custom--header-search-focus-width) solid var(--wp--preset--color--ink);
  outline-offset: calc(0px - var(--wp--custom--header-search-focus-width));
}

.ws-search__input {
  flex: 1;
  min-width: 0;
  min-height: var(--wp--custom--touch-min);
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--body);
  background: none;
  border: 0;
  outline: 0;
}

.ws-search__input::placeholder {
  color: var(--wp--preset--color--text-muted);
  opacity: 1;
}

.ws-search__input::-webkit-search-decoration,
.ws-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.ws-search__submit {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--2);
  min-width: var(--wp--custom--touch-min);
  min-height: var(--wp--custom--touch-min);
  padding-inline: var(--wp--preset--spacing--5);
  color: var(--wp--preset--color--text-on-dark);
  font-size: var(--wp--preset--font-size--button);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking-label);
  background: var(--wp--preset--color--ink);
  border: 1px solid var(--wp--preset--color--ink);
  border-radius: 0;
  transition: background-color var(--wp--custom--duration-fast) ease;
}

.ws-search__submit:hover,
.ws-search__submit:focus-visible {
  color: var(--wp--preset--color--text-on-dark);
  background: var(--wp--preset--color--ink-soft);
}

.ws-search__submit:focus-visible {
  outline-width: var(--wp--custom--header-search-focus-width);
  outline-color: var(--wp--preset--color--text-on-dark);
  outline-offset: calc(0px - var(--wp--custom--header-search-focus-width));
}

/* Icon-only at every width; the label stays for screen readers. */
.ws-search__submit span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mobile-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 100%;
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--bg);
  border-left: 1px solid var(--wp--preset--color--rule);
}

.mobile-search-toggle:hover,
.mobile-search-toggle:focus-visible,
.mobile-search-toggle[aria-expanded='true'] {
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--surface);
}

.mobile-search-toggle:focus-visible {
  outline-width: var(--wp--custom--header-search-focus-width);
  outline-color: var(--wp--preset--color--ink);
  outline-offset: calc(0px - var(--wp--custom--header-search-focus-width));
}

.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--2);
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding-inline: 0;
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking-label);
  background: var(--wp--preset--color--bg);
  border-left: 1px solid var(--wp--preset--color--rule);
}

.cart-link:hover,
.cart-link:focus-visible {
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--surface);
}

.cart-link__count {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--wp--preset--spacing--5);
  height: var(--wp--preset--spacing--5);
  padding-inline: var(--wp--preset--spacing--1);
  color: var(--wp--preset--color--text-on-dark);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 700;
  line-height: 1;
  background: var(--wp--preset--color--brand);
  border-radius: 0;
  box-shadow: none;
}

.cart-link__count.is-bumped {
  animation: ws-cart-pulse var(--wp--custom--duration-deliberate) ease-out 1;
}

@keyframes ws-cart-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.12);
  }
}

.menu-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--2);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 100%;
  padding-inline: var(--wp--preset--spacing--2);
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking-label);
  background: var(--wp--preset--color--bg);
  border-left: 1px solid var(--wp--preset--color--rule);
}

.menu-toggle__icon {
  position: relative;
  display: block;
  width: var(--wp--preset--spacing--5);
  height: 2px;
  color: var(--wp--preset--color--ink);
  background: currentColor;
  transform: none;
  transition:
    background-color var(--wp--custom--duration-fast) ease,
    transform var(--wp--custom--duration-fast) ease;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition:
    top var(--wp--custom--duration-fast) ease,
    transform var(--wp--custom--duration-fast) ease;
}

.menu-toggle__icon::before {
  top: calc(0px - var(--wp--preset--spacing--2));
}

.menu-toggle__icon::after {
  top: var(--wp--preset--spacing--2);
}

.menu-toggle.is-active .menu-toggle__icon {
  background: transparent;
}

.menu-toggle.is-active .menu-toggle__icon::before,
.menu-toggle.is-active .menu-toggle__icon::after {
  top: 0;
}

.menu-toggle.is-active .menu-toggle__icon::before {
  transform: rotate(45deg);
}

.menu-toggle.is-active .menu-toggle__icon::after {
  transform: rotate(-45deg);
}

.site-nav {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 210;
  display: block;
  width: 100%;
  height: calc(100vh - var(--header-height) - var(--header-viewport-offset));
  height: calc(100dvh - var(--header-height) - var(--header-viewport-offset));
  max-height: calc(100vh - var(--header-height) - var(--header-viewport-offset));
  max-height: calc(100dvh - var(--header-height) - var(--header-viewport-offset));
  padding: 0;
  background: var(--wp--preset--color--bg);
  border-top: 1px solid var(--wp--preset--color--rule);
  border-bottom: 1px solid var(--wp--preset--color--ink);
  box-shadow: none;
  overscroll-behavior: contain;
  overflow-y: auto;
}

.js .site-nav {
  display: none;
}

.js .site-nav.is-open {
  display: block;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.site-nav__list > li > a {
  display: flex;
  align-items: center;
  min-height: var(--wp--custom--touch-min);
  padding-inline: var(--wp--custom--gutter);
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--button);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking-label);
  border-bottom: 1px solid var(--wp--preset--color--rule);
}

.site-nav__list > li > a::before {
  content: none;
}

.site-nav__list .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  margin-left: var(--wp--preset--spacing--2);
  border: 0.3em solid transparent;
  border-top-color: currentColor;
  border-bottom: 0;
  transition: transform var(--wp--custom--duration-fast) ease;
}

.site-nav__list .menu-item-has-children.is-open > a::after,
.site-nav__list .menu-item-has-children:hover > a::after,
.site-nav__list .menu-item-has-children:focus-within > a::after {
  transform: rotate(180deg);
}

.site-nav__list > li > a:hover,
.site-nav__list > li > a:focus-visible,
.site-nav__list > .current-menu-item > a,
.site-nav__list > .current-menu-ancestor > a {
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--surface);
}

.site-nav__list .sub-menu {
  display: none;
  margin: 0;
  padding: 0;
  background: var(--wp--preset--color--surface);
}

.site-nav__list .menu-item-has-children.is-open > .sub-menu {
  display: block;
}

.site-nav__list .sub-menu a {
  display: block;
  min-height: var(--wp--custom--touch-min);
  padding: var(--wp--preset--spacing--3) var(--wp--custom--gutter);
  padding-left: calc(var(--wp--custom--gutter) + var(--wp--preset--spacing--5));
  color: var(--wp--preset--color--ink);
  border-bottom: 1px solid var(--wp--preset--color--rule);
}

.site-nav__list .sub-menu a:hover,
.site-nav__list .sub-menu a:focus-visible {
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--brand-tint);
  transform: none;
}

/* Category images belong to the desktop catalog panel only; display:none also
   keeps their lazy images from loading in the drawer. */
.site-nav__media {
  display: none;
}

/* Shared successful add-to-cart feedback. */
.ws-toast {
  position: fixed;
  right: max(var(--wp--preset--spacing--6), env(safe-area-inset-right));
  bottom: max(var(--wp--preset--spacing--6), env(safe-area-inset-bottom));
  z-index: 500;
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2);
  max-width: min(
    calc(
      var(--wp--preset--spacing--9) +
      var(--wp--preset--spacing--9) +
      var(--wp--preset--spacing--9) +
      var(--wp--preset--spacing--7)
    ),
    calc(100vw - var(--wp--preset--spacing--6))
  );
  padding: var(--wp--preset--spacing--4);
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--sm);
  background: var(--wp--preset--color--bg);
  border: 1px solid var(--wp--preset--color--ink);
  border-radius: 0;
  box-shadow: var(--wp--preset--shadow--hard-bottom-right);
  opacity: 0;
  transform: translateY(var(--wp--preset--spacing--4));
  pointer-events: none;
  transition:
    opacity var(--wp--custom--duration-base) ease,
    transform var(--wp--custom--duration-base) ease;
}

.ws-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ws-toast__check {
  position: relative;
  flex: 0 0 auto;
  width: var(--wp--preset--spacing--5);
  height: var(--wp--preset--spacing--5);
  background: var(--wp--preset--color--success);
}

.ws-toast__check::after {
  content: '';
  position: absolute;
  top: 45%;
  left: 50%;
  width: var(--wp--preset--spacing--1);
  height: var(--wp--preset--spacing--2);
  border: solid var(--wp--preset--color--text-on-dark);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    --header-viewport-offset: 46px;

    top: 46px;
  }
}

@media (max-width: 1279px) {
  html,
  body,
  .site-header,
  .site-header__utility,
  .site-header__shell {
    width: 100%;
    min-width: 100%;
    max-width: none;
  }

  .admin-bar #wpadminbar {
    width: 100%;
    min-width: 100%;
    max-width: none;
  }

  .no-js .site-header {
    margin-bottom: calc(
      var(--wp--custom--touch-min) +
      var(--wp--preset--spacing--5) +
      2px
    );
  }

  .no-js .site-header__shell {
    grid-template-rows: var(--wp--custom--header-mobile-h) auto;
  }

  .no-js .site-header__tools {
    grid-template-columns: minmax(0, 1fr);
  }

  .no-js .mobile-search-toggle,
  .no-js .menu-toggle {
    display: none;
  }

  .no-js .site-nav {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    height: auto;
    max-height: none;
  }

  .site-header__utility-links {
    gap: var(--wp--preset--spacing--3);
  }
}

@media (min-width: 1024px) {
  .site-header__utility {
    height: var(--wp--custom--header-utility-h);
  }

  .site-header__utility-label,
  .site-header__utility-links {
    gap: var(--wp--preset--spacing--5);
    line-height: 1.2;
    letter-spacing: var(--wp--custom--tracking-label);
  }

  .site-header__utility-label {
    gap: var(--wp--preset--spacing--3);
  }

  .site-header__account {
    display: inline-flex;
  }
}

/* The six-item nav, logo, search and cart need ~1240px on one row, so the
   desktop shell starts at 1280px; below it the compact header applies. */
@media (min-width: 1280px) {
  :root {
    --header-height: calc(
      var(--wp--custom--header-utility-h) +
      var(--wp--custom--header-main-h)
    );
  }

  /* One row: logo | nav | search | cart. The tools wrapper dissolves so
     search and cart take their own grid columns after the nav. */
  .site-header__shell {
    grid-template-columns:
      max-content
      minmax(max-content, 1fr)
      minmax(
        var(--wp--custom--header-search-min-w),
        var(--wp--custom--header-search-max-w)
      )
      max-content;
    grid-template-rows: var(--wp--custom--header-main-h);
    /* Same content edges as the utility bar's .container above it. */
    padding-inline: var(--wp--custom--page-edge);
  }

  .site-branding {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    height: auto;
    padding-inline: 0 var(--wp--preset--spacing--5);
  }

  .site-branding .custom-logo-link {
    justify-content: flex-start;
    width: auto;
  }

  /* Sized by height alone so the auto column never squeezes the logo. */
  .site-branding .custom-logo {
    max-width: none;
    max-height: var(--wp--custom--header-logo-h);
  }

  .site-header__tools {
    display: contents;
  }

  .site-header__search,
  .js .site-header__search,
  .js .site-header__search.is-open {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    z-index: auto;
    display: flex;
    grid-column: 3;
    grid-row: 1;
    align-items: center;
    height: 100%;
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .ws-search {
    height: auto;
  }

  .ws-search__field {
    padding-inline: var(--wp--preset--spacing--3);
  }

  .ws-search__submit {
    padding-inline: 0;
  }

  .cart-link {
    grid-column: 4;
    grid-row: 1;
    width: auto;
    min-height: 100%;
    padding-inline: var(--wp--preset--spacing--4) 0;
    border-left: 0;
  }

  .mobile-search-toggle {
    display: none;
  }

  .menu-toggle {
    display: none;
  }

  .site-nav,
  .js .site-nav,
  .js .site-nav.is-open {
    position: static;
    z-index: auto;
    display: block;
    grid-column: 2;
    grid-row: 1;
    height: 100%;
    max-height: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }

  .site-nav__list {
    height: 100%;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  .site-nav__list > li > a {
    position: relative;
    height: 100%;
    min-height: 0;
    padding-inline: var(--wp--preset--spacing--3);
    white-space: nowrap;
    background: var(--wp--preset--color--bg);
    border-bottom: 3px solid transparent;
  }

  .site-nav__list > li > a:hover,
  .site-nav__list > li > a:focus-visible,
  .site-nav__list > .current-menu-item > a,
  .site-nav__list > .current-menu-ancestor > a {
    background: var(--wp--preset--color--bg);
    border-bottom-color: var(--wp--preset--color--brand);
  }

  .site-nav__list .menu-item-has-children {
    position: relative;
  }

  .site-nav__list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    display: block;
    min-width: calc(
      var(--wp--preset--spacing--9) +
      var(--wp--preset--spacing--9) +
      var(--wp--preset--spacing--7)
    );
    padding: 0;
    background: var(--wp--preset--color--bg);
    border: 1px solid var(--wp--preset--color--ink);
    border-radius: 0;
    box-shadow: var(--wp--preset--shadow--hard);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(0px - var(--wp--preset--spacing--2)));
    pointer-events: none;
    transition:
      opacity var(--wp--custom--duration-base) var(--wp--custom--ease-out),
      transform var(--wp--custom--duration-base) var(--wp--custom--ease-out),
      visibility var(--wp--custom--duration-base) linear;
  }

  /* .is-dismissed is set by Escape in main.js and cleared when the pointer or
     focus leaves the item. */
  .site-nav__list .menu-item-has-children:not(.is-dismissed):hover > .sub-menu,
  .site-nav__list .menu-item-has-children:not(.is-dismissed):focus-within > .sub-menu,
  .site-nav__list .menu-item-has-children.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-nav__list .sub-menu a {
    min-height: var(--wp--custom--touch-min);
    padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
    color: var(--wp--preset--color--ink);
    white-space: nowrap;
    background: var(--wp--preset--color--bg);
    border-bottom: 1px solid var(--wp--preset--color--rule);
    border-radius: 0;
  }

  .site-nav__list .sub-menu li:last-child > a {
    border-bottom: 0;
  }

  /* Catalog panel: a top-level item whose children have children
     (inc/nav-menu.php). Every category column is open at once, inset to the
     shell's content edges. --panel-columns comes from the walker; a wide
     column takes two tracks. */
  .site-nav__list > .menu-item--panel {
    position: static;
  }

  .site-nav__list > .menu-item--panel > .sub-menu {
    right: var(--wp--custom--page-edge);
    left: var(--wp--custom--page-edge);
    display: grid;
    grid-template-columns: repeat(var(--panel-columns, 4), minmax(0, 1fr));
    column-gap: var(--wp--preset--spacing--5);
    min-width: 0;
    max-height: calc(100dvh - var(--header-height) - var(--header-viewport-offset));
    padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--5) 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .menu-item--panel > .sub-menu > li {
    min-width: 0;
    padding-bottom: var(--wp--preset--spacing--5);
  }

  .menu-item--panel > .sub-menu > .menu-item--wide {
    grid-column: span 2;
  }

  .menu-item--panel .site-nav__media {
    display: block;
    aspect-ratio: var(--wp--custom--ratio-machine);
    margin-bottom: var(--wp--preset--spacing--3);
    overflow: hidden;
    background: var(--wp--preset--color--surface);
  }

  /* The box keeps a single column's width so its ratio gives every column
     the same image height; the image itself spans the whole wide column and
     sits centred over both text columns. */
  .menu-item--wide .site-nav__media {
    position: relative;
    width: calc((100% - var(--wp--preset--spacing--5)) / 2);
    overflow: visible;
  }

  .menu-item--wide .site-nav__media img {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(200% + var(--wp--preset--spacing--5));
    max-width: none;
  }

  /* Category images are supplier product shots on white: show them whole on
     the panel plane. The surface plane behind shows only without an image. */
  .site-nav__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--wp--preset--color--bg);
  }

  .site-nav__list .menu-item--panel > .sub-menu > li > a {
    display: block;
    min-height: 0;
    padding: 0 0 var(--wp--preset--spacing--2);
    font-size: var(--wp--preset--font-size--button);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: var(--wp--custom--tracking-label);
    white-space: normal;
    background: transparent;
    border-bottom: 0;
  }

  .site-nav__list .menu-item--panel > .sub-menu > li > a:hover,
  .site-nav__list .menu-item--panel > .sub-menu > li > a:focus-visible {
    background: transparent;
    text-decoration: underline;
    text-decoration-color: var(--wp--preset--color--brand);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
  }

  .site-nav__list .menu-item--panel .sub-menu a::after {
    content: none;
  }

  .site-nav__list .menu-item--panel .sub-menu .sub-menu {
    position: static;
    display: block;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: inherit;
    transform: none;
    pointer-events: auto;
    transition: none;
  }

  .menu-item--wide > .sub-menu {
    columns: 2;
    column-gap: var(--wp--preset--spacing--5);
  }

  .menu-item--panel .sub-menu .sub-menu li {
    break-inside: avoid;
  }

  .site-nav__list .menu-item--panel .sub-menu .sub-menu a {
    display: flex;
    align-items: center;
    margin-inline: calc(0px - var(--wp--preset--spacing--2));
    padding: 0 var(--wp--preset--spacing--2);
    font-size: var(--wp--preset--font-size--body);
    line-height: 1.3;
    white-space: normal;
    background: transparent;
    border-bottom: 0;
  }

  .site-nav__list .menu-item--panel .sub-menu .sub-menu a:hover,
  .site-nav__list .menu-item--panel .sub-menu .sub-menu a:focus-visible {
    background: var(--wp--preset--color--brand-tint);
  }

  .site-nav__list .menu-item--panel .site-nav__all {
    grid-column: 1 / -1;
    margin-inline: calc(0px - var(--wp--preset--spacing--5));
    padding-bottom: 0;
    border-top: 1px solid var(--wp--preset--color--rule);
  }

  .site-nav__list .menu-item--panel > .sub-menu > .site-nav__all > a {
    display: flex;
    align-items: center;
    min-height: var(--wp--custom--touch-min);
    padding: 0 var(--wp--preset--spacing--5);
    font-size: var(--wp--preset--font-size--button);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--wp--custom--tracking-label);
  }

  .site-nav__list .menu-item--panel > .sub-menu > .site-nav__all > a:hover,
  .site-nav__list .menu-item--panel > .sub-menu > .site-nav__all > a:focus-visible {
    color: var(--wp--preset--color--brand-deep);
    text-decoration: none;
  }

  /* Same rule mark as the Instagram block's "Sekti Instagram →": a border
     under the label, so it runs unbroken beneath the arrow. */
  .site-nav__all-label {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--2);
    padding-block-end: var(--wp--custom--rule-mark);
    border-block-end: var(--wp--custom--rule-mark) solid
      var(--wp--preset--color--brand);
  }

  .site-nav__all > a:hover .site-nav__all-label,
  .site-nav__all > a:focus-visible .site-nav__all-label {
    border-block-end-color: var(--wp--preset--color--brand-hover);
  }

  /* Touch screens at desktop width keep touch-size rows. */
  @media (hover: hover) and (pointer: fine) {
    .site-nav__list .menu-item--panel .sub-menu .sub-menu a {
      min-height: var(--wp--preset--spacing--6);
    }
  }

}

.site-footer {
  margin-top: 0;
  padding: 0;
  color: var(--wp--preset--color--text-on-dark);
  background: var(--wp--preset--color--ink);
  --wp--preset--color--focus: var(--wp--preset--color--focus-on-dark);
  border-top: 0;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-block: 0;
}

.site-footer__section {
  min-width: 0;
  padding: var(--wp--preset--spacing--7) var(--wp--preset--spacing--6);
  border-bottom: 1px solid var(--wp--preset--color--rule-on-dark);
}

.site-footer__title {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2);
  margin: 0 0 var(--wp--preset--spacing--4);
  color: var(--wp--preset--color--text-on-dark);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking-label);
}

.site-footer__title::before {
  content: '';
  width: var(--wp--preset--spacing--2);
  height: var(--wp--preset--spacing--2);
  background: var(--wp--preset--color--brand);
}

.site-footer__menu {
  margin: 0;
}

.site-footer__menu li {
  margin: 0;
}

.site-footer__menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--wp--custom--touch-min);
  padding-block: var(--wp--preset--spacing--2);
  color: var(--wp--preset--color--text-on-dark-muted);
  font-weight: 500;
  text-decoration: none;
  transform: none;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible {
  color: var(--wp--preset--color--text-on-dark);
  text-decoration: underline;
  text-underline-offset: var(--wp--preset--spacing--1);
  transform: none;
}

.site-footer__logo {
  display: block;
  max-width: 140px;
  height: auto;
  margin-bottom: var(--wp--preset--spacing--3);
}

.site-footer__details {
  color: var(--wp--preset--color--text-on-dark-muted);
  font-size: var(--wp--preset--font-size--sm);
  font-style: normal;
  line-height: var(--wp--custom--leading-body);
  font-variant-numeric: tabular-nums;
}

.site-footer__details p {
  margin: 0;
}

.site-footer__details a {
  color: var(--wp--preset--color--text-on-dark);
}

.site-footer__details a:hover,
.site-footer__details a:focus-visible {
  color: var(--wp--preset--color--text-on-dark);
  text-decoration: underline;
  text-underline-offset: var(--wp--preset--spacing--1);
}

.site-footer__company-name {
  color: var(--wp--preset--color--text-on-dark);
  font-weight: 700;
}

.site-footer__phone {
  margin-top: var(--wp--preset--spacing--3);
}

/* Social links — template-parts/components/social-links.php.
   The component inherits the caller's text colour and keeps its glyphs on
   the left edge of each hit area, so they line up with column text. The
   caller's placement class (here .site-footer__social) owns spacing and the
   plane tone; the hover tone is on-dark, so a light plane needs a modifier. */
.mj-social__list {
  display: flex;
  gap: var(--wp--preset--spacing--2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mj-social__link {
  display: inline-flex;
  align-items: center;
  min-width: var(--wp--custom--touch-min);
  min-height: var(--wp--custom--touch-min);
  color: inherit;
}

.mj-social__link:hover,
.mj-social__link:focus-visible {
  color: var(--wp--preset--color--text-on-dark);
}

.site-footer__social {
  margin-top: var(--wp--preset--spacing--4);
  color: var(--wp--preset--color--text-on-dark-muted);
}

/* Payment strip above the legal bar: the accepted methods in words, then
   the card and provider marks as fixed-ratio badges (the issuers' card
   shapes, squared). Lives outside the footer grid so the focused checkout
   keeps it. */
.site-footer__payments {
  border-top: 1px solid var(--wp--preset--color--rule-on-dark);
}

.site-footer__payments-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
  padding-block: var(--wp--preset--spacing--4);
}

.site-footer__payments-text {
  margin: 0;
  color: var(--wp--preset--color--text-on-dark-muted);
  font-size: var(--wp--preset--font-size--sm);
}

.site-footer__payment-marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__payment-marks img {
  display: block;
  width: auto;
  height: 28px;
}

.site-footer__bottom {
  margin: 0;
  padding: 0;
  color: var(--wp--preset--color--text-on-dark-muted);
  font-size: var(--wp--preset--font-size--label);
  background: var(--wp--preset--color--ink);
  border-top: 1px solid var(--wp--preset--color--rule-on-dark);
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
  min-height: var(--wp--custom--header-h);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
  margin: 0;
}

.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--wp--custom--touch-min);
  color: var(--wp--preset--color--text-on-dark-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking-label);
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: var(--wp--preset--color--text-on-dark);
  text-decoration: underline;
  text-underline-offset: var(--wp--preset--spacing--1);
}

.site-footer__copyright {
  margin: 0;
  color: var(--wp--preset--color--text-on-dark-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking-label);
}

@media (max-width: 599px) {
  .site-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    padding-block-end: calc(var(--wp--preset--spacing--6) + env(safe-area-inset-bottom));
  }

  .site-footer__legal {
    flex-direction: column;
    gap: 0;
  }
}

@media (min-width: 600px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__section:nth-child(odd) {
    border-right: 1px solid var(--wp--preset--color--rule-on-dark);
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .site-footer__section {
    border-right: 1px solid var(--wp--preset--color--rule-on-dark);
    border-bottom: 0;
  }

  .site-footer__section:last-child {
    border-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-nav__list .sub-menu,
  .menu-toggle__icon,
  .menu-toggle__icon::before,
  .menu-toggle__icon::after,
  .ws-search__field,
  .ws-search__submit,
  .ws-toast {
    transition: none;
  }

  .cart-link__count.is-bumped {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   9. Contact page
   -------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-lg);
  align-items: start;
  min-width: 0;
}

.contact-card,
.contact-map {
  min-width: 0;
  background-color: var(--color-bg-card, var(--color-bg-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.contact-card {
  padding: var(--spacing-lg);
}

.contact-section + .contact-section {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border-soft);
}

.contact-section h2,
.contact-section h3 {
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
}

.contact-address {
  font-style: normal;
  line-height: var(--line-height-base);
  overflow-wrap: anywhere;
}

.contact-links,
.contact-hours,
.contact-details {
  margin: 0;
}

.contact-links > div,
.contact-hours > div,
.contact-details > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-xs) var(--spacing-md);
  padding-block: var(--spacing-sm);
}

.contact-links dt,
.contact-hours dt,
.contact-details dt {
  font-weight: 600;
  color: var(--color-text);
}

.contact-links dd,
.contact-hours dd,
.contact-details dd {
  min-width: 0;
  margin: 0;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.contact-links a {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--spacing-lg) + var(--spacing-md));
  padding-block: var(--spacing-xs);
  color: var(--color-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--spacing-xs);
  overflow-wrap: anywhere;
}

.contact-links a:hover,
.contact-links a:focus-visible {
  color: var(--color-accent-text);
}

.contact-details__break {
  display: block;
}

.contact-note {
  margin-top: var(--spacing-md);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  overflow-wrap: anywhere;
}

.contact-map {
  overflow: hidden;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: inherit;
}

/* Gutenberg's Group layout classes can reapply flex after theme styles. */
@media (max-width: 899px) {
  .contact-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .contact-layout > .contact-card,
  .contact-layout > .contact-map {
    width: 100%;
    max-width: 100%;
    grid-column: 1 / -1;
  }
}

@media (min-width: 600px) {
  .contact-links > div,
  .contact-hours > div,
  .contact-details > div {
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr);
    align-items: baseline;
  }
}

@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .contact-map iframe {
    height: 650px;
  }
}