/*
 * Base Styles & Utilities
 */
:root {
    scroll-padding-top: 50px;

    @media (min-width: 640px) {
        scroll-padding-top: 100px;
    }
}

.mt-0 {
    margin-top: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mt-1 {
    margin-top: 1rem !important;
}

.mb-1 {
    margin-bottom: 1rem !important;
}

.mt-2 {
    margin-top: 2rem !important;
}

.mt-3 {
    margin-top: 3rem !important;
}

.mb-2 {
    margin-bottom: 2rem !important;
}

.mb-3 {
    margin-bottom: 3rem !important;
}

.word-wrap-break-word {
    word-break: break-word;
}

.error-message {
    width: 100%;
    color: red;
    font-weight: bold;
}

/*
 * Animations
 */
@-moz-keyframes spin {
    100% { -moz-transform: rotate(360deg); }
}

@-webkit-keyframes spin {
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*
 * Layout Adjustments
 */
.shop-archive-header,
.pizzaro-secondary-navigation,
.pizzaro-handheld-footer-bar,
.pizzaro-breadcrumb,
.pizzaro-sorting,
.footer-about-info,
.footer-map,
aside[aria-label="Footer menu"]:nth-of-type(2) {
    display: none;
}

.woocommerce-page .site-footer,
aside[aria-label="Footer menu"] {
    margin-bottom: 0;
    position: relative;
    z-index: 8;
}

/* Every surface that renders the shop app, not just the archive.
   .single-product is included because /product/<slug>/ renders this same app
   (woocommerce/single-product.php); without it a product URL missed the
   4.2rem and sat flush against the header while /shop/ did not. */
.woocommerce-shop #content,
.single-product #content {
    padding-top: 0;

    @media (min-width: 640px) {
        padding-top: 4.2rem;
    }
}

@media(max-width:640px) {
    .woocommerce #content .col-full {
        padding: 0;
    }
    .left-sidebar:not(.pizzaro-sidebar-header).list-view .site-content {
        padding-top: 0;
    }
}

/*
 * Header
 */
.el-header {
    background-color: #FFF;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: auto;
    margin-bottom: 2rem;
    padding-left: 0;
    padding-right: 0;
    position: relative;
}

.el-header .el-dropdown-link {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.el-header .el-input__wrapper {
    padding: 0;
}

.el-header .el-input__wrapper .el-input__inner {
    border: 0;
}

.el-header .el-input__suffix {
    position: absolute;
    right: 10px;
}

@media(max-width:640px) {
    .el-header {
        padding: 2rem 0 0;
        margin-bottom: 3rem;
        flex-wrap: wrap;
    }
}

/*
 * Header Cart
 */
.header-cart .el-button {
    border: 0;
    font-size: 1.6rem;
}

.header-cart .el-button div {
    font-size: 1.4rem;
}

.header-cart .el-button .bold {
    font-weight: 700;
    border-bottom: 1px solid #000;
}

.header-cart .el-button i {
    font-size: 1.8rem;
    margin-right: 5px;
}

.header-cart .el-button:hover,
.header-cart .el-button:active,
.header-cart .el-button:focus {
    background-color: transparent;
}

@media(max-width:640px) {
    .header-cart {
        height: 62px;
    }
    .header-cart .el-button {
        height: 100%;
        background-color: #FFF;
        border-radius: 0;
        border-left: 1px solid #EEE;
    }
}

/*
 * Product Category Heading
 */
.product_category_heading {
    padding-bottom: 14px;
    line-height: 1.8rem;
    font-size: 1.3rem;
}

.product_category_heading-title {
    font-weight: 800 !important;
    margin-bottom: 5px;
}

/*
 * Product Card
 */
.category-product {
    display: flex !important;
    align-items: center;
}

.product_card {
    display: flex;
    width: 100%;
    cursor: pointer;
    margin-bottom: 20px;
    position: relative;
    min-height: 160px;
    border-radius: 4px;
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: 0 0px 0 1px var(--el-border-color);
}

.product_card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/* !important: tenant "Additional CSS" / digin-child-overrides.css load after
   this file and have been seen re-anchoring the card image to the left on
   mobile; the image must always crop from the center at every viewport. */
.product_card-image {
    width: 40%;
    float: left;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
}

.product_card:hover .product_card-image {
    opacity: 0.7;
}

.product_card-details {
    width: 60%;
    position: relative;
    float: left;
    padding: 5px 10px;
}

.product_card-title {
    font-size: 1.7rem;
    font-weight: 700 !important;
    color: #000;
}

.product_card-description {
    font-size: 1.15rem;
    line-height: 1.35rem;
    margin: 0;
    color: rgba(0,0,0,.6);
}

.product_card-attributes {
    display: flex;
}

.product_card-attributes-child {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    margin-right: 8px;
}

span.product_card-attributes-title {
    font-size: 12px;
    line-height: 14px;
    font-weight: 700;
}

span.subscription-indicator {
    background-color: red;
    color: #FFF;
    padding: 2px 8px;
    font-size: 10px;
    line-height: 12px;
    margin-bottom: 2px;
    display: inline-block;
    border-radius: 8px;
}

.product_card-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 6px 8px;
}

.product_card-price-amount {
    font-weight: bold;
    color: #000;
    line-height: 1.8rem;
    font-size: 1.3rem;
    display: flex;
    flex-direction: column;
}

.product_card-btn {
    border-radius: 50%;
    width: 34px;
    height: 34px;
    transition: all 0.15s linear;
}

.product_card-btn:hover {
    transform: rotate(90deg);
}

.product_card-btn-loading {
    width: 18px;
    height: 18px;
    -webkit-animation: spin 0.4s linear infinite;
    -moz-animation: spin 0.4s linear infinite;
    animation: spin 0.4s linear infinite;
}

/* A card with no photo is not a photo card with a hole in it.

   The image element is v-if'd away entirely, so .product_card-details takes
   the full width — but the card keeps the 160px min-height sized for a photo
   (138px at two-columns) and .product_card-price stays absolutely pinned to
   the bottom, which is what keeps a mixed row lined up with the photo cards
   beside it. Both of those are worth keeping; what they left behind was the
   title stranded at the top and the price at the bottom with ~110px of blank
   card between them, reading as a failed image rather than a deliberate text
   entry.

   Most of these items have no description to fill it with either: of the 22
   products without a photo on the demo tenants, the drinks and the sides
   carry neither photo nor text, so the gap is the whole card. Centring the
   text block in the space the image would have occupied closes it without
   touching the card's height. */
.product_card.no-image .product_card-details {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* The price is absolutely positioned over this box, so its height has to
       come out of the padding rather than the flow: 6px of its own padding
       plus the 34px add button, plus room to breathe. */
    padding: 10px 14px 46px;
}

/* h4 carries the UA's 1.33em margins, which the photo card absorbs inside its
   160px floor but a full-width text card does not: with the price reservation
   below, a two-line name pushed the card to 190px and a three-line one to
   221px — taller than the photo cards beside it, which is the same raggedness
   from the other direction. The centring below is what spaces the title now,
   so the margins are not needed. */
.product_card.no-image .product_card-title {
    margin: 0;
}

.product_card.no-image .product_card-description {
    margin-top: 6px;
}

/* Stretch to the flex line rather than to the card's own content. el-col is
   the flex item and already stretches; the card inside it is width:100% but
   not height:100%, so a text card sat at its own 160px floor beside a photo
   card whose name wrapped to 175px on the same line.

   Not the vertical or small-image variants: those stack the image above the
   details and set height:auto deliberately, and this selector would outrank
   it. Only the side-by-side cards have a column to line up against. */
.product_card.no-image:not(.product_card-vertical):not(.product_card_small-image) {
    /* minus the card's own margin-bottom, which is part of the column's height
       but not part of the card's: a plain 100% overshot by exactly that 20px
       and made every text card 180px against a 160px photo card. */
    height: calc(100% - 20px);
}

/* The vertical and small-image cards stack their image above the details and
   already reserve their own bottom padding for the price; they need the
   centring but not a second reservation. */
