/* Unified prices across Reyhoon menu cards, special slider and popup. */
.yekpizza-unified-price {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 3px;
    max-width: 100%;
    direction: rtl;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.yekpizza-unified-price__separator,
.yekpizza-unified-price__currency {
    font-size: .78em;
    font-weight: 600;
    opacity: .78;
}

.yekpizza-unified-special-price {
    display: inline-flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    direction: rtl;
}

.yekpizza-unified-special-price del,
.yekpizza-unified-special-price ins {
    display: block;
    max-width: 100%;
    text-decoration-thickness: 1px;
}

.yekpizza-unified-special-price ins {
    color: var(--reyhoon-main, #bd2028);
    font-weight: 900;
    text-decoration: none;
}

/* The popup bottom bar must contain exactly one final charged price. */
.reyhoon-product--options .reyhoon-product__actions-price {
    min-width: 0;
    overflow: hidden;
}

.yekpizza-popup-final-price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    direction: rtl;
    white-space: nowrap;
    color: inherit;
    font-weight: 800;
}

.yekpizza-popup-final-price__currency {
    font-size: .72em;
    font-weight: 600;
    opacity: .9;
}

.reyhoon-product-option.yekpizza-option-unavailable {
    opacity: .42 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.reyhoon-product-option.yekpizza-limit-disabled {
    opacity: .45;
}

/* Keep the fixed category bar horizontal without forcing the document vertically. */
.reyhoon-main__tabs.tabs--fixes,
.reyhoon-main__tabs .reyhoon-tabs {
    overscroll-behavior-inline: contain;
}

@media (max-width: 767px) {
    .addon_prices,
    .yekpizza-unified-price,
    .yekpizza-unified-special-price {
        max-width: 100%;
        font-size: 11px;
    }

    .reyhoon-product--options .reyhoon-product__actions-price {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-inline: 6px;
    }

    .yekpizza-popup-final-price {
        font-size: 15px;
    }
}


/* ================================================================
 * 1.2.0 — responsive centering of homepage logo, product image and button
 * ================================================================ */

/*
 * Header restaurant logo
 *
 * Reyhoon's original header uses an absolutely positioned flex wrapper without
 * a defined inline width. This makes the logo/text group shift when the viewport
 * or the status circle changes. Reserve the status area and give the logo a real
 * centered cell on the right side of the red header.
 */
body.reyhoon-pages .reyhoon-restaurant-details {
    --yekpizza-header-status-space: clamp(104px, 27%, 138px);
}

body.reyhoon-pages .reyhoon-restaurant-details
    > .reyhoon-restaurant-details-logo {
    box-sizing: border-box;
    inset-block: 0 !important;
    inset-inline-start: 0 !important;
    inset-inline-end: var(--yekpizza-header-status-space) !important;
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 clamp(8px, 2.2vw, 16px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(62px, 17vw, 82px);
    grid-template-areas: "copy logo";
    align-items: center !important;
    column-gap: clamp(4px, 1.4vw, 10px);
    direction: ltr;
    background: transparent !important;
}

body.reyhoon-pages .reyhoon-restaurant-details-logo > a {
    grid-area: logo;
    display: grid !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center;
}

body.reyhoon-pages .reyhoon-restaurant-details-logo > a > img {
    display: block !important;
    width: clamp(52px, 14vw, 70px) !important;
    height: clamp(52px, 14vw, 70px) !important;
    max-width: 70px !important;
    max-height: 70px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
    transform: none !important;
}

body.reyhoon-pages .reyhoon-restaurant-details-logo
    > .reyhoon-restaurant-branch-details {
    grid-area: copy;
    min-width: 0;
    margin: 0 !important;
    direction: rtl;
}

/* Also centre the standalone desktop logo used by the template header. */
body.reyhoon-pages .reyhoon-header-top-nav-logo,
body.reyhoon-pages .reyhoon-header-top-nav-logo > a {
    display: flex;
    align-items: center;
    justify-content: center;
}

body.reyhoon-pages .reyhoon-header-top-nav-logo > a > img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(110px, 30vw) !important;
    max-height: 76px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
}

/*
 * Main product cards
 *
 * Use the same physical left column for both the image and the Select button.
 * The content and price occupy the right column. Setting direction:ltr only on
 * the grid guarantees physical alignment; Persian text is restored to RTL on
 * the children.
 */
body.reyhoon-pages .reyhoon-products-list__item > .reyhoon-product {
    --yekpizza-product-media-column: clamp(140px, 39vw, 200px);
    --yekpizza-product-image-size: clamp(136px, 38vw, 200px);
    --yekpizza-product-button-size: clamp(108px, 31vw, 168px);
}

body.reyhoon-pages .reyhoon-products-list__item
    > .reyhoon-product
    > .food-info {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns:
        var(--yekpizza-product-media-column)
        minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: clamp(8px, 2vw, 18px);
    width: 100%;
    min-width: 0;
    direction: ltr;
}

body.reyhoon-pages .reyhoon-products-list__item
    > .reyhoon-product
    > .food-info
    > .reyhoon-product__content {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    padding-inline: 0 !important;
    direction: rtl;
}

body.reyhoon-pages .reyhoon-products-list__item
    > .reyhoon-product
    > .food-info
    > .reyhoon-product__hero {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    display: grid !important;
    width: min(100%, var(--yekpizza-product-image-size)) !important;
    max-width: var(--yekpizza-product-image-size) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    margin: 0 auto !important;
    padding: 0 !important;
    place-items: center;
    overflow: visible;
}

body.reyhoon-pages .reyhoon-products-list__item
    > .reyhoon-product
    > .food-info
    > .reyhoon-product__hero
    > img.reyhoon-product__image {
    box-sizing: border-box;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
    transform: none !important;
}

/* Non-variable product action row. */
body.reyhoon-pages .reyhoon-products-list__item
    > .reyhoon-product
    > .reyhoon-product__actions:not(.variable) {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns:
        var(--yekpizza-product-media-column)
        minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: clamp(8px, 2vw, 18px);
    width: 100%;
    min-width: 0;
    direction: ltr;
}

body.reyhoon-pages .reyhoon-products-list__item
    > .reyhoon-product
    > .reyhoon-product__actions:not(.variable)
    > .reyhoon-product__actions-price {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    min-width: 0;
    margin: 0 !important;
    text-align: right;
    direction: rtl;
}

body.reyhoon-pages .reyhoon-products-list__item
    > .reyhoon-product
    > .reyhoon-product__actions:not(.variable)
    > .reyhoon-product__actions-button {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: min(100%, var(--yekpizza-product-button-size)) !important;
    max-width: var(--yekpizza-product-button-size) !important;
    margin: 0 auto !important;
    padding-inline: 0 !important;
    direction: rtl;
}

body.reyhoon-pages .reyhoon-products-list__item
    > .reyhoon-product
    > .reyhoon-product__actions:not(.variable)
    > .reyhoon-product__actions-button
    > .reyhoon-button {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Variable rows use the same left media axis. */
body.reyhoon-pages .reyhoon-products-list__item
    > .reyhoon-product
    > .reyhoon-product__actions.variable {
    display: block !important;
    width: 100%;
}

body.reyhoon-pages .reyhoon-products-list__item
    > .reyhoon-product
    > .reyhoon-product__actions.variable
    > .reyhoon-variable__actions {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns:
        var(--yekpizza-product-media-column)
        minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: clamp(8px, 2vw, 18px);
    width: 100%;
    direction: ltr;
}

body.reyhoon-pages .reyhoon-variable__actions
    > .reyhoon-product__actions-price {
    grid-column: 2;
    direction: rtl;
    justify-self: end;
    margin: 0 !important;
}

body.reyhoon-pages .reyhoon-variable__actions
    > .reyhoon-product__actions-button {
    grid-column: 1;
    justify-self: center;
    width: min(100%, var(--yekpizza-product-button-size)) !important;
    max-width: var(--yekpizza-product-button-size) !important;
    margin: 0 auto !important;
}

/* Narrow phones: preserve enough room for the title and description. */
@media (max-width: 420px) {
    body.reyhoon-pages .reyhoon-products-list__item > .reyhoon-product {
        --yekpizza-product-media-column: clamp(118px, 39vw, 150px);
        --yekpizza-product-image-size: clamp(116px, 38vw, 148px);
        --yekpizza-product-button-size: clamp(104px, 31vw, 132px);
    }

    body.reyhoon-pages .reyhoon-restaurant-details {
        --yekpizza-header-status-space: clamp(98px, 27%, 118px);
    }

    body.reyhoon-pages .reyhoon-restaurant-details
        > .reyhoon-restaurant-details-logo {
        grid-template-columns: minmax(0, 1fr) clamp(56px, 16vw, 68px);
        padding-inline: 6px !important;
    }

    body.reyhoon-pages .reyhoon-restaurant-details-logo > a > img {
        width: clamp(48px, 14vw, 60px) !important;
        height: clamp(48px, 14vw, 60px) !important;
    }
}

/* Tablets: keep the same axis but avoid oversized images inside half-width cards. */
@media (min-width: 768px) and (max-width: 1199px) {
    body.reyhoon-pages .reyhoon-products-list__item > .reyhoon-product {
        --yekpizza-product-media-column: clamp(108px, 31%, 150px);
        --yekpizza-product-image-size: clamp(104px, 29%, 146px);
        --yekpizza-product-button-size: clamp(92px, 27%, 128px);
    }
}

/* Wide desktop cards remain balanced without reverting to Reyhoon's fixed margins. */
@media (min-width: 1200px) {
    body.reyhoon-pages .reyhoon-products-list__item > .reyhoon-product {
        --yekpizza-product-media-column: clamp(120px, 30%, 170px);
        --yekpizza-product-image-size: clamp(116px, 28%, 164px);
        --yekpizza-product-button-size: clamp(108px, 27%, 140px);
    }
}


/* ================================================================
 * 1.2.1 — remove duplicate top logo and restore right-aligned header
 * ================================================================ */

/*
 * Version 1.2 accidentally forced Reyhoon's standalone top logo to display on
 * mobile. It is not part of the red restaurant header and must remain hidden.
 */
body.reyhoon-pages .reyhoon-header-top-nav-logo {
    display: none !important;
}

/*
 * Keep the status panel on the left and anchor the restaurant identity group to
 * the far right of the red panel, matching the original Reyhoon composition:
 * logo on the extreme right, restaurant name and tagline immediately to its left.
 */
body.reyhoon-pages .reyhoon-restaurant-details
    > .reyhoon-restaurant-details-logo {
    box-sizing: border-box;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    width: calc(100% - var(--yekpizza-header-status-space)) !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 clamp(12px, 3vw, 22px) 0 clamp(6px, 1.5vw, 12px) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(8px, 2vw, 16px) !important;
    direction: rtl !important;
    background: transparent !important;
}

/* The first child is the logo link; RTL flex keeps it at the far right. */
body.reyhoon-pages .reyhoon-restaurant-details-logo > a {
    order: 0 !important;
    flex: 0 0 clamp(58px, 16vw, 78px) !important;
    display: grid !important;
    width: clamp(58px, 16vw, 78px) !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    grid-area: auto !important;
}

body.reyhoon-pages .reyhoon-restaurant-details-logo > a > img {
    display: block !important;
    width: clamp(52px, 14vw, 70px) !important;
    height: clamp(52px, 14vw, 70px) !important;
    max-width: 70px !important;
    max-height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
    transform: none !important;
}

/* Name/tagline stays beside the logo instead of being centred in the panel. */
body.reyhoon-pages .reyhoon-restaurant-details-logo
    > .reyhoon-restaurant-branch-details {
    order: 1 !important;
    flex: 0 1 auto !important;
    grid-area: auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: calc(100% - 74px) !important;
    margin: 0 !important;
    padding: 0 !important;
    direction: rtl !important;
    text-align: right !important;
    align-items: flex-start !important;
}

/* Prevent inherited centring rules on nested title/tagline elements. */
body.reyhoon-pages .reyhoon-restaurant-branch-details,
body.reyhoon-pages .reyhoon-restaurant-branch-details * {
    text-align: right !important;
}

@media (max-width: 420px) {
    body.reyhoon-pages .reyhoon-restaurant-details
        > .reyhoon-restaurant-details-logo {
        padding-right: 8px !important;
        padding-left: 4px !important;
        gap: 5px !important;
    }

    body.reyhoon-pages .reyhoon-restaurant-details-logo > a {
        flex-basis: 58px !important;
        width: 58px !important;
    }

    body.reyhoon-pages .reyhoon-restaurant-details-logo > a > img {
        width: 52px !important;
        height: 52px !important;
    }

    body.reyhoon-pages .reyhoon-restaurant-details-logo
        > .reyhoon-restaurant-branch-details {
        max-width: calc(100% - 62px) !important;
    }
}


/* ================================================================
 * 1.2.2 — pin logo and copy to the far-right of the burgundy panel
 * ================================================================ */

/*
 * The previous flex/grid alignment was still affected by Reyhoon's inherited
 * layout rules. Use physical absolute anchors so the identity block always
 * begins at the right edge of the burgundy area on every viewport.
 */
body.reyhoon-pages .reyhoon-restaurant-details
    > .reyhoon-restaurant-details-logo {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: calc(100% - var(--yekpizza-header-status-space)) !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    direction: rtl !important;
    overflow: hidden !important;
    background: transparent !important;
}

/* Logo: fixed to the physical right edge of the burgundy section. */
body.reyhoon-pages .reyhoon-restaurant-details-logo a,
body.reyhoon-pages .reyhoon-restaurant-details-logo > a {
    position: absolute !important;
    top: 50% !important;
    right: clamp(10px, 2.3vw, 18px) !important;
    bottom: auto !important;
    left: auto !important;
    width: clamp(58px, 15vw, 76px) !important;
    height: clamp(58px, 15vw, 76px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
}

body.reyhoon-pages .reyhoon-restaurant-details-logo a > img,
body.reyhoon-pages .reyhoon-restaurant-details-logo > a > img {
    display: block !important;
    width: clamp(52px, 13.5vw, 68px) !important;
    height: clamp(52px, 13.5vw, 68px) !important;
    max-width: 68px !important;
    max-height: 68px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
    transform: none !important;
}

/* Copy: starts directly beside the right-pinned logo and grows leftward. */
body.reyhoon-pages .reyhoon-restaurant-details-logo
    .reyhoon-restaurant-branch-details,
body.reyhoon-pages .reyhoon-restaurant-details-logo
    > .reyhoon-restaurant-branch-details {
    position: absolute !important;
    top: 50% !important;
    right: clamp(78px, 19vw, 102px) !important;
    bottom: auto !important;
    left: clamp(8px, 1.8vw, 16px) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    direction: rtl !important;
    text-align: right !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
}

body.reyhoon-pages .reyhoon-restaurant-details-logo
    .reyhoon-restaurant-branch-details,
body.reyhoon-pages .reyhoon-restaurant-details-logo
    .reyhoon-restaurant-branch-details * {
    text-align: right !important;
    margin-inline: 0 !important;
}

@media (max-width: 420px) {
    body.reyhoon-pages .reyhoon-restaurant-details-logo a,
    body.reyhoon-pages .reyhoon-restaurant-details-logo > a {
        right: 7px !important;
        width: 56px !important;
        height: 56px !important;
    }

    body.reyhoon-pages .reyhoon-restaurant-details-logo a > img,
    body.reyhoon-pages .reyhoon-restaurant-details-logo > a > img {
        width: 50px !important;
        height: 50px !important;
    }

    body.reyhoon-pages .reyhoon-restaurant-details-logo
        .reyhoon-restaurant-branch-details,
    body.reyhoon-pages .reyhoon-restaurant-details-logo
        > .reyhoon-restaurant-branch-details {
        right: 66px !important;
        left: 5px !important;
    }
}

@media (min-width: 768px) {
    body.reyhoon-pages .reyhoon-restaurant-details-logo a,
    body.reyhoon-pages .reyhoon-restaurant-details-logo > a {
        right: 18px !important;
        width: 76px !important;
        height: 76px !important;
    }

    body.reyhoon-pages .reyhoon-restaurant-details-logo
        .reyhoon-restaurant-branch-details,
    body.reyhoon-pages .reyhoon-restaurant-details-logo
        > .reyhoon-restaurant-branch-details {
        right: 108px !important;
        left: 18px !important;
    }
}




/* ================================================================
 * 1.3.1 — restore the original centred floating-cart position
 * ================================================================ */
@media (max-width: 767px) {
    body.reyhoon-pages .reyhoon-floating-cart {
        right: 50% !important;
        left: auto !important;
        bottom: var(--reyhoon-bottom-navigation-height, 0px) !important;
        transform: translateX(50%) !important;
    }
}