/* ==========================================================================
   Juliana — storefront design system
   LiquidServer plan §5.2/§9.3 (.agents/plans/liquidserver-juliana-theme.md)

   Starting point: the Achromatic neutral oklch palette already used by the
   admin dashboard and ThemeBuilder (resources/css/app.css) — reused here
   verbatim under a --jl- prefix so this file stays a self-contained asset
   (no @import across the themes/ boundary) while remaining visually
   traceable back to the same system. Layered on top: a warm terracotta
   accent + an editorial serif display face, which is what gives Juliana its
   own boutique personality instead of reading as a clone of the grayscale
   admin UI. See this task's final report for the reasoning; flagged to
   Rosn/Monica as a decision worth confirming, not a silent default.

   Custom properties are intentionally named close to the pattern already
   used by other themes' ThemeBuilder-editable variables (--tb-hero-border-radius,
   --tb-product-card-border-radius — see ThemeBuilderSetting::getDefaultCssVars())
   and theme-prefixed ones (--rv-*, --nanika-*) so this file is a drop-in
   source for ThemeBuilderSetting::parseCssVarsFromFile('juliana') once step 5
   points that method at themes/juliana/assets/juliana.css (it does not yet —
   today it only scans Modules/Store{Type}/resources/js/themes/{theme}/styles;
   flagged in this task's report).
   ========================================================================== */

/* ─── Design tokens ───────────────────────────────────────────────────── */

:root {
    /* Neutrals — verbatim Achromatic oklch scale (resources/css/app.css :root) */
    --jl-bg: oklch(1 0 0);
    --jl-bg-subtle: oklch(0.98 0 0);
    --jl-surface: oklch(1 0 0);
    --jl-surface-muted: oklch(0.97 0 0);
    --jl-border: oklch(0.922 0 0);
    --jl-input: oklch(0.922 0 0);
    --jl-ring: oklch(0.87 0 0);
    --jl-text: oklch(0.145 0 0);
    --jl-text-secondary: oklch(0.35 0 0);
    --jl-text-muted: oklch(0.556 0 0);
    --jl-text-on-dark: oklch(0.985 0 0);

    /* Accent — Juliana's own layer: warm terracotta (Tailwind orange-700/800/50,
       chosen for a verified >= 4.5:1 contrast with white text at these exact
       shades, not eyeballed — see report). Independent of light/dark mode:
       button contrast only depends on this pair, never on the page background. */
    --jl-accent: #c2410c;
    --jl-accent-hover: #9a3412;
    --jl-accent-subtle: #fff7ed;
    --jl-accent-foreground: #ffffff;

    /* Semantic */
    --jl-success: #15803d;
    --jl-success-subtle: #f0fdf4;
    --jl-danger: #b91c1c;
    --jl-danger-subtle: #fef2f2;

    /* Typography */
    --jl-font-sans:
        'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --jl-font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;

    /* Shape / rhythm */
    --jl-radius: 0.625rem;
    --jl-radius-sm: calc(var(--jl-radius) - 4px);
    --jl-radius-lg: calc(var(--jl-radius) + 6px);
    --jl-container: 1280px;
    --jl-gutter: 1.25rem;

    /* ThemeBuilder hooks shared across every Moteki theme — same names/
       defaults as the other themes' stylesheets on purpose (see
       ThemeBuilderSetting::getDefaultCssVars()) so a merchant switching
       themes keeps a familiar radius control. */
    --tb-hero-border-radius: 0px;
    --tb-product-card-border-radius: 0.5rem;

    --jl-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.04);
    --jl-shadow-md: 0 8px 24px oklch(0 0 0 / 0.08);
    --jl-shadow-lg: 0 24px 48px oklch(0 0 0 / 0.14);

    /* Header nav links (themebuilder-canvas-editor plan step 16) — a
       dedicated override point distinct from --jl-text-secondary/--jl-text
       (used by many unrelated components) so a future _header style panel
       can expose "nav link color" without also touching everything else
       that happens to share those tokens. Defaults preserve today's look
       (desktop .jl-nav a used --jl-text-secondary/--jl-text directly;
       .jl-mobile-nav a had no color rule at all and fell through to the
       global `a { color: inherit }` reset — both are now var-backed). */
    --jl-nav-link-color: var(--jl-text-secondary);
    --jl-nav-link-hover-color: var(--jl-text);
}

@media (prefers-color-scheme: dark) {
    :root {
        --jl-bg: oklch(0.145 0 0);
        --jl-bg-subtle: oklch(0.17 0 0);
        --jl-surface: oklch(0.19 0 0);
        --jl-surface-muted: oklch(0.269 0 0);
        --jl-border: oklch(0.269 0 0);
        --jl-input: oklch(0.269 0 0);
        --jl-ring: oklch(0.439 0 0);
        --jl-text: oklch(0.985 0 0);
        --jl-text-secondary: oklch(0.85 0 0);
        --jl-text-muted: oklch(0.708 0 0);
        --jl-accent-subtle: #2a1608;
        --jl-success-subtle: #062e17;
        --jl-danger-subtle: #2c0b0b;
        --jl-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
        --jl-shadow-md: 0 8px 24px oklch(0 0 0 / 0.5);
        --jl-shadow-lg: 0 24px 48px oklch(0 0 0 / 0.6);
    }
}

/* ─── Reset ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--jl-font-sans);
    background: var(--jl-bg);
    color: var(--jl-text);
    line-height: 1.55;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}
img, picture, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

h1, h2, h3, .jl-display {
    font-family: var(--jl-font-display);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Skip link — WCAG 2.4.1 bypass block */
.jl-skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 100;
    background: var(--jl-text);
    color: var(--jl-bg);
    padding: 0.75rem 1.25rem;
    border-radius: var(--jl-radius-sm);
}
.jl-skip-link:focus { top: 1rem; }

