/* 
Theme Name: Sushi2500
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Sushi2500 is a child theme of Hello Elementor, created by Techscale team
Author: Techscale Team (FB)
Author URI: https://techscale.io/
Template: hello-elementor
Version: 2.4.0
Text Domain: sushi2500
Domain Path: /languages
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


#billing_address_2_field {
    display: none !important;
}

/* Shared "not for editing" look for every readonly address field on the
   site — checkout page (billing_address_1/postcode/city, inside the
   Leveringsadresse accordion) and the Address Verification popup (208659)
   alike. Diagonal hatch matches the "shaded / hatched box" look Michael
   asked for in the annotated PDF. */
#billing_address_1[readonly],
#billing_postcode[readonly],
#billing_city[readonly],
.sushi-readonly-field input[readonly],
.sushi-shaded-field[readonly] {
    background-color: #d9d9d9 !important;
    background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12) 6px, transparent 6px, transparent 12px) !important;
    color: #555555 !important;
    cursor: not-allowed !important;
}

p.sushi-gift-card-description {
    color: #ffffff;
}

span.timeslot-text span {
    line-height: 25px;
}

span.timeslot-text {
    display: flex;
    flex-direction: row;
    gap: 4px;
    max-width: 100px;
}

/* Mobile Screen (768px to 1024px) - 2 Columns */
@media (max-width: 767px) {
    span.timeslot-text {
        flex-direction: column;
    }

    span.timeslot-text span {
        line-height: 16px;
    }
}



.custom-add-to-cart-button-pre-checkout button.custom-add-to-cart-button {
    background-color: #079D8A;
    color: white;
    border: 1px solid #079D8A;
    border-radius: 6px;
    width: auto;
    font-size: 0.8vw;
    padding: 0.2vw 0.8vw;
    height: auto;
    margin-bottom: 0 !important;
}

@media (max-width: 767px) {
    .custom-add-to-cart-button-pre-checkout button.custom-add-to-cart-button {
        font-size: 3.5vw;
        padding: 1vw 4vw;
    }
}

@media (max-width: 1024px) {
    .custom-add-to-cart-button-pre-checkout button.custom-add-to-cart-button {
        font-size: 2.5vw;
        padding: 0.6vw 2vw;
    }
}

@media (min-width: 1366px) {
    .custom-add-to-cart-button-pre-checkout button.custom-add-to-cart-button {
        font-size: 1vw;
        padding: 0.4vw 1vw;
    }
}

.elementor-widget-woocommerce-checkout-page .woocommerce .shop_table tfoot tr.order-total,
.elementor-widget-woocommerce-checkout-page .woocommerce .shop_table tfoot tr.cart-subtotal {
    box-shadow: 0 -1px 0 0 white !important;
}

/* Deal Code section (mirrors the coupon box design) */
.deal-code-section {
    background: #121212;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 16px 30px;
    margin-top: 20px;
    color: #ffffff;
}

.deal-code-section .deal-code-heading {
    display: block;
    font-size: 16px;
    font-family: 'Proxima Nova';
    font-weight: 400;
}

.deal-code-section .showdealcode {
    color: #18a999;
    margin-left: 6px;
    text-decoration: none;
}

.deal-code-section .deal-code-form p {
    color: #ffffff;
    margin: 8px 0;
    padding: 0;
}

.deal-code-form {
    margin-top: 20px;
}

.deal-code-section .deal-code-form .input-text,
.deal-code-section .deal-code-form input[type="text"] {
    width: 100%;
    padding: .5rem 1rem;
    border: none;
    border-radius: 8px;
    background: #ffffff;
    color: #121212;
}

.coupon-container-grid {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 5px;
}

.wc_gc_add_gift_card_form__notices .woocommerce-info {
    color: #079D8A;
}

input#coupon_code {
    padding: .5rem 1rem;
    font-size: 16px;
    line-height: 24px;
}

button.woocommerce-button.button.e-apply-coupon {
    color: #ffffff;
    background-color: #079D8A;
    width: 100%;
}

button.woocommerce-button.button.e-apply-coupon:hover {
    background-color: #068170;
    color: #ffffff;
}

button#wc_gc_cart_redeem_send:hover {
    background-color: #068170;
    color: #ffffff;
}

.product-link {
    color: #079D8A;
    font-weight: 700;
    text-decoration: none;
}

@media (min-width: 1024px) {
    .elementor-widget-woocommerce-cart .e-cart__container {
        grid-template-columns: 65% auto;
    }
}


.woocommerce div.product form.cart .variations {
    width: 45%;
}

.product-single-sushi p.price {
    color: #079D8A;
    font-weight: 700;
}

.product-single-sushi p.price ins {}

/* Removes any default underline from the inserted sale price */
.product-price .price ins,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
    text-decoration: none;

    span.woocommerce-Price-amount.amount {
        font-size: 18px;
        font-weight: 700;
    }
}

/* Styles the crossed-out original price */
.product-price .price del,
.product-single-sushi p.price del,
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
    text-decoration-color: #ffffff;
    color: #ffffff;
    font-weight: 500;
    font-size: 16px;

    span.woocommerce-Price-amount.amount {
        color: #ffffff !important;
        font-weight: 500;
    }
}

/* checkout custom css */

.woocommerce-additional-fields h3:nth-of-type(2) {
    margin-bottom: 0px !important;
}

.accordion {
    cursor: pointer;
    outline: none;
    transition: 0.4s;
    font-family: "Proxima Nova", Sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    color: white;
    border: 1.5px solid #444;
    width: 100%;
    max-width: 100%;
    display: flex;
    background-color: #121212;
    padding: 16px 30px;
    margin-top: 24px;
    border-radius: 10px;
    justify-content: space-between;
}

.arrow-icon {
    transition: transform 0.3s ease-in-out;
    /* Smooth transition for the rotation */
}

.active .arrow-icon {
    transform: rotate(180deg);
    /* Rotate the arrow to point up */
}

#delivery_section,
#options_section,
#extra_options_section,
#allergy_section {
    margin-top: 0px;
    border-radius: 0px 0px 10px 10px;
    border-top: none;
}

.accordion.active {
    border-radius: 10px 10px 0px 0px;
    border-bottom: none;
}

.panel {
    max-height: 0;
    overflow: hidden;
    transition: all 0.2s ease-out;
    padding: 0 !important;
    visibility: hidden;
}

.panel-inner {
    padding: 10px 30px;
}

/* checkout custom css END */

/* Category/add-on label ("Varianter:", "Tillæg:", "Ris:", "Størrelse:") bold
   everywhere dl.variation renders (cart page, checkout order review, etc.) —
   per Michael's feedback on the checkout order summary. */
dl.variation dt {
    font-weight: 700;
}

/* QA-05 follow-up (2026-10-03): the add-on price inside dl.variation
   (e.g. "(+ kr. 59)") needs to always match the surrounding "Tillæg"
   text's actual size. The /cart/ page widget already has its own pin
   for this (.ts-cart-page-widget ... dd span.woocommerce-Price-amount
   .amount), but checkout's own order-review table
   (.woocommerce-checkout-review-order-table) had no equivalent rule at
   all, so the price fell back to whatever the global price styling
   happened to be instead of the dd's actual rendered size — same class
   of bug already found and fixed in the mini-cart and product-page
   versions of this. Force it to inherit rather than hardcode yet
   another fixed px value that can go stale again. */
dl.variation dd .woocommerce-Price-amount.amount {
    font-size: inherit !important;
}

/* Variant "differs from default" highlighting — replaces the old hardcoded
   "blomkålsris" text-match rules. is_default is computed server-side in
   functions/common.php (sushi2500_is_attribute_value_default()) and rendered
   as a data attribute; only the value ever gets colored, never the label. */
dl.variation dd[data-is-default="0"] {
    color: #079D8A !important;
    font-weight: 600;
}

.variation-name-cart .variation-value-changed {
    color: #079D8A !important;
    font-weight: 600;
}

.variation-name-cart .variation-line {
    display: block;
}

/* Keeps a "(+ kr. 59)" add-on price from wrapping mid-phrase in the narrow
   cart/checkout order-summary column (Issue: line-height discrepancy). */
.sushi2500-nowrap {
    white-space: nowrap;
}

/* Right-align the Subtotal column on the checkout order-review table and
   shrink it to its content's natural width, so the extra space goes to the
   "Vare" column instead — reduces wrapping of item names/variant lines. */
.woocommerce-checkout-review-order-table th.product-total,
.woocommerce-checkout-review-order-table td.product-total {
    text-align: right;
    width: 1%;
    white-space: nowrap;
}

/* Subtotal/Fee/Total rows share the same column but their cells carry no
   class, so they need their own rule — right-align and keep them on one
   line too, matching the item rows above. */
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
    text-align: right;
    white-space: nowrap;
}

.product-addon-totals li.wc-pao-subtotal-line p.price {
    color: #fff;
}

.elementor-widget-woocommerce-checkout-page span.woocommerce-Price-amount.amount {
    font-size: 16px;
    font-weight: 600;
}

tr.fee span.woocommerce-Price-amount.amount {
    font-weight: 400;
}

tr.order-total span.woocommerce-Price-amount.amount {
    color: #079D8A !important;
}

#order_review tr.cart_item td.product-name {
    font-weight: 700;

    strong.product-quantity {
        color: #079D8A !important;
        font-weight: 700;

    }
}

.woocommerce-cart-form .variation .woocommerce-Price-amount.amount {
    font-weight: 400 !important;

    .woocommerce-Price-currencySymbol {
        font-weight: 400 !important;
    }
}

/* QA-05 follow-up (2026-10-03): "( ) are bigger" — the add-on price
   (e.g. "(+kr. 59)") visually mismatches its surrounding "Tillæg"
   checkbox label on the product page. Root cause: the global price rule
   below (span.woocommerce-Price-amount.amount) hardcodes font-family
   'Proxima Nova' and line-height:24px for every price on the site — but
   the Product Add-Ons plugin's own <label> markup around it is never
   themed with that font at all (confirmed via computed styles: label
   falls back to the system sans-serif stack), so the two render with
   different typeface metrics at the same declared font-size. A prior,
   now-dead attempt at this (commented out above) only tried changing
   font-size, which was never actually the mismatch. Pin the price to
   inherit from its own label instead, so it always matches whatever
   font that label happens to use. */
.wc-pao-addon-price .woocommerce-Price-amount.amount {
    font-family: inherit !important;
    line-height: inherit !important;
}

.selected-shop {
    border-color: #EDEFF4 !important;

    .selected-shop-arrow {
        opacity: 1;
    }
}

.selected-shop-arrow {
    opacity: 0;

    .elementor-icon {
        border: 1px solid #EDEFF4;
    }
}

.shop-container {
    cursor: pointer;
}



.method-selection {
    .elementor-button-icon {
        font-size: 24px;

        svg path {
            stroke: #EDEFF4 !important;
        }
    }
}

.method-selection.selected-delivery-type {
    .elementor-button {
        background-color: #EDEFF4 !important;
        color: #121212 !important;
    }

    .elementor-button-icon svg path {
        stroke: #121212 !important;
    }
}

