/* ==========================================================================
   PayWall — storefront design system
   .agents/plans/paywall-blog-membership-implementation-plan.md

   Dark-first, editorial: a creator's blog with a paid-membership layer on
   top of the standard digital-store commerce pages. Neutrals follow the
   same oklch scale convention as the other Moteki themes (traceable back to
   resources/css/app.css) under a --pw- prefix; the accent is a warm
   vermillion, independent of light/dark mode. Original markup/CSS — no
   third-party theme code reused.
   ========================================================================== */

:root {
    /* Reference palette (Rosty/Leaderr FireShot captures): near-pure black
       page background throughout (not a lighter "card" gray — sections are
       distinguished by spacing/dividers, not by a surface color shift),
       a single vivid orange-red accent, and pastel solid-color panels used
       only on the landing-page alternating blocks (a small fixed palette,
       not part of the systematic token scale — see .pw-landing-block__copy
       nth-of-type rules). */
    --pw-bg: #0b0b0b;
    --pw-bg-subtle: #121212;
    --pw-surface: #141414;
    --pw-surface-muted: #1c1c1c;
    --pw-border: #2a2a2a;
    --pw-input: #2a2a2a;
    --pw-ring: #4a4a4a;
    --pw-text: #f7f7f5;
    --pw-text-secondary: #d8d8d5;
    --pw-text-muted: #8f8f8c;
    --pw-text-on-accent: #ffffff;

    /* Accent — the reference's vivid orange-red (buttons, links, active states). */
    --pw-accent: #e8501f;
    --pw-accent-hover: #cf421a;
    --pw-accent-subtle: #331b10;

    --pw-success: #2fae5f;
    --pw-success-subtle: #0c2818;
    --pw-danger: #e5484d;
    --pw-danger-subtle: #3a1215;

    --pw-font-sans:
        'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    /* Reference headings/wordmark are a bold, rounded-terminal geometric
       sans (thick strokes, round "o"/"g") — Plus Jakarta Sans at 800 is the
       closest freely-licensed match, not Space Grotesk (too technical/
       narrow) or Instrument Sans (too soft at low weights). */
    --pw-font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

    /* Reference is almost entirely SHARP corners — cards, tiles, buttons,
       landing blocks all read as rectangles, not rounded. Radius is kept
       at 0 by default; the few places that do round (pill toggle, avatar
       circles, badges) do so explicitly with 999px, not via this token. */
    --pw-radius: 0px;
    --pw-radius-sm: 0px;
    --pw-radius-lg: 0px;
    --pw-container: 1280px;
    --pw-gutter: 1.5rem;

    --tb-hero-border-radius: 0px;
    --tb-product-card-border-radius: 0px;

    --pw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --pw-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
    --pw-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.6);
}

/* Light mode is a deliberate, secondary palette (PayWall reads primarily as
   a dark editorial theme) rather than the usual "dark overrides light".

   Three states, matching the header's Auto/Light/Dark switcher
   (paywall.js sets/clears documentElement[data-theme], persisted in
   localStorage):
   - Auto (no data-theme attribute): follows prefers-color-scheme.
   - Light (data-theme="light"): forced light regardless of OS setting.
   - Dark (data-theme="dark"): forced dark regardless of OS setting - the
     base :root above already IS the dark palette, so this state needs no
     rule of its own; it only has to WIN against the light media query
     below when the OS prefers light, which :not([data-theme="dark"])
     handles. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --pw-bg: oklch(1 0 0);
        --pw-bg-subtle: oklch(0.98 0 0);
        --pw-surface: oklch(0.98 0 0);
        --pw-surface-muted: oklch(0.955 0 0);
        --pw-border: oklch(0.9 0 0);
        --pw-input: oklch(0.9 0 0);
        --pw-ring: oklch(0.75 0 0);
        --pw-text: oklch(0.145 0 0);
        --pw-text-secondary: oklch(0.35 0 0);
        --pw-text-muted: oklch(0.5 0 0);
        --pw-accent-subtle: #fdeee9;
        --pw-success-subtle: #e6f7ec;
        --pw-danger-subtle: #fbe9ea;
        --pw-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06);
        --pw-shadow-md: 0 8px 24px oklch(0 0 0 / 0.08);
        --pw-shadow-lg: 0 24px 48px oklch(0 0 0 / 0.14);
    }
}

:root[data-theme="light"] {
    --pw-bg: oklch(1 0 0);
    --pw-bg-subtle: oklch(0.98 0 0);
    --pw-surface: oklch(0.98 0 0);
    --pw-surface-muted: oklch(0.955 0 0);
    --pw-border: oklch(0.9 0 0);
    --pw-input: oklch(0.9 0 0);
    --pw-ring: oklch(0.75 0 0);
    --pw-text: oklch(0.145 0 0);
    --pw-text-secondary: oklch(0.35 0 0);
    --pw-text-muted: oklch(0.5 0 0);
    --pw-accent-subtle: #fdeee9;
    --pw-success-subtle: #e6f7ec;
    --pw-danger-subtle: #fbe9ea;
    --pw-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06);
    --pw-shadow-md: 0 8px 24px oklch(0 0 0 / 0.08);
    --pw-shadow-lg: 0 24px 48px oklch(0 0 0 / 0.14);
}

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--pw-font-sans);
    background: var(--pw-bg);
    color: var(--pw-text);
    line-height: 1.6;
    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; background: none; border: none; color: inherit; }
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, h4, .pw-display {
    font-family: var(--pw-font-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

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

.pw-skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 100;
    background: var(--pw-text);
    color: var(--pw-bg);
    padding: 0.75rem 1.25rem;
    border-radius: var(--pw-radius-sm);
}
.pw-skip-link:focus { top: 1rem; }

:focus-visible {
    outline: 2px solid var(--pw-accent);
    outline-offset: 2px;
}

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

.pw-container {
    width: 100%;
    max-width: var(--pw-container);
    margin-inline: auto;
    padding-inline: var(--pw-gutter);
}
.pw-section { padding-block: clamp(3rem, 6vw, 6rem); }
.pw-section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }

.pw-grid { display: grid; gap: 1.5rem; }
.pw-grid-2 { grid-template-columns: repeat(2, 1fr); }
.pw-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pw-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .pw-grid-3, .pw-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pw-grid-2, .pw-grid-3, .pw-grid-4 { grid-template-columns: 1fr; } }

.pw-page-title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.5rem; }
.pw-page-subtitle { color: var(--pw-text-muted); max-width: 42rem; font-size: 1.05rem; }
.pw-eyebrow {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pw-accent);
}

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

.pw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    /* Buttons/pills/inputs keep a small explicit radius even though content
       blocks (cards, tiles, landing panels) are sharp — matches the
       reference exactly (capture #16: squared photo/panels, but a visibly
       rounded "Sign in"/"Subscribe" button). Not driven by --pw-radius-sm
       (0 by design for content). */
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.pw-btn--accent { background: var(--pw-accent); color: var(--pw-text-on-accent); }
.pw-btn--accent:hover { background: var(--pw-accent-hover); }
.pw-btn--outline { border: 1px solid var(--pw-border); color: var(--pw-text); }
.pw-btn--outline:hover { border-color: var(--pw-text-muted); }
.pw-btn--ghost { color: var(--pw-text); }
.pw-btn--ghost:hover { color: var(--pw-accent); }
.pw-btn--block { width: 100%; }
.pw-btn--primary { background: var(--pw-accent); color: var(--pw-text-on-accent); }
.pw-btn--primary:hover { background: var(--pw-accent-hover); }
.pw-btn--sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
.pw-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Loading state set by paywall.js on real (non-AJAX) form submits — bridges
   into the Loader2/animate-spin language of the Mobile Money confirm page
   that follows checkout, so the transition feels continuous. */
