:root {
    --background: #FAF7F2;
    --text: #2E2E2E;

    /* הירוק נשאר לצבעי פעולה / כפתורים / אייקונים */
    --primary: #8A9A7E;

    /* כתום לכותרות */
    --secondary: #D97B4F;

    --white: #ffffff;
    --radius: 22px;
}


/* =========================
   General
========================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-padding-top: 100px;
}

body {
    font-family: "M PLUS 1p", Arial, sans-serif;
    font-weight: 400;
    background: var(--background);
    color: var(--text);

    line-height: 1.6;
}

button,
input,
textarea,
select {
    font-family: "M PLUS 1p", Arial, sans-serif;
    font-weight: 300;
}


/* כותרות */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Rubik", "Arial Black", Arial, sans-serif;
    font-weight: 900;
    color: var(--secondary);
}


/* =========================
   Navbar
========================== */

.navbar {
    position: fixed;

    top: 0;
    right: 0;

    width: 100%;
    height: 90px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    padding: 10px 5%;

    background: rgba(250, 247, 242, .92);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-bottom: 1px solid rgba(46, 46, 46, .08);

    z-index: 1000;
}


.logo-container {
    justify-self: start;

    display: flex;
    align-items: center;
}


.logo {
    max-height: 68px;
    width: auto;
}


.nav-links {
    display: flex;
    align-items: center;

    gap: 40px;
}


.nav-links a {
    position: relative;

    color: var(--text);

    text-decoration: none;

    font-weight: 700;
}


.nav-links a::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -7px;

    width: 0;
    height: 2px;

    background: var(--primary);

    transition: width .25s ease;
}


.nav-links a:hover::after {
    width: 100%;
}


.navbar-actions {
    justify-self: end;
}


.phone-dropdown {
    position: relative;
}


.phone-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 9px 17px;

    border: 1px solid rgba(46, 46, 46, .14);
    border-radius: 100px;

    background: transparent;
    color: var(--text);

    font-family: "M PLUS 1p", Arial, sans-serif;
    font-size: .95rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease;
}


.dropdown-arrow {
    display: inline-block;

    transition: transform .25s ease;
}


.phone-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}


.phone-dropdown-trigger:hover,
.phone-dropdown.open .phone-dropdown-trigger {
    background: var(--primary);
    color: white;

    border-color: var(--primary);
}


.phone-dropdown-menu {
    position: absolute;

    top: calc(100% + 12px);
    left: 0;

    width: 310px;

    padding: 10px;

    background: white;

    border: 1px solid rgba(46, 46, 46, .08);
    border-radius: 18px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .13);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    pointer-events: none;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;
}


.phone-dropdown.open .phone-dropdown-menu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}


.phone-branch {
    display: flex;
    flex-direction: column;

    padding: 14px;

    border-radius: 12px;

    transition: background .2s ease;
}


.phone-branch:hover {
    background: #FAF7F2;
}


.phone-branch + .phone-branch {
    border-top: 1px solid rgba(46, 46, 46, .08);
}


.phone-branch-city {
    margin-bottom: 3px;

    color: var(--primary);

    font-size: .8rem;
    font-weight: 700;
}


.phone-branch-address {
    color: var(--text);

    text-decoration: none;

    font-size: .93rem;
    font-weight: 300;
}


.phone-branch-address:hover {
    color: var(--primary);
}


.phone-branch-number {
    width: fit-content;

    margin-top: 6px;

    color: var(--text);

    text-decoration: none;

    direction: ltr;

    font-size: 1rem;
    font-weight: 700;

    transition: color .2s ease;
}


.phone-branch-number:hover {
    color: var(--primary);
}


/* =========================
   Sections
========================== */

.section {
    min-height: 100vh;

    padding: 140px 8% 90px;
}


.section-header {
    margin-bottom: 60px;

    text-align: center;
}


.section-label {
    color: var(--primary);

    font-size: .9rem;
    font-weight: 700;

    letter-spacing: 1px;
}


.section-header h2 {
    margin-top: 5px;

    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
}


/* =========================
   Hero
========================== */

.hero {
    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(138, 154, 126, .13),
            transparent 55%
        ),
        var(--background);
}


.hero-content {
    width: min(850px, 100%);

    text-align: center;
}


.hero-kicker {
    display: inline-block;

    margin-bottom: 18px;

    color: var(--primary);

    font-weight: 700;

    letter-spacing: 2px;
}


.hero h1 {
    margin-bottom: 25px;

    font-size: clamp(2.8rem, 7vw, 5.5rem);
    line-height: 1.1;

    color: var(--secondary);
}


.hero-description {
    max-width: 760px;

    margin: 0 auto 30px;

    color: #555;

    font-size: 1.1rem;
    line-height: 1.85;

    font-weight: 300;
}


.hero-description p {
    margin-bottom: 14px;
}