/* Consistent visible focus ring everywhere (buttons, links, inputs) */
:focus-visible {
    outline: 2px solid var(--jl-accent);
    outline-offset: 2px;
}

/* ─── Layout primitives ───────────────────────────────────────────────── */

.jl-container {
    width: 100%;
    max-width: var(--jl-container);
    margin-inline: auto;
    padding-inline: var(--jl-gutter);
}

.jl-section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.jl-section--tight { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.jl-section-head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    text-align: center;
}
.jl-section-head--start { text-align: start; align-items: flex-start; }
.jl-eyebrow {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jl-accent);
}
.jl-section-title { font-size: clamp(1.5rem, 3vw, 2.25rem); color: var(--jl-text); }
.jl-section-desc { color: var(--jl-text-muted); max-width: 42rem; margin-inline: auto; }
.jl-section-head--start .jl-section-desc { margin-inline: 0; }

.jl-grid { display: grid; gap: 1.5rem; }
.jl-grid-2 { grid-template-columns: repeat(1, 1fr); }
.jl-grid-3 { grid-template-columns: repeat(1, 1fr); }
.jl-grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
    .jl-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .jl-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .jl-grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .jl-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .jl-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.jl-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── Buttons ──────────────────────────────────────────────────────────── */

.jl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding-inline: 1.5rem;
    border-radius: var(--jl-radius-sm);
    font-weight: 600;
    font-size: 0.9375rem;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
}
.jl-btn:active { transform: translateY(1px); }
.jl-btn:disabled, .jl-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

.jl-btn--primary { background: var(--jl-accent); color: var(--jl-accent-foreground); }
.jl-btn--primary:hover:not(:disabled) { background: var(--jl-accent-hover); }

.jl-btn--secondary { background: var(--jl-text); color: var(--jl-bg); }
.jl-btn--secondary:hover:not(:disabled) { opacity: 0.85; }

.jl-btn--outline { background: transparent; border-color: var(--jl-text); color: var(--jl-text); }
.jl-btn--outline:hover:not(:disabled) { background: var(--jl-text); color: var(--jl-bg); }

.jl-btn--ghost { background: transparent; color: var(--jl-text); }
.jl-btn--ghost:hover:not(:disabled) { background: var(--jl-surface-muted); }

.jl-btn--danger { background: transparent; border-color: var(--jl-danger); color: var(--jl-danger); }
.jl-btn--danger:hover:not(:disabled) { background: var(--jl-danger); color: var(--jl-danger-foreground, #fff); }

.jl-btn--block { width: 100%; }
.jl-btn--sm { min-height: 2.25rem; padding-inline: 1rem; font-size: 0.875rem; }
.jl-btn--icon { min-height: 2.5rem; min-width: 2.5rem; padding: 0; border-radius: 999px; }

/* ─── Forms ────────────────────────────────────────────────────────────── */

.jl-field { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; }
.jl-label { font-size: 0.8125rem; font-weight: 600; color: var(--jl-text-secondary); }
.jl-label .jl-required { color: var(--jl-danger); margin-inline-start: 0.125rem; }

.jl-input, .jl-select, .jl-textarea {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--jl-surface);
    border: 1px solid var(--jl-input);
    border-radius: var(--jl-radius-sm);
    color: var(--jl-text);
    font-size: 0.9375rem;
    line-height: 1.4;
    font-family: inherit;
}
.jl-textarea { min-height: 6rem; resize: vertical; }
.jl-input::placeholder, .jl-textarea::placeholder { color: var(--jl-text-muted); }
.jl-input:focus, .jl-select:focus, .jl-textarea:focus {
    outline: none;
    border-color: var(--jl-accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--jl-accent) 20%, transparent);
}
.jl-field-error { font-size: 0.8125rem; color: var(--jl-danger); }
.jl-field--invalid .jl-input,
.jl-field--invalid .jl-select,
.jl-field--invalid .jl-textarea { border-color: var(--jl-danger); }

.jl-field-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .jl-field-row--2 { grid-template-columns: 1fr 1fr; } }

/* ─── Account dashboard (profile / security / addresses / orders / wishlist) ─ */
/* Same sidebar+content grid shape as .jl-collection-layout, reused rather
   than invented fresh — plan .agents/plans/juliana-account-dashboard.md §1. */
.jl-account-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .jl-account-layout { grid-template-columns: 14rem 1fr; } }
/* A section rendered inside the layout can carry extra full-width content
   after its own main block (e.g. slot_wishlist_grid.liquid's "you may also
   like" row) — let it span both columns instead of being squeezed into
   the content column's width. */
.jl-account-layout > .jl-section { grid-column: 1 / -1; }

/* themebuilder-canvas-editor plan step 12c — slot_account_nav and each
   page's own primary content slot are now composable, independently
   orderable sections (see e.g. templates/profile.liquid's own docblock)
   rather than always-both-present fixed markup in this exact order, so
   this grid can no longer rely on plain source order at the desktop
   breakpoint the way it always used to (mobile: 1 column, order doesn't
   matter visually). Pin slot_account_nav to the narrow aside column
   explicitly; every other direct child that uses the shared
   `.jl-account-panel` class (every content slot in this batch — profile
   welcome, profile/password/address forms, order list, wishlist grid) goes
   in the wide content column — same two-rule pinning idiom
   .jl-collection-layout uses for collection-filters/slot_product_grid,
   applied here for the same reason (a merchant-chosen order must not swap
   which column is 14rem vs 1fr). */
@media (min-width: 1024px) {
    .jl-account-layout > [data-tb-section-type="slot_account_nav"] { grid-column: 1; }
    .jl-account-layout > .jl-account-panel { grid-column: 2; }
}

