.drawer-backdrop, .mega-panel {
    pointer-events: none;
    opacity: 0
}

.drawer-backdrop.is-open, .mega-panel.is-open {
    pointer-events: auto;
    opacity: 1
}

.cat-card, .mega-feature, body.drawer-open {
    overflow: hidden
}

.product-slider, html {
    scroll-behavior: smooth
}

.badge, .cat-icon, .icon-btn, .wish {
    place-items: center
}

*, [class*=col-] {
    box-sizing: border-box
}

.product h2.title a, .small-dropdown a, a {
    text-decoration: none
}

.mobileGallery-product, .product-slider {
    scroll-snap-type: x mandatory;
    scrollbar-width: none
}

:root {
    --bg: #f7f3ef;
    --bg-soft: #fbf8f5;
    --card: #ffffff;
    --ink: #171717;
    --muted: #6f6a66;
    --line: rgba(0, 0, 0, .09);
    --gold: #d4145a;
    --gold-dark: #ae0942;
    --black: #101010;
    --rose: #dfdfdf;
    --shadow: 0 18px 45px rgba(20, 20, 20, .09);
    --radius: 18px
}

body, html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important
}

.block-title, .block-title-colored, h1, h2, h3, h4, h5, h6 {
    font-family: Inter, sans-serif !important;
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--bg-soft)
}

a {
    color: inherit
}

button, input {
    font: inherit
}

.block-title, .block-title-colored, .brand-row, .collapse-block_title, .login-form-box h2, .mega-feature strong, .news-box2 .info h2, .product-info2 h1.title, .shop h4, h1 {
    font-family: "Playfair Display", serif
}

.container-wide {
    width: min(1480px, calc(100% - 48px));
    margin-inline: auto
}

.topbar {
    background: #111;
    color: #f8f1e8;
    font-size: 13px
}

.topbar-inner {
    height: 38px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px
}

.topbar-left, .topbar-right {
    display: flex;
    align-items: center;
    gap: 34px
}

.header-inner, .nav {
    align-items: center
}

.topbar i {
    color: var(--gold);
    margin-right: 7px
}

#accordian h3 a:hover, #accordian li.active > h3 a, .aside-custom-block h6 a:hover, .aside-featured-product .product-content .title a:hover, .breadcrumb li a:hover, .compare-aside .item a.title:hover, .icon-btn:hover, .login-form-box .input-group-addon:last-child:hover, .mega-list a:hover, .mobile-acc-sublink:hover, .mobile-acc-title:hover, .nav-item:hover, .product h2.title a:hover, .product-s:hover .title-s, .progressbar .step.current .step-label, .section-title span, .table.cart .product-names a:hover, .wishlist-toggle:hover {
    color: var(--gold-dark)
}

.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .25s, transform .25s
}

.header.is-scrolled {
    box-shadow: 0 16px 45px rgba(0, 0, 0, .08)
}

.header-inner {
    height: 78px;
    display: grid;
    grid-template-columns:260px 1fr 430px;
    gap: 28px
}

.mobile-menu-btn {
    display: none;
    border: 0;
    background: 0 0;
    font-size: 32px;
    justify-self: end
}

.nav, .nav-item, .search {
    display: flex
}

.nav {
    justify-content: center;
    gap: 36px;
    font-weight: 600;
    font-size: 15px
}

.nav-item {
    position: relative;
    height: 78px;
    align-items: center;
    gap: 7px;
    cursor: pointer
}

.nav-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transition: .22s
}

.nav-item.is-active::after, .nav-item:hover::after {
    transform: scaleX(1)
}

.header-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 18px
}

.search {
    width: 245px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    align-items: center;
    padding: 0 14px;
    background: #fff;
    transition: .2s
}

.search:focus-within {
    width: 295px;
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(200, 163, 106, .14)
}

.search input {
    border: 0;
    outline: 0;
    width: 100%;
    font-size: 13px;
    background: 0 0
}

.icon-btn {
    position: relative;
    width: 38px;
    height: 38px;
    display: grid;
    font-size: 21px;
    transition: .2s
}

.badge, .mega-panel {
    position: absolute;
    right: 0
}

.icon-btn:hover {
    transform: translateY(-2px)
}

.badge {
    top: 2px;
    min-width: 17px;
    height: 17px;
    border-radius: 999px;
    background: var(--gold);
    color: #fff;
    font-size: 10px;
    display: grid
}

.mega-panel {
    top: 100%;
    left: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 25px 55px rgba(0, 0, 0, .08);
    transform: translateY(-12px);
    transition: opacity .22s, transform .22s
}

.mega-panel.is-open {
    transform: translateY(0)
}

.mega-inner {
    display: grid;
    grid-template-columns:1.2fr .75fr .75fr 350px;
    gap: 60px;
    padding: 34px 0 36px
}

.btns, .hero, .mega-feature {
    display: flex
}

.mega-col h3 {
    margin: 0 0 18px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .08em
}

.mega-list {
    columns: 2;
    list-style: none;
    padding: 0;
    margin: 0
}

.mega-list.one {
    columns: 1
}

.mega-list li {
    break-inside: avoid;
    margin: 0 0 13px;
    color: #242424
}

.mega-list a {
    transition: .18s
}

.mega-list a:hover {
    padding-left: 5px
}

.mega-feature {
    min-height: 230px;
    border-radius: var(--radius);
    padding: 28px;
    color: #fff;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(0deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .08)), url('https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=900&q=80') center/cover
}

.mega-feature span {
    color: var(--gold);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em
}

.all-link, .btn, .cart-btn, .label-new, .small-btn {
    font-weight: 700
}

.mega-feature strong {
    font-size: 28px;
    margin: 7px 0 14px
}

.mega-feature em {
    width: max-content;
    font-style: normal;
    border: 1px solid rgba(255, 255, 255, .7);
    padding: 9px 16px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px
}

.mobile-drawer {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(360px, 88vw);
    background: #fff;
    z-index: 80;
    transform: translateX(-105%);
    transition: .28s;
    padding: 28px;
    box-shadow: 20px 0 50px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column;
    gap: 20px
}

.cart-drawer.is-open, .mobile-drawer.is-open {
    transform: translateX(0)
}

.drawer-close {
    align-self: flex-end;
    border: 0;
    background: 0 0;
    font-size: 24px
}

.btn, .kicker {
    font-size: 13px;
    text-transform: uppercase
}

.drawer-logo {
    margin-bottom: 20px
}

.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 70;
    transition: .25s
}

.hero {
    min-height: 520px;
    background: linear-gradient(90deg, rgba(247, 243, 239, .96) 0, rgba(247, 243, 239, .78) 44%, rgba(247, 243, 239, .12) 70%), url('https://diamondruha.hu/assets/img/banner-3.jpg') center right/cover;
    align-items: center
}

.hero-content {
    width: min(640px, 100%);
    padding: 72px 0
}

.kicker {
    color: var(--muted);
    letter-spacing: .14em;
    margin-bottom: 18px
}

.all-link, .cat-icon, .hero h1 span {
    color: var(--gold-dark)
}

h1 {
    font-size: clamp(42px, 5vw, 76px);
    line-height: 1.02;
    margin: 0 0 20px
}

.hero h1 span {
    display: block;
    font-style: italic;
    font-weight: 500
}

.hero p {
    max-width: 520px;
    color: #4d4945;
    font-size: 17px;
    line-height: 1.7;
    margin: 0 0 28px
}

.btns {
    gap: 14px;
    flex-wrap: wrap
}

.btn {
   /* min-width: 145px;*/
    height: 48px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    letter-spacing: .04em;
    border: 1px solid #111;
    transition: .2s
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.btn.black {
    background: #111;
    color: #fff
}

.btn.gold, .hide-desktop .btn-lg:hover {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold)
}

.btn.outline {
    background: 0 0;
    color: #111
}

.section {
    padding: 34px 0
}

.category-grid {
    display: grid;
    grid-template-columns:repeat(6, 1fr);
    gap: 18px
}

.cat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .04);
    transition: .25s
}

.cat-card:hover, .product-s:hover, .product:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow)
}

.cat-card:hover .cat-img, .news-box:hover .image img {
    transform: scale(1.06)
}

.aside-featured-product:hover .product-img img, .news-box2:hover .image img, .product-s:hover .image-box-s img, .product:hover .image-box img, .subcategory-item.zoom-in:hover img {
    transform: scale(1.05)
}

.cat-img {
    height: 150px;
    background: var(--rose) center/cover;
    transition: .35s
}

.img-1 {
    background-image: url('https://images.unsplash.com/photo-1539109136881-3be0616acf4b?auto=format&fit=crop&w=700&q=80')
}

.img-2 {
    background-image: url('https://images.unsplash.com/photo-1543163521-1bf539c55dd2?auto=format&fit=crop&w=700&q=80')
}

.img-3 {
    background-image: url('https://images.unsplash.com/photo-1516762689617-e1cffcef479d?auto=format&fit=crop&w=700&q=80')
}

.img-4 {
    background-image: url('https://images.unsplash.com/photo-1601924921557-45e6dea0a157?auto=format&fit=crop&w=700&q=80')
}

.img-5 {
    background-image: url('https://images.unsplash.com/photo-1516257984-b1b4d707412e?auto=format&fit=crop&w=700&q=80')
}

.img-6 {
    background-image: url('https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=900&q=80')
}

.cat-body {
    position: relative;
    text-align: center;
    padding: 34px 12px 18px
}

.cat-icon {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    border-radius: 999px;
    display: grid;
    background: #fff;
    border: 1px solid var(--line);
    font-size: 22px
}

.nav-item.has-dropdown, .product-card {
    position: relative
}

.label-new, .wish {
    top: 10px;
    z-index: 2
}

.cat-body h3 {
    margin: 0 0 7px;
    font-size: 14px;
    text-transform: uppercase
}

.cat-body p {
    margin: 0;
    color: var(--muted);
    font-size: 12px
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    gap: 20px
}

.section-title {
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0
}

.all-link {
    font-size: 13px
}

.filters-row_select, .slider-controls {
    display: flex;
    align-items: center;
    gap: 10px
}

.product, .promo {
    flex-direction: column
}

.slider-controls button {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    cursor: pointer;
    transition: .2s
}

.slider-controls button:hover {
    background: var(--black);
    color: #fff
}

.product-slider {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 112px) / 8);
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px
}

.news-box, .product, .product .image-box, .product h2.title, .product-card, .promo {
   /* overflow: hidden*/
}

.product-slider::-webkit-scrollbar {
    display: none
}

.product-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    scroll-snap-align: start;
    transition: .25s
}

.label-new, .small-dropdown, .wish {
    position: absolute
}

.news-box2:hover, .news-box:hover, .product-card:hover, .promo:hover, .subcategory-item.zoom-in:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow)
}

.product-card:hover .product-img {
    transform: scale(1.04)
}

.product-img {
    height: 235px;
    background: center/cover #f0ece8;
    transition: .35s
}

.product-1 {
    background-image: url('https://images.unsplash.com/photo-1539008835657-9e8e9680c956?auto=format&fit=crop&w=500&q=80')
}

.product-2 {
    background-image: url('https://images.unsplash.com/photo-1543163521-1bf539c55dd2?auto=format&fit=crop&w=500&q=80')
}

.product-3 {
    background-image: url('https://images.unsplash.com/photo-1516762689617-e1cffcef479d?auto=format&fit=crop&w=500&q=80')
}

.product-4 {
    background-image: url('https://images.unsplash.com/photo-1544441893-675973e31985?auto=format&fit=crop&w=500&q=80')
}

.product-5 {
    background-image: url('https://images.unsplash.com/photo-1551232864-3f0890e580d9?auto=format&fit=crop&w=500&q=80')
}

.product-6 {
    background-image: url('https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=500&q=80')
}

.product-7 {
    background-image: url('https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?auto=format&fit=crop&w=500&q=80')
}

.product-8 {
    background-image: url('https://images.unsplash.com/photo-1529139574466-a303027c1d8b?auto=format&fit=crop&w=500&q=80')
}

.label-new, .wish:hover {
    background: var(--gold);
    color: #fff
}

.label-new {
    left: 10px;
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 11px
}

.wish {
    right: 10px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, .9);
    border-radius: 999px;
    display: grid;
    transition: .2s
}

.btn.btn-product:hover, .cart-btn:hover {
    background: var(--gold-dark)
}

.product-info {
    /*padding: 13px;*/
    /*text-align: center*/
}

.product-name {
    min-height: 40px;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 7px
}

.cart-btn {
    height: 34px;
    border: 0;
    width: 100%;
    background: #111;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: .2s
}

.sizes {
    color: var(--muted);
    font-size: 11px;
    margin-top: 9px;
    letter-spacing: .18em
}

.promo-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 18px
}

.promo {
    min-height: 180px;
    border-radius: 12px;
    padding: 34px;
    display: flex;
    justify-content: center;
    color: #fff;
    background: linear-gradient(90deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .12)), var(--img) center/cover;
    transition: .25s
}

.benefit, .brand-row {
    align-items: center;
    gap: 14px
}

.promo-1 {
    --img: url('https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=900&q=80')
}

.promo-2 {
    --img: url('https://images.unsplash.com/photo-1516762689617-e1cffcef479d?auto=format&fit=crop&w=900&q=80')
}

.promo-3 {
    --img: url('https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=900&q=80')
}

.promo h3 {
    color: var(--gold);
    text-transform: uppercase
}

.promo p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, .9)
}

.small-btn {
    width: max-content;
    border: 1px solid rgba(255, 255, 255, .75);
    color: #fff;
    padding: 9px 18px;
    border-radius: 5px;
    font-size: 12px
}

.brand-row {
    display: grid;
    grid-template-columns:repeat(7, 1fr);
    text-align: center;
    color: #202020;
    font-size: 24px
}

.brand {
    padding: 22px 8px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--line);
    transition: .2s
}

.brand:hover {
    color: var(--gold-dark);
    transform: translateY(-3px)
}

.benefits {
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.benefit-row {
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    gap: 14px
}

.benefit {
    display: flex;
    padding: 26px 0
}

.benefit i {
    color: var(--gold);
    font-size: 27px
}

.benefit strong {
    display: block;
    font-size: 13px;
    text-transform: uppercase
}

.benefit span {
    color: var(--muted);
    font-size: 12px
}

.newsletter {
    background: linear-gradient(90deg, #121212, #1e1a17);
    color: #fff;
    padding: 38px 0
}

.newsletter-inner {
    display: grid;
    grid-template-columns:1fr 520px;
    gap: 40px;
    align-items: center
}

.newsletter h3 {
    margin: 0 0 8px;
    font-size: 23px;
    text-transform: uppercase;
    letter-spacing: .08em
}

.newsletter p {
    margin: 0;
    color: rgba(255, 255, 255, .74)
}

.newsletter-form {
    display: flex;
    height: 48px
}

.newsletter-form input {
    flex: 1;
    border: 1px solid rgba(255, 255, 255, .2);
    background: 0 0;
    color: #fff;
    padding: 0 16px;
    outline: 0;
    border-radius: 7px 0 0 7px
}

.newsletter-form button {
    width: 170px;
    border: 0;
    background: var(--gold);
    color: #fff;
    font-weight: 800;
    border-radius: 0 7px 7px 0
}

.footer {
    background: #0e0e0e;
    color: #fff;
    padding: 46px 0 28px
}

.footer-grid {
    display: grid;
    grid-template-columns:1.2fr repeat(4, 1fr);
    gap: 42px
}

.footer h4 {
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    margin: 0 0 16px
}

.footer ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.footer li {
    color: rgba(255, 255, 255, .68);
    margin-bottom: 10px;
    font-size: 13px
}

.footer .logo {
    color: #fff;
    margin-bottom: 22px
}

.socials {
    display: flex;
    gap: 12px;
    color: var(--gold);
    font-size: 20px
}

.copyright {
    margin-top: 38px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    gap: 20px
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .65s, transform .65s
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0)
}

@media (max-width: 1200px) {
    .header-inner {
        grid-template-columns:220px 1fr auto
    }

    .mega-feature, .search {
        display: none
    }

    .product-slider {
        grid-auto-columns: calc((100% - 48px) / 4)
    }

    .category-grid, .mega-inner {
        grid-template-columns:repeat(3, 1fr)
    }
}

.small-dropdown {
    top: calc(100% + 18px);
    left: 0;
    min-width: 230px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .1);
    padding: 14px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .2s;
    z-index: 50
}

.nav-item.has-dropdown:hover .small-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.small-dropdown a {
    display: block;
    padding: 9px 18px;
    color: #222;
    font-size: 15px
}

.small-dropdown a:hover {
    background: #f7f2ec;
    color: #c49a5a
}

.container {
    width: min(1480px, calc(100% - 48px));
    margin-inline: auto;
    padding-left: 15px;
    padding-right: 15px
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -12px;
    margin-right: -12px
}

[class*=col-] {
    position: relative;
    width: 100%;
    padding-left: 12px;
    padding-right: 12px
}

.col-xs-12 {
    flex: 0 0 100%;
    max-width: 100%
}

.col-xs-6 {
    flex: 0 0 50%;
    max-width: 50%
}

@media (min-width: 768px) {
    .col-sm-12 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-sm-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-sm-3 {
        flex: 0 0 25%;
        max-width: 25%
    }
}

@media (min-width: 1200px) {
    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .col-lg-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-lg-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-lg-9, .col-xl-9 {
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-lg-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-lg-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-lg-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-lg-3, .col-xl-3 {
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-lg-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-lg-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }
}

.tol-25 {
    height: 25px;
    width: 100%
}

@media (min-width: 821px) {
    .hide-desktop {
        display: none !important
    }
}

.product, .product_inside {
    display: flex;
    position: relative
}

.block-title, .block-title-colored {
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 45px 0 25px;
    text-align: center;
    color: var(--ink);
    position: relative;
    width: 100%
}

.block-title-colored, .block-title-colored a {
    color: var(--gold-dark);
    transition: color .2s;
    text-decoration: none
}

.block-title-colored a:hover, .productvendorsmallinfo a:hover, .slide-column-close a:hover {
    color: var(--gold)
}

.block-title-colored::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: var(--gold);
    margin: 12px auto 0;
    border-radius: 2px
}

.product {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .25s, box-shadow .25s;
    margin-bottom: 24px;
    height: calc(100% - 24px)
}



.product_inside {
    padding: 16px;
    flex-direction: column;
    height: 100%
}

.product .image-box {
    position: relative;
    width: 100%;
    border-radius: calc(var(--radius) - 6px);
   /* background: var(--bg);*/
    margin-bottom: 16px;
    text-align: center;


}

.product .image-box a {
    display: block;
    width: 100%;
    aspect-ratio: 3/4;
    position: relative
}

.aside-featured-product .product-img img, .image-box-s img, .news-box2 .image img, .product .image-box img {
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
    object-fit: contain;
    transition: transform .4s
}

.badge-akcios2 {
    position: absolute;
    left: 12px;
    top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    border-radius: 999px;
    background: var(--gold);
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(212, 20, 90, .35);
}

.badge-akcios2::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    opacity: .85;
    flex-shrink: 0;
}
.ribbon {
    position: absolute;
    right: 2px;
    top: 12px;
    display: inline-flex;
    align-items: center;
    color: #fff;
    background: var(--ink);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(23, 23, 23, .25);
}

.news-box .info button:hover {
    background: var(--gold)
}

.image-box-s, .news-box, .product-s {
    position: relative
}

.product .price.view, .star-title {
    font-size: 15px;
    text-align: center
}

.product h2.title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: center
}

.news-box2 .info p, .product .description {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.product h2.title a {
    color: var(--ink);
    transition: color .2s
}

.product .price.view {
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--ink);
    line-height: 1.4
}

.price-s .old-price-s, .product .price.view .old-price {
    font-size: 12px;
    color: var(--muted);
    text-decoration: line-through;
    margin-right: 6px
}

.aside-featured-product .product-content .price .new-price, .price-s .new-price-s, .product .price.view .new-price {
    font-weight: 800;
    color: var(--gold)
}

.product .description {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 14px;
    text-align: center;
    display: -webkit-box;
    overflow: hidden
}

.btn.btn-product, .news-box2 .info button a {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    text-decoration: none
}

.product_inside_hover {
    margin-top: auto;
    width: 100%
}

.btn.btn-product {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff !important;
    border: 1px solid var(--ink);
    transition: .2s
}

.btn.btn-product:hover {
    border-color: var(--gold-dark);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(168, 127, 66, .2)
}

.btn.btn-product span.icon {
    margin-right: 8px;
    font-size: 16px
}

div.product:has(a[href*="/markak/"]), div.product:has(img[src*="/marka/"]) {
    height: auto !important;
    min-height: unset !important;
    aspect-ratio: 16/10;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .02)
}

div.product:has(a[href*="/markak/"]) .product_inside, div.product:has(img[src*="/marka/"]) .product_inside {
    padding: 0 !important;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

div.product:has(a[href*="/markak/"]) .image-box, div.product:has(img[src*="/marka/"]) .image-box {
    margin: 0 !important;
    background: 0 0 !important;
    border-radius: 0 !important;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

div.product:has(a[href*="/markak/"]) .image-box a, div.product:has(img[src*="/marka/"]) .image-box a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important
}

div.product:has(a[href*="/markak/"]) .image-box img, div.product:has(img[src*="/marka/"]) .image-box img {
    max-width: 90% !important;
    max-height: 90% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform .3s
}

div.product:has(a[href*="/markak/"]):hover img, div.product:has(img[src*="/marka/"]):hover img {
    transform: scale(1.05)
}

div.product:has(.icon-book), div.product:has(a[href*="/blog/"]) {
    height: calc(100% - 24px);
    display: flex;
    flex-direction: column
}

div.product:has(.icon-book) .image-box, div.product:has(a[href*="/blog/"]) .image-box {
    aspect-ratio: 16/10 !important;
    overflow: hidden;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--radius) - 6px);
    margin-bottom: 16px
}

div.product:has(.icon-book) .image-box a, div.product:has(a[href*="/blog/"]) .image-box a {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important
}

div.product:has(.icon-book) .image-box img, div.product:has(a[href*="/blog/"]) .image-box img {
    max-width: 100% !important;

    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    background: var(--bg-soft)
}

.news-container {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    width: 100%;
    margin-bottom: 30px
}

.news-box {
    border-radius: var(--radius);
    aspect-ratio: 1/1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
    transition: transform .3s, box-shadow .3s
}

.news-box .image, .news-box .image a {
    display: block;
    width: 100%;
    height: 100%
}

.news-box .image img, .subcategory-item.zoom-in img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s
}