.hero-button {
    display: inline-block;

    padding: 14px 30px;

    border-radius: 100px;

    background: var(--primary);
    color: white;

    text-decoration: none;

    font-weight: 700;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}


.hero-button:hover {
    transform: translateY(-4px);

    background: #74856A;

    box-shadow: 0 12px 30px rgba(138, 154, 126, .32);
}


/* =========================
   Cheers Animation
========================== */

.cheers-line {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 10px;

    color: var(--text);

    font-size: 1.15rem;
}


.cheers-line strong {
    font-weight: 700;
}


.cheers-animation {
    position: relative;

    width: 100px;
    height: 72px;

    display: flex;
    align-items: flex-end;
    justify-content: center;
}


.cheers-glass {
    position: absolute;

    bottom: -8px;

    width: 50px;
    height: 72px;

    color: var(--text);

    transform-origin: 50% 90%;
}


.cheers-glass-left {
    left: 9px;

    transform: translateX(-12px) rotate(-12deg);
}


.cheers-glass-right {
    right: 9px;

    transform: translateX(12px) rotate(12deg);
}


.cheers-animation.animate .cheers-glass-left {
    animation: cheersLeft 1.05s cubic-bezier(.2, .8, .3, 1) forwards;
}


.cheers-animation.animate .cheers-glass-right {
    animation: cheersRight 1.05s cubic-bezier(.2, .8, .3, 1) forwards;
}


@keyframes cheersLeft {

    0% {
        transform: translateX(-12px) rotate(-12deg);
    }

    38% {
        transform: translateX(-1px) rotate(8deg);
    }

    48% {
        transform: translateX(0) rotate(10deg);
    }

    58% {
        transform: translateX(-3px) rotate(5deg);
    }

    72% {
        transform: translateX(-1px) rotate(7deg);
    }

    100% {
        transform: translateX(-12px) rotate(-12deg);
    }
}


@keyframes cheersRight {

    0% {
        transform: translateX(12px) rotate(12deg);
    }

    38% {
        transform: translateX(1px) rotate(-8deg);
    }

    48% {
        transform: translateX(0) rotate(-10deg);
    }

    58% {
        transform: translateX(3px) rotate(-5deg);
    }

    72% {
        transform: translateX(1px) rotate(-7deg);
    }

    100% {
        transform: translateX(12px) rotate(12deg);
    }
}


.cheers-splash {
    position: absolute;

    top: 4px;
    left: 50%;

    width: 1px;
    height: 1px;

    opacity: 0;
}


.cheers-splash span {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--primary);

    opacity: 0;
}


.cheers-splash span:nth-child(1) {
    --splash-x: -25px;
    --splash-y: -17px;
}

.cheers-splash span:nth-child(2) {
    --splash-x: -12px;
    --splash-y: -29px;
}

.cheers-splash span:nth-child(3) {
    --splash-x: 0px;
    --splash-y: -34px;
}

.cheers-splash span:nth-child(4) {
    --splash-x: 14px;
    --splash-y: -27px;
}

.cheers-splash span:nth-child(5) {
    --splash-x: 27px;
    --splash-y: -15px;
}


.cheers-animation.animate .cheers-splash {
    animation: splashContainer 1.05s ease forwards;
}


.cheers-animation.animate .cheers-splash span {
    animation: splashDrop .55s ease-out .4s forwards;
}


@keyframes splashContainer {

    0%,
    35% {
        opacity: 0;
    }

    40%,
    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


@keyframes splashDrop {

    0% {
        opacity: 0;

        transform:
            translate(0, 0)
            scale(.4);
    }

    25% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translate(
                var(--splash-x),
                var(--splash-y)
            )
            scale(1);
    }
}


/* =========================
   Products
========================== */

.products-section {
    background: white;
}


.products-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(230px, 1fr));

    gap: 25px;

    max-width: 1200px;

    margin: auto;
}


/* =========================
   About
========================== */

.about-section {
    max-width: 1400px;

    margin: auto;
}


.about-text {
    max-width: 850px;

    margin: 0 auto 60px;
}


/* =========================
   Contact Cards
========================== */

.contact-cards {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

    max-width: 1050px;

    margin: 40px auto 80px;

    align-items: start;
}


.contact-card {
    width: 100%;
    min-height: 110px;

    padding: 25px;

    border: 1px solid rgba(46, 46, 46, .10);
    border-radius: var(--radius);

    background: rgba(255, 255, 255, .55);

    color: var(--text);

    text-decoration: none;

    display: flex;
    align-items: center;

    gap: 18px;

    font-family: "M PLUS 1p", Arial, sans-serif;
    font-weight: 300;

    text-align: right;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.contact-card strong {
    font-weight: 700;
}


.contact-icon {
    width: 50px;
    height: 50px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--primary);
    color: white;
}


