/* ==========================================================================
   Kinnoo Homepage — modern storefront styles (orange brand)
   Depends on shop.css variables: --primary-color, --primary-hover,
   --text-dark, --text-muted, --bg-light, --border-color
   ========================================================================== */

.home-hero,
.home-section,
.trust-bar,
.home-promo {
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Shared buttons -------------------------------------------------------- */
.btn-primary-kinnoo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary-color);
    color: #fff !important;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.85rem 1.8rem;
    border-radius: 0.6rem;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}

    .btn-primary-kinnoo:hover {
        background: var(--primary-hover);
        transform: translateY(-2px);
        color: #fff !important;
    }

.btn-ghost-kinnoo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-dark) !important;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.85rem 1.6rem;
    border-radius: 0.6rem;
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}

    .btn-ghost-kinnoo:hover {
        border-color: var(--primary-color);
        color: var(--primary-color) !important;
    }

/* Hero ------------------------------------------------------------------ */
.home-hero {
    background: var(--kn-bg-soft, #fff7f3);
    padding: 4.5rem 0;
}

.home-hero__eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kn-primary-text, #b4470a);
    margin-bottom: 1rem;
}

.home-hero__text h1 {
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--text-dark);
    margin-bottom: 1.1rem;
}

    .home-hero__text h1 span {
        color: var(--kn-primary-text, #b4470a);
    }

.home-hero__text p {
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 30rem;
    margin-bottom: 1.8rem;
    line-height: 1.7;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 2rem;
}

.home-hero__social {
    display: flex;
    gap: 0.75rem;
}

    .home-hero__social a {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        color: var(--text-dark);
        border: 1px solid var(--border-color);
        transition: all 0.2s;
    }

        .home-hero__social a:hover {
            background: var(--primary-color);
            color: #fff;
            border-color: var(--primary-color);
        }

.home-hero__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3.4;
    background-size: cover;
    background-position: center;
    border-radius: 1rem;
    box-shadow: 0 24px 50px -20px rgba(232, 93, 4, 0.35);
}

.home-hero__badge {
    position: absolute;
    bottom: 1.25rem;
    left: 1.25rem;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
}

@media (max-width: 991px) {
    .home-hero { padding: 3rem 0; }
    .home-hero__text h1 { font-size: 2.3rem; }
    .home-hero__visual { margin-top: 2.5rem; aspect-ratio: 16 / 10; }
}

/* Trust bar ------------------------------------------------------------- */
.trust-bar {
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem 0;
    background: #fff;
}

.trust-bar__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.trust-bar__item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

    .trust-bar__item i {
        font-size: 1.6rem;
        color: var(--primary-color);
    }

    .trust-bar__item strong {
        display: block;
        font-size: 0.95rem;
        color: var(--text-dark);
    }

    .trust-bar__item span {
        font-size: 0.82rem;
        color: var(--text-muted);
    }

@media (max-width: 767px) {
    .trust-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}

/* Section heads & layout ------------------------------------------------ */
.home-section {
    padding: 4rem 0;
}

.home-section--alt {
    background: var(--bg-light);
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2.2rem;
}

.section-head__eyebrow {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kn-primary-text, #b4470a);
    margin-bottom: 0.4rem;
}

.section-head__title {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-dark);
    margin: 0;
}

.section-head__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: var(--text-dark);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}

    .section-head__link:hover {
        color: var(--primary-color);
    }

/* Category tiles -------------------------------------------------------- */
.category-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.category-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 11rem;
    padding: 1.25rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, var(--kn-tile-1, #ffe9dc) 0%, var(--kn-tile-2, #ffd2b3) 100%);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s;
}

    .category-tile:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 30px -14px rgba(232, 93, 4, 0.45);
    }

.category-tile__name {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--text-dark);
}

.category-tile__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-hover);
    margin-top: 0.3rem;
}

@media (max-width: 767px) {
    .category-tiles { grid-template-columns: repeat(2, 1fr); }
    .section-head__title { font-size: 1.5rem; }
}

