/* OLIVER-AMAZING-SECTION-V1 — dynamic admin-managed section */

.amazing-section {
    --amazing-bg-start: #ff2d55;
    --amazing-bg-end: #d81b3f;
    --amazing-text: #ffffff;
    position: relative;
    margin: 32px auto;
    max-width: 1400px;
    padding: 0;
    background: linear-gradient(135deg, var(--amazing-bg-start), var(--amazing-bg-end));
    color: var(--amazing-text);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.amazing-inner {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 340px;
}

/* Right rail (in RTL, actually right side) */
.amazing-rail {
    flex: 0 0 240px;
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 14px;
}

.amazing-rail-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    font-weight: 900;
    opacity: 0.95;
}

.amazing-rail-title {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--amazing-text);
}

.amazing-rail-subtitle {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.9;
    line-height: 1.5;
}

.amazing-timer {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    letter-spacing: 0.5px;
    direction: ltr;
}

.amazing-timer span[class^="timer-"] {
    display: inline-flex;
    min-width: 26px;
    justify-content: center;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 5px;
    padding: 2px 4px;
}

.amazing-timer-sep {
    opacity: 0.7;
    padding: 0 1px;
}

.amazing-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: #ffffff;
    color: #d81b3f;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    transition: transform 0.15s ease;
    margin-top: 6px;
}

.amazing-view-all:hover {
    transform: translateY(-1px);
    color: #d81b3f;
    text-decoration: none;
}

/* Left product scroll area */
.amazing-track-wrap {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 8px;
    min-width: 0;
}

.amazing-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 8px 4px;
    width: 100%;
}

.amazing-track::-webkit-scrollbar {
    display: none;
}

.amazing-card {
    flex: 0 0 200px;
    background: #ffffff;
    border-radius: 14px;
    padding: 10px;
    text-decoration: none;
    color: #1a1a1a;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.amazing-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    color: #1a1a1a;
    text-decoration: none;
}

.amazing-card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.amazing-card-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.amazing-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #d81b3f;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 8px;
    line-height: 1;
}

/* OLIVER-AMAZING-TITLE-CLIP-FIX-V1: removed fixed height (was 2.2em < 2*line-height),
   use min-height so 2 lines fit, -webkit-line-clamp caps at 2 */
.amazing-card-title {
    font-size: 0.78rem;
    line-height: 1.4;
    margin: 10px 0 6px;
    min-height: 2.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #1a1a1a;
}

.amazing-card-prices {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
    text-align: right;
}

.amazing-card-old {
    color: #b0b0b0;
    font-size: 0.72rem;
    text-decoration: line-through;
    font-weight: 500;
}

.amazing-card-new {
    color: #1a1a1a;
    font-size: 0.95rem;
    font-weight: 900;
}

.amazing-card-new .currency {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.7;
    margin-left: 3px;
}

/* Scroll arrows */
.amazing-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #d81b3f;
    border: none;
    font-size: 1.2rem;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}

.amazing-arrow:hover {
    transform: translateY(-50%) scale(1.1);
}

.amazing-arrow-prev {
    right: -6px;
}

.amazing-arrow-next {
    left: -6px;
}

/* Light-mode adjustment (admin controls colors, but subtle tweak for consistency) */
body.light-mode .amazing-section {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .amazing-section {
        margin: 20px 12px;
        border-radius: 16px;
    }
    .amazing-inner {
        flex-direction: column;
        min-height: auto;
    }
    .amazing-rail {
        flex: 0 0 auto;
        padding: 20px 16px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        flex-wrap: wrap;
        gap: 10px;
    }
    .amazing-rail-icon {
        width: 44px;
        height: 44px;
        font-size: 1.8rem;
    }
    .amazing-rail-title {
        font-size: 1.3rem;
    }
    .amazing-rail-subtitle {
        display: none;
    }
    .amazing-timer {
        font-size: 0.92rem;
        padding: 4px 10px;
    }
    .amazing-timer span[class^="timer-"] {
        min-width: 22px;
    }
    .amazing-view-all {
        padding: 7px 14px;
        font-size: 0.8rem;
        margin-top: 0;
    }
    .amazing-track-wrap {
        padding: 12px 6px;
    }
    .amazing-card {
        flex: 0 0 150px;
    }
    .amazing-arrow {
        display: none;
    }
}


