/* ========================================================================
   WYNEE'S KLOSETTE — ORANGE COUTURE STOREFRONT THEME (2026)
   Brand: vivid tangerine / golden orange / champagne / ivory / near-black.
   Layered onto the existing Omniva template to preserve functionality.
   ======================================================================== */
:root {
    --wk-orange: #ff6500;
    --wk-orange-light: #ff8a1c;
    --wk-orange-deep: #d94c00;
    --wk-amber: #ffad41;
    --wk-cream: #fff9f3;
    --wk-ivory: #fffdf9;
    --wk-peach: #fff0df;
    --wk-peach-deep: #ffe0bd;
    --wk-ink: #19130f;
    --wk-muted: #685a51;
    --wk-stroke: #f2d9c5;
    --wk-shadow: 0 16px 38px rgba(104, 45, 4, 0.09);
    --wk-gradient: linear-gradient(
        115deg,
        #ff5700 0%,
        #ff7900 54%,
        #ff9a26 100%
    );

    /* Feed the updated brand palette into the original template tokens. */
    --primary: var(--wk-orange);
    --third: var(--wk-orange-deep);
    --wy: var(--wk-orange);
    --black: var(--wk-ink);
    --main: var(--wk-ink);
    --text: var(--wk-muted);
    --text-2: var(--wk-ink);
    --text-4: var(--wk-muted);
    --text-5: var(--wk-orange-deep);
    --text-10: var(--wk-orange);
    --text-13: var(--wk-amber);
    --text-18: var(--wk-orange-deep);
    --text-22: var(--wk-orange-deep);
    --text-23: var(--wk-orange-light);
    --bg: var(--wk-cream);
    --bg-2: var(--wk-orange-deep);
    --bg-6: var(--wk-cream);
    --bg-7: rgba(255, 240, 223, 0.8);
    --bg-12: var(--wk-orange);
    --bg-24: var(--wk-peach-deep);
    --bg-28: var(--wk-peach);
    --line: var(--wk-stroke);
    --line-3: var(--wk-stroke);
    --line-6: var(--wk-peach-deep);
    --brand_100: var(--wk-orange);
    --on-surface: var(--wk-ink);
    --surface: var(--wk-cream);

    /* Topbar (40px) + desktop navigation (104px). */
    --wk-hero-offset: 144px;
}
html {
    scroll-padding-top: 84px;
}
body {
    background: var(--wk-cream);
    color: var(--wk-muted);
}
body,
input,
select,
textarea,
button {
    -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--wk-ink);
}
::selection {
    background: #ffbf87;
    color: #231308;
}
/* a:hover,
.link:hover {
    color: var(--wk-orange-deep);
} */
:focus-visible {
    outline: 2px solid var(--wk-orange);
    outline-offset: 3px;
}
.text-gold,
.text-primary {
    color: var(--wk-orange) !important;
}
.bg-primary {
    background: var(--wk-orange) !important;
}
.bg-cream,
.wk-cream {
    background: var(--wk-cream) !important;
}
.wk-peach {
    background: var(--wk-peach) !important;
}
.wk-orange {
    background: var(--wk-gradient) !important;
    color: #fff;
}

/* Announcement strip and main navigation */
.tf-topbar {
    background: var(--wk-gradient);
    color: #fff;
}
.tf-topbar a,
.tf-topbar p,
.tf-topbar .text-adver,
.tf-topbar .nav-prev-swiper,
.tf-topbar .nav-next-swiper {
    color: #fff;
}
.tf-topbar .br-line {
    background: rgba(255, 255, 255, 0.32);
}
header,
.header,
.header-inner {
    background-color: var(--wk-ivory);
}
header.header-sticky:not(.no-boxShadow) {
    box-shadow: 0 7px 22px rgba(93, 43, 15, 0.085);
}
.item-link,
.box-nav-menu .item-link {
    color: var(--wk-ink);
}
.item-link:hover,
.item-link.active,
.box-nav-menu .item-link:hover,
.box-nav-menu .item-link.active {
    color: var(--wk-orange);
}
.item-link::before,
.box-nav-menu .item-link::before {
    background-color: var(--wk-orange);
}
.header .icon:hover,
.header a:hover {
    color: var(--wk-orange);
}
.nav-icon-list .nav-icon-item.has-number .number-order,
.tf-toolbar-bottom .toolbar-count {
    background: var(--wk-orange);
}

