/* ================================
   HOCKEYLAND – CUSTOM CSS
   Bezpečná sloučená verze
   Header, carousel, search, typografie, FAQ, newsletter, scroll-to-top
================================ */

/* ================================
   HEADER / NAVIGATION
================================ */

#navigation a,
#navigation li > a {
    transition: color 0.25s ease !important;
}

#navigation a:hover,
#navigation li:hover > a {
    color: #f19210 !important;
}

.navigation-buttons a,
.navigation-buttons button,
.navigation-buttons a::before,
.navigation-buttons a::after,
.navigation-buttons button::before,
.navigation-buttons button::after,
.navigation-buttons svg,
.navigation-buttons path,
.navigation-buttons i {
    transition:
        color 0.25s ease,
        fill 0.25s ease,
        stroke 0.25s ease,
        opacity 0.25s ease !important;
}

.navigation-buttons a[data-target="search"]:hover,
.navigation-buttons a[data-target="search"]:hover::before,
.navigation-buttons a[data-target="search"]:hover::after {
    color: #f19210 !important;
    fill: #f19210 !important;
    stroke: #f19210 !important;
}

.navigation-buttons .top-nav-button-login:hover,
.navigation-buttons .top-nav-button-login:hover::before,
.navigation-buttons .top-nav-button-login:hover::after {
    color: #f19210 !important;
    fill: #f19210 !important;
    stroke: #f19210 !important;
}

.navigation-buttons a[data-testid="headerCart"] {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.navigation-buttons a[data-testid="headerCart"]:hover,
.navigation-buttons a[data-testid="headerCart"]:hover::before,
.navigation-buttons a[data-testid="headerCart"]:hover::after {
    color: #f19210 !important;
    fill: #f19210 !important;
    stroke: #f19210 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.navigation-buttons
    a[data-testid="headerCart"]
    i[data-testid="headerCartCount"] {
    background: #f19210 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    border: none !important;

    min-width: 18px !important;
    height: 18px !important;

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

    font-family: "Poppins", sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;

    transform: translateY(-0.5px);
}

.navigation-buttons
    a[data-testid="headerCart"]:hover
    i[data-testid="headerCartCount"] {
    background: #f19210 !important;
    color: #ffffff !important;
}

/* Skrytí "Vytvořeno Shoptetem" – pouze konkrétní odkaz, bez zásahu do právních odkazů */

footer a[href*="shoptet"] {
    display: none !important;
}

/* ================================
   NEWSLETTER
================================ */

.container.footer-newsletter {
    display: none !important;
}

/* Newsletter box / sidebar tlačítko */

#formNewsletterWidget button.btn.btn-default.btn-arrow-right,
.box-newsletter button.btn.btn-default.btn-arrow-right,
.newsletter-widget button.btn.btn-default.btn-arrow-right {
    width: 48px !important;
    height: 48px !important;

    min-width: 48px !important;
    min-height: 48px !important;

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

    background-color: #f19210 !important;
    border-color: #f19210 !important;

    color: transparent !important;

    padding: 0 !important;
    margin: 0 !important;

    box-shadow: none !important;
    outline: none !important;
}

#formNewsletterWidget button.btn.btn-default.btn-arrow-right:hover,
#formNewsletterWidget button.btn.btn-default.btn-arrow-right:active,
#formNewsletterWidget button.btn.btn-default.btn-arrow-right:focus,
.box-newsletter button.btn.btn-default.btn-arrow-right:hover,
.box-newsletter button.btn.btn-default.btn-arrow-right:active,
.box-newsletter button.btn.btn-default.btn-arrow-right:focus,
.newsletter-widget button.btn.btn-default.btn-arrow-right:hover,
.newsletter-widget button.btn.btn-default.btn-arrow-right:active,
.newsletter-widget button.btn.btn-default.btn-arrow-right:focus {
    background-color: #ffaf41 !important;
    border-color: #ffaf41 !important;

    color: transparent !important;

    box-shadow: none !important;
    outline: none !important;
}

#formNewsletterWidget button.btn.btn-default.btn-arrow-right .sr-only,
.box-newsletter button.btn.btn-default.btn-arrow-right .sr-only,
.newsletter-widget button.btn.btn-default.btn-arrow-right .sr-only {
    display: none !important;
}

#formNewsletterWidget button.btn.btn-default.btn-arrow-right::before,
.box-newsletter button.btn.btn-default.btn-arrow-right::before,
.newsletter-widget button.btn.btn-default.btn-arrow-right::before {
    content: "" !important;
    display: none !important;
}

#formNewsletterWidget button.btn.btn-default.btn-arrow-right::after,
.box-newsletter button.btn.btn-default.btn-arrow-right::after,
.newsletter-widget button.btn.btn-default.btn-arrow-right::after {
    content: "" !important;

    display: block !important;

    width: 22px !important;
    height: 22px !important;

    background-size: 22px 22px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.5' fill='none' stroke-linecap='butt' stroke-linejoin='miter'><path d='M5 12 H19'></path><path d='M12 5 L19 12 L12 19'></path></svg>") !important;
}

/* Footer newsletter na mobilu */

@media (max-width: 768px) {
    .container.footer-newsletter {
        display: block !important;
    }

    .container.footer-newsletter button.btn-arrow-right .sr-only {
        display: none !important;
    }

    .container.footer-newsletter button.btn.btn-default.btn-arrow-right {
        background-color: #f19210 !important;
        border-color: #f19210 !important;
        color: transparent !important;
    }

    .container.footer-newsletter button.btn.btn-default.btn-arrow-right:hover,
    .container.footer-newsletter button.btn.btn-default.btn-arrow-right:active,
    .container.footer-newsletter button.btn.btn-default.btn-arrow-right:focus {
        background-color: #ffaf41 !important;
        border-color: #ffaf41 !important;
        color: transparent !important;
    }

    .container.footer-newsletter
        button.btn.btn-default.btn-arrow-right::before {
        content: "" !important;
        display: none !important;
    }

    .container.footer-newsletter button.btn.btn-default.btn-arrow-right::after {
        content: "" !important;
        display: block !important;

        width: 22px !important;
        height: 22px !important;
        background-size: 22px 22px !important;

        background-repeat: no-repeat !important;
        background-position: center !important;

        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.5' fill='none' stroke-linecap='butt' stroke-linejoin='miter'><path d='M5 12 H19'></path><path d='M12 5 L19 12 L12 19'></path></svg>") !important;
    }
}

/* ================================
   LINKA POD HOMEPAGE TEXTEM
================================ */

.homepage-texts-wrapper {
    border-bottom: 1px solid #eee !important;
    padding-bottom: 18px !important;
}

@media (max-width: 767px) {
    .homepage-texts-wrapper {
        padding-bottom: 14px !important;
    }
}

/* ================================
   HERO CAROUSEL
================================ */

#carousel {
    position: relative;
}


/* ================================
   HERO CAROUSEL – CTA TLAČÍTKA
   Aktuálně aktivní bannery: 2
   1. banner
   2. banner
================================ */

/* Společný vzhled tlačítek */
#carousel .hl-carousel-button {
    position: absolute !important;

    left: 8.51% !important;
    top: 69.62% !important;

    width: auto !important;
    height: 10.09% !important;

    min-width: 0 !important;
    min-height: 0 !important;

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

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0 2em !important;

    border: 0 !important;
    border-radius: 999px !important;

    font-family: "Poppins", sans-serif !important;
    font-size: clamp(10px, 1.05vw, 16px) !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;

    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    box-shadow: none !important;
    outline: none !important;

    cursor: pointer !important;

    z-index: 25 !important;

    transition:
        filter 0.2s ease,
        transform 0.2s ease !important;
}

#carousel .hl-carousel-button:hover,
#carousel .hl-carousel-button:focus {
    text-decoration: none !important;
    filter: brightness(0.96) !important;
}

#carousel .hl-carousel-button:active {
    transform: scale(0.98) !important;
}

/* 1. banner */
#carousel .hl-carousel-button--slide-1,
#carousel .hl-carousel-button--slide-1:visited {
    background-color: #b4ecf2 !important;
    color: #273a3e !important;
}

/* 2. banner */
#carousel .hl-carousel-button--slide-2,
#carousel .hl-carousel-button--slide-2:visited {
    background-color: #e3f2ff !important;
    color: #203e9a !important;
}

/* 3. banner */
#carousel .hl-carousel-button--slide-3,
#carousel .hl-carousel-button--slide-3:visited {
    background-color: #b6a875 !important;
    color: #ffffff !important;
}

/* Mobil – šablona banneru 4000 × 5200 px */
@media (max-width: 767px) {
    #carousel .hl-carousel-button {
        left: 12% !important;
        top: 41.42% !important;

        width: auto !important;
        height: 7.31% !important;

        padding: 0 2em !important;

        font-size: clamp(10px, 3.2vw, 14px) !important;
    }
}


#carousel .carousel-control.left,
#carousel .carousel-control.right {
    position: absolute;

    top: 54% !important;
    transform: translateY(-50%) !important;

    width: 36px !important;
    height: 36px !important;

    padding: 0 !important;

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

    background: transparent !important;
    background-image: none !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    outline: none !important;
    text-shadow: none !important;

    opacity: 1 !important;
    z-index: 30 !important;

    overflow: visible !important;
}

#carousel .carousel-control.left {
    left: 45px !important;
}

#carousel .carousel-control.right {
    right: 45px !important;
}

#carousel .carousel-control span,
#carousel .carousel-control i {
    display: none !important;
}

#carousel .carousel-control.left::before,
#carousel .carousel-control.right::before {
    content: none !important;
}

#carousel .carousel-control.left::after,
#carousel .carousel-control.right::after {
    display: block !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 36px !important;
    font-weight: 300 !important;
    line-height: 1 !important;

    color: rgba(255, 255, 255, 0.65) !important;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

#carousel .carousel-control.left::after {
    content: "‹";
    transform: translate(-1px, -2px);
}

#carousel .carousel-control.right::after {
    content: "›";
    transform: translate(1px, -2px);
}

#carousel .carousel-control.left:hover::after,
#carousel .carousel-control.right:hover::after {
    color: rgba(255, 255, 255, 0.92) !important;
}

@media (max-width: 767px) {
    #carousel .carousel-control.left,
    #carousel .carousel-control.right {
        display: none !important;
    }
}

/* Tečky pod hero carouselem */

#carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    margin: 18px 0 0 !important;
    padding: 0 !important;

    line-height: 1;

    transform: none !important;
}

#carousel-dots button {
    appearance: none;
    -webkit-appearance: none;

    background: none;
    border: 0;

    padding: 0;
    margin: 0;

    cursor: pointer;

    font-family: "Poppins", sans-serif;
    font-size: 18px;
    line-height: 1;
    font-weight: 400;

    color: rgba(0, 0, 0, 0.38);

    transition:
        color 0.2s ease,
        transform 0.2s ease,
        font-size 0.2s ease,
        font-weight 0.2s ease;
}

#carousel-dots button:hover {
    color: rgba(0, 0, 0, 0.6);
    transform: scale(1.1);
}

#carousel-dots button.is-active {
    color: #000000;
    font-size: 22px;
    font-weight: 600;
}

@media (max-width: 767px) {
    #carousel-dots {
        gap: 8px;
        margin: 6px 0 0 !important;
        transform: translateY(-6px) !important;
    }

    #carousel-dots button {
        font-size: 16px;
    }

    #carousel-dots button.is-active {
        font-size: 19px;
    }
}

/* ================================
   SEARCH FORM
   Vycentrovaný a rozšířený vyhledávací panel
   Výška inputu i tlačítka zůstává 60 px
================================ */

/*
 * Výchozí stav formuláře na ostatních místech webu.
 * Formulář nikdy nepřesáhne šířku svého sloupce.
 */
.search-form.compact-form,
.search-form.js-search-main {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}

/*
 * Rozšíření a vycentrování pouze na samostatné
 * vyhledávací obrazovce Shoptetu.
 */
/*
 * Rozšíření a vycentrování pouze v hlavním vyhledávacím panelu,
 * který obsahuje také sekci doporučených produktů.
 * Tím se pravidlo nepoužije na vyhledávání v prázdném košíku.
 */
.search:has(> .recommended-products) > .search-form.compact-form,
.search:has(> .recommended-products) > .search-form.js-search-main {
    width: 560px !important;
    max-width: calc(100vw - 40px) !important;

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

.search-form.compact-form fieldset,
.search-form.js-search-main fieldset {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    box-sizing: border-box !important;
}

.search-form.compact-form input[data-testid="searchInput"],
.search-form.js-search-main input[data-testid="searchInput"],
.search-form.compact-form .query-input,
.search-form.js-search-main .query-input {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    height: 60px !important;

    margin: 0 !important;
    padding-right: 70px !important;

    box-sizing: border-box !important;
}

.search-form.compact-form button[data-testid="searchBtn"],
.search-form.js-search-main button[data-testid="searchBtn"],
.search-form.compact-form .btn-arrow-right.btn-lg,
.search-form.js-search-main .btn-arrow-right.btn-lg {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;

    transform: none !important;

    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;

    margin: 0 !important;
    padding: 0 !important;

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

    background-color: #f19210 !important;
    border-color: #f19210 !important;
    color: transparent !important;

    z-index: 10 !important;
    line-height: 1 !important;
}

.search-form.compact-form button[data-testid="searchBtn"]:hover,
.search-form.js-search-main button[data-testid="searchBtn"]:hover,
.search-form.compact-form .btn-arrow-right.btn-lg:hover,
.search-form.js-search-main .btn-arrow-right.btn-lg:hover {
    background-color: #ffaf41 !important;
    border-color: #ffaf41 !important;
}

.search-form.compact-form button[data-testid="searchBtn"]::before,
.search-form.js-search-main button[data-testid="searchBtn"]::before,
.search-form.compact-form .btn-arrow-right.btn-lg::before,
.search-form.js-search-main .btn-arrow-right.btn-lg::before {
    content: "" !important;
    display: none !important;
}

.search-form.compact-form button[data-testid="searchBtn"]::after,
.search-form.js-search-main button[data-testid="searchBtn"]::after,
.search-form.compact-form .btn-arrow-right.btn-lg::after,
.search-form.js-search-main .btn-arrow-right.btn-lg::after {
    content: "" !important;

    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    transform: translate(-50%, -50%) !important;

    display: block !important;

    width: 23px !important;
    height: 23px !important;
    background-size: 23px 23px !important;

    background-repeat: no-repeat !important;
    background-position: center !important;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.5' fill='none' stroke-linecap='butt' stroke-linejoin='miter'><path d='M5 12 H19'></path><path d='M12 5 L19 12 L12 19'></path></svg>") !important;
}

.search-form.compact-form .search-whisperer,
.search-form.js-search-main .search-whisperer {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    top: 100% !important;

    width: 100% !important;

    z-index: 20 !important;
}

@media (max-width: 767px) {
    .search:has(> .recommended-products) > .search-form.compact-form,
    .search:has(> .recommended-products) > .search-form.js-search-main {
        width: calc(100vw - 32px) !important;
        max-width: 560px !important;

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

/* ================================
   TYPOGRAFIE
================================ */

:root {
    --fs-h1: 25px;
    --fs-h2: 21px;
    --fs-h3: 18px;
    --fs-h4: 16px;

    --fs-body: 15px;
    --fs-small: 14px;
    --fs-price: 16px;

    --lh-h1: 1.15;
    --lh-h2: 1.22;
    --lh-h3: 1.28;
    --lh-h4: 1.3;
    --lh-body: 1.55;
}

main h1,
#content h1,
.content-wrapper h1,
.content-inner h1,
article h1,
section h1 {
    font-size: var(--fs-h1) !important;
    line-height: var(--lh-h1) !important;
}

main h2,
#content h2,
.content-wrapper h2,
.content-inner h2,
article h2,
section h2 {
    font-size: var(--fs-h2) !important;
    line-height: var(--lh-h2) !important;
}

main h3,
#content h3,
.content-wrapper h3,
.content-inner h3,
article h3,
section h3 {
    font-size: var(--fs-h3) !important;
    line-height: var(--lh-h3) !important;
}

main h4,
#content h4,
.content-wrapper h4,
.content-inner h4,
article h4,
section h4 {
    font-size: var(--fs-h4) !important;
    line-height: var(--lh-h4) !important;
}

main p,
main li,
main dt,
main dd,
main blockquote,
#content p,
#content li,
#content dt,
#content dd,
#content blockquote,
.content-wrapper p,
.content-wrapper li,
.content-wrapper dt,
.content-wrapper dd,
.content-wrapper blockquote,
.content-inner p,
.content-inner li,
.content-inner dt,
.content-inner dd,
.content-inner blockquote,
article p,
article li,
article dt,
article dd,
article blockquote,
section p,
section li,
section dt,
section dd,
section blockquote {
    font-size: var(--fs-body) !important;
    line-height: var(--lh-body) !important;
}

.news-item .title,
.news-item h2,
.news-item h3,
.blog-title {
    font-size: calc(var(--fs-h3) + 1px) !important;
}

.news-item p,
.blog-perex {
    font-size: var(--fs-small) !important;
}

.product-name {
    font-size: var(--fs-small) !important;
}

.price-final,
.price {
    font-size: var(--fs-price) !important;
}

.newsletter-header h3,
.newsletter-header h4,
.newsletter-header .topic,
.box-newsletter .topic,
.footer-newsletter .topic {
    font-size: var(--fs-h2) !important;
}

.newsletter-header p,
.box-newsletter p,
.footer-newsletter p {
    font-size: var(--fs-body) !important;
}

main .h1,
#content .h1,
.content-wrapper .h1,
.content-inner .h1,
article .h1,
section .h1 {
    font-size: 25px !important;
    line-height: 1.15 !important;
}

main .h2,
#content .h2,
.content-wrapper .h2,
.content-inner .h2,
article .h2,
section .h2 {
    font-size: 21px !important;
    line-height: 1.22 !important;
}

main .h3,
#content .h3,
.content-wrapper .h3,
.content-inner .h3,
article .h3,
section .h3 {
    font-size: 18px !important;
    line-height: 1.28 !important;
}

@media (max-width: 767px) {
    :root {
        --fs-h1: 21.5px;
        --fs-h2: 18px;
        --fs-h3: 15.5px;
        --fs-h4: 14px;

        --fs-body: 13.5px;
        --fs-small: 13px;
        --fs-price: 14.5px;
    }

    main .h1,
    #content .h1,
    .content-wrapper .h1,
    .content-inner .h1,
    article .h1,
    section .h1 {
        font-size: 21.5px !important;
    }

    main .h2,
    #content .h2,
    .content-wrapper .h2,
    .content-inner .h2,
    article .h2,
    section .h2 {
        font-size: 18px !important;
    }

    main .h3,
    #content .h3,
    .content-wrapper .h3,
    .content-inner .h3,
    article .h3,
    section .h3 {
        font-size: 15.5px !important;
    }

    .newsletter-header h3,
    .newsletter-header h4,
    .newsletter-header .topic,
    .box-newsletter .topic,
    .footer-newsletter .topic {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }
}

/* Košík – nadpis */

.cart-heading.h1::before,
.cart-heading::before {
    font-size: 26px !important;
    margin-right: 10px !important;

    display: inline-block !important;
    vertical-align: middle !important;

    transform: translateY(-2px) !important;
}

@media (max-width: 767px) {
    .cart-heading.h1::before,
    .cart-heading::before {
        font-size: 22px !important;
        margin-right: 8px !important;
        transform: translateY(-1px) !important;
    }
}

/* ================================
   FAQ SECTION
================================ */

/* Odsazení FAQ při přechodu přes kotvu #faq */
#faq {
    scroll-margin-top: 50px;
}

.hl-faq-section {
    background: #fff !important;

    margin-top: 120px !important;
    margin-bottom: 64px !important;

    padding: 0 20px !important;
}

.hl-faq-inner {
    max-width: 920px !important;
    margin: 0 auto !important;
}

.hl-faq-title {
    margin: 0 0 10px !important;

    text-align: center !important;

    font-size: 28px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.hl-faq-subtitle {
    max-width: 620px !important;
    margin: 0 auto 28px !important;

    text-align: center !important;

    font-size: 15px !important;
    line-height: 1.6 !important;

    color: #666 !important;
}

.hl-faq-item {
    border-bottom: 1px solid #e6e6e6 !important;
    padding: 17px 0 !important;
}

.hl-faq-item:first-of-type {
    border-top: 1px solid #e6e6e6 !important;
}

.hl-faq-question {
    cursor: pointer !important;
    list-style: none !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;

    color: #111 !important;

    padding-right: 34px !important;

    position: relative !important;
}

.hl-faq-question::-webkit-details-marker {
    display: none !important;
}

.hl-faq-question::after {
    content: "+" !important;

    position: absolute !important;

    right: 2px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 400 !important;

    color: #f19210 !important;
}

.hl-faq-item[open] .hl-faq-question::after {
    content: "−" !important;
}

.hl-faq-answer {
    margin: 12px 0 0 !important;

    max-width: 760px !important;

    font-size: 15px !important;
    line-height: 1.65 !important;

    color: #444 !important;
}

@media (max-width: 767px) {
    .hl-faq-section {
        margin-top: 85px !important;
        margin-bottom: 48px !important;

        padding: 0 16px !important;
    }

    .hl-faq-title {
        font-size: 24px !important;
    }

    .hl-faq-subtitle {
        font-size: 14px !important;
        margin-bottom: 22px !important;
    }

    .hl-faq-question {
        font-size: 15px !important;
    }

    .hl-faq-answer {
        font-size: 14px !important;
    }
}

/* ================================
   FOOTER CUSTOMER LINKS
   Pouze vzhled odkazů v části "Pro zákazníky"
   Bez zásahu do layoutu patičky
================================ */

#footer .custom-footer__articles ul {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

#footer .custom-footer__articles ul > li {
    margin-left: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

#footer .custom-footer__articles ul > li::before,
#footer .custom-footer__articles ul > li:before,
#footer .custom-footer__articles ul > li > a::before,
#footer .custom-footer__articles ul > li > a:before {
    content: none !important;
    display: none !important;
}

#footer .custom-footer__articles ul > li > a,
#footer .custom-footer__articles ul > li > a:visited,
#footer .custom-footer__articles .hl-footer-faq-link,
#footer .custom-footer__articles .hl-footer-faq-link:visited {
    color: #303030 !important;
    text-decoration: none !important;
}

#footer .custom-footer__articles ul > li > a:hover,
#footer .custom-footer__articles ul > li > a:focus,
#footer .custom-footer__articles .hl-footer-faq-link:hover,
#footer .custom-footer__articles .hl-footer-faq-link:focus {
    color: #787878 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* ================================
   SCROLL TO TOP BUTTON
================================ */

#scrollTopBtn {
    position: fixed !important;

    right: 24px !important;
    bottom: 24px !important;

    width: 46px !important;
    height: 46px !important;

    background: #f19210 !important;
    border-radius: 50% !important;

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

    cursor: pointer !important;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition: all 0.2s ease !important;

    z-index: 9999 !important;
}

