/* AMC Hungary Shop - Base Styles */

:root {
    /* Color Palette */
    --color-premium-black: #0A0A0B;
    --color-charcoal: #1C1C1E;
    --color-pearl-white: #FAFAF7;
    --color-soft-white: #FFFFFF;
    --color-champagne-gold: #C9A961;
    --color-deep-gold: #A88848;
    --color-smoke-gray: #666661;
    --color-border-gray: #E8E6E0;
    --color-ink-black: #1A1A1B;

    /* Typography */
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', system-ui, sans-serif;

    /* Spacing scale (8px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Premium motion */
    --amc-motion-fast: 240ms;
    --amc-motion-medium: 480ms;
    --amc-motion-slow: 720ms;
    --amc-motion-luxury: 1000ms;
    --amc-ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
    --amc-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --amc-ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);

    /* Container */
    --container-max: 1280px;
    --container-padding: 24px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-sans);
    color: var(--color-ink-black);
    background: var(--color-pearl-white);
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

img, picture, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Container */
.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* === Site Header === */
.site-header { background: var(--color-soft-white); border-bottom: 1px solid var(--color-border-gray); }
.site-header-inner { max-width: var(--container-max); margin-inline: auto; padding: 18px var(--container-padding); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-logo { font-family: var(--font-serif); font-size: 18px; font-weight: 600; letter-spacing: 0.18em; color: var(--color-ink-black); }
.site-nav { display: flex; align-items: center; gap: 24px; }
.nav-link { font-size: 13px; color: var(--color-ink-black); padding: 6px 0; border-bottom: 1px solid transparent; }
.nav-link:hover { border-bottom-color: var(--color-champagne-gold); }
.nav-link-cta { padding: 8px 18px; background: var(--color-premium-black); color: var(--color-pearl-white); border: 1px solid var(--color-premium-black); }
.nav-link-cta:hover { background: var(--color-charcoal); border-bottom-color: var(--color-charcoal); }
.logout-form { display: inline; }
.btn-text { background: none; border: none; padding: 6px 0; cursor: pointer; font-family: var(--font-sans); font-size: 13px; color: var(--color-ink-black); border-bottom: 1px solid transparent; }
.btn-text:hover { border-bottom-color: var(--color-champagne-gold); }

/* === Site Footer === */
.site-footer { margin-top: 64px; padding: 32px 0; background: var(--color-charcoal); color: rgba(250, 250, 247, 0.7); font-size: 12px; }
.site-footer .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-footer p { margin: 0; }
.footer-nav { display: flex; gap: 20px; }
.footer-nav a { color: rgba(250, 250, 247, 0.7); border-bottom: 1px solid transparent; padding-bottom: 2px; }
.footer-nav a:hover { color: var(--color-pearl-white); border-bottom-color: var(--color-champagne-gold); }

/* === Form Components === */
.form-field { margin-bottom: 18px; }
.form-row { display: grid; gap: 16px; }
.form-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) {
    .form-row-2, .form-row-3 { grid-template-columns: 1fr; }
}
.form-label { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-smoke-gray); margin-bottom: 6px; }
.form-required { color: var(--color-champagne-gold); }
.form-input, .form-textarea, .form-select { width: 100%; padding: 12px 14px; font-family: var(--font-sans); font-size: 14px; color: var(--color-ink-black); background: var(--color-pearl-white); border: 1px solid var(--color-border-gray); border-radius: 2px; outline: none; transition: border-color var(--amc-motion-fast) var(--amc-ease-premium), background-color var(--amc-motion-fast) var(--amc-ease-premium), box-shadow var(--amc-motion-fast) var(--amc-ease-premium); }
.form-input:focus, .form-textarea:focus, .form-select:focus { background: var(--color-soft-white); border-color: var(--color-champagne-gold); box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.14); }
.form-input[disabled], .form-input[readonly] { background: var(--color-pearl-white); color: var(--color-smoke-gray); cursor: not-allowed; }
.form-field.has-error .form-input, .form-field.has-error .form-textarea, .form-field.has-error .form-select { border-color: #B85450; }

/* Password visibility toggle.  The wrapper sits between the label and
   the error region so the input + eye-button stay aligned even when the
   field shifts into its error state.  We use position-relative + absolute
   for the button so the input keeps full-width layout inheritance — and
   the input gets `padding-right: 48px` (via .form-input--with-toggle) so
   long values never slide under the icon. */
.form-input-with-toggle {
    position: relative;
    display: block;
}
.form-input--with-toggle {
    padding-right: 48px;
}
.form-password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 2px;
    color: var(--color-smoke-gray);
    cursor: pointer;
    transition: color var(--amc-motion-fast) var(--amc-ease-premium), background-color var(--amc-motion-fast) var(--amc-ease-premium);
}
.form-password-toggle:hover {
    color: var(--color-deep-gold);
    background: rgba(201, 169, 97, 0.08);
}
.form-password-toggle:focus-visible {
    outline: none;
    color: var(--color-deep-gold);
    box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.32);
}
.form-password-toggle svg {
    display: block;
    width: 18px;
    height: 18px;
}
.form-password-toggle__icon[hidden] {
    display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .form-password-toggle { transition: none; }
}
.form-error { margin-top: 6px; font-size: 12px; color: #B85450; }
.form-help { margin-top: 6px; font-size: 12px; color: var(--color-smoke-gray); }
.form-checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-size: 13px; line-height: 1.5; color: var(--color-ink-black); }
.form-checkbox-row input[type="checkbox"] { margin-top: 3px; }
.form-checkbox-row a { border-bottom: 1px solid var(--color-champagne-gold); }
.form-actions { display: flex; align-items: center; gap: 16px; margin-top: 24px; }

/* === Buttons === */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; border-radius: 0; cursor: pointer; border: 1px solid transparent; transition: background-color var(--amc-motion-fast) var(--amc-ease-premium), color var(--amc-motion-fast) var(--amc-ease-premium), border-color var(--amc-motion-fast) var(--amc-ease-premium), box-shadow var(--amc-motion-fast) var(--amc-ease-premium), transform var(--amc-motion-fast) var(--amc-ease-premium); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: 120ms; }
.btn:focus-visible { outline: 2px solid var(--color-champagne-gold); outline-offset: 3px; }
.btn-primary { background: var(--color-champagne-gold); color: var(--color-premium-black); border-color: var(--color-champagne-gold); }
.btn-primary:hover { background: var(--color-deep-gold); border-color: var(--color-deep-gold); }
.btn-secondary { background: transparent; color: var(--color-ink-black); border-color: var(--color-ink-black); }
.btn-secondary:hover { background: var(--color-ink-black); color: var(--color-pearl-white); }
.btn-tertiary { background: transparent; color: var(--color-ink-black); border: none; border-bottom: 1px solid var(--color-ink-black); padding: 8px 0; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.btn-tertiary:hover { border-bottom-color: var(--color-champagne-gold); color: var(--color-deep-gold); }
.btn-tertiary-danger { color: #B85450; border-bottom-color: #B85450; }
.btn-tertiary-danger:hover { color: #934241; border-bottom-color: #934241; }
.btn-danger { background: transparent; color: #B85450; border-color: #B85450; }
.btn-danger:hover { background: #B85450; color: var(--color-pearl-white); }
.btn-block { display: block; width: 100%; text-align: center; }

/* === Auth Pages === */
.auth-container { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 48px 20px; }
.auth-card { background: var(--color-soft-white); border: 1px solid var(--color-border-gray); padding: 40px 36px; max-width: 480px; width: 100%; }
.auth-brand { text-align: center; margin-bottom: 32px; }
.auth-brand-logo { font-family: var(--font-serif); font-size: 18px; font-weight: 600; letter-spacing: 0.18em; color: var(--color-ink-black); display: inline-block; line-height: 0; }
.auth-brand-logo-img { display: block; height: 54px; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; }
.auth-title { font-family: var(--font-serif); font-size: 28px; font-weight: 500; line-height: 1.2; margin: 0 0 8px 0; color: var(--color-ink-black); }
.auth-subtitle { font-size: 14px; color: var(--color-smoke-gray); margin: 0 0 28px 0; font-weight: 300; }
.auth-divider { margin: 24px 0; border: 0; border-top: 1px solid var(--color-border-gray); }
.auth-switch { text-align: center; font-size: 13px; color: var(--color-smoke-gray); }
.auth-switch a { color: var(--color-ink-black); border-bottom: 1px solid var(--color-champagne-gold); text-decoration: none; }
.auth-secondary { text-align: center; margin-top: 16px; font-size: 12px; }
.auth-secondary a { color: var(--color-smoke-gray); border-bottom: 1px solid transparent; }
.auth-secondary a:hover { color: var(--color-ink-black); border-bottom-color: var(--color-champagne-gold); }

/* === Account Layout === */
.account-layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; padding: 48px 24px; max-width: var(--container-max); margin: 0 auto; }
.account-sidebar { border-right: 1px solid var(--color-border-gray); padding-right: 32px; }
.account-sidebar-title { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-smoke-gray); margin: 0 0 16px 0; }
.account-nav { display: flex; flex-direction: column; gap: 4px; }
.account-nav-item { padding: 10px 0; font-size: 13px; color: var(--color-ink-black); text-decoration: none; border-bottom: 1px solid transparent; background: transparent; border-left: none; border-right: none; border-top: none; cursor: pointer; text-align: left; font-family: var(--font-sans); }
.account-nav-item:hover { border-bottom-color: var(--color-border-gray); }
.account-nav-item.active { border-bottom-color: var(--color-champagne-gold); }
.account-nav-logout { display: flex; margin-top: 24px; }
.account-nav-logout-button { width: 100%; color: var(--color-smoke-gray); }
.account-content { min-height: 60vh; }
.account-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 12px 0; }
.account-page-title { font-family: var(--font-serif); font-size: 32px; font-weight: 500; margin: 0 0 24px 0; line-height: 1.2; }
.account-page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.account-page-header .account-page-title { margin: 0; }
.account-form { max-width: 720px; }
.account-empty { padding: 32px; border: 1px dashed var(--color-border-gray); background: var(--color-soft-white); color: var(--color-smoke-gray); }
.account-quicklinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-top: 32px; }
.quicklink-card { display: block; padding: 24px; background: var(--color-soft-white); border: 1px solid var(--color-border-gray); text-decoration: none; transition: border-color var(--amc-motion-fast) var(--amc-ease-premium), transform var(--amc-motion-fast) var(--amc-ease-premium), box-shadow var(--amc-motion-fast) var(--amc-ease-premium); }
.quicklink-card:hover { border-color: var(--color-champagne-gold); transform: translateY(-1px); box-shadow: 0 16px 34px rgba(10, 10, 11, 0.05); }
.quicklink-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 8px 0; }
.quicklink-title { font-family: var(--font-serif); font-size: 18px; font-weight: 500; margin: 0 0 6px 0; color: var(--color-ink-black); }
.quicklink-meta { font-size: 12px; color: var(--color-smoke-gray); margin: 0; }

/* === Club Badge === */
.club-badge { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--color-soft-white); border: 1px solid var(--color-border-gray); border-left: 3px solid #B89970; margin-top: 8px; }
.club-badge.tier-klub-plus { border-left-color: #9DA0A8; }
.club-badge.tier-elite { border-left-color: var(--color-champagne-gold); }
.club-badge-name { font-family: var(--font-serif); font-size: 16px; font-weight: 500; color: var(--color-ink-black); margin: 0 0 2px 0; }
.club-badge-desc { font-size: 12px; color: var(--color-smoke-gray); margin: 0; }

/* === Address List === */
.addresses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.address-card { background: var(--color-soft-white); border: 1px solid var(--color-border-gray); padding: 20px; position: relative; }
.address-card.is-default { border-left: 3px solid var(--color-champagne-gold); }
.address-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.address-name { font-weight: 500; margin: 0; font-size: 14px; }
.address-type { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-smoke-gray); }
.address-text { font-size: 13px; color: var(--color-smoke-gray); line-height: 1.5; margin: 0 0 2px 0; }
.address-default-tag { margin-top: 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-deep-gold); }
.address-actions { margin-top: 16px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.inline-form { display: inline-block; margin: 0; }

/* === Static Pages === */
.static-page { padding: 64px 24px; max-width: 720px; }
.static-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 12px 0; }
.static-title { font-family: var(--font-serif); font-size: 36px; font-weight: 500; margin: 0 0 16px 0; line-height: 1.2; }
.static-lead { font-size: 16px; color: var(--color-smoke-gray); margin: 0 0 16px 0; }
.static-body { font-size: 14px; color: var(--color-ink-black); line-height: 1.7; }
.static-body a { border-bottom: 1px solid var(--color-champagne-gold); }

/* === Mobile === */
@media (max-width: 768px) {
    .account-layout { grid-template-columns: 1fr; gap: 24px; }
    .account-sidebar { border-right: none; border-bottom: 1px solid var(--color-border-gray); padding-right: 0; padding-bottom: 16px; }
    .auth-card { padding: 32px 24px; }
    .account-page-title { font-size: 26px; }
}

/* ============================================================== */
/* === Phase 3B: Catalog, product detail, mega-menu, footer === */
/* ============================================================== */

:root {
    --color-sale-red: #B85450;
    --color-sale-red-deep: #934241;
    --color-stock-green: #4F8060;
    --color-deep-navy: #15151A;

    /* Typography for product detail */
    --font-display: var(--font-serif);

    /* Motion */
    --ease-product: var(--amc-ease-premium);
    --duration-quick: var(--amc-motion-fast);
    --duration-base: var(--amc-motion-medium);
    --duration-slow: var(--amc-motion-slow);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
}

/* === Header (rebuilt for Phase 3B) === */
.site-header { background: var(--color-soft-white); border-bottom: 1px solid var(--color-border-gray); position: relative; z-index: 50; }
.site-header-inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 20px var(--container-padding);
    display: flex;
    align-items: center;
    gap: 32px;
}
.site-logo {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--color-ink-black);
    flex-shrink: 0;
}

.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav-primary { gap: 28px; flex-shrink: 0; }
.site-nav-secondary { gap: 22px; flex-shrink: 0; margin-left: auto; }

.site-nav-item { position: relative; }
.nav-link {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-ink-black);
    padding: 8px 0;
    border-bottom: 1px solid transparent;
    background: none;
    border-top: none; border-left: none; border-right: none;
    cursor: pointer;
    font-family: var(--font-sans);
    letter-spacing: 0.02em;
    transition: color var(--duration-quick) ease, border-color var(--duration-quick) ease;
}
.nav-link:hover { border-bottom-color: var(--color-champagne-gold); color: var(--color-ink-black); }
.nav-link-cta {
    padding: 9px 20px;
    background: var(--color-premium-black);
    color: var(--color-pearl-white);
    border: 1px solid var(--color-premium-black);
    letter-spacing: 0.04em;
}
.nav-link-cta:hover {
    background: var(--color-charcoal);
    border-color: var(--color-charcoal);
    color: var(--color-pearl-white);
    border-bottom-color: var(--color-charcoal);
}

.nav-megamenu-button { display: inline-flex; align-items: baseline; gap: 6px; }
.nav-megamenu-caret {
    display: inline-block;
    transform: rotate(90deg);
    font-size: 10px;
    color: var(--color-smoke-gray);
    transition: transform var(--duration-quick) ease, color var(--duration-quick) ease;
}
.site-nav-item.is-open .nav-megamenu-caret { transform: rotate(270deg); color: var(--color-champagne-gold); }
.site-nav-item.is-open .nav-link { border-bottom-color: var(--color-champagne-gold); }

.site-search {
    flex: 1 1 auto;
    max-width: 360px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--color-border-gray);
    transition: border-color var(--duration-quick) ease;
}
.site-search:focus-within { border-bottom-color: var(--color-champagne-gold); }
.site-search-input {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 13px;
    font-family: var(--font-sans);
    color: var(--color-ink-black);
    outline: none;
}
.site-search-input::placeholder { color: var(--color-smoke-gray); }
.site-search-button {
    background: none;
    border: none;
    padding: 8px 4px 8px 12px;
    color: var(--color-ink-black);
    cursor: pointer;
    font-size: 16px;
    transition: color var(--duration-quick) ease, transform var(--duration-quick) ease;
}
.site-search-button:hover { color: var(--color-deep-gold); transform: translateX(2px); }

.logout-form { display: inline; }
.btn-text {
    background: none; border: none; padding: 6px 0; cursor: pointer;
    font-family: var(--font-sans); font-size: 13px; color: var(--color-ink-black);
    border-bottom: 1px solid transparent; transition: border-color var(--duration-quick) ease;
}
.btn-text:hover { border-bottom-color: var(--color-champagne-gold); }

/* Mobile menu trigger */
.mobile-menu-trigger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
    color: var(--color-ink-black);
}
.mobile-menu-icon {
    display: inline-flex; flex-direction: column; gap: 5px; width: 22px;
}
.mobile-menu-icon span {
    display: block; width: 22px; height: 1.5px; background: currentColor;
    transition: transform var(--duration-base) var(--ease-product), opacity var(--duration-base) var(--ease-product);
}
.is-mobile-open .mobile-menu-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.is-mobile-open .mobile-menu-icon span:nth-child(2) { opacity: 0; }
.is-mobile-open .mobile-menu-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
    .site-nav-primary, .site-nav-secondary, .site-search { display: none; }
    .mobile-menu-trigger { display: inline-flex; align-items: center; }
    .site-header-inner { padding: 16px var(--container-padding); }
}

/* === Mega menu === */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-soft-white);
    border-bottom: 1px solid var(--color-border-gray);
    border-top: 1px solid var(--color-border-gray);
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-product), transform var(--duration-base) var(--ease-product), visibility var(--duration-base) var(--ease-product);
    z-index: 49;
}
.mega-menu.is-open {
    opacity: 1; transform: translateY(0); pointer-events: auto;
}
.mega-menu[hidden] { display: block; }
.mega-menu-inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 48px var(--container-padding) 56px;
}
.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(280px, 360px);
    gap: 56px;
    align-items: start;
}
.mega-menu-column { min-width: 0; }
.mega-menu-heading {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-ink-black);
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-border-gray);
    text-decoration: none;
    transition: color var(--duration-quick) ease;
}
.mega-menu-heading:hover { color: var(--color-deep-gold); }
.mega-menu-count {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-deep-gold);
    letter-spacing: 0.06em;
}
.mega-menu-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.mega-menu-link {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    font-size: 13px;
    color: var(--color-smoke-gray);
    padding: 8px 0;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--duration-quick) var(--ease-product), border-color var(--duration-quick) var(--ease-product), transform var(--duration-quick) var(--ease-product);
}
.mega-menu-link:hover {
    color: var(--color-ink-black);
    transform: translateX(4px);
}
.mega-menu-count-small {
    font-size: 10px;
    color: var(--color-border-gray);
    font-variant-numeric: tabular-nums;
}
.mega-menu-promo {
    background: var(--color-premium-black);
    color: var(--color-pearl-white);
    padding: 32px;
    align-self: stretch;
    display: flex; flex-direction: column;
    justify-content: space-between;
    min-height: 240px;
}
.mega-menu-promo-eyebrow {
    font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--color-champagne-gold);
    margin: 0;
}
.mega-menu-promo-title {
    font-family: var(--font-serif); font-size: 24px; font-weight: 500; line-height: 1.2;
    margin: 12px 0 12px 0;
    color: var(--color-pearl-white);
}
.mega-menu-promo-lead {
    font-size: 13px; line-height: 1.55;
    color: rgba(250,250,247,0.7);
    margin: 0 0 24px 0;
    font-weight: 300;
}
.mega-menu-promo-cta {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--color-champagne-gold);
    font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-champagne-gold);
    transition: color var(--duration-quick) var(--ease-product), transform var(--duration-quick) var(--ease-product);
}
.mega-menu-promo-cta:hover { color: var(--color-pearl-white); transform: translateX(4px); }

/* === Mobile drawer === */
.mobile-drawer {
    position: fixed;
    inset: 0;
    background: var(--color-pearl-white);
    z-index: 100;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-product), transform var(--duration-base) var(--ease-product);
}
.mobile-drawer.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-drawer[hidden] { display: block; }
.mobile-drawer-inner {
    max-width: 480px;
    margin: 0 auto;
    padding: 24px;
}
.mobile-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-gray);
    margin-bottom: 24px;
}
.mobile-drawer-close {
    background: none; border: 1px solid var(--color-border-gray);
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; line-height: 1; color: var(--color-ink-black);
    cursor: pointer;
}
.mobile-drawer-close:hover { border-color: var(--color-ink-black); }
.mobile-search { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.mobile-search-input {
    border: 1px solid var(--color-border-gray);
    background: var(--color-soft-white);
    padding: 14px 16px;
    font-size: 14px;
    font-family: var(--font-sans);
    outline: none;
    transition: border-color var(--duration-quick) ease;
}
.mobile-search-input:focus { border-color: var(--color-champagne-gold); }
.mobile-nav { display: flex; flex-direction: column; gap: 0; }
.mobile-nav-primary {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border-gray);
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--color-ink-black);
    text-decoration: none;
    transition: color var(--duration-quick) var(--ease-product), transform var(--duration-quick) var(--ease-product);
}
.mobile-nav-primary:hover { color: var(--color-deep-gold); transform: translateX(4px); }
.mobile-nav-cta { color: var(--color-deep-gold); }
.mobile-nav-button {
    width: 100%; text-align: left; background: none; border: none;
    border-bottom: 1px solid var(--color-border-gray);
    cursor: pointer;
    padding: 16px 0;
    font-family: var(--font-serif); font-size: 18px;
}
.mobile-nav-logout { display: block; }
.mobile-nav-section {
    font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--color-deep-gold);
    margin: 24px 0 8px 0;
}
.mobile-nav-group { border-bottom: 1px solid var(--color-border-gray); }
.mobile-nav-group summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-ink-black);
    cursor: pointer;
    list-style: none;
}
.mobile-nav-group summary::-webkit-details-marker { display: none; }
.mobile-nav-group summary::after {
    content: '+';
    font-size: 20px; line-height: 1; color: var(--color-smoke-gray);
    transition: transform var(--duration-base) var(--ease-product);
}
.mobile-nav-group[open] summary::after { content: '−'; }
.mobile-nav-group ul { list-style: none; margin: 0 0 12px 0; padding: 0 0 0 12px; display: flex; flex-direction: column; gap: 0; border-left: 1px solid var(--color-border-gray); }
.mobile-nav-link {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--color-smoke-gray);
    text-decoration: none;
    transition: color var(--duration-quick) ease;
}
.mobile-nav-link:hover { color: var(--color-ink-black); }
.mobile-nav-link.is-parent { color: var(--color-deep-gold); font-weight: 500; }
.mobile-nav-count {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-deep-gold);
    letter-spacing: 0.06em;
}
.mobile-nav-divider { border: 0; border-top: 1px solid var(--color-border-gray); margin: 24px 0; }

@media (min-width: 1025px) {
    .mobile-drawer { display: none !important; }
}
@media (max-width: 1024px) {
    .mega-menu { display: none; }
}