/* Existing reusable buttons (preserve outline / secondary semantics) */
.tf-btn:not(.btn-white):not(.style-stroke):not(.style-stroke-2):not(
        .style-stroke-3
    ):not(.style-stroke-4):not(.style-stroke-5):not(.style-stroke-6):not(
        .btn-purple
    ):not(.btn-green):not(.btn-blue):not(.btn-olive),
.btn-primary {
    background: var(--wk-gradient);
    color: #fff;
    border-color: transparent;
}
.tf-btn:not(.btn-white):not(.style-stroke):not(.style-stroke-2):hover,
.btn-primary:hover {
    background: linear-gradient(115deg, #d94800, #f46a00);
    color: #fff;
    box-shadow: 0 10px 22px rgba(232, 87, 0, 0.22);
    transform: translateY(-2px);
}
.tf-btn {
    border-radius: 999px;
    font-weight: 600;
}
.tf-btn.style-stroke,
.tf-btn.style-stroke-2,
.tf-btn.style-stroke-3,
.tf-btn.style-stroke-4,
.tf-btn.style-stroke-5,
.tf-btn.style-stroke-6,
.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--wk-orange);
    color: var(--wk-orange);
}
.tf-btn.style-stroke:hover,
.tf-btn.style-stroke-2:hover,
.tf-btn.style-stroke-3:hover,
.tf-btn.style-stroke-4:hover,
.tf-btn.style-stroke-5:hover,
.tf-btn.style-stroke-6:hover,
.btn-outline-primary:hover {
    background: var(--wk-orange);
    border-color: var(--wk-orange);
    color: #fff;
}
.tf-btn.btn-white {
    background: #fff;
    color: var(--wk-ink);
}
.tf-btn.btn-white:hover {
    color: var(--wk-orange-deep);
}
.tf-btn-line::after,
.tf-btn-line::before {
    background: var(--wk-orange);
}
.tf-btn-rounded:not(.style-black):not(.style-stroke) {
    background: var(--wk-orange);
    color: #fff;
}
.tf-btn-rounded.style-stroke {
    border-color: var(--wk-orange);
    color: var(--wk-orange);
}
.tf-btn-rounded.style-stroke:hover,
.tf-btn-rounded.style-black:hover,
.tf-btn-v2:hover {
    background: var(--wk-orange);
    border-color: var(--wk-orange);
    color: #fff;
}
#scroll-top,
#goTop {
    background: var(--wk-orange);
    color: #fff;
}
#goTop .icon {
    color: #fff;
}
#goTop .border-progress {
    border-color: var(--wk-orange-deep);
}

