/*
Theme Name: DIKU Theme
Author: Tohar
Version: 1.0
Description: A minimalist, premium boutique theme for DIKU.
*/

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;700;800&display=swap');

/* Global 5% scale-down for a more refined, premium look (desktop/tablet only) */
@media (min-width: 768px) {
    body {
        zoom: 0.95;
    }
}

/* 
 * This file contains the required WordPress theme header.
 * Primary styling for the theme is handled via CSS variables and modular stylesheets in the assets/css directory.
 */

/* ==========================================================================
   CSS Variables (:root)
   Theme: DIKU
   ========================================================================== */

:root {
    /* ==========================================================================
     Color Palette
     ========================================================================== */

    /* Backgrounds */
    --color-bg-primary: #ffffff;
    /* Clean off-white */
    --color-bg-secondary: #F4F1ED;
    /* Slightly deeper off-white for contrast elements */
    --color-bg-white: #FFFFFF;

    /* Typography Colors */
    --color-text-primary: #2C302E;
    /* Soft, rich dark gray instead of harsh pure black */
    --color-text-secondary: #5A625E;
    /* Muted text for descriptions, meta data */
    --color-text-light: #8E9894;
    /* For very subtle text elements, placeholders */

    /* Mature Pastel Accents */
    --color-accent-sage: #B1C2A3;
    /* Sophisticated sage green */
    --color-accent-sand: #C9A84C;
    /* Warm sand/beige */
    --color-accent-pink: #E6D4D4;
    /* Subtle, mature powder pink */

    /* UI Colors */
    --color-border: #E8E4DF;
    /* Soft border color */
    --color-border-hover: #D1CCC4;
    --color-error: #D07B7B;
    /* Muted red for errors/warnings */
    --color-success: #8BA88B;
    /* Muted green for success states */

    /* ==========================================================================
     Typography (Optimized for RTL/Hebrew)
     ========================================================================== */

    /* Font Families */
    --font-family-primary: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-family-secondary: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Font Sizes */
    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.875rem;
    /* 14px */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.25rem;
    /* 20px */
    --font-size-2xl: 1.5rem;
    /* 24px */
    --font-size-3xl: 1.875rem;
    /* 30px */
    --font-size-4xl: 2.25rem;
    /* 36px */
    --font-size-5xl: 3rem;
    /* 48px */

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    /* ==========================================================================
     Spacing & Layout
     ========================================================================== */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;

    /* Border Radii */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;

    /* ==========================================================================
     Shadows & Transitions
     ========================================================================== */
    --shadow-sm: 0 2px 4px rgba(44, 48, 46, 0.04);
    --shadow-md: 0 4px 12px rgba(44, 48, 46, 0.08);
    --shadow-lg: 0 10px 24px rgba(44, 48, 46, 0.12);

    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Base Theme Styles
   ========================================================================== */

body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-family-primary);
    line-height: var(--line-height-normal);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    direction: rtl;
    unicode-bidi: embed;
}

#page {
    display: flex;
    flex-direction: column;
    flex: 1;
}

#content {
    flex: 1;
    /* Pushes the footer to the bottom of the screen */
}

/* ==========================================================================
   Header Styles
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    background-color: #fdfbf9;
    padding: 8px var(--spacing-8);
    font-family: var(--font-family-primary);
    transition: box-shadow var(--transition-normal);
    direction: rtl;
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: var(--spacing-6);
}

/* ── עמוד הבית: תפריט שקוף מעל ה-Hero, הופך ללבן בגלילה ──────────── */
body.home .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* לבן שקוף-למחצה עם טשטוש עדין (אפקט זכוכית מט) */
    background-color: rgba(253, 251, 249, 0.78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: none;
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
/* הורדת כל סרגל התפריט מעט למטה */
body.home .site-header {
    padding-top: 22px;
    padding-bottom: 14px;
}
/* אחרי גלילה — חוזר להיות לבן עם צל */
body.home .site-header.is-scrolled {
    background-color: #fdfbf9;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.site-branding {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.site-title {
    color: var(--color-text-primary);
    text-decoration: none;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    transition: color var(--transition-normal);
}

.site-title:hover {
    color: var(--color-accent-sage);
}

.site-description {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: 0;
}

.custom-logo {
    max-height: 85px;
    width: auto;
    display: block;
}

.main-navigation {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.primary-menu {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--spacing-6);
}

.primary-menu li {
    position: relative;
}

.primary-menu li a {
    color: #3b312b;
    /* Deep earthy brown/charcoal */
    text-decoration: none;
    font-family: 'Assistant', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: var(--spacing-2) 0;
    transition: color var(--transition-fast);
    position: relative;
    display: block;
}

.primary-menu li a:hover {
    color: var(--color-accent-sage);
}

.primary-menu li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-accent-sage);
    transform: scaleX(0);
    transition: transform var(--transition-fast);
    transform-origin: right;
}

.primary-menu li a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    padding: var(--spacing-2);
}

.header-cart {
    flex: 1 1 auto; /* grows to fill space between nav and right edge */
    display: flex;
    align-items: center;
}

.cart-contents {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-text-primary);
    position: relative;
    transition: color var(--transition-fast);
    padding: var(--spacing-2);
}

.cart-contents:hover {
    color: var(--color-accent-sage);
}

.cart-icon {
    display: flex;
}

.cart-count {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--color-accent-pink);
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    height: 20px;
    min-width: 20px;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    transform: translate(30%, -30%);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-bg-primary);
}

/* On mobile the header is tighter (padding-top ~4px), so the cart-count badge —
   which floats up-and-right of the icon — was clipped at the header's top edge.
   Give non-home headers a little more top room and pull the badge in slightly. */
@media screen and (max-width: 768px) {
    body:not(.home) .site-header {
        padding-top: 12px !important;
    }
    .cart-count {
        transform: translate(28%, -18%);
    }
}

/* Mobile search toggle button — hidden on desktop */
.mobile-search-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #4a3a32;
    align-items: center;
    justify-content: center;
    order: 2; /* between hamburger and cart */
}

/* Mobile search bar — hidden by default, slides down when open */
.mobile-search-bar {
    display: none;
    background: #fff;
    border-bottom: 1px solid #e5ddd7;
    padding: 10px 16px;
    position: relative;
    z-index: 999;
}
.mobile-search-bar.is-open {
    display: block;
    animation: mobileSearchIn 0.22s ease;
}
@keyframes mobileSearchIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mobile-search-inner {
    direction: rtl;
}
.mobile-search-inner .dgwt-wcas-search-wrapp,
.mobile-search-inner .dgwt-wcas-sf-wrapp,
.mobile-search-inner .dgwt-wcas-search-form {
    width: 100% !important;
    max-width: 100% !important;
}
.mobile-search-inner .dgwt-wcas-sf-input {
    font-size: 16px !important;
}

@media screen and (max-width: 768px) {
    .site-header-inner {
        gap: var(--spacing-4);
        padding: 0 var(--spacing-4);
    }

    .primary-menu {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .main-navigation {
        justify-content: flex-start;
    }

    /* Show mobile search icon, hide desktop search */
    .mobile-search-toggle {
        display: flex;
        order: 1 !important;
        flex: 0 0 auto !important;
    }
    .header-cart {
        order: 2 !important;
        flex: 0 0 auto !important;
    }
    .header-search-container {
        display: none !important;
    }
}

/* ==========================================================================
   Main Content Styles
   ========================================================================== */

.site-main {
    padding: var(--spacing-8) 0;
}

.site-main-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-6);
}

/* ==========================================================================
   Legal Page White Card Layout
   ========================================================================== */

/* ── A) Custom-template pages (Accessibility Statement, Terms & Conditions)
        These use page-accessibility.php / page-terms.php and output their
        own .accessibility-main / .accessibility-card HTML structure.
   ──────────────────────────────────────────────────────────────────────── */

.accessibility-main {
    direction: rtl;
    background-color: var(--color-bg-primary);
    padding: var(--spacing-16) var(--spacing-6);
    min-height: 60vh;
}

.accessibility-wrapper {
    max-width: 820px;
    margin: 0 auto;
}

.accessibility-card {
    background-color: var(--color-bg-white);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-md);
    padding: clamp(2rem, 6vw, 4rem);
    border: 1px solid var(--color-border);
}

.accessibility-page-header {
    border-bottom: 2px solid var(--color-accent-sand);
    padding-bottom: var(--spacing-8);
    margin-bottom: var(--spacing-10);
}

.accessibility-page-header .page-eyebrow {
    display: block;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-light);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-3);
}

.accessibility-page-title {
    font-family: var(--font-family-secondary);
    font-size: clamp(1.75rem, 4vw, var(--font-size-4xl));
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    margin: 0;
}

@media (max-width: 640px) {
    .accessibility-main  { padding: var(--spacing-8) var(--spacing-4); }
    .accessibility-card  { padding: var(--spacing-8) var(--spacing-6); }
}

/* ==========================================================================
   Circle Images Row  (.diku-circle-images)
   Add this class to a wp:columns block in the block editor.
   Loaded globally so it works on any page/template.
   ========================================================================== */

.diku-circle-images {
    margin-top: 2.5rem !important;
    padding-top: 2rem !important;
    border-top: 1px solid var(--color-border) !important;
}

