:root {
    --desktopWrapper: 900px;
    --mobileNavHeight: 80px;
    --contentSpacing: 20px;
    --borderRadiusButtons: 10px;
    --borderRadiusInputs: 10px;
    --borderRadiusS: 20px;
    --borderRadiusM: 30px;
    --borderRadiusL: 50px;
    --remSize: 17px;

    /* Neutral palette */
    --white: #ffffff;
    --grey-900: #191d32;
    --grey-700: #282f44;
    --grey-500: #6a7280;
    --grey-300: #c5cad7;
    --grey-100: #efeff4;

    /* Semantic colors */
    --primary: #3ebfad;
    --primary-soft: rgba(62, 191, 173, 0.12);
    --primary-softer: rgba(62, 191, 173, 0.06);
    --error: hsla(var(--redHS),50%,1.0);
    --error-soft: hsla(var(--redHS),50%,0.1);
    --warning: hsla(var(--yellowHS), 50%, 1.0);
    --warning-soft: hsla(var(--yellowHS), 50%, 0.1);
    --warning-text: hsla(var(--yellowHS), 40%, 1.0);
    --inputBackground: rgba(239, 239, 244, 0.65);

    /* Overlay and effects */
    --overlay-dark: rgba(0, 0, 0, 0.35);
    --overlay-light-weak: rgba(255, 255, 255, 0.1);
    --overlay-light-mid: rgba(255, 255, 255, 0.18);
    --overlay-light-strong: rgba(255, 255, 255, 0.35);
    --overlay-light-text: rgba(255, 255, 255, 0.55);
    --overlay-light-text-strong: rgba(255, 255, 255, 0.85);
    --shadow-card: rgba(0, 0, 0, 0.08);
    --shadow-card-soft: rgba(0, 0, 0, 0.05);
    --primary-alpha-soft: rgba(62, 191, 173, 0.1);
    --primary-alpha-strong: rgba(62, 191, 173, 0.2);
    --focus-ring: rgba(62, 191, 173, 0.18);
    --focus-ring-soft: rgba(62, 191, 173, 0.12);
}
@media (max-width: 1200px) {
    :root {
        --remSize: 16px;
    }
}
@media (max-width: 768px) {
    :root {
        --remSize: 15px;
    }
}
@media (max-width: 480px) {
    :root {
        --remSize: 14px;
    }
}

/* ── Global box-sizing scope ─────────────────────────────────
   Without this, inputs like .epoukaz-code-input and .epoukaz-add-code-input
   (width: 100% + horizontal padding) render wider than their parent on
   iPhone. Combined with #epoukaz-app { overflow: hidden } that clips the
   viewport, the padding-worth of content on the right edge gets cut off
   (visible as truncated text in the detail view, hero, etc.). Scoped to
   the app root so we don't leak the reset to the surrounding page. */
.epoukaz-page,
.epoukaz-page *,
.epoukaz-page *::before,
.epoukaz-page *::after {
    box-sizing: border-box;
}

/* ── Shared typography roles ─────────────────────────────── */
.epoukaz-page .i-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06rem;

    @media (max-width: 480px) {
        font-size: 0.65rem;
    }
}
.epoukaz-page .i-label.label-large {
    font-size: 1rem;
}
.epoukaz-page .i-small {
    font-size: 0.85rem;
    line-height: 1.4;
}

#epoukaz-app.epoukaz-page {
    display: flex;
    overflow: hidden;
    position: relative;
    justify-content: center;
    background-color: var(--grey-100);
}

.epoukaz-app-wrapper {
    width: 100%;
    max-width: var(--desktopWrapper);
    height: 100%;
    min-height: 100vh;
    margin: 0px auto;
    /* M5.5.5.B — respect iOS status bar / notch */
    padding-top: env(safe-area-inset-top);
    padding-bottom: calc(var(--mobileNavHeight) + var(--contentSpacing) + env(safe-area-inset-bottom));
    /* position: relative; */
}

/* ── App Header (persistent across all views) ────────────── */
.epoukaz-app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--contentSpacing);
}

.epoukaz-app-header-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: var(--white);
    color: var(--grey-900);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;

    @media (max-width: 480px) {
        width: 40px;
        height: 40px;
    }

    svg {
        width: 25px;
        height: 25px;

        @media (max-width: 480px) {
            width: 20px;
            height: 20px;
        }
    }
}

.epoukaz-app-header-btn--placeholder {
    visibility: hidden;
}

.epoukaz-app-header-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.epoukaz-app-header-logo img {
    height: clamp(32px, 3vw, 42px);
    width: auto;
    display: block;
}

.epoukaz-header {
    padding: 0;
    margin-bottom: -100px;
}

.epoukaz-header-image {
    position: relative;
    height: clamp(360px, 45vw, 480px);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background: var(--grey-300);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* M5.5.6 — shorter hero on short viewports so „Uplatnit ePoukaz" card
   stays above the fold on small/landscape laptops and mobile landscape */
@media (max-height: 800px) {
    .epoukaz-header-image {
        height: clamp(220px, 35vh, 360px);
    }
}
@media (max-height: 600px) {
    .epoukaz-header-image {
        height: clamp(160px, 28vh, 240px);
    }
    .epoukaz-header {
        margin-bottom: -70px;
    }
}
.epoukaz-header-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, var(--grey-100) 100%);
}

.epoukaz-header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.epoukaz-card-wrapper {
    max-width: 640px;
    margin: 0 auto;
}

.epoukaz-card {
    position: relative;
    margin-top: var(--contentSpacing);
    margin-inline: var(--contentSpacing);
    padding: 50px var(--contentSpacing);
    background: var(--white);
    border-radius: var(--borderRadiusM);
    text-align: center;
    box-shadow: 0 5px 30px var(--shadow-card-soft);
}

.epoukaz-card.card-secondary {
    border: 2px solid var(--primary-alpha-strong);
    background: none;
    box-shadow: none;
}

