/* ================================================================
   HELSAN — PREMIUM STOREFRONT (component layers, retargeted)
   ----------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for component styling.

   Cascade note:
   `templates/components/header_css.html` loads this file BEFORE the
   page-level `{% block css %}` files (index-page.css, products.css,
   product-detail.css). Those page files carry the base theme's
   shared-component visuals and win any equal-specificity tie.
   To stay authoritative, every shared-component selector below is
   scoped with a `body` prefix (+1 specificity) and uses
   `!important` only where the base page CSS does.

   All design values come from `helsan-tokens.css` (`--hs-*`).
   No retired magenta token may appear in this file.

   Real theme class inventory targeted here:
     card ............ .item-offer.item-product
     image ........... .pic-product
     title ........... .title-product
     price ........... .price-product .price-org / .price-discount
     discount ........ .price-product .discount-box .off
     buy button ...... .btn-add-basket
     stepper ......... .count-plus-minus .cpm-item
     section ......... .best-seller-container / .offers-container /
                       .section-category / .banner-container
     container ....... .container-all
     navbar .......... .navbar-wrapper / .header / .navbar
     footer .......... footer
   ================================================================ */


/* ================================================================
   01 — BASE
   ================================================================ */

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 100% 0%, rgba(68, 151, 97, .055), transparent 420px),
        radial-gradient(circle at 0% 55%, rgba(237, 154, 61, .035), transparent 350px),
        var(--hs-bg);
    color: var(--hs-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

::selection {
    background: var(--hs-green-700);
    color: #fff;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #eef2ee;
}

::-webkit-scrollbar-thumb {
    background: #b8c7bb;
    border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--hs-green-600);
}

img {
    image-rendering: auto;
    backface-visibility: hidden;
}

hr {
    border: 0;
    border-top: 1px solid var(--hs-border);
}


/* ================================================================
   02 — CONTAINER (.container-all — NOT .container/.container-fluid)
   ================================================================ */

body .container-all {
    width: min(var(--hs-container), calc(100% - (var(--hs-gutter) * 2)));
    margin-left: auto;
    margin-right: auto;
}


/* ================================================================
   03 — NAVBAR / HEADER
   ================================================================ */

body .navbar-wrapper {
    transition:
        transform var(--hs-dur) var(--hs-ease-out),
        box-shadow var(--hs-dur) var(--hs-ease-out);
}

body .navbar-wrapper.t1-nav-hidden {
    transform: translateY(-100%);
}

body .navbar-wrapper .header {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border-bottom: 1px solid rgba(30, 70, 45, .07);
    box-shadow: 0 4px 24px rgba(20, 50, 30, .035);
    transition: background var(--hs-dur) var(--hs-ease-out);
}

body .navbar-wrapper.t1-nav-scrolled .header {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 4px 24px rgba(20, 50, 30, .08);
}

body .navbar-wrapper .navbar {
    background: #fff;
    border-bottom: 1px solid rgba(30, 70, 45, .06);
    transition: background var(--hs-dur) var(--hs-ease-out);
}

