/* ==========================================================================
   KNAN UNDERWEAR — brand layer
   Loaded AFTER style.css. All brand-specific overrides live here so the
   vendor template stylesheet stays upgradeable.

   Retune the whole site from the tokens in :root below.
   ========================================================================== */

:root {
    /* Brand ---------------------------------------------------------------- */
    --knan-blue: #00c0f2;
    /* The seamless paper the client's packshots were shot on, measured off
       the photographs themselves rather than picked by eye.

       Sampled from ~5.7M background pixels across the twelve cyan-sweep
       frames. A plain average would have been wrong — the sweep is blown out
       to different degrees frame to frame, and overexposure only ever pushes
       toward white — so this is the top decile of saturation, where the paper
       is least washed out. Every saturation band from p70 upwards converges
       on this value.

       It is a FILL colour, never a text colour. Against white it measures
       2.14:1, well under the 4.5:1 small text needs. Use it behind dark type,
       where it measures 7.7:1. */
    --knan-blue-dark: #00a2cc;
    /* pressed / hover fill */
    --knan-blue-ink: #007d9e;
    /* Same hue, darkened until text on white passes: 4.74:1. This is what the
       ~74 `color:` rules across style.css and brand.css point at, so links
       and headings read as the brand colour without being illegible. */
    --knan-on-blue: #06232b;
    /* Type that sits ON the cyan. Near-black rather than white: white on the
       paper is 2.14:1, this is 7.7:1. */
    --knan-ink: #0b1220;
    --knan-ink-soft: #48505e;
    --knan-line: #e6e6e8;
    --knan-bg-soft: #f4f7fb;
    --knan-whatsapp: #25d366;
    --knan-success: #1e8e4b;
    --knan-danger: #c0392b;

    /* Hero ----------------------------------------------------------------- */
    --knan-hero-bg: #eef3fa;
    /* pale ground behind hero photography */
    --knan-announce-h: 44px;
    /* height of the announcement bar above the hero */

    /* Type ----------------------------------------------------------------- */
    --knan-display: 'Prata', Georgia, serif;

    /* Rhythm --------------------------------------------------------------- */
    --knan-radius: 2px;
    --knan-shadow: 0 2px 18px rgba(11, 18, 32, .08);
    --knan-shadow-lg: 0 12px 40px rgba(11, 18, 32, .13);
    --knan-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   1. Typography
   ========================================================================== */

body {
    color: var(--knan-ink-soft);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--knan-ink);
    letter-spacing: -.01em;
}

/* Section headings: quiet eyebrow + confident title */
.section-title h2,
.section-title h3 {
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.knan-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--knan-blue-ink);
    margin-bottom: 14px;
}

.knan-lead {
    font-size: 15px;
    line-height: 28px;
    max-width: 62ch;
}

/* ==========================================================================
   2. Logo sizing (artwork is rendered at 4x for retina)
   ========================================================================== */

/* The real mark is a script wordmark at roughly 2.2:1, where the generated
   placeholder was 4:1 — so it needs less width for the same optical weight,
   or it doubles the height of the header bar. */
.header-logo_area img,
.newsletter-logo img,
.offcanvas-menu-inner .logo img {
    width: 118px;
    height: auto;
}

.sticky-header .header-logo_area img {
    width: 104px;
}

.transparent-header .header-logo_area img {
    width: 130px;
}

.offcanvas-inner_logo img {
    width: 124px;
    height: auto;
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */

.kenne-btn {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-radius: var(--knan-radius);
    transition: all .25s var(--knan-ease);
}

.kenne-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 129, 228, .28);
}

.knan-btn-gold {
    background-color: var(--knan-blue) !important;
    color: #fff !important;
    border-color: var(--knan-blue) !important;
}

.knan-btn-gold:hover {
    background-color: var(--knan-blue-dark) !important;
    border-color: var(--knan-blue-dark) !important;
}

/* WhatsApp-styled CTA, used on product / cart / checkout */
.knan-btn-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--knan-whatsapp);
    color: #fff !important;
    border: 1px solid var(--knan-whatsapp);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 15px 32px;
    border-radius: var(--knan-radius);
    transition: all .25s var(--knan-ease);
}

.knan-btn-wa:hover {
    background-color: #1da851;
    border-color: #1da851;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 211, 102, .34);
}

.knan-btn-wa i {
    font-size: 18px;
}

/* Floating WhatsApp action — every page */
.knan-wa-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--knan-whatsapp);
    color: #fff !important;
    box-shadow: 0 6px 22px rgba(37, 211, 102, .42);
    transition: transform .25s var(--knan-ease);
}

.knan-wa-float:hover {
    transform: scale(1.08);
    color: #fff !important;
}

.knan-wa-float i {
    font-size: 27px;
    line-height: 1;
}

@media (max-width: 767px) {
    .knan-wa-float {
        right: 16px;
        bottom: 76px;
        width: 48px;
        height: 48px;
    }

    .knan-wa-float i {
        font-size: 24px;
    }
}

/* ==========================================================================
   4. Announcement bar
   ========================================================================== */

.knan-announce {
    background: var(--knan-ink);
    color: #fff;
    text-align: center;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 10px 15px;
    position: relative;
    z-index: 5;
}

.knan-announce strong {
    color: var(--knan-blue-ink);
    font-weight: 500;
}

.knan-announce a {
    color: #fff !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.knan-announce a:hover {
    color: var(--knan-blue-ink) !important;
}

@media (max-width: 575px) {
    .knan-announce {
        font-size: 10px;
        letter-spacing: .06em;
        padding: 8px 12px;
    }
}

/* ==========================================================================
   5. Hero / slider — full-bleed, light and airy
   --------------------------------------------------------------------------
   The hero fills the viewport. Ground stays pale and the headline sits in
   clear space on the left, so hero photography should be a cut-out subject
   placed right of frame (see REPLACE-ME.md).
   ========================================================================== */

.slider-area {
    position: relative;
}

.slide-item {
    position: relative;
    background-color: var(--knan-hero-bg);
}

/* A whisper of a scrim on the left only — enough to hold dark type over a
   busier photograph without tinting the pale ground.
   NOTE: .slide-content is absolutely positioned against .slide-item, so the
   .container inside it must stay unpositioned or the 50% centring collapses
   to a zero-height box at the top of the hero. Layer with z-index only. */
.slide-item:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .45) 42%, rgba(255, 255, 255, 0) 72%);
    z-index: 1;
}

.home-slider .slide-item .slide-content {
    z-index: 2;
    max-width: 620px;
}

/* Full screen. The announcement bar sits above the hero, so subtract it.
   Plain vh on desktop — svh is the *small* viewport and some engines size it
   for browser chrome that a desktop window does not have, leaving a gap under
   the hero. Mobile gets dvh below, where the collapsing address bar is real. */
.bg-1,
.bg-2,
.bg-3 {
    min-height: calc(100vh - var(--knan-announce-h));
    background-position: center right;
    background-size: cover;
}

/* Slick stamps an inline pixel height on .slick-list at init (fade mode) and
   never revises it, which clipped the hero ~80px short of the fold. A
   min-height always beats a smaller inline height, so this corrects it
   without racing the carousel's own JS. */
.home-slider .slick-list,
.home-slider .slick-track {
    min-height: calc(100vh - var(--knan-announce-h));
}

@media (max-width: 991px) {

    .bg-1,
    .bg-2,
    .bg-3,
    .home-slider .slick-list,
    .home-slider .slick-track {
        min-height: calc(100vh - var(--knan-announce-h));
        min-height: calc(100dvh - var(--knan-announce-h));
    }

    .bg-1,
    .bg-2,
    .bg-3 {
        background-position: 72% center;
    }
}

.home-slider .slide-item .slide-content>span {
    display: block;
    color: var(--knan-blue-ink);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    padding-bottom: 26px;
}

/* Editorial serif for the display line — the elegance in this layout comes
   from the contrast between it and the tracked sans everywhere else. */
.home-slider .slide-item .slide-content>h2 {
    font-family: 'Prata', Georgia, serif;
    color: var(--knan-ink);
    font-weight: 400;
    font-size: 76px;
    line-height: 1.08;
    letter-spacing: -.015em;
    margin-bottom: 30px;
}

@media (max-width: 1399px) {
    .home-slider .slide-item .slide-content>h2 {
        font-size: 62px;
    }
}

@media (max-width: 1199px) {
    .home-slider .slide-item .slide-content>h2 {
        font-size: 52px;
    }
}

@media (max-width: 991px) {
    .home-slider .slide-item .slide-content>h2 {
        font-size: 42px;
    }

    .home-slider .slide-item .slide-content>span {
        padding-bottom: 18px;
    }
}

@media (max-width: 575px) {
    .home-slider .slide-item .slide-content>h2 {
        font-size: 32px;
    }
}

.home-slider .slide-item .slide-content>p,
.home-slider .slide-item .slide-content>p.short-desc,
.home-slider .slide-item .slide-content>p.short-desc-2 {
    color: var(--knan-ink-soft);
    font-size: 16px;
    line-height: 30px;
    max-width: 44ch;
    margin-bottom: 44px;
}

@media (max-width: 991px) {

    .home-slider .slide-item .slide-content>p,
    .home-slider .slide-item .slide-content>p.short-desc,
    .home-slider .slide-item .slide-content>p.short-desc-2 {
        font-size: 15px;
        line-height: 27px;
        margin-bottom: 30px;
    }
}

/* Hero button: outlined ink, filling on hover. Quieter than a solid slab.
   The vendor .kenne-btn is a fixed-width block, so the label wrapped and
   spilled past the border — force it to size to its own text. */
.slide-btn .kenne-btn {
    background-color: transparent;
    border: 1px solid var(--knan-ink);
    color: var(--knan-ink) !important;
    display: inline-block;
    width: auto;
    min-width: 0;
    white-space: nowrap;
    line-height: 1;
    padding: 20px 46px;
    letter-spacing: .18em;
}

.slide-btn .kenne-btn:hover {
    background-color: var(--knan-ink) !important;
    border-color: var(--knan-ink);
    color: #fff !important;
    box-shadow: none;
    transform: translateY(-2px);
}

/* Scroll cue — a quiet nudge that there is more below the fold. */
.knan-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--knan-ink-soft) !important;
}

.knan-scroll-cue:hover {
    color: var(--knan-blue-ink) !important;
}

.knan-scroll-cue span {
    display: block;
    width: 1px;
    height: 46px;
    background: linear-gradient(to bottom, rgba(11, 18, 32, .32), rgba(11, 18, 32, 0));
    animation: knan-cue 2.4s var(--knan-ease) infinite;
}

@keyframes knan-cue {

    0%,
    100% {
        opacity: .25;
        transform: scaleY(.6);
        transform-origin: top;
    }

    50% {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top;
    }
}

@media (max-width: 991px) {
    .knan-scroll-cue {
        display: none;
    }
}

/* ==========================================================================
   6. Trust / service bar
   ========================================================================== */

.service-area .service-nav {
    border-top: 1px solid var(--knan-line);
    border-bottom: 1px solid var(--knan-line);
}

.service-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 30px 10px;
}

.service-item .icon i {
    font-size: 26px;
    color: var(--knan-blue-ink);
    line-height: 1;
}

.service-item .content h4 {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.service-item .content p {
    font-size: 13px;
    margin: 0;
}

@media (max-width: 767px) {
    .service-item {
        padding: 20px 10px;
    }
}

/* ==========================================================================
   7. Product cards
   ========================================================================== */

.product-item .single-product {
    border: 1px solid transparent;
    transition: all .3s var(--knan-ease);
}

.product-item .single-product:hover {
    border-color: var(--knan-line);
    box-shadow: var(--knan-shadow);
}

.product-item .product-img {
    background: var(--knan-bg-soft);
    overflow: hidden;
}

.product-name a {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .01em;
}

.price-box .new-price {
    color: var(--knan-ink);
    font-weight: 500;
}

.price-box .old-price {
    color: #9aa0ab;
    font-weight: 400;
}

/* Stickers */
.product-img .sticker,
.product-img .sticker-2 {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: var(--knan-radius);
    padding: 5px 10px;
}

.product-img .sticker-2 {
    background: var(--knan-blue);
    color: #fff;
}

/* Size availability chips under the card */
.knan-card-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
}

.knan-card-sizes span {
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--knan-ink-soft);
    border: 1px solid var(--knan-line);
    border-radius: var(--knan-radius);
    padding: 2px 7px;
    line-height: 16px;
}

/* Colour dots under the card */
.knan-card-colors {
    display: flex;
    gap: 6px;
    margin-top: 9px;
    justify-content: center;
}

.knan-card-colors i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(11, 18, 32, .18);
    display: inline-block;
}

/* ==========================================================================
   8. Colour + size swatches (product page)
   ========================================================================== */

.knan-variant {
    margin-bottom: 22px;
}

.knan-variant-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--knan-ink);
    margin-bottom: 10px;
}

.knan-variant-label .knan-variant-value {
    color: var(--knan-ink-soft);
    letter-spacing: .04em;
    text-transform: none;
    font-weight: 400;
}

.knan-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.knan-size {
    min-width: 46px;
    text-align: center;
    padding: 10px 12px;
    border: 1px solid var(--knan-line);
    border-radius: var(--knan-radius);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--knan-ink);
    cursor: pointer;
    background: #fff;
    transition: all .2s var(--knan-ease);
    -webkit-user-select: none;
    user-select: none;
}

.knan-size:hover {
    border-color: var(--knan-ink);
}

.knan-size.is-active {
    background: var(--knan-ink);
    border-color: var(--knan-ink);
    color: #fff;
}