.epoukaz-title {
    --h1Size: 2.2rem;
    margin: 0 0 8px;
    font-weight: 700;
    color: var(--grey-900);
    /* M5.5.5.A — prevent overflow on narrow iPhone viewports */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* M5.5.5.A — scale large titles down on narrow screens so they don't clip */
@media (max-width: 480px) {
    .epoukaz-title {
        --h1Size: 1.7rem;
        font-size: var(--h1Size);
    }
    .eprev-title {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

.epoukaz-subtitle {
    margin: 0 0 30px;
    color: var(--grey-700);
    max-width: 460px;
    margin-inline: auto;
}

.epoukaz-title-secondary {
    margin: 0 0 0.5rem;
}

.epoukaz-subtitle-secondary {
    margin: 0 0 1rem;
    max-width: 460px;
    margin-inline: auto;
}


.epoukaz-code-wrapper {
    margin-bottom: 5px;
    max-width: 460px;
    margin-inline: auto;
}

.epoukaz-code-label-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.epoukaz-code-label-wrapper::before,
.epoukaz-code-label-wrapper::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--border);
    margin: auto;
}

.epoukaz-code-label {
    display: block;
    padding: 0 10px;
    margin-bottom: 6px;
    color: var(--grey-500);
    margin-bottom: 0;
}

.epoukaz-code-input {
    width: 100%;
    padding: 5px 16px;
    border-radius: var(--borderRadiusInputs);
    border: 1px solid var(--grey-300);
    font-size: 28px;
    letter-spacing: 6px;
    text-align: center;
    font-weight: 600;
    color: var(--grey-900);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    background-color: var(--inputBackground);
    text-transform: uppercase;
    font-family: var(--fontHeading);
}

.epoukaz-code-input::placeholder {
    color: var(--grey-300);
    letter-spacing: 6px;
    text-transform: uppercase;
}

.epoukaz-code-input:focus {
    border-color: var(--primary);
    background-color: var(--white);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.epoukaz-code-input.is-error {
    border-color: var(--error);
    background-color: var(--error-soft);
}

.epoukaz-code-error {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--error);
    line-height: 1.3;
}

/* M5.5.1 — hint under voucher-code inputs (9 chars + O vs 0 warning) */
.epoukaz-code-hint {
    margin-top: 10px;
    padding: 0 10px;
    color: var(--grey-500);
    line-height: 1.4;
}

.epoukaz-code-hint strong {
    color: var(--black);
    font-weight: 600;
}

/* ── Primary action button base ──────────────────────────── */
.ep-btn-primary {
    background: var(--primary);
}
.ep-btn-dark {
    background: var(--grey-900);
}
.ep-btn-primary,
.ep-btn-dark {
    padding: 16px 20px;
    display: inline-block;
    border: none;
    font-size: 1rem;
    border-radius: var(--borderRadiusButtons);
    color: var(--white);
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}
.ep-btn-primary:hover,
.ep-btn-dark:hover {
    color: var(--white);
    text-decoration: none;
}

.ep-btn-primary:disabled,
.ep-btn-dark:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.epoukaz-submit {
    width: 100%;
    margin-top: 5px;
    padding: 16px 18px;
    max-width: 460px;
    margin-inline: auto;
    display: block;
}

.epoukaz-bottom-nav {
    position: fixed;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0px 24px;
    height: var(--mobileNavHeight);
    background: var(--white);
    border-top: 1px solid var(--grey-100);
    margin-top: 12px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    box-shadow: 0 -2px 10px var(--shadow-card);

    @media (min-width: 900px) {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: var(--desktopWrapper);
    }
}
.variant-detail-content ~ .epoukaz-bottom-nav,
.cart-content:not(.cart-empty) ~ .epoukaz-bottom-nav,
.checkout-content ~ .epoukaz-bottom-nav,
.review-content ~ .epoukaz-bottom-nav,
.order-success-content ~ .epoukaz-bottom-nav {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none;
}

.epoukaz-bottom-nav .nav-item {
    display: flex;
    min-width: 90px;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    color: var(--grey-700);

    @media (max-width: 460px) {
        min-width: 70px;
    }
}

.epoukaz-bottom-nav .nav-item.active {
    color: var(--primary);
}

.epoukaz-bottom-nav .nav-icon-wrapper {
    line-height: 1;
}

.epoukaz-bottom-nav .nav-icon-wrapper .nav-icon {
    display: inline-block;
    -webkit-mask: var(--un-icon) no-repeat;
    mask: var(--un-icon) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    background-color: currentColor;
    color: inherit;
    width: 32px;
    height: 32px;
}

.epoukaz-bottom-nav .nav-icon-wrapper .nav-icon.home {
    --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 96 96' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M47.9023 7.99999C47.2627 8.02183 46.6467 8.24768 46.1445 8.64452L17.7188 31.039C14.111 33.8823 12 38.227 12 42.8203V81C12 83.7272 14.2728 86 17 86H37C39.7272 86 42 83.7272 42 81V61C42 60.4099 42.4099 60 43 60H53C53.5901 60 54 60.4099 54 61V81C54 83.7272 56.2728 86 59 86H79C81.7272 86 84 83.7272 84 81V42.8203C84 38.227 81.889 33.8823 78.2812 31.039L49.8555 8.64452C49.3007 8.20627 48.609 7.978 47.9023 7.99999ZM48 14.8203L74.5703 35.7539C76.7385 37.4626 78 40.0616 78 42.8203V80H60V61C60 57.1701 56.8299 54 53 54H43C39.1701 54 36 57.1701 36 61V80H18V42.8203C18 40.0616 19.2615 37.4626 21.4297 35.7539L48 14.8203Z'/%3E%3C/svg%3E");
}
.epoukaz-bottom-nav .active .nav-icon-wrapper .nav-icon.home {
    --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 96 96' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M79 86H61C58.238 86 56 83.762 56 81V63C56 60.79 54.21 59 52 59H44C41.79 59 40 60.79 40 63V81C40 83.762 37.762 86 35 86H17C14.238 86 12 83.762 12 81V42.826C12 38.228 14.108 33.884 17.718 31.04L46.142 8.642C47.232 7.786 48.768 7.786 49.856 8.642L78.284 31.04C81.894 33.884 84 38.226 84 42.822V81C84 83.762 81.762 86 79 86Z'/%3E%3C/svg%3E");
}
.epoukaz-bottom-nav .nav-icon-wrapper .nav-icon.help {
    --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 96 96' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M48 7.99609C25.9446 7.99609 8 25.9407 8 47.9961C8 54.5467 9.72542 60.6697 12.5234 66.1289L8.1875 81.6523C7.17759 85.2591 10.7439 88.8252 14.3516 87.8164L29.8867 83.4805C35.3415 86.2726 41.4555 87.9961 48 87.9961C70.0554 87.9961 88 70.0515 88 47.9961C88 25.9407 70.0554 7.99609 48 7.99609ZM48 13.9961C66.8126 13.9961 82 29.1835 82 47.9961C82 66.8087 66.8126 81.9961 48 81.9961C41.9968 81.9961 36.3812 80.4351 31.4844 77.707C30.7941 77.3223 29.98 77.2255 29.2188 77.4375L14.4453 81.5586L18.5703 66.793C18.7834 66.0305 18.6865 65.2148 18.3008 64.5234C15.5673 59.623 14 54.0051 14 47.9961C14 29.1835 29.1874 13.9961 48 13.9961ZM48 26C41.4083 26 36 31.4083 36 38C35.9944 38.3975 36.0678 38.7922 36.2161 39.1611C36.3643 39.53 36.5844 39.8658 36.8635 40.1489C37.1427 40.432 37.4753 40.6568 37.842 40.8103C38.2088 40.9637 38.6024 41.0427 39 41.0427C39.3976 41.0427 39.7912 40.9637 40.158 40.8103C40.5247 40.6568 40.8573 40.432 41.1365 40.1489C41.4156 39.8658 41.6357 39.53 41.7839 39.1611C41.9322 38.7922 42.0056 38.3975 42 38C42 34.6517 44.6517 32 48 32C51.3483 32 54 34.6517 54 38C54 41.1724 52.7134 42.1062 50.4531 44.2188C48.1929 46.3313 45 49.6132 45 55C44.9944 55.3975 45.0678 55.7922 45.2161 56.1611C45.3643 56.53 45.5844 56.8658 45.8635 57.1489C46.1427 57.432 46.4753 57.6568 46.842 57.8103C47.2088 57.9637 47.6024 58.0427 48 58.0427C48.3976 58.0427 48.7912 57.9637 49.158 57.8103C49.5247 57.6568 49.8573 57.432 50.1365 57.1489C50.4156 56.8658 50.6357 56.53 50.7839 56.1611C50.9322 55.7922 51.0056 55.3975 51 55C51 51.6808 52.3071 50.695 54.5469 48.6016C56.7866 46.5081 60 43.2976 60 38C60 31.4083 54.5917 26 48 26ZM48 62C46.9391 62 45.9217 62.4214 45.1716 63.1716C44.4214 63.9217 44 64.9391 44 66C44 67.0609 44.4214 68.0783 45.1716 68.8284C45.9217 69.5786 46.9391 70 48 70C49.0609 70 50.0783 69.5786 50.8284 68.8284C51.5786 68.0783 52 67.0609 52 66C52 64.9391 51.5786 63.9217 50.8284 63.1716C50.0783 62.4214 49.0609 62 48 62Z'/%3E%3C/svg%3E");
}
.epoukaz-bottom-nav .active .nav-icon-wrapper .nav-icon.help {
    --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 96 96' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M88 48C88 70.056 70.056 88 48 88C41.634 88 35.324 86.46 29.67 83.542L14.348 87.82C13.906 87.94 13.456 88 13.008 88C11.698 88 10.416 87.484 9.466 86.536C8.192 85.26 7.702 83.392 8.186 81.658L12.464 66.344C9.54 60.684 8 54.37 8 48C8 25.942 25.944 8 48 8C70.056 8 88 25.942 88 48ZM51 55C51 51.92 52.508 50.512 54.594 48.56C57.002 46.31 60 43.51 60 38C60 31.382 54.618 26 48 26C41.382 26 36 31.382 36 38C36 39.656 37.342 41 39 41C40.658 41 42 39.656 42 38C42 34.692 44.692 32 48 32C51.308 32 54 34.692 54 38C54 40.776 52.798 42.028 50.498 44.178C48.048 46.466 45 49.314 45 55C45 56.656 46.342 58 48 58C49.658 58 51 56.656 51 55ZM48 62C45.79 62 44 63.79 44 66C44 68.21 45.79 70 48 70C50.21 70 52 68.21 52 66C52 63.79 50.21 62 48 62Z'/%3E%3C/svg%3E");
}
.epoukaz-bottom-nav .nav-icon-wrapper .nav-icon.basket {
    --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 96 96' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M31.2778 12C25.0547 12 19.6683 16.4536 18.5043 22.5664L15.9457 36H13.0004C12.5589 36.0003 12.1229 36.098 11.7235 36.2861C11.3241 36.4743 10.9712 36.7483 10.6899 37.0885C10.4086 37.4288 10.2058 37.827 10.0961 38.2546C9.98637 38.6822 9.97237 39.1288 10.0551 39.5625L16.5043 73.4336C17.6705 79.5446 23.0547 84 29.2778 84H66.7231C72.9461 84 78.3325 79.5464 79.4965 73.4336L85.9457 39.5625C86.0285 39.1288 86.0145 38.6822 85.9047 38.2546C85.795 37.827 85.5922 37.4288 85.3109 37.0885C85.0296 36.7483 84.6767 36.4743 84.2773 36.2861C83.8779 36.098 83.4419 36.0003 83.0004 36H80.0551L77.4965 22.5664C76.3325 16.4536 70.9461 12 64.7231 12H31.2778ZM31.2778 18H64.7231C68.104 18 70.9699 20.3683 71.602 23.6875C71.602 23.6888 71.602 23.6901 71.602 23.6914L73.9457 36H22.0551L24.3988 23.6914C24.3988 23.6901 24.3988 23.6888 24.3988 23.6875C25.0309 20.3684 27.8968 18 31.2778 18ZM16.6254 42H17.934C18.2561 42.0529 18.5846 42.0529 18.9067 42H77.102C77.4202 42.0516 77.7447 42.0516 78.0629 42H79.3754L73.602 72.3125C72.9699 75.6317 70.104 78 66.7231 78H29.2778C25.898 78 23.034 75.6316 22.3988 72.3125V72.3086L16.6254 42ZM30.9184 47.957C30.4994 47.968 30.0873 48.0666 29.7088 48.2465C29.3302 48.4264 28.9936 48.6836 28.7205 49.0016C28.4474 49.3195 28.244 49.6912 28.1233 50.0926C28.0027 50.494 27.9675 50.9162 28.0199 51.332L30.0199 69.332C30.0522 69.7324 30.1646 70.1223 30.3504 70.4784C30.5361 70.8346 30.7915 71.1498 31.1014 71.4054C31.4113 71.6611 31.7694 71.8518 32.1544 71.9665C32.5394 72.0811 32.9435 72.1172 33.3427 72.0728C33.742 72.0283 34.1282 71.9041 34.4785 71.7075C34.8289 71.511 35.1362 71.2461 35.3822 70.9286C35.6282 70.611 35.808 70.2473 35.9109 69.859C36.0137 69.4707 36.0375 69.0657 35.9809 68.668L33.9809 50.668C33.9079 49.9126 33.5514 49.2128 32.9831 48.7098C32.4149 48.2068 31.6771 47.9378 30.9184 47.957ZM42.9535 47.957C42.1586 47.9695 41.401 48.2969 40.8473 48.8675C40.2936 49.438 39.989 50.205 40.0004 51V69C39.9948 69.3975 40.0682 69.7922 40.2165 70.1611C40.3647 70.53 40.5848 70.8658 40.8639 71.1489C41.1431 71.432 41.4757 71.6568 41.8425 71.8103C42.2092 71.9637 42.6028 72.0427 43.0004 72.0427C43.398 72.0427 43.7916 71.9637 44.1584 71.8103C44.5251 71.6568 44.8578 71.432 45.1369 71.1489C45.416 70.8658 45.6361 70.53 45.7843 70.1611C45.9326 69.7922 46.006 69.3975 46.0004 69V51C46.0062 50.5985 45.9313 50.1999 45.7801 49.8278C45.629 49.4558 45.4047 49.1178 45.1206 48.8341C44.8364 48.5503 44.4982 48.3265 44.126 48.1758C43.7538 48.0251 43.3551 47.9508 42.9535 47.957ZM52.9535 47.957C52.1586 47.9695 51.401 48.2969 50.8473 48.8675C50.2936 49.438 49.989 50.205 50.0004 51V69C49.9948 69.3975 50.0682 69.7922 50.2165 70.1611C50.3647 70.53 50.5848 70.8658 50.8639 71.1489C51.1431 71.432 51.4757 71.6568 51.8424 71.8103C52.2092 71.9637 52.6028 72.0427 53.0004 72.0427C53.398 72.0427 53.7916 71.9637 54.1584 71.8103C54.5251 71.6568 54.8578 71.432 55.1369 71.1489C55.416 70.8658 55.6361 70.53 55.7843 70.1611C55.9326 69.7922 56.006 69.3975 56.0004 69V51C56.0062 50.5985 55.9313 50.1999 55.7801 49.8278C55.629 49.4558 55.4047 49.1178 55.1206 48.8341C54.8364 48.5503 54.4982 48.3265 54.126 48.1758C53.7538 48.0251 53.3551 47.9508 52.9535 47.957ZM64.9926 47.957C64.2493 47.9604 63.5338 48.2396 62.9846 48.7404C62.4354 49.2413 62.0916 49.9282 62.0199 50.668L60.0199 68.668C59.9633 69.0657 59.9871 69.4707 60.09 69.859C60.1928 70.2473 60.3726 70.611 60.6186 70.9286C60.8647 71.2461 61.172 71.511 61.5223 71.7075C61.8726 71.9041 62.2589 72.0283 62.6581 72.0728C63.0573 72.1172 63.4614 72.0811 63.8464 71.9665C64.2314 71.8518 64.5895 71.6611 64.8994 71.4054C65.2093 71.1498 65.4647 70.8346 65.6505 70.4784C65.8362 70.1223 65.9486 69.7324 65.9809 69.332L67.9809 51.332C68.0342 50.9088 67.9966 50.479 67.8706 50.0714C67.7446 49.6638 67.5332 49.2878 67.2504 48.9684C66.9676 48.649 66.6199 48.3936 66.2306 48.2192C65.8413 48.0448 65.4192 47.9554 64.9926 47.957Z'/%3E%3C/svg%3E");
}
.epoukaz-bottom-nav .active .nav-icon-wrapper .nav-icon.basket {
    --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 96 96' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M31.2778 12C25.0547 12 19.6683 16.4536 18.5044 22.5664L15.9458 36H13.0005C12.1065 36 11.2599 36.3998 10.6919 37.0898C10.1219 37.7778 9.88714 38.6826 10.0551 39.5586L16.5083 73.4336C17.6723 79.5576 23.0438 84 29.2778 84H66.727C72.961 84 78.3306 79.5576 79.4966 73.4336L85.9497 39.5586C86.1157 38.6826 85.8791 37.7778 85.3091 37.0898C84.7411 36.3998 83.8945 36 83.0005 36H80.0551L77.4966 22.5664C76.3326 16.4536 70.9462 12 64.7231 12H31.2778ZM31.2778 18H64.7231C68.104 18 70.97 20.3683 71.602 23.6875V23.6914L73.9458 36H22.0551L24.3989 23.6914V23.6875C25.0309 20.3684 27.8969 18 31.2778 18ZM43.0005 48C44.6565 48 46.0005 49.344 46.0005 51V69C46.0005 70.656 44.6565 72 43.0005 72C41.3445 72 40.0005 70.656 40.0005 69V51C40.0005 49.344 41.3445 48 43.0005 48ZM53.0005 48C54.6565 48 56.0005 49.344 56.0005 51V69C56.0005 70.656 54.6565 72 53.0005 72C51.3445 72 50.0005 70.656 50.0005 69V51C50.0005 49.344 51.3445 48 53.0005 48ZM31.2778 48.0156C32.6696 48.147 33.8182 49.2277 33.9809 50.668L35.9809 68.668C36.1629 70.314 34.9785 71.7965 33.3325 71.9805C33.2185 71.9925 33.1086 72 32.9966 72C31.4886 72 30.192 70.866 30.02 69.332L28.02 51.332C27.838 49.686 29.0224 48.2035 30.6684 48.0195C30.8749 47.9978 31.079 47.9969 31.2778 48.0156ZM64.7231 48.0156C64.9219 47.9967 65.1262 47.998 65.3325 48.0195C66.9785 48.2035 68.1629 49.686 67.9809 51.332L65.9809 69.332C65.8089 70.866 64.5124 72 63.0044 72C62.8924 72 62.7824 71.9925 62.6684 71.9805C61.0224 71.7965 59.838 70.314 60.02 68.668L62.02 50.668C62.181 49.2277 63.3319 48.148 64.7231 48.0156Z'/%3E%3C/svg%3E");
}

.epoukaz-bottom-nav .nav-icon-wrapper[data-count] {
    position: relative;
}

.epoukaz-bottom-nav .nav-icon-wrapper[data-count]::after {
    content: attr(data-count);
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--primary);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.epoukaz-bottom-nav .nav-item.active .nav-icon-wrapper[data-count]::after {
    background: var(--grey-900);
}

/* ── Result: voucher header ──────────────────────────────── */
.epoukaz-voucher-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-inline: var(--contentSpacing);
    padding: 16px 24px;
    background: var(--grey-900);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;

    @media (max-width: 460px) {
        gap: 8px;
        padding: 10px 16px;
    }
}