/* === Footer (extended 3-column) === */
.site-footer {
    margin-top: 96px;
    padding: 0;
    background: var(--color-charcoal);
    color: rgba(250, 250, 247, 0.7);
    font-size: 13px;
}
.site-footer-extended { padding: 0; }
.site-footer-container {
    --footer-line-spacing: 20px;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 96px var(--container-padding) 48px;
}
.site-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 96px;
    padding-bottom: 72px;
    border-bottom: 1px solid rgba(250,250,247,0.08);
}
.site-footer-brand { display: flex; flex-direction: column; gap: var(--footer-line-spacing); }
.site-footer-wordmark {
    font-family: var(--font-serif);
    font-size: 17px; font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--color-pearl-white);
    margin: 0;
    line-height: 0;
}
.site-footer-wordmark-img {
    display: block;
    height: 42px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    /* Footer sits on dark ink-black; the AMC_Logo.png is dark-on-transparent,
       so invert keeps the mark legible without shipping a second asset. */
    filter: invert(1) brightness(1.1);
}
.site-footer-tagline {
    font-size: 14px; font-weight: 300; line-height: 1.6;
    color: rgba(250,250,247,0.6);
    margin: 0;
    max-width: 360px;
}
.site-footer-contact { display: flex; flex-direction: column; gap: var(--footer-line-spacing); }
.site-footer-contact p { margin: 0; font-size: 13px; display: flex; gap: 12px; align-items: baseline; }
.site-footer-contact-label {
    font-size: 10px; font-weight: 500; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--color-champagne-gold);
    flex-shrink: 0; min-width: 56px;
}
.site-footer-contact a {
    color: rgba(250,250,247,0.85);
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration-quick) ease, color var(--duration-quick) ease;
}
.site-footer-contact a:hover { color: var(--color-pearl-white); border-bottom-color: var(--color-champagne-gold); }
.site-footer-column { display: flex; flex-direction: column; gap: var(--footer-line-spacing); }
.site-footer-heading {
    font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-champagne-gold);
    margin: 0;
}
.site-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--footer-line-spacing); line-height: 1.5; }
.site-footer-list a {
    color: rgba(250,250,247,0.75);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color var(--duration-quick) ease, border-color var(--duration-quick) ease;
}
.site-footer-list a:hover {
    color: var(--color-pearl-white);
    border-bottom-color: var(--color-champagne-gold);
}
.site-footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 48px;
    flex-wrap: wrap; gap: 20px;
    font-size: 12px;
    color: rgba(250,250,247,0.45);
}
.site-footer-legal { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.site-footer-legal-divider { color: rgba(250,250,247,0.25); margin: 0 4px; }

@media (max-width: 1180px) and (min-width: 901px) {
    .site-footer-container { padding: 80px var(--container-padding) 40px; }
    .site-footer-grid { gap: 64px; padding-bottom: 64px; }
}

@media (max-width: 900px) {
    .site-footer-container { padding: 72px var(--container-padding) 40px; }
    .site-footer-grid { grid-template-columns: 1fr; gap: 56px; padding-bottom: 56px; }
    .site-footer-tagline { max-width: none; }
    .site-footer-bottom { padding-top: 40px; }
}

/* === Catalog page === */
.catalog-page { padding: 64px 0 96px; }
.catalog-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}
.catalog-header { max-width: 720px; margin-bottom: 48px; }
.catalog-eyebrow {
    font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--color-deep-gold);
    margin: 0 0 16px 0;
}
.catalog-title {
    font-family: var(--font-serif);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 20px 0;
    color: var(--color-ink-black);
}
.catalog-subtitle {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--color-smoke-gray);
    margin: 0 0 16px 0;
    max-width: 600px;
}
.catalog-meta {
    font-size: 12px;
    font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--color-smoke-gray);
    margin: 0;
}

.catalog-search-form {
    display: flex; gap: 12px; align-items: stretch;
    margin-bottom: 32px;
    max-width: 560px;
}
.catalog-search-input {
    flex: 1 1 auto;
    border: 1px solid var(--color-border-gray);
    background: var(--color-soft-white);
    padding: 12px 16px;
    font-size: 14px;
    font-family: var(--font-sans);
    color: var(--color-ink-black);
    outline: none;
    transition: border-color var(--duration-quick) ease;
}
.catalog-search-input:focus { border-color: var(--color-champagne-gold); }

/* Filter pills */
.catalog-filters {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border-gray);
}
.filter-pill {
    display: inline-flex; align-items: center;
    padding: 9px 18px;
    background: transparent;
    border: 1px solid var(--color-border-gray);
    color: var(--color-smoke-gray);
    font-size: 12px;
    font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
    text-decoration: none;
    transition: color var(--duration-quick) ease, border-color var(--duration-quick) ease, background var(--duration-quick) ease;
}
.filter-pill:hover { color: var(--color-ink-black); border-color: var(--color-ink-black); }
.filter-pill.is-active {
    background: var(--color-premium-black);
    color: var(--color-pearl-white);
    border-color: var(--color-premium-black);
}

/* Subcategory pill strip — for category page */
.subcategory-pills {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border-gray);
}
.subcategory-pill {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 9px 18px;
    background: var(--color-soft-white);
    border: 1px solid var(--color-border-gray);
    color: var(--color-ink-black);
    font-size: 13px;
    text-decoration: none;
    transition: border-color var(--duration-quick) ease, color var(--duration-quick) ease, background var(--duration-quick) ease;
}
.subcategory-pill:hover { border-color: var(--color-ink-black); }
.subcategory-pill-count {
    font-size: 11px;
    color: var(--color-smoke-gray);
    font-variant-numeric: tabular-nums;
}

/* === Product grid === */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-bottom: 48px;
}
.product-grid-related { gap: 24px; }

@media (max-width: 1024px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 600px) {
    .product-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* === Product card === */
.product-card {
    display: flex; flex-direction: column;
    background: var(--color-soft-white);
    border: 1px solid var(--color-border-gray);
    text-decoration: none;
    color: var(--color-ink-black);
    transition: border-color var(--duration-base) var(--ease-product),
                transform var(--duration-base) var(--ease-product),
                box-shadow var(--duration-base) var(--ease-product);
    position: relative;
    overflow: hidden;
}
.product-card:hover {
    border-color: var(--color-ink-black);
    transform: translateY(-2px);
    box-shadow: 0 22px 54px -34px rgba(10,10,11,0.34);
}
.product-card-image {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--color-pearl-white);
    overflow: hidden;
    padding: 32px;
    display: flex; align-items: center; justify-content: center;
}
.product-card-image img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform var(--duration-slow) var(--ease-product);
}
.product-card:hover .product-card-image img { transform: scale(1.032); }
.product-card-image-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-border-gray);
    font-family: var(--font-serif); font-size: 32px;
    letter-spacing: 0.12em;
}
.product-card-badge {
    position: absolute;
    top: 14px;
    padding: 5px 12px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.product-card-badge-sale {
    left: 14px;
    background: var(--color-sale-red);
    color: var(--color-pearl-white);
}
.product-card-badge-featured {
    right: 14px;
    background: var(--color-champagne-gold);
    color: var(--color-premium-black);
}
.product-card-body {
    padding: 24px 24px 26px;
    display: flex; flex-direction: column;
    gap: 8px;
    flex: 1;
}
.product-card-category {
    font-size: 10px; font-weight: 500; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--color-smoke-gray);
    margin: 0;
}
.product-card-name {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
    color: var(--color-ink-black);
    /* Keep cards same height */
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card-price-row {
    display: flex; align-items: baseline; gap: 12px;
    margin-top: auto;
    padding-top: 8px;
}
.product-card-price-old {
    font-size: 13px;
    color: var(--color-smoke-gray);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.product-card-price-current {
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 500;
    color: var(--color-ink-black);
    letter-spacing: -0.005em;
}
.product-card.is-on-sale .product-card-price-current {
    color: var(--color-sale-red);
}
/* Listing-only: hide price on catalog product cards. Wishlist (outside
   .catalog-page / .related-products) keeps prices visible. */
.catalog-page .product-card-price-row,
.related-products .product-card-price-row {
    display: none;
}

/* === No-results === */
.no-results-state {
    padding: 80px 32px;
    text-align: center;
    border: 1px dashed var(--color-border-gray);
    background: var(--color-soft-white);
    margin-bottom: 48px;
}
.no-results-title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--color-ink-black);
    margin: 0 0 12px 0;
}
.no-results-body { color: var(--color-smoke-gray); margin: 0; }
.no-results-body a { color: var(--color-ink-black); border-bottom: 1px solid var(--color-champagne-gold); }

/* === Pagination === */
.catalog-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 32px;
    padding: 40px 0;
    margin-top: 16px;
    border-top: 1px solid var(--color-border-gray);
}
.pagination-arrow {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--color-ink-black);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-ink-black);
    transition: color var(--duration-quick) var(--ease-product), border-color var(--duration-quick) var(--ease-product), transform var(--duration-quick) var(--ease-product);
}
.pagination-arrow:hover { color: var(--color-deep-gold); border-bottom-color: var(--color-champagne-gold); transform: translateX(3px); }
.pagination-arrow.is-disabled { color: var(--color-border-gray); border-bottom-color: var(--color-border-gray); cursor: not-allowed; pointer-events: none; }
.pagination-arrow-label { letter-spacing: 0.14em; }

.pagination-status {
    font-family: var(--font-serif);
    font-size: 18px;
    color: var(--color-ink-black);
    display: inline-flex; align-items: baseline; gap: 8px;
}
.pagination-current { font-weight: 500; }
.pagination-divider { color: var(--color-champagne-gold); }
.pagination-total { color: var(--color-smoke-gray); }

/* === Breadcrumb === */
.breadcrumb { margin-bottom: 32px; }
.breadcrumb-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 6px;
    font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--color-smoke-gray);
}
.breadcrumb-item { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb-item a {
    color: var(--color-smoke-gray);
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color var(--duration-quick) ease, border-color var(--duration-quick) ease;
}
.breadcrumb-item a:hover { color: var(--color-ink-black); border-bottom-color: var(--color-champagne-gold); }
.breadcrumb-item.is-current span { color: var(--color-ink-black); }
.breadcrumb-separator { color: var(--color-border-gray); }

/* === Product detail === */
.product-detail { padding: 48px 0 96px; }
.product-detail-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}
.product-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 80px;
    align-items: start;
    margin-bottom: 96px;
}

/* Gallery */
.product-gallery { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 16px; }
.gallery-main {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--color-soft-white);
    border: 1px solid var(--color-border-gray);
    overflow: hidden;
    padding: 56px;
    display: flex; align-items: center; justify-content: center;
}
.gallery-main img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    transition: opacity var(--duration-base) var(--ease-product);
}
.gallery-main img.is-fading { opacity: 0; }
.gallery-placeholder {
    color: var(--color-border-gray);
    font-family: var(--font-serif); font-size: 28px;
    letter-spacing: 0.18em;
}
.gallery-arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;
    background: var(--color-soft-white);
    border: 1px solid var(--color-border-gray);
    color: var(--color-ink-black);
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-product), border-color var(--duration-quick) ease;
}
.gallery-main:hover .gallery-arrow,
.gallery-main:focus-within .gallery-arrow { opacity: 1; }
.gallery-arrow:hover { border-color: var(--color-ink-black); }
.gallery-arrow-prev { left: 16px; }
.gallery-arrow-next { right: 16px; }

.gallery-thumbs {
    display: flex; gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.gallery-thumb {
    flex: 0 0 88px;
    width: 88px; height: 88px;
    border: 1px solid var(--color-border-gray);
    background: var(--color-soft-white);
    cursor: pointer;
    padding: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: border-color var(--duration-quick) ease, transform var(--duration-quick) ease;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumb:hover { border-color: var(--color-smoke-gray); }
.gallery-thumb.is-active { border-color: var(--color-ink-black); }

/* Product info column */
.product-info { display: flex; flex-direction: column; gap: 16px; }
.product-eyebrow {
    font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--color-deep-gold);
    margin: 0;
}
.product-eyebrow a {
    color: inherit;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: border-color var(--duration-quick) ease, color var(--duration-quick) ease;
}
.product-eyebrow a:hover { border-bottom-color: var(--color-champagne-gold); color: var(--color-ink-black); }
.product-name {
    font-family: var(--font-serif);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--color-ink-black);
}
.product-sku {
    font-size: 12px;
    color: var(--color-smoke-gray);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.product-sku span { color: var(--color-ink-black); font-weight: 500; }

.product-price-block {
    display: flex; align-items: baseline; gap: 14px;
    flex-wrap: wrap;
    padding: 16px 0;
    margin: 8px 0 4px;
    border-top: 1px solid var(--color-border-gray);
    border-bottom: 1px solid var(--color-border-gray);
}
.product-price-old {
    font-size: 16px;
    color: var(--color-smoke-gray);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.product-price-discount {
    background: var(--color-sale-red);
    color: var(--color-pearl-white);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.product-price-current {
    font-family: var(--font-serif);
    font-size: clamp(26px, 3.4vw, 34px);
    font-weight: 500;
    color: var(--color-ink-black);
    letter-spacing: -0.01em;
}
.product-price-block.is-on-sale .product-price-current { color: var(--color-sale-red); }

.product-short-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-smoke-gray);
    margin: 0;
    font-weight: 300;
}
.product-short-description > * { margin: 0; }
.product-short-description > * + * { margin-top: 0.6em; }
.product-short-description p { color: inherit; }
.product-short-description strong { color: var(--color-ink-black); font-weight: 500; }
.product-short-description h4 {
    font-family: var(--font-serif);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-black);
    margin-top: 1em;
}
.product-short-description ul,
.product-short-description ol {
    padding-left: 1.2em;
    color: var(--color-ink-black);
    font-weight: 400;
}
.product-short-description ul li::marker { color: var(--color-champagne-gold); }
.product-short-description li + li { margin-top: 0.3em; }

/* Klub cashback card */
.klub-cashback-card {
    margin-top: 16px;
    padding: 28px 28px 26px;
    background: var(--color-deep-navy);
    color: var(--color-pearl-white);
    position: relative;
    border-left: 3px solid var(--color-champagne-gold);
}
.klub-cashback-eyebrow {
    font-size: 10px; font-weight: 500; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--color-champagne-gold);
    margin: 0 0 10px 0;
}
.klub-cashback-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
    margin: 0 0 22px 0;
    color: var(--color-pearl-white);
    white-space: nowrap;
}
.klub-cashback-title-part { display: inline; }
@media (min-width: 601px) and (max-width: 1100px) {
    .klub-cashback-title { font-size: 17px; }
}
@media (max-width: 600px) {
    .klub-cashback-card { text-align: center; }
    .klub-cashback-title { white-space: normal; }
    .klub-cashback-title-part { display: block; }
    .klub-cashback-tier { text-align: left; }
}
.klub-cashback-tiers { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.klub-cashback-tier {
    display: grid;
    grid-template-columns: minmax(80px, auto) 1fr auto;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid rgba(250,250,247,0.08);
}
.klub-cashback-tier:first-child { border-top: none; }
.tier-label {
    font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-pearl-white);
}
.klub-cashback-tier.tier-tag .tier-label { color: #B89970; }
.klub-cashback-tier.tier-plus .tier-label { color: #9DA0A8; }
.klub-cashback-tier.tier-elite .tier-label { color: var(--color-champagne-gold); }
.tier-desc {
    font-size: 13px; line-height: 1.5;
    color: rgba(250,250,247,0.65);
    font-weight: 300;
}
.tier-desc strong { color: var(--color-pearl-white); font-weight: 500; }
.tier-amount {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 500;
    color: var(--color-champagne-gold);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.klub-cashback-footnote {
    margin: 14px 0 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(250,250,247,0.06);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: rgba(250,250,247,0.55);
    font-weight: 300;
    text-align: left;
}
@media (max-width: 768px) {
    .klub-cashback-footnote { text-align: center; }
}

/* CTA row */
.product-cta-row {
    display: flex; flex-direction: column; gap: 12px;
    margin-top: 12px;
}
.btn-large {
    padding: 17px 36px;
    font-size: 12px;
    letter-spacing: 0.18em;
}
.product-cta-note {
    font-size: 12px;
    color: var(--color-smoke-gray);
    margin: 0;
    text-align: center;
}

/* Stock indicator */
.product-stock {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13px;
    font-weight: 500;
    padding: 12px 0;
    border-top: 1px solid var(--color-border-gray);
}
.product-stock .stock-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.product-stock.is-in-stock { color: var(--color-stock-green); }
.product-stock.is-in-stock .stock-dot { background: var(--color-stock-green); box-shadow: 0 0 0 4px rgba(79,128,96,0.12); }
.product-stock.is-out-of-stock { color: var(--color-sale-red); }
.product-stock.is-out-of-stock .stock-dot { background: var(--color-sale-red); }

/* Trust badges */
.product-badges {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    border-top: 1px solid var(--color-border-gray);
    padding-top: 16px;
    margin-top: 4px;
}
.product-badge {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px;
    color: var(--color-ink-black);
    padding: 6px 0;
    font-weight: 500;
}
.product-badge-icon {
    color: var(--color-champagne-gold);
    font-size: 8px;
}

/* Tabs */
.product-tabs {
    margin-bottom: 0;
    border-top: 1px solid var(--color-border-gray);
}
.product-tab-list {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--color-border-gray);
    overflow-x: auto;
}
.product-tab-button {
    padding: 22px 0;
    margin-right: 40px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-smoke-gray);
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: -1px;
    transition: color var(--duration-quick) ease, border-color var(--duration-quick) ease;
}
.product-tab-button:hover { color: var(--color-ink-black); }
.product-tab-button.is-active {
    color: var(--color-ink-black);
    border-bottom-color: var(--color-ink-black);
}
.product-tab-panels { padding: 48px 0 32px 0; }
.product-tab-panel { display: none; }
.product-tab-panel.is-active { display: block; }
.product-tab-panel[hidden] { display: none; }

/* Product description content (Elementor sanitised) */
.product-description-content {
    max-width: 760px;
    font-size: 15px; line-height: 1.8;
    color: var(--color-ink-black);
    font-weight: 400;
}
.product-description-content > * + * { margin-top: 1.2em; }
.product-description-content p { margin: 0 0 1em 0; }
.product-description-content h1,
.product-description-content h2,
.product-description-content h3,
.product-description-content h4 {
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-ink-black);
    margin: 1.6em 0 0.6em 0;
}
.product-description-content h1 { font-size: 28px; }
.product-description-content h2 { font-size: 24px; }
.product-description-content h3 { font-size: 20px; }
.product-description-content h4 { font-size: 17px; }
.product-description-content ul,
.product-description-content ol {
    padding-left: 1.4em;
    margin: 0 0 1em 0;
    line-height: 1.7;
}
.product-description-content li { margin-bottom: 0.4em; padding-left: 6px; }
.product-description-content ul li::marker { color: var(--color-champagne-gold); }
.product-description-content strong { font-weight: 500; color: var(--color-premium-black); }
.product-description-content em { font-style: italic; color: var(--color-charcoal); }
.product-description-content a {
    color: var(--color-ink-black);
    border-bottom: 1px solid var(--color-champagne-gold);
    padding-bottom: 1px;
    transition: color var(--duration-quick) ease;
}
.product-description-content a:hover { color: var(--color-deep-gold); }
.product-description-content img {
    width: 100%; height: auto;
    margin: 1.6em 0;
    border: 1px solid var(--color-border-gray);
}
.product-description-content blockquote {
    margin: 1.6em 0; padding: 16px 24px;
    border-left: 2px solid var(--color-champagne-gold);
    font-family: var(--font-serif);
    font-size: 18px; line-height: 1.5;
    color: var(--color-charcoal);
    font-style: italic;
}

/* Specifications table */
.product-spec-table {
    width: 100%;
    max-width: 720px;
    border-collapse: collapse;
    font-size: 14px;
}
.product-spec-table tr { border-bottom: 1px solid var(--color-border-gray); }
.product-spec-table tr:first-child { border-top: 1px solid var(--color-border-gray); }
.product-spec-table th {
    text-align: left;
    padding: 14px 24px 14px 0;
    font-weight: 500;
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--color-smoke-gray);
    width: 30%;
    vertical-align: top;
}
.product-spec-table td {
    padding: 14px 0;
    color: var(--color-ink-black);
}

/* Shipping/Warranty cards */
.product-shipping-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 920px;
}
.product-shipping-card {
    background: var(--color-soft-white);
    border: 1px solid var(--color-border-gray);
    padding: 28px 32px;
}
.shipping-eyebrow {
    font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--color-deep-gold);
    margin: 0 0 20px 0;
}
.shipping-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.shipping-list li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-gray);
    font-size: 13px;
    color: var(--color-ink-black);
}
.shipping-list li:last-child { border-bottom: none; }
.shipping-meta {
    font-size: 12px;
    color: var(--color-smoke-gray);
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Related products section */
.related-products { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--color-border-gray); }
.related-header { margin-bottom: 32px; }
.related-eyebrow {
    font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--color-deep-gold);
    margin: 0 0 12px 0;
}
.related-title {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    color: var(--color-ink-black);
}

@media (max-width: 1024px) {
    .product-detail-grid { grid-template-columns: 1fr; gap: 48px; }
    .product-gallery { position: static; }
    .product-shipping-grid { grid-template-columns: 1fr; }
}
/* Tighten the gap between the product info column (ending at the stock
   indicator on mobile) and the description tabs below it. The 96 px
   margin-bottom on .product-detail-grid reads as accidental whitespace
   when the layout collapses to a single column; ~32 px keeps the two
   blocks calmly separated without a layout-bug feel. Desktop (≥1024px)
   keeps the original 96 px breathing room. */
@media (max-width: 1023px) {
    .product-detail-grid { margin-bottom: 32px; }
}
@media (max-width: 600px) {
    .product-tab-button { margin-right: 24px; padding: 16px 0; }
    .product-badges { grid-template-columns: 1fr; }
    .gallery-main { padding: 28px; }
}

/* === Homepage === */
.home-hero {
    background: var(--color-premium-black);
    color: var(--color-pearl-white);
    padding: clamp(80px, 12vw, 144px) 24px clamp(64px, 10vw, 112px);
    position: relative;
    overflow: hidden;
}
.home-hero::before {
    content: '';
    position: absolute;
    inset: auto -20% -40% auto;
    width: 60%;
    height: 80%;
    background: radial-gradient(circle at 50% 50%, rgba(201,169,97,0.18), transparent 60%);
    pointer-events: none;
}
.home-hero-inner {
    max-width: var(--container-max);
    margin-inline: auto;
    position: relative;
}
.home-hero-eyebrow {
    font-size: 11px; font-weight: 500; letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-champagne-gold);
    margin: 0 0 28px 0;
}
.home-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(48px, 8vw, 88px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin: 0 0 28px 0;
    max-width: 760px;
    color: var(--color-pearl-white);
}
.home-hero-lead {
    font-size: clamp(16px, 1.6vw, 19px);
    font-weight: 300;
    line-height: 1.6;
    color: rgba(250,250,247,0.7);
    margin: 0 0 40px 0;
    max-width: 560px;
}
.home-hero-actions {
    display: flex; align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 64px;
}
.home-hero-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--color-pearl-white);
    font-size: 13px; font-weight: 500;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--color-champagne-gold);
    padding-bottom: 4px;
    transition: color var(--duration-quick) var(--ease-product), transform var(--duration-quick) var(--ease-product);
}
.home-hero-secondary:hover { color: var(--color-champagne-gold); transform: translateX(3px); }

.home-hero-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    gap: 56px;
    padding-top: 32px;
    border-top: 1px solid rgba(250,250,247,0.12);
    max-width: 640px;
}
.home-hero-meta-value {
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 500;
    line-height: 1;
    color: var(--color-champagne-gold);
    margin: 0 0 6px 0;
}
.home-hero-meta-label {
    font-size: 11px; font-weight: 400; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(250,250,247,0.55);
    margin: 0;
}

.home-section { padding: clamp(64px, 9vw, 112px) 0; }
.home-section + .home-section { padding-top: 0; }
.home-section-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}
.home-section-header {
    display: flex; align-items: end; justify-content: space-between;
    gap: 24px;
    margin-bottom: 48px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border-gray);
    flex-wrap: wrap;
}
.home-section-header-centered {
    flex-direction: column; align-items: flex-start;
    border-bottom: none; padding-bottom: 0;
    margin-bottom: 56px;
    max-width: 640px;
}
.home-section-eyebrow {
    font-size: 11px; font-weight: 500; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--color-deep-gold);
    margin: 0 0 14px 0;
}
.home-section-title {
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--color-ink-black);
}
.home-section-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--color-ink-black);
    font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-ink-black);
    padding-bottom: 2px;
    transition: color var(--duration-quick) var(--ease-product), border-color var(--duration-quick) var(--ease-product), transform var(--duration-quick) var(--ease-product);
}
.home-section-link:hover { color: var(--color-deep-gold); border-bottom-color: var(--color-champagne-gold); transform: translateX(3px); }

