html,
body {
    margin: 0; 
    min-height: 100%;

    font-family:
        "Google Sans",
        sans-serif;

    background-color:
        #f5f5f5;
}

html.dermocosmetics-body,
body.dermocosmetics-body {
    background-color:
        #ffffff;
}

:root {
  --sidebar-width: 262px;
  --icon-size: 24px; /* Az ikonok mérete */
  --logo-size: 100px; /* Logó mérete */
}

* {
    -webkit-tap-highlight-color: transparent;
}

@view-transition {
  navigation: auto;
}


/* =========================================================
   Fejléc
   ========================================================= */

:root {
    --header-icon-size: 26px;
    --header-logo-size: 99px;
    --header-height: 119px;
    --header-bg: #f5f5f5;
}


/* =========================================================
   Modal
   ========================================================= */

.modal {
    z-index: 1500;
    padding: 1.5rem;
}


/* =========================================================
   Sticky header
   ========================================================= */

.custom-header {
    position: sticky;
    top: 0;
    z-index: 1400;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    width: 100%;
    height: var(--header-height);
    min-height: var(--header-height);

    padding:
        0
        2rem;

    background:
        rgb(245 245 245 / 0.8);

    border-bottom:
        1px solid
        transparent;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    transition:
        height 220ms ease,
        min-height 220ms ease,
        padding 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}


/* =========================================================
   Scroll állapot
   ========================================================= */

.custom-header.is-scrolled {
    height: 68px;
    min-height: 68px;

    background:
        rgb(245 245 245 / 0.98);

    border-bottom-color:
        rgb(8 35 93 / 0.07);

    box-shadow:
        0 7px 24px
        rgb(4 15 29 / 0.07);
}


/* =========================================================
   Header oszlopok
   ========================================================= */

.custom-col {
    display: flex;
    align-items: center;

    height: 100%;

    gap: 1rem;

    min-width: 0;
}

.left-side {
    justify-content: flex-start;
}

.center-side {
    justify-content: center;
}

.right-side {
    justify-content: flex-end;
}


/* =========================================================
   Header action
   ========================================================= */

.header-icon-wrap {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.5rem;

    min-width: 0;
    min-height: 42px;

    padding:
        0.5rem
        0.65rem;

    border: 0;

    border-radius: 12px;

    background: transparent;

    color: #0f2944;

    font: inherit;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 160ms ease,
        color 160ms ease,
        transform 160ms ease,
        padding 220ms ease;
}

.header-icon-wrap:hover {
    transform:
        translateY(-1px);

    background:
        rgb(8 35 93 / 0.055);

    color: #08235d;

    text-decoration: none;
}

.header-action-button {
    appearance: none;
    -webkit-appearance: none;
}


/* =========================================================
   Header icon
   ========================================================= */

.icon-placeholder {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: var(--header-icon-size);
    height: var(--header-icon-size);

    margin: 0;

    font-style: normal;
}

.icon-placeholder img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   Header szöveg
   ========================================================= */

.icon-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: var(--header-icon-size);

    color: inherit;

    font-family:
        "Roboto",
        sans-serif;

    font-size: 0.82rem;
    font-weight: 600;

    line-height: 1;

    white-space: nowrap;
}


/* =========================================================
   Logó
   ========================================================= */

.header-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;

    text-decoration: none;
}

.custom-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--header-logo-size);
    height: var(--header-logo-size);

    margin: 0;

    flex-shrink: 0;

    transition:
        width 220ms ease,
        height 220ms ease;
}

.custom-logo-wrap img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   Logó scroll után
   ========================================================= */

.custom-header.is-scrolled
.custom-logo-wrap {
    width: 54px;
    height: 54px;
}

.custom-header.is-scrolled
.header-icon-wrap {
    min-height: 38px;

    padding:
        0.4rem
        0.6rem;
}


/* =========================================================
   Kosár badge
   ========================================================= */

.header-cart-icon {
    overflow: visible;
}

.cart-count-badge {
    position: absolute;

    top: -8px;
    right: -10px;

    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 20px;
    height: 20px;

    padding:
        0
        5px;

    border:
        2px solid
        #f5f5f5;

    border-radius: 999px;

    background:
        #06154b;

    color:
        #ffffff;

    font-size: 0.66rem;
    font-weight: 800;

    line-height: 1;

    pointer-events: none;
}

.cart-count-badge.is-hidden {
    display: none;
}


/* =========================================================
   Oldalsó menü overlay
   ========================================================= */

.header-side-menu-overlay {
    position: fixed;
    inset: 0;

    z-index: 1998;

    visibility: hidden;
    opacity: 0;

    background:
        rgb(4 15 29 / 0.46);

    backdrop-filter:
        blur(2px);

    -webkit-backdrop-filter:
        blur(2px);

    pointer-events: none;

    transition:
        opacity 220ms ease,
        visibility 220ms ease;
}

.header-side-menu-overlay.is-visible {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;
}


/* =========================================================
   Oldalsó menü
   ========================================================= */

.header-side-menu {
    position: fixed;

    top: 0;
    bottom: 0;
    left: 0;

    z-index: 1999;

    width:
        min(
            92vw,
            420px
        );

    visibility: hidden;

    transform:
        translateX(-102%);

    background:
        #ffffff;

    box-shadow:
        22px 0 60px
        rgb(4 15 29 / 0.18);

    transition:
        transform 260ms ease,
        visibility 260ms ease;
}

.header-side-menu.is-visible {
    visibility: visible;

    transform:
        translateX(0);
}

.header-side-menu-inner {
    display: flex;
    flex-direction: column;

    height: 100%;
    min-height: 0;
}


/* =========================================================
   Drawer fejléc
   ========================================================= */

.header-side-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding:
        1rem
        1.15rem;

    border-bottom:
        1px solid
        rgb(8 35 93 / 0.08);
}

.header-side-menu-logo {
    display: block;

    width: 66px;
    height: 66px;
}

.header-side-menu-logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.header-side-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border: 0;

    border-radius: 999px;

    background:
        rgb(8 35 93 / 0.07);

    color:
        #08235d;

    font-size: 1.7rem;

    line-height: 1;

    cursor: pointer;

    transition:
        transform 160ms ease,
        background-color 160ms ease;
}

.header-side-menu-close:hover {
    transform:
        rotate(4deg);

    background:
        rgb(8 35 93 / 0.12);
}


/* =========================================================
   Drawer body
   ========================================================= */

.header-side-menu-body {
    flex:
        1
        1
        auto;

    min-height: 0;

    padding:
        1.1rem
        1.15rem
        2rem;

    overflow-y: auto;

    overscroll-behavior:
        contain;
}


/* =========================================================
   Fő menüpontok
   ========================================================= */

.header-side-menu-primary {
    display: flex;
    flex-direction: column;

    gap: 0.25rem;

    padding-bottom:
        1.15rem;

    border-bottom:
        1px solid
        rgb(8 35 93 / 0.08);
}

.header-side-menu-primary a {
    display: flex;
    align-items: center;

    min-height: 44px;

    padding:
        0.65rem
        0.8rem;

    border-radius: 11px;

    color:
        #102f46;

    font-size: 0.9rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        background-color 150ms ease,
        color 150ms ease;
}

.header-side-menu-primary a:hover {
    background:
        rgb(8 35 93 / 0.06);

    color:
        #08235d;
}


/* =========================================================
   Kategóriák
   ========================================================= */

.header-side-category-section {
    padding-top:
        1.25rem;
}

.header-side-category-title {
    margin:
        0
        0
        0.7rem;

    padding-inline:
        0.15rem;

    color:
        #7a8792;

    font-size: 0.7rem;
    font-weight: 800;

    letter-spacing:
        0.065em;

    text-transform:
        uppercase;
}

.header-side-category-list {
    display: flex;
    flex-direction: column;
}

.header-side-category-item {
    border-bottom:
        1px solid
        rgb(8 35 93 / 0.065);
}

.header-side-category-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 0.5rem;
}

.header-side-category-main-link {
    display: flex;
    align-items: center;

    min-height: 49px;

    padding:
        0.7rem
        0.25rem;

    color:
        #102f46;

    font-size: 0.9rem;
    font-weight: 700;

    text-decoration: none;
}

.header-side-category-main-link:hover {
    color:
        #087f72;
}

.header-side-category-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border: 0;

    border-radius: 999px;

    background:
        transparent;

    color:
        #526575;

    font-size: 1.25rem;

    line-height: 1;

    cursor: pointer;

    transition:
        background-color 160ms ease,
        color 160ms ease,
        transform 180ms ease;
}

.header-side-category-toggle:hover {
    background:
        rgb(13 177 156 / 0.09);

    color:
        #087f72;
}

.header-side-category-toggle[
    aria-expanded="true"
] {
    transform:
        rotate(45deg);

    background:
        rgb(13 177 156 / 0.1);

    color:
        #087f72;
}


/* =========================================================
   Alkategóriák
   ========================================================= */

.header-side-subcategories {
    padding:
        0
        0
        0.85rem
        0.8rem;
}

.header-side-subcategory-group {
    padding:
        0.35rem
        0
        0.35rem
        0.75rem;

    border-left:
        2px solid
        rgb(13 177 156 / 0.13);
}

.header-side-subcategory-link {
    display: block;

    padding:
        0.45rem
        0.5rem;

    color:
        #24465d;

    font-size: 0.82rem;
    font-weight: 700;

    line-height: 1.35;

    text-decoration: none;
}

.header-side-subcategory-link:hover {
    color:
        #087f72;
}

.header-side-child-categories {
    display: flex;
    flex-direction: column;

    gap: 0.1rem;

    padding:
        0.15rem
        0
        0.25rem
        0.8rem;
}

.header-side-child-categories a {
    display: block;

    padding:
        0.35rem
        0.45rem;

    color:
        #71808a;

    font-size: 0.76rem;

    line-height: 1.4;

    text-decoration: none;
}

.header-side-child-categories a:hover {
    color:
        #087f72;
}


/* =========================================================
   Drawer footer
   ========================================================= */

.header-side-menu-footer {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 0.65rem;

    padding:
        0.9rem
        1.15rem;

    border-top:
        1px solid
        rgb(8 35 93 / 0.08);

    background:
        #fbfcfd;
}

.header-side-menu-footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 41px;

    padding:
        0.6rem
        0.75rem;

    border:
        1px solid
        rgb(8 35 93 / 0.1);

    border-radius: 999px;

    background:
        #ffffff;

    color:
        #08235d;

    font-size: 0.78rem;
    font-weight: 700;

    text-decoration: none;
}

.header-side-menu-footer a:hover {
    border-color:
        rgb(13 177 156 / 0.25);

    color:
        #087f72;
}


/* =========================================================
   Nyitott állapot
   ========================================================= */

html.is-header-menu-open,
body.is-header-menu-open {
    overflow: hidden;
}


/* =========================================================
   Tablet / mobil
   ========================================================= */

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

    :root {
        --header-icon-size: 24px;
        --header-logo-size: 76px;
        --header-height: 89px;
    }

    .custom-header {
        height: var(--header-height);
        min-height: var(--header-height);

        padding:
            0
            0.7rem;

        grid-template-columns:
            minmax(74px, 1fr)
            auto
            minmax(74px, 1fr);
    }

    .custom-header.is-scrolled {
        height: 58px;
        min-height: 58px;
    }

    .custom-col {
        gap: 0.15rem;
    }

    .header-icon-wrap {
        min-height: 40px;

        padding:
            0.45rem;

        border-radius: 10px;
    }

    .icon-text {
        display: none;
    }

    .custom-header.is-scrolled
    .custom-logo-wrap {
        width: 48px;
        height: 48px;
    }

    .custom-header.is-scrolled
    .header-icon-wrap {
        min-height: 38px;

        padding:
            0.4rem;
    }

    .cart-count-badge {
        top: -7px;
        right: -9px;

        min-width: 19px;
        height: 19px;

        font-size: 0.62rem;
    }
}


/* =========================================================
   Kis mobil
   ========================================================= */

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

    :root {
        --header-logo-size: 52px;
        --header-height: 62px;
    }

    .custom-header {
        padding-inline:
            0.45rem;

        grid-template-columns:
            minmax(68px, 1fr)
            auto
            minmax(68px, 1fr);
    }

    .header-icon-wrap {
        padding:
            0.4rem;
    }

    .header-side-menu {
        width:
            94vw;
    }
}


/* =========================================================
   Csökkentett animáció
   ========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    .custom-header,
    .custom-logo-wrap,
    .header-icon-wrap,
    .header-side-menu,
    .header-side-menu-overlay,
    .header-side-menu-close,
    .header-side-category-toggle {
        transition:
            none;
    }
}

/* =========================================================
   Mobil alsó navigáció
   ========================================================= */

.mobile-bottom-nav {
    display: none;
}


/* =========================================================
   Mobil
   ========================================================= */

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

    .mobile-bottom-nav {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 950;

        display: grid;

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

        align-items: center;

        min-height: 66px;

        padding:
            0.35rem
            0.35rem
            calc(
                0.35rem
                + env(
                    safe-area-inset-bottom
                )
            );

        border-top:
            1px solid
            rgb(8 35 93 / 0.08);

        background:
            rgb(245 245 245 / 0.97);

        backdrop-filter:
            blur(18px);

        -webkit-backdrop-filter:
            blur(18px);

        box-shadow:
            0 -8px 28px
            rgb(4 15 29 / 0.08);
    }


    /* =====================================================
       Menüelem
       ===================================================== */

    .mobile-bottom-nav-item {
        position: relative;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 0.2rem;

        min-width: 0;
        min-height: 54px;

        padding:
            0.35rem
            0.2rem;

        border-radius: 14px;

        color:
            #526575;

        text-decoration: none;

        transition:
            background-color 160ms ease,
            color 160ms ease,
            transform 160ms ease;
    }

    .mobile-bottom-nav-item:hover,
    .mobile-bottom-nav-item:focus-visible {
        background:
            rgb(8 35 93 / 0.055);

        color:
            #08235d;

        text-decoration:
            none;
    }

    .mobile-bottom-nav-item:active {
        transform:
            scale(0.96);
    }


    /* =====================================================
       Ikon
       ===================================================== */

    .mobile-bottom-nav-icon {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        width: 24px;
        height: 24px;

        flex:
            0
            0
            auto;
    }

    .mobile-bottom-nav-icon svg,
    .mobile-bottom-nav-icon img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: contain;
    }


    /* =====================================================
       Felirat
       ===================================================== */

    .mobile-bottom-nav-label {
        max-width: 100%;

        overflow: hidden;

        color: inherit;

        font-family:
            "Roboto",
            sans-serif;

        font-size: 0.68rem;
        font-weight: 700;

        line-height: 1.1;

        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /* =====================================================
       Tartalom ne kerüljön a nav alá
       ===================================================== */

    body {
        padding-bottom:
            calc(
                74px
                + env(
                    safe-area-inset-bottom
                )
            );
    }
}


/* =========================================================
   Kis mobil
   ========================================================= */

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

    .mobile-bottom-nav {
        min-height: 62px;

        padding-inline:
            0.2rem;
    }

    .mobile-bottom-nav-item {
        min-height: 50px;

        border-radius: 12px;
    }

    .mobile-bottom-nav-icon {
        width: 22px;
        height: 22px;
    }

    .mobile-bottom-nav-label {
        font-size: 0.64rem;
    }
}

.mobile-bottom-nav-item.is-active {
    background:
        rgb(8 35 93 / 0.07);

    color:
        #06154b;
}

.is-family-roboto {
  font-family: "Google Sans", sans-serif;
}

.is-family-merri {
  font-family: "Instrument Serif", sans-serif;
} 

.is-family-ubuntu {
  font-family: "Ubuntu", sans-serif;
} 

.is-size-admin-1 {
	font-size: 14px;
}

.is-size-admin-2 {
	font-size: 20px;
}

.is-size-landing {
	font-size: 59px;
	line-height: 68px;
	letter-spacing: 1px;
}

.has-background-blue {
	background-color: #06154B;
}

.has-text-blue {
	color: #06154B;
}


.has-background-blue {
	background-color: #06154B;
}

.has-text-blue {
	color: #06154B;
}


.landing-text-cnt {
	padding-left: 13rem;
	padding-right: 13rem;
}

.is-size-landing {
	font-size: 32px;
	line-height: 38px;
}


.landing-text-cnt {
    padding-left: 13rem;
    padding-right: 13rem;
}

.is-size-landing {
    font-size: 59px;
    line-height: 68px;
    letter-spacing: 1px;
    z-index: 0;
}

.landing-hero {
    position: relative;
    overflow: hidden;
}

.pill {
    position: absolute;
    width: 152px;
    height: auto;
    pointer-events: none;
    z-index: 10;
    opacity: 0.85;
}

.pill-1 {
    top: -12%;
    left: 16%;
    transform: rotate(-12deg);
}

.pill-2 {
    top: 11%;
    right: 12%;
    transform: rotate(18deg);
}

.pill-3 {
    bottom: -11%;
    left: 30%;
    transform: rotate(-6deg);
}

.landing-hero p {
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .landing-text-cnt {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .is-size-landing {
        font-size: 32px;
        line-height: 38px;
    }

    .pill {
        width: 90px;
    }

    .pill-1 {
        top: -5%;
        left: 6%;
    }

    .pill-2 {
        top: 10%;
        right: 2%;
    }

    .pill-3 {
        bottom: 0%;
        left: 24%;
    }
}

/* =========================================================
   Kereső wrapper
   ========================================================= */

.p-search-wrap {
    position: relative;
    z-index: 100;

    width: 100%;

    padding-left: 0;
    padding-right: 0;

    overflow: visible;
    isolation: isolate;
}

/* =========================================================
   Keresőmező konténer
   ========================================================= */

.p-search-container {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    width: 100%;
    max-width: 659px;

    margin-left: auto;
    margin-right: auto;

    padding:
        0.8rem
        0.8rem
        0.8rem
        1rem;

    box-sizing: border-box;

    overflow: visible;

    border-radius: 999px;

    background-color: #00ac90;

    box-shadow:
        0 4px 12px
        rgb(0 0 0 / 0.1);

    transition:
        box-shadow 200ms ease-in-out;
}

.p-search-container:focus-within {
    box-shadow:
        0 6px 20px
        rgb(36 216 186 / 0.45),
        0 0 0 5px
        rgb(36 216 186 / 0.25);
}

/* =========================================================
   Fókusz ripple
   ========================================================= */

.p-search-container::after {
    content: "";

    position: absolute;
    inset: -8px;
    z-index: -1;

    border-radius: 999px;

    opacity: 0;

    pointer-events: none;

    box-shadow:
        0 0 0 0
        rgb(36 216 186 / 0.55),
        0 0 0 0
        rgb(36 216 186 / 0.35);
}

.p-search-container:focus-within::after {
    animation:
        searchRipple
        1.4s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        infinite;
}

@keyframes searchRipple {
    0% {
        opacity: 0.9;

        box-shadow:
            0 0 0 0
            rgb(36 216 186 / 0.6),
            0 0 0 0
            rgb(36 216 186 / 0.35);
    }

    60% {
        opacity: 0.4;

        box-shadow:
            0 0 0 14px
            rgb(36 216 186 / 0.15),
            0 0 0 22px
            rgb(36 216 186 / 0);
    }

    100% {
        opacity: 0;

        box-shadow:
            0 0 0 20px
            rgb(36 216 186 / 0),
            0 0 0 30px
            rgb(36 216 186 / 0);
    }
}

/* =========================================================
   Keresés ikon
   ========================================================= */

.p-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 20px;
    height: 20px;

    margin-right: 0.6rem;

    color: #ffffff;

    opacity: 0.8;
}

.p-search-icon svg,
.p-search-icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

/* =========================================================
   Kereső input
   ========================================================= */

.p-search-input {
    flex: 1 1 auto;
    min-width: 0;

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;
    color: #ffffff;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;

    appearance: none;
    -webkit-appearance: none;

    transition:
        opacity 400ms ease;
}

.p-search-input::placeholder {
    color: #ffffff;
    opacity: 0.8;
}

.p-search-input.fade-out {
    opacity: 0;
}

.p-search-input.fade-in {
    opacity: 1;
}

/* =========================================================
   Keresés gomb
   ========================================================= */

.p-search-button {
    flex: 0 0 auto;

    margin-left: 0.6rem;
    padding:
        0.55rem
        1.2rem;

    border: 0;
    border-radius: 999px;
    outline: 0;

    background-color: #ffffff;
    color: #010e06;

    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.5px;

    cursor: pointer;

    transition:
        background-color 200ms ease,
        transform 200ms ease,
        box-shadow 200ms ease;
}

.p-search-button:hover {
    transform: translateY(-1px);

    background-color: #f3f3f3;

    box-shadow:
        0 4px 12px
        rgb(0 0 0 / 0.1);
}

.p-search-button:active {
    transform: translateY(0);
}

.p-search-button:focus-visible {
    box-shadow:
        0 0 0 3px
        rgb(255 255 255 / 0.4);
}

/* =========================================================
   Találati lista
   ========================================================= */

.p-search-results {
    position: absolute;
    top: calc(100% + 0.65rem);
    left: 50%;
    z-index: 10;

    width: 100%;
    max-width: 559px;

    transform:
        translateX(-50%);

    overflow: hidden;

    border:
        1px solid
        rgb(6 21 75 / 0.07);

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 20px 50px
        rgb(6 21 75 / 0.18);
}

.p-search-results.is-hidden {
    display: none;
}

/* =========================================================
   Találati elem
   ========================================================= */

.p-search-result-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;

    min-width: 0;

    padding:
        0.9rem
        0.9rem;

    border-bottom:
        1px solid
        rgb(6 21 75 / 0.055);

    color: inherit;
    text-decoration: none;

    transition:
        background-color 160ms ease,
        color 160ms ease;
}

.p-search-result-item:last-child {
    border-bottom: 0;
}

.p-search-result-item:hover,
.p-search-result-item:focus-visible {
    background: #f5fffc;
    color: inherit;
    text-decoration: none;
}

/* =========================================================
   Találati kép
   ========================================================= */

.p-search-result-image {
    flex: 0 0 auto;

    width: 46px;
    height: 46px;

    border-radius: 12px;

    background: #f3f3f3;

    object-fit: cover;
}

/* =========================================================
   Találati szöveg
   ========================================================= */

.p-search-result-content {
    flex: 1 1 auto;
    min-width: 0;
}

.p-search-result-name {
    overflow: hidden;

    color: #111111;

    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.25;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.p-search-result-name mark {
    padding:
        0
        2px;

    border-radius: 5px;

    background:
        rgb(0 172 144 / 0.18);

    color: inherit;
}

.p-search-result-meta {
    overflow: hidden;

    margin-top: 0.15rem;

    color: #777777;

    font-size: 0.78rem;
    line-height: 1.3;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.p-search-result-price {
    flex: 0 0 auto;

    margin-left: auto;

    color: #06154b;

    font-size: 0.88rem;
    font-weight: 900;
    white-space: nowrap;
}

/* =========================================================
   Üres / hiba állapot
   ========================================================= */

.p-search-result-empty,
.p-search-result-error,
.p-search-result-loading {
    padding:
        1.1rem
        1rem;

    color: #6d7881;

    font-size: 0.84rem;
    line-height: 1.45;
    text-align: center;
}

.p-search-result-error {
    color: #a12b2b;
}

/* =========================================================
   Kereső + AI kereső sor
   ========================================================= */

.p-search-row {
    position: relative;

    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0.75rem;

    width: 100%;
    max-width: 820px;

    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   Normál kereső a közös sorban
   ========================================================= */

.p-search-row .p-search-container {
    flex: 1 1 auto;
    min-width: 0;

    margin-left: 0;
    margin-right: 0;
}

/* =========================================================
   AI kereső gomb
   ========================================================= */

.p-search-ai-button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;

    flex: 0 0 auto;

    min-height: 100%;

    padding:
        0.8rem
        1.25rem;

    border:
        1px solid
        rgb(6 21 75 / 0.1);

    border-radius: 999px;

    background:
        #06154b;

    color:
        #ffffff;

    font-size:
        0.82rem;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.1px;

    text-decoration:
        none;

    white-space:
        nowrap;

    cursor:
        pointer;

    box-shadow:
        0 4px 12px
        rgb(6 21 75 / 0.12);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease;
}

.p-search-ai-button svg {
    display: block;

    flex:
        0 0 auto;

    width:
        19px;

    height:
        19px;
}

/* =========================================================
   AI kereső hover
   ========================================================= */

.p-search-ai-button:hover {
    color:
        #ffffff;

    text-decoration:
        none;

    transform:
        translateY(-1px);

    background:
        #0a1d60;

    box-shadow:
        0 7px 18px
        rgb(6 21 75 / 0.2);
}

.p-search-ai-button:active {
    transform:
        translateY(0);
}

.p-search-ai-button:focus-visible {
    outline:
        0;

    box-shadow:
        0 0 0 4px
        rgb(6 21 75 / 0.14),
        0 7px 18px
        rgb(6 21 75 / 0.18);
}

/* =========================================================
   Mobil
   ========================================================= */

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

    .p-search-row {
        flex-direction:
            column;

        gap:
            0.65rem;

        max-width:
            659px;
    }

    .p-search-row .p-search-container {
        width:
            100%;
    }

    .p-search-ai-button {
        align-self:
            center;

        min-height:
            auto;

        padding:
            0.75rem
            1.2rem;
    }
}

/* =========================================================
   A kereső alatti blokkok rétegezése
   ========================================================= */

.home-section,
.home-navigation-section,
.home-promo-navigation,
.home-banner-section,
.banner-slider,
.banner-container {
    position: relative;
    z-index: 1;
}

/* =========================================================
   Tablet
   ========================================================= */

@media screen and (max-width: 768px) {
    .p-search-wrap {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .p-search-container {
        max-width: none;

        padding:
            0.7rem
            0.7rem
            0.7rem
            0.9rem;
    }

    .p-search-button {
        padding:
            0.52rem
            1rem;
    }

    .p-search-results {
        max-width: calc(100% - 2rem);
    }
}

/* =========================================================
   Mobil
   ========================================================= */

@media screen and (max-width: 480px) {
    .p-search-wrap {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .p-search-container {
        padding:
            0.65rem
            0.65rem
            0.65rem
            0.85rem;
    }

    .p-search-icon {
        width: 18px;
        height: 18px;

        margin-right: 0.5rem;
    }

    .p-search-input {
        font-size: 16px;
    }

    .p-search-button {
        margin-left: 0.4rem;

        padding:
            0.5rem
            0.9rem;

        font-size: 11px;
    }

    .p-search-results {
        top: calc(100% + 0.55rem);

        left: 1rem;
        right: 1rem;

        width: auto;
        max-width: none;

        transform: none;

        border-radius: 16px;
    }

    .p-search-result-item {
        gap: 0.7rem;

        padding:
            0.8rem
            0.8rem;
    }

    .p-search-result-image {
        width: 42px;
        height: 42px;

        border-radius: 10px;
    }

    .p-search-result-name {
        font-size: 0.82rem;
    }

    .p-search-result-meta {
        font-size: 0.72rem;
    }

    .p-search-result-price {
        display: none;
    }
}

/* =========================================================
   Kis mobil
   ========================================================= */

@media screen and (max-width: 360px) {
    .p-search-button {
        padding-inline: 0.75rem;

        font-size: 10px;
    }

    .p-search-result-image {
        width: 38px;
        height: 38px;
    }

    .p-search-result-name {
        font-size: 0.78rem;
    }
}

/* =========================================================
   Csökkentett animáció
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .p-search-container,
    .p-search-input,
    .p-search-button,
    .p-search-result-item {
        transition: none;
    }

    .p-search-container:focus-within::after {
        animation: none;
    }
}

.p-input-code {
	font-family: "Google Sans", sans-serif;
	border-width: 1px;
	border-radius: 12px;
	border-style: solid;
	border-color: #eee;
	transition: 0.2s;
	outline: 0;
	font-weight: 600;
	font-size: 19px;
	padding: 0.8rem 1rem 0.8rem 1rem;
	text-align: center;
	letter-spacing: 5px;
}

.p-input-code.is-fullwidth {
	width: 100%;
}

.p-input-code:hover {
	-webkit-box-shadow: 0px 0px 0px 3px #CDCECD; 
  box-shadow: 0px 0px 0px 3px #CDCECD;
}

.p-input-code:focus {
	-webkit-box-shadow: 0px 0px 0px 3px #229660; 
  box-shadow: 0px 0px 0px 3px #229660;
}

.p-input {
	font-family: "Google Sans", sans-serif;
	border-width: 1px;
	border-radius: 12px;
	border-style: solid;
	border-color: #D0D0D0;
	transition: 0.2s;
	outline: 0;
	font-weight: 400;
	font-size: 14px;
	padding: 0.8rem 1rem 0.8rem 1rem;
}

.p-input.is-fullwidth {
	width: 100%;
}

.p-input:hover {
	-webkit-box-shadow: 0px 0px 0px 3px #eee; 
  box-shadow: 0px 0px 0px 3px #eee;
}

.p-input:focus {
	-webkit-box-shadow: 0px 0px 0px 3px #229660; 
  box-shadow: 0px 0px 0px 3px #229660;
  border-color: #fff;
}

/* --- Kis méretű input mező (is-small) --- */
.p-input.is-small {
    font-size: 12px;
    height: 32px; /* Megegyezik a gomb magasságával */
    padding: 0 0.8rem; /* Csak vízszintes padding */
    border-radius: 8px;
}

/* --- Kis méretű select (is-small) --- */
.p-select.is-small {
    height: 32px;
}

.p-select.is-small select {
    font-size: 12px;
    height: 32px;
    padding: 0 2.2rem 0 0.8rem;
    border-radius: 8px;
    line-height: 32px; /* Biztosítja, hogy a szöveg vertikálisan középen legyen */
}

/* A nyíl pozicionálása és méretezése a kis select-hez */
.p-select.is-small::after {
    right: 0.8rem;
    width: 0.7em;
    height: 0.7em;
}

/* --- Alap gomb stílus --- */
.p-button {
	font-family: "Google Sans", sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box; /* Biztosítja, hogy a padding és border fix méretű legyen */
	height: 44px; /* Fix magasság megadása */
	border-width: 1px;
	border-radius: 12px;
	border-style: solid;
	border-color: #010E06;
	background-color: #010E06;
	transition: 0.2s;
	outline: 0;
	font-weight: 500;
	color: #fff;
	font-size: 14px;
	padding: 0 1rem; /* Csak a bal-jobb padding marad, a magasságot a height és a flexbox adja */
	cursor: pointer;
	text-decoration: none;
}

.p-button:hover {
	border-color: #252A27;
	background-color: #252A27;
}

.p-button.is-fullwidth {
	width: 100%;
}

/* --- Variációk (Színek) --- */

/* Danger (Veszély) */
.p-button.is-danger {
	background-color: #D32F2F;
	border-color: #D32F2F;
	color: #fff;
}
.p-button.is-danger:hover {
	background-color: #B71C1C;
	border-color: #B71C1C;
}

/* Danger Light */
.p-button.is-danger.is-light {
	background-color: #FFEBEE;
	border-color: #FFCDD2;
	color: #C62828;
}
.p-button.is-danger.is-light:hover {
	background-color: #FFCDD2;
	border-color: #EF9A9A;
}

/* Warning (Figyelmeztetés) */
.p-button.is-warning {
	background-color: #ED6C02;
	border-color: #ED6C02;
	color: #fff;
}
.p-button.is-warning:hover {
	background-color: #E65100;
	border-color: #E65100;
}

/* Warning Light */
.p-button.is-warning.is-light {
	background-color: #FFF3E0;
	border-color: #FFE0B2;
	color: #E65100;
}
.p-button.is-warning.is-light:hover {
	background-color: #FFE0B2;
	border-color: #FFCC80;
}

/* Success (Siker / Mentazöld) */
.p-button.is-success {
	background-color: #2E7D32;
	border-color: #2E7D32;
	color: #fff;
}
.p-button.is-success:hover {
	background-color: #1B5E20;
	border-color: #1B5E20;
}

/* Success Light */
.p-button.is-success.is-light {
	background-color: #E8F5E9;
	border-color: #C8E6C9;
}
.p-button.is-success.is-light:hover {
	background-color: #C8E6C9;
	border-color: #A5D6A7;
}

/* Info (Információ) */
.p-button.is-info {
	background-color: #0288D1;
	border-color: #0288D1;
	color: #fff;
}
.p-button.is-info:hover {
	background-color: #01579B;
	border-color: #01579B;
}

/* Info Light */
.p-button.is-info.is-light {
	background-color: #E1F5FE;
	border-color: #B3E5FC;
	color: #0288D1;
}
.p-button.is-info.is-light:hover {
	background-color: #B3E5FC;
	border-color: #81D4FA;
}

/* Light (Világosszürke / Semleges) */
.p-button.is-light {
	background-color: #F3F4F6;
	border-color: #E5E7EB;
	color: #1F2937;
}
.p-button.is-light:hover {
	background-color: #E5E7EB;
	border-color: #D1D5DB;
	color: #06154B827;
}

/* --- Kis méretű gomb (is-small) --- */
.p-button.is-small {
    font-size: 12px;
    height: 32px; /* Fix magasság, ami biztosan kisebb */
    padding: 0 0.8rem; /* Csak vízszintes padding */
    border-radius: 8px; /* Arányosabb lekerekítés */
}

/* --- Loading állapot --- */
.p-button.is-loading {
    color: transparent !important; /* Elrejtjük a szöveget, de a gomb mérete megmarad */
    pointer-events: none; /* Ne lehessen többször rákattintani */
    position: relative;
    opacity: 0.9;
    cursor: wait;
}

.p-button.is-loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff; /* A pörgő rész színe */
    animation: p-button-spinner 0.6s linear infinite;
}

@keyframes p-button-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* A külső befoglaló doboz */
.p-select {
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: fit-content;
}

.p-select.is-fullwidth {
    display: block;
    width: 100%;
}

/* Maga a legördülő lista */
.p-select select {
    appearance: none;
    cursor: pointer;
    display: block;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
    outline: 0;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 0.83rem 2.5rem 0.84rem 1rem; /* Jobb oldalon hely a nyílnak */
    transition: 0.2s;
    background-color: #fff;
    color: #010E06;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Hover és Focus a belső selectre */
.p-select select:hover {
    -webkit-box-shadow: 0px 0px 0px 3px #eee;
    box-shadow: 0px 0px 0px 3px #eee;
    border-color: #D0D0D0;
}

.p-select select:focus {
    -webkit-box-shadow: 0px 0px 0px 3px #229660;
    box-shadow: 0px 0px 0px 3px #229660;
    border-color: #fff;
}

/* A nyíl ikon (pszeudo-elemként a div-re) */
.p-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.1rem;
    transform: translateY(-50%);
    width: 0.8em;
    height: 0.8em;
    pointer-events: none; /* Átkattintható marad */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23010E06'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
}

textarea.p-input {
    resize: vertical;       /* Csak függőlegesen lehessen átméretezni */
    min-height: 100px;      /* Alapértelmezett magasság */
    line-height: 1.5;       /* Jobb olvashatóság több sor esetén */
    font-family: inherit;   /* Megőrzi az oldal alapértelmezett betűtípusát */
    overflow: auto;         /* Szükség esetén megjeleníti a görgetősávot */
}

.admin-login-logo {
	width: 149px;
	height: auto;
}

.admin-dashboard-logo {
	width: 119px;
	height: auto;
}

.image.is-20x20{height:18px;width:18px}
.image.is-logo{height:auto;width:154px}

@media (max-width: 768px) {
.image.is-logo{height:auto;width:134px}
}


.admin-cnt {
	background-color: #fff;
	border-radius: 12px;
	padding: 1.5rem;
}

.admin-layout-wrap {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

.admin-layout-menubar {
  background-color: #fff;
  border-right: 0px solid #eee;
}

.admin-layout-maincontent {
  background-color: #f4f4f4;
  padding: 20px;
}

/* Mobil gomb alapból rejtve */
.menu-toggle {
  display: none;
  padding: 10px 15px;
  background: #fff;
  border: 1px solid #eee;
  cursor: pointer;
  margin-bottom: 20px;
}

/* Overlay sötétítés */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.3);
  z-index: 90;
  opacity: 0;
  transition: opacity 0.3s;
}

/* --- MOBIL NÉZET (768px alatt) --- */
@media (max-width: 768px) {
  .admin-layout-wrap {
    grid-template-columns: 1fr;
  }

  .admin-layout-menubar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-width);
    height: 100%;
    z-index: 100;
    transform: translateX(-100%); /* Eltüntetjük balra */
    transition: transform 0.3s ease-in-out;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    overflow-y: scroll;
  }

  /* Nyitott állapot */
  .admin-layout-menubar.open {
    transform: translateX(0);
  }

  .admin-layout-menubar.open ~ .sidebar-overlay {
    display: block;
    opacity: 1;
  }

  .menu-toggle {
    display: block;
  }
}

.admin-menu-button {
	width: 100%;
	height: auto;
	background-color: #fff;
	border-radius: 9px;
	border-width: 0px;
	display: flex;
	align-items: center;
	padding: 0.5rem 0rem 0.5rem 0rem;
	color: #06154B;
	font-weight: 400;
	font-size: 14px;
	margin-bottom: 0.0rem;
	transition: 0.2s ease-in-out;
}

.admin-menu-button:hover {
	padding: 0.5rem 0rem 0.5rem 0.2rem;
}

.admin-menu-button.is-active {
	padding: 0.5rem 0rem 0.5rem 0.0rem;
	font-weight: 700;
}

.admin-menu-subbutton {
	width: 100%;
	height: auto;
	background-color: #fff;
	border-radius: 9px;
	border-width: 0px;
	display: flex;
	align-items: center;
	padding: 0.3rem 0rem 0.3rem 0rem;
	color: #232323;
	font-weight: 400;
	font-size: 14px;
	margin-bottom: 0.0rem;
	margin-left: 0.7rem;
	transition: 0.2s ease-in-out;
}

.admin-menu-subbutton:hover {
	padding: 0.3rem 0rem 0.3rem 0.2rem;
}


.admin-menu-button-icon {
	width: 15px;
	height: 15px;
	margin-top: -1px;
	margin-right: 0.6rem;
}

.product-content ul,
.wysiwyg-editor ul {
    list-style: none;
    padding-left: 0;
    margin: 10px 0;
}

.product-content ul li,
.wysiwyg-editor ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 5px;
    line-height: 1.5;
}

.product-content ul li::before,
.wysiwyg-editor ul li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #333;
}

.admin-filter-collapse {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.admin-filter-toggle {
    width: 100%;
    border: 0;
    background: #fff;
    padding: 14px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    color: #222;
    transition: background .15s ease;
}

.admin-filter-toggle:hover {
    background: #fafafa;
}

.admin-filter-toggle-icon {
    transition: transform .18s ease;
}

.admin-filter-collapse.is-open .admin-filter-toggle-icon {
    transform: rotate(180deg);
}

.admin-filter-panel {
    padding: 2rem;
    border-top: 1px solid #eee;
}

.admin-filter-panel[hidden] {
    display: none;
}

.home-product-row,
.home-category-row {
    display: flex;
    gap: 1rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
        padding-right: 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
 
/* CATEGORY WRAPPER */

.home-category-wrap {
    position: relative;
    padding-left: 0rem;
    padding-right: 0rem;
}

/* CATEGORY ROW */

.home-category-row {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.home-category-row::-webkit-scrollbar {
    display: none;
}

/* CATEGORY ARROWS */

.home-category-arrow {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    z-index: 5;

    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 999px;

    background: #06154B;
    color: #fff;
    font-size: 2rem;
    line-height: 1;

    display: none;
    align-items: center;
    justify-content: center;
    margin-top: -2px;

    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.home-category-arrow-left {
    left: 0.5rem;
}

.home-category-arrow-right {
    right: 0.5rem;
}

.home-category-arrow.is-visible {
    display: flex;
}

.home-category-arrow:hover {
    background: #333;
}

/* =========================================================
   PRODUCT CARD
   ========================================================= */

.home-product-card {
    display: flex;
    flex-direction: column;

    background: #fff;

    border: 0;
    border-radius: 12px;

    padding: 1rem;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

    color: inherit;
    text-decoration: none;
}

.home-product-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.08);
}

.home-product-main-link {
    display: flex;
    flex-direction: column;
    flex: 1;

    color: inherit;
    text-decoration: none;
}

.home-product-main-link:hover {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   Termékkép
   ========================================================= */

.home-product-image-wrap {
    position: relative;

    width: 100%;

    margin-bottom: 0.85rem;
}

.home-product-image {
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    border-radius: 10px;

    background: #fff;

    object-fit: cover;

    margin-bottom: 0;
}


/* =========================================================
   Termékkép badge stack
   =========================================================
 *
 * Ide kerülhet:
 *
 * - Akció
 * - Egészségpénztár
 * - később a kupon badge is
 *
 * A badge-ek automatikusan egymás alá kerülnek.
 * ========================================================= */

.home-product-badge-stack {
    position: absolute;

    top: 0.5rem;
    left: 0.5rem;

    z-index: 4;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 0.3rem;

    max-width:
        calc(
            100%
            - 1rem
        );

    pointer-events: none;
}


/* =========================================================
   Akció badge
   ========================================================= */

.home-product-sale-badge {
    display: inline-flex;
    align-items: center;

    gap: 0.25rem;

    width: fit-content;
    max-width: 100%;

    border-radius: 999px;

    background: #e42121;
    color: #fff;

    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;

    padding:
        0.36rem
        0.55rem;

    box-shadow:
        0 4px 12px
        rgba(228, 33, 33, 0.22);

    letter-spacing: 0.015em;
}


/* =========================================================
   Egészségpénztár badge
   ========================================================= */

.home-product-ep-badge {
    display: inline-flex;
    align-items: center;

    gap: 0.32rem;

    width: fit-content;
    max-width: 100%;

    padding:
        0.28rem
        0.48rem;

    border:
        1px solid
        rgba(6, 21, 75, 0.12);

    border-radius: 999px;

    background:#5555CB;

    box-shadow:
        0 4px 12px
        rgba(6, 21, 75, 0.08);

    color: #fff;

    font-size: 0.64rem;
    font-weight: 850;
    line-height: 1;

    letter-spacing: 0.005em;

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter:
        blur(6px);
}

.home-product-ep-badge-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 1.35rem;
    height: 1rem;

    flex: 0 0 auto;

    padding:
        0
        0.1rem;

    color: #fff;

    font-size: 0.85rem;
    font-weight: 950;
    line-height: 1;

    letter-spacing: 0.03em;
}

.home-product-ep-badge-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   Termék tartalom
   ========================================================= */

.home-product-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.home-product-title {
    font-weight: 800;
    line-height: 1.25;

    margin-bottom: 0.45rem;

    color: #222;
}

.home-product-meta {
    min-height: 2.4em;

    font-size: 0.82rem;
    color: #777;
    line-height: 1.35;

    margin-bottom: 0.9rem;
}


/* =========================================================
   Alsó ár / kiszerelés sor
   ========================================================= */

.home-product-bottom-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 0.75rem;

    margin-top: auto;
    margin-bottom: 0.35rem;
}

.home-product-package {
    font-size: 0.9rem;
    font-weight: 700;

    color: #444;

    white-space: nowrap;
}

.home-product-price {
    font-size: 1.35rem;
    font-weight: 900;

    color: #06154B;

    white-space: nowrap;
}

.home-product-price.is-sale {
    color: #e42121;
}

.home-product-original-price {
    font-size: 0.82rem;

    color: #888;

    text-align: right;

    margin-bottom: 0.2rem;
}

.home-product-original-price s {
    text-decoration-thickness: 2px;
}


/* =========================================================
   Kosár gomb
   ========================================================= */

.home-add-cart-btn {
    width: 100%;

    border: 0;
    border-radius: 999px;

    background: #06154B;
    color: #fff;

    font-weight: 800;

    padding:
        0.75rem
        1rem;

    cursor: pointer;

    transition: 0.2s;

    margin-top: 0.75rem;
}

.home-add-cart-btn:hover {
    background: #333;
}


/* =========================================================
   Főoldali kupon badge
   =========================================================
 *
 * Egyelőre megtartjuk a jelenlegi abszolút
 * pozicionálását.
 *
 * Ha a JS-ben ezt is betesszük a
 * .home-product-badge-stack elembe,
 * akkor innen kivehető:
 *
 * position
 * top
 * left
 * z-index
 * ========================================================= */

.home-product-coupon-badge {
    position: absolute;

    top: 0.5rem;
    left: 0.5rem;

    z-index: 5;

    display: inline-flex;
    align-items: center;

    gap: 0.38rem;

    max-width:
        calc(
            100%
            - 1rem
        );

    padding:
        0.35rem
        0.65rem;

    border:
        1.5px dashed
        rgba(14, 159, 143, 0.82);

    border-radius: 999px;

    background:
        rgba(239, 252, 249, 0.97);

    box-shadow:
        0 8px 20px
        rgba(14, 159, 143, 0.12);

    color: #08796e;

    font-size: 0.7rem;
    font-weight: 950;
    line-height: 1.1;

    letter-spacing: 0.015em;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}

.home-product-coupon-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 1.15rem;
    height: 1.15rem;

    flex:
        0 0
        1.15rem;

    border-radius: 50%;

    background: #0e9f8f;
    color: #fff;

    font-size: 0.64rem;
    font-weight: 950;
    line-height: 1;
}

.home-product-coupon-badge-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   Főoldali expiry mennyiség
   ========================================================= */

.home-product-expiry-quantity {
    display: inline-flex;
    align-items: center;

    gap: 0.4rem;

    width: fit-content;

    padding:
        0.28rem
        0.52rem;

    border:
        1px solid
        rgba(14, 159, 143, 0.08);

    border-radius: 999px;

    background:
        rgba(6, 21, 75, 0.04);

    color: #46506f;

    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.15;
}

.home-product-expiry-quantity-dot {
    width: 0.38rem;
    height: 0.38rem;

    flex:
        0 0
        0.38rem;

    border-radius: 50%;

    background: #0e9f8f;

    box-shadow:
        0 0 0 3px
        rgba(14, 159, 143, 0.1);
}


/* =========================================================
   PLACEHOLDER FADE
   ========================================================= */

.p-search-input {
    transition: opacity 0.4s ease;
}

.p-search-input.fade-out {
    opacity: 0;
}

.p-search-input.fade-in {
    opacity: 1;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media screen and (min-width: 769px) {

    .home-product-row {
        display: grid;

        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            );

        gap: 1rem;

        overflow-x: visible;
    }

    .home-product-card {
        min-width: 0;
        max-width: none;

        width: 100%;

        padding: 1rem;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

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

    .home-category-wrap {
        position: relative;

        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .home-product-row {
        display: flex;

        gap: 1rem;

        overflow-x: auto;

        padding-left: 1rem;
        padding-right: 1rem;
    }

    .home-product-row::-webkit-scrollbar {
        height: 6px;
    }

    .home-product-row::-webkit-scrollbar-thumb {
        background: #ddd;

        border-radius: 999px;
    }

    .home-product-card {
        min-width: 200px;
        max-width: 200px;

        padding: 0.85rem;

        scroll-snap-align: start;

        flex:
            0
            0
            auto;
    }

    .home-category-arrow {
        width: 48px;
        height: 49px;

        font-size: 1.7rem;

        margin-top: -1px;
    }


    /* -----------------------------------------------------
       Mobil termékkép
       ----------------------------------------------------- */

    .home-product-image-wrap {
        margin-bottom: 0.75rem;
    }


    /* -----------------------------------------------------
       Mobil badge stack
       ----------------------------------------------------- */

    .home-product-badge-stack {
        top: 0.4rem;
        left: 0.4rem;

        gap: 0.25rem;

        max-width:
            calc(
                100%
                - 0.8rem
            );
    }

    .home-product-sale-badge {
        font-size: 0.63rem;

        padding:
            0.32rem
            0.48rem;
    }

    .home-product-ep-badge {
        gap: 0.26rem;

        padding:
            0.25rem
            0.42rem;

        font-size: 0.6rem;
    }

    .home-product-ep-badge-mark {
        min-width: 1.25rem;
        height: 0.95rem;

        padding:
            0
            0.2rem;

        font-size: 0.85rem;
    }


    /* -----------------------------------------------------
       Mobil kupon badge
       ----------------------------------------------------- */

    .home-product-coupon-badge {
        top: 0.4rem;
        left: 0.4rem;

        max-width:
            calc(
                100%
                - 0.8rem
            );

        font-size: 0.62rem;

        padding:
            0.29rem
            0.48rem;
    }
}
/* CATEGORY BUTTON */

.home-category-btn {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    background: #fff;
    color: #222;
    border-radius: 999px;
    padding: 0.65rem 1rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    scroll-snap-align: start;
}

.home-category-btn:hover,
.home-category-btn.is-active {
    background: #06154B;
    border-color: #06154B;
    color: #fff;
    text-decoration: none;
}

.product-view-page {
    padding-top: 0.5rem;
    padding-bottom: 4rem;
}

.product-view-page {
    padding-top: 0.5rem;
    padding-bottom: 4rem;
}

/* =========================================================
   Product view – retailer pricing
   ========================================================= */

.product-view-retailer-base-price {
    margin: 0 0 0.35rem;
}

.product-view-retailer-base-pill {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    padding: 0.28rem 0.55rem;

    border-radius: 999px;

    background: rgb(11 31 79 / 0.045);

    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.2;

    color: rgb(11 31 79 / 0.58);
}

.product-view-retailer-base-pill s {
    margin-left: 0.2rem;

    color: rgb(11 31 79 / 0.48);

    text-decoration-thickness: 1px;
}

.product-view-retailer-price-info {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-top: 0.3rem;
    padding: 0.32rem 0.6rem;

    border-radius: 999px;

    background: rgb(11 31 79 / 0.08);

    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.2;

    color: #0b1f4f;
}

/* Fő termékhero */
.product-view-grid {
    display: grid;
    grid-template-columns: minmax(340px, 0.85fr) minmax(460px, 1.15fr);
    gap: 3.5rem;
    align-items: start;
}

/* Bal oldali galéria */
.product-view-gallery {
    background: #fff;
    border-radius: 18px;
    padding: 1.5rem;
}

.product-view-image-stage {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
}

.product-view-main-image {
    width: 100%;
    max-height: 540px;
    object-fit: contain;
    background: #fff;
    display: block;
}

.product-view-main-image.is-empty {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: #f7f7f7;
    border-radius: 18px;
}

/* Galéria nyilak */
.product-view-gallery-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(6, 21, 75, 0.25);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    color: #06154B;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: 0.2s ease;
    box-shadow: 0 12px 28px rgba(6, 21, 75, 0.08);
}

.product-view-gallery-nav:hover {
    background: #06154B;
    color: #fff;
    border-color: #06154B;
}

.product-view-gallery-nav-prev {
    left: 1rem;
}

.product-view-gallery-nav-next {
    right: 1rem;
}

/* Thumbnail sor */
.product-view-thumbs {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
    overflow-x: auto;
    padding: 0.25rem 0 0.35rem;
}

.product-view-thumb-btn {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    border-radius: 12px;
    flex: 0 0 auto;
}

.product-view-thumb {
    width: 76px;
    height: 76px;
    border-radius: 12px;
    object-fit: cover;
    background: #f7f7f7;
    border: 2px solid transparent;
    transition: 0.2s ease;
}

.product-view-thumb.is-active {
    border-color: #06154B;
}

/* =========================================================
   Product view - coupon badge
   ========================================================= */

.product-view-coupon-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 5;

    display: inline-flex;
    align-items: center;
    gap: 0.7rem;

    max-width: calc(100% - 2.8rem);
    padding: 0.7rem 0.9rem;

    border: 2px dashed rgba(14, 159, 143, 0.85);
    border-radius: 16px;

    background: rgba(239, 252, 249, 0.96);

    color: #08796e;

    box-shadow:
        0 8px 12px rgba(14, 159, 143, 0.12);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    pointer-events: none;
}

.product-view-coupon-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 2.45rem;
    height: 2.45rem;
    flex: 0 0 2.45rem;

    border-radius: 50%;

    background: #0e9f8f;
    color: #fff;

    font-size: 1rem;
    font-weight: 900;
}

.product-view-coupon-badge-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;

    min-width: 0;
}

.product-view-coupon-badge-content strong {
    color: #08796e;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.2;
}

.product-view-coupon-badge-content span {
    color: #06154b;
    font-size: 0.75rem;
    font-weight: 800;
}

.product-view-coupon-badge-content small {
    color: #68708c;
    font-size: 0.68rem;
    font-weight: 700;
}


/* =========================================================
   Main image zoom affordance
   ========================================================= */

.product-view-main-image[data-product-image-open] {
    cursor: zoom-in;
}

.product-view-image-zoom-hint {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 4;

    display: flex;
    align-items: center;
    gap: 0.4rem;

    padding: 0.45rem 0.7rem;

    border: 1px solid rgba(6, 21, 75, 0.12);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.92);

    color: #06154b;

    font-size: 0.72rem;
    font-weight: 800;

    box-shadow:
        0 8px 24px rgba(6, 21, 75, 0.08);

    opacity: 0;
    transform: translateY(4px);

    pointer-events: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.product-view-image-stage:hover
.product-view-image-zoom-hint {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   Product image lightbox
   ========================================================= */

html.is-product-lightbox-open,
body.is-product-lightbox-open {
    overflow: hidden;
}

.product-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 2rem;
}

.product-image-lightbox.is-active {
    display: flex;
}

.product-image-lightbox-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(4, 10, 32, 0.82);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.product-image-lightbox-dialog {
    position: relative;
    z-index: 2;

    width: min(
        94vw,
        1450px
    );

    height: min(
        92vh,
        1050px
    );

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 24px;

    background: #fff;

    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.36);

    overflow: hidden;
}

.product-image-lightbox-stage {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    touch-action: none;

    cursor: zoom-in;
}

.product-image-lightbox-stage.is-zoomed {
    cursor: grab;
}

.product-image-lightbox-stage.is-dragging {
    cursor: grabbing;
}

.product-image-lightbox-image {
    display: block;

    max-width: 94%;
    max-height: 94%;

    width: auto;
    height: auto;

    object-fit: contain;

    user-select: none;
    -webkit-user-drag: none;

    transform-origin: center center;

    transition:
        transform 0.18s ease;
}

.product-image-lightbox-stage.is-dragging
.product-image-lightbox-image {
    transition: none;
}


/* Close */

.product-image-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 8;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(6, 21, 75, 0.12);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.94);

    color: #06154b;

    font-size: 1.8rem;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 8px 24px rgba(6, 21, 75, 0.1);
}

.product-image-lightbox-close:hover {
    background: #06154b;
    color: #fff;
}


/* Navigation */

.product-image-lightbox-nav {
    position: absolute;
    top: 50%;
    z-index: 7;

    width: 58px;
    height: 58px;

    transform: translateY(-50%);

    border: 1px solid rgba(6, 21, 75, 0.12);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.94);

    color: #06154b;

    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 12px 28px rgba(6, 21, 75, 0.12);

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.product-image-lightbox-nav:hover {
    background: #06154b;
    color: #fff;
}

.product-image-lightbox-nav.is-prev {
    left: 1.2rem;
}

.product-image-lightbox-nav.is-next {
    right: 1.2rem;
}

.product-image-lightbox-nav.is-hidden {
    display: none;
}


/* Zoom indicator */

.product-image-lightbox-zoom {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    z-index: 7;

    transform: translateX(-50%);

    padding: 0.45rem 0.75rem;

    border-radius: 999px;

    background: rgba(6, 21, 75, 0.88);
    color: #fff;

    font-size: 0.75rem;
    font-weight: 800;

    pointer-events: none;
}

.product-image-lightbox-help {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 7;

    padding: 0.45rem 0.7rem;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.9);

    color: #68708c;

    font-size: 0.7rem;
    font-weight: 700;

    pointer-events: none;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 768px) {

    .product-view-coupon-badge {
        top: 0.75rem;
        left: 0.75rem;

        max-width: calc(100% - 1.5rem);

        padding: 0.55rem 0.7rem;

        border-radius: 14px;
    }

    .product-view-coupon-badge-icon {
        width: 1.9rem;
        height: 1.9rem;
        flex-basis: 1.9rem;

        font-size: 0.85rem;
    }

    .product-view-coupon-badge-content strong {
        font-size: 0.8rem;
    }

    .product-view-image-zoom-hint {
        display: none;
    }

    .product-image-lightbox {
        padding: 0;
    }

    .product-image-lightbox-dialog {
        width: 100vw;
        height: 100dvh;

        border-radius: 0;
    }

    .product-image-lightbox-image {
        max-width: 96%;
        max-height: 88%;
    }

    .product-image-lightbox-close {
        top: max(
            0.75rem,
            env(safe-area-inset-top)
        );

        right: 0.75rem;

        width: 44px;
        height: 44px;
    }

    .product-image-lightbox-nav {
        width: 44px;
        height: 44px;

        font-size: 1.8rem;
    }

    .product-image-lightbox-nav.is-prev {
        left: 0.5rem;
    }

    .product-image-lightbox-nav.is-next {
        right: 0.5rem;
    }

    .product-image-lightbox-help {
        display: none;
    }

    .product-image-lightbox-zoom {
        bottom:
            max(
                0.8rem,
                env(safe-area-inset-bottom)
            );
    }
}

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

    .product-view-coupon-badge {
        top: 0.75rem;
        left: 0.75rem;

        max-width: 185px;

        padding: 0.42rem 0.65rem;

        gap: 0.45rem;

        border-radius: 10px;

        box-shadow:
            0 7px 18px
            rgba(14, 159, 143, 0.12);
    }

    .product-view-coupon-badge-icon {
        width: 1.65rem;
        height: 1.65rem;

        flex: 0 0 1.65rem;

        font-size: 0.72rem;
    }

    .product-view-coupon-badge-content {
        gap: 0.05rem;
    }

    .product-view-coupon-badge-content strong {
        font-size: 0.72rem;
        line-height: 1.1;
    }

    .product-view-coupon-badge-content span {
        font-size: 0.68rem;
        line-height: 1.1;
    }

    .product-view-coupon-badge-content small {
        display: none;
    }
}

/* Jobb oldali info */
.product-view-info {
    padding: 0.5rem 0 0;
    border-radius: 0;
}

.product-view-title {
    font-size: clamp(2.4rem, 4vw, 4.5rem);
    line-height: 1.04;
    margin-bottom: 1.5rem;
}

/* Márka / cikkszám / kategória sor */
.product-view-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    color: #06154B;
    font-size: 1rem;
    margin-bottom: 2rem;
}

.product-view-meta-line span {
    color: #06154B;
}

.product-view-meta-line strong {
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Régi meta fallback */
.product-view-meta {
    color: #777;
    font-size: 0.9rem;
    font-weight: 600;
}

.product-view-package {
    font-size: 1rem;
    font-weight: 800;
    color: #444;
    margin-bottom: 1.25rem;
}

/* =========================================================
   Árblokk
   ========================================================= */

.product-view-price-block {
    margin-bottom: 1.5rem;
}


/* =========================================================
   Akciós fejléc
   ========================================================= */

.product-view-sale-head,
.product-view-expiry-sale-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.55rem;

    margin-bottom: 0.55rem;
}


/* =========================================================
   Kedvezmény badge
   ========================================================= */

.product-view-discount-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 30px;

    padding:
        0.38rem
        0.78rem;

    border-radius: 999px;

    background:
        rgba(
            215,
            38,
            61,
            0.1
        );

    border:
        1px solid
        rgba(
            215,
            38,
            61,
            0.12
        );

    color:
        #d7263d;

    font-size: 0.82rem;
    font-weight: 950;

    line-height: 1;

    letter-spacing: 0.01em;
}


/* =========================================================
   Eredeti ár
   ========================================================= */

.product-view-original-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 0.4rem;

    margin:
        0
        0
        0.35rem;

    color:
        #8d8d8d;

    font-size: 0.95rem;
    font-weight: 600;

    line-height: 1.2;
}

.product-view-original-price-label {
    color:
        rgba(
            6,
            21,
            75,
            0.5
        );

    font-size: 0.78rem;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}

.product-view-original-price s {
    color: #999;

    font-size: 1rem;
    font-weight: 700;

    text-decoration-thickness: 2px;

    text-decoration-color:
        rgba(
            153,
            153,
            153,
            0.72
        );
}


/* =========================================================
   Aktuális ár
   ========================================================= */

.product-view-price {
    margin:
        0.15rem
        0
        0.45rem;

    color: #06154b;

    font-size:
        clamp(
            2.55rem,
            4vw,
            3.35rem
        );

    font-weight: 950;

    line-height: 0.95;

    letter-spacing: -0.035em;
}

.product-view-price.is-discounted {
    color: #d7263d;
}


/* =========================================================
   Egységár
   ========================================================= */

.product-view-unit-price {
    margin: 0.15rem 0 0;

    color:
        rgba(
            6,
            21,
            75,
            0.58
        );

    font-size: 0.78rem;
    font-weight: 600;

    line-height: 1.25;
}

.product-view-unit-price strong {
    color:
        rgba(
            6,
            21,
            75,
            0.82
        );

    font-size: 0.82rem;
    font-weight: 900;
}


/* =========================================================
   Szavatossági akció badge
   ========================================================= */

.product-view-expiry-sale-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 30px;

    padding:
        0.38rem
        0.78rem;

    border-radius: 999px;

    background:
        rgba(
            14,
            159,
            143,
            0.1
        );

    border:
        1px solid
        rgba(
            14,
            159,
            143,
            0.12
        );

    color: #08796e;

    font-size: 0.8rem;
    font-weight: 900;

    line-height: 1;
}


/* =========================================================
   Lejáratközeli akció meta
   ========================================================= */

.product-view-expiry-sale-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.5rem;

    margin-top: 0.75rem;
}

.product-view-expiry-sale-stock,
.product-view-expiry-sale-date {
    display: inline-flex;
    align-items: center;

    gap: 0.3rem;

    padding:
        0.34rem
        0.6rem;

    border-radius: 999px;

    background:
        rgba(
            6,
            21,
            75,
            0.045
        );

    color:
        rgba(
            6,
            21,
            75,
            0.72
        );

    font-size: 0.74rem;
    font-weight: 700;

    line-height: 1.15;
}

.product-view-expiry-sale-stock strong,
.product-view-expiry-sale-date strong {
    color: #06154b;

    font-weight: 900;
}


/* =========================================================
   Retailer ár infó
   ========================================================= */

.product-view-retailer-price-info {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    padding:
        0.36rem
        0.7rem;

    border-radius: 999px;

    background:
        rgba(
            14,
            159,
            143,
            0.09
        );

    color: #08796e;

    font-size: 0.8rem;
    font-weight: 900;
}


/* =========================================================
   Mobil
   ========================================================= */

@media (max-width: 768px) {

    .product-view-price {
        font-size:
            clamp(
                2.25rem,
                10vw,
                2.8rem
            );
    }

    .product-view-discount-badge,
    .product-view-expiry-sale-badge {
        font-size: 0.76rem;
    }

    .product-view-original-price {
        font-size: 0.9rem;
    }

    .product-view-original-price s {
        font-size: 0.95rem;
    }

    .product-view-unit-price {
        font-size: 0.74rem;
    }

    .product-view-unit-price strong {
        font-size: 0.78rem;
    }

}

/* Infó kártyák */
.product-view-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin: 1.75rem 0;
}

.product-view-fact {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(6, 21, 75, 0.1);
    border-radius: 18px;
    padding: 1rem 1.1rem;
    box-shadow: 0 12px 28px rgba(6, 21, 75, 0.04);
}

.product-view-fact-label {
    display: block;
    font-size: 0.76rem;
    font-weight: 900;
    color: #777;
    margin-bottom: 0.25rem;
    letter-spacing: 0.02em;
}

.product-view-fact strong {
    display: block;
    color: #06154B;
    font-size: 0.98rem;
    line-height: 1.25;
    word-break: break-word;
}

.product-view-fact strong.is-positive {
    color: #0e9f8f;
}

.product-view-fact strong.is-negative {
    color: #c0392b;
}

/* =========================================================
   Ár + kedvencek
   ========================================================= */

.product-view-price-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
}

.product-view-price-row
.product-view-price-block {
    flex: 1;
    min-width: 0;
}


/* =========================================================
   Kedvenc
   ========================================================= */

.product-view-favorite-btn {
    flex: 0 0 auto;

    width: 54px;
    height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(6, 21, 75, 0.13);

    border-radius: 50%;

    background: #fff;

    color: #06154B;

    cursor: pointer;

    box-shadow:
        0 8px 24px
        rgba(6, 21, 75, 0.05);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

.product-view-favorite-btn:hover {
    border-color:
        rgba(6, 21, 75, 0.4);

    box-shadow:
        0 10px 28px
        rgba(6, 21, 75, 0.1);

    transform:
        translateY(-1px);
}

.product-view-favorite-btn.is-active {
    border-color:
        rgba(232, 65, 99, 0.3);

    background:
        rgba(232, 65, 99, 0.05);
}

.product-view-favorite-icon {
    display: block;

    color: #06154B;

    font-size: 1.85rem;
    line-height: 1;

    transition:
        color 0.2s ease;
}

.product-view-favorite-btn.is-active
.product-view-favorite-icon {
    color: #e84163;
}

.product-view-favorite-label {
    display: none;
}


/* =========================================================
   Actions
   ========================================================= */

.product-view-actions {
    display: grid;

    grid-template-columns:
        150px
        minmax(0, 1fr);

    gap: 0.85rem;

    align-items: stretch;

    margin-top: 1.75rem;
}


/* =========================================================
   Mennyiség
   ========================================================= */

.product-view-quantity {
    min-height: 64px;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        42px;

    align-items: center;

    overflow: hidden;

    border:
        1px solid
        rgba(6, 21, 75, 0.14);

    border-radius: 999px;

    background: #fff;

    box-shadow:
        0 8px 22px
        rgba(6, 21, 75, 0.04);
}

.product-view-quantity-btn {
    width: 42px;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;

    background: transparent;

    color: #06154B;

    font-size: 1.35rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        opacity 0.2s ease;
}

.product-view-quantity-btn:hover:not(:disabled) {
    background:
        rgba(6, 21, 75, 0.05);
}

.product-view-quantity-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.product-view-quantity-input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #06154B;

    text-align: center;

    font: inherit;
    font-size: 1rem;
    font-weight: 800;

    appearance: textfield;
    -moz-appearance: textfield;
}

.product-view-quantity-input::-webkit-inner-spin-button,
.product-view-quantity-input::-webkit-outer-spin-button {
    margin: 0;

    -webkit-appearance: none;
}


/* =========================================================
   Kosár
   ========================================================= */

.product-view-cart-btn {
    width: 100%;
    min-height: 64px;

    border: 0;
    border-radius: 999px;

    background: #06154B;
    color: #fff;

    font-size: 1.1rem;
    font-weight: 900;

    padding:
        1rem
        1.25rem;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.product-view-cart-btn:hover:not(:disabled) {
    background: #0b215f;

    transform:
        translateY(-1px);

    box-shadow:
        0 10px 26px
        rgba(6, 21, 75, 0.15);
}

.product-view-cart-btn:disabled {
    opacity: 0.45;

    cursor: not-allowed;
}


/* =========================================================
   Szolgáltatás infó
   ========================================================= */

.product-view-service-info {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    margin-top: 1rem;

    overflow: hidden;

    border:
        1px solid
        rgba(6, 21, 75, 0.09);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.72);

    box-shadow:
        0 10px 30px
        rgba(6, 21, 75, 0.035);
}

.product-view-service-item {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 0.7rem;

    padding:
        1rem
        0.9rem;
}

.product-view-service-item
+
.product-view-service-item {
    border-left:
        1px solid
        rgba(6, 21, 75, 0.08);
}

.product-view-service-icon {
    flex:
        0
        0
        50px;

    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(48, 187, 180, 0.1);

    color: #28a9a3;
}

.product-view-service-icon svg {
    width: 30px;
    height: 30px;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-view-service-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.product-view-service-content strong {
    color: #06154B;

    font-size: 0.82rem;
    line-height: 1.25;
    font-weight: 800;
}

.product-view-service-content > span {
    color:
        rgba(6, 21, 75, 0.58);

    font-size: 0.72rem;
    line-height: 1.3;
}


/* =========================================================
   Mobil
   ========================================================= */

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

    .product-view-price-row {
        gap: 0.75rem;
    }

    .product-view-favorite-btn {
        width: 50px;
        height: 50px;
    }


    .product-view-actions {
        grid-template-columns:
            124px
            minmax(0, 1fr);

        gap: 0.65rem;

        width: 100%;
    }

    .product-view-quantity,
    .product-view-cart-btn {
        min-height: 58px;
    }

    .product-view-quantity {
        grid-template-columns:
            36px
            minmax(0, 1fr)
            36px;
    }

    .product-view-quantity-btn {
        width: 36px;
    }

    .product-view-cart-btn {
        font-size: 1rem;

        padding:
            0.9rem
            1rem;
    }


    .product-view-service-info {
        grid-template-columns:
            minmax(0, 1fr);

        border-radius: 14px;
    }

    .product-view-service-item {
        padding:
            0.85rem
            1rem;
    }

    .product-view-service-item
    +
    .product-view-service-item {
        border-left: 0;

        border-top:
            1px solid
            rgba(6, 21, 75, 0.08);
    }
}

/* Régi cikkszám / vonalkód doboz fallback */
.product-view-codebox {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.product-view-codebox > div {
    background: rgba(6, 21, 75, 0.035);
    border: 1px solid rgba(6, 21, 75, 0.08);
    border-radius: 16px;
    padding: 0.8rem 1rem;
}

.product-view-codebox span {
    display: block;
    font-size: 0.76rem;
    font-weight: 900;
    color: #777;
    margin-bottom: 0.2rem;
}

.product-view-codebox strong {
    display: block;
    font-size: 0.9rem;
    color: #06154B;
    word-break: break-word;
}

/* Régi stock/small data fallback */
.product-view-stock {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.product-view-small-data {
    color: #666;
    font-size: 0.9rem;
}

/* Alsó szekciók */
.product-view-section {
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.product-view-section h2 {
    font-size: 1.35rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: #06154B;
}

.product-view-section-head {
    margin-bottom: 1rem;
}

.product-view-section-kicker {
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 900;
    color: #0e9f8f;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

/* Hatóanyagok */
.product-view-ingredients-section {
    background: rgba(255, 255, 255, 0.35);
}

.product-view-ingredient-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.product-view-ingredient-card {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, #24d6bf, #16b8aa);
    color: #06154B;
    border-radius: 999px;
    padding: 0.7rem 1rem;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(22, 184, 170, 0.16);
}

.product-view-ingredient-card span {
    font-weight: 900;
}

.product-view-ingredient-card strong {
    background: rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    font-size: 0.85rem;
    color: #06154B;
}

/* Régi ingredient fallback */
.product-view-ingredients {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.product-view-ingredient {
    display: inline-flex;
    border-radius: 999px;
    background: #f4f4f4;
    padding: 0.6rem 0.9rem;
    font-weight: 700;
    color: #333;
}

/* =========================================================
   Hatóanyag lista toggle
   ========================================================= */

.product-view-ingredients-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;

    min-height: 42px;

    padding: 0.55rem 0.9rem;

    border: 1.5px dashed rgba(22, 184, 170, 0.5);
    border-radius: 999px;

    background: rgba(36, 214, 191, 0.08);

    color: #08796e;

    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 900;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.product-view-ingredients-toggle:hover {
    background: rgba(36, 214, 191, 0.14);
    border-color: rgba(22, 184, 170, 0.8);
}

.product-view-ingredients-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 1.25rem;
    height: 1.25rem;

    border-radius: 50%;

    background: #16b8aa;
    color: #fff;

    font-size: 1rem;
    font-weight: 800;
    line-height: 1;

    transition:
        transform 0.25s ease;
}

.product-view-ingredients-toggle[aria-expanded="true"]
.product-view-ingredients-toggle-icon {
    transform: rotate(45deg);
}


/* =========================================================
   Mobil
   ========================================================= */

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

    .product-view-ingredient-grid {
        gap: 0.5rem;
    }

    .product-view-ingredient-card {
        gap: 0.4rem;

        padding: 0.5rem 0.72rem;

        font-size: 0.78rem;

        box-shadow:
            0 6px 15px
            rgba(22, 184, 170, 0.12);
    }

    .product-view-ingredient-card strong {
        padding: 0.18rem 0.42rem;

        font-size: 0.7rem;
    }

    .product-view-ingredients-toggle {
        display: inline-flex;
    }


    /*
     * Az első négy mindig látszik.
     */

    .product-view-ingredient-card:nth-of-type(n + 5) {
        display: none;
    }


    /*
     * Nyitott állapot.
     */

    .product-view-ingredient-grid.is-expanded
    .product-view-ingredient-card {
        display: inline-flex;
    }
}

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

    .product-view-section.product-view-ingredients-section {
        background: transparent;
        box-shadow: none;
    }

}

/* Richtext */
.product-view-richtext {
    color: #333;
    line-height: 1.7;
}

.product-view-richtext ul,
.product-view-richtext ol {
    margin-left: 1.25rem;
}

/* Tabs */
.product-tabs {
    width: 100%;
}

.product-tabs-nav {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.product-tab-btn {
    border: 1px solid #ddd;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    border-radius: 999px;
    padding: 0.6rem 1.2rem;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease;
}

.product-tab-btn:hover {
    border-color: #bbb;
    color: #06154B;
}

.product-tab-btn.is-active {
    background: #06154B;
    color: #fff;
    border-color: #06154B;
}

.product-tab-panel {
    display: none;
    animation: fadeIn 0.2s ease;
}

.product-tab-panel.is-active {
    display: block;
}

/* Tablet */
@media screen and (max-width: 1180px) {
    .product-view-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
        gap: 2rem;
    }

    .product-view-image-stage {
        min-height: 500px;
    }

    .product-view-main-image {
        max-height: 480px;
    }

    .product-view-title {
        font-size: clamp(2.2rem, 4vw, 3.4rem);
    }

    .product-view-facts {
        grid-template-columns: 1fr;
    }
}

/* Mobil */
@media screen and (max-width: 900px) {
    .product-view-page {
        padding-top: 0;
    }

    .product-view-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .product-view-gallery {
        background: #fff;
        border-radius: 18px;
        padding: 1.5rem 1rem;
    }

    .product-view-image-stage {
        min-height: 380px;
    }

    .product-view-main-image {
        max-height: 380px;
    }

    .product-view-info,
    .product-view-section {
        padding: 0rem;
    }

    .product-view-title {
        font-size: 2.35rem;
        line-height: 1.08;
    }

    .product-view-meta-line {
        gap: 0.5rem 1rem;
        margin-bottom: 1.5rem;
    }

    .product-view-price {
        font-size: 2.3rem;
    }

    .product-view-facts {
        grid-template-columns: 1fr;
    }

    .product-view-gallery-nav {
        width: 42px;
        height: 42px;
        font-size: 1.8rem;
    }

    .product-view-gallery-nav-prev {
        left: 0.75rem;
    }

    .product-view-gallery-nav-next {
        right: 0.75rem;
    }

    .product-view-codebox {
        grid-template-columns: 1fr;
    }
}

/* Kis mobil */
@media screen and (max-width: 480px) {
    .product-view-image-stage {
        min-height: 320px;
    }

    .product-view-main-image {
        max-height: 320px;
    }

    .product-view-title {
        font-size: 2rem;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   Products page – alapok
   ========================================================= */

.products-page {
    padding: 1rem;
}

.products-head {
    max-width: 760px;
    margin-bottom: 1.25rem;
}

.products-layout {
    display: grid;
    grid-template-columns:
        300px
        minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.products-content {
    min-width: 0;
}

/* =========================================================
   Fő termékkereső
   ========================================================= */

.products-main-search {
    width: 100%;
    margin-bottom: 2rem;
}

.products-main-search-inner {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 64px;
    padding: 0.4rem;
    border:
        2px solid
        rgba(6, 21, 75, 0.10);
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 12px 35px
        rgba(6, 21, 75, 0.07);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.products-main-search-inner:focus-within {
    border-color:
        rgba(14, 159, 143, 0.65);
    box-shadow:
        0 14px 38px
        rgba(6, 21, 75, 0.09),
        0 0 0 4px
        rgba(14, 159, 143, 0.08);
}

.products-main-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50px;
    color: #0e9f8f;
}

.products-main-search-input {
    width: 100%;
    min-width: 0;
    height: 52px;
    padding:
        0
        0.75rem
        0
        0.15rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: #06154b;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
}

.products-main-search-input::placeholder {
    color:
        rgba(6, 21, 75, 0.38);
    font-weight: 600;
}

.products-main-search-input::-webkit-search-cancel-button {
    cursor: pointer;
}

.products-main-search-btn {
    flex: 0 0 auto;
    min-height: 52px;
    padding:
        0
        1.65rem;
    border: 0;
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            #18b9a6,
            #0e9f8f
        );
    color: #ffffff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow:
        0 8px 20px
        rgba(14, 159, 143, 0.18);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}

.products-main-search-btn:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 10px 24px
        rgba(14, 159, 143, 0.24);
}

.products-main-search-btn:active {
    transform:
        translateY(0);
}

.products-main-search-btn:focus-visible {
    outline:
        3px solid
        rgba(14, 159, 143, 0.22);
    outline-offset: 2px;
}

/* =========================================================
   Mobil szűrőnyitó és overlay – desktopon rejtve
   ========================================================= */

.products-mobile-filter-btn,
.products-filter-close,
.products-filter-mobile-footer,
.products-filter-overlay {
    display: none;
}

.products-mobile-filter-count.is-hidden {
    display: none;
}

/* =========================================================
   Szűrőpanel
   ========================================================= */

.products-filter-panel {
    position: sticky;
    top: 1.5rem;
    padding: 1.25rem;
    border:
        1px solid
        rgba(6, 21, 75, 0.08);
    border-radius: 22px;
    background:
        rgba(255, 255, 255, 0.78);
    box-shadow:
        0 18px 45px
        rgba(6, 21, 75, 0.045);
}

.products-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    color: #06154b;
    font-size: 1.15rem;
}

.products-filter-head-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.products-filter-reset {
    padding: 0;
    border: 0;
    background: transparent;
    color: #0e9f8f;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.products-filter-reset:hover {
    color: #087e72;
}

.products-filter-group {
    margin-bottom: 1.15rem;
}

.products-filter-group:last-of-type {
    margin-bottom: 0;
}

.products-filter-label {
    display: block;
    margin-bottom: 0.45rem;
    color: #06154b;
    font-size: 0.85rem;
    font-weight: 900;
}

.products-filter-panel .select select {
    min-height: 46px;
    border-color:
        rgba(6, 21, 75, 0.12);
    border-radius: 14px;
    box-shadow: none;
    color: #06154b;
    font-weight: 700;
}

.products-filter-panel .select select:focus {
    border-color: #06154b;
    box-shadow:
        0 0 0 0.125em
        rgba(6, 21, 75, 0.08);
}

.products-filter-panel
.select.is-fullwidth,
.products-filter-panel
.select.is-fullwidth select {
    width: 100%;
}

.products-filter-panel
.select select:disabled {
    cursor: not-allowed;
    color:
        rgba(6, 21, 75, 0.52);
    background:
        rgba(6, 21, 75, 0.025);
    opacity: 1;
}

/* =========================================================
   Checkbox szűrők
   ========================================================= */

.products-check {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
    color: #06154b;
    font-weight: 800;
    line-height: 1.3;
    cursor: pointer;
}

.products-check:last-child {
    margin-bottom: 0;
}

.products-check input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: 0.08rem;
    accent-color: #06154b;
    cursor: pointer;
}

/* =========================================================
   Toolbar
   ========================================================= */

.products-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    border:
        1px solid
        rgba(6, 21, 75, 0.07);
    border-radius: 20px;
    background:
        rgba(255, 255, 255, 0.52);
}

.products-current-filter {
    margin-bottom: 0.1rem;
    color: #0e9f8f;
    font-size: 0.78rem;
    font-weight: 900;
}

.products-toolbar strong {
    color: #06154b;
    font-size: 1.1rem;
}

.products-toolbar-subtitle {
    margin-top: 0.15rem;
    color: #777;
    font-size: 0.9rem;
}

.products-toolbar .select select {
    min-height: 42px;
    border-color:
        rgba(6, 21, 75, 0.12);
    border-radius: 999px;
    color: #06154b;
    font-weight: 800;
}

/* =========================================================
   Termékrács
   ========================================================= */

.products-grid {
    display: grid;
    width: 100%;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(240px, 1fr)
        );
    gap: 1.25rem;
}

/* =========================================================
   Kereső – mobil
   ========================================================= */

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

    .products-head {
        margin-bottom: 1rem;
    }

    .products-main-search {
        margin-bottom: 1.25rem;
    }

    .products-main-search-inner {
        min-height: 58px;
        padding: 0.3rem;
        border-radius: 17px;
    }

    .products-main-search-icon {
        flex-basis: 42px;
    }

    .products-main-search-input {
        height: 48px;
        padding-right: 0.4rem;
        font-size: 0.95rem;
    }

    .products-main-search-btn {
        min-height: 48px;
        padding:
            0
            1rem;
        border-radius: 13px;
        font-size: 0.88rem;
    }
}

/* =========================================================
   Termékkártya
   ========================================================= */

.catalog-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;

    border:
        1px solid
        rgba(6, 21, 75, 0.035);

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 14px 34px
        rgba(6, 21, 75, 0.055);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.catalog-product-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 18px 42px
        rgba(6, 21, 75, 0.085);
}

.catalog-product-main-link {
    display: flex;
    flex: 1;
    flex-direction: column;

    color: inherit;
    text-decoration: none;
}


/* =========================================================
   Termékkép
   ========================================================= */

.catalog-product-image-wrap {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 329px;

    padding: 1rem;

    overflow: hidden;

    background: #fff;
}

.catalog-product-image {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    object-position: center;
}

.catalog-product-image.is-placeholder {
    width: 100%;
    height: 100%;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(6, 21, 75, 0.04),
            rgba(14, 159, 143, 0.08)
        );
}


/* =========================================================
   Termékkép badge stack
   ========================================================= */

.catalog-product-badge-stack {
    position: absolute;

    top: 0.85rem;
    left: 0.85rem;

    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 0.38rem;

    max-width:
        calc(
            100%
            - 1.7rem
        );

    pointer-events: none;
}


/* =========================================================
   Akció badge
   ========================================================= */

.catalog-product-sale-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    max-width: 100%;

    padding:
        0.34rem
        0.65rem;

    border-radius: 999px;

    background: #e82929;

    box-shadow:
        0 10px 22px
        rgba(232, 41, 41, 0.22);

    color: #fff;

    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.1;
}


/* =========================================================
   Kupon badge
   ========================================================= */

.catalog-product-coupon-badge {
    display: inline-flex;
    align-items: center;

    gap: 0.38rem;

    width: fit-content;
    max-width: 100%;

    padding:
        0.36rem
        0.68rem;

    border:
        1.5px dashed
        rgba(14, 159, 143, 0.82);

    border-radius:
        999px;

    background:
        rgba(
            239,
            252,
            249,
            0.97
        );

    box-shadow:
        0 10px 24px
        rgba(14, 159, 143, 0.14);

    color:
        #08796e;

    font-size:
        0.9rem;

    font-weight:
        950;

    line-height:
        1.1;

    letter-spacing:
        0.015em;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}

.catalog-product-coupon-badge-icon {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        1.2rem;

    height:
        1.2rem;

    flex:
        0 0
        1.2rem;

    border-radius:
        50%;

    background:
        #0e9f8f;

    color:
        #fff;

    font-size:
        0.67rem;

    font-weight:
        950;

    line-height:
        1;
}

.catalog-product-coupon-badge-text {
    display:
        block;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   Egészségpénztár badge
   ========================================================= */

.catalog-product-bundle-badge {
    display: inline-flex;
    align-items: center;

    gap: 0.4rem;

    width: fit-content;
    max-width: 100%;

    padding:
        0.34rem
        0.62rem;

    border:
        0px solid
        rgba(6, 21, 75, 0.14);

    border-radius: 999px;

    background: #B4DC59;

    box-shadow:
        0 8px 20px
        rgba(6, 21, 75, 0.12);

    color: #000;

    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;

    letter-spacing: 0.01em;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}

.catalog-product-ep-badge {
    display: inline-flex;
    align-items: center;

    gap: 0.4rem;

    width: fit-content;
    max-width: 100%;

    padding:
        0.34rem
        0.62rem;

    border:
        1px solid
        rgba(6, 21, 75, 0.14);

    border-radius: 999px;

    background: #5555CB;

    box-shadow:
        0 8px 20px
        rgba(6, 21, 75, 0.12);

    color: #fff;

    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;

    letter-spacing: 0.01em;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}

.catalog-product-ep-badge-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 1.55rem;
    height: 1.15rem;

    flex: 0 0 auto;

    padding:
        0
        0.2rem;


    color: #fff;

    font-size: 0.85rem;
    font-weight: 950;
    line-height: 1;

    letter-spacing: 0.04em;
}

.catalog-product-ep-badge-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   Kártyatartalom
   ========================================================= */

.catalog-product-content {
    display:
        flex;

    flex:
        1;

    flex-direction:
        column;

    padding:
        0.95rem
        1rem
        0.85rem;
}

.catalog-product-title {
    margin-bottom:
        0.35rem;

    color:
        #06154b;

    font-size:
        0.96rem;

    font-weight:
        900;

    line-height:
        1.28;
}

.catalog-product-meta {
    margin-bottom:
        0.6rem;

    color:
        #777;

    font-size:
        0.78rem;

    line-height:
        1.3;
}

.catalog-product-data {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.35rem;

    margin-bottom:
        0.65rem;
}


/* =========================================================
   Készlet és lejárat badge-ek
   ========================================================= */

.catalog-product-stock,
.catalog-product-expiry {
    display:
        inline-flex;

    align-items:
        center;

    padding:
        0.28rem
        0.55rem;

    border-radius:
        999px;

    font-size:
        0.7rem;

    font-weight:
        900;

    line-height:
        1.15;
}

.catalog-product-stock.is-in-stock {
    background:
        rgba(
            14,
            159,
            143,
            0.12
        );

    color:
        #0e9f8f;
}

.catalog-product-stock.is-backorder {
    background:
        rgba(
            224,
            157,
            34,
            0.13
        );

    color:
        #a56700;
}

.catalog-product-stock.is-out-stock {
    background:
        rgba(
            192,
            57,
            43,
            0.1
        );

    color:
        #c0392b;
}

.catalog-product-expiry {
    background:
        rgba(
            6,
            21,
            75,
            0.06
        );

    color:
        #06154b;
}


/* =========================================================
   Expiry sale információ
   ========================================================= */

.catalog-product-retailer-price {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        0.32rem;

    margin-bottom:
        0.55rem;

    color:
        #666;

    font-size:
        0.72rem;

    line-height:
        1.25;
}

.catalog-product-retailer-label {
    display:
        inline-flex;

    align-items:
        center;

    width:
        fit-content;

    padding:
        0.25rem
        0.5rem;

    border-radius:
        999px;

    background:
        rgba(
            14,
            159,
            143,
            0.08
        );

    color:
        #08796e;

    font-size:
        0.7rem;

    font-weight:
        900;
}

.catalog-product-retailer-base {
    color:
        #777;

    font-size:
        0.71rem;

    font-weight:
        700;
}


/* =========================================================
   Expiry rendelkezésre álló mennyiség
   ========================================================= */

.catalog-product-expiry-quantity {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.42rem;

    width:
        fit-content;

    margin-top:
        0.05rem;

    padding:
        0.3rem
        0.55rem;

    border:
        1px solid
        rgba(
            14,
            159,
            143,
            0.08
        );

    border-radius:
        999px;

    background:
        rgba(
            6,
            21,
            75,
            0.04
        );

    color:
        #46506f;

    font-size:
        0.7rem;

    font-weight:
        800;

    line-height:
        1.15;
}

.catalog-product-expiry-quantity-dot {
    width:
        0.4rem;

    height:
        0.4rem;

    flex:
        0 0
        0.4rem;

    border-radius:
        50%;

    background:
        #0e9f8f;

    box-shadow:
        0 0 0 3px
        rgba(
            14,
            159,
            143,
            0.1
        );
}

.catalog-product-expiry-date {
    color:
        #666;

    font-size:
        0.71rem;

    font-weight:
        700;
}


/* =========================================================
   Árblokk
   ========================================================= */

.catalog-product-original-price {
    min-height:
        1rem;

    margin-top:
        auto;

    margin-bottom:
        0.15rem;

    color:
        #888;

    font-size:
        0.78rem;

    font-weight:
        700;

    text-align:
        right;
}

.catalog-product-bottom-row {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        0.65rem;

    margin-top:
        0.15rem;
}

.catalog-product-package {
    color:
        #06154b;

    font-size:
        0.75rem;

    font-weight:
        900;
}

.catalog-product-price {
    color:
        #06154b;

    font-size:
        1.8rem;

    font-weight:
        950;

    white-space:
        nowrap;
}

.catalog-product-price.is-sale {
    color:
        #e82929;
}


/* =========================================================
   Kosárgomb
   ========================================================= */

.catalog-product-cart-btn {
    min-height:
        42px;

    margin:
        0
        1rem
        1rem;

    padding:
        0.65rem
        1rem;

    border:
        0;

    border-radius:
        999px;

    background:
        #06154b;

    color:
        #fff;

    font:
        inherit;

    font-weight:
        900;

    cursor:
        pointer;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease,
        background-color 180ms ease;
}

.catalog-product-cart-btn:hover:not(:disabled) {
    transform:
        translateY(-1px);

    box-shadow:
        0 12px 24px
        rgba(
            6,
            21,
            75,
            0.18
        );
}

.catalog-product-cart-btn:disabled,
.catalog-product-cart-btn.is-disabled {
    cursor:
        not-allowed;

    background:
        rgba(
            6,
            21,
            75,
            0.42
        );

    box-shadow:
        none;

    opacity:
        0.68;

    transform:
        none;
}

.catalog-product-cart-btn.is-loading {
    cursor:
        wait;

    opacity:
        0.75;
}


/* =========================================================
   Mobil finomhangolás
   ========================================================= */

@media (
    max-width: 768px
) {
    .catalog-product-badge-stack {
        top:
            0.65rem;

        left:
            0.65rem;

        gap:
            0.32rem;

        max-width:
            calc(
                100%
                - 1.3rem
            );
    }

    .catalog-product-sale-badge {
        padding:
            0.32rem
            0.58rem;

        font-size:
            0.7rem;
    }

    .catalog-product-coupon-badge {
        padding:
            0.32rem
            0.58rem;

        font-size:
            0.67rem;
    }

    .catalog-product-coupon-badge-icon {
        width:
            1.05rem;

        height:
            1.05rem;

        flex-basis:
            1.05rem;

        font-size:
            0.6rem;
    }

    .catalog-product-ep-badge {
        gap:
            0.32rem;

        padding:
            0.3rem
            0.54rem;

        font-size:
            0.66rem;
    }
}

@media (
    max-width: 768px
) {
    .catalog-product-image-wrap {
        height:
            239px;

        padding:
            0.5rem;
    }
}

/* =========================================================
   Üres lista
   ========================================================= */

.products-empty {
    grid-column: 1 / -1;
    padding: 2rem;
    border:
        1px dashed
        rgba(6, 21, 75, 0.16);
    border-radius: 22px;
    background:
        rgba(255, 255, 255, 0.72);
    color: #06154b;
    text-align: center;
}

.products-empty strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 1.25rem;
}

/* =========================================================
   Pagination
   ========================================================= */

.products-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;

    margin-top: 2rem;
}


/* =========================================================
   Load more
   ========================================================= */

.products-pagination
.products-pagination-load-more {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
}

.products-pagination
.products-load-more-btn {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.6rem;

    min-width: 220px;
    min-height: 48px;

    padding:
        0.75rem
        1.5rem;

    margin: 0;

    border: 0;
    border-radius: 999px;

    background:
        #06154b;

    color:
        #fff;

    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 800;

    line-height: 1;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    box-shadow:
        0 10px 24px
        rgba(6, 21, 75, 0.14);

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        opacity 160ms ease,
        background-color 160ms ease;
}

.products-pagination
.products-load-more-btn:hover:not(:disabled) {
    transform:
        translateY(-1px);

    background:
        #0a216f;

    box-shadow:
        0 14px 30px
        rgba(6, 21, 75, 0.2);
}

.products-pagination
.products-load-more-btn:active:not(:disabled) {
    transform:
        translateY(0);
}

.products-pagination
.products-load-more-btn:disabled {
    cursor: wait;

    opacity: 0.65;
}

.products-pagination
.products-load-more-btn span {
    display: block;

    line-height: 1.2;
}

.products-pagination
.products-load-more-btn svg {
    display: block;

    width: 18px !important;
    height: 18px !important;

    min-width: 18px;
    min-height: 18px;

    max-width: 18px;
    max-height: 18px;

    flex:
        0 0
        18px;

    stroke:
        currentColor;
}

/* =========================================================
   Controls
   ========================================================= */

.products-pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 1rem;
}


/* =========================================================
   Page numbers
   ========================================================= */

.products-pagination-pages {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.products-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 42px;
    height: 42px;

    padding: 0 0.65rem;

    border:
        1px solid
        rgba(6, 21, 75, 0.10);

    border-radius: 999px;

    background: #fff;
    color: #06154b;

    font: inherit;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 160ms ease,
        color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.products-page-btn:hover:not(:disabled) {
    transform: translateY(-1px);

    border-color:
        rgba(6, 21, 75, 0.22);
}

.products-page-btn.is-active {
    border-color: #06154b;

    background: #06154b;
    color: #fff;
}

.products-page-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.products-page-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 24px;

    color:
        rgba(6, 21, 75, 0.55);

    font-weight: 700;
}


/* =========================================================
   Jump
   ========================================================= */

.products-pagination-jump {
    display: flex;
    align-items: center;
    gap: 0.55rem;

    color:
        rgba(6, 21, 75, 0.72);

    font-size: 0.9rem;
    font-weight: 600;
}

.products-pagination
.products-pagination-jump select {
    appearance: none;
    -webkit-appearance: none;

    min-width: 115px;
    height: 42px;

    padding:
        0
        2.2rem
        0
        0.9rem;

    border:
        1px solid
        rgba(6, 21, 75, 0.12);

    border-radius: 999px;

    background-color:
        #fff;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #06154b 50%
        ),
        linear-gradient(
            135deg,
            #06154b 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 15px) 18px,
        calc(100% - 11px) 18px;

    background-size:
        4px 4px,
        4px 4px;

    background-repeat:
        no-repeat;

    color:
        #06154b;

    font-family:
        inherit;

    font-size:
        0.84rem;

    font-weight:
        800;

    cursor:
        pointer;

    outline: none;
}

.products-pagination-end {
    color:
        rgba(6, 21, 75, 0.55);

    font-size: 0.9rem;
    font-weight: 600;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 768px) {

    .products-pagination {
        gap: 1rem;
    }

    .products-load-more-btn {
        width: 100%;
    }

    .products-pagination-controls {
        width: 100%;

        flex-direction: column;
    }

    .products-pagination-pages {
        max-width: 100%;
    }

    .products-page-btn {
        min-width: 38px;
        height: 38px;

        padding: 0 0.55rem;
    }

    .products-pagination-jump {
        justify-content: center;
        width: 100%;
    }
}

.products-pagination-controls {
    display: grid;

    grid-template-columns:
        1fr
        auto;

    align-items: center;

    width: 100%;

    gap: 1rem;
}

.products-pagination-pages {
    justify-self: center;
}

.products-pagination-jump {
    justify-self: end;
}

@media (max-width: 768px) {

    .products-pagination-controls {
        display: flex;

        flex-direction: column;

        width: 100%;
    }

    .products-pagination-jump {
        justify-content: center;
    }
}

/* =========================================================
   Tablet és mobil – full-screen szűrő
   ========================================================= */

@media screen and (max-width: 1100px) {
    html.is-products-filter-open,
    body.is-products-filter-open {
        overflow: hidden;
    }

    .products-layout {
        display: block;
    }

    .products-mobile-filter-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
        width: 100%;
        min-height: 50px;
        margin-bottom: 1rem;
        padding: 0.75rem 1rem;
        border: 0;
        border-radius: 16px;
        background: #06154b;
        box-shadow:
            0 12px 28px
            rgba(6, 21, 75, 0.14);
        color: #fff;
        font: inherit;
        font-weight: 900;
        cursor: pointer;
    }

    .products-mobile-filter-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 24px;
        padding: 0 0.4rem;
        border-radius: 999px;
        background: #fff;
        color: #06154b;
        font-size: 0.75rem;
        font-weight: 950;
    }

    .products-filter-overlay {
        position: fixed;
        inset: 0;
        z-index: 9998;
        display: block;
        visibility: hidden;
        background:
            rgba(6, 21, 75, 0.36);
        opacity: 0;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        transition:
            opacity 180ms ease,
            visibility 180ms ease;
    }

    .products-filter-overlay.is-visible {
        visibility: visible;
        opacity: 1;
    }

    .products-filter-panel {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        visibility: hidden;
        flex-direction: column;
        width: 100%;
        max-width: none;
        height: 100dvh;
        padding:
            calc(
                1.25rem
                + env(safe-area-inset-top)
            )
            1.25rem
            calc(
                1rem
                + env(safe-area-inset-bottom)
            );
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 0;
        border-radius: 0;
        background: #fff;
        box-shadow: none;
        opacity: 0;
        transform: translateY(100%);
        transition:
            transform 220ms ease,
            opacity 180ms ease,
            visibility 220ms ease;
    }

    .products-filter-panel.is-mobile-open {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    .products-filter-head {
        position: sticky;
        top:
            calc(
                -1.25rem
                - env(safe-area-inset-top)
            );
        z-index: 5;
        margin:
            calc(
                -1.25rem
                - env(safe-area-inset-top)
            )
            -1.25rem
            1.4rem;
        padding:
            calc(
                1rem
                + env(safe-area-inset-top)
            )
            1.25rem
            1rem;
        border-bottom:
            1px solid
            rgba(6, 21, 75, 0.08);
        background:
            rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .products-filter-head strong {
        font-size: 1.25rem;
    }

    .products-filter-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background:
            rgba(6, 21, 75, 0.065);
        color: #06154b;
        font: inherit;
        font-size: 1.6rem;
        line-height: 1;
        cursor: pointer;
    }

    .products-filter-group {
        margin-bottom: 1.35rem;
    }

    .products-filter-label {
        margin-bottom: 0.55rem;
        font-size: 0.95rem;
    }

    .products-filter-input,
    .products-filter-panel
    .select select {
        min-height: 52px;
        border-radius: 15px;
        font-size: 1rem;
    }

    .products-check {
        min-height: 42px;
        margin-bottom: 0.65rem;
        font-size: 1rem;
    }

    .products-check input {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }

    .products-filter-mobile-footer {
        position: sticky;
        bottom:
            calc(
                -1rem
                - env(safe-area-inset-bottom)
            );
        z-index: 5;
        display: block;
        margin:
            auto
            -1.25rem
            calc(
                -1rem
                - env(safe-area-inset-bottom)
            );
        padding:
            1rem
            1.25rem
            calc(
                1rem
                + env(safe-area-inset-bottom)
            );
        border-top:
            1px solid
            rgba(6, 21, 75, 0.08);
        background:
            rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .products-filter-apply-btn {
        width: 100%;
        min-height: 50px;
        padding: 0.75rem 1rem;
        border: 0;
        border-radius: 999px;
        background: #06154b;
        color: #fff;
        font: inherit;
        font-weight: 900;
        cursor: pointer;
    }

    .products-grid {
        grid-template-columns:
            repeat(
                auto-fill,
                minmax(210px, 1fr)
            );
    }
}

/* =========================================================
   Mobil kártyák
   ========================================================= */

@media screen and (max-width: 700px) {
    .products-page {
        padding-bottom: 3rem;
    }

    .products-head {
        margin-bottom: 1.25rem !important;
    }

    .products-toolbar {
        align-items: stretch;
        flex-direction: column;
        padding: 0.9rem;
        border-radius: 16px;
    }

    .products-toolbar .select,
    .products-toolbar
    .select select {
        width: 100%;
    }

    .products-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
        gap:
            clamp(
                0.55rem,
                2vw,
                0.9rem
            );
    }

    .catalog-product-card {
        border-radius: 15px;
    }

    .catalog-product-card:hover {
        transform: none;
    }

    .catalog-product-image-wrap {
        padding: 0.75rem;
    }

    .catalog-product-sale-badge {
        top: 0.55rem;
        left: 0.55rem;
        padding: 0.25rem 0.48rem;
        font-size: 0.62rem;
    }

    .catalog-product-content {
        padding:
            0.7rem
            0.75rem
            0.65rem;
    }

    .catalog-product-title {
        font-size: 0.82rem;
        line-height: 1.23;
    }

    .catalog-product-meta {
        margin-bottom: 0.45rem;
        font-size: 0.68rem;
        line-height: 1.25;
    }

    .catalog-product-data {
        gap: 0.25rem;
        margin-bottom: 0.45rem;
    }

    .catalog-product-stock,
    .catalog-product-expiry {
        padding: 0.22rem 0.38rem;
        font-size: 0.58rem;
        line-height: 1.15;
    }

    .catalog-product-original-price {
        font-size: 0.68rem;
    }

    .catalog-product-package {
        font-size: 0.68rem;
    }

    .catalog-product-price {
        font-size: 1.2rem;
    }

    .catalog-product-cart-btn {
        min-height: 36px;
        margin:
            0
            0.75rem
            0.75rem;
        padding: 0.5rem 0.6rem;
        font-size: 0.76rem;
    }

    .products-pagination {
        gap: 0.35rem;
        margin-top: 1.5rem;
    }

    .products-page-btn,
    .products-page-dots {
        min-width: 38px;
        height: 38px;
    }
}

/* =========================================================
   Nagyon keskeny mobil
   ========================================================= */

@media screen and (max-width: 380px) {
    .products-grid {
        gap: 0.5rem;
    }

    .catalog-product-content {
        padding: 0.65rem;
    }

    .catalog-product-title {
        font-size: 0.76rem;
    }

    .catalog-product-meta {
        font-size: 0.64rem;
    }

    .catalog-product-stock,
    .catalog-product-expiry {
        font-size: 0.54rem;
    }

    .catalog-product-price {
        font-size: 0.84rem;
    }

    .catalog-product-package {
        font-size: 0.63rem;
    }

    .catalog-product-cart-btn {
        margin:
            0
            0.65rem
            0.65rem;
        font-size: 0.7rem;
    }
}

/* =========================================================
   Csökkentett animáció
   ========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {
    .catalog-product-card,
    .catalog-product-cart-btn,
    .products-page-btn,
    .products-filter-overlay,
    .products-filter-panel {
        transition: none;
    }
}

.offers-page {
    padding-bottom: 4rem;
}

.offers-hero {
    max-width: 820px;
}

.offers-kicker {
    color: #0e9f8f;
    font-weight: 900;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.offers-title {
    color: #06154B;
    font-family: "Instrument Serif", sans-serif;
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 0.65rem;
}

.offers-subtitle {
    color: #777;
    font-size: 1rem;
    max-width: 680px;
}

.offers-tabs-wrap {
    overflow-x: auto;
    scrollbar-width: none;
}

.offers-tabs-wrap::-webkit-scrollbar {
    display: none;
}

.offers-tabs {
    display: flex;
    gap: 0.65rem;
    min-width: max-content;
}

.offers-tab {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(6, 21, 75, 0.09);
    color: #06154B;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.offers-tab.is-active,
.offers-tab:hover {
    background: #06154B;
    border-color: #06154B;
    color: #fff;
}

.offers-manufacturer-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.offers-manufacturer-filter.is-hidden {
    display: none;
}

.offers-manufacturer-btn {
    min-height: 42px;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid rgba(6, 21, 75, 0.09);
    background: #fff;
    color: #06154B;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(6, 21, 75, 0.045);
    transition: 0.18s ease;
}

.offers-manufacturer-btn:hover,
.offers-manufacturer-btn.is-active {
    background: #06154B;
    border-color: #06154B;
    color: #fff;
}

.offers-content {
    min-width: 0;
}

.offers-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.25rem;
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid rgba(6, 21, 75, 0.07);
    border-radius: 20px;
    padding: 1rem 1.1rem;
}

.offers-current-filter {
    color: #0e9f8f;
    font-weight: 900;
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
}

.offers-toolbar strong {
    color: #06154B;
    font-size: 1.1rem;
}

.offers-toolbar-subtitle {
    color: #777;
    font-size: 0.9rem;
    margin-top: 0.15rem;
}

.offers-toolbar .select select {
    border-radius: 999px;
    border-color: rgba(6, 21, 75, 0.12);
    color: #06154B;
    font-weight: 800;
}

.offers-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.offer-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: 100%;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(6, 21, 75, 0.055);
}

.offer-product-main-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.offer-product-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.offer-product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.offer-product-image.is-placeholder {
    background: linear-gradient(135deg, rgba(6, 21, 75, 0.04), rgba(14, 159, 143, 0.08));
    border-radius: 14px;
}

.offer-product-sale-badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e82929;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    padding: 0.34rem 0.65rem;
    box-shadow: 0 10px 22px rgba(232, 41, 41, 0.22);
}

.offer-product-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0.95rem 1rem 0.85rem;
}

.offer-product-title {
    color: #06154B;
    font-weight: 900;
    font-size: 0.96rem;
    line-height: 1.28;
    margin-bottom: 0.35rem;
}

.offer-product-meta {
    color: #777;
    font-size: 0.78rem;
    line-height: 1.3;
    margin-bottom: 0.6rem;
}

.offer-product-data {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
}

.offer-product-stock,
.offer-product-period {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.28rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1;
}

.offer-product-stock.is-in-stock {
    background: rgba(14, 159, 143, 0.12);
    color: #0e9f8f;
}

.offer-product-stock.is-out-stock {
    background: rgba(192, 57, 43, 0.1);
    color: #c0392b;
}

.offer-product-period {
    background: rgba(6, 21, 75, 0.06);
    color: #06154B;
}

.offer-product-original-price {
    color: #888;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: right;
    min-height: 1rem;
    margin-top: auto;
    margin-bottom: 0.15rem;
}

.offer-product-bottom-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.65rem;
    margin-top: 0.15rem;
}

.offer-product-package {
    color: #06154B;
    font-size: 0.78rem;
    font-weight: 900;
}

.offer-product-price {
    color: #06154B;
    font-size: 1.08rem;
    font-weight: 950;
    white-space: nowrap;
}

.offer-product-price.is-sale {
    color: #e82929;
}

.offer-product-cart-btn {
    margin: 0 1rem 1rem;
    min-height: 42px;
    border: 0;
    border-radius: 999px;
    background: #06154B;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.offer-product-cart-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(6, 21, 75, 0.18);
}

.offer-product-cart-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.offer-product-cart-btn.is-loading {
    opacity: 0.75;
    cursor: wait;
}

.offers-empty {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, 0.72);
    border: 1px dashed rgba(6, 21, 75, 0.16);
    border-radius: 22px;
    padding: 2rem;
    color: #06154B;
    text-align: center;
}

.offers-empty strong {
    display: block;
    font-size: 1.25rem;
    margin-bottom: 0.35rem;
}

.offers-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.offers-page-btn,
.offers-page-dots {
    min-width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(6, 21, 75, 0.12);
    background: rgba(255, 255, 255, 0.78);
    color: #06154B;
    font-weight: 900;
}

.offers-page-btn {
    cursor: pointer;
    transition: 0.2s ease;
}

.offers-page-btn:hover,
.offers-page-btn.is-active {
    background: #06154B;
    color: #fff;
    border-color: #06154B;
}

.offers-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.offers-page-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
}

.offer-product-stock.is-backorder {
    background: rgba(224, 157, 34, 0.13);
    color: #a56700;
}

.offer-product-cart-btn:disabled,
.offer-product-cart-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.58;
    transform: none;
    box-shadow: none;
}

@media screen and (max-width: 1200px) {
    .offers-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 800px) {
    .offers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
    }

    .offers-manufacturer-filter {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.25rem;
        scrollbar-width: none;
    }

    .offers-manufacturer-filter::-webkit-scrollbar {
        display: none;
    }

    .offers-manufacturer-btn {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 0 0.8rem;
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 700px) {
    .offers-page {
        padding-bottom: 2rem;
    }

    .offers-hero {
        margin-bottom: 1.25rem !important;
    }

    .offers-title {
        font-size: 2rem;
    }

    .offers-subtitle {
        font-size: 0.92rem;
    }

    .offers-tabs {
        gap: 0.45rem;
    }

    .offers-tab {
        min-height: 36px;
        padding: 0 0.8rem;
        font-size: 0.82rem;
    }

    .offers-toolbar {
        flex-direction: column;
        align-items: stretch;
        padding: 0.8rem;
        border-radius: 16px;
        gap: 0.7rem;
        margin-bottom: 0.9rem;
    }

    .offers-current-filter {
        font-size: 0.78rem;
    }

    .offers-toolbar strong {
        font-size: 1rem;
    }

    .offers-toolbar-subtitle {
        font-size: 0.78rem;
    }

    .offers-toolbar .select,
    .offers-toolbar .select select {
        width: 100%;
        height: 38px;
        min-height: 38px;
        font-size: 0.85rem;
    }

    .offer-product-card {
        border-radius: 15px;
    }

    .offer-product-image-wrap {
        padding: 0.75rem;
    }

    .offer-product-sale-badge {
        top: 0.55rem;
        left: 0.55rem;
        font-size: 0.62rem;
        padding: 0.25rem 0.48rem;
    }

    .offer-product-content {
        padding: 0.7rem 0.75rem 0.65rem;
    }

    .offer-product-title {
        font-size: 0.82rem;
        line-height: 1.23;
    }

    .offer-product-meta {
        font-size: 0.68rem;
        line-height: 1.25;
        margin-bottom: 0.45rem;
    }

    .offer-product-data {
        gap: 0.25rem;
        margin-bottom: 0.45rem;
    }

    .offer-product-stock,
    .offer-product-period {
        font-size: 0.58rem;
        padding: 0.21rem 0.38rem;
    }

    .offer-product-original-price {
        font-size: 0.68rem;
    }

    .offer-product-package {
        font-size: 0.68rem;
    }

    .offer-product-price {
        font-size: 0.9rem;
    }

    .offer-product-cart-btn {
        margin: 0 0.75rem 0.75rem;
        min-height: 36px;
        font-size: 0.78rem;
    }

    .offers-pagination {
        margin-top: 1.25rem;
        gap: 0.35rem;
    }

    .offers-page-btn,
    .offers-page-dots {
        min-width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
}

@media screen and (max-width: 380px) {
    .offers-grid {
        gap: 0.5rem;
    }

    .offer-product-content {
        padding: 0.65rem;
    }

    .offer-product-title {
        font-size: 0.76rem;
    }

    .offer-product-price {
        font-size: 0.84rem;
    }

    .offer-product-cart-btn {
        margin: 0 0.65rem 0.65rem;
        font-size: 0.74rem;
    }
}

.offers-manufacturer-box {
    margin-bottom: 1.5rem;
    padding-top: 1rem;

    border-top: 1px solid #d7dce5;

    background: transparent;
}

.offers-manufacturer-filter {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.offers-manufacturer-btn {
    min-height: 42px;
    padding: 0 1rem;

    border: 0;
    border-radius: 999px;

    background: rgba(19, 181, 154, 0.12);
    color: #13b59a;

    font-weight: 800;
    cursor: pointer;

    transition: all .2s ease;
}

.offers-manufacturer-btn:hover {
    background: rgba(19, 181, 154, 0.18);
    color: #000;
}

.offers-manufacturer-btn.is-active {
    background: #13b59a;
    color: #fff;
}

.offers-manufacturer-title {
    margin-bottom: .75rem;

    font-size: .85rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;

    color: #13b59a;
}

.home-promo-wrap {
    position: relative;
}

.home-promo-row {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0.35rem 3.25rem;
    scrollbar-width: none;
}

.home-promo-row::-webkit-scrollbar {
    display: none;
}

.home-promo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.home-promo-row {
    flex: 1;
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    min-width: 0;
    padding: 0;
}

.home-promo-row::-webkit-scrollbar {
    display: none;
}

.home-promo-arrow {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    border: 0;
    border-radius: 999px;

    background: #06154B;
    color: #fff;

    font-size: 2rem;
    font-weight: 900;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition: opacity .2s ease;
}

.home-promo-arrow:not(.is-visible) {
    opacity: .35;
    pointer-events: none;
}

.home-category-btn {
    flex: 0 0 auto;
}

.home-category-btn[data-promo-modal]::after {
    content: "›";
    margin-left: 0.65rem;
    font-size: 1.15rem;
    font-weight: 900;
    opacity: 0.75;
}

/* Promó modal */
.is-promo-modal-open {
    overflow: hidden;
}

.promo-link-modal-card {
    width: min(520px, calc(100vw - 2rem));
    border-radius: 24px;
    overflow: hidden;
}

.promo-link-modal-body {
    position: relative;
    padding: 2rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
}

.promo-link-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(6, 21, 75, 0.12);
    border-radius: 999px;
    background: #fff;
    color: #06154B;
    font-size: 1.5rem;
    font-weight: 900;
    cursor: pointer;
}

.promo-link-modal-title {
    padding-right: 3rem;
    margin-bottom: 1.25rem;
    color: #06154B;
    font-family: var(--font-merri, inherit);
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.1;
}

.promo-link-modal-items {
    display: grid;
    gap: 0.65rem;
}

.promo-link-modal-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgba(6, 21, 75, 0.08);
    border-radius: 16px;
    background: rgba(6, 21, 75, 0.035);
    color: #06154B;
    padding: 0.9rem 1rem;
    font-weight: 900;
    transition: 0.2s ease;
}

.promo-link-modal-item:hover {
    background: #06154B;
    color: #fff;
}

.promo-link-modal-item strong {
    font-size: 1.35rem;
}

@media screen and (max-width: 700px) {
    .home-promo-row {
        padding: 0.35rem 2.75rem;
    }

    .home-promo-arrow {
        width: 42px;
        height: 42px;
        font-size: 1.7rem;
    }

    .promo-link-modal-body {
        padding: 1.5rem;
    }

    .promo-link-modal-title {
        font-size: 1.45rem;
    }
}



/* =========================================
   PROFILE TABS
========================================= */

.profile-tabs {
    margin-top: 2rem;
}

.profile-tab-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: .75rem;

    margin-bottom: 1.5rem;
}

.profile-tab-btn {
    flex: 0 0 auto;

    border: none;
    outline: none;

    cursor: pointer;

    padding: .85rem 1.25rem;

    border-radius: 999px;

    background: #fff;
    color: #1D255A;

    font-family: var(
        --font-roboto,
        sans-serif
    );

    font-size: .95rem;
    font-weight: 600;

    white-space: nowrap;

    transition:
        background-color .25s ease,
        color .25s ease,
        transform .25s ease;
}

.profile-tab-btn:hover {
    background: #E9EDF4;
}

.profile-tab-btn:focus-visible {
    outline: 2px solid #1D255A;
    outline-offset: 2px;
}

.profile-tab-btn.is-active {
    background: #1D255A;
    color: #fff;
}

.profile-tab-panels {
    position: relative;
}

.profile-tab-panel {
    display: none;
}

.profile-tab-panel.is-active {
    display: block;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    /*
     * Fontos:
     * mobilon NEM törjük több sorba.
     *
     * A teljes tab-sor oldalirányban
     * görgethető.
     */

    .profile-tab-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        align-items: center;

        width: 100%;

        gap: .65rem;

        margin-bottom: 1.25rem;

        overflow-x: auto;
        overflow-y: hidden;

        /*
         * iOS / mobil momentum scroll.
         */
        -webkit-overflow-scrolling: touch;

        /*
         * Görgetési viselkedés.
         */
        scroll-behavior: smooth;

        /*
         * Kellemesebb ujjas lapozás.
         */
        overscroll-behavior-x: contain;

        /*
         * Ne akarja böngésző automatikusan
         * más irányba rakni a sort.
         */
        scroll-snap-type: x proximity;

        /*
         * Firefox scrollbar elrejtése.
         */
        scrollbar-width: none;

        /*
         * A tab ne érjen teljesen a
         * kijelző jobb széléhez.
         */
        padding-right: 1rem;
    }

    /*
     * Chrome / Safari scrollbar elrejtése.
     */
    .profile-tab-nav::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .profile-tab-btn {
        /*
         * Mobilon a gombok megtartják
         * saját szélességüket.
         */
        flex:
            0
            0
            auto;

        width: auto;

        min-width: max-content;

        text-align: center;

        white-space: nowrap;

        padding: .8rem 1.15rem;

        /*
         * Ujjas húzás után kellemesen
         * tabhoz igazodhat.
         */
        scroll-snap-align: start;

        scroll-snap-stop: normal;
    }

    .profile-panel-card {
        padding: 1.25rem;
    }
}

/* =========================================
   PROFILE CARD
========================================= */

.profile-panel-card {
    background: #fff;

    border-radius: 18px;

    padding: 1.75rem;

    box-shadow:
        0 8px 24px rgba(0,0,0,.05);

    border: 1px solid #EEF1F6;
}

.profile-panel-title {
    margin: 0 0 .5rem;

    font-size: 1.4rem;
    font-weight: 700;

    color: #1D255A;
}

.profile-panel-description {
    color: #5E667A;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* =========================================
   ACCOUNT INFO
========================================= */

.profile-info-grid {
    display: grid;
    gap: 1rem;
}

.profile-info-item {
    padding: 1rem 1.25rem;

    border-radius: 12px;

    background: #F8F9FB;

    border: 1px solid #ECEFF4;
}

.profile-info-label {
    display: block;

    font-size: .8rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .04em;

    color: #8B93A7;

    margin-bottom: .35rem;
}

.profile-info-value {
    color: #1D255A;
    font-weight: 600;
}

/* =========================================
   ORDERS
========================================= */

.profile-order-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.profile-stat-card {
    flex: 1 1 220px;

    background: #F8F9FB;

    border: 1px solid #ECEFF4;
    border-radius: 14px;

    padding: 1rem;
}

.profile-stat-label {
    display: block;

    color: #8B93A7;
    font-size: .85rem;

    margin-bottom: .4rem;
}

.profile-stat-value {
    font-size: 1.5rem;
    font-weight: 700;

    color: #1D255A;
}

/* =========================================
   BUTTONS
========================================= */

.profile-panel-btn,
.profile-panel-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 0 1.25rem;

    border-radius: 12px;

    text-decoration: none;

    background: #1D255A;
    color: #fff;

    font-weight: 600;

    transition: .25s ease;
}

.profile-panel-btn:hover,
.profile-panel-link:hover {
    background: #12183D;
    color: #fff;
}

.profile-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.profile-hero-title {
    margin-bottom: .5rem;
}

.profile-hero-text {
    color: #4B5265;
}

.profile-hero-actions {
    flex: 0 0 auto;
    padding-top: .45rem;
}

.profile-empty-state {
    padding: 1.25rem;
    border-radius: 14px;
    background: #F8F9FB;
    border: 1px dashed #D9DEE8;
}

.profile-empty-title {
    font-weight: 700;
    color: #1D255A;
    margin-bottom: .35rem;
}

.profile-empty-text {
    color: #5E667A;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .profile-hero {
        flex-direction: column;
    }

    .profile-hero-actions {
        width: 100%;
        padding-top: 0;
    }

    .profile-hero-actions .button {
        width: 100%;
    }
}


/* ==========================
   CÍMKÁRTYÁK
========================== */

.profile-addresses-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-address-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;

    background: #fff;
    border: 1px solid #e8edf4;
    border-radius: 14px;

    padding: 1.25rem;

    transition: all .2s ease;
}

.profile-address-card:hover {
    border-color: #d7e1ec;
    box-shadow: 0 8px 24px rgba(0,0,0,.04);
}

.profile-address-main {
    flex: 1;
    min-width: 0;
}

.profile-address-title-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;

    margin-bottom: .5rem;
}

.profile-address-title {
    font-family: var(--font-merri, serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #183153;
    margin: 0;
}

.profile-address-badge {
    background: #F5EB29;
    color: #000;

    font-size: .75rem;
    font-weight: 700;

    padding: .3rem .7rem;
    border-radius: 999px;
}

.profile-address-name {
    font-weight: 600;
    color: #1f2937;

    margin-bottom: .5rem;
}

.profile-address-lines {
    color: #4b5563;
    line-height: 1.6;
}

.profile-address-lines p {
    margin: 0;
}

.profile-address-phone {
    margin-top: .75rem;

    color: #0d4b8f;
    font-weight: 600;
}

.profile-address-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex-shrink: 0;
}

.profile-address-action-btn {
    border: 1px solid #d7e1ec;
    background: #fff;

    border-radius: 10px;

    padding: .55rem 1rem;

    cursor: pointer;

    font-size: .9rem;
    font-weight: 600;

    transition: all .2s ease;
}

.profile-address-action-btn:hover {
    background: #f7f9fc;
}

.profile-address-action-btn.is-danger {
    border-color: #ffbcbc;
    color: #c62828;
}

.profile-address-action-btn.is-danger:hover {
    background: #fff2f2;
}

.profile-empty-state {
    padding: 2rem;
    text-align: center;

    border: 2px dashed #dbe4ee;
    border-radius: 14px;

    background: #fafbfd;
}

.profile-empty-title {
    font-weight: 700;
    color: #183153;
    margin-bottom: .5rem;
}

.profile-empty-text {
    color: #6b7280;
}

/* ==========================
   MOBIL
========================== */

@media (max-width: 768px) {

    .profile-address-card {
        flex-direction: column;
    }

    .profile-address-actions {
        width: 100%;
        flex-direction: row;
    }

    .profile-address-action-btn {
        flex: 1;
    }
}

.auth-container{
    max-width:460px;
    margin:0 auto;
}

.auth-card{
    background:#fff;
    border:1px solid #e9edf2;
    border-radius:20px;
    padding:30px;
    box-shadow:0 10px 35px rgba(0,0,0,.06);
}

@media (max-width: 768px) {
.auth-card{
    border-radius:16px;
    padding:15px;
  }
}

.auth-page-title{
    font-size:2rem;
    font-weight:700;
    color:#06154B;
    margin-bottom:.5rem;
}

.auth-subtitle{
    color:#000;
    margin-bottom:1.75rem;
    line-height:1.6;
}

.auth-form .input{
    height:48px;
    border-radius:12px;
    border:1px solid #d8dde5;
    box-shadow:none;
    transition:.2s;
}

.auth-form .input:focus{
    border-color:#0F4C81;
    box-shadow:0 0 0 3px rgba(15,76,129,.12);
}

.auth-submit-btn{
    height:48px;
    border:none;
    border-radius:12px;
    background:#06154B;
    color:#fff;
    font-weight:600;
    transition:.2s;
}

.auth-submit-btn:hover{
    background:#0b3a63;
    color:#fff;
}

.auth-divider{
    position:relative;
    text-align:center;
    margin:25px 0;
}

.auth-divider::before{
    content:'';
    position:absolute;
    top:50%;
    left:0;
    right:0;
    height:1px;
    background:#e5e7eb;
}

.auth-divider span{
    position:relative;
    background:#fff;
    padding:0 15px;
    color:#6b7280;
    font-size:.9rem;
}

/* =========================================================
   Google login button
   ========================================================= */

.google-auth-btn {
    position: relative;

    height: 48px;

    border-radius: 12px;
    border: 1px solid #06154B;

    background: #06154B;
    color: #fff;

    font-weight: 600;

    gap: 10px;

    flex-shrink: 0;

    overflow: hidden;

    transition:
        background 0.2s ease,
        opacity 0.2s ease;
}

.google-auth-btn:hover {
    background: #06154A;
}


/* =========================================================
   Google ikon
   ========================================================= */

.google-auth-icon {
    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-weight: 700;
    font-size: 0.85rem;

    flex-shrink: 0;

    transition:
        opacity 0.15s ease;
}

.google-auth-icon img {
    display: block;

    max-width: 100%;
    max-height: 100%;
}


/* =========================================================
   Google label
   ========================================================= */

.google-auth-label {
    transition:
        opacity 0.15s ease;
}


/* =========================================================
   Loading state
   ========================================================= */

.google-auth-btn.is-loading {
    pointer-events: none;

    cursor: wait;
}


/*
 * Loading közben az eredeti tartalom
 * megmarad a layoutban, csak láthatatlanná válik.
 *
 * Így a gomb szélessége sem ugrál.
 */
.google-auth-btn.is-loading
.google-auth-icon,
.google-auth-btn.is-loading
.google-auth-label {
    visibility: hidden;
}


/* =========================================================
   Spinner
   ========================================================= */

.google-auth-spinner {
    display: none;

    position: absolute;

    top: 50%;
    left: 50%;

    width: 20px;
    height: 20px;

    /*
     * Pontosan középre igazítjuk.
     *
     * Nem transformmal centrálunk,
     * mert ugyanazt a transform property-t
     * használja az animáció is.
     */
    margin-top: -10px;
    margin-left: -10px;

    border:
        2px solid
        rgba(255, 255, 255, 0.35);

    border-top-color: #fff;

    border-radius: 50%;

    pointer-events: none;

    animation:
        google-auth-spin
        0.7s
        linear
        infinite;
}


.google-auth-btn.is-loading
.google-auth-spinner {
    display: block;
}


/* =========================================================
   Spinner animáció
   ========================================================= */

@keyframes google-auth-spin {
    from {
        transform:
            rotate(
                0deg
            );
    }

    to {
        transform:
            rotate(
                360deg
            );
    }
}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {
    .google-auth-spinner {
        animation-duration:
            1.4s;
    }
}
.auth-bottom-text{
    text-align:center;
    margin-top:25px;
    color:#06154B;
}

.auth-bottom-text a{
    font-weight:600;
    color: #06154B;
} 

.auth-checkbox{
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    user-select:none;
}

.auth-checkbox input{
    display:none;
}

.auth-checkbox-custom{
    width:22px;
    height:22px;
    border:2px solid #06154B;
    border-radius:6px;
    background:#fff;
    transition:.2s;
    position:relative;
    flex-shrink:0;
}

.auth-checkbox-label{
    color:#374151;
    font-size:.95rem;
}

.auth-checkbox input:checked + .auth-checkbox-custom{
    background:#06154B;
    border-color:#06154B;
}

.auth-checkbox input:checked + .auth-checkbox-custom::after{
    content:'';
    position:absolute;
    left:6px;
    top:2px;
    width:5px;
    height:10px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.auth-checkbox:hover .auth-checkbox-custom{
    box-shadow:0 0 0 4px rgba(6,21,75,.08);
}

.auth-container-wide {
    max-width: 520px;
}

.auth-label-note {
    display: inline-block;
    margin-left: .35rem;
    color: #8a91a3;
    font-size: .85rem;
    font-weight: 500;
}

.auth-help-text {
    margin-top: .45rem;
    color: #7a8294;
    font-size: .85rem;
    line-height: 1.45;
}

.auth-checkbox-stack {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.cart-page {
    margin-top: 1rem;
}

.cart-page-head {
    margin-bottom: 2rem;
}

.cart-page-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #06154B;
    margin-bottom: .35rem;
}

.cart-page-subtitle {
    color: #6b7280;
    line-height: 1.6;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.5rem;
    align-items: start;
}

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* =========================================================
   Cart page – retailer price
   ========================================================= */

.cart-item-retailer-price {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.35rem;

    margin-bottom: 0.35rem;
}

.cart-item-retailer-base {
    display: inline-flex;
    align-items: center;

    padding: 0.22rem 0.45rem;

    border-radius: 999px;

    background: rgb(11 31 79 / 0.045);

    font-size: 0.76rem;
    line-height: 1.2;

    color: rgb(11 31 79 / 0.5);
}

.cart-item-retailer-base s {
    text-decoration-thickness: 1px;
}

.cart-item-retailer-label {
    display: inline-flex;
    align-items: center;

    padding: 0.22rem 0.48rem;

    border-radius: 999px;

    background: rgb(11 31 79 / 0.08);

    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;

    color: #0b1f4f;
}

.cart-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 150px 160px;
    gap: 1rem;
    align-items: center;

    background: #fff;
    border: 1px solid #e8edf4;
    border-radius: 18px;
    padding: 1rem;

    box-shadow: 0 8px 24px rgba(0,0,0,.035);
}

.cart-item-image-wrap {
    width: 96px;
    height: 96px;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .5rem;
}

.cart-item-main {
    min-width: 0;
}

.cart-item-title {
    display: inline-block;
    color: #06154B;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    line-height: 1.35;
}

.cart-item-title:hover {
    text-decoration: underline;
}

.cart-item-meta {
    color: #8a91a3;
    font-size: .9rem;
    margin-top: .35rem;
}

.cart-item-warning {
    color: #c62828;
    font-weight: 600;
    margin-top: .5rem;
    font-size: .9rem;
}

.cart-item-qty-label {
    display: block;
    font-size: .8rem;
    color: #8a91a3;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .4rem;
}

.cart-qty-box {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d8dde5;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.cart-qty-btn {
    width: 36px;
    height: 36px;
    border: 0;
    background: #f7f9fc;
    color: #06154B;
    font-weight: 700;
    cursor: pointer;
}

.cart-qty-value {
    min-width: 42px;
    text-align: center;
    font-weight: 700;
    color: #06154B;
}

.cart-item-price {
    text-align: right;
}

.cart-item-unit-price {
    display: block;
    color: #8a91a3;
    font-size: .85rem;
    margin-bottom: .35rem;
}

.cart-item-subtotal {
    display: block;
    color: #06154B;
    font-size: 1.15rem;
    font-weight: 800;
}

.cart-summary {
    position: sticky;
    top: 1rem;

    background: #fff;
    border: 1px solid #e8edf4;
    border-radius: 20px;
    padding: 1.4rem;

    box-shadow: 0 10px 35px rgba(0,0,0,.055);
}

.cart-summary-title {
    color: #06154B;
    font-weight: 800;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.cart-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: .85rem 0;
    border-bottom: 1px solid #edf1f6;

    color: #4b5563;
}

.cart-summary-row strong {
    color: #06154B;
}

.cart-summary-note {
    margin: 1rem 0;
    padding: .9rem;
    border-radius: 14px;
    background: #f7f9fc;
    color: #6b7280;
    font-size: .9rem;
    line-height: 1.5;
}

.cart-checkout-btn,
.cart-primary-link {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 0 1.2rem;

    border-radius: 13px;

    background: #06154B;
    color: #fff;

    font-weight: 700;
    text-decoration: none;

    transition: .2s ease;
}

.cart-checkout-btn:hover,
.cart-primary-link:hover {
    background: #0b216d;
    color: #fff;
}

.cart-secondary-link {
    display: block;
    margin-top: 1rem;
    text-align: center;
    color: #06154B;
    font-weight: 700;
    text-decoration: none;
}

.cart-secondary-link:hover {
    text-decoration: underline;
}

.cart-empty-card {
    max-width: 520px;
    margin: 2rem auto 0;
    text-align: center;

    background: #fff;
    border: 1px solid #e8edf4;
    border-radius: 22px;
    padding: 2rem;

    box-shadow: 0 10px 35px rgba(0,0,0,.055);
}

.cart-empty-title {
    color: #06154B;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: .5rem;
}

.cart-empty-text {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

@media (max-width: 980px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
    }

    .cart-item {
        grid-template-columns: 86px minmax(0, 1fr);
    }

    .cart-item-qty,
    .cart-item-price {
        grid-column: 2;
        text-align: left;
    }
}

@media (max-width: 560px) {
    .cart-item {
        grid-template-columns: 1fr;
    }

    .cart-item-image-wrap {
        width: 100%;
        height: 180px;
    }

    .cart-item-qty,
    .cart-item-price {
        grid-column: auto;
    }
}

.cart-item-health-fund {
    display: flex;
    align-items: center;

    gap: 0.38rem;

    width: fit-content;

    margin:
        0.38rem
        0
        0;

    color: #5555CB;

    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.3;
}

.cart-item-health-fund-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    color: #5555CB;

    font-size: 0.72rem;
    line-height: 1;
}

.checkout-product-health-fund {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;

    color: #168f82;

    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
}

.checkout-product-health-fund-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 1.15rem;
    height: 1.15rem;

    flex: 0 0 auto;

    border-radius: 50%;

    background: rgba(22, 143, 130, 0.1);

    font-size: 0.65rem;
    line-height: 1;
}

.cart-remove-btn {
    margin-top: .75rem;

    border: 1px solid #ffd1d1;
    background: #fff5f5;
    color: #c62828;

    border-radius: 10px;

    padding: .45rem .8rem;

    font-size: .85rem;
    font-weight: 700;

    cursor: pointer;
    transition: .2s ease;
}

.cart-remove-btn:hover {
    background: #ffe8e8;
    border-color: #ffb6b6;
}

.cart-remove-btn.is-loading {
    opacity: .65;
    pointer-events: none;
}

.checkout-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #06154B;
    margin-bottom: .35rem;
}

.checkout-subtitle {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 1.5rem;
    align-items: start;
}

.checkout-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-card,
.checkout-summary {
    background: #fff;
    border: 1px solid #e8edf4;
    border-radius: 20px;
    padding: 1.4rem;
    box-shadow: 0 10px 35px rgba(0,0,0,.045);
}

.checkout-card-title,
.checkout-summary-title {
    color: #06154B;
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.checkout-address-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.checkout-address-card {
    display: flex;
    gap: .9rem;
    cursor: pointer;
    border: 1px solid #e1e7f0;
    border-radius: 16px;
    padding: 1rem;
    transition: .2s ease;
}

.checkout-address-card:hover {
    border-color: #06154B;
}

.checkout-address-card input {
    display: none;
}

.checkout-address-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #06154B;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: .2rem;
    position: relative;
}

.checkout-address-card input:checked + .checkout-address-radio::after {
    content: '';
    position: absolute;
    inset: 4px;
    background: #06154B;
    border-radius: 50%;
}

.checkout-address-content {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    color: #4b5563;
}

.checkout-address-title-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #06154B;
}

.checkout-address-badge {
    background: #F5EB29;
    color: #000;
    border-radius: 999px;
    padding: .25rem .6rem;
    font-size: .75rem;
    font-weight: 800;
}

/* =========================================================
   Checkout – retailer price
   ========================================================= */

.checkout-product-retailer-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;

    margin-top: 0.3rem;
    margin-bottom: 0.25rem;
}

.checkout-product-retailer-base {
    display: inline-flex;
    align-items: center;

    padding: 0.22rem 0.45rem;

    border-radius: 999px;

    background: rgb(11 31 79 / 0.045);

    font-size: 0.76rem;
    line-height: 1.2;

    color: rgb(11 31 79 / 0.5);
}

.checkout-product-retailer-base s {
    text-decoration-thickness: 1px;
}

.checkout-product-retailer-label {
    display: inline-flex;
    align-items: center;

    padding: 0.22rem 0.48rem;

    border-radius: 999px;

    background: rgb(11 31 79 / 0.08);

    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;

    color: #0b1f4f;
}

.checkout-product-row,
.checkout-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid #edf1f6;
}

.checkout-product-row span {
    display: block;
    color: #8a91a3;
    margin-top: .25rem;
}

.checkout-summary {
    position: sticky;
    top: 1rem;
}

.checkout-summary-row.is-total {
    border-bottom: 0;
    font-size: 1.15rem;
    color: #06154B;
}

.checkout-submit-btn,
.checkout-primary-link {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 13px;
    background: #06154B;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-top: 1rem;
}

.checkout-submit-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.checkout-back-link {
    display: block;
    margin-top: 1rem;
    text-align: center;
    color: #06154B;
    font-weight: 700;
}

.checkout-empty-address {
    padding: 1.25rem;
    border: 1px dashed #d9e1ec;
    border-radius: 16px;
    background: #f8fafc;
}

.checkout-empty-title {
    font-weight: 800;
    color: #06154B;
    margin-bottom: .35rem;
}

.checkout-empty-text {
    color: #6b7280;
    line-height: 1.6;
}

@media (max-width: 980px) {
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        position: static;
    }
}

.checkout-login-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    background: #f8fafc;
    border: 1px solid #e1e7f0;
    border-radius: 18px;
    padding: 1.2rem;

    margin-bottom: 1.5rem;
}

.checkout-login-title {
    color: #06154B;
    font-weight: 800;
    margin-bottom: .25rem;
}

.checkout-login-text {
    color: #6b7280;
    line-height: 1.5;
}

.checkout-login-actions {
    display: flex;
    gap: .75rem;
    flex-shrink: 0;
}

.checkout-small-btn,
.checkout-small-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 1rem;

    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
}

.checkout-small-btn {
    background: #06154B;
    color: #fff;
}

.checkout-small-link {
    background: #fff;
    color: #06154B;
    border: 1px solid #d8dde5;
}

.checkout-section-help {
    color: #6b7280;
    margin-bottom: 1rem;
}

.checkout-manual-address-toggle {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-bottom: 1.25rem;
    color: #06154B;
    font-weight: 700;
    cursor: pointer;
}

.checkout-manual-address-form {
    margin-top: 1.25rem;
}

@media (max-width: 768px) {
    .checkout-login-hint {
        flex-direction: column;
        align-items: flex-start;
    }

    .checkout-login-actions {
        width: 100%;
    }

    .checkout-small-btn,
    .checkout-small-link {
        flex: 1;
    }
}

.checkout-manual-card {
    margin-top: 1rem;
    background: #fafbfd;
}

.checkout-manual-card:hover {
    border-color: #06154B;
    background: #f5f8ff;
}

.checkout-manual-card input:checked + .checkout-address-radio + .checkout-address-content {
    color: #06154B;
}

.checkout-manual-card input:checked ~ .checkout-address-content strong {
    color: #06154B;
}

.checkout-address-card input:checked ~ .checkout-address-content {
    color: #06154B;
}

.checkout-address-card input:checked {
    accent-color: #06154B;
}

.checkout-address-card:has(input:checked) {
    border-color: #06154B;
    background: #f8fbff;
    box-shadow: 0 0 0 2px rgba(6, 21, 75, .08);
}

.checkout-product-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding: 1rem 0;

    border-bottom: 1px solid #edf1f6;
}

.checkout-product-left {
    display: flex;
    align-items: center;
    gap: 1rem;

    min-width: 0;
}

.checkout-product-image {
    width: 64px;
    height: 64px;

    object-fit: cover;

    border-radius: 12px;

    border: 1px solid #e8edf4;

    flex-shrink: 0;
}

.checkout-product-info {
    display: flex;
    flex-direction: column;
    gap: .2rem;

    min-width: 0;
}

.checkout-product-name {
    color: #06154B;
    font-weight: 700;
}

.checkout-product-package {
    color: #6b7280;
    font-size: .9rem;
}

.checkout-product-quantity {
    color: #8a91a3;
    font-size: .85rem;
}

.checkout-product-subtotal {
    color: #06154B;
    font-weight: 800;
    white-space: nowrap;
}

.checkout-shipping-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.checkout-shipping-card {
    display: grid;
    grid-template-columns: 20px 70px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;

    cursor: pointer;

    border: 1px solid #e1e7f0;
    border-radius: 16px;

    padding: 1rem;

    transition: .2s ease;
}

.checkout-shipping-card:hover {
    border-color: #06154B;
    background: #f8fbff;
}

.checkout-shipping-card input {
    display: none;
}

.checkout-shipping-card:has(input:checked) {
    border-color: #06154B;
    background: #f8fbff;
    box-shadow: 0 0 0 2px rgba(6, 21, 75, .08);
}

.checkout-shipping-logo-wrap {
    width: 70px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;
    background: #fff;
    border: 1px solid #edf1f6;
}

.checkout-shipping-logo {
    max-width: 54px;
    max-height: 34px;
    object-fit: contain;
}

.checkout-shipping-content {
    display: flex;
    flex-direction: column;
    gap: .25rem;

    color: #6b7280;
    min-width: 0;
}

.checkout-shipping-title-row {
    display: flex;
    align-items: center;
    gap: .5rem;

    color: #06154B;
}

.checkout-shipping-price {
    color: #06154B;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .checkout-shipping-card {
        grid-template-columns: 20px 56px minmax(0, 1fr);
    }

    .checkout-shipping-price {
        grid-column: 3;
    }

    .checkout-shipping-logo-wrap {
        width: 56px;
    }
}

.checkout-address-card input:checked + .checkout-address-radio,
.checkout-shipping-card input:checked + .checkout-address-radio {
    border-color: #06154B;
}

.checkout-address-card input:checked + .checkout-address-radio::after,
.checkout-shipping-card input:checked + .checkout-address-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #06154B;
    transform: translate(-50%, -50%);
}

.order-success-page {
    max-width: 720px;
    margin: 2rem auto;
}

.order-success-card {
    background: #fff;
    border: 1px solid #e8edf4;
    border-radius: 24px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 14px 40px rgba(0,0,0,.06);
}

.order-success-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: #06154B;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 900;
}

.order-success-title {
    color: #06154B;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: .75rem;
}

.order-success-text {
    color: #6b7280;
    line-height: 1.6;
    max-width: 540px;
    margin: 0 auto 1.5rem;
}

.order-success-box {
    background: #f8fafc;
    border: 1px solid #e1e7f0;
    border-radius: 18px;
    padding: 1rem;
    text-align: left;
    margin-top: 1.5rem;
}

.order-success-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid #e6ebf2;
}

.order-success-row:last-child {
    border-bottom: 0;
}

.order-success-row span {
    color: #6b7280;
}

.order-success-row strong {
    color: #06154B;
    text-align: right;
}

.order-success-actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
    margin-top: 1.75rem;
}

.order-success-primary,
.order-success-secondary {
    min-height: 46px;
    padding: 0 1.2rem;
    border-radius: 13px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.order-success-primary {
    background: #06154B;
    color: #fff;
}

.order-success-secondary {
    background: #fff;
    color: #06154B;
    border: 1px solid #d8dde5;
}

@media (max-width: 560px) {
    .order-success-actions,
    .order-success-row {
        flex-direction: column;
    }

    .order-success-row strong {
        text-align: left;
    }
}

.foxpost-picker-modal-card {
    width: min(1100px, calc(100vw - 2rem));
}

.foxpost-picker-modal-body {
    padding: 0;
    height: min(760px, calc(100vh - 140px));
    overflow: hidden;
}

.foxpost-picker-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.checkout-pickup-box,
.checkout-shipping-info-box {
    margin-top: 1rem;
    padding: 1.1rem;
    border: 1px solid #dbe4f0;
    border-radius: 18px;
    background: #f8fbff;
}

.checkout-pickup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.checkout-pickup-title {
    color: #06154B;
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: .25rem;
}

.checkout-pickup-text,
#shippingInfoText,
#selectedPickupAddress {
    color: #4b5563;
    line-height: 1.5;
}

.checkout-pickup-btn,
.checkout-change-pickup-btn {
    border: 0;
    border-radius: 12px;
    background: #06154B;
    color: #fff;
    padding: .75rem 1rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.checkout-change-pickup-btn {
    margin-top: .85rem;
    background: #fff;
    color: #06154B;
    border: 1px solid #cbd5e1;
}

.checkout-selected-pickup {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #b7c6dd;
    border-radius: 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.checkout-selected-pickup-label,
.checkout-shipping-info-label {
    width: fit-content;
    border-radius: 999px;
    background: #F5EB29;
    color: #000;
    padding: .25rem .65rem;
    font-size: .75rem;
    font-weight: 900;
    margin-bottom: .35rem;
}

#selectedPickupName,
#shippingInfoTitle {
    color: #06154B;
    font-size: 1.05rem;
    font-weight: 800;
}

.checkout-shipping-info-box {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    background: #fff;
}

@media (max-width: 768px) {
    .checkout-pickup-head {
        flex-direction: column;
        align-items: stretch;
    }

    .checkout-pickup-btn,
    .checkout-change-pickup-btn {
        width: 100%;
    }
}

.checkout-payment-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.checkout-payment-card {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;

    border: 1px solid #e1e7f0;
    border-radius: 16px;
    padding: 1rem;

    cursor: pointer;
    transition: .2s ease;
}

.checkout-payment-card:hover {
    border-color: #06154B;
    background: #f8fbff;
}

.checkout-payment-card input {
    display: none;
}

.checkout-payment-card:has(input:checked) {
    border-color: #06154B;
    background: #f8fbff;
    box-shadow: 0 0 0 2px rgba(6, 21, 75, .08);
}

.checkout-payment-card input:checked + .checkout-address-radio {
    border-color: #06154B;
}

.checkout-payment-card input:checked + .checkout-address-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #06154B;
    transform: translate(-50%, -50%);
}

.checkout-payment-content {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.checkout-payment-content strong {
    color: #06154B;
    font-weight: 800;
}

.checkout-payment-content span {
    color: #6b7280;
    line-height: 1.45;
}

.checkout-payment-badge,
.checkout-payment-info-label {
    width: fit-content;
    border-radius: 999px;
    background: #F5EB29;
    color: #000;
    padding: .25rem .65rem;
    font-size: .75rem;
    font-weight: 900;
    white-space: nowrap;
}

.checkout-payment-info-box {
    margin-top: 1rem;
    padding: 1.1rem;
    border: 1px solid #dbe4f0;
    border-radius: 18px;
    background: #fff;

    display: flex;
    flex-direction: column;
    gap: .25rem;
}

#paymentInfoTitle {
    color: #06154B;
    font-size: 1.05rem;
    font-weight: 800;
}

#paymentInfoText {
    color: #4b5563;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .checkout-payment-card {
        grid-template-columns: 20px minmax(0, 1fr);
    }

    .checkout-payment-badge {
        grid-column: 2;
    }
}

.payment-failed-page {
    max-width: 720px;
    margin: 2rem auto;
}

.payment-failed-card {
    background: #fff;
    border: 1px solid #e8edf4;
    border-radius: 24px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 14px 40px rgba(0,0,0,.06);
}

.payment-failed-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 900;
}

.payment-failed-title {
    color: #06154B;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: .75rem;
}

.payment-failed-text {
    color: #6b7280;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 1.5rem;
}

.payment-failed-box {
    background: #f8fafc;
    border: 1px solid #e1e7f0;
    border-radius: 18px;
    padding: 1rem;
    text-align: left;
    margin-top: 1.5rem;
}

.payment-failed-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid #e6ebf2;
}

.payment-failed-row:last-child {
    border-bottom: 0;
}

.payment-failed-row span {
    color: #6b7280;
}

.payment-failed-row strong {
    color: #06154B;
    text-align: right;
}

.payment-failed-note {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 16px;
    background: #fff8db;
    border: 1px solid #f3d66b;
    color: #4b3b00;
    line-height: 1.5;
    text-align: left;
}

.payment-failed-actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
    margin-top: 1.75rem;
}

.payment-failed-primary,
.payment-failed-secondary {
    min-height: 46px;
    padding: 0 1.2rem;
    border-radius: 13px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.payment-failed-primary {
    background: #06154B;
    color: #fff;
}

.payment-failed-secondary {
    background: #fff;
    color: #06154B;
    border: 1px solid #d8dde5;
}

@media (max-width: 560px) {
    .payment-failed-actions,
    .payment-failed-row {
        flex-direction: column;
    }

    .payment-failed-row strong {
        text-align: left;
    }
}

.checkout-terms-box {
    margin-top: 1.25rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #e1e7f0;
    border-radius: 16px;
    background: #f8fafc;
}

.checkout-terms-checkbox {
    align-items: flex-start;
}

.checkout-terms-checkbox .auth-checkbox-custom {
    margin-top: .15rem;
    flex: 0 0 auto;
}

.checkout-terms-checkbox .auth-checkbox-label {
    font-size: .9rem;
    line-height: 1.45;
    color: #4b5563;
}

.checkout-terms-checkbox a {
    color: #06154B;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.checkout-error-box {
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #7f1d1d;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    line-height: 1.45;
}

.checkout-error-box strong {
    font-weight: 900;
    color: #7f1d1d;
}

.checkout-error-box span {
    color: #991b1b;
}

.checkout-error-box.is-hidden {
    display: none;
}

.checkout-payment-card.is-payment-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #f7f7f7;
}

.checkout-payment-card.is-payment-disabled * {
    cursor: not-allowed;
}

.checkout-payment-card.is-payment-disabled:hover {
    border-color: inherit;
    box-shadow: none;
}

/* =========================================================
   Checkout – hot weather warning
   ========================================================= */

.checkout-hot-weather-warning {
    display: flex;
    flex-direction: column;
    gap: 14px;

    margin-top: 18px;
    padding: 18px;

    border: 1px solid #eadf96;
    border-radius: 14px;

    background: #fffdf2;
}

.checkout-hot-weather-warning.is-hidden {
    display: none;
}

/* =========================================================
   Header
   ========================================================= */

.checkout-hot-weather-warning__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.checkout-hot-weather-warning__head > div {
    display: flex;
    flex-direction: column;
    gap: 3px;

    min-width: 0;
}

.checkout-hot-weather-warning__eyebrow {
    color: #8a7213;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;

    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.checkout-hot-weather-warning__title {
    color: #1d1d1d;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

/* =========================================================
   Temperature badge
   ========================================================= */

.checkout-hot-weather-warning__temperature {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 58px;
    min-height: 36px;

    padding: 7px 11px;

    border-radius: 999px;

    background: #f5eb29;

    color: #111111;

    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

/* =========================================================
   Warning text
   ========================================================= */

.checkout-hot-weather-warning__text {
    margin: 0;

    color: #59522f;

    font-size: 13px;
    line-height: 1.6;
}

/* =========================================================
   Status / loading
   ========================================================= */

.checkout-hot-weather-warning__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #766921;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.checkout-hot-weather-warning__status.is-hidden {
    display: none;
}

.checkout-hot-weather-warning__status::before {
    content: "";

    width: 13px;
    height: 13px;

    border: 2px solid
        rgb(118 105 33 / 0.25);

    border-top-color:
        #766921;

    border-radius: 50%;

    animation:
        checkout-hot-weather-spin
        700ms linear infinite;
}

@keyframes checkout-hot-weather-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   Acknowledgement
   ========================================================= */

.checkout-hot-weather-warning__accept {
    align-items: flex-start;

    margin-top: 2px;
    padding-top: 14px;

    border-top: 1px solid
        rgb(138 114 19 / 0.16);
}

.checkout-hot-weather-warning__accept
.auth-checkbox-label {
    color: #4d482f;

    font-size: 12px;
    line-height: 1.55;
}

/* =========================================================
   Active acknowledgement
   ========================================================= */

.checkout-hot-weather-warning__accept:has(
    input:checked
) .auth-checkbox-label {
    color: #222222;
}

/* =========================================================
   Loading state
   ========================================================= */

.checkout-hot-weather-warning.is-loading
.checkout-hot-weather-warning__temperature {
    opacity: 0.45;
}

.checkout-hot-weather-warning.is-loading
.checkout-hot-weather-warning__text,
.checkout-hot-weather-warning.is-loading
.checkout-hot-weather-warning__accept {
    opacity: 0.55;
}

/* =========================================================
   Mobile
   ========================================================= */

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

    .checkout-hot-weather-warning {
        padding: 16px;
    }

    .checkout-hot-weather-warning__head {
        gap: 12px;
    }

    .checkout-hot-weather-warning__title {
        font-size: 15px;
    }

    .checkout-hot-weather-warning__temperature {
        min-width: 54px;
        min-height: 34px;

        padding: 6px 10px;

        font-size: 13px;
    }

}

/* =========================
   PROFILE ORDERS
========================= */

.profile-orders-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-order-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    transition: 0.2s ease;
}

.profile-order-card:hover {
    border-color: #dcdcdc;
}

.profile-order-main {
    flex: 1;
}

.profile-order-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.profile-order-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.profile-order-date {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: #777;
}

.profile-order-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 1rem;
}

.profile-order-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.profile-order-item span {
    font-size: 0.8rem;
    color: #777;
}

.profile-order-item strong {
    font-size: 0.95rem;
    color: #111;
    font-weight: 600;
}

.profile-order-actions {
    display: flex;
    align-items: center;
}

.profile-order-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 42px;
    padding: 0 1rem;
    border-radius: 10px;
    background: #00145e;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s ease;
}

.profile-order-link:hover {
    background: #00208f;
    color: #fff;
}

.profile-order-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Státusz színek */

.profile-order-status.is-success {
    background: #effaf3;
    color: #257942;
}

.profile-order-status.is-warning {
    background: #fff8e5;
    color: #946200;
}

.profile-order-status.is-danger {
    background: #fff0f0;
    color: #c13232;
}

.profile-order-status.is-muted {
    background: #f5f5f5;
    color: #666;
}

/* =========================
   MOBILE
========================= */

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

    .profile-order-card {
        flex-direction: column;
    }

    .profile-order-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-order-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-order-actions {
        width: 100%;
    }

    .profile-order-link {
        width: 100%;
    }
}

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

    .profile-order-grid {
        grid-template-columns: 1fr;
    }
}

.order-page {
    max-width: 1100px;
    margin: 0 auto;
}

.order-header-card {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1.5rem;
    border: 1px solid #e5eaf3;
    border-radius: 22px;
    background: #fff;
}

.order-number-label {
    font-size: .9rem;
    color: #6b7280;
    margin-bottom: .25rem;
}

.order-number {
    font-family: Merriweather, serif;
    font-size: 2rem;
    color: #06154B;
    margin: 0;
}

.order-status-badge {
    padding: .55rem .9rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 800;
    white-space: nowrap;
}

.order-status-badge.is-success { background: #ecfdf3; color: #166534; }
.order-status-badge.is-warning { background: #fff7ed; color: #9a3412; }
.order-status-badge.is-danger { background: #fff1f2; color: #9f1239; }
.order-status-badge.is-muted { background: #f3f4f6; color: #4b5563; }

.order-info-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid #edf1f7;
}

.order-info-row span {
    color: #6b7280;
}

.order-info-row strong {
    color: #06154B;
    text-align: right;
}

.order-info-row.is-total strong {
    font-size: 1.25rem;
}

.order-items-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.order-item-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #edf1f7;
    border-radius: 16px;
    background: #f9fafb;
}

.order-item-row strong {
    color: #06154B;
}

.order-item-row span {
    display: block;
    color: #6b7280;
    font-size: .9rem;
}

.order-item-price {
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .order-header-card,
    .order-item-row,
    .order-info-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .order-info-row strong,
    .order-item-price {
        text-align: left;
    }

    .order-number {
        font-size: 1.45rem;
    }
}

.profile-billing-fields {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #edf1f7;
}

.profile-subsection-title {
    margin-bottom: 1rem;
    font-size: 1.05rem;
    font-weight: 900;
    color: #06154B;
}

.payment-processing-page{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:60vh;
}

.payment-processing-card{
    width:100%;
    max-width:620px;
    background:#fff;
    border:1px solid #f0f0f0;
    border-radius:18px;
    padding:2rem;
    text-align:center;
}

.payment-processing-loader{
    width:70px;
    height:70px;
    margin:0 auto 1.5rem;
    border:5px solid #f0f0f0;
    border-top:5px solid #000;
    border-radius:50%;
    animation:paymentSpin .9s linear infinite;
}

@keyframes paymentSpin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

.payment-processing-title{
    font-size:2rem;
    font-weight:700;
    color:#000;
    margin-bottom:1rem;
}

.payment-processing-text{
    font-size:1rem;
    color:#333;
    line-height:1.7;
    margin-bottom:1rem;
}

.payment-processing-small{
    font-size:.9rem;
    color:#777;
    margin-bottom:1.5rem;
}

.payment-processing-message{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.85rem 1.25rem;
    background:#f9f9f9;
    border:1px solid #ececec;
    border-radius:999px;
    font-weight:600;
    color:#000;
}

.payment-processing-actions{
    margin-top:2rem;
    display:flex;
    justify-content:center;
    gap:1rem;
    flex-wrap:wrap;
}

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

    .payment-processing-card{
        padding:1.5rem;
        border-radius:14px;
    }

    .payment-processing-title{
        font-size:1.6rem;
    }

    .payment-processing-actions{
        flex-direction:column;
    }

    .payment-processing-actions a{
        width:100%;
    }
}

.payment-processing-message::before{
    content:'';
    width:10px;
    height:10px;
    border-radius:50%;
    background:#F5EB29;
    animation:pulseDot 1.5s infinite;
}

@keyframes pulseDot{
    0%{
        transform:scale(1);
        opacity:1;
    }
    50%{
        transform:scale(1.4);
        opacity:.5;
    }
    100%{
        transform:scale(1);
        opacity:1;
    }
}

/* =========================
   CART DRAWER OVERLAY
========================= */

.cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: all .25s ease;
    z-index: 9998;
}

.cart-drawer-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* =========================
   DRAWER
========================= */

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 440px;
    max-width: 100%;
    height: 100vh;
    background: #fff;
    box-shadow: -10px 0 40px rgba(0,0,0,.15);
    transform: translateX(100%);
    transition: transform .35s ease;
    z-index: 9999;
    overflow: hidden;
}

.cart-drawer.is-visible {
    transform: translateX(0);
}

.cart-drawer-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* =========================================================
   Cart drawer – retailer price
   ========================================================= */

.cart-drawer-retailer-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;

    margin-top: 0.35rem;
    margin-bottom: 0.25rem;
}

.cart-drawer-retailer-base {
    display: inline-flex;
    align-items: center;

    padding: 0.22rem 0.45rem;

    border-radius: 999px;

    background: rgb(11 31 79 / 0.045);

    font-size: 0.76rem;
    line-height: 1.2;

    color: rgb(11 31 79 / 0.5);
}

.cart-drawer-retailer-base s {
    text-decoration-thickness: 1px;
}

.cart-drawer-retailer-label {
    display: inline-flex;
    align-items: center;

    padding: 0.22rem 0.48rem;

    border-radius: 999px;

    background: rgb(11 31 79 / 0.08);

    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;

    color: #0b1f4f;
}

/* =========================
   HEADER
========================= */

.cart-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid #ececec;
}

.cart-drawer-kicker {
    margin: 0;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #7a7a7a;
}

.cart-drawer-header h2 {
    margin: 4px 0 0;
    color: #071957;
    font-size: 1.5rem;
    font-weight: 700;
}

.cart-drawer-close {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    color: #071957;
}

/* =========================
   PRODUCTS
========================= */

.cart-drawer-products {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.cart-drawer-product {
    display: flex;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f1f1f1;
}

.cart-drawer-product-image-wrap {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    border-radius: 14px;
    background: #f8f8f8;
    overflow: hidden;
}

.cart-drawer-product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cart-drawer-product-body {
    flex: 1;
}

.cart-drawer-product-name {
    margin: 0 0 6px;
    font-weight: 700;
    color: #071957;
    line-height: 1.3;
}

.cart-drawer-product-sku {
    margin: 0 0 10px;
    font-size: .85rem;
    color: #777;
}

.cart-drawer-product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: .95rem;
}

.cart-drawer-product-meta strong {
    color: #071957;
}

/* =========================
   SUMMARY
========================= */

.cart-drawer-summary {
    padding: 24px;
    border-top: 1px solid #ececec;
    background: #fff;
}

.cart-drawer-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    font-size: 1.05rem;
}

.cart-drawer-summary-row strong {
    color: #071957;
    font-size: 1.2rem;
}

/* =========================
   BUTTONS
========================= */

.cart-drawer-primary-btn,
.cart-drawer-secondary-btn {
    display: block;
    width: 100%;
    text-align: center;
    border-radius: 999px;
    padding: 14px 18px;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s ease;
    cursor: pointer;
}

.cart-drawer-primary-btn {
    background: #071957;
    color: #fff;
    border: none;
}

.cart-drawer-primary-btn:hover {
    background: #10246d;
    color: #fff;
}

.cart-drawer-secondary-btn {
    margin-top: 12px;
    background: #fff;
    color: #071957;
    border: 1px solid #d9d9d9;
}

.cart-drawer-secondary-btn:hover {
    background: #f7f7f7;
}

/* =========================
   EMPTY CART
========================= */

.cart-drawer-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 24px;
    text-align: center;
}

.cart-drawer-empty-title {
    margin: 0 0 10px;
    color: #071957;
    font-size: 1.3rem;
    font-weight: 700;
}

.cart-drawer-empty-text {
    margin: 0 0 24px;
    color: #666;
}

/* =========================
   SUCCESS / ERROR MESSAGE
========================= */

.cart-drawer-message {
    margin: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 600;
}

.cart-drawer-message.is-success {
    background: #ecfdf3;
    color: #0f7a41;
    border: 1px solid #b7efcf;
}

.cart-drawer-message.is-error {
    background: #fef2f2;
    color: #b42318;
    border: 1px solid #f6c7c7;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    .cart-drawer {
        width: 100%;
    }

    .cart-drawer-header {
        padding: 18px;
    }

    .cart-drawer-products {
        padding: 16px;
    }

    .cart-drawer-summary {
        padding: 18px;
    }
}

.cart-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .24s ease, visibility .24s ease;
}

.cart-confirm-modal.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.cart-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .42);
    backdrop-filter: blur(3px);
}

.cart-confirm-box {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    border-radius: 24px;
    background: #fff;
    padding: 28px;
    box-shadow: 0 24px 70px rgba(7, 25, 87, .24);
    transform: translateY(18px) scale(.98);
    transition: transform .24s ease;
}

.cart-confirm-modal.is-visible .cart-confirm-box {
    transform: translateY(0) scale(1);
}

.cart-confirm-kicker {
    margin: 0 0 8px;
    color: #68708a;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.cart-confirm-title {
    margin: 0 0 10px;
    color: #071957;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
}

.cart-confirm-text {
    margin: 0 0 22px;
    color: #586078;
    line-height: 1.55;
}

.cart-confirm-actions {
    display: flex;
    gap: 12px;
}

.cart-confirm-secondary,
.cart-confirm-danger {
    flex: 1;
    border: 0;
    border-radius: 999px;
    padding: 13px 18px;
    font-weight: 800;
    cursor: pointer;
}

.cart-confirm-secondary {
    background: #f3f5fa;
    color: #071957;
}

.cart-confirm-danger {
    background: #d92d20;
    color: #fff;
}

.cart-confirm-secondary:hover {
    background: #e9edf6;
}

.cart-confirm-danger:hover {
    background: #b42318;
}

@media (max-width: 520px) {
    .cart-confirm-box {
        padding: 22px;
        border-radius: 20px;
    }

    .cart-confirm-actions {
        flex-direction: column-reverse;
    }
}

.checkout-coupon-box {
    margin: 18px 0;
    padding: 16px;
    border: 1px solid #e4e8f0;
    border-radius: 18px;
    background: #f8f9fd;
}

.checkout-coupon-label {
    display: block;
    margin-bottom: 8px;
    color: #071957;
    font-weight: 800;
}

.checkout-coupon-row {
    display: flex;
    gap: 8px;
}

.checkout-coupon-input {
    border-radius: 999px;
}

.checkout-coupon-btn {
    border: 0;
    border-radius: 999px;
    padding: 0 16px;
    background: #071957;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.checkout-coupon-btn:hover {
    background: #10246d;
}

.checkout-coupon-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.checkout-coupon-message {
    margin-top: 10px;
    font-size: .9rem;
    font-weight: 700;
}

.checkout-coupon-message.is-success {
    color: #0f7a41;
}

.checkout-coupon-message.is-error {
    color: #b42318;
}

.checkout-coupon-login-hint {
    margin-top: 8px;

    color: #7b8492;

    font-size: 12px;
    line-height: 1.5;
}

.checkout-coupon-login-hint a {
    color: #09245f;

    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.checkout-coupon-input:disabled,
.checkout-coupon-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (max-width: 520px) {
    .checkout-coupon-row {
        flex-direction: column;
    }

    .checkout-coupon-btn {
        min-height: 42px;
    }
}

/* =========================
   Profile coupons
   ========================= */

.profile-coupons-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
}

.profile-coupon-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1.35rem 1.4rem;
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 22px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.055);
    overflow: hidden;
}

.profile-coupon-card::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    right: -18px;
    width: 36px;
    height: 36px;
    background: #f6f8fc;
    border: 1px solid #e8edf5;
    border-radius: 999px;
}

.profile-coupon-card::after {
    content: "";
    position: absolute;
    bottom: 1.25rem;
    right: -18px;
    width: 36px;
    height: 36px;
    background: #f6f8fc;
    border: 1px solid #e8edf5;
    border-radius: 999px;
}

.profile-coupon-main {
    position: relative;
    z-index: 1;
}

.profile-coupon-card .profile-address-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.profile-coupon-card .profile-address-title {
    margin: 0;
    color: #16204b;
    font-family: Merriweather, serif;
    font-size: 1.15rem;
    line-height: 1.35;
}

.profile-coupon-card .tag {
    height: auto;
    min-height: 2rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-family: Roboto, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.profile-coupon-card .tag.is-success {
    background: #d9f8e8;
    color: #057344;
}

.profile-coupon-card .tag.is-danger {
    background: #ffe1e9;
    color: #c91f4a;
}

.profile-coupon-card .tag.is-warning {
    background: #fff3c4;
    color: #7a5800;
}

.profile-coupon-card .tag.is-dark {
    background: #1b2457;
    color: #fff;
}

.profile-coupon-code-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}

.profile-coupon-code {
    display: inline-flex;
    align-items: center;
    min-height: 2.55rem;
    padding: 0.55rem 0.8rem;
    background: #f7f8fb;
    border: 1px dashed #cfd7e6;
    border-radius: 12px;
    color: #df1741;
    font-family: "Roboto Mono", monospace;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.profile-coupon-code-row .profile-address-action-btn {
    min-height: 2.55rem;
    padding: 0.55rem 1rem;
    background: #fff;
    border: 1px solid #d9e2ef;
    border-radius: 12px;
    color: #263047;
    font-family: Roboto, sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.profile-coupon-code-row .profile-address-action-btn:hover {
    background: #f7f9fd;
    border-color: #bfccde;
    transform: translateY(-1px);
}

.profile-coupon-discount {
    margin-bottom: 0.65rem;
    color: #101833;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.2;
}

.profile-coupon-card .profile-address-lines {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: #4d576a;
    font-family: Roboto, sans-serif;
    font-size: 0.97rem;
    line-height: 1.5;
}

.profile-coupon-card .profile-address-lines p {
    margin: 0;
}

.profile-coupon-card .profile-address-lines strong {
    color: #263047;
    font-weight: 900;
}

.profile-coupon-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-top: 0.8rem;
    margin-top: 1rem;
    border-top: 1px solid #eef2f8;
}

.profile-coupon-card .profile-address-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0.35rem 0.7rem;
    background: #fff12d;
    border-radius: 999px;
    color: #111;
    font-family: Roboto, sans-serif;
    font-size: 0.8rem;
    font-weight: 900;
}

/* Used / expired look */
.profile-coupon-card:has(.tag.is-danger),
.profile-coupon-card:has(.tag.is-dark) {
    opacity: 0.78;
}

.profile-coupon-card:has(.tag.is-danger) .profile-coupon-code,
.profile-coupon-card:has(.tag.is-dark) .profile-coupon-code {
    color: #8b93a6;
}

/* Mobile */
@media (max-width: 900px) {
    .profile-coupons-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .profile-coupon-card {
        padding: 1.1rem;
        border-radius: 18px;
    }

    .profile-coupon-card .profile-address-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.55rem;
    }

    .profile-coupon-discount {
        font-size: 1.18rem;
    }

    .profile-coupon-code-row {
        align-items: stretch;
    }

    .profile-coupon-code,
    .profile-coupon-code-row .profile-address-action-btn {
        width: 100%;
        justify-content: center;
    }
}

.home-banner-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 22px;
}

.home-banner-track {
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 500;
  background: #f5f5f5;
}

.home-banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.01);
  pointer-events: none;
  transition: opacity 260ms ease, transform 360ms ease;
}

.home-banner-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.home-banner-link,
.home-banner-slide picture,
.home-banner-slide img {
  display: block;
  width: 100%;
  height: 100%;
}

.home-banner-slide img {
  object-fit: cover;
}

.home-banner-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}

.home-banner-dots button {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  cursor: pointer;
}

.home-banner-dots button.is-active {
  width: 24px;
  background: #fff;
}

@media (max-width: 768px) {
  .home-banner-slider {
    border-radius: 16px;
  }

  .home-banner-track {
    aspect-ratio: 900 / 520;
  }
}

.home-banner-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #06154a;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  transform: translateY(-50%);
  transition: opacity 180ms ease, background 180ms ease, transform 180ms ease;
}

.home-banner-arrow:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-50%) scale(1.04);
}

.home-banner-arrow.is-prev {
  left: 16px;
}

.home-banner-arrow.is-next {
  right: 16px;
}

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

    .home-banner-slider {
        border-radius: 0;
    }

    .home-banner-track {
        aspect-ratio: 900 / 520;
        overflow: hidden;
        background: #f5f5f5;
    }

    .home-banner-slide {
        overflow: hidden;
    }

    .home-banner-slide img {
        width: 145%;
        max-width: none;
        height: 100%;

        object-fit: cover;
        object-position: center;

        transform: translateX(0);
        will-change: transform;
    }

    .home-banner-slide.is-active
    img.is-banner-panning {
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
    }

    .home-banner-slide.is-active.is-pan-left-to-right
    img.is-banner-panning {
        animation-name:
            home-banner-pan-left-to-right;
    }

    .home-banner-slide.is-active.is-pan-right-to-left
    img.is-banner-panning {
        animation-name:
            home-banner-pan-right-to-left;
    }
}

@keyframes home-banner-pan-left-to-right {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-31%);
    }
}

@keyframes home-banner-pan-right-to-left {
    from {
        transform: translateX(-31%);
    }

    to {
        transform: translateX(0);
    }
}

/* =========================================================
   Dietary / composition features
   ========================================================= */

.product-view-dietary-features {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px;
    margin-top: 24px;
    margin-bottom: 28px;
}

.product-view-dietary-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 76px;
    gap: 8px;
    text-align: center;
}

.product-view-dietary-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgb(8 31 94 / 0.13);
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            rgb(255 255 255 / 0.98),
            rgb(245 247 252 / 0.98)
        );
    box-shadow:
        0 8px 22px rgb(8 31 94 / 0.07),
        inset 0 1px 0 rgb(255 255 255 / 0.9);
    color: var(--color-blue, #081f5e);
}

.product-view-dietary-icon svg {
    display: block;
    width: 25px;
    height: 25px;
}

.product-view-dietary-icon svg path,
.product-view-dietary-icon svg circle,
.product-view-dietary-icon svg line {
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-view-dietary-icon svg .is-accent-stroke {
    stroke: #e54869;
    stroke-width: 2;
}

.product-view-dietary-label {
    max-width: 100%;
    font-family: var(--font-roboto, "Roboto", sans-serif);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.25;
    color: rgb(8 31 94 / 0.78);
}

@media (max-width: 768px) {
    .product-view-dietary-features {
        gap: 14px;
        margin-top: 20px;
        margin-bottom: 24px;
    }

    .product-view-dietary-feature {
        width: 68px;
    }

    .product-view-dietary-icon {
        width: 44px;
        height: 44px;
    }

    .product-view-dietary-icon svg {
        width: 23px;
        height: 23px;
    }

    .product-view-dietary-label {
        font-size: 0.7rem;
    }
}

/* =========================================================
   Product view metaadatok
   ========================================================= */

.product-view-meta {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 1rem;
    margin-bottom: 1.35rem;
}

.product-view-meta-primary {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.product-view-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(6, 21, 75, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.58);
}

.product-view-meta-label {
    color: rgba(6, 21, 75, 0.56);
    font-size: 0.76rem;
    font-weight: 700;
}

.product-view-meta-value {
    color: #06154b;
    font-size: 0.83rem;
    font-weight: 900;
}

.product-view-meta-brand {
    background: rgba(14, 159, 143, 0.07);
    border-color: rgba(14, 159, 143, 0.13);
}

.product-view-meta-brand .product-view-meta-value {
    color: #087e72;
}

.product-view-meta-sku {
    background: rgba(6, 21, 75, 0.035);
}

/* =========================================================
   Kategória breadcrumb
   ========================================================= */

.product-view-category-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.product-view-category-label {
    color: rgba(6, 21, 75, 0.52);
    font-size: 0.76rem;
    font-weight: 800;
}

.product-view-category-path {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.product-view-category-item {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.34rem 0.58rem;
    border-radius: 999px;
    background: rgba(6, 21, 75, 0.055);
    color: #06154b;
    font-size: 0.75rem;
    font-weight: 850;
    line-height: 1.1;
}

.product-view-category-item.is-current {
    background: #06154b;
    color: #fff;
}

.product-view-category-separator {
    color: rgba(6, 21, 75, 0.28);
    font-size: 1rem;
    font-weight: 900;
}

/* =========================================================
   Mobil
   ========================================================= */

@media screen and (max-width: 700px) {
    .product-view-meta {
        gap: 0.75rem;
        margin-top: 0.8rem;
        margin-bottom: 1.1rem;
    }

    .product-view-meta-primary {
        gap: 0.5rem;
    }

    .product-view-meta-item {
        min-height: 34px;
        padding: 0.42rem 0.6rem;
    }

    .product-view-meta-label {
        font-size: 0.68rem;
    }

    .product-view-meta-value {
        font-size: 0.74rem;
    }

    .product-view-category-breadcrumb {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.4rem;
    }

    .product-view-category-path {
        gap: 0.28rem;
    }

    .product-view-category-item {
        min-height: 28px;
        padding: 0.3rem 0.5rem;
        font-size: 0.68rem;
    }

    .product-view-category-separator {
        font-size: 0.85rem;
    }
}

.home-product-data {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
}

.home-product-stock {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.15;
}

.home-product-stock.is-in-stock {
    background: rgba(14, 159, 143, 0.12);
    color: #0e9f8f;
}

.home-product-stock.is-backorder {
    background: rgba(224, 157, 34, 0.13);
    color: #a56700;
}

.home-product-stock.is-out-stock {
    background: rgba(192, 57, 43, 0.1);
    color: #c0392b;
}

.home-add-cart-btn:disabled,
.home-add-cart-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.58;
    transform: none;
    box-shadow: none;
}

@media screen and (max-width: 700px) {
    .home-product-stock {
        padding: 0.22rem 0.38rem;
        font-size: 0.56rem;
    }
}

/* =========================================================
   Időjárás alapú kampány
   ========================================================= */

#weather-campaign-section {
    position: relative;
    width: 100%;
    padding-inline: 0;
}

.weather-campaign-card {
    position: relative;
    width: 100%;
    padding: 2rem;
    overflow: hidden;

    border:
        1px solid
        rgb(8 35 93 / 0.08);

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            rgb(255 255 255 / 0.98),
            rgb(245 249 249 / 0.98)
        );

    box-shadow:
        0 20px 50px
        rgb(8 35 93 / 0.07);
}

/* =========================================================
   Finom háttérdekoráció
   ========================================================= */

.weather-campaign-card::before {
    content: "";

    position: absolute;
    top: -110px;
    right: -80px;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgb(13 177 156 / 0.15) 0%,
            rgb(13 177 156 / 0) 72%
        );

    pointer-events: none;
}

.weather-campaign-card::after {
    content: "";

    position: absolute;
    bottom: -130px;
    left: -100px;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgb(8 35 93 / 0.08) 0%,
            rgb(8 35 93 / 0) 72%
        );

    pointer-events: none;
}

/* =========================================================
   Kampányfejléc
   ========================================================= */

.weather-campaign-header {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: flex-start;
    gap: 1rem;

    margin-bottom: 1.6rem;
}

.weather-campaign-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 58px;
    height: 58px;

    border:
        1px solid
        rgb(13 177 156 / 0.18);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #effaf8
        );

    box-shadow:
        0 10px 24px
        rgb(8 35 93 / 0.08);

    font-size: 1.75rem;
    line-height: 1;
}

.weather-campaign-heading {
    flex: 1;
    min-width: 0;
}

.weather-campaign-badge {
    display: inline-flex;
    align-items: center;

    min-height: 28px;
    margin-bottom: 0.55rem;
    padding: 0.35rem 0.75rem;

    border-radius: 999px;

    background:
        rgb(13 177 156 / 0.12);

    color: #087f72;

    font-family:
        "Roboto",
        sans-serif;

    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.015em;
}

.weather-campaign-title {
    margin: 0;

    color: #08235d;

    font-family:
        "Instrument Serif",
        sans-serif;

    font-size:
            2.25rem
        ;

    font-weight: 700;
    line-height: 1.2;
}

.weather-campaign-subtitle {
    max-width: 980px;
    margin: 0.7rem 0 0;

    color: #4f5665;

    font-family:
        "Roboto",
        sans-serif;

    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
}

/* =========================================================
   Kampány terméksor
   ========================================================= */

#weather-campaign-products {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(215px, 1fr)
        );

    gap: 1rem;
    overflow: visible;
}

#weather-campaign-products .home-product-card {
    width: 100%;
    min-width: 0;
    max-width: 280px;
    justify-self: start;

    border:
        1px solid
        rgb(8 35 93 / 0.06);

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 12px 32px
        rgb(8 35 93 / 0.07);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

#weather-campaign-products .home-product-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgb(13 177 156 / 0.24);

    box-shadow:
        0 18px 40px
        rgb(8 35 93 / 0.11);
}

#weather-campaign-products
.home-product-image-wrap {
    border-radius:
        22px
        22px
        0
        0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfd 100%
        );
}

#weather-campaign-products
.home-add-cart-btn {
    border-radius: 999px;

    background: #08235d;
    color: #ffffff;

    box-shadow:
        0 8px 18px
        rgb(8 35 93 / 0.16);

    transition:
        background 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
}

#weather-campaign-products
.home-add-cart-btn:hover:not(:disabled) {
    transform:
        translateY(-1px);

    background: #0d2f75;

    box-shadow:
        0 12px 24px
        rgb(8 35 93 / 0.22);
}

/* =========================================================
   Hőség / UV kampány
   ========================================================= */

#weather-campaign-section[data-campaign-type="strong_heat"]
.weather-campaign-icon,
#weather-campaign-section[data-campaign-type="heat_and_uv"]
.weather-campaign-icon,
#weather-campaign-section[data-campaign-type="high_uv"]
.weather-campaign-icon {
    border-color:
        rgb(242 184 36 / 0.22);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff9e9
        );
}

#weather-campaign-section[data-campaign-type="strong_heat"]
.weather-campaign-badge,
#weather-campaign-section[data-campaign-type="heat_and_uv"]
.weather-campaign-badge,
#weather-campaign-section[data-campaign-type="high_uv"]
.weather-campaign-badge {
    background:
        rgb(242 184 36 / 0.14);

    color: #9b6b00;
}

/* =========================================================
   Hideg / esős kampány
   ========================================================= */

#weather-campaign-section[data-campaign-type="autumn_cold_rain"]
.weather-campaign-icon,
#weather-campaign-section[data-campaign-type="virus_rain"]
.weather-campaign-icon,
#weather-campaign-section[data-campaign-type="winter_cold"]
.weather-campaign-icon {
    border-color:
        rgb(58 119 188 / 0.18);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eef6ff
        );
}

#weather-campaign-section[data-campaign-type="autumn_cold_rain"]
.weather-campaign-badge,
#weather-campaign-section[data-campaign-type="virus_rain"]
.weather-campaign-badge,
#weather-campaign-section[data-campaign-type="winter_cold"]
.weather-campaign-badge {
    background:
        rgb(58 119 188 / 0.12);

    color: #315f98;
}

/* =========================================================
   Allergia kampány
   ========================================================= */

#weather-campaign-section[data-campaign-type="spring_allergy"]
.weather-campaign-icon,
#weather-campaign-section[data-campaign-type="ragweed_period"]
.weather-campaign-icon {
    border-color:
        rgb(89 155 93 / 0.2);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f1f9ef
        );
}

#weather-campaign-section[data-campaign-type="spring_allergy"]
.weather-campaign-badge,
#weather-campaign-section[data-campaign-type="ragweed_period"]
.weather-campaign-badge {
    background:
        rgb(89 155 93 / 0.12);

    color: #497c4b;
}

/* =========================================================
   Tablet
   ========================================================= */

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

    .weather-campaign-card {
        padding: 1.6rem;
        border-radius: 24px;
    }

    #weather-campaign-products {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    #weather-campaign-products
    .home-product-card {
        max-width: none;
    }
}

/* =========================================================
   Mobil
   ========================================================= */

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

    /*
     * Teljes szélesség:
     * nincs oldalsó behúzás a sectionön.
     */
    #weather-campaign-section {
        padding-inline: 0;
    }

    /*
     * Mobilon nem lebegő, lekerekített kártya,
     * hanem teljes szélességű szekció.
     */
    .weather-campaign-card {
        padding:
            1.35rem
            1rem
            1.25rem;

        border-width:
            1px
            0;

        border-style:
            solid;

        border-color:
            rgb(8 35 93 / 0.1);

        border-radius: 0;

        box-shadow: none;

        background:
            linear-gradient(
                135deg,
                rgb(255 255 255 / 0.98),
                rgb(245 249 249 / 0.98)
            );
    }

    /*
     * A fejlécben a szöveg kerül balra,
     * az ikon teljesen jobbra.
     */
    .weather-campaign-header {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        align-items: start;
        gap: 0.85rem;

        margin-bottom: 1.2rem;
    }

    /*
     * A DOM-ban az ikon van előbb,
     * ezért orderrel áttesszük jobbra.
     */
    .weather-campaign-icon {
        grid-column: 2;
        grid-row: 1;

        order: 2;

        width: 58px;
        height: 58px;

        margin-left: auto;

        border-radius: 18px;

        font-size: 1.7rem;
    }

    .weather-campaign-heading {
        grid-column: 1;
        grid-row: 1;

        order: 1;

        min-width: 0;
    }

    .weather-campaign-badge {
        min-height: 26px;
        margin-bottom: 0.45rem;
        padding: 0.32rem 0.65rem;

        font-size: 0.7rem;
    }

    .weather-campaign-title {
        font-size: 2rem;
        line-height: 1.15;
    }

    .weather-campaign-subtitle {
        margin-top: 0.6rem;

        font-size: 0.9rem;
        line-height: 1.55;
    }

    /*
     * A terméksor kifuthat a kártya belső paddingjéig,
     * így több hely jut a kártyáknak.
     */
    #weather-campaign-products {
        display: flex;
        gap: 0.85rem;

        margin-inline: -1rem;
        padding-inline: 1rem;
        padding-bottom: 0.45rem;

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;

        overscroll-behavior-x:
            contain;

        -webkit-overflow-scrolling:
            touch;
    }

    #weather-campaign-products::-webkit-scrollbar {
        display: none;
    }

    #weather-campaign-products
    .home-product-card {
        flex:
            0
            0
            min(
                78vw,
                250px
            );

        width: auto;
        max-width: none;

        scroll-snap-align: start;
    }
}

/* =========================================================
   Kis mobil
   ========================================================= */

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

    .weather-campaign-card {
        padding:
            1.15rem
            0.9rem
            1.1rem;
    }

    .weather-campaign-header {
        gap: 0.7rem;
    }

    .weather-campaign-icon {
        width: 56px;
        height: 56px;

        border-radius: 17px;

        font-size: 1.65rem;
    }

    .weather-campaign-title {
        font-size: 2rem;
    }

    .weather-campaign-subtitle {
        font-size: 0.86rem;
        line-height: 1.5;
    }

    #weather-campaign-products {
        margin-inline: -0.9rem;
        padding-inline: 0.9rem;
    }

    #weather-campaign-products
    .home-product-card {
        flex-basis:
            min(
                82vw,
                240px
            );
    }
}

/* =========================================================
   Csökkentett animáció
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #weather-campaign-products
    .home-product-card,

    #weather-campaign-products
    .home-add-cart-btn {
        transition: none;
    }
}

/* =========================================================
   Személyre szabott ajánlások – onboarding modal
   ========================================================= */

.recommendation-onboarding-modal {
    z-index: 1200;
}

.recommendation-onboarding-modal .modal-background {
    background:
        rgb(7 22 39 / 0.68);
    backdrop-filter:
        blur(5px);
    -webkit-backdrop-filter:
        blur(5px);
}

.recommendation-onboarding-card {
    display: flex;
    flex-direction: column;
    width:
        min(
            980px,
            calc(100vw - 32px)
        );
    max-height:
        calc(100dvh - 32px);
    border-radius:
        28px;
    overflow:
        hidden;
    background:
        #ffffff;
    box-shadow:
        0 30px 90px
        rgb(7 22 39 / 0.28);
}

/* =========================================================
   Fejléc
   ========================================================= */

.recommendation-onboarding-head {
    display:
        block;
    padding:
        30px 32px 24px;
    border-bottom:
        1px solid
        rgb(15 42 64 / 0.08);
    background:
        linear-gradient(
            135deg,
            #f7fbfb 0%,
            #ffffff 48%,
            #f4f8fa 100%
        );
}

.recommendation-onboarding-eyebrow {
    display:
        inline-flex;
    align-items:
        center;
    min-height:
        28px;
    padding:
        5px 12px;
    margin-bottom:
        14px;
    border-radius:
        999px;
    background:
        rgb(34 153 148 / 0.12);
    color:
        #137d79;
    font-family:
        var(
            --font-family-roboto,
            "Roboto",
            sans-serif
        );
    font-size:
        0.75rem;
    font-weight:
        700;
    letter-spacing:
        0.04em;
    text-transform:
        uppercase;
}

.recommendation-onboarding-title {
    max-width:
        760px;
    margin:
        0;
    color:
        #0b2941;
    font-family: "Instrument Serif", sans-serif;
            ;
    font-size:
        clamp(
            1.55rem,
            3vw,
            2.25rem
        );
    font-weight:
        800;
    line-height:
        1.2;
}

.recommendation-onboarding-intro {
    max-width:
        760px;
    margin:
        14px 0 0;
    color:
        #526878;
    font-family:
        var(
            --font-family-roboto,
            "Roboto",
            sans-serif
        );
    font-size:
        0.98rem;
    line-height:
        1.65;
}

/* =========================================================
   Modal tartalom
   ========================================================= */

.recommendation-onboarding-body {
    padding:
        26px 32px 30px;
    overflow-y:
        auto;
    background:
        #fbfcfd;
}

.recommendation-onboarding-hint {
    margin:
        0 0 18px;
    color:
        #617584;
    font-size:
        0.88rem;
    font-weight:
        500;
}

/* =========================================================
   Érdeklődési körök rácsa
   ========================================================= */

.recommendation-interest-grid {
    display:
        grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap:
        14px;
}

.recommendation-interest-card {
    position:
        relative;
    display:
        block;
    cursor:
        pointer;
    user-select:
        none;
    -webkit-user-select:
        none;
}

.recommendation-interest-input {
    position:
        absolute;
    width:
        1px;
    height:
        1px;
    margin:
        -1px;
    padding:
        0;
    overflow:
        hidden;
    clip:
        rect(0 0 0 0);
    white-space:
        nowrap;
    border:
        0;
}

.recommendation-interest-visual {
    position:
        relative;
    display:
        flex;
    align-items:
        flex-start;
    gap:
        13px;
    min-height:
        132px;
    height:
        100%;
    padding:
        18px;
    border:
        1px solid
        rgb(15 42 64 / 0.1);
    border-radius:
        20px;
    background:
        #ffffff;
    box-shadow:
        0 8px 22px
        rgb(15 42 64 / 0.05);
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease;
}

.recommendation-interest-card:hover
.recommendation-interest-visual {
    transform:
        translateY(-2px);
    border-color:
        rgb(34 153 148 / 0.38);
    box-shadow:
        0 14px 30px
        rgb(15 42 64 / 0.1);
}

.recommendation-interest-input:focus-visible
+ .recommendation-interest-visual {
    outline:
        3px solid
        rgb(34 153 148 / 0.25);
    outline-offset:
        3px;
}

.recommendation-interest-card.is-selected
.recommendation-interest-visual,
.recommendation-interest-input:checked
+ .recommendation-interest-visual {
    border-color:
        #229994;
    background:
        linear-gradient(
            145deg,
            #f0fbfa 0%,
            #ffffff 72%
        );
    box-shadow:
        0 14px 32px
        rgb(34 153 148 / 0.16);
}

/* =========================================================
   Kártya ikon és szöveg
   ========================================================= */

.recommendation-interest-icon {
    display:
        inline-flex;
    align-items:
        center;
    justify-content:
        center;
    flex:
        0 0 46px;
    width:
        46px;
    height:
        46px;
    border-radius:
        15px;
    background:
        #f1f6f7;
    font-size:
        1.45rem;
    line-height:
        1;
    transition:
        background-color 160ms ease,
        transform 160ms ease;
}

.recommendation-interest-card.is-selected
.recommendation-interest-icon,
.recommendation-interest-input:checked
+ .recommendation-interest-visual
.recommendation-interest-icon {
    background:
        rgb(34 153 148 / 0.14);
    transform:
        scale(1.04);
}

.recommendation-interest-content {
    display:
        flex;
    flex-direction:
        column;
    min-width:
        0;
}

.recommendation-interest-title {
    color:
        #102f46;
    font-family:
        var(
            --font-family-roboto,
            "Roboto",
            sans-serif
        );
    font-size:
        0.96rem;
    font-weight:
        700;
    line-height:
        1.35;
}

.recommendation-interest-description {
    margin-top:
        7px;
    color:
        #6b7d8a;
    font-size:
        0.8rem;
    line-height:
        1.45;
}

/* =========================================================
   Kiválasztási pipa
   ========================================================= */

.recommendation-interest-check {
    position:
        absolute;
    top:
        12px;
    right:
        12px;
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    width:
        24px;
    height:
        24px;
    border:
        2px solid
        rgb(15 42 64 / 0.12);
    border-radius:
        999px;
    background:
        #ffffff;
    color:
        transparent;
    font-size:
        0.75rem;
    font-weight:
        800;
    transform:
        scale(0.9);
    transition:
        color 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease,
        transform 160ms ease;
}

.recommendation-interest-card.is-selected
.recommendation-interest-check,
.recommendation-interest-input:checked
+ .recommendation-interest-visual
.recommendation-interest-check {
    border-color:
        #229994;
    background:
        #229994;
    color:
        #ffffff;
    transform:
        scale(1);
}

/* =========================================================
   Letiltott állapot
   ========================================================= */

.recommendation-interest-card.is-disabled {
    cursor:
        not-allowed;
}

.recommendation-interest-card.is-disabled
.recommendation-interest-visual {
    opacity:
        0.48;
    transform:
        none;
    box-shadow:
        none;
}

.recommendation-interest-card.is-disabled
.recommendation-interest-input:checked
+ .recommendation-interest-visual {
    opacity:
        1;
}

/* =========================================================
   Kiválasztási számláló
   ========================================================= */

.recommendation-selection-counter {
    margin:
        18px 0 0;
    color:
        #667a88;
    font-size:
        0.86rem;
    font-weight:
        600;
    text-align:
        right;
    transition:
        color 160ms ease;
}

.recommendation-selection-counter.is-limit-reached {
    color:
        #137d79;
}

/* =========================================================
   Válaszüzenet
   ========================================================= */

#recommendationOnboardingResponse {
    margin-bottom:
        18px;
    border-radius:
        14px;
    font-size:
        0.9rem;
    line-height:
        1.5;
}

/* =========================================================
   Modal lábléc és gombok
   ========================================================= */

.recommendation-onboarding-actions {
    display:
        flex;
    align-items:
        center;
    justify-content:
        flex-end;
    gap:
        12px;
    padding:
        20px 32px;
    border-top:
        1px solid
        rgb(15 42 64 / 0.08);
    background:
        #ffffff;
}

.recommendation-onboarding-actions .button {
    min-height:
        46px;
    border-radius:
        14px;
    padding-inline:
        22px;
    font-weight:
        700;
}

.recommendation-skip-btn {
    border:
        1px solid
        rgb(15 42 64 / 0.1);
    background:
        #f5f7f8;
    color:
        #395267;
}

.recommendation-skip-btn:hover {
    background:
        #edf1f3;
    color:
        #102f46;
}

#saveRecommendationOnboardingBtn {
    border-color:
        #0d2d45;
    background:
        #0d2d45;
    color:
        #ffffff;
    box-shadow:
        0 9px 22px
        rgb(13 45 69 / 0.18);
}

#saveRecommendationOnboardingBtn:hover:not(:disabled) {
    border-color:
        #071f31;
    background:
        #071f31;
    transform:
        translateY(-1px);
}

#saveRecommendationOnboardingBtn:disabled {
    border-color:
        #d5dde2;
    background:
        #d5dde2;
    color:
        #84939d;
    box-shadow:
        none;
    cursor:
        not-allowed;
}

/* =========================================================
   Profil – ajánlási beállítások blokk
   ========================================================= */

.profile-recommendation-settings {
    display:
        flex;
    flex-wrap:
        wrap;
    align-items:
        center;
    gap:
        14px;
    padding:
        22px;
    border:
        1px solid
        rgb(15 42 64 / 0.08);
    border-radius:
        18px;
    background:
        #f8fafb;
}

.profile-recommendation-settings > div:first-child {
    flex:
        1 1 100%;
}

.profile-recommendation-settings
.profile-panel-description {
    margin-bottom:
        0;
}

.profile-recommendation-settings
.profile-panel-btn {
    margin:
        0;
}

/* =========================================================
   Tablet
   ========================================================= */

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

    .recommendation-interest-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

/* =========================================================
   Mobil
   ========================================================= */

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

    .recommendation-onboarding-card {
        width:
            calc(100vw - 18px);
        max-height:
            calc(100dvh - 18px);
        border-radius:
            22px;
    }

    .recommendation-onboarding-head {
        padding:
            24px 20px 20px;
    }

    .recommendation-onboarding-title {
        font-size:
            1.45rem;
    }

    .recommendation-onboarding-intro {
        font-size:
            0.9rem;
        line-height:
            1.55;
    }

    .recommendation-onboarding-body {
        padding:
            20px;
    }

    .recommendation-interest-grid {
        grid-template-columns:
            1fr;
        gap:
            11px;
    }

    .recommendation-interest-visual {
        min-height:
            auto;
        padding:
            15px;
        border-radius:
            17px;
    }

    .recommendation-interest-icon {
        flex-basis:
            42px;
        width:
            42px;
        height:
            42px;
        border-radius:
            13px;
        font-size:
            1.28rem;
    }

    .recommendation-interest-description {
        padding-right:
            18px;
    }

    .recommendation-onboarding-actions {
        flex-direction:
            column-reverse;
        align-items:
            stretch;
        padding:
            16px 20px 20px;
    }

    .recommendation-onboarding-actions .button {
        width:
            100%;
        margin:
            0;
    }

    .recommendation-selection-counter {
        text-align:
            left;
    }

    .profile-recommendation-settings {
        align-items:
            stretch;
    }

    .profile-recommendation-settings
    .profile-panel-link,
    .profile-recommendation-settings
    .profile-panel-btn {
        width:
            100%;
        text-align:
            center;
    }
}

/* =========================================================
   Csökkentett animáció
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .recommendation-interest-visual,
    .recommendation-interest-icon,
    .recommendation-interest-check,
    #saveRecommendationOnboardingBtn {
        transition:
            none;
    }
}

/* =========================================================
   Onboarding modal – belső scroll javítás
   ========================================================= */

.recommendation-onboarding-card {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 32px);
}

.recommendation-onboarding-card form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: inherit;
}

.recommendation-onboarding-head {
    flex: 0 0 auto;
}

.recommendation-onboarding-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.recommendation-onboarding-actions {
    flex: 0 0 auto;
}

.recommendation-onboarding-head {
    position: relative;
    padding-right: 76px;
}

.recommendation-modal-close {
    position: absolute;
    top: 24px;
    right: 26px;
    flex: 0 0 auto;
    background-color: rgb(15 42 64 / 0.1);
}

.recommendation-modal-close:hover {
    background-color: rgb(15 42 64 / 0.18);
}

@media screen and (max-width: 620px) {
    .recommendation-onboarding-head {
        padding-right: 60px;
    }

    .recommendation-modal-close {
        top: 20px;
        right: 18px;
    }
}

/* =========================================================
   Neked ajánljuk oldal
   ========================================================= */

.for-you-page {
    padding-top: 42px;
    padding-bottom: 72px;
}

/* =========================================================
   Hero
   ========================================================= */

.for-you-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;

    padding: 0px;
    margin-bottom: 10px;
}

.for-you-hero-content {
    max-width: 760px;
}

.for-you-eyebrow {
    display: inline-flex;
    align-items: center;

    min-height: 30px;
    padding: 5px 13px;
    margin-bottom: 16px;

    border-radius: 999px;

    background:
        rgb(34 153 148 / 0.12);

    color:
        #137d79;

    font-family:
        var(
            --font-family-roboto,
            "Roboto",
            sans-serif
        );

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.for-you-title {
    margin: 0;

    color:
        #0b2941;

    font-family:
        "Instrument Serif",
        sans-serif;

    font-size:
        clamp(
            2.35rem,
            5vw,
            4.15rem
        );

    font-weight: 800;
    line-height: 1;
}

.for-you-description {
    max-width: 680px;
    margin: 18px 0 0;

    color:
        #566d7d;

    font-family:
        var(
            --font-family-roboto,
            "Roboto",
            sans-serif
        );

    font-size: 1rem;
    line-height: 1.7;
}

.for-you-hero-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.for-you-settings-button {
    min-height: 46px;
    padding-inline: 20px;

    border:
        1px solid
        rgb(15 42 64 / 0.12);

    border-radius: 14px;

    background:
        #ffffff;

    color:
        #12334b;

    font-weight: 700;

    box-shadow:
        0 8px 20px
        rgb(15 42 64 / 0.08);

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease;
}

.for-you-settings-button:hover {
    transform:
        translateY(-1px);

    border-color:
        rgb(34 153 148 / 0.38);

    background:
        #f5fbfb;

    color:
        #0b2941;

    box-shadow:
        0 12px 26px
        rgb(15 42 64 / 0.11);
}

/* =========================================================
   Érdeklődési körök
   ========================================================= */

.for-you-interests {
    padding: 22px 24px;
    margin-bottom: 28px;

    border:
        1px solid
        rgb(15 42 64 / 0.07);

    border-radius: 22px;

    background:
        #ffffff;

    box-shadow:
        0 10px 30px
        rgb(15 42 64 / 0.05);
}

.for-you-section-label {
    margin: 0 0 16px;

    color:
        #536b7c;

    font-family:
        var(
            --font-family-roboto,
            "Roboto",
            sans-serif
        );

    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.for-you-interest-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.for-you-interest-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 38px;
    padding: 7px 13px;

    border:
        1px solid
        rgb(34 153 148 / 0.14);

    border-radius: 999px;

    background:
        rgb(34 153 148 / 0.08);

    color:
        #176e6b;

    font-size: 0.86rem;
    font-weight: 700;
}

.for-you-interest-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 1rem;
    line-height: 1;
}

/* =========================================================
   Termék szekció
   ========================================================= */

.for-you-products-section {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.for-you-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 24px;
}

.for-you-products-title {
    margin: 0;

    color:
        #0b2941;

    font-family:
        "Roboto",
        sans-serif;

    font-size: 1.4rem;
            

    font-weight: 600;
    line-height: 1.05;
}

.for-you-products-subtitle {
    margin: 8px 0 0;

    color:
        #697d8b;

    font-size: 0.92rem;
    line-height: 1.55;
}

.for-you-product-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    min-height: 34px;
    padding: 6px 12px;

    border-radius: 999px;

    background:
        #ffffff;

    color:
        #496172;

    font-size: 0.8rem;
    font-weight: 700;

    box-shadow:
        0 6px 18px
        rgb(15 42 64 / 0.07);
}

/* =========================================================
   Termékrács
   ========================================================= */

.for-you-product-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 20px;
}

/* =========================================================
   Termékkártyák
   ========================================================= */

.for-you-product-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    height: 100%;

    overflow: hidden;

    border:
        1px solid
        rgb(15 42 64 / 0.055);

    border-radius: 22px;

    background:
        #ffffff;

    box-shadow:
        0 10px 30px
        rgb(15 42 64 / 0.07);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
    padding: 1rem;
}

.for-you-product-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgb(34 153 148 / 0.15);

    box-shadow:
        0 18px 40px
        rgb(15 42 64 / 0.11);
}

/* =========================================================
   Kép
   ========================================================= */

.for-you-product-image-wrap {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 1 / 1;

    padding: 24px;

    overflow: hidden;

    background:
        #ffffff;
}

.for-you-product-image-link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
}

.for-you-product-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    transition:
        transform 220ms ease;
}

.for-you-product-card:hover
.for-you-product-image {
    transform:
        scale(1.035);
}

.for-you-product-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    border-radius: 16px;

    background:
        #f4f6f7;

    color:
        #94a2ac;

    font-size: 2rem;
}

/* =========================================================
   Kedvezmény badge
   ========================================================= */

.for-you-product-discount {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 30px;
    padding: 5px 11px;

    border-radius: 999px;

    background:
        #ee252b;

    color:
        #ffffff;

    font-size: 0.78rem;
    font-weight: 800;

    box-shadow:
        0 8px 18px
        rgb(238 37 43 / 0.24);
}

/* =========================================================
   Kártyatartalom
   ========================================================= */

.for-you-product-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    padding: 18px 20px 20px;
}

.for-you-product-label {
    display: inline-flex;
    align-items: center;

    align-self: flex-start;

    margin-bottom: 10px;

    color:
        #365bea;

    font-size: 0.82rem;
    font-weight: 500;
}

.for-you-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;

    margin-bottom: 8px;

    color:
        #596d7b;

    font-size: 0.84rem;
    line-height: 1.4;
}

.for-you-product-name {
    margin: 0;

    color:
        #153349;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.for-you-product-name a {
    color:
        inherit;

    text-decoration:
        none;
}

.for-you-product-name a:hover {
    color:
        #2858df;
}

.for-you-product-stock {
    margin-top: 10px;

    color:
        #4f6574;

    font-size: 0.84rem;
    line-height: 1.4;
}

.for-you-product-stock.is-out {
    color:
        #9b5b5b;
}

.for-you-product-stock.is-backorder {
    color:
        #9b7417;
}

/* =========================================================
   Ár
   ========================================================= */

.for-you-product-price-block {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;

    margin-top: 10px;
}

.for-you-product-original-price {
    color:
        #87949d;

    font-size: 0.8rem;
    text-decoration: line-through;
}

.for-you-product-price {
    color:
        #0a2943;

    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.2;
}

/* =========================================================
   CTA
   ========================================================= */

.for-you-product-actions {
    display: flex;
    gap: 10px;

    margin-top: auto;
    padding-top: 14px;
}

.for-you-product-cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 44px;

    padding: 10px 14px;

    border:
        1px solid
        #173b56;

    border-radius: 13px;

    background:
        #173b56;

    color:
        #ffffff;

    font-size: 0.9rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.for-you-product-cart-button:hover:not(:disabled) {
    transform:
        translateY(-1px);

    border-color:
        #0d2c43;

    background:
        #0d2c43;

    box-shadow:
        0 9px 20px
        rgb(13 44 67 / 0.18);
}

.for-you-product-cart-button:disabled {
    border-color:
        #d7dee3;

    background:
        #d7dee3;

    color:
        #8b99a3;

    cursor:
        not-allowed;

    box-shadow:
        none;
}

.for-you-product-cart-button.is-loading {
    opacity: 0.72;
    cursor: wait;
}

/* =========================================================
   Fallback a főoldali kártyaosztályokra
   ========================================================= */

.for-you-product-grid .home-product-card,
.for-you-product-grid .product-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    height: 100%;
    margin: 0;

    overflow: hidden;

    border:
        1px solid
        rgb(15 42 64 / 0.055);

    border-radius: 22px;

    background:
        #ffffff;

    box-shadow:
        0 10px 30px
        rgb(15 42 64 / 0.07);
}

.for-you-product-grid
.home-product-card-inner,
.for-you-product-grid
.product-card-inner {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;
}

/* =========================================================
   Betöltési állapot
   ========================================================= */

.for-you-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 180px;

    color:
        #607786;

    font-size: 0.92rem;
    font-weight: 600;
}

.for-you-loading-spinner {
    display: inline-block;

    width: 24px;
    height: 24px;

    border:
        3px solid
        rgb(34 153 148 / 0.18);

    border-top-color:
        #229994;

    border-radius: 999px;

    animation:
        for-you-spinner
        700ms
        linear
        infinite;
}

@keyframes for-you-spinner {
    to {
        transform:
            rotate(360deg);
    }
}

/* =========================================================
   Üres állapotok
   ========================================================= */

.for-you-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    max-width: 680px;
    min-height: 310px;

    padding: 44px 28px;
    margin: 12px auto;

    border:
        1px dashed
        rgb(15 42 64 / 0.15);

    border-radius: 24px;

    background:
        rgb(255 255 255 / 0.72);

    text-align: center;
}

.for-you-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;

    margin-bottom: 20px;

    border-radius: 22px;

    background:
        rgb(34 153 148 / 0.1);

    font-size: 2rem;
}

.for-you-empty-title {
    margin: 0;

    color:
        #12334b;

    font-family:
        "Instrument Serif",
        sans-serif;

    font-size: 1.65rem;
    font-weight: 400;
    line-height: 1.2;
}

.for-you-empty-text {
    max-width: 520px;
    margin: 13px 0 24px;

    color:
        #687d8c;

    font-size: 0.93rem;
    line-height: 1.65;
}

/* =========================================================
   További ajánlások
   ========================================================= */

.for-you-load-more-wrap {
    display: flex;
    justify-content: center;

    padding-top: 30px;
}

.for-you-load-more-button {
    min-height: 48px;
    padding-inline: 28px;

    border:
        1px solid
        #12344c;

    border-radius: 14px;

    background:
        #ffffff;

    color:
        #12344c;

    font-weight: 700;

    transition:
        transform 160ms ease,
        background-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease;
}

.for-you-load-more-button:hover {
    transform:
        translateY(-1px);

    background:
        #12344c;

    color:
        #ffffff;

    box-shadow:
        0 10px 24px
        rgb(18 52 76 / 0.18);
}

.for-you-load-more-button:disabled,
.for-you-load-more-button.is-loading {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

/* =========================================================
   Hibaüzenet
   ========================================================= */

#forYouError {
    margin-bottom: 22px;

    border-radius: 16px;

    font-size: 0.92rem;
    line-height: 1.55;
}

/* =========================================================
   Tablet
   ========================================================= */

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

    .for-you-product-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}

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

    .for-you-page {
        padding-top: 28px;
    }

    .for-you-hero {
        flex-direction: column;
        padding: 28px;
    }

    .for-you-hero-actions {
        width: 100%;
    }

    .for-you-settings-button {
        width: 100%;
        justify-content: center;
    }

    .for-you-section-head {
        flex-direction: column;
        gap: 12px;
    }

    .for-you-product-count {
        align-self: flex-start;
    }

    .for-you-product-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

/* =========================================================
   Mobil
   ========================================================= */

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

    .for-you-page {
        padding-top: 18px;
        padding-bottom: 44px;
    }

    .for-you-hero {
        gap: 24px;

        padding: 24px 20px;
        margin-bottom: 20px;

        border-radius: 22px;
    }

    .for-you-title {
        font-size: 2.45rem;
    }

    .for-you-description {
        font-size: 0.92rem;
        line-height: 1.6;
    }

    .for-you-interests {
        padding: 20px;
        margin-bottom: 20px;

        border-radius: 19px;
    }

    .for-you-interest-list {
        gap: 8px;
    }

    .for-you-interest-chip {
        min-height: 35px;
        padding: 6px 11px;

        font-size: 0.8rem;
    }

    .for-you-products-section {
        padding: 0;
    }

    .for-you-section-head {
        margin-bottom: 18px;
    }

    .for-you-products-title {
        font-size: 1.3rem;
    }

    .for-you-product-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .for-you-product-card {
        border-radius: 20px;
    }

    .for-you-product-image-wrap {
        padding: 22px;
    }

    .for-you-product-body {
        padding: 17px 18px 19px;
    }

    .for-you-empty-state {
        min-height: 270px;
        padding: 36px 20px;

        border-radius: 20px;
    }

    .for-you-empty-icon {
        width: 60px;
        height: 60px;

        border-radius: 19px;

        font-size: 1.75rem;
    }

    .for-you-empty-title {
        font-size: 1.45rem;
    }

    .for-you-load-more-button {
        width: 100%;
    }
}

/* =========================================================
   Csökkentett animáció
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .for-you-loading-spinner {
        animation-duration: 1.5s;
    }

    .for-you-settings-button,
    .for-you-load-more-button,
    .for-you-product-card,
    .for-you-product-image,
    .for-you-product-cart-button {
        transition: none;
    }
}

/* =========================================================
   For You – tényleges JS markup javítása
   ========================================================= */

.for-you-product-grid {
    align-items: stretch;
}

/* =========================================================
   Kártya
   ========================================================= */

.for-you-product-grid .home-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    margin: 0;
    overflow: hidden;

    border: 1px solid rgb(15 42 64 / 0.055);
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 10px 30px
        rgb(15 42 64 / 0.07);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.for-you-product-grid .home-product-card:hover {
    transform: translateY(-3px);

    border-color:
        rgb(34 153 148 / 0.18);

    box-shadow:
        0 18px 42px
        rgb(15 42 64 / 0.11);
}

/* =========================================================
   Képblokk
   ========================================================= */

.for-you-product-grid .home-product-image-link {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.for-you-product-grid .home-product-image-wrap {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 1 / 1;

    padding: 22px;

    overflow: hidden;
    background: #ffffff;
}

.for-you-product-grid .home-product-image-wrap img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    transition:
        transform 220ms ease;
}

.for-you-product-grid
.home-product-card:hover
.home-product-image-wrap img {
    transform: scale(1.035);
}

.for-you-product-grid
.home-product-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    border-radius: 16px;

    background: #f3f6f7;
    color: #91a0aa;

    font-size: 2rem;
}

/* =========================================================
   Akció badge
   ========================================================= */

.for-you-product-grid .home-product-sale-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 30px;
    padding: 5px 11px;

    border-radius: 999px;

    background: #ee252b;
    color: #ffffff;

    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;

    box-shadow:
        0 8px 18px
        rgb(238 37 43 / 0.24);
}

/* =========================================================
   Neked ajánlott címke
   ========================================================= */

.for-you-product-grid .for-you-score {
    position: absolute;
    right: 15px;
    bottom: 12px;
    z-index: 2;

    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    border-radius: 999px;

    background:
        rgb(34 153 148 / 0.1);

    color: #167b77;

    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

/* =========================================================
   Kártyatartalom
   ========================================================= */

.for-you-product-grid .home-product-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    min-width: 0;
    padding: 18px 19px 20px;
}

.for-you-product-grid .home-product-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;

    min-height: 20px;
    margin-bottom: 8px;
}

.for-you-product-grid .home-product-category,
.for-you-product-grid .home-product-package {
    color: #667987;

    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
}

.for-you-product-grid
.home-product-category:not(:last-child)::after {
    content: "·";
    margin-left: 8px;
    color: #a0adb5;
}

.for-you-product-grid .home-product-manufacturer {
    margin: 0 0 6px;

    color: #7b8992;

    font-size: 0.76rem;
    line-height: 1.35;
}

/* =========================================================
   Terméknév és link
   ========================================================= */

.for-you-product-grid .home-product-name {
    margin: 0;

    color: #0d2944;

    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.38;
}

.for-you-product-grid .home-product-name a {
    color: inherit;
    text-decoration: none;

    transition:
        color 150ms ease;
}

.for-you-product-grid .home-product-name a:hover {
    color: #229994;
    text-decoration: none;
}

.for-you-product-grid .home-product-name a:focus-visible {
    outline:
        3px solid
        rgb(34 153 148 / 0.22);

    outline-offset: 3px;
    border-radius: 4px;
}

/* =========================================================
   Készletjelzés
   ========================================================= */

.for-you-product-grid .home-product-stock-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 10px;
}

.for-you-product-grid .home-product-stock-badge {
    display: inline-flex;
    align-items: center;

    min-height: 25px;
    padding: 4px 9px;

    border-radius: 999px;

    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.for-you-product-grid
.home-product-stock-badge.is-in-stock {
    background:
        rgb(34 153 148 / 0.11);

    color: #17817c;
}

.for-you-product-grid
.home-product-stock-badge.is-backorder {
    background:
        rgb(214 158 42 / 0.13);

    color: #946b12;
}

.for-you-product-grid
.home-product-stock-badge.is-out-of-stock {
    background:
        rgb(185 68 68 / 0.1);

    color: #a34444;
}

/* =========================================================
   Alsó rész és ár
   ========================================================= */

.for-you-product-grid .home-product-bottom {
    display: flex;
    flex-direction: column;

    margin-top: auto;
    padding-top: 15px;
}

.for-you-product-grid .home-product-price-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;

    min-height: 28px;
    margin-bottom: 13px;
}

.for-you-product-grid
.home-product-original-price {
    color: #8d989f;

    font-size: 0.74rem;
    font-weight: 500;
    text-decoration: line-through;
}

.for-you-product-grid .home-product-price {
    color: #0b2742;

    font-size: 1.16rem;
    font-weight: 800;
    line-height: 1.15;
}

/* =========================================================
   Kosárgomb
   ========================================================= */

.for-you-product-grid
.home-product-cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 43px;

    padding: 9px 13px;

    border: 1px solid #091d60;
    border-radius: 999px;

    background: #091d60;
    color: #ffffff;

    font-family:
        var(
            --font-family-roboto,
            "Roboto",
            sans-serif
        );

    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease;
}

.for-you-product-grid
.home-product-cart-button:hover:not(:disabled) {
    transform: translateY(-1px);

    border-color: #061548;
    background: #061548;

    box-shadow:
        0 9px 20px
        rgb(9 29 96 / 0.2);
}

.for-you-product-grid
.home-product-cart-button:focus-visible {
    outline:
        3px solid
        rgb(34 153 148 / 0.28);

    outline-offset: 3px;
}

.for-you-product-grid
.home-product-cart-button:disabled,
.for-you-product-grid
.home-product-cart-button.is-disabled {
    border-color: #d7dee3;
    background: #d7dee3;
    color: #84929b;

    cursor: not-allowed;
    box-shadow: none;
}

.for-you-product-grid
.home-product-cart-button.is-loading {
    opacity: 0.7;
    cursor: wait;
}

/* =========================================================
   Desktop / tablet grid
   ========================================================= */

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

    .for-you-product-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}

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

    .for-you-product-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 14px;
    }
}

/* =========================================================
   Mobil – két oszlop
   ========================================================= */

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

    /*
     * Ez írja felül a korábbi 1fr szabályodat.
     */
    .for-you-product-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 11px;
    }

    .for-you-product-grid .home-product-card {
        border-radius: 17px;
    }

    .for-you-product-grid
    .home-product-image-wrap {
        padding: 11px;
    }

    .for-you-product-grid
    .home-product-sale-badge {
        top: 9px;
        left: 9px;

        min-height: 24px;
        padding: 4px 8px;

        font-size: 0.64rem;
    }

    .for-you-product-grid .for-you-score {
        right: 8px;
        bottom: 7px;

        padding: 4px 7px;

        font-size: 0.6rem;
    }

    .for-you-product-grid
    .home-product-card-body {
        padding: 12px 11px 13px;
    }

    .for-you-product-grid
    .home-product-card-meta {
        gap: 3px 5px;
        margin-bottom: 5px;
    }

    .for-you-product-grid
    .home-product-category,
    .for-you-product-grid
    .home-product-package {
        font-size: 0.65rem;
    }

    .for-you-product-grid
    .home-product-category:not(:last-child)::after {
        margin-left: 5px;
    }

    .for-you-product-grid
    .home-product-manufacturer {
        margin-bottom: 4px;

        font-size: 0.65rem;
    }

    .for-you-product-grid
    .home-product-name {
        font-size: 0.78rem;
        line-height: 1.32;
    }

    .for-you-product-grid
    .home-product-stock-row {
        margin-top: 7px;
    }

    .for-you-product-grid
    .home-product-stock-badge {
        min-height: 22px;
        padding: 3px 7px;

        font-size: 0.61rem;
    }

    .for-you-product-grid
    .home-product-bottom {
        padding-top: 10px;
    }

    .for-you-product-grid
    .home-product-price-wrap {
        gap: 4px;

        min-height: 22px;
        margin-bottom: 9px;
    }

    .for-you-product-grid
    .home-product-original-price {
        font-size: 0.62rem;
    }

    .for-you-product-grid
    .home-product-price {
        font-size: 0.92rem;
    }

    .for-you-product-grid
    .home-product-cart-button {
        min-height: 36px;
        padding: 7px 8px;

        font-size: 0.7rem;
    }
}

/* =========================================================
   Főoldal – személyre szabott ajánlások
   ========================================================= */

.home-for-you-section {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* =========================================================
   Fejléc
   ========================================================= */

.home-for-you-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.home-for-you-heading {
    min-width: 0;
}

.home-for-you-eyebrow {
    display: inline-flex;
    align-items: center;

    min-height: 28px;
    padding: 0.3rem 0.7rem;
    margin-bottom: 0.65rem;

    border-radius: 999px;

    background: rgb(34 153 148 / 0.1);
    color: #177b77;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.home-for-you-title {
    margin: 0;

    color: #0b2941;

    font-family: "Instrument Serif", sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
}

.home-for-you-subtitle {
    margin: 0.45rem 0 0;

    color: #697d8b;

    font-size: 0.9rem;
    line-height: 1.5;
}

.home-for-you-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    min-height: 42px;
    padding: 0.65rem 1rem;

    border: 1px solid rgb(15 42 64 / 0.12);
    border-radius: 999px;

    background: #fff;
    color: #102f46;

    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    transition:
        border-color 0.2s,
        background-color 0.2s,
        color 0.2s,
        transform 0.2s;
}

.home-for-you-link:hover {
    transform: translateY(-1px);

    border-color: rgb(34 153 148 / 0.35);

    background: #f5fbfb;
    color: #137d79;
    text-decoration: none;
}

/* =========================================================
   Termékrács
   ========================================================= */

.home-for-you-products {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    padding: 0 0 0.5rem;
    overflow: visible;
}

/*
 * Csak a For You grid viselkedését szabályozzuk.
 * Maguk a kártyák a közös .home-product-* CSS-t használják.
 */

.home-for-you-products .home-product-card {
    min-width: 0;
    max-width: none;
    width: 100%;
    height: 100%;
    margin: 0;
}

/* =========================================================
   Tablet
   ========================================================= */

@media screen and (max-width: 1180px) {
    .home-for-you-products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media screen and (max-width: 900px) {
    .home-for-you-products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================================================
   Mobil
   ========================================================= */

@media screen and (max-width: 768px) {
    .home-for-you-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.9rem;
        margin-bottom: 1.1rem;
    }

    .home-for-you-link {
        width: 100%;
    }

    /*
     * A normál főoldali terméksor mobilon vízszintesen scrollozik.
     * A For You blokk viszont kétoszlopos grid marad.
     */
    .home-for-you-products {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;

        padding: 0 0 0.5rem;

        overflow: visible;
    }

    /*
     * Felülírja a közös mobilos 200 px-es kártyaszélességet.
     */
    .home-for-you-products .home-product-card {
        min-width: 0;
        max-width: none;
        width: 100%;
        padding: 0.75rem;
        scroll-snap-align: unset;
    }

    .home-for-you-products .home-product-title {
        font-size: 0.8rem;
    }

    .home-for-you-products .home-product-meta {
        min-height: 0;
        font-size: 0.7rem;
        margin-bottom: 0.65rem;
    }

    .home-for-you-products .home-product-package {
        font-size: 0.72rem;
    }

    .home-for-you-products .home-product-price {
        font-size: 1rem;
    }

    .home-for-you-products .home-add-cart-btn {
        padding: 0.6rem 0.5rem;
        font-size: 0.72rem;
    }
}

.home-product-stock-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.home-product-stock-badge {
    display: inline-flex;
    align-items: center;

    min-height: 24px;
    padding: 0.35rem 0.6rem;

    border-radius: 999px;

    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
}

.home-product-stock-badge.is-in-stock {
    background: rgb(34 153 148 / 0.11);
    color: #17817c;
}

.home-product-stock-badge.is-backorder {
    background: rgb(214 158 42 / 0.14);
    color: #946b12;
}

.home-product-stock-badge.is-out-of-stock {
    background: rgb(185 68 68 / 0.11);
    color: #a34444;
}

/* =========================================================
   Főoldal – Vásárold újra
   ========================================================= */

.home-buy-again-section {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* =========================================================
   Fejléc
   ========================================================= */

.home-buy-again-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.home-buy-again-heading {
    min-width: 0;
}

.home-buy-again-eyebrow {
    display: inline-flex;
    align-items: center;

    min-height: 28px;
    margin-bottom: 0.65rem;
    padding: 0.3rem 0.7rem;

    border-radius: 999px;

    background: rgb(8 35 93 / 0.08);
    color: #08235d;

    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-buy-again-title {
    margin: 0;

    color: #0b2941;

    font-family:
        "Instrument Serif",
        sans-serif;

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    font-weight: 800;
    line-height: 1.05;
}

.home-buy-again-subtitle {
    margin: 0.45rem 0 0;

    color: #697d8b;

    font-size: 0.9rem;
    line-height: 1.5;
}

.home-buy-again-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    min-height: 42px;
    padding: 0.65rem 1rem;

    border:
        1px solid
        rgb(15 42 64 / 0.12);

    border-radius: 999px;

    background: #ffffff;
    color: #102f46;

    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        color 180ms ease;
}

.home-buy-again-link:hover {
    transform: translateY(-1px);

    border-color:
        rgb(8 35 93 / 0.28);

    background: #f5f7fb;
    color: #08235d;
    text-decoration: none;
}

/* =========================================================
   Termékrács
   ========================================================= */

.home-buy-again-products {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 1rem;
    align-items: stretch;

    padding-bottom: 0.5rem;
}

.home-buy-again-products .home-product-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100%;
    margin: 0;
}

/* =========================================================
   Vásárlási információ
   ========================================================= */

.home-product-purchase-history {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;

    margin-bottom: 0.75rem;

    color: #697d8b;

    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.35;
}

.home-product-purchase-history strong {
    color: #405767;
    font-weight: 700;
}

/* =========================================================
   Reszponzív elrendezés
   ========================================================= */

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

    .home-buy-again-products {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }
}

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

    .home-buy-again-products {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}

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

    .home-buy-again-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.9rem;

        margin-bottom: 1.1rem;
    }

    .home-buy-again-link {
        width: 100%;
    }

    .home-buy-again-products {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 0.75rem;
    }

    /*
     * Felülírja a közös mobilos,
     * fix 200 px-es kártyaszélességet.
     */
    .home-buy-again-products
    .home-product-card {
        min-width: 0;
        max-width: none;
        width: 100%;

        padding: 0.75rem;

        scroll-snap-align: unset;
    }

    .home-buy-again-products
    .home-product-title {
        font-size: 0.8rem;
    }

    .home-buy-again-products
    .home-product-meta {
        min-height: 0;
        margin-bottom: 0.6rem;

        font-size: 0.7rem;
    }

    .home-buy-again-products
    .home-product-package {
        font-size: 0.72rem;
    }

    .home-buy-again-products
    .home-product-price {
        font-size: 1rem;
    }

    .home-buy-again-products
    .home-add-cart-btn {
        padding: 0.6rem 0.5rem;

        font-size: 0.72rem;
    }

    .home-product-purchase-history {
        margin-bottom: 0.6rem;

        font-size: 0.62rem;
    }
}

/* =========================================================
   Profil – Vásárold újra
   ========================================================= */

.profile-buy-again-section {
    padding-top: 1.75rem;
    border-top: 1px solid rgb(8 35 93 / 0.08);
}

.profile-buy-again-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.profile-buy-again-eyebrow {
    display: inline-flex;
    align-items: center;

    min-height: 25px;
    margin-bottom: 0.55rem;
    padding: 0.3rem 0.65rem;

    border-radius: 999px;

    background: rgb(8 35 93 / 0.08);
    color: #08235d;

    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.profile-buy-again-title {
    margin-bottom: 0.25rem;
}

.profile-buy-again-products {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 0.85rem;
}

.profile-buy-again-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 0.9rem;

    min-width: 0;
    padding: 0.85rem;

    border: 1px solid rgb(8 35 93 / 0.08);
    border-radius: 16px;

    background: #ffffff;
}

.profile-buy-again-image-link {
    display: block;
    width: 88px;
    height: 88px;

    overflow: hidden;
    border-radius: 12px;

    background: #f6f7f9;
}

.profile-buy-again-image {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.profile-buy-again-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-buy-again-name {
    margin: 0;

    color: #10245c;

    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
}

.profile-buy-again-name a {
    color: inherit;
    text-decoration: none;
}

.profile-buy-again-name a:hover {
    text-decoration: underline;
}

.profile-buy-again-history {
    margin: 0.35rem 0 0;

    color: #78808d;

    font-size: 0.7rem;
    line-height: 1.45;
}

.profile-buy-again-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;

    margin-top: auto;
    padding-top: 0.75rem;
}

.profile-buy-again-price {
    color: #08235d;

    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
}

.profile-buy-again-button {
    min-height: 34px;
    padding: 0.5rem 0.85rem;

    border: 0;
    border-radius: 999px;

    background: #08235d;
    color: #ffffff;

    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;
}

.profile-buy-again-button:hover:not(:disabled) {
    background: #0d2f75;
}

.profile-buy-again-button:disabled {
    background: #dce1e7;
    color: #87919d;
    cursor: not-allowed;
}

@media screen and (max-width: 768px) {
    .profile-buy-again-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

    .profile-buy-again-products {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 480px) {
    .profile-buy-again-item {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .profile-buy-again-image-link {
        width: 72px;
        height: 72px;
    }

    .profile-buy-again-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.55rem;
    }

    .profile-buy-again-button {
        width: 100%;
    }
}

/* =========================================================
   Termékoldal – ajánló szekciók
   ========================================================= */

.product-view-recommendation-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgb(8 35 93 / 0.08);
}

/* =========================================================
   Fejléc
   ========================================================= */

.product-view-recommendation-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.product-view-recommendation-header > div {
    min-width: 0;
}

.product-view-recommendation-eyebrow {
    display: inline-flex;
    align-items: center;

    min-height: 28px;
    margin-bottom: 0.65rem;
    padding: 0.35rem 0.75rem;

    border-radius: 999px;

    background: rgb(13 177 156 / 0.11);
    color: #087f72;

    font-family: "Roboto", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.product-view-recommendation-title {
    margin: 0;

    color: #08235d;

    font-family: "Instrument Serif", sans-serif;
    font-size: clamp(1.9rem, 3vw, 2.65rem);
    font-weight: 700;
    line-height: 1.08;
}

.product-view-recommendation-subtitle {
    max-width: 760px;
    margin: 0.55rem 0 0;

    color: #667381;

    font-family: "Roboto", sans-serif;
    font-size: 0.92rem;
    line-height: 1.55;
}

.product-view-recommendation-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    min-height: 42px;
    padding: 0.65rem 1rem;

    border: 1px solid rgb(8 35 93 / 0.12);
    border-radius: 999px;

    background: #ffffff;
    color: #08235d;

    font-family: "Roboto", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        color 180ms ease;
}

.product-view-recommendation-link:hover {
    transform: translateY(-1px);

    border-color: rgb(13 177 156 / 0.32);

    background: #f4fbfa;
    color: #087f72;
    text-decoration: none;
}

/* =========================================================
   Termékrács
   ========================================================= */

.product-view-recommendation-products {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

/* =========================================================
   Kártya-felülírások
   ========================================================= */

.product-view-recommendation-products .home-product-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100%;
    margin: 0;

    border: 1px solid rgb(8 35 93 / 0.06);
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 10px 28px
        rgb(8 35 93 / 0.06);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.product-view-recommendation-products .home-product-card:hover {
    transform: translateY(-3px);

    border-color:
        rgb(13 177 156 / 0.2);

    box-shadow:
        0 16px 36px
        rgb(8 35 93 / 0.1);
}

.product-view-recommendation-products .home-product-image-wrap {
    border-radius: 18px 18px 0 0;
}

.product-view-recommendation-products .home-add-cart-btn {
    border-radius: 999px;
}

/* =========================================================
   A két blokk finom megkülönböztetése
   ========================================================= */

#product-bought-together-section
.product-view-recommendation-eyebrow {
    background: rgb(8 35 93 / 0.08);
    color: #08235d;
}

#product-category-recommendations-section {
    margin-top: 2.5rem;
}

#product-category-recommendations-section
.product-view-recommendation-eyebrow {
    background: rgb(13 177 156 / 0.11);
    color: #087f72;
}

/* =========================================================
   Tablet
   ========================================================= */

@media screen and (max-width: 1180px) {
    .product-view-recommendation-products {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }
}

@media screen and (max-width: 900px) {
    .product-view-recommendation-products {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}

/* =========================================================
   Mobil
   ========================================================= */

@media screen and (max-width: 768px) {
    .product-view-recommendation-section {
        margin-top: 2.25rem;
        padding-top: 1.5rem;
    }

    .product-view-recommendation-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.9rem;
        margin-bottom: 1.1rem;
    }

    .product-view-recommendation-link {
        width: 100%;
    }

    .product-view-recommendation-title {
        font-size: 1.65rem;
    }

    .product-view-recommendation-subtitle {
        margin-top: 0.45rem;
        font-size: 0.86rem;
    }

    .product-view-recommendation-products {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 0.75rem;
    }

    /*
     * Felülírja a közös mobilos 200 px-es fix szélességet.
     */
    .product-view-recommendation-products .home-product-card {
        min-width: 0;
        max-width: none;
        width: 100%;
        padding: 0.75rem;

        border-radius: 16px;

        scroll-snap-align: unset;
    }

    .product-view-recommendation-products .home-product-image-wrap {
        margin-bottom: 0.75rem;
        border-radius: 12px;
    }

    .product-view-recommendation-products .home-product-title {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .product-view-recommendation-products .home-product-meta {
        min-height: 0;
        margin-bottom: 0.65rem;

        font-size: 0.68rem;
    }

    .product-view-recommendation-products .home-product-stock {
        font-size: 0.62rem;
    }

    .product-view-recommendation-products .home-product-package {
        font-size: 0.68rem;
    }

    .product-view-recommendation-products .home-product-price {
        font-size: 1rem;
    }

    .product-view-recommendation-products .home-product-original-price {
        font-size: 0.68rem;
    }

    .product-view-recommendation-products .home-add-cart-btn {
        padding: 0.62rem 0.5rem;

        font-size: 0.7rem;
    }
}

/* =========================================================
   Kis mobil
   ========================================================= */

@media screen and (max-width: 420px) {
    .product-view-recommendation-section {
        margin-top: 2rem;
        padding-top: 1.25rem;
    }

    .product-view-recommendation-eyebrow {
        min-height: 25px;
        padding: 0.3rem 0.62rem;

        font-size: 0.64rem;
    }

    .product-view-recommendation-title {
        font-size: 1.45rem;
    }

    .product-view-recommendation-products {
        gap: 0.65rem;
    }

    .product-view-recommendation-products .home-product-card {
        padding: 0.65rem;
        border-radius: 14px;
    }

    .product-view-recommendation-products .home-product-title {
        font-size: 0.74rem;
    }

    .product-view-recommendation-products .home-product-meta {
        font-size: 0.62rem;
    }

    .product-view-recommendation-products .home-product-package {
        font-size: 0.62rem;
    }

    .product-view-recommendation-products .home-product-price {
        font-size: 0.9rem;
    }

    .product-view-recommendation-products .home-add-cart-btn {
        min-height: 34px;
        padding: 0.55rem 0.4rem;

        font-size: 0.64rem;
    }
}

/* =========================================================
   Csökkentett animáció
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .product-view-recommendation-products .home-product-card,
    .product-view-recommendation-link {
        transition: none;
    }
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
    margin-top: 4rem;
    padding: 3.5rem 0 1.5rem;

    border-top:
        1px solid
        rgb(8 35 93 / 0.08);

    background:
        linear-gradient(
            180deg,
            #f7f9fb 0%,
            #eef3f6 100%
        );

    color: #405260;
}

.site-footer-inner {
    width: 100%;
}

.site-footer-grid {
    display: grid;
    grid-template-columns:
        minmax(240px, 1.4fr)
        repeat(3, minmax(150px, 1fr));

    gap: 2.5rem;
}

.site-footer-brand {
    max-width: 360px;
}

.site-footer-logo {
    display: inline-flex;

    color: #08235d;

    font-family:
        "Instrument Serif",
        sans-serif;

    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;

    text-decoration: none;
}

.site-footer-description {
    margin: 1rem 0 0;

    color: #657582;

    font-size: 0.9rem;
    line-height: 1.65;
}

.site-footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;

    margin-top: 1rem;
}

.site-footer-contact a {
    color: #183c57;

    font-size: 0.86rem;
    font-weight: 600;

    text-decoration: none;
}

.site-footer-contact a:hover {
    color: #087f72;
}

.site-footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
}

.site-footer-column h2 {
    margin: 0 0 0.3rem;

    color: #08235d;

    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.25;
}

.site-footer-column a {
    color: #657582;

    font-size: 0.84rem;
    line-height: 1.45;

    text-decoration: none;

    transition:
        color 160ms ease,
        transform 160ms ease;
}

.site-footer-column a:hover {
    transform: translateX(2px);
    color: #087f72;
}

.site-footer-note {
    margin-top: 2.5rem;
    padding: 1rem 1.1rem;

    border:
        1px solid
        rgb(8 35 93 / 0.08);

    border-radius: 14px;

    background:
        rgb(255 255 255 / 0.62);
}

.site-footer-note p {
    margin: 0;

    color: #687986;

    font-size: 0.78rem;
    line-height: 1.55;
}

.site-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    margin-top: 1.5rem;
    padding-top: 1.25rem;

    border-top:
        1px solid
        rgb(8 35 93 / 0.08);

    color: #7b8994;

    font-size: 0.76rem;
}

.site-footer-bottom p {
    margin: 0;
}

.site-footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem 1rem;
}

/* =========================================================
   Tablet
   ========================================================= */

@media screen and (max-width: 960px) {
    .site-footer-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .site-footer-brand {
        max-width: none;
    }
}

/* =========================================================
   Mobil
   ========================================================= */

@media screen and (max-width: 640px) {
    .site-footer {
        margin-top: 3rem;
        padding: 2.5rem 0 1.25rem;
    }

    .site-footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .site-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-footer-bottom-links {
        justify-content: flex-start;
    }
}



/* =========================================================
   Kedvenc toast
   ========================================================= */

.product-favorite-message {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 10000;

    max-width:
        min(
            360px,
            calc(100vw - 2rem)
        );

    padding:
        0.85rem
        1rem;

    transform:
        translateY(16px);

    opacity: 0;

    border:
        1px solid
        rgb(8 35 93 / 0.08);

    border-radius: 14px;

    background: #08235d;
    color: #ffffff;

    box-shadow:
        0 18px 45px
        rgb(8 35 93 / 0.22);

    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.45;

    pointer-events: none;

    transition:
        transform 220ms ease,
        opacity 220ms ease;
}

.product-favorite-message.is-visible {
    transform:
        translateY(0);

    opacity: 1;
}

.product-favorite-message.is-error {
    background: #a42c3d;
}

@media screen and (max-width: 480px) {
    .product-favorite-message {
        right: 1rem;
        bottom: 1rem;
        left: 1rem;

        max-width: none;
    }
}

/* =========================================================
   Profil – kedvenc termékek
   ========================================================= */

.profile-favorites-list {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 1rem;

    margin-top: 1.5rem;
}

.profile-favorite-card {
    display: grid;
    grid-template-columns:
        112px
        minmax(0, 1fr);

    gap: 1rem;

    min-width: 0;
    padding: 1rem;

    border:
        1px solid
        rgb(8 35 93 / 0.08);

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 8px 24px
        rgb(8 35 93 / 0.045);

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.profile-favorite-card:hover {
    transform: translateY(-2px);

    border-color:
        rgb(13 177 156 / 0.2);

    box-shadow:
        0 14px 32px
        rgb(8 35 93 / 0.08);
}

.profile-favorite-card.is-removing {
    transform:
        scale(0.97);

    opacity: 0;
    pointer-events: none;
}

.profile-favorite-image-link {
    display: block;

    width: 112px;
    height: 112px;

    overflow: hidden;

    border-radius: 14px;

    background: #f7f8fa;
}

.profile-favorite-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.profile-favorite-image.is-empty {
    background:
        linear-gradient(
            135deg,
            #f5f6f8,
            #eceff2
        );
}

.profile-favorite-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;

    min-width: 0;
}

.profile-favorite-name {
    display: -webkit-box;
    overflow: hidden;

    color: #08235d;

    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.35;
    text-decoration: none;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.profile-favorite-name:hover {
    color: #087f72;
}

.profile-favorite-meta {
    overflow: hidden;

    margin: 0.35rem 0 0;

    color: #76828c;

    font-size: 0.73rem;
    line-height: 1.35;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-favorite-stock {
    margin: 0.5rem 0 0;

    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
}

.profile-favorite-stock.is-in-stock {
    color: #087f72;
}

.profile-favorite-stock.is-backorder {
    color: #a66b09;
}

.profile-favorite-stock.is-out-stock {
    color: #a53949;
}

.profile-favorite-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

.profile-favorite-price-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.profile-favorite-original-price {
    color: #8b969e;

    font-size: 0.7rem;
}

.profile-favorite-price {
    color: #08235d;

    font-size: 1rem;
    line-height: 1.15;
}

.profile-favorite-package {
    color: #7b8790;

    font-size: 0.68rem;
}

.profile-favorite-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.profile-favorite-open-btn,
.profile-favorite-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;
    padding: 0.5rem 0.75rem;

    border-radius: 999px;

    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}

.profile-favorite-open-btn {
    border:
        1px solid
        rgb(8 35 93 / 0.1);

    background: #ffffff;
    color: #08235d;
}

.profile-favorite-open-btn:hover {
    border-color:
        rgb(13 177 156 / 0.22);

    color: #087f72;
}

.profile-favorite-remove-btn {
    border:
        1px solid
        rgb(199 44 72 / 0.14);

    background: #fff6f7;
    color: #b82d48;
}

.profile-favorite-remove-btn:hover {
    border-color:
        rgb(199 44 72 / 0.25);

    background: #ffedef;
}

.profile-favorite-remove-btn:disabled {
    cursor: wait;
    opacity: 0.65;
}

/* =========================================================
   Tablet és mobil
   ========================================================= */

@media screen and (max-width: 960px) {
    .profile-favorites-list {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 560px) {
    .profile-favorite-card {
        grid-template-columns:
            82px
            minmax(0, 1fr);

        gap: 0.75rem;
        padding: 0.8rem;

        border-radius: 15px;
    }

    .profile-favorite-image-link {
        width: 82px;
        height: 82px;

        border-radius: 11px;
    }

    .profile-favorite-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-favorite-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-favorite-card,
    .profile-favorite-open-btn,
    .profile-favorite-remove-btn {
        transition: none;
    }
}

/* =========================================================
   Információs oldal
   ========================================================= */

.information-page {
    width: 100%;
    max-width: 980px;

    margin: 42px auto 80px;
}

.information-page-head {
    margin-bottom: 34px;
}

.information-page-eyebrow {
    display: inline-block;

    margin-bottom: 10px;

    color: #728094;

    font-family: Roboto, sans-serif;
    font-size: 13px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.information-page-title {
    margin: 0;

    color: #09245f;

    font-family: Merriweather, serif;
    font-size: clamp(
        30px,
        4vw,
        46px
    );
    font-weight: 700;
    line-height: 1.15;
}

.information-page-content {
    color: #435267;

    font-family: Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.8;
}

.information-page-content > :first-child {
    margin-top: 0;
}

.information-page-content > :last-child {
    margin-bottom: 0;
}

.information-page-content p {
    margin:
        0
        0
        18px;
}

.information-page-content h2 {
    margin:
        42px
        0
        16px;

    color: #09245f;

    font-family: Merriweather, serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
}

.information-page-content h3 {
    margin:
        32px
        0
        12px;

    color: #12366f;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.information-page-content ul,
.information-page-content ol {
    margin:
        0
        0
        22px
        24px;
}

.information-page-content li {
    margin-bottom: 7px;
}

.information-page-content a {
    color: #0b4f9c;

    font-weight: 600;

    text-decoration: underline;
    text-underline-offset: 3px;
}

.information-page-content strong {
    color: #24364c;
}

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

    .information-page {
        margin:
            24px
            auto
            56px;
    }

    .information-page-head {
        margin-bottom: 26px;
    }

    .information-page-content {
        font-size: 15px;
        line-height: 1.75;
    }

    .information-page-content h2 {
        margin-top: 34px;

        font-size: 23px;
    }

    .information-page-content h3 {
        margin-top: 28px;

        font-size: 19px;
    }
}

/* =========================================================
   Checkout – egyéb információk
   ========================================================= */

.checkout-field-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-top: 7px;

    color: #8a94a3;

    font-size: 12px;
    line-height: 1.4;
}

#checkoutCustomerNoteCounter {
    font-variant-numeric:
        tabular-nums;

    transition:
        color 160ms ease;
}

#checkoutCustomerNoteCounter.is-near-limit {
    color: #b7791f;

    font-weight: 600;
}

#checkoutCustomerNoteCounter.is-at-limit {
    color: #c53030;

    font-weight: 700;
}

.checkout-customer-note {
    min-height: 120px;

    resize: vertical;
}

/* =========================================================
   Egészségpénztár
   ========================================================= */

.checkout-health-fund-section {
    margin-top: 28px;
    padding-top: 24px;

    border-top:
        1px solid
        #e9edf2;
}

.checkout-health-fund-fields {
    margin-top: 20px;

    padding: 20px;

    border:
        1px solid
        #e2e7ee;

    border-radius: 12px;

    background:
        #fafbfc;
}

.checkout-health-fund-info {
    display: flex;
    flex-direction: column;

    gap: 4px;

    margin-bottom: 20px;
}

.checkout-health-fund-info strong {
    color: #172033;

    font-size: 15px;
    font-weight: 700;
}

.checkout-health-fund-info span {
    color: #788396;

    font-size: 13px;
    line-height: 1.5;
}

.checkout-health-fund-note {
    display: flex;
    flex-direction: column;

    gap: 4px;

    margin-top: 18px;

    padding: 14px 16px;

    border-radius: 10px;

    background:
        #f2f5f8;

    color: #697588;

    font-size: 12px;
    line-height: 1.55;
}

.checkout-health-fund-note strong {
    color: #344154;

    font-size: 12px;
    font-weight: 700;
}

.checkout-stripe-provider {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 16px;
    padding: 10px 12px;

    border:
        1px solid
        #e7ebf0;

    border-radius: 10px;

    background:
        #fafbfc;
}

.checkout-stripe-provider__logo {
    display: block;

    width: auto;
    height: 22px;

    flex: 0 0 auto;
}

.checkout-stripe-provider__text {
    margin: 0;

    color: #697588;

    font-size: 12px;
    line-height: 1.45;
}

.checkout-stripe-provider__text a {
    color: inherit;

    font-weight: 700;

    text-decoration:
        underline;

    text-underline-offset:
        2px;
}

.checkout-stripe-provider__text a:hover {
    color: #172033;
}

/* =========================================================
   Search page
   ========================================================= */

.search-page {
    width: 100%;

    padding:
        2rem
        1rem
        4rem;
}

/* =========================================================
   Header
   ========================================================= */

.search-page-header {
    max-width: 760px;

    margin:
        0 auto
        2rem;

    text-align: center;
}

.search-page-eyebrow {
    display: inline-block;

    margin-bottom: 0.4rem;

    color: #788396;

    font-size: 0.8rem;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.search-page-title {
    margin: 0;

    color: #06154B;

    font-size:
        clamp(
            2rem,
            5vw,
            3.5rem
        );

    line-height: 1.05;

    font-weight: 900;
    font-family: "Instrument Serif", sans-serif;
}

.search-page-summary {
    margin:
        0.75rem
        0
        0;

    color: #697588;

    font-size: 0.95rem;
    line-height: 1.5;
}

/* =========================================================
   Kereső
   ========================================================= */

.search-page-search {
    width: 100%;
    max-width: 860px;

    margin:
        0 auto
        1.75rem;
}

/* =========================================================
   Toolbar
   ========================================================= */

.search-page-toolbar {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    width: 100%;
    max-width: 1200px;

    margin:
        0 auto
        1.5rem;
}

.search-page-toolbar-left {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap:
        0.65rem
        1rem;
}

.search-page-toolbar-right {
    display: flex;

    align-items: center;

    gap: 0.75rem;
}

.search-filter-check {
    display: inline-flex;

    align-items: center;

    gap: 0.45rem;

    color: #344154;

    font-size: 0.9rem;
    font-weight: 500;

    cursor: pointer;

    user-select: none;
}

.search-filter-check input {
    width: 16px;
    height: 16px;

    margin: 0;

    accent-color: #06154B;

    cursor: pointer;
}

.search-sort-label {
    color: #697588;

    font-size: 0.85rem;

    white-space: nowrap;
}

.search-sort {
    min-width: 190px;
    min-height: 40px;
}

/* =========================================================
   Termék grid
   ========================================================= */

.search-page-products {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 1.25rem;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}

.search-product-card {
    min-width: 0;
    width: 100%;
    background: #fff;
}

/* =========================================================
   Találathoz kapcsolódó extra infó
   ========================================================= */

.search-product-ingredient {
    margin:
        0.4rem
        0
        0;

    color: #697588;

    font-size: 0.78rem;
    line-height: 1.4;
}

.search-product-ingredient strong {
    color: #06154B;

    font-weight: 700;
}

/* =========================================================
   Üres állapot
   ========================================================= */

.search-page-empty {
    grid-column:
        1 / -1;

    width: 100%;

    padding:
        4rem
        1rem;

    text-align: center;

    color: #697588;
}

.search-page-empty strong {
    display: block;

    margin-bottom: 0.5rem;

    color: #06154B;

    font-size: 1.2rem;
    font-weight: 800;
}

.search-page-empty p {
    margin: 0;

    line-height: 1.5;
}

/* =========================================================
   Lapozás
   ========================================================= */

.search-page-pagination {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 0.5rem;

    margin-top: 2rem;
}

.search-page-pagination button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border:
        1px solid
        #e1e6ed;

    border-radius: 999px;

    background: #fff;

    color: #06154B;

    font-size: 0.9rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.search-page-pagination button:hover {
    border-color: #06154B;
}

.search-page-pagination button:active {
    transform: scale(0.96);
}

.search-page-pagination button.is-active {
    background: #06154B;

    color: #fff;

    border-color: #06154B;
}

/* =========================================================
   Tablet
   ========================================================= */

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

    .search-page-products {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}

/* =========================================================
   Mobil
   ========================================================= */

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

    .search-page {
        padding:
            1.5rem
            0.75rem
            3rem;
    }

    .search-page-header {
        margin-bottom: 1.5rem;
    }

    .search-page-title {
        font-size: 2.2rem;
    }

    .search-page-summary {
        font-size: 0.9rem;
    }

    .search-page-search {
        margin-bottom: 1.25rem;
    }

    /* -----------------------------------------------------
       Toolbar mobil
       ----------------------------------------------------- */

    .search-page-toolbar {
        align-items: stretch;

        flex-direction: column;

        gap: 0.9rem;

        margin-bottom: 1rem;
    }

    .search-page-toolbar-left {
        gap:
            0.65rem
            1rem;
    }

    .search-page-toolbar-right {
        width: 100%;

        justify-content: space-between;
    }

    .search-sort {
        flex: 1;

        min-width: 0;
        width: 100%;
    }

    /* -----------------------------------------------------
       Mobilon KÉT OSZLOP
       ----------------------------------------------------- */

    .search-page-products {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 0.75rem;
    }

    .search-product-card {
        min-width: 0;
    }

    .search-product-ingredient {
        font-size: 0.72rem;
    }

    .search-page-pagination {
        margin-top: 1.5rem;
    }

    .search-page-pagination button {
        width: 38px;
        height: 38px;
    }
}

/* =========================================================
   Kis mobil
   ========================================================= */

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

    /*
     * Szándékosan marad 2 oszlop.
     */

    .search-page {
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }

    .search-page-products {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 0.55rem;
    }

    .search-page-toolbar-left {
        gap: 0.65rem;
    }

    .search-filter-check {
        font-size: 0.82rem;
    }

    .search-sort-label {
        font-size: 0.8rem;
    }

    .search-sort {
        font-size: 0.85rem;
    }
}

/* =========================================================
   Search toolbar – custom controls
   ========================================================= */

.search-filter-check {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 0.55rem;

    color: #344154;

    font-size: 0.9rem;
    font-weight: 600;

    cursor: pointer;

    user-select: none;
}

/* natív checkbox elrejtése */

.search-filter-check input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

/* saját checkbox */

.search-filter-check span {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 0.55rem;
}

.search-filter-check span::before {
    content: "";

    display: inline-flex;

    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    border:
        1.5px solid
        rgba(6, 21, 75, 0.22);

    border-radius: 6px;

    background: #fff;

    box-shadow:
        0 2px 6px
        rgba(6, 21, 75, 0.04);

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.search-filter-check input:checked
+ span::before {
    background: #06154B;

    border-color: #06154B;

    box-shadow:
        0 4px 12px
        rgba(6, 21, 75, 0.18);
}

/* pipa */

.search-filter-check input:checked
+ span::after {
    content: "";

    position: absolute;

    left: 7px;
    top: 50%;

    width: 6px;
    height: 10px;

    border:
        solid #fff;

    border-width:
        0
        2px
        2px
        0;

    transform:
        translateY(-58%)
        rotate(45deg);
}

/* =========================================================
   Select
   ========================================================= */

.search-page-toolbar-right {
    display: flex;
    align-items: center;

    gap: 0.75rem;
}

.search-sort-label {
    color: #788396;

    font-size: 0.82rem;
    font-weight: 600;

    white-space: nowrap;
}

.search-sort {
    min-width: 190px;
    min-height: 44px;

    padding:
        0
        2.6rem
        0
        1rem;

    border:
        1px solid
        rgba(6, 21, 75, 0.14);

    border-radius: 999px;

    background-color: #fff;

    color: #06154B;

    font-size: 0.9rem;
    font-weight: 700;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2306154B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position:
        right 0.95rem
        center;

    background-size:
        15px;

    box-shadow:
        0 4px 14px
        rgba(6, 21, 75, 0.05);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.search-sort:hover {
    border-color:
        rgba(6, 21, 75, 0.28);
}

.search-sort:focus {
    outline: none;

    border-color: #06154B;

    box-shadow:
        0 0 0 3px
        rgba(6, 21, 75, 0.08);
}

.profile-coupon-card.is-used {
    opacity: 0.72;
}

.profile-coupon-card.is-used
.profile-coupon-code {
    text-decoration: line-through;

    text-decoration-thickness: 1px;

    text-decoration-color:
        rgba(6, 21, 75, 0.35);
}

.profile-coupon-used-info {
    color: #697588;
}

.profile-coupon-used-info strong {
    color: #344154;
}

/* =========================================================
   AI search page
   ========================================================= */

.ai-search-page {
    width: 100%;
    max-width: 1180px;

    margin:
    0
    auto;

    padding:
    44px
    0
    80px;
}

/* =========================================================
   Header
   ========================================================= */

.ai-search-header {
    max-width: 720px;

    margin:
    0
    auto
    34px;

    text-align: center;
}

.ai-search-eyebrow {
    display: block;

    margin-bottom: 8px;

    color:
    rgba(15, 31, 56, 0.48);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ai-search-title {
    margin: 0;

    color: #0f1f38;

    font-family: "Instrument Serif", sans-serif;

    font-size:
    clamp(
        42px,
        5vw,
        64px
    );

    font-weight: 600;
    line-height: 1.02;
}

.ai-search-lead {
    max-width: 580px;

    margin:
    16px
    auto
    0;

    color:
    rgba(15, 31, 56, 0.62);

    font-size: 16px;
    line-height: 1.65;
}

/* =========================================================
   Main AI box
   ========================================================= */

.ai-search-box {
    position: relative;

    max-width: 860px;

    margin:
    0
    auto;

    padding: 24px;

    border:
    1px solid
    rgba(15, 31, 56, 0.08);

    border-radius: 26px;

    background:
    linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.98),
        rgba(17, 181, 154, 0.045)
    );

    box-shadow:
    0 18px 50px
    rgba(15, 31, 56, 0.07);
}

.ai-search-box-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 16px;
}

.ai-search-box-label {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #0f1f38;

    font-size: 14px;
    font-weight: 700;
}

.ai-search-spark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #0f1f38;
    color: #ffffff;
}

.ai-search-spark svg {
    width: 16px;
    height: 16px;
}

.ai-search-limit {
    padding:
    7px
    11px;

    border:
    1px solid
    rgba(15, 31, 56, 0.08);

    border-radius: 999px;

    background:
    rgba(255, 255, 255, 0.75);

    color:
    rgba(15, 31, 56, 0.55);

    font-size: 12px;
    white-space: nowrap;
}

.ai-search-limit strong {
    color: #0f1f38;
}

/* =========================================================
   Textarea
   ========================================================= */

.ai-search-input-wrap {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(15, 31, 56, 0.12);

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 5px 18px
        rgba(15, 31, 56, 0.035);

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease;
}

.ai-search-input-wrap:focus-within {
    border-color:
        rgba(13, 178, 151, 0.75);

    animation:
        ai-rainbow-glow
        3.2s
        linear
        infinite;
}

@keyframes ai-rainbow-glow {
    0% {
        box-shadow:
            0 0 0 3px
            rgba(13, 178, 151, 0.18),

            0 0 18px
            rgba(13, 178, 151, 0.34),

            0 0 38px
            rgba(13, 178, 151, 0.18),

            0 10px 30px
            rgba(15, 31, 56, 0.08);
    }

    25% {
        box-shadow:
            0 0 0 3px
            rgba(70, 110, 255, 0.18),

            0 0 18px
            rgba(70, 110, 255, 0.34),

            0 0 38px
            rgba(70, 110, 255, 0.18),

            0 10px 30px
            rgba(15, 31, 56, 0.08);
    }

    50% {
        box-shadow:
            0 0 0 3px
            rgba(169, 79, 255, 0.18),

            0 0 18px
            rgba(169, 79, 255, 0.34),

            0 0 38px
            rgba(169, 79, 255, 0.18),

            0 10px 30px
            rgba(15, 31, 56, 0.08);
    }

    75% {
        box-shadow:
            0 0 0 3px
            rgba(255, 91, 145, 0.18),

            0 0 18px
            rgba(255, 91, 145, 0.34),

            0 0 38px
            rgba(255, 91, 145, 0.18),

            0 10px 30px
            rgba(15, 31, 56, 0.08);
    }

    100% {
        box-shadow:
            0 0 0 3px
            rgba(13, 178, 151, 0.18),

            0 0 18px
            rgba(13, 178, 151, 0.34),

            0 0 38px
            rgba(13, 178, 151, 0.18),

            0 10px 30px
            rgba(15, 31, 56, 0.08);
    }
}

.ai-search-input {
    display: block;

    width: 100%;
    min-height: 120px;

    padding:
    18px
    20px
    10px;

    resize: vertical;

    border: 0;
    outline: 0;

    background: transparent;

    color: #0f1f38;

    font: inherit;
    font-size: 16px;
    line-height: 1.6;
}

.ai-search-input::placeholder {
    color:
    rgba(15, 31, 56, 0.36);
}

/* =========================================================
   Input footer
   ========================================================= */

.ai-search-input-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding:
    8px
    10px
    10px
    20px;
}

.ai-search-counter {
    color:
    rgba(15, 31, 56, 0.38);

    font-size: 12px;
    font-variant-numeric:
    tabular-nums;
}

.ai-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;

    padding:
    0
    20px;

    border: 0;
    border-radius: 999px;

    background: #0db297;
    color: #ffffff;

    font: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
    0 7px 18px
    rgba(13, 178, 151, 0.18);

    transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    opacity 140ms ease;
}

.ai-search-submit:hover {
    transform:
    translateY(-1px);

    box-shadow:
    0 9px 22px
    rgba(13, 178, 151, 0.24);
}

.ai-search-submit:active {
    transform:
    translateY(0);
}

.ai-search-submit:disabled {
    opacity: 0.55;

    cursor:
    not-allowed;

    transform: none;
    box-shadow: none;
}

.ai-search-submit svg {
    width: 16px;
    height: 16px;
}

/* =========================================================
   Disclaimer
   ========================================================= */

.ai-search-disclaimer {
    max-width: 700px;

    margin:
    14px
    auto
    0;

    color:
    rgba(15, 31, 56, 0.44);

    font-size: 11px;
    line-height: 1.55;
    text-align: center;
}

/* =========================================================
   Example prompts
   ========================================================= */

.ai-search-examples {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;

    max-width: 860px;

    margin:
    18px
    auto
    0;
}

.ai-search-examples-label {
    margin-right: 2px;

    color:
    rgba(15, 31, 56, 0.45);

    font-size: 12px;
    font-weight: 600;
}

.ai-search-example {
    padding:
    8px
    12px;

    border:
    1px solid
    rgba(15, 31, 56, 0.09);

    border-radius: 999px;

    background: #ffffff;

    color:
    rgba(15, 31, 56, 0.72);

    font: inherit;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition:
    border-color 140ms ease,
    color 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}

.ai-search-example:hover {
    border-color:
    rgba(13, 178, 151, 0.28);

    background:
    rgba(13, 178, 151, 0.045);

    color: #0f1f38;

    transform:
    translateY(-1px);
}

/* =========================================================
   Status / medical notice
   ========================================================= */

.ai-search-notice {
    max-width: 860px;

    margin: 
    24px
    auto
    0;

    padding:
    16px
    18px;

    border-radius: 16px;

    background:
    rgba(15, 31, 56, 0.045);

    color: #0f1f38;

    font-size: 14px;
    line-height: 1.6;
}

.ai-search-notice.is-warning {
    border:
    1px solid
    rgba(187, 125, 0, 0.18);

    background:
    rgba(255, 191, 51, 0.10);
}

.ai-search-notice.is-danger {
    border:
    1px solid
    rgba(194, 54, 54, 0.16);

    background:
    rgba(194, 54, 54, 0.06);
}

/* =========================================================
   Result header
   ========================================================= */

.ai-search-result-header {
    max-width: 860px;

    margin:
    52px
    auto
    26px;

    text-align: center;
}

.ai-search-result-eyebrow {
    display: block;

    margin-bottom: 7px;

    color: #0db297;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ai-search-result-title {
    margin: 0;

    color: #0f1f38;

    font-family:
    "DM Serif Display",
    Georgia,
    serif;

    font-size:
    clamp(
        30px,
        4vw,
        42px
    );

    font-weight: 400;
    line-height: 1.08;
}

.ai-search-result-message {
    max-width: 660px;

    margin:
    12px
    auto
    0;

    color:
    rgba(15, 31, 56, 0.58);

    font-size: 14px;
    line-height: 1.65;
}

/* =========================================================
   Results
   ========================================================= */

.ai-search-products {
    margin-top: 0;
}

/* =========================================================
   Utility
   ========================================================= */

.ai-search-page .is-hidden {
    display: none !important;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {

    .ai-search-page {
        padding:
        26px
        0
        56px;
    }

    .ai-search-header {
        margin-bottom: 24px;
    }

    .ai-search-title {
        font-size: 42px;
    }

    .ai-search-lead {
        font-size: 14px;
    }

    .ai-search-box {
        padding: 16px;

        border-radius: 21px;
    }

    .ai-search-box-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .ai-search-limit {
        align-self: flex-start;
    }

    .ai-search-input {
        min-height: 130px;

        padding:
        16px
        16px
        8px;

        font-size: 16px;
    }

    .ai-search-input-bottom {
        align-items: stretch;
        flex-direction: column;

        padding:
        6px
        8px
        8px;
    }

    .ai-search-counter {
        padding:
        0
        8px;
    }

    .ai-search-submit {
        width: 100%;
    }

    .ai-search-examples {
        justify-content: flex-start;
    }

    .ai-search-examples-label {
        width: 100%;

        margin-bottom: 2px;
    }

    .ai-search-result-header {
        margin-top: 38px;

        text-align: left;
    }

}

/* =========================================================
   AI search help
   ========================================================= */

.ai-search-help {
    margin:
    12px
    4px
    0;

    color:
    rgba(15, 31, 56, 0.50);

    font-size: 12px;
    line-height: 1.55;
}

/* =========================================================
   Loading
   ========================================================= */

.ai-search-loading {
    display: flex;
    align-items: center;
    gap: 14px;

    max-width: 860px;

    margin:
    28px
    auto
    0;

    padding:
    18px
    20px;

    border:
    1px solid
    rgba(13, 178, 151, 0.12);

    border-radius: 18px;

    background:
    rgba(13, 178, 151, 0.045);

    color: #0f1f38;
}

.ai-search-loading-spinner {
    flex: 0 0 auto;

    width: 22px;
    height: 22px;

    border:
    2px solid
    rgba(13, 178, 151, 0.18);

    border-top-color:
    #0db297;

    border-radius: 50%;

    animation:
    ai-search-spin
    700ms
    linear
    infinite;
}

.ai-search-loading strong,
.ai-search-loading span {
    display: block;
}

.ai-search-loading strong {
    margin-bottom: 3px;

    font-size: 13px;
}

.ai-search-loading span {
    color:
    rgba(15, 31, 56, 0.52);

    font-size: 12px;
}

@keyframes ai-search-spin {

    to {
        transform:
        rotate(360deg);
    }

}

/* =========================================================
   Result footer
   ========================================================= */

.ai-search-result-footer {
    margin-top: 28px;

    text-align: center;
}

.ai-search-result-footer p {
    margin:
    0
    0
    10px;

    color:
    rgba(15, 31, 56, 0.48);

    font-size: 12px;
}

.ai-search-again {
    padding:
    9px
    15px;

    border:
    1px solid
    rgba(15, 31, 56, 0.10);

    border-radius: 999px;

    background: #ffffff;
    color: #0f1f38;

    font: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

/* =========================================================
   AI search products
   ========================================================= */

.ai-search-products {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
    gap: 18px;
    margin-top: 28px;
}

/* =========================================================
   Product card
   ========================================================= */

.ai-search-product {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    overflow: hidden;

    background: #fff;

    border:
        1px solid
        rgb(8 30 63 / 0.08);

    border-radius: 18px;

    box-shadow:
        0 2px 5px rgb(8 30 63 / 0.025),
        0 12px 30px rgb(8 30 63 / 0.035);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

@media (hover: hover) {

    .ai-search-product:hover {
        transform:
            translateY(-3px);

        border-color:
            rgb(8 30 63 / 0.14);

        box-shadow:
            0 4px 8px rgb(8 30 63 / 0.035),
            0 18px 38px rgb(8 30 63 / 0.075);
    }
}

/* =========================================================
   Image
   ========================================================= */

.ai-search-product-image {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 1 / 0.82;

    padding: 22px;

    overflow: hidden;

    background: #fff;
}

.ai-search-product-image img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 190px;
    max-height: 190px;

    object-fit: contain;

    transition:
        transform 220ms ease;
}

@media (hover: hover) {

    .ai-search-product:hover
    .ai-search-product-image img {
        transform:
            scale(1.035);
    }
}

/* =========================================================
   Discount
   ========================================================= */

.ai-search-product-discount {
    position: absolute;
    top: 14px;
    left: 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 28px;

    padding:
        5px
        9px;

    color: #fff;
    background: #e83434;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    box-shadow:
        0 4px 12px
        rgb(232 52 52 / 0.18);
}

/* =========================================================
   Body
   ========================================================= */

.ai-search-product-body {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding:
        0
        18px
        18px;
}

/* =========================================================
   Meta
   ========================================================= */

.ai-search-product-meta {
    margin-bottom: 7px;

    overflow: hidden;

    color:
        rgb(8 30 63 / 0.52);

    font-size: 11px;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   Title
   ========================================================= */

.ai-search-product-title {
    margin:
        0
        0
        8px;

    color: #081e3f;

    font-size: 16px;
    font-weight: 650;
    line-height: 1.28;

    letter-spacing:
        -0.015em;
}

.ai-search-product-title a {
    display:
        -webkit-box;

    overflow:
        hidden;

    color:
        inherit;

    text-decoration:
        none;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;
}

.ai-search-product-title a:hover {
    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        3px;
}

/* =========================================================
   Package
   ========================================================= */

.ai-search-product-package {
    min-height: 18px;
    margin-bottom: 10px;

    color:
        rgb(8 30 63 / 0.58);

    font-size: 12px;
    line-height: 1.4;
}

/* =========================================================
   Price
   ========================================================= */

.ai-search-product-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;

    gap:
        5px
        9px;

    margin-bottom: 15px;
}

.ai-search-product-price {
    color: #081e3f;

    font-size: 18px;
    font-weight: 750;
    line-height: 1;

    letter-spacing:
        -0.025em;
}

.ai-search-product-original-price {
    color:
        rgb(8 30 63 / 0.38);

    font-size: 12px;
    font-weight: 500;

    text-decoration:
        line-through;
}

/* =========================================================
   AI reason
   ========================================================= */

.ai-search-product-reason {
    margin-top: auto;
    margin-bottom: 15px;

    padding:
        12px
        13px;

    background:
        linear-gradient(
            135deg,
            rgb(21 190 157 / 0.07),
            rgb(21 190 157 / 0.025)
        );

    border:
        1px solid
        rgb(21 190 157 / 0.13);

    border-radius: 12px;
}

.ai-search-product-reason-title {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-bottom: 6px;

    color: #159b83;

    font-size: 10px;
    font-weight: 750;

    letter-spacing:
        0.055em;

    text-transform:
        uppercase;
}

.ai-search-product-reason-title svg {
    flex: 0 0 auto;

    width: 14px;
    height: 14px;
}

.ai-search-product-reason p {
    display:
        -webkit-box;

    margin: 0;
    overflow: hidden;

    color:
        rgb(8 30 63 / 0.72);

    font-size: 12px;
    line-height: 1.5;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        4;
}

/* =========================================================
   CTA
   ========================================================= */

.ai-search-product-action {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-height: 42px;

    padding:
        10px
        14px;

    color: #fff;
    background: #081e3f;

    border-radius: 11px;

    font-size: 12px;
    font-weight: 650;

    text-decoration: none;

    transition:
        transform 160ms ease,
        opacity 160ms ease;
}

.ai-search-product-action svg {
    flex: 0 0 auto;

    width: 16px;
    height: 16px;

    transition:
        transform 160ms ease;
}

@media (hover: hover) {

    .ai-search-product-action:hover {
        opacity: 0.92;
    }

    .ai-search-product-action:hover svg {
        transform:
            translateX(3px);
    }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 900px) {

    .ai-search-products {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 560px) {

    .ai-search-products {
        display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

        margin-top: 22px;
    }

    .ai-search-product {
        border-radius: 16px;
    }

    .ai-search-product-image {
        aspect-ratio: 1 / 0.72;

        padding: 20px;
    }

    .ai-search-product-body {
        padding:
            0
            16px
            16px;
    }

    .ai-search-product-title {
        font-size: 15px;
    }

    .ai-search-product-price {
        font-size: 17px;
    }
}

/* =========================================================
   AI search history
   ========================================================= */

.ai-search-history {
    width: 100%;
    max-width: 920px;
    margin: 42px auto 0;
}


/* =========================================================
   Header
   ========================================================= */

.ai-search-history-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 16px;
}

.ai-search-history-eyebrow {
    display: block;

    margin-bottom: 4px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: #8a919d;
}

.ai-search-history-title {
    margin: 0;

    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;

    color: #17243a;
}


/* =========================================================
   Clear button
   ========================================================= */

.ai-search-history-clear {
    flex: 0 0 auto;

    appearance: none;

    padding: 8px 12px;

    border: 0;
    border-radius: 10px;

    background: transparent;

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    color: #7b8491;

    cursor: pointer;

    transition:
        color 160ms ease,
        background-color 160ms ease;
}

.ai-search-history-clear:hover {
    color: #17243a;

    background:
        rgba(23, 36, 58, 0.055);
}

.ai-search-history-clear:focus-visible {
    outline: 2px solid #17243a;
    outline-offset: 2px;
}


/* =========================================================
   List
   ========================================================= */

.ai-search-history-list {
    display: grid;
    gap: 10px;
}


/* =========================================================
   History item
   ========================================================= */

.ai-search-history-item {
    appearance: none;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 17px 18px;

    border:
        1px solid
        rgba(23, 36, 58, 0.08);

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 2px 8px
        rgba(20, 32, 50, 0.025);

    text-align: left;
    font: inherit;

    color: inherit;

    cursor: pointer;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.ai-search-history-item:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(23, 36, 58, 0.14);

    box-shadow:
        0 8px 24px
        rgba(20, 32, 50, 0.07);
}

.ai-search-history-item:active {
    transform:
        translateY(0);
}

.ai-search-history-item:focus-visible {
    outline:
        2px solid
        #17243a;

    outline-offset:
        2px;
}


/* =========================================================
   Item content
   ========================================================= */

.ai-search-history-item-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ai-search-history-item-query {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;

    color: #253248;
}

.ai-search-history-item-meta {
    display: block;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;

    color: #9299a4;
}


/* =========================================================
   Arrow
   ========================================================= */

.ai-search-history-item-arrow {
    flex:
        0 0
        32px;

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(23, 36, 58, 0.055);

    color: #536074;

    transition:
        transform 160ms ease,
        color 160ms ease,
        background-color 160ms ease;
}

.ai-search-history-item-arrow svg {
    display: block;

    width: 17px;
    height: 17px;
}

.ai-search-history-item:hover
.ai-search-history-item-arrow {
    transform:
        translateX(2px);

    color: #17243a;

    background:
        rgba(23, 36, 58, 0.09);
}


/* =========================================================
   Hidden
   ========================================================= */

.ai-search-history.is-hidden {
    display: none;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (
    max-width: 640px
) {

    .ai-search-history {
        margin-top: 32px;
    }

    .ai-search-history-header {
        align-items: center;
        gap: 16px;

        margin-bottom: 13px;
    }

    .ai-search-history-title {
        font-size: 19px;
    }

    .ai-search-history-clear {
        padding:
            7px 8px;

        font-size: 12px;
    }

    .ai-search-history-item {
        gap: 14px;

        padding:
            15px 14px;

        border-radius: 14px;
    }

    .ai-search-history-item-query {
        font-size: 14px;
    }

    .ai-search-history-item-arrow {
        flex-basis: 30px;

        width: 30px;
        height: 30px;
    }

    .ai-search-history-item-arrow svg {
        width: 16px;
        height: 16px;
    }
}

/* =========================================================
   AI search – product actions
   ========================================================= */

.ai-search-product-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-top: auto;
    padding-top: 4px;
}

/* =========================================================
   Product view – secondary action
   ========================================================= */

.ai-search-product-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    width: 100%;
    min-height: 42px;

    padding:
    9px
    12px;

    border:
    1px solid
    #e2e7ec;

    border-radius:
    10px;

    background:
    #ffffff;

    color:
    #152333;

    font-size:
    12px;

    font-weight:
    700;

    line-height:
    1.2;

    text-decoration:
    none;

    cursor:
    pointer;

    transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.ai-search-product-action svg {
    flex:
    0 0 auto;

    width:
    16px;

    height:
    16px;

    transition:
    transform 160ms ease;
}

.ai-search-product-action:hover {
    border-color:
    #cbd3dc;

    background:
    #f8fafc;

    color:
    #0c1825;

    box-shadow:
    0 4px 12px
    rgb(15 23 42 / 0.05);
}

.ai-search-product-action:hover svg {
    transform:
    translateX(2px);
}

.ai-search-product-action:active {
    transform:
    translateY(1px);
}


/* =========================================================
   Add to cart – primary action
   ========================================================= */

.ai-search-product-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 42px;

    padding:
    9px
    12px;

    border:
    1px solid
    #10243b;

    border-radius:
    10px;

    background:
    #10243b;

    color:
    #ffffff;

    font: inherit;

    font-size:
    12px;

    font-weight:
    700;

    line-height:
    1.2;

    text-align:
    center;

    cursor:
    pointer;

    appearance:
    none;

    -webkit-appearance:
    none;

    transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease;
}

.ai-search-product-cart-btn:hover:not(:disabled) {
    background:
    #1a314b;

    border-color:
    #1a314b;

    box-shadow:
    0 5px 14px
    rgb(15 35 58 / 0.16);
}

.ai-search-product-cart-btn:active:not(:disabled) {
    transform:
    translateY(1px);
}


/* =========================================================
   Add to cart – loading
   ========================================================= */

.ai-search-product-cart-btn.is-loading {
    position:
    relative;

    cursor:
    wait;

    opacity:
    0.72;
}


/* =========================================================
   Add to cart – disabled
   ========================================================= */

.ai-search-product-cart-btn:disabled,
.ai-search-product-cart-btn.is-disabled {
    border-color:
    #e2e6ea;

    background:
    #eef1f4;

    color:
    #8a949e;

    cursor:
    not-allowed;

    box-shadow:
    none;

    opacity:
    1;
}


/* =========================================================
   Product stock / expiry
   ========================================================= */

.ai-search-product-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap:
    4px
    8px;

    margin-top:
    6px;

    color:
    #697681;

    font-size:
    11px;

    line-height:
    1.35;
}

.ai-search-product-stock,
.ai-search-product-expiry {
    display:
    inline-flex;

    align-items:
    center;
}

.ai-search-product-stock::before {
    content:
    "";

    display:
    inline-block;

    flex:
    0 0 auto;

    width:
    6px;

    height:
    6px;

    margin-right:
    5px;

    border-radius:
    50%;

    background:
    #aab2ba;
}

.ai-search-product-stock.is-in-stock::before {
    background:
    #39a96b;
}

.ai-search-product-stock.is-backorder::before {
    background:
    #e2a62d;
}

.ai-search-product-stock.is-out-stock::before {
    background:
    #c7cdd3;
}

.ai-search-product-expiry::before {
    content:
    "·";

    margin-right:
    8px;

    color:
    #b3bac1;
}


/* =========================================================
   Product image
   ========================================================= */

.ai-search-product-image {
    position:
    relative;

    display:
    flex;

    align-items:
    center;

    justify-content:
    center;

    overflow:
    hidden;

    background:
    #ffffff;
}

.ai-search-product-img {
    display:
    block;

    width:
    100%;

    height:
    100%;

    object-fit:
    contain;

    object-position:
    center;
}

.ai-search-product-image-placeholder {
    display:
    block;

    width:
    42px;

    height:
    42px;

    border:
    1px solid
    #e6eaee;

    border-radius:
    10px;

    background:
    #f6f8fa;
}


/* =========================================================
   Package
   ========================================================= */

.ai-search-product-package {
    margin-top:
    3px;

    color:
    #8a949e;

    font-size:
    11px;

    line-height:
    1.3;
}


/* =========================================================
   Price row
   ========================================================= */

.ai-search-product-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;

    margin-top:
    8px;
}

.ai-search-product-original-price {
    color:
    #98a1aa;

    font-size:
    11px;

    font-weight:
    500;
}

.ai-search-product-original-price s {
    text-decoration-thickness:
    1px;
}

.ai-search-product-price {
    color:
    #10243b;

    font-size:
    16px;

    font-weight:
    800;

    line-height:
    1;
}

.ai-search-product-price.is-sale {
    color:
    #10243b;
}


/* =========================================================
   AI reason spacing
   ========================================================= */

.ai-search-product-reason {
    margin-top:
    10px;
}


/* =========================================================
   Focus
   ========================================================= */

.ai-search-product-action:focus-visible,
.ai-search-product-cart-btn:focus-visible {
    outline:
    2px solid
    #10243b;

    outline-offset:
    2px;
}


/* =========================================================
   Small screens
   ========================================================= */

@media (
    max-width: 640px
) {

    .ai-search-product-action,
    .ai-search-product-cart-btn {
        min-height:
        40px;

        padding:
        8px
        10px;

        font-size:
        11px;
    }

    .ai-search-product-data {
        font-size:
        10px;
    }

    .ai-search-product-price {
        font-size:
        15px;
    }
}

/* =========================================================
   AI search – original query
   ========================================================= */

.ai-search-result-query {
    position: relative;

    margin:
    0
    0
    24px;

    padding:
    16px
    18px;

    border:
    1px solid
    #e3e8ed;

    border-radius:
    14px;

    background:
    #ffffff;

    box-shadow:
    0 3px 12px
    rgb(15 23 42 / 0.035);
}

.ai-search-result-query.is-hidden {
    display:
    none;
}


/* =========================================================
   Label
   ========================================================= */

.ai-search-result-query-label {
    display:
    block;

    margin-bottom:
    5px;

    color:
    #8a949e;

    font-size:
    11px;

    font-weight:
    700;

    line-height:
    1.25;

    letter-spacing:
    0.04em;

    text-transform:
    uppercase;
}


/* =========================================================
   Query
   ========================================================= */

.ai-search-result-query p {
    margin:
    0;

    color:
    #344154;

    font-size:
    15px;

    font-weight:
    500;

    line-height:
    1.5;

    overflow-wrap:
    anywhere;
}


/* =========================================================
   Finom bal accent
   ========================================================= */

.ai-search-result-query::before {
    content:
    "";

    position:
    absolute;

    top:
    15px;

    bottom:
    15px;

    left:
    0;

    width:
    3px;

    border-radius:
    0
    3px
    3px
    0;

    background:
    #10243b;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (
    max-width: 640px
) {

    .ai-search-result-query {
        margin-bottom:
        18px;

        padding:
        14px
        15px;
    }

    .ai-search-result-query-label {
        font-size:
        10px;
    }

    .ai-search-result-query p {
        font-size:
        14px;

        line-height:
        1.45;
    }
}

/* =========================================================
   AI search – login required
   ========================================================= */

.ai-search-login-required {
    display:
    flex;

    align-items:
    flex-start;

    gap:
    18px;

    margin-top:
    30px;

    padding:
    26px;

    border:
    1px solid
    #e3e8ed;

    border-radius:
    20px;

    background:
    #ffffff;

    box-shadow:
    0 6px 24px
    rgb(15 23 42 / 0.05);
}


/* =========================================================
   Icon
   ========================================================= */

.ai-search-login-required-icon {
    display:
    flex;

    align-items:
    center;

    justify-content:
    center;

    flex:
    0 0 auto;

    width:
    48px;

    height:
    48px;

    border-radius:
    14px;

    background:
    #eef9f7;

    color:
    #158c7e;
}

.ai-search-login-required-icon svg {
    width:
    24px;

    height:
    24px;
}


/* =========================================================
   Content
   ========================================================= */

.ai-search-login-required-content {
    min-width:
    0;
}

.ai-search-login-required-eyebrow {
    display:
    block;

    margin-bottom:
    5px;

    color:
    #158c7e;

    font-size:
    11px;

    font-weight:
    700;

    line-height:
    1.2;

    letter-spacing:
    0.06em;

    text-transform:
    uppercase;
}

.ai-search-login-required h2 {
    margin:
    0;

    color:
    #172033;

    font-size:
    21px;

    font-weight:
    700;

    line-height:
    1.3;
}

.ai-search-login-required p {
    max-width:
    620px;

    margin:
    9px
    0
    0;

    color:
    #6d7785;

    font-size:
    14px;

    line-height:
    1.6;
}


/* =========================================================
   Actions
   ========================================================= */

.ai-search-login-required-actions {
    display:
    flex;

    align-items:
    center;

    flex-wrap:
    wrap;

    gap:
    10px;

    margin-top:
    20px;
}

.ai-search-login-required-primary,
.ai-search-login-required-secondary {
    display:
    inline-flex;

    align-items:
    center;

    justify-content:
    center;

    gap:
    9px;

    min-height:
    44px;

    padding:
    0
    18px;

    border-radius:
    11px;

    font-size:
    13px;

    font-weight:
    700;

    text-decoration:
    none;

    transition:
    transform 150ms ease,
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.ai-search-login-required-primary {
    background:
    #10243b;

    color:
    #ffffff;
}

.ai-search-login-required-primary svg {
    width:
    17px;

    height:
    17px;
}

.ai-search-login-required-primary:hover {
    color:
    #ffffff;

    transform:
    translateY(-1px);

    box-shadow:
    0 5px 14px
    rgb(16 36 59 / 0.16);
}

.ai-search-login-required-secondary {
    border:
    1px solid
    #dfe5ea;

    background:
    #ffffff;

    color:
    #344154;
}

.ai-search-login-required-secondary:hover {
    border-color:
    #cbd3db;

    background:
    #f8fafb;

    color:
    #172033;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (
    max-width: 640px
) {

    .ai-search-login-required {
        flex-direction:
        column;

        gap:
        15px;

        margin-top:
        22px;

        padding:
        20px;

        border-radius:
        16px;
    }

    .ai-search-login-required-icon {
        width:
        44px;

        height:
        44px;
    }

    .ai-search-login-required h2 {
        font-size:
        18px;
    }

    .ai-search-login-required-actions {
        align-items:
        stretch;

        flex-direction:
        column;

        width:
        100%;
    }

    .ai-search-login-required-primary,
    .ai-search-login-required-secondary {
        width:
        100%;
    }
}

/* =========================================================
   AI kereső – typewriter példák
   ========================================================= */

.ai-search-typer-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    margin:
        2rem
        auto
        2.2rem;

    padding:
        0 1rem;
}

/* =========================================================
   Typewriter pill
   ========================================================= */

.ai-search-typer {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    gap:
        0.75rem;

    width:
        auto;

    max-width:
        min(
            100%,
            620px
        );

    min-height:
        54px;

    margin:
        0;

    padding:
        0.85rem
        1.25rem;

    border:
        1px solid
        rgb(6 21 75 / 0.08);

    border-radius:
        999px;

    outline:
        0;

    background:
        rgb(255 255 255 / 0.92);

    color:
        #06154b;

    box-shadow:
        0 8px 30px
        rgb(6 21 75 / 0.07);

    font:
        inherit;

    cursor:
        pointer;

    -webkit-appearance:
        none;

    appearance:
        none;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

.ai-search-typer:hover {
    transform:
        translateY(-2px);

    border-color:
        rgb(6 21 75 / 0.13);

    background:
        #ffffff;

    box-shadow:
        0 12px 34px
        rgb(6 21 75 / 0.11);
}

.ai-search-typer:active {
    transform:
        translateY(0);
}

.ai-search-typer:focus-visible {
    border-color:
        rgb(6 21 75 / 0.22);

    box-shadow:
        0 0 0 4px
        rgb(6 21 75 / 0.08),
        0 12px 34px
        rgb(6 21 75 / 0.1);
}

/* =========================================================
   Ikon
   ========================================================= */

.ai-search-typer-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex:
        0 0 auto;

    width:
        32px;

    height:
        32px;

    border-radius:
        50%;

    background:
        #06154b;

    color:
        #ffffff;
}

.ai-search-typer-icon svg {
    display:
        block;

    width:
        16px;

    height:
        16px;
}

/* =========================================================
   Szöveg konténer
   ========================================================= */

.ai-search-typer-content {
    display: flex;
    align-items: center;

    flex:
        1 1 auto;

    min-width:
        0;

    overflow:
        hidden;
}

/* =========================================================
   Szöveg
   ========================================================= */

.ai-search-typer-text {
    min-width:
        0;

    overflow:
        hidden;

    color:
        #445064;

    font-size:
        0.9rem;

    font-weight:
        500;

    line-height:
        1.4;

    text-align:
        left;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}

/* =========================================================
   Villogó kurzor
   ========================================================= */

.ai-search-typer-cursor {
    display: inline-block;

    flex:
        0 0 auto;

    width:
        2px;

    height:
        1.1em;

    margin-left:
        3px;

    border-radius:
        2px;

    background:
        #06154b;

    animation:
        aiSearchCursorBlink
        0.85s
        steps(1)
        infinite;
}

@keyframes aiSearchCursorBlink {

    0%,
    48% {
        opacity:
            1;
    }

    49%,
    100% {
        opacity:
            0;
    }
}

/* =========================================================
   Mobil
   ========================================================= */

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

    .ai-search-typer-wrap {
        margin:
            1.5rem
            auto
            1.7rem;

        padding:
            0 1rem;
    }

    .ai-search-typer {
        align-items:
            flex-start;

        width:
            auto;

        max-width:
            100%;

        min-height:
            52px;

        padding:
            0.75rem
            1rem;

        border-radius:
            20px;
    }

    .ai-search-typer-icon {
        width:
            30px;

        height:
            30px;
    }

    .ai-search-typer-content {
        align-items:
            flex-start;

        flex:
            0 1 auto;

        min-width:
            0;

        max-width:
            100%;

        overflow:
            visible;
    }

    .ai-search-typer-text {
        min-width:
            0;

        max-width:
            100%;

        overflow:
            visible;

        font-size:
            0.82rem;

        line-height:
            1.45;

        white-space:
            normal;

        text-overflow:
            clip;

        overflow-wrap:
            anywhere;

        word-break:
            normal;
    }

    .ai-search-typer-cursor {
        margin-top:
            0.12em;
    }
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    .ai-search-typer,
    .ai-search-typer-cursor {
        transition:
            none;

        animation:
            none;
    }

    .ai-search-typer-cursor {
        opacity:
            1;
    }
}

.profile-notification-settings {
    display: grid;
    gap: 1.25rem;

    margin-top: 1.5rem;
}

.profile-notification-master {
    display: grid;
    gap: 1rem;

    padding: 1.25rem 1.35rem;

    border:
        1px solid
        rgba(11, 30, 78, 0.08);

    border-radius: 18px;

    background:
        rgba(11, 30, 78, 0.025);
}

.profile-notification-master-list {
    display: grid;
    gap: 0.6rem;
}

.profile-notification-master-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    padding:
        1rem
        1.1rem;

    border-radius: 14px;

    background: #ffffff;

    cursor: pointer;
}

.profile-notification-channel-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        72px
        72px;

    align-items: center;

    gap: 1rem;

    padding:
        0
        1.35rem;

    color: #7a8092;

    font-size: 0.78rem;
    font-weight: 700;

    text-align: center;
}

.profile-notification-group {
    overflow: hidden;

    border:
        1px solid
        rgba(11, 30, 78, 0.08);

    border-radius: 18px;

    background: #ffffff;
}

.profile-notification-group-head {
    padding:
        1.2rem
        1.35rem
        1rem;

    background:
        rgba(11, 30, 78, 0.025);
}

.profile-notification-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        72px
        72px;

    align-items: center;

    gap: 1rem;

    padding:
        1.15rem
        1.35rem;

    border-top:
        1px solid
        rgba(11, 30, 78, 0.07);
}

.profile-notification-copy {
    display: grid;
    gap: 0.25rem;

    color: #101a3a;
}

.profile-notification-copy strong {
    font-size: 0.98rem;
    font-weight: 700;
}

.profile-notification-copy > span {
    color: #707689;

    font-size: 0.88rem;
    line-height: 1.45;
}

.profile-notification-channel-control {
    display: flex;

    align-items: center;
    justify-content: center;
}

.profile-notification-toggle {
    position: relative;

    width: 46px;
    height: 26px;

    flex: 0 0 auto;

    appearance: none;

    cursor: pointer;

    border: 0;
    border-radius: 999px;

    background: #d9dce5;

    transition:
        background-color 160ms ease,
        opacity 160ms ease;
}

.profile-notification-toggle::after {
    content: '';

    position: absolute;

    top: 3px;
    left: 3px;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 1px 4px
        rgba(0, 0, 0, 0.18);

    transition:
        transform 160ms ease;
}

.profile-notification-toggle:checked {
    background: #101c64;
}

.profile-notification-toggle:checked::after {
    transform:
        translateX(20px);
}

.profile-notification-toggle:disabled {
    opacity: 0.35;

    cursor: not-allowed;
}

.profile-notification-toggle:focus-visible {
    outline:
        3px solid
        rgba(16, 28, 100, 0.18);

    outline-offset: 3px;
}

.profile-notification-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 0.25rem;
}

@media (max-width: 768px) {
    .profile-notification-channel-header {
        grid-template-columns:
            minmax(0, 1fr)
            56px
            56px;

        gap: 0.65rem;

        padding:
            0
            1rem;
    }

    .profile-notification-row {
        grid-template-columns:
            minmax(0, 1fr)
            56px
            56px;

        gap: 0.65rem;

        padding:
            1rem;
    }

    .profile-notification-master-row {
        gap: 1rem;
    }
}

/* =========================================================
   Dermokozmetikumok oldal
   ========================================================= */

.dermocosmetics-page {
    width: 100%;
    max-width: 1600px;

    margin:
        0
        auto;

    padding-top:
        2rem !important;

    padding-bottom:
        5rem !important;
}


/* =========================================================
   Hero
   ========================================================= */

.dermo-hero {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    min-height: 520px;

    overflow: hidden;

    border-radius:
        32px;

    background:
        #f6f4f1;

    box-shadow:
        0 20px 60px
        rgb(20 38 65 / 0.06);
}

.dermo-hero-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding:
        3.5rem
        3.5rem
        3.5rem
        3.75rem;
}

.dermo-eyebrow,
.dermo-section-eyebrow {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-bottom:
        1.1rem;

    padding:
        0.55rem
        0.9rem;

    border-radius:
        999px;

    background:
        rgb(30 159 145 / 0.08);

    color:
        #277d78;

    font-size:
        0.76rem;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.dermo-hero-title {
    max-width:
        640px;

    margin:
        0;

    color:
        #102d4c;

    font-family:
        'Instrument Serif',
        serif;

    font-size:
        clamp(
            3.4rem,
            5vw,
            5.8rem
        );

    font-weight:
        600;

    line-height:
        1.1;

    letter-spacing:
        0.05em;
}

.dermo-hero-title span {
    display:
        block;
}

.dermo-hero-description {
    max-width:
        580px;

    margin:
        1.7rem
        0
        0;

    color:
        #607083;

    font-size:
        1.05rem;

    line-height:
        1.7;
}

.dermo-hero-actions {
    display:
        flex;
    flex-wrap:
        wrap;
    gap:
        0.85rem;

    margin-top:
        2rem;
}

.dermo-hero-primary-button,
.dermo-hero-secondary-button {
    min-height:
        52px;

    padding:
        0
        1.5rem;

    border-radius:
        14px;

    font-weight:
        700;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.dermo-hero-primary-button {
    border:
        1px solid
        #102d4c;

    background:
        #102d4c;

    color:
        #ffffff;
}

.dermo-hero-primary-button:hover {
    transform:
        translateY(-2px);

    background:
        #173b60;

    color:
        #ffffff;

    box-shadow:
        0 12px 30px
        rgb(16 45 76 / 0.18);
}

.dermo-hero-secondary-button {
    border:
        1px solid
        rgb(16 45 76 / 0.12);

    background:
        rgb(255 255 255 / 0.72);

    color:
        #102d4c;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}

.dermo-hero-secondary-button:hover {
    transform:
        translateY(-2px);

    background:
        #ffffff;

    color:
        #102d4c;

    box-shadow:
        0 10px 28px
        rgb(20 38 65 / 0.08);
}

.dermo-hero-benefits {
    display:
        flex;
    flex-wrap:
        wrap;
    gap:
        0.85rem
        1.25rem;

    margin-top:
        2rem;

    color:
        #6f7d8d;

    font-size:
        0.82rem;

    font-weight:
        600;
}

.dermo-hero-benefit {
    position:
        relative;

    display:
        inline-flex;
    align-items:
        center;

    padding-left:
        1rem;
}

.dermo-hero-benefit::before {
    position:
        absolute;

    left:
        0;

    width:
        6px;
    height:
        6px;

    border-radius:
        50%;

    background:
        #2b9f91;

    content:
        "";
}


/* =========================================================
   Hero kép
   ========================================================= */

.dermo-hero-image-wrap {
    position: relative;

    width: 100%;
    min-height: 520px;

    overflow: hidden;

    background: #f6f4f1;
}


/* =========================================================
   Gradient overlay
   ========================================================= */

.dermo-hero-image-wrap::before {
    position: absolute;

    z-index: 10;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            #f6f4f1 0%,
            rgb(246 244 241 / 0.6) 16%,
            rgb(246 244 241 / 0) 42%
        );

    pointer-events: none;

    content: "";
}


/* =========================================================
   Slider képek
   ========================================================= */

.dermo-hero-image-wrap
.dermo-hero-image {
    position: absolute;

    z-index: 1;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 0;

    transform: scale(1.02);

    transition:
        opacity 900ms ease,
        transform 4.8s ease;

    pointer-events: none;
}


/* =========================================================
   Aktív kép
   ========================================================= */

.dermo-hero-image-wrap
.dermo-hero-image.is-active {
    z-index: 2;

    opacity: 1;

    transform: scale(1);
}


/* =========================================================
   Tablet / mobil
   ========================================================= */

@media (max-width: 900px) {

    .dermo-hero-image-wrap {
        min-height: 360px;
    }

    .dermo-hero-image-wrap::before {
        background:
            linear-gradient(
                0deg,
                #f6f4f1 0%,
                rgb(246 244 241 / 0) 40%
            );
    }

}


@media (max-width: 620px) {

    .dermo-hero-image-wrap {
        min-height: 260px;
    }

}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .dermo-hero-image-wrap
    .dermo-hero-image {
        transition: none;
        transform: none;
    }

}

/* =========================================================
   Általános section
   ========================================================= */

.dermo-brands-section,
.dermo-products-section {
    margin-top:
        5rem;
}

.dermo-section-head,
.dermo-products-head {
    display:
        flex;
    align-items:
        flex-end;
    justify-content:
        space-between;
    gap:
        2rem;
}

.dermo-section-title {
    margin:
        0;

    color:
        #102d4c;

    font-size:
        clamp(
            2rem,
            3vw,
            3rem
        );

    font-weight:
        800;

    line-height:
        1.08;

    letter-spacing:
        -0.035em;
}

.dermo-section-description {
    max-width:
        620px;

    margin:
        0.8rem
        0
        0;

    color:
        #74808e;

    font-size:
        0.98rem;

    line-height:
        1.65;
}


/* =========================================================
   Márkák
   ========================================================= */

.dermo-brand-list {
    display:
        grid;
    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    gap:
        0.9rem;

    margin-top:
        2rem;
}

.dermo-brand-card {
    position:
        relative;

    display:
        flex;
    align-items:
        center;
    justify-content:
        center;

    min-height:
        92px;

    padding:
        1.2rem;

    border:
        1px solid
        #e8edf1;

    border-radius:
        18px;

    background:
        #ffffff;

    color:
        #173854;

    font: inherit;

    font-size:
        0.92rem;

    font-weight:
        750;

    cursor:
        pointer;

    box-shadow:
        0 8px 26px
        rgb(29 45 72 / 0.045);

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.dermo-brand-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgb(43 159 145 / 0.32);

    box-shadow:
        0 14px 34px
        rgb(25 57 76 / 0.08);
}

.dermo-brand-card.is-active {
    border-color:
        #2b9f91;

    background:
        #f1fbf9;

    color:
        #237f76;

    box-shadow:
        0 12px 30px
        rgb(43 159 145 / 0.12);
}


/* =========================================================
   Termék fejléc
   ========================================================= */

.dermo-products-head {
    margin-bottom:
        1.5rem;
}

.dermo-products-head-meta {
    flex:
        0 0 auto;
}

.dermo-product-count {
    display:
        inline-flex;
    align-items:
        center;
    justify-content:
        center;

    min-height:
        40px;

    padding:
        0
        1rem;

    border:
        1px solid
        #edf0f3;

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        #667689;

    font-size:
        0.82rem;

    font-weight:
        700;

    box-shadow:
        0 6px 20px
        rgb(20 38 65 / 0.05);
}


/* =========================================================
   Filter bar
   ========================================================= */

.dermo-filter-bar {
    display:
        flex;
    align-items:
        center;
    justify-content:
        space-between;
    gap:
        1.5rem;

    margin-bottom:
        2rem;

    padding:
        1rem
        1.15rem;

    border:
        1px solid
        #edf0f3;

    border-radius:
        18px;

    background:
        #fafafa;

    box-shadow:
        0 8px 28px
        rgb(24 40 62 / 0.04);
}

.dermo-filter-summary {
    display:
        flex;
    align-items:
        center;
    flex-wrap:
        wrap;
    gap:
        0.75rem;
}

.dermo-active-filter-text {
    color:
        #46586b;

    font-size:
        0.9rem;

    font-weight:
        700;
}

.dermo-filter-reset {
    appearance:
        none;

    border:
        0;

    padding:
        0;

    background:
        transparent;

    color:
        #2b8d82;

    font: inherit;

    font-size:
        0.85rem;

    font-weight:
        750;

    cursor:
        pointer;
}

.dermo-filter-reset:hover {
    text-decoration:
        underline;
}

.dermo-filter-controls {
    display:
        flex;
    align-items:
        center;
    gap:
        0.7rem;
}

.dermo-filter-label {
    color:
        #788492;

    font-size:
        0.82rem;

    font-weight:
        700;
}

.dermo-select-wrap {
    position:
        relative;
}

.dermo-sort-select {
    min-width:
        200px;

    min-height:
        44px;

    padding:
        0
        2.5rem
        0
        0.95rem;

    border:
        1px solid
        #dfe5e9;

    border-radius:
        12px;

    outline:
        none;

    background:
        #ffffff;

    color:
        #1e3b56;

    font: inherit;

    font-size:
        0.88rem;

    font-weight:
        650;

    cursor:
        pointer;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.dermo-sort-select:hover,
.dermo-sort-select:focus {
    border-color:
        rgb(43 159 145 / 0.6);

    box-shadow:
        0 0 0 4px
        rgb(43 159 145 / 0.08);
}


/* =========================================================
   Product grid
   ========================================================= */

.dermo-product-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        1.35rem;
}


/* =========================================================
   Loading
   ========================================================= */

.dermo-loading {
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    gap:
        0.8rem;

    min-height:
        180px;

    color:
        #718092;

    font-size:
        0.9rem;

    font-weight:
        600;
}

.dermo-loading-spinner {
    width:
        22px;
    height:
        22px;

    border:
        2px solid
        #dce8e6;

    border-top-color:
        #2b9f91;

    border-radius:
        50%;

    animation:
        dermo-spin 700ms linear infinite;
}

@keyframes dermo-spin {
    to {
        transform:
            rotate(360deg);
    }
}


/* =========================================================
   Empty state
   ========================================================= */

.dermo-empty-state {
    display:
        flex;
    flex-direction:
        column;
    align-items:
        center;

    max-width:
        620px;

    margin:
        3rem
        auto;

    padding:
        3.25rem
        2rem;

    text-align:
        center;

    border:
        1px solid
        #edf0f2;

    border-radius:
        24px;

    background:
        #fafafa;
}

.dermo-empty-icon {
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;

    width:
        54px;
    height:
        54px;

    margin-bottom:
        1rem;

    border-radius:
        50%;

    background:
        #eff9f7;

    font-size:
        1.5rem;
}

.dermo-empty-title {
    margin:
        0;

    color:
        #173854;

    font-size:
        1.35rem;

    font-weight:
        800;
}

.dermo-empty-text {
    max-width:
        480px;

    margin:
        0.8rem
        0
        1.5rem;

    color:
        #74808e;

    line-height:
        1.65;
}


/* =========================================================
   Load more
   ========================================================= */

.dermo-load-more-wrap {
    display:
        flex;
    justify-content:
        center;

    margin-top:
        2.5rem;
}

.dermo-load-more-button {
    min-height:
        50px;

    padding:
        0
        1.6rem;

    border:
        1px solid
        #dce3e8;

    border-radius:
        14px;

    background:
        #ffffff;

    color:
        #173854;

    font-weight:
        750;

    box-shadow:
        0 8px 24px
        rgb(22 43 68 / 0.05);

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}

.dermo-load-more-button:hover {
    transform:
        translateY(-2px);

    border-color:
        rgb(43 159 145 / 0.4);

    box-shadow:
        0 12px 30px
        rgb(22 43 68 / 0.08);
}


/* =========================================================
   Helpers
   ========================================================= */

.dermocosmetics-page .is-hidden {
    display:
        none !important;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (
    max-width: 1200px
) {

    .dermo-hero {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, 0.8fr);
    }

    .dermo-hero-content {
        padding:
            3.5rem;
    }

    .dermo-brand-list {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

    .dermo-product-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


@media (
    max-width: 900px
) {

    .dermocosmetics-page {
        padding-top:
            1rem !important;
    }

    .dermo-hero {
        grid-template-columns:
            1fr;

        min-height:
            auto;
    }

    .dermo-hero-content {
        padding:
            3rem
            2.4rem;

        order:
            2;
    }

    .dermo-hero-image-wrap {
        min-height:
            360px;

        order:
            1;
    }

    .dermo-hero-image-wrap::before {
        background:
            linear-gradient(
                0deg,
                #f6f4f1 0%,
                rgb(246 244 241 / 0) 40%
            );
    }

    .dermo-brand-list {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .dermo-products-head {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .dermo-filter-bar {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .dermo-filter-controls {
        justify-content:
            space-between;
    }

    .dermo-sort-select {
        width:
            100%;

        min-width:
            220px;
    }

    .dermo-product-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (
    max-width: 620px
) {

    .dermocosmetics-page {
        padding-left:
            1rem !important;

        padding-right:
            1rem !important;

        padding-bottom:
            3rem !important;
    }

    .dermo-hero {
        border-radius:
            22px;
    }

    .dermo-hero-content {
        padding:
            2.3rem
            1.4rem
            2rem;
    }

    .dermo-hero-image-wrap {
        min-height:
            260px;
    }

    .dermo-hero-title {
        font-size:
            clamp(
                2.7rem,
                13vw,
                4.2rem
            );
    }

    .dermo-hero-description {
        font-size:
            0.96rem;
    }

    .dermo-hero-actions {
        width:
            100%;
    }

    .dermo-hero-primary-button,
    .dermo-hero-secondary-button {
        width:
            100%;

        justify-content:
            center;
    }

    .dermo-hero-benefits {
        flex-direction:
            column;

        gap:
            0.7rem;
    }

    .dermo-brands-section,
    .dermo-products-section {
        margin-top:
            3.5rem;
    }

    .dermo-brand-list {
        display:
            flex;

        gap:
            0.75rem;

        overflow-x:
            auto;

        margin-right:
            -1rem;

        padding-right:
            1rem;
        padding-bottom:
            0.5rem;

        scroll-snap-type:
            x proximity;

        scrollbar-width:
            none;
    }

    .dermo-brand-list::-webkit-scrollbar {
        display:
            none;
    }

    .dermo-brand-card {
        flex:
            0 0
            145px;

        min-height:
            80px;

        scroll-snap-align:
            start;
    }

    .dermo-filter-controls {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .dermo-sort-select {
        width:
            100%;

        min-width:
            0;
    }

    .dermo-product-grid {
        grid-template-columns:
            1fr;

        gap:
            1rem;
    }

}

.dermo-brand-card {
    gap: 0.55rem;
}

.dermo-brand-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 26px;
    height: 26px;

    padding: 0 0.45rem;

    border-radius: 999px;

    background: #f2f5f6;

    color: #7a8792;

    font-size: 0.72rem;
    font-weight: 800;
}

.dermo-brand-card.is-active
.dermo-brand-count {
    background: rgb(43 159 145 / 0.12);
    color: #237f76;
}

/* =========================================================
   Dermo termékkártyák
   ========================================================= */

.dermo-product-card {
    display:
        flex;
    flex-direction:
        column;

    min-width:
        0;
    height:
        100%;

    overflow:
        hidden;

    border:
        1px solid
        rgb(12 42 75 / 0.04);

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        0 8px 30px
        rgb(15 35 65 / 0.045);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.dermo-product-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgb(20 65 100 / 0.08);

    box-shadow:
        0 18px 42px
        rgb(15 35 65 / 0.09);
}


/* =========================================================
   Kép
   ========================================================= */

.dermo-product-card
.home-product-image-link {
    display:
        block;

    color:
        inherit;

    text-decoration:
        none;
}

.dermo-product-card
.home-product-image-wrap {
    position:
        relative;

    display:
        flex;
    align-items:
        center;
    justify-content:
        center;

    aspect-ratio:
        1 / 0.92;

    padding:
        1.6rem
        1.4rem
        1rem;

    overflow:
        hidden;

    background:
        #ffffff;
}

.dermo-product-card
.home-product-image-wrap img {
    display:
        block;

    width:
        100%;
    height:
        100%;

    object-fit:
        contain;

    object-position:
        center;

    transition:
        transform 220ms ease;
}

.dermo-product-card:hover
.home-product-image-wrap img {
    transform:
        scale(1.025);
}


/* =========================================================
   Akció badge
   ========================================================= */

.dermo-product-card
.home-product-sale-badge {
    position:
        absolute;

    top:
        1rem;
    left:
        1rem;

    display:
        inline-flex;
    align-items:
        center;
    justify-content:
        center;

    min-height:
        30px;

    padding:
        0
        0.7rem;

    border-radius:
        999px;

    background:
        #ed2939;

    color:
        #ffffff;

    font-size:
        0.74rem;

    font-weight:
        800;

    line-height:
        1;

    box-shadow:
        0 7px 18px
        rgb(237 41 57 / 0.18);
}


/* =========================================================
   Body
   ========================================================= */

.dermo-product-card
.home-product-card-body {
    display:
        flex;
    flex:
        1;
    flex-direction:
        column;

    padding:
        0.2rem
        1.5rem
        1.5rem;
}

.dermo-product-card
.home-product-card-content {
    display:
        flex;
    flex-direction:
        column;

    flex:
        1;
}


/* =========================================================
   Terméknév
   ========================================================= */

.dermo-product-card
.home-product-name {
    margin:
        0;

    color:
        #1c1e22;

    font-size:
        1rem;

    font-weight:
        750;

    line-height:
        1.25;

    letter-spacing:
        -0.012em;
}

.dermo-product-card
.home-product-name a {
    color:
        inherit;

    text-decoration:
        none;
}

.dermo-product-card
.home-product-name a:hover {
    color:
        #12336f;
}


/* =========================================================
   Gyártó + kategória
   ========================================================= */

.dermo-product-card
.home-product-product-info {
    display:
        flex;
    flex-wrap:
        wrap;
    align-items:
        center;
    gap:
        0.25rem;

    min-height:
        20px;

    margin-top:
        0.45rem;

    color:
        #8b8d91;

    font-size:
        0.78rem;

    line-height:
        1.35;
}

.dermo-product-card
.home-product-meta-separator {
    opacity:
        0.65;
}


/* =========================================================
   Készlet
   ========================================================= */

.dermo-product-card
.home-product-stock-row {
    margin-top:
        1.2rem;
}

.dermo-product-card
.home-product-stock-badge {
    display:
        inline-flex;
    align-items:
        center;

    min-height:
        28px;

    padding:
        0
        0.72rem;

    border-radius:
        999px;

    font-size:
        0.72rem;

    font-weight:
        750;

    line-height:
        1;
}

.dermo-product-card
.home-product-stock-badge.is-in-stock {
    background:
        #eaf8f5;

    color:
        #2b988b;
}

.dermo-product-card
.home-product-stock-badge.is-backorder {
    background:
        #fff7df;

    color:
        #8c681a;
}

.dermo-product-card
.home-product-stock-badge.is-out-of-stock {
    background:
        #f3f3f3;

    color:
        #8a8a8a;
}


/* =========================================================
   Alsó blokk
   ========================================================= */

.dermo-product-card
.home-product-card-footer {
    margin-top:
        auto;

    padding-top:
        1.8rem;
}

.dermo-product-card
.home-product-price-line {
    display:
        flex;
    align-items:
        flex-end;
    justify-content:
        space-between;
    gap:
        0.8rem;

    min-height:
        48px;

    margin-bottom:
        1rem;
}


/* =========================================================
   Kiszerelés
   ========================================================= */

.dermo-product-card
.home-product-package {
    color:
        #54575c;

    font-size:
        0.82rem;

    font-weight:
        700;

    line-height:
        1.2;
}


/* =========================================================
   Ár
   ========================================================= */

.dermo-product-card
.home-product-price-wrap {
    display:
        flex;
    flex-direction:
        column;
    align-items:
        flex-end;

    margin-left:
        auto;
}

.dermo-product-card
.home-product-original-price {
    margin-bottom:
        0.18rem;

    color:
        #888b90;

    font-size:
        0.74rem;

    font-weight:
        500;

    line-height:
        1;

    text-decoration:
        line-through;
}

.dermo-product-card
.home-product-price {
    color:
        #102c72;

    font-size:
        1.22rem;

    font-weight:
        850;

    line-height:
        1;

    letter-spacing:
        -0.025em;
}

/* Akciósnál piros jelenlegi ár */
.dermo-product-card:has(
    .home-product-sale-badge
)
.home-product-price {
    color:
        #e42a35;
}


/* =========================================================
   Kosár gomb
   ========================================================= */

.dermo-product-card
.home-product-cart-button {
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;

    width:
        100%;
    min-height:
        50px;

    padding:
        0
        1.2rem;

    border:
        0;

    border-radius:
        999px;

    background:
        #10296d;

    color:
        #ffffff;

    font: inherit;

    font-size:
        0.9rem;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}

.dermo-product-card
.home-product-cart-button:hover:not(
    :disabled
) {
    transform:
        translateY(-1px);

    background:
        #173887;

    box-shadow:
        0 10px 24px
        rgb(16 41 109 / 0.2);
}

.dermo-product-card
.home-product-cart-button:active:not(
    :disabled
) {
    transform:
        translateY(0);
}

.dermo-product-card
.home-product-cart-button:disabled,
.dermo-product-card
.home-product-cart-button.is-disabled {
    background:
        #d8dce3;

    color:
        #858b94;

    cursor:
        not-allowed;

    box-shadow:
        none;
}


/* =========================================================
   Placeholder
   ========================================================= */

.dermo-product-card
.home-product-image-placeholder {
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;

    width:
        100%;
    height:
        100%;

    color:
        #c2c7cb;

    font-size:
        2rem;

    background:
        #fafafa;

    border-radius:
        12px;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (
    max-width: 900px
) {

    .dermo-product-card
    .home-product-card-body {
        padding:
            0.2rem
            1.25rem
            1.25rem;
    }

}


/* =========================================================
   Mobil
   ========================================================= */

@media (
    max-width: 620px
) {

    .dermo-product-card
    .home-product-image-wrap {
        aspect-ratio:
            1 / 0.86;

        padding:
            1.5rem;
    }

    .dermo-product-card
    .home-product-name {
        font-size:
            1.05rem;
    }

    .dermo-product-card
    .home-product-price {
        font-size:
            1.25rem;
    }

}

.dermo-product-card.is-on-sale
.home-product-price {
    color: #e42a35;
}

/* =========================================================
   Home product card – retailer price
   ========================================================= */

.home-product-retailer-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;

    margin-top: 0.3rem;
    margin-bottom: 0.35rem;
}

.home-product-retailer-base {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;

    padding: 0.2rem 0.42rem;

    border-radius: 999px;

    background: rgb(11 31 79 / 0.045);

    font-size: 0.72rem;
    line-height: 1.2;

    color: rgb(11 31 79 / 0.52);
}

.home-product-retailer-base s {
    text-decoration-thickness: 1px;
}

.home-product-retailer-label {
    display: inline-flex;
    align-items: center;

    padding: 0.2rem 0.44rem;

    border-radius: 999px;

    background: rgb(11 31 79 / 0.08);

    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;

    color: #0b1f4f;
}

/* =========================================================
   Home product card – retailer price
   ========================================================= */

.home-product-retailer-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;

    margin-top: 0.3rem;
    margin-bottom: 0.35rem;
}

.home-product-retailer-base {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;

    padding: 0.2rem 0.42rem;

    border-radius: 999px;

    background: rgb(11 31 79 / 0.045);

    font-size: 0.72rem;
    line-height: 1.2;

    color: rgb(11 31 79 / 0.52);
}

.home-product-retailer-base s {
    text-decoration-thickness: 1px;
}

.home-product-retailer-label {
    display: inline-flex;
    align-items: center;

    padding: 0.2rem 0.44rem;

    border-radius: 999px;

    background: rgb(11 31 79 / 0.08);

    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;

    color: #0b1f4f;
}

/* =========================================================
   Product catalog – retailer pricing
   ========================================================= */

.catalog-product-retailer-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;

    margin-top: 0.55rem;
    margin-bottom: 0.35rem;
}

.catalog-product-retailer-base {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;

    color: #7a8699;
}

.catalog-product-retailer-base s {
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;

    opacity: 0.9;
}

.catalog-product-retailer-label {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    padding: 0.26rem 0.55rem;

    border-radius: 999px;

    background:
        rgba(25, 109, 255, 0.08);

    color: #1559b7;

    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.01em;
}

/* =========================================================
   Retailer final price
   ========================================================= */

.catalog-product-card:has(
    .catalog-product-retailer-price
)
.catalog-product-price {
    color: #123d73;

    font-weight: 800;
}

/* =========================================================
   Finom spacing retailer kártyán
   ========================================================= */

.catalog-product-card:has(
    .catalog-product-retailer-price
)
.catalog-product-bottom-row {
    margin-top: 0.2rem;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 768px) {

    .catalog-product-retailer-price {
        margin-top: 0.45rem;
        margin-bottom: 0.3rem;
    }

    .catalog-product-retailer-base {
        font-size: 0.74rem;
    }

    .catalog-product-retailer-label {
        padding:
            0.24rem
            0.5rem;

        font-size: 0.68rem;
    }

}

/* =========================================================
   Offers – retailer pricing
   ========================================================= */

.offer-product-retailer-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;

    margin-top: 0.55rem;
    margin-bottom: 0.35rem;
}

.offer-product-retailer-base {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;

    color: #7a8699;
}

.offer-product-retailer-base s {
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;

    opacity: 0.9;
}

.offer-product-retailer-label {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    padding:
        0.26rem
        0.55rem;

    border-radius: 999px;

    background:
        rgba(25, 109, 255, 0.08);

    color: #1559b7;

    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.01em;
}

.offer-product-card:has(
    .offer-product-retailer-price
)
.offer-product-price {
    color: #123d73;

    font-weight: 800;
}

@media (max-width: 768px) {

    .offer-product-retailer-price {
        margin-top: 0.45rem;
        margin-bottom: 0.3rem;
    }

    .offer-product-retailer-base {
        font-size: 0.74rem;
    }

    .offer-product-retailer-label {
        padding:
            0.24rem
            0.5rem;

        font-size: 0.68rem;
    }

}

/* =========================================================
   Profil – szedési / használati becslés
   ========================================================= */

.profile-usage-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    margin-top: 1.5rem;
}

.profile-usage-card {
    padding: 1.25rem;

    border:
        1px solid
        rgba(0, 0, 0, 0.08);

    border-radius: 1.2rem;

    background: #fff;
}

.profile-usage-product {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.profile-usage-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100px;
    min-width: 100px;

    aspect-ratio: 1;

    border-radius: 1rem;

    overflow: hidden;

    background: #fff;
}

.profile-usage-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.profile-usage-image-placeholder {
    background:
        rgba(0, 0, 0, 0.04);
}

.profile-usage-content {
    flex: 1;

    min-width: 0;
}

.profile-usage-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.profile-usage-title {
    margin: 0;

    font-size: 1rem;
    font-weight: 700;

    color: #151f5c;
}

.profile-usage-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.8rem;

    margin-top: 0.35rem;

    font-size: 0.8rem;

    color:
        rgba(
            0,
            0,
            0,
            0.55
        );
}

.profile-usage-status {
    margin-top: 1rem;

    font-weight: 700;

    color: #151f5c;
}

/* =========================================================
   Progress
   ========================================================= */

.profile-usage-progress {
    position: relative;

    width: 100%;
    height: 12px;

    margin-top: 1.6rem;

    border-radius: 999px;

    background:
        rgba(
            0,
            0,
            0,
            0.08
        );

    overflow: visible;
}

.profile-usage-progress-fill {
    position: absolute;

    top: 0;
    right: 0;

    height: 100%;

    border-radius: inherit;

    background: #252d73;

    transition:
        width 0.35s ease;
}

.profile-usage-progress-marker {
    position: absolute;

    top: -1.45rem;

    transform:
        translateX(-50%);

    font-size: 1rem;

    line-height: 1;

    color: #252d73;

    transition:
        left 0.35s ease;
}

.profile-usage-progress-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    margin-top: 0.65rem;

    font-size: 0.75rem;

    color:
        rgba(
            0,
            0,
            0,
            0.55
        );
}

.profile-usage-disclaimer {
    margin-top: 0.8rem;

    font-size: 0.75rem;

    color:
        rgba(
            0,
            0,
            0,
            0.45
        );
}

/* =========================================================
   Mobil
   ========================================================= */

@media (
    max-width: 768px
) {
    .profile-usage-product {
        align-items: flex-start;

        gap: 0.9rem;
    }

    .profile-usage-image-wrap {
        width: 75px;
        min-width: 75px;
    }

    .profile-usage-head {
        flex-direction: column;
    }

    .profile-usage-progress-labels {
        flex-direction: column;
        align-items: flex-start;

        gap: 0.2rem;
    }
}

/* =========================================================
   Setup / welcome
   ========================================================= */

.setup-container {
    width: 100%;
    max-width: 620px;
    margin: 40px auto 80px;
}

.setup-card {
    background: #ffffff;
    border: 1px solid #eceef3;
    border-radius: 24px;
    padding: 34px;
    box-shadow:
        0 16px 50px
        rgba(15, 23, 42, 0.06);
}

.setup-progress {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.setup-progress-step {
    display: block;
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: #e5e7eb;
}

.setup-progress-step.is-active {
    background: #07155e;
}

.setup-page-kicker {
    margin-bottom: 8px;
    color: #718096;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.setup-page-title {
    margin: 0;
    color: #07155e;
    font-size: 2rem;
    line-height: 1.2;
}

.setup-subtitle {
    margin-top: 12px;
    margin-bottom: 28px;
    color: #667085;
    line-height: 1.6;
}

.setup-notification-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.setup-notification-item {
    position: relative;
    padding: 20px;
    border: 1px solid #e6e8ee;
    border-radius: 18px;
    background: #ffffff;
}

.setup-notification-content {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-right: 60px;
}

.setup-notification-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f3f5ff;
    color: #07155e;
    font-size: 1.2rem;
}

.setup-notification-title {
    margin: 0 0 5px;
    color: #111827;
    font-weight: 700;
}

.setup-notification-description {
    margin: 0;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.5;
}


/* Switch */

.setup-switch {
    position: absolute;
    top: 25px;
    right: 20px;
    width: 48px;
    height: 28px;
}

.setup-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.setup-switch-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #d0d5dd;
    cursor: pointer;
    transition:
        background-color 0.2s ease;
}

.setup-switch-slider::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 1px 4px
        rgba(0, 0, 0, 0.18);
    transition:
        transform 0.2s ease;
}

.setup-switch input:checked
+ .setup-switch-slider {
    background: #07155e;
}

.setup-switch input:checked
+ .setup-switch-slider::after {
    transform:
        translateX(20px);
}


/* Push */

.setup-notification-item-push
.setup-notification-content {
    padding-right: 0;
    margin-bottom: 16px;
}

.setup-push-button {
    width: 100%;
    border-color: #07155e;
    color: #07155e;
    font-weight: 700;
}

.setup-push-button:hover {
    border-color: #07155e;
    background: #f4f6ff;
    color: #07155e;
}

.setup-push-button.is-success {
    border-color: #12b76a;
    background: #ecfdf3;
    color: #087443;
}

.setup-push-status {
    margin-top: 12px;
    font-size: 0.88rem;
    line-height: 1.45;
}

.setup-push-status.is-success {
    color: #087443;
}

.setup-push-status.is-danger {
    color: #b42318;
}


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

    .setup-container {
        margin-top: 16px;
        margin-bottom: 40px;
    }

    .setup-card {
        padding: 24px 18px;
        border-radius: 20px;
    }

    .setup-page-title {
        font-size: 1.7rem;
    }

    .setup-notification-item {
        padding: 18px;
    }
}

.setup-feature-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.setup-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    padding: 20px;

    border: 1px solid #e6e8ee;
    border-radius: 18px;

    background: #ffffff;
}

.setup-feature-icon {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border-radius: 13px;

    background: #f3f5ff;

    font-size: 1.3rem;
}

.setup-feature-title {
    margin: 0 0 5px;

    color: #111827;

    font-weight: 700;
}

.setup-feature-description {
    margin: 0;

    color: #667085;

    font-size: 0.9rem;
    line-height: 1.55;
}

/* =========================================================
   Push eszközök
   ========================================================= */

.profile-push-devices {
    margin-top: 2rem;
    padding: 1.25rem;

    border: 1px solid #e5e7eb;
    border-radius: 16px;

    background: #f8f9fb;
}

.profile-push-devices .profile-notification-group-head {
    margin-bottom: 1rem;
}

.profile-push-devices-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;

    margin-top: 1rem;
}

.profile-push-device {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    min-height: 74px;

    padding: 1rem 1.1rem;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    background: #ffffff;
}

.profile-push-device-main {
    display: flex;
    align-items: center;
    gap: 0.9rem;

    min-width: 0;
}

.profile-push-device-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    border-radius: 12px;

    background: #f3f5ff;

    font-size: 1.25rem;
}

.profile-push-device-copy {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;

    min-width: 0;
}

.profile-push-device-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.profile-push-device-title {
    color: #111827;

    font-size: 0.95rem;
    line-height: 1.35;
}

.profile-push-device-meta {
    color: #7a8190;

    font-size: 0.82rem;
    line-height: 1.4;
}


/* =========================================================
   Device badge-ek
   ========================================================= */

.profile-push-device-badge {
    display: inline-flex;
    align-items: center;

    min-height: 22px;

    padding: 0.15rem 0.5rem;

    border-radius: 999px;

    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}

.profile-push-device-badge.is-current {
    background: #eef1ff;
    color: #07155e;
}

.profile-push-device-badge.is-active {
    background: #ecfdf3;
    color: #087443;
}

.profile-push-device-badge.is-disabled {
    background: #f2f4f7;
    color: #667085;
}

.profile-push-device-badge.is-inactive {
    background: #fef3f2;
    color: #b42318;
}


/* =========================================================
   Device toggle
   ========================================================= */

.profile-push-device-switch {
    position: relative;

    display: block;

    flex: 0 0 auto;

    width: 48px;
    height: 28px;

    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: auto;

    align-self: center;

    top: auto;
    bottom: auto;

    transform: none;
}

.profile-push-device-switch input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

.profile-push-device-switch .setup-switch-slider {
    position: absolute;
    inset: 0;

    width: 48px;
    height: 28px;

    border-radius: 999px;

    background: #d0d5dd;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        opacity 0.2s ease;
}

.profile-push-device-switch
.setup-switch-slider::after {
    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 1px 4px
        rgba(0, 0, 0, 0.18);

    transition:
        transform 0.2s ease;
}

.profile-push-device-switch
input:checked
+ .setup-switch-slider {
    background: #07155e;
}

.profile-push-device-switch
input:checked
+ .setup-switch-slider::after {
    transform:
        translateX(20px);
}

.profile-push-device-switch
input:disabled
+ .setup-switch-slider {
    opacity: 0.45;

    cursor: not-allowed;
}


/* =========================================================
   Üres állapot
   ========================================================= */

.profile-push-devices
.profile-empty-state {
    margin-top: 1rem;
    margin-bottom: 0;

    border-radius: 12px;
}


/* =========================================================
   Loading
   ========================================================= */

.profile-push-devices
.profile-address-loading {
    margin-top: 1rem;
}


/* =========================================================
   Hover
   ========================================================= */

@media (hover: hover) {

    .profile-push-device {
        transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease,
            transform 0.2s ease;
    }

    .profile-push-device:hover {
        border-color: #d8dce6;

        box-shadow:
            0 8px 24px
            rgba(15, 23, 42, 0.05);

        transform:
            translateY(-1px);
    }
}


/* =========================================================
   Mobile
   ========================================================= */

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

    .profile-push-devices {
        margin-top: 1.5rem;

        padding: 1rem;

        border-radius: 14px;
    }

    .profile-push-device {
        align-items: center;

        min-height: 68px;

        padding: 0.95rem;
    }

    .profile-push-device-main {
        align-items: center;
    }

    .profile-push-device-icon {
        width: 40px;
        height: 40px;

        font-size: 1.1rem;
    }

    .profile-push-device-title-row {
        gap: 0.35rem;
    }

    .profile-push-device-switch {
        align-self: center;

        margin-top: 0;
        margin-bottom: 0;
    }
}

/* =========================================================
   Current push device alert
   ========================================================= */

.profile-push-current-device-alert {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.15rem;
    border-radius: 16px;
}

.profile-push-current-device-alert-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-push-current-device-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    border-radius: 14px;

    background: rgba(0, 0, 0, 0.06);

    font-size: 1.25rem;
}

.profile-push-current-device-alert-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;

    min-width: 0;

    flex: 1;
}

.profile-push-current-device-alert-copy strong {
    font-family: Roboto, sans-serif;
    font-size: 0.95rem;
    line-height: 1.35;
}

.profile-push-current-device-alert-copy span {
    font-family: Roboto, sans-serif;
    font-size: 0.85rem;
    line-height: 1.45;

    opacity: 0.85;
}

.profile-push-current-device-alert-action {
    flex: 0 0 auto;
}


/* =========================================================
   Current push device
   ========================================================= */

.profile-current-push-device {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-top: 1rem;
    margin-bottom: 1.25rem;

    padding: 1rem;

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;

    background: #fff;
}

.profile-current-push-device-main {
    display: flex;
    align-items: center;

    gap: 0.85rem;

    min-width: 0;
}

.profile-current-push-device-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    border-radius: 14px;

    background: rgba(0, 0, 0, 0.045);

    font-size: 1.2rem;
}

.profile-current-push-device-copy {
    display: flex;
    flex-direction: column;

    gap: 0.25rem;

    min-width: 0;
}

.profile-current-push-device-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.5rem;
}

.profile-current-push-device-title-row strong {
    font-family: Roboto, sans-serif;
    font-size: 0.95rem;
}

.profile-current-push-device-description {
    font-family: Roboto, sans-serif;

    font-size: 0.85rem;
    line-height: 1.45;

    color: #737373;
}

.profile-current-push-device-action {
    flex: 0 0 auto;
}


/* =========================================================
   Current device badges
   ========================================================= */

#profileCurrentPushDeviceBadge.is-active {
    background: #eaf8ef;
    color: #287943;
}

#profileCurrentPushDeviceBadge.is-missing {
    background: #fff3cd;
    color: #7a5a00;
}

#profileCurrentPushDeviceBadge.is-blocked {
    background: #fdecec;
    color: #a12626;
}

#profileCurrentPushDeviceBadge.is-disabled {
    background: #eeeeee;
    color: #666666;
}


/* =========================================================
   Responsive
   ========================================================= */

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

    .profile-push-current-device-alert-content {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .profile-push-current-device-alert-action {
        width: 100%;
        padding-left: 60px;
    }

    .profile-push-current-device-alert-action .button {
        width: 100%;
    }


    .profile-current-push-device {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-current-push-device-action {
        width: 100%;
        padding-left: 60px;
    }

    .profile-current-push-device-action .button {
        width: 100%;
    }

}


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

    .profile-push-current-device-alert-action,
    .profile-current-push-device-action {
        padding-left: 0;
    }
}

.auth-forgot-password {
    margin-top: 8px;
    text-align: right;
    font-size: 0.9rem;
}

.auth-forgot-password a {
    text-decoration: none;
}

.auth-forgot-password a:hover {
    text-decoration: underline;
}

.checkout-product-price-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
}

.checkout-product-subtotal.is-coupon-original {
    font-weight: 400;
    text-decoration: line-through;
    opacity: 0.6;
}

.checkout-product-coupon {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    opacity: 0.75;
}

.home-product-sale-badge.is-expiry-sale {
    background: #f59e0b;
    color: #fff;
}

.home-product-expiry-sale {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.2rem;
}

.home-product-expiry-sale-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #b45309;
}

.home-product-expiry-sale-stock {
    font-size: 0.68rem;
    color: #7c6a4a;
}

/* =========================================================
   Termékleírás – táblázatok
   ========================================================= */

.product-view-richtext table {
    width: 100%;
    max-width: 100%;
    margin: 1.5rem 0;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;

    font-size: 0.95rem;
    line-height: 1.5;

    background: #ffffff;

    border: 1px solid rgba(6, 21, 75, 0.12);
    border-radius: 12px;
}


/* =========================================================
   Cellák
   ========================================================= */

.product-view-richtext th,
.product-view-richtext td {
    padding: 0.75rem 1rem;

    text-align: left;
    vertical-align: top;

    border-bottom: 1px solid rgba(6, 21, 75, 0.09);
}


/* =========================================================
   Fejléc
   ========================================================= */

.product-view-richtext th {
    font-weight: 700;
    color: #06154B;

    background: rgba(36, 214, 191, 0.10);
}


/* =========================================================
   Zebra sorok
   ========================================================= */

.product-view-richtext tbody tr:nth-child(even) td {
    background: rgba(6, 21, 75, 0.025);
}


/* =========================================================
   Utolsó sor
   ========================================================= */

.product-view-richtext tr:last-child td {
    border-bottom: 0;
}


/* =========================================================
   Oszlopok elkülönítése
   ========================================================= */

.product-view-richtext th + th,
.product-view-richtext td + td {
    border-left: 1px solid rgba(6, 21, 75, 0.07);
}


/* =========================================================
   Mobil
   ========================================================= */

@media (max-width: 768px) {

    .product-view-richtext {
        overflow-wrap: anywhere;
    }

    .product-view-richtext table {
        display: block;

        width: 100%;
        max-width: 100%;

        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        font-size: 0.9rem;
    }

    .product-view-richtext th,
    .product-view-richtext td {
        min-width: 7rem;
        padding: 0.65rem 0.75rem;
    }
}

.ai-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(247, 249, 252, 0.72);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.32s ease,
        visibility 0.32s ease;
}

.ai-search-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ai-search-overlay.is-leaving {
    opacity: 0;
}

.ai-search-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 1.4rem;

    text-align: center;
}

.ai-search-overlay-orb {
    position: relative;

    width: 84px;
    height: 84px;
}

.ai-search-overlay-orb-core {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #24d6bf,
            #16b8aa
        );

    transform:
        translate(-50%, -50%);

    box-shadow:
        0 0 30px
        rgba(36, 214, 191, 0.38);

    animation:
        aiSearchOrbPulse
        1.8s ease-in-out
        infinite;
}

.ai-search-overlay-orb-ring {
    position: absolute;
    inset: 6px;

    border:
        2px solid
        rgba(36, 214, 191, 0.34);

    border-radius: 50%;

    animation:
        aiSearchOrbRing
        1.9s ease-out
        infinite;
}

.ai-search-overlay-orb-ring.is-second {
    animation-delay:
        0.85s;
}

.ai-search-overlay-text {
    margin: 0;

    font-size: 1.05rem;
    font-weight: 700;

    color: #06154b;

    opacity: 1;

    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}

.ai-search-overlay-text.is-changing {
    opacity: 0;

    transform:
        translateY(4px);
}

@keyframes aiSearchOrbPulse {
    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(0.92);
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.08);
    }
}

@keyframes aiSearchOrbRing {
    0% {
        opacity: 0.75;

        transform:
            scale(0.72);
    }

    100% {
        opacity: 0;

        transform:
            scale(1.32);
    }
}

/* =========================================================
   Checkout – cím űrlap
   ========================================================= */

.checkout-manual-address-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}


/* =========================================================
   Szekciók
   ========================================================= */

.checkout-address-section {
    position: relative;

    padding: 1.35rem 1.4rem;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96),
            rgba(247, 250, 255, 0.9)
        );

    border:
        1px solid
        rgba(6, 21, 75, 0.1);

    border-radius: 18px;

    box-shadow:
        0 8px 30px
        rgba(6, 21, 75, 0.035);
}


.checkout-address-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 1.25rem;
}


.checkout-address-section-title {
    margin: 0;

    color: #06154b;

    font-size: 1.05rem;
    font-weight: 750;
    line-height: 1.3;
}


.checkout-address-section-description {
    margin:
        0.3rem
        0
        0;

    color:
        rgba(6, 21, 75, 0.58);

    font-size: 0.82rem;
    line-height: 1.45;
}


/* =========================================================
   Field
   ========================================================= */

.checkout-address-section .field {
    margin-bottom: 1rem;
}


.checkout-address-section .field:last-child {
    margin-bottom: 0;
}


.checkout-address-section .label {
    margin-bottom: 0.45rem;

    color: #17213f;

    font-size: 0.87rem;
    font-weight: 650;
}


.checkout-address-optional {
    margin-left: 0.35rem;

    color:
        rgba(6, 21, 75, 0.42);

    font-size: 0.72rem;
    font-weight: 500;
}


/* =========================================================
   Inputok
   ========================================================= */

.checkout-address-input.input {
    height: 46px;

    padding:
        0
        0.9rem;

    background:
        rgba(255, 255, 255, 0.92);

    border:
        1px solid
        rgba(6, 21, 75, 0.14);

    border-radius: 11px;

    color: #17213f;

    font-size: 0.95rem;

    box-shadow: none;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}


.checkout-address-input.input:hover {
    border-color:
        rgba(6, 21, 75, 0.26);
}


.checkout-address-input.input:focus {
    background: #fff;

    border-color:
        rgba(22, 184, 170, 0.8);

    box-shadow:
        0 0 0 3px
        rgba(36, 214, 191, 0.12);

    outline: none;
}


.checkout-address-input.input::placeholder {
    color:
        rgba(23, 33, 63, 0.35);
}


/* =========================================================
   Irányítószám + város
   ========================================================= */

.checkout-address-location-grid {
    display: grid;

    grid-template-columns:
        minmax(125px, 0.34fr)
        minmax(0, 0.66fr);

    gap: 1rem;
}


.checkout-address-location-grid .field {
    min-width: 0;
}


/* =========================================================
   Cégnév + adószám
   ========================================================= */

.checkout-address-company-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(180px, 0.65fr);

    gap: 1rem;
}


.checkout-address-company-grid .field {
    min-width: 0;
}


/* =========================================================
   Cím autocomplete hint
   ========================================================= */

.checkout-address-autocomplete-field {
    position: relative;
}


.checkout-address-field-hint {
    margin:
        0.42rem
        0
        0;

    color:
        rgba(6, 21, 75, 0.52);

    font-size: 0.75rem;
    line-height: 1.4;
}


/* =========================================================
   Számlázási checkbox
   ========================================================= */

.checkout-address-billing-switch,
.checkout-address-save {
    padding:
        0.1rem
        0.15rem;
}


.checkout-address-billing-switch .auth-checkbox,
.checkout-address-save .auth-checkbox {
    margin: 0;
}


/* =========================================================
   Számlázási blokk
   ========================================================= */

.checkout-address-billing-section {
    animation:
        checkoutAddressSectionIn
        180ms ease-out;
}


@keyframes checkoutAddressSectionIn {

    from {
        opacity: 0;
        transform:
            translateY(-5px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }

}


/* =========================================================
   Autocomplete dropdown
   ========================================================= */

.checkout-address-dropdown {
    position: absolute;

    top:
        calc(100% + 6px);

    left: 0;
    right: 0;

    z-index: 80;

    max-height: 280px;

    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 0.4rem;

    background:
        rgba(255, 255, 255, 0.985);

    border:
        1px solid
        rgba(6, 21, 75, 0.11);

    border-radius: 13px;

    box-shadow:
        0 16px 45px
        rgba(6, 21, 75, 0.14);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.checkout-address-dropdown[hidden] {
    display: none;
}


/* =========================================================
   Autocomplete találat
   ========================================================= */

.checkout-address-dropdown-item {
    display: flex;
    align-items: center;

    width: 100%;

    min-height: 42px;

    padding:
        0.65rem
        0.75rem;

    background: transparent;

    border: 0;
    border-radius: 9px;

    color: #17213f;

    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 550;

    text-align: left;

    cursor: pointer;

    transition:
        background-color 130ms ease,
        color 130ms ease,
        transform 130ms ease;
}


.checkout-address-dropdown-item:hover,
.checkout-address-dropdown-item.is-active {
    background:
        rgba(36, 214, 191, 0.11);

    color: #06154b;
}


.checkout-address-dropdown-item:active {
    transform:
        scale(0.995);
}


/* kis jelölés a találatok előtt */

.checkout-address-dropdown-item::before {
    content: '';

    flex: 0 0 auto;

    width: 7px;
    height: 7px;

    margin-right: 0.7rem;

    background:
        linear-gradient(
            135deg,
            #24d6bf,
            #16b8aa
        );

    border-radius: 50%;

    box-shadow:
        0 0 0 3px
        rgba(36, 214, 191, 0.1);
}


/* =========================================================
   Scrollbar
   ========================================================= */

.checkout-address-dropdown {
    scrollbar-width: thin;

    scrollbar-color:
        rgba(6, 21, 75, 0.18)
        transparent;
}


.checkout-address-dropdown::-webkit-scrollbar {
    width: 6px;
}


.checkout-address-dropdown::-webkit-scrollbar-track {
    background: transparent;
}


.checkout-address-dropdown::-webkit-scrollbar-thumb {
    background:
        rgba(6, 21, 75, 0.18);

    border-radius: 99px;
}


/* =========================================================
   Mobil
   ========================================================= */

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

    .checkout-manual-address-form {
        gap: 1rem;
    }


    .checkout-address-section {
        padding:
            1.15rem
            1rem;

        border-radius: 15px;
    }


    .checkout-address-section-header {
        margin-bottom: 1rem;
    }


    .checkout-address-section-title {
        font-size: 1rem;
    }


    .checkout-address-section-description {
        font-size: 0.78rem;
    }


    /*
     * Mobilon az irányítószám + város
     * szerintem még elfér egymás mellett.
     */

    .checkout-address-location-grid {
        grid-template-columns:
            minmax(105px, 0.38fr)
            minmax(0, 0.62fr);

        gap: 0.7rem;
    }


    /*
     * Cégnév + adószám viszont menjen egymás alá.
     */

    .checkout-address-company-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .checkout-address-input.input {
        height: 45px;

        font-size: 16px;
    }


    .checkout-address-dropdown {
        max-height: 240px;

        border-radius: 12px;
    }


    .checkout-address-dropdown-item {
        min-height: 44px;

        font-size: 0.88rem;
    }

}


/* =========================================================
   Nagyon keskeny mobil
   ========================================================= */

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

    .checkout-address-location-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

}

/* =========================================================
   PRODUCT VIEW – VÁSÁRLÁSI INFORMÁCIÓK
   ========================================================= */

.product-view-purchase-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;

    margin-top: 0.85rem;
    margin-bottom: 0.55rem;
}


/* =========================================================
   KUPONAJÁNLAT
   ========================================================= */

.product-view-coupon-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem 1rem;

    width: fit-content;
    max-width: 100%;

    padding: 0.7rem 0.85rem;

    border: 1px dashed rgba(
        28,
        160,
        142,
        0.5
    );

    border-radius: 14px;

    background: rgba(
        28,
        160,
        142,
        0.055
    );

    font-family:
        Roboto,
        sans-serif;
}


.product-view-coupon-offer-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;

    min-width: 0;
}


.product-view-coupon-offer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 36px;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    background: #1ca08e;
    color: #ffffff;

    font-size: 0.8rem;
    font-weight: 900;
    line-height: 1;
}


.product-view-coupon-offer-title {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;

    min-width: 0;

    color: #173c3a;

    line-height: 1.3;
}


.product-view-coupon-offer-title > strong {
    font-size: 0.76rem;
    font-weight: 850;
}


.product-view-coupon-offer-title > span {
    color: #62716f;

    font-size: 0.66rem;
}


.product-view-coupon-offer-title > span strong {
    color: #173c3a;
    font-weight: 800;
}


/* =========================================================
   KUPONOS ÁR
   ========================================================= */

.product-view-coupon-price {
    display: flex;
    align-items: baseline;
    gap: 0.38rem;

    padding-left: 1rem;

    border-left: 1px solid rgba(
        28,
        160,
        142,
        0.18
    );

    color: #65716f;

    font-size: 0.7rem;
    white-space: nowrap;
}


.product-view-coupon-price strong {
    color: #168776;

    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}


/* =========================================================
   KUPON FELTÉTEL
   ========================================================= */

.product-view-coupon-condition {
    flex-basis: 100%;

    color: #7c8785;

    font-size: 0.62rem;
    line-height: 1.35;

    padding-left: 2.9rem;
}


/* =========================================================
   EGÉSZSÉGPÉNZTÁR BADGE
   ========================================================= */

.product-view-health-fund-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    width: fit-content;
    max-width: 100%;

    padding: 0.5rem 0.72rem;

    border: 1px solid rgba(
        85,
        85,
        203,
        0.2
    );

    border-radius: 11px;

    background: rgba(
        85,
        85,
        203,
        0.07
    );

    color: #5555CB;

    font-family:
        Roboto,
        sans-serif;

    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.25;
}


.product-view-health-fund-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 30px;
    height: 24px;

    padding: 0 0.38rem;

    border-radius: 7px;

    background: #C5C5F1;
    color: #06154B;

    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.045em;
    line-height: 1;
}


/* =========================================================
   HOVER – CSAK DESKTOPON
   ========================================================= */

@media (hover: hover) {

    .product-view-coupon-offer {
        transition:
            border-color 0.18s ease,
            background-color 0.18s ease;
    }


    .product-view-coupon-offer:hover {
        border-color: rgba(
            28,
            160,
            142,
            0.7
        );

        background: rgba(
            28,
            160,
            142,
            0.075
        );
    }


    .product-view-health-fund-badge {
        transition:
            border-color 0.18s ease,
            background-color 0.18s ease;
    }


    .product-view-health-fund-badge:hover {
        border-color: rgba(
            85,
            85,
            203,
            0.34
        );

        background: rgba(
            85,
            85,
            203,
            0.1
        );
    }

}


/* =========================================================
   TABLET
   ========================================================= */

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

    .product-view-coupon-offer {
        width: 100%;
    }


    .product-view-coupon-price {
        margin-left: auto;
    }

}


/* =========================================================
   MOBIL
   ========================================================= */

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

    .product-view-purchase-info {
        width: 100%;

        gap: 0.6rem;

        margin-top: 0.75rem;
        margin-bottom: 0.45rem;
    }


    .product-view-coupon-offer {
        width: 100%;

        padding: 0.72rem 0.78rem;

        gap: 0.65rem;
    }


    .product-view-coupon-offer-head {
        flex: 1 1 auto;
    }


    .product-view-coupon-price {
        margin-left: 0;

        padding-left: 0;

        border-left: 0;

        flex-basis: 100%;

        padding-top: 0.55rem;

        border-top: 1px solid rgba(
            28,
            160,
            142,
            0.14
        );
    }


    .product-view-coupon-condition {
        padding-left: 0;

        margin-top: -0.1rem;
    }


    .product-view-health-fund-badge {
        font-size: 0.68rem;
    }

}


/* =========================================================
   KIS MOBIL
   ========================================================= */

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

    .product-view-coupon-offer-title > strong {
        font-size: 0.72rem;
    }


    .product-view-coupon-offer-title > span {
        font-size: 0.63rem;
    }


    .product-view-coupon-price {
        font-size: 0.67rem;
    }


    .product-view-coupon-price strong {
        font-size: 0.95rem;
    }


    .product-view-health-fund-badge {
        width: 100%;

        justify-content: flex-start;

        padding: 0.52rem 0.68rem;
    }

}

.retailer-user-bar {
    width: 100%;
    background: #06154B;
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1.4;
    position: relative;
    z-index: 1100;
}

.retailer-user-bar-inner {
    min-height: 38px;
    padding: 0.55rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-align: center;
}

.retailer-user-bar strong {
    font-weight: 700;
    color: #fff;
}

.retailer-user-bar span {
    opacity: 0.9;
}

@media (max-width: 768px) {
    .retailer-user-bar {
        font-size: 0.8rem;
    }

    .retailer-user-bar-inner {
        min-height: 34px;
        padding: 0.45rem 0.75rem;
        gap: 0.35rem;
        flex-wrap: wrap;
    }
}

/* =========================================================
   CHECKOUT REMINDER MODAL
   ========================================================= */

.checkout-reminder-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1.25rem;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease;
}


.checkout-reminder-modal.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   Backdrop
   ========================================================= */

.checkout-reminder-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(
            10,
            15,
            30,
            0.48
        );

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);
}


/* =========================================================
   Dialog
   ========================================================= */

.checkout-reminder-dialog {
    position: relative;
    z-index: 1;

    width: min(
        100%,
        520px
    );

    max-height:
        calc(
            100vh
            - 2.5rem
        );

    overflow-y: auto;

    border-radius:
        24px;

    background:
        #ffffff;

    box-shadow:
        0
        24px
        70px
        rgba(
            10,
            15,
            30,
            0.24
        );

    transform:
        translateY(
            10px
        )
        scale(
            0.985
        );

    transition:
        transform
        0.2s
        ease;
}


.checkout-reminder-modal.is-active
.checkout-reminder-dialog {
    transform:
        translateY(
            0
        )
        scale(
            1
        );
}


/* =========================================================
   Content
   ========================================================= */

.checkout-reminder-content {
    padding:
        2rem;
}


.checkout-reminder-eyebrow {
    display: block;

    margin-bottom:
        0.55rem;

    color:
        #7b8190;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.checkout-reminder-title {
    margin:
        0;

    color:
        #08144a;

    font-size:
        1.45rem;

    font-weight:
        800;

    line-height:
        1.25;
}


.checkout-reminder-intro {
    margin:
        0.7rem
        0
        1.35rem;

    color:
        #687080;

    font-size:
        0.94rem;

    line-height:
        1.55;
}


/* =========================================================
   Blocks
   ========================================================= */

.checkout-reminder-block {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        0.9rem;

    padding:
        1rem;

    margin-top:
        0.8rem;

    border:
        1px solid
        #eceef3;

    border-radius:
        15px;

    background:
        #fafbfc;
}


.checkout-reminder-block-icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0
        38px;

    width:
        38px;

    height:
        38px;

    border-radius:
        12px;

    background:
        #eef0ff;

    color:
        #5555CB;

    font-size:
        0.78rem;

    font-weight:
        900;
}


.checkout-reminder-block strong {
    display:
        block;

    margin-bottom:
        0.25rem;

    color:
        #111827;

    font-size:
        0.92rem;
}


.checkout-reminder-block p {
    margin:
        0;

    color:
        #6b7280;

    font-size:
        0.84rem;

    line-height:
        1.5;
}


/* =========================================================
   Health fund
   ========================================================= */

.checkout-reminder-health-fund {
    border-color:
        #dfe1ff;

    background:
        #f8f8ff;
}


.checkout-reminder-health-fund
.checkout-reminder-block-icon {
    background:
        #5555CB;

    color:
        #ffffff;
}


.checkout-reminder-link-button {
    appearance:
        none;

    margin-top:
        0.7rem;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        #5555CB;

    font: inherit;

    font-size:
        0.82rem;

    font-weight:
        800;

    cursor:
        pointer;
}


.checkout-reminder-link-button:hover {
    text-decoration:
        underline;
}


/* =========================================================
   Actions
   ========================================================= */

.checkout-reminder-actions {
    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        0.75rem;

    margin-top:
        1.5rem;
}


.checkout-reminder-button {
    min-height:
        3.05rem;

    padding:
        0.75rem
        1rem;

    border:
        0;

    border-radius:
        999px;

    font-size:
        0.9rem;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform
        0.15s
        ease,
        opacity
        0.15s
        ease,
        background
        0.15s
        ease;
}


.checkout-reminder-button:hover {
    transform:
        translateY(
            -1px
        );
}


.checkout-reminder-button.is-secondary {
    background:
        #f2f3f8;

    color:
        #08144a;
}


.checkout-reminder-button.is-primary {
    background:
        #08144a;

    color:
        #ffffff;
}


/* =========================================================
   Scroll lock
   ========================================================= */

html.is-checkout-reminder-open,
html.is-checkout-reminder-open body {
    overflow:
        hidden;
}


/* =========================================================
   Mobile
   ========================================================= */

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

    .checkout-reminder-modal {
        align-items:
            flex-end;

        padding:
            0.75rem;
    }


    .checkout-reminder-dialog {
        width:
            100%;

        border-radius:
            22px;
    }


    .checkout-reminder-content {
        padding:
            1.35rem;
    }


    .checkout-reminder-actions {
        grid-template-columns:
            1fr;
    }


    .checkout-reminder-button.is-primary {
        order:
            -1;
    }

}

.global-flash-toast {
    position: fixed;
    left: 50%;
    bottom: 34px;
    z-index: 99999;

    display: flex;
    align-items: center;
    gap: 10px;

    max-width: calc(100vw - 32px);
    padding: 13px 18px;
    border-radius: 14px;

    background: rgba(7, 32, 83, 0.96);
    color: #fff;

    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;

    box-shadow:
        0 14px 36px
        rgba(7, 32, 83, 0.22);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    opacity: 0;

    transform:
        translate(
            -50%,
            22px
        );

    pointer-events: none;

    transition:
        opacity 0.38s ease,
        transform 0.38s ease;
}

.global-flash-toast.is-visible {
    opacity: 1;

    transform:
        translate(
            -50%,
            0
        );
}

.global-flash-toast.is-hiding {
    opacity: 0;

    transform:
        translate(
            -50%,
            18px
        );
}

.global-flash-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.14);

    color: #fff;

    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .global-flash-toast {
        bottom: 86px;
        width: calc(100vw - 32px);
        justify-content: center;
        text-align: center;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .global-flash-toast {
        transition: opacity 0.15s ease;

        transform:
            translate(
                -50%,
                0
            );
    }

    .global-flash-toast.is-visible,
    .global-flash-toast.is-hiding {
        transform:
            translate(
                -50%,
                0
            );
    }
}

.cookie-consent {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 99990;

    width: min(
        720px,
        calc(100vw - 32px)
    );

    transform:
        translateX(-50%);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.cookie-consent.is-hidden {
    display: none;
}

.cookie-consent.is-hiding {
    opacity: 0;

    transform:
        translate(
            -50%,
            18px
        );
}

.cookie-consent-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 20px 22px;

    border-radius: 18px;

    background:
        rgba(
            7,
            32,
            83,
            0.98
        );

    color: #fff;

    box-shadow:
        0 18px 50px
        rgba(
            7,
            32,
            83,
            0.25
        );

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}

.cookie-consent-content {
    flex: 1;
}

.cookie-consent-eyebrow {
    display: block;

    margin-bottom: 4px;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.08em;

    opacity: 0.7;
}

.cookie-consent-title {
    margin: 0 0 6px;

    color: #fff;

    font-size: 18px;
    font-weight: 700;
}

.cookie-consent-text {
    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );

    font-size: 14px;
    line-height: 1.5;
}

.cookie-consent-actions {
    display: flex;
    align-items: center;
    gap: 10px;

    flex-shrink: 0;
}

.cookie-consent-button {
    min-height: 42px;

    padding:
        0 16px;

    border: 0;
    border-radius: 11px;

    font: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.cookie-consent-button:hover {
    transform:
        translateY(-1px);
}

.cookie-consent-button.is-primary {
    background: #fff;
    color: #072053;
}

.cookie-consent-button.is-secondary {
    background:
        rgba(
            255,
            255,
            255,
            0.1
        );

    color: #fff;
}

@media (
    max-width: 768px
) {
    .cookie-consent {
        bottom: 86px;
    }

    .cookie-consent-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-consent-actions {
        flex-direction: column-reverse;
    }

    .cookie-consent-button {
        width: 100%;
    }
}

.catalog-product-stock.is-bundle-orderable {
    background: #edf8ee;
    color: #28783b;
}

.home-product-bundle-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;

    padding: 5px 11px;

    border-radius: 999px;

    background: #a8df4f;
    color: #13220d;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}

.home-product-stock.is-bundle-orderable {
    background: #edf8ee;
    color: #2f7d42;
}

/* =========================================================
   New webshop welcome
   ========================================================= */

.new-shop-welcome {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.new-shop-welcome.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.new-shop-welcome-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(4, 16, 45, 0.48);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.new-shop-welcome-dialog {
    position: relative;
    z-index: 1;

    width: min(
        920px,
        100%
    );

    max-height:
        calc(
            100dvh
            - 48px
        );

    overflow-y: auto;

    padding:
        38px
        42px
        32px;

    background:
        rgba(
            255,
            255,
            255,
            0.98
        );

    border:
        1px solid
        rgba(
            9,
            35,
            82,
            0.08
        );

    border-radius:
        30px;

    box-shadow:
        0
        30px
        90px
        rgba(
            0,
            20,
            60,
            0.25
        );

    transform:
        translateY(14px)
        scale(0.985);

    transition:
        transform 0.3s ease;
}


.new-shop-welcome.is-open
.new-shop-welcome-dialog {
    transform:
        translateY(0)
        scale(1);
}


/* Close */

.new-shop-welcome-close {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;

    border-radius:
        50%;

    background:
        #f3f5f8;

    color:
        #0b1f4f;

    font-size:
        29px;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.new-shop-welcome-close:hover {
    background:
        #e8edf3;

    transform:
        rotate(4deg);
}


/* Logo */

.new-shop-welcome-logo {
    display: flex;
    justify-content: center;

    margin:
        0
        auto
        18px;
}


.new-shop-welcome-logo img {
    display: block;

    width:
        78px;

    height:
        auto;
}


/* Heading */

.new-shop-welcome-heading {
    max-width:
        700px;

    margin:
        0
        auto
        30px;

    text-align:
        center;
}


.new-shop-welcome-eyebrow {
    display: inline-flex;

    margin-bottom:
        9px;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;

    color:
        #00aa93;
}


.new-shop-welcome-title {
    margin:
        0
        0
        12px;

    font-size:
        clamp(
            27px,
            4vw,
            38px
        );

    line-height:
        1.15;

    color:
        #092352;
    font-weight: 650;
}


.new-shop-welcome-description {
    margin: 0;

    font-size:
        16px;

    line-height:
        1.65;

    color:
        #5d6676;
}


/* Feature grid */

.new-shop-welcome-features {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        14px;
}


.new-shop-welcome-feature {
    display: flex;

    align-items:
        flex-start;

    gap:
        15px;

    padding:
        20px;

    border:
        1px solid
        #e7ebf0;

    border-radius:
        20px;

    background:
        #fbfcfd;
}


.new-shop-welcome-feature-icon {
    flex:
        0
        0
        46px;

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    background:
        #e9faf7;

    color:
        #00a68f;
}


.new-shop-welcome-feature-icon svg {
    width:
        23px;

    height:
        23px;
}


.new-shop-welcome-feature-title {
    margin:
        1px
        0
        6px;

    font-size:
        15px;

    font-weight:
        700;

    line-height:
        1.3;

    color:
        #092352;
}


.new-shop-welcome-feature-text {
    margin:
        0;

    font-size:
        13px;

    line-height:
        1.55;

    color:
        #444f61;
}


.new-shop-welcome-feature-note {
    margin:
        7px
        0
        0;

    font-size:
        12px;

    line-height:
        1.5;

    color:
        #77808e;
}


/* Actions */

.new-shop-welcome-actions {
    display:
        flex;

    justify-content:
        center;

    margin-top:
        28px;
}


.new-shop-welcome-primary {
    min-height:
        50px;

    padding:
        0
        28px;

    border:
        0;

    border-radius:
        999px;

    background:
        #092352;

    color:
        #ffffff;

    font-weight:
        700;

    box-shadow:
        0
        10px
        28px
        rgba(
            9,
            35,
            82,
            0.18
        );
}


.new-shop-welcome-primary:hover {
    color:
        #ffffff;

    transform:
        translateY(-1px);
}


.new-shop-welcome-footer-text {
    margin:
        18px
        0
        0;

    text-align:
        center;

    font-size:
        13px;

    color:
        #89909b;
}


html.new-shop-welcome-lock,
body.new-shop-welcome-lock {
    overflow:
        hidden;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (
    max-width:
    768px
) {

    .new-shop-welcome {
        align-items:
            flex-end;

        padding:
            12px;
    }


    .new-shop-welcome-dialog {
        width:
            100%;

        max-height:
            calc(
                100dvh
                - 24px
            );

        padding:
            31px
            18px
            24px;

        border-radius:
            26px;
    }


    .new-shop-welcome-close {
        top:
            14px;

        right:
            14px;

        width:
            38px;

        height:
            38px;
    }


    .new-shop-welcome-logo img {
        width:
            66px;
    }


    .new-shop-welcome-heading {
        margin-bottom:
            23px;

        padding:
            0
            14px;
    }


    .new-shop-welcome-description {
        font-size:
            14px;
    }


    .new-shop-welcome-features {
        grid-template-columns:
            1fr;
    }


    .new-shop-welcome-feature {
        padding:
            16px;

        border-radius:
            18px;
    }


    .new-shop-welcome-feature-icon {
        flex-basis:
            42px;

        width:
            42px;

        height:
            42px;
    }


    .new-shop-welcome-primary {
        width:
            100%;
    }

}