/*
Theme Name: CL Parts
Theme URI:
Author: Räikee Oy
Author URI:
Description: A modern agency starter theme built with block editor patterns and theme.json.
Version: 1.0.31
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agency-base
Tags: block-patterns, block-styles, full-site-editing, wide-blocks
*/

/* Fonts — TODO: replace with local WOFF2 for production */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@300;400;600;700&family=Barlow:wght@300;400;500&display=swap');

/* ==========================================================================
   Layer Declarations
   ========================================================================== */

/*
   Cascade layers ensure predictable specificity. Layers are applied in order:

   1. reset     — Browser resets + box-sizing normalization (in this file)
   2. wpglobal  — WordPress global styles (auto-wrapped via functions.php for cascade control)
   3. base      — Global element defaults (in this file)
   4. tokens    — Design system tokens via CSS custom properties (in this file)
   5. header    — Header/navigation styles (see assets/css/header.css)
   6. components — Reusable component styles (see styles/blocks/core/*.css)
   7. utilities — Helper & utility classes (in this file)
   8. overrides — High-specificity client overrides (add your custom CSS here)

   Note: reset, base, tokens, and utilities are defined in this file.
   wpglobal layer wraps WP's global-styles-inline-css to make it overridable by other layers.
   header styles live in assets/css/header.css (enqueued via functions.php).
   Block-specific CSS lives in styles/blocks/core/ (auto-enqueued via functions.php).
*/

/* Layer order is also declared early in functions.php (wp_head priority 1) to ensure
   wpglobal is positioned correctly before WordPress outputs global-styles-inline-css.
   If you change this order, update functions.php to match.

   wpglobal is the @layer wrapper for WP's global-styles-inline-css (see functions.php
   wp_print_styles hook). Because it's named and positioned early, any layer declared
   after it (base → overrides) can override WP layout rules — including .is-layout-flow
   blockGap margins — without !important. */
@layer reset, wpglobal, base, tokens, header, components, utilities, overrides;

/* ==========================================================================
   Reset
   ========================================================================== */