.news-box .info {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(16, 16, 16, .75) 0, rgba(16, 16, 16, .1) 60%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px
}

.news-box .info button {
    background: rgba(255, 255, 255, .95);
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: .2s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .1)
}

.news-box .info button a {
    color: var(--ink);
    text-decoration: none
}

.news-box .info button:hover a {
    color: #fff
}

.hide-desktop .btn-lg {
    display: block;
    width: 100%;
    padding: 14px 20px;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 10px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .02);
    transition: .2s;
    text-decoration: none
}

.news-box2, .subcategory-item.zoom-in {
    margin-bottom: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .03);
    overflow: hidden
}

.subcategory-listing {
    display: flex;
    flex-wrap: wrap;
    margin-left: -12px;
    margin-right: -12px;
    width: calc(100% + 24px)
}

.subcategory-item.zoom-in {
    display: block;
    border-radius: var(--radius);
    transition: transform .3s, box-shadow .3s
}

.subcategory-item.zoom-in span {
    display: block;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden
}

.news-box2 {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .25s, box-shadow .25s;
    height: calc(100% - 24px);
    display: flex;
    flex-direction: column
}

.news-box2 .image {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--bg)
}

.news-box2 .info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.news-box2 .info h2 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 10px;
    color: var(--ink)
}

.news-box2 .info p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 20px;
    display: -webkit-box;
    overflow: hidden
}

.news-box2 .info button {
    margin-top: auto;
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 8px;
    height: 40px;
    cursor: pointer;
    transition: .2s;
    padding: 0
}

.news-box2 .info button a {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.collapse-block .price-input button.btn:hover, .news-box2 .info button:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    transform: translateY(-2px)
}

.star-title {
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--ink)
}

.star-view {
    margin-bottom: 12px;
    display: flex;
    gap: 2px;
    justify-content: center
}

.star-view i {
    font-size: 14px;
    color: var(--gold) !important
}

.breadcrumb li a, .breadcrumb ul, .review-date, .stardesc {
    color: var(--muted)
}

.stardesc {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 14px;
    text-align: center;
    min-height: 60px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.review-date {
    font-size: 11px;
    text-align: right;
    margin-top: auto;
    padding: 0px 0 10px 0;
}

@media (max-width: 820px) {
    .container-wide {
        width: min(100% - 28px, 1480px)
    }

    .header-actions, .mega-panel, .nav, .topbar-right {
        display: none
    }

    .mobile-menu-btn {
        display: block
    }

    .header-inner {
        grid-template-columns:1fr auto;
        height: 68px
    }

    .logo {
        font-size: 22px
    }

    .hero {
        min-height: auto;
        background-position: center
    }

    .hero-content {
        padding: 56px 0
    }

    .benefit-row, .category-grid, .footer-grid, .newsletter-inner, .promo-grid {
        grid-template-columns:1fr
    }

    .product-slider {
        grid-auto-columns: 78%
    }

    .brand-row {
        grid-template-columns:repeat(2, 1fr)
    }

    .newsletter-form {
        flex-direction: column;
        height: auto;
        gap: 10px
    }

    .newsletter-form button, .newsletter-form input {
        width: 100%;
        height: 48px;
        border-radius: 7px
    }

    .copyright {
        flex-direction: column
    }

    .container {
        width: min(100% - 28px, 1480px);
        padding-left: 10px;
        padding-right: 10px
    }

    .hidden-mobile {
        display: none !important
    }

    .carousel-products-mobile {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 0 !important;
        padding-bottom: 15px;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important
    }

    .carousel-products-mobile::-webkit-scrollbar {
        display: none
    }

    .carousel-products-mobile [class*=col-] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        scroll-snap-align: start !important;
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .subcategory-listing.carousel-products-mobile {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        flex-wrap: nowrap !important
    }

    .topbar-inner {
        height: auto;
        min-height: 38px;
        padding: 8px 0;
        justify-content: center
    }

    .topbar-left {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        font-size: 12px;
        width: 100%
    }

    .product-listing.row {
        margin-left: -6px !important;
        margin-right: -6px !important
    }

    .product-listing .npad {
        padding-left: 6px !important;
        padding-right: 6px !important
    }
}

@media (max-width: 600px) {
    .topbar-inner {
        height: 38px;
        padding: 0
    }

    .topbar-left {
        gap: 0
    }

    .topbar-left span {
        display: none
    }

    .topbar-left span:first-child {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px
    }
}

.breadcrumb {
    background: var(--bg-soft);
    padding: 16px 0;
    border-bottom: 1px solid var(--line)
}

.filters-row, .login-form-box {
    background: var(--card);
    box-sizing: border-box
}

.breadcrumb ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px
}

.breadcrumb li a {
    transition: color .18s;
    text-decoration: none
}

.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 8px;
    color: rgba(0, 0, 0, .15)
}

.login-form-box {
    max-width: 500px;
    margin: 60px auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0;
    box-shadow: var(--shadow)
}

.login-form-box h2 {
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    color: var(--ink);
    margin: 0 0 12px;
    letter-spacing: .08em
}

.btn-filter, .filters-row_select label, .number-of-products {
    letter-spacing: .05em;
    text-transform: uppercase
}

.login-form-box h2::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: var(--gold);
    margin: 12px auto 0;
    border-radius: 2px
}

.login-form-box p {
    text-align: center;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 8px
}

.login-form-box p:last-of-type {
    color: var(--gold-dark);
    font-weight: 700;
    margin-bottom: 30px
}

.login-form-box .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s
}

.login-form-box .input-group:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(200, 163, 106, .15)
}

.login-form-box .input-group-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: var(--bg-soft);
    color: var(--muted);
    border-right: 1px solid var(--line);
    font-size: 16px;
    min-width: 48px;
    box-sizing: border-box
}

.login-form-box .input-group-addon:last-child {
    border-right: none;
    border-left: 1px solid var(--line);
    cursor: pointer;
    transition: color .18s
}

.login-form-box .form-control {
    flex: 1;
    height: 48px;
    border: none !important;
    box-shadow: none !important;
    outline: 0;
    padding: 0 16px;
    font-size: 14px;
    color: var(--ink);
    background: 0 0;
    box-sizing: border-box;
    width: 100%
}

.login-form-box .form-control::placeholder {
    color: #a8a4a0
}

@media (min-width: 992px) {
    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .col-md-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-md-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-md-9 {
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-md-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-md-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-md-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-md-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-md-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .login-form-box form .row {
        display: flex !important;
        align-items: center !important;
        width: 100%;
        margin: 0 !important
    }

    .login-form-box form .row > [class*=col-] {
        padding: 0 !important
    }

    .login-form-box form .row > [class*=col-]:first-child {
        flex: 0 0 auto !important;
        width: auto !important
    }

    .login-form-box form .row > [class*=col-]:last-child {
        flex: 1 !important;
        width: auto !important
    }

    .login-form-box #sign_in_submit {
        padding: 0 32px;
        width: auto !important
    }

    .login-form-box .additional-links {
        justify-content: flex-end;
        min-height: unset
    }
}

@media (max-width: 991px) {
    .login-form-box #sign_in_submit {
        width: 100% !important
    }

    .login-form-box .additional-links {
        justify-content: center;
        margin-top: 15px
    }
}

.login-form-box #sign_in_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--ink);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
    transition: .2s;
    box-shadow: none
}

.login-form-box #reg_submit:hover, .login-form-box #sign_in_submit:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(168, 127, 66, .2)
}

.login-form-box .additional-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 48px
}

.login-form-box .additional-links li a {
    color: var(--gold-dark);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: color .18s
}

.collapse-block p.pull-right a:hover, .login-form-box .additional-links li a:hover {
    color: var(--gold);
    text-decoration: underline
}

.login-form-box #errors {
    background: #fdf2f2 !important;
    border: 1px solid #f8b4b4 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-bottom: 24px !important;
    color: #9b1c1c !important;
    text-align: center
}

.login-form-box #errors h1 {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 0 6px !important;
    color: #9b1c1c !important;
    text-transform: uppercase;
    line-height: 1.2
}

.login-form-box #errors p {
    font-size: 13px !important;
    color: #c92a2a !important;
    margin: 0 !important
}

.login-form-box select.form-control {
    border: none !important;
    background: 0 0 !important;
    color: var(--ink)
}

.phone-input-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -6px !important;
    margin-right: -6px !important;
    width: calc(100% + 12px) !important
}

.phone-input-row > [class*=col-] {
    padding-left: 6px !important;
    padding-right: 6px !important
}

.login-form-box .checkbox-wrapper {
    border: none !important;
    background: 0 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: block !important;
    margin-bottom: 25px
}

.login-form-box .copych {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px;
    font-size: 13px !important;
    line-height: 1.5;
    color: var(--muted);
    cursor: pointer;
    text-align: left;
    user-select: none
}

.login-form-box .copych input[type=checkbox] {
    width: 18px;
    height: 18px;
    accent-color: var(--gold);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px
}

.login-form-box .copych a {
    color: var(--gold-dark) !important;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .18s
}

.login-form-box .copych a:hover {
    color: var(--gold) !important;
    text-decoration: underline
}

.login-form-box #reg_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 220px;
    height: 48px;
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--ink);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
    transition: .2s;
    box-shadow: none;
    padding: 0 34px
}

.number-of-products {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 4px
}

.col-lg-9 h1.block-title, .col-md-8 h1.block-title, .col-xl-9 h1.block-title {
    font-size: clamp(24px, 3.5vw, 32px) !important;
    text-align: left !important;
    margin: 0 0 30px !important
}

.col-lg-9 h1.block-title::after, .col-md-8 h1.block-title::after, .col-xl-9 h1.block-title::after {
    margin-left: 0 !important
}



#smallGallery li a.zoomGalleryActive, #smallGallery li:hover, .address-option input[type=radio]:checked ~ .custom-radio, .filters-row_select select.form-control:focus, .kupon-cart-box .kuponform:focus, .shipping-option input[type=radio]:checked ~ .custom-radio {
    border-color: var(--gold)
}

.btn-filter {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ink);
    color: #fff !important;
    border: 1px solid var(--ink);
    border-radius: 6px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 700;
    transition: .2s;
    text-decoration: none
}

.product-s, .product_inside-s {
    flex-direction: column;
    display: flex
}

.btn-filter:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark)
}

.product-s {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
    height: calc(100% - 24px);
    margin-bottom: 24px
}

.product-listing > a {
    text-decoration: none !important
}

.product_inside-s {
    padding: 16px;
    height: 100%
}

.image-box-s {
    width: 100%;
    overflow: hidden;
    border-radius: calc(var(--radius) - 6px);
    background: var(--bg);
    margin-bottom: 16px;
    text-align: center;
    aspect-ratio: 3/4
}

.product_inside-s .ribbon {
    position: absolute;
    right: 12px;
    top: 12px;
    background: rgba(17, 17, 17, .85);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 5px 10px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .1)
}

.pr-info-s {
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.title-s {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    margin: 0 0 10px;
    min-height: 42px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
    color: var(--ink)
}

.price-s.view {
    font-size: 15px;
    font-weight: 700;
    margin-top: auto;
    margin-bottom: 6px;
    color: var(--ink);
    line-height: 1.4;
    text-align: center
}

.slide-column-close {
    background: var(--ink);
    padding: 14px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    display: none
}

.collapse-block, .ft_newproductslider {
    background: var(--card);
    box-sizing: border-box
}

.slide-column-close a {
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none
}

.aside.leftColumn {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.collapse-block {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .02)
}

.collapse-block_title {
    font-size: 16px !important;
    font-weight: 700;

    color: var(--ink);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1.3px solid var(--gold);
    display: inline-block;
    width: 100%
}

#accordian ul, .list-simple {
    list-style: none;
    padding: 0;
    margin: 0
}

#accordian > ul > li {
   /* border-bottom: 1px solid var(--line);
    padding: 12px 0*/
}

#accordian > ul > li:last-child, .list-simple li:last-child {
    border-bottom: none
}

#accordian h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700
}

#accordian h3 a {
    color: var(--ink);
    text-decoration: none;
    transition: color .18s
}

#accordian ul ul {
    padding-left: 14px;
    margin-top: 10px;
    display: none
}

#accordian ul ul li {
    margin-bottom: 8px;
    font-size: 13px
}

#accordian ul ul li a {
    color: var(--muted);
    text-decoration: none;
    transition: .2s;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

#accordian a.kat_kiemelt, #accordian li.active > a, #accordian ul ul li a:hover {
    color: var(--gold-dark) !important;
    font-weight: 600
}

#accordian .icon-keyboard_arrow_right {
    font-size: 14px;
    color: var(--gold)
}

#accordian li.active > ul, #accordian li.selected_menu > ul, #smallGallery, .address-option input[type=radio]:checked ~ .custom-radio::after, .login-form-box .cont input:checked ~ .checkmark::after, .product-main-image, .shipping-option input[type=radio]:checked ~ .custom-radio::after {
    display: block
}

.list-simple li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 13px
}

.list-simple a {
    color: var(--muted);
    text-decoration: none;
    transition: .18s;
    display: block
}

.list-simple a:hover {
    color: var(--gold-dark);
    padding-left: 4px
}

.collapse-block p.pull-right {
    margin: 14px 0 0
}

.collapse-block p.pull-right a {
    color: var(--gold-dark);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-decoration: none;
    transition: color .18s
}

.collapse-block .price-input {
    margin-top: 16px
}

.collapse-block .price-input button.btn {
    width: 100% !important;
    height: 42px;
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 8px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    cursor: pointer;
    transition: .2s
}

.aside-featured-product .product-content .title a, .compare-aside .item a.title {
    font-weight: 600;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--ink);
    overflow: hidden
}

.compare-aside {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.compare-aside .item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line)
}

.compare-aside .item:last-child {
    border-bottom: none;
    padding-bottom: 0
}

.compare-aside .item .img {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg);
    flex-shrink: 0
}

#smallGallery img, .compare-aside .item .img img, .mobileGallery-product img, .pblock .mpic img, .wrapper-offset-zero img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.compare-aside .item a.title {
    font-size: 13px;
    line-height: 1.4;
    transition: color .18s
}

.aside-featured-product {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.aside-featured-product .product-img {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg);
    margin-bottom: 14px
}

.aside-featured-product .product-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%
}

.aside-featured-product .product-content .title a {
    font-size: 14px;
    transition: color .18s
}

.aside-featured-product .product-content .price {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    text-align: center
}

.aside-featured-product .product-content .price .old-price, .price-label2_old {
    font-size: 11px;
    color: var(--muted);
    text-decoration: line-through;
    margin-right: 6px
}

.aside-custom-block h6 {
    margin: 16px 0 8px;
    font-size: 14px;
    font-weight: 700
}

.aside-custom-block h6:first-of-type {
    margin-top: 0
}

.aside-custom-block h6 a {
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .18s
}

.aside-custom-block h6 span.color-base {
    color: var(--gold) !important;
    font-size: 18px
}

.aside-custom-block p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 16px
}

.aside-custom-block p:last-of-type {
    margin-bottom: 0
}

.ft_newproductslider {
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line)
}

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



@media (max-width: 991px) {
    .login-form-box #reg_submit {
        width: 100% !important
    }

    .slide-column-close {
        display: block
    }

    .col-md-4.col-lg-3.col-xl-3.aside.leftColumn {
        position: fixed !important;
        top: 0 !important;
        left: -320px !important;
        width: 300px !important;
        max-width: 300px !important;
        height: 100vh !important;
        overflow-y: auto !important;
        background: var(--card) !important;
        z-index: 9999 !important;
        transition: left .3s cubic-bezier(.25, .8, .25, 1) !important;
        padding: 24px !important;
        box-shadow: 20px 0 50px rgba(0, 0, 0, .15) !important;
        display: block !important
    }

    .col-md-4.col-lg-3.col-xl-3.aside.leftColumn.open {
        left: 0 !important
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        backdrop-filter: blur(2px);
        z-index: 9998;
        display: none
    }
}

.progressbar {
    position: relative;
    margin: 40px 0 25px;
    padding: 0
}

.progressbar .steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2
}

.progressbar .step {
    flex: 1;
    text-align: center;
    position: relative
}

.progressbar .step::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--line);
    margin: 0 auto 10px;
    border: 3px solid var(--bg-soft);
    box-shadow: 0 0 0 1px var(--line);
    transition: .3s
}

.progressbar .step.active::before {
    background: var(--gold-dark);
    box-shadow: 0 0 0 1px var(--gold-dark)
}

.progressbar .step.current::before {
    background: #fff;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold)
}

.progressbar .step-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    transition: color .3s
}

.progressbar .step.active .step-label {
    color: var(--ink)
}

.progressbar::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--line);
    z-index: 1
}

.progressbar .progress {
    position: absolute;
    top: 7px;
    left: 0;
    height: 2px;
    background: var(--gold-dark);
    z-index: 1;
    transition: width .3s
}

.bootstrap-select .btn-danger, .bootstrap-select .btn.dropdown-toggle, .bootstrap-select button, .login-form-box select.form-control {
    height: 48px !important;
    background-color: #fff !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    font-size: 14px !important
}

.main.shop .login-form-box {
    max-width: 800px;
    margin: 30px auto
}

.login-form-box .form-group {
    display: block;
    width: 100%;
    margin-bottom: 20px
}

.login-form-box .form-group:has([class*=col-]) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    margin-bottom: 0 !important
}

.login-form-box .form-group > [class*=col-] {
    padding-left: 12px !important;
    padding-right: 12px !important
}

.login-form-box .form-group .col-md-6:last-of-type {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important
}

.login-form-box select.form-control {
    width: 100% !important;
    border-radius: 8px !important;
    padding: 0 40px 0 16px !important;
    outline: 0;
    cursor: pointer;
    transition: border-color .2s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23171717' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px !important
}

.login-form-box select.form-control:focus {
    border-color: var(--gold) !important
}

.bootstrap-select {
    width: 100% !important;
    margin-top: 8px
}

.bootstrap-select .btn-danger, .bootstrap-select .btn.dropdown-toggle, .bootstrap-select button {
    width: 100% !important;
    border-radius: 8px !important;
    padding: 0 16px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: border-color .2s, box-shadow .2s !important
}

.bootstrap-select .btn:focus, .bootstrap-select button:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 4px rgba(200, 163, 106, .15) !important;
    outline: 0 !important
}

.bootstrap-select .dropdown-menu {
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    box-shadow: var(--shadow) !important;
    background: #fff !important;
    padding: 8px 0 !important;
    margin-top: 4px !important
}

.bootstrap-select .dropdown-menu li {
    margin: 0 !important;
    padding: 0 !important
}

.bootstrap-select .dropdown-menu li a {
    display: block !important;
    padding: 10px 16px !important;
    color: var(--ink) !important;
    font-size: 14px !important;
    transition: background .18s, color .18s !important;
    text-decoration: none !important
}

.bootstrap-select .dropdown-menu li a:hover, .bootstrap-select .dropdown-menu li.selected a {
    background-color: var(--bg-soft) !important;
    color: var(--gold-dark) !important;
    font-weight: 600 !important
}

.bootstrap-select .bs-caret, .bootstrap-select .caret {
    border: none !important;
    width: 12px !important;
    height: 12px !important;
    margin-left: 10px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23171717' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") center/contain no-repeat !important
}

.login-form-box .cont {
    display: block !important;
    position: relative !important;
    padding-left: 35px !important;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    user-select: none;
    line-height: 1.3;
    text-align: left
}

.blog-swiper .description, .review-swiper .stardesc {
    line-height: 1.5 !important;
    -webkit-box-orient: vertical !important
}

.login-form-box .cont input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.login-form-box .checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 2px solid var(--line);
    border-radius: 50%;
    transition: .2s;
    box-sizing: border-box
}

.custom-radio::after, .login-form-box .checkmark::after {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    content: ""
}

.login-form-box .cont input:checked ~ .checkmark {
    border-color: var(--gold);
    background-color: #fff
}

.login-form-box .checkmark::after {
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold-dark)
}

.login-form-box .row:has(.postmode) {
    border-top: 1px solid var(--line);
    padding: 16px 0;
    background: #fff;
    margin: 0 !important;
    width: 100%;
    box-sizing: border-box
}

.login-form-box .row:has(.postmode) + .row:has(.col-md-12) {
    padding: 0;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    margin: 0 !important;
    width: 100%;
    box-sizing: border-box
}

.login-form-box .row:has(.postmode) + .row:has(.col-md-12) span {
    color: var(--muted) !important;
    font-size: 13px !important;
    line-height: 1.5
}

.login-form-box .row:has(.postmode) + .row:not(:has(.col-md-12)) {
    display: none !important
}

.login-form-box .pull-right {
    float: right;
    font-size: 15px;
    font-weight: 700;
    color: var(--gold-dark) !important
}

.foxpost-box, .gls-box, .posta-box {
    margin-top: 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box;
    float: none !important;
    clear: both
}

.foxpost-box .foxpost-box {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: 0 0 !important;
    box-shadow: none !important
}

.gls-box #test-map, .gls-box gls-dpm, .gls-box iframe, .if-container, .if-container iframe, .posta-box iframe {
    width: 100% !important;
    height: 600px !important;
    border: none !important;
    display: block;
    margin: 0 !important;
    padding: 0 !important
}

#postapontvalasztoapi, #postapontvalasztoapi-container, .posta-box #valasztott_postapont_info {
    padding: 16px !important;
    box-sizing: border-box;
    width: 100%
}

.userbox, .userbox-shipping {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-sizing: border-box
}

.userbox h5, .userbox-shipping h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px
}

.product-info2 .price .huftol, .product-info2 .price .price-label2_old {
    font-weight: 500;
    color: var(--muted);
    font-size: 14px
}

.userbox h6, .userbox-shipping h6 {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    margin: 0 0 4px
}

.login-form-box .mod-btn {
    padding: 0 20px;
    height: 38px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-radius: 6px;
    border: 1px solid var(--gold) !important;
    background: 0 0 !important;
    color: var(--gold-dark) !important;
    cursor: pointer;
    transition: .2s
}

.login-form-box .mod-btn:hover {
    background: var(--gold) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(168, 127, 66, .15)
}

.address-select, .shipping-address-select {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 280px;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-soft);
    margin: 15px 0 24px;
    box-sizing: border-box
}

.address-select::-webkit-scrollbar, .shipping-address-select::-webkit-scrollbar {
    width: 6px
}

.address-select::-webkit-scrollbar-thumb, .shipping-address-select::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .15);
    border-radius: 99px
}

