/*
Theme Name: Paahde
Theme URI: https://paahde.com
Author: Paahde
Description: Standalone editorial/shop theme for Paahde coffee. Homepage + WooCommerce (shop, product, cart, checkout, account) fully branded.
Version: 1.0
Text Domain: paahde
*/

/* Google Fonts moved to header.php as non-blocking <link> — faster FCP */



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

    :root {
      --roast-black: #161914;
      --burnt-clay: #C96B5C;
      --acid-yellow: #D9D22B;
      --mist-pink: #E7B7B0;
      --vapor-lilac: #C88BE8;
      --forest: #181F17;
      --cream: #F5F0E8;
      --muted: rgba(245, 240, 232, 0.62);
      --ff-heading: 'Bebas Neue', sans-serif;
      --ff-sub: 'Libre Baskerville', serif;
      --ff-body: 'IBM Plex Sans', sans-serif;
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
      max-width: 100%;
    }

    body {
      background: var(--roast-black);
      color: var(--cream);
      font-family: var(--ff-body);
      font-weight: 300;
      overflow-x: hidden;
      max-width: 100%;
      width: 100%;
    }

    /* GRAIN OVERLAY */
    body::after {
      content: '';
      position: fixed;
      top: -50%; left: -50%;
      width: 200%; height: 200%;
      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 9999;
      opacity: 0.04;
      animation: grain 8s steps(10) infinite;
      will-change: transform; /* force GPU layer — fixes non-composited animation */
    }

    @keyframes grain {
      0%   { transform: translate(0,0); }
      10%  { transform: translate(-2%,-3%); }
      20%  { transform: translate(3%,1%); }
      30%  { transform: translate(-1%,4%); }
      40%  { transform: translate(2%,-2%); }
      50%  { transform: translate(-3%,3%); }
      60%  { transform: translate(1%,-4%); }
      70%  { transform: translate(-2%,2%); }
      80%  { transform: translate(3%,-1%); }
      90%  { transform: translate(-1%,3%); }
    }

    /* ─── NAV ─────────────────────────────────────────────── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 200;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      column-gap: 24px;
      padding: 28px 52px;
      transition: background 0.4s, backdrop-filter 0.4s;
    }

    .nav-logo { justify-self: start; }
    .nav-links { justify-self: center; }
    .nav-right {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 28px;
    }

    nav.scrolled {
      background: rgba(22, 25, 20, 0.93);
      backdrop-filter: blur(12px);
    }

    .nav-logo {
      font-family: var(--ff-heading);
      font-size: 26px;
      letter-spacing: 0.2em;
      color: var(--cream);
      text-decoration: none;
    }

    .nav-links {
      display: flex;
      gap: 44px;
      list-style: none;
    }

    .nav-links a {
      font-size: 11px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s;
    }

    .nav-links a:hover { color: var(--cream); }

    .nav-cta {
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--roast-black);
      background: var(--acid-yellow);
      padding: 11px 26px;
      text-decoration: none;
      transition: background 0.2s, transform 0.2s;
    }

    .nav-cta:hover { background: var(--cream); transform: translateY(-1px); }

    .nav-cart {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      color: var(--cream);
      text-decoration: none;
    }

    .nav-cart svg { width: 100%; height: 100%; }

    .nav-cart-count {
      position: absolute;
      top: -8px;
      right: -10px;
      min-width: 17px;
      height: 17px;
      border-radius: 50%;
      background: var(--acid-yellow);
      color: var(--roast-black);
      font-size: 10px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      transition: transform 0.2s;
    }

    .nav-cart-count.bump { transform: scale(1.3); }

    .nav-right { display: flex; align-items: center; }

    /* ─── HERO ────────────────────────────────────────────── */
    #hero {
      height: 86vh;
      min-height: 560px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 55% 60% at 25% 65%, rgba(201,107,92,0.14) 0%, transparent 70%),
        radial-gradient(ellipse 45% 55% at 75% 25%, rgba(200,139,232,0.09) 0%, transparent 60%),
        radial-gradient(ellipse 30% 40% at 60% 80%, rgba(217,210,43,0.05) 0%, transparent 50%),
        var(--roast-black);
    }

    .hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 0 24px;
      max-width: 1100px;
    }

    .hero-title {
      font-family: var(--ff-heading);
      font-size: clamp(72px, 13vw, 180px);
      line-height: 0.92;
      letter-spacing: 0.03em;
      color: var(--cream);
      opacity: 0;
      animation: fadeUp 1.1s 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
    }

    .hero-title .accent { color: var(--burnt-clay); }

    .hero-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: center;
      margin-top: 52px;
      opacity: 0;
      animation: fadeUp 1s 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      font-size: 11px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--roast-black);
      background: var(--acid-yellow);
      padding: 18px 42px;
      text-decoration: none;
      transition: background 0.25s, color 0.25s, transform 0.2s;
      border: none;
      cursor: pointer;
    }

    .btn-primary:hover { background: var(--cream); transform: translateY(-2px); }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      font-size: 11px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--cream);
      border: 1px solid rgba(245,240,232,0.3);
      padding: 18px 42px;
      text-decoration: none;
      transition: border-color 0.25s, background 0.25s;
    }

    .btn-ghost:hover { border-color: var(--cream); background: rgba(245,240,232,0.06); }

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

    /* ─── TICKER ──────────────────────────────────────────── */
    .ticker-wrap {
      background: var(--burnt-clay);
      padding: 15px 0;
      overflow: hidden;
      white-space: nowrap;
    }

    .ticker-track {
      display: inline-flex;
      animation: ticker 35s linear infinite;
    }

    .ticker-item {
      font-family: var(--ff-heading);
      font-size: 17px;
      letter-spacing: 0.18em;
      color: var(--roast-black);
      padding: 0 56px;
    }

    .ticker-sep { color: rgba(22,25,20,0.35); }

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

    /* ─── SHARED LAYOUT ───────────────────────────────────── */
    .container { max-width: 1280px; margin: 0 auto; }

    .section-tag {
      display: block;
      font-size: 11px;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--burnt-clay);
      margin-bottom: 28px;
    }

    /* ─── SHOP / PRODUCTS ─────────────────────────────────── */
    #shop {
      padding: 90px 52px 130px;
      background: var(--roast-black);
    }

    .shop-h {
      font-family: var(--ff-heading);
      font-size: clamp(52px, 7vw, 90px);
      letter-spacing: 0.03em;
      line-height: 1;
      margin-bottom: 56px;
    }

    .card-stack { display: flex; flex-direction: column; gap: 3px; }

    .product-card {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      min-height: 540px;
      position: relative;
      overflow: hidden;
    }

    .product-card.reverse .product-vis { order: 2; }
    .product-card.reverse .product-info { order: 1; }

    /* Visual panels */
    .product-vis {
      position: relative;
      overflow: hidden;
      min-height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .vis-clay {
      background: radial-gradient(circle at 35% 65%, #C96B5C 0%, #7A3525 45%, #1E100D 100%);
    }

    .vis-dark {
      background:
        radial-gradient(circle at 65% 35%, #6B3A9B 0%, #291244 40%, #0B0810 100%),
        radial-gradient(circle at 20% 80%, rgba(200,139,232,0.3) 0%, transparent 50%);
    }

    .vis-yellow {
      background: radial-gradient(circle at 50% 40%, #D9D22B 0%, #706E0E 35%, #141300 100%);
    }

    .vis-texture {
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)' opacity='0.08'/%3E%3C/svg%3E");
      mix-blend-mode: overlay;
      pointer-events: none;
    }

    .vis-ghost-text {
      position: absolute;
      bottom: 28px;
      left: 32px;
      right: 32px;
      font-family: var(--ff-heading);
      font-size: clamp(40px, 6vw, 72px);
      letter-spacing: 0.06em;
      color: rgba(255,255,255,0.05);
      line-height: 1;
      user-select: none;
      pointer-events: none;
      z-index: 1;
    }

    /* Product package image — swap src later, keep this class/sizing */
    .product-img {
      position: relative;
      z-index: 2;
      max-width: 62%;
      max-height: 70%;
      object-fit: contain;
      filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
    }

    .vis-badge {
      position: absolute;
      top: 28px;
      right: 28px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--cream);
      border: 1px solid rgba(245,240,232,0.3);
      padding: 8px 16px;
      z-index: 2;
    }

    .vis-number {
      position: absolute;
      top: 28px;
      left: 32px;
      font-family: var(--ff-heading);
      font-size: 100px;
      color: rgba(255,255,255,0.05);
      line-height: 1;
    }

    /* VINYL RECORD (corner accent on shop cards) */
    .vinyl {
      position: absolute;
      bottom: 24px;
      right: 24px;
      width: 130px;
      height: 130px;
      border-radius: 50%;
      background:
        repeating-radial-gradient(circle at center,
          rgba(0,0,0,0.55) 0px, rgba(0,0,0,0.55) 1px,
          rgba(255,255,255,0.03) 1px, rgba(255,255,255,0.03) 4px);
      background-color: #0b0b0b;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 16px 40px rgba(0,0,0,0.5);
      z-index: 1;
      animation: spin 9s linear infinite;
      will-change: transform; /* GPU compositing */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .vinyl-label {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
      position: relative;
    }

    .vinyl-label::after {
      content: '';
      position: absolute;
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--roast-black);
    }

    .vinyl-label .vlabel-brand {
      font-family: var(--ff-heading);
      font-size: 8px;
      letter-spacing: 0.12em;
      line-height: 1;
    }

    .vinyl-label .vlabel-num {
      font-size: 6px;
      letter-spacing: 0.15em;
      margin-top: 3px;
      opacity: 0.6;
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    .theme-clay .vinyl-label { background: var(--burnt-clay); color: var(--roast-black); }
    .theme-lilac .vinyl-label { background: var(--vapor-lilac); color: var(--roast-black); }
    .theme-yellow .vinyl-label { background: var(--acid-yellow); color: var(--roast-black); }

    /* Info panels */
    .product-info {
      padding: 52px 56px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 22px;
      background: var(--roast-black);
    }

    .p-origin {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.3em;
      text-transform: uppercase;
    }

    .p-name {
      font-family: var(--ff-heading);
      font-size: clamp(36px, 3.6vw, 54px);
      letter-spacing: 0.025em;
      line-height: 1;
    }

    .p-tagline {
      font-family: var(--ff-sub);
      font-style: italic;
      font-size: 16px;
      color: var(--cream);
      opacity: 0.85;
    }

    .p-rule { height: 1px; width: 48px; }

    .p-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px 24px;
    }

    .meta-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 5px;
    }

    .meta-val {
      font-size: 15px;
      color: var(--cream);
    }

    .p-chips { display: flex; flex-wrap: wrap; gap: 10px; }

    .chip {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.04em;
      padding: 7px 16px;
      border: 1px solid;
    }

    .p-music-block {
      padding: 18px 22px;
      border-left: 3px solid;
    }

    .music-tag {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .music-when {
      font-family: var(--ff-sub);
      font-style: italic;
      font-size: 15px;
      line-height: 1.7;
      color: var(--cream);
    }

    /* ── WooCommerce-style cart form ── */
    .wc-form {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: stretch;
      padding-top: 8px;
    }

    .wc-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .wc-field label {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .wc-select {
      -webkit-appearance: none;
      -moz-appearance: none;
      background-color: rgba(0,0,0,0.35);
      border: 1px solid rgba(245,240,232,0.18);
      color: var(--cream);
      font-family: var(--ff-body);
      font-size: 14px;
      padding: 13px 16px;
      min-width: 170px;
      appearance: none;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23F5F0E8'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
    }

    /* Native dropdown list uses light bg — force dark, readable option text */
    .wc-select option {
      color: var(--roast-black);
      background: var(--cream);
    }

    .wc-select:focus,
    .wc-select:active,
    .wc-select:checked {
      background-color: rgba(0,0,0,0.35);
      color: var(--cream);
      outline: 1px solid var(--burnt-clay);
    }

    .wc-qty {
      background: rgba(245,240,232,0.04);
      border: 1px solid rgba(245,240,232,0.18);
      color: var(--cream);
      font-family: var(--ff-body);
      font-size: 14px;
      padding: 13px 14px;
      width: 84px;
      text-align: center;
    }

    .wc-submit-group {
      display: flex;
      align-items: flex-end;
      gap: 14px;
      margin-left: auto;
      flex-wrap: wrap;
    }

    .p-price-tag {
      font-family: var(--ff-heading);
      font-size: 34px;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .p-price-tag sub {
      font-family: var(--ff-body);
      font-size: 11px;
      letter-spacing: 0.1em;
      opacity: 0.45;
      vertical-align: middle;
    }

    .single_add_to_cart_button {
      font-family: var(--ff-body);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--roast-black);
      background: var(--acid-yellow);
      padding: 16px 38px;
      border: none;
      cursor: pointer;
      transition: background 0.25s, transform 0.2s;
      white-space: nowrap;
    }

    .single_add_to_cart_button:disabled {
      opacity: 0.7;
      cursor: default;
    }

    .single_add_to_cart_button.loading {
      background: rgba(245,240,232,0.18);
      color: var(--cream);
      cursor: default;
    }

    .single_add_to_cart_button.loading:hover {
      background: rgba(245,240,232,0.18);
      transform: none;
    }

    .single_add_to_cart_button:hover { background: var(--cream); transform: translateY(-2px); }

    .single_add_to_cart_button.added::after { content: ' ✓'; }

    /* Card color themes */
    .theme-clay .p-origin, .theme-clay .music-tag { color: var(--burnt-clay); }
    .theme-clay .p-rule { background: var(--burnt-clay); }
    .theme-clay .chip { border-color: var(--burnt-clay); color: var(--burnt-clay); }
    .theme-clay .p-music-block { border-color: var(--burnt-clay); background: rgba(201,107,92,0.07); }

    .theme-lilac .p-origin, .theme-lilac .music-tag { color: var(--vapor-lilac); }
    .theme-lilac .p-rule { background: var(--vapor-lilac); }
    .theme-lilac .chip { border-color: var(--vapor-lilac); color: var(--vapor-lilac); }
    .theme-lilac .p-music-block { border-color: var(--vapor-lilac); background: rgba(200,139,232,0.07); }

    .theme-yellow .p-origin, .theme-yellow .music-tag { color: var(--acid-yellow); }
    .theme-yellow .p-rule { background: var(--acid-yellow); }
    .theme-yellow .chip { border-color: var(--acid-yellow); color: var(--acid-yellow); }
    .theme-yellow .p-music-block { border-color: var(--acid-yellow); background: rgba(217,210,43,0.06); }

    /* ─── MANIFESTO ───────────────────────────────────────── */
    #manifesto {
      padding: 130px 52px;
      background: var(--forest);
      position: relative;
      overflow: hidden;
    }

    #manifesto .bg-word {
      position: absolute;
      font-family: var(--ff-heading);
      font-size: 28vw;
      color: rgba(245,240,232,0.018);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      white-space: nowrap;
      user-select: none;
    }

    .manifesto-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .manifesto-h {
      font-family: var(--ff-heading);
      font-size: clamp(58px, 8vw, 110px);
      line-height: 0.93;
      letter-spacing: 0.025em;
    }

    .manifesto-h .y { color: var(--acid-yellow); }

    .manifesto-right-block {
      padding-left: 60px;
      border-left: 1px solid rgba(245,240,232,0.1);
    }

    .manifesto-pullquote {
      font-family: var(--ff-sub);
      font-style: italic;
      font-size: 19px;
      line-height: 1.75;
      color: var(--cream);
      margin-bottom: 28px;
    }

    .manifesto-body {
      font-size: 15px;
      line-height: 1.95;
      color: var(--muted);
    }

    .manifesto-tags {
      display: flex;
      gap: 12px;
      margin-top: 32px;
      flex-wrap: wrap;
    }

    .manifesto-tag {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      padding: 9px 22px;
      border: 1px solid rgba(245,240,232,0.18);
      color: var(--cream);
    }

    .values-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid rgba(245,240,232,0.08);
      margin-top: 90px;
    }

    .value-cell { padding: 44px 40px; border-right: 1px solid rgba(245,240,232,0.08); }
    .value-cell:last-child { border-right: none; }

    .val-num {
      font-family: var(--ff-heading);
      font-size: 64px;
      color: var(--burnt-clay);
      opacity: 0.25;
      line-height: 1;
      margin-bottom: 20px;
    }

    .val-title {
      font-family: var(--ff-sub);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.04em;
      margin-bottom: 12px;
    }

    .val-desc { font-size: 14px; line-height: 1.85; color: var(--muted); }

    /* ─── CULTURE / NOW PLAYING ───────────────────────────── */
    #culture {
      padding: 130px 52px;
      background: var(--roast-black);
      border-top: 1px solid rgba(245,240,232,0.06);
    }

    .culture-head {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
    }

    .live-dot {
      width: 9px; height: 9px;
      background: var(--burnt-clay);
      border-radius: 50%;
      animation: livePulse 2.2s ease-in-out infinite;
    }

    @keyframes livePulse {
      0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(201,107,92,0.5); }
      50%      { opacity: 0.6; box-shadow: 0 0 0 6px rgba(201,107,92,0); }
    }

    .culture-h {
      font-family: var(--ff-heading);
      font-size: clamp(52px, 7vw, 96px);
      letter-spacing: 0.03em;
      line-height: 1;
      max-width: 900px;
      margin-bottom: 72px;
    }

    .playlist-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }

    .pl-card {
      position: relative;
      overflow: hidden;
      aspect-ratio: 4/5;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 36px;
      cursor: pointer;
      transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
    }

    .pl-card:hover { transform: scale(0.985); }

    .pl-bg-clay {
      background: radial-gradient(circle at 40% 10%, rgba(201,107,92,0.6) 0%, rgba(22,25,20,0.97) 65%), var(--roast-black);
    }

    .pl-bg-lilac {
      background: radial-gradient(circle at 60% 10%, rgba(200,139,232,0.5) 0%, rgba(22,25,20,0.97) 65%), var(--roast-black);
    }

    .pl-bg-yellow {
      background: radial-gradient(circle at 50% 10%, rgba(217,210,43,0.4) 0%, rgba(22,25,20,0.97) 65%), var(--roast-black);
    }

    /* Rolling vinyl — large, behind text, visible groove disc */
    .pl-vinyl {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 85%;
      aspect-ratio: 1 / 1;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background:
        repeating-radial-gradient(circle at center,
          rgba(255,255,255,0.10) 0px, rgba(255,255,255,0.10) 1.5px,
          rgba(0,0,0,0.18) 1.5px, rgba(0,0,0,0.18) 9px);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.06),
        inset 0 0 60px rgba(0,0,0,0.5);
      z-index: 0;
      animation: spin 14s linear infinite;
      will-change: transform; /* GPU compositing */
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pl-vinyl-label {
      width: 30%;
      height: 30%;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: relative;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
    }

    .pl-vinyl-label::after {
      content: '';
      position: absolute;
      width: 8%;
      height: 8%;
      border-radius: 50%;
      background: var(--roast-black);
    }

    .pl-vinyl-label .vlabel-brand {
      font-family: var(--ff-heading);
      font-size: clamp(11px, 1.4vw, 18px);
      letter-spacing: 0.14em;
      line-height: 1;
      color: var(--roast-black);
    }

    .pl-vinyl-label .vlabel-num {
      font-size: clamp(7px, 0.8vw, 10px);
      letter-spacing: 0.18em;
      margin-top: 4px;
      color: rgba(22,25,20,0.6);
    }

    .pl-content {
      position: relative;
      z-index: 1;
    }

    .pl-bg-clay .pl-vinyl-label { background: var(--burnt-clay); }
    .pl-bg-lilac .pl-vinyl-label { background: var(--vapor-lilac); }
    .pl-bg-yellow .pl-vinyl-label { background: var(--acid-yellow); }

    .pl-brew {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px;
    }

    .pl-name {
      font-family: var(--ff-heading);
      font-size: 40px;
      letter-spacing: 0.05em;
      line-height: 1;
      margin-bottom: 10px;
    }

    .pl-vibe {
      font-family: var(--ff-sub);
      font-style: italic;
      font-size: 14px;
      color: var(--cream);
      opacity: 0.8;
      line-height: 1.6;
      margin-bottom: 24px;
    }

    .pl-link {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--cream);
      text-decoration: none;
      border-bottom: 1px solid rgba(245,240,232,0.25);
      padding-bottom: 5px;
      width: fit-content;
      transition: border-color 0.2s;
    }

    .pl-link:hover { border-color: var(--cream); }


    .teaser-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3px;
    }

    .teaser-card {
      position: relative;
      min-height: 360px;
      padding: 56px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
      text-decoration: none;
      transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    }

    .teaser-card:hover { transform: scale(0.99); }

    .teaser-culture {
      background:
        radial-gradient(circle at 70% 20%, rgba(200,139,232,0.35) 0%, transparent 55%),
        radial-gradient(circle at 20% 90%, rgba(201,107,92,0.25) 0%, transparent 50%),
        var(--roast-black);
    }

    .teaser-about {
      background:
        radial-gradient(circle at 30% 15%, rgba(217,210,43,0.18) 0%, transparent 55%),
        radial-gradient(circle at 80% 90%, rgba(201,107,92,0.3) 0%, transparent 55%),
        var(--forest);
    }

    .teaser-eyebrow {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 14px;
    }

    .teaser-h {
      font-family: var(--ff-heading);
      font-size: clamp(40px, 5vw, 64px);
      letter-spacing: 0.03em;
      line-height: 1.02;
      color: var(--cream);
      margin-bottom: 16px;
    }

    .teaser-desc {
      font-family: var(--ff-sub);
      font-style: italic;
      font-size: 14px;
      color: var(--muted);
      max-width: 380px;
      margin-bottom: 24px;
    }

    .teaser-link {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--cream);
      border-bottom: 1px solid rgba(245,240,232,0.3);
      padding-bottom: 6px;
      width: fit-content;
    }

    /* ─── NEWSLETTER ──────────────────────────────────────── */
    #newsletter-inner {
      padding: 90px 52px;
      background: var(--burnt-clay);
    }

    .nl-inner { max-width: 640px; margin: 0 auto; text-align: center; }

    .nl-inner h2 {
      font-family: var(--ff-heading);
      font-size: clamp(52px, 7vw, 88px);
      letter-spacing: 0.03em;
      color: var(--roast-black);
      line-height: 0.95;
      margin-bottom: 16px;
    }

    .nl-sub {
      font-size: 15px;
      color: rgba(22,25,20,0.7);
      margin-bottom: 44px;
      line-height: 1.7;
    }

    .nl-form { display: flex; gap: 0; }

    .nl-input {
      flex: 1;
      padding: 18px 24px;
      background: rgba(22,25,20,0.12);
      border: 1px solid rgba(22,25,20,0.25);
      border-right: none;
      color: var(--roast-black);
      font-family: var(--ff-body);
      font-size: 14px;
      outline: none;
    }

    .nl-input::placeholder { color: rgba(22,25,20,0.5); }

    .nl-btn {
      padding: 18px 36px;
      background: var(--roast-black);
      color: var(--cream);
      font-family: var(--ff-body);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      transition: background 0.2s;
    }

    .nl-btn:hover { background: #2a3228; }

    /* ── WPForms (id=3417): restyle to match .nl-input / .nl-btn ──
       High-specificity #wpforms-form-3417 selectors are needed because
       WPForms enqueues its own CSS which otherwise wins the cascade. */

    #wpforms-3417 { width: 100% !important; max-width: none !important; margin: 0 !important; }

    #wpforms-form-3417 {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: stretch !important;
      gap: 0 !important;
      width: 100% !important;
    }

    /* Hide labels/descriptions/required marks/page indicators —
       our heading + placeholder already explain the form */
    #wpforms-form-3417 .wpforms-field-label,
    #wpforms-form-3417 .wpforms-field-description,
    #wpforms-form-3417 .wpforms-field-sublabel,
    #wpforms-form-3417 .wpforms-required-label,
    #wpforms-form-3417 label {
      display: none !important;
    }

    #wpforms-form-3417 .wpforms-field-container {
      flex: 1 1 auto !important;
      width: auto !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    #wpforms-form-3417 .wpforms-field {
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    #wpforms-form-3417 .wpforms-field input[type="email"],
    #wpforms-form-3417 .wpforms-field input[type="text"] {
      display: block !important;
      width: 100% !important;
      max-width: none !important;
      height: 56px !important;
      padding: 0 24px !important;
      background: rgba(22,25,20,0.12) !important;
      border: 1px solid rgba(22,25,20,0.25) !important;
      border-right: none !important;
      color: var(--roast-black) !important;
      font-family: var(--ff-body) !important;
      font-size: 14px !important;
      line-height: 56px !important;
      outline: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
    }

    #wpforms-form-3417 .wpforms-field input::placeholder {
      color: rgba(22,25,20,0.5) !important;
    }

    #wpforms-form-3417 .wpforms-submit-container {
      width: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      text-align: left !important;
    }

    #wpforms-form-3417 button.wpforms-submit {
      display: block !important;
      height: 56px !important;
      padding: 0 36px !important;
      margin: 0 !important;
      background: var(--roast-black) !important;
      color: var(--cream) !important;
      font-family: var(--ff-body) !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      letter-spacing: 0.25em !important;
      text-transform: uppercase !important;
      border: none !important;
      border-radius: 0 !important;
      cursor: pointer !important;
      transition: background 0.2s !important;
      white-space: nowrap !important;
      width: 100% !important;
    }

    #wpforms-form-3417 button.wpforms-submit:hover { background: #2a3228 !important; }

    /* Success / error / validation messages — dark text on the clay bg */
    #wpforms-confirmation-3417,
    .nl-form .wpforms-confirmation-container,
    .nl-form .wpforms-confirmation-container-full,
    #wpforms-form-3417 .wpforms-error-container,
    #wpforms-form-3417 .wpforms-field-description-error,
    #wpforms-form-3417 label.wpforms-error {
      width: 100% !important;
      margin-top: 16px !important;
      font-size: 13px !important;
      font-family: var(--ff-body) !important;
      color: var(--roast-black) !important;
      text-align: center !important;
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
      display: block !important;
    }

    @media (max-width: 768px) {
      #wpforms-form-3417 { flex-direction: column !important; }
      #wpforms-form-3417 .wpforms-field-container,
      #wpforms-form-3417 .wpforms-submit-container {
        width: 100% !important;
        flex: 1 1 100% !important;
      }
      #wpforms-form-3417 .wpforms-field input[type="email"],
      #wpforms-form-3417 .wpforms-field input[type="text"] {
        border-right: 1px solid rgba(22,25,20,0.25) !important;
      }
      #wpforms-form-3417 button.wpforms-submit { width: 100% !important; }
    }


    /* ─── FOOTER ──────────────────────────────────────────── */
    footer { padding: 88px 52px 40px; background: var(--roast-black); border-top: 1px solid rgba(245,240,232,0.05); }

    .footer-cols {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 60px;
      padding-bottom: 72px;
      border-bottom: 1px solid rgba(245,240,232,0.05);
      margin-bottom: 36px;
    }

    .f-brand-name {
      display: block;
      font-family: var(--ff-heading);
      font-size: 52px;
      letter-spacing: 0.12em;
      margin-bottom: 16px;
    }

    .f-brand-tag { font-size: 14px; line-height: 1.85; color: var(--muted); max-width: 270px; }

    .f-col-head {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--burnt-clay);
      margin-bottom: 28px;
      display: block;
    }

    .f-col ul { list-style: none; }
    .f-col ul li { margin-bottom: 13px; }

    .f-col ul a {
      font-size: 15px;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s;
    }

    .f-col ul a:hover { color: var(--cream); }

    .footer-bottom { display: flex; justify-content: space-between; align-items: center; }

    .f-copy { font-size: 13px; color: var(--muted); }

    .f-socials { display: flex; gap: 28px; }

    .f-socials a {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s;
    }

    .f-socials a:hover { color: var(--cream); }

    /* ─── REVEAL ANIMATIONS ───────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(44px);
      transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1);
    }

    .reveal.visible { opacity: 1; transform: translateY(0); }

    .d1 { transition-delay: 0.1s; }
    .d2 { transition-delay: 0.2s; }

    /* ─── RESPONSIVE ──────────────────────────────────────── */
    @media (max-width: 1024px) {
      .manifesto-grid { grid-template-columns: 1fr; gap: 48px; }
      .manifesto-right-block { border-left: none; padding-left: 0; border-top: 1px solid rgba(245,240,232,0.1); padding-top: 48px; }
      .values-row { grid-template-columns: 1fr 1fr; }
      .value-cell:nth-child(3) { border-top: 1px solid rgba(245,240,232,0.08); grid-column: 1 / -1; }

      .product-card { grid-template-columns: 1fr; }
      .product-card.reverse .product-vis { order: 1; }
      .product-card.reverse .product-info { order: 2; }
      .product-vis { min-height: 320px; }

      .footer-cols { grid-template-columns: 1fr 1fr; gap: 40px; }
      .footer-cols .f-brand { grid-column: 1 / -1; }
    }

    @media (max-width: 768px) {
      nav { padding: 16px 20px; }
      .nav-logo { font-size: 20px; }
      .nav-cta { padding: 9px 18px; font-size: 10px; }
      .nav-cart { width: 20px; height: 20px; }
      .nav-links { display: none; }

      section, #shop, #manifesto, #culture, #newsletter, #newsletter-inner, footer {
        padding-left: 24px;
        padding-right: 24px;
      }

      .values-row { grid-template-columns: 1fr; }
      .value-cell { border-right: none; border-bottom: 1px solid rgba(245,240,232,0.08); }
      .value-cell:last-child { border-bottom: none; }

      .product-info { padding: 36px 24px; }
      .p-meta { grid-template-columns: 1fr 1fr; }

      .teaser-row { grid-template-columns: 1fr; }
      .playlist-grid { grid-template-columns: 1fr; }
      .pl-card {
        aspect-ratio: auto;
        height: auto;
        min-height: 0;
        overflow: hidden;
        padding: 40px 28px 32px;
      }
      .pl-vinyl {
        width: 55%;
        top: 50%;
        left: 50%;
      }
      .pl-name { font-size: 32px; }

      .wc-form { flex-direction: column; align-items: stretch; }
      .wc-submit-group { margin-left: 0; justify-content: space-between; }
      .wc-select, .wc-qty { width: 100%; min-width: 0; }

      .vinyl { width: 160px; height: 160px; }
      .vinyl-label { width: 64px; height: 64px; }

      .nl-form { flex-direction: column; }
      .nl-input { border-right: 1px solid rgba(22,25,20,0.25); }

      .footer-cols { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
    }
  