/* Category tiles */
.category-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
.category-tile {
    display: flex; flex-direction: column;
    text-decoration: none;
    color: var(--color-ink-black);
    transition: transform var(--duration-base) var(--ease-product);
}
.category-tile:hover { transform: translateY(-3px); }
.category-tile-image {
    aspect-ratio: 4 / 3;
    background: var(--color-soft-white);
    border: 1px solid var(--color-border-gray);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: border-color var(--duration-quick) ease;
}
.category-tile:hover .category-tile-image { border-color: var(--color-ink-black); }
.category-tile-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-product);
}
.category-tile:hover .category-tile-image img { transform: scale(1.04); }
.category-tile-monogram {
    font-family: var(--font-serif);
    font-size: 64px;
    font-weight: 400;
    color: var(--color-border-gray);
    line-height: 1;
}
.category-tile:hover .category-tile-monogram { color: var(--color-champagne-gold); }
.category-tile-body {
    padding: 18px 0 4px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.category-tile-name {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    margin: 0;
}
.category-tile-count {
    font-size: 11px; font-weight: 500; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--color-smoke-gray);
    margin: 0;
}

@media (max-width: 1024px) {
    .category-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .category-tiles { grid-template-columns: 1fr; gap: 20px; }
    .home-hero-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .home-hero-meta-value { font-size: 24px; }
    .home-section-header { flex-direction: column; align-items: flex-start; }
}

/* AMC Klub program section */
.home-klub { background: var(--color-soft-white); }
.home-klub-eyebrow { color: var(--color-deep-gold); }
.home-klub-title { max-width: 720px; }
.home-klub-lead {
    font-size: 16px; line-height: 1.7;
    color: var(--color-smoke-gray);
    font-weight: 300;
    margin: 16px 0 0 0;
    max-width: 600px;
}
.home-klub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 48px;
}
.home-klub-card {
    padding: 36px 32px;
    background: var(--color-pearl-white);
    border: 1px solid var(--color-border-gray);
    display: flex; flex-direction: column;
    transition: border-color var(--duration-base) var(--ease-product), transform var(--duration-base) var(--ease-product);
}
.home-klub-card:hover { border-color: var(--color-ink-black); transform: translateY(-2px); }
.home-klub-card.is-highlighted {
    background: var(--color-premium-black);
    color: var(--color-pearl-white);
    border-color: var(--color-premium-black);
}
.home-klub-card-eyebrow {
    font-size: 11px; font-weight: 500; letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-deep-gold);
    margin: 0 0 16px 0;
}
.home-klub-card.tier-tag .home-klub-card-eyebrow { color: #B89970; }
.home-klub-card.tier-plus .home-klub-card-eyebrow { color: var(--color-champagne-gold); }
.home-klub-card.tier-elite .home-klub-card-eyebrow { color: var(--color-champagne-gold); }
.home-klub-card-title {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 16px 0;
    color: inherit;
}
.home-klub-card.is-highlighted .home-klub-card-title { color: var(--color-pearl-white); }
.home-klub-card-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-smoke-gray);
    margin: 0 0 24px 0;
    font-weight: 300;
}
.home-klub-card.is-highlighted .home-klub-card-body { color: rgba(250,250,247,0.7); }
.home-klub-card-body strong { color: var(--color-ink-black); font-weight: 500; }
.home-klub-card.is-highlighted .home-klub-card-body strong { color: var(--color-pearl-white); }
.home-klub-card-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
    font-size: 13px;
    color: var(--color-ink-black);
    margin-top: auto;
}
.home-klub-card.is-highlighted .home-klub-card-list { color: rgba(250,250,247,0.85); }
.home-klub-card-list li {
    padding-left: 22px;
    position: relative;
}
.home-klub-card-list li::before {
    content: '◆';
    position: absolute;
    left: 0; top: 0;
    color: var(--color-champagne-gold);
    font-size: 8px;
    line-height: 1.85;
}
.home-klub-cta {
    display: flex; align-items: center; gap: 24px;
    flex-wrap: wrap;
    padding-top: 16px;
}
.home-klub-cta-secondary {
    color: var(--color-ink-black);
    font-size: 13px; font-weight: 500;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-champagne-gold);
    padding-bottom: 2px;
    transition: color var(--duration-quick) ease;
}
.home-klub-cta-secondary:hover { color: var(--color-deep-gold); }

@media (max-width: 1024px) {
    .home-klub-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* === Mobile-only header tweaks for very small screens === */
@media (max-width: 480px) {
    .site-header-inner { padding: 14px 20px; gap: 12px; }
    .site-logo { font-size: 14px; letter-spacing: 0.18em; }
    .product-detail { padding: 32px 0 64px; }
    .catalog-page { padding: 40px 0 64px; }
    .home-section { padding: 64px 0; }
}

/* ============================================================== */
/* === Phase 4: Cart, Checkout, Stripe, Success, Orders === */
/* ============================================================== */

:root {
    --motion-checkout: var(--amc-ease-premium);
}

/* === Cart icon in header === */
.cart-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-ink-black);
    cursor: pointer;
    padding: 0;
    margin-right: 8px;
    transition: border-color var(--duration-quick) var(--ease-product), color var(--duration-quick) var(--ease-product), transform var(--duration-quick) var(--ease-product);
}
.cart-icon:hover { border-color: var(--color-champagne-gold); transform: translateY(-1px); }
.cart-icon-svg { display: block; width: 22px; height: 22px; stroke: currentColor; }
.cart-icon-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-champagne-gold);
    color: var(--color-premium-black);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    letter-spacing: 0;
    transform: scale(0);
    transform-origin: center;
    transition: transform var(--duration-base) var(--motion-checkout);
    pointer-events: none;
}
.cart-icon-badge.is-visible { transform: scale(1); }

/* === Cart drawer === */
.cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 11, 0.55);
    opacity: 0;
    visibility: hidden;
    z-index: 95;
    transition: opacity var(--duration-base) var(--motion-checkout), visibility var(--duration-base) var(--motion-checkout);
}
body[data-cart-open="true"] .cart-drawer-overlay { opacity: 1; visibility: visible; }

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100%;
    height: 100vh;
    background: var(--color-soft-white);
    color: var(--color-ink-black);
    z-index: 100;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 560ms var(--motion-checkout), visibility 560ms var(--motion-checkout);
    box-shadow: -24px 0 48px rgba(10, 10, 11, 0.12);
    visibility: hidden;
}
body[data-cart-open="true"] .cart-drawer { transform: translateX(0); visibility: visible; }
.cart-drawer[hidden] { display: flex; }
@media (max-width: 480px) {
    .cart-drawer { width: 100%; }
}

.cart-drawer-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    padding: 28px 28px 16px 28px;
    border-bottom: 1px solid var(--color-border-gray);
}
.cart-drawer-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 4px 0; }
.cart-drawer-count { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin: 0; line-height: 1.2; }
.cart-drawer-close {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: start;
    background: none;
    border: none;
    color: var(--color-ink-black);
    width: 36px;
    height: 36px;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--duration-quick) var(--ease-product), transform var(--duration-quick) var(--ease-product);
}
.cart-drawer-close:hover { color: var(--color-deep-gold); transform: rotate(90deg); }

.cart-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 28px 24px 28px;
    -webkit-overflow-scrolling: touch;
}
.cart-drawer-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.cart-drawer-item {
    position: relative;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border-gray);
}
.cart-drawer-item:last-child { border-bottom: none; }
.cart-drawer-item-image {
    display: block;
    width: 80px;
    height: 80px;
    background: var(--color-pearl-white);
    overflow: hidden;
}
.cart-drawer-item-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-drawer-item-placeholder {
    display: flex;
    width: 100%; height: 100%;
    align-items: center; justify-content: center;
    font-family: var(--font-serif); font-size: 12px; color: var(--color-deep-gold);
    letter-spacing: 0.18em;
}
.cart-drawer-item-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cart-drawer-item-eyebrow { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0; }
.cart-drawer-item-name {
    display: block;
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-ink-black);
    line-height: 1.3;
    text-decoration: none;
    margin: 0;
}
.cart-drawer-item-name:hover { color: var(--color-deep-gold); }
.cart-drawer-item-variant { font-size: 12px; color: var(--color-smoke-gray); margin: 0; }
.cart-drawer-item-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 6px;
}
.cart-drawer-item-line-total { font-family: var(--font-serif); font-size: 14px; font-weight: 500; margin: 0; font-variant-numeric: tabular-nums; }
.cart-drawer-item-remove {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    color: var(--color-smoke-gray);
    width: 26px;
    height: 26px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--duration-quick) var(--ease-product), transform var(--duration-quick) var(--ease-product);
}
.cart-drawer-item-remove:hover { color: var(--color-sale-red); transform: translateY(-1px); }

.cart-drawer-empty {
    text-align: center;
    padding: 48px 16px 32px 16px;
}
.cart-drawer-empty-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 8px 0; }
.cart-drawer-empty-title { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin: 0 0 8px 0; line-height: 1.2; }
.cart-drawer-empty-lead { font-size: 13px; color: var(--color-smoke-gray); margin: 0 0 24px 0; }

.cart-drawer-footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--color-border-gray);
    padding: 22px 28px 28px 28px;
    background: var(--color-pearl-white);
}
.cart-drawer-footer.is-empty { display: none; }
.cart-drawer-subtotal { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.cart-drawer-subtotal span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-smoke-gray); }
.cart-drawer-subtotal strong { font-family: var(--font-serif); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cart-drawer-shipping-note { font-size: 12px; color: var(--color-smoke-gray); margin: 0 0 16px 0; }
.cart-drawer-cta { margin-bottom: 12px; }
.cart-drawer-secondary {
    display: block; text-align: center; font-size: 12px; color: var(--color-ink-black);
    border-bottom: 1px solid transparent; padding-bottom: 2px;
    transition: border-color var(--duration-quick) var(--ease-product);
}
.cart-drawer-secondary:hover { border-bottom-color: var(--color-champagne-gold); }

/* === Quantity control === */
.qty-control {
    display: inline-flex; align-items: center; border: 1px solid var(--color-border-gray); background: var(--color-soft-white);
}
.qty-button {
    background: transparent; border: none; width: 32px; height: 32px;
    font-size: 16px; font-weight: 400; color: var(--color-ink-black);
    cursor: pointer; padding: 0; line-height: 1;
    transition: background-color var(--duration-quick) var(--ease-product), color var(--duration-quick) var(--ease-product);
}
.qty-button:hover { background: var(--color-pearl-white); color: var(--color-deep-gold); }
.qty-button:disabled { opacity: 0.4; cursor: not-allowed; }
.qty-input {
    width: 38px; border: none; text-align: center; font-family: var(--font-sans);
    font-size: 13px; font-variant-numeric: tabular-nums; color: var(--color-ink-black);
    padding: 6px 0; background: transparent; outline: none;
    -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* === Cart page === */
.cart-page { padding: 32px 0 96px; background: var(--color-pearl-white); }
.cart-page-container { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-padding); }
.cart-page-header { margin: 16px 0 32px; }
.cart-page-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 8px 0; }
.cart-page-title { font-family: var(--font-serif); font-size: 40px; font-weight: 500; line-height: 1.1; margin: 0; }
@media (max-width: 768px) { .cart-page-title { font-size: 32px; } }

.cart-page-warning {
    background: #FFF4E5;
    border-left: 3px solid #C9A961;
    padding: 18px 22px;
    margin-bottom: 32px;
}
.cart-page-warning-title { font-family: var(--font-serif); font-weight: 500; margin: 0 0 4px 0; font-size: 16px; }
.cart-page-warning-lead { font-size: 13px; color: var(--color-ink-black); margin: 0 0 8px 0; }
.cart-page-warning ul { margin: 8px 0 0 18px; padding: 0; font-size: 13px; }
.cart-page-warning ul li { margin: 4px 0; }
.cart-page-warning-old { color: var(--color-smoke-gray); text-decoration: line-through; margin: 0 4px; }
.cart-page-warning-new { color: var(--color-deep-gold); font-weight: 500; }

.cart-page-empty {
    background: var(--color-soft-white); padding: 80px 32px; text-align: center;
    border: 1px solid var(--color-border-gray);
}
.cart-page-empty-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 8px 0; }
.cart-page-empty-title { font-family: var(--font-serif); font-size: 28px; font-weight: 500; margin: 0 0 8px 0; }
.cart-page-empty-lead { font-size: 14px; color: var(--color-smoke-gray); margin: 0 0 24px 0; max-width: 480px; margin-inline: auto; }

.cart-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: flex-start; }
@media (max-width: 980px) { .cart-page-grid { grid-template-columns: 1fr; gap: 32px; } }

.cart-page-items { display: flex; flex-direction: column; gap: 24px; }
.cart-line {
    display: grid; grid-template-columns: 120px 1fr auto; gap: 24px;
    background: var(--color-soft-white); border: 1px solid var(--color-border-gray);
    padding: 20px;
}
@media (max-width: 600px) {
    .cart-line { grid-template-columns: 84px 1fr; gap: 16px; padding: 16px; }
    .cart-line-total { grid-column: 1 / 3; padding-top: 8px; border-top: 1px dashed var(--color-border-gray); display: flex; justify-content: space-between; align-items: baseline; }
}
.cart-line-image {
    display: block; width: 120px; height: 120px; background: var(--color-pearl-white); overflow: hidden;
}
@media (max-width: 600px) { .cart-line-image { width: 84px; height: 84px; } }
.cart-line-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-placeholder { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--color-deep-gold); font-family: var(--font-serif); letter-spacing: 0.18em; }
.cart-line-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cart-line-eyebrow { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0; }
.cart-line-title { font-family: var(--font-serif); font-size: 18px; font-weight: 500; line-height: 1.2; margin: 0; }
.cart-line-title a { color: var(--color-ink-black); text-decoration: none; }
.cart-line-title a:hover { color: var(--color-deep-gold); }
.cart-line-variant { font-size: 13px; color: var(--color-smoke-gray); margin: 0; }
.cart-line-unit { font-size: 12px; color: var(--color-smoke-gray); margin: 4px 0 0 0; font-variant-numeric: tabular-nums; }
.cart-line-controls { display: flex; align-items: center; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.cart-line-remove-form { margin: 0; }
.cart-line-remove {
    background: transparent; border: none; padding: 6px 0;
    font-size: 12px; letter-spacing: 0.06em; color: var(--color-smoke-gray);
    border-bottom: 1px solid transparent; cursor: pointer;
}
.cart-line-remove:hover { color: var(--color-sale-red); border-bottom-color: var(--color-sale-red); }
.cart-line-total { text-align: right; }
.cart-line-total-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-smoke-gray); margin: 0 0 4px 0; }
.cart-line-total-value { font-family: var(--font-serif); font-size: 20px; font-weight: 500; margin: 0; font-variant-numeric: tabular-nums; }
.cart-page-back { margin: 32px 0 0 0; font-size: 13px; }
.cart-page-back a { color: var(--color-ink-black); border-bottom: 1px solid transparent; padding-bottom: 2px; }
.cart-page-back a:hover { border-bottom-color: var(--color-champagne-gold); }

.cart-summary { position: sticky; top: 24px; }
@media (max-width: 980px) { .cart-summary { position: static; } }
.cart-summary-card { background: var(--color-soft-white); border: 1px solid var(--color-border-gray); padding: 28px; }
.cart-summary-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 8px 0; }
.cart-summary-title { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin: 0 0 24px 0; }
.cart-summary-list { margin: 0 0 24px 0; padding: 0; }
.cart-summary-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; font-size: 14px; }
.cart-summary-row dt { color: var(--color-smoke-gray); margin: 0; }
.cart-summary-row dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--color-ink-black); font-weight: 500; }
.cart-summary-row-muted dd { color: var(--color-smoke-gray); font-style: italic; font-weight: 400; }
.cart-summary-total {
    display: flex; justify-content: space-between; align-items: baseline;
    border-top: 1px solid var(--color-ink-black); padding-top: 18px; margin-bottom: 24px;
}
.cart-summary-total-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-smoke-gray); }
.cart-summary-total-value { font-family: var(--font-serif); font-size: 30px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cart-summary-cta { margin-bottom: 16px; }
.cart-summary-vat { font-size: 12px; color: var(--color-smoke-gray); margin: 0; }
/*
 * "ebből ÁFA (27 %)" line — informational, sits directly under the
 * total. Same flex/baseline pattern as cart-summary-row so the
 * label/value align perfectly with the rows above; muted colour and
 * smaller font signal that it is supplementary info, not a separate
 * cost. Sits ABOVE the CTA button (inside the bordered total block) so
 * it visually belongs to "the total" rather than the trailing legal
 * copy.
 */
.cart-summary-vat-row {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: -16px 0 20px 0; font-size: 12px;
    font-variant-numeric: tabular-nums; color: var(--color-smoke-gray);
}
.cart-summary-vat-label { letter-spacing: 0.04em; }
.cart-summary-vat-value { font-weight: 500; }

/* === Checkout page === */
.checkout-page { padding: 32px 0 96px; background: var(--color-pearl-white); }
.checkout-container { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-padding); }
.checkout-header { margin: 16px 0 40px; max-width: 720px; }
.checkout-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 8px 0; }
.checkout-title { font-family: var(--font-serif); font-size: 40px; font-weight: 500; line-height: 1.1; margin: 0 0 12px 0; }
.checkout-lead { font-size: 14px; line-height: 1.6; color: var(--color-smoke-gray); margin: 0; }
@media (max-width: 768px) { .checkout-title { font-size: 30px; } }

.checkout-warning {
    background: #FFF4E5; border-left: 3px solid #C9A961;
    padding: 18px 22px; margin-bottom: 32px;
}
.checkout-warning-title { font-family: var(--font-serif); font-weight: 500; margin: 0 0 4px 0; font-size: 16px; }
.checkout-warning-lead { font-size: 13px; margin: 0 0 8px 0; }
.checkout-warning ul { margin: 8px 0 0 18px; padding: 0; font-size: 13px; }

.checkout-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px;
    align-items: flex-start;
}
@media (max-width: 980px) { .checkout-grid { grid-template-columns: 1fr; gap: 32px; } }
.checkout-main { display: flex; flex-direction: column; gap: 32px; }

.checkout-section {
    background: var(--color-soft-white);
    border: 1px solid var(--color-border-gray);
    padding: 28px 32px;
}
@media (max-width: 600px) { .checkout-section { padding: 22px 20px; } }
.checkout-section-header {
    display: flex; align-items: baseline; gap: 16px;
    border-bottom: 1px solid var(--color-border-gray); padding-bottom: 14px;
    margin-bottom: 22px;
}
.checkout-section-eyebrow {
    font-family: var(--font-serif); font-size: 18px; color: var(--color-deep-gold);
    letter-spacing: 0; margin: 0; line-height: 1; min-width: 28px;
}
.checkout-section-title { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin: 0; line-height: 1.2; }
.checkout-section-note { padding-block: 22px; }
.checkout-billing-fields { margin-top: 14px; padding-top: 18px; border-top: 1px dashed var(--color-border-gray); }
.checkout-billing-fields[hidden] { display: none; }
.checkout-billing-company { margin-top: 14px; }
.checkout-billing-company[hidden] { display: none; }
.checkout-empty { font-size: 14px; color: var(--color-smoke-gray); margin: 0; }

/* === Shipping method cards === */
.shipping-method-list { display: flex; flex-direction: column; gap: 12px; }
.shipping-method-card {
    display: block;
    border: 1px solid var(--color-border-gray);
    background: var(--color-soft-white);
    cursor: pointer;
    transition: border-color var(--duration-quick) var(--motion-checkout), box-shadow var(--duration-quick) var(--motion-checkout), background-color var(--duration-quick) var(--motion-checkout);
    position: relative;
    padding: 18px 20px 18px 56px;
}
.shipping-method-card input[type="radio"] {
    position: absolute; left: 22px; top: 22px; margin: 0;
    accent-color: var(--color-champagne-gold);
}
.shipping-method-card.is-selected {
    border-color: var(--color-champagne-gold);
    background: linear-gradient(0deg, rgba(201, 169, 97, 0.03), rgba(201, 169, 97, 0.03));
    box-shadow: inset 0 0 0 1px var(--color-champagne-gold);
}
.shipping-method-card:hover { border-color: var(--color-deep-gold); }
.shipping-method-card-body { display: flex; flex-direction: column; gap: 4px; }
.shipping-method-name { font-size: 15px; font-weight: 500; color: var(--color-ink-black); }
.shipping-method-desc { font-size: 12px; color: var(--color-smoke-gray); }
.shipping-method-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.shipping-method-meta > span:not(.shipping-method-price) { font-size: 12px; color: var(--color-smoke-gray); }
.shipping-method-price { font-family: var(--font-serif); font-size: 16px; font-weight: 500; color: var(--color-ink-black); font-variant-numeric: tabular-nums; margin-left: auto; }
.shipping-method-free-tag { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-deep-gold); margin-top: 4px; }

/* === Stripe Payment Element wrapper === */
.payment-element-container {
    background: var(--color-pearl-white);
    border: 1px solid var(--color-border-gray);
    padding: 18px 20px;
    min-height: 60px;
    transition: border-color var(--duration-quick) var(--motion-checkout), box-shadow var(--duration-quick) var(--motion-checkout);
}
.payment-element-container:focus-within { border-color: var(--color-champagne-gold); box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.12); }
.payment-element-loading { font-size: 13px; color: var(--color-smoke-gray); margin: 0; }
.payment-element-error {
    margin: 12px 0 0 0; font-size: 13px; color: var(--color-sale-red);
}
.checkout-payment-lead { font-size: 13px; color: var(--color-smoke-gray); margin: 0 0 16px 0; }

/* === Checkout summary (sticky) === */
.checkout-summary { position: sticky; top: 24px; }
@media (max-width: 980px) { .checkout-summary { position: static; } }
.checkout-summary-sticky {
    background: var(--color-soft-white);
    border: 1px solid var(--color-border-gray);
    padding: 28px;
}
.checkout-summary-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 8px 0; }
.checkout-summary-title { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin: 0 0 20px 0; }

.checkout-summary-items { list-style: none; padding: 0; margin: 0 0 20px 0; display: flex; flex-direction: column; gap: 14px; max-height: 220px; overflow-y: auto; }
.checkout-summary-item {
    display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center;
    padding-bottom: 14px; border-bottom: 1px solid var(--color-border-gray);
}
.checkout-summary-item:last-child { border-bottom: none; padding-bottom: 0; }
.checkout-summary-thumb { position: relative; width: 56px; height: 56px; background: var(--color-pearl-white); }
.checkout-summary-thumb img { width: 100%; height: 100%; object-fit: cover; }
.checkout-summary-qty {
    position: absolute; top: -8px; right: -8px;
    min-width: 22px; height: 22px; padding: 0 6px;
    background: var(--color-premium-black); color: var(--color-pearl-white);
    border-radius: 11px; font-size: 11px; font-weight: 500; line-height: 22px;
    text-align: center; font-variant-numeric: tabular-nums;
}
.checkout-summary-meta { display: flex; flex-direction: column; min-width: 0; }
.checkout-summary-name {
    font-size: 13px; font-weight: 500; color: var(--color-ink-black);
    line-height: 1.3; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.checkout-summary-variant { font-size: 11px; color: var(--color-smoke-gray); }
.checkout-summary-price { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--color-ink-black); font-weight: 500; }

