/*
 * Final visual coherence layer.
 * Keeps layout rhythm, controls, cards, RTL and responsive spacing consistent
 * across the public site and the administration workspace.
 */

:root {
    --ui-page-gap: clamp(18px, 1.8vw, 28px);
    --ui-card-gap: clamp(16px, 1.5vw, 22px);
    --ui-card-pad: clamp(18px, 2vw, 26px);
    --ui-control-gap: 14px;
    --ui-section-gap: clamp(24px, 3vw, 38px);
}

/* --------------------------------------------------------------------------
   Universal layout hygiene
   -------------------------------------------------------------------------- */

html { scroll-padding-top: 90px; }

:where(.field, .field-grid, form, section, article, aside, nav, header, footer, main) {
    min-inline-size: 0;
}

:where(input, select, textarea, button) {
    max-inline-size: 100%;
}

:where(.button, .table-action, .admin-header__action) {
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Public site
   -------------------------------------------------------------------------- */

html[data-ui="site"] .order-card {
    display: grid;
    gap: var(--ui-card-gap);
    padding: var(--ui-card-pad);
}

html[data-ui="site"] .order-card__heading {
    margin: 0;
    align-items: center;
}

html[data-ui="site"] .order-card > :where(.file-result,.privacy-note,.recommendation-card,.print-profiles,.range-field,.delivery-address,.coupon-field,.credit-choice,.payment-methods) {
    margin-block: 0;
}

html[data-ui="site"] .order-card .field-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr));
    gap: 18px 16px;
    align-items: end;
}

html[data-ui="site"] .order-card .field {
    gap: 9px;
}

html[data-ui="site"] .dropzone {
    min-height: clamp(260px, 32vw, 330px);
    padding: clamp(28px, 4vw, 48px) 24px;
}

html[data-ui="site"] .dropzone__icon {
    margin-bottom: 16px;
}

html[data-ui="site"] .file-result {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-md);
    background: var(--c-surface);
}

html[data-ui="site"] .file-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: var(--c-surface-soft);
}

html[data-ui="site"] .file-result__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
    font-weight: 900;
}

html[data-ui="site"] .file-row > div:last-child {
    min-width: 0;
    display: grid;
    gap: 3px;
}

html[data-ui="site"] .file-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
}

html[data-ui="site"] .file-row span,
html[data-ui="site"] .file-upload-note {
    color: var(--c-ink-500);
    font-size: var(--text-xs);
    line-height: 1.7;
}

html[data-ui="site"] .file-upload-note {
    padding: 10px 12px;
    border-radius: 11px;
    background: var(--c-accent-faint);
}

html[data-ui="site"] .file-result > [data-continue-analysis] {
    width: 100%;
    margin-top: 2px;
}

html[data-ui="site"] .privacy-note {
    padding: 14px 16px;
    border: 1px solid var(--c-line-soft);
    border-radius: var(--radius-md);
}

html[data-ui="site"] .recommendation-card {
    padding: 20px;
    border-radius: var(--radius-lg);
}

html[data-ui="site"] .print-profiles {
    gap: 12px;
}

html[data-ui="site"] .print-profiles button {
    min-height: 86px;
    padding: 15px;
    border-radius: var(--radius-md);
}

html[data-ui="site"] .counter {
    min-height: var(--control-h);
    height: auto;
    grid-template-columns: 52px minmax(70px, 1fr) 52px;
    border-radius: var(--radius-md);
    background: var(--control-bg);
    box-shadow: inset 0 0 0 1px var(--control-border);
    border: 0;
}

html[data-ui="site"] .counter button {
    min-width: 0;
    min-height: var(--control-h);
    display: grid;
    place-items: center;
    padding: 0;
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
    font-size: 22px;
    font-weight: 800;
    transition: background-color .15s ease, color .15s ease;
}

html[data-ui="site"] .counter button:first-child {
    border-inline-end: 1px solid var(--c-line);
}

html[data-ui="site"] .counter button:last-child {
    border-inline-start: 1px solid var(--c-line);
}

html[data-ui="site"] .counter button:hover {
    background: var(--c-accent-border);
}

html[data-ui="site"] .counter input {
    min-width: 0;
    min-height: var(--control-h);
    padding: 0 8px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
    font-size: var(--text-lg);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

html[data-ui="site"] .range-field {
    display: grid;
    gap: 12px;
}

html[data-ui="site"] .range-field > span {
    align-items: end;
}

html[data-ui="site"] .range-field > div {
    min-height: 42px;
}

html[data-ui="site"] .range-field input[type="range"] {
    min-height: 28px;
}

html[data-ui="site"] .range-field output {
    min-width: 88px;
    text-align: end;
    font-weight: 700;
}

html[data-ui="site"] .delivery-grid {
    gap: 14px;
}

html[data-ui="site"] .choice-card {
    min-height: 168px;
    padding: 18px;
    border-radius: var(--radius-lg);
}

html[data-ui="site"] .delivery-address {
    padding-top: 20px;
}

html[data-ui="site"] .coupon-field {
    display: grid;
    gap: 9px;
}

html[data-ui="site"] .credit-choice {
    min-height: 88px;
    grid-template-columns: 44px minmax(0,1fr);
    gap: 14px;
    padding: 16px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

html[data-ui="site"] .credit-choice > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

html[data-ui="site"] .credit-choice > span {
    width: 44px;
    height: 44px;
    grid-column: 1;
    border: 1px solid var(--c-line);
    background: var(--c-surface-soft);
    color: var(--c-ink-500);
    font-size: 0;
}

html[data-ui="site"] .credit-choice > span::before {
    content: "✓";
    font-size: 18px;
    font-weight: 900;
    opacity: .35;
}

html[data-ui="site"] .credit-choice > div {
    grid-column: 2;
    gap: 4px;
}

html[data-ui="site"] .credit-choice:has(input:checked) {
    border-color: var(--c-accent);
    background: var(--c-accent-faint);
    box-shadow: var(--focus-ring);
}

html[data-ui="site"] .credit-choice:has(input:checked) > span {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: #fff;
}

html[data-ui="site"] .credit-choice:has(input:checked) > span::before {
    opacity: 1;
}

html[data-ui="site"] .payment-methods {
    gap: 12px;
}

html[data-ui="site"] .payment-choice {
    min-height: 86px;
    padding: 15px;
    border-radius: var(--radius-lg);
}

html[data-ui="site"] .order-card > .button--wide {
    min-height: 58px;
    border-radius: var(--radius-md);
    margin-top: 2px;
}

html[data-ui="site"] .quote-card {
    padding: 22px;
    border-radius: var(--radius-lg);
}

html[data-ui="site"] .quote-card dl > div {
    padding-block: 10px;
}

/* Footer: keep the brand component intact and give every column breathing room. */
html[data-ui="site"] .footer {
    padding-top: clamp(48px, 6vw, 72px);
}

html[data-ui="site"] .footer__grid {
    grid-template-columns: minmax(300px, 1.45fr) repeat(2, minmax(180px, .8fr));
    gap: clamp(34px, 5vw, 72px);
    align-items: start;
    padding-bottom: clamp(38px, 5vw, 58px);
}

html[data-ui="site"] .footer__grid > div {
    min-width: 0;
}

html[data-ui="site"] .footer .brand--footer,
html[data-ui="site"] .footer .brand--footer .brand__text {
    display: inline-grid;
}

html[data-ui="site"] .footer .brand--footer {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

html[data-ui="site"] .footer .brand--footer .brand__text {
    gap: 2px;
    margin: 0;
}

html[data-ui="site"] .footer .brand--footer .brand__text strong {
    display: block;
    margin: 0;
    color: #fff;
    line-height: 1.45;
}

html[data-ui="site"] .footer .brand--footer .brand__text small {
    display: block;
    margin: 0;
    color: rgba(255,255,255,.52);
    line-height: 1.6;
}

html[data-ui="site"] .footer__grid > div:first-child > p {
    max-width: 520px;
    margin-top: 20px;
    color: rgba(255,255,255,.64);
    line-height: 2;
}

html[data-ui="site"] .footer__grid > div:not(:first-child) {
    display: grid;
    align-content: start;
    gap: 9px;
}

html[data-ui="site"] .footer__grid > div:not(:first-child) h3 {
    margin: 0 0 7px;
    color: #fff;
}

html[data-ui="site"] .footer__grid > div:not(:first-child) > :where(a,span) {
    display: block;
    margin: 0;
    color: rgba(255,255,255,.62);
    line-height: 1.8;
}

html[data-ui="site"] .footer__bottom {
    min-height: 62px;
    padding-block: 18px;
    align-items: center;
}

/* --------------------------------------------------------------------------
   Administration workspace
   -------------------------------------------------------------------------- */

html[data-ui="admin"] :where(.admin-main > .container, .admin-page > .container, .admin-narrow > .container) {
    display: grid;
    gap: var(--ui-page-gap);
}

html[data-ui="admin"] :where(.admin-page-head,.admin-page__head,.admin-filterbar,.admin-search,.admin-metrics) {
    margin-bottom: 0;
}

html[data-ui="admin"] .admin-panel + .admin-panel {
    margin-top: 0;
}

html[data-ui="admin"] .admin-panel {
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(8,23,25,.025), 0 10px 28px rgba(8,23,25,.035);
}

html[data-ui="admin"] .admin-panel__head {
    min-height: 72px;
    padding: 17px 20px;
}

html[data-ui="admin"] .admin-form-panel {
    padding: var(--ui-card-pad);
}

html[data-ui="admin"] .admin-form-panel > h2 {
    margin: 0;
}

html[data-ui="admin"] .admin-form-panel > form {
    display: grid;
    gap: 22px;
}

html[data-ui="admin"] .admin-form-panel > h2 + form {
    margin-top: 20px;
}

html[data-ui="admin"] .admin-form-panel > form > .field-grid:not(.field-grid--2):not(.field-grid--3) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 18px 16px;
}

html[data-ui="admin"] .admin-form-panel > form > .button {
    justify-self: start;
    min-width: 150px;
}

html[data-ui="admin"] .field-grid,
html[data-ui="admin"] .field-grid--2,
html[data-ui="admin"] .field-grid--3 {
    gap: 18px 16px;
    align-items: end;
}

html[data-ui="admin"] .field {
    gap: 9px;
}

html[data-ui="admin"] .checkbox-field,
html[data-ui="admin"] .check-field {
    min-height: var(--control-h);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px;
}

html[data-ui="admin"] .admin-filterbar,
html[data-ui="admin"] .admin-search {
    padding: 16px;
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-lg);
    background: var(--admin-panel);
    box-shadow: var(--shadow-xs);
}

html[data-ui="admin"] .admin-filterbar {
    display: grid;
    grid-template-columns: minmax(260px,1fr) minmax(200px,260px) auto auto;
    gap: 12px;
    align-items: center;
}

html[data-ui="admin"] .admin-filterbar > :where(input,select) {
    min-width: 0;
}

html[data-ui="admin"] .admin-filterbar > .button {
    min-height: var(--control-h);
}

html[data-ui="admin"] .admin-filter-reset {
    min-height: var(--control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 12px;
}

html[data-ui="admin"] .admin-board,
html[data-ui="admin"] .admin-table-wrap {
    border-radius: var(--radius-lg);
}

html[data-ui="admin"] .admin-table th,
html[data-ui="admin"] .admin-table td,
html[data-ui="admin"] .admin-table__head,
html[data-ui="admin"] .admin-table__row {
    padding-block: 15px;
}

html[data-ui="admin"] .admin-empty {
    min-height: 220px;
    gap: 4px;
}

html[data-ui="admin"] .admin-metrics {
    gap: 16px;
}

html[data-ui="admin"] .admin-metrics article {
    min-height: 142px;
    padding: 20px;
    border-radius: var(--radius-lg);
}

html[data-ui="admin"] .report-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(170px, 1fr)) auto;
    gap: 12px;
    align-items: end;
    min-width: min(100%, 520px);
    padding: 14px;
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-md);
    background: var(--admin-panel);
}

html[data-ui="admin"] .report-range input {
    width: 100%;
    min-height: var(--control-h);
}

html[data-ui="admin"] .report-range .button {
    min-height: var(--control-h);
}

html[data-ui="admin"] .report-grid,
html[data-ui="admin"] .health-grid {
    gap: 20px;
}

html[data-ui="admin"] .report-bars {
    gap: 15px;
    padding: 20px;
}

html[data-ui="admin"] .report-bars > div {
    grid-template-columns: minmax(110px, 150px) 46px minmax(120px,1fr);
    gap: 12px;
}

html[data-ui="admin"] .report-bars i {
    height: 10px;
}

html[data-ui="admin"] .health-list {
    padding: 8px 20px 14px;
}

html[data-ui="admin"] .health-list > div {
    min-height: 52px;
    align-items: center;
    padding-block: 12px;
}

html[data-ui="admin"] .health-checks {
    gap: 9px;
    padding: 18px 20px 20px;
}

html[data-ui="admin"] .health-checks span {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-inline: 12px;
}

html[data-ui="admin"] .pricing-editor,
html[data-ui="admin"] .pricing-list,
html[data-ui="admin"] .receipt-review-list,
html[data-ui="admin"] .settings-stack {
    gap: 18px;
}

html[data-ui="admin"] .pricing-rule {
    padding: 20px;
    border-radius: var(--radius-lg);
}

html[data-ui="admin"] .settings-section__head {
    padding: 20px 22px;
}

html[data-ui="admin"] .settings-section > :where(.field-grid,.field,.field-help,.uploaded-font-box,.font-preview-grid,.settings-details,.settings-integration-test) {
    margin-inline: 22px;
}

html[data-ui="admin"] .settings-section > .field-grid,
html[data-ui="admin"] .settings-section > .field {
    margin-block: 22px;
}

html[data-ui="admin"] .settings-savebar {
    bottom: 16px;
    margin-top: 0;
    padding: 15px 18px;
    border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   Jalali date picker
   -------------------------------------------------------------------------- */

.jalali-field {
    position: relative;
}

.jalali-control {
    position: relative;
    display: block;
    width: 100%;
}

.jalali-control > input[data-jalali-picker] {
    width: 100%;
    padding-inline-start: 14px;
    padding-inline-end: 52px;
    direction: ltr !important;
    text-align: right !important;
    unicode-bidi: plaintext;
    font-variant-numeric: tabular-nums;
}

.jalali-control > .jalali-trigger {
    position: absolute;
    inset-inline-end: 8px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--c-surface-soft);
    color: var(--c-ink-600);
    font-size: 16px;
    line-height: 1;
}

.jalali-control > .jalali-trigger:hover {
    border-color: var(--c-accent-border);
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
}

.jalali-popover {
    width: min(360px, calc(100vw - 24px));
    padding: 18px;
    border-radius: 20px;
    border-color: var(--c-line);
    box-shadow: 0 24px 80px rgba(8,23,25,.16);
}

.jalali-popover__head {
    grid-template-columns: 44px 1fr 44px;
    gap: 10px;
    margin-bottom: 14px;
}

.jalali-popover__head button {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 20px;
}

.jalali-popover__title {
    font-size: var(--text-lg);
    line-height: 1.4;
}

.jalali-popover__week,
.jalali-popover__days {
    gap: 6px;
}

.jalali-popover__week span {
    padding-block: 7px;
}

.jalali-popover__days button {
    min-width: 0;
    min-height: 40px;
    aspect-ratio: 1;
    border-radius: 11px;
    font-size: var(--text-sm);
}

.jalali-popover__days button.is-selected {
    background: var(--c-accent);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Responsive polish
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    html[data-ui="site"] .footer__grid {
        grid-template-columns: 1.2fr 1fr 1fr;
        gap: 34px;
    }

    html[data-ui="admin"] .admin-filterbar {
        grid-template-columns: minmax(220px,1fr) minmax(180px,220px) auto;
    }

    html[data-ui="admin"] .admin-filterbar .admin-filter-reset {
        grid-column: 1 / -1;
        justify-self: start;
        min-height: auto;
        padding-inline: 0;
    }
}

@media (max-width: 760px) {
    html[data-ui="site"] .order-card {
        padding: 18px;
        gap: 18px;
    }

    html[data-ui="site"] .print-profiles,
    html[data-ui="site"] .delivery-grid {
        grid-template-columns: 1fr;
    }

    html[data-ui="site"] .footer__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    html[data-ui="site"] .footer__grid > div:first-child,
    html[data-ui="site"] .footer__grid > div:last-child {
        grid-column: auto;
    }

    html[data-ui="admin"] .admin-filterbar,
    html[data-ui="admin"] .report-range {
        grid-template-columns: 1fr;
    }

    html[data-ui="admin"] .admin-filterbar .admin-filter-reset {
        grid-column: auto;
    }

    html[data-ui="admin"] .admin-form-panel > form > .button {
        width: 100%;
        justify-self: stretch;
    }

    html[data-ui="admin"] .report-bars > div {
        grid-template-columns: minmax(100px, 1fr) 42px;
    }

    html[data-ui="admin"] .report-bars i {
        grid-column: 1 / -1;
    }

    .jalali-popover {
        padding: 16px;
        border-radius: 18px;
    }
}

html[data-ui="admin"] .admin-empty--compact {
    min-height: 150px;
    padding: 24px;
}

/* Secondary public pages share the same card rhythm. */
html[data-ui="site"] :where(.payment-grid,.classroom-public__grid) {
    gap: 24px;
}

html[data-ui="site"] :where(.payment-main-card,.payment-side,.tracking-card,.account-form-card,.classroom-hero,.classroom-checkout,.content-body,.address-card,.classroom-item) {
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(8,23,25,.025), 0 10px 28px rgba(8,23,25,.03);
}

html[data-ui="site"] :where(.payment-main-card,.payment-side,.tracking-card,.account-form-card,.classroom-hero,.classroom-checkout) {
    padding: var(--ui-card-pad);
}

html[data-ui="site"] :where(.payment-main-card,.tracking-card,.account-form-card,.classroom-checkout) > form {
    display: grid;
    gap: 18px;
}

html[data-ui="site"] .account-main {
    display: grid;
    gap: 18px;
}

html[data-ui="site"] .account-head,
html[data-ui="site"] .account-stats,
html[data-ui="site"] .account-form-card {
    margin: 0;
}

html[data-ui="site"] :where(.account-stats,.address-grid,.classroom-list,.account-orders) {
    gap: 14px;
}

html[data-ui="site"] :where(.account-stats > article,.address-card,.classroom-item,.account-order) {
    border-radius: var(--radius-md);
}

html[data-ui="site"] .account-form-card > form {
    display: grid;
    gap: 18px;
}

html[data-ui="site"] .content-body {
    margin-top: 24px;
}

html[data-ui="site"] .content-cta {
    margin-top: 24px;
    padding: 22px;
    border-radius: var(--radius-lg);
}

/* ========================================================================== 
   1.6.0 final geometry contract
   One rhythm for cards, fields, buttons, calendar, tables and RTL alignment.
   ========================================================================== */

:root {
    --ui-stack-1: 8px;
    --ui-stack-2: 12px;
    --ui-stack-3: 16px;
    --ui-stack-4: 20px;
    --ui-stack-5: 24px;
    --ui-stack-6: 32px;
    --ui-panel-pad: clamp(18px, 1.8vw, 26px);
    --ui-panel-radius: 22px;
    --ui-field-radius: 14px;
}

/* Keep native form controls from introducing browser-specific vertical drift. */
html[data-ui] :where(input, select, textarea, button) {
    vertical-align: middle;
}

html[data-ui] :where(.field, .field-grid, .admin-filterbar, .admin-search, .report-range) > * {
    min-inline-size: 0;
}

/* --------------------------------------------------------------------------
   Public ordering flow
   -------------------------------------------------------------------------- */

html[data-ui="site"] .order-shell {
    display: grid;
    gap: 24px;
}

html[data-ui="site"] .order-head,
html[data-ui="site"] .order-progress {
    margin-block: 0;
}

html[data-ui="site"] .order-head {
    align-items: flex-start;
}

html[data-ui="site"] .order-grid {
    gap: 24px;
}

html[data-ui="site"] .order-card,
html[data-ui="site"] .quote-card {
    border-radius: var(--ui-panel-radius);
    border-color: var(--c-line);
    box-shadow: 0 1px 2px rgba(8,23,25,.025), 0 14px 38px rgba(8,23,25,.045);
}

html[data-ui="site"] .order-card {
    gap: 22px;
}

html[data-ui="site"] .order-card__heading {
    min-height: 50px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--c-line-soft);
}

html[data-ui="site"] .order-card__heading > div {
    gap: 4px;
}

html[data-ui="site"] .order-card__heading h2 {
    line-height: 1.35;
}

html[data-ui="site"] .dropzone {
    min-height: 290px;
    border-radius: 20px;
    border-width: 1.5px;
}

html[data-ui="site"] .dropzone > :where(strong, span, small) {
    max-width: 620px;
}

html[data-ui="site"] .file-result {
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
}

html[data-ui="site"] .file-row {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    min-height: 68px;
    padding: 12px 14px;
    border: 1px solid var(--c-line-soft);
    background: var(--c-surface-soft);
}

html[data-ui="site"] .file-result__icon {
    width: 44px;
    height: 44px;
}

html[data-ui="site"] .file-upload-note {
    padding: 12px 14px;
    border: 1px solid var(--c-accent-border);
}

html[data-ui="site"] .file-result > [data-continue-analysis] {
    min-height: 56px;
    margin: 2px 0 0;
    border-radius: 15px;
}

html[data-ui="site"] .file-result > [data-continue-analysis]:disabled {
    background: var(--c-surface-muted);
    border-color: var(--c-line);
    color: var(--c-ink-400);
    box-shadow: none;
}

html[data-ui="site"] .privacy-note {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 15px 16px;
}

html[data-ui="site"] .privacy-note > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--c-accent-soft);
}

html[data-ui="site"] .privacy-note p {
    padding-top: 2px;
}

html[data-ui="site"] .recommendation-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
}

html[data-ui="site"] .print-profiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-ui="site"] .print-profiles button {
    display: grid;
    align-content: center;
    gap: 4px;
    text-align: start;
}

html[data-ui="site"] .order-card .field-grid {
    gap: 20px 16px;
}

html[data-ui="site"] .field--counter .counter {
    width: 100%;
}

html[data-ui="site"] .counter {
    direction: rtl;
    grid-template-columns: 50px minmax(72px, 1fr) 50px;
    min-height: 52px;
    overflow: hidden;
    border-radius: 15px;
    background: var(--c-surface);
    box-shadow: inset 0 0 0 1px var(--c-line);
}

html[data-ui="site"] .counter button {
    min-height: 52px;
    background: var(--c-surface-soft);
    color: var(--c-accent-ink);
    font-size: 21px;
}

html[data-ui="site"] .counter button:first-child {
    border-inline-end: 1px solid var(--c-line);
}

html[data-ui="site"] .counter button:last-child {
    border-inline-start: 1px solid var(--c-line);
}

html[data-ui="site"] .counter button:hover {
    background: var(--c-accent-soft);
    color: var(--c-accent-hover);
}

html[data-ui="site"] .counter input {
    min-height: 52px;
    font-size: var(--text-xl);
    line-height: 1;
}

html[data-ui="site"] .range-field {
    gap: 14px;
    padding: 16px 0 2px;
    border-top: 1px solid var(--c-line-soft);
}

html[data-ui="site"] .range-field > span {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 18px;
    align-items: baseline;
}

html[data-ui="site"] .range-field > span small {
    text-align: end;
}

html[data-ui="site"] .range-field > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}

html[data-ui="site"] .range-field input[type="range"] {
    width: 100%;
    margin: 0;
}

html[data-ui="site"] .range-field output {
    min-width: 86px;
    padding: 7px 10px;
    border: 1px solid var(--c-line);
    border-radius: 11px;
    background: var(--c-surface-soft);
    text-align: center;
}

html[data-ui="site"] .delivery-address {
    margin: 0;
    padding-top: 22px;
}

html[data-ui="site"] .saved-addresses {
    margin: 0 0 18px;
}

html[data-ui="site"] .coupon-field {
    margin: 0;
}

html[data-ui="site"] .credit-choice {
    position: relative;
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 100px;
    margin: 0;
    padding: 18px;
    border: 1px solid var(--c-line);
}

html[data-ui="site"] .credit-choice > span {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}