.contact-phone-icon svg {
    width: 23px;
    height: 23px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.contact-card > div {
    display: flex;
    flex-direction: column;
}


.contact-card.disabled {
    opacity: .4;

    cursor: default;
}


.contact-phone-wrapper {
    position: relative;
}


.contact-phone-trigger {
    cursor: pointer;
}


.contact-phone-trigger:hover,
.contact-phone-wrapper.open .contact-phone-trigger {
    transform: translateY(-5px);

    border-color: var(--primary);

    box-shadow: 0 15px 35px rgba(46, 46, 46, .08);
}


.contact-dropdown-arrow {
    margin-right: auto;

    font-size: 1.25rem;

    transition: transform .25s ease;
}


.contact-phone-wrapper.open .contact-dropdown-arrow {
    transform: rotate(180deg);
}


.contact-phone-menu {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    width: 100%;

    padding: 10px;

    background: white;

    border: 1px solid rgba(46, 46, 46, .08);
    border-radius: 18px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .13);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    pointer-events: none;

    z-index: 100;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;
}


.contact-phone-wrapper.open .contact-phone-menu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}


.contact-phone-branch {
    display: flex;
    flex-direction: column;

    gap: 3px;

    padding: 13px;

    border-radius: 12px;
}


.contact-phone-branch + .contact-phone-branch {
    border-top: 1px solid rgba(46, 46, 46, .08);
}


.contact-phone-branch strong {
    color: var(--primary);

    font-weight: 700;
}


.contact-phone-branch a {
    color: var(--text);

    text-decoration: none;

    font-size: .9rem;
}


.contact-phone-branch a:hover {
    color: var(--primary);
}


.contact-phone-branch a[href^="tel:"] {
    width: fit-content;

    margin-top: 4px;

    color: var(--text);

    direction: ltr;

    font-size: 1rem;
    font-weight: 700;
}


.contact-phone-branch a[href^="tel:"]:hover {
    color: var(--primary);
}


/* =========================
   Branches
========================== */

.branches-section {
    max-width: 1200px;

    margin: 100px auto 0;
}


.branches-header {
    margin-bottom: 45px;

    text-align: center;
}


.branches-header h3 {
    margin: 8px 0 12px;

    font-size: clamp(2rem, 3.8vw, 3.2rem);
    line-height: 1.15;
}


.branches-header p {
    color: #777;

    font-size: 1.05rem;
}


.branches-grid {
    display: grid;

    grid-template-columns: minmax(0, 1fr);

    max-width: 760px;
    margin-inline: auto;

    gap: 30px;

    align-items: start;
}


.branch-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: white;

    border: 1px solid rgba(46, 46, 46, .07);
    border-radius: 28px;

    box-shadow: 0 18px 55px rgba(46, 46, 46, .07);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.branch-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 25px 65px rgba(46, 46, 46, .10);
}


.branch-info {
    padding: 40px;
}


.branch-tag {
    display: inline-block;

    margin-bottom: 14px;

    padding: 6px 14px;

    border-radius: 100px;

    background: rgba(138, 154, 126, .14);

    color: var(--primary);

    font-size: .85rem;
    font-weight: 700;
}


.branch-info h4 {
    margin-bottom: 22px;

    font-size: 1.5rem;
}


.branch-detail {
    display: flex;
    align-items: center;

    gap: 12px;

    width: fit-content;

    margin: 12px 0;

    color: var(--text);

    text-decoration: none;

    transition: color .2s ease;
}


.branch-detail:hover {
    color: var(--primary);
}


.branch-detail-icon {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(138, 154, 126, .14);

    color: var(--primary);
}


.branch-phone-icon svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.branch-hours {
    margin-top: 30px;

    padding-top: 25px;

    border-top: 1px solid rgba(46, 46, 46, .08);
}


.branch-hours h5 {
    margin-bottom: 10px;

    font-size: 1.05rem;
}


.hours-row {
    display: flex;
    justify-content: space-between;

    padding: 8px 0;

    border-bottom: 1px solid rgba(46, 46, 46, .06);
}


.hours-note {
    margin-top: 15px;

    color: #777;

    font-size: .82rem;
}


/* =========================
   Maps
========================== */

.branch-map {
    position: relative;

    padding: 14px;

    background: #F3EEE7;
}


.branch-map iframe {
    width: 100%;
    height: 330px;

    border: 0;
    border-radius: 18px;
}


.navigate-button {
    position: absolute;

    left: 50%;
    bottom: 32px;

    transform: translateX(-50%);

    padding: 12px 25px;

    border-radius: 100px;

    background: var(--primary);
    color: white;

    text-decoration: none;

    font-weight: 700;

    white-space: nowrap;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .16);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.navigate-button:hover {
    transform:
        translateX(-50%)
        translateY(-3px);

    background: #74856A;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .20);
}


/* =========================
   Accessibility
========================== */