.address-option, .shipping-option {
    display: flex !important;
    align-items: center !important;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    transition: .2s;
    position: relative;
    box-sizing: border-box;
    width: 100%
}

.address-option:hover, .shipping-option:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .02)
}

.address-option.selected, .shipping-option.selected {
    border-color: var(--gold) !important;
    background-color: rgba(200, 163, 106, .05) !important
}

.custom-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--line);
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: .2s
}

.custom-radio::after {
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold-dark)
}

.custom-address, .shipping-custom-address {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
    text-align: left
}

.shipping-custom-address-c {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 2px
}

.button-container {
    margin: 15px 0
}

#sendButton, .shipbox, .szlbox {
    margin-top: 30px
}

.login-form-box .styled-button, .login-form-box button.styled-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    height: 42px;
    background: var(--ink);
    color: #fff !important;
    border: 1px solid var(--ink);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    transition: .2s;
    box-shadow: none;
    text-decoration: none
}

#smallGallery li, .kupon-cart-box .kuponform {
    box-sizing: border-box;
    transition: border-color .2s
}

.btn-addtocart:hover, .kupon-cart-box #kupon:hover, .login-form-box .styled-button:hover, .login-form-box button.styled-button:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(168, 127, 66, .15)
}

.product-main-image {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    align-items: center;
    justify-content: center;
    aspect-ratio: 3/4
}

.product-main-image img {
    object-fit: cover
}

#smallGallery li {
    width: 80px;
    aspect-ratio: 3/4;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden
}

.mobileGallery-product {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    overflow-x: auto;
    gap: 12px
}

.mobileGallery-product li {
    flex: 0 0 100%;
    scroll-snap-align: start;
    aspect-ratio: 3/4;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line)
}

#smallGallery, .tt-tabs__head ul {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-x: auto
}

.product-info2 h1.title {
    font-size: clamp(24px, 3.5vw, 34px);
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 12px;
    line-height: 1.3;
    text-align:center;
}

.product-info2 .price {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 800;
    color: var(--gold);
    margin-bottom: 24px
}

.product-info2 .price .price-label2_old {
    text-decoration: line-through;
    margin-right: 8px
}

.productvendorsmallinfo {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px
}

.productvendorsmallinfo span {
    font-weight: 700;
    color: var(--ink)
}

.productvendorsmallinfo a {
    color: var(--gold-dark);
    font-weight: 600;
    transition: color .18s;
    text-decoration: none
}

.tt-tabs__head li, .wishlist-toggle {
    color: var(--muted);
    transition: color .2s
}

.wishlist-toggle {
    display: inline-flex;

    gap: 8px;
    font-size: 13px;
    font-weight: 700;


    text-decoration: none
}

.wrapper-offset20, .wrapper-offset45 {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .01);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box
}

.wrapper-offset20 .row, .wrapper-offset45 .row {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important
}

.wrapper-offset20 .col-md-6, .wrapper-offset45 .col-md-6 {
    padding: 0 !important;
    width: auto !important
}

.price-label2, .price-label2_orig {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink)
}

.btn-addtocart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background: var(--ink);
    border: 1px solid var(--ink);
    color: #fff !important;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 0 24px;
    cursor: pointer;
    transition: .2s;
    text-decoration: none
}

.btn-addtocart span.icon {
    margin-right: 8px;
    font-size: 14px
}


.addon-cart-color{
    background: var(--gold-dark) !important;
    border: 1px solid var(--gold-dark) !important;
}

.addon-cart-color:hover{
    background: var(--ink) !important;
    border: 1px solid var(--ink) !important;
}



.pblock, .wrapper-offset-zero {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    box-sizing: border-box
}

.table.cart th, .tt-tabs__head {
    border-bottom: 2px solid var(--line)
}

.pblock .mpic, .wrapper-offset-zero .nomargin:first-child {
    width: 50px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.counter, .shop .box-content {
    border: 1px solid var(--line)
}

.pblock .pr-label-elem, .wrapper-offset-zero .pr-label-elem {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    text-align:center;

}

.pblock .price-label-elem, .wrapper-offset-zero .price-label-elem {
    font-size: 13px;
    font-weight: 700;
    color: var(--gold-dark);
    text-align:center;
}

.btn-mini {
    height: 34px !important;
    padding: 0 16px !important;
    font-size: 11px !important
}

.tt-tabs {
    margin: 40px 0;
    width: 100%
}

.tt-tabs__head {
    margin-bottom: 24px;
    position: relative
}

.tt-tabs__head ul {
    display: flex;
    gap: 30px
}

.tt-tabs .tt-tabs__title, .tt-tabs__head li {
    padding: 12px 0;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase
}

.tt-tabs__head li {
    font-size: 14px;
    letter-spacing: .08em;
    position: relative
}

.tt-tabs__head li:hover, .tt-tabs__head li[data-active=true] {
    color: var(--ink)
}

.tt-tabs__head li[data-active=true]::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gold)
}

.tt-tabs__content {
    font-size: 14px;
    line-height: 1.7;
    color: #4d4945
}

.tt-tabs__content p {
    margin-bottom: 16px
}

.mobileGallery-product, .tt-tabs__content .tab-title {
    display: none !important
}

.tt-tabs .tt-tabs__title {
    display: none;
    font-size: 13px;
    letter-spacing: .05em;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px
}

#smallGallery {
    gap: 12px;
    display: flex
}

#hasonlo_termekek, #kieg_termekek, #related-products, .product_related, .related-products {
    display: grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    clear: both !important
}

#hasonlo_termekek .row, #kieg_termekek .row, #related-products .row, .product_related .row, .related-products .row {
    display: grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important
}

#hasonlo_termekek .product, #hasonlo_termekek [class*=col-], #kieg_termekek .product, #kieg_termekek [class*=col-], #related-products .product, #related-products [class*=col-], .related-products .product {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin-bottom: 0 !important
}

#hasonlo_termekek .block-title, #hasonlo_termekek .block-title-colored, #hasonlo_termekek h1, #hasonlo_termekek h2, #hasonlo_termekek h3, #kieg_termekek .block-title, #kieg_termekek h1, #kieg_termekek h2, #kieg_termekek h3, #related-products h1, #related-products h2, #related-products h3, .related-products h1, .related-products h2, .related-products h3 {
    grid-column: 1/-1 !important;
    width: 100% !important
}

@media (max-width: 1199px) {
    #hasonlo_termekek, #hasonlo_termekek .row, #kieg_termekek, #kieg_termekek .row, #related-products, #related-products .row, .product_related, .product_related .row, .related-products, .related-products .row {
        grid-template-columns:repeat(3, 1fr) !important;
        gap: 20px !important
    }
}

.shop .box-content {
    background: var(--card);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow);
    margin-bottom: 0;
    box-sizing: border-box
}

.shop h4 {
    font-size: 18px;
    color: var(--ink);
    margin: 0 0 20px;
    font-weight: 600
}

.table.cart {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0
}

.table.cart th {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    padding: 14px 10px;
    text-align: left
}

.actions-continue input.btn-full, .kupon-cart-box #kupon {
    letter-spacing: .08em;
    cursor: pointer;
    text-transform: uppercase
}

.table.cart td {
    padding: 20px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle
}

.table.cart .product-thumbnail {
    width: 120px;
    text-align: center
}

.table.cart .product-thumbnail img {
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 12px
}

.table.cart .product-names a {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: color .18s
}

.table.cart .product-names p {
    margin: 4px 0 0;
    color: var(--muted)
}

.table.cart .amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink)
}

.delete-item {
    color: var(--muted);
    cursor: pointer;
    transition: color .18s, transform .18s;
    display: inline-block
}

.delete-item:hover {
    color: #c92a2a;
    transform: scale(1.15)
}

.counter {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    background: var(--bg-soft);
    overflow: hidden;
    height: 36px
}

.counter button {
    border: none;
    background: 0 0;
    width: 32px;
    height: 100%;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: background .18s, color .18s
}

.counter button:hover {
    background: var(--gold);
    color: #fff
}

.counter .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    padding: 0 4px
}

.table.cart .actions {
    border-bottom: none;
    padding-top: 30px
}

.table.cart .actions-brutto h4 {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink);
    margin: 0
}

.table.cart .actions-brutto .h4price {
    font-size: 22px;
    font-weight: 800;
    color: var(--gold-dark)
}

.kupon-form-box {
    margin-top: 20px
}

.kupon-cart-box {
    display: flex;
    flex-direction: column;
    max-width: 440px
}

.kupon-cart-box h4 {
    font-size: 18px;
    margin-bottom: 4px
}

.kupon-cart-box span {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 16px
}

.kupon-cart-box .kuponform {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    outline: 0;
    font-size: 14px
}

.kupon-cart-box .kuponerror {
    font-size: 12px;
    color: #c92a2a;
    margin-top: 6px;
    min-height: 18px
}

.kupon-cart-box #kupon {
    height: 42px;
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--ink);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    transition: .2s;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

#sendButton {
    margin-bottom: 60px
}

.actions-continue {
    display: flex;
    justify-content: flex-end;
    margin:10px 0;
}

.actions-continue input.btn-full {
    min-width: 280px;
    height: 52px;
    background: var(--gold) !important;
    border: 1px solid var(--gold) !important;
    color: #fff !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    transition: .25s cubic-bezier(.25, .8, .25, 1);
    box-shadow: 0 4px 15px rgba(200, 163, 106, .2)
}

.actions-continue input.btn-full:hover {
    background: var(--gold-dark) !important;
    border-color: var(--gold-dark) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(168, 127, 66, .35)
}

@media (max-width: 767px) {
    .progressbar {
        margin: 25px 0 15px
    }

    .progressbar .step-label {
        font-size: 9px;
        letter-spacing: 0
    }

    .progressbar .step::before {
        width: 10px;
        height: 10px
    }

    .progressbar .progress, .progressbar::after {
        top: 5px
    }

    .login-form-box .form-group .col-md-6:last-of-type {
        justify-content: flex-start !important;
        margin-top: 6px !important
    }

    .login-form-box .pull-right {
        float: none
    }

    .login-form-box .row:has(.postmode) + .row > [class*=col-] {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    /*
    .foxpost-box iframe, .gls-box #test-map, .gls-box gls-dpm, .gls-box iframe, .if-container iframe, .posta-box iframe {
        height: 450px !important
    }*/

    .product-link, .varia {
        margin-bottom: 4px;
        display: block
    }

    .shop .box-content {
        padding: 20px 16px
    }

    .table.cart {
        display: block
    }

    .table.cart tbody {
        display: block;
        width: 100%
    }

    .table.cart thead {
        display: none
    }

    .tol-5 {
        margin-top: 15px;
        display: flex;
        align-items: flex-start
    }

    .basket-pic {
        border-radius: 8px;
        object-fit: cover;
        width: 100%
    }

    .product-link {
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
        text-decoration: none;
        line-height: 1.4
    }

    .egysegar, .varia {
        font-size: 12px;
        color: var(--muted)
    }

    .tol-15 {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 15px
    }

    .liner {
        height: 1px;
        background: var(--line);
        margin: 15px 0;
        width: 100%
    }

    .newpr {
        font-size: 16px;
        font-weight: 800;
        color: var(--gold-dark) !important
    }

    .table.cart tr:last-child {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-top: 20px;
        border-top: 2px solid var(--line)
    }

    .table.cart tr:last-child td {
        display: block;
        width: 100% !important;
        padding: 0 !important;
        border: none
    }

    .table.cart tr:last-child td:last-child .actions-brutto {
        text-align: right
    }

    .kupon-cart-box {
        max-width: 100%
    }

    .actions-continue {
        justify-content: center
    }

    .actions-continue input.btn-full {
        width: 100% !important
    }
}

.slick-initialized, .slick-initialized .row {
    display: block !important
}

.slick-initialized .slick-track {
    display: flex !important
}

.slick-initialized .slick-slide {
    height: auto !important;
    float: none !important
}

.slick-next, .slick-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    z-index: 10;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: .2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06)
}

.slick-next:hover, .slick-prev:hover {
    background: var(--black) !important;
    border-color: var(--black) !important;
    color: #fff !important
}

.slick-prev {
    left: -15px
}

.slick-next {
    right: -15px
}

.slick-next i, .slick-prev i {
    font-size: 18px;
    line-height: 1
}

@media (max-width: 820px) {
    .tt-tabs__head {
        display: none
    }

    .tt-tabs .tt-tabs__title {
        display: block
    }

    .mobileGallery-product {
        display: flex !important
    }

    #smallGallery, .product-main-image, .slick-next, .slick-prev {
        display: none !important
    }

    #hasonlo_termekek, #hasonlo_termekek .row, #kieg_termekek, #kieg_termekek .row, #related-products, #related-products .row, .product_related, .product_related .row, .related-products, .related-products .row {
        grid-template-columns:repeat(2, 1fr) !important;
        gap: 16px !important
    }
}

#hasonlo_termekek:not(.slick-initialized), #kieg_termekek:not(.slick-initialized), #related-products:not(.slick-initialized), .product_related:not(.slick-initialized), .related-products:not(.slick-initialized) {
    display: grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    gap: 24px !important;
    width: 100% !important
}

#hasonlo_termekek:not(.slick-initialized) .row, #kieg_termekek:not(.slick-initialized) .row, #related-products:not(.slick-initialized) .row {
    display: grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 !important
}

.tt-tabs .tt-tabs__title.active {
    color: var(--gold-dark) !important;
    border-bottom-color: var(--gold) !important;
    font-weight: 800
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto
}

.product-main-image, .product-main-image-item {
    width: 100% !important;
    display: flex !important;
    position: relative !important;
    overflow: hidden !important
}

.shipping-tab-content, .shipping-tab-content *, .shipping-tab-content li, .shipping-tab-content p, .shipping-tab-content span, .shipping-tab-content td {
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    color: #4d4945 !important
}

.shipping-tab-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 15px 0 !important
}

.shipping-tab-content td, .shipping-tab-content th {
    padding: 10px 12px !important;
    border: 1px solid var(--line) !important
}

.zoom-product {
    cursor: pointer !important;
    transition: opacity .2s, transform .2s
}

.zoom-product:hover {
    opacity: .95
}

.product-main-image {
    aspect-ratio: 3/4 !important;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important
}

.product-main-image-item {
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important
}

.product-main-image .zoom-product, .product-main-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important
}

.product-slider-wrapper {
    position: relative;
    width: 100%
}

.brand-swiper, .news-swiper, .product-slider-wrapper .swiper, .product-swiper {
    padding: 10px 0 25px !important;
    overflow: hidden !important
}

.product-slider-wrapper .swiper-slide {
    height: auto;
    display: flex
}

.product-slider-wrapper .news-box2, .product-slider-wrapper .product {
    width: 100%;
   /* margin-bottom: 0*/
}

.product-slider-wrapper > .swiper-button-next, .product-slider-wrapper > .swiper-button-prev {
    position: absolute !important;
    top: 45% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    color: var(--gold-dark) !important;
    background: 0 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important
}

.hero-slide-image, .hero-slider-wrapper {
    width: 100%;
    border-radius: var(--radius)
}

.product-slider-wrapper > .swiper-button-prev {
    left: -35px !important
}

.product-slider-wrapper > .swiper-button-next {
    right: -35px !important
}

.product-slider-wrapper > .swiper-button-next::after, .product-slider-wrapper > .swiper-button-prev::after {
    font-size: 36px !important;
    font-weight: 700
}

.product-slider-wrapper > .swiper-button-next:hover, .product-slider-wrapper > .swiper-button-prev:hover {
    color: #d62f70 !important
}

.product-slider-wrapper > .swiper-button-disabled {
    opacity: .15 !important
}

@media (max-width: 1250px) {
    .product-slider-wrapper > .swiper-button-prev {
        left: -15px !important
    }

    .product-slider-wrapper > .swiper-button-next {
        right: -15px !important
    }
}

.review-swiper {
    padding-bottom: 35px !important
}

.blog-swiper .swiper-slide, .review-swiper .swiper-slide {
    height: auto !important;
    display: flex !important
}

.review-swiper .product {
    height: 100% !important;
    min-height: 220px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    border-radius: var(--radius) !important;
    margin-bottom: 0 !important
}

.review-swiper .product_inside {
    padding: 22px 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important
}

.review-swiper .star-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 0 6px !important;
    text-align: center;
    color: var(--ink)
}

.review-swiper .star-view {
    margin-bottom: 12px !important;
    display: flex;
    gap: 3px;
    justify-content: center
}

.review-swiper .stardesc {
    font-size: 13px !important;
    color: var(--muted) !important;
    margin-bottom: 16px !important;
    text-align: center;
    flex-grow: 1;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    overflow: hidden !important;
    min-height: 60px
}

.review-swiper .review-date {
    font-size: 11px !important;
    color: var(--muted) !important;
    text-align: right;
    margin-top: auto !important;
    padding-top: 10px !important;
    border-top: 1px dashed var(--line) !important
}

@media (max-width: 576px) {
    .login-form-box {
        margin: 0;
        padding: 0
    }

    .product-slider-wrapper > .swiper-button-prev {
        left: -18px !important
    }

    .product-slider-wrapper > .swiper-button-next {
        right: -18px !important
    }

    .product-slider-wrapper > .swiper-button-next::after, .product-slider-wrapper > .swiper-button-prev::after {
        font-size: 20px !important
    }

    .review-swiper .product_inside {
        padding: 18px 16px 22px !important
    }

    .review-swiper .stardesc {
        font-size: 13px !important;
        -webkit-line-clamp: 4 !important
    }
}

.hero-slider-container {
    margin-top: 15px;
    margin-bottom: 25px
}

.hero-slider-wrapper {
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06)
}

.hero-swiper {
    width: 100%;
    height: auto
}

.hero-slide-image {
    height: auto;
    display: block;
    object-fit: cover
}

.hero-swiper .swiper-pagination-bullet {
    background: #fff;
    opacity: .6
}

.hero-swiper .swiper-pagination-bullet-active {
    background: var(--gold) !important;
    opacity: 1;
    width: 24px;
    border-radius: 10px;
    transition: .3s
}

.hero-slider-wrapper .swiper-button-next, .hero-slider-wrapper .swiper-button-prev {
    color: #fff !important;
    background: rgba(0, 0, 0, .3) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    backdrop-filter: blur(4px);
    transition: background .2s
}

.hero-slider-wrapper .swiper-button-next:hover, .hero-slider-wrapper .swiper-button-prev:hover {
    background: var(--gold) !important
}

.hero-slider-wrapper .swiper-button-next::after, .hero-slider-wrapper .swiper-button-prev::after {
    font-size: 18px !important;
    font-weight: 700
}

.cart-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(380px, 88vw);
    background: #fff;
    z-index: 90;
    transform: translateX(105%);
    transition: transform .3s cubic-bezier(.25, .8, .25, 1);
    box-shadow: -20px 0 50px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column
}

.cart-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line)
}

.cart-drawer-header h3 {
    margin: 0;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .05em;
    display: flex;
    align-items: center;
    gap: 8px
}

.cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 24px
}

.cart-drawer-footer, .drawer-content {
    flex-direction: column;
    gap: 10px;
    display: flex
}

.cart-drawer-notice {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    font-size: 12px;
    color: var(--gold-dark);
    font-weight: 600;
    text-align: center;
    margin-bottom:20px;
}

.cart-empty-state {
    text-align: center;
    padding: 60px 0
}

.cart-empty-state i {
    font-size: 48px;
    color: var(--muted);
    margin-bottom: 12px;
    display: block
}

.cart-drawer-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--line);
    background: #fff
}

.full-width {
    width: 100% !important
}

.cart-btn-trigger {
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 0
}

.drawer-content {
    overflow-y: auto
}

.drawer-section-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--muted);
    margin-top: 15px
}

.drawer-sub {
    padding-left: 15px;
    font-size: 13px;
    color: var(--muted)
}

.mobile-accordion {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 8px 0
}



.logo svg, .logofooter svg {
    width: 100%;
    height: auto;
    max-width: 220px
}

@media (max-width: 820px) {
    .header-inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 68px !important
    }

    .mobile-header-actions {
        display: flex !important;
        align-items: center !important
    }

    .mobile-icon-btn, .mobile-menu-btn {
        position: relative;
        background: 0 0 !important;
        border: none !important;
        font-size: 24px !important;
        color: var(--ink) !important;
        cursor: pointer;
        width: 38px;
        height: 38px;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important
    }

    .mobile-icon-btn .badge {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 17px;
        height: 17px;
        border-radius: 999px;
        background: var(--gold);
        color: #fff;
        font-size: 10px;
        display: grid;
        place-items: center;
        font-weight: 700
    }

    .mobile-search-bar {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: 10px 16px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
        z-index: 45;
        display: none
    }

    .mobile-search-bar.is-open {
        display: block !important
    }

    .mobile-search-bar form {
        display: flex;
        align-items: center;
        background: var(--bg-soft);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 0 12px;
        height: 42px
    }

    .mobile-search-bar input {
        flex: 1;
        border: none;
        background: 0 0;
        outline: 0;
        font-size: 14px;
        color: var(--ink)
    }

    .mobile-search-bar button {
        background: 0 0;
        border: none;
        color: var(--gold-dark);
        font-size: 18px;
        cursor: pointer;
        padding: 0 4px
    }

    .mobile-header-actions .mobile-icon-btn, .mobile-header-actions .mobile-menu-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: 0 0 !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        color: var(--ink) !important;
        cursor: pointer;
        position: relative
    }

    .mobile-header-actions .mobile-icon-btn i, .mobile-header-actions .mobile-menu-btn i {
        font-size: 22px !important;
        line-height: 1 !important;
        display: block !important
    }

    .mobile-header-actions .mobile-icon-btn .badge {
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 17px;
        height: 17px;
        border-radius: 999px;
        background: var(--gold);
        color: #fff;
        font-size: 10px;
        display: grid;
        place-items: center;
        font-weight: 700;
        line-height: 1
    }

    .header-inner {
        padding-left: 0 !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
        width: 100% !important
    }
}

.review-swiper .star-view {
    display: flex;
    gap: 4px;
    justify-content: center
}

.review-swiper .star-view i.bi-star-fill {
    color: #ffc107 !important;
    font-size: 15px !important
}

.review-swiper .star-view i.bi-star {
    color: #e0e0e0 !important;
    font-size: 15px !important
}

.blog-swiper .product {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 0 !important
}

.blog-swiper .product_inside {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 16px !important
}

.blog-swiper .image-box {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    overflow: hidden !important;
    border-radius: calc(var(--radius) - 6px) !important;
    background: var(--bg) !important;
    margin-bottom: 14px !important
}

.blog-swiper .image-box a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important
}

