/* Shared Taban color system. Load after style.css and responsive.css.
   Existing layouts, Payda, breakpoints and interaction hooks remain in place. */
body:is(.taban-page, .taban-homepage) {
    --taban-bg: #f6ead0;
    --taban-surface: #fffdf7;
    --taban-surface-soft: #f2dfb8;
    --taban-primary: #d7a515;
    --taban-primary-hover: #be8e0c;
    --taban-primary-soft: #f2d982;
    --taban-text: #30231e;
    --taban-text-muted: #75665d;
    --taban-green: #424530;
    --taban-green-hover: #333826;
    --taban-green-soft: #e8ecdf;
    --taban-taupe: #a58e74;
    --taban-border: #e5d5b4;
    --taban-surface-inverse: var(--taban-green);
    --taban-text-inverse: var(--taban-surface);
    --taban-text-inverse-muted: var(--taban-green-soft);
    --taban-section-calm: var(--taban-green-soft);
    --taban-border-calm: color-mix(in srgb, var(--taban-green) 24%, var(--taban-surface));
    --taban-border-inverse: color-mix(in srgb, var(--taban-surface) 28%, transparent);
    --taban-on-primary: var(--taban-text);
    --taban-on-green: #fff;
    --taban-border-strong: #bfa77c;
    --taban-ink-hover: #503c2f;
    --taban-link: #71500b;
    --taban-logo-paper: #fff1d2;
    --taban-radius: 12px;
    --taban-shadow: 0 3px 12px rgb(48 35 30 / 6%);
    --taban-shadow-raised: 0 12px 30px rgb(48 35 30 / 12%);
    --taban-focus-glow: rgb(113 80 11 / 20%);

    --brand-primary: var(--taban-primary);
    --brand-background: var(--taban-bg);
    --brand-text: var(--taban-text);

    --brand-secondary: var(--taban-green);

    /* Migration adapter: old components consume Taban values, never vice versa.
       Primary fills use mustard; dark aliases keep small links readable.
       Secondary stays brown globally; fern is applied only to selected roles.
       Status colors, spacing and layout tokens retain their existing semantics. */
    --cosmetics-primary: var(--taban-primary);
    --cosmetics-primary-strong: var(--taban-primary);
    --cosmetics-primary-hover: var(--taban-primary-hover);
    --cosmetics-primary-active: var(--taban-link);
    --cosmetics-primary-dark: var(--taban-link);
    --cosmetics-primary-muted: var(--taban-link);
    --cosmetics-primary-soft: var(--taban-surface-soft);
    --cosmetics-secondary: var(--taban-ink-hover);
    --cosmetics-secondary-hover: var(--taban-text);
    --cosmetics-secondary-active: var(--taban-text);
    --cosmetics-secondary-dark: var(--taban-text);
    --cosmetics-secondary-soft: var(--taban-surface-soft);
    --cosmetics-accent: var(--taban-green);
    --cosmetics-accent-hover: var(--taban-green-hover);
    --cosmetics-accent-strong: var(--taban-green);
    --cosmetics-highlight: var(--taban-primary-soft);
    --cosmetics-bg: var(--taban-bg);
    --cosmetics-page-bg: var(--taban-bg);
    --cosmetics-surface: var(--taban-surface);
    --cosmetics-surface-soft: var(--taban-surface);
    --cosmetics-surface-strong: var(--taban-surface-soft);
    --cosmetics-soft: var(--taban-surface-soft);
    --cosmetics-soft-pink: var(--taban-surface);
    --cosmetics-footer-bg: var(--taban-section-calm);
    --cosmetics-footer-deep: var(--taban-surface-inverse);
    --cosmetics-footer-deep-raised: var(--taban-green-hover);
    --cosmetics-text: var(--taban-text);
    --cosmetics-text-muted: var(--taban-text-muted);
    --cosmetics-text-subtle: var(--taban-text-muted);
    --cosmetics-muted: var(--taban-text-muted);
    --cosmetics-text-inverse: var(--taban-surface);
    --cosmetics-border: var(--taban-border);
    --cosmetics-border-strong: var(--taban-border-strong);
    --cosmetics-disabled-bg: var(--taban-bg);
    --cosmetics-disabled-border: var(--taban-border);
    --cosmetics-disabled-text: var(--taban-text-muted);
    --cosmetics-focus-ring: var(--taban-link);
    --cosmetics-focus-glow: var(--taban-focus-glow);
    --cosmetics-focus-shadow: 0 0 0 3px var(--taban-focus-glow);
    --cosmetics-shadow-sm: var(--taban-shadow);
    --cosmetics-shadow-md: var(--taban-shadow);
    --cosmetics-shadow-lg: var(--taban-shadow-raised);
    --cosmetics-shadow-floating: var(--taban-shadow-raised);
    --cosmetics-success: var(--taban-green);
    --cosmetics-success-bg: var(--taban-green-soft);
    --cosmetics-success-border: var(--taban-taupe);
    --cosmetics-warning: var(--taban-link);
    --cosmetics-warning-bg: var(--taban-primary-soft);
    --cosmetics-warning-border: var(--taban-border-strong);
    --cosmetics-info: var(--taban-green);
    --cosmetics-info-bg: var(--taban-green-soft);
    --cosmetics-info-border: var(--taban-border);
    --main-color-one: var(--taban-primary);
    --main-color-one-hover: var(--taban-primary-hover);
    --main-color-green: var(--taban-green);
    --main-color-green-hover: var(--taban-green-hover);
    --main-color-two-shadow: var(--taban-focus-glow);
    --main-color-three-shadow: var(--taban-focus-glow);

    background-color: var(--taban-bg);
    color: var(--taban-text);
}

/* Opaque paper surfaces replace the legacy tinted glass header. */
body.taban-page .cosmetics-header,
body.taban-page .cosmetics-header-nav {
    background: var(--taban-surface);
    border-color: var(--taban-border);
    box-shadow: none;
    backdrop-filter: none;
}

/* Transparent client-logo variants share the existing responsive logo slots.
   Keep the header heights and image proportions; no framing or letter cropping. */
body.taban-page :is(.taban-brand, .cosmetics-header-brand,
    .cosmetics-header-offcanvas-brand, .cosmetics-footer-logo) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

body.taban-page :is(.cosmetics-header-brand, .cosmetics-header-offcanvas-brand) img {
    display: block;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
}

body.taban-page .cosmetics-footer-logo {
    width: 150px;
    min-height: 0;
    padding: 0;
}

body.taban-page .cosmetics-footer-logo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

body.taban-page .cosmetics-auth-brand .cosmetics-auth-logo {
    width: auto;
    object-fit: contain;
}

body.taban-page .cosmetics-invoice-brand img {
    object-fit: contain;
}

body.taban-page .cosmetics-header-search {
    background: var(--taban-bg);
    border-radius: 14px;
}

body.taban-page .cosmetics-header-search:focus-within {
    background: var(--taban-surface);
    border-color: var(--taban-link);
}

body.taban-page :is(.cosmetics-header-account, .cosmetics-header-cart,
    .cosmetics-header-icon-button, .cosmetics-header-offcanvas .offcanvas-header) {
    background-color: var(--taban-surface);
}

body.taban-page :is(.cosmetics-header-search-submit, .cosmetics-header-cart-icon,
    .cosmetics-header-category-trigger) {
    background-color: var(--taban-primary);
    color: var(--taban-text);
}

body.taban-page .cosmetics-header-category-trigger span {
    color: inherit;
}

body.taban-page :is(.cosmetics-header-search-submit, .cosmetics-header-category-trigger):hover,
body.taban-page .cosmetics-header-category-trigger:focus-visible {
    background-color: var(--taban-primary-hover);
    color: var(--taban-text);
}

body.taban-page .cosmetics-header-support-icon {
    background: var(--taban-bg);
    color: var(--taban-link);
}

body.taban-page :is(.cosmetics-header-account, .cosmetics-header-cart,
    .cosmetics-header-icon-button):hover {
    border-color: var(--taban-border-strong);
    background-color: var(--taban-bg);
}

body.taban-page :is(a, button, input):focus-visible {
    outline: 2px solid var(--taban-link);
    outline-offset: 3px;
}

/* Shared header finish: keep the approved grid and mobile control placement. */
@media (min-width: 992px) {
    body.taban-page .cosmetics-header-top { min-height: 84px; padding-block: 10px; }
    body.taban-page .cosmetics-header-nav { top: 84px; }
    body.taban-page .cosmetics-header-nav-inner { min-height: 56px; }
    body.taban-page .cosmetics-header-links { gap: 6px; }
}
body.taban-page .cosmetics-header-search-submit { border-radius: 11px; }
body.taban-page .cosmetics-header-support-icon { border-radius: 13px; }
body.taban-page :is(.cosmetics-header-account, .cosmetics-header-cart) { border-radius: 13px; }
body.taban-page :is(.cosmetics-header-support small, .cosmetics-header-cart-copy small) {
    color: var(--taban-text-muted);
    font-size: 11px;
    line-height: 1.35;
}
body.taban-page .cosmetics-header-cart-copy strong { font-size: 12px; }
body.taban-page .cosmetics-header-link::after { background: var(--taban-green); }
body.taban-page .cosmetics-header-link[aria-current="page"] { color: var(--taban-green); }

/* Shared atmosphere only: retain all section structures and placeholder artwork. */
body.taban-page .main-slider {
    background-color: var(--taban-bg);
}

body.taban-page :is(.product-box, .blog-item, .mini-box) {
    background-color: var(--taban-surface);
    border-color: var(--taban-border);
    box-shadow: var(--taban-shadow);
}

body.taban-page .section-title-title .Dottedsquare {
    background-image: none;
}

/* Remove fixed pink/lilac paint that cannot inherit the token adapter. */
body.taban-page .cosmetics-special-offer-frame {
    background: var(--taban-section-calm);
    border-color: var(--taban-border-calm);
    box-shadow: none;
}

body.taban-page .cosmetics-mobile-nav-link:is(.is-active, [aria-current="page"]) .cosmetics-mobile-nav-icon {
    color: var(--taban-text);
}

/* Homepage hero and category browsing.
   Presentation-only legacy classes are replaced locally; Swiper hooks stay intact. */
.taban-homepage .taban-hero-slider {
    width: 100%;
    min-width: 0;
    height: 100%;
}

.taban-homepage .taban-hero-slide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 380px;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--taban-border);
    border-radius: 16px;
    background: var(--taban-surface);
}

.taban-homepage .taban-hero-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(24px, 2.6vw, 40px);
    text-align: start;
}

.taban-homepage .taban-hero-copy h1 {
    max-width: 13em;
    font-size: clamp(30px, 2.8vw, 42px);
    font-weight: 900;
    line-height: 1.6;
    text-wrap: balance;
}

.taban-homepage .taban-hero-copy h1 span {
    color: var(--taban-link);
}

.taban-homepage .taban-hero-copy p {
    margin: 18px 0 26px;
    color: var(--taban-text-muted);
    font-size: 16px;
    line-height: 1.95;
}

.taban-homepage .taban-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.taban-homepage .taban-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--taban-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.taban-homepage .taban-button .bi {
    font-size: 17px;
}

.taban-homepage .taban-button-primary {
    background-color: var(--taban-primary);
}

.taban-homepage .taban-button-primary:hover {
    background-color: var(--taban-primary-hover);
}

.taban-homepage .taban-button-secondary {
    border-color: var(--taban-green);
    background-color: var(--taban-green);
    color: var(--taban-on-green);
}

.taban-homepage .taban-button-secondary:is(:hover, :focus-visible) {
    border-color: var(--taban-green-hover);
    background-color: var(--taban-green-hover);
    color: var(--taban-on-green);
}

.taban-homepage .taban-button-secondary:focus-visible {
    outline: 3px solid var(--taban-green);
    outline-offset: 3px;
}

.taban-homepage .taban-button-primary:focus-visible {
    background-color: var(--taban-primary-hover);
}

.taban-homepage .taban-hero-media {
    position: relative;
    min-width: 0;
    min-height: 0;
    margin: 0;
    background: var(--taban-surface-soft);
}

.taban-homepage .taban-hero-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
}

.taban-homepage .taban-hero-placeholder-label {
    position: absolute;
    inset-inline: 24px;
    bottom: 28px;
    color: var(--taban-link);
    font-size: 13px;
    line-height: 1.8;
    text-align: center;
}

.taban-homepage .taban-categories {
    padding-block: 48px 52px;
    scroll-margin-top: 170px;
    background: var(--taban-bg);
}

.taban-homepage .taban-category-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 26px;
}

.taban-homepage .taban-category-heading h2 {
    font-size: clamp(23px, 2.2vw, 32px);
    font-weight: 900;
    line-height: 1.6;
    text-wrap: balance;
}

.taban-homepage .taban-category-view-all {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 12px;
    color: var(--taban-green);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 6px;
}

.taban-homepage .taban-category-view-all:is(:hover, :focus-visible) {
    color: var(--taban-green-hover);
}

.taban-homepage .taban-category-view-all:focus-visible {
    outline: 2px solid var(--taban-green);
    outline-offset: 3px;
}

/* Auto-fill keeps a partial final row aligned without depending on eight items.
   Minimum width gives four columns at desktop/laptop/tablet and two on mobile. */
.taban-homepage .taban-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(160px, calc((100% - 54px) / 4))), 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.taban-homepage .taban-category-grid > li {
    min-width: 0;
}

.taban-homepage .taban-category-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    padding: 8px;
    border: 1px solid var(--taban-border);
    border-radius: var(--taban-radius);
    background: var(--taban-surface);
    color: var(--taban-text);
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease;
}

/* Sage appears on the card being explored, leaving the resting grid cream. */
.taban-homepage .taban-category-card:is(:hover, :focus-visible) {
    border-color: var(--taban-green);
    background-color: var(--taban-green-soft);
}

.taban-homepage .taban-category-card:focus-visible {
    outline: 2px solid var(--taban-green);
    outline-offset: 3px;
}

.taban-homepage .taban-category-media {
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: 6px;
    background: var(--taban-bg);
}

.taban-homepage .taban-category-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.taban-homepage .taban-category-label {
    display: flex;
    min-height: 58px;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 8px 4px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
}

.taban-homepage .taban-category-label .bi {
    flex: none;
    color: var(--taban-green);
    font-size: 18px;
}

@media (max-width: 767px) {
    .taban-homepage .taban-hero-slide {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .taban-homepage .taban-hero-copy {
        padding: 26px 22px;
    }

    .taban-homepage .taban-hero-copy h1 {
        font-size: 30px;
        line-height: 1.6;
    }

    .taban-homepage .taban-hero-copy p {
        margin: 14px 0 22px;
        font-size: 15px;
    }

    .taban-homepage .taban-button {
        padding-inline: 12px;
    }

    .taban-homepage .taban-hero-media {
        aspect-ratio: 5 / 4;
    }

    .taban-homepage .taban-hero-placeholder-label {
        bottom: 16px;
        font-size: 12px;
    }

    .taban-homepage .taban-categories {
        padding-block: 32px 36px;
        scroll-margin-top: 144px;
    }

    .taban-homepage .taban-category-heading {
        gap: 4px;
        margin-bottom: 18px;
    }

    .taban-homepage .taban-category-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 144px), 1fr));
        gap: 12px;
    }

    .taban-homepage .taban-category-card {
        padding: 6px;
    }

    .taban-homepage .taban-category-label {
        min-height: 54px;
        padding-inline: 4px;
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .taban-homepage :is(.taban-button, .taban-category-card) {
        transition: none;
    }
}

/* Shared actions. Keep dark text on mustard in every interactive state.
   The legacy primary variables also paint small state markers and badges. */
body.taban-page :is(
    .cosmetics-btn-primary, .cosmetics-filter-submit, .cosmetics-product-add-to-cart,
    .cosmetics-product-action-cart, .cosmetics-cart-checkout, .cosmetics-checkout-submit,
    .cosmetics-address-continue, .cosmetics-auth-submit, .cosmetics-account-form-submit,
    .cosmetics-address-add, .cosmetics-account-address-add, .cosmetics-invoice-print,
    .cosmetics-payment-result-action.is-primary, .cosmetics-account-empty a,
    .cosmetics-address-empty button, .cosmetics-account-address-empty button,
    .cosmetics-footer-newsletter .btn
) {
    background-color: var(--taban-primary);
    border-color: var(--taban-primary);
    color: var(--taban-on-primary);
}

body.taban-page :is(
    .cosmetics-btn-primary, .cosmetics-filter-submit, .cosmetics-product-add-to-cart,
    .cosmetics-product-action-cart, .cosmetics-cart-checkout, .cosmetics-checkout-submit,
    .cosmetics-address-continue, .cosmetics-auth-submit, .cosmetics-account-form-submit,
    .cosmetics-address-add, .cosmetics-account-address-add, .cosmetics-invoice-print,
    .cosmetics-payment-result-action.is-primary, .cosmetics-account-empty a,
    .cosmetics-address-empty button, .cosmetics-account-address-empty button,
    .cosmetics-footer-newsletter .btn
):is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) {
    background-color: var(--taban-primary-hover);
    border-color: var(--taban-primary-hover);
    color: var(--taban-on-primary);
    box-shadow: var(--taban-shadow);
}

/* Required only to supersede existing utility/auth !important declarations. */
body.taban-page .main-color-one-bg,
body.taban-page .main-color-one-bg:is(:hover, :focus-visible),
body.taban-page .cosmetics-auth-submit,
body.taban-page .cosmetics-auth-submit:is(:hover, :focus-visible) {
    color: var(--taban-on-primary) !important;
}