@keyframes pw-spin { to { transform: rotate(360deg); } }
.pw-btn[data-state="loading"] { opacity: 0.85; cursor: progress; }
.pw-btn[data-state="loading"]::before {
    content: '';
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: pw-spin 0.6s linear infinite;
    flex-shrink: 0;
}

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

.pw-announcement {
    background: var(--pw-accent);
    color: var(--pw-text-on-accent);
    text-align: center;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
}
.pw-header { position: sticky; top: 0; z-index: 40; background: color-mix(in oklch, var(--pw-bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--pw-border); }
.pw-header__row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1rem; }
.pw-header__logo { font-family: var(--pw-font-display); font-weight: 700; font-size: 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.pw-header__logo img { height: 28px; width: auto; }
.pw-nav { display: flex; align-items: center; gap: 1.75rem; font-size: 0.92rem; font-weight: 500; }
.pw-nav a:hover { color: var(--pw-accent); }
.pw-header__actions { display: flex; align-items: center; gap: 0.75rem; }
.pw-header__social { display: flex; align-items: center; gap: 0.25rem; }
.pw-header__social .pw-social { gap: 0.25rem; }
.pw-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; position: relative; flex-shrink: 0; }
.pw-icon-btn:hover { background: var(--pw-surface-muted); }
.pw-badge-count {
    position: absolute; top: -2px; right: -2px;
    background: var(--pw-accent); color: #fff;
    font-size: 0.65rem; font-weight: 700; line-height: 1;
    min-width: 16px; height: 16px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* Mobile hamburger toggle (header row, far left) - desktop-hidden. */
.pw-nav-toggle { display: none; }

/* "···" more-menu (desktop only): secondary nav + language + theme
   switcher, matching the reference's dropdown exactly. */
.pw-more-menu-wrap { position: relative; }
.pw-more-toggle { display: inline-flex; }
.pw-more-menu {
    display: none;
    position: absolute; left: 0; top: calc(100% + 0.75rem);
    min-width: 14rem;
    background: var(--pw-surface);
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius-sm);
    box-shadow: var(--pw-shadow-md);
    padding: 0.75rem;
    z-index: 50;
}
.pw-more-menu[data-open] { display: block; }
.pw-more-menu__links { display: flex; flex-direction: column; }
.pw-more-menu__links a { padding: 0.5rem 0.6rem; border-radius: var(--pw-radius-sm); font-weight: 500; }
.pw-more-menu__links a:hover { background: var(--pw-surface-muted); color: var(--pw-accent); }
.pw-more-menu__divider { height: 1px; background: var(--pw-border); margin: 0.6rem 0; }
.pw-more-menu__lang { padding: 0 0.6rem 0.4rem; }

/* Language switcher, inline mode (embedded in the "···" menu / mobile
   panel, no <details> disclosure of its own). */
.pw-lang-switcher--inline { margin-bottom: 0.6rem; }
.pw-lang-switcher__label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pw-text-muted); margin-bottom: 0.4rem; }
.pw-lang-switcher--inline .pw-lang-switcher__menu { position: static; border: none; box-shadow: none; padding: 0; background: none; min-width: 0; }

/* Theme switcher (Auto / Light / Dark) — segmented control. */
.pw-theme-switcher { display: flex; gap: 0.3rem; padding: 0.25rem; background: var(--pw-bg-subtle); border-radius: var(--pw-radius-sm); margin: 0 0.6rem; }
.pw-theme-switcher__option {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 0.35rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--pw-radius-sm);
    font-size: 0.78rem; font-weight: 500;
    color: var(--pw-text-muted);
}
.pw-theme-switcher__option[aria-pressed="true"] { background: var(--pw-surface); color: var(--pw-text); box-shadow: var(--pw-shadow-sm); }

.pw-header__desktop-only { display: inline-flex; }

/* Search overlay: centered card over a dimmed backdrop (desktop + mobile). */
.pw-search-overlay { display: none; position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.6); padding-top: 12vh; }
.pw-search-overlay[data-open] { display: block; }
.pw-search-overlay__inner { display: flex; justify-content: center; }
.pw-search-overlay__box { width: 100%; max-width: 34rem; background: var(--pw-surface); border-radius: 12px; box-shadow: var(--pw-shadow-lg); padding: 0.5rem 0.5rem 0.5rem 1.1rem; display: flex; align-items: center; gap: 0.6rem; }
.pw-search-overlay__box svg { flex-shrink: 0; color: var(--pw-text-muted); }
.pw-search-overlay__input { flex: 1; background: none; border: none; outline: none; font: inherit; font-size: 1rem; padding: 0.75rem 0; color: var(--pw-text); }
.pw-search-overlay__input::placeholder { color: var(--pw-text-muted); }