.product_card-vertical.no-image .product_card-details,
.product_card_small-image.no-image .product_card-details {
    padding-bottom: 40px;
}

.product_card.product_card-right-image .product_card-details {
    position: static;
    z-index: 1;
}

/*
 * Product Card - Layout Fixes
 */
/* One Column Layout Fixes */
.one-column .product_card-image {
    width:32%;
    min-height: 210px;
}

.one-column .product_card-details {
    width:78%;
}

@media (max-width: 640px) {
    /* One Column Layout Fixes */
    .one-column .product_card-image {
        width: 50%;
        min-height: auto;
    }
    
    .one-column .product_card-details {
        width: 50%;
    }
}

/* Two Columns Layout Fixes */
.two-columns.product_card {
    min-height: 138px;
}
.two-columns .product_card-image {
    width: 30%;
}
.two-columns .product_card-details {
    width: 70%;
}

/*
 * Product Cards Vertical
 */
.product_card-vertical {
    flex-direction: column;
    height: auto;
}

.product_card-vertical .product_card-image {
    width: 100%;
    height: 148px;
}

.product_card-vertical .product_card-details {
    width: 100%;
    padding-bottom: 40px;
    min-height: 164px;
}

.product_card-vertical .product_card-price {
    padding: 8px 10px;
}

/*
 * Product Cards Small Images
 */
.product_card_small-image {
    flex-direction: column;
    height: auto;
}

.two-columns.product_card_small-image {
    height: auto;
}

.product_card_small-image:hover {
    box-shadow: 0 0px 0 1px var(--el-border-color), 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.product_card_small-image .product_card-details {
    position: static;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    min-height: 136px;
    align-items: center;
}

.product_card_small-image .product_card-innerdetails {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
}

.product_card_small-image .product_card-image {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 10px;
    object-fit: cover;
    overflow: hidden;
}

.two-columns.product_card_small-image .product_card-image {
    width: 110px;
    height: 110px;
}

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

.product_card_small-image .product_card-price {
    position: relative;
}

/*
 * El Card Specific
 */
.el-card .subscription-indicator {
    position: absolute;
    top: -12px;
    right: 10px;
    background-color: #C40C0C;
    color: #FFF;
    font-size: 10px;
    padding: 4px 8px;
    line-height: 12px;
}

.el-card .subscription-indicator:after {
    content: "";
    display: block;
    position: absolute;
    left: -12px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 12px solid #e83c3c;
}

/*
 * Shopping Cart Product
 */
.shopping_cart_product {
    padding: 8px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    border: 1px solid var(--el-border-color);
    position: relative;
    min-height: 100px;
    align-items: center;
}

.shopping_cart_product-buttons {
    display: flex;
    flex-direction: row;
}

.shopping_cart_product-buttons .el-button {
    width: 32px;
    height: 32px;
    margin: 0 5px 0 5px !important;
    border-radius: 50%;
}

.shopping_cart_product-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.shopping_cart_product-action {
    display: flex;
    flex-direction: row;
}

.shopping_cart_product-quantity {
    display: flex;
    align-items: center;
    padding: 0;
    margin-right: 12px;
}

.shopping_cart_product-quantity-btn {
    border-radius: 50%;
    width: 28px;
    height: 28px;
}

.shopping_cart_product-holder {
    min-width: 50px;
    text-align: center;
    background-color: #EEE;
    border-radius: 30px;
    margin: 0 4px;
    min-height: 28px;
    align-items: center;
    display: flex;
    justify-content: center;
}

.shopping_cart_product-data {
    font-size: 1.2rem;
    line-height: 1.8rem;
    display: flex;
    flex-direction: column;
    min-height: 80px;
    justify-content: center;
}

.shopping_cart_product-data h5 {
    font-size: 1.7rem;
    font-weight: 700;
    color: #000;
    margin: 0 0 0.4rem;
    cursor: pointer;
}

.shopping_cart_product-price {
    font-weight: 800;
}

.shopping_cart_product-attributes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shopping_cart_product-attributes li {
    display: inline-block;
}

.shopping_cart_product-variation {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 6px;
}

.shopping_cart_product-image {
    position: relative;
    width: 76px;
    height: 76px;
    overflow: hidden;
    margin-right: 10px;
    border: 4px solid #CCC;
    font-size: 32px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    display: flex;
    float: left;
    font-weight: 700;
    background-color: #111;
    color: #FFF;
}

.shopping_cart_product-image-element {
    position: absolute;
    height: auto;
}

.shopping_cart_product-image-qty {
    position: relative;
    z-index: 2;
    text-shadow: 2px 1px 0px #000;
}

/*
 * Cart line detail (dl.variation) is styled once in the theme's style.css, which
 * loads on the shop page and the checkout alike, so the drawer and the order
 * review cannot drift apart. Nothing to add here.
 */

/*
 * Vue App Container
 */
.vue-app-container {
    min-height: 90vh;
    width: 100%;
}

#vue-app {
    width: 100%;
    min-height: 500px;
    /* clip, not hidden.
     *
     * The page has no horizontal overflow once it has settled — the body's
     * overflow-x: hidden propagates to the viewport and holds it — but a node
     * can exceed the width while the app is rendering itself, and a scrollbar
     * that appears and goes again is a visible flicker and a reflow of
     * everything below it. This pins the shop's own subtree so that cannot
     * happen at any point.
     *
     * `hidden` would be the wrong tool: an element with overflow-x: hidden and
     * overflow-y: visible has its overflow-y computed to auto, which would make
     * #vue-app a scroll container of its own — an inner scroller that the body
     * lock does not reach, so the menu would scroll behind an open dialog.
     * `clip` leaves the other axis visible and creates no scroll container. It
     * is ignored by browsers that do not know it, which leaves them exactly
     * where they are today rather than worse. */
    overflow-x: clip;
}

#vue-app .heading {
    font-family: 'Roboto', serif !important;
    font-weight: 800;
    font-size: 2.5rem;
}

#vue-app i {
    font-family: "Font Awesome 6 Pro";
}

#vue-app .category-products {
    scroll-margin-top: 40px;
}

#vue-app > .el-container {
    padding-top: 0;
    overflow: hidden;
}

.el-container .el-main {
    padding-top: 0;
    overflow: hidden;
}

.product-card {
    margin-bottom: 2rem;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.product-card:hover {
    box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.22);
}

.el-row.category-products {
    margin-bottom: 2rem;
    position: relative;
}

@media(max-width:640px) {
    #vue-app > .el-container {
        flex-direction: column;
    }
    #vue-app .category-products {
        scroll-margin-top: 100px;
    }
}

/*
 * Sidebar
 */
#sidebar-container .menu-select {
    @media (max-width: 640px) {
        border-bottom: 1px solid #EEE;
    }
}

.shop-sidebar.vertical {
    width:170px;
}

.layout-one-column .shop-sidebar.vertical {
    width:230px;
}

/* !important: tenant "Additional CSS" sometimes pins .shop-sidebar /
   #sidebar-container to a fixed desktop width; the horizontal (mobile)
   header bar must always span the full viewport. */
.shop-sidebar.horizontal,
.shop-sidebar.horizontal #sidebar-container {
    width: 100% !important;
}

.shop-sidebar.vertical {
    overflow: hidden;
}

.shop-sidebar.horizontal .el-select {
    width: 100%;
}

.shop-sidebar .fixed {
    position: fixed;
    top: 0;
    width: 170px;
    overflow: hidden;
}

.layout-one-column .shop-sidebar .fixed  {
    width:230px;
}

@media(max-width:640px) {
    .shop-sidebar .fixed {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 20;
    }
    
    .layout-one-column .shop-sidebar .fixed  {
        width:100%;
    }

}