body.taban-page .cosmetics-auth-submit:is(:hover, :focus-visible):not(:disabled) {
    background-color: var(--taban-primary-hover) !important;
}

body.taban-page :is(.main-color-one-bg, .cosmetics-btn-primary,
    .cosmetics-product-add-to-cart, .cosmetics-checkout-submit, .cosmetics-cart-checkout,
    .cosmetics-address-continue, .cosmetics-auth-submit) :where(span, i) {
    color: inherit;
}

body.taban-page :is(
    .cosmetics-quantity .is-increase, .cart-quantity-increase,
    .cosmetics-checkout-step.is-active .cosmetics-checkout-step-index,
    .checkout-headers ul li.active a span, .cosmetics-auth-steps li.is-active > span,
    .cosmetics-filter-trigger-count, .cosmetics-pagination-link.is-active,
    .cosmetics-blog-pagination .page-item.active .page-link,
    .cosmetics-account-order-pagination a[aria-current="page"]
) {
    color: var(--taban-on-primary);
}

/* Fern links the large brand surfaces to secondary actions and selected filters. */
body.taban-page .cosmetics-btn-secondary {
    background-color: var(--taban-green);
    border-color: var(--taban-green);
    color: var(--taban-on-green);
}

body.taban-page .cosmetics-btn-secondary:is(:hover, :focus-visible) {
    background-color: var(--taban-green-hover);
    border-color: var(--taban-green-hover);
    color: var(--taban-on-green);
}

body.taban-page .cosmetics-btn-secondary :where(span, i) {
    color: inherit;
}

body.taban-page :is(.cosmetics-filter-option, .cosmetics-filter-stock) .form-check-input:checked {
    background-color: var(--taban-green);
    border-color: var(--taban-green);
}

body.taban-page .cosmetics-filter-option:has(.form-check-input:checked) {
    color: var(--taban-green);
    background-color: var(--taban-green-soft);
}

body.taban-page .cosmetics-filter-price-slider .noUi-connect {
    background: var(--taban-green);
}

body.taban-page .cosmetics-filter-price-slider .noUi-handle {
    background-color: var(--taban-green);
    box-shadow: var(--taban-shadow);
}

body.taban-page :is(.cosmetics-catalog-heading-icon, .cosmetics-account-stat-icon.is-complete-order,
    .cosmetics-account-stat-icon.is-comment) {
    background-color: var(--taban-green-soft);
    border-color: var(--taban-border);
    color: var(--taban-green);
}

body.taban-page :is(.cosmetics-account-stat-icon.is-active-order, .cosmetics-account-stat-icon.is-favorite) {
    background-color: var(--taban-surface-soft);
    color: var(--taban-text);
}

/* Small text must not inherit mustard as a foreground on paper. */
body.taban-page :is(.cosmetics-search-context-meta i, .cosmetics-header-mobile-categories i,
    .cosmetics-account-section-header > a:hover) {
    color: var(--taban-link);
}

body.taban-page :is(.form-control, .form-select) {
    border-color: var(--taban-border);
    color: var(--taban-text);
}

body.taban-page :is(.form-control, .form-select):focus {
    border-color: var(--taban-link);
    box-shadow: 0 0 0 3px var(--taban-focus-glow);
}

body.taban-page :is(.form-control, .form-select)::placeholder {
    color: var(--taban-text-muted);
}

/* Targeted hard-coded legacy paint. No changes to sizing, imagery or layout. */
body.taban-page :is(.cosmetics-category-card-media, .cosmetics-special-offer-media,
    .cosmetics-cart-item-media, .cosmetics-account-address-header, .cosmetics-account-order-header) {
    background: var(--taban-bg);
    border-color: var(--taban-border);
}

body.taban-page :is(.cosmetics-product-detail-card, .cosmetics-product-review,
    .cosmetics-ticket-message.is-customer) {
    background-color: var(--taban-surface);
}

body.taban-page :is(.cosmetics-filter-option, .cosmetics-product-actions,
    .cosmetics-checkout-item-media, .cosmetics-special-offer-main,
    .cosmetics-footer-contact-strip, .cosmetics-footer-contact-icon, .cosmetics-footer-bottom) {
    border-color: var(--taban-border);
}

body.taban-page .cosmetics-checkout-step-index {
    background-color: var(--taban-surface-soft);
}

body.taban-page .cosmetics-checkout-choice > label::before {
    border-color: var(--taban-taupe);
}

body.taban-page .cosmetics-address-option > input:checked + .cosmetics-address-card {
    background: var(--taban-bg);
}

body.taban-page .cosmetics-product-rating-stars {
    color: var(--taban-taupe);
}

body.taban-page .cosmetics-account-comment-rating {
    color: var(--taban-link);
}

body.taban-page .cosmetics-ticket-message.is-support {
    border-color: var(--taban-green);
    background-color: var(--taban-green-soft);
}

body.taban-page .cosmetics-invoice-shell::before {
    background: var(--taban-primary);
}

/* Preserve the authentication image; replace only its pink/white color overlays. */
body.taban-page.cosmetics-auth-page {
    background-image: linear-gradient(color-mix(in srgb, var(--taban-bg) 88%, transparent),
        color-mix(in srgb, var(--taban-surface) 88%, transparent)),
        url('../image/cosmetics/auth-background.webp');
}

body.taban-page :is(.cosmetics-footer-contact-strip, .cosmetics-footer-main,
    .cosmetics-mobile-nav, .cosmetics-back-to-top) {
    box-shadow: var(--taban-shadow-raised);
}

body.taban-page .cosmetics-footer-back-to-top:hover {
    border-color: var(--taban-taupe);
}

body.taban-page .cosmetics-footer-newsletter .form-control::placeholder {
    color: var(--taban-text-muted);
}

body.taban-page .cosmetics-footer-newsletter .form-control:focus {
    box-shadow: 0 0 0 3px var(--taban-focus-glow);
}

body.taban-page .cosmetics-account-welcome::after {
    color: color-mix(in srgb, var(--taban-taupe) 14%, transparent);
}

body.taban-page .cosmetics-account-order-tabs button.active {
    box-shadow: var(--taban-shadow);
}

body.taban-page .cosmetics-product-main-media img {
    filter: drop-shadow(0 22px 24px rgb(48 35 30 / 13%));
}

body.taban-page .cosmetics-special-offer-stock {
    color: var(--taban-green);
    background-color: var(--taban-green-soft);
    border-color: var(--taban-border);
}

body.taban-page .cosmetics-special-offer-slide:focus-visible {
    box-shadow: inset 0 0 0 4px var(--taban-focus-glow);
}

/* Disabled and validation states stay distinct from enabled brand actions. */
body.taban-page :is(.cosmetics-product-add-to-cart, .cosmetics-auth-submit,
    .cosmetics-account-form-submit, .cosmetics-btn-primary):disabled,
body.taban-page .cosmetics-checkout-choice > input:disabled + label,
body.taban-page .cosmetics-cart-quantity :is(button, input):disabled {
    background-color: var(--taban-bg);
    border-color: var(--taban-border);
    color: var(--taban-text-muted);
}

body.taban-page .cosmetics-product-option .form-select option:disabled {
    color: var(--taban-text-muted);
}

body.taban-page :is(a, button, input, select, textarea) {
    -webkit-tap-highlight-color: var(--taban-focus-glow);
}

/* Remaining visible pink washes found by the computed-style audit. */
body.taban-page :is(.cosmetics-cart-heading-content, .cosmetics-cart-summary,
    .cosmetics-checkout-heading, .cosmetics-checkout-summary, .cosmetics-address-heading,
    .cosmetics-address-summary, .cosmetics-product-main-media, .cosmetics-product-purchase-card,
    .cosmetics-search-context, .cosmetics-checkout-item-media) {
    background: var(--taban-surface);
}

body.taban-page :is(.cosmetics-account-user, .cosmetics-account-welcome) {
    background: var(--taban-bg);
}

body.taban-page .cosmetics-payment-result.is-success .cosmetics-payment-result-status {
    background: var(--taban-green-soft);
}

body.taban-page .cosmetics-payment-result.is-success .cosmetics-payment-result-status::before,
body.taban-page .cosmetics-payment-result.is-success .cosmetics-payment-result-status::after {
    background-color: var(--taban-green-soft);
}

body.taban-page .cosmetics-payment-result.is-success .cosmetics-payment-result-message {
    border-color: var(--taban-border);
}

body.taban-page .form-check-input:checked {
    background-color: var(--taban-green);
    border-color: var(--taban-green);
}

body.taban-page .form-check-input:focus {
    border-color: var(--taban-green);
    box-shadow: 0 0 0 3px var(--taban-focus-glow);
}

body.taban-page .cosmetics-special-offer-meta .cosmetics-special-offer-stock.is-in-stock {
    color: var(--taban-green);
    background-color: var(--taban-green-soft);
    border-color: var(--taban-border);
}

/* A legacy mobile-footer rule uses !important for its purple shadow. */
body.taban-page .mobile-footer {
    box-shadow: var(--taban-shadow-raised) !important;
}

/* Foreground utilities need readable ink, independent of their fill counterparts. */
body.taban-page .main-color-one-color {
    color: var(--taban-link) !important;
}

body.taban-page .main-color-green-color {
    color: var(--taban-green);
}

body.taban-page .main-color-two-bg {
    color: var(--taban-surface) !important;
}

body.taban-page .cosmetics-auth-submit:disabled {
    background-color: var(--taban-bg) !important;
    color: var(--taban-text-muted) !important;
}

/* Older auth selectors read this alias with high-specificity !important rules.
   Bind the action role locally instead of escalating those selectors. */
body.taban-page .cosmetics-auth-submit {
    --cosmetics-primary-dark: var(--taban-primary-hover);
}

body.taban-page .cosmetics-auth-submit:disabled {
    --cosmetics-primary: var(--taban-bg);
    --cosmetics-primary-strong: var(--taban-bg);
    --cosmetics-primary-dark: var(--taban-bg);
}

/* Taban composition: fern anchors, sage browsing fields, ivory merchandise. */
body.taban-page .cosmetics-header-nav {
    border-bottom: 2px solid var(--taban-green);
}

body.taban-page .cosmetics-header-link:is(:hover, :focus-visible, .active) {
    color: var(--taban-green);
}

body.taban-page :is(.cosmetics-header-search, .cosmetics-header-offcanvas) {
    border-color: var(--taban-border-calm);
}

/* The photograph remains a separate light surface; no tint/filter on imagery. */
.taban-homepage .taban-hero-copy {
    background: var(--taban-surface-inverse);
    color: var(--taban-text-inverse);
}

.taban-homepage .taban-hero-copy h1 {
    color: var(--taban-text-inverse);
}

.taban-homepage .taban-hero-copy h1 span {
    color: var(--taban-primary-soft);
}

.taban-homepage .taban-hero-copy p {
    color: var(--taban-text-inverse-muted);
}

.taban-homepage .taban-hero-actions .taban-button-secondary {
    background: transparent;
    border-color: var(--taban-border-inverse);
    color: var(--taban-text-inverse);
}

.taban-homepage .taban-hero-actions .taban-button-secondary:is(:hover, :focus-visible) {
    background: var(--taban-green-hover);
    border-color: var(--taban-text-inverse);
}

.taban-homepage .taban-hero-actions .taban-button:focus-visible {
    outline: 2px solid var(--taban-text-inverse);
    outline-offset: 4px;
}

.taban-homepage .feature {
    background: var(--taban-surface);
}

.taban-homepage .taban-categories {
    background: var(--taban-section-calm);
    border-block: 1px solid var(--taban-border-calm);
}

.taban-homepage .taban-category-heading h2 {
    color: var(--taban-green);
}

.taban-homepage .taban-category-card {
    border-color: var(--taban-border-calm);
}

.taban-homepage .taban-category-card:is(:hover, :focus-visible) {
    border-color: var(--taban-green);
    background: var(--taban-surface);
}

.taban-homepage .product-group {
    background: var(--taban-surface);
}

.taban-homepage .product-group-item {
    background: var(--taban-section-calm);
    border: 1px solid var(--taban-border-calm);
}

.taban-homepage .blog-slider {
    background: var(--taban-surface);
    border-block: 1px solid var(--taban-border);
}

body.taban-page :is(.product-box, .blog-item, .mini-box) {
    box-shadow: none;
}

body.taban-page :is(.cosmetics-catalog-heading, .cosmetics-account-welcome,
    .cosmetics-cart-summary, .cosmetics-checkout-summary) {
    background-color: var(--taban-section-calm);
    border-color: var(--taban-border-calm);
}

body.taban-page :is(.form-control, .form-select):focus {
    border-color: var(--taban-green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--taban-green) 18%, transparent);
}

/* Shared footer: fern ground, ivory contact strip, chocolate newsletter. */
body.taban-page .cosmetics-footer-main {
    background: var(--taban-surface-inverse);
    border-color: var(--taban-border-inverse);
    border-radius: 20px;
    color: var(--taban-text-inverse);
    box-shadow: none;
}

body.taban-page .cosmetics-footer-contact-strip {
    background: var(--taban-surface);
    border-color: var(--taban-border);
    box-shadow: var(--taban-shadow);
}

body.taban-page .cosmetics-footer-contact-icon {
    background: var(--taban-primary-soft);
    color: var(--taban-text);
}

body.taban-page .cosmetics-footer-trust {
    background: transparent;
    border-color: var(--taban-border-inverse);
}

body.taban-page .cosmetics-footer-newsletter {
    background: var(--taban-text);
    border-color: var(--taban-text);
}

body.taban-page :is(.cosmetics-footer-description, .cosmetics-footer-link-group a,
    .cosmetics-footer-newsletter p) {
    color: var(--taban-text-inverse-muted);
}

body.taban-page :is(.cosmetics-footer-back-to-top, .cosmetics-footer-social a) {
    background: transparent;
    border-color: var(--taban-border-inverse);
    color: var(--taban-text-inverse);
}

body.taban-page :is(.cosmetics-footer-back-to-top, .cosmetics-footer-social a):hover {
    background: var(--taban-green-hover);
    border-color: var(--taban-primary-soft);
    color: var(--taban-primary-soft);
}

/* Legacy default-style.css assigns spans their own chocolate foreground. */
body.taban-page .cosmetics-footer-back-to-top :where(span, i) {
    color: inherit;
}

body.taban-page .cosmetics-footer-bottom p {
    color: var(--taban-text);
}

body.taban-page .cosmetics-footer-link-group a:hover {
    color: var(--taban-primary-soft);
}

body.taban-page .cosmetics-footer-main :is(a, button, input):focus-visible {
    outline: 2px solid var(--taban-primary-soft);
    outline-offset: 4px;
}

body.taban-page .cosmetics-footer-bottom {
    color: var(--taban-text);
    border-color: var(--taban-border-calm);
}

/* Restored timed promotion. Existing product/countdown/Swiper hooks are retained. */
.taban-homepage .taban-promotion {
    width: 100%;
    min-width: 0;
    border-radius: 16px;
    background: var(--taban-surface);
}

.taban-homepage .taban-promotion .product-box {
    border-color: var(--taban-border-calm);
    border-radius: 16px;
    background: var(--taban-surface);
}