#place_order {
    padding: 16px !important;
    line-height: 24px;
}

.elementor-add-to-cart.elementor-product-simple .cart {
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: start;
    color: white;

    .single_add_to_cart_button.button.alt {
        margin-left: 0 !important;
    }

    .wc-pao-subtotal-line .price {
        color: #079D8A !important;
    }
}

.wc-pao-addons-container {
    color: white;
}

.green-asterik {
    color: #079D8A;
    font-size: 20px;
}

.extras_checkboxes .checkbox .optional,
.allergy_checkboxes .checkbox .optional {
    display: none;
}

.elementor.elementor-21 {
    min-height: 100%;
    display: flex;
}

.elementor.elementor-217 {
    display: flex;
    min-height: 100%;
}

.allergens-det {
    vertical-align: center;
    text-align: center;

    .icomoonregularicon {
        font-size: 26px;
        background-color: #090909;
        border-radius: 50px;
        height: 52px;
        width: 52px;
        padding: 10px;
    }

    span {
        color: white;
        font-size: 12px;
        text-transform: uppercase;
    }
}

.shake {
    animation: shake 0.5s ease-in-out infinite;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    80% {
        transform: translateX(-5px);
    }

    40%,
    60% {
        transform: translateX(5px);
    }
}


@media (max-width: 767px) {

    .allergens-det {
        span {
            font-size: 12px;
        }
    }

}

.allergens-section {
    display: flex;
    flex-direction: row;
    justify-content: space-around;

}

.product-template-default.single.single-product .product-single-sushi {

    .product-type-variable {
        .woocommerce-Price-amount.amount {
            color: #079D8A !important;
        }

        .woocommerce-variation-price .woocommerce-Price-amount.amount {
            color: rgb(237, 239, 244) !important;
        }
    }

}

@font-face {
    font-family: 'icomoonregular';
    src: url('assets/fonts/icomoon-webfont.woff2') format('woff2'),
        url('assets/fonts/icomoon-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.icomoonregularicon {
    font-family: 'icomoonregular';
    font-weight: bold;
    font-size: 18px;
    min-height: 22px;
    color: #079D8A;
}

.woocommerce-checkout {
    select {
        border-radius: 8px;
        line-height: 24px;
        padding: 16px;
    }

    #custom_comments {
        border-radius: 8px;
    }
}

/* BLUE-D (2026-09-28 feedback): bold selected time slot / date in the
   "Vigtige ordre oplysninger" box, shown in the site's accent color.
   Scoped to #comments_section so it can't affect bold text elsewhere. */
#comments_section .sushi-highlight-slot {
    color: #079D8A;
}

.quantity-wrapper input {
    text-align: center !important;
}

.quantity-wrapper input[type="number"]::-webkit-inner-spin-button,
.quantity-wrapper input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.variation-select {
    color: black !important;
    font-size: 14px !important;
    padding: 6px 10px !important;
    text-transform: capitalize;
    border-radius: 10px !important;
    margin-top: -4px;
}

dd.variation- {
    display: flex;
    gap: 20px;
}

dt.variation- {
    display: none !important;
}

.readonly-form input {
    pointer-events: none;
}

.change-variation-btn {
    border: none;
    padding: 0;
    color: white;
}

.change-variation-btn:hover,
.change-variation-btn:focus,
.change-variation-btn:active {
    background: transparent;
}


/* Mini/side-cart item name/variant/add-on sizing, per Michael's feedback:
   Name 14 bold, Variant 13 regular (green only when non-default, via the
   separate .variation-value-changed rule), Tillæg 13 bold (same size as
   Variant, confirmed with Michael) — currently Name and Variant rendered
   at the same size with nothing to tell them apart. */
.product_name {
    font-size: 14px;
    font-weight: 700;
}

/* The "Valgte varer" embedded widget's own stylesheet (ts-mini-cart.css)
   has a responsive rule (1367–1920px viewports) setting every li span in
   this widget — name, variant, and Tillæg alike — to a single flat size.
   Name needs to stay distinct at 14px per Michael's confirmed spec while
   Variant/Tillæg stay 13px, so re-pin it here specifically. */
.mini-cart-items .product_name {
    font-size: 14px !important;
}

.variation-name-cart.variation {
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 0;
    /* margin-top: 5px; */
}

.side-cart-addons-list {
    font-size: 13px;
    font-weight: 700;
    /* Variant/Name → Tillæg block = 4px (PINK spacing spec). Used to be a
       hardcoded inline margin-top:5px baked into the PHP output; moved here
       so it's consistent with the rest of this spacing spec. */
    margin-top: 4px;
}

/* Only the "Tillæg:" label itself should be bold — the add-on name
   ("Edamame & Tangsalat") is regular weight, same as the Variant value. */
.side-cart-addons-list .addon-value {
    font-weight: 400;
}

/* Each Tillæg line is now its own element (see custom-elementor-widgets.php)
   instead of being <br>-joined, specifically so this gap can be an exact
   margin rather than a line-height effect. Tillæg → Tillæg = 4px. */
.side-cart-addon-line + .side-cart-addon-line {
    margin-top: 4px;
}

/* The add-on's own "(+ kr. 59)" price is rendered via wc_price(), which
   wraps it in .woocommerce-Price-amount.amount — a class several other,
   unrelated rules elsewhere in this file also target at different sizes.
   QA-05 follow-up (2026-10-03): this used to hardcode font-size:13px to
   match the surrounding ".sushi2500-nowrap" Tillæg text — but that text
   now actually renders at 19.2px (1.2em of the 16px base), so the
   hardcoded 13px price had drifted smaller/misaligned relative to its
   own label (confirmed via computed styles). Use inherit instead of a
   fixed px value, so the price always tracks whatever size the
   surrounding text actually is, instead of going stale again the next
   time that text's size changes. */
.side-cart-addons-list .woocommerce-Price-amount.amount {
    font-size: inherit !important;
    font-weight: 700 !important;
    line-height: inherit !important;
}

/* The global span.woocommerce-Price-amount.amount rule also hardcodes
   line-height:24px, which the currency-symbol span inherits directly —
   while the rest of this Tillæg line sits at line-height:10px (PINK spacing
   spec), so "kr." visually floated out of line with "59" even though both
   were already the same font-size/weight. Pin it to match. */
.side-cart-addons-list .woocommerce-Price-currencySymbol {
    line-height: inherit !important;
}

/* Secret pages */

option.today-date {
    background-color: #079d8a;
}

option.previous-date {
    background-color: #ff9222;
}

a.checkout-button.button.alt.wc-forward {
    font-size: 24px;
    font-family: 'Proxima Nova';
}

/* Variant/Tillæg → price line = 6px (PINK spacing spec, "6-7px"). */
.side-cart-item-price {
    display: inline-block;
    margin-top: 6px;
}

.mini-cart-item-price {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.mini-cart-quantity {
    display: flex;
    align-items: center;
    /* Price → white box (qty/±/delete row) = 5px (PINK spacing spec). */
    margin: 5px 0;
}

/* "Valgte varer" (category-page sidebar) quantity/delete row — had no
   spacing at all above it, unlike .mini-cart-quantity (header drawer),
   which already has margin. Per Michael's feedback. !important as a
   safety net: this widget likely has its own Elementor per-widget Custom
   CSS resetting margin, same as #mini-cart-fb .mini-cart-quantity did,
   just under an ID we don't know without inspecting the live page. */
.side-cart-quantity {
    margin-top: 5px !important;
}

.mini-cart-quantity button {
    background-color: #ddd;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.mini-cart-total {
    color: white;
}

.mini-cart-quantity input {
    width: 60px;
    text-align: center;
    height: 36px;
    margin: 0;
    border: 0;
    border-radius: 0;
}

#mini-cart {

    .product_details {
        display: flex;
        flex-direction: row;
    }

}


/* Single product Images style */

.woocommerce-product-gallery.woocommerce-product-gallery--with-images.images {
    height: fit-content !important;
}

.woocommerce-product-details__short-description {
    color: white;
}

/* .woocommerce-product-gallery.woocommerce-product-gallery--with-images.images {
    display: flex;
    flex-direction: row-reverse;
    height: 700px;
    margin-bottom: 0 !important;
}

ol.flex-control-nav.flex-control-thumbs {
    margin: 0 !important;
    margin-right: 24px !important;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    overflow: auto !important;
    overflow-x: hidden !important;
}

ol.flex-control-nav.flex-control-thumbs li {
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
}

ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
    display: none;
}

ol.flex-control-nav.flex-control-thumbs li:last-child {
    margin-bottom: 0 !important;
} */

.woocommerce table.variations {

    tr {
        flex-direction: column;
        display: flex;
    }

    th.label {
        padding: 0;
        text-align: left;
        line-height: 24px !important;
        vertical-align: bottom !important;
        background-color: transparent !important;
        font-weight: 400 !important;
    }

    td.value {
        padding: 0;
        padding-bottom: 16px;
    }

}

.quantity-wrapper {
    display: flex;
    align-items: center;

    button.minus {
        color: black !important;
        background-color: white !important;
        border-radius: 8px 0px 0 8px !important;
        border: 1px solid #ccc !important;
        padding: 10px !important;
        border-right: 0px !important;

        svg {
            margin-bottom: -4px;
        }
    }

    button.plus {
        color: black !important;
        background-color: white !important;
        border-radius: 0 8px 8px 0px !important;
        border: 1px solid #ccc !important;
        padding: 10px !important;
        margin-left: 0 !important;
        border-left: 0px !important;

        svg {
            margin-bottom: -4px;
        }
    }

    input[name="quantity"],
    .qty {
        height: 59px !important;
        border-radius: 0;
        border: 1px solid #ccc;
        width: 70px !important;
    }

    /* Hide arrows in Firefox */
    input[name="quantity"],
    .qty {
        -moz-appearance: textfield;
    }

}

.woocommerce .input-text.qty {
    max-height: 47px !important;
    height: 47px;
}

.product-single-sushi {

    .woocommerce-variation-price {
        margin-bottom: 50px;
    }

}


/* ********************** */
/* Cart page styles */
/* ********************** */
.custom-cart-ts {

    thead tr {
        height: 64px;
    }

    tbody tr {
        height: 140px;
    }

    td.product-thumbnail img {
        height: 92px !important;
        width: 92px !important;
    }

    thead tr th {
        vertical-align: middle;
        padding: 0 !important;
    }

    tr.fee,
    tr.order-total {
        display: none;
    }

    tr th,
    tr td {
        background-color: #121212 !important;
    }

    div.ts-cart-page-widget div.e-shop-table.e-cart-section.e-cart-section--no-coupon>table {
        border-collapse: separate;
        border-spacing: 0 16px;
        width: 100%;
    }

    thead th:first-child,
    tr td:first-child {
        border-radius: 10px 0px 0px 10px;
        padding: 0 20px !important;
    }

    thead th:last-child,
    tr td:last-child {
        border-radius: 0px 10px 10px 0px;
    }

    td.actions {
        border-radius: 10px !important;
    }

    .continue-shopping-button {
        margin-bottom: 24px !important;
        padding: 16px 32px 16px 32px !important;
        background-color: #121212 !important;
        text-align: center !important;
        border: 1px solid #EDEFF4 !important;
        border-radius: 8px !important;
        font-family: Proxima Nova !important;
        font-weight: 700 !important;
        font-size: 24px !important;
        line-height: 24px !important;
    }

    .continue-shopping-button:hover {
        background-color: #555 !important;
    }

    .qty {
        width: 38px !important;
        color: black !important;
        background: white !important;
        border-radius: 0 !important;
        padding: 22px 12px !important;

    }

    .e-shop-table.e-cart-section.e-cart-section--no-coupon {
        padding: 0;
    }

    .e-cart__column.e-cart__column-end {
        margin-top: 16px;
    }

    .e-cart-totals.e-cart-section {
        padding: 30px;
    }

    button.button[name="update_cart"] {
        color: white !important;
    }

}