html[data-ui="site"] .credit-choice > div {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    gap: 5px;
}

html[data-ui="site"] .credit-choice b {
    font-size: var(--text-md);
    line-height: 1.55;
}

html[data-ui="site"] .credit-choice small {
    line-height: 1.85;
}

html[data-ui="site"] .payment-methods {
    margin: 0;
    gap: 14px;
}

html[data-ui="site"] .payment-choice {
    min-height: 94px;
    padding: 16px;
    gap: 14px;
}

html[data-ui="site"] .order-card > .button--wide {
    min-height: 60px;
    margin: 0;
    font-size: var(--text-lg);
}

html[data-ui="site"] .quote-card {
    padding: 22px;
}

/* Public footer uses explicit columns and never lets generic span rules break the brand. */
html[data-ui="site"] .footer {
    margin-top: clamp(56px, 7vw, 92px);
}

html[data-ui="site"] .footer__grid {
    grid-template-columns: minmax(320px, 1.35fr) minmax(190px, .75fr) minmax(220px, .85fr);
    gap: clamp(40px, 5vw, 76px);
}

html[data-ui="site"] .footer .brand--footer {
    width: fit-content;
}

html[data-ui="site"] .footer .brand--footer .brand__text {
    display: grid !important;
    gap: 3px;
}

html[data-ui="site"] .footer .brand--footer .brand__text :where(strong, small) {
    display: block !important;
    margin: 0 !important;
}

html[data-ui="site"] .footer__description {
    max-width: 540px;
    margin: 22px 0 0 !important;
    color: rgba(255,255,255,.66) !important;
    font-size: var(--text-sm) !important;
    line-height: 2.05 !important;
}

html[data-ui="site"] .footer__grid > div:not(:first-child) {
    gap: 10px;
}

html[data-ui="site"] .footer__grid > div:not(:first-child) > :where(a, span) {
    padding-block: 1px;
}

html[data-ui="site"] .footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

/* --------------------------------------------------------------------------
   Administration workspace
   -------------------------------------------------------------------------- */

html[data-ui="admin"] .admin-main,
html[data-ui="admin"] .admin-page,
html[data-ui="admin"] .admin-narrow {
    padding-block: 32px 64px;
}

html[data-ui="admin"] :where(.admin-main > .container, .admin-page > .container, .admin-narrow > .container) {
    gap: 24px;
}

html[data-ui="admin"] :where(.admin-page-head, .admin-page__head) {
    min-height: 92px;
    margin: 0;
    padding-bottom: 4px;
    align-items: center;
}

html[data-ui="admin"] :where(.admin-page-head, .admin-page__head) h1 {
    margin-top: 6px;
    line-height: 1.24;
}

html[data-ui="admin"] :where(.admin-page-head, .admin-page__head) p {
    max-width: 760px;
}

html[data-ui="admin"] .admin-panel {
    border-radius: var(--ui-panel-radius);
    box-shadow: 0 1px 2px rgba(8,23,25,.02), 0 12px 34px rgba(8,23,25,.035);
}

/* Panels containing popovers/forms must not clip interactive children. */
html[data-ui="admin"] .admin-form-panel,
html[data-ui="admin"] .settings-section {
    overflow: visible;
}

html[data-ui="admin"] .admin-panel__head {
    min-height: 74px;
    padding: 18px 22px;
}

html[data-ui="admin"] .admin-panel__head h2,
html[data-ui="admin"] .health-grid > .admin-panel > h2 {
    line-height: 1.45;
}

/* Form panels with a dedicated head use edge-to-edge head and padded body. */
html[data-ui="admin"] .admin-form-panel:has(> .admin-panel__head) {
    padding: 0;
}

html[data-ui="admin"] .admin-form-panel:has(> .admin-panel__head) > form {
    padding: 22px;
}

html[data-ui="admin"] .admin-form-panel:not(:has(> .admin-panel__head)) {
    padding: 24px;
}

html[data-ui="admin"] .admin-form-panel:not(:has(> .admin-panel__head)) > h2 + form {
    margin-top: 22px;
}

html[data-ui="admin"] .admin-form-panel > form {
    gap: 22px;
}

html[data-ui="admin"] .field-grid,
html[data-ui="admin"] .field-grid--2,
html[data-ui="admin"] .field-grid--3 {
    gap: 20px 16px;
}

html[data-ui="admin"] .staff-create-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html[data-ui="admin"] .staff-create-grid > .field:last-child {
    grid-column: auto;
}

html[data-ui="admin"] .coupon-editor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: end;
}

html[data-ui="admin"] .coupon-editor-grid > .checkbox-field {
    justify-self: start;
    align-self: end;
    min-height: var(--control-h);
}

html[data-ui="admin"] .checkbox-field,
html[data-ui="admin"] .check-field {
    gap: 10px;
    padding-inline: 2px;
}

html[data-ui="admin"] .admin-filterbar,
html[data-ui="admin"] .admin-search {
    margin: 0;
    padding: 16px;
    border-radius: 18px;
    box-shadow: none;
}

html[data-ui="admin"] .admin-filterbar {
    grid-template-columns: minmax(280px, 1fr) minmax(210px, 280px) auto auto;
    gap: 12px;
}

html[data-ui="admin"] .admin-filterbar > :where(input, select, .button, .admin-filter-reset) {
    align-self: stretch;
}

html[data-ui="admin"] .admin-filter-reset {
    min-width: 76px;
    border-radius: 12px;
}

html[data-ui="admin"] .admin-board {
    overflow: hidden;
    border-radius: var(--ui-panel-radius);
}

html[data-ui="admin"] .admin-table__head,
html[data-ui="admin"] .admin-table__row {
    min-height: 68px;
    padding: 15px 20px;
}

html[data-ui="admin"] .admin-table__head {
    border-bottom: 1px solid var(--c-line-soft);
}

html[data-ui="admin"] .admin-table__row {
    border-top: 0;
    border-bottom: 1px solid var(--c-line-soft);
}

html[data-ui="admin"] .admin-table__row:last-child {
    border-bottom: 0;
}

html[data-ui="admin"] .admin-empty {
    min-height: 230px;
    padding: 38px 24px;
}

html[data-ui="admin"] .admin-empty > span {
    margin-bottom: 10px;
}

html[data-ui="admin"] .admin-metrics {
    margin: 0;
    gap: 16px;
}

html[data-ui="admin"] .admin-metrics article {
    min-height: 138px;
    padding: 20px;
}

/* Reports and system-health surfaces. */
html[data-ui="admin"] .report-range {
    min-width: min(100%, 560px);
    padding: 14px;
    gap: 12px;
    border-radius: 18px;
}

html[data-ui="admin"] .report-range .field {
    gap: 7px;
}

html[data-ui="admin"] .report-grid,
html[data-ui="admin"] .health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

html[data-ui="admin"] .report-grid > .admin-panel,
html[data-ui="admin"] .health-grid > .admin-panel {
    min-width: 0;
}

html[data-ui="admin"] .health-grid > .admin-panel > h2 {
    padding: 20px 22px 10px;
    margin: 0;
    font-size: var(--text-xl);
}

html[data-ui="admin"] .health-grid > .admin-panel > .field-help {
    display: block;
    margin: 0;
    padding: 2px 22px 20px;
}

html[data-ui="admin"] .health-grid > .admin-panel > .admin-link {
    display: inline-flex;
    margin: 0 22px 20px;
}

html[data-ui="admin"] .health-list {
    margin: 0;
    padding: 4px 22px 16px;
}

html[data-ui="admin"] .health-list > div {
    min-height: 56px;
    gap: 18px;
    padding-block: 13px;
}

html[data-ui="admin"] .health-list dt {
    flex: 1 1 auto;
}

html[data-ui="admin"] .health-list dd {
    flex: 0 1 58%;
    margin: 0;
    text-align: end;
    overflow-wrap: anywhere;
}

html[data-ui="admin"] .health-checks {
    padding: 14px 22px 20px;
    gap: 9px;
}

html[data-ui="admin"] .health-checks span {
    min-height: 38px;
    padding-inline: 12px;
}

html[data-ui="admin"] .report-bars {
    padding: 20px 22px 22px;
}

html[data-ui="admin"] .report-bars > div {
    grid-template-columns: minmax(120px, 160px) 48px minmax(100px, 1fr);
}

/* Staff table and inline access tools. */
html[data-ui="admin"] .staff-actions {
    gap: 8px;
}

html[data-ui="admin"] .staff-actions details {
    position: relative;
}

html[data-ui="admin"] .staff-actions details > summary {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding-inline: 11px;
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    background: var(--admin-panel);
    color: var(--admin-muted);
    font-size: var(--text-xs);
    font-weight: 750;
    cursor: pointer;
    list-style: none;
}

html[data-ui="admin"] .staff-actions details > summary::-webkit-details-marker {
    display: none;
}

html[data-ui="admin"] .staff-popover {
    width: min(360px, 78vw);
    display: grid;
    gap: 16px;
    margin-top: 8px;
    padding: 16px;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}

html[data-ui="admin"] .staff-popover form {
    display: grid;
    gap: 12px;
}

/* --------------------------------------------------------------------------
   Jalali picker – compact, anchored, keyboard-safe
   -------------------------------------------------------------------------- */

.jalali-control > .jalali-trigger {
    width: 38px;
    height: 38px;
    border: 1px solid var(--c-line);
    border-radius: 11px;
    background: var(--c-surface-soft);
}

.jalali-control > .jalali-trigger svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jalali-popover {
    z-index: 1200;
    width: min(340px, calc(100vw - 24px));
    padding: 16px;
    border: 1px solid var(--c-line);
    border-radius: 20px;
    background: var(--c-surface);
    box-shadow: 0 24px 72px rgba(8,23,25,.18);
}

.jalali-popover__head {
    grid-template-columns: 40px minmax(0,1fr) 40px;
    gap: 8px;
    margin-bottom: 10px;
}

.jalali-popover__head button {
    width: 40px;
    height: 40px;
    border: 1px solid var(--c-line-soft);
    border-radius: 11px;
    background: var(--c-surface-soft);
}

.jalali-popover__head button:hover {
    border-color: var(--c-accent-border);
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
}

.jalali-popover__title {
    display: grid;
    place-items: center;
    font-size: var(--text-lg);
    font-weight: 850;
}

.jalali-popover__week,
.jalali-popover__days {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.jalali-popover__week span {
    min-height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--c-ink-500);
    font-size: var(--text-xs);
    font-weight: 750;
}

.jalali-popover__days button {
    min-height: 38px;
    padding: 0;
    border-radius: 10px;
    background: transparent;
    font-size: var(--text-sm);
}

.jalali-popover__days button:not(.is-empty):hover {
    background: var(--c-surface-soft);
}

.jalali-popover__days button.is-today:not(.is-selected) {
    box-shadow: inset 0 0 0 1px var(--c-accent-border);
    color: var(--c-accent-ink);
}

.jalali-popover__days button.is-selected {
    background: var(--c-accent);
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--c-accent) 18%, transparent);
}

/* --------------------------------------------------------------------------
   Responsive final pass
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    html[data-ui="admin"] .coupon-editor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html[data-ui="admin"] .admin-filterbar {
        grid-template-columns: minmax(240px, 1fr) minmax(200px, 250px) auto;
    }

    html[data-ui="admin"] .admin-filterbar .admin-filter-reset {
        grid-column: 1 / -1;
        justify-self: start;
        min-height: auto;
        padding-inline: 2px;
    }
}

@media (max-width: 980px) {
    html[data-ui="admin"] .report-grid,
    html[data-ui="admin"] .health-grid {
        grid-template-columns: 1fr;
    }

    html[data-ui="admin"] .staff-create-grid,
    html[data-ui="admin"] .coupon-editor-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    html[data-ui="site"] .order-shell {
        gap: 18px;
    }

    html[data-ui="site"] .order-card__heading {
        display: grid;
        gap: 8px;
    }

    html[data-ui="site"] .print-profiles {
        grid-template-columns: 1fr;
    }

    html[data-ui="site"] .range-field > span {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    html[data-ui="site"] .range-field > span small {
        text-align: start;
    }

    html[data-ui="site"] .footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    html[data-ui="site"] .footer__bottom {
        display: grid;
        justify-items: center;
        text-align: center;
    }

    html[data-ui="admin"] :where(.admin-page-head, .admin-page__head) {
        min-height: 0;
        display: grid;
        align-items: start;
        gap: 14px;
    }

    html[data-ui="admin"] .admin-filterbar,
    html[data-ui="admin"] .report-range {
        grid-template-columns: 1fr;
    }

    html[data-ui="admin"] .admin-filterbar .admin-filter-reset {
        grid-column: auto;
    }

    html[data-ui="admin"] .health-list > div {
        display: grid;
        gap: 5px;
    }

    html[data-ui="admin"] .health-list dd {
        text-align: start;
    }

    .jalali-popover {
        width: min(332px, calc(100vw - 20px));
        padding: 14px;
    }
}

/* ========================================================================== 
   1.7.0 interaction and motion contract
   ========================================================================== */

:root {
    --ui-motion-fast: 140ms;
    --ui-motion: 220ms;
    --ui-motion-slow: 360ms;
    --ui-ease: cubic-bezier(.2,.8,.2,1);
    --ui-menu-shadow: 0 20px 56px rgba(8,23,25,.14), 0 4px 14px rgba(8,23,25,.08);
}

/* Soft page entrance and navigation feedback. */
.ui-page-loader {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
    inline-size: 100vw;
    block-size: 100vh;
    block-size: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--c-surface) 28%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(108%);
    backdrop-filter: blur(14px) saturate(108%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms var(--ui-ease), visibility 180ms step-end;
}

.ui-page-loader__spinner {
    display: block;
    box-sizing: border-box;
    inline-size: 38px;
    block-size: 38px;
    margin: 0;
    padding: 0;
    border: 3px solid color-mix(in srgb, var(--c-accent) 18%, var(--c-line));
    border-block-start-color: var(--c-accent);
    border-inline-end-color: color-mix(in srgb, var(--c-accent) 72%, var(--c-ink-900));
    border-radius: 50%;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--c-accent) 10%, transparent);
    animation: ui-loader-spin .72s linear infinite;
    transform-origin: center;
}

html.js:not(.is-ready) .ui-page-loader,
html.is-navigating .ui-page-loader {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 180ms var(--ui-ease), visibility 0s;
}

html.js :where(.site-shell,.admin-shell,.admin-login-wrap,.installer-shell) {
    transition: opacity var(--ui-motion-slow) var(--ui-ease), filter var(--ui-motion-slow) var(--ui-ease);
}

html.js:not(.is-ready) :where(.site-shell,.admin-shell,.admin-login-wrap,.installer-shell) {
    opacity: .86;
    filter: saturate(.96);
}

html.is-ready :where(.site-shell,.admin-shell,.admin-login-wrap,.installer-shell) {
    opacity: 1;
    filter: none;
}

@keyframes ui-loader-spin {
    to { transform: rotate(1turn); }
}

@media (max-width: 640px) {
    .ui-page-loader__spinner {
        inline-size: 34px;
        block-size: 34px;
        border-width: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-page-loader__spinner {
        animation-duration: 1.2s;
    }
}

/* Fully custom single-select component. The native control stays in the form. */
.ui-combobox {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.ui-combobox__native {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    inset: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip-path: inset(50%) !important;
}

.ui-combobox__trigger {
    width: 100%;
    min-height: var(--control-h);
    display: grid;
    grid-template-columns: minmax(0,1fr) 34px;
    align-items: center;
    gap: 10px;
    padding: 0 14px 0 9px;
    border: 1px solid var(--control-border);
    border-radius: var(--ui-field-radius, var(--radius-sm));
    background: var(--control-bg);
    color: var(--c-ink-900);
    text-align: start;
    box-shadow: none;
    transition: border-color var(--ui-motion-fast) ease, background-color var(--ui-motion-fast) ease, box-shadow var(--ui-motion-fast) ease;
}

html[dir="rtl"] .ui-combobox__trigger {
    grid-template-columns: minmax(0,1fr) 34px;
    padding: 0 14px 0 9px;
}

.ui-combobox__trigger:hover:not(:disabled) {
    border-color: var(--control-border-hover);
    background: var(--c-accent-surface);
}

.ui-combobox.is-open .ui-combobox__trigger,
.ui-combobox__trigger:focus-visible {
    border-color: var(--c-accent);
    background: var(--control-bg-focus);
    box-shadow: var(--focus-ring);
}

.ui-combobox__trigger:disabled {
    color: var(--c-ink-400);
    background: var(--control-bg-disabled);
    cursor: not-allowed;
}

.ui-combobox__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-md);
    font-weight: 600;
}

.ui-combobox__chevron {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    justify-self: end;
    border-radius: 9px;
    background: var(--c-surface-soft);
    transition: transform var(--ui-motion-fast) ease, background-color var(--ui-motion-fast) ease;
}

.ui-combobox__chevron::before {
    content: "";
    width: 7px;
    height: 7px;
    border-inline-end: 1.7px solid var(--c-ink-600);
    border-block-end: 1.7px solid var(--c-ink-600);
    transform: rotate(45deg) translate(-1px,-1px);
}

.ui-combobox.is-open .ui-combobox__chevron {
    transform: rotate(180deg);
    background: var(--c-accent-soft);
}

.ui-combobox__menu {
    position: fixed;
    z-index: 10020;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 7px;
    border: 1px solid var(--c-line);
    border-radius: 16px;
    background: rgba(255,255,255,.985);
    color: var(--c-ink-900);
    box-shadow: var(--ui-menu-shadow);
    backdrop-filter: blur(16px);
    scrollbar-width: thin;
    scrollbar-color: var(--c-accent-border) transparent;
    animation: ui-menu-in var(--ui-motion-fast) var(--ui-ease) both;
}

.ui-combobox__menu[hidden] { display: none !important; }

.ui-combobox__group {
    padding: 9px 11px 6px;
    color: var(--c-ink-500);
    font-size: var(--text-xs);
    font-weight: 800;
}

.ui-combobox__group:not(:first-child) {
    margin-top: 5px;
    border-top: 1px solid var(--c-line-soft);
}

.ui-combobox__option {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 11px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--c-ink-800);
    text-align: start;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: background-color var(--ui-motion-fast) ease, color var(--ui-motion-fast) ease;
}

.ui-combobox__option:hover,
.ui-combobox__option:focus-visible {
    outline: none;
    background: var(--c-accent-faint);
    color: var(--c-accent-ink);
    box-shadow: none;
}

.ui-combobox__option.is-selected {
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
    font-weight: 800;
}

.ui-combobox__option.is-selected::after {
    content: "✓";
    margin-inline-start: auto;
    color: var(--c-accent);
    font-weight: 900;
}

.ui-combobox__option:disabled {
    opacity: .42;
    cursor: not-allowed;
}

@keyframes ui-menu-in {
    from { opacity: 0; transform: translateY(-4px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Settings actions belong to the form footer, never to the viewport. */
html[data-ui="admin"] .settings-savebar {
    position: static !important;
    inset: auto !important;
    z-index: auto;
    min-height: 78px;
    margin: 2px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--admin-border);
    border-radius: var(--ui-panel-radius);
    background: var(--admin-panel);
    box-shadow: var(--shadow-xs);
    backdrop-filter: none;
}

html[data-ui="admin"] .settings-savebar.is-dirty {
    border-color: var(--c-accent-border);
    background: var(--c-accent-faint);
}

html[data-ui="admin"] .settings-savebar__button:disabled {
    background: var(--c-surface-muted);
    border-color: var(--c-line);
    color: var(--c-ink-400);
    box-shadow: none;
}

/* Order stepper: readable, tactile, and consistent in RTL. */
html[data-ui="site"] .order-progress {
    width: min(920px, 100%);
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr) 36px minmax(0,1fr) 36px minmax(0,1fr);
    gap: 8px;
    align-items: center;
    margin: 0 auto;
    padding: 6px;
    border: 1px solid var(--c-line-soft);
    border-radius: 20px;
    background: var(--c-surface-soft);
}

html[data-ui="site"] .order-progress > i {
    position: relative;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: var(--c-line);
    overflow: hidden;
}

html[data-ui="site"] .order-progress > i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--c-accent);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--ui-motion) var(--ui-ease);
}

html[data-ui="site"] .order-progress button.is-done + i::after {
    transform: scaleX(1);
}

html[data-ui="site"] .order-progress button {
    min-width: 0;
    min-height: 60px;
    display: grid;
    grid-template-columns: 36px minmax(0,1fr);
    align-items: center;
    justify-items: stretch;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 15px;
    background: transparent;
    color: var(--c-ink-500);
    text-align: start;
    transition: color var(--ui-motion-fast) ease, background-color var(--ui-motion-fast) ease, border-color var(--ui-motion-fast) ease, transform var(--ui-motion-fast) ease;
}

html[data-ui="site"] .order-progress button:hover {
    background: #fff;
    border-color: var(--c-line);
}

html[data-ui="site"] .order-progress button > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--c-line);
    border-radius: 12px;
    background: #fff;
    color: var(--c-ink-600);
    font-size: var(--text-sm);
    font-weight: 900;
    transition: inherit;
}

html[data-ui="site"] .order-progress button > b {
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: 800;
    line-height: 1.4;
}

html[data-ui="site"] .order-progress button.is-active {
    border-color: var(--c-accent-border);
    background: var(--c-accent-faint);
    color: var(--c-accent-ink);
}

html[data-ui="site"] .order-progress button.is-active > span {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: #fff;
    box-shadow: 0 7px 18px color-mix(in srgb,var(--c-accent) 20%,transparent);
}

html[data-ui="site"] .order-progress button.is-done {
    color: var(--c-ink-700);
}

html[data-ui="site"] .order-progress button.is-done > span {
    border-color: var(--c-accent-border);
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
    font-size: 0;
}

html[data-ui="site"] .order-progress button.is-done > span::before {
    content: "✓";
    font-size: 16px;
    font-weight: 900;
}

html[data-ui="site"] .order-step.is-active {
    animation: ui-step-in var(--ui-motion) var(--ui-ease) both;
}

@keyframes ui-step-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Counter behaves like one composed control. */
html[data-ui="site"] .counter {
    border: 1px solid var(--c-line);
    box-shadow: none;
    transition: border-color var(--ui-motion-fast) ease, box-shadow var(--ui-motion-fast) ease;
}

html[data-ui="site"] .counter:focus-within {
    border-color: var(--c-accent);
    box-shadow: var(--focus-ring);
}

html[data-ui="site"] .counter button {
    background: var(--c-accent-faint);
}

html[data-ui="site"] .counter button:active {
    background: var(--c-accent-soft);
    transform: scale(.96);
}

html[data-ui="site"] .counter input:focus {
    box-shadow: none !important;
}

/* Subtle quality details. */
html[data-ui] :where(.button,.choice-card,.payment-choice,.credit-choice,.print-profiles button,.admin-panel,.account-order,.address-card,.classroom-item) {
    transition-duration: var(--ui-motion-fast);
    transition-timing-function: var(--ui-ease);
}

html[data-ui] .button:active:not(:disabled) {
    transform: translateY(0) scale(.985);
}

html[data-ui] :where(.admin-panel,.order-card,.quote-card,.account-form-card,.payment-main-card,.tracking-card) {
    isolation: isolate;
}

html[data-ui] :where(.alert,.form-message.is-success,.form-message.is-error) {
    animation: ui-feedback-in var(--ui-motion) var(--ui-ease) both;
}

@keyframes ui-feedback-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
    html[data-ui="site"] .order-progress {
        grid-template-columns: repeat(4, minmax(0,1fr));
        gap: 6px;
        padding: 5px;
        border-radius: 17px;
    }

    html[data-ui="site"] .order-progress > i { display: none; }

    html[data-ui="site"] .order-progress button {
        min-height: 62px;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 4px;
        padding: 7px 4px;
        text-align: center;
    }

    html[data-ui="site"] .order-progress button > span {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        font-size: var(--text-xs);
    }

    html[data-ui="site"] .order-progress button > b {
        display: block;
        font-size: var(--text-xs);
    }

    html[data-ui="admin"] .settings-savebar {
        display: grid;
        gap: 12px;
        padding: 15px;
    }

    html[data-ui="admin"] .settings-savebar__button {
        width: 100%;
    }
}

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

