/* ==========================================================================
   Magnolia Peps: design system (clinical precision, final)
   site.css  → tokens, base type, header, buttons, footer, content pages
   product.css → product detail templates
   storefront.css → (fonts @import) home, carousel, cards, catalogue
   shop.css → bag, drawers, purchase panel, checkout
   ========================================================================== */

:root{
  /* Colour: one accent (cobalt), everything else neutral */
  --blue:#2249d4;            /* canonical accent (was split #1048d5 / #2249d4) */
  --blue-press:#1a3ab0;      /* hover / pressed */
  --blue-deep:#132a7a;       /* rarely: text on tint */
  --blue-tint:#f3f5fd;       /* selected option fill */
  --blue-line:#c9d3f4;       /* hairline in the accent family */

  --ink:#0f1a30;             /* primary text */
  --ink-2:#39465e;           /* secondary text, labels */
  --muted:#5d6879;           /* body copy on white: 5.6:1 */
  --soft:#7c8697;            /* de-emphasised headline fragment only */
  --line:#e3e6eb;            /* hairlines */
  --line-strong:#cdd2da;     /* control borders */
  --paper:#ffffff;
  --paper-2:#f7f8fa;         /* quiet neutral band */
  --plate:#ffffff;           /* product photography plate */
  --top:#13235c;             /* compliance strip: deep shade of the cobalt hue */

  /* Type */
  --sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fs-fine:.75rem;          /* 12px: floor for fine print */
  --fs-small:.875rem;        /* 14px */
  --fs-body:1rem;            /* 16px */
  --fs-lead:1.0625rem;       /* 17px */
  --fs-h3:1.125rem;
  --fs-h2:clamp(1.75rem,2.6vw,2.375rem);
  --fs-h1:clamp(2.5rem,4.6vw,4.25rem);
  --track-label:.12em;

  /* Space: 4px modular scale */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --gutter:40px;
  --max:1200px;

  /* Shape + depth: one radius family, one shadow */
  --r-xs:3px;                /* tags, badges */
  --r:6px;                   /* controls, cards, panels */
  --shadow:0 1px 2px rgba(15,26,48,.06);
  --ease:cubic-bezier(.2,.6,.2,1);
  --t:200ms;

  font-family:var(--sans);
  font-size:16px;
  color:var(--ink);
  background:var(--paper);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"ss01" 0}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button,input,select,textarea{font-family:inherit}
::selection{background:#d9e0fa;color:var(--ink)}
.wrap{max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
[hidden]{display:none!important}
main:focus{outline:none}
section{scroll-margin-top:var(--s-5)}

/* ---- Focus: one precise ring everywhere ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--r-xs)}
main:focus-visible{outline:none}

.skip-link{position:fixed;top:-80px;left:16px;z-index:100;background:var(--paper);color:var(--blue);padding:var(--s-3) var(--s-4);border:1px solid var(--blue);border-radius:var(--r);font-size:var(--fs-small);font-weight:500}
.skip-link:focus{top:12px}

/* ---- Headings ---- */
h1,h2,h3{font-family:var(--sans);color:var(--ink);font-optical-sizing:auto;margin:0}
h1{font-size:var(--fs-h1);font-weight:500;letter-spacing:-.03em;line-height:1.02;margin:0 0 var(--s-5)}
h2{font-size:var(--fs-h2);font-weight:500;letter-spacing:-.03em;line-height:1.1}
h3{font-size:var(--fs-h3);font-weight:500;letter-spacing:-.012em;line-height:1.3}
p{margin:0 0 var(--s-4)}

/* Micro-label: lab-document style, used for eyebrows, specs, tags */
.eyebrow{display:flex;align-items:center;gap:var(--s-3);font-family:var(--mono);font-size:var(--fs-fine);font-weight:400;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-2);line-height:1.4;margin:0 0 var(--s-5)}

.intro{color:var(--muted);font-size:var(--fs-lead);line-height:1.65;max-width:440px;margin:0 0 var(--s-6)}
.fine{font-size:.8125rem!important;line-height:1.65!important}

/* ---- Compliance strip ---- */
.top{background:var(--top);color:#fff;text-align:center;padding:9px var(--s-5);font-family:var(--sans);font-size:var(--fs-fine);font-weight:500;letter-spacing:.12em;line-height:1.4}

/* ---- Header ---- */
.header{background:var(--paper);border-bottom:1px solid var(--line)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:var(--s-5)}
.brand{display:flex;flex-direction:column;gap:5px;line-height:1;color:var(--ink)}
.brand strong{font-size:1.25rem;font-weight:600;letter-spacing:.22em;margin-right:-.22em}
.brand span{font-family:var(--mono);font-size:var(--fs-fine);letter-spacing:.62em;color:var(--muted)}
nav{display:flex;gap:var(--s-6);font-size:var(--fs-small)}
.nav nav a{position:relative;color:var(--ink-2);font-weight:450;padding:var(--s-3) 0;transition:color var(--t) var(--ease)}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
.nav nav a:hover{color:var(--ink)}
.nav nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current=page]{color:var(--blue)}
.nav a[aria-current=page]::after{transform:scaleX(1)}

/* ---- Buttons ---- */
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:48px;padding:0 var(--s-5);background:var(--blue);color:#fff;border-radius:var(--r);font-size:.9375rem;font-weight:500;letter-spacing:-.005em;line-height:1.2;transition:background var(--t) var(--ease)}
.button:hover{background:var(--blue-press)}
.button:active{background:var(--blue-deep)}

/* ---- Footer ---- */
.footer{padding:var(--s-8) 0 var(--s-6);border-top:1px solid var(--line);background:var(--paper)}
.footer .wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-6)}
.footer p{font-size:.8125rem;color:var(--muted);line-height:1.7;margin:0;max-width:440px;text-align:right}
.footer .brand strong{font-size:1rem}
.footer .brand span{font-size:var(--fs-fine)}
.footer .footer-bottom{display:block;border-top:1px solid var(--line);padding-top:var(--s-4);margin-top:var(--s-6)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);margin:0!important;font-size:var(--fs-small)}
.footer-links a{color:var(--ink-2);padding:var(--s-2) 0;transition:color var(--t) var(--ease)}
.footer-links a:hover{color:var(--blue)}