/* Promo / newsletter ---------------------------------------------------- */
.home-promo {
    padding: 4rem 0 5rem;
}

.home-promo__inner {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    border-radius: 1.25rem;
    padding: 3.25rem 2rem;
    text-align: center;
    color: #fff;
}

    .home-promo__inner h2 {
        font-size: 2rem;
        font-weight: 900;
        margin-bottom: 0.6rem;
        color: #fff;
    }

    .home-promo__inner p {
        font-size: 1rem;
        max-width: 34rem;
        margin: 0 auto 1.8rem;
        opacity: 0.95;
    }

.home-promo__form {
    display: flex;
    max-width: 30rem;
    margin: 0 auto;
    gap: 0.5rem;
}

    .home-promo__form input {
        flex: 1;
        border: none;
        border-radius: 0.6rem;
        padding: 0.85rem 1.1rem;
        font-size: 0.95rem;
        outline: none;
    }

    .home-promo__form button {
        border: none;
        background: var(--text-dark);
        color: #fff;
        font-weight: 700;
        padding: 0.85rem 1.6rem;
        border-radius: 0.6rem;
        cursor: pointer;
        transition: background 0.2s;
    }

        .home-promo__form button:hover {
            background: #000;
        }

@media (max-width: 575px) {
    .home-promo__form { flex-direction: column; }
}

/* Empty state ----------------------------------------------------------- */
.home-empty {
    text-align: center;
    max-width: 32rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}

    .home-empty > i {
        font-size: 3.25rem;
        color: var(--primary-color);
        display: block;
        margin-bottom: 1rem;
    }

    .home-empty h2 {
        font-size: 1.6rem;
        font-weight: 900;
        color: var(--text-dark);
        margin-bottom: 0.6rem;
    }

    .home-empty p {
        color: var(--text-muted);
        line-height: 1.7;
        margin-bottom: 1.5rem;
    }

/* Make product-card titles (links) inherit shop.css styling ------------- */
.home-section .product-title a {
    color: inherit;
    text-decoration: none;
}

    .home-section .product-title a:hover {
        color: var(--primary-color);
    }