/* Busy state for async actions such as checkout. */
html[data-ui] .button.is-loading {
    position: relative;
    pointer-events: none;
    color: color-mix(in srgb, currentColor 35%, transparent);
}

html[data-ui] .button.is-loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid color-mix(in srgb, #fff 42%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: ui-button-spin 700ms linear infinite;
}

@keyframes ui-button-spin { to { transform: rotate(360deg); } }

.ui-combobox__trigger.is-invalid {
    border-color: var(--c-danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-danger) 13%, transparent);
}

/* 1.9 order workflow and operations polish */
.ui-icon{display:inline-block;vertical-align:middle;flex:none;pointer-events:none}
.button>.ui-icon,.back-link>.ui-icon,.admin-panel__head h2>.ui-icon{margin-inline-end:2px}

/* Payment confirmation */
html[data-ui="site"] .payment-grid--refined{grid-template-columns:minmax(0,1.55fr) minmax(270px,.65fr);gap:var(--space-5)}
html[data-ui="site"] .payment-main-card--refined{display:grid;gap:var(--space-5);padding:clamp(22px,3vw,34px)}
html[data-ui="site"] .payment-confirmation-head{display:flex;align-items:flex-start;gap:14px}
html[data-ui="site"] .payment-confirmation-icon{width:52px;height:52px;display:grid;place-items:center;flex:none;border-radius:16px;background:var(--c-accent-soft);color:var(--c-accent-ink)}
html[data-ui="site"] .payment-confirmation-head h1{margin:3px 0 5px;font-size:clamp(28px,3vw,38px)}
html[data-ui="site"] .payment-confirmation-head p{margin:0;color:var(--c-ink-500)}
html[data-ui="site"] .payment-order-summary--cards{grid-template-columns:repeat(3,1fr);gap:10px;margin:0}
html[data-ui="site"] .payment-order-summary--cards>div{min-height:88px;display:grid;align-content:center;gap:7px;padding:14px;border:1px solid var(--c-line);border-radius:15px;background:var(--c-surface-soft)}
html[data-ui="site"] .payment-order-summary--cards>div>span{display:flex;align-items:center;gap:6px;color:var(--c-ink-500);font-size:var(--text-xs)}
html[data-ui="site"] .payment-order-summary--cards strong{font-size:var(--text-md)}
html[data-ui="site"] .payment-order-summary--cards strong small{font-size:var(--text-xs);color:var(--c-ink-500)}
html[data-ui="site"] .bank-transfer-card{overflow:hidden;border:1px solid color-mix(in srgb,var(--c-accent) 30%,transparent);border-radius:20px;background:linear-gradient(145deg,var(--c-accent-deep),color-mix(in srgb,var(--c-accent-deep) 84%,#000));color:#fff;box-shadow:0 18px 42px color-mix(in srgb,var(--c-accent) 14%,transparent)}
html[data-ui="site"] .bank-transfer-card__head,html[data-ui="site"] .bank-transfer-card__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px}
html[data-ui="site"] .bank-transfer-card__head{border-bottom:1px solid rgba(255,255,255,.1);justify-content:flex-start}.bank-transfer-card__head>span{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.1)}
html[data-ui="site"] .bank-transfer-card__head small{display:block;color:rgba(255,255,255,.62)}
html[data-ui="site"] .bank-transfer-card__head strong{display:block;margin-top:2px}
html[data-ui="site"] .bank-transfer-card__number{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 18px}
html[data-ui="site"] .bank-transfer-card__number>strong{font-size:clamp(21px,3vw,30px);letter-spacing:1px}
html[data-ui="site"] .bank-transfer-card__number button{min-height:42px;display:inline-flex;align-items:center;gap:7px;padding:0 13px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.1);color:#fff;font:inherit;font-weight:800;cursor:pointer;transition:.16s ease}
html[data-ui="site"] .bank-transfer-card__number button:hover,html[data-ui="site"] .bank-transfer-card__number button.is-copied{background:#fff;color:var(--c-accent-deep)}
html[data-ui="site"] .bank-transfer-card__footer{background:rgba(0,0,0,.08);color:rgba(255,255,255,.75)}
html[data-ui="site"] .bank-transfer-card__footer b{color:#fff}
html[data-ui="site"] .payment-side--refined{display:grid;gap:18px;padding:22px}
html[data-ui="site"] .payment-side__intro{display:flex;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--c-line-soft)}
html[data-ui="site"] .payment-side__intro>span{width:42px;height:42px;display:grid;place-items:center;flex:none;border-radius:13px;background:var(--c-accent-soft);color:var(--c-accent-ink)}
html[data-ui="site"] .payment-side__intro b,html[data-ui="site"] .payment-side__intro small{display:block}.payment-side__intro small{margin-top:3px;color:var(--c-ink-500);line-height:1.7}
html[data-ui="site"] .payment-steps{display:grid;gap:0;margin:0;padding:0;list-style:none}.payment-steps li{position:relative;display:grid;grid-template-columns:38px 1fr;gap:10px;padding:0 0 22px}.payment-steps li:last-child{padding-bottom:0}.payment-steps li:not(:last-child)::after{content:"";position:absolute;top:38px;right:18px;width:1px;height:calc(100% - 30px);background:var(--c-line)}.payment-steps li>span{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--c-accent-soft);color:var(--c-accent-ink);font-weight:900}.payment-steps p{margin:0}.payment-steps b,.payment-steps small{display:block}.payment-steps small{margin-top:3px;color:var(--c-ink-500);line-height:1.7}
html[data-ui="site"] .payment-state-box{display:flex;align-items:flex-start;gap:11px;margin:0}.payment-state-box>span{width:40px;height:40px;display:grid;place-items:center;flex:none;border-radius:12px;background:var(--c-accent-soft);color:var(--c-accent-ink)}.payment-state-box p{margin:3px 0 0;color:var(--c-ink-500)}
html[data-ui="site"] .receipt-form--refined{padding-top:4px}.receipt-drop__icon{width:50px!important;height:50px!important;display:grid!important;place-items:center;border-radius:15px;background:var(--c-accent-soft)!important;color:var(--c-accent-ink)}
html[data-ui="site"] .payment-error-state{min-height:360px;display:grid;place-items:center;align-content:center;gap:10px;text-align:center}.payment-error-state>span{width:56px;height:56px;display:grid;place-items:center;border-radius:17px;background:var(--c-accent-soft);color:var(--c-accent-ink)}.payment-error-state h1,.payment-error-state p{margin:0}.payment-error-state p{color:var(--c-ink-500)}

/* Admin order list */
html[data-ui="admin"] .admin-page__head--orders{align-items:center}
html[data-ui="admin"] .admin-order-tabs{display:flex;gap:8px;margin-bottom:14px;padding-bottom:2px;overflow-x:auto;scrollbar-width:none}.admin-order-tabs::-webkit-scrollbar{display:none}.admin-order-tabs a{min-height:42px;display:inline-flex;align-items:center;gap:8px;flex:none;padding:0 13px;border:1px solid var(--admin-border);border-radius:12px;background:var(--admin-panel);color:var(--admin-muted);font-size:var(--text-sm);font-weight:750}.admin-order-tabs a b{min-width:25px;padding:2px 7px;border-radius:999px;background:var(--c-surface-soft);color:var(--admin-text);text-align:center;font-size:var(--text-xs)}.admin-order-tabs a:hover,.admin-order-tabs a.is-active{border-color:var(--c-accent-border);background:var(--c-accent-faint);color:var(--c-accent-ink)}.admin-order-tabs a.is-active b{background:var(--c-accent);color:#fff}
html[data-ui="admin"] .admin-filterbar--orders{grid-template-columns:minmax(260px,1fr) 220px auto auto;align-items:center}.admin-search-control{position:relative;display:flex;align-items:center}.admin-search-control>.ui-icon{position:absolute;right:14px;color:var(--admin-muted);z-index:2}.admin-search-control input{width:100%;padding-right:42px!important}
html[data-ui="admin"] .admin-order-list{display:grid;gap:10px}
html[data-ui="admin"] .admin-order-card{display:grid;grid-template-columns:minmax(190px,.9fr) minmax(180px,.8fr) minmax(300px,1.45fr) minmax(230px,1fr) minmax(160px,.7fr);gap:16px;align-items:center;padding:16px 18px;border:1px solid var(--admin-border);border-radius:18px;background:var(--admin-panel);box-shadow:var(--shadow-xs);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
html[data-ui="admin"] .admin-order-card:hover{transform:translateY(-1px);border-color:var(--c-accent-border);background:color-mix(in srgb,var(--admin-panel) 96%,var(--c-accent-faint));box-shadow:0 12px 30px rgba(15,38,40,.07)}
html[data-ui="admin"] .admin-order-card__identity{display:flex;align-items:center;gap:11px;min-width:0}.admin-order-card__icon{width:45px;height:45px;display:grid;place-items:center;flex:none;border-radius:14px;background:var(--c-accent-soft);color:var(--c-accent-ink)}.admin-order-card__identity>div{min-width:0}.admin-order-card__eyebrow,.admin-order-card__customer>span,.admin-order-card__fulfillment span{display:flex;align-items:center;gap:5px;color:var(--admin-muted);font-size:var(--text-xs)}.admin-order-card__identity strong{display:block;margin:2px 0;font-size:var(--text-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-order-card__identity small,.admin-order-card__customer small,.admin-order-card__fulfillment small{color:var(--admin-muted);font-size:var(--text-xs)}
html[data-ui="admin"] .admin-order-card__customer{display:grid;gap:3px;min-width:0}.admin-order-card__customer strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-ui="admin"] .admin-order-card__specs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.order-mini-chip{min-height:30px;display:inline-flex;align-items:center;gap:5px;padding:0 9px;border:1px solid var(--c-line);border-radius:10px;background:var(--c-surface-soft);color:var(--c-ink-700);font-size:var(--text-xs);white-space:nowrap}.order-mini-chip.is-accent{border-color:var(--c-accent-border);background:var(--c-accent-faint);color:var(--c-accent-ink)}
html[data-ui="admin"] .admin-order-card__fulfillment{display:grid;grid-template-columns:1fr 1fr;gap:8px}.admin-order-card__fulfillment>div{min-width:0;padding:8px 10px;border-right:2px solid var(--c-line-soft)}.admin-order-card__fulfillment strong,.admin-order-card__fulfillment small{display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-order-card__fulfillment strong{font-size:var(--text-sm)}
html[data-ui="admin"] .admin-order-card__result{display:grid;justify-items:end;gap:7px;text-align:left}.admin-order-card__result>strong{font-size:var(--text-lg)}.admin-order-card__result>strong small{font-size:var(--text-xs);color:var(--admin-muted)}.admin-order-card__open{display:inline-flex;align-items:center;gap:4px;color:var(--c-accent-ink);font-size:var(--text-xs);font-weight:800}
html[data-ui="admin"] .admin-empty--orders{min-height:260px;border:1px dashed var(--admin-border);border-radius:18px;background:var(--admin-panel)}.admin-empty--orders p{margin:2px 0 0;color:var(--admin-muted)}

/* Admin order detail */
html[data-ui="admin"] .admin-detail-head--refined{align-items:stretch;margin-bottom:14px}.admin-detail-head__identity{display:grid;align-content:start;gap:10px}.admin-detail-titleline{display:flex;align-items:center;gap:12px}.admin-order-mark{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:var(--c-accent-soft);color:var(--c-accent-ink)}.admin-detail-titleline h1{margin:1px 0 0}.admin-detail-customerline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--admin-muted);font-size:var(--text-sm)}.admin-detail-customerline>span{display:inline-flex;align-items:center;gap:5px}
html[data-ui="admin"] .admin-detail-actions--refined{align-items:stretch}.admin-detail-actions--refined>.button{align-self:center}.admin-detail-actions--refined .admin-detail-total{min-width:168px;display:grid;align-content:center;padding:13px 16px;border-radius:16px;background:var(--c-accent-deep)}
html[data-ui="admin"] .admin-order-overview{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.admin-order-overview>div{min-height:78px;display:grid;align-content:center;gap:5px;padding:13px 15px;border:1px solid var(--admin-border);border-radius:15px;background:var(--admin-panel)}.admin-order-overview span{display:flex;align-items:center;gap:6px;color:var(--admin-muted);font-size:var(--text-xs)}.admin-order-overview strong{font-size:var(--text-sm)}
html[data-ui="admin"] .spec-grid--refined{grid-template-columns:repeat(4,1fr);gap:10px;padding:16px}.spec-grid--refined article{min-height:86px;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--c-line-soft);border-radius:14px;background:var(--c-surface-soft)}.spec-grid--refined article.is-accent{border-color:var(--c-accent-border);background:var(--c-accent-faint)}.spec-icon{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:11px;background:#fff;color:var(--c-accent-ink);box-shadow:0 1px 0 rgba(0,0,0,.03)}.spec-grid--refined small,.spec-grid--refined strong,.spec-grid--refined em{display:block}.spec-grid--refined small{color:var(--admin-muted);font-size:var(--text-xs)}.spec-grid--refined strong{margin-top:2px;font-size:var(--text-md)}.spec-grid--refined em{margin-top:2px;color:var(--admin-muted);font-size:var(--text-xs);font-style:normal}
html[data-ui="admin"] .status-update--refined{display:grid;grid-template-columns:220px minmax(240px,1fr) auto;gap:10px;align-items:end;padding:14px 16px;border-top:1px solid var(--c-line-soft);background:color-mix(in srgb,var(--c-surface-soft) 65%,transparent)}.status-update--refined label{display:grid;gap:6px}.status-update--refined label>span{color:var(--admin-muted);font-size:var(--text-xs);font-weight:750}
html[data-ui="admin"] .admin-count-badge{min-height:30px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;background:var(--c-surface-soft);color:var(--admin-muted);font-size:var(--text-xs);font-weight:800}.admin-file-item--refined{grid-template-columns:minmax(0,1fr) auto!important}.admin-file-item--refined>a{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:11px;align-items:center;min-width:0}.admin-file-item--refined>a>span:nth-child(2){min-width:0}.admin-file-item--refined b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-file-item--refined em{display:inline-flex;align-items:center;gap:5px;color:var(--c-accent-ink);font-size:var(--text-xs);font-style:normal;font-weight:800}
html[data-ui="admin"] .admin-summary-panel>.button{margin:0 14px 14px;width:calc(100% - 28px)}.admin-summary-panel .admin-panel__head h2{display:flex;align-items:center;gap:7px}.detail-dl--refined{padding:4px 14px 10px}.detail-dl--refined>div{grid-template-columns:100px minmax(0,1fr);align-items:start}.detail-dl--refined .is-total{margin-top:5px;padding-top:13px;border-top:1px solid var(--c-line);border-bottom:0}.detail-dl--refined .is-total dd{color:var(--c-accent-ink);font-weight:900}.timeline--refined article{grid-template-columns:18px minmax(0,1fr);gap:11px}.timeline--refined i{width:12px;height:12px;margin-top:4px;border:3px solid var(--c-accent-soft);border-radius:50%;background:var(--c-accent)}

@media(max-width:1320px){html[data-ui="admin"] .admin-order-card{grid-template-columns:minmax(180px,.9fr) minmax(160px,.8fr) minmax(280px,1.5fr) minmax(160px,.8fr)}html[data-ui="admin"] .admin-order-card__fulfillment{display:none}.spec-grid--refined{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:980px){html[data-ui="site"] .payment-grid--refined{grid-template-columns:1fr}.payment-side--refined{order:-1}.payment-order-summary--cards{grid-template-columns:1fr 1fr!important}html[data-ui="admin"] .admin-filterbar--orders{grid-template-columns:1fr 1fr}.admin-filterbar--orders .admin-search-control{grid-column:1/-1}html[data-ui="admin"] .admin-order-card{grid-template-columns:1fr 1fr}.admin-order-card__specs{grid-column:1/-1}.admin-order-card__result{justify-items:start;text-align:right}.admin-order-overview{grid-template-columns:1fr 1fr!important}.spec-grid--refined{grid-template-columns:1fr 1fr!important}.status-update--refined{grid-template-columns:1fr!important}.admin-detail-head--refined{display:grid}.admin-detail-actions--refined{justify-content:space-between}}
@media(max-width:620px){html[data-ui="site"] .payment-order-summary--cards{grid-template-columns:1fr!important}.payment-confirmation-head{display:grid!important}.bank-transfer-card__number{align-items:flex-start!important;flex-direction:column}.bank-transfer-card__number>strong{font-size:20px!important}.payment-side--refined{padding:18px!important}html[data-ui="admin"] .admin-order-card{grid-template-columns:1fr}.admin-order-card__specs{grid-column:auto}.admin-order-card__result{justify-items:start}.admin-order-tabs{margin-inline:-14px;padding-inline:14px}.admin-order-overview{grid-template-columns:1fr 1fr!important}.spec-grid--refined{grid-template-columns:1fr!important}.admin-detail-customerline{display:grid}.admin-file-item--refined>a{grid-template-columns:42px minmax(0,1fr)}.admin-file-item--refined em{grid-column:2}.admin-detail-actions--refined{display:grid}.admin-detail-actions--refined>.button{width:100%}}

/* 1.9.1 order validation and guided-step interaction */
html[data-ui="site"] .field-required {
    display:inline-flex;
    align-items:center;
    min-height:22px;
    margin-inline-start:6px;
    padding:0 7px;
    border-radius:999px;
    background:var(--c-accent-faint);
    color:var(--c-accent-ink);
    font-size:var(--text-xs);
    font-style:normal;
    font-weight:800;
    vertical-align:middle;
}

html[data-ui="site"] .field-error {
    display:block;
    margin-top:6px;
    color:var(--c-danger);
    font-size:var(--text-xs);
    font-weight:750;
    line-height:1.7;
}

html[data-ui="site"] .field-error[hidden] { display:none !important; }

html[data-ui="site"] .field-help {
    display:block;
    margin-top:6px;
    color:var(--c-ink-500);
    font-size:var(--text-xs);
    line-height:1.7;
}

html[data-ui="site"] .field.is-invalid > :where(input,textarea,.ui-combobox .ui-combobox__trigger),
html[data-ui="site"] [data-validation-field="payment"].is-invalid .payment-choice {
    border-color:color-mix(in srgb,var(--c-danger) 72%,var(--c-line));
    box-shadow:0 0 0 3px color-mix(in srgb,var(--c-danger) 11%,transparent);
}

html[data-ui="site"] .field.is-invalid > span { color:var(--c-danger); }

html[data-ui="site"] .field.is-valid > :where(input,textarea) {
    border-color:color-mix(in srgb,var(--c-success) 48%,var(--c-line));
    background:color-mix(in srgb,#fff 97%,var(--c-accent-faint));
}

html[data-ui="site"] .delivery-field-grid { grid-template-columns:1fr 1fr minmax(180px,.72fr); }
html[data-ui="site"] .delivery-address-field { margin-top:var(--space-3); }
html[data-ui="site"] .delivery-address-field textarea { min-height:104px; resize:vertical; }

html[data-ui="site"] .order-requirement-note {
    display:flex;
    align-items:flex-start;
    gap:11px;
    margin-bottom:var(--space-4);
    padding:13px 15px;
    border:1px solid var(--c-accent-border);
    border-radius:15px;
    background:var(--c-accent-faint);
    color:var(--c-accent-ink);
}
html[data-ui="site"] .order-requirement-note > .ui-icon { margin-top:2px; }
html[data-ui="site"] .order-requirement-note b,
html[data-ui="site"] .order-requirement-note span { display:block; }
html[data-ui="site"] .order-requirement-note span { margin-top:2px;color:var(--c-ink-500);font-size:var(--text-xs);line-height:1.8; }
html[data-ui="site"] .order-requirement-note.is-success { border-color:color-mix(in srgb,var(--c-success) 35%,var(--c-line));background:color-mix(in srgb,var(--c-success) 7%,#fff); }

html[data-ui="site"] .order-step-action {
    display:grid;
    gap:10px;
    margin-top:var(--space-5);
    padding-top:var(--space-4);
    border-top:1px solid var(--c-line-soft);
}
html[data-ui="site"] .order-step-action__hint {
    min-height:26px;
    display:flex;
    align-items:center;
    gap:7px;
    margin:0;
    color:var(--c-ink-500);
    font-size:var(--text-xs);
    font-weight:700;
    line-height:1.7;
}
html[data-ui="site"] .order-step-action__hint.is-warning::before,
html[data-ui="site"] .order-step-action__hint:not(.is-ready)::before {
    content:"!";
    width:21px;
    height:21px;
    display:grid;
    place-items:center;
    flex:none;
    border-radius:50%;
    background:color-mix(in srgb,var(--c-warning) 15%,transparent);
    color:color-mix(in srgb,var(--c-warning) 80%,#6f4d00);
    font-weight:900;
}
html[data-ui="site"] .order-step-action__hint.is-ready { color:color-mix(in srgb,var(--c-success) 74%,var(--c-ink-700)); }
html[data-ui="site"] .order-step-action__hint.is-ready::before {
    content:"✓";
    width:21px;
    height:21px;
    display:grid;
    place-items:center;
    flex:none;
    border-radius:50%;
    background:color-mix(in srgb,var(--c-success) 13%,transparent);
    color:var(--c-success);
    font-weight:900;
}
html[data-ui="site"] .order-step-action__hint > .ui-icon { display:none; }

html[data-ui="site"] .button:disabled,
html[data-ui="site"] .button[aria-disabled="true"] {
    cursor:not-allowed;
    opacity:.48;
    filter:saturate(.65);
    transform:none !important;
    box-shadow:none !important;
}

html[data-ui="site"] .order-progress button:disabled {
    cursor:not-allowed;
    color:var(--c-ink-300);
    opacity:.64;
}
html[data-ui="site"] .order-progress button:disabled > span {
    background:var(--c-surface-soft);
    border-color:var(--c-line-soft);
    color:var(--c-ink-300);
    box-shadow:none;
}

html[data-ui="site"] .payment-error { grid-column:1/-1; }

@media(max-width:760px) {
    html[data-ui="site"] .delivery-field-grid { grid-template-columns:1fr; }
    html[data-ui="site"] .order-requirement-note { padding:12px 13px; }
    html[data-ui="site"] .order-step-action { margin-top:var(--space-4); }
}

/* --------------------------------------------------------------------------
   Upload queue — progress, per-file state and secure random storage feedback
   -------------------------------------------------------------------------- */

html[data-ui="site"] .file-result {
    gap: 14px;
}

html[data-ui="site"] .upload-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    align-items: center;
    padding: 15px 16px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-md);
    background: var(--c-surface-soft);
}

html[data-ui="site"] .upload-overview.is-active {
    border-color: var(--c-accent-border);
    background: var(--c-accent-faint);
}

html[data-ui="site"] .upload-overview.is-ready {
    border-color: color-mix(in srgb, var(--c-success) 35%, var(--c-line));
    background: color-mix(in srgb, var(--c-success) 7%, var(--c-surface));
}

html[data-ui="site"] .upload-overview.is-warning,
html[data-ui="site"] .upload-overview.is-error {
    border-color: color-mix(in srgb, var(--c-danger) 28%, var(--c-line));
    background: color-mix(in srgb, var(--c-danger) 5%, var(--c-surface));
}

html[data-ui="site"] .upload-overview__copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

html[data-ui="site"] .upload-overview__copy strong {
    font-size: var(--text-sm);
    font-weight: 850;
}

html[data-ui="site"] .upload-overview__copy span {
    color: var(--c-ink-500);
    font-size: var(--text-xs);
    line-height: 1.7;
}

html[data-ui="site"] .upload-overview__percent {
    min-width: 54px;
    color: var(--c-accent-ink);
    font-size: var(--text-base);
    font-weight: 900;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

html[data-ui="site"] :where(.upload-overview__progress,.file-upload-progress) {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--c-line-soft);
}

html[data-ui="site"] .upload-overview__progress {
    grid-column: 1 / -1;
    height: 7px;
}

html[data-ui="site"] .file-upload-progress {
    height: 5px;
    margin-top: 3px;
}

html[data-ui="site"] :where(.upload-overview__progress,.file-upload-progress)::-webkit-progress-bar {
    border-radius: inherit;
    background: var(--c-line-soft);
}

html[data-ui="site"] :where(.upload-overview__progress,.file-upload-progress)::-webkit-progress-value {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--c-accent), var(--c-accent-hover));
    transition: inline-size .18s ease;
}

html[data-ui="site"] :where(.upload-overview__progress,.file-upload-progress)::-moz-progress-bar {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--c-accent), var(--c-accent-hover));
}

html[data-ui="site"] .file-upload-list {
    display: grid;
    gap: 9px;
}

html[data-ui="site"] .file-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 76px;
    padding: 12px;
    border: 1px solid transparent;
    background: var(--c-surface-soft);
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

html[data-ui="site"] .file-row.is-uploading,
html[data-ui="site"] .file-row.is-processing,
html[data-ui="site"] .file-row.is-queued {
    border-color: var(--c-accent-border);
    background: var(--c-accent-faint);
}

html[data-ui="site"] .file-row.is-ready {
    border-color: color-mix(in srgb, var(--c-success) 25%, var(--c-line));
}

html[data-ui="site"] .file-row.is-failed {
    border-color: color-mix(in srgb, var(--c-danger) 28%, var(--c-line));
    background: color-mix(in srgb, var(--c-danger) 4%, var(--c-surface));
}

html[data-ui="site"] .file-row.is-failed .file-result__icon {
    background: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface));
    color: var(--c-danger);
}

html[data-ui="site"] .file-row.is-uploading .file-result__icon,
html[data-ui="site"] .file-row.is-processing .file-result__icon,
html[data-ui="site"] .file-row.is-queued .file-result__icon {
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
}

html[data-ui="site"] .file-row__body {
    min-width: 0;
    display: grid;
    gap: 5px;
}

html[data-ui="site"] .file-row__title {
    min-width: 0;
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
}

html[data-ui="site"] .file-row__title strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
}