/* Mobile full-screen overlay nav panel. */
.pw-mobile-nav {
    display: none;
    position: fixed; inset: 0;
    z-index: 60;
    background: var(--pw-bg);
    overflow-y: auto;
}
.pw-mobile-nav[data-open] { display: block; }
.pw-mobile-nav__top { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; border-bottom: 1px solid var(--pw-border); }
.pw-mobile-nav__body { padding-block: 1.5rem 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.pw-mobile-nav__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; font-weight: 500; }
.pw-mobile-nav__grid a { padding-block: 0.35rem; }
.pw-mobile-nav__grid--secondary { padding-top: 1rem; border-top: 1px solid var(--pw-border); color: var(--pw-text-muted); font-size: 0.92rem; }
.pw-mobile-nav__social { padding-top: 0.5rem; border-top: 1px solid var(--pw-border); }
.pw-mobile-nav__actions { display: flex; align-items: center; gap: 0.75rem; }
.pw-mobile-nav__actions .pw-btn { flex: 1; }
.pw-mobile-nav__search { margin-top: 0.25rem; }
.pw-mobile-nav__search input { width: 100%; }

@media (max-width: 860px) {
    .pw-nav-toggle { display: inline-flex; }
    .pw-header__logo { position: absolute; left: 50%; transform: translateX(-50%); }
    .pw-header__row { position: relative; }
    .pw-nav { display: none; }
    .pw-header__social,
    .pw-header__desktop-only { display: none; }
    .pw-search-toggle { display: inline-flex; }
}

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

/* Default (unconfigured) footer: flat two-row nav list, capture #18 —
   NOT the boxed multi-column layout, which only renders when a merchant
   has actually configured footerConfig.columns via ThemeBuilder. */
.pw-footer { background: var(--pw-bg); border-top: 1px solid var(--pw-border); margin-top: 1.5rem; }
.pw-footer__row { padding-block: 1.1rem; }
.pw-footer__row + .pw-footer__row { border-top: 1px solid var(--pw-border); }
.pw-footer__nav { display: flex; flex-wrap: wrap; gap: 1.75rem; font-size: 0.95rem; font-weight: 500; }
.pw-footer__nav--secondary { font-size: 0.88rem; color: var(--pw-text-muted); font-weight: 400; }
.pw-footer__nav a:hover { color: var(--pw-accent); }

/* Boxed variant — only used when footerConfig.columns is actually set. */
.pw-footer__grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 2.5rem; padding-block: 3.5rem; }
@media (max-width: 860px) { .pw-footer__grid { grid-template-columns: repeat(2, 1fr); } }
.pw-footer__brand { font-family: var(--pw-font-display); font-weight: 700; font-size: 1.1rem; }
.pw-footer__desc { color: var(--pw-text-muted); margin-top: 0.5rem; font-size: 0.9rem; max-width: 24rem; }
.pw-footer__heading { font-weight: 600; margin-bottom: 0.85rem; font-size: 0.9rem; }
.pw-footer__links li { margin-bottom: 0.5rem; }
.pw-footer__links a { color: var(--pw-text-muted); font-size: 0.9rem; }
.pw-footer__links a:hover { color: var(--pw-text); }

.pw-footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-block: 1.25rem; border-top: 1px solid var(--pw-border); font-size: 0.85rem; color: var(--pw-text-muted); }
.pw-footer__social { display: flex; gap: 0.9rem; }
.pw-footer__social a { color: var(--pw-text-muted); }
.pw-footer__social a:hover { color: var(--pw-text); }

/* ─── Hero (author intro / landing) ───────────────────────────────────── */

.pw-hero { display: grid; grid-template-columns: 220px 1fr auto; gap: 2rem; align-items: center; padding-block: 3rem; }
@media (max-width: 760px) { .pw-hero { grid-template-columns: 1fr; text-align: center; } }
.pw-hero__avatar { width: 220px; height: 220px; border-radius: var(--pw-radius-lg); object-fit: cover; }
.pw-hero__title { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.pw-hero__desc { color: var(--pw-text-muted); margin-top: 0.6rem; max-width: 34rem; }
.pw-hero__form { display: flex; gap: 0.5rem; margin-top: 1.25rem; }

.pw-cover-hero { position: relative; height: clamp(220px, 30vw, 420px); border-radius: var(--pw-radius-lg); overflow: hidden; margin-bottom: -4rem; }
.pw-cover-hero img { width: 100%; height: 100%; object-fit: cover; }

/* Article cover, "split" layout (default) — same full-bleed two-column
   grid mechanics as .pw-creator-hero (home hero), own class since the
   text content differs (category tag/title/meta/summary vs heading/desc/
   newsletter form). */
.pw-article-cover { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(420px, 55vw, 620px); }
@media (max-width: 760px) { .pw-article-cover { grid-template-columns: 1fr; min-height: auto; } }
.pw-article-cover__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 4.5rem); }
.pw-article-cover__media { overflow: hidden; background: var(--pw-surface-muted); }
.pw-article-cover__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .pw-article-cover__media { aspect-ratio: 4/3; } }

/* Landing page: reference (capture 062) is edge-to-edge full viewport width,
   blocks touching with no gap, alternating solid pastel panels (no photo)
   against full-bleed photo blocks — distinct from every other page's
   `.pw-container`-constrained width. */