/* ════════════════════════════════════════════════════════════
   WOOCOMMERCE PAGES (Shop, Single Product, Cart, Checkout, Account)
   ════════════════════════════════════════════════════════════ */

body.woocommerce-page,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.single-product,
body.archive.woocommerce {
  background-color: var(--roast-black) !important;
  color: var(--cream) !important;
  font-family: var(--ff-body) !important;
}

.woo-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 160px 52px 120px;
}

.woo-wrap h1,
.woo-wrap h2,
.woo-wrap h3,
.woo-wrap .page-title,
.woo-wrap .product_title {
  font-family: var(--ff-heading) !important;
  letter-spacing: 0.03em;
  color: var(--cream) !important;
  margin-bottom: 28px;
}

.woo-wrap a { color: var(--cream); }
.woo-wrap a:hover { color: var(--burnt-clay); }

/* Shop archive product cards */
.woo-wrap ul.products li.product {
  background-color: var(--forest) !important;
  border: 1px solid rgba(245,240,232,0.06);
  padding: 18px;
  border-radius: 0;
}

.woo-wrap ul.products li.product .woocommerce-loop-product__title,
.woo-wrap ul.products li.product h2 {
  color: var(--cream) !important;
  font-family: var(--ff-heading) !important;
  letter-spacing: 0.02em;
  font-size: 22px;
}

