.shop-card {
    max-width: 340px;
    margin: auto;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: border-color 0.18s ease-in-out, box-shadow 0.18s ease-in-out, transform 0.18s ease-in-out;
    cursor: pointer
}

.shop-card:hover {
    border-color: var(--shop-card-hover-border-soft, #9fd29f);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transform: translateY(-2px)
}

.shop-image-wrapper {
    position: relative;
    background: #fff
}

.shop-card img {
    width: 100%;
    height: 240px;
    object-fit: contain;
    padding-top: 16px
}

.shop-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    z-index: 5;
    pointer-events: none
}

.shop-overlay.show {
    opacity: 1;
    visibility: visible
}

.shop-product-card .shop-overlay,.shop-product-card .shop-overlay.show {
    pointer-events: none
}

.shop-overlay-content {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.shop-overlay-qty {
    font-size: 32px;
    font-weight: 700
}

.shop-overlay-text {
    font-size: 16px;
    font-weight: 600
}

.shop-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2
}

.shop-badge {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.12);
    display: inline-block;
    width: fit-content
}

.badge-red {
    background: #ff3b30
}

.badge-blue {
    background: #1fa3ff
}

.shop-flag-box {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    z-index: 2
}

.shop-flag-icon {
    width: 22px;
    height: 14px;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.shop-flag-ro {
    background-image: url('https://flagcdn.com/w20/ro.png')
}

.shop-flags {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2
}

.shop-flags .shop-flag-box {
    position: static;
    left: auto;
    bottom: auto
}

.shop-flag-box-bio {
    color: var(--shop-flag-badge, #2e7d32)
}

.shop-flag-icon.shop-flag-bio {
    width: 18px;
    height: 18px;
    background: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--shop-flag-badge, #2e7d32)
}

.shop-body {
    padding: 16px 16px 12px 16px;
    justify-content: space-between;
    flex-grow: 1;
    display: flex;
    flex-direction: column
}

.shop-brand {
    font-size: 14px;
    color: #888;
    margin-bottom: 2px
}

.shop-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1d1d1d;
    line-height: 1.25;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    line-clamp: 2
}

.shop-title a {
    color: inherit;
    text-decoration: none
}

:root {
    --product-item-gap: 1rem;
    --product-item-gap-mobile: 10px
}

.products-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--product-item-gap);
    margin: 0;
    padding: 0
}

.product-item {
    flex: 0 0 calc(25% - (var(--product-item-gap) * 3 / 4));
    min-width: 220px;
    max-width: 380px;
    padding: 0px;
    box-sizing: border-box;
    display: flex
}

@media (max-width: 1200px) {
    .product-item {
        flex:0 0 calc(50% - var(--product-item-gap))
    }
}

@media (max-width: 768px) {
    :root {
        --product-item-gap:var(--product-item-gap-mobile)
    }

    .product-item {
        flex: 1 1 100%;
        max-width: none
    }

    div .shop-rating {
        flex-direction: column;
        gap: 0;
        font-size: 0.8rem;
        align-items: flex-start
    }
}

.shop-rating-like {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px
}

.shop-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px
}

.shop-stars {
    display: inline-flex;
    gap: 2px
}

.shop-stars i {
    font-size: 15px;
    color: #f7b500
}

.shop-rating-value {
    font-weight: 600;
    color: #333
}

.shop-rating-count {
    color: #777
}

/* Pe cardul de produs numărul de recenzii stă pe rândul lui, sub stele
   (pe pagina de produs / modal wrapper-ul e altul, deci rămân pe un rând). */
.shop-rating-like .shop-rating {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px
}

.shop-rating-line {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.shop-like-wrapper {
    position: relative;
    display: flex;
    align-items: center
}

.shop-like-btn {
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
    color: #999
}

.shop-like-btn i {
    font-size: 18px
}

.shop-like-btn.active, .shop-like-btn.active i, .shop-like-btn.active .shop-like-count {
    color: #1fa3ff
}

.shop-like-tooltip {
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #777;
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-in-out;
    z-index: 5
}

.shop-like-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #777 transparent transparent transparent
}

.shop-like-wrapper:hover .shop-like-tooltip {
    opacity: 1;
    visibility: visible
}

.shop-old-price {
    font-size: 14px;
    color: #a0a0a0;
    margin-bottom: 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.shop-old-price::before {
    content: 'PRP:';
    font-weight: 500
}

.shop-prp-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #a0a0a0;
    line-height: 1
}

.shop-prp-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: normal;
    width: 240px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
    pointer-events: none;
    z-index: 100;
    text-decoration: none
}

.shop-prp-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: #333
}

.shop-prp-info:hover .shop-prp-tooltip {
    opacity: 1;
    visibility: visible
}

.shop-price-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-grow: 1;
    justify-content: flex-end
}

.shop-price {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--shop-price-card, #e62929)
}

.shop-btn-wrapper {
    padding: 0 16px 16px 16px
}

.shop-btn-cart {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s ease-in-out, transform 0.15s ease-in-out;
    cursor: pointer
}