button.custom-add-to-cart-button {
    background-color: #079D8A;
    color: white;
    border: 1px solid #079D8A;
    border-radius: 12px;
    height: 56px;
    width: auto;
    font-size: 16px;
    margin-bottom: 20px;
}

.pre-checkout button.custom-add-to-cart-button {
    margin-bottom: 0 !important;
}

.single-product-wc {
    .icomoonregularicon {
        font-size: 30px;
    }

    .variations select {
        margin-bottom: 10px;
    }

    .reset_variations:hover {
        color: #09D6BC;
    }
}

#popup-product-details {

    .product-images img {
        width: 100%;
        height: 550px;
        object-fit: cover;
        border-radius: 10px 10px 0 0;
    }

    .product-sales-label {
        position: absolute;
        top: 15px;
        right: 15px;
        background-color: #079D8A;
        padding: 6px 25px;
        border-radius: 30px;
        color: white;
    }

    .product-description a {
        color: #079D8A;
    }

    .variation-selector {
        background-color: #ffffff;
    }

    .product-details {
        padding: 0 32px;
        color: white;
    }

    .product-heading {
        display: flex;
        flex-direction: row;
        column-gap: 20px;
        align-items: center;
        margin: 22px 0 16px 0;

        h2 {
            font-size: 24px;
            line-height: 24px;
            margin: 0;
        }

    }

    .product-price {
        border-left: 1px solid white;
        padding-left: 20px;
        font-size: 20px;
        line-height: 20px;
        color: #079D8A;
    }

    .product-variations {
        margin-top: 20px;
        margin-bottom: -22px;
    }

    span.woocommerce-Price-amount.amount {
        color: #079D8A;
    }

    /* .product-variations has a -22px bottom margin to tighten the gap
       to the "Tilføj til kurv" button when no add-ons render. When Tillæg
       fields follow it, a margin-top here would collapse straight through
       with that negative sibling margin (net 0px gap), so use padding
       instead — padding never collapses — to actually push the add-ons
       block down. */
    .wc-pao-addons-container {
        padding-top: 22px;
    }

    .wc-pao-addon-container + .wc-pao-addon-container {
        margin-top: 16px;
    }

    /* Product Add-ons' own frontend.css (force-enqueued above so this popup
       gets styled add-ons at all) sets .wc-pao-legend{display:table} and
       .wc-pao-addon-name{margin:0}, and it's enqueued after this stylesheet,
       so it wins on source order at equal specificity — override explicitly. */
    .wc-pao-addon-name.wc-pao-legend,
    legend.wc-pao-addon-name {
        display: block !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

    /* <legend> ignores its own margin-top for layout purposes (browsers
       position it flush with the fieldset's top border regardless), so the
       space above "Tillæg" has to come from the fieldset itself instead. */
    .wc-pao-fieldset {
        margin-top: 10px !important;
    }

    /* Live Tillæg price preview line, injected by
       ts-woocommerce-add-tocart-button.js (.wc-pao-live-total). Revert
       together with that JS block if this feature is undone. */
    .product-price .wc-pao-live-total {
        font-size: 13px;
        line-height: 16px;
        color: #9EA2AE;
        margin-top: 2px;
        white-space: nowrap;
    }

}

button#popup-add-to-cart-button {
    width: 100%;
    border: 0;
    background-color: #079D8A;
    color: white;
    border-radius: 5px;
}


.checkout-shop-selection .elementor-loop-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
}

.checkout-shop-selection .elementor-loop-container .type-shops {
    width: 23%
}

@media (max-width: 767px) {

    .checkout-shop-selection .elementor-loop-container .type-shops {
        width: 100% !important;
    }

    .checkout-shop-selection .elementor-loop-container {
        flex-direction: column !important;
        gap: 20px !important;
        justify-content: center !important;
    }

}

@media (max-width: 1025px) {
    .checkout-shop-selection .elementor-loop-container .type-shops {
        width: 46%;
    }
}

/* .shop-selection-container .elementor-post {
    cursor: pointer;
    border: 2px solid #ccc;
    padding: 10px;
    margin: 5px 0;
    position: relative;
    transition: border-color 0.3s ease;
}

.shop-selection-container .elementor-post.selected {
    border-color: #0073e6;
}

.shop-selection-container .elementor-post::after {
    content: "✔";
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
    color: #0073e6;
    font-size: 16px;
}

.shop-selection-container .elementor-post.selected::after {
    display: block;
} */

/************************** Popup form container styles***************************/
/* #body-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
}

.form-container {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 41%;
    background: #121212;
    padding: 24px;
    border-radius: 10px;
    z-index: 1001;
    display: none;
}

.form-heading {
    display: flex;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #F0F1F4;
}

.form-heading h2 {
    color: #EDEFF4;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    padding-bottom: 24px;
}

.form-heading svg {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 3px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.form-content {
    padding-top: 24px;
    width: 100%;
}


form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


.form-group label {
    color: #EDEFF4;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    padding-bottom: 8px;
}

.form-group input {
    display: flex;
    padding: 16px 24px;
    align-items: center;
    gap: 64px;
    align-self: stretch;
    border-radius: 5px;
    border: 1px solid #C5C9D3;
    background: #FFF;
}

.proceed-btn {
    text-align: right;
}

.authenticate-btn {
    width: 100%;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid #FFF;
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.authenticate-btn:focus {
    background: #079D8A;
}

.authenticate-btn:hover {
    background: #079D8A;
}

.form-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.form-row .form-group {
    flex: 1;
}

.buttons-section {
    display: flex;
}

input[type="radio"] {
    display: none;
}

#pickup-btn+.button-icon::before {

    content: url('http://sushi-test.test/wp-content/uploads/2024/08/Frame-1.svg');
}

#delivery-btn+.button-icon::before {
    content: url('http://sushi-test.test/wp-content/uploads/2024/08/Frame-2.svg');
}

.pickup {
    border-radius: 5px 0px 0px 5px;
    background-color: #EDEFF4;
    padding: 16px 50px;
    border: 1.5px solid #F0F1F4;
    cursor: pointer;
    position: relative;
    user-select: none;
    color: #111;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    align-items: center;
}

.delivery {
    border-radius: 0px 5px 5px 0px;
    background-color: transparent;
    color: #EDEFF4;
    padding: 16px 50px;
    border: 1.5px solid #F0F1F4;
    cursor: pointer;
    position: relative;
    user-select: none;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    align-items: center;
}

.pickup span,
.delivery span {
    vertical-align: middle;
    margin-right: 20px;
}

.pickup::after {
    content: '\f00c';
    position: absolute;
    top: 34%;
    right: 12%;
    display: none;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #079D8A;
}

.pickup.selected::after {
    display: block !important;

}

.delivery::after {
    content: '\f00c';
    position: absolute;
    top: 34%;
    right: 12%;
    display: none;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #079D8A;
}

.delivery.selected::after {
    display: block !important;

} */


