/* =============================================================
   HELMI — Header navigation + mega menu
   Styles the live ho_mega_menu module markup (Bootstrap output)
   to match the Image #8 design. Builds on the design tokens
   defined in stylesheet.css (:root --color-*, --header-*, etc).

   Scope: desktop nav bar + dropdowns/mega panels only.
   The mobile menu uses the offcanvas (#mmenu) and is untouched.
   ============================================================= */

body { font-family: 'Gotham', sans-serif; background: #f6f6f8;}

/* ============================================================
   1. NAV BAR — strip Bootstrap navbar chrome, center the row
   ============================================================ */
.site-nav { 
    border: 0; 
}

.site-nav .navbar.main-nav { padding: 0; min-height: 0; }

/* keep the row visible at desktop regardless of Bootstrap collapse */
.site-nav .navbar-collapse { display: flex !important; flex-basis: auto; }

.site-nav .navbar-nav.main-nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    width: 100%;

}

/* ── Top-level items ── */
.site-nav .navbar-nav.main-nav > li {
    display: flex;
    align-items: stretch;
    list-style: none;
    background: transparent !important;   /* neutralize color_target box */
}

.site-nav .navbar-nav.main-nav > li > .nav-link {
    display: flex;
    align-items: center;
    padding: 18px;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    border: 0;
    background: transparent !important;        /* neutralize color_target */
    color: var(--color-text) !important;       /* neutralize color_target */
    position: relative;
    cursor: pointer;
    transition: opacity 0.15s;
}

/* remove Bootstrap dropdown caret */
.site-nav .dropdown-toggle::after,
.site-nav .dropdown-toggle::before { display: none !important; }

/* underline indicator (hover / open) */
.site-nav .navbar-nav.main-nav > li > .nav-link::after {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 8px;
    height: 1.5px;
    background: var(--color-black);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.22s ease;
}
.site-nav .navbar-nav.main-nav > li > .nav-link::before {
    pointer-events: none;
    content: '';
    position: absolute;
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
    display: block !important;
}
.site-nav .navbar-nav.main-nav > li > .nav-link:hover::before {
    pointer-events: all;
}
.site-nav .navbar-nav.main-nav > li:hover > .nav-link::after,
.site-nav .navbar-nav.main-nav > li.show > .nav-link::after {
    transform: scaleX(1);
}

/* ============================================================
   2. OPEN ON HOVER (desktop)
   ============================================================ */
.site-nav .nav-item.dropdown:hover > .dropdown-menu,
.site-nav .nav-item.dropdown > .dropdown-menu.show {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    border-top: 1px solid #ccc;
    box-shadow: 0 10px 10px -5px rgba(0,0,0,0.1);
}

.site-nav .nav-item.dropdown > .dropdown-menu > .dropdown-menu-ul {
    column-count: 2;
    column-gap: 56px;
    padding-bottom: 3rem;
    position: relative;
}
.site-nav .nav-dd .dropdown-menu-ul > li.menu-view-all {
    position: absolute;
    bottom: -1rem;
    left: 0;
}
.site-nav .nav-dd .dropdown-menu-ul > li.menu-view-all a {
    margin-right: 8px;
    transition: 0.3s ease all;
}
.site-nav .nav-dd .dropdown-menu-ul > li.menu-view-all:hover a {
    transform: translatex(5px);
}
.site-nav .nav-dd .dropdown-menu-ul > li.menu-view-all a::after {
    opacity: 100%;
}
.site-nav .nav-dd--mega > .dropdown-menu-ul > li {
    width: 15rem;
}
.site-nav .nav-dd .dropdown-menu-ul > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 0.5rem;
    width: 10rem;
}
.site-nav .nav-dd .dropdown-menu-ul > li > a {
    display: block;
    padding: 6px 0;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    transition: font-weight 0.1s;
    color: var(--color-text);
}

.site-nav .nav-dd .dropdown-menu-ul > li > a:hover {
    font-weight: 700;
}


.site-nav .nav-dd--mega > .dropdown-menu-ul > li.dropdown-submenu > .dropdown-menu {
    display: none;
}


/* mega items anchor the panel to the full nav width;
   compact items anchor the panel under themselves */
.site-nav .nav-item.dropdown:has(> .nav-dd--mega) { position: static; }
.site-nav .nav-item.dropdown:not(:has(> .nav-dd--mega)) { position: relative; }

/* ============================================================
   3. DROPDOWN / PANEL — shared base
   ============================================================ */
.site-nav .dropdown-menu.nav-dd {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #f6f6f8;
    border: 0;
    box-shadow: none;
    z-index: 1000;
    padding: 2rem 3rem;
}

/* neutralize any color_target inline colors on links inside panels */
.site-nav .dropdown-menu.nav-dd a { color: var(--color-text) !important; }

/* ============================================================
   4. COMPACT DROPDOWN (small menus: < 8 items)
   ============================================================ */
.site-nav .dropdown-menu.nav-dd:not(.nav-dd--mega) {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    padding: 1rem 2rem;
}
.site-nav .nav-dd:not(.nav-dd--mega) > li > a {
    display: block;
    padding: 7px 24px;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: font-weight 0.1s;
}
.site-nav .nav-dd:not(.nav-dd--mega) > li > a:hover { font-weight: 600; }

/* ── 4b. SMALL MENU AS A SINGLE CENTERED SLIM ROW (Variant D) ──
   Full-bleed panel (mirrors the mega's positioning) with all items
   on one centered line + an underline-grow hover. Mega is untouched. */
.site-nav .nav-item.dropdown:not(:has(> .nav-dd--mega)) { position: static; }

.site-nav .dropdown-menu.nav-dd:not(.nav-dd--mega) {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    transform: none;
    padding: 1.75rem 2rem;
}

/* ul → centered horizontal row (override the column-count:2 base) */
.site-nav .nav-item.dropdown > .dropdown-menu.nav-dd:not(.nav-dd--mega) > .dropdown-menu-ul {
    column-count: unset;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem 3.25rem;
    width: 100%;
    margin: 0;
    padding: 0;
}

.site-nav .nav-dd:not(.nav-dd--mega) .dropdown-menu-ul > li {
    width: auto;
    margin: 0;
    list-style: none;
}

.site-nav .nav-dd:not(.nav-dd--mega) .dropdown-menu-ul > li > a {
    display: inline-block;
    padding: 2px 0;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* underline grows on hover (no bold so the row doesn't shift) */
.site-nav .nav-dd:not(.nav-dd--mega) .dropdown-menu-ul > li > a::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    margin-top: 6px;
    background: var(--color-black);
    transition: width 0.2s ease;
}
.site-nav .nav-dd:not(.nav-dd--mega) .dropdown-menu-ul > li > a:hover {
    font-weight: 400;
}
.site-nav .nav-dd:not(.nav-dd--mega) .dropdown-menu-ul > li > a:hover::after {
    width: 100%;
}

/* ============================================================
   5. MEGA PANEL (large menus: >= 8 items) — Image #8 layout
   Full-width white panel, content centered to a max width,
   category links in 2 columns on the left, 2 promo cards right.
   ============================================================ */
.site-nav .dropdown-menu.nav-dd--mega {
    --mega-gutter: max(40px, calc((100% - 1320px) / 2));
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-width: 100%;
    /* center content to 1320px and reserve the right gutter for promos */
    padding: 2rem 3rem;
}


/* category links flow into the 2 columns */
.site-nav .nav-dd--mega > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 0.5rem;
}
.site-nav .nav-dd--mega > li.dropdown-submenu > .dropdown-menu {
    display: none;
}
.site-nav .nav-dd--mega > li > a {
    display: block;
    padding: 6px 0;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    transition: font-weight 0.1s;
}
.site-nav .nav-dd--mega > li > a:hover { font-weight: 600; }