@layer reset {
  /* 1. Use a more-intuitive box-sizing model + 2. Remove default margin */
  * {
    box-sizing: border-box;

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

    &:not(dialog) {
      margin: 0;
    }
  }

  /* 3. Enable keyword animations + 4. Accessible line-height + 5. Text rendering */
  html {
    @media (prefers-reduced-motion: no-preference) {
      interpolate-size: allow-keywords;
    }
  }

  body {
    line-height: var(--wp--custom--line-height--normal, 1.5);
    -webkit-font-smoothing: antialiased;
  }

  /* 6. Improve media defaults */
  :is(img, picture, video, canvas, svg) {
    display: block;
    max-inline-size: 100%;
  }

  /* 7. Inherit fonts for form controls */
  :is(input, button, textarea, select) {
    font: inherit;
  }

  /* 8. Avoid text overflows + 9. Improve line wrapping */
  :is(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
  }

  p {
    text-wrap: pretty;
  }

  :is(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
  }

  /* 10. Create a root stacking context */
  :is(#root, #__next) {
    isolation: isolate;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

@layer base {
  :where(a) {
    color: inherit;
  }

  :where(ul, ol) {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Flow/constrained layout spacing — override wpglobal blockGap defaults.
     WP applies margin-block-start to ALL layout children (both .is-layout-flow and
     .is-layout-constrained). We restore spacing only for content-level elements so
     container blocks (group, cover, columns, template-part) stay at 0.

     Covers both block editor classes (.wp-block-*) and plain HTML elements —
     post content outputs bare <p>/<blockquote> etc. with no block class.
     Excludes :first-child to avoid unwanted top margin at the start of a container. */
  :is(.is-layout-flow, .is-layout-constrained)
    > :where(
      p,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      blockquote,
      ul,
      ol,
      figure,
      hr,
      .wp-block-paragraph,
      .wp-block-heading,
      .wp-block-list,
      .wp-block-quote,
      .wp-block-pullquote,
      .wp-block-image,
      .wp-block-gallery,
      .wp-block-buttons,
      .wp-block-table,
      .wp-block-separator
    ):not(:first-child) {
    margin-block-start: var(--wp--preset--spacing--40);
  }

  /* Skip link — visible on focus only */
  .skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    z-index: var(--wp--custom--z-index--toast, 400);
    padding-block: 0.5em;
    padding-inline: 1em;
    background: var(--wp--preset--color--contrast, #0f172a);
    color: var(--wp--preset--color--base, #fff);
    text-decoration: none;
    font-weight: 700;

    &:focus {
      inset-inline-start: 0;
      inset-block-start: 0;
    }
  }
}

/* ==========================================================================
   Tokens — Derived colors & semantic aliases via CSS Relative Colors (RCS)
   All values here are derived from theme.json palette entries using oklch()
   relative color syntax. Swapping hex values in theme.json auto-propagates.
   ========================================================================== */

/*
   QUICK REFERENCE — CSS Custom Properties (All Sources)
   ================================================

   COLOR PALETTE (from theme.json)
   —— Preset colors (use in blocks):
   --wp--preset--color--{primary, accent, secondary, base, contrast, subtle, muted}

   —— Derived states (hover, active, subtle, alpha scales):
   --color-{primary,accent,secondary}-hover           (lighten +15%)
   --color-{primary,accent,secondary}-active          (darken -15%)
   --color-{primary,accent}-subtle                    (light tint, 50% alpha)
   --color-{primary,accent,base,contrast}-alpha-{10,20,50,80}  (transparency scales)

   —— Status colors (contextual messages):
   --color-{success,warning,error,info}              (main color)
   --color-{success,warning,error,info}-subtle       (light variant)

   SEMANTIC SURFACES
   --color-surface                 (card backgrounds)
   --color-surface-raised          (slightly elevated)
   --color-surface-overlay         (semi-transparent overlay)
   --color-surface-sunken          (indented area)
   --color-surface-scrim           (semi-transparent dark layer)

   BORDERS & FOCUS
   --color-border                  (subtle dividers)
   --color-border-strong           (prominent dividers)
   --color-border-interactive      (interactive elements)
   --focus-ring                    (2px solid primary color)
   --focus-ring-offset             (2px)

   Z-INDEX (from theme.json — keep minimal)
   --wp--custom--z-index--sticky   (200 — header)
   --wp--custom--z-index--dropdown (300 — menus)
   --wp--custom--z-index--overlay  (250 — overlays)
   --wp--custom--z-index--modal    (300 — modals)
   --wp--custom--z-index--toast    (400 — notifications)

   TRANSITIONS (from theme.json — use timing + easing separately for flexibility)
   --wp--custom--transition--fast  (150ms ease — shorthand, use for simple transitions)
   --wp--custom--transition--normal (300ms ease — shorthand, use for simple transitions)
   --wp--custom--transition--slow  (500ms ease — shorthand, use for simple transitions)

   TIMING (compose with easing for complex multi-property transitions)
   --wp--custom--timing--fast      (150ms)
   --wp--custom--timing--normal    (300ms)
   --wp--custom--timing--slow      (500ms)

   EASING (use with timing for granular control)
   --wp--custom--easing--standard  (ease — standard, smooth)
   --wp--custom--easing--in        (ease-in — slow start)
   --wp--custom--easing--out       (ease-out — slow end)
   --wp--custom--easing--inOut     (cubic-bezier custom — smooth both ends)

   TYPOGRAPHY (from theme.json)
   --wp--preset--font-family--{heading, body}
   --wp--preset--font-size--{small, medium, large, x-large, 2x-large, 3x-large, 4x-large}
   --wp--custom--line-height--{tight, normal, relaxed}
   --wp--custom--letter-spacing--{tight, normal, wide}

   SPACING (from theme.json, increments 10–100)
   --wp--preset--spacing--{10, 20, 30, 40, 50, 60, 70, 80, 90, 100}

   SHADOWS (from theme.json)
   --wp--preset--shadow--{sm, md, lg, xl, inner}

   BORDER RADIUS (from theme.json)
   --wp--preset--border--radius--{small, medium, large, full}

   LAYOUT (from theme.json)
   --wp--style--global--content-size  (800px — main content width)
   --wp--style--global--wide-size     (1200px — wide section width)

   Note: WordPress preset variables are auto-generated from theme.json.
   Custom theme variables (--wp--custom--*) are defined in theme.json settings.custom.
*/

@layer tokens {
  :root {
    /* ----- Primary: hover / active / subtle ----- */
    --color-primary-hover: oklch(
      from var(--wp--preset--color--primary) calc(l + 0.15) c h
    );
    --color-primary-active: oklch(
      from var(--wp--preset--color--primary) calc(l - 0.15) c h
    );
    --color-primary-subtle: oklch(
      from var(--wp--preset--color--primary) calc(l + 0.45) c h / 0.5
    );

    /* ----- Accent: hover / active / subtle ----- */
    --color-accent-hover: oklch(
      from var(--wp--preset--color--accent) calc(l + 0.15) c h
    );
    --color-accent-active: oklch(
      from var(--wp--preset--color--accent) calc(l - 0.15) c h
    );
    --color-accent-subtle: oklch(
      from var(--wp--preset--color--accent) calc(l + 0.45) c h / 0.5
    );

    /* ----- Secondary: hover ----- */
    --color-secondary-hover: oklch(
      from var(--wp--preset--color--secondary) calc(l + 0.15) c h
    );

    /* ----- Primary: transparency scale ----- */
    --color-primary-alpha-10: oklch(
      from var(--wp--preset--color--primary) l c h / 0.1
    );
    --color-primary-alpha-20: oklch(
      from var(--wp--preset--color--primary) l c h / 0.2
    );
    --color-primary-alpha-50: oklch(
      from var(--wp--preset--color--primary) l c h / 0.5
    );

    /* ----- Accent: transparency scale ----- */
    --color-accent-alpha-10: oklch(
      from var(--wp--preset--color--accent) l c h / 0.1
    );
    --color-accent-alpha-20: oklch(
      from var(--wp--preset--color--accent) l c h / 0.2
    );
    --color-accent-alpha-50: oklch(
      from var(--wp--preset--color--accent) l c h / 0.5
    );

    /* ----- Contrast: transparency scale (overlays, borders, scrims) ----- */
    --color-contrast-alpha-5: oklch(
      from var(--wp--preset--color--contrast) l c h / 0.05
    );
    --color-contrast-alpha-10: oklch(
      from var(--wp--preset--color--contrast) l c h / 0.1
    );
    --color-contrast-alpha-20: oklch(
      from var(--wp--preset--color--contrast) l c h / 0.2
    );
    --color-contrast-alpha-50: oklch(
      from var(--wp--preset--color--contrast) l c h / 0.5
    );
    --color-contrast-alpha-80: oklch(
      from var(--wp--preset--color--contrast) l c h / 0.8
    );

    /* ----- Base: transparency scale (light overlays on dark bgs) ----- */
    --color-base-alpha-10: oklch(
      from var(--wp--preset--color--base) l c h / 0.1
    );
    --color-base-alpha-20: oklch(
      from var(--wp--preset--color--base) l c h / 0.2
    );
    --color-base-alpha-50: oklch(
      from var(--wp--preset--color--base) l c h / 0.5
    );

    /* ----- Semantic: surfaces ----- */
    --color-surface: var(--wp--preset--color--base);
    --color-surface-raised: var(--wp--preset--color--subtle);
    --color-surface-overlay: oklch(
      from var(--wp--preset--color--contrast) calc(l - 0.02) c h / 0.97
    );
    --color-surface-sunken: oklch(
      from var(--wp--preset--color--contrast) calc(l - 0.04) c h / 0.94
    );
    --color-surface-scrim: var(--color-contrast-alpha-50);

    /* ----- Semantic: borders ----- */
    --color-border: var(--color-contrast-alpha-10);
    --color-border-strong: var(--color-contrast-alpha-20);
    --color-border-interactive: var(--wp--preset--color--primary);
    --color-border-focus: var(--wp--preset--color--primary);

    /* ----- Semantic: focus ring ----- */
    --color-focus-ring: var(--wp--preset--color--primary);
    --focus-ring: 2px solid var(--color-focus-ring);
    --focus-ring-offset: 2px;

    /* ----- Status: hex fallbacks (overridden to OKLCH below) ----- */
    --color-success: #16a34a;
    --color-warning: #ca8a04;
    --color-error: #dc2626;
    --color-info: #2563eb;
  }

  /* OKLCH enhancement for status colors + derive subtle variants via relative colors */
  @supports (color: oklch(0% 0 0)) {
    :root {
      --color-success: oklch(55% 0.18 150);
      --color-success-subtle: oklch(
        from var(--color-success) calc(l + 0.42) c h
      );
      --color-warning: oklch(70% 0.16 85);
      --color-warning-subtle: oklch(
        from var(--color-warning) calc(l + 0.27) c h
      );
      --color-error: oklch(55% 0.22 28);
      --color-error-subtle: oklch(from var(--color-error) calc(l + 0.42) c h);
      --color-info: oklch(55% 0.2 260);
      --color-info-subtle: oklch(from var(--color-info) calc(l + 0.42) c h);
    }
  }
}

/* ==========================================================================
   Header
   ========================================================================== */

@layer header {
  /* Wrapper fixed */
  .wp-block-template-part:has(.site-header) {
    position: fixed;
    inset-block-start: 0;
    inline-size: 100%;
    z-index: var(--wp--custom--z-index--sticky, 200);
  }

  /* Header bar */
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: 5rem;
    inline-size: 100%;
    max-inline-size: none;
    background: rgba(8, 8, 8, 0.25);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border-block-end: 1px solid transparent;
    transition:
      background 0.4s ease,
      border-color 0.4s ease,
      backdrop-filter 0.4s ease;
  }

  .site-header.is-stuck {
    background: rgba(8, 8, 8, 0.88);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-color: rgba(255, 255, 255, 0.06);
  }

  /* Logo */
  .site-header .wp-block-site-logo img {
    max-block-size: 2rem;
    inline-size: auto;
  }

  /* Nav */
  .site-nav {
    display: flex;
    align-items: center;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--50);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-nav__link,
  .site-nav__trigger {
    font-family: var(--font-ui, sans-serif);
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s;

    &:hover {
      color: var(--wp--preset--color--contrast);
    }
  }

  .site-nav__trigger::after {
    content: '';
    display: block;
    inline-size: 0.4rem;
    block-size: 0.4rem;
    border-inline-end: 1px solid currentColor;
    border-block-end: 1px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s;
  }

  .site-nav__item--mega:is(:focus-within, :has(.site-nav__trigger[aria-expanded="true"])) .site-nav__trigger::after {
    transform: rotate(225deg) translateY(-2px);
  }

  /* Megamenu panel */
  .site-nav__mega {
    position: fixed;
    inset-block-start: 5rem;
    inset-inline-start: 0;
    inline-size: 100%;
    background: rgba(8, 8, 8, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-block-start: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    /* Viive sulkemisessa — antaa hiirelle aikaa siirtyä paneeliin */
    transition: opacity 0.2s ease 0.12s, visibility 0.2s ease 0.12s, transform 0.2s ease 0.12s;
    pointer-events: none;
  }

  .site-nav__item--mega:is(:focus-within, :has(.site-nav__trigger[aria-expanded="true"])) .site-nav__mega {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;
  }

  /* Kategoriat-megamenu */
  .site-nav__mega--cats .site-nav__mega-label {
    font-family: var(--font-ui, sans-serif);
    font-size: 0.6rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary);
    margin-block-end: var(--wp--preset--spacing--40);
    display: block;
  }

  .site-nav__cat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .site-nav__cat-item a {
    display: block;
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
    font-family: var(--font-display, sans-serif);
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border: 1px solid transparent;
    transition: color 0.18s, border-color 0.18s;

    &:hover {
      color: var(--wp--preset--color--contrast);
      border-color: rgba(255, 255, 255, 0.06);
    }
  }

  /* Autot-megamenu */
  .site-nav__mega--brands .site-nav__mega-label {
    font-family: var(--font-ui, sans-serif);
    font-size: 0.6rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary);
    margin-block-end: var(--wp--preset--spacing--40);
    display: block;
  }

  .site-nav__brand-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .site-nav__brand-item a {
    display: block;
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
    font-family: var(--font-display, sans-serif);
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border: 1px solid transparent;
    transition: color 0.18s, border-color 0.18s;

    &:hover {
      color: var(--wp--preset--color--contrast);
      border-color: rgba(255, 255, 255, 0.06);
    }
  }

  /* Cart */
  .site-header__cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    block-size: 2.5rem;
    padding-inline: 0.9rem;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: color 0.2s, border-color 0.2s;

    &:hover {
      color: var(--wp--preset--color--primary);
      border-color: var(--wp--preset--color--primary);
    }

    svg {
      inline-size: 1.1rem;
      block-size: 1.1rem;
      flex: 0 0 auto;
    }
  }

  /* Mobiilissa ostoskori on mobiilivalikossa, ei headerissa */
  @media (width < 768px) {
    .site-header__cart {
      display: none;
    }
  }

  .site-header__cart-count {
    position: absolute;
    inset-block-start: -0.4rem;
    inset-inline-end: -0.4rem;
    inline-size: 1rem;
    block-size: 1rem;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    font-family: var(--font-ui, sans-serif);
    font-size: 0.55rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  /* Header actions wrapper */
  .site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--40);
  }

  /* Hamburger */
  .site-header__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0.5rem;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;

    & span {
      display: block;
      height: 1.5px;
      background: rgba(255, 255, 255, 0.85);
      transition: transform 0.2s, opacity 0.2s;
    }
  }

  /* Mobile menu drawer */
  #mobile-menu {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: min(320px, 85vw);
    background: #111;
    color: rgba(255, 255, 255, 0.85);
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;

    &.is-open {
      transform: translateX(0);
    }
  }

  .mobile-menu__inner {
    padding: var(--wp--preset--spacing--60);
  }

  .mobile-menu__close {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    margin-block-end: var(--wp--preset--spacing--60);
    margin-inline-start: auto;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
  }

  .mobile-menu__list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .mobile-menu__item {
    border-block-end: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mobile-menu__link,
  .mobile-menu__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-block: var(--wp--preset--spacing--50);
    font-family: var(--font-ui, sans-serif);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    text-align: start;
    transition: color 0.2s;

    &:hover { color: #fff; }
  }

  .mobile-menu__cart-count {
    inline-size: 1.2rem;
    block-size: 1.2rem;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    font-family: var(--font-ui, sans-serif);
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .mobile-menu__trigger svg {
    transition: transform 0.2s;
    flex-shrink: 0;
  }

  .mobile-menu__trigger[aria-expanded="true"] {
    color: #fff;
    & svg { transform: rotate(180deg); }
  }

  .mobile-menu__sub {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;

    &.is-open { display: block; }

    & li a {
      display: block;
      padding-block: 0.5rem;
      padding-inline-start: 1rem;
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.6);
      text-decoration: none;
      transition: color 0.2s;

      &:hover { color: #fff; }
    }
  }

  #mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;

    &.is-visible {
      opacity: 1;
      pointer-events: auto;
    }
  }

  /* Desktop: piilota hamburger */
  @media (width >= 768px) {
    .site-header__hamburger { display: none !important; }
    #mobile-menu, #mobile-overlay { display: none !important; }
  }

  /* Mobile: piilota desktop-nav, näytä hamburger */
  @media (width < 768px) {
    .site-nav { display: none !important; }
    .site-header__hamburger { display: flex; }
    .site-header {
      padding-inline: var(--wp--preset--spacing--50);
      box-sizing: border-box;
      max-inline-size: 100vw;
      overflow: hidden;
    }
  }

  /* Offset main content below fixed header — ei etusivulla (hero alkaa ylhäältä) */
  body:not(.home) .site-main {
    padding-block-start: 5rem;
  }

  /* Sivut joilla on hero menevät läpikuultavan headerin alle kuten etusivu.
     @supports-suoja: ilman :has()-tukea baseline (5rem padding) jää voimaan. */
  @supports selector(:has(*)) {
    body:not(.home) .site-main:has(.home-hero, .about-hero, .page-hero) {
      padding-block-start: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-nav__mega,
    .site-nav__link,
    .site-nav__trigger,
    .site-header__cart {
      transition: none;
    }
  }
}

/* ==========================================================================
   Components
   ========================================================================== */

@layer components {
  /* --- Shop header --- */

  .shop-header {
    padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
    padding-inline: var(--wp--preset--spacing--70);
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--wp--preset--spacing--50);

    .wp-block-query-title {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3.5rem);
      letter-spacing: 0.05em;
      color: var(--wp--preset--color--contrast);
      margin: 0;
    }

    .woocommerce-breadcrumb,
    .wc-block-breadcrumbs {
      font-size: 0.78rem;
      color: var(--wp--preset--color--secondary);
      margin-block-start: var(--wp--preset--spacing--20);

      a {
        color: var(--wp--preset--color--secondary);
        text-decoration: none;

        &:hover {
          color: var(--wp--preset--color--contrast);
        }
      }
    }
  }

  /* --- Taksonomiahakusuodattimet --- */

  .shop-tax-filters {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--50);
  }

  .shop-tax-filters__group {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);
  }

  .shop-tax-filters__label {
    font-family: var(--font-ui);
    font-size: 0.6rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    background: var(--wp--preset--gradient--gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
  }

  .shop-tax-filters__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .shop-tax-filters__chip {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--secondary);
    text-decoration: none;
    padding: 4px var(--wp--preset--spacing--30);
    border: 1px solid var(--color-border);
    transition: color 0.18s, border-color 0.18s;

    &:hover {
      color: var(--wp--preset--color--contrast);
      border-color: var(--wp--preset--color--contrast);
    }

    &.is-active {
      background: var(--wp--preset--gradient--gold);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      border-color: var(--wp--preset--color--accent);
    }
  }

  .shop-tax-filters__chip--small {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
  }

  .shop-tax-filters__brand-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }

  .shop-tax-filters__models {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* --- Brand models nav --- */

  .shop-brand-models {
    padding-block: var(--wp--preset--spacing--40);
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--wp--preset--spacing--50);
    padding-inline: var(--wp--preset--spacing--70);
  }

  .shop-brand-models__label {
    font-family: var(--font-ui);
    font-size: 0.6rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary);
    display: block;
    margin-block-end: var(--wp--preset--spacing--30);
  }

  .shop-brand-models__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .shop-brand-models__link {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--secondary);
    text-decoration: none;
    padding: 4px var(--wp--preset--spacing--30);
    border: 1px solid var(--color-border);
    transition: color 0.18s, border-color 0.18s;

    &:hover,
    &.is-active {
      color: var(--wp--preset--color--contrast);
      border-color: var(--wp--preset--color--contrast);
    }
  }

  .shop-layout {
    padding-inline: var(--wp--preset--spacing--70);
    padding-block-end: var(--wp--preset--spacing--80);
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: var(--wp--preset--spacing--60);
    align-items: start;
  }

  .shop-sidebar {
    position: sticky;
    inset-block-start: 6rem;
  }

  .shop-filters {
    padding-inline: 0;
    margin-block-end: var(--wp--preset--spacing--50);
  }

  /* Sivutus (kauppa-, kategoria- ja brand-sivut) */
  .wp-block-query-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--wp--preset--spacing--60);
    margin-block-start: var(--wp--preset--spacing--70);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    a {
      color: var(--wp--preset--color--secondary);
      text-decoration: none;
      transition: color 0.2s;

      &:hover {
        color: var(--wp--preset--color--contrast);
      }
    }

    .wp-block-query-pagination-numbers {
      display: inline-flex;
      align-items: center;
      gap: var(--wp--preset--spacing--40);

      .page-numbers.current {
        color: var(--wp--preset--color--primary);
        border-block-end: 2px solid var(--wp--preset--color--primary);
      }
    }
  }

  @media (width < 768px) {
    .shop-layout {
      grid-template-columns: 1fr;
    }

    .shop-sidebar {
      position: static;
      display: none;

      &.is-open {
        display: block;
      }
    }

    .shop-filter-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      margin-block-start: var(--wp--preset--spacing--40);
      padding-block: 0.6rem;
      padding-inline: 1.2rem;
      font-family: var(--font-ui, sans-serif);
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      background: none;
      border: 1px solid var(--color-border);
      color: var(--wp--preset--color--contrast);
      cursor: pointer;
      transition: border-color 0.2s;

      &:hover {
        border-color: var(--wp--preset--color--primary);
      }

      &[aria-expanded="true"] svg {
        transform: rotate(180deg);
      }

      & svg {
        transition: transform 0.2s;
      }
    }
  }

  @media (width >= 768px) {
    .shop-filter-toggle {
      display: none;
    }
  }

  /* --- WooCommerce filter chips --- */

  .shop-filters {
    gap: var(--wp--preset--spacing--30);
    padding-block: var(--wp--preset--spacing--40);
    padding-inline: var(--wp--preset--spacing--70);
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--wp--preset--spacing--50);
  }

  /* --- Single product --- */

  .product-layout,
  .product-details-section {
    max-width: 1100px;
    margin-inline: auto;
    width: 100%;
  }

  .product-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--70);
    padding-inline: var(--wp--preset--spacing--70);
    padding-block: var(--wp--preset--spacing--70);
    align-items: start;
  }

  .product-info {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--50);

    .wp-block-post-title {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3vw, 2.5rem);
      line-height: 1.1;
      margin: 0;
    }

    .price {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--wp--preset--color--contrast);
    }
  }

  .product-details-section {
    padding-inline: var(--wp--preset--spacing--70);
    padding-block-end: var(--wp--preset--spacing--80);
  }

  /* Piilota arvostelut-välilehti */
  .reviews_tab,
  #tab-reviews,
  .woocommerce-Tabs-panel--reviews {
    display: none !important;
  }

  /* Välilehtien tyyli */
  .woocommerce-tabs {
    border: none !important;
  }

  .woocommerce-tabs ul.tabs {
    border: none !important;
    background: none !important;

    &::before {
      display: none !important;
    }
  }

  .woocommerce-tabs ul.tabs li {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;

    &::before,
    &::after {
      display: none !important;
    }
  }

  .woocommerce-tabs .wc-tabs {
    display: flex;
    gap: var(--wp--preset--spacing--50);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--wp--preset--spacing--70);
    border-block-end: 1px solid var(--color-border);
  }

  .woocommerce-tabs .wc-tabs li {
    margin: 0;

    & a {
      display: block;
      padding-block: var(--wp--preset--spacing--50);
      padding-inline: 0;
      background-color: transparent !important;
      background-image: none;
      border-color: transparent !important;
      box-shadow: none !important;
      font-family: var(--font-display);
      font-size: clamp(1rem, 1.5vw, 1.25rem);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: color-mix(in oklch, var(--wp--preset--color--contrast) 30%, transparent);
      text-decoration: none;
      border-block-end: 2px solid transparent;
      margin-block-end: -1px;
      transition: color 0.2s;

      &:hover {
        color: var(--wp--preset--color--contrast);
      }
    }

    &.active a {
      background-color: transparent !important;
      background-image: var(--wp--preset--gradient--gold);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      border-color: transparent !important;
      border-block-end: 2px solid #b8932a !important;
    }
  }

  .woocommerce-Tabs-panel {
    padding: 0;

    & h2 {
      display: none;
    }
  }

  /* Lisää ostoskoriin -painike (tuotekortti + tuotesivu) */
  .single_add_to_cart_button,
  .wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button,
  .wc-block-components-product-button__button,
  .wp-block-woocommerce-product-button .wp-block-button__link,
  a.add_to_cart_button,
  .wc-block-grid__product-add-to-cart a {
    background: var(--wp--preset--gradient--gold);
    color: var(--wp--preset--color--base);
    border: none;
    border-radius: 0;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding-block: 1rem;
    padding-inline: 2.5rem;
    cursor: pointer;
    transition: opacity 0.2s;

    &:hover {
      opacity: 0.85;
      background: var(--wp--preset--gradient--gold);
      color: var(--wp--preset--color--base);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  /* Varastotieto: pallukka + teksti (listaus .clp-stock, tuotesivu .stock) */
  .clp-stock,
  p.stock {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--contrast);

    &::before {
      content: '';
      inline-size: 10px;
      block-size: 10px;
      border-radius: 50%;
      background: var(--color-success);
      flex: 0 0 auto;
    }
  }

  .clp-stock--order,
  p.stock.available-on-backorder {
    &::before {
      background: var(--color-warning);
    }
  }

  /* Ei saatavilla (jälkitoimitus estetty) — punainen */
  .clp-stock--out,
  p.stock.out-of-stock {
    &::before {
      background: var(--color-error);
    }
  }

  /* Listauskorteissa varastotieto keskitetään (tuotesivun p.stock pysyy vasemmalla) */
  .clp-stock {
    display: flex;
    justify-content: center;
  }

  /* Poista klikkauksesta aiheutuva focus-efekti tuotesivulla */
  .product-layout *:focus:not(:focus-visible),
  .product-details-section *:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }

  @media (width < 768px) {
    .product-layout,
    .product-details-section {
      grid-template-columns: 1fr;
      padding-inline: var(--wp--preset--spacing--50);
      overflow: hidden;
    }

    .product-gallery img,
    .wc-block-components-product-image img {
      max-inline-size: 100%;
      block-size: auto;
    }
  }

  /* Active filter chips */
  .wc-block-active-filters__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .wc-block-active-filters__list-item {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--20);
    padding: 4px 10px;
    background: color-mix(in oklch, var(--wp--preset--color--primary) 10%, transparent);
    border: 1px solid color-mix(in oklch, var(--wp--preset--color--primary) 40%, transparent);
    border-radius: 20px;
    font-size: 0.78rem;
    color: var(--wp--preset--color--primary);
  }

  .wc-block-active-filters__list-item-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--wp--preset--color--primary);
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity var(--wp--custom--transition--fast, 0.15s) ease;

    &:hover {
      opacity: 1;
    }
  }

  /* Dropdown filter */
  .wc-block-attribute-filter {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--20);
  }

  .wc-block-attribute-filter select {
    background: var(--wp--preset--color--subtle);
    color: var(--wp--preset--color--contrast);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.82rem;
    cursor: pointer;

    &:hover {
      border-color: var(--wp--preset--color--primary);
    }
  }

  /* Results count + sorting */
  .woocommerce-result-count,
  .woocommerce-ordering select,
  .wc-block-product-results-count,
  .wc-block-sort-select__select {
    font-size: 0.8rem;
    color: var(--wp--preset--color--secondary);
  }

  .woocommerce-ordering select,
  .wc-block-sort-select__select {
    background: var(--wp--preset--color--subtle);
    border: 1px solid var(--color-border);
    border-radius: 0;
    padding: 6px 12px;
    color: var(--wp--preset--color--contrast);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    appearance: none;
    padding-inline-end: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;

    &:hover {
      border-color: var(--wp--preset--color--primary);
    }
  }

  .wc-block-product-results-count {
    margin-inline-start: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .wc-block-active-filters__list-item-remove {
      transition: none;
    }
  }


  /* --- Cart, Checkout, My Account --- */

  /* Yhteinen container-lisäpadding — body-luokat WC lisää automaattisesti */
  .woocommerce-cart main,
  .woocommerce-checkout main,
  .woocommerce-account main {
    padding-block-start: 7rem !important;
    padding-block-end: var(--wp--preset--spacing--80);
    padding-inline: var(--wp--preset--spacing--60);
  }

  /* Lomakekentät */
  .wc-block-components-text-input input,
  .wc-block-components-select select,
  .wc-block-components-country-input input,
  .wc-block-components-address-form input,
  .woocommerce-input-wrapper input,
  .woocommerce-checkout input[type="text"],
  .woocommerce-checkout input[type="email"],
  .woocommerce-checkout input[type="tel"],
  .woocommerce-checkout textarea {
    background: var(--wp--preset--color--subtle) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    color: var(--wp--preset--color--contrast) !important;
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    padding: 0.75rem 1rem !important;

    &:focus {
      border-color: var(--wp--preset--color--primary) !important;
      outline: none !important;
      box-shadow: none !important;
    }
  }

  /* Labelit */
  .wc-block-components-text-input label,
  .wc-block-components-select label,
  .wc-block-components-checkbox__label,
  .woocommerce-checkout label {
    font-family: var(--font-ui) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--secondary) !important;
  }

  /* Checkout: osioiden otsikot */
  .wc-block-checkout__contact-fields > h2,
  .wc-block-checkout__shipping-fields > h2,
  .wc-block-checkout__billing-fields > h2,
  .wc-block-checkout__payment-method > h2,
  .wc-block-checkout__add-ons > h2,
  .wc-block-checkout__order-notes > h2,
  .wc-block-components-checkout-step__title {
    font-family: var(--font-ui) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--secondary) !important;
    border-block-end: 1px solid var(--color-border) !important;
    padding-block-end: 0.75rem !important;
    margin-block-end: 1.5rem !important;
  }

  /* Checkout: vaihekohtaiset numerot */
  .wc-block-components-checkout-step__heading-content {
    font-family: var(--font-ui) !important;
    color: var(--wp--preset--color--contrast) !important;
  }

  /* Checkout: maksutapa-kortit */
  .wc-block-components-payment-method-label,
  .wc-block-components-payment-methods__content {
    font-family: var(--font-body) !important;
    color: var(--wp--preset--color--contrast) !important;
  }

  .wc-block-components-radio-control__option {
    border-block-end: 1px solid var(--color-border) !important;

    &:last-child {
      border-block-end: none !important;
    }
  }

  .wc-block-components-radio-control-accordion-option {
    background: var(--wp--preset--color--subtle) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    margin-block-end: 0.5rem !important;
  }

  /* Toimitus/Nouto-valitsin: valittu vaihtoehto saa valkoisen taustan →
     tekstistä tumma, muuten se perisi teeman vaalean tekstin ja katoaisi. */
  .wc-block-checkout__shipping-method-option--selected,
  .wc-block-checkout__shipping-method-option--selected * {
    color: #1a1a1a !important;
  }
  .wc-block-checkout__shipping-method-option--selected svg {
    fill: #1a1a1a !important;
  }

  /* Checkout: Paytrail-pankkilogot valkoisella taustalla.
     Näkyvä laatta on --wrapper (reunus + padding), ei itse li.
     Kiinteä #fff: laatan on oltava valkoinen logojen luettavuuden vuoksi
     myös tummassa kassassa (base-token olisi tummassa lähes musta). */
  .paytrail-woocommerce-payment-fields--list-item,
  .paytrail-woocommerce-payment-fields--list-item--wrapper {
    background: #fff !important;
  }

  /* Checkout: Shipit-noutopistevalitsin valkoisella taustalla.
     Pluginin (wc-shipit) oma CSS on vaaleaan teemaan; rivit läpinäkyviä →
     tumma kassa näkyy läpi. Tausta valkoiseksi + nimi tummaksi (muuten
     nimi perisi teeman vaalean tekstin ja katoaisi). */
  #woo-carrier-agents-container,
  #woo-carrier-agents,
  #woo-carrier-agents .woo-carrier-agent {
    background: #fff !important;
  }
  #woo-carrier-agents .woo-carrier-agent .woo-carrier-agent-name,
  #woo-carrier-agents-show-more {
    color: #1a1a1a !important;
  }

  /* "Lisätty ostoskoriin" - ym. ilmoitukset CL Parts -tyyliin (blocks store-notices).
     Oletusvihreä → tumma subtle-tausta + vasen aksenttireuna. */
  .wc-block-components-notice-banner {
    background: var(--wp--preset--color--subtle) !important;
    color: var(--wp--preset--color--contrast) !important;
    border: 1px solid var(--color-border) !important;
    border-inline-start: 3px solid var(--wp--preset--color--primary) !important;
    border-radius: 0 !important;
    font-family: var(--font-body) !important;
    box-shadow: none !important;
  }
  /* Store-notices-ilmoitus (tuote-/arkistotemplatet): tuotesisällön (product-layout)
     levyinen ja samoin linjattu — 1100px keskitetty + sama sisäpadding. */
  .wc-block-store-notices {
    max-width: 1100px !important;
    margin-inline: auto !important;
    padding-inline: var(--wp--preset--spacing--70) !important;
    box-sizing: border-box !important;
  }
  .wc-block-components-notice-banner.is-success {
    border-inline-start-color: var(--color-success, #2b8a3e) !important;
  }
  .wc-block-components-notice-banner.is-error {
    border-inline-start-color: var(--color-error, #c92a2a) !important;
  }
  .wc-block-components-notice-banner > svg {
    fill: var(--color-success, #2b8a3e) !important;
  }
  .wc-block-components-notice-banner.is-error > svg {
    fill: var(--color-error, #c92a2a) !important;
  }
  .wc-block-components-notice-banner__content,
  .wc-block-components-notice-banner__content a {
    color: var(--wp--preset--color--contrast) !important;
  }
  /* "Näytä ostoskori" -linkki UI-fontilla */
  .wc-block-components-notice-banner a.wc-forward,
  .wc-block-components-notice-banner__content a {
    font-family: var(--font-ui) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  /* Checkout: tilauksen yhteenveto -paneeli */
  .wc-block-checkout__order-summary {
    background: var(--wp--preset--color--subtle) !important;
    border: 1px solid var(--color-border) !important;
    padding-inline: var(--wp--preset--spacing--60) !important;
  }

  .wc-block-checkout__order-summary-title {
    font-family: var(--font-ui) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--secondary) !important;
  }

  /* Checkout: virheilmoitukset */
  .wc-block-components-validation-error,
  .wc-block-components-notice-banner.is-error {
    font-family: var(--font-body) !important;
    font-size: 0.85rem !important;
    border-radius: 0 !important;
  }

  /* Checkout-painike (Tilaa) */
  .wc-block-components-checkout-place-order-button,
  .wc-block-cart__submit-button {
    background: var(--wp--preset--gradient--gold) !important;
    color: var(--wp--preset--color--base) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--font-ui) !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    padding-block: 1rem !important;
    width: 100% !important;
  }

  /* Ostoskoritaulukko */
  .wc-block-cart-items__header,
  .wc-block-cart-items td,
  .wc-block-cart-items th,
  .wc-block-cart-item,
  .wc-block-cart-item__product,
  .wc-block-cart-item__wrap {
    border-color: var(--color-border) !important;
    color: var(--wp--preset--color--contrast) !important;
    font-family: var(--font-ui) !important;
    background: transparent !important;
  }

  .wc-block-cart-item__product-name,
  .wc-block-cart-item__product-name a {
    color: var(--wp--preset--color--contrast) !important;
    text-decoration: none !important;
  }

  .wc-block-cart-item__prices,
  .wc-block-components-product-price,
  .wc-block-components-product-price__value {
    color: var(--wp--preset--color--contrast) !important;
  }

  .wc-block-components-quantity-selector {
    border: 1px solid var(--color-border) !important;
    background: var(--wp--preset--color--subtle) !important;
  }

  .wc-block-components-quantity-selector__input,
  .wc-block-components-quantity-selector__button {
    color: var(--wp--preset--color--contrast) !important;
    background: transparent !important;
    border: none !important;
  }

  .wc-block-cart-item__remove-link {
    color: var(--wp--preset--color--secondary) !important;
  }

  /* Tilauksen yhteenveto (sidebar) */
  .wc-block-components-totals-wrapper,
  .wc-block-order-summary {
    background: var(--wp--preset--color--subtle) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    padding-inline: var(--wp--preset--spacing--60) !important;
  }

  /* Kuponki-painike */
  .wc-block-components-totals-coupon__button {
    background: var(--wp--preset--gradient--gold) !important;
    color: var(--wp--preset--color--base) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 0 !important;
    padding-block: 0.75rem !important;
    padding-inline: var(--wp--preset--spacing--50) !important;
    cursor: pointer;
    white-space: nowrap;
  }

  .wc-block-components-totals-item,
  .wc-block-components-totals-item__label,
  .wc-block-components-totals-item__value {
    font-family: var(--font-ui) !important;
    color: var(--wp--preset--color--contrast) !important;
    border-color: var(--color-border) !important;
  }

  .wc-block-components-totals-item--total .wc-block-components-totals-item__value {
    background: var(--wp--preset--gradient--gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.2rem !important;
  }

  /* My Account -navigaatio */
  .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding-block: 0.7rem;
    padding-inline: var(--wp--preset--spacing--50);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--secondary);
    text-decoration: none;
    border-block-end: 1px solid var(--color-border);
    transition: color 0.2s;

    &:hover {
      color: var(--wp--preset--color--contrast);
    }
  }

  .woocommerce-MyAccount-navigation ul li.is-active a {
    background: var(--wp--preset--gradient--gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Tilaushistoria-taulukko */
  .woocommerce-orders-table,
  .woocommerce table.shop_table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.88rem;

    th {
      font-family: var(--font-ui);
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--wp--preset--color--secondary);
      border-block-end: 1px solid var(--color-border);
      padding-block: 0.75rem;
      text-align: start;
    }

    td {
      padding-block: 0.75rem;
      border-block-end: 1px solid var(--color-border);
      color: var(--wp--preset--color--contrast);
    }
  }

  /* ============================================================
     KLASSINEN KASSA & OSTOSKORI ([woocommerce_checkout] / [woocommerce_cart])
     Sama ilme kuin lohkokassassa. Vaihdettu koska Paytrail v2.7.0 ei lue
     provideria blocks-kassasta — ks. backups/README.md + muisti
     reference-clparts-paytrail-blocks-bug. Kenttä-input/label/shop_table/
     notice-tyylit tulevat yllä olevista jaetuista säännöistä.
     ============================================================ */

  /* Keskitä kassa/ostoskori ja levennä (contentSize 800px liian kapea 2-palstalle).
     Toimii sekä klassiselle (.woocommerce) että lohkokassalle. Site-main on
     is-layout-constrained → suorat lapset saavat margin-inline:auto; ylikirjoitetaan
     vain max-width. */
  .woocommerce-cart .site-main > *,
  .woocommerce-checkout .site-main > *,
  .wp-block-woocommerce-checkout,
  .wp-block-woocommerce-cart,
  .woocommerce-checkout .woocommerce,
  .woocommerce-cart .woocommerce {
    max-width: 1140px !important;
    margin-inline: auto !important;
  }

  /* Kassan asettelu: tiedot | tilausyhteenveto */
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--wp--preset--spacing--70);
    align-items: start;
  }
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #order_review_heading {
    float: none !important;
    width: auto !important;
  }
  .woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    grid-column: 2;
  }
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    float: none !important;
    width: auto !important;
  }

  /* Osioiden otsikot (Laskutustiedot, Tilauksesi…) */
  .woocommerce-checkout h3,
  .woocommerce-checkout #order_review_heading {
    font-family: var(--font-ui) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--secondary) !important;
    border-block-end: 1px solid var(--color-border) !important;
    padding-block-end: 0.75rem !important;
    margin-block-end: 1.5rem !important;
  }

  /* Kentät: form-row + select + select2 (täydentää jaettua input-sääntöä) */
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce-checkout select,
  .woocommerce form .form-row .select2-selection {
    background: var(--wp--preset--color--subtle) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    color: var(--wp--preset--color--contrast) !important;
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    padding: 0.75rem 1rem !important;
    line-height: 1.4 !important;
  }
  .woocommerce form .form-row {
    margin-block-end: 1rem !important;
  }
  .select2-container--default .select2-selection--single {
    height: auto !important;
    background: transparent !important;
    border: none !important;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--wp--preset--color--contrast) !important;
    line-height: 1.4 !important;
    padding: 0 !important;
  }
  .select2-dropdown,
  .select2-container--default .select2-results__option {
    background: var(--wp--preset--color--subtle) !important;
    color: var(--wp--preset--color--contrast) !important;
    border-color: var(--color-border) !important;
  }

  /* Tilausyhteenveto- + ostoskorin summat -paneeli */
  .woocommerce-checkout #order_review,
  .woocommerce .cart_totals {
    background: var(--wp--preset--color--subtle) !important;
    border: 1px solid var(--color-border) !important;
    padding: var(--wp--preset--spacing--60) !important;
  }
  .woocommerce-checkout-review-order-table .order-total .amount,
  .woocommerce .cart_totals .order-total .amount {
    background: var(--wp--preset--gradient--gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.2rem !important;
  }

  /* Maksutavat */
  .woocommerce #payment {
    background: transparent !important;
    border: none !important;
  }
  .woocommerce #payment ul.payment_methods {
    background: var(--wp--preset--color--subtle) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) !important;
  }
  .woocommerce #payment ul.payment_methods li {
    color: var(--wp--preset--color--contrast) !important;
    font-family: var(--font-body) !important;
  }
  .woocommerce #payment .payment_box {
    background: transparent !important;
    color: var(--wp--preset--color--secondary) !important;
    font-size: 0.85rem !important;
  }
  .woocommerce #payment .payment_box::before {
    display: none !important;
  }

  /* Napit: toissijainen (Päivitä kori, Käytä kuponki) — vain kori/tili,
     ei tuotesivun add-to-cartia */
  .woocommerce-cart .woocommerce .button,
  .woocommerce-account .woocommerce .button {
    background: var(--wp--preset--color--subtle) !important;
    color: var(--wp--preset--color--contrast) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    font-family: var(--font-ui) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0.7rem 1.2rem !important;
    cursor: pointer;
  }

  /* Napit: ensisijainen toiminto (Tilaa / Siirry kassalle) — kulta */
  .woocommerce #payment #place_order,
  .woocommerce .wc-proceed-to-checkout a.checkout-button {
    background: var(--wp--preset--gradient--gold) !important;
    color: var(--wp--preset--color--base) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--font-ui) !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    padding-block: 1rem !important;
    width: 100% !important;
    cursor: pointer;
  }

  /* Ostoskoritaulukko + määrä */
  .woocommerce-cart-form table.shop_table td,
  .woocommerce-cart-form table.shop_table th {
    color: var(--wp--preset--color--contrast) !important;
    border-color: var(--color-border) !important;
  }
  .woocommerce-cart-form .product-name a {
    color: var(--wp--preset--color--contrast) !important;
    text-decoration: none !important;
  }
  .woocommerce .quantity input.qty {
    background: var(--wp--preset--color--subtle) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--wp--preset--color--contrast) !important;
    border-radius: 0 !important;
    padding: 0.4rem !important;
    width: 4rem !important;
  }
  .woocommerce-cart-form .coupon input.input-text {
    max-width: 12rem !important;
  }

  /* Notices — tummaan sopiva */
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error li {
    background: var(--wp--preset--color--subtle) !important;
    color: var(--wp--preset--color--contrast) !important;
    border-radius: 0 !important;
    font-family: var(--font-body) !important;
    border-block-start: 3px solid var(--wp--preset--color--primary) !important;
  }
  .woocommerce-error li {
    border-block-start-color: var(--color-error) !important;
  }

  @media (width < 900px) {
    .woocommerce-checkout form.checkout {
      grid-template-columns: 1fr;
    }
    .woocommerce-checkout #customer_details,
    .woocommerce-checkout #order_review,
    .woocommerce-checkout #order_review_heading {
      grid-column: 1;
      grid-row: auto;
    }
  }

  @media (width < 768px) {
    .woocommerce-cart main,
    .woocommerce-checkout main,
    .woocommerce-account main {
      padding-inline: var(--wp--preset--spacing--50);
    }

    /* Ostoskori: pino ostoskori + yhteenveto allekkain */
    .wp-block-woocommerce-cart {
      display: flex;
      flex-direction: column;
    }

    .wc-block-cart__main,
    .wc-block-cart__sidebar {
      inline-size: 100% !important;
    }

    /* Ostoskoritaulukon sarakkeet — pienennä tekstiä */
    .wc-block-cart-items th,
    .wc-block-cart-items td {
      font-size: 0.8rem !important;
      padding-inline: 0.5rem !important;
    }

    /* Kassa: lomake + yhteenveto allekkain */
    .wc-block-checkout__main,
    .wc-block-checkout__sidebar {
      inline-size: 100% !important;
    }

    /* Checkout: yhteenveto-paneeli ilman iso padding */
    .wc-block-checkout__order-summary {
      padding-inline: var(--wp--preset--spacing--50) !important;
    }

    /* Totals-wrapper ilman iso padding */
    .wc-block-components-totals-wrapper,
    .wc-block-order-summary {
      padding-inline: var(--wp--preset--spacing--50) !important;
    }

    /* Oma tili: navigaatio pino ennen sisältöä */
    .woocommerce-MyAccount-navigation {
      margin-block-end: 2rem;
    }

    /* Tilaushistoria-taulukko: vaakasuuntainen skrollaus */
    .woocommerce-orders-table,
    .woocommerce table.shop_table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

  /* --- Fonttimuuttujat --- */

  :root {
    --font-display: 'Bebas Neue', sans-serif;
    --font-ui: 'Barlow Condensed', sans-serif;
    --font-body: 'Barlow', sans-serif;
  }

  body {
    font-family: var(--font-body);
  }

  /* --- Hero --- */

  .home-hero {
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    padding-block-start: 6rem;
    padding-block-end: var(--wp--preset--spacing--80);
    padding-inline: var(--wp--preset--spacing--70);
    position: relative;
  }

  /* Hero on nyt cover-blokki: taustakuva tulee blokista (asiakas voi vaihtaa
     sen editorissa). Tummennusgradientit siirretty overlay-spaniin, jotta
     iso teksti pysyy luettavana minkä tahansa kuvan päällä. */
  .home-hero > .wp-block-cover__image-background {
    object-fit: cover;
    object-position: center 40%;
  }
  .home-hero > .wp-block-cover__background {
    opacity: 1 !important;
    background:
      linear-gradient(to bottom, rgba(8, 8, 8, 0.72) 0%, transparent 35%),
      linear-gradient(to top, rgba(8, 8, 8, 0.96) 0%, rgba(8, 8, 8, 0.5) 45%, rgba(8, 8, 8, 0.15) 100%) !important;
  }
  .home-hero > .wp-block-cover__inner-container {
    inline-size: 100%;
    padding: 0;
    z-index: 1;
  }

  .home-hero__eyebrow {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    margin-block-end: var(--wp--preset--spacing--40);
    display: flex;
    align-items: center;
    gap: 1rem;

    &::before {
      content: '';
      display: block;
      inline-size: 2.5rem;
      block-size: 1px;
      background: var(--wp--preset--gradient--gold);
    }
  }

  .home-hero__title {
    margin-block-end: var(--wp--preset--spacing--60);
  }

  .home-hero__line {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 13vw, 11rem);
    line-height: 0.88;
    letter-spacing: 0.02em;
    font-weight: 400;
    margin: 0;
    padding: 0;
  }

  .home-hero__line--accent {
    background: var(--wp--preset--gradient--gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .home-hero__line--outline {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.25);
    color: transparent;
  }

  .home-hero__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--60);
    flex-wrap: wrap;
  }

  .home-hero__desc {
    max-inline-size: 26rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.7;
    opacity: 0.75;
    margin-block-end: 0;
    font-family: var(--font-body);
  }

  .home-hero__actions .wp-block-button__link {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding-block: 1rem;
    padding-inline: 2.5rem;
  }

  .home-hero__actions .wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background: var(--wp--preset--gradient--gold);
    color: var(--wp--preset--color--base);
    border: none;
  }

  .home-hero__actions .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid #b8932a;
    color: var(--wp--preset--color--primary);
  }

  /* --- Ticker --- */

  .home-ticker {
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    padding-block: 0.8rem;
    overflow: hidden;
    white-space: nowrap;
  }

  .home-ticker__track {
    display: inline-flex;
    animation: home-ticker var(--ticker-duration, 28s) linear infinite;
  }

  .home-ticker__item {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding-inline: 2.5rem;

    &::after {
      content: '•';
      opacity: 0.4;
      margin-inline-start: 2.5rem;
    }
  }

  @keyframes home-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .home-ticker__track {
      animation: none;
    }
  }

  /* --- Jaetut sektiotyylit --- */

  .home-section {
    padding-block: var(--wp--preset--spacing--80);
    padding-inline: var(--wp--preset--spacing--70);
  }

  .home-section__header {
    margin-block-end: var(--wp--preset--spacing--60);
    align-items: flex-end;
  }

  .home-section__tag {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    margin-block-end: var(--wp--preset--spacing--20);
  }

  .home-section__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5.5vw, 5rem);
    letter-spacing: 0.02em;
    line-height: 1;
    margin-block-end: 0;
    font-weight: 400;
  }

  .home-section__link a {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wp--preset--color--secondary);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.75rem;

    &::after {
      content: '→';
      font-size: 1.1rem;
      line-height: 1;
      transition: transform 0.2s;
    }

    &:hover {
      color: var(--wp--preset--color--primary);

      &::after {
        transform: translateX(4px);
      }
    }
  }

  /* --- Kategoriakortit --- */

  .home-cat-card {
    position: relative;
    overflow: hidden;
    background: var(--wp--preset--color--subtle);
    text-decoration: none;
    display: block;

    &:first-child {
      grid-row: span 2;

      .home-cat-card__name {
        font-size: clamp(2.5rem, 3.5vw, 3.5rem);
      }
    }
  }

  /* WP Cover block internals reused as card image + overlay */
  .home-cat-card .wp-block-cover__background {
    background-color: rgba(0, 0, 0, 0.45) !important;
    opacity: 1 !important;
  }

  .home-cat-card .wp-block-cover__image-background {
    transition: transform 0.6s ease;
  }

  .home-cat-card:hover .wp-block-cover__image-background {
    transform: scale(1.05);
  }

  .home-cat-card .wp-block-cover__inner-container {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    background: none;
    z-index: 2;
  }

  .home-cat-card__name {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 2.5vw, 2.2rem);
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--contrast);
    line-height: 1;
    font-weight: 400;
    margin: 0;

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

      /* Stretch link to cover entire card */
      &::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 3;
      }
    }
  }

  .home-cat-card:first-child .home-cat-card__name {
    font-size: clamp(2.5rem, 3.5vw, 3.5rem);
  }

  /* Dynaamisen category-mosaic-blockin kortti (anchor-rakenne):
     __bg (kuvakerros), __inner (sisältö alhaalla), __num, __desc, __arrow.
     Ilman thumbnailia kortti näyttää subtle-taustan + nimen. */
  .home-cat-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    transition: transform 0.6s ease;
  }
  .home-cat-card.has-thumb .home-cat-card__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
  }
  .home-cat-card:hover .home-cat-card__bg {
    transform: scale(1.05);
  }
  .home-cat-card__inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 2rem;
    z-index: 2;
  }
  .home-cat-card__num {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    color: var(--wp--preset--color--secondary);
  }
  .home-cat-card__desc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--wp--preset--color--secondary);
    max-inline-size: 28ch;
  }
  .home-cat-card__arrow {
    position: absolute;
    inset-block-start: 1.5rem;
    inset-inline-end: 1.5rem;
    z-index: 2;
    font-family: var(--font-ui);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--wp--preset--color--contrast);
    opacity: 0.55;
    transition: opacity 0.2s ease;
  }
  .home-cat-card:hover .home-cat-card__arrow {
    opacity: 1;
  }


  /* --- Automerkit --- */

  .home-brands__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0;
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--wp--preset--spacing--50);
  }

  .home-brands__brand {
    padding: var(--wp--preset--spacing--40);
  }

  .home-brands__brand-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    margin-block-end: var(--wp--preset--spacing--30);
    margin-block-start: 0;
    font-weight: 400;

    a {
      display: block;
      color: var(--wp--preset--color--contrast);
      text-decoration: none;
      transition: color 0.2s;

      &:hover {
        color: var(--wp--preset--color--primary);
      }
    }
  }

  .home-brands__models {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;

    li a {
      display: block;
      font-family: var(--font-ui);
      font-size: 0.8rem;
      letter-spacing: 0.06em;
      color: var(--wp--preset--color--secondary);
      text-decoration: none;
      padding-block: 2px;
      transition: color 0.2s;

      &:hover {
        color: var(--wp--preset--color--contrast);
      }
    }
  }

  .home-brands__empty {
    color: var(--wp--preset--color--secondary);
    font-size: 0.9rem;
    padding-block-start: var(--wp--preset--spacing--50);
    border-block-start: 1px solid var(--color-border);
  }

  @media (prefers-reduced-motion: reduce) {
    .home-brands__link,
    .home-cat-card__bg,
    .home-cat-card__arrow,
    .home-section__link a::after {
      transition: none;
    }
  }

  /* --- Mobiilioverridet (etusivu) --- */

  @media (width < 768px) {
    .home-hero,
    .about-hero,
    .page-hero {
      padding-inline: var(--wp--preset--spacing--50);
      padding-block-end: var(--wp--preset--spacing--70);
    }

    .home-hero__actions .wp-block-buttons {
      flex-wrap: wrap !important;
    }

    .home-section {
      padding-inline: var(--wp--preset--spacing--50);
      padding-block: var(--wp--preset--spacing--70);
    }

    .home-section__header {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--wp--preset--spacing--30);
    }

    /* 4-sarakkeinen tuotelistaus → 2 saraketta */
    .home-featured .wc-block-product-template,
    .home-featured .wp-block-woocommerce-product-collection ul {
      grid-template-columns: 1fr 1fr !important;
    }
  }

  /* --- Footer --- */

  .site-footer {
    border-block-start: 1px solid rgba(255, 255, 255, 0.06);
  }

  .site-footer__top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--wp--preset--spacing--70);
    padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
    border-block-end: 1px solid rgba(255, 255, 255, 0.06);

    @media (width < 900px) {
      grid-template-columns: 1fr 1fr;
    }

    @media (width < 560px) {
      grid-template-columns: 1fr;
    }
  }

  .site-footer__logo img {
    max-block-size: 1.8rem;
    inline-size: auto;
    margin-block-end: var(--wp--preset--spacing--40);
  }

  .site-footer__desc {
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--wp--preset--color--muted);
    max-inline-size: 22rem;
  }

  .site-footer__col-title {
    font-family: var(--font-ui, sans-serif);
    font-size: 0.65rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted);
    margin-block-end: var(--wp--preset--spacing--40);
  }

  .site-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);

    li, a {
      font-size: 0.875rem;
      color: var(--wp--preset--color--secondary);
      text-decoration: none;
      transition: color 0.2s;

      &:hover {
        color: var(--wp--preset--color--primary);
      }
    }
  }

  .site-footer__links--contact li {
    font-size: 0.85rem;
    line-height: 1.5;
  }

  .site-footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--wp--preset--spacing--40);
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);

    .site-footer__bottom-nav {
      justify-content: center;
    }

    .site-footer__copy:last-child {
      text-align: end;
    }
  }

  .site-footer__copy {
    font-family: var(--font-ui, sans-serif);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--wp--preset--color--secondary);
    margin: 0;

    a {
      color: var(--wp--preset--color--secondary);
      text-decoration: none;
      transition: color 0.2s;

      &:hover {
        color: var(--wp--preset--color--primary);
      }
    }
  }

  .site-footer__privacy {
    font-family: var(--font-ui, sans-serif);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--wp--preset--color--secondary);
    text-decoration: none;
    transition: color 0.2s;

    &:hover {
      color: var(--wp--preset--color--contrast);
    }
  }

  .site-footer__bottom-nav {
    display: flex;
    gap: var(--wp--preset--spacing--50);

    a {
      font-family: var(--font-ui, sans-serif);
      font-size: 0.7rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--wp--preset--color--secondary);
      text-decoration: none;
      transition: color 0.2s;

      &:hover {
        color: var(--wp--preset--color--contrast);
      }
    }
  }

  /* --- Tietoa meistä -sivu --- */

  /* Hero on cover-lohko, jotta asiakas voi vaihtaa kuvan editorissa.
     Typografia tulee jaetuista .home-hero__* -luokista. */
  .about-hero,
  .page-hero {
    padding-block-start: 6rem;
    padding-block-end: var(--wp--preset--spacing--80);
    padding-inline: var(--wp--preset--spacing--70);
  }

  /* Coverin oma overlay tukee vain yhtä väriä/gradienttia, joten etusivun
     kaksoisgradientti maalataan tähän. !important koska has-background-dim-0
     tulee Corelta layerittomana (sama tekniikka kuin .home-cat-card). */
  .about-hero .wp-block-cover__background,
  .page-hero .wp-block-cover__background {
    background-color: transparent !important;
    background-image:
      linear-gradient(to bottom, rgba(8, 8, 8, 0.72) 0%, transparent 35%),
      linear-gradient(to top, rgba(8, 8, 8, 0.96) 0%, rgba(8, 8, 8, 0.5) 45%, rgba(8, 8, 8, 0.15) 100%);
    opacity: 1 !important;
  }

  .about-hero .wp-block-cover__image-background,
  .page-hero .wp-block-cover__image-background {
    object-position: center 40%;
  }

  .about-hero .wp-block-cover__inner-container,
  .page-hero .wp-block-cover__inner-container {
    inline-size: 100%;
  }

  .about-story__columns {
    gap: var(--wp--preset--spacing--70);
  }

  .about-story__image img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .about-values__grid {
    gap: var(--wp--preset--spacing--50);
  }

  .about-values__card {
    block-size: 100%;

    h3 {
      margin-block-end: var(--wp--preset--spacing--30);
    }
  }

  /* Vahvuuskorttien aihe-ikonit (CL Parts -oranssi/primary) */
  .about-values__icon {
    color: var(--wp--preset--color--primary);
    margin-block-end: var(--wp--preset--spacing--40);
    line-height: 0;
  }
  .about-values__icon svg {
    inline-size: 2.5rem;
    block-size: 2.5rem;
  }

  .about-cta {
    text-align: center;
  }

  .about-cta .wp-block-buttons {
    gap: var(--wp--preset--spacing--40);
  }

  /* --- Yhteystiedot-sivu --- */

  .contact-layout {
    gap: var(--wp--preset--spacing--70);
  }

  .contact-detail {
    margin-block-start: var(--wp--preset--spacing--50);
  }

  .contact-detail__label {
    font-family: var(--font-ui);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wp--preset--color--secondary);
    margin-block-end: var(--wp--preset--spacing--20);
  }

  /* Contact Form 7 — teemassa ei ollut lomaketyylejä lainkaan */
  .wpcf7-form label {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--secondary);
    margin-block-end: var(--wp--preset--spacing--50);
  }

  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form textarea.wpcf7-textarea {
    display: block;
    inline-size: 100%;
    margin-block-start: var(--wp--preset--spacing--20);
    padding: 0.9rem 1rem;
    background: var(--wp--preset--color--subtle);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    border-radius: 0;
    color: var(--wp--preset--color--contrast);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: normal;
    text-transform: none;

    &:focus-visible {
      outline: 2px solid var(--wp--preset--color--primary);
      outline-offset: 2px;
    }
  }

  .wpcf7-form textarea.wpcf7-textarea {
    min-block-size: 8rem;
    resize: vertical;
  }

  .wpcf7-form input[type="submit"] {
    margin-block-start: var(--wp--preset--spacing--50);
    background: var(--wp--preset--gradient--gold);
    color: var(--wp--preset--color--base);
    border: none;
    border-radius: 0;
    padding-block: 1rem;
    padding-inline: 2.5rem;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s;

    &:hover {
      opacity: 0.85;
    }
  }

  .wpcf7-not-valid-tip {
    color: var(--color-error, #e5484d);
    font-size: 0.8rem;
    letter-spacing: normal;
    text-transform: none;
  }

  .wpcf7-response-output {
    border-color: var(--color-border, rgba(255, 255, 255, 0.12));
    color: var(--wp--preset--color--contrast);
    font-size: 0.9rem;
  }

  .contact-form__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    letter-spacing: 0.02em;
    line-height: 1.1;
    font-weight: 400;
    margin-block-end: var(--wp--preset--spacing--50);
  }

  .about-cta__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    letter-spacing: 0.02em;
    line-height: 1.1;
    font-weight: 400;
    margin-block-end: var(--wp--preset--spacing--60);
  }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

