/* ==========================================================================
   BookMe Catalog Stylesheet - Updated with Vertical Centering Fix & Inline Authors
   ========================================================================== */

div.products {
    margin-bottom: 50px;
    float: right;
}

    div.products > * {
        display: block;
        text-align: center;
    }

    /* כותרת המוצר בחלק העליון (פס אפור) */
    div.products > div > span.productTitle {
        display: block;
        text-align: center;
        padding: 3px 0px;
        background-color: #808080;
        margin-bottom: 5px;
        max-height: 28px;
        overflow: hidden; /* הגנה מפני חריגת טקסט */
    }

        div.products > div > span.productTitle > a {
            color: #fff !important;
            text-decoration: none;
            font-size: 17px;
        }

    /* מחירים */
    div.products > div > div.productPrice > span > span.officialPrice {
        font-size: smaller;
        text-decoration: line-through;
        font-style: italic;
    }

    /* מכולת תמונת המוצר - התיקון ליישור אנכי למרכז */
    div.products > div > div.productImage {
        min-height: 315px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center; /* יישור למרכז הגובה */
        align-items: center; /* יישור למרכז הרוחב */
    }

        /* הקישור העוטף את התמונה */
        div.products > div > div.productImage > a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            min-height: 315px; /* הבטחת שטח לחיצה מלא */
            text-decoration: none;
        }

            /* עיצוב התמונה עצמה */
            div.products > div > div.productImage > a > img {
                max-width: 300px;
                max-height: 400px;
                display: block;
                margin: 0 auto;
                height: auto;
               
            }

div.productPrice {
    margin: 10px 3px;
}

/* עיצוב שם המחבר מתחת לשם המוצר */
.author-title {
    background-color: transparent !important;
    margin-top: -3px;
    margin-bottom: 5px;
    min-height: 20px;
}

    .author-title a {
        color: #2c2c72 !important; /* כחול כהה לקישור המחבר */
        font-size: 14px;
        text-decoration: none;
        /* תיקון קריטי: דריסת ה-block וה-100% רוחב כדי שהמחברים יופיעו באותה שורה */
        display: inline !important;
        width: auto !important;
    }

        .author-title a:hover {
            text-decoration: underline;
        }

/* התאמות למובייל */
@media (max-width: 767px) {

    #products-filter-order-by {
        width: 50%;
    }

    .product-image-wrapper {     
        min-height: auto;
    }

    .products-group-container h1, .products-group-container .h1 {font-size: 27px;}

    div.products > div > div.productImage {
        min-height: 150px; /* גובה מותאם למסכים קטנים */
    }

        div.products > div > div.productImage > a {
            min-height: 150px;
        }

            div.products > div > div.productImage > a > img {
                max-width: 100%;
                max-height: 140px;
            }

    div.products {
        width: 50%;
        float: right;
    }
}

/* הגדרות קוביות מוצר (Product Cubes) */
.product-cube .productImage {
    height: unset !important;
}

.product-cube .productTitle {
    display: block;
    height: auto;
    text-align: center;
}

    .product-cube .productTitle a {
        text-align: center;
        /* הגדרה זו יצרה את הבעיה המקורית. הוספת ה-!important ל-author פותרת אותה מבלי לשבור עיצובים אחרים */
        display: block;
        width: 100%;
    }

.product-cube .productImage > a {
    position: static;
}

/* לחצן הוספה לסל */
.product-cube .productPrice .cart-btn2 {
    float: none;
    display: block;
    position: static;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    text-align: center;
    color: #2c2c72;
    font-weight: normal;
    border: 0.5px solid #2c2c72;
    padding: 5px;
    margin-top: 10px;
    transition: all 0.3s ease;
}

    .product-cube .productPrice .cart-btn2:hover {
        background: #2c2c72;
        color: #fff;
    }

    .product-cube .productPrice .cart-btn2 img {
        width: 20px;
        vertical-align: middle;
        margin-left: 5px;
    }

#products-filter-order-by, #products-filter-sub-category {
    width: 20%;
    border: 1px solid #d1d5db;
    border-radius: 50px;
    padding: 12px 20px;
    font-size: 15px;
    color: #333;
    background: #fff;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}


/* ==========================================================================
   Grid Float Snagging Fix - Responsive Clearfix
   פתרון קריסות שורה בגריד המבוסס על Floats (תקף למובייל, טאבלט ודסקטופ)
   מבטיח שאלמנטים יירדו שורה כראוי ללא קשר לגובה התוכן של האלמנט שלצידם.
   ========================================================================== */

/* מובייל: 2 מוצרים בשורה (col-xs-6). מנקה זליגה לכל פריט אי-זוגי (1, 3, 5...) */
@media (max-width: 767px) {
    .product-cube:nth-of-type(2n+1) {
        clear: both !important;
    }
}

