/*
Theme Name: NYRIX
Theme URI: https://nyrix.ma
Author: NYRIX
Description: NYRIX — dark carbon-fiber WooCommerce storefront. Standalone classic theme with animated hero, scroll-reveal, mouse-follow shine, and a FR/EN/AR + RTL language switcher. Cart, checkout and product pages use WooCommerce defaults.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
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: nyrix
Tags: e-commerce, dark, custom-colors, rtl-language-support, translation-ready
*/

/* ============ RESET & BASE ============ */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', sans-serif;
      background-color: #0A0A0C;
      color: #F4F4F6;
      line-height: 1.6;
      overflow-x: hidden;
    }

    body.rtl {
      direction: rtl;
      text-align: right;
    }

    /* ============ TYPOGRAPHY ============ */
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Unbounded', sans-serif;
      font-weight: 900;
      letter-spacing: -1.5px;
    }

    h1 {
      font-size: clamp(2.5rem, 8vw, 5.5rem);
      line-height: 1.1;
    }

    h2 {
      font-size: clamp(1.8rem, 5vw, 3.5rem);
      line-height: 1.2;
    }

    h3 {
      font-size: clamp(1.2rem, 3vw, 1.8rem);
      line-height: 1.3;
    }

    p {
      font-size: clamp(0.95rem, 2vw, 1.1rem);
      color: #C9CCD1;
      line-height: 1.8;
    }

    a {
      text-decoration: none;
      color: inherit;
      transition: all 0.3s ease;
    }

    /* ============ COLORS & PALETTE ============ */
    :root {
      --bg-dark: #0A0A0C;
      --bg-surface: #16161A;
      --text-primary: #F4F4F6;
      --text-secondary: #C9CCD1;
      --accent: #E8632C;
      --accent-light: #F0884E;
      --border: rgba(201, 204, 209, 0.1);
    }

    /* ============ BUTTONS ============ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      padding: 1rem 2.5rem;
      border-radius: 50px;
      border: 1px solid transparent;
      font-weight: 600;
      font-size: 0.95rem;
      cursor: pointer;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .btn-primary {
      background: white;
      color: #0A0A0C;
      position: relative;
      transition: all 0.35s ease;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      /* Metallic copper sheen on hover */
      background: linear-gradient(135deg, #E8632C 0%, #F0884E 100%);
      color: #0A0A0C;
      box-shadow: 0 18px 40px rgba(232, 99, 44, 0.35);
    }

    .btn-secondary {
      background: transparent;
      color: #F4F4F6;
      border: 1px solid var(--text-secondary);
    }

    .btn-secondary:hover {
      border-color: var(--accent);
      color: var(--accent);
      transform: translateY(-2px);
    }

    .btn-accent {
      background: linear-gradient(135deg, #E8632C 0%, #F0884E 100%);
      color: #0A0A0C;
    }

    .btn-accent:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 44px rgba(232, 99, 44, 0.38);
    }

    /* ============ CARBON FIBER TEXTURE ============ */
    /* Realistic diagonal woven carbon-fiber surface, tuned to the
       NYRIX palette (#0A0A0C weave on #16161A). Subtle silver catch
       lights from #C9CCD1 at low opacity. Used as accent zones. */
    .carbon {
      position: relative;
      background-color: #101015;
      background-image:
        linear-gradient(27deg,  #16161A 5px, transparent 5px) 0 5px,
        linear-gradient(207deg, #16161A 5px, transparent 5px) 10px 0px,
        linear-gradient(27deg,  #0A0A0C 5px, transparent 5px) 0px 10px,
        linear-gradient(207deg, #0A0A0C 5px, transparent 5px) 10px 5px,
        linear-gradient(90deg,  #121217 10px, transparent 10px),
        linear-gradient(#17171c 25%, #121217 25%, #121217 50%, transparent 50%, transparent 75%, #1b1b21 75%, #1b1b21);
      background-size: 20px 20px;
    }

    /* Polished overlay: faint diagonal silver sheen so the weave
       feels glossy rather than flat. */
    .carbon::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        repeating-linear-gradient(45deg, rgba(201,204,209,0.035) 0 1px, transparent 1px 6px),
        radial-gradient(120% 80% at 30% 0%, rgba(201,204,209,0.06) 0%, transparent 55%);
      mix-blend-mode: screen;
      z-index: 0;
    }

    /* keep real content above the texture overlay */
    .carbon > * { position: relative; z-index: 1; }

    /* ============ INTERACTIVE MOUSE-FOLLOW SHINE ============ */
    /* A soft glossy highlight that tracks the cursor across carbon
       surfaces. Driven by --mx / --my custom properties set in JS.
       pointer-events:none so it never blocks clicks, and it sits
       BEHIND content, so nothing is ever hidden. */
    .shine {
      position: relative;
    }
    .shine::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      opacity: 0;
      transition: opacity 0.4s ease;
      background: radial-gradient(
        260px circle at var(--mx, 50%) var(--my, 0%),
        rgba(240, 136, 78, 0.28) 0%,
        rgba(232, 99, 44, 0.16) 32%,
        rgba(201, 204, 209, 0.06) 50%,
        transparent 62%
      );
      mix-blend-mode: screen;
      z-index: 2;
    }
    .shine:hover::after { opacity: 1; }

    /* ============ AUTO SHINE SWEEP ============ */
    /* A slow diagonal light streak that glides across the surface,
       aligned to the 45deg carbon weave. Decorative only. */
    .sweep { position: relative; overflow: hidden; }
    .sweep::before {
      content: '';
      position: absolute;
      top: -60%;
      left: -150%;
      width: 80%;
      height: 220%;
      pointer-events: none;
      background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(201, 204, 209, 0.0) 35%,
        rgba(201, 204, 209, 0.14) 50%,
        rgba(255, 255, 255, 0.18) 52%,
        rgba(201, 204, 209, 0.14) 54%,
        transparent 70%
      );
      transform: rotate(18deg);
      z-index: 3;
    }
    @media (prefers-reduced-motion: no-preference) {
      .sweep::before {
        animation: shineSweep 6s ease-in-out infinite;
      }
      .sweep.sweep-delayed::before { animation-delay: 2s; }
      .sweep.sweep-delayed2::before { animation-delay: 4s; }
    }
    @keyframes shineSweep {
      0%   { left: -150%; }
      55%  { left: 150%; }
      100% { left: 150%; }
    }

    /* Stagger the auto sweep across the product grid so they
       gleam in sequence, not all at once. */
    .products-grid .product-card:nth-child(2) .sweep::before { animation-delay: 1.5s; }
    .products-grid .product-card:nth-child(3) .sweep::before { animation-delay: 3s; }
    .products-grid .product-card:nth-child(4) .sweep::before { animation-delay: 4.5s; }

    /* ============ NAVBAR ============ */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background: rgba(10, 10, 12, 0.8);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
      padding: 1rem 2rem;
    }

    .navbar-content {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
    }

    .navbar-logo {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .navbar-logo img {
      height: 56px !important; /* logo, desktop — wordmark now fills the trimmed PNG */
      width: auto !important;  /* keep aspect ratio (~4.9:1 wordmark) */
      object-fit: contain;
      display: block;          /* remove inline baseline gap → no shift */
      filter: brightness(0) invert(1);
    }

    .navbar-logo:hover {
      opacity: 0.8;
    }

    /* ===== Mobile hamburger (hidden on desktop; shown ≤768px) ===== */
    .navbar-burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 44px;
      height: 44px;
      padding: 11px 10px;
      background: transparent;
      border: none;
      cursor: pointer;
      z-index: 1002;
    }
    .navbar-burger span {
      display: block;
      width: 100%;
      height: 2px;
      border-radius: 2px;
      background: #F4F4F6;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .navbar.menu-open .navbar-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .navbar.menu-open .navbar-burger span:nth-child(2) { opacity: 0; }
    .navbar.menu-open .navbar-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile-only language row lives inside the burger panel. */
    .navbar-mobile-lang { display: none; }

    .navbar-center {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 3rem;
      justify-content: center;
    }

    .navbar-center a {
      font-size: 0.9rem;
      color: #C9CCD1;
      font-weight: 500;
      position: relative;
    }

    .navbar-center a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--accent);
      transition: width 0.3s ease;
    }

    .navbar-center a:hover::after {
      width: 100%;
    }

    .navbar-right {
      display: flex;
      align-items: center;
      gap: 2rem;
    }

    .language-selector {
      position: relative;
    }

    .lang-button {
      padding: 0.5rem 1rem;
      background: rgba(201, 204, 209, 0.1);
      border: 1px solid var(--border);
      border-radius: 50px;
      color: #C9CCD1;
      cursor: pointer;
      font-size: 0.85rem;
      font-weight: 500;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .lang-button:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .lang-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      background: rgba(10, 10, 12, 0.95);
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-top: 0.5rem;
      min-width: 150px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      z-index: 10;
      backdrop-filter: blur(10px);
    }

    .language-selector:hover .lang-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .lang-option {
      padding: 0.75rem 1.25rem;
      color: #C9CCD1;
      cursor: pointer;
      font-size: 0.9rem;
      transition: all 0.3s ease;
      border-bottom: 1px solid var(--border);
    }

    .lang-option:last-child {
      border-bottom: none;
    }

    .lang-option:hover {
      background: rgba(232, 99, 44, 0.1);
      color: var(--accent);
    }

    .lang-option.active {
      color: var(--accent);
      background: rgba(232, 99, 44, 0.05);
    }

    .navbar-icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #C9CCD1;
      transition: all 0.3s ease;
      position: relative;
    }

    .navbar-icon:hover {
      color: var(--accent);
    }

    .cart-badge {
      position: absolute;
      top: -8px;
      right: -8px;
      background: var(--accent);
      color: #0A0A0C;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      font-size: 0.75rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @media (max-width: 768px) {
      .navbar { padding: 0; }            /* predictable 60px bar height for the panel offset */

      .navbar-burger { display: flex; }

      .navbar-content {
        padding: 0.5rem 1rem;
        gap: 0.75rem;
        min-height: 44px;
      }

      .navbar-right {
        gap: 0.75rem;
      }

      .navbar-logo img {
        height: 38px !important;  /* logo on mobile */
        max-width: 50vw;          /* never crowd the cart/burger on small screens */
      }

      /* The hover-based desktop language selector doesn't work on touch and
         overflowed the bar — hide it; the tappable row in the panel replaces it. */
      .language-selector { display: none; }

      /* navbar-center becomes a slide-down panel toggled by the burger. */
      .navbar-center {
        display: flex;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        flex: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 0.5rem 1.25rem 1.5rem;
        background: rgba(10, 10, 12, 0.98);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--border);
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
        z-index: 1001;
      }
      .navbar.menu-open .navbar-center {
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      .navbar-center a {
        font-size: 1.05rem;
        padding: 0.95rem 0.25rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--border);
      }
      .navbar-center a::after { display: none; }

      .navbar-mobile-lang {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-top: 1.1rem;
      }
      .navbar-mobile-lang .nml-label {
        width: 100%;
        margin-bottom: 0.4rem;
        color: #8A8D93;
        font-size: 0.78rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .navbar-mobile-lang .lang-option {
        min-height: 44px;
        min-width: 58px;
        padding: 0 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: 50px;
        background: rgba(201, 204, 209, 0.06);
        color: #C9CCD1;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.25s ease;
      }
      .navbar-mobile-lang .lang-option.active {
        border-color: var(--accent);
        color: var(--accent);
        background: rgba(232, 99, 44, 0.1);
      }
    }

    /* ============ HERO SECTION ============ */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 120px 2rem 4rem;
      /* ONE continuous dark scene across the whole hero: a soft center lift
         (#16161A) fading to #0A0A0C with a faint vignette at the edges, plus a
         gradient fade at the very bottom into the next section (no hard line). */
      background-color: #0A0A0C;
      background-image:
        linear-gradient(to bottom, transparent 78%, #0A0A0C 100%),
        radial-gradient(130% 120% at 50% 42%, rgba(22, 22, 26, 0.6) 0%, rgba(10, 10, 12, 1) 64%, #070708 100%);
      position: relative;
      overflow: hidden;
    }

    /* Single shared copper ambient glow for the WHOLE hero — anchored
       center / center-right (behind the video) and bleeding gently toward the
       text, so both columns feel lit by one source. */
    .hero::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 62%;
      width: min(1150px, 95%);
      height: 1150px;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(232, 99, 44, 0.12) 0%, rgba(232, 99, 44, 0.06) 38%, transparent 70%);
      pointer-events: none;
      z-index: 0;
      animation: pulseGlow 4s ease-in-out infinite;
    }

    @keyframes pulseGlow {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }

    .hero-container {
      max-width: 1400px;
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
      align-items: center;
      position: relative;
      z-index: 10;
    }

    .hero-content h1 {
      margin-bottom: 2rem;
      background: linear-gradient(135deg, #F4F4F6 0%, #C9CCD1 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-content p {
      margin-bottom: 3rem;
      font-size: 1.15rem;
      max-width: 450px;
    }

    /* Hero headline wrapper — holds the one-time copper shine sweep overlay.
       (The sweep is a ::after pseudo so it survives the i18n textContent swap.) */
    .hero-headline { position: relative; }

    /* ===== HERO ENTRANCE (on load) — fade + rise from 20px, staggered. =====
       Gated behind html.nyrix-js so text is ONLY hidden when JS is present;
       with no JS the text shows normally (no FOUC, graceful fallback). Animates
       transform + opacity only (GPU). Subtext/button start after the headline. */
    html.nyrix-js .hero-content h1,
    html.nyrix-js .hero-content p,
    html.nyrix-js .hero-content .btn {
      opacity: 0;
      animation: nyrixRiseIn 0.7s ease-out both;
    }
    html.nyrix-js .hero-content h1   { animation-delay: 0.12s; }
    html.nyrix-js .hero-content p    { animation-delay: 0.84s; } /* right after headline finishes */
    html.nyrix-js .hero-content .btn { animation-delay: 0.96s; }

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

    /* One copper shine sweep gliding across the headline, once, after it appears. */
    .hero-headline::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 2;
      background: linear-gradient(115deg,
        transparent 42%,
        rgba(240, 136, 78, 0.45) 49%,
        rgba(255, 233, 214, 0.65) 52%,
        rgba(232, 99, 44, 0.40) 55%,
        transparent 62%);
      background-size: 250% 100%;
      background-repeat: no-repeat;
      background-position: 150% 0;
      mix-blend-mode: screen;
      opacity: 0;
    }
    html.nyrix-js .hero-headline::after {
      animation: nyrixHeadlineSweep 1s ease-out 1s 1 both;
    }
    @keyframes nyrixHeadlineSweep {
      0%   { opacity: 0; background-position: 150% 0; }
      12%  { opacity: 1; }
      88%  { opacity: 1; }
      100% { opacity: 0; background-position: -150% 0; }
    }

    /* ===== SECTION TEXT REVEAL (on scroll) — fade + rise from 16px, once. =====
       Hidden only when JS is present; .is-visible is added by the
       IntersectionObserver in js/nyrix.js (initTextReveal) at ~15% visibility.
       .d1/.d2 stagger a paragraph ~0.1s/0.2s after its heading. */
    html.nyrix-js .nyrix-reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.7s ease-out, transform 0.7s ease-out;
      will-change: opacity, transform;
    }
    html.nyrix-js .nyrix-reveal.d1 { transition-delay: 0.1s; }
    html.nyrix-js .nyrix-reveal.d2 { transition-delay: 0.2s; }
    html.nyrix-js .nyrix-reveal.is-visible { opacity: 1; transform: none; }

    /* These homepage blocks had a load-time slideUp; with JS we let the finer
       per-text reveal drive them instead (no double motion). */
    html.nyrix-js .collections-header,
    html.nyrix-js .brand-story-content,
    html.nyrix-js .texture-content,
    html.nyrix-js .social-proof,
    html.nyrix-js .newsletter,
    html.nyrix-js .cta-banner { animation: none !important; }

    /* Failsafe: if the observer never runs, the head-script timeout reveals all. */
    html.nyrix-anim-done .nyrix-reveal { opacity: 1 !important; transform: none !important; }

    /* ===== ACCESSIBILITY / SAFETY: never hide content ===== */
    /* If the user prefers reduced motion, disable all entrance
       animations and force every animated element fully visible. */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation: none !important;
        transition: none !important;
      }
      .hero-content h1,
      .hero-content p,
      .hero-content .btn,
      .nyrix-reveal,
      .pillar-card,
      .product-card,
      .collections-header,
      .brand-story-content,
      .texture-image,
      .texture-content,
      .social-proof,
      .newsletter,
      .cta-banner,
      section {
        opacity: 1 !important;
        transform: none !important;
      }
    }

    .hero-product {
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 1200px;
      position: relative;
      height: 500px;
    }

    .hero-product-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: float3d 4s ease-in-out infinite;
    }

    @keyframes float3d {
      0%, 100% {
        transform: translateY(0) rotateY(0deg) rotateX(0deg);
      }
      25% {
        transform: translateY(-20px) rotateY(5deg) rotateX(2deg);
      }
      50% {
        transform: translateY(-40px) rotateY(10deg) rotateX(-2deg);
      }
      75% {
        transform: translateY(-20px) rotateY(5deg) rotateX(2deg);
      }
    }

    .hero-product img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      /* Transparent PNG — blend straight into the dark scene,
         no frame, no box, no mask. */
      filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55)) drop-shadow(0 12px 40px rgba(232, 99, 44, 0.25));
      transition: filter 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .hero-product:hover img {
      filter: drop-shadow(0 36px 70px rgba(0, 0, 0, 0.6)) drop-shadow(0 16px 50px rgba(232, 99, 44, 0.4));
    }

    /* Copper shine sweep confined to the carbon silhouette via the
       product PNG used as an alpha mask. */
    .wallet-shine {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 2;
      -webkit-mask-image: url('images/hero-wallet-transparent.png');
      mask-image: url('images/hero-wallet-transparent.png');
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      background: linear-gradient(
        115deg,
        transparent 38%,
        rgba(240, 136, 78, 0.0) 44%,
        rgba(240, 136, 78, 0.55) 50%,
        rgba(255, 233, 214, 0.7) 52%,
        rgba(232, 99, 44, 0.45) 56%,
        transparent 64%
      );
      background-size: 280% 280%;
      background-repeat: no-repeat;
      mix-blend-mode: screen;
      opacity: 0.9;
    }
    @media (prefers-reduced-motion: no-preference) {
      .wallet-shine {
        animation: walletSweep 5s ease-in-out infinite;
      }
    }
    @keyframes walletSweep {
      0%   { background-position: 140% 0%; }
      55%  { background-position: -40% 100%; }
      100% { background-position: -40% 100%; }
    }

    .product-light {
      position: absolute;
      width: 560px;
      height: 560px;
      max-width: 90%;
      /* Soft copper glow that blooms behind the wallet and melts
         into the dark background — no hard edge, no white. */
      background: radial-gradient(circle, rgba(232, 99, 44, 0.32) 0%, rgba(232, 99, 44, 0.14) 35%, rgba(232, 99, 44, 0.04) 55%, transparent 72%);
      border-radius: 50%;
      filter: blur(8px);
      animation: lightShift 4s ease-in-out infinite;
    }

    @keyframes lightShift {
      0%, 100% {
        transform: translate(0, 0);
        opacity: 0.5;
      }
      50% {
        transform: translate(20px, -20px);
        opacity: 0.8;
      }
    }

    @media (max-width: 1024px) {
      .hero-container {
        grid-template-columns: 1fr;
        gap: 3rem;
      }

      .hero-product {
        order: -1;
        height: 350px;
      }
    }

    @media (max-width: 640px) {
      .hero {
        padding: 100px 1.5rem 3rem;
        min-height: 80vh;
      }

      .hero-content h1 {
        margin-bottom: 1.5rem;
      }

      .hero-content p {
        margin-bottom: 2rem;
      }

      .hero-product {
        height: 250px;
      }
    }

    /* ============ VALUE PILLARS ============ */
    .pillars {
      padding: 6rem 2rem;
      background-color: #0A0A0C;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .pillars-grid {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
    }

    .pillar-card {
      padding: 2.5rem;
      background: rgba(22, 22, 26, 0.5);
      border: 1px solid var(--border);
      border-radius: 12px;
      transition: all 0.3s ease;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      animation: slideUp 0.6s ease-out;
      animation-fill-mode: both;
    }

    .pillar-card:nth-child(1) { animation-delay: 0s; }
    .pillar-card:nth-child(2) { animation-delay: 0.1s; }
    .pillar-card:nth-child(3) { animation-delay: 0.2s; }
    .pillar-card:nth-child(4) { animation-delay: 0.3s; }

    @keyframes slideUp {
      from {
        transform: translateY(24px);
      }
      to {
        transform: translateY(0);
      }
    }

    .pillar-card:hover {
      background: rgba(22, 22, 26, 0.8);
      border-color: rgba(232, 99, 44, 0.3);
      transform: translateY(-5px);
    }

    .pillar-icon {
      width: 60px;
      height: 60px;
      margin: 0 auto;
      background: rgba(232, 99, 44, 0.1);
      border: 2px solid rgba(232, 99, 44, 0.3);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
    }

    .pillar-card h3 {
      color: #F4F4F6;
    }

    .pillar-card p {
      color: #C9CCD1;
      font-size: 0.95rem;
    }

    /* ============ COLLECTIONS SECTION ============ */
    .collections {
      padding: 8rem 2rem;
      background-color: #0A0A0C;
    }

    .collections-header {
      max-width: 1400px;
      margin: 0 auto 4rem;
      text-align: center;
      animation: slideUp 0.6s ease-out;
    }

    .collections-header h2 {
      margin-bottom: 1.5rem;
    }

    .collections-header p {
      font-size: 1.1rem;
      max-width: 600px;
      margin: 0 auto;
    }

    .products-grid {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2.5rem;
    }

    .product-card {
      background: #16161A;
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      animation: slideUp 0.6s ease-out;
      animation-fill-mode: both;
      /* Whole card is clickable via the stretched link below. */
      position: relative;
      cursor: pointer;
    }

    /* Stretched link covering the entire card → opens the product page.
       Sits above image/title/price (z-index 1) but BELOW the action buttons
       (z-index 2), so clicking image/title/price/empty space navigates while
       "Découvrir" and "Ajouter" keep their own behaviour. */
    .product-card-link {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: transparent;
      border: 0;
    }

    /* Keep the action buttons clickable above the stretched link. */
    .product-card .product-actions {
      position: relative;
      z-index: 2;
    }

    .product-card:nth-child(1) { animation-delay: 0s; }
    .product-card:nth-child(2) { animation-delay: 0.1s; }
    .product-card:nth-child(3) { animation-delay: 0.2s; }
    .product-card:nth-child(4) { animation-delay: 0.3s; }

    .product-card:hover {
      border-color: rgba(232, 99, 44, 0.5);
      transform: translateY(-10px);
      box-shadow: 0 30px 60px rgba(232, 99, 44, 0.1);
    }

    .product-image {
      aspect-ratio: 1;
      background-color: #0A0A0C;
      background-image:
        radial-gradient(120% 100% at 50% 0%, rgba(22,22,26,0.85) 0%, rgba(10,10,12,1) 65%),
        linear-gradient(27deg,  rgba(22,22,26,0.55) 5px, transparent 5px),
        linear-gradient(207deg, rgba(22,22,26,0.55) 5px, transparent 5px),
        linear-gradient(27deg,  rgba(10,10,12,0.85) 5px, transparent 5px),
        linear-gradient(207deg, rgba(10,10,12,0.85) 5px, transparent 5px);
      background-size: 100% 100%, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
      background-position: 0 0, 0 5px, 10px 0, 0 10px, 10px 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .product-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 2rem;
      /* Blend the studio-white product shots into the carbon card */
      -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 60%, transparent 88%);
      mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 60%, transparent 88%);
      transition: transform 0.3s ease;
    }

    .product-card:hover .product-image img {
      transform: scale(1.05);
    }

    .product-badge {
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      z-index: 10;
      background: var(--accent);
      color: #0A0A0C;
      padding: 0.5rem 1rem;
      border-radius: 50px;
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
    }

    .product-badge.coming-soon {
      background: rgba(232, 99, 44, 0.2);
      color: var(--accent);
      border: 1px solid var(--accent);
    }

    .product-info {
      padding: 2rem;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .product-name {
      font-size: 1.2rem;
      font-weight: 600;
      color: #F4F4F6;
    }

    .product-price {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .price-current {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--accent);
    }

    .price-original {
      font-size: 0.95rem;
      color: #C9CCD1;
      text-decoration: line-through;
      opacity: 0.7;
    }

    .product-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 0.75rem;
      margin-top: auto;
      overflow: visible;
    }

    .product-actions > * {
      flex: 1 1 0;
      min-width: 0;
    }

    .product-actions .btn,
    .product-actions .added_to_cart,
    .product-actions .wc-forward {
      flex: 1 1 140px;
      min-width: 0;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      text-align: center;
    }

    .product-actions .added_to_cart,
    .product-actions .wc-forward {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      width: 100%;
      flex-basis: 100%;
      padding: 0.85rem 1rem;
      font-size: 0.85rem;
      line-height: 1.3;
      border-radius: 50px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.04);
      color: #F4F4F6;
      text-decoration: none;
    }

    .product-actions .btn {
      padding: 0.85rem 1.5rem;
      font-size: 0.85rem;
    }

    /* ============ BRAND STORY ============ */
    .brand-story {
      padding: 8rem 2rem;
      background: linear-gradient(135deg, #16161A 0%, #0A0A0C 100%);
      position: relative;
      overflow: hidden;
    }

    .brand-story::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(232, 99, 44, 0.03) 0%, transparent 70%);
      border-radius: 50%;
    }

    .brand-story-content {
      max-width: 1000px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      z-index: 10;
      animation: slideUp 0.6s ease-out;
    }

    .brand-story-content h2 {
      margin-bottom: 2rem;
      font-size: clamp(2rem, 7vw, 3.5rem); /* was fixed 3.5rem → clipped on mobile */
    }

    .brand-story-content p {
      font-size: 1.2rem;
      color: #C9CCD1;
      margin-bottom: 3rem;
      line-height: 1.9;
    }

    .brand-story-tagline {
      font-size: clamp(1.6rem, 5.5vw, 2.5rem); /* was fixed 2.5rem */
      font-family: 'Unbounded', sans-serif;
      color: var(--accent);
      font-weight: 900;
      letter-spacing: -1px;
    }

    /* ============ SPOTLIGHT SHOWCASE ============ */
    /* Cinematic single-product moment: deep immersive dark frame,
       one overhead copper light cone, heavy vignette, bold minimal
       type and generous negative space. Mood borrowed from the
       reference; colours stay 100% NYRIX. */
    .spotlight {
      padding: 7rem 2rem;
      background-color: #0A0A0C;
      display: flex;
      justify-content: center;
    }

    .spotlight-stage {
      position: relative;
      width: 100%;
      max-width: 1300px;
      min-height: 760px;
      border-radius: 32px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 5rem 2rem;
      /* Immersive frame: carbon weave under a deep radial vignette */
      background-color: #0C0C10;
      background-image:
        radial-gradient(120% 90% at 50% -10%, rgba(232,99,44,0.16) 0%, transparent 42%),
        radial-gradient(100% 100% at 50% 120%, #000 0%, transparent 55%),
        linear-gradient(27deg,  rgba(22,22,26,0.7) 6px, transparent 6px),
        linear-gradient(207deg, rgba(22,22,26,0.7) 6px, transparent 6px),
        linear-gradient(27deg,  rgba(10,10,12,0.9) 6px, transparent 6px),
        linear-gradient(207deg, rgba(10,10,12,0.9) 6px, transparent 6px);
      background-size: 100% 100%, 100% 100%, 26px 26px, 26px 26px, 26px 26px, 26px 26px;
      background-position: 0 0, 0 0, 0 6px, 13px 0, 0 13px, 13px 6px;
      border: 1px solid rgba(201, 204, 209, 0.08);
      box-shadow: inset 0 1px 0 rgba(201,204,209,0.05), inset 0 0 160px rgba(0,0,0,0.9);
    }

    /* Overhead light cone shining down onto the product */
    .spotlight-beam {
      position: absolute;
      top: -8%;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 90%;
      pointer-events: none;
      background: radial-gradient(60% 70% at 50% 0%, rgba(240,136,78,0.18) 0%, rgba(232,99,44,0.06) 32%, transparent 60%);
      -webkit-mask-image: linear-gradient(#000, transparent 88%);
      mask-image: linear-gradient(#000, transparent 88%);
      z-index: 1;
    }

    .spotlight-eyebrow {
      position: relative;
      z-index: 3;
      font-size: 0.85rem;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 600;
      margin-bottom: 1.5rem;
    }

    .spotlight-stage h2 {
      position: relative;
      z-index: 3;
      font-size: clamp(2.2rem, 6vw, 4.2rem);
      max-width: 14ch;
      margin-bottom: 0.5rem;
      background: linear-gradient(135deg, #F4F4F6 0%, #C9CCD1 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .spotlight-product {
      position: relative;
      z-index: 2;
      width: min(420px, 70vw);
      margin: 1.5rem 0 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .spotlight-product::before {
      content: '';
      position: absolute;
      inset: -12% -8%;
      background: radial-gradient(circle, rgba(232,99,44,0.28) 0%, rgba(232,99,44,0.08) 40%, transparent 68%);
      filter: blur(6px);
      z-index: -1;
    }

    .spotlight-product img {
      width: 100%;
      object-fit: contain;
      animation: float3d 5s ease-in-out infinite;
      filter: drop-shadow(0 40px 70px rgba(0,0,0,0.7)) drop-shadow(0 10px 30px rgba(232,99,44,0.3));
    }

    /* reflected pool beneath the product */
    .spotlight-product::after {
      content: '';
      position: absolute;
      bottom: -16%;
      left: 50%;
      transform: translateX(-50%);
      width: 70%;
      height: 40px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, transparent 70%);
      z-index: -2;
    }

    .spotlight-stage p {
      position: relative;
      z-index: 3;
      max-width: 44ch;
      color: var(--text-secondary);
      font-size: 1.05rem;
      margin-bottom: 2.5rem;
    }

    .spotlight-stage .btn {
      position: relative;
      z-index: 3;
    }

    @media (max-width: 640px) {
      .spotlight { padding: 4rem 1rem; }
      .spotlight-stage { min-height: 620px; padding: 3.5rem 1.5rem; border-radius: 24px; }
    }

    /* ============ TEXTURE SECTION ============ */
    .texture {
      padding: 6rem 2rem;
      background-color: #0A0A0C;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .texture-container {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }

    .texture-image {
      aspect-ratio: 1;
      background-color: #101015;
      background-image:
        radial-gradient(120% 100% at 30% 10%, rgba(201,204,209,0.07) 0%, transparent 55%),
        linear-gradient(27deg,  #16161A 8px, transparent 8px),
        linear-gradient(207deg, #16161A 8px, transparent 8px),
        linear-gradient(27deg,  #0A0A0C 8px, transparent 8px),
        linear-gradient(207deg, #0A0A0C 8px, transparent 8px);
      background-size: 100% 100%, 32px 32px, 32px 32px, 32px 32px, 32px 32px;
      background-position: 0 0, 0 8px, 16px 0, 0 16px, 16px 8px;
      border-radius: 12px;
      padding: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(232, 99, 44, 0.12);
      box-shadow: inset 0 1px 0 rgba(201,204,209,0.06), 0 30px 60px rgba(0,0,0,0.4);
      animation: slideUp 0.6s ease-out;
    }

    .texture-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 8px;
      -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 58%, transparent 86%);
      mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 58%, transparent 86%);
    }

    .texture-content {
      animation: slideUp 0.6s ease-out 0.1s both;
    }

    .texture-content h2 {
      margin-bottom: 2rem;
    }

    .texture-content p {
      margin-bottom: 1.5rem;
      font-size: 1.05rem;
    }

    .texture-content ul {
      list-style: none;
      margin-bottom: 2rem;
    }

    .texture-content li {
      padding: 0.75rem 0;
      padding-left: 2rem;
      position: relative;
      color: #C9CCD1;
    }

    .texture-content li::before {
      content: '✓';
      position: absolute;
      left: 0;
      color: var(--accent);
      font-weight: 700;
    }

    @media (max-width: 1024px) {
      .texture-container {
        grid-template-columns: 1fr;
        gap: 2rem;
      }

      .texture-image {
        aspect-ratio: 4/3;
      }
    }

    /* ============ SOCIAL PROOF ============ */
    .social-proof {
      padding: 6rem 2rem;
      background-color: #16161A;
      text-align: center;
      animation: slideUp 0.6s ease-out;
    }

    .social-proof-content {
      max-width: 800px;
      margin: 0 auto;
    }

    .stars {
      font-size: 2rem;
      letter-spacing: 0.5rem;
      margin-bottom: 1.5rem;
    }

    .social-proof h3 {
      margin-bottom: 1rem;
    }

    .social-proof p {
      font-size: 1.1rem;
      color: #C9CCD1;
      margin-bottom: 2rem;
    }

    .customer-count {
      display: inline-block;
      padding: 1.5rem 3rem;
      background: rgba(232, 99, 44, 0.1);
      border: 1px solid rgba(232, 99, 44, 0.3);
      border-radius: 50px;
      color: var(--accent);
      font-weight: 600;
      font-size: 1.1rem;
    }

    /* ============ NEWSLETTER ============ */
    .newsletter {
      padding: 6rem 2rem;
      background: linear-gradient(135deg, #0A0A0C 0%, #16161A 100%);
      border-bottom: 1px solid var(--border);
      animation: slideUp 0.6s ease-out;
    }

    .newsletter-content {
      max-width: 600px;
      margin: 0 auto;
      text-align: center;
    }

    .newsletter-content h2 {
      margin-bottom: 1.5rem;
    }

    .newsletter-content p {
      margin-bottom: 2.5rem;
      font-size: 1.05rem;
    }

    .newsletter-form {
      display: flex;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
    }

    .newsletter-form input {
      flex: 1;
      padding: 1rem 1.5rem;
      background: rgba(201, 204, 209, 0.05);
      border: 1px solid var(--border);
      border-radius: 50px;
      color: #F4F4F6;
      font-size: 0.95rem;
      transition: all 0.3s ease;
    }

    .newsletter-form input::placeholder {
      color: #C9CCD1;
    }

    .newsletter-form input:focus {
      outline: none;
      border-color: var(--accent);
      background: rgba(232, 99, 44, 0.05);
    }

    .newsletter-form button {
      padding: 1rem 2rem;
    }

    .newsletter-note {
      font-size: 0.85rem;
      color: #C9CCD1;
    }

    @media (max-width: 640px) {
      .newsletter-form {
        flex-direction: column;
      }

      .newsletter-form button {
        width: 100%;
      }
    }

    /* ============ CTA BANNER ============ */
    .cta-banner {
      padding: 5rem 2rem;
      background: linear-gradient(135deg, rgba(232, 99, 44, 0.1) 0%, rgba(232, 99, 44, 0.05) 100%);
      border: 1px solid rgba(232, 99, 44, 0.2);
      text-align: center;
      margin: 0 2rem;
      border-radius: 16px;
      animation: slideUp 0.6s ease-out;
    }

    .cta-banner h2 {
      margin-bottom: 1.5rem;
    }

    .cta-banner p {
      margin-bottom: 2rem;
      font-size: 1.1rem;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
    }

    /* ============ FOOTER ============ */
    .footer {
      padding: 4rem 2rem 2rem;
      background-color: #0A0A0C;
      background-image:
        linear-gradient(180deg, rgba(22,22,26,0.5) 0%, rgba(10,10,12,1) 40%),
        linear-gradient(27deg,  rgba(22,22,26,0.45) 5px, transparent 5px),
        linear-gradient(207deg, rgba(22,22,26,0.45) 5px, transparent 5px),
        linear-gradient(27deg,  rgba(10,10,12,0.85) 5px, transparent 5px),
        linear-gradient(207deg, rgba(10,10,12,0.85) 5px, transparent 5px);
      background-size: 100% 100%, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
      background-position: 0 0, 0 5px, 10px 0, 0 10px, 10px 5px;
      border-top: 1px solid rgba(232, 99, 44, 0.15);
    }

    .footer-content {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 3rem;
      margin-bottom: 3rem;
    }

    .footer-section h4 {
      margin-bottom: 1.5rem;
      font-size: 1.1rem;
    }

    .footer-section ul {
      list-style: none;
    }

    .footer-section li {
      margin-bottom: 0.75rem;
    }

    .footer-section a {
      color: #C9CCD1;
      font-size: 0.9rem;
      transition: all 0.3s ease;
    }

    .footer-section a:hover {
      color: var(--accent);
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1rem;
      cursor: pointer;
    }

    .footer-logo img {
      height: 30px;
      width: auto;
      filter: brightness(0) invert(1);
    }

    .footer-divider {
      border-top: 1px solid var(--border);
      padding-top: 2rem;
      margin-top: 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .footer-divider p {
      font-size: 0.85rem;
      color: #C9CCD1;
    }

    @media (max-width: 640px) {
      .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
      }

      .footer-divider {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
      }
    }

    /* ============ UTILS ============ */
    .container {
      max-width: 1400px;
      margin: 0 auto;
    }

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

    .mt-4 {
      margin-top: 2rem;
    }

    .hidden {
      display: none;
    }

    /* ============================================================
     * WOOCOMMERCE — brand skin (dark + copper)
     * Light, non-destructive styling for the Shop archive, default
     * page wrapper (page.php), Cart & Checkout blocks. Layout and
     * functionality stay WooCommerce's; only colours/spacing change.
     * ============================================================ */

    /* ---- Generic page wrapper (page.php: Cart, Checkout, legal) ---- */
    .page-main {
      max-width: 920px;
      margin: 0 auto;
      padding: 7rem 6vw 6rem; /* top clears the fixed navbar */
      min-height: 60vh;
    }
    .page-head { margin-bottom: 2.5rem; }
    .page-title {
      font-family: 'Unbounded', sans-serif;
      font-weight: 700;
      letter-spacing: -0.5px;
      font-size: clamp(2rem, 5vw, 3rem);
      color: var(--text-primary);
    }
    /* Readable Manrope body with copper headings */
    .page-content {
      font-family: 'Manrope', sans-serif;
      font-size: 16px;
      line-height: 1.8;
      color: #C9CCD1;
      font-weight: 400;
    }
    .page-content h2 {
      font-family: 'Unbounded', sans-serif;
      font-weight: 600;
      letter-spacing: -0.3px;
      font-size: clamp(1.35rem, 3vw, 1.9rem);
      color: var(--accent);
      margin: 2.5rem 0 1rem;
    }
    .page-content h3 {
      font-family: 'Unbounded', sans-serif;
      font-weight: 600;
      font-size: 1.2rem;
      color: var(--accent);
      margin: 1.9rem 0 0.7rem;
    }
    .page-content h2:first-child,
    .page-content h3:first-child { margin-top: 0; }
    .page-content p,
    .page-content li { font-size: 16px; line-height: 1.85; margin-bottom: 1rem; }
    .page-content ul,
    .page-content ol { padding-left: 1.4rem; margin-bottom: 1.4rem; }
    .page-content li { margin-bottom: 0.55rem; }
    .page-content strong { color: var(--text-primary); }
    .page-content a { color: var(--accent); }
    .page-content a:hover { color: var(--accent-light); }

    /* ---- Contact page (page-contact.php) ---- */
    .nyrix-contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 3rem;
      align-items: start;
    }
    .nyrix-contact-info p { margin-bottom: 1rem; }
    .nyrix-contact-methods { list-style: none; padding: 0; margin: 1.5rem 0 0; }
    .nyrix-contact-methods li {
      display: flex; align-items: center; gap: 0.75rem;
      padding: 0.9rem 0; border-bottom: 1px solid var(--border);
    }
    .nyrix-contact-methods svg { color: var(--accent); flex: 0 0 auto; }
    .nyrix-contact-methods a { color: var(--text-primary); }
    .nyrix-contact-methods a:hover { color: var(--accent); }
    .nyrix-form { display: flex; flex-direction: column; gap: 1rem; }
    .nyrix-form label {
      font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase;
      color: var(--text-secondary); font-weight: 600; margin-bottom: 0.4rem; display: block;
    }
    .nyrix-form input,
    .nyrix-form textarea {
      width: 100%;
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 0.9rem 1.1rem;
      color: var(--text-primary);
      font-family: 'Manrope', sans-serif;
      font-size: 1rem;
      transition: border-color 0.25s ease, background 0.25s ease;
    }
    .nyrix-form textarea { min-height: 150px; resize: vertical; }
    .nyrix-form input:focus,
    .nyrix-form textarea:focus {
      outline: none; border-color: var(--accent); background: rgba(232, 99, 44, 0.06);
    }
    .nyrix-form .btn { align-self: flex-start; }
    .nyrix-form-note {
      padding: 0.9rem 1.1rem; border-radius: 12px; margin-bottom: 1.25rem; font-size: 0.95rem;
    }
    .nyrix-form-note.ok { background: rgba(232, 99, 44, 0.12); border: 1px solid var(--accent); color: var(--text-primary); }
    .nyrix-form-note.err { background: rgba(201, 70, 70, 0.12); border: 1px solid #c44; color: #f2c7c7; }
    @media (max-width: 768px) {
      .nyrix-contact-grid { grid-template-columns: 1fr; gap: 2rem; }
    }

    /* ---- Shop / archive grid ---- */
    .woocommerce .woocommerce-products-header,
    .woocommerce-page .woocommerce-products-header { padding: 3rem 6vw 0; }
    .woocommerce-products-header__title,
    .woocommerce .woocommerce-result-count,
    .woocommerce .woocommerce-ordering { color: var(--text-primary); }
    /* Result count + ordering sat outside the gutter, flush to the edge →
       align them to the same 6vw as the title and the product grid. */
    .woocommerce .woocommerce-result-count { margin-left: 6vw; }
    .woocommerce .woocommerce-ordering { margin-right: 6vw; }
    .woocommerce ul.products,
    .woocommerce-page ul.products {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 24px;
      padding: 2.5rem 6vw 5rem;
      margin: 0;
      list-style: none;
    }
    .woocommerce ul.products::before,
    .woocommerce ul.products::after { content: none !important; }
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
      width: auto !important;
      float: none !important;
      margin: 0 !important;
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 18px 18px 22px;
      text-align: left;
      transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
      position: relative;
      overflow: hidden;
    }
    .woocommerce ul.products li.product:hover {
      transform: translateY(-6px);
      border-color: rgba(232, 99, 44, 0.5);
      box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9);
    }
    /* Anchor the sale badge to the IMAGE link (not the whole card) so it always
       lands in the top corner of the product photo, never over the text below. */
    .woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
    .woocommerce ul.products li.product a.woocommerce-loop-product__link {
      position: relative;
      display: block;
    }
    .woocommerce ul.products li.product a img {
      border-radius: 12px;
      margin-bottom: 1rem;
      background: #0e0e12;
      /* 4:5 box + contain → the full portrait shot shows, no top crop.
         Mixed-ratio images (e.g. a square one) letterbox on the dark card. */
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 5;
      object-fit: contain;
    }
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
      font-family: 'Unbounded', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--text-primary);
      padding: 0.4rem 0;
    }
    .woocommerce ul.products li.product .price {
      color: var(--accent) !important;
      font-weight: 700;
      font-size: 1.1rem;
    }
    .woocommerce ul.products li.product .price del {
      color: var(--text-secondary) !important;
      opacity: 0.6;
      font-weight: 400;
      margin-right: 6px;
    }
    .woocommerce ul.products li.product .price ins { text-decoration: none; }

    /* Sale badge — copper pill, top-right */
    .woocommerce span.onsale,
    .woocommerce ul.products li.product .onsale {
      background: linear-gradient(135deg, #E8632C 0%, #F0884E 100%);
      color: #0A0A0C;
      font-family: 'Unbounded', sans-serif;
      font-weight: 800;
      font-size: 0.7rem;
      min-height: auto;
      min-width: auto;
      line-height: 1;
      padding: 7px 12px;
      border-radius: 100px;
      top: 14px;
      right: 14px;
      left: auto;
      margin: 0;
      position: absolute;
      z-index: 10;
    }

    /* ---- WooCommerce buttons → brand copper ---- */
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    .woocommerce a.button.alt,
    .woocommerce button.button.alt,
    .woocommerce-page a.button,
    .wc-block-components-button:not(.is-link) {
      background: linear-gradient(135deg, #E8632C 0%, #F0884E 100%) !important;
      color: #0A0A0C !important;
      border: none !important;
      border-radius: 50px !important;
      font-family: 'Inter', sans-serif;
      font-weight: 600 !important;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 0.85rem 1.8rem;
      min-height: 3rem;
      line-height: 1.2 !important;
      transition: all 0.3s ease;
    }
    .woocommerce a.button:hover,
    .woocommerce button.button:hover,
    .woocommerce input.button:hover,
    .woocommerce a.button.alt:hover,
    .wc-block-components-button:not(.is-link):hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 40px rgba(232, 99, 44, 0.35) !important;
      opacity: 1 !important;
    }
    .woocommerce .button.added::after { color: #0A0A0C; }

    /* ---- Cart & Checkout blocks ---- */
    .wc-block-cart,
    .wc-block-checkout,
    .woocommerce-cart .page-content,
    .woocommerce-checkout .page-content { color: var(--text-primary); }
    .wc-block-components-product-name,
    .wc-block-components-totals-item__label,
    .wc-block-components-order-summary-item__individual-prices,
    .wc-block-cart__totals-title,
    .wp-block-woocommerce-checkout-order-summary-block,
    .wc-block-components-title { color: var(--text-primary) !important; }
    .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--accent) !important; }

    /* ---- FIX: order-summary product name must read horizontally ----
       The "Résumé de la commande" item name was wrapping one letter per line
       (N / Y / R / I / X stacked) because the name cell was collapsing and the
       text broke per character. Force normal word-by-word wrapping and give the
       summary column a sane min-width so it can never collapse that far. */
    .wc-block-components-product-name,
    .wc-block-components-order-summary-item__description,
    .wc-block-components-order-summary-item__description *,
    .woocommerce-checkout-review-order-table .product-name,
    table.shop_table td.product-name {
      writing-mode: horizontal-tb !important;
      text-orientation: mixed !important;
      white-space: normal !important;
      word-break: normal !important;
      overflow-wrap: normal !important;
      word-wrap: normal !important;
      hyphens: none !important;
    }
    /* The name cell must be free to grow with the text, not pinned narrow. */
    .wc-block-components-order-summary-item__description {
      min-width: 0;
      flex: 1 1 auto;
    }

    /* Prevent checkout/cart block rows from collapsing or letting long text
       overlap each other. These selectors target the WooCommerce block markup
       used by the order summary, cart contents, and the "Voir la commande"
       preview area. */
    .wc-block-components-order-summary-item,
    .wc-block-cart-item,
    .wc-block-mini-cart-item {
      display: flex !important;
      align-items: flex-start !important;
      gap: 0.85rem !important;
      padding: 0.9rem 0 !important;
      margin: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    .wc-block-components-order-summary-item__image,
    .wc-block-cart-item__image,
    .wc-block-mini-cart-item__image {
      flex: 0 0 auto !important;
      align-self: flex-start !important;
      margin: 0 !important;
      width: 56px !important;
      max-width: 56px !important;
      height: 56px !important;
      object-fit: cover !important;
      display: block !important;
      border-radius: 8px !important;
    }
    .wc-block-components-order-summary-item__description,
    .wc-block-components-order-summary-item__product,
    .wc-block-cart-item__details,
    .wc-block-cart-item__product,
    .wc-block-mini-cart-item__details,
    .wc-block-mini-cart-item__product {
      min-width: 0 !important;
      flex: 1 1 0 !important;
      max-width: 100% !important;
      overflow: visible !important;
      width: auto !important;
      box-sizing: border-box !important;
    }
    .wc-block-components-order-summary-item__description,
    .wc-block-components-order-summary-item__name,
    .wc-block-components-product-name,
    .wc-block-cart-item__name,
    .wc-block-cart-item__details,
    .wc-block-cart-item__details *,
    .wc-block-mini-cart-item__details,
    .wc-block-mini-cart-item__details * {
      line-height: 1.45 !important;
      white-space: normal !important;
      overflow-wrap: break-word !important;
      word-break: normal !important;
      text-wrap: pretty !important;
    }
    .wc-block-components-order-summary-item__individual-prices,
    .wc-block-components-order-summary-item__price,
    .wc-block-cart-item__price,
    .wc-block-mini-cart-item__price {
      flex: 0 0 auto !important;
      min-width: 0 !important;
      white-space: nowrap !important;
      text-align: right !important;
      margin-left: 0.5rem !important;
      padding-left: 0.5rem !important;
      overflow: visible !important;
      align-self: flex-start !important;
    }
    .wc-block-components-order-summary-item__description > *,
    .wc-block-cart-item__details > *,
    .wc-block-mini-cart-item__details > * {
      margin: 0 !important;
      padding: 0 !important;
    }

    /* Fix the action row used by cart/checkout blocks so the inline link
       (e.g. "Voir la commande") is not clipped or squeezed under the button. */
    .wc-block-cart__submit-container,
    .wc-block-cart__footer,
    .wc-block-checkout__actions,
    .wc-block-components-checkout-place-order-button__row,
    .wc-block-components-checkout-actions {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 0.75rem 1rem !important;
      width: 100% !important;
      min-width: 0 !important;
      overflow: visible !important;
    }
    .wc-block-cart__submit-container > *,
    .wc-block-cart__footer > *,
    .wc-block-checkout__actions > *,
    .wc-block-components-checkout-place-order-button__row > *,
    .wc-block-components-checkout-actions > * {
      flex: 0 1 auto !important;
      min-width: 0 !important;
      max-width: 100% !important;
    }
    .wc-block-cart__submit-container a,
    .wc-block-cart__submit-container .wc-block-components-button,
    .wc-block-checkout__actions a,
    .wc-block-checkout__actions .wc-block-components-button,
    .wc-block-components-checkout-place-order-button__row a,
    .wc-block-components-checkout-place-order-button__row .wc-block-components-button,
    .wc-block-components-checkout-actions a,
    .wc-block-components-checkout-actions .wc-block-components-button {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      line-height: 1.3 !important;
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
      text-wrap: balance !important;
      word-break: normal !important;
      hyphens: none !important;
      text-decoration: none !important;
    }
    .wc-block-cart__submit-container a,
    .wc-block-checkout__actions a,
    .wc-block-components-checkout-place-order-button__row a,
    .wc-block-components-checkout-actions a {
      min-height: auto !important;
      height: auto !important;
      max-width: 100% !important;
      font-size: 0.95rem !important;
      color: var(--text-primary) !important;
      opacity: 0.95;
    }
    .wc-block-cart__submit-container a:hover,
    .wc-block-checkout__actions a:hover,
    .wc-block-components-checkout-place-order-button__row a:hover,
    .wc-block-components-checkout-actions a:hover {
      color: var(--accent) !important;
      opacity: 1;
    }
    /* Keep the order-summary / sidebar column from collapsing to a tiny width.
       On mobile the sidebar stacks full-width, so this floor is desktop-only safe. */
    .wp-block-woocommerce-checkout-order-summary-block,
    .wc-block-checkout__sidebar,
    .wc-block-components-order-summary {
      min-width: min(260px, 100%);
    }

    /* Inputs / fields on dark */
    .wc-block-components-text-input input,
    .wc-block-components-text-input input.has-error,
    .woocommerce form .form-row input.input-text,
    .woocommerce form .form-row textarea,
    .woocommerce form .form-row select,
    .select2-container .select2-selection {
      background: var(--bg-surface) !important;
      border: 1px solid var(--border) !important;
      color: var(--text-primary) !important;
      border-radius: 10px !important;
    }
    .wc-block-components-text-input label,
    .woocommerce form .form-row label { color: var(--text-secondary) !important; }

    /* Cards / summary panels */
    .wc-block-components-sidebar,
    .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
    .wp-block-woocommerce-checkout-totals-block,
    table.shop_table {
      background: var(--bg-surface) !important;
      border: 1px solid var(--border) !important;
      border-radius: 16px !important;
    }
    table.shop_table,
    .woocommerce table.shop_table td,
    .woocommerce table.shop_table th { color: var(--text-primary); border-color: var(--border) !important; }

    /* WooCommerce notices */
    .woocommerce-message,
    .woocommerce-info,
    .wc-block-components-notice-banner {
      background: var(--bg-surface) !important;
      color: var(--text-primary) !important;
      border-top: 3px solid var(--accent) !important;
      border-radius: 10px;
    }
    .woocommerce-message a, .woocommerce-info a { color: var(--accent) !important; }

    /* RTL: flip sale badge to top-left */
    body.rtl .woocommerce span.onsale,
    body.rtl .woocommerce ul.products li.product .onsale { right: auto; left: 14px; }
    body.rtl .page-content ul { padding-left: 0; padding-right: 1.4rem; }

/* ============================================================
   3D AUTO-ROTATING PRODUCT SHOWCASE (.showcase3d)
   Dark stage, copper accent only. Built for 60fps: animates only
   transform + opacity (GPU), fixed stage height so there's no CLS.
   ============================================================ */
.showcase3d {
  background-color: #0A0A0C;
  padding: 7rem 2rem 6rem;
  text-align: center;
  border-top: 1px solid var(--border);
  overflow: hidden;
}
.showcase3d-head { max-width: 720px; margin: 0 auto 3rem; }
.s3d-eyebrow {
  font-size: 0.8rem; letter-spacing: 4px; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 1rem;
}
.showcase3d-head h2 {
  background: linear-gradient(135deg, #F4F4F6 0%, #C9CCD1 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---- The 3D stage ---- */
.s3d-stage {
  position: relative;
  max-width: 560px;
  height: clamp(300px, 42vw, 500px); /* fixed height → no layout shift */
  margin: 0 auto;
  perspective: 1200px;
}
/* In the hero, the stage fills the right column (which already carries the
   responsive height/order rules), replacing the old static product image. */
.hero-product .s3d-stage {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
}
.s3d-track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* soft copper bloom behind the stage */
.s3d-stage::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 70%; height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(232,99,44,0.30) 0%, rgba(232,99,44,0.10) 38%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

/* ---- Each card: the Y-axis flip layer ---- */
.s3d-card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  /* waiting state: rotated off to the right, invisible */
  opacity: 0;
  transform: rotateY(90deg);
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* fast flip */
  z-index: 1;
  will-change: transform, opacity;
}
.s3d-card.is-active {
  opacity: 1;
  transform: rotateY(0deg);
  z-index: 2;
}
.s3d-card.is-out { /* outgoing: flip out to the left */
  opacity: 0;
  transform: rotateY(-90deg);
  z-index: 1;
}

/* ---- Parallax tilt layer (follows the mouse, active card only) ---- */
.s3d-figure {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transform: rotateY(var(--s3d-tilt, 0deg)) rotateX(var(--s3d-tiltx, 0deg));
  transition: transform 0.3s ease-out;
}

/* ---- Image wrapper: idle float + copper shine sweep ---- */
.s3d-imgwrap {
  position: relative;
  width: 78%;
  height: 78%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.s3d-card.is-active .s3d-imgwrap { animation: s3dFloat 4s ease-in-out infinite; }
.s3d-imgwrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55)) drop-shadow(0 12px 40px rgba(232,99,44,0.28));
}
/* copper shine sweep gliding across the active product */
.s3d-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(240,136,78,0.0) 44%,
    rgba(240,136,78,0.45) 50%,
    rgba(255,233,214,0.6) 52%,
    rgba(232,99,44,0.35) 56%,
    transparent 64%);
  background-size: 280% 280%;
  mix-blend-mode: screen;
  opacity: 0;
}
.s3d-card.is-active .s3d-shine { opacity: 0.9; animation: s3dSweep 5s ease-in-out infinite; }

@keyframes s3dFloat {
  0%, 100% { transform: translateY(8px); }
  50%      { transform: translateY(-8px); }
}
@keyframes s3dSweep {
  0%   { background-position: 140% 0%; }
  55%  { background-position: -40% 100%; }
  100% { background-position: -40% 100%; }
}

/* ---- Name + price ---- */
.s3d-meta {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-height: 3.5rem; /* reserve space → no shift when text changes */
}
.s3d-name {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #F4F4F6;
  letter-spacing: -0.5px;
  transition: color 0.3s ease;
}
.s3d-name:hover { color: var(--accent); }
.s3d-price { color: var(--accent); font-weight: 700; font-size: 1.05rem; }

/* ---- Dots ---- */
.s3d-dots { display: flex; justify-content: center; gap: 0.7rem; margin-top: 1.75rem; }
.s3d-dot {
  width: 10px; height: 10px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: transparent;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.s3d-dot:hover { transform: scale(1.2); }
.s3d-dot.active { background: var(--accent); }

/* ---- Responsive: lighter on mobile ---- */
@media (max-width: 640px) {
  .showcase3d { padding: 4.5rem 1.25rem 4rem; }
  .s3d-imgwrap { width: 86%; height: 86%; }
  /* gentler float on small screens */
  @keyframes s3dFloat { 0%,100% { transform: translateY(4px); } 50% { transform: translateY(-4px); } }
}

/* ---- Accessibility: reduced motion → simple fade, no 3D ---- */
@media (prefers-reduced-motion: reduce) {
  .s3d-card {
    transform: none !important;
    transition: opacity 0.5s ease !important;
  }
  .s3d-card.is-out { opacity: 0; }
  .s3d-card.is-active { opacity: 1; }
  .s3d-card.is-active .s3d-imgwrap { animation: none; }
  .s3d-card.is-active .s3d-shine { animation: none; opacity: 0; }
  .s3d-figure { transform: none !important; transition: none !important; }
}

/* ============================================================
   HERO CINEMATIC VIDEO (.hero-video)
   Replaces the rotating product visual on the right of the hero.
   Borderless & panel-free: it floats on the hero's single unified dark
   background and shared copper glow (defined on .hero / .hero::before).
   Animates only opacity+transform (GPU) → 60fps, no layout shift
   (the .hero-product cell already has fixed responsive heights).
   ============================================================ */
.hero-video {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* No per-video glow or card: the hero's single shared copper glow lights it,
   and the video floats borderless on the unified dark background. */
.hero-video-el {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fill the area, no letterboxing */
  display: block;
  background: transparent;    /* no panel — the video's dark frames blend in */
  /* Feather the edges so the rectangle melts into the dark scene (floating). */
  -webkit-mask-image: radial-gradient(ellipse 94% 94% at 50% 50%, #000 80%, transparent 100%);
          mask-image: radial-gradient(ellipse 94% 94% at 50% 50%, #000 80%, transparent 100%);
  animation: heroVideoIn 1s ease-out both; /* fade in + scale 0.98 → 1 */
}
@keyframes heroVideoIn {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

/* Accessibility: no entrance animation under reduced motion (video stays). */
@media (prefers-reduced-motion: reduce) {
  .hero-video-el { animation: none; opacity: 1; transform: none; }
}