/* ==========================================================================
   1. DESIGN SYSTEM TOKENS
   ========================================================================== */
:root {
    /* Typography */
    --font-sans: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Brand Colors */
    --sl-red: #e3271c;
    --sl-red-bright: #e22a20;
    --sl-red-deep: #931c14;
    --sl-red-hover: #c8211a;
    --sl-red-tint-2: #fbeae9;

    /* Neutrals & Surfaces */
    --sl-black: #0c0c0c;
    --sl-pure-black: #000000;
    --sl-surface-dark-card: #161616;
    --sl-grey-400: #a6a6a6;
    --sl-text-primary: #1a1a1a;
    --sl-text-secondary: #4d4d4d;
    --sl-text-muted: #767676;

    /* Backgrounds & Borders */
    --sl-bg-white: #ffffff;
    --sl-bg-light: #f6f6f6;
    --sl-bg-subtle: #f2f2f2;
    --sl-border-light: #e8e8e8;
    --sl-border-subtle: #e6e6e6;
    --sl-border-medium: #d4d4d4;
    --sl-border-dark: rgba(255, 255, 255, 0.14);
    --sl-border-dark-card: #262626;

    /* Status */
    --sl-status-success: #2f9e6b;
    --sl-status-warning: #c98a16;
    --sl-status-danger: var(--sl-red);

    /* Gradients */
    --sl-gradient-red: linear-gradient(150deg, var(--sl-red-bright) 0%, var(--sl-red-deep) 100%);
    --sl-gradient-dark: linear-gradient(160deg, var(--sl-text-primary) 0%, var(--sl-pure-black) 100%);
    --sl-gradient-hero-glow: radial-gradient(ellipse at center, rgba(227, 39, 28, 0.42) 0%, rgba(227, 39, 28, 0) 62%);
    --sl-gradient-photo-scrim: linear-gradient(90deg, rgba(8, 8, 8, 0.9) 0%, rgba(8, 8, 8, 0.72) 46%, rgba(8, 8, 8, 0.3) 100%);

    /* Elevation / Shadows */
    --sl-shadow-card: 0 8px 22px rgba(0, 0, 0, 0.05);
    --sl-shadow-card-featured: 0 10px 26px rgba(0, 0, 0, 0.05);
    --sl-shadow-panel: 0 18px 46px rgba(0, 0, 0, 0.06);
    --sl-shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.10);
    --sl-shadow-glow-red: 0 8px 22px rgba(227, 39, 28, 0.12);

    /* Border Radii */
    --sl-radius-sm: 8px;
    --sl-radius-md: 12px;
    --sl-radius-lg: 16px;
    --sl-radius-xl: 24px;
    --sl-radius-full: 999px;

    /* Layout Constants */
    --sl-container-max: 1180px;
    --sl-header-height: 72px;
    --sl-banner-height: 44px;

    /* Spacing Scale */
    --sl-space-1: 4px;
    --sl-space-2: 8px;
    --sl-space-3: 12px;
    --sl-space-4: 16px;
    --sl-space-5: 24px;
    --sl-space-6: 32px;
    --sl-space-7: 48px;
    --sl-space-8: 64px;
    --sl-space-9: 96px;
    --sl-space-10: 128px;
    --sl-space-11: 160px;

    /* Layout Gaps (responsive) */
    --sl-gutter: clamp(20px, 5vw, 64px);
    /* Header bar has no 1180px cap (it's edge-to-edge), so its edge inset
       must stay fluid even on desktop, unlike --sl-gutter below. */
    --sl-header-gutter: clamp(20px, 5vw, 64px);
    --sl-section-gap-y: clamp(56px, 7vw, 0px);
    --sl-hero-gap-y: clamp(64px, 8vw, 120px);
    --sl-grid-gap: clamp(20px, 2.5vw, 32px);
    --sl-two-col-gap: clamp(28px, 5vw, 72px);
    --sl-card-padding: 15px;

    /* Motion */
    --sl-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --sl-duration-fast: 120ms;
    --sl-duration-base: 200ms;
    --sl-duration-slow: 360ms;

    /* Typography Scale (font-size only; line-height/letter-spacing applied per selector) */
    --sl-fs-hero-h1: clamp(28px, 2.8vw, 44px);
    --sl-fs-section-h2: clamp(24px, 2vw, 34px);
    --sl-fs-card-h3: clamp(19px, 1.6vw, 22px);
    --sl-fs-intro: clamp(16px, 1.5vw, 19px);
    --sl-fs-body: clamp(15.5px, 1.25vw, 17px);
    --sl-fs-card-body: 13px;
    --sl-fs-eyebrow: clamp(11px, 0.85vw, 12px);
    --sl-fs-field-label: clamp(10.5px, 0.8vw, 11.5px);
    --sl-fs-button: clamp(13.5px, 1vw, 14.5px);
    --sl-fs-stat: clamp(32px, 3.6vw, 48px);
    --sl-fs-caption: clamp(12px, 0.9vw, 13px);

    /* Z-Index Scale */
    --sl-z-badge: 2;
    --sl-z-mega-menu: 49;
    --sl-z-banner: 100;
    --sl-z-mobile-nav: 998;
    --sl-z-header: 999;
}

/* On desktop, every max-width:1180px content container (shop hero,
   category/product sections, footer, mega menu, etc.) should fill that
   1180px edge to edge — `--sl-gutter` exists only to keep content off the
   viewport edge on narrower screens where the container hasn't reached its
   cap yet. Zeroing the token here (rather than patching each consumer)
   applies to every current and future use of it site-wide. 1280px is where
   --sl-gutter's own clamp() reaches its 64px ceiling, i.e. where a
   container padded on top of its 1180px cap would first stop filling it. */
@media (min-width: 1280px) {
    :root {
        --sl-gutter: 0px;
    }
}

/* ==========================================================================
   2. UNIVERSAL ELEMENTOR ISOLATION LAYER
   ========================================================================== */

/* Universal Box-Sizing & Typography Isolation */
[class^="sl-"], [class*=" sl-"],
[class^="sl-"] *, [class*=" sl-"] * {
    box-sizing: border-box !important;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* Zero-out Elementor Kit paragraph & block margins */
[class*="elementor-kit-"] [class^="sl-"] p,
body.elementor-page [class^="sl-"] p {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* Isolate links */
[class^="sl-"] a, [class*=" sl-"] a {
    text-decoration: none !important;
    color: inherit;
    transition: color var(--sl-duration-base) var(--sl-ease-standard);
}

/* Brand hover fallback for any link this reaches that doesn't have its own
   more specific :hover rule (e.g. WooCommerce's own dynamically-rendered
   links — the terms-and-conditions link, a gateway's description text,
   an order-notice's "View cart" link) — low specificity, on purpose, so
   any .sl-* component's own :hover rule still wins over this. Without it,
   such a link would just never change on hover (color:inherit above gives
   it a sane default color, but no feedback at all), or fall through to
   WooCommerce's/the browser's own default link hover instead. */
[class^="sl-"] a:hover, [class*=" sl-"] a:hover {
    color: var(--sl-red);
}

[class^="sl-"] a:active, [class*=" sl-"] a:active {
    color: var(--sl-red-deep);
}

/* ==========================================================================
   2B. STICKY FOOTER (site-wide)
   ==========================================================================
   header.php/footer.php output the announcement banner, .sl-header-wrapper,
   each page's own content, and .sl-footer as direct children of <body> — no
   page template needs its own wrapper for this: body becomes a full-height
   flex column and the footer is pushed to the bottom (`margin-top: auto`)
   whenever the rest of the page doesn't already fill the viewport; on a
   tall page it simply sits after the content as normal, since flex only
   applies this gap when there's leftover space to fill. */
html {
    min-height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sl-footer {
    margin-top: auto;
}

/* ==========================================================================
   3. HEADER & NAVIGATION (DESKTOP)
   ========================================================================== */
.sl-header-wrapper {
    position: sticky !important;
    top: 0 !important;
    z-index: var(--sl-z-header) !important;
    width: 100%;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sl-border-light);
}

/* WordPress Admin Bar Sticky Offset */
body.admin-bar .sl-header-wrapper {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    body.admin-bar .sl-header-wrapper {
        top: 46px !important;
    }
}

.sl-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 16px var(--sl-header-gutter);
    margin: 0 auto;
}

.sl-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.sl-logo-img {
    height: 34px !important;
    width: auto !important;
    display: block !important;
}

.sl-desktop-nav {
    display: flex;
    justify-content: center;
    flex: 1;
}

.sl-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 34px;
}

.sl-nav-item {
    position: static;
}

/* Desktop Nav Link (scp0 spec): Anti-jump font weight transition */
.sl-nav-link {
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    color: var(--sl-text-primary) !important;
    padding: 8px 0 !important;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color var(--sl-duration-base) var(--sl-ease-standard);
    border: none !important;
}

/* Invisible pseudo-element to reserve exact width for the bold state */
.sl-nav-link::after {
    content: attr(data-text);
    height: 0;
    visibility: hidden;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Desktop-only Hover Rules (min-width: 1081px) */
@media (min-width: 1081px) {
    .sl-nav-item:hover .sl-nav-link,
    .sl-nav-item.is-active .sl-nav-link {
        color: var(--sl-red) !important;
        font-weight: 500 !important;
    }

    .sl-mega-menu-panel {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        width: 100%;
        background: var(--sl-bg-light);
        border-top: 1px solid var(--sl-border-subtle);
        box-shadow: var(--sl-shadow-panel);
        z-index: var(--sl-z-mega-menu);
    }

    .sl-nav-item:hover .sl-mega-menu-panel,
    .sl-nav-item.is-active .sl-mega-menu-panel {
        display: block;
    }
}

.sl-mega-menu-content {
    max-width: var(--sl-container-max);
    margin: 0 auto;
    padding: 46px var(--sl-gutter) 54px;
}

.sl-mega-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 64px;
}

.sl-mega-column-links {
    display: flex;
    flex-direction: column;
}

.sl-mega-heading {
    font-family: var(--font-sans) !important;
    font-size: var(--sl-fs-card-h3) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    color: var(--sl-text-primary) !important;
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--sl-border-medium);
}

.sl-mega-link {
    display: block;
    font-family: var(--font-sans) !important;
    font-size: var(--sl-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--sl-text-secondary) !important;
    padding: 10px 0 !important;
    text-decoration: none !important;
    transition: color var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-mega-link:hover {
    color: var(--sl-red) !important;
}

/* Header Utilities */
.sl-header-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-shrink: 0;
}

.sl-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sl-text-primary) !important;
    position: relative;
    transition: color var(--sl-duration-base) var(--sl-ease-standard);
    line-height: 1 !important;
}

.sl-action-icon:hover {
    color: var(--sl-red) !important;
}

.sl-cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--sl-red);
    color: #ffffff !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    border-radius: var(--sl-radius-full);
    min-width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.sl-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: var(--sl-text-muted);
    border-right: 1px solid var(--sl-border-medium);
    padding-right: 14px;
    margin-right: -4px;
}

.sl-lang-link {
    color: var(--sl-text-muted) !important;
    text-decoration: none !important;
    transition: color var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-lang-link.is-active,
.sl-lang-link:hover {
    color: var(--sl-text-primary) !important;
}

/* ==========================================================================
   4. BUTTON COMPONENT (scp1 Strict Reset)
   ========================================================================== */
.sl-btn-recommender,
.sl-btn,
a.sl-btn-recommender,
a.sl-btn,
button.sl-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    margin: 0 !important;
    padding: 11px 24px !important;
    background: var(--sl-red) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--sl-radius-sm) !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap !important;
    cursor: pointer;
    transition: background var(--sl-duration-base) var(--sl-ease-standard), transform var(--sl-duration-fast) var(--sl-ease-standard);
}

.sl-btn-recommender:hover,
.sl-btn:hover,
a.sl-btn-recommender:hover,
a.sl-btn:hover,
button.sl-btn:hover,
.sl-btn-recommender:focus,
.sl-btn:focus,
a.sl-btn-recommender:focus,
a.sl-btn:focus,
button.sl-btn:focus {
    background: var(--sl-red-hover) !important;
    color: #ffffff !important;
}

.sl-btn-recommender:active,
.sl-btn:active,
a.sl-btn-recommender:active,
a.sl-btn:active,
button.sl-btn:active {
    background: var(--sl-red-deep) !important;
    color: #ffffff !important;
}

.sl-mobile-only-cta {
    display: none !important;
}

/* ==========================================================================
   5. MOBILE HAMBURGER BUTTON (Ultra-High Specificity Elementor Reset)
   ========================================================================== */