.jl-account-nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.375rem; }
@media (min-width: 1024px) { .jl-account-nav { flex-direction: column; } }
.jl-account-nav__link { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem; border-radius: var(--jl-radius-sm); font-size: 0.9375rem; color: var(--jl-text-secondary); }
.jl-account-nav__link:hover { background: var(--jl-surface-muted); color: var(--jl-text); }
.jl-account-nav__link.is-active { background: var(--jl-surface-muted); color: var(--jl-text); font-weight: 600; }
.jl-account-nav__link svg { flex-shrink: 0; }

/* Compact card treatment for the account forms — sits in the content column. */
.jl-account-panel { background: var(--jl-surface); border: 1px solid var(--jl-border); border-radius: var(--jl-radius-lg); padding: clamp(1.5rem, 4vw, 2rem); margin-bottom: 1.5rem; }
.jl-account-heading { text-align: start; padding-block: clamp(1.5rem, 3vw, 2rem) 1rem; }
.jl-account-heading__title { font-size: clamp(1.375rem, 2.5vw, 1.75rem); }

.jl-account-welcome__heading { font-family: var(--jl-font-display); font-size: 1.375rem; margin: 0 0 0.25rem; }
.jl-account-welcome__email { color: var(--jl-text-secondary); margin: 0 0 1.5rem; }
@media (min-width: 640px) { .jl-field-row--3 { grid-template-columns: repeat(3, 1fr); } }

.jl-checkbox-row { display: flex; align-items: flex-start; gap: 0.625rem; }
.jl-checkbox-row input { margin-top: 0.2rem; accent-color: var(--jl-accent); width: 1.05rem; height: 1.05rem; }

/* ─── Header ───────────────────────────────────────────────────────────── */

.jl-announcement {
    background: var(--jl-text);
    color: var(--jl-bg);
    text-align: center;
    font-size: 0.8125rem;
    padding: 0.5rem var(--jl-gutter);
}

.jl-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in oklch, var(--jl-bg) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--jl-border);
}
.jl-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
}
.jl-header__logo { font-family: var(--jl-font-display); font-size: 1.375rem; font-weight: 600; }
.jl-header__logo img { max-height: 2.25rem; width: auto; }

.jl-nav { display: none; align-items: center; gap: 1.75rem; }
@media (min-width: 1024px) { .jl-nav { display: flex; } }
.jl-nav a { font-size: 0.9375rem; font-weight: 500; color: var(--jl-nav-link-color); }
.jl-nav a:hover { color: var(--jl-nav-link-hover-color); }

.jl-header__actions { display: flex; align-items: center; gap: 0.25rem; }
.jl-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    color: var(--jl-text);
}
.jl-icon-btn:hover { background: var(--jl-surface-muted); }
.jl-icon-btn svg { width: 1.25rem; height: 1.25rem; }
/* ─── Language switcher ────────────────────────────────────────────────── */
.jl-lang-switcher { position: relative; }
.jl-lang-switcher > summary { list-style: none; cursor: pointer; gap: 0.125rem; }
.jl-lang-switcher > summary::-webkit-details-marker { display: none; }
.jl-lang-switcher__code { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; }
.jl-lang-switcher__menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 0.375rem);
    min-width: 9rem;
    background: var(--jl-surface);
    border: 1px solid var(--jl-border);
    border-radius: var(--jl-radius-sm);
    box-shadow: var(--jl-shadow-md);
    padding: 0.375rem;
    z-index: 40;
}
.jl-lang-switcher__option { display: block; width: 100%; text-align: start; padding: 0.5rem 0.625rem; border-radius: var(--jl-radius-sm); font-size: 0.875rem; color: var(--jl-text); background: none; }
.jl-lang-switcher__option:hover { background: var(--jl-surface-muted); }
.jl-lang-switcher__option.is-active { font-weight: 600; color: var(--jl-accent); }
.jl-badge-count {
    position: absolute;
    top: -0.125rem;
    inset-inline-end: -0.125rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding-inline: 0.25rem;
    border-radius: 999px;
    background: var(--jl-accent);
    color: var(--jl-accent-foreground);
    font-size: 0.6875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jl-nav-toggle { display: inline-flex; }
@media (min-width: 1024px) { .jl-nav-toggle { display: none; } }

.jl-mobile-nav {
    display: none;
    border-top: 1px solid var(--jl-border);
    padding: 1rem var(--jl-gutter) 1.5rem;
    background: var(--jl-bg);
}
.jl-mobile-nav.is-open { display: block; }
.jl-mobile-nav a {
    display: block;
    padding-block: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--jl-nav-link-color);
    border-bottom: 1px solid var(--jl-border);
}
.jl-mobile-nav a:hover { color: var(--jl-nav-link-hover-color); }

/* ─── Footer ───────────────────────────────────────────────────────────── */

.jl-footer { background: var(--jl-surface-muted); border-top: 1px solid var(--jl-border); margin-top: 4rem; }
.jl-footer__grid {
    display: grid;
    gap: 2.5rem;
    padding-block: 3rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) { .jl-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.jl-footer__brand { font-family: var(--jl-font-display); font-size: 1.25rem; margin-bottom: 0.75rem; }
.jl-footer__desc { color: var(--jl-text-muted); font-size: 0.9375rem; max-width: 26rem; }
.jl-footer__heading { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem; color: var(--jl-text-secondary); }
.jl-footer__links li { margin-bottom: 0.625rem; }
.jl-footer__links a { color: var(--jl-text-muted); font-size: 0.9375rem; }
.jl-footer__links a:hover { color: var(--jl-text); }
.jl-footer__bottom {
    border-top: 1px solid var(--jl-border);
    padding-block: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--jl-text-muted);
}
.jl-social { display: flex; gap: 0.5rem; }

/* ─── Hero / slideshow ─────────────────────────────────────────────────── */

