/* ============================================================
   PMAS — Satisfaction Guaranteed. Static Hugo rebuild.
   Ported from the original WordPress mu-plugin (pmas.css) plus
   the page-layout CSS that used to come from the Kadence theme.
   Display font Cooper Black / script font Snell Roundhand were
   macOS system fonts in the original — substituted here with
   self-hosted Baloo 2 (display) and Alex Brush (script).
   ============================================================ */

@font-face{
  font-family:"Baloo 2"; font-style:normal; font-weight:500 800;
  font-display:swap; src:url("/fonts/baloo2-variable.woff2") format("woff2");
}
@font-face{
  font-family:"Alex Brush"; font-style:normal; font-weight:400;
  font-display:swap; src:url("/fonts/alex-brush-400.woff2") format("woff2");
}

:root{
  --pmas-cream:#F2E4BF; --pmas-cream-2:#F9F2E1; --pmas-paper:#FFFDF6;
  --pmas-magenta:#D81E7A; --pmas-magenta-ink:#A9115C;
  --pmas-blue:#1B4C9E; --pmas-gold:#F4C21B; --pmas-teal:#1B9AA2;
  --pmas-teal-deep:#0F7078;
  --pmas-ink:#2B2115; --pmas-ink-soft:#584A33;
  --pmas-display:"Baloo 2",Georgia,'Times New Roman',serif;
  --pmas-script:"Alex Brush","Brush Script MT",cursive;
  --pmas-box:Helvetica,Arial,sans-serif;
  --pmas-radius:14px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--pmas-cream-2); color:var(--pmas-ink-soft);
  font-family:var(--pmas-box); line-height:1.5; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--pmas-blue); }
h1,h2,h3,h4{ font-family:var(--pmas-display); color:var(--pmas-ink); margin:0 0 .5rem; font-weight:800; }

.pmas-wrap{ max-width:760px; margin:0 auto; padding:0 1.1rem; }

/* --- header --- */
.pmas-site-header{ background:var(--pmas-cream); padding:1.1rem 0; }
.pmas-site-header .pmas-wrap{ display:flex; align-items:center; justify-content:space-between; }
.pmas-wordmark{ font-family:var(--pmas-display); font-size:1.5rem; color:var(--pmas-ink);
  text-decoration:none; font-weight:800; }
.pmas-menu-icon{ width:26px; height:20px; display:flex; flex-direction:column;
  justify-content:space-between; }
.pmas-menu-icon span{ display:block; height:3px; background:var(--pmas-ink); border-radius:2px; }

/* --- announcement topbar --- */
.pmas-topbar{ background:var(--pmas-blue); border-bottom:4px solid var(--pmas-gold);
  font-family:var(--pmas-box); color:#fdeec8; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; font-size:.66rem;
  text-align:center; padding:.7rem 1rem; }
.pmas-topbar b{ color:var(--pmas-gold); }

main{ display:block; }
.pmas-section{ padding:2.2rem 0; }
.pmas-section h2{ text-align:center; font-size:1.5rem; }
.pmas-section > .pmas-wrap > p.pmas-lede{ text-align:center; max-width:52ch; margin:0 auto 1.5rem;
  color:var(--pmas-ink-soft); }
.pmas-eyebrow-label{ display:block; text-align:center; font-family:var(--pmas-box);
  font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--pmas-ink-soft);
  margin-bottom:.3rem; }

/* --- utility text roles --- */
.pmas-kicker{ font-family:var(--pmas-script); font-size:1.7em; color:var(--pmas-magenta-ink); margin:0 0 .3rem; }
.pmas-eyebrow{ font-family:var(--pmas-box); font-size:.72rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--pmas-blue); }

/* --- badge / chip --- */
.pmas-badge{ display:inline-block; font-family:var(--pmas-box); font-size:.62rem;
  letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--pmas-magenta);
  padding:.3rem .6rem; border-radius:4px; }
.pmas-badge.is-blue{ background:var(--pmas-blue); }
.pmas-badge.is-teal{ background:var(--pmas-teal); }
.pmas-badge.is-gold{ background:var(--pmas-gold); color:var(--pmas-ink); }

/* --- card: the universal PMAS surface --- */
.pmas-card{ background:var(--pmas-paper); border:3px solid var(--pmas-ink);
  border-radius:var(--pmas-radius); padding:1.2rem 1.4rem; }