html body.elementor-kit-5 button.sl-mobile-toggle,
html body.elementor-page button.sl-mobile-toggle,
html body [class*="elementor-kit-"] button.sl-mobile-toggle,
html body button.sl-mobile-toggle,
button.sl-mobile-toggle,
.sl-mobile-toggle {
    all: unset !important;
    box-sizing: border-box !important;
    display: none !important; /* Hidden by default on desktop */
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 6px !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: var(--sl-text-primary) !important;
    line-height: 1 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

html body.elementor-kit-5 button.sl-mobile-toggle:hover,
html body.elementor-kit-5 button.sl-mobile-toggle:focus,
html body.elementor-kit-5 button.sl-mobile-toggle:active,
button.sl-mobile-toggle:hover,
button.sl-mobile-toggle:focus,
button.sl-mobile-toggle:active {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--sl-red) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ==========================================================================
   6. FOOTER COMPONENT
   ========================================================================== */
.sl-footer {
    background: var(--sl-black) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: clamp(48px, 5vw, 72px) var(--sl-gutter) 40px !important;
    width: 100% !important;
    display: block !important;
}

.sl-footer .sl-footer-inner {
    max-width: var(--sl-container-max) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1.6fr 1fr 1fr 1fr !important;
    gap: 40px !important;
    align-items: flex-start !important;
}

.sl-footer .sl-footer-brand-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.sl-footer .sl-footer-logo-img {
    height: 40px !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.sl-footer .sl-footer-brand-p {
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
    max-width: 280px !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

.sl-footer .sl-footer-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.sl-footer .sl-footer-heading {
    color: #ffffff !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

.sl-footer .sl-footer-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sl-footer .sl-footer-links a {
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: color var(--sl-duration-base) var(--sl-ease-standard) !important;
}

.sl-footer .sl-footer-links a:hover {
    color: var(--sl-red) !important;
}

.sl-footer .sl-footer-bottom {
    max-width: var(--sl-container-max) !important;
    margin: 44px auto 0 !important;
    padding: 24px 0 0 0 !important;
    border-top: 1px solid var(--sl-border-dark) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

.sl-footer .sl-footer-legal-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    flex-wrap: wrap !important;
}

.sl-footer .sl-footer-legal-menu li {
    margin: 0 !important;
    padding: 0 !important;
}

.sl-footer .sl-footer-legal-menu a {
    color: rgba(255, 255, 255, 0.45) !important;
    text-decoration: none !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    transition: color var(--sl-duration-base) var(--sl-ease-standard) !important;
}

.sl-footer .sl-footer-legal-menu a:hover {
    color: var(--sl-red) !important;
}

/* ==========================================================================
   7. RESPONSIVE BREAKPOINTS & MOBILE NAVIGATION (Click-Only)
   ========================================================================== */
@media (max-width: 1080px) {
    /* 1. Hide Header CTA button unconditionally on mobile */
    .sl-header-actions .sl-btn-recommender,
    .sl-header-actions a.sl-btn-recommender,
    .sl-desktop-only-btn,
    a.sl-desktop-only-btn {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* 2. Show Hamburger Button */
    html body.elementor-kit-5 button.sl-mobile-toggle,
    html body.elementor-page button.sl-mobile-toggle,
    html body button.sl-mobile-toggle,
    button.sl-mobile-toggle,
    .sl-mobile-toggle {
        display: inline-flex !important;
    }

    .sl-header-actions {
        gap: 16px;
    }

    /* 3. Hidden by default */
    .sl-desktop-nav {
        display: none !important;
    }

    /* 4. Top-Aligned Mobile Navigation Sheet */
    body.sl-mobile-nav-open .sl-desktop-nav {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; /* Locks content to the top */
        align-items: stretch !important;
        position: fixed !important;
        top: var(--sl-header-height) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100vh - var(--sl-header-height)) !important;
        background: var(--sl-bg-white) !important;
        padding: 24px 20px 48px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        z-index: var(--sl-z-mobile-nav) !important;
    }

    /* Admin bar offsets on mobile */
    body.admin-bar.sl-mobile-nav-open .sl-desktop-nav {
        top: calc(var(--sl-header-height) + 32px) !important;
        height: calc(100vh - var(--sl-header-height) - 32px) !important;
    }
    @media screen and (max-width: 782px) {
        body.admin-bar.sl-mobile-nav-open .sl-desktop-nav {
            top: calc(var(--sl-header-height) + 46px) !important;
            height: calc(100vh - var(--sl-header-height) - 46px) !important;
        }
    }

    body.sl-mobile-nav-open .sl-nav-menu {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.sl-mobile-nav-open .sl-nav-item {
        width: 100% !important;
        border-bottom: 1px solid var(--sl-border-light) !important;
    }

    /* Mobile Category Header Link (Clickable Trigger) */
    body.sl-mobile-nav-open .sl-nav-link {
        width: 100% !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        padding: 16px 0 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        color: var(--sl-text-primary) !important;
        cursor: pointer !important;
    }

    /* Disable anti-jump trick on mobile to avoid layout issues */
    body.sl-mobile-nav-open .sl-nav-link::after {
        display: none !important;
    }

    /* Chevron indicator for items with sub-menus */
    body.sl-mobile-nav-open .sl-nav-item.has-mega .sl-nav-link::before {
        content: '' !important;
        display: inline-block !important;
        visibility: visible !important;
        height: 8px !important;
        width: 8px !important;
        border-right: 2px solid var(--sl-text-primary) !important;
        border-bottom: 2px solid var(--sl-text-primary) !important;
        transform: rotate(45deg) !important;
        transition: transform var(--sl-duration-base) var(--sl-ease-standard), border-color var(--sl-duration-base) var(--sl-ease-standard) !important;
        margin-right: 4px !important;
        order: 2; /* Move to the right side of the flex container */
    }

    /* Rotated Chevron when open */
    body.sl-mobile-nav-open .sl-nav-item.has-mega.is-active .sl-nav-link::before {
        transform: rotate(-135deg) !important;
        border-color: var(--sl-red) !important;
    }

    /* 5. Click-Only Accordion Dropdown */
    .sl-mega-menu-panel {
        display: none !important;
    }

    body.sl-mobile-nav-open .sl-nav-item.is-active > .sl-mega-menu-panel {
        display: block !important;
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        border-left: 2px solid var(--sl-red) !important;
        margin: 0 0 16px 8px !important;
        padding: 0 0 0 16px !important;
        background: transparent !important;
    }

    body.sl-mobile-nav-open .sl-mega-menu-content {
        padding: 0 !important;
    }

    body.sl-mobile-nav-open .sl-mega-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    body.sl-mobile-nav-open .sl-mega-heading {
        font-size: 15px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        color: var(--sl-text-primary) !important;
        border: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 4px !important;
    }

    body.sl-mobile-nav-open .sl-mega-link {
        font-size: 15.5px !important;
        padding: 7px 0 !important;
        color: var(--sl-text-secondary) !important;
    }

    /* 6. Single CTA Button rendered at bottom of mobile sheet */
    body.sl-mobile-nav-open .sl-mobile-only-cta {
        display: block !important;
        width: 100% !important;
        margin-top: 28px !important;
    }

    body.sl-mobile-nav-open .sl-mobile-only-cta a.sl-btn-mobile-recommender {
        display: inline-flex !important;
        visibility: visible !important;
        width: 100% !important;
        padding: 14px !important;
        font-size: 15px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

@media (max-width: 768px) {
    .sl-footer .sl-footer-inner {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

/* ==========================================================================
   ANNOUNCEMENT TOP BANNER (Design System Specification)
   ========================================================================== */
.sl-top-banner {
    background: var(--sl-red) !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 11px 20px !important;
    font-family: var(--font-sans) !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.02em !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
    z-index: var(--sl-z-banner) !important;
}

.sl-top-banner a,
.sl-top-banner-link {
    color: #ffffff !important;
    text-decoration: none !important;
    display: block !important;
    transition: opacity var(--sl-duration-base) var(--sl-ease-standard) !important;
}

.sl-top-banner a:hover,
.sl-top-banner-link:hover {
    opacity: 0.9 !important;
    color: #ffffff !important;
}

.sl-top-banner strong,
.sl-top-banner b {
    font-weight: 700 !important;
}

/* ==========================================================================
   SAFE LASER WOOCOMMERCE SHOP STYLES
   ========================================================================== */
.sl-shop-page {
    font-family: var(--font-sans);
    color: var(--sl-text-primary);
    background: var(--sl-bg-white);
    overflow-x: hidden;
    box-sizing: border-box;
}

.sl-shop-page * {
    box-sizing: border-box;
}

/* 1. Header & Hero Area */
.sl-shop-hero {
    max-width: var(--sl-container-max);
    margin: 0 auto;
    padding: clamp(36px, 4vw, 56px) var(--sl-gutter) 0;
}

.sl-breadcrumbs {
    font-size: var(--sl-fs-caption);
    color: var(--sl-text-muted);
    letter-spacing: 0.02em;
    margin-bottom: 18px;
}

.sl-breadcrumbs a {
    color: var(--sl-text-muted);
    text-decoration: none;
    transition: color var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-breadcrumbs a:hover {
    color: var(--sl-red);
}

.sl-bc-current {
    color: var(--sl-text-primary);
}

.sl-shop-title {
    margin: 0;
    font-size: var(--sl-fs-hero-h1);
    line-height: 1.04;
    letter-spacing: -0.022em;
    text-transform: uppercase;
}

.sl-title-heavy {
    font-weight: 800;
}

.sl-title-light {
    font-weight: 400;
}

.sl-shop-desc {
    margin: 16px 0 0 !important;
    max-width: 560px;
    font-size: var(--sl-fs-intro);
    line-height: 1.6;
    letter-spacing: -0.011em;
    color: var(--sl-text-secondary);
}

/* 2. Category Tab Filter Bar (Horizontal Scrollable on Mobile) */
.sl-tab-scroll-wrap {
    width: 100%;
    margin: 32px 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.sl-tab-scroll-wrap::-webkit-scrollbar {
    display: none;
}

.sl-category-tabs {
    display: flex;
    gap: 10px;
    white-space: nowrap;
}

/* Strict reset: WooCommerce applies its own default button/hover/focus
   styling to bare <button> elements, which otherwise bleeds through here. */
.sl-tab-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--sl-radius-full) !important;
    padding: 11px 22px !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: var(--sl-fs-button) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background var(--sl-duration-base) var(--sl-ease-standard), border-color var(--sl-duration-base) var(--sl-ease-standard), color var(--sl-duration-base) var(--sl-ease-standard) !important;
    border: 1.5px solid var(--sl-border-medium) !important;
    background: var(--sl-bg-white) !important;
    color: var(--sl-text-secondary) !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    flex-shrink: 0;
    line-height: 1 !important;
}

.sl-tab-btn:hover {
    border-color: var(--sl-grey-400) !important;
    background: var(--sl-bg-white) !important;
    color: var(--sl-text-primary) !important;
}

.sl-tab-btn:active {
    border-color: var(--sl-red) !important;
    background: var(--sl-red-tint-2) !important;
    color: var(--sl-red) !important;
}

/* background/color pinned here too, not just outline/box-shadow: without
   them, plain keyboard :focus (not :hover) fell through to Hello
   Elementor's reset.css "button:focus{background-color:#c36;color:#fff}"
   default — same specificity-tie issue as the buttons above, just for the
   focus state specifically since this rule never restated those two
   properties before. */
.sl-tab-btn:focus,
.sl-tab-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background: var(--sl-bg-white) !important;
    color: var(--sl-text-primary) !important;
    border-color: var(--sl-grey-400) !important;
}

.sl-tab-btn.is-active,
.sl-tab-btn.is-active:hover {
    border-color: var(--sl-red) !important;
    background: var(--sl-red) !important;
    color: var(--sl-bg-white) !important;
}

/* 3. Section Heading with Skewed 3-Stripe SVG */
.sl-shop-section {
    max-width: var(--sl-container-max);
    margin: 0 auto;
    padding: var(--sl-section-gap-y) var(--sl-gutter) 0;
}

.sl-section-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    font-size: var(--sl-fs-section-h2);
}

.sl-section-stripes {
    color: var(--sl-red);
    flex: none;
    height: 0.8em;
    width: auto;
    aspect-ratio: 26 / 22;
}

.sl-section-title {
    margin: 0;
    font-size: var(--sl-fs-section-h2);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-transform: uppercase;
}

/* 4. Grid System (4 Columns) */
.sl-shop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sl-grid-gap);
}

/* Grid items default to min-width:auto, which lets an unbreakable child
   (e.g. a long price string) force its column wider than its 1fr share —
   blowing out the whole grid and making other columns uneven. */
.sl-shop-grid > * {
    min-width: 0;
}

/* 5. Product Card */
.sl-card {
    background: var(--sl-bg-white);
    border-radius: var(--sl-radius-lg);
    box-shadow: var(--sl-shadow-card);
    padding: var(--sl-card-padding);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-card:hover {
    box-shadow: var(--sl-shadow-hover);
}

/* Full-card click target; the add-to-cart button sits above it via z-index */
.sl-card-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Featured Badge */
.sl-badge-popular {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: var(--sl-z-badge);
    background: var(--sl-red);
    color: var(--sl-bg-white);
    border-radius: var(--sl-radius-full);
    padding: 5px 12px;
    font-size: var(--sl-fs-field-label);
    font-weight: 600;
    letter-spacing: -0.014em;
    text-transform: uppercase;
    line-height: 1.6em;
    pointer-events: none;
}

/* Variation Attribute Badge (category pages: one card per variation) */
.sl-badge-attribute {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: var(--sl-z-badge);
    background: var(--sl-text-primary);
    color: var(--sl-bg-white);
    border-radius: var(--sl-radius-full);
    padding: 5px 12px;
    font-size: var(--sl-fs-field-label);
    font-weight: 600;
    letter-spacing: -0.014em;
    text-transform: uppercase;
    line-height: 1.6em;
    pointer-events: none;
    max-width: calc(100% - 28px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Media Box */
.sl-card-media {
    height: 215px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--sl-radius-md);
    background: var(--sl-black);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sl-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Titles, Description & Prices */
.sl-card-title {
    margin: 16px 4px 0;
    font-size: var(--sl-fs-card-h3);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    max-height: calc(var(--sl-fs-card-h3) * 1.3 * 2);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.sl-card-desc {
    margin: 6px 4px 0;
    font-size: var(--sl-fs-card-body);
    color: var(--sl-text-secondary);
    line-height: 1.4;
    letter-spacing: -0.011em;
    flex: 1;
    /* -webkit-line-clamp truncates by line count, not by box height, so on a
       flex:1 box (which stretches to fill leftover card space) it can leave
       visible empty room below the "…" or let a partial 4th line peek
       through. Pinning max-height to exactly 3 line-heights makes the two
       agree regardless of how much the card stretches it. */
    max-height: calc(var(--sl-fs-card-body) * 1.4 * 3);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.sl-card-price {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 14px 4px 0;
    margin-top: auto;
    padding-top: 14px;
}

.sl-card-price span,
.sl-card-price .woocommerce-Price-amount {
    font-size: 16px;
    font-weight: 500;
    color: var(--sl-text-primary);
    overflow-wrap: anywhere;
}

/* Action Buttons */
.sl-card-actions {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 8px;
    margin: 14px 4px 4px;
}

/* WooCommerce injects a "View cart" link after a successful ajax add;
   suppress it to keep the card's two-button layout intact. */
.sl-card-actions .added_to_cart {
    display: none !important;
}

.sl-card-actions .sl-btn {
    flex: 1;
    min-width: 0;
    text-align: center;
    color: #ffffff !important;
    border-radius: var(--sl-radius-sm);
    padding: 10px 4px;
    font-weight: 600;
    font-size: 12.5px;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--sl-duration-base) var(--sl-ease-standard);
    cursor: pointer;
}

/* Elsődleges (primary)
   Compound .sl-btn.sl-btn-more (+ !important) is required to outrank the
   generic a.sl-btn / a.sl-btn:hover rule in the BUTTON COMPONENT section
   above, which otherwise wins on specificity and forces every .sl-btn to
   brand red regardless of these variant rules. */
.sl-btn.sl-btn-more {
    background: var(--sl-red) !important;
}

.sl-btn.sl-btn-more:hover {
    background: var(--sl-red-hover) !important;
}

.sl-btn.sl-btn-more:active {
    background: var(--sl-red-deep) !important;
}

/* Deep red */
.sl-btn.sl-btn-cart {
    background: var(--sl-red-deep) !important;
}

.sl-btn.sl-btn-cart:hover {
    background: var(--sl-red-hover) !important;
}

/* 6. Dark Teaser Card */
.sl-card-teaser {
    background: var(--sl-black);
    color: #ffffff;
    border-radius: var(--sl-radius-lg);
    box-shadow: var(--sl-shadow-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-card-teaser:hover {
    box-shadow: var(--sl-shadow-hover);
}

.sl-teaser-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

.sl-teaser-desc {
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

.sl-teaser-link {
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sl-red);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: gap var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-teaser-link svg {
    width: 15px;
    height: 15px;
}

.sl-teaser-link:hover {
    gap: 12px;
    color: var(--sl-red);
}

.sl-shop-bottom-spacer {
    height: clamp(48px, 6vw, 80px);
}

/* 7. Responsive Breakpoints */
@media (max-width: 1024px) {
    .sl-shop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .sl-shop-grid {
        grid-template-columns: 1fr;
    }
    .sl-card-teaser {
        min-height: 220px;
    }
}

/* ==========================================================================
   SAFE LASER PRODUCT DETAIL PAGE (devices category)
   ========================================================================== */
.sl-pd-page {
    padding-top: clamp(20px, 3vw, 32px);
}

.sl-pd-breadcrumbs {
    max-width: var(--sl-container-max);
    margin: 0 auto;
    padding: 0 var(--sl-gutter);
}

.sl-pd-section-inner {
    max-width: var(--sl-container-max);
    margin: 0 auto;
    padding: 0 var(--sl-gutter);
}

.sl-pd-section {
    padding: clamp(48px, 6vw, 80px) 0;
}

.sl-pd-section.is-muted {
    background: var(--sl-bg-light);
}

.sl-pd-h2 {
    margin: 0 0 32px;
    font-size: var(--sl-fs-section-h2);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    line-height: 1.15;
}

.sl-pd-h2-heavy {
    font-weight: 800;
}

.sl-pd-h2-light {
    font-weight: 400;
}

.sl-pd-h2-center {
    text-align: center;
}

.sl-pd-h2-single {
    font-weight: 500;
    text-transform: none;
    font-size: var(--sl-fs-section-h2);
}

.sl-pd-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--sl-red);
    text-transform: uppercase;
}

/* --- Hero: gallery + buy panel --- */
.sl-pd-hero {
    max-width: var(--sl-container-max);
    margin: 0 auto;
    padding: 28px var(--sl-gutter) clamp(48px, 6vw, 72px);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}

.sl-pd-gallery-main {
    background: var(--sl-gradient-dark);
    border-radius: 20px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8%;
    overflow: hidden;
}

.sl-pd-gallery-main img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sl-pd-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 14px;
}

.sl-pd-thumb {
    all: unset;
    box-sizing: border-box;
    background: var(--sl-gradient-dark);
    border-radius: 12px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid transparent;
    outline: 1px solid var(--sl-border-light);
    transition: border-color var(--sl-duration-base) var(--sl-ease-standard);
}

/* background (not just border/outline) kept explicit and !important on
   hover: Hello Elementor's own reset.css sets a generic
   "button:hover{background-color:#c36}" that ties in specificity with a
   plain ".sl-pd-thumb:hover" class rule once this element has
   type="button" (as it does) — without pinning the background here too,
   that tie (decided only by stylesheet load order) could flash this
   thumbnail's dark tile pink on hover. --sl-gradient-dark is a gradient,
   so this has to override via "background", not "background-color". */
.sl-pd-thumb:hover,
.sl-pd-thumb:focus {
    background: var(--sl-gradient-dark) !important;
    outline-color: var(--sl-grey-400);
}

.sl-pd-thumb.is-active {
    border-color: var(--sl-red);
    outline: none;
}

.sl-pd-thumb.is-active:hover,
.sl-pd-thumb.is-active:focus {
    background: var(--sl-gradient-dark) !important;
    border-color: var(--sl-red-deep);
}

.sl-pd-thumb img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.sl-pd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sl-pd-tag {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-red);
}

.sl-pd-tag:not(:last-child)::after {
    content: '·';
    margin-left: 8px;
    color: var(--sl-border-medium);
}

.sl-pd-title {
    margin: 10px 0 0;
    font-size: var(--sl-fs-hero-h1);
    line-height: 1.05;
    letter-spacing: -0.01em;
    font-weight: 800;
}

.sl-pd-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
}

.sl-pd-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--sl-border-medium);
    border-radius: var(--sl-radius-full);
    padding: 6px 14px;
    font-size: 12.5px;
    color: var(--sl-text-secondary);
}

.sl-pd-desc {
    margin: 18px 0 0;
    font-size: var(--sl-fs-body);
    line-height: 1.6;
    color: var(--sl-text-secondary);
    max-width: 480px;
}

.sl-pd-price {
    margin-top: 22px;
}

.sl-pd-price .price,
.sl-pd-cart-form .price {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--sl-text-primary);
}

.sl-pd-cart-form {
    margin-top: var(--sl-space-5);
}

/* Restyle native WooCommerce add-to-cart markup to match the brand */
.sl-pd-cart-form form.cart {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Hidden unconditionally (not just after JS runs) so the native select
   never flashes on screen before the pill-enhancement script builds its
   replacement — this page relies on JS for the pill UI anyway. */
.sl-pd-cart-form table.variations {
    display: none !important;
}

.sl-pd-cart-form table.variations td {
    display: block;
    padding: 0;
}

/* The real <select> stays in the DOM (table.variations, hidden above) so
   wc-add-to-cart-variation.js still has something to drive — this styling
   only matters if that stylesheet rule is ever removed. Reset with
   !important since WooCommerce styles this element directly. */
.sl-pd-cart-form table.variations select {
    width: 100% !important;
    height: 48px !important;
    padding: 0 14px !important;
    border: 1.5px solid var(--sl-border-medium) !important;
    border-radius: 8px !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    background: var(--sl-bg-white) !important;
    box-shadow: none !important;
    margin-bottom: 10px !important;
}

.sl-pd-cart-form table.variations select:focus {
    outline: none !important;
    border-color: var(--sl-red) !important;
    box-shadow: none !important;
}

.sl-pd-cart-form .reset_variations {
    font-size: 12.5px;
    color: var(--sl-text-muted);
}

.sl-pd-cart-form .single_variation_wrap,
.sl-pd-cart-form .sl-pd-variation-pills {
    width: 100%;
}

/* Pill variation selector (JS-enhanced from the native <select> elements) */
.sl-pd-variation-pills {
    margin-bottom: 10px;
}

.sl-pd-pill-group + .sl-pd-pill-group {
    margin-top: 16px;
}

.sl-pd-pill-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sl-text-muted);
    margin-bottom: 12px;
}

.sl-pd-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sl-pd-pill {
    all: unset !important;
    box-sizing: border-box !important;
    border-radius: var(--sl-radius-full) !important;
    padding: 10px 20px !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all var(--sl-duration-base) var(--sl-ease-standard) !important;
    border: 1.5px solid var(--sl-border-medium) !important;
    background: var(--sl-bg-white) !important;
    color: var(--sl-text-primary) !important;
    outline: none !important;
    box-shadow: none !important;
}

.sl-pd-pill:hover,
.sl-pd-pill:focus {
    border-color: var(--sl-red) !important;
    color: var(--sl-red-deep) !important;
    outline: none !important;
}

.sl-pd-pill.is-active {
    border-color: var(--sl-red) !important;
    background: var(--sl-red-tint-2) !important;
    color: var(--sl-red-deep) !important;
}

.sl-pd-pill.is-active:hover {
    background: var(--sl-red-tint-2) !important;
}

/* Quantity stepper — shared by the product page and the cart page (same
   `.quantity`/`.qty` markup WooCommerce itself emits in both places, so one
   definition styles both consistently). One outer border for the whole
   group, none on the input itself, so there is never a
   border-inside-a-border. WooCommerce's own stylesheet styles
   `.quantity`/`.qty`/the add-to-cart button directly, so every state
   (default, hover, focus, disabled) is reset with `!important` here — the
   same strict-reset pattern used for `.sl-tab-btn` above, since without it
   WC's own look/states bleed through. */
.quantity {
    display: flex !important;
    align-items: center !important;
    border: 1.5px solid var(--sl-border-medium) !important;
    border-radius: 8px !important;
    overflow: hidden;
    flex: none;
}

.sl-pd-qty-btn {
    all: unset;
    box-sizing: border-box;
    width: 46px;
    height: 52px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sl-bg-white);
    font-size: 22px;
    color: var(--sl-text-primary);
    cursor: pointer;
    transition: background var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-pd-qty-btn:hover,
.sl-pd-qty-btn:focus {
    background: var(--sl-bg-light);
    color: var(--sl-text-primary);
    outline: none;
}

.qty {
    width: 56px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--sl-bg-white) !important;
    box-shadow: none !important;
    font-family: var(--font-sans) !important;
    font-size: 16px !important;
    /* Remove the native number-input up/down arrows. */
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.qty:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.qty::-webkit-inner-spin-button,
.qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.sl-pd-cart-form .single_add_to_cart_button {
    height: 52px !important;
    flex: 1;
    min-width: 200px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--sl-space-2) !important;
    background: var(--sl-red) !important;
    color: var(--sl-bg-white) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0 32px !important;
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.02em !important;
    box-shadow: none !important;
    text-transform: none !important;
    cursor: pointer;
    transition: background var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-pd-cart-form .single_add_to_cart_button svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.sl-pd-cart-form .single_add_to_cart_button:hover,
.sl-pd-cart-form .single_add_to_cart_button:focus {
    background: var(--sl-red-hover) !important;
    outline: none !important;
}

.sl-pd-cart-form .single_add_to_cart_button:disabled,
.sl-pd-cart-form .single_add_to_cart_button.disabled {
    background: var(--sl-border-medium) !important;
    color: var(--sl-bg-white) !important;
    cursor: not-allowed;
}

.sl-pd-cart-form .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    /* Sits right below the variation's own price (rendered just above,
       inside the sibling .woocommerce-variation block), above the qty
       selector + add-to-cart button rendered inside this element. */
    margin-top: var(--sl-space-5);
}

.sl-pd-trust {
    margin-top: 20px;
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: var(--sl-text-secondary);
}

.sl-pd-trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.sl-pd-trust svg {
    width: 17px;
    height: 17px;
    color: var(--sl-red);
}

/* --- Spec table --- */
/* Multi-column flow (not CSS grid) so rows fill the first column top to
   bottom before continuing into the second — grid's default row-major
   order would interleave them left/right/left/right instead. */
.sl-pd-spec-grid {
    column-count: 2;
    column-gap: clamp(32px, 5vw, 72px);
    max-width: 900px;
}

.sl-pd-spec-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--sl-border-medium);
    font-size: 15px;
    break-inside: avoid;
}