#scrollTopBtn.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

#scrollTopBtn:hover {
    background: #ffaf41 !important;
}

#scrollTopBtn svg {
    width: 22px !important;
    height: 22px !important;
}

#scrollTopBtn path {
    stroke: #fff !important;
    stroke-width: 2.4 !important;

    fill: none !important;

    stroke-linecap: butt !important;
    stroke-linejoin: miter !important;
}

@media (max-width: 767px) {
    #scrollTopBtn {
        right: 16px !important;
        bottom: 16px !important;

        width: 42px !important;
        height: 42px !important;
    }
}

/* ================================
   PRODUCT CARD – FINAL CLEAN BLOCK
   Zarovnání produktové karty + krátký SEO popisek
   Vychází z poslední stabilní verze, bez vrstvení starých pokusů
================================ */

.products-block .product,
.products .product,
.product-list .product {
    --hl-product-card-padding-x: 22px;
    --hl-product-card-title-availability-padding-x: 32px;
}

/* Jednotná levá osa pro textové prvky v produktové kartě */
.products-block .product .p-in .name,
.products .product .p-in .name,
.product-list .product .p-in .name,
.products-block .product .p-in .availability,
.products .product .p-in .availability,
.product-list .product .p-in .availability,
.products-block .product .p-in .prices,
.products .product .p-in .prices,
.product-list .product .p-in .prices,
.products-block .product .p-in .p-tools,
.products .product .p-in .p-tools,
.product-list .product .p-in .p-tools,
.products-block .product .p-in .p-desc,
.products .product .p-in .p-desc,
.product-list .product .p-in .p-desc,
.products-block .product .p-in p.p-desc[data-testid="productCardShortDescr"],
.products .product .p-in p.p-desc[data-testid="productCardShortDescr"],
.product-list .product .p-in p.p-desc[data-testid="productCardShortDescr"] {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: var(--hl-product-card-padding-x) !important;
    padding-right: var(--hl-product-card-padding-x) !important;

    text-align: left !important;

    transform: none !important;
}

/* Název produktu + skladovost – jemně doprava oproti ceně/tlačítku/popisku */
.products-block .product .p-in .name,
.products .product .p-in .name,
.product-list .product .p-in .name,
.products-block .product .p-in .availability,
.products .product .p-in .availability,
.product-list .product .p-in .availability {
    padding-left: var(--hl-product-card-title-availability-padding-x) !important;
    padding-right: var(--hl-product-card-padding-x) !important;

    text-align: left !important;
}

.products-block .product .p-in .name span,
.products .product .p-in .name span,
.product-list .product .p-in .name span,
.products-block .product .p-in .availability span,
.products .product .p-in .availability span,
.product-list .product .p-in .availability span {
    text-align: left !important;
}

/* Cena */
.products-block .product .p-in .prices,
.products .product .p-in .prices,
.product-list .product .p-in .prices,
.products-block .product .p-in .prices *,
.products .product .p-in .prices *,
.product-list .product .p-in .prices * {
    text-align: left !important;
}

/* Tlačítka DETAIL / DO KOŠÍKU */
.products-block .product .p-in .p-tools,
.products .product .p-in .p-tools,
.product-list .product .p-in .p-tools {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

.products-block .product .p-in .p-tools .btn,
.products .product .p-in .p-tools .btn,
.product-list .product .p-in .p-tools .btn,
.products-block .product .p-in .p-tools a.btn,
.products .product .p-in .p-tools a.btn,
.product-list .product .p-in .p-tools a.btn {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Krátký produktový popisek – finální vzhled */
.products-block .product .p-in .p-desc,
.products .product .p-in .p-desc,
.product-list .product .p-in .p-desc,
.products-block .product .p-in p.p-desc,
.products .product .p-in p.p-desc,
.product-list .product .p-in p.p-desc,
.products-block .product .p-in p.p-desc[data-micro="description"],
.products .product .p-in p.p-desc[data-micro="description"],
.product-list .product .p-in p.p-desc[data-micro="description"],
.products-block .product .p-in p.p-desc[data-testid="productCardShortDescr"],
.products .product .p-in p.p-desc[data-testid="productCardShortDescr"],
.product-list .product .p-in p.p-desc[data-testid="productCardShortDescr"],
.products-block .product .p-in p[data-micro="description"],
.products .product .p-in p[data-micro="description"],
.product-list .product .p-in p[data-micro="description"],
.products-block .product .p-in p[data-testid="productCardShortDescr"],
.products .product .p-in p[data-testid="productCardShortDescr"],
.product-list .product .p-in p[data-testid="productCardShortDescr"] {
    --fs-body: 13px !important;
    --fs-small: 13px !important;
    --font-size: 13px !important;
    --product-card-description-font-size: 13px !important;

    display: block !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: var(--hl-product-card-padding-x) !important;
    padding-right: var(--hl-product-card-padding-x) !important;

    color: #787878 !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.38 !important;
    font-weight: 400 !important;

    text-align: left !important;

    transform: none !important;
    opacity: 1 !important;
}

/* Kdyby Shoptet uvnitř popisku vytvořil span / strong / jiné potomky */
.products-block .product .p-in .p-desc *,
.products .product .p-in .p-desc *,
.product-list .product .p-in .p-desc *,
.products-block .product .p-in p[data-micro="description"] *,
.products .product .p-in p[data-micro="description"] *,
.product-list .product .p-in p[data-micro="description"] *,
.products-block .product .p-in p[data-testid="productCardShortDescr"] *,
.products .product .p-in p[data-testid="productCardShortDescr"] *,
.product-list .product .p-in p[data-testid="productCardShortDescr"] * {
    --fs-body: 13px !important;
    --fs-small: 13px !important;
    --font-size: 13px !important;
    --product-card-description-font-size: 13px !important;

    font-size: 13px !important;
    line-height: 1.38 !important;
}

/* Mobil */
@media (max-width: 767px) {
    .products-block .product,
    .products .product,
    .product-list .product {
        --hl-product-card-padding-x: 12px;
        --hl-product-card-title-availability-padding-x: 21px;
    }

    .products-block .product .p-in .p-desc,
    .products .product .p-in .p-desc,
    .product-list .product .p-in .p-desc,
    .products-block .product .p-in p.p-desc,
    .products .product .p-in p.p-desc,
    .product-list .product .p-in p.p-desc,
    .products-block .product .p-in p.p-desc[data-micro="description"],
    .products .product .p-in p.p-desc[data-micro="description"],
    .product-list .product .p-in p.p-desc[data-micro="description"],
    .products-block .product .p-in p.p-desc[data-testid="productCardShortDescr"],
    .products .product .p-in p.p-desc[data-testid="productCardShortDescr"],
    .product-list .product .p-in p.p-desc[data-testid="productCardShortDescr"],
    .products-block .product .p-in p[data-micro="description"],
    .products .product .p-in p[data-micro="description"],
    .product-list .product .p-in p[data-micro="description"],
    .products-block .product .p-in p[data-testid="productCardShortDescr"],
    .products .product .p-in p[data-testid="productCardShortDescr"],
    .product-list .product .p-in p[data-testid="productCardShortDescr"] {
        --fs-body: 12px !important;
        --fs-small: 12px !important;
        --font-size: 12px !important;
        --product-card-description-font-size: 12px !important;

        font-size: 12px !important;
        line-height: 1.36 !important;
    }

    .products-block .product .p-in .p-desc *,
    .products .product .p-in .p-desc *,
    .product-list .product .p-in .p-desc *,
    .products-block .product .p-in p[data-micro="description"] *,
    .products .product .p-in p[data-micro="description"] *,
    .product-list .product .p-in p[data-micro="description"] *,
    .products-block .product .p-in p[data-testid="productCardShortDescr"] *,
    .products .product .p-in p[data-testid="productCardShortDescr"] *,
    .product-list .product .p-in p[data-testid="productCardShortDescr"] * {
        --fs-body: 12px !important;
        --fs-small: 12px !important;
        --font-size: 12px !important;
        --product-card-description-font-size: 12px !important;

        font-size: 12px !important;
        line-height: 1.36 !important;
    }
}

/* ================================
   SITE INFORMATION MESSAGE
   Trvalý čistý vzhled informačního banneru Shoptet
   Aktivuje se pouze tehdy, když je v administraci vyplněná informační zpráva
================================ */

.site-msg.information {
    position: fixed !important;

    left: 24px !important;
    right: auto !important;
    bottom: 24px !important;

    width: auto !important;
    max-width: 540px !important;

    transform: none !important;

    z-index: 2147483647 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    background: transparent !important;

    box-shadow: none !important;
    pointer-events: auto !important;
}

/* Vnitřní box informační zprávy */
.site-msg.information > .container {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 16px 52px 16px 20px !important;

    box-sizing: border-box !important;

    background: #5f5f5f !important;

    border: none !important;
    border-radius: 14px !important;

    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
}

/* Text informační zprávy */
.site-msg.information .text {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    max-width: none !important;

    color: #ffffff !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;

    text-align: left !important;

    text-shadow: none !important;
}

.site-msg.information .text div,
.site-msg.information .text p,
.site-msg.information .text span,
.site-msg.information .text strong,
.site-msg.information .text a {
    color: #ffffff !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;

    text-align: left !important;
}

.site-msg.information .text strong {
    font-weight: 700 !important;
}

.site-msg.information .text a {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* Zavírací tlačítko */
.site-msg.information .close,
.site-msg.information .js-close-information-msg {
    position: absolute !important;

    top: 50% !important;
    right: 14px !important;

    width: 28px !important;
    height: 28px !important;

    transform: translateY(-50%) !important;

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

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    border-radius: 999px !important;

    color: #ffffff !important;

    opacity: 1 !important;
    cursor: pointer !important;
}

.site-msg.information .close:hover,
.site-msg.information .js-close-information-msg:hover {
    opacity: 0.75 !important;
}

.site-msg.information .close::before,
.site-msg.information .close::after,
.site-msg.information .js-close-information-msg::before,
.site-msg.information .js-close-information-msg::after {
    color: #ffffff !important;
}

/* Mobil */
@media (max-width: 767px) {
    .site-msg.information {
        left: 14px !important;
        right: 14px !important;
        bottom: 16px !important;

        width: auto !important;
        max-width: none !important;

        transform: none !important;
    }

    .site-msg.information > .container {
        padding: 14px 44px 14px 16px !important;

        border-radius: 13px !important;

        background: #5f5f5f !important;

        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24) !important;
    }

    .site-msg.information .text,
    .site-msg.information .text div,
    .site-msg.information .text p,
    .site-msg.information .text span,
    .site-msg.information .text strong,
    .site-msg.information .text a {
        font-size: 12.8px !important;
        line-height: 1.42 !important;
        font-weight: 600 !important;
    }

    .site-msg.information .text strong {
        font-weight: 700 !important;
    }

    .site-msg.information .close,
    .site-msg.information .js-close-information-msg {
        right: 10px !important;

        width: 26px !important;
        height: 26px !important;
    }
}

/* ================================
   PRODUCT DETAIL
   Skrytí akcí Tisk / Zeptat se / Sdílet
================================ */

.social-buttons-wrapper .print,
.social-buttons-wrapper .chat,
.social-buttons-wrapper .share,
.social-buttons-wrapper a.link-icon.print,
.social-buttons-wrapper a.link-icon.chat,
.social-buttons-wrapper a.link-icon.share {
    display: none !important;
}

/* Kdyby po skrytí nezůstalo prázdné místo */

.social-buttons-wrapper {
    min-height: 0 !important;
}

.social-buttons.no-display {
    display: none !important;
}

/* ================================
   CATEGORY FILTERS – COLLAPSIBLE GROUPS
   Výchozí stav: sbaleno
   Aktivní filtr: automaticky rozbalen
================================ */

.filter-sections .filter-section.hl-filter-section {
    border-bottom: 1px solid #e6e6e6 !important;
}

.filter-sections .filter-section.hl-filter-section:first-child {
    border-top: 1px solid #e6e6e6 !important;
}

.filter-sections
    .filter-section.hl-filter-section
    > h4.hl-filter-toggle {
    position: relative !important;

    margin: 0 !important;
    padding: 14px 32px 14px 0 !important;

    cursor: pointer !important;
    user-select: none !important;

    outline: none !important;
}

.filter-sections
    .filter-section.hl-filter-section
    > h4.hl-filter-toggle::after {
    content: "" !important;

    position: absolute !important;

    top: 50% !important;
    right: 4px !important;

    width: 8px !important;
    height: 8px !important;

    border-right: 1.8px solid #555 !important;
    border-bottom: 1.8px solid #555 !important;

    transform: translateY(-65%) rotate(45deg) !important;
    transform-origin: center !important;

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

.filter-sections
    .filter-section.hl-filter-section.is-open
    > h4.hl-filter-toggle::after {
    transform: translateY(-35%) rotate(225deg) !important;
}

.filter-sections
    .filter-section.hl-filter-section
    > h4.hl-filter-toggle:hover::after,
.filter-sections
    .filter-section.hl-filter-section
    > h4.hl-filter-toggle:focus::after {
    border-color: #f19210 !important;
}

.filter-sections
    .filter-section.hl-filter-section
    > .hl-filter-content {
    display: grid !important;

    grid-template-rows: 0fr;

    opacity: 0 !important;

    transition:
        grid-template-rows 0.22s ease,
        opacity 0.18s ease !important;
}

.filter-sections
    .filter-section.hl-filter-section.is-open
    > .hl-filter-content {
    grid-template-rows: 1fr;

    opacity: 1 !important;
}

.filter-sections
    .filter-section.hl-filter-section
    > .hl-filter-content
    > .hl-filter-content-inner {
    min-height: 0 !important;

    overflow: hidden !important;
}

.filter-sections
    .filter-section.hl-filter-section.is-open
    > .hl-filter-content
    > .hl-filter-content-inner {
    padding-bottom: 14px !important;
}

@media (max-width: 767px) {
    .filter-sections
        .filter-section.hl-filter-section
        > h4.hl-filter-toggle {
        min-height: 44px !important;

        display: flex !important;
        align-items: center !important;

        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
}

/* ================================
   PRODUCT FLAGS – MOBILE SEPARATE ROW
   Vlaječky/tagy mají vlastní řádek nad produktovou fotografií
   Aplikuje se pouze na produktové karty, které skutečně obsahují .flags
================================ */

@media (max-width: 767px) {
    .product .image:has(> .flags) {
        position: relative !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Pseudoelementy odkazu nesmí vstoupit do flex layoutu jako samostatný řádek */
    .product .image:has(> .flags)::before,
    .product .image:has(> .flags)::after {
        position: absolute !important;
    }

    /* Samostatný horní řádek pro všechny typy vlaječek: RAPTOR X, TIP, AKCE, NOVINKA… */
    .product .image:has(> .flags) > .flags {
        position: static !important;

        order: 1 !important;
        align-self: flex-start !important;

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

        width: auto !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 0 6px 0 !important;
        padding: 0 !important;

        transform: none !important;
        z-index: 2 !important;
    }

    /* Fotografie začíná až pod řádkem s vlaječkou */
    .product .image:has(> .flags) > img {
        position: relative !important;

        order: 2 !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;

        transform: none !important;
        z-index: 1 !important;
    }
}

/* ================================
   PRODUCT DETAIL – STICKY ADD TO CART BAR
   Hockeyland: #f19210 / #ffaf41 / #303030 / #787878 / #eeeeee
================================ */

.hl-sticky-cart {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;

    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid #eeeeee !important;
    box-shadow: 0 -8px 28px rgba(48, 48, 48, 0.12) !important;

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

    transform: translateY(calc(100% + 24px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        transform 0.28s ease,
        opacity 0.22s ease,
        visibility 0.22s ease !important;

    z-index: 9999 !important;
}

.hl-sticky-cart.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.hl-sticky-cart__inner {
    width: 100% !important;
    max-width: 1170px !important;
    min-height: 82px !important;

    margin: 0 auto !important;
    padding: 12px 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;

    box-sizing: border-box !important;
}

.hl-sticky-cart__info {
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.hl-sticky-cart__image {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;

    display: block !important;

    object-fit: contain !important;

    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    border-radius: 8px !important;

    padding: 4px !important;
    box-sizing: border-box !important;
}

.hl-sticky-cart__text {
    min-width: 0 !important;
}

.hl-sticky-cart__name {
    max-width: 560px !important;

    margin: 0 0 3px !important;

    color: #303030 !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.hl-sticky-cart__price {
    margin: 0 !important;

    color: #303030 !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.hl-sticky-cart__button {
    flex: 0 0 auto !important;

    min-width: 180px !important;
    min-height: 48px !important;

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

    margin: 0 !important;
    padding: 12px 28px !important;

    background: #f19210 !important;
    border: 1px solid #f19210 !important;
    border-radius: 999px !important;

    color: #ffffff !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;

    box-shadow: none !important;
    outline: none !important;

    cursor: pointer !important;

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

.hl-sticky-cart__button:hover,
.hl-sticky-cart__button:focus {
    background: #ffaf41 !important;
    border-color: #ffaf41 !important;
    color: #ffffff !important;
}

.hl-sticky-cart__button:active {
    transform: scale(0.98) !important;
}

.hl-sticky-cart__button:disabled {
    background: #787878 !important;
    border-color: #787878 !important;

    cursor: not-allowed !important;
    opacity: 0.65 !important;
}

@media (max-width: 767px) {
    .hl-sticky-cart {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    .hl-sticky-cart__inner {
        min-height: 72px !important;

        padding: 10px 14px !important;
        gap: 12px !important;
    }

    .hl-sticky-cart__image,
    .hl-sticky-cart__name {
        display: none !important;
    }

    .hl-sticky-cart__info {
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    .hl-sticky-cart__price {
        font-size: 15px !important;
        white-space: nowrap !important;
    }

    .hl-sticky-cart__button {
        flex: 1 1 auto !important;

        min-width: 0 !important;
        min-height: 48px !important;

        padding: 12px 20px !important;

        font-size: 14px !important;
    }
}

/* ================================
   STICKY CART – MOBILE CONTENT + SCROLL-TO-TOP OFFSET
   Doplňuje v.66 bez změny předchozích pravidel.
================================ */

/* Když je nákupní lišta viditelná, vytáhne scroll-to-top nad ni. */
body:has(.hl-sticky-cart.is-visible) #scrollTop {
    bottom: 104px !important;
}

@media (max-width: 767px) {
    .hl-sticky-cart__inner {
        min-height: 82px !important;
        padding: 9px 12px !important;
        gap: 10px !important;
    }

    .hl-sticky-cart__info {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 9px !important;
    }

    .hl-sticky-cart__image {
        display: block !important;

        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;

        padding: 3px !important;
        border-radius: 7px !important;
    }

    .hl-sticky-cart__text {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .hl-sticky-cart__name {
        display: block !important;

        max-width: 100% !important;
        margin: 0 0 2px !important;

        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .hl-sticky-cart__price {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    .hl-sticky-cart__button {
        flex: 0 0 auto !important;

        min-width: 112px !important;
        min-height: 46px !important;

        padding: 11px 15px !important;

        font-size: 13px !important;
    }

    body:has(.hl-sticky-cart.is-visible) #scrollTop {
        bottom: 100px !important;
    }
}

@media (max-width: 390px) {
    .hl-sticky-cart__image {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }

    .hl-sticky-cart__name {
        font-size: 10px !important;
    }

    .hl-sticky-cart__price {
        font-size: 13px !important;
    }

    .hl-sticky-cart__button {
        min-width: 102px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 12px !important;
    }
}

/* ================================
   SCROLL-TO-TOP – ROBUST STICKY CART OFFSET
   Stav řídí JS třídou .hl-sticky-cart-visible na <body>.
================================ */

body.hl-sticky-cart-visible #scrollTop,
body.hl-sticky-cart-visible .scroll-to-top,
body.hl-sticky-cart-visible .scrollTop {
    bottom: 112px !important;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        bottom 0.28s ease !important;
}

@media (max-width: 767px) {
    body.hl-sticky-cart-visible #scrollTop,
    body.hl-sticky-cart-visible .scroll-to-top,
    body.hl-sticky-cart-visible .scrollTop {
        bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }
}

/* ================================
   SCROLL-TO-TOP – FINAL STICKY CART FIX
   Skutečný prvek je #scrollTopBtn.
   JS počítá výšku sticky lišty a zapisuje cílový bottom do proměnné.
================================ */

#scrollTopBtn {
    bottom: var(--hl-scrolltop-bottom, 24px) !important;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease,
        bottom 0.28s ease !important;
}

@media (max-width: 767px) {
    #scrollTopBtn {
        bottom: var(--hl-scrolltop-bottom, 16px) !important;
    }
}

/* ================================
   ADD TO CART MODAL – SAFE COMPACT
   Nemění rozměry ani pozici Colorboxu.
   Pouze typografie a vnitřní rozestupy.
================================ */

#colorbox.shoptet-modal-lg .advanced-order {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

#colorbox.shoptet-modal-lg .advanced-order > .h1:first-child {
    margin-bottom: 8px !important;
    font-size: 27px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

#colorbox.shoptet-modal-lg .advanced-order > .h2[data-testid="textPopupProductName"] {
    margin-bottom: 14px !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}

#colorbox.shoptet-modal-lg .advanced-order .extras-wrap {
    margin-top: 10px !important;
    margin-bottom: 18px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

#colorbox.shoptet-modal-lg .advanced-order__buttons {
    margin-top: 16px !important;
    margin-bottom: 22px !important;
}

#colorbox.shoptet-modal-lg .advanced-order__buttons .btn,
#colorbox.shoptet-modal-lg .advanced-order__buttons a,
#colorbox.shoptet-modal-lg .advanced-order__buttons button {
    font-size: 14px !important;
    line-height: 1.2 !important;
}

#colorbox.shoptet-modal-lg .advanced-order > .advanced-order-suggestion.h1 {
    margin-top: 20px !important;
    margin-bottom: 18px !important;
    font-size: 25px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

#colorbox.shoptet-modal-lg .advanced-order #products .product .name,
#colorbox.shoptet-modal-lg .advanced-order #products .product .name span,
#colorbox.shoptet-modal-lg .advanced-order #products .product .name a {
    font-size: 13px !important;
    line-height: 1.3 !important;
}

#colorbox.shoptet-modal-lg .advanced-order #products .product .price,
#colorbox.shoptet-modal-lg .advanced-order #products .product .prices,
#colorbox.shoptet-modal-lg .advanced-order #products .product .price-final {
    font-size: 14px !important;
    line-height: 1.25 !important;
}

@media (max-width: 767px) {
    #colorbox.shoptet-modal-lg .advanced-order {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    #colorbox.shoptet-modal-lg .advanced-order > .h1:first-child {
        padding-right: 28px !important;
        font-size: 22px !important;
    }

    #colorbox.shoptet-modal-lg .advanced-order > .h2[data-testid="textPopupProductName"] {
        margin-bottom: 11px !important;
        font-size: 16px !important;
    }

    #colorbox.shoptet-modal-lg .advanced-order .extras-wrap {
        margin-top: 8px !important;
        margin-bottom: 14px !important;
        font-size: 13px !important;
    }

    #colorbox.shoptet-modal-lg .advanced-order__buttons {
        margin-top: 12px !important;
        margin-bottom: 17px !important;
    }

    #colorbox.shoptet-modal-lg .advanced-order__buttons .btn,
    #colorbox.shoptet-modal-lg .advanced-order__buttons a,
    #colorbox.shoptet-modal-lg .advanced-order__buttons button {
        font-size: 13px !important;
    }

    #colorbox.shoptet-modal-lg .advanced-order > .advanced-order-suggestion.h1 {
        margin-top: 16px !important;
        margin-bottom: 14px !important;
        font-size: 20px !important;
        line-height: 1.25 !important;
    }

    #colorbox.shoptet-modal-lg .advanced-order #products .product .name,
    #colorbox.shoptet-modal-lg .advanced-order #products .product .name span,
    #colorbox.shoptet-modal-lg .advanced-order #products .product .name a {
        font-size: 12px !important;
    }

    #colorbox.shoptet-modal-lg .advanced-order #products .product .price,
    #colorbox.shoptet-modal-lg .advanced-order #products .product .prices,
    #colorbox.shoptet-modal-lg .advanced-order #products .product .price-final {
        font-size: 13px !important;
    }
}