html[data-ui="site"] .file-row__title > span {
    flex: 0 0 auto;
    color: var(--c-ink-400);
    font-size: var(--text-xs);
}

html[data-ui="site"] .file-row__status {
    color: var(--c-ink-500);
    font-size: var(--text-xs);
    line-height: 1.7;
}

html[data-ui="site"] .file-row__status.is-error {
    color: var(--c-danger);
    font-weight: 700;
}

html[data-ui="site"] .file-storage-note {
    color: color-mix(in srgb, var(--c-success) 78%, var(--c-ink-600));
    font-size: var(--text-xs);
}

html[data-ui="site"] .file-row__actions {
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: end;
}

html[data-ui="site"] .file-row__action {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--c-line);
    border-radius: 10px;
    background: var(--c-surface);
    color: var(--c-ink-700);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 750;
    cursor: pointer;
}

html[data-ui="site"] .file-row__action:hover {
    border-color: var(--c-accent-border);
    background: var(--c-accent-faint);
    color: var(--c-accent-ink);
}

html[data-ui="site"] .file-row__action.is-danger:hover {
    border-color: color-mix(in srgb, var(--c-danger) 35%, var(--c-line));
    background: color-mix(in srgb, var(--c-danger) 6%, var(--c-surface));
    color: var(--c-danger);
}

html[data-ui="site"] .dropzone.is-loading {
    border-color: var(--c-accent-border);
    background: var(--c-accent-faint);
}

@media (max-width: 680px) {
    html[data-ui="site"] .upload-overview {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 13px;
    }

    html[data-ui="site"] .file-row {
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: start;
    }

    html[data-ui="site"] .file-row__actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    html[data-ui="site"] .file-row__actions .file-row__action {
        flex: 1 1 auto;
    }

    html[data-ui="site"] .file-row__title {
        display: grid;
        gap: 2px;
    }
}

/* --------------------------------------------------------------------------
   Upload responsiveness — keep transport and fast registration visually distinct
   -------------------------------------------------------------------------- */

html[data-ui="site"] .file-processing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
    margin-top: 2px;
    color: var(--c-accent-ink);
    font-size: var(--text-xs);
    font-weight: 750;
}

html[data-ui="site"] .file-processing-indicator > i {
    inline-size: 14px;
    block-size: 14px;
    flex: 0 0 14px;
    border: 2px solid var(--c-accent-border);
    border-inline-start-color: var(--c-accent);
    border-radius: 50%;
    animation: upload-processing-spin .72s linear infinite;
}

@keyframes upload-processing-spin {
    to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
    html[data-ui="site"] .file-processing-indicator > i { animation-duration: 1.8s; }
}

/* --------------------------------------------------------------------------
   v1.6 — Quote-first commerce flow
   -------------------------------------------------------------------------- */

html[data-ui="site"] :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--c-accent) 34%, transparent);
    outline-offset: 3px;
}

html[data-ui="site"] .hero--quote-first {
    position: relative;
    overflow: clip;
    padding-block: clamp(54px, 7vw, 102px) clamp(48px, 6vw, 82px);
    background:
        radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--c-accent) 13%, transparent), transparent 34%),
        radial-gradient(circle at 83% 14%, color-mix(in srgb, var(--c-accent) 9%, transparent), transparent 30%),
        linear-gradient(180deg, color-mix(in srgb, var(--c-surface) 94%, var(--c-accent-faint)), var(--c-bg));
}

html[data-ui="site"] .hero--quote-first::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .38;
    background-image: linear-gradient(color-mix(in srgb, var(--c-line) 38%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c-line) 30%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

html[data-ui="site"] .hero__grid--quote-first {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
    gap: clamp(36px, 6vw, 78px);
    align-items: center;
}

html[data-ui="site"] .hero__copy--quote-first h1 {
    max-inline-size: 720px;
    font-size: clamp(2.5rem, 5.3vw, 5.15rem);
    line-height: .99;
    letter-spacing: -.045em;
}

html[data-ui="site"] .hero__copy--quote-first p {
    max-inline-size: 650px;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.95;
}

html[data-ui="site"] .hero-price-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-start: 24px;
}

html[data-ui="site"] .hero-price-pills > span {
    display: grid;
    gap: 2px;
    min-inline-size: 170px;
    padding: 12px 15px;
    border: 1px solid var(--c-line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--c-surface) 88%, transparent);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--c-ink) 6%, transparent);
}

html[data-ui="site"] .hero-price-pills small { color: var(--c-muted); font-size: var(--text-xs); }
html[data-ui="site"] .hero-price-pills b { color: var(--c-ink); font-size: var(--text-sm); }

html[data-ui="site"] .home-calculator {
    position: relative;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid color-mix(in srgb, var(--c-accent) 18%, var(--c-line));
    border-radius: 28px;
    background: color-mix(in srgb, var(--c-surface) 94%, transparent);
    box-shadow: 0 30px 80px color-mix(in srgb, var(--c-ink) 13%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent);
    backdrop-filter: blur(18px);
}

html[data-ui="site"] .home-calculator::after {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: -1;
    border-radius: 24px;
    box-shadow: 0 0 70px color-mix(in srgb, var(--c-accent) 10%, transparent);
}

html[data-ui="site"] .home-calculator__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-block-end: 18px;
}

html[data-ui="site"] .home-calculator__head h2 { margin: 4px 0 0; font-size: clamp(1.35rem, 2.4vw, 1.85rem); }

html[data-ui="site"] .live-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--c-accent-faint);
    color: var(--c-accent-ink);
    font-size: var(--text-xs);
    font-weight: 800;
}

html[data-ui="site"] .live-badge i {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-accent) 13%, transparent);
}

html[data-ui="site"] .print-mode-selector {
    min-inline-size: 0;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

html[data-ui="site"] .print-mode-selector > legend {
    inline-size: 100%;
    margin-block-end: 9px;
    color: var(--c-muted);
    font-size: var(--text-xs);
    font-weight: 780;
}

html[data-ui="site"] .print-mode-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

html[data-ui="site"] .print-mode-selector > legend { grid-column: 1 / -1; }
html[data-ui="site"] .print-mode-selector label { position: relative; cursor: pointer; }
html[data-ui="site"] .print-mode-selector input { position: absolute; opacity: 0; pointer-events: none; }
html[data-ui="site"] .print-mode-selector label > span {
    display: grid;
    gap: 3px;
    min-block-size: 72px;
    align-content: center;
    padding: 12px;
    border: 1px solid var(--c-line);
    border-radius: 15px;
    background: var(--c-bg);
    transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

html[data-ui="site"] .print-mode-selector label:hover > span { transform: translateY(-1px); border-color: var(--c-accent-border); }
html[data-ui="site"] .print-mode-selector input:checked + span {
    border-color: color-mix(in srgb, var(--c-accent) 55%, var(--c-line));
    background: var(--c-accent-faint);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 10%, transparent), 0 8px 22px color-mix(in srgb, var(--c-accent) 8%, transparent);
}
html[data-ui="site"] .print-mode-selector label b { font-size: var(--text-sm); }
html[data-ui="site"] .print-mode-selector label small { color: var(--c-muted); font-size: .7rem; line-height: 1.45; }

html[data-ui="site"] .home-calculator__fields { gap: 11px; }
html[data-ui="site"] .home-calculator__fields .field { gap: 6px; }
html[data-ui="site"] .home-calculator__fields :is(input, select) { min-block-size: 45px; }
html[data-ui="site"] .home-color-pages[hidden] { display: none !important; }

html[data-ui="site"] .home-quote-result {
    margin-block: 18px 14px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--c-accent) 24%, var(--c-line));
    border-radius: 18px;
    background: linear-gradient(135deg, var(--c-accent-faint), color-mix(in srgb, var(--c-surface) 92%, var(--c-accent-faint)));
}

html[data-ui="site"] .home-quote-result__meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding-block-end: 12px;
    border-block-end: 1px solid color-mix(in srgb, var(--c-line) 72%, transparent);
}

html[data-ui="site"] .home-quote-result__meta span { display: grid; gap: 2px; }
html[data-ui="site"] .home-quote-result__meta small { color: var(--c-muted); font-size: .68rem; }
html[data-ui="site"] .home-quote-result__meta b { font-size: .83rem; }
html[data-ui="site"] .home-quote-result__total { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding-block-start: 13px; }
html[data-ui="site"] .home-quote-result__total > span { display: grid; font-weight: 800; }
html[data-ui="site"] .home-quote-result__total > span small { color: var(--c-muted); font-weight: 500; }
html[data-ui="site"] .home-quote-result__total strong { color: var(--c-accent-ink); font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1; }
html[data-ui="site"] .home-quote-result__total strong small { font-size: .72rem; }
html[data-ui="site"] .home-quote-result > p { margin: 10px 0 0; color: var(--c-muted); font-size: .72rem; }
html[data-ui="site"] .home-calculator.is-calculating .home-quote-result__total strong { opacity: .55; }
html[data-ui="site"] .home-calculator__cta { margin-block-start: 6px; }
html[data-ui="site"] .home-calculator__fineprint { display: block; margin-block-start: 10px; color: var(--c-muted); text-align: center; line-height: 1.6; }

html[data-ui="site"] .order-page--quote-first { padding-block-start: clamp(26px, 5vw, 56px); }
html[data-ui="site"] .order-head--quote-first { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 20px; }
html[data-ui="site"] .order-head__badge { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid var(--c-line); border-radius: 15px; background: var(--c-surface); }
html[data-ui="site"] .order-head__badge > span { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 11px; background: var(--c-accent-faint); color: var(--c-accent-ink); font-weight: 900; }
html[data-ui="site"] .order-head__badge div { display: grid; gap: 1px; }
html[data-ui="site"] .order-head__badge small { color: var(--c-muted); font-size: .68rem; }

html[data-ui="site"] .order-card--calculator { overflow: visible; }
html[data-ui="site"] .order-print-fields { margin-block-start: 18px; }
html[data-ui="site"] .recommendation-card--pricing { margin-block: 18px 12px; }
html[data-ui="site"] .quote-confidence,
html[data-ui="site"] .upload-price-context,
html[data-ui="site"] .file-verified-banner {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-block-start: 16px;
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--c-accent) 20%, var(--c-line));
    border-radius: 15px;
    background: color-mix(in srgb, var(--c-accent-faint) 58%, var(--c-surface));
}
html[data-ui="site"] .quote-confidence__icon,
html[data-ui="site"] .file-verified-banner > span { display: grid; place-items: center; flex: 0 0 30px; inline-size: 30px; block-size: 30px; border-radius: 10px; background: var(--c-accent); color: var(--c-on-accent, #fff); font-weight: 900; }
html[data-ui="site"] .quote-confidence > div,
html[data-ui="site"] .file-verified-banner > div,
html[data-ui="site"] .upload-price-context > div { display: grid; gap: 3px; }
html[data-ui="site"] .quote-confidence small,
html[data-ui="site"] .file-verified-banner small,
html[data-ui="site"] .upload-price-context small { color: var(--c-muted); line-height: 1.6; }
html[data-ui="site"] .upload-price-context { align-items: center; justify-content: space-between; margin: 0 0 15px; }
html[data-ui="site"] .upload-price-context > span { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent, #fff); font-size: .68rem; font-weight: 800; }
html[data-ui="site"] .file-verified-banner[hidden] { display: none !important; }

html[data-ui="site"] .quote-card--live { border-color: color-mix(in srgb, var(--c-accent) 18%, var(--c-line)); box-shadow: 0 18px 55px color-mix(in srgb, var(--c-ink) 9%, transparent); }
html[data-ui="site"] .quote-live-state { display: flex; align-items: center; gap: 8px; margin: 4px 0 15px; padding: 8px 10px; border-radius: 10px; background: var(--c-bg); color: var(--c-muted); font-size: .7rem; }
html[data-ui="site"] .quote-live-state i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--c-accent); }
html[data-ui="site"] .quote-live-state.is-loading i { inline-size: 12px; block-size: 12px; border: 2px solid var(--c-accent-border); border-inline-start-color: var(--c-accent); background: transparent; animation: quote-spin .65s linear infinite; }
@keyframes quote-spin { to { transform: rotate(1turn); } }
html[data-ui="site"] .quote-breakdown { display: grid; gap: 7px; margin-block: 12px; padding: 11px; border-radius: 12px; background: var(--c-bg); }
html[data-ui="site"] .quote-breakdown > span,
html[data-ui="site"] .quote-discount { display: flex; justify-content: space-between; gap: 12px; font-size: .75rem; }
html[data-ui="site"] .quote-breakdown small { color: var(--c-muted); }
html[data-ui="site"] .quote-discount { margin-block-start: 7px; color: var(--c-accent-ink); font-weight: 800; }
html[data-ui="site"] .quote-discount[hidden] { display: none !important; }

html[data-ui="site"] .dropzone.is-dragging { border-color: var(--c-accent); background: var(--c-accent-faint); transform: translateY(-2px); }
html[data-ui="site"] .file-row.is-error { border-color: color-mix(in srgb, var(--c-danger) 28%, var(--c-line)); }
html[data-ui="site"] .file-row__progress { overflow: hidden; block-size: 5px; margin-block-start: 7px; border-radius: 999px; background: var(--c-line); }
html[data-ui="site"] .file-row__progress i { display: block; block-size: 100%; border-radius: inherit; background: var(--c-accent); transition: inline-size .18s linear; }

@media (max-width: 980px) {
    html[data-ui="site"] .hero__grid--quote-first { grid-template-columns: 1fr; }
    html[data-ui="site"] .hero__copy--quote-first { max-inline-size: 760px; }
    html[data-ui="site"] .home-calculator { max-inline-size: 760px; inline-size: 100%; margin-inline: auto; }
    html[data-ui="site"] .order-head--quote-first { grid-template-columns: auto minmax(0,1fr); }
    html[data-ui="site"] .order-head__badge { grid-column: 2; justify-self: start; }
}

@media (max-width: 680px) {
    html[data-ui="site"] .hero--quote-first { padding-block-start: 34px; }
    html[data-ui="site"] .hero__grid--quote-first { gap: 27px; }
    html[data-ui="site"] .hero__copy--quote-first h1 { font-size: clamp(2.25rem, 12vw, 3.55rem); }
    html[data-ui="site"] .home-calculator { padding: 16px; border-radius: 21px; }
    html[data-ui="site"] .print-mode-selector { grid-template-columns: 1fr; }
    html[data-ui="site"] .print-mode-selector label > span { min-block-size: 58px; }
    html[data-ui="site"] .home-quote-result__meta { grid-template-columns: 1fr 1fr; }
    html[data-ui="site"] .home-quote-result__meta span:first-child { grid-column: 1 / -1; }
    html[data-ui="site"] .home-quote-result__total { align-items: flex-start; flex-direction: column; }
    html[data-ui="site"] .order-head--quote-first { grid-template-columns: 1fr; }
    html[data-ui="site"] .order-head--quote-first .back-link { justify-self: start; }
    html[data-ui="site"] .order-head__badge { grid-column: auto; }
    html[data-ui="site"] .upload-price-context { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-ui="site"] .print-mode-selector label > span,
    html[data-ui="site"] .dropzone,
    html[data-ui="site"] .file-row__progress i { transition: none; }
    html[data-ui="site"] .quote-live-state.is-loading i { animation-duration: 1.8s; }
}

html[data-ui="site"] .auth-card--otp { position: relative; overflow: hidden; }
html[data-ui="site"] .auth-card--otp::before { content:""; position:absolute; inset-inline:0; inset-block-start:0; block-size:4px; background:linear-gradient(90deg,var(--c-accent),var(--c-accent-soft)); }
html[data-ui="site"] .otp-destination { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-block:8px 18px; padding:10px 12px; border-radius:12px; background:var(--c-bg); color:var(--c-muted); font-size:var(--text-xs); }
html[data-ui="site"] .otp-destination b { color:var(--c-ink); }
html[data-ui="site"] .otp-destination a { margin-inline-start:auto; color:var(--c-accent-ink); font-weight:800; }
html[data-ui="site"] .otp-expiry { display:flex; justify-content:space-between; gap:12px; margin:-4px 0 14px; color:var(--c-muted); font-size:var(--text-xs); }
html[data-ui="site"] .otp-expiry b { color:var(--c-accent-ink); font-variant-numeric:tabular-nums; }
html[data-ui="site"] .otp-resend-form { display:grid; gap:5px; justify-items:center; margin-block-start:12px; }
html[data-ui="site"] .otp-resend-form .auth-reset { border:0; background:transparent; color:var(--c-accent-ink); font:inherit; font-weight:800; cursor:pointer; }
html[data-ui="site"] .otp-resend-form .auth-reset:disabled { color:var(--c-muted); cursor:not-allowed; opacity:.7; }
html[data-ui="site"] .otp-resend-form small,
html[data-ui="site"] .auth-field-help { color:var(--c-muted); font-size:var(--text-xs); line-height:1.6; }

/* v1.8 — calmer homepage, text promo cards, social contact surfaces and unified about/contact page */
html[data-ui="site"] .nav a[aria-current="page"] {
    color: var(--c-accent-ink);
    font-weight: 850;
}
html[data-ui="site"] .nav a[aria-current="page"]::after {
    content: "";
    display: block;
    inline-size: 16px;
    block-size: 2px;
    margin: 5px auto 0;
    border-radius: 999px;
    background: var(--c-accent);
}

html[data-ui="site"] .hero--copy-home {
    min-block-size: 0;
    padding-block: clamp(34px, 5vw, 62px) 64px;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--c-accent) 8%, transparent), transparent 48%),
        linear-gradient(180deg, var(--c-surface) 0%, color-mix(in srgb, var(--c-bg) 94%, var(--c-surface)) 100%);
}
html[data-ui="site"] .hero__grid--copy-home {
    grid-template-columns: minmax(0, 980px);
    justify-content: center;
    justify-items: center;
    gap: 26px;
    inline-size: 100%;
}
html[data-ui="site"] .hero__copy--center {
    inline-size: min(760px, 100%);
    max-inline-size: 760px;
    margin-inline: auto;
    justify-self: center;
    text-align: center;
}
html[data-ui="site"] .hero__copy--center > .kicker {
    display: inline-flex;
    justify-content: center;
    margin: 0 auto 12px;
}
html[data-ui="site"] .hero__copy--center h1 {
    max-inline-size: 760px;
    margin-inline: auto;
    font-size: clamp(2.25rem, 3.6vw, 3.8rem);
    line-height: 1.12;
    letter-spacing: -.035em;
    text-align: center;
}
html[data-ui="site"] .hero__copy--center > p {
    max-inline-size: 690px;
    margin: 16px auto 0;
    font-size: clamp(.96rem, 1.25vw, 1.08rem);
    line-height: 1.9;
    text-align: center;
}
html[data-ui="site"] .hero__copy--center .hero__trust {
    justify-content: center;
    margin-block-start: 20px;
    text-align: center;
}
html[data-ui="site"] .hero__copy--center .hero-price-pills {
    justify-content: center;
    margin-block-start: 16px;
}
html[data-ui="site"] .home-calculator {
    inline-size: min(760px, 100%);
    margin-inline: auto;
    justify-self: center;
    padding: clamp(18px, 2.5vw, 24px);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(8, 34, 36, .07);
}
html[data-ui="site"] .home-calculator__head--simple {
    display: grid;
    justify-items: center;
    gap: 3px;
    text-align: center;
}
html[data-ui="site"] .home-calculator__head--simple .kicker {
    justify-self: center;
}
html[data-ui="site"] .home-calculator__head--simple h2 {
    text-align: center;
}

html[data-ui="site"] .home-promo-rail {
    inline-size: min(1120px, calc(100vw - 40px));
    max-inline-size: none;
    justify-self: center;
    overflow: hidden;
    padding-block: 4px 8px;
    direction: ltr;
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
html[data-ui="site"] .home-promo-rail__track {
    display: flex;
    inline-size: max-content;
    gap: 14px;
    direction: ltr;
    will-change: transform;
    animation: home-promo-scroll 18s linear infinite;
}
html[data-ui="site"] .home-promo-rail:hover .home-promo-rail__track,
html[data-ui="site"] .home-promo-rail:focus-within .home-promo-rail__track {
    animation-play-state: paused;
}
html[data-ui="site"] .home-promo-card {
    flex: 0 0 clamp(250px, 24vw, 310px);
    min-block-size: 142px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--c-line);
    border-radius: 20px;
    background: color-mix(in srgb, var(--c-surface) 96%, var(--c-accent-faint));
    box-shadow: var(--shadow-xs);
    direction: rtl;
    text-align: right;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
html[data-ui="site"] .home-promo-card:hover {
    transform: translateY(-2px);
    border-color: var(--c-accent-border);
    box-shadow: var(--shadow-sm);
}
html[data-ui="site"] .home-promo-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
html[data-ui="site"] .home-promo-card__top small {
    color: var(--c-muted);
    font-size: var(--text-xs);
}
html[data-ui="site"] .home-promo-card__icon {
    inline-size: 40px;
    block-size: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--c-accent-faint);
    color: var(--c-accent-ink);
}
html[data-ui="site"] .home-promo-card > strong {
    margin-block-start: 4px;
    font-size: var(--text-md);
}
html[data-ui="site"] .home-promo-card > p {
    color: var(--c-ink-500);
    font-size: var(--text-xs);
    line-height: 1.85;
}
@keyframes home-promo-scroll {
    from { transform: translateX(0); }
    to { transform: translate3d(calc(-50% - 7px), 0, 0); }
}