body .navbar-wrapper.t1-nav-scrolled .navbar {
    background: rgba(249, 249, 251, .9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body .navbar-wrapper .logo-box img {
    transition: transform var(--hs-dur) var(--hs-ease);
}

body .navbar-wrapper .logo-box:hover img {
    transform: scale(1.035);
}

body .navbar .btn-category {
    color: var(--hs-text);
    font-weight: 700;
    transition: color var(--hs-dur-fast);
}

body .navbar .btn-category:hover {
    color: var(--hs-green-700);
}

body .list-category-nav .nav-top-item > a,
body .list-category-nav .sub-cat-item > a {
    color: var(--hs-text);
    font-weight: 600;
    transition: color var(--hs-dur-fast);
}

body .list-category-nav .nav-top-item:hover > a,
body .list-category-nav .sub-cat-item:hover > a {
    color: var(--hs-green-700);
}


/* ================================================================
   04 — SEARCH
   ================================================================ */

body .header .search-box .field-default-search,
body .header .search-box .field-search {
    background: #f5f7f5;
    border: 1px solid #e1e7e2;
    border-radius: 14px;
    transition: all var(--hs-dur-fast) var(--hs-ease);
}

body .header .search-box .field-default-search:hover,
body .header .search-box .field-search:hover {
    background: #fff;
    border-color: #cbd8ce;
}

body .header .search-box:focus-within .field-default-search,
body .header .search-box:focus-within .field-search {
    background: #fff;
    border-color: var(--hs-green-500);
    box-shadow: 0 0 0 4px rgba(68, 151, 97, .09);
}

body .header .search-box .field-search input {
    color: var(--hs-text);
    background: transparent;
}

body .search-list-box {
    background: rgba(255, 255, 255, .98);
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius);
    box-shadow: var(--hs-shadow-lg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
}

body .search-list-box .option-search .content-cat-search a {
    border-radius: 10px;
    transition: all var(--hs-dur-fast);
}

body .search-list-box .option-search .content-cat-search a:hover {
    background: var(--hs-green-50);
    color: var(--hs-green-700);
}


/* ================================================================
   05 — ACCOUNT / CART
   ================================================================ */

body .header .user-cart .btn-cart-user {
    color: var(--hs-text);
    border-radius: 14px;
    transition: all var(--hs-dur-fast);
}

body .header .user-cart .btn-cart-user:hover {
    color: var(--hs-green-700);
    background: var(--hs-green-50);
}

body .header .user-cart .shopping-card-box i {
    background: var(--hs-red) !important;
    color: #fff !important;
    border: 2px solid #fff;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
}

body .header .user-cart .shopping-card-box:hover i {
    animation: hpCartBounce .6s var(--hs-ease-spring);
}

body .header .user-cart .btn-cart-user i {
    transition: transform var(--hs-dur) var(--hs-ease-spring);
}


/* ================================================================
   06 — DROPDOWN / MEGA MENU
   ================================================================ */

body .dropdown-profile,
body .list-category-nav .subcat-nav {
    background: rgba(255, 255, 255, .98);
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius);
    box-shadow: var(--hs-shadow-lg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
}

body .dropdown-profile .list-nav-dropdown li a {
    border-radius: 10px;
    transition: all var(--hs-dur-fast);
}

body .dropdown-profile .list-nav-dropdown li a:hover {
    background: var(--hs-green-50);
    color: var(--hs-green-700);
}


/* ================================================================
   07 — PRODUCT CARD (.item-offer.item-product)
   ================================================================ */

body .item-product {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    direction: rtl;
    padding: var(--hs-space-14);
    background: var(--hs-card);
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius);
    box-shadow: var(--hs-shadow-xs);
    overflow: hidden;
    transition:
        transform var(--hs-dur) var(--hs-ease),
        box-shadow var(--hs-dur) var(--hs-ease),
        border-color var(--hs-dur) var(--hs-ease);
}

/* Top glow bar */
body .item-product::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    opacity: 0;
    background: var(--hs-gradient-glow);
    transition: opacity var(--hs-dur) ease;
    z-index: 3;
    pointer-events: none;
}

body .item-product:hover::before {
    opacity: 1;
}

body .item-product:hover {
    transform: translateY(-6px);
    border-color: rgba(68, 151, 97, .22);
    box-shadow: 0 18px 45px rgba(25, 65, 38, .13);
}

body .item-product .pic-product {
    width: 100% !important;
    max-width: 100%;
    height: 170px;
    object-fit: contain;
    margin-bottom: var(--hs-space-8);
    border-radius: var(--hs-radius-sm);
    background:
        radial-gradient(circle at center, #fff 0%, #f4f7f4 100%);
    transition: transform var(--hs-dur-slow) var(--hs-ease);
}

body .item-product:hover .pic-product {
    transform: scale(1.05);
}

body .item-product .title-product {
    width: 100%;
    margin: var(--hs-space-6) 0;
    color: var(--hs-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--hs-dur-fast) ease;
}

body .item-product:hover .title-product {
    color: var(--hs-green-700);
}

/* Price */
body .item-product .price-product {
    width: 100%;
    margin-top: var(--hs-space-6);
}

body .item-product .price-product .discount-box {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
    gap: var(--hs-space-6);
    min-height: 25px;
}

body .item-product .price-product .discount-box .off {
    background: var(--hs-gradient-accent);
    border-radius: var(--hs-radius-pill);
    padding: 3px 10px;
    min-width: 40px;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    line-height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(185, 103, 24, .22);
}

body .item-product .price-product .discount-box .price-discount {
    color: var(--hs-text-3);
    font-size: 12px;
    text-decoration: line-through;
    opacity: .8;
}

body .item-product .price-product .price-org {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--hs-space-6);
    color: var(--hs-green-800);
    font-weight: 900;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -.2px;
}