/* ================================
   ADD TO CART MODAL – COMPACT V2
   Bez zásahu do geometrie Colorboxu.
   Shoptet řídí otevření/pozici; zmenšujeme pouze obsah uvnitř.
================================ */

#colorbox.shoptet-modal-lg .advanced-order {
    width: 100% !important;
    max-width: 720px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 22px 26px 24px !important;

    box-sizing: border-box !important;
}

#colorbox.shoptet-modal-lg .advanced-order > .h1:first-child {
    margin: 0 0 7px !important;

    font-size: 23px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

#colorbox.shoptet-modal-lg
    .advanced-order > .h2[data-testid="textPopupProductName"] {
    margin: 0 0 11px !important;

    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}

#colorbox.shoptet-modal-lg .advanced-order .extras-wrap {
    margin-top: 8px !important;
    margin-bottom: 14px !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
}

#colorbox.shoptet-modal-lg .advanced-order__buttons {
    margin-top: 12px !important;
    margin-bottom: 17px !important;
}

#colorbox.shoptet-modal-lg .advanced-order__buttons .btn,
#colorbox.shoptet-modal-lg .advanced-order__buttons a,
#colorbox.shoptet-modal-lg .advanced-order__buttons button {
    min-height: 42px !important;

    padding-top: 9px !important;
    padding-bottom: 9px !important;

    font-size: 13px !important;
    line-height: 1.2 !important;
}

#colorbox.shoptet-modal-lg
    .advanced-order > .advanced-order-suggestion.h1 {
    margin-top: 15px !important;
    margin-bottom: 14px !important;

    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

#colorbox.shoptet-modal-lg .advanced-order #products {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#colorbox.shoptet-modal-lg .advanced-order #products .product .name,
#colorbox.shoptet-modal-lg .advanced-order #products .product .name span,
#colorbox.shoptet-modal-lg .advanced-order #products .product .name a {
    font-size: 12px !important;
    line-height: 1.3 !important;
}

#colorbox.shoptet-modal-lg .advanced-order #products .product .price,
#colorbox.shoptet-modal-lg .advanced-order #products .product .prices,
#colorbox.shoptet-modal-lg .advanced-order #products .product .price-final {
    font-size: 13px !important;
    line-height: 1.25 !important;
}

@media (max-width: 767px) {
    #colorbox.shoptet-modal-lg .advanced-order {
        max-width: none !important;

        padding: 17px 14px 18px !important;
    }

    #colorbox.shoptet-modal-lg .advanced-order > .h1:first-child {
        padding-right: 28px !important;

        font-size: 20px !important;
    }

    #colorbox.shoptet-modal-lg
        .advanced-order > .h2[data-testid="textPopupProductName"] {
        margin-bottom: 9px !important;

        font-size: 15px !important;
    }

    #colorbox.shoptet-modal-lg .advanced-order .extras-wrap {
        margin-top: 7px !important;
        margin-bottom: 11px !important;

        font-size: 12px !important;
    }

    #colorbox.shoptet-modal-lg .advanced-order__buttons {
        margin-top: 10px !important;
        margin-bottom: 14px !important;
    }

    #colorbox.shoptet-modal-lg .advanced-order__buttons .btn,
    #colorbox.shoptet-modal-lg .advanced-order__buttons a,
    #colorbox.shoptet-modal-lg .advanced-order__buttons button {
        min-height: 40px !important;

        padding-top: 8px !important;
        padding-bottom: 8px !important;

        font-size: 12px !important;
    }

    #colorbox.shoptet-modal-lg
        .advanced-order > .advanced-order-suggestion.h1 {
        margin-top: 13px !important;
        margin-bottom: 11px !important;

        font-size: 18px !important;
    }
}

/* ================================
   ADD TO CART – MODAL OFF + TOAST
================================ */

/* Jakmile Shoptet vloží obsah "advanced-order", jeho velký popup nepotřebujeme.
   JS jej po úspěšném otevření odstraní z pohledu uživatele. */

.hl-cart-toast {
    position: fixed !important;
    top: 22px !important;
    right: 22px !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    max-width: calc(100vw - 44px) !important;
    padding: 13px 17px !important;

    background: #303030 !important;
    color: #ffffff !important;

    border-radius: 8px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18) !important;

    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateY(-10px) !important;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease !important;

    z-index: 100000 !important;
}

.hl-cart-toast.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.hl-cart-toast__check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;

    background: #f19210 !important;
    color: #ffffff !important;

    border-radius: 50% !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}

.hl-cart-toast__text {
    display: block !important;
}

@media (max-width: 767px) {
    .hl-cart-toast {
        top: 12px !important;
        right: 12px !important;
        left: 12px !important;

        max-width: none !important;
        padding: 12px 14px !important;

        font-size: 13px !important;
    }
}

/* ================================
   ADD TO CART – HARD HIDE SHOPTET ADVANCED ORDER
   Chrome / modern browsers: jakmile Colorbox obsahuje .advanced-order,
   celý modal i jeho overlay jsou bezpodmínečně skryté.
================================ */

#colorbox:has(.advanced-order) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body:has(#colorbox .advanced-order) #cboxOverlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ================================
   CART TOAST – CLEAN CHECKMARK
   Čistá typografická fajfka bez kolečka.
================================ */

.hl-cart-toast__check {
    display: inline-block !important;
    flex: 0 0 auto !important;

    width: auto !important;
    height: auto !important;

    background: transparent !important;
    color: #f19210 !important;
    border-radius: 0 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 400 !important;

    transform: none !important;
}

/* ================================
   CART TOAST – GEOMETRIC CHECKMARK
   Vlastní čistá fajfka kreslená CSS, nezávislá na fontu.
================================ */

.hl-cart-toast__check {
    position: relative !important;
    display: inline-block !important;
    flex: 0 0 22px !important;

    width: 22px !important;
    height: 22px !important;

    font-size: 0 !important;
    line-height: 0 !important;

    background: transparent !important;
    color: transparent !important;
}

.hl-cart-toast__check::before {
    content: "" !important;

    position: absolute !important;
    left: 4px !important;
    top: 1px !important;

    width: 9px !important;
    height: 16px !important;

    border-right: 3px solid #f19210 !important;
    border-bottom: 3px solid #f19210 !important;

    border-radius: 1px !important;

    transform: rotate(42deg) !important;
    transform-origin: center !important;
}

/* ================================
   CART TOAST – MOBILE HEADER OFFSET
   Na telefonech se potvrzení zobrazuje pod horní lištou/menu.
================================ */

@media (max-width: 767px) {
    .hl-cart-toast {
        top: 76px !important;
    }
}

/* ================================
   CART TOAST – HEADER SPACING
   Stejný menší odstup od hlavičky na desktopu i telefonu.
================================ */

/* Desktop / větší obrazovky */
@media (min-width: 768px) {
    .hl-cart-toast {
        top: 66px !important;
    }
}

/* Telefony */
@media (max-width: 767px) {
    .hl-cart-toast {
        top: 66px !important;
    }
}

/* ================================
   CART TOAST – LIGHT MODERN PALETTE
================================ */

.hl-cart-toast {
    background: #f5f3f0 !important;
    color: #303030 !important;

    border: 1px solid #e2dfda !important;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.10),
        0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

/* Fajfka i text jsou záměrně jednobarevné. */
.hl-cart-toast__check::before {
    border-right-color: #303030 !important;
    border-bottom-color: #303030 !important;
}

.hl-cart-toast__text {
    color: #303030 !important;
}

/* ================================
   CART TOAST – SVG CHECKMARK
   Ostrá a souvislá fajfka na desktopu i mobilu.
================================ */

.hl-cart-toast__check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 20px !important;

    width: 20px !important;
    height: 20px !important;

    background: transparent !important;
    color: #303030 !important;
}

.hl-cart-toast__check::before {
    content: none !important;
    display: none !important;
}

.hl-cart-toast__check svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    overflow: visible !important;
}

.hl-cart-toast__check svg path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.25 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    vector-effect: non-scaling-stroke !important;
}

/* ================================
   PRODUCT FLAGS – MODERN PILL DESIGN
   Čisté oválné štítky bez původního "vlaječkového" ocasu.
================================ */

/* Kontejner štítků */
.flags.flags-default {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;

    width: auto !important;
    max-width: 100% !important;
}

/* Samotný štítek */
.flags.flags-default .flag {
    position: relative !important;

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

    width: auto !important;
    min-width: 0 !important;
    height: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding: 0 13px !important;

    border: 0 !important;
    border-radius: 999px !important;

    box-shadow: none !important;

    font-size: 12px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    letter-spacing: 0.15px !important;
    text-transform: none !important;

    white-space: nowrap !important;

    background-image: none !important;
}

/* Úplně odstraníme původní trojúhelníkové / vlaječkové konce Shoptetu. */
.flags.flags-default .flag::before,
.flags.flags-default .flag::after {
    content: none !important;
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    border: 0 !important;
    background: none !important;
}

/* Raptor X – zachování firemní oranžové, ale v čistém pill provedení. */
.flags.flags-default .flag.flag-raptor-x {
    background: #f19210 !important;
    color: #ffffff !important;
}

/* Obecné zjemnění dalších barevných Shoptet štítků.
   Jejich vlastní background-color z administrace zůstává zachován. */
.flags.flags-default .flag:not(.flag-raptor-x) {
    color: #ffffff !important;
}

/* Produktové karty – o něco menší pill, aby nepřebíjel produkt. */
.products .flags.flags-default .flag,
.product .flags.flags-default .flag {
    height: 25px !important;
    min-height: 25px !important;
    padding-left: 11px !important;
    padding-right: 11px !important;

    font-size: 11px !important;
    line-height: 25px !important;
}

/* Detail produktu – lehce větší a čitelnější. */
.p-detail .flags.flags-default .flag,
.product-detail .flags.flags-default .flag {
    height: 28px !important;
    min-height: 28px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;

    font-size: 12px !important;
    line-height: 28px !important;
}

@media (max-width: 767px) {
    .flags.flags-default {
        gap: 6px !important;
    }

    .flags.flags-default .flag,
    .p-detail .flags.flags-default .flag,
    .product-detail .flags.flags-default .flag {
        height: 26px !important;
        min-height: 26px !important;

        padding-left: 11px !important;
        padding-right: 11px !important;

        font-size: 11px !important;
        line-height: 26px !important;
    }
}

/* ================================
   PRODUCT FLAGS – CARD EDGE SPACING
   Vlaječky na produktových kartách nejsou nalepené na hranu.
================================ */

.products .product .flags.flags-default,
.products-block .product .flags.flags-default,
.product .flags.flags-default {
    margin-top: 10px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
}