.pw-landing-hero { position: relative; min-height: 46vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 3rem 1.5rem; }
.pw-landing-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; filter: brightness(0.6); }
.pw-landing-hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); color: #fff; }
.pw-landing-hero p { color: #f0f0f0; margin-top: 0.75rem; font-size: 1.1rem; }
.pw-landing-hero .pw-btn { margin-top: 1.5rem; background: #fff; color: #111; }
.pw-landing-hero .pw-btn:hover { background: #eee; }

.pw-landing-block { display: grid; grid-template-columns: 1fr 1fr; min-height: 340px; }
.pw-landing-block img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-landing-block__copy { display: flex; flex-direction: column; justify-content: center; gap: 0.85rem; padding: clamp(2rem, 5vw, 4rem); color: #14120f; }
.pw-landing-block__copy h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); color: #14120f; }
.pw-landing-block__copy p { color: #45413a; }
.pw-landing-block__copy .pw-btn--primary { background: #14120f; color: #fff; align-self: flex-start; }
.pw-landing-block__copy .pw-btn--primary:hover { background: #000; }
@media (max-width: 760px) { .pw-landing-block { grid-template-columns: 1fr; } .pw-landing-block img { min-height: 220px; } }

.pw-landing-final-banner { position: relative; min-height: 40vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 3rem 1.5rem; }
.pw-landing-final-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; filter: brightness(0.35); }
.pw-landing-final-banner h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); color: #fff; }
.pw-landing-final-banner p { color: #eee; margin-top: 0.6rem; }
.pw-landing-final-banner .pw-newsletter-form { margin: 1.5rem auto 0; }

.pw-newsletter-banner { text-align: center; }
.pw-newsletter-banner h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.pw-newsletter-banner p { color: var(--pw-text-muted); margin-top: 0.5rem; }
.pw-newsletter-banner .pw-btn { margin-top: 1.5rem; }
.pw-newsletter-form { display: flex; gap: 0.5rem; max-width: 26rem; margin: 1.5rem auto 0; }
.pw-newsletter-form input { flex: 1; }
.pw-newsletter-note { font-size: 0.8rem; color: var(--pw-text-muted); margin-top: 0.75rem; }
.pw-newsletter-note--success,
.pw-newsletter-note--danger {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.15rem 0 0.15rem 0.85rem;
    border-left: 2px solid;
}
.pw-newsletter-note--success { color: var(--pw-success); border-color: var(--pw-success); }
.pw-newsletter-note--danger { color: var(--pw-danger); border-color: var(--pw-danger); }

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

.pw-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.pw-field label { font-size: 0.9rem; font-weight: 500; }
.pw-input, .pw-select, .pw-textarea {
    background: var(--pw-surface);
    border: 1px solid var(--pw-input);
    border-radius: 6px;
    padding: 0.6rem 0.85rem;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--pw-text);
    width: 100%;
}
.pw-input:focus, .pw-select:focus, .pw-textarea:focus { outline: none; border-color: var(--pw-accent); }
.pw-form-error { color: var(--pw-danger); font-size: 0.85rem; margin-top: 0.3rem; }
.pw-form-card { background: var(--pw-surface); border: 1px solid var(--pw-border); border-radius: var(--pw-radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem); max-width: 30rem; margin-inline: auto; }

/* ─── Post cards / blog listing ───────────────────────────────────────── */

.pw-post-card { display: block; }
.pw-post-card__image { aspect-ratio: 16/10; border-radius: var(--pw-radius); overflow: hidden; margin-bottom: 1rem; }
.pw-post-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.pw-post-card:hover .pw-post-card__image img { transform: scale(1.04); }
.pw-post-card__title { font-size: 1.15rem; margin-bottom: 0.4rem; }
.pw-post-card__excerpt { color: var(--pw-text-muted); font-size: 0.92rem; margin-bottom: 0.6rem; }
.pw-post-card__meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--pw-text-muted); }
.pw-post-card__avatar { width: 22px; height: 22px; border-radius: 999px; object-fit: cover; }
.pw-post-card__lock-icon { display: inline-block; vertical-align: -0.1em; margin-left: 0.35rem; }

.pw-post-feed { display: flex; flex-direction: column; }
/* Reference (capture 059) splits each row roughly evenly between image and
   text, not a small fixed-width thumbnail — a 260px column read as a tiny
   icon next to a full-size title/excerpt block. */
.pw-post-list-row { display: grid; grid-template-columns: minmax(240px, 45%) 1fr; gap: 2rem; padding-block: 1.75rem; align-items: center; }
.pw-post-feed .pw-post-list-row + .pw-post-list-row { border-top: 1px solid var(--pw-border); }
.pw-post-list-row__image { aspect-ratio: 4/3; overflow: hidden; }
.pw-post-list-row__image img { width: 100%; height: 100%; object-fit: cover; }
.pw-post-list-row .pw-post-card__title { font-size: 1.4rem; margin-bottom: 0.5rem; }
.pw-post-list-row .pw-post-card__excerpt { font-size: 0.95rem; }
@media (max-width: 640px) { .pw-post-list-row { grid-template-columns: 1fr; } }

.pw-tag-pill { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pw-accent); margin-bottom: 0.5rem; }
.pw-tag-pill--featured { color: var(--pw-accent); }

/* ─── Creator hero (home page) ─────────────────────────────────────────── */

/* Full-bleed — no .pw-container wrapper, photo touches the viewport edge
   and the header's bottom edge (capture #16). */
.pw-creator-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(420px, 55vw, 620px); }
@media (max-width: 760px) { .pw-creator-hero { grid-template-columns: 1fr; min-height: auto; } }
.pw-creator-hero__media { overflow: hidden; background: var(--pw-surface-muted); }
.pw-creator-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .pw-creator-hero__media { aspect-ratio: 1; } }
.pw-creator-hero__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 4.5rem); }
.pw-creator-hero__heading { font-size: clamp(1.9rem, 3vw, 2.75rem); display: flex; flex-direction: column; }
.pw-creator-hero__desc { color: var(--pw-text-muted); margin-top: 1.25rem; max-width: 28rem; font-size: 1.05rem; }
.pw-creator-hero__body .pw-newsletter-form { margin-top: 1.75rem; max-width: 28rem; }
@media (max-width: 760px) { .pw-creator-hero__body { text-align: center; align-items: center; } }

/* "Framed" newsletter form variant — a single outlined container, borderless
   input, inset cream button (capture #16). */