/* nested submenu (e.g. "Basics") rendered inline as a small group */
.site-nav .nav-dd--mega .dropdown-menu {
    position: static;
    display: block;
    float: none;
    min-width: 0;
    margin: 2px 0 8px;
    padding: 0 0 0 12px;
    border: 0;
    box-shadow: none;
    background: transparent;
}
.site-nav .nav-dd--mega .dropdown-menu > li > a {
    padding: 4px 0;
    font-size: 0.75rem;
    text-transform: none;
    color: var(--color-muted) !important;
}
.site-nav .nav-dd--mega .dropdown-menu > li > a:hover {
    color: var(--color-text) !important;
}

/* depth >= 2 categories (items that open a further sub-list) — angle-right on hover */
.site-nav .dropdown-menu-ul a::after {
    content: "\f105"; /* fa-angle-right */
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    font-size: 10px;
    margin-left: 6px;
    display: inline-block;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.site-nav .dropdown-menu-ul a:hover::after {
    opacity: 1;
    transform: translateX(0);
}
#payment-custom-field4, .col-input.col-customer_group {
    display: none !important;
}
#account-register:not(.b2b) #custom-field1, #account-register:not(.b2b) #custom-field2, #account-register:not(.b2b) #custom-field3 {
    display: none !important;
}
/* ============================================================
   6. PROMO CARDS (right side of the mega panel)
   Scaffolded in the theme — swap the two images below or point
   the menu item at real banners later.
   ============================================================ */
.site-nav .nav-dd__promos {
    width: 40rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    break-before: column;
}
.site-nav .nav-dd__promo {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: #ddd center / cover no-repeat;
}
.site-nav .nav-dd__promo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0) 45%);
}
.site-nav .nav-dd__promo--1 { background-image: url('../images/mega/promo-1.jpg'); }
.site-nav .nav-dd__promo--2 { background-image: url('../images/mega/promo-2.jpg'); }

.site-nav .nav-dd__promo-label {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    justify-content: center;
}
.site-nav .nav-dd__promo .fa-angle-right { font-size: 10px; transition: transform 0.2s; }
.site-nav .nav-dd__promo:hover .fa-angle-right { transform: translateX(4px); }

/* ============================================================
   7. RESPONSIVE — desktop nav is hidden <= 1024 (stylesheet.css);
   make sure no panel leaks on the way down.
   ============================================================ */
@media (max-width: 1024px) {
    .site-nav .dropdown-menu.nav-dd { display: none !important; }
}

/* ============================================================
   8. FULL-WIDTH SLIDESHOW (module-slideshow)
   The slide media had NO width constraint (template emits a bare
   <img>, and the theme shipped no slideshow CSS), so it rendered at
   its intrinsic pixel size (e.g. 2560px wide) and overflowed the
   viewport — Swiper's `overflow: clip` then cropped the excess.
   Constrain the media to the container width so the whole image
   shows, full-bleed and uncropped.
   ============================================================ */
.module-slideshow .slideshow-slide-image-container,
.module-slideshow .slideshow-slide-image-container > a { display: block; }

.module-slideshow .slideshow-slide-image-container img {
    display: block;
    width: 100%;
    height: auto;
}
.module-slideshow .slideshow-slide-image-container video {
    display: block;
    width: 100%;
    height: auto;
}

/* Video slides: fill the full slide height instead of sitting at the
   video's intrinsic aspect ratio. :has(video) targets only slideshows
   that actually contain a video, so image slideshows are unaffected and
   it works regardless of the admin "class" field. Adjust --slideshow-video-h
   to taste (e.g. 100svh for a full-screen hero, or a fixed px value). */
.module-slideshow:has(video) {
    --slideshow-video-h: 80svh;
}
.module-slideshow:has(video) .swiper-wrapper {
    /* override Swiper autoHeight's inline height, which would otherwise
       collapse the wrapper back to the video's intrinsic height */
    height: var(--slideshow-video-h) !important;
}
.module-slideshow:has(video) .swiper-slide,
.module-slideshow:has(video) .slideshow-slide-wrapper,
.module-slideshow:has(video) .slideshow-slide-image-wrapper,
.module-slideshow:has(video) .slideshow-slide-image-container {
    height: var(--slideshow-video-h);
}
.module-slideshow:has(video) .slideshow-slide-image-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   9. SITE FOOTER  (matches Image #9)
   5-column grid (contact / company / account / service /
   newsletter), centered trust + payment row, copyright bar.
   ============================================================ */
.site-footer {
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 12.5px;
}

/* ── 5-column grid ── */
.footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.1fr 1.1fr 1fr 1.3fr;
    gap: 32px;
    margin: 0 auto;
    padding: 4rem 3rem 3rem 3rem;
}

.footer-col__title {
    margin: 0 0 22px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-black);
}

.footer-col__subtitle {
    margin: 20px 0 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-black);
}

.footer-col__text {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: #5A5A5A;
}
.footer-col__text a { color: #5A5A5A;}
.footer-col__text a:hover { color: black; }

/* ── link lists ── */
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 11px; }
.footer-links a {
    font-size: .625rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #5A5A5A;
    transition: opacity 0.15s;
}
.footer-links a:hover { color: black; }

/* ── newsletter ── */
.footer-newsletter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    max-width: 300px;
}
.footer-newsletter__input {
    width: 100%;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    font-family: inherit;
    font-size: 0.6875rem;
    color: #5A5A5A;
}
.footer-newsletter__input::placeholder { color: var(--color-muted); }
.footer-newsletter__input:focus { outline: none; border-bottom-color: var(--color-black); }
.footer-newsletter__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: .75rem;
    font-weight: 400;
    color: var(--color-black);
    transition: gap 0.2s;
}
.footer-newsletter__btn:hover { gap: 11px; }

/* ── social icons (bottom of newsletter column) ── */
.footer-social {
    display: flex;
    gap: 0.625rem;
    margin-top: 4rem;
}
.footer-social a {
    font-size: 1rem;
    color: var(--color-black);
    background: var(--color-white);
    transition: opacity 0.15s;
    padding: 1rem;
    border-radius: 100%;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-social a:hover { opacity: 0.55; }

/* ── trust badges + payment logos (centered) ── */
.payment-logos {
    display: flex;
    flex-direction: column-reverse;   /* badges above, payments below (Image #9 order) */
    align-items: center;
    gap: 18px;
}
.payment-logos > div { display: flex; justify-content: center; width: 100%; }
.payment-logos > div > div { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; }
.payment-logos img { max-width: 100%; height: auto; }

/* ── copyright bar ── */
.copyright {
    padding: 22px var(--container-pad);
    margin-top: 40px;
    margin-bottom: 20px;
}
.copyright > div {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    max-width: 2400px;
    margin: 0 auto;
    width: 100%;
}
.copyright .copy { justify-self: start; }
.copyright .payment-logos { justify-self: center; }
.copyright .dev { justify-self: end; }
.copyright .copy,
.copyright .dev {
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
}
.copyright .dev a:hover { opacity: 0.6; }

/* ── footer responsive ── */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
    .footer-social { margin-top: 24px; }
}
@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; }
    .copyright > div { grid-template-columns: 1fr; gap: 8px; text-align: center; }
    .copyright .copy, .copyright .payment-logos, .copyright .dev { justify-self: center; }
}


