/* FONTS */

@font-face {
    font-family: 'Jost';
    src: url('../../fonts/jost/Jost-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* variable font axis */
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../../fonts/jost/Jost-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
    font-family: 'Jost', sans-serif;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*body .header-box .header-box-container{
    padding-left: 6%;
    padding-right: 6%;
}*/

body .container {
    padding-left: 15%;
    padding-right: 15%;
}

/* -------------------------------------------------------------------------
   Inline / flash messages — .errorMessage, .successMessage, .warningMessage
   Markup: cart_messages, checkout, profile, helpers; optional .alert .alertMessage
   ------------------------------------------------------------------------- */

.errorMessage,
.successMessage,
.warningMessage {
    position: relative;
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 12px 44px 12px 16px;
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    border-radius: 12px;
    border-style: solid;
    border-width: 1px;
    border-left-width: 4px;
}

.errorMessage:last-child,
.successMessage:last-child,
.warningMessage:last-child {
    margin-bottom: 0;
}

.errorMessage a,
.successMessage a,
.warningMessage a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.errorMessage a:hover,
.successMessage a:hover,
.warningMessage a:hover {
    opacity: 0.88;
}

/* Error — brand red accent (#e33e26), readable body text */
.errorMessage,
.errorMessage.alert,
.errorMessage.alert-danger {
    color: #7f1d1d;
    background-color: #fef2f2;
    border-color: #fecaca;
    border-left-color: #e33e26;
    box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04);
}

/* Success — same green family as promo / positive UI */
.successMessage,
.successMessage.alert,
.successMessage.alert-success {
    color: #14532d;
    background-color: #f0fdf4;
    border-color: #bbf7d0;
    border-left-color: #16a34a;
    box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04);
}

/* Warning — warm amber, not harsh yellow */
.warningMessage,
.warningMessage.alert,
.warningMessage.alert-warning {
    color: #78350f;
    background-color: #fffbeb;
    border-color: #fde68a;
    border-left-color: #d97706;
    box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04);
}

.errorMessage .msg-close-btn,
.successMessage .msg-close-btn,
.warningMessage .msg-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    display: block;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    background: transparent;
    opacity: 0.5;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.errorMessage .msg-close-btn:hover,
.successMessage .msg-close-btn:hover,
.warningMessage .msg-close-btn:hover {
    opacity: 1;
    background-color: rgba(10, 10, 10, 0.06);
}

.errorMessage .msg-close-btn::after,
.successMessage .msg-close-btn::after,
.warningMessage .msg-close-btn::after {
    content: '\00d7';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: #2c2c2e;
}

.header-box {
    display: flex;
    flex-direction: column;
    height: 381px;
    margin-bottom: 45px;
    background-color: #F1F1F1;
    box-sizing: border-box;
    background-image: url('../../images/store_theme/header_bg.svg');
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;

}

.header-box-top {
    position: relative;
    flex-shrink: 0;
    height: 200px;
    width: 100%;

}

.header-box-bottom {
    position: relative;
    flex: 1;
    min-height: 0;
}


/* -------------------------------------------------------------------------
   EMPTY HOME — .header-box.empty-home only (design: assets/images/DESIGN/empty-home-design.png)
   Background asset: assets/images/store_theme/empty-home-bg.png (1440×907)
   ------------------------------------------------------------------------- */

.header-box.empty-home {
    --empty-home-hero-height: calc(100vw * 907 / 1440);
    --empty-home-logo-height-ratio: 0.55;
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    margin-bottom: 0;
    background-color: #fff;
    overflow: visible;
}

.header-box.empty-home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--empty-home-hero-height);
    /*background-color: #e6e6e6;*/
    background-image: url('../../images/store_theme/empty-home-bg.png');
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

.header-box.empty-home > .container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 100%;
    min-height: var(--empty-home-hero-height);
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 28px;
}

/* --- Top band: logo left, auth + language right --- */
.header-box.empty-home .header-box-top {
    position: relative;
    flex: 0 0 auto;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
}

.header-box.empty-home .header-box-top .site-logo {
    position: relative;
    z-index: 1;
    max-width: min(44vw, 620px);
    margin: 0;
    padding: 0;
}

.header-box.empty-home .header-box-top .site-logo a.site-logo {
    display: block;
    line-height: 0;
}

.header-box.empty-home .header-box-top .site-logo img {
    display: block;
    width: auto;
    height: calc(var(--empty-home-hero-height) * var(--empty-home-logo-height-ratio));
    max-width: 100%;
    max-height: none;
}

.header-box.empty-home .header-box-top .menu-holder {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    z-index: 20;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 18px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    color: #3d3d3d;
    --store-menu-foreground: #3d3d3d;
    --store-menu-foreground-dim: #5c5c5c;
    pointer-events: auto;
}

.header-box.empty-home .header-box-top .menu-holder .notifications-menu,
.header-box.empty-home .header-box-top .menu-holder .customer-order-info-menu {
    display: none;
}

.header-box.empty-home .header-box-top .menu-holder a,
.header-box.empty-home .header-box-top .menu-holder a:link,
.header-box.empty-home .header-box-top .menu-holder a:visited {
    color: #3d3d3d;
    font-size: 14px;
    font-weight: 400;
}

.header-box.empty-home .header-box-top .menu-holder a:hover,
.header-box.empty-home .header-box-top .menu-holder a:focus {
    color: #1a1a1a;
    opacity: 1;
}

.header-box.empty-home .header-box-top .menu-holder .customer-prof-auth-btn,
.header-box.empty-home .header-box-top .menu-holder .profile-menu-btn-label {
    color: #3d3d3d;
    font-weight: 400;
}

.header-box.empty-home .header-box-top .menu-holder .profile-menu a,
.header-box.empty-home .header-box-top .menu-holder .profile-menu a .customer-prof-auth-btn {
    color: #3d3d3d;
}

.header-box.empty-home .header-box-top .menu-holder .cutomer-menu .profile-menu-btn {
    min-height: 0;
    padding: 0 30px 0 0;
    background: none;
    background-color: transparent;
    color: #3d3d3d;
}

.header-box.empty-home .header-box-top .menu-holder .cutomer-menu .profile-menu-btn:hover {
    background-color: transparent;
}

.header-box.empty-home .header-box-top .menu-holder .cutomer-menu .profile-menu-btn::after {
    filter: brightness(0) opacity(0.45);
}

.header-box.empty-home .header-box-top .menu-holder .lang-selectors-header {
    min-height: 0;
    padding: 0 0 0 30px;
    background: none;
    border-radius: 0;
}

.header-box.empty-home .header-box-top .menu-holder .lang-selectors-header:hover {
    background: none;
}

.header-box.empty-home .header-box-top .menu-holder .lang-selectors-header .lang-ic {
    left: 0;
    filter: brightness(0) opacity(0.5);
    opacity: 1;
}

.header-box.empty-home .header-box-top .menu-holder .lang-selectors-header .active-lang {
    color: #3d3d3d;
    font-weight: 400;
    text-transform: uppercase;
}

/* --- Bottom band: city selector + search pill, same width, left column --- */
.header-box.empty-home .header-box-bottom {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    max-width: 420px;
    min-height: 0;
    margin-top: -44px;
    padding: 0;
    --empty-home-field-width: 400px;
}

.header-box.empty-home .header-box-bottom .quick-buttons-holder {
    display: none;
}

.header-box.empty-home .header-box-bottom .location-box-holder {
    position: relative;
    top: auto;
    right: auto;
    left: 0;
    z-index: 20;
    display: block;
    width: 100%;
    max-width: var(--empty-home-field-width);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header-box.empty-home .location-box-holder .boxInner {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    min-height: 48px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 9999px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    padding: 0 46px 0 48px;
    transition: box-shadow 0.2s ease;
}

.header-box.empty-home .location-box-holder .boxInner:hover {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
}

.header-box.empty-home .location-box-holder .boxInner .location-ic {
    position: absolute;
    left: 20px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: 0;
    transform: translateY(-50%);
    background: url('../../images/ic_my_location_24px.svg') no-repeat center;
    background-size: 18px 18px;
    filter: brightness(0) saturate(100%) invert(32%) sepia(85%) saturate(2884%) hue-rotate(347deg) brightness(95%) contrast(90%);
    flex-shrink: 0;
    pointer-events: none;
}

.header-box.empty-home .location-box-holder .boxInner a.locationListSelectBtn,
.header-box.empty-home .location-box-holder .boxInner a.locationListSelectBtn:hover,
.header-box.empty-home .location-box-holder .boxInner a.locationListSelectBtn:focus {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 0;
    color: #4a4a4a;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-box.empty-home .location-box-holder .boxInner .location-selector-arrow.selector-arrow,
.header-box.empty-home .location-box-holder .boxInner .location-selector-arrow {
    position: absolute;
    right: 18px;
    top: 50%;
    left: auto;
    width: 18px;
    height: 18px;
    margin: 0;
    transform: translateY(-50%);
    background: url('../../images/arrow_header.svg') no-repeat center;
    background-size: 12px 10px;
    filter: brightness(0) opacity(0.4);
    flex-shrink: 0;
    pointer-events: none;
}

.header-box.empty-home .location-box-holder .listSelect.selectCity {
    left: 0;
    right: 0;
    z-index: 30;
}

.header-box.empty-home .header-box-bottom .search-input-holder {
    position: relative;
    left: auto;
    top: auto;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: var(--empty-home-field-width);
    margin: 10px 0 0;
    padding: 0;
    box-sizing: border-box;
}

.header-box.empty-home .header-box-bottom .search-input-holder .searchInput,
.header-box.empty-home .header-box-bottom .search-input-holder input.listSelectInput {
    min-height: 48px;
    height: 48px;
    padding: 12px 46px 12px 20px;
    background-color: #fff;
    background-image: url('../../images/magnif.png');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px 18px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 9999px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08);
    font-size: 14px;
    font-weight: 400;
    color: #1a1a1a;
}

.header-box.empty-home .header-box-bottom .search-input-holder .searchInput:hover,
.header-box.empty-home .header-box-bottom .search-input-holder input.listSelectInput:hover {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
}

.header-box.empty-home .header-box-bottom .search-input-holder .searchInput:focus,
.header-box.empty-home .header-box-bottom .search-input-holder input.listSelectInput:focus {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
}

.header-box.empty-home .header-box-bottom .search-input-holder .searchInput::placeholder,
.header-box.empty-home .header-box-bottom .search-input-holder input.listSelectInput::placeholder,
.header-box.empty-home .header-box-bottom .search-input-holder .searchInput::-webkit-input-placeholder,
.header-box.empty-home .header-box-bottom .search-input-holder input.listSelectInput::-webkit-input-placeholder,
.header-box.empty-home .header-box-bottom .search-input-holder .searchInput::-moz-placeholder,
.header-box.empty-home .header-box-bottom .search-input-holder input.listSelectInput::-moz-placeholder {
    color: #b8b8b8;
    font-style: normal;
    font-weight: 400;
    opacity: 1;
}

/* --- Services band (design: assets/images/DESIGN/service-design.png) --- */

.header-box.empty-home > .services {
    margin-top: -150px;
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 100%;
    padding: 40px 24px 52px;
    background: #fff;
    box-sizing: border-box;
    text-align: center;
}

.header-box.empty-home .services-title {
    margin: 0 auto 36px;
    padding: 0;
    max-width: 900px;
    font-family: 'Roboto', 'Jost', Helvetica, Arial, sans-serif;
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
    line-height: 1.25;
    color: #1a1a1a;
    text-align: center;
}

.header-box.empty-home .services-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 32px 56px;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    box-sizing: border-box;
}

.header-box.empty-home .services-list .service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 0 1 240px;
    max-width: 300px;
    text-align: center;
}