.checkout-summary-totals { margin: 0 0 20px 0; padding: 0; border-top: 1px solid var(--color-border-gray); padding-top: 16px; }
.checkout-summary-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 14px; }
.checkout-summary-row dt { color: var(--color-smoke-gray); margin: 0; }
.checkout-summary-row dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--color-ink-black); font-weight: 500; }
.checkout-summary-row.is-hidden { display: none; }
.checkout-summary-shipping-strike { color: var(--color-smoke-gray); text-decoration: line-through; margin-right: 6px; font-size: 12px; }

.club-cashback-summary {
    background: var(--color-pearl-white);
    border-left: 3px solid var(--color-champagne-gold);
    padding: 14px 18px;
    margin: 16px 0;
}
.club-cashback-summary[hidden] { display: none; }
.club-cashback-summary-eyebrow { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 4px 0; }
.club-cashback-summary-amount { font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: var(--color-ink-black); margin: 0; font-variant-numeric: tabular-nums; }
.club-cashback-summary-note { font-size: 11px; color: var(--color-smoke-gray); margin: 4px 0 0 0; line-height: 1.5; }

.amckredit-teaser {
    background: var(--color-deep-navy); color: var(--color-pearl-white);
    padding: 16px 20px; margin: 16px 0;
    text-align: center;
}
.amckredit-teaser-eyebrow { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-champagne-gold); margin: 0 0 4px 0; }
.amckredit-teaser-amount { font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: var(--color-champagne-gold); margin: 0; font-variant-numeric: tabular-nums; }
.amckredit-teaser-note { font-size: 11px; color: rgba(250, 250, 247, 0.7); margin: 4px 0 0 0; line-height: 1.5; }

.checkout-summary-total-row {
    display: flex; align-items: baseline; justify-content: space-between;
    border-top: 1px solid var(--color-ink-black); padding-top: 18px; margin-bottom: 6px;
}
.checkout-summary-total-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-smoke-gray); }
.checkout-summary-total-value { font-family: var(--font-serif); font-size: 30px; font-weight: 500; font-variant-numeric: tabular-nums; }
/*
 * "ebből ÁFA (27 %)" line under "Fizetendő". The slider live-updates
 * `[data-summary-vat]` from the AJAX recalc payload — the muted, smaller
 * treatment matches the cart-side pattern and signals "informational,
 * already contained in the total above" rather than an added cost.
 */
.checkout-summary-vat-row {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 18px; font-size: 12px;
    font-variant-numeric: tabular-nums; color: var(--color-smoke-gray);
}
.checkout-summary-vat-label { letter-spacing: 0.04em; }
.checkout-summary-vat-value { font-weight: 500; }
.checkout-cta { margin-bottom: 14px; position: relative; }
.checkout-cta:disabled { opacity: 0.6; cursor: wait; }

/*
 * Loading-state swap for the checkout submit button. The default span is
 * shown until JS adds `is-loading` to the button (and sets `hidden` on the
 * default span). Both gates run together so neither a missing class nor a
 * missing attribute causes the dual-label bug seen pre-Polish #1.
 */
.checkout-cta [data-submit-default],
.checkout-cta [data-submit-loading] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.checkout-cta [data-submit-default][hidden],
.checkout-cta [data-submit-loading][hidden] { display: none; }
.checkout-cta [data-submit-loading] { display: none; }
.checkout-cta.is-loading [data-submit-default] { display: none; }
.checkout-cta.is-loading [data-submit-loading] { display: inline-flex; align-items: center; gap: 0.5rem; }
.checkout-cta.is-loading [data-submit-loading]::before {
    content: '';
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: amc-button-spinner 0.6s linear infinite;
}
@keyframes amc-button-spinner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .checkout-cta.is-loading [data-submit-loading]::before { animation: none; }
}

/* Same swap pattern for the Elite signup submit button (Phase 5). */
[data-elite-signup-submit] [data-elite-submit-default],
[data-elite-signup-submit] [data-elite-submit-loading] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
[data-elite-signup-submit] [data-elite-submit-default][hidden],
[data-elite-signup-submit] [data-elite-submit-loading][hidden] { display: none; }
[data-elite-signup-submit] [data-elite-submit-loading] { display: none; }
[data-elite-signup-submit].is-loading [data-elite-submit-default] { display: none; }
[data-elite-signup-submit].is-loading [data-elite-submit-loading] { display: inline-flex; align-items: center; gap: 0.5rem; }
[data-elite-signup-submit].is-loading [data-elite-submit-loading]::before {
    content: '';
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: amc-button-spinner 0.6s linear infinite;
}
.checkout-legal { font-size: 11px; line-height: 1.6; color: var(--color-smoke-gray); margin: 0; text-align: center; }
.checkout-legal a { color: var(--color-ink-black); border-bottom: 1px solid var(--color-champagne-gold); }

/* === Success page === */
.success-page { background: var(--color-pearl-white); padding-bottom: 64px; }
.success-hero {
    background: var(--color-premium-black);
    color: var(--color-pearl-white);
    padding: 80px 24px 64px;
    text-align: center;
}
.success-hero-inner { max-width: 720px; margin: 0 auto; }
.success-checkmark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 76px; height: 76px;
    background: rgba(201, 169, 97, 0.1);
    border-radius: 50%;
    margin-bottom: 24px;
    animation: success-mark-in var(--duration-slow) var(--motion-checkout) both;
}
@keyframes success-mark-in {
    0% { transform: scale(0.86); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.success-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-champagne-gold); margin: 0 0 12px 0; }
.success-title { font-family: var(--font-serif); font-size: 44px; font-weight: 500; line-height: 1.1; margin: 0 0 18px 0; }
@media (max-width: 768px) { .success-title { font-size: 30px; } }
.success-lead { font-size: 15px; color: rgba(250, 250, 247, 0.78); margin: 0 0 32px 0; line-height: 1.6; }
.success-order-badge {
    display: inline-flex; align-items: baseline; gap: 12px;
    padding: 10px 22px; border: 1px solid rgba(201, 169, 97, 0.4);
    margin: 0;
}
.success-order-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250, 250, 247, 0.65); }
.success-order-number { font-family: var(--font-serif); font-size: 18px; color: var(--color-champagne-gold); letter-spacing: 0.04em; }

.success-body { max-width: var(--container-max); margin: 64px auto 0; padding: 0 var(--container-padding); }
.success-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: stretch; }
@media (max-width: 880px) { .success-grid { grid-template-columns: 1fr; } }

.success-card {
    background: var(--color-soft-white); border: 1px solid var(--color-border-gray);
    padding: 32px;
    display: flex; flex-direction: column;
}
.success-card-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 8px 0; }
.success-card-title { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin: 0 0 24px 0; }

.success-items { list-style: none; padding: 0; margin: 0 0 24px 0; }
.success-item {
    display: grid; grid-template-columns: 1fr auto auto; gap: 16px;
    padding: 12px 0; border-bottom: 1px solid var(--color-border-gray);
    align-items: baseline;
}
.success-item:last-child { border-bottom: none; }
.success-item-name { font-size: 14px; color: var(--color-ink-black); }
.success-item-variant { display: block; font-size: 11px; color: var(--color-smoke-gray); }
.success-item-qty { font-size: 12px; color: var(--color-smoke-gray); font-variant-numeric: tabular-nums; }
.success-item-price { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }

.success-totals { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--color-border-gray); }
.success-totals-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 14px; }
.success-totals-row dt { color: var(--color-smoke-gray); margin: 0; }
.success-totals-row dd { margin: 0; font-variant-numeric: tabular-nums; }
.success-totals-row-grand {
    border-top: 1px solid var(--color-ink-black); padding-top: 14px; margin-top: 8px;
}
.success-totals-row-grand dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-smoke-gray); }
.success-totals-row-grand dd { font-family: var(--font-serif); font-size: 26px; font-weight: 500; color: var(--color-ink-black); }

.success-card-cashback {
    background: var(--color-deep-navy);
    color: var(--color-pearl-white);
    border-color: var(--color-deep-navy);
}
.success-card-cashback .success-card-eyebrow { color: var(--color-champagne-gold); }
.success-card-cashback .success-card-title { color: var(--color-pearl-white); }
.success-cashback-amount { font-family: var(--font-serif); font-size: 38px; font-weight: 500; color: var(--color-champagne-gold); margin: 16px 0 8px 0; font-variant-numeric: tabular-nums; }
.success-cashback-pct { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250, 250, 247, 0.7); margin: 0 0 16px 0; }
.success-cashback-note { font-size: 13px; line-height: 1.6; color: rgba(250, 250, 247, 0.85); margin: 0 0 16px 0; }
.success-cashback-availability { font-size: 11px; color: rgba(250, 250, 247, 0.5); margin: auto 0 0 0; padding-top: 16px; border-top: 1px solid rgba(250, 250, 247, 0.15); }

.success-cta-row { display: flex; gap: 16px; margin: 40px 0 0; flex-wrap: wrap; justify-content: center; }
@media (max-width: 480px) {
    .success-cta-row { flex-direction: column; }
    .success-cta-row .btn { width: 100%; text-align: center; }
}

.success-next-steps {
    margin-top: 64px;
    background: var(--color-premium-black);
    color: var(--color-pearl-white);
    padding: 64px 24px;
}
.success-next-steps-inner { max-width: var(--container-max); margin: 0 auto; }
.success-next-steps-eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-champagne-gold); margin: 0 0 8px 0; }
.success-next-steps-title { font-family: var(--font-serif); font-size: 30px; font-weight: 500; margin: 0 0 32px 0; }
.next-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 768px) { .next-steps { grid-template-columns: 1fr; } }
.next-step {
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid var(--color-champagne-gold);
    padding: 24px 24px 24px 28px;
}
.next-step-numeral { font-family: var(--font-serif); font-size: 20px; color: var(--color-champagne-gold); display: block; margin-bottom: 8px; }
.next-step-title { font-family: var(--font-serif); font-size: 18px; font-weight: 500; margin: 0 0 4px 0; color: var(--color-pearl-white); }
.next-step-meta { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-champagne-gold); margin: 0 0 10px 0; }
.next-step-desc { font-size: 13px; color: rgba(250, 250, 247, 0.78); line-height: 1.6; margin: 0; }

/* === Account orders list === */
.orders-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.order-list-item {
    display: grid; grid-template-columns: minmax(0, 1.6fr) auto auto; gap: 24px; align-items: center;
    background: var(--color-soft-white);
    border: 1px solid var(--color-border-gray);
    padding: 20px 24px;
    transition: border-color var(--duration-quick) var(--ease-product), box-shadow var(--duration-quick) var(--ease-product), transform var(--duration-quick) var(--ease-product);
}
.order-list-item:hover { border-color: var(--color-champagne-gold); transform: translateY(-1px); box-shadow: 0 14px 32px rgba(10, 10, 11, 0.04); }
@media (max-width: 600px) {
    .order-list-item { grid-template-columns: 1fr; gap: 12px; }
}
.order-list-eyebrow { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 4px 0; }
.order-list-number { font-family: var(--font-serif); font-size: 18px; font-weight: 500; margin: 0; }
.order-list-meta { font-size: 12px; color: var(--color-smoke-gray); margin: 4px 0 0 0; }
.order-list-meta-sep { margin: 0 6px; }
.order-list-status { display: flex; justify-content: center; }
.order-status-badge {
    font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 6px 12px; border: 1px solid var(--color-border-gray);
    color: var(--color-ink-black); background: var(--color-pearl-white);
}
.order-status-badge.order-status-new { border-color: var(--color-champagne-gold); color: var(--color-deep-gold); }
.order-status-badge.order-status-processing { border-color: #5C7DC4; color: #3F5BA0; }
.order-status-badge.order-status-shipped { border-color: #4F8060; color: #36634A; }
.order-status-badge.order-status-delivered { background: var(--color-stock-green); color: var(--color-pearl-white); border-color: var(--color-stock-green); }
.order-status-badge.order-status-cancelled,
.order-status-badge.order-status-refunded { color: var(--color-sale-red); border-color: var(--color-sale-red); }

.order-list-total { text-align: right; }
.order-list-total-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-smoke-gray); margin: 0 0 4px 0; }
.order-list-total-value { font-family: var(--font-serif); font-size: 20px; font-weight: 500; margin: 0; font-variant-numeric: tabular-nums; }
.orders-list-note { font-size: 12px; color: var(--color-smoke-gray); margin-top: 24px; line-height: 1.6; }

/* === Product CTA new states === */
.product-cta-feedback {
    margin: 12px 0 0 0; font-size: 13px; color: var(--color-stock-green);
    line-height: 1.5;
}
.product-cta-feedback.is-error { color: var(--color-sale-red); }
button[data-add-to-cart].is-loading [data-add-default],
button[data-add-to-cart].is-loading [data-add-success] { display: none; }
button[data-add-to-cart].is-success [data-add-default],
button[data-add-to-cart].is-success [data-add-loading] { display: none; }
button[data-add-to-cart].is-success {
    background: var(--color-stock-green); border-color: var(--color-stock-green); color: var(--color-pearl-white);
}
.product-cta-noscript-form { margin-top: 8px; }

/* Disable transitions on motion-sensitive users. */
@media (prefers-reduced-motion: reduce) {
    .cart-drawer { transition: none; }
    .cart-drawer-overlay { transition: none; }
    .success-checkmark { animation: none; }
}

/* ============================================================== */
/* === Phase 5: AMCKREDIT, Klub+ promotion, Elite subscription === */
/* ============================================================== */

/* === Wallet hero === */
.account-page-lead { font-size: 14px; color: var(--color-smoke-gray); line-height: 1.6; margin: -16px 0 28px 0; max-width: 640px; }

.wallet-balance-hero {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 0;
    margin: 24px 0 32px 0;
    background: var(--color-premium-black);
    color: var(--color-pearl-white);
    overflow: hidden;
}
@media (max-width: 720px) { .wallet-balance-hero { grid-template-columns: 1fr; } }
.wallet-balance-hero-inner { padding: 36px 36px 32px 36px; }
.wallet-balance-eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(250, 250, 247, 0.55); margin: 0 0 12px 0; }
.wallet-balance-amount {
    font-family: var(--font-serif); font-size: 56px; font-weight: 500; line-height: 1.05;
    color: var(--color-champagne-gold); margin: 0 0 8px 0; font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
@media (max-width: 720px) { .wallet-balance-amount { font-size: 42px; } }
.wallet-balance-meta { font-size: 13px; color: rgba(250, 250, 247, 0.7); margin: 0; }
.wallet-pending-tag {
    margin: 16px 0 0 0; padding: 10px 14px;
    background: rgba(201, 169, 97, 0.08);
    border: 1px solid rgba(201, 169, 97, 0.25);
    font-size: 12px; color: rgba(250, 250, 247, 0.85);
    display: inline-flex; align-items: center; gap: 8px;
}
.wallet-pending-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-champagne-gold); display: inline-block; }
.wallet-balance-hero-meta {
    background: rgba(255, 255, 255, 0.04);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding: 36px 32px;
    display: flex; flex-direction: column; justify-content: center;
}
.wallet-balance-hero-meta.tier-elite { background: linear-gradient(135deg, rgba(201, 169, 97, 0.16), rgba(201, 169, 97, 0.04)); }
.wallet-balance-hero-meta.tier-klub-plus { background: rgba(157, 160, 168, 0.12); }
.wallet-tier-eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-champagne-gold); margin: 0 0 8px 0; }
.wallet-tier-name { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin: 0 0 6px 0; }
.wallet-tier-desc { font-size: 12px; line-height: 1.6; color: rgba(250, 250, 247, 0.7); margin: 0; }

/* === Expiring soon === */
.expiring-soon-card {
    background: #FFFAF0;
    border-left: 3px solid #C9A961;
    padding: 22px 28px;
    margin: 0 0 32px 0;
}
.expiring-soon-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 6px 0; }
.expiring-soon-title { font-family: var(--font-serif); font-size: 20px; font-weight: 500; margin: 0 0 6px 0; }
.expiring-soon-lead { font-size: 13px; color: var(--color-smoke-gray); margin: 0 0 16px 0; }
.expiring-soon-list { list-style: none; padding: 0; margin: 0 0 16px 0; }
.expiring-soon-row {
    display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
    padding: 10px 0; border-bottom: 1px solid rgba(201, 169, 97, 0.2);
}
.expiring-soon-row:last-child { border-bottom: none; }
.expiring-soon-amount { font-family: var(--font-serif); font-size: 18px; font-weight: 500; color: var(--color-ink-black); font-variant-numeric: tabular-nums; min-width: 90px; }
.expiring-soon-when { font-size: 13px; color: var(--color-smoke-gray); }
.days-remaining-badge {
    display: inline-block; padding: 4px 10px;
    background: rgba(201, 169, 97, 0.18); color: var(--color-deep-gold);
    font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
}
.days-remaining-badge.is-urgent { background: #FBE4DD; color: #B85450; }
.expiring-soon-row.is-urgent .expiring-soon-when { color: #B85450; }

/* === Transaction history === */
.transaction-heading { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin: 32px 0 16px 0; }
.transaction-table-wrapper { overflow-x: auto; background: var(--color-soft-white); border: 1px solid var(--color-border-gray); }
.transaction-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.transaction-table th {
    text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--color-border-gray);
    color: var(--color-smoke-gray); font-weight: 500; font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; background: var(--color-pearl-white);
}
.transaction-table td { padding: 14px 18px; border-bottom: 1px solid var(--color-border-gray); vertical-align: top; }
.transaction-table tbody tr:last-child td { border-bottom: none; }
.transaction-table .t-right { text-align: right; }
.transaction-row:hover { background: rgba(201, 169, 97, 0.03); }
.transaction-date { color: var(--color-smoke-gray); font-size: 12px; white-space: nowrap; }
.transaction-detail { font-size: 12px; line-height: 1.5; }
.transaction-detail a { color: var(--color-ink-black); border-bottom: 1px solid var(--color-champagne-gold); }
.transaction-detail-reason { display: block; color: var(--color-smoke-gray); font-size: 11px; margin-top: 2px; }
.transaction-detail-expiry { display: block; color: var(--color-deep-gold); font-size: 11px; margin-top: 2px; letter-spacing: 0.06em; text-transform: uppercase; }
.transaction-amount-positive { color: var(--color-stock-green); font-weight: 500; font-variant-numeric: tabular-nums; }
.transaction-amount-negative { color: var(--color-sale-red); font-weight: 500; font-variant-numeric: tabular-nums; }
.transaction-amount-neutral { color: var(--color-smoke-gray); font-variant-numeric: tabular-nums; }
.transaction-balance { font-variant-numeric: tabular-nums; color: var(--color-ink-black); font-weight: 500; }
.transaction-type-badge {
    display: inline-block; padding: 3px 10px;
    border: 1px solid var(--color-border-gray); background: var(--color-pearl-white);
    font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
}
.transaction-type-award { border-color: var(--color-stock-green); color: var(--color-stock-green); }
.transaction-type-redemption { border-color: #5C7DC4; color: #3F5BA0; }
.transaction-type-expiry { border-color: var(--color-smoke-gray); color: var(--color-smoke-gray); }
.transaction-type-refund_return { border-color: var(--color-sale-red); color: var(--color-sale-red); }
.transaction-type-admin_adjustment { border-color: var(--color-deep-gold); color: var(--color-deep-gold); }
.transaction-type-succeeded { border-color: var(--color-stock-green); color: var(--color-stock-green); }
.transaction-type-failed { border-color: var(--color-sale-red); color: var(--color-sale-red); }

.wallet-pagination { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 24px; }
.wallet-pagination-status { font-size: 12px; color: var(--color-smoke-gray); letter-spacing: 0.08em; }

.wallet-empty {
    background: var(--color-soft-white); border: 1px solid var(--color-border-gray);
    padding: 80px 32px; text-align: center;
}
.wallet-empty-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 8px 0; }
.wallet-empty-title { font-family: var(--font-serif); font-size: 26px; font-weight: 500; margin: 0 0 10px 0; }
.wallet-empty-lead { font-size: 14px; color: var(--color-smoke-gray); margin: 0 0 24px 0; max-width: 480px; margin-inline: auto; line-height: 1.6; }

/* === Referral page === */
.referral-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.8fr);
    gap: 28px;
    margin: 24px 0 28px 0;
    padding: 34px 36px;
    background: var(--color-premium-black);
    color: var(--color-pearl-white);
}
.referral-code-display {
    font-family: var(--font-serif);
    font-size: 42px;
    font-weight: 500;
    line-height: 1.05;
    color: var(--color-champagne-gold);
    margin: 0 0 16px 0;
}
.referral-url-box {
    padding: 14px 16px;
    border: 1px solid rgba(250, 250, 247, 0.18);
    background: rgba(250, 250, 247, 0.06);
    color: rgba(250, 250, 247, 0.9);
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}
.referral-actions { display: flex; flex-direction: column; gap: 10px; align-self: center; }
.referral-actions .btn-tertiary { color: var(--color-champagne-gold); border-bottom-color: var(--color-champagne-gold); }
.referral-actions .btn-tertiary:hover { color: var(--color-pearl-white); border-bottom-color: var(--color-pearl-white); }
.referral-toast {
    position: absolute;
    right: 24px;
    bottom: 20px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1), transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
    background: var(--color-champagne-gold);
    color: var(--color-premium-black);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
}
.referral-toast.is-visible { opacity: 1; transform: translateY(0); }
.referral-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 0 0 32px 0;
}
.referral-stat-card {
    background: var(--color-soft-white);
    border: 1px solid var(--color-border-gray);
    padding: 18px 20px;
}
.referral-stat-card span {
    display: block;
    min-height: 32px;
    color: var(--color-smoke-gray);
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.referral-stat-card strong {
    display: block;
    margin-top: 12px;
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.referral-how,
.referral-recent { margin-top: 34px; }
.referral-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text, #333);
    white-space: nowrap;
}
.referral-status.is-registered {
    background: rgba(33, 102, 204, 0.10);
    color: #1a4d99;
}
.referral-status.is-approved {
    background: rgba(35, 134, 54, 0.12);
    color: #1f6b32;
}
.referral-status.is-cancelled {
    background: rgba(0, 0, 0, 0.04);
    color: #888;
}
.referral-status.is-invited {
    background: rgba(0, 0, 0, 0.05);
    color: #555;
}
.referral-how h2,
.referral-recent h2 {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 16px 0;
}
.referral-step-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}
.referral-step-grid article {
    border-top: 2px solid var(--color-champagne-gold);
    background: var(--color-soft-white);
    padding: 18px 20px;
    min-height: 132px;
}
/* Brand-wide inline emphasis utility for percentages / Ft amounts /
   tenure ("14 napig") inside flowing body copy. Was originally defined
   only in journey.css, which is loaded exclusively on /utam — so the
   same markup on /fiok/ajanlo (and any other non-journey page) rendered
   the wrapped text as plain ink-black. Mirrored here so the class works
   globally; the journey.css declaration is kept too as a defensive
   duplicate, both ruled out via grep as conflict-free. Stays inline
   by default (no display set) so it never breaks the flow of a sentence. */
.gold-accent {
    color: var(--color-deep-gold);
    font-weight: 500;
}

/* Child combinator so this rule targets ONLY the step-number span
   (the direct child of `<article>`) and not arbitrary nested spans
   like `<span class="gold-accent">5%</span>` inside the body `<p>`.
   The earlier descendant selector (`.referral-step-grid span`)
   incorrectly forced inline emphasis spans to `display: block`,
   breaking the "5%" onto its own line and making cards 03–04
   visibly taller than 01–02. */
