/* Storefront-only overrides, lifted verbatim from the approved Aurabey
   mockups' inline <style> block. Loaded after styles.css + fonts.css. */

:root {
  --font-heading: 'Jost', system-ui, sans-serif;
  --font-body: 'Jost', system-ui, sans-serif;
  --font-heading-weight: 600;
}
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; }
body { margin: 0; }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-700); }
.au-link { color: inherit; text-decoration: none; }
.au-panel:hover .au-panel-cta { color: var(--color-accent); }

@keyframes au-splash-out { 0%, 72% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes au-splash-mark { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes au-splash-bar { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes au-splash-line { 0% { opacity: 0; } 100% { opacity: 1; } }
.au-marq { animation: au-slide 32s linear infinite; }
@keyframes au-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Mega menu: shown while hovering anywhere inside the header, matching the
   mockup's onMouseEnter/onMouseLeave behaviour without needing JS for it. */
.au-mega { display: none; }
header.au-header:hover .au-mega,
header.au-header:focus-within .au-mega { display: block; }

/* Tablet: fluid width (fills the real device viewport — the fixed 834px
   frame was Claude Design's device-preview scaffolding, not a production
   constraint), taller tap targets, and a checkbox-toggled mega menu (click
   "All"/"Close") instead of hover. */
.au-tablet { background: var(--color-bg); margin: 0; }
.au-tablet .au-frame { background: var(--color-bg); min-height: 100vh; }
.au-tablet .btn { min-height: 44px; }
.au-scroll { overflow-x: auto; scrollbar-width: none; }
.au-scroll::-webkit-scrollbar { display: none; }
#au-mega-toggle:checked ~ header .au-mega-tablet { display: block; }

/* Mobile: fluid width (fills the real device viewport — the fixed 390px
   frame was likewise design-preview scaffolding), a drawer + bottom-sheet
   pattern built entirely with checkbox toggles (no JS) — each checkbox/
   label pair opens on click, and navigating away (a real link inside the
   drawer/sheet) naturally "closes" it since the next page load starts
   unchecked again. */
.au-mobile { background: var(--color-bg); margin: 0; }
.au-mobile .au-frame { position: relative; min-height: 100vh; background: var(--color-bg); }
.au-scroll.au-snap { scroll-snap-type: x mandatory; }
.au-scroll.au-snap > * { scroll-snap-align: start; }

.au-toggle { position: absolute; opacity: 0; pointer-events: none; }
.au-overlay { display: none; position: fixed; inset: 0; z-index: 60; }
.au-overlay-bg { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent); }
#au-drawer-toggle:checked ~ .au-frame #au-drawer-overlay,
#au-filter-toggle:checked ~ .au-frame #au-filter-overlay,
#au-sort-toggle:checked ~ .au-frame #au-sort-overlay { display: flex; }

/* Product page colour/size choices: real radio inputs styled to look like
   the existing swatch/size buttons, so "Add to bag" is one real form
   submission (no JS) that always resolves to a real variant server-side. */
.au-choice { position: absolute; opacity: 0; pointer-events: none; }
.au-choice-label { cursor: pointer; }
.au-choice:checked + .au-choice-label { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent) !important; }
.au-choice:disabled + .au-choice-label { opacity: 0.4; cursor: not-allowed; }

/* Help-centre accordion (mobile): native <details>, custom +/- mark instead
   of the browser's default disclosure triangle. */
.au-accordion summary { list-style: none; }
.au-accordion summary::-webkit-details-marker { display: none; }
.au-accordion .au-accordion-mark::before { content: '+'; }
.au-accordion[open] .au-accordion-mark::before { content: '\2212'; }

/* Blog post body: styles the sanitized Quill/HTML output on the design
   system's own tokens, since HTMLPurifier's output is bare semantic HTML. */
.au-prose > *:first-child { margin-top: 0; }
.au-prose > *:last-child { margin-bottom: 0; }
.au-prose p { margin: 0 0 1.2em; }
.au-prose h2 { font-family: var(--font-heading); font-weight: 600; font-size: 1.5em; margin: 1.6em 0 0.6em; }
.au-prose h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.25em; margin: 1.4em 0 0.6em; }
.au-prose h4 { font-family: var(--font-heading); font-weight: 600; font-size: 1.1em; margin: 1.2em 0 0.5em; }
.au-prose ul, .au-prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.au-prose li { margin-bottom: 0.4em; }
.au-prose a { text-decoration: underline; }
.au-prose blockquote { margin: 1.4em 0; padding-left: 1em; border-left: 2px solid var(--color-divider); color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.au-prose img { display: block; max-width: 100%; height: auto; margin: 1.4em 0; }