.jl-hero {
    position: relative;
    border-radius: var(--tb-hero-border-radius);
    overflow: hidden;
    min-height: min(70vh, 640px);
    display: flex;
    align-items: flex-end;
    background: var(--jl-surface-muted);
}
.jl-hero__media { position: absolute; inset: 0; z-index: 0; }
.jl-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.jl-hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(0deg, oklch(0 0 0 / 0.55) 0%, oklch(0 0 0 / 0.05) 55%);
}
.jl-hero__content {
    position: relative; z-index: 2;
    padding: clamp(1.75rem, 5vw, 4rem);
    color: var(--jl-text-on-dark);
    max-width: 34rem;
}
.jl-hero__eyebrow { color: #fdba74; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8125rem; }
/* themebuilder-canvas-editor plan step 14 (§2) — var-ified so the style
   panel's "Size" control (hero-banner/hero-slideshow) has a real property
   to drive. The fallback is the EXACT previous clamp() — no visual change
   for a store with no override; a merchant who picks a curated scale value
   trades the fluid clamp for that fixed size, deliberately (an explicit
   opt-in, not a default-behavior change). */
.jl-hero__title { font-size: var(--jl-hero-title-font-size, clamp(2rem, 5vw, 3.25rem)); margin-block: 0.5rem 1rem; }
.jl-hero__desc { color: oklch(0.985 0 0 / 0.85); margin-bottom: 1.5rem; }
.jl-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.jl-hero--flat { min-height: auto; background: var(--jl-accent-subtle); }
.jl-hero--flat .jl-hero__content { color: var(--jl-text); padding-block: clamp(3rem, 8vw, 6rem); max-width: 40rem; }
.jl-hero--flat .jl-hero__eyebrow { color: var(--jl-accent); }
.jl-hero--flat .jl-hero__desc { color: var(--jl-text-secondary); }

.jl-slideshow { position: relative; }
.jl-slideshow__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--tb-hero-border-radius); overflow: hidden; }
.jl-slideshow__track::-webkit-scrollbar { display: none; }
.jl-slideshow__slide { flex: 0 0 100%; scroll-snap-align: start; }
.jl-slideshow__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
.jl-slideshow__dots button { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--jl-border); padding: 0; }
.jl-slideshow__dots button[aria-current="true"] { background: var(--jl-accent); width: 1.25rem; }

/* ─── Category showcase ───────────────────────────────────────────────── */

.jl-category-card {
    position: relative;
    border-radius: var(--jl-radius);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--jl-surface-muted);
}
.jl-category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.jl-category-card:hover img { transform: scale(1.05); }
.jl-category-card__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, oklch(0 0 0 / 0.55), transparent 60%); }
.jl-category-card__label {
    position: absolute; inset-inline: 0; bottom: 0;
    padding: 1rem;
    color: #fff;
    font-family: var(--jl-font-display);
    font-size: 1.0625rem;
}
.jl-category-card__count { display: block; font-family: var(--jl-font-sans); font-size: 0.8125rem; opacity: 0.85; }

/* ─── Product card / grid ─────────────────────────────────────────────── */

