/* ================================
   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;
}

#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
================================ */

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

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

    border: 0 !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;
    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;

    z-index: 20 !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
================================ */

.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 > 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 {
    list-style: 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;
    }
}