body .item-product .price-product .price-org span {
    color: var(--hs-text-3);
    font-size: 11px;
    font-weight: 500;
}

/* Progress sale */
body .item-product .progress-sale {
    width: 100%;
    height: 6px;
    margin-top: var(--hs-space-10);
    border-radius: var(--hs-radius-pill);
    background: var(--hs-green-100);
    overflow: hidden;
    position: relative;
}

body .item-product .progress-sale span {
    height: 6px;
    border-radius: var(--hs-radius-pill);
    background: var(--hs-gradient-brand);
}

/* Add to cart button */
body .item-product .btn-add-basket {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 40px;
    margin-top: var(--hs-space-10);
    padding: 0 var(--hs-space-10);
    border: 0;
    border-radius: var(--hs-radius-sm);
    background: var(--hs-gradient-brand);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 7px 18px rgba(52, 123, 77, .18);
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: all var(--hs-dur) var(--hs-ease);
}

body .item-product .btn-add-basket:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(52, 123, 77, .28);
    filter: brightness(1.04);
}

/* Unavailable state (inline grey border/color from templates) */
body .item-product .btn-add-basket[style*="6c757d"] {
    background: #f1f3f1 !important;
    color: #6c757d !important;
    box-shadow: none;
    cursor: not-allowed;
}

body .item-product .btn-add-basket[style*="6c757d"]:hover {
    transform: none;
    filter: none;
    box-shadow: none;
}

/* Quantity stepper */
body .item-product .count-plus-minus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hs-space-14);
    width: 100%;
    margin-top: var(--hs-space-10);
    position: relative;
    z-index: 2;
}

body .item-product .count-plus-minus .cpm-item {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1.5px solid var(--hs-green-600);
    border-radius: var(--hs-radius-xs);
    color: var(--hs-green-700);
    font-size: 1.3em;
    line-height: 1;
    cursor: pointer;
    transition: all var(--hs-dur-fast) var(--hs-ease);
}

body .item-product .count-plus-minus .cpm-item:hover {
    background: var(--hs-green-600);
    color: #fff;
}

body .item-product .count-plus-minus .cpm-item.number {
    width: auto;
    border: none;
    background: transparent;
    color: var(--hs-text);
    font-weight: 800;
    cursor: text;
}


/* ================================================================
   08 — PRODUCT GRID CONTAINERS
   ================================================================ */

body .list-best-sellers ul,
body .offer-slider ul,
body .related-products ul,
body .list-products ul {
    list-style: none;
}

/* Product-list page: `products.css` declares
   `.list-products .item-product .pic-product { width: ... !important }`
   which outranks the generic card rule above, so repeat it at matching
   specificity (with the `body` scope) to keep the image filling the card. */
body .list-products .item-product .pic-product {
    width: 100% !important;
    max-width: 100%;
    height: 170px;
    object-fit: contain;
}

/* Whole-card overlay link: keep it filling the card so a keyboard focus
   ring is visible around the entire card (see §19 accessibility). */
body .item-product > a {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 1;
    cursor: pointer;
    border-radius: inherit;
}

body .color-primary {
    color: var(--hs-green-700) !important;
}


/* ================================================================
   09 — SECTION CHROME
   ================================================================ */

/* Best seller / new products / special / related */
body .best-seller-container {
    background: var(--hs-card);
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius-lg);
    box-shadow: var(--hs-shadow-xs);
    transition: box-shadow var(--hs-dur) ease;
}

body .best-seller-container:hover {
    box-shadow: var(--hs-shadow-sm);
}

body .best-seller-container .header-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--hs-space-24) var(--hs-space-24) var(--hs-space-10);
}

body .best-seller-container .header-section .title {
    position: relative;
    padding-right: var(--hs-space-16);
    color: var(--hs-black);
    font-weight: 800;
    font-size: 1.3em;
}

body .best-seller-container .header-section .title::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 24px;
    border-radius: var(--hs-radius-pill);
    background: var(--hs-gradient-brand);
}