.accessibility-button {
    position: fixed;

    right: 24px;
    bottom: 24px;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: var(--primary);
    color: white;

    cursor: pointer;

    z-index: 1500;

    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);

    transition:
        transform .25s ease,
        background .25s ease;
}


.accessibility-button:hover {
    transform: translateY(-3px);

    background: #74856A;
}


.accessibility-button svg {
    width: 28px;
    height: 28px;
}


.accessibility-menu {
    position: fixed;

    right: 24px;
    bottom: 95px;

    width: min(330px, calc(100vw - 48px));

    padding: 22px;

    display: none;

    background: white;

    border-radius: var(--radius);

    box-shadow: 0 20px 60px rgba(0, 0, 0, .20);

    z-index: 1600;
}


.accessibility-menu.open {
    display: block;
}


.accessibility-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 15px;
}


.accessibility-header strong {
    font-weight: 700;
}


.accessibility-header button {
    border: none;

    background: transparent;

    font-size: 18px;

    cursor: pointer;
}


.accessibility-menu > button {
    width: 100%;

    margin: 4px 0;

    padding: 12px 15px;

    border: none;
    border-radius: 10px;

    background: #F4F4F4;

    color: var(--text);

    text-align: right;

    cursor: pointer;

    font-family: "M PLUS 1p", Arial, sans-serif;
    font-weight: 300;
}


.accessibility-menu > button:hover {
    background: #EAEAEA;
}


.reset-accessibility {
    color: #A63131 !important;
}


/* =========================
   Accessibility States
========================== */

html.large-text {
    font-size: 120%;
}


body.high-contrast {
    --background: #000;
    --text: #fff;
    --primary: #ffff00;
    --secondary: #ffff00;

    background: #000;
    color: #fff;
}


body.high-contrast .navbar,
body.high-contrast .products-section,
body.high-contrast .branch-card,
body.high-contrast .phone-dropdown-menu,
body.high-contrast .contact-phone-menu,
body.high-contrast .accessibility-menu {
    background: #000;
    color: #fff;
}


body.high-contrast .hero-description,
body.high-contrast .branches-header p,
body.high-contrast .hours-note {
    color: #fff;
}


body.high-contrast .contact-card {
    background: #000;
    color: #fff;
}


body.high-contrast .phone-branch-address,
body.high-contrast .contact-phone-branch a {
    color: #fff;
}


body.grayscale main,
body.grayscale .logo,
body.grayscale .contact-icon,
body.grayscale .accessibility-button {
    filter: grayscale(100%);
}


body.highlight-links a {
    text-decoration: underline !important;

    outline: 2px solid currentColor;
    outline-offset: 3px;
}


body.no-animations *,
body.no-animations *::before,
body.no-animations *::after {
    animation: none !important;

    transition: none !important;

    scroll-behavior: auto !important;
}


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


/* =========================
   Mobile
========================== */

@media (max-width: 800px) {

    .navbar {
        height: 75px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 8px 12px;
    }


    .logo-container {
        position: absolute;

        right: 12px;
    }


    .logo {
        max-height: 53px;
        max-width: 60px;
    }


    .nav-links {
        position: absolute;

        left: 50%;

        transform: translateX(-50%);

        display: flex;

        gap: 14px;

        white-space: nowrap;

        font-size: .84rem;
    }


    .navbar-actions {
        position: absolute;

        left: 12px;
    }


    .phone-dropdown-trigger {
        padding: 7px 10px;

        font-size: .8rem;
    }


    .phone-dropdown-menu {
        position: fixed;

        top: 82px;
        left: 16px;
        right: 16px;

        width: auto;
    }


    .section {
        padding: 110px 20px 70px;
    }


    .hero {
        min-height: auto;

        padding-top: 125px;
        padding-bottom: 80px;
    }


    .hero h1 {
        font-size: clamp(2.3rem, 11vw, 3.8rem);
    }


    .hero-description {
        font-size: 1rem;

        line-height: 1.8;
    }


    .hero-description p {
        margin-bottom: 13px;
    }


    .cheers-line {
        flex-direction: column;

        gap: 0;

        margin-top: 5px;
    }


    .cheers-animation {
        margin-top: -4px;
    }


    .contact-cards {
        grid-template-columns: 1fr;
    }


    .contact-phone-menu {
        position: relative;

        top: auto;
        right: auto;

        margin-top: 10px;

        display: none;

        opacity: 1;
        visibility: visible;

        transform: none;

        pointer-events: auto;
    }


    .contact-phone-wrapper.open .contact-phone-menu {
        display: block;
    }


    .branches-grid {
        grid-template-columns: 1fr;
    }


    .branches-section {
        margin-top: 65px;
    }


    .branch-card {
        display: flex;
        flex-direction: column;
    }


    .branch-info {
        padding: 28px 22px;
    }


    .branch-map {
        min-height: auto;
    }


    .branch-map iframe {
        height: 320px;

        min-height: 0;
    }


    .navigate-button {
        max-width: calc(100% - 40px);

        overflow: hidden;

        text-overflow: ellipsis;
    }


    .accessibility-button {
        right: 16px;
        bottom: 16px;
    }


    .accessibility-menu {
        right: 16px;
        bottom: 85px;

        width: calc(100vw - 32px);
    }

}