.taban-homepage .taban-promotion .taban-promotion-empty {
    display: flex;
    min-height: 0;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.taban-homepage .taban-promotion-empty h2 {
    margin: 0 0 24px;
    color: var(--taban-green);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.8;
}

.taban-homepage .taban-promotion-empty > .bi {
    margin-bottom: 18px;
    color: var(--taban-green);
    font-size: 34px;
}

.taban-homepage .taban-promotion-empty p {
    margin: 0 0 10px;
    color: var(--taban-text);
    font-size: 14px;
    line-height: 1.9;
}

.taban-homepage .taban-promotion-empty .taban-promotion-note {
    color: var(--taban-text-muted);
    font-size: 12px;
}

.taban-homepage .taban-promotion-empty .taban-button {
    margin-top: 16px;
}

.taban-homepage .taban-promotion-product:focus-visible {
    outline: 2px solid var(--taban-green);
    outline-offset: -3px;
    border-radius: 16px;
}

.taban-homepage .taban-promotion .countdown-value {
    background: var(--taban-green);
    color: var(--taban-text-inverse);
}

.taban-homepage .taban-promotion .timer-label span {
    background: var(--taban-primary-soft);
    color: var(--taban-text);
}

.taban-homepage .taban-promotion .slide_progress-bar::after {
    background: var(--taban-primary);
}

.taban-homepage .taban-promotion.is-single-slide .swiper-progress-bar {
    display: none;
}

@media (max-width: 1199px) {
    .taban-homepage .taban-promotion .taban-promotion-empty {
        min-height: 220px;
        padding: 22px;
    }

    .taban-homepage .taban-promotion-empty h2 {
        margin-bottom: 10px;
    }

    .taban-homepage .taban-promotion-empty > .bi {
        display: none;
    }
}

/* Taban catalog: scoped to category.html; shared header/footer remain untouched. */
body.taban-category-page .cosmetics-catalog {
    padding-block: 26px 40px;
    background: var(--taban-surface);
}

body.taban-category-page .cosmetics-catalog-heading {
    position: relative;
    top: auto;
    z-index: auto;
    margin-bottom: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.taban-category-page .cosmetics-breadcrumb {
    margin-bottom: 18px;
    padding: 0 2px 18px;
    color: var(--taban-text-muted);
    background: transparent;
    border: 0;
    border-radius: 0;
}

.taban-category-page .cosmetics-breadcrumb :is(a, .active) {
    color: var(--taban-green);
}

.taban-category-page .cosmetics-collection-banner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
    min-height: 240px;
    border: 0;
    border-radius: 18px;
    background: var(--taban-green);
}

.taban-category-page .cosmetics-collection-banner-content {
    max-width: none;
    padding: 34px 40px;
}

.taban-category-page .cosmetics-collection-banner h1 {
    max-width: 26ch;
    color: var(--taban-surface);
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.6;
}

.taban-category-page .cosmetics-collection-banner p {
    max-width: 62ch;
    margin-top: 14px;
    color: var(--taban-green-soft);
    font-size: 15px;
}

.taban-category-page .taban-catalog-signature {
    display: flex;
    height: 100%;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 26px 36px;
    background: var(--taban-green-soft);
    color: var(--taban-green);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.65;
}

.taban-category-page .taban-catalog-signature > span {
    color: inherit;
}

.taban-category-page .taban-catalog-signature strong {
    color: var(--taban-text);
    text-decoration: underline;
    text-decoration-color: var(--taban-primary);
    text-decoration-thickness: 4px;
    text-underline-offset: 8px;
}

.taban-category-page .taban-catalog-signature .taban-catalog-signature-detail {
    margin-top: 20px;
    font-size: 12px;
    font-weight: 500;
}

.taban-category-page .taban-catalog-demo-note {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin: 12px 0 0;
    color: var(--taban-text-muted);
    font-size: 12px;
    line-height: 1.9;
}

.taban-category-page .cosmetics-catalog-layout {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 26px;
}

body.taban-category-page .cosmetics-filter-form {
    padding: 18px;
    border-color: var(--taban-border-calm);
    border-radius: 16px;
    background: var(--taban-green-soft);
    box-shadow: none;
}

.taban-category-page .cosmetics-filter-header {
    margin: -18px -18px 6px;
    padding: 20px 18px;
    border-radius: 15px 15px 0 0;
    background: var(--taban-green);
    color: var(--taban-surface);
}

.taban-category-page .cosmetics-filter-header h2 {
    color: var(--taban-surface);
    font-size: 19px;
}

.taban-category-page .cosmetics-filter-clear {
    color: var(--taban-surface);
    background: transparent;
    font-size: 11px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.taban-category-page .cosmetics-filter-clear:hover {
    color: var(--taban-primary-soft);
    background: transparent;
}

.taban-category-page .cosmetics-filter-group {
    padding-block: 8px;
    border-color: var(--taban-border-calm);
}

.taban-category-page .cosmetics-filter-toggle {
    min-height: 48px;
    padding-block: 12px;
    color: var(--taban-green);
}

.taban-category-page .cosmetics-filter-toggle span {
    color: inherit;
    font-weight: 800;
}

.taban-category-page .cosmetics-filter-option {
    min-height: 44px;
    margin-block: 4px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
}

body.taban-category-page .cosmetics-filter-option:has(.form-check-input:checked) {
    border-color: var(--taban-green);
    background: var(--taban-surface);
    color: var(--taban-green);
}

.taban-category-page .cosmetics-filter-option:has(.form-check-input:checked) > span span {
    color: var(--taban-green);
}

.taban-category-page .cosmetics-filter-count {
    background: transparent;
    color: var(--taban-text-muted);
}

.taban-category-page .cosmetics-filter-price-values .form-control {
    background: var(--taban-surface);
    color: var(--taban-text);
    border-color: var(--taban-border-calm);
}

.taban-category-page .cosmetics-filter-price-slider {
    margin-inline: 10px;
}

.taban-category-page .cosmetics-filter-stock {
    padding-block: 16px;
    border-block: 1px solid var(--taban-border-calm);
    color: var(--taban-text);
}

.taban-category-page .cosmetics-filter-submit {
    min-height: 48px;
    margin-top: 16px;
    box-shadow: none;
}

.taban-category-page .cosmetics-catalog-toolbar {
    min-height: 76px;
    margin-bottom: 20px;
    border-color: var(--taban-border-calm);
    background: var(--taban-green-soft);
    box-shadow: none;
}

.taban-category-page .cosmetics-catalog-sort .form-select {
    width: 180px;
    min-height: 44px;
    background-color: var(--taban-surface);
    border-color: var(--taban-border-calm);
}

.taban-category-page .cosmetics-results-count {
    background: transparent;
    color: var(--taban-green);
}

.taban-category-page .cosmetics-results-count strong {
    color: var(--taban-green);
    font-size: 18px;
}

.taban-category-page .cosmetics-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.taban-category-page .cosmetics-product-card {
    border-color: var(--taban-border-calm);
    border-radius: 14px;
    background: var(--taban-surface);
    box-shadow: none;
}

.taban-category-page .cosmetics-product-card:is(:hover, :focus-within) {
    border-color: var(--taban-green);
    box-shadow: none;
    transform: none;
}

.taban-category-page .cosmetics-product-card-top {
    position: static;
    min-height: 43px;
    padding: 10px 12px 0;
    background: var(--taban-surface);
}

.taban-category-page .cosmetics-product-discount {
    background: var(--taban-primary-soft);
    color: var(--taban-text);
    box-shadow: none;
}

.taban-category-page .cosmetics-product-stock.is-in-stock {
    background: var(--taban-green-soft);
    color: var(--taban-green);
    border-color: var(--taban-border-calm);
}

.taban-category-page .cosmetics-product-stock.is-out-of-stock {
    background: var(--taban-bg);
    color: var(--taban-text-muted);
    border-color: var(--taban-border);
}

.taban-category-page .cosmetics-product-media {
    position: relative;
    display: block;
    aspect-ratio: 6 / 5;
    padding: 0;
    background: var(--taban-surface);
}

.taban-category-page .cosmetics-product-media img {
    position: absolute;
    inset: 16px;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    max-height: none;
    object-fit: contain;
    border-radius: 4px;
}

.taban-category-page .cosmetics-product-body {
    padding: 16px;
    border-top: 1px solid var(--taban-border);
}

.taban-category-page .cosmetics-product-brand {
    color: var(--taban-text-muted);
    font-size: 11px;
}

.taban-category-page .cosmetics-product-title {
    min-height: 56px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.85;
}

.taban-category-page .cosmetics-product-pricing {
    grid-template-rows: auto 22px;
    align-content: end;
    min-height: 74px;
}

.taban-category-page .cosmetics-product-price {
    margin: 0;
    color: var(--taban-text);
    font-size: 18px;
    font-weight: 900;
}

.taban-category-page .cosmetics-product-old-price {
    color: var(--taban-text-muted);
}

body.taban-category-page .cosmetics-product-actions {
    min-height: 55px;
    gap: 10px;
    border-color: var(--taban-border-calm);
}

.taban-category-page .cosmetics-product-action {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: var(--taban-surface);
    color: var(--taban-green);
    border-color: var(--taban-border-calm);
}

.taban-category-page .cosmetics-product-action-cart {
    width: auto;
    flex: 1;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
}

.taban-category-page .cosmetics-product-action-cart span {
    color: inherit;
}

.taban-category-page .cosmetics-pagination {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--taban-border-calm);
}

.taban-category-page .cosmetics-pagination-link {
    min-width: 44px;
    min-height: 44px;
    border-color: var(--taban-border-calm);
    background: var(--taban-surface);
    color: var(--taban-green);
}

/* The shared mustard active-page treatment also anchors catalog navigation. */

.taban-category-page .cosmetics-pagination-link:not(.is-active, .is-disabled):hover {
    background: var(--taban-green-soft);
    border-color: var(--taban-green);
    color: var(--taban-green);
}

.taban-category-page .cosmetics-pagination-link.is-disabled {
    background: var(--taban-bg);
    color: var(--taban-text-muted);
    opacity: 1;
}

.taban-category-page .cosmetics-pagination-link span {
    color: inherit;
}

body.taban-category-page .cosmetics-catalog :is(a, button, input, select):focus-visible {
    outline: 2px solid var(--taban-green);
    outline-offset: 3px;
}

body.taban-category-page .cosmetics-filter-header :is(button, a):focus-visible {
    outline-color: var(--taban-primary-soft);
}

@media (max-width: 1199px) {
    .taban-category-page .cosmetics-catalog-layout {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 20px;
    }

    .taban-category-page .cosmetics-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .taban-category-page .cosmetics-catalog-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .taban-category-page .cosmetics-filter-panel.offcanvas-lg {
        background: var(--taban-green-soft);
    }

    body.taban-category-page .cosmetics-filter-form {
        display: flex;
        height: 100%;
        flex-direction: column;
        padding: 0 18px calc(18px + env(safe-area-inset-bottom));
        overflow: hidden;
        border: 0;
        border-radius: 0;
    }

    .taban-category-page .cosmetics-filter-header {
        position: static;
        flex-shrink: 0;
        margin: 0 -18px;
        border-radius: 0;
        backdrop-filter: none;
    }

    .taban-category-page .taban-filter-sections {
        min-height: 0;
        flex: 1;
        overflow-y: auto;
        margin-inline: -18px;
        padding: 6px 18px 18px;
    }

    .taban-category-page .cosmetics-filter-submit {
        position: static;
        flex-shrink: 0;
        margin-top: 12px;
    }

    .taban-category-page .cosmetics-filter-header .btn-close {
        filter: invert(1);
        opacity: 1;
    }

    .taban-category-page .cosmetics-filter-trigger {
        background: var(--taban-green);
        border-color: var(--taban-green);
        color: var(--taban-surface);
    }

    .taban-category-page .cosmetics-filter-trigger > span:first-of-type {
        color: inherit;
    }

    .taban-category-page .cosmetics-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .taban-category-page .cosmetics-collection-banner {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .taban-category-page .cosmetics-collection-banner-content {
        padding: 22px;
    }

    .taban-category-page .cosmetics-collection-banner h1 {
        font-size: 26px;
    }

    .taban-category-page .cosmetics-collection-banner p {
        font-size: 14px;
    }

    .taban-category-page .taban-catalog-signature {
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        padding: 10px 22px;
        font-size: 21px;
    }

    .taban-category-page .taban-catalog-signature-detail {
        display: none;
    }

    .taban-category-page .cosmetics-catalog-toolbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .taban-category-page .cosmetics-catalog-sort {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: space-between;
    }

    .taban-category-page .cosmetics-catalog-sort .form-select {
        width: min(180px, 65%);
    }

    .taban-category-page .cosmetics-results-count {
        justify-self: end;
    }

    .taban-category-page .cosmetics-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .taban-category-page .cosmetics-product-card-top {
        gap: 4px;
        padding: 8px 8px 0;
    }

    .taban-category-page .cosmetics-product-media {
        aspect-ratio: 1;
    }

    .taban-category-page .cosmetics-product-media img {
        inset: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
    }

    .taban-category-page .cosmetics-product-body {
        padding: 10px;
    }

    .taban-category-page .cosmetics-product-title {
        min-height: 50px;
        font-size: 13px;
    }

    .taban-category-page .cosmetics-product-price {
        font-size: 15px;
    }

    .taban-category-page .cosmetics-product-action-cart {
        gap: 4px;
        font-size: 12px;
    }

    .taban-category-page .cosmetics-pagination ul {
        gap: 5px;
        flex-wrap: wrap;
    }
}

/* Reusable category masthead: these roles never recolor the listing or shell. */
.taban-category-page [data-category-design="taban"] {
    --category-hero-bg: var(--taban-green);
    --category-hero-ink: var(--taban-surface);
    --category-hero-copy: var(--taban-green-soft);
    --category-hero-media: var(--taban-green-soft);
    --category-hero-detail: var(--taban-green);
    background: var(--category-hero-bg);
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.taban-category-page [data-hero-tone="chocolate"] {
    --category-hero-bg: var(--taban-text);
    --category-hero-copy: var(--taban-surface-soft);
    --category-hero-media: var(--taban-bg);
    --category-hero-detail: var(--taban-text);
}

.taban-category-page [data-hero-tone="sage"] {
    --category-hero-bg: var(--taban-green-soft);
    --category-hero-ink: var(--taban-green);
    --category-hero-copy: var(--taban-text);
    --category-hero-media: var(--taban-surface);
}

.taban-category-page [data-hero-tone="cream"] {
    --category-hero-bg: var(--taban-bg);
    --category-hero-ink: var(--taban-text);
    --category-hero-copy: var(--taban-text);
    --category-hero-media: var(--taban-green-soft);
}

.taban-category-page [data-category-design="taban"] h1 {
    color: var(--category-hero-ink);
}

.taban-category-page [data-category-design="taban"] p {
    color: var(--category-hero-copy);
}

.taban-category-page .taban-category-hero-media {
    position: relative;
    min-width: 0;
    min-height: 240px;
    background: var(--category-hero-media);
}

.taban-category-page .taban-category-hero-picture {
    position: absolute;
    inset: 0;
}

.taban-category-page .taban-category-hero-picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.taban-category-page .taban-catalog-signature {
    background: var(--category-hero-media);
    color: var(--category-hero-detail);
}

.taban-category-page .taban-category-hero-media [hidden] {
    display: none;
}

@media (max-width: 767px) {
    .taban-category-page [data-category-design="taban"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .taban-category-page .taban-category-hero-media {
        min-height: 0;
        aspect-ratio: 2 / 1;
    }

    .taban-category-page .taban-catalog-signature {
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* Homepage review content: temporary photography and explicitly illustrative data. */

.taban-homepage .taban-promotion-disclosure {
    margin: 0 0 10px;
    color: var(--taban-text);
    font-size: 14px;
    font-weight: 800;
}

.taban-homepage .taban-promotion-disclosure span,
.taban-homepage .taban-demo-price-label {
    display: block;
    color: var(--taban-text-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.8;
}

.taban-homepage .taban-promotion .product-box {
    padding: 16px;
}

.taban-homepage .taban-promotion .product-image img {
    width: 100%;
    height: 180px;
    object-fit: contain;
}

.taban-homepage .taban-demo-clock {
    color: var(--taban-text-muted);
    font-size: 11px;
    min-height: 22px;
}

.taban-homepage .taban-collection-banner {
    overflow: hidden;
    border: 1px solid var(--taban-border);
}

.taban-homepage .taban-collection-banner a {
    display: block;
    background: var(--taban-text);
    color: var(--taban-surface);
}

.taban-homepage .taban-collection-banner img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 1;
    object-fit: cover;
}

.taban-homepage .taban-banner-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 22px;
    color: inherit;
}

.taban-homepage .taban-banner-caption :is(strong, span, i) {
    color: inherit;
}

.taban-homepage .taban-banner-caption strong { font-size: 19px; }
.taban-homepage .taban-banner-caption > span { font-size: 13px; }
.taban-homepage .banner .col-md-6:nth-child(2) .taban-collection-banner a {
    background: var(--taban-green-soft);
    color: var(--taban-text);
}

.taban-homepage .product-group-link img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
}

.taban-homepage .blog-item .image img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.taban-homepage .cosmetics-guide-card-link {
    min-height: 190px;
    padding-inline: 12px;
}

.taban-homepage :is(.cosmetics-home-section-heading, .cosmetics-special-offer-header) {
    position: relative;
    top: auto;
    z-index: auto;
}

.taban-homepage .taban-collection-banner a:focus-visible {
    outline-offset: -4px;
    outline-color: var(--taban-primary);
}

.taban-homepage .main-slider > .container-fluid > .row > .taban-promotion-slot {
    flex-direction: column;
}

.taban-homepage .taban-promotion .product-title {
    display: block;
}

.taban-homepage .taban-promotion .product-timer .timer-label {
    background: var(--taban-primary-soft);
}

.taban-homepage .taban-promotion .taban-demo-price-label {
    margin: 4px 0 0;
}

.taban-homepage .taban-promotion .swiper-progress-bar {
    position: relative;
    top: auto;
    width: calc(100% - 32px);
    margin: 8px auto;
}

/* Unified editorial hero: full-bleed photo with a feathered RTL reading area. */
.taban-homepage .main-slider > .container-fluid > .row > .col-xl-9 {
    display: block;
    height: auto;
}

.taban-homepage .taban-hero-slider,
.taban-homepage #homeSlider,
.taban-homepage #homeSlider .swiper-wrapper,
.taban-homepage #homeSlider .swiper-slide {
    height: auto;
}

.taban-homepage .taban-hero-slide {
    position: relative;
    isolation: isolate;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 540px;
    height: auto;
    border: 0;
    background: var(--taban-green);
}

.taban-homepage .taban-hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    aspect-ratio: auto;
}

.taban-homepage .taban-hero-media img { object-position: left center; }

.taban-homepage .taban-hero-slide::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(270deg,
        rgb(51 56 38 / 72%) 0%,
        rgb(66 69 48 / 64%) 39%,
        rgb(66 69 48 / 30%) 54%,
        rgb(66 69 48 / 0%) 76%);
    pointer-events: none;
}

.taban-homepage .taban-hero-copy {
    width: 53%;
    padding: clamp(28px, 3vw, 46px);
    background: transparent;
}

.taban-homepage .taban-hero-copy h1 {
    max-width: 100%;
    font-size: clamp(34px, 3vw, 44px);
    line-height: 1.65;
}

.taban-homepage .taban-hero-copy p {
    color: var(--taban-surface);
}

.taban-homepage .taban-hero-actions .taban-button-secondary {
    background: rgb(48 35 30 / 18%);
    border-color: var(--taban-primary-soft);
}


@media (min-width: 768px) and (max-width: 1199px) {
    .taban-homepage .taban-hero-slide { min-height: 440px; }
    .taban-homepage .taban-hero-copy { width: 55%; padding: 28px; }
    .taban-homepage .taban-hero-copy h1 { font-size: 34px; }
}

@media (max-width: 767px) {
    .taban-homepage .taban-hero-media img { object-position: center; }

    .taban-homepage .taban-hero-slide {
        min-height: 620px;
        aspect-ratio: 3 / 5;
        align-items: flex-start;
    }

    .taban-homepage .taban-hero-slide::before {
        background: linear-gradient(180deg,
            rgb(51 56 38 / 72%) 0%,
            rgb(66 69 48 / 64%) 30%,
            rgb(66 69 48 / 24%) 45%,
            rgb(66 69 48 / 0%) 65%);
    }

    .taban-homepage .taban-hero-copy {
        width: 100%;
        padding: 28px 24px;
    }

    .taban-homepage .taban-hero-copy h1 {
        font-size: 32px;
        line-height: 1.65;
    }

    .taban-homepage .taban-hero-copy p {
        margin: 14px 0 20px;
        font-size: 14px;
    }

    .taban-homepage .taban-hero-actions { gap: 10px; }
    .taban-homepage .taban-hero-actions .taban-button { padding-inline: 12px; }
}

/* Finished homepage promotion: one aligned surface, existing Swiper/timer hooks. */
.taban-homepage .main-slider > .container-fluid > .row > .taban-promotion-slot {
    height: auto;
}

.taban-homepage .taban-promotion-panel {
    display: flex;
    flex-direction: column;
    height: 540px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--taban-border);
    border-radius: 16px;
    background: var(--taban-surface);
}