.shop-sidebar.horizontal .el-menu {
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.shop-sidebar.horizontal .el-menu::-webkit-scrollbar {
    display: none;
}

/* Category names must never shrink or wrap in the horizontal (mobile) bar —
   the menu is a flex row, so without this, long category lists squeeze each
   item and labels get cut off / overlap. The bar scrolls sideways instead. */
.shop-sidebar.horizontal .el-menu .el-menu-item {
    flex-shrink: 0;
    white-space: nowrap;
}

.shop-sidebar.horizontal .el-menu .el-menu-item span {
    white-space: nowrap;
}

/* Long category lists scroll inside the sidebar on large screens —
   the (fixed) sidebar container clips overflow, so without this any
   category past the viewport bottom was simply unreachable */
@media (min-width: 992px) {
    .shop-sidebar.vertical .el-menu {
        min-height: 70vh; /* short lists still hold a solid column */
        max-height: calc(100vh - 155px); /* menu selector + hours line + breathing room */
        overflow-y: auto;
        overflow-x: hidden; /* overflow-y:auto alone computes overflow-x to auto,
                               inviting a sideways scrollbar on any long label */
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #ccc transparent;
    }
    .shop-sidebar.vertical .el-menu::-webkit-scrollbar {
        width: 6px;
    }
    .shop-sidebar.vertical .el-menu::-webkit-scrollbar-thumb {
        background: #ccc;
    }
    .shop-sidebar.vertical .el-menu::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* Today's hours for the selected menu (custom hours) or the store (default),
   shown as a subtitle right below the menu name inside the switcher block */
.shop-sidebar .menu-select-inner {
    flex: 1;
    min-width: 0;
}

/* The dropdown arrow anchors to the name line's input box; with the hours
   line below, the switcher reads as a two-line block — shift the arrow by
   half the hours line so it centers on the whole block */
.shop-sidebar .menu-select-inner:has(.menu-hours-info) .el-select .el-input__suffix {
    transform: translateY(10px);
}

.shop-sidebar .menu-select .el-input__suffix .el-icon {
    font-size: 20px; /* Element Plus default caret is 14px */
}

.shop-sidebar .menu-hours-info {
    /* 21px = .el-input__wrapper padding (15px) + .el-input__inner padding (6px),
       so the time starts exactly under the menu name's first letter */
    padding: 0 21px 2px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: #777;
    cursor: pointer; /* opens the menu switcher, same as the name above it */
}

.shop-sidebar .menu-active {
    font-weight: 700;
}

.shop-sidebar .el-menu {
    border: 0;
    border-bottom: 0;
}

.shop-sidebar .el-menu-item {
    height: 40px;
    border-bottom: 1px solid #EEE;
}

.shop-sidebar .el-menu-item.is-active,
.shop-sidebar .el-menu--horizontal > .el-menu-item.is-active {
    color: var(--el-menu-text-color) !important;
}

.shop-sidebar .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: 0;
}

/* Long category names wrap in the narrow vertical sidebar. Element Plus
   fixes menu items at 40px with a 40px line-height, so wrapped lines spill
   over neighboring items — let the item grow with its content instead.
   The extra .vertical class keeps this above Element Plus's own
   `.el-menu--vertical:not(...):not(...) .el-menu-item { white-space: nowrap }`
   (0,4,0) rule, which otherwise wins and forces horizontal overflow. */
.shop-sidebar.vertical .el-menu--vertical .el-menu-item {
    transition: font-weight 0.2s ease;
    height: auto;
    min-height: 40px;
    line-height: 1.35;
    padding-top: 9px;
    padding-bottom: 9px;
    white-space: normal;
    overflow-wrap: anywhere; /* single unbroken words still can't widen the column */
}

.shop-sidebar .el-menu--vertical .el-menu-item:hover {
    background-color: transparent;
    font-weight: 700;
}

.shop-sidebar .el-menu--vertical .el-menu-item.menu-active {
    position: relative;
}

.shop-sidebar .el-menu--vertical .el-menu-item::after {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 6px;
    height: 0;
    content: "";
    background-color: #111;
    transition: all 0.2s ease-in-out;
}

.shop-sidebar .el-menu--vertical .el-menu-item.menu-active::after {
    height: 100%;
}

.shop-sidebar .el-menu--horizontal > .el-menu-item.menu-active {
    color: var(--el-menu-text-color);
    border-bottom: 2px solid var(--el-menu-text-color);
}

.shop-sidebar .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.shop-sidebar .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    background-color: #FFF;
}

/* The arrows live OUTSIDE the scrolling el-menu, pinned to this wrapper —
   inside the scroller they had to chase scrollLeft with inline styles and
   visibly jittered while scrolling */
.shop-sidebar .menu-scroll {
    position: relative;
}

.shop-sidebar .menu-slide {
    padding: 0;
    height: 40px;
    position: absolute;
    top: 0;
    z-index: 1;
}

.shop-sidebar .menu-slide button {
    height: 100%;
    border-top: 0;
    border-color: #EEE;
    border-radius: 0;
}

.shop-sidebar .menu-slide button:hover,
.shop-sidebar .menu-slide button:active,
.shop-sidebar .menu-slide button:focus {
    background-color: #FFF;
    color: var(--el-button-text-color);
}

.shop-sidebar .menu-slide.next {
    right: 0;
}

.shop-sidebar .menu-slide.prev {
    left: 0;
}

.shop-sidebar .el-select .el-input__inner {
    padding: 0 0.6rem;
    border: 0;
}

.shop-sidebar .el-select .el-input__wrapper {
    border-radius: 99px;
}

.shop-sidebar .el-select .el-input__wrapper,
.shop-sidebar .el-select:hover:not(.el-select--disabled) .el-input__wrapper,
.shop-sidebar .el-select .el-input.is-focus .el-input__wrapper,
.shop-sidebar .el-select .el-input:focus-within .el-input__wrapper {
    box-shadow: none !important;
}

.shop-sidebar .menu-select {
    margin-bottom: 1rem;
}

/* desktop: separate the switcher block (name + hours) from the category list,
   matching the #EEE dividers the category items already use */
.shop-sidebar.vertical .menu-select {
    padding-bottom: 12px;
    border-bottom: 1px solid #EEE;
}

/* !important: size the input through Element Plus's height variable — a taller
   .el-input__inner inside the default 40px wrapper overflows and covers the
   hours line rendered right below the menu name */
.shop-sidebar .menu-select .el-input {
    --el-input-height: 45px;
}

.shop-sidebar .menu-select .el-input__inner {
    height: 100%;
    font-size: 2rem;
    font-weight: 700;
}

.shop-sidebar .menu-select .el-icon svg,
.shop-sidebar .menu-select .el-input__inner {
    color: #000;
}

.el-popper.menu-options .is-disabled {
    display: none;
}

/* Menu options render as name + today's hours stacked (the popper is
   teleported to <body>, so these rules can't live under .shop-sidebar) */

/* The popper anchors to the select input and would cover the hours line
   rendered below the menu name — push it past the hours when it opens
   downward (opening upward never overlaps them). !important: Popper.js
   writes an inline margin:0 on the element, which wins otherwise. */
.el-popper.menu-options[data-popper-placement^="bottom"] {
    margin-top: 18px !important;
}

@media(max-width:640px) {
    .el-popper.menu-options[data-popper-placement^="bottom"] {
        margin-top: 22px !important;
    }
}

.el-popper.menu-options .el-popper__arrow {
    display: none; /* the shifted popper would leave the arrow floating mid-gap */
}

.el-popper.menu-options .el-select-dropdown__item {
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.3;
}

.el-popper.menu-options .menu-option-name {
    display: block;
    font-size: 15px;
}

.el-popper.menu-options .menu-option-hours {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: #999;
}

@media(max-width:640px) {
    .shop-sidebar .menu-select {
        background-color: #FFF;
        padding: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
    }
    .shop-sidebar .menu-select .el-input {
        width: 95%;
        margin: auto;
    }
    /* name on top, hours tucked right under it, cart button stays on the right */
    .shop-sidebar .menu-select .el-input {
        --el-input-height: 36px;
    }
    .shop-sidebar .menu-select .el-input__inner {
        font-size: 1.5rem;
    }
    .shop-sidebar .menu-select .menu-hours-info {
        width: 95%;
        margin: 0 auto;
        padding: 0 21px 8px;
        font-size: 12px;
    }
    .shop-sidebar .menu-select-inner:has(.menu-hours-info) .el-select .el-input__suffix {
        transform: translateY(12px);
    }
    .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
        color: var(--el-menu-text-color);
    }
}