input[name="quantity"]::-webkit-outer-spin-button,
input[name="quantity"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[name="quantity"] {
    -moz-appearance: textfield;
}


::-webkit-scrollbar {
    width: 0.9vw;
    background: #fff;
}

::-webkit-scrollbar-thumb {
    background: -webkit-linear-gradient(transparent, #000000);
    background: linear-gradient(transparent, #000000);
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: -webkit-linear-gradient(transparent, #079d8a);
    background: linear-gradient(transparent, #079d8a);
}

/*Firefox Support*/
html {
    scrollbar-width: thin;
    scrollbar-color: #079d8a #000000;
}

.swal2-icon.swal2-success {
    color: #079d8a;
}

.swal2-icon.swal2-error {
    color: red;
}

div:where(.swal2-container) {
    z-index: 99999 !important;
}

.delivery-type-error {
    display: none;
}

.select-shop-error {
    display: none;
}

.shop-post-id {
    display: none;
}

#validate-shop-delivery-type {
    cursor: pointer;
}


/* Timeslot Calendar style */



.calendar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #121212;
    padding: 12px 24px;
    border-radius: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 750px;
    height: 560px;
}

@media (min-width: 1024px) and (max-width: 1600px) {

    .calendar-container {
        max-width: 100%;
    }

    .elementor-element.timeslot_popup_section {
        max-width: 100%;
    }

}

@media only screen and (max-width: 1024px) {

    .calendar-container {
        width: 100vw;
        max-width: 100%;
        padding: 15px;
        height: 400px;

        .day-name {
            font-size: 16px;
        }

        .day-cell {
            font-size: 16px;
            padding: 10px 5px;
        }

        .header-container {
            padding: 10px 0;
        }
    }

    .elementor-element.timeslot_popup_section {
        max-width: 100%;
        width: 100vw;
    }

}

div#calendar {
    width: 100%;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    border-bottom: 1px solid #fff;
    padding: 14px 0;
}

.arrow {
    cursor: pointer;
    font-size: 20px;
}

.day-name {
    font-family: 'Proxima Nova';
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 400;
}

.month-header {
    font-size: 20px;
    color: #fff;
    font-family: 'Proxima Nova';
}

.days-of-week {
    display: flex;
    justify-content: space-around;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
}

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.day-cell {
    padding: 18px 10px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    font-size: 20px;
    font-family: 'Proxima Nova';
    color: #fff;
    font-weight: 700;
}

.day-cell:hover {
    background: #079D8A;
    color: #fff;
}

.day-cell:active {
    background: #079D8A;
    color: #fff;
}

.day-cell.active {
    background-color: #079D8A;
    /* Customizable selected color */
    color: #fff;
}

.day-cell.disabled {
    color: #868686;
    cursor: not-allowed;
    font-weight: 400;
}

.day-cell.empty {
    visibility: hidden;
}


/* Time Slot Calendar Style end */

/* Timeslots style start  */

.timeslot-container {
    display: flex;
    gap: 0;
}

.custom-scroll-sushi-container::-webkit-scrollbar {
    width: 12px;
}

.custom-scroll-sushi-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-scroll-sushi-container::-webkit-scrollbar-thumb {
    background: #888;
}

.custom-scroll-sushi-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.timeslot {
    flex: 1 1 25%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 0;
    cursor: pointer;
    position: relative;
    color: #000;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.timeslot.disabled {
    cursor: not-allowed;

    .timeslot-text,
    .timeslot-text span {
        color: #000 !important;
    }

    .radio-circle {
        border-color: #ffdfdf !important;
    }
}

/* Tooltip styling */
.tooltip {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 4px;
    position: absolute;
    /* bottom: 100%; */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
}

.timeslot:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

#timeslotContainer {
    display: flex;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    flex-wrap: wrap;
    flex-direction: row;
}

.radio-circle {
    width: 24px;
    height: 24px;
    border: 1.5px solid #EDEFF4;
    border-radius: 50%;
    margin-top: 5px;
    background-color: transparent;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radio-circle-inner {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #EDEFF4;
    transition: background-color 0.3s;
    display: none;
}

.timeslot.selected .radio-circle-inner {
    display: flex;
}




/* Timeslots style end */



.product-category-item p {
    font-size: 16px;
    color: white;
    font-family: 'Proxima Nova';
}

.product-category-item h3 {
    font-family: 'Proxima Nova';
    font-size: 1.1vw;
    font-weight: 600;
    text-transform: uppercase;
    color: white;
    margin-top: 32px;
}

.product-category-image img {
    border-radius: 8px;
}

.product-category-item {
    padding: 24px;
    background-color: #121212;
    border: 1px solid #444;
    border-radius: 10px;
}

.product-categories-widget {
    column-gap: 1.33%;
    /* justify-content: center; */
    flex-direction: row;
    row-gap: 20px;
}

.product-categories-widget .product-category-item {
    width: 24%;
    text-align: center;
}

/* Tablet Screen (768px to 1024px) - 2 Columns */
@media (min-width: 768px) and (max-width: 1024px) {
    .product-categories-widget .product-category-item {
        width: 48.5%;
        /* Adjusting for the 1.33% column-gap */
    }

    .product-category-item h3 {
        font-size: 2vw;
    }
}

/* Mobile Screen (Up to 767px) - 1 Column */
@media (max-width: 767px) {
    .product-categories-widget .product-category-item {
        width: 100%;
    }

    .product-category-item h3 {
        font-size: 6vw;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {

    #header-cart-icon svg {
        font-size: 1.6vw;
    }

}


.woocommerce-breadcrumb a {
    font-weight: 400;
}

.woocommerce-breadcrumb {
    font-weight: 700 !important;
}

.products_list_warning {
    list-style: none;
    padding-left: 0;

    a {
        color: #079D8A;
    }
}

.swal2-confirm.swal2-styled {
    background-color: #079D8A;
    border: 1px solid #000;
    color: #fff;
}


/* Header cart counter */

#header-cart-counter {
    color: white;
    font-family: 'Proxima Nova';
    background-color: #079D8A;
    border-radius: 25px;
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    line-height: 18px;
    position: absolute;
    top: 0;
    right: -8px;
}

#header-cart-icon svg {
    font-size: 24px;
}


/* Shop Selection Css */

.shop_disabled {
    opacity: 0.5;
    user-select: none !important;
    cursor: not-allowed;
}

.shop_disabled_temporary {
    opacity: 0.5;
    user-select: none !important;
    cursor: not-allowed;
}

.temp-disable-button {
    opacity: 0.5;
    user-select: none !important;
    cursor: not-allowed;
}

.shop-error-message {
    display: none;
}

.delivery_disabled {
    opacity: 0.5;
    user-select: none !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

#timeslotContainer span {
    align-items: center;
    justify-content: center;
    display: flex;
    width: 100%;
    color: white;

    a {}
}

.dawa-autocomplete-suggestions {
    list-style: none;
    color: white;
    padding-left: 20px;
}

#address_verified_continue {
    display: none;
}

#address_verification {
    display: none;
}

#address_verification_error {
    display: none;
}

.countdown-container {
    background-color: #121212;
    height: 80px;
    border: 1.5px solid white;
    border-radius: 10px;
    justify-content: center;
    display: flex;
    align-items: center;
    color: white;
    font-size: 16px;
    margin-bottom: 30px;

    span {
        margin-bottom: 0 !important;
    }
}

@media only screen and (max-width: 1024px) {
    .countdown-container {
        display: block;
        padding: 8px;
    }
}

#countdown-timer {
    margin-bottom: 0 !important;
    margin: 0px 5px;
}

.allergy_checkboxes p,
.extras_checkboxes p {
    width: 50%;
    color: white;
}

.allergy_checkboxes,
.extras_checkboxes,
.additional_info {
    color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .checkbox {
        color: white;
    }

    #allergy_comments_field {
        width: 100%;

        textarea {
            border-radius: 8px;
        }
    }
}

.additional_info #other_allergy_comments_field {
    width: 100%;

    textarea {
        border-radius: 8px;
    }
}

#comments_section {
    margin-top: 24px;
    margin-bottom: 24px;
}

.elementor-widget-woocommerce-checkout-page .woocommerce .shop_table tfoot td,
.elementor-widget-woocommerce-checkout-page .woocommerce .shop_table tfoot th {
    color: white;
}

.elementor-widget-woocommerce-checkout-page .woocommerce .shop_table tbody td {
    color: white;
}

.woocommerce-order {
    color: white;
    background-color: #121212;
    border: 1px solid white;
    border-radius: 10px;
    padding: 45px;
}



/* Toggle Button CSS for custom checkbox */
.ts-custom-table {
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }

    .switch .ts-checkbox-toggle {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider::before {
        position: absolute;
        content: "";
        font-family: "Font Awesome 5 Free";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
        padding: 6px;
    }

    .ts-checkbox-toggle:checked+.slider::before {
        content: "\f00c";
    }

    .ts-checkbox-toggle:checked+.slider {
        background-color: #079D8A;
    }

    .ts-checkbox-toggle:focus+.slider {
        box-shadow: 0 0 1px #079D8A;
    }

    .flagged .ts-checkbox-toggle:checked+.slider {
        background-color: #ac1313;
    }

    .flagged .ts-checkbox-toggle:focus+.slider {
        box-shadow: 0 0 1px #ac1313;
    }

    .ts-checkbox-toggle:checked+.slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }

    .switch.disabled .slider {
        background-color: #e6e6e6;
        cursor: not-allowed;
    }

    .switch.disabled .ts-checkbox-toggle:checked+.slider {
        background-color: #079D659E;
    }

    .switch.disabled .ts-checkbox-toggle:checked+.slider::before {
        content: "";
    }

}

.button.button-id,
.button.button-wolt-request {
    border: 1px solid #079D8A;
    color: #079D8A;
    border-radius: 10px;
}

.button.button-id:hover,
.button.button-wolt-request:hover {
    background-color: #079D8A;
    color: white;
}

.button.button-id:focus,
.button.button-wolt-request:focus {
    background-color: #079D8A;
    color: white;
}

@media only screen and (max-width: 767px) {
    #mobile-view-filters {
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        display: none;
    }

    #mobile-view-filters.active {
        opacity: 1;
        transform: translateY(0);
    }

    .woocommerce-category-filter-widget {
        border-radius: 10px;
    }
}

.bold {
    font-weight: bold;
}

/* Modal Styles */
#orderlistModal,
#woltDataModal {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overflow: auto;

    .modal-content {
        background: #fff;
        width: 90%;
        max-width: 800px;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        position: relative;
        height: 80vh;
        overflow: auto;
    }

    h2,
    h3 {
        margin: 0 0 15px;
    }

    .order-info p {
        margin: 5px 0;
    }

    .order-items ul {
        list-style: none;
        padding: 0;
    }

    .order-items ul li {
        margin-bottom: 10px;
        padding: 10px;
        background: #f8f8f8;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .close-button {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 18px;
        cursor: pointer;
        color: #333;
    }

    .close-wolt-button {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 18px;
        cursor: pointer;
        color: #333;
    }

    .modal .close-button:hover {
        color: red;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: scale(0.9);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }
}

/* Custom checkbox for Timeslot page */

/* The container */
.checkbox-container {
    display: flex;
    position: relative;
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 24px;
    color: #EDEFF4;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    background-color: #eee;
    border-radius: 25px;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input~.checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked~.checkmark {
    background-color: rgb(7, 157, 138);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
    left: 10px;
    top: 8px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Per Michael: only the "kr." currency symbol should always be white on
   the order-received page — the numeric amount keeps its existing color
   (teal/green from .woocommerce-Price-amount.amount elsewhere in this
   file). The old "#order-details ..." selector here never matched the
   real page markup (which uses classes, not that id), so it was dead. */
body.woocommerce-order-received .woocommerce-Price-currencySymbol {
    color: #ffffff !important;
}

/* Top summary strip: "Order Number:"/"Date:"/"Email:"/"Total:"/"Payment
   Method:" labels should be green, with their values staying white. The
   label text is a plain text node (not wrapped in its own element), so
   color it via the shared <li> and then override the value's <strong>
   back to white. Real classes confirmed live (.woocommerce-order-overview__order/
   __date/__email/__total/__payment-method) — an existing nearby rule
   targeting ".woocommerce-order-overview__item" never matched anything,
   same dead-selector issue found elsewhere on this page. */
body.woocommerce-order-received .woocommerce-order-overview > li {
    color: #079d8a;
}
body.woocommerce-order-received .woocommerce-order-overview > li strong {
    color: #ffffff;
}

.error-input-field {
    border-color: red !important;
}

.error_time {
    margin-top: -30px;
}

.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions {
    gap: 10px;
    display: flex;
    align-items: center;
}


/* Tania CSS code */

/* //product archive page */

@media screen and (max-width: 1366px) and (min-width: 768px) {
    .elementor-widget-custom_add_to_cart .custom-add-to-cart-button {
        width: 132px;
    }
}

@media screen and (max-width: 1366px) {
    .elementor-widget-custom_add_to_cart .custom-add-to-cart-button {
        width: auto;
    }
}


/* //mini cart/ side cart */
#mini-cart-fb {
    margin: 10px 0;
}

#mini-cart-fb .prod_content {
    width: 100%;
}

/* Elementor's own per-widget Custom CSS for this widget sets
   "#mini-cart-fb .mini-cart-quantity { margin: 0; }", which — being ID +
   class — outranks the plain ".mini-cart-quantity { margin: 5px 0; }"
   rule above and cancels its spacing. Match that same specificity here
   (with !important as a tiebreaker, since Elementor's CSS may load after
   this stylesheet) so the quantity/delete row keeps its top spacing. */
#mini-cart-fb .mini-cart-quantity {
    margin: 5px 0 !important;
}

/* //single product page & product loop */
span.woocommerce-Price-amount.amount {
    color: #079D8A;
    /* font-size: 16px; */
    line-height: 24px;
    font-family: 'Proxima Nova';
}

.woocommerce-product-gallery div.flex-viewport {
    border-radius: 10px;
}

.woocommerce div.product div.images img {
    border-radius: 10px;
}

.woocommerce-product-details__short-description a {
    color: #079D8A;
}

.elementor-widget-woocommerce-product-price p.price {
    margin-block-end: 0;
}


/* //cart page */