.diku-circle-images .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.diku-circle-images figure.wp-block-image,
.diku-circle-images .wp-block-image {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* Force circular shape on every img and video — regardless of nesting depth */
.diku-circle-images img,
.diku-circle-images video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(44, 48, 46, 0.08) !important;
    border: 3px solid #ffffff !important;
    outline: 2px solid var(--color-border, #E8E4DF) !important;
}

/* YouTube / Vimeo embeds — clip the iframe inside a square container */
.diku-circle-images .wp-block-embed,
.diku-circle-images .wp-block-video {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(44, 48, 46, 0.08) !important;
    border: 3px solid #ffffff !important;
    outline: 2px solid var(--color-border, #E8E4DF) !important;
}

.diku-circle-images .wp-block-embed__wrapper,
.diku-circle-images .wp-block-embed__wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 0 !important; /* parent clips it */
}

.diku-circle-images .wp-block-embed__wrapper {
    position: relative !important;
    padding-bottom: 100% !important; /* 1:1 ratio */
    height: 0 !important;
    overflow: hidden !important;
}

.diku-circle-images figcaption {
    text-align: center !important;
    margin-top: 0.75rem !important;
    font-size: 0.875rem;
    color: var(--color-text-secondary, #5A625E);
}

@media (max-width: 640px) {
    .diku-circle-images.wp-block-columns {
        flex-direction: column !important;
        align-items: center !important;
    }
    .diku-circle-images .wp-block-column {
        width: 65% !important;
        flex: none !important;
    }
}

/* ── B) Standard WordPress pages rendered by index.php (no custom template)
        e.g. Terms & Conditions created via the WP admin "Add Page" flow.
        body.page is set by WordPress on every page; .page-template is added
        only when a custom PHP template is active — so :not(.page-template)
        targets only plain pages. .home is excluded to protect the front page.
        .woocommerce-page excludes WC shop/cart/checkout pages.
   ──────────────────────────────────────────────────────────────────────── */

body.page:not(.page-template):not(.home):not(.woocommerce-page) .site-main {
    direction: rtl;
    background-color: var(--color-bg-primary);
    padding: var(--spacing-16) var(--spacing-6);
    min-height: 60vh;
}

body.page:not(.page-template):not(.home):not(.woocommerce-page) .site-main-inner {
    max-width: 820px;
    padding: 0;
}

/* The article IS the white card — wraps both the <h1> title and the content */
body.page:not(.page-template):not(.home):not(.woocommerce-page) article.type-page {
    background-color: var(--color-bg-white);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-md);
    padding: clamp(2rem, 6vw, 4rem);
    border: 1px solid var(--color-border);
}

/* Style the auto-generated <h1 class="entry-title"> to match .accessibility-page-title */
body.page:not(.page-template):not(.home):not(.woocommerce-page) .entry-header {
    border-bottom: 2px solid var(--color-accent-sand);
    padding-bottom: var(--spacing-8);
    margin-bottom: var(--spacing-10);
}

body.page:not(.page-template):not(.home):not(.woocommerce-page) .entry-title {
    font-family: var(--font-family-secondary);
    font-size: clamp(1.75rem, 4vw, var(--font-size-4xl));
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    margin: 0;
}

@media (max-width: 640px) {
    body.page:not(.page-template):not(.home):not(.woocommerce-page) .site-main {
        padding: var(--spacing-8) var(--spacing-4);
    }
    body.page:not(.page-template):not(.home):not(.woocommerce-page) article.type-page {
        padding: var(--spacing-8) var(--spacing-6);
    }
}

/* ==========================================================================
   Content Block Lists — Gutenberg wp-block-list (global)
   ========================================================================== */

/* Restore inward indentation for lists */
body .wp-block-list {
    padding-inline-start: 2.5rem !important; /* Pushes the whole list inwards */
    padding-right: 2.5rem !important; /* Fallback physical property */
    margin-right: 0 !important;
    list-style: none !important;
    counter-reset: diku-counter !important;
}

body .wp-block-list > li {
    padding-inline-start: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
    counter-increment: diku-counter !important;
    margin-bottom: 0.5rem !important;
}

/* Unordered lists - Bullets inside the indented space */
body ul.wp-block-list > li::before {
    content: '' !important;
    position: absolute !important;
    inset-inline-start: -1.25rem !important;
    right: -1.25rem !important;
    top: 0.6em !important;
    width: 8px !important;
    height: 8px !important;
    background-color: var(--color-accent-mint, #A3D1C6) !important;
    border-radius: 50% !important;
}

/* Ordered lists - Numbers inside the indented space */
body ol.wp-block-list > li::before {
    content: counter(diku-counter) "." !important;
    position: absolute !important;
    inset-inline-start: -1.5rem !important;
    right: -1.5rem !important;
    color: var(--color-accent-mint, #A3D1C6) !important;
    font-weight: bold !important;
    direction: rtl !important;
}

/* Nested lists — additional inward indent + fresh counter scope */
body .wp-block-list .wp-block-list {
    margin-right: 2rem !important;
    padding-right: 0 !important;
    counter-reset: diku-counter !important;
}

/* Hide FiboSearch inside the navigation menu — mobile only */
@media screen and (max-width: 768px) {
    .main-menu .dgwt-wcas-search-wrapp,
    .main-menu .dgwt-wcas-search-form,
    .main-menu li.dgwt-wcas-search-in-menu,
    #primary-menu .dgwt-wcas-search-wrapp,
    #primary-menu li.dgwt-wcas-search-in-menu {
        display: none !important;
    }
}

/* ==========================================================================
   FiboSearch — DIKU brand styling
   ========================================================================== */

/* ── Hide the native Gutenberg / theme search bar ── */
.wp-block-search,
.wp-block-search__inside-wrapper,
.widget_search,
.search-form:not(.dgwt-wcas-search-form) {
    display: none !important;
}

/* ── Outer wrapper: fills all available space in .header-search-container ── */
.dgwt-wcas-search-wrapp {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
}

/* ── The form itself: FiboSearch default is position:relative with absolute button.
       We reset the form to flex so everything stays in one line. ── */
.dgwt-wcas-sf-wrapp,
.dgwt-wcas-search-form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
}

/* ── Capsule border applied on the wrapp only ── */
.dgwt-wcas-sf-wrapp {
    height: 42px !important;
    border-radius: 40px !important;
    border: 1px solid #E4E1D9 !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.dgwt-wcas-sf-wrapp:focus-within {
    border-color: var(--color-accent-mint, #A3D1C6) !important;
    box-shadow: 0 0 0 3px rgba(163, 209, 198, 0.18) !important;
}

/* ── Input field ── */
.dgwt-wcas-search-input {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 42px !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    padding: 0 0.75rem 0 1rem !important;
    margin: 0 !important;
    font-family: var(--font-family-primary, 'Assistant', sans-serif) !important;
    font-size: 0.9rem !important;
    color: var(--color-text-primary, #2C302E) !important;
    box-shadow: none !important;
    outline: none !important;
    line-height: 42px !important;
    box-sizing: border-box !important;
    position: static !important;
    direction: rtl !important;
    text-align: right !important;
}

.dgwt-wcas-search-input::placeholder {
    color: var(--color-text-light, #8E9894) !important;
    direction: rtl !important;
    text-align: right !important;
}

/* ── Submit button — reset absolute positioning, use flex instead ── */
.dgwt-wcas-search-submit {
    position: static !important;   /* override FiboSearch's position:absolute */
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ── Magnifier icon ── */
.dgwt-wcas-ico-magnifier {
    position: static !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
}

.dgwt-wcas-ico-magnifier svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    fill: #8E9894 !important;
    transition: fill 0.2s ease !important;
}

.dgwt-wcas-sf-wrapp:focus-within .dgwt-wcas-ico-magnifier svg {
    fill: var(--color-accent-mint, #A3D1C6) !important;
}

/* ── Autocomplete dropdown ── */
.dgwt-wcas-suggestions-wrapp {
    border-radius: 16px !important;
    border: 1px solid #E4E1D9 !important;
    box-shadow: 0 8px 24px rgba(44, 48, 46, 0.10) !important;
    font-family: var(--font-family-primary, 'Assistant', sans-serif) !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
}

.dgwt-wcas-suggestion:hover,
.dgwt-wcas-suggestion.selected {
    background-color: #F4F1ED !important;
}

/* ==========================================================================
   Front Page Styles
   ========================================================================== */

.front-page-main.site-main {
    padding-top: 0;
    /* Remove default padding for hero section to be flush */
}

/* Main Hero Section */
.main-hero-section {
    position: relative;
    width: 100%;
    /* מסך מלא — התפריט מרחף מעל ה-Hero (ראה .site-header על body.home) */
    height: 100svh;
    overflow: hidden;
    margin-bottom: var(--spacing-12);
    /* Space between the hero and the about section */
}

.main-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures the image fills the area without distortion */
    display: block;
    background-color: var(--color-bg-secondary);
    /* Placeholder color if image is missing */
}

/* ── Hero: שלושה סרטונים זה לצד זה ─────────────────────────────────── */
.hero-video-strip {
    display: flex;
    width: 100%;
    height: 100%;
}
.hero-video-col {
    flex: 1 1 0;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.hero-video-col .main-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* קו הפרדה דק בין הסרטונים, כמו ברפרנס */
.hero-video-col + .hero-video-col {
    border-inline-start: 2px solid #fff;
}
/* במובייל — הסרטונים נשארים זה לצד זה אך מקבלים גובה מלא */
@media (max-width: 768px) {
    .hero-video-col + .hero-video-col {
        border-inline-start: 1px solid #fff;
    }
}

/* About Maker Section */
.about-maker-section {
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-12) 0;
    background-color: #fdfbf9;
    box-shadow: 0 0 0 100vmax #fdfbf9;
    clip-path: inset(0 -100vmax);
}

.about-image {
    flex: 0 0 350px;
    max-width: 350px;
    height: 350px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-right: var(--spacing-8);
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-text-content {
    flex: 1;
    padding: 0 var(--spacing-8);
}

.about-heading {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    font-family: 'Assistant', sans-serif;
    line-height: 1.2;
    color: #785b4d;
    /* Warm earthy brown */
    margin-bottom: var(--spacing-4);
    margin-top: 0;
}

.about-body {
    font-size: var(--font-size-xl);
    font-weight: 700;
    font-family: 'Assistant', sans-serif;
    line-height: 1.8;
    color: var(--color-text-secondary);
    white-space: pre-line;
    margin: 0;
}

@media screen and (max-width: 768px) {
    .about-maker-section {
        flex-direction: column;
    }

    .about-image {
        flex: 0 0 200px;
        max-width: 200px;
        height: 200px;
        margin-right: 0;
        margin-bottom: var(--spacing-6);
        margin-top: 30px !important; /* Give it room below the banner */
    }

    .about-text-content {
        padding: 0 var(--spacing-4);
        text-align: center;
    }

    .about-heading {
        font-size: 22px; /* Reduced further from 26px */
    }

    .about-body {
        font-size: 14px; /* Reduced further from 16px */
    }
}

/* Hero Section */
.hero-section {
    background-color: var(--color-bg-secondary);
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-16) var(--spacing-6);
    position: relative;
    /* Placeholder for background image */
}

.hero-content {
    max-width: 800px;
    z-index: 1;
}

.hero-title {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-5xl);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
}

.hero-description {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-button {
    display: inline-block;
    background-color: var(--color-accent-sage);
    color: var(--color-bg-primary);
    padding: var(--spacing-3) var(--spacing-8);
    border-radius: var(--border-radius-full);
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.cta-button:hover {
    background-color: var(--color-text-primary);
    color: var(--color-bg-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Common Section Inner */
.section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-6);
}

.section-title {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-3xl);
    text-align: center;
    margin-bottom: var(--spacing-10);
    color: #6B9E8A;
}

/* כותרות גלובליות */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title {
    color: #6B9E8A;
}

/* Home Categories */
.home-categories {
    padding: var(--spacing-16) 0;
    background-color: var(--color-bg-primary);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-8);
}

.category-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.category-image-placeholder {
    width: 250px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--color-bg-secondary);
    border-radius: var(--border-radius-full);
    /* Circular placeholders */
    margin-bottom: var(--spacing-4);
    transition: transform var(--transition-normal);
}

.category-card:hover .category-image-placeholder {
    transform: scale(1.05);
}

.category-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-2);
}

.category-link {
    color: var(--color-accent-sage);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    position: relative;
}

.category-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transition: transform var(--transition-fast);
}

.category-link:hover::after {
    transform: scaleX(1);
}

/* Featured Products */
.featured-products {
    padding: var(--spacing-16) 0;
    background-color: var(--color-bg-secondary);
    /* Alternating background */
}

/* Minor overrides for WooCommerce grid to match theme */
.products-grid-wrapper .woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-8);
}

.products-grid-wrapper .woocommerce ul.products li.product {
    margin: 0;
    width: 100%;
}

/* ==========================================================================
   WooCommerce Product Overrides
   ========================================================================== */

/* Global Grid Layout for All Product Archives */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 30px !important;
    margin: 0 auto !important;
    justify-content: start !important;
    justify-items: start !important;
    direction: rtl !important;
}

/* Clear WooCommerce default floats */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
}

/* Flex Layout for Individual Product Cards */
.woocommerce ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    float: right !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

/* Make the Inner Link Flex (CRUCIAL) */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    padding: var(--spacing-4) 0 var(--spacing-2);
    text-align: center !important;
}

.woocommerce ul.products li.product .price {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
    margin-bottom: var(--spacing-4);
    margin-top: auto !important;
    text-align: center !important;
}

.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_simple,
.woocommerce ul.products li.product .button.product_type_variable,
.woocommerce ul.products li.product .button {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border-radius: var(--border-radius-full);
    padding: var(--spacing-2) var(--spacing-6);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    margin-top: auto !important;
    align-self: center !important;
}

.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce ul.products li.product .button.product_type_simple:hover,
.woocommerce ul.products li.product .button.product_type_variable:hover {
    background-color: #6B9E8A !important;
    color: #fff !important;
}

.woocommerce ul.products li.product img {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    border-radius: var(--border-radius-md);
    /* Soft rounded corners for images */
}