/* Large slideshow hero: works with existing banners or new hero imagery */
.tf-slideshow,
.wk-hero {
    background: #fff1e2;
}
.tf-slideshow,
.tf-slideshow > .swiper,
.tf-slideshow > .swiper > .swiper-wrapper,
.tf-slideshow .swiper-slide,
.tf-slideshow .slideshow-v04,
.tf-slideshow .sld-image {
    height: calc(100vh - var(--wk-hero-offset));
    height: calc(100svh - var(--wk-hero-offset));
}
.tf-slideshow .swiper-slide {
    overflow: hidden;
}
.tf-slideshow .sld-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
}
.tf-slideshow .sw-dots .swiper-pagination-bullet-active,
.tf-slideshow .swiper-pagination-bullet-active {
    background: var(--wk-orange);
}
.tf-slideshow .sld__tag {
    color: var(--wk-orange-deep) !important;
    letter-spacing: 0.16em;
}
.tf-slideshow .sld__title {
    color: var(--wk-ink);
}
.tf-slideshow .sld__desc {
    color: var(--wk-muted);
}
.wk-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.wk-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        90deg,
        rgba(255, 249, 243, 0.9),
        rgba(255, 249, 243, 0.48) 43%,
        transparent 67%
    );
    pointer-events: none;
}
.wk-hero .tf-btn {
    min-height: 48px;
    padding-inline: 30px;
}
.wk-hero .subtitle,
.wk-eyebrow {
    color: var(--wk-orange-deep);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.wk-hero h1,
.wk-hero .title {
    color: var(--wk-ink);
}
.wk-hero .highlight {
    color: var(--wk-orange);
}

/* Section-level warmth; alternating light creams rather than solid orange everywhere */
.flat-spacing,
.flat-spacing-2,
.flat-spacing-3,
.flat-spacing-4,
.flat-spacing-5,
.flat-spacing-6,
.flat-spacing-7,
.flat-spacing-8,
.flat-spacing-9,
.flat-spacing-10 {
    position: relative;
}
main {
    background: var(--wk-cream);
}
main > section:nth-of-type(even):not(.tf-slideshow):not(.wk-orange-section) {
    background-color: #fff3e6;
}
main > section:nth-of-type(odd):not(.tf-slideshow):not(.wk-orange-section) {
    background-color: var(--wk-cream);
}
.wk-section-soft {
    background: linear-gradient(135deg, #fff9f3, #ffead2) !important;
}
.wk-section-orange {
    background: var(--wk-gradient) !important;
    color: white;
}
.wk-section-orange h1,
.wk-section-orange h2,
.wk-section-orange h3,
.wk-section-orange h4,
.wk-section-orange p {
    color: white;
}
.wk-section-orange .tf-btn {
    background: white !important;
    color: var(--wk-orange-deep) !important;
}
.wk-section-dark {
    background: #16100d !important;
    color: #fff;
}
.wk-section-dark h1,
.wk-section-dark h2,
.wk-section-dark h3 {
    color: #fff;
}

/* Section headings, category tiles, brand and editorial banners */
.sect-heading .sub-title,
.sect-heading-v02 .sub-title,
.sect-heading-v02 .mini-title,
.section-trending .mini-title {
    color: var(--wk-orange-deep);
}
.sect-heading .title,
.sect-heading-v02 .title {
    color: var(--wk-ink);
}
.banner-v01,
.banner-v02,
.banner-v03,
.banner-v04,
.banner-v05,
.banner-v06,
.banner-v07,
.banner-v08,
.banner-v09,
.banner-lookbook {
    overflow: hidden;
    border-radius: 18px;
}
.banner-v01 .banner-content,
.banner-v02 .banner-content,
.banner-v03 .banner-content,
.banner-v08 .bn-content,
.banner-v09 .bn-content {
    color: var(--wk-ink);
}
.banner-v01 img,
.banner-v02 img,
.banner-v03 img,
.banner-v05 img,
.banner-v06 img,
.banner-v08 img,
.banner-lookbook img {
    transition: transform 0.7s cubic-bezier(0.2, 0.75, 0.3, 1);
}
.banner-v01:hover img,
.banner-v02:hover img,
.banner-v03:hover img,
.banner-v05:hover img,
.banner-v06:hover img,
.banner-v08:hover img,
.banner-lookbook:hover img {
    transform: scale(1.035);
}
.section-tab-collection .cls-image,
.section-tab-collection .cls-image img {
    border-radius: 16px;
}
.wk-category-card {
    overflow: hidden;
    border: 1px solid var(--wk-stroke);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--wk-shadow);
}
.wk-category-card img {
    width: 100%;
    transition: transform 0.5s;
}
.wk-category-card:hover img {
    transform: scale(1.045);
}
.wk-category-card .tf-btn-rounded {
    background: var(--wk-orange);
    color: #fff;
}

/* Product cards, labels, prices, actions */
.card-product {
    background: var(--wk-ivory);
    border: 1px solid var(--wk-stroke);
    border-radius: 16px;
    overflow: hidden;
    transition:
        box-shadow 0.25s,
        transform 0.25s,
        border-color 0.25s;
}
.card-product:hover {
    border-color: #ffbd8a;
    box-shadow: var(--wk-shadow);
    transform: translateY(-3px);
}
.card-product .card-product_wrapper {
    overflow: hidden;
    border-radius: 14px 14px 0 0;
}
.card-product .card-product_info {
    padding: 14px 15px 18px;
}
.card-product .name-product,
.card-product .name-product a {
    color: var(--wk-ink);
}
.card-product .name-product a:hover {
    color: var(--wk-orange-deep);
}
.card-product .price-on-sale,
.card-product .price-new,
.card-product .price-current {
    color: var(--wk-orange-deep);
}
.card-product .product-action_bot .tf-btn,
.card-product .product-action_bot button {
    border-radius: 999px;
}
.card-product .product-action_list a:hover,
.card-product .product-action_list button:hover {
    background: var(--wk-orange);
    color: #fff;
}
.card-product .card-product_wrapper .badge-sale {
    background: var(--wk-orange);
    color: #fff;
}
.catalog-card__wish:hover {
    color: #fff;
    background: var(--wk-orange);
    border-color: var(--wk-orange);
}
.catalog-card__collection,
.catalog-card__price strong {
    color: var(--wk-orange-deep);
}
.card-product .card-product_wrapper img {
    transition: transform 0.45s;
}
.card-product:hover .card-product_wrapper img {
    transform: scale(1.025);
}

/* Promotional blocks, discount bars and countdown banners */
.wk-promo-banner {
    background: linear-gradient(120deg, #fff5e6 0%, #ffca89 48%, #ff7900 100%);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--wk-shadow);
}
.wk-preorder-banner {
    background: linear-gradient(100deg, #fff9f2 4%, #ffe1bc 62%, #ff8b13 100%);
    border: 1px solid #ffd2a6;
    border-radius: 20px;
    overflow: hidden;
}
.banner-countdown-v01 {
    border-radius: 18px;
    overflow: hidden;
}
.tf-page-title:not(.style-2) {
    background: linear-gradient(115deg, #fff9f2, #ffe6c9);
    margin-bottom: 30px;
}
.tf-page-title .breadcrumb a:hover {
    color: var(--wk-orange);
}

/* Forms, dropdowns, cart and checkout input controls */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.form-control {
    border-color: var(--wk-stroke);
}
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
.form-control:focus {
    border-color: var(--wk-orange);
    box-shadow: 0 0 0 3px rgba(255, 101, 0, 0.12);
    outline: 0;
}
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--wk-orange);
}
.dropdown-menu {
    border-color: var(--wk-stroke);
    box-shadow: var(--wk-shadow);
}
.progress-bar {
    background: var(--wk-orange);
}
.sw-progress-default .swiper-pagination-progressbar-fill,
.sw-line-default .swiper-pagination-bullet-active,
.sw-dot-default .swiper-pagination-bullet-active::before,
.tf-sw-scrollbar {
    background-color: var(--wk-orange);
}
.sw-dot-default .swiper-pagination-bullet-active {
    border-color: var(--wk-orange);
}

/* Footer: intentional dark contrast makes the bright boutique sections pop */
.tf-footer {
    background: #140f0c;
    color: #e4d8cf;
}
.tf-footer h1,
.tf-footer h2,
.tf-footer h3,
.tf-footer h4,
.tf-footer h5,
.tf-footer h6,
.tf-footer .footer-heading {
    color: #fff8f1;
}
.tf-footer a {
    color: #e4d8cf;
}
.tf-footer a:hover {
    color: #ff9f43;
}
.tf-footer .br-line,
.tf-footer .footer-bottom_wrap {
    border-color: rgba(255, 255, 255, 0.15);
}
.tf-footer .footer-social a {
    color: #fff;
}
.tf-footer .footer-social a:hover {
    background: var(--wk-orange);
    color: #fff;
}
.tf-footer input {
    background: #fffaf5;
    color: var(--wk-ink);
}
.tf-footer .tf-btn {
    background: var(--wk-gradient);
    color: #fff;
}

@media (max-width: 991px) {
    .wk-hero::before {
        background: linear-gradient(
            90deg,
            rgba(255, 249, 243, 0.94),
            rgba(255, 249, 243, 0.62) 55%,
            rgba(255, 249, 243, 0.1)
        );
    }
    .banner-v01,
    .banner-v02,
    .banner-v03,
    .banner-v08,
    .banner-v09 {
        border-radius: 12px;
    }
    .card-product {
        border-radius: 12px;
    }
    .card-product .card-product_info {
        padding: 11px 12px 15px;
    }
}
@media (max-width: 1199px) {
    :root {
        /* Topbar (40px) + compact navigation (98px). */
        --wk-hero-offset: 138px;
    }
}
@media (min-width: 1440px) {
    :root {
        /* The wide desktop navigation uses taller menu links. */
        --wk-hero-offset: 160px;
    }
}
@media (max-width: 575px) {
    :root {
        /* The topbar is hidden at this breakpoint. */
        --wk-hero-offset: 98px;
    }
    .tf-slideshow .sld-content_inner {
        max-width: min(88%, 430px);
    }
    .tf-slideshow .sld-content .head {
        margin-bottom: 22px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .card-product,
    .card-product img,
    .wk-category-card img,
    .banner-v01 img,
    .banner-v02 img,
    .banner-v03 img {
        transition: none;
    }
}