/* Shared presentation for every Tolik Store route; the homepage is the reference. */
html[data-site-unified] { background: var(--ts-bg-canvas); scroll-padding-top: 20px; }
body.site-unified {
    --bg: var(--ts-bg-canvas); --bg-soft: var(--ts-bg-canvas-alt);
    --text: var(--ts-text); --ink: var(--ts-text); --text-soft: var(--ts-text-muted);
    --text-2: var(--ts-text-muted); --bg-alt: var(--ts-bg-canvas-alt);
    --text-muted: var(--ts-text-muted); --muted: var(--ts-text-muted);
    --line: var(--ts-border); --line-strong: var(--ts-border-strong);
    --border: var(--ts-border); --border-strong: var(--ts-border-strong);
    --glass: var(--ts-surface); --glass-strong: var(--ts-surface-strong);
    --surface: var(--ts-surface); --surface-soft: var(--ts-surface-soft); --surface-strong: var(--ts-surface-strong);
    --surface-2: var(--ts-surface-strong); --surface-3: var(--ts-surface); --surface-input: var(--ts-surface-input); --surface-topbar: var(--ts-surface-strong);
    --brand-gradient: var(--ts-brand-gradient); --brand-soft: var(--ts-brand-soft); --brand-soft-flat: var(--ts-surface-soft);
    --primary: var(--ts-brand-text); --secondary: var(--ts-brand-text); --violet: var(--ts-brand-text);
    --blue: var(--ts-brand-text); --green: var(--ts-success); --danger: var(--ts-danger);
    --shadow: var(--ts-shadow-sm); --order-text: var(--ts-text); --order-text-soft: var(--ts-text-muted);
    --order-text-muted: var(--ts-text-muted); --order-line: var(--ts-border); --order-line-strong: var(--ts-border-strong);
    --order-surface: var(--ts-surface); --order-surface-soft: var(--ts-surface-soft); --order-surface-strong: var(--ts-surface-strong);
    margin: 0; padding: 0; min-width: 320px; min-height: 100dvh;
    background: radial-gradient(ellipse 42rem 28rem at 90% 12%, var(--ts-ambient-b), transparent 80%), var(--ts-bg-canvas);
    color: var(--ts-text); font: 500 16px/1.65 var(--ts-font-sans);
}
body.site-unified, body.site-unified *, body.site-unified *::before, body.site-unified *::after { box-sizing: border-box; }
body.site-unified .ambient, body.site-unified .page-noise, body.site-unified .backdrop, body.site-unified .backdrop-grid, body.site-unified::before { display: none; }
body.site-unified [hidden], body.site-unified .is-hidden { display: none !important; }
body.site-unified :where(button,input,textarea,select) { font-family: var(--ts-font-sans); }
body.site-unified :where(h1,h2,h3,h4) { color: var(--ts-text); font-family: var(--ts-font-sans); letter-spacing: -.035em; }
body.site-unified :where(a,button,input,textarea,select,summary):focus-visible { outline: 2px solid var(--ts-border-focus); outline-offset: 4px; box-shadow: var(--ts-shadow-focus); }
body.site-unified :where(code,pre) { font-family: var(--ts-font-mono); overflow-wrap: anywhere; }
body.site-unified .page-shell::before, body.site-unified .order-flow-page::before { display: none; }