.sl-pd-spec-row span:first-child {
    color: var(--sl-text-muted);
}

.sl-pd-spec-row span:last-child {
    font-weight: 600;
    text-align: right;
}

/* --- Package contents --- */
.sl-pd-contents-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.sl-pd-contents-item {
    border: 1px solid var(--sl-border-light);
    border-radius: 16px;
    padding: 26px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.sl-pd-contents-item svg {
    width: 30px;
    height: 30px;
    color: var(--sl-red);
}

.sl-pd-contents-item span {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

/* --- Stats bar --- */
.sl-pd-stats {
    background: var(--sl-red);
    color: var(--sl-bg-white);
    padding: clamp(44px, 5vw, 72px) var(--sl-gutter);
}

.sl-pd-stats-grid {
    max-width: var(--sl-container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    text-align: center;
}

.sl-pd-stat strong {
    display: block;
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 700;
    line-height: 1;
}

.sl-pd-stat span {
    display: block;
    margin-top: 8px;
    font-size: clamp(14px, 1.3vw, 18px);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* --- Benefits widget --- */
.sl-pd-benefits {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    align-items: stretch;
    background: var(--sl-bg-light);
}

.sl-pd-benefits-media {
    min-height: 480px;
    min-width: 0;
    position: relative;
    overflow: hidden;
}

.sl-pd-benefits-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sl-pd-benefits-body {
    padding: clamp(44px, 5.5vw, 88px) clamp(28px, 5vw, 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.sl-pd-benefits-body p {
    margin: 20px 0 28px;
    max-width: 460px;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--sl-text-secondary);
    letter-spacing: -0.011em;
}

.sl-pd-benefits-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 520px;
}

.sl-pd-benefits-list li {
    position: relative;
    padding-left: 38px;
    font-size: clamp(14.5px, 1.15vw, 17px);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.3;
    text-transform: uppercase;
}

.sl-pd-benefits-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) skewX(-16deg);
    width: 16px;
    height: 20px;
    background: var(--sl-red);
    border-radius: 2px;
}

/* --- Use cases --- */
.sl-pd-usecases {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.sl-pd-usecases-body p {
    margin: 22px 0 8px;
    max-width: 460px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--sl-text-secondary);
}

.sl-pd-usecase-item {
    border-bottom: 1px solid var(--sl-border-medium);
}

.sl-pd-usecase-toggle {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 22px 0;
    cursor: pointer;
    font-size: clamp(16px, 1.6vw, 22px);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.sl-pd-usecase-toggle .sl-section-stripes {
    color: var(--sl-red);
    transition: transform var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-pd-usecase-item.is-open .sl-pd-usecase-toggle .sl-section-stripes {
    transform: translateX(-10px);
}

.sl-pd-usecase-body {
    display: none;
    margin: 0 0 20px;
    max-width: 460px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--sl-text-secondary);
}

.sl-pd-usecase-item.is-open .sl-pd-usecase-body {
    display: block;
    animation: sl-pd-rolldown 0.28s ease;
}

.sl-pd-usecases-media img {
    width: 100%;
    border-radius: 20px;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 5;
}

@keyframes sl-pd-rolldown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- How-to-use steps --- */
.sl-pd-steps-intro {
    max-width: 680px;
    margin-bottom: 48px;
}

.sl-pd-steps-intro p {
    margin: 18px 0 0;
    font-size: 17px;
    line-height: 1.65;
    color: var(--sl-text-secondary);
}

.sl-pd-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.sl-pd-step-media {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    overflow: hidden;
    background: var(--sl-bg-light);
}

.sl-pd-step-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sl-pd-step-num {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--sl-red);
    color: var(--sl-bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
}

.sl-pd-step h3 {
    margin: 18px 0 0;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.sl-pd-step p {
    margin: 8px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--sl-text-muted);
}

/* --- Treatment frequency table --- */
.sl-pd-freq-card {
    background: var(--sl-bg-light);
    border-radius: 24px;
    padding: clamp(30px, 4vw, 52px);
}

.sl-pd-freq-card p {
    margin: 12px 0 0;
    max-width: 620px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sl-text-muted);
}

.sl-pd-freq-table {
    margin-top: 28px;
    border-top: 1px solid var(--sl-border-medium);
}

.sl-pd-freq-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--sl-border-light);
    font-size: 15px;
    align-items: center;
}

.sl-pd-freq-head {
    padding: 16px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sl-text-muted);
    border-bottom: 1px solid var(--sl-border-medium);
}

.sl-pd-freq-row span:first-child {
    font-weight: 600;
}

.sl-pd-freq-row span:not(:first-child) {
    color: var(--sl-text-secondary);
}

.sl-pd-freq-row span.sl-pd-freq-device {
    color: var(--sl-red) !important;
    font-weight: 700;
}

/* --- Case studies --- */
.sl-pd-cases-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.sl-pd-cases-head h2 {
    margin: 0;
}

.sl-pd-cases-head a {
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-red);
}

.sl-pd-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.sl-pd-case-card {
    display: block;
    border: 1px solid var(--sl-border-light);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--sl-shadow-card);
    transition: box-shadow var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-pd-case-card:hover {
    box-shadow: var(--sl-shadow-hover);
}

.sl-pd-case-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.sl-pd-case-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sl-pd-case-body {
    padding: 24px;
}

.sl-pd-case-cat {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-red);
}

.sl-pd-case-body h3 {
    margin: 8px 0 10px;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.2;
}

.sl-pd-case-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--sl-text-muted);
}

/* --- Comparison table --- */
.sl-pd-compare {
    padding: clamp(48px, 6vw, 80px) 0;
    background: var(--sl-black);
    color: var(--sl-bg-white);
}

.sl-pd-compare-table {
    display: grid;
    font-size: 14px;
    overflow-x: auto;
}

.sl-pd-compare-cell {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    color: var(--sl-bg-white);
}

.sl-pd-compare-label {
    text-align: left;
    color: rgba(255, 255, 255, 0.7);
}

/* Header row: its own padding/border-opacity, distinct from the data rows */
.sl-pd-compare-corner,
.sl-pd-compare-head {
    padding: 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.sl-pd-compare-head {
    font-weight: 700;
    text-decoration: none;
}

.sl-pd-compare-head.is-current {
    background: var(--sl-red) !important;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
    font-weight: 800;
}

.sl-pd-compare-cell.is-current {
    background: rgba(227, 39, 28, 0.16);
    border-bottom: none;
    font-weight: 600;
}

/* Last row (price): no bottom border on any column, and the highlighted
   column's card silhouette closes off with rounded bottom corners. */
.sl-pd-compare-cell.sl-pd-compare-price {
    border-bottom: none;
}

.sl-pd-compare-cell.sl-pd-compare-price.is-current {
    background: var(--sl-red) !important;
    border-radius: 0 0 12px 12px;
}

/* --- Reviews (native WooCommerce comments, lightly restyled) --- */
.sl-pd-reviews {
    max-width: 820px;
}

.sl-pd-reviews #reviews {
    font-family: var(--font-sans);
}

.sl-pd-reviews .comment-form input,
.sl-pd-reviews .comment-form textarea {
    font-family: var(--font-sans);
    border: 1.5px solid var(--sl-border-medium);
    border-radius: 8px;
    padding: 10px 14px;
}

.sl-pd-reviews #submit,
.sl-pd-reviews .form-submit input[type="submit"] {
    background: var(--sl-red) !important;
    color: var(--sl-bg-white) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-weight: 700 !important;
    cursor: pointer;
}

/* --- FAQ --- */
.sl-pd-faq-wrap {
    max-width: 820px;
}

.sl-pd-faq-item {
    padding: 24px 0;
    border-bottom: 1px solid #e4e4e4;
}

.sl-pd-faq-item:hover {
    background: rgba(0, 0, 0, 0.012);
}

/* WooCommerce styles bare <button> elements broadly (not just inside
   form.cart), so — same as .sl-pd-pill — every state is reset with
   !important, not just the default look. */
.sl-pd-faq-toggle {
    all: unset !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-size: clamp(16px, 1.5vw, 19px) !important;
    font-weight: 600 !important;
    color: var(--sl-text-primary) !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.sl-pd-faq-toggle:hover,
.sl-pd-faq-toggle:focus,
.sl-pd-faq-toggle:active {
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--sl-text-primary) !important;
}

/* Fixed size, not the em-scaled sizing `.sl-section-stripes` uses next to
   a heading (see .sl-section-heading) — this icon sits next to body-sized
   text, where that scale would render far too small. */
.sl-pd-faq-toggle .sl-section-stripes {
    color: var(--sl-red);
    flex: none;
    height: 22px !important;
    width: auto !important;
    aspect-ratio: 26 / 22;
    transition: transform var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-pd-faq-item.is-open .sl-pd-faq-toggle .sl-section-stripes {
    color: var(--sl-red-deep);
    transform: translateX(-10px);
}

.sl-pd-faq-body {
    display: none;
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sl-text-secondary);
    max-width: 680px;
}

.sl-pd-faq-item.is-open .sl-pd-faq-body {
    display: block;
    animation: sl-pd-rolldown 0.28s ease;
}

/* --- Termékajánló CTA banner --- */
.sl-pd-recommend {
    background: var(--sl-red);
    color: var(--sl-bg-white);
    padding: clamp(48px, 6vw, 80px) var(--sl-gutter);
}

.sl-pd-recommend-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.sl-pd-recommend-inner > div:first-child {
    max-width: 620px;
}

.sl-pd-recommend-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--sl-bg-white);
    color: var(--sl-red) !important;
    border-radius: 8px;
    padding: 16px 34px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: background var(--sl-duration-base) var(--sl-ease-standard), color var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-pd-recommend-cta:hover {
    background: var(--sl-black);
    color: var(--sl-bg-white) !important;
}

/* --- Related devices --- */
.sl-pd-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sl-pd-related-card {
    display: block;
    background: var(--sl-bg-white);
    border-radius: 16px;
    box-shadow: var(--sl-shadow-card);
    padding: 18px;
    transition: box-shadow var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-pd-related-card:hover {
    box-shadow: var(--sl-shadow-hover);
}

.sl-pd-related-media {
    background: var(--sl-gradient-dark);
    border-radius: 12px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12%;
}

.sl-pd-related-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sl-pd-related-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 4px 0;
}

.sl-pd-related-row span:first-child {
    font-size: 19px;
    font-weight: 800;
}

.sl-pd-related-row span:last-child {
    font-size: 14px;
    color: var(--sl-text-muted);
    white-space: nowrap;
}

.sl-pd-related-card p {
    margin: 8px 4px 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sl-text-muted);
}

/* --- Sticky buy bar --- */
.sl-pd-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--sl-z-header);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--sl-border-light);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(130%);
    transition: transform 0.3s ease;
}

.sl-pd-sticky-bar.is-visible {
    transform: translateY(0);
}

.sl-pd-sticky-inner {
    padding: 14px var(--sl-gutter);
    display: flex;
    align-items: center;
    gap: 20px;
}

.sl-pd-sticky-media {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: var(--sl-gradient-dark);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

.sl-pd-sticky-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sl-pd-sticky-info {
    flex: 1;
    min-width: 0;
}

.sl-pd-sticky-title {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-pd-sticky-variation {
    font-size: 13px;
    color: var(--sl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-pd-sticky-variation:empty {
    display: none;
}

.sl-pd-sticky-price {
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap;
}

.sl-pd-sticky-cta svg {
    height: 16px;
    width: 16px;
}

.sl-pd-sticky-cta {
    white-space: nowrap;
    gap: var(--sl-space-2);
}

/* Needs the same specificity trick as .sl-btn.sl-btn-more above: plain
   .sl-pd-sticky-cta loses to .sl-btn.sl-btn-cart's !important deep-red
   (2 classes beats 1), even though this rule comes later in the file. */
.sl-btn.sl-btn-cart.sl-pd-sticky-cta {
    background: var(--sl-red) !important;
}

.sl-btn.sl-btn-cart.sl-pd-sticky-cta:hover {
    background: var(--sl-red-hover) !important;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .sl-pd-hero,
    .sl-pd-usecases {
        grid-template-columns: 1fr;
    }
    .sl-pd-benefits {
        grid-template-columns: 1fr;
    }
    .sl-pd-benefits-media {
        min-height: 320px;
    }
    .sl-pd-contents-grid,
    .sl-pd-stats-grid,
    .sl-pd-steps-grid,
    .sl-pd-cases-grid,
    .sl-pd-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .sl-pd-contents-grid,
    .sl-pd-stats-grid,
    .sl-pd-steps-grid,
    .sl-pd-cases-grid,
    .sl-pd-related-grid {
        grid-template-columns: 1fr;
    }
    .sl-pd-spec-grid {
        column-count: 1;
    }
    .sl-pd-sticky-info {
        display: none;
    }
}

/* ==========================================================================
   SAFE LASER TERMÉKAJÁNLÓ (product finder)
   ========================================================================== */
.sl-tf-page {
    font-family: var(--font-sans);
    color: var(--sl-text-primary);
    background: var(--sl-bg-white);
    overflow-x: hidden;
}

/* --- Hero --- */
.sl-tf-hero {
    position: relative;
    min-height: clamp(420px, 42vw, 560px);
    display: flex;
    align-items: center;
    background: var(--sl-bg-light);
    overflow: hidden;
    padding: clamp(64px, 8vw, 120px) var(--sl-gutter);
}

.sl-tf-hero-img {
    position: absolute;
    right: -4%;
    top: 0;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: cover;
}

.sl-tf-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--sl-bg-light) 0%, var(--sl-bg-light) 34%, rgba(238, 241, 242, 0.7) 50%, rgba(238, 241, 242, 0) 68%);
    pointer-events: none;
}

.sl-tf-hero-inner {
    position: relative;
    max-width: var(--sl-container-max);
    margin: 0 auto;
    width: 100%;
}

.sl-tf-hero-inner .sl-breadcrumbs {
    margin-bottom: 18px;
}

.sl-tf-hero-title {
    margin: 0;
    max-width: min(620px, 52%);
    font-size: var(--sl-fs-hero-h1);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 800;
}

.sl-tf-hero-desc {
    margin: 20px 0 0;
    max-width: min(520px, 48%);
    font-size: var(--sl-fs-intro);
    line-height: 1.6;
    color: var(--sl-text-secondary);
}

/* --- Wizard shell --- */
.sl-tf-wizard {
    background: var(--sl-bg-light);
    padding: clamp(40px, 5vw, 72px) var(--sl-gutter) clamp(56px, 7vw, 100px);
}

.sl-tf-wizard-inner {
    max-width: 900px;
    margin: 0 auto;
}

.sl-tf-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sl-red);
}

.sl-tf-eyebrow-white {
    color: rgba(255, 255, 255, 0.72);
}

.sl-tf-progress-wrap {
    position: sticky;
    top: var(--sl-header-height);
    z-index: 20;
    background: var(--sl-bg-light);
    padding: 14px 0 16px;
    margin-bottom: 8px;
}

.sl-tf-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sl-tf-progress-count {
    font-size: 13px;
    color: var(--sl-text-muted);
}

.sl-tf-progress-track {
    margin-top: 12px;
    height: 6px;
    border-radius: var(--sl-radius-full);
    background: var(--sl-border-medium);
    overflow: hidden;
}

.sl-tf-progress-fill {
    height: 100%;
    background: var(--sl-red);
    border-radius: var(--sl-radius-full);
    transition: width 0.3s var(--sl-ease-standard);
}

.sl-tf-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sl-tf-step {
    background: var(--sl-bg-white);
    border: 1px solid var(--sl-border-light);
    border-radius: var(--sl-radius-xl);
    padding: clamp(24px, 3vw, 40px);
    box-shadow: var(--sl-shadow-card);
}

.sl-tf-step-eyebrow {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sl-text-muted);
}

.sl-tf-step-q {
    margin: 10px 0 0;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.16;
    letter-spacing: -0.015em;
    font-weight: 500;
}

.sl-tf-step-helper {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sl-text-muted);
}

.sl-tf-options {
    margin-top: 22px;
    display: grid;
    gap: 12px;
}

.sl-tf-option {
    all: unset !important;
    box-sizing: border-box !important;
    display: block !important;
    text-align: left !important;
    cursor: pointer !important;
    padding: 18px 20px !important;
    border-radius: 14px !important;
    border: 1.5px solid var(--sl-border-light) !important;
    background: var(--sl-bg-white) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.sl-tf-option:hover,
.sl-tf-option:focus {
    border-color: var(--sl-grey-400) !important;
    outline: none !important;
}

.sl-tf-option.is-active,
.sl-tf-option.is-active:hover {
    border-color: var(--sl-red) !important;
    background: var(--sl-red-tint-2) !important;
    box-shadow: 0 8px 22px rgba(227, 39, 28, 0.12) !important;
}

.sl-tf-option-media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: var(--sl-bg-subtle);
    margin-bottom: 14px;
}

.sl-tf-option-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sl-tf-option-label {
    display: block;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.35;
}

.sl-tf-option-sub {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sl-text-muted);
}