.woocommerce ul.products li.product:hover img {
    transform: scale(1.02);
    box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Footer Styles
   ========================================================================== */

.site-footer {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    padding: var(--spacing-8) 0;
    margin-top: auto;
    font-size: var(--font-size-sm);
    border-top: 1px solid var(--color-border);
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
    text-align: center;
}

@media screen and (min-width: 768px) {
    .site-footer-inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.social-links {
    display: flex;
    gap: var(--spacing-4);
}

.social-links a {
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-links a:hover {
    color: var(--color-accent-sage);
}

/* ==========================================================================
   FORCED OVERRIDES FOR HORIZONTAL MENU
   ========================================================================== */

/* 1. Clean the Header Container */
.site-header-inner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 40px !important;
    width: 100% !important;
}

/* 2. Force Menu to Horizontal Row */
.site-header nav > ul,
.site-header .main-menu {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 28px !important;
}

/* 3. Style Menu Items */
.site-header nav > ul > li,
.site-header .main-menu > li {
    margin: 0 !important;
    padding: 0 !important;
    list-style-type: none !important;
}

.site-header nav > ul > li > a,
.site-header .main-menu > li > a {
    text-decoration: none !important;
    font-family: 'Assistant', sans-serif !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    color: #4A3A32 !important;
    text-transform: uppercase !important;
    transition: color 0.3s ease !important;
}

.site-header nav > ul > li > a:hover,
.site-header .main-menu > li > a:hover {
    color: #6B9E8A !important;
}

/* 4. Remove the bullets forcefully */
li {
    list-style: none !important;
}

/* 4.5 New Mega Menu Horizontal Styles */
.main-menu {
    position: static !important; /* Force the parent to allow the breakout */
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.has-horizontal-dropdown {
    position: static !important; /* Force the parent to allow the breakout */
}

.dropdown-arrow {
    font-size: 14px !important;
    color: #4A3A32 !important;
    margin-right: 5px; /* RTL spacing */
}

/* Hide dropdown arrow from the ׳—׳ ׳•׳× link (visible via JS toggle only) */
.has-horizontal-dropdown > a .dropdown-arrow {
    display: inline !important;
}

@media (min-width: 769px) {
    /* Force the submenu to span the entire screen width */
    .horizontal-sub-menu {
        position: absolute !important;
        top: 100%;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important; /* Full viewport width */
        margin-left: calc(-50vw + 50%) !important; /* Break out of container constraints */
        background-color: #fdfcf9 !important; /* Soft warm cream background */
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 35px !important;
        padding: 10px 0 !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
        border-top: 1px solid #f0ebe1 !important;
        list-style: none;
        z-index: 9999 !important;
        
        /* --- Animation Settings --- */
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-20px) !important; /* Starts slightly higher */
        transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.4s !important;
    }

    /* Keep text strictly on one line */
    .horizontal-sub-menu li {
        display: inline-block !important;
        white-space: nowrap !important; /* Prevents text from breaking into 2 lines */
        margin: 0 !important;
        padding: 0 !important;
    }

    .horizontal-sub-menu li a {
        font-size: 15px !important;
        color: #4A3A32 !important;
        padding: 5px 10px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        text-transform: none !important;
        transition: all 0.2s ease !important;
    }

    .horizontal-sub-menu li a:hover {
        color: #6B9E8A !important;
        transform: scale(1.05);
        display: inline-block;
    }

    /* Class added via JS on click */
    .horizontal-sub-menu.show-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important; /* Slides down to its natural position */
    }
}

/* 5. Scale up Cart Icon & Add Transitions */
.header-cart svg {
    width: 32px !important;
    height: 32px !important;
    transition: all 0.3s ease !important;
}

/* Apply Mint color and slight scale on hover */
.search-submit:hover svg,
.cart-contents:hover svg,
.header-cart svg:hover {
    color: #6B9E8A !important;
    stroke: #6B9E8A !important;
    fill: none !important; /* Adjust if any fills are used, but these are stroke icons */
    transform: scale(1.05) !important;
}

/* 6. Ensure Cart Container is Flex */
.header-cart {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 1 auto !important;  /* grow to fill space between nav and edge */
    min-width: 0 !important;
    gap: 12px !important;
}

/* Search container stretches to fill all available space inside .header-cart */
.header-search-container {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    visibility: visible !important;
}

.search-form {
    display: flex;
    align-items: center;
    border: 1.5px solid #d1c7bd !important;
    border-radius: 25px !important;
    padding: 5px 15px !important;
    background: #fff;
    transition: all 0.3s ease;
    width: 250px !important;
}

.search-form:focus-within {
    border-color: #785b4d !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.search-field {
    border: none !important;
    outline: none !important;
    font-family: 'Assistant', sans-serif;
    font-size: 16px !important;
    width: 100% !important;
    padding: 5px 10px !important;
    background: transparent;
    color: #4a4a4a;
}

.search-submit {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #785b4d;
    padding: 0;
    margin-left: 5px;
}

.search-submit svg {
    width: 18px;
    height: 18px;
}

/* 8. Accessibility Footer Link */
.accessibility-link-wrapper {
    margin-right: 5px;
    color: var(--color-text-light);
}

.accessibility-link {
    color: var(--color-text-light);
    font-size: 12px;
    text-decoration: none;
    transition: color 0.3s;
}

.accessibility-link:hover {
    color: #785b4d;
    text-decoration: underline;
}

/* ==========================================================================
   Accessibility Widget
   ========================================================================== */
.a11y-widget-container {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 99999;
}

.custom-accessibility-icon {
    position: fixed !important;
    bottom: 25px !important;
    left: 25px !important;
    width: 50px !important;
    height: 50px !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    box-shadow: 0 6px 20px rgba(74, 58, 50, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
}

.custom-accessibility-icon:hover {
    transform: scale(1.08) !important;
    background-color: #f0ece9 !important;
    box-shadow: 0 8px 25px rgba(74, 58, 50, 0.4) !important;
}

.custom-accessibility-icon svg {
    width: 25px !important;
    height: 25px !important;
    fill: #4A3A32 !important;
}

/* ==========================================================================
   WhatsApp Floating Button
   ========================================================================== */
.whatsapp-float {
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 25px;
    right: 25px; /* Bottom Right corner */
    background-color: #ffffff;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 6px 20px rgba(74, 58, 50, 0.3);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.whatsapp-float:hover {
    background-color: #f0ece9;
    transform: scale(1.1);
}
.whatsapp-float svg {
    width: 25px;
    height: 25px;
    fill: #4A3A32;
}

.a11y-menu {
    position: absolute;
    bottom: 80px;
    left: 0;
    width: 320px;
    background-color: #fdfcf9 !important; /* Light cream background */
    border-radius: 24px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    border: 1px solid #e8e0d8;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Assistant', sans-serif;
    direction: rtl;
    max-height: 85vh;
    overflow-y: auto;
    color: #4A3A32 !important;
}

.a11y-menu.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.a11y-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid #e8e0d8;
    background-color: #f5f0eb;
    border-radius: 24px 24px 0 0;
}

.a11y-menu-header h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: #4A3A32 !important;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mini-a11y-icon {
    width: 28px;
    height: 28px;
    background: #4A3A32;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.mini-a11y-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

#a11y-close {
    background: rgba(74, 58, 50, 0.1);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    color: #4A3A32;
    transition: all 0.2s;
}

#a11y-close:hover {
    background: rgba(74, 58, 50, 0.2);
}