.taban-homepage .taban-promotion-disclosure {
    flex: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--taban-border);
    color: var(--taban-green);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.6;
}

.taban-homepage .taban-promotion-disclosure span {
    margin: 0;
    padding: 3px 8px;
    border-radius: 5px;
    background: var(--taban-green-soft);
    color: var(--taban-green);
    font-size: 10px;
    font-weight: 500;
}

.taban-homepage .taban-promotion {
    flex: 1;
    height: auto;
    min-height: 0;
    border-radius: 0;
}

.taban-homepage .taban-promotion .swiper-wrapper,
.taban-homepage .taban-promotion .swiper-slide,
.taban-homepage .taban-promotion-product {
    height: 100%;
}

.taban-homepage .taban-promotion-product { display: block; }

.taban-homepage .taban-promotion .product-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 10px;
    padding: 12px 20px 22px;
    border: 0;
    border-radius: 0;
}

.taban-homepage .taban-promotion .product-image {
    flex: 1;
    min-height: 130px;
    margin: 0;
    background: var(--taban-surface-soft);
    border-radius: 10px;
}

.taban-homepage .taban-promotion .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.taban-homepage .taban-promotion .product-title .title p {
    min-height: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.8;
}

.taban-homepage .taban-promotion .product-action {
    margin-top: 0;
    padding-top: 8px;
    border-top: 1px solid var(--taban-border);
}

.taban-homepage .taban-promotion .product-timer {
    display: flex;
    flex: none;
    align-items: center;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--taban-green-soft);
}

.taban-homepage .taban-promotion .product-image .timer-label {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 1;
    font-size: 11px;
}

.taban-homepage .taban-promotion .product-image .timer-label span {
    display: block;
    padding: 3px 7px;
    border-radius: 5px;
}

.taban-homepage .taban-promotion .timer {
    flex: 1;
    min-width: 0;
}

.taban-homepage .taban-promotion .countdown {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 12px;
    direction: rtl;
}

.taban-homepage .taban-promotion .countdown-container { margin: 0; padding: 0; }
.taban-homepage .taban-promotion .countdown-value {
    display: block;
    min-width: 36px;
    font-variant-numeric: tabular-nums;
    padding: 4px 5px;
    border-radius: 6px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.4;
}
.taban-homepage .taban-promotion .countdown-heading {
    display: block;
    margin-top: 3px;
    color: var(--taban-green);
    font-size: 10px;
    line-height: 1.5;
}

.taban-homepage .taban-promotion .swiper-progress-bar {
    position: absolute;
    inset-inline: 20px;
    bottom: 5px;
    top: auto;
    width: auto;
    margin: 0;
}

@media (max-width: 1199px) {
    .taban-homepage .taban-promotion-panel { height: 480px; }
    .taban-homepage .taban-promotion .product-image { max-height: 230px; }
}

/* Category editorial/photo pass. All rules remain local to the catalog. */
.taban-category-page .cosmetics-collection-banner { min-height: 280px; }
.taban-category-page [data-category-design="taban"] { grid-template-columns: 1fr 1fr; }
.taban-category-page .cosmetics-collection-banner-content { display: flex; flex-direction: column; justify-content: center; padding: 30px 36px; }
.taban-category-page .taban-category-hero-media { min-height: clamp(280px, 23vw, 340px); }
.taban-category-page .taban-category-previews { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.taban-category-page .taban-category-previews > span { font-size: 11px; color: var(--taban-text-muted); margin-inline-end: 4px; }
.taban-category-page .taban-category-previews a { padding: 5px 10px; border: 1px solid var(--taban-border); border-radius: 6px; color: var(--taban-text); font-size: 12px; background: var(--taban-surface); }
.taban-category-page .taban-category-previews a[aria-current] { background: var(--taban-text); color: var(--taban-surface); border-color: var(--taban-text); }
.taban-category-page .taban-category-previews a:hover { border-color: var(--taban-green); }
body.taban-category-page .cosmetics-catalog-heading { margin-bottom: 16px; }
.taban-category-page .cosmetics-filter-form { background: var(--taban-green-soft); }
.taban-category-page .cosmetics-filter-header { padding-block: 15px; }
.taban-category-page .cosmetics-filter-toggle { min-height: 40px; padding-block: 9px; }
.taban-category-page .cosmetics-filter-option { min-height: 32px; padding-block: 5px; font-size: 12px; }
.taban-category-page .cosmetics-product-grid { align-items: start; }
.taban-category-page .cosmetics-product-media { background: var(--taban-bg); }
.taban-category-page .cosmetics-product-media img { object-fit: contain; }
.taban-category-page .cosmetics-product-stock { color: var(--taban-text-muted); background: transparent; font-size: 10px; }
.taban-category-page .cosmetics-product-title { min-height: 48px; }
.taban-category-page .cosmetics-product-pricing { position: relative; min-height: 62px; }
.taban-category-page .taban-price-caption { display: block; font-size: 10px; color: var(--taban-text-muted); }
body.taban-category-page .cosmetics-product-action-cart:disabled { background: var(--taban-surface-soft); color: var(--taban-text-muted); border-color: var(--taban-border); cursor: not-allowed; }
.taban-category-page .taban-catalog-status { color: var(--taban-text-muted); font-size: 12px; line-height: 1.8; }
.taban-category-page .taban-catalog-status:empty { display: none; }
.taban-category-page .cosmetics-results-empty { min-height: 300px; padding: 30px; border: 1px solid var(--taban-border); border-radius: 16px; background: var(--taban-bg); }
.taban-category-page .cosmetics-catalog [hidden] { display: none; }
.taban-category-page .cosmetics-catalog-toolbar { scroll-margin-top: 150px; }
@media (max-width: 767px) {
    body.taban-category-page .cosmetics-catalog { padding-top: 16px; }
    .taban-category-page [data-category-design="taban"] { grid-template-columns: 1fr; min-height: 0; border-radius: 12px; }
    .taban-category-page .cosmetics-collection-banner-content { padding: 17px 20px; }
    .taban-category-page .cosmetics-collection-banner h1 { font-size: 24px; line-height: 1.5; }
    .taban-category-page .cosmetics-collection-banner p { margin-top: 6px; font-size: 12px; line-height: 1.8; }
    .taban-category-page .taban-category-hero-media { min-height: 0; aspect-ratio: 2 / 1; }
    .taban-category-page .taban-category-previews { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
    .taban-category-page .taban-category-previews a { flex: none; }
    .taban-category-page .taban-category-previews > span { display: none; }
    .taban-category-page .taban-catalog-demo-note { font-size: 10px; line-height: 1.8; margin-top: 9px; }
    .taban-category-page .cosmetics-product-card-top { flex-wrap: wrap; gap: 5px; }
    .taban-category-page .cosmetics-product-price { font-size: 13px; }
    .taban-category-page .cosmetics-product-actions { gap: 6px; }
    .taban-category-page .cosmetics-product-action-cart { font-size: 10px; }
    .taban-category-page .cosmetics-product-title { font-size: 12px; min-height: 44px; }
}

.taban-category-page .cosmetics-product-card-top { display: grid; grid-template-columns: auto minmax(0, 1fr); height: 48px; min-height: 48px; align-items: center; padding: 6px 10px; }
.taban-category-page .cosmetics-product-stock { padding: 0; justify-self: end; text-align: end; line-height: 1.5; }
.taban-category-page .cosmetics-product-pricing { grid-template-rows: 25px 18px 16px; align-content: start; margin-top: 8px; padding-top: 0; min-height: 59px; }
.taban-category-page .cosmetics-product-price { grid-row: 1; }
.taban-category-page .cosmetics-product-old-price { grid-row: 2; }
.taban-category-page .taban-price-caption { grid-row: 3; }
@media (max-width: 767px) {
    .taban-category-page .cosmetics-product-discount { padding: 4px 6px; font-size: 10px; }
    .taban-category-page .cosmetics-product-stock { font-size: 9px; }
    .taban-category-page .cosmetics-product-brand { min-height: 18px; margin-bottom: 3px; font-size: 10px; }
    .taban-category-page .cosmetics-product-body { padding: 10px; }
}

.taban-category-page .taban-category-previews { scrollbar-width: thin; scrollbar-color: var(--taban-taupe) transparent; }
.taban-category-page .taban-category-previews::-webkit-scrollbar { height: 4px; }
.taban-category-page .taban-category-previews::-webkit-scrollbar-thumb { background: var(--taban-taupe); }
@media (max-width: 767px) {
    .taban-category-page .cosmetics-breadcrumb { margin-bottom: 10px; padding-bottom: 10px; }
    body.taban-category-page .cosmetics-catalog-heading { margin-bottom: 16px; }
}

/* Sparse previews: useful selection advice, without duplicate merchandise. */
.taban-category-page .taban-category-guidance {
    align-self: stretch;
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid var(--taban-border-calm);
    border-radius: 14px;
    background: var(--taban-green-soft);
    color: var(--taban-text);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.taban-category-page .taban-category-guidance[data-span="two"] { grid-column: span 2; }
.taban-category-page .taban-category-guidance-label { color: var(--taban-green); font-size: 12px; font-weight: 700; }
.taban-category-page .taban-category-guidance h2 { margin: 16px 0 12px; font-size: 22px; line-height: 1.7; }
.taban-category-page .taban-category-guidance p { max-width: 38ch; margin: 0; font-size: 14px; line-height: 2.2; }
.taban-category-page .taban-category-guidance-detail { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--taban-border); font-size: 11px; color: var(--taban-text-muted); line-height: 1.9; }
@media (max-width: 1199px) {
    .taban-category-page .taban-category-guidance[data-span="two"] { grid-column: span 1; }
}
@media (max-width: 991px) {
    .taban-category-page .taban-category-guidance { display: none; }
}

/* Taban PDP: scoped editorial product presentation; shared shell stays intact. */
body.taban-product-page .cosmetics-product {
    padding-block: 24px 48px;
    background: var(--taban-surface);
}
.taban-product-page .cosmetics-product-breadcrumb {
    padding: 0 0 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
}
.taban-product-page .cosmetics-product-main {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}
.taban-product-page :is(.cosmetics-product-gallery, .cosmetics-product-info, .cosmetics-product-details) {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.taban-product-page .cosmetics-product-main-media {
    min-height: 0;
    border-radius: 18px;
    overflow: hidden;
    background: var(--taban-bg);
    aspect-ratio: 1;
}
.taban-product-page .taban-pdp-image-button {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}
.taban-product-page .cosmetics-product-main-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;
}
.taban-product-page .taban-pdp-zoom {
    position: absolute;
    inset-inline-end: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    background: var(--taban-surface);
    color: var(--taban-text);
    border-radius: 8px;
    font-size: 12px;
}
.taban-product-page .cosmetics-product-media-note { justify-content: space-between; margin-top: 10px; font-size: 11px; }
.taban-product-page .taban-pdp-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 12px; }
.taban-product-page .taban-pdp-eyebrow a { color: var(--taban-green); font-weight: 800; }
.taban-product-page .taban-pdp-eyebrow span { color: var(--taban-text-muted); border-inline-start: 1px solid var(--taban-border); padding-inline-start: 12px; }
body.taban-product-page .cosmetics-product-info > .cosmetics-product-title { font-size: clamp(28px, 2.5vw, 36px); color: var(--taban-text); line-height: 1.6; }
.taban-product-page .cosmetics-product-short-description { margin: 12px 0; color: var(--taban-text-muted); font-size: 14px; line-height: 2.1; max-width: 50ch; }
.taban-product-page .taban-pdp-information-link { display: inline-flex; align-items: center; gap: 12px; min-height: 36px; font-size: 12px; color: var(--taban-green); }
.taban-product-page .cosmetics-product-purchase-card { margin-top: 18px; padding: 22px; border: 0; border-radius: 14px; background: var(--taban-bg); }
.taban-product-page .taban-pdp-price-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--taban-border); }
.taban-product-page .taban-pdp-price-label { display: block; color: var(--taban-text-muted); font-size: 11px; margin-bottom: 4px; }
.taban-product-page .cosmetics-product-current-price { color: var(--taban-text); }
.taban-product-page .cosmetics-product-stock { margin: 0; padding: 5px 0; border: 0; border-radius: 0; background: transparent; color: var(--taban-text-muted); font-size: 11px; }
.taban-product-page .cosmetics-product-purchase { display: block; margin-top: 18px; }
.taban-product-page .cosmetics-product-options { gap: 12px; }
.taban-product-page .cosmetics-product-options:has([data-option-field="color"][hidden]) [data-option-field="size"] { grid-column: 1 / -1; }
.taban-product-page .cosmetics-product-option .form-select { background-color: var(--taban-surface); border-radius: 8px; }
.taban-product-page .cosmetics-product-option-help { font-size: 10px; line-height: 1.8; }
.taban-product-page .taban-pdp-buy-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: end; gap: 12px; margin-top: 16px; }
body.taban-product-page .cosmetics-product-add-to-cart { background: var(--taban-primary); color: var(--taban-text); border-color: var(--taban-primary); border-radius: 9px; min-height: 50px; font-size: 14px; }
body.taban-product-page .cosmetics-product-add-to-cart:is(:hover, :focus-visible):not(:disabled) { background: var(--taban-primary-hover); color: var(--taban-text); box-shadow: none; transform: none; }
body.taban-product-page .cosmetics-product-add-to-cart:disabled { opacity: .6; cursor: not-allowed; }
.taban-product-page .cosmetics-product-quantity .bootstrap-touchspin { border-radius: 8px; }
.taban-product-page .cosmetics-product-purchase-card > .cosmetics-product-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; margin-top: 12px; padding-top: 0; }
.taban-product-page .cosmetics-product-favorite-action { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; border: 0; background: transparent; color: var(--taban-green); font-size: 12px; min-height: 44px; }
.taban-product-page .cosmetics-product-actions > span { max-width: 24ch; color: var(--taban-text-muted); font-size: 10px; line-height: 1.8; }
.taban-product-page .taban-pdp-action-status { margin: 8px 0 0; font-size: 12px; line-height: 1.9; color: var(--taban-text); }
.taban-product-page .taban-pdp-action-status:empty { display: none; }
.taban-product-page .taban-pdp-previews { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 11px; }
.taban-product-page .taban-pdp-previews > span { color: var(--taban-text-muted); margin-inline-end: 4px; }
.taban-product-page .taban-pdp-previews a { padding: 7px 11px; border-radius: 5px; color: var(--taban-green); }
.taban-product-page .taban-pdp-previews a[aria-current] { background: var(--taban-green-soft); color: var(--taban-green); }
body.taban-product-page .cosmetics-product-details { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--taban-border); border-radius: 0; }
.taban-product-page .cosmetics-product-section-heading h2 { color: var(--taban-text); font-size: 26px; }
.taban-product-page .cosmetics-product-section-heading > span { color: var(--taban-green); }
.taban-product-page .cosmetics-product-detail-nav { gap: 20px; margin-top: 14px; }
.taban-product-page .cosmetics-product-detail-nav a { min-height: 44px; padding: 10px 0; border: 0; border-bottom: 2px solid var(--taban-border); border-radius: 0; background: transparent; color: var(--taban-text); }
.taban-product-page .cosmetics-product-detail-nav a:hover { border-color: var(--taban-primary); }
.taban-product-page .taban-pdp-detail-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: start; margin-top: 16px; }
.taban-product-page .taban-pdp-story { padding-top: 20px; }
.taban-product-page .taban-pdp-story h3, .taban-product-page .taban-pdp-specifications h3 { font-size: 17px; color: var(--taban-text); margin: 0 0 12px; }
.taban-product-page .taban-pdp-story p { color: var(--taban-text-muted); font-size: 14px; line-height: 2.2; margin: 0; }
.taban-product-page #product-usage { margin-top: 20px; }
.taban-product-page .taban-pdp-specifications { background: var(--taban-green-soft); border-radius: 12px; padding: 20px; }
.taban-product-page .taban-pdp-specifications dl { gap: 12px; }
.taban-product-page .taban-pdp-specifications dl > div { grid-template-columns: 1fr 1.5fr; border-bottom-style: solid; padding-bottom: 12px; }
.taban-product-page .taban-pdp-specifications p { margin: 16px 0 0; color: var(--taban-text-muted); font-size: 11px; line-height: 1.9; }
.taban-product-page :is(#product-title, #product-description, #product-usage, #product-specifications) { scroll-margin-top: 150px; }
.taban-product-page .taban-pdp-related { margin-top: 32px; padding: 24px; background: var(--taban-bg); border-radius: 16px; }
.taban-product-page .taban-pdp-related > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.taban-product-page .taban-pdp-related header span { color: var(--taban-text-muted); font-size: 12px; }
.taban-product-page .taban-pdp-related h2 { font-size: 23px; margin: 8px 0 0; color: var(--taban-text); }
.taban-product-page .taban-pdp-related header > a { color: var(--taban-green); font-size: 12px; white-space: nowrap; }
.taban-product-page .taban-pdp-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.taban-product-page .taban-pdp-related-item { display: flex; gap: 14px; align-items: center; border-radius: 10px; background: var(--taban-surface); overflow: hidden; padding: 12px; }
.taban-product-page .taban-pdp-related-item img { width: 38%; max-width: 120px; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 6px; }
.taban-product-page .taban-pdp-related-label { color: var(--taban-green); font-size: 10px; }
.taban-product-page .taban-pdp-related-item h3 { font-size: 14px; line-height: 1.8; margin: 8px 0; color: var(--taban-text); }
.taban-product-page .taban-pdp-related-item p { color: var(--taban-text-muted); font-size: 11px; margin: 0; }
.taban-product-page .taban-pdp-related-note { font-size: 10px; color: var(--taban-text-muted); margin: 16px 0 0; line-height: 1.9; }
.taban-product-page .taban-pdp-gallery-controls { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 12px; }
.taban-product-page .taban-pdp-gallery-controls button { border: 1px solid var(--taban-border); border-radius: 6px; background: var(--taban-surface); color: var(--taban-green); min-width: 44px; min-height: 44px; padding: 5px; }
.taban-product-page .taban-pdp-thumbnails { display: flex; gap: 8px; overflow-x: auto; }
.taban-product-page .taban-pdp-thumbnails button[aria-pressed="true"] { border-color: var(--taban-green); background: var(--taban-green-soft); }
.taban-product-page .taban-pdp-thumbnails img { width: 48px; height: 48px; object-fit: contain; }
.taban-product-page .taban-pdp-lightbox .modal-dialog { max-width: 700px; }
.taban-product-page .taban-pdp-lightbox .modal-content { border: 0; background: var(--taban-surface); border-radius: 14px; }
.taban-product-page .taban-pdp-lightbox .modal-header h2 { font-size: 17px; color: var(--taban-text); margin: 0; }
.taban-product-page .taban-pdp-lightbox .modal-body img { display: block; width: 100%; max-height: 70vh; height: auto; object-fit: contain; }
.taban-product-page .taban-pdp-lightbox .modal-body p { margin: 12px 0 0; font-size: 11px; color: var(--taban-text-muted); }
.taban-product-page :is([data-product-demo], .taban-pdp-lightbox) :is(a, button, select, input):focus-visible { outline: 2px solid var(--taban-green); outline-offset: 4px; box-shadow: none; }
.taban-product-page .taban-pdp-image-button:focus-visible { outline-offset: -5px; }
.taban-product-page [data-product-demo] [hidden] { display: none; }
@media (max-width: 1199px) {
    .taban-product-page .cosmetics-product-main { gap: 28px; }
    .taban-product-page .cosmetics-product-purchase-card { padding: 18px; }
    .taban-product-page .taban-pdp-related-item { flex-direction: column; align-items: stretch; }
    .taban-product-page .taban-pdp-related-item img { width: 100%; max-width: none; max-height: 170px; }
}
@media (max-width: 991px) {
    .taban-product-page .cosmetics-product-main { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px; }
    .taban-product-page .cosmetics-product-gallery { width: min(100%, 520px); margin-inline: auto; }
    .taban-product-page .cosmetics-product-info { width: min(100%, 650px); margin-inline: auto; }
    body.taban-product-page .cosmetics-product { padding-block: 18px 36px; }
}
@media (max-width: 767px) {
    .taban-product-page .cosmetics-product-gallery { width: min(100%, 320px); }
    .taban-product-page .taban-pdp-story { padding-top: 0; }
    .taban-product-page .cosmetics-product-breadcrumb .breadcrumb { width: auto; flex-wrap: wrap; font-size: 10px; row-gap: 5px; }
    .taban-product-page .cosmetics-product-breadcrumb { margin-bottom: 10px; padding-bottom: 8px; }
    .taban-product-page .cosmetics-product-main { gap: 14px; }
    .taban-product-page .cosmetics-product-main-media { border-radius: 12px; max-height: 380px; }
    .taban-product-page .cosmetics-product-media-note { font-size: 9px; }
    body.taban-product-page .cosmetics-product-info > .cosmetics-product-title { font-size: 26px; }
    .taban-product-page .cosmetics-product-short-description { font-size: 13px; margin-block: 8px; }
    .taban-product-page .taban-pdp-eyebrow { margin-bottom: 8px; }
    .taban-product-page .cosmetics-product-purchase-card { margin-top: 12px; padding: 16px; }
    .taban-product-page .taban-pdp-price-line { padding-bottom: 14px; }
    .taban-product-page .taban-pdp-buy-row { grid-template-columns: 148px minmax(0, 1fr); gap: 10px; }
    body.taban-product-page .cosmetics-product-add-to-cart { font-size: 12px; gap: 5px; }
    body.taban-product-page .cosmetics-product-details { margin-top: 26px; padding-top: 20px; }
    .taban-product-page .cosmetics-product-section-heading h2 { font-size: 22px; }
    .taban-product-page .taban-pdp-detail-layout { grid-template-columns: 1fr; gap: 22px; }
    .taban-product-page .taban-pdp-story p { font-size: 13px; }
    .taban-product-page .taban-pdp-specifications { padding: 20px; }
    .taban-product-page .taban-pdp-related { padding: 18px; margin-top: 28px; }
    .taban-product-page .taban-pdp-related h2 { font-size: 19px; }
    .taban-product-page .taban-pdp-related > header { align-items: start; }
    .taban-product-page .taban-pdp-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .taban-product-page .taban-pdp-related-item { padding: 10px; }
    .taban-product-page .taban-pdp-related-item img { max-height: none; }
    .taban-product-page .taban-pdp-related-item h3 { font-size: 12px; min-height: 3.6em; }
    .taban-product-page .taban-pdp-related-item p { font-size: 10px; line-height: 1.8; }
}

/* Supersede the shared surface defaults only within the PDP. */
body.taban-product-page .cosmetics-product-purchase-card { background: var(--taban-bg); }
.taban-product-page .cosmetics-product-breadcrumb .cosmetics-breadcrumb { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.taban-product-page .cosmetics-product header { position: static; top: auto; z-index: auto; padding: 0; background: transparent; box-shadow: none; }

/* Shared storefront navigation: seven provisional preview contexts. */
body.taban-page .cosmetics-header-category .custom-mega-category-link {
    min-height: 42px;
    padding-block: 8px;
}
body.taban-page .cosmetics-header-category .custom-mega-category-link:focus-visible,
body.taban-page .cosmetics-header-mobile-categories a:focus-visible {
    outline: 2px solid var(--taban-primary);
    outline-offset: -2px;
}
body.taban-page .cosmetics-header-category .custom-mega-panel.active {
    align-content: center;
}
body.taban-page .cosmetics-header-category .custom-mega-section {
    margin-bottom: 0;
    padding: 24px;
    border-radius: 16px;
    background: var(--taban-green-soft);
}

/* Search extends the approved category listing system; only its own masthead,
   numeric price controls and recovery states need new composition. */
body.taban-search-page .cosmetics-catalog-heading { margin-bottom: 18px; }
.taban-search-page .cosmetics-breadcrumb { margin-bottom: 14px; }
.taban-search-masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(16px, 2vw, 24px);
    padding: clamp(26px, 3vw, 42px);
    border-radius: 20px;
    background: var(--taban-text);
    color: var(--taban-surface);
}
.taban-search-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--taban-primary-soft);
    font-size: 13px;
    font-weight: 800;
}
.taban-search-intro h1 {
    max-width: 23ch;
    margin: 0;
    color: var(--taban-surface);
    font-size: clamp(27px, 3vw, 42px);
    font-weight: 900;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.taban-search-intro p {
    max-width: 54ch;
    margin: 8px 0 0;
    color: var(--taban-green-soft);
    font-size: 15px;
    line-height: 1.9;
}
.taban-search-main-form { width: min(100%, 680px); min-width: 0; }
.taban-search-main-field { display: flex; min-width: 0; gap: 8px; }
.taban-search-main-field input {
    min-width: 0;
    min-height: 52px;
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--taban-border);
    border-radius: 10px;
    background: var(--taban-surface);
    color: var(--taban-text);
}
.taban-search-main-field button {
    display: inline-flex;
    min-width: 108px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 10px;
    background: var(--taban-primary);
    color: var(--taban-text);
    font-weight: 800;
}
.taban-search-main-field button:hover { background: var(--taban-primary-hover); }
.taban-search-price-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding-block: 12px; }
.taban-search-price-fields label { min-width: 0; color: var(--taban-text); font-size: 12px; font-weight: 700; }
.taban-search-price-fields input { width: 100%; margin-block: 7px 2px; border-color: var(--taban-border-calm); background: var(--taban-surface); direction: ltr; text-align: center; }
.taban-search-price-fields label span { color: var(--taban-text-muted); font-weight: 500; }
.taban-search-page .cosmetics-filter-form { min-width: 0; }
.taban-search-page .cosmetics-catalog-toolbar { margin-bottom: 10px; }
.taban-search-page .taban-search-result-note { margin: 0 0 18px; color: var(--taban-text-muted); font-size: 14px; font-weight: 600; line-height: 1.7; overflow-wrap: anywhere; }
.taban-search-page .cosmetics-product-grid[hidden] { display: none; }
.taban-search-image-fallback {
    position: absolute;
    inset: 16px;
    display: grid;
    place-items: center;
    padding: 18px;
    border-radius: 8px;
    background: var(--taban-green-soft);
    color: var(--taban-green);
    text-align: center;
    font-size: 13px;
}
.taban-search-filter-empty {
    padding: clamp(26px,4vw,48px);
    border: 1px solid var(--taban-border);
    border-radius: 16px;
    background: var(--taban-bg);
    text-align: center;
}
.taban-search-filter-empty[hidden] { display: none; }
.taban-search-filter-empty > i { color: var(--taban-green); font-size: 28px; }
.taban-search-filter-empty h2 { margin: 10px 0; color: var(--taban-text); font-size: 22px; }
.taban-search-filter-empty p { color: var(--taban-text-muted); }
.taban-search-recovery-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    border: 0;
    border-radius: 9px;
    background: var(--taban-primary);
    color: var(--taban-text);
    font-weight: 800;
    text-decoration: none;
}
.taban-search-recovery-button:hover { background: var(--taban-primary-hover); color: var(--taban-text); }
.taban-search-page .cosmetics-product-card [data-demo-favorite]:hover { color: var(--taban-green-hover); }
.taban-search-page .cosmetics-product-card .cosmetics-product-action-cart:disabled { cursor: not-allowed; }
body.taban-search-page .cosmetics-catalog :is(a, button, input, select):focus-visible,
.taban-recovery :is(a, button, input):focus-visible { outline: 2px solid var(--taban-primary); outline-offset: 3px; }