/* ===== Bold hero slider ===== */
.hero-slider {
    position: relative;
    overflow: hidden;
    background: #111;
}
.hero-slider__track { position: relative; height: clamp(420px, 62vh, 640px); }
.hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; visibility: hidden;
    transform: scale(1.04);
    transition: opacity .8s ease, transform 6s ease, visibility .8s;
    display: flex; align-items: center;
}
.hero-slide.is-active { opacity: 1; visibility: visible; transform: scale(1); }
.hero-slide__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(10,12,16,.78) 0%, rgba(10,12,16,.45) 45%, rgba(10,12,16,.12) 100%);
}
.hero-slide__content { position: relative; max-width: 620px; color: #fff; }
.hero-slide__eyebrow {
    display: inline-block; text-transform: uppercase; letter-spacing: .12em;
    font-size: .8rem; font-weight: 800; color: #fff;
    background: var(--kn-primary, #cf4408); padding: .35rem .85rem; border-radius: 9999px; margin-bottom: 1.1rem;
}
.hero-slide__content h1 {
    font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 900; line-height: 1.04;
    letter-spacing: -.02em; margin: 0 0 1rem;
}
.hero-slide__content h1 span { color: color-mix(in srgb, var(--kn-primary, #cf4408) 55%, #fff); }
.hero-slide__content p { font-size: clamp(1rem, 1.6vw, 1.2rem); opacity: .92; margin: 0 0 1.6rem; max-width: 480px; }
.hero-slide__cta {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--kn-primary, #cf4408); color: #fff; text-decoration: none;
    font-weight: 800; padding: .9rem 1.7rem; border-radius: 10px; font-size: 1.02rem;
    transition: transform .12s, background .15s;
}
.hero-slide__cta:hover { background: var(--kn-primary-hover, #b63b07); transform: translateY(-2px); color: #fff; }

/* Dark text scheme — for slides over light/bright images. */
.hero-slide--dark .hero-slide__overlay {
    background: linear-gradient(90deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.5) 45%, rgba(255,255,255,.1) 100%);
}
.hero-slide--dark .hero-slide__content { color: #16202e; }
.hero-slide--dark .hero-slide__content h1 { color: #111927; }
.hero-slide--dark .hero-slide__content h1 span { color: var(--kn-primary, #cf4408); }
.hero-slide--dark .hero-slide__content p { color: #2b3645; opacity: 1; }
/* Eyebrow keeps its coloured pill with white text — readable on both schemes. */

.hero-slider__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.18); color: #fff; font-size: 1.3rem;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    backdrop-filter: blur(4px); transition: background .15s; z-index: 3;
}
.hero-slider__arrow:hover { background: rgba(255,255,255,.34); }
.hero-slider__arrow--prev { left: 1.2rem; }
.hero-slider__arrow--next { right: 1.2rem; }
.hero-slider__dots {
    position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
    display: flex; gap: .5rem; z-index: 3;
}
.hero-slider__dot {
    width: 10px; height: 10px; border-radius: 9999px; border: none;
    background: rgba(255,255,255,.45); cursor: pointer; padding: 0; transition: all .2s;
}
.hero-slider__dot.is-active { background: #fff; width: 26px; }

@media (max-width: 680px) {
    .hero-slider__arrow { display: none; }
    /* Mobile: taller card. The photo fills the top ~60% (cropped at the sides,
       keeping the right-hand side where the model usually stands) and fades into
       a solid panel, so the text below always sits on a clean background. */
    .hero-slider__track { height: auto; aspect-ratio: 4 / 5; }
    .hero-slide {
        background-size: auto 60%;
        background-repeat: no-repeat;
        background-position: 72% 0;
        background-color: #14161b;
        align-items: flex-end;
        padding-bottom: 2.8rem;
    }
    .hero-slide .hero-slide__overlay { background: linear-gradient(180deg, rgba(20,22,27,0) 36%, #14161b 60%, #14161b 100%); }
    .hero-slide--dark { background-color: #f7f2ea; }
    .hero-slide--dark .hero-slide__overlay { background: linear-gradient(180deg, rgba(247,242,234,0) 36%, #f7f2ea 60%, #f7f2ea 100%); }
    .hero-slider__dot { background: rgba(0,0,0,.22); }
    .hero-slider__dot.is-active { background: var(--kn-primary, #cf4408); }
    .hero-slide__content h1 { font-size: 1.65rem; }
    .hero-slide__content p { font-size: .95rem; margin-bottom: 1rem; }
}

/* ===== Shop by category tiles ===== */
.cat-tiles-section { padding: 3.5rem 0 1rem; }
.cat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
    justify-content: center;
    gap: 1.5rem;
}
.cat-tile {
    position: relative; display: block; border-radius: 16px; overflow: hidden;
    aspect-ratio: 4 / 5; text-decoration: none; color: #fff;
    box-shadow: 0 8px 28px rgba(20,30,50,.08);
}
.cat-tile__img {
    position: absolute; inset: 0; background-size: cover; background-position: center top;
    transition: transform .5s ease;
}
.cat-tile:hover .cat-tile__img { transform: scale(1.07); }
.cat-tile__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%);
}
.cat-tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem 1.2rem; }
.cat-tile__body h3 { font-size: 1.25rem; font-weight: 800; margin: 0 0 .15rem; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.cat-tile__count { font-size: .82rem; opacity: .85; }
.cat-tile__cta {
    display: block; margin-top: .5rem; font-weight: 800; font-size: .9rem;
    color: #fff; opacity: 0; transform: translateY(6px); transition: all .25s;
}
.cat-tile:hover .cat-tile__cta { opacity: 1; transform: translateY(0); }
.cat-tile__cta i { transition: transform .2s; }
.cat-tile:hover .cat-tile__cta i { transform: translateX(3px); }