/* 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;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 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;
}

.errorMessage .alertMessage-text,
.successMessage .alertMessage-text,
.warningMessage .alertMessage-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* 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,
.msg-close-btn {
    position: relative;
    top: auto;
    right: auto;
    flex: 0 0 32px;
    align-self: flex-start;
    margin-left: auto;
    display: block;
    width: 32px;
    height: 32px;
    margin-top: -4px;
    margin-right: -4px;
    padding: 0;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    background: transparent;
    opacity: 0.55;
    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,
.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,
.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;
    text-decoration: none;
}

/* Legacy checkout close links — hide inline "x" if any old markup remains */
.errorMessage > a[href="#"]:last-child,
.successMessage > a[href="#"]:last-child,
.warningMessage > a[href="#"]:last-child {
    display: none;
}

.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;
    z-index: 30;
    flex-shrink: 0;
    height: 200px;
    width: 100%;
    pointer-events: none;

}

.header-box-top .menu-holder,
.header-box-top .site-logo {
    pointer-events: auto;
}

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

/* -------------------------------------------------------------------------
   CAMPAIGN BANNERS — stores header slider (headerBox.php)
   When present, header grows in height; location/quick buttons stack below.
   ------------------------------------------------------------------------- */

.header-box.has-campaign-banners {
    height: auto;
    min-height: 0;
    margin-bottom: 32px;
    overflow: visible;
}

.header-box.has-campaign-banners .header-box-top {
    flex-shrink: 0;
}

.header-box.has-campaign-banners .header-box-bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    padding-bottom: 8px;
}

.header-box.has-campaign-banners .location-box-holder {
    position: absolute;
    top: -35px;
    right: 29px;
    left: auto;
    z-index: 35;
    margin: 0 auto;
}

.header-box-bottom .campaign-banner-container {
    flex: 0 0 auto;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 16px 10px;
    box-sizing: border-box;
}

.header-box.has-campaign-banners .header-box-bottom .campaign-banner-container {
    margin-top: 38px;
    padding-top: 0;
}

.header-box-bottom .campaign-banner-container .slick-list,
.header-box-bottom .campaign-banner-container .slick-track {
    display: block;
}

.header-box-bottom .campaign-banner {
    display: block;
    width: 100%;
}

.header-box-bottom .campaign-banner .image-wrapper {
    display: block;
    position: relative;
    width: 100%;
    max-width: 974px;
    margin: 0 auto;
}

.header-box-bottom .campaign-banner .image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.header-box.has-campaign-banners .quick-buttons-holder {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 2px 12px 4px;
}

.header-box.has-campaign-banners .quick-buttons-holder .quick-buttons {
    gap: 8px 12px;
    max-width: 640px;
}

.header-box.has-campaign-banners .search-input-holder {
    flex: 0 0 auto;
    margin-top: 0;
}

@media screen and (max-width: 767px) {
    .header-box.has-campaign-banners {
        margin-bottom: 24px;
    }

    .header-box-bottom .campaign-banner-container {
        padding: 0 12px 8px;
    }

    .header-box.has-campaign-banners .header-box-bottom .campaign-banner-container {
        margin-top: 28px;
    }

    .header-box.has-campaign-banners .quick-buttons-holder {
        padding-bottom: 12px;
    }
}

.header-box.empty-home.has-campaign-banners .header-box-bottom {
    max-width: 100%;
    margin-top: 0;
}

.header-box.empty-home.has-campaign-banners .header-box-bottom .campaign-banner-container {
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* CAMPAIGN BANNERS END */

/* -------------------------------------------------------------------------
   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: 40;
    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;
}

/* Mini cart — header strip; one pill like .mini-notifications (icon only inside, no inner circle) */
.header-box-top .menu-holder .menu-item.mini-cart {
    display: inline-flex;
    align-items: center;
}

.header-box-top .menu-holder .mini-cart {
    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-cart:hover {
    background: rgba(255, 255, 255, 0.22);
}

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

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

.header-box-top .menu-holder .mini-cart .mini-cart-detail {
    display: none;
    position: absolute;
    z-index: 300;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(100vw - 32px, 300px);
    max-width: 300px;
    max-height: min(70vh, 360px);
    margin: 0;
    padding: 10px 8px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.14);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: left;
}

.header-box-top .menu-holder .mini-cart .mini-cart-detail a {
    display: block;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #1a1a1a;
    filter: none;
    border-radius: 10px;
    transition: background-color 0.15s ease;
}

.header-box-top .menu-holder .mini-cart .mini-cart-detail a + a {
    margin-top: 4px;
}

.header-box-top .menu-holder .mini-cart .mini-cart-detail a:hover,
.header-box-top .menu-holder .mini-cart .mini-cart-detail a:focus {
    color: #1a1a1a;
    opacity: 1;
    background: #fff7f5;
    outline: none;
}

.header-box-top .menu-holder .mini-cart .mini-cart-store-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 10px 12px;
    box-sizing: border-box;
}