.pw-newsletter-form--framed {
    display: flex;
    align-items: center;
    border: 1px solid var(--pw-border);
    border-radius: 6px;
    padding: 0.35rem;
    gap: 0.5rem;
}
.pw-newsletter-form--framed input { border: none; background: transparent; padding: 0.5rem 0.75rem; }
.pw-newsletter-form--framed input:focus { outline: none; box-shadow: none; }
.pw-btn--cream { background: #f5f1e6; color: #14120f; border-radius: 6px; }
.pw-btn--cream:hover { background: #e9e3d2; }

/* "Stacked" variant — full-width input, then a full-width button below it
   (standalone newsletter page hero, capture #064) — distinct from the
   side-by-side default and the single-outline "framed" variant. */
.pw-newsletter-form--stacked { flex-direction: column; align-items: stretch; gap: 0.85rem; margin: 1.5rem 0 0; }
.pw-newsletter-form--stacked input { flex: none; }
.pw-newsletter-form--stacked .pw-btn { width: 100%; }

/* ─── Category / author tiles ──────────────────────────────────────────── */

.pw-tile { position: relative; aspect-ratio: 4/3; border-radius: var(--pw-radius); overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--pw-surface-muted); }
.pw-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pw-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.15)); }
.pw-tile__label { position: relative; z-index: 1; color: #fff; }
.pw-tile__label strong { display: block; font-size: 1.1rem; }
.pw-tile__label span { font-size: 0.8rem; opacity: 0.85; }

.pw-author-card { text-align: center; }
.pw-tile--author { aspect-ratio: 3/3.4; }
.pw-author-card__social { display: flex; justify-content: center; gap: 0.6rem; margin-top: 0.75rem; }
.pw-author-card__social a { color: var(--pw-text-muted); }
.pw-author-card__social a:hover { color: var(--pw-text); }

/* ─── Article ──────────────────────────────────────────────────────────── */

.pw-article { max-width: 42rem; margin-inline: auto; }
.pw-article__meta { display: flex; align-items: center; gap: 0.5rem; color: var(--pw-text-muted); font-size: 0.9rem; margin: 1rem 0 1.5rem; }
.pw-article__meta img { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; }
.pw-article__meta-premium { display: inline-flex; align-items: center; gap: 0.3rem; }

/* ─── Article table of contents ("On this page") ──────────────────────── */
.pw-toc { border-top: 1px solid var(--pw-border); border-bottom: 1px solid var(--pw-border); }
.pw-toc__inner { padding-block: 1.25rem; }
.pw-toc__toggle { display: flex; align-items: center; gap: 0.6rem; background: none; border: none; padding: 0; color: var(--pw-text-muted); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
.pw-toc__chevron { transition: transform 0.2s ease; }
[data-pw-toc]:not([data-open]) .pw-toc__chevron { transform: rotate(180deg); }
.pw-toc__list { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1.25rem; }
[data-pw-toc]:not([data-open]) .pw-toc__list { display: none; }
.pw-toc__list a { color: var(--pw-text); font-size: 0.95rem; }
.pw-toc__list a:hover { color: var(--pw-accent); }

/* ─── Back-to-top button ────────────────────────────────────────────────
   Hidden until the visitor scrolls (paywall.js toggles --visible past a
   scroll threshold), fixed bottom-left to match the reference. */
.pw-back-to-top {
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--pw-border);
    background: var(--pw-surface);
    color: var(--pw-text);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.pw-back-to-top:hover { background: var(--pw-surface-muted); }
.pw-back-to-top--visible { opacity: 1; visibility: visible; transform: translateY(0); }
@media (max-width: 640px) { .pw-back-to-top { left: 1rem; bottom: 1rem; } }
.pw-article__summary { font-size: 1.2rem; color: var(--pw-text-secondary); border-left: 3px solid var(--pw-accent); padding-left: 1rem; margin-bottom: 2rem; }
.pw-article__content { font-size: 1.05rem; line-height: 1.75; }
.pw-article__content h2 { font-size: 1.5rem; margin: 2rem 0 0.75rem; }
.pw-article__content h3 { font-size: 1.25rem; margin: 1.5rem 0 0.5rem; }
.pw-article__content p { margin-bottom: 1.1rem; }
.pw-article__content img { border-radius: var(--pw-radius); margin-block: 1.5rem; }

.pw-paywall-gate {
    margin-top: 2rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: var(--pw-radius-lg);
    background: linear-gradient(180deg, transparent, var(--pw-bg) 40%), var(--pw-surface);
    border: 1px solid var(--pw-border);
    text-align: center;
}
.pw-paywall-gate h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.pw-paywall-gate p { color: var(--pw-text-muted); margin-bottom: 1.25rem; }

.pw-author-bio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; margin: 3rem 0; padding-top: 2.5rem; border-top: 1px solid var(--pw-border); }
.pw-author-bio img { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; }
.pw-author-bio p { color: var(--pw-text-muted); font-size: 0.9rem; max-width: 28rem; }

.pw-article__share { display: flex; justify-content: center; gap: 0.75rem; margin-bottom: 2rem; }

.pw-member-discussion { border-top: 1px solid var(--pw-border); padding-top: 1.5rem; }
.pw-member-discussion__head { display: flex; align-items: center; justify-content: space-between; font-size: 0.95rem; }
.pw-member-discussion__head span { color: var(--pw-text-muted); }
.pw-member-discussion__gate { background: var(--pw-surface); border: 1px solid var(--pw-border); padding: 1.75rem; text-align: center; margin-top: 1.25rem; }
.pw-member-discussion__title { font-weight: 700; font-size: 1.05rem; margin-bottom: 0.4rem; }
.pw-member-discussion__gate p:not(.pw-member-discussion__title) { color: var(--pw-text-muted); margin-bottom: 1rem; }

/* ─── Membership / pricing ─────────────────────────────────────────────── */

.pw-plan-toggle { display: inline-flex; border: 1px solid var(--pw-border); border-radius: 999px; padding: 0.25rem; margin: 0 auto 2.5rem; }
.pw-plan-toggle button { padding: 0.5rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: 0.9rem; }
.pw-plan-toggle button[aria-pressed="true"] { background: var(--pw-accent); color: #fff; }

.pw-plan-card { border: 1px solid var(--pw-border); border-radius: var(--pw-radius-lg); padding: 1.75rem; display: flex; flex-direction: column; }
.pw-plan-card--featured { border-color: var(--pw-accent); box-shadow: var(--pw-shadow-md); }
.pw-plan-card__name { color: var(--pw-accent); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; }
.pw-plan-card__price { font-size: 2.25rem; font-family: var(--pw-font-display); margin: 0.5rem 0; }
.pw-plan-card__price span { font-size: 0.95rem; font-weight: 500; color: var(--pw-text-muted); font-family: var(--pw-font-sans); }
.pw-plan-card__desc { color: var(--pw-text-muted); font-size: 0.9rem; margin-bottom: 1.25rem; }
.pw-plan-card__features { margin: 1.25rem 0; display: flex; flex-direction: column; gap: 0.6rem; }
.pw-plan-card__features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; }
.pw-plan-card__features li::before { content: '✓'; color: var(--pw-success); font-weight: 700; }

.pw-faq-item { border-bottom: 1px solid var(--pw-border); }
.pw-faq-item__q { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.1rem 0; font-weight: 600; text-align: left; }
.pw-faq-item__icon { transition: transform 0.2s ease; }
.pw-faq-item[data-open] .pw-faq-item__icon { transform: rotate(180deg); }
.pw-faq-item__a { display: none; padding-bottom: 1.1rem; color: var(--pw-text-muted); font-size: 0.92rem; }
.pw-faq-item[data-open] .pw-faq-item__a { display: block; }

/* ─── Archive ──────────────────────────────────────────────────────────── */

.pw-archive-year { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 2rem 0 1rem; }
.pw-archive-row { display: flex; align-items: baseline; gap: 1rem; padding-block: 0.9rem; border-bottom: 1px solid var(--pw-border); }
.pw-archive-row time { color: var(--pw-text-muted); font-size: 0.85rem; white-space: nowrap; }
.pw-archive-row a:hover { color: var(--pw-accent); }

/* ─── Badges / states ──────────────────────────────────────────────────── */

.pw-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; }
.pw-badge--accent { background: var(--pw-accent-subtle); color: var(--pw-accent); }
.pw-badge--success { background: var(--pw-success-subtle); color: var(--pw-success); }
.pw-badge--danger { background: var(--pw-danger-subtle); color: var(--pw-danger); }