.woo-wrap ul.products li.product .price {
  color: var(--acid-yellow) !important;
  font-family: var(--ff-heading) !important;
  font-size: 20px;
}

/* Single product */
.woo-wrap .summary .price,
.woo-wrap p.price {
  color: var(--acid-yellow) !important;
  font-family: var(--ff-heading) !important;
  font-size: 30px;
}

.woo-wrap .woocommerce-product-details__short-description,
.woo-wrap .summary p {
  color: var(--muted) !important;
}

.woo-wrap .woocommerce-tabs ul.tabs li a { color: var(--cream) !important; }
.woo-wrap .woocommerce-tabs ul.tabs li.active a { color: var(--acid-yellow) !important; }

/* Tables: cart, checkout review, account orders */
.woo-wrap table.shop_table {
  width: 100%;
  background-color: var(--roast-black) !important;
  border-color: rgba(245,240,232,0.1) !important;
  border-collapse: collapse;
  margin-bottom: 40px;
  font-size: 14px;
}

.woo-wrap table.shop_table td,
.woo-wrap table.shop_table th {
  background-color: var(--roast-black) !important;
  color: var(--cream) !important;
  border-color: rgba(245,240,232,0.08) !important;
  padding: 16px;
  text-align: left;
}

.woo-wrap table.shop_table th {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted) !important;
  font-weight: 600;
}