.sl-tf-next-row {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.sl-tf-remaining {
    font-size: 14px;
    color: var(--sl-text-muted);
}

/* Shared button look for this page only (kept independent of .sl-btn's
   shop-card variants, which hardcode their own colors per class combo).
   WooCommerce styles bare buttons/links broadly on WC-templated pages, so
   every state — not just the default look — is reset with !important. */
.sl-tf-btn,
.sl-tf-btn-outline {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--sl-space-2) !important;
    border-radius: var(--sl-radius-sm) !important;
    padding: 14px 30px !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    cursor: pointer !important;
    text-align: center !important;
    outline: none !important;
    box-shadow: none !important;
    transition: background var(--sl-duration-base) var(--sl-ease-standard), border-color var(--sl-duration-base) var(--sl-ease-standard), color var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-tf-btn {
    background: var(--sl-red) !important;
    color: var(--sl-bg-white) !important;
    border: none !important;
}

.sl-tf-btn:hover,
.sl-tf-btn:focus,
.sl-tf-btn:active {
    background: var(--sl-red-hover) !important;
    color: var(--sl-bg-white) !important;
    outline: none !important;
    box-shadow: none !important;
}

.sl-tf-btn:disabled {
    background: var(--sl-border-medium) !important;
    color: var(--sl-grey-400) !important;
    cursor: default !important;
}

.sl-tf-btn svg {
    width: 18px;
    height: 18px;
}

.sl-tf-btn-outline {
    border: 1.5px solid var(--sl-border-medium) !important;
    color: var(--sl-text-primary) !important;
    background: var(--sl-bg-white) !important;
}

.sl-tf-btn-outline:hover,
.sl-tf-btn-outline:focus,
.sl-tf-btn-outline:active {
    border-color: var(--sl-text-primary) !important;
    color: var(--sl-text-primary) !important;
    background: var(--sl-bg-white) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* --- Result --- */
.sl-tf-result {
    margin-top: clamp(40px, 5vw, 72px);
    padding-top: clamp(36px, 4vw, 56px);
    border-top: 1px solid var(--sl-border-medium);
}

.sl-tf-result-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
}

.sl-tf-result-title {
    margin: 12px 0 0;
    font-size: clamp(26px, 3.2vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    font-weight: 500;
}

.sl-tf-result-intro {
    margin: 16px 0 0;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--sl-text-secondary);
}

.sl-tf-rec-card {
    margin-top: clamp(32px, 4vw, 48px);
    background: var(--sl-bg-white);
    border: 1px solid var(--sl-border-light);
    border-radius: var(--sl-radius-xl);
    overflow: hidden;
    box-shadow: var(--sl-shadow-panel);
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
}

.sl-tf-rec-media {
    position: relative;
    min-height: 280px;
    background: var(--sl-black);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.sl-tf-rec-media::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(227, 39, 28, 0.35), rgba(227, 39, 28, 0) 65%);
    pointer-events: none;
}

.sl-tf-rec-img {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 240px;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

.sl-tf-rec-body {
    padding: clamp(28px, 3.5vw, 44px);
}

.sl-tf-rec-badge {
    display: inline-flex;
    background: var(--sl-red);
    color: var(--sl-bg-white);
    border-radius: var(--sl-radius-full);
    padding: 6px 15px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sl-tf-rec-heading {
    margin-top: 16px;
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.sl-tf-rec-name {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.sl-tf-rec-price {
    font-size: 18px;
    color: var(--sl-text-muted);
}

.sl-tf-rec-desc {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--sl-text-secondary);
}

.sl-tf-rec-stats {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 28px;
}

.sl-tf-stat-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sl-grey-400);
}

.sl-tf-stat-value {
    margin-top: 6px;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--sl-text-primary);
}

.sl-tf-rec-reasons {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--sl-border-light);
}

.sl-tf-reasons-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.sl-tf-reasons-list li {
    display: flex;
    gap: 11px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--sl-text-primary);
}

/* `.sl-tf-reasons-list li`'s own `display:flex` (a class+element selector)
   otherwise beats the browser's built-in `[hidden]{display:none}` rule
   (an attribute selector, lower specificity) — without this, JS hiding
   non-matching reasons via the `hidden` attribute has no visible effect. */
.sl-tf-reasons-list li[hidden] {
    display: none !important;
}

.sl-tf-reason-plus {
    color: var(--sl-red);
    font-weight: 800;
    flex: none;
}

.sl-tf-rec-cta {
    margin-top: 30px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.sl-tf-compare-title {
    margin: clamp(36px, 4.5vw, 56px) 0 0;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.sl-tf-compare-grid {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.sl-tf-compare-card {
    background: var(--sl-bg-white);
    border: 1px solid var(--sl-border-light);
    border-radius: var(--sl-radius-lg);
    padding: clamp(24px, 2.6vw, 32px);
}

.sl-tf-compare-card.is-current {
    border: 1.5px solid var(--sl-red);
    box-shadow: 0 14px 36px rgba(227, 39, 28, 0.1);
}

.sl-tf-compare-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sl-tf-compare-name {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.sl-tf-compare-tag {
    background: var(--sl-bg-subtle);
    color: var(--sl-text-muted);
    border-radius: var(--sl-radius-full);
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sl-tf-compare-card.is-current .sl-tf-compare-tag {
    background: var(--sl-red);
    color: var(--sl-bg-white);
}

.sl-tf-compare-price {
    margin-top: 6px;
    font-size: 15px;
    color: var(--sl-text-muted);
}

.sl-tf-compare-stats {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sl-tf-consult-card {
    margin-top: clamp(32px, 4vw, 48px);
    background: var(--sl-red);
    color: var(--sl-bg-white);
    border-radius: var(--sl-radius-lg);
    padding: clamp(26px, 3vw, 36px);
    display: flex;
    flex-direction: column;
}

.sl-tf-consult-title {
    margin: 12px 0 0;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
}

.sl-tf-consult-desc {
    margin: 14px 0 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

.sl-tf-consult-cta {
    /* `all: unset !important` resets every longhand (including align-self,
       margin-top, width) importantly — a later non-important declaration
       for any of those can NEVER win over it regardless of order, so
       every property set after `all` here must also carry !important. */
    all: unset !important;
    box-sizing: border-box !important;
    margin-top: 24px !important;
    padding: 14px 30px !important;
    align-self: flex-start !important;
    width: auto !important;
    display: inline-flex !important;
    background: var(--sl-bg-white) !important;
    color: var(--sl-red) !important;
    border: none !important;
    border-radius: var(--sl-radius-sm) !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

.sl-tf-consult-cta:hover,
.sl-tf-consult-cta:focus,
.sl-tf-consult-cta:active {
    background: var(--sl-black) !important;
    color: var(--sl-bg-white) !important;
    outline: none !important;
    box-shadow: none !important;
}

.sl-tf-restart {
    /* Same rule as .sl-tf-consult-cta above: everything after `all: unset
       !important` must itself be !important or it's silently discarded. */
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    width: auto !important;
    margin-top: var(--sl-space-7) !important;
    cursor: pointer !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--sl-red) !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.sl-tf-restart:hover,
.sl-tf-restart:focus,
.sl-tf-restart:active {
    color: var(--sl-red-deep) !important;
    background: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .sl-tf-hero-title,
    .sl-tf-hero-desc {
        max-width: 100%;
    }
    .sl-tf-hero-img {
        opacity: 0.25;
    }
    .sl-tf-rec-card {
        grid-template-columns: 1fr;
    }
    .sl-tf-compare-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .sl-tf-options {
        grid-template-columns: 1fr !important;
    }
    .sl-tf-rec-stats {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SAFE LASER CART PAGE
   ========================================================================== */
.sl-cart-page {
    font-family: var(--font-sans);
    color: var(--sl-text-primary);
    background: var(--sl-bg-light);
}

.sl-cart-container {
    max-width: var(--sl-container-max);
    margin: 0 auto;
    padding: clamp(28px, 4vw, 48px) var(--sl-gutter) clamp(48px, 6vw, 80px);
}

.sl-cart-title {
    margin: 0 0 28px;
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.04;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    font-weight: 800;
}

.sl-cart-count {
    font-weight: 400;
    font-size: 0.55em;
    color: var(--sl-text-muted);
    text-transform: none;
}

.sl-cart-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 28px;
    align-items: start;
}

/* --- Items --- */
.sl-cart-items-card {
    background: var(--sl-bg-white);
    border-radius: var(--sl-radius-xl);
    box-shadow: var(--sl-shadow-card);
    padding: 10px clamp(16px, 2vw, 28px);
}

.sl-cart-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 4px;
    border-bottom: 1px solid var(--sl-bg-subtle);
}

.sl-cart-item-media {
    width: 84px;
    height: 84px;
    border-radius: var(--sl-radius-md);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Same dark tile the product page gallery/thumbnails use. */
    background: var(--sl-gradient-dark);
    padding: 8px;
}

.sl-cart-item-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sl-cart-item-body {
    flex: 1;
    min-width: 0;
}

.sl-cart-item-name {
    font-weight: 700;
    font-size: 16px;
}

.sl-cart-item-name a {
    color: inherit;
}

.sl-cart-item-variant {
    font-size: 13px;
    color: var(--sl-text-muted);
}

.sl-cart-item-remove {
    all: unset !important;
    box-sizing: border-box !important;
    margin-top: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    color: var(--sl-grey-400) !important;
    outline: none !important;
    box-shadow: none !important;
}

.sl-cart-item-remove:hover,
.sl-cart-item-remove:focus {
    color: var(--sl-red) !important;
    outline: none !important;
}

.sl-cart-item-remove svg {
    width: 15px;
    height: 15px;
}

/* .sl-cart-qty reuses the shared .quantity/.qty/.sl-pd-qty-btn look from
   the product page, just smaller — scoped here so the product page's own
   stepper is untouched. Specificity (2 classes) + !important where the
   base rule also carries !important, so this reliably wins over it. */
.quantity.sl-cart-qty {
    border-radius: 6px !important;
}

.sl-cart-qty .sl-pd-qty-btn {
    width: 32px;
    height: 36px;
    font-size: 17px;
}

.sl-cart-qty .qty {
    width: 38px !important;
    height: 36px !important;
    font-size: 14px !important;
}

.sl-cart-item-total {
    width: 130px;
    text-align: right;
    font-weight: 800;
    font-size: 16px;
    flex: none;
}

.sl-cart-continue {
    padding: 18px 4px 12px;
}

.sl-cart-continue a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-red);
    transition: color var(--sl-duration-base) var(--sl-ease-standard), gap var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-cart-continue a:hover {
    color: var(--sl-red-deep);
    gap: 12px;
}

.sl-cart-continue svg {
    width: 16px;
    height: 16px;
}

/* Hidden trigger the qty stepper clicks to submit the real WC cart-update
   form — kept in the DOM (not display:none) so its name/value still posts. */
.sl-cart-update-trigger {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Summary --- */
.sl-cart-summary {
    background: var(--sl-bg-white);
    border-radius: var(--sl-radius-xl);
    box-shadow: var(--sl-shadow-card);
    padding: 28px;
    position: sticky;
    top: calc(var(--sl-header-height) + 28px);
}

.sl-cart-summary-title {
    margin: 0 0 20px;
    font-size: 19px;
    font-weight: 500;
}

.sl-cart-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14.5px;
    color: var(--sl-text-secondary);
    padding: 9px 0;
}

.sl-cart-summary-value {
    font-weight: 600;
    color: var(--sl-text-primary);
}

.sl-cart-summary-discount,
.sl-cart-summary-discount .sl-cart-summary-value {
    color: var(--sl-red-deep);
}

.sl-cart-summary-shipping {
    border-bottom: 1px solid var(--sl-border-light);
}

.sl-cart-summary-shipping .sl-cart-summary-value {
    color: var(--sl-status-success);
}

.sl-cart-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 18px 0 6px;
}

.sl-cart-summary-total span:first-child {
    font-size: 16px;
    font-weight: 700;
}

.sl-cart-summary-total-value {
    font-size: 24px;
    font-weight: 800;
}

.sl-cart-vat-note {
    font-size: 12px;
    color: var(--sl-grey-400);
    margin-bottom: 20px;
}

a.woocommerce-remove-coupon {
    display: none;
}

.sl-cart-coupon {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

/* Hardened with !important — WooCommerce/Elementor style plain text
   inputs broadly enough elsewhere on this site that a plain declaration
   here was losing on border/radius (same class of bleed as the buttons). */
.sl-cart-coupon-input {
    flex: 1 !important;
    min-width: 0 !important;
    height: 46px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border: 1.5px solid var(--sl-border-medium) !important;
    border-radius: var(--sl-radius-sm) !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    color: var(--sl-text-primary) !important;
    background: var(--sl-bg-white) !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-cart-coupon-input::placeholder {
    color: var(--sl-grey-400);
}

.sl-cart-coupon-input:focus {
    border-color: var(--sl-red) !important;
    outline: none !important;
    box-shadow: none !important;
}

.sl-cart-coupon-btn {
    all: unset !important;
    box-sizing: border-box !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--sl-black) !important;
    color: var(--sl-bg-white) !important;
    border: none !important;
    border-radius: var(--sl-radius-sm) !important;
    padding: 0 20px !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    outline: none !important;
    box-shadow: none !important;
    transition: background var(--sl-duration-base) var(--sl-ease-standard) !important;
}

.sl-cart-coupon-btn:hover,
.sl-cart-coupon-btn:focus {
    /* Was --sl-pure-black, barely distinguishable from the default
       --sl-black — brand red makes the hover state actually visible. */
    background: var(--sl-red) !important;
    color: var(--sl-bg-white) !important;
    outline: none !important;
    box-shadow: none !important;
}

.sl-cart-coupon-btn:active {
    background: var(--sl-red-deep) !important;
    color: var(--sl-bg-white) !important;
}

/* WooCommerce's own inline .woocommerce-message/-error/-info notices
   (add-to-cart, cart updates, coupon apply/remove, checkout errors,
   my-account, ...) are superseded sitewide by the floating toast stack
   below — navigation.js copies each one into a toast and removes the
   original, but hide the source at the CSS level too so nothing flashes
   inline for the instant before that JS runs on page load. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    display: none !important;
}

/* Floating notice toast stack — bottom-left corner, above everything. */
#sl-notice-stack {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    max-width: min(360px, calc(100vw - 40px));
}

.sl-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--sl-bg-white);
    border-radius: var(--sl-radius-sm);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
    padding: 14px 16px;
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sl-text-primary);
    border-left: 4px solid var(--sl-border-medium);
    animation: sl-notice-in 0.25s var(--sl-ease-standard);
}

.sl-notice.is-leaving {
    animation: sl-notice-out 0.25s var(--sl-ease-standard) forwards;
}

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

@keyframes sl-notice-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(8px);
    }
}

.sl-notice-icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.sl-notice-body {
    flex: 1;
    min-width: 0;
}

.sl-notice-body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sl-notice-body a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.sl-notice--success {
    border-left-color: var(--sl-status-success);
}

.sl-notice--success .sl-notice-icon {
    color: var(--sl-status-success);
}

.sl-notice--error {
    border-left-color: var(--sl-red);
}

.sl-notice--error .sl-notice-icon {
    color: var(--sl-red);
}

.sl-notice--info {
    border-left-color: var(--sl-text-secondary);
}

.sl-notice--info .sl-notice-icon {
    color: var(--sl-text-secondary);
}

.sl-cart-checkout-btn {
    all: unset !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 54px !important;
    background: var(--sl-red) !important;
    color: var(--sl-bg-white) !important;
    border-radius: 10px !important;
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    font-size: 15.5px !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    outline: none !important;
    box-shadow: none !important;
}

.sl-cart-checkout-btn:hover,
.sl-cart-checkout-btn:focus,
.sl-cart-checkout-btn:active {
    background: var(--sl-red-hover) !important;
    color: var(--sl-bg-white) !important;
    outline: none !important;
    box-shadow: none !important;
}

.sl-cart-checkout-btn svg {
    width: 19px;
    height: 19px;
}

.sl-cart-trust {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    color: var(--sl-text-secondary);
}

.sl-cart-trust span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sl-cart-trust svg {
    width: 16px;
    height: 16px;
    color: var(--sl-red);
}

/* --- Empty state --- */
.sl-cart-empty {
    background: var(--sl-bg-white);
    border-radius: var(--sl-radius-xl);
    box-shadow: var(--sl-shadow-card);
    padding: clamp(48px, 7vw, 90px) 30px;
    text-align: center;
}

.sl-cart-empty-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--sl-red-tint-2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.sl-cart-empty-icon svg {
    width: 38px;
    height: 38px;
    color: var(--sl-red-deep);
}

.sl-cart-empty h2 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 500;
}

.sl-cart-empty p {
    margin: 0 auto 28px;
    max-width: 400px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sl-text-secondary);
}

.sl-cart-empty-cta {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    background: var(--sl-red) !important;
    color: var(--sl-bg-white) !important;
    border-radius: 8px !important;
    padding: 15px 34px !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
}

.sl-cart-empty-cta:hover,
.sl-cart-empty-cta:focus {
    background: var(--sl-red-hover) !important;
    color: var(--sl-bg-white) !important;
    outline: none !important;
}

.sl-cart-empty-cta svg {
    width: 18px;
    height: 18px;
}

/* --- Recommended add-ons --- */
.sl-cart-recommend {
    margin-top: clamp(40px, 5vw, 64px);
}

.sl-cart-recommend-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.sl-cart-recommend-card {
    background: var(--sl-bg-white);
    border-radius: var(--sl-radius-lg);
    box-shadow: var(--sl-shadow-card);
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.sl-cart-recommend-media {
    display: block;
    background: var(--sl-bg-subtle);
    border-radius: var(--sl-radius-md);
    aspect-ratio: 4 / 3;
}

.sl-cart-recommend-media img {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
}

.sl-cart-recommend-name {
    display: block;
    margin: 14px 4px 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--sl-text-primary);
}

.sl-cart-recommend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 4px 4px;
}

.sl-cart-recommend-price {
    font-size: 15px;
    font-weight: 800;
}