.referral-step-grid > article > span {
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    color: var(--color-deep-gold);
    margin-bottom: 16px;
}
.referral-step-grid p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-ink-black);
}
@media (max-width: 720px) {
    .referral-hero { grid-template-columns: 1fr; padding: 28px 22px; }
    .referral-code-display { font-size: 32px; }
    .referral-actions { align-self: stretch; }
}

/* === Subscription page === */
.subscription-empty {
    background: var(--color-soft-white); border: 1px solid var(--color-border-gray);
    padding: 56px 40px;
}
.subscription-empty-eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 8px 0; }
.subscription-empty-title { font-family: var(--font-serif); font-size: 30px; font-weight: 500; margin: 0 0 12px 0; line-height: 1.2; }
.subscription-empty-lead { font-size: 14px; color: var(--color-smoke-gray); line-height: 1.7; margin: 0 0 32px 0; max-width: 600px; }

.subscription-benefit-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
    margin: 0 0 32px 0;
}
@media (max-width: 720px) { .subscription-benefit-grid { grid-template-columns: 1fr; } }
.subscription-benefit {
    background: var(--color-pearl-white); border-left: 3px solid var(--color-champagne-gold);
    padding: 20px 22px;
}
.subscription-benefit-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 6px 0; }
.subscription-benefit-title { font-family: var(--font-serif); font-size: 16px; font-weight: 500; margin: 0 0 4px 0; }
.subscription-benefit-desc { font-size: 12px; color: var(--color-smoke-gray); line-height: 1.5; margin: 0; }

.subscription-status-card {
    background: var(--color-soft-white); border: 1px solid var(--color-border-gray);
    padding: 32px 36px;
    border-left: 3px solid var(--color-champagne-gold);
}
.subscription-status-card.subscription-status-cancelled { border-left-color: var(--color-smoke-gray); }
.subscription-status-card.subscription-status-past-due { border-left-color: var(--color-sale-red); background: #FFFAF7; }
.subscription-status-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 6px 0; }
.subscription-status-title { font-family: var(--font-serif); font-size: 26px; font-weight: 500; margin: 0 0 24px 0; }
.subscription-status-row {
    display: grid; grid-template-columns: 200px 1fr; gap: 16px;
    padding: 14px 0; border-top: 1px solid var(--color-border-gray);
    align-items: baseline;
}
.subscription-status-row:last-of-type { border-bottom: 1px solid var(--color-border-gray); }
@media (max-width: 600px) { .subscription-status-row { grid-template-columns: 1fr; gap: 4px; } }
.subscription-status-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-smoke-gray); margin: 0; }
.subscription-status-value { margin: 0; font-size: 14px; font-weight: 500; color: var(--color-ink-black); }
.subscription-status-amount { display: block; font-size: 12px; color: var(--color-smoke-gray); font-weight: 400; margin-top: 4px; font-variant-numeric: tabular-nums; }
.subscription-tag {
    display: inline-block; padding: 4px 10px;
    font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    border: 1px solid var(--color-border-gray);
}
.subscription-tag-active { border-color: var(--color-stock-green); color: var(--color-stock-green); }
.subscription-tag-pending { border-color: var(--color-deep-gold); color: var(--color-deep-gold); }
.subscription-tag-past-due { border-color: var(--color-sale-red); color: var(--color-sale-red); }
.subscription-tag-cancelled { border-color: var(--color-smoke-gray); color: var(--color-smoke-gray); }
.subscription-tag-expired { border-color: var(--color-smoke-gray); color: var(--color-smoke-gray); }
.subscription-tag-warning { border-color: #B89970; color: #B89970; }
.subscription-cancel-form { margin-top: 24px; }
.subscription-cancel-note { margin: 12px 0 0 0; font-size: 12px; color: var(--color-smoke-gray); }
.subscription-cancel-confirmation { margin-top: 24px; padding: 16px 20px; background: var(--color-pearl-white); font-size: 13px; line-height: 1.6; }
.subscription-cancel-confirmation a { color: var(--color-ink-black); border-bottom: 1px solid var(--color-champagne-gold); }
.subscription-past-due-note { margin-top: 24px; padding: 16px 20px; background: #FBE4DD; color: #934241; font-size: 13px; line-height: 1.6; }
.subscription-past-due-note a { color: #934241; border-bottom: 1px solid #934241; font-weight: 500; }
.subscription-pending-note {
    margin-top: 24px; padding: 18px 22px;
    background: #FFFAF0; border-left: 3px solid var(--color-champagne-gold);
    font-size: 13px; line-height: 1.6; color: var(--color-ink-black);
}
.subscription-pending-note p { margin: 0 0 8px 0; }
.subscription-pending-note p:last-child { margin-bottom: 0; }
.subscription-pending-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.subscription-cancel-pending-form { margin: 0; }
@media (max-width: 600px) {
    .subscription-pending-actions { flex-direction: column; align-items: stretch; }
    .subscription-pending-actions .btn { width: 100%; text-align: center; }
}

/* === Club program page === */
.club-page { background: var(--color-pearl-white); padding-bottom: 80px; }
.club-hero { background: var(--color-premium-black); color: var(--color-pearl-white); padding: 80px 24px 96px; text-align: center; }
.club-hero-inner { max-width: 720px; margin: 0 auto; }
.club-hero-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-champagne-gold); margin: 0 0 16px 0; }
.club-hero-title { font-family: var(--font-serif); font-size: 52px; font-weight: 500; line-height: 1.1; margin: 0 0 18px 0; letter-spacing: -0.01em; }
@media (max-width: 768px) { .club-hero-title { font-size: 36px; } }
.club-hero-lead { font-size: 16px; line-height: 1.7; color: rgba(250, 250, 247, 0.78); margin: 0; }

.club-tiers { max-width: var(--container-max); margin: -64px auto 0; padding: 0 var(--container-padding); }
.tier-comparison-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
@media (max-width: 980px) { .tier-comparison-grid { grid-template-columns: 1fr; } }
/* === Klub program tier cards — Polish #2 escalating premium hierarchy ===
 *
 * Three tiers, three visual registers, one rhythm:
 *   tier-card-base  → refined editorial      (thin gold rule, subtle warm tint)
 *   tier-card-mid   → quietly elevated       (corner ornament, diagonal gold gradient)
 *   tier-card-elite → luxury statement piece (background pattern, trophy mark, gold CTA)
 *
 * Equal column widths via the grid; equal min-heights via flex column +
 * stretch; identical vertical spacing scale across all three. Title size,
 * decoration density, and color saturation escalate together so the eye
 * reads top-to-bottom as a deliberate hierarchy, not three identical pills.
 */
.tier-card {
    position: relative;
    overflow: hidden;
    background: var(--color-soft-white);
    border: 1.5px solid var(--color-border-gray);
    padding: 40px 32px 36px;
    display: flex;
    flex-direction: column;
    transition:
        box-shadow var(--duration-base) var(--ease-product),
        transform var(--duration-base) var(--ease-product),
        border-color var(--duration-base) var(--ease-product);
}

/* Klub Tag (basic) — refined editorial */
.tier-card-base {
    background: #FEFCF8; /* very subtle warm tint over soft-white */
}
.tier-card-decoration-line {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: var(--color-champagne-gold);
}
/* All three tier cards share the same content padding-top so the title
   row aligns pixel-perfect across the row. Decorations (gold rule on
   base, corner ornament on mid + elite) are absolutely positioned and
   don't affect this flow. */
.tier-card-base,
.tier-card-mid,
.tier-card-elite { padding-top: 44px; }

/* Equalise the header block (name + price + meta) so the divider that opens
   the benefits list lands on the same Y coordinate across all three cards.
   Title and price font-sizes intentionally escalate per tier — without this,
   the rule shifts ~26px between Klub Tag and Elite. Desktop only; on mobile
   the cards stack and natural heights look fine. */
@media (min-width: 981px) {
    .tier-card-header {
        display: flex;
        flex-direction: column;
        min-height: 152px;
    }
}
.tier-card-base:hover {
    transform: translateY(-2px);
    border-color: var(--color-champagne-gold);
    box-shadow: 0 12px 32px rgba(201, 169, 97, 0.08);
}

/* Klub+ (mid) — quietly elevated */
.tier-card-mid {
    background:
        linear-gradient(135deg, rgba(201, 169, 97, 0.05) 0%, rgba(201, 169, 97, 0) 60%),
        var(--color-soft-white);
    border-color: var(--color-champagne-gold);
}
.tier-card-decoration-corner {
    position: absolute;
    top: 18px;
    right: 18px;
    color: var(--color-champagne-gold);
    line-height: 0;
}
.tier-card-mid:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(201, 169, 97, 0.18);
}

/* Elite (top) — luxury statement piece */
.tier-card-elite {
    background:
        radial-gradient(ellipse at top right, rgba(201, 169, 97, 0.14) 0%, transparent 55%),
        var(--color-premium-black);
    color: var(--color-pearl-white);
    border-color: rgba(201, 169, 97, 0.4);
}
.tier-card-elite:hover {
    transform: translateY(-3px);
    border-color: var(--color-champagne-gold);
    box-shadow:
        0 24px 56px rgba(201, 169, 97, 0.22),
        0 8px 20px rgba(10, 10, 11, 0.4);
}

/* Title / price — escalating size, escalating color saturation.
   Eyebrow ("Alapszint" / "Köszöntő szint" / "Prémium szint") removed by
   design — the title and price/meta now do that work themselves. */
.tier-card-name {
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.05;
    margin: 0 0 12px 0;
    text-align: center;
    color: var(--color-ink-black);
    letter-spacing: -0.005em;
}
.tier-card-base .tier-card-name { font-size: 2.25rem; }
.tier-card-mid .tier-card-name { font-size: 2.5rem; }
.tier-card-elite .tier-card-name {
    font-size: 2.75rem;
    color: var(--color-pearl-white);
}

.tier-card-price {
    font-family: var(--font-sans);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    margin: 0 0 6px 0;
    text-align: center;
    color: var(--color-ink-black);
    line-height: 1.2;
}
.tier-card-base .tier-card-price {
    font-size: 1.25rem;
    color: var(--color-smoke-gray);
}
.tier-card-mid .tier-card-price {
    font-size: 1.5rem;
    font-weight: 500;
}
.tier-card-elite .tier-card-price {
    font-size: 1.875rem;
    font-weight: 500;
    color: var(--color-champagne-gold);
}
.tier-card-price-interval {
    font-size: 0.75em;
    font-weight: 400;
    margin-left: 4px;
    color: var(--color-smoke-gray);
}
.tier-card-mid .tier-card-price-interval {
    color: var(--color-smoke-gray);
}
.tier-card-elite .tier-card-price-interval {
    color: var(--color-deep-gold);
}

.tier-card-meta {
    font-size: 0.8125rem;
    color: var(--color-smoke-gray);
    margin: 0 0 24px 0;
    text-align: center;
    line-height: 1.5;
}
.tier-card-elite .tier-card-meta {
    color: var(--color-deep-gold);
    font-style: italic;
}
.tier-card-meta-secondary {
    font-size: 0.8125rem;
    color: var(--color-smoke-gray);
    margin: 16px 0 0 0;
    text-align: center;
}
.tier-card-elite .tier-card-meta-secondary {
    color: var(--color-deep-gold);
}

/* Klub+ intro paragraph — premium informative breathing line between
   the tier-card-meta and the tier-card-benefits divider. Sits as a quiet
   contextual frame for the bullet list below, never as a bullet itself. */
.tier-card-intro {
    margin: 0 0 24px 0;
    padding: 0 4px;
    color: var(--color-smoke-gray);
    font-size: 0.85rem;
    line-height: 1.65;
    text-align: center;
}
.tier-card-elite .tier-card-intro {
    color: rgba(250, 250, 247, 0.72);
}

/* Benefits list — divider + custom diamond bullets, escalating saturation */
.tier-card-benefits {
    list-style: none;
    padding: 22px 0 0 0;
    margin: 0 0 28px 0;
    border-top: 1px solid var(--color-border-gray);
    flex: 1;
}
.tier-card-mid .tier-card-benefits {
    border-top-color: rgba(201, 169, 97, 0.4);
}
.tier-card-elite .tier-card-benefits {
    border-top-color: rgba(201, 169, 97, 0.3);
}
.tier-card-benefits li {
    padding: 8px 0 8px 24px;
    position: relative;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-ink-black);
}
.tier-card-elite .tier-card-benefits li {
    color: var(--color-pearl-white);
}
.tier-card-benefits li::before {
    content: '◇';
    position: absolute;
    left: 0;
    top: 6px;
    color: var(--color-champagne-gold);
    font-size: 0.95rem;
}
.tier-card-benefits strong { font-weight: 600; }

/* Klub Tag CTA group — primary button + secondary login link */
.tier-card-cta-group {
    margin-top: auto;
}
.tier-card-login-link {
    margin: 16px 0 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-smoke-gray);
    text-align: center;
}
.tier-card-login-link a {
    color: var(--color-champagne-gold);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition:
        color var(--duration-quick) var(--ease-product),
        border-color var(--duration-quick) var(--ease-product);
}
.tier-card-login-link a:hover {
    color: var(--color-deep-gold);
    border-bottom-color: var(--color-deep-gold);
}

/* Klub+ rolling-365-day note — italic deep gold, replaces generic muted footer */
.tier-card-rolling-note {
    margin: 16px 0 0 0;
    font-size: 0.8125rem;
    color: var(--color-deep-gold);
    font-style: italic;
    text-align: center;
}

/* Elite CTA — full champagne fill, dark text, generous padding, gold halo on hover */
.tier-card-elite-cta {
    background: var(--color-champagne-gold);
    color: var(--color-premium-black);
    border-color: var(--color-champagne-gold);
    padding: 16px 32px;
    letter-spacing: 0.18em;
    font-weight: 600;
    font-size: 12px;
    transition:
        background-color var(--duration-quick) var(--ease-product),
        color var(--duration-quick) var(--ease-product),
        box-shadow var(--duration-base) var(--ease-product);
}
.tier-card-elite-cta:hover {
    background: var(--color-deep-gold);
    color: var(--color-premium-black);
    border-color: var(--color-deep-gold);
    box-shadow: 0 8px 24px rgba(201, 169, 97, 0.4);
}

/* Current-state inset highlight + per-tier border alignment */
.tier-card-current {
    border-color: var(--color-champagne-gold);
    box-shadow: inset 0 0 0 1px var(--color-champagne-gold);
}
.tier-card-current-tag {
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-deep-gold);
    margin: 0 0 12px 0;
    padding: 12px 0;
    border-top: 1px solid var(--color-border-gray);
}
.tier-card-mid .tier-card-current-tag {
    border-top-color: rgba(201, 169, 97, 0.4);
}
.tier-card-elite .tier-card-current-tag {
    color: var(--color-champagne-gold);
    border-top-color: rgba(201, 169, 97, 0.3);
}

/* Mobile parity — stack, full width, tighter padding, decorations preserved */
@media (max-width: 980px) {
    .tier-card { padding: 36px 24px 32px; }
    .tier-card-base .tier-card-name { font-size: 1.875rem; }
    .tier-card-mid .tier-card-name { font-size: 2rem; }
    .tier-card-elite .tier-card-name { font-size: 2.25rem; }
}

/* === Elite signup form === */
.elite-signup { max-width: 720px; margin: 64px auto 0; padding: 0 var(--container-padding); }
.elite-signup[hidden] { display: none; }
.elite-signup-inner { background: var(--color-soft-white); border: 1px solid var(--color-border-gray); padding: 40px 44px; }
@media (max-width: 600px) { .elite-signup-inner { padding: 28px 20px; } }
.elite-signup-eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-deep-gold); margin: 0 0 8px 0; }
.elite-signup-title { font-family: var(--font-serif); font-size: 28px; font-weight: 500; margin: 0 0 28px 0; }
.elite-pricing-toggle { border: none; padding: 0; margin: 0 0 32px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .elite-pricing-toggle { grid-template-columns: 1fr; } }
.elite-pricing-option {
    position: relative;
    border: 1px solid var(--color-border-gray);
    padding: 18px 20px;
    cursor: pointer;
    transition:
        border-color var(--duration-quick) var(--ease-product),
        box-shadow var(--duration-quick) var(--ease-product);
    display: block;
}
.elite-pricing-option input { position: absolute; opacity: 0; pointer-events: none; }
.elite-pricing-option.is-selected {
    border-color: var(--color-champagne-gold);
    box-shadow: inset 0 0 0 1px var(--color-champagne-gold);
}
.elite-pricing-option:hover { border-color: var(--color-deep-gold); }
.elite-pricing-option-body { display: flex; flex-direction: column; gap: 4px; }
.elite-pricing-option-name { font-family: var(--font-serif); font-size: 18px; font-weight: 500; }
.elite-pricing-option-price { font-size: 14px; color: var(--color-ink-black); font-variant-numeric: tabular-nums; }
.elite-pricing-option-savings { font-size: 11px; color: var(--color-deep-gold); letter-spacing: 0.06em; }
.elite-pricing-option-tag {
    position: absolute; top: 12px; right: 14px;
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    background: var(--color-champagne-gold); color: var(--color-premium-black);
    padding: 3px 8px;
}

.elite-signup-form { margin: 0; }
.elite-signup-payment { margin-bottom: 24px; }
.elite-signup-payment-label {
    font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--color-smoke-gray); margin: 0 0 10px 0;
}
.elite-signup-submit { margin-top: 8px; }
.elite-signup-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.elite-signup-legal {
    font-size: 11px; line-height: 1.6; color: var(--color-smoke-gray);
    margin: 16px 0 0 0; text-align: center;
}
.elite-signup-legal a { color: var(--color-ink-black); border-bottom: 1px solid var(--color-champagne-gold); }

/* === AMCKREDIT slider in checkout === */
.amckredit-slider-section {
    margin: 16px 0;
    border: 1px solid var(--color-border-gray);
    background: var(--color-pearl-white);
}
.amckredit-slider-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: transparent; border: none; padding: 14px 18px;
    cursor: pointer; text-align: left;
    transition: background-color var(--duration-quick) var(--ease-product);
}
.amckredit-slider-toggle:hover { background: rgba(201, 169, 97, 0.04); }
.amckredit-slider-toggle-meta { display: flex; flex-direction: column; gap: 2px; }
.amckredit-slider-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-deep-gold); }
.amckredit-slider-balance { font-size: 13px; color: var(--color-ink-black); font-variant-numeric: tabular-nums; }
.amckredit-slider-caret {
    font-size: 18px; color: var(--color-smoke-gray);
    transition: transform var(--duration-base) var(--ease-product);
}
.amckredit-slider-toggle[aria-expanded="true"] .amckredit-slider-caret { transform: rotate(90deg); }

.amckredit-slider-body { padding: 16px 18px 20px 18px; border-top: 1px solid var(--color-border-gray); }
.amckredit-slider-help { font-size: 12px; color: var(--color-smoke-gray); margin: 0 0 14px 0; }
.amckredit-slider-help strong { color: var(--color-ink-black); font-variant-numeric: tabular-nums; }
.amckredit-slider-controls { display: grid; grid-template-columns: 1fr 110px; gap: 12px; align-items: center; }

/* Two-stop slider track — filled (gold) ─ available rail (neutral).
   No dead-zone band: the slider's max is partialEdge, so the dead
   zone literally doesn't exist on this rail.  --credit-filled-pct
   (0–100%) is updated on every input event and on every server
   round-trip so the rail stays pixel-accurate. */
.amckredit-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 4px;
    --credit-filled-pct: 0%;
    background: linear-gradient(
        to right,
        var(--color-champagne-gold) 0%,
        var(--color-champagne-gold) var(--credit-filled-pct),
        var(--color-border-gray) var(--credit-filled-pct),
        var(--color-border-gray) 100%
    );
    outline: none; cursor: pointer; border-radius: 2px;
    transition: background var(--duration-quick) var(--ease-product);
}
.amckredit-slider:focus-visible {
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.28);
}
.amckredit-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px;
    background: var(--color-champagne-gold);
    border: 2px solid var(--color-premium-black);
    border-radius: 50%; cursor: pointer;
    transition:
        transform var(--duration-quick) var(--ease-product),
        box-shadow var(--duration-quick) var(--ease-product);
}
.amckredit-slider::-webkit-slider-thumb:hover {
    transform: scale(1.04);
    box-shadow: 0 0 0 6px rgba(201, 169, 97, 0.16);
}
.amckredit-slider::-moz-range-thumb {
    width: 18px; height: 18px;
    background: var(--color-champagne-gold);
    border: 2px solid var(--color-premium-black);
    border-radius: 50%; cursor: pointer;
    transition:
        transform var(--duration-quick) var(--ease-product),
        box-shadow var(--duration-quick) var(--ease-product);
}
.amckredit-slider::-moz-range-thumb:hover {
    transform: scale(1.04);
    box-shadow: 0 0 0 6px rgba(201, 169, 97, 0.16);
}
.amckredit-slider-input {
    width: 100%; padding: 8px 10px; border: 1px solid var(--color-border-gray);
    background: var(--color-soft-white); font-family: var(--font-sans); font-size: 13px;
    text-align: right; font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    transition:
        border-color var(--duration-quick) var(--ease-product),
        background-color var(--duration-quick) var(--ease-product);
}
.amckredit-slider-input::-webkit-outer-spin-button, .amckredit-slider-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amckredit-slider-input:focus { outline: none; border-color: var(--color-champagne-gold); background: var(--color-pearl-white); }

/* "Teljes lefedés AMCKREDIT-tel" quick-action chip.  Three-zone flex
   layout: mark | text-stack | amount.  The mark is a ✓ in a circle
   that becomes the active-state indicator (filled gold ring around
   the check).  Active state inverts the chip to a gold fill so the
   customer gets unambiguous confirmation that they're now in
   "no card needed" mode. */
.amckredit-quick-full {
    margin-top: 14px;
    width: 100%;
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: var(--color-pearl-white);
    border: 1px solid var(--color-border-gray);
    cursor: pointer;
    font-family: var(--font-sans);
    text-align: left;
    transition:
        background-color var(--duration-quick) var(--ease-product),
        border-color var(--duration-quick) var(--ease-product),
        color var(--duration-quick) var(--ease-product);
}
/* The chip is now ALWAYS rendered (so AJAX recalcs can toggle visibility
   reactively).  The `display: flex` above would otherwise override the
   user-agent `[hidden] { display: none }` rule because class selectors
   beat the UA stylesheet — this explicit rule makes [hidden] win.
   `!important` is defensive against a stale browser cache that may have
   loaded an older `display: flex` rule with no [hidden] override (which
   would tie on specificity but win by source order); the !important
   bump ensures the new rule wins regardless of cache state during the
   transition window. */
.amckredit-quick-full[hidden] {
    display: none !important;
}
.amckredit-quick-full:hover {
    border-color: var(--color-champagne-gold);
    background: var(--color-soft-white);
}
.amckredit-quick-full:focus-visible {
    outline: none;
    border-color: var(--color-champagne-gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.22);
}

/* Mark — a 20px ring that becomes a filled circle with an inset check
   when the chip is active.  Geometry chosen so the check's visual
   centre lands at the geometric centre of the ring (translate
   compensates for the asymmetric L-shape of the checkmark). */
.amckredit-quick-full-mark {
    position: relative;
    flex: 0 0 20px;
    width: 20px; height: 20px;
    border: 1.5px solid var(--color-border-gray);
    border-radius: 50%;
    background: transparent;
    transition:
        background-color var(--duration-quick) var(--ease-product),
        border-color var(--duration-quick) var(--ease-product);
}
.amckredit-quick-full-mark::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 5px; height: 9px;
    border: solid transparent;
    border-width: 0 1.75px 1.75px 0;
    transform: translate(-50%, -60%) rotate(45deg);
    transition: border-color var(--duration-quick) var(--ease-product);
}