.shop-btn-cart-card {
    background: var(--shop-chip-bg, #e4f6e4);
    color: var(--shop-primary-deep, #0b7e33)
}

.shop-btn-cart-card:hover {
    background: var(--shop-chip-bg-hover, #d4ebd4);
    transform: translateY(-1px)
}

.shop-btn-cart i {
    font-size: 18px;
    position: relative;
    top: -1px
}

.shop-qty-controls {
    display: none;
    width: 100%;
    margin-top: 0;
    gap: 6px
}

.shop-qty-btn {
    flex: 0 0 30%;
    border: none;
    border-radius: 10px;
    background: var(--shop-chip-bg, #e4f6e4);
    padding: 8px 0;
    color: var(--shop-primary-deep, #0b7e33);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease-in-out, transform 0.15s ease-in-out
}

.shop-qty-btn:hover {
    background: var(--shop-chip-bg-hover, #d4ebd4);
    transform: translateY(-1px)
}

.shop-qty-btn i {
    font-size: 18px
}

.shop-qty-value {
    flex: 1;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    padding: 8px 0
}

.shop-modal {
    z-index: 1075
}

.shop-modal .modal-dialog {
    max-width: 1100px
}

.shop-modal .modal-content {
    border-radius: 16px;
    border: none
}

.shop-modal .modal-header {
    padding: 16px 24px 0 24px;
    border-bottom: none
}

.shop-modal .modal-body {
    padding: 8px 24px 24px 24px
}

.shop-breadcrumb {
    font-size: 13px
}

.shop-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    color: #aaa
}

.shop-breadcrumb a {
    color: #666;
    text-decoration: none
}

.shop-breadcrumb a:hover {
    text-decoration: underline
}

.shop-modal-image-main {
    border-radius: 12px;
    border: 1px solid #ededed;
    padding: 16px;
    background: #fff;
    overflow: hidden;
    cursor: zoom-in;
    height: calc(100% - 70px)
}

.shop-modal-image-main img {
    width: 100%;
    height: 360px;
    object-fit: contain;
    transition: transform 0.15s ease-out
}

.shop-thumbs {
    margin-top: 12px;
    display: flex;
    gap: 8px
}

.shop-thumb {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    border: 1px solid #ededed;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease-in-out, background 0.15s
}

.shop-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.shop-thumb.active,.shop-thumb:hover {
    border-color: var(--shop-thumb-accent, #46b354);
    background: var(--shop-thumb-bg, #f2fbf4)
}

/* ── Media de produs: video + rotire 360 ─────────────────────────────────
   Panourile stau PESTE imaginea principală, în același slot: zona nu-și schimbă
   înălțimea la comutare, deci nu sare restul paginii. */
.shop-media-panel {
    position: absolute;
    inset: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 2
}

.shop-media-panel[hidden] {
    display: none
}

.shop-media-panel video {
    max-width: 100%;
    max-height: 100%
}

/* touch-action: pan-y — rotirea prinde doar tragerea orizontală, ca scroll-ul vertical
   al paginii să funcționeze normal peste viewer pe mobil. */
.shop-spin {
    cursor: grab;
    touch-action: pan-y;
    user-select: none
}

.shop-spin.is-dragging {
    cursor: grabbing
}

.shop-spin-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none
}

.shop-spin-progress {
    position: absolute;
    font-size: 13px;
    color: #888
}

.shop-spin.is-ready .shop-spin-progress {
    display: none
}

.shop-spin-hint {
    position: absolute;
    bottom: 8px;
    font-size: 12px;
    color: #888;
    background: rgba(255,255,255,.85);
    padding: 2px 8px;
    border-radius: 10px;
    opacity: 0;
    transition: opacity .2s
}

.shop-spin.is-ready .shop-spin-hint {
    opacity: 1
}

.shop-spin.is-dragging .shop-spin-hint {
    opacity: 0
}

/* Thumb-urile sunt <button>: fără padding/font moștenit de la user agent. */
.shop-thumb {
    padding: 0;
    font: inherit;
    position: relative;
    flex: 0 0 auto
}

.shop-thumb-badge {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 6px;
    background: rgba(0,0,0,.65);
    color: #fff
}

.shop-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0,0,0,.35)
}

.shop-modal-brand {
    font-size: 14px;
    color: #888;
    margin-bottom: 4px
}

.shop-modal-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #111
}

.shop-modal-title a {
    color: inherit;
    text-decoration: none
}

.shop-modal-title a:hover {
    text-decoration: underline
}

.shop-modal-code {
    font-size: 13px;
    color: #999;
    margin-bottom: 12px
}

.shop-modal-prices {
    margin-bottom: 12px
}

.shop-modal-old-price {
    font-size: 14px;
    color: #a0a0a0;
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.shop-modal-old-price::before {
    content: 'PRP:';
    font-weight: 500
}

.shop-modal-price {
    font-size: 26px;
    font-weight: 700;
    color: var(--shop-price-card, #e62929)
}

.shop-economy-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ffe9e3;
    color: #d43d2c;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px
}

.shop-modal-rating-like {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

.shop-btn-cart-modal {
    background: var(--shop-btn-cart, var(--shop-primary, #00a651));
    color: #fff;
    border-radius: 12px;
    padding: 12px 16px
}

.shop-btn-cart-modal:hover {
    background: var(--shop-btn-cart-hover,var(--shop-primary-dark, #008f48));
    transform: translateY(-1px)
}

.shop-advantages {
    margin-top: 14px
}

.shop-advantages-title {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px
}

.shop-advantages ul {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0
}

.shop-advantages li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    margin-bottom: 4px;
    color: #444
}

.shop-advantages li i {
    color: var(--shop-thumb-accent, #46b354)
}

.shop-tabs {
    border-bottom: 0px solid #ededed
}

.shop-tabs .nav-link {
    font-size: 14px;
    color: #555;
    border: none;
    border-radius: 999px;
    padding: 6px 14px;
    margin-right: 6px;
    background: transparent
}

.shop-tabs .nav-link:hover {
    background: #f4f8f4
}

.shop-tabs .nav-link.active {
    color: var(--shop-primary-deep, #0b7e33);
    font-weight: 600;
    background: var(--shop-chip-bg, #e4f6e4);
    border: 0px !important
}

.shop-tab-content {
    padding: 16px 0px 8px 0px;
    font-size: 14px
}

.shop-description-wrapper {
    position: relative;
    font-size: 14px;
    line-height: 1.6
}

.shop-description-content {
    overflow: hidden;
    transition: max-height 0.3s ease-out
}

.shop-description-content.collapsed {
    max-height: 16em
}

.shop-description-fade {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    top: 0;
    height: calc(100% - 55px);
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease-out
}

.shop-description-fade.visible {
    opacity: 1
}

.shop-description-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 2px solid var(--shop-green, var(--shop-primary, #00a651));
    color: var(--shop-green, var(--shop-primary, #00a651));
    font-size: 14px;
    font-weight: 500;
    margin-top: 15px;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s ease
}

.shop-description-toggle:hover {
    background: var(--shop-green, var(--shop-primary, #00a651));
    color: white
}

.shop-description-toggle i {
    font-size: 12px
}

.shop-similar-products-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #000
}

.shop-similar-card {
    border-radius: 10px;
    border: 1px solid #eee;
    padding: 8px;
    background: #fff;
    font-size: 13px;
    height: 100%
}

.shop-similar-card img {
    width: 100%;
    height: 80px;
    object-fit: contain;
    margin-bottom: 6px
}

.shop-similar-brand {
    color: #999;
    margin-bottom: 2px
}

.shop-similar-title {
    font-weight: 600;
    margin-bottom: 4px
}

.shop-similar-price {
    color: var(--shop-price-card, #e62929);
    font-weight: 700
}

.shop-category-chips {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.shop-chip {
    border-radius: 999px;
    border: 1px solid var(--shop-primary-border-subtle, #d8e3d8);
    padding: 6px 12px;
    font-size: 13px;
    background: var(--shop-primary-bg-subtle, #f8fff8);
    cursor: pointer;
    transition: background 0.15s ease-in-out, border-color 0.15s;
    text-decoration: none
}

.shop-chip:hover {
    background: var(--shop-chip-alt-bg, #e6f4e6);
    border-color: var(--shop-primary-bright, #46b354)
}

.shop-modal~.modal-backdrop,.modal-backdrop.show {
    opacity: 0.55;
    z-index: 1074
}

.skeleton {
    position: relative;
    overflow: hidden;
    background: #efefef;
    border-radius: 4px
}

.skeleton-line {
    height: 14px;
    margin: 6px 0
}

.skeleton-img {
    width: 100%;
    height: 100%;
    display: block
}

.skeleton-sm {
    height: 10px
}

.skeleton-shimmer {
    position: absolute;
    top: 0;
    left: -150%;
    height: 100%;
    width: 250%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(0);
    animation: shimmer 1.2s ease-in-out infinite;
    pointer-events: none
}

@keyframes shimmer {
    0% {
        transform: translateX(0%)
    }

    100% {
        transform: translateX(100%)
    }
}

.skeleton-w-25 {
    width: 25%
}

.skeleton-w-50 {
    width: 50%
}

.skeleton-w-75 {
    width: 75%
}

.skeleton-w-100 {
    width: 100%
}

.shop-product-card {
    background: #fff;
    border-radius: var(--shop-radius);
    border: 1px solid #ececec;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .04);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0;
    transition: all .18s ease-out;
    justify-content: space-around
}

.shop-product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,.08)
}

.shop-product-discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0.18rem 0.45rem;
    background: #ff3b30;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    border-radius: 6px;
    z-index: 2
}

.shop-product-img-wrap {
    background: #fff;
    border-bottom: 1px solid #f3f3f3;
    padding: .6rem .7rem .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.shop-product-img-wrap img {
    max-height: 115px;
    width: auto;
    max-width: 100%;
    object-fit: contain
}

.shop-product-info {
    flex: 1 1 auto;
    padding: .55rem .75rem .3rem
}

.shop-product-name {
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: .25rem;
    color: #222
}

.shop-product-name a {
    color: #222;
    text-decoration: none
}

.shop-product-price-row {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin-bottom: .05rem
}

.shop-product-price-old {
    font-size: .75rem;
    color: #999;
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.shop-product-price-old::before {
    content: 'PRP:';
    font-weight: 500
}

.shop-product-price-new {
    font-size: .96rem;
    font-weight: 700;
    color: var(--shop-price, #e30613)
}

.shop-product-unit {
    font-size: .76rem;
    color: #6c757d;
    margin-top: .05rem
}

.shop-product-card-footer {
    padding: 0 .75rem .7rem;
    display: flex;
    flex-direction: column;
    align-items: stretch
}

.shop-btn-product-add {
    width: 100%;
    border: none;
    border-radius: 10px;
    background: var(--shop-soft-bg, #e6f8ee);
    color: var(--shop-primary-bright, #00b34a);
    font-weight: 600;
    font-size: .85rem;
    padding: .55rem .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    box-shadow: none;
    transition: all .18s ease-out;
    cursor: pointer
}

.product-small-card .shop-btn-product-add {
    font-size: 0.7rem
}

.shop-btn-product-add:hover {
    background: var(--shop-chip-alt-bg, #d9f2e3);
    color: var(--shop-chip-alt-fg, #00a241)
}

.shop-btn-product-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.shop-btn-product-add-icon svg {
    width: 18px;
    height: 18px;
    display: block
}

.product-list-row {
    row-gap: 0.8rem
}

.shop-overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5
}

.shop-qty-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    gap: 0.5rem
}

.skeleton {
    position: relative;
    overflow: hidden;
    background: #efefef;
    border-radius: 4px
}

.skeleton-line {
    height: 14px;
    margin: 6px 0
}

.skeleton-img {
    width: 100%;
    height: 100%;
    display: block
}

.skeleton-sm {
    height: 10px
}

.skeleton-shimmer {
    position: absolute;
    top: 0;
    left: -150%;
    height: 100%;
    width: 250%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(0);
    animation: shimmer 1.2s ease-in-out infinite;
    pointer-events: none
}

.hided {
    display: none
}

@keyframes shimmer {
    0% {
        transform: translateX(0%)
    }

    100% {
        transform: translateX(100%)
    }
}

.skeleton-w-25 {
    width: 25%
}

.skeleton-w-50 {
    width: 50%
}

.skeleton-w-75 {
    width: 75%
}

.skeleton-w-100 {
    width: 100%
}

.product-small-card .shop-product-info {
    flex: auto;
    padding: .55rem .75rem .3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.product-small-card .shop-product-name {
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 3;
    max-height: 4.5em
}

.product-small-card:has(.shop-old-price:not([style*="none"])) .shop-product-name {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: 3em
}

.product-small-card .product-img-wrap {
    background: #fff;
    border-bottom: 1px solid #f3f3f3;
    padding: .6rem .7rem .5rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.product-small-card .shop-old-price {
    font-size: .75rem;
    color: #999;
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.product-small-card .shop-price {
    font-size: .96rem;
    font-weight: 700;
    color: var(--shop-price, #e30613);
    margin-bottom: 5px
}

.tab-pane h3 {
    font-size: 1.3rem
}

.tab-pane h4 {
    font-size: 1.1rem
}

table.usage-table {
    background: #eee;
    padding: 10px;
    display: inline-block;
    border-radius: 10px
}

table.usage-table tr td {
    padding: 6px 12px;
    border-bottom: 1px solid #ddd
}

.w-16p {
    width: calc(16.66% - (var(--product-item-gap) * 5/6))
}

.w-20p {
    width: calc(20% - (var(--product-item-gap) * 4/5))
}

.w-25p {
    width: calc(25% - (var(--product-item-gap) * 3/4))
}

.gap-3 {
    gap: var(--product-item-gap) !important
}

.description-line {
    margin-bottom: 0.5rem
}

.characteristics-ingredients-section {
    font-size: 14px;
    line-height: 1.6
}

.characteristics-section h6, .ingredients-section h6 {
    color: #333;
    font-weight: 600;
    font-size: 15px
}

.characteristics-list {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 8px 16px
}

.characteristic-item {
    font-size: 13px
}

.char-label {
    flex: 1;
    color: #333
}

.char-value {
    margin-left: 16px;
    max-width: 60%
}

.ingredients-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.ingredient-tag {
    display: inline-block;
    background: #e9ecef;
    color: #495057;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    border: 1px solid #dee2e6
}

.ingredients-text {
    color: #555;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 13px
}

@media screen and (max-width: 768px) {
    .shop-modal .modal-dialog {
        margin-top:var(--header-height,40px)
    }

    .shop-tabs-wrapper {
        position: relative
    }

    .shop-tabs-wrapper::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1));
        pointer-events: none;
        z-index: 1
    }

    .shop-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-right: 40px
    }

    .shop-tabs::-webkit-scrollbar {
        display: none
    }

    .shop-tabs .nav-link {
        white-space: nowrap
    }

    .product-row {
        display: flex;
        flex-direction: column;
        gap: 20px
    }

    .shop-modal-image-main img {
        height: 250px
    }

    .product-row>.col-12 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .shop-product-img-wrap img {
        max-height: 80px
    }

    div .shop-modal-image-main {
        height: auto
    }

    .shop-modal .modal-header .btn-close {
        width: 44px;
        height: 44px;
        padding: 0;
        position: relative;
        z-index: 10
    }

    .shop-modal .modal-header .shop-breadcrumb {
        max-width: calc(100% - 52px)
    }
}

.search-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1070;
    background: #fff;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    will-change: transform
}

.search-panel__inner {
    display: flex;
    flex-direction: column;
    height: var(--vv-height,100%);
    margin-top: var(--vv-top,0px);
    background: #fff;
    overflow: hidden
}

.search-panel.is-open {
    transform: translateX(0)
}

.search-panel__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--bs-border-color,#dee2e6);
    flex-shrink: 0;
    background: #fff
}

.search-panel__back {
    background: none;
    border: 1.5px solid var(--bs-gray-300, #d1d5db);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cart-text, #1f2937);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .2s, color .2s
}

.search-panel__back:hover {
    border-color: var(--bs-primary,var(--shop-primary, #00a651));
    color: var(--bs-primary,var(--shop-primary, #00a651))
}

.search-panel__input-wrap {
    position: relative;
    flex: 1
}

.search-panel__input {
    width: 100%;
    border: 1.5px solid var(--bs-primary, var(--shop-primary, #00a651));
    border-radius: var(--shop-radius, 18px);
    padding: 10px 42px 10px 16px;
    font-size: 16px;
    font-family: inherit;
    outline: none;
    background: #fff;
    -webkit-appearance: none;
    transition: border-color .2s, box-shadow .2s
}

.search-panel__input:focus {
    border-color: var(--bs-primary, var(--shop-primary, #00a651));
    background: #fff;
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--shop-primary, var(--shop-primary, #00a651)) 15%, transparent)
}

.search-panel__clear {
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 6px;
    color: var(--cart-muted, #6b7280);
    cursor: pointer;
    transition: color .15s;
    display: none
}

.search-panel__clear.is-visible {
    display: flex
}

.search-panel__clear:hover {
    color: var(--cart-text,#1f2937)
}

.search-panel__go {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 8px;
    color: var(--bs-primary, var(--shop-primary, #00a651));
    cursor: pointer;
    transition: color .15s
}

.search-panel__go:hover {
    color: var(--shop-primary-dark, #008043)
}

.search-panel__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none
}

.search-panel__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 0;
    padding-bottom: 0px;
    min-height: 0;
    background: #fff
}

.search-panel__body.has-results {
    overflow: hidden
}

.search-panel__section {
    margin-bottom: 24px
}

.search-panel__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 18px
}

.search-panel__section-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    text-transform: capitalize
}

.search-panel__section-action {
    font-size: 13px;
    color: var(--cart-muted, #6b7280);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color .15s
}

.search-panel__section-action:hover {
    color: var(--bs-primary,var(--shop-primary, #00a651))
}

.search-panel__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 18px
}

.search-panel__tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--bs-primary, var(--shop-primary, #00a651));
    border: none;
    border-radius: 20px;
    font-size: 12px;
    line-height: 1.3;
    color: #fff;
    cursor: pointer;
    transition: background .18s ease;
    max-width: 100%
}

.search-panel__tag:hover,.search-panel__tag:active {
    background: #333
}

.search-panel__tag svg {
    flex-shrink: 0;
    opacity: .7
}

.search-panel__slider {
    position: relative
}

.search-panel__slider-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    transition: opacity .25s ease
}

.search-panel__slider-arrow--left {
    left: 0;
    background: linear-gradient(90deg,var(--bs-light,#f7f9ff),rgba(247,249,255,0))
}

.search-panel__slider-arrow--right {
    right: 0;
    background: linear-gradient(270deg,var(--bs-light,#f7f9ff),rgba(247,249,255,0))
}

.search-panel__slider-arrow-btn {
    pointer-events: auto;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 2px solid var(--bs-primary, var(--shop-primary, #00a651));
    background: #fff;
    color: var(--bs-primary, var(--shop-primary, #00a651));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all .15s ease
}

.search-panel__slider-arrow-btn:hover {
    background: var(--bs-primary,var(--shop-primary, #00a651));
    color: #fff
}

.search-panel__slider-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 0 18px
}

.search-panel__slider-wrap::-webkit-scrollbar {
    display: none
}

.search-panel__slider-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px
}

.search-panel__slider-row .product-small-item-wrapper {
    flex: 0 0 calc(50% - 4px);
    width: calc(50% - 4px);
    min-width: calc(50% - 4px)
}

#mobileSearchResults {
    height: 100%;
    display: flex;
    flex-direction: column
}

.search-panel__results-wrap {
    padding: 0 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0
}

.search-panel__results-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0
}

.search-panel__result-item {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    flex-shrink: 0;
    transition: box-shadow .15s
}

.search-panel__result-item:hover {
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06)
}

.search-panel__result-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 10px;
    background: var(--shop-gray-soft,#fafafa);
    flex-shrink: 0
}

.search-panel__result-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.search-panel__result-brand {
    font-size: 11px;
    color: var(--cart-muted,#6b7280)
}

.search-panel__result-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--cart-text,#1f2937);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.search-panel__result-price {
    font-size: 14px;
    font-weight: 700;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px
}

.search-panel__result-price-current {
    color: var(--shop-price-card, #e62929)
}

.search-panel__result-price-unavailable {
    color: var(--bs-gray-600, #6c757d);
    font-weight: 500
}

.search-panel__result-price-old {
    font-size: 12px;
    color: #a0a0a0;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.search-panel__result-price-old::before {
    content: 'PRP:';
    font-weight: 500
}

.search-panel__footer {
    flex-shrink: 0;
    padding: 12px 18px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: #fff;
    text-align: center
}

.search-panel__footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-primary, var(--shop-primary, #00a651));
    background: color-mix(in srgb, var(--shop-primary, var(--shop-primary, #00a651)) 5%, transparent);
    border-radius: var(--shop-radius, 18px);
    text-decoration: none;
    transition: all 0.2s ease
}

.search-panel__footer a:hover {
    background: var(--shop-chip-alt-bg, #d9f2e3);
    color: var(--shop-chip-alt-fg, #00a241);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--shop-primary, var(--shop-primary, #00a651)) 30%, transparent)
}

.search-panel__empty {
    text-align: center;
    padding: 20px 20px;
    color: var(--cart-muted,#6b7280);
    font-size: 14px
}

.search-panel__spinner {
    text-align: center;
    padding: 30px
}

.search-panel__spinner::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid var(--bs-border-color, #dee2e6);
    border-top-color: var(--bs-primary, var(--shop-primary, #00a651));
    border-radius: 50%;
    animation: searchSpin .6s linear infinite
}

@keyframes searchSpin {
    to {
        transform: rotate(360deg)
    }
}

body.search-panel-open {
    overflow: hidden !important;
    pointer-events: none
}

body.search-panel-open .search-panel {
    pointer-events: auto
}

.search-panel__suggestion-header {
    font-size: 13px;
    color: var(--cart-muted, #6b7280);
    padding: 0 0 10px 0
}

#mobileMenuOffcanvas {
    --bs-offcanvas-zindex: 1065;
    --bs-offcanvas-width: 100vw
}

#mobileMenuOffcanvas~.offcanvas-backdrop {
    z-index: 1064 !important;
    opacity: 0.4 !important
}

.mm-header {
    padding: 18px 16px;
    border-bottom: 1px solid #e5e7eb;
    align-items: center;
    justify-content: center
}

.mm-header .btn-close {
    opacity: 0.7;
    position: absolute;
    right: 18px
}

.mm-bar-wrap {
    padding: 12px 20px
}

.mm-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--bs-primary, var(--shop-primary, #00a651));
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    width: 100%;
    justify-content: space-between
}

.mm-bar .mm-chevron {
    transition: transform 0.25s ease
}

.mm-bar[aria-expanded="true"] .mm-chevron {
    transform: rotate(180deg)
}

#mmCatCollapse,#mmProdCollapse {
    background: #f3f4f6
}

.mm-l1-item {
    display: flex;
    align-items: stretch;
    border-bottom: none
}

.mm-l1-link {
    flex: 1;
    padding: 12px 20px;
    font-weight: 500;
    font-size: 16px;
    color: #1f2937;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px
}

.mm-l1-link:hover,.mm-l1-link:active {
    color: var(--bs-primary,var(--shop-primary, #00a651))
}

.mm-l1-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f3f4f6;
    overflow: hidden
}

.mm-l1-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.mm-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    border: none;
    background: transparent;
    color: #6b7280;
    border-left: none;
    cursor: pointer;
    flex-shrink: 0
}

.mm-toggle .mm-chevron {
    transition: transform 0.25s ease
}

.mm-toggle[aria-expanded="true"] .mm-chevron {
    transform: rotate(180deg)
}

.mm-toggle[aria-expanded="true"] {
    color: var(--bs-primary,var(--shop-primary, #00a651))
}

.mm-l2-panel {
    background: #f9fafb
}

.mm-l2-all {
    display: block;
    padding: 10px 20px 10px 36px;
    font-size: 15px;
    font-weight: 500;
    color: var(--bs-primary,var(--shop-primary, #00a651));
    text-decoration: none;
    border-bottom: none
}

.mm-l2-all:hover {
    text-decoration: underline;
    color: var(--bs-primary,var(--shop-primary, #00a651))
}

.mm-l2-item {
    display: flex;
    align-items: stretch;
    border-bottom: none
}

.mm-l2-link {
    flex: 1;
    padding: 10px 20px 10px 36px;
    font-size: 15px;
    color: #374151;
    text-decoration: none;
    display: flex;
    align-items: center
}

.mm-l2-link:hover,.mm-l2-link:active {
    color: var(--bs-primary,var(--shop-primary, #00a651))
}

.mm-l3-panel {
    background: #f3f4f6
}

.mm-l3-link {
    display: block;
    padding: 9px 20px 9px 52px;
    font-size: 15px;
    color: #4b5563;
    text-decoration: none;
    border-bottom: none
}

.mm-l3-link:hover,.mm-l3-link:active {
    color: var(--bs-primary,var(--shop-primary, #00a651))
}

.mm-nav-links {
    border-top: none
}

.mm-nav-link {
    display: block;
    padding: 12px 20px;
    font-weight: 500;
    font-size: 16px;
    color: #1f2937;
    text-decoration: none;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    gap: 12px
}

.mm-nav-link:hover,.mm-nav-link:active {
    color: var(--bs-primary,var(--shop-primary, #00a651))
}

.mm-link-icon {
    flex-shrink: 0;
    color: #6b7280;
    transition: color .15s ease
}

.mm-nav-link:hover .mm-link-icon, .mm-nav-link:active .mm-link-icon {
    color: var(--bs-primary,var(--shop-primary, #00a651))
}

.mm-nav-link-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 20px;
    font-weight: 500;
    font-size: 16px;
    color: #1f2937;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
    text-align: left
}

.mm-nav-link-toggle .mm-chevron {
    transition: transform 0.25s ease
}

.mm-nav-link-toggle[aria-expanded="true"] .mm-chevron {
    transform: rotate(180deg)
}

.mm-info {
    border-bottom: 1px solid var(--bs-border-color)
}

.mm-info-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 20px;
    font-weight: 500;
    font-size: 16px;
    color: #1f2937;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left
}

.mm-info-toggle .mm-chevron {
    transition: transform 0.25s ease
}

.mm-info-toggle[aria-expanded="true"] .mm-chevron {
    transform: rotate(180deg)
}

.mm-info-link {
    display: block;
    padding: 10px 20px 10px 36px;
    font-size: 16px;
    color: #374151;
    text-decoration: none;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 10px 20px
}

.mm-info-link:hover,.mm-info-link:active {
    color: var(--bs-primary,var(--shop-primary, #00a651))
}

.mm-link-icon-sm {
    flex-shrink: 0;
    color: #6b7280;
    transition: color .15s ease
}

.mm-info-link:hover .mm-link-icon-sm, .mm-info-link:active .mm-link-icon-sm {
    color: var(--bs-primary,var(--shop-primary, #00a651))
}

.mm-support {
    background: #f9fafb;
    padding: 16px 20px;
    margin-top: auto
}

.mm-support-title {
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    color: #1f2937;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 0.03em
}

.mm-support-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px
}

.mm-support-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 15px;
    color: #374151
}

.mm-support-item svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: #6b7280
}

.mm-support-item strong {
    display: block;
    font-size: 12px;
    color: #6b7280;
    font-weight: 400
}

.mm-support-item a {
    color: #1f2937;
    text-decoration: none;
    font-weight: 500
}

.mm-support-item a:hover {
    color: var(--bs-primary,var(--shop-primary, #00a651))
}

.mm-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 14px
}

.mm-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    color: #6b7280;
    text-decoration: none;
    font-size: 16px
}

.mm-social a:hover {
    color: var(--bs-primary, var(--shop-primary, #00a651));
    border-color: var(--bs-primary, var(--shop-primary, #00a651))
}

@media (max-height: 700px) {
    .mm-support {
        display:none
    }
}

.mm-search-btn-wrap {
    padding: 12px 20px
}

.mm-search-btn {
    width: 100%;
    border: none;
    border-radius: 10px;
    background: var(--shop-soft-bg, #e6f8ee);
    color: var(--shop-primary-bright, #00b34a);
    font-weight: 600;
    font-size: 15px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease
}

.mm-search-btn:hover,.mm-search-btn:active {
    background: var(--shop-chip-alt-bg, #d9f2e3);
    color: var(--shop-chip-alt-fg, #00a241)
}

.mm-search-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.mm-search-btn-icon svg {
    width: 18px;
    height: 18px;
    display: block
}

#categmenu {
    --bs-container-max-width: 1415px;
    --shop-primary: var(--shop-menu-primary, #00a651);
    --shop-primary-dark: var(--shop-menu-primary-dark, #009143);
    --shop-container-width: var(--bs-container-max-width);
    --shop-menu-container-width: 960px;
    --shop-text: #111827;
    --shop-text-muted: #4b5563;
    --shop-border: #e5e7eb;
    --shop-shadow: 0 16px 40px rgba(15,23,42,0.12);
    --shop-border-radius: var(--shop-radius);
    background-color: #fff;
    font-family: 'Inter',system-ui,sans-serif;
    position: relative;
    z-index: 1000
}

#results {
    z-index: 1050
}

#categmenu .menu-container {
    max-width: var(--bs-container-max-width);
    margin: 0 auto;
    margin-bottom: 0px;
    position: relative
}

#categmenu a, #categmenu a:hover, #categmenu a:focus {
    text-decoration: none !important
}

#categmenu .nav-item {
    position: inherit
}

#categmenu .navbar-nav .nav-link {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--shop-text-muted);
    padding: 0.85rem 1.3rem;
    border-radius: 10px
}

#categmenu .nav-link-main:hover {
    color: var(--shop-text)
}

#categmenu .nav-link-main.active {
    color: var(--shop-primary);
    border-radius: 12px
}

#categmenu .products-toggle {
    border: 0px;
    background-color: var(--shop-primary);
    color: #fff !important;
    border-radius: 12px;
    padding: 0.75rem 1.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.95rem;
    font-weight: 600;
    height: 46px
}

#categmenu .products-toggle:hover, #categmenu .products-toggle:focus, #categmenu .products-toggle.active {
    background-color: var(--shop-primary-dark)
}

#categmenu .products-icon {
    position: relative;
    width: 18px;
    height: 13px;
    display: inline-block
}

#categmenu .products-icon::before, #categmenu .products-icon::after, #categmenu .products-icon span {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 3px;
    background-color: #fff
}

#categmenu .products-icon::before {
    top: 0
}

#categmenu .products-icon::after {
    bottom: 0
}

#categmenu .products-icon span {
    top: 50%;
    transform: translateY(-50%)
}

#categmenu .products-dropdown {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: var(--shop-menu-container-width);
    max-height: calc(100vh - 160px);
    background: #fff;
    border: none;
    border-radius: 0 0 var(--shop-border-radius) var(--shop-border-radius);
    padding: 0;
    margin-top: 3px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: none;
    z-index: 9999;
    display: flex;
    overflow: hidden;
    box-sizing: border-box
}

#categmenu .products-dropdown.show, #categmenu .products-dropdown.sidebar-only {
    opacity: 1;
    visibility: visible;
    transform: translateX(10px)
}

#categmenu .products-dropdown.show:not(.content-open):not(.sidebar-only) {
    width: 260px
}

#categmenu .products-dropdown.sidebar-only {
    opacity: 1;
    visibility: visible;
    transform: none;
    height: auto
}

#categmenu .products-dropdown {
    z-index: 100;
    margin-left: -10px
}

#categmenu .products-dropdown.sidebar-only .mega-menu-content {
    display: none
}

#categmenu .products-dropdown.sidebar-only {
    width: 260px;
    max-width: none;
    left: 0;
    top: 0;
    right: auto;
    box-shadow: none;
    overflow: visible;
    margin-top: 0px
}

#categmenu .products-dropdown.sidebar-only.show.content-open .mega-menu-content {
    display: flex
}

#categmenu .mega-menu-sidebar {
    width: 260px;
    background: #fff;
    padding: 0 0 0 0;
    border-radius: 0px 0 0 var(--shop-border-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
    overflow-y: overlay;
    overflow-x: hidden;
    flex-shrink: 0
}

#categmenu .sidebar-only .mega-menu-sidebar {
    padding-top: 1rem;
    padding-bottom: 1rem
}

#categmenu .sidebar-only .mega-menu-sidebar {
    border-radius: var(--shop-border-radius) 0 0 var(--shop-border-radius)
}

#categmenu .mega-menu-sidebar-scroll::-webkit-scrollbar {
    width: 5px
}

#categmenu .mega-menu-sidebar-scroll::-webkit-scrollbar-track {
    background: transparent
}

#categmenu .mega-menu-sidebar-scroll::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px
}

#categmenu .mega-menu-sidebar-scroll.is-scrolling::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18)
}

#categmenu .mega-menu-sidebar-scroll {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent
}

#categmenu .mega-menu-sidebar-scroll.is-scrolling {
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent
}

.mega-menu-container {
    width: 100%;
    display: flex
}

#categmenu .mega-menu-content {
    flex: 1;
    padding: 0;
    background: #fff;
    border-bottom-right-radius: var(--shop-radius);
    overflow: hidden;
    display: none;
    flex-direction: column;
    border-left: 1px solid var(--shop-border);
    margin-left: -1px
}

#categmenu .products-dropdown.content-open .mega-menu-content {
    display: flex
}

#categmenu .mega-menu-content-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    min-height: 0;
    display: flex;
    flex-direction: column
}

#categmenu .mega-menu-content-scroll::-webkit-scrollbar {
    width: 6px
}

#categmenu .mega-menu-content-scroll::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px
}

#categmenu .mega-menu-content-sticky {
    flex-shrink: 0;
    padding: 0.75rem 1.5rem;
    background: #fff;
    transition: box-shadow 0.25s ease;
    display: flex;
    justify-content: flex-end
}

#categmenu .mega-menu-content-sticky.has-overflow {
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.08)
}

#categmenu .sidebar-category {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--shop-text);
    border-radius: 0;
    transition: all 0.12s ease;
    border-left: 3px solid transparent;
    cursor: pointer;
    position: relative;
    margin-right: 0;
    border: 1px solid transparent;
    text-decoration: none
}

#categmenu a.sidebar-category {
    color: var(--shop-text);
    text-decoration: none
}

#categmenu a.sidebar-category:hover, #categmenu a.sidebar-category:focus, #categmenu a.sidebar-category:visited {
    text-decoration: none
}

#categmenu .sidebar-category:hover, #categmenu .sidebar-category.active {
    background: #fff;
    color: var(--shop-primary);
    border-top: 1px solid var(--shop-border);
    border-bottom: 1px solid var(--shop-border);
    margin-right: -1px;
    z-index: 10002;
    border-right: 1px solid #fff
}

#categmenu .products-dropdown:not(.sidebar-only) .sidebar-category.active:first-child {
    border-top: 1px solid transparent
}

#categmenu .sidebar-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0
}

#categmenu .sidebar-category-arrow {
    margin-left: auto;
    color: #9ca3af;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.12s ease
}

#categmenu .sidebar-category:hover .sidebar-category-arrow,#categmenu .sidebar-category.active .sidebar-category-arrow {
    color: var(--shop-primary)
}

#categmenu .subcategories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem 2rem;
    flex: 1
}

#categmenu .subcategory-column {
    min-width: 0
}

#categmenu .subcategory-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--shop-primary);
    margin-bottom: 0.75rem;
    border-bottom: 2px solid color-mix(in srgb, var(--shop-primary, var(--shop-primary, #00a651)) 10%, transparent);
    padding-bottom: 0.5rem
}

#categmenu .subcategory-list {
    list-style: none;
    padding: 0;
    margin: 0
}

#categmenu .subcategory-item {
    margin-bottom: 0.4rem
}

#categmenu .subcategory-link {
    display: block;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    color: var(--shop-text-muted);
    text-decoration: none;
    transition: color 0.15s ease
}

#categmenu .subcategory-link:hover {
    color: var(--shop-primary);
    padding-left: 0.5rem
}

#categmenu .subcategory-level-2 {
    margin-bottom: 0.4rem
}

#categmenu .subcategory-link-level-2 {
    display: block;
    padding: 0.35rem 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--shop-text);
    text-decoration: none;
    transition: color 0.12s ease;
    line-height: 1.3
}

#categmenu .subcategory-link-level-2:hover {
    color: var(--shop-primary)
}

#categmenu .subcategory-level-3-group {
    margin-left: 0;
    margin-bottom: 0.85rem;
    padding-left: 0
}

#categmenu .subcategory-level-3 {
    margin-bottom: 0.15rem
}

#categmenu .subcategory-link-level-3 {
    display: block;
    padding: 0.05rem 0;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--shop-text-muted);
    text-decoration: none;
    transition: all 0.12s ease;
    line-height: 1.4
}

#categmenu .subcategory-link-level-3:hover {
    color: var(--shop-primary);
    padding-left: 0.35rem
}

#categmenu .megamenu-products-row {
}

#categmenu .megamenu-products-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--shop-text-muted);
    margin-bottom: 0.5rem
}

#categmenu .megamenu-products-footer {
    margin-top: auto
}

#categmenu .megamenu-products-cards {
    --product-item-gap: 0.5rem
}

#categmenu .megamenu-products-row .shop-product-img-wrap img {
    height: 80px;
    object-fit: contain
}

#categmenu .megamenu-products-row .shop-product-name {
    font-size: 0.75rem
}

#categmenu .megamenu-products-row .shop-brand {
    font-size: 0.7rem
}

#categmenu .megamenu-products-row .shop-price {
    font-size: 0.8rem
}

#categmenu .megamenu-products-row .shop-old-price {
    font-size: 0.7rem
}