/* Shared header and footer have identical markup and dimensions on all pages. */
body.site-unified #unifiedHeader {
    display: flex; align-items: center; position: relative; top: auto; z-index: 30;
    width: min(1160px, calc(100% - 48px)); min-height: 92px; height: auto;
    margin: 0 auto; padding: 12px 0; gap: 24px; border: 0; border-bottom: 1px solid var(--ts-border);
    border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; transform: none;
}
body.site-unified #unifiedHeader .brand { display: inline-flex; align-items: center; flex: 0 0 160px; width: 160px; min-height: 56px; height: auto; padding: 0; background: none; }
body.site-unified #unifiedHeader .brand img { display: block; width: 160px; height: auto; aspect-ratio: 726/255; object-fit: contain; border: 0; border-radius: 0; filter: none; box-shadow: none; }
html[data-ts-theme="dark"] body.site-unified #unifiedHeader .ts-logo--light { display: none; }
html:not([data-ts-theme="dark"]) body.site-unified #unifiedHeader .ts-logo--dark { display: none; }
body.site-unified #unifiedNavigation { display: flex; align-items: center; justify-content: flex-end; flex: 1; gap: 20px; margin-left: auto; padding: 0; }
body.site-unified #unifiedNavigation a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; white-space: nowrap; color: var(--ts-text); font-size: 14px; font-weight: 700; text-decoration: none; background: none; border: 0; border-radius: 0; box-shadow: none; }
body.site-unified #unifiedNavigation a:hover, body.site-unified #unifiedNavigation [aria-current] { color: var(--ts-brand-text); transform: none; }
body.site-unified .storefront-header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
body.site-unified #unifiedHeader .ts-theme-toggle { display: inline-flex; min-width: 80px; min-height: 44px; height: auto; gap: 8px; padding: 0 12px; color: var(--ts-text); background: var(--ts-surface-soft); border: 1px solid var(--ts-border); border-radius: 14px; box-shadow: none; font-size: 12px; }
body.site-unified #unifiedMenuButton { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; padding: 10px; color: var(--ts-text); border: 1px solid var(--ts-border); border-radius: 14px; background: var(--ts-surface-soft); cursor: pointer; }
body.site-unified #unifiedMenuButton svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; }
body.site-unified #unifiedFooter { display: grid; grid-template-columns: minmax(0,2fr) minmax(220px,1fr); width: min(1160px, calc(100% - 48px)); margin: 56px auto 0; padding: 28px 0 32px; gap: 32px; border: 0; border-top: 1px solid var(--ts-border); border-radius: 0; background: transparent; color: var(--ts-text-muted); box-shadow: none; text-align: left; }
body.site-unified #unifiedFooter b { font-size: 13px; color: var(--ts-text); }
body.site-unified #unifiedFooter p, body.site-unified #unifiedFooter small { display: block; max-width: 720px; margin: 12px 0 0; font-size: 12px; line-height: 1.65; font-weight: 500; color: var(--ts-text-muted); }
body.site-unified #unifiedFooter nav { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0 18px; }
body.site-unified #unifiedFooter a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: var(--ts-text-muted); font-size: 12px; font-weight: 600; text-decoration: none; }
body.site-unified #unifiedFooter a:hover { color: var(--ts-brand-text); }