.header-box.empty-home .services-list .service-ic {
    display: block;
    flex-shrink: 0;
    width: 132px;
    height: 132px;
    margin: 0 auto 18px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.header-box.empty-home .service-non-stop .service-ic {
    background-image: url('../../images/store_theme/non_stop_ic.svg');
}

.header-box.empty-home .service-fast-delivery .service-ic {
    background-image: url('../../images/store_theme/fast_delivery_ic.svg');
}

.header-box.empty-home .service-top-stores .service-ic {
    background-image: url('../../images/store_theme/top_stores_ic.svg');
}

.header-box.empty-home .services-list .service-label {
    margin: 0 0 10px;
    font-family: 'Roboto', 'Jost', Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #1a1a1a;
    text-align: center;
}

.header-box.empty-home .services-list .service-desc {
    margin: 0;
    font-family: 'Roboto', 'Jost', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: #5a5a5a;
    text-align: center;
}

@media (max-width: 767px) {
    .header-box.empty-home {
        --empty-home-hero-height: max(520px, calc(100vw * 907 / 1440));
        --empty-home-logo-height-ratio: 0.41;
    }

    .header-box.empty-home > .container {
        padding-bottom: 20px;
    }

    .header-box.empty-home .header-box-top .site-logo {
        max-width: min(62vw, 320px);
    }

    .header-box.empty-home .header-box-top .menu-holder {
        top: 0;
        right: 0;
        gap: 4px 10px;
    }

    .header-box.empty-home .header-box-bottom {
        max-width: 100%;
        margin-top: -28px;
        --empty-home-field-width: 100%;
    }

    .header-box.empty-home > .services {
        padding: 32px 16px 40px;
    }
}


/* -------------------------------------------------------------------------
   MENU HOLDER — top bar actions (template: application/views/stores/main/headerBox.php
   .header-box-top > .menu-holder > .menu-item)
   Container for the header’s icon/action strip (profile, notifications, order status,
   language selector, etc.). Each .menu-item wraps one block of markup; add more
   <div class="menu-item">…</div> as needed. Child widgets keep their own classes.
   Design ref: assets/images/DESIGN/eeatingh-home_header — row aligned to the right;
   default foreground on the red band is off-white; dropdown panels use dark text.
   ------------------------------------------------------------------------- */

.header-box-top .menu-holder {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    align-content: flex-start;
    gap: 6px 14px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px 16px 0 20px;
    box-sizing: border-box;
    pointer-events: auto;
    text-align: right;
    color: rgba(255, 255, 255, 0.96);
    --store-menu-foreground: rgba(255, 255, 255, 0.96);
    --store-menu-foreground-dim: rgba(255, 255, 255, 0.78);
}

.header-box-top .menu-holder .menu-item {
    position: relative;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: inherit;
    float: none;
}

.header-box-top .menu-holder .cutomer-menu,
.header-box-top .menu-holder .mini-notifications,
.header-box-top .menu-holder .customer-order-info {
    float: none;
}

/* Top bar: light text / links (rests on the red header) */
.header-box-top .menu-holder a,
.header-box-top .menu-holder a:link,
.header-box-top .menu-holder a:visited {
    color: var(--store-menu-foreground, rgba(255, 255, 255, 0.96));
    text-decoration: none;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.header-box-top .menu-holder a:hover,
.header-box-top .menu-holder a:focus {
    color: #ffffff;
    opacity: 1;
    outline: none;
}

.header-box-top .menu-holder .customer-prof-auth-btn {
    color: var(--store-menu-foreground, rgba(255, 255, 255, 0.96));
    font-weight: 700;
}

.header-box-top .menu-holder .profile-menu-btn-label {
    color: var(--store-menu-foreground, rgba(255, 255, 255, 0.96));
}

/* Language: globe (language_ic.svg) — light on red; layout matches lang_selector view */
.header-box-top .menu-holder .lang-selectors {
    float: none;
    margin: 0;
    position: relative;
}

.header-box-top .menu-holder .lang-selectors-header {
    position: relative;
    cursor: pointer;
    min-height: 36px;
    padding: 6px 12px 6px 36px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.14);
    border: none;
    box-sizing: border-box;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.header-box-top .menu-holder .lang-selectors-header:hover {
    background: rgba(255, 255, 255, 0.22);
}

.header-box-top .menu-holder .lang-selectors-header .lang-ic {
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -11px;
    display: block;
    width: 30px;
    height: 22px;
    background-image: url('../../images/language_ic.svg');
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: left center;
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

.header-box-top .menu-holder .lang-selectors-header .active-lang {
    position: static;
    display: inline-block;
    width: auto;
    min-width: 24px;
    text-align: center;
    text-transform: uppercase;
    color: var(--store-menu-foreground, rgba(255, 255, 255, 0.96));
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    padding: 0 0 0 2px;
}

/* Notifications: same pill affordance as lang / profile / order strip; bell + badge */
.header-box-top .menu-holder .mini-notifications {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 36px;
    margin: 0;
    padding: 6px 12px;
    box-sizing: border-box;
    vertical-align: middle;
    line-height: 0;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.14);
    border: none;
    overflow: visible;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.header-box-top .menu-holder .mini-notifications:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Empty placeholder from template — no layout gap in the header strip */
.header-box-top .menu-holder .mini-notifications-details {
    display: none;
}

.header-box-top .menu-holder .mini-notifications-btn {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 22px;
    height: 21px;
    margin: 0;
    padding: 0;
    background-color: transparent;
    background-image: url('../../images/notifications_24.png');
    background-repeat: no-repeat;
    background-size: 21px;
    background-position: center;
    filter: brightness(0) invert(1);
    opacity: 0.95;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
}

.header-box-top .menu-holder .mini-notifications-btn:hover,
.header-box-top .menu-holder .mini-notifications-btn:focus {
    opacity: 1;
    outline: none;
}

/* Badge: top-right of the pill (slight overhang like iOS) */
.header-box-top .menu-holder .notification-counter {
    position: absolute;
    top: -2px;
    right: -2px;
    z-index: 2;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    background-color: #8a8a8a;
    color: #f1f1f1;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    pointer-events: none;
}

/* Active order / timer — same “pill” language as .lang-selectors-header & .profile-menu-btn */
.header-box-top .menu-holder .customer-order-info {
    position: relative;
    width: auto;
    min-width: 0;
    color: #fff;
}

.header-box-top .menu-holder .customer-order-info-display {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 2px 6px;
    min-height: 36px;
    margin: 0;
    margin-left: 0;
    padding: 5px 12px 5px 40px;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.14);
    border: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    vertical-align: middle;
    max-width: min(100%, 200px);
}

.header-box-top .menu-holder .customer-order-info-display:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Timer text — align with Jost (not oversized global .digital) */
.header-box-top .menu-holder .customer-order-info-display .digital,
.header-box-top .menu-holder .customer-order-info-display .digi-min {
    color: rgba(255, 255, 255, 0.98);
    font-family: 'Jost', sans-serif;
}

.header-box-top .menu-holder .customer-order-info-display .digital {
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    padding: 0;
    margin: 0;
    min-height: 0;
    font-variant-numeric: tabular-nums;
}

.header-box-top .menu-holder .customer-order-info-display .digi-min {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.95;
}

/* Clock icon — vertically centered, inset like .lang-ic */
.header-box-top .menu-holder .customer-order-info-display::after,
.header-box-top .menu-holder .customer-order-info-display:after {
    content: ' ';
    position: absolute;
    top: 50%;
    left: 10px;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background-image: url('../../images/ic_order_delivery_time_white.svg');
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center;
}

/* Order details popover: card + inner content (stores header only) */
.header-box-top .menu-holder .customer-order-info .customer-order-info-details {
    position: absolute;
    z-index: 220;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(100vw - 32px, 300px);
    max-width: 300px;
    max-height: min(70vh, 480px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    background: #fff;
    border: none;
    border-radius: 14px;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.14);
    padding: 14px 14px 16px;
    color: #1a1a1a;
    text-align: left;
}

.header-box-top .menu-holder .customer-order-info .customer-order-info-details-title {
    margin: 0 0 12px 0;
    padding: 0 0 10px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
    line-height: 1.3;
    border-bottom: 1px solid #eee;
}

.header-box-top .menu-holder .customer-order-info .customer-order-info-item {
    position: relative;
    margin: 0 0 14px 0;
    padding: 0 0 14px 0;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
}

.header-box-top .menu-holder .customer-order-info .customer-order-info-item:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.header-box-top .menu-holder .customer-order-info .customer-order-info-item-title {
    margin: 0 0 6px 0;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: #1a1a1a;
    text-transform: none;
}

.header-box-top .menu-holder .customer-order-info .customer-order-info-item-description {
    margin: 0 0 8px 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #6b6b6b;
}

.header-box-top .menu-holder .customer-order-info .customer-order-info-item-total {
    margin: 0 0 8px 0;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #E33E26;
}

.header-box-top .menu-holder .customer-order-info .customer-order-info-item-controlls {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 0;
    padding: 0;
}

.header-box-top .menu-holder .customer-order-info .customer-order-info-item-controlls-warming {
    margin: 0 0 8px 0;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #9a3412;
    background: #fff7ed;
    border-radius: 8px;
}

/* Row timer (per order): dark text on white panel, brand accent */
.header-box-top .menu-holder .customer-order-info .customer-order-info-item-timer-holder {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    text-align: right;
    width: 100%;
    margin: 4px 0 0 0;
    height: auto;
    cursor: default;
}

.header-box-top .menu-holder .customer-order-info .customer-order-info-item .digital,
.header-box-top .menu-holder .customer-order-info .customer-order-info-item .downtime-widget {
    color: #E33E26;
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: right;
    min-height: 0;
}

.header-box-top .menu-holder .customer-order-info .customer-order-info-item-timer-holder::after,
.header-box-top .menu-holder .customer-order-info .customer-order-info-item-timer-holder:after {
    /* hide legacy absolute icon on small row; timer text is enough */
    display: none;
}

.header-box-top .menu-holder .customer-order-info .order-timer-done {
    margin: 6px 0 0 0;
}

.header-box-top .menu-holder .customer-order-info .order-receive-confirm-btn {
    display: block;
    width: 100%;
    margin: 10px 0 0 0;
    padding: 10px 12px;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    text-align: center;
    background: #E33E26;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.header-box-top .menu-holder .customer-order-info .order-receive-confirm-btn:hover {
    background: #c12e1a;
}

/* Language dropdown: matches location / select panels (white surface, brand accent) */
.header-box-top .menu-holder .lang-selectors-list {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    min-width: 132px;
    width: max-content;
    max-width: 220px;
    margin: 0;
    padding: 6px;
    z-index: 200;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.14);
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    filter: none;
}

.header-box-top .menu-holder .lang-item {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 10px;
}

.header-box-top .menu-holder .lang-item + .lang-item {
    margin-top: 2px;
}

.header-box-top .menu-holder a.lang-selector {
    display: block;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: #1a1a1a;
    border-radius: 10px;
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease, font-weight 0.15s ease;
    box-sizing: border-box;
    filter: none;
}

.header-box-top .menu-holder a.lang-selector:hover,
.header-box-top .menu-holder a.lang-selector:focus {
    background: #fff7f5;
    color: #1a1a1a;
    outline: none;
}

.header-box-top .menu-holder a.lang-selector.active {
    background: #fff0ec;
    color: #E33E26;
    font-weight: 600;
}

/* --- end MENU HOLDER --- */

/* -------------------------------------------------------------------------
   CUSTOMER PROFILE — logged-in user menu (template: application/views/other/profile_menu.php;
   rendered inside .header-box-top .menu-holder .menu-item)
   Structure: .cutomer-menu > .profile-menu-btn + .profile-menu-list > ul > li > a
   Dropdown open/close: assets/js/stores/restaurants.js (fadeIn, .icon-down on button).
   Styling matches language selector / location: white card, #E33E26 accents, Jost/brand feel.
   ------------------------------------------------------------------------- */

.header-box-top .menu-holder .cutomer-menu {
    position: relative;
    z-index: 4;
    float: none;
    text-align: right;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* Trigger row: avatar + name + chevron, pill on red header (same family as .lang-selectors-header) */
.header-box-top .menu-holder .cutomer-menu .profile-menu-btn {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 36px;
    margin: 0;
    padding: 6px 30px 6px 10px;
    max-width: min(100%, 220px);
    background: none;
    background-color: rgba(255, 255, 255, 0.14);
    border: none;
    border-radius: 9999px;
    color: #fff;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.header-box-top .menu-holder .cutomer-menu .profile-menu-btn:hover {
    background-color: rgba(255, 255, 255, 0.22);
}

/* Replace legacy .png dropdown; white chevron */
.header-box-top .menu-holder .cutomer-menu .profile-menu-btn::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 12px;
    height: 8px;
    margin-top: -4px;
    background: url('../../images/arrow_header.svg') no-repeat center;
    background-size: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.header-box-top .menu-holder .cutomer-menu .profile-menu-btn.icon-down::after {
    transform: rotate(180deg);
}

.header-box-top .menu-holder .cutomer-menu .profile-menu-btn-img {
    position: relative;
    top: auto;
    left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-sizing: border-box;
}

.header-box-top .menu-holder .cutomer-menu .profile-menu-btn-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    padding: 0;
    margin: 0;
}

.header-box-top .menu-holder .cutomer-menu .profile-menu-btn-label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    padding: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dropdown list card */
.header-box-top .menu-holder .cutomer-menu .profile-menu-list {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    min-width: 220px;
    max-width: min(100vw - 32px, 300px);
    width: max-content;
    margin: 0;
    padding: 8px 6px;
    z-index: 220;
    background: #fff;
    border: none;
    border-radius: 14px;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.14);
    text-align: left;
    color: #1a1a1a;
    max-height: min(70vh, 400px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    filter: none;
}

.header-box-top .menu-holder .cutomer-menu .profile-menu-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-box-top .menu-holder .cutomer-menu .profile-menu-list li {
    margin: 0;
    padding: 0;
    border-radius: 10px;
}

.header-box-top .menu-holder .cutomer-menu .profile-menu-list li + li {
    margin-top: 2px;
}

/* Separator before last row (log out) — template always appends log out as last <li> */
.header-box-top .menu-holder .cutomer-menu .profile-menu-list li:last-child {
    margin-top: 8px;
    padding-top: 8px;
    border-top: none;
    border-radius: 0;
}

.header-box-top .menu-holder .cutomer-menu .profile-menu-list li a {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: #1a1a1a;
    text-align: left;
    text-decoration: none;
    border-radius: 10px;
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease;
    box-sizing: border-box;
    cursor: pointer;
}

.header-box-top .menu-holder .cutomer-menu .profile-menu-list li a:hover,
.header-box-top .menu-holder .cutomer-menu .profile-menu-list li a:focus {
    background: #fff7f5;
    color: #1a1a1a;
    outline: none;
}

/* Log out row: brand tint */
.header-box-top .menu-holder .cutomer-menu .profile-menu-list li:last-child a {
    color: #E33E26;
    font-weight: 600;
}

.header-box-top .menu-holder .cutomer-menu .profile-menu-list li:last-child a:hover,
.header-box-top .menu-holder .cutomer-menu .profile-menu-list li:last-child a:focus {
    background: #fff0ec;
    color: #c12e1a;
}

/* Optional arrow inside log out (markup: span.arrow) */
.header-box-top .menu-holder .cutomer-menu .profile-menu-list li a .arrow,
.header-box-top .menu-holder .cutomer-menu .profile-menu-list li a span[class*="arrow"] {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 2px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    vertical-align: middle;
    opacity: 0.8;
    flex-shrink: 0;
}

/* --- end CUSTOMER PROFILE --- */

/* -------------------------------------------------------------------------
   LOCATION BOX — stores header (template: application/views/stores/main/headerBox.php;
   .location-box-holder > .boxInner + .listSelect.selectCity)
   Design ref: assets/images/DESIGN/eeatingh-home_header (png or jpg) — white pill
   field, red pin on the left, text, chevron on the right; open panel is select-like.
   Open/close behaviour matches assets/js/restaurants/restaurants.js (no new JS in this file).
   ------------------------------------------------------------------------- */

/* --- Wrapper: centered in the lower header band --- */
.location-box-holder {
    position: absolute;
    top: -35px;
    right: 29px;
    z-index: 2;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 12px 10px;
}

/* --- Main “select” field (white pill) --- */
.location-box-holder .boxInner {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 40px;
    width: 100%;
    background: #fff;
    border: none;
    border-radius: 9999px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 0 16px 0 48px;
    transition: box-shadow 0.2s ease;
}

.location-box-holder .boxInner:hover {
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.12);
}