/* Storefront alerts delivered via the store-status sync poll */
.main-container .storefront-alert {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 1rem;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.main-container .storefront-alert i {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.main-container .storefront-alert--info {
    background-color: #f4f4f5;
    color: #303133;
}

.main-container .storefront-alert--warning {
    background-color: #fdf6ec;
    color: #b88230;
}

.main-container .storefront-alert--error {
    background-color: #fef0f0;
    color: #c45656;
}

/* Loading phase: the app fades in instead of popping, the cart chip pulses
   softly until the session cart arrives, and a failed load shows a retry
   state instead of an endless spinner.

   The animation sits on el-container rather than on #vue-app so it covers the
   menu only. Animating opacity makes an element a stacking context for
   everything inside it, and the cart drawer used to be inside this one: its
   overlay's z-index 99999 counted for nothing outside the box, so the drawer
   spent the fade behind the site header. The drawer is now a sibling of
   el-container (see woocommerce/shop.php) and #vue-app itself is left
   unanimated, so nothing between the drawer and the root creates a context. */
#vue-app:not(.hide) > .el-container {
    animation: shop-fade-in 0.25s ease;
}

/* Keep the scrollbar track present, and never let a scroll lock resize the body.
 *
 * Element Plus 2.2.19 compensates for the disappearing scrollbar by narrowing
 * the body — `document.body.style.width = calc(100% - <scrollbar>px)` in
 * useLockscreen — rather than padding it. On a system with classic
 * space-taking scrollbars that leaves the body ~15px short of the viewport for
 * as long as a dialog is open, so the full-bleed header and the page ground
 * stop before the right edge and a strip of white shows down the side.
 * Reproduced by forcing that width: body 1421 in a 1436 viewport.
 *
 * The width override alone fixes it. An earlier attempt also put
 * `overflow-y: scroll` on html to hold the scrollbar track, but giving html an
 * overflow of its own makes it the scroll container — at which point body's
 * `overflow: hidden` no longer reaches the viewport and the page scrolled
 * happily behind every dialog and the cart drawer. Leave html alone. */
body.el-popup-parent--hidden,
body.shop-scroll-locked {
    /* Element Plus sets an inline calc(100% - <scrollbar>px) here; that is what
       left the strip. Body keeps its full width and the lock keeps working,
       because `overflow: hidden` on body still propagates to the viewport —
       which it stops doing the moment html is given an overflow of its own. */
    width: 100% !important;
    overflow: hidden !important;
}

/* Out of flow, because overflow alone is not a lock on iOS.
 *
 * WebKit goes on scrolling the document under a touch whatever the body's
 * overflow says, so on a phone the page still moved behind an open dialog while
 * every desktop measurement reported it locked. A body that is not in flow has
 * nothing to scroll. Chrome and Android were already held by the overflow above
 * and are unaffected by this; it is iOS that needs it.
 *
 * The scroll position is the cost: a fixed body starts at the top. ScrollLock
 * measures it before locking and hands it to the `top` below as
 * --shop-scroll-lock-top, so the page stays where the shopper left it, then
 * puts it back on release. Only on this class, never on
 * el-popup-parent--hidden — that one is Element Plus's and nothing sets a
 * matching offset for it. */
body.shop-scroll-locked {
    /* !important because something on the page writes position: relative onto
       the body as an inline style — not ours, and not from any stylesheet the
       page loads; measured as body.style.position === 'relative' with no CSS
       rule matching. An inline declaration outranks any rule that is not
       !important, so without this the body stayed relative while the negative
       `top` below was still applied to it, which does not lock anything and
       does shift the page by the scroll offset. The width and overflow above
       carry !important for the same class of reason. */
    position: fixed !important;
    left: 0;
    right: 0;
    /* The measured offset, through a custom property, and !important on a rule
       one class more specific than `body` — because a plain inline `top` loses
       here.

       The Google Translate integration in pizza-custom-features carries the
       standard hack against the widget's banner pushing the page down,
       `body { top: 0 !important }`, and `!important` in a stylesheet outranks
       an inline declaration. With the offset written inline the body went fixed
       with its top computing to 0, which is precisely "a fixed body starts at
       the top": open a dialog 1200px down the menu and the page behind it
       snapped to the header. This rule beats that one on specificity, and a
       custom property is beyond the reach of anything that writes
       `body.style.top` — Google Translate writes it on every language change.

       The fallback is 0px so the rule is inert if the property is ever missing:
       an invalid `top` would make the declaration invalid and hand the position
       back to `body { top: 0 !important }` anyway. */
    top: var( --shop-scroll-lock-top, 0px ) !important;
}

/* No scrollbar-gutter here, and the jump it was weighed against is now fixed
 * the way the note below always said to fix it.
 *
 * `scrollbar-gutter: stable` was tried to stop the page widening when body
 * overflow is locked, but it reserves the gutter unconditionally — so on any
 * system with overlay scrollbars (macOS by default) nothing ever paints in it
 * and the shop carries a permanent ~15px white strip down its right edge, with
 * the header and the dialog overlay both stopping short of the viewport. That
 * is a visible bug on every page load, traded against a jump that only ever
 * occurs on classic-scrollbar systems at the moment a dialog opens.
 *
 * ScrollLock.compensate() does the conditional version instead: it measures
 * `window.innerWidth - document.documentElement.clientWidth` before locking and
 * pads the body only when that is greater than zero, so nothing is reserved on
 * the machines that never had a scrollbar to begin with. Measured on the real
 * shop page at a 1400px viewport: the header held 1385px across the lock,
 * against 1385 -> 1400 -> 1385 without it.
 *
 * It pads rather than narrowing the body because the body's own box has to stay
 * full width — that is the difference between this and the Element Plus
 * behaviour the rule above overrides. */

@keyframes shop-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.header-cart.cart-loading button {
    animation: cart-pulse 1.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cart-pulse {
    50% { opacity: 0.35; }
}

.main-container .shop-load-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 16px;
    text-align: center;
    color: #606266;
}

.main-container .shop-load-error i {
    font-size: 32px;
    color: #909399;
}

.main-container .shop-load-error p {
    margin: 0;
    font-size: 15px;
}

/* Pre-switch notice shown below the search toolbar ~10 minutes before an
   auto-switch menu opens or the current one closes */
.main-container .menu-switch-alert {
    display: flex;
    align-items: center; /* clock icon vertically centered against both lines */
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 1.25rem;
    background-color: #f4f4f5;
    border-radius: 6px;
}

.main-container .menu-switch-alert i {
    font-size: 24px;
    line-height: 1;
    color: #606266;
    flex-shrink: 0;
}

.main-container .menu-switch-alert p {
    margin: 0;
}

.main-container .menu-switch-alert .menu-switch-alert-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    color: #303133;
}

.main-container .menu-switch-alert .menu-switch-alert-desc {
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.4;
    color: #909399;
}

.dietary-options-select {
    width: 100%;
    flex-shrink: 0;

    @media(min-width: 640px) {
        width: 150px;
    }

    @media(min-width: 1024px) {
        width: 200px;
    }
}

/*
 * Loading Spinner
 */
.menu-container-loading {
    margin-top: 5rem;
}

.el-loading-spinner .path {
    stroke: #000;
}

.el-loading-spinner .el-loading-text {
    color: #000;
    font-size: 1.75rem;
}

/*
 * Global Dialog Overwrites
 */
.el-overlay-dialog {
    display: flex;
    align-items: center;
}

/* A drag that starts on the backdrop must not turn into a scroll of the page.
 *
 * Element Plus gives both .el-overlay and .el-overlay-dialog `overflow: auto`,
 * and the rule above centres the dialog inside them — so their content is
 * exactly the height of the viewport and there is never anything for them to
 * scroll. Measured at 390x844: content 844 against a box of 844, on both, with
 * or without a long list in the dialog.
 *
 * A touch on a scroll container with nothing to scroll does not stop there. The
 * default overscroll-behavior lets the gesture chain to the nearest ancestor
 * that can scroll, which is the document — so dragging on the transparent area
 * beside the dialog scrolled the page behind it. That is a different mechanism
 * from the body lock and is not fixed by it: chaining looks for a scrolling
 * ancestor, and it will find one whenever the lock is not the thing holding it.
 *
 * `contain` keeps the gesture inside the overlay while leaving its own
 * scrolling intact for the case where a dialog really is taller than the
 * viewport. Supported by Safari from iOS 16; the body lock is what covers
 * anything older. */