.knan-size.is-disabled {
    opacity: .38;
    cursor: not-allowed;
    background: repeating-linear-gradient(135deg, #fff, #fff 4px, #f2f2f2 4px, #f2f2f2 8px);
}

.knan-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.knan-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    border: 1px solid rgba(11, 18, 32, .16);
    transition: all .2s var(--knan-ease);
}

.knan-swatch:after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid transparent;
    transition: border-color .2s var(--knan-ease);
}

.knan-swatch.is-active:after {
    border-color: var(--knan-ink);
}

/* Size-guide trigger */
.knan-size-guide-link {
    font-size: 12px;
    letter-spacing: .04em;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--knan-ink-soft) !important;
    float: right;
    font-weight: 400;
    text-transform: none;
}

.knan-size-guide-link:hover {
    color: var(--knan-blue-ink) !important;
}

/* ==========================================================================
   9. Stock + delivery notes
   ========================================================================== */

.knan-stock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    letter-spacing: .04em;
}

.knan-stock:before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--knan-success);
}

.knan-stock.is-low:before {
    background: #e08a1e;
}

.knan-stock.is-out:before {
    background: var(--knan-danger);
}

.knan-note {
    background: var(--knan-bg-soft);
    border-left: 2px solid var(--knan-blue);
    padding: 14px 18px;
    font-size: 13px;
    line-height: 23px;
    margin: 22px 0;
}

.knan-note strong {
    color: var(--knan-ink);
    font-weight: 500;
}

/* ==========================================================================
   10. Payment badges (EcoCash / InnBucks / bank / cash)
   ========================================================================== */

.knan-pay-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.knan-pay-list li {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--knan-ink-soft);
    border: 1px solid var(--knan-line);
    background: #fff;
    border-radius: var(--knan-radius);
    padding: 7px 11px;
    line-height: 1;
}

.footer-bottom_area .knan-pay-list li {
    background: transparent;
    border-color: rgba(11, 18, 32, .16);
}

/* ==========================================================================
   11. Cart / checkout
   ========================================================================== */

.knan-empty {
    text-align: center;
    padding: 70px 20px;
}

.knan-empty i {
    font-size: 52px;
    color: var(--knan-line);
    display: block;
    margin-bottom: 18px;
}

.knan-empty h3 {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .04em;
    margin-bottom: 10px;
}

.knan-empty p {
    margin-bottom: 24px;
}

.table-content table td.product-name a,
.table-content table th {
    font-weight: 500;
}

.knan-line-variant {
    display: block;
    font-size: 12px;
    color: var(--knan-ink-soft);
    margin-top: 4px;
    letter-spacing: .03em;
}

.cart-page-total>ul>li {
    font-size: 14px;
}

/* Order-method cards on checkout */
.knan-method {
    border: 1px solid var(--knan-line);
    border-radius: var(--knan-radius);
    padding: 22px 24px;
    margin-bottom: 16px;
    transition: border-color .2s var(--knan-ease);
}

.knan-method.is-primary {
    border-color: var(--knan-blue);
    background: #fffdf8;
}

.knan-method h4 {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.knan-method p {
    font-size: 13px;
    line-height: 23px;
    margin-bottom: 16px;
}

.knan-method dl {
    margin: 0 0 16px;
    font-size: 13px;
}

.knan-method dt {
    color: var(--knan-ink-soft);
    font-weight: 400;
    float: left;
    clear: left;
    width: 130px;
}

.knan-method dd {
    color: var(--knan-ink);
    font-weight: 500;
    margin: 0 0 6px 130px;
}

@media (max-width: 480px) {
    .knan-method dt {
        float: none;
        width: auto;
    }

    .knan-method dd {
        margin-left: 0;
        margin-bottom: 10px;
    }
}

/* ==========================================================================
   12. Size guide table
   ========================================================================== */

.knan-size-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.knan-size-table th,
.knan-size-table td {
    border: 1px solid var(--knan-line);
    padding: 12px 14px;
    text-align: center;
}

.knan-size-table thead th {
    background: var(--knan-ink);
    color: #fff;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 11px;
}

.knan-size-table tbody tr:nth-child(even) {
    background: var(--knan-bg-soft);
}

.knan-size-table td:first-child {
    font-weight: 500;
    color: var(--knan-ink);
}

/* ==========================================================================
   13. Footer
   ========================================================================== */

.kenne-footer_area {
    background: var(--knan-bg-soft);
}

.footer-widgets_title h4 {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.footer-widgets ul li a,
.footer-widgets ul li {
    font-size: 13px;
    line-height: 30px;
}

.knan-footer-contact li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 24px;
    margin-bottom: 12px;
}

.knan-footer-contact i {
    color: var(--knan-blue-ink);
    font-size: 15px;
    line-height: 24px;
}

.knan-social {
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 20px 0 0;
    list-style: none;
}

.knan-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(11, 18, 32, .14);
    border-radius: 50%;
    font-size: 15px;
    transition: all .25s var(--knan-ease);
}

.knan-social a:hover {
    background: var(--knan-ink);
    border-color: var(--knan-ink);
    color: #fff !important;
}

.footer-bottom_area {
    border-top: 1px solid var(--knan-line);
}

.copyright span {
    font-size: 13px;
}

/* ==========================================================================
   14. Toast (add-to-cart feedback)
   ========================================================================== */

.knan-toast {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translate(-50%, 20px);
    z-index: 1100;
    background: var(--knan-ink);
    color: #fff;
    font-size: 13px;
    letter-spacing: .04em;
    padding: 14px 22px;
    border-radius: var(--knan-radius);
    box-shadow: var(--knan-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--knan-ease), transform .25s var(--knan-ease);
    max-width: calc(100vw - 40px);
    text-align: center;
}

.knan-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.knan-toast i {
    color: var(--knan-blue-ink);
    margin-right: 7px;
}

/* ==========================================================================
   15. Housekeeping
   ========================================================================== */

/* Wishlist heart reflects saved state */
.add-actions .knan-wish.is-saved i,
.knan-wish.is-saved i {
    color: var(--knan-blue-ink);
}

/* Placeholder imagery still to be replaced with real Knan photography */
.knan-placeholder-img {
    position: relative;
}

.knan-placeholder-img:after {
    content: "PLACEHOLDER";
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    font-size: 9px;
    letter-spacing: .12em;
    background: rgba(11, 18, 32, .78);
    color: #fff;
    padding: 3px 7px;
    border-radius: 2px;
    pointer-events: none;
}

/* Hidden until JS decides otherwise */
[data-knan-hide] {
    display: none !important;
}

/* ==========================================================================
   16. Layout sections added by the Knan build (index.html / shop.html)
   ========================================================================== */

.knan-section {
    padding: 86px 0;
}

.knan-section--soft {
    background: var(--knan-bg-soft);
}

.knan-section .section-title {
    margin-bottom: 46px;
}

.knan-section .section-title h2 {
    font-size: 28px;
    margin: 0;
}

@media (max-width: 767px) {
    .knan-section {
        padding: 54px 0;
    }

    .knan-section .section-title {
        margin-bottom: 32px;
    }

    .knan-section .section-title h2 {
        font-size: 22px;
    }
}

/* Hero backgrounds ---------------------------------------------------------
   Real Knan campaign photography, built by tools/build_media.py from the
   client's own shoot. Subject sits right of frame; the copy sits left. */
/* Declaration order matters: plain JPEG first as the floor, then the
   prefixed form for older WebKit, then the standard one. A browser drops the
   declarations it cannot parse and keeps the last one it can. */
.bg-1 {
    background-image: url("../images/brand/hero-1.jpg");
    background-image: -webkit-image-set(
            url("../images/brand/hero-1.webp") type("image/webp"),
            url("../images/brand/hero-1.jpg") type("image/jpeg"));
    background-image: image-set(
            url("../images/brand/hero-1.webp") type("image/webp"),
            url("../images/brand/hero-1.jpg") type("image/jpeg"));
}

/* Slides two and three only get their background once the page has loaded.
   All three slides are in the DOM from the start, so declaring the images
   unconditionally made the browser fetch 1.08MB of hero before the first one
   had painted — and slide two is seven seconds away. */
.knan-heroes-ready .bg-2 {
    background-image: url("../images/brand/hero-2.jpg");
    background-image: -webkit-image-set(
            url("../images/brand/hero-2.webp") type("image/webp"),
            url("../images/brand/hero-2.jpg") type("image/jpeg"));
    background-image: image-set(
            url("../images/brand/hero-2.webp") type("image/webp"),
            url("../images/brand/hero-2.jpg") type("image/jpeg"));
}

.knan-heroes-ready .bg-3 {
    background-image: url("../images/brand/hero-3.jpg");
    background-image: -webkit-image-set(
            url("../images/brand/hero-3.webp") type("image/webp"),
            url("../images/brand/hero-3.jpg") type("image/jpeg"));
    background-image: image-set(
            url("../images/brand/hero-3.webp") type("image/webp"),
            url("../images/brand/hero-3.jpg") type("image/jpeg"));
}

/* Until then they show the hero ground rather than a white flash. */
.bg-2,
.bg-3 {
    background-color: var(--knan-hero-bg);
}

@media (max-width: 991px) {

    .bg-1,
    .bg-2 {
        background-position: 70% center;
    }
}

/* Category cards ---------------------------------------------------------- */

.knan-cat-card {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--knan-radius);
    background: var(--knan-ink);
    margin-bottom: 30px;
}

.knan-cat-card img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--knan-ease), opacity .3s var(--knan-ease);
    opacity: .82;
}

.knan-cat-card:hover img {
    transform: scale(1.05);
    opacity: .68;
}

.knan-cat-card_body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 26px 24px;
    background: linear-gradient(to top, rgba(8, 14, 26, .82), rgba(8, 14, 26, 0));
    color: #fff;
}

.knan-cat-card_title {
    display: block;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}

.knan-cat-card_sub {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
    margin-top: 4px;
}

@media (max-width: 767px) {
    .knan-cat-card img {
        height: 260px;
    }
}

/* Story strip ------------------------------------------------------------- */

.knan-story {
    padding: 0 0 86px;
}

.knan-story_img img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
    border-radius: var(--knan-radius);
}

.knan-story_content {
    padding-left: 46px;
}

.knan-story_content h2 {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 20px;
}

.knan-story_content p {
    margin-bottom: 16px;
    line-height: 27px;
}

.knan-story_content .kenne-btn {
    margin-top: 10px;
}

@media (max-width: 991px) {
    .knan-story {
        padding-bottom: 54px;
    }

    .knan-story_content {
        padding-left: 0;
        margin-top: 32px;
    }

    .knan-story_img img {
        height: 320px;
    }
}

/* Why-Knan cards ---------------------------------------------------------- */

.knan-reason {
    text-align: center;
    padding: 34px 22px;
    border: 1px solid var(--knan-line);
    border-radius: var(--knan-radius);
    height: 100%;
    margin-bottom: 30px;
    background: #fff;
}

.knan-reason i {
    font-size: 30px;
    color: var(--knan-blue-ink);
    display: block;
    margin-bottom: 16px;
}

.knan-reason h4 {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.knan-reason p {
    font-size: 13px;
    line-height: 24px;
    margin: 0;
}

.knan-size-prompt {
    text-align: center;
    margin-top: 26px;
    padding-top: 34px;
    border-top: 1px solid var(--knan-line);
}

.knan-size-prompt p {
    margin-bottom: 18px;
}

/* WhatsApp CTA band ------------------------------------------------------- */

.knan-cta-band {
    background: var(--knan-ink);
    color: rgba(255, 255, 255, .74);
    padding: 66px 0;
}

.knan-cta-band h2 {
    color: #fff;
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 16px;
}

.knan-cta-band .knan-lead {
    color: rgba(255, 255, 255, .74);
    margin: 0;
}

.knan-cta-band_phone {
    margin: 16px 0 0;
    font-size: 14px;
    letter-spacing: .06em;
}

.knan-cta-band_phone a {
    color: rgba(255, 255, 255, .74) !important;
}

.knan-cta-band_phone a:hover {
    color: var(--knan-blue-ink) !important;
}

@media (max-width: 991px) {
    .knan-cta-band {
        padding: 48px 0;
        text-align: center;
    }

    .knan-cta-band h2 {
        font-size: 22px;
    }

    .knan-cta-band .col-lg-5 {
        margin-top: 26px;
    }
}

/* Shop toolbar ------------------------------------------------------------ */

.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    margin-bottom: 34px;
    border-bottom: 1px solid var(--knan-line);
}

.shop-toolbar_count {
    margin: 0;
    font-size: 13px;
}

.shop-toolbar_count span {
    color: var(--knan-ink);
    font-weight: 500;
}

.shop-toolbar_sort {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shop-toolbar_sort label {
    margin: 0;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--knan-ink-soft);
}

.shop-toolbar_sort select {
    border: 1px solid var(--knan-line);
    border-radius: var(--knan-radius);
    padding: 9px 12px;
    font-size: 13px;
    color: var(--knan-ink);
    background: #fff;
    min-width: 168px;
}

.shop-toolbar_sort select:focus {
    outline: none;
    border-color: var(--knan-blue);
}

/* Shop sidebar ------------------------------------------------------------ */

.sidebar-categories_menu ul li.active>a {
    color: var(--knan-blue-ink);
    font-weight: 500;
}

.knan-sidebar-help {
    border: 1px solid var(--knan-line);
    border-radius: var(--knan-radius);
    padding: 22px;
    background: var(--knan-bg-soft);
}