/* ===== OLIVER-AMAZING-RESPONSIVE-V2 ===== */

/* Arrow hidden when track doesn't overflow (JS adds .is-hidden) */
.amazing-arrow.is-hidden {
    display: none !important;
}

/* Tablet: 769-1024px */
@media (max-width: 1024px) and (min-width: 769px) {
    .amazing-rail {
        flex: 0 0 200px;
        padding: 22px 16px;
        gap: 10px;
    }
    .amazing-rail-title {
        font-size: 1.4rem;
    }
    .amazing-rail-icon {
        width: 52px;
        height: 52px;
        font-size: 2rem;
    }
    .amazing-card {
        flex: 0 0 170px;
    }
    .amazing-track {
        gap: 12px;
    }
}

/* Small mobile: <480px */
@media (max-width: 480px) {
    .amazing-section {
        margin: 14px 6px;
        border-radius: 14px;
    }
    .amazing-rail {
        padding: 14px 12px;
        gap: 6px;
    }
    .amazing-rail-icon {
        width: 34px;
        height: 34px;
        font-size: 1.4rem;
    }
    .amazing-rail-title {
        font-size: 1.05rem;
    }
    .amazing-timer {
        font-size: 0.78rem;
        padding: 3px 7px;
        gap: 2px;
    }
    .amazing-timer span[class^="timer-"] {
        min-width: 19px;
        padding: 1px 3px;
    }
    .amazing-view-all {
        padding: 6px 11px;
        font-size: 0.72rem;
        gap: 4px;
    }
    .amazing-track-wrap {
        padding: 10px 4px;
    }
    .amazing-track {
        gap: 9px;
        padding: 5px 2px;
    }
    .amazing-card {
        flex: 0 0 132px;
        padding: 8px;
    }
    .amazing-card-title {
        font-size: 0.70rem;
        margin: 8px 0 4px;
    }
    .amazing-card-new {
        font-size: 0.82rem;
    }
    .amazing-card-old {
        font-size: 0.66rem;
    }
    .amazing-card-badge {
        font-size: 0.64rem;
        padding: 2px 6px;
    }
}

/* Very narrow: <360px */
@media (max-width: 360px) {
    .amazing-rail {
        padding: 12px 10px;
    }
    .amazing-rail-title {
        font-size: 0.95rem;
    }
    .amazing-timer {
        font-size: 0.72rem;
    }
    .amazing-card {
        flex: 0 0 122px;
    }
}


/* ===== OLIVER-AMAZING-RESPONSIVE-V3 ===== */
/* Bulletproof mobile + zoom-safe widths.
   Using width: calc(100% - Xpx) + margin: auto avoids parent
   width:auto + margin:12px interactions that overflow under page zoom.
   Outer wrapper contains any inner overflow from track/arrows. */

.amazing-outer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    display: block;
}

.amazing-section {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 1400px;
    margin: 32px auto;
}

.amazing-inner,
.amazing-rail,
.amazing-track-wrap,
.amazing-track {
    box-sizing: border-box;
    min-width: 0;
}

@media (max-width: 1024px) {
    .amazing-section {
        width: calc(100% - 24px);
        max-width: none;
        margin: 24px auto;
    }
}

@media (max-width: 768px) {
    .amazing-section {
        width: 100%;
        max-width: none;
        margin: 16px 0;
        border-radius: 0;
    }
    .amazing-inner {
        flex-direction: column;
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .amazing-section {
        width: 100%;
        max-width: none;
        margin: 12px 0;
        border-radius: 0;
    }
}


/* ===== OLIVER-AMAZING-DRAG-ONLY-V5 ===== */
/* Mask fade removed per user request — track fully opaque edge-to-edge */
.amazing-track {
    cursor: grab;
}
.amazing-track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
    -webkit-user-select: none;
}


/* ===== OLIVER-AMAZING-FULLBLEED-V7 ===== */
/* Bulletproof full-bleed: 100vw + calc(50% - 50vw) ignores ALL ancestor
   padding (.page-wrapper 6px + .main-container clamp(1rem,2.5vw,2rem)).
   Works regardless of parent structure. */
@media (max-width: 768px) {
    .amazing-outer {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        box-sizing: border-box;
    }
    .amazing-outer .amazing-section {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
    }
}