.woo-wrap .product-thumbnail img { max-width: 70px; }

.woo-wrap .order-total .amount {
  color: var(--acid-yellow) !important;
  font-family: var(--ff-heading) !important;
}

/* Cart totals / checkout review box */
.woo-wrap .cart_totals,
.woo-wrap .woocommerce-checkout-review-order,
.woo-wrap #order_review,
.woo-wrap .woocommerce-MyAccount-content {
  background-color: var(--forest) !important;
  border: 1px solid rgba(245,240,232,0.06);
  padding: 32px;
  color: var(--cream) !important;
}

/* Form fields */
.woo-wrap input.input-text,
.woo-wrap select,
.woo-wrap textarea,
.woo-wrap input.qty {
  background-color: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(245,240,232,0.18) !important;
  color: var(--cream) !important;
  padding: 12px 14px;
  font-family: var(--ff-body);
  width: 100%;
}

.woo-wrap select option {
  color: var(--roast-black) !important;
  background-color: var(--cream) !important;
}

.woo-wrap label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted) !important;
  display: block;
  margin-bottom: 6px;
}

.woo-wrap .form-row { margin-bottom: 18px; }

/* Buttons */
.woo-wrap .button,
.woo-wrap input.button,
.woo-wrap button.button,
.woo-wrap .checkout-button,
.woo-wrap #place_order,
.woo-wrap .single_add_to_cart_button {
  font-family: var(--ff-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--roast-black) !important;
  background-color: var(--acid-yellow) !important;
  border: none !important;
  padding: 16px 38px !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: background-color 0.25s, transform 0.2s;
}