.ts-cart-page-widget .elementor-widget-woocommerce-cart .woocommerce .input-text.qty {
    border-width: 0px !important;
    border-left: 1px solid #F0F1F4 !important;
    border-right: 1px solid #F0F1F4 !important;
}

.ts-cart-page-widget .woocommerce-cart-form__cart-item.cart_item dl.variation dt,
.ts-cart-page-widget .woocommerce-cart-form__cart-item.cart_item dl.variation dd,
.ts-cart-page-widget .woocommerce-cart-form__cart-item.cart_item dl.variation dd span.woocommerce-Price-amount.amount {
    font-size: 13px !important;
}

/* QA-05 follow-up (2026-10-03): on the full /cart/ page, Elementor's own
   page-specific CSS (post-62.css, ".elementor-62 .elementor-element-2621aa73
   .cart td span") sets every <span> in the cart table — including the
   ".sushi2500-nowrap" wrapper around "(+ kr. 59)" — to 18px bold. That beat
   the generic ".sushi2500-nowrap" rule above (which only sets white-space)
   and fed 18px into the price span via its "inherit" rule, even after
   pinning the row to 13px above. Match/exceed that Elementor rule's
   specificity so the wrapper (and therefore the inherited price) is 13px
   regular here too, same as the "Valgte varer" sidebar. */
.ts-cart-page-widget .woocommerce-cart-form__cart-item.cart_item dl.variation dd .sushi2500-nowrap {
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* The same Elementor "span" rule also matches the currency-symbol span
   ("kr. ") directly (not just via inheritance from its parent), so it was
   still rendering at 18px and sitting visually lower than the "59" next to
   it even after the fixes above. Bring it down to match. */
.ts-cart-page-widget .woocommerce-cart-form__cart-item.cart_item dl.variation dd .woocommerce-Price-currencySymbol {
    font-size: 13px !important;
}

.ts-cart-page-widget .change-variation-btn i {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    font-size: 12px;
}

.ts-cart-page-widget .change-variation-btn i::after {
    content: "Skift variant";
    /* Change this to "Change Variation" if needed */
    font-family: inherit;
    /* Inherits your current theme font */
    font-size: 14px;
    /* Adjust the text size as needed */
    font-weight: 500;
    color: #ffffff;
    /* Set to your preferred text color */
    margin-left: 8px;
    /* Adds breathing room between the icon and text */
    vertical-align: middle;
    /* Keeps the text aligned with the pencil */
    display: inline-block;
    font-family: "Proxima Nova", sans-serif;
}

.ts-cart-page-widget .variation-container {
    margin-top: 5px;
}

/* .ts-cart-page-widget .quantity-wrapper {

    input[name="quantity"],
    .qty {
        height: 47px !important
    }
} */

/* //for popup close button */
#elementor-popup-modal-210820 a.dialog-close-button.dialog-lightbox-close-button {
    right: -35px !important;
}

#elementor-popup-modal-2340 a.dialog-close-button.dialog-lightbox-close-button {
    right: -35px !important;
}

#elementor-popup-modal-2478 a.dialog-close-button.dialog-lightbox-close-button {
    right: -35px !important;
}

@media (max-width: 767px) {

    /* //for popup close button */
    #elementor-popup-modal-210820 a.dialog-close-button.dialog-lightbox-close-button {
        right: 10px !important;
    }

    #elementor-popup-modal-2340 a.dialog-close-button.dialog-lightbox-close-button {
        right: 10px !important;
    }

    #elementor-popup-modal-2478 a.dialog-close-button.dialog-lightbox-close-button {
        right: 10px !important;
    }
}


/* //pre-checkout popup  */
@media screen and (max-width: 1024px) {
    #elementor-popup-modal-210820 .elementor-loop-container.elementor-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.reset_variations {
    color: #079D8A;
    font-size: 18px !important;
    font-family: 'Proxima Nova';
    margin-top: 10px;
}

.variations th label {
    margin-bottom: 10px;
}


#options_section>p {
    color: #EDEFF4;
    font-family: "Proxima Nova";
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

#allergy_section>p,
#comments_section>p {
    color: #EDEFF4;
    font-family: "Proxima Nova";
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

div#allergy_section p {
    color: #079D8A;
}

/* Hidden until "Other allergies" is checked (see sushi-woo-checkout-script.js) */
#allergy_section .other-allergy-textarea-wrap {
    display: none;
}

div#options_section p {
    color: #079D8A;
}

#extra_options_section #bag-options-dropdown {
    select {
        border: 2px solid #079D8A;
        color: #079D8A;
    }

    h3 {
        font-size: 16px;
        line-height: 24px;
        color: #EDEFF4;
        margin-top: 20px;
        margin-bottom: 5px;
    }
}

#extra_options_section #number-of-people-dropdown {

    select,
    input#number_of_people_custom {
        border: 2px solid #079D8A;
        color: #079D8A;
        width: 100%;
    }

    input#number_of_people_custom {
        margin-top: 10px;
        padding: 10px 12px;
        background: #fff;
        border-radius: 4px;
    }

    h3 {
        font-size: 16px;
        line-height: 24px;
        color: #EDEFF4;
        margin-top: 20px;
        margin-bottom: 5px;
    }
}

#extra_options_section #soya-options-dropdown {
    select {
        border: 2px solid #079D8A;
        color: #079D8A;
    }

    h3 {
        font-size: 16px;
        line-height: 24px;
        color: #EDEFF4;
        margin-top: 20px;
        margin-bottom: 5px;
    }
}

#extra_options_section #crw-options-dropdown {
    select {
        border: 2px solid #079D8A;
        color: #079D8A;
    }

    h3 {
        font-size: 16px;
        line-height: 24px;
        color: #EDEFF4;
        margin-top: 20px;
        margin-bottom: 5px;
    }
}

#extra_options_section #chopsticks-reusable-options-dropdown h3 {
    font-size: 16px;
    line-height: 24px;
    color: #EDEFF4;
    margin-top: 20px;
    margin-bottom: 5px;
}

#extra_options_section #children-chopsticks-reusable-options-dropdown h3 {
    font-size: 16px;
    line-height: 24px;
    color: #EDEFF4;
    margin-top: 20px;
    margin-bottom: 5px;
}

.woocommerce-privacy-policy-text p {
    font-size: 14px;
}

payment_box payment_method_bambora p {
    font-size: 14px;
}

.elementor-widget-woocommerce-checkout-page .woocommerce #customer_details .form-row .input-text {
    font-size: 16px;
    line-height: 24px;
    color: #000000 !important;
}

#customer_details .woocommerce-billing-fields .form-row label {
    font-family: "Proxima Nova", Sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #EDEFF4;
}

#allergy_section .allergy_checkboxes .form-row .woocommerce-input-wrapper label {
    font-family: "Proxima Nova", Sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #EDEFF4;
}

#options_section .allergy_checkboxes .form-row .woocommerce-input-wrapper label {
    font-family: "Proxima Nova", Sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #EDEFF4;
}

#options_section .extras_checkboxes .form-row .woocommerce-input-wrapper label {
    font-family: "Proxima Nova", Sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #EDEFF4;
}

/* Style for Popup Archieve products */

/* .elementor-217 .elementor-element.elementor-element-8f24921 {
     --display: flex;
     --flex-direction: column;
     --container-widget-width: calc((1 - var(--container-widget-flex-grow)) * 100%);
     --container-widget-height: initial;
     --container-widget-flex-grow: 0;
     --container-widget-align-self: initial;
     --flex-wrap-mobile: wrap;
     --justify-content: flex-start;
     --align-items: stretch;
     border-style: solid;
     --border-style: solid;
     border-width: 1px 1px 1px 1px;
     --border-top-width: 1px;
     --border-right-width: 1px;
     --border-bottom-width: 1px;
     --border-left-width: 1px;
     border-color: #F0F1F4;
     --border-color: #F0F1F4;
     --border-radius: 10px 10px 10px 10px;
     --padding-top: 24px;
     --padding-bottom: 24px;
     --padding-left: 24px;
     --padding-right: 24px;
 }

 .elementor-217 .elementor-element.elementor-element-8f24921:not(.elementor-motion-effects-element-type-background),
 .elementor-217 .elementor-element.elementor-element-8f24921>.elementor-motion-effects-container>.elementor-motion-effects-layer {
     background-color: #121212;
 } */

.elementor-217 .elementor-element.elementor-element-aa8dd2f {
    --display: flex;
    --flex-direction: row;
    --container-widget-width: calc((1 - var(--container-widget-flex-grow)) * 100%);
    --container-widget-height: 100%;
    --container-widget-flex-grow: 1;
    --container-widget-align-self: stretch;
    --flex-wrap-mobile: wrap;
    --justify-content: flex-start;
    --align-items: center;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
}

.elementor-217 .elementor-element.elementor-element-aa8dd2f.e-con {
    --flex-grow: 0;
    --flex-shrink: 0;
}

.elementor-widget-theme-post-featured-image .widget-image-caption {
    color: var(--e-global-color-text);
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-weight: var(--e-global-typography-text-font-weight);
}

.elementor-217 .elementor-element.elementor-element-0afaba5 img {
    width: 100%;
    max-width: 100%;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #F0F1F4;
    border-radius: 10px 10px 10px 10px;
}

.elementor-217 .elementor-element.elementor-element-b9bbf25>.elementor-widget-container {
    padding: 8px 10px 0px 10px;
    background-color: #FFFFFFB5;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #FFFFFF;
    border-radius: 20px 20px 20px 20px;
}

body:not(.rtl) .elementor-217 .elementor-element.elementor-element-b9bbf25 {
    right: 12px;
}

body.rtl .elementor-217 .elementor-element.elementor-element-b9bbf25 {
    left: 70px;
}

.elementor-217 .elementor-element.elementor-element-b9bbf25 {
    top: 18px;
}

.elementor-217 .elementor-element.elementor-element-5eabe5f {
    --display: flex;
    --flex-direction: column;
    --container-widget-width: 100%;
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
    --justify-content: space-between;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
    flex-grow: 1;
}

.elementor-217 .elementor-element.elementor-element-11d390a {
    --display: flex;
    --flex-direction: column;
    --container-widget-width: 100%;
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
    --justify-content: flex-start;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
}

.elementor-widget-woocommerce-product-title .elementor-heading-title {
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-weight: var(--e-global-typography-primary-font-weight);
    color: var(--e-global-color-primary);
}

.elementor-217 .elementor-element.elementor-element-d2809b0 .elementor-heading-title {
    font-family: "Proxima Nova", Sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: #EDEFF4;
}

.woocommerce .elementor-217 .elementor-element.elementor-element-f6d8769 .woocommerce-product-details__short-description {
    color: #FFFFFF;
    font-family: "Proxima Nova", Sans-serif;
    font-size: 16px;
}

.woocommerce .elementor-widget-woocommerce-product-price .price {
    color: var(--e-global-color-primary);
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-weight: var(--e-global-typography-primary-font-weight);
}