/* ===== OLIVER-AMAZING-V8 ===== */
/* 1. Move arrows inward so they don't get clipped by .amazing-outer overflow-x:hidden */
.amazing-arrow-prev { right: 8px; }
.amazing-arrow-next { left: 8px; }

/* 2. Mobile: remove side padding from track container so cards touch the section edges */
@media (max-width: 768px) {
    .amazing-track-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .amazing-track {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* ===== OLIVER-AMAZING-EDGE-SPACING-V9 ===== */
/* Mobile-only: flush right (start of RTL scroll), 12px gap left (end of RTL scroll).
   Squared corners on the outer edge of the first card so it visually touches the edge
   cleanly, despite the 14px border-radius on the card style. */
@media (max-width: 768px) {
    .amazing-track {
        padding-right: 0 !important;
        padding-left: 12px !important;
    }
    .amazing-track .amazing-card:first-child {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
}


/* ===== OLIVER-AMAZING-EDGE-SPACING-V10 ===== */
/* Symmetric 12px breathing room on both sides of the scroll track (mobile only).
   First card gets its rounded corners back — no longer flush against the edge. */
@media (max-width: 768px) {
    .amazing-track {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }
    .amazing-track .amazing-card:first-child {
        border-top-right-radius: 14px !important;
        border-bottom-right-radius: 14px !important;
    }
}


/* ===== OLIVER-AMAZING-ZOOM-FIX-V11 ===== */
/* Under documentElement.style.zoom, vw is NOT re-evaluated — it renders
   Z× too large. Use % + px (same units as surrounding layout) so section
   scales uniformly with rest of page under both browser and custom zoom.
   Default 22px = .page-wrapper 6px + .main-container 16px at typical mobile.
   JS overrides --amazing-bleed on load for wide mobile (641-768px). */
@media (max-width: 768px) {
    .amazing-outer {
        --amazing-bleed: 22px;
        width: calc(100% + (var(--amazing-bleed) * 2)) !important;
        max-width: none !important;
        margin-left: calc(var(--amazing-bleed) * -1) !important;
        margin-right: calc(var(--amazing-bleed) * -1) !important;
        box-sizing: border-box;
    }
}


/* ===== OLIVER-AMAZING-MASK-Y-V12 ===== */
/* Mobile-only vertical mask fade — top + bottom edges melt into page bg.
   Section has border-radius: 0 on mobile, so no corners to preserve.
   Content sits ~14-16px inside the edge, so 24px fade hits background only. */
@media (max-width: 768px) {
    .amazing-section {
        -webkit-mask-image: linear-gradient(to bottom,
            transparent 0px, #000 24px, #000 calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(to bottom,
            transparent 0px, #000 24px, #000 calc(100% - 24px), transparent 100%);
    }
}


/* ===== OLIVER-AMAZING-TALLER-MOBILE-V13 ===== */
/* Taller section background on mobile. Adds breathing room above the
   rail header and below the product track. Cards are NOT resized —
   only the section's own padding grows. */
@media (max-width: 768px) {
    .amazing-rail {
        padding-top: 32px !important;
        padding-bottom: 22px !important;
    }
    .amazing-track-wrap {
        padding-top: 14px !important;
        padding-bottom: 30px !important;
    }
}


/* ===== OLIVER-AMAZING-THEME-COLORS-V14 ===== */
/* body.light-mode redefines the same vars the base rule reads.
   Everything downstream (background gradient, color, buttons, timer,
   title, badge) inherits the light values automatically. */
/* ===== OLIVER-AMAZING-LIGHT-FIX-V15 ===== */
/* !important beats the inline style (which sets --amazing-bg-start etc. directly).
   Dropped the var(self) fallback — that was a cycle per CSS Variables spec.
   --amazing-bg-start-light is always set via inline style with |default: filter. */
body.light-mode .amazing-section {
    --amazing-bg-start: var(--amazing-bg-start-light) !important;
    --amazing-bg-end:   var(--amazing-bg-end-light)   !important;
    --amazing-text:     var(--amazing-text-light)     !important;
}
body.light-mode .amazing-rail-title,
body.light-mode .amazing-rail-subtitle,
body.light-mode .amazing-rail-icon {
    color: var(--amazing-text);
}
body.light-mode .amazing-view-all {
    background: var(--amazing-text);
    color: var(--amazing-bg-end);
}