/* ============================================================================
 * מבצעי השבוע — שכבת עיצוב מודרנית: שכבת CSS בלבד.
 *
 * חוק ברזל: אין כאן שינוי מבנה ואין הסתרה של אף אלמנט תפקודי.
 *   .aio-wd-modern  = עיצוב הכרטיס — משותף לדף המבצעים ולקרוסלה בדף הבית.
 *   .aio-wd-page    = הדף הייעודי בלבד (Hero, גריד, מצבים, עימוד).
 * ה-DOM של הכרטיס זהה לגריד הראשי, ולכן ajax-cart / +- / incart / שעון
 * היסטוריית ההזמנות ממשיכים לעבוד כרגיל.
 * ========================================================================== */

:root {
    --aio-wd-font: "Assistant", "Heebo", "Rubik", "Segoe UI", -apple-system, sans-serif;
    --aio-wd-ink: #0d1b3e;
    --aio-wd-accent: #6d28d9;
    --aio-wd-deal: #c81e4a;
}

.aio-wd-page {
    direction: rtl;
    max-width: 1440px;
    margin: 0 auto;
    padding: 8px 16px 48px;
    font-family: var(--aio-wd-font);
}

.aio-wd-page *,
.aio-wd-page *::before,
.aio-wd-page *::after { box-sizing: border-box; }

/* כותרת העמוד של התבנית מוסתרת כאן בלבד — ה-Hero הוא הכותרת של הדף.
   (אם התבנית שלכם בכלל לא מציגה כותרת, הכלל פשוט לא עושה כלום.) */
body.aio-wd-deals-page .page-header { display: none; }

/* ------------------------------------------------------------------ Hero */
.aio-wd-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 32px 36px;
    margin: 0 0 30px;
    border-radius: 26px;
    background: linear-gradient(125deg, #0d1b3e 0%, #3a1c6e 55%, #5a2288 100%);
    color: #fff;
    font-family: var(--aio-wd-font);
    box-shadow: 0 18px 40px -22px rgba(13, 27, 62, .75);
}

.aio-wd-hero::after {
    content: "";
    position: absolute;
    inset-inline-start: -60px;
    top: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 218, 102, .28) 0%, rgba(255, 218, 102, 0) 70%);
    pointer-events: none;
}

.aio-wd-hero-text { position: relative; z-index: 2; }

.aio-wd-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 218, 102, .18);
    border: 1px solid rgba(255, 218, 102, .45);
    color: #ffda66;
}

.aio-wd-hero-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffda66;
    box-shadow: 0 0 0 0 rgba(255, 218, 102, .7);
    animation: aio-wd-pulse 2s infinite;
}

@keyframes aio-wd-pulse {
    70%  { box-shadow: 0 0 0 8px rgba(255, 218, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 218, 102, 0); }
}

.aio-wd-page .aio-wd-hero-title {
    margin: 14px 0 8px;
    font-family: var(--aio-wd-font);
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.1;
    color: #fff;
}

.aio-wd-hero-sub {
    margin: 0;
    font-family: var(--aio-wd-font);
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, .82);
    max-width: 48ch;
}

.aio-wd-hero-count {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 210px;
    padding: 16px 24px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    font-family: var(--aio-wd-font);
    text-align: center;
}

.aio-wd-hero-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
}

.aio-wd-hero-num {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.05;
    color: #ffda66;
}

/* ------------------------------------------------------------- Page grid */
.aio-wd-modern .oops.aio-wd-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: 20px;
    align-items: stretch;
    float: none;
    width: 100%;
}