.woocommerce .elementor-217 .elementor-element.elementor-element-d705371 .price {
    color: #EDEFF4;
    font-family: "Proxima Nova", Sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

@media(max-width:1365px) {
    .elementor-217 .elementor-element.elementor-element-aa8dd2f {
        --align-items: flex-start;
        --container-widget-width: calc((1 - var(--container-widget-flex-grow)) * 100%);
    }

    .elementor-217 .elementor-element.elementor-element-0afaba5 img {
        width: 200%;
        height: 200%;
    }
}

@media(max-width:1024px) {
    .elementor-217 .elementor-element.elementor-element-0afaba5 img {
        width: 100%;
        height: 100%;
    }
}

@media(max-width:767px) {
    .elementor-217 .elementor-element.elementor-element-0afaba5 {
        text-align: left;
    }

    .elementor-217 .elementor-element.elementor-element-0afaba5 img {
        width: 100%;
    }

    .elementor-217 .elementor-element.elementor-element-b9bbf25>.elementor-widget-container {
        padding: 4px 12px 2px 12px;
    }

    body:not(.rtl) .elementor-217 .elementor-element.elementor-element-b9bbf25 {
        right: 10px;
    }

    body.rtl .elementor-217 .elementor-element.elementor-element-b9bbf25 {
        left: 10px;
    }

    .elementor-217 .elementor-element.elementor-element-b9bbf25 {
        top: 12px;
    }
}

@media(min-width:768px) {
    .elementor-217 .elementor-element.elementor-element-aa8dd2f {
        --width: 100%;
    }

    .elementor-217 .elementor-element.elementor-element-5eabe5f {
        --width: 100%;
    }
}

.e-checkout__container #wc_gc_cart_redeem_form {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    margin-bottom: 0 !important;
    margin-top: 0;
}

.e-checkout__container #wc_gc_cart_redeem_form.open {
    opacity: 1;
    margin-top: 24px;
    max-height: fit-content !important;
}

.e-checkout__container .add_gift_card_form {
    background: #121212;
    border-color: #444444;
    border-radius: 10px;
    border-style: solid;
    border-width: 1.5px 1.5px 1.5px 1.5px;
    margin: 24px 0 0 0;
    padding: 16px 30px;
}

.e-checkout__container .add_gift_card_form h4 {
    font-family: "Proxima Nova", Sans-serif;
    color: #edeff4;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-block-start: 0;
    margin-block-end: 0;
}

.e-checkout__container .add_gift_card_form input {
    font-size: 16px;
    line-height: 24px;
    color: #868686;
    border: none;
    border-radius: 8px;
}

label.e-coupon-anchor-description {
    margin-bottom: 0.9rem !important;
}

.e-checkout__container .add_gift_card_form button {
    background-color: #079D8A;
    font-family: "Proxima Nova", Sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    box-shadow: 0px 4px 1px 0px rgba(255, 255, 255, 0.25098039215686274);
    border-radius: 8px 8px 8px 8px;
    padding: 14px 0px 14px 0px;
    color: #EDEFF4 !important;
}

p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
    font-family: "Proxima Nova", Sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
}

ul.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details {
    margin: 25px 0 35px 0;
}

ul.woocommerce-order-overview.woocommerce-thankyou-order-details li {
    font-family: "Proxima Nova", Sans-serif;
    font-size: 16px;
    line-height: 24px;
    line-height: 18px;
}

ul.woocommerce-order-overview.woocommerce-thankyou-order-details li strong {
    font-family: "Proxima Nova", Sans-serif;
    font-size: 18px;
    margin-top: 8px;
    line-height: 26px;
}

.custom-thankYou .woocommerce-order-details .shop_table {
    background-color: #ffffff00 !important;
    /* 	border:0px;
    border-color: var(--sections-border-color, #d5d8dc);
    border-radius: var(--sections-border-radius, 3px);
    border-style: var(--sections-border-type, solid); */
    border-width: 0px;
    padding: 0px;
}

.custom-thankYou .woocommerce-order-details .shop_table.order_details td {
    border: 0px;
}

.custom-thankYou .woocommerce-order-details .shop_table.order_details tr th {
    border: 0px;
}

.custom-thankYou .woocommerce-order-details .order-again a.button {
    margin-top: 0px;
}

.custom-thankYou .woocommerce-order .woocommerce-customer-details h2 {
    margin-bottom: 20px;
    margin-top: 0px;
}

.custom-thankYou .woocommerce-order .woocommerce-order-details h2 {
    margin-bottom: 20px;
    margin-top: 0px;
}

.custom-thankYou .woocommerce-order section.woocommerce-order-details {
    margin-top: 60px;
    margin-bottom: 60px;
}

.custom-thankYou .woocommerce-order section.woocommerce-customer-details {
    margin-bottom: 0px;
}

.custom-thankYou .woocommerce-order .woocommerce-customer-details address {
    font-size: 16px;
    line-height: 24px;
}

.custom-thankYou .woocommerce-order ul.woocommerce-thankyou-order-details {
    margin-bottom: 60px !important;
    margin-top: 0px !important;
}

.custom-thankYou .woocommerce-order ul.order_details li {
    margin-bottom: 0px !important;
}

.custom-thankYou .woocommerce-order .woocommerce-customer-details address .woocommerce-customer-details--phone {
    margin-top: 10px;
    margin-bottom: 10px;
}

.woocommerce_gc_giftcard_form {
    color: #fff;
}


/* .elementor-217 .elementor-element.elementor-element-8f24921 {
    --display: flex;
    --flex-direction: row;
    --container-widget-width: initial;
    --container-widget-height: 100%;
    --container-widget-flex-grow: 1;
    --container-widget-align-self: stretch;
    --flex-wrap-mobile: wrap;
    --justify-content: center;
    border-style: solid;
    --border-style: solid;
    border-width: 1px 1px 1px 1px;
    --border-top-width: 1px;
    --border-right-width: 1px;
    --border-bottom-width: 1px;
    --border-left-width: 1px;
    border-color: #F0F1F4;
    --border-color: #F0F1F4;
    --border-radius: 10px 10px 10px 10px;
    --padding-top: 24px;
    --padding-bottom: 24px;
    --padding-left: 24px;
    --padding-right: 24px;
}

.elementor-217 .elementor-element.elementor-element-8f24921:not(.elementor-motion-effects-element-type-background),
.elementor-217 .elementor-element.elementor-element-8f24921>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    background-color: #121212;
}

.elementor-217 .elementor-element.elementor-element-aa8dd2f {
    --display: flex;
    --flex-direction: row;
    --container-widget-width: calc((1 - var(--container-widget-flex-grow)) * 100%);
    --container-widget-height: 100%;
    --container-widget-flex-grow: 1;
    --container-widget-align-self: stretch;
    --flex-wrap-mobile: wrap;
    --justify-content: flex-start;
    --align-items: center;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
}

.elementor-217 .elementor-element.elementor-element-aa8dd2f.e-con {
    --flex-grow: 0;
    --flex-shrink: 0;
}

.elementor-217 .elementor-element.elementor-element-0afaba5 img {
    width: 200%;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #F0F1F4;
    border-radius: 10px 10px 10px 10px;
}

.elementor-217 .elementor-element.elementor-element-5eabe5f {
    --display: flex;
    --flex-direction: column;
    --container-widget-width: 100%;
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
    --justify-content: space-between;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
}

.elementor-217 .elementor-element.elementor-element-11d390a {
    --display: flex;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
}

.elementor-217 .elementor-element.elementor-element-d2809b0 .elementor-heading-title {
    font-family: "Proxima Nova", Sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: #EDEFF4;
}

.woocommerce .elementor-217 .elementor-element.elementor-element-f6d8769 .woocommerce-product-details__short-description {
    color: #FFFFFF;
    font-family: "Proxima Nova", Sans-serif;
    font-size: 16px;
}

.woocommerce .elementor-217 .elementor-element.elementor-element-d705371 .price {
    color: #EDEFF4;
    font-family: "Proxima Nova", Sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.elementor-217 .elementor-element.elementor-element-4e008e4>.elementor-widget-container {
    margin: 0px -24px -24px 0px;
}

body:not(.rtl) .elementor-217 .elementor-element.elementor-element-b9bbf25 {
    right: 0px;
}

.elementor-217 .elementor-element.elementor-element-b9bbf25 {
    top: 0px;
}

@media(max-width:1365px) {
    .elementor-217 .elementor-element.elementor-element-aa8dd2f {
        --align-items: flex-start;
        --container-widget-width: calc((1 - var(--container-widget-flex-grow)) * 100%);
    }

    .elementor-217 .elementor-element.elementor-element-0afaba5 img {
        width: 200%;
        height: 200%;
    }
}

@media(max-width:1024px) {
    .elementor-217 .elementor-element.elementor-element-0afaba5 img {
        width: 100%;
        height: 100%;
    }
}

@media(max-width:767px) {
    .elementor-217 .elementor-element.elementor-element-0afaba5 {
        text-align: left;
    }

    .elementor-217 .elementor-element.elementor-element-0afaba5 img {
        width: 50%;
    }
}

@media(min-width:768px) {
    .elementor-217 .elementor-element.elementor-element-aa8dd2f {
        --width: 36.954%;
    }

    .elementor-217 .elementor-element.elementor-element-5eabe5f {
        --width: 100%;
    }
} */

/* Thank you / view order page improvements */
.woocommerce-order-received .woocommerce-order .woocommerce-thankyou-order-received,
.woocommerce-view-order .woocommerce-order .woocommerce-thankyou-order-received {
    font-size: 18px;
    line-height: 26px;
}

.woocommerce-order-received .woocommerce-order-overview,
.woocommerce-view-order .woocommerce-order-overview,
.custom-thankYou .woocommerce-order-overview {
    gap: 18px;
}

.woocommerce-order-received .woocommerce-order-overview__item,
.woocommerce-view-order .woocommerce-order-overview__item,
.custom-thankYou .woocommerce-order-overview__item,
.woocommerce-order-received .woocommerce-order-overview__item strong,
.woocommerce-view-order .woocommerce-order-overview__item strong,
.custom-thankYou .woocommerce-order-overview__item strong {
    font-size: 16px;
    line-height: 22px;
}

.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-view-order .woocommerce-order-details__title,
.custom-thankYou .woocommerce-order-details__title {
    font-size: 18px;
    line-height: 26px;
}

.woocommerce-order-received .woocommerce-table--order-details th,
.woocommerce-order-received .woocommerce-table--order-details td,
.woocommerce-view-order .woocommerce-table--order-details th,
.woocommerce-view-order .woocommerce-table--order-details td,
.custom-thankYou .woocommerce-table--order-details th,
.custom-thankYou .woocommerce-table--order-details td,
.woocommerce-order-received .woocommerce-table--order-details .product-name,
.woocommerce-view-order .woocommerce-table--order-details .product-name,
.custom-thankYou .woocommerce-table--order-details .product-name,
.woocommerce-order-received .woocommerce-table--order-details .product-total,
.woocommerce-view-order .woocommerce-table--order-details .product-total,
.custom-thankYou .woocommerce-table--order-details .product-total {
    font-size: 16px;
    line-height: 22px;
}

.woocommerce-order-received .woocommerce-table--order-details .tax_label,
.woocommerce-view-order .woocommerce-table--order-details .tax_label,
.custom-thankYou .woocommerce-table--order-details .tax_label {
    font-size: 12px;
    line-height: 16px;
    display: inline-block;
    margin-left: 4px;
}