.knan-sidebar-help p {
    font-size: 13px;
    line-height: 23px;
    margin-bottom: 16px;
}

.knan-sidebar-help .knan-btn-wa {
    width: 100%;
    padding: 13px 18px;
    font-size: 12px;
}

.knan-sidebar-help_link {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Product page thumbnails ------------------------------------------------- */

.knan-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.knan-thumb {
    width: 84px;
    border: 1px solid var(--knan-line);
    border-radius: var(--knan-radius);
    overflow: hidden;
    display: block;
    background: var(--knan-bg-soft);
}

.knan-thumb.is-active {
    border-color: var(--knan-ink);
}

.knan-thumb img {
    width: 100%;
    display: block;
}

/* Utility ----------------------------------------------------------------- */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   17. Product page
   ========================================================================== */

.knan-main-image {
    background: var(--knan-bg-soft);
    border-radius: var(--knan-radius);
    overflow: hidden;
}

.knan-main-image img {
    width: 100%;
    display: block;
}

.sp-content .sp-heading h5 {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 10px;
}

.sp-content .reference {
    font-size: 12px;
    letter-spacing: .06em;
    color: #9aa0ab;
    display: block;
    margin-bottom: 14px;
}

.sp-content .price-box {
    margin-bottom: 16px;
}

.sp-content .price-box .new-price {
    font-size: 24px;
    font-weight: 500;
}

.sp-content .price-box .old-price {
    font-size: 16px;
    margin-left: 10px;
}

.knan-buy-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0 16px;
}

.knan-buy-actions .kenne-btn,
.knan-buy-actions .knan-btn-wa {
    flex: 1 1 220px;
    text-align: center;
    justify-content: center;
    padding: 15px 26px;
}

.knan-save-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    letter-spacing: .04em;
}

.knan-save-link i {
    font-size: 17px;
}

.knan-save-link.is-saved i {
    color: var(--knan-blue-ink);
}

/* Description / fabric / delivery tabs */
.knan-tabs .product-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--knan-line);
    padding: 0;
    margin: 0 0 30px;
    list-style: none;
}

.knan-tabs .product-menu li a {
    display: block;
    padding: 14px 22px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--knan-ink-soft) !important;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.knan-tabs .product-menu li a.active {
    color: var(--knan-ink) !important;
    border-bottom-color: var(--knan-blue);
}

.knan-tabs .product-description p {
    margin-bottom: 14px;
    line-height: 26px;
    max-width: 78ch;
}

.knan-tabs .product-description strong {
    color: var(--knan-ink);
    font-weight: 500;
}

@media (max-width: 991px) {
    .sp-content {
        margin-top: 36px;
    }
}

/* ==========================================================================
   18. Cart / checkout / contact forms
   ========================================================================== */

.knan-fullwidth-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 12px;
}

.knan-cart-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.knan-cart-clear {
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--knan-ink-soft) !important;
}

.knan-cart-clear:hover {
    color: var(--knan-danger) !important;
}

.cart-page-total {
    border: 1px solid var(--knan-line);
    border-radius: var(--knan-radius);
    padding: 28px;
    background: #fff;
}

.cart-page-total h2 {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.cart-page-total>ul {
    padding: 0;
    margin: 0 0 20px;
    list-style: none;
}

.cart-page-total>ul>li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--knan-line);
    font-size: 14px;
}

.cart-page-total>ul>li:last-child {
    border-bottom: 0;
    font-weight: 500;
    color: var(--knan-ink);
    font-size: 16px;
}

.knan-pay-note {
    font-size: 12px;
    line-height: 21px;
    color: var(--knan-ink-soft);
    margin: 14px 0 0;
}

.knan-optional {
    color: #9aa0ab;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.checkout-form-list label,
.knan-contact-form label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--knan-ink);
    margin-bottom: 8px;
}

.checkout-form-list input,
.checkout-form-list textarea,
.checkout-form-list select {
    width: 100%;
    border: 1px solid var(--knan-line);
    border-radius: var(--knan-radius);
    padding: 13px 15px;
    font-size: 14px;
    color: var(--knan-ink);
    background: #fff;
    margin-bottom: 20px;
    transition: border-color .2s var(--knan-ease);
}

.checkout-form-list input:focus,
.checkout-form-list textarea:focus,
.checkout-form-list select:focus {
    outline: none;
    border-color: var(--knan-blue);
}

.checkbox-form h3,
.your-order h3 {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--knan-line);
    margin-bottom: 24px;
}

.your-order {
    border: 1px solid var(--knan-line);
    border-radius: var(--knan-radius);
    padding: 28px;
    background: #fff;
}

.your-order-table table {
    width: 100%;
    margin-bottom: 24px;
}

.your-order-table th,
.your-order-table td {
    padding: 12px 0;
    border-bottom: 1px solid var(--knan-line);
    font-size: 13px;
    text-align: left;
}

.your-order-table td.product-total,
.your-order-table th:last-child {
    text-align: right;
}

.your-order-table .order-total th,
.your-order-table .order-total td {
    font-size: 16px;
    color: var(--knan-ink);
    border-bottom: 0;
}

.knan-method input[type="radio"] {
    margin-right: 6px;
}

@media (max-width: 991px) {
    .your-order {
        margin-top: 34px;
    }
}

/* Contact page ------------------------------------------------------------ */

.knan-contact-info h2 {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 16px;
}

.knan-contact-info .knan-footer-contact li {
    margin-bottom: 20px;
}

.knan-contact-info .knan-footer-contact strong {
    color: var(--knan-ink);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.knan-contact-form {
    border: 1px solid var(--knan-line);
    border-radius: var(--knan-radius);
    padding: 34px;
    background: #fff;
}

.knan-contact-form h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 6px;
}

@media (max-width: 991px) {
    .knan-contact-form {
        margin-top: 40px;
        padding: 26px;
    }
}

/* ==========================================================================
   19. About / FAQ / size guide / 404
   ========================================================================== */

.knan-value {
    display: flex;
    gap: 18px;
    padding: 28px;
    border: 1px solid var(--knan-line);
    border-radius: var(--knan-radius);
    background: #fff;
    margin-bottom: 30px;
    height: calc(100% - 30px);
}

.knan-value i {
    font-size: 26px;
    color: var(--knan-blue-ink);
    line-height: 1.2;
    flex-shrink: 0;
}

.knan-value h4 {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.knan-value p {
    font-size: 13px;
    line-height: 24px;
    margin: 0;
}

.knan-faq-group {
    margin-bottom: 46px;
}

.knan-faq-group_title {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--knan-blue-ink);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--knan-line);
    margin-bottom: 18px;
}

.knan-faq-group .accordion-item {
    border: 1px solid var(--knan-line);
    border-radius: var(--knan-radius);
    margin-bottom: 10px;
    background: #fff;
}

.knan-faq-group .accordion-button {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 18px 46px 18px 22px;
    font-size: 14px;
    font-weight: 500;
    color: var(--knan-ink);
    position: relative;
    cursor: pointer;
}

.knan-faq-group .accordion-button:after {
    content: "\f218";
    font-family: "Ionicons";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--knan-blue-ink);
    transition: transform .25s var(--knan-ease);
}

.knan-faq-group .accordion-button:not(.collapsed):after {
    /* The glyph is a plus; a 45° turn reads as a close/collapse affordance
       without depending on a separate minus codepoint being present. */
    transform: translateY(-50%) rotate(45deg);
}

.knan-faq-group .accordion-body {
    padding: 0 22px 20px;
}

.knan-faq-group .accordion-body p {
    font-size: 14px;
    line-height: 26px;
    margin: 0;
}

.knan-size-block {
    margin-bottom: 40px;
}

.knan-size-block h3 {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.knan-404-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 26px;
}

.error .knan-pay-note a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   20. Section-title override
   The vendor .section-title is a flex row with a hairline rule running
   through it, which throws the eyebrow left and the heading right. Our
   sections stack and centre instead.
   ========================================================================== */

.knan-section .section-title,
.knan-story .section-title {
    display: block;
    text-align: center;
}

.knan-section .section-title:before,
.knan-story .section-title:before {
    display: none;
}

.knan-section .section-title .knan-eyebrow {
    margin-bottom: 10px;
}

/* Breadcrumb strip ---------------------------------------------------------- */

.breadcrumb-area {
    background: var(--knan-bg-soft);
    padding: 56px 0;
    text-align: center;
}

.breadcrumb-content h2 {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: .04em;
    margin-bottom: 12px;
}

.breadcrumb-content ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.breadcrumb-content ul li+li:before {
    content: "/";
    margin-right: 8px;
    color: #b9bec6;
}

.breadcrumb-content ul li.active {
    color: var(--knan-blue-ink);
}

@media (max-width: 767px) {
    .breadcrumb-area {
        padding: 36px 0;
    }

    .breadcrumb-content h2 {
        font-size: 20px;
    }
}

/* ==========================================================================
   21. Transparent header over the hero
   The hero is pale, so the overlaid nav is ink rather than white. Only the
   homepage uses this header; inner pages use the two-row white header.
   ========================================================================== */

.transparent-header .main-nav>ul>li>a,
.transparent-header .header-right_area ul li a,
.transparent-header .header-right_area ul li a i {
    color: var(--knan-ink) !important;
}

.transparent-header .main-nav>ul>li>a:hover,
.transparent-header .header-right_area ul li a:hover,
.transparent-header .header-right_area ul li a:hover i {
    color: var(--knan-blue-ink) !important;
}

.transparent-header .main-nav>ul>li .kenne-dropdown>li>a {
    color: var(--knan-ink) !important;
}

.transparent-header .main-nav>ul>li .kenne-dropdown>li>a:hover {
    color: var(--knan-blue-ink) !important;
}

.transparent-header .main-nav>ul>li>a,
.header-sticky .main-nav>ul>li>a {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.transparent-header .transparent-header_nav {
    padding: 34px 0 0;
}

/* Cart count badge */
.minicart-count_area .item-count {
    background: var(--knan-blue);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
}

/* ==========================================================================
   22. Vertical rhythm + carousel controls
   ========================================================================== */

/* Two stacked sections were doubling their padding into a ~240px void. */
.knan-section+.knan-section,
.knan-section+.product-area {
    padding-top: 0;
}

/* Cards already carry a 30px bottom margin — don't pay for it twice. */
.knan-section .row>[class*="col-"]>.knan-cat-card:last-child {
    margin-bottom: 0;
}

.knan-section .section-title+.row {
    margin-bottom: -30px;
}

/* Slick arrows: the template's default is a bare chevron adrift in the
   margin. Make them real controls. */
.kenne-element-carousel .slick-arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--knan-line);
    color: var(--knan-ink);
    font-size: 17px;
    box-shadow: var(--knan-shadow);
    transition: all .25s var(--knan-ease);
    opacity: 0;
}

.kenne-element-carousel:hover .slick-arrow {
    opacity: 1;
}

.kenne-element-carousel .slick-arrow:hover {
    background: var(--knan-ink);
    border-color: var(--knan-ink);
    color: #fff;
}

.kenne-element-carousel .slick-prev {
    left: -14px;
}

.kenne-element-carousel .slick-next {
    right: -14px;
}

/* The hero's own arrows sit over imagery and should always be visible. */
.home-slider .slick-arrow {
    opacity: 1;
    top: 50%;
}

.home-slider .slick-prev {
    left: 26px;
}

.home-slider .slick-next {
    right: 26px;
}

@media (max-width: 767px) {

    .kenne-element-carousel .slick-arrow,
    .home-slider .slick-arrow {
        display: none !important;
    }
}

/* Product carousel needs breathing room between cards. */
.kenne-element-carousel .slick-slide>div {
    padding: 0 15px;
}

.kenne-element-carousel .slick-list {
    margin: 0 -15px;
}

.home-slider .slick-slide>div {
    padding: 0;
}

.home-slider .slick-list {
    margin: 0;
}

/* Sale / new stickers were overhanging the card corner. */
.product-img .sticker,
.product-img .sticker-2 {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    z-index: 2;
}

/* ==========================================================================
   23. Hero arrows + odds and ends
   The hero slider uses .tty-slick-text-btn, not .slick-arrow, and the vendor
   stacks both buttons at right:5%. Split them to either edge.
   ========================================================================== */

.home-slider .tty-slick-text-btn {
    top: 50% !important;
    bottom: auto !important;
    width: 46px;
    height: 46px;
    line-height: 46px;
    font-size: 17px;
    background-color: rgba(255, 255, 255, .92);
    color: var(--knan-ink);
    transition: all .25s var(--knan-ease);
}

.home-slider .tty-slick-text-btn:hover {
    background-color: var(--knan-ink);
    color: #fff;
}

.home-slider .tty-slick-text-btn.tty-slick-text-prev {
    left: 30px;
    right: auto;
}

.home-slider .tty-slick-text-btn.tty-slick-text-next {
    right: 30px;
    left: auto;
}

@media (max-width: 767px) {
    .home-slider .tty-slick-text-btn {
        display: none !important;
    }
}

/* Centred section buttons — .kenne-btn is inline-block but the template
   floats some variants, which drags them left. */