.amckredit-quick-full-text {
    flex: 1 1 auto;
    display: flex; flex-direction: column; gap: 2px;
}
.amckredit-quick-full-label {
    font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--color-deep-gold);
}
.amckredit-quick-full-hint {
    font-size: 12px; color: var(--color-smoke-gray);
}
.amckredit-quick-full-amount {
    flex: 0 0 auto;
    font-family: var(--font-serif); font-size: 16px; font-weight: 500;
    color: var(--color-ink-black); font-variant-numeric: tabular-nums;
}

/* Active (= State B is committed). */
.amckredit-quick-full.is-active {
    background: var(--color-champagne-gold);
    border-color: var(--color-champagne-gold);
}
.amckredit-quick-full.is-active .amckredit-quick-full-mark {
    background: var(--color-premium-black);
    border-color: var(--color-premium-black);
    animation: amckredit-state-tick var(--duration-base) var(--ease-product);
}
.amckredit-quick-full.is-active .amckredit-quick-full-mark::after {
    border-color: var(--color-champagne-gold);
}
.amckredit-quick-full.is-active .amckredit-quick-full-label,
.amckredit-quick-full.is-active .amckredit-quick-full-hint,
.amckredit-quick-full.is-active .amckredit-quick-full-amount {
    color: var(--color-premium-black);
}

/* Live State A / B sentence under the slider.  Visibility is driven
   STRICTLY by the parent's data-state attribute so neither the
   browser's [hidden] UA rule nor an author display rule can race the
   PHP-rendered initial state. */
.amckredit-state-line {
    margin: 12px 0 0 0;
    font-size: 13px; line-height: 1.5; color: var(--color-ink-black);
    font-variant-numeric: tabular-nums;
}
.amckredit-state-line strong { color: var(--color-deep-gold); font-weight: 500; }
.amckredit-state-line[data-state="full"] {
    color: var(--color-deep-gold);
}

.amckredit-state-line-partial,
.amckredit-state-line-full {
    display: none;
}
.amckredit-state-line[data-state="partial"] .amckredit-state-line-partial {
    display: inline;
}
.amckredit-state-line[data-state="full"] .amckredit-state-line-full {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.amckredit-state-line-full-mark {
    flex: 0 0 18px;
    position: relative;
    width: 18px; height: 18px;
    background: var(--color-champagne-gold);
    border: 1px solid var(--color-deep-gold);
    border-radius: 50%;
    animation: amckredit-state-tick var(--duration-base) var(--ease-product);
}
.amckredit-state-line-full-mark::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 5px; height: 8px;
    border: solid var(--color-premium-black);
    border-width: 0 1.75px 1.75px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}
@keyframes amckredit-state-tick {
    0%   { transform: scale(0.86); opacity: 0; }
    60%  { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* In State B, hide the partial-coverage controls (slider + number
   input).  The chip is the operative control.  We keep them in the
   DOM so a brief State A → B → A round-trip doesn't lose attached
   listeners. */
.amckredit-slider-section[data-credit-current-state="full"] [data-credit-controls],
.amckredit-slider-section[data-credit-current-state="full"] .amckredit-slider-help {
    display: none;
}

.amckredit-slider-note {
    font-size: 11px; color: var(--color-smoke-gray);
    margin: 12px 0 0 0; line-height: 1.55;
}
.amckredit-slider-note strong {
    color: var(--color-ink-black);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* Premium card for the AMCKREDIT-only mode (zero-amount checkout).
   Replaces the unstyled placeholder so the moment of "no card needed"
   feels like an editorial milestone, not a system message. */
.amckredit-only-notice {
    position: relative;
    padding: 22px 22px 22px 64px;
    background: linear-gradient(180deg, var(--color-soft-white) 0%, var(--color-pearl-white) 100%);
    border: 1px solid var(--color-champagne-gold);
    animation: amckredit-only-enter var(--duration-base) var(--ease-product);
}
.amckredit-only-mark {
    position: absolute;
    left: 22px; top: 22px;
    width: 28px; height: 28px;
    background: var(--color-champagne-gold);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.12);
}
/* Centered with the same translate(-50%, -60%) rotate(45deg) pattern
   the other AMCKREDIT checkmarks use (chip mark, state-line mark) so
   the tick visually sits inside the gold disc.  Pixel-anchored
   positioning rotated around the rectangle's geometric center, not
   the disc's center, which left this larger checkmark visibly
   bottom-left of where the eye expects it. */
.amckredit-only-mark::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 7px; height: 11px;
    border: solid var(--color-premium-black);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}
.amckredit-only-eyebrow {
    margin: 0 0 6px 0;
    font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--color-deep-gold);
}
.amckredit-only-lead {
    margin: 0 0 14px 0;
    font-family: var(--font-serif); font-size: 17px; line-height: 1.45;
    color: var(--color-ink-black);
}
.amckredit-only-meta {
    margin: 0; padding-top: 14px;
    border-top: 1px solid var(--color-border-gray);
    display: grid; gap: 8px;
}
.amckredit-only-meta-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.amckredit-only-meta dt {
    font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--color-smoke-gray);
}
.amckredit-only-meta dd {
    margin: 0;
    font-family: var(--font-sans); font-size: 14px; font-weight: 500;
    color: var(--color-ink-black); font-variant-numeric: tabular-nums;
}
@keyframes amckredit-only-enter {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Soft boundary-transition overlay.  Shown briefly when the slider
   crosses the zero-amount boundary (full ↔ partial) and the page must
   reload to swap form action + submit handler.  Fades in with the shared
   medium motion token so
   the user perceives it as a deliberate transition; the reload itself
   takes another ~150–500ms after that, depending on cache. */
.checkout-mode-overlay {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(26, 26, 27, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-product);
    z-index: 9000;
    pointer-events: none;
}
.checkout-mode-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.checkout-mode-overlay-card {
    background: var(--color-pearl-white);
    padding: 22px 28px;
    display: flex; align-items: center; gap: 14px;
    border: 1px solid var(--color-champagne-gold);
    box-shadow: 0 18px 48px rgba(26, 26, 27, 0.22);
    transform: translateY(8px);
    transition: transform var(--duration-base) var(--ease-product);
}
.checkout-mode-overlay.is-visible .checkout-mode-overlay-card {
    transform: translateY(0);
}
.checkout-mode-overlay-spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--color-border-gray);
    border-top-color: var(--color-champagne-gold);
    border-radius: 50%;
    animation: checkout-mode-overlay-spin 880ms linear infinite;
}
@keyframes checkout-mode-overlay-spin {
    to { transform: rotate(360deg); }
}
.checkout-mode-overlay-text {
    margin: 0;
    font-size: 13px; color: var(--color-ink-black);
}

.amckredit-empty-note {
    margin: 16px 0; padding: 14px 18px;
    background: var(--color-pearl-white); border-left: 2px solid var(--color-border-gray);
}
.amckredit-empty-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-smoke-gray); margin: 0 0 4px 0; }
.amckredit-empty-amount { font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: var(--color-ink-black); margin: 0 0 6px 0; font-variant-numeric: tabular-nums; }
.amckredit-empty-text { font-size: 11px; color: var(--color-smoke-gray); line-height: 1.5; margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .tier-card { transition: none; }
    .amckredit-slider-toggle,
    .amckredit-slider-caret,
    .amckredit-slider,
    .amckredit-slider::-webkit-slider-thumb,
    .amckredit-slider::-moz-range-thumb,
    .amckredit-quick-full,
    .checkout-mode-overlay,
    .checkout-mode-overlay-card { transition: none; }
    .amckredit-state-line-full-mark,
    .amckredit-only-notice,
    .checkout-mode-overlay-spinner { animation: none; }
}

/* === Phase 5 patch: incomplete-pending resume banner === */
.club-resume-banner {
    max-width: var(--container-max);
    margin: -32px auto 32px;
    padding: 0 var(--container-padding);
}
.club-resume-banner-inner {
    background: #FFFAF0;
    border-left: 3px solid var(--color-champagne-gold);
    padding: 24px 28px;
    box-shadow: 0 8px 24px rgba(10, 10, 11, 0.06);
}
.club-resume-banner-eyebrow {
    font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--color-deep-gold); margin: 0 0 6px 0;
}
.club-resume-banner-title {
    font-family: var(--font-serif); font-size: 22px; font-weight: 500; line-height: 1.2;
    margin: 0 0 8px 0; color: var(--color-ink-black);
}
.club-resume-banner-lead {
    font-size: 14px; line-height: 1.6; color: var(--color-ink-black); margin: 0 0 18px 0;
}
.club-resume-banner-lead strong { font-weight: 600; }
.club-resume-banner-actions {
    display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.club-resume-banner-cancel-form { margin: 0; }
.club-resume-banner-error {
    margin: 12px 0 0 0; font-size: 13px; color: var(--color-sale-red);
}
@media (max-width: 600px) {
    .club-resume-banner-actions { flex-direction: column; align-items: stretch; }
    .club-resume-banner-actions .btn { width: 100%; text-align: center; }
}

/* ============================================================== */
/* === Polish #1: Header restructure, tier badge, mega-menu === */
/* ============================================================== */

/*
 * Header secondary-nav — fits the new tier badge alongside the cart icon
 * and account links. The badge sits at the front so the eye lands on
 * membership status before action items.
 */
.site-nav-secondary {
    align-items: center;
    gap: 16px;
}

/*
 * Tier badge — Polish #2 escalation. Four states built from a single
 * pill component, each anchored to the rightmost slot of the header so
 * membership status is the persistent visual punctuation:
 *   Guest (Klub Tagság +) ............... transparent + ink border
 *   Klub Tag .............................. transparent + smoke border
 *   Klub+ ................................. champagne tint + gold border (not clickable)
 *   Elite ................................. solid warm-black + gold text (not clickable)
 *
 * Hovering on the clickable states (guest / klub_tag) drifts the border
 * toward champagne. Elite picks up a soft gold halo on hover for "trophy"
 * presence even though clicks are not actionable. Custom CSS tooltip
 * mirrors the title attribute with a 400ms delay so it feels considered,
 * not eager.
 */
.header-tier-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.4rem 0.9rem;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1.5px solid var(--color-border-gray);
    background: transparent;
    color: var(--color-ink-black);
    border-radius: 999px;
    transition:
        border-color var(--duration-quick) var(--ease-product),
        background-color var(--duration-quick) var(--ease-product),
        color var(--duration-quick) var(--ease-product),
        box-shadow var(--duration-base) var(--ease-product),
        transform var(--duration-base) var(--ease-product);
    white-space: nowrap;
    user-select: none;
    line-height: 1;
}
.header-tier-badge-label {
    display: inline-block;
}
.header-tier-badge-plus {
    color: var(--color-champagne-gold);
    flex-shrink: 0;
}
.header-tier-badge-link { cursor: pointer; }
.header-tier-badge:focus-visible {
    outline: 2px solid var(--color-champagne-gold);
    outline-offset: 2px;
}

/* Custom CSS tooltip — fades in 400ms after hover, anchors to the badge's
 * right edge so it never overflows the viewport on the rightmost slot. */
.header-tier-badge[title]::after {
    content: attr(title);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--color-ink-black);
    color: var(--color-pearl-white);
    padding: 6px 12px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(10, 10, 11, 0.18);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity var(--duration-base) var(--ease-product),
        transform var(--duration-base) var(--ease-product);
    transition-delay: 0s;
    z-index: 60;
}
.header-tier-badge[title]:hover::after,
.header-tier-badge[title]:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

/* === State: Guest === */
.header-tier-badge[data-tier="guest"] {
    color: var(--color-ink-black);
    border-color: var(--color-ink-black);
    background: transparent;
}
.header-tier-badge-link[data-tier="guest"]:hover {
    border-color: var(--color-champagne-gold);
}

/* === State: Klub Tag === */
.header-tier-badge[data-tier="klub_tag"] {
    color: var(--color-ink-black);
    border-color: var(--color-smoke-gray);
    background: transparent;
}
.header-tier-badge-link[data-tier="klub_tag"]:hover {
    border-color: var(--color-champagne-gold);
}

/* === State: Klub+ — not clickable === */
.header-tier-badge[data-tier="klub_plus"] {
    color: var(--color-ink-black);
    border-color: var(--color-champagne-gold);
    background: rgba(201, 169, 97, 0.08);
    cursor: default;
}

/* === State: Elite — not clickable, trophy-feel halo on hover === */
.header-tier-badge[data-tier="elite"] {
    color: var(--color-champagne-gold);
    border-color: var(--color-premium-black);
    background: var(--color-premium-black);
    cursor: default;
}
.header-tier-badge[data-tier="elite"]:hover {
    box-shadow: 0 4px 16px rgba(201, 169, 97, 0.25);
}

/* Compact badge sizing on smaller widths to keep the header from wrapping. */
@media (max-width: 1180px) {
    .site-nav-secondary { gap: 12px; }
    .header-tier-badge {
        padding: 0.35rem 0.75rem;
        font-size: 0.65rem;
        letter-spacing: 0.16em;
    }
}

/* Mobile drawer slot for the tier badge — sits under the header bar
 * and above the search input, so customers see their status first.
 * Tooltip suppressed inside the drawer (the badge is already isolated). */
.mobile-drawer-tier {
    margin: 4px 0 24px 0;
}
.mobile-drawer-tier .header-tier-badge {
    padding: 0.5rem 1rem;
    font-size: 0.7rem;
}
.mobile-drawer-tier .header-tier-badge::after { display: none; }

/*
 * Mega-menu — curated 4-column grid: feature card (Akciók), Főzőedények,
 * Serpenyők, then the remaining childless categories grouped tidily on
 * the right. Replaces the old 3-cols + promo aside which couldn't carry
 * 9 root items.
 */
.mega-menu-grid-curated {
    grid-template-columns: minmax(220px, 280px) repeat(3, minmax(0, 1fr));
    gap: 48px;
}
@media (max-width: 1180px) {
    .mega-menu-grid-curated {
        grid-template-columns: minmax(200px, 240px) repeat(3, minmax(0, 1fr));
        gap: 32px;
    }
}

.mega-menu-feature {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(201, 169, 97, 0.08), rgba(201, 169, 97, 0.02));
    border: 1px solid rgba(201, 169, 97, 0.25);
    padding: 24px 24px 22px;
    min-height: 100%;
}
.mega-menu-feature-eyebrow {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-deep-gold);
    margin: 0 0 12px 0;
}
.mega-menu-feature-title {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 12px 0;
    color: var(--color-ink-black);
}
.mega-menu-feature-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-quick) var(--ease-product);
}
.mega-menu-feature-title a:hover { color: var(--color-deep-gold); }
.mega-menu-feature-lead {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-smoke-gray);
    margin: 0 0 20px 0;
}
.mega-menu-feature-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-ink-black);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid var(--color-champagne-gold);
    padding-bottom: 4px;
    align-self: flex-start;
    transition: color var(--duration-quick) var(--ease-product), transform var(--duration-quick) var(--ease-product);
}
.mega-menu-feature-cta:hover {
    color: var(--color-deep-gold);
    transform: translateX(4px);
}

.mega-menu-heading-static {
    /* The 4th column has no clickable parent — render the header as a
     * static label so the eyebrow style doesn't suggest a link. */
    color: var(--color-smoke-gray);
    cursor: default;
}
.mega-menu-heading-static:hover { color: var(--color-smoke-gray); }

/*
 * Mobile nav — sub-list under each parent category that has children
 * (Főzőedények, Serpenyők). Always visible, indented, smaller type. The
 * tap targets stay 44px even when the type is smaller, because the link
 * vertical padding is preserved.
 */
.mobile-nav-sublist {
    list-style: none;
    margin: 0 0 8px 16px;
    padding: 0 0 0 14px;
    border-left: 1px solid var(--color-border-gray);
    display: flex;
    flex-direction: column;
    gap: 0;
}
.mobile-nav-link-child {
    font-size: 13px;
    color: var(--color-smoke-gray);
    padding: 10px 0;
}
.mobile-nav-link-child:hover { color: var(--color-ink-black); }

/* The single Termékek details — keep its summary and contents legible
 * within the new structure; the existing .mobile-nav-group rules handle
 * caret rotation, but we also style the inner items list. */
.mobile-nav-group-products > ul {
    list-style: none;
    margin: 8px 0 12px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: none;
}
.mobile-nav-group-products > ul > li {
    border-bottom: 1px dashed transparent;
}
.mobile-nav-group-products > ul .mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px;
    font-size: 14px;
    color: var(--color-ink-black);
    border-bottom: 1px solid var(--color-border-gray);
    text-decoration: none;
    transition: color var(--duration-quick) var(--ease-product), transform var(--duration-quick) var(--ease-product);
}
.mobile-nav-group-products > ul .mobile-nav-link:hover {
    color: var(--color-deep-gold);
    transform: translateX(4px);
}
.mobile-nav-group-products > ul .mobile-nav-link.is-parent {
    color: var(--color-deep-gold);
    font-weight: 500;
}

/* Hide tier badge on very narrow screens where the secondary nav also
 * collapses — the mobile drawer surfaces the badge anyway. */
@media (max-width: 1024px) {
    .site-nav-secondary .header-tier-badge { display: none; }
}

/* ============================================================== */
/* === Polish #2: Mobile Termékek split text/chevron pattern === */
/* ============================================================== */

/*
 * The drawer parent row ("Termékek") was a <details>/<summary> in Polish
 * #1 — tap fired the disclosure but never navigated. Polish #2 splits the
 * row: the text link navigates straight to /termekek, the chevron button
 * toggles the inline submenu in place. Mirrors the Le Creuset / Bottega
 * Veneta mobile pattern.
 */
.mobile-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border-gray);
    gap: 8px;
}
.mobile-nav-row-link {
    flex: 1 1 auto;
    border-bottom: none; /* row owns the border */
}
.mobile-nav-row-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    color: var(--color-smoke-gray);
    transition:
        color var(--duration-quick) var(--ease-product),
        background-color var(--duration-quick) var(--ease-product),
        border-color var(--duration-quick) var(--ease-product);
}
.mobile-nav-row-toggle:hover {
    color: var(--color-ink-black);
    background: rgba(201, 169, 97, 0.06);
}
.mobile-nav-row-toggle:focus-visible {
    outline: 2px solid var(--color-champagne-gold);
    outline-offset: 2px;
}
.mobile-nav-row-caret {
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    transition: transform var(--duration-base) var(--ease-product);
}
.mobile-nav-row-toggle[aria-expanded="true"] .mobile-nav-row-caret {
    transform: rotate(90deg);
    color: var(--color-deep-gold);
}
.mobile-nav-products-list {
    list-style: none;
    margin: 8px 0 12px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    border-left: none;
}
.mobile-nav-products-list[hidden] { display: none; }
.mobile-nav-products-list > li > .mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px;
    font-size: 14px;
    color: var(--color-ink-black);
    border-bottom: 1px solid var(--color-border-gray);
    text-decoration: none;
    transition: color var(--duration-quick) var(--ease-product), transform var(--duration-quick) var(--ease-product);
}
.mobile-nav-products-list > li > .mobile-nav-link:hover {
    color: var(--color-deep-gold);
    transform: translateX(4px);
}

/* === Polish #1: Vásárlási segédlet placeholder — premium editorial layout */
.static-guide-page {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 96px var(--container-padding) 128px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.static-guide-inner {
    max-width: 640px;
    text-align: center;
}
.static-guide-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-deep-gold);
    margin: 0 0 20px 0;
}
.static-guide-title {
    font-family: var(--font-serif);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 28px 0;
    color: var(--color-ink-black);
}
.static-guide-lead {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--color-smoke-gray);
    margin: 0 0 32px 0;
}
.static-guide-meta {
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-smoke-gray);
    margin: 0;
}
.static-guide-meta a {
    color: var(--color-ink-black);
    border-bottom: 1px solid var(--color-champagne-gold);
    transition:
        color var(--duration-quick) var(--ease-product),
        border-color var(--duration-quick) var(--ease-product);
}
.static-guide-meta a:hover {
    color: var(--color-deep-gold);
    border-bottom-color: var(--color-deep-gold);
}
@media (max-width: 600px) {
    .static-guide-page { padding: 64px 24px 80px; }
}

/* ================================================================= */
/* === Polish #2.1 hotfix v2: header full-width, badge to viewport === */
/* === edge, Bejelentkezés decoration nuked, search → → magnifier  === */
/* ================================================================= */

/*
 * v1 of this hotfix targeted the wrong artefact (a transparent border-bottom
 * on .nav-link that was already invisible) and kept the header constrained
 * to max-width: 1280px so the tier badge sat ~340px from the right edge on
 * 1920px screens — visually "too far inward" exactly as the user described.
 *
 * v2 fixes all three issues at the source:
 *
 *   1) The "felesleges nyíl" was the literal "→" character inside the
 *      search submit button (header.php:136). With the cluster packed
 *      tightly, that arrow sat visually adjacent to the cart icon and
 *      Bejelentkezés text, reading as an arrow next to the login link.
 *      header.php now ships a magnifying-glass <svg> instead — universal
 *      search affordance, no arrow perception possible.
 *
 *   2) The header is set to FULL viewport width on ≥1024px (max-width: none)
 *      with padding-right: 28px — the badge anchors ~28px from the actual
 *      viewport right edge regardless of screen width (1280, 1440, 1920+).
 *
 *   3) Major-group margins are noticeably bigger (nav→search 56px,
 *      search→cluster min 48px), and the badge gets an extra 12px of
 *      margin-left so Regisztráció → badge has clear breathing room beyond
 *      the cluster's internal gap.
 */

/* Bejelentkezés / Üdv name / Kijelentkezés — defensively strip every
 * possible decoration that the Phase 3B / Polish #1 cascade could be
 * applying. Scoped to the account cluster, :not(.nav-link-cta) preserves
 * the Regisztráció pill border. Hover is colour-only — no underline,
 * no border, no shadow, no pseudo-element content. */