.el-overlay,
.el-overlay-dialog {
    overscroll-behavior: contain;
}

.el-dialog {
    margin: auto;
    width: 630px;
}

/* Never taller than the viewport, whatever the product.
 *
 * calculateHeight() sizes the body in JS, but it only runs on open and resize,
 * so anything that opens a dialog before it can measure — or any product whose
 * options outgrow the space between two of those calls — used to push the
 * footer, and with it Add to Cart, below the fold. The dialog is centred with
 * `margin: auto`, so once its content passes the viewport height that margin
 * collapses to 0 and it simply overflows in both directions.
 *
 * As a flex column with a bounded height the body is the only part that
 * scrolls, so the header and the footer are always on screen. This holds on
 * its own with JavaScript disabled. dvh first for mobile browser chrome, with
 * the vh line above it as the fallback. */
.el-dialog {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
}

.el-dialog .el-dialog__header,
.el-dialog .el-dialog__footer {
    flex: 0 0 auto;
}

.el-dialog .el-dialog__body {
    /* 0, not 1: the body may shrink to fit the cap but must never grow into it.
       With `flex: 1 1 auto` every dialog stretched to the full max-height, so
       the cross-sell and upsell modals — a couple of cards each — opened 836px
       tall with a band of empty space above and below their content. */
    flex: 0 1 auto;
    /* a flex item will not shrink past its content without this */
    min-height: 0;
    overflow-y: auto;
}

.el-dialog .el-dialog__header {
    border-bottom: var(--el-border);
    margin-right: 0;
}

.el-dialog__footer {
    padding-top: 20px;
    border-top: var(--el-border);
}

.el-dialog .alert {
    border-radius: 0;
    padding: 12px;
}

.el-dialog .alert p {
    font-size: 1.2rem;
    line-height: 1.8rem;
}

.el-dialog .alert h4 {
    margin-bottom: 8px;
}

.alcohol-dialog p {
    text-align: center;
    font-size: 2rem;
}

@media(max-width:768px) {
    .el-dialog.upsell-dialog,
    .el-dialog {
        margin: 30px 10px;
        width: auto;
    }
}

/*
 * Product Dialog (Add to Cart)
 */
.product-dialog .quantity .el-form-item__content {
    flex: unset
}

.product-dialog .el-dialog__body {
    overflow-x: auto;
}

.product-dialog .el-dialog__body,
.product-dialog .el-dialog__header {
    margin: 0;
    padding: 0;
    position: relative;
    word-break: auto-phrase;
}

.product-dialog .el-radio__inner {
    width: 22px;
    height: 22px;
}

.product-dialog .el-radio__inner::after {
    width: 13px;
    height: 13px;
    background-color: var(--el-color-primary);
    border: 3px solid #FFF;
}

.product-dialog .el-checkbox__inner {
    width: 20px;
    height: 20px;
    border-radius: 6px;
}

.product-dialog .el-checkbox__inner::after {
    height: 10px;
    left: 7px;
    top: 2px;
    border-right: 2px solid var(--el-checkbox-checked-icon-color);
    border-bottom: 2px solid var(--el-checkbox-checked-icon-color);
}

.product-dialog .el-dialog__body .el-input .el-input__inner {
    padding: 0 0;
    color: #111;
    border-radius: 0;
    border: none;
}

.product-dialog .el-dialog__footer .quantity-input {
    width: 170px;
    display: block;
    margin: auto;
}

.quantity-input .el-input__wrapper,
.quantity-input .el-input__wrapper.is-focus,
.quantity-input .el-input__wrapper:hover {
    background: transparent;
    box-shadow: none;
}

.el-input-number .el-input__wrapper {
    padding-left: 35px;
    padding-right: 35px;
}

.quantity-input .el-input__inner {
    text-align: center;
    line-height: 1;
    border: 0;
    background-color: #EEE;
    border-radius: 20px;
}

.quantity-input .el-input__wrapper.is-focus .el-input__inner {
    border: 1px solid #111;
}

.product-dialog .el-dialog__footer .quantity-input .el-input-number__increase,
.product-dialog .el-dialog__footer .quantity-input .el-input-number__decrease {
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid #111;
    color: #111;
    width: 26px;
    height: 26px;
    top: 8px;
}

.product-dialog .el-dialog__footer .el-input-number__decrease.is-disabled,
.product-dialog .el-dialog__footer .el-input-number__increase.is-disabled {
    border: 2px solid #CCC;
    color: #CCC;
}

.product-dialog .el-dialog__footer .cart-button {
    width: 100%;
    border-radius: 30px;
}

.product-dialog .product-dialog__image {
    height: 250px;
    width: 100%;
    object-fit: cover;
}

.product-dialog .el-dialog__headerbtn {
    border-radius: 99px;
    background-color: #FFF;
    border: 1px solid #CCC;
    font-size: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    width: 32px;
    right: 10px;
    top: 10px;
    z-index: 999;
    transition: all 0.2s ease-in-out;
}

.product-dialog .el-dialog__headerbtn .el-icon svg {
    width: 0.8em;
    height: 0.8em;
}

.product-dialog .el-dialog__headerbtn i {
    color: #000;
    transition: color 0.2s ease-in-out;
}

.product-dialog .el-dialog__headerbtn:hover {
    background-color: #000;
    border: 1px solid #000;
}

.product-dialog .el-dialog__headerbtn:hover i {
    color: #FFF;
}

.product-dialog .el-form {
    margin: 0;
}

.product-dialog .product-dialog__meta .heading {
    max-width: 90%;
    word-break: break-word;
    margin-top: 5px;
    margin-bottom: 5px;
}

.product-dialog .product-dialog__meta p {
    line-height: 2rem;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.5rem;
}

.product-dialog .product-dialog__meta,
.product-dialog .product-dialog__form {
    padding: 1.4rem 1.4rem;
}

@media(max-width:640px) {
    .product-dialog .el-dialog {
        width: 100%;
    }
}

@media(max-width:768px) {
    .product-dialog .el-dialog__footer .quantity-input {
        width: 180px;
        margin-bottom: 15px;
    }
    .product-dialog .product-dialog__image {
        height: 190px;
    }
}

@media(max-height:650px) {
    .product-dialog__image {
        display: none;
    }
}

/*
 * Product Dialog - Dietary Options
 */
.product-dialog__dietary {
    display: flex;
}

.product-dialog__dietary img {
    margin-right: 5px;
}

.dietary-options__tooltip {
    ul {
        list-style-type: none;
        margin: 0;

        li {
            display: flex;
            gap: .5rem;
            margin-bottom: .5rem;
            text-transform: capitalize;
            align-items: center;
        }
    }
}

.product-dialog .dietary-help-btn {
    padding: 0;
    position: relative;
    top: -10px;
    right: -2px;
}

/*
 * Product Dialog - Variations
 */
.product-dialog__variations .el-radio-button .el-radio-button__inner {
    border-left: var(--el-border);
}

.product-dialog__variations label {
    flex-basis: calc(33.33333% - 10px);
}

@media(max-width:481px) {
    .product-dialog__variations label {
        flex-basis: calc(50% - 10px);
    }
}

.product-dialog__variations .el-radio-group {
    flex-grow: 1;
    gap: 10px;
}

.product-dialog__variations .el-radio-group .el-radio-button__inner {
    width: 100%;
    text-align: left;
    line-height: 1.4;
    padding: 3px 15px;
}

/*
 * Product Dialog - Modifiers
 */
.product-dialog__modifiers .el-form-item__content > div {
    width: 100%;
}

.product-dialog__modifiers .el-checkbox-group,
.product-dialog__modifiers .el-radio-group,
.product-dialog__modifiers .el-radio {
    width: 100%;
    margin-right: 0;
}