/* Na detailu produktu ponecháváme původní umístění bez tohoto odsazení. */
.p-detail .flags.flags-default,
.product-detail .flags.flags-default {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (max-width: 767px) {
    .products .product .flags.flags-default,
    .products-block .product .flags.flags-default,
    .product .flags.flags-default {
        margin-top: 8px !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
    }

    .p-detail .flags.flags-default,
    .product-detail .flags.flags-default {
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ================================
   PRODUCT FLAGS – IMAGE SPACING DESKTOP
   Stejná 6px mezera mezi štítky a fotografií jako na telefonu.
================================ */

@media (min-width: 768px) {
    .product .image:has(> .flags) > .flags {
        margin-bottom: 6px !important;
    }
}

/* ================================
   PRODUCT FLAGS – DESKTOP SEPARATE ROW
   Na desktopu mají štítky vlastní řádek NAD fotografií.
   Fotografie tedy začíná až pod nimi, stejně jako na mobilu.
================================ */

@media (min-width: 768px) {
    .product .image:has(> .flags) {
        position: relative !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .product .image:has(> .flags)::before,
    .product .image:has(> .flags)::after {
        position: absolute !important;
    }

    .product .image:has(> .flags) > .flags {
        position: static !important;

        order: 1 !important;
        align-self: flex-start !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;

        width: auto !important;
        max-width: calc(100% - 20px) !important;
        height: auto !important;

        margin: 10px 10px 6px 10px !important;
        padding: 0 !important;

        transform: none !important;
        z-index: 2 !important;
    }

    .product .image:has(> .flags) > img {
        position: relative !important;

        order: 2 !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;

        transform: none !important;
        z-index: 1 !important;
    }
}

/* ================================
   PRODUCT CARD – DISCOUNT PRICE REDESIGN
   Ruší samostatnou slevovou dlaždici nad fotografií.
   Původní cena se zobrazuje přímo vedle aktuální ceny.
================================ */

/* Samotný Shoptet slevový badge už na produktové kartě nechceme. */
.products .product .flags-extra .flag-discount,
.products-block .product .flags-extra .flag-discount,
.product-list .product .flags-extra .flag-discount,
.product .flags-extra .flag-discount {
    display: none !important;
}

/* Pokud flags-extra obsahuje pouze skrytý slevový badge, nezabírá žádné místo. */
.products .product .flags-extra:not(:has(.flag:not(.flag-discount))),
.products-block .product .flags-extra:not(:has(.flag:not(.flag-discount))),
.product-list .product .flags-extra:not(:has(.flag:not(.flag-discount))),
.product .flags-extra:not(:has(.flag:not(.flag-discount))) {
    display: none !important;
}

/* Cena jako jeden čistý řádek. */
.products .product .p-in .prices,
.products-block .product .p-in .prices,
.product-list .product .p-in .prices {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 8px !important;
}

/* Původní cena vložená JS. */
.hl-card-original-price {
    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #8a8a8a !important;

    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;

    text-decoration-line: line-through !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: currentColor !important;

    white-space: nowrap !important;
}

/* Aktuální cena zůstává hlavní vizuální informací. */
.products .product .p-in .prices .price-final,
.products-block .product .p-in .prices .price-final,
.product-list .product .p-in .prices .price-final {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
}

/* Na mobilu o chlup kompaktnější mezera. */
@media (max-width: 767px) {
    .products .product .p-in .prices,
    .products-block .product .p-in .prices,
    .product-list .product .p-in .prices {
        gap: 6px !important;
    }

    .hl-card-original-price {
        font-size: 13px !important;
    }
}

/* ================================
   PRODUCT CARD – DISCOUNT PRICE AS ONE UNIT
   Původní a aktuální cena se už nikdy nerozdělí na dva řádky.
================================ */

.products .product .p-in .prices:has(.hl-card-original-price),
.products-block .product .p-in .prices:has(.hl-card-original-price),
.product-list .product .p-in .prices:has(.hl-card-original-price) {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;

    width: auto !important;
    max-width: 100% !important;

    gap: 8px !important;
    white-space: nowrap !important;
}

.products .product .p-in .prices:has(.hl-card-original-price) .hl-card-original-price,
.products .product .p-in .prices:has(.hl-card-original-price) .price-final,
.products-block .product .p-in .prices:has(.hl-card-original-price) .hl-card-original-price,
.products-block .product .p-in .prices:has(.hl-card-original-price) .price-final,
.product-list .product .p-in .prices:has(.hl-card-original-price) .hl-card-original-price,
.product-list .product .p-in .prices:has(.hl-card-original-price) .price-final {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

@media (max-width: 767px) {
    .products .product .p-in .prices:has(.hl-card-original-price),
    .products-block .product .p-in .prices:has(.hl-card-original-price),
    .product-list .product .p-in .prices:has(.hl-card-original-price) {
        gap: 6px !important;
    }
}

/* ================================
   PRODUCT CARD – DISCOUNT PRICE ALIGNMENT
   Cenový blok zůstává jako jeden celek, ale je zarovnaný vlevo.
================================ */

.products .product .p-in .prices:has(.hl-card-original-price),
.products-block .product .p-in .prices:has(.hl-card-original-price),
.product-list .product .p-in .prices:has(.hl-card-original-price) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    text-align: left !important;
    white-space: nowrap !important;
}

.products .product .p-in .prices:has(.hl-card-original-price) .hl-card-original-price,
.products .product .p-in .prices:has(.hl-card-original-price) .price-final,
.products-block .product .p-in .prices:has(.hl-card-original-price) .hl-card-original-price,
.products-block .product .p-in .prices:has(.hl-card-original-price) .price-final,
.product-list .product .p-in .prices:has(.hl-card-original-price) .hl-card-original-price,
.product-list .product .p-in .prices:has(.hl-card-original-price) .price-final {
    text-align: left !important;
}

/* ================================
   PRODUCT CARD – ROUNDED ACTION BUTTONS
   Zaoblení tlačítek DETAIL / DO KOŠÍKU do stejného moderního stylu.
================================ */

.products .product .p-tools .btn,
.products-block .product .p-tools .btn,
.product-list .product .p-tools .btn,
.products .product .p-bottom .btn,
.products-block .product .p-bottom .btn,
.product-list .product .p-bottom .btn {
    border-radius: 999px !important;
}

/* ================================
   PRODUCT CARDS – ROUNDED CORNERS
   Zaoblení tenkého šedého rámečku celé produktové karty.
================================ */

.products .product,
.products-block .product,
.product-list .product {
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* ================================
   PRODUCT CARDS – ACTUAL CARD BORDER RADIUS
   Shoptet kreslí viditelnou kartu přes .p.swap-images, ne přes .product.
================================ */

.products .product > .p,
.products-block .product > .p,
.product-list .product > .p,
.products .product > .p.swap-images,
.products-block .product > .p.swap-images,
.product-list .product > .p.swap-images {
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* ================================
   SEARCH BAR – PILL SHAPE
   Vyhledávací pole včetně tlačítka jako jeden celistvý zaoblený prvek.
================================ */

#formSearchForm.search-form {
    border-radius: 999px !important;
}

#formSearchForm.search-form fieldset {
    border-radius: 999px !important;
    overflow: hidden !important;
}

#formSearchForm.search-form .search-input {
    border-radius: 999px 0 0 999px !important;
}

#formSearchForm.search-form button[type="submit"],
#formSearchForm.search-form .btn-arrow-right {
    border-radius: 0 999px 999px 0 !important;
}

/* ================================
   SEARCH BAR – INPUT TEXT SPACING
   Větší levé odsazení placeholderu i psaného textu.
================================ */

#formSearchForm.search-form .search-input {
    padding-left: 28px !important;
}

/* ================================
   SEARCH – NEW PRODUCTS RECOMMENDATIONS
   Produkty s příznakem "Novinka" načtené z katalogu.
================================ */

.search-window-in .recommended-products.hl-search-new-products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;

    width: 100% !important;
    max-width: 760px !important;

    margin: 18px auto 0 !important;
}

.search-window-in .hl-search-product {
    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;

    padding: 12px !important;

    color: #303030 !important;
    text-decoration: none !important;

    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 14px !important;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease !important;
}

.search-window-in .hl-search-product:hover {
    transform: translateY(-2px) !important;
    border-color: #d6d6d6 !important;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.08) !important;
}

.search-window-in .hl-search-product__image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

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

    margin: 0 0 10px !important;

    overflow: hidden !important;
}

.search-window-in .hl-search-product__image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
}

.search-window-in .hl-search-product__name {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    min-height: 40px !important;

    margin: 0 0 7px !important;

    color: #303030 !important;

    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}

.search-window-in .hl-search-product__price {
    margin-top: auto !important;

    color: #303030 !important;

    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

.search-window-in .hl-search-product__badge {
    align-self: flex-start !important;

    margin: 0 0 9px !important;
    padding: 4px 10px !important;

    color: #ffffff !important;
    background: #2d8610 !important;
    border-radius: 999px !important;

    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

.search-window-in .hl-search-new-products.is-loading {
    min-height: 120px !important;
}

@media (max-width: 767px) {
    .search-window-in .recommended-products.hl-search-new-products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;

        margin-top: 14px !important;
    }

    .search-window-in .hl-search-product {
        padding: 10px !important;
        border-radius: 12px !important;
    }

    .search-window-in .hl-search-product__name {
        min-height: 36px !important;
        font-size: 13px !important;
    }

    .search-window-in .hl-search-product__price {
        font-size: 14px !important;
    }
}

/* ================================
   SEARCH – NEW PRODUCTS IMAGE FIX
   Obrázek se zobrazí korektně i při lazy-load zdrojích Shoptetu.
================================ */

.search-window-in .hl-search-product__image img {
    visibility: visible !important;
    opacity: 1 !important;
}

/* ================================
   SEARCH – SAFE LAYOUT POLISH
   Pouze vizuální úpravy: mezery a centrování.
   Bez zásahu do načítání / generování produktů.
================================ */

/* Search formulář držíme přesně na horizontálním středu. */
.search-window-in #formSearchForm.search-form {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Nadpis sekce pod vyhledáváním. */
.search-window-in .search > h3 {
    width: 100% !important;
    max-width: 760px !important;

    margin: 30px auto 18px !important;

    text-align: center !important;
}

/* Grid Novinek na stejné středové ose jako search bar. */
.search-window-in .recommended-products.hl-search-new-products {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Obsah karet necháváme vlevo – měníme pouze polohu celého gridu. */
.search-window-in .hl-search-product {
    text-align: left !important;
}

@media (max-width: 767px) {
    .search-window-in .search > h3 {
        margin-top: 24px !important;
        margin-bottom: 14px !important;
    }
}

/* ================================
   SEARCH – MORE SPACE BEFORE NOVINKY
   Větší mezera mezi search barem a nadpisem Novinky.
================================ */

.search-window-in .search > h3 {
    margin-top: 42px !important;
}

@media (max-width: 767px) {
    .search-window-in .search > h3 {
        margin-top: 32px !important;
    }
}

/* ==========================================================
   HEADER – ACCOUNT + CART ICONS
   Strictly separated:
   account icon exists ONLY on login button
   cart icon exists ONLY on header cart link
   ========================================================== */

.navigation-buttons button.top-nav-button.top-nav-button-login,
.navigation-buttons a[data-testid="headerCart"] {
    position: relative !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
    scale: 1 !important;
    -webkit-tap-highlight-color: transparent;
}

/* Remove all native icon artwork first. */
.navigation-buttons button.top-nav-button.top-nav-button-login::before,
.navigation-buttons button.top-nav-button.top-nav-button-login::after,
.navigation-buttons a[data-testid="headerCart"]::before,
.navigation-buttons a[data-testid="headerCart"]::after {
    content: none !important;
    display: none !important;
}

/* ACCOUNT: its own layer only. */
.navigation-buttons button.top-nav-button.top-nav-button-login::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #111111 !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2210%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M7%2027c.7-5.5%204.1-8.5%209-8.5s8.3%203%209%208.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2210%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M7%2027c.7-5.5%204.1-8.5%209-8.5s8.3%203%209%208.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: 28px 28px !important;
    mask-size: 28px 28px !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    transition: background-color 0.25s ease !important;
}

/* CART: its own layer only. */
.navigation-buttons a[data-testid="headerCart"]::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 29px !important;
    height: 29px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #111111 !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M4.2%205.7h2.1c1.1%200%202%20.8%202.2%201.9l2%2010.6c.2%201.2%201.3%202.1%202.5%202.1h9.1c1.1%200%202.1-.7%202.5-1.8l3-8.2c.5-1.4-.5-2.9-2-2.9H10%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.15%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Ccircle%20cx%3D%2213.3%22%20cy%3D%2225.6%22%20r%3D%221.75%22%20fill%3D%22black%22/%3E%3Ccircle%20cx%3D%2223.1%22%20cy%3D%2225.6%22%20r%3D%221.75%22%20fill%3D%22black%22/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M4.2%205.7h2.1c1.1%200%202%20.8%202.2%201.9l2%2010.6c.2%201.2%201.3%202.1%202.5%202.1h9.1c1.1%200%202.1-.7%202.5-1.8l3-8.2c.5-1.4-.5-2.9-2-2.9H10%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.15%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Ccircle%20cx%3D%2213.3%22%20cy%3D%2225.6%22%20r%3D%221.75%22%20fill%3D%22black%22/%3E%3Ccircle%20cx%3D%2223.1%22%20cy%3D%2225.6%22%20r%3D%221.75%22%20fill%3D%22black%22/%3E%3C/svg%3E") !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: 29px 29px !important;
    mask-size: 29px 29px !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    transition: background-color 0.25s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    .navigation-buttons button.top-nav-button.top-nav-button-login:hover::before,
    .navigation-buttons a[data-testid="headerCart"]:hover::after {
        background-color: #f19210 !important;
    }
}

.navigation-buttons button.top-nav-button.top-nav-button-login:focus-visible::before,
.navigation-buttons button.top-nav-button.top-nav-button-login:active::before,
.navigation-buttons a[data-testid="headerCart"]:focus-visible::after,
.navigation-buttons a[data-testid="headerCart"]:active::after {
    background-color: #f19210 !important;
}

/* Preserve Shoptet's native cart-count badge. */
.navigation-buttons a[data-testid="headerCart"] i[data-testid="headerCartCount"] {
    position: relative;
    z-index: 2;
}

/* ==========================================================
   HEADER – CUSTOM SEARCH ICON + CART COUNT POSITION
   ========================================================== */

/* SEARCH: remove native Shoptet artwork completely. */
.navigation-buttons a[data-target="search"] {
    position: relative !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
    scale: 1 !important;
    -webkit-tap-highlight-color: transparent;
}

.navigation-buttons a[data-target="search"]::before,
.navigation-buttons a[data-target="search"]::after {
    content: none !important;
    display: none !important;
}

/* One clean custom magnifier layer. */
.navigation-buttons a[data-target="search"]::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 29px !important;
    height: 29px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #111111 !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center !important;
    pointer-events: none !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%228.2%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.15%22/%3E%3Cpath%20d%3D%22M20.1%2020.1L26.3%2026.3%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.15%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%228.2%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.15%22/%3E%3Cpath%20d%3D%22M20.1%2020.1L26.3%2026.3%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.15%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: 29px 29px !important;
    mask-size: 29px 29px !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    transition: background-color 0.25s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    .navigation-buttons a[data-target="search"]:hover::before {
        background-color: #f19210 !important;
    }
}

.navigation-buttons a[data-target="search"]:focus-visible::before,
.navigation-buttons a[data-target="search"]:active::before {
    background-color: #f19210 !important;
}

/* CART COUNT:
   The old global rule used transform: translateY(-0.5px) without
   anchoring the badge to the 80x80 cart control. Make it absolute
   relative to the cart icon instead. */
.navigation-buttons a[data-testid="headerCart"] {
    position: relative !important;
}

.navigation-buttons
a[data-testid="headerCart"]
i[data-testid="headerCartCount"] {
    position: absolute !important;
    top: 18px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;

    z-index: 5 !important;

    min-width: 18px !important;
    width: auto !important;
    height: 18px !important;

    margin: 0 !important;
    padding: 0 5px !important;

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

    box-sizing: border-box !important;

    background: #f19210 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 999px !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    line-height: 18px !important;

    transform: none !important;
}

/* ==========================================================
   DESKTOP STICKY HEADER – NATIVE 80 PX GEOMETRY
   Shoptet's internal header layout is left untouched.
   ========================================================== */

@media (min-width: 992px) {

    #header.hl-sticky {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        margin: 0 !important;

        background: #eeeeee !important;

        z-index: 1000 !important;

        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;

        animation: hlStickyIn 0.22s ease-out both;
    }

    /*
     * Keep the existing Shoptet container geometry.
     * Only extend the requested background through the complete bar.
     */
    #header.hl-sticky > .container.navigation-wrapper {
        background: #eeeeee !important;
    }

    /*
     * Remove decorative pseudo-elements that can visually continue
     * below the fixed header. No dimensions/display of real elements
     * are changed.
     */
    #header.hl-sticky::after,
    #header.hl-sticky > .container.navigation-wrapper::before,
    #header.hl-sticky > .container.navigation-wrapper::after {
        content: none !important;
        display: none !important;
    }
}

@keyframes hlStickyIn {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #header.hl-sticky {
        animation: none !important;
    }
}

/* ==========================================================
   DESKTOP STICKY HEADER – FLOW PLACEHOLDER
   Keeps the page geometry unchanged when #header becomes fixed.
   ========================================================== */

.hl-header-placeholder {
    display: none;
}

@media (min-width: 992px) {
    .hl-header-placeholder.hl-header-placeholder--active {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* ==========================================================
   HOCKEYLAND – PILL BUTTONS
   Universal treatment for standard Shoptet .btn controls.
   Geometry, colors, typography and behavior stay unchanged.
   ========================================================== */

.btn {
    border-radius: 9999px !important;
}

/* ==========================================================
   HOCKEYLAND – REMOVE LEGACY BUTTON ARROWS
   Removes decorative arrow pseudo-elements from standard
   Shoptet buttons without touching real icons/content.
   ========================================================== */

.btn::before,
.btn::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================
   HOCKEYLAND – FREE SHIPPING PROGRESS BAR
   Fully rounded track and filled progress.
   ========================================================== */

.extra.delivery .price-range,
.extra.delivery .price-range > div {
    border-radius: 9999px !important;
    overflow: hidden !important;
}

/* ==========================================================
   HOCKEYLAND – MODERN CHECKOUT STEPPER
   Scoped only to the cart/checkout progress navigation.
   ========================================================== */

#cart-wrapper > ol.cart-header.step- {
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;

    width: 100% !important;
    margin: 0 0 34px !important;
    padding: 0 !important;

    list-style: none !important;

    border: 0 !important;
    background: transparent !important;
}

#cart-wrapper > ol.cart-header.step-::before,
#cart-wrapper > ol.cart-header.step-::after {
    content: none !important;
    display: none !important;
}

#cart-wrapper > ol.cart-header.step- > li.step {
    position: relative !important;

    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 68px !important;

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

    margin: 0 !important;
    padding: 12px 18px !important;

    border: 1px solid #e2e2e2 !important;
    border-radius: 9999px !important;

    background: #f5f5f5 !important;
    box-shadow: none !important;

    color: #5d5d5d !important;
}

#cart-wrapper > ol.cart-header.step- > li.step::before,
#cart-wrapper > ol.cart-header.step- > li.step::after {
    content: none !important;
    display: none !important;
}

#cart-wrapper > ol.cart-header.step- > li.step > strong,
#cart-wrapper > ol.cart-header.step- > li.step > a {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;
    text-decoration: none !important;
}

#cart-wrapper > ol.cart-header.step- > li.step span {
    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;
    line-height: 1.25 !important;
}

#cart-wrapper > ol.cart-header.step- > li.step span::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 30px !important;
    height: 30px !important;

    margin-right: 9px !important;

    border-radius: 9999px !important;

    background: #e7e7e7 !important;
    color: #555555 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
    vertical-align: middle !important;
}

#cart-wrapper > ol.cart-header.step- > li.step-1 span::before {
    content: "1" !important;
}

#cart-wrapper > ol.cart-header.step- > li.step-2 span::before {
    content: "2" !important;
}

#cart-wrapper > ol.cart-header.step- > li.step-3 span::before {
    content: "3" !important;
}

