/* ==========================================================================
   S.B gift - Design System & Stylesheet
   Theme Colors: Primary Beige, Secondary Stone, Brown, Dark Green
   Direction: RTL (Hebrew)
   ========================================================================== */

@import 'SpecularButton.css';

/* Heebo (SIL Open Font License 1.1) - self-hosted variable font, weight 100-900.
   Hebrew by Oded Ezer, Latin from Roboto. Single family for the whole site. */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../assets/fonts/heebo/heebo-hebrew.woff2') format('woff2');
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../assets/fonts/heebo/heebo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../assets/fonts/heebo/heebo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
   Print-preview fonts (OFL 1.1). NOT part of the site UI.
   These exist only so the gift builder can preview the font the customer
   picks for the text printed on their gift (#modal-balloon-font).
   Do not use them for interface chrome - the UI is Heebo only.
   --------------------------------------------------------------------------- */
@font-face {
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../assets/fonts/print/assistant-hebrew.woff2') format('woff2');
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../assets/fonts/print/assistant-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Frank Ruhl Libre';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../assets/fonts/print/frankruhl-hebrew.woff2') format('woff2');
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family: 'Frank Ruhl Libre';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../assets/fonts/print/frankruhl-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Typography: single family across the entire site */
    --font-main: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    /* Primary Color: Rich Luxury Beige */
    --bg-primary: #F3EDE2;
    --bg-secondary: #EADFCE;
    --bg-card: #FAF6F0;
    --beige-dark: #DECFA3;
    --beige-gold: #F0E6D2;

    /* Secondary Color 1: Stone */
    --stone-light: #EBE4DC;
    --stone-main: #C7B7A3;
    --stone-dark: #9E8E7C;

    /* Secondary Color 2: Warm Brown */
    --brown-deep: #5C3D2E;
    --brown-main: #8B5E3C;
    --brown-dark: #3D271D;
    --brown-light: #A87D59;

    /* Primary Accent: Deep Warm Brown (Replaced Green) */
    --dark-green-primary: #3D271D;
    --dark-green-accent: #5C3D2E;
    --dark-green-deep: #251710;
    --dark-green-light: #7A523E;

    /* Large brown panels (page heroes, teaser card) */
    --brown-panel: #AB886B;

    /* Accent Gold & Highlights */
    --gold-primary: #C5A059;
    --gold-glow: rgba(197, 160, 89, 0.25);

    /* Text & UI Colors */
    --text-main: #2D231F;
    --text-muted: #6B5E57;
    --text-light: #8C7D75;
    --border-color: #E2DAD0;
    --shadow-sm: 0 4px 12px rgba(92, 61, 46, 0.05);
    --shadow-md: 0 8px 24px rgba(30, 58, 43, 0.08);
    --shadow-lg: 0 16px 40px rgba(30, 58, 43, 0.12);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-primary);
    color: var(--text-main);
    direction: rtl;
    text-align: right;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.serif-font {
    font-family: var(--font-main);
    font-weight: 700;
    letter-spacing: -0.01em;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

/* Form controls do not inherit the document font by default - without this
   they fall back to the OS UI font and break the single-family rule. */
input,
select,
textarea,
optgroup,
option {
    font-family: inherit;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    transition: var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* מתגי תכולה מפאנל הניהול (data-sb-feature).
   ברירת המחדל היא הסתרה — js/api.js מסיר את hidden רק כשההגדרה דלוקה.
   ה-!important נדרש כי כללים כמו .sbgift-menu-item{display:flex} גוברים
   על סגנון הדפדפן ל-[hidden]. */
[data-sb-feature][hidden] {
    display: none !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--stone-main);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brown-main);
}

/* Container */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.8rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    white-space: nowrap;
    background: transparent;
    border: 2px solid transparent;
}

.btn-primary {
    background: transparent;
    color: var(--dark-green-primary);
    border: 2px solid var(--dark-green-primary);
    box-shadow: none;
}

.btn-primary:hover {
    background: rgba(255, 255, 255, 0.25);
    color: var(--dark-green-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 58, 43, 0.15);
}

.btn-secondary {
    background: transparent;
    color: var(--brown-deep);
    border: 2px solid var(--stone-main);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    color: var(--brown-deep);
    border-color: var(--stone-main);
}

.btn-brown {
    background: transparent;
    color: var(--brown-deep);
    border: 2px solid var(--brown-deep);
}

.btn-brown:hover {
    background: rgba(255, 255, 255, 0.25);
    color: var(--brown-deep);
    transform: translateY(-2px);
}

.btn-gold,
.btn-outline-gold {
    border: 2px solid var(--gold-primary);
    color: var(--gold-primary);
    background: transparent;
}

.btn-gold:hover,
.btn-outline-gold:hover {
    background: rgba(255, 255, 255, 0.25);
    color: var(--gold-primary);
}

/* ==========================================================================
   SBGift Navigation Header & Drawer Styling
   ========================================================================== */
.header.sbgift-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(243, 237, 226, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(30, 58, 43, 0.05);
    transition: all var(--transition-smooth);
}

.sbgift-navbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0.65rem 0;
    gap: 1rem;
}

/* RTL Column alignment */
.sbgift-nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sbgift-nav-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sbgift-nav-left {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
}

/* SBGift Menu Trigger Button (Right Side in RTL) */
.sbgift-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: transparent;
    border: none;
    color: var(--dark-green-primary);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.sbgift-menu-trigger::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 0.8rem;
    left: 0.8rem;
    height: 1.5px;
    background: var(--gold-primary);
    transform: scaleX(0);
    transition: transform var(--transition-fast);
}

.sbgift-menu-trigger:hover::after {
    transform: scaleX(1);
}

.sbgift-menu-trigger:hover {
    color: var(--brown-deep);
}

/* Custom SBGift 2-Line Hamburger Icon - Thin sleek lines */
.sbgift-hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 18px;
    height: 14px;
}

.sbgift-hamburger-icon span {
    display: block;
    width: 100%;
    height: 1.2px;
    background-color: var(--dark-green-primary);
    border-radius: 1px;
    transition: all var(--transition-fast);
}

.sbgift-menu-trigger:hover .sbgift-hamburger-icon span {
    background-color: var(--gold-primary);
}

.sbgift-menu-trigger:hover .sbgift-hamburger-icon span:nth-child(1) {
    transform: translateX(-2px);
}

.sbgift-menu-trigger:hover .sbgift-hamburger-icon span:nth-child(2) {
    transform: translateX(2px);
}

/* SBGift Centered Brand Logo */
.sbgift-brand-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform var(--transition-fast);
}

.sbgift-brand-logo:hover {
    transform: scale(1.03);
}

.sbgift-logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.sbgift-logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
}

/* SBGift Search & Cart Triggers (Left Side in RTL) */
.sbgift-search-trigger,
.sbgift-cart-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0.4rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

/* הסל בלבד: תג הכמות ממוקם עליו absolute, ו-box-shadow מבטל הצללה
   שכפתורים כלליים מקבלים */
.sbgift-cart-trigger {
    position: relative;
    box-shadow: none;
}

/* Ultra Thin SVG Icons for Search & Cart */
.sbgift-icon {
    width: 22px;
    height: 22px;
    stroke: var(--dark-green-primary);
    stroke-width: 1.25px;
    transition: stroke var(--transition-fast), transform var(--transition-fast);
}