.woo-wrap .button:hover,
.woo-wrap input.button:hover,
.woo-wrap button.button:hover,
.woo-wrap .checkout-button:hover,
.woo-wrap #place_order:hover,
.woo-wrap .single_add_to_cart_button:hover {
  background-color: var(--cream) !important;
  transform: translateY(-2px);
}

/* Notices */
.woo-wrap .woocommerce-message,
.woo-wrap .woocommerce-info,
.woo-wrap .woocommerce-error {
  background-color: var(--forest) !important;
  border-left: 3px solid var(--burnt-clay) !important;
  color: var(--cream) !important;
  padding: 16px 22px !important;
  list-style: none;
  margin-bottom: 28px;
}

.woo-wrap .woocommerce-message li,
.woo-wrap .woocommerce-info li,
.woo-wrap .woocommerce-error li { list-style: none; }

/* My Account nav */
.woo-wrap .woocommerce-MyAccount-navigation ul li a { color: var(--cream) !important; }
.woo-wrap .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--acid-yellow) !important; }

@media (max-width: 768px) {
  .woo-wrap { padding: 130px 24px 80px; }
}

/* ════════════════════════════════════════════════════════════
   FINAL MOBILE OVERRIDES — placed last + !important so nothing
   earlier in this file (or from plugins) can win the cascade.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* "Meistä" / "Löydä oma paahteesi" buttons: force vertical centering */
  #hero .hero-actions a.btn-primary,
  #hero .hero-actions a.btn-ghost,
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Kahvin Kuuntelukulttuuri cards: never clip the title, grow with content */
  #culture .pl-card,
  .playlist-grid .pl-card {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    display: block !important;
    padding-top: 40px !important;
  }

  #culture .pl-card .pl-content,
  .playlist-grid .pl-card .pl-content {
    position: relative !important;
    padding-top: 0 !important;
  }

  #culture .pl-vinyl,
  .playlist-grid .pl-vinyl {
    width: 55% !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 0 !important;
  }
}