body .best-seller-container .header-section .link-more {
    display: inline-flex;
    align-items: center;
    gap: var(--hs-space-6);
    padding: var(--hs-space-8) var(--hs-space-14);
    border-radius: var(--hs-radius-xs);
    background: var(--hs-green-50);
    color: var(--hs-green-700);
    font-weight: 700;
    transition: all var(--hs-dur-fast) var(--hs-ease);
}

body .best-seller-container .header-section .link-more::after {
    content: "←";
    transition: transform var(--hs-dur) var(--hs-ease-spring);
}

body .best-seller-container .header-section .link-more:hover {
    background: var(--hs-green-700);
    color: #fff;
    transform: translateX(-3px);
}

body .best-seller-container .header-section .link-more:hover::after {
    transform: translateX(-4px);
}

body .best-seller-container .list-best-sellers {
    padding: var(--hs-space-4) var(--hs-space-24) var(--hs-space-20);
}

/* Amazing offer */
body .offers-container {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 18% 82%, rgba(237, 154, 61, .22), transparent 46%),
        radial-gradient(circle at 84% 16%, rgba(68, 151, 97, .28), transparent 50%),
        linear-gradient(135deg, var(--hs-green-800) 0%, var(--hs-green-950) 55%, var(--hs-green-900) 100%);
    border-radius: var(--hs-radius-lg);
    box-shadow: 0 18px 40px -12px rgba(16, 38, 26, .45);
}

body .offers-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .10) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: hpShimmer 6s linear infinite;
    pointer-events: none;
    z-index: 0;
}

body .offers-container > * {
    position: relative;
    z-index: 1;
}

body .offers-container .title-section-offers .title-small {
    font-weight: 500;
    letter-spacing: .5px;
    opacity: .95;
    color: #fff;
}

body .offers-container .title-section-offers .title-big {
    font-weight: 800;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}

body .offers-container .title-section-offers .read-more {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--hs-radius-pill);
    padding: var(--hs-space-8) var(--hs-space-20);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all var(--hs-dur) var(--hs-ease);
}

body .offers-container .title-section-offers .read-more:hover {
    background: rgba(255, 255, 255, .3);
    transform: translateX(-4px);
}

body .offers-container .item-product {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .6);
}

body .offers-container .offer-slider .more-product {
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--hs-radius);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all var(--hs-dur) var(--hs-ease);
}

body .offers-container .offer-slider .more-product:hover {
    transform: translateY(-4px);
    box-shadow: var(--hs-shadow);
}

/* Category */
body .section-category .title-section {
    position: relative;
    display: block;
    padding-bottom: var(--hs-space-14);
    margin-bottom: var(--hs-space-24);
    color: var(--hs-black);
    font-weight: 800;
    text-align: center;
}

body .section-category .title-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    width: 64px;
    height: 4px;
    border-radius: var(--hs-radius-pill);
    background: var(--hs-gradient-brand);
}

body .section-category .category-list-container .category-item {
    background: var(--hs-card);
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius-lg);
    padding: var(--hs-space-24) var(--hs-space-12);
    box-shadow: var(--hs-shadow-xs);
    cursor: pointer;
    transition: all var(--hs-dur) var(--hs-ease);
}

body .section-category .category-list-container .category-item:hover {
    transform: translateY(-6px);
    border-color: rgba(68, 151, 97, .22);
    box-shadow: var(--hs-shadow);
}

body .section-category .category-list-container .category-item img {
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
    transition: transform var(--hs-dur-slow) var(--hs-ease);
}

body .section-category .category-list-container .category-item:hover img {
    transform: scale(1.06);
}

body .section-category .category-list-container .category-item .title-category {
    color: var(--hs-text);
    font-weight: 600;
    transition: color var(--hs-dur-fast) ease;
}

body .section-category .category-list-container .category-item:hover .title-category {
    color: var(--hs-green-700);
}

/* Bottom banners */
body .banner-container .banner-bottom a,
body .banner-container .banner-mini-bottom a {
    display: block;
    border-radius: var(--hs-radius);
    overflow: hidden;
    box-shadow: var(--hs-shadow-xs);
    transition: all var(--hs-dur) var(--hs-ease);
}