.pw-empty-state { text-align: center; padding: 4rem 1.5rem; color: var(--pw-text-muted); }
.pw-empty-state h3 { color: var(--pw-text); margin-bottom: 0.4rem; }

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

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

.pw-breadcrumb { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.85rem; color: var(--pw-text-muted); margin-bottom: 1.5rem; }
.pw-breadcrumb a:hover { color: var(--pw-text); }
.pw-breadcrumb span[aria-hidden] { opacity: 0.5; }

.pw-pagination { display: flex; justify-content: center; align-items: center; gap: 0.35rem; margin-top: 2.5rem; }
.pw-pagination a, .pw-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem; border-radius: var(--pw-radius-sm);
    font-size: 0.9rem;
}
.pw-pagination a:hover { background: var(--pw-surface-muted); }
.pw-pagination span[aria-current] { background: var(--pw-accent); color: #fff; }

/* ─── Commerce: product / cart / checkout / account ────────────────────── */

.pw-product-card { display: block; position: relative; }
.pw-product-card__media { position: relative; display: block; aspect-ratio: 3/4; border-radius: var(--tb-product-card-border-radius); overflow: hidden; background: var(--pw-surface-muted); margin-bottom: 0.75rem; }
.pw-product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pw-product-card__badge { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 1; background: var(--pw-accent); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 999px; }
.pw-product-card__wishlist { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 1; width: 2rem; height: 2rem; border-radius: 999px; background: color-mix(in oklch, var(--pw-bg) 70%, transparent); display: flex; align-items: center; justify-content: center; }
.pw-product-card__wishlist[data-active="true"] { color: var(--pw-accent); }
.pw-product-card__body { display: flex; flex-direction: column; gap: 0.2rem; }
.pw-product-card__category { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pw-text-muted); }
.pw-product-card__name { font-weight: 600; font-size: 0.98rem; }
.pw-product-card__rating { display: flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--pw-text-muted); }
.pw-price { font-weight: 700; color: var(--pw-accent); margin-top: 0.2rem; display: inline-flex; gap: 0.4rem; align-items: baseline; }
.pw-price__compare { color: var(--pw-text-muted); text-decoration: line-through; font-weight: 400; font-size: 0.88em; }
.pw-price__original { color: var(--pw-text-muted); text-decoration: line-through; font-weight: 400; margin-left: 0.4rem; }
.pw-product-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 1.25rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x mandatory; }
.pw-product-carousel > * { scroll-snap-align: start; }
.pw-section-head { display: flex; flex-direction: column; margin-bottom: 1.75rem; }
.pw-section-title { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
.pw-section-desc { color: var(--pw-text-muted); margin-top: 0.35rem; }

.pw-cart-line { display: grid; grid-template-columns: 80px 1fr auto; gap: 1rem; padding-block: 1.25rem; border-bottom: 1px solid var(--pw-border); align-items: center; }
.pw-cart-line img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--pw-radius-sm); }
.pw-cart-summary { background: var(--pw-surface); border: 1px solid var(--pw-border); border-radius: var(--pw-radius-lg); padding: 1.5rem; }
.pw-summary-row { display: flex; justify-content: space-between; padding-block: 0.5rem; font-size: 0.92rem; }
.pw-summary-row--total { font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--pw-border); margin-top: 0.5rem; padding-top: 0.75rem; }

.pw-account-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; }
@media (max-width: 760px) { .pw-account-layout { grid-template-columns: 1fr; } }
.pw-account-nav a { display: block; padding: 0.6rem 0.9rem; border-radius: var(--pw-radius-sm); font-weight: 500; }
.pw-account-nav a:hover, .pw-account-nav a[aria-current] { background: var(--pw-surface-muted); color: var(--pw-accent); }