.epoukaz-qr-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.epoukaz-voucher-code-info {
    display: flex;
    flex-direction: column;
}

.epoukaz-voucher-code-label {
    margin-top: 2px;
    font-weight: 700;
    color: var(--white);
}

.epoukaz-voucher-code-value {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--primary);
    line-height: 1;
    font-family: var(--fontHeading);
}

/* ── Result: info strip ──────────────────────────────────── */
.epoukaz-info-strip {
    display: flex;
    align-items: stretch;
    background: var(--white);
    border-bottom: 1px solid var(--grey-100);
    padding: 14px 0;
    margin-inline: var(--contentSpacing);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    box-shadow: 0 5px 30px var(--shadow-card-soft);
}

.epoukaz-info-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
}

.epoukaz-info-sep {
    width: 1px;
    background: var(--grey-100);
    margin: 2px 0;
    flex-shrink: 0;
}

.epoukaz-info-label {
    color: var(--grey-500);
    text-align: center;
}

.epoukaz-info-value {
    font-weight: 700;
    color: var(--grey-900);
    text-align: center;
    line-height: 1.2;

    @media (max-width: 768px) {
        font-size: 14px;
    }
}

/* ── Result: products section ────────────────────────────── */
.epoukaz-products {
    padding: 30px 0 0;
}