#cart-wrapper > ol.cart-header.step- > li.step.active {
    border-color: rgba(241, 146, 16, 0.34) !important;

    background: #ffffff !important;
    color: #111111 !important;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06) !important;
}

#cart-wrapper > ol.cart-header.step- > li.step.active span::before {
    background: #f19210 !important;
    color: #ffffff !important;
}

@media (max-width: 767px) {

    #cart-wrapper > ol.cart-header.step- {
        gap: 7px !important;
        margin-bottom: 24px !important;
    }

    #cart-wrapper > ol.cart-header.step- > li.step {
        min-height: 54px !important;
        padding: 8px 10px !important;
    }

    #cart-wrapper > ol.cart-header.step- > li.step span::before {
        min-width: 24px !important;
        height: 24px !important;
        margin-right: 5px !important;

        font-size: 11px !important;
        line-height: 24px !important;
    }
}


/* ==========================================================
   HOCKEYLAND – HOMEPAGE PILL TABS
   Scoped only to #homepage-tabs.
   ========================================================== */

.shp-tabs-holder:has(> ul#homepage-tabs) {
    display: flex !important;
    justify-content: center !important;

    margin: 0 0 28px !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
}

ul#homepage-tabs.shp-tabs {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;

    width: auto !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 5px !important;

    border: 0 !important;
    border-radius: 9999px !important;

    background: #eeeeee !important;
    box-shadow: none !important;

    list-style: none !important;
}

ul#homepage-tabs.shp-tabs::before,
ul#homepage-tabs.shp-tabs::after {
    content: none !important;
    display: none !important;
}

ul#homepage-tabs.shp-tabs > li.shp-tab {
    position: relative !important;

    float: none !important;
    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 9999px !important;

    background: transparent !important;
    box-shadow: none !important;
}

ul#homepage-tabs.shp-tabs > li.shp-tab::before,
ul#homepage-tabs.shp-tabs > li.shp-tab::after {
    content: none !important;
    display: none !important;
}

ul#homepage-tabs.shp-tabs > li.shp-tab > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 42px !important;

    margin: 0 !important;
    padding: 9px 20px !important;

    border: 0 !important;
    border-radius: 9999px !important;

    background: transparent !important;

    color: #444444 !important;
    text-decoration: none !important;

    transition:
        background-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease !important;
}

ul#homepage-tabs.shp-tabs > li.shp-tab > a::before,
ul#homepage-tabs.shp-tabs > li.shp-tab > a::after {
    content: none !important;
    display: none !important;
}

ul#homepage-tabs.shp-tabs > li.shp-tab:not(.active) > a:hover {
    background: rgba(255, 255, 255, 0.58) !important;
    color: #111111 !important;
}

ul#homepage-tabs.shp-tabs > li.shp-tab.active {
    background: transparent !important;
}

ul#homepage-tabs.shp-tabs > li.shp-tab.active > a {
    background: #ffffff !important;
    color: #111111 !important;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.09) !important;
}

@media (max-width: 767px) {

    .shp-tabs-holder:has(> ul#homepage-tabs) {
        overflow-x: auto !important;
        justify-content: flex-start !important;

        margin-left: -4px !important;
        margin-right: -4px !important;
        padding: 0 4px 4px !important;

        scrollbar-width: none;
    }

    .shp-tabs-holder:has(> ul#homepage-tabs)::-webkit-scrollbar {
        display: none;
    }

    ul#homepage-tabs.shp-tabs {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    ul#homepage-tabs.shp-tabs > li.shp-tab > a {
        min-height: 38px !important;
        padding: 8px 16px !important;
    }
}

/* ==========================================================
   HOCKEYLAND – CHECKOUT STEPPER INNER RESET / POLISH
   Removes the remaining native Shoptet box from <strong>
   and keeps only the new pill step design.
   ========================================================== */

#cart-wrapper > ol.cart-header.step- > li.step {
    min-height: 58px !important;
    padding: 8px 16px !important;
}

#cart-wrapper > ol.cart-header.step- > li.step > strong,
#cart-wrapper > ol.cart-header.step- > li.step > a {
    position: static !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

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

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-image: none !important;

    box-shadow: none !important;

    color: inherit !important;
    text-decoration: none !important;
}

#cart-wrapper > ol.cart-header.step- > li.step > strong::before,
#cart-wrapper > ol.cart-header.step- > li.step > strong::after,
#cart-wrapper > ol.cart-header.step- > li.step > a::before,
#cart-wrapper > ol.cart-header.step- > li.step > a::after {
    content: none !important;
    display: none !important;
}

#cart-wrapper > ol.cart-header.step- > li.step > strong > span,
#cart-wrapper > ol.cart-header.step- > li.step > a > span {
    position: static !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

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

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-image: none !important;

    box-shadow: none !important;

    color: inherit !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

@media (max-width: 767px) {
    #cart-wrapper > ol.cart-header.step- > li.step {
        min-height: 50px !important;
        padding: 7px 9px !important;
    }

    #cart-wrapper > ol.cart-header.step- > li.step > strong > span,
    #cart-wrapper > ol.cart-header.step- > li.step > a > span {
        white-space: normal !important;
        text-align: center !important;
    }
}

/* ==========================================================
   HOCKEYLAND – CHECKOUT DESIGN SYSTEM v126
   One consistent visual language for every checkout step.
   Scoped to checkout/cart structures only.
   ========================================================== */

/* ---------- 1. Stepper: all checkout pages ---------- */

ol.cart-header[class*="step-"] {
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;

    width: 100% !important;
    margin: 0 0 30px !important;
    padding: 0 !important;

    list-style: none !important;
    border: 0 !important;
    background: transparent !important;
}

ol.cart-header[class*="step-"]::before,
ol.cart-header[class*="step-"]::after {
    content: none !important;
    display: none !important;
}

ol.cart-header[class*="step-"] > li.step {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 58px !important;

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

    margin: 0 !important;
    padding: 8px 16px !important;

    border: 1px solid #e1e1e1 !important;
    border-radius: 9999px !important;

    background: #f4f4f4 !important;
    box-shadow: none !important;

    color: #666666 !important;
}

ol.cart-header[class*="step-"] > li.step::before,
ol.cart-header[class*="step-"] > li.step::after {
    content: none !important;
    display: none !important;
}

ol.cart-header[class*="step-"] > li.step > strong,
ol.cart-header[class*="step-"] > li.step > a {
    position: static !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

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

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    color: inherit !important;
    text-decoration: none !important;
}

ol.cart-header[class*="step-"] > li.step > strong::before,
ol.cart-header[class*="step-"] > li.step > strong::after,
ol.cart-header[class*="step-"] > li.step > a::before,
ol.cart-header[class*="step-"] > li.step > a::after {
    content: none !important;
    display: none !important;
}

ol.cart-header[class*="step-"] > li.step span {
    position: static !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

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

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    color: inherit !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

ol.cart-header[class*="step-"] > li.step span::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;

    margin-right: 9px !important;

    border-radius: 9999px !important;

    background: #e4e4e4 !important;
    color: #555555 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
}

ol.cart-header[class*="step-"] > li.step-1 span::before {
    content: "1" !important;
}

ol.cart-header[class*="step-"] > li.step-2 span::before {
    content: "2" !important;
}

ol.cart-header[class*="step-"] > li.step-3 span::before {
    content: "3" !important;
}

ol.cart-header[class*="step-"] > li.step.active {
    border-color: rgba(241, 146, 16, 0.42) !important;
    background: #ffffff !important;
    color: #111111 !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06) !important;
}

ol.cart-header[class*="step-"] > li.step.active span::before {
    background: #f19210 !important;
    color: #ffffff !important;
}

ol.cart-header[class*="step-"] > li.step.completed {
    border-color: #dedede !important;
    background: #f7f7f7 !important;
    color: #333333 !important;
}

ol.cart-header[class*="step-"] > li.step.completed span::before {
    background: #222222 !important;
    color: #ffffff !important;
}


/* ---------- 2. Checkout cards / sections ---------- */

#checkoutContent .box,
#checkoutContent .co-box,
#checkoutContent .box-bg-default,
#checkoutContent .order-summary {
    border: 1px solid #e4e4e4 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

#checkoutContent .co-basic-information,
#checkoutContent .co-delivery-method,
#checkoutContent .co-payment-method,
#checkoutContent .order-summary {
    overflow: hidden !important;
}

#checkoutContent .co-basic-information {
    padding: 24px !important;
}

#checkoutContent .co-basic-information h2,
#checkoutContent .co-basic-information h3,
#checkoutContent .co-delivery-method > h2,
#checkoutContent .co-delivery-method > h3,
#checkoutContent .co-payment-method > h2,
#checkoutContent .co-payment-method > h3,
#checkoutContent .order-summary h2,
#checkoutContent .order-summary h3 {
    margin-top: 0 !important;
}


/* ---------- 3. Country selector / form controls ---------- */

#checkoutContent select,
#checkoutContent input[type="text"],
#checkoutContent input[type="email"],
#checkoutContent input[type="tel"],
#checkoutContent input[type="number"],
#checkoutContent textarea {
    border-radius: 12px !important;
}


/* ---------- 4. Delivery + payment option rows ---------- */

#checkoutContent .co-delivery-method .shipping-billing-table,
#checkoutContent .co-payment-method .shipping-billing-table,
#checkoutContent #order-billing-methods {
    border: 0 !important;
    background: transparent !important;
}

#checkoutContent .co-delivery-method .shipping-billing-table > div,
#checkoutContent .co-payment-method .shipping-billing-table > div,
#checkoutContent #order-billing-methods > div {
    border-color: #e7e7e7 !important;
}

#checkoutContent .co-delivery-method .shipping-billing-table > div:hover,
#checkoutContent .co-payment-method .shipping-billing-table > div:hover,
#checkoutContent #order-billing-methods > div:hover {
    background: #fafafa !important;
}


/* ---------- 5. Delivery/payment form layout ---------- */

#checkoutContent #order-form.order-delivery-payment-form {
    gap: 16px !important;
}

#checkoutContent #order-form.order-delivery-payment-form > .co-box {
    min-width: 0 !important;
}


/* ---------- 6. Order summary ---------- */

#checkoutContent .order-summary {
    margin-top: 16px !important;
}

#checkoutContent .order-summary-inner {
    padding: 24px !important;
}

#checkoutContent .order-summary-inner > * {
    border-color: #e7e7e7 !important;
}


/* ---------- 7. Bottom navigation ---------- */

#checkoutContent .next-step {
    margin-top: 22px !important;
}

#checkoutContent .next-step .btn,
#checkoutContent .next-step a.btn,
#checkoutContent .next-step button.btn {
    border-radius: 9999px !important;
}


/* ---------- 8. Mobile checkout ---------- */

@media (max-width: 767px) {

    ol.cart-header[class*="step-"] {
        gap: 6px !important;
        margin-bottom: 22px !important;
    }

    ol.cart-header[class*="step-"] > li.step {
        min-height: 50px !important;
        padding: 7px 8px !important;
    }

    ol.cart-header[class*="step-"] > li.step span {
        white-space: normal !important;
        text-align: center !important;
        font-size: 12px !important;
    }

    ol.cart-header[class*="step-"] > li.step span::before {
        flex-basis: 24px !important;
        width: 24px !important;
        height: 24px !important;
        margin-right: 5px !important;
        font-size: 11px !important;
        line-height: 24px !important;
    }

    #checkoutContent .co-basic-information {
        padding: 18px !important;
    }

    #checkoutContent .order-summary-inner {
        padding: 18px !important;
    }

    #checkoutContent .box,
    #checkoutContent .co-box,
    #checkoutContent .box-bg-default,
    #checkoutContent .order-summary {
        border-radius: 14px !important;
    }
}

/* ==========================================================
   HOCKEYLAND – PRICE FILTER SLIDER HANDLES
   Round both price-range handles without changing their size.
   ========================================================== */

#slider .ui-slider-handle {
    border-radius: 50% !important;
}

/* ==========================================================
   HOCKEYLAND – PRICE FILTER TRACK, FINAL STRUCTURE
   Base: v127.
   - .slider-content = neutral wrapper
   - #slider = fixed full price-scale track
   - .ui-slider-range = selected interval
   - handles remain circular
   The fixed track is inset by half the 20px handle diameter,
   so it ends at the handle centres at the absolute min/max.
   ========================================================== */

#filters .slider-content {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Fixed full-scale track */
#filters .slider-content > #slider.param-price-filter {
    width: calc(100% - 20px) !important;
    margin-left: 10px !important;
    margin-right: 10px !important;

    background: #eeeeee !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 9999px !important;
    box-shadow: none !important;
}

/* Selected interval between both handles */
#filters .slider-content > #slider.param-price-filter > .ui-slider-range {
    top: 0 !important;
    height: 100% !important;

    background: #d4d4d4 !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 9999px !important;
    box-shadow: none !important;
}

/* The native handle is positioned by its centre around left: x%.
   Undo the track inset for the endpoint geometry so min/max handles
   still visually sit at the ends of the original slider area. */
#filters .slider-content > #slider.param-price-filter > .ui-slider-handle {
    z-index: 2 !important;
    border-radius: 50% !important;
}

/* ==========================================================
   HOCKEYLAND – PRICE FILTER RANGE CONTRAST
   Lighter full-scale track outside the selected interval.
   ========================================================== */

#filters .slider-content > #slider.param-price-filter {
    background: #eeeeee !important;
}

#filters .slider-content > #slider.param-price-filter > .ui-slider-range {
    background: #cfcfcf !important;
}

/* ==========================================================
   HOCKEYLAND – PICKUP POINT MODAL INPUTS
   Round the city/branch and ZIP-code fields in carrier modal.
   ========================================================== */

.content-modal .delivery-point-form input.form-control.ui-autocomplete-input,
.content-modal .delivery-point-form input.form-control.zip-code {
    border-radius: 9999px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* ==========================================================
   HOCKEYLAND – PICKUP POINT MODAL CONTAINER
   Round the white modal background/content panel.
   ========================================================== */

#colorbox #cboxLoadedContent,
#colorbox #cboxContent,
#colorbox .content-modal {
    border-radius: 18px !important;
}

#colorbox #cboxLoadedContent {
    overflow: hidden !important;
}

/* ==========================================================
   HOCKEYLAND – COLORBOX MODAL: ALL FOUR CORNERS
   Round the complete Colorbox layer stack consistently.
   ========================================================== */

#colorbox,
#colorbox #cboxWrapper,
#colorbox #cboxContent,
#colorbox #cboxLoadedContent {
    border-radius: 18px !important;
}

#colorbox #cboxWrapper,
#colorbox #cboxContent,
#colorbox #cboxLoadedContent {
    overflow: hidden !important;
}

/* Colorbox helper/background layers must not paint a square
   corner over the rounded modal. */
#colorbox #cboxTopLeft,
#colorbox #cboxTopCenter,
#colorbox #cboxTopRight,
#colorbox #cboxMiddleLeft,
#colorbox #cboxMiddleRight,
#colorbox #cboxBottomLeft,
#colorbox #cboxBottomCenter,
#colorbox #cboxBottomRight {
    background: transparent !important;
}

/* ==========================================================
   HOCKEYLAND – CATEGORY SORTING SEGMENTED PILL
   Matches the visual language of homepage tabs.
   ========================================================== */

#category-header .listSorting {
    border: 0 !important;
    background: transparent !important;
}

#category-header .listSorting__controls {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;

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

    margin: 0 !important;
    padding: 5px !important;

    list-style: none !important;

    border: 0 !important;
    border-radius: 22px !important;

    background: #eeeeee !important;
    box-shadow: none !important;
}

#category-header .listSorting__controls > li {
    float: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
}

#category-header .listSorting__control {
    min-height: 38px !important;

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

    margin: 0 !important;
    padding: 8px 16px !important;

    border: 0 !important;
    border-radius: 9999px !important;

    background: transparent !important;
    background-image: none !important;

    box-shadow: none !important;

    color: #444444 !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    transition:
        background-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease !important;
}

#category-header .listSorting__control::before,
#category-header .listSorting__control::after {
    content: none !important;
    display: none !important;
}

#category-header .listSorting__control:not(.listSorting__control--current):hover {
    background: rgba(255, 255, 255, 0.58) !important;
    color: #111111 !important;
}

#category-header .listSorting__control--current {
    background: #ffffff !important;
    color: #111111 !important;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.09) !important;
}

@media (max-width: 767px) {
    #category-header .listSorting__controls {
        width: 100% !important;
        border-radius: 18px !important;
    }

    #category-header .listSorting__control {
        min-height: 36px !important;
        padding: 7px 13px !important;
    }
}

/* ==========================================================
   HOCKEYLAND – CATEGORY SORTING / MOBILE
   Desktop keeps the segmented pill from v137.
   On phones, sorting becomes a clean 2-column pill grid.
   Also removes the native Shoptet divider underneath.
   ========================================================== */

#category-header,
#category-header .listSorting,
#category-header .listSorting__controls {
    border-bottom: 0 !important;
}

#category-header::after,
#category-header .listSorting::after,
#category-header .listSorting__controls::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
}

@media (max-width: 767px) {

    #category-header .listSorting {
        width: 100% !important;
    }

    #category-header .listSorting__controls {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;
        box-shadow: none !important;
    }

    #category-header .listSorting__controls > li {
        width: 100% !important;
        min-width: 0 !important;
    }

    #category-header .listSorting__control {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;

        padding: 8px 10px !important;

        border: 1px solid #e4e4e4 !important;
        border-radius: 9999px !important;

        background: #f4f4f4 !important;

        font-size: 13px !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    #category-header .listSorting__control--current {
        border-color: rgba(241, 146, 16, 0.35) !important;
        background: #ffffff !important;
        color: #111111 !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
    }

    /* Fifth item spans the row instead of leaving an awkward empty cell. */
    #category-header .listSorting__controls > li:last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
    }
}

/* ==========================================================
   HOCKEYLAND – GLOBAL CIRCULAR CHECKBOXES
   Full custom rendering: native square checkbox appearance is
   removed so border-radius cannot be ignored by the browser.
   Applies to checkboxes across the whole e-shop.
   ========================================================== */

input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;

    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;

    margin: 0 10px 0 0 !important;
    padding: 0 !important;

    border: 1px solid #a9a9a9 !important;
    border-radius: 50% !important;

    background: #ffffff !important;
    background-image: none !important;

    box-shadow: none !important;
    vertical-align: middle !important;
    cursor: pointer !important;

    position: relative !important;
}

input[type="checkbox"]:checked {
    border-color: #2f2f2f !important;
    background: #2f2f2f !important;
}

input[type="checkbox"]:checked::after {
    content: "" !important;

    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    width: 6px !important;
    height: 6px !important;

    border-radius: 50% !important;
    background: #ffffff !important;

    transform: translate(-50%, -50%) !important;
}

input[type="checkbox"]:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* ==========================================================
   HOCKEYLAND – GLOBAL CHECKBOX DOTS
   Replace Shoptet's native/custom square checkbox completely
   with one small circular dot.
   ========================================================== */

/* Hide Shoptet's square checkbox itself while keeping it
   functional and clickable through its label. */
input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* Remove any visual generated directly by the hidden input. */
input[type="checkbox"]::before,
input[type="checkbox"]::after {
    content: none !important;
    display: none !important;
}

/* The label becomes the only visible control. */
input[type="checkbox"] + label {
    position: relative !important;
}

/* Neutralise Shoptet's original square indicator. */
input[type="checkbox"] + label::before {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;

    margin-right: 11px !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #d2d2d2 !important;
    background-image: none !important;

    box-shadow: none !important;
}