.blog-swiper .image-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .4s !important
}

.blog-swiper .product:hover .image-box img {
    transform: scale(1.06) !important
}

.blog-swiper h2.title {
    min-height: 48px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important
}

.blog-swiper .description {
    flex-grow: 1 !important;
    font-size: 13px !important;
    color: var(--muted) !important;
    margin-bottom: 16px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    min-height: 58px
}

.section-header {
    display: flex;
    align-items: stretch;
    gap: 16px;
    margin: 28px 0 24px
}

.section-header .rule {
    width: 2px;
    background: var(--gold);
    flex: 0 0 auto;
    border-radius: 1px
}

.section-header .kicker {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 4px
}

.section-header h1 {
    font-family: Inter, sans-serif !important;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    font-size: 29px;
    letter-spacing: -.025em
}

.btn-product2 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 42px !important;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none
}

.price, .new-price-s, .product h2.title, .promo h3 {
    font-family: Inter, sans-serif !important
}

.promo h3 {
    font-weight: 800;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--gold);
    font-size: 32px;
    margin: 0 0 8px
}

.price {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 14px;
    color: var(--ink)
}

.product h2.title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ink);
    margin: 0 0 6px;
    min-height: 40px
}

.logo, .logofooter {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    max-width: 250px;
    flex-shrink: 0
}

.logo svg {
    display: block;
    padding-left: 14px
}

.logofooter svg {
    display: block
}

@media (max-width: 480px) {
    #hasonlo_termekek, #hasonlo_termekek .row, #kieg_termekek, #kieg_termekek .row, #related-products, #related-products .row, .product_related, .product_related .row, .related-products, .related-products .row {
        grid-template-columns:repeat(1, 1fr) !important;
        gap: 16px !important
    }

    .logo, .logo svg, .logofooter, .logofooter svg {
        max-width: 170px
    }
}

.mobile-drawer .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.mobile-drawer .drawer-header .logo {
    display: flex;
    align-items: center;
}

.mobile-drawer .drawer-header .logo svg,
.mobile-drawer .drawer-header .logo img {
    height: 32px;
    width: auto;
    padding: 0px !important;
}

.mobile-drawer .drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}
.drawer-account-block {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

.drawer-account-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    font-size: 15px;
    color: #1c1a17;
    text-decoration: none;
}

.drawer-account-item i {
    font-size: 17px;
    width: 20px;
    text-align: center;
    color: #948d80;
}

.drawer-account-item.drawer-logout {
    color: #b8862c;
}

.drawer-account-item.drawer-logout i {
    color: #b8862c;
}



/* ============================================================
   MEGA MENÜ — editoriális, tipográfia-vezérelt elrendezés.
   Nincs kártya, nincs ikon, nincs szín-kódolás — csak tipográfia,
   sortávolság és vékony elválasztó vonalak adják a struktúrát.
   Több .mega-panel létezik (top-kategóriánként), csak az aktív
   (is-open / data-mega-panel) látszik.
   ============================================================ */

/* Explicit abszolút pozicionálás — nem hagyatkozunk az eredeti
   .mega-panel szabály öröklésére, mert ha ez az addon CSS később
   töltődik be vagy más a specificitás, a panel "in-flow" elemként
   viselkedhet és eltolja alatta a teljes oldal tartalmát. */
/* A header legyen a mega-panel abszolút pozicionálásának
   referenciapontja — enélkül a panel a body-hoz igazodna, és nem
   közvetlenül a nav alatt jelenne meg. Az eredeti CSS-ben a .header
   már sticky + z-index:50; itt csak position:relative-et biztosítunk
   rá, ha esetleg hiányozna. */
/*#siteHeader {
    position: relative;
}
*/
.mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 74vh;
    overflow: hidden;
    background: #fff;
    z-index: 60;
    pointer-events: none;
    display: none;
}

.mega-panel.is-open {
    display: block;
    pointer-events: auto;
}

/* Megjegyzés: mivel a panelváltás display:none <-> display:block között
   történik (nem opacity-transitionnel), a váltás mindig azonnali —
   nincs "elúszó" régi panel, ezért nincs szükség fade-out animációra
   vagy transition-tiltásra panelváltáskor. */

.mega-editorial {
    max-height: 74vh;
    overflow-y: auto;
    padding: 28px 0 32px;
}

.mega-editorial::-webkit-scrollbar {
    width: 6px;
}

.mega-editorial::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .15);
    border-radius: 99px;
}

/* Alapból 2 oszlop (kevés elemnél gyakorlatilag 1-ként fest,
   mert a break-inside: avoid nem tördel feleslegesen).
   10 középszintű kategória fölött a PHP a *-3 osztályt adja hozzá. */
.mega-editorial-cols {
    columns: 2;
    column-gap: 56px;
    max-width: 1180px;
}

.mega-editorial-cols-3 {
    columns: 3;
    column-gap: 44px;
    max-width: 1420px;
}

.mega-ed-block {
    break-inside: avoid;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}

.mega-editorial-cols > .mega-ed-block:first-child,
.mega-editorial-cols-3 > .mega-ed-block:first-child {
    padding-top: 0;
}

.mega-ed-title {
    display: inline-block;
    font-family: Inter, sans-serif !important;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    line-height: 1.3;
    letter-spacing: .01em;
    transition: color .18s;
}

.mega-ed-title:hover {
    color: var(--gold-dark);
}

/* Elválasztó a cím és a 3. szintű felsorolás között: kis felső
   térköz + halvány bal szegély, hogy a két sor ne folyjon össze. */
.mega-ed-leafs {
    margin: 5px 0 0;
    padding-left: 9px;
    border-left: 2px solid var(--line);
    font-family: Inter, sans-serif !important;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
    max-width: 560px;
}

.mega-ed-leafs a {
    color: var(--muted);
    text-decoration: none;
    transition: color .15s;
}

.mega-ed-leafs a:hover {
    color: var(--gold-dark);
    text-decoration: underline;
    text-decoration-color: rgba(174, 9, 66, .35);
    text-underline-offset: 3px;
}

.mega-ed-leafs .sep {
    color: var(--muted);
    opacity: .45;
    font-weight: 700;
}

.mega-ed-leafs-hidden {
    display: none;
}

.mega-ed-block.is-expanded .mega-ed-leafs-hidden {
    display: inline;
}

.mega-ed-block.is-expanded .mega-ed-more {
    display: none;
}

.mega-ed-more {
    display: inline-block;
    margin-left: 4px;
    padding: 0;
    border: none;
    background: none;
    font-family: Inter, sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    color: var(--gold-dark);
    cursor: pointer;
    text-decoration: none;
    letter-spacing: .01em;
    transition: opacity .15s;
}

.mega-ed-more:hover {
    opacity: .75;
    text-decoration: underline;
}

/* Sub nélküli sorok (a legtöbb Segédeszköz-elem) — csak a cím áll,
   még tömörebb, hogy a lista ne lélegezzen feleslegesen. */
.mega-ed-block:not(:has(.mega-ed-leafs)) {
    padding: 9px 0;
}

@media (max-width: 1400px) {
    .mega-editorial-cols,
    .mega-editorial-cols-3 {
        columns: 2;
        column-gap: 40px;
    }
}

@media (max-width: 1200px) {
    .mega-editorial {
        padding: 22px 0 28px;
    }

    .mega-ed-title {
        font-size: 14px;
    }
}

/* ============================================================
   MOBIL ACCORDION — beágyazott szintek javítása + animáció.
   Az eredeti CSS-ben a ".mobile-acc-item.is-open .mobile-acc-body"
   szabály nem közvetlen gyerekre vonatkozik (nincs benne ">"), ezért
   amikor a felső szintű kategória kinyílik, MINDEN leszármazott
   .mobile-acc-body is megjelenik — beleértve a beágyazott 3. szintű
   listákat is, függetlenül attól, hogy azok saját maguk nyitva
   vannak-e. Az !important garantálja, hogy az itt felülírt szabály
   mindig érvényesüljön, függetlenül a fájlok betöltési sorrendjétől.

   Az animációhoz "display: none/flex" helyett a grid-template-rows
   0fr -> 1fr trükköt használjuk: ez ismeretlen/dinamikus magasságú
   tartalmat is simán animál, JS-es magasság-számítás nélkül. A
   header.php egy .mobile-acc-body-inner wrappert tesz a tényleges
   lista köré — ez az EGYETLEN grid-item, ezért a grid sor simán
   0-ra tud zsugorodni, függetlenül attól, hány link/alelem van
   benne (a wrapper belül továbbra is normál flex-column marad).
   ============================================================ */
.mobile-acc-item > .mobile-acc-body {
    display: grid !important;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows .28s ease;
}

.mobile-acc-item.is-open > .mobile-acc-body {
    grid-template-rows: 1fr;
}

.mobile-acc-body-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0 0 0 14px;
    opacity: 0;
    transition: opacity .2s ease;
}

.mobile-acc-item.is-open > .mobile-acc-body > .mobile-acc-body-inner {
    opacity: 1;
    transition: opacity .22s ease .08s;
}

/* Minden közvetlen gyerek (sima link VAGY beágyazott subitem)
   egységes, azonos padding-et kapjon — enélkül a subitem (ami
   header + mindig-jelenlévő, csak összecsukott body párosból áll)
   máshogy foglalt helyet, mint a sima <a> linkek, ez adta az
   egyenetlen térközöket. */
.mobile-acc-body-inner > a.mobile-acc-sublink {
    padding: 8px 0;
    margin: 0;
    line-height: 1.3;
}

/* A beágyazott .mobile-acc-subitem maga is .mobile-acc-item, ezért
   örökli az alap CSS item-szintű padding/border-bottom szabályait
   (amik a felső, fő kategóriákhoz voltak méretezve) — ez okozta a
   túl nagy üres tereket a "Női ruhák" / "Férfi ruhák" jellegű sorok
   körül. Itt kompaktabbra vesszük vissza kifejezetten a beágyazott
   szintre, és nullázzuk a zárt (0fr) body maradék margóját/borderét,
   ami extra rést adhatott a subitem alatt még csukott állapotban is. */
.mobile-acc-subitem {
    padding: 0;
    margin: 0;
    border-bottom: none;
}

.mobile-acc-subitem > .mobile-acc-header {
    padding: 8px 0 !important;
    margin: 0 !important;
}

.mobile-acc-subitem > .mobile-acc-body {
    margin: 0;
    border: none;
}

.mobile-acc-subitem .mobile-acc-title,
.mobile-acc-subitem .mobile-acc-sublink {
    font-size: 14px;
}

/* A leaf-szintű (3. szintű) linkek is kompaktabbak legyenek — ezek
   már csak egyszerű linkek, nem kell akkora sortávolság mint a
   fő kategóriáknak. */
.mobile-acc-body-leaf .mobile-acc-body-inner {
    gap: 0;
    padding: 0px 0 0px 14px;
}

.mobile-acc-body-leaf .mobile-acc-body-inner > a.mobile-acc-sublink {
    font-size: 13px;
    padding: 10px 0;
}

/* A nyíl-ikon forgása is csak a saját (közvetlen) toggle gombjára
   vonatkozzon, ne öröklődjön le beágyazott elemekre — animálva. */
.mobile-acc-toggle i {
    display: inline-block;
    transition: transform .25s ease;
}

.mobile-acc-item.is-open > .mobile-acc-header > .mobile-acc-toggle i {
    transform: rotate(180deg) !important;
}

.mobile-acc-item:not(.is-open) > .mobile-acc-header > .mobile-acc-toggle i {
    transform: rotate(0deg) !important;
}

/* A toggle gomb legyen egyértelműen a saját, önálló kattintási
   területe — ne fedje át vagy nyelje el a mellette lévő cím-link
   kattintását, és fordítva. */
.mobile-acc-header {
    position: relative;
}

.mobile-acc-toggle {
    position: relative;
    z-index: 2;
}

/* Finom belépő animáció a lista elemeire, amikor a szülő kinyílik —
   apró lépcsőzetes megjelenés, ne legyen túl feltűnő. */
.mobile-acc-body-inner > a,
.mobile-acc-body-inner > .mobile-acc-subitem {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .22s ease .05s, transform .22s ease .05s;
}

.mobile-acc-item.is-open > .mobile-acc-body > .mobile-acc-body-inner > a,
.mobile-acc-item.is-open > .mobile-acc-body > .mobile-acc-body-inner > .mobile-acc-subitem {
    opacity: 1;
    transform: translateY(0);
}


.mobile-acc-item {
    border-bottom: 1px solid var(--line)
}

.mobile-acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0
}

.mobile-acc-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    transition: color .18s
}

.mobile-acc-toggle {
    background: 0 0;
    border: none;
    font-size: 16px;
    color: var(--gold-dark);
    cursor: pointer;
    padding: 0px 12px;
    transition: transform .25s
}

.mobile-acc-body {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 0px 0 0px 14px
}

.mobile-acc-sublink {
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    transition: color .18s
}

.mobile-acc-item.is-open .mobile-acc-body {
    display: flex
}

.mobile-acc-item.is-open .mobile-acc-toggle i {
    transform: rotate(180deg)
}

.mobile-header-actions, .mobile-search-bar {
    display: none
}




/* ===== JOBB OLDALI MINIKOSÁR ===== */
.cart-drawer-items {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cart-drawer-item {
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

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

.cart-drawer-item-img {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--radius, 6px);
    overflow: hidden;
    background: var(--cart);
    display: block;
}

.cart-drawer-item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cart-drawer-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cart-drawer-item-name {
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--ink);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-drawer-item-name:hover {
    color: var(--gold-dark);
}

.cart-drawer-item-variant {
    font-size: 12px;
    color: var(--muted);
}

.cart-drawer-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
}

.cart-drawer-item-qty {
    font-size: 12px;
    color: var(--muted);
}

.cart-drawer-item-price {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

.cart-drawer-summary {
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.cart-drawer-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.cart-drawer-summary-total {
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
}

.cart-drawer-summary-shipping {
    justify-content: flex-start;
    gap: 6px;
    font-size: 12.5px;
    color: var(--gold-dark);
}

.cart-drawer-summary-shipping i {
    color: var(--gold);
}

/* scroll, ha sok tétel van */
.cart-drawer-body {
    overflow-y: auto;
}



/* ===== KOSÁR LISTA (basket.phtml) ===== */
.basket-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.basket-item {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}

.basket-item:first-child {
    padding-top: 0;
}

.basket-item-top {
    display: flex;
    gap: 16px;
}

.basket-item-img {
    flex-shrink: 0;
    width: 90px;
    height: 110px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-soft);
    display: block;
}

.basket-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.basket-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.basket-item-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    text-decoration: none;
}

.basket-item-name:hover {
    color: var(--gold-dark);
}

.basket-item-variant,
.basket-item-unitprice {
    font-size: 12.5px;
    color: var(--muted);
}

.basket-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.basket-item-delete {
    color: var(--muted);
    cursor: pointer;
    font-size: 19px;
    transition: color .18s, transform .18s;
}

.basket-item-delete:hover {
    color: #c92a2a;
    transform: scale(1.1);
}

.basket-item-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--gold-dark);
    margin-left: auto;
    font-family: Inter, sans-serif !important;
}

.basket-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 2px solid var(--line);
}

.basket-total-row h4 {
    margin: 0;
}

.basket-total-row .h4price {
    font-size: 18px;
    font-weight: 800;
    color: var(--gold-dark);
}

/* Desktopon egy kicsit tágasabb, nagyobb kép */
@media (min-width: 768px) {
    .basket-item-img {
        width: 110px;
        height: 135px;
    }

    .basket-item-bottom {
        justify-content: flex-start;
    }

    .basket-item-price {
        margin-left: auto;
        font-size: 16px;
        font-family: Inter, sans-serif !important;
    }
}



/* ===== TOAST ÉRTESÍTÉS (kosár oldal) ===== */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ink);
    color: #fff;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: auto;
}

.toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.toast i {
    font-size: 16px;
    flex-shrink: 0;
}

.toast.toast-success i {
    color: var(--gold);
}

.toast.toast-error {
    background: #9b1c1c;
}

.toast.toast-error i {
    color: #fff;
}

@media (max-width: 480px) {
    .toast-container {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    .toast {
        width: 100%;
    }
}




#accordian {
    background: #fff;
    width: 250px;

    color: #000;
    /*box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.6), 0 0 200px 1px rgba(255, 255, 255, 0.5);*/

    color: #191919;
}

#accordian h3 {
    background: #fff;
}

#accordian h3 a {
    padding: 0 10px;
    font-size: 14px;
    line-height: 30px;
    display: block;
    color: #191919;
    text-decoration: none;
    border-bottom: 1px solid #e9e9e9;
    text-transform: uppercase;
    font-weight: normal;
}

#accordian h3:hover {}

i {
   /* margin-right: 10px;*/
}

#accordian li {
    list-style-type: none;
}

#accordian ul ul li a,
#accordian h4 {
    color: #191919;
    text-decoration: none;
    font-size: 12px;
    line-height: 30px;
    display: block;
    padding: 0 0px;
    transition: all 0.15s;
    position: relative;
    border-bottom: 1px solid #e9e9e9;
    text-transform: uppercase;
    font-weight: normal;
}

#accordian ul ul li a:hover {
    background: #fff;
    border-bottom: 1px solid #d4145a;
    line-height: 30px;
}

#accordian ul ul {
    display: none;
}

#accordian li.active>ul {
    display: block;
    color: #d4145a !important;
}

#accordian ul ul ul {
    margin-left: 0px;
    border-left: 0px dotted rgba(0, 0, 0, 0.5);
}

#accordian a:not(:only-child):after {
    content: ">";

    position: absolute;
    right: 10px;
    top: 0;
    font-size: 14px;
}

#accordian .active>a:not(:only-child):after {
    content: "<";
}

#accordian li.selected_menu>ul {
    color: #d4145a !important;
    display: block;
}



/* ============================================================
   TOPCATEGORIES GRID — izolált, saját névtér (.topcat-grid /
   .topcat-card), semmilyen meglévő .subcategory-item / .zoom-in
   class-hoz NEM nyúl, hogy semmi régi szabály ne keveredhessen
   bele. Kép nélküli, szöveges kártyák (a topcategories adatban
   a legtöbb elemnél nincs kép).
   ============================================================ */

.topcat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.topcat-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 16px 14px;
    border-radius: 10px;
    background: var(--card, #fff);
    border: 1px solid var(--line, rgba(0,0,0,.09));
    box-shadow: 0 4px 15px rgba(0,0,0,.03);
    text-decoration: none;
    text-align: center;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

.topcat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow, 0 18px 45px rgba(20,20,20,.09));
    border-color: var(--gold, #d4145a);
}

.topcat-card-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--gold-dark, #ae0942);
    text-transform: uppercase;
    letter-spacing: .02em;
}

@media (max-width: 991px) {
    .topcat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .topcat-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   BAL OLDALI PANEL (.aside.leftColumn) TELJES TILTÁSA MOBILON.

   A régi CSS-ben ez a panel @media (max-width: 991px) alatt egy
   fixed-pozíciós "drawer"-ré volt alakítva (position:fixed, left:
   -320px, .open esetén left:0). Ez FELESLEGES és TÉVESEN jelent
   meg mobilon — a helyes mobil navigáció a header.phtml saját,
   natív .mobile-drawer komponense, nem ez a desktop sidebar.

   Ez a szabály — mivel KÉSŐBB töltődik be, mint az eredeti
   @media (max-width: 991px) blokk — felülírja azt: a panel
   mobilon (max-width: 991px) mindig display:none, függetlenül
   az .open classtól. A .slide-column-close (BEZÁR gomb) és
   maga a trigger, ami .open-t adna hozzá, effektíve hatástalan
   lesz, mert a szülő maga sosem jelenik meg.
   ============================================================ */
/* ============================================================
   BAL OLDALI PANEL (.aside.leftColumn) TELJES TILTÁSA MOBILON.

   A régi CSS-ben ez a panel @media (max-width: 991px) alatt egy
   fixed-pozíciós "drawer"-ré volt alakítva (position:fixed, left:
   -320px, .open esetén left:0). Ez FELESLEGES és TÉVESEN jelent
   meg mobilon — a helyes mobil navigáció a header.phtml saját,
   natív .mobile-drawer komponense, nem ez a desktop sidebar.

   Ez a szabály — mivel KÉSŐBB töltődik be, mint az eredeti
   @media (max-width: 991px) blokk — felülírja azt: a panel
   mobilon (max-width: 991px) mindig display:none, függetlenül
   az .open classtól. A .slide-column-close (BEZÁR gomb) és
   maga a trigger, ami .open-t adna hozzá, effektíve hatástalan
   lesz, mert a szülő maga sosem jelenik meg.
   ============================================================ */
/* ============================================================
   BAL OLDALI PANEL (.aside.leftColumn) TELJES TILTÁSA MOBILON.

   Megjegyzés: a valós, éles HTML-ben a class-lista
   "col-md-3 col-lg-3 col-xl-3 aside leftColumn" -- korábban
   tévesen "col-md-4"-gyel próbáltuk szelektálni, ezért a
   szabály soha nem talált egyezést. Itt már a .leftColumn
   class önmagában elég egyedi ahhoz, hogy erre a konkrét
   panelre szelektáljunk, a col-md-* számtól függetlenül --
   így akkor is működik, ha a grid-osztály később változna.
   ============================================================ */
@media (max-width: 991px) {
    .aside.leftColumn {
        display: none !important;
    }

    /* A hozzá tartozó "BEZÁR" trigger sáv is feleslegessé válik,
       mivel a panel, amit nyitna/zárna, sosem jelenik meg. */
    .slide-column-close {
        display: none !important;
    }

    .sidebar-backdrop {
        display: none !important;
    }
}

/* ============================================================
   BREADCRUMB — letisztultabb, ízlésesebb stílus.
   ============================================================ */
.breadcrumb {
    background: var(--bg-soft);
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.breadcrumb ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 13px;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li a {
    display: flex;
    align-items: center;
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    transition: color .18s;
    white-space: nowrap;
}

.breadcrumb li a:hover {
    color: var(--gold-dark);
}

/* Utolsó elem (aktuális oldal) kiemelve, nem kattintható színnel */
.breadcrumb li:last-child a {
   /* color: var(--ink);*/
    font-weight: 700;
}

/* Elválasztó "/" minden elem után, az utolsó kivételével */
.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin: 0 10px;
    color: rgba(0, 0, 0, .18);
    font-weight: 400;
}

/* Házikó ikon: saját, jól látható, konzisztens méretű SVG-alapú
   glyph -- nem hagyatkozunk üres .icon-home class-ra */
.breadcrumb .icon-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    color: var(--muted);
    transition: color .18s;
}