.sbgift-search-trigger:hover .sbgift-icon,
.sbgift-cart-trigger:hover .sbgift-icon {
    stroke: var(--gold-primary);
    transform: scale(1.08);
}

.sbgift-cart-trigger .cart-badge {
    position: absolute;
    top: 1px;
    left: 2px;
    background: transparent;
    color: var(--dark-green-primary);
    font-size: 0.8rem;
    font-weight: 800;
    border: none;
    display: inline-block;
    line-height: 1;
    pointer-events: none;
}

/* ==========================================================================
   SBGift Side Navigation Drawer (Off-Canvas Right Side)
   ========================================================================== */
.sbgift-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(21, 43, 30, 0.65);
    backdrop-filter: blur(8px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s ease;
}

.sbgift-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.sbgift-nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    /* שלושה רבעים מרוחב המסך, בכל גודל מסך. הערך הקודם היה רוחב קבוע
       בפיקסלים, ולכן במסך רחב התפריט נראה כרצועה צרה בצד. */
    width: 75%;
    height: 100vh;
    background: var(--bg-secondary);
    border-left: 1px solid var(--stone-main);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.25);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    z-index: 1001;
}

.sbgift-nav-overlay.active .sbgift-nav-drawer {
    transform: translateX(0);
}

/* Drawer Header */
.sbgift-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.sbgift-drawer-close {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sbgift-drawer-close:hover {
    color: var(--brown-deep);
}

/* Drawer Body */
.sbgift-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sbgift-drawer-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sbgift-menu-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 0.5rem;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.sbgift-menu-item .title {
    font-family: var(--font-main);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--dark-green-primary);
    flex: 1;
    transition: color var(--transition-fast);
}

.sbgift-menu-item:hover {
    padding-right: 1rem;
}

.sbgift-menu-item:hover .title {
    color: var(--gold-primary);
}

.sbgift-menu-item.active .title {
    color: var(--brown-deep);
}

.sbgift-wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: transparent;
    color: #FFFFFF;
    padding: 0.75rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.95rem;
    transition: all var(--transition-fast);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.sbgift-wa-btn:hover {
    background: #1EBE5B;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* ==========================================================================
   SBGift Search Overlay Drawer (Top Dropdown Bar)
   ========================================================================== */
.sbgift-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(243, 237, 226, 0.98);
    backdrop-filter: blur(16px);
    border-bottom: 2px solid var(--gold-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 999;
    transform: translateY(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 1.5rem 0 2rem;
}

.sbgift-search-overlay.active {
    transform: translateY(0);
}

.sbgift-search-container {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.sbgift-search-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.sbgift-search-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 1.5px solid var(--stone-main);
    border-radius: var(--radius-full);
    padding: 0.75rem 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: all var(--transition-fast);
}

.sbgift-search-input-wrap:focus-within {
    border-color: var(--dark-green-primary);
    box-shadow: 0 4px 18px rgba(30, 58, 43, 0.12);
}

.sbgift-search-input-wrap .search-icon {
    font-size: 1.2rem;
    color: var(--gold-primary);
    margin-left: 0.8rem;
}

.sbgift-search-input-wrap input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.1rem;
    font-family: inherit;
    color: var(--text-main);
}

.sbgift-search-input-wrap input::placeholder {
    color: var(--text-light);
}

.sbgift-search-close {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark-green-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sbgift-search-close:hover {
    color: var(--brown-deep);
}

.sbgift-search-tags {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-right: 0.5rem;
}

.sbgift-search-tags .tag-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
}

.search-tag {
    background: var(--bg-primary);
    border: 1px solid var(--stone-main);
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark-green-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-tag:hover {
    background: var(--dark-green-primary);
    color: #FFFFFF;
    border-color: var(--dark-green-primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sbgift-nav-text {
        display: none;
    }

    .sbgift-search-trigger {
        padding: 0.5rem 0.8rem;
    }

    .sbgift-logo-img {
        height: 38px;
    }

    .sbgift-nav-drawer {
        width: 100vw;
        max-width: 100vw;
    }
}

/* Category Filter Pills Section */
/* הריווח העליון צר מזה שמתחת בכוונה: הוא נספר בתוך המסך הראשון, ומה
   שנחסך כאן הולך לגובה תמונת הבאנר (ראו .sbgift-banner-img). */
.categories-section {
    padding: 1rem 0 3rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}

.categories-section .section-header {
    margin-bottom: 1.1rem;
}

/* קטנה מכותרות סקשן אחרות באתר, כי זו היחידה שנאבקת על מקום מול
   תמונת הבאנר בתוך המסך הראשון */
.categories-section .section-title {
    font-size: 1.95rem;
}

.section-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.section-subtitle {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--brown-main);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
}

.section-title {
    font-size: 2.3rem;
    color: var(--dark-green-primary);
}

.category-pills {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.category-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.8rem;
    background: transparent;
    border: 2px solid var(--gold-primary);
    border-radius: var(--radius-full);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gold-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.category-pill:hover {
    background: rgba(255, 255, 255, 0.25);
    color: var(--gold-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--gold-glow);
}

.category-pill.active {
    background: transparent;
    color: var(--gold-primary);
    border: 2px solid var(--gold-primary);
    font-weight: 700;
    box-shadow: 0 4px 12px var(--gold-glow);
}

/* Builder Tool / "המעצב האישי" */
.builder-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

.builder-card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    border: 1px solid var(--stone-main);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.builder-controls {
    padding: 2.5rem;
}

.builder-step {
    margin-bottom: 1.8rem;
}

.builder-step label {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark-green-primary);
    margin-bottom: 0.6rem;
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.6rem;
}

.option-btn {
    padding: 0.6rem 0.8rem;
    background: transparent;
    border: 2px solid var(--stone-main);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    text-align: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.option-btn:hover,
.option-btn.selected {
    background: transparent;
    color: var(--dark-green-primary);
    border: 2px solid var(--dark-green-primary);
    font-weight: 700;
}

/* .builder-input-text היה עותק מילה במילה של .form-control ועוד שתי
   הצהרות. הכלי עצמו עדיין לא נבנה (ראו builder.html), ולכן כשייכתב
   המרקאפ שלו השדה יקבל class="form-control builder-input-text" ויירש
   את הבסיס במקום להחזיק עותק שני שיסטה ממנו. */
.builder-input-text {
    direction: rtl;
    transition: var(--transition-fast);
}

.builder-input-text:focus {
    border-color: var(--dark-green-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 43, 0.1);
}

.builder-preview-box {
    background: var(--dark-green-deep);
    color: #FFFFFF;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.balloon-mockup-container {
    position: relative;
    width: 240px;
    height: 240px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.balloon-sphere {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), rgba(245, 235, 224, 0.85) 60%, rgba(199, 183, 163, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset -10px -10px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    transition: transform 0.4s ease;
}

.balloon-printed-text {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold-primary);
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.builder-price-tag {
    font-size: 2rem;
    font-weight: 800;
    color: var(--gold-primary);
    margin-bottom: 1rem;
}

/* Builder Page (builder.html) - standalone tool layout */
.builder-page-section {
    padding: 3rem 0 4.5rem;
    background: var(--bg-primary);
}

.builder-page-note {
    margin-top: 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.builder-page-note a {
    color: var(--dark-green-primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Builder Teaser on Home Page - links to builder.html */
.builder-teaser-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

.builder-teaser-card {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 2.5rem;
    padding: 3rem;
    border-radius: var(--radius-lg);
    background: var(--brown-panel);
    box-shadow: var(--shadow-lg);
}

.builder-teaser-content .section-subtitle {
    color: var(--stone-main);
}

.builder-teaser-content .section-title {
    color: var(--bg-primary);
    margin-bottom: 1rem;
}

.builder-teaser-content p {
    color: var(--stone-light);
    font-size: 1.05rem;
    margin-bottom: 1.8rem;
    max-width: 46ch;
}

.builder-teaser-visual {
    display: flex;
    justify-content: center;
}

.builder-teaser-visual .balloon-sphere {
    width: 200px;
    height: 200px;
}

/* Product Catalog Grid */
.catalog-section {
    padding: 4rem 0;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}

.product-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-smooth);
    display: flex;
    flex-direction: column;
    position: relative;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--stone-main);
}

.product-image-container {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    background: var(--bg-primary);
}

.product-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-smooth);
    filter: sepia(0.16) saturate(1.12) contrast(1.02);
}

.product-card:hover .product-image-container img {
    transform: scale(1.05);
}

.product-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    color: #FFFFFF;
    box-shadow: var(--shadow-sm);
}

.badge-green {
    background: var(--dark-green-primary);
}

.badge-brown {
    background: var(--brown-deep);
}

.badge-stone {
    background: var(--stone-dark);
}

.badge-gold {
    background: var(--gold-primary);
    color: #2D231F;
}

.wishlist-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--stone-main);
    backdrop-filter: blur(4px);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--transition-fast);
}