.epoukaz-products-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 var(--contentSpacing) var(--contentSpacing) calc(var(--contentSpacing) * 2);
}

.epoukaz-products-label {
    color: var(--grey-500);
    margin-bottom: 3px;
}

.epoukaz-products-title {
    margin: 0;
}

/* M5.5.3 — subtitle pod „Lékařem předepsaná pomůcka" */
.epoukaz-products-subtitle {
    color: var(--grey-500);
    margin-top: 4px;
}

.epoukaz-products-nav {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    padding-bottom: 2px;
}

.epoukaz-nav-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: var(--white);
    color: var(--grey-900);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px var(--shadow-card);

    svg {
        width: 24px;
        height: 24px;
    }
}

.epoukaz-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ── M8: variant filters (tabs + chips) ─────────────────── */
.epoukaz-filter {
    padding-inline: var(--contentSpacing);
    margin-bottom: 12px;
}

.epoukaz-filter-tabs,
.epoukaz-filter-chips {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Horizontal scroll container: allow horizontal pan to scroll tabs/chips,
       vertical pan falls through to the page scroll. `pan-y` alone would block
       horizontal touch drag and leave the strip unscrollable on mobile. */
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
}

.epoukaz-filter-tabs::-webkit-scrollbar,
.epoukaz-filter-chips::-webkit-scrollbar {
    display: none;
}