html[data-ui="site"] .home-contact-section {
    background: color-mix(in srgb, var(--c-bg) 72%, var(--c-surface));
    border-block: 1px solid var(--c-line-soft);
}
html[data-ui="site"] .social-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
html[data-ui="site"] .social-contact-card {
    min-block-size: 188px;
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 22px;
    border: 1px solid var(--c-line);
    border-radius: 22px;
    background: var(--c-surface);
    color: var(--c-ink-900);
    box-shadow: var(--shadow-xs);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
html[data-ui="site"] a.social-contact-card:hover {
    transform: translateY(-3px);
    border-color: var(--c-accent-border);
    box-shadow: var(--shadow-sm);
}
html[data-ui="site"] .social-contact-card__icon {
    inline-size: 46px;
    block-size: 46px;
    display: grid;
    place-items: center;
    margin-block-end: 7px;
    border-radius: 14px;
    background: var(--c-accent-faint);
    color: var(--c-accent-ink);
}
html[data-ui="site"] .social-contact-card__eyebrow {
    color: var(--c-muted);
    font-size: var(--text-xs);
}
html[data-ui="site"] .social-contact-card > strong {
    font-size: var(--text-lg);
}
html[data-ui="site"] .social-contact-card > small {
    color: var(--c-ink-500);
    line-height: 1.75;
}
html[data-ui="site"] .social-contact-card > em {
    margin-block-start: auto;
    padding-block-start: 10px;
    color: var(--c-accent-ink);
    font-size: var(--text-xs);
    font-style: normal;
    font-weight: 800;
}
html[data-ui="site"] .social-contact-card.is-disabled {
    background: color-mix(in srgb, var(--c-surface) 88%, var(--c-bg));
    opacity: .68;
}
html[data-ui="site"] .social-contact-card.is-disabled > em {
    color: var(--c-muted);
}
html[data-ui="site"] .home-contact-section__action {
    display: flex;
    justify-content: center;
    margin-block-start: 24px;
}

html[data-ui="site"] .about-contact-page {
    min-block-size: calc(100svh - 78px);
    padding-block: 42px 82px;
    background: var(--c-surface-soft);
}
html[data-ui="site"] .about-contact-shell {
    max-inline-size: 1120px;
}
html[data-ui="site"] .about-contact-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-block-end: 22px;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid var(--c-line);
    border-radius: 28px;
    background: var(--c-surface);
    box-shadow: var(--shadow-xs);
}
html[data-ui="site"] .about-contact-hero > div {
    max-inline-size: 740px;
}
html[data-ui="site"] .about-contact-hero h1 {
    margin-block: 8px 12px;
    font-size: clamp(2.1rem, 4.2vw, 3.4rem);
    line-height: 1.2;
    letter-spacing: -.035em;
}
html[data-ui="site"] .about-contact-hero p {
    color: var(--c-ink-500);
    line-height: 1.9;
}
html[data-ui="site"] .about-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(310px, .8fr);
    gap: 18px;
    align-items: stretch;
}
html[data-ui="site"] .about-story-card,
html[data-ui="site"] .contact-info-card {
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid var(--c-line);
    border-radius: 24px;
    background: var(--c-surface);
    box-shadow: var(--shadow-xs);
}
html[data-ui="site"] .about-story-card__icon {
    inline-size: 52px;
    block-size: 52px;
    display: grid;
    place-items: center;
    margin-block-end: 18px;
    border-radius: 16px;
    background: var(--c-accent-faint);
    color: var(--c-accent-ink);
}
html[data-ui="site"] .about-story-card h2,
html[data-ui="site"] .contact-info-card h2 {
    margin-block: 6px 14px;
    font-size: clamp(1.6rem, 2.5vw, 2.15rem);
}
html[data-ui="site"] .about-story-card__body {
    display: grid;
    gap: 10px;
    color: var(--c-ink-600);
    line-height: 2;
}
html[data-ui="site"] .about-story-card__points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: 24px;
}
html[data-ui="site"] .about-story-card__points span {
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--c-accent-faint);
    color: var(--c-accent-ink);
    font-size: var(--text-xs);
    font-weight: 750;
}
html[data-ui="site"] .contact-info-list {
    display: grid;
    gap: 0;
    margin-block-start: 16px;
}
html[data-ui="site"] .contact-info-list > div {
    display: grid;
    grid-template-columns: minmax(110px, auto) 1fr;
    gap: 16px;
    padding-block: 14px;
    border-block-end: 1px solid var(--c-line-soft);
}
html[data-ui="site"] .contact-info-list dt {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--c-muted);
}
html[data-ui="site"] .contact-info-list dd {
    margin: 0;
    text-align: left;
    color: var(--c-ink-800);
    line-height: 1.75;
}
html[data-ui="site"] .contact-info-card__actions {
    display: grid;
    gap: 9px;
    margin-block-start: 22px;
}
html[data-ui="site"] .about-social-section {
    padding-block-start: 68px;
}

html[data-ui="site"] .order-head--quote-first h1 {
    max-inline-size: 760px;
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.24;
}
html[data-ui="site"] .order-head--quote-first p {
    max-inline-size: 830px;
    line-height: 1.85;
}
html[data-ui="site"] .order-head__badge {
    min-inline-size: 132px;
    box-shadow: var(--shadow-xs);
}
html[data-ui="site"] .order-progress {
    box-shadow: var(--shadow-xs);
}

@media (max-width: 900px) {
    html[data-ui="site"] .social-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[data-ui="site"] .about-contact-grid { grid-template-columns: 1fr; }
    html[data-ui="site"] .about-contact-hero { align-items: start; flex-direction: column; }
}
@media (max-width: 680px) {
    html[data-ui="site"] .nav a[aria-current="page"]::after { display: none; }
    html[data-ui="site"] .hero--copy-home { padding-block-start: 26px; }
    html[data-ui="site"] .hero__grid--copy-home { padding-block-start: 0; gap: 20px; }
    html[data-ui="site"] .hero__copy--center h1 { font-size: clamp(2rem, 10.5vw, 2.85rem); }
    html[data-ui="site"] .hero__copy--center > p { font-size: .94rem; }
    html[data-ui="site"] .home-promo-rail {
        inline-size: calc(100vw - 24px);
        overflow-x: auto;
        padding-block-end: 8px;
        mask-image: none;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
    }
    html[data-ui="site"] .home-promo-rail::-webkit-scrollbar { display: none; }
    html[data-ui="site"] .home-promo-rail__track { animation: none; padding-inline: 2px; }
    html[data-ui="site"] .home-promo-card { flex-basis: min(82vw, 280px); min-block-size: 138px; scroll-snap-align: center; }
    html[data-ui="site"] .social-card-grid { grid-template-columns: 1fr; }
    html[data-ui="site"] .social-contact-card { min-block-size: 154px; }
    html[data-ui="site"] .about-contact-page { padding-block: 24px 66px; }
    html[data-ui="site"] .about-contact-hero { padding: 22px; border-radius: 22px; }
    html[data-ui="site"] .about-contact-hero h1 { font-size: 2rem; }
    html[data-ui="site"] .about-story-card, html[data-ui="site"] .contact-info-card { border-radius: 20px; }
    html[data-ui="site"] .contact-info-list > div { grid-template-columns: 1fr; gap: 6px; }
    html[data-ui="site"] .contact-info-list dd { text-align: right; }
    html[data-ui="site"] .about-social-section { padding-block-start: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-ui="site"] .home-promo-rail__track { animation: none; }
}

/* v1.8 content-page refinement */
html[data-ui="site"] .content-page__shell {
    max-inline-size: 980px;
}
html[data-ui="site"] .content-page__hero {
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--c-line);
    border-radius: 26px;
    background: var(--c-surface);
    box-shadow: var(--shadow-xs);
}
html[data-ui="site"] .content-page__hero h1 {
    max-inline-size: 760px;
    margin-block: 8px 10px;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.25;
    letter-spacing: -.03em;
}
html[data-ui="site"] .content-page__hero .content-lead {
    max-inline-size: 760px;
    margin: 0;
    color: var(--c-ink-500);
    font-size: clamp(.98rem, 1.5vw, 1.08rem);
}
html[data-ui="site"] .content-page .content-body {
    margin-block-start: 16px;
    border-radius: 22px;
    box-shadow: var(--shadow-xs);
}
html[data-ui="site"] .content-page .content-cta {
    margin-block-start: 16px;
    border-radius: 20px;
}
html[data-ui="site"] .content-page .content-cta > div {
    display: grid;
    gap: 4px;
}
html[data-ui="site"] .content-page .content-cta > div > span {
    opacity: .82;
    font-size: var(--text-sm);
}
@media (max-width: 680px) {
    html[data-ui="site"] .content-page__hero { padding: 22px; border-radius: 21px; }
    html[data-ui="site"] .content-page__hero h1 { font-size: 2rem; }
}

/* v1.9 shared-host upload, homepage advertising, finishing services */
html[data-ui="site"] .topbar[data-header-background] {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
html[data-ui="site"] .topbar[data-header-background] .topbar__inner {
    min-block-size: 78px;
}

html[data-ui="site"] .site-notice-strip {
    position: relative;
    z-index: 18;
    border-block-end: 1px solid color-mix(in srgb, var(--c-accent) 13%, var(--c-line));
    background: color-mix(in srgb, var(--c-accent) 4%, #fff);
    overflow: hidden;
}
html[data-ui="site"] .site-notice-strip__inner {
    min-block-size: 38px;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}
html[data-ui="site"] .site-notice-strip__clock {
    position: relative;
    z-index: 2;
    white-space: nowrap;
    color: var(--c-ink-700);
    font-size: .78rem;
    font-weight: 800;
    padding-inline-end: 18px;
    border-inline-end: 1px solid color-mix(in srgb, var(--c-accent) 18%, var(--c-line));
}
html[data-ui="site"] .site-notice-strip__rail {
    min-inline-size: 0;
    overflow: hidden;
    direction: ltr;
    mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
html[data-ui="site"] .site-notice-strip__track {
    inline-size: max-content;
    display: flex;
    align-items: center;
    gap: 54px;
    animation: site-notice-marquee 18s linear infinite;
    will-change: transform;
}
html[data-ui="site"] .site-notice-strip__track > span {
    direction: rtl;
    white-space: nowrap;
    color: var(--c-ink-600);
    font-size: .8rem;
    font-weight: 700;
}
html[data-ui="site"] .site-notice-strip:hover .site-notice-strip__track,
html[data-ui="site"] .site-notice-strip:focus-within .site-notice-strip__track { animation-play-state: paused; }
@keyframes site-notice-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

html[data-ui="site"] .hero--copy-home {
    padding-block: clamp(46px, 6vw, 88px) 46px;
}
html[data-ui="site"] .home-hero-stage {
    inline-size: min(100%, 1500px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(200px, 250px) minmax(0, 760px) minmax(200px, 250px);
    grid-template-areas:
        "left hero right"
        "rail rail rail"
        ". calculator .";
    justify-content: center;
    align-items: start;
    gap: 28px 34px;
}
html[data-ui="site"] .home-hero-primary {
    grid-area: hero;
    min-inline-size: 0;
    display: flex;
    justify-content: center;
    text-align: center;
}
html[data-ui="site"] .home-hero-primary .hero__copy {
    inline-size: 100%;
    max-inline-size: 760px;
    margin-inline: auto;
    text-align: center !important;
    align-items: center !important;
}
html[data-ui="site"] .home-hero-primary .hero__copy h1 {
    max-inline-size: 720px;
    margin-inline: auto;
    font-size: clamp(2.65rem, 4.45vw, 4.25rem);
    line-height: 1.16;
    letter-spacing: -.045em;
    text-wrap: balance;
}
html[data-ui="site"] .home-hero-primary .hero__copy > p {
    max-inline-size: 650px;
    margin-inline: auto;
    text-align: center;
}
html[data-ui="site"] .home-hero-primary .hero__trust {
    justify-content: center;
}
html[data-ui="site"] .home-side-ad-slot--left { grid-area: left; }
html[data-ui="site"] .home-side-ad-slot--right { grid-area: right; }
html[data-ui="site"] .home-side-ad-slot {
    align-self: stretch;
    min-block-size: 310px;
}
html[data-ui="site"] .home-side-ad {
    position: sticky;
    top: 104px;
    min-block-size: 310px;
    block-size: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 9px;
    padding: 24px;
    border: 1px solid color-mix(in srgb, var(--c-accent) 14%, var(--c-line));
    border-radius: 26px;
    background:
        radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--c-accent) 12%, transparent), transparent 38%),
        linear-gradient(155deg, #fff, color-mix(in srgb, var(--c-accent) 3%, #fff));
    box-shadow: var(--shadow-xs);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
html[data-ui="site"] a.home-side-ad:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--c-accent) 38%, var(--c-line));
    box-shadow: var(--shadow-sm);
}
html[data-ui="site"] .home-side-ad.is-placeholder { opacity: .72; }
html[data-ui="site"] .home-side-ad__icon {
    inline-size: 48px;
    block-size: 48px;
    display: grid;
    place-items: center;
    margin-block-end: auto;
    border-radius: 16px;
    background: color-mix(in srgb, var(--c-accent) 9%, #fff);
    color: var(--c-accent);
}
html[data-ui="site"] .home-side-ad small { color: var(--c-accent); font-weight: 800; }
html[data-ui="site"] .home-side-ad strong { font-size: 1.18rem; line-height: 1.45; color: var(--c-ink); }
html[data-ui="site"] .home-side-ad p { margin: 0; color: var(--c-muted); line-height: 1.8; font-size: .88rem; }
html[data-ui="site"] .home-side-ad em { margin-block-start: 8px; color: var(--c-accent); font-style: normal; font-weight: 800; }

html[data-ui="site"] .hero-price-pills {
    justify-content: center;
}
html[data-ui="site"] .hero-price-pills > a {
    position: relative;
    min-inline-size: 156px;
    display: grid;
    gap: 5px;
    padding: 13px 17px;
    border: 1px solid var(--c-line);
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(11, 31, 34, .02);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
html[data-ui="site"] .hero-price-pills > a:hover,
html[data-ui="site"] .hero-price-pills > a:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--c-accent) 42%, var(--c-line));
    box-shadow: var(--shadow-xs);
}
html[data-ui="site"] .hero-price-pills > a > span {
    position: absolute;
    inset-inline-end: 10px;
    inset-block-start: 10px;
    color: var(--c-accent);
    opacity: 0;
    transform: translateX(4px);
    transition: opacity .18s ease, transform .18s ease;
}
html[data-ui="site"] .hero-price-pills > a:hover > span,
html[data-ui="site"] .hero-price-pills > a:focus-visible > span { opacity: 1; transform: translateX(0); }

html[data-ui="site"] .home-promo-rail {
    grid-area: rail;
    inline-size: 100%;
    margin-block-start: 2px;
}
html[data-ui="site"] .home-promo-rail__track { animation-duration: 14s; }
html[data-ui="site"] .home-calculator {
    grid-area: calculator;
    inline-size: min(100%, 700px);
    margin-inline: auto;
}

html[data-ui="site"] .footer-socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-block-start: 18px;
}
html[data-ui="site"] .footer-socials a {
    inline-size: 39px;
    block-size: 39px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 13px;
    background: rgba(255,255,255,.075);
    color: #fff;
    transition: transform .18s ease, background .18s ease;
}
html[data-ui="site"] .footer-socials a:hover { transform: translateY(-2px); background: rgba(255,255,255,.14); }