.jl-product-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--tb-product-card-border-radius);
    overflow: hidden;
    background: var(--jl-surface);
}
.jl-product-card__media {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--jl-surface-muted);
    overflow: hidden;
    border-radius: inherit;
}
.jl-product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.jl-product-card:hover .jl-product-card__media img { transform: scale(1.04); }
.jl-product-card__badge {
    position: absolute; top: 0.625rem; inset-inline-start: 0.625rem;
    background: var(--jl-accent); color: var(--jl-accent-foreground);
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.03em;
    padding: 0.25rem 0.5rem; border-radius: var(--jl-radius-sm);
}
.jl-product-card__wishlist {
    position: absolute; top: 0.5rem; inset-inline-end: 0.5rem;
    width: 2.25rem; height: 2.25rem; border-radius: 999px;
    background: color-mix(in oklch, var(--jl-bg) 85%, transparent);
    display: flex; align-items: center; justify-content: center;
}
.jl-product-card__body { padding-block: 0.875rem 0.25rem; display: flex; flex-direction: column; gap: 0.25rem; }
.jl-product-card__category { font-size: 0.75rem; color: var(--jl-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.jl-product-card__name { font-size: 0.9375rem; font-weight: 600; color: var(--jl-text); }
.jl-product-card__rating { display: flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; color: var(--jl-text-muted); }

.jl-price { display: inline-flex; align-items: baseline; gap: 0.5rem; font-weight: 700; }
.jl-price__sale { color: var(--jl-accent); }
.jl-price__compare { color: var(--jl-text-muted); text-decoration: line-through; font-weight: 500; font-size: 0.875rem; }

.jl-product-carousel { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 0.5rem; }
.jl-product-carousel .jl-product-card { flex: 0 0 clamp(12rem, 42vw, 16rem); scroll-snap-align: start; }
@media (min-width: 1024px) { .jl-product-carousel { overflow: visible; display: grid; grid-template-columns: repeat(4, 1fr); } .jl-product-carousel .jl-product-card { flex: initial; } }

/* ─── Marquee ──────────────────────────────────────────────────────────── */

.jl-marquee { overflow: hidden; border-block: 1px solid var(--jl-border); background: var(--jl-surface-muted); }
.jl-marquee__track {
    display: flex; width: max-content;
    animation: jl-marquee 28s linear infinite;
}
[dir="rtl"] .jl-marquee__track { animation-direction: reverse; }
.jl-marquee__item { padding: 1rem 2.5rem; font-family: var(--jl-font-display); font-size: 1.25rem; white-space: nowrap; }
@keyframes jl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir="rtl"] .jl-marquee__track { animation-name: jl-marquee-rtl; }
@keyframes jl-marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ─── Testimonials ─────────────────────────────────────────────────────── */

.jl-testimonial { background: var(--jl-surface); border: 1px solid var(--jl-border); border-radius: var(--jl-radius); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.jl-testimonial__stars { color: var(--jl-accent); letter-spacing: 0.1em; }
.jl-testimonial__quote { color: var(--jl-text-secondary); font-family: var(--jl-font-display); font-size: 1.0625rem; }
.jl-testimonial__author { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; color: var(--jl-text-muted); }
.jl-testimonial__author img { width: 2.25rem; height: 2.25rem; border-radius: 999px; object-fit: cover; }

/* ─── Promo / multi-content banner ────────────────────────────────────── */

.jl-promo { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 768px) { .jl-promo { grid-template-columns: 1fr 1fr; } }
.jl-promo__panel { border-radius: var(--jl-radius); overflow: hidden; position: relative; min-height: 18rem; display: flex; align-items: flex-end; }
.jl-promo__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.jl-promo__panel-content { position: relative; z-index: 1; padding: 1.75rem; color: #fff; }
.jl-promo__panel-content .jl-btn { margin-top: 0.75rem; }
/* themebuilder-canvas-editor plan step 14 (§2) — was a hardcoded inline
   `style="font-size: 1.5rem;"` on the section's own h3 (sections/
   promo-banner.liquid); var-ified so the style panel's "Size" control has a
   real property to drive. Fallback preserves the exact previous value —
   no visual change for a store with no override. */
.jl-promo__panel-heading { font-size: var(--jl-promo-heading-font-size, 1.5rem); }

/* ─── Breadcrumb ───────────────────────────────────────────────────────── */

.jl-breadcrumb { display: flex; flex-wrap: wrap; gap: 0.375rem; font-size: 0.8125rem; color: var(--jl-text-muted); margin-bottom: 1rem; }
.jl-breadcrumb a:hover { color: var(--jl-text); }
.jl-breadcrumb__sep { color: var(--jl-border); }
[dir="rtl"] .jl-breadcrumb__sep { transform: scaleX(-1); display: inline-block; }

/* ─── Page heading ─────────────────────────────────────────────────────── */

.jl-page-heading { text-align: center; padding-block: clamp(2rem, 5vw, 3.5rem) 1.5rem; }
.jl-page-heading__title { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.jl-page-heading__desc { color: var(--jl-text-muted); max-width: 40rem; margin: 0.75rem auto 0; }

/* ─── Product detail page ─────────────────────────────────────────────── */

.jl-pdp { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .jl-pdp { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; } }

.jl-pdp-gallery__main { border-radius: var(--jl-radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--jl-surface-muted); }
.jl-pdp-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.jl-pdp-gallery__thumbs { display: flex; gap: 0.625rem; margin-top: 0.75rem; overflow-x: auto; }
.jl-pdp-gallery__thumbs button { flex: 0 0 4.5rem; aspect-ratio: 1; border-radius: var(--jl-radius-sm); overflow: hidden; border: 2px solid transparent; padding: 0; }
.jl-pdp-gallery__thumbs button[aria-current="true"] { border-color: var(--jl-accent); }
.jl-pdp-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.jl-pdp-info__category { font-size: 0.8125rem; color: var(--jl-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.jl-pdp-info__title { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-block: 0.375rem 0.75rem; }
.jl-pdp-info__rating { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--jl-text-muted); margin-bottom: 1rem; }
.jl-pdp-info__price { font-size: 1.5rem; margin-bottom: 1.25rem; }
.jl-pdp-info__desc { color: var(--jl-text-secondary); margin-bottom: 1.5rem; }

.jl-variant-group { margin-bottom: 1.25rem; }
.jl-variant-group__label { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.5rem; display: block; }
.jl-variant-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.jl-variant-chip {
    min-width: 2.75rem; height: 2.75rem; padding-inline: 0.75rem;
    border: 1px solid var(--jl-border); border-radius: var(--jl-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.875rem; background: var(--jl-surface);
}
.jl-variant-chip[aria-pressed="true"] { border-color: var(--jl-accent); background: var(--jl-accent-subtle); color: var(--jl-accent); font-weight: 600; }
.jl-variant-chip:disabled { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; }

.jl-qty-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--jl-border); border-radius: var(--jl-radius-sm); overflow: hidden; }
.jl-qty-stepper button { width: 2.75rem; background: var(--jl-surface-muted); }
.jl-qty-stepper input { width: 3rem; text-align: center; border: none; border-inline: 1px solid var(--jl-border); }

.jl-pdp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block: 1.5rem; }
.jl-pdp-actions .jl-btn--primary { flex: 1 1 12rem; }

.jl-trust-list { display: grid; gap: 0.75rem; margin-block: 1.5rem; padding: 1rem; background: var(--jl-surface-muted); border-radius: var(--jl-radius); }
.jl-trust-list li { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.875rem; color: var(--jl-text-secondary); }
.jl-trust-list svg { flex: none; width: 1.125rem; height: 1.125rem; color: var(--jl-accent); margin-top: 0.125rem; }

.jl-accordion { border-top: 1px solid var(--jl-border); }
.jl-accordion__item { border-bottom: 1px solid var(--jl-border); }
.jl-accordion__trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding-block: 1rem; background: none; border: none; text-align: start; font-weight: 600;
}
.jl-accordion__trigger .jl-accordion__icon { transition: transform 0.2s ease; }
.jl-accordion__item[open] .jl-accordion__icon { transform: rotate(45deg); }
.jl-accordion__panel { padding-bottom: 1rem; color: var(--jl-text-secondary); }

/* ─── Collection / filters ────────────────────────────────────────────── */

/* themebuilder-canvas-editor plan step 12b — collection-filters.liquid
   (`.jl-filters`, the <form> itself) and slot_product_grid.liquid
   (`.jl-collection-layout__grid`) are now composable, independently
   orderable/removable sections (see templates/collection.liquid's own
   docblock) rather than always-both-present fixed markup, so this grid can
   no longer rely on plain source order (mobile: 1 column, order doesn't
   matter visually; desktop: 2 columns, source order used to be the ONLY
   thing deciding which one was the narrow aside vs. the wide main column).
   The two rules below pin each section to its correct desktop column by
   its own `data-tb-section-type` regardless of the merchant-chosen
   order — mobile stacking still follows that order (single column, so
   "which one visually renders first" is exactly what reordering these two
   sections in the builder should control). The `:only-child` rule (both
   breakpoints) handles the collection-filters-disabled case: without it, a
   lone slot_product_grid would keep the explicit `grid-column: 2` below and
   be squeezed into the narrow aside slot rather than spanning full width —
   higher selector specificity here (compound attribute selector + pseudo-
   class vs. the plain attribute selector) wins without needing
   `!important`. */
.jl-collection-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
    .jl-collection-layout { grid-template-columns: 15.5rem 1fr; }
    .jl-collection-layout > [data-tb-section-type="collection-filters"] { grid-column: 1; }
    .jl-collection-layout > [data-tb-section-type="slot_product_grid"] { grid-column: 2; }
}
.jl-collection-layout > [data-tb-section-type="collection-filters"]:only-child,
.jl-collection-layout > [data-tb-section-type="slot_product_grid"]:only-child {
    grid-column: 1 / -1;
}

.jl-filters { display: flex; flex-direction: column; gap: 1.5rem; }
.jl-filters__group { border-bottom: 1px solid var(--jl-border); padding-bottom: 1.25rem; }
.jl-filters__title { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.75rem; }
.jl-filters__option { display: flex; align-items: center; gap: 0.5rem; padding-block: 0.3rem; font-size: 0.9375rem; }
.jl-filters__option input { accent-color: var(--jl-accent); }

.jl-collection-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.jl-collection-count { color: var(--jl-text-muted); font-size: 0.875rem; }

.jl-pagination { display: flex; justify-content: center; gap: 0.375rem; margin-top: 2.5rem; }
.jl-pagination a, .jl-pagination span {
    min-width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--jl-radius-sm); font-size: 0.875rem; color: var(--jl-text-secondary);
}
.jl-pagination a:hover { background: var(--jl-surface-muted); }
.jl-pagination [aria-current="page"] { background: var(--jl-text); color: var(--jl-bg); }