.site-nav-secondary .nav-link:not(.nav-link-cta),
.site-nav-secondary .btn-text {
    border: none;
    background: transparent;
    text-decoration: none;
    box-shadow: none;
    padding: 6px 0;
    transition: color var(--duration-quick) var(--ease-product);
}
.site-nav-secondary .nav-link:not(.nav-link-cta)::before,
.site-nav-secondary .nav-link:not(.nav-link-cta)::after,
.site-nav-secondary .btn-text::before,
.site-nav-secondary .btn-text::after {
    content: none;
}
.site-nav-secondary .nav-link:not(.nav-link-cta):hover,
.site-nav-secondary .btn-text:hover {
    color: var(--color-champagne-gold);
    border: none;
    text-decoration: none;
    background: transparent;
    box-shadow: none;
}
.site-nav-secondary .nav-link:not(.nav-link-cta):focus-visible,
.site-nav-secondary .btn-text:focus-visible {
    outline: 2px solid var(--color-champagne-gold);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Search button now wraps an SVG, not a text glyph. The Phase 3B rule
 * `transform: translateX(2px)` on hover slid the arrow to the right —
 * meaningful only with an arrow. With the magnifying glass we drop the
 * slide and use a colour shift only. */
.site-search-button:hover {
    color: var(--color-deep-gold);
    transform: none;
}
.site-search-icon {
    display: block;
}

/* Desktop / laptop airy rhythm — applies only to ≥1024px since the mobile
 * drawer handles spacing below. Header is taken FULL viewport width, the
 * Phase 3B max-width: var(--container-max) constraint is removed, and the
 * inner padding shrinks to 28px so the tier badge anchors ~28px from the
 * actual viewport right edge on every screen. */
@media (min-width: 1024px) {
    /*
     * Layout is a 4-item flex row: logo, primary nav, search, cluster.
     *
     * Centering trick: BOTH the primary nav AND the cluster get `margin-
     * left: auto`. Two auto margins split the leftover space equally
     * between them — half pushes the center group right of the logo,
     * half pushes the cluster right of the search. Result: the primary
     * nav + search pair sits centered horizontally between the logo and
     * the cluster, with the cluster anchored to the right edge.
     *
     * The logo's `margin-right: 48px` mirrors the cluster's `padding-
     * left: 48px` so the center group has equal "edge gaps" on both
     * sides — 48px hard-min plus the auto-margin overflow. Without this
     * mirroring, cluster's 48px padding would make the search→cluster
     * visual gap larger than the logo→primary gap, breaking symmetry.
     *
     * Below 1024px the desktop nav is display:none — the mobile drawer
     * handles spacing — so this block never fights the mobile layout.
     */
    .site-header-inner {
        max-width: none;       /* full-width header on desktop */
        gap: 0;                 /* explicit margins do the work */
        padding-left: 32px;
        padding-right: 28px;   /* badge sits ~28px from viewport right edge */
    }
    .site-logo {
        margin-right: 48px;    /* mirrors cluster's padding-left for symmetric centering */
    }
    .site-nav-primary {
        gap: 28px;
        margin-left: auto;     /* absorbs leftover/2 — left edge of center group */
    }
    .site-search {
        margin-left: 56px;     /* primary nav → search (3.5rem) */
        flex: 0 1 280px;
        max-width: 280px;
    }
    .site-nav-secondary {
        gap: 18px;              /* internal cluster spacing */
        margin-left: auto;     /* absorbs leftover/2 — right edge of center group */
        padding-left: 48px;    /* min 48px from search; mirrors logo margin-right */
    }
    /* Extra breathing room between Regisztráció (or Kijelentkezés btn-text)
     * and the tier badge — the badge becomes its own visual punctuation,
     * not just another item in the cluster. */
    .site-nav-secondary .header-tier-badge {
        margin-left: 12px;
    }
}

/* ─── Phase 7 — Coupon panel ───────────────────────────────────────────────
 * Used in both the cart summary aside and the checkout summary aside.
 * Visual reference: Stripe's hosted-checkout coupon entry — collapsed
 * subtle link by default, premium gold ✓ on success, restrained type.
 */

.cart-coupon {
    margin: 22px 0 0 0;
    padding: 20px 0;
    border-top: 1px solid #E8E6E0;
    border-bottom: 1px solid #E8E6E0;
}

.cart-coupon-toggle {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    color: #1A1A1B;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-align: left;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cart-coupon-toggle > span:first-child {
    border-bottom: 1px solid #C9A961;
    padding-bottom: 1px;
}
.cart-coupon-toggle-caret {
    color: #888880;
    font-size: 16px;
    line-height: 1;
    transition:
        transform var(--duration-base) var(--ease-product),
        color var(--duration-quick) var(--ease-product);
}
/* Chevron rotates 90° when the panel is expanded — visual hint for
 * "now click again to collapse". */
.cart-coupon-toggle[aria-expanded="true"] .cart-coupon-toggle-caret {
    transform: rotate(90deg);
    color: #C9A961;
}

/* Sliding panel container — the actual element whose max-height we
 * animate from 0 → natural. Children (.cart-coupon-body and
 * .cart-coupon-applied) stay marked with [hidden] when the panel is
 * collapsed so they aren't reachable by Tab. */
.cart-coupon-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        max-height var(--duration-base) var(--ease-product),
        opacity var(--duration-base) var(--ease-product);
}
.cart-coupon-panel.is-expanded {
    /* 320 px is generous — enough room for the input + button + a
     * two-line error/success message even on tight viewports. */
    max-height: 320px;
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .cart-coupon-panel { transition: none; }
}
@media (hover: hover) and (pointer: fine) {
    .cart-coupon-toggle:hover {
        color: #0A0A0B;
    }
    .cart-coupon-toggle:hover > span:first-child {
        border-bottom-color: #1A1A1B;
    }
}

.cart-coupon-body {
    margin-top: 14px;
}
.cart-coupon-body .form-label {
    display: block;
    margin: 0 0 6px 0;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #888880;
}

.cart-coupon-form {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.cart-coupon-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #DDD9CF;
    background: #FFF;
    color: #1A1A1B;
    font-family: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition:
        border-color var(--duration-quick) var(--ease-product),
        box-shadow var(--duration-quick) var(--ease-product);
}
.cart-coupon-input:focus {
    outline: none;
    border-color: #C9A961;
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18);
}
.cart-coupon-input::placeholder {
    color: #B5B0A4;
    letter-spacing: 0.12em;
}
.cart-coupon-apply {
    flex: 0 0 auto;
    padding: 12px 18px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Success affordance after a valid coupon apply. Lower contrast than
 * the discount line in the summary above — the latter is already the
 * loud "yes it worked" signal. */
.cart-coupon-success {
    margin: 8px 0 0 0;
    font-size: 12px;
    color: #1A1A1B;
    opacity: 0.75;
    line-height: 1.4;
}
.cart-coupon-success[hidden] { display: none; }

.cart-coupon-error {
    margin: 10px 0 0 0;
    font-size: 12px;
    color: #934241;
    line-height: 1.5;
}

.cart-coupon-applied {
    background: rgba(201, 169, 97, 0.08);
    border-left: 3px solid #C9A961;
    padding: 14px 16px;
}
.cart-coupon-applied-meta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
}
.cart-coupon-applied-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #C9A961;
    color: #0A0A0B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}
.cart-coupon-applied-info {
    min-width: 0;
}
.cart-coupon-applied-label {
    margin: 0 0 2px 0;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #A88848;
}
.cart-coupon-applied-code {
    margin: 0;
    font-family: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;
    font-size: 14px;
    letter-spacing: 0.14em;
    color: #1A1A1B;
}
.cart-coupon-applied-name {
    margin: 2px 0 0 0;
    font-size: 12px;
    color: #666661;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-coupon-applied-discount {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 18px;
    color: #1A1A1B;
    text-align: right;
    white-space: nowrap;
}

.cart-coupon-remove {
    appearance: none;
    background: transparent;
    border: none;
    padding: 8px 0 0 0;
    margin-top: 6px;
    color: #888880;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
    .cart-coupon-remove:hover {
        color: #934241;
    }
}

.cart-coupon.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Coupon code chips inside summary rows */
.cart-summary-coupon-code,
.checkout-summary-coupon-code {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    background: #FAFAF7;
    border: 1px solid #E8E6E0;
    color: #1A1A1B;
    font-family: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 2px;
}

/* Mobile tweaks */
@media (max-width: 640px) {
    .cart-coupon-form {
        flex-direction: column;
    }
    .cart-coupon-applied-meta {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon  info"
            "discount discount";
        row-gap: 8px;
    }
    .cart-coupon-applied-icon { grid-area: icon; }
    .cart-coupon-applied-info { grid-area: info; }
    .cart-coupon-applied-discount {
        grid-area: discount;
        text-align: left;
    }
}

/* === Klub+ progress indicators === */
.klub-shipping-progress {
    --klub-progress-scale: 0;
    position: relative;
    overflow: hidden;
    margin: 0 0 18px 0;
    padding: 16px 18px;
    background: #FFFDF8;
    border: 1px solid rgba(201, 169, 97, 0.28);
    color: var(--color-ink-black);
}
.klub-shipping-progress[hidden] { display: none; }
.klub-shipping-progress--drawer { margin: 0 0 16px 0; padding: 14px 16px; background: rgba(255, 255, 255, 0.74); }
.klub-shipping-progress--checkout { margin-top: -2px; }
.klub-shipping-progress__copy { display: flex; flex-direction: column; gap: 4px; }
.klub-shipping-progress__label {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: 0;
}
.klub-shipping-progress__label strong {
    font-family: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.klub-shipping-progress__meta {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--color-smoke-gray);
    letter-spacing: 0;
}
.klub-shipping-progress__track {
    height: 5px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(26, 26, 27, 0.1);
}
.klub-shipping-progress__fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9C7A2F 0%, #C9A961 48%, #F0DEAD 100%);
    transform: scaleX(var(--klub-progress-scale));
    transform-origin: left center;
    transition: transform var(--duration-base) var(--ease-product);
}
.klub-shipping-progress__check {
    display: inline-block;
    margin-right: 6px;
    color: var(--color-deep-gold);
    opacity: 0;
    transform: translateY(2px) scale(0.92);
    animation: klub-check-in var(--duration-base) var(--ease-product) forwards;
}
.klub-shipping-progress.is-close {
    border-color: rgba(201, 169, 97, 0.48);
    background: #FFFBF1;
}
.klub-shipping-progress.is-qualified {
    border-color: rgba(201, 169, 97, 0.64);
    background: linear-gradient(180deg, #FFFDF8 0%, #FFF8E7 100%);
}
.klub-shipping-progress.is-activated {
    animation: klub-shipping-activated var(--duration-slow) var(--ease-product);
}

.klub-progress-card {
    --klub-progress-scale: 0;
    position: relative;
    overflow: hidden;
    margin: 24px 0 30px 0;
    padding: 24px;
    background: #111315;
    color: var(--color-pearl-white);
    border: 1px solid rgba(201, 169, 97, 0.24);
}
.klub-progress-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(120deg, rgba(201, 169, 97, 0.14), transparent 32%),
        radial-gradient(circle at 85% 12%, rgba(240, 222, 173, 0.1), transparent 28%);
}
.klub-progress-card > * { position: relative; z-index: 1; }
.klub-progress-card--wallet { margin-top: -8px; }
.klub-progress-card__topline,
.klub-progress-card__header,
.klub-progress-card__meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}
.klub-progress-card__topline { margin-bottom: 18px; }
.klub-progress-card__eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    color: rgba(250, 250, 247, 0.62);
}
.klub-progress-card__badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 10px;
    border: 1px solid rgba(201, 169, 97, 0.5);
    color: var(--color-champagne-gold);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}