/* Removes the browser-default <ul> indent on the "Ris:"/"Dips:"/"Variant:"
   item-meta lines so they align vertically with the product name above them,
   instead of sitting indented under it. */
.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta,
.woocommerce-view-order .woocommerce-table--order-details .wc-item-meta,
.custom-thankYou .woocommerce-table--order-details .wc-item-meta {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

/* The label word itself is whitened via an inline-styled span (see
   sushi2500_whiten_order_item_meta_label() in functions/common.php), but
   the trailing ":" is WooCommerce core's own un-filterable label_after
   text, which otherwise still inherits this page's teal. Force the whole
   <strong> (word + colon) white so both match. */
.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta-label,
.woocommerce-view-order .woocommerce-table--order-details .wc-item-meta-label,
.custom-thankYou .woocommerce-table--order-details .wc-item-meta-label {
    color: #ffffff !important;
}

.woocommerce-order-received .order-again .button,
.woocommerce-view-order .order-again .button,
.custom-thankYou .order-again .button {
    padding: 10px 18px;
    font-size: 14px;
}

.woocommerce-order-received .woocommerce-customer-details address,
.woocommerce-view-order .woocommerce-customer-details address,
.custom-thankYou .woocommerce-customer-details address {
    background: #121212;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 16px;
    font-size: 16px;
    line-height: 24px;
}

#popup-product-details .icon-wrapper {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #FFFFFFB5;
    padding: 0px 10px 0px 10px;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #FFFFFF;
    border-radius: 20px 20px 20px 20px;
}

/* Michael 2026-10-06: add-on (Tillæg) prices are green EVERYWHERE — side cart, cart page
   and checkout — but the "kr." currency symbol stays white (only the number is green). */
dl.variation dd .woocommerce-Price-amount.amount,
.side-cart-addons-list .woocommerce-Price-amount.amount,
.wc-pao-addon-price .woocommerce-Price-amount.amount {
    color: #079D8A !important;
}
dl.variation dd .woocommerce-Price-amount.amount .woocommerce-Price-currencySymbol,
.side-cart-addons-list .woocommerce-Price-amount.amount .woocommerce-Price-currencySymbol,
.wc-pao-addon-price .woocommerce-Price-amount.amount .woocommerce-Price-currencySymbol {
    color: #ffffff !important;
}

/* Michael 2026-10-06: when a variant / Tillæg line wraps onto a second line in the narrow
   side cart (his screens: 3440x1440 and 1720x1440), keep some air on the right so the text
   does not touch the edge, and let long words break instead of overflowing. */
.mini-cart-items .variation-name-cart.variation,
.mini-cart-items .side-cart-addons-list {
    padding-right: 14px;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}
.mini-cart-items .side-cart-addon-line {
    padding-left: 2px;
}

/* Michael 2026-10-15 Fix 02: in the side cart the "kr." is white everywhere (only the number
   is green) — it was still green on the line prices and the total. */
.mini-cart-items .woocommerce-Price-currencySymbol,
.side-cart-item-price .woocommerce-Price-currencySymbol,
.mini-cart-item-price .woocommerce-Price-currencySymbol,
.mini-cart-total .woocommerce-Price-currencySymbol,
.side-cart-total .woocommerce-Price-currencySymbol,
.products-list-cart .woocommerce-Price-currencySymbol {
    color: #ffffff !important;
}

/* Michael 2026-10-15 Fix 04: cart "Rabatkupon: CODE   -amount kr. [Fjern]" wrapped onto two
   lines. One line now (16px: at 18px the label still wrapped on newdev, where the price text is wider): the label may shrink/wrap on its own, the amount and the [Fjern]
   link stay together on the right and never break in the middle. */
.e-cart-totals tr.cart-discount td {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    column-gap: 6px;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 16px !important;
    white-space: nowrap;
}
.e-cart-totals tr.cart-discount td::before {
    float: none;
    flex: 1 1 0;
    min-width: 0;
    margin-right: auto;
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
}
.e-cart-totals tr.cart-discount td .woocommerce-Price-amount {
    font-size: 16px !important;
}
.e-cart-totals tr.cart-discount td .woocommerce-Price-amount,
.e-cart-totals tr.cart-discount td a.woocommerce-remove-coupon {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Michael 2026-10-15 Fix 05: the "Sidste ting til min bestilling" pre-checkout popup must fill
   ~90% of the screen height so the 8 products are bigger and nothing scrolls, on any desktop
   screen size. The popup is 95vw wide; the product grid takes the full width and two equal
   rows that share the height left between the heading and the button. Scoped to the two
   pre-checkout popups (253 default, 210820 Downtown); the shared product loop template is
   untouched. */
@media (min-width: 1025px) {
    #elementor-popup-modal-253 .dialog-widget-content,
    #elementor-popup-modal-210820 .dialog-widget-content {
        height: 90vh;
        max-height: 90vh;
    }
    #elementor-popup-modal-253 .dialog-message,
    #elementor-popup-modal-210820 .dialog-message {
        height: 90vh;
        max-height: 90vh;
        overflow: hidden;
    }
    #elementor-popup-modal-253 .elementor-location-popup,
    #elementor-popup-modal-210820 .elementor-location-popup {
        height: 100%;
    }
    #elementor-popup-modal-253 .pre-checkout,
    #elementor-popup-modal-210820 .pre-checkout {
        height: 100%;
        min-height: 0;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }
    /* the middle container carries a large side padding that squeezed the grid to ~60% */
    #elementor-popup-modal-253 .elementor-element-52d0c10,
    #elementor-popup-modal-210820 .elementor-element-52d0c10 {
        padding-left: 40px !important;
        padding-right: 40px !important;
        box-sizing: border-box;
    }
    #elementor-popup-modal-253 .pre-checkout > .elementor-element-45fb6aed,
    #elementor-popup-modal-210820 .pre-checkout > .elementor-element-45fb6aed {
        flex: 1 1 0;
        min-height: 0;
    }
    #elementor-popup-modal-253 .elementor-element-52d0c10,
    #elementor-popup-modal-210820 .elementor-element-52d0c10,
    #elementor-popup-modal-253 .elementor-element-842ff94,
    #elementor-popup-modal-210820 .elementor-element-842ff94,
    #elementor-popup-modal-253 .elementor-element-842ff94 > .elementor-widget-container,
    #elementor-popup-modal-210820 .elementor-element-842ff94 > .elementor-widget-container,
    #elementor-popup-modal-253 .elementor-element-3b4189a,
    #elementor-popup-modal-210820 .elementor-element-3b4189a,
    #elementor-popup-modal-253 .elementor-element-3b4189a > .elementor-widget-container,
    #elementor-popup-modal-210820 .elementor-element-3b4189a > .elementor-widget-container {
        height: 100%;
        width: 100% !important;
        min-height: 0;
    }
    #elementor-popup-modal-253 .elementor-loop-container.elementor-grid,
    #elementor-popup-modal-210820 .elementor-loop-container.elementor-grid {
        height: 100%;
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    #elementor-popup-modal-253 .e-loop-item,
    #elementor-popup-modal-210820 .e-loop-item,
    #elementor-popup-modal-253 .e-loop-item > .e-con,
    #elementor-popup-modal-210820 .e-loop-item > .e-con {
        height: 100%;
        min-height: 0;
    }
    /* image block takes whatever height the text + button leave */
    #elementor-popup-modal-253 .e-loop-item .elementor-element-aa8dd2f,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-aa8dd2f {
        flex: 1 1 0;
        min-height: 0;
        width: 100%;
    }
    #elementor-popup-modal-253 .e-loop-item .elementor-element-0afaba5,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-0afaba5,
    #elementor-popup-modal-253 .e-loop-item .elementor-element-0afaba5 > .elementor-widget-container,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-0afaba5 > .elementor-widget-container,
    #elementor-popup-modal-253 .e-loop-item .elementor-element-0afaba5 a,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-0afaba5 a {
        height: 100%;
        width: 100%;
    }
    #elementor-popup-modal-253 .e-loop-item .elementor-element-0afaba5 img,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-0afaba5 img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

/* Fix 05, short desktop screens (laptops ~700-820px high): tighten the heading text and the
   text/button block of each card so the product photos keep a useful size. */
@media (min-width: 1025px) and (max-height: 820px) {
    #elementor-popup-modal-253 .elementor-element-175fb8ca .elementor-heading-title,
    #elementor-popup-modal-210820 .elementor-element-175fb8ca .elementor-heading-title {
        font-size: 24px !important;
        line-height: 1.1 !important;
    }
    #elementor-popup-modal-253 .elementor-element-bbb5314,
    #elementor-popup-modal-210820 .elementor-element-bbb5314,
    #elementor-popup-modal-253 .elementor-element-bbb5314 p,
    #elementor-popup-modal-210820 .elementor-element-bbb5314 p {
        font-size: 12px !important;
        line-height: 1.25 !important;
        margin-bottom: 4px !important;
    }
    #elementor-popup-modal-253 .e-loop-item .elementor-element-1f40231,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-1f40231 {
        gap: 2px !important;
        padding-top: 2px !important;
        padding-bottom: 6px !important;
    }
    #elementor-popup-modal-253 .e-loop-item .elementor-element-3f4f5d2,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-3f4f5d2 {
        gap: 0 !important;
        height: auto !important;
    }
    #elementor-popup-modal-253 .e-loop-item .custom-add-to-cart-button-pre-checkout button,
    #elementor-popup-modal-210820 .e-loop-item .custom-add-to-cart-button-pre-checkout button {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        font-size: 13px !important;
    }
}

/* Adressevælger (delivery address popup, Elementor popup 208659): the component's own CSS limits
   the container to 30em; the popup input must use the full popup width, and the suggestion list
   has to sit above the popup content. Suggestion colours come from the component's CSS (light
   list, dark text), which stays readable on the dark popup. */
#elementor-popup-modal-208659 .autocomplete-container {
    max-width: none;
}
#elementor-popup-modal-208659 .adressevaelger-suggestions {
    z-index: 100000;
    max-height: 260px;
}

/* Michael 2026-10-16 — checkout order table ("Din Ordre"):
   1) "Vare"/"Subtotal" headings one size bigger (16px -> 18px);
   2) quantity (×1) in its own column left of the price (markup in
      woocommerce/checkout/review-order.php), fixed widths so the ×N and
      price columns line up row to row;
   3) delivery/handling fee amounts bold like every other price here;
   4) "kr." on product prices white like the rest of the site. */
.woocommerce-checkout-review-order-table thead th {
    font-size: 18px;
}

.woocommerce-checkout-review-order-table td.product-total .sushi-co-qty {
    display: inline-block;
    width: 3.5em;
    text-align: center;
    color: #079D8A;
    font-weight: 700;
}

.woocommerce-checkout-review-order-table td.product-total .sushi-co-price {
    display: inline-block;
    min-width: 7.5em;
    text-align: right;
}