.epoukaz-filter-tabs {
    gap: 20px;
    border-bottom: 1px solid var(--grey-100);
}

.epoukaz-filter-tab {
    flex-shrink: 0;
    border: none;
    background: transparent;
    padding: 8px 2px 10px;
    font: inherit;
    font-weight: 500;
    color: var(--grey-500);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.epoukaz-filter-tab.is-active {
    color: var(--grey-900);
    font-weight: 600;
}

.epoukaz-filter-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
}

.epoukaz-filter-chips {
    gap: 8px;
    margin-top: 10px;
    padding-bottom: 2px;
}

.epoukaz-filter-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--grey-300);
    border-radius: 999px;
    background: var(--white);
    color: var(--grey-700);
    font: inherit;
    font-size: 14px;
    line-height: 1.25;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.epoukaz-filter-chip:hover {
    border-color: var(--primary);
}

.epoukaz-filter-chip.is-selected {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-softer);
}

.epoukaz-filter-chip-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Result: carousel ────────────────────────────────────── */
.epoukaz-carousel-outer {
    padding-inline: var(--contentSpacing);
    padding-bottom: 20px;
}

.epoukaz-swiper {
    overflow: visible !important;
    /* Horizontal Swiper in a vertically-scrolling page — browser handles only
       vertical panning, JS (Swiper) owns horizontal gestures. `manipulation`
       previously broke iOS swipe because it doesn't declare an axis, so iOS
       Safari swallowed horizontal drags rather than forwarding them to JS. */
    touch-action: pan-y;
}

.epoukaz-carousel-track {
    display: flex;
    gap: 0;
    will-change: transform;
}

.epoukaz-variant-card.swiper-slide {
    height: auto;
    display: flex;
}

/* ── Result: variant card ────────────────────────────────── */
.epoukaz-variant-card {
    flex: 0 0 clamp(240px, 26.6667vw, 380px);
    background: var(--white);
    border-radius: var(--borderRadiusM);
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 30px var(--shadow-card);
    /* M6: content-visibility removed — Swiper virtual already keeps DOM
       bounded (~15 cards max). The `contain-intrinsic-size` fallback
       (300×520) differed from real size (380×550); on each virtual insert
       the card briefly rendered at the fallback before reflowing, which
       visually jerked the whole reel on swipe. */
}

.epoukaz-variant-image-wrap {
    height: clamp(140px, 18vw, 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    background: var(--grey-100);
    border-radius: var(--borderRadiusS);
    overflow: hidden;
    cursor: pointer;
}

.epoukaz-variant-image {
    max-height: clamp(120px, 17.8vw, 180px);
    max-width: 100%;
    object-fit: scale-down;
    display: block;
    mix-blend-mode: darken;

}

.epoukaz-variant-params {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.epoukaz-param-item {
    display: flex;
    align-items: center;
}

.epoukaz-param-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
}

.epoukaz-param-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--grey-700);
    background: var(--grey-100);
    border-radius: 6px;
    padding: 3px 7px;
}

.epoukaz-variant-title {
    font-weight: 700;
    color: var(--grey-900);
    line-height: 1.35;
    margin-bottom: 5px;
    cursor: pointer;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.epoukaz-variant-subtitle {
    margin-bottom: 10px;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.epoukaz-variant-desc {
    margin-bottom: 10px;
    flex: 1;
}

.epoukaz-variant-footer-sep {
    margin-block: 5px;
    margin-top: auto;
}

.epoukaz-variant-footer {
    display: flex;
    justify-content: space-around;
    gap: 16px;
    padding-top: 0.75rem;
    margin-inline: auto;
}

.epoukaz-footer-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
}

.epoukaz-footer-label {
    font-weight: 700;
    color: var(--grey-500);
}

.epoukaz-footer-value {
    font-weight: 700;
    color: var(--grey-900);
}

.epoukaz-footer-value.epoukaz-nostock {
    color: var(--error) !important;
}

.epoukaz-availability-info {
    font-weight: 600;
    color: var(--primary);
    margin-top: 8px;
    text-align: center;
}

.epoukaz-variant-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.epoukaz-detail-btn {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: var(--borderRadiusButtons);
    border: 1.5px solid var(--grey-300);
    background: var(--white);
    color: var(--grey-700);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.epoukaz-detail-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-softer);
}

.epoukaz-addtocart-btn {
    flex: 1;
    height: 50px;
}

/* ── Cart: wrapper ────────────────────────────────────────── */
.cart-content {
    padding-bottom: 70px;
}

/* ── Cart: add code panel ────────────────────────────────── */
.epoukaz-add-code-wrapper {
    margin-inline: auto;
    max-width: 460px;
}

.epoukaz-add-code {
    margin: 16px var(--contentSpacing);
    padding: 14px 16px;
    background: var(--white);
    border-radius: var(--borderRadiusS);
    box-shadow: 0 2px 12px var(--shadow-card);
    overflow: hidden;
}