/* --- Icon: red map pin (accent per design ~ #E33E26) --- */
.location-box-holder .boxInner .location-ic {
    position: absolute;
    left: 18px;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-top: 0;
    transform: translateY(-50%);
    background: url('../../images/ic_my_location_24px.svg') no-repeat center;
    background-size: 20px 20px;
    /* red pin to match design (#E33E26) */
    filter: brightness(0) saturate(100%) invert(32%) sepia(85%) saturate(2884%) hue-rotate(347deg) brightness(95%) contrast(90%);
    flex-shrink: 0;
    pointer-events: none;
}

/* --- Selected address label (link, select affordance) --- */
.location-box-holder .boxInner a.locationListSelectBtn,
.location-box-holder .boxInner a.locationListSelectBtn:hover,
.location-box-holder .boxInner a.locationListSelectBtn:focus {
    position: static;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    line-height: 1.35;
    margin: 0;
    padding: 10px 40px 10px 0;
    color: #1a1a1a;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    opacity: 1;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    outline: none;
}

/* --- Right: dropdown chevron --- */
.location-box-holder .boxInner .location-selector-arrow.selector-arrow,
.location-box-holder .boxInner .location-selector-arrow {
    position: absolute;
    right: 18px;
    top: 50%;
    left: auto;
    width: 20px;
    height: 20px;
    margin: 0;
    transform: translateY(-50%);
    background: url('../../images/arrow_header.svg') no-repeat center;
    background-size: 12px 10px;
    filter: brightness(0) opacity(0.4);
    flex-shrink: 0;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.location-box-holder .boxInner .location-selector-arrow.isOpen {
    transform: translateY(-50%) rotate(180deg);
}

/* --- Dropdown panel (select-like) — hidden by default; JS uses fadeIn to show it --- */
.location-box-holder .listSelect.selectCity {
    display: none;
    position: absolute;
    top: 100%;
    left: 12px;
    right: 12px;
    width: auto !important;
    max-width: none;
    max-height: 360px;
    margin: 0;
    margin-top: 8px;
    padding: 0;
    z-index: 200;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
    overflow: hidden;
}

/* scroll area: listSelectInner */
.location-box-holder .listSelect.selectCity .listSelectInner {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
}

/* top/bottom scroll nubs when JS enables them (long list) */
.location-box-holder .listSelect.selectCity .arrowUp,
.location-box-holder .listSelect.selectCity .arrowDown {
    z-index: 2;
    background-color: #fafafa;
    border: none;
}

/* --- Server-rendered list markup from location_box.php (.location-box) --- */
.location-box-holder .listSelect .location-box {
    text-align: left;
}

.location-box-holder .listSelect .select-list-group-label {
    padding: 8px 16px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #888;
    line-height: 1.3;
}

.location-box-holder .listSelect .select-list-item {
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.4;
    color: #1a1a1a;
    cursor: pointer;
    border-top: none;
    transition: background 0.15s ease;
}

.location-box-holder .listSelect .select-list-item:first-of-type,
.location-box-holder .listSelect .select-list-group + .select-list-group .select-list-item {
    border-top: none;
}

.location-box-holder .listSelect .select-list-item:hover {
    background: #fff7f5;
}

.location-box-holder .listSelect .select-list-item.selected_address {
    background: #fff0ec;
    font-weight: 600;
    color: #E33E26;
}

.location-box-holder .listSelect .location-box-add-address a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #E33E26;
    font-weight: 500;
}

.location-box-holder .listSelect .location-box-add-address img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.location-box .select-list-item.location-address {
    padding-left: 30px ;
}

/* --- end LOCATION BOX --- */

/*LANGUAGE SELECTOR START*/
.lang-selectors-list {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    width: 20px;
    height: auto;
    border: 2px solid #451C18;
    max-height: 540px;
    overflow: hidden;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: #fff;
    color: #131313;
    z-index: 99999;
    padding-left: 10px;
    padding-right: 10px;
    height: auto;
    padding-bottom: 10px;
}

.lang-selectors-list .lang-item {
    cursor: pointer;

}
/*LANGUAGE SELECTOR END*/
/*CUSTOMER HEADER INFO START*/
.customer-order-info {
    float:left;
    color:#fff;
    width:7%;
    position: relative;
}

.customer-order-info-details {
    display: none;
    position: absolute;
    top: 49px;
    left: -116px;
    width:300px;
    border:2px solid #451C18;
    max-height: 540px;
    overflow: hidden;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: #fff;
    color: #131313;
    z-index: 99999;
    padding-left: 10px;
    padding-right: 10px;
    height:auto;
    padding-bottom: 19px;
}

.customer-order-info-details-title {
    padding: 10px 0 10px 5px;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
}

.customer-order-info-item {
    border-bottom: 1px dotted #131313;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
}

.customer-order-info-item-title {
    font-weight: bold;
    padding:5px;
    font-size: 12px;
    text-transform: uppercase;
}
.customer-order-info-item-description {
    color:#ABABAB;
    font-size: 10px;
    padding-left: 5px;
}

.customer-order-info-item-controlls-warming {
    color: #d5411f;
}

.customer-order-info-item .downtime-widget{
    color: #d5411f;
}

.customer-order-info-item-total{
    font-weight: bold;
    padding: 10px 0 10px 5px;
    font-size: 12px;
}

.customer-order-info-item-timer-holder {
    text-align: right;
    position:absolute;
    right:5px;
    bottom:5px;
    cursor: pointer;


}
.customer-order-info-item-timer-holder:after {
    content: '';
    position: absolute;
    top: -34px;
    right: 0;
    width: 32px;
    height: 32px;
    background-image: url('../images/ic_order_delivery_time.svg');
    background-repeat: no-repeat;
    background-size: 29px;
}

.customer-order-info-display {
    padding-left:25px;
    padding-top: 10px;
    cursor: pointer;
    position: relative;
    margin-left:10px;

}

.customer-order-info-display-text {
    display: none;
}

.customer-order-info-display .digital {
    text-align: left;
    font-size:15px;
    padding-top: 7px;
}
.customer-order-info-display .digi-min {
    font-size:10px;
}

.customer-order-info-display:after{
    content: ' ';
    position: absolute;
    top:13px;
    left:1px;
    background-image: url('../images/ic_order_delivery_time_white.svg');
    width:25px;
    height:25px;
    background-size: 20px;
    background-repeat: no-repeat;
}

.digital {
    font-family: 'Digital7', monospace;
    /*color: #d5411f;*/
    /*color: lime;*/
    color: #fff;
    text-align: center;
    font-size: 25px;
    min-height: 25px;

}

.digi-min {
    font-size: 15px;
}
.customer-order-info-item-controlls {

    position:relative;
}
.customer-order-info-item-controlls-warming {
    font-size: 10px;
}
/*CUSTOMER HEADER INFO END*/
/*NOTIIFCATION MENU BEGIN*/
.mini-notifications-btn {
    display: block;
    background-image: url('../images/notifications_24.png');
    background-repeat: no-repeat;
    background-size: 21px;
    width: 13px;
    height: 21px;
    margin-top: 13px;
    cursor: pointer;
    padding-left: 9px;
    height: 21px;
}
/*NOTIIFCATION MENU END*/
/* -------------------------------------------------------------------------
   QUICK BUTTONS — stores header (application/views/stores/main/headerBox.php:
   .header-box-bottom .quick-buttons-holder > ul.quick-buttons > li.quick-button)
   Design ref: assets/images/DESIGN/eeatingh-home-header.png — row of circular
   category thumbnails, label under each; strip on light gray (#f4f4f4); brand red
   hover ~#E33E26 (matches location / header accents).
   ------------------------------------------------------------------------- */

.header-box-bottom .quick-buttons-holder {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 8px 16px;
}

.header-box-bottom .quick-buttons-holder .quick-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 18px 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-box-bottom .quick-buttons-holder .quick-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 92px;
    max-width: calc(25vw + 8px);
    min-width: 0;
    cursor: pointer;
    user-select: none;
    text-align: center;
    transition: transform 0.2s ease;
}

.header-box-bottom .quick-buttons-holder .quick-button:hover,
.header-box-bottom .quick-buttons-holder .quick-button:focus-within {
    transform: translateY(-2px);
}

.header-box-bottom .quick-buttons-holder .quick-button img {
    display: block;
    width: 76px;
    height: 76px;
    margin: 0 auto 10px;
    padding: 0;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.header-box-bottom .quick-buttons-holder .quick-button:hover img,
.header-box-bottom .quick-buttons-holder .quick-button:focus-within img {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
}

.header-box-bottom .quick-buttons-holder .quick-button label {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 4px;
    font-family: 'Roboto', 'Jost', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: #333333;
    text-align: center;
    text-transform: none;
    letter-spacing: 0.01em;
    cursor: pointer;
}

.header-box-bottom .quick-buttons-holder .quick-button:hover label,
.header-box-bottom .quick-buttons-holder .quick-button:focus-within label {
    color: #E33E26;
}

/* optional: keyboard focus ring on the whole chip */
.header-box-bottom .quick-buttons-holder .quick-button:focus {
    outline: none;
}

.header-box-bottom .quick-buttons-holder .quick-button:focus-visible {
    outline: 2px solid rgba(227, 62, 38, 0.45);
    outline-offset: 4px;
    border-radius: 8px;
}

/*QUICK BTN END*/

/* -------------------------------------------------------------------------
   SEARCH INPUT — stores header (application/views/stores/main/headerBox.php:
   .header-box-bottom .search-input-holder > input.searchInput)
   Design ref: assets/images/DESIGN/eeatingh-home-header.png — large white pill,
   red italic placeholder, grey magnifier on the right;    max 560px, aligned to the
   left within the header padding.
   ------------------------------------------------------------------------- */

.header-box-bottom .search-input-holder {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 0 0 14px 0;
    box-sizing: border-box;
    padding: 0 12px;
}

.header-box-bottom .search-input-holder .searchInput,
.header-box-bottom .search-input-holder input.listSelectInput {
    display: block;
    width: 200px;
    min-height: 33px;
    height: 33px;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 50px 12px 22px;
    background-color: #fff;
    background-image: url('../../images/magnif.png');
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 20px 20px;
    border: none;
    border-radius: 9999px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
    font-family: 'Roboto', 'Jost', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    color: #1a1a1a;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: box-shadow 0.2s ease;
}

.header-box-bottom .search-input-holder .searchInput:hover,
.header-box-bottom .search-input-holder input.listSelectInput:hover {
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.11);
}

.header-box-bottom .search-input-holder .searchInput:focus,
.header-box-bottom .search-input-holder input.listSelectInput:focus {
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.12);
}

.header-box-bottom .search-input-holder .searchInput::placeholder,
.header-box-bottom .search-input-holder input.listSelectInput::placeholder {
    color: #E33E26;
    font-style: italic;
    font-weight: 500;
    opacity: 1;
}

.header-box-bottom .search-input-holder .searchInput::-webkit-input-placeholder,
.header-box-bottom .search-input-holder input.listSelectInput::-webkit-input-placeholder {
    color: #E33E26;
    font-style: italic;
    font-weight: 500;
    opacity: 1;
}

.header-box-bottom .search-input-holder .searchInput::-moz-placeholder,
.header-box-bottom .search-input-holder input.listSelectInput::-moz-placeholder {
    color: #E33E26;
    font-style: italic;
    font-weight: 500;
    opacity: 1;
}

/* SEARCH INPUT END */
/* STORE LISTING HOME START */

/*
 * Store cards on home: inner useful area ~230px; grid track min 256px so with 12px
 * side padding + 1px border the content box stays about 230px+; whole card can grow with gap.
 * Structure: application/views/stores/home.php → render_store_box() › stores/store_box.php
 */

.store-home-wrapper {
    box-sizing: border-box;
    width: 100%;
}

/* Min column tracks ~230px inner content; card is taller than wide so info strip fits. */
.store-home-wrapper .listStoresBox {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
    gap: 20px;
    justify-content: start;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

.listStoresBox .storeItem {
    display: block;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
    text-decoration: none;
    color: inherit;
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.store-home-wrapper .listStoresBox .storeItem:hover,
.store-home-wrapper .listStoresBox .storeItem:focus-visible,
.listStoresBox .storeItem:hover,
.listStoresBox .storeItem:focus-visible {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.11);
    border-color: rgba(0, 0, 0, 0.1);
}

.store-home-wrapper .listStoresBox .storeItem:focus-visible,
.listStoresBox .storeItem:focus-visible {
    outline: 2px solid rgba(227, 62, 38, 0.35);
    outline-offset: 3px;
}

.store-home-wrapper .listStoresBox > .clear {
    display: none;
}

@media screen and (max-width: 479px) {
    .store-home-wrapper .listStoresBox {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
        gap: 14px;
    }

    .store-home-wrapper .listStoresBox .storeItem,
    .listStoresBox .storeItem {
        padding: 0;
    }
}

/* STORE LISTING HOME END */

/* -------------------------------------------------------------------------
   STORE BOX — eeatingh-store_box.png
   Layout: ~48% photo | logo on seam | name | min cart + hours | fixed bottom strip
   ------------------------------------------------------------------------- */

.listStoresBox a.storeItem .store-item-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: inherit;
    box-sizing: border-box;
    position: relative;
    --store-box-logo-size: clamp(64px, 17vw, 92px);
    --store-box-header-ratio: 48%;
    --store-box-info-strip-ratio: 20%;
}