.wishlist-btn:hover,
.wishlist-btn.active {
    background: transparent;
    border-color: #E74C3C;
    color: #E74C3C;
}

.product-details {
    padding: 1.3rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark-green-primary);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.product-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.8rem;
    border-top: 1px solid var(--bg-primary);
}

.price-box {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.current-price {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--dark-green-primary);
}

.original-price {
    font-size: 0.9rem;
    color: var(--text-light);
    text-decoration: line-through;
}

/* "החל מ־" לפני מחיר של מוצר שיש לו גדלים בתוספת תשלום. צמוד למחיר
   ולא במרווח של ה-price-box, אחרת הוא נקרא כפריט נפרד בשורה. */
.price-from {
    margin-inline-end: -0.3rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.add-cart-btn {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 2px solid var(--dark-green-primary);
    color: var(--dark-green-primary);
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: var(--transition-fast);
}

/* כשתצוגת המחירים כבויה נשאר בפוטר רק כפתור ההתאמה — שיתפרס לכל הרוחב */
.product-footer > .add-cart-btn:only-child {
    flex: 1;
    justify-content: center;
}

.add-cart-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: var(--dark-green-primary);
}

/* Shopping Cart Drawer */
.cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-smooth);
}

.cart-drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.cart-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 440px;
    height: 100%;
    height: 100dvh;
    background: var(--bg-primary);
    z-index: 1001;
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform var(--transition-smooth);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cart-drawer-overlay.active .cart-drawer {
    transform: translateX(0);
}

.cart-header {
    padding: 1.5rem;
    background: var(--dark-green-primary);
    color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.cart-header h3 {
    font-size: 1.3rem;
    color: #FFFFFF;
}

.close-cart-btn {
    color: #FFFFFF;
    font-size: 1.4rem;
}

.cart-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cart-item {
    display: flex;
    gap: 1rem;
    background: var(--bg-card);
    padding: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
    position: relative;
}

.cart-item-img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
}

.cart-item-info {
    flex-grow: 1;
}

.cart-item-info h4 {
    font-size: 1rem;
    color: var(--dark-green-primary);
    margin-bottom: 0.2rem;
}

.cart-item-custom-text {
    font-size: 0.8rem;
    color: var(--brown-main);
    background: var(--stone-light);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0.5rem;
}

/* שורת הצבע בסל — אותה תווית, בתוספת נקודת הצבע עצמה. כשנבחרו כמה
   צבעים מוצגת נקודה לכל אחד מהם, לפני רשימת השמות. */
.cart-item-color {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.cart-item-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--border-color);
    /* הנקודות צמודות זו לזו ומופרדות מהטקסט ב-gap של השורה */
    margin-inline-end: -0.2rem;
}

.cart-item-color-dot:last-of-type {
    margin-inline-end: 0;
}

.cart-item-price {
    font-weight: 700;
    color: var(--dark-green-primary);
}

.cart-item-remove {
    position: absolute;
    top: 8px;
    left: 8px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.cart-item-remove:hover {
    color: #E74C3C;
}

.cart-footer {
    padding: 1.2rem 1.5rem;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    max-height: 65vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#delivery-city-select {
    cursor: pointer;
    background-color: var(--bg-primary);
    border: 1px solid var(--stone-main);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.5rem 0.8rem;
    width: 100%;
    outline: none;
    transition: border-color var(--transition-fast);
}

#delivery-city-select:focus {
    border-color: var(--dark-green-primary);
    background-color: #FFFFFF;
}

.cart-subtotal {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--dark-green-primary);
    margin-bottom: 1.2rem;
}

/* Modals (Product Customizer & Checkout) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
    padding: 1rem;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-container {
    background: var(--bg-card);
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    border: 1px solid var(--stone-main);
    position: relative;
    transform: translateY(20px);
    transition: transform var(--transition-fast);
}

.modal-overlay.active .modal-container {
    transform: translateY(0);
}

.modal-header {
    padding: 1.5rem 2.0rem;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    font-size: 1.4rem;
    color: var(--dark-green-primary);
}

.modal-close-btn {
    font-size: 1.5rem;
    color: var(--text-muted);
}

.modal-body {
    padding: 2rem;
}

/* Product Details Modal (catalog.html) — gallery + price + description */
.product-card.is-clickable {
    cursor: pointer;
}

.product-card.is-clickable:focus-visible {
    outline: 2px solid var(--brown-main);
    outline-offset: 3px;
}

.product-image-count {
    position: absolute;
    bottom: 12px;
    inset-inline-start: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-full);
    background: rgba(250, 246, 240, 0.92);
    border: 1px solid var(--stone-main);
    color: var(--brown-deep);
    font-size: 0.75rem;
    font-weight: 700;
}