.breadcrumb .icon-home::before {
    font-family: "bootstrap-icons" !important;
    content: "\f425"; /* bi-house-door */
    font-size: 15px;
    line-height: 1;
}

.breadcrumb li a:hover .icon-home {
    color: var(--gold-dark);
}

@media (max-width: 480px) {
    .breadcrumb ul {
        font-size: 12px;
    }

    .breadcrumb li:not(:last-child)::after {
        margin: 0 6px;
    }
}


/* ============================================================
   KATEGÓRIA FEJLÉC + BANNER KÉP — kártyaszerű, reszponzív blokk.
   A cím (H1) és a kép egy közös, lekerekített kártyában, hogy
   vizuálisan összetartozzanak -- eddig a cím és a kép külön
   elemként, kötetlenül lebegett egymás felett.
   ============================================================ */
.category-hero {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: 0 4px 15px rgba(0, 0, 0, .03);
    margin-bottom: 30px;
}

.category-hero-title {
    padding: 22px 26px 18px;

    color: var(--ink);

    margin: 0;
    border-bottom: 1px solid var(--line);
    font-family: Inter, sans-serif !important;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    font-size: 29px;
    letter-spacing: -.025em;
}

.category-hero-img-link {
    display: block;
    width: 100%;
    /* Az eredeti banner-képek jellemzően szélesvásznú (kb. 894x180
       arány) -- ezt az arányt tartjuk meg reszponzívan aspect-ratio-val,
       hogy ne torzuljon és ne is lógjon ki fix pixel-méret miatt. */
    aspect-ratio: 894 / 180;
    overflow: hidden;
    background: var(--bg);
}

.category-hero-img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.category-hero-img-link:hover img {
    transform: scale(1.03);
}

@media (max-width: 767px) {
    .category-hero-title {
        padding: 16px 18px 14px;
    }

    /* Mobilon a széles banner nagyon alacsonyra zsugorodna a 894:180
       arány mellett -- kicsit "magasabbra" vesszük, hogy a felirat
       és a termékkép még kényelmesen olvasható maradjon. */
    .category-hero-img-link {
/*aspect-ratio: 16 / 7;*/
    }
}

@media (max-width: 480px) {
    .category-hero-img-link {
       /* aspect-ratio: 4 / 3;*/
    }
}

#pageContent{
    margin-top:10px;
}

/* ============================================================
   SZŰRŐ CHECKBOXOK (.ch / .outer / .inner) — egyedi, natív
   böngésző-checkbox helyett saját stílus. A HTML struktúra:

   <label class="ch">
     <input type="checkbox" ...>
     <span class="outer"><span class="inner"></span></span>
     Elemes
   </label>

   A natív <input> vizuálisan elrejtve, de a kattintási terület
   és a billentyűzetes fókusz megmarad rajta (accessibility).
   ============================================================ */
.ch {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.4;
    user-select: none;
    padding: 3px 0;
}

.ch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.ch .outer {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    border-radius: 5px;
    border: 2px solid var(--line);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .18s, background-color .18s;
}

.ch .inner {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: transparent;
    transition: background-color .18s, transform .18s;
    transform: scale(0);
}

/* Hover -- csak akkor emeljük ki a keretet, ha még nincs bejelölve */
.ch:hover .outer {
    border-color: var(--gold);
}

/* Bejelölt állapot */
.ch input:checked ~ .outer {
    border-color: var(--gold-dark);
    background: var(--gold-dark);
}

.ch input:checked ~ .outer .inner {
   /* background: #fff;*/
    transform: scale(1);
}

/* Billentyűzetes fókusz -- látható, elérhetőségi okból */
.ch input:focus-visible ~ .outer {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Bejelölt sor szövege is emeljen ki egy kicsit */
.ch input:checked ~ .outer ~ * {
    color: var(--ink);
    font-weight: 600;
}

/* A szűrő-listák (Elem vagy akku, Márka stb.) elrendezése */
.collapse-block ul:has(.ch) {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.collapse-block ul:has(.ch) li {
    border-bottom: none;
    padding: 0;
}


/* ============================================================
   SZŰRŐ DRAWER (.filter-drawer) — a .mobile-drawer mintájára,
   de a jobb oldalról nyílik (mint a .cart-drawer), hogy a
   hamburger-menü (bal oldal) és a szűrő (jobb oldal) vizuálisan
   is elkülönüljön egymástól.
   ============================================================ */
.filter-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(380px, 88vw);
    background: #fff;
    z-index: 85;
    transform: translateX(105%);
    transition: transform .3s cubic-bezier(.25, .8, .25, 1);
    box-shadow: -20px 0 50px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.filter-drawer.is-open {
    transform: translateX(0);
}

.filter-drawer .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.filter-drawer .drawer-header-title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink);
}

.filter-drawer .drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 24px;
}

/* A drawer belsejében a .collapse-block dobozok kicsit
   kompaktabbak, mint a fő oldalon -- keskenyebb helyen ülnek */
.filter-drawer .collapse-block {
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 18px 0;
    box-shadow: none;
}

.filter-drawer .collapse-block:first-child {
    padding-top: 0;
}

.filter-drawer .collapse-block_title {
    font-size: 14px !important;
    border-bottom: none;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.filter-drawer .poll-list {
    list-style: none;
    margin: 0;
    padding: 0;
}




/* ============================================================
   KATEGÓRIA FEJLÉC — a duplikált block-title eltávolítva, a
   section-header marad, jobb oldalán a termékszámmal kiegészítve.
   ============================================================ */


.section-header-count {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

@media (max-width: 767px) {
    .section-header {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .section-header-count {
        margin-left: auto;
        font-size: 12px;
    }
}


/* ============================================================
   LAPOZÓ (.pagination) — reszponzív tömörítés mobilon.
   A megjelenés/elrejtés a JS-ben kiosztott .pager-edge (Első/
   Utolsó oldal) és .pager-far (aktuálistól 2+ távolságra lévő
   számgomb) osztályokra épül -- lásd pager-responsive.js.
   ============================================================ */
.pagination-wrap {
    overflow-x: visible;
}

.pagination {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 6px;
    flex-wrap: wrap;
}

.pagination li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: .18s;
}

.pagination li a:hover {
    border-color: var(--gold);
    color: var(--gold-dark);
}

.pagination li.active a {
    background: var(--gold);
    border-color: var(--gold-dark);
    color: #fff;
    cursor: default;
}

@media (max-width: 767px) {
    .pagination li.pager-edge,
    .pagination li.pager-far {
        display: none;
    }

    .pagination li a {
        min-width: 34px;
        height: 34px;
        padding: 0 8px;
        font-size: 12px;
    }
}

/* ============================================================
   LAPOZÓ JAVÍTÁS — a Pager.php által kiírt "Előső oldal" / "Előző
   oldal" / "Következő oldal" / "Utolsó oldal" feliratok
   screen-reader-only (.sr-only) szövegek, amiknek REJTVE kellene
   maradniuk, csak a «/‹/›/» jelek látszódjanak. A diamond.css-ben
   eddig nem volt .sr-only definiálva, ezért ezek a szövegek is
   simán, láthatóan megjelentek.
   ============================================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* A lapozó ne törjön új sorba -- egy sorban maradjon, szükség
   esetén vízszintesen görgethető legyen kis képernyőn. */
.pagination-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pagination {
    flex-wrap: nowrap;
}

.pagination li a {
    flex-shrink: 0;
}



/* ============================================================
   FILTERS-ROW SÁV — tiszta, modern szerkezet (a régi pull-left/
   pull-right/hidden-sm/hidden-xs rendszer helyett): egyetlen flex
   konténer, két gyerekkel (szűrés gomb, rendezés). Semmilyen
   Bootstrap 3-as segédosztályra nem támaszkodik, ezért nincs
   rejtett/középre csúszó elem-probléma.
   ============================================================ */
.filters-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 30px !important;
    width: 100%;
}

/* --- SZŰRÉS gomb: ikon-only, hangsúlyos --- */
/* ============================================================
   FILTERS-ROW SÁV — tiszta, modern szerkezet (a régi pull-left/
   pull-right/hidden-sm/hidden-xs rendszer helyett): egyetlen flex
   konténer, két gyerekkel (szűrés gomb, rendezés). Semmilyen
   Bootstrap 3-as segédosztályra nem támaszkodik, ezért nincs
   rejtett/középre csúszó elem-probléma.
   ============================================================ */
.filters-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 30px !important;
    width: 100%;
}

/* --- SZŰRÉS gomb: ikon-only, hangsúlyos --- */

.btn-filter-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 7px;
    background: var(--gold);
    color: #fff;
    border: 1px solid var(--gold);
    cursor: pointer;
    transition: .2s;
}

.btn-filter-icon:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
}



/* --- RENDEZÉS --- */
.filters-row_sort {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.filters-row_sort label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
    white-space: nowrap;
}

.filters-row_sort select.form-control {
    height: 40px;
    min-width: 160px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--ink);
    background: #fff;
    outline: 0;
    cursor: pointer;
}

@media (max-width: 480px) {
    .filters-row {
        padding: 10px 14px;
    }

    .filters-row_sort label {
        display: none;
    }

    .filters-row_sort select.form-control {
        min-width: 130px;
        font-size: 12px;
    }
}

/* ============================================================
   NSLIDER NYÍL-GOMBOK — a .swiper-button-prev/next stílusa itt,
   mert a natív .nslider-track-hez nem a Swiper könyvtár CSS-e
   adja a megjelenést (azt csak Swiper-inicializált elemekre
   futtatja a könyvtár), hanem saját, kézzel írt stílus kell.
   ============================================================ */
.product-slider-wrapper {
    position: relative;
}

.product-slider-wrapper .swiper-button-prev,
.product-slider-wrapper .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    cursor: pointer;
    transition: .2s;
}

.product-slider-wrapper .swiper-button-prev {
    left: -8px;
}

.product-slider-wrapper .swiper-button-next {
    right: -8px;
}

.product-slider-wrapper .swiper-button-prev::before,
.product-slider-wrapper .swiper-button-next::before {
    font-family: "bootstrap-icons" !important;
    font-size: 15px;
    color: var(--ink);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.product-slider-wrapper .swiper-button-prev::before {
    content: "\f284"; /* bi-chevron-left */
}

.product-slider-wrapper .swiper-button-next::before {
    content: "\f285"; /* bi-chevron-right */
}

.product-slider-wrapper .swiper-button-prev:hover,
.product-slider-wrapper .swiper-button-next:hover {
    background: var(--gold);
    border-color: var(--gold);
}

.product-slider-wrapper .swiper-button-prev:hover::before,
.product-slider-wrapper .swiper-button-next:hover::before {
    color: #fff;
}

.product-slider-wrapper .swiper-button-disabled {
    opacity: .3;
    pointer-events: none;
}

/* --- Kiemelt termék sáv: keskenyebb, mint a Hírek (bal sávban ül) --- */
.kiemelt-nslider .nslider-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    gap: 14px;
}

.kiemelt-nslider .nslider-track::-webkit-scrollbar {
    display: none;
}

.kiemelt-nslider .nslider-slide {
    flex: 0 0 auto;
    width: 100%;
    scroll-snap-align: start;
}


/* ============================================================
   ASIDE BANNER SLIDER (.ft_newproductslider) — automatikus,
   nyílak nélküli lapozás, a banner középre igazítva a dobozban.
   ============================================================ */
.ft_newproductslider {
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
}

.aside-banner-slider {
    width: 100%;
}

.aside-banner-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.aside-banner-track::-webkit-scrollbar {
    display: none;
}

.aside-banner-slide {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aside-banner-slide a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.aside-banner-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.hide{display:none !important;}

.filters-row_sort {
    margin-left: auto;
}



.product-gallery-card {
    position: relative;
    background: var(--card, #fff);
    border-radius: var(--radius, 16px);
    box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.08));
    padding: 10px;
    margin: 0 0px 20px;
}

.product-gallery-card .nslider-track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    border-radius: calc(var(--radius, 16px) - 6px);
    scrollbar-width: none; /* Firefox: elrejti a görgetősávot */
}

.product-gallery-card .nslider-track::-webkit-scrollbar {
    display: none; /* Chrome/Safari: elrejti a görgetősávot */
}

.product-gallery-card .nslider-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    /*aspect-ratio: 4 / 5;*/
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-soft, #f7f3ef);
    border-radius: inherit;
}

.product-gallery-card .nslider-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* a teljes kép mindig látszik, nincs vágás */
    border-radius: inherit;
}

.product-gallery-card .swiper-button-prev,
.product-gallery-card .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.85);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    z-index: 2;
}

.product-gallery-card .swiper-button-prev { left: 20px; }
.product-gallery-card .swiper-button-next { right: 20px; }

.carousel-parent-relative {
    position: relative;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    cursor: pointer;
    transition: .2s;
    padding: 0;
    /* a JS által beírt nyers "‹"/"›" szöveget elrejtjük,
       helyette a ::before pszeudo-elem rajzolja az ikont —
       pontosan úgy, mint a .product-slider-wrapper gomboknál */
    font-size: 0;
    color: transparent;
}

.carousel-arrow::before {
    font-family: "bootstrap-icons" !important;
    font-size: 15px;
    color: var(--ink);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.carousel-arrow.prev::before {
    content: "\f284"; /* bi-chevron-left */
}

.carousel-arrow.next::before {
    content: "\f285"; /* bi-chevron-right */
}

.carousel-arrow:hover {
    background: var(--gold);
    border-color: var(--gold);
}

.carousel-arrow:hover::before {
    color: #fff;
}

.carousel-arrow.prev {
    left: -8px;
}

.carousel-arrow.next {
    right: -8px;
}

.carousel-arrow:disabled,
.carousel-arrow[aria-disabled="true"] {
    opacity: 0.3;
    pointer-events: none;
}

.fact-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.fact-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fact-card i {
    font-size: 18px;
    color: var(--gold-dark);
    margin-bottom: 2px;
}

.fact-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}

.fact-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}

@media (max-width: 767px) {
    .fact-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

.info-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-section {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.info-section summary {
    padding: 16px 20px;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    -webkit-tap-highlight-color: transparent;
}

.info-section summary::-webkit-details-marker {
    display: none;
}

.info-section summary::after {
    content: "\f282";
    font-family: "bootstrap-icons" !important;
    font-size: 14px;
    color: var(--gold-dark);
    transition: transform .2s;
    flex-shrink: 0;
    margin-left: 12px;
}

.info-section[open] summary::after {
    transform: rotate(180deg);
}

.info-section summary:hover {
    color: var(--gold-dark);
}

.info-section-body {
    padding: 0 20px 20px;
    font-size: 14px;
    line-height: 1.7;
    color: #4d4945;
}

.brand-info-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.brand-info-row img {
    width: 140px;
    flex-shrink: 0;
    border-radius: 8px;
}

.brand-more-link {
    display: inline-block;
    margin-top: 10px;
    color: var(--gold-dark);
    font-weight: 700;
}

.faq-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
}

.faq-item p {
    margin: 0;
    color: var(--muted);
}

@media (max-width: 767px) {
    .brand-info-row {
        flex-direction: column;
    }
    .brand-info-row img {
        width: 100%;
        max-width: 220px;
    }
}
.tol-50{margin-top:20px;}


.fact-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.fact-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gold);
}

.fact-card i {
    display: none; /* a section-header mintában nincs ikon, csak csík + szöveg */
}

.fact-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gold-dark);
}

.fact-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}


.spec-table {
    width: 100%;
    border-collapse: collapse;
}

.spec-table tr {
    border-bottom: 1px solid var(--line);
}

.spec-table tr:last-child {
    border-bottom: none;
}

.spec-table th,
.spec-table td {
    padding: 10px 0;
    text-align: left;
    font-size: 13.5px;
    font-weight: 400;
}

.spec-table th {
    width: 40%;
    color: var(--muted);
    font-weight: 700;
    padding-right: 16px;
}

.spec-table td {
    color: var(--ink);
}

@media (max-width: 480px) {
    .spec-table th {
        width: 45%;
        font-size: 12.5px;
    }
    .spec-table td {
        font-size: 12.5px;
    }
}



.mini-fact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.mini-fact-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 12px 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color .2s;
}

.mini-fact-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gold);
}

a.mini-fact-card:hover {
    border-color: var(--gold);
}

.mini-fact-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gold-dark);
}

.mini-fact-value {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.3;
}

.mini-fact-instock::before {
    background: #68a902;
}

.mini-fact-instock .mini-fact-value {
    color: #68a902;
}

.mini-fact-instock .mini-fact-value i {
    font-size: 13px;
}

@media (max-width: 480px) {
    .mini-fact-card {
        padding: 7px 10px 7px 12px;
    }
    .mini-fact-value {
        font-size: 12px;
    }
}

.mini-fact-action {
    cursor: pointer;
}

.mini-fact-action::before {
    background: var(--muted);
}

.mini-fact-action .mini-fact-value i {
    font-size: 13px;
}

.mini-fact-action.is-active::before {
    background: var(--gold);
}

.mini-fact-action.is-active .mini-fact-value,
.mini-fact-action.is-active .mini-fact-label {
    color: var(--gold-dark);
}

.mini-fact-action.is-active .mini-fact-value i {
    color: #ff0000;
}

.addon-label-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    overflow: hidden;
}

.addon-label-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gold);
}

.addon-label-card i {
    font-size: 16px;
    color: var(--gold-dark);
    flex-shrink: 0;
}

.addon-label-text {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    flex: 1;
}

.addon-label-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--gold-dark);
    background: var(--bg-soft);
    padding: 3px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.variant-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--gold-dark);
    background: var(--bg-soft);
    padding: 2px 9px;
    border-radius: 999px;
    margin-right: 6px;
}

.variant-sku {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 700;
    color: #495057;
    background: #f1f3f5;
    padding: 2px 9px;
    border-radius: 999px;
    margin-right: 6px;
}

.variant-pack {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 700;
    color: #eceff4;
    background: #0ab3b3;
    padding: 2px 9px;
    border-radius: 999px;
    margin-right: 6px;
}

.mini-fact-pair {
    display: flex;
    gap: 8px;
    flex: 1 1 auto;
}

.mini-fact-pair .mini-fact-card {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 480px) {
    .mini-fact-pair {
        flex: 1 1 100%; /* saját, teljes szélességű sort foglal */
    }
    .mini-fact-pair .mini-fact-value {
        font-size: 11px;
        white-space: normal;
        line-height: 1.25;
    }
    .mini-fact-pair .mini-fact-label {
        font-size: 9px;
    }
}

@keyframes cartPulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.25); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.pulse-animation {
    animation: cartPulse 0.5s ease;
}

[data-cart-icon] .badge {
    transition: background-color .2s;
}

[data-cart-icon].pulse-animation .badge {
    background: var(--gold-dark);
}


.variant-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.variant-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.variant-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;

}

.variant-sku {
    font-size: 11.5px;
    color: var(--muted);
    background: none;
    padding: 0;
    border-radius: 0;
}

.variant-badge {
    align-self: flex-start;
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--gold-dark);
    background: none;
    border: 1px solid var(--line);
    padding: 2px 8px;
    border-radius: 999px;
}

.variant-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.variant-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--gold-dark);
    flex-shrink: 0;
    font-family: Inter, sans-serif !important;
}

.variant-price .old-price {
    display: block;
    font-size: 11px;
    color: var(--muted);
    text-decoration: line-through;
    font-weight: 500;
}

.variant-action .btn-addtocart {
    flex: 1;
    justify-content: center;
    max-width: 200px;
}

.variant-out-of-stock .variant-price {
    color: var(--muted);
}

.variant-oos-label {
    font-size: 12px;
    font-weight: 700;
    color: #9b1c1c;
}

@media (min-width: 768px) {
    .variant-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .variant-info {
        flex: 1;
    }
    .variant-action {
        flex-shrink: 0;
    }
}


.addon-card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 16px 12px 14px;
    margin-bottom: 10px;
    overflow: hidden;
    font-family: Inter, sans-serif !important;
}

.addon-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gold);
}

.addon-card-img {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.addon-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.addon-card-info {
    flex: 1 1 55%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.addon-card-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

.addon-card-sku {
    font-size: 11.5px;
    color: var(--muted);
}

.addon-card-qty-badge {
    align-self: flex-start;
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--gold-dark);
    background: none;
    border: 1px solid var(--line);
    padding: 2px 8px;
    border-radius: 999px;
}

.addon-card-price {
    font-size: 14px;
    font-weight: 800;
    color: var(--gold-dark);
    flex-shrink: 0;
}

.addon-card-btn {
    width: 100%;
    justify-content: center;
    order: 10;
}

@media (min-width: 480px) {
    .addon-card-btn {
        width: auto;
        order: 0;
        flex-shrink: 0;
    }
}


.payment-trust-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--muted);
}

.payment-trust-row i {
    font-size: 15px;
    color: #68a902;
    flex-shrink: 0;
}

.payment-trust-row img {
    height: 20px;
    width: auto;
    margin-left: 4px;
}

@media (max-width: 380px) {
    .payment-trust-row {
        flex-direction: column;
        gap: 6px;
    }
}

.variant-action-single .btn-addtocart {
    width: 100%;
    max-width: none;
    flex: 1 1 100%;
}


.product-s {
    position: relative;
}



.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
}

.wishlist-grid .product .image-box {
    aspect-ratio: 3 / 4 !important;
    overflow: hidden;
}

.wishlist-grid .product .image-box a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
}

.wishlist-grid .product .image-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

@media (max-width: 480px) {
    .wishlist-grid {
        grid-template-columns: repeat(2, 1fr); gap: 12px;
    }
}

.view-toggle {
    display: flex;
    gap: 4px;
    background: var(--bg-soft);
    border-radius: 8px;
    padding: 4px;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: .2s;
}

.view-toggle-btn.is-active {
    background: #fff;
    color: var(--gold-dark);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

.product-listing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 991px) {
    .product-listing-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 480px) {
    .product-listing-grid { grid-template-columns: 1fr; }
}