.knan-section .text-center .kenne-btn,
.knan-size-prompt .kenne-btn,
.knan-empty .kenne-btn {
    float: none;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

/* Keep card names on one baseline when one wraps to two lines. */
.product-item .product-desc_info .product-name {
    min-height: 40px;
    margin-bottom: 6px;
}

.product-item .product-desc_info {
    text-align: center;
    padding-top: 18px;
}

/* ==========================================================================
   24. Cart table sizing
   The vendor sheet sized thumbnails against its own small-size assets; our
   product photography is full resolution, so constrain it here.
   ========================================================================== */

.table-content table td.kenne-product-thumbnail {
    width: 110px;
    padding: 16px 12px;
}

.table-content table td.kenne-product-thumbnail img {
    width: 86px;
    height: 108px;
    object-fit: cover;
    display: block;
    border-radius: var(--knan-radius);
    background: var(--knan-bg-soft);
}

.table-content table {
    margin-bottom: 40px;
}

.table-content table th {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--knan-ink);
    padding: 16px 12px;
    border-bottom: 1px solid var(--knan-line);
    white-space: nowrap;
}

.table-content table td {
    padding: 16px 12px;
    border-bottom: 1px solid var(--knan-line);
    vertical-align: middle;
    font-size: 14px;
}

.table-content table td.kenne-product-name {
    min-width: 190px;
}

.table-content table td.kenne-product-name a {
    font-weight: 500;
    color: var(--knan-ink);
}

.table-content table td.quantity {
    width: 120px;
}

.table-content table td.quantity .cart-plus-minus {
    margin: 0;
}

.table-content table td.quantity input {
    width: 72px;
    padding: 9px 10px;
    border: 1px solid var(--knan-line);
    border-radius: var(--knan-radius);
    text-align: center;
    font-size: 14px;
}

.table-content table td.product-subtotal .amount {
    font-weight: 500;
    color: var(--knan-ink);
}

.table-content table td.kenne-product-remove {
    width: 46px;
    text-align: center;
}

.table-content table td.kenne-product-remove a {
    color: #b9bec6 !important;
    font-size: 18px;
}

.table-content table td.kenne-product-remove a:hover {
    color: var(--knan-danger) !important;
}

/* Minicart thumbnails need the same treatment. */
.minicart-list>li.minicart-product .product-item_img img {
    width: 68px;
    height: 84px;
    object-fit: cover;
    display: block;
}

.minicart-item_total {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    color: var(--knan-ink);
    padding: 16px 0;
    border-top: 1px solid var(--knan-line);
}

/* ==========================================================================
   25. Button hardening
   `.cart-page-total a` in the vendor sheet forces a dark background and
   capitalised text onto any link inside the totals box, which swallowed the
   WhatsApp button's colour. Assert ours wherever it lands.
   ========================================================================== */

a.knan-btn-wa,
button.knan-btn-wa,
.cart-page-total a.knan-btn-wa,
.your-order a.knan-btn-wa,
.knan-method button.knan-btn-wa {
    background-color: var(--knan-whatsapp) !important;
    border: 1px solid var(--knan-whatsapp) !important;
    color: #fff !important;
    text-transform: uppercase !important;
    padding: 15px 32px !important;
    margin-top: 12px;
}

a.knan-btn-wa:hover,
button.knan-btn-wa:hover,
.cart-page-total a.knan-btn-wa:hover,
.your-order a.knan-btn-wa:hover,
.knan-method button.knan-btn-wa:hover {
    background-color: #1da851 !important;
    border-color: #1da851 !important;
}

.cart-page-total a.kenne-btn.knan-btn-gold {
    background-color: var(--knan-blue) !important;
    border-color: var(--knan-blue) !important;
    text-transform: uppercase !important;
    padding: 15px 32px !important;
}

.cart-page-total a.kenne-btn.knan-btn-gold:hover {
    background-color: var(--knan-blue-dark) !important;
    border-color: var(--knan-blue-dark) !important;
}

/* Totals list: the vendor floats the value, which fights our flex row. */
.cart-page-total>ul>li span {
    float: none;
}

.cart-page-total>ul {
    border: 0;
}

.cart-page-total>ul li {
    padding: 11px 0;
    font-weight: 400;
}

/* ==========================================================================
   26. Shop sidebar + grid spacing
   ========================================================================== */

.kenne-content_wrapper {
    padding: 70px 0 90px;
}

.kenne-content_wrapper .kenne-sidebar-catagories_area .kenne-sidebar_categories {
    margin-bottom: 40px;
}

.kenne-content_wrapper .kenne-sidebar-catagories_area .kenne-sidebar_categories .kenne-categories_title h5 {
    padding-bottom: 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.sidebar-categories_menu ul li>a {
    display: block;
    padding: 7px 0;
    font-size: 14px;
}

.kenne-content_wrapper .shop-product-wrap.grid .product-item {
    margin-bottom: 40px;
}

@media (max-width: 991px) {
    .kenne-content_wrapper {
        padding: 40px 0 60px;
    }

    .kenne-sidebar-catagories_area {
        margin-top: 40px;
    }
}

/* ==========================================================================
   27. Transparent header on small screens
   Below 991px the vendor switches .transparent-header from absolute to
   relative, so it stops overlaying the hero. The hero ground is pale, so
   carry that same tone up into the bar and keep the ink wordmark.
   ========================================================================== */

@media (max-width: 991px) {
    .transparent-header {
        background: var(--knan-hero-bg);
    }

    .transparent-header .transparent-header_nav {
        padding: 18px 0;
    }

    .transparent-header .header-logo_area img {
        width: 124px;
    }
}

/* Mobile menu drawer sits on ink — swap to the light mark there. */
.mobile-menu_wrapper .offcanvas-menu-inner {
    background: var(--knan-ink);
}

.mobile-menu_wrapper .offcanvas-navigation .mobile-menu li>a,
.mobile-menu_wrapper .offcanvas-navigation .mobile-menu li>a .mm-text {
    color: rgba(255, 255, 255, .88) !important;
}

.mobile-menu_wrapper .offcanvas-navigation .mobile-menu li>a:hover,
.mobile-menu_wrapper .offcanvas-navigation .mobile-menu li>a:hover .mm-text {
    color: var(--knan-blue-ink) !important;
}

.mobile-menu_wrapper .offcanvas-navigation .mobile-menu li>.menu-expand {
    color: rgba(255, 255, 255, .7);
}

/* Keep the floating WhatsApp button clear of category cards on mobile. */
@media (max-width: 991px) {
    .knan-cat-card {
        margin-bottom: 20px;
    }
}

/* Bootstrap draws its own SVG chevron on .accordion-button::after, which
   doubled up with ours. Suppress the image, keep the icon font. */
.knan-faq-group .accordion-button:after {
    background-image: none !important;
    width: auto;
    height: auto;
    margin-left: 0;
    flex-shrink: 0;
}

.knan-faq-group .accordion-button:focus {
    outline: none;
    box-shadow: none;
}

.knan-faq-group .accordion-button:not(.collapsed) {
    background: transparent;
    color: var(--knan-blue-ink);
    box-shadow: none;
}

/* ==========================================================================
   28. Elegance pass
   Editorial serif for the display moments, quieter tracked sans everywhere
   else, and more air between sections. Applied last so it settles the
   earlier rules rather than fighting them.
   ========================================================================== */

/* -- Display type --------------------------------------------------------- */

/* The serif is reserved for the few genuinely editorial lines: the hero,
   the story headline, and the CTA band. Section titles stay tracked sans so
   the page does not read as a wedding invitation. */
.knan-story_content h2,
.knan-cta-band h2,
.knan-contact-info h2 {
    font-family: var(--knan-display);
    font-weight: 400;
    font-size: 42px;
    line-height: 1.18;
    letter-spacing: -.01em;
    margin-bottom: 24px;
}

@media (max-width: 991px) {

    .knan-story_content h2,
    .knan-cta-band h2,
    .knan-contact-info h2 {
        font-size: 30px;
    }
}

/* Section titles: smaller, more tracked, lighter. Confidence from space. */
.knan-section .section-title h2,
.knan-story .section-title h2 {
    font-family: 'Rubik', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--knan-ink);
}

.knan-section .section-title .knan-eyebrow {
    font-size: 10px;
    letter-spacing: .26em;
    color: var(--knan-ink-soft);
    margin-bottom: 14px;
}

/* A hairline under the section title, centred — a quiet full stop. */
.knan-section .section-title {
    margin-bottom: 58px;
}

.knan-section .section-title h2:after {
    content: "";
    display: block;
    width: 34px;
    height: 1px;
    background: var(--knan-blue);
    margin: 20px auto 0;
}

/* -- Air ------------------------------------------------------------------ */

.knan-section {
    padding: 118px 0;
}

.knan-story {
    padding: 0 0 118px;
}

.knan-cta-band {
    padding: 96px 0;
}

@media (max-width: 991px) {
    .knan-section {
        padding: 68px 0;
    }

    .knan-story {
        padding-bottom: 68px;
    }

    .knan-cta-band {
        padding: 60px 0;
    }

    .knan-section .section-title {
        margin-bottom: 38px;
    }
}

/* -- Product cards: lighter, more room ------------------------------------ */

.product-item .single-product:hover {
    box-shadow: none;
    border-color: transparent;
}

.product-item .product-img {
    background: var(--knan-bg-soft);
}

.product-item .product-desc_info {
    padding-top: 24px;
}

.product-name a {
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--knan-ink);
}

.price-box .new-price {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .04em;
}

.price-box .old-price {
    font-size: 13px;
}

/* Stickers: a quiet tracked label rather than a shouted tag. */
.product-img .sticker,
.product-img .sticker-2 {
    background: rgba(255, 255, 255, .94);
    color: var(--knan-ink);
    font-size: 9px;
    letter-spacing: .18em;
    padding: 7px 12px;
    border-radius: 0;
}

.product-img .sticker-2 {
    background: var(--knan-ink);
    color: #fff;
}

/* -- Trust bar ------------------------------------------------------------ */

.service-area .service-nav {
    border-top: 0;
}

.service-item {
    padding: 46px 10px;
    justify-content: center;
    text-align: left;
}

.service-item .content h4 {
    font-size: 11px;
    letter-spacing: .2em;
}

.service-item .content p {
    font-size: 12px;
    color: var(--knan-ink-soft);
}

/* -- Category cards ------------------------------------------------------- */

.knan-cat-card img {
    height: 460px;
}

.knan-cat-card_title {
    font-family: var(--knan-display);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: none;
}

.knan-cat-card_body {
    padding: 34px 32px 30px;
}

@media (max-width: 991px) {
    .knan-cat-card img {
        height: 300px;
    }
}

/* -- Buttons: less shadow, more restraint --------------------------------- */

.kenne-btn:hover {
    box-shadow: none;
    transform: translateY(-2px);
}

.knan-btn-wa:hover {
    box-shadow: none;
}

/* -- Breadcrumb: an editorial page title ---------------------------------- */

.breadcrumb-area {
    padding: 92px 0 84px;
    background: var(--knan-bg-soft);
}

.breadcrumb-content h2 {
    font-family: var(--knan-display);
    font-size: 44px;
    font-weight: 400;
    letter-spacing: -.01em;
    text-transform: none;
    margin-bottom: 16px;
}

@media (max-width: 991px) {
    .breadcrumb-area {
        padding: 54px 0 50px;
    }

    .breadcrumb-content h2 {
        font-size: 30px;
    }
}

/* -- Product page --------------------------------------------------------- */

.sp-content .sp-heading h5 {
    font-family: var(--knan-display);
    font-size: 34px;
    font-weight: 400;
    letter-spacing: -.005em;
}

.sp-content .price-box .new-price {
    font-size: 22px;
}

/* -- Footer --------------------------------------------------------------- */

.kenne-footer_area {
    background: #fff;
    border-top: 1px solid var(--knan-line);
}

.footer-top_area {
    padding: 86px 0 70px;
}

.footer-widgets_title h4 {
    letter-spacing: .22em;
    font-size: 11px;
}

/* ==========================================================================
   29. Elegance pass — corrections
   ========================================================================== */

/* The vendor sticker is a ribbon: a :before triangle hangs off the right
   edge. Against a card corner it just looks like a stray notch. */
.product-img .sticker:before,
.product-img .sticker-2:before {
    display: none;
}

/* Footer headings: the vendor selector is deeper than ours was, so it kept
   its 18px. Match the tracked-label scale used everywhere else. */
.kenne-footer_area .footer-top_area .footer-widgets_wrap .footer-widgets_title>h4 {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--knan-ink);
    margin-bottom: 22px;
}

/* Trust bar: the labels were wrapping to two lines at four-up, which left
   the row on ragged baselines. Smaller, tighter, and top-aligned. */
.service-item {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
}

.service-item .content h4 {
    font-size: 10px;
    letter-spacing: .16em;
    line-height: 1.5;
    margin-bottom: 4px;
}

.service-item .icon i {
    font-size: 22px;
    line-height: 1.4;
}

@media (min-width: 1200px) {
    .service-item {
        justify-content: center;
    }
}

/* Promise cards: drop the boxes. On a page this airy the borders read as
   clutter — space alone separates them. */
.knan-reason {
    border: 0;
    background: transparent;
    padding: 10px 26px;
}

.knan-reason i {
    font-size: 26px;
    margin-bottom: 20px;
}

.knan-reason h4 {
    font-size: 11px;
    letter-spacing: .2em;
    margin-bottom: 14px;
}

.knan-reason p {
    font-size: 13px;
    line-height: 26px;
    max-width: 34ch;
    margin: 0 auto;
}

/* Same treatment for the about page's value cards. */
.knan-value {
    border: 0;
    background: transparent;
    padding: 10px 26px 30px 0;
}

.knan-value h4 {
    font-size: 11px;
    letter-spacing: .2em;
}

/* Size-prompt divider: lighter, more space. */
.knan-size-prompt {
    margin-top: 54px;
    padding-top: 54px;
}

/* ==========================================================================
   30. Hero on small screens
   ========================================================================== */