.sl-cart-recommend-add {
    background: var(--sl-red);
    color: var(--sl-bg-white) !important;
    border-radius: 6px;
    padding: 8px 14px;
    font-weight: 600;
    font-size: 12.5px;
    transition: background var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-cart-recommend-add:hover {
    background: var(--sl-red-hover);
    color: var(--sl-bg-white);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .sl-cart-grid {
        grid-template-columns: 1fr;
    }
    .sl-cart-summary {
        position: static;
        /* Was a slim 400px sidebar with generous padding; full-width on
           tablet, the same padding looks oversized relative to its
           content. */
        padding: 22px;
    }
    .sl-cart-recommend-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .sl-cart-item {
        flex-wrap: wrap;
        row-gap: 10px;
    }
    .sl-cart-item-media {
        width: 64px;
        height: 64px;
    }
    /* Media + body (name/variant/remove) stay on the first row; the qty
       stepper is forced onto its own row via flex-basis:100%, with the
       price following it on that same second row (space-between-ish via
       the existing .sl-cart-item-total flex:auto override below). */
    .quantity.sl-cart-qty {
        order: 3;
        flex-basis: 100%;
    }
    .sl-cart-item-total {
        order: 4;
        width: auto;
        margin-left: auto;
    }
    .sl-cart-recommend-grid {
        grid-template-columns: 1fr;
    }
    .sl-cart-coupon-btn {
        padding: 0 14px !important;
    }
}

/* ==========================================================================
   SAFE LASER CHECKOUT PAGE — matched pixel-for-pixel against
   Checkout page.dc.html where the value differs from this stylesheet's
   normal tokens (radius/shadow/greys here are the prototype's own literal
   values, not --sl-radius-xl/--sl-shadow-card/etc., which are slightly off).
   ========================================================================== */
.sl-checkout-page {
    font-family: var(--font-sans);
    color: var(--sl-text-primary);
    background: var(--sl-bg-light);
    /* body is a flex column (html/body rules near the top of this file)
       with .sl-footer pushed down via margin-top:auto whenever the page's
       own content is shorter than the viewport — without this growing to
       fill that same leftover space itself, the gap sits below this page's
       box instead of inside it, i.e. plain (non-grey) body background
       shows through between this page's content and the footer. */
    flex: 1;
}

.sl-checkout-steps-wrap {
    max-width: var(--sl-container-max);
    margin: 0 auto;
    padding: clamp(24px, 3vw, 40px) var(--sl-gutter) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sl-checkout-steps {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: #8a8a8a;
    flex-wrap: wrap;
}

.sl-checkout-steps svg {
    width: 16px;
    height: 16px;
    color: var(--sl-border-medium);
}

.sl-checkout-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sl-checkout-step.is-done {
    color: var(--sl-red);
}

.sl-checkout-step.is-active {
    color: var(--sl-text-primary);
}

.sl-checkout-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e0e0e0;
    color: var(--sl-bg-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.sl-checkout-step.is-done .sl-checkout-step-num,
.sl-checkout-step.is-active .sl-checkout-step-num {
    background: var(--sl-red);
}

.sl-checkout-back {
    /* Also used on <button> triggers (e.g. the profile page's "Adatok
       szerkesztése"), not just <a> — all:unset first strips any default
       button chrome (border/background/padding) before the properties
       below reapply the intended look, so it looks identical either way. */
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    font-family: var(--font-sans);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #666;
    transition: color var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-checkout-back:hover {
    color: var(--sl-red);
}

.sl-checkout-back svg {
    width: 16px;
    height: 16px;
}

.sl-checkout-grid {
    max-width: var(--sl-container-max);
    margin: 0 auto;
    padding: clamp(24px, 3vw, 36px) var(--sl-gutter) clamp(48px, 6vw, 80px);
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 28px;
    /* NOT align-items:start — that collapses the aside grid item down to
       its own content height (just the summary card), leaving no extra
       room in its containing block for position:sticky to ever have
       visible effect. Default (stretch) makes the aside's box match the
       taller main column's row height, giving the sticky card room to
       travel. */
}

.sl-checkout-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#customer_details {
    /* No "gap" here — with only .woocommerce-billing-fields as a child
       (the common case, logged in / registration off) a flex gap still
       shouldn't add space before the first item, but the account-fields
       section is the only thing that ever needs spacing from it, so that
       spacing is applied explicitly below instead of via a container-wide
       gap that has no second item to apply between most of the time. */
    display: flex;
    flex-direction: column;
}

.woocommerce-billing-fields + .woocommerce-account-fields {
    margin-top: 24px;
}

.sl-checkout-card {
    background: var(--sl-bg-white);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
    padding: clamp(22px, 2.4vw, 32px);
}

.sl-checkout-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.sl-checkout-card-head .sl-checkout-card-title {
    margin-bottom: 0;
}

.sl-checkout-account-greeting {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sl-text-secondary);
}

.sl-checkout-login-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #666;
    transition: color var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-checkout-login-cta:hover {
    color: var(--sl-red);
}

.sl-checkout-login-cta svg {
    width: 16px;
    height: 16px;
}

.sl-checkout-card-title {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sl-checkout-card-title svg {
    width: 20px;
    height: 20px;
    color: var(--sl-red);
}

.sl-checkout-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* WooCommerce's own stylesheet sizes .form-row-first/.form-row-last with
   a percentage width + float (its classic 2-up layout convention), which
   fights our grid — each field's wrapper renders narrower than the grid
   cell it's sitting in ("not filling the column") unless overridden. */
.sl-checkout-field-grid .form-row {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.sl-checkout-field-grid + .sl-checkout-field-grid,
.sl-checkout-field-grid + .sl-checkout-company-fields,
.sl-checkout-company-fields + .sl-checkout-field-grid {
    margin-top: 14px;
}

.sl-checkout-field-grid-single {
    grid-template-columns: 1fr;
}

/* Password-change fieldset (the "Adatok szerkesztése" modal) — resets the
   browser's own default <fieldset>/<legend> chrome (inset border, default
   padding/margin, legend straddling the border) to match the rest of the
   form instead. */
.sl-profile-password-fieldset {
    border: none;
    margin: 24px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--sl-border-light);
}

.sl-profile-password-fieldset legend {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-text-primary);
}

/* Card-to-card spacing is handled entirely by flex "gap" (.sl-checkout-main,
   #customer_details, .woocommerce-billing-fields below) — NOT also by a
   margin-top sibling rule here. Szállítási mód / Fizetési mód / Megjegyzés
   are direct flex children of the same .sl-checkout-main that already
   applies gap:24px between them; a margin-top rule on top of that would
   double their gap to 48px while every other pair (spaced only by a
   flex gap) stayed at 24px — exactly the "gaps aren't equal" bug. One
   mechanism, everywhere, keeps every gap identical regardless of which
   template/wrapper two cards happen to land in. */
.woocommerce-billing-fields {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* WooCommerce wraps each field in <p class="form-row"><label>…<input>. The
   prototype shows placeholder-only inputs with no visible label — visually
   hide the label (screen readers still read it) rather than removing it,
   since this is real checkout, not a mockup. */
.sl-checkout-card .form-row,
.sl-checkout-shipping-address .form-row {
    margin: 0;
}

.sl-checkout-card .form-row.form-row-wide,
.sl-checkout-shipping-address .form-row.form-row-wide,
.sl-checkout-company-fields .form-row.form-row-wide {
    grid-column: 1 / -1;
}

/* Kapcsolat's email/phone fields register as "form-row-wide" by default
   (full-width), which the rule above forces to span both grid columns —
   stripping that class in form-billing.php only fixes the very first
   render; some later script (checkout field re-validation, a
   multilingual plugin, etc.) re-adds/re-derives it shortly after load,
   which is why the two fields visibly snap to stacked a moment later.
   An !important override keyed to the field's own id beats that
   regardless of which classes end up on it. */
#billing_email_field,
#billing_phone_field {
    grid-column: auto !important;
}

/* Any hand-written checkbox label in these cards must carry class
   "checkbox" (matching WooCommerce's own convention for its checkbox-type
   fields) to be excluded here — .sl-company-toggle previously didn't and
   was silently hidden by this rule along with its actual field label. */
.sl-checkout-card label:not(.checkbox),
.sl-checkout-shipping-address label:not(.checkbox) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

/* The shipping-method and payment-method radio rows are ALSO plain,
   non-".checkbox" <label>s living inside a ".sl-checkout-card" (their own
   card wrappers), so the field-hiding rule above catches them too — but
   these labels ARE the visible row text (title/meta/price, or the gateway
   name), not a redundant label for an already-visible input. Restore them
   to normal, visible layout. */
#shipping_method label,
.wc_payment_methods label {
    /* !important needed: ".sl-checkout-card label:not(.checkbox)" above is
       two classes + a type (0,2,1), which outranks a single-class-plus-type
       selector like ".wc_payment_methods label" (0,1,1) regardless of
       source order. */
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    margin: 0 !important;
}

.sl-checkout-card .input-text,
.sl-checkout-card select,
.sl-checkout-card textarea {
    width: 100% !important;
    height: 50px !important;
    padding: 0 15px !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 9px !important;
    font-family: var(--font-sans) !important;
    font-size: 14.5px !important;
    background: var(--sl-bg-white) !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-checkout-card textarea {
    height: auto !important;
    min-height: 90px;
    /* The shared .input-text/select/textarea rule above sets
       "padding: 0 15px" (for the 50px-tall single-line inputs); textarea
       needs vertical padding too, but overriding only padding-top left
       15px/15px/14px/0 (right/left/top/bottom) — uneven on every side.
       Same 15px value all around instead. */
    padding: 15px !important;
    resize: vertical;
}

/* Plain (non-select2-enhanced) <select> — a brand chevron instead of the
   browser default. select2 replaces the real country/state <select>
   visually, so this mostly matters as the no-JS fallback. */
.sl-checkout-card select {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 40px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
}

.sl-checkout-card .input-text:focus,
.sl-checkout-card select:focus,
.sl-checkout-card textarea:focus {
    border-color: var(--sl-red) !important;
    outline: none !important;
    box-shadow: none !important;
}

#order_comments.input-text {
    padding: 15px 15px !important;
}

/* select2 (WooCommerce's own country/state widget) */
.select2-container .select2-selection--single {
    height: 50px !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 9px !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--focus .select2-selection--single {
    border-color: var(--sl-red) !important;
    outline: none !important;
    box-shadow: none !important;
}

.select2-container .select2-selection__rendered {
    line-height: 50px !important;
    padding-left: 15px !important;
    padding-right: 40px !important;
    font-size: 14.5px !important;
    color: var(--sl-text-primary) !important;
}

/* WooCommerce's own rule here (:where(.woocommerce) contributes zero
   specificity, but the rest of that selector — 4 real classes — still
   outranks the 2-class rule above regardless of !important or load
   order), so it needs matching specificity to override. */
:where(.woocommerce) .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 15px !important;
}

.select2-container .select2-selection__arrow {
    height: 48px !important;
    width: 30px !important;
    right: 8px !important;
}

/* Replace select2's default CSS-triangle arrow with the same chevron used
   on the plain <select> fallback above. */
.select2-container .select2-selection__arrow b {
    border: none !important;
    width: 16px !important;
    height: 16px !important;
    margin: -8px 0 0 -8px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") center / 16px no-repeat !important;
}

.select2-container .select2-selection__arrow {
    height: 48px !important;
}

.sl-checkout-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
}

.sl-checkout-checkbox-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--sl-red);
    flex: none;
}

/* Browsers dim disabled checkboxes regardless of accent-color — the
   decorative "billing matches shipping" checkbox should read as a normal,
   fully-colored checked box, not a greyed-out disabled control. */
.sl-checkout-checkbox-row input[type="checkbox"]:disabled {
    opacity: 1;
}

.sl-checkout-company-fields {
    margin-top: 16px;
}

/* "Céges számlát kérek" toggle button — a real checkbox, visually hidden,
   styled entirely through its sibling <span> so it still behaves like a
   native checkbox (keyboard-togglable, submits normally) while looking
   like a pill button: outline by default, solid red with a tick once
   checked. */
.sl-company-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.sl-company-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

.sl-company-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--sl-radius-full);
    border: 1.5px solid var(--sl-border-medium);
    background: var(--sl-bg-white);
    color: var(--sl-text-secondary);
    font-size: 13px;
    font-weight: 600;
    transition: all var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-company-toggle-input:not(:checked) + .sl-company-toggle-btn:hover {
    border-color: var(--sl-red);
    color: var(--sl-red);
}

.sl-company-toggle-input:not(:checked) + .sl-company-toggle-btn:active {
    background: var(--sl-red-tint-2);
}

.sl-company-toggle-btn svg {
    width: 14px;
    height: 14px;
    display: none;
}

.sl-company-toggle-input:checked + .sl-company-toggle-btn {
    background: var(--sl-red);
    border-color: var(--sl-red);
    color: var(--sl-bg-white);
}

.sl-company-toggle-input:checked + .sl-company-toggle-btn svg {
    display: inline-block;
}

.sl-company-toggle-input:focus-visible + .sl-company-toggle-btn {
    outline: 2px solid var(--sl-red);
    outline-offset: 2px;
}

/* --- Order summary (right column) --- */
.sl-checkout-aside {
    min-width: 0;
}

.sl-checkout-summary {
    background: var(--sl-bg-white);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
    padding: 28px;
    position: sticky;
    /* Prototype uses top:24px against its own slim checkout header; this
       site keeps the real sticky mega-nav header on every page, so the
       offset accounts for that instead: the header's own height, plus
       extra breathing room (more than the header's own 16px vertical
       padding) so the card doesn't sit flush against the header edge
       while sticky. */
    top: calc(var(--sl-header-height) + 52px);
}

.sl-checkout-summary-title {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 500;
}

/* --- Order review items (woocommerce/checkout/review-order.php) — same
   52px dark-tile-with-qty-badge row as the prototype. --- */
.sl-checkout-review-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid #ededed;
}

.sl-checkout-review-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sl-checkout-review-media {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    flex: none;
    background: var(--sl-gradient-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

.sl-checkout-review-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sl-checkout-review-qty {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #8a8a8a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sl-checkout-review-body {
    flex: 1;
    min-width: 0;
}

.sl-checkout-review-name {
    font-weight: 600;
    font-size: 14px;
}

.sl-checkout-review-variant {
    font-size: 12.5px;
    color: #8a8a8a;
}

.sl-checkout-review-total {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    flex: none;
}

/* --- Totals — same colors/font-sizes as the cart page's own
   .sl-cart-summary-row/-value/-total(-value), for consistency across
   screens. */
.sl-checkout-review-row {
    display: flex;
    justify-content: space-between;
    font-size: 14.5px;
    padding: 9px 0;
}

.sl-checkout-review-value {
    font-weight: 600;
    color: var(--sl-text-primary);
}

.sl-checkout-review-discount,
.sl-checkout-review-discount .sl-checkout-review-value {
    color: var(--sl-red-deep);
}

.sl-checkout-review-shipping {
    border-bottom: 1px solid var(--sl-border-light);
}

.sl-checkout-review-shipping .sl-checkout-review-value.is-free {
    color: var(--sl-status-success);
}

.sl-checkout-review-order-total {
    align-items: baseline;
    padding: 18px 0 6px;
}

.sl-checkout-review-order-total span:first-child {
    font-size: 16px;
    font-weight: 700;
}

.sl-checkout-review-total-value {
    font-size: 24px;
    font-weight: 800;
}

/* Hide WC's default "Have a coupon? click here" toggle notice — the real
   form it toggles now lives in the order summary instead (relocated by
   navigation.js), and stays permanently visible there like the cart
   page's own coupon box, so this toggle serves no purpose. Its own inner
   text is ALSO a plain .woocommerce-info div (wc_print_notice() renders
   every notice type that way), which the global notice-toast system
   further down explicitly ignores (see the .woocommerce-form-coupon-toggle
   check in navigation.js) rather than turning into a floating toast — so
   this is the only thing that needs to hide it, and does so purely via
   CSS from the very first paint, with no JS timing involved at all. */
.woocommerce-form-coupon-toggle {
    display: none !important;
}

/* The real coupon form renders at its ORIGINAL position (before this
   page's own markup even starts — see the note in review-order.php) for
   an instant before navigation.js relocates it into the order summary;
   without this, that's a visible flash of raw, unstyled WooCommerce
   markup at the very top of the page on every load. Hide it unconditionally
   by default — the second rule below is the only thing that ever makes it
   visible again, and only once it actually has BOTH been relocated inside
   .sl-checkout-summary AND given the sl-cart-coupon class, i.e. only after
   navigation.js has successfully moved and restyled it. */
form.checkout_coupon {
    display: none !important;
}

/* WordPress/WooCommerce marks <body> "woocommerce-no-js" by default and
   only swaps it to "woocommerce-js" via a tiny inline script hooked to
   wp_footer — i.e. right before </body>, at the very END of the page.
   For this entire page's initial render (this form included, near the
   very top), the body still carries "woocommerce-no-js", and WooCommerce's
   own stylesheet has ".woocommerce-no-js form.woocommerce-form-coupon
   {display:block!important}" — TWO classes plus a type, the same
   specificity as the rule above, so on a specificity+importance tie it's
   whichever stylesheet loads later that wins, not us. Match that exact
   selector shape so this rule is guaranteed to load after WooCommerce's
   own (this theme's stylesheet is always enqueued as a dependent of it)
   and reliably win the tie regardless of the no-js/js body class. */
.woocommerce-no-js form.checkout_coupon {
    display: none !important;
}

/* The relocated coupon form is given classes matching the cart page's own
   .sl-cart-coupon/-input/-btn exactly (added by navigation.js) — same
   look. Its classic two-column .form-row wrappers
   (<p class="form-row-first/-last">) are flattened with display:contents
   so the input/button become the actual flex children, matching the cart
   page's flat <input>+<button> markup. Core's own
   ".woocommerce form.checkout_coupon" rule adds a bordered/padded box
   look (border, padding, margin, border-radius) meant for its default
   plain toggle-form presentation — reset back to nothing extra so only
   the cart-matching styling below shows. */
.sl-checkout-summary form.checkout_coupon.sl-cart-coupon {
    display: flex !important;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 18px 0;
    text-align: left;
}



.sl-cart-coupon .form-row {
    display: contents;
}

.sl-cart-coupon .clear {
    display: none;
}

/* WooCommerce's checkout.js appends #coupon-error-notice as a sibling
   right after the #coupon_code input (inside the "form-row-first" <p>
   flattened to display:contents above) — i.e. physically BETWEEN the
   input and the "Beváltás" button in the DOM, which without this would
   render squeezed between them on the same flex row. flex-wrap plus a
   high "order" + full flex-basis on the notice forces it to the very end
   of the row and onto its own line, landing below the whole form
   regardless of where WooCommerce actually inserts it. */
.sl-cart-coupon {
    flex-wrap: wrap;
}

.sl-cart-coupon .coupon-error-notice {
    order: 99;
    flex: 1 0 100%;
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--sl-red-deep);
}

/* Same defensive neutralization as .woocommerce-billing-fields::before/::after
   above — no clearfix or generated content of any kind (WooCommerce's own
   classic float-layout clearfix convention, or anything else) on the
   relocated coupon form or any of its descendants. */
#sl-checkout-coupon-slot::before,
#sl-checkout-coupon-slot::after,
#sl-checkout-coupon-slot *::before,
#sl-checkout-coupon-slot *::after {
    display: none !important;
    content: none !important;
}

.sl-checkout-vat-note {
    font-size: 12px;
    color: #8a8a8a;
    margin-top: 4px;
}

/* --- Shipping method radios (rendered by wc_cart_totals_shipping_html()) --- */
#shipping_method {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#shipping_method li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1.5px solid #e2e2e2;
    transition: all 0.2s ease;
}

#shipping_method li:has(input:checked) {
    border-color: var(--sl-red);
    background: var(--sl-red-tint-2);
}

/* WooCommerce's own stylesheet ships ".woocommerce ul#shipping_method li
   label { display: inline; }" — one ID + one class + three types (1,1,3),
   which outranks the plain "#shipping_method label" below (1,0,1) despite
   coming first in source order, so display:flex was silently losing. */
#shipping_method label {
    flex: 1;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-weight: 600;
    font-size: 14.5px;
    color: #1a1a1a;
    cursor: pointer;
}

.sl-shipping-method-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sl-shipping-method-title {
    font-weight: 600;
    font-size: 14.5px;
    color: #1a1a1a;
}

.sl-shipping-method-meta {
    font-weight: 400;
    font-size: 12.5px;
    color: #8a8a8a;
}

.sl-shipping-method-price {
    flex: none;
    font-weight: 700;
    font-size: 14.5px;
    color: #1a1a1a;
    white-space: nowrap;
}