.double-banners .banner-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.double-banners .banner-item {
    position: relative;
    display: flex;
    flex-direction: column;
}
.double-banners .banner-title {
    margin-bottom: 0;
}
.double-banners .banner-caption {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.double-banners .banner-caption .banner-title {
    color: #fff;
}
.double-banners .banner-title {
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
}
.slideshow-slide-button-container .readmore:hover i{
    transform: translateX(4px);
}
.banner-readmore .btn, .swiper .slideshow-slide-button-container .readmore{
    font-size: 0.75rem;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #fff;
    display: flex;
}
.banner-readmore .btn i, .slideshow-slide-button-container .readmore i{
    font-size: 10px;
    transition: transform 0.2s;
}
.banner-item:hover .banner-readmore i{
    transform: translateX(4px);
}

/* video swiper */
.swiper .swiper-slide .slideshow-slide-wrapper {
    position: relative;
    overflow: hidden;
    height: 100%;
}
.module-slideshow-video .swiper .slideshow-slide-caption-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  justify-content: center;
  width: 100%;
}
.module-slideshow-video .slideshow-slide-caption-container {
    display: flex;
    position: absolute;
    bottom: 20px;
    width: 100%;
    justify-content: center;
}
.slideshow-slide-video-container video {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.module-slideshow-video .swiper-slide {
    height: 100%;
}
.product-block-title .product-name {
    font-size: 12px;
    font-weight: 400;
}
.product-block-price .amount {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
}
.product-block .product-top{
    position: relative;
    min-height: 250px;
}
.product-block .sizes-addcart-container {
    position: absolute;
    bottom: 15px;
    left: 15px;
    /* Span left:15px -> right:15px so the box stays inside the card. The template's
       Bootstrap `w-100` set width:100% which, combined with left:15px, pushed the box
       (and its size-boxes) 15px past the card edge — overflowing the page on the last
       grid column. width:auto !important overrides the w-100 utility. */
    right: 15px;
    width: auto !important;
    opacity: 0;
    transition: 0.3s ease all;
}
.product-layout:hover .product-block .sizes-addcart-container {
    opacity: 1;
}
.product-block .product-block-caption {
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding: 1rem;
}
.product-block .sizes-available .size-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    border-radius: 3px;
    background-color: white;
    cursor: pointer;
    opacity: 0.4;
    pointer-events: none;
}

#product-tagger-swiper .product-block .sizes-available .size-box {
    padding: 8px 6px;
}
.product-block .sizes-available .size-box.active {
    opacity: 1;
    pointer-events: auto;
}
.product-block .sizes-available .size-box:hover {
    background-color: black;
}
.product-block .sizes-available .size-box span{
    font-size: 11px;
    font-weight: 400;
    color: black;
}
.product-block .sizes-available .size-box:hover span{
    color: white;
}
/* Tagger module: the chosen size only gets selected (added via the Buy button),
   so persist the black/white "active" look on the selected box. */
.tagger-wrapper .product-block .sizes-available .size-box:has(span.selected) {
    background-color: black;
}
.tagger-wrapper .product-block .sizes-available .size-box span.selected {
    color: white;
}
.product-layout .wished .product-wishlist.product-wishlist-remove, .product-layout .product-wishlist.product-wishlist-add {
    display: flex;
}
.product-layout .product-wishlist.product-wishlist-remove, .product-layout .wished .product-wishlist.product-wishlist-add {
    display: none;
}
.product-layout .product-block .product-wishlist {
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}
.product-layout .product-wishlist {
    border: none;
    padding: 0;
    background: none;
    color: #A0A0A0;
}
/* Default heart: filled (font-weight 900) + black/30%. Hover (black) and
   wished (red) rules below are more specific, so they still win. */
.product-layout .product-wishlist i {
    color: rgba(0, 0, 0, 0.3);
    font-weight: 900;
}
.product-layout:hover .product-block .product-wishlist {
  opacity: 1;
  pointer-events: initial;
  transition: 0.3s;
}
.product-layout .product-block.wished .product-wishlist i {
    color: #D22B2B;
    font-weight: 900;
}
.product-layout .product-block .product-wishlist:hover i {
    color: black;
    font-weight: 900;
}
/* Sidebar cart wishlist toggle */
.cart_add_favorite .product-wishlist {
    border: none;
    padding: 0;
    background: none;
    color: #A0A0A0;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    text-decoration: none;
    transition: color 0.3s, text-decoration-color 0.3s;
}
.cart_add_favorite .product-wishlist i {
    font-size: 10px;
}
.cart_add_favorite .product-wishlist.product-wishlist-add {
    display: flex;
}
.cart_add_favorite .product-wishlist.product-wishlist-remove {
    display: none;
}
.cart_add_favorite.wished .product-wishlist.product-wishlist-add {
    display: none;
}
.cart_add_favorite.wished .product-wishlist.product-wishlist-remove {
    display: flex;
}
.cart_add_favorite.wished .product-wishlist {
    color: black;
}
.cart_add_favorite.wished .product-wishlist i {
    color: #D22B2B;
    font-weight: 900;
}
.cart_add_favorite .product-wishlist:hover {
    color: black;
    text-decoration: underline;
}
.cart_add_favorite .product-wishlist:hover i {
    color: black;
    font-weight: 900;
}
/* ---- Product card color swatches: show 3 + "+", reveal all on hover ---- */
.product-colors {
    align-items: center;
    gap: 8px;
}
/* hide the "+ περισσότερα χρώματα" text label — replaced by the + dot */
.product-colors > span {
    display: none;
}
.product-colors ul {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.product-colors ul li {
    display: flex;
}
.product-colors ul li > span {
    display: block;
    line-height: 0;
    cursor: pointer;
}
.product-colors ul li > span > div {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s;
}
.product-colors ul li > span:hover > div {
    transform: scale(1.15);
}
/* default: only the first 3 swatches are visible */
.product-colors ul li:nth-child(n + 4) {
    display: none;
}
/* "+" indicator, shown only when there are more than 3 colors */
.product-colors ul:has(li:nth-child(4))::after {
    content: "+";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
    font-size: 11px;
    line-height: 1;
    color: #555;
    cursor: pointer;
}
/* on hover: reveal every swatch and drop the "+" */
.product-colors:hover ul li {
    display: flex;
}
.product-colors:hover ul:has(li:nth-child(4))::after {
    display: none;
}
.product-thumbnail img{
    width: 100%;
    height: auto;
}
.product-block-image {
    position: relative;
}
.product-layout .product-block .product-top .product-block-image .product-label.product-label-flags.black-friday, div#product-product .product-label.black-friday {
    background: #000;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    z-index: 10;
    top: 15px;
    right: 15px;
    position: absolute;
    padding: 5px;
}
.product-label.black-friday {
    display: none !important;
}
.product-block-price .price-discount {
    display: flex;
    align-items: center;
    gap: 15px;
}
.product-block-price .amount_final {
    background-color: #D22B2B;
    color: white;
    border-radius: 3px;
    padding: 3px 5px;
}
.product-block-price .amount_before {
    color: #5A5A5A;
    font-size: 12px;
}
.product-label {
    position: absolute;
    top: 15px;
    left: 15px;
    pointer-events: none;
    background-color: rgb(255 255 255);
    padding: 5px 10px;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    border: solid 1px #111;
    font-size: 14px;
}
 .product-label.sold-out {
    border: none;
    background-color: #A64343;
    color: white;
    font-weight: 400;
    font-size: 10px;
}

.swiper-pagination-bullet {
    width: 30px;
    height: 2px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 3px;
}
.swiper-pagination-bullet-active {
    width: 30px;
    height: 2px;
    background-color: rgba(0,0,0,1);
}

.product-string.product-label-string {
    font-size: 12px;
    font-weight: bold;
}

/* tunes module */

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 8px;
}

.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 14px;   
    color: #000000;
}

.swiper-button-next, .swiper-button-prev {
    width: 20px;
    height: 30px;
}

.banner-container.tunes {
    margin: 7rem 0;
}
.tunes .container-xxl {
    position: relative;
    padding-left: 4rem;
    padding-right: 4rem;
}

@media (min-width: 1400px) {
    .banner-container.tunes .container-xxl {
        max-width: 1466px;
    }
}

.tunes .banner-image img {
    width: 100%;
}
.tunes .titles-wrapper {
	display: flex;
	align-items: center;
    justify-content: center;
	margin-bottom: 30px;
	position: relative;
}
.banner-container.tunes .swiper-pagination {
    bottom: auto;
}
.tunes .titles-wrapper-inner {
	display: flex;
	align-items: center;
}
.tunes .titles-wrapper-inner :is(.module-title, .module-subtitle) {
    font-size: 14px;
    font-weight: 400;
}
.tunes .titles-wrapper i {
	font-size: 26px;
	padding-right: 10px;
}
.tunes .titles-wrapper .titles-wrapper-inner h3 {
	font-weight: 500;
	padding-right: 4px;
	display: flex;
	align-items: center;
}
.tunes .banner-caption {
	margin-top: 10px;
	position: relative;
	padding-bottom: 10px;
}
.tunes .banner-caption:after  {
    content: '';
    width: 0px;
    height: 1px;
    background-color: #000;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: 0.5s;
}
.tunes .banner-item:hover .banner-caption:after {
    content: '';
    width: 100%;
    transition: 0.5s;
}
.tunes .banner-title {
	font-size: 14px;
	font-weight: 400;
    text-align: center;
}
.tunes .banner-subtitle {
	color: #5A5A5A;
	font-size: 10px;
	margin-top: 4px;
    text-align: center;
    font-weight: 400;
}

