/*
Theme Name: Prime Provisions Groupe
Theme URI: https://prime-provisions.ca
Author: Prime Provisions Groupe
Description: Custom brand + product showcase theme for Prime Provisions Groupe (Nut Master / Nutvilla). Bilingual EN/FR, bold saturated color palette with a playful modern sans-serif system, swirl signature motif, and scroll-reveal motion.
Version: 2.0
Requires PHP: 7.4
Text Domain: ppg
*/


  :root{
    --espresso-deep:#120E1F;
    --espresso:#1E1735;
    --espresso-warm:#2C2350;
    --praline:#7C3AED;
    --hazelnut:#E2231A;
    --hazelnut-light:#FF5A4D;
    --gold-swirl:#FFC933;
    --cream:#FFFFFF;
    --cream-dim:#C9C3E0;
    --ink:#14121F;
    --berry:#FF3D7F;
    --berry-light:#FF77A8;
    --pistachio:#22C55E;
    --pistachio-light:#6EE7B7;
    --sunshine:#FFB100;
    --body-muted:#5B5570;
    --max-w:1240px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,.display{
    font-family:'Fredoka', sans-serif;
    font-weight:600;
    letter-spacing:-0.01em;
    margin:0;
  }

  .mono{
    font-family:'JetBrains Mono', monospace;
    letter-spacing:0.02em;
  }

  a{color:inherit;}
  img,svg{display:block; max-width:100%;}

  /* language toggle logic */
  body.lang-en .fr{display:none;}
  body.lang-fr .en{display:none;}

  .wrap{max-width:var(--max-w); margin:0 auto; padding:0 32px;}

  /* ---------- NAV ---------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    background:rgba(18,14,31,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(255,201,51,0.18);
  }
  .nav .wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:76px;
  }
  .nav-logo{
    font-family:'Fredoka', sans-serif;
    font-weight:700;
    font-size:1.05rem;
    color:var(--cream);
    letter-spacing:0.01em;
    text-decoration:none;
    display:flex; align-items:center; gap:10px;
  }
  .nav-logo .mark{width:26px; height:26px; flex-shrink:0;}
  .nav-links{
    display:flex; align-items:center; gap:8px;
    list-style:none; margin:0; padding:0;
  }
  .nav-links a{
    color:var(--cream-dim); text-decoration:none;
    font-size:0.88rem; letter-spacing:0.01em; font-weight:600;
    padding:8px 14px; border-radius:999px;
    transition:color 0.2s ease, background 0.2s ease;
  }
  .nav-links a:hover, .nav-links a:focus-visible{color:var(--cream); background:rgba(255,255,255,0.1);}
  .nav-right{display:flex; align-items:center; gap:22px;}
  .lang-toggle{
    background:none; border:2px solid rgba(255,201,51,0.5);
    color:var(--cream-dim); font-family:'JetBrains Mono', monospace; font-weight:700;
    font-size:0.78rem; padding:6px 14px; border-radius:999px; cursor:pointer;
    transition:all 0.2s ease;
  }
  .lang-toggle:hover, .lang-toggle:focus-visible{border-color:var(--gold-swirl); color:var(--gold-swirl);}
  .nav-cta{
    background:var(--hazelnut); color:#fff;
    font-size:0.85rem; font-weight:700; letter-spacing:0.01em;
    padding:11px 22px; border-radius:999px; text-decoration:none;
    transition:all 0.2s ease;
    white-space:nowrap;
  }
  .nav-cta:hover, .nav-cta:focus-visible{background:var(--berry); transform:translateY(-2px);}
  .nav-burger{display:none; background:none; border:none; color:var(--cream); cursor:pointer;}

  @media (max-width:900px){
    .nav-links{display:none;}
    .nav-burger{display:block;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    background:radial-gradient(120% 100% at 78% 12%, var(--espresso-warm) 0%, var(--espresso) 45%, var(--espresso-deep) 100%);
    color:var(--cream);
    padding:170px 0 120px;
    overflow:hidden;
  }
  .hero::before{
    content:'';
    position:absolute; inset:0; pointer-events:none; z-index:1;
    background:
      radial-gradient(50% 45% at 88% 4%, rgba(255,201,51,0.22), transparent 60%),
      radial-gradient(40% 35% at 12% 85%, rgba(255,61,127,0.16), transparent 65%),
      radial-gradient(35% 30% at 60% 95%, rgba(34,197,94,0.12), transparent 65%);
  }
  .hero-swirl-wrap{
    position:absolute; top:-8%; right:-12%; width:62%; max-width:720px;
    transition:transform 0.25s ease-out;
  }
  .hero-swirl{
    width:100%; opacity:0.95;
    filter:drop-shadow(0 0 60px rgba(226,35,26,0.35));
    animation:swirl-drift 22s ease-in-out infinite;
  }
  @keyframes swirl-drift{
    0%,100%{ transform: rotate(0deg) translateY(0); }
    50%{ transform: rotate(6deg) translateY(-14px); }
  }
  .hero-inner{position:relative; z-index:2; max-width:640px;}
  .eyebrow{
    font-family:'JetBrains Mono', monospace; font-weight:700; font-size:0.78rem;
    letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-swirl);
    margin-bottom:22px; display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:''; width:26px; height:2px; border-radius:2px; background:var(--gold-swirl);}
  .hero h1{
    font-size:clamp(2.6rem, 5.5vw, 4.4rem);
    line-height:1.05;
    color:var(--cream);
    text-shadow:0 4px 32px rgba(0,0,0,0.35);
  }
  .hero h1 em{font-style:normal; font-weight:700;}
  .hero p.lede{
    margin-top:26px; font-size:1.12rem; color:var(--cream-dim);
    max-width:520px;
  }
  .hero-ctas{display:flex; gap:16px; margin-top:40px; flex-wrap:wrap;}
  .btn{
    display:inline-block; padding:16px 30px; border-radius:999px;
    text-decoration:none; font-weight:700; font-size:0.94rem;
    letter-spacing:0.01em; transition:all 0.2s ease; border:2px solid transparent;
  }
  .btn-primary{background:var(--hazelnut); color:#fff;}
  .btn-primary:hover, .btn-primary:focus-visible{background:var(--berry);}
  .btn-ghost{border-color:rgba(255,255,255,0.4); color:var(--cream);}
  .btn-ghost:hover, .btn-ghost:focus-visible{border-color:var(--gold-swirl); color:var(--gold-swirl);}

  .hero-stats{
    display:flex; gap:44px; margin-top:72px; padding-top:32px;
    border-top:1px solid rgba(255,255,255,0.15); max-width:600px; flex-wrap:wrap;
  }
  .stat .num{font-family:'JetBrains Mono', monospace; font-weight:700; font-size:1.5rem; color:var(--gold-swirl);}
  .stat:nth-child(2) .num{color:var(--berry-light);}
  .stat:nth-child(3) .num{color:var(--pistachio-light);}
  .stat .lbl{font-size:0.78rem; color:var(--cream-dim); text-transform:uppercase; letter-spacing:0.05em; margin-top:4px;}

  /* ---------- SECTION DIVIDER (signature motif, small) ---------- */
  .divider{display:flex; align-items:center; justify-content:center; padding:56px 0;}
  .divider svg{width:44px; height:44px; opacity:0.7;}
  .divider.on-dark svg{opacity:0.85;}

  /* ---------- SECTION SHELL ---------- */
  section{padding:20px 0 100px;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head .eyebrow{color:var(--praline);}
  .section-head .eyebrow::before{background:var(--praline);}
  .section-head h2{font-size:clamp(1.9rem, 3.4vw, 2.6rem); color:var(--ink);}
  .section-head p{margin-top:16px; color:var(--body-muted); font-size:1.02rem; max-width:520px;}

  /* dark section variant */
  .on-dark{background:var(--espresso); color:var(--cream);}
  .on-dark .section-head h2{color:var(--cream);}
  .on-dark .section-head p{color:var(--cream-dim);}
  .on-dark .section-head .eyebrow{color:var(--gold-swirl);}
  .on-dark .section-head .eyebrow::before{background:var(--gold-swirl);}

  /* ---------- PRODUCT ---------- */
  .product-grid{
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center;
  }
  .jar{
    position:relative; aspect-ratio:3/4; border-radius:28px;
    background:linear-gradient(155deg, var(--espresso-warm), var(--espresso-deep));
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(124,58,237,0.25);
  }
  .jar-inner{
    width:72%; aspect-ratio:1; border-radius:50%;
    background:conic-gradient(from 200deg, var(--hazelnut) 0deg, var(--berry) 55deg, var(--praline) 110deg, var(--pistachio) 165deg, var(--hazelnut-light) 220deg, var(--sunshine) 285deg, var(--hazelnut) 360deg);
    display:flex; align-items:center; justify-content:center;
    box-shadow: inset 0 0 40px rgba(18,14,31,0.5);
  }
  .jar-inner .mark{width:38%; opacity:0.9;}
  .jar-label{
    position:absolute; bottom:24px; left:24px; right:24px;
    font-family:'JetBrains Mono', monospace; font-weight:700; font-size:0.72rem; color:var(--cream-dim);
    display:flex; justify-content:space-between; letter-spacing:0.04em;
  }
  .specs{
    display:grid; grid-template-columns:1fr 1fr; gap:22px 28px;
    margin-top:32px; padding-top:28px; border-top:1px solid rgba(124,58,237,0.2);
  }
  .spec dt{font-family:'JetBrains Mono', monospace; font-weight:700; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--praline);}
  .spec dd{margin:6px 0 0; font-size:1rem; color:var(--ink);}
  .badge-row{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap;}
  .badge{
    display:flex; align-items:center; gap:8px;
    border:2px solid var(--praline); border-radius:999px;
    padding:8px 16px; font-size:0.8rem; font-weight:700; font-family:'JetBrains Mono', monospace;
    color:var(--praline);
  }
  .badge svg{width:14px; height:14px;}
  .badge-row .badge:nth-child(1){border-color:var(--hazelnut); color:var(--hazelnut);}
  .badge-row .badge:nth-child(2){border-color:var(--berry); color:var(--berry);}
  .badge-row .badge:nth-child(3){border-color:var(--pistachio); color:var(--pistachio);}
  .badge-row .badge:nth-child(1) svg, .badge-row .badge:nth-child(2) svg, .badge-row .badge:nth-child(3) svg{color:inherit !important;}

  /* ---------- CHANNELS ---------- */
  .channels-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
  }
  .channel-card{
    background:var(--espresso); padding:36px 30px; border-radius:20px;
    transition:background 0.25s ease;
    border-top:4px solid var(--hazelnut);
  }
  .channel-card:nth-child(6n+2){border-top-color:var(--berry);}
  .channel-card:nth-child(6n+3){border-top-color:var(--pistachio);}
  .channel-card:nth-child(6n+4){border-top-color:var(--sunshine);}
  .channel-card:nth-child(6n+5){border-top-color:var(--hazelnut-light);}
  .channel-card:nth-child(6n+6){border-top-color:var(--berry-light);}
  .channel-card:hover, .channel-card:focus-within{background:var(--espresso-warm);}
  .channel-card .idx{font-family:'JetBrains Mono', monospace; font-weight:700; font-size:0.75rem; color:var(--hazelnut);}
  .channel-card:nth-child(6n+2) .idx{color:var(--berry);}
  .channel-card:nth-child(6n+3) .idx{color:var(--pistachio);}
  .channel-card:nth-child(6n+4) .idx{color:var(--sunshine);}
  .channel-card:nth-child(6n+5) .idx{color:var(--hazelnut-light);}
  .channel-card:nth-child(6n+6) .idx{color:var(--berry-light);}
  .channel-card h3{font-size:1.2rem; color:var(--cream); margin-top:14px;}
  .channel-card p{font-size:0.92rem; color:var(--cream-dim); margin-top:10px;}

  @media (max-width:820px){
    .channels-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:560px){
    .channels-grid{grid-template-columns:1fr;}
  }

  /* ---------- QUALITY BAND ---------- */
  .quality-band{
    background:var(--ink); color:var(--cream);
    padding:56px 0; overflow:hidden;
  }
  .marquee{
    display:flex; gap:60px; white-space:nowrap;
    animation:marquee-scroll 28s linear infinite;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:1.5rem;
    color:var(--gold-swirl); width:max-content;
  }
  @keyframes marquee-scroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }

  /* ---------- ABOUT ---------- */
  .about-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;
  }
  .about-copy p{margin-top:18px; color:var(--body-muted); font-size:1.02rem; max-width:480px;}
  .about-meta{
    display:flex; flex-direction:column; gap:24px;
    border-left:3px solid var(--hazelnut); padding-left:24px;
  }
  .about-meta .item .k{font-family:'JetBrains Mono', monospace; font-weight:700; font-size:0.72rem; text-transform:uppercase; color:var(--praline); letter-spacing:0.05em;}
  .about-meta .item .v{font-family:'Fredoka', sans-serif; font-weight:600; font-size:1.3rem; margin-top:4px;}

  /* ---------- CONTACT ---------- */
  .contact{
    background:radial-gradient(120% 100% at 20% 0%, var(--espresso-warm) 0%, var(--espresso) 55%, var(--espresso-deep) 100%);
    color:var(--cream);
  }
  .contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px;}
  .contact-list{list-style:none; margin:32px 0 0; padding:0; display:flex; flex-direction:column; gap:20px;}
  .contact-list a{
    display:flex; align-items:center; gap:14px; text-decoration:none;
    color:var(--cream); font-size:1.05rem; font-weight:600; padding-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,0.15);
    transition:color 0.2s ease;
  }
  .contact-list a:hover, .contact-list a:focus-visible{color:var(--gold-swirl);}
  .contact-list svg{width:20px; height:20px; flex-shrink:0; color:var(--gold-swirl);}
  .contact-card{
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15);
    border-radius:20px; padding:36px;
  }
  .contact-card h3{color:var(--cream); font-size:1.2rem;}
  .contact-card p{color:var(--cream-dim); margin-top:10px; font-size:0.95rem;}
  .contact-card .btn{margin-top:22px; width:100%; text-align:center;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--espresso-deep); color:var(--cream-dim); padding:48px 0 32px;}
  .footer-top{
    display:flex; justify-content:space-between; align-items:flex-start;
    padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,0.1);
    flex-wrap:wrap; gap:24px;
  }
  .footer-logo{font-family:'Fredoka', sans-serif; font-weight:700; color:var(--cream); font-size:1.1rem;}
  .footer-links{display:flex; gap:28px; list-style:none; padding:0; margin:0; flex-wrap:wrap;}
  .footer-links a{color:var(--cream-dim); text-decoration:none; font-size:0.88rem; font-weight:600;}
  .footer-links a:hover{color:var(--gold-swirl);}
  .footer-bottom{
    display:flex; justify-content:space-between; padding-top:24px;
    font-size:0.8rem; color:rgba(255,255,255,0.4); flex-wrap:wrap; gap:10px;
  }

  /* ---------- INNER PAGE HERO ---------- */
  .page-hero{
    position:relative;
    background:radial-gradient(120% 100% at 78% 0%, var(--espresso-warm) 0%, var(--espresso) 45%, var(--espresso-deep) 100%);
    color:var(--cream);
    padding:170px 0 90px;
  }
  .page-hero h1{
    font-size:clamp(2.2rem, 4.6vw, 3.4rem);
    line-height:1.08;
    color:var(--cream);
    text-shadow:0 4px 32px rgba(0,0,0,0.35);
    max-width:720px;
  }
  .page-hero .lede{margin-top:22px; font-size:1.08rem; color:var(--cream-dim); max-width:560px;}
  .page-hero .eyebrow{color:var(--gold-swirl);}
  .page-hero .eyebrow::before{background:var(--gold-swirl);}

  /* ---------- FAQ ACCORDION ---------- */
  .faq-item{
    border-bottom:1px solid rgba(124,58,237,0.2);
    padding:26px 0;
  }
  .faq-q{
    width:100%; background:none; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:1.15rem; color:var(--ink);
    text-align:left; padding:0;
  }
  .faq-icon{width:20px; height:20px; color:var(--praline); flex-shrink:0; transition:transform 0.3s ease;}
  .faq-item.is-open .faq-icon{transform:rotate(180deg);}
  .faq-a{
    max-height:0; overflow:hidden;
    transition:max-height 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease;
    opacity:0; margin-top:0;
  }
  .faq-item.is-open .faq-a{max-height:320px; opacity:1; margin-top:14px;}
  .faq-a p{color:var(--body-muted); font-size:0.98rem; max-width:640px;}
  .faq-a a{color:var(--praline); text-decoration:underline;}

  /* ---------- VIBRANCY & MOTION ---------- */

  /* fine paper-grain texture over the whole page for a tactile finish */
  body::before{
    content:'';
    position:fixed; inset:0; z-index:9999; pointer-events:none;
    opacity:0.025; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* shimmering gradient text for taglines and accent words */
  .shine-text{
    background:linear-gradient(100deg, var(--hazelnut) 20%, var(--berry) 40%, var(--gold-swirl) 50%, var(--berry) 60%, var(--hazelnut) 80%);
    background-size:220% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:shine-sweep 7s linear infinite;
  }
  @keyframes shine-sweep{ to{ background-position:-220% center; } }

  /* scroll-triggered reveal */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity 0.8s ease, transform 0.8s ease;}
  .reveal.is-visible{opacity:1; transform:translateY(0);}

  /* bold underline flourish beneath section headings */
  .section-head h2{position:relative; padding-bottom:20px;}
  .section-head h2::after{
    content:''; position:absolute; left:0; bottom:0; width:64px; height:4px;
    background:linear-gradient(90deg, var(--hazelnut), var(--gold-swirl));
    border-radius:4px;
  }

  /* button shine sweep on hover */
  .btn{position:relative; overflow:hidden;}
  .btn-primary::after{
    content:''; position:absolute; top:0; left:-60%; width:35%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
    transform:skewX(-20deg); transition:left 0.55s ease;
  }
  .btn-primary:hover::after{left:130%;}
  .btn-primary, .btn-ghost{transition:all 0.25s ease, background 0.25s ease;}
  .btn-primary:hover{box-shadow:0 10px 28px -8px rgba(226,35,26,0.55); transform:translateY(-2px);}
  .btn-ghost:hover{transform:translateY(-2px);}

  /* lively hover states */
  .channel-card{transition:transform 0.35s ease, background 0.25s ease, box-shadow 0.35s ease;}
  .channel-card:hover, .channel-card:focus-within{
    transform:translateY(-6px);
    box-shadow:0 20px 44px -16px rgba(226,35,26,0.4);
  }
  .channel-card:nth-child(6n+2):hover{box-shadow:0 20px 44px -16px rgba(255,61,127,0.4);}
  .channel-card:nth-child(6n+3):hover{box-shadow:0 20px 44px -16px rgba(34,197,94,0.4);}
  .channel-card:nth-child(6n+4):hover{box-shadow:0 20px 44px -16px rgba(255,177,0,0.4);}
  .badge{transition:all 0.25s ease;}
  .badge:hover{border-color:var(--gold-swirl); color:var(--gold-swirl); box-shadow:0 0 0 5px rgba(255,201,51,0.14); transform:translateY(-2px);}
  .contact-list a{transition:color 0.2s ease, padding-left 0.25s ease;}
  .contact-list a:hover{padding-left:6px;}
  .contact-card{transition:box-shadow 0.3s ease, transform 0.3s ease;}
  .contact-card:hover{box-shadow:0 22px 50px -20px rgba(226,35,26,0.35); transform:translateY(-4px);}

  /* living sheen sweeping across the jar */
  .jar-inner{position:relative; overflow:hidden;}
  .jar-inner::after{
    content:''; position:absolute; inset:0;
    background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,0.3) 18deg, transparent 45deg, transparent 360deg);
    animation:jar-sheen 9s linear infinite; mix-blend-mode:overlay;
  }
  @keyframes jar-sheen{ to{ transform:rotate(360deg); } }
  .jar{transition:box-shadow 0.4s ease;}
  .jar:hover{box-shadow:0 24px 60px -20px rgba(226,35,26,0.35);}

  /* a bold multi-color hairline along the top of the nav */
  .nav::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--hazelnut), var(--berry), var(--sunshine), var(--pistachio), var(--praline));
  }

  /* stat numbers glow on hover */
  .stat{transition:transform 0.25s ease;}
  .stat:hover{transform:translateY(-2px);}
  .stat:hover .num{text-shadow:0 0 18px rgba(255,201,51,0.7);}
  .stat:nth-child(2):hover .num{text-shadow:0 0 18px rgba(255,119,168,0.7);}
  .stat:nth-child(3):hover .num{text-shadow:0 0 18px rgba(110,231,183,0.7);}

  @media (prefers-reduced-motion: reduce){
    .shine-text{animation:none; background-position:0 center;}
    .jar-inner::after{animation:none;}
    .reveal{opacity:1; transform:none; transition:none;}
  }

  /* ---------- CATALOGUE / SKU GRID ---------- */
  .sku-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:20px;
    margin-top:36px;
  }
  .sku-card{
    background:var(--espresso); border:1px solid rgba(255,255,255,0.1);
    border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:14px;
    transition:transform 0.3s ease, box-shadow 0.3s ease;
  }
  .sku-card:hover{transform:translateY(-4px); box-shadow:0 16px 34px -16px rgba(226,35,26,0.4);}
  .sku-photo-placeholder{
    aspect-ratio:1; border:2px dashed rgba(255,201,51,0.4); border-radius:14px;
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
    background:rgba(255,255,255,0.03);
  }
  .sku-photo-placeholder svg{width:32px; height:32px; opacity:0.6; color:var(--gold-swirl);}
  .sku-photo-placeholder .hint{
    font-family:'JetBrains Mono', monospace; font-size:0.64rem; color:var(--cream-dim);
    text-transform:uppercase; letter-spacing:0.05em; text-align:center; line-height:1.4;
  }
  .sku-name{font-family:'Fredoka', sans-serif; font-weight:600; font-size:1.02rem; color:var(--cream); line-height:1.3;}
  .sku-meta{display:flex; justify-content:space-between; align-items:center; gap:8px;}
  .sku-weight{font-family:'JetBrains Mono', monospace; font-weight:700; font-size:0.78rem; color:var(--gold-swirl);}
  .sku-tag{
    font-family:'JetBrains Mono', monospace; font-weight:700; font-size:0.62rem; text-transform:uppercase;
    letter-spacing:0.04em; padding:3px 10px; border-radius:999px;
    border:1px solid rgba(255,255,255,0.2); color:var(--cream-dim);
  }
  .sku-tag.bulk{border-color:var(--sunshine); color:var(--sunshine);}

  /* light-section variant: catalogue categories alternate dark/light like the rest of the site */
  section:not(.on-dark) .sku-card{
    background:#fff; border-color:rgba(124,58,237,0.16); box-shadow:0 2px 12px -4px rgba(20,18,31,0.08);
  }
  section:not(.on-dark) .sku-name{color:var(--ink);}
  section:not(.on-dark) .sku-weight{color:var(--praline);}
  section:not(.on-dark) .sku-tag{border-color:rgba(124,58,237,0.3); color:var(--body-muted);}
  section:not(.on-dark) .sku-tag.bulk{border-color:var(--berry); color:var(--berry);}
  section:not(.on-dark) .sku-photo-placeholder{
    border-color:rgba(124,58,237,0.35); background:rgba(124,58,237,0.05);
  }
  section:not(.on-dark) .sku-photo-placeholder svg{color:var(--praline);}
  section:not(.on-dark) .sku-photo-placeholder .hint{color:var(--body-muted);}

  @media (max-width:560px){
    .sku-grid{grid-template-columns:repeat(2, 1fr);}
  }

  @media (max-width:820px){
    .product-grid, .about-grid, .contact-grid{grid-template-columns:1fr; gap:40px;}
    .hero{padding:150px 0 90px;}
    .hero-swirl-wrap{width:80%; right:-30%; opacity:0.5;}
  }