.product-listing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 991px) {
    .product-listing-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 480px) {
    .product-listing-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

.product-listing-grid.list-view {
    grid-template-columns: 1fr !important;
    gap: 14px;
}

.product-listing-grid.list-view .product {
    margin-bottom: 0;
    height: auto;
}

.product-listing-grid.list-view .product_inside {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    height: auto;
}

.product-listing-grid.list-view .title {
    width: 100%;
    margin: 0;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    display: block;
    min-height: 0;
}

.product-listing-grid.list-view .list-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.product-listing-grid.list-view .image-box {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    margin-bottom: 0;
    aspect-ratio: 1;
}

.product-listing-grid.list-view .image-box .badge-akcios2 {
    font-size: 9px;
    padding: 3px 6px;
    left: 4px;
    top: 4px;
}

.product-listing-grid.list-view .image-box .ribbon {
    display: none;
}

.product-listing-grid.list-view .price.view {
    flex: 1 1 auto;
    text-align: left;
    margin: 0;
    font-size: 13px;
    white-space: nowrap;
}

.product-listing-grid.list-view .price.view .old-price {
    display: inline;
    margin-right: 6px;
}

.product-listing-grid.list-view .product_inside_hover {
    margin: 0;
    width: auto;
    flex-shrink: 0;
}

.product-listing-grid.list-view .btn.btn-product2 {
    width: auto;
    padding: 0 16px;
    height: 34px;
    font-size: 10px;
}



.product-listing-grid:not(.list-view) .product_inside {
    display: flex;
    flex-direction: column;
}

.product-listing-grid:not(.list-view) .title {
    order: 2;
    width: 100%;
}

.product-listing-grid:not(.list-view) .list-row {
    display: contents;
}

.product-listing-grid:not(.list-view) .image-box {
    order: 1;
}

.product-listing-grid:not(.list-view) .price.view {
    order: 3;
}

.product-listing-grid:not(.list-view) .product_inside_hover {
    order: 4;
}

.product-listing-grid:not(.list-view) .list-row {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

.filters-row_left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-listing-grid .btn.btn-product2 {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 480px) {
    .product-listing-grid .btn.btn-product2 {
        padding: 0 10px;
        font-size: 11px;
        letter-spacing: .02em;
    }
}

.product-listing-grid .product_inside_hover,
.product-listing-grid .product_inside_info {
    width: 100%;
    box-sizing: border-box;
}



.site-head-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
}

/* A .header saját sticky/pozicionálását most a wrapper veszi át —
   a header maga már csak normál dokumentum-folyású elem a wrapperen belül */
.header {
    position: static;
}

.topcat-card {
    display: flex;
    align-items: center;
}

.topcat-card-title {
    flex: 1;
}

.topcat-card-has-sub {
    flex-shrink: 0;
    margin-left: 10px;
    color: var(--gold-dark);
    font-size: 15px;
}

.drawer-quicklinks {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drawer-quicklink {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    color: var(--ink);
    font-size: 15px;
    border-bottom: 1px solid var(--line);
    transition: color .2s;
}

.drawer-quicklink:last-child {
    border-bottom: none;
}

.drawer-quicklink i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: var(--muted);
    flex-shrink: 0;
}

.drawer-quicklink:hover {
    color: var(--gold-dark);
}

.drawer-quicklink:hover i {
    color: var(--gold-dark);
}

/* Az Akciók kiemelt, mert ez a legkonverzió-releváns link a listában */
.drawer-quicklink-accent {
    color: var(--gold-dark);
    font-weight: 700;
}

.drawer-quicklink-accent i {
    color: var(--gold-dark);
}



/* Brand + linkoszlopok felül */
.footer-top{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start;padding-top:8px;}
.footer-tagline{font-size:13px;color:rgba(255,255,255,.65);margin:14px 0 18px;max-width:280px;line-height:1.5;}

/* Social ikonok kör alakú gold hoverrel */
.socials{display:flex;gap:10px;}
.socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.25);border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;color:#f4f1ec;transition:.2s;}
.socials a:hover{background:var(--gold);border-color:var(--gold);color:#171717;}

/* Linkoszlopok grid */
.footer-links{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}

/* Details/summary — desktopon statikus, csak dizájn */
.footer-col summary{font-weight:600;color:#f4f1ec;list-style:none;cursor:default;
    padding-bottom:8px;margin-bottom:10px;border-bottom:2px solid var(--gold);display:inline-block;}
.footer-col summary::-webkit-details-marker{display:none;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.footer-col a{color:rgba(255,255,255,.7);font-size:14px;transition:color .15s;}
.footer-col a:hover{color:var(--gold);}
.footer-contact-list li{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.7);font-size:14px;}
.footer-contact-list i{color:var(--gold);}

/* Trust-badge sáv */
.footer-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;
    padding:20px 0;margin:28px 0 4px;border-top:1px solid rgba(255,255,255,.1);
    border-bottom:1px solid rgba(255,255,255,.1);font-size:13px;color:rgba(255,255,255,.75);}
.footer-trust i{color:var(--gold);margin-right:6px;}

/* --- MOBIL: harmonika --- */
@media (max-width:820px){
    .footer-top{grid-template-columns:1fr;gap:28px;text-align:center;}
    .footer-tagline{max-width:none;margin-inline:auto;}
    .socials{justify-content:center;}
    .footer-links{grid-template-columns:1fr;gap:0;}

    .footer-col{border-bottom:1px solid rgba(255,255,255,.1);text-align:left;}
    .footer-col summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;
        border-bottom:none;width:100%;padding:16px 2px;margin:0;}
    .footer-col summary::after{content:'+';font-size:20px;color:var(--gold);font-weight:400;}
    .footer-col[open] summary::after{content:'\2212';}
    .footer-col ul{padding:2px 2px 18px;}

    .footer-trust{gap:14px;font-size:12px;text-align:left;}
}
.basketbox{margin-top:10px;}


/* ==========================================================================
   STATIKUS OLDALAK (Rólunk, Kapcsolat, ÁSZF, Adatvédelem, GYIK stb.) — static-page-*
   ========================================================================== */

.static-page{
    padding: 24px 0 50px;
}

.static-page__card{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 40px;
    /*max-width: 900px;*/
    margin: 0 auto;
}

@media (max-width: 600px){
    .static-page__card{
        padding: 24px 18px;
        border-radius: 14px;
    }
}

.static-page__header{
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.static-page__header h1{
    font-family: "Playfair Display", serif;
    font-size: 28px;
    margin: 6px 0 0;
}

/* A kicker osztály már létezik máshol az oldalon (pl. section-header),
   itt csak biztosítjuk, hogy ezen a kártyán belül is jól nézzen ki */
.static-page__header .kicker{
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gold-dark);
}

/* ---- Tipográfia a $page[0]->htmlcode admin-szerkesztett tartalmához ---- */
.static-page__content{
    color: var(--ink);
    font-size: 15px;
    line-height: 1.7;
}
.static-page__content p{
    margin: 0 0 16px;
}
.static-page__content h2{
    font-family: "Playfair Display", serif;
    font-size: 21px;
    margin: 32px 0 12px;
}
.static-page__content h3{
    font-size: 17px;
    font-weight: 700;
    margin: 24px 0 10px;
}
.static-page__content ul,
.static-page__content ol{
    margin: 0 0 16px;
    padding-left: 22px;
}
.static-page__content li{
    margin-bottom: 6px;
}
.static-page__content a{
    color: var(--gold-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.static-page__content a:hover{
    color: var(--gold);
}
.static-page__content table{
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
    font-size: 14px;
}
.static-page__content th,
.static-page__content td{
    border: 1px solid var(--line);
    padding: 8px 12px;
    text-align: left;
}
.static-page__content th{
    background: var(--bg);
    font-weight: 700;
}
.static-page__content blockquote{
    margin: 0 0 16px;
    padding: 14px 18px;
    border-left: 3px solid var(--gold);
    background: var(--bg);
    border-radius: 0 10px 10px 0;
    color: var(--muted);
}

/* ---- Kapcsolat oldal gyorstény-sáv ---- */
.static-page__facts{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 32px;
}
@media (max-width: 600px){
    .static-page__facts{
        grid-template-columns: 1fr;
    }
}
.static-page__fact{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
}
.static-page__fact i{
    color: var(--gold-dark);
    font-size: 18px;
    margin-top: 2px;
}
.static-page__fact strong{
    display: block;
    font-size: 13px;
    margin-bottom: 2px;
}
.static-page__fact span{
    font-size: 13px;
    color: var(--muted);
}
.static-page__fact a{
    color: var(--muted);
}
.static-page__fact a:hover{
    color: var(--gold-dark);
}

/* ---- Social ikonok (Rólunk / Kapcsolat) ---- */
.static-page__socials{
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
.static-page__socials-label{
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
}
.static-page__social-icons{
    display: flex;
    gap: 10px;
}
.static-page__social-icon{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
}
.static-page__social-icon svg{
    width: 18px;
    height: 18px;
    fill: var(--ink);
    transition: .2s;
}
.static-page__social-icon:hover{
    background: var(--gold);
    border-color: var(--gold);
}
.static-page__social-icon:hover svg{
    fill: #fff;
}



/* ==========================================================================
   BLOG — xblog-* (modernizált, a cart/static-page rounded-card nyelvezethez igazítva)
   ========================================================================== */

.xblog-page-wrap{
    padding: 24px 0 50px;
}

/* ---- Fejléc ---- */
.xblog-page-head{
    margin-bottom: 28px;
}
.xblog-page-head-left .kicker{
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 4px;
}
.xblog-page-title{
    font-family: "Playfair Display", serif;
    font-size: 30px;
    margin: 0 0 6px;
}
.xblog-page-subtitle{
    color: var(--muted);
    font-size: 14px;
}

/* ---- Oldalsáv ---- */
.xblog-side-card{
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
}
.xblog-side-title{
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
}
.xblog-side-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.xblog-side-list li{
    font-size: 13px;
    color: var(--muted);
    padding-left: 24px;
    position: relative;
    line-height: 1.4;
}
.xblog-side-list li::before{
    content: "\F26A"; /* bi-check-circle-fill */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--gold);
    font-size: 14px;
}

@media (max-width: 767px){
    .xblog-sidebar-box{
        margin-bottom: 20px;
    }
}

/* ---- Kártyák ---- */
.xblog-grid-row{
    margin: 0 -10px;
}
.xblog-card-col{
    padding: 0 10px;
    margin-bottom: 24px;
}

.xblog-card-item{
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}
.xblog-card-item:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

.xblog-card-image-link{
    display: block;
}
.xblog-card-image-wrap{
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #fff;
}
.xblog-card-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.xblog-card-item:hover .xblog-card-image{
    transform: scale(1.04);
}

.xblog-card-date{
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: rgba(23,23,23,.72);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 5px 10px;
    border-radius: 999px;
    backdrop-filter: blur(2px);
}

.xblog-card-body{
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.xblog-card-title{
    font-size: 17px;
    line-height: 1.35;
    margin: 0 0 8px;
}
.xblog-card-title a{
    color: var(--ink);
}
.xblog-card-title a:hover{
    color: var(--gold-dark);
}

.xblog-card-excerpt{
    font-size: 13px;
    color: var(--muted);
    line-height: 1.55;
    margin-bottom: 16px;
    flex: 1;
}

.xblog-card-footer{
    margin-top: auto;
}
.xblog-readmore-btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold-dark);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.xblog-readmore-btn i{
    font-size: 13px;
    transition: transform .15s ease;
}
.xblog-readmore-btn:hover{
    color: var(--gold);
}
.xblog-readmore-btn:hover i{
    transform: translateX(3px);
}

/* ---- Lapozó ---- */
.xblog-pager-wrap{
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
.xblog-pager-wrap ul{
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.xblog-pager-wrap a,
.xblog-pager-wrap span{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink);
}
.xblog-pager-wrap a:hover{
    border-color: var(--gold);
    color: var(--gold-dark);
}
.xblog-pager-wrap .active a,
.xblog-pager-wrap .active span{
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}

/* ---- Üres állapot ---- */
.xblog-empty-box{
    padding: 20px 0;
}
.xblog-empty-inner{
    max-width: 380px;
    margin: 0 auto;
    text-align: center;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 44px 28px;
}
.xblog-empty-icon{
    font-size: 34px;
    color: var(--gold);
    display: block;
    margin-bottom: 14px;
}
.xblog-empty-title{
    font-family: "Playfair Display", serif;
    font-size: 19px;
    margin: 0 0 8px;
}
.xblog-empty-text{
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 20px;
}
.xblog-empty-btn{
    display: inline-block;
    background: var(--gold);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 10px;
}
.xblog-empty-btn:hover{
    background: var(--gold-dark);
}



.blog-nslider .image-box{
    position: relative;
    width: 100%;
    aspect-ratio: 600 / 338;
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
}

.blog-nslider .image-box img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   BLOG POSZTOLDAL — kiegészítés az xblog.css-hez
   ========================================================================== */

.xblog-post-row{
    margin-top: 8px;
}

/* ---- Hero kép ---- */
.xblog-post-hero{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 24px;
}
.xblog-post-hero-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 600px){
    .xblog-post-hero{
        aspect-ratio: 4 / 3;
    }
}

/* ---- Fejléc rész (dátum / cím / lead) ---- */
.xblog-post-main{
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px;
}
@media (max-width: 600px){
    .xblog-post-main{
        padding: 22px 18px;
    }
}

.xblog-post-date{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gold-dark);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}

.xblog-post-title{
    font-family: "Playfair Display", serif;
    font-size: 30px;
    line-height: 1.25;
    margin: 0 0 14px;
}
@media (max-width: 600px){
    .xblog-post-title{
        font-size: 23px;
    }
}

.xblog-post-lead{
    font-size: 16px;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

/* ---- Tag pill-ek ---- */
.xblog-post-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}
.xblog-tag-pill{
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--gold-dark);
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 6px 14px;
    transition: .15s;
}
.xblog-tag-pill:hover{
    background: var(--gold);
    color: #fff;
}
.xblog-tag-pill-side{
    font-size: 11px;
    padding: 5px 12px;
}

/* ---- Cikktörzs tipográfia (a $content admin-szerkesztett HTML-je) ---- */
.xblog-post-content{
    font-size: 15px;
    line-height: 1.75;
    color: var(--ink);
}
.xblog-post-content p{
    margin: 0 0 18px;
}
.xblog-post-content h2{
    font-family: "Playfair Display", serif;
    font-size: 22px;
    margin: 34px 0 14px;
}
.xblog-post-content h3{
    font-size: 18px;
    font-weight: 700;
    margin: 26px 0 12px;
}
.xblog-post-content ul,
.xblog-post-content ol{
    margin: 0 0 18px;
    padding-left: 22px;
}
.xblog-post-content li{
    margin-bottom: 8px;
}
.xblog-post-content img{
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 8px 0 20px;
    display: block;
}
.xblog-post-content a{
    color: var(--gold-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.xblog-post-content a:hover{
    color: var(--gold);
}
.xblog-post-content blockquote{
    margin: 0 0 20px;
    padding: 16px 20px;
    border-left: 3px solid var(--gold);
    background: var(--bg);
    border-radius: 0 12px 12px 0;
    color: var(--muted);
    font-style: italic;
}
.xblog-post-content table{
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
    font-size: 14px;
}
.xblog-post-content th,
.xblog-post-content td{
    border: 1px solid var(--line);
    padding: 8px 12px;
    text-align: left;
}
.xblog-post-content th{
    background: var(--bg);
    font-weight: 700;
}

.xblog-post-back{
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.xblog-post-back-link{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold-dark);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.xblog-post-back-link:hover{
    color: var(--gold);
}

/* ---- Sidebar: legfrissebb cikkek mini-kártyák ---- */
.xblog-post-sidebar{
    display: flex;
    flex-direction: column;
    gap: 18px;
}
@media (max-width: 767px){
    .xblog-post-sidebar{
        margin-top: 24px;
    }
}

.xblog-side-text{
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}

.xblog-side-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.xblog-latest-list{
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.xblog-latest-item{
    display: flex;
    gap: 12px;
    align-items: center;
}
.xblog-latest-image-link{
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    display: block;
}
.xblog-latest-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.xblog-latest-title{
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.xblog-latest-title:hover{
    color: var(--gold-dark);
}


/* ==========================================================================
   BEJELENTKEZÉS OLDAL — login-form-box (a .btn/#sign_in_submit kinézete
   szándékosan nincs itt szabályozva, azt a meglévő sitewide .btn adja)
   ========================================================================== */

.login-page{
    padding: 32px 0 60px;
}

.login-form-box{
    max-width: 460px;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 36px;
}
@media (max-width: 600px){
    .login-form-box{
        padding: 26px 20px;
        border-radius: 16px;
    }
}

.login-form-box__head{
    margin-bottom: 24px;
}
.login-form-box__head .kicker{
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 4px;
}
.login-form-box__head h2{
    font-family: "Playfair Display", serif;
    font-size: 26px;
    margin: 0 0 8px;
}
.login-form-box__lead{
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 14px;
}

.login-form-box__promo{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(200,163,106,.12);
    border: 1px solid var(--gold);
    color: var(--gold-dark);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 14px;
    border-radius: 999px;
}
.login-form-box__promo i{
    font-size: 13px;
}

.reg-form-box__promo{
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(200,163,106,.12);
    border: 1px solid var(--gold);
    color: var(--gold-dark);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 14px;
    margin-bottom:20px;
    border-radius: 8px;
}
.reg-form-box__promo i{
    font-size: 13px;
}

.error-message{
    font-size: 12px;
    color: #c0392b;
    margin-top: 6px;
}

/* ---- Input mezők ---- */
.login-form-box .form-group{
    margin-bottom: 16px;
}
.login-form-box .input-group{
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s;
}
.login-form-box .input-group:focus-within{
    border-color: var(--gold);
}

/* natív JS validáció állapotai (login-validation.js) */
.login-form-box .input-group.is-invalid{
    border-color: #c0392b;
}
.login-form-box .field-error{
    font-size: 12px;
    color: #c0392b;
    margin-top: 6px;
}

.login-form-box .input-group-addon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex: 0 0 44px;
    color: var(--muted);
    font-size: 16px;
    background: transparent;
    border: none;
}
.login-form-box .input-group:focus-within .input-group-addon{
    color: var(--gold-dark);
}

.login-form-box .form-control{
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 12px 12px 12px 0;
    font-size: 14px;
    color: var(--ink);
    outline: none;
}
.login-form-box .form-control::placeholder{
    color: var(--muted);
}

#togglePassword{
    cursor: pointer;
}

/* ---- Hibaüzenet doboz ---- */
.login-form-box__errors{
    background: rgba(192,57,43,.08);
    border: 1px solid rgba(192,57,43,.25);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
    text-align: left;
}
.login-form-box__errors h1{
    font-size: 14px;
    font-weight: 700;
    color: #c0392b;
    margin: 0 0 4px;
}
.login-form-box__errors p{
    font-size: 13px;
    color: #c0392b;
    margin: 0;
}

/* ---- Gomb + kiegészítő linkek sora ---- */
.login-form-box__actions{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.login-form-box .additional-links{
    list-style: none;
    margin: 0;
    padding: 0;
}
.login-form-box .additional-links a{
    font-size: 13px;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.login-form-box .additional-links a:hover{
    color: var(--gold-dark);
}

@media (max-width: 480px){
    .login-form-box__actions{
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .login-form-box__actions .btn{
        width: 100%;
    }
}




.shipping-box {

    margin: 0 auto;
}

.shipping-country-group {
    margin-bottom: 24px;
}

.shipping-country-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
}

.shipping-country-select {
    width: 100%;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 16px;
    font-size: 14px;
    background: #fff;
}

.shipping-fallback-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--gold-dark);
    margin-bottom: 20px;
}

.shipping-modes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shipping-mode {
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
}

.shipping-mode:last-child {
    border-bottom: none;
}

.shipping-mode-row {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}

.shipping-mode-row input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--gold);
    flex-shrink: 0;
    cursor: pointer;
}

.shipping-mode-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.shipping-mode-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.shipping-mode-price {
    font-size: 13.5px;
    color: var(--muted);
    font-weight: 600;
}

.shipping-mode-desc {
    margin: 10px 0 0 34px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
}


.shipping-mode-widget {
    margin: 16px 0 0 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}


.shipping-mode-widget.gls-box,
.shipping-mode-widget.posta-box {
    padding: 16px;
}

.shipping-mode-widget .if-container iframe {
    display: block;
}

.shipping-mode-widget.posta-box {
    padding: 16px;
    min-height: 600px;
}


.shipping-mode-widget.posta-box #postapontvalasztoapi {
    min-height: 600px;
}




/* ===== SZÁLLÍTÁSI / SZÁMLÁZÁS LÉPÉS — dedikált névtér ===== */
.orders-address-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius, 18px);
    box-shadow: var(--shadow, 0 4px 20px rgba(0,0,0,0.04));
    padding: 32px;
    margin-bottom: 24px;
}

.orders-address-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px;
}

.orders-address-subtitle {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 24px;
}

.orders-address-field {
    margin-bottom: 20px;
}

.orders-address-field label,
.orders-address-firm-label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 8px;
}

.orders-address-input {
    width: 100%;
    height: 48px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 16px;
    font-size: 14px;
    color: var(--ink);
    background: #fff;
    outline: 0;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

.orders-address-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(212, 20, 90, .08);
}

select.orders-address-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23171717' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    padding-right: 40px;
}

.orders-address-phone-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.orders-address-phone-cc { flex: 0 0 90px; }
.orders-address-phone-ac { flex: 0 0 80px; }
.orders-address-phone-num { flex: 1; }

.orders-address-row {
    display: flex;
    gap: 16px;
    margin-bottom: 4px;
}

.orders-address-col-6 { flex: 1; min-width: 0; }
.orders-address-col-12 { flex: 0 0 100%; }

.orders-address-radio-row {
    display: flex;
    gap: 32px;
    margin-bottom: 20px;
}

.orders-address-radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
}

.orders-address-radio-label input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--gold);
    cursor: pointer;
    margin: 0;
}

.orders-address-copy-card {
    padding: 20px 24px;
}

.orders-address-copy-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
    margin: 0;
}

.orders-address-copy-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--gold);
    cursor: pointer;
}

.orders-address-actions {
    margin-top: 8px;
}

.orders-address-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 24px;
    background: var(--ink);
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    transition: .2s;
    border:0px !important;
}

.orders-address-btn:hover {
    background: var(--gold-dark);
}

.orders-address-input.is-invalid {
    border-color: #c92a2a;
}

.orders-address-field .error-message,
.orders-address-row .error-message {
    color: #c92a2a;
    font-size: 12px;
    margin-top: 6px;
}

@media (max-width: 767px) {
    .orders-address-card { padding: 20px; }
    .orders-address-row { flex-direction: column; }
    .orders-address-phone-row { flex-wrap: wrap; }
}



/* ===== SZÁLLÍTÁS/SZÁMLÁZÁS — mentett cím kártyák, választható lista, pontátvétel ===== */
.orders-address-userbox {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
    position: relative;
}