.sl-shipping-method-price.is-free {
    color: #2f9e6b;
}

/* --- Payment methods (checkout/payment.php's own markup) --- */
.wc_payment_methods.payment_methods {
    list-style: none;
    margin: 18px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid #ededed;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wc_payment_methods .wc_payment_method {
    /* The <li> is block-level, not a flex row itself, since it now stacks
       two things: the input+label row, and (only for the checked method)
       the .payment_box below it. */
    border-radius: 12px;
    border: 1.5px solid #e2e2e2;
    padding: 16px 18px;
    transition: all 0.2s ease;
}

/* Matches #shipping_method li: the radio <input> is a plain inline
   sibling before <label>, but the label itself is display:flex
   (blockified) — without this row also being a flex row, the block-level
   label wraps onto its own line below the inline radio instead of
   sitting beside it. */
.sl-payment-method-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wc_payment_methods .wc_payment_method label {
    flex: 1;
    padding: 0;
}

.wc_payment_methods .wc_payment_method:has(input:checked) {
    border-color: var(--sl-red);
    background: var(--sl-red-tint-2);
}

/* WooCommerce's own stylesheet targets payment method labels with a
   selector like ".woocommerce ul.payment_methods li label" — a class plus
   three element types, which outranks ".wc_payment_methods label" (one
   class, one type) regardless of source order, so display:flex was
   silently losing the same way it did for #shipping_method label. */
/* Styled the same way as #shipping_method label (title + meta description
   stacked in .sl-shipping-method-info, reused as-is here) — title/meta on
   the left, the gateway's own logo(s) (if any) on the right. */
.wc_payment_methods .payment_method_label,
.wc_payment_methods label {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 16px 0;
    font-size: 14.5px;
    color: #1a1a1a;
    cursor: pointer;
}

/* A gateway's own logo(s) (e.g. Barion's Visa/Mastercard/Apple Pay/Google
   Pay strip) are appended straight into the label — constrain their
   height and let them wrap onto their own line instead of stretching the
   row or overlapping the title. */
.wc_payment_methods label img {
    max-height: 20px;
    width: auto;
    max-width: none;
    vertical-align: middle;
    margin: 0 2px;
}

/* The gateway's description (and, for gateways with has_fields() — Barion,
   MilPay's installment widget — its actual injected fields) render into
   the standard .payment_box, same as core, but should only ever be
   visible for the currently-selected method. Keyed off
   ".wc_payment_method:has(input:checked)" (not core's own inline-style
   slideDown()/slideUp() toggling) so it can't be left open by a stray
   inline style and can never show for an unselected gateway — deterministic
   regardless of animation timing or of WC's checkout.js internals. */
.wc_payment_methods .payment_box {
    display: none !important;
    margin-top: 12px;
    padding-left: 36px;
    font-size: 13px;
    line-height: 1.6;
    color: #666;
}

.payment_box.payment_method_cheque p {
    margin: 0;
}

/* MilPay (installment/BNPL) gateway plugin ships its own CSS/inline styles
   that fight the card's own spacing and color — override each back to the
   card's design. */
.wc_payment_methods .payment_method_MilPayBNPLApplication {
    padding-left: 18px !important;
}

.wc_payment_methods .payment_method_MilPayBNPLApplication.payment_box {
    background-color: transparent !important;
    padding: 0 18px !important;
}

#MilPay {
    background-color: transparent !important;
    margin: 0 1.5rem !important;
}

/* Neutralize the plugin's own logo sizing/offset so the generic
   ".wc_payment_methods label img" rule (max-height:20px, vertical-align:
   middle, margin:0 2px) applies here too, same as every other gateway. */
.payment_method_MilPayBNPLApplication label img {
    margin-bottom: 0 !important;
    max-height: 20px !important;
}

.wc_payment_methods .wc_payment_method:has(input:checked) .payment_box {
    display: block !important;
}

/* Custom radio circle matching the prototype exactly: a plain grey ring by
   default, and — once checked — the ring itself thickens into solid red
   (border-box clipping means the 6px border paints as an opaque red ring
   while the untouched white background still shows through the smaller
   unbordered center), giving the same red-ring/white-dot look the
   prototype gets from a separate nested white dot element. */
.wc_payment_methods input.input-radio,
#shipping_method input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin: 0;
    flex: none;
    border-radius: 50%;
    border: 2px solid #c4c4c4;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, border-width 0.2s ease;
}

.wc_payment_methods input.input-radio:checked,
#shipping_method input[type="radio"]:checked {
    border: 6px solid var(--sl-red);
    background: #fff;
}

/* Terms + place order */

/* WooCommerce's own stylesheet adds a clearfix (content:"" table display)
   before/after this wrapper for its classic float-based layout, which our
   flex-based cards don't need and which can render as a stray empty line. */
.woocommerce-billing-fields::before,
.woocommerce-billing-fields::after {
    display: none !important;
    content: none !important;
}

/* Order total's "(x Ft ÁFA)" breakdown next to "Fizetendő" — the VAT note
   directly below the totals block already covers this. */
.includes_tax {
    display: none;
}

/* The long GDPR paragraph core prints above the terms checkbox — replaced
   by the shorter checkbox text itself (see the
   woocommerce_checkout_terms_and_conditions_checkbox_text filter in
   functions.php), so this would otherwise duplicate it. */
.woocommerce-privacy-policy-text {
    display: none;
}

.woocommerce-terms-and-conditions-wrapper {
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.5;
    color: #555;
}

.woocommerce-terms-and-conditions-wrapper .input-checkbox {
    width: 17px;
    height: 17px;
    accent-color: var(--sl-red);
    margin-right: 8px;
}

.woocommerce-terms-and-conditions-wrapper a {
    color: var(--sl-red);
    font-weight: 600;
}

/* Core WooCommerce's own stylesheet turns an invalid field's <label> red
   using its own "--wc-red" variable, not this theme's brand red — bring
   it in line with the rest of the site's error styling. */
.woocommerce form .form-row.woocommerce-invalid label {
    color: var(--sl-red);
}

/* checkout.js inserts this inline right under the terms checkbox
   ("Kérjük az Általános Szerződési Feltételek elolvasását és
   elfogadását...") when placing an order without accepting it — the
   checkbox itself already gets an invalid/error style, so this redundant
   text is hidden rather than shown twice. */
.checkout-inline-error-message {
    display: none;
}

/* Core WooCommerce's own stylesheet (assets/css/woocommerce.css) styles
   the #payment box with a light purple tint/radius and gives every
   div.form-row inside it 1em of padding — leftover classic-checkout
   theming our fully custom cards/rows already replace. Neutralize it so
   nothing but our own design shows through. */
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
    background: transparent;
    border-radius: 0;
}

#add_payment_method #payment div.form-row,
.woocommerce-cart #payment div.form-row,
.woocommerce-checkout #payment div.form-row {
    padding: 0;
}

#payment .form-row.place-order {
    margin-top: 0;
}

abbr.required {
    display: none;
}

/* Same core stylesheet also gives every .form-row sitewide a default
   3px padding + 6px bottom margin — our own grid/flex "gap" spacing
   (.sl-checkout-field-grid, .sl-checkout-main, etc.) already accounts for
   spacing explicitly, so this default just adds inconsistent extra
   padding on top of it. */
.woocommerce form .form-row {
    padding: 0;
    margin: 0;
}

#place_order {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 54px !important;
    background: var(--sl-red) !important;
    color: var(--sl-bg-white) !important;
    border-radius: 10px !important;
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    font-size: 15.5px !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    margin-top: 14px !important;
    transition: background var(--sl-duration-base) var(--sl-ease-standard) !important;
}

#place_order:hover,
#place_order:focus,
#place_order:active {
    background: var(--sl-red-hover) !important;
    color: var(--sl-bg-white) !important;
    outline: none !important;
    box-shadow: none !important;
}

#place_order.disabled,
#place_order:disabled {
    background: var(--sl-border-medium) !important;
    color: var(--sl-grey-400) !important;
    cursor: default !important;
}

.sl-checkout-ssl-note {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12.5px;
    color: #8a8a8a;
}

.sl-checkout-ssl-note svg {
    width: 15px;
    height: 15px;
    color: var(--sl-status-success);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .sl-checkout-grid {
        grid-template-columns: 1fr;
    }
    .sl-checkout-summary {
        position: static;
        /* Was a slim 400px sidebar with generous padding; full-width on
           tablet, the same padding looks oversized relative to its
           content (same treatment as .sl-cart-summary). */
        padding: 22px;
    }
}

@media (max-width: 640px) {
    .sl-checkout-field-grid {
        grid-template-columns: 1fr;
    }
    .sl-checkout-field-grid .form-row-wide {
        grid-column: auto;
    }

    /* Shipping/payment method rows: title+meta vs. price/logo can crowd
       each other at phone widths — let them wrap onto their own lines
       instead of clipping/overlapping. */
    #shipping_method label {
        flex-wrap: wrap;
        gap: 8px 14px;
    }
    .sl-shipping-method-price {
        font-size: 13.5px;
    }

    /* Same item-row treatment as the cart page's .sl-cart-item — media
       shrinks so name/variant/price all stay comfortably legible. */
    .sl-checkout-review-media {
        width: 44px;
        height: 44px;
    }
    .sl-checkout-review-name {
        font-size: 13.5px;
    }
    .sl-checkout-review-total {
        font-size: 13.5px;
    }

    .sl-cart-coupon-btn {
        padding: 0 14px !important;
    }
}

/* ==========================================================================
   SAFE LASER ORDER CONFIRMATION PAGE — ported from
   Order confirmation.dc.html. Reuses .sl-checkout-page/-steps-wrap/-card/
   -back (checkout) and .sl-checkout-review-* (review-order.php) as-is;
   only the parts with no checkout equivalent (success card, "what
   happens next" timeline, the 2-card grid) get their own classes here.
   ========================================================================== */
.sl-confirmation-content {
    max-width: var(--sl-container-max);
    margin: 0 auto;
    padding: clamp(20px, 3vw, 32px) var(--sl-gutter) clamp(48px, 6vw, 80px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sl-confirmation-success {
    text-align: center;
    padding: clamp(32px, 4vw, 52px);
}

.sl-confirmation-success h1 {
    margin: 0;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.sl-confirmation-success p {
    margin: 14px auto 0;
    max-width: 460px;
    font-size: 16px;
    line-height: 1.6;
    color: #555;
}

.sl-confirmation-success p strong {
    color: var(--sl-text-primary);
}

.sl-confirmation-success-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(47, 158, 107, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.sl-confirmation-success-icon svg {
    width: 44px;
    height: 44px;
    color: var(--sl-status-success);
    stroke-width: 2.5;
}

.sl-confirmation-order-number {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    background: var(--sl-bg-light);
    border-radius: var(--sl-radius-full);
    padding: 11px 22px;
    font-size: 14.5px;
}

.sl-confirmation-order-number span {
    color: #8a8a8a;
}

.sl-confirmation-order-number strong {
    font-weight: 800;
    letter-spacing: 0.02em;
}

.sl-confirmation-failed h1 {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 800;
}

.sl-confirmation-failed p {
    margin: 0;
    color: #555;
    line-height: 1.6;
}

.sl-confirmation-failed-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.sl-confirmation-continue-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--sl-black);
    color: var(--sl-bg-white) !important;
    border-radius: 9px;
    padding: 15px 34px;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: 0.02em;
    transition: background var(--sl-duration-base) var(--sl-ease-standard);
}

/* Was #111 -> #000 on hover — nearly indistinguishable (same issue fixed
   earlier for the cart coupon button); brand red gives real contrast. */
.sl-confirmation-continue-btn:hover {
    background: var(--sl-red);
    color: var(--sl-bg-white);
}

.sl-confirmation-continue-btn svg {
    width: 18px;
    height: 18px;
}

.sl-confirmation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.sl-confirmation-timeline {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sl-confirmation-timeline-row {
    display: flex;
    gap: 14px;
}

.sl-confirmation-timeline-row svg {
    width: 22px;
    height: 22px;
    color: var(--sl-red);
    flex: none;
}

.sl-confirmation-timeline-title {
    font-weight: 600;
    font-size: 14.5px;
}

.sl-confirmation-timeline-desc {
    font-size: 13.5px;
    color: #8a8a8a;
    line-height: 1.5;
    margin-top: 2px;
}

.sl-confirmation-track-btn {
    margin-top: 24px;
    display: inline-flex;
    border: 1.5px solid var(--sl-border-medium);
    border-radius: 8px;
    padding: 11px 20px;
    color: #333;
}

.sl-confirmation-track-btn:hover {
    border-color: var(--sl-red);
    color: var(--sl-red);
}

.sl-confirmation-continue {
    text-align: center;
}

@media (max-width: 768px) {
    .sl-confirmation-grid {
        grid-template-columns: 1fr;
    }
}
.sl-profile-breadcrumb-wrap {
    max-width: var(--sl-container-max);
    margin: 0 auto;
    padding: clamp(24px, 3vw, 36px) var(--sl-gutter) 0;
}

.sl-profile-content {
    max-width: var(--sl-container-max);
    margin: 0 auto;
    padding-bottom: clamp(48px, 6vw, 80px);
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
}

.sl-profile-sidebar-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 4px 18px;
    border-bottom: 1px solid var(--sl-border-light);
    margin-bottom: 10px;
}

.sl-profile-avatar--sm {
    width: 44px;
    height: 44px;
    font-size: 16px;
    margin: 0;
    flex: none;
}

.sl-profile-sidebar {
    /* Matches every other section's card treatment (.sl-checkout-card) —
       this was missing entirely, leaving the nav floating bare on the
       page's own grey background instead of in its own white card. */
    background: var(--sl-bg-white);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
    padding: 16px;
    position: sticky;
    top: calc(var(--sl-header-height) + 56px);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Anchor-nav targets — without this, jumping to #sl-profile-orders etc.
   lands the section flush against the viewport top, hidden behind the
   sticky header. Offsets native/smooth-scroll landing by the same amount
   the sidebar itself sticks at, so the section's top is fully visible. */
#sl-profile-details,
#sl-profile-orders,
#sl-profile-addresses,
#sl-profile-devices {
    scroll-margin-top: calc(var(--sl-header-height) + 56px);
}

.sl-profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--sl-red);
    color: var(--sl-bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    flex: none;
}

.sl-profile-sidebar-name {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-profile-sidebar-role {
    font-size: 12px;
    color: var(--sl-text-secondary);
}

.sl-profile-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sl-profile-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-text-secondary);
    transition: background var(--sl-duration-base) var(--sl-ease-standard), color var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-profile-nav a:hover {
    background: var(--sl-bg-light);
    color: var(--sl-text-primary);
}

.sl-profile-nav a.is-active {
    background: var(--sl-red-tint-2);
    color: var(--sl-red);
}

.sl-profile-nav a svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.sl-profile-nav-divider {
    height: 1px;
    background: var(--sl-border-light);
    margin: 10px 4px;
}

.sl-profile-nav a.sl-profile-nav-logout {
    color: var(--sl-red);
}

.sl-profile-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.sl-profile-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.sl-profile-details-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.sl-profile-details-head .sl-profile-avatar {
    margin: 0;
    flex: none;
}

.sl-profile-details-name {
    font-size: 18px;
    font-weight: 700;
}

.sl-profile-details-since {
    font-size: 13px;
    color: var(--sl-text-secondary);
    margin-top: 2px;
}

.sl-profile-details-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.sl-profile-details-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--sl-text-primary);
}

.sl-profile-details-row svg {
    width: 17px;
    height: 17px;
    color: var(--sl-red);
    flex: none;
}

/* Bordered outline CTA (e.g. "Adatok szerkesztése") — also used on
   <button> triggers, so all:unset strips default button chrome first. */
.sl-profile-outline-btn {
    all: unset;
    box-sizing: border-box;
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--font-sans);
    border: 1.5px solid var(--sl-border-medium);
    border-radius: 8px;
    padding: 11px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: #333;
    transition: border-color var(--sl-duration-base) var(--sl-ease-standard), color var(--sl-duration-base) var(--sl-ease-standard);
}

/* !important: Hello Elementor's own reset.css sets a generic
   "[type=button]:hover,[type=submit]:hover,button:hover{background-color:
   #c36;color:#fff}" (and :focus) rule with the exact same specificity as
   a plain ".sl-profile-outline-btn:hover" class rule when the element has
   type="button" set (as these all do) — a tie decided only by stylesheet
   load order, which isn't guaranteed. !important removes the ambiguity. */
.sl-profile-outline-btn:hover,
.sl-profile-outline-btn:focus {
    border-color: var(--sl-red) !important;
    color: var(--sl-red) !important;
    background-color: transparent !important;
}

.sl-profile-outline-btn:active {
    border-color: var(--sl-red-deep) !important;
    color: var(--sl-red-deep) !important;
    background: var(--sl-red-tint-2) !important;
}

.sl-profile-outline-btn svg {
    width: 16px;
    height: 16px;
}

/* --- Section header row (title + top-right link, e.g. "Összes rendelés") --- */
.sl-profile-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.sl-profile-section-head .sl-profile-card-title {
    margin-bottom: 0;
}

.sl-profile-section-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sl-red);
}

.sl-profile-section-link:hover {
    color: var(--sl-red-deep);
}

.sl-profile-section-link svg {
    width: 15px;
    height: 15px;
}

/* --- CARE+ promo card (static — no backing membership system yet;
   copy/structure match the prototype's membership card exactly) --- */
.sl-profile-careplus {
    background: linear-gradient(150deg, var(--sl-red), var(--sl-red-deep));
    color: var(--sl-bg-white);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(147, 28, 20, 0.28);
    padding: clamp(22px, 2.4vw, 32px);
    display: flex;
    flex-direction: column;
}

.sl-profile-careplus-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sl-profile-careplus-badge {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.85;
}

.sl-profile-careplus-head svg {
    width: 26px;
    height: 26px;
}

