/* SAUNYONLINE_COMMERCE_EXPERIENCE_V2
 * Premium navy / ice-blue hierarchy with green reserved for forward actions.
 */

:root {
    --so-v2-navy: #102a43;
    --so-v2-navy-deep: #0b2239;
    --so-v2-navy-soft: #294b68;
    --so-v2-blue: #3d8fbd;
    --so-v2-blue-dark: #286f99;
    --so-v2-ice: #edf7fd;
    --so-v2-ice-strong: #dceef8;
    --so-v2-line: #cbdde9;
    --so-v2-surface: #f6fafc;
    --so-v2-green: #197447;
    --so-v2-green-dark: #105c37;
}

/* Checkout: a clearer, calmer hierarchy. */
.checkout-index-index {
    background:
        radial-gradient(circle at 12% 8%, rgb(61 143 189 / .07), transparent 25rem),
        #f6f9fc;
}

.checkout-index-index .card {
    border-color: var(--so-v2-line) !important;
    box-shadow: 0 8px 24px rgb(16 42 67 / .045) !important;
}

.checkout-index-index .card > h2 {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--so-v2-navy) !important;
}

.checkout-index-index .card > h2::before {
    width: 4px;
    height: 1.15em;
    flex: 0 0 4px;
    border-radius: 999px;
    background: var(--so-v2-blue);
    content: "";
}

/* Active checkout step and selected options use blue, never orange. */
.checkout-index-index ol [class~="text-primary"],
.checkout-index-index [class~="text-primary"] {
    color: var(--so-v2-blue-dark) !important;
}

.checkout-index-index ol [class~="bg-primary"],
.checkout-index-index [class~="bg-primary"]:not(.btn) {
    background-color: var(--so-v2-blue) !important;
}

.checkout-index-index ol [class~="border-primary"],
.checkout-index-index [class~="border-primary"] {
    border-color: var(--so-v2-blue) !important;
}

.checkout-index-index [class~="bg-primary-lighter"],
.checkout-index-index [class~="bg-primary-light"] {
    background: linear-gradient(135deg, var(--so-v2-ice) 0%, #f7fbfe 100%) !important;
}

.checkout-index-index input[type="radio"],
.checkout-index-index input[type="checkbox"] {
    accent-color: var(--so-v2-blue) !important;
}

.checkout-index-index input[type="radio"]:checked,
.checkout-index-index input[type="checkbox"]:checked {
    border-color: var(--so-v2-blue) !important;
    background-color: var(--so-v2-blue) !important;
}

.checkout-index-index input:not([type="radio"]):not([type="checkbox"]):focus,
.checkout-index-index select:focus,
.checkout-index-index textarea:focus {
    border-color: var(--so-v2-blue) !important;
    box-shadow: 0 0 0 3px rgb(61 143 189 / .17) !important;
    outline: none !important;
}

/* Only actions that move the order forward are green. */
.checkout-index-index main .btn-primary {
    border: 1px solid var(--so-v2-green-dark) !important;
    background: linear-gradient(135deg, #218653 0%, var(--so-v2-green) 55%, #14663e 100%) !important;
    color: #fff !important;
    box-shadow: 0 7px 17px rgb(25 116 71 / .2) !important;
    font-weight: 800 !important;
}

.checkout-index-index main .btn-primary:hover {
    filter: brightness(.95);
    box-shadow: 0 9px 21px rgb(25 116 71 / .28) !important;
}

.checkout-index-index main .btn-primary:focus-visible {
    outline: 3px solid rgb(25 116 71 / .24) !important;
    outline-offset: 2px;
}

.checkout-index-index a[href*="/checkout/cart/"] {
    color: var(--so-v2-navy-soft) !important;
    text-decoration-color: rgb(61 143 189 / .55) !important;
}

.checkout-index-index aside .card,
.checkout-index-index [role="complementary"] .card {
    border-top: 3px solid var(--so-v2-blue) !important;
}

/* Homepage hero: one green conversion action and a navy supporting action. */
.cms-index-index #saunyonline-hero .saunyonline-hero-primary {
    border-color: var(--so-v2-green-dark) !important;
    background: linear-gradient(135deg, #218653 0%, var(--so-v2-green) 55%, #14663e 100%) !important;
    color: #fff !important;
    box-shadow: 0 9px 24px rgb(7 35 25 / .3) !important;
}

.cms-index-index #saunyonline-hero .saunyonline-hero-primary:hover {
    filter: brightness(.96);
    transform: translateY(-1px);
}

.cms-index-index #saunyonline-hero .saunyonline-hero-secondary {
    border-color: rgb(220 238 248 / .9) !important;
    background: rgb(16 42 67 / .78) !important;
    color: #fff !important;
    box-shadow: 0 7px 20px rgb(7 27 44 / .25) !important;
    backdrop-filter: blur(4px);
}

