/* =====================================================================
   base.css
   Loaded by every page. Holds the design tokens, the reset, typography,
   the flexbox grid and the small set of utility classes the templates use.
   Components (buttons, cards, forms, modals ...) live in components.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Tokens
   Primitives first (raw values), then the semantic names components use.
   A component should only ever reference the semantic layer.
   --------------------------------------------------------------------- */
:root {
    /* Neutrals: slightly warm so the page does not read blue-grey */
    --gray-0:   #ffffff;
    --gray-25:  #fbfbfa;
    --gray-50:  #f6f6f4;
    --gray-100: #efeeeb;
    --gray-200: #e3e2de;
    --gray-300: #d0cec9;
    --gray-400: #a8a59f;
    --gray-500: #7a7771;
    --gray-600: #5b5954;
    --gray-700: #42403c;
    --gray-800: #2b2a27;
    --gray-900: #1c1b19;

    /* One accent, used for links and focus only */
    --blue-50:  #eef3fa;
    --blue-100: #dbe6f4;
    --blue-600: #2a5aa6;
    --blue-700: #21498a;

    /* Functional tones: one tint and one text value per meaning */
    --green-50:  #edf6f0;
    --green-200: #bfdcc8;
    --green-700: #1f6a3b;
    --amber-50:  #fdf5e5;
    --amber-200: #f0d9a6;
    --amber-700: #84560a;
    --red-50:    #fcefed;
    --red-200:   #f0c4bf;
    --red-600:   #b42318;
    --red-700:   #8f1d14;

    /* Surfaces */
    --surface:        var(--gray-0);
    --surface-muted:  var(--gray-50);
    --surface-sunken: var(--gray-100);
    --surface-inverse: var(--gray-900);

    /* Text */
    --text:          var(--gray-900);
    --text-secondary: var(--gray-600);
    --text-muted:    var(--gray-500);
    --text-inverse:  var(--gray-0);
    --text-link:     var(--blue-600);

    /* Borders */
    --border:        var(--gray-200);
    --border-strong: var(--gray-300);

    /* Actions */
    --action:        var(--gray-900);
    --action-hover:  var(--gray-700);
    --focus-ring:    0 0 0 3px rgba(42, 90, 166, 0.28);

    /* Tones (badges, alerts, toasts, status text) */
    --success-bg: var(--green-50);
    --success-border: var(--green-200);
    --success-text: var(--green-700);
    --warning-bg: var(--amber-50);
    --warning-border: var(--amber-200);
    --warning-text: var(--amber-700);
    --danger-bg: var(--red-50);
    --danger-border: var(--red-200);
    --danger-text: var(--red-600);
    --info-bg: var(--blue-50);
    --info-border: var(--blue-100);
    --info-text: var(--blue-700);

    /* Typography */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --text-xs:   0.75rem;     /* 12px: badges, captions */
    --text-sm:   0.8125rem;   /* 13px: meta, table headers */
    --text-base: 0.9375rem;   /* 15px: body */
    --text-md:   1.0625rem;   /* 17px: card titles, prices */
    --text-lg:   1.25rem;     /* 20px: section headings */
    --text-xl:   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
    --text-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
    --text-3xl:  clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --leading-tight: 1.2;
    --leading-normal: 1.55;

    /* Spacing: the utility scale (0-5) maps onto these */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 3rem;

    /* Shape */
    --radius-sm: 4px;
    --radius:    6px;
    --radius-lg: 10px;
    --radius-full: 999px;

    /* Elevation: kept low; borders do most of the separating */
    --shadow-sm: 0 1px 2px rgba(28, 27, 25, 0.06);
    --shadow:    0 4px 12px rgba(28, 27, 25, 0.08);
    --shadow-lg: 0 16px 40px rgba(28, 27, 25, 0.16);

    /* Motion: the one place timing is defined. Animate transform, opacity
       (and the reveal blur) only.
       Small state changes (hover, focus, colour) use the short durations.
       Anything that arrives (menus, modals, drawer, content reaching the
       screen) uses the --motion-* tokens on one long, soft curve, so the
       whole site moves the same way. */
    --duration-fast: 120ms;
    --duration: 200ms;
    --duration-slow: 320ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
    --motion-enter: 650ms;      /* menus, modals, drawer, hero text */
    --motion-exit: 240ms;       /* leaving is always quicker than arriving */
    --motion-reveal: 1100ms;    /* content reaching the screen */
    --motion-stagger: 100ms;    /* gap between items arriving together */
    --motion-rise: 1.25rem;
    --motion-blur: 6px;
    /* Hover menus wait briefly before opening (ignores a pointer passing
       over) and before closing (forgives a pointer that slips off) */
    --hover-intent: 80ms;
    --hover-grace: 180ms;
    --popover-open: opacity var(--motion-enter) var(--ease-out) var(--hover-intent),
                    transform var(--motion-enter) var(--ease-out) var(--hover-intent),
                    visibility 0s linear var(--hover-intent);
    --popover-closed: opacity var(--motion-exit) var(--ease) var(--hover-grace),
                      transform var(--motion-exit) var(--ease) var(--hover-grace),
                      visibility 0s linear calc(var(--motion-exit) + var(--hover-grace));
    /* Moving straight to a neighbouring menu: the old one leaves at once */
    --popover-switch: opacity var(--motion-exit) var(--ease),
                      transform var(--motion-exit) var(--ease),
                      visibility 0s linear var(--motion-exit);

    /* Layout */
    --container: 1320px;
    --gutter: 1.5rem;
    --page-gutter: clamp(1rem, 3vw, 1.5rem);
    --control-height: 38px;
    --control-height-sm: 32px;

    /* Layering */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-drawer: 300;
    --z-toast: 500;
}