html[data-ui="site"] .finishing-section {
    margin-block: 22px;
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--c-accent) 13%, var(--c-line));
    border-radius: 22px;
    background: color-mix(in srgb, var(--c-accent) 2.2%, #fff);
}
html[data-ui="site"] .finishing-section__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-block-end: 17px;
}
html[data-ui="site"] .finishing-section__head h3 { margin: 4px 0 0; font-size: 1.3rem; }
html[data-ui="site"] .finishing-section__head > small { max-inline-size: 350px; color: var(--c-muted); line-height: 1.7; }
html[data-ui="site"] .finishing-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    margin: 0;
    border: 0;
}
html[data-ui="site"] .finishing-service-grid label,
html[data-ui="site"] .segmented-choice label { cursor: pointer; }
html[data-ui="site"] .finishing-service-grid input,
html[data-ui="site"] .segmented-choice input { position: absolute; opacity: 0; pointer-events: none; }
html[data-ui="site"] .finishing-service-grid label > span {
    min-block-size: 104px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    padding: 15px;
    border: 1px solid var(--c-line);
    border-radius: 17px;
    background: #fff;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
html[data-ui="site"] .finishing-service-grid label:hover > span { transform: translateY(-1px); }
html[data-ui="site"] .finishing-service-grid input:checked + span {
    border-color: color-mix(in srgb, var(--c-accent) 58%, var(--c-line));
    background: color-mix(in srgb, var(--c-accent) 5%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 12%, transparent);
}
html[data-ui="site"] .finishing-service-grid svg { color: var(--c-accent); }
html[data-ui="site"] .finishing-service-grid small { color: var(--c-muted); font-size: .75rem; }
html[data-ui="site"] .finishing-options {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding-block-start: 16px;
}
html[data-ui="site"] .finishing-options[hidden] { display: none !important; }
html[data-ui="site"] .finishing-options__label { font-weight: 800; color: var(--c-ink-700); }
html[data-ui="site"] .segmented-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
html[data-ui="site"] .segmented-choice--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-ui="site"] .segmented-choice label > span {
    display: grid;
    place-items: center;
    min-block-size: 46px;
    padding: 10px 14px;
    border: 1px solid var(--c-line);
    border-radius: 13px;
    background: #fff;
    font-weight: 750;
}
html[data-ui="site"] .segmented-choice input:checked + span {
    border-color: color-mix(in srgb, var(--c-accent) 58%, var(--c-line));
    background: color-mix(in srgb, var(--c-accent) 7%, #fff);
    color: var(--c-accent-strong, var(--c-accent));
}
html[data-ui="site"] .important-note-field {
    margin-block-start: 18px;
    padding: 18px;
    border-radius: 18px;
    background: #fffaf2;
    border: 1px solid #efe0c5;
}
html[data-ui="site"] .important-note-field > span { color: #795f35; }
html[data-ui="site"] .important-note-field textarea { min-block-size: 112px; background: #fff; }
html[data-ui="site"] .quote-breakdown { grid-template-columns: repeat(4, minmax(0, 1fr)); }

html[data-ui="admin"] .home-ad-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-block-start: 14px;
}
html[data-ui="admin"] .home-ad-admin-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--c-line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--c-accent) 2%, #fff);
}
html[data-ui="admin"] .settings-background-state > div { min-block-size: 44px; display: flex; align-items: center; }
html[data-ui="admin"] .scanner-status {
    display: grid;
    gap: 4px;
    margin-block-start: 14px;
    padding: 14px 16px;
    border-radius: 15px;
    border: 1px solid var(--c-line);
}
html[data-ui="admin"] .scanner-status.is-ready { background: #f1faf6; border-color: #cce8da; }
html[data-ui="admin"] .scanner-status.is-fallback { background: #fff8eb; border-color: #eeddbb; }
html[data-ui="admin"] .scanner-status span { color: var(--c-muted); line-height: 1.7; }

@media (max-width: 1180px) {
    html[data-ui="site"] .home-hero-stage {
        grid-template-columns: minmax(170px, 210px) minmax(0, 700px) minmax(170px, 210px);
        gap-inline: 20px;
    }
    html[data-ui="site"] .home-side-ad { padding: 19px; }
}
@media (max-width: 980px) {
    html[data-ui="site"] .site-notice-strip__inner { grid-template-columns: 1fr; gap: 0; padding-block: 7px; }
    html[data-ui="site"] .site-notice-strip__clock { justify-self: center; padding-inline-end: 0; border-inline-end: 0; margin-block-end: 5px; }
    html[data-ui="site"] .home-hero-stage {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "hero hero"
            "rail rail"
            "calculator calculator"
            "right left";
        gap: 20px;
    }
    html[data-ui="site"] .home-side-ad-slot { min-block-size: auto; }
    html[data-ui="site"] .home-side-ad { position: relative; top: auto; min-block-size: 185px; }
    html[data-ui="site"] .finishing-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[data-ui="admin"] .home-ad-admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    html[data-ui="site"] .site-notice-strip__clock { font-size: .72rem; }
    html[data-ui="site"] .site-notice-strip__track { animation-duration: 14s; gap: 36px; }
    html[data-ui="site"] .hero--copy-home { padding-block-start: 32px; }
    html[data-ui="site"] .home-hero-stage {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "hero"
            "rail"
            "calculator"
            "right"
            "left";
    }
    html[data-ui="site"] .home-hero-primary .hero__copy h1 { font-size: clamp(2.05rem, 10vw, 2.85rem); }
    html[data-ui="site"] .home-side-ad { min-block-size: 158px; border-radius: 20px; }
    html[data-ui="site"] .hero-price-pills { inline-size: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[data-ui="site"] .hero-price-pills > a { min-inline-size: 0; }
    html[data-ui="site"] .finishing-section { padding: 16px; border-radius: 18px; }
    html[data-ui="site"] .finishing-section__head { align-items: start; flex-direction: column; gap: 7px; }
    html[data-ui="site"] .finishing-service-grid { grid-template-columns: 1fr 1fr; }
    html[data-ui="site"] .finishing-service-grid label > span { min-block-size: 92px; padding: 12px; }
    html[data-ui="site"] .finishing-options { grid-template-columns: 1fr; gap: 8px; }
    html[data-ui="site"] .segmented-choice--three { grid-template-columns: 1fr 1fr 1fr; }
    html[data-ui="site"] .quote-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    html[data-ui="site"] .site-notice-strip__track { animation: none; }
}

/* Platform accents stay subtle so the contact UI remains part of the same design system. */
html[data-ui="site"] .social-contact-card--whatsapp .social-contact-card__icon,
html[data-ui="site"] .footer-social--whatsapp { background: #e9f9ef; color: #138c4c; border-color: #ccebd8; }
html[data-ui="site"] .social-contact-card--telegram .social-contact-card__icon,
html[data-ui="site"] .footer-social--telegram { background: #eaf6fd; color: #2487b9; border-color: #cfe8f6; }
html[data-ui="site"] .social-contact-card--twitter .social-contact-card__icon,
html[data-ui="site"] .footer-social--twitter { background: #f2f3f4; color: #202326; border-color: #dedfe1; }
html[data-ui="site"] .social-contact-card--bale .social-contact-card__icon,
html[data-ui="site"] .footer-social--bale { background: #edf7f4; color: #147d70; border-color: #d1e9e4; }
html[data-ui="site"] .social-contact-card--rubika .social-contact-card__icon,
html[data-ui="site"] .footer-social--rubika { background: #f4edfb; color: #7b4baa; border-color: #e4d5f2; }
html[data-ui="site"] .footer-social { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

/* --------------------------------------------------------------------------
   v1.10 — mobile spacing, controllable promo rail and safer order operations
   -------------------------------------------------------------------------- */
html[data-ui="site"] .home-promo-rail-shell {
    grid-area: rail;
    inline-size: min(1180px, 100%);
    min-inline-size: 0;
    justify-self: center;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
}
html[data-ui="site"] .home-promo-rail-shell .home-promo-rail {
    inline-size: 100% !important;
    min-inline-size: 0;
    max-inline-size: none;
    justify-self: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: 5px 9px;
    direction: ltr;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
}
html[data-ui="site"] .home-promo-rail-shell .home-promo-rail::-webkit-scrollbar { display: none; }
html[data-ui="site"] .home-promo-rail-shell .home-promo-rail__track {
    display: flex;
    inline-size: max-content;
    gap: var(--promo-gap, 14px);
    padding-inline: 3px;
    direction: ltr;
    animation: none !important;
    transform: none !important;
    will-change: auto;
}
html[data-ui="site"] .home-promo-rail-shell .home-promo-card {
    flex: 0 0 var(--promo-card-width, 280px);
    inline-size: var(--promo-card-width, 280px);
    min-inline-size: 0;
    scroll-snap-align: center;
}
html[data-ui="site"] .home-promo-rail__control {
    inline-size: 44px;
    block-size: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--c-line);
    border-radius: 14px;
    background: var(--c-surface);
    color: var(--c-ink);
    box-shadow: var(--shadow-xs);
    font-size: 1.65rem;
    font-family: inherit;
    line-height: 1;
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
html[data-ui="site"] .home-promo-rail__control:hover {
    transform: translateY(-1px);
    border-color: var(--c-accent-border);
    background: var(--c-accent-faint);
}

html[data-ui="site"] .quote-card--live dl {
    display: grid;
    gap: 0;
    padding-block: 8px;
}
html[data-ui="site"] .quote-card--live dl > div {
    display: grid;
    grid-template-columns: minmax(112px, .9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 12px;
    padding-block: 10px;
    border-bottom: 1px solid var(--c-line-soft);
}
html[data-ui="site"] .quote-card--live dl > div:last-child { border-bottom: 0; }
html[data-ui="site"] .quote-card--live dt {
    min-inline-size: 0;
    line-height: 1.7;
}
html[data-ui="site"] .quote-card--live dd {
    min-inline-size: 0;
    margin: 0;
    text-align: end;
    line-height: 1.7;
    overflow-wrap: anywhere;
}
html[data-ui="site"] .quote-card--live .quote-breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    background: transparent;
}
html[data-ui="site"] .quote-card--live .quote-breakdown > span {
    min-inline-size: 0;
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 10px 11px;
    border: 1px solid var(--c-line-soft);
    border-radius: 12px;
    background: var(--c-bg);
}
html[data-ui="site"] .quote-card--live .quote-breakdown > span b {
    min-inline-size: 0;
    font-size: .78rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
html[data-ui="site"] [data-paper-detection] {
    display: block;
    min-block-size: 1.5em;
    line-height: 1.65;
}

html[data-ui="admin"] .promo-rail-admin__controls {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap: 16px;
    margin-block-start: 14px;
}
html[data-ui="admin"] .promo-speed-field input[type="range"] { inline-size: 100%; }
html[data-ui="admin"] .promo-count-stepper {
    display: grid;
    grid-template-columns: 44px minmax(70px, 1fr) 44px;
    gap: 7px;
}
html[data-ui="admin"] .promo-count-stepper > :where(button, input) {
    min-block-size: 44px;
    border: 1px solid var(--c-line);
    border-radius: 12px;
    background: var(--c-surface);
    text-align: center;
}
html[data-ui="admin"] .promo-count-stepper button {
    color: var(--c-accent-ink);
    font-size: 1.35rem;
    font-weight: 900;
}
html[data-ui="admin"] .admin-order-flash { margin-block: 14px 18px; }
html[data-ui="admin"] .admin-order-danger-zone {
    border-color: color-mix(in srgb, var(--c-danger) 30%, var(--c-line));
    background: color-mix(in srgb, var(--c-danger) 3%, var(--admin-panel));
}
html[data-ui="admin"] .admin-order-danger-form { display: grid; gap: 12px; }
html[data-ui="admin"] .admin-order-danger-form textarea { resize: vertical; }
html[data-ui="admin"] .admin-order-cancel-button {
    border-color: color-mix(in srgb, var(--c-danger) 24%, var(--c-line));
}
html[data-ui="admin"] .admin-order-delete-button {
    min-block-size: 46px;
    border: 1px solid var(--c-danger);
    border-radius: 13px;
    background: var(--c-danger);
    color: #fff;
    font-weight: 850;
}
html[data-ui="admin"] .admin-order-delete-separator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block: 16px 12px;
    color: var(--admin-muted);
    font-size: var(--text-xs);
}
html[data-ui="admin"] .admin-order-delete-separator::before,
html[data-ui="admin"] .admin-order-delete-separator::after {
    content: "";
    flex: 1;
    block-size: 1px;
    background: var(--c-line);
}
html[data-ui="admin"] .admin-dashboard-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-block: 18px;
    padding: 14px 16px;
    border: 1px solid var(--admin-border);
    border-radius: 16px;
    background: var(--admin-panel);
}
html[data-ui="admin"] .admin-dashboard-tools > div { display: grid; gap: 3px; }
html[data-ui="admin"] .admin-dashboard-tools span { color: var(--admin-muted); font-size: var(--text-xs); }

@media (max-width: 760px) {
    html[data-ui="admin"] .promo-rail-admin__controls { grid-template-columns: 1fr; }
    html[data-ui="admin"] .admin-dashboard-tools { align-items: stretch; flex-direction: column; }
}

@media (max-width: 680px) {
    html[data-ui="site"] .container { width: min(calc(100% - 32px), 1240px); }
    html[data-ui="site"] .order-page { padding-block: 22px 52px; }
    html[data-ui="site"] .order-shell { inline-size: 100%; gap: 16px; }
    html[data-ui="site"] .order-grid { gap: 14px; }
    html[data-ui="site"] .order-card,
    html[data-ui="site"] .quote-card { padding: 16px; border-radius: 20px; }
    html[data-ui="site"] .order-card { gap: 18px; }
    html[data-ui="site"] .order-card__heading { padding-block-end: 13px; }
    html[data-ui="site"] .home-hero-primary .hero__copy h1,
    html[data-ui="site"] .hero__copy--quote-first h1 { font-size: clamp(2rem, 9vw, 2.65rem); line-height: 1.28; }
    html[data-ui="site"] .hero--copy-home { padding-block-start: 26px; }
    html[data-ui="site"] .home-hero-stage { gap: 16px; }
    html[data-ui="site"] .hero__trust { gap: 9px 12px; }
    html[data-ui="site"] .hero-price-pills { gap: 10px; }
    html[data-ui="site"] .hero-price-pills > a { padding: 12px 10px; border-radius: 15px; }
    html[data-ui="site"] .home-promo-rail-shell {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        gap: 6px;
        margin-inline: 0;
    }
    html[data-ui="site"] .home-promo-rail__control {
        inline-size: 38px;
        block-size: 38px;
        border-radius: 12px;
        font-size: 1.35rem;
    }
    html[data-ui="site"] .home-promo-rail-shell .home-promo-card {
        min-block-size: 132px;
        padding: 15px;
        border-radius: 17px;
    }
    html[data-ui="site"] .quote-card--live dl > div {
        grid-template-columns: minmax(96px, .82fr) minmax(0, 1.18fr);
        gap: 10px;
        padding-block: 9px;
    }
    html[data-ui="site"] .quote-card--live .quote-breakdown { gap: 7px; }
    html[data-ui="site"] .quote-card--live .quote-breakdown > span { padding: 9px; }
    html[data-ui="site"] .quote-total strong { font-size: clamp(1.7rem, 8vw, 2.15rem); }
    html[data-ui="site"] .secure-hint { line-height: 1.8; }
}

@media (max-width: 390px) {
    html[data-ui="site"] .container { width: min(calc(100% - 24px), 1240px); }
    html[data-ui="site"] .order-card,
    html[data-ui="site"] .quote-card { padding: 14px; }
    html[data-ui="site"] .home-promo-rail-shell { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 4px; }
    html[data-ui="site"] .home-promo-rail__control { inline-size: 34px; block-size: 34px; }
}

/* --------------------------------------------------------------------------
   v1.11 — calculation controls, compact flow, media center and branded footer
   -------------------------------------------------------------------------- */
html[data-ui="site"] .site-notice-strip__track {
    animation-duration: var(--notice-duration, 18s);
}

html[data-ui="site"] .field--paper-choice {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
html[data-ui="site"] .field--paper-choice > legend {
    display: block;
    inline-size: 100%;
    margin-block-end: 6px;
    color: var(--c-ink-700);
    font-size: .78rem;
    font-weight: 800;
}
html[data-ui="site"] .paper-choice-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}
html[data-ui="site"] .paper-choice-group label { position: relative; cursor: pointer; }
html[data-ui="site"] .paper-choice-group input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}
html[data-ui="site"] .paper-choice-group label > span {
    min-block-size: 45px;
    display: grid;
    place-items: center;
    padding: 8px 10px;
    border: 1px solid var(--c-line);
    border-radius: 13px;
    background: #fff;
    color: var(--c-ink-700);
    font-weight: 850;
    box-shadow: 0 1px 0 rgba(11,31,34,.02);
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
html[data-ui="site"] .paper-choice-group label:hover > span { transform: translateY(-1px); border-color: var(--c-accent-border); }
html[data-ui="site"] .paper-choice-group input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--c-accent) 19%, transparent); outline-offset: 2px; }
html[data-ui="site"] .paper-choice-group input:checked + span {
    border-color: color-mix(in srgb, var(--c-accent) 60%, var(--c-line));
    background: color-mix(in srgb, var(--c-accent) 8%, #fff);
    color: var(--c-accent-ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 16%, transparent), 0 5px 18px color-mix(in srgb, var(--c-accent) 8%, transparent);
}

html[data-ui="site"] .trust-strip + #how { padding-block-start: 34px; }
html[data-ui="site"] #how .section-heading { margin-block-end: 30px; }

html[data-ui="site"] .quote-card--live .quote-breakdown {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}
html[data-ui="site"] .quote-card--live .quote-breakdown > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 12px;
}
html[data-ui="site"] .quote-card--live .quote-breakdown > span small { color: var(--c-muted); }
html[data-ui="site"] .quote-card--live .quote-breakdown > span b { text-align: end; font-size: .86rem; }

html[data-ui="site"] .home-showcase-section {
    padding-block: clamp(38px, 5vw, 68px);
    border-block-start: 1px solid var(--c-line-soft);
    background: color-mix(in srgb, var(--c-accent) 1.2%, var(--c-bg));
}
html[data-ui="site"] .home-showcase-section .section-heading { margin-block-end: 26px; }
html[data-ui="site"] .home-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
html[data-ui="site"] .home-showcase-card {
    min-inline-size: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--c-line);
    border-radius: 22px;
    background: var(--c-surface);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-xs);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
html[data-ui="site"] a.home-showcase-card:hover { transform: translateY(-3px); border-color: var(--c-accent-border); box-shadow: var(--shadow-sm); }
html[data-ui="site"] .home-showcase-card__media {
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(145deg, color-mix(in srgb, var(--c-accent) 7%, #fff), #f7faf9);
}
html[data-ui="site"] .home-showcase-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
html[data-ui="site"] .home-showcase-card__media--empty { color: var(--c-accent); }
html[data-ui="site"] .home-showcase-card__body { display: grid; gap: 8px; padding: 18px; }
html[data-ui="site"] .home-showcase-card__body small { color: var(--c-accent); font-weight: 800; }
html[data-ui="site"] .home-showcase-card__body strong { font-size: 1.05rem; line-height: 1.6; }
html[data-ui="site"] .home-showcase-card__body p { margin: 0; color: var(--c-muted); line-height: 1.85; font-size: .86rem; }

html[data-ui="site"] .social-brand-icon { display: block; }
html[data-ui="site"] .social-brand-image { display: block; object-fit: contain; }
html[data-ui="site"] .social-contact-card__icon .social-brand-image { max-inline-size: 28px; max-block-size: 28px; }
html[data-ui="site"] .footer-social .social-brand-image { max-inline-size: 21px; max-block-size: 21px; }
html[data-ui="site"] .footer-map-link,
html[data-ui="site"] .contact-map-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
html[data-ui="site"] .footer-map-link { margin-block-start: 7px; color: rgba(255,255,255,.92); }

html[data-ui="admin"] .media-settings-stack { gap: 20px; }
html[data-ui="admin"] .media-control-panel { scroll-margin-top: 90px; }
html[data-ui="admin"] .media-switch { align-self: end; min-block-size: 48px; }
html[data-ui="admin"] .showcase-admin-grid,
html[data-ui="admin"] .showcase-new-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-block-start: 16px;
}
html[data-ui="admin"] .showcase-new-list:empty { display: none; }
html[data-ui="admin"] .showcase-admin-card {
    min-inline-size: 0;
    display: grid;
    grid-template-columns: minmax(150px, .72fr) minmax(0, 1.28fr);
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--c-line);
    border-radius: 19px;
    background: var(--admin-panel, #fff);
}
html[data-ui="admin"] .showcase-admin-card__preview {
    min-block-size: 180px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: color-mix(in srgb, var(--c-accent) 5%, #f7faf9);
    color: var(--c-accent);
    font-size: 2rem;
}
html[data-ui="admin"] .showcase-admin-card__preview img { inline-size: 100%; block-size: 100%; object-fit: cover; }
html[data-ui="admin"] .showcase-admin-card__fields { min-inline-size: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; align-content: start; }
html[data-ui="admin"] .showcase-admin-card__fields .field--full,
html[data-ui="admin"] .showcase-admin-card__checks { grid-column: 1 / -1; }
html[data-ui="admin"] .showcase-admin-card__checks { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
html[data-ui="admin"] .social-admin-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-block-start: 14px;
}
html[data-ui="admin"] .social-admin-card {
    min-inline-size: 0;
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 15px;
    border: 1px solid var(--c-line);
    border-radius: 17px;
    background: color-mix(in srgb, var(--c-accent) 1.5%, #fff);
}
html[data-ui="admin"] .social-admin-card__icon {
    inline-size: 46px;
    block-size: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #fff;
    color: var(--c-ink);
    border: 1px solid var(--c-line-soft);
}
html[data-ui="admin"] .social-admin-card__icon img { max-inline-size: 30px; max-block-size: 30px; object-fit: contain; }
html[data-ui="admin"] .map-admin-box { display: grid; gap: 13px; margin-block-start: 18px; padding: 16px; border: 1px solid var(--c-line); border-radius: 17px; background: color-mix(in srgb, var(--c-accent) 2%, #fff); }

@media (max-width: 1050px) {
    html[data-ui="site"] .home-showcase-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    html[data-ui="admin"] .social-admin-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    html[data-ui="admin"] .showcase-admin-grid,
    html[data-ui="admin"] .showcase-new-list { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    html[data-ui="site"] .trust-strip + #how { padding-block-start: 24px; }
    html[data-ui="site"] .home-showcase-grid { grid-template-columns: 1fr; }
    html[data-ui="site"] .paper-choice-group { gap: 6px; }
    html[data-ui="site"] .paper-choice-group label > span { min-block-size: 43px; border-radius: 12px; }
    html[data-ui="site"] .quote-card--live dl > div { grid-template-columns: minmax(102px, .8fr) minmax(0, 1.2fr); }
    html[data-ui="admin"] .social-admin-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    html[data-ui="admin"] .showcase-admin-card { grid-template-columns: 1fr; }
    html[data-ui="admin"] .showcase-admin-card__preview { min-block-size: 160px; }
}
@media (max-width: 430px) {
    html[data-ui="site"] .paper-choice-group { grid-template-columns: repeat(3, 1fr); }
    html[data-ui="admin"] .social-admin-grid { grid-template-columns: 1fr; }
    html[data-ui="admin"] .showcase-admin-card__fields { grid-template-columns: 1fr; }
    html[data-ui="admin"] .showcase-admin-card__fields .field--full,
    html[data-ui="admin"] .showcase-admin-card__checks { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   v1.12 — responsive calculator, rail controls and admin form alignment
   -------------------------------------------------------------------------- */
html[data-ui="site"] :where(.home-calculator, .order-card--calculator, .quote-card--live) :where(.field, fieldset, input, select, textarea, .counter, .paper-choice-group) {
    min-inline-size: 0;
    max-inline-size: 100%;
}
html[data-ui="site"] :where(.home-calculator, .order-card--calculator) :where(input:not([type="radio"]):not([type="checkbox"]), select, textarea) {
    inline-size: 100%;
}
html[data-ui="site"] :where(.home-calculator, .order-card--calculator) :where(input[type="number"], select) {
    font-variant-numeric: tabular-nums;
}
html[data-ui="site"] :where(.home-calculator, .order-card--calculator) select {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The rail is LTR mechanically, while every card keeps Persian RTL content. */
html[data-ui="site"] .home-promo-rail-shell { direction: ltr; }
html[data-ui="site"] .home-promo-rail-shell .home-promo-card { direction: rtl; text-align: right; }
html[data-ui="site"] .home-promo-rail__control .ui-icon { pointer-events: none; }
html[data-ui="site"] .home-promo-rail-shell .home-promo-rail {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
}

/* Admin surfaces use the same inner gutter, including controls introduced later. */
html[data-ui="admin"] .media-control-panel > :where(
    .promo-rail-admin__controls,
    .hero-manager-note,
    .hero-slide-admin-list,
    .hero-upload-box,
    .hero-new-slide-list,
    .showcase-admin-grid,
    .showcase-new-list,
    .social-admin-grid,
    .map-admin-box
) {
    margin-inline: 20px;
}
html[data-ui="admin"] .media-control-panel > .promo-rail-admin__controls { margin-block: 18px 4px; }
html[data-ui="admin"] .media-control-panel > .hero-manager-note { margin-block: 14px 10px; }
html[data-ui="admin"] .media-control-panel > :where(.hero-slide-admin-list, .showcase-admin-grid, .showcase-new-list) { margin-block-start: 12px; }
html[data-ui="admin"] .media-control-panel > .hero-upload-box { margin-block: 16px 20px; }
html[data-ui="admin"] .media-control-panel > .map-admin-box { margin-block: 18px 20px; }
html[data-ui="admin"] .social-admin-grid { margin-block: 18px 4px; }
html[data-ui="admin"] .social-admin-card .field input { inline-size: 100%; min-inline-size: 0; }
html[data-ui="admin"] .social-admin-card .checkbox-field { min-block-size: 42px; align-items: center; }
html[data-ui="admin"] .promo-count-stepper { direction: ltr; }
html[data-ui="admin"] .promo-count-stepper input { direction: rtl; font-variant-numeric: tabular-nums; }
html[data-ui="admin"] .promo-speed-field small {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
html[data-ui="admin"] .promo-speed-field output { min-inline-size: 34px; text-align: center; font-weight: 800; }
html[data-ui="admin"] .privacy-settings-grid { align-items: end; }
html[data-ui="admin"] .settings-security-check {
    grid-column: 1 / -1;
    min-block-size: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--c-line);
    border-radius: 13px;
    background: var(--c-surface-soft);
}
html[data-ui="admin"] .settings-security-check input { flex: 0 0 auto; }
html[data-ui="admin"] .settings-section > .scanner-status {
    margin: 0 20px 18px;
}
html[data-ui="admin"] .settings-section > .scanner-status + .field-help { margin-block-start: -3px; }

@media (max-width: 980px) {
    /* Put the rail arrows below the cards so they never steal mobile card width. */
    html[data-ui="site"] .home-promo-rail-shell {
        grid-template-columns: minmax(0, 1fr) 40px 40px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 8px;
        row-gap: 8px;
        inline-size: 100%;
        margin-inline: 0;
    }
    html[data-ui="site"] .home-promo-rail-shell .home-promo-rail {
        grid-column: 1 / -1;
        grid-row: 1;
        inline-size: 100% !important;
        mask-image: none;
        padding-block: 4px;
    }
    html[data-ui="site"] .home-promo-rail__control--prev { grid-column: 2; grid-row: 2; }
    html[data-ui="site"] .home-promo-rail__control--next { grid-column: 3; grid-row: 2; }
    html[data-ui="site"] .home-promo-rail__control {
        inline-size: 40px;
        block-size: 40px;
        justify-self: center;
    }

    html[data-ui="admin"] .social-admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[data-ui="admin"] .privacy-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    html[data-ui="site"] .container { width: min(calc(100% - 28px), 1240px); }
    html[data-ui="site"] .hero--copy-home { padding-block-start: 18px; }
    html[data-ui="site"] .home-hero-stage { gap: 14px; overflow: visible; }
    html[data-ui="site"] .home-hero-primary { min-inline-size: 0; }
    html[data-ui="site"] .home-hero-primary .hero__copy h1,
    html[data-ui="site"] .hero__copy--quote-first h1 {
        max-inline-size: 100%;
        font-size: clamp(1.85rem, 8.7vw, 2.45rem);
        line-height: 1.3;
        overflow-wrap: normal;
    }
    html[data-ui="site"] .hero__copy--quote-first p { font-size: .94rem; line-height: 1.85; }
    html[data-ui="site"] .hero__trust { justify-content: center; font-size: .78rem; }
    html[data-ui="site"] .hero-price-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    html[data-ui="site"] .home-promo-rail-shell {
        grid-template-columns: minmax(0, 1fr) 38px 38px minmax(0, 1fr);
        column-gap: 7px;
    }
    html[data-ui="site"] .home-promo-rail__control {
        inline-size: 38px;
        block-size: 38px;
        border-radius: 12px;
    }
    html[data-ui="site"] .home-promo-rail-shell .home-promo-card {
        min-block-size: 126px;
        padding: 14px;
        border-radius: 17px;
    }

    html[data-ui="site"] .home-calculator {
        inline-size: 100%;
        padding: 16px;
        border-radius: 22px;
        overflow: hidden;
    }
    html[data-ui="site"] .home-calculator::after { inset: 6px; border-radius: 18px; }
    html[data-ui="site"] .home-calculator__head { margin-block-end: 14px; }
    html[data-ui="site"] .home-calculator__head h2 { font-size: 1.55rem; line-height: 1.45; }

    /* Three compact choices stay visible without turning the form into a long stack. */
    html[data-ui="site"] .print-mode-selector,
    html[data-ui="site"] .home-print-mode {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        margin-block-end: 14px;
    }
    html[data-ui="site"] .print-mode-selector label > span {
        min-block-size: 62px;
        padding: 9px 7px;
        border-radius: 13px;
        text-align: center;
    }
    html[data-ui="site"] .print-mode-selector label b { font-size: .82rem; }
    html[data-ui="site"] .print-mode-selector label small { font-size: .65rem; line-height: 1.35; }

    html[data-ui="site"] .home-calculator__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 10px;
        align-items: end;
    }
    html[data-ui="site"] .home-calculator__fields > .field { min-inline-size: 0; }
    html[data-ui="site"] .home-paper-choice,
    html[data-ui="site"] .home-color-pages { grid-column: 1 / -1; }
    html[data-ui="site"] .home-calculator__fields :where(input:not([type="radio"]), select) {
        min-block-size: 46px;
        padding-inline: 11px;
        font-size: 16px;
    }
    html[data-ui="site"] .paper-choice-group label > span { min-block-size: 46px; }

    html[data-ui="site"] .home-quote-result { margin-block: 14px 12px; padding: 13px; }
    html[data-ui="site"] .home-quote-result__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    html[data-ui="site"] .home-quote-result__meta span { min-inline-size: 0; }
    html[data-ui="site"] .home-quote-result__meta :where(small, b) { overflow-wrap: anywhere; }
    html[data-ui="site"] .home-quote-result__total { align-items: center; gap: 10px; }

    html[data-ui="site"] .order-page { padding-block: 18px 36px; }
    html[data-ui="site"] .order-card,
    html[data-ui="site"] .quote-card { padding: 15px; border-radius: 19px; }
    html[data-ui="site"] .order-print-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 13px 10px !important;
        /* Keep the first-row controls aligned by their top edge. The pages
           field has helper text below its input, so end-alignment would push
           the copies counter down and make the two controls look staggered. */
        align-items: start;
    }
    html[data-ui="site"] .order-print-fields > .field:nth-child(-n + 2) {
        align-self: start;
        align-content: start;
    }
    html[data-ui="site"] .order-paper-choice { grid-column: 1 / -1; }
    html[data-ui="site"] .order-print-fields > .field:last-child { grid-column: 1 / -1; }
    html[data-ui="site"] .order-card--calculator :where(input:not([type="radio"]):not([type="checkbox"]), select, textarea) { font-size: 16px; }
    html[data-ui="site"] .counter { grid-template-columns: 44px minmax(0, 1fr) 44px; }
    html[data-ui="site"] .counter button { min-block-size: 46px; }
    html[data-ui="site"] .print-profiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    html[data-ui="site"] .print-profiles button { min-inline-size: 0; min-block-size: 72px; padding: 10px 7px; }
    html[data-ui="site"] .print-profiles button b { font-size: .78rem; }
    html[data-ui="site"] .print-profiles button small { font-size: .62rem; line-height: 1.35; }
    html[data-ui="site"] .quote-card--live dl > div { grid-template-columns: minmax(100px, .78fr) minmax(0, 1.22fr); }
    html[data-ui="site"] .quote-card--live .quote-breakdown > span { gap: 9px; }

    html[data-ui="admin"] .media-control-panel > :where(
        .promo-rail-admin__controls,
        .hero-manager-note,
        .hero-slide-admin-list,
        .hero-upload-box,
        .hero-new-slide-list,
        .showcase-admin-grid,
        .showcase-new-list,
        .social-admin-grid,
        .map-admin-box
    ) { margin-inline: 14px; }
    html[data-ui="admin"] .settings-section > .scanner-status { margin-inline: 14px; }
    html[data-ui="admin"] .privacy-settings-grid,
    html[data-ui="admin"] .social-admin-grid { grid-template-columns: 1fr; }
    html[data-ui="admin"] .promo-rail-admin__controls { gap: 12px; }
    html[data-ui="admin"] .promo-count-stepper { grid-template-columns: 46px minmax(0, 1fr) 46px; }
    html[data-ui="admin"] .map-admin-box .field-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 460px) {
    html[data-ui="site"] .container { width: min(calc(100% - 22px), 1240px); }
    html[data-ui="site"] .home-calculator { padding: 14px; }
    html[data-ui="site"] .home-hero-primary .hero__copy h1,
    html[data-ui="site"] .hero__copy--quote-first h1 { font-size: clamp(1.7rem, 8.6vw, 2.1rem); }
    html[data-ui="site"] .print-mode-selector label small,
    html[data-ui="site"] .print-profiles button small { display: none; }
    html[data-ui="site"] .print-mode-selector label > span { min-block-size: 50px; }
    html[data-ui="site"] .home-binding-field,
    html[data-ui="site"] .home-lamination-field { grid-column: 1 / -1; }
    html[data-ui="site"] .home-quote-result__meta { grid-template-columns: 1fr; }
    html[data-ui="site"] .home-quote-result__meta span { grid-template-columns: 1fr auto; align-items: center; }
    html[data-ui="site"] .home-quote-result__total { align-items: flex-start; flex-direction: column; }
    html[data-ui="site"] .quote-card--live dl > div { grid-template-columns: 1fr; gap: 3px; }
    html[data-ui="site"] .quote-card--live dd { text-align: start; }
    html[data-ui="site"] .quote-card--live .quote-breakdown > span { align-items: flex-start; flex-direction: column; gap: 3px; }
    html[data-ui="site"] .quote-card--live .quote-breakdown > span b { text-align: start; }
}

/* --------------------------------------------------------------------------
   v1.13 — embedded map and deterministic footer layout
   -------------------------------------------------------------------------- */
html[data-ui="site"] .footer__grid {
    direction: ltr;
    display: grid;
    grid-template-columns: minmax(280px, 1.18fr) minmax(150px, .58fr) minmax(165px, .62fr) minmax(320px, 1.35fr);
    grid-template-areas:
        "map info quick brand"
        "map info quick contact";
    align-items: start;
    gap: clamp(28px, 3.4vw, 58px);
}

html[data-ui="site"] .footer__grid > * {
    min-width: 0;
    direction: rtl;
}

html[data-ui="site"] .footer__brand-column { grid-area: brand; }
html[data-ui="site"] .footer__quick-column { grid-area: quick; }
html[data-ui="site"] .footer__info-column { grid-area: info; }
html[data-ui="site"] .footer__contact-column { grid-area: contact; }
html[data-ui="site"] .footer__map-column {
    grid-area: map;
    align-self: stretch;
    min-width: 0;
}

html[data-ui="site"] .map-embed {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

html[data-ui="site"] .map-embed__head,
html[data-ui="site"] .map-embed__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
}

html[data-ui="site"] .map-embed__head > div {
    display: grid;
    gap: 2px;
}

html[data-ui="site"] .map-embed__eyebrow {
    color: var(--c-muted);
    font-size: var(--text-xs);
}

html[data-ui="site"] .map-embed__head strong {
    color: var(--c-ink-900);
    font-size: var(--text-sm);
}

html[data-ui="site"] .map-embed__head > svg {
    flex: 0 0 auto;
    color: var(--c-accent);
}

html[data-ui="site"] .map-embed__viewport {
    position: relative;
    min-height: 270px;
    background: #eef2f1;
    overflow: hidden;
}

html[data-ui="site"] .map-embed__viewport iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 270px;
    border: 0;
}

html[data-ui="site"] .map-embed__footer {
    align-items: flex-start;
    border-top: 1px solid var(--c-line);
}

html[data-ui="site"] .map-embed__footer > span {
    min-width: 0;
    margin: 0;
    color: var(--c-muted);
    font-size: var(--text-xs);
    line-height: 1.8;
    overflow-wrap: anywhere;
}

html[data-ui="site"] .map-embed__footer > a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--c-accent-deep);
    font-size: var(--text-xs);
    font-weight: 800;
    white-space: nowrap;
}

html[data-ui="site"] .map-embed--footer {
    height: 100%;
    min-height: 350px;
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.98);
    box-shadow: none;
}

html[data-ui="site"] .map-embed--footer .map-embed__viewport,
html[data-ui="site"] .map-embed--footer .map-embed__viewport iframe {
    min-height: 260px;
}

html[data-ui="site"] .map-embed--footer .map-embed__footer {
    min-height: 74px;
}

html[data-ui="site"] .about-map-section {
    margin-block-start: clamp(24px, 4vw, 42px);
}

html[data-ui="site"] .map-embed--contact .map-embed__viewport,
html[data-ui="site"] .map-embed--contact .map-embed__viewport iframe {
    min-height: clamp(300px, 38vw, 440px);
}

html[data-ui="admin"] .map-admin-box__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-block-end: 16px;
}

html[data-ui="admin"] .map-admin-box__hint {
    color: var(--c-muted);
    font-size: var(--text-xs);
    line-height: 1.8;
}

@media (max-width: 1120px) {
    html[data-ui="site"] .footer__grid {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        grid-template-areas:
            "quick brand"
            "info contact"
            "map map";
        gap: 30px 42px;
    }

    html[data-ui="site"] .map-embed--footer {
        min-height: 0;
    }

    html[data-ui="site"] .map-embed--footer .map-embed__viewport,
    html[data-ui="site"] .map-embed--footer .map-embed__viewport iframe {
        min-height: 300px;
    }
}

@media (max-width: 720px) {
    html[data-ui="site"] .footer__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "brand"
            "contact"
            "quick"
            "info"
            "map";
        gap: 26px;
    }

    html[data-ui="site"] .footer__map-column {
        width: 100%;
    }

    html[data-ui="site"] .map-embed {
        border-radius: 20px;
    }

    html[data-ui="site"] .map-embed__head,
    html[data-ui="site"] .map-embed__footer {
        padding: 13px 14px;
    }

    html[data-ui="site"] .map-embed__footer {
        display: grid;
        gap: 10px;
    }

    html[data-ui="site"] .map-embed__footer > a {
        justify-content: center;
        width: 100%;
        min-height: 42px;
        padding-inline: 12px;
        border-radius: 12px;
        background: color-mix(in srgb, var(--c-accent) 9%, #fff);
    }

    html[data-ui="site"] .map-embed--footer .map-embed__viewport,
    html[data-ui="site"] .map-embed--footer .map-embed__viewport iframe,
    html[data-ui="site"] .map-embed--contact .map-embed__viewport,
    html[data-ui="site"] .map-embed--contact .map-embed__viewport iframe {
        min-height: 260px;
    }

    html[data-ui="admin"] .map-admin-box__head {
        display: grid;
        align-items: start;
    }
}

/* --------------------------------------------------------------------------
   v1.13.1 — footer map visual integration
   Keep Google Maps interactive while making the surrounding card match the
   dark footer instead of rendering as a bright white island.
   -------------------------------------------------------------------------- */
html[data-ui="site"] .footer .map-embed--footer {
    height: auto;
    min-height: 0;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 18px 44px rgba(9, 3, 14, .18);
    backdrop-filter: blur(10px);
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__head {
    min-height: 62px;
    padding: 10px 10px 12px;
    background: transparent;
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__head > div {
    gap: 3px;
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__eyebrow {
    color: rgba(255,255,255,.46);
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__head strong {
    color: rgba(255,255,255,.96);
    font-size: var(--text-sm);
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__head > svg {
    color: #d778e5;
    filter: drop-shadow(0 3px 10px rgba(215,120,229,.22));
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__viewport {
    min-height: 252px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 19px;
    background: #252a2e;
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.12),
        0 10px 28px rgba(0,0,0,.16);
    isolation: isolate;
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__viewport::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__viewport iframe {
    min-height: 252px;
    filter: saturate(.82) contrast(1.02) brightness(.93);
    transform: scale(1.006);
    transform-origin: center;
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 0;
    padding: 12px 10px 6px;
    border-top: 0;
    background: transparent;
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__footer > span {
    color: rgba(255,255,255,.58);
    font-size: var(--text-xs);
    line-height: 1.75;
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__footer > a {
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;
    background: rgba(255,255,255,.075);
    color: rgba(255,255,255,.94);
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__footer > a:hover,
html[data-ui="site"] .footer .map-embed--footer .map-embed__footer > a:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(215,120,229,.42);
    background: rgba(215,120,229,.13);
}

@media (max-width: 1120px) {
    html[data-ui="site"] .footer .map-embed--footer {
        width: 100%;
        max-width: none;
    }

    html[data-ui="site"] .footer .map-embed--footer .map-embed__viewport,
    html[data-ui="site"] .footer .map-embed--footer .map-embed__viewport iframe {
        min-height: 290px;
    }
}

@media (max-width: 720px) {
    html[data-ui="site"] .footer .map-embed--footer {
        padding: 8px;
        border-radius: 22px;
    }

    html[data-ui="site"] .footer .map-embed--footer .map-embed__head {
        min-height: 56px;
        padding: 8px 8px 10px;
    }

    html[data-ui="site"] .footer .map-embed--footer .map-embed__viewport {
        border-radius: 16px;
    }

    html[data-ui="site"] .footer .map-embed--footer .map-embed__viewport,
    html[data-ui="site"] .footer .map-embed--footer .map-embed__viewport iframe {
        min-height: 245px;
    }

    html[data-ui="site"] .footer .map-embed--footer .map-embed__footer {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 11px 8px 5px;
    }

    html[data-ui="site"] .footer .map-embed--footer .map-embed__footer > a {
        width: 100%;
        justify-content: center;
        background: rgba(255,255,255,.08);
    }
}

/* --------------------------------------------------------------------------
   v1.13.2 — responsive embedded-map content
   Keep the map interactive while preventing long RTL addresses and action
   labels from squeezing each other or overflowing narrow footer columns.
   -------------------------------------------------------------------------- */
html[data-ui="site"] .map-embed__head > div {
    min-width: 0;
}

html[data-ui="site"] .map-embed__head :where(.map-embed__eyebrow, strong) {
    min-width: 0;
    margin: 0 !important;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

html[data-ui="site"] .map-embed__address {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    width: 100%;
    margin: 0;
    color: var(--c-muted);
    font-size: var(--text-xs);
    line-height: 1.85;
    direction: rtl;
    text-align: start;
}

html[data-ui="site"] .map-embed__address > svg {
    flex: 0 0 auto;
    margin-block-start: .3em;
}

html[data-ui="site"] .map-embed__address > span {
    display: block !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    font: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

html[data-ui="site"] .footer__map-column {
    display: block !important;
    min-width: 0;
    width: 100%;
}

html[data-ui="site"] .footer .map-embed--footer {
    width: 100%;
    min-width: 0;
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    direction: rtl;
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__head > div {
    flex: 1 1 auto;
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__head strong {
    display: block !important;
    max-width: 100%;
    line-height: 1.65;
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__viewport {
    height: clamp(230px, 22vw, 285px);
    min-height: 0;
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__viewport iframe {
    width: 100%;
    height: 100%;
    min-height: 0;
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
    width: 100%;
    padding: 12px 10px 6px;
    direction: rtl;
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__address {
    box-sizing: border-box;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.61);
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__address > span {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__address > svg {
    color: rgba(215,120,229,.9);
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__footer > a {
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    margin: 0 !important;
    padding: 9px 12px !important;
    white-space: normal;
    text-align: center;
    line-height: 1.55;
}

html[data-ui="site"] .footer .map-embed--footer .map-embed__footer > a > span {
    display: inline !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

@media (max-width: 1120px) {
    html[data-ui="site"] .footer .map-embed--footer .map-embed__viewport {
        height: clamp(250px, 34vw, 320px);
    }
}

@media (max-width: 720px) {
    html[data-ui="site"] .footer .map-embed--footer {
        padding: 8px;
        border-radius: 20px;
    }

    html[data-ui="site"] .footer .map-embed--footer .map-embed__head {
        min-height: 0;
        padding: 9px 8px 11px;
    }

    html[data-ui="site"] .footer .map-embed--footer .map-embed__head strong {
        font-size: var(--text-sm);
    }

    html[data-ui="site"] .footer .map-embed--footer .map-embed__viewport {
        height: clamp(220px, 58vw, 280px);
        border-radius: 15px;
    }

    html[data-ui="site"] .footer .map-embed--footer .map-embed__footer {
        gap: 8px;
        padding: 10px 7px 4px;
    }

    html[data-ui="site"] .footer .map-embed--footer .map-embed__address {
        padding: 8px 9px;
        line-height: 1.75;
    }

    html[data-ui="site"] .footer .map-embed--footer .map-embed__address > span {
        -webkit-line-clamp: 2;
    }

    html[data-ui="site"] .footer .map-embed--footer .map-embed__footer > a {
        min-height: 44px;
        border-radius: 12px;
    }
}

@media (max-width: 420px) {
    html[data-ui="site"] .footer .map-embed--footer {
        padding: 7px;
        border-radius: 18px;
    }

    html[data-ui="site"] .footer .map-embed--footer .map-embed__head {
        gap: 9px;
        padding-inline: 7px;
    }

    html[data-ui="site"] .footer .map-embed--footer .map-embed__viewport {
        height: clamp(210px, 62vw, 250px);
        border-radius: 14px;
    }

    html[data-ui="site"] .footer .map-embed--footer .map-embed__footer > a {
        font-size: var(--text-xs);
        padding-inline: 10px !important;
    }
}

/* --------------------------------------------------------------------------
   v1.13.4 — restore stable hero proportions; tighten spacing only
   -------------------------------------------------------------------------- */

/* Keep the v1.13.2 visual proportions intact. Only remove the unused vertical
   air after the notice strip and pull the interactive promo rail upward. */
@media (min-width: 981px) {
    html[data-ui="site"] .hero--copy-home {
        padding-block-start: 10px;
    }
    html[data-ui="site"] .home-hero-stage {
        row-gap: 12px;
        column-gap: 34px;
    }

    /* Explicit placement avoids RTL/grid auto-placement ambiguity. */
    html[data-ui="site"] .home-promo-rail__control--prev { grid-column: 1; grid-row: 1; }
    html[data-ui="site"] .home-promo-rail-shell .home-promo-rail { grid-column: 2; grid-row: 1; }
    html[data-ui="site"] .home-promo-rail__control--next { grid-column: 3; grid-row: 1; }
}

/* The ticker moves visually from the left side toward the right side. */
html[data-ui="site"] .site-notice-strip__track {
    animation-name: site-notice-marquee-ltr;
}
@keyframes site-notice-marquee-ltr {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

/* Scroll snapping must help manual navigation, not fight autoplay or buttons. */
html[data-ui="site"] .home-promo-rail-shell .home-promo-rail {
    scroll-snap-type: x proximity;
    scroll-behavior: auto;
}
html[data-ui="site"] .home-promo-rail__control {
    position: relative;
    z-index: 4;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
}
html[data-ui="site"] .home-promo-rail__control .ui-icon {
    pointer-events: none;
}

@media (max-width: 980px) {
    /* Preserve the established mobile layout; only trim the top air slightly. */
    html[data-ui="site"] .hero--copy-home { padding-block-start: 12px; }
}

/* --------------------------------------------------------------------------
   v1.13.5 — reliable autoplay rail, central action card and exact map inputs
   -------------------------------------------------------------------------- */
html[data-ui="site"] .home-hero-primary {
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
html[data-ui="site"] .home-action-card {
    inline-size: min(650px, 100%);
    min-block-size: 74px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-block-start: 2px;
    padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--c-accent) 24%, var(--c-line));
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 7%, var(--c-surface)), var(--c-surface));
    color: var(--c-ink-900);
    text-decoration: none;
    box-shadow: var(--shadow-xs);
    text-align: right;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
html[data-ui="site"] .home-action-card:hover {
    transform: translateY(-2px);
    border-color: var(--c-accent-border);
    box-shadow: var(--shadow-sm);
}
html[data-ui="site"] .home-action-card__visual {
    inline-size: 48px;
    block-size: 48px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 14px;
    background: var(--c-accent-faint);
    color: var(--c-accent-ink);
}
html[data-ui="site"] .home-action-card__visual img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}
html[data-ui="site"] .home-action-card__copy {
    min-inline-size: 0;
    display: grid;
    gap: 2px;
}
html[data-ui="site"] .home-action-card__copy small { color: var(--c-accent-ink); font-size: .72rem; font-weight: 850; }
html[data-ui="site"] .home-action-card__copy strong { color: var(--c-ink-900); font-size: .98rem; line-height: 1.6; }
html[data-ui="site"] .home-action-card__copy > span { color: var(--c-ink-600); font-size: .78rem; line-height: 1.65; }
html[data-ui="site"] .home-action-card__button {
    min-block-size: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-inline: 14px;
    border-radius: 12px;
    background: var(--c-accent-deep);
    border: 1px solid var(--c-accent-deep);
    color: #fff;
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--c-accent-deep) 14%, transparent);
}
html[data-ui="site"] .home-action-card:hover .home-action-card__button {
    background: var(--c-accent-active);
    border-color: var(--c-accent-active);
}
html[data-ui="site"] .home-promo-rail-shell .home-promo-rail {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
}
html[data-ui="site"] .home-promo-rail-shell .home-promo-rail__track {
    animation: none !important;
    transform: none !important;
}
html[data-ui="site"] #calculator { scroll-margin-top: 104px; }

html[data-ui="admin"] .home-action-admin {
    margin: 18px 20px 20px;
    padding: 18px;
    border: 1px solid var(--c-line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--c-surface) 94%, var(--c-accent-faint));
}
html[data-ui="admin"] .home-action-admin__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-block-end: 16px;
}
html[data-ui="admin"] .home-action-admin__head > div { display: grid; gap: 4px; }
html[data-ui="admin"] .home-action-admin__head > div > span { color: var(--c-muted); font-size: .82rem; line-height: 1.7; }

@media (max-width: 680px) {
    html[data-ui="site"] .home-action-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px 12px;
        padding: 11px;
    }
    html[data-ui="site"] .home-action-card__button {
        grid-column: 1 / -1;
        inline-size: 100%;
    }
    html[data-ui="admin"] .home-action-admin { margin-inline: 12px; padding: 14px; }
    html[data-ui="admin"] .home-action-admin__head { align-items: flex-start; flex-direction: column; }
}

/* --------------------------------------------------------------------------
   v1.13.7 — outward rail controls and global return-to-top action
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
    /* Keep the established rail/card geometry intact; only move the controls
       toward the outer visual edges of the hero stage. */
    html[data-ui="site"] .home-promo-rail__control--prev {
        translate: -34px 0;
    }
    html[data-ui="site"] .home-promo-rail__control--next {
        translate: 34px 0;
    }
}

html[data-ui="site"] .scroll-to-top {
    position: fixed;
    z-index: 48;
    inset-inline-start: max(18px, env(safe-area-inset-left));
    inset-block-end: max(18px, env(safe-area-inset-bottom));
    inline-size: 46px;
    block-size: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--c-accent) 26%, var(--c-line));
    border-radius: 15px;
    background: color-mix(in srgb, var(--c-surface) 94%, var(--c-accent-faint));
    color: var(--c-accent-deep);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px) scale(.96);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease,
                border-color .18s ease, background-color .18s ease;
}
html[data-ui="site"] .scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
html[data-ui="site"] .scroll-to-top:hover,
html[data-ui="site"] .scroll-to-top:focus-visible {
    border-color: var(--c-accent-border);
    background: var(--c-accent-faint);
    outline: none;
}
html[data-ui="site"] .scroll-to-top .ui-icon { pointer-events: none; }

@media (max-width: 980px) {
    html[data-ui="site"] .home-promo-rail__control--prev,
    html[data-ui="site"] .home-promo-rail__control--next {
        translate: none;
    }
}

@media (max-width: 680px) {
    html[data-ui="site"] .scroll-to-top {
        inline-size: 44px;
        block-size: 44px;
        border-radius: 14px;
        inset-inline-start: max(14px, env(safe-area-inset-left));
        inset-block-end: max(14px, env(safe-area-inset-bottom));
    }
    html[data-ui="site"] .mobile-order-cta + .scroll-to-top {
        inset-block-end: calc(max(14px, env(safe-area-inset-bottom)) + 66px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-ui="site"] .scroll-to-top { transition: none; }
}


/* --------------------------------------------------------------------------
   v1.14.0 — media-rich hero ads, precise slow speeds and wider rail controls
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
    html[data-ui="site"] .home-promo-rail__control--prev {
        translate: calc(-1 * clamp(54px, 5vw, 86px)) 0;
    }
    html[data-ui="site"] .home-promo-rail__control--next {
        translate: clamp(54px, 5vw, 86px) 0;
    }
}

/* The autoplay engine owns the rail position completely. Native snapping used
   to absorb very small increments and made slower admin settings look equal. */
html[data-ui="site"] .home-promo-rail-shell .home-promo-rail {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
}
html[data-ui="site"] .home-promo-rail-shell .home-promo-card {
    scroll-snap-align: none !important;
}

/* Side advertisements can stay typographic or become full-bleed image/GIF ads. */
html[data-ui="site"] .home-side-ad__body {
    position: relative;
    z-index: 2;
    min-inline-size: 0;
    min-block-size: 100%;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-end;
    gap: 9px;
}
html[data-ui="site"] .home-side-ad__media,
html[data-ui="site"] .home-side-ad__scrim {
    position: absolute;
    inset: 0;
}
html[data-ui="site"] .home-side-ad__media { z-index: 0; }
html[data-ui="site"] .home-side-ad__media img {
    inline-size: 100%;
    block-size: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
html[data-ui="site"] .home-side-ad__scrim {
    z-index: 1;
    background: linear-gradient(180deg, rgba(15,20,22,.05) 12%, rgba(15,20,22,.28) 46%, rgba(15,20,22,.82) 100%);
}
html[data-ui="site"] .home-side-ad.has-media {
    background: var(--c-ink-900);
    border-color: color-mix(in srgb, var(--c-accent) 24%, rgba(255,255,255,.2));
}
html[data-ui="site"] .home-side-ad.has-media :where(small,strong,p,em) {
    color: #fff;
    text-shadow: 0 1px 12px rgba(0,0,0,.28);
}
html[data-ui="site"] .home-side-ad.has-media p { color: rgba(255,255,255,.82); }
html[data-ui="site"] .home-side-ad.has-media small,
html[data-ui="site"] .home-side-ad.has-media em { color: rgba(255,255,255,.9); }
html[data-ui="site"] .home-side-ad.has-media .home-side-ad__icon {
    color: #fff;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(8px);
}
html[data-ui="site"] .home-side-ad--align-right { text-align: right; }
html[data-ui="site"] .home-side-ad--align-center { text-align: center; }
html[data-ui="site"] .home-side-ad--align-left { text-align: left; }
html[data-ui="site"] .home-side-ad--size-small strong { font-size: 1rem; }
html[data-ui="site"] .home-side-ad--size-small p { font-size: .8rem; }
html[data-ui="site"] .home-side-ad--size-normal strong { font-size: 1.18rem; }
html[data-ui="site"] .home-side-ad--size-normal p { font-size: .88rem; }
html[data-ui="site"] .home-side-ad--size-large strong { font-size: 1.38rem; }
html[data-ui="site"] .home-side-ad--size-large p { font-size: .96rem; }
html[data-ui="site"] .home-side-ad--weight-regular strong { font-weight: 500; }
html[data-ui="site"] .home-side-ad--weight-medium strong { font-weight: 700; }
html[data-ui="site"] .home-side-ad--weight-bold strong { font-weight: 900; }

/* Media center: show admins which physical homepage slot they are editing. */
html[data-ui="admin"] .media-placement-map {
    display: grid;
    grid-template-columns: minmax(120px,.72fr) minmax(220px,1.25fr) minmax(120px,.72fr);
    gap: 10px;
    margin: 18px 20px 6px;
    padding: 12px;
    border: 1px dashed color-mix(in srgb, var(--c-accent) 34%, var(--c-line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--c-accent) 2.5%, var(--c-surface));
}
html[data-ui="admin"] .media-placement-map > div {
    min-block-size: 64px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    border: 1px solid var(--c-line);
    border-radius: 13px;
    background: var(--c-surface);
    color: var(--admin-muted);
    font-size: .78rem;
    font-weight: 800;
    text-align: center;
}
html[data-ui="admin"] .media-placement-map__hero {
    background: var(--c-accent-soft) !important;
    color: var(--c-accent-ink) !important;
}
html[data-ui="admin"] .media-placement-map__hero small { opacity: .72; }
html[data-ui="admin"] .home-ad-admin-grid--visual { align-items: start; }
html[data-ui="admin"] .home-ad-admin-card--visual { overflow: hidden; padding: 0; }
html[data-ui="admin"] .home-ad-admin-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 17px 13px;
    border-block-end: 1px solid var(--c-line-soft);
}
html[data-ui="admin"] .home-ad-admin-card__head > div { display: grid; gap: 2px; }
html[data-ui="admin"] .home-ad-admin-card__head small { color: var(--admin-muted); font-size: .72rem; }
html[data-ui="admin"] .placement-badge {
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
    font-size: .7rem;
    font-weight: 850;
    white-space: nowrap;
}
html[data-ui="admin"] .home-ad-admin-preview {
    position: relative;
    min-block-size: 190px;
    display: grid;
    align-content: end;
    overflow: hidden;
    margin: 14px 16px 4px;
    border: 1px solid var(--c-line);
    border-radius: 16px;
    background: linear-gradient(155deg, var(--c-surface), var(--c-accent-faint));
}
html[data-ui="admin"] .home-ad-admin-preview > img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}
html[data-ui="admin"] .home-ad-admin-preview.has-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 28%, rgba(10,16,18,.78));
}
html[data-ui="admin"] .home-ad-admin-preview__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    color: var(--admin-muted);
}
html[data-ui="admin"] .home-ad-admin-preview__placeholder .ui-icon { color: var(--c-accent); }
html[data-ui="admin"] .home-ad-admin-preview__placeholder small { font-size: .72rem; }
html[data-ui="admin"] .home-ad-admin-preview__copy {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 4px;
    padding: 16px;
    text-align: right;
}
html[data-ui="admin"] .home-ad-admin-preview.has-media .home-ad-admin-preview__copy { color: #fff; }
html[data-ui="admin"] .home-ad-admin-preview__copy small { color: var(--c-accent); font-size: .7rem; font-weight: 850; }
html[data-ui="admin"] .home-ad-admin-preview.has-media .home-ad-admin-preview__copy small { color: rgba(255,255,255,.78); }
html[data-ui="admin"] .home-ad-admin-preview__copy strong { font-size: 1rem; line-height: 1.55; }
html[data-ui="admin"] .home-ad-admin-preview__copy > span { color: var(--admin-muted); font-size: .78rem; line-height: 1.7; }
html[data-ui="admin"] .home-ad-admin-preview.has-media .home-ad-admin-preview__copy > span { color: rgba(255,255,255,.8); }
html[data-ui="admin"] .home-ad-admin-preview[data-text-size="small"] .home-ad-admin-preview__copy strong { font-size: .9rem; }
html[data-ui="admin"] .home-ad-admin-preview[data-text-size="large"] .home-ad-admin-preview__copy strong { font-size: 1.18rem; }
html[data-ui="admin"] .home-ad-admin-preview[data-text-weight="regular"] .home-ad-admin-preview__copy strong { font-weight: 500; }
html[data-ui="admin"] .home-ad-admin-preview[data-text-weight="medium"] .home-ad-admin-preview__copy strong { font-weight: 700; }
html[data-ui="admin"] .home-ad-admin-preview[data-text-weight="bold"] .home-ad-admin-preview__copy strong { font-weight: 900; }
html[data-ui="admin"] .home-ad-admin-preview[data-text-align="right"] .home-ad-admin-preview__copy { text-align: right; }
html[data-ui="admin"] .home-ad-admin-preview[data-text-align="center"] .home-ad-admin-preview__copy { text-align: center; }
html[data-ui="admin"] .home-ad-admin-preview[data-text-align="left"] .home-ad-admin-preview__copy { text-align: left; }
html[data-ui="admin"] .home-ad-admin-card__fields {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    padding: 14px 16px 17px;
}
html[data-ui="admin"] .home-ad-admin-card__fields .field--full { grid-column: 1 / -1; }
html[data-ui="admin"] :where(.promo-speed-field input[type="range"]) { direction: ltr; }

@media (max-width: 1180px) {
    html[data-ui="admin"] .home-ad-admin-card__fields { grid-template-columns: 1fr; }
    html[data-ui="admin"] .home-ad-admin-card__fields .field--full { grid-column: auto; }
}
@media (max-width: 760px) {
    html[data-ui="admin"] .media-placement-map {
        grid-template-columns: 1fr 1.3fr 1fr;
        margin-inline: 12px;
        padding: 8px;
    }
    html[data-ui="admin"] .media-placement-map > div { min-block-size: 54px; font-size: .7rem; }
    html[data-ui="admin"] .home-ad-admin-preview { min-block-size: 170px; margin-inline: 12px; }
    html[data-ui="admin"] .home-ad-admin-card__fields { padding-inline: 12px; }
}
html[data-ui="admin"] .media-placement-map { direction: ltr; }
html[data-ui="admin"] .media-placement-map > div { direction: rtl; }
@media (prefers-reduced-motion: reduce) {
    html[data-ui="site"] .site-notice-strip__track { animation: none !important; }
}

/* v1.14.1 — stable in-page calculator targeting */
html[data-ui="site"] {
    scroll-padding-top: 92px;
}
html[data-ui="site"] #calculator {
    scroll-margin-top: 92px;
}
@media (max-width: 680px) {
    html[data-ui="site"] {
        scroll-padding-top: 82px;
    }
    html[data-ui="site"] #calculator {
        scroll-margin-top: 82px;
    }
}

/* --------------------------------------------------------------------------
   v1.14.2 — frosted glass polish for navigation, slider controls and helpers
   -------------------------------------------------------------------------- */
html[data-ui="site"] .topbar {
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.72));
    border-bottom-color: color-mix(in srgb, var(--c-accent) 14%, var(--c-line-soft));
    -webkit-backdrop-filter: blur(18px) saturate(155%);
    backdrop-filter: blur(18px) saturate(155%);
    box-shadow: 0 12px 28px rgba(18, 18, 28, .05);
}
html[data-ui="site"] .topbar[data-header-background] {
    background-color: rgba(255,255,255,.68);
}
html[data-ui="site"] .header-account {
    border: 1px solid color-mix(in srgb, var(--c-accent) 10%, rgba(255,255,255,.64));
    background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.42));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    backdrop-filter: blur(14px) saturate(145%);
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
html[data-ui="site"] .header-account:hover,
html[data-ui="site"] .header-account:focus-visible {
    border-color: color-mix(in srgb, var(--c-accent) 26%, var(--c-line));
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(248,241,250,.58));
    transform: translateY(-1px);
}
html[data-ui="site"] .nav-toggle,
html[data-ui="site"] .home-promo-rail__control,
html[data-ui="site"] .scroll-to-top {
    border-color: color-mix(in srgb, var(--c-accent) 14%, rgba(255,255,255,.6));
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(247,240,250,.58));
    box-shadow: 0 10px 26px rgba(26, 16, 35, .08), inset 0 1px 0 rgba(255,255,255,.65);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
}
html[data-ui="site"] .nav-toggle:hover,
html[data-ui="site"] .nav-toggle:focus-visible,
html[data-ui="site"] .home-promo-rail__control:hover,
html[data-ui="site"] .home-promo-rail__control:focus-visible,
html[data-ui="site"] .scroll-to-top:hover,
html[data-ui="site"] .scroll-to-top:focus-visible {
    border-color: color-mix(in srgb, var(--c-accent) 34%, var(--c-line));
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,236,250,.7));
}
html[data-ui="site"] .nav-toggle span {
    background: color-mix(in srgb, var(--c-ink-900) 92%, var(--c-accent));
}
html[data-ui="site"] .home-promo-rail__control,
html[data-ui="site"] .scroll-to-top {
    color: color-mix(in srgb, var(--c-accent-deep) 80%, var(--c-ink-900));
}
html[data-ui="site"] .home-side-ad {
    border-color: color-mix(in srgb, var(--c-accent) 14%, rgba(255,255,255,.74));
    background:
        radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--c-accent) 12%, rgba(255,255,255,.55)), transparent 40%),
        linear-gradient(155deg, rgba(255,255,255,.78), rgba(250,246,251,.62));
    box-shadow: 0 18px 42px rgba(30, 20, 41, .06), inset 0 1px 0 rgba(255,255,255,.55);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}