#categmenu .megamenu-products-row .shop-skeleton-product {
    min-height: auto
}

#categmenu .megamenu-products-row .product-small-item-wrapper {
    transition: opacity 0.3s ease-in-out
}

@media (max-width: 991px) {
    #categmenu .megamenu-products-row {
        display:none
    }
}

#categmenu .no-subcategories {
    text-align: center;
    padding: 2rem;
    color: var(--shop-text-muted)
}

#categmenu .no-subcategories p {
    margin-bottom: 1rem;
    font-size: 0.9rem
}

#categmenu .view-category-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--shop-primary);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.2s ease
}

#categmenu .view-category-btn:hover {
    background: var(--shop-primary-dark)
}

#categmenu .subcategory-section {
    display: none
}

#categmenu .subcategory-section.active {
    display: block
}

#categmenu .products-category-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--shop-text);
    border-radius: 0;
    transition: all 0.15s ease;
    border-left: 3px solid transparent
}

#categmenu .products-category-link:hover {
    background-color: #f8fafc;
    color: var(--shop-primary);
    border-left-color: var(--shop-primary);
    transform: translateX(2px)
}

#categmenu .shop-category-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--shop-text);
    border-radius: 0;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
    background: linear-gradient(90deg, color-mix(in srgb, var(--shop-primary, var(--shop-primary, #00a651)) 5%, transparent) 0%, transparent 100%)
}

#categmenu .shop-category-link:hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--shop-primary, var(--shop-primary, #00a651)) 10%, transparent) 0%, color-mix(in srgb, var(--shop-primary, var(--shop-primary, #00a651)) 5%, transparent) 100%);
    color: var(--shop-primary-dark);
    border-left-color: var(--shop-primary);
    transform: translateX(2px)
}

#categmenu .products-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0
}

#categmenu .products-category-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: grayscale(20%);
    transition: filter 0.2s ease
}