.header-box-top .menu-holder .mini-cart .mini-cart-store-row img {
    flex-shrink: 0;
    display: block;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 4px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e8e8ec;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.header-box-top .menu-holder .mini-cart .mini-cart-store-name {
    flex: 1;
    min-width: 0;
    color: #1a1a1a;
    font-family: 'Jost', Roboto, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- 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: 50;
    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: 400;
    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: 35;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 12px 10px;
    pointer-events: auto;
}

/* --- 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-add-new-address {
    border-bottom: 1px solid #f0f0f0;
}

.location-box-holder .listSelect .location-box-add-address {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    color: #E33E26;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.location-box-holder .listSelect .location-box-add-address__icon {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.location-box-holder .listSelect .location-box-add-address__label {
    display: block;
}

.location-box-holder .listSelect .location-box-add-address:hover {
    opacity: 0.82;
}

.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: 4px 12px 8px;
}

.header-box-bottom .quick-buttons-holder .quick-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 10px 14px;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.header-box-bottom .quick-buttons-holder .quick-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 78px;
    max-width: none;
    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: 64px;
    height: 64px;
    margin: 0 auto 8px;
    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: 80;
    display: none;
    width: 100%;
    max-width: 560px;
    margin: 0 0 14px 0;
    box-sizing: border-box;
    padding: 0 12px;
}

/* Home: search stays in grey header band (flow), not absolute */
body.restaurants-home-page .content:has(.storeWrapper) .header-box-bottom .search-input-holder {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 560px;
    margin: 0 0 16px;
    padding: 0 12px;
    pointer-events: auto;
    z-index: 80;
}

body.restaurants-home-page .header-box-bottom .search-input-holder .searchInput,
body.restaurants-home-page .header-box-bottom .search-input-holder input.listSelectInput {
    width: 100%;
    max-width: 560px;
}

body.restaurants-home-page .header-box.has-campaign-banners .header-box-bottom .search-input-holder {
    margin-top: 0;
    margin-bottom: 12px;
}

body.restaurants-home-page .header-box-bottom .search-input-holder,
body.restaurants-store-page .header-box-bottom .search-input-holder {
    display: block;
}

.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 */

/* -------------------------------------------------------------------------
   SEARCH SUGGEST — autocomplete dropdown (searchapi web_suggest → search_suggest.php)
   Holder: .search-input-holder > .listSelect.search-suggest-holder
   Open/close: assets/js/stores/restaurants.js (.fullSearchInput / .storeProductSearchInput)
   ------------------------------------------------------------------------- */

.search-input-holder .listSelect.search-suggest-holder {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 560px;
    max-height: min(70vh, 520px);
    margin: 0;
    padding: 0;
    z-index: 500;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.search-suggest {
    font-family: 'Jost', 'Roboto', Helvetica, Arial, sans-serif;
    color: #1a1a1a;
}

.search-suggest .store-container + .products-container {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.search-suggest .search-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    margin: 0;
    padding: 10px 14px;
    background: #f6f6f6;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.search-suggest .search-header > div[style*="clear"] {
    display: none;
}

.search-suggest .search-type {
    float: none;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6a6a6a;
}

.search-suggest .view-all {
    float: none;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
}

.search-suggest .view-all a {
    color: #e33e26;
    text-decoration: none;
    transition: color 0.15s ease;
}

.search-suggest .view-all a:hover,
.search-suggest .view-all a:focus {
    color: #c9341f;
    text-decoration: underline;
}

.search-suggest .search-body > a {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}

.search-suggest .search-body > a:hover,
.search-suggest .search-body > a:focus {
    background: #fafafa;
}

.search-suggest .ssi-holder {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

.search-suggest .search-body > a:last-child .ssi-holder,
.search-suggest .search-body > a:has(+ .view-all-item-holder) .ssi-holder {
    border-bottom: none;
}

.search-suggest .ssi-left {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    float: none;
    text-align: center;
}

.search-suggest .ssi-left img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    background: #f2f2f2;
}

.search-suggest .products-container .ssi-left img {
    border-radius: 10px;
    object-fit: cover;
}

.search-suggest .ssi-right {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    float: none;
    padding-right: 56px;
    box-sizing: border-box;
}

.search-suggest .ssi-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #131313;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-suggest .ssi-desc {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    color: #6a6a6a;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-suggest .ssi-info {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #e33e26;
    text-transform: none;
}

.search-suggest .ssi-price {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #ff7e34;
    white-space: nowrap;
}

.search-suggest .view-all-item-holder {
    min-height: 0;
    padding: 4px 14px 10px;
    box-sizing: border-box;
}

.search-suggest .view-all-item {
    display: block;
    padding: 10px 12px;
    border-radius: 9999px;
    background: #f5f5f5;
    color: #e33e26;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.search-suggest .view-all-item:hover,
.search-suggest .view-all-item:focus {
    background: #eee;
    color: #c9341f;
}

body.restaurants-store-page.store-detail-scrolled .search-input-holder .listSelect.search-suggest-holder {
    z-index: 500;
}

/* SEARCH SUGGEST 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%;
    padding-bottom: 24px;
}

/* 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: stretch;
    width: 100%;
    box-sizing: border-box;
}

.listStoresBox .storeItem {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    min-width: 0;
    height: 100%;
    container-type: inline-size;
    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;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: inherit;
    box-sizing: border-box;
    position: relative;
    container-type: inline-size;
    --store-box-logo-size: clamp(64px, 17vw, 92px);
    --store-box-header-height: 48cqw;
    --store-box-name-min-height: calc(var(--store-box-logo-size) * 0.5 + 8px + 2.4em + 4px);
}

/* Top: cover image — height tied to card width (48% of width), grows independently of content */
.listStoresBox a.storeItem .store-item-header-photo {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 25 / 12;
    height: auto;
    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 — fixed min slot for 2 lines; grows only when row is taller */
.listStoresBox a.storeItem .store-item-name {
    flex: 1 1 auto;
    flex-shrink: 0;
    min-height: var(--store-box-name-min-height);
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: calc(var(--store-box-logo-size) * 0.5 + 8px) 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;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Min cart + hours — pinned above bottom strip, aligned across grid row */
.listStoresBox a.storeItem .store-item-detail {
    position: relative;
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-top: 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;
}

.listStoresBox a.storeItem .store-item-wrapper:not(:has(.store-item-info-message)) .store-item-detail {
    padding-bottom: 6px;
}

/* Bottom strip — reserve same height on every card so detail rows align */
.listStoresBox a.storeItem .store-item-info {
    display: flex;
    flex: 0 0 auto;
    flex-shrink: 0;
    align-self: stretch;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0;
    color: #fff;
}

.listStoresBox a.storeItem .store-item-info:not(:has(.store-item-info-message)) {
    visibility: hidden;
    pointer-events: none;
}

.listStoresBox a.storeItem .store-item-info:has(.store-item-info-message) {
    visibility: visible;
    pointer-events: auto;
    flex-direction: column;
    margin-top: 0;
    min-height: 48px;
    max-height: none;
}

.listStoresBox a.storeItem .store-item-info .store-item-info-message {
    width: 100%;
    height: auto;
    min-height: 48px;
    box-sizing: border-box;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 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: 0 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-height, 48cqw);
    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-height, 48cqw);
    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: layered header — store info overlaps header-box-bottom on shared gray band */
.content:has(.storeWrapper) {
    position: relative;
}

.content:has(.storeWrapper) .header-box {
    position: relative;
    background-color: #F1F1F1;
    background-image: url('../../images/store_theme/header_bg.svg');
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
}

.content:has(.storeWrapper) .header-box > .container {
    position: relative;
    height: 100%;
}

.content:has(.storeWrapper) .header-box-top {
    position: relative;
    z-index: 10;
    background: transparent;
}

/* eeating logo — bottom-left of red band (design: store_detail_page.png) */
body.restaurants-store-page .content:has(.storeWrapper) .header-box-top .site-logo {
    position: absolute;
    left: 15%;
    bottom: 16px;
    z-index: 2;
    max-width: min(200px, 22vw);
    margin: 0;
    padding: 0;
}

body.restaurants-store-page .content:has(.storeWrapper) .header-box-top .site-logo a.site-logo {
    display: block;
    line-height: 0;
}

body.restaurants-store-page .content:has(.storeWrapper) .header-box-top .site-logo img {
    display: block;
    width: auto;
    height: auto;
    max-height: 42px;
    max-width: 100%;
}

.content:has(.storeWrapper) .storeBox {
    position: relative;
    z-index: 5;
}

.content:has(.storeWrapper) .store-header-holder {
    padding-top: 8px;
    padding-bottom: 6px;
}

.content:has(.storeWrapper) .store-header-holder .store-header-second {
    padding-top: 42px;
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box {
    z-index: 112;
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .storeBox {
    z-index: auto;
}

body.restaurants-store-page.store-detail-scrolled .storeWrapper .storeContent {
    position: relative;
    z-index: 1;
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder {
    position: relative;
    /* Above content ::after backdrop (100), below header-box controls (112) */
    z-index: 107;
    isolation: isolate;
}

/* Opaque white backdrop for toolbar + categories (inside storeBox stacking) */
body.restaurants-store-page.store-detail-scrolled .store-header-holder::before {
    content: '';
    position: fixed;
    top: var(--store-detail-red-bar-height);
    left: 0;
    right: 0;
    height: var(--store-detail-toolbar-height);
    background: #fff;
    z-index: 104;
    pointer-events: none;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder:has(.store-header-fourth)::before {
    height: calc(var(--store-detail-toolbar-height) + var(--store-detail-categories-bar-height));
}

.content:has(.storeWrapper) .header-box-bottom {
    position: relative;
    padding-bottom: 44px;
    z-index: auto;
    pointer-events: none;
    background: transparent;
}

.content:has(.storeWrapper) .header-box-bottom .location-box-holder {
    top: -35px;
    right: 15%;
    left: auto;
    width: auto;
    max-width: min(560px, 42vw);
    margin: 0;
    padding: 0 0 10px;
    z-index: 35;
    pointer-events: auto;
}

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

.content:has(.storeWrapper) .store-header-holder .store-header-third {
    clear: both;
    z-index: 1;
}

@media (min-width: 768px) {
    .content:has(.storeWrapper) .store-header-holder .store-header-third {
        margin-top: 8px;
    }
}

@media (max-width: 767px) {
    .store-header-holder .store-header-second {
        padding-bottom: 18px;
    }

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

.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 (full width under fixed controls) */
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 .content:has(.storeWrapper):has(.store-header-fourth)::after {
    height: calc(var(--store-detail-toolbar-height) + var(--store-detail-categories-bar-height));
}

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 {
    height: 0;
    min-height: 0;
    margin-bottom: 0;
    padding: 0;
    overflow: visible;
}

body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-top,
body.restaurants-store-page.store-detail-scrolled .content:has(.storeWrapper) .header-box-bottom {
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
}

/* --- 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 .mini-cart,
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);
}

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 .mini-cart {
    background: rgba(255, 255, 255, 0.14);
}

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

/* --- 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;
    background: #fff;
    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: 120;
    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;
    background: #fff;
    border-bottom: 0;
    pointer-events: auto;
}

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: 110;
    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;
}

.store-header-holder .store-header-primer {
    order: 1;
}

.store-header-holder .store-header-second {
    order: 2;
}

.store-header-holder .store-header-third {
    order: 3;
}

.store-header-holder .store-header-fourth {
    order: 4;
}

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

.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;
    margin-top: 2px;
    margin-bottom: 4px;
    text-align: justify;
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.store-header-holder .store-header-second .favoriteStore {
    grid-column: 2 / 3;
    justify-self: end;
    align-self: start;
}

.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: center;
    flex-wrap: nowrap;
    gap: 18px;
    flex: 1 1 50%;
    max-width: 50%;
    min-width: 0;
    box-sizing: border-box;
    padding-right: 12px;
}

.store-header-holder .store-header-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    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;
    display: flex;
    align-items: center;
    justify-content: center;
    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;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* 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;
        flex: 1 1 100%;
        max-width: 100%;
        padding-right: 0;
    }

    .store-header-holder .store-header-second {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .store-header-holder .store-header-third {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
        padding-top: 4px;
    }

    .store-header-holder .store-product-type-selector {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .store-product-type-selector-holder,
    .store-product-type-selector-holder .boxInner {
        width: 100%;
        max-width: 100%;
    }

    .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: 0 0 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 2px 0 10px;
    margin-top: 0;
    border-bottom: 1px solid #e5e5e8;
    position: relative;
    z-index: 2;
}

.store-header-holder .store-header-third--checkout {
    justify-content: flex-end;
}

/* Product type selector — inline with toolbar pills (right-aligned group) */
.store-header-holder .store-product-type-selector {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: 240px;
    margin: 0;
    order: 0;
}

.store-product-type-selector-holder {
    position: relative;
    width: auto;
    min-width: 150px;
    max-width: 240px;
    box-sizing: border-box;
}

.store-product-type-selector-holder .boxInner {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 40px;
    width: auto;
    min-width: 150px;
    max-width: 240px;
    background: #fff;
    border: 1px solid #d1d1d6;
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    padding: 0 40px 0 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.store-product-type-selector-holder .boxInner:hover {
    border-color: #b8b8bd;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}

.store-product-type-selector-holder .boxInner a.storeProductTypeSelectBtn,
.store-product-type-selector-holder .boxInner a.storeProductTypeSelectBtn:hover,
.store-product-type-selector-holder .boxInner a.storeProductTypeSelectBtn:focus {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 10px 0;
    color: #1a1a1a;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
}

.store-product-type-selector-holder .boxInner .store-product-type-selector-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent url('../../images/arrow_header.svg') no-repeat center;
    background-size: 12px 10px;
    filter: brightness(0) opacity(0.45);
    transform: translateY(-50%);
    cursor: pointer;
    flex-shrink: 0;
}

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

.store-product-type-selector-holder .listSelect.selectProductType {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto !important;
    max-width: none;
    max-height: 320px;
    margin: 0;
    margin-top: 8px;
    padding: 0;
    z-index: 210;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
    box-sizing: border-box;
    overflow: hidden;
}

.store-product-type-selector-holder .listSelect.selectProductType .listSelectInner {
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;
    -webkit-overflow-scrolling: touch;
}

.store-product-type-selector-holder .listSelect.selectProductType ul.store-product-type-select-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.store-product-type-selector-holder .listSelect.selectProductType ul.store-product-type-select-list li {
    margin: 0;
    padding: 0;
}

.store-product-type-selector-holder .listSelect.selectProductType ul.store-product-type-select-list li a {
    display: block;
    padding: 10px 16px;
    color: #757575;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-product-type-selector-holder .listSelect.selectProductType ul.store-product-type-select-list li a:hover,
.store-product-type-selector-holder .listSelect.selectProductType ul.store-product-type-select-list li a:focus-visible {
    background: #f5f5f7;
    color: #e4512e;
    outline: none;
}

.store-product-type-selector-holder .listSelect.selectProductType ul.store-product-type-select-list li a.active {
    color: #e4512e;
    font-weight: 700;
}

.store-product-type-selector-holder .listSelect.selectProductType .arrowUp,
.store-product-type-selector-holder .listSelect.selectProductType .arrowDown {
    display: none;
}

body.restaurants-store-page.store-detail-scrolled .store-header-holder .store-product-type-selector {
    flex: 0 0 auto;
    max-width: 220px;
    margin: 0;
}

body.restaurants-store-page.store-detail-scrolled .store-product-type-selector-holder .boxInner {
    min-height: 36px;
    padding-right: 38px;
}

body.restaurants-store-page.store-detail-scrolled .store-product-type-selector-holder .boxInner a.storeProductTypeSelectBtn,
body.restaurants-store-page.store-detail-scrolled .store-product-type-selector-holder .boxInner a.storeProductTypeSelectBtn:hover,
body.restaurants-store-page.store-detail-scrolled .store-product-type-selector-holder .boxInner a.storeProductTypeSelectBtn:focus {
    padding: 8px 0;
    font-size: 11px;
}


/* 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;
    flex: 0 0 auto;
    order: 1;
    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
   Body: .restaurants-checkout-page
   ------------------------------------------------------------------------- */

body.restaurants-checkout-page {
    --checkout-font: Roboto, system-ui, -apple-system, sans-serif;
    --checkout-page-bg: #f0f0f0;
    --checkout-card-bg: #ffffff;
    --checkout-card-radius: 16px;
    --checkout-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    --checkout-accent: #e33e26;
    --checkout-accent-hover: #c93620;
    --checkout-text: #1a1a1a;
    --checkout-muted: #6b6b6b;
    --checkout-border: #d4d4d4;
    --checkout-input-radius: 8px;
    --checkout-option-radius: 10px;
    --checkout-max-width: 1120px;
}

body.restaurants-checkout-page #wrapper,
body.restaurants-checkout-page .content {
    background-color: var(--checkout-page-bg);
}

body.restaurants-checkout-page .storeBox.container {
    padding-top: 0;
    padding-bottom: 48px;
}

body.restaurants-checkout-page .storeWrapper {
    width: 100%;
    max-width: none;
    margin: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
}

body.restaurants-checkout-page .storeContent.container {
    width: 100%;
    max-width: var(--checkout-max-width);
    margin: 0 auto;
    padding: 24px 16px 0;
    box-sizing: border-box;
    float: none;
}

body.restaurants-checkout-page .checkoutMessageWrap {
    margin: 0 0 16px !important;
}

body.restaurants-checkout-page .checkoutWrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    float: none;
}

/* --- Order summary (cart) --- */
body.restaurants-checkout-page .orderWrap {
    float: none;
    width: 100%;
    margin: 0;
    padding: 28px 32px;
    background: var(--checkout-card-bg);
    border-radius: var(--checkout-card-radius);
    box-shadow: var(--checkout-card-shadow);
    box-sizing: border-box;
}

body.restaurants-checkout-page .orderWrap h1 {
    margin: 0 0 20px;
    padding: 0;
    background: transparent;
    font-family: var(--checkout-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--checkout-text);
    height: auto;
}

body.restaurants-checkout-page .orderWrap .order-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px 20px;
    margin: 0 0 8px;
    padding: 14px 16px;
    background: #f8f8f8;
    border-radius: var(--checkout-input-radius);
    font-size: 15px;
    line-height: 1.4;
    min-height: 0;
}

body.restaurants-checkout-page .orderWrap .order-item .product-name-extras,
body.restaurants-checkout-page .orderWrap .order-item .o-product-name {
    float: none;
    width: auto;
    margin: 0;
    overflow: visible;
}

body.restaurants-checkout-page .orderWrap .order-item .o-product-name div {
    font-family: var(--checkout-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--checkout-text);
}

body.restaurants-checkout-page .orderWrap .order-item .o-product-extras {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--checkout-muted);
    font-family: var(--checkout-font);
}

body.restaurants-checkout-page .orderWrap .order-item .o-product-note {
    margin-top: 6px;
    font-size: 12px;
    font-style: italic;
    color: var(--checkout-muted);
}

body.restaurants-checkout-page .orderWrap .order-item .o-qty {
    float: none;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.restaurants-checkout-page .orderWrap .order-item .o-qty button {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    cursor: pointer;
}

body.restaurants-checkout-page .orderWrap .o-qty-btn-minus {
    background-image: url('../../images/order_qty_minus_26x26.png');
}

body.restaurants-checkout-page .orderWrap .order-item .o-remove-item-btn.o-qty-btn-minus {
    background-image: url('../../images/trash26x26.png');
}

body.restaurants-checkout-page .orderWrap .o-qty-btn-plus {
    background-image: url('../../images/order_qty_plus_26x26.png');
}

body.restaurants-checkout-page .orderWrap .order-item .o-qty span.o-nr-of-qty {
    padding: 0 4px;
    font-family: var(--checkout-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--checkout-text);
}

body.restaurants-checkout-page .orderWrap .order-item .o-product-price {
    float: none;
    width: auto;
    min-width: 72px;
    text-align: right;
    font-family: var(--checkout-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--checkout-accent);
    text-transform: none;
}

body.restaurants-checkout-page .orderWrap .order-item .clear {
    display: none;
}

/* --- Gift product row (checkout cart) --- */
body.restaurants-checkout-page .orderWrap .order-item.o-gift-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 16px;
    position: relative;
    min-height: 88px;
}

body.restaurants-checkout-page .orderWrap .gift-product-img-holder {
    position: static;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}

body.restaurants-checkout-page .orderWrap .gift-product-img-holder img {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--checkout-input-radius);
    background: #ffffff;
}

body.restaurants-checkout-page .orderWrap .gift-product-name-holder {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    margin: 0;
    font-family: var(--checkout-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--checkout-text);
}

body.restaurants-checkout-page .orderWrap .gif-product-add-btn {
    position: static;
    top: auto;
    right: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    max-width: 240px;
    min-height: 44px;
    margin: 0;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--checkout-input-radius);
    font-family: var(--checkout-font);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.03em;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    cursor: pointer;
    transition: background-color 0.18s ease, opacity 0.18s ease;
}

body.restaurants-checkout-page .orderWrap .gif-product-add-btn.gift-available {
    background: var(--checkout-accent);
    color: #ffffff;
}

body.restaurants-checkout-page .orderWrap .gif-product-add-btn.gift-available:hover {
    background: var(--checkout-accent-hover);
}

body.restaurants-checkout-page .orderWrap .gif-product-add-btn.gift-available:active {
    opacity: 0.92;
}

body.restaurants-checkout-page .orderWrap .gif-product-add-btn.gift-not-available {
    background: #ececec;
    color: var(--checkout-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    cursor: default;
    max-width: 280px;
}

/* --- Checkout form card --- */
body.restaurants-checkout-page .checkoutFormWrap {
    float: none;
    width: 100%;
    margin: 0;
    padding: 28px 32px 32px;
    background: var(--checkout-card-bg);
    border-radius: var(--checkout-card-radius);
    box-shadow: var(--checkout-card-shadow);
    box-sizing: border-box;
}

body.restaurants-checkout-page .checkoutFormWrap .orderForm {
    display: flex;
    flex-direction: column;
    gap: 0;
}

body.restaurants-checkout-page .checkout-form__section-title,
body.restaurants-checkout-page .checkoutFormWrap h1 {
    margin: 0 0 20px;
    padding: 0;
    background: transparent;
    font-family: var(--checkout-font);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--checkout-text);
    min-height: 0;
    overflow: visible;
}

body.restaurants-checkout-page .checkoutFormWrap h1.checkout-form__section-title {
    margin-top: 8px;
}

body.restaurants-checkout-page .checkoutFormWrap h1.checkout-form__section-title:first-child {
    margin-top: 0;
}

/* --- Preorder --- */
body.restaurants-checkout-page .preorderWrap {
    margin-bottom: 28px;
}

body.restaurants-checkout-page .preorder-days {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.restaurants-checkout-page .preorder-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 1px solid var(--checkout-border);
    border-radius: var(--checkout-input-radius);
    background: #ffffff;
    color: var(--checkout-muted);
    font-family: var(--checkout-font);
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

body.restaurants-checkout-page .preorder-box.selected {
    background: #8e8e8e;
    border-color: #8e8e8e;
    color: #ffffff;
}

body.restaurants-checkout-page .preorder-box .preorder-day-name {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;
}

body.restaurants-checkout-page .preorder-box .preorder-day-date {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

body.restaurants-checkout-page .preorderWrap .preorder-hours {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

body.restaurants-checkout-page .preorderWrap .preorder-hour {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--checkout-border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--checkout-muted);
    font-family: var(--checkout-font);
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

body.restaurants-checkout-page .preorderWrap .preorder-hour.selected {
    background: #8e8e8e;
    border-color: #8e8e8e;
    color: #ffffff;
}

body.restaurants-checkout-page .preorderWrap .preorder-hour .hour-h,
body.restaurants-checkout-page .preorderWrap .preorder-hour .hour-m {
    display: inline;
    margin: 0;
    font-size: inherit;
}

/* --- Two-column form layout --- */
body.restaurants-checkout-page .checkout-form__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px 40px;
    align-items: start;
}

body.restaurants-checkout-page .checkout-form__col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

body.restaurants-checkout-page .checkoutFormWrap label.semibold {
    display: block;
    margin: 0 0 8px;
    font-family: var(--checkout-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--checkout-text);
    height: auto;
}

body.restaurants-checkout-page .checkoutFormWrap label span.hint {
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    color: var(--checkout-muted);
}

body.restaurants-checkout-page .checkoutFormWrap .checkout-required {
    color: var(--checkout-accent);
    font-weight: 700;
}

/* --- Inputs --- */
body.restaurants-checkout-page .checkoutFormWrap .emailWrap,
body.restaurants-checkout-page .checkoutFormWrap .phoneWrap {
    position: relative;
    margin: 0;
}

body.restaurants-checkout-page .checkoutFormWrap .emailWrap input,
body.restaurants-checkout-page .checkoutFormWrap .phoneWrap input,
body.restaurants-checkout-page .checkoutFormWrap .phone-field .iti input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--checkout-border);
    border-radius: var(--checkout-input-radius);
    background: #ffffff;
    font-family: var(--checkout-font);
    font-size: 15px;
    line-height: 1.3;
    color: var(--checkout-text);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

body.restaurants-checkout-page .checkoutFormWrap .phone-field .iti {
    width: 100%;
}

body.restaurants-checkout-page .checkoutFormWrap .phone-field .iti input {
    padding-left: 52px;
}

body.restaurants-checkout-page .checkoutFormWrap .emailWrap input:focus,
body.restaurants-checkout-page .checkoutFormWrap .phoneWrap input:focus,
body.restaurants-checkout-page .checkoutFormWrap .messageWrap textarea:focus,
body.restaurants-checkout-page .checkoutFormWrap .fidelityWrap input:focus {
    border-color: #b8b8b8;
    box-shadow: 0 0 0 3px rgba(227, 62, 38, 0.08);
}

body.restaurants-checkout-page .checkoutFormWrap .messageWrap textarea,
body.restaurants-checkout-page .checkoutFormWrap .fidelityWrap input {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--checkout-border);
    border-radius: var(--checkout-input-radius);
    background: #ffffff;
    font-family: var(--checkout-font);
    font-size: 15px;
    line-height: 1.45;
    color: var(--checkout-text);
    outline: none;
    resize: vertical;
}

body.restaurants-checkout-page .checkoutFormWrap .messageWrap textarea {
    min-height: 220px;
}

body.restaurants-checkout-page .orderForm .emailWrap .confirmed,
body.restaurants-checkout-page .orderForm .phoneWrap .confirmed {
    position: absolute;
    right: 12px;
    top: calc(8px + 15px * 1.3 + 22px);
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    margin: 0;
}

body.restaurants-checkout-page .orderForm .emailWrap .confirmed.isConfirmed,
body.restaurants-checkout-page .orderForm .phoneWrap .confirmed.isConfirmed {
    background: url('../../images/confirmed.png') no-repeat center;
    background-size: contain;
}

body.restaurants-checkout-page .orderForm .emailWrap .confirmed.notConfirmed,
body.restaurants-checkout-page .orderForm .phoneWrap .confirmed.notConfirmed {
    background: url('../../images/not_confirmed.png') no-repeat center;
    background-size: contain;
}

body.restaurants-checkout-page .checkoutFormWrap .verify-btn {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--checkout-accent);
    cursor: pointer;
}

/* --- Address / payment / delivery option cards --- */
body.restaurants-checkout-page .checkoutFormWrap .addressWrap,
body.restaurants-checkout-page .checkoutFormWrap .messageWrap,
body.restaurants-checkout-page .checkoutFormWrap .paymentMethodWrap,
body.restaurants-checkout-page .checkoutFormWrap .deliveryMethodWrap,
body.restaurants-checkout-page .checkoutFormWrap .fidelityWrap,
body.restaurants-checkout-page .checkoutFormWrap .couponWrap,
body.restaurants-checkout-page .checkoutFormWrap .couponFormWrap,
body.restaurants-checkout-page .checkoutFormWrap .terms-and-conditions-wrapper {
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--checkout-text);
    line-height: normal;
}

body.restaurants-checkout-page .checkoutFormWrap .address_list,
body.restaurants-checkout-page .checkoutFormWrap .delivery_list,
body.restaurants-checkout-page .checkoutFormWrap .payment_list {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.restaurants-checkout-page .checkoutFormWrap .address_list .checkbox-field,
body.restaurants-checkout-page .checkoutFormWrap .delivery_list .checkbox-field,
body.restaurants-checkout-page .checkoutFormWrap .payment_list .checkbox-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    padding: 14px 16px;
    border: 1px solid var(--checkout-border);
    border-radius: var(--checkout-option-radius);
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

body.restaurants-checkout-page .checkoutFormWrap .address_list .checkbox-field:hover,
body.restaurants-checkout-page .checkoutFormWrap .delivery_list .checkbox-field:hover,
body.restaurants-checkout-page .checkoutFormWrap .payment_list .checkbox-field:hover {
    border-color: #b8b8b8;
}

body.restaurants-checkout-page .checkoutFormWrap .address_list .checkbox-field.selected,
body.restaurants-checkout-page .checkoutFormWrap .delivery_list .checkbox-field.selected,
body.restaurants-checkout-page .checkoutFormWrap .payment_list .checkbox-field.selected {
    border-color: var(--checkout-accent);
    box-shadow: 0 0 0 1px rgba(227, 62, 38, 0.12);
    background: #ffffff;
}

body.restaurants-checkout-page .checkoutFormWrap .address_list .checkbox-field.selected span,
body.restaurants-checkout-page .checkoutFormWrap .delivery_list .checkbox-field.selected span,
body.restaurants-checkout-page .checkoutFormWrap .payment_list .checkbox-field.selected span {
    color: var(--checkout-text);
}

body.restaurants-checkout-page .checkoutFormWrap .address_list .checkbox-field input,
body.restaurants-checkout-page .checkoutFormWrap .delivery_list .checkbox-field input,
body.restaurants-checkout-page .checkoutFormWrap .payment_list .checkbox-field input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--checkout-accent);
}

body.restaurants-checkout-page .checkoutFormWrap .address_list .checkbox-field span,
body.restaurants-checkout-page .checkoutFormWrap .delivery_list .checkbox-field span,
body.restaurants-checkout-page .checkoutFormWrap .payment_list .checkbox-field span {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--checkout-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--checkout-text);
}

body.restaurants-checkout-page .checkoutFormWrap .delivery_list .deliveryMethods,
body.restaurants-checkout-page .checkoutFormWrap .delivery_list .deliveryMethod,
body.restaurants-checkout-page .checkoutFormWrap .payment_list .paymentMethod {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body.restaurants-checkout-page .checkoutFormWrap #checkout-add-new-address,
body.restaurants-checkout-page .checkoutFormWrap .checkout-add-address-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    margin: 10px 0 0;
    padding: 10px 18px;
    border: none;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
    color: var(--checkout-accent);
    font-family: var(--checkout-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: box-shadow 0.18s ease, opacity 0.18s ease;
}

body.restaurants-checkout-page .checkoutFormWrap #checkout-add-new-address:hover,
body.restaurants-checkout-page .checkoutFormWrap .checkout-add-address-btn:hover {
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.12);
    color: var(--checkout-accent);
    opacity: 0.92;
}

body.restaurants-checkout-page .checkoutFormWrap .checkout-add-address-btn__icon {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

body.restaurants-checkout-page .checkoutFormWrap .checkout-add-address-btn__label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Discount code field (left column) --- */
body.restaurants-checkout-page .checkoutFormWrap .couponFormWrap {
    display: inline-flex;
    align-items: stretch;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--checkout-accent);
    border-radius: var(--checkout-input-radius);
    background: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
    float: none;
}

body.restaurants-checkout-page .checkoutFormWrap .couponFormWrap input.couponInput {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    color: var(--checkout-text);
    font-family: var(--checkout-font);
    font-size: 14px;
    line-height: 1.3;
    text-transform: none;
    outline: none;
    box-sizing: border-box;
    float: none;
    display: block;
}

body.restaurants-checkout-page .checkoutFormWrap .couponFormWrap input.couponInput::placeholder {
    color: var(--checkout-accent);
    opacity: 0.85;
}

body.restaurants-checkout-page .checkoutFormWrap .couponFormWrap a.applyCoupon,
body.restaurants-checkout-page .checkoutFormWrap .couponFormWrap a.cancelCoupon {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0;
    background: var(--checkout-accent);
    color: #ffffff;
    font-family: var(--checkout-font);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    text-transform: uppercase;
    box-sizing: border-box;
    float: none;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.18s ease, opacity 0.18s ease;
}

body.restaurants-checkout-page .checkoutFormWrap .couponFormWrap a.applyCoupon:hover,
body.restaurants-checkout-page .checkoutFormWrap .couponFormWrap a.cancelCoupon:hover {
    background: var(--checkout-accent-hover);
}

body.restaurants-checkout-page .checkoutFormWrap .couponFormWrap a.applyCoupon:active,
body.restaurants-checkout-page .checkoutFormWrap .couponFormWrap a.cancelCoupon:active {
    opacity: 0.92;
}

body.restaurants-checkout-page .checkoutFormWrap .couponFormWrap.enableApply a.applyCoupon,
body.restaurants-checkout-page .checkoutFormWrap .couponFormWrap.enableCancel a.cancelCoupon {
    display: inline-flex;
}

/* --- Coupons trigger + panel --- */
body.restaurants-checkout-page .checkout-coupons-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--checkout-accent);
    border-radius: var(--checkout-input-radius);
    background: #ffffff;
    color: var(--checkout-accent);
    font-family: var(--checkout-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

body.restaurants-checkout-page .checkout-coupons-trigger:hover,
body.restaurants-checkout-page .checkout-coupons-trigger[aria-expanded="true"] {
    background: rgba(227, 62, 38, 0.06);
}

body.restaurants-checkout-page .checkout-coupons-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

body.restaurants-checkout-page .checkout-coupons-panel[hidden] {
    display: none !important;
}

/* Coupon ticket cards */
body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card {
    position: relative;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: stretch;
    min-height: 132px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(145deg, #e33e26 0%, #c93620 100%);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(227, 62, 38, 0.18);
    box-sizing: border-box;
    overflow: hidden;
}

body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card::before,
body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card::after {
    content: '';
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--checkout-card-bg);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card::before {
    left: -7px;
}

body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card::after {
    right: -7px;
}

body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card__aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 10px;
    border-right: 2px dashed rgba(255, 255, 255, 0.45);
    box-sizing: border-box;
}

body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card__logo {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background-color: #ffffff;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card__value {
    font-family: var(--checkout-font);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    color: #ffffff;
}

body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    padding: 14px 16px 12px;
    box-sizing: border-box;
}