/* Top: cover image — upper ~half of the card */
.listStoresBox a.storeItem .store-item-header-photo {
    position: relative;
    flex: 0 0 var(--store-box-header-ratio, 48%);
    min-height: 0;
    overflow: hidden;
    background: #e8e8e8;
    flex-shrink: 0;
}

.listStoresBox a.storeItem .store-item-header-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.listStoresBox a.storeItem .store-item-wrapper.store-closed .store-item-header-photo img {
    filter: grayscale(100%);
}

/* Store name — white band under logo */
.listStoresBox a.storeItem .store-item-name {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: calc(var(--store-box-logo-size) * 0.48 + 6px) 10px 4px;
    text-align: center;
    font-family: 'Jost', 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 2vw, 17px);
    line-height: 1.2;
    color: #000000;
}

/* Min cart + hours — single centered row */
.listStoresBox a.storeItem .store-item-detail {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    box-sizing: border-box;
    padding: 4px 10px 6px;
}

/* Bottom strip container — fixed height band pinned to card bottom (design PNG) */
.listStoresBox a.storeItem .store-item-info {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 0;
    margin-top: 0;
    color: #fff;
}

.listStoresBox a.storeItem .store-item-info:has(.store-item-info-message) {
    flex: 0 0 var(--store-box-info-strip-ratio, 20%);
    min-height: 50px;
    max-height: 64px;
    margin-top: auto;
}

.listStoresBox a.storeItem .store-item-info .store-item-info-message {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    text-align: center;
    padding: 8px 12px;
    font-family: 'Jost', 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    word-wrap: break-word;
    overflow-wrap: break-word;
    border-radius: 0 0 16px 16px;
}

.listStoresBox a.storeItem .store-item-info .store-item-info-message-preorder {
    background-color: #ff7e34;
    color: #ffffff;
}

.listStoresBox a.storeItem .store-item-info .store-item-info-store-closed {
    background-color: #4a4a4a;
    color: #ffffff;
    font-weight: 700;
}

.listStoresBox a.storeItem .store-item-info .store-item-info-message-info {
    padding: 8px 12px;
}

.listStoresBox a.storeItem .store-item-min-cart {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    font-family: 'Jost', 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.3;
    color: #131313;
}

.listStoresBox a.storeItem .store-item-min-cart::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    background: url('../../images/store_theme/min_cart_ic.svg') center / contain no-repeat;
}

.listStoresBox a.storeItem .store-item-hours {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    font-family: 'Jost', 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.3;
    color: #131313;
    text-align: left;
}

.listStoresBox a.storeItem .store-item-hours::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    background: url('../../images/store_theme/clock_ic.svg') center / contain no-repeat;
}

/* Circular logo — eeatingh-store_box.png: centered on photo / white-band seam */
.listStoresBox a.storeItem .store-item-wrapper > .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: var(--store-box-header-ratio, 48%);
    transform: translate(-50%, -50%);
    z-index: 4;
    width: var(--store-box-logo-size, 88px);
    height: var(--store-box-logo-size, 88px);
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: #ffffff center / contain no-repeat;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
}

.listStoresBox a.storeItem .store-item-wrapper > .logo .box-store-logo {
    display: block;
    width: 78%;
    height: 78%;
    max-width: 78%;
    max-height: 78%;
    margin: 0 auto;
    object-fit: contain;
}

.listStoresBox a.storeItem .promo-badge {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 0;
    border: 0;
    background: url('../../images/store_theme/store_promo_ic.svg') top left / contain no-repeat;
    pointer-events: none;
}

.listStoresBox a.storeItem .closed-badge {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    left: auto;
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 0;
    border: 0;
    background: url('../../images/store_theme/store_closed.svg') top right / contain no-repeat;
    pointer-events: none;
}

/* NEW badge — left strip starts exactly at photo/content seam (not on header photo). */
.listStoresBox a.storeItem .new-badge {
    position: absolute;
    z-index: 3;
    left: 0;
    top: var(--store-box-header-ratio, 48%);
    transform: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: calc(50% + var(--store-box-logo-size, 88px) * 0.12);
    max-width: 72%;
    min-height: 30px;
    padding: 5px calc(var(--store-box-logo-size, 88px) * 0.52) 5px 10px;
    background: #50a637;
    color: #ffffff;
    font-family: 'Jost', 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
}

.listStoresBox a.storeItem .new-badge-label {
    color: inherit;
    font-weight: 700;
    white-space: nowrap;
}

.listStoresBox a.storeItem .delivery-is-not-available {
    position: relative;
    z-index: 3;
}

/* STORE BOX END */

/* -------------------------------------------------------------------------
   STORE FOOTER — layout + skin (application/views/stores/main/footer.php)
   .container = horizontal inset (see body .container). .footer-wrapper = 27/73
   grid holding .footer-primary + .footer-secondary.
   Design ref: assets/images/DESIGN/eeatingh-footer.png — red band; dark bottom strip.
   ------------------------------------------------------------------------- */

.footer {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.footer .footer-main {
    background: #f03e23;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    padding: 40px 0 36px;
}

.footer .footer-main > .container {
    box-sizing: border-box;
}

.footer .footer-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 27fr) minmax(0, 73fr);
    gap: clamp(16px, 3vw, 32px);
    align-items: stretch;
}

/* Logo cell: fill the left column height and center the mark H+V */
.footer .footer-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    min-height: 140px;
    padding: 8px 12px;
    box-sizing: border-box;
    text-align: center;
}

.footer .footer-primary-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
}

.footer .footer-primary-logo a.site-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer .footer-primary-logo img {
    display: block;
    max-width: min(200px, 100%);
    height: auto;
    filter: brightness(0) invert(1);
}

.footer .footer-secondary {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
}

.footer .footer-secondary-top {
    min-width: 0;
}

/* ANPC / ODR badges — vertical stack only (explicitly overrides inline/float/row flex) */
.footer .footer-badges,
.footer .footer-secondary-middle.footer-badges {
    box-sizing: border-box;
    display: flex !important;
    flex-flow: column nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    float: none !important;
    clear: both !important;
}

.footer .footer-badges > .footer-badge,
.footer .footer-secondary-middle.footer-badges > .footer-badge {
    flex: 0 0 auto !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100%;
    max-width: 280px;
    margin: 0;
}

.footer .footer-badges > .footer-badge > a,
.footer .footer-secondary-middle.footer-badges > .footer-badge > a {
    display: block !important;
    float: none !important;
    width: 100%;
    max-width: 100%;
}

.footer .footer-badges > .footer-badge img,
.footer .footer-secondary-middle.footer-badges > .footer-badge img {
    float: none !important;
    display: block !important;
    width: 100%;
    max-width: min(260px, 100%);
    height: auto;
}

.footer .footer-secondary-bottom {
    margin-top: auto;
}

.footer .footer-secondary-bottom .block-copyright,
.footer .footer-secondary-bottom .block-copyright a {
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    line-height: 1.45;
    text-decoration: none;
}

.footer .footer-secondary-bottom .block-copyright a:hover {
    text-decoration: underline;
}

.footer .footer-secondary .footerLinkBlockInner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 24px;
    align-items: start;
}

.footer .footerLinkBlock {
    display: block;
    min-width: 0;
}

.footer .footerTitleSection {
    margin: 0 0 14px;
    font-family: 'Roboto', 'Jost', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.footer .footerLink {
    padding: 0 0 10px;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

.footer .footerLink a,
.footer .footerLink .showContact,
.footer .footerLink .customer-report {
    color: #ffffff;
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
}

.footer .footerLink a:hover,
.footer .footerLink .showContact:hover,
.footer .footerLink .customer-report:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer .footer-bottom {
    background: #151515;
    color: #b0b0b0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 12px 0 14px;
    font-size: 12px;
    line-height: 1.45;
}

.footer .footer-bottom > .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
}

.footer .footer-bottom-left .block-copyright,
.footer .footer-bottom-left .block-copyright a {
    color: #b0b0b0;
    text-decoration: none;
}

.footer .footer-bottom-left .block-copyright a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 1024px) {
    .footer .footer-secondary .footerLinkBlockInner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 640px) {
    .footer .footer-wrapper {
        grid-template-columns: 1fr;
    }

    .footer .footer-primary {
        min-height: 0;
        padding-bottom: 8px;
    }

    .footer .footer-secondary .footerLinkBlockInner {
        grid-template-columns: 1fr;
    }
}

/* STORE FOOTER END */
/* STORE PAGE Start */

/* Store page: search bar overlaps visually above store-header-third (stays in headerBox DOM) */
.content:has(.storeWrapper) {
    position: relative;
}

.content:has(.storeWrapper) .header-box-bottom {
    position: relative;
    padding-bottom: 44px;
}

.content:has(.storeWrapper) .header-box-bottom .search-input-holder {
    position: absolute;
    left: 0;
    top: 153px;
    z-index: 8;
    width:350px;
}

.content:has(.storeWrapper) .store-header-holder .store-header-third {
    margin-top: 36px;
}

.storeWrapper {
    margin-top:-210px;
}

/* ==========================================================================
   STORE DETAIL — SCROLL STICKY TOOLBAR
   Before scroll: store_detail_befoure_scroll.png
   After scroll:  store_detail_page_after_scroll.png + store_detail_heder_logo_bar_after_scroll.png
   Toggle: body.restaurants-store-page.store-detail-scrolled (JS: restaurants.js)
   ========================================================================== */

body.restaurants-store-page {
    --store-detail-header-red: #E33E26;
    --store-detail-red-bar-height: 52px;
    --store-detail-toolbar-height: 64px;
    --store-detail-sticky-height: var(--store-detail-toolbar-height);
    --store-detail-sticky-total-height: calc(var(--store-detail-red-bar-height) + var(--store-detail-toolbar-height));
    --store-detail-sticky-side: 15%;
    --store-detail-red-menu-width: 320px;
    --store-detail-red-menu-width-logged: 440px;
    --store-detail-location-logo-gap: 120px;
    --store-detail-location-min-height: 32px;
    --store-detail-location-font-size: 13px;
    --store-detail-location-top: calc((var(--store-detail-red-bar-height) - var(--store-detail-location-min-height)) / 2);
    --store-detail-categories-bar-height: 44px;
    --store-detail-sticky-full-height: calc(var(--store-detail-red-bar-height) + var(--store-detail-toolbar-height) + var(--store-detail-categories-bar-height));
    --store-detail-sticky-ease: 0.28s ease;
}

/* Shared transitions for toolbar pieces */
body.restaurants-store-page .content:has(.storeWrapper) .header-box-top .site-logo,
body.restaurants-store-page .content:has(.storeWrapper) .header-box-top .menu-holder,
body.restaurants-store-page .content:has(.storeWrapper) .header-box-bottom .location-box-holder,
body.restaurants-store-page .content:has(.storeWrapper) .header-box-bottom .search-input-holder,
body.restaurants-store-page .store-header-holder .store-header-primer,
body.restaurants-store-page .store-header-holder .store-header-second,
body.restaurants-store-page .store-header-holder .store-header-third,
body.restaurants-store-page .store-header-holder .breadcrumb-holder,
body.restaurants-store-page .store-header-holder .store-header-fourth {
    transition:
        top var(--store-detail-sticky-ease),
        left var(--store-detail-sticky-ease),
        right var(--store-detail-sticky-ease),
        width var(--store-detail-sticky-ease),
        max-width var(--store-detail-sticky-ease),
        height var(--store-detail-sticky-ease),
        max-height var(--store-detail-sticky-ease),
        padding var(--store-detail-sticky-ease),
        margin var(--store-detail-sticky-ease),
        opacity var(--store-detail-sticky-ease),
        visibility var(--store-detail-sticky-ease),
        transform var(--store-detail-sticky-ease),
        box-shadow var(--store-detail-sticky-ease),
        border-radius var(--store-detail-sticky-ease),
        background-color var(--store-detail-sticky-ease),
        filter var(--store-detail-sticky-ease);
}

/* Red top bar backdrop */
body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper)::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--store-detail-red-bar-height);
    background: var(--store-detail-header-red);
    box-shadow: none;
    z-index: 100;
    pointer-events: none;
}

