/**
 * Almira Bebek Theme Styles
 * 
 * @package Almira_Bebek
 */

/* ==========================================================================
   GLOBAL CONTAINER
   ========================================================================== */

body {
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}

@media (min-width: 1024px) {
    .container {
        padding-left: var(--page-gutter-lg);
        padding-right: var(--page-gutter-lg);
    }
}

/* ==========================================================================
   TOP BAR — Premium v3
   Ultra-slim utility strip. Warm, elegant, conversion-focused.
   ========================================================================== */

.topbar {
    --tb-bg: var(--topbar-bg, #1a1a2e);
    --tb-color: var(--topbar-color, #f0ece2);
    background: var(--tb-bg);
    color: var(--tb-color);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    line-height: 1;
    position: relative;
    z-index: calc(var(--z-dropdown) + 2);
}

/* Desktop layout */
.topbar__desktop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 34px;
}

.topbar__mobile { display: none; }

/* Benefits */
.topbar__benefits {
    display: flex;
    align-items: center;
    gap: 0;
}

.topbar__pill {
    padding: 0 12px;
    white-space: nowrap;
    opacity: 0.88;
    transition: opacity 0.2s;
}
.topbar__pill:hover { opacity: 1; }

.topbar__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.3;
    flex-shrink: 0;
}

/* Utilities (right) */
.topbar__utils {
    display: flex;
    align-items: center;
    gap: 4px;
}

.topbar__util {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
    opacity: 0.85;
}
.topbar__util:hover {
    background: rgba(255,255,255,0.08);
    opacity: 1;
}

.topbar__util--wa {
    color: #25d366;
    opacity: 1;
}
.topbar__util--wa:hover {
    background: rgba(37,211,102,0.12);
}
.topbar__util--wa span {
    color: var(--tb-color);
}

.topbar__theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.06);
    color: inherit;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    margin-left: 4px;
}
.topbar__theme-btn:hover {
    background: rgba(255,255,255,0.14);
    transform: rotate(15deg);
}

/* Theme toggle icon visibility */
html[data-theme="light"] .theme-icon--dark,
html:not([data-theme]) .theme-icon--dark { display: none; }
html[data-theme="dark"] .theme-icon--light { display: none; }
html[data-theme="dark"] .theme-icon--dark { display: inline-flex; }

/* Mobile ticker */
.topbar__ticker {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    animation: ticker-slide 20s linear infinite;
    white-space: nowrap;
}
.topbar__ticker-link {
    color: inherit;
    text-decoration: none;
}
.topbar__ticker-link:hover { text-decoration: underline; }
.topbar__ticker-text { opacity: 0.9; }

@keyframes ticker-slide {
    0%   { transform: translateX(60%); }
    100% { transform: translateX(-60%); }
}


/* ==========================================================================
   MAIN HEADER — Premium v3
   Luxury e-commerce: logo left, full search center, actions right.
   Glass-morphism sticky. Shrinks on scroll.
   ========================================================================== */

.header {
    background: var(--color-surface, #fff);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    position: relative;
    z-index: var(--z-dropdown);
    transition: background 0.35s, box-shadow 0.35s, border-color 0.35s;
}

/* Sticky behavior — entire site-header becomes fixed */
.site-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header-sticky);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header.is-sticky .header {
    background: rgba(255,255,255,0.92);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    box-shadow: 0 1px 24px rgba(0,0,0,0.06);
    border-bottom-color: transparent;
}

/* Hide on scroll-down */
.site-header.is-hidden {
    transform: translateY(-100%);
}

/* Sticky: hide topbar for compact header */
.site-header.is-sticky .topbar {
    display: none;
}

/* Sticky: mnav bottom edge */
.site-header.is-sticky .mnav {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.header__row {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 72px;
    transition: height 0.3s ease;
}

.site-header.is-sticky .header__row {
    height: 60px;
}

/* ── Hamburger (mobile) ── */
.header__hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: var(--color-text, #1a1a2e);
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.header__hamburger:hover { background: rgba(0,0,0,0.04); }

/* ── Logo ── */
.header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.header__logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s;
}
.header__logo a:hover { opacity: 0.8; }

.header__logo img,
.header__logo .custom-logo {
    height: 52px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    transition: height 0.3s ease;
}

.site-header.is-sticky .header__logo img,
.site-header.is-sticky .header__logo .custom-logo {
    height: 42px;
}

.header__logo-text {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text, #1a1a2e);
    text-decoration: none;
    letter-spacing: -0.02em;
}

/* ── Search Bar ── */
.header__search {
    flex: 1;
    max-width: 560px;
    margin: 0 auto;
    position: relative;
}

.header__search-form {
    display: flex;
    align-items: center;
    height: 44px;
    background: var(--color-surface-alt, #f5f3ef);
    border: 1.5px solid transparent;
    border-radius: 12px;
    padding: 0 6px 0 14px;
    gap: 8px;
    transition: all 0.3s ease;
}

.header__search-form:focus-within {
    background: #fff;
    border-color: var(--color-primary, #7dba84);
    box-shadow: 0 0 0 4px rgba(125,186,132,0.10), 0 4px 16px rgba(0,0,0,0.06);
}

.header__search-ico {
    flex-shrink: 0;
    color: var(--color-text-muted, #888);
    transition: color 0.3s;
}
.header__search-form:focus-within .header__search-ico {
    color: var(--color-primary, #7dba84);
}

.header__search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--color-text, #1a1a2e);
    outline: none;
    min-width: 0;
    font-family: inherit;
}
.header__search-input::placeholder {
    color: var(--color-text-muted, #999);
    font-weight: 400;
}

/* Keyboard shortcut hint */
.header__search-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    font-size: 0.68rem;
    font-family: inherit;
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 5px;
    color: var(--color-text-muted, #999);
    white-space: nowrap;
    pointer-events: none;
    line-height: 1.5;
}
.header__search-form:focus-within .header__search-kbd { display: none; }

.header__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 9px;
    background: var(--color-primary, #7dba84);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.15s;
}
.header__search-btn:hover {
    background: var(--color-primary-hover, #6aab72);
    transform: scale(1.04);
}

/* ── Action Icons ── */
.header__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.header__icon {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    color: var(--color-text, #1a1a2e);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    border: none;
    background: none;
}
.header__icon:hover {
    background: rgba(0,0,0,0.04);
    color: var(--color-primary, #7dba84);
}

.header__icon svg {
    transition: transform 0.2s;
}
.header__icon:hover svg {
    transform: translateY(-1px);
}

.header__icon-text {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-top: 2px;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.header__icon:hover .header__icon-text { opacity: 1; }

/* Mobile search icon */
.header__icon--search-m { display: none; }

/* Badges */
.action-badge {
    position: absolute;
    top: 4px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-accent, #e88473);
    color: #fff;
    font-size: 0.64rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.action-badge[data-wishlist-count="0"],
.action-badge[data-cart-count="0"] { transform: scale(0); }
.action-badge:not([data-wishlist-count="0"]):not([data-cart-count="0"]) {
    transform: scale(1);
}

/* Tooltip on hover (desktop) */
.header__icon[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) translateY(100%) scale(0.9);
    background: var(--color-text, #1a1a2e);
    color: #fff;
    font-size: 0.68rem;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 10;
}
.header__icon[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(100%) scale(1);
}


/* ==========================================================================
   MEGA MENU — Premium v4.0 (Trendyol / H&M / ASOS Style)
   ========================================================================== */

/* ── Nav bar ── */
.mnav {
    background: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    z-index: var(--z-dropdown);
}

.mnav__list {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mnav__item {
    position: relative;
}

/* ── Nav link ── */
.mnav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 18px;
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: color 180ms ease, background-color 180ms ease;
    position: relative;
}

.mnav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18px;
    right: 18px;
    height: 2.5px;
    background: var(--color-primary);
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mnav__link:hover,
.mnav__item--mega:hover .mnav__link {
    color: var(--color-primary);
}

.mnav__link:hover::after,
.mnav__item--mega:hover .mnav__link::after {
    transform: scaleX(1);
}

/* ── Icon in nav ── */
.mnav__ico {
    display: inline-flex;
    opacity: 0.65;
    transition: opacity 180ms ease;
}
.mnav__link:hover .mnav__ico,
.mnav__item--mega:hover .mnav__ico {
    opacity: 1;
}

/* ── Chevron ── */
.mnav__chevron {
    display: inline-flex;
    margin-left: -2px;
    transition: transform 250ms ease;
}
.mnav__item--mega:hover .mnav__chevron {
    transform: rotate(180deg);
}

/* ── CTA item (Kampanyalar) ── */
.mnav__item--cta .mnav__link {
    color: var(--color-cta);
    font-weight: 600;
}
.mnav__item--cta .mnav__link:hover {
    color: var(--color-cta-hover);
}
.mnav__item--cta .mnav__link::after {
    background: var(--color-cta);
}

/* ── "Yeni" badge ── */
.mnav__badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 20px;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   MEGA DROPDOWN — Full-width panel
   ═══════════════════════════════════════════════════════════ */

.mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100vw;
    max-width: var(--container-max-width);
    z-index: var(--z-dropdown);
    pointer-events: none;
}

/* Center mega relative to viewport, not parent item */
.mnav { position: relative; }
.mnav__item--mega { position: static; }
.mnav__item--mega .mega { left: 0; right: 0; transform: none; }

.mega__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.12);
    opacity: 0;
    transition: opacity 200ms ease;
    z-index: -1;
    pointer-events: none;
}

.mega__body {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 20px 60px -10px rgba(0,0,0,0.12), 0 8px 24px -6px rgba(0,0,0,0.06);
    padding: 28px 0;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover reveal */
.mnav__item--mega:hover .mega {
    pointer-events: auto;
}
.mnav__item--mega:hover .mega__body {
    opacity: 1;
    transform: translateY(0);
}
.mnav__item--mega:hover .mega__backdrop {
    opacity: 1;
}

.mega[hidden] {
    display: block;
}

/* ── Grid: columns + promo ── */
.mega__grid {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 32px;
    align-items: start;
}

.mega__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 24px;
}

/* ── Column title ── */
.mega__col-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--color-primary);
    transition: color 180ms ease;
}

.mega__col-arrow {
    display: inline-flex;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.mega__col-title:hover {
    color: var(--color-primary);
}
.mega__col-title:hover .mega__col-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ── Sub links ── */
.mega__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mega__link {
    display: block;
    padding: 6px 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 150ms ease, padding-left 150ms ease;
    border-radius: 4px;
}

.mega__link:hover {
    color: var(--color-primary);
    padding-left: 6px;
}

/* ── Promo banner ── */
.mega__promo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 20px;
    border-radius: 14px;
    min-height: 180px;
}

.mega__promo--soft-teal {
    background: linear-gradient(145deg, #e6faf8 0%, #d1f3ef 100%);
}
.mega__promo--warm-coral {
    background: linear-gradient(145deg, #fef0ec 0%, #fdddd4 100%);
}

.mega__promo-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

.mega__promo-desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0 0 16px;
}

.mega__promo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-primary);
    border-radius: 8px;
    text-decoration: none;
    transition: background 180ms ease, transform 180ms ease;
    align-self: flex-start;
}

.mega__promo-btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

/* ==========================================================================
   MOBILE MENU DRAWER — Premium v4.0
   ========================================================================== */

/* ── Backdrop ── */
.mdrawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity 280ms ease, visibility 280ms ease;
}
.mdrawer-backdrop.is-active {
    opacity: 1;
    visibility: visible;
}
.mdrawer-backdrop[hidden] {
    display: block;
}

/* ── Drawer shell ── */
.mdrawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 88vw;
    background: var(--color-bg-white);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    transform: translateX(-102%);
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
    box-shadow: 8px 0 40px rgba(0,0,0,0.12);
    /* Safe area: extend background past any rounded screen corners */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mdrawer.is-active {
    transform: translateX(0);
}
.mdrawer[hidden] {
    display: flex;
}

/* ── Header ── */
.mdrawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(20,184,166,0.04), transparent);
}

.mdrawer__user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.mdrawer__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mdrawer__avatar-letter {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}

.mdrawer__greeting {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mdrawer__greeting-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdrawer__login-link {
    font-size: 0.75rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.mdrawer__close {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--color-text-muted);
    transition: background 150ms ease, color 150ms ease;
    flex-shrink: 0;
}
.mdrawer__close:hover {
    background: var(--color-bg-light);
    color: var(--color-text);
}

/* ── Quick Wizard Actions ── */
.mdrawer__wizards {
    display: flex;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.mdrawer__wizards::-webkit-scrollbar { display: none; }

.mdrawer__wizard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 84px;
    padding: 12px 10px;
    border-radius: 14px;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.mdrawer__wizard:active {
    transform: scale(0.96);
}

.mdrawer__wizard--teal {
    background: linear-gradient(145deg, #e6faf8, #ccf2ed);
    color: #0d7d6e;
}
.mdrawer__wizard--purple {
    background: linear-gradient(145deg, #f0e6ff, #e0d0f8);
    color: #6b3fa0;
}
.mdrawer__wizard--coral {
    background: linear-gradient(145deg, #fef0ec, #fdddd4);
    color: #c24b2e;
}

.mdrawer__wizard-ico {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mdrawer__wizard-txt {
    font-size: 0.6875rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
}

/* ── Scrollable body ── */
.mdrawer__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ── Menu items ── */
.mdrawer__menu {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.mdrawer__menu-item {
    border-bottom: 1px solid rgba(229,231,235,0.6);
}
.mdrawer__menu-item:last-child {
    border-bottom: none;
}

/* Trigger button (has children) */
.mdrawer__trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 18px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 150ms ease;
}
.mdrawer__trigger:hover,
.mdrawer__trigger:active {
    background: var(--color-bg-light);
}

.mdrawer__trigger-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.mdrawer__trigger-txt {
    flex: 1;
    min-width: 0;
}

.mdrawer__trigger-arrow {
    flex-shrink: 0;
    color: var(--color-text-light);
    transition: transform 250ms ease;
}

.mdrawer__trigger[aria-expanded="true"] .mdrawer__trigger-arrow {
    transform: rotate(180deg);
}

/* Direct link (no children) */
.mdrawer__direct {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 18px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    transition: background 150ms ease;
}
.mdrawer__direct:hover,
.mdrawer__direct:active {
    background: var(--color-bg-light);
}

.mdrawer__direct-arrow {
    flex-shrink: 0;
    color: var(--color-text-light);
}

/* CTA item */
.mdrawer__menu-item--cta .mdrawer__trigger,
.mdrawer__menu-item--cta .mdrawer__direct {
    color: var(--color-cta);
    font-weight: 600;
}

/* New dot */
.mdrawer__new-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--color-primary);
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}

/* ── Sub panel (accordion) ── */
.mdrawer__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mdrawer__panel.is-open {
    max-height: 400px;
}
.mdrawer__panel[hidden] {
    display: block;
}

.mdrawer__sub {
    list-style: none;
    margin: 0;
    padding: 0 18px 10px 56px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mdrawer__sub-link {
    display: block;
    padding: 10px 14px;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: 8px;
    transition: background 150ms ease, color 150ms ease;
}
.mdrawer__sub-link:hover,
.mdrawer__sub-link:active {
    background: var(--color-bg-light);
    color: var(--color-primary);
}

/* ── Footer ── */
.mdrawer__foot {
    display: flex;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
    background: var(--color-bg-light);
}

.mdrawer__foot-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 8px;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 150ms ease;
    border-right: 1px solid var(--color-border);
}
.mdrawer__foot-link:last-child {
    border-right: none;
}
.mdrawer__foot-link:hover,
.mdrawer__foot-link:active {
    color: var(--color-primary);
}

/* ==========================================================================
   MOBILE SEARCH OVERLAY — Premium v3
   ========================================================================== */

.mobile-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 16vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.mobile-search-overlay[hidden] { display: none; }
.mobile-search-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.mobile-search-container {
    width: 92%;
    max-width: 480px;
}

.mobile-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    background: var(--color-surface, #fff);
    border-radius: 14px;
    padding: 0 8px 0 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.mobile-search-ico {
    flex-shrink: 0;
    color: var(--color-primary, #7dba84);
}

.mobile-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--color-text, #1a1a2e);
    outline: none;
    font-family: inherit;
}
.mobile-search-input::placeholder {
    color: var(--color-text-muted, #999);
}

.mobile-search-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(0,0,0,0.05);
    border-radius: 10px;
    color: var(--color-text, #1a1a2e);
    cursor: pointer;
    transition: background 0.2s;
}
.mobile-search-close:hover { background: rgba(0,0,0,0.1); }


/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */

.toast-container {
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    z-index: var(--z-tooltip);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-width: 400px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border-left: 4px solid var(--color-primary);
    pointer-events: auto;
    animation: slideIn 0.3s ease;
    position: relative;
    overflow: hidden;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast.is-leaving {
    animation: slideOut 0.3s ease forwards;
}

@keyframes slideOut {
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast--success {
    border-left-color: var(--color-success);
}

.toast--error {
    border-left-color: var(--color-error);
}

.toast--warning {
    border-left-color: var(--color-warning);
}

.toast-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.toast-content {
    flex: 1;
}

.toast-message {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    margin: 0;
}

.toast-close {
    color: var(--color-text-muted);
    padding: var(--spacing-xs);
    margin: calc(-1 * var(--spacing-xs));
    transition: color var(--transition-fast);
}

.toast-close:hover {
    color: var(--color-text);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: var(--color-primary);
    animation: progress 5s linear forwards;
}

@keyframes progress {
    from {
        width: 100%;
    }
    to {
        width: 0;
    }
}

/* ==========================================================================
   MODAL
   ========================================================================== */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.modal-backdrop.is-active {
    opacity: 1;
    visibility: visible;
}

.modal-backdrop[hidden] {
    display: block;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    z-index: var(--z-modal);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-normal);
}

.modal.is-active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.modal-dialog {
    background-color: var(--color-bg-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.modal-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.modal-close {
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.modal-close:hover {
    color: var(--color-text);
}

.modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    max-height: 60vh;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
    margin-top: 0;
}

.footer-widgets {
    padding: var(--spacing-3xl) 0;
}

.footer-widgets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xl);
}

.footer-widget-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-md);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-lg) 0;
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.footer-copyright {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.footer-copyright a {
    color: var(--color-text-inverse);
}

.footer-menu {
    display: flex;
    gap: var(--spacing-lg);
}

.footer-menu a {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.footer-menu a:hover {
    color: var(--color-text-inverse);
}

/* ==========================================================================
   DARK MODE OVERRIDES
   ========================================================================== */

/* ── Top Bar v3 Dark ── */
html[data-theme="dark"] .topbar {
    --tb-bg: #0a0a0f;
    background: var(--tb-bg);
}
html[data-theme="dark"] .topbar__theme-btn {
    background: rgba(255,255,255,0.06);
}

/* ── Header v3 Dark ── */
html[data-theme="dark"] .header {
    background: var(--color-bg-card, #1e1e2a);
    border-bottom-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .site-header.is-sticky .header {
    background: rgba(30,30,42,0.92);
}
html[data-theme="dark"] .header__search-form {
    background: var(--color-bg-dark, #16161e);
    border-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .header__search-form:focus-within {
    background: var(--color-bg-card, #1e1e2a);
    border-color: var(--color-primary, #7dba84);
}
html[data-theme="dark"] .header__search-kbd {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.4);
}
html[data-theme="dark"] .header__icon:hover {
    background: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .header__icon[data-tooltip]::after {
    background: #f0ece2;
    color: #1a1a2e;
}
html[data-theme="dark"] .mobile-search-form {
    background: var(--color-bg-card, #1e1e2a);
}

/* ── Other dark overrides ── */
html[data-theme="dark"] .mnav,
html[data-theme="dark"] .mega__body,
html[data-theme="dark"] .mdrawer,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .modal-dialog,
body[data-theme="dark"] .mnav,
body[data-theme="dark"] .mega__body,
body[data-theme="dark"] .mdrawer,
body[data-theme="dark"] .toast,
body[data-theme="dark"] .modal-dialog {
    background-color: var(--color-bg-card);
}

html[data-theme="dark"] .mdrawer__head,
body[data-theme="dark"] .mdrawer__head {
    background: linear-gradient(135deg, rgba(20,184,166,0.08), transparent);
}

html[data-theme="dark"] .mdrawer__foot,
body[data-theme="dark"] .mdrawer__foot {
    background: var(--color-bg-dark);
}

html[data-theme="dark"] .mdrawer__wizard--teal,
body[data-theme="dark"] .mdrawer__wizard--teal {
    background: linear-gradient(145deg, rgba(20,184,166,0.15), rgba(20,184,166,0.08));
    color: #5ce0d2;
}
html[data-theme="dark"] .mdrawer__wizard--purple,
body[data-theme="dark"] .mdrawer__wizard--purple {
    background: linear-gradient(145deg, rgba(107,63,160,0.15), rgba(107,63,160,0.08));
    color: #c4a0f0;
}
html[data-theme="dark"] .mdrawer__wizard--coral,
body[data-theme="dark"] .mdrawer__wizard--coral {
    background: linear-gradient(145deg, rgba(194,75,46,0.15), rgba(194,75,46,0.08));
    color: #f0a090;
}

html[data-theme="dark"] .mdrawer__sub-link:hover,
body[data-theme="dark"] .mdrawer__sub-link:hover {
    background: rgba(255,255,255,0.06);
}

html[data-theme="dark"] .mega__promo--soft-teal,
body[data-theme="dark"] .mega__promo--soft-teal {
    background: linear-gradient(145deg, rgba(20,184,166,0.12), rgba(20,184,166,0.06));
}
html[data-theme="dark"] .mega__promo--warm-coral,
body[data-theme="dark"] .mega__promo--warm-coral {
    background: linear-gradient(145deg, rgba(249,115,22,0.12), rgba(249,115,22,0.06));
}

html[data-theme="dark"] .mega__backdrop,
body[data-theme="dark"] .mega__backdrop {
    background: rgba(0,0,0,0.35);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .topbar__pill:last-child { display: none; }
    .topbar__dot:last-of-type { display: none; }

    .mega__columns {
        grid-template-columns: repeat(2, 1fr);
    }
    .mega__grid {
        grid-template-columns: 1fr;
    }
    .mega__promo { display: none; }

    .footer-widgets-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .header__search { max-width: 400px; }
    .header__icon-text { display: none; }
    .header__icon {
        width: 44px;
        height: 44px;
        flex-direction: row;
    }
    .header__icon[data-tooltip]::after { display: none; }
}

@media (max-width: 768px) {
    /* Top Bar → mobile ticker */
    .topbar { padding: 0; }
    .topbar__desktop { display: none; }
    .topbar__mobile { display: block; }

    /* Header compact */
    .header__row {
        height: 56px;
        gap: 0;
        justify-content: space-between;
    }
    .site-header.is-sticky .header__row { height: 52px; }

    .header__hamburger { display: flex; }
    .header__search { display: none; }

    /* ── Mobile icon alignment fix ── */
    .header__actions {
        display: flex;
        align-items: center;
        gap: 0;
        margin-left: auto;
    }

    .header__icon {
        display: inline-flex;
        flex-direction: row;       /* row — no text stacking */
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 38px;
        padding: 0;
        border-radius: 8px;
    }
    .header__icon svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    .header__icon--search-m { display: inline-flex; }
    .header__icon-text { display: none; }
    .header__icon[data-tooltip]::after { display: none; }

    /* Badge position for smaller icons */
    .action-badge {
        top: 2px;
        right: 1px;
        min-width: 16px;
        height: 16px;
        font-size: 0.6rem;
        padding: 0 4px;
    }

    /* Logo */
    .header__logo { flex: 1; min-width: 0; }
    .header__logo img,
    .header__logo .custom-logo {
        height: 36px !important;
        width: auto !important;
        max-width: 130px;
    }
    .site-header.is-sticky .header__logo img,
    .site-header.is-sticky .header__logo .custom-logo {
        height: 32px !important;
    }

    .mnav { display: none; }

    .footer-widgets-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }

    .toast-container {
        left: var(--spacing-md);
        right: var(--spacing-md);
        bottom: var(--spacing-md);
        max-width: none;
    }
}

/* ==========================================================================
   BODY STATES
   ========================================================================== */

body.mobile-menu-open {
    overflow: hidden;
}

body.mobile-menu-open .mdrawer-backdrop {
    opacity: 1;
    visibility: visible;
}

body.mobile-menu-open .mdrawer {
    transform: translateX(0);
}

/* Hide bottom navbar when drawer or mobile search is open */
body.mobile-menu-open .mobile-navbar,
body.mobile-search-open .mobile-navbar {
    transform: translateY(100%);
    pointer-events: none;
}

body.mobile-search-open .mobile-search-overlay {
    transform: translateY(0);
}

/* ==========================================================================
   HOME PAGE STYLES
   ========================================================================== */

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

/* ==========================================================================
   PROMO ANNOUNCEMENT BAR
   ========================================================================== */

.promo-bar {
    background: linear-gradient(90deg, #0F766E 0%, #14B8A6 50%, #0F766E 100%);
    background-size: 200% 100%;
    padding: 10px 0;
    overflow: hidden;
    position: relative;
}

.promo-bar__track {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 20px;
    position: relative;
}

.promo-bar__item {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    animation: promoFadeIn 0.5s ease;
}

.promo-bar__item.is-active {
    display: flex;
}

.promo-bar__icon {
    font-size: 14px;
    flex-shrink: 0;
}

.promo-bar__text {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.promo-bar__text strong {
    font-weight: 700;
}

@keyframes promoFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   HERO SECTION — CRO v2
   ========================================================================== */

.hero-section {
    position: relative;
    background: linear-gradient(135deg, #0D9488 0%, #14B8A6 40%, #2DD4BF 100%);
    padding: 56px 0 48px;
    overflow: hidden;
}

/* CSS-only decorations (zero emoji render cost) */
.hero-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    background: #fff;
}

.hero-shape--1 {
    width: 300px;
    height: 300px;
    top: -80px;
    right: -60px;
    animation: heroFloat 12s ease-in-out infinite;
}

.hero-shape--2 {
    width: 180px;
    height: 180px;
    bottom: -40px;
    left: -30px;
    animation: heroFloat 15s ease-in-out infinite reverse;
}

.hero-shape--3 {
    width: 100px;
    height: 100px;
    top: 40%;
    left: 65%;
    animation: heroFloat 10s ease-in-out infinite 2s;
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-18px) scale(1.03); }
}

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
}

/* Trust Badge Pill */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.12);
}

.hero-badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ADE80;
    box-shadow: 0 0 6px rgba(74,222,128,0.5);
    animation: badgePulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* Rotating badge text */
.hero-badge__text {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.95);
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
    min-height: 18px;
}

.hero-badge__line {
    display: none;
    animation: badgeLineIn 0.4s ease;
}

.hero-badge__line.is-active {
    display: inline;
}

@keyframes badgeLineIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Title */
.hero-title {
    margin-bottom: 16px;
}

.hero-title__sub {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    margin-bottom: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero-title__main {
    display: block;
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/* Description */
.hero-desc {
    font-size: 16px;
    color: rgba(255,255,255,0.88);
    margin-bottom: 28px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* CTA Row */
.hero-cta-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.hero-btn:hover {
    transform: translateY(-2px);
}

.hero-btn--primary {
    background: #fff;
    color: #0D9488;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.hero-btn--primary:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.hero-btn--outline {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hero-btn--outline:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
}

/* Wizard Cards */
.hero-wizards {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.wizard-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 12px 18px;
    border-radius: 14px;
    border: 1.5px solid transparent;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    text-align: left;
    font-family: inherit;
}

.wizard-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.14);
    border-color: rgba(20, 184, 166, 0.3);
}

.wizard-card:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.wizard-icon {
    font-size: 26px;
    flex-shrink: 0;
}

.wizard-content {
    display: flex;
    flex-direction: column;
}

.wizard-title {
    font-size: 13px;
    font-weight: 700;
    color: #1F2937;
}

.wizard-desc {
    font-size: 11px;
    color: #6B7280;
    font-weight: 400;
}

.wizard-arrow {
    color: #14B8A6;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
}

.wizard-card:hover .wizard-arrow {
    opacity: 1;
    transform: translateX(3px);
}

/* Stats Row */
.hero-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.hero-stat {
    text-align: center;
}

.hero-stat__val {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
}

.hero-stat__label {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    font-weight: 500;
}

.hero-stat__sep {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,0.25);
    flex-shrink: 0;
}

/* ==========================================================================
   TRUST BADGES
   ========================================================================== */

.trust-badges-section {
    padding: var(--spacing-xl) 0;
    background: var(--color-bg-light);
}

.trust-badges-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.trust-badge-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: var(--color-bg-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.trust-badge-card .badge-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.trust-badge-card .badge-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 2px;
}

.trust-badge-card .badge-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
}

/* ==========================================================================
   SECTION COMMON STYLES
   ========================================================================== */

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.section-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.section-icon {
    font-size: 24px;
}

.section-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0;
}

.section-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin: var(--spacing-xs) 0 0;
}

.section-subtitle {
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 400;
    margin-top: 2px;
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.section-link:hover {
    color: var(--color-primary-dark);
}

/* ==========================================================================
   AGE GROUPS
   ========================================================================== */

.age-groups-section {
    padding: var(--spacing-3xl) 0;
}

.age-groups-wrapper {
    overflow-x: auto;
    margin: 0 calc(-1 * var(--container-padding));
    padding: 0 var(--container-padding);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.age-groups-wrapper::-webkit-scrollbar {
    display: none;
}

.age-groups-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
    min-width: max-content;
}

.age-group-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: var(--spacing-xl) var(--spacing-lg);
    background: var(--card-gradient, var(--card-bg, var(--color-bg-light)));
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1), box-shadow 0.3s ease, border-color 0.3s ease;
    min-width: 150px;
    border: 1.5px solid transparent;
    position: relative;
    overflow: hidden;
}

.age-group-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.02) 100%);
    border-radius: inherit;
    pointer-events: none;
}

.age-group-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    border-color: var(--card-accent, rgba(20, 184, 166, 0.3));
}

.age-emoji {
    font-size: 44px;
    line-height: 1;
}

.age-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.age-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.age-count {
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(0,0,0,0.04);
    padding: 2px 10px;
    border-radius: 99px;
    margin-top: 2px;
}

.age-thumbs {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

.age-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    margin-left: -8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.age-thumb:first-child {
    margin-left: 0;
}

.age-arrow {
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    margin-top: 4px;
}

.age-group-card:hover .age-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ── Age Card (v4 — SVG icon cards) ── */
.age-scroll-container {
    position: relative;
}

.age-groups-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.age-groups-wrapper::-webkit-scrollbar {
    display: none;
}

.age-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg-white);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.2s;
}

.age-scroll-btn:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.age-scroll-btn--left { left: -12px; }
.age-scroll-btn--right { right: -12px; }

.age-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: var(--spacing-xl) var(--spacing-lg);
    background: var(--card-gradient, var(--card-bg, var(--color-bg-light)));
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1), box-shadow 0.3s ease, border-color 0.3s ease;
    min-width: 150px;
    border: 1.5px solid transparent;
    position: relative;
    overflow: hidden;
}

.age-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.02) 100%);
    border-radius: inherit;
    pointer-events: none;
}

.age-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    border-color: var(--card-accent, rgba(20,184,166,0.3));
}

.age-card__icon-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.age-card__icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.age-card:hover .age-card__icon-circle {
    transform: scale(1.1);
}

.age-card__icon {
    width: 38px;
    height: 38px;
    color: var(--card-accent, var(--color-text));
}

.age-card__dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--card-accent, var(--color-primary));
    opacity: 0.3;
}

.age-card__dot--1 { top: 4px; right: 8px; }
.age-card__dot--2 { bottom: 8px; left: 4px; }
.age-card__dot--3 { top: 50%; right: 0; width: 4px; height: 4px; opacity: 0.2; }

.age-card__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.age-card__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.age-card__subtitle {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.age-card__footer {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
}

.age-card__count {
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(0,0,0,0.04);
    padding: 2px 10px;
    border-radius: 99px;
    color: var(--color-text-muted);
}

.age-card__arrow {
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    color: var(--card-accent, var(--color-primary));
}

.age-card:hover .age-card__arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================================================
   CATEGORIES GRID
   ========================================================================== */

.categories-section {
    padding: var(--spacing-3xl) 0;
    background: var(--color-bg-light);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-sm);
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--spacing-md) var(--spacing-sm);
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: transform 0.25s cubic-bezier(0.32,0.72,0,1), box-shadow 0.25s ease, border-color 0.2s;
    border: 1.5px solid transparent;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-color: rgba(20, 184, 166, 0.2);
}

.category-card:hover .category-emoji {
    transform: scale(1.15);
}

.category-emoji {
    font-size: 28px;
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
}

.category-name {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-align: center;
    line-height: 1.3;
}

.category-count {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* ── Cat Card (v3 — SVG icon cards) ── */
.cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: var(--spacing-lg) var(--spacing-md);
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: transform 0.25s cubic-bezier(0.32,0.72,0,1), box-shadow 0.25s ease, border-color 0.2s;
    border: 1.5px solid transparent;
}

.cat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-color: rgba(20,184,166,0.2);
}

.cat-card__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--icon-c1, #14B8A6), var(--icon-c2, #0D9488));
    color: #fff;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
}

.cat-card:hover .cat-card__icon-wrap {
    transform: scale(1.12);
}

.cat-card__icon {
    width: 30px;
    height: 30px;
    stroke: #fff;
}

.cat-card__name {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-align: center;
    line-height: 1.3;
}

.cat-card__count {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* ==========================================================================
   PRODUCTS GRID (Best Sellers + New Arrivals)
   ========================================================================== */

.best-sellers-section,
.new-arrivals-section {
    padding: var(--spacing-3xl) 0;
}

.new-arrivals-section {
    background: var(--color-bg-light);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
}

/* Product Card — BEM */
.product-card {
    position: relative;
    background: var(--color-bg-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1), box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.04);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    border-color: rgba(20, 184, 166, 0.15);
}

.product-card__link {
    display: block;
    text-decoration: none;
}

.product-card__img {
    position: relative;
    aspect-ratio: 3/4;
    background: #F9FAFB;
    overflow: hidden;
}

.product-card__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.product-card:hover .product-card__thumb {
    transform: scale(1.05);
}

.product-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--color-text-muted);
}

/* Badges */
.product-card__badges {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}

.product-card__badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.product-card__badge--sale {
    background: #EF4444;
    color: #fff;
}

.product-card__badge--hot {
    background: #F97316;
    color: #fff;
}

.product-card__badge--new {
    background: #14B8A6;
    color: #fff;
}

/* Info */
.product-card__info {
    padding: 12px 14px 10px;
}

.product-card__title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.product-card__rating {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 4px;
}

.product-card__stars {
    font-size: 11px;
    color: #F59E0B;
    letter-spacing: -1px;
}

.product-card__review-count {
    font-size: 11px;
    color: var(--color-text-muted);
}

.product-card__price {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
}

.product-card__price del {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-right: 4px;
}

.product-card__price ins {
    text-decoration: none;
}

/* Quick Add Button */
.product-card__quick-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% - 20px);
    margin: 0 10px 10px;
    padding: 10px;
    border: 1.5px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.product-card__quick-add:hover {
    background: var(--color-primary);
    color: #fff;
}

.product-card__quick-add--select {
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.product-card__quick-add--select:hover {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

/* Loading state for quick add */
.product-card__quick-add.is-loading {
    pointer-events: none;
    opacity: 0.6;
}

.product-card__quick-add.is-added {
    background: #059669;
    border-color: #059669;
    color: #fff;
}

/* Skeleton Loading */
.product-card--skeleton .skeleton-box,
.product-card--skeleton .product-card__img {
    aspect-ratio: 3/4;
    background: linear-gradient(90deg, var(--color-bg-light) 25%, var(--color-border) 50%, var(--color-bg-light) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton-text {
    height: 16px;
    background: linear-gradient(90deg, var(--color-bg-light) 25%, var(--color-border) 50%, var(--color-bg-light) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
}

.skeleton-text--title { width: 80%; }
.skeleton-text--price { width: 50%; height: 20px; }

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   SOCIAL PROOF BAR
   ========================================================================== */

.social-proof-section {
    padding: 20px 0;
    background: linear-gradient(135deg, #F0FDFA 0%, #F0F9FF 50%, #FEF3C7 100%);
    border-top: 1px solid rgba(20, 184, 166, 0.08);
    border-bottom: 1px solid rgba(20, 184, 166, 0.08);
}

.social-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.social-proof-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(4px);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.03);
    transition: transform 0.2s ease, box-shadow 0.2s;
}

.social-proof-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}

.social-proof-icon {
    flex-shrink: 0;
    color: var(--color-primary);
    display: flex;
    align-items: center;
}

.social-proof-text {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.social-proof-text strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

/* ==========================================================================
   FLASH SALE
   ========================================================================== */

.flash-sale-section {
    padding: var(--spacing-3xl) 0;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
}

.flash-sale-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.flash-sale-title-wrap {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.flash-icon {
    font-size: 28px;
}

.flash-sale-section .section-title {
    color: #92400E;
}

/* Timer */
.flash-timer {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.timer-label {
    font-size: var(--font-size-sm);
    color: #92400E;
    font-weight: var(--font-weight-medium);
}

.timer-digits {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.timer-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timer-value {
    background: #92400E;
    color: var(--color-text-inverse);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    min-width: 48px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.timer-name {
    font-size: 10px;
    color: #92400E;
    margin-top: 2px;
}

.timer-sep {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: #92400E;
}

/* Flash Products */
.flash-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-md);
    max-width: 100%;
}

@media (min-width: 1024px) {
    .flash-products-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.flash-product-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast);
}

.flash-product-card:hover {
    transform: translateY(-4px);
}

.flash-product-link {
    display: block;
    text-decoration: none;
}

.flash-product-image {
    position: relative;
    aspect-ratio: 1;
    background: var(--color-bg-light);
    overflow: hidden;
}

.flash-product-image .product-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.discount-badge {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: var(--color-sale);
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
}

.flash-product-info {
    padding: var(--spacing-md);
}

.flash-product-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.flash-product-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px var(--spacing-xs);
}

.price-old {
    font-size: 11px;
    color: var(--color-text-muted);
    text-decoration: line-through;
    white-space: nowrap;
}

.price-current {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-sale);
    white-space: nowrap;
}

.flash-sale-footer {
    text-align: center;
    margin-top: var(--spacing-xl);
}

/* Button */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.btn-outline {
    background: transparent;
    color: #92400E;
    border: 2px solid #92400E;
}

.btn-outline:hover {
    background: #92400E;
    color: var(--color-text-inverse);
}

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */

.newsletter-section {
    padding: var(--spacing-3xl) 0;
}

.newsletter-card {
    position: relative;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-xl);
    padding: var(--spacing-3xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
    overflow: hidden;
}

.newsletter-content {
    flex: 1;
    max-width: 400px;
}

.newsletter-icon {
    font-size: 40px;
    display: block;
    margin-bottom: var(--spacing-md);
}

.newsletter-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
    margin: 0 0 var(--spacing-sm);
}

.newsletter-desc {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.newsletter-form {
    flex: 1;
    max-width: 450px;
}

.newsletter-input-wrap {
    display: flex;
    gap: var(--spacing-sm);
}

.newsletter-input {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    outline: none;
    transition: border-color var(--transition-fast);
}

.newsletter-input:focus {
    border-color: var(--color-cta);
}

.newsletter-submit {
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-cta);
    color: var(--color-text-inverse);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast);
}

.newsletter-submit:hover {
    background: var(--color-cta-hover);
}

.newsletter-privacy {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.7);
    margin: var(--spacing-sm) 0 0;
}

.newsletter-privacy a {
    color: var(--color-text-inverse);
    text-decoration: underline;
}

.newsletter-decorations {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.newsletter-decorations .deco {
    position: absolute;
    font-size: 60px;
    opacity: 0.15;
}

.deco--1 {
    top: -10px;
    right: 20%;
}

.deco--2 {
    bottom: -10px;
    right: 10%;
}

/* ==========================================================================
   HOME RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .hero-title-main {
        font-size: var(--font-size-3xl);
    }

    .trust-badges-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .categories-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .products-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .flash-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .newsletter-card {
        flex-direction: column;
        text-align: center;
    }

    .newsletter-content {
        max-width: none;
    }

    .newsletter-form {
        max-width: 500px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: var(--spacing-2xl) 0;
        min-height: auto;
    }

    .hero-title-gradient {
        font-size: var(--font-size-base);
    }

    .hero-title-main {
        font-size: var(--font-size-2xl);
    }

    .hero-description {
        font-size: var(--font-size-base);
    }

    .hero-wizards {
        flex-direction: column;
        align-items: center;
    }

    .wizard-card {
        width: 100%;
        max-width: 300px;
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }

    .stat-divider {
        display: none;
    }

    .trust-badges-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .trust-badge-card {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-md);
    }

    .age-groups-grid {
        grid-template-columns: repeat(5, 150px);
        scroll-snap-type: x mandatory;
    }

    .age-group-card {
        scroll-snap-align: start;
    }

    .age-card {
        scroll-snap-align: start;
        min-width: 140px;
        padding: var(--spacing-lg) var(--spacing-md);
        gap: 8px;
    }

    .age-card__icon-wrap {
        width: 64px;
        height: 64px;
    }

    .age-card__icon-circle {
        width: 56px;
        height: 56px;
    }

    .age-card__icon {
        width: 30px;
        height: 30px;
    }

    .age-card__title {
        font-size: var(--font-size-sm);
    }

    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cat-card {
        gap: 6px;
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .cat-card__icon-wrap {
        width: 52px;
        height: 52px;
    }

    .cat-card__icon {
        width: 24px;
        height: 24px;
    }

    .cat-card__name {
        font-size: 11px;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .flash-sale-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .flash-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .flash-product-card:nth-child(n+5) {
        display: none;
    }

    .newsletter-card {
        padding: var(--spacing-xl);
    }

    .newsletter-input-wrap {
        flex-direction: column;
    }

    .newsletter-submit {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .hero-stats {
        justify-content: space-around;
    }

    .stat-value {
        font-size: var(--font-size-xl);
    }

    .flash-timer {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .timer-value {
        font-size: var(--font-size-base);
        padding: var(--spacing-xs) var(--spacing-sm);
        min-width: 40px;
    }
}

/* ==========================================================================
   DARK MODE - HOME
   ========================================================================== */

html[data-theme="dark"] .hero-section,
body[data-theme="dark"] .hero-section {
    background: linear-gradient(135deg, #134E4A 0%, #0D9488 50%, #14B8A6 100%);
}

html[data-theme="dark"] .trust-badges-section,
body[data-theme="dark"] .trust-badges-section {
    background: var(--color-bg-dark);
}

html[data-theme="dark"] .trust-badge-card,
body[data-theme="dark"] .trust-badge-card {
    background: var(--color-bg-card);
}

html[data-theme="dark"] .age-group-card,
body[data-theme="dark"] .age-group-card,
html[data-theme="dark"] .age-card,
body[data-theme="dark"] .age-card {
    background: var(--color-bg-card);
}

html[data-theme="dark"] .categories-section,
body[data-theme="dark"] .categories-section {
    background: var(--color-bg-dark);
}

html[data-theme="dark"] .category-card,
body[data-theme="dark"] .category-card,
html[data-theme="dark"] .cat-card,
body[data-theme="dark"] .cat-card {
    background: var(--color-bg-card);
}

html[data-theme="dark"] .product-card,
body[data-theme="dark"] .product-card {
    background: var(--color-bg-card);
}

html[data-theme="dark"] .flash-sale-section,
body[data-theme="dark"] .flash-sale-section {
    background: linear-gradient(135deg, #78350F 0%, #92400E 100%);
}

html[data-theme="dark"] .flash-sale-section .section-title,
html[data-theme="dark"] .timer-label,
html[data-theme="dark"] .timer-name,
html[data-theme="dark"] .timer-sep,
body[data-theme="dark"] .flash-sale-section .section-title,
body[data-theme="dark"] .timer-label,
body[data-theme="dark"] .timer-name,
body[data-theme="dark"] .timer-sep {
    color: #FEF3C7;
}

html[data-theme="dark"] .btn-outline,
body[data-theme="dark"] .btn-outline {
    color: #FEF3C7;
    border-color: #FEF3C7;
}

html[data-theme="dark"] .btn-outline:hover,
body[data-theme="dark"] .btn-outline:hover {
    background: #FEF3C7;
    color: #78350F;
}

html[data-theme="dark"] .flash-product-card,
body[data-theme="dark"] .flash-product-card {
    background: var(--color-bg-card);
}

html[data-theme="dark"] .newsletter-card,
body[data-theme="dark"] .newsletter-card {
    background: linear-gradient(135deg, #134E4A 0%, #0D9488 100%);
}

/* ==========================================================================
   PRODUCT CARD (Trendyol Style)
   ========================================================================== */

.product-card {
    position: relative;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.product-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.product-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Image Container */
.product-card-image {
    position: relative;
    aspect-ratio: 4/5;
    background: var(--color-bg-light);
    overflow: hidden;
}

.product-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.product-card:hover .product-card-thumb {
    transform: scale(1.05);
}

.product-card-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

/* Badges */
.product-card-badges {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    z-index: 2;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px;
    white-space: nowrap;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.2;
}

.badge--discount {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 2px 6px rgba(239,68,68,0.3);
}

.badge--shipping {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    font-size: 9px;
    box-shadow: 0 2px 6px rgba(5,150,105,0.25);
}

.badge--new {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    color: #fff;
    box-shadow: 0 2px 6px rgba(13,148,136,0.3);
}

/* Ship Today Badge */
.badge--ship-today {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: linear-gradient(135deg, rgba(5,150,105,0.95), rgba(16,185,129,0.95));
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    z-index: 2;
    backdrop-filter: blur(6px);
    letter-spacing: 0.3px;
    white-space: nowrap;
    max-width: calc(100% - 20px);
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(5,150,105,0.3);
    text-transform: none;
}
.badge--ship-today svg { flex-shrink: 0; }

/* Out-of-Stock Badge on Product Card */
.badge--oos {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: rgba(107,114,128,0.92);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    z-index: 2;
    backdrop-filter: blur(6px);
    letter-spacing: 0.3px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.badge--oos svg { flex-shrink: 0; }

/* Product Card — Out-of-Stock State */
.product-card--oos .product-card-image {
    position: relative;
}

.product-card--oos .product-card-thumb,
.product-card--oos .product-card-image img {
    filter: grayscale(40%) opacity(0.7);
    transition: filter 0.3s;
}

.product-card--oos:hover .product-card-thumb,
.product-card--oos:hover .product-card-image img {
    filter: grayscale(20%) opacity(0.85);
}

.product-card--oos .product-card-price {
    opacity: 0.6;
}

/* Product Card — OOS Quick Add Button (desktop hover) */
.product-card-quick-add--oos {
    background: #6B7280 !important;
    cursor: not-allowed;
    opacity: 0.85;
}

.product-card-quick-add--oos:hover {
    background: #6B7280 !important;
    transform: none !important;
}

/* Product Card — OOS Add Button (mobile) */
.product-card-add-btn--oos {
    background: #F3F4F6 !important;
    color: #9CA3AF !important;
    border-color: #E5E7EB !important;
    cursor: not-allowed;
}

.product-card-add-btn--oos:hover {
    background: #F3F4F6 !important;
    color: #9CA3AF !important;
}

.product-card-add-btn--oos svg {
    stroke: #9CA3AF;
}

/* Featured section — hide heavy elements */
.agp-featured .badge--ship-today { display: none; }
.agp-featured .product-card-installment { display: none; }
.agp-featured .product-card-savings { display: none; }
.agp-featured .badge--shipping { display: none; }

/* Wishlist Button */
.product-card-wishlist {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-white);
    border: none;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    z-index: 2;
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.product-card-wishlist:hover {
    transform: scale(1.1);
    background: var(--color-bg-light);
}

.product-card-wishlist .heart-icon--filled {
    display: none;
    color: var(--color-sale);
}

.product-card-wishlist.is-active .heart-icon--empty {
    display: none;
}

.product-card-wishlist.is-active .heart-icon--filled {
    display: block;
}

.product-card-wishlist .heart-icon {
    color: var(--color-text-muted);
}

.product-card-wishlist:hover .heart-icon {
    color: var(--color-sale);
}

/* Quick Add (Desktop) */
.product-card-quick-add {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border: none;
    cursor: pointer;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    z-index: 2;
}

.product-card:hover .product-card-quick-add {
    opacity: 1;
    transform: translateY(0);
}

.product-card-quick-add:hover {
    background: var(--color-primary-dark);
}

/* Info Container */
.product-card-info {
    padding: var(--spacing-md);
}

.product-card-brand {
    display: block;
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.product-card-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--spacing-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
}

.product-card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: var(--spacing-xs);
}

.product-card-rating .rating-star {
    font-size: 12px;
}

.product-card-rating .rating-value {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.product-card-rating .rating-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Price */
.product-card-price {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.product-card-price .price-old {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.product-card-price .price-current {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.product-card-price .price-current--sale {
    color: var(--color-sale);
}

/* Remove WooCommerce default price del/ins styling conflicts */
.product-card-price del,
.product-card-price ins {
    text-decoration: inherit;
    background: none;
}

/* Savings Amount */
.product-card-savings {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #059669;
}
.product-card-savings svg { flex-shrink: 0; color: #059669; }
.product-card-savings .woocommerce-Price-amount { font-weight: 700; }

/* Installment Info */
.product-card-installment {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    font-size: 10.5px;
    color: #6b7280;
    font-weight: 500;
}
.product-card-installment svg { flex-shrink: 0; color: #9ca3af; }
.product-card-installment .woocommerce-Price-amount { font-weight: 600; color: #4b5563; }

/* Stock Warning */
.product-card-stock-warning {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--spacing-xs);
    padding: 4px 8px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--color-sale);
    animation: agpPulseStock 2s ease-in-out infinite;
}
@keyframes agpPulseStock {
    0%, 100% { background: rgba(239,68,68,0.08); }
    50% { background: rgba(239,68,68,0.16); }
}

/* Mobile Actions */
.product-card-actions {
    padding: 0 var(--spacing-md) var(--spacing-md);
    display: none;
}

.product-card-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.product-card-add-btn:hover {
    background: var(--color-primary-dark);
}

.product-card-add-btn--options {
    background: var(--color-bg-light);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.product-card-add-btn--options:hover {
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);
}

/* ==========================================================================
   PRODUCT CARD SKELETON
   ========================================================================== */

.product-card--skeleton {
    pointer-events: none;
}

.product-card--skeleton .skeleton-box,
.product-card--skeleton .skeleton-text {
    background: linear-gradient(90deg, var(--color-bg-light) 25%, var(--color-border) 50%, var(--color-bg-light) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   SHOP PAGE
   ========================================================================== */

.shop-page {
    padding: var(--spacing-xl) 0 var(--spacing-3xl);
}

.shop-header {
    margin-bottom: var(--spacing-xl);
}

.shop-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm);
}

.shop-header .term-description,
.shop-header .page-description {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 600px;
}

/* Toolbar */
.shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.shop-toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.shop-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Result Count */
.woocommerce-result-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

/* Ordering */
.shop-ordering {
    display: flex;
    align-items: center;
    margin: 0;
}

.select-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.orderby-select {
    appearance: none;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-xl) var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.orderby-select:hover,
.orderby-select:focus {
    border-color: var(--color-primary);
    outline: none;
}

.orderby-select:focus {
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.select-arrow {
    position: absolute;
    right: var(--spacing-sm);
    pointer-events: none;
    color: var(--color-text-muted);
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
}

.products-grid[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.products-grid[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.products-grid[data-columns="5"] {
    grid-template-columns: repeat(5, 1fr);
}

.products-grid[data-columns="6"] {
    grid-template-columns: repeat(6, 1fr);
}

/* No Products */
.shop-no-products {
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-lg);
}

.shop-no-products .woocommerce-info {
    display: inline-block;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.shop-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-3xl);
}

.shop-pagination a,
.shop-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.shop-pagination a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.shop-pagination .current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.shop-pagination .prev,
.shop-pagination .next {
    font-size: 0;
}

.shop-pagination .prev svg,
.shop-pagination .next svg {
    width: 16px;
    height: 16px;
}

.shop-pagination .dots {
    border: none;
    background: none;
    min-width: auto;
    padding: 0;
}

/* ==========================================================================
   BODY STATES
   ========================================================================== */

body.is-locked {
    overflow: hidden;
    /* iOS Safari scroll lock — position:fixed prevents background scroll */
    position: fixed;
    left: 0;
    right: 0;
    /* top is set dynamically via JS to preserve scroll position */
    touch-action: none;
    -webkit-overflow-scrolling: none;
}

/* ==========================================================================
   SHOP RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-md);
    }

    .product-card-quick-add {
        display: none;
    }

    .product-card-actions {
        display: block;
    }
}

@media (max-width: 768px) {
    .shop-page {
        padding: var(--spacing-lg) 0 var(--spacing-2xl);
    }

    .shop-title {
        font-size: var(--font-size-2xl);
    }

    .shop-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .shop-toolbar-left,
    .shop-toolbar-right {
        justify-content: space-between;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .product-card-info {
        padding: var(--spacing-sm);
    }

    .product-card-title {
        font-size: var(--font-size-xs);
        min-height: 2.4em;
    }

    .product-card-price .price-current {
        font-size: var(--font-size-base);
    }

    .product-card-price .price-old {
        font-size: var(--font-size-xs);
    }

    .product-card-actions {
        padding: 0 var(--spacing-sm) var(--spacing-sm);
    }

    .product-card-add-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
        white-space: nowrap;
    }

    .badge {
        font-size: 10px;
        padding: 3px 6px;
    }

    .product-card-wishlist {
        width: 32px;
        height: 32px;
    }

    .product-card-wishlist .heart-icon {
        width: 16px;
        height: 16px;
    }

    .shop-pagination a,
    .shop-pagination span {
        min-width: 36px;
        height: 36px;
        font-size: var(--font-size-xs);
    }
}

/* ==========================================================================
   SHOP DARK MODE
   ========================================================================== */

html[data-theme="dark"] .product-card,
body[data-theme="dark"] .product-card {
    background: var(--color-bg-card);
    border-color: var(--color-border-dark);
}

html[data-theme="dark"] .product-card-wishlist,
body[data-theme="dark"] .product-card-wishlist {
    background: var(--color-bg-dark);
}

html[data-theme="dark"] .product-card-wishlist:hover,
body[data-theme="dark"] .product-card-wishlist:hover {
    background: var(--color-bg-card);
}

html[data-theme="dark"] .orderby-select,
body[data-theme="dark"] .orderby-select {
    background: var(--color-bg-card);
    border-color: var(--color-border-dark);
}

html[data-theme="dark"] .shop-pagination a,
html[data-theme="dark"] .shop-pagination span:not(.current),
body[data-theme="dark"] .shop-pagination a,
body[data-theme="dark"] .shop-pagination span:not(.current) {
    background: var(--color-bg-card);
    border-color: var(--color-border-dark);
}

html[data-theme="dark"] .shop-no-products .woocommerce-info,
body[data-theme="dark"] .shop-no-products .woocommerce-info {
    background: var(--color-bg-card);
}


/* ==========================================================================
   SINGLE PRODUCT PAGE — PREMIUM PDP v4.0
   Mobile-first · Trendyol-inspired · Conversion-optimized
   ========================================================================== */

/* ── Page shell ── */
html.single-product,
body.single-product { overflow-x: hidden; }

.pdp {
    background: white;
    padding-bottom: 16px;
}

/* Trendyol-style mobile PDP — minimal padding */
.pdp {
    --page-gutter: 0px;
    --container-padding: 0px;
}

.pdp .container,
.pdp-main.container,
.pdp-tabs-section.container,
.pdp-extras-section.container {
    padding-left: 0;
    padding-right: 0;
    padding-inline: 0;
}

/* Gallery full-bleed on mobile — true edge-to-edge */
.pdp-gallery-col {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: white;
}

/* ═══════════════════════════════════════════════════════════════
   MAIN 2-COLUMN
   ═══════════════════════════════════════════════════════════════ */

.pdp-main {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Badges cluster */
.pdp-badges {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pdp-badge {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    line-height: 1;
}

.pdp-badge--sale { background: #EF4444; color: white; }
.pdp-badge--new { background: var(--color-primary); color: white; }
.pdp-badge--cargo { background: #059669; color: white; font-weight: 600; font-size: 11px; }

/* Float actions (wishlist, share) */
.pdp-float-actions {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pdp-float-btn {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: white;
    border: none; border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.12s;
    color: #6B7280;
}

.pdp-float-btn:active { transform: scale(0.9); }
.pdp-float-btn .heart-o { color: #9CA3AF; }
.pdp-float-btn .heart-f { display: none; color: #EF4444; }
.pdp-float-btn.is-active .heart-o { display: none; }
.pdp-float-btn.is-active .heart-f { display: block; }

/* ═══════════════════════════════════════════════════════════════
   GALLERY — Mobile swipe / Desktop thumbs+main
   ═══════════════════════════════════════════════════════════════ */

.pdp-gallery {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #F5F5F5;
    overflow: hidden;
}

.pdp-gallery__thumbs--desktop { display: none; }

.pdp-gallery__main {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #f9fafb;
}

.pdp-gallery__track {
    display: flex;
    width: 100%; height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

.pdp-gallery__track::-webkit-scrollbar { display: none; }

.pdp-gallery__slide {
    flex: 0 0 100%;
    width: 100%; height: 100%;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdp-gallery__img {
    display: block;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center;
    user-select: none;
}

.pdp-gallery__placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    color: #D1D5DB;
}

/* Mobile thumbnail strip — hidden on mobile (Trendyol uses dots) */
.pdp-gallery__thumbs--mobile {
    display: none;
}

/* Trendyol-style dots — always visible on mobile when multi images */
.pdp-gallery__dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0,0,0,0.35);
    border-radius: 12px;
    backdrop-filter: blur(4px);
    z-index: 4;
}

.pdp-gallery__dot {
    width: 7px; height: 7px;
    background: rgba(255,255,255,0.5);
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s;
}

.pdp-gallery__dot.is-active {
    background: white;
    width: 8px; height: 8px;
}

/* Show dots even when multi (override earlier hide rule) */
.pdp-gallery--multi .pdp-gallery__dots { display: flex; }

/* Counter — positioned like Trendyol color variant count */
.pdp-gallery__counter {
    position: absolute;
    bottom: 14px; right: 14px;
    background: rgba(255,255,255,0.9);
    color: #333;
    font-size: 12px; font-weight: 600;
    padding: 4px 10px;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    z-index: 5;
}

/* ═══════════════════════════════════════════════════════════════
   INFO COLUMN — Trendyol-style minimal padding
   ═══════════════════════════════════════════════════════════════ */

.pdp-info-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 6px 24px;
}

/* Brand — Trendyol bold black inline style */
.pdp-brand {
    font-size: 14px;
    font-weight: 800;
    color: #333;
    text-transform: none;
    letter-spacing: 0;
}

/* Title — lighter weight, gray like Trendyol */
.pdp-title {
    font-size: 15px;
    font-weight: 400;
    color: #666;
    line-height: 1.4;
    margin: -6px 0 0;
}

/* Meta row */
.pdp-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.pdp-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}

.pdp-stars { display: flex; gap: 1px; line-height: 0; }
.pdp-rating__text { font-weight: 600; color: #6B7280; }
.pdp-rating:hover .pdp-rating__text { color: var(--color-primary); }

.pdp-sold {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #059669;
    font-weight: 600;
    font-size: 12px;
}

.pdp-sku {
    font-size: 11px;
    color: #9CA3AF;
}

/* ═══════════════════════════════════════════════════════════════
   PRICE CARD — Trendyol style
   ═══════════════════════════════════════════════════════════════ */

.pdp-price-card {
    background: #F0FDF9;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #D1FAE5;
}

.pdp-price-card__prices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pdp-price-card__row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.pdp-price-card__labels {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pdp-price-card__label {
    font-size: 11px;
    font-weight: 600;
    color: #6B7280;
    letter-spacing: 0.01em;
}

.pdp-price-card__label--sale {
    color: #059669;
    font-weight: 700;
}

.pdp-price-card__old {
    font-size: 14px;
    color: #9CA3AF;
    text-decoration: line-through;
    font-weight: 500;
    line-height: 1.2;
}

.pdp-price-card__old .woocommerce-Price-amount { font-size: inherit; }

.pdp-price-card__current {
    font-size: 30px;
    font-weight: 800;
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.1;
}

.pdp-price-card__current .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; }

.pdp-price-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    font-size: 12px;
    font-weight: 800;
    border-radius: 8px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1;
    align-self: flex-end;
    margin-bottom: 4px;
}

/* Savings line */
.pdp-price-card__savings {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #DCFCE7;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #059669;
}

.pdp-price-card__savings svg { flex-shrink: 0; color: #059669; }
.pdp-price-card__savings .woocommerce-Price-amount { font-weight: 700; }

/* Installment card */
.pdp-inst-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.pdp-inst-card:hover { border-color: var(--color-primary); }

.pdp-inst-card__icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: #FFF7ED;
    border-radius: 8px;
    color: #F97316;
    flex-shrink: 0;
}

.pdp-inst-card__text {
    flex: 1; min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pdp-inst-card__text strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
}

.pdp-inst-card__text strong .woocommerce-Price-amount {
    color: #F97316;
    font-weight: 700;
}

.pdp-inst-card__text span {
    font-size: 11px;
    color: #9CA3AF;
}

.pdp-inst-card__arrow {
    color: #D1D5DB;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   LOW STOCK
   ═══════════════════════════════════════════════════════════════ */

.pdp-low-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #FEF2F2;
    color: #DC2626;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #FECACA;
    align-self: flex-start;
    animation: pdp-shake 0.5s ease-in-out;
}

@keyframes pdp-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* ═══════════════════════════════════════════════════════════════
   CART SECTION (Variations + ATC)
   ═══════════════════════════════════════════════════════════════ */

.pdp-cart-section {
    background: transparent;
    padding: 0;
}

/* Hide WC default variation price + ATC (we use our own CTA via sticky) */
.pdp-cart-section .woocommerce-variation-price { display: none !important; }

/* Screen-reader only utility */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ── Variation groups ── */
.pdp-variations {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pdp-var-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pdp-var-group__header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pdp-var-group__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.pdp-var-group__selected {
    font-size: 13px;
    color: #6B7280;
}

/* Pill buttons */
.pdp-var-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pdp-var-btn {
    min-width: 44px;
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    background: #F9FAFB;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.12s;
    line-height: 1;
}

.pdp-var-btn:hover {
    border-color: var(--color-primary);
    background: rgba(20,184,166,0.04);
}

.pdp-var-btn.is-active {
    border-color: var(--color-primary);
    background: rgba(20,184,166,0.08);
    color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

/* Color swatches */
.pdp-var-btn--color {
    width: 38px; height: 38px; min-width: 38px;
    padding: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

.pdp-swatch {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--sw, #ccc);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

.pdp-var-btn--color.is-active { border-width: 2px; }

/* ── Out-of-Stock Variant Pills (Trendyol pattern) ── */
.pdp-var-btn.is-oos {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
    background: #F3F4F6;
    border-color: #E5E7EB;
    color: #9CA3AF;
}

/* Diagonal strikethrough line for text pills */
.pdp-var-btn.is-oos:not(.pdp-var-btn--color)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 4px;
    right: 4px;
    height: 1.5px;
    background: #9CA3AF;
    transform: rotate(-12deg);
    transform-origin: center;
    pointer-events: none;
}

/* Diagonal strikethrough for color swatches */
.pdp-var-btn--color.is-oos::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 3px;
    right: 3px;
    height: 1.5px;
    background: #EF4444;
    transform: rotate(-45deg);
    transform-origin: center;
    pointer-events: none;
    z-index: 1;
}

.pdp-var-btn.is-oos:hover {
    border-color: #E5E7EB;
    background: #F3F4F6;
}

/* ═══════════════════════════════════════════════════════════════
   STOCK & QUANTITY — Premium Trendyol-style
   ═══════════════════════════════════════════════════════════════ */

/* Hide WC default stock display (we use our own) */
.pdp-cart-section .stock,
.pdp-cart-section .woocommerce-variation-availability {
    display: none !important;
}

/* Stock indicator — shown above quantity */
.pdp-stock-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1F2937;
    margin-top: 16px;
    margin-bottom: 10px;
}

.pdp-stock-info__count {
    color: var(--color-primary);
}

.pdp-stock-info--low {
    color: #DC2626;
}

.pdp-stock-info--low .pdp-stock-info__count {
    color: #DC2626;
}

/* Quantity row — with wishlist button */
.pdp-qty-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.pdp-qty-label {
    display: none;
}

/* Premium quantity selector — compact width */
.pdp-qty {
    display: inline-flex;
    align-items: center;
    height: 48px;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    width: auto;
}

.pdp-qty__btn {
    width: 44px; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: #F9FAFB;
    border: none;
    cursor: pointer;
    color: #374151;
    transition: all 0.15s;
    flex-shrink: 0;
}

.pdp-qty__btn:hover { 
    background: var(--color-primary); 
    color: white;
}

.pdp-qty__btn:active { 
    background: var(--color-primary-dark); 
    color: white;
    transform: scale(0.95);
}

.pdp-qty .quantity,
.pdp-qty .quantity input[type="number"],
.pdp-qty input.qty {
    width: 48px; height: 100%;
    text-align: center;
    border: none;
    border-left: 1px solid #E5E7EB;
    border-right: 1px solid #E5E7EB;
    background: white;
    font-size: 18px;
    font-weight: 700;
    color: #1F2937;
    -moz-appearance: textfield;
    appearance: textfield;
    margin: 0; padding: 0;
    flex-shrink: 0;
}

.pdp-qty .quantity input::-webkit-inner-spin-button,
.pdp-qty .quantity input::-webkit-outer-spin-button,
.pdp-qty input.qty::-webkit-inner-spin-button,
.pdp-qty input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none; margin: 0;
}

/* Wishlist button next to quantity */
.pdp-qty-wishlist {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: white;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    cursor: pointer;
    color: #9CA3AF;
    transition: all 0.15s;
    flex-shrink: 0;
}

.pdp-qty-wishlist:hover {
    border-color: #EF4444;
    color: #EF4444;
    background: #FEF2F2;
}

.pdp-qty-wishlist.is-active {
    border-color: #EF4444;
    color: #EF4444;
    background: #FEF2F2;
}

.pdp-qty-wishlist .heart-o { display: block; }
.pdp-qty-wishlist .heart-f { display: none; }
.pdp-qty-wishlist.is-active .heart-o { display: none; }
.pdp-qty-wishlist.is-active .heart-f { display: block; }

/* ── Premium Add to Cart Button ── */
.pdp-add-btn,
.pdp-cart-section .single_add_to_cart_button,
.pdp-cart-section .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 58px !important;
    padding: 0 28px !important;
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 50%, #0F766E 100%) !important;
    background-size: 200% 100% !important;
    color: white !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    box-shadow: 0 6px 24px rgba(20,184,166,0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
    position: relative !important;
    overflow: hidden !important;
    animation: pdp-btn-pulse 3s ease-in-out infinite;
}

@keyframes pdp-btn-pulse {
    0%, 100% { box-shadow: 0 6px 24px rgba(20,184,166,0.35), inset 0 1px 0 rgba(255,255,255,0.2), 0 0 0 0 rgba(20,184,166,0); }
    50% { box-shadow: 0 6px 24px rgba(20,184,166,0.35), inset 0 1px 0 rgba(255,255,255,0.2), 0 0 0 8px rgba(20,184,166,0.08); }
}

.pdp-add-btn::before,
.pdp-cart-section .single_add_to_cart_button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.pdp-add-btn:hover:not(:disabled)::before,
.pdp-cart-section .single_add_to_cart_button:hover:not(:disabled)::before {
    left: 100%;
}

.pdp-add-btn:hover:not(:disabled),
.pdp-cart-section .single_add_to_cart_button:hover:not(:disabled) {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 32px rgba(20,184,166,0.5), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    background-position: 100% 0 !important;
    animation: none;
}

.pdp-add-btn:active:not(:disabled),
.pdp-cart-section .single_add_to_cart_button:active:not(:disabled) {
    transform: scale(0.97) translateY(0) !important;
    box-shadow: 0 4px 14px rgba(20,184,166,0.3) !important;
    animation: none;
}

/* ATC button states */
.pdp-add-btn.is-loading,
.single_add_to_cart_button.is-loading {
    pointer-events: none;
    opacity: 0.8;
    animation: none;
}

.pdp-add-btn.is-success,
.single_add_to_cart_button.is-success {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    box-shadow: 0 6px 20px rgba(16,185,129,0.4) !important;
    animation: none;
    pointer-events: none;
}

/* Disabled state */
.pdp-add-btn:disabled,
.pdp-cart-section .single_add_to_cart_button:disabled,
.pdp-cart-section .single_add_to_cart_button.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: #9CA3AF !important;
    box-shadow: none !important;
    animation: none !important;
}

/* ── PDP Out-of-Stock Styles ── */
.pdp-oos-wrap {
    text-align: center;
    padding: 24px 0;
}

.pdp-add-btn--oos {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 700;
    color: #fff !important;
    background: #6B7280 !important;
    border: none;
    border-radius: 14px;
    cursor: not-allowed;
    opacity: 1 !important;
    letter-spacing: 0.5px;
}

.pdp-add-btn--oos svg {
    opacity: 0.7;
}

.pdp-oos-text {
    margin-top: 12px;
    font-size: 13px;
    color: #9CA3AF;
    font-weight: 500;
}

/* OOS variation selected — button turns grey */
.pdp-add-btn--oos-var {
    opacity: 0.6 !important;
    background: #6B7280 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    animation: none !important;
}

/* Stock info OOS state */
.pdp-stock-info--oos {
    color: #EF4444 !important;
    background: rgba(239,68,68,0.06);
    border-color: rgba(239,68,68,0.2);
    gap: 6px;
}

.pdp-stock-info--oos svg {
    stroke: #EF4444;
    flex-shrink: 0;
}

/* Variable product: WC ATC button inside single_variation_wrap */
.pdp-cart-section .single_variation_wrap {
    margin-top: 16px;
}

.pdp-cart-section .woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pdp-cart-section .woocommerce-variation-add-to-cart .pdp-qty-row {
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════
   TRUST BOX
   ═══════════════════════════════════════════════════════════════ */

.pdp-trust {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0;
}
.pdp-trust::-webkit-scrollbar { display: none; }

.pdp-trust__item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #F9FAFB;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.pdp-trust__icon {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.pdp-trust__icon--delivery { background: #ECFDF5; color: #059669; }
.pdp-trust__icon--return   { background: #EFF6FF; color: #2563EB; }
.pdp-trust__icon--secure   { background: #F5F3FF; color: #7C3AED; }
.pdp-trust__icon--date     { background: #FFF7ED; color: #F97316; }

.pdp-trust__label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

/* ═══════════════════════════════════════════════════════════════
   SELLER BADGE
   ═══════════════════════════════════════════════════════════════ */

.pdp-seller {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #F9FAFB;
    border-radius: 14px;
}

.pdp-seller__avatar img,
.pdp-seller__initial {
    width: 36px; height: 36px;
    border-radius: 10px;
    object-fit: cover;
}

.pdp-seller__initial {
    display: flex; align-items: center; justify-content: center;
    background: var(--color-primary);
    color: white;
    font-size: 15px; font-weight: 700;
}

.pdp-seller__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.pdp-seller__name { font-size: 14px; font-weight: 600; color: var(--color-text); }

.pdp-seller__verified {
    display: flex; align-items: center; gap: 3px;
    font-size: 12px; color: #059669; font-weight: 500;
}

.pdp-seller__link {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.pdp-seller__link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   STICKY BAR (mobile)
   ═══════════════════════════════════════════════════════════════ */

.pdp-sticky {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: var(--z-sticky);
    background: white;
    border-top: 1px solid #E5E7EB;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateY(100%);
    transition: transform 0.25s ease;
}

.pdp-sticky.is-visible { transform: translateY(0); }
.pdp-sticky[hidden] { display: block !important; }

.pdp-sticky__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
}

.pdp-sticky__left {
    display: flex; flex-direction: column;
    gap: 1px; min-width: 0; flex: 1;
}

.pdp-sticky__top-row {
    display: flex; align-items: center; gap: 6px;
}

.pdp-sticky__name {
    font-size: 11px; color: #6B7280;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pdp-sticky__discount {
    flex-shrink: 0;
    font-size: 10px; font-weight: 700; color: #fff;
    background: #EF4444; border-radius: 4px;
    padding: 1px 5px; line-height: 1.4;
}

.pdp-sticky__price {
    font-size: 20px; font-weight: 800;
    color: var(--color-primary); line-height: 1.1;
}

.pdp-sticky__price del { font-size: 12px; color: #9CA3AF; margin-right: 4px; }
.pdp-sticky__price ins { text-decoration: none; background: none; }

.pdp-sticky__variant {
    font-size: 10px; color: #14B8A6; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-height: 14px;
}

.pdp-sticky__btn {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; flex-shrink: 0;
    height: 44px; padding: 0 20px;
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
    color: white; font-size: 14px; font-weight: 700;
    border: none; border-radius: 12px; cursor: pointer;
    box-shadow: 0 4px 14px rgba(20,184,166,0.3);
    transition: transform 0.12s;
}

.pdp-sticky__btn:active:not(:disabled) { transform: scale(0.97); }

.pdp-sticky__btn--disabled {
    background: #E5E7EB; color: #9CA3AF;
    box-shadow: none; cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
   TABS SECTION
   ═══════════════════════════════════════════════════════════════ */

.pdp-tabs-section {
    padding-top: 24px;
    padding-bottom: 0;
    padding-left: 6px;
    padding-right: 6px;
}

.pdp-extras-section {
    padding-top: 24px;
    padding-bottom: 0;
    padding-left: 6px;
    padding-right: 6px;
}

.ptabs {
    background: white;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    overflow: hidden;
}

.ptabs__nav {
    display: flex; gap: 4px;
    padding: 6px;
    background: #F3F4F6;
    border-radius: 10px;
    margin: 14px;
    overflow-x: auto;
    scrollbar-width: none;
}

.ptabs__nav::-webkit-scrollbar { display: none; }

.ptabs__pill {
    flex: 1;
    min-width: max-content;
    padding: 9px 14px;
    font-size: 13px; font-weight: 600;
    color: #6B7280;
    background: transparent;
    border: none; border-radius: 8px;
    cursor: pointer; white-space: nowrap;
    transition: all 0.2s;
}

.ptabs__pill:hover { color: var(--color-text); background: rgba(255,255,255,0.5); }

.ptabs__pill.is-active {
    background: white;
    color: var(--color-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.ptabs__panels { padding: 0 14px 14px; }

.ptabs__panel { display: none; }
.ptabs__panel.is-active { display: block; }

.ptabs__content { font-size: 14px; line-height: 1.7; color: #4B5563; }
.ptabs__content p { margin-bottom: 10px; }
.ptabs__content p:last-child { margin-bottom: 0; }

/* Attributes table */
.ptabs__attrs {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
    font-size: 13px;
}

.ptabs__attrs tr:nth-child(even) { background: #F9FAFB; }

.ptabs__attrs th,
.ptabs__attrs td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #F3F4F6;
}

.ptabs__attrs th {
    font-weight: 600;
    color: #6B7280;
    width: 35%;
}

.ptabs__attrs td { color: var(--color-text); }

/* Review Summary */
.review-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: linear-gradient(135deg, #F0FDFA 0%, #ECFDF5 100%);
    border-radius: 12px;
    margin-bottom: 14px;
}

.review-summary__score {
    font-size: 36px; font-weight: 800;
    color: var(--color-primary); line-height: 1;
}

.review-summary__stars { display: flex; gap: 2px; }
.review-summary__count { font-size: 12px; color: #6B7280; margin-top: 2px; }

/* Reviews List */
.reviews-list #reviews { margin: 0; }
.reviews-list .woocommerce-Reviews-title { display: none; }
.reviews-list #comments { margin: 0; }

.reviews-list .commentlist { list-style: none; margin: 0; padding: 0; }

.reviews-list .comment {
    background: #F9FAFB;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
}

.reviews-list .comment:last-child { margin-bottom: 0; }

.reviews-list .comment_container { display: flex; gap: 10px; }

.reviews-list .avatar {
    width: 36px; height: 36px;
    border-radius: 50%; flex-shrink: 0; object-fit: cover;
}

.reviews-list .comment-text { flex: 1; min-width: 0; }

.reviews-list .meta {
    display: flex; flex-wrap: wrap;
    align-items: center; gap: 6px;
    margin-bottom: 4px;
}

.reviews-list .woocommerce-review__author {
    font-size: 13px; font-weight: 700; color: var(--color-text);
}

.reviews-list .woocommerce-review__dash { display: none; }
.reviews-list .woocommerce-review__published-date { font-size: 11px; color: #9CA3AF; }
.reviews-list .star-rating { font-size: 11px; margin-bottom: 6px; }

.reviews-list .description p {
    font-size: 13px; line-height: 1.6; color: #4B5563; margin: 0;
}

.reviews-list .woocommerce-review__verified {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 6px;
    background: #ECFDF5; color: #059669;
    font-size: 10px; font-weight: 600; border-radius: 4px;
}

/* Review Form */
.reviews-list #review_form_wrapper { margin-top: 16px; padding-top: 16px; border-top: 1px solid #E5E7EB; }
.reviews-list .comment-reply-title { font-size: 16px; font-weight: 700; color: var(--color-text); margin-bottom: 12px; }
.reviews-list .comment-form-rating { margin-bottom: 12px; }
.reviews-list .comment-form-rating label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.reviews-list .stars { display: flex; gap: 3px; }
.reviews-list .stars a { font-size: 22px; color: #D1D5DB; text-decoration: none; }
.reviews-list .stars a:hover,
.reviews-list .stars a.active { color: #F59E0B; }
.reviews-list .comment-form-comment label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }

.reviews-list .comment-form-comment textarea {
    width: 100%; min-height: 90px;
    padding: 10px 12px; font-size: 14px; font-family: inherit;
    border: 1.5px solid #E5E7EB; border-radius: 10px;
    resize: vertical; transition: border-color 0.2s;
}

.reviews-list .comment-form-comment textarea:focus { border-color: var(--color-primary); outline: none; }

.reviews-list .form-submit .submit {
    display: inline-flex; align-items: center;
    padding: 10px 20px;
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
    color: white; font-size: 14px; font-weight: 700;
    border: none; border-radius: 10px; cursor: pointer;
    box-shadow: 0 4px 14px rgba(20,184,166,0.3);
    transition: transform 0.15s;
}

.reviews-list .form-submit .submit:hover { transform: translateY(-1px); }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 6px; }

.faq-item {
    background: #F9FAFB;
    border-radius: 10px;
    overflow: hidden;
    transition: background 0.15s;
}

.faq-item:hover { background: #F3F4F6; }

.faq-q {
    display: flex; align-items: center;
    justify-content: space-between; gap: 10px;
    width: 100%; padding: 12px 14px;
    font-size: 13px; font-weight: 600;
    color: var(--color-text);
    text-align: left; background: none;
    border: none; cursor: pointer;
}

.faq-q span { flex: 1; }

.faq-chevron {
    flex-shrink: 0;
    color: #9CA3AF;
    transition: transform 0.25s ease;
}

.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }

.faq-a { padding: 0 14px 14px; }
.faq-a p { font-size: 13px; line-height: 1.7; color: #6B7280; margin: 0; }

/* Spacing between FBT and related products */
.pdp-extras-section > * + * {
    margin-top: 28px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet ≥768px
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
    .pdp {
        padding-bottom: 16px;
        --page-gutter: 16px;
        --container-padding: 1rem;
    }
    .pdp-title { font-size: 24px; font-weight: 700; color: var(--color-text); }
    .pdp-brand { color: var(--color-primary); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
    .pdp-price-card__current { font-size: 32px; }
    .pdp-gallery__main { aspect-ratio: 3 / 4; }
    .pdp-gallery__img { object-fit: contain; object-position: center; }
    .pdp-gallery__counter { display: none; }
    .pdp-gallery__thumbs--mobile { display: none; }
    .pdp-gallery__dots { display: none; }

    /* Restore normal container padding on tablet+ */
    .pdp .container,
    .pdp-main.container,
    .pdp-tabs-section.container,
    .pdp-extras-section.container {
        padding-left: var(--page-gutter);
        padding-right: var(--page-gutter);
        padding-inline: var(--page-gutter);
    }

    /* Remove gallery full-bleed on tablet+ */
    .pdp-gallery-col {
        width: auto;
        left: auto;
        transform: none;
    }

    .pdp-info-col { padding: 16px 16px 24px; }

    .pdp-tabs-section,
    .pdp-extras-section {
        padding-left: 0;
        padding-right: 0;
    }

    .pdp-trust {
        flex-wrap: wrap;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Desktop ≥1024px — 2-COLUMN LAYOUT
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

    .pdp .container,
    .pdp-main.container,
    .pdp-tabs-section.container,
    .pdp-extras-section.container {
        padding-left: var(--page-gutter-lg);
        padding-right: var(--page-gutter-lg);
    }

    .pdp-main {
        flex-direction: row;
        gap: 28px;
        padding-top: 24px;
        align-items: flex-start;
    }

    /* Gallery sticky */
    .pdp-gallery-col {
        flex: 0 0 55%;
        max-width: 55%;
        position: sticky;
        top: 100px;
        border-radius: 14px;
        overflow: hidden;
        background: white;
        box-shadow: 0 1px 6px rgba(0,0,0,0.05);
    }

    /* Show vertical thumbs (desktop only) */
    .pdp-gallery {
        flex-direction: row;
        border-radius: 14px;
        background: white;
    }

    /* Shift badges & actions right to clear desktop thumbnail column */
    .pdp-gallery-col:has(.pdp-gallery--multi) > .pdp-badges {
        left: 92px;
    }

    .pdp-gallery__thumbs--desktop {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 10px;
        overflow-y: auto;
        max-height: 100%;
        scrollbar-width: thin;
        flex-shrink: 0;
    }

    .pdp-gallery__thumbs--mobile { display: none; }

    .pdp-gallery__thumb {
        flex-shrink: 0;
        width: 60px; height: 72px;
        padding: 2px;
        background: white;
        border: 2px solid transparent;
        border-radius: 8px;
        cursor: pointer;
        transition: border-color 0.12s;
        overflow: hidden;
    }

    .pdp-gallery__thumb img {
        width: 100%; height: 100%;
        object-fit: cover; border-radius: 5px;
    }

    .pdp-gallery__thumb:hover { border-color: #D1D5DB; }
    .pdp-gallery__thumb.is-active { border-color: var(--color-primary); }

    /* Main image: single — portre dikdortgen */
    .pdp-gallery__main {
        flex: 1;
        aspect-ratio: 3 / 4;
        min-height: auto;
        max-height: none;
    }

    .pdp-gallery__track { overflow: hidden; }
    .pdp-gallery__slide { display: none; }
    .pdp-gallery__slide.is-active { display: flex; }

    .pdp-gallery__dots,
    .pdp-gallery__counter { display: none; }

    /* Info col */
    .pdp-info-col {
        flex: 1; min-width: 0;
        padding: 0;
    }

    .pdp-title { font-size: 26px; }

    .pdp-sticky__inner { max-width: 600px; margin: 0 auto; }

    /* Tabs and extras: full container width (same as pdp-main) */
    .ptabs__pill { font-size: 14px; padding: 10px 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Wide ≥1200px
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 1200px) {
    .pdp-gallery-col { flex: 0 0 52%; max-width: 52%; }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .pdp,
body[data-theme="dark"] .pdp { background: var(--color-bg); }

html[data-theme="dark"] .pdp-gallery-col,
html[data-theme="dark"] .pdp-gallery,
body[data-theme="dark"] .pdp-gallery-col,
body[data-theme="dark"] .pdp-gallery { background: var(--color-bg-card); }

html[data-theme="dark"] .pdp-float-btn,
body[data-theme="dark"] .pdp-float-btn { background: #1F2937; }

html[data-theme="dark"] .pdp-price-card { background: rgba(5,150,105,0.06); border-color: rgba(5,150,105,0.15); }
html[data-theme="dark"] .pdp-price-card__savings { background: rgba(5,150,105,0.1); }
html[data-theme="dark"] .pdp-inst-card { background: var(--color-bg-card); border-color: #374151; }

html[data-theme="dark"] .pdp-cart-section,
html[data-theme="dark"] .pdp-trust__item,
html[data-theme="dark"] .pdp-seller,
html[data-theme="dark"] .ptabs,
body[data-theme="dark"] .pdp-cart-section,
body[data-theme="dark"] .pdp-trust__item,
body[data-theme="dark"] .pdp-seller,
body[data-theme="dark"] .ptabs { background: var(--color-bg-card); border-color: #374151; }

html[data-theme="dark"] .pdp-var-btn,
body[data-theme="dark"] .pdp-var-btn { background: #1F2937; border-color: #374151; }

html[data-theme="dark"] .pdp-var-btn.is-oos,
body[data-theme="dark"] .pdp-var-btn.is-oos { background: #111827; border-color: #1F2937; color: #4B5563; opacity: 0.35; }

html[data-theme="dark"] .pdp-add-btn--oos,
body[data-theme="dark"] .pdp-add-btn--oos { background: #374151 !important; }

html[data-theme="dark"] .pdp-oos-text,
body[data-theme="dark"] .pdp-oos-text { color: #6B7280; }

html[data-theme="dark"] .badge--oos,
body[data-theme="dark"] .badge--oos { background: rgba(75,85,99,0.9); }

html[data-theme="dark"] .product-card--oos .product-card-thumb,
body[data-theme="dark"] .product-card--oos .product-card-thumb { filter: grayscale(50%) opacity(0.55); }

html[data-theme="dark"] .product-card-add-btn--oos,
body[data-theme="dark"] .product-card-add-btn--oos { background: #1F2937 !important; color: #6B7280 !important; border-color: #374151 !important; }

html[data-theme="dark"] .pdp-stock-info--oos,
body[data-theme="dark"] .pdp-stock-info--oos { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.15); }

html[data-theme="dark"] .pdp-qty,
body[data-theme="dark"] .pdp-qty { background: #1F2937; border-color: #374151; }

html[data-theme="dark"] .pdp-sticky,
body[data-theme="dark"] .pdp-sticky { background: var(--color-bg-card); border-color: #374151; box-shadow: 0 -4px 20px rgba(0,0,0,0.3); }

html[data-theme="dark"] .pdp-gallery__dots,
body[data-theme="dark"] .pdp-gallery__dots { background: rgba(31,41,55,0.85); }

html[data-theme="dark"] .pdp-gallery__thumb-m,
body[data-theme="dark"] .pdp-gallery__thumb-m { background: #1F2937; border-color: #374151; }

html[data-theme="dark"] .pdp-low-stock,
body[data-theme="dark"] .pdp-low-stock { background: rgba(220,38,38,0.1); border-color: rgba(220,38,38,0.2); }

html[data-theme="dark"] .pdp-trust__icon--delivery { background: rgba(5,150,105,0.1); }
html[data-theme="dark"] .pdp-trust__icon--return { background: rgba(37,99,235,0.1); }
html[data-theme="dark"] .pdp-trust__icon--secure { background: rgba(124,58,237,0.1); }
html[data-theme="dark"] .pdp-trust__icon--date { background: rgba(249,115,22,0.1); }

html[data-theme="dark"] .ptabs__nav,
body[data-theme="dark"] .ptabs__nav { background: #1F2937; }

html[data-theme="dark"] .ptabs__pill.is-active,
body[data-theme="dark"] .ptabs__pill.is-active { background: #374151; }

html[data-theme="dark"] .review-summary,
body[data-theme="dark"] .review-summary { background: linear-gradient(135deg, #1F2937 0%, #111827 100%); }

html[data-theme="dark"] .reviews-list .comment,
html[data-theme="dark"] .faq-item,
body[data-theme="dark"] .reviews-list .comment,
body[data-theme="dark"] .faq-item { background: #1F2937; }

html[data-theme="dark"] .faq-item:hover,
body[data-theme="dark"] .faq-item:hover { background: #374151; }

html[data-theme="dark"] .reviews-list .comment-form-comment textarea,
body[data-theme="dark"] .reviews-list .comment-form-comment textarea { background: #1F2937; border-color: #374151; color: var(--color-text); }

html[data-theme="dark"] .pdp-gallery__thumb,
body[data-theme="dark"] .pdp-gallery__thumb { background: #1F2937; }

html[data-theme="dark"] .ptabs__attrs tr:nth-child(even),
body[data-theme="dark"] .ptabs__attrs tr:nth-child(even) { background: #1F2937; }

html[data-theme="dark"] .ptabs__attrs th,
html[data-theme="dark"] .ptabs__attrs td,
body[data-theme="dark"] .ptabs__attrs th,
body[data-theme="dark"] .ptabs__attrs td { border-color: #374151; }


/* ==========================================================================
   CHECKOUT PAGE — Premium v26
   Ultra-premium · Warm minimal · PayTR · Mobile-first
   ========================================================================== */

.checkout-page {
    padding: 16px 12px;
    max-width: 1180px;
    margin: 0 auto;
}

.checkout-page .ab-hidden,
.checkout-page #billing_country_field.hidden,
.checkout-page #shipping_country_field.hidden,
.checkout-page .form-row.hidden {
    display: none !important;
}

/* ── CHECKOUT CLEANUP — hide notices, coupon, newsletter, gift ──────── */

.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .checkout_coupon,
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .abc-checkout-notice,
.woocommerce-checkout .mc4wp-checkbox,
.woocommerce-checkout .mc4wp-form,
.woocommerce-checkout [class*="newsletter"],
.woocommerce-checkout [class*="bulten"],
.woocommerce-checkout [class*="subscribe"],
.woocommerce-checkout [class*="optin"],
.woocommerce-checkout [class*="opt-in"],
.woocommerce-checkout [class*="mailpoet"],
.woocommerce-checkout [class*="mailchimp"],
.woocommerce-checkout [class*="klaviyo"],
.woocommerce-checkout [id*="newsletter"],
.woocommerce-checkout [id*="subscribe"],
.woocommerce-checkout #mc_embed_signup,
.woocommerce-checkout .woocommerce-mailchimp-opt-in,
.woocommerce-checkout [class*="gift-notice"],
.woocommerce-checkout [class*="hediye"] {
    display: none !important;
}

/* Privacy policy text */
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text,
.woocommerce-checkout p.form-row.woocommerce-validated .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-checkout-review-order .woocommerce-privacy-policy-text {
    display: none !important;
}

/* ── STEPS ──────────────────────────────────────────────────────────────── */

.checkout-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 24px;
    padding: 16px 24px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #EEF0F4;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

.checkout-step {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkout-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 12px;
    font-weight: 700;
    color: #C4C9D4;
    background: #F5F6F8;
    border: 2px solid #E2E5EB;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
}

.checkout-step.is-active .checkout-step__num {
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary) 0%, #0D9488 100%);
    border-color: var(--color-primary);
    box-shadow: 0 3px 12px rgba(20, 184, 166, 0.35);
}

.checkout-step.is-done .checkout-step__num {
    color: #fff;
    background: #10B981;
    border-color: #10B981;
}

.checkout-step__label {
    font-size: 13px;
    font-weight: 600;
    color: #C4C9D4;
    display: none;
    transition: color 0.25s;
    letter-spacing: 0.01em;
}

.checkout-step.is-active .checkout-step__label { color: var(--color-text); }
.checkout-step.is-done .checkout-step__label { color: #10B981; }

.checkout-step__line {
    width: 40px;
    height: 2px;
    background: #E8EBF0;
    margin: 0 12px;
    border-radius: 1px;
}

.checkout-step.is-done + .checkout-step__line { background: #10B981; }

@media (min-width: 480px) {
    .checkout-step__label { display: block; }
    .checkout-step__line { width: 56px; }
}

/* ── LAYOUT ─────────────────────────────────────────────────────────────── */

.checkout-page .checkout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── SECTION CARD ───────────────────────────────────────────────────────── */

.checkout-section {
    background: #fff;
    border-radius: 18px;
    padding: 24px 18px;
    border: 1px solid #EEF0F4;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02), 0 6px 20px rgba(0,0,0,0.03);
}

.checkout-section h3,
.ab-billing__title,
.ab-shipping__title,
.ab-additional__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #F0F2F5;
    letter-spacing: -0.01em;
}

.checkout-section h3 svg,
.ab-billing__title svg,
.ab-shipping__title svg,
.ab-additional__title svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

/* ── FIELDS ─────────────────────────────────────────────────────────────── */

/* Name fields: full-width mobile, grid handles desktop */
.checkout-page .form-row-first,
.checkout-page .form-row-last {
    float: none !important;
    width: 100% !important;
}

@media (min-width: 480px) {
    .checkout-page .woocommerce-billing-fields__field-wrapper,
    .checkout-page .woocommerce-shipping-fields__field-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .checkout-page .woocommerce-billing-fields__field-wrapper .form-row-wide,
    .checkout-page .woocommerce-shipping-fields__field-wrapper .form-row-wide {
        grid-column: 1 / -1;
    }

    .checkout-page .woocommerce-billing-fields__field-wrapper .form-row,
    .checkout-page .woocommerce-shipping-fields__field-wrapper .form-row {
        margin-bottom: 0;
    }
}

.checkout-page .form-row { margin-bottom: 14px; }

.checkout-page .form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #4B5563;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.checkout-page .form-row label .required { color: var(--color-primary); font-weight: 500; }

.checkout-page .form-row label .optional {
    color: #B0B6C3;
    font-weight: 400;
    font-size: 12px;
    margin-left: 2px;
}

/* ── INPUTS ─────────────────────────────────────────────────────────────── */

.checkout-page .form-row input[type="text"],
.checkout-page .form-row input[type="email"],
.checkout-page .form-row input[type="tel"],
.checkout-page .form-row input[type="number"],
.checkout-page .form-row input[type="password"],
.checkout-page .form-row select,
.checkout-page .form-row textarea {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    font-size: 15px;
    font-family: inherit;
    color: var(--color-text);
    background: #F8F9FB;
    border: 1.5px solid #E2E5EB;
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(.4,0,.2,1);
    -webkit-appearance: none;
}

.checkout-page .form-row textarea {
    height: auto;
    min-height: 80px;
    padding: 14px 16px;
    resize: vertical;
}

.checkout-page .form-row input::placeholder,
.checkout-page .form-row textarea::placeholder {
    color: #BFC4CE;
    font-weight: 400;
}

.checkout-page .form-row input:focus,
.checkout-page .form-row select:focus,
.checkout-page .form-row textarea:focus {
    background: #fff;
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.08);
}

.checkout-page .form-row.woocommerce-validated input,
.checkout-page .form-row.woocommerce-validated select {
    border-color: #10B981;
    background: #F0FDF9;
}

.checkout-page .form-row.woocommerce-invalid input,
.checkout-page .form-row.woocommerce-invalid select {
    border-color: #EF4444;
    background: #FEF2F2;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.06);
}

/* ── SELECT2 ────────────────────────────────────────────────────────────── */

.checkout-page .select2-container--default .select2-selection--single {
    height: 50px;
    border: 1.5px solid #E2E5EB;
    border-radius: 12px;
    background: #F8F9FB;
    transition: all 0.2s;
}

.checkout-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 48px;
    padding-left: 16px;
    color: var(--color-text);
    font-size: 15px;
}

.checkout-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px;
    right: 12px;
}

.checkout-page .select2-container--open .select2-selection--single {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.08);
    background: #fff;
}

/* ── CHECKBOX ───────────────────────────────────────────────────────────── */

.checkout-page .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--color-text);
    cursor: pointer;
}

.checkout-page .woocommerce-form__input-checkbox {
    width: 20px; height: 20px; min-width: 20px;
    margin-top: 2px; accent-color: var(--color-primary);
}

/* ── SHIPPING TOGGLE ────────────────────────────────────────────────────── */

.ab-shipping__toggle { margin-bottom: 18px; }

.ab-shipping__toggle label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #F8F9FB;
    border: 1.5px solid #E2E5EB;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.ab-shipping__toggle label:hover {
    border-color: var(--color-primary);
    background: rgba(20, 184, 166, 0.02);
}

/* ── SIDEBAR ────────────────────────────────────────────────────────────── */

.order-summary {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #EEF0F4;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02), 0 6px 20px rgba(0,0,0,0.03);
    overflow: hidden;
}

.order-summary__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    background: linear-gradient(135deg, #F8F9FB 0%, #fff 100%);
    border: none;
    border-bottom: 1px solid #EEF0F4;
}

.order-summary__toggle::-webkit-details-marker { display: none; }
.order-summary__toggle::marker { display: none; content: ''; }

.order-summary__toggle-left { display: flex; align-items: center; gap: 8px; }
.order-summary__toggle-left svg { color: var(--color-primary); }
.order-summary__count { font-weight: 400; color: #9CA3AF; font-size: 13px; }
.order-summary__toggle-right { display: flex; align-items: center; gap: 6px; }
.order-summary__total { font-weight: 700; color: var(--color-primary); font-size: 15px; }
.order-summary__total small.includes_tax { display: none; }

.order-summary__chevron {
    color: #9CA3AF;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1);
    flex-shrink: 0;
}

.order-summary[open] > .order-summary__toggle .order-summary__chevron { transform: rotate(180deg); }
.order-summary__body { padding: 0 18px 18px; }
.order-summary__title { display: none; }

/* ── REVIEW ORDER ───────────────────────────────────────────────────────── */

.review-order { margin-bottom: 16px; }

.review-order__products {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid #F0F2F5;
    margin-bottom: 12px;
}

.review-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.review-item__img {
    position: relative;
    width: 52px; height: 52px;
    border-radius: 11px;
    overflow: hidden;
    background: #F5F6F8;
    flex-shrink: 0;
    border: 1px solid #EEF0F4;
}

.review-item__img img { width: 100%; height: 100%; object-fit: cover; }

.review-item__qty {
    position: absolute;
    top: -5px; right: -5px;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, #0D9488 100%);
    color: #fff; font-size: 10px; font-weight: 700;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(20, 184, 166, 0.3);
}

.review-item__info { flex: 1; min-width: 0; }

.review-item__name {
    display: block; font-size: 13px; font-weight: 500;
    color: var(--color-text); line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.review-item__info .variation { font-size: 11px; color: #9CA3AF; margin-top: 2px; }
.review-item__info .variation dt { display: none; }
.review-item__info .variation dd { margin: 0; padding: 0; }

.review-item__price {
    font-size: 14px; font-weight: 600;
    color: var(--color-text); flex-shrink: 0; white-space: nowrap;
}

/* Totals */
/* ── TOTALS (v3 — clean & balanced) ──────────────────────────────────── */

.review-order__totals { display: flex; flex-direction: column; gap: 8px; }

.review-order__row {
    display: flex; justify-content: space-between;
    align-items: center; font-size: 13px; color: #6B7280;
}

.review-order__row span:last-child { font-weight: 500; color: var(--color-text); }
.review-order__row--discount span:last-child { color: #059669; font-weight: 600; }

.review-order__row--total {
    margin-top: 12px; padding: 12px 16px;
    background: linear-gradient(135deg, #0F766E 0%, #0D9488 50%, #14B8A6 100%);
    border-radius: 12px;
    align-items: center;
}

.review-order__row--total span:first-child {
    font-weight: 600; color: rgba(255,255,255,0.85); font-size: 14px;
    white-space: nowrap; text-transform: uppercase; letter-spacing: 0.05em;
}

.review-order__row--total span:last-child {
    text-align: right;
    color: #fff;
}

.review-order__row--total span:last-child strong {
    font-size: 26px; font-weight: 800; color: #fff;
    letter-spacing: -0.03em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.review-order__row--total small.includes_tax {
    display: none;
}

/* Global: hide "(XX KDV dahil)" text everywhere */
small.includes_tax { display: none !important; }

/* Shipping row — clean layout */
.review-order__row--shipping {
    font-size: 13px; color: #6B7280;
}
.review-order__row--shipping span:last-child {
    font-weight: 600; color: var(--color-text);
}
.review-order__row--shipping input[type="radio"] {
    margin-right: 6px; accent-color: var(--color-primary);
}
.review-order__row--shipping input[type="hidden"] { display: none; }

/* Hide any leftover WC shipping table artifacts */
.review-order .woocommerce-shipping-totals { display: none; }

/* ── PAYMENT (v3 — Stripe-level premium) ────────────────────────────── */

.checkout-payment {
    margin-top: 24px; padding-top: 24px;
    border-top: 1.5px solid #E5E7EB;
}

.checkout-payment__title {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--color-text);
    margin: 0 0 14px; letter-spacing: -0.01em;
}

.checkout-payment__title svg { color: var(--color-primary); width: 18px; height: 18px; }

.checkout-payment__methods {
    list-style: none; margin: 0 0 20px; padding: 0;
    display: flex; flex-direction: column; gap: 0;
    border: 1.5px solid #E2E5E9;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.checkout-payment__methods .wc_payment_method {
    background: #fff;
    border: none;
    border-bottom: 1px solid #F0F2F5;
    border-radius: 0;
    padding: 16px 18px;
    transition: background 0.2s ease;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 14px;
}

.checkout-payment__methods .wc_payment_method:last-child {
    border-bottom: none;
}

.checkout-payment__methods .wc_payment_method > label {
    flex: 1; min-width: 0;
    font-size: 13.5px; font-weight: 600; color: var(--color-text);
    cursor: pointer; margin: 0; line-height: 22px;
}

.checkout-payment__methods .wc_payment_method:hover {
    background: #FAFBFC;
}

.checkout-payment__methods .wc_payment_method > label img { max-height: 24px; width: auto; }

/* Hide native radio — use label click */
.checkout-payment__methods .wc_payment_method input[type="radio"] {
    -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px; flex-shrink: 0;
    border: 2px solid #D1D5DB; border-radius: 50%;
    background: #fff; cursor: pointer;
    transition: all 0.2s cubic-bezier(.4,0,.2,1);
    margin: 0;
}

.checkout-payment__methods .wc_payment_method input[type="radio"]::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.2s cubic-bezier(.4,0,.2,1);
}

.checkout-payment__methods .wc_payment_method input[type="radio"]:checked {
    border-color: var(--color-primary);
    background: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(20,184,166,0.12);
}

.checkout-payment__methods .wc_payment_method input[type="radio"]:checked::after {
    width: 8px; height: 8px;
}

/* Selected method background */
.checkout-payment__methods .wc_payment_method:has(input:checked) {
    background: rgba(20, 184, 166, 0.03);
}

.checkout-payment__methods .wc_payment_method:has(input:checked) > label {
    background: transparent;
}

/* Selected method left accent */
.checkout-payment__methods .wc_payment_method:has(input:checked)::before {
    content: '';
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    background: var(--color-primary);
    border-radius: 0 3px 3px 0;
}

/* Payment description box */
.checkout-payment__methods .payment_box {
    width: 100%; flex-basis: 100%;
    margin: 10px 0 0; padding: 10px 14px;
    margin-left: 36px;
    background: rgba(20,184,166,0.03);
    border-radius: 8px;
    font-size: 12.5px; color: #6B7280; line-height: 1.6;
}

.checkout-payment__methods .payment_box p { margin: 0; }
.checkout-payment__methods .payment_box p:last-child { margin-bottom: 0; }

.checkout-payment__empty {
    padding: 14px 18px; background: #FEF3C7; border-radius: 0;
    font-size: 13px; color: #92400E;
}

/* ── TERMS ──────────────────────────────────────────────────────────────── */

.checkout-terms { margin-bottom: 14px; }

.checkout-terms .woocommerce-terms-and-conditions-checkbox-text {
    font-size: 13px; line-height: 1.5; color: var(--color-text-muted);
}

.checkout-terms .woocommerce-terms-and-conditions-checkbox-text a {
    color: var(--color-primary); font-weight: 600;
    text-decoration: underline; text-underline-offset: 2px;
}

.checkout-terms .woocommerce-terms-and-conditions-checkbox-text a:hover { text-decoration: none; }

.checkout-terms__row { margin-bottom: 0 !important; }

.checkout-terms__label {
    display: flex !important; align-items: flex-start !important; gap: 10px !important; cursor: pointer;
}

.checkout-terms__label input[type="checkbox"] {
    width: 20px; height: 20px; min-width: 20px; margin-top: 1px; accent-color: var(--color-primary);
}

.checkout-terms__mark { display: none; }
.checkout-terms__text { flex: 1; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
.checkout-terms__text .required { color: #EF4444; }
.woocommerce-privacy-policy-text p { font-size: 12px; color: var(--color-text-muted); margin-bottom: 10px; }

/* ── PLACE ORDER ────────────────────────────────────────────────────────── */

.checkout-payment__footer { padding: 0 !important; }

.place-order-btn {
    display: flex !important; align-items: center !important;
    justify-content: center !important; gap: 10px;
    width: 100% !important; height: 54px !important;
    font-size: 16px !important; font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 50%, #0F766E 100%) !important;
    border: none !important; border-radius: 14px !important;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(20, 184, 166, 0.35) !important;
    transition: all 0.2s cubic-bezier(.4,0,.2,1) !important;
    letter-spacing: 0.01em;
    position: relative; overflow: hidden;
}

.place-order-btn::before {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    transition: left 0.5s ease; pointer-events: none;
}

.place-order-btn:hover::before { left: 100%; }

.place-order-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(20, 184, 166, 0.4) !important;
}

.place-order-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 10px rgba(20, 184, 166, 0.3) !important;
}

.place-order-btn:disabled,
.place-order-btn[disabled] { opacity: 0.55 !important; cursor: not-allowed; transform: none !important; }

.place-order-btn svg { flex-shrink: 0; }
.checkout-payment .blockUI.blockOverlay { border-radius: 14px; }

/* ── TRUST BADGES ───────────────────────────────────────────────────────── */

.checkout-trust {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 20px; margin-top: 16px; padding: 12px 14px;
    font-size: 11px; color: #9CA3AF; letter-spacing: 0.01em;
}

.checkout-trust span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.checkout-trust svg { color: #10B981; width: 14px; height: 14px; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .checkout-page { padding: 24px; }
    .checkout-section { padding: 28px 24px; }
}

@media (min-width: 1024px) {
    .checkout-page { padding: 32px 24px; }

    .checkout-page .checkout {
        flex-direction: row; align-items: flex-start; gap: 28px;
    }

    .checkout-page__main { flex: 1; min-width: 0; }

    .checkout-page__sidebar {
        width: 380px; flex-shrink: 0; position: sticky; top: 24px;
    }

    .order-summary__toggle { display: none; }
    .order-summary__body { display: block !important; padding: 22px; }

    .order-summary__title {
        display: block; font-size: 17px; font-weight: 700;
        color: var(--color-text); margin: 0 0 18px; padding-bottom: 14px;
        border-bottom: 1px solid #F0F2F5; letter-spacing: -0.01em;
    }

    .checkout-section { padding: 32px 28px; }
}

/* ── LEGAL CHECKBOXES ───────────────────────────────────────────────────── */

.checkout-page .abc-legal-checkboxes {
    margin: 16px 0; padding: 16px; background: #F8F9FB;
    border: 1px solid #EEF0F4; border-radius: 14px;
}

.checkout-page .abc-legal-checkboxes .abc-legal-row,
.checkout-page .abc-legal-checkboxes .abc-legal-checkbox { margin-bottom: 10px; }

.checkout-page .abc-legal-checkboxes .abc-legal-row:last-child,
.checkout-page .abc-legal-checkboxes .abc-legal-checkbox:last-child { margin-bottom: 0; }

.checkout-page .abc-legal-checkboxes label,
.checkout-page .abc-legal-checkboxes .abc-legal-label {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13px; line-height: 1.5; color: var(--color-text-muted); cursor: pointer;
}

.checkout-page .abc-legal-checkboxes input[type="checkbox"],
.checkout-page .abc-legal-checkboxes .abc-legal-input {
    width: 20px; height: 20px; min-width: 20px;
    margin-top: 1px; accent-color: var(--color-primary);
}

.checkout-page .abc-legal-checkboxes a,
.checkout-page .abc-legal-checkboxes .abc-legal-link {
    color: var(--color-primary); font-weight: 600;
    text-decoration: underline; text-underline-offset: 2px;
}

.checkout-page .abc-legal-checkboxes a:hover,
.checkout-page .abc-legal-checkboxes .abc-legal-link:hover { text-decoration: none; }

.checkout-page .abc-legal-checkboxes .required { color: #EF4444; }

.checkout-page .abc-legal-checkboxes .abc-legal-checkmark {
    width: 20px; height: 20px; min-width: 20px;
    border: 2px solid #D1D5DB; border-radius: 5px;
    margin-top: 1px; transition: all 0.15s;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.checkout-page .abc-legal-checkboxes .abc-legal-input:checked + .abc-legal-checkmark {
    background: var(--color-primary); border-color: var(--color-primary);
}

.checkout-page .abc-legal-checkboxes .abc-legal-input:checked + .abc-legal-checkmark::after {
    content: ''; width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg); margin-top: -2px;
}

/* ── LEGAL MODALS ───────────────────────────────────────────────────────── */

.abc-modal {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center;
    padding: 16px; opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.abc-modal.is-open, .abc-modal[aria-hidden="false"] { opacity: 1; visibility: visible; }

.abc-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(6px);
}

.abc-modal__dialog {
    position: relative; width: 100%; max-width: 700px; max-height: 90vh;
    background: #fff; border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.18);
    display: flex; flex-direction: column;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}

.abc-modal.is-open .abc-modal__dialog,
.abc-modal[aria-hidden="false"] .abc-modal__dialog { transform: translateY(0); }

.abc-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 22px; border-bottom: 1px solid #F0F2F5;
}

.abc-modal__title { font-size: 17px; font-weight: 700; color: var(--color-text); margin: 0; }

.abc-modal__close {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; color: #6B7280; background: #F3F4F6;
    border: none; border-radius: 10px; cursor: pointer; transition: all 0.15s;
}

.abc-modal__close:hover { color: var(--color-text); background: #E5E7EB; }

.abc-modal__body {
    flex: 1; padding: 22px; overflow-y: auto;
    font-size: 14px; line-height: 1.7; color: #4B5563;
}

.abc-modal__footer { padding: 14px 22px; border-top: 1px solid #F0F2F5; }

/* ── ORDER BUMP ─────────────────────────────────────────────────────────── */

.checkout-page .abc-bump, .checkout-page .abc-bump-card {
    background: #fff; border: 2px dashed #E2E5EB;
    border-radius: 14px; padding: 16px; margin: 16px 0; transition: all 0.2s;
}

.checkout-page .abc-bump:has(input:checked), .checkout-page .abc-bump-card:has(input:checked),
.checkout-page .abc-bump.is-selected, .checkout-page .abc-bump-card.is-selected {
    border-color: var(--color-primary); border-style: solid;
    background: rgba(20,184,166,0.03);
}

.checkout-page .abc-bump__header, .checkout-page .abc-bump-card__header {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 8px;
}

.checkout-page .abc-bump__badge, .checkout-page .abc-bump-card__badge {
    display: inline-flex; align-items: center; padding: 3px 10px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em; background: #FDE68A; color: #92400E; border-radius: 20px;
}

.checkout-page .abc-bump label, .checkout-page .abc-bump-card label {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    font-size: 14px; line-height: 1.5; color: var(--color-text);
}

.checkout-page .abc-bump input[type="checkbox"], .checkout-page .abc-bump-card input[type="checkbox"] {
    width: 20px; height: 20px; min-width: 20px; margin-top: 1px; accent-color: var(--color-primary);
}

.checkout-page .abc-bump__price, .checkout-page .abc-bump-card__price {
    font-weight: 700; color: var(--color-primary);
}

/* ── DARK MODE ──────────────────────────────────────────────────────────── */

html[data-theme="dark"] .checkout-steps, body[data-theme="dark"] .checkout-steps { background: var(--color-bg-card); border-color: #374151; }
html[data-theme="dark"] .checkout-step__num, body[data-theme="dark"] .checkout-step__num { background: #1F2937; border-color: #4B5563; color: #6B7280; }

html[data-theme="dark"] .cart-item, html[data-theme="dark"] .coupon-box,
html[data-theme="dark"] .cart-totals, html[data-theme="dark"] .checkout-section,
html[data-theme="dark"] .order-summary,
body[data-theme="dark"] .cart-item, body[data-theme="dark"] .coupon-box,
body[data-theme="dark"] .cart-totals, body[data-theme="dark"] .checkout-section,
body[data-theme="dark"] .order-summary { background: var(--color-bg-card); border-color: #374151; }

html[data-theme="dark"] .order-summary__toggle, body[data-theme="dark"] .order-summary__toggle { background: #1F2937; border-bottom-color: #374151; }

html[data-theme="dark"] .cart-item__img, html[data-theme="dark"] .review-item__img,
html[data-theme="dark"] .shipping-progress, html[data-theme="dark"] .checkout-payment__methods .wc_payment_method,
body[data-theme="dark"] .cart-item__img, body[data-theme="dark"] .review-item__img,
body[data-theme="dark"] .shipping-progress, body[data-theme="dark"] .checkout-payment__methods .wc_payment_method { background: #1F2937; }

html[data-theme="dark"] .checkout-payment__methods .wc_payment_method { border-color: transparent; }
html[data-theme="dark"] .checkout-payment__methods { background: #1F2937; border-color: #374151; }
html[data-theme="dark"] .checkout-payment__methods .wc_payment_method { border-bottom-color: #2D3748; }
html[data-theme="dark"] .checkout-payment__methods .wc_payment_method:has(input:checked) { border-color: var(--color-primary); background: rgba(20,184,166,0.08); box-shadow: 0 0 0 3px rgba(20,184,166,0.12); }

html[data-theme="dark"] .coupon-box__input, html[data-theme="dark"] .checkout-page .form-row input,
html[data-theme="dark"] .checkout-page .form-row select, html[data-theme="dark"] .checkout-page .form-row textarea,
body[data-theme="dark"] .coupon-box__input, body[data-theme="dark"] .checkout-page .form-row input,
body[data-theme="dark"] .checkout-page .form-row select, body[data-theme="dark"] .checkout-page .form-row textarea { background: #1F2937; border-color: #374151; color: var(--color-text); }

html[data-theme="dark"] .checkout-page .select2-container--default .select2-selection--single,
body[data-theme="dark"] .checkout-page .select2-container--default .select2-selection--single { background: #1F2937; border-color: #374151; }

html[data-theme="dark"] .cart-item__remove:hover, body[data-theme="dark"] .cart-item__remove:hover { background: #7F1D1D; }
html[data-theme="dark"] .shipping-free, html[data-theme="dark"] .cart-item__save,
body[data-theme="dark"] .shipping-free, body[data-theme="dark"] .cart-item__save { background: #064E3B; }

html[data-theme="dark"] .review-order__row--total, body[data-theme="dark"] .review-order__row--total { background: linear-gradient(135deg, #0F766E 0%, #0D9488 50%, #14B8A6 100%); }
html[data-theme="dark"] .review-order__products, body[data-theme="dark"] .review-order__products { border-bottom-color: #374151; }
html[data-theme="dark"] .order-summary__title, body[data-theme="dark"] .order-summary__title { border-bottom-color: #374151; }

html[data-theme="dark"] .checkout-page .abc-legal-checkboxes,
body[data-theme="dark"] .checkout-page .abc-legal-checkboxes { background: #1F2937; border-color: #374151; }

html[data-theme="dark"] .checkout-page .abc-bump, html[data-theme="dark"] .checkout-page .abc-bump-card,
body[data-theme="dark"] .checkout-page .abc-bump, body[data-theme="dark"] .checkout-page .abc-bump-card { background: var(--color-bg-card); border-color: #4B5563; }

html[data-theme="dark"] .abc-modal__dialog, body[data-theme="dark"] .abc-modal__dialog { background: var(--color-bg-card); }
html[data-theme="dark"] .abc-modal__header, html[data-theme="dark"] .abc-modal__footer,
body[data-theme="dark"] .abc-modal__header, body[data-theme="dark"] .abc-modal__footer { border-color: #374151; }

html[data-theme="dark"] .ab-shipping__toggle label, body[data-theme="dark"] .ab-shipping__toggle label { background: #1F2937; border-color: #374151; }

html[data-theme="dark"] .checkout-section h3, html[data-theme="dark"] .ab-billing__title, html[data-theme="dark"] .ab-shipping__title,
body[data-theme="dark"] .checkout-section h3, body[data-theme="dark"] .ab-billing__title, body[data-theme="dark"] .ab-shipping__title { border-bottom-color: #374151; }

html[data-theme="dark"] .checkout-trust, body[data-theme="dark"] .checkout-trust { color: #6B7280; }
html[data-theme="dark"] .checkout-payment, body[data-theme="dark"] .checkout-payment { border-top-color: #374151; }
html[data-theme="dark"] .checkout-payment__methods .wc_payment_method input[type="radio"] { border-color: #4B5563; background: #1F2937; }
html[data-theme="dark"] .checkout-payment__methods .payment_box { background: rgba(20,184,166,0.08); border-left-color: var(--color-primary); }
html[data-theme="dark"] .checkout-page .form-row label, body[data-theme="dark"] .checkout-page .form-row label { color: #D1D5DB; }

/* ==========================================================================
   WOOCOMMERCE BLOCKS - CART & CHECKOUT
   ========================================================================== */

/* Block Cart Page */
.wc-block-cart {
    padding: var(--page-gutter);
    max-width: 1200px;
    margin: 0 auto;
}

.wc-block-cart__main {
    background: var(--color-bg-card);
    border-radius: var(--card-radius);
    padding: var(--page-gutter-lg);
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
}

.wc-block-cart__sidebar {
    position: sticky;
    top: 100px;
}

/* Block Cart Items */
.wc-block-cart-items {
    border: none !important;
}

.wc-block-cart-items__row {
    padding: 16px 0 !important;
    border-bottom: 1px solid #F3F4F6 !important;
}

.wc-block-cart-items__row:last-child {
    border-bottom: none !important;
}

.wc-block-cart-item__image img {
    border-radius: 12px !important;
}

.wc-block-cart-item__product {
    gap: 12px;
}

.wc-block-cart-item__product-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
}

.wc-block-cart-item__product-metadata {
    font-size: 13px !important;
    color: #6B7280 !important;
}

.wc-block-cart-item__prices {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
}

/* Block Cart Quantity */
.wc-block-components-quantity-selector {
    background: #F3F4F6 !important;
    border: none !important;
    border-radius: 10px !important;
    overflow: hidden;
}

.wc-block-components-quantity-selector__button {
    background: transparent !important;
    border: none !important;
    color: var(--color-text) !important;
}

.wc-block-components-quantity-selector__input {
    font-weight: 600 !important;
    background: transparent !important;
    border: none !important;
}

/* Block Cart Remove */
.wc-block-cart-item__remove-link {
    font-size: 12px !important;
    color: #9CA3AF !important;
    text-decoration: none !important;
}

.wc-block-cart-item__remove-link:hover {
    color: #EF4444 !important;
}

/* Block Cart Totals */
.wc-block-cart__totals-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
}

.wc-block-components-totals-wrapper {
    background: var(--color-bg-card);
    border-radius: var(--card-radius);
    padding: var(--page-gutter-lg);
    box-shadow: var(--card-shadow);
}

.wc-block-components-totals-item {
    padding: 12px 0 !important;
    border-bottom: 1px solid #F3F4F6 !important;
}

.wc-block-components-totals-item__label {
    font-size: 14px !important;
    color: #6B7280 !important;
}

.wc-block-components-totals-item__value {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
}

.wc-block-components-totals-footer-item {
    padding-top: 16px !important;
    border-top: 2px solid #E5E7EB !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--color-primary) !important;
}

/* Block Proceed to Checkout Button - Extended Selectors */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart .wc-block-components-button:not(.wc-block-components-quantity-selector__button),
.wc-block-checkout .wc-block-components-button:not(.wc-block-components-quantity-selector__button),
.wc-block-cart .wp-element-button:not(.wc-block-components-quantity-selector__button),
.wc-block-checkout .wp-element-button:not(.wc-block-components-quantity-selector__button),
.wc-block-cart button.wc-block-components-button[type="submit"],
.wc-block-checkout button.wc-block-components-button[type="submit"] {
    width: 100% !important;
    height: 54px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: white !important;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
    border: none !important;
    border-radius: var(--card-radius-sm) !important;
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.35) !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
    cursor: pointer !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart .wc-block-components-button:not(.wc-block-components-quantity-selector__button):hover,
.wc-block-checkout .wc-block-components-button:not(.wc-block-components-quantity-selector__button):hover,
.wc-block-cart .wp-element-button:not(.wc-block-components-quantity-selector__button):hover,
.wc-block-checkout .wp-element-button:not(.wc-block-components-quantity-selector__button):hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.45) !important;
}

/* Block Checkout Page */
.wc-block-checkout {
    padding: var(--page-gutter);
    max-width: 1200px;
    margin: 0 auto;
}

.wc-block-checkout__main {
    background: var(--color-bg-card);
    border-radius: var(--card-radius);
    padding: var(--page-gutter-lg);
    box-shadow: var(--card-shadow);
}

.wc-block-checkout__sidebar {
    position: sticky;
    top: 100px;
}

/* Block Checkout Form Fields */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-combobox .components-combobox-control__input {
    height: 48px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 12px !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1) !important;
    outline: none !important;
}

.wc-block-components-text-input label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #4B5563 !important;
}

/* Block Checkout Country Select - Hidden (TR only) */
.wc-block-components-country-input {
    display: none !important;
}

/* Block Payment Methods */
.wc-block-components-radio-control__option {
    background: #F9FAFB;
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 16px !important;
    margin-bottom: 10px;
    transition: all 0.15s;
}

.wc-block-components-radio-control__option--checked {
    background: rgba(20, 184, 166, 0.05);
    border-color: var(--color-primary);
}

.wc-block-components-radio-control__label {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
}

/* Block Notice Banner - Premium Style */
.wc-block-components-notice-banner {
    padding: 16px 20px !important;
    border-radius: 14px !important;
    margin-bottom: 20px !important;
    border: none !important;
}

.wc-block-components-notice-banner.is-info {
    background: #FEF3C7 !important;
    color: #92400E !important;
}

.wc-block-components-notice-banner.is-error {
    background: #FEE2E2 !important;
    color: #991B1B !important;
}

.wc-block-components-notice-banner.is-success {
    background: #ECFDF5 !important;
    color: #065F46 !important;
}

.wc-block-components-notice-banner__content {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* No Payment Methods Notice - Premium */
.wc-block-checkout__no-payment-methods,
.woocommerce-no-available-payment-methods,
.wc-block-components-notice-banner--payment {
    background: #FEF3C7 !important;
    border: 2px solid #FCD34D !important;
    border-radius: 14px !important;
    padding: 20px !important;
    color: #92400E !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* Block Order Summary */
.wc-block-components-order-summary {
    background: var(--color-bg-card);
    border-radius: var(--card-radius);
    padding: var(--page-gutter-lg);
    box-shadow: var(--card-shadow);
}

.wc-block-components-order-summary__button {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
}

.wc-block-components-order-summary-item__image img {
    border-radius: 10px !important;
}

.wc-block-components-order-summary-item__description {
    font-size: 14px !important;
}

/* ==========================================================================
   LEGAL CHECKBOXES - CHECKOUT
   ========================================================================== */

.almira-legal-checkboxes {
    margin: 20px 0;
    padding: 20px;
    background: #F9FAFB;
    border-radius: 14px;
}

.almira-legal-row {
    margin-bottom: 14px !important;
}

.almira-legal-row:last-child {
    margin-bottom: 0 !important;
}

.almira-legal-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    cursor: pointer;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.almira-legal-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.almira-checkbox-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid #D1D5DB;
    border-radius: 6px;
    background: white;
    transition: all 0.15s;
    margin-top: 1px;
}

.almira-legal-label input:checked + .almira-checkbox-box {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.almira-legal-label input:checked + .almira-checkbox-box::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

.almira-legal-text {
    flex: 1;
    color: var(--color-text);
}

.almira-legal-link {
    color: var(--color-primary) !important;
    font-weight: 600;
    text-decoration: underline !important;
}

.almira-legal-link:hover {
    text-decoration: none !important;
}

.almira-legal-text .required {
    color: #EF4444;
    font-weight: 400;
}

/* ==========================================================================
   LEGAL MODALS
   ========================================================================== */

.almira-legal-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}

.almira-legal-modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.almira-legal-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.almira-legal-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    background: var(--color-bg-card);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    transform: translateY(20px);
    transition: transform 0.25s;
}

.almira-legal-modal[aria-hidden="false"] .almira-legal-modal__dialog {
    transform: translateY(0);
}

.almira-legal-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #E5E7EB;
}

.almira-legal-modal__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.almira-legal-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #6B7280;
    background: #F3F4F6;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.almira-legal-modal__close:hover {
    color: var(--color-text);
    background: #E5E7EB;
}

.almira-legal-modal__body {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.7;
    color: #4B5563;
}

.almira-legal-modal__body h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin: 24px 0 12px;
}

.almira-legal-modal__body h3:first-child {
    margin-top: 0;
}

.almira-legal-modal__body p {
    margin: 0 0 12px;
}

.almira-legal-modal__body ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.almira-legal-modal__body li {
    margin-bottom: 6px;
}

.almira-legal-modal__footer {
    padding: 16px 24px;
    border-top: 1px solid #E5E7EB;
}

.almira-legal-modal__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    font-size: 15px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.almira-legal-modal__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.35);
}

/* Legal Table */
.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}

.legal-table th,
.legal-table td {
    padding: 10px 12px;
    text-align: left;
    border: 1px solid #E5E7EB;
}

.legal-table th {
    background: #F9FAFB;
    font-weight: 600;
    color: var(--color-text);
}

.legal-table tfoot td {
    background: #F9FAFB;
}

.legal-table .total-row td {
    background: #ECFDF5;
    font-weight: 700;
}

/* Legal Notice */
.legal-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #FEF3C7;
    border-radius: 10px;
    font-size: 13px;
    color: #92400E;
    margin-bottom: 20px;
}

.legal-dynamic-note {
    font-style: italic;
    color: #6B7280;
    font-size: 13px;
}

/* ==========================================================================
   DARK MODE - BLOCKS & LEGAL
   ========================================================================== */

html[data-theme="dark"] .wc-block-cart__main,
html[data-theme="dark"] .wc-block-components-totals-wrapper,
html[data-theme="dark"] .wc-block-checkout__main,
html[data-theme="dark"] .wc-block-components-order-summary,
html[data-theme="dark"] .almira-legal-modal__dialog,
body[data-theme="dark"] .wc-block-cart__main,
body[data-theme="dark"] .wc-block-components-totals-wrapper,
body[data-theme="dark"] .wc-block-checkout__main,
body[data-theme="dark"] .wc-block-components-order-summary,
body[data-theme="dark"] .almira-legal-modal__dialog {
    background: var(--color-bg-card);
}

html[data-theme="dark"] .wc-block-components-text-input input,
html[data-theme="dark"] .wc-block-components-quantity-selector,
html[data-theme="dark"] .wc-block-components-radio-control__option,
html[data-theme="dark"] .almira-legal-checkboxes,
html[data-theme="dark"] .legal-table th,
html[data-theme="dark"] .legal-table tfoot td,
body[data-theme="dark"] .wc-block-components-text-input input,
body[data-theme="dark"] .wc-block-components-quantity-selector,
body[data-theme="dark"] .wc-block-components-radio-control__option,
body[data-theme="dark"] .almira-legal-checkboxes,
body[data-theme="dark"] .legal-table th,
body[data-theme="dark"] .legal-table tfoot td {
    background: #1F2937 !important;
}

html[data-theme="dark"] .almira-checkbox-box,
body[data-theme="dark"] .almira-checkbox-box {
    background: #374151;
    border-color: #4B5563;
}




/* ==========================================================================
   CART PAGE — PREMIUM v3.1
   ========================================================================== */

/* Hide WP page title on cart/checkout (our templates have custom headers) */
.woocommerce-cart .entry-header,
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-header,
.woocommerce-checkout .entry-title {
    display: none !important;
}

/* ─── WooCommerce Default CSS Reset ─────────────────────────────────────── *
 * WC ships with: .cart-collaterals { width: 48%; float: right }
 *                .cart_totals      { float: right }
 *                .woocommerce-cart-form { width: 48%; float: left }
 * These break our flex/grid layout. Reset ALL of them.
 * ───────────────────────────────────────────────────────────────────────── */

.ac .cart-collaterals,
.woocommerce-cart .ac .cart-collaterals {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
}

.ac .cart_totals,
.woocommerce-cart .ac .cart_totals,
.woocommerce .ac .cart_totals {
    width: 100% !important;
    float: none !important;
}

.ac form.woocommerce-cart-form,
.woocommerce-cart .ac form.woocommerce-cart-form {
    width: 100% !important;
    float: none !important;
}

.ac table.shop_table,
.woocommerce-cart .ac table.shop_table {
    width: 100% !important;
    border: none !important;
    border-collapse: collapse !important;
}

/* Reset WC form table if it still renders one */
.ac .shop_table td,
.ac .shop_table th {
    border: none !important;
    padding: 0 !important;
}

/* Reset any WC cart cross-sells default width */
.ac .cross-sells {
    width: 100% !important;
    float: none !important;
}

/* Reset WC default button styles on our CTA */
.woocommerce .ac a.button,
.woocommerce .ac a.button.alt,
.woocommerce .ac a.button.alt.wc-forward,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
    text-align: center !important;
    text-indent: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    font-style: normal !important;
}

/* ==========================================================================
   GIFT SECTION OVERRIDES — Milestone Grid v4 (backup for plugin cache)
   ========================================================================== */

.abc-gifts {
    background: linear-gradient(135deg, #FFFBEB, #FEF3C7) !important;
    border: 1.5px solid #FCD34D !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin-bottom: 16px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.abc-gifts__head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.abc-gifts__title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #92400E !important;
    margin: 0 !important;
    text-align: left !important;
    display: block !important;
}

.abc-gifts__track {
    position: relative !important;
    height: 6px !important;
    background: rgba(255,255,255,0.7) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
}

.abc-gifts__fill {
    position: absolute !important;
    top: 0; left: 0;
    height: 100% !important;
    background: linear-gradient(90deg, #F59E0B, #D97706) !important;
    border-radius: 6px !important;
}

/* Milestone grid */
.abc-gifts__milestones {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.abc-gifts__ms {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
}

.abc-gifts__ms-check {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.abc-gifts__ms--earned .abc-gifts__ms-check { background: #10B981 !important; color: #fff !important; }
.abc-gifts__ms--next .abc-gifts__ms-check { background: linear-gradient(135deg, #F59E0B, #D97706) !important; color: #fff !important; }
.abc-gifts__ms--locked .abc-gifts__ms-check { background: #E5E7EB !important; color: #9CA3AF !important; }

/* Hide old v3 classes if cached HTML */
.abc-gifts__pills,
.abc-gifts__pill,
.abc-gifts__bar,
.abc-gifts__header,
.abc-gifts__progress,
.abc-gifts__progress-track,
.abc-gifts__progress-fill,
.abc-gifts__progress-info,
.abc-gifts__tiers,
.abc-gifts__emoji,
.abc-gifts__dot,
.abc-gifts__dots,
.abc-gifts__labels,
.abc-gifts__label,
.abc-tier {
    display: none !important;
}

@media (max-width: 480px) {
    .abc-gifts { padding: 10px 12px !important; }
    .abc-gifts__milestones { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ─── Gift Cart Item Styles — Premium ────────────── */

.ac-item--gift {
    border: 1.5px solid #6EE7B7 !important;
    background: linear-gradient(135deg, #F0FDF9, #ECFDF5, #F0FDF4) !important;
    position: relative;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.08), 0 2px 8px rgba(16, 185, 129, 0.1) !important;
    padding: 14px !important;
    margin-top: 4px;
}

/* Subtle gradient ribbon at top */
.ac-item--gift::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #10B981, #34D399, #6EE7B7, #34D399, #10B981);
}

.ac-item--gift + .ac-item--gift { margin-top: 8px; }
.ac-item--gift:last-child { border-bottom: none !important; }

.ac-item__badge--gift {
    background: linear-gradient(135deg, #D1FAE5, #A7F3D0) !important;
    color: #065F46 !important;
    border: 1px solid #6EE7B7 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 10px !important;
    border-radius: 8px !important;
}

.ac-item__badge--gift svg {
    color: #059669;
}

.ac-item__total--free {
    color: #059669 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
}

.ac-item__gift-qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #D1FAE5;
    color: #065F46;
    font-weight: 700;
    font-size: 13px;
    border-radius: 8px;
}

/* Dark mode gift items */
html[data-theme="dark"] .ac-item--gift {
    background: linear-gradient(135deg, #022C22, #064E3B) !important;
    border-color: #10B981 !important;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.15), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .ac-item--gift::before {
    background: linear-gradient(90deg, #059669, #10B981, #34D399, #10B981, #059669);
}

html[data-theme="dark"] .ac-item__badge--gift {
    background: linear-gradient(135deg, #065F46, #064E3B) !important;
    color: #6EE7B7 !important;
    border-color: #10B981 !important;
}

html[data-theme="dark"] .ac-item__total--free { color: #6EE7B7 !important; }
html[data-theme="dark"] .ac-item__gift-qty { background: #065F46; color: #6EE7B7; }

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

.ac {
    max-width: 1320px;
    margin: 0 auto;
    padding: 8px 0;
}

/* Kill parent .container padding on cart page — .ac handles its own */
body.woocommerce-cart .container {
    padding-left: 6px;
    padding-right: 6px;
}

@media (min-width: 480px) {
    body.woocommerce-cart .container {
        padding-left: var(--page-gutter);
        padding-right: var(--page-gutter);
    }
    .ac { padding: 12px 0; }
}

.ac__notices { margin-bottom: 12px; }
.ac__notices:empty { display: none; margin: 0; }

.ac__notices .woocommerce-message,
.ac__notices .woocommerce-info,
.ac__notices .woocommerce-error {
    border-radius: 12px;
    margin-bottom: 8px;
    font-size: 13px;
}

.ac__grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ac__primary { flex: 1; min-width: 0; }
.ac__sidebar { width: 100%; }

@media (min-width: 1024px) {
    .ac { padding: 28px var(--page-gutter-lg); }
    .ac__grid {
        flex-direction: row;
        align-items: flex-start;
        gap: 28px;
    }
    .ac__sidebar {
        width: 420px;
        flex-shrink: 0;
        position: sticky;
        top: 90px;
    }
}

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

.ac__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.ac__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
    line-height: 1.2;
}

.ac__title-count {
    font-weight: 500;
    color: var(--color-text-muted);
    font-size: 18px;
}

.ac__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}

.ac__back:hover { color: var(--color-primary); }

@media (min-width: 768px) {
    .ac__title { font-size: 26px; }
    .ac__title-count { font-size: 22px; }
}

/* ─── Free Shipping Progress ─────────────────────────────────────────────── */

.ac-ship {
    background: var(--color-bg-card);
    border: 1.5px solid var(--color-border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    transition: border-color 0.3s, background 0.3s;
}

.ac-ship--ok {
    border-color: var(--color-success);
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
}

.ac-ship__top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ac-ship__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.ac-ship:not(.ac-ship--ok) .ac-ship__icon {
    background: #FEF3C7;
    color: #D97706;
}

.ac-ship--ok .ac-ship__icon {
    background: #D1FAE5;
    color: #059669;
}

.ac-ship__text {
    flex: 1;
    min-width: 0;
}

.ac-ship__label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.ac-ship--ok .ac-ship__label { color: #065F46; }

.ac-ship__label strong {
    color: var(--color-primary);
}

.ac-ship--ok .ac-ship__label strong { color: #059669; }

.ac-ship__sub {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.ac-ship--ok .ac-ship__sub { color: #047857; }

.ac-ship__bar {
    height: 8px;
    background: var(--color-bg-light);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.ac-ship--ok .ac-ship__bar { background: rgba(255,255,255,0.5); }

.ac-ship__fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}

.ac-ship:not(.ac-ship--ok) .ac-ship__fill {
    background: linear-gradient(90deg, #F59E0B, #D97706);
}

.ac-ship--ok .ac-ship__fill {
    background: linear-gradient(90deg, #10B981, #059669);
}

.ac-ship__fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: ac-shimmer 2s ease-in-out infinite;
}

@keyframes ac-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ─── Cart Items Container ───────────────────────────────────────────────── */

.ac__items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

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

.ac-item {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

.ac-item:first-child { padding-top: 0; }
.ac-item:last-child { border-bottom: none; }

/* Thumbnail */
.ac-item__img {
    width: 90px;
    flex-shrink: 0;
}

.ac-item__img a {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
}

.ac-item__img img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
}

/* Body */
.ac-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ac-item__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
    padding-right: 28px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ac-item__name a {
    color: inherit;
    text-decoration: none;
}

.ac-item__name a:hover { color: var(--color-primary); }

/* Variant / meta info */
.ac-item__meta {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.ac-item__meta dt { display: inline; font-weight: 500; }
.ac-item__meta dd { display: inline; margin: 0; }

/* FBT Set badge */
.ac-item__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #7C3AED;
    background: #EDE9FE;
    border-radius: 6px;
    width: fit-content;
}

/* Actions row */
.ac-item__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

/* Qty Control */
.ac-item__qty .quantity {
    display: inline-flex;
    align-items: center;
    background: var(--color-bg-light);
    border-radius: 10px;
    border: 1.5px solid var(--color-border);
    overflow: hidden;
    height: 36px;
}

.ac-item__qty .quantity input[type="number"] {
    width: 36px;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    -moz-appearance: textfield;
    padding: 0;
}

.ac-item__qty .quantity input::-webkit-outer-spin-button,
.ac-item__qty .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Price column */
.ac-item__prices {
    text-align: right;
    flex-shrink: 0;
}

.ac-item__total {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    display: block;
}

.ac-item__unit {
    font-size: 11px;
    color: var(--color-text-muted);
    display: block;
    margin-top: 2px;
}

.ac-item__prices del {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.ac-item__prices ins {
    text-decoration: none;
    color: var(--color-primary);
}

.ac-item__save {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    margin-top: 2px;
}

/* Remove button */
.ac-item__rm {
    position: absolute;
    top: 16px;
    right: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--color-text-light);
    text-decoration: none;
    transition: all 0.15s;
}

.ac-item:first-child .ac-item__rm { top: 0; }

.ac-item__rm:hover {
    background: #FEF2F2;
    color: #EF4444;
}

/* ─── Update Cart Button (hidden, auto-submit via JS) ────────────────────── */

.ac__update { display: none; }

/* ─── Desktop responsive ─────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .ac-item__img { width: 100px; }
    .ac-item__name { font-size: 15px; }
    .ac-item__total { font-size: 16px; }
}

/* ==========================================================================
   SIDEBAR — ORDER SUMMARY v3 (Premium Receipt)
   ========================================================================== */

.ac-summary {
    background: var(--color-bg-card);
    border: 1.5px solid var(--color-border);
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}

/* Header band */
.ac-summary__head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-light);
}

.ac-summary__title {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ac-summary__title svg { color: var(--color-text-muted); flex-shrink: 0; }

/* Body */
.ac-summary__body {
    padding: 16px 20px 20px;
}

/* ─── Coupon (inline, compact) ───────────────────────────────────────────── */

.ac-coupon {
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    margin: 0 0 14px 0;
    padding-bottom: 14px;
    overflow: visible;
}

.ac-coupon__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    cursor: pointer;
    list-style: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    transition: opacity 0.15s;
}

.ac-coupon__toggle::-webkit-details-marker { display: none; }
.ac-coupon__toggle::marker { display: none; content: ''; }

.ac-coupon__toggle:hover { opacity: 0.8; }

.ac-coupon__toggle svg:first-child {
    color: var(--color-primary);
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.ac-coupon__toggle span { flex: 1; }

.ac-coupon__chevron {
    transition: transform 0.2s;
    color: var(--color-text-muted);
    width: 14px;
    height: 14px;
}

details.ac-coupon[open] .ac-coupon__chevron {
    transform: rotate(180deg);
}

.ac-coupon__content {
    padding: 10px 0 0;
}

.ac-coupon__row {
    display: flex;
    gap: 6px;
}

.ac-coupon__input {
    flex: 1;
    min-width: 0;
    height: 36px;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    padding: 0 10px;
    font-size: 12px;
    color: var(--color-text);
    background: var(--color-bg-card);
    outline: none;
    transition: border-color 0.2s;
}

.ac-coupon__input:focus { border-color: var(--color-primary); }
.ac-coupon__input::placeholder { color: var(--color-text-light); }

.ac-coupon__btn {
    height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: var(--color-text);
    color: var(--color-text-inverse);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.ac-coupon__btn:hover { opacity: 0.85; }

/* ─── Price Flow (receipt lines) ─────────────────────────────────────────── */

.ac-flow {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ac-flow__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 7px 0;
    font-size: 13px;
    line-height: 1.3;
}

.ac-flow__label {
    color: var(--color-text-muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 12px;
}

.ac-flow__value {
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0;
}

/* Market price */
.ac-flow__row--market {
    padding: 6px 0;
}

.ac-flow__row--market .ac-flow__label {
    color: var(--color-text-light);
    font-size: 12px;
}

.ac-flow__row--market .ac-flow__value {
    color: var(--color-text-light);
    text-decoration: line-through;
    font-weight: 500;
    font-size: 12px;
}

/* Discount rows */
.ac-flow__row--discount {
    padding: 4px 0;
}

.ac-flow__row--discount .ac-flow__label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #059669;
    font-weight: 600;
    font-size: 12px;
}

.ac-flow__row--discount .ac-flow__value {
    color: #059669;
    font-weight: 700;
    font-size: 13px;
}

/* Separator */
.ac-flow__sep {
    height: 1px;
    background: var(--color-border);
    margin: 6px 0;
}

/* Subtotal row */
.ac-flow__row--sub {
    padding: 8px 0;
}

.ac-flow__row--sub .ac-flow__label {
    color: var(--color-text);
    font-weight: 700;
}

.ac-flow__row--sub .ac-flow__value {
    font-weight: 700;
    font-size: 14px;
}

/* Free shipping */
.ac-flow__row--free .ac-flow__value {
    color: var(--color-success);
    font-weight: 700;
}

/* ─── Total Block ────────────────────────────────────────────────────────── */

.ac-total {
    margin-top: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #0F766E 0%, #0D9488 50%, #14B8A6 100%);
    border-radius: 12px;
    border: none;
}

.ac-total__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ac-total__label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ac-total__value {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.ac-total__value strong,
.ac-total__value .woocommerce-Price-amount { color: #fff; font-size: inherit; }
.ac-total__value small.includes_tax { display: none; }

/* ─── Savings Pill ───────────────────────────────────────────────────────── */

.ac-saved {
    background: #ECFDF5;
    border: 1px solid #D1FAE5;
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 12px;
    text-align: center;
}

.ac-saved__text {
    font-size: 12px;
    font-weight: 700;
    color: #059669;
    line-height: 1.5;
}

.ac-saved__text svg {
    display: inline !important;
    vertical-align: -2px;
    margin-right: 3px;
    width: 14px;
    height: 14px;
}

/* Ensure wc_price spans stay inline */
.ac-saved__text .woocommerce-Price-amount,
.ac-saved__text bdi,
.ac-saved__text span {
    display: inline !important;
}

/* ─── CTA ────────────────────────────────────────────────────────────────── */

.ac-summary__cta {
    margin-top: 16px;
}

.ac-summary__cta .checkout-button,
.ac-summary__cta a.checkout-button,
.wc-proceed-to-checkout a.checkout-button,
.woocommerce .ac-summary__cta a.checkout-button,
.woocommerce a.checkout-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    width: 100% !important;
    height: 54px;
    padding: 0 20px !important;
    margin: 0 !important;
    background: linear-gradient(135deg, #F97316 0%, #EA580C 50%, #DC2626 100%) !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    font-style: normal !important;
    font-family: inherit !important;
    border: none !important;
    border-radius: 14px !important;
    cursor: pointer;
    text-decoration: none !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: 0.03em;
    line-height: 1 !important;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

/* Shine effect */
.ac-summary__cta .checkout-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s;
    pointer-events: none;
}

.ac-summary__cta .checkout-button:hover::before {
    left: 120%;
}

.ac-summary__cta .checkout-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(249, 115, 22, 0.5);
}

.ac-summary__cta .checkout-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.ac-summary__cta .checkout-button svg {
    flex-shrink: 0;
    display: inline-block;
}

/* ─── Trust ───────────────────────────────────────────────────────────────── */

.ac-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-light);
}

.ac-trust svg { flex-shrink: 0; }

.ac-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}

.ac-badges__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-light);
    text-align: center;
}

.ac-badges__item svg { color: var(--color-text-muted); }

/* ─── Mobile Sticky Bottom CTA ──────────────────────────────────────────── */

.ac-mobile-cta {
    display: none;
}

@media (max-width: 1024px) {
    .ac-mobile-cta {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--color-bg-card);
        border-top: 1px solid var(--color-border);
        padding: 12px var(--page-gutter);
        z-index: 400;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .ac-mobile-cta__inner {
        display: flex;
        align-items: center;
        gap: 14px;
        max-width: 600px;
        margin: 0 auto;
    }

    .ac-mobile-cta__info {
        flex: 1;
        min-width: 0;
    }

    .ac-mobile-cta__label {
        font-size: 11px;
        color: var(--color-text-muted);
        font-weight: 500;
    }

    .ac-mobile-cta__total {
        font-size: 18px;
        font-weight: 800;
        color: var(--color-text);
    }

    .ac-mobile-cta__total small.includes_tax { display: none; }

    .ac-mobile-cta__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 48px;
        padding: 0 28px;
        background: linear-gradient(135deg, var(--color-cta), var(--color-cta-hover));
        color: #FFFFFF;
        font-size: 15px;
        font-weight: 800;
        border: none;
        border-radius: 12px;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
    }

    /* Add bottom padding to page for sticky CTA */
    .ac { padding-bottom: 80px; }
}

/* ==========================================================================
   CART EMPTY
   ========================================================================== */

.ac-empty {
    text-align: center;
    padding: 60px 20px 80px;
    max-width: 440px;
    margin: 0 auto;
}

.ac-empty__icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
    background: var(--color-bg-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
}

.ac-empty__title {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 12px;
}

.ac-empty__text {
    font-size: 15px;
    color: var(--color-text-muted);
    margin: 0 0 28px;
    line-height: 1.6;
}

.ac-empty__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 32px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.3);
    transition: all 0.2s;
}

.ac-empty__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
    color: #FFFFFF;
}

/* ==========================================================================
   DARK MODE — CART
   ========================================================================== */

html[data-theme="dark"] .ac-ship:not(.ac-ship--ok) {
    background: #1F2937;
    border-color: #374151;
}

html[data-theme="dark"] .ac-ship:not(.ac-ship--ok) .ac-ship__icon {
    background: #374151;
}

html[data-theme="dark"] .ac-ship--ok {
    background: linear-gradient(135deg, #064E3B, #065F46);
    border-color: #10B981;
}

html[data-theme="dark"] .ac-summary {
    background: #1F2937;
    border-color: #374151;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

html[data-theme="dark"] .ac-summary__head {
    background: rgba(255,255,255,0.04);
    border-bottom-color: #374151;
}

html[data-theme="dark"] .ac-coupon {
    border-color: #374151;
}

html[data-theme="dark"] .ac-coupon__input {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

html[data-theme="dark"] .ac-coupon__btn {
    background: #F9FAFB;
    color: #111827;
}

html[data-theme="dark"] .ac-total {
    background: linear-gradient(135deg, #0F766E 0%, #0D9488 50%, #14B8A6 100%);
    border: none;
}

html[data-theme="dark"] .ac-saved {
    background: #064E3B;
    border-color: #065F46;
}

html[data-theme="dark"] .ac-saved__text { color: #6EE7B7; }

html[data-theme="dark"] .ac-item__img a {
    background: #374151;
    border-color: #4B5563;
}

html[data-theme="dark"] .ac-item__rm:hover {
    background: #374151;
}

html[data-theme="dark"] .ac-mobile-cta {
    background: #1F2937;
    border-color: #374151;
}

html[data-theme="dark"] .ac-empty__icon {
    background: #374151;
}

html[data-theme="dark"] .ac-badges {
    border-color: #374151;
}

/* ==========================================================================
   CRO v3 — MOBILE STICKY CTA BAR
   ========================================================================== */

/* ==========================================================================
   CUSTOMER REVIEWS SECTION
   ========================================================================== */

.reviews-section {
    padding: var(--spacing-3xl) 0;
    background: linear-gradient(180deg, #FAFAFA 0%, #fff 100%);
}

.section-header--center {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-header-badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(20,184,166,0.08), rgba(20,184,166,0.15));
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 100px;
    margin-bottom: var(--spacing-sm);
}

.section-header--center .section-title {
    font-size: var(--font-size-2xl);
    margin-bottom: 8px;
}

.section-header--center .section-subtitle {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.reviews-summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--spacing-md);
    padding: 8px 20px;
    background: #fff;
    border-radius: 100px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.04);
}

.reviews-summary__stars {
    color: #F59E0B;
    font-size: 16px;
    letter-spacing: 1px;
}

.reviews-summary__score {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.02em;
}

.reviews-summary__score span {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.reviews-summary__source {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.review-card {
    background: #fff;
    border-radius: 16px;
    padding: var(--spacing-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.04);
    transition: transform 0.25s ease, box-shadow 0.25s;
}

.review-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.review-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.review-card__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), #0D9488);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.review-card__author {
    flex: 1;
    min-width: 0;
}

.review-card__name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
}

.review-card__meta {
    font-size: 11px;
    color: var(--color-text-muted);
}

.review-card__google {
    flex-shrink: 0;
    opacity: 0.6;
}

.review-card__stars {
    color: #F59E0B;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.review-card__text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0 0 10px;
}

.review-card__product {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--color-text-muted);
    background: var(--color-bg-light);
    padding: 4px 10px;
    border-radius: 100px;
}

.review-card__product svg {
    color: var(--color-primary);
}

.reviews-cta {
    text-align: center;
}

.reviews-cta__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: 100px;
    background: #fff;
    transition: all 0.2s ease;
}

.reviews-cta__link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(20,184,166,0.12);
}

/* ==========================================================================
   BRAND STORY SECTION
   ========================================================================== */

.brand-story-section {
    padding: var(--spacing-3xl) 0;
    background: #fff;
}

.brand-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: center;
}

.brand-story__title {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-text);
    margin: var(--spacing-sm) 0 var(--spacing-lg);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.brand-story__text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-md);
}

.brand-story__values {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.brand-value {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.brand-value__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(20,184,166,0.08), rgba(20,184,166,0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-primary);
}

.brand-value strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 2px;
}

.brand-value span {
    font-size: 13px;
    color: var(--color-text-muted);
}

.brand-story__visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.brand-story__card {
    background: linear-gradient(135deg, #F0FDFA 0%, #ECFDF5 100%);
    border-radius: 20px;
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(20,184,166,0.08);
    transition: transform 0.25s ease;
}

.brand-story__card:hover {
    transform: translateY(-3px);
}

.brand-story__card--accent {
    background: linear-gradient(135deg, var(--color-primary), #0D9488);
    grid-column: 1 / -1;
    justify-content: flex-start;
}

.brand-story__stat {
    text-align: center;
}

.brand-story__stat-number {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.brand-story__stat-label {
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 500;
}

.brand-story__location {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.brand-story__location strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.brand-story__location span {
    display: block;
    font-size: 13px;
    opacity: 0.85;
}

/* ==========================================================================
   CRO v3 — SECTION ENTRANCE ANIMATIONS (scroll-triggered via JS)
   ========================================================================== */

.home-page .age-groups-section,
.home-page .categories-section,
.home-page .best-sellers-section,
.home-page .new-arrivals-section,
.home-page .flash-sale-section,
.home-page .social-proof-section,
.home-page .reviews-section,
.home-page .brand-story-section,
.home-page .newsletter-section {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.32,0.72,0,1);
}

.home-page .is-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   CRO v3 — ENHANCED PRODUCT CARD QUICK-ADD VISIBILITY
   ========================================================================== */

/* On desktop, show quick-add on hover with slide-up */
@media (min-width: 768px) {
    .product-card__quick-add {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s, color 0.2s;
    }
    .product-card:hover .product-card__quick-add {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   CRO v3 — DARK MODE FOR NEW ELEMENTS
   ========================================================================== */

html[data-theme="dark"] .review-card {
    background: #1F2937;
    border-color: #374151;
}

html[data-theme="dark"] .review-card__avatar {
    background: linear-gradient(135deg, #0D9488, #115E59);
}

html[data-theme="dark"] .reviews-summary {
    background: #1F2937;
    border-color: #374151;
}

html[data-theme="dark"] .reviews-section {
    background: linear-gradient(180deg, #111827 0%, #1F2937 100%);
}

html[data-theme="dark"] .reviews-cta__link {
    background: #1F2937;
    border-color: #374151;
    color: #F3F4F6;
}

html[data-theme="dark"] .brand-story-section {
    background: #111827;
}

html[data-theme="dark"] .brand-story__card {
    background: linear-gradient(135deg, #1F2937, #111827);
    border-color: #374151;
}

html[data-theme="dark"] .brand-value__icon {
    background: rgba(20,184,166,0.15);
}

html[data-theme="dark"] .section-header-badge {
    background: rgba(20,184,166,0.15);
}

html[data-theme="dark"] .review-card__product {
    background: #374151;
}

/* ==========================================================================
   CRO v3 — BETTER SECTION SPACING & VISUAL FLOW
   ========================================================================== */

/* Subtle top divider between sections */
.best-sellers-section,
.new-arrivals-section {
    border-top: 1px solid rgba(0,0,0,0.04);
}

html[data-theme="dark"] .best-sellers-section,
html[data-theme="dark"] .new-arrivals-section {
    border-top-color: rgba(255,255,255,0.06);
}

/* ==========================================================================
   RESPONSIVE — REVIEWS & BRAND STORY
   ========================================================================== */

@media (max-width: 1024px) {
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .brand-story {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .brand-story__visual {
        grid-template-columns: repeat(3, 1fr);
    }

    .brand-story__card--accent {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .social-proof-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .social-proof-item {
        padding: 8px 10px;
        gap: 8px;
    }

    .social-proof-icon svg {
        width: 16px;
        height: 16px;
    }

    .social-proof-text {
        font-size: 10px;
    }

    .social-proof-text strong {
        font-size: 12px;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .brand-story__visual {
        grid-template-columns: repeat(2, 1fr);
    }

    .brand-story__card--accent {
        grid-column: 1 / -1;
    }

    .brand-story__title {
        font-size: var(--font-size-xl);
    }
}

@media (max-width: 480px) {
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .brand-story__visual {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   PREMIUM DESIGN POLISH
   ========================================================================== */

/* Premium section headers */
.section-header {
    position: relative;
}

.section-title {
    letter-spacing: -0.02em;
}

/* Refined product card hover */
.product-card {
    border-radius: 14px;
}

.product-card__title {
    font-size: 13px;
    -webkit-line-clamp: 2;
}

/* Premium hero section */
.hero-title__main {
    letter-spacing: -0.03em;
}

/* Elegant newsletter */
.newsletter-section {
    position: relative;
    overflow: hidden;
}

.newsletter-card {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   MOBILE BOTTOM NAVBAR — Site-wide (Trendyol/HB style)
   ========================================================================== */

.mobile-navbar {
    display: none; /* hidden on desktop */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 350; /* between z-fixed(300) and z-modal-backdrop(400) — below drawer */
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-navbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: #6B7280;
    font-size: 10px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 8px;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    min-width: 52px;
}

.mobile-navbar__item:active {
    background: rgba(0,0,0,0.04);
}

.mobile-navbar__item.is-active {
    color: var(--color-primary, #0D9488);
}

.mobile-navbar__item.is-active .mobile-navbar__icon svg {
    stroke-width: 2.5;
}

.mobile-navbar__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.mobile-navbar__icon svg {
    width: 22px;
    height: 22px;
}

.mobile-navbar__badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-cta, #EF4444);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(239,68,68,0.3);
    animation: badgePop 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.mobile-navbar__badge[hidden] {
    display: none !important;
}

@keyframes badgePop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

.mobile-navbar__label {
    font-size: 10px;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Show only on mobile (max-width: 768px) */
@media (max-width: 768px) {
    .mobile-navbar {
        display: flex;
    }

    /* Add bottom padding to body so content isn't hidden behind navbar */
    body {
        padding-bottom: 64px;
    }

    /* Hide desktop mega menu on mobile (already done in theme) */
}

/* Prevent overlap with PDP sticky bar */
@media (max-width: 768px) {
    .pdp-sticky {
        bottom: 49px;
    }
}

/* Dark mode */
html[data-theme="dark"] .mobile-navbar,
body[data-theme="dark"] .mobile-navbar {
    background: #1F2937;
    border-top-color: #374151;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
}

html[data-theme="dark"] .mobile-navbar__item,
body[data-theme="dark"] .mobile-navbar__item {
    color: #9CA3AF;
}

html[data-theme="dark"] .mobile-navbar__item.is-active,
body[data-theme="dark"] .mobile-navbar__item.is-active {
    color: var(--color-primary, #14B8A6);
}

html[data-theme="dark"] .mobile-navbar__item:active,
body[data-theme="dark"] .mobile-navbar__item:active {
    background: rgba(255,255,255,0.05);
}

/* ==========================================================================
   HIDE COMPANION FLOATING CART — replaced by mobile navbar
   ========================================================================== */
.abc-floating-cart {
    display: none !important;
}

/* ==========================================================================
   CATEGORIES PAGE — Premium v2
   Hero banner, gradient cards, staggered animation, glass pills
   ========================================================================== */

/* ── Hero ── */
.catpage-hero {
    position: relative;
    padding: 48px 0 36px;
    background: linear-gradient(160deg, #f0fdfa 0%, #e0f7fa 40%, #e8f5e9 100%);
    overflow: hidden;
}

.catpage-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.catpage-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
}

.catpage-hero__orb--1 {
    width: 320px;
    height: 320px;
    background: rgba(13, 148, 136, 0.18);
    top: -80px;
    right: -60px;
    animation: catOrbFloat 8s ease-in-out infinite;
}

.catpage-hero__orb--2 {
    width: 220px;
    height: 220px;
    background: rgba(251, 191, 36, 0.15);
    bottom: -60px;
    left: 10%;
    animation: catOrbFloat 10s ease-in-out infinite reverse;
}

@keyframes catOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(20px, -15px) scale(1.08); }
}

.catpage-crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}

.catpage-crumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.catpage-crumb a:hover { color: var(--color-primary); }

.catpage-crumb span { color: var(--color-text-primary); font-weight: 600; }

.catpage-hero__title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.catpage-hero__desc {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin: 0 0 20px;
    max-width: 520px;
    line-height: 1.55;
}

.catpage-hero__pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.catpage-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.catpage-hero__pill strong {
    color: var(--color-text-primary);
    font-weight: 700;
}

/* ── Filters ── */
.catpage-filters-wrap {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 12px 0;
}

.catpage-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.catpage-filters::-webkit-scrollbar { display: none; }

.catpage-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text-secondary);
    background: var(--color-surface, #f8fafb);
    border: 1.5px solid transparent;
    transition: all 0.25s;
}

.catpage-pill:hover {
    background: #fff;
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(13,148,136,0.12);
}

.catpage-pill.is-active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 2px 12px rgba(13,148,136,0.3);
}

.catpage-pill--sale {
    color: #DC2626;
}

.catpage-pill--sale:hover {
    border-color: #DC2626;
    color: #DC2626;
    box-shadow: 0 2px 8px rgba(220,38,38,0.12);
}

/* ── Grid ── */
.catpage-content {
    padding: 32px 0 48px;
}

.catpage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Card */
.catcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text-primary);
    border: 1px solid rgba(0,0,0,0.04);
    transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s cubic-bezier(.22,1,.36,1);
    animation: catCardIn 0.5s cubic-bezier(.22,1,.36,1) both;
    animation-delay: var(--card-delay, 0s);
}

@keyframes catCardIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.catcard:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
}

/* Large card — first 2 span 2 columns */
.catcard--lg {
    grid-column: span 2;
}

.catcard__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 5/3;
    overflow: hidden;
}

.catcard--lg .catcard__visual {
    aspect-ratio: 16/7;
}

.catcard__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(.22,1,.36,1);
}

.catcard:hover .catcard__img {
    transform: scale(1.06);
}

.catcard__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.04) 100%);
    pointer-events: none;
}

.catcard__gradient {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s;
}

.catcard:hover .catcard__gradient {
    transform: scale(1.04);
}

.catcard__emoji {
    font-size: 3rem;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
    transition: transform 0.4s cubic-bezier(.22,1,.36,1);
}

.catcard--lg .catcard__emoji { font-size: 4rem; }

.catcard:hover .catcard__emoji {
    transform: scale(1.15) rotate(-4deg);
}

/* Body */
.catcard__body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.catcard__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.catcard__name {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.catcard--lg .catcard__name { font-size: 1.1rem; }

.catcard__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--color-surface, #f8fafb);
    color: var(--color-text-muted);
    transition: all 0.3s;
}

.catcard:hover .catcard__arrow {
    background: var(--color-primary);
    color: #fff;
    transform: translate(2px, -2px);
}

.catcard__count {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Sub-category chips */
.catcard__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.catcard__chip {
    font-size: 0.7rem;
    padding: 3px 10px;
    background: var(--color-surface, #f8fafb);
    border-radius: 999px;
    color: var(--color-text-secondary);
    font-weight: 500;
    transition: all 0.2s;
}

.catcard:hover .catcard__chip {
    background: rgba(13,148,136,0.06);
    color: var(--color-primary);
}

.catcard__chip--more {
    font-weight: 700;
    color: var(--color-primary);
    background: rgba(13,148,136,0.08);
}

/* CTA */
.catpage-cta {
    text-align: center;
    margin-top: 40px;
}

.catpage-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark, #0b7a72) 100%);
    color: #fff;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 4px 16px rgba(13,148,136,0.25);
}

.catpage-cta__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(13,148,136,0.35);
}

.catpage-cta__sub {
    margin: 14px 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .catpage-grid { grid-template-columns: repeat(3, 1fr); }
    .catcard--lg { grid-column: span 1; }
    .catcard--lg .catcard__visual { aspect-ratio: 5/3; }
    .catcard--lg .catcard__emoji { font-size: 3rem; }
    .catcard--lg .catcard__name { font-size: 0.95rem; }
}

@media (max-width: 768px) {
    .catpage-hero { padding: 32px 0 24px; }
    .catpage-hero__title { font-size: 1.4rem; }
    .catpage-hero__desc { font-size: 0.85rem; }
    .catpage-hero__pills { gap: 6px; }
    .catpage-hero__pill { padding: 5px 12px; font-size: 0.75rem; }
    .catpage-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .catcard { border-radius: 14px; }
    .catcard__body { padding: 12px 14px 14px; }
    .catcard__name { font-size: 0.85rem; }
    .catcard__emoji { font-size: 2.2rem; }
    .catcard__chips { display: none; }
    .catcard__arrow { width: 24px; height: 24px; }
    .catcard__arrow svg { width: 13px; height: 13px; }
    .catpage-content { padding: 20px 0 40px; }
    .catpage-filters-wrap { padding: 8px 0; }
    .catpage-pill { padding: 6px 14px; font-size: 0.78rem; }
}

/* ── Dark Mode ── */
html[data-theme="dark"] .catpage-hero { background: linear-gradient(160deg, #0f2027 0%, #111827 40%, #1a2e38 100%); }
html[data-theme="dark"] .catpage-hero__orb--1 { background: rgba(13,148,136,0.12); }
html[data-theme="dark"] .catpage-hero__orb--2 { background: rgba(251,191,36,0.08); }
html[data-theme="dark"] .catpage-hero__pill { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .catpage-filters-wrap { background: rgba(17,24,39,0.9); border-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .catpage-pill { background: #1F2937; color: #9CA3AF; }
html[data-theme="dark"] .catpage-pill:hover { background: #111827; border-color: var(--color-primary); }
html[data-theme="dark"] .catcard { background: #1F2937; border-color: #374151; }
html[data-theme="dark"] .catcard__gradient { opacity: 0.8; }
html[data-theme="dark"] .catcard__arrow { background: #374151; }
html[data-theme="dark"] .catcard__chip { background: #374151; color: #9CA3AF; }


/* ==========================================================================
   FAVORITES PAGE — Premium v2
   Animated empty state, skeleton loader, glass trust bar, staggered cards
   ========================================================================== */

/* ── Hero ── */
.favpage-hero {
    position: relative;
    padding: 48px 0 32px;
    background: linear-gradient(160deg, #FFF1F2 0%, #FFE4E6 40%, #FEF2F2 100%);
    overflow: hidden;
}

.favpage-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.favpage-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
}

.favpage-hero__orb--1 {
    width: 280px;
    height: 280px;
    background: rgba(239, 68, 68, 0.15);
    top: -80px;
    right: -40px;
    animation: catOrbFloat 9s ease-in-out infinite;
}

.favpage-hero__orb--2 {
    width: 200px;
    height: 200px;
    background: rgba(236, 72, 153, 0.12);
    bottom: -50px;
    left: 15%;
    animation: catOrbFloat 11s ease-in-out infinite reverse;
}

.favpage-crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}

.favpage-crumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.favpage-crumb a:hover { color: #EF4444; }
.favpage-crumb span { color: var(--color-text-primary); font-weight: 600; }

.favpage-hero__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.favpage-hero__left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.favpage-hero__title {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.02em;
}

.favpage-hero__heart {
    display: inline-flex;
    animation: heartPulse 2s ease-in-out infinite;
}

@keyframes heartPulse {
    0%, 100% { transform: scale(1); }
    15%      { transform: scale(1.2); }
    30%      { transform: scale(1); }
    45%      { transform: scale(1.15); }
    60%      { transform: scale(1); }
}

.favpage-hero__count {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 5px 14px;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 999px;
    color: var(--color-text-secondary);
}

.favpage-hero__clear {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1.5px solid rgba(239,68,68,0.25);
    border-radius: 10px;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #DC2626;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
}

.favpage-hero__clear:hover {
    background: #FEF2F2;
    border-color: #EF4444;
    transform: translateY(-1px);
}

/* ── Content ── */
.favpage-content {
    padding: 28px 0 48px;
}

/* Skeleton Loader */
.favpage-skel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.favpage-skel {
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.04);
}

.favpage-skel::before {
    content: '';
    display: block;
    aspect-ratio: 3/5;
    background: linear-gradient(110deg, #f5f5f5 30%, #eee 50%, #f5f5f5 70%);
    background-size: 200% 100%;
    animation: skelShimmer 1.5s ease-in-out infinite;
}

@keyframes skelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Shipping bar */
.favpage-shipping {
    margin-bottom: 20px;
    animation: catCardIn 0.4s ease both;
}

.favpage-shipping__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border: 1px solid rgba(16,185,129,0.15);
    border-radius: 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #065F46;
}

.favpage-shipping__inner svg {
    flex-shrink: 0;
    color: #059669;
}

/* ── Product Grid ── */
.fav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Fav Card */
.favcard {
    position: relative;
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.04);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s cubic-bezier(.22,1,.36,1), opacity 0.35s;
    animation: catCardIn 0.5s cubic-bezier(.22,1,.36,1) both;
}

.favcard:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.03);
}

.favcard--removing {
    opacity: 0 !important;
    transform: scale(0.85) translateY(10px) !important;
    pointer-events: none;
}

/* Remove btn */
.favcard__remove {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 50%;
    color: #9CA3AF;
    cursor: pointer;
    transition: all 0.25s;
    opacity: 0;
}

.favcard:hover .favcard__remove {
    opacity: 1;
}

.favcard__remove:hover {
    background: #FEF2F2;
    color: #EF4444;
    border-color: rgba(239,68,68,0.2);
    transform: scale(1.1);
}

.favcard__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.favcard__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--color-surface, #f8fafb);
}

.favcard__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(.22,1,.36,1);
}

.favcard:hover .favcard__visual img {
    transform: scale(1.06);
}

.favcard__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 8px;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(239,68,68,0.3);
}

.favcard__info {
    padding: 14px 16px 10px;
}

.favcard__name {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--color-text-primary);
}

.favcard__pricing {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.favcard__price {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-primary);
}

.favcard__was {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.favcard__stock {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 600;
}

.favcard__stock.in-stock { color: #059669; }
.favcard__stock.out-of-stock { color: #DC2626; }

/* Actions */
.favcard__actions {
    padding: 0 16px 16px;
}

.favcard__cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    text-decoration: none;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark, #0b7a72) 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(13,148,136,0.2);
}

.favcard__cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(13,148,136,0.3);
}

.favcard__cart-btn--outline {
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    box-shadow: none;
}

.favcard__cart-btn--outline:hover {
    background: rgba(13,148,136,0.04);
    box-shadow: 0 2px 8px rgba(13,148,136,0.1);
}

.favcard__cart-btn--off {
    background: #F3F4F6;
    color: #9CA3AF;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* ── Empty State ── */
.favpage-empty {
    text-align: center;
    padding: 72px 20px 56px;
    animation: catCardIn 0.6s ease both;
}

.favpage-empty__anim {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 28px;
}

.favpage-empty__circle {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    animation: emptyCirclePulse 3s ease-in-out infinite;
}

@keyframes emptyCirclePulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.1); opacity: 0.3; }
}

.favpage-empty__heart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #F87171;
    animation: emptyHeartFloat 3s ease-in-out infinite;
}

@keyframes emptyHeartFloat {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -56%) scale(1.06); }
}

.favpage-empty__title {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 10px;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}

.favpage-empty__desc {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    max-width: 420px;
    margin: 0 auto 28px;
    line-height: 1.6;
}

.favpage-empty__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.favpage-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.25s;
}

.favpage-empty__btn--primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark, #0b7a72) 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(13,148,136,0.25);
}

.favpage-empty__btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(13,148,136,0.35);
}

.favpage-empty__btn--outline {
    background: transparent;
    color: var(--color-text-primary);
    border: 1.5px solid rgba(0,0,0,0.1);
}

.favpage-empty__btn--outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
}

.favpage-empty__tips {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.favpage-empty__tip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.favpage-empty__tip svg { color: #F87171; flex-shrink: 0; }

/* Trust Strip */
.favpage-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
    padding: 16px 20px;
    background: var(--color-surface, #f8fafb);
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.04);
    flex-wrap: wrap;
    animation: catCardIn 0.5s 0.2s ease both;
}

.favpage-trust__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.favpage-trust__item svg { color: var(--color-primary); flex-shrink: 0; }

.favpage-trust__sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #D1D5DB;
    flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .fav-grid { grid-template-columns: repeat(3, 1fr); }
    .favpage-skel-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .favpage-hero { padding: 32px 0 24px; }
    .favpage-hero__title { font-size: 1.3rem; }
    .favpage-hero__heart svg { width: 22px; height: 22px; }
    .fav-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .favpage-skel-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .favcard { border-radius: 14px; }
    .favcard__info { padding: 10px 12px 8px; }
    .favcard__name { font-size: 0.78rem; }
    .favcard__price { font-size: 0.92rem; }
    .favcard__actions { padding: 0 12px 12px; }
    .favcard__cart-btn { padding: 9px; font-size: 0.78rem; border-radius: 10px; }
    .favcard__remove { opacity: 1; width: 26px; height: 26px; }
    .favcard__remove svg { width: 13px; height: 13px; }
    .favpage-empty { padding: 48px 16px 36px; }
    .favpage-empty__anim { width: 90px; height: 90px; }
    .favpage-empty__heart { width: 40px; height: 40px; }
    .favpage-empty__title { font-size: 1.15rem; }
    .favpage-empty__desc { font-size: 0.82rem; }
    .favpage-empty__btn { padding: 11px 22px; font-size: 0.82rem; }
    .favpage-trust { gap: 10px; padding: 12px 14px; }
    .favpage-trust__item { font-size: 0.72rem; }
    .favpage-trust__sep { display: none; }
    .favpage-content { padding: 20px 0 40px; }
    .favpage-shipping__inner { padding: 10px 14px; font-size: 0.78rem; }
}

/* ── Dark Mode ── */
html[data-theme="dark"] .favpage-hero { background: linear-gradient(160deg, #1a0a0a 0%, #1c1118 40%, #111827 100%); }
html[data-theme="dark"] .favpage-hero__orb--1 { background: rgba(239,68,68,0.08); }
html[data-theme="dark"] .favpage-hero__orb--2 { background: rgba(236,72,153,0.06); }
html[data-theme="dark"] .favpage-hero__count { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .favpage-hero__clear { background: rgba(255,255,255,0.04); border-color: rgba(239,68,68,0.2); }
html[data-theme="dark"] .favpage-hero__clear:hover { background: rgba(239,68,68,0.08); }
html[data-theme="dark"] .favcard { background: #1F2937; border-color: #374151; }
html[data-theme="dark"] .favcard__remove { background: rgba(31,41,55,0.85); border-color: #374151; }
html[data-theme="dark"] .favcard__badge { box-shadow: 0 2px 8px rgba(239,68,68,0.2); }
html[data-theme="dark"] .favcard__cart-btn--off { background: #374151; color: #6B7280; }
html[data-theme="dark"] .favpage-empty__circle { background: linear-gradient(135deg, #3B1420 0%, #4B1D2B 100%); }
html[data-theme="dark"] .favpage-empty__heart { color: #F87171; }
html[data-theme="dark"] .favpage-trust { background: #1F2937; border-color: #374151; }
html[data-theme="dark"] .favpage-trust__sep { background: #4B5563; }
html[data-theme="dark"] .favpage-skel { background: #1F2937; border-color: #374151; }
html[data-theme="dark"] .favpage-skel::before { background: linear-gradient(110deg, #1F2937 30%, #374151 50%, #1F2937 70%); background-size: 200% 100%; }
html[data-theme="dark"] .favpage-shipping__inner { background: linear-gradient(135deg, #064E3B 0%, #065F46 100%); border-color: rgba(16,185,129,0.2); color: #A7F3D0; }
html[data-theme="dark"] .favpage-shipping__inner svg { color: #34D399; }

/* ==========================================================================
   AGE PAGES — Premium v5.0
   Decorative hero, pill tabs, trust strip, stagger grid animation
   ========================================================================== */

/* ── Hero ── */
.agp-hero {
    position: relative;
    padding: 28px 0 36px;
    overflow: hidden;
}
.agp-hero__pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.agp-hero__shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.agp-hero__shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.06;
}
.agp-hero__shape--1 {
    width: 260px;
    height: 260px;
    top: -80px;
    right: -40px;
    animation: agpFloat 8s ease-in-out infinite;
}
.agp-hero__shape--2 {
    width: 160px;
    height: 160px;
    bottom: -40px;
    left: 10%;
    animation: agpFloat 10s ease-in-out infinite reverse;
}
@keyframes agpFloat {
    0%,100% { transform: translate(0,0); }
    50% { transform: translate(8px,-12px); }
}

/* Breadcrumb */
.agp-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 20px;
}
.agp-crumb a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 150ms ease;
}
.agp-crumb a:hover { color: var(--agp-color, var(--color-primary)); }
.agp-crumb__cur { color: var(--color-text); font-weight: 600; }

/* Hero body */
.agp-hero__body {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.agp-hero__badge {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.agp-hero__emoji {
    font-size: 2rem;
    line-height: 1;
}
.agp-hero__sup {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 4px;
}
.agp-hero__title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -0.01em;
}
.agp-hero__title span {
    font-weight: 400;
    color: var(--color-text-muted);
}
.agp-hero__desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 8px 0 0;
    line-height: 1.5;
    max-width: 480px;
}
.agp-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}
.agp-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}
.agp-hero__tip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

/* ── Trust Strip ── */
.agp-trust {
    border-bottom: 1px solid var(--color-border);
    padding: 12px 0;
    background: var(--color-bg-white);
}
.agp-trust__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.agp-trust__item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text);
}
.agp-trust__sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-border);
}

/* ── Tabs (pill style) ── */
.agp-tabs {
    background: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header.is-sticky ~ .site-content .agp-tabs,
.site-header.is-sticky ~ main .agp-tabs { top: 60px; }
.agp-tabs__track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px;
}
.agp-tabs__track::-webkit-scrollbar { display: none; }
.agp-tabs__pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 12px;
    text-decoration: none;
    background: var(--color-bg-light);
    border: 1.5px solid transparent;
    transition: all 200ms ease;
    flex-shrink: 0;
    min-width: 0;
}
.agp-tabs__pill:hover {
    border-color: var(--color-border);
    background: var(--color-bg-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.agp-tabs__pill.is-active {
    background: var(--pill-color, var(--color-primary));
    border-color: var(--pill-color, var(--color-primary));
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.agp-tabs__pill.is-active .agp-tabs__main,
.agp-tabs__pill.is-active .agp-tabs__sub { color: #fff; }
.agp-tabs__emoji {
    font-size: 1.125rem;
    line-height: 1;
}
.agp-tabs__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.agp-tabs__main {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}
.agp-tabs__sub {
    font-size: 0.625rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ── Toolbar ── */
.agp-toolbar {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}
.agp-toolbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.agp-toolbar__count {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.agp-toolbar__count strong {
    color: var(--color-text);
}
.agp-toolbar__select {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text);
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    padding: 8px 32px 8px 12px;
    background: var(--color-bg-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center/12px no-repeat;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 150ms ease;
}
.agp-toolbar__select:focus {
    border-color: var(--agp-color, var(--color-primary));
    outline: none;
    box-shadow: 0 0 0 3px rgba(20,184,166,0.1);
}

/* ── Product Grid with stagger ── */
.agp-products {
    padding: 24px 0 48px;
}
.agp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.agp-grid__item {
    animation: agpStagger 0.4s ease both;
}
@keyframes agpStagger {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Pagination ── */
.agp-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}
.agp-pager a,
.agp-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 10px;
    text-decoration: none;
    transition: all 180ms ease;
}
.agp-pager a {
    color: var(--color-text);
    background: var(--color-bg-light);
}
.agp-pager a:hover {
    background: var(--agp-color, var(--color-primary));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.agp-pager .current {
    background: var(--agp-color, var(--color-primary));
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* ── Empty ── */
.agp-empty {
    text-align: center;
    padding: 64px 24px;
}
.agp-empty__visual { margin-bottom: 20px; }
.agp-empty__circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 12px;
}
.agp-empty__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 8px;
}
.agp-empty__desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    max-width: 380px;
    margin: 0 auto 24px;
}
.agp-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--agp-color, var(--color-primary));
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    transition: all 180ms ease;
}
.agp-empty__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}


/* ==========================================================================
   AGP — Flash Sale Section
   ========================================================================== */
.agp-flash {
    padding: 28px 0 16px;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 40%, #fefce8 100%);
    border-top: 1px solid rgba(239,68,68,0.08);
    border-bottom: 1px solid rgba(239,68,68,0.08);
}
.agp-flash__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 12px;
    flex-wrap: wrap;
}
.agp-flash__title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.agp-flash__icon {
    font-size: 1.4rem;
    line-height: 1;
    animation: agp-flash-pulse 2s ease-in-out infinite;
}
@keyframes agp-flash-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
.agp-flash__title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #dc2626;
    margin: 0;
    letter-spacing: -0.02em;
}
.agp-flash__max-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: var(--flash-accent, #dc2626);
    white-space: nowrap;
}
.agp-flash__timer {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1e293b;
    padding: 8px 16px;
    border-radius: 12px;
    flex-shrink: 0;
}
.agp-flash__timer-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.agp-flash__timer-digits {
    display: flex;
    align-items: center;
    gap: 2px;
}
.agp-flash__timer-val {
    background: #334155;
    color: #f1f5f9;
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 3px 7px;
    border-radius: 6px;
    min-width: 28px;
    text-align: center;
}
.agp-flash__timer-sep {
    color: #94a3b8;
    font-weight: 700;
    font-size: 0.9rem;
}

/* ── Flash Grid ── */
.agp-flash__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.agp-flash__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid #fecaca;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
}
.agp-flash__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(220,38,38,0.12);
    border-color: #f87171;
}
.agp-flash__card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fafafa;
}
.agp-flash__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.agp-flash__card:hover .agp-flash__thumb {
    transform: scale(1.05);
}
.agp-flash__disc {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #dc2626;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 8px;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(220,38,38,0.3);
}
.agp-flash__card-info {
    padding: 10px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.agp-flash__card-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text, #374151);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.agp-flash__card-prices {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.agp-flash__card-old {
    font-size: 0.72rem;
    color: #9ca3af;
    text-decoration: line-through;
}
.agp-flash__card-new {
    font-size: 0.88rem;
    font-weight: 700;
    color: #dc2626;
    text-decoration: none;
}

/* ── Flash Footer ── */
.agp-flash__footer {
    text-align: center;
    margin-top: 16px;
}
.agp-flash__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: #dc2626;
    color: #fff;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.agp-flash__cta:hover {
    background: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(220,38,38,0.25);
    color: #fff;
}

/* ── AGP Featured Products ── */
.agp-featured {
    padding: 28px 0 8px;
}

.agp-featured__header {
    margin-bottom: 16px;
}

.agp-featured__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px 0;
}

.agp-featured__sub {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.agp-featured__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.agp-featured__item {
    position: relative;
}

/* ── AGP Badges ── */
.agp-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 8px;
    border-radius: 6px;
    line-height: 1.3;
    pointer-events: none;
}

.agp-badge--hot {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    box-shadow: 0 2px 8px rgba(245,158,11,0.35);
}
.agp-badge--hot::before {
    content: '🔥';
    font-size: 9px;
}

.agp-badge--new {
    background: linear-gradient(135deg, #00B894, #10B981);
    color: #fff;
}

/* Deprecated — use badge--new in product-card instead */
.agp-badge--new-sm { display: none; }

/* ── AGP Category Quick-Links ── */
.agp-quickcats {
    padding: 12px 0;
}

.agp-quickcats__track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}

.agp-quickcats__track::-webkit-scrollbar {
    display: none;
}

.agp-quickcats__pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    border-radius: 99px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-bg-light);
    border: 1.5px solid var(--color-border);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: pointer;
}

.agp-quickcats__pill:hover {
    border-color: var(--agp-color, var(--color-primary));
    color: var(--agp-color, var(--color-primary));
    background: var(--agp-color-light, #f0f9ff);
}

.agp-quickcats__pill.is-active {
    background: var(--agp-color, var(--color-primary));
    color: #fff;
    border-color: var(--agp-color, var(--color-primary));
}

.agp-quickcats__icon {
    font-size: 1rem;
    line-height: 1;
}

.agp-quickcats__count {
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.7;
    margin-left: 2px;
}

/* ── AGP Season Highlights ── */
.agp-season {
    padding: 20px 0 12px;
}

.agp-season__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.agp-season__emoji {
    font-size: 1.5rem;
    line-height: 1;
}

.agp-season__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.agp-season__sub {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    display: block;
}

.agp-season__scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
}

.agp-season__scroll::-webkit-scrollbar {
    display: none;
}

.agp-season__item {
    flex: 0 0 200px;
    scroll-snap-align: start;
}

/* ── AGP Toolbar Clear Filter ── */
.agp-toolbar__clear {
    font-size: 0.75rem;
    color: var(--agp-color, var(--color-primary));
    text-decoration: underline;
    margin-left: 8px;
}

.agp-toolbar__clear:hover {
    opacity: 0.8;
}

/* ==========================================================================
   AGP — Takımlar & Setler Highlight Section
   ========================================================================== */

.agp-sets {
    position: relative;
    padding: 28px 0 20px;
    overflow: hidden;
}
.agp-sets__bg {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    pointer-events: none;
}
.agp-sets .container {
    position: relative;
    z-index: 1;
}
.agp-sets__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.agp-sets__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba(255,255,255,0.7);
    border-radius: 14px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.agp-sets__text {
    flex: 1;
    min-width: 0;
}
.agp-sets__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-heading);
    margin: 0 0 2px;
}
.agp-sets__desc {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.4;
}
.agp-sets__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 9px 20px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}
.agp-sets__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    color: #fff;
}
.agp-sets__scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    scrollbar-width: none;
}
.agp-sets__scroll::-webkit-scrollbar {
    display: none;
}
.agp-sets__item {
    flex: 0 0 200px;
    scroll-snap-align: start;
}

/* ==========================================================================
   DEPRECATED v3.6.2: agp-banner removed from template.
   CSS retained for cache compatibility. Safe to remove in v3.7.0.
   ========================================================================== */

.agp-banner {
    position: relative;
    padding: 28px 0;
    overflow: hidden;
    border-radius: 16px;
    margin: 0 auto 12px;
    max-width: var(--container-max-width);
}
.agp-banner__pattern {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    pointer-events: none;
}
.agp-banner__content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 1;
}
.agp-banner__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: rgba(255,255,255,0.25);
    border-radius: 16px;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}
.agp-banner__text {
    flex: 1;
    min-width: 0;
}
.agp-banner__title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.agp-banner__desc {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.85);
    margin: 0;
    line-height: 1.5;
}
.agp-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    transition: transform 0.2s, box-shadow 0.2s;
}
.agp-banner__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    color: #fff;
}
.agp-banner__cta svg {
    flex-shrink: 0;
}

/* ==========================================================================
   AGP — Category Cards Grid
   ========================================================================== */

.agp-cats {
    padding: 16px 0 8px;
}
.agp-cats__header {
    margin-bottom: 14px;
}
.agp-cats__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0 0 2px;
}
.agp-cats__sub {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}
.agp-cats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}
.agp-cats__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px;
    background: var(--color-bg-white, #fff);
    border: 1.5px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    text-align: center;
}
.agp-cats__card:hover {
    border-color: var(--agp-color, var(--color-primary));
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}
.agp-cats__icon {
    font-size: 1.5rem;
    line-height: 1;
}
.agp-cats__name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-heading);
    line-height: 1.3;
}
.agp-cats__count {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    background: var(--color-bg-light, #f9fafb);
    padding: 2px 8px;
    border-radius: 999px;
}

/* ==========================================================================
   AGP — Categorized Product Rows (horizontal scroll)
   ========================================================================== */

.agp-catrow {
    padding: 14px 0 6px;
}
.agp-catrow__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 10px;
}
.agp-catrow__left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.agp-catrow__icon {
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
}
.agp-catrow__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agp-catrow__more {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--agp-color, var(--color-primary));
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.agp-catrow__more:hover {
    text-decoration: underline;
}
.agp-catrow__scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
}

/* ── Catrow scroll wrapper & arrows ── */
.agp-catrow__scroll-wrap {
    position: relative;
}
.agp-catrow__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
    padding: 0;
    color: var(--color-text, #374151);
}
.agp-catrow__arrow:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    background: #fff;
}
.agp-catrow__arrow[hidden] {
    display: none;
}
.agp-catrow__arrow--left {
    left: -4px;
}
.agp-catrow__arrow--right {
    right: -4px;
}

.agp-catrow__scroll::-webkit-scrollbar {
    display: none;
}
/* ── Compact scroll card (catrow, sets, season) ── */
.agp-catrow__card {
    flex: 0 0 170px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.25s, transform 0.25s;
}
.agp-catrow__card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}
.agp-catrow__card-img {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: #f9fafb;
}
.agp-catrow__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.agp-catrow__card:hover .agp-catrow__card-img img {
    transform: scale(1.05);
}
.agp-catrow__card-info {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.agp-catrow__card-brand {
    font-size: 9px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.agp-catrow__card-title {
    font-size: 0.78rem;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.agp-catrow__card-price {
    font-size: 0.88rem;
    font-weight: 800;
    color: #111827;
    margin-top: 4px;
    white-space: nowrap;
}
.agp-catrow__card-price .woocommerce-Price-currencySymbol {
    font-weight: 700;
}
/* Sets cards are wider */
.agp-sets__card { flex: 0 0 200px; }
/* Legacy compat */
.agp-catrow__item {
    flex: 0 0 170px;
    scroll-snap-align: start;
}

/* ==========================================================================
   AGP — Dynamic Promo Banner (sale products)
   ========================================================================== */

.agp-promo {
    padding: 20px 0 20px;
}
.agp-promo__card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 28px;
    min-height: 140px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}
.agp-promo__left {
    flex: 1;
    min-width: 0;
}
.agp-promo__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: #ef4444;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}
.agp-promo__title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #92400e;
    margin: 0 0 4px;
}
.agp-promo__desc {
    font-size: 0.82rem;
    color: #78350f;
    margin: 0;
    line-height: 1.4;
}
.agp-promo__products {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.agp-promo__product {
    position: relative;
    width: 100px;
    background: #fff;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    text-align: center;
}
.agp-promo__img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 6px;
}
.agp-promo__prices {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}
.agp-promo__old {
    font-size: 0.68rem;
    color: #9ca3af;
    text-decoration: line-through;
}
.agp-promo__new {
    font-size: 0.8rem;
    font-weight: 700;
    color: #dc2626;
}
.agp-promo__disc {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    background: #ef4444;
    padding: 2px 6px;
    border-radius: 999px;
}

/* Responsive */
@media (max-width: 1024px) {
    .agp-grid { grid-template-columns: repeat(3, 1fr); }
    .agp-featured__grid { grid-template-columns: repeat(3, 1fr); }
    /* Flash sale — tablet */
    .agp-flash__grid { grid-template-columns: repeat(3, 1fr); }

}
@media (max-width: 768px) {
    .agp-hero { padding: 20px 0 24px; }
    .agp-hero__badge { width: 56px; height: 56px; border-radius: 14px; }
    .agp-hero__emoji { font-size: 1.5rem; }
    .agp-hero__title { font-size: 1.25rem; }
    .agp-hero__body { gap: 16px; }
    .agp-tabs__pill { padding: 8px 14px; }
    .agp-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .agp-products { padding-bottom: 80px; }
    .agp-trust__row { gap: 16px; }
    .agp-featured__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .agp-featured { padding: 20px 0 4px; }
    /* Flash sale — mobile */
    .agp-flash { padding: 20px 0 12px; }
    .agp-flash__header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .agp-flash__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .agp-flash__title { font-size: 1rem; }
    .agp-flash__timer { padding: 6px 12px; }
    .agp-flash__timer-val { font-size: 0.78rem; padding: 2px 6px; min-width: 24px; }
    .agp-flash__card-info { padding: 8px 10px 12px; }
    .agp-flash__card-name { font-size: 0.7rem; }
    .agp-flash__card-old { font-size: 0.65rem; }
    .agp-flash__card-new { font-size: 0.8rem; }
    .agp-flash__cta { padding: 8px 20px; font-size: 0.78rem; }

    
    /* ── Category page mobile padding ── */
    /* Hero: full-bleed (no side padding) */
    .agp--cat .agp-hero .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .agp--cat .agp-hero {
        padding-left: 0;
        padding-right: 0;
    }
    /* Below hero: minimal side padding */
    .agp--cat .agp-tabs .container,
    .agp--cat .agp-catrow .container,
    .agp--cat .agp-flash .container,
    .agp--cat .agp-cats .container,
    .agp--cat .agp-featured .container,
    .agp--cat .agp-products .container,
    .agp--cat .agp-shipping-bar .container,
    .agp--cat .agp-toolbar .container {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    
    .agp-catrow__arrow { display: none !important; }

    /* Fix sticky subcategory tabs on mobile — disable sticky */
    .agp-tabs {
        position: relative !important;
        top: auto !important;
    }

    .agp-season__item { flex: 0 0 160px; }
    .agp-season .agp-catrow__card { flex: 0 0 160px; }

    /* Sets — mobile */
    .agp-sets { padding: 20px 0 14px; }
    .agp-sets__header { flex-wrap: wrap; gap: 10px; }
    .agp-sets__icon { width: 40px; height: 40px; font-size: 1.3rem; border-radius: 12px; }
    .agp-sets__title { font-size: 1rem; }
    .agp-sets__cta { padding: 8px 16px; font-size: 0.75rem; }
    .agp-sets__item { flex: 0 0 170px; }

    /* Banner — mobile (DEPRECATED v3.6.2) */
    .agp-banner { padding: 20px 0; border-radius: 12px; margin-bottom: 10px; }
    .agp-banner__content { flex-direction: column; text-align: center; gap: 14px; }
    .agp-banner__icon { width: 52px; height: 52px; font-size: 1.6rem; border-radius: 14px; }
    .agp-banner__title { font-size: 1.1rem; }
    .agp-banner__desc { font-size: 0.82rem; }
    .agp-banner__cta { padding: 9px 18px; font-size: 0.78rem; }

    /* Category cards — mobile */
    .agp-cats__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .agp-cats__card { padding: 12px 6px; border-radius: 10px; gap: 4px; }
    .agp-cats__icon { font-size: 1.2rem; }
    .agp-cats__name { font-size: 0.72rem; }
    .agp-cats__count { font-size: 0.62rem; padding: 1px 6px; }

    /* Catrow — mobile */
    .agp-catrow__card { flex: 0 0 145px; }
    .agp-catrow__card-info { padding: 8px 10px 10px; }
    .agp-catrow__card-title { font-size: 0.72rem; }
    .agp-catrow__card-price { font-size: 0.82rem; }
    .agp-sets__card { flex: 0 0 170px; }
    .agp-catrow__item { flex: 0 0 145px; }

    /* Promo — mobile */
    .agp-promo__card { flex-direction: column; padding: 16px; gap: 14px; text-align: center; }
    .agp-promo__products { justify-content: center; }
    .agp-promo__product { width: 90px; }
    .agp-promo__img { width: 70px; height: 70px; }
    .agp-promo__title { font-size: 1rem; }
}


/* ==========================================================================
   WIZARD PAGES — Premium v5.0
   Glass card, labeled progress, rich option cards, animated transitions
   ========================================================================== */

/* ── Wizard Hero ── */
.wzp-hero {
    position: relative;
    padding: 28px 0 24px;
    text-align: center;
    overflow: hidden;
}
.wzp-hero__pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.wzp-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}
.wzp-hero__emoji {
    font-size: 3rem;
    line-height: 1;
    animation: wzpBounce 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes wzpBounce {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.wzp-hero__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -0.01em;
}
.wzp-hero__desc {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin: 0;
}
.wzp-hero__steps-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wz-color, var(--color-primary));
    background: rgba(255,255,255,0.7);
    padding: 6px 14px;
    border-radius: 999px;
    margin-top: 4px;
}

/* ── Wizard Card ── */
.wzp-card {
    max-width: 680px;
    margin: -12px auto 0;
    padding: 32px 28px;
    background: var(--color-bg-white);
    border-radius: 20px;
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 40px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    position: relative;
}

/* ── Progress with labels ── */
.wzp-progress {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-bottom: 32px;
}
.wzp-progress__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.wzp-progress__dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    background: var(--color-bg-light);
    color: var(--color-text-muted);
    border: 2.5px solid var(--color-border);
    transition: all 300ms cubic-bezier(0.34,1.56,0.64,1);
    position: relative;
}
.wzp-progress__check {
    position: absolute;
    opacity: 0;
    transform: scale(0);
    transition: all 250ms ease;
}
.wzp-progress__item.is-active .wzp-progress__dot {
    background: var(--wz-color, var(--color-primary));
    color: #fff;
    border-color: var(--wz-color, var(--color-primary));
    box-shadow: 0 0 0 5px rgba(20,184,166,0.12);
    transform: scale(1.08);
}
.wzp-progress__item.is-done .wzp-progress__dot {
    background: var(--wz-color, var(--color-primary));
    color: transparent;
    border-color: var(--wz-color, var(--color-primary));
}
.wzp-progress__item.is-done .wzp-progress__dot span { opacity: 0; }
.wzp-progress__item.is-done .wzp-progress__check {
    opacity: 1;
    transform: scale(1);
}
.wzp-progress__label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color 200ms ease;
}
.wzp-progress__item.is-active .wzp-progress__label {
    color: var(--wz-color, var(--color-primary));
}
.wzp-progress__item.is-done .wzp-progress__label {
    color: var(--wz-color, var(--color-primary));
}
.wzp-progress__line {
    width: 48px;
    height: 3px;
    background: var(--color-border);
    border-radius: 2px;
    margin-top: 18px;
    transition: background 300ms ease;
    flex-shrink: 0;
}
.wzp-progress__line.is-done {
    background: var(--wz-color, var(--color-primary));
}

/* ── Step ── */
.wzp-step {
    display: none;
    animation: wzpSlide 350ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wzp-step.is-active { display: block; }
@keyframes wzpSlide {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}
.wzp-step__q {
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    margin: 0 0 24px;
    letter-spacing: -0.01em;
}
.wzp-step__opts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

/* ── Option card ── */
.wzp-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--color-bg-white);
    border: 2px solid var(--color-border);
    border-radius: 14px;
    cursor: pointer;
    transition: all 220ms cubic-bezier(0.34,1.56,0.64,1);
    position: relative;
    text-align: left;
}
.wzp-opt:hover {
    border-color: var(--wz-color, var(--color-primary));
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    transform: translateY(-3px);
}
.wzp-opt.is-selected {
    border-color: var(--wz-color, var(--color-primary));
    background: linear-gradient(135deg, rgba(20,184,166,0.04), rgba(20,184,166,0.02));
    box-shadow: 0 0 0 3px rgba(20,184,166,0.1);
}
.wzp-opt__emoji {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
}
.wzp-opt__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.wzp-opt__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}
.wzp-opt__desc {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}
.wzp-opt__check {
    opacity: 0;
    transform: scale(0.5);
    transition: all 250ms cubic-bezier(0.34,1.56,0.64,1);
    color: var(--wz-color, var(--color-primary));
    flex-shrink: 0;
}
.wzp-opt.is-selected .wzp-opt__check {
    opacity: 1;
    transform: scale(1);
}

/* ── Results ── */
.wzp-results__loading {
    text-align: center;
    padding: 40px 0;
}
.wzp-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-border);
    border-top-color: var(--wz-color, var(--color-primary));
    border-radius: 50%;
    animation: wzpSpin 0.7s linear infinite;
    margin: 0 auto 16px;
}
@keyframes wzpSpin { to { transform: rotate(360deg); } }

.wz-results__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    margin: 0 0 20px;
}
.wz-results__title span { font-weight: 400; color: var(--color-text-muted); font-size: 0.875rem; }
.wz-results__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.wz-results__more,
.wz-results__fallback {
    text-align: center;
    margin-top: 24px;
}
.wz-results__shop-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--wz-color, var(--color-primary));
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    transition: all 180ms ease;
}
.wz-results__shop-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* ── Nav ── */
.wzp-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}
.wzp-nav__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 180ms ease;
    border: none;
    background: none;
}
.wzp-nav__btn--back {
    color: var(--color-text-muted);
    background: var(--color-bg-light);
}
.wzp-nav__btn--back:hover { background: var(--color-border); }
.wzp-nav__btn--restart {
    color: var(--wz-color, var(--color-primary));
    background: rgba(20,184,166,0.08);
}
.wzp-nav__btn--restart:hover { background: rgba(20,184,166,0.15); }

/* Responsive */
@media (max-width: 768px) {
    .wzp-card { padding: 24px 16px; margin-top: -8px; border-radius: 16px; }
    .wzp-hero { padding: 20px 0 16px; }
    .wzp-hero__title { font-size: 1.25rem; }
    .wzp-hero__emoji { font-size: 2.5rem; }
    .wzp-step__q { font-size: 1rem; }
    .wzp-step__opts { grid-template-columns: 1fr; }
    .wz-results__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .wzp-progress__line { width: 28px; }
    .wzp-progress__label { font-size: 0.6rem; }
    .wzp-progress__dot { width: 34px; height: 34px; }
    .wzp { padding-bottom: 80px; }
}


/* ═══════════════════════════════════════════════════════════════
 * BABY PREP SWIPE WIZARD (bps-*)
 * Premium Tinder-style card swipe experience
 * ═══════════════════════════════════════════════════════════════ */

.bps-body { padding: 0 0 20px; }

/* ── Category Progress Dots ── */
.bps-prog {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 24px 0 16px;
}
.bps-prog__dot {
    position: relative;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.bps-prog__emoji { font-size: 16px; transition: all 0.3s; }
.bps-prog__check { display: none; }
.bps-prog__dot.is-active {
    background: var(--wz-color, #14B8A6);
    border-color: var(--wz-color, #14B8A6);
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(20,184,166,0.15);
}
.bps-prog__dot.is-active .bps-prog__emoji { filter: brightness(10); }
.bps-prog__dot.is-done {
    background: #10B981;
    border-color: #10B981;
}
.bps-prog__dot.is-done .bps-prog__emoji { display: none; }
.bps-prog__dot.is-done .bps-prog__check { display: block; }
.bps-prog__line {
    width: 24px; height: 2px;
    background: #e5e7eb;
    transition: background 0.3s;
}
.bps-prog__line.is-done { background: #10B981; }

/* ── Category Header ── */
.bps-cat {
    text-align: center;
    padding: 8px 0 20px;
    overflow: hidden;
}
.bps-cat__inner {
    transition: all 0.3s ease;
}
.bps-cat__inner.bps-cat--exiting {
    animation: bpsSlideOut 0.3s ease forwards;
}
.bps-cat__inner.bps-cat--entering {
    animation: bpsSlideIn 0.35s ease forwards;
}
.bps-cat__emoji { font-size: 40px; display: block; margin-bottom: 8px; }
.bps-cat__name {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 4px;
}
.bps-cat__desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 4px;
}
.bps-cat__why {
    font-size: 0.8rem;
    color: var(--wz-color, #14B8A6);
    font-style: italic;
    margin: 0 0 8px;
    font-weight: 500;
}
.bps-cat__counter {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: #f3f4f6;
    padding: 3px 12px;
    border-radius: 20px;
}

/* ── Card Stack ── */
.bps-stack {
    position: relative;
    width: 100%;
    max-width: 340px;
    height: 440px;
    margin: 0 auto;
}
.bps-stack__loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* ── Swipe Card ── */
.bps-card {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    -ms-touch-action: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}
.bps-card:active { cursor: grabbing; }
.bps-card--top { z-index: 2; }
.bps-card--behind {
    z-index: 1;
    transform: scale(0.95) translateY(12px);
    opacity: 0.7;
    pointer-events: none;
}
.bps-card__img {
    position: relative;
    height: 65%;
    overflow: hidden;
    background: #f9fafb;
}
.bps-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Card Overlays (SKIP / LIKE) */
.bps-card__overlay {
    position: absolute;
    top: 20px;
    padding: 8px 20px;
    border-radius: 10px;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 2px;
    border: 3px solid;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    z-index: 3;
}
.bps-card__overlay--skip {
    left: 20px;
    color: #EF4444;
    border-color: #EF4444;
    background: rgba(255,255,255,0.9);
    transform: rotate(-12deg);
}
.bps-card__overlay--like {
    right: 20px;
    color: #10B981;
    border-color: #10B981;
    background: rgba(255,255,255,0.9);
    transform: rotate(12deg);
}

/* Variable product badge */
.bps-card__var-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(124,58,237,0.3);
}

/* Card Info Panel */
.bps-card__info {
    height: 35%;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}
.bps-card__name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}
.bps-card__price {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--wz-color, #14B8A6);
}
.bps-card__price del { font-size: 0.8em; color: var(--color-text-muted); font-weight: 400; }
.bps-card__price ins { text-decoration: none; }

/* Exit animations */
.bps-card--exit-left {
    animation: bpsExitLeft 0.35s ease forwards;
    pointer-events: none;
}
.bps-card--exit-right {
    animation: bpsExitRight 0.35s ease forwards;
    pointer-events: none;
}

/* ── Action Buttons ── */
.bps-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
}
.bps-action {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.bps-action:active { transform: scale(0.92); }
.bps-action--skip {
    background: #fff;
    color: #EF4444;
    border: 2px solid #fecaca;
}
.bps-action--skip:hover {
    background: #FEF2F2;
    box-shadow: 0 4px 20px rgba(239,68,68,0.2);
}
.bps-action--info {
    width: 40px; height: 40px;
    background: #fff;
    color: var(--color-text-muted);
    border: 1px solid #e5e7eb;
}
.bps-action--info:hover { color: var(--color-text); background: #f9fafb; }
.bps-action--like {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    border: none;
    width: 64px; height: 64px;
}
.bps-action--like:hover {
    box-shadow: 0 4px 24px rgba(16,185,129,0.35);
    transform: scale(1.05);
}

/* ── Discount Progress Bar ── */
.bps-discount {
    position: sticky;
    bottom: 0;
    z-index: 50;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px 16px 0 0;
    padding: 14px 16px;
    margin: 12px -16px 0;
    transition: all 0.3s;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.04);
}
.bps-discount__inner {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.bps-discount__icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #f0fdf4;
    color: #10B981;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bps-discount__content { flex: 1; min-width: 0; }
.bps-discount__track {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}
.bps-discount__fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #14B8A6, #10B981);
    border-radius: 3px;
    transition: width 0.5s ease;
}
.bps-discount__text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.bps-discount__badge {
    flex-shrink: 0;
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 8px;
    animation: bpsPulse 1s ease-in-out;
}
.bps-discount--unlocked .bps-discount__fill {
    background: linear-gradient(90deg, #10B981, #059669);
}
.bps-discount--celebrate {
    animation: bpsCelebrate 0.6s ease;
}

/* ── Cart Badge (floating) ── */
.bps-cart-badge {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 101;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    transition: all 0.3s;
}
.bps-cart-badge__count {
    position: absolute;
    top: -4px; right: -4px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #EF4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}
.bps-cart-badge--pulse { animation: bpsPulse 0.6s ease; }

/* ── Variant Picker Bottom Sheet ── */
.bps-variant {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.bps-variant[hidden] { display: none !important; }
.bps-variant:not([hidden]) { display: flex; }
.bps-variant.is-open { opacity: 1; pointer-events: auto; }
.bps-variant__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    cursor: pointer;
}
.bps-variant__sheet {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    background: #fff;
    border-radius: 24px 24px 0 0;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.12);
}
.bps-variant.is-open .bps-variant__sheet { transform: translateY(0); }
.bps-variant__header {
    position: relative;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #f3f4f6;
}
.bps-variant__close {
    position: absolute;
    top: 16px; right: 16px;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.bps-variant__close:hover { background: #e5e7eb; color: var(--color-text); }
.bps-variant__product {
    display: flex;
    align-items: center;
    gap: 14px;
}
.bps-variant__img {
    width: 72px; height: 72px;
    border-radius: 14px;
    object-fit: cover;
    background: #f9fafb;
}
.bps-variant__meta { flex: 1; min-width: 0; }
.bps-variant__name {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bps-variant__price {
    font-size: 1rem;
    font-weight: 800;
    color: var(--wz-color, #14B8A6);
}
.bps-variant__body { padding: 20px; }
.bps-variant__loading {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}
.bps-variant__group { margin-bottom: 20px; }
.bps-variant__label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.bps-variant__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bps-variant__opt {
    padding: 8px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.bps-variant__opt:hover { border-color: var(--wz-color, #14B8A6); background: #f0fdf4; }
.bps-variant__opt.is-selected {
    border-color: var(--wz-color, #14B8A6);
    background: var(--wz-color, #14B8A6);
    color: #fff;
    box-shadow: 0 2px 8px rgba(20,184,166,0.3);
}
.bps-variant__footer {
    padding: 16px 20px 24px;
    border-top: 1px solid #f3f4f6;
}
.bps-variant__submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #14B8A6, #0D9488);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(20,184,166,0.25);
}
.bps-variant__submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(20,184,166,0.35);
}
.bps-variant__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Summary Screen ── */
.bps-summary {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
}
.bps-summary[hidden] { display: none !important; }
.bps-summary:not([hidden]) { display: flex; }
.bps-summary.is-open { opacity: 1; pointer-events: auto; }
.bps-summary__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.bps-summary__card {
    position: relative;
    background: #fff;
    border-radius: 24px;
    padding: 40px 32px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,0.15);
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.bps-summary.is-open .bps-summary__card { transform: scale(1); }
.bps-summary__emoji { font-size: 56px; margin-bottom: 12px; }
.bps-summary__title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 24px;
}
.bps-summary__stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 28px;
}
.bps-summary__stat {
    text-align: center;
}
.bps-summary__stat span {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text);
}
.bps-summary__stat small {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 500;
}
.bps-summary__stat--discount span { color: #10B981; }
.bps-summary__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bps-summary__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}
.bps-summary__btn--primary {
    background: linear-gradient(135deg, #14B8A6, #0D9488);
    color: #fff;
    box-shadow: 0 4px 16px rgba(20,184,166,0.25);
}
.bps-summary__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(20,184,166,0.35);
}
.bps-summary__btn--secondary {
    background: #f3f4f6;
    color: var(--color-text);
}
.bps-summary__btn--secondary:hover { background: #e5e7eb; }

/* ── Animations ── */
@keyframes bpsExitLeft {
    0% { transform: translateX(0) rotate(0); opacity: 1; }
    100% { transform: translateX(-150%) rotate(-30deg); opacity: 0; }
}
@keyframes bpsExitRight {
    0% { transform: translateX(0) rotate(0); opacity: 1; }
    100% { transform: translateX(150%) rotate(30deg); opacity: 0; }
}
@keyframes bpsSlideIn {
    0% { transform: translateX(40px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes bpsSlideOut {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(-40px); opacity: 0; }
}
@keyframes bpsPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
@keyframes bpsCelebrate {
    0% { transform: translateY(0); }
    25% { transform: translateY(-4px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .bps-stack { max-width: 100%; height: 400px; }
    .bps-prog__dot { width: 30px; height: 30px; }
    .bps-prog__emoji { font-size: 13px; }
    .bps-prog__line { width: 16px; }
    .bps-cat__emoji { font-size: 32px; }
    .bps-cat__name { font-size: 1.15rem; }
    .bps-action--like { width: 56px; height: 56px; }
    .bps-action--skip { width: 48px; height: 48px; }
    .bps-action--info { width: 36px; height: 36px; }
    .bps-summary__card { padding: 28px 20px; }
    .bps-summary__stats { gap: 16px; }
    .bps-summary__stat span { font-size: 1.25rem; }
}
@media (min-width: 481px) and (max-width: 768px) {
    .bps-stack { max-width: 360px; }
}
@media (min-width: 769px) {
    .bps-stack { max-width: 380px; height: 480px; }
    .bps-card__info { padding: 20px 24px; }
    .bps-card__name { font-size: 1.05rem; }
    .bps-card__price { font-size: 1.2rem; }
}

/* ── Pre-Steps (Gender / Age / Budget selection) ── */
.bps-presteps {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 16px 40px;
}
.bps-prestep {
    display: none;
    text-align: center;
    animation: bpsSlideIn 0.35s ease forwards;
}
.bps-prestep.is-active { display: block; }
.bps-prestep__q {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 8px;
}
.bps-prestep__sub {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0 0 28px;
    font-weight: 500;
}
.bps-prestep__opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.bps-prestep__opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 12px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.bps-prestep__opt:hover {
    border-color: var(--wz-color, #14B8A6);
    background: #f0fdfa;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(20,184,166,0.12);
}
.bps-prestep__opt:active {
    transform: scale(0.97);
}
.bps-prestep__icon {
    font-size: 2rem;
    line-height: 1;
}
.bps-prestep__label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}
.bps-prestep__opt--selected {
    border-color: var(--wz-color, #14B8A6);
    background: rgba(20,184,166,0.06);
    box-shadow: 0 0 0 3px rgba(20,184,166,0.12);
}

/* Pre-step progress indicator */
.bps-prestep-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 0 16px;
}
.bps-prestep-progress__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: all 0.3s;
}
.bps-prestep-progress__dot.is-active {
    background: var(--wz-color, #14B8A6);
    transform: scale(1.3);
    box-shadow: 0 0 0 3px rgba(20,184,166,0.15);
}
.bps-prestep-progress__dot.is-done {
    background: #10B981;
}

/* Responsive: single column on small screens */
@media (max-width: 400px) {
    .bps-prestep__opts { grid-template-columns: 1fr; gap: 10px; }
    .bps-prestep__opt { padding: 18px 12px; flex-direction: row; gap: 12px; }
    .bps-prestep__icon { font-size: 1.5rem; }
    .bps-prestep__q { font-size: 1.15rem; }
}

/* ── Onboarding Overlay ── */
.bps-onboard {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.bps-onboard[hidden] { display: none !important; }
.bps-onboard:not([hidden]) { display: flex; }
.bps-onboard.is-open { opacity: 1; pointer-events: auto; }
.bps-onboard__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.bps-onboard__card {
    position: relative;
    background: #fff;
    border-radius: 24px;
    padding: 36px 28px 24px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,0.2);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.bps-onboard.is-open .bps-onboard__card { transform: scale(1) translateY(0); }
.bps-onboard__visual {
    margin-bottom: 16px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bps-onboard__emoji { font-size: 56px; }
.bps-onboard__title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 8px;
}
.bps-onboard__desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0 0 24px;
}
.bps-onboard__desc strong { color: var(--color-text); font-weight: 700; }

/* Swipe demo animation */
.bps-onboard__swipe-demo {
    display: flex;
    align-items: center;
    gap: 16px;
}
.bps-onboard__arrow {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 10px;
}
.bps-onboard__arrow--left {
    color: #EF4444;
    background: #FEF2F2;
    animation: bpsObLeft 1.5s ease-in-out infinite;
}
.bps-onboard__arrow--right {
    color: #10B981;
    background: #F0FDF4;
    animation: bpsObRight 1.5s ease-in-out infinite;
}
.bps-onboard__card-mini {
    font-size: 40px;
    width: 60px; height: 70px;
    background: #f9fafb;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
@keyframes bpsObLeft {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-8px); }
}
@keyframes bpsObRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

/* Button demo */
.bps-onboard__btns-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.bps-onboard__btn-demo {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.bps-onboard__btn-demo--skip {
    background: #fff;
    color: #EF4444;
    border: 2px solid #fecaca;
    animation: bpsPulse 2s ease-in-out infinite;
}
.bps-onboard__btn-demo--like {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    animation: bpsPulse 2s ease-in-out 0.3s infinite;
}

/* Footer */
.bps-onboard__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.bps-onboard__dots {
    display: flex;
    gap: 6px;
}
.bps-onboard__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: all 0.3s;
}
.bps-onboard__dot.is-active {
    background: var(--wz-color, #14B8A6);
    width: 20px;
    border-radius: 4px;
}
.bps-onboard__actions { display: flex; gap: 8px; }
.bps-onboard__skip {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.2s;
}
.bps-onboard__skip:hover { background: #f3f4f6; color: var(--color-text); }
.bps-onboard__next {
    padding: 10px 20px;
    background: var(--wz-color, #14B8A6);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(20,184,166,0.25);
}
.bps-onboard__next:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(20,184,166,0.35); }
@media (max-width: 400px) {
    .bps-onboard__card { padding: 28px 20px 20px; }
    .bps-onboard__emoji { font-size: 44px; }
    .bps-onboard__title { font-size: 1.1rem; }
}

/* Dark Mode: onboarding */
html[data-theme="dark"] .bps-onboard__card,
body[data-theme="dark"] .bps-onboard__card { background: var(--color-bg-card); }
html[data-theme="dark"] .bps-onboard__card-mini,
body[data-theme="dark"] .bps-onboard__card-mini { background: var(--color-bg-dark); }
html[data-theme="dark"] .bps-onboard__arrow--left,
body[data-theme="dark"] .bps-onboard__arrow--left { background: rgba(239,68,68,0.1); }
html[data-theme="dark"] .bps-onboard__arrow--right,
body[data-theme="dark"] .bps-onboard__arrow--right { background: rgba(16,185,129,0.1); }
html[data-theme="dark"] .bps-onboard__btn-demo--skip,
body[data-theme="dark"] .bps-onboard__btn-demo--skip { background: var(--color-bg-dark); border-color: rgba(239,68,68,0.3); }

/* ── Dark Mode ── */
html[data-theme="dark"] .bps-card,
body[data-theme="dark"] .bps-card {
    background: var(--color-bg-card);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .bps-card__name,
body[data-theme="dark"] .bps-card__name { color: var(--color-text); }
html[data-theme="dark"] .bps-discount,
body[data-theme="dark"] .bps-discount {
    background: rgba(17,24,39,0.95);
    border-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .bps-variant__sheet,
body[data-theme="dark"] .bps-variant__sheet { background: var(--color-bg-card); }
html[data-theme="dark"] .bps-variant__opt,
body[data-theme="dark"] .bps-variant__opt { background: var(--color-bg-dark); border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .bps-summary__card,
body[data-theme="dark"] .bps-summary__card { background: var(--color-bg-card); }
html[data-theme="dark"] .bps-cart-badge,
body[data-theme="dark"] .bps-cart-badge { background: var(--color-bg-card); }
html[data-theme="dark"] .bps-prog__dot,
body[data-theme="dark"] .bps-prog__dot { background: var(--color-bg-dark); border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .bps-prestep__opt,
body[data-theme="dark"] .bps-prestep__opt { background: var(--color-bg-card); border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .bps-prestep__opt:hover,
body[data-theme="dark"] .bps-prestep__opt:hover { background: rgba(20,184,166,0.1); border-color: rgba(20,184,166,0.4); }
html[data-theme="dark"] .bps-prestep__label,
body[data-theme="dark"] .bps-prestep__label { color: var(--color-text); }
html[data-theme="dark"] .bps-prestep-progress__dot,
body[data-theme="dark"] .bps-prestep-progress__dot { background: rgba(255,255,255,0.1); }
html[data-theme="dark"] .bps-cat__counter,
body[data-theme="dark"] .bps-cat__counter { background: var(--color-bg-dark); }


/* ── Dark mode ── */
html[data-theme="dark"] .agp-hero,
body[data-theme="dark"] .agp-hero { background: var(--color-bg-dark) !important; }
html[data-theme="dark"] .agp-hero__badge,
body[data-theme="dark"] .agp-hero__badge { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.1) !important; }
html[data-theme="dark"] .agp-tabs,
html[data-theme="dark"] .agp-trust,
body[data-theme="dark"] .agp-tabs,
body[data-theme="dark"] .agp-trust { background: var(--color-bg-card); }
html[data-theme="dark"] .agp-tabs__pill,
body[data-theme="dark"] .agp-tabs__pill { background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .agp-toolbar__select,
body[data-theme="dark"] .agp-toolbar__select { background-color: var(--color-bg-card); color: var(--color-text); }
html[data-theme="dark"] .agp-quickcats__pill,
body[data-theme="dark"] .agp-quickcats__pill { background: var(--color-bg-card); border-color: rgba(255,255,255,0.1); color: var(--color-text-muted); }

html[data-theme="dark"] .agp-flash,
body[data-theme="dark"] .agp-flash {
    background: linear-gradient(135deg, rgba(220,38,38,0.05) 0%, var(--color-bg) 40%, rgba(234,179,8,0.03) 100%);
    border-color: rgba(239,68,68,0.15);
}
html[data-theme="dark"] .agp-flash__card,
body[data-theme="dark"] .agp-flash__card {
    background: var(--color-bg-card);
    border-color: rgba(239,68,68,0.2);
}
html[data-theme="dark"] .agp-flash__card-name,
body[data-theme="dark"] .agp-flash__card-name { color: var(--color-text); }
html[data-theme="dark"] .agp-featured__title,
body[data-theme="dark"] .agp-featured__title { color: var(--color-text); }
html[data-theme="dark"] .agp-season__title,
body[data-theme="dark"] .agp-season__title { color: var(--color-text); }

/* Dark — Sets */
html[data-theme="dark"] .agp-sets__bg,
body[data-theme="dark"] .agp-sets__bg { opacity: 0.15; }
html[data-theme="dark"] .agp-sets__icon,
body[data-theme="dark"] .agp-sets__icon { background: rgba(255,255,255,0.1); }
html[data-theme="dark"] .agp-sets__title,
body[data-theme="dark"] .agp-sets__title { color: var(--color-text); }

/* Dark — Banner (DEPRECATED v3.6.2) */
html[data-theme="dark"] .agp-banner,
body[data-theme="dark"] .agp-banner { opacity: 0.92; }
html[data-theme="dark"] .agp-banner__icon,
body[data-theme="dark"] .agp-banner__icon { background: rgba(255,255,255,0.12); }

/* Dark — Category Cards */
html[data-theme="dark"] .agp-cats__card,
body[data-theme="dark"] .agp-cats__card { background: var(--color-bg-card); border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .agp-cats__title,
body[data-theme="dark"] .agp-cats__title { color: var(--color-text); }
html[data-theme="dark"] .agp-cats__name,
body[data-theme="dark"] .agp-cats__name { color: var(--color-text); }
html[data-theme="dark"] .agp-cats__count,
body[data-theme="dark"] .agp-cats__count { background: rgba(255,255,255,0.06); color: var(--color-text-muted); }

/* Dark — Catrow */
html[data-theme="dark"] .agp-catrow__item,
html[data-theme="dark"] .agp-catrow__card,
body[data-theme="dark"] .agp-catrow__item,
body[data-theme="dark"] .agp-catrow__card { background: var(--color-bg-card); border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .agp-catrow__title,
body[data-theme="dark"] .agp-catrow__title { color: var(--color-text); }
html[data-theme="dark"] .agp-catrow__card-title,
body[data-theme="dark"] .agp-catrow__card-title { color: #f3f4f6; }
html[data-theme="dark"] .agp-catrow__card-price,
body[data-theme="dark"] .agp-catrow__card-price { color: #f3f4f6; }
html[data-theme="dark"] .agp-catrow__card-brand,
body[data-theme="dark"] .agp-catrow__card-brand { color: #6b7280; }
html[data-theme="dark"] .agp-catrow__item span,
body[data-theme="dark"] .agp-catrow__item span { color: var(--color-text); }

/* Dark — Promo Banner */
html[data-theme="dark"] .agp-promo__card,
body[data-theme="dark"] .agp-promo__card { background: linear-gradient(135deg, #451a03 0%, #78350f 50%, #92400e 100%); }
html[data-theme="dark"] .agp-promo__title,
body[data-theme="dark"] .agp-promo__title { color: #fbbf24; }
html[data-theme="dark"] .agp-promo__desc,
body[data-theme="dark"] .agp-promo__desc { color: #fcd34d; }
html[data-theme="dark"] .agp-promo__product,
body[data-theme="dark"] .agp-promo__product { background: var(--color-bg-card); }

html[data-theme="dark"] .age-count,
body[data-theme="dark"] .age-count { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .age-thumb,
body[data-theme="dark"] .age-thumb { border-color: var(--color-bg-card); }

html[data-theme="dark"] .wzp-hero,
body[data-theme="dark"] .wzp-hero { background: var(--color-bg-dark) !important; }
html[data-theme="dark"] .wzp-card,
body[data-theme="dark"] .wzp-card { background: var(--color-bg-card); border-color: rgba(255,255,255,0.08); box-shadow: 0 8px 40px rgba(0,0,0,0.2); }
html[data-theme="dark"] .wzp-opt,
body[data-theme="dark"] .wzp-opt { background: var(--color-bg-dark); border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .wzp-opt:hover,
body[data-theme="dark"] .wzp-opt:hover { border-color: var(--wz-color, var(--color-primary)); }
html[data-theme="dark"] .wzp-hero__steps-label,
body[data-theme="dark"] .wzp-hero__steps-label { background: rgba(0,0,0,0.3); }

/* Season badges in wizard hero */
.wzp-hero__badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.wzp-hero__season-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wz-color, var(--color-primary));
    background: var(--color-bg-white);
    border: 1.5px solid var(--wz-color, var(--color-primary));
    padding: 5px 12px;
    border-radius: 999px;
}

/* Season note in results */
.wz-results__season-note {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    background: var(--color-bg-light);
    padding: 8px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}
.wz-results__season-note strong {
    color: var(--wz-color, var(--color-primary));
}

/* Dark mode */
html[data-theme="dark"] .wzp-hero__season-badge,
body[data-theme="dark"] .wzp-hero__season-badge {
    background: rgba(0,0,0,0.3);
}
html[data-theme="dark"] .wz-results__season-note,
body[data-theme="dark"] .wz-results__season-note {
    background: rgba(255,255,255,0.05);
}

/* ─── Wizard Premium Enhancements v3.4.1 ─── */
.wzp-card {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 8px 32px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
}
.wzp-opt { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; }
.wzp-opt::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent 40%,rgba(20,184,166,0.04) 100%); opacity:0; transition:opacity 0.3s; }
.wzp-opt:hover::before { opacity:1; }
.wzp-opt:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
.wzp-opt.is-selected { transform:translateY(-2px); box-shadow:0 8px 24px rgba(20,184,166,0.15); }
.wzp-opt.is-selected .wzp-opt__emoji { animation: wzp-emoji-pop 0.4s cubic-bezier(0.68,-0.55,0.265,1.55); }
@keyframes wzp-emoji-pop { 0%{transform:scale(1)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }
.wzp-progress__dot { transition:all 0.4s cubic-bezier(0.4,0,0.2,1); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.wzp-progress__item.is-active .wzp-progress__dot { box-shadow:0 4px 16px rgba(20,184,166,0.3); transform:scale(1.1); }
.wzp-progress__line { transition:all 0.6s cubic-bezier(0.4,0,0.2,1); }
.wzp-hero__emoji { animation:wzp-hero-float 3s ease-in-out infinite; }
@keyframes wzp-hero-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.wz-results__title { font-size:1.25rem; font-weight:700; color:var(--color-text); margin-bottom:6px; }
.wz-results__title span { font-weight:400; font-size:0.85rem; color:var(--color-text-muted); }
.wz-results__season-note { display:flex; align-items:center; gap:6px; font-size:0.8rem; color:var(--color-text-muted); background:var(--color-bg-light); padding:8px 14px; border-radius:8px; margin-bottom:20px; }
.wz-results__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:20px; }
@media(min-width:768px){ .wz-results__grid{grid-template-columns:repeat(3,1fr);gap:16px} }
@media(min-width:1024px){ .wz-results__grid{grid-template-columns:repeat(4,1fr);gap:20px} }
.wz-results__bulk-add { text-align:center; padding:20px 0; margin-bottom:16px; }
.wz-results__add-all-btn { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; background:linear-gradient(135deg,var(--color-primary) 0%,#0d9488 100%); color:#fff; border:none; border-radius:12px; font-size:1rem; font-weight:600; cursor:pointer; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow:0 4px 16px rgba(20,184,166,0.25); }
.wz-results__add-all-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(20,184,166,0.35); }
.wz-results__add-all-btn:disabled { opacity:0.7; cursor:wait; transform:none; }
.wz-results__add-all-note { font-size:0.78rem; color:var(--color-text-muted); margin-top:8px; }
.wz-results__fallback-intro { display:flex; align-items:center; gap:8px; padding:12px 16px; background:linear-gradient(135deg,#FEF3C7 0%,#FDE68A 100%); border-radius:10px; margin-bottom:20px; font-size:0.85rem; color:#92400E; }
.wz-results__fallback-intro p { margin:0; }
.wz-results__shop-btn { display:inline-flex; align-items:center; gap:6px; padding:12px 28px; background:var(--color-bg-light); color:var(--color-text); border-radius:10px; font-weight:600; font-size:0.9rem; text-decoration:none; transition:all 0.2s; border:1px solid var(--color-border); }
.wz-results__shop-btn:hover { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.wz-results__more { text-align:center; padding:12px 0; }
.wz-results__fallback { text-align:center; padding:40px 20px; }
.wz-results__fallback p { color:var(--color-text-muted); margin-bottom:16px; }
.wzp-step { animation:wzp-step-in 0.35s cubic-bezier(0.4,0,0.2,1); }
@keyframes wzp-step-in { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
html[data-theme="dark"] .wzp-card,body[data-theme="dark"] .wzp-card { background:rgba(30,30,30,0.85); border-color:rgba(255,255,255,0.08); }
html[data-theme="dark"] .wz-results__fallback-intro,body[data-theme="dark"] .wz-results__fallback-intro { background:rgba(146,64,14,0.15); color:#FDE68A; }

/* ==========================================================================
   PREMIUM FOOTER — v5.0
   Trust strip, 4-col grid, social icons, payment badges, bottom bar
   ========================================================================== */

/* ── Trust Strip ── */
.ft-trust {
    background: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
    padding: 28px 0;
}
.ft-trust__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.ft-trust__item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ft-trust__item svg {
    flex-shrink: 0;
    color: var(--color-primary);
}
.ft-trust__item div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ft-trust__item strong {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text);
}
.ft-trust__item span {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   PREMIUM FOOTER v3.0
   Sections: Newsletter CTA → Trust Bar → 4-Column Main → Bottom Bar
   ========================================================================== */

/* ── Newsletter CTA Band ── */
.ft-cta {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    padding: 0;
    position: relative;
    overflow: hidden;
}
.ft-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    pointer-events: none;
}
.ft-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 0;
    position: relative;
    z-index: 1;
}
.ft-cta__text {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #fff;
    min-width: 0;
}
.ft-cta__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    opacity: .85;
}
.ft-cta__text strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.ft-cta__text span {
    display: block;
    font-size: 0.8125rem;
    opacity: .8;
    margin-top: 2px;
}
.ft-cta__form {
    display: flex;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.15);
}
.ft-cta__form input {
    width: 260px;
    padding: 14px 18px;
    border: none;
    font-size: 0.875rem;
    background: #fff;
    color: #111;
    outline: none;
}
.ft-cta__form input::placeholder { color: #9ca3af; }
.ft-cta__form button {
    padding: 14px 28px;
    border: none;
    background: #111827;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 200ms ease;
}
.ft-cta__form button:hover { background: #1f2937; }

/* ── Trust Bar ── */
.ft-trust {
    background: #f0fdfa;
    border-top: 1px solid #ccfbf1;
    border-bottom: 1px solid #e5e7eb;
    padding: 20px 0;
}
.ft-trust__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.ft-trust__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.ft-trust__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.ft-trust__item svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: #0d9488;
}
.ft-trust__item strong {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}
.ft-trust__item span {
    display: block;
    font-size: 0.6875rem;
    color: #6b7280;
    margin-top: 1px;
}

/* ── Main Footer ── */
.ft-main {
    background: #111827;
    color: #d1d5db;
    padding: 52px 0 40px;
}
.ft-main__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 48px;
}

/* Column Titles */
.ft-col__title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #f9fafb;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 20px;
    padding-bottom: 0;
}
.ft-col__title::after {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background: #0d9488;
    border-radius: 2px;
    margin-top: 12px;
}

/* Column Links */
.ft-col__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ft-col__links li a {
    font-size: 0.8125rem;
    color: #9ca3af;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0;
    transition: color 180ms ease, gap 180ms ease;
}
.ft-col__links li a::before {
    content: '';
    width: 0;
    height: 2px;
    background: #0d9488;
    border-radius: 2px;
    transition: width 180ms ease;
    flex-shrink: 0;
}
.ft-col__links li a:hover {
    color: #fff;
    gap: 8px;
}
.ft-col__links li a:hover::before {
    width: 12px;
}

/* Brand Column */
.ft-col--brand { padding-right: 24px; }
.ft-logo { margin-bottom: 16px; }
.ft-logo img {
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .9;
}
.ft-logo strong {
    font-size: 1.375rem;
    color: #fff;
    letter-spacing: -0.02em;
}
.ft-brand__desc {
    font-size: 0.8125rem;
    color: #9ca3af;
    line-height: 1.7;
    margin: 0 0 20px;
}

/* Brand Contact */
.ft-brand__contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.ft-brand__contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: #9ca3af;
    text-decoration: none;
    transition: color 180ms ease;
}
.ft-brand__contact a:hover { color: #fff; }
.ft-brand__contact svg { opacity: .6; flex-shrink: 0; }

/* Social Icons */
.ft-social {
    display: flex;
    gap: 8px;
}
.ft-social__link {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    color: #9ca3af;
    transition: all 200ms ease;
}
.ft-social__link svg {
    width: 18px;
    height: 18px;
}
.ft-social__link:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.ft-social--instagram:hover { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.ft-social--facebook:hover { background: #1877f2; }
.ft-social--twitter:hover { background: #000; }
.ft-social--tiktok:hover { background: #010101; }
.ft-social--youtube:hover { background: #ff0000; }
.ft-social--whatsapp:hover { background: #25d366; }

/* Contact Column */
.ft-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ft-contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.8125rem;
    color: #9ca3af;
    line-height: 1.6;
}
.ft-contact li svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #0d9488;
    margin-top: 2px;
}
.ft-contact li a {
    color: #9ca3af;
    text-decoration: none;
    transition: color 180ms ease;
}
.ft-contact li a:hover { color: #fff; }

/* ── Bottom Bar ── */
.ft-bottom {
    background: #0a0f1a;
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}
.ft-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.ft-bottom__copy {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}
.ft-bottom__copy a {
    color: #9ca3af;
    text-decoration: none;
    font-weight: 600;
}
.ft-bottom__copy a:hover { color: #fff; }
.ft-bottom__seller {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}
.ft-bottom__seller span {
    font-size: 0.6875rem;
    color: #4b5563;
    padding: 0 12px;
    border-right: 1px solid rgba(255,255,255,.08);
    line-height: 1;
}
.ft-bottom__seller span:last-child { border-right: none; }
.ft-bottom__seller span:first-child { padding-left: 0; }
.ft-bottom__pay {
    display: flex;
    gap: 6px;
}
.ft-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: #6b7280;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    transition: border-color 200ms ease;
}
.ft-pay:hover { border-color: rgba(255,255,255,.2); }

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
    .ft-cta__inner { flex-direction: column; text-align: center; }
    .ft-cta__text { justify-content: center; }
    .ft-cta__form { width: 100%; max-width: 420px; }
    .ft-cta__form input { flex: 1; width: auto; min-width: 0; }
    .ft-trust__row { grid-template-columns: repeat(2, 1fr); }
    .ft-main__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .ft-col--brand { padding-right: 0; }
}

/* ── Mobile (≤480px) ── */
@media (max-width: 480px) {
    /* CTA */
    .ft-cta__icon { display: none; }
    .ft-cta__text { flex-direction: column; }
    .ft-cta__form { flex-direction: column; border-radius: 12px; }
    .ft-cta__form input { width: 100%; border-radius: 12px 12px 0 0; }
    .ft-cta__form button { border-radius: 0 0 12px 12px; padding: 14px; }

    /* Trust */
    .ft-trust__row { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ft-trust__item { padding: 10px 12px; gap: 10px; }
    .ft-trust__item svg { width: 22px; height: 22px; }
    .ft-trust__item strong { font-size: 0.75rem; }
    .ft-trust__item span { font-size: 0.625rem; }

    /* Main Grid — Brand full → Links 2-col → Contact full centered */
    .ft-main { padding: 36px 0 28px; }
    .ft-main__grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px;
    }
    /* Brand: full width row 1 */
    .ft-col--brand {
        grid-column: 1 / -1;
        text-align: center;
        padding-right: 0;
        padding-bottom: 24px;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .ft-logo { display: flex; justify-content: center; }
    .ft-brand__desc { text-align: center; }
    .ft-brand__contact { align-items: center; }
    .ft-social { justify-content: center; }

    /* Hızlı Bağlantılar + Yasal: side by side in row 2 */
    /* (they naturally fall into the 2-col grid) */

    /* Contact: full width row 3, centered */
    .ft-col--contact {
        grid-column: 1 / -1;
        text-align: center;
        padding-top: 24px;
        border-top: 1px solid rgba(255,255,255,.06);
    }
    .ft-col--contact .ft-col__title::after { margin: 8px auto 0; }
    .ft-col--contact .ft-contact { align-items: center; }
    .ft-col--contact .ft-contact li { justify-content: center; }

    /* Bottom */
    .ft-bottom__inner { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
    .ft-bottom__seller { justify-content: center; flex-wrap: wrap; }
    .ft-bottom__seller span { padding: 0 8px; font-size: 0.625rem; }
    .ft-bottom__pay { justify-content: center; }
    .ft-bottom { padding-bottom: 72px; }
}

/* Footer fills to bottom - no white gap */
.ft { background: #111827; }
.ft-bottom { margin-bottom: 0; }
body, html, #page { background: #0a0f1a; }
#page { min-height: 100vh; }
#content { background: var(--color-bg, #fff); }
.site-header { background: var(--color-bg, #fff); }
.site-footer { margin-top: 0; }

/* ── Dark Mode (footer is already dark, trust bar needs override) ── */
html[data-theme="dark"] .ft-cta,
body[data-theme="dark"] .ft-cta { background: linear-gradient(135deg, #0f766e 0%, #064e3b 100%); }
html[data-theme="dark"] .ft-trust,
body[data-theme="dark"] .ft-trust { background: #1f2937; border-color: #374151; }
html[data-theme="dark"] .ft-trust__item,
body[data-theme="dark"] .ft-trust__item { background: #111827; border-color: #374151; }
html[data-theme="dark"] .ft-trust__item strong,
body[data-theme="dark"] .ft-trust__item strong { color: #f3f4f6; }
html[data-theme="dark"] .ft-main,
body[data-theme="dark"] .ft-main { background: #0a0e17; }
html[data-theme="dark"] .ft-bottom,
body[data-theme="dark"] .ft-bottom { background: #050810; }


/* ==========================================================================
   LEGAL PAGES — Premium Layout
   Sidebar TOC + Clean Article + Seller Card
   ========================================================================== */

/* ── Breadcrumb ── */
.lp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
.lp-breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.lp-breadcrumb a:hover { color: var(--color-primary); }
.lp-breadcrumb span { color: var(--color-text); font-weight: 500; }
.lp-breadcrumb svg { opacity: 0.4; }

/* ── Layout ── */
.lp-main { padding-bottom: 60px; }
.lp-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: start;
}

/* ── Sidebar ── */
.lp-sidebar__sticky {
    position: sticky;
    top: calc(var(--header-height, 64px) + 20px);
}
.lp-sidebar__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--color-border);
}
.lp-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 24px;
}
.lp-sidebar__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    line-height: 1.3;
}
.lp-sidebar__link svg { flex-shrink: 0; opacity: 0.5; }
.lp-sidebar__link:hover {
    color: var(--color-text);
    background: var(--color-bg-light);
}
.lp-sidebar__link:hover svg { opacity: 0.8; }
.lp-sidebar__link.is-active {
    color: var(--color-primary);
    background: rgba(20, 184, 166, 0.06);
    font-weight: 600;
}
.lp-sidebar__link.is-active svg { opacity: 1; color: var(--color-primary); }

/* ── Seller Card ── */
.lp-seller-card {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    font-size: 0.75rem;
}
.lp-seller-card__title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin: 0 0 12px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--color-border);
}
.lp-seller-card__row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.lp-seller-card__row:last-child { border-bottom: 0; }
.lp-seller-card__row span {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
}
.lp-seller-card__row strong {
    font-weight: 600;
    color: var(--color-text);
    word-break: break-word;
}

/* ── Content Area ── */
.lp-content {
    min-width: 0;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Header */
.lp-content__header {
    padding: 28px 36px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-light);
}
.lp-content__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.lp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: var(--radius-full);
}
.lp-badge--legal {
    background: rgba(20, 184, 166, 0.08);
    color: var(--color-primary-dark);
    border: 1px solid rgba(20, 184, 166, 0.15);
}
.lp-meta-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6875rem;
    color: var(--color-text-light);
}
.lp-content__title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
}
.lp-content__actions {
    margin-top: 14px;
}
.lp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    line-height: 1.4;
}
.lp-btn--primary {
    background: var(--color-primary);
    color: #fff;
}
.lp-btn--primary:hover { background: var(--color-primary-dark); color: #fff; }
.lp-btn--ghost {
    background: var(--color-bg-white);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.lp-btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Body */
.lp-content__body {
    padding: 32px 36px 40px;
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--color-text);
}
.lp-content__body h2 {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 40px 0 16px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    letter-spacing: -0.01em;
}
.lp-content__body h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.lp-content__body h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 28px 0 10px;
    padding-left: 12px;
    border-left: 3px solid var(--color-primary);
}
.lp-content__body h4 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 20px 0 8px;
}
.lp-content__body p {
    margin: 0 0 16px;
    color: var(--color-text);
}
.lp-content__body ul, .lp-content__body ol {
    margin: 0 0 16px;
    padding-left: 24px;
}
.lp-content__body li {
    margin-bottom: 6px;
    line-height: 1.7;
}
.lp-content__body strong { font-weight: 700; }
.lp-content__body a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.lp-content__body a:hover { color: var(--color-primary-dark); }

/* Tables in legal content */
.lp-content__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
    font-size: 0.8125rem;
}
.lp-content__body table th,
.lp-content__body table td {
    padding: 10px 14px;
    text-align: left;
    border: 1px solid var(--color-border);
}
.lp-content__body table th {
    background: var(--color-bg-light);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}
.lp-content__body table td { vertical-align: top; }
.lp-content__body table tr:nth-child(even) td {
    background: rgba(0,0,0,0.015);
}

/* Info/Warning Boxes */
.lp-content__body .legal-notice,
.lp-content__body .legal-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin: 16px 0 20px;
    font-size: 0.8125rem;
    line-height: 1.6;
}
.lp-content__body .legal-notice {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.15);
    color: #92400e;
}
.lp-content__body .legal-info {
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.15);
    color: #1e40af;
}

/* ── Contact CTA ── */
.lp-contact-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 24px 36px;
    background: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
}
.lp-contact-cta__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 184, 166, 0.08);
    border-radius: var(--radius-lg);
    color: var(--color-primary);
    flex-shrink: 0;
}
.lp-contact-cta__text { flex: 1; min-width: 0; }
.lp-contact-cta__text strong {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 2px;
}
.lp-contact-cta__text p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
.lp-contact-cta__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Mobile Responsive ── */
@media (max-width: 1024px) {
    .lp-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .lp-sidebar { display: none; }
    .lp-content__header { padding: 20px 20px 16px; }
    .lp-content__body { padding: 20px 20px 32px; }
    .lp-content__title { font-size: 1.375rem; }
    .lp-contact-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }
    .lp-contact-cta__actions { width: 100%; }
    .lp-contact-cta__actions .lp-btn { flex: 1; justify-content: center; }
}
@media (max-width: 768px) {
    .lp-content__body { font-size: 0.875rem; }
    .lp-content__body h2 { font-size: 1.1875rem; }
    .lp-content__body h3 { font-size: 1rem; }
}

/* ── Print ── */
@media print {
    .site-header, .site-footer, .lp-sidebar, .lp-breadcrumb,
    .lp-content__actions, .lp-contact-cta, .mobile-navbar { display: none !important; }
    .lp-layout { grid-template-columns: 1fr !important; }
    .lp-content { border: none !important; box-shadow: none !important; }
    .lp-content__body { padding: 0 !important; font-size: 11pt; }
}

/* ── Dark mode ── */
html[data-theme="dark"] .lp-content,
body[data-theme="dark"] .lp-content {
    background: var(--color-bg-card);
    border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .lp-content__header,
body[data-theme="dark"] .lp-content__header {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .lp-seller-card,
body[data-theme="dark"] .lp-seller-card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .lp-contact-cta,
body[data-theme="dark"] .lp-contact-cta {
    background: rgba(255,255,255,0.02);
}


/* ==========================================================================
   MY ACCOUNT — Premium Dashboard (Trendyol/Hepsiburada style)
   ========================================================================== */

/* ── Layout ── */
.ab-account { display: grid; grid-template-columns: 280px 1fr; gap: 28px; padding: 24px 0; min-height: 60vh; }

/* ── Navigation Sidebar ── */
.ab-account-nav { background: #fff; border-radius: 16px; border: 1px solid #e5e7eb; overflow: hidden; height: fit-content; position: sticky; top: 100px; }
.ab-account-nav__profile { display: flex; align-items: center; gap: 12px; padding: 20px; border-bottom: 1px solid #f3f4f6; background: linear-gradient(135deg, #f0fdfa 0%, #f5f3ff 100%); }
.ab-account-nav__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #0d9488; }
.ab-account-nav__user { display: flex; flex-direction: column; min-width: 0; }
.ab-account-nav__user strong { font-size: 0.9rem; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-account-nav__user span { font-size: 0.75rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ab-account-nav__menu { list-style: none; margin: 0; padding: 8px; }
.ab-account-nav__item { margin: 0; }
.ab-account-nav__item a { list-style: none; }
.ab-account-nav__link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; color: #374151; text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: all 0.2s; }
.ab-account-nav__link:hover { background: #f3f4f6; color: #0d9488; }
.ab-account-nav__icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #f9fafb; flex-shrink: 0; transition: all 0.2s; }
.ab-account-nav__icon svg { color: #6b7280; transition: color 0.2s; }
.ab-account-nav__link:hover .ab-account-nav__icon { background: #f0fdfa; }
.ab-account-nav__link:hover .ab-account-nav__icon svg { color: #0d9488; }
.ab-account-nav__text { flex: 1; }
.ab-account-nav__arrow { color: #d1d5db; transition: all 0.2s; }
.ab-account-nav__link:hover .ab-account-nav__arrow { color: #0d9488; transform: translateX(2px); }

/* Active state */
.ab-account-nav__item.is-active .ab-account-nav__link,
.ab-account-nav__item.is-active > a { background: #f0fdfa; color: #0d9488; font-weight: 600; }
.ab-account-nav__item.is-active .ab-account-nav__icon { background: #ccfbf1; }
.ab-account-nav__item.is-active .ab-account-nav__icon svg { color: #0d9488; }
.ab-account-nav__item.is-active .ab-account-nav__arrow { color: #0d9488; }

/* Logout separator */
.ab-account-nav__item--logout { margin-top: 4px; padding-top: 8px; border-top: 1px solid #f3f4f6; }
.ab-account-nav__item--logout .ab-account-nav__link:hover { background: #fef2f2; color: #dc2626; }
.ab-account-nav__item--logout .ab-account-nav__link:hover .ab-account-nav__icon { background: #fee2e2; }
.ab-account-nav__item--logout .ab-account-nav__link:hover .ab-account-nav__icon svg { color: #dc2626; }

/* ── Dashboard Content ── */
.ab-account__content { min-width: 0; }
.ab-dash { display: flex; flex-direction: column; gap: 24px; }

/* Welcome Banner */
.ab-dash__welcome { display: flex; align-items: center; gap: 16px; padding: 24px; background: linear-gradient(135deg, #f0fdfa 0%, #ecfdf5 50%, #f5f3ff 100%); border-radius: 16px; border: 1px solid #d1fae5; }
.ab-dash__avatar img { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #0d9488; object-fit: cover; }
.ab-dash__greeting h2 { margin: 0; font-size: 1.25rem; color: #111827; font-weight: 600; }
.ab-dash__greeting h2 strong { color: #0d9488; }
.ab-dash__greeting p { margin: 4px 0 0; font-size: 0.85rem; color: #6b7280; }

/* Stats Cards */
.ab-dash__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ab-stat { display: flex; align-items: center; gap: 12px; padding: 18px 16px; background: #fff; border-radius: 14px; border: 1px solid #e5e7eb; text-decoration: none; transition: all 0.25s; }
.ab-stat:hover { border-color: #0d9488; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,148,136,0.1); }
.ab-stat__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
.ab-stat--total .ab-stat__icon { background: #f0fdfa; color: #0d9488; }
.ab-stat--processing .ab-stat__icon { background: #fef3c7; color: #d97706; }
.ab-stat--shipped .ab-stat__icon { background: #d1fae5; color: #059669; }
.ab-stat--return .ab-stat__icon { background: #fee2e2; color: #dc2626; }
.ab-stat__data { display: flex; flex-direction: column; }
.ab-stat__num { font-size: 1.4rem; font-weight: 700; color: #111827; line-height: 1; }
.ab-stat__label { font-size: 0.75rem; color: #6b7280; margin-top: 4px; }

/* Quick Actions */
.ab-dash__section-title { font-size: 1rem; font-weight: 600; color: #111827; margin: 0 0 14px; }
.ab-dash__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ab-action { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px; background: #fff; border-radius: 14px; border: 1px solid #e5e7eb; text-decoration: none; text-align: center; transition: all 0.25s; }
.ab-action:hover { border-color: #0d9488; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,148,136,0.08); }
.ab-action__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; }
.ab-action__icon--orders { background: #dbeafe; color: #2563eb; }
.ab-action__icon--fav { background: #fce7f3; color: #ec4899; }
.ab-action__icon--addr { background: #d1fae5; color: #059669; }
.ab-action__icon--account { background: #e0e7ff; color: #6366f1; }
.ab-action__icon--coupon { background: #fef3c7; color: #d97706; }
.ab-action__icon--support { background: #f3e8ff; color: #9333ea; }
.ab-action span { font-size: 0.825rem; font-weight: 500; color: #374151; }
.ab-action:hover span { color: #0d9488; }

/* Section Header */
.ab-dash__section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: -8px; }
.ab-dash__view-all { display: flex; align-items: center; gap: 4px; font-size: 0.825rem; color: #0d9488; text-decoration: none; font-weight: 500; }
.ab-dash__view-all:hover { text-decoration: underline; }

/* Recent Orders */
.ab-dash__orders { display: flex; flex-direction: column; gap: 10px; }
.ab-order-card { display: flex; align-items: center; gap: 14px; padding: 16px; background: #fff; border-radius: 14px; border: 1px solid #e5e7eb; text-decoration: none; transition: all 0.2s; }
.ab-order-card:hover { border-color: #0d9488; box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
.ab-order-card__thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #f9fafb; }
.ab-order-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ab-order-card__count { position: absolute; bottom: 2px; right: 2px; background: rgba(0,0,0,0.7); color: #fff; font-size: 0.625rem; padding: 2px 5px; border-radius: 6px; font-weight: 600; }
.ab-order-card__info { flex: 1; min-width: 0; }
.ab-order-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ab-order-card__id { font-size: 0.8rem; font-weight: 600; color: #111827; }
.ab-order-card__badge { font-size: 0.68rem; padding: 2px 8px; border-radius: 6px; font-weight: 600; }
.ab-order-card__badge--processing, .ab-order-card__badge--on-hold { background: #fef3c7; color: #92400e; }
.ab-order-card__badge--completed { background: #d1fae5; color: #065f46; }
.ab-order-card__badge--pending { background: #e0e7ff; color: #3730a3; }
.ab-order-card__badge--cancelled, .ab-order-card__badge--failed { background: #fee2e2; color: #991b1b; }
.ab-order-card__badge--refunded { background: #f3e8ff; color: #6b21a8; }
.ab-order-card__product { margin: 0; font-size: 0.825rem; color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-order-card__bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.ab-order-card__date { font-size: 0.75rem; color: #9ca3af; }
.ab-order-card__total { font-size: 0.85rem; font-weight: 700; color: #0d9488; }
.ab-order-card__arrow { color: #d1d5db; flex-shrink: 0; transition: all 0.2s; }
.ab-order-card:hover .ab-order-card__arrow { color: #0d9488; transform: translateX(2px); }

/* ── Endpoint Pages (Favorites, Coupons, Support) ── */
.ab-endpoint { }
.ab-endpoint__header { margin-bottom: 20px; }
.ab-endpoint__title { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 600; color: #111827; margin: 0; }
.ab-endpoint__title svg { color: #0d9488; }

/* Empty State */
.ab-empty-state { text-align: center; padding: 48px 20px; background: #f9fafb; border-radius: 16px; border: 2px dashed #e5e7eb; }
.ab-empty-state svg { color: #d1d5db; margin-bottom: 16px; }
.ab-empty-state h3 { font-size: 1.05rem; color: #374151; margin: 0 0 8px; }
.ab-empty-state p { font-size: 0.85rem; color: #6b7280; margin: 0 0 20px; }
.ab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: all 0.2s; border: none; cursor: pointer; }
.ab-btn--primary { background: #0d9488; color: #fff; }
.ab-btn--primary:hover { background: #0f766e; transform: translateY(-1px); }

/* Favorites Grid */
.ab-fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.ab-fav-loading { grid-column: 1/-1; text-align: center; padding: 40px; color: #6b7280; }
.ab-spinner { width: 32px; height: 32px; border: 3px solid #e5e7eb; border-top-color: #0d9488; border-radius: 50%; animation: ab-spin 0.6s linear infinite; margin: 0 auto 12px; }
@keyframes ab-spin { to { transform: rotate(360deg); } }

/* Favorites Card */
.ab-fav-card { background: #fff; border-radius: 14px; border: 1px solid #e5e7eb; overflow: hidden; transition: all 0.25s; }
.ab-fav-card:hover { border-color: #d1d5db; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.ab-fav-card__img-wrap { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #f9fafb; }
.ab-fav-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.ab-fav-card:hover .ab-fav-card__img-wrap img { transform: scale(1.05); }
.ab-fav-card__badge { position: absolute; top: 10px; left: 10px; font-size: 0.72rem; font-weight: 800; padding: 5px 10px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.3px; z-index: 2; line-height: 1; }
.ab-fav-card__badge--sale { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; box-shadow: 0 3px 10px rgba(239,68,68,0.35); animation: ab-badge-pulse 2s ease-in-out infinite; }
.ab-fav-card__badge--oos { background: #fef2f2; color: #dc2626; }
@keyframes ab-badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.ab-fav-card__remove { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.9); border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #6b7280; transition: all 0.2s; opacity: 0; }
.ab-fav-card:hover .ab-fav-card__remove { opacity: 1; }
.ab-fav-card__remove:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.ab-fav-card__info { padding: 12px 14px 14px; }
.ab-fav-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.82rem; font-weight: 500; color: #374151; text-decoration: none; line-height: 1.4; margin-bottom: 6px; }
.ab-fav-card__title:hover { color: #0d9488; }
.ab-fav-card__price { font-size: 0.88rem; font-weight: 700; color: #111827; margin-bottom: 10px; }
.ab-fav-card__price del { color: #9ca3af; font-weight: 400; font-size: 0.78rem; }
.ab-fav-card__price ins { text-decoration: none; color: #dc2626; }
.ab-fav-card__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: #0d9488; color: #fff; border-radius: 8px; font-size: 0.78rem; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.ab-fav-card__btn:hover { background: #0f766e; }
.ab-fav-card__oos-text { font-size: 0.78rem; color: #9ca3af; font-style: italic; }

/* ── İADE INFO BOX ── */
.ab-iade-info { background: linear-gradient(135deg, #f0f9ff, #f0fdfa); border: 1.5px solid #bae6fd; border-radius: 16px; padding: 24px; margin-top: 24px; }
.ab-iade-info__header { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; color: #0369a1; }
.ab-iade-info__header h4 { margin: 0; font-size: 1rem; font-weight: 700; }
.ab-iade-info__steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.ab-iade-info__step { display: flex; gap: 14px; align-items: flex-start; }
.ab-iade-info__num { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 32px; background: #0d9488; color: #fff; border-radius: 50%; font-size: 0.82rem; font-weight: 700; }
.ab-iade-info__step strong { display: block; font-size: 0.88rem; color: #111827; margin-bottom: 2px; }
.ab-iade-info__step p { margin: 0; font-size: 0.82rem; color: #6b7280; line-height: 1.5; }
.ab-iade-info__btn { display: inline-flex; align-items: center; gap: 8px; }
html[data-theme="dark"] .ab-iade-info { background: linear-gradient(135deg, #0c1a2e, #0a1f1a); border-color: #1e3a5f; }
html[data-theme="dark"] .ab-iade-info__header { color: #7dd3fc; }
html[data-theme="dark"] .ab-iade-info__step strong { color: #f3f4f6; }
html[data-theme="dark"] .ab-iade-info__step p { color: #9ca3af; }

/* ── COMPANION RETURNS PAGE PREMIUM OVERRIDE ── */
.almira-myaccount .abc-ret-page__title { font-size: 1.1rem; font-weight: 700; color: #111827; display: flex; align-items: center; gap: 8px; margin: 0 0 20px; }
.almira-myaccount .abc-ret-page__empty { background: linear-gradient(135deg, #f0fdfa, #ecfdf5); border: 1.5px solid #a7f3d0; border-radius: 16px; padding: 28px 24px; text-align: center; color: #065f46; font-size: 0.9rem; }
.almira-myaccount .abc-ret-card { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 14px; padding: 20px; margin-bottom: 14px; transition: all 0.2s; }
.almira-myaccount .abc-ret-card:hover { border-color: #0d9488; box-shadow: 0 4px 16px rgba(13,148,136,0.08); }
html[data-theme="dark"] .almira-myaccount .abc-ret-page__title { color: #f3f4f6; }
html[data-theme="dark"] .almira-myaccount .abc-ret-page__empty { background: rgba(13,148,136,0.08); border-color: #0d9488; color: #5eead4; }
html[data-theme="dark"] .almira-myaccount .abc-ret-card { background: #1f2937; border-color: #374151; }
.ab-endpoint__count { font-size: 0.82rem; font-weight: 500; color: #6b7280; margin-left: 6px; }
@media (max-width: 480px) {
    .ab-fav-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ab-fav-card__remove { opacity: 1; }
    .ab-fav-card__info { padding: 8px 10px 10px; }
}
html[data-theme="dark"] .ab-fav-card { background: #1f2937; border-color: #374151; }
html[data-theme="dark"] .ab-fav-card__title { color: #d1d5db; }
html[data-theme="dark"] .ab-fav-card__price { color: #f3f4f6; }
html[data-theme="dark"] .ab-fav-card__img-wrap { background: #111827; }
html[data-theme="dark"] .ab-fav-card__remove { background: rgba(31,41,55,0.9); border-color: #4b5563; color: #9ca3af; }

/* Coupon Cards */
.ab-coupon-grid { display: flex; flex-direction: column; gap: 12px; }
.ab-coupon-card { display: flex; border-radius: 14px; overflow: hidden; border: 1px solid #e5e7eb; background: #fff; transition: all 0.2s; }
.ab-coupon-card:hover { border-color: #0d9488; box-shadow: 0 4px 16px rgba(13,148,136,0.08); }
.ab-coupon-card__left { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 24px; background: linear-gradient(135deg, #0d9488, #0f766e); color: #fff; min-width: 110px; position: relative; }
.ab-coupon-card__left::after { content: ''; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: #fff; border-radius: 50%; }
.ab-coupon-card__discount { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.ab-coupon-card__type { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; margin-top: 2px; }
.ab-coupon-card__right { flex: 1; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
.ab-coupon-card__desc { margin: 0; font-size: 0.85rem; color: #374151; font-weight: 500; }
.ab-coupon-card__min, .ab-coupon-card__exp { font-size: 0.75rem; color: #6b7280; }
.ab-coupon-card__copy { display: inline-flex; align-items: center; gap: 6px; background: #f0fdfa; border: 1px dashed #0d9488; padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: all 0.2s; margin-top: 4px; width: fit-content; }
.ab-coupon-card__copy:hover { background: #ccfbf1; }
.ab-coupon-card__copy code { font-size: 0.8rem; font-weight: 700; color: #0d9488; letter-spacing: 1px; }
.ab-coupon-card__copy svg { color: #0d9488; }

/* Support Grid */
.ab-support-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 24px; }
.ab-support-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px 16px; background: #fff; border-radius: 14px; border: 1px solid #e5e7eb; text-decoration: none; transition: all 0.25s; }
.ab-support-card:hover { border-color: #0d9488; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,148,136,0.08); }
.ab-support-card__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; }
.ab-support-card__icon--phone { background: #dbeafe; color: #2563eb; }
.ab-support-card__icon--whatsapp { background: #d1fae5; color: #22c55e; }
.ab-support-card__icon--email { background: #fce7f3; color: #ec4899; }
.ab-support-card__icon--faq { background: #fef3c7; color: #d97706; }
.ab-support-card h4 { margin: 0; font-size: 0.9rem; color: #111827; }
.ab-support-card p { margin: 0; font-size: 0.8rem; color: #6b7280; }
.ab-support-card__hours { font-size: 0.7rem; color: #9ca3af; }

/* Support Info */
.ab-support-info { background: #fff; border-radius: 14px; border: 1px solid #e5e7eb; padding: 24px; }
.ab-support-info h3 { font-size: 1rem; font-weight: 600; color: #111827; margin: 0 0 18px; }
.ab-support-steps { display: flex; flex-direction: column; gap: 18px; }
.ab-support-step { display: flex; align-items: flex-start; gap: 14px; }
.ab-support-step__num { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #0d9488; color: #fff; font-size: 0.8rem; font-weight: 700; flex-shrink: 0; }
.ab-support-step strong { font-size: 0.85rem; color: #111827; }
.ab-support-step p { margin: 2px 0 0; font-size: 0.8rem; color: #6b7280; }

/* ── WC Default Pages Styling inside .ab-account ── */
.ab-account .woocommerce-MyAccount-content .woocommerce-orders-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ab-account .woocommerce-MyAccount-content .woocommerce-orders-table th { background: #f9fafb; font-size: 0.78rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.3px; padding: 12px 14px; border-bottom: 2px solid #e5e7eb; }
.ab-account .woocommerce-MyAccount-content .woocommerce-orders-table td { padding: 14px; border-bottom: 1px solid #f3f4f6; font-size: 0.85rem; color: #374151; }
.ab-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-button { display: inline-flex; padding: 6px 14px; background: #0d9488; color: #fff; border-radius: 8px; font-size: 0.78rem; font-weight: 500; text-decoration: none; transition: background 0.2s; }
.ab-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-button:hover { background: #0f766e; }
.ab-account .woocommerce-MyAccount-content .woocommerce-address-fields input,
.ab-account .woocommerce-MyAccount-content .woocommerce-address-fields select,
.ab-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm input,
.ab-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm select { padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 10px; font-size: 0.85rem; transition: border-color 0.2s; }
.ab-account .woocommerce-MyAccount-content .woocommerce-address-fields input:focus,
.ab-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm input:focus { border-color: #0d9488; outline: none; box-shadow: 0 0 0 3px rgba(13,148,136,0.1); }
.ab-account .woocommerce-MyAccount-content button[type="submit"],
.ab-account .woocommerce-MyAccount-content .woocommerce-Button { background: #0d9488; color: #fff; padding: 12px 28px; border: none; border-radius: 10px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.ab-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.ab-account .woocommerce-MyAccount-content .woocommerce-Button:hover { background: #0f766e; transform: translateY(-1px); }

/* ==========================================================================
   MY ACCOUNT — ALL SUB-PAGES PREMIUM STYLING
   ========================================================================== */

/* ── Scope: almira-myaccount body class ── */

/* Global Content Area */
.almira-myaccount .woocommerce-MyAccount-content { font-size: 0.88rem; color: #374151; }
.almira-myaccount .woocommerce-MyAccount-content > h2,
.almira-myaccount .woocommerce-MyAccount-content > h3 { font-size: 1.15rem; font-weight: 700; color: #111827; margin: 0 0 20px; display: flex; align-items: center; gap: 8px; }

/* WC default info text */
.almira-myaccount .woocommerce-MyAccount-content > p:first-of-type { font-size: 0.85rem; color: #6b7280; line-height: 1.6; margin-bottom: 24px; }

/* ── ADDRESSES PAGE (ab-addresses) ── */
.ab-addresses__desc { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: #6b7280; margin: 0 0 20px; line-height: 1.5; }
.ab-addresses__desc svg { flex-shrink: 0; color: #9ca3af; }
.ab-addresses__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.ab-address-card { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 16px; padding: 20px; transition: all 0.25s; }
.ab-address-card:hover { border-color: #0d9488; box-shadow: 0 4px 20px rgba(13,148,136,0.08); }

.ab-address-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6; }
.ab-address-card__title-row { display: flex; align-items: center; gap: 10px; }
.ab-address-card__icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: linear-gradient(135deg, #f0fdfa, #ccfbf1); border-radius: 10px; color: #0d9488; flex-shrink: 0; }
.ab-address-card__icon svg { width: 18px; height: 18px; }
.ab-address-card__title { font-size: 0.95rem; font-weight: 700; color: #111827; margin: 0; }

.ab-address-card__edit { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 600; color: #0d9488; text-decoration: none; padding: 7px 14px; border-radius: 8px; background: #f0fdfa; transition: all 0.2s; white-space: nowrap; }
.ab-address-card__edit:hover { background: #ccfbf1; color: #0f766e; }

.ab-address-card__body address { font-style: normal; font-size: 0.86rem; color: #4b5563; line-height: 1.8; }

.ab-address-card__placeholder { text-align: center; padding: 24px 16px; }
.ab-address-card__placeholder svg { width: 28px; height: 28px; color: #d1d5db; margin-bottom: 10px; }
.ab-address-card__placeholder p { color: #9ca3af; font-size: 0.84rem; margin: 0 0 14px; line-height: 1.5; }
.ab-address-card__add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; background: #f0fdfa; color: #0d9488; border-radius: 10px; font-size: 0.84rem; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.ab-address-card__add-btn:hover { background: #ccfbf1; }

/* ── ORDERS PAGE (ab-orders) ── */
.ab-orders__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ab-orders__title { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; font-weight: 700; color: #111827; margin: 0; }
.ab-orders__count { font-size: 0.78rem; font-weight: 600; color: #6b7280; background: #f3f4f6; padding: 4px 12px; border-radius: 20px; }

.ab-orders__list { display: flex; flex-direction: column; gap: 14px; }

.ab-order-card { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 16px; padding: 20px; transition: all 0.2s; }
.ab-order-card:hover { border-color: #d1d5db; box-shadow: 0 4px 16px rgba(0,0,0,0.04); }

.ab-order-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ab-order-card__meta { display: flex; align-items: center; gap: 14px; }
.ab-order-card__id { font-size: 0.92rem; font-weight: 700; color: #111827; }
.ab-order-card__date { display: flex; align-items: center; gap: 4px; font-size: 0.78rem; color: #9ca3af; }
.ab-order-card__status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: 20px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2px; }

.ab-order-card__body { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; margin-bottom: 14px; }
.ab-order-card__thumbs { display: flex; gap: 6px; align-items: center; }
.ab-order-card__thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; border: 1px solid #f3f4f6; }
.ab-order-card__more { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #f9fafb; border-radius: 10px; font-size: 0.78rem; font-weight: 600; color: #6b7280; border: 1px dashed #d1d5db; }
.ab-order-card__summary { text-align: right; }
.ab-order-card__items { display: block; font-size: 0.78rem; color: #9ca3af; margin-bottom: 2px; }
.ab-order-card__total { font-size: 1rem; font-weight: 700; color: #111827; }

.ab-order-card__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ab-order-card__btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 18px; border-radius: 10px; font-size: 0.8rem; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.ab-order-card__btn--view { background: #0d9488; color: #fff; }
.ab-order-card__btn--view:hover { background: #0f766e; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13,148,136,0.2); }
.ab-order-card__btn--action { background: #f3f4f6; color: #374151; }
.ab-order-card__btn--action:hover { background: #e5e7eb; }
.ab-order-card__btn--cancel { background: #fef2f2; color: #dc2626; }
.ab-order-card__btn--cancel:hover { background: #fee2e2; }

/* Orders empty state */
.ab-orders-empty { text-align: center; padding: 48px 20px; background: linear-gradient(135deg, #f0fdfa, #ecfdf5); border: 1.5px solid #a7f3d0; border-radius: 20px; }
.ab-orders-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: #fff; border-radius: 50%; margin-bottom: 20px; color: #d1d5db; box-shadow: 0 4px 20px rgba(0,0,0,0.04); }
.ab-orders-empty__title { font-size: 1.1rem; font-weight: 700; color: #111827; margin: 0 0 8px; }
.ab-orders-empty__desc { font-size: 0.88rem; color: #6b7280; margin: 0 0 24px; }
.ab-orders-empty__btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: #0d9488; color: #fff; border-radius: 12px; font-size: 0.88rem; font-weight: 700; text-decoration: none; transition: all 0.25s; }
.ab-orders-empty__btn:hover { background: #0f766e; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(13,148,136,0.25); }

/* Orders pagination */
.ab-orders__pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #f3f4f6; }
.ab-orders__page-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; border-radius: 10px; background: #f3f4f6; color: #374151; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.ab-orders__page-btn:hover { background: #e5e7eb; }
.ab-orders__page-info { font-size: 0.82rem; color: #9ca3af; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .ab-addresses__grid { grid-template-columns: 1fr; gap: 14px; }
    .ab-address-card { padding: 16px; }
    .ab-address-card__icon { width: 32px; height: 32px; border-radius: 8px; }
    .ab-address-card__icon svg { width: 16px; height: 16px; }
    .ab-address-card__title { font-size: 0.9rem; }
    .ab-address-card__placeholder svg { width: 24px; height: 24px; }
    .ab-address-card__placeholder p { font-size: 0.82rem; }
    .ab-address-card__add-btn { padding: 9px 16px; font-size: 0.82rem; }
    .ab-order-card__top { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ab-order-card__body { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ab-order-card__summary { text-align: left; }
    .ab-order-card__actions { width: 100%; }
    .ab-order-card__btn { flex: 1; justify-content: center; }
}

/* ── DARK MODE ── */
html[data-theme="dark"] .ab-address-card { background: #1f2937; border-color: #374151; }
html[data-theme="dark"] .ab-address-card:hover { border-color: #14b8a6; }
html[data-theme="dark"] .ab-address-card__title { color: #f3f4f6; }
html[data-theme="dark"] .ab-address-card__icon { background: linear-gradient(135deg, #0a2520, #0c3028); }
html[data-theme="dark"] .ab-address-card__header { border-color: #374151; }
html[data-theme="dark"] .ab-address-card__body address { color: #d1d5db; }
html[data-theme="dark"] .ab-address-card__placeholder svg { color: #4b5563; }
html[data-theme="dark"] .ab-address-card__placeholder p { color: #6b7280; }
html[data-theme="dark"] .ab-addresses__desc { color: #9ca3af; }

html[data-theme="dark"] .ab-order-card { background: #1f2937; border-color: #374151; }
html[data-theme="dark"] .ab-order-card:hover { border-color: #4b5563; }
html[data-theme="dark"] .ab-order-card__id { color: #f3f4f6; }
html[data-theme="dark"] .ab-order-card__total { color: #f3f4f6; }
html[data-theme="dark"] .ab-order-card__body { border-color: #374151; }
html[data-theme="dark"] .ab-order-card__thumb { border-color: #374151; }
html[data-theme="dark"] .ab-order-card__more { background: #111827; border-color: #4b5563; color: #9ca3af; }
html[data-theme="dark"] .ab-orders__title { color: #f3f4f6; }
html[data-theme="dark"] .ab-orders__count { background: #374151; color: #d1d5db; }
html[data-theme="dark"] .ab-orders-empty { background: linear-gradient(135deg, #0a1f1a, #0c1f1a); border-color: #065f46; }
html[data-theme="dark"] .ab-orders-empty__icon { background: #111827; }
html[data-theme="dark"] .ab-orders-empty__title { color: #f3f4f6; }

/* ── ORDERS PAGE ── */
.almira-myaccount .woocommerce-orders-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 14px; overflow: hidden; border: 1px solid #e5e7eb; }
.almira-myaccount .woocommerce-orders-table thead th { background: linear-gradient(135deg, #f8fafc, #f1f5f9); font-size: 0.75rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; padding: 14px 16px; border-bottom: 2px solid #e2e8f0; text-align: left; }
.almira-myaccount .woocommerce-orders-table tbody td { padding: 16px; border-bottom: 1px solid #f1f5f9; font-size: 0.85rem; color: #334155; vertical-align: middle; }
.almira-myaccount .woocommerce-orders-table tbody tr { transition: background 0.15s; }
.almira-myaccount .woocommerce-orders-table tbody tr:hover { background: #f0fdfa; }
.almira-myaccount .woocommerce-orders-table tbody tr:last-child td { border-bottom: none; }

/* Order status badges */
.almira-myaccount .woocommerce-orders-table .order-status { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; text-transform: capitalize; letter-spacing: 0.2px; }

/* Order action buttons */
.almira-myaccount .woocommerce-orders-table .woocommerce-button { display: inline-flex; align-items: center; gap: 4px; padding: 7px 16px; background: #0d9488; color: #fff; border-radius: 8px; font-size: 0.76rem; font-weight: 600; text-decoration: none; transition: all 0.2s; border: none; }
.almira-myaccount .woocommerce-orders-table .woocommerce-button:hover { background: #0f766e; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13,148,136,0.2); }
.almira-myaccount .woocommerce-orders-table .woocommerce-button.cancel { background: #fef2f2; color: #dc2626; }
.almira-myaccount .woocommerce-orders-table .woocommerce-button.cancel:hover { background: #fee2e2; }

/* No orders message */
.almira-myaccount .woocommerce-MyAccount-content .woocommerce-info,
.almira-myaccount .woocommerce-MyAccount-content .woocommerce-message { background: linear-gradient(135deg, #f0fdfa, #ecfdf5); border: 1.5px solid #a7f3d0; border-radius: 16px; padding: 28px 24px; color: #065f46; font-size: 0.9rem; display: flex; align-items: center; gap: 12px; line-height: 1.6; box-shadow: 0 2px 12px rgba(16,185,129,0.06); }
.almira-myaccount .woocommerce-MyAccount-content .woocommerce-info::before,
.almira-myaccount .woocommerce-MyAccount-content .woocommerce-message::before { color: #10b981; font-size: 1.2rem; flex-shrink: 0; }
.almira-myaccount .woocommerce-MyAccount-content .woocommerce-info a.button,
.almira-myaccount .woocommerce-MyAccount-content .woocommerce-message a.button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; background: #0d9488; color: #fff !important; border-radius: 10px; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: all 0.2s; margin-left: auto; white-space: nowrap; border: none; }
.almira-myaccount .woocommerce-MyAccount-content .woocommerce-info a.button:hover,
.almira-myaccount .woocommerce-MyAccount-content .woocommerce-message a.button:hover { background: #0f766e; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(13,148,136,0.25); }
.almira-myaccount .woocommerce-MyAccount-content .woocommerce-error { background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 16px 20px; color: #dc2626; font-size: 0.85rem; }

/* ── ORDER DETAIL PAGE ── */
.almira-myaccount .woocommerce-order-details { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px; margin-bottom: 24px; }
.almira-myaccount .woocommerce-order-details__title { font-size: 1.05rem; font-weight: 700; color: #111827; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6; }

.almira-myaccount .woocommerce-table--order-details { width: 100%; border-collapse: collapse; }
.almira-myaccount .woocommerce-table--order-details th { font-size: 0.78rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.3px; padding: 12px 0; border-bottom: 1.5px solid #e5e7eb; }
.almira-myaccount .woocommerce-table--order-details td { padding: 14px 0; border-bottom: 1px solid #f3f4f6; font-size: 0.85rem; color: #374151; }
.almira-myaccount .woocommerce-table--order-details .product-name a { color: #0d9488; text-decoration: none; font-weight: 500; }
.almira-myaccount .woocommerce-table--order-details .product-name a:hover { text-decoration: underline; }
.almira-myaccount .woocommerce-table--order-details tfoot th { text-align: left; font-size: 0.82rem; }
.almira-myaccount .woocommerce-table--order-details tfoot td { text-align: right; font-weight: 600; }

/* Order addresses on detail */
.almira-myaccount .woocommerce-customer-details .addresses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.almira-myaccount .woocommerce-customer-details .woocommerce-column { background: #f9fafb; border-radius: 14px; padding: 20px; }
.almira-myaccount .woocommerce-customer-details .woocommerce-column__title { font-size: 0.88rem; font-weight: 700; color: #111827; margin: 0 0 10px; }
.almira-myaccount .woocommerce-customer-details address { font-style: normal; font-size: 0.82rem; color: #4b5563; line-height: 1.7; }

/* ── EDIT ACCOUNT PAGE ── */
.almira-myaccount .woocommerce-EditAccountForm { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 28px; }

.almira-myaccount .woocommerce-EditAccountForm .form-row { margin-bottom: 18px; }
.almira-myaccount .woocommerce-EditAccountForm label { display: block; font-size: 0.92rem; font-weight: 600; color: #374151; margin-bottom: 6px; }
.almira-myaccount .woocommerce-EditAccountForm input[type="text"],
.almira-myaccount .woocommerce-EditAccountForm input[type="email"],
.almira-myaccount .woocommerce-EditAccountForm input[type="password"],
.almira-myaccount .woocommerce-EditAccountForm select { width: 100%; padding: 12px 16px; border: 1.5px solid #d1d5db; border-radius: 12px; font-size: 0.88rem; color: #111827; background: #fff; transition: all 0.2s; outline: none; }
.almira-myaccount .woocommerce-EditAccountForm input:focus,
.almira-myaccount .woocommerce-EditAccountForm select:focus { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,0.12); }

/* Fieldset (password change) */
.almira-myaccount .woocommerce-EditAccountForm fieldset { border: 1.5px solid #e5e7eb; border-radius: 14px; padding: 20px 24px; margin: 24px 0; }
.almira-myaccount .woocommerce-EditAccountForm fieldset legend { font-size: 0.88rem; font-weight: 700; color: #111827; padding: 0 8px; }

/* Save button */
.almira-myaccount .woocommerce-EditAccountForm button[type="submit"],
.almira-myaccount .woocommerce-EditAccountForm .woocommerce-Button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 32px; background: #0d9488; color: #fff; border: none; border-radius: 12px; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: all 0.25s; }
.almira-myaccount .woocommerce-EditAccountForm button[type="submit"]:hover { background: #0f766e; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(13,148,136,0.2); }

/* ── EDIT ADDRESS PAGE ── */
.almira-myaccount .woocommerce-address-fields { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 32px; }

.almira-myaccount .woocommerce-address-fields .form-row { margin-bottom: 0; }
.almira-myaccount .woocommerce-address-fields label { display: block; font-size: 0.88rem; font-weight: 600; color: #374151; margin-bottom: 7px; line-height: 1.4; }
.almira-myaccount .woocommerce-address-fields label .required { color: #dc2626; }
.almira-myaccount .woocommerce-address-fields label .optional { font-weight: 400; font-size: 0.78rem; color: #9ca3af; margin-left: 2px; }
.almira-myaccount .woocommerce-address-fields input[type="text"],
.almira-myaccount .woocommerce-address-fields input[type="tel"],
.almira-myaccount .woocommerce-address-fields input[type="email"],
.almira-myaccount .woocommerce-address-fields select { width: 100%; padding: 12px 16px; border: 1.5px solid #d1d5db; border-radius: 12px; font-size: 0.88rem; color: #111827; background: #fff; transition: all 0.2s; outline: none; }
.almira-myaccount .woocommerce-address-fields input:focus,
.almira-myaccount .woocommerce-address-fields select:focus { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,0.12); }

.almira-myaccount .woocommerce-address-fields button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 32px; background: #0d9488; color: #fff; border: none; border-radius: 12px; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: all 0.25s; margin-top: 8px; }
.almira-myaccount .woocommerce-address-fields button[type="submit"]:hover { background: #0f766e; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(13,148,136,0.2); }

/* ── PAYMENT METHODS PAGE ── */
.almira-myaccount .woocommerce-MyPaymentMethods { border-radius: 14px; overflow: hidden; border: 1px solid #e5e7eb; }
.almira-myaccount .woocommerce-MyPaymentMethods th { background: #f9fafb; font-size: 0.78rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.3px; padding: 12px 16px; }
.almira-myaccount .woocommerce-MyPaymentMethods td { padding: 14px 16px; border-bottom: 1px solid #f3f4f6; font-size: 0.85rem; }

/* ── WC FORM ROWS — 2 COLUMN GRID ── */
.almira-myaccount .woocommerce-EditAccountForm .form-row-first,
.almira-myaccount .woocommerce-EditAccountForm .form-row-last { display: inline-block; width: 48%; }
.almira-myaccount .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.almira-myaccount .woocommerce-address-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }
.almira-myaccount .woocommerce-address-fields__field-wrapper .form-row-first,
.almira-myaccount .woocommerce-address-fields__field-wrapper .form-row-last { grid-column: span 1; }
.almira-myaccount .woocommerce-address-fields__field-wrapper .form-row { margin-bottom: 0; width: 100%; float: none; }

/* ── GENERIC TABLE STYLING ── */
.almira-myaccount .shop_table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; }
.almira-myaccount .shop_table thead th { background: linear-gradient(135deg, #f8fafc, #f1f5f9); font-size: 0.75rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; padding: 14px 16px; border-bottom: 2px solid #e2e8f0; text-align: left; }
.almira-myaccount .shop_table tbody td { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; font-size: 0.85rem; color: #334155; }
.almira-myaccount .shop_table tbody tr:last-child td { border-bottom: none; }
.almira-myaccount .shop_table tbody tr:hover { background: #f0fdfa; }
.almira-myaccount .shop_table tfoot th,
.almira-myaccount .shop_table tfoot td { padding: 14px 16px; font-size: 0.85rem; border-top: 2px solid #e2e8f0; }
.almira-myaccount .shop_table a { color: #0d9488; text-decoration: none; font-weight: 500; }
.almira-myaccount .shop_table a:hover { text-decoration: underline; }

/* ── BUTTONS ACROSS ALL PAGES ── */
.almira-myaccount .woocommerce-MyAccount-content .button,
.almira-myaccount .woocommerce-MyAccount-content button[type="submit"],
.almira-myaccount .woocommerce-MyAccount-content .woocommerce-Button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 24px; background: #0d9488; color: #fff !important; border: none; border-radius: 10px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none; }
.almira-myaccount .woocommerce-MyAccount-content .button:hover,
.almira-myaccount .woocommerce-MyAccount-content button[type="submit"]:hover,
.almira-myaccount .woocommerce-MyAccount-content .woocommerce-Button:hover { background: #0f766e; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(13,148,136,0.2); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .almira-myaccount .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; }
    .almira-myaccount .woocommerce-address-fields,
    .almira-myaccount .woocommerce-EditAccountForm { padding: 18px; border-radius: 12px; }
    .almira-myaccount .woocommerce-EditAccountForm .form-row-first,
    .almira-myaccount .woocommerce-EditAccountForm .form-row-last { width: 100%; display: block; }
    .almira-myaccount .woocommerce-customer-details .addresses { grid-template-columns: 1fr; }

    /* Orders table → card layout on mobile */
    .almira-myaccount .woocommerce-orders-table,
    .almira-myaccount .woocommerce-orders-table thead,
    .almira-myaccount .woocommerce-orders-table tbody,
    .almira-myaccount .woocommerce-orders-table th,
    .almira-myaccount .woocommerce-orders-table td,
    .almira-myaccount .woocommerce-orders-table tr { display: block; }
    .almira-myaccount .woocommerce-orders-table thead { display: none; }
    .almira-myaccount .woocommerce-orders-table tbody tr { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; margin-bottom: 12px; }
    .almira-myaccount .woocommerce-orders-table tbody td { border: none; padding: 6px 0; display: flex; justify-content: space-between; align-items: center; }
    .almira-myaccount .woocommerce-orders-table tbody td::before { content: attr(data-title); font-size: 0.75rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.3px; }
    .almira-myaccount .woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions { justify-content: flex-end; padding-top: 10px; border-top: 1px solid #f3f4f6; margin-top: 6px; }

    /* Generic shop table mobile */
    .almira-myaccount .shop_table:not(.woocommerce-orders-table),
    .almira-myaccount .shop_table:not(.woocommerce-orders-table) thead,
    .almira-myaccount .shop_table:not(.woocommerce-orders-table) tbody,
    .almira-myaccount .shop_table:not(.woocommerce-orders-table) th,
    .almira-myaccount .shop_table:not(.woocommerce-orders-table) td,
    .almira-myaccount .shop_table:not(.woocommerce-orders-table) tr { display: block; }
    .almira-myaccount .shop_table:not(.woocommerce-orders-table) thead { display: none; }
    .almira-myaccount .shop_table:not(.woocommerce-orders-table) tbody tr { border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; margin-bottom: 10px; }
    .almira-myaccount .shop_table:not(.woocommerce-orders-table) tbody td { border: none; padding: 4px 0; }
}

/* ── DARK MODE ── */
html[data-theme="dark"] .almira-myaccount .woocommerce-EditAccountForm,
html[data-theme="dark"] .almira-myaccount .woocommerce-address-fields,
html[data-theme="dark"] .almira-myaccount .woocommerce-order-details { background: #1f2937; border-color: #374151; }
html[data-theme="dark"] .almira-myaccount .woocommerce-MyAccount-content > h2,
html[data-theme="dark"] .almira-myaccount .woocommerce-MyAccount-content > h3 { color: #f3f4f6; }
html[data-theme="dark"] .almira-myaccount .woocommerce-customer-details address { color: #d1d5db; }
html[data-theme="dark"] .almira-myaccount .woocommerce-customer-details .woocommerce-column { background: #111827; }
html[data-theme="dark"] .almira-myaccount .woocommerce-EditAccountForm input,
html[data-theme="dark"] .almira-myaccount .woocommerce-EditAccountForm select,
html[data-theme="dark"] .almira-myaccount .woocommerce-address-fields input,
html[data-theme="dark"] .almira-myaccount .woocommerce-address-fields select { background: #111827; border-color: #374151; color: #f3f4f6; }
html[data-theme="dark"] .almira-myaccount .woocommerce-EditAccountForm fieldset { border-color: #374151; }
html[data-theme="dark"] .almira-myaccount .woocommerce-EditAccountForm fieldset legend { color: #f3f4f6; }
html[data-theme="dark"] .almira-myaccount .woocommerce-EditAccountForm label,
html[data-theme="dark"] .almira-myaccount .woocommerce-address-fields label { color: #d1d5db; }
html[data-theme="dark"] .almira-myaccount .shop_table { border-color: #374151; }
html[data-theme="dark"] .almira-myaccount .shop_table thead th { background: #111827; color: #9ca3af; border-color: #374151; }
html[data-theme="dark"] .almira-myaccount .shop_table tbody td { color: #d1d5db; border-color: #1f2937; }
html[data-theme="dark"] .almira-myaccount .shop_table tbody tr:hover { background: rgba(13,148,136,0.05); }
html[data-theme="dark"] .almira-myaccount .woocommerce-orders-table { border-color: #374151; }
html[data-theme="dark"] .almira-myaccount .woocommerce-orders-table thead th { background: #111827; color: #9ca3af; border-color: #374151; }
html[data-theme="dark"] .almira-myaccount .woocommerce-orders-table tbody td { color: #d1d5db; border-color: #1f2937; }
html[data-theme="dark"] .almira-myaccount .woocommerce-orders-table tbody tr:hover { background: rgba(13,148,136,0.05); }
html[data-theme="dark"] .almira-myaccount .woocommerce-MyAccount-content .woocommerce-info { background: rgba(13,148,136,0.08); border-color: #0d9488; color: #5eead4; }
html[data-theme="dark"] .almira-myaccount .woocommerce-MyAccount-content .woocommerce-error { background: rgba(220,38,38,0.08); border-color: #dc2626; }
@media (max-width: 768px) {
    html[data-theme="dark"] .almira-myaccount .woocommerce-orders-table tbody tr { background: #1f2937; border-color: #374151; }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .ab-account { grid-template-columns: 240px 1fr; gap: 20px; }
    .ab-dash__stats { grid-template-columns: repeat(2, 1fr); }
    .ab-dash__actions { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .ab-account { grid-template-columns: 1fr; gap: 16px; padding: 12px 0; }
    .ab-account-nav { position: static; border-radius: 14px; }
    .ab-account-nav__menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 8px; }
    .ab-account-nav__item--logout { grid-column: 1 / -1; border-top: 1px solid #f3f4f6; }
    .ab-account-nav__arrow { display: none; }
    .ab-account-nav__text { font-size: 0.78rem; }
    .ab-account-nav__link { padding: 8px 10px; gap: 8px; }
    .ab-account-nav__icon { width: 32px; height: 32px; border-radius: 8px; }
    .ab-dash__stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ab-stat { padding: 14px 12px; }
    .ab-stat__num { font-size: 1.15rem; }
    .ab-dash__actions { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .ab-action { padding: 14px 8px; }
    .ab-action__icon { width: 40px; height: 40px; border-radius: 12px; }
    .ab-support-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .ab-dash__actions { grid-template-columns: repeat(2, 1fr); }
    .ab-dash__welcome { padding: 16px; }
    .ab-dash__avatar img { width: 48px; height: 48px; }
    .ab-dash__greeting h2 { font-size: 1.05rem; }
    .ab-coupon-card { flex-direction: column; }
    .ab-coupon-card__left { flex-direction: row; gap: 8px; min-width: auto; padding: 12px 16px; }
    .ab-coupon-card__left::after { display: none; }
}

/* ── Dark Mode ── */
html[data-theme="dark"] .ab-account-nav,
body[data-theme="dark"] .ab-account-nav { background: var(--color-bg-card); border-color: #374151; }
html[data-theme="dark"] .ab-account-nav__profile,
body[data-theme="dark"] .ab-account-nav__profile { background: linear-gradient(135deg, #064e3b 0%, #1e1b4b 100%); border-color: #374151; }
html[data-theme="dark"] .ab-account-nav__user strong,
body[data-theme="dark"] .ab-account-nav__user strong { color: #f3f4f6; }
html[data-theme="dark"] .ab-account-nav__link,
body[data-theme="dark"] .ab-account-nav__link { color: #d1d5db; }
html[data-theme="dark"] .ab-account-nav__link:hover,
body[data-theme="dark"] .ab-account-nav__link:hover { background: #1F2937; }
html[data-theme="dark"] .ab-account-nav__icon,
body[data-theme="dark"] .ab-account-nav__icon { background: #1F2937; }
html[data-theme="dark"] .ab-dash__welcome,
body[data-theme="dark"] .ab-dash__welcome { background: linear-gradient(135deg, #064e3b 0%, #1e1b4b 100%); border-color: #374151; }
html[data-theme="dark"] .ab-dash__greeting h2,
body[data-theme="dark"] .ab-dash__greeting h2 { color: #f3f4f6; }
html[data-theme="dark"] .ab-stat,
html[data-theme="dark"] .ab-action,
html[data-theme="dark"] .ab-order-card,
html[data-theme="dark"] .ab-support-card,
html[data-theme="dark"] .ab-coupon-card,
html[data-theme="dark"] .ab-support-info,
body[data-theme="dark"] .ab-stat,
body[data-theme="dark"] .ab-action,
body[data-theme="dark"] .ab-order-card,
body[data-theme="dark"] .ab-support-card,
body[data-theme="dark"] .ab-coupon-card,
body[data-theme="dark"] .ab-support-info { background: var(--color-bg-card); border-color: #374151; }
html[data-theme="dark"] .ab-stat__num,
html[data-theme="dark"] .ab-order-card__id,
html[data-theme="dark"] .ab-endpoint__title,
html[data-theme="dark"] .ab-support-info h3,
html[data-theme="dark"] .ab-support-card h4,
body[data-theme="dark"] .ab-stat__num,
body[data-theme="dark"] .ab-order-card__id,
body[data-theme="dark"] .ab-endpoint__title,
body[data-theme="dark"] .ab-support-info h3,
body[data-theme="dark"] .ab-support-card h4 { color: #f3f4f6; }
html[data-theme="dark"] .ab-empty-state,
body[data-theme="dark"] .ab-empty-state { background: #1F2937; border-color: #374151; }
html[data-theme="dark"] .ab-dash__section-title,
body[data-theme="dark"] .ab-dash__section-title { color: #f3f4f6; }


/* ==========================================================================
   AUTH — Login / Register Premium Page
   ========================================================================== */

.ab-auth { display: grid; grid-template-columns: 420px 1fr; min-height: 70vh; margin: -24px 0; overflow: hidden; }

/* Brand Panel (left) */
.ab-auth__brand { background: linear-gradient(135deg, #0f766e 0%, #0d9488 40%, #14b8a6 100%); color: #fff; padding: 48px 40px; display: flex; align-items: center; position: relative; overflow: hidden; }
.ab-auth__brand::before { content: ''; position: absolute; top: -60%; right: -40%; width: 500px; height: 500px; border-radius: 50%; background: rgba(255,255,255,0.06); }
.ab-auth__brand::after { content: ''; position: absolute; bottom: -40%; left: -20%; width: 400px; height: 400px; border-radius: 50%; background: rgba(255,255,255,0.04); }
.ab-auth__brand-inner { position: relative; z-index: 1; }
.ab-auth__logo { margin-bottom: 28px; }
.ab-auth__logo img { max-height: 48px; width: auto; filter: brightness(0) invert(1); }
.ab-auth__logo-text { font-size: 1.6rem; font-weight: 800; color: #fff; text-decoration: none; }
.ab-auth__tagline { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin: 0 0 12px; }
.ab-auth__desc { font-size: 0.88rem; line-height: 1.6; opacity: 0.85; margin: 0 0 32px; }

.ab-auth__benefits { display: flex; flex-direction: column; gap: 18px; }
.ab-auth__benefit { display: flex; align-items: flex-start; gap: 14px; }
.ab-auth__benefit svg { flex-shrink: 0; margin-top: 2px; opacity: 0.9; }
.ab-auth__benefit strong { display: block; font-size: 0.88rem; font-weight: 600; }
.ab-auth__benefit span { display: block; font-size: 0.78rem; opacity: 0.75; }

/* Forms Panel (right) */
.ab-auth__forms { padding: 40px 48px; display: flex; flex-direction: column; justify-content: center; max-width: 480px; margin: 0 auto; width: 100%; }

/* Tabs */
.ab-auth__tabs { display: flex; gap: 0; margin-bottom: 28px; background: #f3f4f6; border-radius: 12px; padding: 4px; }
.ab-auth__tab { flex: 1; padding: 12px; font-size: 0.88rem; font-weight: 600; text-align: center; border: none; background: none; border-radius: 10px; cursor: pointer; color: #6b7280; transition: all 0.25s; }
.ab-auth__tab--active { background: #fff; color: #0d9488; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.ab-auth__title { font-size: 1.35rem; font-weight: 700; color: #111827; margin: 0 0 28px; }

/* Panels */
.ab-auth__panel { display: none; }
.ab-auth__panel--active { display: block; animation: ab-fadeUp 0.3s ease; }
@keyframes ab-fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Fields */
.ab-field { margin-bottom: 18px; }
.ab-field__label { display: block; font-size: 0.82rem; font-weight: 600; color: #374151; margin-bottom: 6px; }
.ab-field__label abbr { color: #dc2626; text-decoration: none; }
.ab-field__input-wrap { position: relative; display: flex; align-items: center; }
.ab-field__icon { position: absolute; left: 14px; color: #9ca3af; pointer-events: none; z-index: 1; }
.ab-field__input { width: 100%; padding: 13px 14px 13px 44px; border: 1.5px solid #d1d5db; border-radius: 12px; font-size: 0.88rem; color: #111827; background: #fff; transition: all 0.2s; outline: none; }
.ab-field__input::placeholder { color: #9ca3af; }
.ab-field__input:focus { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,0.12); }
.ab-field__toggle-pw { position: absolute; right: 12px; background: none; border: none; cursor: pointer; color: #9ca3af; padding: 4px; display: flex; }
.ab-field__toggle-pw:hover { color: #6b7280; }

/* Password Strength */
.ab-pw-strength { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.ab-pw-strength__bar { flex: 1; height: 4px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.ab-pw-strength__fill { height: 100%; width: 0; border-radius: 4px; transition: all 0.3s ease; }
.ab-pw-strength__text { font-size: 0.72rem; font-weight: 600; min-width: 40px; }

/* Field Row — side by side fields */
.ab-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) {
    .ab-field-row { grid-template-columns: 1fr; gap: 0; }
}

/* Field Hint */
.ab-field__hint { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 0.72rem; color: #9ca3af; line-height: 1.4; }
.ab-field__hint svg { flex-shrink: 0; opacity: 0.7; }

/* Options row */
.ab-auth__options { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.ab-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.82rem; color: #4b5563; }
.ab-check__input { display: none; }
.ab-check__box { width: 18px; height: 18px; border: 2px solid #d1d5db; border-radius: 5px; flex-shrink: 0; position: relative; transition: all 0.2s; }
.ab-check__input:checked + .ab-check__box { background: #0d9488; border-color: #0d9488; }
.ab-check__input:checked + .ab-check__box::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 11px; font-weight: 700; }
.ab-auth__forgot { font-size: 0.82rem; color: #0d9488; text-decoration: none; font-weight: 500; }
.ab-auth__forgot:hover { text-decoration: underline; }

/* Terms */
.ab-auth__terms { margin-bottom: 20px; }
.ab-auth__terms .ab-check__text { font-size: 0.78rem; line-height: 1.5; }
.ab-auth__terms a { color: #0d9488; text-decoration: underline; }

/* Submit */
.ab-auth__submit { width: 100%; padding: 14px; background: #0d9488; color: #fff; border: none; border-radius: 12px; font-size: 0.92rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.25s; }
.ab-auth__submit:hover { background: #0f766e; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(13,148,136,0.25); }
.ab-auth__submit--register { background: #111827; }
.ab-auth__submit--register:hover { background: #1f2937; box-shadow: 0 8px 24px rgba(0,0,0,0.2); }

/* Switch link */
.ab-auth__switch { text-align: center; margin-top: 20px; font-size: 0.85rem; color: #6b7280; }
.ab-auth__switch a { color: #0d9488; font-weight: 600; text-decoration: none; }
.ab-auth__switch a:hover { text-decoration: underline; }

/* Trust */
.ab-auth__trust { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #f3f4f6; }
.ab-auth__trust svg { color: #059669; flex-shrink: 0; }
.ab-auth__trust span { font-size: 0.72rem; color: #9ca3af; }

/* WC notices inside auth */
.ab-auth .woocommerce-error,
.ab-auth .woocommerce-message,
.ab-auth .woocommerce-info { margin-bottom: 16px; border-radius: 10px; font-size: 0.85rem; }

/* ── Mobile ── */
@media (max-width: 1024px) {
    .ab-auth { grid-template-columns: 1fr; }
    .ab-auth__brand { display: none; }
    .ab-auth__forms { padding: 28px 20px; max-width: 100%; }
}

/* ── Dark Mode ── */
html[data-theme="dark"] .ab-auth__forms,
body[data-theme="dark"] .ab-auth__forms { background: var(--color-bg, #111); }
html[data-theme="dark"] .ab-auth__tabs,
body[data-theme="dark"] .ab-auth__tabs { background: #1f2937; }
html[data-theme="dark"] .ab-auth__tab--active,
body[data-theme="dark"] .ab-auth__tab--active { background: #374151; color: #14b8a6; }
html[data-theme="dark"] .ab-auth__tab,
body[data-theme="dark"] .ab-auth__tab { color: #9ca3af; }
html[data-theme="dark"] .ab-auth__title,
body[data-theme="dark"] .ab-auth__title { color: #f3f4f6; }
html[data-theme="dark"] .ab-field__label,
body[data-theme="dark"] .ab-field__label { color: #d1d5db; }
html[data-theme="dark"] .ab-field__input,
body[data-theme="dark"] .ab-field__input { background: #1f2937; border-color: #374151; color: #f3f4f6; }
html[data-theme="dark"] .ab-auth__trust,
body[data-theme="dark"] .ab-auth__trust { border-color: #374151; }
html[data-theme="dark"] .ab-auth__switch,
body[data-theme="dark"] .ab-auth__switch { color: #9ca3af; }


/* ==========================================================================
   v3.6.3 — Visual Banner, Infinite Scroll, Shipping Bar, Social Proof
   ========================================================================== */

/* ── VISUAL BANNER (agp-vbanner) ── */
.agp-vbanner {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-bottom: 32px;
    min-height: 220px;
    display: flex;
    align-items: center;
}

.agp-vbanner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}

.agp-vbanner__deco {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.agp-vbanner__deco svg {
    position: absolute;
    opacity: 0.13;
    fill: currentColor;
    stroke: none;
}

/* Floating SVG positions */
.agp-vbanner__svg--1 {
    width: 80px;
    height: 80px;
    top: 12%;
    right: 8%;
    animation: agpFloat 6s ease-in-out infinite;
}

.agp-vbanner__svg--2 {
    width: 60px;
    height: 60px;
    bottom: 15%;
    right: 22%;
    animation: agpFloatSlow 8s ease-in-out infinite 1s;
}

.agp-vbanner__svg--3 {
    width: 50px;
    height: 50px;
    top: 20%;
    right: 38%;
    animation: agpFloat 7s ease-in-out infinite 2s;
}

.agp-vbanner__svg--4 {
    width: 44px;
    height: 44px;
    bottom: 20%;
    right: 52%;
    animation: agpFloatSlow 9s ease-in-out infinite 0.5s;
}

.agp-vbanner__svg--5 {
    width: 36px;
    height: 36px;
    top: 55%;
    right: 12%;
    animation: agpFloat 5.5s ease-in-out infinite 3s;
}

@keyframes agpFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(6deg); }
}

@keyframes agpFloatSlow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(-5deg); }
}

.agp-vbanner .container {
    position: relative;
    z-index: 2;
}

.agp-vbanner__content {
    max-width: 520px;
    padding: 40px 0;
}

.agp-vbanner__tag {
    display: inline-block;
    padding: 5px 14px;
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 14px;
    backdrop-filter: blur(4px);
}

.agp-vbanner__title {
    font-size: 1.65rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.25;
}

.agp-vbanner__desc {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    margin: 0 0 20px;
}

.agp-vbanner__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 28px;
    border-radius: 12px;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.agp-vbanner__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.2);
    filter: brightness(1.1);
}

/* ── FREE SHIPPING BAR ── */
.agp-shipping-bar {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    margin-bottom: 18px;
    font-size: 0.88rem;
    color: #065f46;
    font-weight: 500;
}

.agp-shipping-bar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
}

.agp-shipping-bar svg { flex-shrink: 0; }

.agp-shipping-bar strong {
    font-weight: 800;
    color: #047857;
}

/* ── INFINITE SCROLL SENTINEL ── */
.agp-load-sentinel {
    display: flex;
    justify-content: center;
    padding: 32px 16px;
    min-height: 60px;
}

.agp-load-spinner {
    display: none;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
}

.agp-load-sentinel.is-loading .agp-load-spinner {
    display: flex;
}

.agp-spinner-svg {
    animation: agpSpin 1s linear infinite;
}

@keyframes agpSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.agp-load-end {
    text-align: center;
    padding: 20px;
}

.agp-load-end span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: #f3f4f6;
    border-radius: 24px;
    font-size: 0.82rem;
    color: #6b7280;
    font-weight: 500;
}

/* ── SOCIAL PROOF STRIP ── */
.agp-social-proof {
    margin-top: 40px;
    border-top: 1px solid #e5e7eb;
    padding: 28px 0;
}

.agp-social-proof .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.agp-social-proof__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.agp-social-proof__icon {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.agp-social-proof__value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #111827;
}

.agp-social-proof__label {
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 500;
}


/* ── v3.6.3 RESPONSIVE ── */
@media (max-width: 1024px) {
    .agp-vbanner { min-height: 200px; }
    .agp-vbanner__title { font-size: 1.4rem; }
    .agp-vbanner__svg--4,
    .agp-vbanner__svg--5 { display: none; }
}

@media (max-width: 768px) {
    /* Visual Banner mobile */
    .agp-vbanner { min-height: 180px; border-radius: 16px; margin-bottom: 24px; }
    .agp-vbanner__content { padding: 28px 0; }
    .agp-vbanner__tag { font-size: 0.72rem; padding: 4px 10px; margin-bottom: 10px; }
    .agp-vbanner__title { font-size: 1.2rem; margin-bottom: 8px; }
    .agp-vbanner__desc { font-size: 0.82rem; margin-bottom: 16px; }
    .agp-vbanner__cta { padding: 10px 22px; font-size: 0.82rem; }
    .agp-vbanner__deco svg { display: none; }

    /* Social proof mobile */
    .agp-social-proof { padding: 20px 0; margin-top: 24px; }
    .agp-social-proof .container { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .agp-social-proof__value { font-size: 0.95rem; }
    .agp-social-proof__label { font-size: 0.72rem; }

    /* Shipping bar mobile — padding on container */
    .agp-shipping-bar .container { padding: 12px 16px; font-size: 0.82rem; }

    /* Infinite scroll mobile */
    .agp-load-sentinel { padding: 24px 12px; }

    /* Product card new elements mobile */
    .badge--ship-today { font-size: 9px; padding: 3px 7px; bottom: 8px; left: 8px; }
    .product-card-savings { font-size: 10px; }
    .product-card-installment { font-size: 10px; }
}


/* ── v3.6.3 DARK MODE ── */
html[data-theme="dark"] .agp-vbanner,
body[data-theme="dark"] .agp-vbanner { border: 1px solid rgba(255,255,255,0.06); }
html[data-theme="dark"] .agp-vbanner__tag,
body[data-theme="dark"] .agp-vbanner__tag { background: rgba(255,255,255,0.12); }

html[data-theme="dark"] .agp-shipping-bar,
body[data-theme="dark"] .agp-shipping-bar {
    background: linear-gradient(135deg, rgba(5,150,105,0.12), rgba(16,185,129,0.08));
    border-color: rgba(5,150,105,0.2);
    color: #6ee7b7;
}
html[data-theme="dark"] .agp-shipping-bar strong,
body[data-theme="dark"] .agp-shipping-bar strong { color: #34d399; }

html[data-theme="dark"] .agp-load-end span,
body[data-theme="dark"] .agp-load-end span { background: #1f2937; color: #9ca3af; }

html[data-theme="dark"] .agp-social-proof,
body[data-theme="dark"] .agp-social-proof { border-color: #374151; }
html[data-theme="dark"] .agp-social-proof__value,
body[data-theme="dark"] .agp-social-proof__value { color: #f3f4f6; }
html[data-theme="dark"] .agp-social-proof__label,
body[data-theme="dark"] .agp-social-proof__label { color: #9ca3af; }

html[data-theme="dark"] .product-card-savings,
body[data-theme="dark"] .product-card-savings { color: #34d399; }
html[data-theme="dark"] .product-card-savings svg,
body[data-theme="dark"] .product-card-savings svg { color: #34d399; }
html[data-theme="dark"] .product-card-installment,
body[data-theme="dark"] .product-card-installment { color: #9ca3af; }
html[data-theme="dark"] .product-card-installment .woocommerce-Price-amount,
body[data-theme="dark"] .product-card-installment .woocommerce-Price-amount { color: #d1d5db; }

html[data-theme="dark"] .badge--ship-today,
body[data-theme="dark"] .badge--ship-today { background: rgba(5,150,105,0.85); }
html[data-theme="dark"] .badge--new,
body[data-theme="dark"] .badge--new { background: #0f766e; }

/* ==========================================================================
   KAMPANYALAR PAGE
   ========================================================================== */

/* ── Hero ── */
.kampanya-hero {
    position: relative;
    padding: 48px 0 40px;
    background: linear-gradient(160deg, #FEF2F2 0%, #FFF7ED 40%, #FEF3C7 100%);
    overflow: hidden;
}

.kampanya-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.kampanya-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
}

.kampanya-hero__orb--1 {
    width: 300px;
    height: 300px;
    background: rgba(239, 68, 68, 0.15);
    top: -80px;
    right: -40px;
    animation: kampOrbFloat 8s ease-in-out infinite;
}

.kampanya-hero__orb--2 {
    width: 200px;
    height: 200px;
    background: rgba(249, 115, 22, 0.12);
    bottom: -50px;
    left: 10%;
    animation: kampOrbFloat 10s ease-in-out infinite reverse;
}

.kampanya-hero__orb--3 {
    width: 160px;
    height: 160px;
    background: rgba(234, 179, 8, 0.12);
    top: 20%;
    left: 55%;
    animation: kampOrbFloat 12s ease-in-out infinite 2s;
}

@keyframes kampOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(18px, -12px) scale(1.06); }
}

.kampanya-crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.kampanya-crumb a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.kampanya-crumb a:hover { color: var(--color-sale); }
.kampanya-crumb span { color: var(--color-text); font-weight: 600; }

.kampanya-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.kampanya-hero__title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 10px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.kampanya-hero__desc {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin: 0 0 24px;
    max-width: 520px;
    line-height: 1.55;
}

/* Stats */
.kampanya-hero__stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.kampanya-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 14px;
    transition: transform 0.25s, box-shadow 0.25s;
}

.kampanya-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.kampanya-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
    flex-shrink: 0;
}

.kampanya-stat__icon--fire {
    background: rgba(249, 115, 22, 0.1);
    color: #EA580C;
}

.kampanya-stat__icon--truck {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.kampanya-stat__info {
    display: flex;
    flex-direction: column;
}

.kampanya-stat__info strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.2;
}

.kampanya-stat__info span {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* ── Toolbar ── */
.kampanya-toolbar-wrap {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 12px 0;
}

.kampanya-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.kampanya-filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    flex: 1;
}

.kampanya-filters::-webkit-scrollbar { display: none; }

.kampanya-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text-muted);
    background: #f8fafb;
    border: 1.5px solid transparent;
    transition: all 0.25s;
}

.kampanya-pill:hover {
    background: #fff;
    border-color: var(--color-sale);
    color: var(--color-sale);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(239,68,68,0.1);
}

.kampanya-pill.is-active {
    background: var(--color-sale);
    color: #fff;
    border-color: var(--color-sale);
    box-shadow: 0 2px 12px rgba(239,68,68,0.25);
}

.kampanya-pill--hot {
    color: #DC2626;
}

/* Sort */
.kampanya-sort {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.kampanya-sort__label {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
}

.kampanya-sort__select {
    appearance: none;
    -webkit-appearance: none;
    padding: 7px 32px 7px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    background: #fff url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    cursor: pointer;
    transition: border-color 0.2s;
}

.kampanya-sort__select:focus {
    outline: none;
    border-color: var(--color-sale);
}

/* Active bar */
.kampanya-active-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.04);
}

.kampanya-active-bar__count {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.kampanya-active-bar__clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-sale);
    text-decoration: none;
    transition: opacity 0.2s;
}

.kampanya-active-bar__clear:hover { opacity: 0.7; }

/* ── Products Grid ── */
.kampanya-content {
    padding: 32px 0 48px;
}

.kampanya-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Card */
.kampanya-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
    border: 1px solid rgba(0,0,0,0.04);
    transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s cubic-bezier(.22,1,.36,1);
    animation: kampCardIn 0.45s cubic-bezier(.22,1,.36,1) both;
}

@keyframes kampCardIn {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.kampanya-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
}

/* Visual */
.kampanya-card__visual {
    position: relative;
    aspect-ratio: 1;
    background: var(--color-bg-light);
    overflow: hidden;
}

.kampanya-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(.22,1,.36,1);
}

.kampanya-card:hover .kampanya-card__img {
    transform: scale(1.06);
}

.kampanya-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
}

/* Discount badge */
.kampanya-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--color-sale);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(239,68,68,0.3);
}

.kampanya-card__badge--hot {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    animation: kampBadgePulse 2s ease-in-out infinite;
}

@keyframes kampBadgePulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(239,68,68,0.3); }
    50%      { box-shadow: 0 2px 16px rgba(239,68,68,0.5); }
}

/* Savings ribbon */
.kampanya-card__saving {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 12px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s, transform 0.3s;
}

.kampanya-card:hover .kampanya-card__saving {
    opacity: 1;
    transform: translateY(0);
}

/* Body */
.kampanya-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.kampanya-card__title {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--color-text);
}

.kampanya-card__prices {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.kampanya-card__price-old {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.kampanya-card__price-new {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-sale);
}

/* ── Pagination ── */
.kampanya-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.kampanya-pagination ul {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.kampanya-pagination li { display: flex; }

.kampanya-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: #f8fafb;
    text-decoration: none;
    transition: all 0.2s;
}

.kampanya-pagination .page-numbers:hover {
    background: #fff;
    color: var(--color-sale);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.kampanya-pagination .page-numbers.current {
    background: var(--color-sale);
    color: #fff;
    box-shadow: 0 2px 12px rgba(239,68,68,0.25);
}

.kampanya-pagination .prev,
.kampanya-pagination .next {
    color: var(--color-text);
}

/* ── Empty State ── */
.kampanya-empty {
    text-align: center;
    padding: 60px 20px;
}

.kampanya-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 24px;
    background: #FEF2F2;
    color: #F87171;
    margin-bottom: 20px;
}

.kampanya-empty__title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 8px;
}

.kampanya-empty__text {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0 0 24px;
    max-width: 400px;
    margin-inline: auto;
}

.kampanya-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--color-sale);
    color: #fff;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.kampanya-empty__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(239,68,68,0.3);
}

/* ── Trust Bar ── */
.kampanya-trust {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--color-border);
}

.kampanya-trust__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.kampanya-trust__item svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .kampanya-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .kampanya-hero { padding: 36px 0 28px; }
    .kampanya-hero__title { font-size: 1.6rem; }

    .kampanya-hero__stats { gap: 8px; }
    .kampanya-stat { padding: 8px 12px; }
    .kampanya-stat__icon { width: 32px; height: 32px; }
    .kampanya-stat__info strong { font-size: 0.9rem; }

    .kampanya-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .kampanya-sort {
        justify-content: flex-end;
    }

    .kampanya-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .kampanya-card__body { padding: 10px 12px 14px; }
    .kampanya-card__title { font-size: 0.78rem; }
    .kampanya-card__price-new { font-size: 0.92rem; }
    .kampanya-card__price-old { font-size: 0.72rem; }

    .kampanya-trust { gap: 16px; }
    .kampanya-trust__item { font-size: 0.75rem; gap: 5px; }
    .kampanya-trust__item svg { width: 16px; height: 16px; }
}

@media (max-width: 480px) {
    .kampanya-hero__title { font-size: 1.4rem; }
    .kampanya-hero__desc { font-size: 0.85rem; }
    .kampanya-hero__badge { font-size: 0.7rem; }

    .kampanya-stat {
        flex: 1;
        min-width: calc(50% - 4px);
    }

    .kampanya-pill { padding: 6px 12px; font-size: 0.75rem; }

    .kampanya-card__badge { font-size: 0.72rem; padding: 3px 8px; }
    .kampanya-card__saving { font-size: 0.65rem; }

    .kampanya-pagination .page-numbers {
        min-width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }
}

/* ── Dark Mode ── */
html[data-theme="dark"] .kampanya-hero,
body[data-theme="dark"] .kampanya-hero {
    background: linear-gradient(160deg, #1a1a2e 0%, #16213e 40%, #1a1a2e 100%);
}

html[data-theme="dark"] .kampanya-stat,
body[data-theme="dark"] .kampanya-stat {
    background: rgba(30,30,46,0.7);
    border-color: rgba(255,255,255,0.06);
}

html[data-theme="dark"] .kampanya-toolbar-wrap,
body[data-theme="dark"] .kampanya-toolbar-wrap {
    background: rgba(17,24,39,0.88);
}

html[data-theme="dark"] .kampanya-pill,
body[data-theme="dark"] .kampanya-pill {
    background: #1f2937;
    color: #9ca3af;
}

html[data-theme="dark"] .kampanya-sort__select,
body[data-theme="dark"] .kampanya-sort__select {
    background-color: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

html[data-theme="dark"] .kampanya-card,
body[data-theme="dark"] .kampanya-card {
    background: #1f2937;
    border-color: rgba(255,255,255,0.04);
}

html[data-theme="dark"] .kampanya-card__placeholder,
body[data-theme="dark"] .kampanya-card__placeholder {
    background: linear-gradient(135deg, #1f2937, #374151);
}

html[data-theme="dark"] .kampanya-pagination .page-numbers,
body[data-theme="dark"] .kampanya-pagination .page-numbers {
    background: #1f2937;
    color: #9ca3af;
}

html[data-theme="dark"] .kampanya-empty__icon,
body[data-theme="dark"] .kampanya-empty__icon {
    background: rgba(239,68,68,0.1);
}

html[data-theme="dark"] .kampanya-trust,
body[data-theme="dark"] .kampanya-trust {
    border-color: #374151;
}

/* ═══════════════════════════════════════════════
   KAMPANYA v2 — NEW PREMIUM SECTIONS
   ═══════════════════════════════════════════════ */

/* ── Shipping Banner ── */
.kampanya-shipping-banner {
    background: linear-gradient(90deg, #059669 0%, #10B981 50%, #059669 100%);
    background-size: 200% 100%;
    animation: kampShipBg 4s ease-in-out infinite;
    padding: 10px 0;
}

@keyframes kampShipBg {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.kampanya-shipping-banner__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.kampanya-shipping-banner__icon {
    display: flex;
    align-items: center;
    color: #fff;
    opacity: 0.9;
}

.kampanya-shipping-banner__text {
    margin: 0;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 500;
}

.kampanya-shipping-banner__text strong {
    font-weight: 800;
    font-size: 1rem;
}

.kampanya-shipping-banner__highlight {
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 2px 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 6px;
    margin-left: 4px;
}

.kampanya-shipping-banner__sparkle {
    font-size: 1.1rem;
    animation: kampSparkle 2s ease-in-out infinite;
}

@keyframes kampSparkle {
    0%, 100% { opacity: 0.6; transform: scale(1) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1.2) rotate(12deg); }
}

/* ── Section Headers (reusable) ── */
.kampanya-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}

.kampanya-section-header--center {
    justify-content: center;
    text-align: center;
}

.kampanya-section-header--grid {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.kampanya-section-header__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kampanya-section-header__icon {
    font-size: 1.8rem;
    line-height: 1;
}

.kampanya-section-header__title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.kampanya-section-header__desc {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: 2px 0 0;
    line-height: 1.4;
}

.kampanya-section-header__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-sale);
    text-decoration: none;
    white-space: nowrap;
    transition: gap 0.25s;
}

.kampanya-section-header__link:hover {
    gap: 10px;
}

/* ── Super Deals (horizontal scroll) ── */
.kampanya-super {
    padding: 36px 0 28px;
    background: linear-gradient(180deg, #FEF2F2 0%, #fff 100%);
}

.kampanya-super__track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

.kampanya-super__track::-webkit-scrollbar { display: none; }

.kampanya-super__card {
    flex: 0 0 220px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
    border: 1.5px solid rgba(239,68,68,0.12);
    transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s;
}

.kampanya-super__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(239,68,68,0.12), 0 2px 8px rgba(0,0,0,0.04);
}

.kampanya-super__visual {
    position: relative;
    aspect-ratio: 1;
    background: var(--color-bg-light);
    overflow: hidden;
}

.kampanya-super__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(.22,1,.36,1);
}

.kampanya-super__card:hover .kampanya-super__img {
    transform: scale(1.06);
}

.kampanya-super__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(239,68,68,0.35);
    animation: kampBadgePulse 2s ease-in-out infinite;
}

.kampanya-super__body {
    padding: 12px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kampanya-super__title {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kampanya-super__prices {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kampanya-super__old {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.kampanya-super__new {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-sale);
}

.kampanya-super__save {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #059669;
    background: rgba(16,185,129,0.08);
    padding: 3px 8px;
    border-radius: 6px;
    width: fit-content;
}

/* ── Quick Stats Cards ── */
.kampanya-quickstats {
    padding: 24px 0;
}

.kampanya-quickstats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.kampanya-quickstats__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 12px;
    border-radius: 16px;
    background: var(--qs-bg);
    border: 1.5px solid transparent;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(.22,1,.36,1);
    text-align: center;
}

.kampanya-quickstats__card:hover {
    transform: translateY(-4px);
    border-color: var(--qs-color);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.kampanya-quickstats__card.is-active {
    border-color: var(--qs-color);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.kampanya-quickstats__icon {
    font-size: 1.6rem;
    line-height: 1;
}

.kampanya-quickstats__label {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--qs-color);
    letter-spacing: -0.01em;
}

.kampanya-quickstats__desc {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Pill Count Badge ── */
.kampanya-pill__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(0,0,0,0.06);
    color: var(--color-text-muted);
    padding: 1px 6px;
    border-radius: 999px;
    min-width: 18px;
}

.kampanya-pill.is-active .kampanya-pill__count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* ── Why Almira Bebek Section ── */
.kampanya-why {
    padding: 48px 0;
    background: linear-gradient(180deg, #fff 0%, #F8FAFB 100%);
}

.kampanya-why__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.kampanya-why__card {
    text-align: center;
    padding: 28px 20px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,0.04);
    transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s;
}

.kampanya-why__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}

.kampanya-why__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--why-bg);
    color: var(--why-color);
    margin-bottom: 16px;
}

.kampanya-why__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 6px;
}

.kampanya-why__desc {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ── CTA Banner ── */
.kampanya-cta {
    padding: 0 0 48px;
}

.kampanya-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 40px;
    background: linear-gradient(135deg, #FEF2F2 0%, #FFF7ED 50%, #FEF3C7 100%);
    border-radius: 24px;
    border: 1px solid rgba(239,68,68,0.08);
}

.kampanya-cta__content {
    flex: 1;
}

.kampanya-cta__title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.kampanya-cta__desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
}

.kampanya-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #E1306C 0%, #C13584 100%);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.25s, box-shadow 0.25s;
}

.kampanya-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(193,53,132,0.3);
    color: #fff;
}

/* ── Responsive — New Sections ── */
@media (max-width: 1024px) {
    .kampanya-quickstats__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    .kampanya-why__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .kampanya-shipping-banner__text { font-size: 0.78rem; }
    .kampanya-shipping-banner__text strong { font-size: 0.88rem; }
    .kampanya-shipping-banner__highlight { padding: 2px 8px; font-size: 0.78rem; }

    .kampanya-super { padding: 28px 0 20px; }
    .kampanya-super__card { flex: 0 0 180px; }
    .kampanya-super__body { padding: 10px 12px 14px; }
    .kampanya-super__title { font-size: 0.78rem; }
    .kampanya-super__new { font-size: 0.92rem; }

    .kampanya-quickstats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .kampanya-quickstats__card { padding: 16px 10px; }
    .kampanya-quickstats__icon { font-size: 1.3rem; }
    .kampanya-quickstats__label { font-size: 1rem; }

    .kampanya-section-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .kampanya-section-header--center { align-items: center; }
    .kampanya-section-header__title { font-size: 1.2rem; }

    .kampanya-why__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .kampanya-why__card { padding: 20px 14px; }
    .kampanya-why__icon { width: 44px; height: 44px; border-radius: 12px; }
    .kampanya-why__icon svg { width: 22px; height: 22px; }
    .kampanya-why__title { font-size: 0.85rem; }
    .kampanya-why__desc { font-size: 0.75rem; }

    .kampanya-cta__inner {
        flex-direction: column;
        padding: 24px 20px;
        text-align: center;
        gap: 16px;
    }
    .kampanya-cta__title { font-size: 1.1rem; }
    .kampanya-cta__desc { font-size: 0.8rem; }
    .kampanya-cta__btn { padding: 10px 24px; font-size: 0.82rem; }
}

@media (max-width: 480px) {
    .kampanya-shipping-banner__inner { flex-wrap: wrap; gap: 6px; }
    .kampanya-shipping-banner__sparkle { display: none; }

    .kampanya-super__card { flex: 0 0 160px; }
    .kampanya-super__badge { font-size: 0.78rem; padding: 4px 10px; }

    .kampanya-quickstats__card { padding: 14px 8px; }
    .kampanya-quickstats__label { font-size: 0.9rem; }
    .kampanya-quickstats__desc { font-size: 0.65rem; }

    .kampanya-why__card { padding: 16px 12px; }
    .kampanya-why__icon { width: 40px; height: 40px; margin-bottom: 10px; }
}

/* ── Dark Mode — New Sections ── */
html[data-theme="dark"] .kampanya-shipping-banner,
body[data-theme="dark"] .kampanya-shipping-banner {
    background: linear-gradient(90deg, #065F46 0%, #047857 50%, #065F46 100%);
    background-size: 200% 100%;
}

html[data-theme="dark"] .kampanya-super,
body[data-theme="dark"] .kampanya-super {
    background: linear-gradient(180deg, #1a1a2e 0%, #111827 100%);
}

html[data-theme="dark"] .kampanya-super__card,
body[data-theme="dark"] .kampanya-super__card {
    background: #1f2937;
    border-color: rgba(239,68,68,0.15);
}

html[data-theme="dark"] .kampanya-quickstats__card,
body[data-theme="dark"] .kampanya-quickstats__card {
    background: rgba(255,255,255,0.04);
}

html[data-theme="dark"] .kampanya-why,
body[data-theme="dark"] .kampanya-why {
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
}

html[data-theme="dark"] .kampanya-why__card,
body[data-theme="dark"] .kampanya-why__card {
    background: #1f2937;
    border-color: rgba(255,255,255,0.04);
}

html[data-theme="dark"] .kampanya-cta__inner,
body[data-theme="dark"] .kampanya-cta__inner {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
    border-color: rgba(255,255,255,0.06);
}

html[data-theme="dark"] .kampanya-section-header__title,
body[data-theme="dark"] .kampanya-section-header__title {
    color: #e5e7eb;
}

html[data-theme="dark"] .kampanya-section-header--grid,
body[data-theme="dark"] .kampanya-section-header--grid {
    border-color: rgba(255,255,255,0.06);
}

/* ── AGP Archive Grid Override ── */
.agp .products-grid,
.agp--cat .products-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 1024px) {
    .agp .products-grid,
    .agp--cat .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .agp .products-grid,
    .agp--cat .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}