body .banner-container .banner-bottom a:hover,
body .banner-container .banner-mini-bottom a:hover {
    transform: translateY(-3px);
    box-shadow: var(--hs-shadow);
}

body .banner-container .banner-bottom img,
body .banner-container .banner-mini-bottom img {
    display: block;
    border-radius: var(--hs-radius);
    transition: transform var(--hs-dur-slow) var(--hs-ease);
}

body .banner-container .banner-bottom a:hover img,
body .banner-container .banner-mini-bottom a:hover img {
    transform: scale(1.03);
}

/* Mobile order status pill */
body .status-order .status p {
    background: var(--hs-gradient-brand);
    border-radius: var(--hs-radius-pill);
    box-shadow: 0 2px 8px rgba(52, 123, 77, .35);
}


/* ================================================================
   10 — SLIDER (bxSlider — arrows .arrow-item / dots .dot-item)
   ================================================================ */

body .slider-banner .box-slider .action-slider .arrow-slider .arrow-item {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    box-shadow: var(--hs-shadow-sm);
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all var(--hs-dur) var(--hs-ease-spring);
}

body .slider-banner .box-slider .action-slider .arrow-slider .arrow-item:hover {
    background: #fff;
    transform: scale(1.08);
    box-shadow: var(--hs-shadow);
}

body .slider-banner .box-slider .action-slider .dots-slider {
    display: flex;
    gap: 6px;
    align-items: center;
}

body .slider-banner .box-slider .action-slider .dots-slider .dot-item {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    cursor: pointer;
    transition: all var(--hs-dur) var(--hs-ease-spring);
}

body .slider-banner .box-slider .action-slider .dots-slider .dot-item.active {
    width: 30px;
    border-radius: var(--hs-radius-pill);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

body .slider-banner .box-banner img {
    display: block;
    border-radius: var(--hs-radius);
    box-shadow: var(--hs-shadow-xs);
    transition: all var(--hs-dur) var(--hs-ease);
}

body .slider-banner .box-banner a:hover img {
    transform: translateY(-2px);
    box-shadow: var(--hs-shadow-sm);
}


/* ================================================================
   11 — REWARD WHEEL CTA (relocated from wheel-cta.html inline style)
   ================================================================ */

body .reward-wheel-cta {
    margin: var(--hs-space-16) 0;
}

body .reward-wheel-cta .reward-wheel-cta__inner {
    display: flex;
    align-items: center;
    gap: var(--hs-space-16);
    padding: var(--hs-space-20) var(--hs-space-24);
    border-radius: var(--hs-radius);
    background:
        radial-gradient(circle at 12% 50%, rgba(237, 154, 61, .28), transparent 46%),
        linear-gradient(135deg, var(--hs-green-800), var(--hs-green-950));
    color: #fff;
    box-shadow: var(--hs-shadow-sm);
    overflow: hidden;
}

body .reward-wheel-cta .reward-wheel-cta__art img {
    width: 56px;
    height: 56px;
}

body .reward-wheel-cta .reward-wheel-cta__text {
    flex: 1 1 auto;
    min-width: 0;
}

body .reward-wheel-cta .reward-wheel-cta__title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
    color: var(--hs-orange-500);
}

body .reward-wheel-cta .reward-wheel-cta__desc {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .82);
}

body .reward-wheel-cta .reward-wheel-cta__action {
    flex: 0 0 auto;
}

body .reward-wheel-cta .reward-wheel-cta__btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: var(--hs-radius-pill);
    background: var(--hs-gradient-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 25px rgba(185, 103, 24, .3);
    transition: all var(--hs-dur) var(--hs-ease);
}

body .reward-wheel-cta .reward-wheel-cta__btn:hover {
    transform: translateY(-3px);
    color: #fff;
    box-shadow: 0 14px 32px rgba(185, 103, 24, .38);
}


/* ================================================================
   12 — FOOTER
   ================================================================ */

body footer {
    position: relative;
    margin-top: var(--hs-space-48);
    padding-top: var(--hs-space-40);
    background:
        linear-gradient(135deg, #10251a 0%, #193725 50%, #10251a 100%) !important;
    color: rgba(255, 255, 255, .78);
    border-radius: var(--hs-radius-lg) var(--hs-radius-lg) 0 0;
    overflow: hidden;
}

body footer::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -220px;
    top: -300px;
    border-radius: 50%;
    background: rgba(68, 151, 97, .10);
    pointer-events: none;
}