.pw-order-row { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; border-bottom: 1px solid var(--pw-border); }
.pw-table { width: 100%; border-collapse: collapse; }
.pw-table th, .pw-table td { text-align: left; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--pw-border); font-size: 0.9rem; }
.pw-table th { color: var(--pw-text-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ─── RTL ──────────────────────────────────────────────────────────────── */

[dir="rtl"] .pw-article__summary { border-left: none; border-right: 3px solid var(--pw-accent); padding-left: 0; padding-right: 1rem; }
[dir="rtl"] .pw-tag-pill,
[dir="rtl"] .pw-breadcrumb { direction: rtl; }

/* ─── Reviews ──────────────────────────────────────────────────────────── */

.pw-review-list { display: flex; flex-direction: column; gap: 1.75rem; margin-bottom: 1.5rem; }
.pw-review { border-bottom: 1px solid var(--pw-border); padding-bottom: 1.5rem; }
.pw-review__stars { color: var(--pw-accent); letter-spacing: 0.1em; margin-bottom: 0.35rem; }
.pw-review__title { font-size: 1.05rem; margin-bottom: 0.2rem; }
.pw-review__meta { font-size: 0.82rem; color: var(--pw-text-muted); margin-bottom: 0.5rem; }
.pw-review__content { color: var(--pw-text-secondary); }
.pw-review__response { margin-top: 0.75rem; padding: 0.75rem 1rem; background: var(--pw-surface); border-radius: var(--pw-radius-sm); font-size: 0.9rem; }
.pw-review-toggle summary { list-style: none; }
.pw-review-toggle summary::-webkit-details-marker { display: none; }
.pw-rating-input { display: flex; gap: 0.25rem; }
.pw-rating-star { font-size: 1.5rem; color: var(--pw-border); }
.pw-rating-star[aria-pressed="true"] { color: var(--pw-accent); }
.pw-label { font-size: 0.9rem; font-weight: 500; display: block; margin-bottom: 0.4rem; }
.pw-account-panel { display: flex; flex-direction: column; gap: 1rem; }
.pw-alert { padding: 0.75rem 1rem; border-radius: var(--pw-radius-sm); font-size: 0.88rem; }
.pw-alert--error { background: var(--pw-danger-subtle); color: var(--pw-danger); }
.pw-alert--success { background: var(--pw-success-subtle); color: var(--pw-success); }

/* ─── Breadcrumb / lang-switcher / social (snippet-specific) ──────────── */

.pw-breadcrumb__sep { margin-inline: 0.15rem; }
.pw-empty-state__title { font-size: 1.15rem; font-weight: 600; }

.pw-lang-switcher { position: relative; }
.pw-lang-switcher summary { list-style: none; display: inline-flex; align-items: center; gap: 0.3rem; }
.pw-lang-switcher summary::-webkit-details-marker { display: none; }
.pw-lang-switcher__code { font-size: 0.75rem; font-weight: 700; }
.pw-lang-switcher__menu { position: absolute; right: 0; top: calc(100% + 0.5rem); background: var(--pw-surface); border: 1px solid var(--pw-border); border-radius: var(--pw-radius-sm); box-shadow: var(--pw-shadow-md); padding: 0.4rem; min-width: 9rem; z-index: 50; }
.pw-lang-switcher__option { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; padding: 0.5rem 0.6rem; border-radius: 6px; font-size: 0.9rem; }
.pw-lang-switcher__option:hover { background: var(--pw-surface-muted); }
.pw-lang-switcher__option.is-active { background: var(--pw-surface-muted); font-weight: 600; }
.pw-lang-switcher__code-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--pw-surface-muted); font-size: 0.62rem; font-weight: 700; flex-shrink: 0; }
.pw-lang-switcher__option.is-active .pw-lang-switcher__code-badge { background: var(--pw-accent); color: var(--pw-text-on-accent); }
.pw-lang-switcher__option-label { flex: 1; }
.pw-lang-switcher__check { flex-shrink: 0; color: var(--pw-accent); }

/* Nested "Language" disclosure row (used inside the "···" menu / mobile
   nav) — collapsed by default, showing only the current language; the
   full list only renders once expanded. Mirrors the dashboard profile
   menu's Language submenu pattern instead of a flat always-visible list. */
.pw-lang-switcher--nested { position: static; }
.pw-lang-switcher__row { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.5rem 0.6rem; border-radius: 6px; font-size: 0.9rem; font-weight: 500; list-style: none; cursor: pointer; }
.pw-lang-switcher__row::-webkit-details-marker { display: none; }
.pw-lang-switcher__row:hover { background: var(--pw-surface-muted); }
.pw-lang-switcher__row-label { flex: 1; }
.pw-lang-switcher__row-current { color: var(--pw-text-muted); font-size: 0.82rem; }
.pw-lang-switcher__chevron { flex-shrink: 0; transition: transform 0.15s ease; }
.pw-lang-switcher--nested[open] .pw-lang-switcher__chevron { transform: rotate(90deg); }
.pw-lang-switcher__menu--nested { position: static; box-shadow: none; border: none; background: none; padding: 0.2rem 0 0.2rem 1.6rem; min-width: 0; }

.pw-social { display: flex; gap: 0.6rem; }

/* ─── Extra button/form variants used by the standard commerce templates ─ */

.pw-btn--secondary { background: var(--pw-surface-muted); color: var(--pw-text); }
.pw-btn--secondary:hover { background: var(--pw-border); }
.pw-btn--icon { padding: 0; width: 2.5rem; height: 2.5rem; }
.pw-required { color: var(--pw-danger); margin-inline-start: 0.15rem; }
.pw-field-error { color: var(--pw-danger); font-size: 0.85rem; margin-top: 0.3rem; }
.pw-field-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.pw-field-row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .pw-field-row--2 { grid-template-columns: 1fr; } }
.pw-checkbox-row { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; }
.pw-checkbox-row input { margin-top: 0.2rem; accent-color: var(--pw-accent); }
.pw-form { display: flex; flex-direction: column; gap: 1rem; max-width: 32rem; }
.pw-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; font-weight: 500; }
/* .pw-form label above targets the bare, unclassed `<label>Text<input></label>`
   stacks used in auth/contact templates (text + input as one flex-column
   unit) — but it also matches .pw-label (checkout.liquid, product.liquid: a
   label-only element, associated to its input via `for`, with an optional
   trailing required-marker <span> as its only other child). The flex-column
   collapse split "Text" and "*" onto two separate stacked rows instead of
   keeping them on the same line. Higher specificity (not source order) so
   this doesn't silently break again if the rules above get reordered. */