@media all and (max-width: 1480px) {
    .banner-container.tunes {
        margin: 2rem 0;
    }
}

.slideshow-slide-caption-wrapper {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.slideshow-slide-caption-wrapper .slideshow-slide-title {
    font-size: 20px;
    font-weight: 400;
    color: white;
    text-align: center;
}

#search .search-focus-close span {
    font-size: 9px;
    font-weight: 500;
}

#search .search-focus-close:hover i {
    color: white;
}

#search .search-focus-close:hover .circle-cont {
    background-color: black;
}

#search .circle-cont {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: white;
    transition: 0.3s ease all;
}

#offcanvasCart .cart-options-cont {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#offcanvasCart #simpler-minicart{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0rem 1.5rem;
    padding-bottom: 2rem;
}

#offcanvasCart #simpler-minicart simpler-checkout {
	max-width: unset;
}

.product-tabs-wrapper {
    position: relative;
    overflow: hidden;
    margin-bottom: 80px;
}

.product-tabs-wrapper :is(.swiper-pagination, .swiper-navigation) {
    display: none;
}

body.checkout_success #newsletter-module .agree-row > div:last-child {
    width: auto !important;
}

/* The sort/limit bar (.top-pagination) is pulled up with margin-top:-40px and
   z-index:1, which lays it over the filter trigger and swallows its clicks.
   Raise ONLY the small trigger link above it (not the full-width wrapper, or it
   would in turn block the sort/limit controls on the right). */
body.product_category .mobile-filters-trigger .ho-filter-title.ho-filter-trigger-container {
    position: relative !important;
    z-index: 5;
}

/* ==========================================================================
   Category filters as an in-flow column (desktop) instead of an overlay.
   Closed: offcanvas stays off-screen (Bootstrap default) -> products 4-up.
   Open (.show): offcanvas drops into its existing #column-left column,
   #content flexes to fill the rest and the product grid reflows to 3-up.
   Below 992px the original overlay behaviour is left untouched.
   ========================================================================== */
@media (min-width: 992px) {
    /* Let the two columns size to content instead of fixed Bootstrap widths */
    body.product_category #product-category > .row > #column-left {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
    }
    body.product_category #product-category > .row > #content {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        transition: flex-basis .2s ease;
    }

    /* Render the filters as an in-flow column, not a sliding overlay. Force
       static positioning at ALL times and toggle visibility purely via display,
       so closing can't briefly flash the fixed-position panel full-screen
       (Bootstrap drops .show before its hide transition ends). transition:none
       removes the slide animation that caused the flash. */
    body.product_category #product-category #filtersOffcanvas.offcanvas.offcanvas-start {
        position: static !important;
        transform: none !important;
        visibility: visible !important;
        transition: none !important;
        display: none;
        z-index: auto;
        width: 26.25rem; /* ~420px filter column (was 20rem/320px) */
        height: auto;
        border: 0;
        box-shadow: none;
    }
    body.product_category #product-category #filtersOffcanvas.offcanvas.offcanvas-start.show,
    body.product_category #product-category #filtersOffcanvas.offcanvas.offcanvas-start.showing {
        display: block;
    }
    /* "View products" footer button is redundant on desktop (live filtering) */
    body.product_category #product-category #filtersOffcanvas .offcanvas-footer {
        display: none;
    }
    /* On desktop the filters render as a static in-flow column, so Bootstrap's
       backdrop (enabled on the offcanvas for the MOBILE overlay) must not dim the
       page here. Scoped to the filters-open state so the cart/search offcanvas
       backdrops still work on desktop. */
    body.product_category:has(#filtersOffcanvas.show) .offcanvas-backdrop {
        display: none !important;
    }
    /* Breathing room between the filter column and the product grid */
    body.product_category #product-category > .row:has(#filtersOffcanvas.show) > #content {
        padding-left: 2rem !important;
    }
    /* Reflow the product grid 4 -> 3 columns while the filters are open */
    body.product_category #product-category > .row:has(#filtersOffcanvas.show) #product-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    /* While open, hide the toolbar FILTERS button — the open filter column has
       its own title + close (×), so we don't want two FILTERS buttons */
    body.product_category #product-category > .row:has(#filtersOffcanvas.show) .ho-filter-toolbar {
        display: none !important;
    }
}

/* Lift the filters offcanvas and the mobile menu (+ their backdrops) above the
   third-party floating widgets on mobile: #cookiescript_badge (z 99999) and
   #samaritan-container (z 999999), which otherwise poke through the open panel.
   Desktop is unaffected for filters — there the panel is position:static (z-index
   ignored) and its backdrop is hidden. Each backdrop raise is scoped to its own
   open state so the cart/search backdrops are untouched. */
#filtersOffcanvas,
#mmenu {
    z-index: 1000001;
}
body.product_category:has(#filtersOffcanvas.show) .offcanvas-backdrop,
body:has(#mmenu.show) .offcanvas-backdrop {
    z-index: 1000000;
}

/* Grid density toggle (#button-grid2 / #button-grid4). Helmi has no Tailwind, so
   the JS-added tw-grid-cols-* classes are inert — map them to real columns here.
   Kept OUTSIDE the >=992px media query so the toggle also works below 992px
   (the toolbar buttons are visible at all widths). Specificity (1,2,1) sits above
   the base repeat(4) (1,1,1) so the toggle wins when filters are closed, and below
   the desktop filter-open rule which uses !important so 3-up still wins when open. */
body.product_category #product-container.tw-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}
body.product_category #product-container.tw-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ==========================================================================
   Filter trigger per breakpoint.
   Desktop (>=992px): use the canonical trigger in <main class="site-main">
   and hide the .mobile-filters-trigger. Below 992px the defaults already do
   the opposite (mobile trigger shown, site-main one hidden), so no override
   is needed there.
   ========================================================================== */
       body.product_category .mobile-filters-trigger {
        display: none !important;
    }
@media (min-width: 992px) {


    /* The standalone site-main filter trigger is replaced by the in-toolbar
       FILTERS button on the sort/display row (see below) — hide it.
       Also hide on the product page where it has no purpose. */
    body.product_category main.site-main > a.ho-filter-title.ho-filter-trigger-container,
    body.product_product main.site-main > a.ho-filter-title.ho-filter-trigger-container {
        display: none !important;
    }
}

/* ==========================================================================
   FILTERS moved onto the sort/display toolbar row (desktop).
   Heading hidden so the toolbar sits right under the breadcrumb: FILTERS on the
   left, sort/display controls on the right. Mobile keeps the heading and the
   .mobile-filters-trigger. The #product-category ancestor bumps specificity so
   these win over the base .top-pagination rules in custom_dt.css.
   ========================================================================== */
    body.product_category .top-pagination .ho-filter-toolbar {
        display: inline-flex;
        align-items: center;
        height: 2.5rem;
        padding: 0;
        background: transparent;
        color: #000;
        text-decoration: none;
        cursor: pointer;
        flex: 0 0 auto;
        width: auto !important; /* override Bootstrap .row > * width:100% */
        max-width: none;
    }
    body.product_category .top-pagination .ho-filter-toolbar .ho-filter-trigger-button {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-size: .6875rem;
        color: #000;
        text-transform: uppercase;
        letter-spacing: .04rem;
        line-height: 1;
        cursor: pointer;
    }
    body.product_category .top-pagination .ho-filter-toolbar .fa-sliders {
        font-size: 1rem;
        color: #000;
    }
    body.product_category .top-row {
        display: none !important;
    }
@media (min-width: 992px) {

    body.product_category #product-category .top-pagination,
    body.product_category #product-category .top-pagination.row {
        margin-top: 20px !important;
        justify-content: space-between !important;
    }

}