body footer::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: -180px;
    bottom: -200px;
    border-radius: 50%;
    background: rgba(237, 154, 61, .06);
    pointer-events: none;
}

body footer .footer-middle {
    background: transparent !important;
}

body footer .footer-middle .col-footer .title-col,
body footer .footer-middle .col-footer .title-col span {
    color: #fff;
    font-weight: 800;
}

body footer .footer-middle .col-footer .list-col a,
body footer .footer-middle .col-footer .list-col-contact .item-contact .value-box,
body footer .footer-middle .col-footer .list-col-contact .item-contact a {
    color: rgba(255, 255, 255, .72);
    transition: all var(--hs-dur-fast) ease;
}

body footer .footer-middle .col-footer .list-col a:hover {
    color: #fff;
    transform: translateX(-4px);
}

body footer .footer-middle .col-footer .list-col-contact .item-contact .title-box {
    color: rgba(255, 255, 255, .9);
}

body footer .footer-middle .col-footer .list-col-contact {
    background: transparent !important;
}

body footer .footer-text-certificate {
    color: rgba(255, 255, 255, .62);
    position: relative;
}

body footer .footer-text-certificate h4 {
    color: #fff;
}

body footer .newsletter h4 {
    color: rgba(255, 255, 255, .85);
}

body footer .newsletter input {
    min-height: 46px;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    border-radius: var(--hs-radius-sm) !important;
}

body footer .newsletter input::placeholder {
    color: rgba(255, 255, 255, .45);
}

body footer .newsletter button {
    min-height: 46px;
    border: 0;
    border-radius: var(--hs-radius-sm);
    background: var(--hs-gradient-brand);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

body footer .footer-bottom {
    color: rgba(255, 255, 255, .5);
    position: relative;
}


/* ================================================================
   13 — QUICK ACCESS / TRUST STRIP
   ================================================================ */

body .footer-quick-access .col-quick-access {
    transition: transform var(--hs-dur) var(--hs-ease);
}

body .footer-quick-access .col-quick-access:hover {
    transform: translateY(-5px);
}

body .footer-quick-access .col-quick-access h4 {
    color: var(--hs-text);
    font-weight: 600;
}


/* ================================================================
   14 — CART DRAWER / BASKET
   ================================================================ */

body .list-basket {
    background: #fff;
    box-shadow: -15px 0 60px rgba(20, 50, 30, .13);
}

body .list-basket .header-basket h3 {
    color: var(--hs-green-900);
    font-weight: 900;
}

body .list-basket .footer-basket .btn-basket {
    border-radius: 13px;
    background: var(--hs-gradient-brand);
    color: #fff;
    font-weight: 800;
}

body .list-basket .body-basket .empty-basket {
    background: linear-gradient(135deg, #f4f8f4, #fffaf3);
    border: 1px dashed #dce6dd;
    border-radius: var(--hs-radius);
}


/* ================================================================
   15 — FORMS / BUTTONS / MODALS
   ================================================================ */

body input,
body textarea,
body select {
    border-radius: var(--hs-radius-sm);
    border-color: #e1e7e2;
    transition: all var(--hs-dur-fast) ease;
}

body input:focus,
body textarea:focus,
body select:focus {
    border-color: var(--hs-green-500);
    box-shadow: 0 0 0 4px rgba(68, 151, 97, .08);
    outline: none;
}

body .btn-primary,
body button[type="submit"],
body input[type="submit"] {
    border: 0;
    border-radius: var(--hs-radius-sm);
    background: var(--hs-gradient-brand);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(52, 123, 77, .17);
    transition: all var(--hs-dur) var(--hs-ease);
}

body .btn-primary:hover,
body button[type="submit"]:hover,
body input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(52, 123, 77, .25);
}

body .modal-content,
body .modal-dialog > div {
    border: 0;
    border-radius: var(--hs-radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 100px rgba(15, 40, 25, .23);
}

body a,
body button {
    -webkit-tap-highlight-color: transparent;
}

body button:active,
body .btn:active {
    transform: scale(.97);
}


/* ================================================================
   16 — DARK-MODE TOGGLE (mounted once in the navbar)
   ================================================================ */

body .t1-dark-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--hs-border);
    border-radius: 50%;
    background: var(--hs-card);
    color: var(--hs-text);
    cursor: pointer;
    box-shadow: var(--hs-shadow-xs);
    transition: all var(--hs-dur) var(--hs-ease-spring);
}