.orders-address-userbox h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
}

.orders-address-userbox h6 {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--muted);
    margin: 0 0 4px;
}

.orders-address-mod-btn {
   /* position: absolute;*/
    top: 20px;
    right: 24px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--gold);
    border-radius: 6px;
    background: var(--gold);
    color: var(--card);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
    transition: .2s;
}

.orders-address-mod-btn:hover {
    background: var(--gold);
    color: #fff;
}

.orders-address-saved-block h6 {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    margin: 20px 0 10px;
}

.orders-address-option-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.orders-address-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    transition: .2s;
}

.orders-address-option:hover {
    border-color: var(--gold);
}

.orders-address-option--selected,
.orders-address-option.is-selected {
    border-color: var(--gold);
    background: rgba(212, 20, 90, .04);
}

.orders-address-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--gold);
    flex-shrink: 0;
}

.orders-address-option-text {
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.4;
    flex: 1;
}

.orders-address-option-subtext {
    font-size: 11.5px;
    color: var(--muted);
    text-transform: uppercase;
}

.orders-address-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 20px;
    background: transparent;
    color: var(--card);
    background: var(--gold);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    transition: .2s;
    border:0px !important;
}

.orders-address-btn-outline:hover {
    border-color: var(--gold-dark);
    color: var(--card);
}

/* Csomagponti átvétel összegzés (szallitasPontForm) */
.orders-address-point-summary {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px 20px;
}

.orders-address-point-type {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gold-dark);
    margin-bottom: 4px;
}

.orders-address-point-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}

.orders-address-point-details {
    font-size: 13.5px;
    color: var(--muted);
}





/* ===== CÍM-KÁRTYA LISTA — új CRUD elemekkel ===== */
.orders-address-userbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gold-dark);
    margin-bottom: 8px;
}

.orders-address-userbox-label i {
    font-size: 13px;
}

.orders-address-card-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.orders-address-card-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 18px;
    position: relative;
}

.orders-address-card-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 10px;
}

.orders-address-card-item-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
}

.orders-address-card-item-label i {
    color: var(--gold-dark);
    font-size: 14px;
}

.orders-address-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: rgba(46, 125, 50, .12);
    color: #2e7d32;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 999px;
    flex-shrink: 0;
}

.orders-address-set-default {

    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: rgba(255, 188, 200, 0.12);
    color: var(--gold-dark);
    border:0px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 999px;
    flex-shrink: 0;
}

.orders-address-set-default:hover {
    color: var(--gold-dark);
}

.orders-address-card-item-body {
    padding-right: 70px; /* helyet hagy az ikon-gomboknak jobbra */
}

.orders-address-card-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}

.orders-address-card-item-address,
.orders-address-card-item-country {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
}

.orders-address-card-item-actions {
    position: absolute;
    top: 40px;
    right: 16px;
    display: flex;
    gap: 6px;
}

.orders-address-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    transition: .18s;
}

.orders-address-icon-btn:hover {
    border-color: var(--gold);
    color: var(--gold-dark);
}

.orders-address-icon-btn--danger:hover {
    border-color: #c92a2a;
    color: #c92a2a;
}

.orders-address-card-item-edit {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

/* Címke input mező az űrlapokban (label mező) */
.orders-address-label-field {
    margin-bottom: 20px;
}

.orders-address-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.orders-address-panel-title {
    margin: 0;
}

.orders-address-btn-outline--small {
    height: 34px;
    padding: 0 14px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


@keyframes orders-address-card-flash {
    0% {
        background: rgba(212, 20, 90, .12);
        border-color: var(--gold);
    }
    100% {
        background: #fff;
        border-color: var(--line);
    }
}

.orders-address-card-item--flash {
    animation: orders-address-card-flash 1.2s ease-out;
}

.orders-address-panel-desc {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 18px;
}


/* ===== SAJÁT MEGERŐSÍTŐ MODAL (Swal helyett, könyvtár nélkül) ===== */
.orders-confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s ease;
}

.orders-confirm-backdrop.is-visible {
    opacity: 1;
}

.orders-confirm-box {
    background: #fff;
    border-radius: 14px;
    padding: 28px 26px;
    width: min(360px, 90vw);
    box-shadow: var(--shadow, 0 18px 45px rgba(0,0,0,.18));
    text-align: center;
    transform: translateY(12px);
    transition: transform .2s ease;
}

.orders-confirm-backdrop.is-visible .orders-confirm-box {
    transform: translateY(0);
}

.orders-confirm-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(201, 42, 42, .1);
    color: #c92a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 16px;
}

.orders-confirm-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
}

.orders-confirm-text {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 22px;
}

.orders-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.orders-confirm-btn {
    height: 42px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    transition: .18s;
}

.orders-confirm-btn:hover {
    border-color: var(--muted);
}

.orders-confirm-btn--danger {
    background: #c92a2a;
    border-color: #c92a2a;
    color: #fff;
}

.orders-confirm-btn--danger:hover {
    background: #a82323;
    border-color: #a82323;
}


.orders-address-actions--split {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}


/* ===== FIZETÉSI MÓD LÉPÉS ===== */
.orders-payment-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius, 18px);
    box-shadow: var(--shadow, 0 4px 20px rgba(0,0,0,0.04));
    padding: 32px;
}

.orders-payment-mode {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}

.orders-payment-mode:last-child {
    border-bottom: none;
}

.orders-payment-mode-row {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}

.orders-payment-mode-row input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--gold);
    flex-shrink: 0;
    cursor: pointer;
}

.orders-payment-mode-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    flex-wrap: wrap;
    gap: 6px;
}

.orders-payment-mode-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.orders-payment-mode-price {
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
}

.orders-payment-mode-desc {
    margin: 10px 0 0 34px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
}

.orders-payment-notice {
    margin: 4px 0 14px 34px;
    padding: 10px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--gold-dark);
    font-weight: 600;
}

.orders-payment-cards {
    margin: 14px 0 0 34px;
}

.orders-payment-cards img {
    max-width: 240px;
    height: auto;
    margin-bottom: 10px;
    display: block;
}

@media (max-width: 600px) {
    .orders-payment-card {
        padding: 20px;
    }

    .orders-payment-mode-desc,
    .orders-payment-notice,
    .orders-payment-cards {
        margin-left: 0;
    }

    .orders-payment-mode-main {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ===== KEDVEZMÉNY LÉPÉS ===== */
.orders-discount-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius, 18px);
    box-shadow: var(--shadow, 0 4px 20px rgba(0,0,0,0.04));
    padding: 32px;
    margin-bottom: 24px;
}

.orders-discount-option {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.orders-discount-option:last-child {
    border-bottom: none;
}

.orders-discount-option-row {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.orders-discount-option-row input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--gold);
    flex-shrink: 0;
    cursor: pointer;
}

.orders-discount-option-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.orders-discount-option-desc {
    margin: 8px 0 0 32px;
    font-size: 12.5px;
    color: var(--muted);
}

.orders-discount-login-notice {
    text-align: center;
    padding: 20px 0;
}

.orders-discount-login-notice p {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 16px;
}

/* Ajándék-termék lista */
.orders-gift-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.orders-gift-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.orders-gift-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.orders-gift-item-radio input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--gold);
    cursor: pointer;
}

.orders-gift-item-img {
    flex-shrink: 0;
    width: 64px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-soft);
    display: block;
}

.orders-gift-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.orders-gift-item-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
}

.orders-gift-item-name:hover {
    color: var(--gold-dark);
}

.orders-gift-item-price {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
}

.orders-gift-item-price-orig {
    color: var(--muted);
}

.orders-gift-item-price-orig del {
    text-decoration: line-through;
}

.orders-gift-item-price-now {
    font-weight: 700;
    color: var(--gold-dark);
}

@media (max-width: 600px) {
    .orders-discount-card {
        padding: 20px;
    }
}



/* ===== ÖSSZEGZÉS LÉPÉS — Summary blokkok (Szállítás/Számlázás/Fizetés/Kedvezmény) ===== */
.orders-summary-box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 14px;
}

.orders-summary-box:last-child {
    margin-bottom: 0;
}

.orders-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 12px;
}

.orders-summary-mode {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
}

.orders-summary-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(46, 125, 50, .12);
    color: #2e7d32;
    font-size: 12px;
    flex-shrink: 0;
}

.orders-summary-edit-btn {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border: none;
    border-radius: 6px;
    background: var(--gold);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background .18s;
    flex-shrink: 0;
}

.orders-summary-edit-btn:hover {
    background: var(--gold-dark);
    color: #fff;
}

.orders-summary-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}

.orders-summary-line {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
}


/* ===== TERMÉK-LISTA (Összegzés lépés) ===== */
.orders-summary-products {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.orders-summary-product {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.orders-summary-product:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.orders-summary-product-img {
    flex-shrink: 0;
    width: 64px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-soft);
    display: block;
}

.orders-summary-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.orders-summary-product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.orders-summary-product-gift-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gold-dark);
}

.orders-summary-product-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}

.orders-summary-product-name:hover {
    color: var(--gold-dark);
}

.orders-summary-product-variant,
.orders-summary-product-qty {
    font-size: 12px;
    color: var(--muted);
}

.orders-summary-product-total {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.orders-summary-product--gift .orders-summary-product-total {
    color: var(--gold-dark);
}

/* Összesítő */
.orders-summary-totals {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.orders-summary-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--ink);
}

.orders-summary-totals-row--discount {
    color: var(--gold-dark);
}

.orders-summary-totals-row--final {
    padding-top: 12px;
    border-top: 2px solid var(--line);
    font-size: 16px;
    font-weight: 700;
}

.orders-summary-comment {
    width: 100%;
    resize: vertical;
    min-height: 100px;
}

.shipping-mode-widget {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.shipping-mode-widget.gls-box,
.shipping-mode-widget.posta-box {
    padding: 16px;
    min-height: 600px;
}

.shipping-mode-widget.gls-box gls-dpm,
.shipping-mode-widget.gls-box #gls-container,
.shipping-mode-widget.posta-box #postapontvalasztoapi,
.shipping-mode-widget.posta-box iframe {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.shipping-mode-widget.foxpost-box .if-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.shipping-mode-widget.foxpost-box iframe {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
}


.orders-address-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius, 18px);
    box-shadow: var(--shadow, 0 4px 20px rgba(0,0,0,0.04));
    padding: 15px;
    margin-bottom: 24px;
    margin-top:10px;
}


/* ===== EMAIL CÍM MEGADÁSA LÉPÉS ===== */
.orders-email-card {
    max-width: 520px;
    margin: 40px auto;
}

.orders-address-btn--full {
    width: 100%;
    display: flex;
    justify-content: center;
}



/* ===== CHECKOUT BELÉPÉSI PONT (Login/Regisztráció/Vendég) ===== */
.orders-checkout-notice {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 22px;
    margin: 20px 0;
}

.orders-checkout-notice-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 10px;
}

.orders-checkout-notice-title i {
    color: #2e7d32;
}

.orders-checkout-notice p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 12px;
}

.orders-checkout-notice-sub {
    margin-top: 12px;
    font-weight: 600;
    color: var(--gold-dark);
}

.orders-checkout-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 0 20px 0;
}

/* Desktopon: a fejléc-gomb csak dísz, mindig nyitva, nem kattintható */
.orders-checkout-section-header {
    display: none;
}

.orders-checkout-section-body {
    display: block;
}

.orders-checkout-password-field {
    position: relative;
}

.orders-checkout-password-toggle {
    position: absolute;
    right: 14px;
    top: 38px;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
}

.orders-checkout-phone-row,
.orders-address-phone-row {
    margin-bottom: 4px;
}

.orders-checkout-consent {
    margin: 20px 0;
}

.orders-checkout-consent .orders-address-copy-label {
    align-items: flex-start;
}

.orders-checkout-consent a {
    color: var(--gold-dark);
    font-weight: 700;
    text-decoration: none;
}

.orders-checkout-form-error {
    background: #fdf2f2;
    border: 1px solid #f8b4b4;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 20px;
    color: #9b1c1c;
    text-align: center;
    font-size: 13px;
}

.orders-checkout-form-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.orders-checkout-link {
    font-size: 13px;
    color: var(--gold-dark);
    font-weight: 600;
    text-decoration: none;
}

.orders-checkout-link:hover {
    text-decoration: underline;
}

.orders-checkout-benefits {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

.orders-checkout-benefits ul {
    margin: 8px 0 14px;
    padding-left: 20px;
}

.orders-checkout-benefits li {
    margin-bottom: 4px;
}

/* ===== MOBIL: accordion viselkedés ===== */
@media (max-width: 767px) {
    .orders-checkout-section {
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
    }

    .orders-checkout-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 16px 18px;
        background: #fff;
        border: none;
        font-size: 14px;
        font-weight: 700;
        color: var(--ink);
        cursor: pointer;
        text-align: left;
    }

    .orders-checkout-section-toggle-icon {
        transition: transform .2s ease;
        color: var(--gold-dark);
    }

    .orders-checkout-section.is-open .orders-checkout-section-toggle-icon {
        transform: rotate(180deg);
    }

    .orders-checkout-section-body {
        display: none;
        padding: 0 18px 18px;
        background: #fff;
    }

    .orders-checkout-section.is-open .orders-checkout-section-body {
        display: block;
    }

    .orders-checkout-section .orders-address-card {
        box-shadow: none;
        border: none;
        padding: 0;
        background: #fff;
    }
}




.reg-form-box {
    max-width: 720px;
    background: var(--card, #fbf8f5);
    border: 1px solid var(--line, rgba(0, 0, 0, .09));
    border-radius: var(--radius, 18px);
    padding: 32px;
    margin: 20px auto;
}

.reg-form-title {
    margin: 0 0 24px;
    text-align: center;
}

.reg-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.reg-field {
    flex: 1 1 100%;
    min-width: 0;
}

.reg-col-6 {
    flex: 1 1 calc(50% - 8px);
}

.reg-col-12 {
    flex: 1 1 100%;
}

.reg-input-group {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line, rgba(0, 0, 0, .09));
    border-radius: 10px;
    overflow: hidden;
}

.reg-input-group.is-invalid {
    border: 1px solid #bf0303;
}

.reg-input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex-shrink: 0;
    color: var(--muted, #6f6a66);
}

.reg-input-icon--action {
    cursor: pointer;
}

.reg-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 12px 12px 0;
    font-size: 15px;
    color: var(--ink, #171717);
}

.reg-input.is-invalid {
    outline: none;
}

.reg-select {
    padding: 12px 8px 12px 0;
    appearance: none;
    cursor: pointer;
}

/* ===== Telefonszám sor: kód / körzet / szám egy sorban, mindegyik saját kerettel ===== */
.reg-phone-row {
    display: flex;
    gap: 8px;
}

.reg-phone-cc {
    flex: 1 1 110px;
    min-width: 90px;
}

.reg-phone-ac {
    flex: 0 0 80px;
}

.reg-phone-num {
    flex: 1 1 auto;
    min-width: 0;
}