/* Page content retains its purpose, using the same rhythm and surfaces. */
body.site-unified:not(.storefront-home) main { width: min(1160px, calc(100% - 48px)); margin: 32px auto 0; padding-top: 0; padding-bottom: 0; }
body.site-unified .unified-page-title, body.site-unified .page-heading h1 { margin: 0 0 24px; font-size: clamp(30px,4vw,44px); line-height: 1.15; font-weight: 800; }
body.site-unified :is(.surface,.panel,.ts-card,.legal-card,.checkout-card,.order-summary,.order-panel,#order-aftercare,.profile-bar,.order-status-hero) { border: 1px solid var(--ts-border); border-radius: 24px; background: var(--ts-surface); color: var(--ts-text); box-shadow: none; backdrop-filter: none; }
body.site-unified :is(.profile-bar,.panel,.legal-card,.checkout-card,.order-summary,.order-panel,#order-aftercare) { padding: 24px; }
body.site-unified :is(.hint,.lead,.notice__copy,.helper,.small-note,.legal-card p,.legal-card li) { color: var(--ts-text-muted); }
body.site-unified :is(.text-link,.summary-link,.item a,.order-card a,.legal-card a) { color: var(--ts-brand-text); }
body.site-unified :is(.button,.buy-button,.submit,.ts-button) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 20px; border: 1px solid var(--ts-border); border-radius: 14px; background: var(--ts-surface-soft); box-shadow: none; color: var(--ts-text); font: 700 14px/1.35 var(--ts-font-sans); text-decoration: none; cursor: pointer; }
body.site-unified :is(.button-primary,.button--primary,.ts-button--primary,.submit,.mobile-dock-primary) { color: #fff; border-color: transparent; background: linear-gradient(var(--ts-storefront-action-scrim),var(--ts-storefront-action-scrim)),var(--ts-brand-gradient); box-shadow: var(--ts-shadow-receipt-action); }
body.site-unified :is(.button-primary,.button--primary,.ts-button--primary,.submit,.mobile-dock-primary):hover { color: #fff; filter: brightness(1.05); }
body.site-unified .button-primary::before { display: none; }
body.site-unified :is(button:disabled,[aria-disabled="true"]) { cursor: not-allowed; opacity: .5; }
body.site-unified :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select) { min-height: 48px; max-width: 100%; border: 1px solid var(--ts-border-strong); border-radius: 14px; padding: 12px 16px; color: var(--ts-text); background: var(--ts-surface-input); box-shadow: none; }
body.site-unified input::placeholder,body.site-unified textarea::placeholder { color: var(--ts-text-subtle); opacity: 1; }
body.site-unified :is(input,textarea)[aria-invalid="true"] { border-color: var(--ts-danger); }
body.site-unified :is(.form-error,[data-tone="danger"]) { color: var(--ts-danger); }
body.site-unified :is(.status-pill,.order-status,.counter-pill,.status-badge) { border-color: var(--ts-border); background: var(--ts-surface-soft); color: var(--ts-text-muted); }

/* Cabinet: calm cards and practical navigation rather than a second visual theme. */
body.site-unified .profile-bar { padding: 16px 20px; }
body.site-unified .cabinet-tabs { gap: 8px; margin: 24px 0; }
body.site-unified .cabinet-tabs a { border: 0; border-radius: 12px; background: transparent; color: var(--ts-text-muted); min-height: 44px; }
body.site-unified .cabinet-tabs a[aria-current="page"],body.site-unified .cabinet-tabs a.is-active { color: var(--ts-brand-text); background: var(--ts-brand-soft); }
body.site-unified .overview-summary,body.site-unified .overview-rewards { padding: 20px; }
body.site-unified .order-card { box-shadow: none; border-radius: 0; background: transparent; }
body.site-unified .reward-card { background: var(--ts-surface); border-color: var(--ts-border); box-shadow: none; }
body.site-unified .login-illustration { color: var(--ts-brand-text); background: var(--ts-brand-soft); }

/* Order and legacy product flows use the same typography, surfaces and status language. */
body.site-unified .order-status-hero { padding: 24px; margin-bottom: 24px; }
body.site-unified[data-page="order"] #order-status-panel[data-tone] {
    padding: 24px; margin: 0 0 24px; background: var(--ts-surface); border: 1px solid var(--ts-border);
    border-radius: 24px; box-shadow: none; transform: none; overflow: visible;
}
body.site-unified[data-page="order"] #order-status-panel::before,
body.site-unified[data-page="order"] #order-status-panel::after { display: none; }
body.site-unified[data-page="order"] #order-status-panel .order-status-hero { padding: 0; margin: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body.site-unified[data-page="order"] #order-status-panel .order-status-hero__title { margin: 8px 0; }
body.site-unified[data-page="order"] :is(#order-aftercare,#order-summary,#session-panel,#activation-panel) {
    background: var(--ts-surface); border-color: var(--ts-border); box-shadow: none; transform: none;
}
body.site-unified .order-status-hero::before,body.site-unified .order-status-hero::after { display: none; }
body.site-unified .order-status-hero__title { font-size: clamp(28px,3.5vw,38px); line-height: 1.2; }
body.site-unified .order-status-hero__copy { max-width: 760px; color: var(--ts-text-muted); }
body.site-unified .order-status-hero__eyebrow { color: var(--ts-success); background: var(--ts-success-bg); border-color: var(--ts-success-border); }
body.site-unified .order-status-hero[data-tone="warning"] .order-status-hero__eyebrow { color: var(--ts-warning); background: var(--ts-warning-bg); border-color: var(--ts-warning-border); }
body.site-unified .order-status-chip { background: var(--ts-surface-soft); border: 1px solid var(--ts-border); border-radius: 16px; }
body.site-unified .order-status-chip strong,body.site-unified .notice__title { color: var(--ts-text); }
body.site-unified .order-status-chip__label { color: var(--ts-text-muted); }
body.site-unified .order-flow-hero,body.site-unified .hero,body.site-unified .legal-hero { text-align: left; margin-top: 0; }
body.site-unified .order-flow-hero h1,body.site-unified .hero h1,body.site-unified .legal-hero h1 { font-size: clamp(32px,4.5vw,52px); }
body.site-unified #order-aftercare .order-manual-contact { background: linear-gradient(var(--ts-storefront-action-scrim),var(--ts-storefront-action-scrim)),var(--ts-brand-gradient); min-height: 56px; color: #fff; }
body.site-unified :is(.notice,.check-card,.session-preview,.session-input-card,.summary-item,.summary-grid>div) { color: var(--ts-text); background: var(--ts-surface-soft); border-color: var(--ts-border); }
body.site-unified .plan,body.site-unified .plan-card { background: var(--ts-surface); border: 1px solid var(--ts-border); border-radius: 24px; color: var(--ts-text); box-shadow: none; }
body.site-unified .plan p,body.site-unified .plan li { color: var(--ts-text-muted); }
body.site-unified .plan.popular,body.site-unified .plan.featured { border-color: var(--ts-border-focus); transform: none; }
body.site-unified .hero-text { color: var(--ts-text-muted); }
body.site-unified .hero-whisper,body.site-unified .mobile-dock-inner { background: var(--ts-surface-strong); color: var(--ts-text); border: 1px solid var(--ts-border); box-shadow: none; }
body.site-unified .mobile-dock-secondary { background: var(--ts-surface-soft); color: var(--ts-text); border: 1px solid var(--ts-border); }

/* Reading and utility screens share the shell without disturbing their working tools. */
body.site-unified .legal-shell { width: min(1160px,calc(100% - 48px)); margin: 32px auto 0; padding-bottom: 0; }
body.site-unified .legal-shell main { width: 100%; margin-top: 24px; }
body.site-unified .legal-card { max-width: 900px; margin-inline: auto; }
body.site-unified .legal-hero { max-width: 900px; margin: 0 auto 24px; }
body.site-unified .legal-hero .gradient { color: var(--ts-brand-text); }
body.site-unified .helper-header { display: none; }
body.site-unified .helper-shell,body.site-unified .guide-shell { padding-block: 0; }
body.site-unified .helper-wizard,body.site-unified .guide-card { box-shadow: none; border-radius: 24px; }
body.site-unified .guide-header { grid-template-columns: auto 1fr; margin-bottom: 24px; }
body.site-unified .guide-header h1,body.site-unified .guide-header__eyebrow { text-align: left; }
body.site-unified .magic-shell { min-height: 50vh; padding: 24px 0; }
body.site-unified .magic-card { padding: 32px; }
body.site-unified .payment-status__main::before { display: none; }
body.site-unified .payment-status__main { padding: 24px 0; flex: 0; }
body.site-unified .payment-status__card { padding: 32px; text-align: left; }
body.site-unified .payment-status__card h1,body.site-unified .payment-status__lead,body.site-unified .payment-status__notice,body.site-unified .payment-status__actions { margin-left: 0; }
body.site-unified .payment-status__animation { margin-left: 0; }
body.site-unified .payment-status__notice { background: var(--ts-surface-soft); border-color: var(--ts-border); }
body.site-unified .page { width: 100%; max-width: none; margin: 0; }
body.site-unified .checkout-card { width: min(100%,600px); margin-inline: auto; }
body.site-unified .checkout-card h1 { color: var(--ts-text); font-size: clamp(28px,3.5vw,40px); }
body.site-unified .checkout-card .submit { width: 100%; min-height: 56px; }
body.site-unified .news-card,body.site-unified .admin-card { background: var(--ts-surface); border-color: var(--ts-border); border-radius: 24px; box-shadow: none; }

@media (max-width: 760px) {
    body.site-unified #unifiedHeader { width: calc(100% - 32px); min-height: 80px; padding: 12px 0; gap: 12px; }
    body.site-unified #unifiedHeader .brand { margin-right: auto; }
    body.site-unified #unifiedMenuButton { display: inline-flex; }
    body.site-unified #unifiedNavigation { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; padding: 12px; gap: 0; border: 1px solid var(--ts-border); border-radius: 18px; background: var(--ts-bg-canvas); box-shadow: var(--ts-shadow-md); }
    body.site-unified #unifiedNavigation.is-open { display: flex; flex-direction: column; align-items: stretch; }
    body.site-unified #unifiedNavigation a { justify-content: flex-start; padding: 8px 12px; }
    body.site-unified #unifiedHeader .ts-theme-toggle { min-width: 44px; padding-inline: 10px; }
    body.site-unified #unifiedHeader [data-ts-theme-label] { display: none; }
    body.site-unified:not(.storefront-home) main { width: calc(100% - 32px); margin-top: 24px; }
    body.site-unified #unifiedFooter { width: calc(100% - 32px); grid-template-columns: 1fr; gap: 16px; margin-top: 36px; padding-top: 24px; }
    body.site-unified :is(.profile-bar,.panel,.legal-card,.checkout-card,.order-summary,.order-panel,#order-aftercare,.order-status-hero) { padding: 20px; }
    body.site-unified .legal-shell { width: calc(100% - 32px); margin-top: 24px; }
    body.site-unified .legal-shell main { width: 100%; margin-inline: 0; }
    body.site-unified .guide-header { grid-template-columns: 1fr; gap: 8px; }
    body.site-unified .order-status-hero { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
    body.site-unified .order-status-hero__chips { justify-content: flex-start; }
    body.site-unified .order-status-chip { flex: 1; }
    body.site-unified .profile-bar { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-site-unified] { scroll-behavior: auto; }
    body.site-unified *,body.site-unified *::before,body.site-unified *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