/* ==========================================================================
   Newsletter block on checkout success page — plain CSS, no Bootstrap deps.
   Overrides every BS utility (.d-flex, .row, .form-check, .btn, etc.) used
   in extension/module/ho_newsletter.twig within this page scope.
   ========================================================================== */
body.checkout_success #newsletter-module {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    margin: 2rem 0 0;
    text-align: center;
}

/* ── Inner wrappers (replaces d-flex flex-column w-100) ── */
body.checkout_success #newsletter-module .newsletter-inner {
    display: block;
    width: 100%;
}
body.checkout_success #newsletter-module .newsletter-inner > .d-flex {
    display: block;
    width: 100%;
}
body.checkout_success #newsletter-module .newsletter_top {
    width: 100%;
}

/* ── Title (replaces h3 bootstrap margins) ── */
body.checkout_success #newsletter-module .module-title {
    display: block;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .08rem;
    text-transform: uppercase;
    color: #000;
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
    background: transparent;
}
body.checkout_success #newsletter-module .module-title i,
body.checkout_success #newsletter-module .newsletter_icon {
    display: none;
}

/* ── Subtitle ── */
body.checkout_success #newsletter-module .module-subtitle {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #000;
    margin: 0 0 2rem;
    padding: 0;
    border: 0;
}

/* ── Form container (replaces form-inline) ── */
body.checkout_success #newsletter-module .newsletter_form {
    display: block;
    width: 100%;
    max-width: 38rem;
    margin: 0 auto;
}

/* ── Email input ── */
body.checkout_success #newsletter-module .newsletter_email {
    display: block;
    width: 100%;
}
body.checkout_success #newsletter-module .newsletter_email input {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    padding: .625rem 0;
    font-size: .875rem;
    text-align: center;
    color: #000;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}
body.checkout_success #newsletter-module .newsletter_email input::placeholder {
    color: #aaa;
    text-align: center;
}

/* ── Bottom row (replaces .row .align-items-center .mt-4) ── */
body.checkout_success #newsletter-module .agree-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    /* remove Bootstrap row negative gutters */
    margin-left: 0;
    margin-right: 0;
    --bs-gutter-x: 0;
}

/* ── Left col (replaces .text-center .text-md-start) ── */
body.checkout_success #newsletter-module .agree-row > div:first-child {
    text-align: left;
    flex: 1 1 0;
    padding: 0;
}

/* ── Right col (replaces .text-center .text-md-end) ── */
body.checkout_success #newsletter-module .agree-row > div:last-child {
    text-align: right;
    flex: 0 0 auto;
    padding: 0;
}

/* ── GDPR checkbox row (replaces .form-check .mb-0) ── */
body.checkout_success #newsletter-module .newsletter_agree {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    margin: 0;
    padding: 0;
}
body.checkout_success #newsletter-module .newsletter_agree input[type="checkbox"] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: .125rem;
    border: 1px solid #888;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    accent-color: #000;
    -webkit-appearance: auto;
    appearance: auto;
}
body.checkout_success #newsletter-module .newsletter_agree label {
    display: inline;
    font-size: .8125rem;
    color: #000;
    cursor: pointer;
    margin: 0;
    padding: 0;
}
body.checkout_success #newsletter-module .newsletter_agree label a {
    text-decoration: underline;
}

/* ── Subscribe button (replaces .btn .btn-light) ── */
body.checkout_success #newsletter-module .newsletter_button button {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-size: .8125rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .08rem;
    color: #000;
    cursor: pointer;
    box-shadow: none;
    outline: none;
    transition: 0.3s ease all;
}
body.checkout_success #newsletter-module .newsletter_button button i {
    font-size: .625rem;
    transition: 0.3s ease all;
}
body.checkout_success #newsletter-module .newsletter_button button:hover i{
    transform: translateX(4px);
}

/* ── "Follow us" social section ── */
body.checkout_success .success-social {
    text-align: center;
    margin-top: 40px;
}
body.checkout_success .success-social-title {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .12rem;
    text-transform: uppercase;
    color: #000;
    margin: 0 0 1.75rem;
}
body.checkout_success .success-social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}
body.checkout_success .success-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 1.125rem;
    text-decoration: none;
    transition: background-color .3s ease;
}
body.checkout_success .success-social-icon i {
    transition: color .3s ease;
}
body.checkout_success .success-social-icon:hover {
    background: #000;
}
body.checkout_success .success-social-icon:hover i {
    color: #fff;
}

/* ── Continue / homepage button ── */
body.checkout_success .success-continue-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 276px;
    height: 50px;
    margin: 80px auto 0;
    padding: 0 1.5rem;
    background: transparent;
    border: 1px solid #000;
    border-radius: .375rem;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .04rem;
    color: #000;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background-color .3s ease, color .3s ease;
}
body.checkout_success .success-continue-btn::after {
    content: "\f054"; /* fa-chevron-right */
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    font-size: .75rem;
    position: absolute;
    right: 1rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .3s ease, transform .3s ease;
}
body.checkout_success .success-continue-btn:hover {
    background: #000;
    color: #fff;
}
body.checkout_success .success-continue-btn:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* Account pages — logo */
#logo {
    max-width: 230px;
    display: flex;
}
.account_header #logo {
    justify-content: center;
    padding: 2rem 0;
}

/* ==========================================================================
   ACCOUNT PAGES (body.account_body) — mirrors ho_blank theme
   ========================================================================== */

/* Page wrapper */
.account-wrap {
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}
.account_login .account-wrap,
.account_register .account-wrap,
.account_forgotten .account-wrap,
.account_reset .account-wrap {
    max-width: 50rem;
}

/* Card */
.card-account {
    border: 1px solid #dee2e6;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
}

/* Card greeting */
.card-greeting {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.card-greeting span {
    background-color: #000;
    color: #fff;
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.25rem;
    letter-spacing: .125rem;
    padding: .375rem 1rem .8125rem 1rem;
}
.card-greeting span + span {
    margin-top: .5rem;
}

/* Card account header — flex row (replaces inert Tailwind flex/items-center) */
.card-account .card-account-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.card-account .card-account-icon {
    font-size: 1.5rem;
    line-height: 1;
}
.card-account .card-account-title {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .0625rem;
    margin: 0;
}
.card-account .card-account-header .card-account-btns {
    margin-top: 1.5rem;
}

/* Sidebar account links */
.account-list-group .list-group-item {
    padding: .75rem 1rem;
    background: transparent;
    border-color: #dee2e6;
    position: relative;
}
.account-list-group .list-group-item a {
    display: flex;
    align-items: center;
    color: #000;
    text-decoration: none;
    font-size: .8125rem;
    font-weight: 400;
    width: 100%;
}
.account-list-group .list-group-item a:hover {
    font-weight: 600;
}
.account-list-group .list-group-item.active {
    background-color: #f8f8f8;
    border-color: #dee2e6;
}
.account-list-group .list-group-item.active::before {
    content: '';
    width: .25rem;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
}
.account-list-group .list-group-item.active a {
    font-weight: 700;
}
.account-list-group .list-group-item i {
    width: 1.75rem;
    font-size: 1rem;
}

/* Footer links */
.account_body .footer-link {
    font-size: .875rem;
    display: inline-block;
}
.account_body .footer-link:hover {
    text-decoration: underline;
}
.account_body .footer-link + .footer-link::before {
    content: '|';
    padding-left: .5rem;
    padding-right: .5rem;
}

/* Continue / primary button on account pages */
body.account_body .btn-primary,
body.account_body .d-grid .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 2rem;
    background: #000;
    border: 1px solid #000;
    border-radius: .375rem;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .04rem;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}
body.account_body .btn-primary:hover,
body.account_body .d-grid .btn:hover {
    background: transparent;
    color: #000;
}

/* Success page — message text */
body.account_success .fs-5 {
    font-size: .9375rem !important;
    color: #5a5a5a;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 500px) {
    .account-wrap {
        padding-right: .75rem;
        padding-left: .75rem;
    }
    .card-greeting span {
        font-size: 1.5rem;
        line-height: 1.5rem;
        padding: .25rem 1rem .625rem 1rem;
    }
}