/* Search and product recovery: one strong message and a clear next action. */
body.taban-search-empty-page .taban-recovery,
body.taban-product-missing-page .taban-recovery {
    padding: 28px 0 74px;
    background: var(--taban-surface);
}
.taban-recovery-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; color: var(--taban-text-muted); font-size: 13px; }
.taban-recovery-breadcrumb a { color: var(--taban-green); text-decoration: none; }
.taban-recovery-layout { width: min(100%, 960px); margin-inline: auto; }
.taban-recovery-primary { min-width: 0; padding: clamp(32px,5vw,64px); border: 1px solid var(--taban-text); border-radius: 20px; background: var(--taban-text); color: var(--taban-surface); }
.taban-recovery-eyebrow { display: inline-flex; gap: 9px; align-items: center; margin-bottom: 14px; color: var(--taban-primary-soft); font-size: 13px; font-weight: 800; }
.taban-recovery-primary h1 { max-width: 23ch; margin: 0; color: var(--taban-surface); font-size: clamp(28px,3.4vw,44px); font-weight: 900; line-height: 1.5; overflow-wrap: anywhere; }
.taban-recovery-primary > p { max-width: 55ch; margin: 16px 0 0; color: var(--taban-green-soft); line-height: 1.9; }
.taban-recovery-search { max-width: 560px; margin-top: 30px; }
.taban-recovery-search label { display: block; margin-bottom: 10px; color: var(--taban-surface); font-weight: 800; }
.taban-recovery-search > div { display: flex; gap: 8px; }
.taban-recovery-search input { width: 100%; min-width: 0; min-height: 50px; padding: 10px 15px; border: 1px solid var(--taban-border); border-radius: 9px; background: var(--taban-surface); color: var(--taban-text); }
.taban-recovery-search button, .taban-recovery-button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 19px;
    border: 0;
    border-radius: 9px;
    background: var(--taban-primary);
    color: var(--taban-text);
    font-weight: 800;
    text-decoration: none;
}
.taban-recovery-search button:hover, .taban-recovery-button:hover { background: var(--taban-primary-hover); color: var(--taban-text); }
.taban-recovery-text-link { display: inline-flex; margin-top: 24px; color: var(--taban-primary-soft); text-decoration: underline; text-underline-offset: 4px; }
.taban-recovery-text-link:hover { color: var(--taban-surface); }
.taban-recovery-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 30px; }
.taban-recovery-actions .taban-recovery-text-link { margin: 0; }
@media (max-width: 991px) {
    .taban-search-page .cosmetics-filter-panel.offcanvas-lg { background: var(--taban-green-soft); }
}
@media (max-width: 767px) {
    .taban-search-masthead { gap: 18px; padding: 24px 20px; border-radius: 16px; }
    .taban-search-intro h1 { font-size: 27px; }
    .taban-search-intro p { margin-top: 8px; font-size: 13px; }
    .taban-search-main-field button { min-width: 54px; padding: 8px 12px; }
    .taban-search-main-field button span { display: none; }
    .taban-search-page .cosmetics-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    body.taban-search-empty-page .taban-recovery,
    body.taban-product-missing-page .taban-recovery { padding: 18px 0 100px; }
    .taban-recovery-primary { padding: 28px 22px; border-radius: 16px; }
    .taban-recovery-primary h1 { font-size: 28px; }
    .taban-recovery-search > div { gap: 6px; }
    .taban-recovery-search button { padding-inline: 13px; }
}

/* Purchase preview: a calm workspace for reviewing items and a chocolate
   summary anchor. Rules stay on these six pages; shared shell is unchanged. */