/* ---- Generic sections shared by templates ---- */
.about{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s-8) 0}
.about .wrap{display:grid;grid-template-columns:5fr 7fr;gap:var(--s-8)}
.about h2{font-size:clamp(1.75rem,2.4vw,2.25rem)}
.about p:not(.eyebrow){color:var(--muted);line-height:1.7;font-size:var(--fs-body);margin:0 0 var(--s-4);max-width:620px}
.about p.fine{color:var(--ink-2);border-top:1px solid var(--line);padding-top:var(--s-4);margin-top:var(--s-5)}

/* Breadcrumb as a document path */
.breadcrumb{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding-top:var(--s-6);font-family:var(--sans);font-size:var(--fs-fine);letter-spacing:.01em;text-transform:none;color:var(--muted)}
.breadcrumb a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px;transition:color var(--t) var(--ease),text-decoration-color var(--t) var(--ease)}
.breadcrumb a:hover{color:var(--blue);text-decoration-color:currentColor}
.breadcrumb span[aria-hidden]{color:var(--line-strong)}

/* Generic spec list */
.specs{margin:var(--s-5) 0 var(--s-6)}
.specs div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-5);padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.specs div:first-child{border-top:1px solid var(--line)}
.specs dt{color:var(--muted);font-size:var(--fs-small)}
.specs dd{margin:0;text-align:right;font-family:var(--mono);font-size:var(--fs-small);color:var(--ink);font-variant-numeric:tabular-nums}
.availability{display:inline-block;background:var(--blue-tint);color:var(--blue-deep);padding:6px 10px;font-size:.8125rem;font-weight:500;letter-spacing:.01em;border-radius:var(--r-xs);margin-bottom:var(--s-4)}
.variant{margin-top:var(--s-5);font-size:var(--fs-small)}
.variant a,.text-link{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.text-link:hover{color:var(--blue-press)}

/* ---- Content pages (about / faq / documentation / availability / website info) ---- */
.page-intro{padding-top:var(--s-8);padding-bottom:var(--s-7);margin-bottom:var(--s-7);border-bottom:1px solid var(--line);max-width:none}
.page-intro h1{font-size:clamp(2.5rem,4.4vw,3.75rem);max-width:860px;margin-bottom:var(--s-4)}
.page-intro .intro{max-width:620px;margin:0}
.page-intro:has(+.page-content>.info-grid:first-child){border-bottom:0;margin-bottom:0}
.page-content{padding-bottom:var(--s-8)}
.page-content>.button,.prose .button{margin-top:var(--s-5)}

.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-7);margin:0 0 var(--s-7)}
.info-card{padding:var(--s-5) 0 0;border-top:1px solid var(--ink);background:none}
.info-card h2{font-size:1.25rem;letter-spacing:-.018em;margin-bottom:var(--s-3)}
.info-card p{margin:0}
.info-card p,.prose p{color:var(--muted);line-height:1.75}
.prose{max-width:720px}
.table-scroll+.prose,.info-grid+.prose,.faq-list+.prose{margin-top:var(--s-7)}
.info-grid+.button{margin-top:0}
.prose h2{font-size:1.75rem;margin:var(--s-2) 0 var(--s-4)}

.faq-list{max-width:860px;border-top:1px solid var(--line);margin-bottom:var(--s-6)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s-5);cursor:pointer;list-style:none;padding:var(--s-5) 0;font-size:1.0625rem;font-weight:500;letter-spacing:-.01em;line-height:1.45;transition:color var(--t) var(--ease)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex-shrink:0;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line-strong);border-radius:var(--r-xs);font-family:var(--mono);font-weight:400;font-size:1rem;color:var(--blue);line-height:1}
.faq-list details[open]>summary::after{content:"\2212";border-color:var(--blue)}
.faq-list summary:hover{color:var(--blue)}
.faq-list p{color:var(--muted);line-height:1.75;max-width:720px;margin:0 0 var(--s-5)}