/* ─── Empty state ──────────────────────────────────────────────────────── */

.jl-empty-state { text-align: center; padding: clamp(3rem, 8vw, 5rem) 1rem; color: var(--jl-text-muted); }
.jl-empty-state svg { width: 3rem; height: 3rem; margin-inline: auto 0; margin-bottom: 1rem; color: var(--jl-border); }
.jl-empty-state__title { font-family: var(--jl-font-display); font-size: 1.25rem; color: var(--jl-text); margin-bottom: 0.5rem; }

/* ─── Cart ─────────────────────────────────────────────────────────────── */

/* themebuilder-canvas-editor plan step 12d — slot_cart_items.liquid
   (`.jl-cart-line` list) and slot_cart_summary.liquid (`.jl-summary`) are
   now composable, independently orderable sections (see
   templates/cart.liquid's own docblock) rather than always-both-present
   fixed markup, so this grid can no longer rely on plain source order
   (mobile: 1 column, order doesn't matter visually; desktop: 2 columns,
   source order used to be the ONLY thing deciding which one was the wide
   line-item list vs. the narrow sticky summary aside). The two rules below
   pin each section to its correct desktop column by its own
   `data-tb-section-type` regardless of the merchant-chosen order — same
   two-rule pinning idiom `.jl-collection-layout`'s own comment explains in
   full for collection-filters/slot_product_grid, applied here for the same
   reason (a merchant-chosen order must not swap which column is 1fr vs.
   22rem). Both slots are required (plan §2/§3.4 — see either section file's
   own docblock), so the `:only-child` fallback that idiom also uses isn't
   needed here: `orderedEnabledSectionTypesWithRequiredSlots()` guarantees
   both are always present in `cart_section_order`. */
.jl-cart-layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) {
    .jl-cart-layout { grid-template-columns: 1fr 22rem; }
    .jl-cart-layout > [data-tb-section-type="slot_cart_items"] { grid-column: 1; }
    .jl-cart-layout > [data-tb-section-type="slot_cart_summary"] { grid-column: 2; }
}

.jl-cart-line { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 1rem; padding-block: 1.25rem; border-bottom: 1px solid var(--jl-border); }
.jl-cart-line__media { width: 5.5rem; height: 5.5rem; border-radius: var(--jl-radius-sm); overflow: hidden; background: var(--jl-surface-muted); }
.jl-cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.jl-cart-line__name { font-weight: 600; margin-bottom: 0.25rem; }
.jl-cart-line__meta { font-size: 0.8125rem; color: var(--jl-text-muted); }
.jl-cart-line__foot { display: flex; align-items: center; gap: 1rem; margin-top: 0.625rem; }
.jl-cart-line__remove { color: var(--jl-text-muted); font-size: 0.8125rem; text-decoration: underline; }
.jl-cart-line__remove:hover { color: var(--jl-danger); }
.jl-cart-line__price { text-align: end; font-weight: 700; white-space: nowrap; }

.jl-summary { position: sticky; top: 5.5rem; background: var(--jl-surface-muted); border-radius: var(--jl-radius); padding: 1.5rem; }
.jl-summary__row { display: flex; justify-content: space-between; padding-block: 0.5rem; font-size: 0.9375rem; color: var(--jl-text-secondary); }
.jl-summary__row--total { font-size: 1.125rem; font-weight: 700; color: var(--jl-text); border-top: 1px solid var(--jl-border); margin-top: 0.5rem; padding-top: 0.875rem; }
.jl-summary__coupon { display: flex; gap: 0.5rem; margin-block: 1rem; }