.cart-sep {
    margin: 2rem auto;
    max-width: 60px;
    height: 4px;
    background: var(--border);
    border: none;
    border-radius: 2px;
}

.epoukaz-add-code-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-bottom: 12px;
}

.epoukaz-add-code-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.epoukaz-add-code-label {
    font-weight: 600;
    color: var(--grey-900);
}

.epoukaz-add-code-row {
    display: flex;
    gap: 6px;
    align-items: center;
    max-width: 460px;
    margin-inline: auto;

    @media (max-width: 380px) {
        flex-direction: column;
        gap: 8px;
    }
}

.epoukaz-add-code-input {
    flex: 1;
    padding: 4px 16px;
    border-radius: 12px;
    border: 1px solid var(--grey-300);
    font-size: 24px;
    letter-spacing: 5px;
    text-align: center;
    font-weight: 600;
    color: var(--grey-900);
    outline: none;
    background: var(--inputBackground);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    min-width: 0;
    text-transform: uppercase;
    font-family: var(--fontHeading);

    @media (max-width: 380px) {
        width: 100%;
    }
}

.epoukaz-add-code-input::placeholder {
    color: var(--grey-300);
    letter-spacing: 5px;
    text-transform: uppercase;
}

.epoukaz-add-code-input:focus {
    border-color: var(--primary);
    background: var(--white);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.epoukaz-add-code-input.is-error {
    border-color: var(--error);
    background: var(--error-soft);
}

.epoukaz-add-code-submit {
    flex-shrink: 0;
    font-size: 15px;
    padding: 0.75rem 18px;
    white-space: nowrap;

    @media (max-width: 380px) {
        width: 100%;
    }
}

/* ── Cart: empty state ───────────────────────────────────── */
.epoukaz-empty-cart-hero {
    display: flex;
    justify-content: center;
    padding: 10px 16px 20px;
}

.epoukaz-empty-cart-image {
    display: block;
    width: min(100%, 360px);
    height: auto;
}

/* ── Cart: header ────────────────────────────────────────── */
.epoukaz-cart-item-wrap {
    overflow: hidden;
    border-radius: var(--borderRadiusS);
    box-shadow: 0 2px 12px var(--shadow-card);
    margin: 12px var(--contentSpacing);
}


.epoukaz-cart-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: var(--grey-900);
}

.epoukaz-cart-header-code {
    flex: 1;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--white);
    line-height: 1.1;
    font-family: var(--fontHeading);
}

.epoukaz-cart-edit-btn {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    margin-right: 10px;
    text-decoration: underline;
    transition: opacity 0.15s;
}

.epoukaz-cart-edit-btn:hover {
    opacity: 0.75;
}

/* ── Cart: item list ─────────────────────────────────────── */
.epoukaz-cart-body {
    background: var(--white);
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.epoukaz-cart-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--grey-100);
}

.epoukaz-cart-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.epoukaz-cart-item-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: var(--grey-100);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.epoukaz-cart-item-image img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    display: block;
    mix-blend-mode: darken;
}

.epoukaz-cart-item-info {
    flex: 1;
    min-width: 0;
}

.epoukaz-cart-item-title {
    font-weight: 700;
    color: var(--grey-900);
    line-height: 1.35;
    margin-bottom: 4px;
}

.epoukaz-cart-item-desc {
    font-size: 0.75rem;
    color: var(--grey-700);
    line-height: 1.45;
    margin-bottom: 10px;
}

.epoukaz-cart-item-footer {
    display: flex;
    gap: 20px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--border);
}

.epoukaz-cart-meta-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.epoukaz-cart-meta-label {
    font-weight: 700;
    color: var(--grey-500);
}

.epoukaz-cart-meta-value {
    font-weight: 700;
    color: var(--grey-900);
}

/* ── Cart: free shipping ─────────────────────────────────── */
.epoukaz-shipping {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px var(--contentSpacing);
    padding: 14px 16px;
    background: var(--white);
    border-radius: var(--borderRadiusS);
    box-shadow: 0 2px 10px var(--shadow-card);
}

.epoukaz-shipping-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.epoukaz-shipping-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--grey-900);
    margin-bottom: 3px;
}

.epoukaz-shipping-desc {
    line-height: 1.4;
}

/* ── Fixed bottom action bar utility ────────────────────── */
.ep-action-bar {
    display: flex;
    overflow: hidden;
    align-items: center;
    gap: 10px;
    padding: 0;
    position: fixed;
    bottom: var(--mobileNavHeight);
    left: 0;
    right: 0;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;

    @media (min-width: 900px) {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: var(--desktopWrapper);
    }
}

.ep-action-bar > button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    padding: 0;
    height: 70px;
    font-size: 1.08rem;
}

/* ── Cart: checkout button ───────────────────────────────── */
.epoukaz-checkout-btn {
    width: 100%;
    padding: 16px 18px;
}

/* ── Product Detail View ─────────────────────────────────── */
.variant-detail-content {
    padding-bottom: 70px;
}

.epd-gallery-card {
    margin: 0px var(--contentSpacing);
    background: var(--white);
    border-radius: 24px;
    box-shadow: 0 5px 30px var(--shadow-card);
    display: flex;
    align-items: center;
    padding: var(--contentSpacing) 6px;
    min-height: 320px;
    position: relative;

    @media (max-width: 768px) {
        min-height: 200px;
    }
}

.epd-gallery-arrow {
    flex-shrink: 0;
    width: 32px;
    height: 48px;
    border: none;
    background: transparent;
    color: var(--grey-300);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 10px;
    transition: color 0.15s, background 0.15s;
}

.epd-gallery-arrow:disabled {
    opacity: 0.25;
    cursor: default;
}

.epd-gallery-arrow:not(:disabled):hover {
    color: var(--grey-900);
    background: var(--grey-100);
}

.epd-gallery-main-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(320px - 2 * var(--contentSpacing));
    overflow: hidden;

    @media (max-width: 768px) {
        height: calc(200px - 2 * var(--contentSpacing));
    }
}

.epd-gallery-main-img {
    max-width: 100%;
    max-height: calc(320px - 2 * var(--contentSpacing));
    object-fit: contain;
    display: block;

    @media (max-width: 768px) {
        max-height: calc(200px - 2 * var(--contentSpacing));
    }
}

/* ── Thumbnails ─────────────────────────────────────────── */
.epd-thumbs {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 10px var(--contentSpacing) 0;
}

.epd-thumb {
    width: 46px;
    height: 46x;
    border-radius: 10px;
    border: 2px solid var(--grey-100);
    background: var(--grey-100);
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s;
}

.epd-thumb.is-active {
    border-color: var(--primary);
}

.epd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ── Product Info ────────────────────────────────────────── */
.epd-info {
    padding: 30px var(--contentSpacing) 0;
    text-align: center;
}