.klub-progress-card__title {
    margin: 0 0 8px 0;
    font-family: var(--font-serif);
    font-size: 28px;
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: 0;
}
.klub-progress-card__lead {
    max-width: 660px;
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(250, 250, 247, 0.78);
    letter-spacing: 0;
}
.klub-progress-card__lead strong,
.klub-progress-card__meta strong,
.klub-progress-card__percent {
    font-family: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.klub-progress-card__percent {
    margin: 4px 0 0 0;
    color: var(--color-champagne-gold);
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
}
.klub-progress-card__track {
    height: 9px;
    margin: 24px 0 18px 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(250, 250, 247, 0.12);
}
.klub-progress-card__fill {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9C7A2F 0%, #C9A961 42%, #F4E4B8 100%);
    transform: scaleX(var(--klub-progress-scale));
    transform-origin: left center;
    transition: transform var(--duration-slow) var(--ease-product);
}
.klub-progress-card.is-complete .klub-progress-card__fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
    transform: translateX(-100%);
    animation: klub-progress-shimmer 3.2s var(--ease-product) infinite;
}
.klub-progress-card__meta {
    align-items: flex-end;
    color: rgba(250, 250, 247, 0.72);
}
.klub-progress-card__meta p {
    margin: 0;
    max-width: 620px;
    font-size: 13px;
    line-height: 1.55;
    letter-spacing: 0;
}
.klub-progress-card__notice { color: #F0DEAD; }
.klub-progress-card__link {
    color: var(--color-champagne-gold);
    border-bottom: 1px solid rgba(201, 169, 97, 0.5);
    padding-bottom: 2px;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0;
}
.klub-progress-card__link:hover { border-bottom-color: var(--color-champagne-gold); }

@keyframes klub-check-in {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes klub-shipping-activated {
    0% { box-shadow: 0 0 0 rgba(201, 169, 97, 0); }
    28% { box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.18); }
    100% { box-shadow: 0 0 0 rgba(201, 169, 97, 0); }
}
@keyframes klub-progress-shimmer {
    0% { transform: translateX(-100%); }
    42%, 100% { transform: translateX(100%); }
}

@media (max-width: 768px) {
    .klub-progress-card {
        margin: 22px 0 28px 0;
        padding: 20px;
    }
    .klub-progress-card__topline,
    .klub-progress-card__header,
    .klub-progress-card__meta {
        flex-direction: column;
        gap: 12px;
    }
    .klub-progress-card__title { font-size: 23px; }
    .klub-progress-card__percent { font-size: 24px; }
    .klub-progress-card__meta { align-items: flex-start; }
    .klub-progress-card__link { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .klub-shipping-progress,
    .klub-shipping-progress__fill,
    .klub-shipping-progress__check,
    .klub-progress-card__fill,
    .klub-progress-card.is-complete .klub-progress-card__fill::after {
        animation: none;
        transition: none;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
 * Klub+ achievement state — lifetime modell (2026-05-10)
 *
 * A klub_plus user dashboard / wallet oldalon először látja az "Ön Klub+ tag"
 * achievement panel-t. Discreet champagne-gold flash a badge-en + fade-in a
 * tartalmon — egyszer lejátszódik load-kor, majd nyugalomba kerül.
 * Editorial AMC brand: visszafogott, premium, prefers-reduced-motion respekt.
 * ─────────────────────────────────────────────────────────────────────────── */

@keyframes klub-achievement-fade-in {
    0% { opacity: 0; transform: translateY(3px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes klub-achievement-checkmark {
    0% {
        opacity: 0;
        transform: scale(0.94);
        box-shadow: 0 0 0 0 rgba(201, 169, 97, 0);
    }
    45% {
        opacity: 1;
        transform: scale(1.04);
        box-shadow: 0 0 18px 2px rgba(201, 169, 97, 0.32);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(201, 169, 97, 0);
    }
}

.klub-progress-card.is-klub-plus .klub-progress-card__header,
.klub-progress-card.is-klub-plus .klub-progress-card__meta {
    animation: klub-achievement-fade-in 600ms var(--ease-product, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

.klub-progress-card.is-klub-plus .klub-progress-card__meta {
    animation-delay: 120ms;
}

.klub-progress-card.is-klub-plus .klub-progress-card__badge {
    animation: klub-achievement-checkmark 900ms var(--ease-product, cubic-bezier(0.22, 1, 0.36, 1)) 200ms both;
}

@media (prefers-reduced-motion: reduce) {
    .klub-progress-card.is-klub-plus .klub-progress-card__header,
    .klub-progress-card.is-klub-plus .klub-progress-card__meta,
    .klub-progress-card.is-klub-plus .klub-progress-card__badge {
        animation: none;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
 * Header refinements — laptop range (1024–1440px) + mobile (≤768px)
 *
 * The base header rules (line 216 onwards) and the ≥1280px symmetry block
 * (line 3686) both need targeted overrides in two viewports:
 *
 *   • 1024–1440px ("laptop"): search ran wide, magnifier sat outside the
 *     input, and the "Üdv. Richárd" greeting collided with the cart/wishlist
 *     icons. We pin the search to 200px, position the magnifier absolutely
 *     inside the input, tighten the right-cluster gap to 16px, and at the
 *     narrow end (<1280px) fold the greeting away entirely.
 *
 *   • ≤768px ("mobile"): the secondary nav is otherwise hidden by the
 *     ≤1024 base rule (line 341). We selectively re-show only the wishlist
 *     and cart icons so customers reach those flows without opening the
 *     hamburger drawer. Tap targets are 44×44 minimum per WCAG.
 *
 * Both blocks are appended at end-of-file so they win the cascade against
 * the earlier ≥1280 / ≤1024 rules they need to override. Above 1440px and
 * between 769–1023px nothing changes — those breakpoints are explicitly
 * left untouched. Colours stick to the existing brand tokens.
 * ─────────────────────────────────────────────────────────────────────── */

@media (min-width: 1025px) and (max-width: 1440px) {
    /* Container gap shrinks to 16 so logo→primary→search→secondary all
     * sit on a single row at this width without colliding. The right
     * cluster becomes a tight visual group: search 200px, then wishlist,
     * cart, greeting, logout, badge, all 16px apart. */
    .site-header-inner {
        gap: 16px;
    }
    .site-search {
        position: relative;
        flex: 0 0 200px;        /* fixed 200px — no grow, no shrink */
        max-width: 200px;
        margin-left: auto;      /* absorbs leftover space — search sits
                                   immediately left of the secondary cluster */
    }
    .site-search-input {
        padding: 10px 30px 10px 0;
    }
    .site-search-button {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        padding: 4px;
        line-height: 1;
        color: var(--color-ink-black);
    }
    .site-search-button:hover {
        /* Override the base translateX(2px) so the icon stays anchored
         * to the input's right edge on hover instead of drifting out. */
        color: var(--color-deep-gold);
        transform: translateY(-50%);
    }
    .site-nav-secondary {
        gap: 16px;
        margin-left: 0;         /* search now owns the auto-margin push */
        padding-left: 0;        /* override the ≥1280 48px padding so the
                                   16px container gap is the actual spacing */
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    /* Tier badge had a 12px left margin from the ≥1280 rule — drop it so
     * the cluster reads as one even-spaced row instead of "items + badge". */
    .site-nav-secondary .header-tier-badge {
        margin-left: 0;
    }
    /* The cart icon's base 8px right margin throws the rhythm off in this
     * tight range — neutralise it. */
    .site-nav-secondary .cart-icon {
        margin-right: 0;
    }
}

/* Below 1280px — the greeting eats space the icons need. Hiding it keeps
 * the rest of the cluster (icons + logout + tier badge) on a single row. */
@media (min-width: 1025px) and (max-width: 1279px) {
    .site-nav-secondary .nav-link-greeting {
        display: none;
    }
}

/* Mobile + tablet (≤1024px) — wishlist + cart icons surface in the header
 * next to the hamburger. The base rule at line 341 hid .site-nav-secondary
 * entirely below 1024; we re-enable it here AND mask everything inside
 * that isn't one of the two icons so logged-in users don't suddenly see
 * "Üdv" or the tier badge crammed next to the burger. The breakpoint
 * intentionally matches the existing primary-nav hide point so wishlist
 * + cart appear on every viewport that shows the hamburger. */
@media (max-width: 1024px) {
    .site-nav-secondary {
        display: flex;
        gap: 12px;
        margin-left: auto;
        padding: 0;
        align-items: center;
    }
    .site-nav-secondary > :not(.wishlist-icon):not(.cart-icon) {
        display: none;
    }
    .mobile-menu-trigger {
        margin-left: 0;
    }
    .wishlist-icon,
    .cart-icon {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        background: transparent;
        border: 1px solid transparent;
        color: var(--color-ink-black);
        cursor: pointer;
        position: relative;
    }
    .wishlist-icon-svg,
    .cart-icon-svg {
        width: 24px;
        height: 24px;
    }
}

/* The wishlist link is rendered for everyone so the mobile/tablet slot
 * exists, but on desktop (≥1025) guests still saw nothing previously —
 * preserve that by hiding the guest variant above the mobile breakpoint. */
@media (min-width: 1025px) {
    .wishlist-icon-guest {
        display: none;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
 * Cart drawer scrolling — Fix for mobile/tablet (≤1024px)
 *
 * The drawer was already a flex column (header, scrollable body, footer),
 * but two issues broke iOS/iPadOS:
 *
 *   1. height: 100vh doesn't account for Safari's collapsible toolbar — the
 *      footer rendered below the visible viewport, the body's overflow
 *      never engaged, and the page behind absorbed touch scrolls.
 *   2. Even with body { overflow: hidden }, scroll chaining could still
 *      pass touches to the document below at the body's scroll boundary.
 *
 * Fix: dynamic viewport units (with vh fallback for older browsers), plus
 * overscroll-behavior: contain on the scrolling region. The premium
 * polish — fade gradient and focus trap — gets its CSS hooks here too.
 * ─────────────────────────────────────────────────────────────────────── */

.cart-drawer {
    /* Dynamic viewport accounts for the iOS Safari address bar; older
     * browsers fall through to 100vh which is still acceptable. */
    height: 100vh;
    height: 100dvh;
    /* Provide containing block for the absolutely-positioned fade overlay. */
    position: fixed;
}
.cart-drawer-body {
    /* Stop touch scrolls from chaining out to the document body once the
     * scroll position hits top or bottom of the items list. */
    overscroll-behavior: contain;
    /* Promote to its own composite layer for smooth iOS momentum scroll. */
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
    /* Pad-bottom by the fade height so the last item's bottom edge isn't
     * permanently obscured by the gradient. */
    padding-bottom: 32px;
    /* Sticky positioning context for the fade. */
    position: relative;
}

.cart-drawer-fade {
    /* Lives just above the footer block. The bottom offset is set inline
     * by the JS on open / cart-update / resize so it tracks the footer's
     * actual rendered height (which varies with the Klub+ shipping
     * progress widget being present or not). */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24px;
    background: linear-gradient(to top, var(--color-pearl-white), rgba(250, 247, 242, 0));
    pointer-events: none;
    z-index: 2;
    opacity: 1;
    transition: opacity var(--duration-quick) var(--ease-product);
}
.cart-drawer.is-at-bottom .cart-drawer-fade,
.cart-drawer.cart-drawer-empty-state .cart-drawer-fade {
    opacity: 0;
}

/* Robust body scroll lock — applied via JS on drawer open. position:fixed
 * pattern is the only one that reliably stops iOS rubber-band touch
 * scrolling on the document. */
body.is-scroll-locked {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .cart-drawer-fade { transition: none; }
}

/* ───────────────────────────────────────────────────────────────────────────
 * Sticky add-to-cart bar — mobile PDP, Hermès pattern.
 *
 * Lives outside the product-detail section in the DOM (rendered at the
 * end of views/products/show.php) so position:fixed has the viewport
 * as its containing block.
 *
 * Visibility orchestration: app.js's initStickyCta() observes the
 * original .product-cta-row and the .site-footer with two
 * IntersectionObservers and toggles `.is-visible` when the customer
 * has scrolled past the original CTA but not yet reached the footer.
 *
 * Bar is mobile-only — strict ≤768 px. Tablet and desktop never
 * render it. The base `display: none` enforces that even if the JS
 * manages to add `.is-visible`, the bar stays gone.
 *
 * iOS safe-area: padding-bottom env() lifts content above the home
 * indicator on iPhone X+ in portrait. Falls back to 0 on Android /
 * older browsers.
 *
 * Brand tokens used (no new colours):
 *   #FFFFFF  bar background
 *   #1A1410  text
 *   #C9A961  champagne CTA fill
 *   #A88A47  deep gold hover
 *   #E8E2D5  warm beige top hairline
 *   #F2EDE3  thumb placeholder bg
 * ─────────────────────────────────────────────────────────────────────── */

.sticky-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 800;
    background: #FFFFFF;
    border-top: 1px solid #E8E2D5;
    box-shadow: 0 -8px 24px rgba(26, 20, 16, 0.08);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    /* Visibility-delay matches the slide-out so the bar stays
     * pointer-receptive during the slide; flips to hidden the instant
     * the slide finishes. The slide-in path zeroes the delay so the
     * bar is interactive the moment it starts moving in. */
    transition:
        transform var(--duration-base) var(--ease-product),
        opacity var(--duration-base) var(--ease-product),
        visibility 0s var(--duration-base);
    will-change: transform, opacity;
    /* Hidden on tablet + desktop. Mobile media query below promotes
     * to display: block. */
    display: none;
}
.sticky-cta-bar.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition:
        transform var(--duration-base) var(--ease-product),
        opacity var(--duration-base) var(--ease-product),
        visibility 0s;
}

@media (max-width: 1023px) {
    .sticky-cta-bar { display: block; }
    /* Reserve space at the foot of the PDP so the always-visible sticky
     * bar (72 px tall) doesn't cover the last block of main content
     * before the footer slide-out kicks in. Desktop has no sticky bar
     * so no padding needed there. */
    .product-detail { padding-bottom: 88px; }
}

.sticky-cta-bar__inner {
    /* Two state blocks share the same 72px-tall row. CSS grid keeps
     * them stacked at the same coordinates so toggling data-state via
     * JS swaps content without reflow / layout shift. The shared
     * opacity transition belongs to the inner so .is-transitioning
     * (set by the JS during a state switch) fades both children at
     * once. */
    position: relative;
    height: 72px;
    box-sizing: border-box;
    transition: opacity var(--duration-quick) var(--ease-product);
}
.sticky-cta-bar.is-transitioning .sticky-cta-bar__inner {
    opacity: 0;
}

.sticky-cta-bar__state {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    height: 100%;
    box-sizing: border-box;
}

/* Data-state on the bar drives which inner block is visible — the
 * other is fully removed from the layout (display: none) so it can't
 * receive focus / clicks. */
.sticky-cta-bar[data-state="a"] [data-sticky-state-b] { display: none; }
.sticky-cta-bar[data-state="b"] [data-sticky-state-a] { display: none; }

/* Cart-drawer open / cart page → suppress the sticky bar entirely.
 * The body[data-cart-open="true"] attribute is already toggled by
 * the existing cart-drawer module (Package B). Using display:none
 * is safe because the IntersectionObservers watch the gallery + footer
 * sentinels, not the bar itself, so they keep firing while the bar is
 * hidden — when the drawer closes the bar's correct state is already
 * computed and only needs to re-show. */
body[data-cart-open="true"] .sticky-cta-bar { display: none; }

.sticky-cta-bar__thumb {
    flex: 0 0 auto;
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    overflow: hidden;
    background: #F2EDE3;
    position: relative;
}
.sticky-cta-bar__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sticky-cta-bar__thumb-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #C9A961;
    opacity: 0.7;
}

.sticky-cta-bar__text {
    flex: 1 1 auto;
    min-width: 0;        /* critical for ellipsis inside flex */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sticky-cta-bar__name {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    color: #1A1410;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-cta-bar__btn {
    flex: 0 0 auto;
    appearance: none;
    background: #C9A961;
    color: #1A1410;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 12px 18px;
    border: 1px solid #C9A961;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color var(--duration-quick) var(--ease-product), border-color var(--duration-quick) var(--ease-product), color var(--duration-quick) var(--ease-product), transform var(--duration-quick) var(--ease-product);
    white-space: nowrap;
    min-height: 44px; /* tap target */
}
.sticky-cta-bar__btn:hover,
.sticky-cta-bar__btn:active {
    background: #A88A47;
    border-color: #A88A47;
}
.sticky-cta-bar__btn:hover { transform: translateY(-1px); }
.sticky-cta-bar__btn:active { transform: translateY(0); transition-duration: 120ms; }
.sticky-cta-bar__btn:focus-visible {
    outline: 2px solid #1A1410;
    outline-offset: 2px;
}
.sticky-cta-bar__btn:disabled,
.sticky-cta-bar__btn.is-loading {
    cursor: wait;
    opacity: 0.7;
}
.sticky-cta-bar__btn.is-success {
    background: #1A1410;
    border-color: #1A1410;
    color: #FAF7F2;
}

/* Stock-notify variant — outline-style to differentiate from the
 * primary champagne fill, keeps the same uppercase tracking. */
.sticky-cta-bar__btn--notify {
    background: #FFFFFF;
    color: #1A1410;
    border-color: #1A1410;
}
.sticky-cta-bar__btn--notify:hover,
.sticky-cta-bar__btn--notify:active,
.sticky-cta-bar__btn--notify.is-subscribed {
    background: #1A1410;
    color: #FFFFFF;
    border-color: #1A1410;
}

/* Compact label swap — the long "Kosárba teszem" wraps the row on the
 * narrowest phones (iPhone SE 320 px). Below 360 px we drop the
 * "teszem" half so the row stays single-line. */
.sticky-cta-bar__btn-short { display: none; }
@media (max-width: 360px) {
    .sticky-cta-bar__btn-full { display: none; }
    .sticky-cta-bar__btn-short { display: inline; }
}

/* ── State B (product in cart) ──────────────────────────────────────── */

/* The green check tile takes the same 56×56 footprint the thumbnail
 * occupies in State A — the bar's geometry is identical between the
 * two states so the fade-swap reads as a content change, not a
 * layout shift. The deep premium green (#2E7D5C) is intentionally
 * NOT bright Bootstrap green; reads as confidence, not a system alert. */
.sticky-cta-bar__check {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    background: #2E7D5C;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sticky-cta-bar__check svg {
    display: block;
}

.sticky-cta-bar__incart-label {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    color: #1A1410;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
}
.sticky-cta-bar__incart-meta {
    margin: 2px 0 0;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
    color: #1A1410;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right-side action — text + X grouped as one tappable button.
 * Uppercase + 0.08em letter-spacing matches the brand's metadata
 * voice; opacity 0.7 keeps the destructive action quieter than the
 * confirmatory green check. Tap-target ≥44 px guaranteed by min-height. */
.sticky-cta-bar__remove {
    flex: 0 0 auto;
    appearance: none;
    background: transparent;
    border: none;
    padding: 8px 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1A1410;
    opacity: 0.7;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity var(--duration-quick) var(--ease-product);
    min-height: 44px;
}
.sticky-cta-bar__remove:hover,
.sticky-cta-bar__remove:active,
.sticky-cta-bar__remove:focus-visible {
    opacity: 1;
}
.sticky-cta-bar__remove:focus-visible {
    outline: 2px solid #C9A961;
    outline-offset: 2px;
    border-radius: 2px;
}
.sticky-cta-bar__remove-icon {
    flex: 0 0 auto;
    color: currentColor;
}

/* Compact remove label on tight viewports — `ELTÁVOLÍTÁS A KOSÁRBÓL`
 * is 22 chars uppercase + tracked, doesn't fit < 360 px. */
.sticky-cta-bar__remove-text-short { display: none; }
@media (max-width: 360px) {
    .sticky-cta-bar__remove-text-full { display: none; }
    .sticky-cta-bar__remove-text-short { display: inline; }
}

/* ── Hide the original PDP CTA on mobile ────────────────────────────── */

/* The sticky bar at the bottom is the primary CTA on mobile, the
 * standalone button in the product info block becomes redundant
 * visual noise. Wishlist heart + stock indicator are siblings, not
 * descendants, so they stay visible. */
@media (max-width: 1023px) {
    [data-pdp-cta] {
        display: none;
    }
}

/* The gallery-end sentinel is a 1 px-tall invisible probe for the
 * IntersectionObserver. We never want it to take real space; height: 1
 * keeps it observable, width: 100% guarantees the IO can compute a
 * meaningful boundingClientRect. */
.pdp-gallery-end {
    height: 1px;
    width: 100%;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .sticky-cta-bar {
        /* Fade only — drop the slide so customers who set the OS
         * preference get a calmer entrance. */
        transition: opacity var(--duration-quick) var(--ease-product), visibility 0s var(--duration-quick);
        transform: none;
    }
    .sticky-cta-bar.is-visible {
        transform: none;
        transition: opacity var(--duration-quick) var(--ease-product), visibility 0s;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
 * Search results page (/kereses) — premium editorial card grid.
 *
 * Differs from the catalogue product grid in three ways:
 *   1. No price line — the user arrived via a query, the goal is "find
 *      it", not "compare prices". The card hierarchy collapses to
 *      thumbnail + category eyebrow + name.
 *   2. Tighter card chrome — no rating, no wishlist heart, no add-to-
 *      cart CTA. A single anchor wraps the whole card.
 *   3. Two-column mobile layout — denser than the catalogue grid's
 *      single-column treatment, because search results are a
 *      decision-tree screen, not a browse-and-savour screen.
 *
 * Brand tokens used:
 *   #FAF7F2  page bg
 *   #FFFFFF  card image surface
 *   #1A1410  primary text (name)
 *   #C9A961  champagne accent (eyebrow / focus ring / hover link)
 *   #A88A47  deep gold hover
 *   #E8E2D5  warm beige hairline
 *   #F2EDE3  image placeholder
 * ─────────────────────────────────────────────────────────────────────── */

.search-results-page {
    padding: 64px 0 96px;
    background: var(--color-pearl-white);
}
.search-results-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 0 var(--container-padding);
}

.search-results-header {
    margin-bottom: 32px;
}
.search-results-eyebrow {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #C9A961;
    margin: 0 0 8px;
}
.search-results-title {
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 500;
    line-height: 1.2;
    color: #1A1410;
    margin: 0 0 14px;
}
.search-results-count {
    font-family: var(--font-sans);
    font-size: 14px;
    color: #1A1410;
    opacity: 0.7;
    margin: 0;
}
.search-results-count strong {
    font-weight: 500;
    color: #1A1410;
    opacity: 1;
}

.search-results-form {
    display: flex;
    gap: 12px;
    margin: 0 0 40px;
    max-width: 540px;
}
.search-results-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid #E8E2D5;
    background: #FFFFFF;
    color: #1A1410;
    font-family: var(--font-sans);
    font-size: 14px;
    transition: border-color var(--duration-quick) var(--ease-product);
}
.search-results-input:focus {
    outline: none;
    border-color: #C9A961;
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18);
}

/* ─── Result grid ─────────────────────────────────────────────────── */

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 16px;
    margin-bottom: 48px;
}
@media (min-width: 768px) {
    .search-results-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 36px 24px;
    }
}
@media (min-width: 1024px) {
    .search-results-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 48px 32px;
    }
}

/* ─── Result card ─────────────────────────────────────────────────── */

.search-result-card {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E8E2D5;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: #1A1410;
    transition:
        transform var(--duration-base) var(--ease-product),
        box-shadow var(--duration-base) var(--ease-product),
        border-color var(--duration-quick) var(--ease-product);
}
@media (hover: hover) and (pointer: fine) {
    .search-result-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px rgba(26, 20, 16, 0.06);
        border-color: #E8E2D5;
    }
    .search-result-card:hover .search-result-card__image img {
        transform: scale(1.03);
    }
}
.search-result-card:focus-visible {
    outline: 2px solid #C9A961;
    outline-offset: 2px;
    border-radius: 4px;
}

.search-result-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #F2EDE3;
    overflow: hidden;
    position: relative;
}
.search-result-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.search-result-card__image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 14px;
    letter-spacing: 0.22em;
    color: #C9A961;
    opacity: 0.6;
}

.search-result-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.search-result-card__category {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #C9A961;
    margin: 0;
    /* Single-line guarantee so the card height stays consistent
     * across rows even when category names vary. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-card__name {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: #1A1410;
    margin: 0;
    /* 2-line clamp — names like "Easyquick 16 cm-es főzőedény (1.3 l)"
     * happily wrap to two lines, anything longer ellipses cleanly. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 768px) {
    .search-result-card__body { padding: 22px; }
    .search-result-card__name { font-size: 19px; }
}

/* ─── Empty state ─────────────────────────────────────────────────── */

.search-results-empty {
    text-align: center;
    padding: 80px 24px;
    max-width: 480px;
    margin: 0 auto;
}
.search-results-empty__title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    color: #1A1410;
    margin: 0 0 14px;
}
.search-results-empty__lead {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: #1A1410;
    opacity: 0.7;
    margin: 0;
}
.search-results-empty__link {
    color: #1A1410;
    text-decoration: none;
    border-bottom: 1px solid #E8E2D5;
    padding-bottom: 1px;
    transition:
        color var(--duration-quick) var(--ease-product),
        border-color var(--duration-quick) var(--ease-product);
}
.search-results-empty__link:hover {
    color: #C9A961;
    border-bottom-color: #C9A961;
}

@media (prefers-reduced-motion: reduce) {
    .search-result-card,
    .search-result-card__image img {
        transition: none;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
 * Cart undo toast — Package B "Termék eltávolítva. Visszavonás" pattern.
 *
 * Single toast at a time. Slides up from the bottom-centre with the
 * inverse palette (#1A1410 bg, #FAF7F2 text) so it reads as deliberately
 * elevated above the page chrome. The 5-second progress bar at the bottom
 * edge visualises the time-remaining without screaming "URGENT" — it's
 * the honest answer to "how long do I have to undo?".
 *
 * iOS safe-area: bottom offset honours env(safe-area-inset-bottom) so the
 * toast doesn't sit under the home indicator on iPhone landscape and on
 * recent iPads.
 * ─────────────────────────────────────────────────────────────────────── */

.cart-undo-toast-container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    pointer-events: none;
    /* Container itself is just an aria-live mount point — no visuals. */
}

.cart-undo-toast {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(40px);
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    width: max-content;
    max-width: min(480px, calc(100vw - 32px));
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 20px;
    background: #1A1410;
    color: #FAF7F2;
    border-radius: 4px;
    box-shadow: 0 12px 32px rgba(26, 20, 16, 0.18);
    pointer-events: auto;
    opacity: 0;
    transition:
        transform var(--duration-base) var(--ease-product),
        opacity var(--duration-base) var(--ease-product);
}
.cart-undo-toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.cart-undo-toast.is-leaving {
    transform: translateX(-50%) translateY(40px);
    opacity: 0;
    transition:
        transform var(--duration-base) var(--ease-product),
        opacity var(--duration-base) var(--ease-product);
}

.cart-undo-toast__message {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #FAF7F2;
}

.cart-undo-toast__action {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: #C9A961;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--duration-quick) var(--ease-product);
    flex: 0 0 auto;
}
.cart-undo-toast__action:hover,
.cart-undo-toast__action:focus-visible {
    color: #A88A47;
}
.cart-undo-toast__action:focus-visible {
    outline: 2px solid #C9A961;
    outline-offset: 4px;
    border-radius: 2px;
}

.cart-undo-toast__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(201, 169, 97, 0.18);
    overflow: hidden;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.cart-undo-toast__progress-fill {
    display: block;
    height: 100%;
    width: 100%;
    background: #C9A961;
    transform-origin: left center;
    /* JS sets the transition + transform=scaleX(0) when the timer starts.
     * Linear easing because it's a literal time meter. */
}

/* Optimistic-fade state on the cart line itself — the X collapse + fade
 * animation that runs while the toast is up. Restoring sets `is-restoring`
 * which reverses the animation. */
.cart-line.is-pending-removal,
.cart-drawer-item.is-pending-removal {
    opacity: 0;
    max-height: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom-width: 0 !important;
    overflow: hidden;
    pointer-events: none;
    transition:
        opacity var(--duration-base) var(--ease-product),
        max-height var(--duration-base) var(--ease-product),
        margin var(--duration-base) var(--ease-product),
        padding var(--duration-base) var(--ease-product);
}

@media (prefers-reduced-motion: reduce) {
    .cart-undo-toast,
    .cart-undo-toast.is-leaving,
    .cart-undo-toast__progress-fill,
    .cart-line.is-pending-removal,
    .cart-drawer-item.is-pending-removal {
        transition: none;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
 * Order-summary trust signals rendered inside the checkout summary card.
 * The layout mirrors the product-page trust pattern in a compact 3-column
 * row: icon above, centered label below, balanced for the narrower summary
 * card and kept horizontal across desktop, tablet, and mobile.
 * ─────────────────────────────────────────────────────────────────────── */

/* Current layout: compact 3-column product-style trust row in the summary card. */
.summary-trust-badges {
    list-style: none;
    margin: 20px -4px 20px;
    padding: 24px 0;
    border-top: 1px solid #E8E2D5;
    border-bottom: 1px solid #E8E2D5;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    column-gap: clamp(10px, 2.4vw, 20px);
}

.summary-trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 0;
    min-width: 0;
    text-align: center;
}

.summary-trust-badge__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

.summary-trust-badge__label {
    display: block;
    max-width: 100%;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--color-ink-black);
    opacity: 0.9;
    text-align: center;
    text-wrap: pretty;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

@media (max-width: 600px) {
    .summary-trust-badges {
        margin-inline: -12px;
        padding: 22px 0;
        column-gap: 5px;
    }

    .summary-trust-badge {
        gap: 10px;
    }

    .summary-trust-badge__icon {
        width: 34px;
        height: 34px;
    }

    .summary-trust-badge__label {
        font-size: 13px;
        line-height: 1.26;
    }
}

@media (max-width: 360px) {
    .summary-trust-badges {
        margin-inline: -16px;
        padding: 20px 0;
        column-gap: 4px;
    }

    .summary-trust-badge {
        gap: 9px;
    }

    .summary-trust-badge__icon {
        width: 32px;
        height: 32px;
    }

    .summary-trust-badge__label {
        font-size: 12px;
        line-height: 1.25;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   AMC üdvözlő ajándék (welcome voucher) — header banner, cart/checkout/drawer
   progress bar, account profile card. Visual language mirrors the Klub+
   progress indicators above (gold gradient bar, dark #111315 card); the only
   new accent is the green ✓ (var(--color-stock-green)) on the activated / used
   states. Mobile-first — see the media queries at the end of this block.
   ─────────────────────────────────────────────────────────────────────────── */

/* — Header banner — site-wide strip directly below .amc-header__bar — */
.amc-voucher-banner {
    background: #FFF8E7; /* warm off-white, same family as .klub-shipping-progress.is-qualified's #FFF8E7 stop — no token for it in the design system */
    border-bottom: 1px solid rgba(201, 169, 97, 0.4); /* --color-champagne-gold @ 0.4 — matches the rgba(201,169,97,…) usage in .klub-shipping-progress */
}
.amc-voucher-banner__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 9px 16px;
    min-height: 44px;
    color: var(--color-ink-black);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0;
}
.amc-voucher-banner__mark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: var(--color-deep-gold);
}
.amc-voucher-banner__copy {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
}
.amc-voucher-banner__lead {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-deep-gold);
}
.amc-voucher-banner__detail { color: var(--color-ink-black); }
.amc-voucher-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-deep-gold);
    white-space: nowrap;
}
.amc-voucher-banner__cta-arrow { font-size: 13px; }
.amc-voucher-banner__inner:hover .amc-voucher-banner__cta { text-decoration: underline; }

/* — Cart / checkout / drawer progress bar — sibling of .klub-shipping-progress — */
.welcome-voucher-progress {
    --klub-progress-scale: 0;
    position: relative;
    overflow: hidden;
    margin: 0 0 18px 0;
    padding: 16px 18px;
    background: #FFFDF8;
    border: 1px solid rgba(201, 169, 97, 0.28);
    color: var(--color-ink-black);
}
.welcome-voucher-progress[hidden] { display: none; }
.welcome-voucher-progress--drawer { margin: 0 0 16px 0; padding: 14px 16px; background: rgba(255, 255, 255, 0.74); }
.welcome-voucher-progress--checkout { margin-top: -2px; }
.welcome-voucher-progress__copy { display: flex; flex-direction: column; gap: 4px; }
.welcome-voucher-progress__label {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: 0;
}
.welcome-voucher-progress__label strong {
    font-family: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.welcome-voucher-progress__meta {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--color-smoke-gray);
    letter-spacing: 0;
}
.welcome-voucher-progress__track {
    height: 5px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(26, 26, 27, 0.1);
}
.welcome-voucher-progress__fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9C7A2F 0%, #C9A961 48%, #F0DEAD 100%);
    transform: scaleX(var(--klub-progress-scale));
    transform-origin: left center;
    transition: transform var(--duration-base) var(--ease-product);
}
.welcome-voucher-progress__check {
    display: inline-block;
    margin-right: 6px;
    color: var(--color-stock-green);
    font-weight: 700;
    opacity: 0;
    transform: translateY(2px) scale(0.92);
    animation: klub-check-in var(--duration-base) var(--ease-product) forwards;
}
.welcome-voucher-progress.is-qualified {
    border-color: rgba(201, 169, 97, 0.64);
    background: linear-gradient(180deg, #FFFDF8 0%, #FFF8E7 100%);
}

/* — Account profile card — sibling of .klub-progress-card — */
.welcome-voucher-card {
    --klub-progress-scale: 0;
    position: relative;
    overflow: hidden;
    margin: 24px 0 30px 0;
    padding: 24px;
    background: #111315;
    color: var(--color-pearl-white);
    border: 1px solid rgba(201, 169, 97, 0.24);
}
.welcome-voucher-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(120deg, rgba(201, 169, 97, 0.14), transparent 32%),
        radial-gradient(circle at 85% 12%, rgba(240, 222, 173, 0.1), transparent 28%);
}
.welcome-voucher-card > * { position: relative; z-index: 1; }
.welcome-voucher-card__topline,
.welcome-voucher-card__header,
.welcome-voucher-card__meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}
.welcome-voucher-card__topline { margin-bottom: 18px; }
.welcome-voucher-card__eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    color: rgba(250, 250, 247, 0.62);
}
.welcome-voucher-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 4px 10px;
    border: 1px solid rgba(201, 169, 97, 0.5);
    color: var(--color-champagne-gold);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}
.welcome-voucher-card__badge--done {
    /* "Used" state — same champagne-gold as the active badge (AA-pass on the
       #111315 card; --color-stock-green is too low-contrast on dark and the
       design system has no light-green token), with a slightly more solid
       border to read as "completed" rather than "in progress". */
    border-color: rgba(201, 169, 97, 0.7);
}
.welcome-voucher-card__check { color: var(--color-champagne-gold); font-weight: 700; }
.welcome-voucher-card__title {
    margin: 0 0 8px 0;
    font-family: var(--font-serif);
    font-size: 28px;
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: 0;
}
.welcome-voucher-card__lead {
    max-width: 660px;
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(250, 250, 247, 0.78);
    letter-spacing: 0;
}
.welcome-voucher-card__lead strong,
.welcome-voucher-card__meta strong,
.welcome-voucher-card__days {
    font-family: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.welcome-voucher-card__days {
    margin: 4px 0 0 0;
    color: var(--color-champagne-gold);
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.welcome-voucher-card__days-unit {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(250, 250, 247, 0.62);
}
.welcome-voucher-card__track {
    height: 9px;
    margin: 24px 0 18px 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(250, 250, 247, 0.12);
}
.welcome-voucher-card__fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9C7A2F 0%, #C9A961 42%, #F4E4B8 100%);
    transform: scaleX(var(--klub-progress-scale));
    transform-origin: left center;
    transition: transform var(--duration-slow) var(--ease-product);
}
.welcome-voucher-card__meta {
    align-items: flex-end;
    color: rgba(250, 250, 247, 0.72);
}
.welcome-voucher-card__meta--used { align-items: flex-start; }
.welcome-voucher-card__meta p {
    margin: 0;
    max-width: 620px;
    font-size: 13px;
    line-height: 1.55;
    letter-spacing: 0;
}
.welcome-voucher-card__link {
    color: var(--color-champagne-gold);
    border-bottom: 1px solid rgba(201, 169, 97, 0.5);
    padding-bottom: 2px;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0;
}
.welcome-voucher-card__link:hover { border-bottom-color: var(--color-champagne-gold); }
.welcome-voucher-card--used { padding-bottom: 24px; }

/* — Mobile-first responsive — */
@media (max-width: 640px) {
    .amc-voucher-banner__inner { gap: 6px 8px; padding: 10px 12px; font-size: 12.5px; }
    .amc-voucher-banner__lead { display: none; }
    .amc-voucher-banner__threshold { display: none; }
    .amc-voucher-banner__cta { font-size: 0; }
    .amc-voucher-banner__cta-arrow { font-size: 15px; }
}
@media (max-width: 768px) {
    .welcome-voucher-card {
        margin: 22px 0 28px 0;
        padding: 20px;
    }
    .welcome-voucher-card__topline,
    .welcome-voucher-card__header,
    .welcome-voucher-card__meta {
        flex-direction: column;
        gap: 12px;
    }
    .welcome-voucher-card__title { font-size: 23px; }
    .welcome-voucher-card__days { font-size: 26px; }
    .welcome-voucher-card__meta { align-items: flex-start; }
    .welcome-voucher-card__link { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .welcome-voucher-progress__fill,
    .welcome-voucher-progress__check,
    .welcome-voucher-card__fill {
        animation: none;
        transition: none;
    }
}