/* Global checkbox styling — 24×24, 5px radius, black when checked */
.form-check:not(.form-switch) .form-check-input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
}
.form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked {
    background-color: #000;
    border-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3.5 3.5L13 4'/%3E%3C/svg%3E");
}
.form-check:not(.form-switch) .form-check-input[type="checkbox"]:focus {
    box-shadow: none;
    outline: none;
    border-color: #aaa;
}

/* Account-area radios (newsletter Yes/No, edit, address, return, etc.) —
   match the checkout/checkbox look: black box + white check when selected.
   Scoped to .card-account so the redesigned register/voucher pages are untouched. */
.card-account .form-check .form-check-input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
}
.card-account .form-check .form-check-input[type="radio"]:checked {
    background-color: #000;
    border-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3.5 3.5L13 4'/%3E%3C/svg%3E");
}
.card-account .form-check .form-check-input[type="radio"]:focus {
    box-shadow: none;
    outline: none;
    border-color: #aaa;
}
/* Lay out every account form-check as a clean row: remove Bootstrap's default
   left padding + the input's negative-margin float, and add a real gap between
   the box and its label. Covers both inline (newsletter) and block rows. */
.card-account .form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: 0;
    margin-left: 0;
}
.card-account .form-check.form-check-inline {
    display: inline-flex;
}
.card-account .form-check .form-check-input {
    margin: 0;
    float: none;
}
.card-account .form-check .form-check-label {
    margin-bottom: 0;
}

/* Account-area input/label sizing — Bootstrap defaults render at 16px and look
   oversized; bring them down to the 13px used on login/checkout. Low specificity
   so the redesigned #account-login / #account-register / #account-voucher pages
   (which set their own sizes by ID) are not affected. */
.card-account .form-control,
.card-account select.form-control,
.card-account textarea.form-control {
    font-size: .8125rem;
}
.card-account .form-label,
.card-account label,
.card-account .form-check-label {
    font-size: .8125rem;
}

/* Return form — radios should read as true radios (round), keeping the same
   black-selected / white-unselected scheme. Black circle + white centre dot.
   ID scope overrides the square .card-account radio rule above. */
#account-return .form-check .form-check-input[type="radio"] {
    border-radius: 50%;
    background-image: none;
}
#account-return .form-check .form-check-input[type="radio"]:checked {
    background-color: #000;
    border-color: #000;
    background-image: radial-gradient(circle, #fff 0, #fff 4px, transparent 5px);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
}

/* ============================================================
   Forgot-password page — ported from ho_blank. Thin, centred column with the
   underline floating-label input and uppercase heading. The template is identical
   across themes and already ships the .f-up floating-label JS. */
#account-forgotten.container-account {
    max-width: 60rem;
}
#account-forgotten form {
    max-width: 400px;
    margin: 2rem auto;
}
#account-forgotten h3 {
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: .5rem;
}
#account-forgotten .col-input {
    position: relative;
    flex-direction: column;
}
#account-forgotten .col-input label {
    position: absolute;
    top: 10px;
    z-index: 4;
    transition-duration: .4s;
    font-size: .8rem;
}
#account-forgotten .col-input label.f-up {
    top: 5px;
    z-index: 9;
    color: #808080;
    font-size: 12px;
}
#account-forgotten input[type="email"] {
    background-color: transparent;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #000;
    padding: 30px 0 10px 0;
}
#account-forgotten form input.btn {
    border-radius: 0;
}

/* Page-not-found — same treatment: centre the message on a thin column. */
#error-not-found #content {
    max-width: 400px;
    margin: 2rem auto;
    padding-top: 1rem;
    padding-bottom: 3rem;
}

/* Register captcha error message */
#account-register .captcha-container .captcha-error,
#information-contact .captcha-container .captcha-error {
    font-size: 12px;
    margin-top: .25rem;
}

/* Register captcha — same underline-only style as other inputs */
#account-register .captcha-container,
#information-contact .captcha-container {
    border: 0;
    padding: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #ccc;
    padding-bottom: .4375rem;
}
#account-register .captcha-container .form-label,
#information-contact .captcha-container .form-label {
    display: block;
    font-size: .8125rem;
    color: #000;
    font-weight: 400 !important;
    margin: 0 0 .25rem;
    padding: 0;
    letter-spacing: 0;
}
#account-register .captcha-container .form-group > div,
#information-contact .captcha-container .form-group > div {
    display: flex;
    align-items: center;
    gap: .75rem;
}
#account-register .captcha-container #input-captcha,
#information-contact .captcha-container #input-captcha {
    flex: 1;
    border: none !important;
    border-bottom: 1px solid #ccc !important;
    background: transparent !important;
    padding: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    font-size: .8125rem;
    color: #000;
    box-shadow: none !important;
    outline: none;
    border-radius: 0 !important;
    height: auto;
    min-height: 0;
    line-height: 1.5;
}
#account-register .captcha-container img,
#information-contact .captcha-container img {
    flex-shrink: 0;
    height: 2rem;
    width: auto;
    display: block;
}

/* Contact page: keep the underline on the input (like account/register),
   not on the full-width container, plus spacing from the textarea above */
#information-contact .captcha-container {
    margin-top: 1.5rem;
    border-bottom: 0;
}

/* ==========================================================================
   WISHLIST PAGE (body.account_wishlist)
   ========================================================================== */

/* 1. Full-width container — remove Bootstrap container-xxl constraints */
body.account_wishlist #product-wishlist {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}
body.account_wishlist #product-wishlist > .row {
    margin: 0;
}
body.account_wishlist #product-wishlist #content {
    padding: 0;
}

/* 2. Breadcrumbs — now styled globally (see GLOBAL BREADCRUMB block in custom_dt.css) */

/* 3. Page heading */
body.account_wishlist h1.main-content-title {
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: .04rem;
    margin-bottom: 1.5rem;
    padding: 0 3.25rem;
    display: none;
}

/* 3. Product grid — 4 columns default */
body.account_wishlist #product-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 0 1px;
}
body.account_wishlist .product-layout {
    width: 100%;
    max-width: 100%;
}

/* 4. Grid density toggle — map inert tw-grid-cols-* to real columns.
   Kept OUTSIDE any media query (like category) so the grid2/grid4 toggle works at
   every width, then overridden by the down-breakpoints below. Filters are ignored:
   the wishlist has no filter sidebar, so column count never depends on filter state. */
body.account_wishlist #product-container.tw-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}
body.account_wishlist #product-container.tw-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}
/* Below 1024px: 3-up default (grid4 collapses to 3); grid2 toggle still gives 2-up. */
@media (max-width: 1023.98px) {
    body.account_wishlist #product-container,
    body.account_wishlist #product-container.tw-grid-cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* Below 576px: locked to 2-up, density toggle hidden (same as category). */
@media (max-width: 575.98px) {
    body.account_wishlist #product-container,
    body.account_wishlist #product-container.tw-grid-cols-2,
    body.account_wishlist #product-container.tw-grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    body.account_wishlist #button-wrapper {
        display: none !important;
    }
}

/* 5. Top pagination bar — same as category / search */
body.account_wishlist .top-pagination,
body.account_wishlist .top-pagination.row {
    padding: 0 3.25rem 1rem;
    margin: 0 !important;
    --bs-gutter-x: 0;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    width: 100%;
}
body.account_wishlist .top-pagination > div {
    display: flex;
    align-items: center;
    gap: 2.125rem;
    flex-wrap: wrap;
    width: auto !important;
    max-width: none;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
}
body.account_wishlist #button-wrapper {
    display: flex;
    gap: .5rem;
    align-items: center;
}
body.account_wishlist #button-grid2,
body.account_wishlist #button-grid4 {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    line-height: 0;
    box-shadow: none !important;
    opacity: .35;
    transition: opacity .15s ease;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.account_wishlist #button-grid4.active,