/* Checked = one solid dark dot. */
input[type="checkbox"]:checked + label::before {
    background: #2f2f2f !important;
}

/* No checkmark, inner ring or second symbol. */
input[type="checkbox"] + label::after,
input[type="checkbox"]:checked + label::after {
    content: none !important;
    display: none !important;
}

/* Disabled checkbox dot. */
input[type="checkbox"]:disabled + label::before {
    background: #eeeeee !important;
    opacity: 1 !important;
}

/* ==========================================================
   HOCKEYLAND – RADIO / CHECKBOX VISUAL
   Target appearance:
   unselected = thin circular outline
   selected   = thin circular outline + solid dark centre dot
   ========================================================== */

/* CHECKBOXES – replace the old square with a radio-style circle */
input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    margin: 0 !important;
    pointer-events: none !important;
}

input[type="checkbox"] + label {
    position: relative !important;
}

input[type="checkbox"] + label::before {
    box-sizing: border-box !important;

    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;

    margin-right: 10px !important;

    border: 1.5px solid #8f8f8f !important;
    border-radius: 50% !important;

    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Inner dot */
input[type="checkbox"] + label::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;

    width: 10px !important;
    height: 10px !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #2f2f2f !important;
    background-image: none !important;

    opacity: 0 !important;
    transform: scale(0.5) !important;
    transition: opacity 0.12s ease, transform 0.12s ease !important;
}

/* Shoptet filter labels */
input[type="checkbox"]:checked + label::after {
    opacity: 1 !important;
    transform: scale(1) !important;
}

input[type="checkbox"]:disabled + label::before {
    border-color: #dddddd !important;
    background: #f7f7f7 !important;
}

input[type="checkbox"]:disabled + label::after {
    background: #cfcfcf !important;
}

/* RADIO BUTTONS – unify selected state with the same visual language */
input[type="radio"] {
    accent-color: #2f2f2f;
}

/* ==========================================================
   HOCKEYLAND – HOMEPAGE TABS / MOBILE CENTERING
   ========================================================== */

@media (max-width: 767px) {
    .homepage-tabs-wrapper .shp-tabs-row {
        display: flex !important;
        justify-content: center !important;
    }

    .homepage-tabs-wrapper .shp-tabs-holder {
        width: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .homepage-tabs-wrapper ul#homepage-tabs {
        width: max-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==========================================================
   HOCKEYLAND – NEWSLETTER E-MAIL INPUT
   Subtle corner rounding only.
   ========================================================== */

#newsletterWidget {
    border-radius: 6px !important;
}

/* ==========================================================
   HOCKEYLAND – NEWSLETTER E-MAIL INPUT / STRONGER RADIUS
   ========================================================== */

#newsletterWidget {
    border-radius: 12px !important;
}

/* ==========================================================
   HOCKEYLAND – REMOVE MOBILE TAP HIGHLIGHT
   Removes the browser's blue tap flash/highlight across the
   storefront, especially homepage tabs on touch devices.
   ========================================================== */

*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent !important;
}

/* Keep homepage tabs completely clean when tapped. */
#homepage-tabs a,
#homepage-tabs button,
.homepage-tabs-wrapper a,
.homepage-tabs-wrapper button {
    -webkit-tap-highlight-color: transparent !important;
}

/* ==========================================================
   HOCKEYLAND – REMOVE FOCUS / TAP OUTLINES
   Removes the blue focus rectangle that remains after tapping
   interactive elements on touch devices.
   ========================================================== */

@media (hover: none), (pointer: coarse) {
    a:focus,
    a:focus-visible,
    button:focus,
    button:focus-visible,
    input:focus,
    input:focus-visible,
    select:focus,
    select:focus-visible,
    textarea:focus,
    textarea:focus-visible,
    [role="button"]:focus,
    [role="button"]:focus-visible,
    [role="tab"]:focus,
    [role="tab"]:focus-visible {
        outline: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    #homepage-tabs a:focus,
    #homepage-tabs a:focus-visible,
    #homepage-tabs .shp-tab-link:focus,
    #homepage-tabs .shp-tab-link:focus-visible {
        outline: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
}

/* ==========================================================
   HOCKEYLAND – REMOVE SHOPTET TAB FOCUS FRAME
   The large blue rectangle is not Safari's tap highlight.
   It is an outline/focus style applied to the tab panel that
   receives focus after switching homepage tabs.
   ========================================================== */

#tab-content,
#tab-content:focus,
#tab-content:focus-visible,
#tab-content[tabindex]:focus,
#tab-content[tabindex]:focus-visible,
.homepage-tabs-wrapper,
.homepage-tabs-wrapper:focus,
.homepage-tabs-wrapper:focus-visible,
.homepage-tabs-wrapper [role="tabpanel"],
.homepage-tabs-wrapper [role="tabpanel"]:focus,
.homepage-tabs-wrapper [role="tabpanel"]:focus-visible,
.homepage-tabs-wrapper .tab-pane,
.homepage-tabs-wrapper .tab-pane:focus,
.homepage-tabs-wrapper .tab-pane:focus-visible {
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* ==========================================================
   HOCKEYLAND – NEWSLETTER INPUT / ALL SCREEN SIZES
   Apply the same rounded corners on desktop and mobile.
   Target both the input itself and Shoptet's wrapper so a
   square parent/background cannot visually override it.
   ========================================================== */

#rmNewsletterWidget .form-control-wrapper,
#rmNewsletterWidget .js-validated-element-wrapper,
#newsletterWidget {
    border-radius: 12px !important;
}

#rmNewsletterWidget .form-control-wrapper,
#rmNewsletterWidget .js-validated-element-wrapper {
    overflow: hidden !important;
}

#newsletterWidget {
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ==========================================================
   HOCKEYLAND – FOOTER NEWSLETTER INPUT
   The footer uses #newsletter, while the sidebar newsletter
   uses #newsletterWidget. Apply the same 12px radius to both.
   ========================================================== */

#newsletter,
#newsletterWidget {
    border-radius: 12px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Keep both Shoptet newsletter wrappers clipped to the same radius. */
#formNewsletter .form-control-wrapper,
#rmNewsletterWidget .form-control-wrapper {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* ==========================================================
   HOCKEYLAND – HEADER CART / REMOVE FOCUS RECTANGLE
   Removes the blue focus outline around the cart link itself.
   ========================================================== */

.navigation-buttons a.toggle-window.cart-count,
.navigation-buttons a.toggle-window.cart-count:focus,
.navigation-buttons a.toggle-window.cart-count:focus-visible,
.navigation-buttons a.toggle-window.cart-count:active,
a[data-testid="headerCart"],
a[data-testid="headerCart"]:focus,
a[data-testid="headerCart"]:focus-visible,
a[data-testid="headerCart"]:active {
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* ==========================================================
   HOCKEYLAND – GLOBAL REMOVE BROWSER FOCUS / TAP FRAMES
   Removes browser-generated blue focus rectangles/highlights
   from interactive storefront elements site-wide.
   Does not change element functionality or Shoptet JS logic.
   ========================================================== */

html {
    -webkit-tap-highlight-color: transparent !important;
}

a,
button,
input,
select,
textarea,
summary,
label,
[role="button"],
[role="tab"],
[tabindex] {
    -webkit-tap-highlight-color: transparent !important;
}

a:focus,
a:focus-visible,
a:active,
button:focus,
button:focus-visible,
button:active,
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible,
summary:focus,
summary:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible,
[role="tab"]:focus,
[role="tab"]:focus-visible,
[tabindex]:focus,
[tabindex]:focus-visible {
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Remove browser focus rings that are implemented as shadows,
   while leaving ordinary non-focus component shadows untouched. */
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible,
[role="tab"]:focus,
[role="tab"]:focus-visible,
[tabindex]:focus,
[tabindex]:focus-visible {
    box-shadow: none !important;
}

/* ==========================================================
   HOCKEYLAND – CART / CONTINUE ORDER BUTTON
   Make the main checkout CTA more compact.
   ========================================================== */

#continue-order-button {
    min-height: 0 !important;
    height: auto !important;
    padding: 11px 22px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
}

#continue-order-button .order-button-text {
    font-size: 15px !important;
    line-height: 1.2 !important;
}

/* ==========================================================
   HOCKEYLAND – CHECKOUT STEPPER / TOP SPACING
   Move the whole 3-step checkout row slightly lower so it
   does not sit directly against the header/navigation bar.
   ========================================================== */

ol.cart-header[class*="step-"] {
    margin-top: 24px !important;
}

/* ==========================================================
   HOCKEYLAND – CHECKOUT / UNIFIED FORWARD BUTTON SIZE
   Keep every "Pokračovat" CTA equally compact in all checkout
   steps, regardless of whether Shoptet renders <a> or <button>.
   ========================================================== */

#continue-order-button,
#orderFormButton,
.next-step .next-step-forward,
.next-step a.next-step-forward,
.next-step button.next-step-forward {
    min-height: 0 !important;
    height: auto !important;
    padding: 11px 22px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
}

#continue-order-button .order-button-text,
#orderFormButton .order-button-text,
.next-step .next-step-forward .order-button-text {
    font-size: 15px !important;
    line-height: 1.2 !important;
}

/* ==========================================================
   HOCKEYLAND – CHECKOUT / FINAL ORDER BUTTON SIZE
   Keep the final "Objednat" CTA compact like the previous
   checkout forward buttons.
   ========================================================== */

#submit-order,
.next-step .next-step-finish,
.next-step button.next-step-finish {
    min-height: 0 !important;
    height: auto !important;
    padding: 11px 22px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
}

#submit-order .order-button-text,
#submit-order .order-button-suffix,
.next-step .next-step-finish .order-button-text,
.next-step .next-step-finish .order-button-suffix {
    font-size: 15px !important;
    line-height: 1.2 !important;
}

/* ==========================================================
   HOCKEYLAND – CHECKOUT / FINAL ORDER BUTTON CENTERING
   Center the two-line final CTA as one block both vertically
   and horizontally.
   ========================================================== */

#submit-order,
.next-step button.next-step-finish {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0 !important;
}

#submit-order .order-button-text,
#submit-order .order-button-suffix,
.next-step .next-step-finish .order-button-text,
.next-step .next-step-finish .order-button-suffix {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1.1 !important;
}

/* ==========================================================
   HOCKEYLAND – FILTERS / CLEAR FILTERS ALIGNMENT
   Align "Vymazat filtry" to the left edge, matching the
   "Položek k zobrazení" text below.
   ========================================================== */

#filters #clear-filters {
    text-align: left !important;
}

#filters #clear-filters > a {
    display: inline-flex !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
}

/* ==========================================================
   HOCKEYLAND – FILTERS / CLEAR FILTERS CROSS FIX
   Keep the original close cross attached to the text after
   moving the whole control to the left.
   ========================================================== */

#filters #clear-filters > a.close-after {
    position: relative !important;
    width: auto !important;
    padding-right: 18px !important;
}

#filters #clear-filters > a.close-after::after {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
}

/* ==========================================================
   HOCKEYLAND – FILTERS / CLEAR FILTERS CROSS CENTERING
   Center the close cross vertically next to the text.
   ========================================================== */

#filters #clear-filters > a.close-after::after {
    top: 50% !important;
    bottom: auto !important;
    right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: translateY(-50%) !important;
    line-height: 1 !important;
}

/* ==========================================================
   HOCKEYLAND – FILTERS / CLEAR FILTERS CROSS FINAL ALIGNMENT
   Shoptet's .close-after::after is a 9×9 pseudo-element.
   Do not position it absolutely; keep it in the same flex row
   as the text and center both items on the cross axis.
   ========================================================== */

#filters #clear-filters > a.close-after {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    padding-right: 0 !important;
    gap: 7px !important;
    vertical-align: middle !important;
}

#filters #clear-filters > a.close-after::after {
    position: static !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
}

/* ==========================================================
   HOCKEYLAND – PRODUCT DETAIL TABS / PILL STYLE
   Restyle product-detail tabs to match the segmented pill
   language already used elsewhere on the storefront.
   ========================================================== */

.p-detail-tabs {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: #eeeeee !important;
    box-shadow: none !important;
}