/* ─── Checkout ─────────────────────────────────────────────────────────── */
/* themebuilder-canvas-editor plan step 12e — slot_checkout_form/
   slot_checkout_summary became direct grid children of this layout (the
   pre-this-step template wrapped each fixed `{% section %}` call in an
   extra plain `<div>`, only ever used as the grid item — removed once each
   section's own root element could be the grid item directly, same
   pinning idiom `.jl-cart-layout`'s own comment explains in full just
   above, applied here for the identical reason: a merchant-chosen order
   must not swap which column is 1fr (the form) vs. 22rem (the sticky order
   review)). Both slots are required (plan §2/§3.5 — see either section
   file's own docblock), so `orderedEnabledSectionTypesWithRequiredSlots()`
   guarantees both are always present in `checkout_section_order`. */
.jl-checkout-layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
    .jl-checkout-layout { grid-template-columns: 1fr 22rem; align-items: start; }
    .jl-checkout-layout > [data-tb-section-type="slot_checkout_form"] { grid-column: 1; }
    .jl-checkout-layout > [data-tb-section-type="slot_checkout_summary"] { grid-column: 2; }
}

.jl-checkout-step { border: 1px solid var(--jl-border); border-radius: var(--jl-radius); padding: 1.5rem; margin-bottom: 1.5rem; }
.jl-checkout-step__title { display: flex; align-items: center; gap: 0.625rem; font-size: 1.0625rem; font-weight: 700; margin-bottom: 1.25rem; }
.jl-checkout-step__badge { width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--jl-accent); color: var(--jl-accent-foreground); display: inline-flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; }

.jl-payment-option {
    display: flex; align-items: center; gap: 0.75rem;
    border: 1px solid var(--jl-border); border-radius: var(--jl-radius-sm);
    padding: 0.875rem 1rem; margin-bottom: 0.625rem;
}
.jl-payment-option:has(input:checked) { border-color: var(--jl-accent); background: var(--jl-accent-subtle); }
.jl-payment-option input { accent-color: var(--jl-accent); }
.jl-payment-option img { height: 1.5rem; margin-inline-start: auto; }

.jl-mini-line { display: flex; gap: 0.75rem; padding-block: 0.75rem; border-bottom: 1px solid var(--jl-border); }
.jl-mini-line__media { position: relative; width: 3.5rem; height: 3.5rem; border-radius: var(--jl-radius-sm); overflow: hidden; background: var(--jl-surface); flex: none; }
.jl-mini-line__media img { width: 100%; height: 100%; object-fit: cover; }
.jl-mini-line__qty {
    position: absolute; top: -0.4rem; inset-inline-end: -0.4rem;
    width: 1.25rem; height: 1.25rem; border-radius: 999px; background: var(--jl-text); color: var(--jl-bg);
    font-size: 0.6875rem; display: flex; align-items: center; justify-content: center;
}
.jl-mini-line__name { font-size: 0.875rem; font-weight: 600; }
.jl-mini-line__price { margin-inline-start: auto; font-weight: 700; font-size: 0.875rem; }

/* ─── Order confirmation ───────────────────────────────────────────────── */

.jl-confirmation-hero { text-align: center; padding-block: clamp(2.5rem, 6vw, 4rem) 2rem; }
.jl-confirmation-hero__icon {
    width: 4rem; height: 4rem; border-radius: 999px; background: var(--jl-success-subtle); color: var(--jl-success);
    display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-bottom: 1.25rem;
}
.jl-confirmation-hero__icon svg { width: 2rem; height: 2rem; }
.jl-order-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 1rem; color: var(--jl-text-muted); font-size: 0.9375rem; }
.jl-order-meta strong { color: var(--jl-text); }

.jl-address-card { background: var(--jl-surface-muted); border-radius: var(--jl-radius); padding: 1.25rem; font-size: 0.9375rem; color: var(--jl-text-secondary); }
.jl-address-card__title { font-weight: 700; color: var(--jl-text); margin-bottom: 0.5rem; }

/* ─── Address book (account page) ─────────────────────────────────────── */

.jl-address-book { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .jl-address-book { grid-template-columns: 1fr 1fr; } }
.jl-address-book__item { position: relative; }
.jl-address-book__item-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.jl-address-book__type { font-weight: 700; color: var(--jl-text); text-transform: capitalize; }
.jl-address-book__default-badge {
    font-size: 0.75rem; font-weight: 600; padding: 0.125rem 0.5rem;
    border-radius: 999px; background: var(--jl-accent); color: var(--jl-accent-foreground);
}
.jl-address-book__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.875rem; }
.jl-address-book__actions form { display: contents; }
.jl-address-book__edit, .jl-address-book__add { width: 100%; }
.jl-address-book__edit summary, .jl-address-book__add summary { list-style: none; cursor: pointer; }
.jl-address-book__edit summary::-webkit-details-marker, .jl-address-book__add summary::-webkit-details-marker { display: none; }
.jl-address-book__edit-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--jl-border); }

/* ─── Order list / status badge ───────────────────────────────────────── */