@media (max-width: 991px) {

    /* .slide-content is absolutely positioned, so its containing block is the
       full-width .slide-item, not the padded .container — without a cap the
       paragraph runs off the right edge of the phone. */
    .home-slider .slide-item .slide-content {
        max-width: calc(100vw - 60px);
    }

    .home-slider .slide-item .slide-content>p,
    .home-slider .slide-item .slide-content>p.short-desc,
    .home-slider .slide-item .slide-content>p.short-desc-2 {
        max-width: 100%;
    }
}

/* The announcement bar wraps to two lines on narrow screens, so the height
   the hero subtracts has to grow with it or the hero overshoots the fold. */
@media (max-width: 767px) {
    :root {
        --knan-announce-h: 62px;
    }
}

@media (max-width: 575px) {
    :root {
        --knan-announce-h: 58px;
    }
}

/* ==========================================================================
   31. Blue-forward palette
   The client asked for the brand blue to lead rather than the dark bands, so
   the announcement bar, CTA band, drawer and primary buttons carry the blue
   and ink is kept for body copy.
   ========================================================================== */

/* The one keyframe the template needs. Replaces animate.min.css (71KB). */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-38px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* -- Bands ---------------------------------------------------------------- */

.knan-announce {
    background: var(--knan-blue);
    color: #fff;
}

.knan-announce strong,
.knan-announce a:hover {
    color: #fff !important;
    font-weight: 600;
}

.knan-cta-band {
    background: var(--knan-blue);
    color: rgba(255, 255, 255, .92);
}

.knan-cta-band h2,
.knan-cta-band .knan-lead {
    color: #fff;
}

.knan-cta-band .knan-eyebrow {
    color: rgba(255, 255, 255, .82);
}

.knan-cta-band_phone a {
    color: rgba(255, 255, 255, .9) !important;
}

.knan-cta-band_phone a:hover {
    color: #fff !important;
}

/* On blue, the WhatsApp green fights. Use a white button instead. */
.knan-cta-band .knan-btn-wa,
.knan-cta-band a.knan-btn-wa {
    background-color: #fff !important;
    border-color: #fff !important;
    color: var(--knan-blue-ink) !important;
}

.knan-cta-band .knan-btn-wa:hover,
.knan-cta-band a.knan-btn-wa:hover {
    background-color: rgba(255, 255, 255, .88) !important;
    border-color: rgba(255, 255, 255, .88) !important;
    color: var(--knan-blue-ink) !important;
}

/* -- Buttons -------------------------------------------------------------- */

.kenne-btn {
    background-color: var(--knan-blue);
}

.kenne-btn:hover {
    background-color: var(--knan-blue-dark);
}

.knan-btn-gold {
    /* legacy class name, kept so existing markup keeps working */
    background-color: var(--knan-blue) !important;
    border-color: var(--knan-blue) !important;
}

.knan-btn-gold:hover {
    background-color: var(--knan-blue-dark) !important;
    border-color: var(--knan-blue-dark) !important;
}

.cart-page-total a.kenne-btn.knan-btn-gold,
.cart-page-total a.kenne-btn.knan-btn-gold:hover {
    background-color: var(--knan-blue) !important;
    border-color: var(--knan-blue) !important;
}

/* Hero button: blue outline that fills on hover. */
.slide-btn .kenne-btn {
    background-color: transparent;
    border-color: var(--knan-blue);
    color: var(--knan-blue-ink) !important;
}

.slide-btn .kenne-btn:hover {
    background-color: var(--knan-blue) !important;
    border-color: var(--knan-blue);
    color: #fff !important;
}

.kenne-btn.transparent-btn.transparent-btn-2 {
    border-color: var(--knan-blue);
    color: var(--knan-blue-ink) !important;
}

.kenne-btn.transparent-btn.transparent-btn-2:hover {
    background-color: var(--knan-blue) !important;
    color: #fff !important;
}

/* -- Accents that were ink -------------------------------------------------- */

.product-img .sticker-2 {
    background: var(--knan-blue);
}

.knan-size.is-active {
    background: var(--knan-blue);
    border-color: var(--knan-blue);
}

.knan-size-table thead th {
    background: var(--knan-blue);
}

.knan-swatch.is-active:after {
    border-color: var(--knan-blue);
}

.knan-social a:hover {
    background: var(--knan-blue);
    border-color: var(--knan-blue);
}

.knan-tabs .product-menu li a.active {
    color: var(--knan-blue-ink) !important;
    border-bottom-color: var(--knan-blue);
}

.knan-faq-group .accordion-button:not(.collapsed) {
    color: var(--knan-blue-ink);
}

.knan-toast i {
    color: var(--knan-blue-ink);
}

/* Mobile drawer: blue rather than near-black. */
.mobile-menu_wrapper .offcanvas-menu-inner {
    background: var(--knan-blue);
}

.mobile-menu_wrapper .offcanvas-navigation .mobile-menu li>a,
.mobile-menu_wrapper .offcanvas-navigation .mobile-menu li>a .mm-text {
    color: rgba(255, 255, 255, .94) !important;
}

.mobile-menu_wrapper .offcanvas-navigation .mobile-menu li>a:hover,
.mobile-menu_wrapper .offcanvas-navigation .mobile-menu li>a:hover .mm-text {
    color: #fff !important;
    opacity: .78;
}

/* Category card scrim: blue-tinted rather than flat black. */
.knan-cat-card {
    background: var(--knan-blue);
}

.knan-cat-card_body {
    background: linear-gradient(to top, rgba(0, 74, 130, .9), rgba(0, 74, 130, 0));
}

@media (max-width: 991px) {
    .transparent-header {
        background: var(--knan-blue);
    }

    .transparent-header .main-nav>ul>li>a,
    .transparent-header .header-right_area ul li a,
    .transparent-header .header-right_area ul li a i {
        color: #fff !important;
    }
}

/* ==========================================================================
   32. Preloader
   Replaces the template's spinner, which was hidden on window.load AFTER a
   hard-coded 2s delay — so every page sat behind a blank screen long after it
   was ready. This one is CSS-only (no image or webfont to wait on) and is
   dismissed on DOMContentLoaded.
   ========================================================================== */

.knan-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: opacity .4s ease, visibility .4s ease;
}

.knan-loader.is-done {
    opacity: 0;
    visibility: hidden;
}

.knan-loader_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.knan-loader_dots {
    display: flex;
    gap: 10px;
}

.knan-loader_dots i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--knan-blue);
    display: block;
    animation: knan-dot 1s ease-in-out infinite;
}

.knan-loader_dots i:last-child {
    animation-delay: .18s;
}

@keyframes knan-dot {

    0%,
    100% {
        transform: translateY(0);
        opacity: .35;
    }

    50% {
        transform: translateY(-9px);
        opacity: 1;
    }
}

.knan-loader_mark {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--knan-ink);
    padding-left: .34em;
}

/* The vendor spinner is gone; make sure its rules cannot reappear. */
.loading {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .knan-loader_dots i {
        animation: none;
        opacity: 1;
    }
}

/* ==========================================================================
   33. Image aspect ratio
   Product images carry intrinsic width/height attributes so the browser can
   reserve space (no layout shift while lazy-loading). The vendor sheet sets
   `width: 100%` on them with no height, so the 1000px height attribute was
   being taken literally and the cards grew enormous. Always pair the two.
   ========================================================================== */

.product-item .single-product .product-img img,
.kenne-content_wrapper .shop-product-wrap.grid .product-item .single-product .product-img img,
.knan-cat-card img,
.knan-main-image img,
.knan-thumb img,
.knan-story_img img {
    height: auto;
}

/* Cards keep a consistent 4:5 frame regardless of the photo supplied. */
.product-item .single-product .product-img {
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.product-item .single-product .product-img>a {
    display: block;
    height: 100%;
}

.product-item .single-product .product-img img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

/* Category cards keep their own ratio. */
.knan-cat-card img {
    height: 460px !important;
    object-fit: cover;
}

@media (max-width: 991px) {
    .knan-cat-card img {
        height: 300px !important;
    }
}

/* ==========================================================================
   34. Cart, checkout and order confirmation
   ========================================================================== */

.knan-alert {
    border-radius: var(--knan-radius);
    padding: 14px 18px;
    font-size: 14px;
    margin-bottom: 22px;
    border-left: 3px solid;
}

.knan-alert.is-ok {
    background: #eef7ff;
    border-color: var(--knan-blue);
    color: var(--knan-ink);
}

.knan-alert.is-error {
    background: #fdeeec;
    border-color: var(--knan-danger);
    color: #7a2018;
}

.knan-alert a {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--knan-blue-ink) !important;
    margin-left: 6px;
}

.knan-alert ul {
    margin: 8px 0 0 18px;
    padding: 0;
}

.knan-line-warn {
    display: block;
    font-size: 12px;
    color: var(--knan-danger);
    margin-top: 3px;
}

.knan-qty-form {
    margin: 0;
}

.knan-icon-btn {
    background: none;
    border: 0;
    padding: 0;
    font-size: 18px;
    color: #b9bec6;
    cursor: pointer;
    line-height: 1;
}

.knan-icon-btn:hover {
    color: var(--knan-danger);
}

button.knan-cart-clear {
    background: none;
    border: 0;
    padding: 0;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--knan-ink-soft);
    cursor: pointer;
}

button.knan-cart-clear:hover {
    color: var(--knan-danger);
}

.knan-cart-actions form {
    margin: 0;
}

/* -- Choices (delivery / payment) ----------------------------------------- */

.knan-choice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    cursor: pointer;
}

.knan-choice input {
    margin-top: 4px;
    flex-shrink: 0;
    accent-color: var(--knan-blue);
}

.knan-choice_note {
    display: block;
    font-size: 13px;
    color: var(--knan-ink-soft);
    margin-top: 4px;
}

.knan-method.knan-choice {
    padding: 18px 20px;
}

.knan-method.knan-choice:has(input:checked) {
    border-color: var(--knan-blue);
    background: #f5faff;
}

.knan-pay-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
}

.knan-choice--inline {
    align-items: center;
}

.knan-choice--inline input {
    margin-top: 0;
}

/* -- Order confirmation --------------------------------------------------- */

.knan-order-hero {
    text-align: center;
    padding-bottom: 42px;
    margin-bottom: 42px;
    border-bottom: 1px solid var(--knan-line);
}

.knan-order-hero i {
    font-size: 46px;
    color: var(--knan-blue-ink);
    display: block;
    margin-bottom: 16px;
}

.knan-order-hero h2 {
    font-family: var(--knan-display);
    font-size: 34px;
    font-weight: 400;
    margin-bottom: 14px;
}

.knan-order-hero .knan-lead {
    margin: 0 auto;
}

.knan-order-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 767px) {
    .knan-order-grid {
        grid-template-columns: 1fr;
    }
}

.knan-order-card {
    border: 1px solid var(--knan-line);
    border-radius: var(--knan-radius);
    padding: 26px 28px;
    background: #fff;
}

.knan-order-card h4 {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.knan-order-card dl {
    margin: 0 0 16px;
    font-size: 14px;
}

.knan-order-card dt {
    color: var(--knan-ink-soft);
    float: left;
    clear: left;
    width: 120px;
    font-weight: 400;
    padding: 4px 0;
}

.knan-order-card dd {
    color: var(--knan-ink);
    font-weight: 500;
    margin: 0 0 0 120px;
    padding: 4px 0;
}

.knan-order-table {
    width: 100%;
    font-size: 14px;
}

.knan-order-table td,
.knan-order-table th {
    padding: 12px 0;
    border-bottom: 1px solid var(--knan-line);
    text-align: left;
}

.knan-order-table .qty {
    width: 70px;
    color: var(--knan-ink-soft);
}

.knan-order-table .amt {
    width: 110px;
    text-align: right;
    color: var(--knan-ink);
}

.knan-order-table tfoot th {
    font-weight: 400;
    color: var(--knan-ink-soft);
}

.knan-order-table tfoot .is-total th,
.knan-order-table tfoot .is-total .amt {
    font-size: 17px;
    font-weight: 500;
    color: var(--knan-ink);
    border-bottom: 0;
}

/* Disabled add-to-bag reads as unavailable, not broken. */
.kenne-btn:disabled,
button.kenne-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
    transform: none !important;
}

/* -- Product page spacing ------------------------------------------------- */

.single-product-area {
    padding: 70px 0 30px;
}

.knan-tabs {
    padding-top: 20px;
}

.product-area.knan-section--soft {
    padding: 70px 0;
}

/* ==========================================================================
   35. Order tracking
   ========================================================================== */

.knan-track-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--knan-line);
}

.knan-track-head h3 {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
}

.knan-track-order {
    margin-bottom: 18px;
}

.knan-track-order_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--knan-line);
    margin-bottom: 14px;
}

.knan-track-ref {
    font-weight: 500;
    color: var(--knan-blue-ink) !important;
    letter-spacing: .04em;
}

.knan-track-date {
    display: block;
    font-size: 12px;
    color: var(--knan-ink-soft);
    margin-top: 3px;
}

.knan-status {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
    background: #eef2f7;
    color: var(--knan-ink-soft);
}

.knan-status--pending {
    background: #fff4e0;
    color: #8a5a00;
}

.knan-status--confirmed,
.knan-status--paid {
    background: #e8f0fb;
    color: var(--knan-blue-dark);
}

.knan-status--packed {
    background: #eae7fd;
    color: #4632b8;
}

.knan-status--delivered {
    background: #e6f6ec;
    color: #1e8e4b;
}