body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card .coupon-store-name {
    margin: 0 0 4px;
    font-family: var(--checkout-font);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}

body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card .coupon-label {
    margin: 0 0 6px;
    font-family: var(--checkout-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.88);
}

body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card__code {
    display: inline-flex;
    align-self: flex-start;
    margin: 0 0 8px;
    padding: 5px 10px;
    border: 1px dashed rgba(255, 255, 255, 0.65);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    font-family: var(--checkout-font);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
}

body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card .coupon-expiration,
body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card .coupon-usage {
    font-family: var(--checkout-font);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.82);
}

body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card__apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: auto;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    background: #ffffff;
    color: var(--checkout-accent);
    font-family: var(--checkout-font);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card__apply:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: #ffffff;
    color: var(--checkout-accent-hover);
}

/* --- Fidelity --- */
body.restaurants-checkout-page .checkoutFormWrap .available-fidelity-bonus-points {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--checkout-muted);
}

body.restaurants-checkout-page .checkoutFormWrap .fidelity-input-container {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: stretch;
}

body.restaurants-checkout-page .checkoutFormWrap .fidelity-input-container input {
    flex: 1 1 auto;
    height: 44px;
}

body.restaurants-checkout-page .checkoutFormWrap .fidelity-use-bonus-points-btn {
    position: static;
    flex: 0 0 auto;
    width: auto;
    min-width: 100px;
    margin: 0;
    padding: 10px 16px;
    border: 0;
    border-radius: var(--checkout-input-radius);
    background: rgba(227, 62, 38, 0.12);
    color: var(--checkout-accent);
    font-family: var(--checkout-font);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

/* --- Google / Apple Pay badges --- */
body.restaurants-checkout-page .checkoutFormWrap .paymentMethodWrap .paymentMethod.paymentMethod-google_pay,
body.restaurants-checkout-page .checkoutFormWrap .paymentMethodWrap .paymentMethod.paymentMethod-apple_pay {
    position: relative;
}

body.restaurants-checkout-page .checkoutFormWrap .paymentMethodWrap .paymentMethod .google-payment-ic,
body.restaurants-checkout-page .checkoutFormWrap .paymentMethodWrap .paymentMethod .apple-payment-ic {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 78px;
    height: 30px;
    padding: 5px 10px;
    border: 1px solid #ececec;
    border-radius: 6px;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
    pointer-events: none;
}

body.restaurants-checkout-page .checkoutFormWrap .paymentMethodWrap .paymentMethod .google-payment-ic {
    background-image: url('../../images/payments/google_pay.svg');
}

body.restaurants-checkout-page .checkoutFormWrap .paymentMethodWrap .paymentMethod .apple-payment-ic {
    background-image: url('../../images/payments/apple_pay.svg');
}

body.restaurants-checkout-page .checkoutFormWrap .paymentMethodWrap .paymentMethod.paymentMethod-google_pay .payment-method-checkbox,
body.restaurants-checkout-page .checkoutFormWrap .paymentMethodWrap .paymentMethod.paymentMethod-apple_pay .payment-method-checkbox {
    padding-right: 96px;
}

body.restaurants-checkout-page .checkoutFormWrap .paymentMethod #online_card_payment_options {
    margin: 12px 0 0;
    padding: 16px;
    border: 1px solid #ececec;
    border-radius: var(--checkout-input-radius);
    background: #f8f8f8;
}

body.restaurants-checkout-page .checkoutFormWrap .paymentMethod #online_card_payment_options > div,
body.restaurants-checkout-page .checkoutFormWrap .paymentMethod #online_card_payment_options > label {
    margin: 0 0 12px;
}

body.restaurants-checkout-page .checkoutFormWrap .paymentMethod #online_card_payment_options label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--checkout-font);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--checkout-text);
    cursor: pointer;
}

body.restaurants-checkout-page .checkoutFormWrap .paymentMethod #online_card_payment_options label[for="leave_packet_before_door"] {
    color: var(--checkout-accent);
}

body.restaurants-checkout-page .checkoutFormWrap .paymentMethod #online_card_payment_options .oneClickPay {
    display: block;
    margin: 0 0 14px;
    font-family: var(--checkout-font);
    font-size: 14px;
    line-height: 1.45;
    color: var(--checkout-text);
}

body.restaurants-checkout-page .checkoutFormWrap .paymentMethod #online_card_payment_options .oneClickPay a {
    color: var(--checkout-accent);
    font-weight: 600;
    text-decoration: underline;
}

body.restaurants-checkout-page .checkoutFormWrap .paymentMethod #online_card_payment_options input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--checkout-accent);
}