.pmas-card.is-paper{ background:var(--pmas-paper); }
.pmas-card, .pmas-box{ margin-block:1.3rem; }
.pmas-auto .pmas-card, .pmas-grid .pmas-card{ margin-block:0; }

/* --- hero box: double ring (magenta + paper gap + teal) --- */
.pmas-box{ position:relative; background:var(--pmas-paper);
  border:4px solid var(--pmas-magenta); border-radius:22px;
  box-shadow:0 0 0 4px var(--pmas-paper), 0 0 0 8px var(--pmas-teal);
  padding:1.6rem 1.7rem; margin:8px auto; overflow:hidden; }
.pmas-box .pmas-hero-grid{ display:grid; gap:1.4rem; }
@media (min-width:640px){ .pmas-box .pmas-hero-grid{ grid-template-columns:1.1fr 1fr; align-items:center; } }
.pmas-ribbon{ position:absolute; top:18px; right:-64px; width:220px; text-align:center;
  transform:rotate(37deg); background:var(--pmas-magenta); color:#fff;
  font-family:var(--pmas-box); font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  font-size:.72rem; padding:.4rem 0; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.pmas-ribbon b{ color:var(--pmas-gold); }
.pmas-hero-photo{ border:6px solid #fff; border-radius:10px; box-shadow:0 6px 18px rgba(43,33,21,.18); }
.pmas-hero-title{ font-size:2.6rem; color:var(--pmas-magenta); line-height:1;
  text-shadow:2px 2px 0 #fff,-2px 2px 0 #fff,2px -2px 0 #fff,-2px -2px 0 #fff,0 3px 6px rgba(0,0,0,.12); }
.pmas-hero-title sub{ display:block; font-size:1rem; color:var(--pmas-ink-soft); font-family:var(--pmas-box);
  font-weight:400; margin-top:.2rem; }

/* --- CTA button --- */
.pmas-btn{ display:inline-block; background:var(--pmas-magenta); color:#fff !important;
  font-family:var(--pmas-box); font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  text-decoration:none; padding:.85rem 1.6rem; border-radius:999px; font-size:.85rem;
  box-shadow:0 4px 10px rgba(216,30,122,.35); margin-top:.8rem; }

/* --- relief-printed model name --- */
.pmas-plate{ display:inline-block; font-family:var(--pmas-display); font-size:1.35rem;
  line-height:1; color:var(--pmas-magenta-ink);
  background:linear-gradient(180deg,#fff,#efe3c4);
  border:2px solid rgba(43,33,21,.35); border-radius:8px; padding:.3rem .8rem; }

/* --- catalogue number badge (blue disc, gold ring) --- */
.pmas-no{ display:inline-grid; place-items:center; width:2.4rem; height:2.4rem;
  font-family:var(--pmas-display); font-size:1.15rem; color:#fff;
  background:var(--pmas-blue); border:3px solid var(--pmas-gold); border-radius:50%;
  box-shadow:0 4px 8px rgba(0,0,0,.2); }

/* --- industrial designator chip (modular attachment code) --- */
.pmas-code{ display:inline-block; font-family:var(--pmas-box); font-weight:800;
  font-size:.82rem; letter-spacing:.06em; color:#fff; background:var(--pmas-blue);
  border:2px solid var(--pmas-ink); border-radius:5px; padding:.24rem .55rem; }

/* --- video bumper: full-bleed TV frame at the very top --- */
.pmas-bumper{ margin:0; background:#000; }
.pmas-bumper video{ display:block; width:100%; max-height:70vh; height:auto;
  border-bottom:4px solid var(--pmas-gold); background:#000; margin:0 auto; }

/* --- "As Seen On TV" framed video set --- */
.pmas-tv-set{ background:#2c2e33; border-radius:20px; padding:14px; box-shadow:0 10px 26px rgba(0,0,0,.25); }
.pmas-tv-screen{ position:relative; background:#000; border-radius:8px; overflow:hidden; }
.pmas-tv-screen video{ display:block; width:100%; height:auto; }
.pmas-tv-knobs{ display:flex; gap:8px; justify-content:flex-end; padding:.7rem .2rem 0; }
.pmas-tv-knobs span{ width:16px; height:16px; border-radius:50%; background:#4a4d54; }

/* --- bayonet callout line under the modular heading --- */
.pmas-bayonet{ text-align:center; margin:.2rem 0 .4rem; font-family:var(--pmas-box);
  font-size:.9rem; color:var(--pmas-ink-soft); }
.pmas-bayonet span:last-child{ font-style:italic; }

/* --- product grid (Core / Modular) --- */
.pmas-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:30px 20px; margin:1.6rem 0; }
.pmas-pcard{ position:relative; display:flex; flex-direction:column; gap:.5rem;
  padding:1.3rem 1.1rem 1.2rem; }
.pmas-pcard .pmas-no{ position:absolute; top:-14px; left:-12px; }
.pmas-pcard .pmas-code{ position:relative; }
.pmas-pcard .pmas-plate{ align-self:flex-start; margin-top:.4rem; text-decoration:none; }
.pmas-pcard .pmas-fn{ font-family:var(--pmas-box); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pmas-teal-deep); font-weight:800; }
.pmas-pcard p{ margin:0; font-size:.92rem; color:var(--pmas-ink-soft); }
.pmas-pcard .pmas-ask{ margin-top:auto; font-family:var(--pmas-box); font-weight:800;
  font-size:.78rem; color:var(--pmas-magenta); letter-spacing:.02em; text-decoration:none; }
.pmas-acard .pmas-code{ align-self:flex-start; }
.pmas-acard .pmas-plate{ margin-top:.1rem; }
.pmas-pcard.is-feature{ border-color:var(--pmas-magenta); }
.pmas-pcard.is-feature .pmas-plate{ color:#fff;
  background:linear-gradient(180deg,#e94b96,#b8135f); border-color:#8a0d47; }

/* --- specs table --- */
.pmas-specs dl{ display:grid; grid-template-columns:max-content 1fr; gap:.35rem 1.2rem; margin:.9rem 0 0; }
.pmas-specs dt{ font-family:var(--pmas-box); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--pmas-blue); align-self:center; }
.pmas-specs dd{ margin:0; font-weight:600; color:var(--pmas-ink); }

/* --- field-tested photo card --- */
.pmas-field-photo{ text-align:center; }
.pmas-field-photo img{ border:6px solid #fff; border-radius:14px;
  box-shadow:0 8px 22px rgba(43,33,21,.2); margin:0 auto; }
.pmas-field-caption{ font-family:var(--pmas-box); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--pmas-ink-soft); text-align:center; margin:.7rem 0 0; }

/* --- "Why PHLÜFFYS?" checklist box --- */
.pmas-why{ background:var(--pmas-teal-deep); color:#fff; border-radius:var(--pmas-radius);
  padding:1.5rem 1.6rem; margin:1.6rem 0; }
.pmas-why h3{ color:#fff; font-size:1.4rem; margin-bottom:1rem; }
.pmas-why ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.pmas-why li{ display:flex; gap:.6rem; align-items:flex-start; font-weight:700; }
.pmas-why li::before{ content:"✓"; color:var(--pmas-gold); font-weight:800; flex:none; }

/* --- FAQ / Bruksanvisning card + stamp --- */
.pmas-faq-wrap{ position:relative; margin-top:2.4rem; }
.pmas-stamp{ position:absolute; top:-16px; right:8px; display:inline-block;
  font-family:var(--pmas-box); font-weight:700; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pmas-magenta); background:var(--pmas-paper);
  border:3px solid var(--pmas-magenta); border-radius:6px; padding:.3rem .8rem;
  transform:rotate(-6deg); z-index:1; }
.pmas-faq{ margin-top:0; }
.pmas-faq .pmas-faq-heading{ font-family:var(--pmas-box); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--pmas-ink-soft); border-bottom:2px solid var(--pmas-ink);
  padding-bottom:.6rem; margin-bottom:.9rem; }
.pmas-faq dl{ margin:0; }
.pmas-faq dt{ font-family:var(--pmas-box); font-weight:800; color:var(--pmas-blue); margin-top:.9rem; }
.pmas-faq dt:first-child{ margin-top:0; }
.pmas-faq dd{ margin:.25rem 0 .9rem; color:var(--pmas-ink-soft); border-bottom:1px dashed rgba(43,33,21,.25);
  padding-bottom:.9rem; }
.pmas-faq dd:last-child{ border-bottom:none; }

/* --- review card --- */
.pmas-review blockquote,blockquote.pmas-quote{ border:none; margin:0; padding:0;
  font-family:var(--pmas-display); font-size:1.15rem; line-height:1.45; color:var(--pmas-ink); }
.pmas-review .pmas-attrib{ font-family:var(--pmas-box); font-size:.8rem; color:var(--pmas-ink);
  opacity:.75; margin-top:.6rem; }

/* --- audio / now-playing card --- */
.pmas-audio{ background:var(--pmas-cream); border-color:#fff; }
.pmas-audio.is-reply{ border-color:var(--pmas-blue); background:var(--pmas-paper); }
.pmas-audio .pmas-track-title{ font-family:var(--pmas-display); font-size:1.15rem;
  margin:.1rem 0 0; color:var(--pmas-ink); }
.pmas-audio .pmas-track-title a{ color:inherit; text-decoration:none; }
.pmas-audio .pmas-mix{ font-family:var(--pmas-box); font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--pmas-blue); margin:.15rem 0 .55rem; }
.pmas-audio audio{ width:100%; height:40px; }
.pmas-audio .pmas-disclaimer{ font-family:var(--pmas-box); font-size:.68rem; font-style:italic;
  color:var(--pmas-ink); opacity:.65; margin:.5rem 0 0; }

/* --- legal box --- */
.pmas-legal{ background:var(--pmas-paper); border:1px solid var(--pmas-ink);
  border-radius:6px; padding:.9rem 1.1rem; font-family:var(--pmas-box);
  font-size:.72rem; line-height:1.55; color:var(--pmas-ink); text-align:justify; }
.pmas-legal b,.pmas-legal strong{ letter-spacing:.04em; }

/* --- footer claim --- */
.pmas-footer-claim{ font-family:var(--pmas-display); color:var(--pmas-ink); }
.pmas-footer-claim .pmas-tm{ font-size:.55em; vertical-align:super; }

/* --- site footer: ink band, gold rule, barcode --- */
.pmas-site-footer{ background:var(--pmas-ink); color:#f3e6c6; border-top:6px solid var(--pmas-gold);
  margin-top:1.4rem; padding-top:1.2rem; }
.pmas-site-footer a{ color:#f3e6c6; }
.pmas-foot-grid{ display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:space-between;
  align-items:center; padding:1.2rem 0 .6rem; color:#f3e6c6; text-align:left; }
.pmas-foot-tag{ font-family:var(--pmas-display); font-size:1.2rem; color:#fff; margin:0; }
.pmas-foot-tag span{ color:var(--pmas-gold); }
.pmas-foot-small{ font-family:var(--pmas-box); font-size:.78rem; opacity:.85;
  max-width:40ch; margin:.25rem 0 0; }
.pmas-barcode{ height:44px; width:170px; flex:none;
  background:repeating-linear-gradient(90deg,#f3e6c6 0 2px, transparent 2px 4px,
    #f3e6c6 4px 5px, transparent 5px 9px, #f3e6c6 9px 12px, transparent 12px 14px); }
.pmas-foot-legal{ text-align:center; font-family:var(--pmas-box); font-size:.72rem;
  padding:.7rem 0 1.1rem; color:#b9a988; letter-spacing:.03em;
  border-top:1px solid rgba(243,230,198,.18); margin-top:.8rem; }
.pmas-foot-legal b{ color:var(--pmas-magenta); }
.pmas-foot-legal a{ color:#b9a988; }

/* --- appended data sections on single product/review/track --- */
.pmas-auto{ margin-top:2.2rem; display:grid; gap:1.1rem; }
.pmas-auto .pmas-sec-label{ font-family:var(--pmas-script); font-size:1.4rem;
  color:var(--pmas-magenta-ink); margin:0.4rem 0 0; }

/* --- generic page (redactiehandleiding etc) --- */
.pmas-page{ padding:2.4rem 0; }
.pmas-page h2{ text-align:left; font-size:1.3rem; margin-top:1.6rem; }
.pmas-page h3{ font-size:1.05rem; margin-top:1.2rem; }
.pmas-page ol,.pmas-page ul{ padding-left:1.3rem; }
.pmas-page code{ background:var(--pmas-cream); padding:.1rem .35rem; border-radius:4px; font-size:.9em; }
.pmas-page hr{ border:none; border-top:1px solid rgba(43,33,21,.25); margin:2rem 0; }
.pmas-page em{ color:var(--pmas-ink-soft); }