/* טאבלט: 3 מוצרים בשורה (col-sm-4). מנקה זליגה לכל פריט ראשון בשלישייה (1, 4, 7...) */
@media (min-width: 768px) and (max-width: 991px) {
    .product-cube:nth-of-type(3n+1) {
        clear: both !important;
    }
    /* ביטול ניקוי קודם שהוחל במובייל ולא רלוונטי לטאבלט */
    .product-cube:nth-of-type(2n+1):not(:nth-of-type(3n+1)) {
        clear: none !important;
    }
}

/* דסקטופ: 4 מוצרים בשורה (col-md-3, col-lg-3). מנקה זליגה לכל פריט ראשון ברביעייה (1, 5, 9...) */
@media (min-width: 992px) {
    .product-cube:nth-of-type(4n+1) {
        clear: both !important;
    }
    /* ביטול חוקי ניקוי קודמים */
    .product-cube:nth-of-type(2n+1):not(:nth-of-type(4n+1)),
    .product-cube:nth-of-type(3n+1):not(:nth-of-type(4n+1)) {
        clear: none !important;
    }
}

/* ==========================================================================
   Mobile Pricing Proportions Fix (UI Refinement)
   התאמת פרופורציות של אזור המחירים למסכי מובייל (כאשר מוצגים שני מחירים במקביל)
   ========================================================================== */

@media (max-width: 767px) {

    /* 1. הקטנת המחיר הסופי (הכחול/הכהה) */
    .new-pricing-container .format-price {
        font-size: 16px !important; /* הוקטן מ-20px ליצירת שטח נשימה */
    }

        /* 2. הקטנת המחיר המקורי (האדום עם קו החצייה) לשמירה על יחס נכון מול המחיר החדש */
        .new-pricing-container .format-price del {
            font-size: 13px !important; /* הוקטן מ-16px */
            margin-left: 2px !important; /* צמצום המרווח האופקי למניעת חריגה מגבולות האלמנט */
            display: block;
        }

    /* 3. הקטנת הטקסט של כותרת הפורמט ("מודפס" / "דיגיטלי") */
    .new-pricing-container .format-title {
        font-size: 14px !important; /* הוקטן מ-16px לאיזון ויזואלי */
    }

        /* 4. הקטנת אייקוני ה-SVG של הפורמטים כדי שלא ייראו גסים ליד הטקסט המוקטן */
        .new-pricing-container .format-title svg {
            width: 14px !important;
            height: 14px !important;
        }

    /* 5. כוונון קו ההפרדה האנכי (Divider) להתאמה לגובה התוכן החדש */
    .new-pricing-container .price-divider {
        height: 35px !important; /* הוקטן מ-45px */
        margin: 0 4px !important; /* צמצום רווח עודף בין העמודות */
    }

    /* 6. מרווח עליון (Margin-Top) אופטימלי לקונטיינר המחירים כולו */
    .new-pricing-container {
        margin-top: 5px !important;
    }
}

/* ==========================================================================
   Mobile Badges Layout Redesign
   העברת התוויות אל מתחת לתמונה, פריסה ברוחב 100% והקטנת פונט ל-10px.
   מבוצע באמצעות ביטול המיקום האבסולוטי והחזרת המכולה לזרימת המסמך.
   ========================================================================== */

@media (max-width: 767px) {

    /* 1. איפוס מכולת התוויות (Container) */
    .product-cube .bottom-badges-container {
        position: static !important; /* ביטול הריחוף מעל התמונה */
        transform: none !important; /* ביטול המרכוז האבסולוטי */
        width: 100% !important;
        margin-top: 15px !important; /* מרווח עליון מהתמונה */
        margin-bottom: 5px !important; /* מרווח תחתון מכותרת המוצר */
        padding: 0 10px !important; /* מרווח נשימה קל מהשוליים (Padding) למניעת הידבקות לקצה המסך */
        box-sizing: border-box !important; /* מניעת זליגה מעבר לרוחב הקובייה */
    }

    /* 2. עיצוב אחיד לכל סוגי התוויות (מבצע, פופולארי, אזל במלאי) */
    .product-cube .shared-badge,
    .product-cube .badge-sale,
    .product-cube .badge-tavit,
    .product-cube .badge-out-of-stock {
        /*width: 100% !important;  רוחב מלא בהתאם לדרישה */
        max-width: 100% !important; /* דריסת fit-content אם קיים */
        font-size: 10px !important; /* הקטנת פונט קשיחה */
        padding: 5px 8px !important; /* הקטנת הריפוד הפנימי שיתאים לפונט הקטן ויחסוך גובה */
        border-radius: 20px !important; /* שמירה על פינות מעוגלות (Pill Shape) */
        box-sizing: border-box !important;
        white-space: normal !important; /* מאפשר שבירת שורה אם הטקסט ארוך במיוחד במובייל, מונע קריסת UI */
        line-height: 1.2 !important; /* ריווח שורות אופטימלי לפונט קטן */
    }

        /* 3. הבטחת הורשת צבע ופונט לקישורים בתוך התוויות (במידה ויש תגיות <a>) */
        .product-cube .shared-badge a,
        .product-cube .shared-badge p,
        .product-cube .shared-badge span {
            font-size: 10px !important;
            margin: 0 !important;
        }
}