.epd-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--grey-900);
    line-height: 1.35;
    margin: 0 0 8px;
    /* Long product titles (SKU codes, parenthesised classifications) can contain
       tokens without natural breakpoints — allow breaking anywhere on narrow
       viewports so nothing spills past the right edge. */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.epd-meta {
    color: var(--grey-700);
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ── Params Grid ─────────────────────────────────────────── */
.epd-params-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 30px var(--contentSpacing) 0;
}

.epd-param-tile {
    background: var(--white);
    border-radius: 16px;
    border: 1.5px solid var(--grey-100);
    padding: 0.75rem 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.epd-param-icon-wrap {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.epd-param-tile-icon {
    max-width: 2.5rem;
    max-height: 2.5rem;
    object-fit: contain;
    display: block;
}

.epd-param-tile-text {
    font-weight: 800;
    color: var(--grey-900);
    line-height: 1.1;
    text-align: center;
}

.epd-param-tile-info {
    flex: 1;
    min-width: 0;
}

.epd-param-tile-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--grey-900);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.epd-param-tile-name {
    font-weight: 700;
    color: var(--grey-500);
    margin-top: 2px;
    line-height: 1.3;
}

/* ── Product HTML Description ────────────────────────────── */
.epd-html {
    margin: 30px var(--contentSpacing) 0;
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.epd-html p {
    margin: 0 0 8px;
}

.epd-html p:last-child {
    margin-bottom: 0;
}

/* ── Detail Actions ──────────────────────────────────────── */
.epd-back {
    flex-shrink: 0;
}

.epd-cart-btn {
    flex: 1;
    height: 40px;
    border-radius: var(--borderRadiusButtons);
}

/* ── Checkout Form View ───────────────────────────────────── */
.checkout-content {
    padding-bottom: 70px;
}

.epc-form-view {
    padding-bottom: 8px;
}

.epc-form-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.5rem 0 1rem;
}

.epc-form-title {
    text-align: center;
    margin: 0 0 1rem 0;
    flex: 1;
}

.epc-form-card {
    padding: 30px var(--contentSpacing) 50px;
    background: var(--white);
    border-radius: var(--borderRadiusM);
    box-shadow: 0 5px 30px var(--shadow-card-soft);
}

.epc-form-wrapper {
    max-width: 720px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.epc-form-row {
    display: flex;
    gap: 10px;

    @media (max-width: 560px) {
        flex-direction: column;
        gap: 14px;
    }
}

.epc-form-row .epc-form-field {
    flex: 1;
    min-width: 0;
}

.epc-form-field--city {
    flex: 2 !important;
}

.epc-form-field--zip {
    flex: 1 !important;
}

.epc-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.epc-form-label {
    font-weight: 700;
    color: var(--grey-500);
}

.epc-form-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    font-size: 14px;
    font-weight: 500;
    color: var(--grey-900);
    outline: none;
    background: var(--inputBackground);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.epc-form-input:focus {
    border-color: var(--primary);
    background: var(--white);
    box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.epc-form-input.is-error {
    border-color: var(--error);
    background: var(--error-soft);
}

.epc-form-error {
    font-size: 10px;
    font-weight: 600;
    color: var(--error);
    margin-top: 1px;
}

/* M5.5.4 — customer note textarea */
.epc-form-textarea {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.4;
}

.epc-form-optional {
    font-weight: 500;
    color: var(--grey-400, var(--grey-500));
}

.epc-form-hint {
    color: var(--grey-500);
    margin-top: 4px;
    text-align: right;
}

/* customer note row on review page — wrap long text, align top */
.eprev-customer-row--note {
    align-items: flex-start;
}

.eprev-customer-note-value {
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Order Review View ────────────────────────────────────── */
.review-content {
    padding-top: 20px;
    padding-bottom: 70px;
}

.eprev-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 10px;
}

.eprev-title {
    margin: 0;
    flex: 1;
    text-align: center;
}

.eprev-section-label {
    font-weight: 700;
    color: var(--grey-900);
    padding: 12px 16px 6px;
}

.eprev-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 16px 8px;
    padding: 12px 14px;
    background: var(--white);
    border-radius: 16px;
    border: 1.5px solid var(--grey-100);
    box-shadow: 0 5px 30px var(--shadow-card);
}

.eprev-item-img {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--grey-100);
}

.eprev-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.eprev-item-info {
    flex: 1;
    min-width: 0;
}

.eprev-item-title {
    font-weight: 700;
    color: var(--grey-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eprev-item-subtitle {
    color: var(--grey-700);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eprev-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.eprev-item-code {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--white);
    background: var(--grey-900);
    border-radius: 6px;
    padding: 1px 6px;
}

.eprev-item-dot {
    font-size: 0.75rem;
    color: var(--grey-300);
}

.eprev-item-qty,
.eprev-item-price {
    font-size: 0.75rem;
    color: var(--grey-700);
    font-weight: 500;
}

.eprev-item-price,
.eprev-free {
    color: var(--primary);
    font-weight: 700;
}

.eprev-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 4px 16px 16px;
    padding: 14px 16px;
    background: var(--white);
    border-radius: 16px;
    border: 1.5px solid var(--grey-100);
    box-shadow: 0 5px 30px var(--shadow-card);
}

.eprev-total-label {
    font-weight: 700;
    color: var(--grey-700);
}

.eprev-total-value {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--primary);
}

.eprev-customer {
    margin: 0 16px 8px;
    background: var(--white);
    border-radius: 16px;
    border: 1.5px solid var(--grey-100);
    overflow: hidden;
    box-shadow: 0 5px 30px var(--shadow-card);
}

.eprev-customer-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--grey-100);
}

.eprev-customer-row:last-child {
    border-bottom: none;
}

.eprev-customer-label {
    font-weight: 700;
    color: var(--grey-500);
    flex-shrink: 0;
    max-width: 45%;
}

.eprev-customer-value {
    font-weight: 500;
    color: var(--grey-900);
    text-align: right;
    /* M5.5.5.C — allow value to shrink below content width and wrap long strings
       (email, address, full name on narrow iPhone screens) */
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.eprev-submit-btn {
    background: var(--primary) !important;
}

/* ── Bottom nav interactive ──────────────────────────────── */
.epoukaz-bottom-nav .nav-item {
    cursor: pointer;
    user-select: none;
    transition: color 0.18s;
}
.epoukaz-bottom-nav .nav-item.is-disabled {
    opacity: 0.38;
    cursor: default;
    pointer-events: none;
}

/* ── Unlisted product card ───────────────────────────────── */
.epoukaz-unlisted-card {
    margin: 12px 16px 0;
    background: var(--white);
    border-radius: var(--borderRadiusM);
    padding: 20px var(--contentSpacing);
    box-shadow: 0 5px 30px var(--shadow-card);
}

.epoukaz-unlisted-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.epoukaz-unlisted-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--warning-soft);
    border: 1.5px solid var(--warning);
    display: flex;
    align-items: center;
    justify-content: center;
}