body.account_wishlist #button-grid4 {
    opacity: 1;
}
body.account_wishlist #button-grid2:hover,
body.account_wishlist #button-grid4:hover {
    opacity: 1;
}
body.account_wishlist #button-grid2 svg,
body.account_wishlist #button-grid4 svg {
    fill: #000;
    height: 1rem;
    width: auto;
    display: block;
}

/* 6. Pagination bottom */
body.account_wishlist .pagination-block {
    padding: 2rem 3.25rem 3rem;
}
body.account_wishlist .pagination-more {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}
body.account_wishlist #pagination-more {
    width: 17.25rem;
    height: 3.125rem;
    background: #f6f6f8;
    border: 1px solid #000;
    border-radius: .3125rem;
    color: #000;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
body.account_wishlist #pagination-more:hover {
    background: #000;
    color: #fff;
}
body.account_wishlist #pagination-more[disabled] {
    opacity: .3;
    pointer-events: none;
}
body.account_wishlist .pagination-wrap {
    margin: 0 !important;
    --bs-gutter-x: 0;
}
body.account_wishlist .pagination-num {
    width: 100%;
}

/* 7. Empty state */
body.account_wishlist .fs-6.fw-bold {
    font-size: .875rem !important;
    font-weight: 500 !important;
    color: #5a5a5a;
    padding: 2rem 3.25rem;
}

/* ==========================================================================
   SEARCH RESULTS PAGE (body.product_search)
   ========================================================================== */

/* 1. Hide the ho_filter trigger — no filter sidebar on search */
body.product_search .ho-filter-title {
    display: none !important;
}

/* 2. Breadcrumbs — now styled globally (see GLOBAL BREADCRUMB block in custom_dt.css) */

/* 3. Page heading */
body.product_search h1.main-content-title {
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: .04rem;
    margin-bottom: 1.5rem;
    text-align: center;
    margin-top: 2rem;
}

/* 4. Text input + category select */
body.product_search #input-search,
body.product_search select[name="category_id"] {
    height: 44px;
    padding: 0 .875rem;
    border: 1px solid #ccc;
    border-radius: .375rem;
    font-size: .8125rem;
    color: #000;
    background-color: #fff;
    box-shadow: none;
}
body.product_search #input-search:focus,
body.product_search select[name="category_id"]:focus {
    border-color: #000;
    box-shadow: none;
    outline: none;
}

/* 5. Toggle switch labels + checked state */
body.product_search .form-check-label {
    font-size: .75rem;
    color: #5a5a5a;
}
body.product_search .form-check-input:checked {
    background-color: #000;
    border-color: #000;
}
body.product_search .form-check-input:focus {
    box-shadow: none;
    border-color: #aaa;
}

/* 6. Search button */
body.product_search #button-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 2rem;
    background: #000;
    border: 1px solid #000;
    border-radius: .375rem;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .04rem;
    color: #fff;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}
body.product_search #button-search:hover {
    background: transparent;
    color: #000;
}

/* 7. Product grid — 4 columns default (same as category) */
body.product_search #product-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 0 1px;
}
/* Scope to #product-container so this does NOT leak into the live-search
   dropdown (#searchOffcanvas .product-layout.col-6.col-md-3), whose cards rely
   on their Bootstrap column widths. Without the scope, width:100% collapsed the
   live-search grid to a single column on the search-results page only. */
body.product_search #product-container .product-layout {
    width: 100%;
    max-width: 100%;
}

/* 8. Grid density toggle — map inert tw-grid-cols-* to real columns.
   Kept OUTSIDE any media query (like category) so the grid2/grid4 toggle works at
   every width, then overridden by the down-breakpoints below. No filter sidebar on
   search, so column count never depends on filter state. */
body.product_search #product-container.tw-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}
body.product_search #product-container.tw-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}
/* Below 1024px: 3-up default (grid4 collapses to 3); grid2 toggle still gives 2-up. */
@media (max-width: 1023.98px) {
    body.product_search #product-container,
    body.product_search #product-container.tw-grid-cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* Below 576px: locked to 2-up, density toggle hidden (same as category). */
@media (max-width: 575.98px) {
    body.product_search #product-container,
    body.product_search #product-container.tw-grid-cols-2,
    body.product_search #product-container.tw-grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    body.product_search #button-wrapper {
        display: none !important;
    }
}

/* 9. Top pagination bar (sort + limit + grid icons) — same as category page */
body.product_search .top-pagination,
body.product_search .top-pagination.row {
    padding: 0 3.25rem 1rem;
    margin: 0 !important;
    --bs-gutter-x: 0;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    position: relative;
    z-index: 11;
    width: 100%;
}
body.product_search .top-pagination > div {
    display: flex;
    align-items: center;
    gap: 2.125rem;
    flex-wrap: wrap;
    width: auto !important;
    max-width: none;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
}
body.product_search .top-pagination #pagination-top {
    flex: 0 0 auto;
    margin-left: 0;
}
body.product_search .top-pagination .dropdown {
    position: relative;
}
body.product_search .top-pagination .btn-sorting,
body.product_search .top-pagination .btn-limiting {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: .6875rem;
    color: #000;
    cursor: pointer;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    text-transform: uppercase;
    letter-spacing: .04rem;
    line-height: 1;
}
body.product_search .top-pagination .btn-sorting::after,
body.product_search .top-pagination .btn-limiting::after {
    content: "\f078";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    font-size: .5rem;
    margin-left: .375rem;
    color: #000;
    border: 0;
    transform: none;
    transition: transform .15s ease;
}
body.product_search .top-pagination .dropdown.show .btn-sorting::after,
body.product_search .top-pagination .dropdown.show .btn-limiting::after {
    transform: rotate(180deg);
}
body.product_search .top-pagination .btn-sorting span,
body.product_search .top-pagination .btn-limiting span {
    color: #5a5a5a;
    font-weight: 400;
    margin-left: .25rem;
}
body.product_search .top-pagination .dropdown-menu {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: .3125rem;
    padding: .5rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    min-width: 11rem;
}
body.product_search .top-pagination .dropdown-item {
    padding: .5rem 1rem;
    font-size: .75rem;
    color: #000;
    text-decoration: none;
    display: block;
}
body.product_search .top-pagination .dropdown-item:hover {
    background: #f6f6f8;
}
body.product_search .top-pagination .dropdown-item.active {
    background: #000;
    color: #fff;
}
body.product_search #button-wrapper {
    display: flex;
    gap: .5rem;
    align-items: center;
}
body.product_search #button-grid2,
body.product_search #button-grid4 {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    line-height: 0;
    box-shadow: none !important;
    opacity: .35;
    transition: opacity .15s ease;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.product_search #button-grid4.active,
body.product_search #button-grid4 {
    opacity: 1;
}
body.product_search #button-grid2:hover,
body.product_search #button-grid4:hover {
    opacity: 1;
}
body.product_search #button-grid2 svg,
body.product_search #button-grid4 svg {
    fill: #000;
    height: 1rem;
    width: auto;
    display: block;
}

/* 8. No-results message */
body.product_search .fs-5.fw-bold {
    font-size: .875rem !important;
    font-weight: 500 !important;
    color: #5a5a5a;
    padding: 2rem 0;
}

/* 9. "View more" / load-more button — same as the category page */
body.product_search .pagination-block {
    padding: 2rem 3.25rem 3rem;
}
body.product_search .pagination-more {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}
body.product_search #pagination-more {
    width: 17.25rem;
    height: 3.125rem;
    background: #f6f6f8;
    border: 1px solid #000;
    border-radius: .3125rem;
    color: #000;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
body.product_search #pagination-more:hover {
    background: #000;
    color: #fff;
}
body.product_search #pagination-more[disabled] {
    opacity: .3;
    pointer-events: none;
}
body.product_search .pagination-wrap {
    margin: 0 !important;
    --bs-gutter-x: 0;
}
body.product_search .pagination-num {
    width: 100%;
}