#categmenu .products-category-link:hover .products-category-icon img, #categmenu .shop-category-link:hover .products-category-icon img {
    filter: grayscale(0%)
}

#categmenu .shop-icon {
    color: var(--shop-primary);
    font-size: 16px
}

#categmenu .products-category-text {
    flex: 1;
    font-weight: 500
}

#categmenu .dropdown-separator {
    height: 1px;
    background: var(--shop-border);
    margin: 0.5rem 1.25rem;
    opacity: 0.8
}

#categmenu .products-dropdown-footer {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--shop-border)
}

#categmenu .products-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--shop-primary);
    background: color-mix(in srgb, var(--shop-primary, var(--shop-primary, #00a651)) 5%, transparent);
    transition: all 0.2s ease;
    border-radius: var(--shop-border-radius)
}

#categmenu .products-view-all:hover {
    background: var(--shop-chip-alt-bg, #d9f2e3);
    color: var(--shop-chip-alt-fg, #00a241);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--shop-primary, var(--shop-primary, #00a651)) 30%, transparent)
}

@media (max-width: 991px) {
    #categmenu .products-toggle {
        width:100%;
        justify-content: center
    }

    #categmenu .products-dropdown {
        width: 100%;
        left: 0;
        right: 0
    }
}

@media (max-width: 576px) {
    #categmenu .products-dropdown {
        margin-top:5px;
        border-radius: 12px;
        width: 95vw
    }

    #categmenu .products-category-link, #categmenu .shop-category-link {
        padding: 0.6rem 1rem;
        font-size: 0.85rem
    }
}