.status-note{border:1px solid var(--line);border-left:2px solid var(--blue);border-radius:0 var(--r) var(--r) 0;background:var(--paper-2);padding:var(--s-5);margin:0 0 var(--s-6);line-height:1.7;color:var(--ink-2);font-size:.9375rem}
.table-scroll{overflow:auto;border:1px solid var(--line);border-radius:var(--r)}
.documentation-table{border-collapse:collapse;width:100%;font-size:var(--fs-small)}
.documentation-table caption{text-align:left;font-size:1.375rem;font-weight:500;letter-spacing:-.02em;padding:var(--s-5) var(--s-5) var(--s-4);caption-side:top}
.documentation-table th,.documentation-table td{text-align:left;padding:var(--s-4) var(--s-5);border-top:1px solid var(--line);line-height:1.5;vertical-align:top}
.documentation-table thead th{background:var(--paper-2);font-family:var(--mono);font-weight:400;font-size:var(--fs-fine);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.documentation-table tbody th{font-weight:500}
.documentation-table td{color:var(--muted)}
.documentation-table tbody tr{transition:background var(--t) var(--ease)}
.documentation-table tbody tr:hover{background:#fafbfc}
.documentation-table a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

.empty-state{padding:var(--s-6);background:var(--paper-2);color:var(--muted);border:1px dashed var(--line-strong);border-radius:var(--r);text-align:center}

/* ---- Responsive ---- */
@media(max-width:950px){
  :root{--gutter:28px}
  .info-grid{grid-template-columns:1fr;gap:var(--s-6)}
}
@media(max-width:700px){
  :root{--gutter:16px;--fs-h1:clamp(2rem,9vw,2.5rem);--fs-h2:1.625rem}
  .top{padding:5px var(--s-4);letter-spacing:.06em;text-wrap:balance}
  .nav{height:60px;gap:var(--s-3)}
  .about{padding:var(--s-6) 0}
  .about .wrap{grid-template-columns:1fr;gap:var(--s-3)}
  .about h2{font-size:1.5rem;line-height:1.15}
  .about p:not(.eyebrow){font-size:.9375rem;line-height:1.65}
  .about p.fine{margin-top:var(--s-4)}
  .footer{padding:var(--s-6) 0 var(--s-3)}
  .footer .wrap{display:block}
  .footer p{margin-top:var(--s-3);text-align:left}
  .footer .footer-bottom{margin-top:var(--s-4);padding-top:0}
  .footer-links{gap:0 var(--s-5)}
  .footer-links a{display:inline-block;padding:13px 0}
  .breadcrumb{padding-top:var(--s-3)}
  .breadcrumb a{padding:15px 0;margin:-15px 0}
  .page-intro{padding-top:var(--s-6);padding-bottom:var(--s-5);margin-bottom:var(--s-5)}
  .page-intro h1{font-size:2.125rem;line-height:1.06;margin-bottom:var(--s-3)}
  .page-intro .intro{font-size:.9375rem;line-height:1.6}
  .page-content{padding-bottom:var(--s-6)}
  .info-grid{margin-bottom:var(--s-6)}
  .info-grid{gap:var(--s-5)}
  .info-card{padding:var(--s-4) 0 0}
  .info-card h2{font-size:1.125rem}
  .info-card p,.prose p{font-size:.9375rem;line-height:1.65}
  .prose h2{font-size:1.375rem}
  .faq-list summary{font-size:1rem;padding:var(--s-4) 0}
  .faq-list p{font-size:.9375rem;line-height:1.65}
  .status-note{padding:var(--s-4);font-size:var(--fs-small);line-height:1.65}
  .documentation-table caption{font-size:1.125rem;padding:var(--s-4) var(--s-4) var(--s-3)}
  .documentation-table{table-layout:auto}
  .documentation-table th,.documentation-table td{padding:var(--s-3) 10px;overflow-wrap:break-word}
  .documentation-table th:first-child,.documentation-table td:first-child{padding-left:var(--s-3)}
  .documentation-table th:last-child,.documentation-table td:last-child{padding-right:var(--s-3)}
  .documentation-table thead th{letter-spacing:.04em}
  .text-link,.documentation-table a{padding:13px 0}
}
@media(max-width:350px){
  :root{--gutter:14px}
  .documentation-table th,.documentation-table td{padding-left:6px;padding-right:6px}
  .documentation-table th:first-child,.documentation-table td:first-child{padding-left:10px}
  .documentation-table thead th{font-family:var(--sans);font-weight:500;letter-spacing:0}
}

@media(prefers-reduced-motion:reduce){
  :root{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}
@media(max-width:700px){.nav .brand{padding:5px 0}.footer .brand{display:inline-flex;padding:6px 0}}