.product-dialog__modifiers .option-has-extra-half .el-radio-group {
    width: auto;
}

.product-dialog__modifiers .el-checkbox {
    display: flex;
    width: 100%;
}

.product-dialog__modifiers .el-checkbox__label,
.product-dialog__modifiers .el-radio__label {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    word-break: normal;
    font-size: 12px;
    line-height:1;
    white-space: break-spaces;
    word-break: auto-phrase;
}

.product-dialog__modifiers .modifier-details {
    display: flex;
    justify-content: right;
    align-items: center;
}

@media(max-width:481px) {
    .modifier-list {
        display: flex;
        align-items: center;
    }
    .product-dialog .product-dialog__meta p {

    }

    .product-dialog__modifiers .modifier-details {
        display: flex;
        justify-content: right;
        align-items: center;
        flex-direction: column-reverse;
    }
}


.product-dialog__modifiers .modifier-details .el-input-number--small {
    width: 90px;
}

.product-dialog__modifiers .modifier-details .checkbox-price {
    min-width: 70px;
    border-radius: 30px;
    text-align: center;
    display: block;
    line-height: normal;
    padding: 5px 0;
    font-size: var(--font-size);
    margin-left: 10px;
}

.product-dialog__modifiers .is-selected .checkbox-price,
.product-dialog__modifiers .is-checked .checkbox-price {
    font-weight: 700;
}

.product-dialog__modifiers .el-checkbox.show-half,
.product-dialog__modifiers .el-radio.show-half {
    height: 64px;
    align-items: baseline;
}

.product-dialog__modifiers .el-checkbox.show-extra.show-half,
.product-dialog__modifiers .el-radio.show-extra.show-half {
    height: 64px;
    align-items: baseline;
}

.product-dialog__modifiers .el-checkbox.show-extra.show-half,
.product-dialog__modifiers .el-radio.show-extra.show-half {
    height: 96px;
}

.option-has-extra-half {
    display: flex;
    align-items: center;
}

.product-dialog__modifiers .option-has-extra-half strong,
.product-dialog__modifiers .option-has-extra-half strong {
    display: inline-block;
    min-width: 140px;
    color: var(--el-checkbox-text-color);
    margin-right: 20px;
    position: relative;
    font-size: 14px;
}

.product-dialog__modifiers .option-has-extra-half .el-radio,
.product-dialog__modifiers .option-has-extra-half .el-radio {
    width: 60px;
    margin-bottom: 0;
}

/*
 * Pizza Builder
 */
.pizza-builder {
    height: 220px;
    position: relative;
    background: url(../images/pizza-builder-dish.png), url(../images/pizza-builder-background.jpg);
    background-size: 330px auto, 100% auto;
    background-repeat: no-repeat;
    background-position: 50% 42%, center;
    overflow: hidden;
}

