﻿.header__nav__option__links {
    display: inline-block;
}

.header__menu ul li a:after {
    background: var(--primary-orange) !important;
}

.breadcrumb-option, .instagram, .banner, .breadcrumb-banner, .product-gallery, .cart__total, .checkout__order {
    background: var(--kn-bg-soft, #fff7f3) !important;
}

.banner {
    padding-bottom: 50px !important;
}

/* nice-select (template applies it to every <select>) — make it scrollable + on-brand */
.nice-select {
    border-radius: 0.5rem;
    border-color: var(--kn-border, #e7e5e4);
    font-family: 'Nunito Sans', -apple-system, sans-serif;
}

    .nice-select.open,
    .nice-select:hover,
    .nice-select:focus {
        border-color: var(--kn-primary, #cf4408);
    }

    .nice-select:after {
        border-bottom: 2px solid var(--kn-muted, #78716c);
        border-right: 2px solid var(--kn-muted, #78716c);
    }

    .nice-select .list {
        max-height: 280px;
        overflow-y: auto;
        width: 100%;
        border-radius: 0.5rem;
        box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.25);
    }

    .nice-select .option:hover,
    .nice-select .option.focus,
    .nice-select .option.selected.focus {
        background-color: var(--kn-bg-soft, #fff7f3);
        color: var(--kn-primary, #cf4408);
    }

    .nice-select .option.selected {
        font-weight: 600;
    }

/* Full width inside checkout fields */
.co-field .nice-select {
    width: 100%;
    height: 44px;
    line-height: 42px;
    float: none;
}

/* Cookie consent banner */
.kn-cookie {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1400;
    max-width: 760px;
    margin: 0 auto;
    background: #1f2733;
    color: #fff;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.kn-cookie__text {
    flex: 1;
    min-width: 220px;
    font-size: .88rem;
    line-height: 1.5;
}
.kn-cookie__text a {
    color: #fff;
    text-decoration: underline;
}
.kn-cookie__actions { flex-shrink: 0; }
.kn-cookie__btn {
    background: var(--kn-primary, #cf4408);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .6rem 1.4rem;
    font-weight: 700;
    cursor: pointer;
}
.kn-cookie__btn:hover { background: var(--kn-primary-hover, #b63b07); }

@media (max-width: 560px) {
    .kn-cookie { flex-direction: column; align-items: stretch; text-align: center; }
    .kn-cookie__btn { width: 100%; }
}

/* ------------------------------------------------------------------------
   Shared button component (.btn-kn / .btn-kn-outline)

   The site currently has 20+ page-specific button classes (.btn-primary-kinnoo,
   .oc-btn, .auth-btn, .cart-checkout-btn, .co-place-btn, etc.) each reinventing
   the same primary/ghost button. Rewriting all of them across every view was too
   risky to do blind (no visual/build verification available in this pass), so
   this doesn't touch existing markup. Use these two classes for NEW buttons
   going forward so the site converges on one component instead of growing a
   21st variant; existing buttons can be migrated to it opportunistically
   whenever that page is next touched.
   ------------------------------------------------------------------------ */
.btn-kn,
.btn-kn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    border: 2px solid transparent;
}

    .btn-kn:hover,
    .btn-kn-outline:hover {
        transform: translateY(-1px);
    }

.btn-kn {
    background: var(--kn-primary, #f97316);
    color: #fff;
}

    .btn-kn:hover {
        background: var(--kn-primary-hover, #ea580c);
        color: #fff;
    }

.btn-kn-outline {
    background: transparent;
    color: var(--kn-primary, #f97316);
    border-color: var(--kn-primary, #f97316);
}

    .btn-kn-outline:hover {
        background: var(--kn-primary, #f97316);
        color: #fff;
    }

.btn-kn:disabled,
.btn-kn-outline:disabled,
.btn-kn.disabled,
.btn-kn-outline.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}