a#dropdownProducts {
}

#categmenu .products-toggle.open-effect {
    background-color: #fff;
    color: #333 !important;
    border-bottom: none;
    margin-bottom: 0px;
    position: relative;
    z-index: 110
}

#categmenu .products-toggle.open-effect a span {
    color: #333
}

#categmenu .products-toggle.open-effect span {
    color: #333 !important
}

#categmenu .products-toggle.open-effect:after {
    content: " ";
    position: absolute;
    background: #fff;
    height: calc(100% + 15px);
    width: calc(100% + 2px);
    top: 0px;
    left: -1px;
    border: 1px solid #f4f4f4;
    border-radius: 10px 10px 0 0;
    z-index: -1;
    border-bottom: none
}

#categmenu .products-toggle.open-effect .products-icon::before, #categmenu .products-toggle.open-effect .products-icon::after, #categmenu .products-toggle.open-effect .products-icon span {
    background-color: #333 !important
}

.menu-open div#categmenu .products-dropdown {
}

.stickyheader-shadow {
    width: 100%;
    position: absolute;
    height: 0px;
    z-index: 1
}

.home-categmenu-container {
    position: relative;
    z-index: 1000;
    padding-left: 0px
}

.home-categmenu-container #categmenu .mega-menu-sidebar {
    width: 100%
}

.home-categmenu-container #categmenu .products-dropdown.sidebar-only {
    padding: 0px;
    width: 100%;
    margin-left: 0px;
    height: auto;
    max-height: none
}

.home-categmenu-container #categmenu .mega-menu-sidebar {
    overflow: visible;
    max-height: none
}

.home-categmenu-container #categmenu {
    padding: 0px
}

.home-categmenu-container #categmenu .menu-container {
    padding: 0px
}

#categmenu .products-dropdown.sidebar-only {
    overflow: visible;
    position: relative
}

#categmenu .products-dropdown.sidebar-only.show {
    width: 100%;
    overflow: visible
}

#categmenu .products-dropdown.sidebar-only.show.content-open .mega-menu-content {
    display: flex;
    position: absolute;
    left: 100%;
    top: 0;
    width: calc(var(--shop-menu-container-width) - 260px);
    max-width: calc(100vw - 300px);
    height: 100%;
    min-height: 400px;
    max-height: 800px;
    background: #fff;
    border-radius: 0 var(--shop-border-radius) var(--shop-border-radius) 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    margin-left: -1px;
    border-left: 1px solid var(--shop-border)
}

#categmenu .products-dropdown.sidebar-only.show .mega-menu-sidebar {
    border-radius: var(--shop-border-radius) 0 0 var(--shop-border-radius)
}

.home-categmenu-container #categmenu .products-dropdown.sidebar-only, .home-categmenu-container #categmenu {
    border-radius: var(--shop-border-radius)
}

.home-categmenu-container #categmenu .mega-menu-sidebar {
    border-top-right-radius: var(--shop-border-radius);
    border-bottom-right-radius: var(--shop-border-radius)
}

@media (max-width: 1200px) {
    #categmenu .products-dropdown.sidebar-only.show .mega-menu-content {
        width:700px;
        max-width: calc(100vw - 280px)
    }
}

@media (max-width: 991px) {
    #categmenu .products-dropdown.sidebar-only.show .mega-menu-content {
        width:500px;
        max-width: calc(100vw - 280px)
    }
}

@media (max-width: 768px) {
    #categmenu .products-dropdown.sidebar-only.show {
        width:100%
    }

    #categmenu .products-dropdown.sidebar-only.show .mega-menu-content {
        position: relative;
        left: 0;
        width: 100%;
        max-width: 100%;
        box-shadow: none;
        border-radius: 0 0 12px 12px;
        margin-left: 0;
        border-left: none
    }
}

:root {
    --shop-header-height-large: 150px;
    --shop-header-height-small: 75px;
    --shop-header-transition: 220ms
}

#navbarTop.header-shrink, body.header-shrink #navbarTop,#categmenu.header-shrink {
    height: var(--shop-header-height-small);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08)
}

#navbarTop.header-shrink .products-toggle, body.header-shrink #navbarTop .products-toggle {
    padding: 0.4rem 0.8rem !important;
    height: 36px;
    font-size: 0.88rem
}

@media (max-width: 768px) {
    :root {
        --shop-header-height-large:120px;
        --shop-header-height-small: 64px
    }
}

.photo-gallery-container {
    aspect-ratio: 1200 / 459;
    padding: 0;
    border-radius: 6px;
    position: relative;
    overflow: hidden
}

.photo-gallery-container picture,.photo-gallery-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px
}

.photo-gallery-link {
    display: block;
    width: 100%;
    text-decoration: none
}

@media (max-width: 767.98px) {
    div#carouselBlog .carousel-item {
        padding:0 !important
    }
}

.slider-nav-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 55px;
    display: flex;
    align-items: center;
    z-index: 2;
    text-decoration: none
}

.slider-nav-arrow-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 80px;
    border-radius: 999px;
    box-shadow: 0 0 20px rgba(0,0,0,.12);
    background: linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,.9));
    cursor: pointer
}

.slider-nav-btn {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 2px solid var(--shop-primary-bright, #00b34a);
    background: #fff;
    color: var(--shop-primary-bright, #00b34a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: bold;
    transition: all .15s ease
}

.slider-nav-arrow:hover .slider-nav-btn {
    background: var(--shop-primary-bright, #00b34a);
    color: #fff
}

.slider-nav-arrow.carousel-control-prev {
    left: 5px;
    justify-content: flex-start
}

.slider-nav-arrow.carousel-control-next {
    right: 5px;
    justify-content: flex-end
}

@media (max-width: 768px) {
    .slider-nav-arrow {
        width:40px
    }

    .slider-nav-arrow-inner {
        width: 32px;
        height: 60px
    }

    .slider-nav-btn {
        width: 24px;
        height: 24px;
        font-size: 13px
    }
}

#carouselBlog .carousel-indicators {
    margin-bottom: .5rem;
    z-index: 3
}

#carouselBlog .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 2px solid #fff;
    background-color: rgba(255, 255, 255, .55);
    opacity: 1;
    box-shadow: 0 0 6px rgba(0, 0, 0, .25);
    transition: background-color .15s ease;
    margin-left: 1px;
    margin-right: 1px
}

#carouselBlog .carousel-indicators .active {
    background-color: var(--shop-primary-bright, #00b34a);
    border-color: #fff
}

@media (max-width: 767.98px) {
    #carouselBlog {
        touch-action:pan-y
    }
}