/* ==========================================================================
   Mobile Filters Layout Fix
   הגדרת רוחב תיבות הסינון ל-50% במובייל, כולל טיפול בריווח למקרה של מספר תיבות
   ========================================================================== */

@media (max-width: 767px) {

    /* החלה על תיבת המיון ותיבת תת-הקטגוריות (במידה וקיימת) */
    #products-filter-order-by,
    #products-filter-sub-category {
        width: 50% !important; /* אכיפת רוחב 50% באופן הרמטי */
        display: inline-block !important; /* מאפשר לתיבות לשבת אחת ליד השנייה אם יש מקום */
        margin-bottom: 15px !important; /* מרווח תחתון למניעת הידבקות לאלמנטים שמתחת */
        box-sizing: border-box !important; /* מוודא שהרוחב כולל את הריפוד (Padding) והמסגרת */
    }
}

/* ==========================================================================
   Mobile Product Image 100% Width & Proportional Height
   הגדרת תמונת המוצר לרוחב 100% מהקובייה תוך שמירה על פרופורציות גובה טבעיות
   ========================================================================== */

@media (max-width: 767px) {

    /* 1. אכיפת רוחב מלא על התמונה וביטול מגבלת הגובה (140px) */
    div.products > div > div.productImage > a > img,
    .product-cube .productImage img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important; /* חישוב גובה אוטומטי בהתאם לרוחב (פרופורציה טבעית) */
        max-height: none !important; /* ביטול הגבלת הגובה הישנה שמונעת התרחבות */
        object-fit: contain !important; /* מוודא שהתמונה לא נחתכת */
        margin: 0 auto !important;
        display: block !important;
    }

    /* 2. איפוס הגבהים המינימליים של מכולות האב כדי שיעטפו את התמונה במדויק */
    div.products > div > div.productImage,
    div.products > div > div.productImage > a,
    .product-cube .product-image-wrapper {
        min-height: 255px !important; /* ביטול מינימום גובה קשיח (כמו 150px) */
        height: auto !important;
        display: block !important; /* ביטול Flex/מירכוז שמייצר שטחים ריקים מיותרים */
        padding-top: 0 !important; /* ביטול מרווחים עליונים עודפים אם קיימים */
    }
}

/* ==========================================================================
   Mobile Action Buttons Redesign (Cart & Favorite)
   הפרדת כפתורי העגלה והמועדפים במובייל - לב קבוע למעלה, עגלה ככפתור מלא למטה
   ========================================================================== */