body .t1-dark-mode-toggle:hover {
    transform: scale(1.08);
    box-shadow: var(--hs-shadow-sm);
}

body .t1-dark-mode-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform var(--hs-dur) var(--hs-ease-spring);
}

body .t1-dark-mode-toggle:hover svg {
    transform: rotate(30deg);
}


/* ================================================================
   17 — SCROLL REVEAL (progressive enhancement, gated on .t1-js)
   ================================================================ */

.t1-js .section-category,
.t1-js .best-seller-container,
.t1-js .offers-container,
.t1-js .banner-container {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity var(--hs-dur-slow) var(--hs-ease-out),
        transform var(--hs-dur-slow) var(--hs-ease-out);
}

.t1-js .section-category.t1-revealed,
.t1-js .best-seller-container.t1-revealed,
.t1-js .offers-container.t1-revealed,
.t1-js .banner-container.t1-revealed {
    opacity: 1;
    transform: translateY(0);
}


/* ================================================================
   18 — RESPONSIVE
   ================================================================ */

@media (max-width: 1024px) {
    body .item-product {
        padding: 12px;
    }

    body .item-product .pic-product {
        height: 150px;
    }

    body .item-product:hover {
        transform: translateY(-3px);
    }

    body .best-seller-container {
        border-radius: var(--hs-radius);
    }

    body .section-category .category-list-container .category-item {
        padding: 16px 8px;
        border-radius: var(--hs-radius);
    }
}

@media (max-width: 768px) {
    body .item-product {
        padding: 10px;
    }

    body .item-product .pic-product {
        height: 130px;
    }

    body .item-product .title-product {
        font-size: 12px;
    }

    body .offers-container {
        border-radius: 0;
    }

    body .reward-wheel-cta .reward-wheel-cta__inner {
        flex-direction: column;
        text-align: center;
    }

    body footer {
        border-radius: var(--hs-radius) var(--hs-radius) 0 0;
    }
}

@media (max-width: 480px) {
    body .item-product .pic-product {
        height: 120px;
    }

    body .item-product .btn-add-basket {
        height: 36px;
        font-size: 12px;
    }
}


/* ================================================================
   19 — ACCESSIBILITY
   ================================================================ */

body :focus-visible {
    outline: 3px solid rgba(68, 151, 97, .35);
    outline-offset: 2px;
}

/* Whole-card link: the anchor is an empty overlay, so give the card itself
   the visible ring when the overlay receives keyboard focus. */
body .item-product:focus-within {
    outline: 3px solid rgba(68, 151, 97, .45);
    outline-offset: 2px;
    border-color: var(--hs-green-600);
}

/* Slider controls are focusable buttons — make the ring readable on the
   translucent arrows and the tiny dots. */
body .slider-banner .box-slider .action-slider .arrow-item:focus-visible,
body .slider-banner .box-slider .action-slider .dots-slider .dot-item:focus-visible {
    outline: 3px solid var(--hs-orange-500);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    body .offers-container::before {
        animation: none;
    }

    .t1-js .section-category,
    .t1-js .best-seller-container,
    .t1-js .offers-container,
    .t1-js .banner-container {
        opacity: 1;
        transform: none;
    }

    body .header .user-cart .shopping-card-box:hover i {
        animation: none;
    }

    body .item-product,
    body .item-product .pic-product,
    body .item-product .btn-add-basket,
    body .section-category .category-list-container .category-item,
    body .section-category .category-list-container .category-item img,
    body .banner-container .banner-bottom a,
    body .banner-container .banner-bottom img,
    body .slider-banner .box-slider .action-slider .arrow-item {
        transition: none;
    }

    body .item-product:hover,
    body .item-product:hover .pic-product,
    body .section-category .category-list-container .category-item:hover,
    body .section-category .category-list-container .category-item:hover img,
    body .banner-container .banner-bottom a:hover,
    body .banner-container .banner-bottom a:hover img {
        transform: none;
    }
}


/* ================================================================
   END — HELSAN PREMIUM STOREFRONT
   ================================================================ */