.pw-form label.pw-label { display: block; }
.pw-form input, .pw-form textarea, .pw-form select { background: var(--pw-surface); border: 1px solid var(--pw-input); border-radius: var(--pw-radius-sm); padding: 0.6rem 0.85rem; font-size: 0.92rem; line-height: 1.4; color: var(--pw-text); }
.pw-form fieldset { border: 1px solid var(--pw-border); border-radius: var(--pw-radius); padding: 1rem; }
.pw-form-checkbox { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.pw-form-links { display: flex; justify-content: space-between; font-size: 0.85rem; margin-top: 0.5rem; }
.pw-form-status { font-size: 0.85rem; margin-top: 0.5rem; }
.pw-account-links { display: flex; gap: 1rem; margin-block: 1.5rem; flex-wrap: wrap; }
.pw-account-links a { padding: 0.5rem 1rem; border: 1px solid var(--pw-border); border-radius: var(--pw-radius-sm); font-weight: 500; }
.pw-account-links a:hover { border-color: var(--pw-accent); color: var(--pw-accent); }
.pw-section--narrow { max-width: 32rem; margin-inline: auto; }
.pw-page-content { max-width: 46rem; margin-inline: auto; line-height: 1.75; }
.pw-page-content h2 { font-size: 1.4rem; margin: 1.75rem 0 0.6rem; }
.pw-page-content p { margin-bottom: 1rem; }

/* ─── Simple cart / checkout / orders / downloads (minimal-stub templates) ─ */

.pw-cart-list { display: flex; flex-direction: column; margin-block: 1.5rem; }
.pw-cart-row { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--pw-border); align-items: center; }
.pw-order-items { display: flex; flex-direction: column; margin-block: 1.5rem; }
.pw-order-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--pw-border); align-items: center; }
.pw-order-list { display: flex; flex-direction: column; margin-block: 1.5rem; }
.pw-order-list .pw-order-row:hover { background: var(--pw-surface-muted); }
.pw-download-list { display: flex; flex-direction: column; margin-block: 1.5rem; }
.pw-download-row { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--pw-border); align-items: center; }
.pw-review-row { padding-block: 1.25rem; border-bottom: 1px solid var(--pw-border); }
.pw-review-row__title { font-weight: 600; margin-block: 0.3rem; }
label.pw-payment-option { display: flex; flex-direction: row; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; border: 1px solid var(--pw-border); border-radius: var(--pw-radius); margin-bottom: 0.6rem; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.pw-payment-option:has(input:checked) { border-color: var(--pw-accent); background: var(--pw-accent-subtle); }
.pw-payment-option input { accent-color: var(--pw-accent); flex-shrink: 0; }
.pw-payment-option span { flex: 1; }

/* Checkout: two-column layout (form + order summary sidebar) — deliberate
   even 50/50 split (not the earlier 1.8fr/2.2fr skew toward the form). */
.pw-checkout-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .pw-checkout-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pw-checkout-form { max-width: none; }
.pw-checkout-step { border: 1px solid var(--pw-border); border-radius: var(--pw-radius); padding: 1.5rem; }
.pw-checkout-step__title { display: flex; align-items: center; gap: 0.625rem; font-size: 1.05rem; font-weight: 700; margin-bottom: 1.25rem; }
.pw-checkout-step__badge { width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--pw-accent); color: var(--pw-text-on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; flex-shrink: 0; transition: background-color 0.2s ease; }
/* Set by paywall.js once every required field in the step is valid — echoes
   the numbered-circle-turns-green-on-complete pattern (the only stepper in
   this codebase, resources/js/pages/marketing/partner-register.tsx) and the
   success checkmark on the Mobile Money confirm page that follows checkout. */
.pw-checkout-step__badge.is-complete { background: var(--pw-success); }
.pw-checkout-summary { position: sticky; top: 5.5rem; }
.pw-checkout-summary__title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; }
.pw-cart-line__placeholder { width: 80px; height: 80px; border-radius: var(--pw-radius-sm); background: var(--pw-surface-muted); }
.pw-cart-line__name { font-weight: 600; margin-bottom: 0.2rem; }
.pw-cart-line__meta { font-size: 0.8rem; color: var(--pw-text-muted); }
.pw-cart-line__price { text-align: end; font-weight: 700; white-space: nowrap; }

/* ─── Product detail page (PDP) ────────────────────────────────────────── */

.pw-pdp { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pw-pdp { grid-template-columns: 1.1fr 1fr; } }
.pw-pdp-gallery__main { border-radius: var(--pw-radius); overflow: hidden; aspect-ratio: 4/5; background: var(--pw-surface-muted); }
.pw-pdp-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.pw-pdp-gallery__thumbs { display: flex; gap: 0.6rem; margin-top: 0.75rem; overflow-x: auto; }
.pw-pdp-gallery__thumbs button { flex: 0 0 4.2rem; aspect-ratio: 1; border-radius: var(--pw-radius-sm); overflow: hidden; border: 2px solid transparent; padding: 0; }
.pw-pdp-gallery__thumbs button[aria-current="true"] { border-color: var(--pw-accent); }
.pw-pdp-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pw-pdp-info__category { font-size: 0.8rem; color: var(--pw-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.pw-pdp-info__title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-block: 0.4rem 0.75rem; }
.pw-pdp-info__rating { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--pw-text-muted); margin-bottom: 1rem; }
.pw-pdp-info__price { font-size: 1.5rem; margin-bottom: 1.25rem; }
.pw-pdp-info__desc { color: var(--pw-text-secondary); margin-bottom: 1.5rem; }
.pw-pdp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block: 1.5rem; }
.pw-pdp-badge { display: inline-flex; background: var(--pw-accent-subtle); color: var(--pw-accent); font-weight: 700; font-size: 0.8rem; padding: 0.3rem 0.75rem; border-radius: 999px; }

.pw-trust-list { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 0; border-top: 1px solid var(--pw-border); border-bottom: 1px solid var(--pw-border); margin-block: 1rem; list-style: none; }
.pw-trust-list li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--pw-text-secondary); }
.pw-trust-list svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--pw-accent); }

.pw-accordion { border-top: 1px solid var(--pw-border); margin-top: 1.5rem; }
.pw-accordion__item { border-bottom: 1px solid var(--pw-border); }
.pw-accordion__trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-block: 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.pw-accordion__trigger::-webkit-details-marker { display: none; }
.pw-accordion__item[open] .pw-accordion__icon { transform: rotate(45deg); }
.pw-accordion__panel { padding-bottom: 1rem; color: var(--pw-text-secondary); }
.pw-pdp-gallery {}
.pw-pdp-info {}
.pw-price__sale { color: var(--pw-accent); }
.pw-review-form-wrap {}
.pw-section-head--start { text-align: start; }
.pw-author-bio-avatar {}