.epoukaz-unlisted-title-wrap {
    min-width: 0;
}

.epoukaz-unlisted-sukl {
    font-weight: 700;
    color: var(--grey-500);
    margin-bottom: 3px;
}

.epoukaz-unlisted-name {
    font-weight: 700;
    color: var(--grey-900);
    line-height: 1.3;
    word-break: break-word;
}

.epoukaz-unlisted-desc {
    font-size: 0.75rem;
    color: var(--grey-700);
    line-height: 1.55;
    margin-bottom: 16px;
    padding: 10px 12px;
    background: var(--warning-soft);
    border-radius: 12px;
    border: 1px solid var(--warning);
}

.epoukaz-unlisted-meta {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 0 14px;
    border-top: 1px solid var(--grey-100);
    border-bottom: 1px solid var(--grey-100);
    margin-bottom: 14px;
}

.epoukaz-unlisted-meta-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.epoukaz-unlisted-meta-col:first-child {
    align-items: flex-end;
}

.epoukaz-unlisted-meta-sep {
    width: 1px;
    height: 32px;
    background: var(--grey-100);
    margin: 0 16px;
    flex-shrink: 0;
}

.epoukaz-unlisted-nostock {
    color: var(--error) !important;
}

.epoukaz-unlisted-actions {
    display: flex;
}

.epoukaz-unlisted-actions .epoukaz-addtocart-btn {
    flex: 1;
}

/* ── Unlisted badge (cart & review) ─────────────────────── */
.epoukaz-unlisted-badge {
    display: inline-block;
    color: var(--grey-900);
    background: var(--warning-soft);
    border: 1px solid var(--warning);
    border-radius: 6px;
    padding: 2px 7px;
    line-height: 1.6;
}

/* ── Cart unlisted image placeholder ────────────────────── */
.epoukaz-cart-item-image--unlisted {
    background: var(--warning-soft);
    border: 1.5px solid var(--warning);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Review unlisted image placeholder ──────────────────── */
.eprev-item-img--unlisted {
    margin-top: 0;
    margin-bottom: auto;
    background: var(--warning-soft);
    border: 1.5px solid var(--warning);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Help view contacts ──────────────────────────────────── */
.ephelp-contacts {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin: 20px auto 0px;
    max-width: 420px;

    @media (max-width: 480px) {
        flex-direction: column;
        gap: 20px;
    }
}
.ephelp-contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 calc(50% - 30px);
    gap: 6px;
    text-decoration: none;
    color: inherit;

    @media (max-width: 480px) {
        flex-basis: auto;
    }
}
.ephelp-contact-item:hover {
    text-decoration: none;
}
.ephelp-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    flex-shrink: 0;
}
.ephelp-contact-label {
    color: var(--grey-500);
}
.ephelp-contact-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--grey-900);
    text-decoration: underline;
}

/* ── Slide Menu Panel ────────────────────────────────────── */
.epmenu-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;

    @media (min-width: 768px) {
        left: auto;
        right: 0;
        width: 520px;
    }
}

.epmenu-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: var(--grey-900);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.epmenu-top {
    padding: 12px 16px;
    display: flex;
    align-items: center;
}

.epmenu-close-btn {
    background: var(--overlay-light-weak) !important;
    color: var(--white) !important;
}

.epmenu-close-btn:hover {
    background: var(--overlay-light-mid) !important;
}

.epmenu-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px 24px 20px;
}

.epmenu-link {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: var(--white);
    text-decoration: none;
    padding: 10px 0;
    transition: color 0.15s;
}

.epmenu-link:hover {
    color: var(--primary);
}

.epmenu-link--active {
    color: var(--primary);
}

.epmenu-link--small {
    font-size: 15px;
    font-weight: 500;
    color: var(--overlay-light-text-strong);
    padding: 7px 0;
}

.epmenu-link--small:hover {
    color: var(--primary);
}

.epmenu-divider {
    height: 1px;
    background: var(--overlay-light-weak);
    margin: 4px 24px;
}

.epmenu-section {
    padding: 16px 24px;
}

.epmenu-section-label {
    font-weight: 700;
    color: var(--white);
    margin-bottom: 10px;
}

.epmenu-socials {
    display: flex;
    gap: 12px;
}

.epmenu-social-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    transition: color 0.15s;
}

.epmenu-social-icon:hover {
    color: var(--primary);
}

.epmenu-bottom-banner {
    margin: auto 16px 16px;
    padding: 16px 18px;
    background: var(--primary-soft);
    border: 1px solid var(--primary-alpha-strong);
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.epmenu-banner-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--primary-alpha-strong);
    display: flex;
    align-items: center;
    justify-content: center;
}

.epmenu-banner-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 3px;
}

.epmenu-banner-desc {
    font-size: 0.75rem;
    color: var(--overlay-light-text);
    line-height: 1.45;
}

/* ── Menu slide animation ────────────────────────────────── */
.epmenu-slide-enter-active {
    transition: opacity 0.3s ease;
}

.epmenu-slide-enter-active .epmenu-panel {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.epmenu-slide-leave-active {
    transition: opacity 0.25s ease 0.05s;
}

.epmenu-slide-leave-active .epmenu-panel {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.6, 1);
}

.epmenu-slide-enter-from {
    opacity: 0;
}

.epmenu-slide-enter-from .epmenu-panel {
    transform: translateX(100%);
}

.epmenu-slide-leave-to {
    opacity: 0;
}

.epmenu-slide-leave-to .epmenu-panel {
    transform: translateX(100%);
}

#cm-cookie-change {
    display: none !important;
}

#ec-v-from-slider-holder {
    display: none !important;
}

#nette-debug {
    display: none !important;
}

.eprev-terms {
    font-weight: 700;
    padding: 12px 16px 6px;
    text-align: center;
}

/* Order success view */
.order-success-content {
    padding: var(--contentSpacing);
    padding-bottom: calc(var(--mobileNavHeight) + 24px);
}
.order-success-icon {
    display: flex;
    justify-content: center;
    padding: 32px 0 16px;
}
.order-success-content .epoukaz-title {
    text-align: center;
}
.order-success-content .epoukaz-subtitle {
    text-align: center;
    padding-bottom: 16px;
}
.order-success-qr {
    margin-top: 8px;
}
.order-success-qr-image {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}
.order-success-qr-image img {
    max-width: 250px;
    width: 100%;
    height: auto;
    border-radius: var(--borderRadiusS);
}
.order-success-bank-info {
    padding-top: 8px;
}