.taban-purchase-page .taban-purchase {
    padding: clamp(18px, 2.4vw, 30px) 0 36px;
    background: var(--taban-surface);
    color: var(--taban-text);
}
.taban-purchase-page .taban-purchase .container-fluid { max-width: 1360px; }
.taban-purchase-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--taban-text-muted); font-size: 13px; }
.taban-purchase-breadcrumb a { color: var(--taban-green); text-decoration: none; }
.taban-purchase-breadcrumb a:hover { text-decoration: underline; }
.taban-purchase-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin: 0 0 17px; padding: 0 0 11px; border-bottom: 1px solid var(--taban-border); list-style: none; }
.taban-purchase-steps li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 12px; border-inline-start: 1px solid var(--taban-border); color: var(--taban-text-muted); font-size: 12px; font-weight: 700; }
.taban-purchase-steps li span { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; border: 1px solid var(--taban-border-calm); border-radius: 50%; font-size: 11px; }
.taban-purchase-steps li.is-current { color: var(--taban-text); font-weight: 850; }
.taban-purchase-steps li.is-current span { border-color: var(--taban-primary); background: var(--taban-primary); color: var(--taban-text); }
.taban-purchase-steps li.is-done { color: var(--taban-green); }
.taban-purchase-heading { margin: 0 0 20px; padding-inline: 2px; }
.taban-purchase-kicker, .taban-summary-kicker { display: block; margin-bottom: 8px; color: var(--taban-green); font-size: 12px; font-weight: 800; }
.taban-purchase-heading h1, .taban-empty-composition h1, .taban-result-card h1 { margin: 0; color: var(--taban-text); font-size: clamp(28px,3.1vw,42px); font-weight: 900; line-height: 1.45; }
.taban-purchase-heading p { max-width: 65ch; margin: 8px 0 0; color: var(--taban-text-muted); line-height: 1.85; }
.taban-purchase-layout { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(310px,.78fr); gap: 10px; align-items: start; padding: 10px; border-radius: 20px; background: var(--taban-bg); }
.taban-purchase-list, .taban-checkout-section, .taban-address-section { min-width: 0; padding: clamp(22px,2.5vw,32px); border: 0; border-radius: 13px; background: var(--taban-surface); }
.taban-purchase-section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--taban-border); }
.taban-purchase-section-heading h2 { margin: 0; color: var(--taban-text); font-size: clamp(19px,2vw,23px); font-weight: 850; }
.taban-purchase-section-heading > span { color: var(--taban-text-muted); font-size: 13px; }
.taban-purchase-section-heading a { color: var(--taban-green); font-size: 13px; font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }
.taban-purchase-item { display: grid; grid-template-columns: 116px minmax(0,1fr) auto; grid-template-areas: 'image info total' 'image controls total'; gap: 8px 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--taban-border); }
.taban-purchase-item:first-child { padding-top: 0; }
.taban-purchase-item:last-child { padding-bottom: 0; border-bottom: 0; }
.taban-purchase-item-image { grid-area: image; align-self: stretch; display: grid; place-items: center; width: 116px; min-height: 116px; overflow: hidden; border-radius: 12px; background: var(--taban-bg); }
.taban-purchase-item-image img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; }
.taban-purchase-item-info { grid-area: info; min-width: 0; }
.taban-purchase-item-info > span { color: var(--taban-green); font-size: 12px; font-weight: 750; }
.taban-purchase-item-info h3 { margin: 5px 0; font-size: 17px; font-weight: 850; line-height: 1.65; }
.taban-purchase-item-info h3 a { color: var(--taban-text); text-decoration: none; }
.taban-purchase-item-info h3 a:hover { color: var(--taban-green); }
.taban-purchase-item-info p { margin: 0; color: var(--taban-text-muted); font-size: 12px; }
.taban-purchase-item-controls { grid-area: controls; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.taban-purchase-quantity { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--taban-border); border-radius: 9px; background: var(--taban-surface); }
.taban-purchase-quantity button { display: grid; width: 40px; height: 40px; place-items: center; border: 0; background: transparent; color: var(--taban-text); }
.taban-purchase-quantity button:hover { background: var(--taban-green-soft); }
.taban-purchase-quantity output { min-width: 34px; color: var(--taban-text); text-align: center; font-weight: 800; }
.taban-purchase-remove { min-height: 40px; padding: 4px 8px; border: 0; background: transparent; color: var(--taban-text-muted); font-size: 12px; }
.taban-purchase-remove:hover { color: var(--taban-text); text-decoration: underline; }
.taban-purchase-item-total { grid-area: total; display: grid; gap: 5px; min-width: 122px; text-align: left; }
.taban-purchase-item-total span { color: var(--taban-text-muted); font-size: 12px; }
.taban-purchase-item-total strong { color: var(--taban-text); font-size: 17px; white-space: nowrap; }
.taban-purchase-summary { min-width: 0; padding: clamp(24px,2.5vw,32px); border-radius: 13px; background: var(--taban-text); color: var(--taban-surface); }
.taban-purchase-summary .taban-summary-kicker { color: var(--taban-primary-soft); }
.taban-purchase-summary h2 { margin: 0; color: var(--taban-surface); font-size: 25px; font-weight: 850; }
.taban-purchase-summary > p:not(.taban-checkout-validation) { margin: 7px 0 22px; color: var(--taban-green-soft); font-size: 13px; }
.taban-purchase-summary dl { margin: 0 0 24px; }
.taban-purchase-summary dl > div { display: flex; justify-content: space-between; gap: 15px; padding: 12px 0; border-bottom: 1px solid rgb(255 253 247 / 18%); }
.taban-purchase-summary dt { color: var(--taban-green-soft); font-weight: 500; }
.taban-purchase-summary dd { margin: 0; color: var(--taban-surface); font-weight: 700; text-align: left; }
.taban-purchase-summary .taban-summary-total { align-items: baseline; margin-top: 8px; border-bottom: 0; }
.taban-summary-total dt, .taban-summary-total dd { color: var(--taban-surface); font-weight: 850; }
.taban-summary-total dd { font-size: 22px; white-space: nowrap; }
.taban-purchase .taban-purchase-primary { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 12px; padding: 10px 20px; border: 0; border-radius: 10px; background: var(--taban-primary); color: var(--taban-text); font-weight: 850; text-align: center; text-decoration: none; }
.taban-purchase .taban-purchase-primary:hover { background: var(--taban-primary-hover); color: var(--taban-text); }
.taban-purchase-summary .taban-purchase-primary { width: 100%; }
.taban-purchase .taban-purchase-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 12px; color: var(--taban-green); font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }
.taban-purchase-summary .taban-purchase-secondary { display: flex; margin-top: 10px; color: var(--taban-surface); }
.taban-purchase-footnote { margin: 12px 10px 0; color: var(--taban-text-muted); font-size: 12px; }
.taban-purchase-load-error { padding: 28px; border-radius: 12px; background: var(--taban-green-soft); color: var(--taban-text); }
.taban-empty-cart .taban-empty-composition, .taban-result .taban-result-card { width: min(100%, 920px); margin: 18px auto 0; padding: clamp(30px,4vw,54px); border-radius: 16px; background: var(--taban-bg); }
.taban-empty-icon, .taban-result-icon { display: grid; width: 64px; height: 64px; place-items: center; margin-bottom: 24px; border-radius: 16px; background: var(--taban-green-soft); color: var(--taban-green); font-size: 30px; }
.taban-empty-composition p, .taban-result-card p { max-width: 58ch; margin: 14px 0 26px; color: var(--taban-text-muted); line-height: 1.9; }
.taban-empty-actions, .taban-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.taban-checkout-main { display: grid; gap: 0; min-width: 0; overflow: hidden; border-radius: 13px; background: var(--taban-surface); }
.taban-checkout-main .taban-checkout-section { border-radius: 0; }
.taban-checkout-main .taban-checkout-section + .taban-checkout-section { border-top: 1px solid var(--taban-border); }
.taban-checkout-main .taban-checkout-section:last-child { background: var(--taban-green-soft); }
.taban-purchase-item.is-review { grid-template-areas: 'image info total'; }
.taban-checkout-address { display: grid; gap: 5px; margin-bottom: 20px; padding: 18px 20px; border-radius: 12px; background: var(--taban-green-soft); color: var(--taban-text); line-height: 1.8; overflow-wrap: anywhere; }
.taban-checkout-address a { color: var(--taban-green); font-weight: 800; }
.taban-checkout-address small { color: var(--taban-text-muted); }
.taban-checkout-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.taban-checkout-fields label, .taban-checkout-note { display: grid; gap: 8px; color: var(--taban-text); font-size: 13px; font-weight: 750; }
.taban-checkout-fields label span { color: var(--taban-link); }
.taban-checkout-fields input, .taban-checkout-note textarea { width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--taban-border); border-radius: 9px; background: var(--taban-surface); color: var(--taban-text); }
.taban-checkout-note { margin-top: 16px; }
.taban-checkout-explain { margin: 0 0 18px; color: var(--taban-text-muted); line-height: 1.8; }
.taban-checkout-outcomes { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.taban-checkout-outcomes label { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 10px 15px; border: 1px solid var(--taban-border); border-radius: 9px; background: var(--taban-surface); cursor: pointer; }
.taban-checkout-outcomes label:has(input:checked) { border-color: var(--taban-green); background: var(--taban-green-soft); }
.taban-checkout-outcomes input { accent-color: var(--taban-green); }
.taban-checkout-validation:not([hidden]) { margin: 0 0 15px; padding: 10px 12px; border-radius: 8px; background: var(--taban-primary-soft); color: var(--taban-text); }
.taban-address-add, .taban-address-empty button { min-height: 44px; padding: 8px 15px; border: 0; border-radius: 9px; background: var(--taban-green); color: #fff; font-weight: 750; }
.taban-address-add:hover, .taban-address-empty button:hover { background: var(--taban-green-hover); }
.taban-address-empty { display: grid; justify-items: start; gap: 10px; padding: 32px; border-radius: 12px; background: var(--taban-green-soft); }
.taban-address-empty i { color: var(--taban-green); font-size: 28px; }
.taban-address-empty p { margin: 0; }
.taban-address-card { margin-bottom: 12px; padding: 18px; border: 1px solid var(--taban-border); border-radius: 12px; background: var(--taban-surface); }
.taban-address-card.is-selected { border-color: var(--taban-green); background: var(--taban-green-soft); }
.taban-address-card label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.taban-address-card label > span { display: grid; gap: 5px; min-width: 0; line-height: 1.65; overflow-wrap: anywhere; }
.taban-address-card label small { color: var(--taban-text-muted); }
.taban-address-card input { margin-top: 6px; accent-color: var(--taban-green); }
.taban-address-card > div { display: flex; gap: 12px; margin: 12px 0 0 27px; }
.taban-address-card button { padding: 4px; border: 0; background: transparent; color: var(--taban-green); text-decoration: underline; }
.taban-address-summary-value { margin: 20px 0 28px; color: var(--taban-green-soft); line-height: 1.8; overflow-wrap: anywhere; }
.taban-purchase-page .cosmetics-address-modal .modal-content { border: 1px solid var(--taban-border); border-radius: 16px; background: var(--taban-surface); }
.taban-purchase-page .cosmetics-address-modal .modal-header { background: var(--taban-green-soft); }
.taban-purchase-page .cosmetics-address-modal .form-control,
.taban-purchase-page .cosmetics-address-modal .form-select { border-color: var(--taban-border); background-color: var(--taban-surface); }
.taban-purchase-page .taban-purchase.taban-result { background: linear-gradient(to bottom, var(--taban-surface) 0 58%, var(--taban-bg) 58% 100%); }
.taban-result .taban-result-card { min-height: 290px; border-top: 5px solid var(--taban-primary); background: var(--taban-text); color: var(--taban-surface); }
.taban-result-card .taban-purchase-kicker { color: var(--taban-primary-soft); }
.taban-result-card h1 { color: var(--taban-surface); }
.taban-result-card p { color: var(--taban-green-soft); }
.taban-result-icon { background: var(--taban-green); color: #fff; }
.taban-result-failure .taban-result-icon { background: var(--taban-surface-soft); color: var(--taban-text); }
.taban-result-card .taban-purchase-secondary { color: var(--taban-surface); }
body.taban-page #offcanvasCart .cart-canvas-parent { display: grid; gap: 10px; padding: 0; }
body.taban-page #offcanvasCart .taban-mini-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--taban-border); }
.taban-mini-item img { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 8px; object-fit: cover; }
.taban-mini-item > div { display: grid; gap: 4px; }
.taban-mini-item a { color: var(--taban-text); font-weight: 800; text-decoration: none; }
.taban-mini-item small { color: var(--taban-text-muted); }
.taban-mini-empty { padding: 24px; color: var(--taban-text-muted); }
.taban-mini-total { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; color: var(--taban-text); }
body.taban-page #offcanvasCart .taban-purchase-primary { width: 100%; }
.taban-purchase :is(a,button,input,textarea):focus-visible,
.taban-purchase-page .cosmetics-address-modal :is(button,input,select,textarea):focus-visible { outline: 2px solid var(--taban-primary); outline-offset: 3px; }
@media (max-width: 991px) {
    .taban-purchase-layout { grid-template-columns: minmax(0,1fr); }
    .taban-purchase-summary { position: static; }
}
@media (max-width: 767px) {
    .taban-purchase-page .taban-purchase { padding-bottom: 112px; }
    .taban-purchase-steps { gap: 0; }
    .taban-purchase-steps li { justify-content: center; flex-wrap: wrap; gap: 4px; padding: 4px 3px; text-align: center; font-size: 10px; }
    .taban-purchase-steps li span { flex-basis: 22px; width: 22px; height: 22px; }
    .taban-purchase-heading { margin-bottom: 16px; }
    .taban-purchase-heading h1 { font-size: 30px; }
    .taban-purchase-layout { padding: 6px; gap: 6px; border-radius: 17px; }
    .taban-purchase-list, .taban-checkout-section, .taban-address-section { padding: 18px; border-radius: 12px; }
    .taban-checkout-main .taban-checkout-section { border-radius: 0; }
    .taban-purchase-item { grid-template-columns: 86px minmax(0,1fr); grid-template-areas: 'image info' 'controls controls' 'total total'; gap: 10px 12px; }
    .taban-purchase-item.is-review { grid-template-areas: 'image info' 'total total'; }
    .taban-purchase-item-image { width: 86px; min-height: 86px; }
    .taban-purchase-item-info h3 { font-size: 15px; }
    .taban-purchase-item-total { display: flex; justify-content: space-between; align-items: baseline; min-width: 0; text-align: right; }
    .taban-purchase-item-total strong { font-size: 16px; }
    .taban-checkout-fields { grid-template-columns: 1fr; }
    .taban-checkout-outcomes { display: grid; }
    .taban-empty-cart .taban-empty-composition, .taban-result .taban-result-card { margin-top: 12px; padding: 28px 22px; }
    .taban-result .taban-result-card { min-height: 0; }
}

.taban-purchase-item-info .taban-purchase-variant { margin-top: 4px; color: var(--taban-green); font-weight: 700; }
body.taban-page #offcanvasCart .taban-purchase-primary { display: flex; min-height: 44px; align-items: center; justify-content: center; border-radius: 9px; background: var(--taban-primary); color: var(--taban-text); font-weight: 800; text-decoration: none; }

/* Customer-area preview: scoped away from the approved storefront and purchase pages. */
.taban-auth-page { background: var(--taban-surface); }
.taban-auth-page .cosmetics-auth-shell { min-height: 100vh; padding: clamp(22px,4vw,52px) 16px; background-color: var(--taban-surface); background-image: radial-gradient(ellipse at 9% 88%, rgb(232 236 223 / 64%), transparent 44%), radial-gradient(ellipse at 91% 13%, rgb(246 234 208 / 65%), transparent 38%), repeating-linear-gradient(0deg, rgb(66 69 48 / 2.4%) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, rgb(165 142 116 / 2%) 0 1px, transparent 1px 9px); }
.taban-auth-page .cosmetics-auth-wrap { width: min(100%,500px); }
.taban-auth-page .cosmetics-auth-brand { align-items: center; margin-bottom: 13px; }
.taban-auth-page .cosmetics-auth-brand .cosmetics-auth-logo { width: 112px; height: auto; object-fit: contain; }
.taban-auth-page .cosmetics-auth-card.auth-form { padding: clamp(24px,3.6vw,34px); border: 1px solid var(--taban-border); border-top: 4px solid var(--taban-text); border-radius: 16px; background-color: var(--taban-surface) !important; box-shadow: 0 18px 42px rgb(48 35 30 / 9%) !important; }
.taban-auth-page .cosmetics-auth-steps { margin-bottom: 19px; }
.taban-auth-page .cosmetics-auth-steps li.is-active > span { background: var(--taban-primary); border-color: var(--taban-primary); color: var(--taban-text); }
.taban-auth-page .cosmetics-auth-steps li.is-complete > span { background: var(--taban-green); border-color: var(--taban-green); color: #fff; }
.taban-auth-page .cosmetics-auth-heading h1 { color: var(--taban-text); font-size: clamp(25px,2.6vw,31px); line-height: 1.48; }
.taban-auth-page .cosmetics-auth-heading > span { color: var(--taban-green); }
.taban-auth-page .cosmetics-auth-copy { color: var(--taban-text-muted); font-size: 13px; line-height: 1.85; }
.taban-auth-page .cosmetics-auth-control, .taban-auth-page .cosmetics-auth-code input { border-color: var(--taban-border); background: #fff; }
.taban-auth-page .cosmetics-auth-control:focus-within, .taban-auth-page .cosmetics-auth-code input:focus-visible { border-color: var(--taban-green); outline: 2px solid var(--taban-primary-soft); outline-offset: 2px; }
.taban-auth-page .cosmetics-auth-submit { background: var(--taban-primary); color: var(--taban-text); border: 0; }
.taban-auth-page .cosmetics-auth-submit:hover { background: var(--taban-primary-hover); color: var(--taban-text); }
.taban-auth-page .cosmetics-auth-mobile { background: var(--taban-green-soft); color: var(--taban-text); border-radius: 9px; }
.taban-auth-page .cosmetics-auth-terms, .taban-auth-page .cosmetics-auth-support { color: var(--taban-text-muted); }
.taban-auth-page :is(a,button,input):focus-visible { outline: 2px solid var(--taban-primary); outline-offset: 3px; }

.taban-account-page .taban-account { padding: 24px 0 42px; background: var(--taban-surface); color: var(--taban-text); }
.taban-account-page .taban-account .container-fluid { max-width: 1320px; }
.taban-account-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 13px; color: var(--taban-text-muted); font-size: 12px; }
.taban-account-breadcrumb a { color: var(--taban-green); text-decoration: none; }
.taban-account-layout { display: grid; grid-template-columns: minmax(210px,230px) minmax(0,1fr); gap: clamp(20px,2.3vw,30px); align-items: start; }
.taban-account-rail { position: sticky; top: 18px; overflow: hidden; border-radius: 16px; background: var(--taban-text); color: var(--taban-surface); }
.taban-account-rail-intro { display: grid; justify-items: start; gap: 3px; padding: 21px 20px 18px; border-bottom: 1px solid rgb(255 253 247 / 17%); }
.taban-account-rail-mark { display: grid; width: 34px; height: 34px; place-items: center; margin-bottom: 7px; border-radius: 9px; background: var(--taban-primary); color: var(--taban-text); font-size: 18px; }
.taban-account-rail-intro > span:not(.taban-account-rail-mark) { color: var(--taban-primary-soft); font-size: 12px; }
.taban-account-rail-intro strong { font-size: 17px; }
.taban-account-rail-intro small { color: var(--taban-green-soft); }
.taban-account-nav { display: grid; gap: 2px; padding: 10px; }
.taban-account-nav-link { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 7px 11px; border-radius: 8px; color: var(--taban-surface); text-decoration: none; font-weight: 650; }
/* Legacy default-style.css colors every span directly; labels must follow their link state. */
.taban-account-nav-link > span { color: inherit; }
.taban-account-nav-link > i { color: color-mix(in srgb, var(--taban-surface) 76%, var(--taban-taupe)); }
.taban-account-nav-link.is-current > i { color: inherit; }
.taban-account-nav-link:hover { background: rgb(255 253 247 / 10%); color: var(--taban-surface); }
.taban-account-nav-link.is-current { background: var(--taban-primary); color: var(--taban-text); font-weight: 850; }
.taban-account-shop { display: flex; justify-content: space-between; padding: 14px 20px; border-top: 1px solid rgb(255 253 247 / 17%); color: var(--taban-primary-soft); text-decoration: none; font-size: 13px; }
.taban-account-shop:hover { color: #fff; }
.taban-account-content { min-width: 0; width: 100%; max-width: 1020px; }
.taban-account-heading { margin: 0 0 19px; }
.taban-account-heading > span { color: var(--taban-green); font-size: 12px; font-weight: 800; }
.taban-account-heading h1 { margin: 3px 0 5px; font-size: clamp(30px,3vw,40px); line-height: 1.42; font-weight: 900; color: var(--taban-text); }
.taban-account-heading p { max-width: 66ch; margin: 0; color: #62544c; line-height: 1.8; }
.taban-account-welcome { display: grid; justify-items: start; align-content: center; gap: 7px; min-height: 176px; padding: clamp(24px,2.5vw,30px); border-radius: 15px; background: var(--taban-green-soft); }
.taban-account-welcome > span { color: var(--taban-green); font-size: 12px; font-weight: 800; }
.taban-account-welcome h2 { margin: 0; font-size: clamp(24px,2.7vw,31px); font-weight: 850; }
.taban-account-welcome p { max-width: 54ch; margin: 0 0 5px; color: #62544c; line-height: 1.75; }
.taban-account-welcome a { color: var(--taban-green); font-weight: 850; }
.taban-account-section { margin-top: 21px; }
.taban-account-section h2 { margin: 0 0 13px; font-size: 22px; font-weight: 850; color: var(--taban-text); }
.taban-account-shortcuts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.taban-account-shortcut { display: flex; align-items: center; gap: 13px; min-height: 82px; padding: 15px 17px; border: 1px solid var(--taban-border); border-radius: 12px; color: var(--taban-text); text-decoration: none; }
.taban-account-shortcut:hover { border-color: var(--taban-green); color: var(--taban-text); background: var(--taban-green-soft); }
.taban-account-shortcut > i:first-child { display: grid; flex: 0 0 37px; width: 37px; height: 37px; place-items: center; border-radius: 9px; background: var(--taban-bg); color: var(--taban-green); font-size: 19px; }
.taban-account-shortcut > span { display: grid; gap: 3px; flex: 1; }
.taban-account-shortcut small { color: #62544c; font-size: 12px; line-height: 1.55; }
.taban-account-shortcut > i:last-child { color: var(--taban-green); }
.taban-account-primary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 10px 18px; border: 0; border-radius: 9px; background: var(--taban-primary); color: var(--taban-text); font-weight: 850; text-decoration: none; }
.taban-account-primary:hover { background: var(--taban-primary-hover); color: var(--taban-text); }
.taban-account-form { max-width: 820px; padding: 0; background: transparent; }
.taban-account-form h3 { margin: 22px 0 12px; padding-top: 17px; border-top: 1px solid var(--taban-border); font-size: 17px; color: var(--taban-text); }
.taban-account-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px 18px; }
.taban-account-fields label { display: grid; align-content: start; gap: 7px; color: var(--taban-text); font-size: 13px; font-weight: 800; }
.taban-account-fields label.is-wide { grid-column: 1/-1; }
.taban-account-fields :is(input,select,textarea) { width: 100%; min-width: 0; min-height: 46px; padding: 10px 13px; border: 1px solid var(--taban-border); border-radius: 8px; background: var(--taban-surface); color: var(--taban-text); }
.taban-account-fields textarea { resize: vertical; }
.taban-account-fields .address-form-error { color: #9b5435; font-weight: 500; }
.taban-account-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 21px; padding-top: 18px; border-top: 1px solid var(--taban-border); }
.taban-account-form-actions a { color: var(--taban-green); }
.taban-account-feedback { margin: 12px 0 0; color: var(--taban-green); }
.taban-account-section-actions { margin: 0; text-align: left; }
.taban-account-address-list { display: grid; gap: 10px; }
.taban-account-address { padding: 20px; border: 1px solid var(--taban-border); border-radius: 12px; }
.taban-account-address.is-selected { border-color: var(--taban-green); background: var(--taban-green-soft); }
.taban-account-address label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.taban-account-address input { margin-top: 7px; accent-color: var(--taban-green); }
.taban-account-address label > span { display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; line-height: 1.7; }
.taban-account-address small { color: var(--taban-text-muted); }
.taban-account-address > div { display: flex; gap: 17px; margin: 12px 0 0 28px; }
.taban-account-address button, .taban-account-product-actions button { padding: 4px; border: 0; background: none; color: var(--taban-green); text-decoration: underline; }
.taban-account-empty { display: grid; justify-items: start; gap: 10px; min-height: 220px; align-content: center; padding: clamp(22px,3vw,32px); border-radius: 13px; background: var(--taban-green-soft); }
.taban-account-empty > i { color: var(--taban-green); font-size: 27px; }
.taban-account-empty p { max-width: 48ch; margin: 0; color: #50473e; line-height: 1.75; }
.taban-account-empty a { color: var(--taban-green); font-weight: 850; }
.taban-account-product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.taban-account-product { overflow: hidden; border: 1px solid var(--taban-border); border-radius: 13px; background: var(--taban-surface); }
.taban-account-product > a { display: block; aspect-ratio: 1.23; background: var(--taban-bg); }
.taban-account-product img { display: block; width: 100%; height: 100%; object-fit: contain; }
.taban-account-product > div { display: grid; align-content: start; gap: 7px; padding: 16px; }
.taban-account-product span, .taban-account-order-item span { color: var(--taban-green); font-size: 12px; font-weight: 750; }
.taban-account-product h3, .taban-account-order-item h3 { margin: 0; font-size: 17px; line-height: 1.6; }
.taban-account-product h3 a, .taban-account-order-item h3 a { color: var(--taban-text); text-decoration: none; }
.taban-account-product small { color: #62544c; line-height: 1.6; }
.taban-account-product-actions { display: flex; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--taban-border); }
.taban-account-product-actions a { color: var(--taban-green); font-weight: 800; }
.taban-account-order { overflow: hidden; border: 1px solid var(--taban-border); border-radius: 15px; }
.taban-account-order-top, .taban-account-order-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 18px 22px; }
.taban-account-order-top { background: var(--taban-text); color: var(--taban-surface); }
.taban-account-order-top span { color: var(--taban-primary-soft); }
.taban-account-order-body { display: flex; align-items: center; gap: 18px; padding: 19px 22px; }
.taban-account-order-thumbs { display: flex; gap: 8px; }
.taban-account-order-thumbs img { width: 78px; height: 78px; border-radius: 9px; background: var(--taban-bg); object-fit: contain; }
.taban-account-order-body p { max-width: 58ch; margin: 4px 0 0; color: #62544c; line-height: 1.7; }
.taban-account-order-bottom { align-items: center; background: var(--taban-green-soft); }
.taban-account-order-bottom a { color: var(--taban-green); font-weight: 800; }
.taban-account-order-hero { padding: clamp(22px,2.5vw,30px); border-radius: 14px; background: color-mix(in srgb, var(--taban-text) 92%, var(--taban-surface)); color: var(--taban-surface); }
.taban-account-order-hero span { color: var(--taban-primary-soft); font-size: 12px; }
.taban-account-order-hero h2 { margin: 7px 0; color: var(--taban-surface); font-size: clamp(22px,2.6vw,29px); }
.taban-account-order-hero p { max-width: 63ch; margin: 7px 0; color: var(--taban-green-soft); line-height: 1.7; }
.taban-account-order-hero a { color: var(--taban-primary-soft); }
.taban-account-order-item { display: grid; grid-template-columns: 78px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--taban-border); }
.taban-account-order-item img { width: 78px; height: 78px; border-radius: 10px; background: var(--taban-bg); object-fit: contain; }
.taban-account-order-item small { display: block; color: var(--taban-text-muted); }
.taban-account-order-item strong { white-space: nowrap; }
.taban-account-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.taban-account-detail-grid .taban-account-section { padding: 21px; border-radius: 13px; background: var(--taban-green-soft); }
.taban-account-muted { color: #62544c; line-height: 1.75; }
.taban-account-totals { margin: 0; }
.taban-account-totals > div { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
.taban-account-page .cosmetics-address-modal .modal-content { border-radius: 15px; background: var(--taban-surface); }
.taban-account-page .cosmetics-address-modal .modal-header { background: var(--taban-green-soft); }
.taban-account-page .cosmetics-address-modal :is(input,select,textarea) { border-color: var(--taban-border); }
.taban-account-page :is(a,button,input,select,textarea):focus-visible, .taban-factor-page :is(a,button):focus-visible { outline: 2px solid var(--taban-primary); outline-offset: 3px; }

.taban-factor-page { background: var(--taban-bg); }
.taban-factor { min-height: 100vh; padding: clamp(18px,2.6vw,36px) 16px; color: var(--taban-text); }
.taban-factor-sheet { max-width: 1120px; margin: auto; padding: clamp(24px,3.5vw,44px); border-radius: 14px; background: var(--taban-surface); box-shadow: var(--taban-shadow); }
.taban-factor-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 20px; border-bottom: 2px solid var(--taban-text); }
.taban-factor-brand { display: flex; align-items: center; gap: 20px; }
.taban-factor-brand img { width: 86px; height: auto; object-fit: contain; }
.taban-factor-brand span { color: var(--taban-green); font-size: 12px; font-weight: 800; }
.taban-factor-brand h1 { margin: 2px 0; font-size: clamp(25px,3vw,34px); }
.taban-factor-brand p { margin: 0; color: var(--taban-text-muted); }
.taban-factor-id { display: grid; gap: 5px; color: var(--taban-text-muted); font-size: 12px; }
.taban-factor-id strong { color: var(--taban-text); font-size: 16px; }
.taban-factor-nav { display: flex; flex-wrap: wrap; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--taban-border); }
.taban-factor-nav a { color: var(--taban-green); text-decoration: none; font-weight: 750; }
.taban-factor-parties { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin: 22px 0; }
.taban-factor-parties > div { padding: 18px; border-radius: 10px; background: var(--taban-green-soft); }
.taban-factor h2 { margin: 0 0 10px; font-size: 20px; }
.taban-factor-parties p { margin: 0; }
.taban-factor .taban-account-order-item { grid-template-columns: 72px minmax(0,1fr) auto; }
.taban-factor-total { display: flex; justify-content: space-between; gap: 15px; padding: 20px 0; border-top: 2px solid var(--taban-text); font-size: 18px; }
.taban-factor-note { color: #62544c; line-height: 1.75; }
.taban-factor-actions { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 24px; }
.taban-factor-actions a { color: var(--taban-green); }
/* Keep the first section attached to its page heading. */
.taban-account-content > .taban-account-section:first-of-type { margin-top: 0; }
.taban-account-form h3 + .taban-account-fields { padding: 18px; border-radius: 12px; background: var(--taban-bg); }
.taban-account-section:has(.taban-account-section-actions) { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: 16px; }
.taban-account-section:has(.taban-account-section-actions) > h2 { margin-bottom: 0; }
.taban-account-section:has(.taban-account-section-actions) > .taban-account-address-list { grid-column: 1/-1; margin-top: 15px; }
.taban-account-product-grid > .taban-account-empty { grid-column: 1/-1; justify-items: center; text-align: center; }
.taban-account-section:has(.taban-account-address-empty) > .taban-account-section-actions { display: none; }
.taban-account-address-empty { min-height: 236px; }
.taban-account-address-empty strong { color: var(--taban-text); font-size: 19px; }
.taban-account-address-empty .taban-account-primary { margin-top: 5px; }
.taban-account-loading { display: grid; min-height: 118px; place-items: center; margin: 0; border-radius: 11px; background: var(--taban-green-soft); color: #62544c; font-size: 13px; }
.taban-account-order-item small { color: #62544c; line-height: 1.65; }
.taban-account-order-hero + .taban-account-section { margin-top: 20px; }
.taban-account-detail-grid + .taban-account-primary { margin-top: 18px; }
.taban-auth-page .cosmetics-auth-steps li.is-active > span { box-shadow: 0 0 0 3px var(--taban-primary-soft); }
.taban-auth-page .cosmetics-auth-code { gap: 7px; }
.taban-auth-page .cosmetics-auth-code input { min-height: 49px; border-radius: 9px; font-size: 19px; }
.taban-auth-page .cosmetics-auth-actions { margin-top: 16px; }
.taban-auth-page .cosmetics-auth-support { max-width: 45ch; margin: 16px auto 0; line-height: 1.7; }
@media (max-width: 991px) {
 .taban-account-layout { grid-template-columns: minmax(0,1fr); gap: 13px; }
 .taban-account-rail { position: static; display: flex; align-items: center; background: var(--taban-bg); color: var(--taban-text); }
 .taban-account-rail-intro, .taban-account-shop { display: none; }
 .taban-account-nav { display: flex; width: 100%; gap: 5px; overflow-x: auto; padding: 7px; scrollbar-width: thin; }
 .taban-account-nav-link { flex: 0 0 auto; white-space: nowrap; color: var(--taban-text); }
 .taban-account-nav-link > i { color: var(--taban-green); }
 .taban-account-nav-link:hover { color: var(--taban-text); background: var(--taban-green-soft); }
 .taban-account-content { max-width: none; }
}
@media (max-width: 767px) {
 .taban-account-section:has(.taban-account-section-actions) { grid-template-columns: 1fr; }
 .taban-account-section:has(.taban-account-section-actions) > .taban-account-section-actions { margin-top: 2px; text-align: right; }
 .taban-account-section:has(.taban-account-section-actions) > .taban-account-address-list { margin-top: 11px; }
 .taban-account-form h3 + .taban-account-fields { padding: 15px; }
 .taban-account-welcome { min-height: 0; }
}
@media (max-width: 767px) {
 .taban-account-page .taban-account { padding: 14px 0 108px; }
 .taban-account-breadcrumb { display: none; }
 .taban-account-layout { gap: 10px; }
 .taban-account-heading { margin-bottom: 14px; }
 .taban-account-heading h1 { font-size: 29px; }
 .taban-account-shortcuts { grid-template-columns: 1fr; }
 .taban-account-shortcut { min-height: 71px; }
 .taban-account-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
 .taban-account-product > div { padding: 11px; }
 .taban-account-product h3 { font-size: 14px; }
 .taban-account-product-actions { flex-wrap: wrap; }
 .taban-account-fields { grid-template-columns: 1fr; }
 .taban-account-section-actions { margin: 0 0 16px; text-align: right; }
 .taban-account-order-body { flex-wrap: wrap; }
 .taban-account-order-item { grid-template-columns: 68px minmax(0,1fr); }
 .taban-account-order-item img { width: 68px; height: 68px; }
 .taban-account-order-item > strong { grid-column: 1/-1; text-align: left; }
 .taban-account-detail-grid, .taban-factor-parties { grid-template-columns: 1fr; gap: 7px; }
 .taban-factor-header { align-items: flex-start; flex-direction: column; gap: 12px; }
 .taban-factor-brand img { width: 70px; }
 .taban-factor .taban-account-order-item { grid-template-columns: 56px minmax(0,1fr); }
 .taban-factor .taban-account-order-item img { width: 56px; height: 56px; }
 .taban-auth-page .cosmetics-auth-shell { padding: 18px 13px 38px; }
}
@media print {
 .taban-factor-page { background: #fff; }
 .taban-factor { padding: 10mm; }
 .taban-factor-sheet { max-width: none; padding: 0; border-radius: 0; box-shadow: none; }
 .taban-factor-nav, .taban-factor-actions { display: none; }
 .taban-factor .taban-account-order-item { break-inside: avoid; }
}

/* Public editorial pages: a quiet workshop notebook alongside the approved storefront. */
.taban-content-page .taban-content { padding: 22px 0 56px; background: var(--taban-surface); color: var(--taban-text); }
.taban-content-page .taban-content-container { max-width: 1320px; }
.taban-content-page .taban-content-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; color: var(--taban-text-muted); font-size: 12px; }
.taban-content-page .taban-content-breadcrumb a { color: var(--taban-green); text-decoration: none; }
.taban-content-page .taban-content-breadcrumb i { font-size: 10px; color: var(--taban-taupe); }
.taban-content-page .taban-content-kicker { display: block; margin-bottom: 9px; color: var(--taban-green); font-size: 12px; font-weight: 850; }
.taban-content-page .taban-content :is(h1,h2,h3) { color: var(--taban-text); font-weight: 850; }
.taban-content-page .taban-content p { color: #62544c; line-height: 1.95; }
.taban-content-page .taban-content :is(a,button,input,textarea):focus-visible { outline: 2px solid var(--taban-primary); outline-offset: 3px; }
.taban-content-page .taban-content-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 10px 19px; border: 0; border-radius: 9px; background: var(--taban-primary); color: var(--taban-text); font-weight: 850; text-decoration: none; cursor: pointer; }
.taban-content-page .taban-content-button:hover { background: var(--taban-primary-hover); color: var(--taban-text); }
.taban-content-page .taban-content-text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--taban-green); font-weight: 800; text-decoration: none; }
.taban-content-page .taban-content-text-link:hover { color: var(--taban-green-hover); text-decoration: underline; }
.taban-content-page .taban-content-section { margin-top: clamp(34px,4vw,54px); }
.taban-content-page .taban-content-section-head { margin-bottom: 19px; }
.taban-content-page .taban-content-section-head h2 { margin: 0; font-size: clamp(23px,2.6vw,30px); line-height: 1.5; }
.taban-content-page .taban-content-section-head p { max-width: 66ch; margin: 5px 0 0; }

.taban-content-page .taban-content-hero { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); min-height: 435px; overflow: hidden; border-radius: 18px; background: var(--taban-green); }
.taban-content-page .taban-content-hero-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(30px,4vw,58px); }
.taban-content-page .taban-content-hero-copy .taban-content-kicker { color: var(--taban-primary-soft); }
.taban-content-page .taban-content-hero-copy h1 { max-width: 13ch; margin: 0 0 16px; color: var(--taban-surface); font-size: clamp(33px,3.8vw,54px); line-height: 1.47; }
.taban-content-page .taban-content-hero-copy p { max-width: 51ch; margin: 0 0 24px; color: var(--taban-green-soft); }
.taban-content-page .taban-content-hero-media { display: block; min-width: 0; }
.taban-content-page .taban-content-hero-media img { display: block; width: 100%; height: 100%; min-height: 435px; object-fit: cover; }
.taban-content-page .taban-content-intro { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: clamp(18px,3vw,48px); align-items: start; padding: clamp(25px,3vw,38px) 0; border-bottom: 1px solid var(--taban-border); }
.taban-content-page .taban-content-intro h2 { max-width: 18ch; margin: 0; font-size: clamp(25px,2.7vw,34px); line-height: 1.55; }
.taban-content-page .taban-content-intro p { max-width: 66ch; margin: 0; }
.taban-content-page .taban-about-paths { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.taban-content-page .taban-about-path { display: grid; grid-template-columns: 78px minmax(0,1fr) auto; align-items: center; gap: 13px; min-width: 0; padding: 12px; border: 1px solid var(--taban-border); border-radius: 12px; background: var(--taban-surface); color: var(--taban-text); text-decoration: none; }
.taban-content-page .taban-about-path:hover { border-color: var(--taban-green); background: var(--taban-green-soft); color: var(--taban-text); }
.taban-content-page .taban-about-path img { width: 78px; height: 78px; border-radius: 8px; background: var(--taban-bg); object-fit: cover; }
.taban-content-page .taban-about-path span { display: grid; gap: 3px; color: inherit; }
.taban-content-page .taban-about-path small { color: #62544c; line-height: 1.65; }
.taban-content-page .taban-about-path > i { color: var(--taban-green); }
.taban-content-page .taban-content-endnote { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-top: clamp(34px,4vw,54px); padding: clamp(26px,3vw,40px); border-radius: 16px; background: var(--taban-green-soft); }
.taban-content-page .taban-content-endnote h2 { margin: 0 0 6px; font-size: clamp(22px,2.4vw,29px); }
.taban-content-page .taban-content-endnote p { max-width: 62ch; margin: 0; }
.taban-content-page .taban-content-endnote > a { flex: 0 0 auto; }

.taban-content-page .taban-content-lead { padding: clamp(31px,4vw,50px); border-radius: 17px; background: var(--taban-text); }
.taban-content-page .taban-content-lead .taban-content-kicker { color: var(--taban-primary-soft); }
.taban-content-page .taban-content-lead h1 { max-width: 18ch; margin: 0 0 10px; color: var(--taban-surface); font-size: clamp(32px,3.7vw,51px); line-height: 1.45; }
.taban-content-page .taban-content-lead p { max-width: 67ch; margin: 0; color: var(--taban-green-soft); }
.taban-content-page .taban-content-intro + .taban-content-section { margin-top: clamp(28px,3vw,38px); }
.taban-content-page .taban-contact-lead { padding-block: clamp(26px,3vw,39px); }
.taban-content-page .taban-contact-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: clamp(22px,3vw,42px); align-items: start; margin-top: 22px; }
.taban-content-page .taban-contact-form-surface { padding: clamp(24px,3vw,35px); border: 1px solid var(--taban-border); border-radius: 15px; background: var(--taban-surface); }
.taban-content-page .taban-contact-form-surface h2, .taban-content-page .taban-contact-aside h2 { margin: 0 0 6px; font-size: clamp(23px,2.3vw,29px); }
.taban-content-page .taban-contact-form-surface > p { max-width: 58ch; margin: 0 0 24px; }
.taban-content-page .taban-contact-form .cosmetics-field { display: grid; gap: 7px; margin-bottom: 17px; }
.taban-content-page .taban-contact-form label { color: var(--taban-text); font-size: 13px; font-weight: 800; }
.taban-content-page .taban-contact-form :is(input,textarea) { width: 100%; min-width: 0; border-color: var(--taban-border); border-radius: 9px; background: var(--taban-surface); color: var(--taban-text); }
.taban-content-page .taban-contact-form .form-control:focus { border-color: var(--taban-green); outline: 2px solid var(--taban-primary-soft); outline-offset: 2px; }
.taban-content-page .taban-contact-form textarea { min-height: 155px; resize: vertical; }
.taban-content-page .taban-contact-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.taban-content-page .taban-contact-feedback { margin: 0; color: var(--taban-green); font-size: 13px; }
.taban-content-page .taban-contact-feedback[hidden] { display: none; }
.taban-content-page .taban-contact-aside { padding: clamp(24px,3vw,34px); border-radius: 15px; background: var(--taban-green-soft); }
.taban-content-page .taban-contact-aside > p { margin-bottom: 20px; }
.taban-content-page .taban-contact-pending { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--taban-green) 20%, transparent); color: var(--taban-text); }
.taban-content-page .taban-contact-pending i { color: var(--taban-green); font-size: 18px; }
.taban-content-page .taban-contact-next { display: grid; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--taban-green) 20%, transparent); }
.taban-content-page .taban-contact-next a { color: var(--taban-green); font-weight: 800; text-decoration: none; }

.taban-content-page .taban-blog-lead { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding-block: clamp(27px,3vw,40px); }
.taban-content-page .taban-blog-topics { display: flex; max-width: 330px; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.taban-content-page .taban-blog-topics a { padding: 8px 11px; border: 1px solid rgb(255 253 247 / 32%); border-radius: 999px; color: var(--taban-surface); font-size: 12px; text-decoration: none; }
.taban-content-page .taban-blog-topics a:hover { background: var(--taban-green); border-color: var(--taban-green); }
.taban-content-page .taban-blog-feature { display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr); min-height: 340px; overflow: hidden; margin-top: 18px; border-radius: 15px; background: var(--taban-green-soft); scroll-margin-top: 100px; }
.taban-content-page .taban-blog-feature-media { min-width: 0; }
.taban-content-page .taban-blog-feature-media img { display: block; width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.taban-content-page .taban-blog-feature-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(24px,3vw,38px); }
.taban-content-page .taban-blog-feature-copy h2 { margin: 0 0 11px; font-size: clamp(25px,2.7vw,35px); line-height: 1.5; }
.taban-content-page .taban-blog-feature-copy h2 a { color: inherit; text-decoration: none; }
.taban-content-page .taban-blog-feature-copy p { max-width: 48ch; margin: 0 0 20px; }
.taban-content-page .taban-blog-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.taban-content-page .taban-blog-card { min-width: 0; overflow: hidden; border: 1px solid var(--taban-border); border-radius: 14px; background: var(--taban-surface); scroll-margin-top: 100px; }
.taban-content-page .taban-blog-card > img { display: block; width: 100%; height: auto; aspect-ratio: 2.25; object-fit: cover; }
.taban-content-page .taban-blog-card > div { padding: 18px 21px 20px; }
.taban-content-page .taban-blog-card h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.55; }
.taban-content-page .taban-blog-card p { margin: 0 0 12px; }
.taban-content-page .taban-blog-card a { color: var(--taban-green); font-weight: 850; text-decoration: none; }

.taban-content-page .taban-article-header { max-width: 850px; margin: 16px auto 0; }
.taban-content-page .taban-article-header h1 { margin: 0 0 12px; font-size: clamp(33px,4vw,52px); line-height: 1.48; }
.taban-content-page .taban-article-header p { max-width: 66ch; margin: 0; font-size: 17px; }
.taban-content-page .taban-article-hero { max-width: 1050px; overflow: hidden; margin: 25px auto 0; border-radius: 16px; background: var(--taban-bg); }
.taban-content-page .taban-article-hero img { display: block; width: 100%; max-height: 590px; aspect-ratio: 1.65; object-fit: cover; }
.taban-content-page .taban-article-body { max-width: 760px; margin: 0 auto; padding: clamp(23px,2.8vw,35px) 0 0; font-size: 17px; }
.taban-content-page .taban-article-body p { margin: 0 0 16px; color: var(--taban-text); line-height: 2.1; }
.taban-content-page .taban-article-body h2 { margin: 28px 0 9px; font-size: clamp(22px,2.5vw,28px); line-height: 1.55; }
.taban-content-page .taban-article-body ul { margin: 6px 0 21px; padding-inline-start: 24px; line-height: 2; }
.taban-content-page .taban-article-callout { margin: 25px 0; padding: 20px 24px; border-inline-start: 4px solid var(--taban-green); border-radius: 10px; background: var(--taban-green-soft); }
.taban-content-page .taban-article-callout p { margin: 0; }
.taban-content-page .taban-article-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 760px; margin: 23px auto 0; }
.taban-content-page .taban-article-related { max-width: 1050px; margin-inline: auto; }
.taban-content-page .taban-article-related-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.taban-content-page .taban-article-related-grid a { display: flex; align-items: center; gap: 15px; min-width: 0; padding: 10px; border: 1px solid var(--taban-border); border-radius: 11px; color: var(--taban-text); font-weight: 800; text-decoration: none; }
.taban-content-page .taban-article-related-grid a:hover { border-color: var(--taban-green); background: var(--taban-green-soft); }
.taban-content-page .taban-article-related-grid img { width: 102px; height: 76px; border-radius: 7px; object-fit: cover; }
.taban-content-page .taban-article-related-grid span { display: flex; flex: 1; justify-content: space-between; color: inherit; }