.p-detail-tabs > .shp-tab {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.p-detail-tabs > .shp-tab > .shp-tab-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 9px 16px !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: transparent !important;
    color: #444444 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

.p-detail-tabs > .shp-tab.active > .shp-tab-link {
    background: #ffffff !important;
    color: #111111 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
}

.p-detail-tabs > .shp-tab:not(.active) > .shp-tab-link:hover {
    background: rgba(255, 255, 255, 0.48) !important;
    color: #111111 !important;
}

/* Remove the old rectangular tab separators/backgrounds. */
.p-detail-tabs > .shp-tab::before,
.p-detail-tabs > .shp-tab::after,
.p-detail-tabs > .shp-tab > .shp-tab-link::before,
.p-detail-tabs > .shp-tab > .shp-tab-link::after {
    content: none !important;
    display: none !important;
}

/* Mobile: keep the pills in one horizontal row and let Shoptet's
   existing responsive navigation handle items that do not fit. */
@media (max-width: 767px) {
    .shp-tabs-row:has(.p-detail-tabs) .shp-tabs-holder {
        overflow: hidden !important;
        border: 0 !important;
        background: transparent !important;
    }

    .p-detail-tabs {
        gap: 2px !important;
        padding: 4px !important;
    }

    .p-detail-tabs > .shp-tab > .shp-tab-link {
        min-height: 38px !important;
        padding: 8px 13px !important;
        font-size: 14px !important;
    }
}

/* ==========================================================
   HOCKEYLAND – PRODUCT DETAIL TABS / SHOW ALL 5 PILLS
   On mobile, fit Hodnocení and Diskuze directly into the same
   pill navigation instead of hiding them behind Shoptet's menu.
   ========================================================== */

@media (max-width: 767px) {
    .p-detail-tabs-wrapper .shp-tabs-row.responsive-nav {
        overflow: visible !important;
    }

    .p-detail-tabs-wrapper .shp-tabs-holder {
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .p-detail-tabs-wrapper .shp-tabs-holder::-webkit-scrollbar {
        display: none !important;
    }

    .p-detail-tabs-wrapper .p-detail-tabs {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        max-width: none !important;
    }

    .p-detail-tabs-wrapper .p-detail-tabs > .shp-tab {
        display: block !important;
        visibility: visible !important;
        flex: 0 0 auto !important;
    }

    .p-detail-tabs-wrapper .p-detail-tabs > .shp-tab > .shp-tab-link {
        padding-left: 13px !important;
        padding-right: 13px !important;
        white-space: nowrap !important;
    }

    /* Shoptet no longer needs the overflow/hamburger control here,
       because all product-detail tabs remain available in the pill row. */
    .p-detail-tabs-wrapper .navigation-btn,
    .p-detail-tabs-wrapper .hidden-links {
        display: none !important;
    }
}

/* ==========================================================
   HOCKEYLAND – PRODUCT DETAIL TABS / RESTORE HIDDEN TABS
   Shoptet physically moves overflow tabs from #p-detail-tabs
   into ul.hidden-links. Keep that list visible on mobile and
   style its two remaining links as a second pill row.
   ========================================================== */

@media (max-width: 767px) {
    .p-detail-tabs-wrapper .navigation-btn {
        display: none !important;
    }

    .p-detail-tabs-wrapper .hidden-links {
        display: flex !important;
        position: static !important;
        float: none !important;
        clear: both !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        width: max-content !important;
        max-width: 100% !important;
        margin: 6px 0 0 0 !important;
        padding: 4px !important;
        border: 0 !important;
        border-radius: 9999px !important;
        background: #eeeeee !important;
        box-shadow: none !important;
        list-style: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .p-detail-tabs-wrapper .hidden-links > li {
        display: block !important;
        position: static !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .p-detail-tabs-wrapper .hidden-links > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 38px !important;
        padding: 8px 13px !important;
        border: 0 !important;
        border-radius: 9999px !important;
        background: transparent !important;
        color: #444444 !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

    .p-detail-tabs-wrapper .hidden-links > li.active > a,
    .p-detail-tabs-wrapper .hidden-links > li > a.active {
        background: #ffffff !important;
        color: #111111 !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
    }
}

/* ==========================================================
   HOCKEYLAND – PRODUCT DETAIL TABS / INDIVIDUAL PILLS
   Each tab is its own pill. Both mobile rows start from the
   same left edge; no shared grey capsule around a whole row.
   ========================================================== */

.p-detail-tabs-wrapper .p-detail-tabs {
    justify-content: flex-start !important;
    gap: 7px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.p-detail-tabs-wrapper .p-detail-tabs > .shp-tab > .shp-tab-link {
    border-radius: 9999px !important;
    background: #eeeeee !important;
}

.p-detail-tabs-wrapper .p-detail-tabs > .shp-tab.active > .shp-tab-link {
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
}

@media (max-width: 767px) {
    .p-detail-tabs-wrapper .shp-tabs-row.responsive-nav,
    .p-detail-tabs-wrapper .shp-tabs-holder {
        text-align: left !important;
    }

    .p-detail-tabs-wrapper .p-detail-tabs {
        justify-content: flex-start !important;
        gap: 7px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .p-detail-tabs-wrapper .hidden-links {
        display: flex !important;
        justify-content: flex-start !important;
        gap: 7px !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 7px 0 0 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .p-detail-tabs-wrapper .hidden-links > li > a {
        border-radius: 9999px !important;
        background: #eeeeee !important;
    }

    .p-detail-tabs-wrapper .hidden-links > li.active > a,
    .p-detail-tabs-wrapper .hidden-links > li > a.active {
        background: #ffffff !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
    }
}

/* ==========================================================
   HOCKEYLAND – PRODUCT DETAIL TABS / MOBILE POLISH
   True left alignment + clearer hover/active states.
   ========================================================== */

@media (max-width: 767px) {
    /* Shoptet's Bootstrap row has negative side margins.
       Neutralize them so both pill rows share the content edge. */
    .p-detail-tabs-wrapper > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .p-detail-tabs-wrapper .shp-tabs-row.responsive-nav {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .p-detail-tabs-wrapper .shp-tabs-holder {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        text-align: left !important;
    }

    .p-detail-tabs-wrapper .p-detail-tabs {
        display: flex !important;
        justify-content: flex-start !important;
        width: max-content !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .p-detail-tabs-wrapper .hidden-links {
        position: static !important;
        display: flex !important;
        float: none !important;
        justify-content: flex-start !important;
        width: max-content !important;
        margin: 8px 0 0 0 !important;
        padding: 0 !important;
        gap: 8px !important;
        text-align: left !important;
    }

    /* Every item is a standalone pill. */
    .p-detail-tabs-wrapper .p-detail-tabs > .shp-tab > .shp-tab-link,
    .p-detail-tabs-wrapper .hidden-links > li > a {
        background: #eeeeee !important;
        border: 1px solid transparent !important;
        border-radius: 9999px !important;
        box-shadow: none !important;
        transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease !important;
    }

    /* Hover must remain visibly grey instead of disappearing into
       the white page background. */
    .p-detail-tabs-wrapper .p-detail-tabs > .shp-tab:not(.active) > .shp-tab-link:hover,
    .p-detail-tabs-wrapper .hidden-links > li:not(.active) > a:hover {
        background: #dddddd !important;
        border-color: #d3d3d3 !important;
        color: #111111 !important;
        box-shadow: none !important;
    }

    /* Active tab: white, but still visibly separated from the page. */
    .p-detail-tabs-wrapper .p-detail-tabs > .shp-tab.active > .shp-tab-link,
    .p-detail-tabs-wrapper .hidden-links > li.active > a,
    .p-detail-tabs-wrapper .hidden-links > li > a.active {
        background: #ffffff !important;
        border-color: #e2e2e2 !important;
        color: #111111 !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10) !important;
    }
}

/* ==========================================================
   HOCKEYLAND – PRODUCT DETAIL TABS / CLEAN ACTIVE PILL
   Remove the residual shadow from selected product-detail tabs.
   ========================================================== */

@media (max-width: 767px) {
    .p-detail-tabs-wrapper .p-detail-tabs > .shp-tab.active > .shp-tab-link,
    .p-detail-tabs-wrapper .hidden-links > li.active > a,
    .p-detail-tabs-wrapper .hidden-links > li > a.active {
        box-shadow: none !important;
    }
}

/* ==========================================================
   HOCKEYLAND – PRODUCT DETAIL TABS / DESKTOP ALIGNMENT
   Left-align the pill tabs and remove the horizontal divider.
   ========================================================== */

@media (min-width: 768px) {
    .p-detail-tabs-wrapper .shp-tabs-row.responsive-nav,
    .p-detail-tabs-wrapper .shp-tabs-holder {
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .p-detail-tabs-wrapper .shp-tabs-holder {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}

/* Remove the divider below product-detail tabs on all screen sizes. */
.p-detail-tabs-wrapper .shp-tabs-row.responsive-nav,
.p-detail-tabs-wrapper .shp-tabs-holder,
.p-detail-tabs-wrapper #p-detail-tabs {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.p-detail-tabs-wrapper .shp-tabs-row.responsive-nav::before,
.p-detail-tabs-wrapper .shp-tabs-row.responsive-nav::after,
.p-detail-tabs-wrapper .shp-tabs-holder::before,
.p-detail-tabs-wrapper .shp-tabs-holder::after,
.p-detail-tabs-wrapper #p-detail-tabs::before,
.p-detail-tabs-wrapper #p-detail-tabs::after {
    border-bottom: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================
   HOCKEYLAND – PRODUCT RATING FORM / ROUNDED FIELDS
   Name, e-mail and comment fields only.
   ========================================================== */

#formRating input#ratingName.form-control,
#formRating input#ratingEmail.form-control,
#formRating textarea.form-control {
    border-radius: 12px !important;
}

/* ==========================================================
   HOCKEYLAND – PRODUCT DETAIL TABS / ACTIVE PILL CONTRAST
   Give the active tab a subtle neutral fill so it does not
   disappear into the white page background.
   ========================================================== */

.p-detail-tabs-wrapper #p-detail-tabs > .shp-tab.active > .shp-tab-link,
.p-detail-tabs-wrapper .hidden-links > li.active > a,
.p-detail-tabs-wrapper .hidden-links > li > a.active {
    background: #dddddd !important;
    color: #111111 !important;
    box-shadow: none !important;
}

/* ==========================================================
   HOCKEYLAND – PRODUCT DETAIL TABS / FINAL CONTRAST + ALIGNMENT
   Active = brand orange, hover stays visibly grey.
   Align the tab group with the product content column.
   ========================================================== */

/* Active pill: unmistakable active state, including hover/focus. */
.p-detail-tabs-wrapper #p-detail-tabs > .shp-tab.active > .shp-tab-link,
.p-detail-tabs-wrapper #p-detail-tabs > .shp-tab.active > .shp-tab-link:hover,
.p-detail-tabs-wrapper #p-detail-tabs > .shp-tab.active > .shp-tab-link:focus,
.p-detail-tabs-wrapper .hidden-links > li.active > a,
.p-detail-tabs-wrapper .hidden-links > li.active > a:hover,
.p-detail-tabs-wrapper .hidden-links > li.active > a:focus,
.p-detail-tabs-wrapper .hidden-links > li > a.active,
.p-detail-tabs-wrapper .hidden-links > li > a.active:hover,
.p-detail-tabs-wrapper .hidden-links > li > a.active:focus {
    background: #f19210 !important;
    border-color: #f19210 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Inactive hover must never turn white. */
.p-detail-tabs-wrapper #p-detail-tabs > .shp-tab:not(.active) > .shp-tab-link:hover,
.p-detail-tabs-wrapper #p-detail-tabs > .shp-tab:not(.active) > .shp-tab-link:focus,
.p-detail-tabs-wrapper .hidden-links > li:not(.active) > a:hover,
.p-detail-tabs-wrapper .hidden-links > li:not(.active) > a:focus {
    background: #d9d9d9 !important;
    border-color: #d9d9d9 !important;
    color: #111111 !important;
    box-shadow: none !important;
}

/* Desktop: line the pills up with the product description/images column. */
@media (min-width: 768px) {
    .p-detail-tabs-wrapper > .row > .shp-tabs-row.responsive-nav {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .p-detail-tabs-wrapper .shp-tabs-holder {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}


/* HOCKEYLAND – PRODUCT DETAIL TABS / DESKTOP POSITION TUNING */
@media (min-width: 768px) {
    .p-detail-tabs-wrapper > .row > .shp-tabs-row.responsive-nav {
        padding-left: 50px !important;
    }
}

/* ==========================================================
   HOCKEYLAND – PRODUCT DETAIL TABS / DESKTOP POSITION TWEAK
   Compromise between v.171 (30px) and v.172 (50px).
   ========================================================== */

@media (min-width: 768px) {
    .p-detail-tabs-wrapper > .row > .shp-tabs-row.responsive-nav {
        padding-left: 40px !important;
        padding-right: 30px !important;
    }
}

/* ==========================================================
   HOCKEYLAND – PRODUCT DETAIL TABS / VERTICAL SPACING
   Add breathing room above and below the entire tab row.
   ========================================================== */

.p-detail-tabs-wrapper {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}

/* ==========================================================
   HOCKEYLAND – PRODUCT DETAIL TABS / REAL BOTTOM SPACING
   The following Shoptet content flow collapses/ignores the
   wrapper's bottom margin, so create the space as padding.
   ========================================================== */

.p-detail-tabs-wrapper {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
    padding-bottom: 24px !important;
}

/* ==========================================================
   HOCKEYLAND – PRODUCT DETAIL TABS / SPACE BEFORE TAB CONTENT
   The tab content is a sibling column inside the same .row,
   so spacing must be applied to that column itself.
   ========================================================== */

.p-detail-tabs-wrapper > .row > .shp-tabs-row.responsive-nav + .col-sm-12 {
    padding-top: 24px !important;
}

/* ==========================================================
   HOCKEYLAND – PRODUCT DETAIL TABS / MOBILE HORIZONTAL OFFSET
   Move both mobile tab rows slightly to the right.
   ========================================================== */

@media (max-width: 767px) {
    .p-detail-tabs-wrapper .shp-tabs-holder,
    .p-detail-tabs-wrapper .hidden-links {
        padding-left: 16px !important;
    }
}

/* ==========================================================
   HOCKEYLAND – PRODUCT DETAIL TABS / MOBILE OFFSET TWEAK
   Reduce the mobile shift from 16px to 10px.
   ========================================================== */

@media (max-width: 767px) {
    .p-detail-tabs-wrapper .shp-tabs-holder,
    .p-detail-tabs-wrapper .hidden-links {
        padding-left: 10px !important;
    }
}

/* ==========================================================
   HOCKEYLAND – CATEGORY SORTING / ACTIVE STATE
   Match product-detail tabs:
   active = brand orange + white text,
   inactive hover = darker neutral grey, never white.
   ========================================================== */

#category-header .listSorting__control--current,
#category-header .listSorting__control--current:hover,
#category-header .listSorting__control--current:focus {
    background: #f19210 !important;
    border-color: #f19210 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

#category-header .listSorting__control:not(.listSorting__control--current):hover,
#category-header .listSorting__control:not(.listSorting__control--current):focus {
    background: #d9d9d9 !important;
    border-color: #d9d9d9 !important;
    color: #111111 !important;
    box-shadow: none !important;
}

/* ==========================================================
   HOCKEYLAND – PRODUCT VARIANT SELECTS / ROUNDED CORNERS
   Size, colour and other variant dropdowns on product detail.
   ========================================================== */

.p-variants-block table.detail-parameters select.form-control {
    border-radius: 12px !important;
}

/* ==========================================================
   HOCKEYLAND – PRODUCT VARIANTS / CLEAN MOBILE STACK
   Clean replacement for the experimental spacing rules from
   v.181–v.188. Each variant is simply:
   label -> 6px -> select -> 12px -> next label.
   ========================================================== */

@media (max-width: 767px) {
    .p-variants-block table.detail-parameters,
    .p-variants-block table.detail-parameters > tbody {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-spacing: 0 !important;
    }

    .p-variants-block table.detail-parameters tr.variant-list {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        border: 0 !important;
    }

    .p-variants-block table.detail-parameters tr.variant-list:last-of-type {
        margin-bottom: 0 !important;
    }

    .p-variants-block table.detail-parameters tr.variant-list > th,
    .p-variants-block table.detail-parameters tr.variant-list > td {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .p-variants-block table.detail-parameters tr.variant-list > th {
        margin-bottom: 6px !important;
    }

    .p-variants-block table.detail-parameters tr.variant-list > th > label {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .p-variants-block table.detail-parameters tr.variant-list > td > select.form-control {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ==========================================================
   HOCKEYLAND – PRODUCT VARIANTS / MOBILE GROUP SPACING
   Generic spacing between variant groups, independent of
   parameter name (size, colour, etc.).
   ========================================================== */

@media (max-width: 767px) {
    .p-variants-block table.detail-parameters tr.variant-list {
        margin-bottom: 20px !important;
    }

    .p-variants-block table.detail-parameters tr.variant-list:last-of-type {
        margin-bottom: 0 !important;
    }
}

/* ==========================================================
   HOCKEYLAND – PRODUCT VARIANTS / DESKTOP GROUP SPACING
   Add the same visual separation between consecutive variant
   groups on desktop, independent of parameter name.
   ========================================================== */

@media (min-width: 768px) {
    .p-variants-block table.detail-parameters tr.variant-list + tr.variant-list > th,
    .p-variants-block table.detail-parameters tr.variant-list + tr.variant-list > td {
        padding-top: 20px !important;
    }
}

/* ==========================================================
   HOCKEYLAND – PRODUCT VARIANTS / DESKTOP VERTICAL ALIGNMENT
   Vertically center the parameter label with its select.
   ========================================================== */

@media (min-width: 768px) {
    .p-variants-block table.detail-parameters tr.variant-list > th,
    .p-variants-block table.detail-parameters tr.variant-list > td {
        vertical-align: middle !important;
    }

    .p-variants-block table.detail-parameters tr.variant-list > th > label {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }
}

/* ==========================================================
   HOCKEYLAND – PRODUCT VARIANTS / DESKTOP TRUE CENTERING
   Shoptet's table cells are 48px high, but the label itself
   remains top-aligned inside TH. Center the label via flex.
   ========================================================== */

@media (min-width: 768px) {
    .p-variants-block table.detail-parameters tr.variant-list > th {
        height: 48px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        vertical-align: middle !important;
    }

    .p-variants-block table.detail-parameters tr.variant-list > th > label {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }
}

/* ==========================================================
   HOCKEYLAND – MOBILE HAMBURGER MENU / SECTION SEPARATION
   Visually separate Shoptet's original menu items from the
   appended category tree without targeting a specific category.
   ========================================================== */

@media (max-width: 991px) {
    #navigation .menu-level-1 > li:not(.appended-category) + li.appended-category {
        margin-top: 14px !important;
        padding-top: 14px !important;
        border-top: 1px solid #e2e2e2 !important;
    }
}

/* ==========================================================
   HOCKEYLAND – MOBILE HAMBURGER MENU / STRONGER SEPARATION
   Make the transition from utility menu items to appended
   product categories visually unmistakable.
   ========================================================== */

@media (max-width: 991px) {
    #navigation .menu-level-1 > li:not(.appended-category) + li.appended-category {
        margin-top: 18px !important;
        padding-top: 20px !important;
        border-top: 2px solid #d2d2d2 !important;
    }

    /* Login is visually moved into the upper utility section.
       The DOM stays untouched; only mobile presentation changes. */
    #navigation .navigation-in.menu {
        display: flex !important;
        flex-direction: column !important;
    }

    #navigation .navigation-in.menu > .menu-level-1 {
        order: 1 !important;
    }

    #navigation .navigation-in.menu > .navigationActions {
        order: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #navigation .navigation-in.menu > .navigationActions > li {
        margin: 0 !important;
        padding: 0 !important;
    }

    #navigation .navigation-in.menu > .navigationActions > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: 41px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 24px !important;
        font-weight: 700 !important;
        color: #111111 !important;
        background: transparent !important;
        text-decoration: none !important;
    }

    #navigation .navigation-in.menu > .navigationActions > li > a:hover,
    #navigation .navigation-in.menu > .navigationActions > li > a:focus {
        background: #eeeeee !important;
        color: #111111 !important;
    }
}

/* ==========================================================
   HOCKEYLAND – MOBILE HAMBURGER / LOGIN VISUAL MATCH
   navigationActions has its own Shoptet styles. Make the login
   row visually identical to the regular upper menu items.
   ========================================================== */

@media (max-width: 991px) {
    #navigation .navigation-in.menu > .navigationActions,
    #navigation .navigation-in.menu > .navigationActions > li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"] {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 41px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #111111 !important;
        text-decoration: none !important;
    }

    #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"] > span {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        font: inherit !important;
        font-weight: 700 !important;
        line-height: inherit !important;
    }

    #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"]:hover,
    #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"]:focus,
    #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"]:active {
        background: transparent !important;
        box-shadow: none !important;
        color: #111111 !important;
    }
}

/* ==========================================================
   HOCKEYLAND – MOBILE HAMBURGER / CLEAN INFORMATION HIERARCHY
   Account action -> compact utility links -> divider -> shop
   categories. This overrides the experimental v.194–v.196
   presentation without changing the DOM.
   ========================================================== */

@media (max-width: 991px) {
    /* Overall mobile menu rhythm */
    #navigation .navigation-in.menu {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Account action: intentional standalone pill */
    #navigation .navigation-in.menu > .navigationActions {
        order: 0 !important;
        width: auto !important;
        margin: 14px 24px 10px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #navigation .navigation-in.menu > .navigationActions > li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"] {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border: 1px solid #dddddd !important;
        border-radius: 9999px !important;
        background: #eeeeee !important;
        box-shadow: none !important;
        color: #111111 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"]::before {
        content: "" !important;
        display: block !important;
        flex: 0 0 18px !important;
        width: 18px !important;
        height: 18px !important;
        background: currentColor !important;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5C21 16.5 17 14 12 14Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5C21 16.5 17 14 12 14Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    }

    #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"] > span {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        font: inherit !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"]:hover,
    #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"]:focus {
        background: #dddddd !important;
        border-color: #d2d2d2 !important;
        color: #111111 !important;
    }

    /* Main list follows account action */
    #navigation .navigation-in.menu > .menu-level-1 {
        order: 1 !important;
        width: 100% !important;
    }

    /* Utility links before appended categories: compact, aligned */
    #navigation .menu-level-1 > li:not(.appended-category) {
        margin: 0 !important;
        padding: 0 !important;
    }

    #navigation .menu-level-1 > li:not(.appended-category) > a {
        display: flex !important;
        align-items: center !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Strong but clean boundary between utility and shop navigation */
    #navigation .menu-level-1 > li:not(.appended-category) + li.appended-category {
        position: relative !important;
        margin-top: 18px !important;
        padding-top: 18px !important;
        border-top: 0 !important;
    }

    #navigation .menu-level-1 > li:not(.appended-category) + li.appended-category::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 24px !important;
        right: 24px !important;
        height: 1px !important;
        background: #d7d7d7 !important;
    }

    /* Top-level shop categories stay visually dominant */
    #navigation .menu-level-1 > li.appended-category > a {
        font-weight: 700 !important;
    }

    /* Subcategories remain clearly subordinate */
    #navigation .menu-level-2.menu-level-2-appended > li > a {
        font-weight: 400 !important;
    }
}

/* ==========================================================
   HOCKEYLAND – MOBILE HAMBURGER / TOP AIR + ACCOUNT ICON
   Give the close button its own clear zone and reuse exactly
   the same outline account icon as the desktop header.
   ========================================================== */

@media (max-width: 991px) {
    /* Reserve a clean top zone for the close button. */
    #navigation .navigation-in.menu > .navigationActions {
        margin: 72px 24px 14px !important;
    }

    /* Reuse the desktop account icon artwork. */
    #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"]::before {
        content: "" !important;
        display: block !important;
        position: static !important;
        flex: 0 0 28px !important;
        width: 28px !important;
        height: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: currentColor !important;
        transform: none !important;
        pointer-events: none !important;

        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2210%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M7%2027c.7-5.5%204.1-8.5%209-8.5s8.3%203%209%208.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") !important;
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2210%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M7%2027c.7-5.5%204.1-8.5%209-8.5s8.3%203%209%208.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") !important;
        -webkit-mask-position: center !important;
        mask-position: center !important;
        -webkit-mask-size: 28px 28px !important;
        mask-size: 28px 28px !important;
        -webkit-mask-repeat: no-repeat !important;
        mask-repeat: no-repeat !important;
    }
}

/* ==========================================================
   HOCKEYLAND – MOBILE HAMBURGER / LOGIN PILL LEFT ALIGNMENT
   Move the account pill closer to the left edge while keeping
   the right-side breathing room and top spacing unchanged.
   ========================================================== */

@media (max-width: 991px) {
    #navigation .navigation-in.menu > .navigationActions {
        margin: 72px 24px 14px 12px !important;
    }
}

/* ==========================================================
   HOCKEYLAND – MOBILE HAMBURGER / LOGIN PILL ALIGNMENT
   Align the pill's left edge with the upper utility menu text.
   ========================================================== */

@media (max-width: 991px) {
    #navigation .navigation-in.menu > .navigationActions {
        margin: 72px 24px 14px 24px !important;
    }
}

/* ==========================================================
   HOCKEYLAND – MOBILE HAMBURGER / LOGIN PILL FINE ALIGNMENT
   Fine-tune between v.199 (12px, too far left) and
   v.200 (24px, not far enough left).
   ========================================================== */

@media (max-width: 991px) {
    #navigation .navigation-in.menu > .navigationActions {
        margin: 72px 24px 14px 20px !important;
    }
}

/* ==========================================================
   HOCKEYLAND – LOGIN PAGE POLISH
   Rounded credentials, lighter submit button and cleaner
   secondary account actions.
   ========================================================== */

#formLogin.login-form #loginEmail,
#formLogin.login-form #loginPassword {
    border-radius: 12px !important;
}

/* Login CTA – keep the pill language, but make it less bulky. */
#formLogin.login-form .submit-wrapper .btn.btn-primary {
    min-height: 0 !important;
    height: auto !important;
    padding: 11px 22px !important;
    line-height: 1.25 !important;
    font-size: 14px !important;
}

/* Secondary actions – compact, quiet pair of pills instead of loose links. */
#formLogin.login-form .alternative-links {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 10px 0 18px !important;
}

#formLogin.login-form .alternative-links > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    border: 1px solid #dddddd !important;
    border-radius: 9999px !important;
    background: #f5f5f5 !important;
    color: #333333 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease !important;
}

#formLogin.login-form .alternative-links > a:hover {
    background: #eeeeee !important;
    border-color: #d2d2d2 !important;
    color: #111111 !important;
    text-decoration: none !important;
}

@media (max-width: 767px) {
    #formLogin.login-form .alternative-links {
        gap: 7px !important;
    }

    #formLogin.login-form .alternative-links > a {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ==========================================================
   HOCKEYLAND – LOGIN PAGE / SECONDARY ACTION ALIGNMENT
   Keep both secondary pills anchored to the left.
   ========================================================== */