.modal-container.product-view {
    max-width: 760px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* עיגול בהיר מעל התמונה — בלעדיו האיקס נבלע בתמונות בהירות */
.pv-close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    background: rgba(250, 246, 240, 0.94);
    border: 1px solid var(--stone-main);
    box-shadow: var(--shadow-sm);
    line-height: 1;
    font-size: 1.5rem;
    color: var(--brown-deep);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.pv-close:hover {
    background: var(--bg-card);
    border-color: var(--brown-main);
    color: var(--brown-main);
}

/* עמודה אחת: התמונה לרוחב מלמעלה, כל הפרטים מתחתיה */
.pv-layout {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.pv-gallery {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    /* גובה המסגרת. מוגדר כאן פעם אחת ונדרס במובייל במקום להיכתב בשני מקומות. */
    --pv-stage-h: 62vh;
}

/* מסגרת בגודל קבוע: אינה מושפעת מיחס התמונה המוצגת, כדי שהחצים והמונה
   יישארו באותו מקום בדיוק בכל החלפת תמונה. התמונה עצמה מתמרכזת בתוכה. */
.pv-stage {
    position: relative;
    width: 100%;
    height: var(--pv-stage-h);
    overflow: hidden;
    background: var(--bg-primary);
}

.pv-stage img {
    display: block;
    width: 100%;
    height: 100%;
    /* המסגרת קבועה ולכן contain הוא שמראה כל תמונה במלואה, ללא חיתוך */
    object-fit: contain;
    opacity: 1;
    transition: opacity var(--transition-fast);
}

.pv-stage img.is-loading {
    opacity: 0;
}

/* עיגול בהיר סביב החץ — בלעדיו החץ נבלע בתמונות בהירות */
.pv-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    background: rgba(250, 246, 240, 0.94);
    border: 1px solid var(--stone-main);
    color: var(--brown-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.pv-nav:hover {
    background: var(--bg-card);
    border-color: var(--brown-main);
    color: var(--brown-main);
}

.pv-nav[hidden] {
    display: none;
}

.pv-nav-prev {
    inset-inline-start: 10px;
}

.pv-nav-next {
    inset-inline-end: 10px;
}

.pv-counter {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-full);
    background: rgba(250, 246, 240, 0.94);
    border: 1px solid var(--stone-main);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--brown-deep);
    direction: ltr;
}

.pv-counter:empty {
    display: none;
}

.pv-dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.75rem 1rem;
}

.pv-dots:empty {
    display: none;
}

.pv-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    background: var(--stone-main);
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.pv-dot:hover {
    background: var(--brown-light);
}

.pv-dot.active {
    background: var(--brown-deep);
    transform: scale(1.25);
}

.pv-info {
    padding: 2rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.pv-category {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brown-main);
}

.pv-info h3 {
    font-size: 1.6rem;
    line-height: 1.25;
    color: var(--dark-green-primary);
}

.pv-price {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

/* display:flex גובר על ברירת המחדל של hidden — חייבים לבטל במפורש */
.pv-price[hidden] {
    display: none;
}

.pv-price-current {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark-green-primary);
}

.pv-price-original {
    font-size: 1rem;
    color: var(--text-light);
    text-decoration: line-through;
}

.pv-desc {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.pv-block[hidden] {
    display: none;
}

.pv-block h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dark-green-primary);
    margin-bottom: 0.5rem;
}

.pv-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pv-features li {
    position: relative;
    padding-inline-start: 1.3rem;
    font-size: 0.92rem;
    color: var(--text-muted);
}

.pv-features li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-primary);
}

/* ── בחירת צבע מארז ────────────────────────────────────────
   הצבעים מוגדרים לכל מוצר בפאנל הניהול. אותם סגנונות משרתים גם את
   חלון פרטי המוצר וגם את חלון ההתאמה האישית, כדי שהבחירה תיראה זהה
   בשני השלבים. */

.sb-colors-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.7rem;
}

/* בחלון פרטי המוצר העיגולים יושבים מתחת לכותרת ולא לצידה */
#pv-colors-block .sb-colors-row {
    flex-direction: column;
    align-items: flex-start;
}

.sb-colors-label {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--dark-green-primary);
}

/* שורה משלו מתחת לעיגולים ולא המשך של השורה שלהם: השם משתנה בכל
   לחיצה, וכשהוא ישב באותה שורה הוא הזיז את העיגולים בכל פעם שאורכו
   השתנה. flex-basis מלא דוחף אותו לשורה הבאה בתוך אותו flex. */
.sb-colors-selected {
    flex-basis: 100%;
    font-size: 0.88rem;
    color: var(--text-muted);
}

/* בלי השם השורה הייתה מוסיפה רווח ריק מתחת לעיגולים */
.sb-colors-selected:empty {
    display: none;
}

.sb-colors {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.sb-color-btn {
    display: block;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    /* המסגרת הלבנה היא האפקט עצמו: טבעת לבנה ובתוכה הצבע */
    border: 3px solid #fff;
    cursor: pointer;
    /* טבעת חיצונית דקה, אחרת מארז לבן היה נבלע ברקע הבהיר */
    box-shadow: 0 0 0 1px var(--border-color);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.sb-color-btn:hover {
    transform: scale(1.08);
}

.sb-color-btn[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--gold-primary);
    transform: scale(1.08);
}

.sb-color-btn:focus-visible {
    outline: 2px solid var(--gold-primary);
    outline-offset: 3px;
}

/* נבחרה כבר מכסת הצבעים של הקטגוריה — הצבעים שלא נבחרו מעומעמים כדי
   שיהיה ברור למה הלחיצה עליהם לא עושה דבר. המונה בשורה שמתחת ("2/3")
   אומר כמה עוד אפשר, והסרת צבע פותחת אותם מחדש. */
.sb-color-btn.is-locked {
    opacity: 0.35;
    cursor: not-allowed;
}

.sb-color-btn.is-locked:hover {
    transform: none;
}

/* הקטגוריה הוגדרה ל-0 צבעים: העיגולים מראים ללקוח באילו צבעים המארז
   מגיע ולחיצה חושפת את שם הצבע בשורה שמתחת, אבל אין כאן בחירה והצבע
   לא נשלח בהזמנה.

   הסימון הוא טבעת אפורה דקה ולא טבעת הזהב של aria-pressed, בכוונה:
   טבעת הזהב אומרת "נבחר" בכל שאר המסך, וכאן היא הייתה מבטיחה ללקוח
   בחירה שלא קיימת. */
.sb-color-btn.is-display.is-shown {
    box-shadow: 0 0 0 2px var(--text-muted);
    transform: scale(1.08);
}

/* ── בחירת גודל ────────────────────────────────────────────
   הגדלים מוגדרים לכל מוצר בפאנל הניהול. כמו הצבעים, אותם סגנונות
   משרתים גם את חלון פרטי המוצר וגם את חלון ההתאמה האישית.

   כפתורי טקסט ולא עיגולים: שם הגודל הוא המידע עצמו ("40 בלונים"),
   ואי אפשר לרמוז עליו בצורה. */

.sb-sizes-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 0.7rem;
}