.taban-content-page .taban-not-found { min-height: 0; }
.taban-content-page .taban-recovery { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); align-items: center; gap: clamp(24px,4vw,60px); margin: 25px auto 0; padding: clamp(28px,4vw,52px); border-radius: 18px; background: var(--taban-text); }
.taban-content-page .taban-recovery .taban-content-kicker { color: var(--taban-primary-soft); }
.taban-content-page .taban-recovery h1 { margin: 0 0 10px; color: var(--taban-surface); font-size: clamp(33px,3.7vw,49px); }
.taban-content-page .taban-recovery p { max-width: 48ch; color: var(--taban-green-soft); }
.taban-content-page .taban-recovery-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 15px 22px; margin-top: 21px; }
.taban-content-page .taban-recovery .taban-content-text-link { color: var(--taban-surface); }
.taban-content-page .taban-recovery-search { display: grid; gap: 12px; padding: 21px; border-radius: 13px; background: var(--taban-green-soft); }
.taban-content-page .taban-recovery-search label { color: var(--taban-text); font-weight: 800; }
.taban-content-page .taban-recovery-search > div { display: flex; overflow: hidden; border: 1px solid var(--taban-border); border-radius: 9px; background: var(--taban-surface); }
.taban-content-page .taban-recovery-search input { flex: 1; min-width: 0; padding: 11px 13px; border: 0; background: transparent; color: var(--taban-text); }
.taban-content-page .taban-recovery-search button { width: 48px; border: 0; background: var(--taban-primary); color: var(--taban-text); }