@media (max-width: 768px) {
  /* ── Cookie consent banner: keep within viewport width on mobile ──
     Covers common plugins (Complianz, CookieYes, GDPR Cookie Consent,
     Cookie Notice, Borlabs, etc.) which sometimes render too wide and
     push/overflow content on small screens. */
  #cmplz-cookiebanner-container,
  .cmplz-cookiebanner,
  #cookie-law-info-bar,
  .cli-modal-content,
  #cookie-notice,
  .cookie-notice-container,
  #moove_gdpr_cookie_modal,
  .cky-consent-container,
  .cky-modal,
  ._brlbs-box,
  [class*="cookie"][class*="banner"],
  [id*="cookie"][id*="banner"] {
    max-width: 100vw !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }

  #cmplz-cookiebanner-container *,
  .cmplz-cookiebanner *,
  .cky-consent-container * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── Cart table: widen quantity column so the number isn't hidden ── */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  content: none;
}
.woocommerce-cart table.cart td.product-quantity .qty {
  width: 90px;
  min-width: 90px;
}

.woo-wrap .cart-empty,
.woo-wrap .woocommerce-info,
.woo-wrap .woocommerce-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 28px 22px;
}

.woo-wrap .cart-empty::before,
.woo-wrap .woocommerce-info::before,
.woo-wrap .woocommerce-message::before {
  display: none !important;
  content: none !important;
}

.woo-wrap .return-to-shop {
  text-align: center;
  margin-top: 8px;
}