.pizza-builder img {
    position: absolute;
    height: 220px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.pizza-builder__crust, .pizza-builder__crust div,
.pizza-builder__sauce, .pizza-builder__sauce div,
.pizza-builder__cheese, .pizza-builder__cheese div,
.pizza-builder__toppings, .pizza-builder__toppings div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.pizza-builder .left-half,
.pizza-builder .right-half {
    width: 50%;
    overflow: hidden;
}

.pizza-builder .right-half {
    left: unset;
    right: 0;
}

.pizza-builder .left-half img {
    left: 100%;
}

.pizza-builder .right-half img {
    left: 10px;
}

@media(max-height:650px) {
    .pizza-builder {
        display: none;
    }
}

@media(max-width:768px) {
    .pizza-builder {
        height: 190px;
        position: relative;
        background-size: 270px auto, 100% auto;
        background-repeat: no-repeat;
        background-position: 50% -35px, center;
    }
    .pizza-builder img {
        height: 175px;
    }
}

@media(max-width:481px) {
    .pizza-builder {
        height: 190px;
        position: relative;
        background-size: 270px auto, auto 100%;
        background-repeat: no-repeat;
        background-position: 50% -35px, center;
    }
}

/*
 * Pizza Toppings
 */
.pizza-toppings,
.pizza-toppings .topping .option-has-extra-half {
    width: 100%;
}

.pizza-toppings .topping .extra-selected {
    color: var(--el-color-primary);
    font-weight: 700;
}

.product-dialog__modifiers .pizza-toppings .el-radio-group,
.product-dialog__modifiers .pizza-toppings .el-radio {
    width: auto;
    gap: 1rem;
}

.product-dialog__modifiers .pizza-toppings .el-radio.is-disabled {
    opacity: 0.5;
}

.product-dialog__modifiers .pizza-toppings .option-has-extra-half .el-radio {
    gap: 0;
}

.pizza-toppings .topping-separator {
    padding-bottom: 1.2rem;
    margin-bottom: 1.6rem;
    border-bottom: 1px solid #E8E8E8;
}

.pizza-toppings .topping-separator.selected .option-has-extra-half {
    padding-top: 15px;
}

.pizza-toppings .topping {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.topping.selected .checkbox-price {
    color: var(--el-color-primary);
    font-weight: 700;
}

.topping .option-has-extra-half .el-radio {
    margin-bottom: 0;
}

.pizza-toppings .topping-name {
    font-size: 1.6rem;
}

.pizza-toppings .topping .checkbox-price {
    margin-left: auto;
}

.pizza-toppings .topping .el-radio__input {
    display: none;
}

.pizza-toppings .topping .option-has-extra-half .el-radio__input {
    display: flex;
}

/*
 * Cross-sells and Upsells Dialog
 */
.cross_sells_dialog {
    width: 1000px;
}

/* The height until measurement lands. measureCrossSellCarousel writes the real
   one as an inline style on this element, which outranks this rule, so this is
   what the container is worth for the frame between render and measure — and
   the fallback if the measurement cannot run.

   368px is correct for the cards as they stand: a page measures 340px of
   content on this catalogue and the item's own 4px padding sits inside it. It
   is kept because it is right today, not because it is right in general — it
   holds only for this card shape, and a tenant whose product names wrap to a
   second line would exceed it. That is what the measurement is for. */
.cross_sells_dialog .el-carousel__container {
    height: 368px;
}


.cross_sells_dialog .el-carousel__item,
.cross_sells_dialog .cross_sells_dialog-grid {
    padding: 4px;
}

/* The no-carousel case: as tall as its content, with the row's own gutter
   handled above. */
.cross_sells_dialog .cross_sells_dialog-grid {
    width: 100%;
    margin: 0;
}

/* Element Plus sets word-break: break-all on .el-dialog__body and again on
   .el-dialog__header, and everything inside a dialog inherits it — so text broke
   mid-word rather than between words: "Warm, buttery, baked to ord / er." under
   a card on a 390px phone. The theme already cancels this inside .product-dialog's
   header; it is every dialog on this page that needs it, not only the one it
   happened to be noticed in. */
.cross_sells_dialog .el-dialog__body,
.cross_sells_dialog .el-dialog__header,
.upsell-dialog .el-dialog__body,
.upsell-dialog .el-dialog__header,
.alcohol-dialog .el-dialog__body,
.alcohol-dialog .el-dialog__header,
.product-dialog .el-dialog__body {
    word-break: normal;
}

.cross_sells_dialog-header h2,
.cross_sells_dialog-header p,
.upsell-dialog_header h4,
.upsell-dialog_header p {
    word-break: auto-phrase;
    overflow-wrap: break-word;
}

.cross_sells_dialog .product_card-title,
.cross_sells_dialog .product_card-description,
.upsell-dialog .product_card-title,
.upsell-dialog .product_card-description {
    word-break: auto-phrase;
    overflow-wrap: break-word;
}

/* These bodies scroll, and a classic scrollbar is taken out of the content box,
   so the cards inside changed width with the length of the list: 580px with
   three upsells and 565px with five, with the bar drawn against their right
   edge while the header and the footer still ran the dialog's full width.
   Reserving the gutter gives one width whether or not the list is long enough
   to scroll.

   scrollbar-gutter is right here and wrong at page level, for the reason given
   beside body.shop-scroll-locked: there the reserved strip sits beside the
   header and the page ground and is visible, whereas here it is dialog
   background either way. On overlay scrollbars it reserves nothing, which is
   correct — a bar that never consumed width never changed one. */
.cross_sells_dialog .el-dialog__body,
.upsell-dialog .el-dialog__body {
    scrollbar-gutter: stable;
}

.cross_sells_dialog .cross_sells_dialog-decoration {
    position: absolute;
    top: 0;
    left: 0;
}

.cross_sells_dialog-header {
    position: relative;
    z-index: 1;
}

.cross_sells_dialog .el-dialog__header {
    width: 100%;
}

.cross_sells_dialog .el-dialog__body {
    position: relative;
    display: flex;
    align-items: center;
}

.cross_sells_dialog .el-carousel {
    width: 100%;
}

.cross_sells_dialog .el-dialog__body .cross_sells_dialog-carousel {
    padding-top: 30px;
    padding-bottom: 30px;
}

.cross_sells_dialog-header .el-dialog__title {
    font-size: 2.6rem;
}

.cross_sells_dialog-header p {
    font-style: italic;
    opacity: 0.7;
}

.el-dialog.upsell-dialog .upsell-item-added {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--el-color-success);
    color: #FFF;
    padding: 0.5rem;
    border-radius: 3px;
}

.el-dialog.upsell-dialog .el-dialog__body {
    overflow: auto;
}

@media(max-width:768px) {
    
    .el-dialog__header .upsell-dialog_title {
        font-size: 1.8rem !important;
    }

    .el-dialog__header p {
        font-size: 1.4rem !important;
        line-height: 1.4rem !important;
    }

    .el-dialog.cross_sells_dialog {
        width: 95%;
        margin-top: 2.5%;
    }
    .cross_sells_dialog-header p {
        font-style: italic;
        opacity: 0.7;
        font-size: 14px;
    }
    .el-carousel__button {
        width: 15px;
        height: 15px;
    }
}

/*
 * Cross-sells and upsells on a phone.
 *
 * The desktop card is a 160px block with a 40%-wide photo and the price pinned
 * to the bottom of the text column. At 360px that leaves a 300px card whose
 * photo is a 120px square, a description broken over two lines, and — for an
 * item with no photo — most of a 160px box of nothing. Two of them fill the
 * screen, so a shopper on a small phone is offered two suggestions and a pair
 * of carousel dots.
 *
 * Here they are list rows instead: a fixed 88px thumbnail, the name, one line
 * of description, and the price beside a 44px add button. A row is roughly 96px
 * against 180px, so four fit where two did — which is why crossSellsPerPage is
 * now four at every width, and why the carousel turns up far less often on the
 * devices where paging is worst.
 */
@media (max-width: 640px) {

    .cross_sells_dialog .product_card,
    .upsell-dialog .product_card {
        min-height: 0;
        margin-bottom: 12px;
    }

    /* Fixed, not 40%: a percentage thumbnail takes its share from the text, and
       the text is what there is least of at this width. */
    .cross_sells_dialog .product_card-image,
    .upsell-dialog .product_card-image {
        width: 88px;
        flex: 0 0 88px;
        min-height: 88px;
    }

    .cross_sells_dialog .product_card-details,
    .upsell-dialog .product_card-details {
        width: auto;
        flex: 1 1 auto;
        /* a flex item will not shrink below its content without this, and a long
           product name would push the add button off the end of the row */
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 10px 12px;
    }

    /* Back into flow. Pinning it to the bottom is what gave the card its height
       on a desktop; in a row there is no height to pin it to. */
    .cross_sells_dialog .product_card-price,
    .upsell-dialog .product_card-price {
        position: static;
        padding: 0;
        margin-top: 6px;
    }

    .cross_sells_dialog .product_card-title,
    .upsell-dialog .product_card-title {
        font-size: 1.5rem;
        line-height: 1.25;
        margin: 0;
    }

    /* One line: a long description would otherwise double a row's height and
       undo the point of the layout. */
    .cross_sells_dialog .product_card-description,
    .upsell-dialog .product_card-description {
        margin: 2px 0 0;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 34px is under every touch-target guideline. The row itself opens the
       product, so this only has to be reliably hittable for the quick add. */
    .cross_sells_dialog .product_card-btn,
    .upsell-dialog .product_card-btn {
        width: 44px;
        height: 44px;
    }

    /* The no-image card's desktop treatment reserves the pinned price's height
       and stretches the card to its column. With the price in flow and the row
       sized by content, both are wrong here — and both are more specific than
       this block, so they are matched selector for selector. */
    .cross_sells_dialog .product_card.no-image .product_card-details,
    .upsell-dialog .product_card.no-image .product_card-details {
        padding: 10px 12px;
    }

    .cross_sells_dialog .product_card.no-image:not(.product_card-vertical):not(.product_card_small-image),
    .upsell-dialog .product_card.no-image:not(.product_card-vertical):not(.product_card_small-image) {
        height: auto;
    }

    /* Two lines of 26px title over two of italic subtitle was about 150px of a
       780px screen before a single product appeared. */
    .cross_sells_dialog-header .el-dialog__title,
    .cross_sells_dialog-header h2 {
        font-size: 1.9rem;
        line-height: 1.2;
    }

    .cross_sells_dialog-header p,
    .upsell-dialog_header p {
        font-size: 1.25rem;
        line-height: 1.35;
        margin-top: 4px;
    }

    /* The primary action is worth the full width of a phone. */
    .cross_sells_dialog .dialog-footer .el-button,
    .upsell-dialog .dialog-footer .el-button {
        width: 100%;
    }
}

/*
 * Cart Dialog (Drawer)
 */
.el-overlay,
.el-notification {
    z-index: 99999 !important;
}

.el-drawer.rtl {
    direction: ltr;
}

.el-drawer__header {
    margin-bottom: 0;
    justify-content: center;
}

.el-drawer__header span {
    display: none;
}

.el-drawer__header button {
    position: absolute;
    left: 10px;
    top: 0;
    padding: 0;
}

.el-drawer__body .el-drawer__image {
    margin: 0 auto 20px;
    max-height: 300px;
    object-fit: cover;
}

.el-drawer__body .el-drawer__price {
    margin-bottom: 2rem;
    background: #E0D4CA;
    padding: 0.3rem;
    border-radius: 3px;
}

.el-drawer__variations .el-radio-group {
    flex-direction: column;
    align-items: flex-start;
}

.el-drawer__variations .el-radio.el-radio--large {
    height: auto;
}

.el-drawer__variations .variation-price {
    font-weight: bold;
}

.el-drawer__submit .el-button {
    font-weight: bold;
}

.el-drawer__active-price {
    margin-top: 3rem;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-drawer__submit .el-icon {
    margin-right: 5px;
    font-size: 18px;
}

.el-cart {
    position: absolute;
    top: 10px;
    right: 20px;
}

.cart-dialog .el-drawer__header {
    border-bottom: 1px solid #DDD;
    padding-bottom: 1.8rem;
}

.cart-dialog .el-drawer__body {
    position: relative;
    padding: 12px;
}

.cart-items .option {
    display: grid;
    grid-template-columns: 80% 1fr;
    align-items: center;
}
.cart-items .option aside:last-of-type {
    text-align: right;
}

.cart-items .quantity .el-form-item__content {
    gap: 1rem;
    line-height: 1;
}

.cart-items .quantity .el-button {
    height: 20px;
    width: 20px;
    font-size: 10px;
    padding: 0;
    border-radius: 99px;
}

.cart-dialog .cart-totals__row {
    display: flex;
    justify-content: space-between;
    line-height: 1.5;
}

.cart-dialog .cart-totals__row:last-of-type {
    font-size: 1.25rem;
    margin-bottom: 5rem;
}

.cart-dialog .cart-totals__row span {
    font-size: 1.45rem;
}

.cart-dialog .cart-totals__row span:first-of-type {
    font-weight: 700;
    text-transform: uppercase;
}

.cart-dialog .cart-checkout {
    position: absolute;
    padding: 1rem;
    border-top: 1px solid #DDD;
    background-color: #FFF;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 2;
}

.cart-dialog .cart-checkout .el-button {
    width: 100%;
    padding: 3.3rem;
    border-radius: 99px;
}

.cart-dialog .cart-checkout .el-button > span {
    flex-direction: column;
    gap: 0.4rem;
    text-transform: uppercase;
}

.cart-dialog .cart-checkout .el-button > span div:last-of-type {
    font-size: 1.75rem;
    font-weight: 700;
}

.cart-dialog .el-drawer.rtl {
    min-width: 370px;
}

/* Large screens: widen the drawer past element-plus's inline 30%
   (roomier rows without becoming a half-page panel) */
@media (min-width: 992px) {
    .cart-dialog .el-drawer.rtl {
        width: clamp(420px, 34vw, 520px) !important;
    }
}

.cart-dialog .el-drawer__header button {
    position: static;
    font-size: 2.5rem;
    border: 0;
}

.cart-dialog .el-drawer__header button span {
    display: block;
}

.cart-dialog .el-drawer__header button:hover {
    background-color: transparent;
    border: 0;
    color: var(--el-button-text-color);
}

.cart-dialog .remove-item.is-plain {
    border: 0;
    padding: 0;
    height: auto;
}

.cart-dialog .remove-item.is-plain:hover {
    color: var(--el-color-danger)
}

.cart-dialog .el-drawer__header .el-drawer__title {
    font-size: 2.5rem;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------
   Cart drawer — flat, checkout-like presentation: no rounded corners,
   items as hairline-divided rows, gift card + coupon as the same
   "Have a gift card? / Add a coupon code" disclosures the checkout has
   ------------------------------------------------------------------ */
.cart-dialog .shopping_cart_product {
    padding: 14px 0;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #e4e4e4;
}

.cart-dialog .shopping_cart_product-image {
    border-radius: 0;
    border-width: 1px;
}

.cart-dialog .shopping_cart_product-image-element {
    border-radius: 0;
}

.cart-dialog .shopping_cart_product-quantity-btn,
.cart-dialog .shopping_cart_product-buttons .el-button {
    border-radius: 0;
}

.cart-dialog .shopping_cart_product-holder {
    border-radius: 0;
    background-color: transparent;
    font-weight: 700;
}

.cart-dialog .el-divider {
    display: none;
}

/* Disclosures — same anatomy as the checkout versions */
.cart-dialog .cart-wallet {
    margin: 14px 0 4px;
}

.cart-dialog .cart-disclosure-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    margin: 8px 0;
    padding: 12px 14px;
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 0;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.cart-dialog .cart-disclosure-toggle:hover {
    border-color: #999;
}

.cart-dialog .cart-disclosure-caret {
    font-weight: 700;
    font-size: 1.6rem;
}

.cart-dialog .cart-disclosure-panel {
    padding: 4px 0 10px;
}

.cart-dialog .cart-wallet__form {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.cart-dialog .cart-wallet__form .el-input {
    flex: 1 1 auto;
    width: auto;
}

.cart-dialog .cart-wallet__form .el-input__wrapper {
    height: 40px;
    padding: 0 12px;
    border: 2px solid #ddd;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    transition: border-color .16s ease;
}

.cart-dialog .cart-wallet__form .el-input__wrapper.is-focus,
.cart-dialog .cart-wallet__form .el-input__wrapper:hover {
    box-shadow: none;
    border-color: #111;
}

.cart-dialog .cart-wallet__form .el-input__inner {
    height: 100%;
    border: 0;
    background: transparent;
    font-size: 1.3rem;
    font-weight: 600;
    color: #111;
}

.cart-dialog .cart-wallet__form .el-button {
    height: 40px;
    margin: 0;
    padding: 0 22px;
    border-radius: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

/* Applied gift card / coupon rows */
.cart-dialog .cart-wallet__applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 8px 0;
    padding: 8px 6px 8px 12px;
    background-color: #f5f5f5;
    font-size: 1.3rem;
    font-weight: 600;
    color: #444;
}

.cart-dialog .cart-wallet__applied em {
    font-style: normal;
    color: #111;
}

.cart-dialog .cart-wallet__applied .el-button {
    border: 0;
    background: transparent;
    padding: 0 6px;
    height: auto;
}

/* Flat checkout bar at every width */
.cart-dialog .cart-checkout .el-button {
    border-radius: 0;
}

.cart-dialog .cart-checkout .el-button.is-disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Empty cart state */
.cart-dialog .cart-empty {
    padding: 56px 16px;
    text-align: center;
    color: #6b6b6b;
}

.cart-dialog .cart-empty i {
    font-size: 40px;
    color: #ccc;
}

.cart-dialog .cart-empty__title {
    margin: 16px 0 4px;
    font-size: 1.7rem;
    font-weight: 700;
    color: #111;
}

.cart-dialog .cart-empty__hint {
    margin: 0;
    font-size: 1.3rem;
}

@media(max-width:640px) {
    .cart-dialog .el-drawer.rtl {
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
    }

    .cart-dialog .cart-checkout {
        padding: 0;
    }

    .cart-dialog .cart-checkout .el-button {
        border-radius: 0;
        border: 0;
        margin: 0;
    }
}

/* Body scroll lock while the cart drawer or any dialog on this page is open —
   owned by ScrollLock.js, counter-based, shared by all of them. Element Plus
   2.2.19's own el-popup-parent--hidden races away whenever one popup closes
   while another is still open, which is why nothing here uses it: the dialogs
   pass :lock-scroll="false" and hold this class instead. */
body.shop-scroll-locked {
    overflow: hidden !important;
}

/* The dialogs and the drawer are fixed to the viewport, so they are unaffected
   by the body leaving flow — but anything the theme pins to the page is, and a
   sticky header inside a fixed body simply stops being sticky. Nothing scrolls
   while the lock is held, so there is nothing for it to stick to; this is only
   noted so the behaviour is not mistaken for a regression. */

/*
 * Product page (productDetails === "page")
 *
 * The second shell for vue-partials/product-detail/. Same three partials the
 * dialog uses, laid out as the page's own content: media beside the options on
 * a wide screen, stacked on a narrow one, with quantity and add to cart pinned
 * to the bottom edge at both. One layout, not a desktop one and a mobile one.
 */
.product-page {
    max-width: 1000px;
    margin: 0 auto;
}

.product-page__back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.3rem;
    margin-bottom: 1.6rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.product-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    gap: 2.4rem;
    align-items: start;
}

/* The media column tracks the page while the options scroll past it. */
.product-page__media {
    position: sticky;
    top: 2rem;
}

.product-page__media img {
    width: 100%;
    height: auto;
    display: block;
}

.product-page__detail {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Add to cart sits on the bottom edge of the viewport rather than at the end of
   a long options list — the same reason the dialog caps its height. */
/* Fixed at every width, not sticky. `position: sticky; bottom: 0` only pins
   while the containing block is still passing the viewport, and this is that
   block's last child — so it never pinned at all and Add to Cart sat below the
   fold, which is the problem this layout exists to solve. Same treatment on a
   phone and a desktop, by design. */
.product-page__actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFF;
    border-top: 1px solid var(--el-border-color);
    padding: 1.2rem 2rem;
    z-index: 9;
    box-shadow: 0 -2px 12px rgba(0,0,0,.10);
}

.product-page__actions > * {
    max-width: 1000px;
    margin: 0 auto;
}

.product-page {
    padding-bottom: 9rem;
}

.product-page .product-dialog__form {
    padding: 0;
}

@media (max-width: 860px) {
    .product-page__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.6rem;
    }

    .product-page__media {
        position: static;
    }

    /* Fixed, not sticky. `position: sticky; bottom: 0` only pins an element
       while its containing block is still passing the viewport, and this is the
       last child of that block — so it never appeared to stick and Add to Cart
       sat below the fold on a phone, which is the whole problem this layout
       exists to solve. The page gets bottom padding to match. */
    .product-page__actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin-top: 0;
        padding: 1rem 1.5rem;
        box-shadow: 0 -2px 12px rgba(0,0,0,.12);
    }

    .product-page {
        padding-bottom: 8rem;
    }
}