/* White store toolbar backdrop */
body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper)::after {
    content: '';
    position: fixed;
    top: var(--store-detail-red-bar-height);
    left: 0;
    right: 0;
    height: var(--store-detail-toolbar-height);
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
    z-index: 100;
    pointer-events: none;
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder {
    padding-top: var(--store-detail-sticky-total-height);
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder:has(.store-header-fourth) {
    padding-top: var(--store-detail-sticky-full-height);
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder:has(.store-header-fourth)::after {
    content: '';
    flex: 0 0 100%;
    width: 100%;
    height: var(--store-detail-categories-bar-height);
    order: 99;
    pointer-events: none;
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box {
    margin-bottom: 0;
}

/* --- Red bar: site logo (white) --- */
body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .site-logo {
    position: fixed;
    top: 0;
    left: var(--store-detail-sticky-side);
    z-index: 111;
    display: flex;
    align-items: center;
    height: var(--store-detail-red-bar-height);
    max-width: 108px;
    margin: 0;
    padding: 0;
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .site-logo img {
    display: block;
    width: auto;
    height: auto;
    max-height: 30px;
    max-width: 108px;
    filter: brightness(0) invert(1);
}

/* --- Red bar: location selector (white pill) --- */
body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-bottom .location-box-holder {
    position: fixed;
    top: var(--store-detail-location-top);
    left: calc(var(--store-detail-sticky-side) + var(--store-detail-location-logo-gap));
    right: calc(var(--store-detail-sticky-side) + var(--store-detail-red-menu-width));
    z-index: 111;
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper):has(.profile-menu-btn) .header-box-bottom .location-box-holder {
    right: calc(var(--store-detail-sticky-side) + var(--store-detail-red-menu-width-logged));
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .location-box-holder .boxInner {
    display: flex;
    align-items: center;
    min-height: var(--store-detail-location-min-height);
    height: var(--store-detail-location-min-height);
    padding: 0 32px 0 36px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .location-box-holder .boxInner .location-ic {
    left: 12px;
    width: 14px;
    height: 14px;
    background-size: 14px 14px;
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .location-box-holder .boxInner .location-selector-arrow.selector-arrow,
body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .location-box-holder .boxInner .location-selector-arrow {
    right: 12px;
    width: 14px;
    height: 14px;
    background-size: 9px 7px;
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .location-box-holder .boxInner a.locationListSelectBtn,
body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .location-box-holder .boxInner a.locationListSelectBtn:hover,
body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .location-box-holder .boxInner a.locationListSelectBtn:focus {
    padding: 0 28px 0 0;
    line-height: 1.2;
    font-size: var(--store-detail-location-font-size);
    font-weight: 500;
}

/* --- Red bar: auth, language, logged-in menu --- */
body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder {
    position: fixed;
    top: 0;
    right: var(--store-detail-sticky-side);
    left: auto;
    z-index: 111;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 14px;
    width: auto;
    max-width: none;
    height: var(--store-detail-red-bar-height);
    margin: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    color: rgba(255, 255, 255, 0.96);
    --store-menu-foreground: rgba(255, 255, 255, 0.96);
    --store-menu-foreground-dim: rgba(255, 255, 255, 0.78);
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder a,
body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder a:link,
body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder a:visited {
    color: rgba(255, 255, 255, 0.96);
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder a:hover,
body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder a:focus {
    color: #fff;
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder .customer-prof-auth-btn,
body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder .profile-menu-btn-label {
    color: rgba(255, 255, 255, 0.96);
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder .cutomer-menu .profile-menu-btn {
    background-color: rgba(255, 255, 255, 0.14);
    color: #fff;
    max-width: min(160px, 18vw);
    padding: 4px 26px 4px 8px;
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder .cutomer-menu .profile-menu-btn-label {
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder .cutomer-menu .profile-menu-btn:hover {
    background-color: rgba(255, 255, 255, 0.22);
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder .cutomer-menu .profile-menu-btn::after {
    filter: brightness(0) invert(1);
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder .lang-selectors-header {
    background: rgba(255, 255, 255, 0.14);
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder .lang-selectors-header:hover {
    background: rgba(255, 255, 255, 0.22);
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder .lang-selectors-header .lang-ic {
    filter: brightness(0) invert(1);
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder .lang-selectors-header .active-lang {
    color: rgba(255, 255, 255, 0.96);
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder .notifications-menu,
body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder .customer-order-info-menu {
    display: block;
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder .mini-notifications,
body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder .customer-order-info {
    color: rgba(255, 255, 255, 0.96);
}

/* --- White toolbar: store logo + name --- */
body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-header-primer {
    position: fixed;
    top: var(--store-detail-red-bar-height);
    left: var(--store-detail-sticky-side);
    right: calc(var(--store-detail-sticky-side) + 430px);
    z-index: 110;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    height: var(--store-detail-toolbar-height);
    margin: 0;
    padding: 0;
    min-width: 0;
    pointer-events: none;
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-logo-holder {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-header-brand-text {
    min-height: 0;
    flex: 1 1 auto;
    min-width: 0;
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-name-holder {
    padding: 0;
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-name-holder .store-page-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder .breadcrumb-holder {
    display: none;
}

/* Store meta row hidden when sticky */
body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-header-second {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

/* --- White toolbar: search --- */
body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-bottom {
    padding-bottom: 0;
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-bottom .search-input-holder {
    position: fixed;
    top: calc(var(--store-detail-red-bar-height) + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 115;
    width: min(300px, 28vw);
    max-width: 300px;
    margin: 0;
    padding: 0;
    pointer-events: auto;
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-bottom .search-input-holder .searchInput,
body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-bottom .search-input-holder input.listSelectInput {
    min-height: 42px;
    height: 42px;
    padding: 8px 42px 8px 16px;
    font-size: 13px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    pointer-events: auto;
}

/* --- White toolbar: Informații, Alergeni, mini cart --- */
body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-header-third {
    position: fixed;
    top: var(--store-detail-red-bar-height);
    right: var(--store-detail-sticky-side);
    left: auto;
    z-index: 110;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: auto;
    max-width: none;
    height: var(--store-detail-toolbar-height);
    margin: 0;
    padding: 0;
    border-bottom: 0;
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-toolbar-btn {
    min-height: 40px;
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-toolbar-btn .store-info-btn,
body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-toolbar-btn .allergens a {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 11px;
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-toolbar-btn.my-min-cart {
    background: #e4512e;
    border-color: #e4512e;
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-toolbar-btn.my-min-cart::after {
    filter: brightness(0) invert(1);
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-toolbar-btn.my-min-cart .quickCart {
    min-height: 40px;
    padding: 8px 14px 8px 36px;
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-toolbar-btn.my-min-cart .quickCart > span:first-of-type {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Category filters — third fixed bar below red + white toolbars */
body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-header-fourth.store-product-types-filters {
    position: fixed;
    top: calc(var(--store-detail-red-bar-height) + var(--store-detail-toolbar-height));
    left: 0;
    right: 0;
    z-index: 105;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: var(--store-detail-categories-bar-height);
    margin: 0;
    padding: 0 var(--store-detail-sticky-side);
    box-sizing: border-box;
    background: #fff;
    border-top: 1px solid #e8e8ec;
    box-shadow: none;
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-product-types-filters .product-type-filter-wrapper {
    width: 100%;
    height: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-product-types-filters .store-product-types-slick.slick-slider {
    width: 100%;
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-product-types-filters .store-product-types-slick .slick-list {
    padding: 0;
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-product-types-filters .store-product-type-pill {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 12px;
    letter-spacing: 0.04em;
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-product-types-filters .store-product-types-slick-arrow {
    width: 28px;
    height: 28px;
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-product-types-filters .store-product-types-slick-arrow span {
    font-size: 24px;
    line-height: 28px;
}

@media (max-width: 1199px) {
    body.restaurants-store-page {
        --store-detail-red-menu-width: 280px;
        --store-detail-red-menu-width-logged: 380px;
        --store-detail-location-logo-gap: 108px;
    }

    body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-header-primer {
        right: calc(var(--store-detail-sticky-side) + 300px);
    }

    body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-bottom .search-input-holder {
        width: min(220px, 24vw);
    }
}

@media (max-width: 991px) {
    body.restaurants-store-page {
        --store-detail-red-bar-height: 48px;
        --store-detail-toolbar-height: 56px;
        --store-detail-sticky-side: 12px;
        --store-detail-red-menu-width: 220px;
        --store-detail-red-menu-width-logged: 320px;
        --store-detail-location-logo-gap: 92px;
        --store-detail-location-min-height: 30px;
        --store-detail-location-font-size: 12px;
        --store-detail-categories-bar-height: 40px;
    }

    body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .site-logo {
        max-width: 84px;
    }

    body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .site-logo img {
        max-height: 26px;
    }

    body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-header-primer {
        left: var(--store-detail-sticky-side);
        right: calc(var(--store-detail-sticky-side) + 220px);
    }

    body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-logo-holder {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-name-holder .store-page-title {
        font-size: 16px;
    }

    body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-bottom .search-input-holder {
        top: calc(var(--store-detail-red-bar-height) + 8px);
        left: auto;
        right: calc(var(--store-detail-sticky-side) + 118px);
        transform: none;
        width: min(180px, 34vw);
    }

    body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-toolbar-btn .store-info-btn,
    body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-toolbar-btn .allergens a {
        padding: 8px 10px;
        font-size: 10px;
    }
}

@media (max-width: 767px) {
    body.restaurants-store-page {
        --store-detail-red-menu-width: 130px;
        --store-detail-red-menu-width-logged: 200px;
        --store-detail-location-logo-gap: 76px;
        --store-detail-location-min-height: 28px;
        --store-detail-location-font-size: 11px;
        --store-detail-categories-bar-height: 38px;
    }

    body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-header-primer {
        right: calc(var(--store-detail-sticky-side) + 96px);
    }

    body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-toolbar-btn:not(.my-min-cart) {
        display: none;
    }

    body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-bottom .search-input-holder {
        right: calc(var(--store-detail-sticky-side) + 72px);
        width: min(140px, 38vw);
    }

    body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder .notifications-menu,
    body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top .menu-holder .customer-order-info-menu {
        display: none;
    }
}

/* STORE DETAIL SCROLL STICKY TOOLBAR END */

/*
 * Store header brand row — styles scoped ONLY under .store-header-holder
 * (application/views/stores/main/storeHeader.php). Design: store_detail_page.png
 */
.store-header-holder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

/* Right column — aligned to the right edge of .store-header-holder */
.store-header-holder .store-header-second {
    flex: 0 0 auto;
    margin-left: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    align-items: start;
    min-width: 0;
    width:50%;
}

.store-header-holder .store-header-second .store-min-order,
.store-header-holder .store-header-second .store-hours {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

/* Value spans only — labels use .store-info-label (separate rules) */
.store-header-holder .store-header-second .store-min-order span:not(.store-info-label),
.store-header-holder .store-header-second .store-hours span:not(.store-info-label) {
    text-transform: uppercase;
}

/* Label only: uppercase + neutral reset (no inherited semibold / mobile rules) */
.store-header-holder .store-header-second .store-info-label {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 20px;
    font-weight: 600;
    font-style: normal;
    line-height: 1.35;
    letter-spacing: 0.05em;
    color: #4e4e4e;
    text-decoration: none;
    text-transform: uppercase;
    display: inline;
}

/* All .store-info-label in stores theme — enforce caps (covers any placement) */
.store-info-label {
    text-transform: uppercase;
    font-size: 20px;
}

/* Value: always on its own line below the label */
.store-header-holder .store-header-second .store-info-value {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Opening hours value: single line within the value block */
.store-header-holder .store-header-second .store-hours .store-info-value.open-hours {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.store-header-holder .store-header-second .store-message {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    text-align: justify;
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.store-header-holder .store-header-second .store-message p {
    margin: 0;
    text-align: justify;
    font-size: inherit;
    line-height: inherit;
}

.store-header-holder .store-header-primer {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 18px;
}

.store-header-holder .store-header-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
    flex: 1 1 auto;
    min-height: 76px;
}

/* Circular store logo, 76px */
.store-header-holder .store-logo-holder {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.07),
        0 4px 14px rgba(0, 0, 0, 0.1);
}

.store-header-holder .store-logo-holder .store-page-logo,
.store-header-holder .store-logo-holder img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 50%;
}

/* Store name */
.store-header-holder .store-name-holder {
    margin: 0;
    padding: 2px 0 0;
    min-width: 0;
}

.store-header-holder .store-name-holder .store-page-title {
    margin: 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 50px;
    font-weight: bold;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #4e4e4e;
}

/* Breadcrumb (render_breadcrumb → .store-breadcrumb .breadcrumbs) */
.store-header-holder .breadcrumb-holder {
    margin: 0;
    padding: 0;
    min-width: 0;
    margin-top: auto;
}

.store-header-holder .breadcrumb-holder .store-breadcrumb .breadcrumbs {
    margin: 0;
    padding: 0;
    line-height: 1.35;
    font-size: 11px;
    color: #8e8e93;
}

.store-header-holder .breadcrumb-holder .store-breadcrumb .breadcrumbs a {
    color: #8e8e93;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.store-header-holder .breadcrumb-holder .store-breadcrumb .breadcrumbs a:last-child {
    color: #636366;
}

.store-header-holder .breadcrumb-holder .store-breadcrumb .breadcrumbs a:hover,
.store-header-holder .breadcrumb-holder .store-breadcrumb .breadcrumbs a:focus {
    color: #2c2c2e;
    text-decoration: underline;
}

.store-header-holder .breadcrumb-holder .store-breadcrumb .breadcrumbs span {
    display: inline-block;
    margin: 0 5px;
    color: #c7c7cc;
    font-weight: 400;
}

@media screen and (max-width: 480px) {
    .store-header-holder .store-header-primer {
        flex-wrap: wrap;
    }

    .store-header-holder .store-logo-holder {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
    }

    .store-header-holder .store-header-brand-text {
        min-height: 64px;
    }
}

.store-header-holder .store-header-third {
    width: 100%;
    max-width: 100%;
    flex-basis: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px 12px;
    padding: 14px 0 12px;
    margin-top: 4px;
    border-bottom: 1px solid #e5e5e8;
}

/* Product type text filter row + Slick — design: assets/images/DESIGN/Product_type_filter.png */
.store-header-holder .store-header-fourth.store-product-types-filters {
    width: 100%;
    max-width: 100%;
    flex-basis: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 0 16px;
    background: #fff;
}

.store-header-holder .store-product-types-filters .product-type-filter-wrapper {
    position: relative;
    box-sizing: border-box;
    padding: 0 36px;
    margin: 0;
}

.store-header-holder .store-product-types-filters .store-product-types-slick.slick-slider {
    margin-bottom: 0;
}

.store-header-holder .store-product-types-filters .store-product-types-slick .slick-list {
    overflow: hidden;
    padding: 4px 0 6px;
}

.store-header-holder .store-product-types-filters .store-product-types-slick .slick-track {
    display: flex;
    align-items: center;
}

.store-header-holder .store-product-types-filters .store-product-type-item {
    list-style: none;
    margin: 0;
    padding: 0;
    height: auto;
    box-sizing: border-box;
}

.store-header-holder .store-product-types-filters .store-product-type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 18px;
    margin: 0;
    box-sizing: border-box;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: #757575;
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transition: color 0.18s ease, font-weight 0.18s ease;
}

.store-header-holder .store-product-types-filters .store-product-type-pill:hover,
.store-header-holder .store-product-types-filters .store-product-type-pill:focus-visible {
    color: #5a5a5a;
    outline: none;
}

.store-header-holder .store-product-types-filters .store-product-type-pill.is-active {
    color: #e4512e;
    font-weight: 700;
}

.store-header-holder .store-product-types-filters .store-product-type-pill:focus-visible {
    outline: 2px solid rgba(228, 81, 46, 0.45);
    outline-offset: 3px;
    border-radius: 2px;
}

.store-header-holder .store-product-types-filters .store-product-types-slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 0;
    color: #757575;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.store-header-holder .store-product-types-filters .store-product-types-slick-arrow:hover {
    color: #3a3a3a;
}

.store-header-holder .store-product-types-filters .store-product-types-slick-arrow span {
    display: block;
    font-size: 28px;
    font-weight: 400;
    line-height: 32px;
    text-align: center;
}

.store-header-holder .store-product-types-filters .store-product-types-slick-prev {
    left: 0;
}

.store-header-holder .store-product-types-filters .store-product-types-slick-next {
    right: 0;
}

.store-header-holder .store-product-types-filters .store-product-types-slick-arrow.slick-disabled {
    opacity: 0.28;
    cursor: default;
    color: #b0b0b0;
}

@media screen and (max-width: 480px) {
    .store-header-holder .store-product-types-filters .product-type-filter-wrapper {
        padding: 0 30px;
    }

    .store-header-holder .store-product-types-filters .store-product-type-pill {
        font-size: 15px;
        min-height: 38px;
        padding: 8px 14px;
        letter-spacing: 0.035em;
    }

    .store-header-holder .store-product-types-filters .store-product-types-slick-arrow {
        width: 28px;
        height: 28px;
    }

    .store-header-holder .store-product-types-filters .store-product-types-slick-arrow span {
        font-size: 24px;
        line-height: 28px;
    }
}

/* Toolbar pills — design: assets/images/DESIGN/store_detail_page.png */
.store-header-holder .store-toolbar-btn {
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    background: #fff;
    border: 1px solid #d1d1d6;
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.store-header-holder .store-toolbar-btn:hover {
    border-color: #b8b8bd;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}

/* Cart widget: same pill shell + dropdown must not be clipped */
.store-header-holder .store-toolbar-btn.my-min-cart {
    overflow: visible;
    position: relative;
    align-items: center;
}

.store-header-holder .store-toolbar-btn.my-min-cart::after {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: url('../../images/store_theme/min-cart-ic.svg') no-repeat center;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

.store-header-holder .store-toolbar-btn.my-min-cart .quickCart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    height: auto;
    padding: 8px 18px 8px 40px;
    margin: 0;
    line-height: 1.25;
    background: transparent;
    border: 0;
    box-shadow: none;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
}

/* Láthatatlan híd: a szöveg alja és a lebegő panel között (quickCartWrap position: absolute) */
.store-header-holder .quickCart-holder .quickCart::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 16px;
    pointer-events: auto;
    z-index: 255;
}

.store-header-holder .store-toolbar-btn.my-min-cart .quickCart > span:first-of-type {
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #2c2c2e;
    text-align: center;
}

/* Mini kosár dropdown — pozíció: .quickCart-holder (storeHeader), panel a sor alján */
.store-header-holder .store-toolbar-btn.quickCart-holder {
    position: relative;
}

.store-header-holder .quickCart-holder .quickCartWrap {
    display: none; /* hover: restaurants.js fadeIn */
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(380px, calc(100vw - 24px));
    max-width: 380px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 260;
    font-family: 'Jost', Roboto, system-ui, -apple-system, sans-serif;
    color: #2c2c2e;
    background: #fff;
    border: 1px solid #d1d1d6;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(10, 10, 10, 0.12), 0 2px 8px rgba(10, 10, 10, 0.06);
    overflow: hidden;
}

.store-header-holder .quickCart-holder .quickCartWrap .quickCartHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 0;
    background: #f5f5f7;
    border-bottom: 1px solid #e5e5ea;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #3a3a3e;
    line-height: 1.2;
}

.store-header-holder .quickCart-holder .quickCartWrap .quickCartHeader .column1 {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.store-header-holder .quickCart-holder .quickCartWrap .quickCartHeader .column2 {
    flex: 0 0 44px;
    text-align: center;
}

.store-header-holder .quickCart-holder .quickCartWrap .quickCartHeader .column3 {
    flex: 0 0 76px;
    text-align: right;
}

.store-header-holder .quickCart-holder .quickCartWrap .quickCartHeader > .clear {
    display: none;
}

.store-header-holder .quickCart-holder .quickCartWrap .quickCartContent {
    margin: 0;
    padding: 0;
    max-height: min(52vh, 320px);
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.store-header-holder .quickCart-holder .quickCartWrap .quickCartContent .quickCartItem {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: #0a0a0a;
    border-bottom: 1px solid #f0f0f2;
    background: #fff;
}

.store-header-holder .quickCart-holder .quickCartWrap .quickCartContent .quickCartItem:nth-child(even) {
    background: #fafafa;
}

.store-header-holder .quickCart-holder .quickCartWrap .quickCartContent .quickCartItem:last-child {
    border-bottom: none;
}

.store-header-holder .quickCart-holder .quickCartWrap .quickCartContent .quickCartItem > .clear {
    display: none;
}

.store-header-holder .quickCart-holder .quickCartWrap .quickCartContent .quickCartItem .column1 {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.store-header-holder .quickCart-holder .quickCartWrap .quickCartContent .quickCartItem .column2 {
    flex: 0 0 44px;
    text-align: center;
    color: #6b6b70;
}

.store-header-holder .quickCart-holder .quickCartWrap .quickCartContent .quickCartItem .column3 {
    flex: 0 0 76px;
    text-align: right;
    color: #2c2c2e;
}

.store-header-holder .quickCart-holder .quickCartWrap .quickCartFooter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    margin: 0;
    padding: 12px;
    background: #fafafa;
    border-top: 1px solid #e5e5ea;
    box-sizing: border-box;
}

.store-header-holder .quickCart-holder .quickCartWrap .quickCartFooter .quickCartTotal {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #0a0a0a;
    text-align: left;
}

.store-header-holder .quickCart-holder .quickCartWrap .quickCartFooter .quickCartFinishBtn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 10px 18px;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: #e33e26;
    border: 0;
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.store-header-holder .quickCart-holder .quickCartWrap .quickCartFooter .quickCartFinishBtn:hover {
    background: #c93620;
    color: #fff;
}

.store-header-holder .quickCart-holder .quickCartWrap .quickCartFooter .quickCartFinishBtn:focus-visible {
    outline: 2px solid #e33e26;
    outline-offset: 2px;
}

.store-header-holder .quickCart-holder .quickCartWrap .couponWrap {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.store-header-holder .store-toolbar-btn.my-min-cart:empty {
    display: none;
}

.store-header-holder .store-toolbar-btn:empty {
    display: none;
}

.store-header-holder .store-toolbar-btn .allergens {
    display: flex;
    margin: 0;
    padding: 0;
}

.store-header-holder .store-toolbar-btn .store-info-btn,
.store-header-holder .store-toolbar-btn .allergens a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 40px;
    padding: 10px 22px;
    margin: 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #2c2c2e;
    text-decoration: none;
    background: transparent;
    border: 0;
    box-sizing: border-box;
    cursor: pointer;
}

.store-header-holder .store-toolbar-btn .store-info-btn:focus-visible,
.store-header-holder .store-toolbar-btn .allergens a:focus-visible {
    outline: 2px solid #d5411f;
    outline-offset: 2px;
}


/*.restaurants-store-page .header-box .container {
    position: relative;
}*/

/* ==========================================================================
   Store product listing — stores/templates/template1.php (.storeWrapper)
   Design: assets/images/DESIGN/product-listing.png
   ========================================================================== */

.storeWrapper .storeContent {
    margin-top: 0;
    min-height: 0;
    background: #fff;
    border-radius: 0;
    padding-top: 8px;
    padding-bottom: 36px;
    box-sizing: border-box;
}

.storeWrapper .storeContent .noProductsFound {
    background: #f5f5f7;
    color: #636366;
    border-radius: 12px;
    font-size: 16px;
    font-style: normal;
    line-height: 1.45;
    height: auto;
    min-height: 56px;
    padding: 16px 18px;
    margin-top: 12px;
    text-align: center;
}

.storeWrapper .storeContent .product-type-wrap {
    margin: 0 0 44px;
    box-sizing: border-box;
}

.storeWrapper .storeContent .product-type-wrap.categoryFeatured .product-type-name {
    font-size: 26px;
}

.storeWrapper .storeContent .product-type-name {
    scroll-margin-top: 120px;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: #1a1a1a;
    margin: 0 0 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid #e5e5e8;
}

.storeWrapper .storeContent .product-type-products-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    row-gap: 0;
    align-items: stretch;
    padding-top: 10px;
    box-sizing: border-box;
}

.storeWrapper .storeContent .product-type-products-wrap .clear {
    display: none;
}

.storeWrapper .storeContent .product-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
    padding: 22px 0;
    margin: 0;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e8;
    background: transparent !important;
    box-shadow: none;
    min-height: 100%;
}

.storeWrapper .storeContent .product-wrap.highlighted {
    outline: 2px solid rgba(228, 81, 46, 0.4);
    outline-offset: 2px;
    border-radius: 6px;
}

.storeWrapper .storeContent .product-image {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 120px;
    height: 120px;
    border-radius: 14px;
    overflow: hidden;
    background: #f0f0f2;
}

.storeWrapper .storeContent .product-image.loading {
    background: #ececf0;
}

.storeWrapper .storeContent .product-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.storeWrapper .storeContent .product-info-wrap {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
}

.storeWrapper .storeContent .product-info-head {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.storeWrapper .storeContent .product-tilte {
    margin: 0;
    padding: 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
    flex: 1 1 auto;
    min-width: 0;
}

.storeWrapper .storeContent .product-portion-meta {
    flex: 0 0 auto;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: #2d8a54;
    white-space: nowrap;
    padding-top: 2px;
}

.storeWrapper .storeContent .product-description {
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #3a3a3c;
    margin: 0 0 14px;
    flex: 1 1 auto;
    min-height: 0;
}

.storeWrapper .storeContent .product-description p {
    margin: 0;
}

.storeWrapper .storeContent .product-variation-wrap {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.storeWrapper .storeContent .product-variation {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 10px;
    margin: 0;
    padding: 12px 0 0;
    border: 0;
    border-top: 1px solid #ececf0;
    box-sizing: border-box;
    text-decoration: none;
    color: #1a1a1a;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    cursor: pointer;
}

.storeWrapper .storeContent .product-variation:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.storeWrapper .storeContent .product-variation-description {
    flex: 1 1 auto;
    margin-right: auto;
    min-width: 0;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: #636366;
}

.storeWrapper .storeContent .product-variation-description:empty {
    display: none;
}

.storeWrapper .storeContent .product-variation .addInfo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.storeWrapper .storeContent .product-variation .priceInfo {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    font-size: 14px;
    font-weight: 500;
    color: #3a3a3c;
}

.storeWrapper .storeContent .product-variation .priceInfo .amount,
.storeWrapper .storeContent .product-variation .priceInfo .amount.bold {
    font-weight: 700;
    color: #1a1a1a;
}

.storeWrapper .storeContent .product-variation .priceInfo .coin {
    font-weight: 700;
    color: #1a1a1a;
}

.storeWrapper .storeContent .product-variation .priceInfo .oldAmount {
    font-size: 12px;
    color: #8e8e93;
}

/* Promo: sale price green, crossed original price red (template1 + htmlPrice) */
.storeWrapper .storeContent .product-variation.isOnPromo .priceInfo .amount,
.storeWrapper .storeContent .product-variation.isOnPromo .priceInfo .amount .coin {
    color: #2d8a54;
    font-weight: 700;
}

.storeWrapper .storeContent .product-variation.isOnPromo .priceInfo .oldAmount,
.storeWrapper .storeContent .product-variation.isOnPromo .priceInfo .oldAmount strike {
    color: #d32f2f;
    font-weight: 500;
}

.storeWrapper .storeContent .product-variation.isOnPromo .priceInfo .oldAmount strike {
    text-decoration-color: rgba(211, 47, 47, 0.65);
}

.storeWrapper .storeContent .product-variation::after {
    content: '\203A';
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 2px;
    border: 1px solid #d8d8dc;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    color: #757575;
    background: #fff;
    box-sizing: border-box;
}

.storeWrapper .storeContent .product-variation:hover {
    color: #1a1a1a;
}

.storeWrapper .storeContent .product-variation:hover::after {
    border-color: #b8b8bd;
    color: #1a1a1a;
}

@media screen and (max-width: 768px) {
    .storeWrapper .storeContent .product-type-products-wrap {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .storeWrapper .storeContent .product-type-name {
        font-size: 20px;
    }

    .storeWrapper .storeContent .product-image {
        width: 96px;
        height: 96px;
    }

    .storeWrapper .storeContent .product-tilte {
        font-size: 16px;
    }
}

/* =============================================================================
   STORE THEME — Product detail modal (product_modal.js)
   Wrapper: .product-modal-holder > .product-modal > .product-modal-content
   Inner markup: application/views/stores/cart/product_detail.php (.product-detail …)
   Ported from restaurants theme + aligned with store UI (Roboto, neutrals, CTA).
   ============================================================================= */

body.product-modal-open {
    overflow: hidden;
    height: 100%;
}

.product-modal-holder {
    position: fixed;
    inset: 0;
    z-index: 10010;
}

.product-modal-holder .bg {
    display: none;
}

.product-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    padding: 24px 16px 40px;
}

.product-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(735px, calc(100vw - 32px));
    height: auto;
    max-height: calc(100vh - 64px);
    min-height: min(400px, calc(100vh - 64px));
    min-width: 0;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e5e8;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
}

/* Bezáró: a fehér modál (.product-modal-content) jobb felső sarka — a gomb a .product-detail-ben van,
   ezért a .product-detail position: static, hogy az absolute a modalhoz igazodjon. */
.product-modal-content .close-product-modal-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 40;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Product modal — .product-detail layout (stores/cart/product_detail.php)
   Regions: .pd-info (bal), .pd-options (jobb), .pd-footer (teljes szélesség,
   a felső két régió alatt). Belső komponensek formázása nélkül.
   ------------------------------------------------------------------------- */

.product-modal-content .product-detail {
    position: static;
    border-radius: 16px;
    overflow: hidden;
    display: grid;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* Első sor magasságát a pd-info tartalom határozza meg; pd-options nem növeli, csak görget */
    grid-template-rows: auto auto;
    grid-template-areas:
        "pd-info pd-options"
        "pd-footer pd-footer";
    column-gap: 20px;
    row-gap: 0;
    align-items: stretch;
    box-sizing: border-box;
}

.product-modal-content .pd-info {
    grid-area: pd-info;
    justify-self: stretch;
    align-self: start;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: visible;
    text-align: left;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 16px 44px 0 20px;
    /* Variáns + ambalaj checkbox ugyanakkora (DESIGN/product_detail_model.png) */
    --pd-info-checkbox-size: 43px;
}

/* pd-info — product name, description, photo (DESIGN/product_detail_model.png) */

.product-modal-content .pd-info > .pd-name {
    margin: 0 0 10px;
    padding: 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #0a0a0a;
}

.product-modal-content .pd-info > .pd-description {
    margin: 0 0 20px;
    padding: 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #2c2c2e;
}

.product-modal-content .pd-info > .pd-description span {
    display: block;
}

.product-modal-content .pd-info > .pd-image {
    width: 100%;
    margin: 0 0 20px;
    border-radius: 14px;
    overflow: hidden;
    background: #ececf0;
    aspect-ratio: 4 / 3;
    flex-shrink: 0;
    box-sizing: border-box;
}

.product-modal-content .pd-info > .pd-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =============================================================================
   Termékmodál — variációs lista (.pd-product-variation-holder)
   DESIGN: assets/images/DESIGN/product_detail_model.png
   Csak: .pd-body-row.pd-variant, .pd-row-left, .pd-row-right, .pd-price-label (+ belső .priceInfo).
   A .pd-checkbox-holder külön szabályok alatt; itt nem duplikáljuk.
   ============================================================================= */

.product-modal-content .pd-info .pd-product-variation-holder {
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.product-modal-content .pd-info .pd-product-variation-holder .pd-body-row.pd-variant {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 14px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #ececf0;
}

.product-modal-content .pd-info .pd-product-variation-holder .pd-body-row.pd-variant:first-child {
    padding-top: 2px;
}

.product-modal-content .pd-info .pd-product-variation-holder .pd-body-row.pd-variant:last-child {
    border-bottom: none;
    padding-bottom: 2px;
}

.product-modal-content .pd-info .pd-product-variation-holder .pd-row-left {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: #0a0a0a;
    text-align: left;
}

.product-modal-content .pd-info .pd-product-variation-holder .pd-row-right {
    display: flex;
    flex-direction: row-reverse;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.product-modal-content .pd-info .pd-product-variation-holder .pd-row-right .pd-price-label {
    margin: 0;
    padding: 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    color: #2c2c2e;
    text-align: right;
    white-space: nowrap;
    cursor: pointer;
}

.product-modal-content .pd-info .pd-product-variation-holder .pd-price-label .priceInfo {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.2em 0.45em;
}

.product-modal-content .pd-info .pd-product-variation-holder .pd-price-label .amount.bold {
    font-weight: 500;
    color: #0a0a0a;
}

.product-modal-content .pd-info .pd-product-variation-holder .pd-price-label .coin {
    font-weight: 400;
    color: #2c2c2e;
}

.product-modal-content .pd-info .pd-product-variation-holder .pd-price-label .oldAmount {
    font-size: 13px;
    font-weight: 400;
    color: #6b6b70;
}

/* Promóciós variáns (.on-promotion): akciós ár zöld, régi ár piros */
.product-modal-content .pd-info .pd-product-variation-holder .pd-body-row.pd-variant.on-promotion .pd-price-label .amount.bold,
.product-modal-content .pd-info .pd-product-variation-holder .pd-body-row.pd-variant.on-promotion .pd-price-label .amount.bold .coin {
    color: #16a34a;
    font-weight: 700;
}

.product-modal-content .pd-info .pd-product-variation-holder .pd-body-row.pd-variant.on-promotion .pd-price-label .oldAmount,
.product-modal-content .pd-info .pd-product-variation-holder .pd-body-row.pd-variant.on-promotion .pd-price-label .oldAmount .coin,
.product-modal-content .pd-info .pd-product-variation-holder .pd-body-row.pd-variant.on-promotion .pd-price-label .oldAmount strike {
    color: #e33e26;
}

.product-modal-content .pd-info .pd-product-variation-holder .pd-body-row.pd-variant.on-promotion .pd-price-label .oldAmount strike {
    text-decoration-color: #e33e26;
}

/* =============================================================================
   Termékmodál — variáns checkbox (csak .pd-product-variation-holder alatt)
   Méret: .pd-info --pd-info-checkbox-size (product_detail_model.png — variáns + ambalaj egyezik).
   Markup: .pd-checkbox-holder > .checkbox-wrapper > input[type=checkbox] + .checkbox-checkmark
   A natív input rejtett (opacity), a kattintható terület megegyezik a dobozzal;
   a látható megjelenést a .checkbox-checkmark adja (háttérkép).
   ============================================================================= */

/* --- Általános: méret, oszlop, rejtett input, megjelenítő réteg alapja --- */
.product-modal-content .pd-info .pd-product-variation-holder .pd-checkbox-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--pd-info-checkbox-size);
    width: var(--pd-info-checkbox-size);
    min-width: var(--pd-info-checkbox-size);
    max-width: var(--pd-info-checkbox-size);
    box-sizing: border-box;
}

.product-modal-content .pd-info .pd-product-variation-holder .pd-checkbox-holder .checkbox-wrapper {
    position: relative;
    width: var(--pd-info-checkbox-size);
    height: var(--pd-info-checkbox-size);
    min-width: var(--pd-info-checkbox-size);
    min-height: var(--pd-info-checkbox-size);
    max-width: var(--pd-info-checkbox-size);
    max-height: var(--pd-info-checkbox-size);
    flex-shrink: 0;
    box-sizing: border-box;
}

.product-modal-content .pd-info .pd-product-variation-holder .pd-checkbox-holder .checkbox-wrapper input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    box-sizing: border-box;
}

.product-modal-content .pd-info .pd-product-variation-holder .pd-checkbox-holder .checkbox-wrapper .checkbox-checkmark {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    /* A két PNG különböző képarányú (uncheckd ~131×97, checked ~105×94). Fix 43×43
       háttérméret nem arányos nyújtást okoz → eltérő „doboz” érzet. contain: arányos,
       középre illesztve ugyanabba a 43×43 területbe. */
    background-size: contain;
    pointer-events: none;
}

.product-modal-content .pd-info .pd-product-variation-holder .pd-checkbox-holder .checkbox-wrapper input[type="checkbox"]:focus-visible + .checkbox-checkmark {
    outline: 2px solid #d5411f;
    outline-offset: 2px;
}

/* --- Nincs kipipálva (DESIGN: product_simple_uncheckd.png) --- */
.product-modal-content .pd-info .pd-product-variation-holder .pd-checkbox-holder .checkbox-wrapper input[type="checkbox"]:not(:checked) + .checkbox-checkmark {
    background-image: url("../../images/DESIGN/product_simple_uncheckd.png");
}

/* --- Kipipálva (DESIGN: product_simple_checked.png) --- */
.product-modal-content .pd-info .pd-product-variation-holder .pd-checkbox-holder .checkbox-wrapper input[type="checkbox"]:checked + .checkbox-checkmark {
    background-image: url("../../images/DESIGN/product_simple_checked.png");
}

/* =============================================================================
   Termékmodál — ambalaj / csomagolás (.pd-product-packages)
   DESIGN: product_detail_model.png (pd-info régió)
   A sor mindig checked + disabled; a pipa látszik, a doboz szürke (nem kivehető).
   ============================================================================= */

.product-modal-content .pd-info .pd-product-packages {
    margin: 20px 0 0;
    padding: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.product-modal-content .pd-info .pd-product-packages .package-group {
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.product-modal-content .pd-info .pd-product-packages .package-group > .pd-group-label {
    margin: 0 0 8px;
    padding: 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6b6b70;
}

.product-modal-content .pd-info .pd-product-packages .package-group > .pd-group-body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.product-modal-content .pd-info .pd-product-packages .pd-body-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 14px 0 2px;
    box-sizing: border-box;
    border-bottom: 1px solid #ececf0;
}

.product-modal-content .pd-info .pd-product-packages .pd-row-left.package-name {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: #0a0a0a;
    text-align: left;
}

.product-modal-content .pd-info .pd-product-packages .pd-row-right {
    display: flex;
    flex-direction: row-reverse;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.product-modal-content .pd-info .pd-product-packages .pd-row-right .pd-price-label {
    margin: 0;
    padding: 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    color: #2c2c2e;
    text-align: right;
    white-space: nowrap;
    cursor: default;
}

.product-modal-content .pd-info .pd-product-packages .pd-row-right .pd-price-label .package-price {
    font-weight: 500;
    color: #0a0a0a;
}

/* --- Csomagolás checkbox: kipipált, letiltott, szürke (nem a variáns PNG-k); méret: --pd-info-checkbox-size --- */
.product-modal-content .pd-info .pd-product-packages .pd-checkbox-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--pd-info-checkbox-size);
    width: var(--pd-info-checkbox-size);
    min-width: var(--pd-info-checkbox-size);
    max-width: var(--pd-info-checkbox-size);
    box-sizing: border-box;
}

.product-modal-content .pd-info .pd-product-packages .pd-checkbox-holder .checkbox-wrapper {
    position: relative;
    width: var(--pd-info-checkbox-size);
    height: var(--pd-info-checkbox-size);
    min-width: var(--pd-info-checkbox-size);
    min-height: var(--pd-info-checkbox-size);
    max-width: var(--pd-info-checkbox-size);
    max-height: var(--pd-info-checkbox-size);
    flex-shrink: 0;
    box-sizing: border-box;
}

.product-modal-content .pd-info .pd-product-packages .pd-checkbox-holder .checkbox-wrapper input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: not-allowed;
    z-index: 2;
    box-sizing: border-box;
}

.product-modal-content .pd-info .pd-product-packages .pd-checkbox-holder .checkbox-wrapper .checkbox-checkmark {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 10px;
    background-color: #aeb2b9;
    background-image: none;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    pointer-events: none;
}

.product-modal-content .pd-info .pd-product-packages .pd-checkbox-holder .checkbox-wrapper input[type="checkbox"]:disabled + .checkbox-checkmark::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    width: 8px;
    height: 14px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: translate(-50%, -50%) rotate(45deg);
    box-sizing: border-box;
}

/* =============================================================================
   Termékmodál — eladó sor (.pd-seller-wrapper)
   DESIGN: assets/images/DESIGN/product_detail_model.png
   Logó balra, két soros szöveg (intro + bolt név), függőlegesen középre igazítva.
   ============================================================================= */

.product-modal-content .pd-info .pd-seller-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    margin: 22px 0 16px;
    padding: 2px 0 0;
    box-sizing: border-box;
}

.product-modal-content .pd-info .pd-seller-wrapper .pd-store-logo {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 5px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ececf0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-modal-content .pd-info .pd-seller-wrapper .pd-store-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-modal-content .pd-info .pd-seller-wrapper .pd-seller-label-holder {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
}

.product-modal-content .pd-info .pd-seller-wrapper .pd-seller-intro {
    display: block;
    margin: 0;
    padding: 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    color: #2c2c2e;
}

.product-modal-content .pd-info .pd-seller-wrapper .pd-seller-name {
    display: block;
    margin: 0;
    padding: 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #0a0a0a;
    word-break: break-word;
}

.product-modal-content .pd-info .pd-seller-wrapper .pd-seller-name:empty {
    display: none;
}

/* =============================================================================
   Termékmodál — jobb oszlop (.pd-options), DESIGN: product_detail_model.png
   Extra csoportok, sorok, ár + gombok, mennyiségvezérlők, allergének / mentiuni.
   ============================================================================= */

.product-modal-content .pd-options {
    grid-area: pd-options;
    justify-self: stretch;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding: 30px 44px 16px 8px;
    text-align: left;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
}

.product-modal-content .pd-options .eg-debug-flag {
    display: none !important;
}

.product-modal-content .pd-options .pd-group,
.product-modal-content .pd-options .pd-group-label,
.product-modal-content .pd-options .pd-group-body,
.product-modal-content .pd-options .pd-body-row,
.product-modal-content .pd-options .pd-note-holder,
.product-modal-content .pd-options .pd-note {
    text-align: left;
}

.product-modal-content .pd-options .pd-group.extra-group {
    margin: 0 0 28px;
    padding: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.product-modal-content .pd-options .pd-group.extra-group:last-of-type {
    margin-bottom: 20px;
}

.product-modal-content .pd-options .pd-group.allergens-group,
.product-modal-content .pd-options .pd-group.nutritional-group {
    margin: 0 0 24px;
    padding: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.product-modal-content .pd-options .pd-group > .pd-group-label {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 12px;
    margin: 0 0 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid #ececf0;
    box-sizing: border-box;
}

.product-modal-content .pd-options .pd-group-name {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #0a0a0a;
}

.product-modal-content .pd-options .required-eg {
    color: #e33e26;
    font-weight: 700;
    margin-left: 2px;
}

.product-modal-content .pd-options .max-min-holder {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: #6b6b70;
    margin-left: auto;
}

.product-modal-content .pd-options .extra-group-error:empty {
    display: none;
}

.product-modal-content .pd-options .extra-group-error:not(:empty) {
    display: block;
    width: 100%;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #e33e26;
}

.product-modal-content .pd-options .pd-group-body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.product-modal-content .pd-options .pd-body-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 12px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f2;
}

.product-modal-content .pd-options .pd-group-body .pd-body-row:last-child {
    border-bottom: none;
}

.product-modal-content .pd-options .pd-row-left {
    grid-column: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: #0a0a0a;
}

.product-modal-content .pd-options .pd-row-right {
    grid-column: 2;
    position: relative;
    float: none;
    right: auto;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    max-width: max-content;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.product-modal-content .pd-options .pd-checkbox-holder {
    float: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

.product-modal-content .pd-options label.pd-price-label,
.product-modal-content .pd-options .pd-price-label {
    float: none;
    margin: 0;
    padding: 0;
    line-height: 1.35;
    font-size: 15px;
    font-weight: 700;
    color: #0a0a0a;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}

/* Extra sor: multi_qty=0 → csak + (zöld × ha kiválasztva). multi_qty=1 → − / szám / + (design) */
.product-modal-content .pd-options .extra-qty-holder {
    position: relative;
    float: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.product-modal-content .pd-options .extra-group[multi_qty="1"] .extra-qty-holder {
    justify-content: flex-end;
    gap: 8px;
}

/* Single / nem több-mennyiség: mínusz + rejtett szám mező (JS változatlan) */
.product-modal-content .pd-options .extra-group[multi_qty="0"] .extra-qty-btn-minus {
    display: none !important;
}

.product-modal-content .pd-options .extra-group[multi_qty="0"] input.extra-qty {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    flex: 0 0 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Több-mennyiség: látható szám (a JS show/hide érvényesül, nincs display:none !important) */
.product-modal-content .pd-options .extra-group[multi_qty="1"] input.extra-qty {
    position: static;
    float: none;
    width: auto;
    min-width: 24px;
    max-width: 48px;
    height: 36px;
    margin: 0;
    padding: 0 4px;
    overflow: visible;
    clip: auto;
    opacity: 1;
    flex: 0 0 auto;
    pointer-events: none;
    text-align: center;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 36px;
    color: #0a0a0a;
    background: transparent !important;
    border: none;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
}

.product-modal-content .pd-options .extra-qty-btn {
    float: none;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid #e0e0e6;
    border-radius: 8px;
    background: #fff !important;
    background-image: none !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.product-modal-content .pd-options .extra-qty-btn-plus:not(.checked-btn):not(.disabled-btn) {
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.07),
        0 1px 2px rgba(0, 0, 0, 0.04);
}

.product-modal-content .pd-options .extra-group[multi_qty="1"] .extra-qty-btn-minus:not(.disabled-btn) {
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.07),
        0 1px 2px rgba(0, 0, 0, 0.04);
}

.product-modal-content .pd-options .extra-qty-btn:hover:not(:disabled) {
    background: #f8f8f9 !important;
    border-color: #d4d4da;
}

/* Zöld × csak single módban (multi_qty=0) */
.product-modal-content .pd-options .extra-group[multi_qty="0"] .extra-qty-btn-plus.checked-btn {
    background: #22ab52 !important;
    border-color: #1e9a49 !important;
    box-shadow: none;
}

.product-modal-content .pd-options .extra-group[multi_qty="0"] .extra-qty-btn-plus.checked-btn:hover {
    background: #1e9d4a !important;
    border-color: #1a8f42 !important;
}

/* multi_qty=1: + marad fehér/piros akkor is, ha a JS checked-btn-t ad (qty > 0) */
.product-modal-content .pd-options .extra-group[multi_qty="1"] .extra-qty-btn-plus.checked-btn {
    background: #fff !important;
    border-color: #e0e0e6 !important;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.07),
        0 1px 2px rgba(0, 0, 0, 0.04);
}

.product-modal-content .pd-options .extra-group[multi_qty="1"] .extra-qty-btn-plus.checked-btn:hover {
    background: #f8f8f9 !important;
    border-color: #d4d4da !important;
}

.product-modal-content .pd-options .extra-qty-btn:focus-visible {
    outline: 2px solid #e33e26;
    outline-offset: 2px;
}

.product-modal-content .pd-options .extra-qty-btn::after {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -52%);
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    line-height: 1;
}

.product-modal-content .pd-options .extra-qty-btn-plus::after {
    content: '+';
    font-size: 22px;
    font-weight: 600;
    color: #e33e26;
}

.product-modal-content .pd-options .extra-group[multi_qty="0"] .extra-qty-btn-plus.checked-btn::after {
    content: '\00d7';
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    transform: translate(-50%, -56%);
}

.product-modal-content .pd-options .extra-group[multi_qty="1"] .extra-qty-btn-plus.checked-btn::after {
    content: '+';
    font-size: 22px;
    font-weight: 600;
    color: #e33e26;
    transform: translate(-50%, -52%);
}

/* multi_qty=1: mínusz halványszürke ha nincs kiválasztva; piros ha van (plus checked-btn = qty>0) */
.product-modal-content .pd-options .extra-group[multi_qty="1"] .extra-qty-btn-minus::after {
    content: '\2212';
    font-size: 22px;
    font-weight: 600;
    color: #c4c4cc;
}

.product-modal-content .pd-options .extra-group[multi_qty="1"] .extra-qty-holder:has(.extra-qty-btn-plus.checked-btn) .extra-qty-btn-minus::after {
    color: #e33e26;
}

.product-modal-content .pd-options .extra-qty-btn-plus.disabled-btn {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.product-modal-content .pd-options .extra-qty-btn-plus.disabled-btn::after {
    color: #b0b0b8;
}

.product-modal-content .pd-options .extra-checkbox {
    display: none !important;
}

/* Mentiuni — cím a csoport burkoló nélkül */
.product-modal-content .pd-options > .pd-group-label {
    display: block;
    margin: 8px 0 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid #ececf0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #0a0a0a;
    box-sizing: border-box;
}

.product-modal-content .pd-options .pd-note-error:empty {
    display: none;
}

.product-modal-content .pd-options .pd-note-error:not(:empty) {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: #e33e26;
}

.product-modal-content .pd-options .pd-note-holder {
    margin: 0 0 12px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.product-modal-content .pd-options .pd-note {
    display: block;
    width: 100%;
    min-height: 72px;
    margin: 0;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    color: #2c2c2e;
    background: #fff;
    border: 1px solid #e0e0e6;
    border-radius: 10px;
    resize: vertical;
    box-sizing: border-box;
}

.product-modal-content .pd-options .pd-note::placeholder {
    color: #8e8e93;
}

/* =============================================================================
   Termékmodál — lábléc (.pd-footer), DESIGN: product_detail_model.png
   Csak .product-modal-content .pd-footer (és közvetlen belső struktúra): két sáv
   (világosszürke mennyiség ~45% + piros összeg + „Adaugă”), a grid utolsó sorában
   a .product-detail alján (align-self: end). margin-top: lélegző hely a seller sor és
   a lábléc között (product_detail_model.png).
   ============================================================================= */

.product-modal-content .pd-footer {
    grid-area: pd-footer;
    align-self: end;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    min-height: 68px;
    margin: 20px 0 0;
    padding: 0;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06);
}

/* Bal: mennyiség — product_detail_model.png (világosszürke sáv ~45%) */
.product-modal-content .pd-footer .pd-footer-left {
    float: none;
    flex: 0 0 45%;
    max-width: 45%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: #f2f2f4;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.product-modal-content .pd-footer .pd-qty-holder {
    float: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
    max-width: none;
    margin: 0 auto;
    padding: 10px 14px;
    box-sizing: border-box;
}

.product-modal-content .pd-footer .pd-qty-inform-label {
    flex: 0 0 auto;
    margin: 0 6px 0 0;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b6b70;
    white-space: nowrap;
}

.product-modal-content .pd-footer .qty-btn {
    float: none;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: #e4e4e8;
    color: #0a0a0a;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
}

.product-modal-content .pd-footer .qty-btn:hover {
    background: #d8d8de;
}

.product-modal-content .pd-footer .qty-btn:active {
    background: #cbcbd2;
}

.product-modal-content .pd-footer .pd-qty-label {
    float: none;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0;
    padding: 0 2px;
    text-align: center;
}

.product-modal-content .pd-footer .pd-qty-label span {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: #0a0a0a;
}

/* Közép + jobb: összár + gomb — egy piros sáv (~55%), DESIGN product_detail_model.png */
.product-modal-content .pd-footer .pd-footer-center {
    float: none;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 12px 10px 12px 16px;
    background: #e33e26;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}

.product-modal-content .pd-footer .pd-total-amount-holder {
    margin: 0;
    padding: 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    white-space: nowrap;
}

.product-modal-content .pd-footer .pd-total-amount-holder span {
    color: #fff;
}

.product-modal-content .pd-footer .pd-footer-right {
    float: none;
    flex: 0 0 auto;
    margin: 0;
    padding: 12px 18px 12px 10px;
    background: #e33e26;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.product-modal-content .pd-footer .pd-add-to-cart-holder {
    margin: 0;
    padding: 0;
}

.product-modal-content .pd-footer .pd-add-to-cart-btn {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}

.product-modal-content .pd-footer .pd-add-to-cart-btn:hover {
    color: rgba(255, 255, 255, 0.92);
}

.product-modal-content .pd-footer .pd-add-to-cart-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media screen and (max-width: 640px) {
    .product-modal-content .product-detail {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "pd-info"
            "pd-options"
            "pd-footer";
        min-height: 0;
        column-gap: 0;
        row-gap: 0;
    }

    .product-modal-content .pd-options {
        text-align: left;
        padding: 28px 40px 16px 12px;
    }

    .product-modal-content .pd-info {
        padding: 14px 40px 0 12px;
    }

    .product-modal-content .pd-info > .pd-name {
        font-size: clamp(22px, 6vw, 28px);
    }

    .product-modal-content .pd-info > .pd-description {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .product-modal-content .pd-info > .pd-image {
        margin-bottom: 16px;
        border-radius: 12px;
    }
}



/* =============================================================================
   STORE THEME — Store info modal (store_info_modal.js + views/stores/store_info.php)
   DOM: .store-info-modal-holder > .store-info-modal > .store-info-modal-content
        + .bg (rejtve, a backdrop a .store-info-modal-on van)
   Bezárás: katt a háttérre (.store-info-modal), ESC, .close-store-info-modal-btn
   ============================================================================= */

body.store-info-modal-open {
    overflow: hidden;
    height: 100%;
}

.store-info-modal-holder {
    position: fixed;
    inset: 0;
    z-index: 10015;
    pointer-events: none;
}

.store-info-modal-holder .store-info-modal,
.store-info-modal-holder .store-info-modal-content,
.store-info-modal-holder .close-store-info-modal-btn {
    pointer-events: auto;
}

.store-info-modal-holder .bg {
    display: none;
}

.store-info-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    padding: 24px 16px 40px;
}

.store-info-modal-content {
    position: relative;
    width: min(560px, calc(100vw - 32px));
    max-width: 560px;
    margin: 0 auto;
    padding: 0;
    background: #fff;
    border: 1px solid #e5e5e8;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
    font-family: 'Jost', Roboto, system-ui, -apple-system, sans-serif;
    color: #2c2c2e;
}

.store-info-modal-content .store-info-content {
    margin: 0;
    padding: 20px 44px 28px 22px;
    box-sizing: border-box;
}

.store-info-modal-content .close-store-info-modal-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: 0;
    border-radius: 10px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    box-sizing: border-box;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.store-info-modal-content .close-store-info-modal-btn:hover {
    background-color: rgba(10, 10, 10, 0.06);
    opacity: 1;
}

.store-info-modal-content .close-store-info-modal-btn:focus-visible {
    outline: 2px solid #e33e26;
    outline-offset: 2px;
}

.store-info-modal-content .si-header {
    margin: 0 0 8px;
    padding: 0 32px 16px 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: clamp(20px, 4vw, 26px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-align: left;
    color: #0a0a0a;
    border-bottom: 1px solid #ececee;
}

.store-info-modal-content .si-group {
    margin: 0;
    padding: 16px 0;
    border-bottom: 1px solid #ececee;
    box-sizing: border-box;
}

.store-info-modal-content .si-group:last-of-type {
    border-bottom: none;
    padding-bottom: 4px;
}

.store-info-modal-content .si-label {
    margin: 0 0 8px;
    padding: 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b6b70;
}

.store-info-modal-content .si-value {
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    color: #2c2c2e;
}

.store-info-modal-content .si-value .bold,
.store-info-modal-content .si-value b,
.store-info-modal-content .si-value strong {
    font-weight: 700;
    color: #0a0a0a;
}

.store-info-modal-content .si-value a {
    color: #e33e26;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.store-info-modal-content .si-value a:hover {
    color: #c93620;
}

@media screen and (max-width: 480px) {
    .store-info-modal {
        padding: 16px 12px 28px;
    }

    .store-info-modal-content .store-info-content {
        padding: 18px 40px 22px 16px;
    }

    .store-info-modal-content .si-header {
        padding-right: 28px;
        font-size: 20px;
    }
}



/* -------------------------------------------------------------------------
   CHECKOUT — application/views/stores/checkout.php
   Fő konténerek: .storeContent, .checkoutMessageWrap, .checkoutWrap,
   .orderWrap / .orderItemsWrap, .checkoutFormWrap, .checkoutFooter,
   .checkout_no_user
   ------------------------------------------------------------------------- */



/* STORE PAGE END */