.cms-index-index #saunyonline-hero .saunyonline-hero-secondary:hover {
    border-color: #fff !important;
    background: var(--so-v2-navy-deep) !important;
}

/* Homepage product zones: alternating cool surfaces restore rhythm and depth. */
.cms-index-index .product-slider {
    position: relative;
    padding: 1.5rem 1.25rem 1.25rem;
    border: 1px solid var(--so-v2-line);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgb(16 42 67 / .05);
}

.cms-index-index #saunyonline_slider_drewno,
.cms-index-index #saunyonline_slider_akcesoria {
    background: linear-gradient(135deg, var(--so-v2-ice) 0%, #f8fcfe 72%);
}

.cms-index-index #saunyonline_slider_piece,
.cms-index-index #saunyonline_slider_promocje {
    background: linear-gradient(135deg, #fff 0%, var(--so-v2-surface) 100%);
}

.cms-index-index .product-slider > .flex:first-of-type > h3 {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: var(--so-v2-navy) !important;
    font-weight: 800 !important;
}

.cms-index-index .product-slider > .flex:first-of-type > h3::before {
    width: 5px;
    height: 1.25em;
    border-radius: 999px;
    background: var(--so-v2-blue);
    content: "";
}

.cms-index-index .product-slider [data-prev],
.cms-index-index .product-slider [data-next] {
    border-color: var(--so-v2-line) !important;
    background: var(--so-v2-ice) !important;
    color: var(--so-v2-navy) !important;
}

.cms-index-index .product-slider [data-prev]:hover,
.cms-index-index .product-slider [data-next]:hover {
    border-color: var(--so-v2-blue) !important;
    background: var(--so-v2-ice-strong) !important;
    color: var(--so-v2-blue-dark) !important;
}