#formLogin.login-form .alternative-links {
    justify-content: flex-start !important;
    text-align: left !important;
}

#formLogin.login-form .alternative-links > a {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==========================================================
   HOCKEYLAND – LOGIN PAGE / SECONDARY ACTION TRUE LEFT ALIGN
   The parent is vertically stacked by the template, so
   align-items controls the horizontal position of its pills.
   ========================================================== */

#formLogin.login-form p.alternative-links {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

#formLogin.login-form p.alternative-links > a {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==========================================================
   HOCKEYLAND – LOGIN PAGE / DESKTOP + MOBILE SECONDARY LINKS
   Force the registration/password actions into a vertical,
   left-aligned stack on every viewport size.
   ========================================================== */

#formLogin.login-form p.alternative-links {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    text-align: left !important;
}

#formLogin.login-form p.alternative-links > a {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==========================================================
   HOCKEYLAND – EMPTY CART SEARCH / MATCH MAIN SEARCH BAR
   The empty-cart form has a different ID (#formSearchFormContent),
   so mirror the same finished pill treatment used by the main search.
   ========================================================== */

#formSearchFormContent.search-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 9999px !important;
}

#formSearchFormContent.search-form fieldset {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
}

#formSearchFormContent.search-form input[data-testid="searchInput"],
#formSearchFormContent.search-form .query-input,
#formSearchFormContent.search-form .search-input {
    display: block !important;
    width: 100% !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 76px 0 28px !important;
    border-radius: 9999px !important;
    box-sizing: border-box !important;
}

#formSearchFormContent.search-form button[data-testid="searchBtn"],
#formSearchFormContent.search-form .btn-arrow-right {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    min-width: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f19210 !important;
    color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    z-index: 2 !important;
}

#formSearchFormContent.search-form button[data-testid="searchBtn"]:hover,
#formSearchFormContent.search-form .btn-arrow-right:hover {
    background: #ffaf41 !important;
}

#formSearchFormContent.search-form button[data-testid="searchBtn"]::before,
#formSearchFormContent.search-form .btn-arrow-right::before {
    content: none !important;
    display: none !important;
}

#formSearchFormContent.search-form button[data-testid="searchBtn"]::after,
#formSearchFormContent.search-form .btn-arrow-right::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    width: 23px !important;
    height: 23px !important;
    background: center / 23px 23px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.5' fill='none' stroke-linecap='butt' stroke-linejoin='miter'><path d='M5 12 H19'></path><path d='M12 5 L19 12 L12 19'></path></svg>") !important;
    transform: translate(-50%, -50%) !important;
}

/* ==========================================================
   HOCKEYLAND – EMPTY CART SEARCH / EXACT MAIN SEARCH GEOMETRY
   Match the established header-search form: outlined pill,
   white field and orange rounded right action segment.
   ========================================================== */

#formSearchFormContent.search-form.compact-form {
    width: 100% !important;
    max-width: 100% !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #999999 !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#formSearchFormContent.search-form.compact-form fieldset {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    overflow: hidden !important;
}

#formSearchFormContent.search-form.compact-form input[data-testid="searchInput"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 28px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

#formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"] {
    position: static !important;
    flex: 0 0 74px !important;
    width: 74px !important;
    min-width: 74px !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 9999px 9999px 0 !important;
    background: #f19210 !important;
    color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

#formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]:hover {
    background: #f19210 !important;
}

#formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]::before {
    content: none !important;
    display: none !important;
}

#formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background: center / 24px 24px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.5' fill='none' stroke-linecap='butt' stroke-linejoin='miter'><path d='M5 12 H19'></path><path d='M12 5 L19 12 L12 19'></path></svg>") !important;
    transform: translate(-50%, -50%) !important;
}

/* ==========================================================
   HOCKEYLAND – EMPTY CART SEARCH / WHITE MAGNIFIER ACTION
   The button itself is the orange circular end-cap and the
   magnifier is drawn directly with CSS so it cannot disappear.
   ========================================================== */

#formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"] {
    position: relative !important;
    flex: 0 0 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    height: 60px !important;
    min-height: 60px !important;
    align-self: center !important;
    margin: -1px -1px -1px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f19210 !important;
    color: transparent !important;
    overflow: visible !important;
    box-shadow: none !important;
}

#formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    border: 3px solid #ffffff !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-sizing: border-box !important;
    transform: translate(-58%, -58%) !important;
}

#formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    width: 10px !important;
    height: 3px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    background-image: none !important;
    transform: translate(3px, 5px) rotate(45deg) !important;
    transform-origin: left center !important;
}

/* ==========================================================
   HOCKEYLAND – EMPTY CART SEARCH / REFERENCE DESIGN
   White pill field + outlined shell + inset orange search circle.
   ========================================================== */

#formSearchFormContent.search-form.compact-form {
    height: 60px !important;
}

#formSearchFormContent.search-form.compact-form fieldset {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #9b9b9b !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#formSearchFormContent.search-form.compact-form input[data-testid="searchInput"] {
    flex: 1 1 auto !important;
    width: auto !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 90px 0 24px !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    outline: 0 !important;
}

#formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"] {
    position: absolute !important;
    top: 50% !important;
    right: 7px !important;
    flex: none !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f19210 !important;
    color: transparent !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
    overflow: visible !important;
}

#formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-sizing: border-box !important;
    transform: translate(-62%, -62%) !important;
}

#formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    width: 9px !important;
    height: 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    background-image: none !important;
    transform: translate(2px, 5px) rotate(45deg) !important;
    transform-origin: left center !important;
}

/* ==========================================================
   HOCKEYLAND – EMPTY CART SEARCH / BRAND PALETTE
   Keep v.209 geometry, use Hockeyland's existing visual language.
   ========================================================== */

#formSearchFormContent.search-form.compact-form fieldset {
    border-color: #b7b7b7 !important;
    background: #ffffff !important;
}

#formSearchFormContent.search-form.compact-form input[data-testid="searchInput"] {
    background: #ffffff !important;
    color: #222222 !important;
}

#formSearchFormContent.search-form.compact-form input[data-testid="searchInput"]::placeholder {
    color: #8a8a8a !important;
    opacity: 1 !important;
}

#formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"] {
    background: #f19210 !important;
}

#formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]::before {
    border-color: #ffffff !important;
}

#formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]::after {
    background: #ffffff !important;
}

/* ==========================================================
   HOCKEYLAND – EMPTY CART SEARCH / CLEAN SINGLE OUTLINE + ICON
   One outline only. Search icon uses an inline SVG mask for
   cleaner geometry instead of hand-drawn pseudo-elements.
   ========================================================== */

#formSearchFormContent.search-form.compact-form {
    height: 60px !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}

#formSearchFormContent.search-form.compact-form fieldset {
    position: relative !important;
    width: 100% !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #b7b7b7 !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#formSearchFormContent.search-form.compact-form input[data-testid="searchInput"] {
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 76px 0 24px !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

#formSearchFormContent.search-form.compact-form input[data-testid="searchInput"]:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

#formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"] {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f19210 !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    transform: translateY(-50%) !important;
    overflow: hidden !important;
}

#formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    transform: translate(-50%, -50%) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m21 21-4.35-4.35m2.35-5.65a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m21 21-4.35-4.35m2.35-5.65a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================
   HOCKEYLAND – MAIN SEARCH OVERLAY / SAME SEARCH BAR AS CART
   Applies the v.211 white pill + inset orange magnifier design
   to the search opened from the header magnifier.
   ========================================================== */

.content-window.search-window #formSearchForm.search-form.compact-form,
.search-window-in #formSearchForm.search-form.compact-form {
    height: 60px !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.content-window.search-window #formSearchForm.search-form.compact-form fieldset,
.search-window-in #formSearchForm.search-form.compact-form fieldset {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #b7b7b7 !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.content-window.search-window #formSearchForm.search-form.compact-form input[data-testid="searchInput"],
.search-window-in #formSearchForm.search-form.compact-form input[data-testid="searchInput"] {
    flex: 1 1 auto !important;
    width: auto !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 76px 0 24px !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: transparent !important;
    background-image: none !important;
    color: #222222 !important;
    box-shadow: none !important;
    outline: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.content-window.search-window #formSearchForm.search-form.compact-form input[data-testid="searchInput"]::placeholder,
.search-window-in #formSearchForm.search-form.compact-form input[data-testid="searchInput"]::placeholder {
    color: #8a8a8a !important;
    opacity: 1 !important;
}

.content-window.search-window #formSearchForm.search-form.compact-form input[data-testid="searchInput"]:focus,
.search-window-in #formSearchForm.search-form.compact-form input[data-testid="searchInput"]:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.content-window.search-window #formSearchForm.search-form.compact-form button[data-testid="searchBtn"],
.search-window-in #formSearchForm.search-form.compact-form button[data-testid="searchBtn"] {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    flex: none !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f19210 !important;
    background-image: none !important;
    color: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    transform: translateY(-50%) !important;
    overflow: hidden !important;
}

.content-window.search-window #formSearchForm.search-form.compact-form button[data-testid="searchBtn"]::before,
.search-window-in #formSearchForm.search-form.compact-form button[data-testid="searchBtn"]::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    transform: translate(-50%, -50%) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m21 21-4.35-4.35m2.35-5.65a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m21 21-4.35-4.35m2.35-5.65a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.content-window.search-window #formSearchForm.search-form.compact-form button[data-testid="searchBtn"]::after,
.search-window-in #formSearchForm.search-form.compact-form button[data-testid="searchBtn"]::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================
   HOCKEYLAND – SEARCH BUTTON HOVER
   Lighter brand orange on hover.
   ========================================================== */

#formSearchForm.search-form.compact-form button[data-testid="searchBtn"]:hover,
#formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]:hover {
    background: #ffaf41 !important;
}

/* ==========================================================
   HOCKEYLAND – SEARCH BUTTON HOVER / BOTH SEARCH BARS
   Empty-cart search + header search overlay.
   ========================================================== */

#formSearchFormContent button[data-testid="searchBtn"]:hover,
#formSearchForm button[data-testid="searchBtn"]:hover {
    background-color: #ffaf41 !important;
}

/* ==========================================================
   HOCKEYLAND – HEADER SEARCH / EXACT SEARCH BUTTON HOVER
   Exact Shoptet element shown in DevTools:
   button.btn.btn-default.btn-arrow-right.btn-lg[data-testid="searchBtn"]
   ========================================================== */

.content-window.search-window
    #formSearchForm
    button.btn.btn-default.btn-arrow-right.btn-lg[data-testid="searchBtn"]:hover,
.content-window-in.search-window-in
    #formSearchForm
    button.btn.btn-default.btn-arrow-right.btn-lg[data-testid="searchBtn"]:hover,
#formSearchForm.search-form.compact-form.js-search-main
    button.btn.btn-default.btn-arrow-right.btn-lg[data-testid="searchBtn"]:hover {
    background: #ffaf41 !important;
    background-color: #ffaf41 !important;
}

/* ==========================================================
   HOCKEYLAND – SCROLL TO TOP / HOVER MICRO-ANIMATION
   Preserve the existing show/hide transform and add a subtle
   lift + arrow movement on hover.
   ========================================================== */

#scrollTopBtn {
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease,
        bottom 0.28s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease !important;
}

#scrollTopBtn.visible:hover {
    background: #ffaf41 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14) !important;
}

#scrollTopBtn svg {
    transition: transform 0.18s ease !important;
}

#scrollTopBtn.visible:hover svg {
    transform: translateY(-2px) !important;
}

@media (prefers-reduced-motion: reduce) {
    #scrollTopBtn,
    #scrollTopBtn svg {
        transition: none !important;
    }

    #scrollTopBtn.visible:hover,
    #scrollTopBtn.visible:hover svg {
        transform: none !important;
    }
}

/* ==========================================================
   HOCKEYLAND – SCROLL TO TOP / COLOR-ONLY HOVER TRANSITION
   No movement, no hover lift, no added shadow.
   ========================================================== */

#scrollTopBtn {
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease,
        bottom 0.28s ease,
        background-color 0.22s ease !important;
}

#scrollTopBtn.visible:hover {
    background: #ffaf41 !important;
    transform: none !important;
    box-shadow: none !important;
}

#scrollTopBtn svg,
#scrollTopBtn.visible:hover svg {
    transform: none !important;
    transition: none !important;
}

/* ==========================================================
   HOCKEYLAND – LOGIN MODAL / ROUNDED EMAIL + PASSWORD
   The modal uses formLoginIncluded with different input IDs
   than the standalone login page.
   ========================================================== */

#formLoginIncluded .form-control-wrapper,
#formLoginIncluded input#loginWidgetEmail.form-control,
#formLoginIncluded input#loginWidgetPassword.form-control {
    border-radius: 12px !important;
}

#formLoginIncluded .form-control-wrapper {
    overflow: hidden !important;
}

/* ==========================================================
   HOCKEYLAND – LOGIN MODAL / MATCH STANDALONE LOGIN LINKS
   formLoginIncluded is a separate Shoptet login form, so the
   alternative links need the same styling explicitly.
   ========================================================== */

#formLoginIncluded p.alternative-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 12px 0 16px !important;
    padding: 0 !important;
    text-align: left !important;
}

#formLoginIncluded p.alternative-links > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 13px !important;
    border: 1px solid #dddddd !important;
    border-radius: 9999px !important;
    background: #eeeeee !important;
    color: #555555 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease !important;
}

#formLoginIncluded p.alternative-links > a:hover {
    background: #dddddd !important;
    border-color: #d3d3d3 !important;
    color: #111111 !important;
    text-decoration: none !important;
}


/* ==========================================================
   HOCKEYLAND – MODERN MINIMAL CART ICON
   Unified cart symbol in the header and empty-cart heading.
   ========================================================== */

/* Header cart intentionally unchanged. */
/* Empty cart heading – suppress Shoptet's old icon-font basket and
   use the exact same visual language as the header icon. */
.cart-heading.h1::before,
.cart-heading::before {
    content: "" !important;
    width: 30px !important;
    height: 30px !important;
    margin-right: 11px !important;
    background-color: currentColor !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: translateY(-1px) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M4.5%206h2.2c.9%200%201.7.6%201.9%201.5l1.8%209.2c.2%201.1%201.2%201.9%202.3%201.9h9c1%200%201.9-.7%202.2-1.7l2.4-7.2c.3-1-.4-2-1.5-2H9%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2224.5%22%20r%3D%221.5%22%20fill%3D%22black%22/%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2224.5%22%20r%3D%221.5%22%20fill%3D%22black%22/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M4.5%206h2.2c.9%200%201.7.6%201.9%201.5l1.8%209.2c.2%201.1%201.2%201.9%202.3%201.9h9c1%200%201.9-.7%202.2-1.7l2.4-7.2c.3-1-.4-2-1.5-2H9%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2224.5%22%20r%3D%221.5%22%20fill%3D%22black%22/%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2224.5%22%20r%3D%221.5%22%20fill%3D%22black%22/%3E%3C/svg%3E") !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: 30px 30px !important;
    mask-size: 30px 30px !important;
}

@media (max-width: 767px) {
    .cart-heading.h1::before,
    .cart-heading::before {
        width: 26px !important;
        height: 26px !important;
        margin-right: 9px !important;
        transform: translateY(-1px) !important;
        -webkit-mask-size: 26px 26px !important;
        mask-size: 26px 26px !important;
    }
}

/* ==========================================================
   HOCKEYLAND – EMPTY CART / HIDE CATEGORY SUGGESTION LIST
   Remove the category recommendation block on all viewports.
   ========================================================== */

#cart-widget .cart-empty .empty-cart-boxes > .col-md-6:first-child {
    display: none !important;
}

/* ==========================================================
   HOCKEYLAND – EMPTY CART SEARCH / VERTICAL SPACING
   Add breathing room above and below the search block.
   ========================================================== */

#cart-widget .cart-empty .empty-cart-boxes > .col-md-6:last-child {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}

@media (max-width: 767px) {
    #cart-widget .cart-empty .empty-cart-boxes > .col-md-6:last-child {
        margin-top: 22px !important;
        margin-bottom: 22px !important;
    }
}

/* ==========================================================
   HOCKEYLAND – EMPTY CART SEARCH / LARGER VERTICAL SPACING
   Slightly increase breathing room above and below search.
   ========================================================== */

#cart-widget .cart-empty .empty-cart-boxes > .col-md-6:last-child {
    margin-top: 36px !important;
    margin-bottom: 36px !important;
}

@media (max-width: 767px) {
    #cart-widget .cart-empty .empty-cart-boxes > .col-md-6:last-child {
        margin-top: 32px !important;
        margin-bottom: 32px !important;
    }
}

/* ==========================================================
   HOCKEYLAND – MOBILE SEARCH BARS / CONTAIN TO CONTENT WIDTH
   Keep both compact search bars inside their mobile content
   column and prevent flex/input intrinsic width overflow.
   ========================================================== */

@media (max-width: 767px) {
    #formSearchFormContent.search-form.compact-form,
    .content-window.search-window #formSearchForm.search-form.compact-form,
    .search-window-in #formSearchForm.search-form.compact-form {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    #formSearchFormContent.search-form.compact-form fieldset,
    .content-window.search-window #formSearchForm.search-form.compact-form fieldset,
    .search-window-in #formSearchForm.search-form.compact-form fieldset {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #formSearchFormContent.search-form.compact-form input[data-testid="searchInput"],
    .content-window.search-window #formSearchForm.search-form.compact-form input[data-testid="searchInput"],
    .search-window-in #formSearchForm.search-form.compact-form input[data-testid="searchInput"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #cart-widget .cart-empty .empty-cart-boxes > .col-md-6:last-child,
    #cart-widget .cart-empty .empty-cart-boxes > .col-md-6:last-child .search {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================
   HOCKEYLAND – EMPTY CART HELP / ALIGN BELOW SEARCH
   Align the help/contact column with the search block and add
   a little space between its heading and contact details.
   ========================================================== */

#cart-widget .cart-empty .cart-row > .col-xl-offset-1.col-xl-4 {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

#cart-widget .cart-empty .cart-row > .col-xl-offset-1.col-xl-4 > .cart-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#cart-widget .cart-empty .cart-row > .col-xl-offset-1.col-xl-4 > .cart-content > h2 {
    margin-bottom: 18px !important;
}

#cart-widget .cart-empty .cart-row > .col-xl-offset-1.col-xl-4 .contact-box {
    margin-top: 0 !important;
}

/* ==========================================================
   HOCKEYLAND – EMPTY CART HELP / PLACE DIRECTLY BELOW SEARCH
   Match the desktop width/start of the left search column and
   force the help block onto the next row instead of beside it.
   ========================================================== */

@media (min-width: 1200px) {
    #cart-widget .cart-empty .cart-row > .col-xl-offset-1.col-xl-4 {
        float: left !important;
        clear: both !important;
        width: 58.33333333% !important;
        max-width: 58.33333333% !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 1199px) {
    #cart-widget .cart-empty .cart-row > .col-xl-offset-1.col-xl-4 {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

/* ==========================================================
   HOCKEYLAND – EMPTY CART / MORE SPACE BELOW SEARCH
   Increase only the vertical gap between the search block and
   the help/contact block below it.
   ========================================================== */

#cart-widget .cart-empty .cart-row > .col-xl-offset-1.col-xl-4 {
    margin-top: 34px !important;
}

@media (max-width: 767px) {
    #cart-widget .cart-empty .cart-row > .col-xl-offset-1.col-xl-4 {
        margin-top: 30px !important;
    }
}