@layer utilities {
  /* Visually hidden but accessible to screen readers */
  .screen-reader-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Text color utilities mapped to token scale */
  .has-muted-text {
    color: var(--wp--preset--color--muted, #64748b);
  }

  .has-success-text {
    color: var(--color-success, #16a34a);
  }

  .has-warning-text {
    color: var(--color-warning, #ca8a04);
  }

  .has-error-text {
    color: var(--color-error, #dc2626);
  }

  /* Raised surface with shadow */
  .has-raised-surface {
    background: var(--color-surface, #fff);
    box-shadow: var(--wp--preset--shadow--md);
    border-radius: var(--wp--preset--border--radius--medium, 0.5rem);
  }

  .hienolista {
    li {
      margin-block-start: 10px;

      &::before {
        content: "✓";
        color: var(--wp--preset--color--primary);
        font-weight: 700;
        margin-inline-end: 0.5em;
      }
    }
  }

  /* --- Gold gradient text --- */

  /* Aina gradient: labelsit ja tagit */
  .site-nav__mega-label,
  .shop-brand-models__label {
    background: var(--wp--preset--gradient--gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* WP-blockin has-primary-color käyttää color !important,
     -webkit-text-fill-color ohittaa sen silti renderöinnissä */
  .home-section__tag,
  .home-hero__eyebrow {
    background: var(--wp--preset--gradient--gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Hover-tilassa gradient */
  .home-section__link a:hover,
  .home-brands__brand-name a:hover,
  .home-brands__models li a:hover,
  .site-footer__links a:hover,
  .site-footer__copy a:hover,
  .site-nav__cat-item a:hover,
  .site-nav__brand-item a:hover,
  .shop-brand-models__link:hover,
  .shop-brand-models__link.is-active {
    background: var(--wp--preset--gradient--gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }
}

/* ==========================================================================
   Styles outside @layer so they're globally accessible
   ========================================================================== */

/* Unlayered — overrides WP block layout constraints */
/* Wrapper: koko leveys, ei omaa paddingia */
.wp-block-template-part:has(.site-header) {
  inline-size: 100vw !important;
  max-inline-size: 100vw !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  margin-block: 0;
  padding-block: 0;
  box-sizing: border-box;
}

/* Headerin sisältödivi: koko leveys + padding reunoille */
.wp-block-template-part:has(.site-header) > * {
  inline-size: 100vw !important;
  max-inline-size: 100vw !important;
  margin-inline: 0 !important;
  padding-inline-start: var(--wp--preset--spacing--70) !important;
  padding-inline-end: var(--wp--preset--spacing--80) !important;
  margin-block: 0;
  padding-block: 0;
  box-sizing: border-box;
}

@media (width < 768px) {
  .wp-block-template-part:has(.site-header) > * {
    padding-inline-start: var(--wp--preset--spacing--50) !important;
    padding-inline-end: var(--wp--preset--spacing--60) !important;
  }
}

/* alignfull-elementit wrapperin sisällä: padding nolla */
.wp-block-template-part:has(.site-header) .alignfull {
  padding-inline: 0 !important;
}

main {
  &,
  & > * {
    margin-block-start: 0;
  }
}

.home-cat-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 380px 280px;
  gap: 10px;
}

/* Adaptiivinen mosaiikki: dynaaminen category-mosaic-block antaa
   .home-cat-grid--{n}-luokan. Oletus (.home-cat-grid) = 5+ kortin mosaiikki.
   Näissä ylikirjoitetaan nostokortin (first-child) 2-riviä-span tarvittaessa. */
.home-cat-grid--1 {
  grid-template-columns: 1fr;
  grid-template-rows: 460px;
}
.home-cat-grid--2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 460px;
}
.home-cat-grid--3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 225px 225px;
}
.home-cat-grid--4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 280px 280px;
}
.home-cat-grid--1 .home-cat-card:first-child,
.home-cat-grid--2 .home-cat-card:first-child,
.home-cat-grid--4 .home-cat-card:first-child {
  grid-row: auto;
}

@media (width < 768px) {
  .home-cat-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .home-cat-card,
  .home-cat-card:first-child {
    grid-column: span 1;
    grid-row: auto;
    min-block-size: 220px;
  }
}

.home-brands__grid {
  display: grid;
}

@media (width < 768px) {
  /* Featured products: 4 → 2 saraketta */
  .home-featured ul.wc-block-product-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Shop- ja brand-sivujen padding mobiilissa */
  .shop-header,
  .shop-brand-models,
  .shop-layout {
    padding-inline: var(--wp--preset--spacing--50);
  }
}

.shop-header,
.shop-brand-models,
.shop-layout {
  padding-inline: var(--wp--preset--spacing--70);
}

.shop-filters {
  padding-inline: 0;
}

.wc-block-components-product-button__button,
.wp-block-woocommerce-product-button .wp-block-button__link,
a.add_to_cart_button {
  border-radius: 0 !important;
}

/* Tuoteruudukon riviväli — WC:n oletusgap jättää rivit liian lähelle toisiaan.
   Koskee kaikkia tuotelistauksia: kauppa, kategoria- ja brand-sivut, etusivun
   Suosituimmat tuotteet. !important, koska WC asettaa gapin inline-tyylinä. */
ul.wc-block-product-template {
  row-gap: var(--wp--preset--spacing--80) !important;
}

/* Core asettaa inner-containerille position:relative unlayered-tyylinä, joka
   voittaa @layer components -säännön → otsikkolinkin venytetty ::after kattoi
   vain tekstialueen. Tämä unlayered-sääntö palauttaa koko kortin kokoisen
   containerin, jolloin myös kuva toimii linkkinä. */
.home-cat-card .wp-block-cover__inner-container {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
}

@keyframes clipPathCircleOpen {
  0% {
    clip-path: circle(0% at top right);
  }
  100% {
    clip-path: circle(250% at top right);
  }
}

@keyframes clipPathCircleClose {
  0% {
    clip-path: circle(250% at top right);
  }
  100% {
    clip-path: circle(0% at top right);
  }
}