.reg-select--bordered,
.reg-input--bordered {
    width: 100%;
    background: #fff;
    border: 1px solid var(--line, rgba(0, 0, 0, .09));
    border-radius: 10px;
    padding: 12px;
    font-size: 15px;
    color: var(--ink, #171717);
}

.reg-select--bordered {
    text-align: left;
    cursor: pointer;
    appearance: none;
}

.reg-input--bordered.is-invalid,
.reg-select--bordered.is-invalid {
    border: 1px solid #bf0303;
}

/* ===== Checkbox ===== */
.reg-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.reg-checkbox {
    margin-top: 3px;
    flex-shrink: 0;
}

.reg-checkbox-text {
    font-size: 14px;
    color: var(--ink, #171717);
}

.reg-checkbox-text a {
    color: var(--gold, #d4145a);
    text-transform: uppercase;
    text-decoration: none;
}

.reg-checkbox-text a:hover {
    text-decoration: underline;
}

/* ===== Actions ===== */
.reg-actions {
    margin-top: 24px;
    text-align: center;
}

.reg-actions .btn {
    min-width: 220px;
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--ink);
    border-radius: 8px;
    cursor:pointer;

}.reg-actions .btn:hover {
     background: var(--gold-dark);
     border-color: var(--gold-dark);
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(168, 127, 66, .2);

}

/* ===== Hibaüzenet (Validator-kompatibilis) ===== */
.error-message {
    color: #bf0303;
    font-size: 13px;
    margin-top: 4px;
}

/* ===== Mobil nézet ===== */
@media (max-width: 767px) {
    .reg-form-box {
        padding: 20px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .reg-col-6 {
        flex: 1 1 100%;
    }

    .reg-phone-row {
        flex-wrap: nowrap;
    }

    .reg-phone-cc {
        flex: 1 1 90px;
        min-width: 70px;
    }

    .reg-phone-ac {
        flex: 0 0 60px;
    }
}

/* ===== Mobil nézet ===== */
@media (max-width: 767px) {
    .reg-form-box {
        padding: 20px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .reg-col-6 {
        flex: 1 1 100%;
    }

    .reg-phone-row {
        flex-direction: column;
    }

    .reg-phone-cc,
    .reg-phone-ac,
    .reg-phone-num {
        flex: 1 1 auto;
        width: 100%;
    }
}



.success-box {
    max-width: 560px;
    margin: 48px auto;
    background: var(--card, #fbf8f5);
    border: 1px solid var(--line, rgba(0, 0, 0, .09));
    border-radius: var(--radius, 18px);
    padding: 40px 32px;
    text-align: center;
}

.success-box-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(34, 160, 90, 0.12);
    color: #22a05a;
    font-size: 36px;
    margin-bottom: 20px;
}

.success-box-title {
    margin: 0 0 12px;
    font-size: 22px;
}

.success-box-text {
    margin: 0 0 16px;
    color: var(--ink, #171717);
    font-size: 15px;
    line-height: 1.5;
}

.success-box-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line, rgba(0, 0, 0, .09));
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--muted, #6f6a66);
    margin-bottom: 24px;
}

.success-box-note i {
    color: var(--muted, #6f6a66);
    flex-shrink: 0;
}

.success-box-actions .btn {
    min-width: 220px;
}

@media (max-width: 767px) {
    .success-box {
        margin: 24px 0;
        padding: 32px 20px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

/* ===== Hiba-variáns ===== */
.success-box-icon--error {
    background: rgba(191, 3, 3, 0.1);
    color: #bf0303;
}

.success-box--error .success-box-note {
    color: #bf0303;
}


.reg-form-box h2::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: var(--gold);
    margin: 12px auto 0;
    border-radius: 2px;
}

.newpass-form-box h2::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: var(--gold);
    margin: 12px auto 0;
    border-radius: 2px;
}




.newpass-form-box {

    margin: 20px auto;
    background: var(--card, #fbf8f5);
    border: 1px solid var(--line, rgba(0, 0, 0, .09));
    border-radius: var(--radius, 18px);
    padding: 32px;
}

.newpass-form-title {
    margin: 0 0 24px;
    text-align: center;
}

.newpass-field {
    margin-bottom: 16px;
}

.newpass-input-group {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line, rgba(0, 0, 0, .09));
    border-radius: 10px;
    overflow: hidden;
}

.newpass-input-group.is-invalid {
    border: 1px solid #bf0303;
}

.newpass-input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex-shrink: 0;
    color: var(--muted, #6f6a66);
}

.newpass-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 12px 12px 0;
    font-size: 15px;
    color: var(--ink, #171717);
}

.newpass-input.is-invalid {
    outline: none;
}

.newpass-actions {
    margin-top: 24px;
    text-align: center;
}

.newpass-actions .btn {
    width: 100%;
}

.error-message {
    color: #bf0303;
    font-size: 13px;
    margin-top: 4px;
}

@media (max-width: 767px) {
    .newpass-form-box {
        padding: 20px;
        border: 1px solid var(--line, rgba(0, 0, 0, .09));
        border-radius: var(--radius, 18px);
    }
}



.orders-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 0 48px;
}

/* ===== Kártya / details-summary ===== */
.orders-order {
    background: var(--card, #fbf8f5);
    border: 1px solid var(--line, rgba(0, 0, 0, .09));
    border-radius: var(--radius, 18px);
    overflow: hidden;
}

.orders-order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
}

.orders-order-header::-webkit-details-marker {
    display: none;
}

.orders-order-main {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.orders-order-id {
    font-weight: 600;
    color: var(--ink, #171717);
}

.orders-order-label {
    color: var(--muted, #6f6a66);
    font-weight: 400;
    margin-right: 4px;
}

.orders-order-date {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted, #6f6a66);
    font-size: 14px;
}

.orders-order-total {
    font-weight: 700;
    color: var(--ink, #171717);
}

.orders-order-side {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.orders-order-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gold, #d4145a);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.orders-order-toggle i {
    transition: transform .2s ease;
}

.orders-order[open] .orders-order-toggle i {
    transform: rotate(180deg);
}

/* ===== Státusz badge ===== */
.orders-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.orders-badge--new { background: rgba(212, 20, 90, 0.1); color: var(--gold, #d4145a); }
.orders-badge--progress { background: rgba(255, 170, 0, 0.15); color: #b17600; }
.orders-badge--success { background: rgba(34, 160, 90, 0.12); color: #22a05a; }
.orders-badge--warning { background: rgba(255, 170, 0, 0.15); color: #b17600; }
.orders-badge--del { background: rgba(191, 3, 3, 0.1); color: #bf0303; }

/* ===== Body ===== */
.orders-order-body {
    padding: 0 22px 22px;
    border-top: 1px solid var(--line, rgba(0, 0, 0, .09));
}

.orders-tracking {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid var(--line, rgba(0, 0, 0, .09));
    border-radius: 10px;
    color: var(--ink, #171717);
    text-decoration: none;
    font-size: 14px;
}

.orders-tracking:hover {
    border-color: var(--gold, #d4145a);
}

.orders-tracking i:first-child {
    color: var(--gold, #d4145a);
}

.orders-tracking-external {
    font-size: 11px;
    color: var(--muted, #6f6a66);
    margin-left: 4px;
}

/* ===== Termék-sorok ===== */
.orders-order-items {
    display: flex;
    flex-direction: column;
    margin-top: 18px;
}

.orders-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, .09));
}

.orders-item:last-child {
    border-bottom: none;
}

.orders-item-image {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line, rgba(0, 0, 0, .09));
    display: flex;
    align-items: center;
    justify-content: center;
}

.orders-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.orders-item-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink, #171717);
    font-size: 15px;
}

.orders-item-qty {
    flex: 0 0 60px;
    color: var(--muted, #6f6a66);
    font-size: 14px;
    text-align: center;
}

.orders-item-price {
    flex: 0 0 100px;
    text-align: right;
    font-weight: 600;
    color: var(--ink, #171717);
}

.orders-item-action {
    flex: 0 0 auto;
}

.orders-item-rebasket {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--gold, #d4145a);
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.orders-item-rebasket:hover {
    background: var(--gold-dark, #ae0942);
}

.orders-item-oos {
    font-size: 13px;
    color: var(--muted, #6f6a66);
    white-space: nowrap;
}

/* ===== Összesítő sorok ===== */
.orders-order-summary {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line, rgba(0, 0, 0, .09));
}

.orders-order-summary-line {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
    color: var(--muted, #6f6a66);
}

.orders-order-summary-line--discount span:last-child {
    color: #22a05a;
    font-weight: 600;
}

/* ===== Üres / vendég állapotok ===== */
.orders-list-guest,
.orders-list-empty {
    max-width: 480px;
    margin: 48px auto;
    text-align: center;
    background: var(--bg-soft, #fbf8f5);
    border: 1px solid var(--line, rgba(0, 0, 0, .09));
    border-radius: var(--radius, 18px);
    padding: 40px 32px;
}

.orders-list-guest-icon,
.orders-list-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: var(--muted, #6f6a66);
    font-size: 28px;
    margin-bottom: 16px;
}

.orders-list-guest p,
.orders-list-empty p {
    color: var(--muted, #6f6a66);
    margin-bottom: 20px;
}

/* ===== Mobil ===== */
@media (max-width: 767px) {
    .orders-order-header {
        padding: 16px;
    }

    .orders-order-main {
        gap: 8px 20px;
    }

    .orders-order-body {
        padding: 0 16px 16px;
    }

    .orders-item {
        flex-wrap: wrap;
    }

    .orders-item-name {
        flex: 1 1 100%;
        order: 1;
    }

    .orders-item-price {
        flex: 0 0 auto;
        order: 2;
    }

    .orders-item-action {
        order: 3;
        margin-left: auto;
    }
}



.addrlist-card {
    background: var(--bg-soft, #fbf8f5);
    border: 1px solid var(--line, rgba(0, 0, 0, .09));
    border-radius: var(--radius, 18px);
    padding: 24px;
    margin-bottom: 20px;
}

.addrlist-card-title {
    margin: 0 0 16px;
}

.addrlist-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.addrlist-empty {
    color: var(--muted, #6f6a66);
    font-size: 14px;
    margin: 0 0 16px;
}

.addrlist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--line, rgba(0, 0, 0, .09));
    border-radius: 12px;
}

.addrlist-item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 200px;
}

.addrlist-item-main strong {
    color: var(--ink, #171717);
    font-size: 15px;
}

.addrlist-item-main span {
    color: var(--muted, #6f6a66);
    font-size: 14px;
}

.addrlist-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.addrlist-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

.addrlist-set-default {
    background: var(--gold, #d4145a);
    color: #fff;
}

.addrlist-set-default:hover {
    background: var(--gold-dark, #ae0942);
}

.addrlist-badge--default {
    background: #22a05a;
    color: #fff;
    cursor: default;
}

.addrlist-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--line, rgba(0, 0, 0, .09));
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.addrlist-btn--edit {
    color: var(--ink, #171717);
}

.addrlist-btn--edit:hover {
    border-color: var(--gold, #d4145a);
    color: var(--gold, #d4145a);
}

.addrlist-btn--delete {
    color: #bf0303;
}

.addrlist-btn--delete:hover {
    background: #bf0303;
    color: #fff;
    border-color: #bf0303;
}

.addrlist-add-btn {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid var(--ink, #171717);
    color: var(--ink, #171717);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: #fff;
}

.addrlist-add-btn:hover {
    background: var(--ink, #171717);
    color: #fff;
}

/* ===== Mobil nézet ===== */
@media (max-width: 767px) {
    .addrlist-card {
        padding: 16px;
        border-radius: 12px;
    }

    .addrlist-item {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px;
    }

    .addrlist-item-actions {
        width: 100%;
        gap: 8px;
    }

    .addrlist-badge,
    .addrlist-btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

.addrhub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 8px 0 40px;
}

.addrhub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card, #fbf8f5);
    border: 1px solid var(--line, rgba(0, 0, 0, .09));
    border-radius: var(--radius, 18px);
    padding: 28px 24px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}

.addrhub-card:hover {
    border-color: var(--gold, #d4145a);
    transform: translateY(-2px);
}

.addrhub-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(212, 20, 90, 0.1);
    color: var(--gold, #d4145a);
    font-size: 24px;
    margin-bottom: 18px;
}

.addrhub-card-title {
    margin: 0 0 8px;
    font-size: 17px;
    color: var(--ink, #171717);
}

.addrhub-card-text {
    margin: 0;
    font-size: 14px;
    color: var(--muted, #6f6a66);
    line-height: 1.5;
    flex: 1 1 auto;
}

.addrhub-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line, rgba(0, 0, 0, .09));
    color: var(--muted, #6f6a66);
    font-size: 14px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.addrhub-card:hover .addrhub-card-arrow {
    background: var(--gold, #d4145a);
    border-color: var(--gold, #d4145a);
    color: #fff;
}

/* ===== Tablet ===== */
@media (max-width: 991px) {
    .addrhub-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Mobil ===== */
@media (max-width: 767px) {
    .addrhub-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .addrhub-card {
        flex-direction: row;
        align-items: center;
        padding: 18px 56px 18px 18px;
        gap: 14px;
        position: relative;
    }

    .addrhub-card-icon {
        margin-bottom: 0;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .addrhub-card-body {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .addrhub-card-title {
        margin-bottom: 2px;
    }

    .addrhub-card-text {
        font-size: 13px;
    }

    .addrhub-card-arrow {
        position: absolute;
        top: 50%;
        right: 18px;
        transform: translateY(-50%);
        margin-left: 0;
    }
}

.orders-address-input:disabled {
    background: var(--bg, #f7f3ef);
    color: var(--muted, #6f6a66);
    cursor: not-allowed;
    border-color: var(--line, rgba(0, 0, 0, .09));
}

.orders-address-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.orders-address-card-header .orders-address-title {
    margin-bottom: 0;
}





.order-success-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 0 60px;
}

.order-success-header {
    text-align: center;
    margin-bottom: 24px;
}

.order-success-check {
    font-size: 48px;
    color: var(--gold);
    margin-bottom: 8px;
}

.order-success-header h2 {
    margin: 0 0 4px;
    color: var(--ink);
}

.order-success-subtitle {
    color: var(--muted);
    margin: 0 0 12px;
}

.order-success-order-id {
    display: inline-block;
    padding: 6px 16px;
    border-radius: var(--radius);
    background: var(--bg-soft);
    color: var(--ink);
    font-size: 14px;
}

.order-success-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.order-success-info-grid--single {
    grid-template-columns: 1fr;
}

.order-success-box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
}

.order-success-box-title {
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-success-box-title i {
    color: var(--gold);
}

.order-success-line {
    font-size: 14px;
    color: var(--ink);
    line-height: 1.6;
}

.order-success-line--muted {
    color: var(--muted);
}

.order-success-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.order-success-item-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
}

.order-success-item-thumb {
    width: 64px;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

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

.order-success-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.order-success-item-size {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.order-success-item-meta {
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    margin-top: 6px;
}

.order-success-item-subtotal {
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    white-space: nowrap;
}

.order-success-totals {
    margin-bottom: 12px;
}

.order-success-totals-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}

.order-success-totals-row:last-child {
    border-bottom: none;
}

.order-success-totals-row--final {
    font-size: 16px;
    padding-top: 12px;
}

.order-success-totals-row--final strong {
    color: var(--gold-dark);
}

.order-success-shipping-note {
    text-align: center;
    font-size: 15px;
    color: var(--gold-dark);
    font-weight: 500;
    margin: 16px 0;
}

.order-success-actions {
    text-align: center;
    margin-top: 24px;
}

.order-success-close-btn {
    display: inline-block;
    padding: 12px 40px;
    border-radius: var(--radius);
    background: var(--gold);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.order-success-close-btn:hover {
    background: var(--gold-dark);
    color: #fff;
}

@media (max-width: 767px) {
    .order-success-info-grid {
        grid-template-columns: 1fr;
    }

    .order-success-items {
        grid-template-columns: 1fr;
    }

    .order-success-item-thumb {
        width: 56px;
        height: 84px;
    }
}



.simplepay-page {
    display: flex;
    justify-content: center;
    padding: 40px 0 60px;
}

.simplepay-card {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 36px 28px;
    text-align: center;
}

.simplepay-icon {
    font-size: 40px;
    color: var(--gold);
    margin-bottom: 12px;
}

.simplepay-card h2 {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 22px;
}

.simplepay-text {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 24px;
}

.simplepay-action {
    margin-bottom: 20px;
}

/* Vendor SDK a saját HTML-jét adja (form + button.btn.btn-lg.btn-primary.btn-full),
   ezt itt scope-oltan felülírjuk, hogy illeszkedjen a design tokenekhez. */
.simplepay-action form {
    margin: 0;
}

.simplepay-action .btn.btn-lg.btn-primary.btn-full {
    display: inline-block;
    width: 100%;
    padding: 14px 24px;
    border: none;
    border-radius: var(--radius);
    background: var(--gold);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.simplepay-action .btn.btn-lg.btn-primary.btn-full:hover {
    background: var(--gold-dark);
}

.simplepay-action .btn.btn-lg.btn-primary.btn-full:active {
    transform: translateY(1px);
}

.simplepay-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 24px;
}

.simplepay-secure-note i {
    color: var(--gold);
}

.simplepay-card-logo {
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.simplepay-card-logo img {
    max-width: 220px;
    height: auto;
}

@media (max-width: 480px) {
    .simplepay-card {
        padding: 28px 18px;
        border-radius: 12px;
    }
}


.payment-status-page {
    display: flex;
    justify-content: center;
    padding: 40px 0 60px;
}

.payment-status-card {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 36px 28px;
    text-align: center;
}

.payment-status-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

/* Variánsok — jelenleg csak error, de a fail/timeout oldalakhoz
   ugyanez a kártya újrafelhasználható lesz más ikon/szöveggel */
.payment-status-card--error .payment-status-icon {
    color: #d33;
}

.payment-status-card--success .payment-status-icon {
    color: var(--gold);
}

.payment-status-card h2 {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 22px;
}

.payment-status-text {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 24px;
}

.payment-status-actions {
    margin-top: 20px;
}

.payment-status-btn {
    display: inline-block;
    width: 100%;
    padding: 14px 24px;
    border-radius: var(--radius);
    background: var(--gold);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
}

.payment-status-btn:hover {
    background: var(--gold-dark);
    color: #fff;
}

@media (max-width: 480px) {
    .payment-status-card {
        padding: 28px 18px;
        border-radius: 12px;
    }
}

.product-listing-grid.list-view .image-box a {
    aspect-ratio: 1;
    height: 100%;
}



.vB .promo-grid{display:grid;grid-template-columns:1fr;gap:14px;}
.vB .promo{
    display:block;border-radius:var(--radius);overflow:hidden;background:var(--card);
    border:1px solid var(--line);text-decoration:none;color:var(--ink);
}
.vB .promo .img{aspect-ratio:16/9;background:var(--img) center/cover;}
.vB .promo .body{padding:16px 18px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.vB .promo h3{
    font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0 0 3px;
    text-transform:none;color:var(--ink);
}
.vB .promo .count{font-size:12px;color:var(--muted);}
.vB .promo .arrow{
    width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--gold-dark);
}

.foxpost-iframe {
    display: block;
    width: 100%;
    border: 0;
    height: 600px;
}

@media (max-width: 767px) {
    .foxpost-iframe {
        height: 900px !important;
    }
}

@media (max-width: 480px) {
    .foxpost-iframe {
        height: 1100px !important;
    }
}

/* --- Promo B variáns: kép fent / szöveg lent, önálló névtér --- */
.promo-grid-b {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px 0;
}

.promo-b {
    display: block;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
}

.promo-b:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}

.promo-b-media {
    aspect-ratio: 16 / 9; /* alacsonyabb, mert nincs rajta szöveg */
    background: var(--bg);
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
}

.promo-b-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.promo-b-body {
    padding: 14px 16px 16px;
    border-radius: 0 0 var(--radius) var(--radius);
}

.promo-b-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 4px;
}

.promo-b-tagline {
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 10px;
}

.promo-b-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold-dark);
}

.promo-b-btn i {
    font-size: 13px;
    transition: transform .15s ease;
}

.promo-b:hover .promo-b-btn i {
    transform: translateX(3px);
}

/* Mobil: egy oszlop, a meglévő 767px töréspontotokkal összhangban */
@media (max-width: 767px) {
    .promo-grid-b {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .promo-b-media {
        aspect-ratio: 600 / 338; /* pontosan a mobil crop aránya */
    }
}





.account-menu-wrap {
    position: relative;
}

.account-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 200px;
    background: var(--card, #fff);
    border: 1px solid var(--line);
    border-radius: var(--radius, 12px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 50;
}

.account-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.account-panel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: calc(var(--radius, 12px) - 6px);
    font-size: 14px;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.account-panel-item:hover {
    background: var(--bg);
}

.account-panel-item i {
    font-size: 15px;
    color: var(--muted);
    width: 16px;
    text-align: center;
}

.account-panel-sep {
    height: 1px;
    background: var(--line);
    margin: 6px 4px;
}

.account-btn-trigger {
    border: none;
    background: transparent;
    cursor:pointer;
}


.account-menu-wrap {
    position: relative;
}

.account-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 200px;
    background: var(--card, #fff);
    border: 1px solid var(--line);
    border-radius: var(--radius, 12px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 50;
}

.account-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Csak valódi hover-képes eszközön (desktop egér) nyíljon hoverre is */
@media (hover: hover) and (pointer: fine) {
    .account-menu-wrap:hover .account-panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}


.faq-groups {

    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.faq-group-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 14px;
}

.faq-acc {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.faq-card-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: none;
    padding: 18px 20px;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.faq-card-q {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.faq-card-arrow {
    flex-shrink: 0;
    font-size: 16px;
    color: var(--gold-dark);
    transition: transform .2s ease;
}

.faq-card-header[aria-expanded="true"] .faq-card-arrow {
    transform: rotate(180deg);
}

.faq-card-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
}

.faq-card-header[aria-expanded="true"] + .faq-card-body {
    grid-template-rows: 1fr;
}

.faq-card-body-inner {
    overflow: hidden;
    padding: 0 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}

.faq-card-header[aria-expanded="true"] + .faq-card-body .faq-card-body-inner {
    padding-bottom: 18px;
}


.manual-search {
    max-width: 560px;
    margin: 0 auto 48px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 24px;
}

.manual-search-lead {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 18px;
    text-align: center;
}

.manual-search-row {
    display: flex;
    gap: 10px;
}

.manual-search-input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) - 8px);
    font-size: 15px;
    color: var(--ink);
    background: #fff;
}

.manual-search-input:focus {
    outline: none;
    border-color: var(--gold-dark);
}

.manual-search-btn {
    flex-shrink: 0;
    padding: 12px 20px;
    border: none;
    border-radius: calc(var(--radius) - 8px);
    background: var(--gold-dark);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}

.manual-search-btn:hover {
    background: var(--gold);
}

/* Eredménysáv — vízszintes, nem grid-kártya, mert mindig 1 találat van */
.manual-result {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) - 6px);
    padding: 14px 16px;
}

.manual-result-img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.manual-result-body {
    flex: 1;
    min-width: 0;
}

.manual-result-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 4px;
}

.manual-result-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold-dark);
    text-decoration: none;
}

.manual-result-empty {
    color: var(--muted);
    font-size: 14px;
    justify-content: center;
}

@media (max-width: 480px) {
    .manual-search-row {
        flex-direction: column;
    }

    .manual-search-btn {
        width: 100%;
    }
}

.manual-result-container:empty {
    display: none;
}

.manual-result-card {
    max-width: 760px;
    margin: 24px auto 0;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
}

.manual-result-img {
    flex: 0 0 96px;
    display: block;
}

.manual-result-img img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: calc(var(--radius) - 8px);
    display: block;
}

.manual-result-info {
    flex: 1;
    min-width: 0;
}

.manual-result-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    margin-bottom: 6px;
}

.manual-result-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.manual-result-price-now {
    font-size: 16px;
    font-weight: 700;
    color: var(--gold-dark);
}

.manual-result-price-old {
    font-size: 13px;
    color: var(--muted);
    text-decoration: line-through;
}

.manual-result-desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 10px;
}

.manual-result-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold-dark);
    text-decoration: none;
}

@media (max-width: 480px) {
    .manual-result-card {
        gap: 14px;
        padding: 14px;
    }

    .manual-result-img,
    .manual-result-img img {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
    }

    .manual-result-name {
        font-size: 14px;
    }
}


#accordian .acc-body {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows .25s ease;
}

#accordian li.active > .acc-body {
    grid-template-rows: 1fr;
}

#accordian .acc-body > ul {
    overflow: hidden;
    min-height: 0;
    margin: 0;
}



.cat-nav {
    /* saját, izolált tokenek, hogy semmilyen globális .active/.nomargin
       stílus véletlenül ne érje el ezt a fát */
}

.cat-nav-list,
.cat-nav-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cat-nav-item {
    position: relative;
}

.cat-nav-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 10px 4px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--ink);
}

.cat-nav-item--top > .cat-nav-trigger {
    font-weight: 600;
    font-size: 15px;
}

.cat-nav-item--mid > .cat-nav-trigger {
    font-size: 14px;
    padding-left: 12px;
}

.cat-nav-trigger::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
    flex-shrink: 0;
    opacity: .5;
}

.cat-nav-item.is-open > .cat-nav-trigger::after {
    transform: rotate(-135deg);
}

/* A grid-template-rows trükk: nincs JS-ből számolt pixelérték,
   minden szint önállóan, minden képkockán a saját aktuális
   tartalmához igazodik — beágyazott szinteknél sincs szinkron-hiba. */
.cat-nav-body {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows .25s ease;
}

.cat-nav-item.is-open > .cat-nav-body {
    grid-template-rows: 1fr;
}

.cat-nav-body > .cat-nav-sublist {
    overflow: hidden;
    min-height: 0;
}

.cat-nav-leaf {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 4px 8px 12px;
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
}

.cat-nav-leaf:hover {
    color: var(--gold-dark);
}

.cat-nav-leaf.is-current {
    color: var(--gold-dark);
    font-weight: 600;
}

.cat-nav-item--top.is-active-path > .cat-nav-trigger {
    color: var(--gold-dark);
}


.age-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    padding: 20px;
}

.age-verified .age-gate {
    display: none;
}

.age-gate-box {
    max-width: 380px;
    width: 100%;
    background: var(--bg-soft);
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
}

.age-gate-logo img {
    height: 48px;
    margin-bottom: 16px;
}

.age-gate-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px;
}

.age-gate-text {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 24px;
}

.age-gate-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.age-gate-btn {
    display: block;
    padding: 13px 16px;
    border-radius: calc(var(--radius) - 8px);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
}

.age-gate-btn--yes {
    background: var(--gold-dark);
    color: #fff;
}

.age-gate-btn--yes:hover {
    background: var(--gold);
}

.age-gate-btn--no {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
}


.cookie-bar {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 9998;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 20px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}

.cookie-bar[hidden] {
    display: none;
}

.cookie-bar-text p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

.cookie-bar-text a {
    color: var(--gold-dark);
}

.cookie-bar-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.cookie-bar-btn {
    padding: 9px 16px;
    border-radius: calc(var(--radius) - 10px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    white-space: nowrap;
}

.cookie-bar-btn--accept {
    background: var(--gold-dark);
    color: #fff;
}

.cookie-bar-btn--accept:hover {
    background: var(--gold);
}

.cookie-bar-btn--reject {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
}

@media (max-width: 640px) {
    .cookie-bar {
        flex-direction: column;
        align-items: stretch;
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .cookie-bar-actions {
        margin-left: 0;
    }

    .cookie-bar-btn {
        flex: 1;
    }
}

.product {
    min-width: 0;
}


.noresult-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .25s, box-shadow .25s;
    margin-bottom: 24px;
    height: calc(100% - 24px);
}

.noresult-icon-badge {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.noresult-icon-badge i {
    font-size: 30px;
    color: var(--card);
}

.noresult-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
}

.noresult-text {
    font-size: 15px;
    color: var(--muted);
    margin: 0 0 24px;
}

.noresult-btn {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) - 8px);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--card);
    background: var(--ink);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}

.noresult-btn:hover {
    background: var(--gold-dark);
    color:var(--card);
}


.product-video-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Embed videó (YouTube/Vimeo stb.) — 16:9 arányban tartva, sosem lóg ki */
.product-video-wrap .container-iframe {
    position: relative;
    width: 100%;
    max-width: 720px;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--radius) - 6px);
    overflow: hidden;
}

.product-video-wrap .container-iframe .responsive-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Natív feltöltött videó — sosem szélesebb a rendelkezésre álló helynél */
.product-video-wrap video {
    display: block;
    width: 100%;
    /*max-width: 720px;*/
    height: auto;
    border-radius: calc(var(--radius) - 6px);
    background: #000;
}



.mini-fact-video {
    background: linear-gradient(135deg, rgba(212, 20, 90, .08), rgba(174, 9, 66, .04));
    border-color: rgba(212, 20, 90, .25);
}

.mini-fact-video:hover {
    border-color: var(--gold-dark);
}

.mini-fact-video .mini-fact-value {
    color: var(--gold-dark);
    font-weight: 600;
}

.mini-fact-video .mini-fact-value i {
    font-size: 15px;
    margin-right: 2px;
}

.container-iframe {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;   /* állítsd a térkép natív arányához, pl. 3/2 vagy 4/3 is jó lehet */
    overflow: hidden;
    border-radius: var(--radius, 18px);
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}


/* ===== Login/Forgot-password submit gomb spinner (data-kt-indicator) ===== */
.login-form-box .btn[data-kt-indicator="on"] {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.login-form-box .btn[data-kt-indicator="on"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-spinner-rotate 0.6s linear infinite;
}

@keyframes login-spinner-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.login-form-box .btn:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}


.orders-address-btn.is-loading {
    opacity: 0.75;
    cursor: not-allowed;
}

.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: -2px;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}



.orders-checkout-consent-error {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
}

.error-message2 {

    color: #dc3545;
    font-size: 0.8125rem;
    line-height: 1.4;
}