/* Buying stays green; browsing variants is navy. */
.cms-index-index .product-slider [data-addto="cart"].btn-primary {
    border-color: var(--so-v2-green-dark) !important;
    background: linear-gradient(135deg, #218653 0%, var(--so-v2-green) 100%) !important;
    color: #fff !important;
}

.cms-index-index .product-slider .so-configurable-cta.btn-primary {
    border-color: var(--so-v2-navy) !important;
    background: linear-gradient(135deg, var(--so-v2-navy) 0%, #173e60 100%) !important;
    color: #fff !important;
    box-shadow: 0 5px 13px rgb(16 42 67 / .14) !important;
}

.cms-index-index .product-slider .so-configurable-cta.btn-primary:hover {
    background: var(--so-v2-navy-deep) !important;
}

.cms-index-index .product-slider .snap-marker {
    background-color: var(--so-v2-blue) !important;
}

/* Content bands: cooler alternation, navy feature panel and blue links. */
.cms-index-index .home-seo-band:not(.home-seo-band--dark) {
    background: var(--so-v2-surface) !important;
}

.cms-index-index .home-seo-band:nth-of-type(odd):not(.home-seo-band--dark) {
    background: #eaf4fa !important;
}

/* SAUNYONLINE_DARK_FEATURE_BAND_V2_1
 * The homepage CMS also paints .home-seo-row, so both layers must be themed.
 */
.cms-index-index .home-seo-band--dark,
.cms-index-index .home-seo-band--dark .home-seo-row {
    border: 1px solid rgb(143 201 232 / .18);
    background:
        radial-gradient(circle at 88% 12%, rgb(61 143 189 / .3), transparent 34%),
        linear-gradient(135deg, var(--so-v2-navy-deep) 0%, #123a59 58%, #194f70 100%) !important;
    box-shadow: 0 14px 38px rgb(16 42 67 / .16);
}

.cms-index-index .home-seo-band--dark .home-seo-row {
    border: 0;
    box-shadow: none;
}

.cms-index-index .home-seo-band--dark h2,
.cms-index-index .home-seo-band--dark h3 {
    color: #fff !important;
    font-weight: 800 !important;
}

.cms-index-index .home-seo-band--dark p {
    color: #edf6fb !important;
}

.cms-index-index .home-seo-band--dark strong {
    color: #bfe7fa !important;
    font-weight: 800 !important;
}

.cms-index-index .home-seo-band--dark a:not([href$="/kontakt"]):not([href$="/kontakt/"]) {
    color: #8fd0ef !important;
    font-weight: 800 !important;
    text-decoration-color: rgb(143 208 239 / .62) !important;
    text-underline-offset: 3px;
}

.cms-index-index .home-seo-band--dark a:not([href$="/kontakt"]):not([href$="/kontakt/"]) strong {
    color: inherit !important;
}

.cms-index-index .home-seo-band:not(.home-seo-band--dark) h2,
.cms-index-index .home-seo-band:not(.home-seo-band--dark) h3 {
    color: var(--so-v2-navy) !important;
}

.cms-index-index .home-seo-band:not(.home-seo-band--dark) a {
    color: var(--so-v2-blue-dark) !important;
    text-decoration-color: rgb(61 143 189 / .5) !important;
}

.cms-index-index .home-seo-band:not(.home-seo-band--dark) a svg,
.cms-index-index .home-seo-band:not(.home-seo-band--dark) a svg * {
    color: var(--so-v2-blue-dark) !important;
    stroke: currentColor !important;
}

.cms-index-index .home-seo-band img {
    border-radius: 12px;
    box-shadow: 0 10px 28px rgb(16 42 67 / .12);
}

.cms-index-index .home-seo-band a[href$="/kontakt"],
.cms-index-index .home-seo-band a[href$="/kontakt/"] {
    border: 1px solid var(--so-v2-green-dark) !important;
    background: linear-gradient(135deg, #218653 0%, var(--so-v2-green) 100%) !important;
    color: #fff !important;
    box-shadow: 0 7px 17px rgb(25 116 71 / .2) !important;
}

/* FAQ follows the same blue hierarchy instead of the unrelated gold tone. */
.cms-index-index .home-faq-item {
    border-color: var(--so-v2-line) !important;
    box-shadow: 0 6px 20px rgb(16 42 67 / .07) !important;
}

.cms-index-index .home-faq-item.active {
    border-color: var(--so-v2-blue) !important;
    box-shadow: 0 9px 26px rgb(61 143 189 / .16) !important;
}

.cms-index-index .home-faq-item.active .home-faq-question {
    background: linear-gradient(135deg, var(--so-v2-navy) 0%, #173e60 100%) !important;
}

.cms-index-index .home-faq-question h3 {
    color: var(--so-v2-navy) !important;
}

.cms-index-index .home-faq-item.active .home-faq-question h3 {
    color: #fff !important;
}

.cms-index-index .home-faq-link {
    background: var(--so-v2-blue-dark) !important;
    color: #fff !important;
}

.cms-index-index .home-faq-link:hover {
    background: var(--so-v2-navy) !important;
    box-shadow: 0 4px 12px rgb(16 42 67 / .24) !important;
}

/* Homepage cart counter is informational, so it uses blue rather than orange. */
.cms-index-index button[aria-label^="Toggle minicart"] [class~="bg-primary"] {
    background-color: var(--so-v2-blue) !important;
}

@media (max-width: 767px) {
    .cms-index-index .product-slider {
        padding: 1.1rem .8rem 1rem;
        border-radius: 14px;
    }

    .checkout-index-index .card > h2::before {
        width: 3px;
        flex-basis: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cms-index-index #saunyonline-hero .saunyonline-hero-primary,
    .cms-index-index .home-faq-item {
        transition: none !important;
    }
}