/* =========================
   Reduced Motion
========================== */

@media (prefers-reduced-motion: reduce) {

    .cheers-animation.animate .cheers-glass-left,
    .cheers-animation.animate .cheers-glass-right,
    .cheers-animation.animate .cheers-splash,
    .cheers-animation.animate .cheers-splash span {
        animation: none;
    }

}

/* Product catalog */
[hidden] { display: none !important; }
.products-section .section-header { margin-bottom: 16px; }
.catalog-intro { text-align: center; color: #62665f; margin-bottom: 38px; }
.catalog-toolbar { display: flex; gap: 20px; align-items: end; max-width: 1200px; margin: 0 auto 20px; }
.catalog-search { flex: 1; }
.catalog-toolbar label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: 8px; }
.catalog-toolbar input, .catalog-toolbar select { width: 100%; min-height: 48px; border: 1px solid #d8ddd4; background: #fafbf8; color: var(--text); border-radius: 12px; padding: 10px 14px; font-size: 1rem; }
.catalog-toolbar input:focus, .catalog-toolbar select:focus { outline: 2px solid #5b704e; outline-offset: 2px; }
.catalog-count { max-width: 1200px; margin: 0 auto 20px; color: #62665f; font-size: .85rem; }
#productGrid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.product-card { min-width: 0; border: 1px solid #e9e9e1; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 5px 20px rgba(46,46,46,.035); transition: box-shadow .2s, transform .2s; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(46,46,46,.09); }
.product-image-button { display: block; width: 100%; border: 0; padding: 0; background: #f4f4f1; cursor: zoom-in; aspect-ratio: 16 / 10; }
.product-image-button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-card h3 { padding: 18px 16px 22px; font: 700 1rem/1.6 "M PLUS 1p",Arial,sans-serif; text-align: center; color: var(--text); overflow-wrap: anywhere; }
.catalog-more { text-align: center; margin-top: 32px; }
.catalog-more button, .catalog-empty button { border: 1px solid #526749; border-radius: 100px; padding: 13px 28px; background: #526749; color: #fff; cursor: pointer; font-size: 1rem; }
.catalog-empty { padding: 40px 20px; text-align: center; }
.catalog-empty p { margin-bottom: 20px; }
.product-dialog { position: fixed; margin: auto; width: min(760px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; border: 0; border-radius: 20px; background: #fff; padding: 56px 20px 24px; color: var(--text); }
.product-dialog::backdrop { background: rgba(12,18,10,.72); }
.product-dialog img { display: block; width: 100%; max-height: 60dvh; object-fit: contain; }
.product-dialog h3 { font: 700 1.2rem/1.6 "M PLUS 1p",Arial,sans-serif; color: inherit; text-align: center; margin-top: 18px; }
.product-dialog-close { position: absolute; top: 8px; right: 12px; width: 42px; height: 42px; border: 0; border-radius: 50%; font-size: 28px; background: #f3f3ed; color: #222; cursor: pointer; }
body.product-dialog-open { overflow: hidden; }
body.high-contrast .product-card, body.high-contrast .product-dialog, body.high-contrast .catalog-toolbar input, body.high-contrast .catalog-toolbar select { background: #000; color: #fff; border: 1px solid #fff; }
body.high-contrast .catalog-count, body.high-contrast .catalog-intro { color: #fff; }
body.high-contrast .catalog-more button, body.high-contrast .catalog-empty button { background: #ff0; color: #000; }
@media(max-width: 800px) {
    #productGrid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .catalog-toolbar { flex-direction: column; align-items: stretch; gap: 14px; }
    .product-card h3 { font-size: .85rem; padding: 12px 8px 16px; }
    .product-image-button { aspect-ratio: 1 / 1; }
}
@media(min-width: 1500px) { #productGrid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
/* Usability fixes */
html { scroll-behavior: smooth; }
html.no-animations { scroll-behavior: auto; }
button { font-size: 1rem; }
.logo { width: auto; height: 68px; object-fit: contain; }
.section { scroll-margin-top: 0; }
.phone-dropdown-menu, .contact-phone-menu {
    max-height: calc(100vh - 130px);
    max-height: calc(100dvh - 130px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.accessibility-menu {
    max-height: calc(100vh - 111px);
    max-height: calc(100dvh - 111px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.accessibility-header button { color: inherit; min-width: 40px; min-height: 40px; }
.accessibility-menu > button[aria-pressed="true"] { outline: 2px solid var(--text); outline-offset: -2px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; }
body.high-contrast .accessibility-menu > button {
    background: #181818; color: #fff; border: 1px solid #fff;
}
body.high-contrast .accessibility-menu > button:hover,
body.high-contrast .accessibility-menu > button[aria-pressed="true"] {
    background: #ffff00; color: #000;
}
body.high-contrast .reset-accessibility { color: #ffff00 !important; }
body.high-contrast .reset-accessibility:hover { color: #000 !important; }
body.high-contrast .hero-button,
body.high-contrast .navigate-button,
body.high-contrast .accessibility-button,
body.high-contrast .contact-icon,
body.high-contrast .phone-dropdown-trigger:hover,
body.high-contrast .phone-dropdown.open .phone-dropdown-trigger {
    background: #ffff00; color: #000;
}
body.high-contrast .phone-branch:hover { background: #222; }
body.high-contrast .branch-map { background: #000; }
body.high-contrast .contact-card.disabled { opacity: 1; }
body.high-contrast .branch-tag, body.high-contrast .branch-detail-icon { background: #222; }
body.high-contrast .accessibility-menu, body.high-contrast .phone-dropdown-menu,
body.high-contrast .contact-phone-menu, body.high-contrast .contact-card,
body.high-contrast .branch-card { border: 1px solid #fff; }
.hours-row > span:last-child, .branch-detail[href^="tel:"] > span:last-child { direction: ltr; unicode-bidi: isolate; }
@media (max-width: 800px) {
    .navbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
    .logo-container, .nav-links, .navbar-actions { position: static; transform: none; }
    .nav-links { justify-content: center; gap: clamp(7px, 2vw, 14px); white-space: normal; flex-wrap: wrap; }
    .logo { height: 53px; }
    .accessibility-menu { max-height: calc(100vh - 101px); max-height: calc(100dvh - 101px); }
    .contact-phone-menu { max-height: none; }
    .phone-dropdown-menu { max-height: calc(100vh - 98px); max-height: calc(100dvh - 98px); }
}
@media (max-width: 380px) {
    html.large-text .navbar { gap: 5px; padding-inline: 8px; }
    html.large-text .logo { max-width: 42px; height: 42px; }
    html.large-text .phone-dropdown-trigger { padding-inline: 7px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Gold identity and a quiet, decorative home background. */
.navbar .logo { width: 114px; height: 76px; max-height: 76px; border-radius: 9px; }
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-content { position: relative; z-index: 1; }
.hero-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-glow { position: absolute; width: min(65vw, 850px); aspect-ratio: 1; border-radius: 50%; animation: ambientFloat 20s ease-in-out infinite alternate; }
.hero-glow-gold { top: -18%; right: -24%; background: radial-gradient(circle, rgba(210,153,77,.24), rgba(210,153,77,.09) 45%, transparent 70%); }
.hero-glow-sage { bottom: -25%; left: -22%; background: radial-gradient(circle, rgba(138,154,126,.26), rgba(138,154,126,.09) 45%, transparent 70%); animation-delay: -10s; }
.hero-orbit { position: absolute; width: clamp(260px,40vw,620px); aspect-ratio: 1; border: 1px solid rgba(169,125,65,.17); border-radius: 50%; animation: ambientFloat 24s ease-in-out infinite alternate; }
.hero-orbit::after { content: ''; position: absolute; inset: 22px; border: 1px solid rgba(169,125,65,.10); border-radius: inherit; }
.hero-orbit-one { top: 15%; right: -25%; }
.hero-orbit-two { bottom: -15%; left: -24%; animation-delay: -12s; }
.hero-spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: rgba(175,131,75,.36); animation: ambientFloat 12s ease-in-out infinite alternate; }
.hero-spark-one { top: 24%; left: 13%; }
.hero-spark-two { top: 68%; right: 11%; width: 5px; height: 5px; animation-delay: -4s; }
.hero-spark-three { bottom: 13%; left: 25%; width: 4px; height: 4px; animation-delay: -8s; }
@keyframes ambientFloat { from { transform: translate3d(0,0,0); } to { transform: translate3d(18px,-28px,0); } }
body.high-contrast .hero-atmosphere { display: none; }
@media (max-width: 800px) {
    .navbar .logo { width: 90px; height: 60px; max-height: 60px; }
    .hero-glow { width: 100vw; }
    .hero-glow-gold { right: -62%; top: 0; }
    .hero-glow-sage { left: -58%; bottom: 0; }
    .hero-orbit-one { right: -65%; top: 15%; }
    .hero-orbit-two { left: -65%; bottom: 0; }
}
@media (max-width: 380px) {
    .navbar { padding-inline: 10px; gap: 6px; }
    .navbar .logo { width: 81px; height: 54px; }
    html.large-text .navbar .logo { width: 63px; max-width: 63px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .hero-atmosphere span { animation: none; } }

/* Circular logo crop and stronger home atmosphere. */
.navbar .logo-container {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    overflow: hidden;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(70,45,20,.18);
}
.navbar .logo-container .logo {
    width: 156px;
    height: 104px;
    max-width: none;
    max-height: none;
    flex-shrink: 0;
    border-radius: 0;
    object-fit: contain;
}
.hero-glow-gold { background: radial-gradient(circle, rgba(210,153,77,.48), rgba(210,153,77,.20) 45%, transparent 70%); }
.hero-glow-sage { background: radial-gradient(circle, rgba(138,154,126,.44), rgba(138,154,126,.18) 45%, transparent 70%); }
.hero-orbit { border: 2px solid rgba(169,125,65,.35); }
.hero-orbit::after { border-color: rgba(169,125,65,.23); }
.hero-orbit-one { right: -20%; }
.hero-orbit-two { left: -19%; }
.hero-spark { background: rgba(175,131,75,.70); box-shadow: 0 0 16px rgba(210,153,77,.3); }
@keyframes ambientFloat { from { transform: translate3d(0,0,0); } to { transform: translate3d(28px,-42px,0); } }
@media (max-width: 800px) {
    .navbar .logo-container { width: 62px; height: 62px; }
    .navbar .logo-container .logo { width: 124px; height: 82.67px; }
    .hero-glow-gold { right: -48%; }
    .hero-glow-sage { left: -45%; }
    .hero-orbit-one { right: -55%; }
    .hero-orbit-two { left: -55%; }
}
@media (max-width: 380px) {
    .navbar .logo-container { width: 56px; height: 56px; }
    .navbar .logo-container .logo { width: 112px; height: 74.67px; }
}

/* Slow, staggered motion with matching start/end frames for seamless loops. */
.hero-glow { animation: homeGlowDrift 12s ease-in-out infinite; }
.hero-glow-sage { animation-duration: 15s; animation-delay: -11s; animation-direction: reverse; }
.hero-orbit { animation: homeRingDrift 14s ease-in-out infinite; }
.hero-orbit-two { animation-duration: 17s; animation-delay: -15s; animation-direction: reverse; }
.hero-spark { animation: homeSparkDrift 8s ease-in-out infinite; }
.hero-spark-two { animation-duration: 10s; animation-delay: -6s; }
.hero-spark-three { animation-duration: 12s; animation-delay: -13s; }
@keyframes homeGlowDrift {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(-76px,58px,0) scale(1.12); }
}
@keyframes homeRingDrift {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(56px,-72px,0) scale(1.07); }
}
@keyframes homeSparkDrift {
    0%, 100% { transform: translate3d(0,0,0); opacity: .65; }
    50% { transform: translate3d(-34px,-54px,0); opacity: 1; }
}
@media (max-width: 800px) {
    .hero-glow { animation-name: homeGlowMobile; }
    .hero-orbit { animation-name: homeRingMobile; }
}
@keyframes homeGlowMobile {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(-36px,36px,0) scale(1.08); }
}
@keyframes homeRingMobile {
    0%, 100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(28px,-44px,0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-atmosphere span { animation: none !important; }
}
body.no-animations .hero-atmosphere span { animation: none !important; }

/* Colorful accents stay at the edges so the introduction remains readable. */
.hero { background: radial-gradient(ellipse at center, #fffaf3 15%, #f7eee1 100%); }
.hero-glow-gold { background: radial-gradient(circle, rgba(230,166,67,.57), rgba(225,160,65,.24) 45%, transparent 70%); }
.hero-glow-sage { background: radial-gradient(circle, rgba(118,151,113,.50), rgba(138,154,126,.23) 45%, transparent 70%); }
.hero-glow-wine { width: min(58vw,720px); top: 10%; left: -32%; background: radial-gradient(circle, rgba(155,68,91,.32), rgba(155,68,91,.12) 45%, transparent 70%); animation-duration: 18s; animation-delay: -7s; }
.hero-illustration { position: absolute; width: clamp(85px,11vw,155px); opacity: .65; animation: homeIllustrationFloat 13s ease-in-out infinite; }
.hero-wine-glass { left: 4%; top: 24%; color: #97475c; transform-origin: 50% 75%; }
.hero-citrus { right: 4%; bottom: 13%; color: #bd8736; animation-duration: 17s; animation-delay: -8s; }
.hero-bubble { position: absolute; border-radius: 50%; border: 1.5px solid rgba(169,125,65,.40); background: rgba(239,190,112,.10); animation: homeBubbleFloat 11s ease-in-out infinite; }
.hero-bubble-one { width: 22px; height: 22px; right: 15%; top: 24%; }
.hero-bubble-two { width: 13px; height: 13px; left: 19%; bottom: 17%; animation-duration: 14s; animation-delay: -5s; border-color: rgba(151,71,92,.4); }
.hero-bubble-three { width: 34px; height: 34px; right: 7%; top: 48%; animation-duration: 16s; animation-delay: -9s; }
.hero-kicker { padding: 8px 18px; border-radius: 30px; border: 1px solid rgba(138,154,126,.28); background: rgba(255,255,255,.6); }
@keyframes homeIllustrationFloat {
    0%,100% { transform: translate3d(0,0,0) rotate(-9deg); }
    50% { transform: translate3d(10px,-32px,0) rotate(7deg); }
}
@keyframes homeBubbleFloat {
    0%,100% { transform: translate3d(0,12px,0); opacity: .5; }
    50% { transform: translate3d(-18px,-40px,0); opacity: 1; }
}
@media(max-width: 1050px) {
    .hero-wine-glass { left: -3%; opacity: .24; }
    .hero-citrus { right: -3%; opacity: .30; }
}
@media(max-width: 800px) {
    .hero-glow-wine { width: 100vw; left: -72%; top: 20%; }
    .hero-wine-glass { top: 19%; left: -32px; width: 90px; }
    .hero-citrus { right: -28px; bottom: 12%; width: 96px; }
    .hero-bubble-one { right: 7%; top: 13%; }
    .hero-bubble-two { left: 6%; }
    .hero-bubble-three { right: -12px; }
}
body.high-contrast .hero { background: #000; }
body.high-contrast .hero-kicker { background: #000; border-color: #fff; }
body.no-animations .hero-atmosphere * { animation: none !important; }
@media(prefers-reduced-motion: reduce) { .hero-atmosphere * { animation: none !important; } }

/* A single illustrated toast on each entrance into the viewport. */
#cheersAnimation { width: 144px; height: 126px; }
.cheers-scene { display: block; width: 100%; height: 100%; overflow: visible; }
.cheers-cup-left { transform-origin: 40px 115px; transform: rotate(-9deg); }
.cheers-cup-right { transform-origin: 120px 115px; transform: rotate(9deg); }
.toast-liquid { transform-origin: 40px 60px; }
.toast-drop { opacity: 0; }
#cheersAnimation.animate .cheers-cup-left { animation: toastLeft 1.35s both; }
#cheersAnimation.animate .cheers-cup-right { animation: toastRight 1.35s both; }
#cheersAnimation.animate .toast-liquid { animation: toastSlosh 1.35s both; }
#cheersAnimation.animate .toast-drop { animation: toastSplash 1.35s both; }
@keyframes toastLeft {
  0% { transform: rotate(-9deg); animation-timing-function: ease-out; }
  16% { transform: rotate(-15deg); animation-timing-function: cubic-bezier(.65,0,.85,.5); }
  38% { transform: rotate(10deg); animation-timing-function: ease-out; }
  54% { transform: rotate(-2deg); animation-timing-function: ease-in-out; }
  100% { transform: rotate(-9deg); }
}
@keyframes toastRight {
  0% { transform: rotate(9deg); animation-timing-function: ease-out; }
  16% { transform: rotate(15deg); animation-timing-function: cubic-bezier(.65,0,.85,.5); }
  38% { transform: rotate(-10deg); animation-timing-function: ease-out; }
  54% { transform: rotate(2deg); animation-timing-function: ease-in-out; }
  100% { transform: rotate(9deg); }
}
@keyframes toastSlosh {
  0%,100% { transform: rotate(0) translateY(0); }
  16% { transform: rotate(7deg); }
  38% { transform: rotate(-12deg) translateY(-4px); }
  54% { transform: rotate(9deg) translateY(1px); }
  72% { transform: rotate(-4deg); }
  87% { transform: rotate(2deg); }
}
@keyframes toastSplash {
  0%,37% { opacity: 0; transform: translate(0,0); }
  39% { opacity: 1; transform: translate(0,0); animation-timing-function: ease-out; }
  62% { opacity: 1; transform: translate(var(--dx),var(--dy)); animation-timing-function: ease-in; }
  82%,100% { opacity: 0; transform: translate(var(--dx),8px); }
}
@media(max-width:800px) { #cheersAnimation { width:120px; height:105px; } }
body.high-contrast .cheers-scene { --primary:#ffff00; --secondary:#ffff00; }
body.no-animations #cheersAnimation *,
html.no-animations #cheersAnimation * { animation:none !important; }
@media(prefers-reduced-motion:reduce) { #cheersAnimation * { animation:none !important; } }


/* One shared animated backdrop across home, products and branches. */
body { isolation: isolate; }
.site-atmosphere {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, #fffaf3 15%, #f7eee1 100%);
}
.hero, .products-section, .about-section { background: transparent; }
body.high-contrast .site-atmosphere { display: none; }


/* לוגו בראש העמוד במקום הכותרת */
.hero h1.hero-logo-title {
    margin: 0 auto 25px;
    line-height: 0;
}

.hero-logo {
    display: block;
    width: clamp(240px, 40vw, 460px);
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .28));
}

@media (max-width: 768px) {
    .hero-logo {
        width: min(78vw, 340px);
    }
}