@media (max-width: 991px) {
  .taban-content-page .taban-content-hero { grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: 390px; }
  .taban-content-page .taban-content-hero-media img { min-height: 390px; }
  .taban-content-page .taban-about-paths { grid-template-columns: minmax(0,1fr); }
  .taban-content-page .taban-contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .taban-content-page .taban-content { padding: 17px 0 110px; }
  .taban-content-page .taban-content-hero, .taban-content-page .taban-blog-feature { grid-template-columns: 1fr; }
  .taban-content-page .taban-content-hero-copy { padding: 30px; }
  .taban-content-page .taban-content-hero-media img { height: 270px; min-height: 0; }
  .taban-content-page .taban-content-intro { grid-template-columns: 1fr; gap: 10px; }
  .taban-content-page .taban-blog-lead { align-items: start; flex-direction: column; }
  .taban-content-page .taban-blog-topics { max-width: none; justify-content: flex-start; }
  .taban-content-page .taban-blog-feature-media img { min-height: 0; aspect-ratio: 1.7; }
  .taban-content-page .taban-blog-grid { grid-template-columns: 1fr; }
  .taban-content-page .taban-article-hero img { aspect-ratio: 1.45; }
  .taban-content-page .taban-article-actions { align-items: flex-start; flex-direction: column; }
  .taban-content-page .taban-recovery { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .taban-content-page .taban-content-breadcrumb { margin-bottom: 13px; }
  .taban-content-page .taban-content-lead { padding: 26px 23px; }
  .taban-content-page .taban-content-hero-copy { padding: 27px 24px; }
  .taban-content-page .taban-content-hero-copy h1 { font-size: 32px; }
  .taban-content-page .taban-content-hero-media img { height: 235px; }
  .taban-content-page .taban-content-endnote { align-items: start; flex-direction: column; }
  .taban-content-page .taban-blog-feature-copy { padding: 24px; }
  .taban-content-page .taban-blog-card > div { padding: 19px; }
  .taban-content-page .taban-article-header h1 { font-size: 32px; }
  .taban-content-page .taban-article-header p, .taban-content-page .taban-article-body { font-size: 16px; }
  .taban-content-page .taban-article-hero img { aspect-ratio: 1.28; }
  .taban-content-page .taban-article-related-grid { grid-template-columns: 1fr; }
  .taban-content-page .taban-recovery { gap: 24px; margin-top: 17px; padding: 26px 22px; }
  .taban-content-page .taban-recovery-search { padding: 17px; }
  .taban-content-page .taban-not-found { min-height: 0; }
}

/* Shared-shell integration: pending contact data and keyboard-open category navigation. */
/* The legacy focus-within rule in style.css uses !important; Escape must still dismiss it. */
body.taban-page .custom-mega-menu.is-dismissed .custom-mega-content { display: none !important; }
body.taban-page .cosmetics-footer .taban-shell-pending { max-width: 25ch; margin: 8px 0 0; color: var(--taban-green-soft); font-size: 13px; line-height: 1.8; }
body.taban-page #offcanvasCart :is(a,button):focus-visible { outline: 2px solid var(--taban-primary); outline-offset: 2px; }











@media (max-width: 767.98px) {

    .taban-homepage .taban-promotion .swiper-slide {
        min-width: 0;
        padding: 0 3px !important;
    }

    .taban-homepage .taban-promotion .product-box {
        min-width: 0;
        padding: 10px 7px 14px;
        gap: 7px;
    }

    .taban-homepage .taban-promotion .product-timer {
        min-width: 0;
        padding: 6px 3px;
    }

    .taban-homepage .taban-promotion .countdown {
        flex-direction: row;
        direction: rtl;
        gap: 3px;
    }

    .taban-homepage .taban-promotion .countdown-container {
        flex: 1 1 0;
        min-width: 0;
        text-align: center;
    }

    .taban-homepage .taban-promotion .countdown-value {
        min-width: 0;
        width: 100%;
        font-size: 12px;
        padding: 3px 1px;
    }

    .taban-homepage .taban-promotion .countdown-heading {
        font-size: 9px;
    }

    .taban-homepage .taban-promotion .product-image {
        min-height: 105px;
        max-height: 165px;
    }

    .taban-homepage .taban-promotion .product-title .title p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 12px;
        line-height: 1.7;
    }

    .taban-homepage .taban-promotion .product-image .timer-label {
        top: 6px;
        inset-inline-start: 6px;
    }

    .taban-homepage .taban-promotion .product-image .timer-label span {
        font-size: 10px;
        padding: 2px 4px;
    }

    .taban-homepage .taban-promotion .product-action .price {
        flex-wrap: wrap;
        gap: 4px;
    }

    .taban-homepage .taban-promotion .product-action .new-price {
        font-size: 12px;
    }

    .taban-homepage .taban-promotion .product-action .old-price {
        font-size: 10px;
    }
}



/* Enamad Footer */

.taban-enamad-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 10px;
}

.taban-enamad-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    min-height: 120px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #e9dfbf;
    border-radius: 14px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.taban-enamad-box img {
    display: block;
    max-width: 100%;
    max-height: 105px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.taban-enamad-caption {
    font-size: 11px;
    font-weight: 600;
    color: #f2e7bd;
    text-align: center;
}