.knan-status--cancelled {
    background: #fdecea;
    color: #a02418;
}

.knan-track-items {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    font-size: 14px;
}

.knan-track-items li {
    padding: 5px 0;
}

.knan-track-items li span {
    color: var(--knan-ink-soft);
    font-size: 13px;
}

.knan-track-order_foot {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--knan-line);
    font-size: 14px;
}

.knan-track-order_foot strong {
    color: var(--knan-ink);
}

/* One-time code: wide, spaced, unmistakably a code field. */
.knan-code-input {
    font-size: 26px !important;
    letter-spacing: .5em;
    text-align: center;
    font-weight: 500;
    padding: 16px 12px !important;
}

/* ==========================================================================
   36. Hero video
   The client asked for a video playing behind the opening screen. It sits
   under the scrim and above the background image, and is only fetched on
   wider viewports — a 2.5MB autoplay background is real money on Zimbabwean
   mobile data, and the poster frame carries the same impression.
   ========================================================================== */

.knan-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    z-index: 0;
    display: none;
}

/* The client's brand film is a 720x1280 phone video. Stretched across a
   landscape desktop hero it upscales roughly 3x and reads as a blur, so the
   desktop hero uses the 2400px campaign still instead and the video plays
   where its aspect actually fits: a portrait viewport. It is attached by
   knan-hero.js, which also skips it on a metered connection. */
@media (max-width: 991px) {
    .knan-hero-video {
        display: block;
    }
}

/* Anyone who has asked their system to reduce motion gets the still. */
@media (prefers-reduced-motion: reduce) {
    .knan-hero-video {
        display: none;
    }
}

/* ==========================================================================
   37. Category cards at four across
   With four categories the row is 4-up on desktop, so the cards are narrower
   and the old fixed height read as a column rather than a card.
   ========================================================================== */

.knan-cat-card img {
    height: 380px !important;
}

@media (max-width: 1199px) {
    .knan-cat-card img {
        height: 340px !important;
    }
}

@media (max-width: 991px) {
    .knan-cat-card img {
        height: 300px !important;
    }
}

.knan-cat-card_title {
    font-size: 22px;
}

.knan-cat-card_body {
    padding: 26px 24px 22px;
}

/* ==========================================================================
   38. Paired action buttons
   The vendor .kenne-btn is a fixed 45px-high block; .knan-btn-wa sizes from
   padding. Side by side that gave two different heights on different
   baselines. Normalise both to one control size wherever they are paired.
   ========================================================================== */

.knan-buy-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin: 26px 0 18px;
}

.knan-buy-actions .kenne-btn,
.knan-buy-actions .knan-btn-wa,
.knan-buy-actions button.kenne-btn {
    flex: 1 1 220px;
    min-width: 0;
    width: auto;
    height: 54px !important;
    line-height: 1 !important;
    padding: 0 26px !important;
    margin: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: var(--knan-radius);
    text-align: center;
    white-space: nowrap;
}

/* Full-width stacked buttons (cart totals, checkout, order page) match too. */
.knan-fullwidth-btn,
a.knan-fullwidth-btn,
button.knan-fullwidth-btn {
    height: 54px !important;
    line-height: 1 !important;
    padding: 0 26px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

@media (max-width: 480px) {

    .knan-buy-actions .kenne-btn,
    .knan-buy-actions .knan-btn-wa,
    .knan-buy-actions button.kenne-btn {
        flex: 1 1 100%;
        letter-spacing: .08em;
    }
}

/* ==========================================================================
   39. Hero over real photography
   The old scrim was 82% white with dark type on it, tuned for the pale
   placeholder plates that used to sit behind the hero. The client's actual
   campaign photography is dark and saturated — terracotta seamless, grass,
   the cyan sweep — and a white wash over that renders as milky grey with
   grey type on it, which is what it did.

   Inverted: a dark scrim carrying light type. Anchored left, because the
   copy sits left and the subject cannot be moved off it — every hero source
   is a portrait frame cropped to 3:2, so the crop already uses the full
   width and there is no horizontal room to shift the subject into.
   ========================================================================== */

.home-slider .slide-item:before {
    background: linear-gradient(90deg,
            rgba(6, 12, 24, .78) 0%,
            rgba(6, 12, 24, .58) 38%,
            rgba(6, 12, 24, .12) 68%,
            rgba(6, 12, 24, 0) 100%);
}

.home-slider .slide-item .slide-content > span {
    /* The brand blue is too dark to sit on this scrim; the eyebrow goes to
       the pale tint of it instead so the hierarchy survives. */
    color: #9dc6f5;
}

.home-slider .slide-item .slide-content h2,
.home-slider .slide-item .slide-content > p.short-desc,
.home-slider .slide-item .slide-content > p.short-desc-2 {
    color: #fff;
}

.home-slider .slide-item .slide-content > p.short-desc,
.home-slider .slide-item .slide-content > p.short-desc-2 {
    color: rgba(255, 255, 255, .86);
}

/* The outline button needs to read against the photograph too. */
.home-slider .slide-item .slide-btn .kenne-btn {
    color: #fff;
    border-color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(2px);
}

.home-slider .slide-item .slide-btn .kenne-btn:hover,
.home-slider .slide-item .slide-btn .kenne-btn:focus-visible {
    color: var(--knan-ink);
    background: #fff;
    border-color: #fff;
}

/* Carousel arrows sit on the photograph, not on a pale ground. */
.home-slider .slick-arrow {
    background: rgba(6, 12, 24, .42);
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
}

.home-slider .slick-arrow:hover {
    background: #fff;
    color: var(--knan-ink);
}

.knan-scroll-cue {
    color: rgba(255, 255, 255, .82);
}

.knan-scroll-cue span {
    background: rgba(255, 255, 255, .6);
}

@media (max-width: 991px) {
    /* Portrait: the video plays full-bleed, so the scrim runs bottom-up
       instead of left-in — the copy sits low over the film. */
    .home-slider .slide-item:before {
        background: linear-gradient(180deg,
                rgba(6, 12, 24, .34) 0%,
                rgba(6, 12, 24, .62) 58%,
                rgba(6, 12, 24, .84) 100%);
    }
}

/* --- Header and CTA over the hero photograph -------------------------------
   Section 21 set the overlaid nav to ink because the hero used to be a pale
   plate. It is now a dark, saturated photograph, so the nav, the burger, the
   cart badge and the hero CTA all invert with it. Desktop only: below 991px
   the vendor drops the header onto a solid blue bar, which already carries
   white type. */

@media (min-width: 992px) {

    .transparent-header .main-nav > ul > li > a,
    .transparent-header .header-right_area ul li a,
    .transparent-header .header-right_area ul li a i {
        color: #fff !important;
    }

    .transparent-header .main-nav > ul > li > a:hover,
    .transparent-header .header-right_area ul li a:hover,
    .transparent-header .header-right_area ul li a:hover i {
        color: #9dc6f5 !important;
    }

    /* The dropdown is a white panel, so its items stay ink. */
    .transparent-header .main-nav > ul > li .kenne-dropdown > li > a {
        color: var(--knan-ink) !important;
    }

    /* Burger bars are drawn with background-color, not colour. */
    .transparent-header .header-right_area .menu-trigger span,
    .transparent-header .menu-trigger span {
        background-color: #fff;
    }
}

/* The section 2921 rule carries !important, so this has to as well. */
.home-slider .slide-item .slide-btn .kenne-btn {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .72);
}

.home-slider .slide-item .slide-btn .kenne-btn:hover,
.home-slider .slide-item .slide-btn .kenne-btn:focus-visible {
    color: var(--knan-ink) !important;
    background-color: #fff !important;
    border-color: #fff;
}

/* ==========================================================================
   40. Bag feedback
   Adding to the bag no longer reloads the page, so the page has to say what
   happened by itself. A toast plus the drawer sliding open, rather than a
   full navigation the customer has to wait through.
   ========================================================================== */

.knan-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 10000;
    transform: translate(-50%, 18px);
    max-width: min(92vw, 420px);
    padding: 14px 20px;
    border-radius: 4px;
    background: var(--knan-ink);
    color: #fff;
    font-size: 13px;
    letter-spacing: .02em;
    text-align: center;
    box-shadow: var(--knan-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s var(--knan-ease), transform .22s var(--knan-ease);
}

.knan-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.knan-toast.is-error {
    background: var(--knan-danger);
}

@media (prefers-reduced-motion: reduce) {
    .knan-toast {
        transition: opacity .01ms;
    }
}

/* The add button while the request is in flight. */
.kenne-btn.is-busy,
button.is-busy {
    opacity: .68;
    cursor: progress;
}

/* --- Minicart rows -------------------------------------------------------
   The drawer markup existed but was never populated; these are the styles for
   the rows it now renders. */

.minicart-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.minicart-list > li.minicart-product {
    display: flex;
    gap: 14px;
    position: relative;
    padding: 16px 26px 16px 0;
    border-bottom: 1px solid var(--knan-line);
}

.minicart-list .product-item_img img {
    width: 70px;
    height: 88px;
    object-fit: cover;
    border-radius: 2px;
}