.aio-wd-modern .oops.aio-wd-page-grid > .product.prodi {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* ============================== כרטיס מודרני (דף + קרוסלה) ================ */
.aio-wd-modern .product.prodi {
    display: flex !important;
    flex-direction: column;
    position: relative;
    padding: 14px 14px 16px;
    border: 1px solid rgba(17, 24, 39, .07);
    border-radius: 20px;
    background: #fff;
    font-family: var(--aio-wd-font);
    box-shadow: 0 6px 18px -12px rgba(17, 24, 39, .35);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.aio-wd-modern .product.prodi:hover {
    transform: translateY(-4px);
    border-color: rgba(90, 34, 136, .25);
    box-shadow: 0 18px 34px -18px rgba(17, 24, 39, .45);
}

/* בסל — נשאר צהוב, בגרסה נקייה יותר */
.aio-wd-modern .product.prodi.incart {
    background: linear-gradient(180deg, #fffdf0 0%, #fff6cd 100%) !important;
    border-color: #f0c419 !important;
    box-shadow: 0 10px 26px -16px rgba(240, 196, 25, .9);
}

/* ------------------------------------------------------------- Card media */
.aio-wd-modern .product.prodi .product-link {
    min-height: 0 !important;
    display: block;
    text-decoration: none;
    color: inherit;
}

.aio-wd-modern .product.prodi .theImage {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 8px;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.aio-wd-modern .product.prodi .theImage img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: transform .25s ease;
}

.aio-wd-modern .product.prodi:hover .theImage img { transform: scale(1.04); }

.aio-wd-modern .product.prodi h3 {
    margin: 12px 0 8px;
    font-family: var(--aio-wd-font);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    color: #111827;
    text-align: start;
}

/* ------------------------------------------------------------- Card price */
.aio-wd-modern .product.prodi .price {
    justify-content: flex-start;
    align-items: baseline;
    margin: 0 0 12px;
    font-size: 19px;
    font-weight: 800;
    color: var(--aio-wd-ink);
}

.aio-wd-modern .product.prodi .price del { font-size: .7em; font-weight: 500; color: #9ca3af; }
.aio-wd-modern .product.prodi .price ins { text-decoration: none; color: var(--aio-wd-deal); }

/* ----------------------------------------------------------- Card actions */
/* דוחף את אזור הפעולה לתחתית הכרטיס כדי שכל הכרטיסים ייראו מיושרים */
.aio-wd-modern .product.prodi input.qty {
    margin-top: auto;
    width: 100% !important;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f9fafb;
    font-family: var(--aio-wd-font);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    color: #111827;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.aio-wd-modern .product.prodi input.qty:focus {
    outline: none;
    border-color: var(--aio-wd-accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}

.aio-wd-modern .product.prodi .ajax_add_to_cart_button {
    width: 100%;
    height: 46px;
    margin-top: 10px;
    padding: 0 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #6d28d9 0%, #8b46e0 100%);
    color: #fff;
    font-family: var(--aio-wd-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 46px;
    cursor: pointer;
    box-shadow: 0 10px 20px -12px rgba(109, 40, 217, .95);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.aio-wd-modern .product.prodi .ajax_add_to_cart_button:hover:not(:disabled) {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 14px 24px -12px rgba(109, 40, 217, 1);
}

.aio-wd-modern .product.prodi .ajax_add_to_cart_button:disabled { opacity: .65; cursor: default; }

.aio-wd-modern .product.prodi .counter {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.aio-wd-modern .product.prodi .counter button {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    background: #f3f4f6;
    color: #374151;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}

.aio-wd-modern .product.prodi .counter button:hover {
    background: var(--aio-wd-accent);
    border-color: var(--aio-wd-accent);
    color: #fff;
}

.aio-wd-modern .product.prodi .counter button:active { transform: scale(.92); }

.aio-wd-modern .product.prodi .remove-from-cart-button {
    width: 100%;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #f1d1da;
    border-radius: 10px;
    background: #fff;
    color: #b91c4c;
    font-family: var(--aio-wd-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.aio-wd-modern .product.prodi .remove-from-cart-button:hover { background: #fdf2f5; }

/* מגבלת כמות / "מנה" */
.aio-wd-modern .product.prodi .height,
.aio-wd-modern .product.prodi .aio-wd-limit {
    align-self: flex-start;
    margin-top: 10px;
    padding: 4px 11px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 12px;
    font-weight: 600;
}

/* ----------------------------------------------------------- Card badges */
/* תווית החיסכון — קלאסית ועדינה: גלולה לבנה עם טיפוגרפיה בגוון המבצע */
.aio-wd-modern .product.prodi .aio-wd-badge {
    top: 12px;
    left: 12px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(200, 30, 74, .28);
    color: var(--aio-wd-deal);
    font-family: var(--aio-wd-font);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .2px;
    box-shadow: 0 4px 12px -5px rgba(17, 24, 39, .3);
}

.aio-wd-modern .product.prodi .aio-wd-badge.is-generic {
    direction: rtl;
    font-size: 12px;
    font-weight: 700;
}

.aio-wd-modern .product.prodi .aio-wd-days {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(13, 27, 62, .88);
    color: #fff;
    font-family: var(--aio-wd-font);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.aio-wd-modern .product.prodi .aio-wd-days.is-last {
    background: linear-gradient(135deg, #e11d48 0%, #f97316 100%);
}

/* השעון של היסטוריית ההזמנות — לא נוגעים בעיצובו, רק מוודאים שהוא מעל הכרטיס */
.aio-wd-modern .product.prodi .watch-button { z-index: 6; }

/* ==================================== קרוסלה בדף הבית (אותו כרטיס) ======== */
.aio-wd-carousel-wrap.aio-wd-modern { font-family: var(--aio-wd-font); }

.aio-wd-carousel-wrap.aio-wd-modern .aio-wd-carousel-title {
    font-family: var(--aio-wd-font);
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--aio-wd-ink);
    margin-bottom: 18px;
}

.aio-wd-carousel-wrap.aio-wd-modern .aio-wd-carousel-title::after {
    content: "";
    display: block;
    width: 62px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffda66, #f0a500);
}

/* מרווח פנימי כדי שה-hover וה-shadow לא ייחתכו ע"י ה-overflow של הפס */
.aio-wd-carousel-wrap.aio-wd-modern .aio-wd-carousel {
    gap: 20px;
    padding: 14px 6px 20px;
}

.aio-wd-carousel-wrap.aio-wd-modern .aio-wd-carousel > .product { width: 244px; }

.aio-wd-carousel-wrap.aio-wd-modern .aio-wd-arrow {
    width: 44px;
    height: 44px;
    background: #fff;
    color: var(--aio-wd-ink);
    border: 1px solid rgba(17, 24, 39, .08);
    box-shadow: 0 10px 22px -12px rgba(17, 24, 39, .6);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.aio-wd-carousel-wrap.aio-wd-modern .aio-wd-arrow:hover {
    background: #ffda66;
    transform: translateY(-50%) scale(1.06);
}

/* ------------------------------------------------------- Empty / states */
.aio-wd-state {
    text-align: center;
    padding: 56px 24px;
    border: 1px dashed #dfe3ec;
    border-radius: 24px;
    background: linear-gradient(180deg, #fbfbfe 0%, #f5f6fb 100%);
    font-family: var(--aio-wd-font);
}

.aio-wd-state-icon { font-size: 44px; line-height: 1; margin-bottom: 12px; }
.aio-wd-page .aio-wd-state h3 { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: #111827; }
.aio-wd-state p { margin: 0 0 20px; color: #6b7280; font-size: 15px; }

.aio-wd-state-btn {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6d28d9 0%, #8b46e0 100%);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 12px 22px -14px rgba(109, 40, 217, 1);
}

/* ------------------------------------------------------------ Pagination */
.aio-wd-page .aio-wd-page-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

.aio-wd-page .aio-wd-page-nav .page-numbers {
    min-width: 38px;
    padding: 8px 12px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #374151;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
}

.aio-wd-page .aio-wd-page-nav .page-numbers.current { background: #ffda66; color: var(--aio-wd-ink); }

/* ----------------------------------------------------------- Responsive */
@media (max-width: 782px) {
    .aio-wd-hero { padding: 24px; border-radius: 20px; }
    .aio-wd-hero-count { min-width: 100%; padding: 12px 18px; }
    .aio-wd-hero-num { font-size: 34px; }
}

@media (max-width: 600px) {
    .aio-wd-page { padding: 4px 12px 36px; }
    .aio-wd-modern .oops.aio-wd-page-grid {
        grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
        gap: 12px;
    }
    .aio-wd-modern .oops.aio-wd-page-grid > .product.prodi { padding: 10px 10px 12px; border-radius: 16px; }
    .aio-wd-modern .product.prodi h3 { font-size: 13px; margin: 8px 0 6px; }
    .aio-wd-modern .product.prodi .price { font-size: 16px; }
    .aio-wd-modern .product.prodi input.qty { height: 40px; }
    .aio-wd-modern .product.prodi .ajax_add_to_cart_button { height: 42px; line-height: 42px; font-size: 14px; }
    .aio-wd-carousel-wrap.aio-wd-modern .aio-wd-carousel > .product { width: 190px; }
}