@media (max-width: 767px) {

    /* 1. חשיפה קבועה של קונטיינר הכפתורים במובייל וביטול המיקום המאוגד */
    .product-cube .product-actions-container {
        position: static !important; /* שחרור מהתמונה לטובת פיצול המיקומים */
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* שחרור מעטפת התמונה כדי שהמיקומים האבסולוטיים יתייחסו לקוביית המוצר בשלמותה */
    .product-cube .product-image-wrapper {
        position: static !important;
    }

    /* 2. עיצוב כפתור המועדפים (לב) - קבוע בפינה הימנית העליונה */
    .product-cube .btn-heart-expand {
        position: absolute !important;
        top: 15px !important;
        right: 20px !important; /* התחשבות ב-Padding של העמודה */
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        border-radius: 50% !important; /* עיגול מושלם */
        z-index: 30 !important;
        box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important;
    }

        /* הקטנת האייקון של הלב שיתאים לגודל החדש */
        .product-cube .btn-heart-expand .icon-wrapper {
            width: 35px !important;
            height: 35px !important;
            min-width: 35px !important;
        }

            .product-cube .btn-heart-expand .icon-wrapper svg {
                width: 17px !important;
                height: 17px !important;
            }

        /* הסתרת טקסט "הוספה למועדפים" במובייל למראה נקי של אייקון בלבד */
        .product-cube .btn-heart-expand .btn-text {
            display: none !important;
        }

    /* 3. עיצוב כפתור הוספה לסל / בחירת פורמט - בתחתית הקובייה */

    /* יצירת שטח ריק בתחתית קוביית המוצר שיכיל את הכפתור מבלי להסתיר מחירים */
    .product-cube {
        padding-bottom: 55px !important;
    }

        .product-cube .btn-cart-expand {
            position: absolute !important;
            bottom: 5px !important; /* נצמד לתחתית הקובייה עם מרווח קל */
            left: 50% !important;
            transform: translateX(-50%) !important; /* מרכוז מדויק לאמצע */
            width: 90% !important; /* רוחב כמעט מלא לפי הסקיצה */
            height: 42px !important;
            border-radius: 25px !important; /* עיצוב Pill עגול לחלוטין בצדדים */
            background-color: #263a6c!important; /* כחול כהה (צבע המותג) */
            color: #ffffff !important;
            justify-content: center !important; /* יישור הטקסט לאמצע */
            z-index: 30 !important;
            box-shadow: none !important; /* הסרת צל לא רצוי */
        }

            /* ביטול אייקון העגלה - הצגת טקסט בלבד כפי שמופיע בסקיצה */
            .product-cube .btn-cart-expand .icon-wrapper {
                display: none !important;
            }

            /* חשיפת הטקסט בעגלה ומירכוזו */
            .product-cube .btn-cart-expand .btn-text {
                opacity: 1 !important;
                transform: none !important;
                display: block !important;
                position: static !important;
                padding-left: 0 !important;
                font-size: 16px !important;
                font-weight: normal !important;
                letter-spacing: 0.5px !important; /* מרווח אותיות אלגנטי */
            }
}

/* ==========================================================================
   Mobile Ultimate Layout Fix: Uniform Heights & Grid Overlay Badges
   יישור קוביות מוצר לגובה אחיד, יישור כפתורים תחתונים, והחזרת מדבקות על גבי התמונה
   ========================================================================== */

@media (max-width: 767px) {

    /* ==========================================
       1. מערכת גובה אחיד ויישור כפתורים (Flexbox)
       ========================================== */

    /* הפיכת השורה של המוצרים לגריד גמיש שמייצר גובה אחיד לכל העמודות */
    .row:has(> .product-cube) {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    /* מחיקת הצפת ה-Float ופריסת הקובייה לאורך כל הגובה שנוצר */
    .product-cube {
        float: none !important;
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important; /* אילוץ הקובייה למלא את כל הגובה הזמין */
        height: auto !important;
        padding-bottom: 60px !important; /* יצירת אזור מוגן לכפתור ההוספה לסל הכחול */
    }

        /* "קסם" היישור: דחיפת אזור המחירים לתחתית הקובייה. 
       זה מבטיח שהמחירים (ומתחתם הכפתור) תמיד יהיו באותו קו אופקי בכל השורה */
        .product-cube .new-pricing-container {
            margin-top: auto !important;
            margin-bottom: 10px !important;
        }

        /* ==========================================
       2. שכבת המדבקות על התמונה (CSS Grid)
       ========================================== */

        /* הגדרת מעטפת התמונה כגריד של תא אחד המאפשר חפיפת שכבות טבעית (ללא Position Absolute) */
        .product-cube .product-image-wrapper {
            display: grid !important;
            grid-template-columns: 1fr !important;
            position: static !important; /* חובה! משחרר את כפתור העגלה להיצמד לתחתית הקובייה כולה */
        }

        /* מיקום התמונה בתא הגריד */
        .product-cube .productImage {
            grid-area: 1 / 1 !important;
            width: 100% !important;
            align-self: start !important;
        }

        /* מיקום המדבקות בתחתית אותו תא גריד (מעל התמונה) */
        .product-cube .bottom-badges-container {
            grid-area: 1 / 1 !important;
            position: relative !important; /* ביטול הגדרות ה-static/absolute הקודמות */
            transform: none !important;
            align-self: end !important; /* היצמדות לתחתית אזור התמונה */
            justify-self: center !important; /* מירכוז אופקי */
            width: 95% !important;
            margin: 0 0 8px 0 !important; /* מרווח עדין מקו הסיום של התמונה */
            gap: 3px !important; /* [דרישה] צמצום משמעותי של הרווחים בין המדבקות */
            padding: 0 !important;
            z-index: 10 !important;
            pointer-events: none !important; /* מאפשר לחיצה על התמונה גם מבעד לשטח הריק של מכולת המדבקות */
        }

        /* כוונון עדין למדבקות עצמן כדי שייראו אלגנטיות ולא יסתירו יותר מדי מהכריכה במובייל */
        .product-cube .shared-badge {
            line-height: 1.1 !important;
            pointer-events: auto !important; /* מחזיר לחיציות למדבקה במידה ויש בה קישור */
        }

        .product-cube .badge-tavit {
            width: 50%!important;
        }

        .product-cube .bottom-badges-container {
            left: auto !important;
            right: auto !important;
            margin: 0 auto 10px auto !important;
        }
}