html[data-ui="site"] .home-side-ad__icon {
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(250,240,252,.46));
    border: 1px solid color-mix(in srgb, var(--c-accent) 16%, rgba(255,255,255,.64));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
}
html[data-ui="site"] .home-side-ad.has-media {
    border-color: color-mix(in srgb, var(--c-accent) 18%, rgba(255,255,255,.28));
    box-shadow: 0 18px 42px rgba(14, 10, 24, .18), inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-ui="site"] .home-side-ad.has-media .home-side-ad__scrim {
    background: linear-gradient(180deg, rgba(12, 14, 18, .04) 8%, rgba(20, 18, 30, .2) 38%, rgba(24, 14, 34, .82) 100%);
}
html[data-ui="site"] .home-side-ad.has-media .home-side-ad__icon {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
    -webkit-backdrop-filter: blur(10px) saturate(135%);
    backdrop-filter: blur(10px) saturate(135%);
}

@media (max-width: 860px) {
    html[data-ui="site"] .nav {
        border-color: color-mix(in srgb, var(--c-accent) 14%, rgba(255,255,255,.66));
        background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(251,247,252,.72));
        box-shadow: 0 20px 46px rgba(27, 17, 36, .1), inset 0 1px 0 rgba(255,255,255,.6);
        -webkit-backdrop-filter: blur(22px) saturate(155%);
        backdrop-filter: blur(22px) saturate(155%);
    }
    html[data-ui="site"] .nav a:hover,
    html[data-ui="site"] .nav a:focus-visible,
    html[data-ui="site"] .nav a[aria-current="page"] {
        background: color-mix(in srgb, var(--c-accent) 8%, rgba(255,255,255,.68));
    }
}