.sb-sizes {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sb-size-btn {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.42rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--dark-green-primary);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.sb-size-btn:hover {
    border-color: var(--gold-primary);
}

.sb-size-btn[aria-pressed="true"] {
    border-color: var(--gold-primary);
    background: var(--gold-primary);
    color: #fff;
}

.sb-size-btn:focus-visible {
    outline: 2px solid var(--gold-primary);
    outline-offset: 2px;
}

/* ── תוספות בתשלום ─────────────────────────────────────────
   התוספות מוגדרות לכל מוצר בפאנל הניהול. אותם סגנונות משרתים את חלון
   פרטי המוצר ואת חלון ההתאמה האישית, כמו הצבעים והגדלים.

   שורה לכל תוספת ולא כפתורים בשורה אחת כמו הגדלים: כאן אפשר לבחור כמה
   תוספות יחד, ולחלקן נלווה גם בורר כמות — רשימה אנכית מראה את שתיהן
   בלי שהשורה תישבר באמצע. */

.sb-addons-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sb-addons {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.sb-addon {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sb-addon-btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: transparent;
    color: var(--dark-green-primary);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sb-addon-btn:hover {
    border-color: var(--gold-primary);
}

.sb-addon-btn:focus-visible {
    outline: 2px solid var(--gold-primary);
    outline-offset: 2px;
}

/* תיבת סימון ולא צביעת השורה כולה: התוספת שנבחרה צריכה להישאר קריאה
   לצד אלה שלא נבחרו, כי היא כבר חלק ממה שהלקוח מזמין */
.sb-addon-mark {
    flex: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: #fff;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sb-addon-btn[aria-pressed="true"] {
    border-color: var(--gold-primary);
    background: rgba(197, 160, 89, 0.08);
}

.sb-addon-btn[aria-pressed="true"] .sb-addon-mark {
    border-color: var(--gold-primary);
    background: var(--gold-primary);
    /* הסימן מצויר ברקע ולא כתו טקסט, כדי שלא יושפע מהגדלת הטקסט
       בתפריט הנגישות */
    background-image: linear-gradient(45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%),
                      linear-gradient(-45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%);
    background-size: 10px 2px, 6px 2px;
    background-position: 4px 9px, 4px 6px;
    background-repeat: no-repeat;
}

.sb-addon-name {
    flex: 1;
    min-width: 0;
}

/* הפירוט שהעסק הגדיר לתוספת, מתחת לשם. קטן ורגיל מול שם מודגש, כי
   השם הוא מה שנבחר והפירוט רק מסביר אותו */
.sb-addon-desc {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-muted);
}

.sb-addon-price {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold-primary);
    white-space: nowrap;
}

/* בורר הכמות, מוצג רק לתוספת שנבחרה ושמותר לה יותר מיחידה אחת */
.sb-addon-qty {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: none;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.1rem;
}

.sb-addon-step {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--dark-green-primary);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sb-addon-step:hover:not(:disabled) {
    background: var(--stone-light);
}

/* הגיעה התקרה שהוגדרה לתוספת בפאנל הניהול */
.sb-addon-step:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.sb-addon-step:focus-visible {
    outline: 2px solid var(--gold-primary);
    outline-offset: 1px;
}

.sb-addon-qty-value {
    min-width: 1.4rem;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--dark-green-primary);
}

/* תיבת הפירוט שנפתחת לתוספת שנבחרה ("איזה צבע בלון?") — שורה מלאה
   מתחת לתוספת ומוסטת פנימה, באותו סימון של התיבה שנפתחת בשדה תיבת
   סימון (ראו .sb-field-reveal), כדי שיהיה ברור למי היא שייכת */
.sb-addon-note {
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-right: 1.6rem;
    border-right: 2px solid var(--stone-main);
}

.sb-addon-note span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark-green-primary);
}

/* חסר פירוט חובה — מסומן על התיבה עצמה ולא על כל בלוק התוספות, כדי
   שהלקוח יראה בדיוק באיזו תוספת חסר (ראו confirmAddToCartFromModal) */
.sb-addon-note.is-invalid input {
    border-color: #A63D2F;
    background: #FBF0EE;
}

.sb-addon-note.is-invalid span {
    color: #A63D2F;
}

/* תוספת המחיר, קטנה יותר מהשם — היא נלווית אליו ולא מתחרה בו */
.sb-size-extra {
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.75;
}

.pv-specs {
    display: flex;
    justify-content: flex-start;
    padding: 0.2rem 0;
}

.pv-stock-status {
    text-align: left;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
    width: 100%;
}

.pv-stock-status.in-stock {
    color: #2e7d32;
}

.pv-stock-status.out-of-stock {
    color: #c62828;
}

.pv-actions {
    margin-top: 0.4rem;
}

.pv-actions .btn {
    width: 100%;
}

@media (max-width: 768px) {
    .pv-gallery {
        padding: 1rem;
        /* מסך נמוך — התמונה מוותרת על גובה כדי שהשם והמחיר יישארו נראים */
        --pv-stage-h: 52vh;
    }

    .pv-info {
        padding: 1.4rem 1.2rem 1.8rem;
    }

    .pv-info h3 {
        font-size: 1.35rem;
    }
}

.form-group {
    margin-bottom: 1.3rem;
}

.form-group label {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dark-green-primary);
    margin-bottom: 0.4rem;
}

.form-control {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--stone-main);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    background: var(--bg-primary);
}

.form-control:focus {
    border-color: var(--dark-green-primary);
    background: #FFFFFF;
}

/* ── שדות ההתאמה האישית ────────────────────────────────────
   נבנים דינמית לפי הגדרת הקטגוריה בפאנל הניהול (ראו js/app.js). */

/* שדה מסוג תיבת סימון — התווית יושבת לצד התיבה ולא מעליה */
.sb-field-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}

.sb-field-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--dark-green-primary);
    cursor: pointer;
}

/* התווית של תיבת הסימון היא התווית של השדה עצמו, ולכן היא לא מקבלת
   את הריווח התחתון שכל label בטופס מקבל */
.sb-field-check span {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dark-green-primary);
}

/* תיבת הטקסט שנפתחת כשהלקוח מסמן — מוסטת פנימה כדי שיהיה ברור
   שהיא שייכת לסימון שמעליה ולא לשדה הבא */
.sb-field-reveal {
    margin-top: 0.7rem;
    padding-right: 1.6rem;
    border-right: 2px solid var(--stone-main);
}

.sb-field-reveal[hidden] {
    display: none;
}

.sb-field-reveal label {
    font-size: 0.9rem;
}

.form-group.is-invalid .form-control {
    border-color: #A63D2F;
    background: #FBF0EE;
}

.form-group.is-invalid label {
    color: #A63D2F;
}

/* Custom Select Dropdown UI */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}
.custom-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.custom-select-wrapper.open .custom-select-trigger {
    border-color: var(--dark-green-primary);
    background: #FFFFFF;
}
.custom-select-trigger i {
    transition: transform var(--transition-fast);
    color: var(--text-muted);
}
.custom-select-wrapper.open .custom-select-trigger i {
    transform: rotate(180deg);
}
.custom-select-options {
    position: absolute;
    display: block;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid var(--stone-main);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    max-height: 250px;
    overflow-y: auto;
}
.custom-select-wrapper.open .custom-select-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
}
.custom-option {
    padding: 0.8rem 1rem;
    font-size: 1rem;
    color: var(--text-main);
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--bg-secondary);
}
.custom-option:last-child {
    border-bottom: none;
}
.custom-option:hover, .custom-option.selected {
    background-color: var(--bg-secondary);
    color: var(--dark-green-deep);
    font-weight: 600;
}

/* Floating WhatsApp & Contact Button */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    left: 24px;
    color: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 45px;
    z-index: 99;
    transition: transform var(--transition-fast), filter var(--transition-fast);
    filter: drop-shadow(0 4px 10px rgba(37, 211, 102, 0.3));
}

.whatsapp-float.on-brown-bg img {
    filter: brightness(0) invert(1) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15)) !important;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 6px 14px rgba(37, 211, 102, 0.5));
}

/* Floating Accessibility Button */
.accessibility-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    color: var(--brown-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    z-index: 99;
    transition: transform var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}

.accessibility-float.on-brown-bg {
    color: var(--bg-primary);
}

.accessibility-float:hover {
    transform: scale(1.1);
}