.hp-mob-section {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw)
}

.hp-mob-section::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 8px;
    width: 26px;
    pointer-events: none;
    background: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0.92))
}

.hp-mob-cats-scroll {
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 8px 12px;
    scrollbar-width: none
}

.hp-mob-cats-scroll::-webkit-scrollbar {
    display: none
}

.hp-mob-cat-box {
    flex: 0 0 28vw;
    scroll-snap-align: start;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.18s ease-in-out, transform 0.18s ease-in-out
}

.hp-mob-cat-box:active,.hp-mob-cat-box:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit
}

.hp-mob-cat-box img {
    width: 100%;
    height: 62px;
    object-fit: contain;
    padding: 6px;
    background: #fff
}

.hp-mob-cat-placeholder {
    width: 100%;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    color: #ddd
}

.hp-mob-cat-info {
    padding: 5px 5px 8px;
    background: #fff
}

.hp-mob-cat-name {
    font-size: 11px;
    font-weight: 500;
    color: #333;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.hp-mob-cat-count {
    font-size: 10px;
    color: #888;
    margin-top: 2px
}

@media (max-width: 767.98px) {
    .products-ssr-mobile-2col>* {
    }
}

.hero-box {
    background: #fff;
    border-radius: 6px;
    padding: 24px 32px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    max-width: var(--bs-container-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0,2fr);
    align-items: center;
    column-gap: 32px
}

.hero-left {
    display: flex;
    align-items: center;
    gap: 28px;
    min-width: 0
}

.hero-left-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--shop-soft-bg, #e6f8ee);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.hero-left-icon img {
    height: 32px;
    width: auto
}

.hero-text-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0
}

.hero-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px
}

.hero-sub {
    font-size: 0.96rem;
    color: #666;
    line-height: 1.4
}

.hero-right {
    font-family: "Dancing Script",cursive;
    font-size: 2.7rem;
    color: #c2c2c2;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
    padding-left: 28px;
    border-left: 1px solid #f1f1f1
}

@media (max-width: 992px) {
    .hero-box {
        grid-template-columns:1fr;
        row-gap: 18px;
        text-align: center;
        padding: 18px
    }

    .hero-left {
        justify-content: center
    }

    .hero-right {
        border-left: none;
        padding-left: 0;
        text-align: center;
        font-size: 2.2rem;
        white-space: normal
    }

    .hero-sub {
        padding: 0;
        font-size: 0.74rem
    }

    .hero-title {
        text-align: left;
        font-size: 0.91rem
    }
}

.benefits-box {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    padding: 28px 25px;
    max-width: var(--bs-container-max-width)
}

.benefits-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    flex-wrap: nowrap
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 180px
}

.benefit-item i {
    font-size: 40px;
    color: var(--shop-primary-soft, #7bcf85)
}

.benefit-text {
    font-size: 14px;
    color: #444;
    line-height: 1.35
}

.benefit-text .dbr {
    display: block
}

@media(max-width: 992px) {
    .benefits-row {
        flex-wrap:wrap;
        text-align: center
    }

    .benefit-item {
        justify-content: center
    }

    .benefit-item {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 30px;
        padding-left: calc(var(--shop-padding-y) + 12px) !important
    }

    .benefit-text {
        text-align: left
    }

    .benefit-text .dbr {
        display: none
    }
}

.hp-section-hero-categories {
    max-width: var(--bs-container-max-width)
}

.hp-section-hero-categories h2 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 26px
}

.hp-hero-grid {
    display: grid;
    grid-template-columns: 2fr 1.3fr;
    grid-template-rows: 210px 210px;
    gap: var(--product-item-gap)
}

.hp-hero-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)
}

.hp-hero-card picture, .hp-hero-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease
}

.hp-hero-card:hover img {
    transform: scale(1.03)
}

.hp-hero-btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background-color: var(--shop-hero-btn-bg, rgba(122, 203, 90, 0.92));
    color: #fff;
    padding: 9px 22px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: 2px solid #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    gap: 8px
}

.hp-hero-btn:hover {
    background-color: var(--shop-hero-btn-bg-hover, rgba(110, 185, 80, 0.95));
    text-decoration: none
}

.hp-hero-card--big {
    grid-row: span 2
}

@media(max-width: 992px) {
    .hp-hero-grid {
        grid-template-columns:1fr;
        grid-template-rows: auto
    }

    .hp-hero-card--big {
        grid-row: auto;
        height: 210px
    }
}

.shop-section-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: left
}

.shop-installments-box {
    border: 1px solid #e2e5ea;
    border-radius: 20px;
    padding: 35px 35px;
    background-color: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 35px;
    transition: all 0.25s ease
}

.shop-installments-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    border-color: var(--shop-card-hover-border, #7ec25a)
}

.shop-installments-image {
    width: 260px;
    height: 180px;
    object-fit: cover;
    border-radius: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06)
}

.shop-installments-content h3, .shop-installments-content .h3  {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.8rem
}

.shop-installments-content p {
    font-size: 1rem;
    line-height: 1.65;
    color: #555;
    margin-bottom: 0.9rem
}

.shop-installments-content ul {
    padding-left: 1.2rem;
    margin: 0;
    font-size: 0.97rem;
    color: #555;
    line-height: 1.55
}

.shop-installments-content ul li+li {
    margin-top: 0.3rem
}

@media (max-width: 767.98px) {
    .shop-installments-box {
        flex-direction:column;
        text-align: center;
        padding: 26px 20px
    }

    .shop-installments-image {
        width: 100%;
        height: auto;
        max-height: 260px
    }

    .shop-section-title {
        text-align: center;
        font-size: 1.6rem
    }
}

.advantages-section {
}

.advantages-section-title {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 2rem
}

.advantages-row {
    row-gap: var(--bs-gutter-x)
}

.advantage-card {
    height: 100%;
    border: 1px solid #e2e5ea;
    border-radius: 14px;
    padding: 32px 24px;
    text-align: center;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02)
}

.advantage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border-color: var(--shop-card-hover-border, #7ec25a)
}

.advantage-icon {
    margin-bottom: 18px;
    font-size: 3rem;
    color: var(--shop-card-hover-border, #7ec25a)
}

.advantage-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px
}

.advantage-text {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin: 0
}

@media (max-width: 575.98px) {
    .advantage-card {
        padding:24px 18px
    }
}

.hp-section-discover-bio {
    max-width: var(--bs-container-max-width)
}

.hp-section-discover-bio h2 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 28px
}

.hp-discover-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(1 * var(--shop-padding-x))
}

.hp-discover-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    height: 380px
}

.hp-discover-card picture, .hp-discover-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease
}

.hp-discover-card:hover img {
    transform: scale(1.03)
}

.hp-discover-btn {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    background-color: var(--shop-primary-dark, #008000);
    color: #fff;
    padding: 10px 28px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    min-width: 72%;
    text-align: center;
    border: none;
    box-shadow: 0 3px 10px rgba(0,0,0,0.30);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px
}

.hp-discover-btn:hover {
    background-color: var(--shop-primary-dark, #006b00);
    text-decoration: none;
    color: #fff
}

.hp-discover-btn i {
    font-size: 1.1rem
}

@media (max-width: 992px) {
    .hp-discover-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .hp-discover-card {
        height: 300px
    }
}

@media (max-width: 576px) {
    .hp-discover-grid {
        grid-template-columns:1fr
    }
}

.shop-info-box {
    border: 1px solid #e2e5ea;
    border-radius: 16px;
    padding: 40px 35px;
    background-color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease
}

.shop-info-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    border-color: var(--shop-card-hover-border, #7ec25a)
}

.shop-info-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1.4rem
}

.shop-info-text {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #555;
    margin-bottom: 1.5rem
}

@media (max-width: 575.98px) {
    .shop-info-box {
        padding:28px 22px
    }

    .shop-info-title {
        font-size: 1.5rem
    }
}

.page-benefits-newsletter {
    background-color: #fff;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    padding: 35px 0
}

.page-benefits-row {
    text-align: center;
    margin-bottom: 22px;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.shop-benefit-item {
    padding-top: 10px;
    padding-bottom: 10px;
    width: auto
}

.shop-benefit-icon {
    font-size: 2.6rem;
    color: #000;
    margin-bottom: 12px
}

.shop-benefit-title {
    font-size: 1rem;
    font-weight: 500;
    color: #111;
    margin: 0
}

.shop-benefits-divider {
    border-top: 1px solid #e6e6e6;
    margin: 16px 0 26px
}

.page-benefits-divider {
    border-top: 1px solid #e6e6e6;
    margin: 16px 0 26px
}

.bio-news-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    text-align: center
}

.bio-plane-icon {
    font-size: 2.1rem;
    color: #111
}

.bio-news-text {
    font-size: 1rem;
    color: #333;
    white-space: nowrap
}

.bio-news-form {
    display: flex;
    align-items: center
}

.bio-news-form input[type="email"] {
    border: 1px solid #cfcfcf;
    border-right: none;
    border-radius: 6px 0 0 6px;
    min-width: 240px;
    font-size: 0.95rem;
    padding: 0.55rem 0.75rem;
    height: 42px
}

.bio-news-form button {
    border: 1px solid var(--shop-card-hover-border, #7ec25a);
    background-color: var(--shop-card-hover-border, #7ec25a);
    color: #fff;
    border-radius: 0 6px 6px 0;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    padding: 0 1.4rem;
    height: 42px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-weight: 600;
    text-transform: uppercase
}

.bio-news-form button:hover {
    background-color: var(--shop-primary-mid, #6ab548);
    border-color: var(--shop-primary-mid, #6ab548)
}

@media (max-width: 768px) {
    .bio-news-text {
        white-space:normal
    }

    .page-benefits-row {
        flex-direction: column;
        gap: calc(.5 * var(--bs-gutter-x));
        padding: 0px calc(.5 * var(--bs-gutter-x))
    }

    .page-benefits-newsletter {
        background-color: transparent;
        border: none;
        padding: var(--bs-gutter-x)
    }

    .shop-benefit-item {
        background-color: #fff;
        border-radius: var(--shop-radius);
        box-shadow: var(--shop-shadow);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        gap: 30px;
        padding-left: calc(var(--shop-padding-y) + 12px) !important
    }

    .shop-benefit-icon {
        margin-bottom: 0
    }
}

.footer-columns {
    max-width: min(calc(100% - (var(--bs-gutter-x) * 2)), 1415px);
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 32px
}

.footer-column p.text-uppercase {
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem
}

.footer-column a {
    font-size: 0.9rem
}

.cont_footer_contact_info ul.box-content li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 6px
}

.footer_contact_info_image {
    width: 15px;
    margin-right: 0px;
    font-size: 16px;
    color: #555;
    text-align: right
}

.footer_contact_info_content {
    font-size: 0.9rem
}

.footer-contact-item {
    display: flex;
    gap: 10px;
    align-items: flex-start
}

.container_footer_info_social_media {
    display: flex;
    gap: 8px;
    margin-top: 6px
}

.container_footer_info_social_media .itm a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 3px
}

@media (max-width: 767.98px) {
    .footer-columns {
        flex-direction:column;
        gap: var(--bs-gutter-y)
    }

    .footer-column {
        flex-basis: 100%;
        text-align: center
    }

    .footer-contact-item {
        flex-direction: column;
        align-items: center;
        text-align: center
    }
}

.support-card {
    max-width: min(calc(100% - var(--bs-gutter-x)),800px);
    padding: 0px
}

.footer-title {
    font-weight: 800;
    letter-spacing: .4px;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 12px
}

.support-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 22px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb
}

.support-col {
    display: grid;
    gap: 10px;
    align-content: start
}

.support-card .item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: center;
    min-height: 40px
}

.support-card .ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--box);
    display: grid;
    place-items: center
}