.jl-order-list { display: flex; flex-direction: column; }
.jl-order-list__row {
    display: grid; grid-template-columns: 1fr auto auto auto auto;
    align-items: center; gap: 1rem; padding-block: 1.25rem;
    border-bottom: 1px solid var(--jl-border); color: inherit;
}
.jl-order-list__row:hover { background: var(--jl-surface-muted); }
.jl-order-list__main { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.jl-order-list__number { font-weight: 700; }
.jl-order-list__date, .jl-order-list__items { font-size: 0.8125rem; color: var(--jl-text-muted); white-space: nowrap; }
.jl-order-list__total { font-weight: 700; white-space: nowrap; }
.jl-order-list__chevron { color: var(--jl-text-muted); flex-shrink: 0; }
@media (max-width: 640px) {
    .jl-order-list__row { grid-template-columns: 1fr auto; }
    .jl-order-list__items, .jl-order-list__chevron { display: none; }
}

.jl-status-badge {
    display: inline-flex; align-items: center; white-space: nowrap;
    font-size: 0.75rem; font-weight: 600; text-transform: capitalize;
    padding: 0.25rem 0.625rem; border-radius: 999px;
    background: var(--jl-surface-muted); color: var(--jl-text-secondary);
}
.jl-status-badge[data-status="delivered"], .jl-status-badge[data-status="confirmed"] { background: var(--jl-success-subtle); color: var(--jl-success); }
.jl-status-badge[data-status="shipped"], .jl-status-badge[data-status="processing"] { background: var(--jl-accent-subtle, var(--jl-surface-muted)); color: var(--jl-accent); }
.jl-status-badge[data-status="cancelled"], .jl-status-badge[data-status="refunded"] { background: var(--jl-danger-subtle); color: var(--jl-danger); }

.jl-order-detail__back {
    display: inline-flex; align-items: center; gap: 0.375rem;
    font-size: 0.875rem; font-weight: 600; color: var(--jl-text-secondary); margin-bottom: 0.75rem;
}
.jl-order-detail__back:hover { color: var(--jl-text); }
.jl-order-detail__head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/* ─── Blog ─────────────────────────────────────────────────────────────── */

.jl-blog-card { display: flex; flex-direction: column; gap: 0.75rem; }
.jl-blog-card__media { border-radius: var(--jl-radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--jl-surface-muted); }
.jl-blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.jl-blog-card__meta { font-size: 0.8125rem; color: var(--jl-text-muted); }
.jl-blog-card__title { font-family: var(--jl-font-display); font-size: 1.125rem; }
.jl-blog-card__excerpt { color: var(--jl-text-muted); font-size: 0.9375rem; }

.jl-article { max-width: 46rem; margin-inline: auto; }
.jl-article__cover { border-radius: var(--jl-radius); overflow: hidden; aspect-ratio: 16 / 9; margin-bottom: 1.5rem; }
.jl-article__cover img { width: 100%; height: 100%; object-fit: cover; }
.jl-article__body { font-size: 1.0625rem; color: var(--jl-text-secondary); line-height: 1.75; }
.jl-article__body h2 { font-size: 1.375rem; margin-top: 2rem; margin-bottom: 0.75rem; color: var(--jl-text); }
.jl-article__body p { margin-bottom: 1.25rem; }
.jl-article__body img { border-radius: var(--jl-radius); margin-block: 1.5rem; }

/* ─── Static page ──────────────────────────────────────────────────────── */

.jl-prose { max-width: 46rem; margin-inline: auto; color: var(--jl-text-secondary); font-size: 1.0625rem; line-height: 1.75; }
.jl-prose h2 { font-family: var(--jl-font-display); color: var(--jl-text); font-size: 1.375rem; margin-top: 2rem; margin-bottom: 0.75rem; }
.jl-prose p { margin-bottom: 1.25rem; }

.jl-contact-layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .jl-contact-layout { grid-template-columns: 1fr 1.3fr; } }
.jl-contact-info { display: flex; flex-direction: column; gap: 1.25rem; }
.jl-contact-info__item { display: flex; gap: 0.75rem; align-items: flex-start; }
.jl-contact-info__item svg { width: 1.25rem; height: 1.25rem; color: var(--jl-accent); flex: none; margin-top: 0.125rem; }

/* ─── Toast / alert ────────────────────────────────────────────────────── */

.jl-alert { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.875rem 1rem; border-radius: var(--jl-radius-sm); font-size: 0.9375rem; margin-bottom: 1.25rem; }
.jl-alert--success { background: var(--jl-success-subtle); color: var(--jl-success); }
.jl-alert--error { background: var(--jl-danger-subtle); color: var(--jl-danger); }

/* ─── Themed error pages (404 / 403 / 500 / 503) ──────────────────────────── */
.jl-error { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: clamp(3rem, 8vw, 6rem); }
.jl-error__code { font-family: var(--jl-font-display); font-size: clamp(3rem, 10vw, 5rem); font-weight: 600; color: var(--jl-text-muted); line-height: 1; }
.jl-error__title { font-size: clamp(1.25rem, 3vw, 1.75rem); margin: 0.75rem 0 0.5rem; }
.jl-error__message { color: var(--jl-text-secondary); max-width: 32rem; margin: 0 0 1.75rem; }

/* ─── Auth pages (login / register / forgot / reset / verify-email) ──────── */

.jl-auth { display: flex; justify-content: center; padding-block: clamp(2.5rem, 6vw, 5rem); }
.jl-auth__card { width: 100%; max-width: 26rem; background: var(--jl-surface); border: 1px solid var(--jl-border); border-radius: var(--jl-radius-lg); box-shadow: var(--jl-shadow-md); padding: clamp(1.75rem, 4vw, 2.5rem); }
.jl-auth__heading { font-family: var(--jl-font-display); font-size: 1.5rem; margin: 0 0 0.375rem; text-align: center; }
.jl-auth__subheading { font-size: 0.9375rem; color: var(--jl-text-secondary); text-align: center; margin: 0 0 1.75rem; }
.jl-auth__footer { margin-top: 1.5rem; text-align: center; font-size: 0.9375rem; color: var(--jl-text-secondary); }
.jl-auth__footer a { color: var(--jl-accent); font-weight: 600; }
.jl-auth__links { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; font-size: 0.875rem; }
.jl-auth__links a { color: var(--jl-text-secondary); }
.jl-auth__checkbox { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--jl-text-secondary); margin-bottom: 1.25rem; }
.jl-auth__icon { display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; margin: 0 auto 1.25rem; border-radius: 999px; background: var(--jl-success-subtle); color: var(--jl-success); }

/* ─── RTL adjustments ──────────────────────────────────────────────────── */
/* Most rules above already use logical properties (inset-inline-*,
   margin-inline-*, text-align: start/end) so they flip automatically.
   Remaining fixed-direction cases (icons/arrows/animation direction) are
   patched individually next to their component above ([dir="rtl"] …). */

[dir="rtl"] .jl-icon-flip { transform: scaleX(-1); }