/* Footer */
.footer {
    background: var(--brown-panel);
    color: var(--stone-light);
    padding: 4rem 0 2rem;
    border-top: 4px solid var(--gold-primary);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.footer-col h4 {
    font-size: 1.3rem;
    color: #FFFFFF;
    margin-bottom: 1.2rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 2px;
    background: var(--gold-primary);
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.7rem;
}

.footer-links a:hover {
    color: var(--gold-primary);
    padding-right: 4px;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    color: var(--stone-main);
}

/* Responsive Media Queries */
@media (max-width: 992px) {
    .builder-card {
        grid-template-columns: 1fr;
    }

    .builder-teaser-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 2.5rem 1.5rem;
    }

    .builder-teaser-content p {
        margin-inline: auto;
    }

}

/* ==========================================================================
   Text Pages — אודות / מדיניות הפרטיות / הצהרת נגישות / צור קשר
   ==========================================================================

   ארבעת העמודים האלה חולקים את אותו שלד: פס כותרת חום ואחריו עמודת
   טקסט צרה. עד כה הסגנונות היו כתובים כ-style= בתוך המרקאפ, ולכן אותה
   מחרוזת הוגדרה 15 פעמים על h2 לבדו, 4 פעמים על פס הכותרת ו-9 פעמים
   על ul — ושינוי בצבע או בריווח היה צריך לעבור בכל עמוד בנפרד.

   font-family לא מופיע כאן: הכלל הגלובלי h1..h4 בראש הקובץ כבר נותן
   את var(--font-main), וההצהרה במרקאפ הייתה מיותרת מלכתחילה. */

.about-hero {
    padding: 6rem 0 5rem;
    background: var(--brown-panel);
    text-align: center;
    border-bottom: 3px solid var(--gold-primary);
}

.about-hero h1 {
    font-size: 3rem;
    color: var(--bg-primary);
    margin-bottom: 1rem;
}

/* צור קשר: מתחת לכותרת יש גם תת-כותרת וכפתורים, ולכן רווח קטן יותר */
.about-hero.has-lead h1 {
    margin-bottom: 0.5rem;
}

.about-hero-lead {
    color: var(--stone-light);
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
}

.about-hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.about-content {
    padding: 4rem 0;
}

.about-content .container {
    max-width: 800px;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-main);
}

.about-content h2 {
    color: var(--dark-green-primary);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.about-content h3 {
    color: var(--dark-green-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
}

/* padding-inline-start ולא padding-right — בעמוד RTL הם זהים, אבל
   המרקאפ השתמש בשניהם לסירוגין וזו הצורה שאינה תלויה בכיוון */
.about-content ul {
    margin-bottom: 1.5rem;
    padding-inline-start: 1.5rem;
}

.contact-hero-btn-wa {
    background: transparent;
    border: 2px solid var(--dark-green-primary);
    color: var(--dark-green-primary);
    font-weight: 700;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.contact-hero-btn-wa:hover {
    background: var(--dark-green-primary);
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* Contact Main Section */
.contact-section {
    padding: 4rem 0 5rem;
    background: var(--bg-primary);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2.5rem;
    align-items: stretch;
}

.contact-form-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    position: relative;
}

.contact-card-header {
    margin-bottom: 0.8rem;
    border-bottom: 2px solid var(--bg-primary);
    padding-bottom: 0.5rem;
}

.contact-card-title {
    font-size: 1.8rem;
    color: var(--dark-green-primary);
    margin-bottom: 0.4rem;
}

.contact-form .form-group {
    margin-bottom: 0.75rem;
}

.contact-form label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark-green-primary);
    margin-bottom: 0.3rem;
}

.contact-form label i {
    color: var(--gold-primary);
}

.contact-form .form-control {
    padding: 0.6rem 0.9rem;
    font-size: 1.05rem;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.contact-form .form-control:focus {
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 3px var(--gold-glow);
}

.btn-contact-submit {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.15rem;
    background: transparent;
    border: 2px solid var(--dark-green-primary);
    color: var(--dark-green-primary);
    margin-top: 1rem;
    font-weight: 700;
}

.btn-contact-submit:hover {
    background: var(--dark-green-primary);
    color: #FFFFFF;
}

/* Success Card Overlay inside form */
.contact-success-box {
    background: var(--bg-card);
    border: 2px solid var(--gold-primary);
    border-radius: var(--radius-md);
    padding: 2rem;
    text-align: center;
    animation: fadeIn 0.4s ease;
}

.contact-success-icon {
    width: 64px;
    height: 64px;
    background: var(--dark-green-primary);
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1rem;
}

/* Info Cards Sidebar */
.contact-info-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: space-between;
    height: 100%;
}

.contact-info-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 1.8rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    flex: 1;
    gap: 1.2rem;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-info-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--stone-main);
}

.contact-info-icon-wrapper {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--dark-green-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    border: none;
}

.contact-info-card.gold-card .contact-info-icon-wrapper {
    background: transparent;
    color: var(--brown-deep);
}

.contact-info-card.green-card .contact-info-icon-wrapper {
    background: transparent;
    color: #25D366;
}

.contact-info-content h4 {
    font-size: 1.2rem;
    color: var(--dark-green-primary);
    margin-bottom: 0.3rem;
}

.contact-info-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SBGift Showcase Hero Banner
   ========================================================================== */
.sbgift-hero-banner-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--bg-primary);
}

.sbgift-banner-wrapper {
    position: relative;
    width: 100%;
}

.sbgift-banner-img {
    position: relative;
    width: 100%;
    /* הבאנר מוגבל בגובה כדי שכשנכנסים לאתר כבר יראו את פסי הקטגוריות
       שמתחתיו. 295px הוא מה שתופס כל השאר במסך הראשון: הבאנר העליון
       והכותרת (כ-134px), ומתחת לתמונה הכותרת "הקולקציות שלנו" ופסי
       הקטגוריות עצמם (כ-160px, אחרי שהוקטנו כדי לפנות מקום לתמונה).
       זה כבר מעבר לגבול הנוח: במסך של מחשב נייד רגיל הפסים יושבים בדיוק
       על קצה המסך הראשון, ובמסך נמוך יותר חלקם יירד מתחתיו.
       object-fit: cover גוזר מלמעלה ומלמטה במקום למעוך את התמונה, ולכן
       הכיתוב שממורכז אנכית מעל הבאנר נשאר במקומו. */
    height: auto;
    max-height: calc(100vh - 295px);
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* במסך נמוך במיוחד אי אפשר להכניס גם תמונה וגם קטגוריות; שם העדיפות
   היא שהתמונה לא תצטמצם לפס דק. */
@media (max-height: 640px) {
    .sbgift-banner-img {
        max-height: 240px;
    }
}

.sbgift-banner-wrapper:hover .sbgift-banner-img {
    transform: scale(1.03);
}

.sbgift-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to left,
            rgba(21, 43, 30, 0.8) 0%,
            rgba(21, 43, 30, 0.3) 50%,
            transparent 100%);
    display: flex;
    align-items: center;
    z-index: 2;
}

.sbgift-banner-content {
    max-width: 650px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.sbgift-banner-tag {
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--gold-primary);
    text-transform: uppercase;
}

.sbgift-banner-title {
    font-family: var(--font-main);
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.15;
    color: #FFFFFF;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.sbgift-banner-subtitle {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #EBE4DC;
    font-weight: 400;
    max-width: 550px;
}

.btn-outline-light {
    background: transparent;
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #FFFFFF;
    color: #FFFFFF;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .sbgift-banner-title {
        font-size: 2.2rem;
    }

    .sbgift-banner-subtitle {
        font-size: 1.05rem;
    }
}