.sl-profile-careplus h2 {
    margin: 14px 0 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.sl-profile-careplus-list {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sl-profile-careplus-list li {
    display: flex;
    gap: 10px;
    font-size: 14.5px;
    line-height: 1.5;
}

.sl-profile-careplus-list li span {
    font-weight: 800;
    flex: none;
}

.sl-profile-careplus-cta {
    margin-top: auto;
    padding-top: 22px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sl-bg-white);
}

.sl-profile-careplus-cta svg {
    width: 15px;
    height: 15px;
}

/* --- Orders --- */
/* Matches the prototype's column order exactly: Rendelés / Dátum / Termék
   / Összeg / Státusz — plus a trailing narrow column for the (real,
   functional) view-detail button the static prototype didn't need. */
.sl-profile-orders-head,
.sl-profile-order-row {
    display: grid;
    grid-template-columns: 90px 90px 1.4fr 130px 150px 28px;
    align-items: center;
    gap: 24px;
}

.sl-profile-orders-head {
    padding: 0 0 10px;
    font-size: 13px;
    color: var(--sl-text-secondary);
    border-bottom: 1px solid var(--sl-border-light);
}

.sl-profile-orders-head span:nth-child(4) {
    text-align: right;
}

.sl-profile-order-row {
    padding: 16px 0;
    border-bottom: 1px solid var(--sl-border-light);
}

.sl-profile-order-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sl-profile-order-number {
    font-weight: 700;
    font-size: 14px;
}

.sl-profile-order-date {
    font-size: 13px;
    color: var(--sl-text-secondary);
}

.sl-profile-order-items {
    min-width: 0;
    font-size: 13.5px;
    color: var(--sl-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-profile-order-total {
    font-weight: 700;
    font-size: 14px;
    text-align: right;
}

/* A real <button> (icon-only "view order" affordance) — reset away the
   browser's/WooCommerce's own default button chrome (border, background,
   padding, font) entirely rather than relying on inherited cosmetic
   properties that never actually touch those. */
.sl-profile-order-view {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    cursor: pointer;
    color: var(--sl-text-secondary);
}

/* !important — same reset.css tie as .sl-profile-outline-btn above. */
.sl-profile-order-view:hover,
.sl-profile-order-view:focus {
    color: var(--sl-red) !important;
    background-color: transparent !important;
}

.sl-profile-order-view:active {
    color: var(--sl-red-deep) !important;
}

.sl-profile-order-view svg {
    width: 18px;
    height: 18px;
}

.sl-status-pill {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 5px 12px;
    border-radius: var(--sl-radius-full);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    background: var(--sl-bg-light);
    color: var(--sl-text-secondary);
}

.sl-status-pill.is-success {
    background: rgba(47, 158, 107, 0.12);
    color: var(--sl-status-success);
}

.sl-status-pill.is-warning {
    background: rgba(201, 138, 22, 0.12);
    color: var(--sl-status-warning);
}

.sl-status-pill.is-danger {
    background: var(--sl-red-tint-2);
    color: var(--sl-status-danger);
}

.sl-profile-orders-empty {
    color: var(--sl-text-secondary);
    font-size: 14px;
}

/* --- Addresses --- */
.sl-profile-address-block {
    border: 1px solid var(--sl-border-light);
    border-radius: 12px;
    padding: 18px;
}

.sl-profile-address-block + .sl-profile-address-block {
    margin-top: 14px;
}

.sl-profile-address-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.sl-profile-address-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sl-text-secondary);
}

.sl-profile-address-edit {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: var(--sl-text-secondary);
}

/* !important — same reset.css tie as .sl-profile-outline-btn above. */
.sl-profile-address-edit:hover,
.sl-profile-address-edit:focus {
    color: var(--sl-red) !important;
    background-color: transparent !important;
}

.sl-profile-address-edit:active {
    color: var(--sl-red-deep) !important;
}

.sl-profile-address-text {
    font-size: 14px;
    line-height: 1.55;
    color: #333;
}

.sl-profile-address-text p {
    margin: 0;
}

/* --- Placeholder sections (Favorites — Devices now has real content
   below) --- */
.sl-profile-placeholder {
    text-align: center;
    padding: 32px 20px;
    color: var(--sl-text-secondary);
}

.sl-profile-placeholder svg {
    width: 32px;
    height: 32px;
    color: var(--sl-border-medium);
    margin-bottom: 10px;
}

.sl-profile-placeholder-title {
    font-weight: 600;
    color: var(--sl-text-primary);
    margin-bottom: 4px;
}

.sl-profile-placeholder-note {
    font-size: 13.5px;
}

/* --- Registered devices (Készülékeim) — sourced from Gravity Forms
   entries, see woocommerce/myaccount/my-account.php. Own dedicated
   classes (not reused from the orders/addresses lists on this same
   page), matching Member profile.dc.html's card-list treatment. --- */
.sl-profile-device-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

.sl-profile-device-row {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--sl-border-light);
    border-radius: 12px;
    padding: 18px;
}

.sl-profile-device-thumb {
    width: 66px;
    height: 66px;
    flex: none;
    border-radius: 10px;
    background: var(--sl-gradient-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sl-profile-device-thumb svg {
    width: 28px;
    height: 28px;
    color: var(--sl-bg-white);
}

.sl-profile-device-body {
    min-width: 0;
}

.sl-profile-device-name {
    font-weight: 700;
    font-size: 15px;
}

.sl-profile-device-serial {
    font-size: 13px;
    color: var(--sl-text-secondary);
}

.sl-profile-device-body .sl-status-pill {
    margin-top: 4px;
    gap: 6px;
}

.sl-profile-device-body .sl-status-pill svg {
    width: 14px;
    height: 14px;
}

.sl-profile-devices-empty {
    color: var(--sl-text-secondary);
    font-size: 14px;
    margin: 0 0 16px;
}

@media (max-width: 480px) {
    .sl-profile-device-row {
        flex-wrap: wrap;
    }
}

/* A 260px sidebar (vs. checkout's 400px order-summary aside, which
   reasonably needs the full 1024px tablet tier to itself) has plenty of
   room next to content down to a much narrower viewport — collapsing it
   this early made it stack full-width well before it needed to. */
@media (max-width: 768px) {
    .sl-profile-content {
        grid-template-columns: 1fr;
    }
    .sl-profile-sidebar {
        position: static;
    }
    .sl-profile-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .sl-profile-section-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .sl-profile-orders-head {
        display: none;
    }
    .sl-profile-order-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "number view"
            "date view"
            "items items"
            "total status";
        row-gap: 6px;
    }
    .sl-profile-order-number {
        grid-area: number;
    }
    .sl-profile-order-date {
        grid-area: date;
    }
    .sl-profile-order-items {
        grid-area: items;
        white-space: normal;
    }
    .sl-profile-order-total {
        grid-area: total;
        text-align: left;
    }
    .sl-status-pill {
        grid-area: status;
        justify-self: end;
    }
    .sl-profile-order-view {
        grid-area: view;
    }
}

.sl-profile-shell {
    font-family: var(--font-sans);
    color: var(--sl-text-primary);
    background: var(--sl-bg-light);
    /* Same reason as .sl-checkout-page: lets this page's grey background
       fill any leftover vertical space above a short-content footer. */
    flex: 1;
}

.sl-profile-card {
    background: var(--sl-bg-white);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
    padding: clamp(22px, 2.4vw, 32px);
}

.sl-profile-card-title {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sl-profile-card-title svg {
    width: 20px;
    height: 20px;
    color: var(--sl-red);
}

.sl-profile-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.sl-profile-field-grid .form-row {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* General-sibling (~), not adjacent-sibling (+): a hidden input, a
   do_action hook, or any other stray element sitting between two
   ".sl-profile-field-grid" rows would break a "+" match entirely, silently
   dropping the gap between them — "~" still applies as long as an earlier
   field-grid exists anywhere before this one in the same parent. */
.sl-profile-field-grid ~ .sl-profile-field-grid {
    margin-top: 14px;
}

.sl-profile-field-grid-single {
    grid-template-columns: 1fr;
}

.sl-profile-card .form-row {
    margin: 0;
}

.sl-profile-card .form-row.form-row-wide {
    grid-column: 1 / -1;
}

/* WooCommerce wraps each field in <p class="form-row"><label>…<input>. Same
   placeholder-only look as checkout's own address cards — visually hide the
   label (screen readers still read it) rather than removing it. */
.sl-profile-card label:not(.checkbox) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

.sl-profile-card .input-text,
.sl-profile-card select,
.sl-profile-card textarea {
    width: 100% !important;
    height: 50px !important;
    padding: 0 15px !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 9px !important;
    font-family: var(--font-sans) !important;
    font-size: 14.5px !important;
    background: var(--sl-bg-white) !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-profile-card select {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 40px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
}

.sl-profile-card .input-text:focus,
.sl-profile-card select:focus,
.sl-profile-card textarea:focus {
    border-color: var(--sl-red) !important;
    outline: none !important;
    box-shadow: none !important;
}

.sl-profile-submit-btn {
    all: unset !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 54px !important;
    margin-top: 24px !important;
    background: var(--sl-red) !important;
    color: var(--sl-bg-white) !important;
    border-radius: 10px !important;
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    font-size: 15.5px !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    outline: none !important;
    box-shadow: none !important;
}

.sl-profile-submit-btn:hover,
.sl-profile-submit-btn:focus,
.sl-profile-submit-btn:active {
    background: var(--sl-red-hover) !important;
    color: var(--sl-bg-white) !important;
    outline: none !important;
    box-shadow: none !important;
}

.sl-profile-submit-btn svg {
    width: 19px;
    height: 19px;
}

/* --- Order-detail modal: item rows + totals, same visual language as
   checkout's own .sl-checkout-review-*. --- */
.sl-profile-review-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid #ededed;
}

.sl-profile-review-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sl-profile-review-media {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    flex: none;
    background: var(--sl-gradient-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

.sl-profile-review-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sl-profile-review-qty {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #8a8a8a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sl-profile-review-body {
    flex: 1;
    min-width: 0;
}

.sl-profile-review-name {
    font-weight: 600;
    font-size: 14px;
}

.sl-profile-review-variant {
    font-size: 12.5px;
    color: #8a8a8a;
}

.sl-profile-review-total {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    flex: none;
}

.sl-profile-review-row {
    display: flex;
    justify-content: space-between;
    font-size: 14.5px;
    padding: 9px 0;
}

.sl-profile-review-value {
    font-weight: 600;
    color: var(--sl-text-primary);
}

.sl-profile-review-order-total {
    align-items: baseline;
    padding: 18px 0 6px;
}

.sl-profile-review-order-total span:first-child {
    font-size: 16px;
    font-weight: 700;
}

.sl-profile-review-total-value {
    font-size: 24px;
    font-weight: 800;
}

@media (max-width: 640px) {
    .sl-profile-field-grid {
        grid-template-columns: 1fr;
    }
    .sl-profile-review-media {
        width: 44px;
        height: 44px;
    }
    .sl-profile-review-name {
        font-size: 13.5px;
    }
    .sl-profile-review-total {
        font-size: 13.5px;
    }
}

/* ==========================================================================
   SAFE LASER — SEARCH RESULTS PAGE (page-kereses.php)
   ==========================================================================
   Ported to match "Search results.dc.html" exactly for the page chrome and
   the result list itself — literal prototype colors/sizes are used
   throughout rather than the closest --sl-* token where the two differ by
   more than a shade, same as the rest of this section. The one thing NOT
   built from that prototype: its category filter tabs (not requested) —
   product/page/post results here just render together in one list.
   ========================================================================== */
.sl-search-page {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 6vw, 80px);
    flex: 1;
}

.sl-search-page .sl-breadcrumbs {
    font-size: 13px;
    color: #8a8a8a;
    letter-spacing: 0.02em;
    margin-bottom: 18px;
}

.sl-search-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: var(--sl-bg-white);
    border-radius: 12px;
    padding: 6px 8px 6px 20px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
    margin: 20px 0 28px;
}

.sl-search-bar svg {
    width: 24px;
    height: 24px;
    color: #9a9a9a;
    flex: none;
}

.sl-search-input {
    flex: 1;
    min-width: 0;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    height: 48px;
    padding: 0 !important;
    font-family: var(--font-sans);
    font-size: 17px;
    color: #1a1a1a;
}

/* Shared between the "Keresés" submit <button> (no term yet) and the
   "Törlés" <a> (term present) — all:unset first strips the button's own
   browser default chrome (border/background/font) so both elements render
   identically. */
.sl-search-clear-btn {
    all: unset;
    box-sizing: border-box;
    flex: none;
    background: #f2f2f2;
    border-radius: 8px;
    height: 44px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    color: #555;
    transition: background var(--sl-duration-base) var(--sl-ease-standard);
}

/* !important — same reset.css tie every other type="button"/type="submit"
   element on this site has to guard against (design-tokens.css, several
   places above): Hello Elementor's own [type=submit]:hover/:focus rule
   ties in specificity with a plain single-class hover rule otherwise. */
.sl-search-clear-btn:hover,
.sl-search-clear-btn:focus {
    background: #e6e6e6 !important;
    color: #555 !important;
    outline: none !important;
    box-shadow: none !important;
}

.sl-search-count {
    margin: 24px 0 18px;
    font-size: 15px;
    color: #555;
}

.sl-search-count strong {
    color: #1a1a1a;
    font-weight: 700;
}

.sl-search-count-term {
    color: var(--sl-red);
    font-weight: 600;
}

/* Reuses the shop page's own ".sl-category-tabs"/".sl-tab-btn" pill
   component as-is (design-tokens.css, SAFE LASER WOOCOMMERCE SHOP STYLES) —
   only the count badge next to each tab's label is new here. */
.sl-search-page .sl-category-tabs {
    margin-bottom: 26px;
    flex-wrap: wrap;
}

.sl-tab-count {
    opacity: 0.6;
    margin-left: 4px;
}

/* --- Results: one white panel, a plain row per result (icon tile + title/
   category/description + trailing arrow) — not a card grid. --- */
.sl-search-results {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.sl-search-result-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    border-bottom: 1px solid #f2f2f2;
    color: #1a1a1a;
    transition: background var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-search-result-row:last-child {
    border-bottom: none;
}

.sl-search-result-row:hover,
.sl-search-result-row:focus {
    background: #faf5f5;
    color: #1a1a1a;
}

.sl-search-result-icon {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 11px;
    background: var(--sl-red-tint-2);
    color: var(--sl-red-deep);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sl-search-result-icon svg {
    width: 22px;
    height: 22px;
}

.sl-search-result-body {
    flex: 1;
    min-width: 0;
}

.sl-search-result-head {
    display: inline;
}

.sl-search-result-title {
    flex: 1;
    font-weight: 700;
    font-size: 16.5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-search-result-cat {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a8a8a;
    background: #f2f2f2;
    border-radius: var(--sl-radius-full);
    padding: 3px 10px;
    margin-left: 8px;
    flex: none;
}

.sl-search-result-desc {
    display: block;
    font-size: 13.5px;
    color: #777;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-search-result-arrow {
    width: 18px;
    height: 18px;
    color: #c0c0c0;
    flex: none;
    margin-left: 24px;
}

.sl-search-empty {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
    text-align: center;
    padding: clamp(48px, 7vw, 90px) 30px;
}

.sl-search-empty-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
}

.sl-search-empty-icon svg {
    width: 34px;
    height: 34px;
    color: #b8b8b8;
}

.sl-search-empty h2 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 500;
}

.sl-search-empty p {
    margin: 0 auto 26px;
    max-width: 400px;
    font-size: 15px;
    line-height: 1.6;
    color: #666;
}

.sl-search-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--sl-red);
    color: var(--sl-bg-white);
    border-radius: 8px;
    padding: 14px 30px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    transition: background var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-search-empty-cta:hover,
.sl-search-empty-cta:focus {
    background: var(--sl-red-hover);
    color: var(--sl-bg-white);
}

.sl-search-empty-cta svg {
    width: 17px;
    height: 17px;
}

@media (max-width: 480px) {
    .sl-search-result-cat {
        display: none;
    }
    .sl-search-bar {
        padding: 6px 6px 6px 16px;
    }
    .sl-search-clear-btn {
        padding: 0 14px;
    }
}

/* ==========================================================================
   SAFE LASER — BLOG POST SKIN (single.php) — ported from Blogbejegyzes.html
   ==========================================================================
   "sl-bp-*" ("blog post"), matching the existing "sl-pd-*" (product detail)
   page-type-prefix convention. Reuses the sitewide ".sl-breadcrumbs"/
   ".sl-bc-*" component as-is; everything else here is new/dedicated to this
   skin, including its own prose/typography block (no such class existed
   sitewide before this).
   ========================================================================== */
.sl-bp-page {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(32px, 4vw, 56px) var(--sl-gutter) clamp(56px, 7vw, 104px);
}

.sl-bp-header {
    text-align: left;
}

.sl-bp-eyebrow {
    font-size: var(--sl-fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sl-red);
    margin-bottom: 12px;
}

.sl-bp-title {
    margin: 0;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-weight: 500;
}

.sl-bp-dek {
    margin: 16px 0 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--sl-text-secondary);
}

.sl-bp-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding: 16px 0;
    border-top: 1px solid var(--sl-border-light);
    border-bottom: 1px solid var(--sl-border-light);
}

.sl-bp-meta-text {
    font-size: 13.5px;
    color: var(--sl-text-muted);
}

.sl-bp-meta-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Icon buttons (share/copy-link) — all:unset first strips default button
   chrome, same reset pattern used for every other icon-only button on
   this site. */
.sl-bp-icon-btn {
    all: unset;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sl-text-secondary);
    background: var(--sl-bg-light);
    transition: background var(--sl-duration-base) var(--sl-ease-standard), color var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-bp-icon-btn:hover,
.sl-bp-icon-btn:focus {
    background: var(--sl-red-tint-2) !important;
    color: var(--sl-red) !important;
    outline: none !important;
}

.sl-bp-icon-btn:active {
    background: var(--sl-red) !important;
    color: var(--sl-bg-white) !important;
}

.sl-bp-icon-btn svg {
    width: 16px;
    height: 16px;
}

/* The copy-link button renders both icons (single.php) — CSS swaps which
   one shows, so the JS click handler never has to re-run lucide on an
   element it already replaced with an <svg> at page load. */
.sl-bp-copy-btn .sl-bp-icon-success {
    display: none;
}

.sl-bp-copy-btn.is-copied .sl-bp-icon-default {
    display: none;
}

.sl-bp-copy-btn.is-copied .sl-bp-icon-success {
    display: block;
}

.sl-bp-copy-btn.is-copied {
    background: rgba(47, 158, 107, 0.12) !important;
    color: var(--sl-status-success) !important;
}

/* Wider than the 760px content column (up to 1000px, matching the
   prototype) — breaks out of .sl-bp-page's own max-width via the
   "100vw + negative-margin-via-50%-transform" technique, which centers on
   the viewport rather than the (narrower) parent column. Naturally
   responsive: on any viewport narrower than 1000px this just becomes
   100vw (full-bleed) instead, no extra media query needed. */
.sl-bp-hero {
    width: 100vw;
    max-width: 1000px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: clamp(28px, 3.5vw, 44px);
    border-radius: var(--sl-radius-xl);
    overflow: hidden;
}

.sl-bp-hero-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.sl-bp-hero-caption {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--sl-text-muted);
    text-align: center;
}

/* --- Prose (long-form article body) — ported from the prototype's inline
   ".prose" rules. Scoped under this class only, so it can't affect any
   other page's typography. --- */
/* Posts authored with Elementor (not the block editor) render raw
   Elementor section/container/widget markup via the_content() — this
   wrapper intentionally carries NO typography/list/link overrides so
   that content displays exactly as Elementor's own global kit styles
   render it, instead of fighting ".sl-bp-prose"'s p/h2/li/a rules. */
.sl-bp-content-raw {
    margin-top: clamp(32px, 4vw, 48px);
}

.sl-bp-prose {
    margin-top: clamp(32px, 4vw, 48px);
    font-size: 17px;
    line-height: 1.75;
    color: var(--sl-text-primary);
}

.sl-bp-prose > :first-child {
    margin-top: 0;
}

.sl-bp-prose p {
    margin: 0 0 24px;
}