.minicart-list .product-item_content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.minicart-list .product-item_title {
    color: var(--knan-ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.minicart-list .product-item_variant,
.minicart-list .product-item_quantity {
    color: var(--knan-ink-soft);
    font-size: 12px;
}

.minicart-list .product-item_warn {
    color: var(--knan-danger);
    font-size: 11px;
}

.minicart-list .product-item_remove {
    position: absolute;
    top: 16px;
    right: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--knan-ink-soft);
    font-size: 16px;
    line-height: 1;
}

.minicart-list .product-item_remove:hover {
    color: var(--knan-danger);
}

.minicart-empty {
    padding: 26px 0;
    color: var(--knan-ink-soft);
    font-size: 13px;
}

/* ==========================================================================
   41. Hero legibility
   Measured, not guessed. Rendering the page and reading the pixels at each
   element's own box gave: eyebrow 1.38:1, the CTA 1.42:1 and the scroll cue
   1.98:1 — all well under the 4.5:1 that small text needs. The headline and
   the paragraph already passed, so they are left alone.

   Note that a contrast checker driven by computed styles reports NO problems
   here: the effective background is a gradient pseudo-element over a
   photograph and does not exist until the page is painted.
   ========================================================================== */

.home-slider .slide-item .slide-content > span {
    /* Was #9dc6f5 — too dark to carry small, wide-tracked caps over the
       scrim. Near-white keeps the hierarchy without losing legibility. */
    color: #eaf2fd;
    text-shadow: 0 1px 14px rgba(6, 12, 24, .55);
}

.home-slider .slide-item .slide-content h2 {
    text-shadow: 0 2px 30px rgba(6, 12, 24, .38);
}

.home-slider .slide-item .slide-content > p.short-desc,
.home-slider .slide-item .slide-content > p.short-desc-2 {
    color: rgba(255, 255, 255, .93);
    text-shadow: 0 1px 16px rgba(6, 12, 24, .5);
}

/* The CTA was a translucent outline that all but disappeared over the
   photograph. A solid white button is both legible and the stronger call to
   action — this is the only thing on the hero anyone is meant to press. */
.home-slider .slide-item .slide-btn .kenne-btn {
    background-color: #fff !important;
    border-color: #fff;
    color: var(--knan-ink) !important;
    backdrop-filter: none;
    box-shadow: 0 8px 30px rgba(6, 12, 24, .22);
}

.home-slider .slide-item .slide-btn .kenne-btn:hover,
.home-slider .slide-item .slide-btn .kenne-btn:focus-visible {
    background-color: var(--knan-blue) !important;
    border-color: var(--knan-blue);
    color: #fff !important;
}

.knan-scroll-cue {
    color: #fff;
    text-shadow: 0 1px 12px rgba(6, 12, 24, .6);
}

.knan-scroll-cue span {
    background: rgba(255, 255, 255, .85);
}

/* A touch more scrim under the copy column, which is where the measurements
   were failing — the right-hand side is unchanged so the photograph still
   reads at full strength. */
.home-slider .slide-item:before {
    background: linear-gradient(90deg,
            rgba(6, 12, 24, .84) 0%,
            rgba(6, 12, 24, .66) 40%,
            rgba(6, 12, 24, .16) 70%,
            rgba(6, 12, 24, 0) 100%);
}


/* ==========================================================================
   42. Phones
   The desktop layout scaled down rather than being designed down: a landscape
   hero magnified into a portrait box, four service tiles stacked into a full
   screen of white, one product per row, and section padding tuned for a
   1440px window. This is the phone layout.
   ========================================================================== */

@media (max-width: 991px) {

    /* -- Hero ---------------------------------------------------------- */

    /* A phone hero is a tall box. `cover` on the 3:2 landscape file magnifies
       it about 2.5x and lands on a slice of someone's thigh, so phones get
       their own 3:4 crop of the same frame. */
    .bg-1 {
        background-image: url("../images/brand/hero-1-portrait.jpg");
        background-image: -webkit-image-set(
                url("../images/brand/hero-1-portrait.webp") type("image/webp"),
                url("../images/brand/hero-1-portrait.jpg") type("image/jpeg"));
        background-image: image-set(
                url("../images/brand/hero-1-portrait.webp") type("image/webp"),
                url("../images/brand/hero-1-portrait.jpg") type("image/jpeg"));
    }

    .knan-heroes-ready .bg-2 {
        background-image: url("../images/brand/hero-2-portrait.jpg");
        background-image: -webkit-image-set(
                url("../images/brand/hero-2-portrait.webp") type("image/webp"),
                url("../images/brand/hero-2-portrait.jpg") type("image/jpeg"));
        background-image: image-set(
                url("../images/brand/hero-2-portrait.webp") type("image/webp"),
                url("../images/brand/hero-2-portrait.jpg") type("image/jpeg"));
    }

    .knan-heroes-ready .bg-3 {
        background-image: url("../images/brand/hero-3-portrait.jpg");
        background-image: -webkit-image-set(
                url("../images/brand/hero-3-portrait.webp") type("image/webp"),
                url("../images/brand/hero-3-portrait.jpg") type("image/jpeg"));
        background-image: image-set(
                url("../images/brand/hero-3-portrait.webp") type("image/webp"),
                url("../images/brand/hero-3-portrait.jpg") type("image/jpeg"));
    }

    .bg-1,
    .bg-2,
    .bg-3 {
        background-position: center 22%;
    }

    /* The copy sits low on a phone, so the scrim has to be heaviest there —
       the earlier bottom-up gradient was still thin across the middle, which
       is where the paragraph actually falls. */
    .home-slider .slide-item:before {
        background: linear-gradient(180deg,
                rgba(6, 12, 24, .46) 0%,
                rgba(6, 12, 24, .30) 26%,
                rgba(6, 12, 24, .62) 55%,
                rgba(6, 12, 24, .88) 100%);
    }

    .home-slider .slide-item .slide-content {
        max-width: none;
        padding-right: 8vw;
    }

    .home-slider .slide-item .slide-content > span {
        font-size: 10px;
        letter-spacing: .34em;
        padding-bottom: 16px;
    }

    .home-slider .slide-item .slide-content h2 {
        font-size: clamp(38px, 11.5vw, 58px);
        line-height: 1.02;
        letter-spacing: -.015em;
    }

    .home-slider .slide-item .slide-content > p.short-desc,
    .home-slider .slide-item .slide-content > p.short-desc-2 {
        font-size: 15px;
        line-height: 1.62;
        max-width: 34ch;
    }

    /* Full-width CTA: a thumb-sized target, and it reads as deliberate
       rather than as a desktop button that happened to shrink. */
    .home-slider .slide-item .slide-btn .kenne-btn {
        display: flex;
        width: 100%;
        max-width: 320px;
    }

    /* The arrows sit under the thumb and over the copy; the slide advances
       on its own and swipes anyway. */
    .home-slider .slick-arrow {
        display: none !important;
    }

    .knan-scroll-cue {
        display: none;
    }

    /* -- Vertical rhythm ------------------------------------------------ */

    .knan-section,
    .knan-story,
    .product-area {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .section-title {
        margin-bottom: 30px;
    }

    .section-title h2 {
        font-size: 27px;
        letter-spacing: -.01em;
    }

    .knan-eyebrow {
        font-size: 10px;
        letter-spacing: .3em;
    }

    /* -- Service row: 2x2, quiet -------------------------------------- */

    .service-area {
        padding: 30px 0 6px;
    }

    .service-nav .row {
        --bs-gutter-y: 22px;
    }

    .service-nav [class*="col-"] {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .service-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
        padding: 0 6px;
    }

    .service-item .icon {
        font-size: 20px;
        line-height: 1;
        color: var(--knan-blue-ink);
    }

    .service-item .content h4 {
        font-size: 12px;
        letter-spacing: .08em;
        margin: 0 0 2px;
    }

    .service-item .content p {
        font-size: 11px;
        line-height: 1.4;
        margin: 0;
        color: var(--knan-ink-soft);
    }

    /* -- Product grid: two across -------------------------------------- */

    .shop-product-wrap > [class*="col-"],
    .knan-section .row > [class*="col-lg-3"],
    .knan-section .row > [class*="col-lg-4"] {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .product-item .product-name,
    .product-item .product-name a {
        font-size: 13px;
        line-height: 1.35;
    }

    .product-item .price-box {
        font-size: 13px;
    }

    /* The hover-swap image and the hover action rail are both meaningless
       on a touch screen, and the rail covers the product. */
    .product-item .single-product .product-img .add-actions {
        display: none;
    }

    /* -- Category cards ------------------------------------------------ */

    .knan-cat-card img {
        height: 300px !important;
    }

    .knan-cat-card_title {
        font-size: 22px;
    }

    /* -- Story ---------------------------------------------------------- */

    .knan-story_img {
        margin-bottom: 26px;
    }

    .knan-story_content h2 {
        font-size: 27px;
    }
}

@media (max-width: 575px) {

    /* Two across still, but the gutter tightens so the images stay large —
       a bigger photograph is most of what makes a phone storefront feel
       expensive. */
    .shop-product-wrap,
    .knan-section .row {
        --bs-gutter-x: 14px;
    }

    .knan-section,
    .knan-story,
    .product-area {
        padding-top: 46px;
        padding-bottom: 46px;
    }
}

/* ==========================================================================
   43. Hero timing
   The template staggers the hero copy in at 0.5s / 1s / 1.5s / 2.5s with a
   1.3s duration, so the button only finishes arriving 3.8 seconds into a
   7-second slide — it is half-faded for most of the time anyone looks at it,
   which reads as broken rather than as an animation. Same stagger, a third
   of the wait.
   ========================================================================== */

.slick-active .animation-style-01 .slide-content > span,
.slick-active .animation-style-01 .slide-content > h2,
.slick-active .animation-style-01 .slide-content > p,
.slick-active .animation-style-01 .slide-content > .slide-btn {
    animation-duration: .7s;
    -webkit-animation-duration: .7s;
}

.slick-active .animation-style-01 .slide-content > span {
    animation-delay: .05s;
    -webkit-animation-delay: .05s;
}

.slick-active .animation-style-01 .slide-content > h2 {
    animation-delay: .16s;
    -webkit-animation-delay: .16s;
}

.slick-active .animation-style-01 .slide-content > p {
    animation-delay: .28s;
    -webkit-animation-delay: .28s;
}

.slick-active .animation-style-01 .slide-content > .slide-btn {
    animation-delay: .4s;
    -webkit-animation-delay: .4s;
}

@media (prefers-reduced-motion: reduce) {

    .slick-active .animation-style-01 .slide-content > span,
    .slick-active .animation-style-01 .slide-content > h2,
    .slick-active .animation-style-01 .slide-content > p,
    .slick-active .animation-style-01 .slide-content > .slide-btn {
        animation: none !important;
        -webkit-animation: none !important;
        opacity: 1;
    }
}


/* ==========================================================================
   44. Phone chrome and sections
   The announcement bar wrapped to two lines and the logo bar was sized for a
   desktop header, so between them they took roughly a third of the first
   screen before any of the shop appeared.
   ========================================================================== */

@media (max-width: 991px) {

    .knan-announce {
        font-size: 10px;
        letter-spacing: .04em;
        padding: 9px 14px;
        line-height: 1.45;
    }

    .transparent-header .transparent-header_nav,
    .header-inner_area .header-nav {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .transparent-header .header-logo_area img,
    .header-logo_area img {
        width: 104px;
    }

    /* -- "What we actually promise": one column ------------------------ */

    /* Three cards two-up leaves an orphan, and at half a phone width the
       body copy wrapped to three or four words a line. One column, ranged
       left, with the icon beside the heading instead of above it. */
    .knan-reason {
        display: grid;
        grid-template-columns: 26px 1fr;
        grid-column-gap: 14px;
        align-items: start;
        text-align: left;
        padding: 0;
    }

    .knan-section .row > [class*="col-"]:has(.knan-reason) {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .knan-reason i {
        grid-row: 1 / span 2;
        font-size: 20px;
        line-height: 1.2;
        color: var(--knan-blue-ink);
    }

    .knan-reason h4 {
        margin: 0 0 4px;
        font-size: 13px;
        letter-spacing: .06em;
    }

    .knan-reason p {
        margin: 0;
        font-size: 13px;
        line-height: 1.6;
        color: var(--knan-ink-soft);
    }
}

/* :has() is well supported now but not universally; without it the cards stay
   two-up, which is the previous behaviour rather than a broken one. */
@supports not selector(:has(*)) {
    @media (max-width: 575px) {
        .knan-reason {
            display: block;
            text-align: center;
        }
    }
}

/* ==========================================================================
   45. Hero copy on phones
   The paragraph kept losing against the photograph: the slide-wide gradient
   is thin exactly where the copy sits, and a phone hero has no empty side to
   put text on. Rather than darken the whole image, the copy block carries its
   own ground — heaviest behind the text, gone by the top of the frame.
   ========================================================================== */

@media (max-width: 991px) {

    .home-slider .slide-item:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 62%;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(180deg,
                rgba(6, 12, 24, 0) 0%,
                rgba(6, 12, 24, .55) 34%,
                rgba(6, 12, 24, .82) 66%,
                rgba(6, 12, 24, .92) 100%);
    }

    /* The slide-wide gradient can now be lighter at the top, so the
       photograph keeps its colour where nothing is written over it. */
    .home-slider .slide-item:before {
        background: linear-gradient(180deg,
                rgba(6, 12, 24, .40) 0%,
                rgba(6, 12, 24, .16) 30%,
                rgba(6, 12, 24, .16) 55%,
                rgba(6, 12, 24, .34) 100%);
    }

    /* z-index only. .slide-content is absolutely positioned and centred with
       top:50% + translateY(-50%); giving it position:relative drops it to the
       top of the slide and pushes the headline out of frame. This is the same
       trap section 20 warns about for .container, and I walked into it. */
    .home-slider .slide-item .slide-content {
        z-index: 2;
    }

    /* -- The closing band ---------------------------------------------- */

    .knan-cta-band {
        text-align: center;
        padding: 40px 0;
    }

    .knan-cta-band .text-lg-end {
        text-align: center !important;
        margin-top: 22px;
    }

    .knan-cta-band_btn {
        display: flex;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .knan-cta-band_phone {
        margin-top: 14px;
        font-size: 13px;
    }
}

.knan-cta-band_wa {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   46. Shop grid on phones
   The template drops the shop grid to one product per row below 575px, at a
   specificity of five classes, so the section 42 override never applied. Two
   across is the right call for a fashion grid: it shows twice as much range
   per screen and the photographs are still large at ~180px wide.
   ========================================================================== */

@media (max-width: 575px) {

    .kenne-content_wrapper .shop-product-wrap.grid.gridview-2 > [class*="col-"],
    .kenne-content_wrapper .shop-product-wrap.grid.gridview-3 > [class*="col-"],
    .kenne-content_wrapper .shop-product-wrap.grid.gridview-4 > [class*="col-"],
    .kenne-content_wrapper .shop-product-wrap.grid.gridview-5 > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ==========================================================================
   47. Phone buy bar
   Follows the customer down the product page once the real Add to bag has
   scrolled away. It is a proxy for the same form, never a second one.
   ========================================================================== */

.knan-buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;                       /* under the offcanvas drawer */
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97);
    backdrop-filter: saturate(150%) blur(8px);
    border-top: 1px solid var(--knan-line);
    box-shadow: 0 -6px 26px rgba(11, 18, 32, .10);
}

.knan-buybar_info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.knan-buybar_name {
    font-size: 12px;
    color: var(--knan-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.knan-buybar_price {
    font-size: 15px;
    font-weight: 600;
    color: var(--knan-ink);
}

.knan-buybar_btn {
    flex: 1 1 auto;
    max-width: 62%;
    margin-left: auto;
}

.knan-buybar_btn[disabled] {
    opacity: .5;
}

/* Desktop never shows it, whatever the script thinks. */
@media (min-width: 992px) {
    .knan-buybar {
        display: none !important;
    }
}

/* The floating WhatsApp bubble would sit on top of the bar. */
@media (max-width: 991px) {
    body:has(.knan-buybar:not([hidden])) .knan-wa-float {
        bottom: 84px;
    }
}

/* Announcement bar.
   The phone number was breaking mid-digits — "+263 78 235" on one line and
   "2204" alone on the next — and the extra line pushes the hero down by the
   height of the bar again. The aside now wraps as one unit and is dropped
   entirely on phones, where the same number is one tap away in the menu, the
   footer and the floating WhatsApp button. */
.knan-announce {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0 6px;
}

.knan-announce_aside {
    white-space: nowrap;
}

@media (max-width: 767px) {
    .knan-announce_aside {
        display: none;
    }
}

/* ==========================================================================
   48. Footer
   The footer groups are <details>. On desktop that has to be invisible: no
   marker, no pointer, no behaviour. On a phone they collapse, which takes the
   footer from roughly two and a half screens to well under one.
   ========================================================================== */

.knan-foot-group {
    display: block;
}

.knan-foot-group > summary {
    list-style: none;
    cursor: default;
}

.knan-foot-group > summary::-webkit-details-marker,
.knan-foot-group > summary::marker {
    display: none;
    content: "";
}

@media (min-width: 992px) {
    .knan-foot-group > summary {
        pointer-events: none;
    }
}

@media (max-width: 991px) {

    .footer-top_area {
        padding: 34px 0 8px;
    }

    /* Full-width stacked groups with a rule between them, so the closed
       headings read as a list rather than as orphaned titles. */
    .footer-widgets_wrap > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .knan-foot-group {
        border-top: 1px solid var(--knan-line);
    }

    .knan-foot-group > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: 14px 2px;
        margin: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .knan-foot-group > summary h4 {
        margin: 0;
        font-size: 12px;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    /* A chevron drawn in CSS rather than another icon font request. */
    .knan-foot-group > summary::after {
        content: "";
        width: 8px;
        height: 8px;
        margin-right: 4px;
        border-right: 1.5px solid var(--knan-ink-soft);
        border-bottom: 1.5px solid var(--knan-ink-soft);
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform .18s var(--knan-ease);
    }

    .knan-foot-group[open] > summary::after {
        transform: rotate(225deg) translate(-2px, -2px);
    }

    .knan-foot-group .footer-widgets {
        padding-bottom: 14px;
    }

    .knan-foot-group .footer-widgets ul li {
        padding: 5px 0;
    }

    /* Contact rows are the reason anyone opens a footer on a phone: give them
       a tappable height and drop the decorative lines to a smaller size. */
    .knan-footer-contact li {
        padding: 7px 0;
        font-size: 13px;
    }

    .footer-widgets .knan-btn-wa {
        display: flex;
        width: 100%;
        margin-top: 10px;
    }

    /* The newsletter block above the groups. */
    .newsletter-area {
        text-align: center;
        margin-bottom: 22px;
    }

    .newsletter-area .short-desc {
        font-size: 13px;
        line-height: 1.6;
        max-width: 34ch;
        margin-left: auto;
        margin-right: auto;
    }

    .knan-social {
        justify-content: center;
    }

    /* -- Bottom bar --------------------------------------------------- */

    .footer-bottom_area {
        padding: 14px 0 calc(16px + env(safe-area-inset-bottom));
    }

    .footer-bottom_area .copyright,
    .footer-bottom_area .payment {
        text-align: center;
    }

    .footer-bottom_area .copyright span {
        font-size: 11px;
    }

    .knan-pay-list {
        justify-content: center;
        gap: 6px;
        margin-top: 10px;
    }

    .knan-pay-list li {
        font-size: 9px;
        padding: 4px 7px;
    }
}

/* ==========================================================================
   49. One left edge on phones
   The page was mixing alignments: the hero, the story and the promise cards
   ranged left while the service tiles, every section title, the product card
   text, the closing band and the footer were centred. Mixed alignment is the
   thing that makes a layout read as assembled rather than designed.

   Everything ranges left below 992px, on the container's own edge, so there
   is a single line running down the page. Centring survives only where it is
   structural — inside the category cards and on the payment chips.
   ========================================================================== */

@media (max-width: 991px) {

    /* A little more generous than Bootstrap's 12px, but not so much that the
       two-up service tiles lose the width their labels need. */
    .container,
    .container-fluid {
        --bs-gutter-x: 2rem;
    }

    /* -- Section headings --------------------------------------------- */

    /* .text-center is in the markup, so this needs the extra weight. */
    .knan-section .section-title.text-center,
    .product-area .section-title.text-center,
    .section-title.text-center {
        text-align: left !important;
    }

    .knan-section .section-title .knan-divider,
    .section-title .knan-divider,
    .section-title:after {
        margin-left: 0;
    }

    /* -- Service tiles ------------------------------------------------- */

    /* Same shape as the promise cards: icon in a fixed column, text beside
       it, so both blocks share one left edge and one rhythm. */
    /* The vendor sets .service-area .service-nav .service-item to centre and
       gives .service-nav 90px of top padding, both at a specificity this file
       has to match — the 90px was the white gap under the hero. */
    .service-area .service-nav {
        padding-top: 0;
    }

    .service-area .service-nav .service-item {
        display: grid;
        grid-template-columns: 20px 1fr;
        grid-column-gap: 9px;
        align-items: start;
        text-align: left;
        padding: 0;
    }

    .service-area .service-nav .service-item .content,
    .service-area .service-nav .service-item .content h4,
    .service-area .service-nav .service-item .content p {
        text-align: left;
    }

    /* The vendor's divider between tiles assumes a centred four-across row. */
    .service-area .service-nav .service-item:before {
        display: none;
    }

    /* Wide tracking is what pushed "Free delivery" onto two lines in half a
       phone width; the labels are short enough to hold their own without it. */
    .service-item .content h4 {
        font-size: 11px;
        letter-spacing: .04em;
        line-height: 1.3;
    }

    .service-item .content p {
        font-size: 11px;
        line-height: 1.45;
    }

    .service-item .icon {
        grid-row: 1 / span 2;
    }

    .service-item .content {
        min-width: 0;
    }

    /* -- Product cards -------------------------------------------------- */

    .product-item .single-product .product-content,
    .product-item .single-product .product-content .product-desc_info {
        text-align: left;
    }

    .product-item .knan-card-colors {
        justify-content: flex-start;
    }

    /* -- Closing band --------------------------------------------------- */

    .knan-cta-band,
    .knan-cta-band .text-lg-end {
        text-align: left !important;
    }

    .knan-cta-band_btn {
        margin-left: 0;
        margin-right: 0;
    }

    /* -- Footer --------------------------------------------------------- */

    .newsletter-area {
        text-align: left;
    }

    .newsletter-area .short-desc {
        margin-left: 0;
        margin-right: 0;
    }

    .knan-social {
        justify-content: flex-start;
    }

    .footer-bottom_area .copyright,
    .footer-bottom_area .payment {
        text-align: left;
    }

    .knan-pay-list {
        justify-content: flex-start;
    }

    /* -- Odds and ends -------------------------------------------------- */

    .knan-size-prompt,
    .breadcrumb-content {
        text-align: left;
    }

    .breadcrumb-content ul {
        justify-content: flex-start;
    }
}

/* Product badges. The template pins them hard into the corner and hangs an
   11px ribbon tail off the right edge, which overflows a card that is half a
   phone wide — and "11 colours" wrapped onto two lines inside it. */
.product-img .sticker,
.product-img .sticker-2 {
    white-space: nowrap;
}

@media (max-width: 991px) {

    .product-img .sticker,
    .product-img .sticker-2 {
        top: 8px;
        left: 8px;
        font-size: 9px;
        letter-spacing: .08em;
        padding: 4px 8px;
    }

    .product-img .sticker.sticker-2,
    .product-img .sticker-2.sticker-2 {
        left: auto;
        right: 8px;
    }

    .product-img .sticker:before,
    .product-img .sticker-2:before {
        display: none;
    }
}

/* Two-line reserve on the product name so prices and swatches sit on the same
   line across a row. Without it a one-line name lifts its price above the
   neighbouring card's and the grid reads as ragged. */
@media (max-width: 991px) {

    .product-item .single-product .product-content .product-name {
        min-height: 2.7em;
        margin-bottom: 6px;
    }

    .product-item .single-product .product-content .price-box {
        margin-bottom: 8px;
    }
}

/* ==========================================================================
   50. The closing band's button
   .kenne-btn is a blue-bordered, blue-text outline button. On the band's own
   blue that is invisible: "Shop the range" rendered as a bare line of text
   with no button around it at all. Solid white with ink type, matching the
   hero CTA, so the two primary actions on the page look like each other.
   ========================================================================== */

.knan-cta-band .kenne-btn,
.knan-cta-band a.kenne-btn {
    background-color: #fff !important;
    border-color: #fff;
    color: var(--knan-ink) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.knan-cta-band .kenne-btn:hover,
.knan-cta-band a.kenne-btn:focus-visible {
    background-color: var(--knan-ink) !important;
    border-color: #fff;
    color: #fff !important;
}

.knan-cta-band_phone a {
    color: #fff !important;
}

.knan-cta-band_phone a:hover {
    color: #fff !important;
    opacity: .8;
}

/* ==========================================================================
   51. One frame for every product card
   The photographs came from four different shoots and their grounds vary:
   keyed cutouts on off-white, bedding flat-lays, a cyan sweep, terracotta
   studio. That raggedness is the main thing stopping the grid reading as one
   range rather than a folder of pictures.

   The photographs themselves are left alone — they are the client's own and
   re-processing them risks damaging good ones. Instead every card gets the
   same tile: identical ground, identical inset, identical 4:5 frame. A cutout
   and a lifestyle shot then sit in the same box.
   ========================================================================== */

.product-item .single-product .product-img {
    background: var(--knan-card-ground, #faf9f7);
    border-radius: var(--knan-radius);
}

/* The inset is what makes the difference: a photograph that runs to its own
   edge and one floating on white both end up with the same margin of ground
   around them, so the row reads as a set. */
.product-item .single-product .product-img > a {
    padding: 10px;
}

.product-item .single-product .product-img img {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
}

/* The placeholder plate is a holding state, not a photograph: give it a
   quieter ground so it reads as deliberate next to real product shots. */
.product-item .single-product .product-img.knan-placeholder-img {
    background: #f1f2f4;
}

/* Fit guide lists — the size page carries prose now rather than tables. */
.knan-fit-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.knan-fit-list li {
    position: relative;
    padding: 0 0 12px 18px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--knan-ink-soft);
}

.knan-fit-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--knan-blue);
}

.knan-fit-list strong {
    color: var(--knan-ink);
    font-weight: 500;
}

/* ==========================================================================
   52. Saved items
   ========================================================================== */

.knan-wish-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 9px;
    background: var(--knan-blue);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
}

.knan-wish-note {
    margin: 0 0 26px;
    padding: 12px 16px;
    border-left: 2px solid var(--knan-line);
    color: var(--knan-ink-soft);
    font-size: 13px;
    line-height: 1.6;
}

.knan-wish-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 12px 0 30px;
}

.knan-wish-actions .knan-wish-add {
    margin: 0;
}

.knan-wish-remove {
    background: none;
    border: 0;
    padding: 4px;
    color: var(--knan-ink-soft);
    font-size: 12px;
    letter-spacing: .04em;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.knan-wish-remove:hover {
    color: var(--knan-danger);
}

/* The heart on a card, once saved. */
[data-knan-wish].is-saved i {
    color: var(--knan-danger);
}

/* ==========================================================================
   53. Accessibility
   ========================================================================== */

/* Skip link. Off-screen until focused, then a real target — the header runs
   an announcement bar, a top nav, a middle bar and a main nav before any
   content, which is a long tab on every page. */
.knan-skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 10001;
    padding: 12px 20px;
    background: var(--knan-ink);
    color: #fff;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: var(--knan-radius);
    transition: top .16s var(--knan-ease);
}

.knan-skip:focus {
    top: 12px;
    color: #fff;
}

#knan-main:focus {
    outline: none;      /* it is a scroll target, not a control */
}

/* A visible focus ring on everything operable. The sheet had four
   :focus-visible rules; a keyboard user could otherwise lose the caret
   entirely halfway through checkout. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--knan-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* On the photographic hero and the blue band the ink ring disappears. */
.home-slider :focus-visible,
.knan-cta-band :focus-visible,
.transparent-header :focus-visible {
    outline-color: #fff;
}

/* The size and colour chips are the controls that configure a purchase, so
   their focus state is the one that matters most. */
.knan-swatch:focus-visible,
.knan-size:focus-visible {
    outline: 2px solid var(--knan-ink);
    outline-offset: 3px;
}

.knan-size[aria-disabled="true"] {
    cursor: not-allowed;
}

/* ==========================================================================
   54. Type on the brand cyan
   --knan-blue is #19c5f0. White on it measures 2.04:1 against a 4.5:1
   requirement, so every surface filled with it carries dark type instead;
   near-black on the cyan measures 8.9:1. This section is the counterpart to
   the token split: the cyan fills, --knan-blue-ink writes, and --knan-on-blue
   writes on top of the cyan.
   ========================================================================== */

/* -- Bands ---------------------------------------------------------------- */

.knan-announce,
.knan-announce a,
.knan-announce strong,
.knan-announce a:hover {
    color: var(--knan-on-blue) !important;
}

.knan-announce a {
    text-decoration-color: rgba(6, 35, 43, .45);
}

.knan-cta-band {
    color: rgba(6, 35, 43, .84);
}

.knan-cta-band h2,
.knan-cta-band .knan-eyebrow,
.knan-cta-band .knan-lead,
.knan-cta-band_phone,
.knan-cta-band_phone a {
    color: var(--knan-on-blue) !important;
}

/* The band's button was white-on-blue; it has to invert now that the band is
   pale, or it disappears into it. */
.knan-cta-band .kenne-btn,
.knan-cta-band a.kenne-btn {
    background-color: var(--knan-on-blue) !important;
    border-color: var(--knan-on-blue);
    color: #fff !important;
}

.knan-cta-band .kenne-btn:hover,
.knan-cta-band a.kenne-btn:focus-visible {
    background-color: #fff !important;
    border-color: #fff;
    color: var(--knan-on-blue) !important;
}

/* -- Filled buttons -------------------------------------------------------- */

.knan-btn-gold,
.knan-btn-gold:hover,
.kenne-btn.knan-btn-gold {
    color: var(--knan-on-blue) !important;
}

.kenne-btn:hover {
    box-shadow: 0 6px 18px rgba(0, 192, 242, .32);
}

/* -- Badges and counters --------------------------------------------------- */

.minicart-count_area .item-count,
.knan-wish-count,
.product-img .sticker-2 {
    color: var(--knan-on-blue);
}

/* -- Mobile header --------------------------------------------------------- */

@media (max-width: 991px) {

    .transparent-header .main-nav > ul > li > a,
    .transparent-header .header-right_area ul li a,
    .transparent-header .header-right_area ul li a i {
        color: var(--knan-on-blue) !important;
    }

    /* Burger bars are drawn with background-color, not colour. */
    .transparent-header .header-right_area .menu-trigger span,
    .transparent-header .menu-trigger span {
        background-color: var(--knan-on-blue);
    }
}

/* -- Selection and focus --------------------------------------------------- */

::selection {
    background: var(--knan-blue);
    color: var(--knan-on-blue);
}

/* The focus ring has to stay visible on white, so it uses the readable
   variant rather than the cyan. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline-color: var(--knan-blue-ink);
}