/* ==========================================================================
   React Bits - ScrollReveal Component Styles
   ========================================================================== */
.scroll-reveal {
    margin: 20px 0;
    display: block;
    transform-origin: 0% 50%;
}

.scroll-reveal-text {
    font-size: clamp(1.6rem, 4vw, 3rem);
    line-height: 1.5;
    font-weight: 600;
}

.word {
    display: inline-block;
    white-space: pre-wrap;
}

/* ==========================================================================
   Accessibility Popup Styles
   ========================================================================== */
.accessibility-popup {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 320px;
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 10001;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.accessibility-popup.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.acc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.acc-header h3 {
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.close-acc-btn {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    color: var(--text-main);
    cursor: pointer;
    transition: color 0.2s;
}

.close-acc-btn svg {
    display: block;
    width: 20px;
    height: 20px;
}

.close-acc-btn:hover {
    color: var(--brown-main);
}

.acc-body {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.acc-body button,
.acc-body .acc-statement {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 12px 15px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: normal;
    transition: all 0.2s;
    text-align: center;
    text-decoration: none;
}

.acc-body button:hover,
.acc-body .acc-statement:hover {
    background: var(--stone-light);
    border-color: var(--stone-main);
}

.acc-body button i,
.acc-body .acc-statement i {
    color: var(--brown-main);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* Accessibility Modes
   These four classes are toggled on <html> (document.documentElement), NOT on
   <body> - see the filter note below. js/app.js must keep toggling them there. */

/* A `filter` on any element other than the document root turns that element
   into the containing block of every `position: fixed` descendant. While these
   two modes lived on <body>, the floating WhatsApp button, the accessibility
   button and its popup all anchored to the bottom of the <body> box instead of
   the viewport, so they dropped to the end of the page. On <html> the spec
   exempts the root element and fixed positioning keeps working. */
html.acc-high-contrast {
    filter: contrast(120%) grayscale(100%) !important;
}

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

/* Highlight Links
   The header controls - תפריט / חיפוש / סל הקניות - are <button>s, not <a>s, so
   a bare `a` rule skips them along with everything inside the drawers they open.
   They all carry .sb-chrome-control, applied in js/layout.js where that markup
   is generated.

   That class exists for this section. The three rules below used to spell out
   the same nine-selector list by hand - twenty-four lines of duplicated
   selector - so adding a control meant editing three places, and missing one
   produced a yellow box with unreadable text inside it.

   The accessibility popup itself is deliberately left out: painting the
   widget's own buttons yellow makes it unreadable while it is open.

   .cart-body / .cart-footer buttons stay as element selectors: js/app.js
   renders them per cart item, not js/layout.js. */
html.acc-highlight-links
:is(a, .sb-chrome-control, .cart-body button, .cart-footer button):not(.acc-statement) {
    background-color: yellow !important;
    color: #000 !important;
    text-decoration: underline !important;
    font-weight: bold !important;
}

/* The label and the icon inside those controls carry their own colour rules
   (`.sbgift-nav-text`, `.title`, svg `stroke: currentColor`), which is why the
   box turned yellow but its content stayed the old colour. Force the text
   colour down the whole subtree so it inherits the black-on-yellow above. */
html.acc-highlight-links
:is(a, .sb-chrome-control, .cart-body button, .cart-footer button):not(.acc-statement) * {
    color: #000 !important;
}

/* Backgrounds are only cleared inside the header controls and the drawers.
   Doing it for every `a *` would also wipe the coloured badges and image
   overlays that sit inside product-card links - which is why this rule uses
   .sb-chrome-control alone and not the `a` from the two rules above. */
html.acc-highlight-links .sb-chrome-control * {
    background-color: transparent !important;
}

/* The hamburger bars are background-coloured <span>s with no text, so the rule
   above would erase them. */
html.acc-highlight-links .sbgift-hamburger-icon span {
    background-color: #000 !important;
}

html.acc-readable-font * {
    font-family: var(--font-main) !important;
}

/* ==========================================================================
   Catalog Page (catalog.html) - Filters Sidebar & Results Grid
   ========================================================================== */

.catalog-page-hero {
    padding: 5rem 0 4rem;
    background: var(--brown-panel);
    border-bottom: 3px solid var(--gold-primary);
    text-align: center;
}

.catalog-page-hero h1 {
    font-size: 3rem;
    color: var(--bg-primary);
    margin-bottom: 0.8rem;
}

.catalog-page-hero p {
    max-width: 620px;
    margin: 0 auto;
    color: var(--stone-light);
    font-size: 1.05rem;
}

.catalog-page-section {
    padding: 3rem 0 4.5rem;
}

.catalog-layout {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 2.5rem;
    align-items: start;
}

/* --- Filters Sidebar --- */
.catalog-filters {
    position: sticky;
    top: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.catalog-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.catalog-filters-head h2 {
    font-size: 1.15rem;
    color: var(--dark-green-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.catalog-filters-head h2 i {
    color: var(--gold-primary);
    font-size: 0.95rem;
}

.filters-reset-btn {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--brown-main);
    border-bottom: 1px solid transparent;
    padding: 0.15rem 0;
}

.filters-reset-btn:hover {
    color: var(--dark-green-primary);
    border-bottom-color: var(--gold-primary);
}

.catalog-filters-body {
    padding: 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.filter-group-title {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.filter-search-wrap {
    position: relative;
}

.filter-search-wrap i {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    color: var(--stone-dark);
    font-size: 0.9rem;
    pointer-events: none;
}

.filter-search-input {
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-main);
    background: #FFFFFF;
    border: 1px solid var(--stone-main);
    border-radius: var(--radius-full);
    padding: 0.65rem 2.4rem 0.65rem 1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.filter-search-input:focus {
    outline: none;
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 3px var(--gold-glow);
}

.filter-option-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    text-align: right;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.filter-option:hover {
    background: var(--stone-light);
}

.filter-option .marker {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 2px solid var(--stone-main);
    border-radius: 50%;
    position: relative;
    transition: border-color var(--transition-fast);
}

.filter-option.checkbox .marker {
    border-radius: 4px;
}

.filter-option .label {
    flex: 1;
}

.filter-option .count {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-light);
}

.filter-option.active {
    color: var(--dark-green-primary);
    font-weight: 800;
}

.filter-option.active .marker {
    border-color: var(--gold-primary);
}

.filter-option.active .marker::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: var(--gold-primary);
}

.filter-option:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.filter-option:disabled:hover {
    background: transparent;
}

.filter-price-values {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--dark-green-primary);
    margin-bottom: 0.6rem;
}

.filter-price-values .muted {
    font-weight: 600;
    color: var(--text-muted);
}

.filter-range {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--stone-main);
    border-radius: var(--radius-full);
    cursor: pointer;
}

.filter-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 3px solid var(--gold-primary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.filter-range::-webkit-slider-thumb:hover {
    transform: scale(1.12);
}

/* ⚠ העתק מכוון של הכלל שמעליו, ואסור לאחד אותם לרשימת סלקטורים אחת:
   דפדפן מוחק כלל שלם שיש בו פסאודו-אלמנט שהוא לא מכיר, ולכן
   ‎::-webkit-…, ::-moz-… יחד היה מבטל את הידית בשני הדפדפנים. */
.filter-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 3px solid var(--gold-primary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.filter-range:focus-visible {
    outline: 2px solid var(--gold-primary);
    outline-offset: 4px;
}

.filter-range-legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-light);
    margin-top: 0.4rem;
}

/* --- Results Column --- */
.catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1.1rem;
    margin-bottom: 1.6rem;
    border-bottom: 1px solid var(--border-color);
}

.catalog-results-count {
    font-size: 0.98rem;
    color: var(--text-muted);
}

.catalog-results-count strong {
    color: var(--dark-green-primary);
    font-size: 1.15rem;
    font-weight: 800;
}

.catalog-sort {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
}

.catalog-sort select {
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-main);
    background: var(--bg-card);
    border: 1px solid var(--stone-main);
    border-radius: var(--radius-full);
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.catalog-sort select:focus {
    outline: none;
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 3px var(--gold-glow);
}

.active-filter-chips {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.active-filter-chips:empty {
    display: none;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    background: var(--stone-light);
    border: 1px solid var(--stone-main);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brown-deep);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.filter-chip:hover {
    border-color: var(--brown-main);
    color: var(--dark-green-primary);
}

.filter-chip i {
    font-size: 0.7rem;
    opacity: 0.7;
}

.catalog-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: var(--bg-card);
    border: 1px dashed var(--stone-main);
    border-radius: var(--radius-md);
}

.catalog-empty i {
    font-size: 2.4rem;
    color: var(--stone-main);
    margin-bottom: 1rem;
}

.catalog-empty h3 {
    font-size: 1.4rem;
    color: var(--dark-green-primary);
    margin-bottom: 0.5rem;
}

.catalog-empty p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* --- Mobile Filters Toggle --- */
.filters-toggle-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8rem 1.2rem;
    margin-bottom: 1.2rem;
    background: transparent;
    border: 2px solid var(--dark-green-primary);
    border-radius: var(--radius-full);
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark-green-primary);
}

.filters-toggle-btn .badge {
    min-width: 22px;
    height: 22px;
    padding: 0 0.35rem;
    border-radius: var(--radius-full);
    background: var(--gold-primary);
    color: #2D231F;
    font-size: 0.78rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 992px) {
    .catalog-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .filters-toggle-btn {
        display: flex;
    }

    .catalog-filters {
        position: static;
        display: none;
    }

    .catalog-filters.open {
        display: block;
    }
}

@media (max-width: 576px) {
    .catalog-page-hero {
        padding: 3.5rem 0 3rem;
    }

    .catalog-page-hero h1 {
        font-size: 2.2rem;
    }

    .catalog-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* Fix for borders on close buttons */
.close-cart-btn, .modal-close-btn, .clear-search-btn, .sbgift-drawer-close, .sbgift-search-close, .close-acc-btn {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    cursor: pointer;
}

/* ==========================================================================
   Cookie Consent Banner & Modal Styles (S.B Gifts Design System)
   ========================================================================== */

.cookie-banner {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--gold-primary);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(37, 23, 16, 0.25);
    padding: 1.5rem 2rem;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    transform: translateY(120%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0.4s;
    direction: rtl;
}

.cookie-banner.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.cookie-banner-content {
    flex: 1;
}

.cookie-banner-title {
    font-family: var(--font-main);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark-green-primary);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cookie-banner-title i {
    color: var(--gold-primary);
    font-size: 1.1rem;
}

.cookie-banner-text {
    font-family: var(--font-main);
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

.cookie-banner-text a {
    color: var(--brown-deep);
    text-decoration: underline;
    font-weight: 600;
}

.cookie-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.cookie-btn {
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 0.92rem;
    padding: 0.65rem 1.25rem;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.cookie-btn-primary {
    background: var(--dark-green-primary);
    color: #FFFFFF;
}

.cookie-btn-primary:hover {
    background: var(--brown-deep);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(61, 39, 29, 0.2);
}

.cookie-btn-essential {
    background: var(--bg-primary);
    color: var(--dark-green-primary);
    border: 1px solid var(--gold-primary);
}

.cookie-btn-essential:hover {
    background: var(--bg-secondary);
    color: var(--brown-deep);
    border-color: var(--brown-deep);
}

.cookie-btn-settings {
    background: transparent;
    color: var(--text-muted);
    text-decoration: underline;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
}

.cookie-btn-settings:hover {
    color: var(--dark-green-primary);
}

/* Cookie Settings Modal Cards & Switches */
.cookie-category-item {
    background: var(--bg-primary);
    border: 1px solid var(--stone-main, #E0D6C8);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.cookie-category-info {
    flex: 1;
}

.cookie-category-title {
    font-family: var(--font-main);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark-green-primary);
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cookie-badge-required {
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--brown-deep);
    color: #FFFFFF;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
}

.cookie-category-desc {
    font-family: var(--font-main);
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0;
}

/* Custom Toggle Switch */
.cookie-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--stone-main, #CCC);
    transition: .3s;
    border-radius: 26px;
}

.cookie-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    right: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.cookie-switch input:checked + .cookie-slider {
    background-color: var(--gold-primary);
}

.cookie-switch input:checked + .cookie-slider:before {
    transform: translateX(-22px);
}

.cookie-switch input:disabled + .cookie-slider {
    background-color: var(--gold-primary);
    opacity: 0.75;
    cursor: not-allowed;
}

/* Toast message for saving cookie preferences */
.cookie-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--dark-green-deep);
    color: #FFFFFF;
    border: 1px solid var(--gold-primary);
    padding: 0.8rem 1.6rem;
    border-radius: 30px;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    z-index: 1060;
    opacity: 0;
    transition: all 0.35s ease;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cookie-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

@media (max-width: 768px) {
    .cookie-banner {
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
        gap: 1rem;
    }
    
    .cookie-banner-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .cookie-btn {
        width: 100%;
    }
}

/* ─────────────────────────────────────────────
   SEO & FAQ Section (Rich Answers for Search Engines)
   ───────────────────────────────────────────── */
.seo-faq-section {
    padding: 4.5rem 0;
    background: var(--bg-primary);
    position: relative;
}

.seo-faq-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}

.seo-faq-header .section-subtitle {
    display: inline-block;
    color: var(--gold-primary);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.seo-faq-header .section-title {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    color: var(--brown-dark);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.seo-faq-header p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.seo-faq-list {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.seo-faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.seo-faq-item[open] {
    border-color: var(--gold-primary);
    box-shadow: var(--shadow-md);
}

.seo-faq-question {
    padding: 1.25rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: var(--transition-fast);
}

.seo-faq-question::-webkit-details-marker {
    display: none;
}

.seo-faq-question:hover {
    color: var(--brown-deep);
}

.seo-faq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--beige-gold);
    color: var(--brown-deep);
    font-size: 0.85rem;
    transition: transform var(--transition-smooth);
    flex-shrink: 0;
    margin-inline-start: 1rem;
}

.seo-faq-item[open] .seo-faq-icon {
    transform: rotate(180deg);
    background: var(--gold-primary);
    color: #FFFFFF;
}

.seo-faq-answer {
    padding: 0 1.5rem 1.4rem;
    color: var(--text-muted);
    font-size: 0.98rem;
    line-height: 1.7;
    border-top: 1px solid rgba(226, 218, 208, 0.4);
    margin-top: 0.25rem;
    padding-top: 1rem;
}

.seo-faq-answer p {
    margin: 0;
}

.seo-faq-footer {
    text-align: center;
    margin-top: 2.5rem;
}