.sl-bp-prose h2 {
    margin: 48px 0 20px;
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.sl-bp-prose h3 {
    margin: 36px 0 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

/* "ol" too — a "Numbered list" block (confirmed live: a 3-step routine
   rendered as <ol class="wp-block-list">) is just as valid editor content
   as a plain bulleted list, and without this the browser's native
   decimal counter ("1. 2. 3.") was rendering stacked together with the
   custom SVG bullet below, since only "ul" was ever reset here. */
.sl-bp-prose ul,
.sl-bp-prose ol {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Custom bullet — the skewed 3-bar brand mark (single.php injects a real
   inline SVG before each <li>, same mark already used elsewhere as
   ".sl-section-stripes"), not a plain CSS dot. Three nesting levels get
   progressively smaller icons/indents (level 1 = top-level list). */
.sl-bp-prose li {
    position: relative;
    padding-left: 36px;
}

.sl-bp-prose li li {
    padding-left: 30px;
}

.sl-bp-prose li li li {
    padding-left: 24px;
}

.sl-bp-bullet-icon {
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--sl-red);
    width: 24px;
    height: auto;
    aspect-ratio: 26 / 22;
}

.sl-bp-prose li li > .sl-bp-bullet-icon {
    top: 5px;
    width: 19px;
}

.sl-bp-prose li li li > .sl-bp-bullet-icon {
    top: 6px;
    width: 15px;
}

.sl-bp-prose strong {
    font-weight: 700;
    color: var(--sl-text-primary);
}

.sl-bp-prose a {
    color: var(--sl-red);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sl-bp-prose a:hover {
    color: var(--sl-red-hover);
}

/* Every other image/video/embed IN the body — as opposed to the hero
   image above the title — stays within the normal content width and gets
   the smaller "lg" radius (the hero alone is wider + "xl", per the
   explicit distinction between the two). Covers plain <img> (pasted
   directly, not necessarily inside a figure), native <video>, and both
   plain <iframe> embeds and WordPress's own responsive
   .wp-block-embed__wrapper (which needs the radius on the wrapper, not
   just the iframe, for the corners to actually clip since that wrapper is
   what controls the visible box via its padding-bottom aspect-ratio
   trick). No special PHP handling needed for any of this — it's exactly
   what the block editor's Image/Video/Embed blocks already output. */
.sl-bp-prose img,
.sl-bp-prose video,
.sl-bp-prose iframe {
    border-radius: var(--sl-radius-lg);
}

.sl-bp-prose .wp-block-embed__wrapper {
    border-radius: var(--sl-radius-lg);
    overflow: hidden;
}

/* Image blocks (WordPress's own figure.wp-block-image/figcaption markup —
   no special PHP handling needed, it's what the block editor already
   outputs for an Image block with a caption set). */
.sl-bp-prose figure.wp-block-image {
    margin: 40px 0;
}

.sl-bp-prose figure.wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
}

.sl-bp-prose figure.wp-block-image figcaption {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--sl-text-muted);
    text-align: center;
}

/* --- CTA banner (static, same on every post) — pixel-matched to the
   prototype's own CTA section/card/button, not the site's generic
   --sl-gradient-red token (that token's start color is --sl-red-bright,
   one shade off from the prototype's literal --sl-red start point) or the
   generic --sl-radius-* scale (the prototype's own 20px/9px radii don't
   land on an existing step). --- */
.sl-bp-cta-wrap {
    max-width: 720px;
    margin: clamp(36px, 4vw, 52px) auto 0;
}

.sl-bp-cta {
    background: linear-gradient(150deg, var(--sl-red), var(--sl-red-deep));
    color: var(--sl-bg-white);
    border-radius: 20px;
    padding: clamp(28px, 3vw, 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    box-shadow: 0 16px 40px rgba(147, 28, 20, 0.25);
}

.sl-bp-cta-copy {
    max-width: 400px;
}

.sl-bp-cta h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--sl-bg-white);
}

.sl-bp-cta p {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
}

.sl-bp-cta-btn {
    all: unset;
    box-sizing: border-box;
display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--sl-bg-white);
    color: var(--sl-red) !important;
    border-radius: 9px;
    padding: 15px 30px;
    /* !important — some other sitewide/Elementor rule with higher
       specificity was still winning over this plain single-class
       declaration, same class of conflict every other button on this site
       has had to guard against. */
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap;
    cursor: pointer;
}

.sl-bp-cta-btn svg {
    width: 18px;
    height: 18px;
}

/* !important — same reset.css tie every other button on this site has to
   guard against. Hover deliberately inverts to a near-black fill + white
   text (not a lighter/greyed version of the default state), exactly as
   the prototype specifies. */
.sl-bp-cta-btn:hover,
.sl-bp-cta-btn:focus {
    background: #111 !important;
    color: var(--sl-bg-white) !important;
    outline: none !important;
}

.sl-bp-cta-btn:active {
    background: var(--sl-pure-black) !important;
    color: var(--sl-bg-white) !important;
}

@media (max-width: 640px) {
    .sl-bp-meta {
        align-items: flex-start;
    }
}

/* ==========================================================================
   TEXT UTILITIES (introduced here, reusable sitewide — same intent as the
   generic modal component just below: a plain, page-agnostic ".sl-" class,
   not a page-prefixed one-off like ".sl-pd-eyebrow"/".sl-tf-eyebrow".)
   ========================================================================== */
/* Small grey/uppercase section-divider label — e.g. "Az Ön adatai" on the
   Készülék regisztráció (device registration) prototype. Distinct from a
   field's own <label> (dark, sits directly on an input): this marks a named
   group of fields within a form/section, not any one field. */
.sl-eyebrow-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sl-text-muted);
    margin-bottom: 14px;
}

/* --- Generic modal (introduced here, reusable sitewide) --- */
/* Author CSS always overrides the browser's own "[hidden]{display:none}"
   default regardless of specificity, so an unconditional "display:flex"
   here would force EVERY modal visible (stacked on top of each other)
   from page load, no matter its "hidden" attribute — only display as flex
   once "hidden" is actually absent. */
.sl-modal:not([hidden]) {
    display: flex;
}

.sl-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.sl-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.sl-modal-dialog {
    position: relative;
    background: var(--sl-bg-white);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    padding: clamp(24px, 3vw, 36px);
    max-width: 560px;
    width: 100%;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.sl-modal-title {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 500;
}

.sl-modal-close {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sl-text-secondary);
    background: var(--sl-bg-light);
}

/* !important — same reset.css tie as .sl-profile-outline-btn above. */
.sl-modal-close:hover,
.sl-modal-close:focus {
    background: var(--sl-red-tint-2) !important;
    color: var(--sl-red) !important;
}

.sl-modal-close:active {
    background: var(--sl-red) !important;
    color: var(--sl-bg-white) !important;
}

.sl-modal-close svg {
    width: 16px;
    height: 16px;
}

body.sl-modal-open {
    overflow: hidden;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    [class^="sl-"], [class*=" sl-"],
    [class^="sl-"] *, [class*=" sl-"] * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================================
   SAFE LASER — SINGLE SMART AUTH FORM (login/register page)
   ========================================================================== */
/* Own dedicated ".sl-auth-*" classes rather than reusing ".sl-checkout-card"/
   ".sl-profile-card" directly — same "each page/section gets its own
   classes" convention followed for every other card on this site, even
   though the visual language (white rounded card, soft shadow, red accents)
   matches. */
.sl-auth-page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 6vw, 80px) var(--sl-gutter);
    background: var(--sl-bg-light);
}

.sl-auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--sl-bg-white);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
    padding: clamp(28px, 3vw, 40px);
}

.sl-auth-title {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 500;
    text-align: center;
}

.sl-auth-note {
    margin: 0 0 24px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sl-text-secondary);
    text-align: center;
}

/* Field sizing/spacing intentionally mirrors the Gravity Forms brand theme
   (assets/css/gravity-forms-theme.css) field-by-field, so this form and any
   embedded GF form feel like the same design system rather than two
   independently-tuned ones. */
.sl-auth-form .form-row {
    margin: 0 0 16px;
}

.sl-auth-form label:not(.checkbox) {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--sl-text-primary);
    margin: 0 0 7px;
}

.sl-auth-form .input-text {
    width: 100% !important;
    box-sizing: border-box !important;
    height: 50px !important;
    padding: 0 15px !important;
    border: 1px solid var(--sl-border-medium) !important;
    border-radius: var(--sl-radius-md) !important;
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    color: var(--sl-text-primary) !important;
    background: var(--sl-bg-white) !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-auth-form .input-text:focus {
    border-color: var(--sl-red) !important;
    outline: none !important;
    box-shadow: none !important;
}

.woocommerce form .form-row {
    margin: 12px 0 0 0;
}

.woocommerce form .form-row label {
    line-height: 1;
}

.sl-auth-remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 20px 0 0 0;
}

.sl-auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sl-text-secondary);
    cursor: pointer;
}

.sl-auth-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--sl-red);
    flex: none;
}

.sl-auth-forgot-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--sl-text-secondary);
    transition: color var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-auth-forgot-link:hover,
.sl-auth-forgot-link:focus {
    color: var(--sl-red);
}

/* Same spacing convention as GF's own ".gform_footer { margin: 24px 0 0; }"
   (gravity-forms-theme.css) — this form has no separate footer wrapper
   around the button, so the top margin sits on the button itself instead. */
/* Base state deliberately NOT !important (matching this class's own
   original rule, not GF's): "all: unset" resets every longhand property —
   including margin — as an important declaration if "!important" is used
   here, which would then beat the plain "margin-top: 24px" below despite
   coming later in the same rule (importance always wins over source order
   for the same property). Only the interactive states below actually need
   !important, to beat Hello Elementor's reset.css tie on hover/focus/
   active — the base state has no competing rule to fight. */
.sl-auth-submit-btn {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    margin-top: 24px;
    height: 54px;
    background: var(--sl-red);
    color: var(--sl-bg-white);
    border-radius: var(--sl-radius-md);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 15.5px;
    letter-spacing: 0.02em;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    box-shadow: none;
}

/* !important — same reset.css tie every other type="button"/type="submit"
   element on this site has to guard against (design-tokens.css, several
   places above). */
.sl-auth-submit-btn:hover,
.sl-auth-submit-btn:focus,
.sl-auth-submit-btn:active {
    background: var(--sl-red-hover) !important;
    color: var(--sl-bg-white) !important;
    outline: none !important;
    box-shadow: none !important;
}

.sl-auth-message {
    font-size: 14px;
    color: var(--sl-text-secondary);
    line-height: 1.6;
}

/* ==========================================================================
   PARENT THEME OVERRIDES
   ========================================================================== */
/* Hello Elementor's own theme.css sets ".alignwide { margin-inline: -80px; }"
   unconditionally (no media query) — on any narrow viewport that pulls the
   block 80px past its container on each side, wider than the container has
   room for, causing horizontal overflow/scrollbar on the whole page. Drop
   the negative margin below tablet width so the block just stays flush
   with its normal container instead of widening at all. */
@media (max-width: 768px) {
    .alignwide {
        margin-inline: 0;
    }
}

/* Hello Elementor's own ".page-content" (the default-page/Gutenberg
   content wrapper — used by any plain WordPress page with no custom
   template of ours, e.g. /kerdoiv/'s Gravity Forms questionnaire page,
   which has a privacy-notice text block with a long plain URL below the
   form) has no word-wrapping safety net by default: a single long
   unbroken string can overflow past the container's right edge instead of
   wrapping, rather than this page/form's own styling.
   "break-word", not "anywhere" — "anywhere" lets the browser break ANY
   word at an arbitrary point whenever that happens to produce a tighter
   layout, even ordinary short words that would fit fine by just moving to
   the next line; "break-word" only breaks a word as a last resort, when
   it's too long to fit a line on its own — normal wrapping at spaces
   happens first, same visual fix for the actual overflow with none of
   that unnecessary mid-word breaking elsewhere. */
.page-content {
    overflow-wrap: break-word;
}

/* None of our custom woocommerce/*.php page overrides (cart/checkout/
   thankyou/my-account/shop) have their own page.php/template-parts
   override, so WordPress falls back to Hello Elementor's own
   template-parts/single.php to wrap the_content() (which is where the
   WooCommerce shortcode — and this theme's own get_header()/get_footer()
   calls inside it — actually runs). That wrapper's ".site-main" carries
   the parent theme's own responsive max-width (up to 1140px at the
   ≥1200px tier — narrower than this site's own --sl-container-max:1180px),
   constraining every one of these pages' content to a box narrower than
   what they were actually designed for, on top of a max-width our own
   page wrappers already apply themselves. Neutralize it specifically
   where one of our own page wrappers is present, rather than site-wide,
   so any untouched default page/post still gets the parent theme's own
   normal reading-width behavior. */
.site-main:has(.sl-checkout-page),
.site-main:has(.sl-shop-page),
.site-main:has(.sl-profile-shell),
.site-main:has(.sl-auth-page),
.site-main:has(.sl-search-page),
.site-main:has(.sl-bl-page) {
    max-width: none !important;
    width: 100% !important;
}

/* ==========================================================================
   SAFE LASER — BLOG LISTING PAGE (category.php / archive.php via
   template-parts/blog-listing.php) — ported from Blog.dc.html
   ==========================================================================
   "sl-bl-*" ("blog listing"), matching the "sl-bp-*" (blog post) and
   "sl-pd-*" (product detail) page-type-prefix convention. Reuses the
   sitewide ".sl-breadcrumbs"/".sl-bc-*" component as-is. Filter chips use
   the same --sl-radius-full / hover-state !important pattern used
   elsewhere in this file, since Hello Elementor's reset.css fights plain
   button/a hover rules via specificity.
   ========================================================================== */
.sl-bl-page {
    max-width: var(--sl-container-max);
    margin: 0 auto;
    padding: clamp(32px, 4vw, 56px) var(--sl-gutter) clamp(56px, 7vw, 104px);
}

.sl-bl-title {
    margin: 10px 0 0;
    font-size: var(--sl-fs-hero-h1);
    line-height: 1.04;
    letter-spacing: -0.022em;
    text-transform: uppercase;
}

.sl-bl-desc {
    margin: 16px 0 0;
    max-width: 560px;
    font-size: var(--sl-fs-intro);
    line-height: 1.6;
    letter-spacing: -0.011em;
    color: var(--sl-text-secondary);
}

/* Featured hero card */
.sl-bl-featured {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    margin-top: 32px;
    background: var(--sl-bg-white);
    border-radius: var(--sl-radius-xl);
    box-shadow: var(--sl-shadow-card-featured);
    overflow: hidden;
    transition: box-shadow var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-bl-featured:hover {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
}

.sl-bl-featured-media {
    display: block;
    min-height: 320px;
    background: var(--sl-bg-subtle);
}

.sl-bl-featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sl-bl-featured-body {
    padding: clamp(24px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sl-bl-featured-badges {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.sl-bl-badge-kiemelt {
    background: var(--sl-red);
    color: var(--sl-bg-white);
    border-radius: var(--sl-radius-full);
    padding: 5px 14px;
    font-size: var(--sl-fs-field-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.sl-bl-badge-cat {
    background: var(--sl-bg-light);
    color: var(--sl-text-secondary);
    border-radius: var(--sl-radius-full);
    padding: 5px 14px;
    font-size: var(--sl-fs-field-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.sl-bl-featured-title {
    margin: 0 0 12px;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.sl-bl-featured-title a {
    color: inherit;
    text-decoration: none;
}

.sl-bl-featured-desc {
    margin: 0 0 16px;
    color: var(--sl-text-secondary);
    line-height: 1.6;
}

/* Filter groups — "Téma" (tags) and "Típus" (categories) sit side by
   side, matching the prototype, and wrap to stacked rows on narrow
   viewports. */
.sl-bl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 48px;
}

.sl-bl-filter-group {
    flex: 1 1 260px;
}

.sl-bl-filter-caption {
    margin: 0 0 14px;
    font-size: var(--sl-fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sl-text-muted);
}

.sl-bl-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.sl-bl-chip {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sl-radius-full);
    padding: 11px 22px;
    font-family: inherit;
    font-size: var(--sl-fs-button);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid var(--sl-border-light);
    background: var(--sl-bg-white);
    color: var(--sl-text-primary);
    transition: background var(--sl-duration-base) var(--sl-ease-standard), border-color var(--sl-duration-base) var(--sl-ease-standard), color var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-bl-chip:hover,
.sl-bl-chip:focus {
    border-color: var(--sl-grey-400) !important;
    background: var(--sl-bg-white) !important;
    color: var(--sl-text-primary) !important;
    outline: none !important;
    box-shadow: none !important;
}

.sl-bl-chip.is-active,
.sl-bl-chip.is-active:hover {
    border-color: var(--sl-red) !important;
    background: var(--sl-red) !important;
    color: var(--sl-bg-white) !important;
}

.sl-bl-count {
    margin: 18px 0 0;
    color: var(--sl-text-muted);
    font-size: 14px;
}

.sl-bl-count strong {
    color: var(--sl-text-primary);
}

/* Grid */
.sl-bl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 24px;
}

.sl-bl-grid > * {
    min-width: 0;
}

.sl-bl-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 56px 20px;
    color: var(--sl-text-muted);
    font-size: 15px;
}

.sl-bl-card {
    background: var(--sl-bg-white);
    border-radius: var(--sl-radius-lg);
    box-shadow: var(--sl-shadow-card);
    overflow: hidden;
    transition: box-shadow var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-bl-card:hover {
    box-shadow: var(--sl-shadow-hover);
}

.sl-bl-card-media {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--sl-bg-subtle);
}

.sl-bl-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sl-bl-card-body {
    padding: 22px;
}

.sl-bl-card-eyebrow {
    font-size: var(--sl-fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-red);
    margin-bottom: 8px;
}

.sl-bl-card-title {
    margin: 0 0 8px;
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: -0.011em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sl-bl-card-title a {
    color: inherit;
    text-decoration: none;
}

.sl-bl-card-desc {
    margin: 0 0 14px;
    color: var(--sl-text-secondary);
    font-size: 14.5px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sl-bl-meta {
    font-size: 13px;
    color: var(--sl-text-muted);
}

.sl-bl-grid[aria-busy="true"] {
    opacity: 0.5;
    pointer-events: none;
}

.sl-bl-load-more-wrap {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.sl-bl-load-more-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sl-radius-full);
    padding: 14px 32px;
    font-family: inherit;
    font-size: var(--sl-fs-button);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid var(--sl-red);
    background: var(--sl-bg-white);
    color: var(--sl-red);
    transition: background var(--sl-duration-base) var(--sl-ease-standard), color var(--sl-duration-base) var(--sl-ease-standard);
}

.sl-bl-load-more-btn:hover,
.sl-bl-load-more-btn:focus {
    background: var(--sl-red) !important;
    color: var(--sl-bg-white) !important;
    outline: none !important;
}

.sl-bl-load-more-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

@media (max-width: 1024px) {
    .sl-bl-featured {
        grid-template-columns: 1fr;
    }
    .sl-bl-featured-media {
        min-height: 240px;
    }
    .sl-bl-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .sl-bl-grid {
        grid-template-columns: 1fr;
    }
}