.woocommerce-checkout-review-order-table td.product-total .sushi-co-price .woocommerce-Price-currencySymbol {
    color: #fff;
}

.woocommerce-checkout-review-order-table tr.fee .woocommerce-Price-amount.amount,
.woocommerce-checkout-review-order-table tr.fee .woocommerce-Price-currencySymbol {
    font-weight: 600;
}

/* Delivery address popup heading: two centred lines (Michael 2026-10-16). */
#elementor-popup-modal-208659 .sushi-address-popup-heading {
    text-align: center;
    font-size: 22px;
    line-height: 1.35;
}

@media (max-width: 480px) {
    #elementor-popup-modal-208659 .sushi-address-popup-heading {
        font-size: 17px;
    }
}

/* Michael 2026-10-16: the pre-checkout popup pictures must be square (1:1) — the product
   photos are 1280x1280 with the food centred, so the Fix 05 cover-crop cut them. Cards are
   made narrower so the square photo fits: card width = photo side = what the available popup
   height allows (2 rows, minus the text/button block), capped by what fits 4 across. Uses
   container-query units on the popup's grid wrapper, so it adapts to any desktop size and
   never needs the popup to scroll. */
@media (min-width: 1025px) {
    #elementor-popup-modal-253 .elementor-element-842ff94 > .elementor-widget-container,
    #elementor-popup-modal-210820 .elementor-element-3b4189a > .elementor-widget-container {
        container-type: size;
        container-name: sushi-precheckout;
    }
    #elementor-popup-modal-253 .elementor-loop-container.elementor-grid,
    #elementor-popup-modal-210820 .elementor-loop-container.elementor-grid {
        --sushi-pc-text: 116px;
        --sushi-pc-gap: 14px;
        --sushi-pc-side: min(
            calc((100cqh - var(--sushi-pc-gap)) / 2 - var(--sushi-pc-text)),
            calc((100cqw - 3 * var(--sushi-pc-gap)) / 4)
        );
        grid-template-columns: repeat(4, var(--sushi-pc-side));
        grid-template-rows: repeat(2, auto);
        justify-content: center;
        align-content: center;
        gap: var(--sushi-pc-gap);
    }
    #elementor-popup-modal-253 .e-loop-item,
    #elementor-popup-modal-210820 .e-loop-item,
    #elementor-popup-modal-253 .e-loop-item > .e-con,
    #elementor-popup-modal-210820 .e-loop-item > .e-con {
        height: auto;
    }
    #elementor-popup-modal-253 .e-loop-item .elementor-element-aa8dd2f,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-aa8dd2f {
        flex: 0 0 auto;
        aspect-ratio: 1 / 1;
        width: 100%;
    }
    #elementor-popup-modal-253 .e-loop-item .elementor-element-0afaba5 img,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-0afaba5 img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
    /* The dietary-icon badge (5bc4dc0) is meant to float over the photo, but on some sites its
       "absolute" setting is not in the generated loop CSS, so it sat BESIDE the photo in the
       flex row and squeezed the image to ~109px wide x 250px tall (not 1:1). Pin it explicitly. */
    #elementor-popup-modal-253 .e-loop-item .elementor-element-aa8dd2f,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-aa8dd2f {
        position: relative;
    }
    #elementor-popup-modal-253 .e-loop-item .elementor-element-5bc4dc0,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-5bc4dc0 {
        position: absolute;
        top: 8px;
        right: 8px;
        width: auto;
    }
    /* the narrower card lets longer names wrap to 2 lines: give every text block the same
       fixed height (name + price on top, button at the bottom) so both rows stay level */
    #elementor-popup-modal-253 .e-loop-item .elementor-element-1f40231,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-1f40231 {
        flex: 0 0 var(--sushi-pc-text);
        height: var(--sushi-pc-text);
        justify-content: space-between;
        box-sizing: border-box;
        overflow: hidden;
    }
    #elementor-popup-modal-253 .e-loop-item .elementor-element-387637e .elementor-heading-title,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-387637e .elementor-heading-title {
        font-size: 13px !important;
        line-height: 1.15 !important;
    }
    #elementor-popup-modal-253 .e-loop-item .elementor-element-1f40231,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-1f40231 {
        padding: 4px 6px 6px !important;
        gap: 0 !important;
    }
    #elementor-popup-modal-253 .e-loop-item .elementor-element-3f4f5d2,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-3f4f5d2 {
        gap: 0 !important;
        height: auto !important;
    }
    #elementor-popup-modal-253 .e-loop-item .custom-add-to-cart-button-pre-checkout button,
    #elementor-popup-modal-210820 .e-loop-item .custom-add-to-cart-button-pre-checkout button {
        max-width: 100%;
        padding: 5px 8px !important;
        font-size: 12px !important;
    }
}

@media (min-width: 1025px) and (max-height: 820px) {
    #elementor-popup-modal-253 .elementor-loop-container.elementor-grid,
    #elementor-popup-modal-210820 .elementor-loop-container.elementor-grid {
        --sushi-pc-text: 92px;
    }
    #elementor-popup-modal-253 .e-loop-item .elementor-element-387637e .elementor-heading-title,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-387637e .elementor-heading-title {
        font-size: 10.5px !important;
    }
    #elementor-popup-modal-253 .e-loop-item .elementor-element-97cea6c,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-97cea6c,
    #elementor-popup-modal-253 .e-loop-item .elementor-element-97cea6c .woocommerce-Price-amount,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-97cea6c .woocommerce-Price-amount {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }
    #elementor-popup-modal-253 .e-loop-item .custom-add-to-cart-button-pre-checkout button,
    #elementor-popup-modal-210820 .e-loop-item .custom-add-to-cart-button-pre-checkout button {
        padding: 3px 6px !important;
        font-size: 11px !important;
    }
}

/* Pre-checkout popup, bigger cards: on short screens the height-driven card size shrank to
   30-55px wide, so name, price and the "Tilføj til" button were clipped and spilled out of the
   box. Cards now never get smaller than 270px; the text block is tall enough for a 2-line name,
   price and button; if the two rows no longer fit the popup height, the card area scrolls. */
@media (min-width: 1025px) {
    #elementor-popup-modal-253 .elementor-element-842ff94 > .elementor-widget-container,
    #elementor-popup-modal-210820 .elementor-element-3b4189a > .elementor-widget-container {
        overflow-y: auto;
        overflow-x: hidden;
    }
    #elementor-popup-modal-253 .elementor-loop-container.elementor-grid,
    #elementor-popup-modal-210820 .elementor-loop-container.elementor-grid {
        --sushi-pc-text: 128px;
        --sushi-pc-k: min(var(--sushi-pc-side), 300px); /* text scales with the card (270px card = 100%) */
        --sushi-pc-side: max(
            270px,
            min(
                calc((100cqh - var(--sushi-pc-gap)) / 2 - var(--sushi-pc-text)),
                calc((100cqw - 3 * var(--sushi-pc-gap)) / 4)
            )
        );
        align-content: safe center;
        height: auto;
        min-height: 100%;
    }
    /* every card keeps its full height (square photo + text block), even when the rows have to scroll */
    #elementor-popup-modal-253 .e-loop-item,
    #elementor-popup-modal-210820 .e-loop-item,
    #elementor-popup-modal-253 .e-loop-item > .e-con,
    #elementor-popup-modal-210820 .e-loop-item > .e-con {
        min-height: calc(var(--sushi-pc-side) + var(--sushi-pc-text));
    }
    /* space below the button so it sits inside the card border */
    #elementor-popup-modal-253 .e-loop-item .elementor-element-1f40231,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-1f40231 {
        padding-bottom: 12px !important;
    }
    #elementor-popup-modal-253 .e-loop-item .elementor-element-387637e .elementor-heading-title,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-387637e .elementor-heading-title {
        font-size: calc(var(--sushi-pc-k) * 0.062) !important;
    }
    #elementor-popup-modal-253 .e-loop-item .elementor-element-97cea6c,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-97cea6c,
    #elementor-popup-modal-253 .e-loop-item .elementor-element-97cea6c .woocommerce-Price-amount,
    #elementor-popup-modal-210820 .e-loop-item .elementor-element-97cea6c .woocommerce-Price-amount {
        font-size: calc(var(--sushi-pc-k) * 0.07) !important;
        line-height: 1.2 !important;
    }
    #elementor-popup-modal-253 .e-loop-item .custom-add-to-cart-button-pre-checkout button,
    #elementor-popup-modal-210820 .e-loop-item .custom-add-to-cart-button-pre-checkout button {
        padding: calc(var(--sushi-pc-k) * 0.03) calc(var(--sushi-pc-k) * 0.055) !important;
        font-size: calc(var(--sushi-pc-k) * 0.052) !important;
        border-radius: calc(var(--sushi-pc-k) * 0.015) !important;
        box-sizing: border-box;
        max-width: 100%;
    }
}

/* Michael 2026-10-16 (side cart "Valgte varer"): add-on (Tillæg) lines overlapped when a
   line wrapped — the plugin's ts-side-cart.css pins .side-cart-addons-list to line-height:10px
   (smaller than the 13-14px text), so a wrapped line, or a second add-on right below it, was
   drawn on top of the previous one. A real line-height keeps wrapped lines apart; the 4px gap
   between add-on lines (above) still applies on top of it. */
.side-cart-addons-list,
.side-cart-addons-list .side-cart-addon-line {
    line-height: 1.25 !important;
}

/* Michael 2026-10-16 (checkout totals with store credit): the "Butikskredit" row has a
   two-line value cell (amount + [Fjern], then "Balance: x / y"), while its label cell was
   vertically centred between the two lines, so the label and amount looked misaligned
   against the other rows. Pin both cells to the top, put the balance on its own
   right-aligned line, and keep the [Fjern] link a fixed small gap from the amount. */
.woocommerce-checkout-review-order-table tr.cart-discount th,
.woocommerce-checkout-review-order-table tr.cart-discount td {
    vertical-align: top;
}

.woocommerce-checkout-review-order-table tr.cart-discount td .wc-sc-store-credit-balance {
    display: block;
    text-align: right;
    margin-top: 4px;
}

.woocommerce-checkout-review-order-table tr.cart-discount td a.woocommerce-remove-coupon {
    margin-left: 6px;
}


/* "Vælg Dato & Tid" popup: scale the content with the viewport (factor set by sushi-script.js, 1 on viewports up to
   about 1900 x 900) so there is no big empty band under it on large screens or when the browser is zoomed out. */
#elementor-popup-modal-2478 .dialog-message > .elementor {
    zoom: var(--sushi-popup-scale, 1);
}


/* Checkout "Levering" accordion: WooCommerce wraps it in div.woocommerce-additional-fields, which the Elementor
   checkout widget styles as a card (background, border, padding, radius). That made Levering look like an accordion
   inside a box and narrower than Allergener/Tilbehørsvalg/Ekstra muligheder. Remove the box so it is the same bare
   accordion as the others (same width, height and spacing). */
.woocommerce-checkout .woocommerce-additional-fields:has(> .accordion) {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.woocommerce-checkout .woocommerce-additional-fields:has(> .accordion) > h3:empty {
    display: none;
}