.support-card .ico svg {
    width: 18px;
    height: 18px;
    fill: #111827;
    opacity: .85
}

.support-card .txt .label {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.1
}

.support-card .txt .value {
    font-size: 13px;
    color: var(--muted);
    margin-top: 2px
}

.support-card .txt a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px dashed #c7c9d1
}

.support-card .txt a:hover {
    color: var(--text);
    border-bottom-color: var(--text)
}

.support-bottom {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    margin-top: 12px
}

.support-card .social {
    display: flex;
    gap: 8px
}

.support-card .social-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    display: grid;
    place-items: center;
    text-decoration: none;
    color: #111827;
    font-weight: 700;
    line-height: 1
}

.support-card .social-btn:hover {
    background: var(--box)
}

.support-card .actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end
}

.support-card .anpc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--soft);
    border: 1px solid #dbe2ff;
    white-space: nowrap
}

.support-card .anpc-badge {
    font-weight: 800;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid #dbe2ff
}

.support-card .anpc-text {
    font-weight: 800;
    font-size: 12px;
    color: #1d4ed8
}

.support-card .pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0px;
    border: 2px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    color: #111827;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .2px;
    background: #fff
}

.support-card .pill-sub {
    font-weight: 800;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--border)
}

.support-card .pill:hover {
    background: #f8fafc
}

.footer-column.w-md-100p {
    width: 100%
}

.footer-column.w-md-50p {
    width: 50%
}

.footer-column.w-md-25p {
    width: 25%
}

@media (max-width: 720px) {
    .footer-column.w-100p {
        width:100%
    }

    .footer-column.w-50p {
        width: 50%
    }

    .footer-column.w-25p {
        width: 25%
    }

    .support-grid {
    }

    .support-bottom {
        grid-template-columns: 1fr;
        justify-items: center
    }

    .support-card .actions {
        grid-template-columns: 1fr
    }

    .support-card .pill {
        justify-content: space-between
    }
}

.cont_foote_img {
    background-color: #fff;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    padding: 22px 0 22px
}

.footer-cookie-line {
    text-align: center;
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 0px;
    padding-bottom: 0px;
    line-height: 1.5
}

.footer-logos-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 26px
}

.footer-logos-group {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap
}

.footer-logo {
    height: 50px;
    width: auto;
    object-fit: contain;
    display: block
}

.footer-logo-comodo {
    height: 46px
}

.footer-rate-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    white-space: nowrap
}

.footer-rate-text {
    font-size: 0.95rem;
    color: #333;
    white-space: nowrap
}

.footer-rate-cards {
    height: 57px;
    width: auto;
    object-fit: contain
}

.footer-bottom {
    background-color: #fff;
    border-top: 1px solid #e6e6e6;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    padding: 12px 0 14px
}

.footer-cookie-line {
    cursor: pointer;
    transition: all 0.3s ease
}

.cookie-settings-btn {
    background: none;
    border: none;
    color: var(--bs-primary, var(--shop-primary, #00a651));
    padding: 0 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500
}

.cookie-settings-btn:hover {
    color: var(--shop-primary-dark, #008a3d);
    text-decoration: underline
}

@media (max-width: 767.98px) {
    .footer-logos-row {
        justify-content:center
    }

    .footer-rate-group {
        margin-left: 0;
        justify-content: center;
        flex-direction: column
    }
}

#cookieConsentModal {
    z-index: 1075
}

.cc-subtitle {
    color: var(--shop-primary, #00a651);
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 18px
}

.cc-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: #fff;
    transition: box-shadow 0.2s ease
}

.cc-category:hover {
    box-shadow: 0 1px 6px rgba(0,0,0,0.07)
}

.cc-category--locked {
    background: #f8f9fa;
    border-color: #ced4da
}

.cc-category__info {
    flex: 1;
    min-width: 0
}

.cc-category__title {
    font-weight: 600;
    font-size: 0.93rem;
    margin-bottom: 3px
}

.cc-category__desc {
    font-size: 0.82rem;
    color: #6c757d;
    line-height: 1.45
}

.cc-category__check {
    flex-shrink: 0;
    display: flex;
    align-items: center
}

.cc-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease
}

.cc-checkbox:checked {
    background-color: var(--shop-primary, #00a651);
    border-color: var(--shop-primary, #00a651)
}

.cc-checkbox:checked::after {
    content: '✓';
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.cc-checkbox:disabled {
    opacity: 0.7;
    cursor: default
}

.cc-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-primary, var(--shop-primary, #00a651)) 25%, transparent)
}

.cc-policy-link {
    margin-top: 16px;
    margin-bottom: 0;
    font-size: 0.88rem
}

.cc-policy-link a {
    color: var(--shop-primary, #00a651);
    text-decoration: none
}

.cc-policy-link a:hover {
    text-decoration: underline
}

.cc-btn-reject {
    border: 1px solid #ced4da;
    background: #fff;
    color: #333;
    font-weight: 500;
    padding: 8px 24px;
    border-radius: 6px;
    font-size: 0.93rem;
    transition: all 0.2s ease
}

.cc-btn-reject:hover {
    background: #f5f5f5;
    border-color: #adb5bd
}

.cc-btn-accept {
    background: var(--shop-primary, #00a651);
    border: 1px solid var(--shop-primary, #00a651);
    color: #fff;
    font-weight: 600;
    padding: 8px 28px;
    border-radius: 6px;
    font-size: 0.93rem;
    transition: all 0.2s ease
}

.cc-btn-accept:hover {
    background: var(--shop-primary-dark, #008a3d);
    border-color: var(--shop-primary-dark, #008a3d)
}

.wa-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    font-family: inherit;
    transition: bottom .35s ease
}

@media (min-width: 993px) {
    body.back-top-visible .wa-float {
        bottom:140px
    }
}

.wa-float .wa-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--shop-whatsapp, #25d366);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: transform .15s ease, box-shadow .15s ease;
    text-decoration: none;
    isolation: isolate
}

.wa-float .wa-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .24)
}

.wa-float .wa-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--shop-whatsapp, #25d366);
    opacity: .45;
    animation: wa-pulse 1.8s ease-out infinite;
    z-index: -1
}

.wa-float .wa-bubble-wrap {
    position: relative;
    display: inline-block;
    animation: wa-fade-in .4s ease both;
    animation-delay: 1.2s;
    opacity: 0
}

.wa-float .wa-bubble {
    position: relative;
    display: block;
    max-width: 240px;
    padding: 10px 14px 12px;
    background: #fff;
    color: #222;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.35
}

.wa-float .wa-bubble:hover {
    color: #222
}

.wa-float .wa-bubble::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: 3px 3px 4px -2px rgba(0, 0, 0, .08)
}

.wa-float .wa-bubble-title {
    display: inline;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--shop-whatsapp-dark, #075E54)
}

.wa-float .wa-bubble-text {
    display: inline;
    color: #444
}

.wa-float .wa-bubble-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: #666;
    font-size: 16px;
    line-height: 18px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    padding: 0;
    z-index: 2
}

.wa-float .wa-bubble-close:hover {
    color: #222
}

.wa-float.wa-bubble-hidden .wa-bubble-wrap {
    display: none
}

@keyframes wa-pulse {
    0% {
        transform: scale(1);
        opacity: .45
    }

    80%,100% {
        transform: scale(1.6);
        opacity: 0
    }
}

@keyframes wa-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (max-width: 575.98px) {
    .wa-float {
        right:12px;
        bottom: 12px
    }

    .wa-float .wa-bubble {
        max-width: 230px;
        font-size: 12px
    }
}

/* Lista L2 sub fiecare categorie L1 din sidebar-ul megameniului (setarea `megamenu_l2_list`).
   Portat 1:1 din sursă (_elements/menu-style.php). Fără setare, markup-ul nu se randează. */
#categmenu .sidebar-l2-list {
    display: flex;
    flex-direction: column;
    padding: 0 1rem 0.6rem calc(1rem + 20px + 0.6rem)
}

#categmenu .sidebar-l2-link {
    display: block;
    padding: 0.22rem 0;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--shop-text-muted);
    text-decoration: none;
    transition: color 0.12s ease;
    line-height: 1.35
}

#categmenu .sidebar-l2-link:hover {
    color: var(--shop-primary)
}

#categmenu .sidebar-l2-extra {
    display: none
}

#categmenu .sidebar-l2-list.expanded .sidebar-l2-extra {
    display: block
}

#categmenu .sidebar-l2-toggle {
    background: none;
    border: none;
    padding: 0.25rem 0;
    text-align: left;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--shop-primary);
    cursor: pointer
}

#categmenu .sidebar-l2-toggle:hover {
    color: var(--shop-primary-dark)
}

/* ── Secțiunea „Comandate recent" (shop.last-ordered) ───────────────────────
   Carusel orizontal cu scroll-snap; săgețile vin din bundles-homepage.css.
   Lățimile cardurilor urmăresc grila .shop-prod-row (5 / 4 / 3 / 2 pe rând). */
.last-ordered-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none
}

/* Săgețile stau în interiorul secțiunii: tema face `.container` full-width fără padding,
   deci offset-ul negativ de la slider-ul de pachete le-ar scoate din ecran. */
.last-ordered-slider .slider-arrow-left {
    left: 0
}

.last-ordered-slider .slider-arrow-right {
    right: 0
}

.last-ordered-viewport::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent
}

.last-ordered-track {
    display: flex;
    gap: 16px;
    align-items: stretch
}