/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-2);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--text);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

/* Heading look on a different element (keeps the outline correct) */
.h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.h4 { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.h5 { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.h6 { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

p {
    margin: 0 0 var(--space-3);
}

ul, ol {
    margin: 0 0 var(--space-3);
    padding-left: 1.25rem;
}

dl, dd {
    margin: 0;
}

a {
    color: var(--text-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img, svg, video {
    vertical-align: middle;
}

img {
    max-width: 100%;
}

hr {
    margin: var(--space-3) 0;
    border: 0;
    border-top: 1px solid var(--border);
}

table {
    border-collapse: collapse;
}

th {
    text-align: inherit;
}

label {
    display: inline-block;
}

button,
input,
select,
textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

[hidden] {
    display: none !important;
}

small,
.small {
    font-size: var(--text-sm);
}

strong, b {
    font-weight: var(--weight-semibold);
}

code {
    font-family: var(--font-mono);
    font-size: 0.875em;
}

/* One focus style for everything that can take focus */
:focus-visible {
    outline: 2px solid var(--blue-600);
    outline-offset: 2px;
}

/* Inline SVG icons from templates/icons/ size with the text around them */
.icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: -0.125em;
}

.icon-lg { font-size: 1.5rem; }
.icon-xl { font-size: 2.5rem; }

/* ---------------------------------------------------------------------
   Layout: container and the flexbox grid
   .row takes --gx / --gy gutters; columns are flex items.
   Breakpoints (mobile first): sm 576, md 768, lg 992, xl 1200.
   --------------------------------------------------------------------- */
.container,
.container-fluid {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.container {
    max-width: var(--container);
}

.row {
    --gx: var(--gutter);
    --gy: 0px;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--gy));
    margin-inline: calc(-0.5 * var(--gx));
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-inline: calc(0.5 * var(--gx));
    margin-top: var(--gy);
}

.g-0 { --gx: 0px; --gy: 0px; }
.g-2 { --gx: var(--space-2); --gy: var(--space-2); }
.g-3 { --gx: var(--space-3); --gy: var(--space-3); }
.g-4 { --gx: var(--space-4); --gy: var(--space-4); }

.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-4  { flex: 0 0 auto; width: 33.3333%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-8  { flex: 0 0 auto; width: 66.6667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
    .col-sm-6 { flex: 0 0 auto; width: 50%; }
}

@media (min-width: 768px) {
    .col-md-1  { flex: 0 0 auto; width: 8.3333%; }
    .col-md-2  { flex: 0 0 auto; width: 16.6667%; }
    .col-md-3  { flex: 0 0 auto; width: 25%; }
    .col-md-4  { flex: 0 0 auto; width: 33.3333%; }
    .col-md-5  { flex: 0 0 auto; width: 41.6667%; }
    .col-md-6  { flex: 0 0 auto; width: 50%; }
    .col-md-7  { flex: 0 0 auto; width: 58.3333%; }
    .col-md-8  { flex: 0 0 auto; width: 66.6667%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
    .offset-md-6 { margin-left: 50%; }
}

@media (min-width: 992px) {
    .col-lg-2  { flex: 0 0 auto; width: 16.6667%; }
    .col-lg-3  { flex: 0 0 auto; width: 25%; }
    .col-lg-4  { flex: 0 0 auto; width: 33.3333%; }
    .col-lg-5  { flex: 0 0 auto; width: 41.6667%; }
    .col-lg-6  { flex: 0 0 auto; width: 50%; }
    .col-lg-7  { flex: 0 0 auto; width: 58.3333%; }
    .col-lg-8  { flex: 0 0 auto; width: 66.6667%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1200px) {
    .col-xl-3 { flex: 0 0 auto; width: 25%; }
}

/* Stack: vertical flex column with even gaps (replaces d-grid) */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ---------------------------------------------------------------------
   Utilities
   Only the ones the templates use. Spacing scale: 1 = 4px, 2 = 8px,
   3 = 16px, 4 = 24px, 5 = 48px.
   --------------------------------------------------------------------- */

/* Display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
}

/* Flex */
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-fill { flex: 1 1 auto !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }

@media (min-width: 768px) {
    .justify-content-md-end { justify-content: flex-end !important; }
}

/* Margin */
.m-0 { margin: 0 !important; }
.m-auto { margin: auto !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.ms-1 { margin-left: var(--space-1) !important; }
.ms-2 { margin-left: var(--space-2) !important; }
.ms-3 { margin-left: var(--space-3) !important; }
.ms-auto { margin-left: auto !important; }
.me-1 { margin-right: var(--space-1) !important; }
.me-2 { margin-right: var(--space-2) !important; }
.me-3 { margin-right: var(--space-3) !important; }
.ms-4 { margin-left: var(--space-4) !important; }
.mx-auto { margin-inline: auto !important; }
.mx-2 { margin-inline: var(--space-2) !important; }
.my-1 { margin-block: var(--space-1) !important; }
.my-2 { margin-block: var(--space-2) !important; }
.my-4 { margin-block: var(--space-4) !important; }
.my-5 { margin-block: var(--space-5) !important; }

@media (min-width: 992px) {
    .mb-lg-0 { margin-bottom: 0 !important; }
}

/* Padding */
.p-0 { padding: 0 !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: var(--space-5) !important; }
.pt-5 { padding-top: var(--space-5) !important; }
.py-1 { padding-block: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.ps-3 { padding-left: var(--space-3) !important; }
.pe-3 { padding-right: var(--space-3) !important; }
.py-2 { padding-block: var(--space-2) !important; }
.py-3 { padding-block: var(--space-3) !important; }
.py-4 { padding-block: var(--space-4) !important; }
.py-5 { padding-block: var(--space-5) !important; }

/* Sizing */
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.h-100 { height: 100% !important; }

/* Text */
.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.text-nowrap { white-space: nowrap !important; }
.text-uppercase { text-transform: uppercase !important; letter-spacing: 0.04em; }
.text-break { word-break: break-word !important; overflow-wrap: anywhere; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-line-through { text-decoration: line-through !important; }
.fw-normal { font-weight: var(--weight-normal) !important; }
.fw-medium { font-weight: var(--weight-medium) !important; }
.fw-semibold { font-weight: var(--weight-semibold) !important; }
.fw-bold { font-weight: var(--weight-bold) !important; }
.fst-italic { font-style: italic !important; }
.lead { font-size: var(--text-md); color: var(--text-secondary); }

@media (min-width: 768px) {
    .text-md-start { text-align: left !important; }
    .text-md-end { text-align: right !important; }
}

/* Text colour: neutral first, tones only where the meaning needs it */
.text-body { color: var(--text) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-success { color: var(--success-text) !important; }
.text-warning { color: var(--warning-text) !important; }
.text-danger { color: var(--danger-text) !important; }
.text-white { color: var(--text-inverse) !important; }

.text-decoration-none { text-decoration: none !important; }

/* Background */
.bg-muted { background: var(--surface-muted) !important; }

/* Borders */
.border { border: 1px solid var(--border) !important; }
.rounded { border-radius: var(--radius) !important; }
.rounded-circle { border-radius: 50% !important; }
.border-top { border-top: 1px solid var(--border) !important; }
.border-bottom { border-bottom: 1px solid var(--border) !important; }
.border-0 { border: 0 !important; }

/* Lists */
.scroll-panel {
    max-height: 400px;
    overflow-y: auto;
}

.scroll-panel-sm {
    max-height: 240px;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

/* Position */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.top-0 { top: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.start-0 { left: 0 !important; }
.end-0 { right: 0 !important; }

/* Images */
.img-fluid {
    max-width: 100%;
    height: auto;
}

.align-middle { vertical-align: middle !important; }

/* Interaction */
.cursor-pointer { cursor: pointer; }

/* Screen-reader only */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------------------------------------------------------------------
   Motion helpers (storefront and dashboard). Reuse these instead of
   writing new keyframes or durations.
   .fade-in / .fade-up       play once when the element is rendered
   .popover                  hidden until .is-open is added; hover menus set
                             the same open state from their own :hover rule
   [data-reveal]             the element arrives as it reaches the screen
   [data-reveal-group]       each child arrives as it reaches the screen;
                             ="together" brings them all in when the group
                             arrives (horizontal scrollers)
   img.img-pending           set by ui.js while a lazy image loads
   --------------------------------------------------------------------- */
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(calc(var(--motion-rise) * 0.5)); }
    to   { opacity: 1; transform: none; }
}

@keyframes reveal-in {
    from {
        opacity: 0;
        transform: translateY(var(--motion-rise));
        filter: blur(var(--motion-blur));
    }
}

.fade-in { animation: fade-in var(--motion-enter) var(--ease-out) backwards; }
.fade-up { animation: fade-up var(--motion-enter) var(--ease-out) backwards; }

.popover {
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--motion-rise) * 0.5));
    transition: var(--popover-closed);
}

.popover.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: var(--popover-open);
}

/* Scroll reveal. Content already on screen when the page loads plays this
   entrance straight away (CSS only, so it never flickers if JS is late).
   ui.js marks content below the fold .reveal-ready and brings it in as it
   reaches the screen; .is-revealed stops the entrance replaying afterwards. */
[data-reveal]:not(.reveal-ready, .is-revealed),
[data-reveal-group] > :not(.reveal-ready, .is-revealed) {
    animation: reveal-in var(--motion-reveal) var(--ease-out) var(--reveal-delay, 0ms) backwards;
}

[data-reveal-group] > :nth-child(2) { --reveal-delay: calc(var(--motion-stagger) * 1); }
[data-reveal-group] > :nth-child(3) { --reveal-delay: calc(var(--motion-stagger) * 2); }
[data-reveal-group] > :nth-child(4) { --reveal-delay: calc(var(--motion-stagger) * 3); }
[data-reveal-group] > :nth-child(5) { --reveal-delay: calc(var(--motion-stagger) * 4); }
[data-reveal-group] > :nth-child(n+6) { --reveal-delay: calc(var(--motion-stagger) * 5); }

.reveal-ready {
    opacity: 0;
    transform: translateY(var(--motion-rise));
    filter: blur(var(--motion-blur));
    pointer-events: none;
    transition: opacity var(--motion-reveal) var(--ease-out) var(--reveal-step, 0ms),
                transform var(--motion-reveal) var(--ease-out) var(--reveal-step, 0ms),
                filter var(--motion-reveal) var(--ease-out) var(--reveal-step, 0ms);
}

.reveal-ready.is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Items arriving in the same batch come in one after another (ui.js numbers them) */
.reveal-step-1 { --reveal-step: calc(var(--motion-stagger) * 1); }
.reveal-step-2 { --reveal-step: calc(var(--motion-stagger) * 2); }
.reveal-step-3 { --reveal-step: calc(var(--motion-stagger) * 3); }
.reveal-step-4 { --reveal-step: calc(var(--motion-stagger) * 4); }
.reveal-step-5 { --reveal-step: calc(var(--motion-stagger) * 5); }

/* Page content eases in. Opacity only: a transform here would become the
   containing block for fixed-position children while it runs. */
.site-main,
#main-content {
    animation: fade-in var(--motion-enter) var(--ease-out) backwards;
}

/* :where keeps this at zero specificity so component transitions still win */
:where(img[loading="lazy"]) {
    transition: opacity var(--motion-reveal) var(--ease-out);
}

img.img-pending {
    opacity: 0;
}

@media print {
    .reveal-ready {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* Whole-page reduced motion: keeps state changes, drops the movement */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}