/* View-all-results button — matches .success-continue-btn style */
#searchOffcanvas .live-results__search-page {
    padding: 1.5rem 0;
}
#searchOffcanvas .live-results__search-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 276px;
    height: 50px;
    padding: 0 1.5rem;
    background: transparent;
    border: 1px solid #000;
    border-radius: .375rem;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .04rem;
    color: #000;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background-color .3s ease, color .3s ease;
}
#searchOffcanvas .live-results__no_results-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 2rem;
    padding-right: 2rem;
}
#searchOffcanvas .live-results__search-page .btn i {
    position: absolute;
    right: 1rem;
    font-size: .75rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .3s ease, transform .3s ease;
}
#searchOffcanvas .live-results__search-page .btn:hover {
    background: #000;
    color: #fff;
}
#searchOffcanvas .live-results__search-page .btn:hover i {
    opacity: 1;
    transform: translateX(0);
}

/* Bootstrap row g-1 has negative margins (-2px) that bleed outside the offcanvas — clip them */
#searchOffcanvas .search-products-wrap {
    overflow-x: hidden;
}

/* Search offcanvas product block — sizes overflow fix (mirrors body.product_category fix) */
#searchOffcanvas .sizes-addcart-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: .9375rem;
    padding: 0 1rem;
    z-index: 2;
    opacity: 0;
    transition: opacity .2s ease;
    box-sizing: border-box;
}
#searchOffcanvas .product-layout:hover .sizes-addcart-container {
    opacity: 1;
}
#searchOffcanvas .sizes-available {
    width: 100%;
}
#searchOffcanvas .sizes-available-inner {
    display: flex;
    gap: .1875rem;
    flex-wrap: wrap;
}
#searchOffcanvas .size-box {
    background: #fff;
    border-radius: .3125rem;
    height: 1.875rem;
    min-width: 2.3125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    color: #000;
    cursor: pointer;
}
#searchOffcanvas .size-box span {
    padding: 0 .625rem;
    color: inherit;
    display: inline-block;
}
#searchOffcanvas .size-box:not(.active) {
    opacity: .5;
}
#searchOffcanvas .size-box:not(.active) span {
    color: #5a5a5a;
    text-decoration: line-through;
    cursor: default;
}
#searchOffcanvas .size-box.active:hover {
    background: #000;
    color: #fff;
}
.topbar {
    transition: 0.3s ease all;
}
.product_product .ho-filter-trigger-container {
    display: none !important;
}
.content-bottom {
    margin-top: 60px;
}
#product-tabs {
    margin-top: 60px;
}
@media only screen and (max-width: 1024px) {
    .product-tabs-wrapper {
        margin-bottom: 40px;
    }
    body.product_category #product-container .product-wishlist {
        top: 6px;
        right: 6px;
    }
    .product-layout .product-wishlist i {
        font-weight: 300;
        color: black;
    }
    .banner-container.fw-image.mobile .banner-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .banner-container.fw-image.mobile .readmore {
        font-size: 10px;
    }
    .module-slideshow.fw-image.mobile .readmore{
        font-size: 10px;
    }
    .slideshow-slide-caption-wrapper .slideshow-slide-title {
        font-size: 15px;
    }
    .module-slideshow.fw-image.mobile .slideshow-slide-caption-wrapper {
        bottom: 0;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 16px;
        left: 0;
        transform: none;
        width: 100%;
    }
    .banner-container.fw-image.mobile .banner-caption {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-content: center;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .banner-container.fw-image.mobile.single-banners .banner-caption .banner-title {
        margin-bottom: 0;
        font-size: 15px;
    }
    .module-slideshow.fw-image.mobile .slideshow-slide-caption-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .module-slideshow.fw-image.mobile .slideshow-slide-caption-container h2{
        margin-bottom: 0;
    }
    .double-banners .banner-image > img {
        aspect-ratio: 414/550;
    }
    .tunes .swiper-pagination-wrap {
        margin-top: 0;
    }
    .tunes .banner-title {
        font-size: 12px;
        text-align: center;
        margin-bottom: 3px;
    }

    .tunes .banner-subtitle {
        font-size: 8px;
        text-align: center;
    }
    .tunes .container-xxl {
        padding-left: 0;
        padding-right: 0;
    }
    .tunes :is(.swiper-button-next, .swiper-button-prev) {
        display: none;
    }
    .tunes .titles-wrapper {
        margin-bottom: 1rem;
    }
    .tunes .titles-wrapper .titles-wrapper-inner h3 {
        font-size: 12px;
    }
    .tunes .titles-wrapper-inner :is(.module-title, .module-subtitle) {
        font-size: 12px;
    }
    .double-banners .banner-caption {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 16px;
    }
    .banner-readmore .btn, .swiper .slideshow-slide-button-container .readmore {
        font-size: 10px;
    }
    .module-slideshow .banner-readmore .btn, .swiper .slideshow-slide-button-container .readmore {
        font-size: 13px;
        line-height: 1;
    }
    .double-banners .banner-caption .banner-title {
        font-size: 15px;
    }
    .cart_add_favorite .product-wishlist {
        color: #5A5A5A;
    }
    #cookiescript_badge {
        bottom: 80px !important;
    }
    .samaritan-container#samaritandiv {
        bottom: 55px !important;
    }
    #body.mmenu-open :is(#top-header-msg, #top-header-msg .topbar__msg) {
        height: 0;
        overflow: hidden;
        padding: 0;
    }
    #searchOffcanvas .live-results__suggestion-box li a {
        font-size: 14px;
    }
    #samaritan-container #samaritandiv {
        bottom: 55px !important;
    }
    .product-label.sold-out {
        top: 10px;
        left: 10px;
    }
    .banner-container.tunes {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 451px) {
    .offcancas-menu.offcanvas-start {
        height: 70vh;
        border-radius: 0 0 16px 16px;
        box-shadow: 0px 35px 30px #00000029;
    }

    .footer-social {
        justify-content: center;
        margin-top: 40px;
    }
    .product-block-title .product-name {
        font-size: 10px;
    }
    .tunes .titles-wrapper i {
        font-size: 20px;
        padding-right: 8px;
    }
}

/* b2b */
.product-block .product-block-price-retail .product__priceref-retail, .product-block .product__priceref-wholesale{
    font-size: 12px !important;
    color: #5A5A5A !important;
}
.product-block .product-block-price.retail-amount {
    font-weight: 400;
}
.product-block .amount-wholesale {
    color: #A64343 !important;
}

#product-product .product-price.product-priceb2b {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
#product-product .product-price.product-priceb2b .whole__prices {
    color: #A64343 !important;
    line-height: 1;
}

/* Generic success pages (common/success.twig): account/voucher/success, returns,
   affiliate/success, information/contact, information/gdpr, checkout/failure,
   productbundles. Center the content + add top spacing. Scoped to .container-xxl so it
   does NOT affect checkout/success (the custom thank-you page, which uses .container). */
#common-success.container-xxl {
    margin-top: 4rem;
    margin-bottom: 4rem;
}
#common-success.container-xxl #content {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
}

/* Payment method rows: brand-icon layout for Apple Pay / Google Pay */
#payment-method .form-check .pm-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
#payment-method .form-check .pm-row > strong,
#payment-method .form-check .pm-row > p,
#payment-method .form-check .pm-row > img {
    flex-basis: 100%;
}
#payment-method .form-check .pm-row > strong {
    order: 2;
    flex-basis: auto;
}
#payment-method .form-check .pm-brand-icon {
    order: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 48px;
    padding: 0 10px;
    border-radius: 6px;
    background: #000;
    color: #fff;
    font-size: 26px;
    line-height: 1;
}
#payment-method .form-check .pm-brand-googlepay {
    background: #fff;
    color: #3c4043;
    border: 1px solid #dadce0;
}

/* ============================================================
   Category product card — image carousel (Feedback 25/6 #3)
   Pure CSS scroll-snap: native touch swipe + wheel→horizontal on desktop.
   ============================================================ */
.hi-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.hi-carousel__track {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    touch-action: pan-x;
    -webkit-user-select: none;
    user-select: none;
}
.hi-carousel__track::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
}
.hi-carousel__slide {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
.hi-carousel__slide a {
    display: block;
    line-height: 0;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}
.hi-carousel__slide img,
.hi-carousel__slide video {
    width: 100%;
    height: auto;
    display: block;
    -webkit-user-drag: none;
    pointer-events: none;
}