html[data-ui="admin"] .admin-header {
    background: rgba(255,255,255,.86);
    border-bottom-color: color-mix(in srgb, var(--c-accent) 10%, var(--admin-border));
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
}
html[data-ui="admin"] .admin-menu-toggle,
html[data-ui="admin"] .settings-savebar {
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,247,250,.8));
    border-color: color-mix(in srgb, var(--c-accent) 10%, var(--admin-border));
    box-shadow: 0 12px 28px rgba(24, 18, 33, .06), inset 0 1px 0 rgba(255,255,255,.56);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    backdrop-filter: blur(14px) saturate(145%);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html[data-ui="site"] .topbar,
    html[data-ui="site"] .header-account,
    html[data-ui="site"] .nav-toggle,
    html[data-ui="site"] .home-promo-rail__control,
    html[data-ui="site"] .scroll-to-top,
    html[data-ui="site"] .home-side-ad,
    html[data-ui="site"] .home-side-ad__icon,
    html[data-ui="site"] .nav,
    html[data-ui="admin"] .admin-header,
    html[data-ui="admin"] .admin-menu-toggle,
    html[data-ui="admin"] .settings-savebar {
        background-color: rgba(255,255,255,.94);
    }
}

/* --------------------------------------------------------------------------
   v1.14.3 — adjustable glass transparency
   -------------------------------------------------------------------------- */
html[data-ui="site"] .topbar {
    background: linear-gradient(180deg, var(--glass-surface-strong), var(--glass-surface));
}
html[data-ui="site"] .header-account,
html[data-ui="site"] .nav-toggle,
html[data-ui="site"] .home-promo-rail__control,
html[data-ui="site"] .scroll-to-top {
    border-color: color-mix(in srgb, var(--c-accent) 14%, var(--glass-border));
    background: linear-gradient(180deg, var(--glass-surface-strong), var(--glass-tint));
}
html[data-ui="site"] .home-promo-rail__control {
    box-shadow: 0 9px 24px rgba(26, 16, 35, .075), inset 0 1px 0 var(--glass-border);
}
html[data-ui="site"] .home-side-ad:not(.has-media) {
    border-color: color-mix(in srgb, var(--c-accent) 14%, var(--glass-border));
    background:
        radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--c-accent) 11%, transparent), transparent 42%),
        linear-gradient(155deg, var(--glass-surface-strong), var(--glass-tint));
}
html[data-ui="site"] .home-side-ad__icon {
    border-color: color-mix(in srgb, var(--c-accent) 15%, var(--glass-border));
    background: linear-gradient(180deg, var(--glass-surface-strong), var(--glass-tint));
}

@media (max-width: 860px) {
    html[data-ui="site"] .nav {
        border-color: color-mix(in srgb, var(--c-accent) 14%, var(--glass-border));
        background: linear-gradient(180deg, var(--glass-surface-strong), var(--glass-surface));
    }
}

html[data-ui="admin"] .glass-transparency-field {
    grid-column: 1 / -1;
}
html[data-ui="admin"] .glass-transparency-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 68px;
    align-items: center;
    gap: 12px;
}
html[data-ui="admin"] .glass-transparency-control input[type="range"] {
    inline-size: 100%;
    accent-color: var(--admin-accent);
}
html[data-ui="admin"] .glass-transparency-control output {
    min-block-size: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: var(--c-surface-soft);
    color: var(--admin-ink);
    font-weight: 850;
}
html[data-ui="admin"] .glass-transparency-preview {
    position: relative;
    min-block-size: 112px;
    margin-block-start: 8px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid var(--admin-border);
    border-radius: 16px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 18%, transparent), transparent 52%),
        repeating-linear-gradient(45deg, #eef3f2 0 16px, #fff 16px 32px);
}
html[data-ui="admin"] .glass-transparency-preview__back {
    position: absolute;
    inset-inline-start: 18px;
    inset-block-start: 15px;
    color: color-mix(in srgb, var(--admin-accent) 76%, var(--admin-ink));
    font-size: 1rem;
    font-weight: 900;
    transform: rotate(-5deg);
}
html[data-ui="admin"] .glass-transparency-preview__glass {
    position: relative;
    z-index: 1;
    min-inline-size: min(260px, calc(100% - 28px));
    min-block-size: 64px;
    display: grid;
    place-items: center;
    padding: 14px 22px;
    border: 1px solid rgba(255,255,255,.62);
    border-radius: 16px;
    background: rgba(255,255,255,var(--glass-preview-opacity, .58));
    color: var(--admin-ink);
    box-shadow: 0 12px 30px rgba(20,25,30,.08), inset 0 1px 0 rgba(255,255,255,.7);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    backdrop-filter: blur(14px) saturate(145%);
    font-weight: 850;
}

@media (max-width: 620px) {
    html[data-ui="admin"] .glass-transparency-control { grid-template-columns: minmax(0, 1fr) 58px; gap: 8px; }
}


/* --------------------------------------------------------------------------
   v1.14.4 — functional glass control and hard-clean promo rail edges
   -------------------------------------------------------------------------- */
/* The admin slider now changes both alpha and blur in its live preview, making
   the selected transparency immediately visible before saving. */
html[data-ui="admin"] .glass-transparency-preview__glass {
    background: rgba(255,255,255,var(--glass-preview-opacity, .58));
    -webkit-backdrop-filter: blur(var(--glass-preview-blur, 13px)) saturate(145%);
    backdrop-filter: blur(var(--glass-preview-blur, 13px)) saturate(145%);
    transition: background-color .12s linear, -webkit-backdrop-filter .12s linear, backdrop-filter .12s linear;
}

/* Runtime glass surfaces use the persisted variables directly. */
html[data-ui="site"] .topbar,
html[data-ui="site"] .header-account,
html[data-ui="site"] .nav-toggle,
html[data-ui="site"] .home-promo-rail__control,
html[data-ui="site"] .scroll-to-top,
html[data-ui="site"] .home-side-ad:not(.has-media),
html[data-ui="site"] .home-side-ad__icon {
    -webkit-backdrop-filter: blur(var(--glass-blur, 13px)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur, 13px)) saturate(150%);
}
@media (max-width: 860px) {
    html[data-ui="site"] .nav {
        -webkit-backdrop-filter: blur(var(--glass-blur, 13px)) saturate(155%);
        backdrop-filter: blur(var(--glass-blur, 13px)) saturate(155%);
    }
}

/* Do not fade or matte the left/right edges of the moving promo rail. The
   viewport clips normally, with no gradient mask in Chromium or WebKit. */
html[data-ui="site"] .home-promo-rail,
html[data-ui="site"] .home-promo-rail-shell .home-promo-rail {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* --------------------------------------------------------------------------
   v1.14.5 — full-width promo viewport with non-reserved edge controls
   -------------------------------------------------------------------------- */
/* On desktop the arrows no longer consume dedicated grid columns. The rail
   itself gets the full available width, while the controls float outside it.
   This removes the empty/hidden-looking strips on both sides. */
@media (min-width: 1180px) {
    html[data-ui="site"] .home-promo-rail-shell {
        position: relative;
        display: block;
        inline-size: min(1180px, calc(100% - 150px));
        overflow: visible;
    }
    html[data-ui="site"] .home-promo-rail-shell .home-promo-rail {
        inline-size: 100% !important;
        margin: 0;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
    html[data-ui="site"] .home-promo-rail__control {
        position: absolute;
        inset-block-start: 50%;
        z-index: 8;
        translate: 0 -50% !important;
        margin: 0;
    }
    html[data-ui="site"] .home-promo-rail__control--prev {
        left: -70px;
        right: auto;
    }
    html[data-ui="site"] .home-promo-rail__control--next {
        right: -70px;
        left: auto;
    }
}

/* Medium desktop widths keep the established 3-column shell but remove the
   exaggerated outward translation that could leave a visually empty gutter. */
@media (min-width: 981px) and (max-width: 1179px) {
    html[data-ui="site"] .home-promo-rail__control--prev,
    html[data-ui="site"] .home-promo-rail__control--next {
        translate: none !important;
    }
}

/* --------------------------------------------------------------------------
   v1.14.6 — overlay rail controls without visual clipping + reliable ranges
   -------------------------------------------------------------------------- */
/* Desktop rail: the viewport owns the full row and arrows float ON TOP of it.
   Cards therefore remain visible below the arrow buttons instead of ending
   before a reserved/empty control column. There is no mask/fade/clip styling. */
@media (min-width: 981px) {
    html[data-ui="site"] .home-promo-rail-shell {
        position: relative !important;
        display: block !important;
        inline-size: min(1320px, 100%) !important;
        max-inline-size: 100% !important;
        overflow: visible !important;
        justify-self: center;
    }

    html[data-ui="site"] .home-promo-rail-shell .home-promo-rail {
        inline-size: 100% !important;
        max-inline-size: none !important;
        margin: 0 !important;
        padding-inline: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-mask: none !important;
        mask: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        clip-path: none !important;
    }

    html[data-ui="site"] .home-promo-rail-shell .home-promo-rail__track {
        padding-inline: 0 !important;
    }

    html[data-ui="site"] .home-promo-rail__control {
        position: absolute !important;
        inset-block-start: 50% !important;
        z-index: 12 !important;
        margin: 0 !important;
        translate: 0 -50% !important;
    }

    html[data-ui="site"] .home-promo-rail__control--prev {
        left: 14px !important;
        right: auto !important;
    }

    html[data-ui="site"] .home-promo-rail__control--next {
        right: 14px !important;
        left: auto !important;
    }
}

/* Admin range controls: use one explicit cross-browser implementation rather
   than relying on the browser's inconsistent native RTL range rendering. */
html[data-ui="admin"] input[type="range"] {
    --range-progress: 50%;
    -webkit-appearance: none !important;
    appearance: none !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    block-size: 38px !important;
    min-block-size: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    direction: ltr !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: pan-y;
    position: relative;
    z-index: 3;
}

html[data-ui="admin"] input[type="range"]::-webkit-slider-runnable-track {
    block-size: 8px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--admin-accent) 0,
        var(--admin-accent) var(--range-progress),
        color-mix(in srgb, var(--admin-border) 78%, #eef3f2) var(--range-progress),
        color-mix(in srgb, var(--admin-border) 78%, #eef3f2) 100%
    );
    box-shadow: inset 0 1px 2px rgba(14, 28, 31, .07);
}

html[data-ui="admin"] input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 22px;
    block-size: 22px;
    margin-block-start: -7px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--admin-accent);
    box-shadow: 0 2px 8px rgba(18, 32, 34, .18), 0 0 0 1px color-mix(in srgb, var(--admin-accent) 34%, transparent);
    cursor: grab;
}

html[data-ui="admin"] input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }

html[data-ui="admin"] input[type="range"]::-moz-range-track {
    block-size: 8px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--admin-border) 78%, #eef3f2);
    box-shadow: inset 0 1px 2px rgba(14, 28, 31, .07);
}

html[data-ui="admin"] input[type="range"]::-moz-range-progress {
    block-size: 8px;
    border-radius: 999px;
    background: var(--admin-accent);
}

html[data-ui="admin"] input[type="range"]::-moz-range-thumb {
    inline-size: 16px;
    block-size: 16px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--admin-accent);
    box-shadow: 0 2px 8px rgba(18, 32, 34, .18), 0 0 0 1px color-mix(in srgb, var(--admin-accent) 34%, transparent);
    cursor: grab;
}

html[data-ui="admin"] input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--admin-accent) 18%, transparent), 0 2px 8px rgba(18,32,34,.18);
}
html[data-ui="admin"] input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--admin-accent) 18%, transparent), 0 2px 8px rgba(18,32,34,.18);
}
html[data-ui="admin"] input[type="range"]:disabled { opacity: .48; cursor: not-allowed !important; }

/* Give the value readout enough space so users always see the change while
   dragging, including the glass slider and both speed sliders. */
html[data-ui="admin"] .promo-speed-field small,
html[data-ui="admin"] .glass-transparency-field small {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
html[data-ui="admin"] .promo-speed-field output,
html[data-ui="admin"] .glass-transparency-control output {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   v1.14.7 — more readable mobile navigation glass
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    html[data-ui="site"] .nav {
        border-color: color-mix(in srgb, var(--c-accent) 16%, rgba(255,255,255,.9));
        background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,247,252,.92));
        box-shadow: 0 22px 50px rgba(28, 18, 38, .14), inset 0 1px 0 rgba(255,255,255,.9);
        -webkit-backdrop-filter: blur(18px) saturate(145%);
        backdrop-filter: blur(18px) saturate(145%);
    }
    html[data-ui="site"] .nav a {
        color: color-mix(in srgb, var(--c-ink-900) 96%, var(--c-accent));
    }
    html[data-ui="site"] .nav a:hover,
    html[data-ui="site"] .nav a:focus-visible,
    html[data-ui="site"] .nav a[aria-current="page"] {
        background: color-mix(in srgb, var(--c-accent) 9%, rgba(255,255,255,.94));
    }
}

/* v1.14.7 — visible volume-pricing feedback in storefront calculators */
html[data-ui="site"] .home-quote-result__meta {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 900px) {
    html[data-ui="site"] .home-quote-result__meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 680px) {
    html[data-ui="site"] .home-quote-result__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    html[data-ui="site"] .home-quote-result__meta span:first-child {
        grid-column: auto;
    }
    html[data-ui="site"] .home-quote-result__meta span:last-child {
        grid-column: 1 / -1;
    }
}

/* --------------------------------------------------------------------------
   v1.14.8 — mobile hamburger anchored to the physical left edge
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    /* The storefront is RTL, but the menu trigger is intentionally anchored to
       the physical left side of the header. The auto start-margin consumes the
       remaining flex space so the trigger no longer sits beside the account CTA. */
    html[dir="rtl"][data-ui="site"] .topbar__inner > .nav-toggle {
        margin-inline-start: auto;
        flex: 0 0 auto;
    }
}



/* --------------------------------------------------------------------------
   v1.14.10 — order calculator row alignment across desktop and mobile
   -------------------------------------------------------------------------- */
/* The pages field includes helper text while copies does not. The generic
   order-card grid uses end alignment, which made controls in the same row
   start at different vertical positions on desktop. Keep this calculator grid
   top-aligned at every viewport size instead of fixing only the mobile media
   query. */
html[data-ui="site"] .order-card--calculator .order-print-fields {
    align-items: start;
}

html[data-ui="site"] .order-card--calculator .order-print-fields > .field {
    align-self: start;
    align-content: start;
}

/* Give the three first-row labels the same label box so their controls share
   the exact same baseline even though one label contains a status pill and the
   paper selector uses a fieldset legend. */
html[data-ui="site"] .order-card--calculator .order-print-fields > .field > span {
    min-block-size: 26px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

html[data-ui="site"] .order-card--calculator .order-print-fields > .field--paper-choice > legend {
    min-block-size: 26px;
    margin-block-end: 9px;
    line-height: 26px;
}