/* Saved cards — credit card layout */
body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin: 4px 0 14px;
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 168px;
    width: 100%;
    max-width: 340px;
    margin: 0;
    padding: 18px 18px 16px;
    border: 2px solid transparent;
    border-radius: 16px;
    background: linear-gradient(145deg, #2a2a2c 0%, #1a1a1c 58%, #3d3d3f 100%);
    color: #ffffff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    transform: translate(35%, -35%);
    pointer-events: none;
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card:has(.card-type-Visa) {
    background: linear-gradient(145deg, #1a1f71 0%, #253aa8 52%, #4f6fe6 100%);
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card:has(.card-type-Mastercard) {
    background: linear-gradient(145deg, #1a1a1c 0%, #4a4a4a 42%, #e33e26 125%);
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card.selected {
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 3px rgba(227, 62, 38, 0.35), 0 12px 30px rgba(0, 0, 0, 0.2);
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card .customer-card-radio {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    width: auto;
    margin: 0;
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card .customer-card-radio input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #ffffff;
    cursor: pointer;
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card .customer-card-mask {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    margin: 34px 0 0;
    padding-right: 58px;
    font-family: var(--checkout-font);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.1em;
    color: #ffffff;
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card .customer-card-mask.card-type-Visa::after,
body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card .customer-card-mask.card-type-Mastercard::after {
    content: '';
    position: absolute;
    top: -30px;
    right: 0;
    left: auto;
    width: 52px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card .customer-card-mask.card-type-Visa::after {
    background-image: url('../../images/card-visa-logo.png');
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card .customer-card-mask.card-type-Mastercard::after {
    width: 44px;
    background-image: url('../../images/card-mastercard-logo.png');
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card .customer-card-expiration {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    margin-top: 14px;
    font-family: var(--checkout-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.82);
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card .customer-card-options {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: auto;
    left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card .customer-card-updated-at {
    display: none;
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card .customer-card-status {
    position: static;
    top: auto;
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: auto;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--checkout-font);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card .customer-card-status-active {
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card .customer-card-status-expired {
    border: 1px solid rgba(255, 200, 200, 0.8);
    background: rgba(0, 0, 0, 0.2);
    color: #ffd5d5;
}

body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card:not(:has(.customer-card-status-active)) {
    opacity: 0.72;
}

/* --- Footer bar --- */
body.restaurants-checkout-page .checkoutFooter {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px 24px;
    position: static;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 18px 24px;
    border-radius: var(--checkout-card-radius);
    background: var(--checkout-card-bg);
    box-shadow: var(--checkout-card-shadow);
    box-sizing: border-box;
    line-height: normal;
}

body.restaurants-checkout-page .checkoutFooter .totalWrap {
    position: static;
    grid-column: 2;
    justify-self: center;
    flex: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    font-family: var(--checkout-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--checkout-text);
    text-align: center;
    text-transform: uppercase;
}

body.restaurants-checkout-page .checkoutFooter .totalWrap .total,
body.restaurants-checkout-page .checkoutFooter .totalWrap .curency {
    color: var(--checkout-accent);
    font-weight: 700;
}

body.restaurants-checkout-page .checkoutFooter a.sendOrderBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static;
    grid-column: 3;
    justify-self: end;
    flex: 0 0 auto;
    min-width: 200px;
    height: auto;
    min-height: 46px;
    margin: 0;
    padding: 12px 28px;
    border: 0;
    border-radius: var(--checkout-input-radius);
    background: var(--checkout-accent);
    color: #ffffff;
    font-family: var(--checkout-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

body.restaurants-checkout-page .checkoutFooter a.sendOrderBtn:hover {
    background: var(--checkout-accent-hover);
    color: #ffffff;
}

/* --- Guest checkout --- */
body.restaurants-checkout-page .checkout_no_user {
    width: 100%;
    padding: 32px;
    border-radius: var(--checkout-card-radius);
    background: var(--checkout-card-bg);
    box-shadow: var(--checkout-card-shadow);
    box-sizing: border-box;
}

body.restaurants-checkout-page .checkout_no_user h3 {
    margin: 0 0 20px;
    font-family: var(--checkout-font);
    font-size: 20px;
    font-weight: 700;
    color: var(--checkout-text);
}

body.restaurants-checkout-page .checkout_no_user .auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-bottom: 12px;
    padding: 10px 20px;
    border-radius: var(--checkout-input-radius);
    background: var(--checkout-accent);
    color: #ffffff;
    text-decoration: none;
}

/* =============================================================================
   CHECKOUT — Confirm order modal (stores/checkout.js + cart/order_confirm_modal.php)
   Design: confirm-order modal mockup
   ============================================================================= */

body.restaurants-checkout-page.confirm-order-modal-open {
    overflow: hidden;
    height: 100%;
}

body.restaurants-checkout-page .confirm-order-modal-holder {
    position: fixed;
    inset: 0;
    z-index: 10020;
}

body.restaurants-checkout-page .confirm-order-modal-holder .bg {
    display: none;
}

body.restaurants-checkout-page .confirm-order-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.55);
}

body.restaurants-checkout-page .confirm-order-modal-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(520px, calc(100vw - 32px));
    margin: auto;
    padding: 36px 40px 32px;
    border: 0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    font-family: var(--checkout-font);
    box-sizing: border-box;
}

body.restaurants-checkout-page .confirm-order-modal-content .ocm-title {
    margin: 0 0 12px;
    padding: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    color: var(--checkout-text);
}

body.restaurants-checkout-page .confirm-order-modal-content .ocm-info {
    display: block;
    margin: 0 0 24px;
    padding: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    text-align: center;
    color: var(--checkout-muted);
}

body.restaurants-checkout-page .confirm-order-modal-content .ocm-items-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 28px;
}

body.restaurants-checkout-page .confirm-order-modal-content .ocm-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    margin: 0;
    padding: 16px 14px;
    border-radius: 8px;
    background: #f0f0f0;
    text-align: center;
    box-sizing: border-box;
}

body.restaurants-checkout-page .confirm-order-modal-content .ocm-item .ocm-item-label {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    color: #6a6a6a;
}

body.restaurants-checkout-page .confirm-order-modal-content .ocm-item .ocm-item-value,
body.restaurants-checkout-page .confirm-order-modal-content .ocm-item .ocm-phone-number-holder,
body.restaurants-checkout-page .confirm-order-modal-content .ocm-item .ocm-delivery-address-holder {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--checkout-text);
    word-break: break-word;
}

body.restaurants-checkout-page .confirm-order-modal-content .ocm-btns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

body.restaurants-checkout-page .confirm-order-modal-content .ocm-btns button {
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: var(--checkout-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    box-sizing: border-box;
}

body.restaurants-checkout-page .confirm-order-modal-content .ocm-btns button.ocmCancelBtn {
    border: 1px solid var(--checkout-accent);
    background: #ffffff;
    color: var(--checkout-accent);
}

body.restaurants-checkout-page .confirm-order-modal-content .ocm-btns button.ocmCancelBtn:hover,
body.restaurants-checkout-page .confirm-order-modal-content .ocm-btns button.ocmCancelBtn:focus {
    background: #fff5f3;
    outline: none;
}

body.restaurants-checkout-page .confirm-order-modal-content .ocm-btns button.ocmOrderSendBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    background: var(--checkout-accent);
    color: #ffffff;
}

body.restaurants-checkout-page .confirm-order-modal-content .ocm-btns button.ocmOrderSendBtn:hover,
body.restaurants-checkout-page .confirm-order-modal-content .ocm-btns button.ocmOrderSendBtn:focus {
    background: var(--checkout-accent-hover);
    outline: none;
}

body.restaurants-checkout-page .confirm-order-modal-content .ocm-btns button.ocmOrderSendBtn .ocm-pay-wallet {
    display: none;
    align-items: center;
    justify-content: center;
}

body.restaurants-checkout-page .confirm-order-modal-content .ocm-btns button.ocmOrderSendBtn .ocm-pay-wallet img {
    display: block;
    max-height: 22px;
    width: auto;
}

body.restaurants-checkout-page .confirm-order-modal-content .ocm-btns button.ocmOrderSendBtn.payment-google_pay .ocm-pay-default-label,
body.restaurants-checkout-page .confirm-order-modal-content .ocm-btns button.ocmOrderSendBtn.payment-apple_pay .ocm-pay-default-label {
    display: none;
}

body.restaurants-checkout-page .confirm-order-modal-content .ocm-btns button.ocmOrderSendBtn.payment-google_pay .ocm-pay-wallet-google {
    display: inline-flex;
}

body.restaurants-checkout-page .confirm-order-modal-content .ocm-btns button.ocmOrderSendBtn.payment-apple_pay .ocm-pay-wallet-apple {
    display: inline-flex;
}

@media (max-width: 560px) {
    body.restaurants-checkout-page .confirm-order-modal-content {
        padding: 28px 20px 24px;
    }

    body.restaurants-checkout-page .confirm-order-modal-content .ocm-items-row,
    body.restaurants-checkout-page .confirm-order-modal-content .ocm-btns {
        grid-template-columns: 1fr;
    }

    body.restaurants-checkout-page .confirm-order-modal-content .ocm-title {
        font-size: 22px;
    }
}

@media (max-width: 900px) {
    body.restaurants-checkout-page .checkout-form__columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    body.restaurants-checkout-page .orderWrap,
    body.restaurants-checkout-page .checkoutFormWrap {
        padding: 22px 18px;
    }

    body.restaurants-checkout-page .checkoutFooter {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    body.restaurants-checkout-page .checkoutFooter .totalWrap {
        grid-column: auto;
        justify-self: auto;
        text-align: left;
    }

    body.restaurants-checkout-page .checkoutFooter a.sendOrderBtn {
        grid-column: auto;
        justify-self: auto;
        width: 100%;
        min-width: 0;
    }

    body.restaurants-checkout-page .orderWrap .order-item.o-gift-item {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 12px;
    }

    body.restaurants-checkout-page .orderWrap .gift-product-img-holder,
    body.restaurants-checkout-page .orderWrap .gift-product-img-holder img {
        width: 64px;
        height: 64px;
    }

    body.restaurants-checkout-page .orderWrap .gif-product-add-btn {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
    }

    body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card {
        grid-template-columns: 1fr;
    }

    body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card__aside {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 12px 14px;
        border-right: 0;
        border-bottom: 2px dashed rgba(255, 255, 255, 0.45);
    }

    body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card__value {
        font-size: 18px;
    }

    body.restaurants-checkout-page .checkoutFormWrap .checkout-coupon-card__apply {
        align-self: stretch;
    }

    body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder {
        grid-template-columns: 1fr;
    }

    body.restaurants-checkout-page .checkoutFormWrap .customer-cards-holder .checkout-saved-card {
        max-width: none;
    }
}

/* CHECKOUT END */

/* ==========================================================================
   REUSABLE AUTH PROVIDER BUTTONS
   Use: .store-auth-btn + modifier + .store-auth-btn__icon + .store-auth-btn__text
   Legacy login markup (.auth-login-btn, .facebook-login-btn, …) is mapped below.
   Icons: assets/images/store_theme/login_{facebook,google,apple,phone}_ic.svg
   ========================================================================== */

.store-auth-btn,
.auth-login-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0 16px 0 52px;
    border: 0;
    border-radius: 8px;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.store-auth-btn:hover,
.auth-login-btn:hover {
    opacity: 0.92;
}

.store-auth-btn__icon,
.auth-login-btn-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    width: 24px;
    height: 24px;
    margin: 0;
    transform: translateY(-50%);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
    pointer-events: none;
}

.store-auth-btn__text,
.auth-login-btn .btn-text {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.store-auth-btn--facebook,
.facebook-login-btn.auth-login-btn {
    background: #1877f2;
    color: #fff;
}

.store-auth-btn--facebook .store-auth-btn__icon,
.facebook-icon-wrapper.auth-login-btn-icon {
    background-image: url('../../images/store_theme/login_facebook_ic.svg');
}

.store-auth-btn--facebook .store-auth-btn__text,
.facebook-login-btn.auth-login-btn .btn-text {
    color: #fff;
}

.store-auth-btn--google,
.google-btn.auth-login-btn {
    background: #e33e26;
    color: #fff;
    box-shadow: none;
}

.store-auth-btn--google .store-auth-btn__icon,
.google-icon-wrapper.auth-login-btn-icon {
    background-image: url('../../images/store_theme/login_google_ic.svg');
}

.store-auth-btn--google .store-auth-btn__text,
.google-btn.auth-login-btn .btn-text {
    color: #fff;
}

.store-auth-btn--apple,
.apple-btn.auth-login-btn {
    background: #000;
    color: #fff;
}

.store-auth-btn--apple .store-auth-btn__icon,
.apple-icon-wrapper.auth-login-btn-icon {
    background-image: url('../../images/store_theme/login_apple_ic.svg');
}

.store-auth-btn--apple .store-auth-btn__text,
.apple-btn.auth-login-btn .btn-text {
    color: #fff;
}

.store-auth-btn--phone,
.phone-login-btn.auth-login-btn {
    background: #fff;
    border: 1px solid #d1d1d6;
    color: #1a1a1a;
}

.store-auth-btn--phone .store-auth-btn__icon,
.phone-icon.auth-login-btn-icon {
    background-image: url('../../images/store_theme/login_phone_ic.svg');
}

.store-auth-btn--phone .store-auth-btn__text,
.phone-login-btn.auth-login-btn .btn-text,
.phone-login-btn.auth-login-btn .btn-text-phone {
    color: #1a1a1a !important;
}

.store-auth-btn-list,
.login-btns-holder {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================================================================
   CUSTOMER AUTH — SHARED (ajax loader, password toggle)
   ========================================================================== */

.ajax-loader {
    opacity: 0;
}

body.loading .ajax-loader {
    opacity: 1;
    visibility: visible;
}

body.customers-log_in-page .auth_interface_content .password-wrapper,
body.customers-register-page .auth_interface_content .password-wrapper,
body.customers-recover_account-page .auth_interface_content .password-wrapper {
    position: relative;
}

body.customers-log_in-page .auth_interface_content .password-control,
body.customers-register-page .auth_interface_content .password-control,
body.customers-recover_account-page .auth_interface_content .password-control {
    padding-right: 44px;
}

body.customers-log_in-page .auth_interface_content .toggle-password,
body.customers-register-page .auth_interface_content .toggle-password,
body.customers-recover_account-page .auth_interface_content .toggle-password {
    display: block;
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    background-image: url('../../images/eye.png');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

body.customers-log_in-page .auth_interface_content .toggle-password.eye-off,
body.customers-register-page .auth_interface_content .toggle-password.eye-off,
body.customers-recover_account-page .auth_interface_content .toggle-password.eye-off {
    background-image: url('../../images/eye-off.png');
}

body.customers-log_in-page .auth_interface_content a.btn-notAccount,
body.customers-log_in-page .auth_interface_content a.btn-forgot-pass,
body.customers-forgot_password-page .auth_interface_content a.btn-notAccount,
body.customers-register-page .auth_interface_content a.btn-notAccount,
body.customers-register-page .auth_interface_content .tc-box a,
body.customers-recover_account-page .auth_interface_content a.btn-notAccount {
    cursor: pointer;
}

/* CUSTOMER AUTH — SHARED END */

/* ==========================================================================
   CUSTOMER AUTH — LOGIN PAGE
   Body: .customers-log_in-page
   ========================================================================== */

body.customers-log_in-page {
    --login-page-bg: #f3f3f5;
    --login-card-bg: #fff;
    --login-card-radius: 12px;
    --login-card-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    --login-text: #1a1a1a;
    --login-muted: #6b6b6f;
    --login-accent: #e4512e;
    --login-border: #d8d8dc;
    --login-input-radius: 8px;
    --login-font: Roboto, system-ui, -apple-system, sans-serif;
}

body.customers-log_in-page #wrapper,
body.customers-log_in-page .content {
    background: var(--login-page-bg);
}

body.customers-log_in-page .storeBox.container {
    max-width: 560px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    box-sizing: border-box;
}

body.customers-log_in-page .storeWrapper {
    margin-top: 0;
}

body.customers-log_in-page .storeHeader .text-header-auth {
    display: none;
}

body.customers-log_in-page .auth_interface_content {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 32px 28px 36px;
    box-sizing: border-box;
    background: var(--login-card-bg);
    border-radius: var(--login-card-radius);
    box-shadow: var(--login-card-shadow);
}

body.customers-log_in-page .auth_interface_content h1.title {
    position: relative;
    margin: 0 0 24px;
    padding: 0 36px 0 0;
    color: var(--login-text);
    font-family: var(--login-font);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
}

body.customers-log_in-page .auth_interface_content h1.title .ajax-loader {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

body.customers-log_in-page .auth_interface_content form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
}

body.customers-log_in-page .auth_interface_content .form-group {
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
}

body.customers-log_in-page .auth_interface_content label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    color: var(--login-text);
    font-family: var(--login-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

body.customers-log_in-page .auth_interface_content .form-control {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    box-sizing: border-box;
    border: 1px solid var(--login-border);
    border-radius: var(--login-input-radius);
    background: #fff;
    color: var(--login-text) !important;
    font-family: var(--login-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.customers-log_in-page .auth_interface_content .form-control:focus {
    border-color: #b8b8bd;
    box-shadow: 0 0 0 3px rgba(228, 81, 46, 0.12);
}

body.customers-log_in-page .auth_interface_content .form-group.submit {
    margin-bottom: 0;
}

body.customers-log_in-page .auth_interface_content .form-group.submit > div:not(.phone-login-activation-list) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0 0 20px !important;
    padding: 0;
}

body.customers-log_in-page .auth_interface_content .form-group.submit label.remember-me {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    color: var(--login-text);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

body.customers-log_in-page .auth_interface_content .form-group.submit label.remember-me input {
    margin: 0;
}

body.customers-log_in-page .auth_interface_content .form-group.submit a.btn-forgot-pass {
    float: none;
    margin: 0;
    padding: 0 !important;
    background: transparent;
    color: var(--login-accent);
    font-size: 14px;
    font-weight: 500;
    text-align: right;
    text-decoration: none;
    text-transform: none;
}

body.customers-log_in-page .auth_interface_content .form-group.submit a.btn-forgot-pass:hover {
    text-decoration: underline;
}

body.customers-log_in-page .auth_interface_content .form-group.submit .btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0 0 16px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid var(--login-accent);
    border-radius: var(--login-input-radius);
    background: #fff;
    color: var(--login-accent);
    font-family: var(--login-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.customers-log_in-page .auth_interface_content .form-group.submit .btn-submit:hover {
    background: var(--login-accent);
    color: #fff;
    opacity: 1;
}

body.customers-log_in-page .auth_interface_content .form-group.submit a.btn-notAccount {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--login-accent);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
}

body.customers-log_in-page .auth_interface_content .form-group.submit a.btn-notAccount:hover {
    text-decoration: underline;
    opacity: 1;
}

body.customers-log_in-page .auth_interface_content .separation-line {
    position: relative;
    width: 100%;
    margin: 28px 0 16px;
    padding: 0;
    opacity: 1;
    text-align: center;
    color: var(--login-muted);
    font-family: var(--login-font);
    font-size: 14px;
    line-height: 1.4;
}

body.customers-log_in-page .auth_interface_content .separation-line > span {
    display: block;
    position: relative;
    margin-bottom: 8px;
}

body.customers-log_in-page .auth_interface_content .separation-line .separator {
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid #e5e5e8;
}

body.customers-log_in-page .auth_interface_content .separation-line .separator-or-word {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    margin: 0;
    padding: 0 12px;
    transform: translate(-50%, -50%);
    background: var(--login-card-bg);
    color: var(--login-muted);
    font-size: 13px;
    font-weight: 500;
    text-transform: lowercase;
}

body.customers-log_in-page .auth_interface_content .separation-line > a {
    display: block;
    color: var(--login-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

body.customers-log_in-page .auth_interface_content .login-btns-holder {
    margin-top: 4px;
}

body.customers-log_in-page .auth_interface_content .auth-login-btn {
    margin-top: 0;
}

body.customers-log_in-page .storeFooter {
    padding-top: 8px;
    padding-bottom: 16px;
    background: transparent;
}

@media (max-width: 480px) {
    body.customers-log_in-page .storeBox.container {
        padding: 16px 12px 32px;
    }

    body.customers-log_in-page .auth_interface_content {
        padding: 24px 18px 28px;
    }

    body.customers-log_in-page .auth_interface_content h1.title {
        font-size: 24px;
    }

    body.customers-log_in-page .store-auth-btn,
    body.customers-log_in-page .auth-login-btn {
        min-height: 46px;
        padding-left: 48px;
        font-size: 14px;
    }

    body.customers-log_in-page .store-auth-btn__text,
    body.customers-log_in-page .auth-login-btn .btn-text {
        font-size: 14px;
    }
}

/* --- Phone login (auth-mod-phone, loaded via phone_login.js) --- */
body.customers-log_in-page .auth_interface_content .auth-mod-phone {
    display: none;
    width: 100%;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .phone-login-wrapper {
    width: 100%;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .form-group {
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .phone-field > label,
body.customers-log_in-page .auth_interface_content .auth-mod-phone .form-group:not(.phone-login-activation-group) > label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    color: var(--login-text);
    font-family: var(--login-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .form-control,
body.customers-log_in-page .auth_interface_content .auth-mod-phone .prefix-phone-input {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    box-sizing: border-box;
    border: 1px solid var(--login-border);
    border-radius: var(--login-input-radius);
    background: #fff;
    color: var(--login-text) !important;
    font-family: var(--login-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .phone-field .iti {
    display: block;
    width: 100%;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .phone-field .iti input,
body.customers-log_in-page .auth_interface_content .auth-mod-phone .phone-field .iti input[type="tel"] {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px 12px 52px !important;
    border: 1px solid var(--login-border);
    border-radius: var(--login-input-radius);
    background: #fff;
    color: var(--login-text) !important;
    font-family: var(--login-font);
    font-size: 15px;
    line-height: 1.35;
    box-sizing: border-box;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .phone-field .iti--allow-dropdown .iti__flag-container {
    left: 0;
    right: auto;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .phone-field .iti__selected-flag {
    padding: 0 8px 0 10px;
    border-radius: var(--login-input-radius) 0 0 var(--login-input-radius);
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .phone-field .iti input:focus {
    border-color: #b8b8b8;
    box-shadow: 0 0 0 3px rgba(228, 81, 46, 0.1);
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .phone-input-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.35;
    color: #c62828;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .form-group.submit {
    margin: 4px 0 20px;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .form-group.submit .btn-submit,
body.customers-log_in-page .auth_interface_content .auth-mod-phone .send-phone-login-code,
body.customers-log_in-page .auth_interface_content .auth-mod-phone .confirm-phone-login-code,
body.customers-log_in-page .auth_interface_content .auth-mod-phone .cutomer-activation-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid var(--login-accent);
    border-radius: var(--login-input-radius);
    background: #fff;
    color: var(--login-accent);
    font-family: var(--login-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .form-group.submit .btn-submit:hover,
body.customers-log_in-page .auth_interface_content .auth-mod-phone .send-phone-login-code:hover,
body.customers-log_in-page .auth_interface_content .auth-mod-phone .confirm-phone-login-code:hover,
body.customers-log_in-page .auth_interface_content .auth-mod-phone .cutomer-activation-btn:hover {
    background: var(--login-accent);
    color: #fff;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .phone-login-text-center,
body.customers-log_in-page .auth_interface_content .auth-mod-phone .login-link-btn {
    text-align: center;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .resend-login-code {
    color: var(--login-accent);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-decoration: none;
    cursor: pointer;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .resend-login-code:hover {
    text-decoration: underline;
}

/* Step 3 — linked email accounts */
body.customers-log_in-page .auth_interface_content .auth-mod-phone .phone-login-activation-group {
    margin-bottom: 12px;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .phone-login-activation-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    margin: 0 0 10px !important;
    padding: 0;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone label.phone-login-activation-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 8px 10px;
    box-sizing: border-box;
    border: 1px solid var(--login-border);
    border-radius: var(--login-input-radius);
    background: #fff;
    color: var(--login-text);
    font-family: var(--login-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .phone-login-activation-item:has(input:checked) {
    border-color: var(--login-accent);
    box-shadow: 0 0 0 1px rgba(228, 81, 46, 0.35);
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .phone-login-activation-item input[type="radio"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--login-accent);
    cursor: pointer;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .phone-login-activation-item__text {
    flex: 0 1 auto;
    white-space: nowrap;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .phone-login-activation-item__warn {
    flex: 0 0 auto;
    color: #c62828;
    font-weight: 600;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .phone-login-activation-note {
    margin: 0;
    padding: 0;
    color: #c62828;
    font-family: var(--login-font);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .general-auth-mode-btn {
    display: block;
    margin: 8px 0 0;
    padding: 0;
    text-align: center;
    cursor: pointer;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .general-auth-mode-btn .phone-icon-wrapper {
    display: none;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .general-auth-mode-btn .text-authentication-with {
    margin: 0;
    padding: 0;
    color: var(--login-accent);
    font-family: var(--login-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .general-auth-mode-btn .text-authentication-with b {
    font-weight: 500;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .general-auth-mode-btn:hover .text-authentication-with {
    text-decoration: underline;
}

body.customers-log_in-page .auth_interface_content .auth-mod-phone .successMessage,
body.customers-log_in-page .auth_interface_content .auth-mod-phone .errorMessage,
body.customers-log_in-page .auth_interface_content .auth-mod-phone .warningMessage {
    margin-bottom: 16px;
}

/* CUSTOMER AUTH — LOGIN PAGE END */

/* ==========================================================================
   CUSTOMER AUTH — FORGOT PASSWORD PAGE
   Body: .customers-forgot_password-page
   ========================================================================== */

body.customers-forgot_password-page {
    --login-page-bg: #f3f3f5;
    --login-card-bg: #fff;
    --login-card-radius: 12px;
    --login-card-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    --login-text: #1a1a1a;
    --login-muted: #6b6b6f;
    --login-accent: #e4512e;
    --login-border: #d8d8dc;
    --login-input-radius: 8px;
    --login-font: Roboto, system-ui, -apple-system, sans-serif;
}

body.customers-forgot_password-page #wrapper,
body.customers-forgot_password-page .content {
    background: var(--login-page-bg);
}

body.customers-forgot_password-page .storeBox.container {
    max-width: 560px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    box-sizing: border-box;
}

body.customers-forgot_password-page .storeWrapper {
    margin-top: 0;
}

body.customers-forgot_password-page .storeHeader .text-header-auth {
    display: none;
}

body.customers-forgot_password-page .auth_interface_content {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 32px 28px 36px;
    box-sizing: border-box;
    background: var(--login-card-bg);
    border-radius: var(--login-card-radius);
    box-shadow: var(--login-card-shadow);
}

body.customers-forgot_password-page .auth_interface_content h1.title-forgot-password {
    position: relative;
    margin: 0 0 12px;
    padding: 0 36px 0 0;
    color: var(--login-text);
    font-family: var(--login-font);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
}

body.customers-forgot_password-page .auth_interface_content h1.title-forgot-password .ajax-loader {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

body.customers-forgot_password-page .auth_interface_content .p-forgot-password {
    margin: 0 0 24px;
    padding: 0;
    color: var(--login-muted);
    font-family: var(--login-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
}

body.customers-forgot_password-page .auth_interface_content .successMessage,
body.customers-forgot_password-page .auth_interface_content .errorMessage,
body.customers-forgot_password-page .auth_interface_content .warningMessage {
    margin-bottom: 18px;
}

body.customers-forgot_password-page .auth_interface_content form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
}

body.customers-forgot_password-page .auth_interface_content .form-group {
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
}

body.customers-forgot_password-page .auth_interface_content label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    color: var(--login-text);
    font-family: var(--login-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

body.customers-forgot_password-page .auth_interface_content .form-control {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    box-sizing: border-box;
    border: 1px solid var(--login-border);
    border-radius: var(--login-input-radius);
    background: #fff;
    color: var(--login-text) !important;
    font-family: var(--login-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.customers-forgot_password-page .auth_interface_content .form-control:focus {
    border-color: #b8b8bd;
    box-shadow: 0 0 0 3px rgba(228, 81, 46, 0.12);
}

body.customers-forgot_password-page .auth_interface_content #g-recaptcha-element {
    width: 100%;
    margin: 0 0 20px;
}

body.customers-forgot_password-page .auth_interface_content .form-group.submit {
    margin-bottom: 0;
}

body.customers-forgot_password-page .auth_interface_content .form-group.submit .btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0 0 16px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid var(--login-accent);
    border-radius: var(--login-input-radius);
    background: #fff;
    color: var(--login-accent);
    font-family: var(--login-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.customers-forgot_password-page .auth_interface_content .form-group.submit .btn-submit:hover {
    background: var(--login-accent);
    color: #fff;
    opacity: 1;
}

body.customers-forgot_password-page .auth_interface_content .form-group.submit a.btn-notAccount {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--login-accent);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
}

body.customers-forgot_password-page .auth_interface_content .form-group.submit a.btn-notAccount:hover {
    text-decoration: underline;
    opacity: 1;
}

body.customers-forgot_password-page .storeFooter {
    padding-top: 8px;
    padding-bottom: 16px;
    background: transparent;
}

@media (max-width: 480px) {
    body.customers-forgot_password-page .storeBox.container {
        padding: 16px 12px 32px;
    }

    body.customers-forgot_password-page .auth_interface_content {
        padding: 24px 18px 28px;
    }

    body.customers-forgot_password-page .auth_interface_content h1.title-forgot-password {
        font-size: 24px;
    }
}

/* CUSTOMER AUTH — FORGOT PASSWORD PAGE END */

/* ==========================================================================
   CUSTOMER AUTH — REGISTER PAGE
   Body: .customers-register-page
   ========================================================================== */

body.customers-register-page {
    --login-page-bg: #f3f3f5;
    --login-card-bg: #fff;
    --login-card-radius: 12px;
    --login-card-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    --login-text: #1a1a1a;
    --login-muted: #6b6b6f;
    --login-accent: #e4512e;
    --login-border: #d8d8dc;
    --login-input-radius: 8px;
    --login-font: Roboto, system-ui, -apple-system, sans-serif;
}

body.customers-register-page #wrapper,
body.customers-register-page .content {
    background: var(--login-page-bg);
}

body.customers-register-page .storeBox.container {
    max-width: 560px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    box-sizing: border-box;
}

body.customers-register-page .storeWrapper {
    margin-top: 0;
}

body.customers-register-page .storeHeader .text-header-auth {
    display: none;
}

body.customers-register-page .auth_interface_content {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 32px 28px 36px;
    box-sizing: border-box;
    background: var(--login-card-bg);
    border-radius: var(--login-card-radius);
    box-shadow: var(--login-card-shadow);
}

body.customers-register-page .auth_interface_content h1.title {
    position: relative;
    margin: 0 0 24px;
    padding: 0 36px 0 0;
    color: var(--login-text);
    font-family: var(--login-font);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
}

body.customers-register-page .auth_interface_content h1.title .ajax-loader {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

body.customers-register-page .auth_interface_content .successMessage,
body.customers-register-page .auth_interface_content .errorMessage,
body.customers-register-page .auth_interface_content .warningMessage {
    margin-bottom: 18px;
}

body.customers-register-page .auth_interface_content form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
}

body.customers-register-page .auth_interface_content .form-group {
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
}

body.customers-register-page .auth_interface_content label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    color: var(--login-text);
    font-family: var(--login-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

body.customers-register-page .auth_interface_content .form-control {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    box-sizing: border-box;
    border: 1px solid var(--login-border);
    border-radius: var(--login-input-radius);
    background: #fff;
    color: var(--login-text) !important;
    font-family: var(--login-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.customers-register-page .auth_interface_content .form-control:focus {
    border-color: #b8b8bd;
    box-shadow: 0 0 0 3px rgba(228, 81, 46, 0.12);
}

body.customers-register-page .auth_interface_content .register-email-input-wrap {
    position: relative;
}

body.customers-register-page .auth_interface_content .register-email-input-wrap .form-control {
    padding-right: 40px;
}

body.customers-register-page .auth_interface_content .register-email-loader {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    transform: translateY(-50%);
    pointer-events: none;
}

body.customers-register-page .auth_interface_content .form-group--tc {
    margin-bottom: 8px;
}

body.customers-register-page .auth_interface_content .tc-widget {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    position: relative;
}

body.customers-register-page .auth_interface_content .tc-checkbox-holder {
    position: static;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin: 2px 0 0;
}

body.customers-register-page .auth_interface_content .tc-checkbox-holder .checkbox-content,
body.customers-register-page .auth_interface_content .tc-checkbox-holder .checkbox-container {
    position: relative;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
}

body.customers-register-page .auth_interface_content .tc-checkbox-holder .approve_tc_checkbox {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

body.customers-register-page .auth_interface_content .tc-checkbox-holder .checkbox-checkmark {
    position: absolute;
    inset: 0;
    z-index: 1;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: 2px solid var(--login-border);
    border-radius: 6px;
    background: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

body.customers-register-page .auth_interface_content .tc-checkbox-holder .approve_tc_checkbox:hover + .checkbox-checkmark {
    border-color: #b8b8bd;
}

body.customers-register-page .auth_interface_content .tc-checkbox-holder .approve_tc_checkbox:focus-visible + .checkbox-checkmark {
    border-color: var(--login-accent);
    box-shadow: 0 0 0 3px rgba(228, 81, 46, 0.12);
}

body.customers-register-page .auth_interface_content .tc-checkbox-holder .approve_tc_checkbox:checked + .checkbox-checkmark {
    border-color: var(--login-accent);
    background: var(--login-accent);
}

body.customers-register-page .auth_interface_content .tc-checkbox-holder .approve_tc_checkbox:checked + .checkbox-checkmark::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 7px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

body.customers-register-page .auth_interface_content .tc-box {
    display: block;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--login-muted);
    font-family: var(--login-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

body.customers-register-page .auth_interface_content .tc-box a {
    color: var(--login-accent);
    font-weight: 500;
    text-decoration: none;
}

body.customers-register-page .auth_interface_content .tc-box a:hover {
    text-decoration: underline;
}

body.customers-register-page .auth_interface_content .tc-checkbox-clear {
    display: none;
}

body.customers-register-page .auth_interface_content #g-recaptcha-element {
    width: 100%;
    margin: 0 0 20px;
}

body.customers-register-page .auth_interface_content .form-group.submit {
    margin-bottom: 0;
}

body.customers-register-page .auth_interface_content .form-group.submit .btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0 0 16px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid var(--login-accent);
    border-radius: var(--login-input-radius);
    background: #fff;
    color: var(--login-accent);
    font-family: var(--login-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.customers-register-page .auth_interface_content .form-group.submit .btn-submit:hover {
    background: var(--login-accent);
    color: #fff;
    opacity: 1;
}

body.customers-register-page .auth_interface_content .form-group.submit a.btn-notAccount {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--login-accent);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
}

body.customers-register-page .auth_interface_content .form-group.submit a.btn-notAccount:hover {
    text-decoration: underline;
    opacity: 1;
}

body.customers-register-page .storeFooter {
    padding-top: 8px;
    padding-bottom: 16px;
    background: transparent;
}

@media (max-width: 480px) {
    body.customers-register-page .storeBox.container {
        padding: 16px 12px 32px;
    }

    body.customers-register-page .auth_interface_content {
        padding: 24px 18px 28px;
    }

    body.customers-register-page .auth_interface_content h1.title {
        font-size: 24px;
    }
}

/* CUSTOMER AUTH — REGISTER PAGE END */

/* ==========================================================================
   CUSTOMER AUTH — RECOVER ACCOUNT PAGE
   Body: .customers-recover_account-page
   ========================================================================== */

body.customers-recover_account-page {
    --login-page-bg: #f3f3f5;
    --login-card-bg: #fff;
    --login-card-radius: 12px;
    --login-card-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    --login-text: #1a1a1a;
    --login-muted: #6b6b6f;
    --login-accent: #e4512e;
    --login-border: #d8d8dc;
    --login-input-radius: 8px;
    --login-font: Roboto, system-ui, -apple-system, sans-serif;
}

body.customers-recover_account-page #wrapper,
body.customers-recover_account-page .content {
    background: var(--login-page-bg);
}

body.customers-recover_account-page .storeBox.container {
    max-width: 560px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    box-sizing: border-box;
}

body.customers-recover_account-page .storeWrapper {
    margin-top: 0;
}

body.customers-recover_account-page .storeHeader .text-header-auth {
    display: none;
}

body.customers-recover_account-page .auth_interface_content {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 32px 28px 36px;
    box-sizing: border-box;
    background: var(--login-card-bg);
    border-radius: var(--login-card-radius);
    box-shadow: var(--login-card-shadow);
}

body.customers-recover_account-page .auth_interface_content h1.title-recover-account {
    position: relative;
    margin: 0 0 12px;
    padding: 0 36px 0 0;
    color: var(--login-text);
    font-family: var(--login-font);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
}

body.customers-recover_account-page .auth_interface_content h1.title-recover-account .ajax-loader {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

body.customers-recover_account-page .auth_interface_content .p-recover-account {
    margin: 0 0 24px;
    padding: 0;
    color: var(--login-muted);
    font-family: var(--login-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
}

body.customers-recover_account-page .auth_interface_content .successMessage,
body.customers-recover_account-page .auth_interface_content .errorMessage,
body.customers-recover_account-page .auth_interface_content .warningMessage {
    margin-bottom: 18px;
}

body.customers-recover_account-page .auth_interface_content form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
}

body.customers-recover_account-page .auth_interface_content .form-group {
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
}

body.customers-recover_account-page .auth_interface_content label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    color: var(--login-text);
    font-family: var(--login-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

body.customers-recover_account-page .auth_interface_content .form-control {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    box-sizing: border-box;
    border: 1px solid var(--login-border);
    border-radius: var(--login-input-radius);
    background: #fff;
    color: var(--login-text) !important;
    font-family: var(--login-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.customers-recover_account-page .auth_interface_content .form-control:focus {
    border-color: #b8b8bd;
    box-shadow: 0 0 0 3px rgba(228, 81, 46, 0.12);
}

body.customers-recover_account-page .auth_interface_content .form-group.submit {
    margin-bottom: 0;
}

body.customers-recover_account-page .auth_interface_content .form-group--recover-account-actions {
    margin-top: 8px;
}

body.customers-recover_account-page .auth_interface_content .form-group.submit .btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0 0 16px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid var(--login-accent);
    border-radius: var(--login-input-radius);
    background: #fff;
    color: var(--login-accent);
    font-family: var(--login-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.customers-recover_account-page .auth_interface_content .form-group.submit .btn-submit:hover {
    background: var(--login-accent);
    color: #fff;
    opacity: 1;
}

body.customers-recover_account-page .auth_interface_content .form-group.submit a.btn-notAccount {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--login-accent);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
}

body.customers-recover_account-page .auth_interface_content .form-group.submit a.btn-notAccount:hover {
    text-decoration: underline;
    opacity: 1;
}

body.customers-recover_account-page .storeFooter {
    padding-top: 8px;
    padding-bottom: 16px;
    background: transparent;
}

@media (max-width: 480px) {
    body.customers-recover_account-page .storeBox.container {
        padding: 16px 12px 32px;
    }

    body.customers-recover_account-page .auth_interface_content {
        padding: 24px 18px 28px;
    }

    body.customers-recover_account-page .auth_interface_content h1.title-recover-account {
        font-size: 24px;
    }
}

/* CUSTOMER AUTH — RECOVER ACCOUNT PAGE END */

/* ==========================================================================
   STORE FOOTER — powered by (application/views/stores/main/storeFooter.php)
   ========================================================================== */

.storeFooter {
    width: 100%;
    margin: 0;
    padding: 20px 16px 12px;
    box-sizing: border-box;
    text-align: center;
}

.storeFooter .toRight {
    display: block;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #b0b0b5;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0.02em;
    text-align: center;
}

.storeFooter .toRight a {
    color: #b0b0b5;
    text-decoration: none;
}

.storeFooter .toRight a:hover,
.storeFooter .toRight a:focus-visible {
    color: #94949a;
    text-decoration: underline;
    outline: none;
}

/* STORE FOOTER END */

/* STORE PAGE END */

/* ==========================================================================
   MY PROFILE — stores theme (customers/my_profile/*)
   Reusable blocks:
     .profile-page          — page shell
     .profile-section       — content subsection (orders, personal data, …)
     .profile-form          — form layout + fields (.profile-form__label, __control, __btn)
   Subsections:
     .profile-section--personal-data
   ========================================================================== */

body.customers-my_profile-page {
    --profile-font: Roboto, system-ui, -apple-system, sans-serif;
    --profile-page-bg: #f0f0f0;
    --profile-card-bg: #ffffff;
    --profile-card-radius: 16px;
    --profile-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    --profile-layout-gap: 20px;
    --profile-sidebar-width: 272px;
    --profile-nav-gap: 10px;
    --profile-nav-bg: #ececec;
    --profile-nav-bg-hover: #e2e2e2;
    --profile-nav-bg-active: #6e6e6e;
    --profile-nav-color: #1a1a1a;
    --profile-nav-color-active: #ffffff;
    --profile-nav-radius: 10px;
    --profile-nav-font-size: 13px;
    --profile-nav-padding-y: 16px;
    --profile-nav-padding-x: 18px;
    --profile-title-size: 28px;
    --profile-title-color: #1a1a1a;
    --profile-label-size: 15px;
    --profile-label-color: #1a1a1a;
    --profile-input-size: 15px;
    --profile-input-height: 44px;
    --profile-input-bg: #ffffff;
    --profile-input-border: #d4d4d4;
    --profile-input-border-focus: #b8b8b8;
    --profile-input-radius: 8px;
    --profile-input-color: #1a1a1a;
    --profile-placeholder-color: #9a9a9a;
    --profile-hint-size: 12px;
    --profile-hint-color: #6b6b6b;
    --profile-required-color: #e33e26;
    --profile-accent: #e33e26;
    --profile-btn-bg: #e33e26;
    --profile-btn-bg-hover: #c93620;
    --profile-btn-color: #ffffff;
    --profile-btn-radius: 8px;
    --profile-form-gap-y: 22px;
    --profile-form-gap-x: 24px;
    background-color: var(--profile-page-bg);
}

body.customers-my_profile-page #wrapper,
body.customers-my_profile-page .content {
    background-color: var(--profile-page-bg);
}

body.customers-my_profile-page .storeBox.container {
    padding-top: 0;
    padding-bottom: 0;
}

body.customers-my_profile-page .storeWrapper {
    margin-top: 0;
    width: 100%;
    max-width: none;
    overflow: visible;
    box-shadow: none;
    background: transparent;
}

body.customers-my_profile-page .storeBox > .successMessage,
body.customers-my_profile-page .storeBox > .errorMessage,
body.customers-my_profile-page .storeBox > .warningMessage,
body.customers-my_profile-page #my_profile > .successMessage,
body.customers-my_profile-page #my_profile > .errorMessage,
body.customers-my_profile-page #my_profile > .warningMessage {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

body.customers-my_profile-page .storeHeader {
    display: none;
}

body.customers-my_profile-page .storeBox {
    padding: 24px 0 48px;
}

body.customers-my_profile-page #my_profile.profile-page {
    display: block;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    box-sizing: border-box;
}

body.customers-my_profile-page #my_profile .myProfileHeader {
    display: flex;
}

/* --- Hero: name + summary stats above layout --- */
body.customers-my_profile-page .profile-page__hero,
body.customers-my_profile-page #my_profile .myProfileHeader {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    width: 100%;
    margin: 0 0 var(--profile-layout-gap);
    padding: 24px 32px;
    background: var(--profile-card-bg);
    border-radius: var(--profile-card-radius);
    box-shadow: var(--profile-card-shadow);
    box-sizing: border-box;
}

body.customers-my_profile-page .profile-page__hero-main,
body.customers-my_profile-page .title_my_profile {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

body.customers-my_profile-page .profile-page__hero-name,
body.customers-my_profile-page .title_my_profile h1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    font-family: var(--profile-font);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--profile-title-color);
    background: transparent;
}

body.customers-my_profile-page .profile-page__hero-name-text {
    min-width: 0;
    word-break: break-word;
}

body.customers-my_profile-page .title_my_profile .trusted-badge-holder {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
}

body.customers-my_profile-page .title_my_profile .trusted-badge {
    position: absolute;
    top: -23px;
    right: -58px;
    width: 55px;
    height: auto;
    display: block;
}

body.customers-my_profile-page .profile-page__hero-stats,
body.customers-my_profile-page .orders_sumary {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0 32px;
    margin: 0;
    padding: 0;
}

body.customers-my_profile-page .profile-page__hero-stat,
body.customers-my_profile-page .orders_sumary .nr_of_orders,
body.customers-my_profile-page .orders_sumary .customer_since {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 0 0 32px;
    border-left: 1px solid #e0e0e0;
    text-align: center;
}

body.customers-my_profile-page .profile-page__hero-stat:first-child,
body.customers-my_profile-page .orders_sumary .nr_of_orders {
    padding-left: 0;
    border-left: 0;
}

body.customers-my_profile-page .profile-page__hero-stat-value,
body.customers-my_profile-page .orders_sumary .data {
    font-family: var(--profile-font);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--profile-title-color);
}

body.customers-my_profile-page .profile-page__hero-stat-label,
body.customers-my_profile-page .orders_sumary .label {
    margin-top: 6px;
    font-family: var(--profile-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--profile-accent);
    text-transform: none;
}

/* --- Page layout: sidebar + main in one white card (design: profile.png) --- */
body.customers-my_profile-page .profile-page__layout,
body.customers-my_profile-page #my_profile .myProfileMiddle {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--profile-layout-gap);
    width: 100%;
    padding: 28px 32px 32px;
    background: var(--profile-card-bg);
    border-radius: var(--profile-card-radius);
    box-shadow: var(--profile-card-shadow);
    box-sizing: border-box;
}

body.customers-my_profile-page .profile-page__sidebar,
body.customers-my_profile-page #my_profile .my_profile_sidebar {
    flex: 0 0 var(--profile-sidebar-width);
    width: var(--profile-sidebar-width);
    max-width: var(--profile-sidebar-width);
    min-width: 0;
    float: none;
    margin: 0;
    padding: 0;
}

body.customers-my_profile-page .profile-page__main,
body.customers-my_profile-page #my_profile .my_profile_content {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}

/* --- Sidebar navigation --- */
body.customers-my_profile-page .profile-nav {
    display: block;
    width: 100%;
}

body.customers-my_profile-page .profile-nav__list,
body.customers-my_profile-page .my_profile_sidebar .nav-sidebar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--profile-nav-gap);
    width: 100%;
}

body.customers-my_profile-page .profile-nav__list li,
body.customers-my_profile-page .my_profile_sidebar .nav-sidebar li {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.customers-my_profile-page .profile-nav__list li a,
body.customers-my_profile-page .my_profile_sidebar .nav-sidebar li a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: var(--profile-nav-padding-y) var(--profile-nav-padding-x);
    border-radius: var(--profile-nav-radius);
    background: var(--profile-nav-bg);
    color: var(--profile-nav-color);
    font-family: var(--profile-font);
    font-size: var(--profile-nav-font-size);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

body.customers-my_profile-page .profile-nav__list li a:hover,
body.customers-my_profile-page .my_profile_sidebar .nav-sidebar li a:hover {
    background: var(--profile-nav-bg-hover);
    opacity: 1;
}

body.customers-my_profile-page .profile-nav__list li.active a,
body.customers-my_profile-page .my_profile_sidebar .nav-sidebar li.active a {
    background: var(--profile-nav-bg-active);
    color: var(--profile-nav-color-active);
}

/* --- Profile section (generic subsection wrapper) --- */
body.customers-my_profile-page .profile-section {
    display: block;
    width: 100%;
}

body.customers-my_profile-page .profile-section__header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

body.customers-my_profile-page .profile-section__title {
    margin: 0;
    padding: 0;
    font-family: var(--profile-font);
    font-size: var(--profile-title-size);
    font-weight: 700;
    line-height: 1.2;
    color: var(--profile-title-color);
}

body.customers-my_profile-page .profile-section__header-extra {
    flex: 0 0 auto;
}

body.customers-my_profile-page .profile-section__body {
    display: block;
    width: 100%;
}

/* --- Profile form (reusable field system) --- */
body.customers-my_profile-page .profile-form {
    display: grid;
    width: 100%;
    box-sizing: border-box;
}

body.customers-my_profile-page .profile-form--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--profile-form-gap-x);
    row-gap: var(--profile-form-gap-y);
    align-items: start;
}

body.customers-my_profile-page .profile-form__group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    margin: 0;
}

body.customers-my_profile-page .profile-form__group--full {
    grid-column: 1 / -1;
}

body.customers-my_profile-page .profile-form__label {
    display: block;
    margin: 0 0 8px;
    font-family: var(--profile-font);
    font-size: var(--profile-label-size);
    font-weight: 700;
    line-height: 1.3;
    color: var(--profile-label-color);
}

body.customers-my_profile-page .profile-form__label:has(+ .profile-form__control[required])::after,
body.customers-my_profile-page .profile-form__label:has(+ input[required])::after {
    content: ' *';
    color: var(--profile-required-color);
    font-weight: 700;
}

body.customers-my_profile-page .profile-form__control,
body.customers-my_profile-page .profile-form .form-control {
    display: block;
    width: 100%;
    min-width: 0;
    height: var(--profile-input-height);
    min-height: var(--profile-input-height);
    box-sizing: border-box;
    margin: 0;
    padding: 10px 14px;
    background: var(--profile-input-bg);
    border: 1px solid var(--profile-input-border);
    border-radius: var(--profile-input-radius);
    font-family: var(--profile-font);
    font-size: var(--profile-input-size);
    font-weight: 400;
    line-height: 1.35;
    color: var(--profile-input-color);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}

body.customers-my_profile-page .profile-form__control::placeholder {
    color: var(--profile-placeholder-color);
    opacity: 1;
}

body.customers-my_profile-page .profile-form__control:focus,
body.customers-my_profile-page .profile-form .form-control:focus {
    border-color: var(--profile-input-border-focus);
    box-shadow: 0 0 0 3px rgba(227, 62, 38, 0.1);
}

body.customers-my_profile-page .profile-form__control[readonly],
body.customers-my_profile-page .profile-form .form-control[readonly] {
    background: #f7f7f7;
    color: #5a5a5a;
    cursor: default;
}

body.customers-my_profile-page .profile-form__control--select,
body.customers-my_profile-page .profile-form select.form-control {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    cursor: pointer;
}

body.customers-my_profile-page .profile-form__hint {
    display: block;
    margin-top: 6px;
    font-family: var(--profile-font);
    font-size: var(--profile-hint-size);
    font-weight: 400;
    line-height: 1.35;
    color: var(--profile-hint-color);
    cursor: pointer;
}

body.customers-my_profile-page .profile-form__hint:hover {
    color: var(--profile-accent);
    text-decoration: underline;
}

body.customers-my_profile-page .profile-form__error {
    display: block;
    margin-top: 6px;
    font-size: var(--profile-hint-size);
    color: var(--profile-accent);
}

body.customers-my_profile-page .profile-form__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 4px;
    justify-content: flex-start;
}

body.customers-my_profile-page .profile-form__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 28px;
    border: 0;
    border-radius: var(--profile-btn-radius);
    font-family: var(--profile-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, opacity 0.18s ease;
}

body.customers-my_profile-page .profile-form__btn--primary,
body.customers-my_profile-page .profile-form .btn-submit {
    background: var(--profile-btn-bg);
    color: var(--profile-btn-color);
}

body.customers-my_profile-page .profile-form__btn--primary:hover,
body.customers-my_profile-page .profile-form .btn-submit:hover {
    background: var(--profile-btn-bg-hover);
    opacity: 1;
}

body.customers-my_profile-page .profile-form .profile-msg-holder {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* --- Personal data subsection --- */
body.customers-my_profile-page .profile-section--personal-data .profile-section__header {
    position: relative;
}

body.customers-my_profile-page .profile-section--personal-data .social-media-login {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 4px 0 0;
}

body.customers-my_profile-page .profile-section--personal-data .auth-facebook-btn,
body.customers-my_profile-page .profile-section--personal-data .auth-google-btn,
body.customers-my_profile-page .profile-section--personal-data .auth-apple-btn {
    float: none;
    width: 36px;
    height: 36px;
    margin: 0;
    background-size: contain;
    text-indent: -9999px;
    overflow: hidden;
}

body.customers-my_profile-page .profile-section--personal-data .auth-facebook-btn {
    background: url('../../images/facebook-icon-mobile.svg') no-repeat center;
    background-size: 28px 28px;
}

body.customers-my_profile-page .profile-section--personal-data .auth-google-btn {
    background: url('../../images/Google-icon-mobile.svg') no-repeat center;
    background-size: 28px 28px;
}

body.customers-my_profile-page .profile-section--personal-data .auth-apple-btn {
    background: url('../../images/ios-icon-mobile.svg') no-repeat center;
    background-size: 28px 28px;
}

body.customers-my_profile-page .profile-section--personal-data .phone-field,
body.customers-my_profile-page .profile-section--personal-data .email-field {
    position: relative;
}

body.customers-my_profile-page .profile-section--personal-data .phone-field .iti {
    width: 100%;
}

body.customers-my_profile-page .profile-section--personal-data .phone-field .iti input.profile-form__control,
body.customers-my_profile-page .profile-section--personal-data .phone-field .iti input.form-control {
    width: 100%;
    padding-left: 52px;
}

body.customers-my_profile-page .profile-section--personal-data .confirmed {
    position: absolute;
    right: 12px;
    top: calc(8px + var(--profile-label-size) * 1.3 + var(--profile-input-height) / 2);
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    margin: 0;
}

body.customers-my_profile-page .profile-section--personal-data .confirmed.isConfirmed {
    background: url('../../images/confirmed.png') no-repeat center;
    background-size: contain;
}

body.customers-my_profile-page .profile-section--personal-data .confirmed.notConfirmed {
    background: url('../../images/not_confirmed.png') no-repeat center;
    background-size: contain;
}

body.customers-my_profile-page .profile-section--personal-data .verify-btn {
    position: static;
    right: auto;
    bottom: auto;
}

/* --- Account administration --- */
body.customers-my_profile-page .profile-section--change-password {
    margin-bottom: 36px;
}

body.customers-my_profile-page .profile-section--account-actions .profile-section__body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

body.customers-my_profile-page .profile-account-card {
    padding: 22px 0;
    border-top: 1px solid #e6e6e6;
}

body.customers-my_profile-page .profile-section--account-actions .profile-account-card:first-child {
    padding-top: 4px;
    border-top: 0;
}

body.customers-my_profile-page .profile-account-card__title {
    margin: 0;
    font-family: var(--profile-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--profile-label-color);
}

body.customers-my_profile-page .profile-account-card__text {
    margin: 10px 0 0;
    font-family: var(--profile-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--profile-hint-color);
}

body.customers-my_profile-page .profile-account-card .profile-form__btn {
    margin-top: 18px;
}

body.customers-my_profile-page .profile-form__btn--secondary,
body.customers-my_profile-page .profile-account-card .export-data-btn,
body.customers-my_profile-page .profile-account-card .remove-account-btn {
    display: inline-flex;
    background: #8f8f8f;
    color: #ffffff;
}

body.customers-my_profile-page .profile-form__btn--secondary:hover,
body.customers-my_profile-page .profile-account-card .export-data-btn:hover,
body.customers-my_profile-page .profile-account-card .remove-account-btn:hover {
    background: #757575;
    opacity: 1;
}

/* --- Delivery addresses (design: address list with icon actions) --- */
body.customers-my_profile-page .profile-section--delivery-address .profile-section__title {
    margin-bottom: 8px;
}

body.customers-my_profile-page .profile-address-list {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

body.customers-my_profile-page .profile-address-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.customers-my_profile-page .profile-address-list__empty {
    margin: 0 0 12px;
    padding: 18px 0;
    border-bottom: 1px solid #e3e3e3;
    font-family: var(--profile-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--profile-hint-color);
    text-align: left;
}

body.customers-my_profile-page .profile-address-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 18px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e3e3e3;
    border-radius: 0;
    box-sizing: border-box;
}

body.customers-my_profile-page .profile-address-row__text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-family: var(--profile-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
    color: #1a1a1a;
}

body.customers-my_profile-page .profile-address-row__action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.18s ease, opacity 0.18s ease;
}

body.customers-my_profile-page .profile-address-row__action::before {
    content: '';
    display: block;
    flex: 0 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

body.customers-my_profile-page .profile-address-row__action--edit::before {
    width: 22px;
    height: 22px;
    background-image: url('../../images/store_theme/address_edit_ic.svg');
}

body.customers-my_profile-page .profile-address-row__action--delete::before {
    width: 20px;
    height: 22px;
    background-image: url('../../images/store_theme/delete_address_ic.svg');
}

body.customers-my_profile-page .profile-address-row__action:hover {
    background: #f3f3f3;
}

body.customers-my_profile-page .profile-address-row__action:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

body.customers-my_profile-page .profile-address-list__footer {
    display: block;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

body.customers-my_profile-page .profile-address-add {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid #e3e3e3;
    border-radius: 0;
    background: transparent;
    font-family: var(--profile-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
    color: #1a1a1a;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: opacity 0.18s ease;
}

body.customers-my_profile-page .profile-address-add::before {
    content: '';
    display: block;
    flex: 0 0 auto;
    width: 24px;
    height: 26px;
    background: url('../../images/ic_add_location.svg') no-repeat center / contain;
}

body.customers-my_profile-page .profile-address-add:hover {
    opacity: 0.72;
}

body.customers-my_profile-page .profile-address-add:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

body.customers-my_profile-page .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 991px) {
    body.customers-my_profile-page .profile-page__layout,
    body.customers-my_profile-page #my_profile .myProfileMiddle {
        flex-direction: column;
        padding: 24px 24px 28px;
    }

    body.customers-my_profile-page .profile-page__sidebar,
    body.customers-my_profile-page #my_profile .my_profile_sidebar {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
    }

    body.customers-my_profile-page .profile-nav__list,
    body.customers-my_profile-page .my_profile_sidebar .nav-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }

    body.customers-my_profile-page .profile-nav__list li,
    body.customers-my_profile-page .my_profile_sidebar .nav-sidebar li {
        flex: 1 1 auto;
        width: auto;
        min-width: min(100%, 220px);
    }

    body.customers-my_profile-page .profile-nav__list li a,
    body.customers-my_profile-page .my_profile_sidebar .nav-sidebar li a {
        width: 100%;
    }
}

@media (max-width: 767px) {
    body.customers-my_profile-page .storeBox {
        padding: 16px 0 32px;
    }

    body.customers-my_profile-page .profile-page__hero,
    body.customers-my_profile-page #my_profile .myProfileHeader {
        padding: 18px 16px;
    }

    body.customers-my_profile-page .profile-page__hero-name,
    body.customers-my_profile-page .title_my_profile h1 {
        font-size: 24px;
    }

    body.customers-my_profile-page .profile-page__hero-stats,
    body.customers-my_profile-page .orders_sumary {
        width: 100%;
        justify-content: flex-start;
        gap: 16px 20px;
    }

    body.customers-my_profile-page .profile-page__hero-stat,
    body.customers-my_profile-page .orders_sumary .nr_of_orders,
    body.customers-my_profile-page .orders_sumary .customer_since {
        flex: 1 1 120px;
        padding-left: 20px;
    }

    body.customers-my_profile-page .profile-page__hero-stat:first-child,
    body.customers-my_profile-page .orders_sumary .nr_of_orders {
        padding-left: 0;
    }

    body.customers-my_profile-page .profile-page__hero-stat-value,
    body.customers-my_profile-page .orders_sumary .data {
        font-size: 22px;
    }

    body.customers-my_profile-page .profile-page__layout,
    body.customers-my_profile-page #my_profile .myProfileMiddle {
        padding: 20px 16px 24px;
    }

    body.customers-my_profile-page .profile-form--grid {
        grid-template-columns: 1fr;
    }

    body.customers-my_profile-page .profile-section__header {
        flex-direction: column;
        align-items: flex-start;
    }

    body.customers-my_profile-page .profile-section__title {
        font-size: 24px;
    }

    body.customers-my_profile-page .profile-address-row {
        gap: 10px;
        padding: 16px 0;
    }

    body.customers-my_profile-page .profile-address-row__text,
    body.customers-my_profile-page .profile-address-add {
        font-size: 15px;
    }
}

/* --- Profile subpages without dedicated section markup (fallback title) --- */
body.customers-my_profile-page .profile-page__main > h2,
body.customers-my_profile-page .profile-page__main > h3 {
    margin: 0 0 24px;
    font-family: var(--profile-font);
    font-size: var(--profile-title-size);
    font-weight: 700;
    line-height: 1.2;
    color: var(--profile-title-color);
}

/* ==========================================================================
   PROFILE NOTIFICATIONS — customers/my_profile/notifications
   Design ref: assets/images/DESIGN/profile.png (Notificări list)
   Markup: application/views/stores/my_profile/notifications.php
   States:
     .profile-notification--unread  — olvasatlan, piros pont, erős kontraszt
     .profile-notification--read   — olvasott, halvány szürke szöveg
   ========================================================================== */

body.customers-my_profile-page .profile-section--notifications .profile-notifications-list,
body.customers-my_profile-page .profile-section--notifications .notification-holder {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
}

body.customers-my_profile-page .profile-section--notifications .profile-notification-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

body.customers-my_profile-page .profile-section--notifications .profile-notification {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: opacity 0.18s ease;
}

body.customers-my_profile-page .profile-section--notifications .profile-notification-link:hover .profile-notification--read {
    opacity: 0.85;
}

body.customers-my_profile-page .profile-section--notifications .profile-notification__dot {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--profile-accent, #e33e26);
}

body.customers-my_profile-page .profile-section--notifications .profile-notification__dot--placeholder {
    visibility: hidden;
}

body.customers-my_profile-page .profile-section--notifications .profile-notification__body {
    flex: 1 1 auto;
    min-width: 0;
}

body.customers-my_profile-page .profile-section--notifications .profile-notification__row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

body.customers-my_profile-page .profile-section--notifications .profile-notification__title {
    margin: 0;
    padding: 0;
    font-family: var(--profile-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: #1a1a1a;
}

body.customers-my_profile-page .profile-section--notifications .profile-notification__message {
    margin: 0;
    font-family: var(--profile-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    color: #1a1a1a;
}

body.customers-my_profile-page .profile-section--notifications .profile-notification__date {
    flex: 0 0 auto;
    margin: 0;
    font-family: var(--profile-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
    color: #6db33f;
}

/* --- Olvasatlan (új / nem megtekintett) --- */
body.customers-my_profile-page .profile-section--notifications .profile-notification--unread .profile-notification__title,
body.customers-my_profile-page .profile-section--notifications .profile-notification--unread .profile-notification__message {
    color: #1a1a1a;
}

body.customers-my_profile-page .profile-section--notifications .profile-notification--unread .profile-notification__date {
    color: #6db33f;
}

/* --- Olvasott — halvány, design szerint --- */
body.customers-my_profile-page .profile-section--notifications .profile-notification--read .profile-notification__title,
body.customers-my_profile-page .profile-section--notifications .profile-notification--read .profile-notification__message {
    color: #b5b5b5;
    font-weight: 400;
}

body.customers-my_profile-page .profile-section--notifications .profile-notification--read .profile-notification__title {
    font-weight: 700;
}

body.customers-my_profile-page .profile-section--notifications .profile-notification--read .profile-notification__date {
    color: #b5b5b5;
}

body.customers-my_profile-page .profile-section--notifications .profile-notification--read .profile-notification__dot {
    display: none;
}

body.customers-my_profile-page .profile-section--notifications .profile-notification--read .profile-notification__dot--placeholder {
    display: block;
    visibility: hidden;
}

body.customers-my_profile-page .profile-section--notifications .notification-is_new,
body.customers-my_profile-page .profile-section--notifications .notification-destination-type {
    display: none;
}

body.customers-my_profile-page .profile-section--notifications .profile-notifications-empty {
    margin: 8px 0 0;
    font-family: var(--profile-font);
    font-size: 15px;
    color: var(--profile-hint-color);
}

@media (max-width: 640px) {
    body.customers-my_profile-page .profile-section--notifications .profile-notification__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    body.customers-my_profile-page .profile-section--notifications .profile-notification__date {
        white-space: normal;
    }
}

/* PROFILE NOTIFICATIONS END */

body.customers-my_profile-page .profile-section--notification-settings .notification {
    padding: 18px 0;
    border-bottom: 1px solid #e6e6e6;
}

body.customers-my_profile-page .profile-section--notification-settings .notification:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

body.customers-my_profile-page .profile-section--notification-settings .options {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

body.customers-my_profile-page .profile-section--notification-settings .options input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--profile-accent);
}

body.customers-my_profile-page .profile-section--notification-settings .options b {
    font-family: var(--profile-font);
    font-size: 16px;
    font-weight: 700;
    color: var(--profile-label-color);
}

body.customers-my_profile-page .profile-section--notification-settings .notification-description {
    font-family: var(--profile-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--profile-hint-color);
}

/* --- One-click payment / saved cards --- */
body.customers-my_profile-page .profile-section--oneclick .options {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

body.customers-my_profile-page .profile-section--oneclick .options input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--profile-accent);
}

body.customers-my_profile-page .profile-section--oneclick .options b {
    font-family: var(--profile-font);
    font-size: 16px;
    font-weight: 700;
    color: var(--profile-label-color);
}

body.customers-my_profile-page .profile-section--oneclick .notification-description {
    margin-bottom: 22px;
    font-family: var(--profile-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--profile-hint-color);
}

body.customers-my_profile-page .profile-section--oneclick .customer-cards-holder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

body.customers-my_profile-page .profile-section--oneclick .customer-card {
    position: relative;
    min-height: 150px;
    padding: 18px 16px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: linear-gradient(145deg, #ffffff 0%, #f7f7f7 100%);
    box-sizing: border-box;
    cursor: pointer;
}

body.customers-my_profile-page .profile-section--oneclick .customer-card-mask {
    margin-bottom: 12px;
    font-family: var(--profile-font);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #1a1a1a;
}

body.customers-my_profile-page .profile-section--oneclick .customer-card-expiration {
    font-size: 13px;
    color: var(--profile-hint-color);
}

body.customers-my_profile-page .profile-section--oneclick .customer-card-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
}

body.customers-my_profile-page .profile-section--oneclick .customer-card-status {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.customers-my_profile-page .profile-section--oneclick .customer-card-status-active {
    border: 1px solid #2e9b4f;
    color: #2e9b4f;
}

body.customers-my_profile-page .profile-section--oneclick .customer-card-status-expired {
    border: 1px solid #c93620;
    color: #c93620;
}

body.customers-my_profile-page .profile-section--oneclick .customer-card-delete {
    width: 24px;
    height: 24px;
    background: url('../../images/delete_24.png') no-repeat center / 20px 20px;
    cursor: pointer;
}

body.customers-my_profile-page .profile-section--oneclick .customer-default-card-holder.default::after {
    content: 'Default';
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #ececec;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #555;
}

/* --- Coupons --- */
body.customers-my_profile-page .profile-section--coupons .customer-coupon-holder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

body.customers-my_profile-page .profile-section--coupons .customer-coupon {
    position: relative;
    min-height: 110px;
    padding: 14px 14px 14px 92px;
    border-radius: 12px;
    background: var(--profile-accent);
    color: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
}

body.customers-my_profile-page .profile-section--coupons .coupon-store-logo {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background-color: #ffffff;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

body.customers-my_profile-page .profile-section--coupons .coupon-right {
    min-height: 82px;
    padding-left: 12px;
    border-left: 1px dashed rgba(255, 255, 255, 0.65);
}

body.customers-my_profile-page .profile-section--coupons .coupon-store-name {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 700;
}

body.customers-my_profile-page .profile-section--coupons .coupon-label,
body.customers-my_profile-page .profile-section--coupons .coupon-code,
body.customers-my_profile-page .profile-section--coupons .coupon-expiration,
body.customers-my_profile-page .profile-section--coupons .coupon-usage,
body.customers-my_profile-page .profile-section--coupons .coupon-value {
    font-size: 12px;
    line-height: 1.4;
}

body.customers-my_profile-page .profile-section--coupons .coupon-code {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* --- Favorite stores --- */
body.customers-my_profile-page .profile-section--favorite-stores .favorite-stores-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.customers-my_profile-page .profile-section--favorite-stores .profile-favorite-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    background: #ffffff;
}

body.customers-my_profile-page .profile-section--favorite-stores .profile-favorite-row__link {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

body.customers-my_profile-page .profile-section--favorite-stores .profile-favorite-row__logo {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #f3f3f3;
}

body.customers-my_profile-page .profile-section--favorite-stores .profile-favorite-row__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.customers-my_profile-page .profile-section--favorite-stores .profile-favorite-row__name {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--profile-title-color);
}

body.customers-my_profile-page .profile-section--favorite-stores .profile-favorite-row__address {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--profile-hint-color);
}

body.customers-my_profile-page .profile-section--favorite-stores .profile-favorite-row__action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.18s ease, opacity 0.18s ease;
}

body.customers-my_profile-page .profile-section--favorite-stores .profile-favorite-row__action::before {
    content: '';
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 22px;
    background: url('../../images/store_theme/delete_fav_store_ic.svg') no-repeat center / contain;
}

body.customers-my_profile-page .profile-section--favorite-stores .profile-favorite-row__action:hover {
    background: #f3f3f3;
}

body.customers-my_profile-page .profile-section--favorite-stores .profile-favorite-row__action:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

body.customers-my_profile-page .profile-section--favorite-stores .profile-favorite-empty {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--profile-hint-color);
}

/* --- Orders / order history --- */
body.customers-my_profile-page .profile-section--orders .approve_rating_restaurant,
body.customers-my_profile-page .profile-section--orders-history .approve_rating_restaurant {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    background: #fafafa;
    font-family: var(--profile-font);
    font-size: 14px;
    line-height: 1.45;
    color: var(--profile-label-color);
}

body.customers-my_profile-page .profile-section--orders .approve_rating_restaurant input,
body.customers-my_profile-page .profile-section--orders-history .approve_rating_restaurant input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--profile-accent);
}

body.customers-my_profile-page .order-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.customers-my_profile-page .order-history-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

body.customers-my_profile-page .order-history-list-item:hover {
    border-color: #d0d0d0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

body.customers-my_profile-page .ohli-store-logo {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: #f3f3f3;
}

body.customers-my_profile-page .ohli-store-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.customers-my_profile-page .ohli-store-description {
    flex: 1 1 auto;
    min-width: 0;
}

body.customers-my_profile-page .ohli-store-name {
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--profile-title-color);
}

body.customers-my_profile-page .ohli-store-crated {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    color: var(--profile-hint-color);
}

body.customers-my_profile-page .ohli-order-total {
    font-weight: 700;
    color: var(--profile-accent);
}

body.customers-my_profile-page .orders_list .pagination,
body.customers-my_profile-page .profile-section--orders-history .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

body.customers-my_profile-page .orders_list .pagination button,
body.customers-my_profile-page .profile-section--orders-history .pagination button {
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #ffffff;
    font-family: var(--profile-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--profile-label-color);
    cursor: pointer;
}

body.customers-my_profile-page .no-orders-yet {
    padding: 18px 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--profile-hint-color);
}

/* ==========================================================================
   PROFILE ORDER DETAIL — customers/my_profile/orders_history?order_uniqid=…
   Design ref: order detail mockup (Detalii comandă)
   Markup: application/views/stores/my_profile/orders_history_list_detail.php
   ========================================================================== */

body.customers-my_profile-page .profile-section--order-detail .profile-section__body {
    padding-top: 0;
}

body.customers-my_profile-page .profile-order-detail {
    display: block;
    width: 100%;
}

/* --- Top: back + title + meta --- */
body.customers-my_profile-page .profile-order-detail__top {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 22px;
}

body.customers-my_profile-page .profile-order-detail__heading {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

body.customers-my_profile-page .profile-order-detail__back.order-history-detail-black {
    position: relative;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    text-indent: 0;
}

body.customers-my_profile-page .profile-order-detail__back.order-history-detail-black::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-top: -1px;
    border-left: 2px solid #1a1a1a;
    border-bottom: 2px solid #1a1a1a;
    transform: translate(-35%, -50%) rotate(45deg);
}

body.customers-my_profile-page .profile-order-detail__back.order-history-detail-black:hover {
    background: #f3f3f3;
}

body.customers-my_profile-page .profile-order-detail__title {
    margin: 0;
    font-family: var(--profile-font);
    font-size: var(--profile-title-size);
    font-weight: 700;
    line-height: 1.2;
    color: var(--profile-title-color);
}

body.customers-my_profile-page .profile-order-detail__meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-family: var(--profile-font);
    font-size: 14px;
    line-height: 1.3;
    color: var(--profile-hint-color);
}

body.customers-my_profile-page .profile-order-detail__order-no {
    font-weight: 700;
    color: var(--profile-label-color);
}

/* --- Store info bar --- */
body.customers-my_profile-page .profile-order-detail__store-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid #d8d8d8;
}

body.customers-my_profile-page .profile-order-detail__store-logo {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    margin-right: 14px;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1a1a;
}

body.customers-my_profile-page .profile-order-detail__store-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.customers-my_profile-page .profile-order-detail__store-name {
    display: flex;
    align-items: center;
    flex: 1 1 140px;
    min-width: 120px;
    padding: 8px 18px 8px 0;
    border-right: 1px solid #d8d8d8;
    font-family: var(--profile-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--profile-title-color);
}

body.customers-my_profile-page .profile-order-detail__created-at {
    display: flex;
    align-items: center;
    flex: 0 1 200px;
    min-width: 150px;
    padding: 8px 18px;
    border-right: 1px solid #d8d8d8;
    font-family: var(--profile-font);
    font-size: 14px;
    line-height: 1.4;
    color: var(--profile-label-color);
    text-align: center;
}

body.customers-my_profile-page .profile-order-detail__address {
    display: flex;
    align-items: center;
    flex: 1 1 180px;
    min-width: 160px;
    padding: 8px 0 8px 18px;
    font-family: var(--profile-font);
    font-size: 14px;
    line-height: 1.4;
    color: var(--profile-label-color);
    text-align: center;
}

/* --- Order items --- */
body.customers-my_profile-page .profile-order-detail__items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}

body.customers-my_profile-page .profile-order-detail__item-wrap {
    margin: 0;
}

body.customers-my_profile-page .profile-order-detail__item-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #f3f3f3;
}

body.customers-my_profile-page .profile-order-detail__item-name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--profile-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: #1a1a1a;
    text-transform: uppercase;
}

body.customers-my_profile-page .profile-order-detail__item-qty,
body.customers-my_profile-page .profile-order-detail__item-price {
    flex: 0 0 auto;
    font-family: var(--profile-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: #1a1a1a;
    white-space: nowrap;
}

body.customers-my_profile-page .profile-order-detail__item-qty {
    min-width: 56px;
    text-align: center;
}

body.customers-my_profile-page .profile-order-detail__item-price {
    min-width: 72px;
    text-align: right;
}

body.customers-my_profile-page .profile-order-detail__item-extras {
    margin-top: 6px;
    padding: 0 16px 4px;
    font-family: var(--profile-font);
    font-size: 13px;
    line-height: 1.4;
    color: var(--profile-hint-color);
}

/* --- Summary rows with dotted leaders --- */
body.customers-my_profile-page .profile-order-detail__summary {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #d8d8d8;
}

body.customers-my_profile-page .profile-order-detail__summary-row {
    position: relative;
    display: block;
    height: 22px;
    margin-bottom: 16px;
    border-bottom: 1px dotted #c8c8c8;
}

body.customers-my_profile-page .profile-order-detail__summary-row:last-child {
    margin-bottom: 0;
}

body.customers-my_profile-page .profile-order-detail__summary-label {
    position: absolute;
    left: 0;
    bottom: -1px;
    padding-right: 10px;
    background: var(--profile-card-bg, #ffffff);
    font-family: var(--profile-font);
    font-size: 15px;
    line-height: 1.35;
    color: var(--profile-label-color);
}

body.customers-my_profile-page .profile-order-detail__summary-value {
    position: absolute;
    right: 0;
    bottom: -1px;
    padding-left: 10px;
    background: var(--profile-card-bg, #ffffff);
    font-family: var(--profile-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--profile-label-color);
}

/* --- Payment + total --- */
body.customers-my_profile-page .profile-order-detail__footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 18px;
}

body.customers-my_profile-page .profile-order-detail__payment {
    font-family: var(--profile-font);
    font-size: 15px;
    line-height: 1.4;
    color: var(--profile-hint-color);
}

body.customers-my_profile-page .profile-order-detail__payment span {
    color: var(--profile-hint-color);
}

body.customers-my_profile-page .profile-order-detail__total {
    font-family: var(--profile-font);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--profile-accent);
    text-align: right;
}

body.customers-my_profile-page .profile-order-detail__total span {
    font-weight: 600;
}

/* --- Rating --- */
body.customers-my_profile-page .profile-order-detail__rating {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 20px;
}

body.customers-my_profile-page .profile-order-detail__rating .star-img {
    display: block;
    width: 22px;
    height: 22px;
}

body.customers-my_profile-page .profile-order-detail__rating-message {
    flex: 1 1 100%;
    margin: 8px 0 0;
    font-family: var(--profile-font);
    font-size: 14px;
    line-height: 1.45;
    color: var(--profile-hint-color);
}

/* --- Actions --- */
body.customers-my_profile-page .profile-order-detail__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}

body.customers-my_profile-page .profile-order-detail__reorder-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 28px;
    border: 0;
    border-radius: 10px;
    background: var(--profile-accent);
    color: #ffffff;
    font-family: var(--profile-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

body.customers-my_profile-page .profile-order-detail__reorder-btn:hover {
    background: var(--profile-btn-bg-hover);
}

body.customers-my_profile-page .profile-order-detail__feedback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid #e8c4bc;
    border-radius: 10px;
    background: #fff5f2;
    color: var(--profile-accent);
    font-family: var(--profile-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
}

/* --- Order detail: rendeléshez tartozó értesítések (Notificări blokk) --- */
body.customers-my_profile-page .profile-order-detail__notifications {
    margin: 28px 0 22px;
    padding-top: 24px;
    border-top: 1px solid #e0e0e0;
}

body.customers-my_profile-page .profile-order-detail__notifications-title {
    margin: 0 0 16px;
    font-family: var(--profile-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--profile-title-color);
}

body.customers-my_profile-page .profile-order-detail__notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
}

body.customers-my_profile-page .profile-order-detail__notifications .profile-order-detail-notification,
body.customers-my_profile-page .profile-order-detail__notifications .profile-notification {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.customers-my_profile-page .profile-order-detail__notifications .profile-notification__dot {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--profile-accent, #e33e26);
}

body.customers-my_profile-page .profile-order-detail__notifications .profile-notification__dot--placeholder {
    visibility: hidden;
}

body.customers-my_profile-page .profile-order-detail__notifications .profile-notification__body {
    flex: 1 1 auto;
    min-width: 0;
}

body.customers-my_profile-page .profile-order-detail__notifications .profile-notification__row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

body.customers-my_profile-page .profile-order-detail__notifications .profile-notification__title {
    margin: 0;
    padding: 0;
    font-family: var(--profile-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: #1a1a1a;
}

body.customers-my_profile-page .profile-order-detail__notifications .profile-notification__message {
    margin: 0;
    font-family: var(--profile-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    color: #1a1a1a;
}

body.customers-my_profile-page .profile-order-detail__notifications .profile-notification__date {
    flex: 0 0 auto;
    margin: 0;
    font-family: var(--profile-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
    color: #6db33f;
}

body.customers-my_profile-page .profile-order-detail__notifications .profile-notification--unread .profile-notification__title,
body.customers-my_profile-page .profile-order-detail__notifications .profile-notification--unread .profile-notification__message {
    color: #1a1a1a;
}

body.customers-my_profile-page .profile-order-detail__notifications .profile-notification--unread .profile-notification__date {
    color: #6db33f;
}

body.customers-my_profile-page .profile-order-detail__notifications .profile-notification--read .profile-notification__title,
body.customers-my_profile-page .profile-order-detail__notifications .profile-notification--read .profile-notification__message {
    color: #b5b5b5;
    font-weight: 400;
}

body.customers-my_profile-page .profile-order-detail__notifications .profile-notification--read .profile-notification__title {
    font-weight: 700;
}

body.customers-my_profile-page .profile-order-detail__notifications .profile-notification--read .profile-notification__date {
    color: #b5b5b5;
}

body.customers-my_profile-page .profile-order-detail__notifications .profile-notification--read .profile-notification__dot {
    display: none;
}

body.customers-my_profile-page .profile-order-detail__notifications .profile-notification--read .profile-notification__dot--placeholder {
    display: block;
    visibility: hidden;
}

body.customers-my_profile-page .profile-order-detail__notifications .notification-destination-type {
    display: none;
}

@media (max-width: 640px) {
    body.customers-my_profile-page .profile-order-detail__notifications .profile-notification__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    body.customers-my_profile-page .profile-order-detail__notifications .profile-notification__date {
        white-space: normal;
    }
}

body.customers-my_profile-page .profile-order-detail__empty h3 {
    margin: 0;
    font-family: var(--profile-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--profile-title-color);
}

@media (max-width: 768px) {
    body.customers-my_profile-page .profile-order-detail__store-bar {
        flex-direction: column;
        gap: 12px;
    }

    body.customers-my_profile-page .profile-order-detail__store-name,
    body.customers-my_profile-page .profile-order-detail__created-at,
    body.customers-my_profile-page .profile-order-detail__address {
        flex: 1 1 auto;
        width: 100%;
        padding: 0;
        border-right: 0;
        text-align: left;
    }

    body.customers-my_profile-page .profile-order-detail__item-row {
        flex-wrap: wrap;
    }

    body.customers-my_profile-page .profile-order-detail__item-name {
        flex: 1 1 100%;
    }

    body.customers-my_profile-page .profile-order-detail__reorder-btn {
        width: 100%;
    }
}

/* PROFILE ORDER DETAIL END */

/* --- Fidelity --- */
body.customers-my_profile-page .profile-section--fidelity .fidelity-scores {
    margin-bottom: 28px;
}

body.customers-my_profile-page .profile-section--fidelity .fidelity-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

body.customers-my_profile-page .profile-section--fidelity .fidelity-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #ececec;
    font-family: var(--profile-font);
    font-size: 14px;
    line-height: 1.35;
    text-align: center;
    color: var(--profile-label-color);
}

body.customers-my_profile-page .profile-section--fidelity .fidelity-table tr:last-child td {
    border-bottom: 0;
}

body.customers-my_profile-page .profile-section--fidelity .fidelity-points,
body.customers-my_profile-page .profile-section--fidelity .fidelity-point-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--profile-title-color);
}

body.customers-my_profile-page .profile-section--fidelity .fidelity-lable {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--profile-hint-color);
}

body.customers-my_profile-page .profile-section--fidelity .profile-subsection-title {
    margin: 0 0 14px;
    font-family: var(--profile-font);
    font-size: 20px;
    font-weight: 700;
    color: var(--profile-title-color);
}

body.customers-my_profile-page .profile-section--fidelity .fidelity-table--transactions td {
    font-size: 13px;
}

body.customers-my_profile-page .profile-section--fidelity .fidelity-table--transactions tr:first-child td {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--profile-hint-color);
    background: #fafafa;
}

/* --- Feedback modal (orders history) --- */
body.feedback-modal-open {
    overflow: hidden;
}

.feedback-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10055;
    padding: 24px 16px;
    overflow: auto;
    background: rgba(0, 0, 0, 0.62);
    box-sizing: border-box;
}

.feedback-modal-content {
    position: relative;
    width: min(480px, 100%);
    margin: 24px auto;
    padding: 32px 28px;
    border: 0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
}

.feedback-modal-content h2 {
    margin: 0 0 24px;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: #1a1a1a;
}

.feedback-modal-content span.feedback-modal-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: #ffffff url('../../images/x24.png') no-repeat center / 14px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    font-size: 0;
    cursor: pointer;
}

.feedback-modal-content .form-group label,
.feedback-modal-content .form-group span {
    display: block;
    margin-bottom: 6px;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}

.feedback-modal-content .rating-holder {
    margin: 6px 0 20px;
}

.feedback-modal-content .form-group textarea {
    width: 100%;
    min-height: 120px;
    margin: 6px 0 20px;
    padding: 14px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: #1a1a1a;
    resize: vertical;
    box-sizing: border-box;
}

.feedback-modal-content .form-group.submit input.btn-submit.review-submit-btn {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 8px;
    background: #e33e26;
    color: #ffffff;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

/* MY PROFILE END */

/* ==========================================================================
   ADDRESS MODAL — create/edit delivery address
   View: application/views/stores/create_edit_address.php
   JS: assets/js/address_modal.js (injected .address-modal-holder)
   ========================================================================== */

body.address-modal-open {
    overflow: hidden;
}

.address-modal-holder {
    position: fixed;
    inset: 0;
    z-index: 10050;
}

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

.address-modal-holder .address-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    padding: 24px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.62);
    box-sizing: border-box;
}

.address-modal-holder .address-modal-content {
    width: min(980px, 100%);
    margin: 24px auto 40px;
    background: #ffffff;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.address-modal-holder .address-modal-panel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    min-height: 620px;
}

.address-modal-holder .address-left {
    flex: 1 1 56%;
    min-width: 0;
    position: relative;
}

.address-modal-holder .address-rigth {
    flex: 1 1 44%;
    min-width: 0;
    float: none;
    display: block;
    padding: 0;
}

.address-modal-holder #addressMap {
    width: 100%;
    height: 100%;
    min-height: 620px;
    border-radius: 0;
}

.address-modal-holder .address-content {
    position: relative;
    height: 100%;
}

.address-modal-holder .address-content-holder {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 28px 32px 32px;
    box-sizing: border-box;
}

.address-modal-holder .close-address-modal-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #ffffff url('../../images/x24.png') no-repeat center / 14px 14px;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.address-modal-holder .close-address-modal-btn:hover {
    background-color: #f3f3f3;
}

.address-modal-holder .address-header {
    margin: 0 36px 20px 0;
    padding: 0;
}

.address-modal-holder .address-header h3 {
    margin: 0 0 10px;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: #1a1a1a;
}

.address-modal-holder .address-header__hint {
    margin: 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    color: #6b6b6b;
}

.address-modal-holder .my-location {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fde8e4;
    color: #e33e26;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.address-modal-holder .my-location:hover {
    background: #f8d4cd;
    color: #c93620;
}

.address-modal-holder .my-location-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background-color: #e33e26;
    -webkit-mask: url('../../images/ic_my_location_24px.svg') center / contain no-repeat;
    mask: url('../../images/ic_my_location_24px.svg') center / contain no-repeat;
}

.address-modal-holder .address-errors {
    display: none;
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #fde8e4;
    color: #b42318;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

.address-modal-holder .address-from {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.address-modal-holder .address-from .form-group {
    margin: 0;
}

.address-modal-holder .input-field {
    display: block;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #ffffff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.address-modal-holder .input-field:focus-within {
    border-color: #b8b8b8;
    box-shadow: 0 0 0 3px rgba(227, 62, 38, 0.1);
}

.address-modal-holder .input-field input,
.address-modal-holder .input-field textarea,
.address-modal-holder #address_detail {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 11px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    color: #1a1a1a;
    outline: none;
    resize: vertical;
}

.address-modal-holder #address_detail {
    min-height: 108px;
}

.address-modal-holder .address-search-input-holder {
    position: relative;
    width: 100%;
}

.address-modal-holder .address-search-input-holder .input-field {
    padding-right: 42px;
}

.address-modal-holder .search-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 18px;
    height: 18px;
    margin: 0;
    transform: translateY(-50%);
    background: url('../../images/loop18x18.png') no-repeat center / contain;
    pointer-events: none;
}

.address-modal-holder .address-modal-fields-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
}

.address-modal-holder .address-modal-fields-row .form-group {
    flex: 1 1 0;
    min-width: 0;
}

.address-modal-holder .address-content input::placeholder,
.address-modal-holder .address-content textarea::placeholder,
.address-modal-holder #address_detail::placeholder,
.address-modal-holder #address-search-input::placeholder {
    color: #9a9a9a;
    opacity: 1;
}

.address-modal-holder .address-modal-actions {
    margin-top: 8px;
}

.address-modal-holder .address-save-btn {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 20px;
    border: 0;
    border-radius: 8px;
    background: #e33e26;
    color: #ffffff;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.address-modal-holder .address-save-btn:hover {
    background: #c93620;
}

.address-modal-holder .new-address-mode .address-filed,
.address-modal-holder .new-address-mode .address-save-btn,
.address-modal-holder .new-address-mode .address-modal-fields-row,
.address-modal-holder .new-address-mode .address-detail-field {
    display: none !important;
}

.address-modal-holder .pac-container {
    z-index: 10060;
}

@media (max-width: 900px) {
    .address-modal-holder .address-modal-panel {
        flex-direction: column;
        min-height: 0;
    }

    .address-modal-holder .address-left,
    .address-modal-holder .address-rigth {
        flex: 0 0 auto;
        width: 100%;
    }

    .address-modal-holder #addressMap {
        min-height: 280px;
        height: 280px;
    }

    .address-modal-holder .address-content-holder {
        padding: 22px 18px 24px;
    }

    .address-modal-holder .address-header h3 {
        font-size: 22px;
    }
}

/* ==========================================================================
   DELETE ADDRESS MODAL — confirm remove delivery address
   View: application/views/stores/delete_address.php
   JS: assets/js/address_modal.js (injected .address-delete-modal-holder)
   ========================================================================== */

body.address-delete-modal-open {
    overflow: hidden;
}

.address-delete-modal-holder {
    position: fixed;
    inset: 0;
    z-index: 10060;
}

.address-delete-modal-holder .bg {
    display: none;
}

.address-delete-modal-holder .address-delete-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    padding: 24px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.62);
    box-sizing: border-box;
}

.address-delete-modal-holder .address-delete-modal-content {
    width: min(560px, 100%);
    margin: 32px auto;
    background: #ffffff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.address-delete-modal-holder .delete-address-panel {
    display: flex;
    flex-direction: column;
}

.address-delete-modal-holder .delete-address-map-wrap {
    position: relative;
    flex: 0 0 auto;
}

.address-delete-modal-holder #addressDeleteMap,
.address-delete-modal-holder .delete-address-map {
    width: 100%;
    height: 360px;
    min-height: 280px;
    background: #f3f3f3;
}

.address-delete-modal-holder .delete-address-map--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.address-delete-modal-holder .delete-address-map__placeholder {
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: #888888;
}

.address-delete-modal-holder .delete-address-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #ffffff;
    color: #1a1a1a;
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: background-color 0.18s ease, opacity 0.18s ease;
}

.address-delete-modal-holder .delete-address-close:hover {
    background: #f7f7f7;
}

.address-delete-modal-holder .delete-address-close:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

.address-delete-modal-holder .delete-address-body {
    flex: 1 1 auto;
    padding: 32px 36px 36px;
    box-sizing: border-box;
}

.address-delete-modal-holder .delete-address-title {
    margin: 0 0 18px;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
}

.address-delete-modal-holder .delete-address-text {
    margin: 0 0 28px;
}

.address-delete-modal-holder .delete-address-text p {
    margin: 0;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: #1a1a1a;
}

.address-delete-modal-holder .delete-address-text strong {
    font-weight: 700;
}

.address-delete-modal-holder .delete-address-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.address-delete-modal-holder .delete-address-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0;
    padding: 13px 32px;
    border: 0;
    border-radius: 10px;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.address-delete-modal-holder .delete-address-btn--confirm {
    background: #fff0ec;
    color: #e33e26;
}

.address-delete-modal-holder .delete-address-btn--confirm:hover {
    background: #ffe4dc;
}

.address-delete-modal-holder .delete-address-btn--cancel {
    background: #e33e26;
    color: #ffffff;
}

.address-delete-modal-holder .delete-address-btn--cancel:hover {
    background: #c93620;
}

.address-delete-modal-holder .delete-address-btn:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .address-delete-modal-holder .address-delete-modal {
        padding: 16px 12px;
    }

    .address-delete-modal-holder .address-delete-modal-content {
        margin: 24px auto;
        border-radius: 14px;
    }

    .address-delete-modal-holder #addressDeleteMap,
    .address-delete-modal-holder .delete-address-map {
        height: 280px;
    }

    .address-delete-modal-holder .delete-address-body {
        padding: 24px 22px 28px;
    }

    .address-delete-modal-holder .delete-address-title {
        font-size: 20px;
    }

    .address-delete-modal-holder .delete-address-text p {
        font-size: 15px;
    }

    .address-delete-modal-holder .delete-address-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .address-delete-modal-holder .delete-address-btn {
        width: 100%;
    }
}

/* ==========================================================================
   CONTACT MODAL — Contact și raportare
   View: application/views/stores/contact_form.php
   JS: assets/js/contact_modal.js (.contact-modal-holder)
   Trigger: .showContact in stores/main/footer.php
   ========================================================================== */

body.contact-modal-open {
    overflow: hidden;
}

.contact-modal-holder {
    position: fixed;
    inset: 0;
    z-index: 10060;
}

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

.contact-modal-holder .contact-modal,
.contact-modal-holder .contact-modal-content,
.contact-modal-holder .contact-form__close {
    box-sizing: border-box;
}

.contact-modal-holder .contact-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);
    padding: 24px 16px 40px;
}

.contact-modal-holder .contact-modal-content {
    position: relative;
    width: min(520px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 28px 28px 24px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.contact-modal-content .contact-form-holder {
    display: flex;
    flex-direction: column;
}

.contact-modal-content .contact-form__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.contact-modal-content .contact-form__close::before,
.contact-modal-content .contact-form__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background: #1a1a1a;
}

.contact-modal-content .contact-form__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.contact-modal-content .contact-form__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.contact-modal-content .contact-form__close:hover {
    background: #f3f3f3;
}

.contact-modal-content .contact-form__title {
    margin: 0 40px 8px 0;
    color: #1a1a1a;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.contact-modal-content .contact-form__intro {
    margin: 0 0 20px;
    color: #6b6b6f;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

.contact-modal-content .contact-form__field {
    margin-bottom: 14px;
}

.contact-modal-content .contact-form__input,
.contact-modal-content .contact-form__textarea {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    box-sizing: border-box;
    border: 1px solid #d8d8dc;
    border-radius: 8px;
    background: #fff;
    color: #1a1a1a;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.35;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-modal-content .contact-form__textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-modal-content .contact-form__input:focus,
.contact-modal-content .contact-form__textarea:focus {
    border-color: #e4512e;
    box-shadow: 0 0 0 1px rgba(228, 81, 46, 0.25);
}

.contact-modal-content .contact-form__input::placeholder,
.contact-modal-content .contact-form__textarea::placeholder {
    color: #9a9a9e;
}

.contact-modal-content .contact-form__error {
    min-height: 0;
    margin-bottom: 10px;
    color: #c62828;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 13px;
    line-height: 1.4;
}

.contact-modal-content .contact-form__error:empty {
    display: none;
}

.contact-modal-content .contact-form__actions {
    margin-top: 6px;
}

.contact-modal-content .contact-form__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 20px;
    border: 1px solid #e4512e;
    border-radius: 8px;
    background: #e4512e;
    color: #fff;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.contact-modal-content .contact-form__submit:hover {
    background: #cf4525;
    border-color: #cf4525;
}

@media (max-width: 640px) {
    .contact-modal-holder .contact-modal-content {
        padding: 24px 18px 20px;
    }
}

/* CONTACT MODAL END */

/* ==========================================================================
   CUSTOMER REPORT MODAL — Notificare conținut ilegal
   View: application/views/stores/customer_report_form.php
   JS: assets/js/customer_report.js (.cr-contact-modal-holder)
   Trigger: #cr-contact-btn / .customer-report in stores/main/footer.php
   ========================================================================== */

body.cr-contact-modal-open {
    overflow: hidden;
}

.cr-contact-modal-holder {
    position: fixed;
    inset: 0;
    z-index: 10070;
    pointer-events: none;
}

.cr-contact-modal-holder .cr-contact-modal,
.cr-contact-modal-holder .cr-contact-modal-content,
.cr-contact-modal-holder .cr-report__close {
    pointer-events: auto;
}

.cr-contact-modal-holder .bg {
    display: none;
}

.cr-contact-modal-holder .cr-contact-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    padding: 24px 16px 40px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(0, 0, 0, 0.62);
    box-sizing: border-box;
}

.cr-contact-modal-holder .cr-contact-modal-content {
    position: relative;
    width: min(920px, calc(100vw - 32px));
    max-width: 920px;
    max-height: calc(100vh - 48px);
    margin: 0 auto;
    padding: 0;
    background: #ffffff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
    font-family: 'Jost', Roboto, system-ui, -apple-system, sans-serif;
    color: #2c2c2e;
    text-align: left;
    overflow: hidden;
}

/* --- Form shell --- */
.cr-contact-modal-content .cr-holder.cr-report {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 48px);
    font-size: 15px;
    line-height: 1.5;
    color: #3a3a3c;
    overflow: hidden;
}

.cr-contact-modal-content .cr-report__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.cr-contact-modal-content .cr-report__close::before,
.cr-contact-modal-content .cr-report__close::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: #2c2c2e;
}

.cr-contact-modal-content .cr-report__close::before {
    transform: rotate(45deg);
}

.cr-contact-modal-content .cr-report__close::after {
    transform: rotate(-45deg);
}

.cr-contact-modal-content .cr-report__close:hover {
    background: #f3f3f3;
}

.cr-contact-modal-content .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cr-contact-modal-content .cr-report__layout {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(100vh - 48px);
    overflow: hidden;
}

.cr-contact-modal-content .cr-report__main {
    flex: 1 1 58%;
    min-width: 0;
    position: static;
    float: none;
    width: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

.cr-contact-modal-content .cr-report__aside {
    display: flex;
    flex-direction: column;
    flex: 0 1 42%;
    max-width: 42%;
    min-width: 0;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    background: #f5f5f5;
    border-left: 1px solid #e8e8e8;
    border-radius: 0 18px 18px 0;
    overflow: hidden;
    box-sizing: border-box;
}

.cr-contact-modal-content .cr-report__section {
    box-sizing: border-box;
    padding: 28px 28px 24px;
}

.cr-contact-modal-content .cr-report__aside .cr-report__section {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 20px;
}

.cr-contact-modal-content .cr-report__title {
    margin: 0 0 18px;
    padding-right: 40px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: #1a1a1a;
}

.cr-contact-modal-content .cr-report__text {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: #4a4a4a;
}

.cr-contact-modal-content .cr-report__field {
    margin-bottom: 14px;
}

.cr-contact-modal-content .cr-report__textarea,
.cr-contact-modal-content .cr-report__input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    color: #1a1a1a;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cr-contact-modal-content .cr-report__textarea {
    min-height: 88px;
    resize: vertical;
}

.cr-contact-modal-content .cr-report__textarea:focus,
.cr-contact-modal-content .cr-report__input:focus {
    outline: none;
    border-color: #b8b8b8;
    box-shadow: 0 0 0 3px rgba(227, 62, 38, 0.12);
}

.cr-contact-modal-content .cr-report__textarea::placeholder,
.cr-contact-modal-content .cr-report__input::placeholder {
    color: #9a9a9a;
}

.cr-contact-modal-content .cr-report__attachments {
    margin-bottom: 16px;
}

.cr-contact-modal-content .cr-report__attachments-label {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #6b6b6b;
}

.cr-contact-modal-content .cr-report__file-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cr-contact-modal-content .cr-report__file-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px dashed #d0d0d0;
    border-radius: 10px;
    background: #fafafa;
}

.cr-contact-modal-content .cr-report__file-input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: #3a3a3c;
}

.cr-contact-modal-content .cr-report__file-remove {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #6b6b6b;
    cursor: pointer;
}

.cr-contact-modal-content .cr-report__file-remove:hover {
    border-color: #d0d0d0;
    color: #1a1a1a;
}

.cr-contact-modal-content .cr-report__terms {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0 16px;
}

.cr-contact-modal-content .cr-report__checkbox {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: #e33e26;
}

.cr-contact-modal-content .cr-report__terms-label {
    flex: 1 1 auto;
    font-size: 13px;
    line-height: 1.5;
    color: #4a4a4a;
    cursor: pointer;
}

.cr-contact-modal-content .error-message-holer,
.cr-contact-modal-content .cr-report__errors {
    min-height: 0;
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.45;
    font-style: normal;
    color: #b91c1c;
}

.cr-contact-modal-content .cr-report__aside .cr-form-submit-bnt-holder,
.cr-contact-modal-content .cr-report__aside .cr-report__submit-wrap {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-top: auto;
    padding-top: 16px;
    flex-shrink: 0;
}

.cr-contact-modal-content .cr-form-submit-btn,
.cr-contact-modal-content .cr-report__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 12px 24px;
    border: 0;
    border-radius: 10px;
    background: #e33e26;
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.cr-contact-modal-content .cr-form-submit-btn:hover,
.cr-contact-modal-content .cr-report__submit:hover {
    background: #c93620;
}

@media (max-width: 768px) {
    .cr-contact-modal-holder .cr-contact-modal {
        padding: 12px 8px 24px;
    }

    .cr-contact-modal-holder .cr-contact-modal-content {
        width: 100%;
        max-height: calc(100vh - 36px);
        border-radius: 14px;
    }

    .cr-contact-modal-content .cr-holder.cr-report {
        max-height: calc(100vh - 36px);
    }

    .cr-contact-modal-content .cr-report__layout {
        flex-direction: column;
        min-height: 0;
        max-height: none;
    }

    .cr-contact-modal-content .cr-report__main,
    .cr-contact-modal-content .cr-report__aside {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
    }

    .cr-contact-modal-content .cr-report__aside {
        border-left: 0;
        border-top: 1px solid #e8e8e8;
        border-radius: 0 0 14px 14px;
    }

    .cr-contact-modal-content .cr-report__section {
        padding: 22px 18px 24px;
    }

    .cr-contact-modal-content .cr-report__aside .cr-report__section {
        padding-bottom: 24px;
    }

    .cr-contact-modal-content .cr-report__aside .cr-form-submit-bnt-holder,
    .cr-contact-modal-content .cr-report__aside .cr-report__submit-wrap {
        width: 100%;
        margin-top: 20px;
        padding-top: 0;
    }
}

/* CUSTOMER REPORT MODAL END */

/* ==========================================================================
   THANK YOU PAGE
   Body: .restaurants-thankyou-page
   ========================================================================== */

body.restaurants-thankyou-page {
    --ty-page-bg: #f3f3f5;
    --ty-card-bg: #fff;
    --ty-card-radius: 12px;
    --ty-card-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    --ty-text: #1a1a1a;
    --ty-muted: #6b6b6f;
    --ty-accent: #e4512e;
    --ty-border: #d8d8dc;
    --ty-info-bg: #f3f3f5;
    --ty-font: Roboto, system-ui, -apple-system, sans-serif;
}

body.restaurants-thankyou-page #wrapper,
body.restaurants-thankyou-page .content {
    background: var(--ty-page-bg);
}

body.restaurants-thankyou-page .storeBox.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    box-sizing: border-box;
}

body.restaurants-thankyou-page .storeWrapper {
    margin-top: 0;
}

body.restaurants-thankyou-page .thankYouWrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
}

body.restaurants-thankyou-page .thankYouWrap .ty-info-content,
body.restaurants-thankyou-page .thankYouWrap .ty-order-detail.od-wrapper {
    width: 100%;
    box-sizing: border-box;
    background: var(--ty-card-bg);
    border-radius: var(--ty-card-radius);
    box-shadow: var(--ty-card-shadow);
}

body.restaurants-thankyou-page .thankYouWrap .ty-info-content {
    padding: 32px 28px 28px;
}

body.restaurants-thankyou-page .thankYouWrap .ty-payment-alert {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 8px;
    font-family: var(--ty-font);
    font-size: 14px;
    line-height: 1.4;
}

body.restaurants-thankyou-page .thankYouWrap .ty-message-holder {
    text-align: center;
    margin-bottom: 28px;
}

body.restaurants-thankyou-page .thankYouWrap .ty-success-icon {
    display: flex;
    justify-content: center;
    margin: 0 0 18px;
}

body.restaurants-thankyou-page .thankYouWrap .ty-success-icon img {
    display: block;
    width: 80px;
    height: 80px;
}

body.restaurants-thankyou-page .thankYouWrap .ty-message {
    margin: 0 0 8px;
    color: var(--ty-text);
    font-family: var(--ty-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

body.restaurants-thankyou-page .thankYouWrap .ty-sub-message {
    margin: 0;
    color: var(--ty-muted);
    font-family: var(--ty-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
}

body.restaurants-thankyou-page .thankYouWrap .ty-info-holder {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 24px;
}

body.restaurants-thankyou-page .thankYouWrap .ty-info-box {
    min-width: 0;
    padding: 14px 10px;
    border-radius: 8px;
    background: var(--ty-info-bg);
    text-align: center;
}

body.restaurants-thankyou-page .thankYouWrap .ty-info-box-label {
    margin: 0 0 6px;
    color: var(--ty-muted);
    font-family: var(--ty-font);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

body.restaurants-thankyou-page .thankYouWrap .ty-info-box-value {
    color: var(--ty-text);
    font-family: var(--ty-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    word-break: break-word;
}

body.restaurants-thankyou-page .thankYouWrap .ty-btn-holder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

body.restaurants-thankyou-page .thankYouWrap .ty-call-store-btn,
body.restaurants-thankyou-page .thankYouWrap .ty-reorder-btn {
    flex: 1 1 220px;
    min-height: 48px;
    margin: 0;
    padding: 12px 16px;
    box-sizing: border-box;
    border-radius: 8px;
    font-family: var(--ty-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.restaurants-thankyou-page .thankYouWrap .ty-call-store-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--ty-accent);
    background: #fff;
    color: var(--ty-accent);
}

body.restaurants-thankyou-page .thankYouWrap .ty-call-store-btn:hover {
    background: rgba(228, 81, 46, 0.06);
}

body.restaurants-thankyou-page .thankYouWrap .ty-call-store-btn .btn-left {
    text-align: left;
}

body.restaurants-thankyou-page .thankYouWrap .ty-call-store-btn .btn-right {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

body.restaurants-thankyou-page .thankYouWrap .ty-reorder-btn {
    border: 1px solid var(--ty-accent);
    background: var(--ty-accent);
    color: #fff;
}

body.restaurants-thankyou-page .thankYouWrap .ty-reorder-btn:hover {
    background: #cf4525;
    border-color: #cf4525;
}

body.restaurants-thankyou-page .thankYouWrap .ty-notification-footer {
    margin-top: 24px;
    text-align: center;
}

/* Order detail card */
body.restaurants-thankyou-page .thankYouWrap .ty-order-detail.od-wrapper {
    padding: 28px 28px 24px;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__title {
    margin: 0 0 22px;
    color: var(--ty-text);
    font-family: var(--ty-font);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__store-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--ty-border);
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__store-logo {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    margin-right: 14px;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1a1a;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__store-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__store-name {
    display: flex;
    align-items: center;
    flex: 1 1 120px;
    min-width: 100px;
    padding: 8px 18px 8px 0;
    border-right: 1px solid var(--ty-border);
    color: var(--ty-text);
    font-family: var(--ty-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__created-at {
    display: flex;
    align-items: center;
    flex: 1 1 140px;
    min-width: 120px;
    padding: 8px 18px;
    border-right: 1px solid var(--ty-border);
    color: var(--ty-text);
    font-family: var(--ty-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__address {
    display: flex;
    align-items: center;
    flex: 1 1 180px;
    min-width: 140px;
    padding: 8px 0 8px 18px;
    color: var(--ty-text);
    font-family: var(--ty-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px 16px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--ty-info-bg);
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__item-name {
    min-width: 0;
    color: var(--ty-text);
    font-family: var(--ty-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__item-qty,
body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__item-price {
    color: var(--ty-text);
    font-family: var(--ty-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__item-price {
    font-weight: 700;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__item-extras {
    margin: -4px 0 0;
    padding: 0 16px 4px;
    color: var(--ty-muted);
    font-family: var(--ty-font);
    font-size: 12px;
    line-height: 1.4;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__summary {
    margin-bottom: 18px;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__summary-row {
    position: relative;
    height: 22px;
    margin-bottom: 14px;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__summary-row:last-child {
    margin-bottom: 0;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__summary-row::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px dotted #c8c8cc;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__summary-label,
body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__summary-value {
    position: absolute;
    top: 0;
    background: var(--ty-card-bg);
    color: var(--ty-text);
    font-family: var(--ty-font);
    font-size: 15px;
    line-height: 22px;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__summary-label {
    left: 0;
    padding-right: 10px;
    font-weight: 400;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__summary-value {
    right: 0;
    padding-left: 10px;
    font-weight: 600;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
    padding-top: 4px;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__payment {
    color: var(--ty-muted);
    font-family: var(--ty-font);
    font-size: 14px;
    line-height: 1.35;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__payment span {
    font-weight: 500;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__total {
    color: var(--ty-accent);
    font-family: var(--ty-font);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__total span {
    font-weight: 700;
}

@media (max-width: 640px) {
    body.restaurants-thankyou-page .storeBox.container {
        padding: 16px 12px 32px;
    }

    body.restaurants-thankyou-page .thankYouWrap .ty-info-content,
    body.restaurants-thankyou-page .thankYouWrap .ty-order-detail.od-wrapper {
        padding: 24px 18px 20px;
    }

    body.restaurants-thankyou-page .thankYouWrap .ty-message {
        font-size: 20px;
    }

    body.restaurants-thankyou-page .thankYouWrap .ty-info-holder {
        grid-template-columns: 1fr;
    }

    body.restaurants-thankyou-page .thankYouWrap .ty-btn-holder {
        flex-direction: column;
    }

    body.restaurants-thankyou-page .thankYouWrap .ty-call-store-btn,
    body.restaurants-thankyou-page .thankYouWrap .ty-reorder-btn {
        flex: 1 1 auto;
        width: 100%;
    }

    body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__store-name,
    body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__created-at,
    body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__address {
        flex: 1 1 100%;
        border-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__item {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
    }

    body.restaurants-thankyou-page .thankYouWrap .ty-order-detail__item-price {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }
}

/* THANK YOU PAGE END */