.last-ordered-item {
    flex: 0 0 calc((100% - 4 * 16px) / 5);
    scroll-snap-align: start
}

.last-ordered-item > .shop-card {
    height: 100%
}

@media (max-width: 1200px) {
    .last-ordered-item {
        flex-basis:calc((100% - 3 * 16px) / 4)
    }
}

@media (max-width: 992px) {
    .last-ordered-item {
        flex-basis:calc((100% - 2 * 16px) / 3)
    }
}

@media (max-width: 576px) {
    .last-ordered-track {
        gap:10px
    }

    .last-ordered-item {
        flex-basis: calc((100% - 10px) / 2)
    }
}

/* Badge peste imagine: localitatea + data comenzii (product-card, doar în secțiunea de mai sus) */
.shop-ordered-badge {
    position: absolute;
    top: 14px;
    left: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    max-width: calc(100% - 24px);
    padding: 6px 13px;
    border-radius: 5px;
    background: var(--ps-purple, var(--shop-primary, #46b354));
    color: #fff;
    box-shadow: 0 5px 12px rgba(0,0,0,.18)
}

.shop-ordered-city {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.3;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.shop-ordered-date {
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.3;
    opacity: .95;
    white-space: nowrap
}

a.nav-link.nav-link-main.menu-secretbox:after {
    content: "";
    position: absolute;
    width: 80%;
    height: 2px;
    left: 10%;
    bottom: 10px;
    background: var(--shop-primary);
}

a.nav-link.nav-link-main.menu-secretbox {
    position: relative;
}

/* Tabelul de caracteristici — gri neutru (nu accentul de temă). Regula globală
   `.table>:not(caption)>*>*` colorează celulele cu --bs-primary/--shop-primary (mov pe pasiune);
   aici o suprascriem strict pentru tabelul de caracteristici. */
.shop-caract-table > :not(caption) > * > * {
    color: #333;
    background-color: transparent;
    border-color: var(--shop-border, #e6e6e6);
}

.shop-caract-table th {
    color: #555;
    font-weight: 600;
}

/* Spațiu între secțiunile de sub pagina de produs (produse similare, categorii similare,
   secțiuni pe categorie) — altfel chips-urile „Categorii similare" se lipesc de secțiunea următoare. */
.shop-similar-products-section {
    margin-bottom: 1.75rem;
}

.shop-similar-products-section:last-child {
    margin-bottom: 0;
}

/* Stare goală descriere (modal + pagina produs) — când nu există descriere/continut. */
.shop-desc-empty {
    text-align: center;
    padding: 2.5rem 1.25rem;
    color: #8a8f98;
    background: #fafafb;
    border: 1px dashed #e2e5ea;
    border-radius: 12px;
}

.shop-desc-empty-icon {
    font-size: 2rem;
    color: color-mix(in srgb, var(--brand-primary, #888) 60%, #b8bcc4);
    display: block;
    margin-bottom: .5rem;
}

.shop-desc-empty-title {
    font-weight: 600;
    color: #4b5563;
    margin: 0 0 .25rem;
}

.shop-desc-empty-sub {
    font-size: .9rem;
    margin: 0 auto;
    max-width: 420px;
    line-height: 1.5;
}

/* Intro auto (identitate produs: categorie / brand / cod) generat din date structurate —
   doar text formatat deasupra descrierii editoriale, în tab-ul „Descriere" (pagină + modal).
   Fără fundal/border: doar tipografie (îngroșări, linii, notă discretă). */
.shop-desc-intro {
    margin: 0 0 1rem;
    font-size: .92rem;
    line-height: 1.55;
    color: #4b5563;
}

/* Când intro-ul e singurul conținut (fără descriere editorială) nu lăsăm spațiu gol dedesubt. */
.shop-description-content > .shop-desc-intro:last-child {
    margin-bottom: 0;
}

/* Tabele de layout din descrierile legacy (OpenCart). Fără lățimi fixe de coloană,
   browserul calculează lățimea minimă a celulei din lățimea imaginii dinăuntru și ignoră
   `max-width: 100%` la calculul ăla — deci un tabel cu două poze de 300px cere 600px și
   iese din coloană pe telefon, unde `.shop-description-content` (overflow: hidden) îl taie.
   Dimensiunile fixe din markup le scoate ContentHtmlSanitizer; asta e partea pe care doar
   CSS-ul o poate rezolva. */
.shop-description-content table {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
}

/* Cu lățimi de coloană fixate, un cuvânt sau un URL lung n-ar mai avea unde să se rupă. */
.shop-description-content td,
.shop-description-content th {
    overflow-wrap: break-word;
}

.shop-desc-intro__line {
    display: block;
}

.shop-desc-intro__line + .shop-desc-intro__line {
    margin-top: .2rem;
}

.shop-desc-intro strong {
    font-weight: 600;
    color: #1f2937;
}

.shop-desc-intro__note {
    display: block;
    margin-top: .5rem;
    font-size: .85rem;
    color: #8a8f98;
}

/* Buton „Adaugă la favorite" (inimă) pe cardurile de produs — colț dreapta-sus peste imagine.
   z-index peste .shop-overlay (5), ca să rămână apăsabil și când produsul e în coș. */
.shop-card-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--shop-line, #e6e6e6);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #9aa0a6;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: color .15s ease-in-out, border-color .15s ease-in-out, transform .15s ease-in-out;
}
/* Bootstrap Icons pune `vertical-align:-.125em` pe ::before → glifa cade sub centrul
   cercului. Scoatem offset-ul de linie de bază și centrăm glifa direct. */
.shop-card-fav i {
    padding-top: 2px;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.shop-card-fav i::before {
    vertical-align: 0;
}
.shop-card-fav:hover {
    color: #e11d48;
    border-color: #e11d48;
    transform: scale(1.08);
}
.shop-card-fav.active {
    color: #e11d48;
    border-color: #e11d48;
}
/* Cardul mic are imaginea mai strânsă → inimă mai mică, lipită de colț. */
.product-small-card .shop-card-fav {
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
}
.product-small-card .shop-card-fav i {
    font-size: 15px;
}

/* Buton „Adaugă la favorite" (inimă) în rând cu aprecierile — pagina de produs + modalul
   quick-view. Roșu când e activ. Aceeași corecție de centrare a glifei ca la varianta de card. */
.shop-fav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--shop-line, #e6e6e6);
    border-radius: 50%;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    transition: color .15s ease-in-out, border-color .15s ease-in-out;
}
.shop-fav-btn:hover,
.shop-fav-btn.active {
    border-color: #e11d48;
    color: #e11d48;
}
.shop-fav-btn i {
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.shop-fav-btn i::before {
    vertical-align: 0;
}

/* Badge-uri 360 / video pe cardul de produs — cerc sub butonul de favorite (care e la
   `top:10px; right:10px; 34px`), deci stiva porneste de la 52px si se aliniaza cu el.
   Culoarea e cea de brand: badge-ul trebuie sa se vada peste orice fotografie de produs. */
.shop-card-media {
    position: absolute;
    top: 52px;
    right: 10px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none
}

.shop-card-media-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand-primary, #b42fd8);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18)
}

/* Butonul mare de play peste posterul video. Panoul e flex-centrat, deci pozitionarea
   absoluta il tine fix in mijloc indiferent de raportul imaginii. */
.shop-video-play {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    cursor: pointer;
    transition: background .15s, transform .15s;
    z-index: 3
}

.shop-video-play:hover {
    background: rgba(0,0,0,.75);
    transform: scale(1.06)
}

.shop-video-play[hidden] {
    display: none
}

/* Panourile de media sunt `position:absolute` in interiorul lui — fara ancora, in modal se
   pozitionau fata de dialog si ieseau din zona imaginii. Pe pagina de produs ancora venea
   dintr-un `style="position:relative"` inline; aici e regula, valabila peste tot. */
.shop-modal-image-main {
    position: relative
}

/* `.shop-thumb` e `display:flex`, ceea ce INVINGE atributul `hidden` — thumb-urile de media
   din modal (ascunse cat produsul n-are 360/video) ramaneau vizibile, ca patrate goale. */
.shop-thumb[hidden] {
    display: none
}

/* ── Carusel de miniaturi ──────────────────────────────────────────────────
   Produsele cu multe poze (30 la unele) intindeau rindul de thumb-uri mult peste
   latimea imaginii principale, iar el iesea din coloana. Aici rindul devine un
   viewport cu derulare orizontala, iar sagetile apar DOAR cind miniaturile chiar
   nu incap (clasa `has-overflow`, pusa de ThumbsCarouselComponent). Fara JS rindul
   ramine derulabil cu degetul/trackpad-ul, doar fara sageti. */
.shop-thumbs-carousel {
    position: relative;
    /* Distanta fata de imaginea principala trece pe involucrus: cu ea pe `.shop-thumbs`,
       marginea s-ar fi colapsat in afara si sagetile (top:0) ar fi stat peste imagine. */
    margin-top: 12px
}

.shop-thumbs-carousel .shop-thumbs {
    margin-top: 0
}

.shop-thumbs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Bara de derulare ar fi adaugat ~15px sub miniaturi, deci si un salt de layout. */
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* `proximity`, nu `mandatory`: derularea cu un ecran intreg nu trebuie tirita inapoi
       la miniatura cea mai apropiata cind ultimul grup e mai ingust. */
    scroll-snap-type: x proximity
}

.shop-thumbs::-webkit-scrollbar {
    display: none
}

.shop-thumb {
    scroll-snap-align: start
}

.shop-thumbs-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    /* Ascunse pina cind componenta constata revarsarea. */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    font-size: 18px;
    line-height: 1;
    color: #444;
    cursor: pointer;
    z-index: 2;
    transition: color .15s, opacity .15s
}

.shop-thumbs-carousel.has-overflow .shop-thumbs-nav {
    display: flex
}

/* Degradeu, nu fundal plin: miniatura de sub sageata se vede pe jumatate, deci se citeste
   ca „mai sint poze in continuare", nu ca o margine oarecare. */
.shop-thumbs-nav--prev {
    left: 0;
    background: linear-gradient(90deg, #fff 45%, rgba(255,255,255,0))
}

.shop-thumbs-nav--next {
    right: 0;
    background: linear-gradient(270deg, #fff 45%, rgba(255,255,255,0))
}

.shop-thumbs-nav:hover {
    color: var(--shop-thumb-accent, #46b354)
}

/* La capat sageata dispare, dar pastreaza locul: fara `pointer-events:none` ar fi continuat
   sa fure click-urile miniaturii de dedesubt. */
.shop-thumbs-nav:disabled {
    opacity: 0;
    pointer-events: none
}