.a11y-menu-content {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.a11y-section-title {
    font-size: 11px;
    font-weight: 800;
    color: rgba(74, 58, 50, 0.55) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.a11y-action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.a11y-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    background-color: #ffffff;
    border: 1.5px solid #e0d6ce;
    border-radius: 16px;
    color: #4A3A32;
    font-family: 'Assistant', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.a11y-action:hover {
    border-color: #4A3A32;
    background-color: #f5f0eb;
}

.a11y-action.active {
    background-color: #4A3A32 !important;
    color: #ffffff !important;
    border-color: #4A3A32 !important;
    box-shadow: 0 4px 12px rgba(74, 58, 50, 0.25);
}

.a11y-reset-all {
    margin-top: 20px;
    background-color: #ffffff !important;
    color: #4A3A32 !important;
    border: 1.5px solid #e0d6ce !important;
    border-radius: 16px;
    padding: 14px;
    font-weight: 800;
    width: 100%;
}

.a11y-reset-all:hover {
    background-color: #f5f0eb !important;
    border-color: #4A3A32 !important;
}

/* Accessibility Statement link — sits at the very bottom of the widget panel */
.a11y-statement-link {
    display: block;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e8e4df;
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 13px;
    font-weight: 600;
    color: #4A3A32;
    text-decoration: underline;
    text-underline-offset: 3px;
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
}

.a11y-statement-link:hover,
.a11y-statement-link:focus {
    color: #785b4d;
    text-decoration-color: #785b4d;
}

/* Accessibility Logic Overrides */
:root {
    --a11y-font-scale: 1;
}

body.a11y-font-scaled {
    font-size: calc(1rem * var(--a11y-font-scale)) !important;
}

body.a11y-high-contrast {
    background-color: #000 !important;
    color: #fff !important;
}

body.a11y-high-contrast *:not(.a11y-widget-container *) {
    background-color: #000 !important;
    color: #ffff00 !important; /* Yellow on black for extreme contrast */
    border-color: #ffff00 !important;
}

body.a11y-monochrome {
    filter: grayscale(100%) !important;
}

body.a11y-highlight-links a:not(.a11y-action) {
    background-color: #ffff00 !important;
    color: #000 !important;
    outline: 2px solid #000 !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

body.a11y-highlight-headers h1, 
body.a11y-highlight-headers h2, 
body.a11y-highlight-headers h3, 
body.a11y-highlight-headers h4, 
body.a11y-highlight-headers h5, 
body.a11y-highlight-headers h6 {
    outline: 3px solid #785b4d !important;
    background-color: rgba(120, 91, 77, 0.1) !important;
    padding: 5px !important;
}

body.a11y-readable-font *, html.a11y-readable-font * {
    font-family: Arial, Helvetica, sans-serif !important;
}

html.a11y-dark-mode body { background-color: #121212 !important; color: #e0e0e0 !important; }
html.a11y-dark-mode *:not(.a11y-widget-container *) {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
html.a11y-dark-mode img { filter: brightness(0.85); }

html.a11y-invert { filter: invert(1) hue-rotate(180deg) !important; }
html.a11y-invert img, html.a11y-invert video { filter: invert(1) hue-rotate(180deg) !important; }

html.a11y-dyslexia-font * {
    font-family: 'Verdana', 'Arial', sans-serif !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.1em !important;
}

html.a11y-letter-spacing * { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; }

html.a11y-line-height * { line-height: 1.9 !important; }

html.a11y-focus-visible *:focus {
    outline: 3px solid #E8779A !important;
    outline-offset: 3px !important;
}

html.a11y-large-cursor, html.a11y-large-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M4 0l16 12.5-7 1.5-4 7z'/%3E%3C/svg%3E") 4 4, auto !important;
}

html.a11y-high-contrast body { background-color: #000 !important; color: #fff !important; }
html.a11y-high-contrast *:not(.a11y-widget-container *) {
    background-color: #000 !important;
    color: #ffff00 !important;
    border-color: #ffff00 !important;
}

html.a11y-monochrome { filter: grayscale(100%) !important; }

html.a11y-highlight-links a:not(.a11y-action) {
    background-color: #ffff00 !important;
    color: #000 !important;
    outline: 2px solid #000 !important;
    padding: 1px 3px !important;
    text-decoration: underline !important;
}

html.a11y-highlight-headers h1,
html.a11y-highlight-headers h2,
html.a11y-highlight-headers h3,
html.a11y-highlight-headers h4,
html.a11y-highlight-headers h5,
html.a11y-highlight-headers h6 {
    outline: 3px solid #785b4d !important;
    background-color: rgba(120,91,77,0.1) !important;
    padding: 5px !important;
}

html.a11y-stop-animations *, body.a11y-stop-animations * {
    animation-play-state: paused !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

html.a11y-font-scaled * { font-size: calc(1rem * var(--a11y-font-scale, 1)) !important; }

/* ==========================================================================
   Site Footer (3-Column Layout)
   ========================================================================== */
.site-footer {
    background-color: #fdfbf9;
    font-family: 'Assistant', sans-serif;
    direction: rtl;
    border-top: 1px solid #eaeaea;
}

.site-footer-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding: 10px 60px 15px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-col-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 5px;
}

.footer-col p,
.footer-col ul li,
.footer-col ul li a {
    font-size: 16px;
    line-height: 1.4;
    color: #4a4a4a;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-col ul li a:hover {
    color: #785b4d;
}

/* Phone & email in the contact column are clickable (tel:/mailto:).
   Make that obvious: on hover/focus the link grows, turns bold and
   underlined in the brand accent so it reads as an interactive element.
   inline-block enables the scale; transform-origin keeps the growth
   flowing into the line (RTL) instead of pushing off the edge. */
.footer-col-contact ul li a {
    display: inline-block;
    transform-origin: right center;
    transition: color 0.25s ease, transform 0.25s ease;
}
.footer-col-contact ul li a:hover,
.footer-col-contact ul li a:focus-visible {
    color: #785b4d;
    font-weight: 700;
    transform: scale(1.12);
}

.footer-logo h3 {
    margin: 0 0 15px 0;
    font-weight: 700;
    color: #333;
    font-size: 24px;
}

.footer-logo img {
    max-width: 120px;
    height: auto;
    margin-bottom: 15px;
}

.footer-desc {
    line-height: 1.4;
    margin-bottom: 10px;
    margin-top: 0;
}

.footer-socials {
    display: flex;
    gap: 20px;
    align-items: center;
}

.footer-socials a {
    color: #4a4a4a;
    transition: color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-socials a:hover {
    color: #785b4d;
    transform: scale(1.1);
}

/* On hover, each social icon takes on its network's own brand colour.
   Facebook & Instagram are outline (stroke) icons; TikTok is a solid (fill)
   icon. Instagram & TikTok use their real gradients, with a solid-colour
   fallback after the url() for browsers that can't resolve the reference. */
.footer-socials a.social-facebook:hover {
    color: #1877F2; /* Facebook blue */
}
.footer-socials a.social-instagram:hover {
    color: #E4405F; /* solid fallback if gradient unsupported */
}
.footer-socials a.social-instagram:hover svg rect,
.footer-socials a.social-instagram:hover svg path,
.footer-socials a.social-instagram:hover svg line {
    stroke: url(#diku-ig-grad) #E4405F; /* Instagram gradient */
}
.footer-socials a.social-tiktok:hover svg {
    fill: url(#diku-tt-grad) #010101; /* TikTok cyan → magenta */
}

.footer-socials a svg {
    width: 30px;
    height: 30px;
}
.footer-socials a svg,
.footer-socials a svg rect,
.footer-socials a svg path,
.footer-socials a svg line {
    transition: stroke 0.3s ease, fill 0.3s ease;
}

.site-footer-bottom {
    text-align: center;
    padding: 10px 0;
    border-top: 1px solid #eaeaea;
    margin-top: 0;
}

.site-footer-bottom .site-info {
    font-size: 14px;
    color: #777;
}

.footer-policy-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 16px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.footer-policy-links li {
    margin: 0;
}

.footer-policy-links a {
    font-size: 13px;
    color: #999;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-policy-links a:hover {
    color: #785b4d;
}

.site-footer-bottom .site-credit {
    font-size: 13px;
    color: #aaa;
    margin-top: 4px;
}

/* ── Out of stock — archive card badge ── */
.product-card .product-img-wrap {
    position: relative;
}
.diku-out-of-stock-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(74, 58, 50, 0.82);
    color: #fff;
    font-family: 'Assistant', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    padding: 8px 10px;
    pointer-events: none;
}
.product-card.is-out-of-stock .product-img-wrap img {
    opacity: 0.6;
}

/* ── Out of stock — single product page ── */
.single-product p.stock.out-of-stock {
    display: none; /* replaced by diku-oos-notice */
}

/* ── In stock — single product page ── */
.single-product p.stock.in-stock {
    color: #2C302E !important;
}
.diku-oos-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8eded;
    border-right: 5px solid #C4587A;
    color: #7a2a3a;
    font-family: 'Assistant', sans-serif;
    font-size: 20px;
    font-weight: 800;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    text-align: right;
    direction: rtl;
}
.diku-oos-notice::before {
    content: '✕';
    background: #C4587A;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

/* ── Engraving field — single product page ── */
.diku-engraving-field {
    margin: 16px 0;
    direction: rtl;
    text-align: right;
}
.diku-engraving-field label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 6px;
}
.diku-engraving-field label .diku-required {
    color: #C4587A;
    margin-right: 2px;
}
.diku-engraving-hint {
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
}
#diku_engraving_text {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-family: var(--font-family-primary);
    direction: rtl;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
#diku_engraving_text:focus {
    outline: none;
    border-color: #C4587A;
}
.diku-engraving-surcharge {
    margin-top: 7px;
    font-size: 13px;
    color: #C4587A;
    font-weight: 600;
    min-height: 18px;
}

/* ── Cart: engraving inline editor ── */
.diku-engraving-toggle {
    background: none;
    border: none;
    padding: 0;
    margin-top: 6px;
    font-size: 14px;
    color: #888;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-family: inherit;
}
.diku-engraving-toggle:hover {
    color: #C4587A;
}
.diku-engraving-edit-form {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.diku-engraving-edit-form[hidden] {
    display: none;
}
.diku-engraving-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    font-family: var(--font-family-primary);
    direction: rtl;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.diku-engraving-textarea:focus {
    outline: none;
    border-color: #C4587A;
}
.diku-engraving-edit-surcharge {
    font-size: 12px;
    color: #C4587A;
    font-weight: 600;
    margin: 0;
    min-height: 16px;
}
.diku-engraving-edit-actions {
    display: flex;
    gap: 8px;
    flex-direction: row-reverse;
}
.diku-engraving-save {
    background: #4A3A32;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}
.diku-engraving-save:hover:not(:disabled) {
    background: #C4587A;
}
.diku-engraving-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.diku-engraving-cancel {
    background: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    color: #888;
    transition: border-color 0.2s;
}
.diku-engraving-cancel:hover {
    border-color: #aaa;
    color: #555;
}

/* ── Cart: greeting inline editor ── */
.diku-greeting-toggle {
    background: none;
    border: none;
    padding: 0;
    color: #5A625E;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-family: inherit;
    margin-top: 4px;
    display: inline-block;
}
.diku-greeting-toggle:hover { color: #B1C2A3; }
.diku-greeting-edit-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}
.diku-greeting-edit-form[hidden] { display: none; }
.diku-greeting-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #E8E4DF;
    border-radius: 6px;
    font-size: 15px;
    font-family: var(--font-family-primary);
    direction: rtl;
    text-align: right;
    resize: vertical;
    box-sizing: border-box;
    background: #FAF9F6;
    transition: border-color 0.2s;
}
.diku-greeting-textarea:focus {
    outline: none;
    border-color: #B1C2A3;
}
.diku-greeting-edit-actions {
    display: flex;
    gap: 8px;
    flex-direction: row-reverse;
}
.diku-greeting-save {
    background: #4A3A32;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}
.diku-greeting-save:hover:not(:disabled) { background: #B1C2A3; }
.diku-greeting-save:disabled { opacity: 0.6; cursor: not-allowed; }
.diku-greeting-cancel {
    background: none;
    border: 1px solid #E8E4DF;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    color: #8E9894;
    transition: border-color 0.2s;
}
.diku-greeting-cancel:hover { border-color: #B1C2A3; color: #5A625E; }

/* ── Cart: engraving text below the label ── */
.woocommerce-cart .wc-item-meta,
.woocommerce-checkout .wc-item-meta {
    display: block;
}
.woocommerce-cart .wc-item-meta dt,
.woocommerce-checkout .wc-item-meta dt {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}
.woocommerce-cart .wc-item-meta dd,
.woocommerce-checkout .wc-item-meta dd {
    display: block;
    margin-inline-start: 0;
    margin-right: 0;
    color: #555;
    font-size: 15px;
}

/* Mobile Responsiveness for Footer */
@media (max-width: 900px) {
    .site-footer {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    .site-footer-columns {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 20px 16px !important;
        text-align: center !important;
        align-items: center !important;
        gap: 0px !important;
    }
    .footer-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-socials {
        justify-content: center !important;
    }
    .footer-socials a {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ==========================================================================
   Category Bubbles Section
   ========================================================================== */
.category-bubbles-section {
    background-color: #fefefe;
    padding: 60px 40px 70px;
    text-align: center;
}

.bubbles-section-title {
    font-family: 'Assistant', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin: 0 0 50px 0;
    text-align: right;
    padding-right: 20px;
}

.bubbles-wrapper {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 25px;
    align-items: center;
}

/* Base bubble */
.bubble-item {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    animation: float 5s ease-in-out infinite;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                border-radius 0.4s ease,
                box-shadow 0.4s ease;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Dark overlay for text readability */
.bubble-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    border-radius: inherit;
    transition: background 0.3s ease;
}

.bubble-item:hover::before {
    background: rgba(0, 0, 0, 0.28);
}

/* Label */
.bubble-label {
    position: relative;
    z-index: 2;
    font-family: 'Assistant', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    line-height: 1.3;
    padding: 0 16px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* Hover: scale + morph */
.bubble-item:hover {
    transform: scale(1.1);
    box-shadow: 0 16px 40px rgba(0,0,0,0.14);
}

/* 5 unique organic blob shapes */
.bubble-shape-1 {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
.bubble-shape-1:hover {
    border-radius: 40% 60% 70% 30% / 40% 70% 30% 60%;
}

.bubble-shape-2 {
    border-radius: 40% 60% 70% 30% / 50% 40% 60% 50%;
}
.bubble-shape-2:hover {
    border-radius: 60% 40% 30% 70% / 60% 50% 40% 50%;
}

.bubble-shape-3 {
    border-radius: 50% 50% 30% 70% / 40% 60% 40% 60%;
}
.bubble-shape-3:hover {
    border-radius: 70% 30% 50% 50% / 60% 40% 60% 40%;
}

.bubble-shape-4 {
    border-radius: 30% 70% 60% 40% / 70% 30% 50% 50%;
}
.bubble-shape-4:hover {
    border-radius: 60% 40% 40% 60% / 30% 70% 30% 70%;
}

.bubble-shape-5 {
    border-radius: 70% 30% 40% 60% / 40% 50% 50% 60%;
}
.bubble-shape-5:hover {
    border-radius: 30% 70% 60% 40% / 50% 40% 60% 50%;
}

/* Floating keyframe ג€” each bubble gets a staggered delay via inline style */
@keyframes float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/* Merge float + hover scale properly */
.bubble-item:hover {
    animation-play-state: paused;
    transform: scale(1.1);
}

/* Mobile: Horizontal scroll for bubbles (masonry grid equivalent) */
@media (max-width: 768px) {
    .bubbles-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 15px !important;
        padding: 20px !important;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
    }
    .bubbles-wrapper::-webkit-scrollbar {
        height: 3px;
    }

    .bubbles-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }

    .bubbles-wrapper::-webkit-scrollbar-thumb {
        background-color: rgba(180, 180, 175, 0.55);
        border-radius: 999px;
    }

    .bubbles-wrapper {
        scrollbar-width: thin;
        scrollbar-color: rgba(180, 180, 175, 0.55) transparent;
        padding-bottom: 26px !important;
    }
    .bubble-item {
        flex: 0 0 75% !important;
        scroll-snap-align: center !important;
        height: 250px !important;
        width: auto !important;
    }
    .bubble-label {
        font-size: 20px;
    }
}

/* ==========================================================================
   Customers Share Carousel ג€” Infinite Auto-Scroll
   ========================================================================== */

/* 11 images ֳ— (260px + 20px gap) = 3080px for one set */
:root {
    --carousel-img-size: 260px;
    --carousel-gap: 20px;
    --carousel-set-count: 11;
    --carousel-set-width: calc( (var(--carousel-img-size) + var(--carousel-gap)) * var(--carousel-set-count) );
}

.customers-carousel-section {
    background-color: transparent;
    padding: 30px 0 25px;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    overflow: hidden;   /* clips the scrolling track */
}

.carousel-title {
    font-family: 'Assistant', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #333;
    text-align: right;
    padding: 0 40px;
    margin: 0 0 20px 0;
}

/* Viewport ג€” fixed-width window, clips the track */
.customers-carousel-viewport {
    width: 100%;
    overflow: hidden;
    direction: ltr; /* keep animation direction consistent regardless of RTL body */
}

/* Track ג€” wide strip containing 2ֳ— the images for seamless loop */
.customers-carousel-track {
    display: flex;
    gap: var(--carousel-gap);
    width: max-content;
    animation: carousel-scroll 28s linear infinite;
}

/* Pause the animation when hovering */
.customers-carousel-viewport:hover .customers-carousel-track {
    animation-play-state: paused;
}

/* Keyframe: slide one full set (6 images) to the left, then snap back to start */
@keyframes carousel-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX( calc( -1 * var(--carousel-set-width) ) ); }
}

.carousel-item {
    flex: 0 0 auto;
}

.carousel-image {
    width: var(--carousel-img-size);
    height: var(--carousel-img-size);
    border-radius: 20px;
    object-fit: cover;
    border: 1px solid #e5e0da;
    display: block;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.4s ease,
                filter 0.3s ease;
}

/* Pop-up hover effect on the link wrapper */
.carousel-image-link {
    display: block;
    border-radius: 20px;
    overflow: visible;
    position: relative;
    z-index: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.carousel-image-link:hover {
    transform: scale(1.08);
    z-index: 10;
}

.carousel-image-link:hover .carousel-image {
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    filter: brightness(1.05);
}

/* fsLightbox ג€” warm white backdrop instead of black */
.fslightbox-container {
    background: rgba(255, 255, 255, 0.95) !important;
}

.fslightbox-slide-btn-container svg path,
.fslightbox-slide-btn-container svg rect {
    stroke: #333 !important;
}

.fslightbox-source {
    border-radius: 12px;
    overflow: hidden;
}

/* ==========================================================================
   SHOP PAGE STYLES
   ========================================================================== */

/* --- Global Product Archive Header (Matches Baby Gifts Design) --- */
.baby-gifts-header {
    text-align: center;
    padding: 70px 20px 40px;
}

.baby-gifts-title {
    font-family: 'Assistant', 'Calibri', Arial, sans-serif !important;
    font-size: 46px !important;
    font-weight: 800 !important;
    color: #6B9E8A !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px;
}

/* Full-width gold gradient separator */
.baby-gifts-title-line {
    width: 100% !important;
    height: 4px !important;
    background: linear-gradient(to right, transparent, #C9A84C, transparent) !important;
    border: none !important;
    border-radius: 0;
    margin: 10px auto 20px auto;
}

.baby-gifts-subtitle {
    font-family: 'Assistant', sans-serif;
    font-size: 18px !important;
    color: #888 !important;
    margin: 0 auto !important;
    max-width: 600px;
    line-height: 1.6;
}


/* --- Horizontal Category Sub-Menu --- */
.shop-cat-nav {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 20px 8px;
    border-bottom: 1px solid #ede8e2;
}

.shop-cat-nav-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 32px;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.shop-cat-nav-list li {
    margin: 0 !important;
    padding: 0 !important;
}

.shop-cat-nav-link {
    font-family: 'Assistant', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #4A3A32 !important;
    text-decoration: none !important;
    padding: 8px 0 !important;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease !important;
    white-space: nowrap;
}

/* Gold underline on hover */
.shop-cat-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(to left, #D4AF37, #C4A035);
    transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.shop-cat-nav-link:hover,
.shop-cat-nav-link:active,
.shop-cat-nav-link:focus {
    color: #6B9E8A !important;
}

.shop-cat-nav-link:hover::after {
    width: 100%;
}

/* Active state for current category (manual class kept for legacy) */
.shop-cat-nav-active {
    color: #6B9E8A !important;
}

.shop-cat-nav-active::after {
    width: 100% !important;
}

/* wp_nav_menu aliases ג€” <li class="menu-item"> > <a> mirrors .shop-cat-nav-link */
.shop-cat-nav-list .menu-item > a {
    font-family: 'Assistant', sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #4A3A32 !important;
    text-decoration: none !important;
    padding: 6px 4px !important;
    position: relative !important;
    transition: color 0.2s !important;
    white-space: nowrap !important;
}
.shop-cat-nav-list .menu-item > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: #C4587A !important;
    transition: width 0.3s ease !important;
}
.shop-cat-nav-list .menu-item > a:hover,
.shop-cat-nav-list .menu-item > a:focus {
    color: #C4587A !important;
}
.shop-cat-nav-list .menu-item > a:hover::after,
.shop-cat-nav-list .menu-item > a:focus::after {
    width: 100% !important;
}
/* Active item ג€“ WordPress adds current-menu-item to the <li> */
.shop-cat-nav-list .current-menu-item > a {
    color: #C4587A !important;
}
.shop-cat-nav-list .current-menu-item > a::after {
    width: 100% !important;
}

/* --- Products Section --- */
.shop-products-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 0 40px;
}

.shop-products-heading {
    font-family: 'Assistant', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #4A3A32;
    text-align: center;
    margin: 0 0 28px 0;
}

/* --- Pagination --- */

/* Span all grid columns so the nav isn't trapped in a single product column */
.shop-pagination {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    clear: both !important;
    float: none !important;
    padding: 30px 0 10px;
    margin: 0 !important;
}

/* the_posts_pagination() wraps links in div.nav-links, not a <ul> */
.shop-pagination .nav-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.shop-pagination .page-numbers {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    font-family: 'Assistant', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    color: #4A3A32;
    background: #ffffff;
    border: 1.5px solid #e0d6ce;
    transition: all 0.25s ease;
    float: none !important;
}

.shop-pagination .page-numbers:hover {
    background: #f5f0eb;
    border-color: #4A3A32;
}

.shop-pagination .page-numbers.current {
    background: #6B9E8A !important;
    color: #ffffff !important;
    border-color: #6B9E8A !important;
}

/* --- Shop Page Mobile --- */
@media (max-width: 768px) {
    .shop-page-header {
        padding: 40px 15px 10px;
    }
    .shop-page-title {
        font-size: 32px !important;
    }

    .shop-cat-nav {
        padding: 12px 0 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .shop-cat-nav::-webkit-scrollbar {
        height: 3px;
    }

    .shop-cat-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .shop-cat-nav::-webkit-scrollbar-thumb {
        background-color: rgba(180, 180, 175, 0.55);
        border-radius: 999px;
    }

    .shop-cat-nav-list {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 6px 22px !important;
        padding: 0 15px !important;
    }

    .shop-cat-nav-link,
    .shop-cat-nav-list .menu-item > a {
        font-size: 15px !important;
    }

    .shop-products-section {
        padding: 20px 0 40px;
    }

    .shop-products-section .boutique-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 10px 15px 40px !important;
    }
}

/* --- Grid & Card Styles (Global) --- */

/* --- Product Grid --- */
.boutique-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px 20px 60px;
    max-width: 1400px;
    margin: 0 auto;
}

/* --- Product Cards --- */
.product-card {
    text-decoration: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    background-color: #FDFCF9; /* Faint off-white/beige */
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.product-card:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.07);
    transform: translateY(-4px); /* Subtle lift */
}

.product-img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    margin-bottom: 16px;
    background: transparent;
}

.product-img-wrap img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.product-card:hover .product-img-wrap img {
    transform: scale(1.08);
}

.product-title {
    font-size: 21px !important;
    color: #2B2B2B !important;
    font-family: 'Assistant', 'Calibri', Arial, sans-serif;
    font-weight: 800 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.2 !important;
    transition: color 0.3s ease;
}

.product-card:hover .product-title {
    color: #6B9E8A !important;
}

.product-price {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #4A3A32 !important;
    display: block !important;
    margin-top: 10px !important;
}

/* --- Sale Badge --- */
.sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: linear-gradient(135deg, #C4587A, #e07090);
    color: #fff;
    font-family: 'Assistant', sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 999px;
    letter-spacing: 0.3px;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(196, 88, 122, 0.35);
}

.sale-badge--label {
    background: linear-gradient(135deg, #D4AF37, #c49a20);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35);
}

/* WooCommerce native sale price HTML — style the strikethrough */
.product-price del {
    color: #bbb !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-left: 4px;
}

.product-price ins {
    text-decoration: none !important;
    color: #C4587A !important;
    font-weight: 900 !important;
}

/* Empty-state message when no products are on sale */
.no-sale-products-message {
    grid-column: 1 / -1;
    text-align: center;
    font-family: 'Assistant', sans-serif;
    font-size: 18px;
    color: #aaa;
    padding: 60px 20px;
    line-height: 1.6;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .boutique-products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    /* 1. Mobile Header Layout (RTL) */
    .site-header {
        padding: 4px 15px !important;
        min-height: unset !important;
        height: auto !important;
    }
    .custom-logo {
        max-height: 45px !important; /* Force smaller logo */
        width: auto !important;
    }
    .site-branding, .site-header-inner, .header-cart, .main-navigation {
        margin: 0 !important;
        padding: 0 !important;
        min-height: unset !important;
    }
    
    .site-header-inner {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 12px !important;
        padding: 0 !important;
        width: 100%;
    }
    
    .main-navigation {
        flex: 0 0 auto !important;
        order: -1 !important; /* Forces Hamburger to far right in RTL */
        display: flex;
        justify-content: flex-start;
        position: static; /* Let absolute menu position relative to header */
    }
    
    .menu-toggle {
        display: block;
        padding: 0;
        margin: 0;
    }
    
    .site-branding {
        flex: 1 !important;
        order: 0 !important; /* Logo sits immediately adjacent to Hamburger */
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    
    .header-cart {
        flex: 0 0 auto !important;
        order: 1 !important; /* Search/Cart sit at far left in RTL */
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
    }
    
    /* Adjust search form width for mobile header */
    .search-form {
        width: auto !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }
    .search-field {
        display: none !important; /* Hide the text input on mobile, show only icon */
    }
    .search-submit {
        margin: 0;
    }

    /* 2. Menu Drawer / Dropdown Container */
    .site-header nav#site-navigation .main-menu,
    .site-header .main-menu {
        display: none !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background-color: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        z-index: 9999 !important;
        border: none !important;
        outline: none !important;
        gap: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    .site-header nav#site-navigation .main-menu.toggled,
    .site-header .main-menu.toggled {
        display: flex !important;
    }
    
    /* Clean up any inherited borders or outlines on nav wrappers */
    .site-header nav#site-navigation,
    .site-header .main-navigation {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    
    /* 3. Touch Targets & Typography */
    .site-header .main-menu > li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        outline: none !important;
        box-sizing: border-box !important;
    }
    
    .site-header .main-menu > li > a {
        font-family: 'Assistant', sans-serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #2C302E !important;
        padding: 15px 20px !important;
        display: block !important;
        border-bottom: 1px solid #f0f0f0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        outline: none !important;
        text-align: right !important;
        direction: rtl !important;
        text-transform: none !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    
    /* Remove the animated underline from desktop */
    .site-header .main-menu li a::after {
        display: none !important;
    }
    
    /* Sub-menu Items (Categories) as Accordion */
    .horizontal-sub-menu {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        display: none !important; 
        background-color: #faf9f6 !important;
        box-shadow: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        flex-direction: column !important;
        padding: 0 !important;
        gap: 0 !important;
        border: none !important;
        outline: none !important;
    }
    
    .horizontal-sub-menu.show-menu {
        display: flex !important;
    }

    .horizontal-sub-menu li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        outline: none !important;
    }

    .horizontal-sub-menu li a {
        font-family: 'Assistant', sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #5A625E !important;
        padding: 15px 35px 15px 20px !important; /* Comfortable padding with indentation for hierarchy */
        display: block !important;
        border-bottom: 1px solid #f0f0f0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        outline: none !important;
        text-align: right !important;
        direction: rtl !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    
    /* 4. Mobile Interactions */
    @media (hover: none) {
        .site-header .main-menu li a:hover,
        .horizontal-sub-menu li a:hover {
            color: #2C302E !important;
        }
    }
    
    /* Ensure active state overrides for touch */
    .site-header .main-menu li a:active,
    .horizontal-sub-menu li a:active {
        color: #6B9E8A !important;
        background-color: transparent !important;
    }

    /* Page Header Adaptations */
    .baby-gifts-title {
        font-size: 32px !important; /* Scaled down from 46px */
    }
    
    .baby-gifts-subtitle {
        font-size: 17px !important;
    }
    
    .baby-gifts-title-line {
        margin: 5px auto 20px auto !important;
    }

    /* Product Grid Adaptations (Baby Gifts Page & WooCommerce) */
    .boutique-products-grid, .products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columns side-by-side on mobile */
        gap: 12px !important;
        padding: 10px !important;
    }
    
    .product-card img, .product img {
        height: 160px;
        object-fit: contain;
    }

    /* ── Mobile product card — frosted glass style ── */
    body.woocommerce-page .boutique-products-grid a.product-card,
    body .boutique-products-grid a.product-card {
        position: relative !important;
        overflow: hidden !important;
        border-radius: 16px !important;
        background: #f9f6f2 !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
    }

    body .boutique-products-grid a.product-card .product-img-wrap {
        margin-bottom: 0 !important;
        border-radius: 16px 16px 0 0 !important;
    }

    body .boutique-products-grid a.product-card h3.product-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #333333 !important;
        margin: 0 !important;
        padding: 8px 8px 4px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        border-radius: 0 !important;
    }

    body .boutique-products-grid a.product-card span.product-price {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #555555 !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        background: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        padding: 4px 8px 10px !important;
        margin: 0 !important;
        border-radius: 0 0 16px 16px !important;
    }
    
    /* Global Page Length / Section Spacing Reduction */
    .category-bubbles-section {
        padding-top: 15px !important;
        padding-bottom: 20px !important;
    }
    
    .customers-carousel-section {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    
    .about-maker-section {
        padding-top: 5px !important;
        padding-bottom: 20px !important;
        margin-top: 0 !important;
    }
    
    .main-hero-section {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        position: relative !important;
        height: 100svh !important;
        min-height: unset !important;
        overflow: hidden !important;
    }

    .main-hero-img {
        display: block !important;
        margin: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
    }

    /* במובייל: מציגים סרטון אחד על המסך המלא, והם מתחלפים ב-fade */
    .main-hero-section--split .hero-video-strip {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        z-index: 1 !important;
    }
    .main-hero-section--split .hero-video-col {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
        border: none !important;
    }
    .main-hero-section--split .hero-video-col.is-active {
        opacity: 1 !important;
    }
    .main-hero-section--split .main-hero-img {
        position: absolute !important;
        inset: 0 !important;
    }

    .home-categories, .featured-products, .lookbook-section {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    /* Force 3 columns for the masonry/category grid on mobile */
    .masonry-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important; /* Very small gap to maximize box width */
        padding: 10px !important;
        overflow-x: visible !important; /* Disable any previous horizontal scrolling */
    }
    
    .masonry-item {
        height: 130px !important; /* Shorter height to keep proportions nice */
        flex: none !important;
        width: 100% !important;
    }
    
    /* Crucial: Shrink the text so long Hebrew words fit inside a tiny 3-column box */
    .masonry-overlay h3 {
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        padding: 4px !important;
        word-break: break-word;
    }

    /* Scale down Floating Icons on Mobile */
    .whatsapp-float {
        width: 34px !important;
        height: 34px !important;
        bottom: 20px !important;
        right: 20px !important;
        background-color: #ffffff !important;
        border: none !important;
        box-shadow: 0 6px 20px rgba(74, 58, 50, 0.3) !important;
    }
    .whatsapp-float svg {
        width: 17px !important;
        height: 17px !important;
        fill: #4A3A32 !important;
    }

    .custom-accessibility-icon {
        width: 34px !important;
        height: 34px !important;
        bottom: 20px !important;
        left: 20px !important;
    }
    .custom-accessibility-icon svg {
        width: 17px !important;
        height: 17px !important;
    }
}

/* ==========================================================================
   SINGLE PRODUCT PAGE STYLES
   ========================================================================== */

.single-product .product_title {
    font-family: 'Assistant', sans-serif !important;
    font-weight: 800 !important;
    color: #4A3A32 !important;
    margin-bottom: 20px !important;
}

.summary .price {
    display: block !important;
    font-family: 'Assistant', sans-serif !important;
    font-weight: 700 !important;
    color: #C4587A !important; /* Dark pink */
    font-size: 28px !important;
    margin-bottom: 30px !important;
    text-align: right;
}

/* Vertical Stacking for Cart Form */
form.cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important; /* Right alignment for RTL */
    gap: 25px !important;
    margin-top: 20px !important;
}

/* Quantity Selector Styling */
.woocommerce .quantity {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-left: auto !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
    flex-direction: row-reverse !important;
}

.quantity input.qty {
    width: 65px !important;
    height: 55px !important;
    text-align: center;
    border: 1.5px solid #efe8e2 !important;
    border-radius: 12px;
    font-size: 20px;
    margin: 0 !important;
    padding: 0 !important;
    -moz-appearance: textfield;
    background: #fff;
    font-family: var(--font-family-primary);
    font-weight: 700;
    color: #4A3A32;
}

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

.quantity .minus, .quantity .plus {
    width: 55px;
    height: 55px;
    background: #fdfbf9;
    border: 1.5px solid #efe8e2;
    border-radius: 12px;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4A3A32;
    user-select: none;
}

.quantity .minus:hover, .quantity .plus:hover {
    background: #efe8e2;
    border-color: #d1ccc4;
}

/* Premium Add to Cart Button */
.single-product .button.alt {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 60px;
    background-color: #6B9E8A !important;
    color: #fff !important;
    font-family: 'Assistant', sans-serif !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    border-radius: 15px !important;
    padding: 10px 40px !important;
    transition: all 0.3s ease !important;
    letter-spacing: 1px;
    margin: 0 !important;
    box-shadow: 0 4px 10px rgba(105, 183, 162, 0.2);
}

.single-product .button.alt:hover {
    background-color: #4A3A32 !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Related Products Styling Fixes */
.related.products {
    clear: both;
    margin-top: 40px !important;
}

/* ── Product gallery (DIKU simple gallery, replaces FlexSlider) ── */
.single-product .woocommerce-product-gallery {
    width: 38%;
    margin: 0 auto 40px auto;
    float: none !important;
    opacity: 1 !important;
}

.diku-gallery__main {
    width: 100%;
    margin-bottom: 10px;
}
.diku-gallery__main img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}
.diku-gallery__zoom { display: block; }

.diku-gallery__thumbs {
    display: flex;
    flex-direction: row-reverse;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.diku-gallery__thumb {
    background: none;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 2px;
    cursor: pointer;
    transition: border-color 0.2s;
    width: 70px;
    height: 70px;
    overflow: hidden;
}
.diku-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}
.diku-gallery__thumb.is-active,
.diku-gallery__thumb:hover {
    border-color: #6B9E8A;
}

@media (max-width: 767px) {
    .single-product .woocommerce-product-gallery {
        width: 70%;
    }
    .diku-gallery__thumb {
        width: 55px;
        height: 55px;
    }
}

.single-product .summary {
    width: 100% !important;
    max-width: 600px;
    margin: 0 auto !important;
    float: none !important;
}

/* Related Products Styling Fixes */
.related.products {
    clear: both;
    margin-top: 50px !important;
}

.related.products h2 {
    text-align: right !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    padding-right: 5px;
    font-size: 24px !important;
    color: #4A3A32 !important;
}

/* ==========================================================================
   MOBILE OPTIMIZATIONS (Max-width: 767px)
   ========================================================================== */

@media (max-width: 767px) {
    /* 1. Reduce Product Image Size & Center */
    .single-product div.product .woocommerce-product-gallery {
        width: 70% !important; /* More delicate size on mobile */
        margin: 0 auto 25px auto !important;
        float: none !important;
        opacity: 1 !important;
    }

    /* 2. Scale Down Typography */
    .single-product .product_title {
        font-size: 24px !important;
        text-align: center !important;
        margin-bottom: 15px !important;
        padding: 0 10px !important;
    }

    .summary .price {
        font-size: 22px !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .woocommerce-product-details__short-description {
        font-size: 15px !important;
        text-align: center !important;
        line-height: 1.6 !important;
        padding: 0 20px !important;
    }

    /* 3. Adjust Cart Form for Mobile */
    form.cart {
        align-items: center !important;
        gap: 20px !important;
        padding: 0 20px !important;
    }

    .quantity {
        justify-content: center !important;
    }

    .quantity input.qty {
        width: 55px !important;
        height: 48px !important;
        font-size: 18px !important;
        border-radius: 10px !important;
    }

    .quantity .minus, .quantity .plus {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
        border-radius: 10px !important;
    }

    .single-product .button.alt {
        min-height: 55px !important;
        font-size: 18px !important;
        border-radius: 12px !important;
        width: 100% !important;
        padding: 10px 20px !important;
    }

    /* 4. Horizontal Scrolling Grid for Related Products */
    .related.products {
        display: block !important;
        width: 100% !important;
    }

    .related.products h2 {
        text-align: center !important;
        font-size: 22px !important;
        margin-bottom: 20px !important;
    }

    .related.products ul.products {
        width: 100% !important;
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        padding: 10px 15px 25px 15px !important;
        margin: 0 !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        direction: rtl !important; /* Ensure natural RTL scrolling */
    }

    .related.products ul.products::-webkit-scrollbar {
        display: none;
    }

    .related.products ul.products li.product {
        flex: 0 0 45% !important; /* Show two products in view */
        max-width: 45% !important;
        margin: 0 !important;
        scroll-snap-align: start;
        background: #fff;
        border-radius: 15px;
        padding: 12px !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.04);
        border: 1px solid #f9f6f3;
    }

    .related.products ul.products li.product img {
        height: 140px !important;
        object-fit: cover !important;
        border-radius: 10px !important;
        margin-bottom: 12px !important;
        width: 100% !important; /* Ensure image fills the card width */
    }

    .related.products ul.products li.product .woocommerce-loop-product__title {
        font-size: 14px !important;
        margin-bottom: 5px !important;
        line-height: 1.3 !important;
        height: 36px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .related.products ul.products li.product .price {
        font-size: 15px !important;
        margin-bottom: 10px !important;
        display: block !important;
    }

    .woocommerce ul.products li.product .button,
    .related.products ul.products li.product .button {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: 85% !important;
        margin: 15px auto 10px auto !important;
        padding: 8px 0 !important;
    }
}

/* ==========================================================================
   CSS Fallback for Special Projects Button Text
   ========================================================================== */
li.product[class*="׳₪׳¨׳•׳™׳§׳˜׳™׳-׳ž׳™׳•׳—׳“׳™׳"] .button,
li.product[class*="׳₪׳¨׳•׳™׳™׳§׳˜׳™׳-׳ž׳™׳•׳—׳“׳™׳"] .button {
    font-size: 0 !important;
}

li.product[class*="׳₪׳¨׳•׳™׳§׳˜׳™׳-׳ž׳™׳•׳—׳“׳™׳"] .button::before,
li.product[class*="׳₪׳¨׳•׳™׳™׳§׳˜׳™׳-׳ž׳™׳•׳—׳“׳™׳"] .button::before {
    content: '׳œ׳¦׳₪׳™׳™׳”' !important;
    font-size: 14px !important;
    visibility: visible !important;
    display: inline-block;
}

/* ==========================================================================
   Single Product Cleanups
   ========================================================================== */
.woocommerce-variation-price,
.reset_variations {
    display: none !important;
}

/* ==========================================================================
   Variable Product Add-to-Cart ג€” Full Layout Fix
   ========================================================================== */

/*
 * Root fix: form.cart has align-items:flex-end which shrink-wraps children.
 * Simple products work because .button.alt is a direct child and is given width:100%.
 * Variable products wrap quantity + button inside .woocommerce-variation-add-to-cart
 * which collapses to content size. We must force that wrapper to stretch full width,
 * then stack its children vertically so quantity sits above the button.
 */

/* 1. Force the wrapper to fill the full width of form.cart */
.single-product .woocommerce-variation-add-to-cart,
.single-product .variations_button {
    align-self: stretch !important;  /* stretch along the cross-axis of form.cart */
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important; /* RTL: quantity aligns right */
    gap: 25px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Button takes full width inside its now-stretched parent */
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.single-product .variations_button .single_add_to_cart_button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    /* Inherit exact styling from .single-product .button.alt */
    min-height: 60px !important;
    background-color: #6B9E8A !important;
    color: #fff !important;
    font-family: 'Assistant', sans-serif !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    border-radius: 15px !important;
    padding: 10px 40px !important;
    transition: all 0.3s ease !important;
    letter-spacing: 1px !important;
    box-shadow: 0 4px 10px rgba(105, 183, 162, 0.2) !important;
}

.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button:hover,
.single-product .variations_button .single_add_to_cart_button:hover {
    background-color: #4A3A32 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

/* 3. Quantity row sits above button, right-aligned for RTL */
.single-product .woocommerce-variation-add-to-cart .quantity,
.single-product .variations_button .quantity {
    margin: 0 !important;
    align-self: flex-end !important;
}

/* 4. Mobile: center-align everything inside the variable container */
@media (max-width: 768px) {
    .single-product .woocommerce-variation-add-to-cart,
    .single-product .variations_button {
        align-items: center !important;
    }

    .single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button,
    .single-product .variations_button .single_add_to_cart_button {
        min-height: 55px !important;
        font-size: 18px !important;
        border-radius: 12px !important;
        padding: 10px 20px !important;
    }

    .single-product .woocommerce-variation-add-to-cart .quantity,
    .single-product .variations_button .quantity {
        align-self: center !important;
    }
}

/* ג”€ג”€ג”€ Quick View Modal ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
.diku-qv-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.diku-qv-overlay.active {
    opacity: 1;
    visibility: visible;
}
.diku-qv-modal {
    background: #fdfcf9;
    border-radius: 20px;
    padding: 36px 32px 32px;
    max-width: 520px;
    width: calc(100% - 32px);
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    direction: rtl;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    transform: translateY(24px);
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (max-width: 768px) {
    .diku-qv-modal {
        max-width: calc(100% - 32px);
        max-height: 65vh;
        padding: 24px 18px 20px;
        border-radius: 16px;
    }
}
.diku-qv-overlay.active .diku-qv-modal {
    transform: translateY(0);
}
.diku-qv-close {
    position: absolute;
    top: 12px;
    left: 14px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #4A3A32;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.2s;
}
.diku-qv-close:hover { background: #f0ebe1; }

.diku-qv-loading,
.diku-qv-error {
    text-align: center;
    padding: 48px 20px;
    font-family: 'Assistant', sans-serif;
    color: #785b4d;
    font-size: 17px;
}
/* Two-column layout: image left, details right */
.diku-qv-layout {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    direction: ltr; /* keep image on left regardless of RTL modal */
}
.diku-qv-col-image {
    flex: 0 0 120px;
}
.diku-qv-col-image img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}
.diku-qv-col-details {
    flex: 1;
    min-width: 0;
    direction: rtl; /* restore RTL for text content */
}
.diku-qv-product-title {
    font-family: 'Assistant', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #4A3A32;
    margin: 0 0 10px;
}
.diku-qv-product-price {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 700;
    color: #6B9E8A;
}
/* Add-to-cart button inside the modal */
.diku-qv-product-form .single_add_to_cart_button {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    background: #6B9E8A !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer;
    transition: background 0.25s, transform 0.2s;
    font-family: 'Assistant', sans-serif;
    margin-top: 10px;
}
.diku-qv-product-form .single_add_to_cart_button:hover {
    background: #5aa492 !important;
    transform: scale(1.02);
}
.diku-qv-product-form .single_add_to_cart_button:disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
    transform: none !important;
}
/* Variation table ג€“ explicit display values so flex/RTL context can't collapse cells */
.diku-qv-product-form table.variations          { display: table       !important; width: 100%; margin-bottom: 16px; border: none; }
.diku-qv-product-form table.variations tbody    { display: table-row-group !important; }
.diku-qv-product-form table.variations tr       { display: table-row   !important; }
.diku-qv-product-form table.variations th.label { display: table-cell  !important; padding: 6px 12px 6px 0; vertical-align: middle; border: none; white-space: nowrap; }
.diku-qv-product-form table.variations td.value { display: table-cell  !important; padding: 6px 0; vertical-align: middle; border: none; width: 100%; }
.diku-qv-product-form table.variations td.value select { display: block !important; }
/* Variation result + add-to-cart area */
.diku-qv-product-form .single_variation_wrap    { display: block !important; }
.diku-qv-product-form .woocommerce-variation-add-to-cart,
.diku-qv-product-form .variations_button        { display: flex  !important; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.diku-qv-product-form .variations label { font-weight: 700; color: #4A3A32; font-family: 'Assistant', sans-serif; }
.diku-qv-product-form select {
    border: 1.5px solid #e0d6ce;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 15px;
    font-family: 'Assistant', sans-serif;
    color: #4A3A32;
    background: #fff;
    width: 100%;
}
/* Quantity row with injected +/גˆ’ steppers */
.diku-qv-product-form .quantity { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.diku-qv-product-form .quantity .minus,
.diku-qv-product-form .quantity .plus {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1.5px solid #e0d6ce;
    border-radius: 8px;
    background: #fdfcf9;
    color: #4A3A32;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}
.diku-qv-product-form .quantity .minus:hover,
.diku-qv-product-form .quantity .plus:hover { background: #f0ebe1; }
.diku-qv-product-form .quantity input.qty {
    width: 52px;
    text-align: center;
    border: 1.5px solid #e0d6ce;
    border-radius: 8px;
    padding: 6px 4px;
    font-size: 15px;
    font-family: 'Assistant', sans-serif;
    color: #4A3A32;
}
/* Error line */
.diku-qv-cart-error { color: #c0392b; font-size: 14px; margin-bottom: 12px; font-family: 'Assistant', sans-serif; }

/* ── ברכה אישית + כיתוב אישי בתוך מודל Quick View ── */

/* פריסת גריד: תמונה ופרטים בשורה אחת, הטופס שורה מתחת ברוחב מלא */
#diku-qv-body .diku-qv-layout {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    gap: 0 20px !important;
    align-items: start !important;
}
@media (max-width: 480px) {
    #diku-qv-body .diku-qv-layout {
        grid-template-columns: 80px 1fr !important;
        gap: 0 12px !important;
    }
}

/* "העלמת" ה-div שעוטף את הפרטים כדי שהילדים יסתדרו בגריד של האבא */
#diku-qv-body .diku-qv-col-details {
    display: contents !important;
}

/* מיקום התמונה */
#diku-qv-body .diku-qv-col-image {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
}

/* כותרת ומחיר — לצד התמונה */
#diku-qv-body .diku-qv-product-title {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    margin-bottom: 5px !important;
}
#diku-qv-body .diku-qv-product-price {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    margin-bottom: 15px !important;
}

/* הטופס עצמו — שורה חדשה, רוחב מלא לאורך שתי העמודות */
#diku-qv-body .diku-qv-product-form {
    grid-column: 1 / 3 !important;
    grid-row: 3 / 4 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* מרכוז אמיתי לגריד */
    width: 100% !important;
    margin-top: 15px !important;
}
#diku-qv-body form.cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}



/* ברכה אישית — רוחב מלא, ללא מרג'ין אופקי */
#diku-qv-body .diku-greeting-field,
#diku-qv-body .custom-personalization-field {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    margin: 10px 0 !important;
    border-radius: 8px !important;
}
#diku-qv-body .diku-greeting-field label,
#diku-qv-body .custom-personalization-field label {
    font-size: 13px !important;
    margin-bottom: 5px !important;
}
#diku-qv-body .diku-greeting-field textarea,
#diku-qv-body .custom-personalization-field input[type="text"] {
    font-size: 13px !important;
    padding: 7px 10px !important;
    min-height: unset !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#diku-qv-body .diku-greeting-field textarea {
    min-height: 56px !important;
    max-height: 80px !important;
    resize: none !important;
}
#diku-qv-body .field-hint {
    font-size: 11px !important;
    margin-bottom: 6px !important;
}

/* כמות — ממורכז לחלוטין */
#diku-qv-body .diku-qv-product-form .quantity,
#diku-qv-body form.cart .quantity {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 10px 0 15px 0 !important;
}

/* כפתור הוספה לסל — ממורכז ורוחב מלא לחלון */
#diku-qv-body .diku-qv-product-form .single_add_to_cart_button,
#diku-qv-body form.cart .single_add_to_cart_button {
    width: 100% !important;
    margin: 0 !important;
}

/* variation add-to-cart wrapper — עמודה, ממורכז לחלוטין */
#diku-qv-body .woocommerce-variation-add-to-cart,
#diku-qv-body .variations_button {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

/* ==========================================================================
   Product Description Tab — Font Size
   ========================================================================== */
.woocommerce-Tabs-panel--description p,
.woocommerce-Tabs-panel--description li,
.woocommerce-Tabs-panel--description span,
.woocommerce-Tabs-panel--description div {
    font-size: 20px;
    line-height: 1.8;
}

@media (max-width: 480px) {
    .diku-qv-modal {
        padding: 20px 16px 18px;
        border-radius: 16px;
        max-width: calc(100% - 32px);
        max-height: 72vh;          /* לא יותר מ-72% גובה המסך */
    }
    .diku-qv-layout {
        flex-direction: row;       /* תמונה קטנה לצד פרטים */
        align-items: flex-start;
        gap: 12px;
    }
    .diku-qv-col-image { flex: 0 0 80px; }
    .diku-qv-col-image img {
        width: 80px;
        height: 80px;
        border-radius: 10px;
    }
    .diku-qv-col-details { direction: rtl; flex: 1; min-width: 0; }
    .diku-qv-product-title { font-size: 16px; margin-bottom: 6px; }
    .diku-qv-product-price { font-size: 15px; margin-bottom: 12px; }
    .diku-qv-product-form .single_add_to_cart_button {
        font-size: 15px !important;
        padding: 10px 14px !important;
        min-height: unset !important;
        border-radius: 10px !important;
    }
    /* כפתור סגירה קטן יותר */
    .diku-qv-close { font-size: 20px; top: 8px; left: 10px; }
}

/* Cart page styles moved to assets/css/cart.css */

/* ── Force WooCommerce 'Added to Cart' Modern Floating Card (RTL) ── */

/* High specificity override for the main notice container */
body .woocommerce-message {
    border-top: none !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
    border-radius: 16px !important;
    padding: 16px 24px !important;
    margin: 24px 0 !important;
    display: block !important; /* Let our inner wrapper handle the flex layout */
    border: 1px solid #efe8e2 !important;
    color: #4a3a32 !important;
    direction: rtl !important;
    text-align: right !important;
    background-image: none !important;
    position: relative !important;
    overflow: hidden !important; /* Prevents any pseudo-elements or borders from sticking out */
    box-sizing: border-box !important;
}

/* Strictly hide WooCommerce's default ::before and ::after pseudo-elements */
body .woocommerce-message::before,
body .woocommerce-message::after {
    display: none !important;
    content: none !important;
}

/* Inner Flexbox Container */
body .woocommerce-message .diku-cart-notice-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Checkmark & Text Wrapper (Right aligned in RTL) */
body .woocommerce-message .diku-notice-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Modern Checkmark Icon Badge */
body .woocommerce-message .diku-notice-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    background-color: #69b7a2 !important; /* Soft boutique green */
    color: #ffffff !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(105, 183, 162, 0.3) !important;
}

/* Success Message Text */
body .woocommerce-message .diku-notice-text {
    font-family: 'Assistant', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #4a3a32 !important; /* Deep earthy brown */
    margin: 0 !important;
    line-height: 1.3 !important;
    text-align: right !important;
}

/* View Cart Button (Left aligned in RTL) */
body .woocommerce-message a.button.wc-forward.diku-notice-btn {
    background-color: #4a3a32 !important;
    color: #ffffff !important;
    font-family: 'Assistant', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 12px 28px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
    box-shadow: 0 4px 12px rgba(74, 58, 50, 0.15) !important;
    line-height: 1 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    float: none !important;
}

body .woocommerce-message a.button.wc-forward.diku-notice-btn:hover {
    background-color: #69b7a2 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(105, 183, 162, 0.3) !important;
}

/* Mobile Responsiveness (Modern Floating Toast Notification for max-width: 768px) */
@media (max-width: 768px) {
    /* 1. Main Toast Container */
    body .woocommerce-message {
        position: fixed !important;
        bottom: 24px !important;
        left: 16px !important;
        right: 16px !important;
        z-index: 99999 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 14px !important;
        margin: 0 !important;
        width: auto !important;
        box-sizing: border-box !important;
        border-radius: 100px !important; /* Pill-shaped toast */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
        background-color: #ffffff !important;
        border: 1px solid #efe8e2 !important;
    }

    /* 2. Inner Wrapper */
    body .woocommerce-message .diku-cart-notice-wrap {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Info Block (Icon + Text) */
    body .woocommerce-message .diku-notice-info {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-grow: 1 !important;
        overflow: hidden !important;
    }

    /* Compact Checkmark Icon Badge */
    body .woocommerce-message .diku-notice-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 13px !important;
        flex-shrink: 0 !important;
    }

    /* Compact Success Message Text */
    body .woocommerce-message .diku-notice-text {
        text-align: right !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    /* 4. Compact View Cart Button */
    body .woocommerce-message a.button.wc-forward.diku-notice-btn {
        display: inline-flex !important;
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 8px 16px !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 100px !important; /* Matches pill shape */
        font-size: 13px !important;
        font-weight: 700 !important;
        flex-shrink: 0 !important;
        box-shadow: 0 2px 8px rgba(74, 58, 50, 0.15) !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        float: none !important;
    }
}

/* ── Unique Center AJAX Toast (Related Products / Quick View) ── */

.diku-center-ajax-toast {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 999999 !important;
    background-color: #ffffff !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    border-radius: 16px !important;
    padding: 20px 28px !important;
    border: 1px solid #efe8e2 !important;
    color: #4a3a32 !important;
    direction: rtl !important;
    text-align: right !important;
    width: 90% !important;
    max-width: 480px !important;
    box-sizing: border-box !important;
}

.diku-center-ajax-toast .diku-center-toast-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

.diku-center-ajax-toast .diku-center-toast-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-grow: 1 !important;
}

.diku-center-ajax-toast .diku-center-toast-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background-color: #69b7a2 !important; /* Soft boutique green */
    color: #ffffff !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(105, 183, 162, 0.3) !important;
}

.diku-center-ajax-toast .diku-center-toast-text {
    font-family: 'Assistant', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #4a3a32 !important; /* Deep earthy brown */
    margin: 0 !important;
    line-height: 1.3 !important;
    text-align: right !important;
}

.diku-center-ajax-toast a.button.wc-forward.diku-center-toast-btn {
    background-color: #4a3a32 !important;
    color: #ffffff !important;
    font-family: 'Assistant', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 10px 24px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
    box-shadow: 0 4px 12px rgba(74, 58, 50, 0.15) !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.diku-center-ajax-toast a.button.wc-forward.diku-center-toast-btn:hover {
    background-color: #69b7a2 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(105, 183, 162, 0.3) !important;
}

/* Mobile Responsiveness for Center Toast */
@media (max-width: 576px) {
    .diku-center-ajax-toast {
        padding: 20px 16px !important;
        width: 92% !important;
    }
    .diku-center-ajax-toast .diku-center-toast-wrap {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
    }
    .diku-center-ajax-toast .diku-center-toast-info {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
    }
    .diku-center-ajax-toast .diku-center-toast-text {
        text-align: center !important;
        font-size: 17px !important;
    }
    .diku-center-ajax-toast a.button.wc-forward.diku-center-toast-btn {
        width: 100% !important;
        padding: 14px 20px !important;
    }
}

/* ==========================================================================
   MOBILE HORIZONTAL SHOP PILL MENU SHORTCODE
   ========================================================================== */
@media (max-width: 768px) {
    .diku-mobile-shop-menu-wrapper {
        position: relative;
        width: 100%;
        margin: 15px 0 25px 0;
        display: flex;
        align-items: center;
    }

    /* Subtle white fading effect overlays on the left and right edges */
    .diku-mobile-shop-menu-wrapper::before,
    .diku-mobile-shop-menu-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 35px;
        z-index: 5;
        pointer-events: none;
    }

    /* Right edge fade (Start of RTL) */
    .diku-mobile-shop-menu-wrapper::before {
        right: 0;
        background: linear-gradient(to left, #ffffff 15%, rgba(255, 255, 255, 0) 100%);
    }

    /* Left edge fade (End of RTL) */
    .diku-mobile-shop-menu-wrapper::after {
        left: 0;
        background: linear-gradient(to right, #ffffff 15%, rgba(255, 255, 255, 0) 100%);
    }

    .diku-mobile-shop-menu-container {
        width: 100%;
        overflow: hidden;
        /* Optional CSS mask for an even softer edge dissolve */
        -webkit-mask-image: linear-gradient(to left, transparent 2%, black 10%, black 90%, transparent 98%);
        mask-image: linear-gradient(to left, transparent 2%, black 10%, black 90%, transparent 98%);
    }

    .diku-mobile-shop-menu-list {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        direction: rtl;
        list-style: none;
        margin: 0;
        padding: 4px 15px;
        gap: 10px;
    }

    /* Thin, elegant scrollbar for the mobile category menu */
    .diku-mobile-shop-menu-list::-webkit-scrollbar {
        height: 3px;
    }

    .diku-mobile-shop-menu-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .diku-mobile-shop-menu-list::-webkit-scrollbar-thumb {
        background-color: rgba(180, 180, 175, 0.55);
        border-radius: 999px;
    }

    .diku-mobile-shop-menu-list {
        -ms-overflow-style: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(180, 180, 175, 0.55) transparent;
        padding-bottom: 6px;
    }

    .diku-shop-menu-item {
        margin: 0;
        padding: 0;
        flex-shrink: 0;
    }

    .diku-shop-menu-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 20px;
        padding: 8px 18px;
        font-family: 'Assistant', sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: #4A3A32; /* Deep earthy brand brown */
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 0 2px 6px rgba(0,0,0,0.03);
        user-select: none;
    }

    .diku-shop-menu-pill:hover,
    .diku-shop-menu-pill:active,
    .diku-shop-menu-pill.active {
        background-color: #ffffff;
        border-color: #6B9E8A; /* Primary brand green */
        color: #6B9E8A;
        box-shadow: 0 4px 12px rgba(105, 183, 162, 0.15);
        transform: translateY(-1px);
    }
}

/* Hero logo overlay */
.hero-logo-overlay {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
}
.hero-logo {
    width: 90vw;
    max-width: 1200px;
    height: auto;
    display: block;
}
@media (max-width: 768px) {
    .hero-logo-overlay {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .hero-logo {
        width: 95vw;
        max-width: none;
        margin: 0 auto;
    }
}

/* Masonry grid — blur image on hover so overlay text is readable */
.masonry-item img {
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.35s ease;
}
.masonry-item:hover img {
    transform: scale(1.06);
    filter: blur(4px);
}
.masonry-item__price {
    color: #fff;
    font-family: Assistant, sans-serif;
    font-size: 14px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 3px 14px;
}

/* ==========================================================================
   Mobile Menu — Hamburger → X Animation & Frosted Glass Overlay
   ========================================================================== */

/* 1. Hamburger button base — three bars via pseudo-elements + span */
.menu-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    background: none;
    border: none;
    transition: color 0.25s ease;
}

/* Suppress any SVG the theme might inject */
.menu-toggle svg {
    display: none;
}

/* Shared bar styles — pseudo-elements get content:'', span ignores it */
.menu-toggle::before,
.menu-toggle::after,
.menu-toggle .menu-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #4A3A32;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    margin-left: -11px;
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.25s ease,
                top       0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-toggle::before      { content: ''; top: 11px; }
.menu-toggle .menu-toggle-bar { top: 19px; opacity: 1; }
.menu-toggle::after       { content: ''; top: 27px; }

/* Active state: three bars morph into an X */
.menu-toggle.is-active::before {
    top: 19px;
    transform: rotate(45deg);
}
.menu-toggle.is-active .menu-toggle-bar {
    opacity: 0;
    transform: scaleX(0);
}
.menu-toggle.is-active::after {
    top: 19px;
    transform: rotate(-45deg);
}

/* Show hamburger only on mobile */
@media screen and (max-width: 768px) {
    .menu-toggle { display: flex; }
}

/* 2. Menu animation keyframes */
@keyframes menuGlassIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes menuGlassOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes menuItemIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 3. Mobile overlay styles
   These use .site-header as a scope prefix so they match or exceed the
   specificity of the global "display: flex !important" rule and win. */
@media screen and (max-width: 768px) {

    /* --- Closed state: HIDE the menu --- */
    .site-header .main-menu,
    .site-header nav > ul {
        display: none !important;
    }

    /* --- Open state: full-screen frosted overlay --- */
    .site-header .main-menu.is-open,
    .site-header .main-menu.toggled,
    .site-header nav > ul.is-open,
    .site-header nav > ul.toggled {
        display:         flex !important;
        flex-direction:  column !important;
        align-items:     center !important;
        justify-content: flex-start !important;
        gap:             0 !important;

        position: fixed !important;
        top:    0 !important;
        right:  0 !important;
        left:   0 !important;
        bottom: auto !important;
        width:  100vw !important;
        height: auto !important;

        background:            #ffffff !important;
        backdrop-filter:       blur(18px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(180%) !important;

        z-index:     9998 !important;
        padding:     80px 24px 40px !important;
        box-sizing:  border-box !important;
        overflow-y:  auto !important;
        list-style:  none !important;

        animation: menuGlassIn 0.25s ease both;
    }

    /* --- אנימציית סגירה --- */
    .site-header .main-menu.is-closing {
        animation: menuGlassOut 0.2s ease both !important;
    }

    /* --- List items --- */
    .site-header .main-menu.is-open > li,
    .site-header .main-menu.toggled > li {
        width:         100% !important;
        text-align:    center !important;
        border-bottom: 1px solid rgba(44, 48, 46, 0.08) !important;
        opacity:       0;
        visibility:    visible !important;
        animation: menuItemIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    /* Stagger — כל פריט נכנס קצת אחרי הקודם */
    .site-header .main-menu.is-open > li:nth-child(1),
    .site-header .main-menu.toggled > li:nth-child(1) { animation-delay: 0.08s; }
    .site-header .main-menu.is-open > li:nth-child(2),
    .site-header .main-menu.toggled > li:nth-child(2) { animation-delay: 0.14s; }
    .site-header .main-menu.is-open > li:nth-child(3),
    .site-header .main-menu.toggled > li:nth-child(3) { animation-delay: 0.20s; }
    .site-header .main-menu.is-open > li:nth-child(4),
    .site-header .main-menu.toggled > li:nth-child(4) { animation-delay: 0.26s; }
    .site-header .main-menu.is-open > li:nth-child(5),
    .site-header .main-menu.toggled > li:nth-child(5) { animation-delay: 0.32s; }
    .site-header .main-menu.is-open > li:nth-child(6),
    .site-header .main-menu.toggled > li:nth-child(6) { animation-delay: 0.38s; }
    .site-header .main-menu.is-open > li:nth-child(7),
    .site-header .main-menu.toggled > li:nth-child(7) { animation-delay: 0.44s; }

    .site-header .main-menu.is-open > li:last-child,
    .site-header .main-menu.toggled > li:last-child {
        border-bottom: none !important;
    }

    /* --- Links: explicitly locked visible and clickable --- */
    .site-header .main-menu.is-open > li > a,
    .site-header .main-menu.toggled > li > a {
        display:         block !important;
        visibility:      visible !important;
        opacity:         1 !important;
        color:           #4A3A32 !important;
        font-size:       1.25rem !important;
        font-weight:     700 !important;
        padding:         16px 0 !important;
        text-align:      center !important;
        text-decoration: none !important;
        letter-spacing:  0.03em !important;
        position:        relative !important;
        z-index:         1 !important;
        transition:      color 0.2s ease !important;
    }

    .site-header .main-menu.is-open > li > a:hover,
    .site-header .main-menu.toggled > li > a:hover {
        color: #6B9E8A !important;
    }

    /* --- Submenu inside overlay --- */
    .site-header .main-menu.is-open .horizontal-sub-menu,
    .site-header .main-menu.toggled .horizontal-sub-menu {
        position:   static !important;
        width:      100% !important;
        display:    none !important;
        flex-direction: column !important;
        align-items: center !important;
        background: transparent !important;
        box-shadow: none !important;
        border:     none !important;
        padding:    4px 0 12px !important;
        opacity:    1 !important;
        visibility: visible !important;
        transform:  none !important;
        transition: none !important;
    }

    .site-header .main-menu.is-open .horizontal-sub-menu.show-menu,
    .site-header .main-menu.toggled .horizontal-sub-menu.show-menu {
        display: flex !important;
    }

    .site-header .main-menu.is-open .horizontal-sub-menu li a,
    .site-header .main-menu.toggled .horizontal-sub-menu li a {
        display:    block !important;
        visibility: visible !important;
        opacity:    1 !important;
        font-size:  1rem !important;
        color:      #785b4d !important;
        padding:    10px 0 !important;
    }

    /* --- Stacking: header bar and toggle sit above the overlay --- */
    .site-header {
        position: sticky !important;
        overflow: visible !important;
        z-index:  9999 !important;
    }

    .menu-toggle {
        position: relative !important;
        z-index:  10000 !important;
    }

    .main-navigation {
        position: static !important;
    }
}

/* ==========================================================================
   .link-arrow — Subtle RTL Arrow Link  (e.g. "לסיפור המלא ←")
   ========================================================================== */

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-family: var(--font-family-primary);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-secondary, #5A625E);
    text-decoration: none;
    letter-spacing: 0.02em;
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease,
                border-color 0.25s ease;
    direction: rtl;
}

.link-arrow:hover {
    color: var(--color-text-primary, #2C302E);
    border-bottom-color: var(--color-text-primary, #2C302E);
}

/* Arrow nudges to the right (toward reading direction in RTL) on hover */
.link-arrow__icon {
    display: inline-block;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-arrow:hover .link-arrow__icon {
    transform: translateX(-5px); /* RTL: right-side arrow moves further right */
}