/* ==========================================================================
   Kinderkutak - design layer (2026-10 redesign)

   Printed after main.css and Tailwind (functions.php, priority 103), so it
   wins their ties. The palette is untouched - everything here is type,
   space, shape and motion.

   Contents
     1. Tokens, base, type, icons
     2. Buttons, links, eyebrow
     3. Scrollbar
     4. Header
     5. Menu overlay
     6. Footer
     7. Sections (shared shell)
     8. Home: hero, marquee, categories, rail, cycle, duo
     9. Page hero, steps, join invitation
    10. Product cards
    11. Inner pages: about, contact, FAQ, returns, privacy, 404, search
    12. Shared bits for the inner pages, grids
    13. Cart & Checkout
    14. My Account
    15. Single product
    16. Page transitions (View Transitions API)
   ========================================================================== */


/* ==========================================================================
   1. Tokens, base, type, icons
   ========================================================================== */
:root {
    --kk-ink: #1b1c1c;
    --kk-ink-2: #4f453d;
    --kk-brown: #8a6544;
    --kk-brown-2: #795e44;
    --kk-brown-3: #5a422a;
    --kk-peach: #ffdab9;
    --kk-tan: #e3c0a0;
    --kk-cream: #fbf9f8;
    --kk-paper: #f6f3f2;
    --kk-mist: #f0eded;
    --kk-line: rgba(79, 69, 61, 0.12);

    --kk-display: 'Fraunces', ui-serif, Georgia, serif;
    --kk-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --kk-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --kk-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
    --kk-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    --kk-pad: clamp(20px, 4.5vw, 64px);
    --kk-max: 1320px;
    --kk-radius: clamp(22px, 2.2vw, 30px);
    --kk-adminbar: 0px;
    --kk-header-space: 96px; /* 12px gap + 68px bar + breathing room */
}

.admin-bar { --kk-adminbar: 32px; }
@media (max-width: 782px) { .admin-bar { --kk-adminbar: 46px; } }

/* The rotated marquee band and the hero glows are wider than the page on
   purpose. body { overflow-x: hidden } (main.css) is not enough on iOS Safari,
   which ignores it on body alone; clip (unlike hidden) does not create a
   scroll container, so sticky elements keep working. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
    /* Overrides main.css `hidden`: with html clipped, a hidden body becomes its
       own scroll container and every position: sticky inside it stops working. */
    overflow-x: clip;
    font-family: var(--kk-sans);
    background-color: var(--kk-cream);
    text-rendering: optimizeLegibility;
}

::selection { background: var(--kk-peach); color: var(--kk-brown-3); }

:focus-visible { outline: 2px solid var(--kk-brown); outline-offset: 3px; border-radius: 6px; }

/* Paper grain over everything, barely there - it takes the digital flatness
   off the cream. pointer-events: none, so it never intercepts a click. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9990;
    pointer-events: none;
    opacity: 0.045;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.kk-skip {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 10000;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    background: var(--kk-ink-2);
    color: #fff;
    font-weight: 600;
}
.kk-skip:focus { top: 16px; }

/* Spacer under the fixed header. Heroes pull themselves back up behind it. */
.kk-page-start { height: var(--kk-header-space); flex: none; outline: none; }

/* --- Type --------------------------------------------------------------- */
/* "body" lifts these above Tailwind's .md:text-* size utilities. */
body .font-headline-xl,
body .font-headline-lg {
    font-family: var(--kk-display);
    font-weight: 500;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 100, "WONK" 0;
    letter-spacing: -0.022em;
    text-wrap: balance;
}

body .font-headline-xl {
    font-size: clamp(2.55rem, 1.45rem + 4.4vw, 5.6rem);
    line-height: 1.02;
}

body .font-headline-lg {
    font-size: clamp(2rem, 1.45rem + 2.1vw, 3.3rem);
    line-height: 1.06;
}

/* The accented word: italic, a little wonky, underlined by the squiggle. */
.kk-em {
    position: relative;
    display: inline-block;
    isolation: isolate;
    font-style: italic;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    color: var(--kk-brown);
    white-space: nowrap;
}

.kk-em__line {
    position: absolute;
    left: -3%;
    bottom: -0.1em;
    z-index: -1;
    width: 106%;
    height: 0.32em;
    overflow: visible;
    fill: none;
    stroke: var(--kk-peach);
    stroke-width: 7;
    stroke-linecap: round;
}

/* Drawn like a pen stroke, left to right, once the accented word has risen:
   the split headline's words take ~0.8s to land (motion.js adds .is-in when
   they start), so the line waits for them instead of drawing out of sight. */
.kk-em__line path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(0.65, 0, 0.35, 1) 0.85s; }
.kk-js .kk-em__line path { stroke-dashoffset: 1; }
.kk-js .is-in .kk-em__line path { stroke-dashoffset: 0; }

/* --- Icons ---------------------------------------------------------------- */
/* Every icon in the theme uses the class .material-symbols-outlined; point it
   at the ROUNDED set - softer corners, friendlier for a children's shop. */
.material-symbols-outlined {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* The custom set (inc/icons.php) */
.kk-icon {
    width: 1.5em;
    height: 1.5em;
    flex: none;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kkf { fill: currentColor; fill-opacity: 0.2; stroke: none; }

/* Split-text words (assets/js/motion.js). Each word rises out of its own mask. */
/* Each word rises out of its own mask. The padding (cancelled by the negative
   margin, so layout is unchanged) gives descenders (j, g, p), accents and the
   italic overhang room inside it; once the word is in, the mask is dropped
   altogether (.is-done, motion.js) so nothing can be clipped at rest. */
.kk-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.12em 0.22em 0.32em; margin: -0.12em -0.22em -0.32em; }
.is-done .kk-w { overflow: visible; }
/* The inner span carries its own side padding: Safari clips a transformed
   layer's text to its box, which cut the swash off italic capitals (the J of
   "Jednostavno"). Once the words are in, the layer is dropped altogether. */
/* No permanent will-change: words waiting below the fold would each hold a GPU
   layer (hundreds on a long page - costly on iPhone). The reveal animation
   promotes them itself while it runs. */
.kk-w > .kk-w__i { display: inline-block; padding: 0 0.18em; margin: 0 -0.18em; }
.kk-js [data-kk-split]:not(.is-split) { opacity: 0; }
.kk-js [data-kk-fade] { opacity: 0; transform: translateY(18px); }


/* ==========================================================================
   2. Buttons, links, eyebrow
   ========================================================================== */
.kk-btn {
    --bg: var(--kk-peach);
    --fg: var(--kk-brown-3);
    --fill: var(--kk-brown);
    --fg-hover: #fff;
    --icon-bg: rgba(255, 255, 255, 0.7);
    --icon-fg: var(--kk-brown);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    min-height: 58px;
    padding: 0.5rem 0.5rem 0.5rem 1.6rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: var(--bg);
    color: var(--fg);
    font: 600 15px/1 var(--kk-sans);
    letter-spacing: 0.01em;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    white-space: nowrap;
    box-shadow: 0 14px 34px -18px rgba(138, 101, 68, 0.55);
    transition: color 0.45s var(--kk-ease), box-shadow 0.45s var(--kk-ease), border-color 0.45s;
    will-change: transform;
}

/* Fill wipes up from below with a soft wave edge that flattens as it rises */
.kk-btn::before {
    content: '';
    position: absolute;
    left: -10%;
    right: -10%;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: var(--fill);
    border-radius: 50% 50% 0 0 / 40% 40% 0 0;
    transform: translateY(105%);
    transition: transform 0.6s var(--kk-ease), border-radius 0.6s var(--kk-ease);
}

.kk-btn:hover::before,
.kk-btn:focus-visible::before { transform: translateY(0); border-radius: 0; }
.kk-btn:hover,
.kk-btn:focus-visible { color: var(--fg-hover); box-shadow: 0 18px 40px -16px rgba(138, 101, 68, 0.6); }

/* Label rolls up and is replaced by a copy of itself */
.kk-btn__label { position: relative; display: block; height: 1.2em; line-height: 1.2; overflow: hidden; }
.kk-btn__label > span,
.kk-btn__label::after { display: block; transition: transform 0.55s var(--kk-ease); }
/* The copy waits a gap below the label, and both roll up by height + gap, so
   the outgoing label's descenders (g, j) clear the mask instead of peeking
   in as small marks along its top edge. */
.kk-btn__label::after { content: attr(data-text); position: absolute; left: 0; top: calc(100% + 0.4em); }
.kk-btn:hover .kk-btn__label > span,
.kk-btn:hover .kk-btn__label::after,
.kk-btn:focus-visible .kk-btn__label > span,
.kk-btn:focus-visible .kk-btn__label::after { transform: translateY(calc(-100% - 0.4em)); }

.kk-btn__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    background: var(--icon-bg);
    color: var(--icon-fg);
    transition: transform 0.55s var(--kk-bounce), background-color 0.45s;
}
.kk-btn__icon .material-symbols-outlined { font-size: 20px; }
/* The bubble turns white on hover, so the glyph needs a dark colour then -
   buttons with a white glyph (dark and outline styles) used to go blank. */
.kk-btn:hover .kk-btn__icon,
.kk-btn:focus-visible .kk-btn__icon { transform: translateX(3px) scale(1.08); background: #fff; color: var(--kk-brown); }

.kk-btn--ghost {
    --bg: rgba(255, 255, 255, 0.7);
    --fg: var(--kk-ink);
    --fill: var(--kk-peach);
    --fg-hover: var(--kk-brown-3);
    --icon-bg: var(--kk-mist);
    --icon-fg: var(--kk-ink-2);
    border-color: rgba(79, 69, 61, 0.14);
    box-shadow: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.kk-btn--light {
    --bg: var(--kk-peach);
    --fg: var(--kk-brown-3);
    --fill: #fff;
    --fg-hover: var(--kk-brown-3);
    box-shadow: none;
}

.kk-btn--outline-light {
    --bg: transparent;
    --fg: #fbf9f8;
    --fill: rgba(255, 255, 255, 0.14);
    --fg-hover: #fff;
    --icon-bg: rgba(255, 255, 255, 0.12);
    --icon-fg: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

.kk-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 3px;
    color: var(--kk-brown);
    font: 600 15px/1.2 var(--kk-sans);
    text-decoration: none;
    white-space: nowrap;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1.5px no-repeat;
    transition: background-size 0.5s var(--kk-ease);
}
.kk-link-arrow .material-symbols-outlined { font-size: 18px; transition: transform 0.45s var(--kk-ease); }
/* The underline stops before the arrow (18px icon + 0.4rem gap) */
.kk-link-arrow:hover { background-size: calc(100% - 18px - 0.4rem) 1.5px; }

/* Text link with an icon: only the words are underlined on hover, never the icon */
.kk-textlink { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--kk-brown); font: 600 14.5px/1.3 var(--kk-sans); text-decoration: none; }
.kk-textlink .material-symbols-outlined { font-size: 19px; transition: transform 0.4s var(--kk-ease); }
.kk-textlink > span:not(.material-symbols-outlined) { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color 0.3s; }
.kk-textlink:hover > span:not(.material-symbols-outlined) { text-decoration-color: currentColor; }
.kk-textlink:hover .material-symbols-outlined:last-child { transform: translateX(3px); }
.kk-textlink:hover .material-symbols-outlined:first-child { transform: translateX(-3px); }
.kk-link-arrow:hover .material-symbols-outlined { transform: translateX(4px); }

.kk-roundbtn {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid rgba(79, 69, 61, 0.16);
    background: rgba(255, 255, 255, 0.75);
    color: var(--kk-ink-2);
    transition: background-color 0.35s, color 0.35s, border-color 0.35s, transform 0.35s var(--kk-bounce), opacity 0.3s;
}
.kk-roundbtn:hover { background: var(--kk-ink-2); color: #fff; border-color: var(--kk-ink-2); transform: scale(1.05); }
.kk-roundbtn[disabled] { opacity: 0.35; pointer-events: none; }

.kk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.1rem;
    color: var(--kk-brown);
    font: 700 12px/1.2 var(--kk-sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.kk-eyebrow__dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--kk-brown);
    box-shadow: 0 0 0 4px rgba(255, 218, 185, 0.9);
    animation: kk-pulse 2.4s var(--kk-ease) infinite;
}

.kk-eyebrow--light { color: var(--kk-peach); }
.kk-eyebrow--light .kk-eyebrow__dot { background: var(--kk-peach); box-shadow: 0 0 0 4px rgba(255, 218, 185, 0.18); }

@keyframes kk-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 218, 185, 0.9); }
    50% { box-shadow: 0 0 0 8px rgba(255, 218, 185, 0.25); }
}

@keyframes kk-spin { to { transform: rotate(360deg); } }

@keyframes kk-shadow-in { from { opacity: 0; } }

@keyframes kk-float {
    0%, 100% { transform: translateY(0) rotate(var(--kk-rot, 0deg)); }
    50% { transform: translateY(-10px) rotate(var(--kk-rot, 0deg)); }
}

@keyframes kk-morph {
    0%   { border-radius: 48% 52% 44% 56% / 56% 44% 56% 44%; }
    50%  { border-radius: 56% 44% 52% 48% / 44% 58% 42% 56%; }
    100% { border-radius: 44% 56% 58% 42% / 52% 46% 54% 48%; }
}


/* ==========================================================================
   3. Scrollbar (desktop pointers only - phones keep their native overlay)
   A peach-to-tan pill on the paper track, darkening to brand brown when
   grabbed. WebKit/Blink use the pseudo-elements; Firefox the standard
   properties (set only there - in Chrome they would switch the pseudo-
   elements off).
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
    ::-webkit-scrollbar { width: 14px; height: 14px; }
    ::-webkit-scrollbar-track { background: var(--kk-paper); }
    ::-webkit-scrollbar-thumb {
        border: 4px solid var(--kk-paper);
        border-radius: 999px;
        background: linear-gradient(180deg, var(--kk-peach) 0%, var(--kk-tan) 100%);
        min-height: 60px;
    }
    ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--kk-tan) 0%, var(--kk-brown) 100%); }
    ::-webkit-scrollbar-thumb:active { background: var(--kk-brown); }
    ::-webkit-scrollbar-corner { background: var(--kk-paper); }

    /* Scrolling panels inside the page get a slimmer version */
    .kk-filters-body::-webkit-scrollbar,
    .kk-menu__scroll::-webkit-scrollbar { width: 8px; }
    .kk-filters-body::-webkit-scrollbar-track,
    .kk-menu__scroll::-webkit-scrollbar-track { background: transparent; }
    .kk-filters-body::-webkit-scrollbar-thumb,
    .kk-menu__scroll::-webkit-scrollbar-thumb { border-width: 2px; border-color: transparent; background-clip: padding-box; }

    @supports (-moz-appearance: none) {
        html { scrollbar-width: thin; scrollbar-color: var(--kk-tan) var(--kk-paper); }
    }
}


/* ==========================================================================
   4. Header - a floating glass pill
   ========================================================================== */
.kk-header {
    position: fixed;
    top: var(--kk-adminbar);
    left: 0;
    right: 0;
    z-index: 60;
    padding: 12px var(--kk-pad) 0;
    pointer-events: none;
    transition: transform 0.7s var(--kk-ease);
}

.kk-header.is-hidden { transform: translateY(calc(-100% - 20px)); }

.kk-header__bar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: var(--kk-max);
    height: 68px;
    margin: 0 auto;
    padding: 0 10px 0 clamp(16px, 2vw, 26px);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    background: rgba(251, 249, 248, 0.68);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 18px 44px -24px rgba(79, 69, 61, 0.32);
    transition: height 0.5s var(--kk-ease), background-color 0.5s, box-shadow 0.5s;
}

.kk-header.is-condensed .kk-header__bar {
    height: 60px;
    background: rgba(251, 249, 248, 0.88);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 20px 50px -22px rgba(79, 69, 61, 0.4);
}

.kk-header__brand { flex: none; }

/* Desktop navigation: from 1024px; below that, the menu button */
body .kk-nav { display: none; }

@media (min-width: 1024px) {
    body .kk-nav {
        display: flex;
        flex: 1 1 auto;
        justify-content: center;
        align-items: center;
        gap: clamp(1.25rem, 2.2vw, 2.25rem);
        margin: 0;
        font: 500 15px/1 var(--kk-sans);
    }

    /* The tablet-only trims from main.css no longer apply */
    body .kk-nav__link--secondary { display: inline-flex; }
}

.kk-header__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

@media (min-width: 1024px) { .kk-header__actions { margin-left: 0; } }

/* Small phones (320-360px): logo, search, bag and menu did not fit in the bar
   and the menu button ran past the edge. Slightly smaller pieces, tighter gaps. */
@media (max-width: 360px) {
    .kk-header__bar { gap: 0.5rem; padding-left: 14px; padding-right: 8px; }
    body .kk-header .kk-header__brand { font-size: 22px; }
    .kk-header__actions { gap: 2px; }
    .kk-header .kk-iconbtn { width: 40px; height: 40px; }
    .kk-header .kk-iconbtn .material-symbols-outlined { font-size: 21px; }
    .kk-header .kk-burger { height: 40px; margin-left: 2px; padding: 0 11px; }
}

.kk-iconbtn {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: var(--kk-ink-2);
    transition: background-color 0.3s, color 0.3s, transform 0.35s var(--kk-bounce);
}
.kk-iconbtn .material-symbols-outlined { font-size: 23px; }
.kk-iconbtn:hover { background: rgba(255, 218, 185, 0.6); color: var(--kk-brown); transform: scale(1.06); }

@media (max-width: 639px) { .kk-iconbtn--account, .kk-iconbtn--saved { display: none; } } /* in the menu on phones */

body .kk-cart-count {
    position: absolute;
    top: 4px;
    right: 1px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--kk-brown);
    color: #fff;
    font: 700 10.5px/19px var(--kk-sans);
    text-align: center;
    box-shadow: 0 0 0 2.5px var(--kk-cream);
}
body .kk-cart-count.hidden { display: none; }

.kk-burger {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    height: 46px;
    margin-left: 4px;
    padding: 0 18px 0 16px;
    border-radius: 999px;
    background: var(--kk-ink-2);
    color: var(--kk-cream);
    font: 600 14px/1 var(--kk-sans);
    transition: background-color 0.35s, transform 0.35s var(--kk-bounce);
}
.kk-burger:hover { background: var(--kk-brown); transform: scale(1.04); }

.kk-burger__lines { position: relative; display: block; width: 18px; height: 10px; }
.kk-burger__lines i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.45s var(--kk-ease), width 0.45s var(--kk-ease);
}
.kk-burger__lines i:first-child { top: 0; }
.kk-burger__lines i:last-child { bottom: 0; width: 65%; }
.kk-burger:hover .kk-burger__lines i:last-child { width: 100%; }

/* Phones: icon only - with search and the bag beside it (product pages) the
   "Menu" label pushed the button past the screen edge */
@media (max-width: 639px) { .kk-burger__text { display: none; } .kk-burger { padding: 0 14px; } }
@media (min-width: 1024px) { .kk-burger { display: none; } }

/* Language pill in the header: desktop only - the menu carries it below 1024 */
body .kk-lang--header { display: none; }
@media (min-width: 1024px) {
    body .kk-lang--header { display: inline-flex; margin-right: 6px; }
    body .kk-lang--header .kk-lang__link.is-current { display: inline-block; }
}


/* ==========================================================================
   5. Menu overlay (phones and tablets)
   Grows as a circle out of the menu button (JS sets --kk-menu-x/-y).
   ========================================================================== */
.kk-menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* the circle and the blobs are larger than the screen */
    isolation: isolate;
    visibility: hidden;
    transition: visibility 0s linear 0.75s;
}

.kk-menu.is-open {
    visibility: visible;
    transition: visibility 0s;
}

/* The cream circle that grows out of the menu button (motion.js adds it and
   measures --kk-menu-r, the distance to the farthest screen corner). It only
   scales - a transform the GPU animates on its own - where the old
   clip-path circle made Safari repaint the whole screen every frame. */
.kk-menu__circle {
    position: absolute;
    z-index: -2;
    left: calc(var(--kk-menu-x, 100%) - var(--kk-menu-r, 150vmax));
    top: calc(var(--kk-menu-y, 0px) - var(--kk-menu-r, 150vmax));
    width: calc(var(--kk-menu-r, 150vmax) * 2);
    height: calc(var(--kk-menu-r, 150vmax) * 2);
    border-radius: 50%;
    background: var(--kk-cream);
    transform: scale(0.001);
    transition: transform 0.75s var(--kk-ease-io);
    will-change: transform;
    pointer-events: none;
}
.kk-menu.is-open .kk-menu__circle {
    transform: scale(1);
    transition-duration: 0.9s;
}

/* What sits on the circle fades in once it has spread, and out at once on close. */
.kk-menu__blob,
.kk-menu__top {
    opacity: 0;
    transition: opacity 0.2s;
}
.kk-menu.is-open .kk-menu__blob,
.kk-menu.is-open .kk-menu__top {
    opacity: 1;
    transition: opacity 0.4s 0.3s;
}

@media (min-width: 1024px) { .kk-menu { display: none; } }

.kk-menu__blob {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    animation: kk-float 9s ease-in-out infinite;
}
.kk-menu__blob--a { width: 70vw; height: 70vw; top: -20vw; right: -25vw; background: rgba(255, 218, 185, 0.65); }
.kk-menu__blob--b { width: 60vw; height: 60vw; bottom: -20vw; left: -25vw; background: rgba(200, 231, 216, 0.55); animation-delay: -4s; }

.kk-menu__top {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(80px + var(--kk-adminbar));
    padding: var(--kk-adminbar) var(--kk-pad) 0 calc(var(--kk-pad) + 16px);
}

/* Pinned over the menu button (motion.js measures it into --kk-close-*), so
   the two are one button: same place, size and pill shape. The fallbacks
   are the phone menu button. */
.kk-menu__close {
    position: fixed;
    top: var(--kk-close-y, calc(23px + var(--kk-adminbar)));
    left: var(--kk-close-x, auto);
    right: var(--kk-close-x, calc(var(--kk-pad) + 10px));
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: var(--kk-close-w, 46px);
    height: var(--kk-close-h, 46px);
    padding: 0;
    border-radius: 999px;
    background: var(--kk-ink-2);
    color: var(--kk-cream);
    font: 600 14px/1 var(--kk-sans);
    transition: background-color 0.3s;
}
.kk-menu__close .material-symbols-outlined { font-size: 20px; transition: transform 0.5s var(--kk-bounce); }
.kk-menu__close:hover { background: var(--kk-brown); }
.kk-menu__close:hover .material-symbols-outlined { transform: rotate(90deg); }
/* Opened with a tap or click: no focus ring (keyboard users still get one) */
.kk-menu__close:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.kk-menu__close:focus-visible { outline: 2px solid var(--kk-brown); outline-offset: 3px; }
/* The label shows where the menu button shows its own ("Menu") */
.kk-menu__close-text { display: none; }
@media (min-width: 640px) { .kk-menu__close-text { display: inline; } }

.kk-menu__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(8px, 3vh, 28px) var(--kk-pad) 24px;
}

/* Big links: each label rises out of its mask, staggered */
body #mobile-menu.kk-menu .kk-mnav__link {
    display: grid;
    grid-template-columns: 2.25rem 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: clamp(10px, 1.8vh, 16px) 0;
    border-bottom: 1px solid var(--kk-line);
    color: var(--kk-ink);
    text-decoration: none;
    animation: none;
    opacity: 1;
}

.kk-mnav__index {
    color: rgba(138, 101, 68, 0.55);
    font: 700 12px/1 var(--kk-sans);
    letter-spacing: 0.1em;
    opacity: 0;
    transition: opacity 0.6s var(--kk-ease) calc(0.35s + var(--kk-i) * 0.07s);
}

/* Room below the line for the display font's descenders (j, p, g) - the
   negative margin keeps the rows where they were. */
.kk-mnav__mask { display: block; overflow: hidden; padding-bottom: 0.24em; margin-bottom: -0.18em; }

body .kk-mnav__label {
    display: block;
    font-family: var(--kk-display);
    font-size: clamp(2.1rem, 8.5vw, 3.5rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.02em;
    font-variation-settings: "SOFT" 100, "WONK" 0;
    transform: translateY(140%); /* fully below the taller mask while closed */
    transition: transform 0.9s var(--kk-ease) calc(0.3s + var(--kk-i) * 0.07s), color 0.3s;
}

body .kk-mnav__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 218, 185, 0.55);
    color: var(--kk-brown);
    opacity: 0;
    transform: scale(0.5) rotate(-30deg);
    transition: opacity 0.6s var(--kk-ease) calc(0.45s + var(--kk-i) * 0.07s), transform 0.7s var(--kk-bounce) calc(0.45s + var(--kk-i) * 0.07s), background-color 0.3s;
}

.kk-menu.is-open .kk-mnav__index { opacity: 1; }
.kk-menu.is-open .kk-mnav__label { transform: translateY(0); }
.kk-menu.is-open .kk-mnav__icon { opacity: 1; transform: none; }

body .kk-mnav__link.is-current .kk-mnav__label { color: var(--kk-brown); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
body .kk-mnav__link.is-current .kk-mnav__icon { background: var(--kk-peach); }
body .kk-mnav__link:active .kk-mnav__label { color: var(--kk-brown); }

.kk-menu__section {
    margin-top: clamp(20px, 4vh, 36px);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--kk-ease), transform 0.7s var(--kk-ease);
}
.kk-menu.is-open .kk-menu__section,
.kk-menu.is-open .kk-menu__foot { opacity: 1; transform: none; transition-delay: calc(0.3s + var(--kk-i) * 0.07s); }

.kk-menu__label { margin: 0 0 0.75rem; color: var(--kk-brown); font: 700 12px/1 var(--kk-sans); letter-spacing: 0.16em; text-transform: uppercase; }

.kk-menu__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.kk-menu__cat {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--kk-ink);
    font: 600 14px/1.2 var(--kk-sans);
    text-decoration: none;
}
.kk-menu__cat .kk-icon { width: 28px; height: 28px; color: var(--kk-brown); }

/* Saved items (phones have no header heart) */
.kk-menu__saved {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem 0.6rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--kk-ink);
    font: 600 15px/1.2 var(--kk-sans);
    text-decoration: none;
}
.kk-menu__saved-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fce4ec; color: #d81b60; }
.kk-menu__saved-icon .material-symbols-outlined { font-size: 21px; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.kk-menu__saved-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: #d81b60; color: #fff; font: 700 12px/1 var(--kk-sans); }
.kk-menu__saved-count.hidden { display: none; }
.kk-menu__saved-go { margin-left: auto; color: var(--kk-brown); font-size: 20px; transition: transform 0.45s var(--kk-ease); }
.kk-menu__saved:hover .kk-menu__saved-go { transform: translateX(4px); }

.kk-menu__links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.kk-menu__links a { color: var(--kk-ink-2); font: 500 15px/1.4 var(--kk-sans); text-decoration: none; }
.kk-menu__links a:hover { color: var(--kk-brown); }

.kk-menu__foot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 14px var(--kk-pad) calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--kk-line);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--kk-ease), transform 0.7s var(--kk-ease);
}

.kk-menu__account {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--kk-ink);
    font: 600 15px/1 var(--kk-sans);
    text-decoration: none;
}
.kk-menu__account .material-symbols-outlined { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--kk-mist); font-size: 21px; }

body .kk-lang--mobile { display: inline-flex; }


/* ==========================================================================
   6. Footer
   ========================================================================== */
.kk-footer {
    position: relative;
    margin-top: clamp(80px, 11vw, 160px);
    padding: clamp(56px, 8vw, 112px) var(--kk-pad) 22px;
    border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
    background: var(--kk-ink-2);
    color: #f3f0f0;
    overflow: hidden;
    isolation: isolate;
}

/* Warm glow in the corner */
.kk-footer::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    z-index: -1;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 218, 185, 0.16), transparent 65%);
    pointer-events: none;
}

.kk-footer > * { max-width: var(--kk-max); margin-inline: auto; }

.kk-footer__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.75rem 3rem;
    padding-bottom: clamp(40px, 6vw, 72px);
    margin-bottom: clamp(40px, 6vw, 72px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.kk-footer__cta .kk-eyebrow { flex-basis: 100%; margin-bottom: -0.5rem; }
body .kk-footer__headline { margin: 0; max-width: 14ch; color: #fbf9f8; font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4.4rem); }
.kk-footer__cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.kk-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 56px);
}

@media (max-width: 900px) {
    .kk-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kk-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .kk-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kk-footer__tagline {
    margin: 0 0 1.25rem;
    max-width: 18ch;
    color: #fbf9f8;
    font-family: var(--kk-display);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-style: italic;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    line-height: 1.15;
}

.kk-footer__mail { display: block; margin-bottom: 0.4rem; color: var(--kk-peach); font-weight: 600; text-decoration: none; }
.kk-footer__mail:hover { text-decoration: underline; text-underline-offset: 4px; }
.kk-footer__brand .kk-lang { margin-top: 1rem; }

.kk-footer__title { margin: 0 0 1.1rem; color: var(--kk-peach); font: 700 12px/1 var(--kk-sans); letter-spacing: 0.16em; text-transform: uppercase; }
.kk-footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }

.kk-footer__col a {
    color: rgba(243, 240, 240, 0.78);
    font: 500 15px/1.35 var(--kk-sans);
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
    padding-bottom: 2px;
    transition: color 0.3s, background-size 0.45s var(--kk-ease);
}
.kk-footer__col a:hover { color: #fff; background-size: 100% 1px; }

/* Giant outlined wordmark; each letter fills and hops on hover */
.kk-footer__giant {
    display: flex;
    justify-content: center;
    margin-top: clamp(48px, 8vw, 96px);
    margin-bottom: clamp(8px, 2vw, 20px);
    font-family: var(--kk-display);
    font-size: clamp(3.4rem, 14.2vw, 13.4rem);
    font-weight: 600;
    line-height: 0.82;
    letter-spacing: -0.03em;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    white-space: nowrap;
    user-select: none;
    /* Letters rise from behind the divider below, not over the bottom bar.
       Open at the top and sides so the hover hop and the stroke are not cut. */
    clip-path: inset(-50% -4% 0 -4%);
}

/* Outer span: hover hop (CSS). Inner span: the rise-in (GSAP, motion.js). */
/* The display font builds letters from overlapping pieces (the arm of K/k
   crosses the stem), and a stroke over a transparent fill draws every one of
   those inner edges. Stroke first, then a fill in the footer colour on top:
   the inner lines are covered and only the letter's outer silhouette shows -
   the same single shape that fills with peach on hover. Opaque colours, since
   neighbouring letters overlap slightly with the tight tracking. */
.kk-giant__l {
    display: inline-block;
    color: var(--kk-ink-2);
    -webkit-text-stroke: 3px #b09781; /* peach at 55% over the footer; half sits under the fill */
    paint-order: stroke fill;
    transition: color 0.4s, transform 0.6s var(--kk-bounce), -webkit-text-stroke-color 0.4s;
}
.kk-giant__l > span { display: inline-block; }

.kk-giant__l:hover { color: var(--kk-peach); -webkit-text-stroke-color: var(--kk-peach); transform: translateY(-14%) rotate(-5deg); }

.kk-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(243, 240, 240, 0.6);
    font: 500 13px/1.4 var(--kk-sans);
}
.kk-footer__bottom p { margin: 0; }
.kk-footer__badges { display: flex; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.kk-footer__badges li { display: inline-flex; align-items: center; gap: 0.35rem; }
.kk-footer__badges .material-symbols-outlined { font-size: 16px; color: var(--kk-peach); }

.kk-totop {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem 0.55rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: #fbf9f8;
    font: 600 13px/1 var(--kk-sans);
    transition: background-color 0.3s, border-color 0.3s;
}
.kk-totop .material-symbols-outlined { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); font-size: 17px; transition: transform 0.45s var(--kk-bounce); }
.kk-totop:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.35); }
.kk-totop:hover .material-symbols-outlined { transform: translateY(-3px); }

/* Language pill, light-on-dark version */
body .kk-lang--footer { display: inline-flex; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); }
body .kk-lang--footer .kk-lang__link { color: rgba(243, 240, 240, 0.8); }
body .kk-lang--footer .kk-lang__link.is-current { background: var(--kk-peach); color: var(--kk-brown-3); }

@media (max-width: 560px) {
    .kk-footer__bottom { justify-content: center; text-align: center; }
    .kk-giant__l { -webkit-text-stroke-width: 2px; } /* smaller letters, thinner line */
}


/* ==========================================================================
   7. Sections (shared shell)
   ========================================================================== */
.kk-section {
    width: 100%;
    max-width: calc(var(--kk-max) + var(--kk-pad) * 2);
    margin: 0 auto;
    padding: clamp(72px, 10vw, 140px) var(--kk-pad) 0;
}

.kk-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin-bottom: clamp(28px, 4vw, 52px);
}
.kk-section__head h2 { margin: 0; max-width: 16ch; }
.kk-section__head--center { justify-content: center; text-align: center; }
.kk-section__head--center h2 { margin-inline: auto; }


/* ==========================================================================
   8. Home
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */
.kk-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(100svh, 980px);
    margin-top: calc(-1 * var(--kk-header-space));
    padding: calc(var(--kk-header-space) + clamp(24px, 4vw, 48px)) var(--kk-pad) clamp(64px, 8vw, 110px);
    overflow: hidden;
    /* Clip sideways only: the floating "newest" card's soft shadow must be
       able to spill past the hero's bottom edge (most visible on phones). */
    overflow-x: clip;
    overflow-y: visible;
    isolation: isolate;
}

/* No glows of its own: the page-wide mesh (main.css body::before) shows through */

.kk-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(40px, 6vw, 96px);
    width: 100%;
    max-width: var(--kk-max);
    margin: 0 auto;
}

/* Desktop: the accented line ("Jednostavno i lijepo.") never wraps, so the
   headline size is capped by the screen width too - otherwise the line ran
   past its column and nearly touched the photo. A wider gap gives it air. */
@media (min-width: 1024px) {
    .kk-hero__inner { gap: clamp(64px, 7vw, 128px); }
    body .kk-hero__title { font-size: min(clamp(2.55rem, 1.45rem + 4.4vw, 5.6rem), 4.5vw); }
}

@media (max-width: 1023px) {
    .kk-hero { min-height: 0; }
    .kk-hero__inner { grid-template-columns: 1fr; }
}

.kk-hero__title { margin: 0 0 1.5rem; max-width: 12ch; color: var(--kk-ink); }
/* Narrow phones: the accented line ("Beautifully Simple.") cannot wrap - the
   squiggle underlines it as one piece - so the size follows the screen width
   and the line keeps a clear margin from the edge (35px at 375, 30px at 320). */
@media (max-width: 480px) { body .kk-hero__title { font-size: min(2.55rem, 9.4vw); } }

.kk-hero__intro {
    max-width: 34rem;
    margin: 0;
    color: var(--kk-ink-2);
    font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
    line-height: 1.65;
}

.kk-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

@media (max-width: 520px) {
    .kk-hero__actions .kk-btn { flex: 1 1 100%; }
}

.kk-hero__visual {
    position: relative;
    width: min(100%, 540px);
    aspect-ratio: 4 / 5;
    justify-self: center;
}

@media (max-width: 1023px) { .kk-hero__visual { width: min(88%, 460px); margin-top: 8px; } }

.kk-hero__frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--kk-peach);
    animation: kk-morph 16s ease-in-out infinite alternate;
    border-radius: 48% 52% 44% 56% / 56% 44% 56% 44%;
    /* Safari drops overflow + border-radius clipping for a child on its own
       GPU layer (the parallax photo), leaving a square image on iPhone. A
       mask on the frame forces the rounded clip; isolation keeps it cheap. */
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
}

/* The shadow lives on its own layer behind the frame, never on the frame:
   the frame's reveal is a clip-path wipe, and a clip-path cuts a box-shadow
   off in a hard line while it moves. Same shape and morph as the frame (both
   start on load, so they stay in step); it fades in as the wipe finishes. */
.kk-hero__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: 0 40px 80px -40px rgba(79, 69, 61, 0.55);
    animation: kk-morph 16s ease-in-out infinite alternate, kk-shadow-in 1.1s var(--kk-ease) 0.7s both;
    border-radius: 48% 52% 44% 56% / 56% 44% 56% 44%;
    pointer-events: none;
}

.kk-hero__img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }

.kk-js [data-kk-reveal-img] { clip-path: inset(100% 0 0 0); }

/* Rotating stamp */
.kk-stamp {
    position: absolute;
    top: 6%;
    left: -9%;
    z-index: 3;
    width: clamp(104px, 11vw, 148px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(251, 249, 248, 0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 20px 40px -20px rgba(79, 69, 61, 0.45);
}
/* Ring only: a bare `.kk-stamp svg` also caught the heart icon in the core,
   pinning it to the top-left corner and spinning it. */
.kk-stamp__ring { position: absolute; inset: 0; }
.kk-stamp__ring svg { display: block; width: 100%; height: 100%; animation: kk-spin 22s linear infinite; }
.kk-stamp text { fill: var(--kk-brown); font: 700 10px var(--kk-sans); letter-spacing: 0.2em; text-transform: uppercase; }
.kk-stamp__core { position: absolute; inset: 26%; display: grid; place-items: center; border-radius: 50%; background: var(--kk-peach); color: var(--kk-brown); }
/* height from the width: a % height does not resolve inside the grid cell */
.kk-stamp__core .kk-icon { display: block; width: 58%; height: auto; aspect-ratio: 1; }

/* Newest listing, floating over the photo */
.kk-hero__newest {
    position: absolute;
    right: -7%;
    bottom: 9%;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: min(300px, 78%);
    padding: 10px 12px 10px 10px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 30px 60px -30px rgba(79, 69, 61, 0.55);
    color: var(--kk-ink);
    text-decoration: none;
    animation: kk-float 6s ease-in-out infinite;
    transition: box-shadow 0.4s;
}
.kk-hero__newest:hover { box-shadow: 0 34px 70px -28px rgba(79, 69, 61, 0.65); }
.kk-hero__newest-img { width: 64px; height: 64px; flex: none; overflow: hidden; border-radius: 16px; background: var(--kk-mist); }
.kk-hero__newest-img img { width: 100%; height: 100%; object-fit: cover; }
.kk-hero__newest-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.kk-hero__newest-tag { color: var(--kk-brown); font: 700 11.5px/1 var(--kk-sans); letter-spacing: 0.14em; text-transform: uppercase; }
.kk-hero__newest-name { overflow: hidden; font: 600 14px/1.25 var(--kk-sans); text-overflow: ellipsis; white-space: nowrap; }
.kk-hero__newest-price { color: var(--kk-brown); font: 700 14px/1 var(--kk-sans); }
.kk-hero__newest-go { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--kk-ink-2); color: #fff; font-size: 18px; transition: transform 0.45s var(--kk-bounce); }
.kk-hero__newest:hover .kk-hero__newest-go { transform: rotate(45deg); }

@media (max-width: 640px) {
    .kk-stamp { left: -4%; top: -3%; }
    .kk-hero__newest { right: 50%; bottom: -6%; transform: translateX(50%); animation: none; width: min(320px, 96%); }
    .kk-hero { padding-bottom: 88px; }
}

/* Scroll cue */
.kk-scrollcue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: none; }
.kk-scrollcue__mouse { display: block; width: 24px; height: 38px; border: 2px solid rgba(138, 101, 68, 0.4); border-radius: 14px; position: relative; }
.kk-scrollcue__mouse i { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--kk-brown); animation: kk-cue 1.8s var(--kk-ease) infinite; }
@keyframes kk-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
@media (min-width: 1024px) and (min-height: 760px) { .kk-scrollcue { display: block; } }

/* --- Marquee ------------------------------------------------------------- */
.kk-marquee {
    position: relative;
    z-index: 2;
    width: 106%;
    /* Pulled up over the bottom of the hero. The band is tilted -1.6deg at
       106% width, so its left end drops and its right end rises by ~1.48vw.
       -1.5vw keeps the top-left above the hero's bottom edge (no page strip
       above the band), and the extra 14px stays far less than the band's
       height, so the bottom-right never lifts off it (no hero strip below
       the band) - on any screen width. */
    margin: calc(-1.5vw - 14px) 0 0 -3%;
    padding: clamp(16px, 2.2vw, 26px) 0;
    overflow: hidden;
    background: var(--kk-peach);
    transform: rotate(-1.6deg);
    box-shadow: 0 20px 40px -30px rgba(138, 101, 68, 0.6);
}

/* Ultra-wide screens: the same tilt would lift the band's right end clean
   off the hero, so it tilts a little less (overlap scaled to match). */
@media (min-width: 2400px) {
    .kk-marquee { transform: rotate(-1deg); margin-top: calc(-0.93vw - 14px); }
}

/* Phones/tablets: the band runs as a CSS animation (motion.js sets --kk-mq-w,
   the width of one set of words, and the duration), paused off screen. */
.kk-marquee__track.is-css { animation: kk-marquee linear infinite; }
.kk-marquee.is-off .kk-marquee__track.is-css { animation-play-state: paused; }
@keyframes kk-marquee { to { transform: translate3d(calc(-1 * var(--kk-mq-w)), 0, 0); } }

.kk-marquee__track { display: flex; align-items: center; gap: clamp(22px, 3vw, 44px); width: max-content; will-change: transform; }

.kk-marquee__item {
    color: var(--kk-brown-3);
    font-family: var(--kk-display);
    font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.9rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    font-variation-settings: "SOFT" 100, "WONK" 0;
}
.kk-marquee__item:nth-of-type(even) { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }

.kk-marquee__icon { display: grid; place-items: center; color: var(--kk-brown); }
.kk-marquee__icon .kk-icon { width: clamp(30px, 3vw, 52px); height: clamp(30px, 3vw, 52px); animation: kk-spin 10s linear infinite; }

/* --- Categories ---------------------------------------------------------- */
.kk-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
@media (max-width: 767px) { .kk-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

body .kk-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: clamp(178px, 19vw, 250px);
    padding: clamp(16px, 1.8vw, 24px);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--kk-radius);
    background-color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 1px 0 #fff inset, 0 22px 44px -32px rgba(79, 69, 61, 0.45);
    color: var(--kk-ink);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    /* Stagger only the scroll-in; hover tint, shadow and lift start at once. */
    transition-property: opacity, transform, background-color, box-shadow, translate;
    transition-duration: 0.7s, 0.7s, 0.3s, 0.3s, 0.45s;
    transition-timing-function: var(--kk-ease);
    transition-delay: calc(var(--kk-i, 0) * 90ms), calc(var(--kk-i, 0) * 90ms), 0s, 0s, 0s;
}

@media (hover: hover) and (pointer: fine) {
    body .kk-cat:hover {
        background-color: var(--kk-tint);
        translate: 0 -6px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 30px 60px -30px rgba(79, 69, 61, 0.5);
    }
}

.kk-cat .category-card__pattern { color: var(--kk-fg); }
.kk-cat .category-card__pattern-grid .kk-icon { width: 24px; height: 24px; stroke-width: 2.8; }

.kk-cat__icon,
.kk-cat__name,
.kk-cat__meta { position: relative; z-index: 1; }

.kk-cat__icon {
    display: grid;
    place-items: center;
    width: clamp(54px, 5vw, 68px);
    height: clamp(54px, 5vw, 68px);
    aspect-ratio: 1;
    border-radius: 22px;
    background: var(--kk-tint);
    color: var(--kk-fg);
    transition: transform 0.6s var(--kk-bounce), background-color 0.3s;
}
/* Height from the width: a % height does not resolve in the grid tile, and
   the SVG then stretched the "square" into a 48x150 strip on phones. */
.kk-cat__icon .kk-icon { display: block; width: 66%; height: auto; aspect-ratio: 1; }
.kk-cat:hover .kk-cat__icon { transform: rotate(-8deg) scale(1.07); background: rgba(255, 255, 255, 0.65); }

.kk-cat__name {
    font-family: var(--kk-display);
    font-size: clamp(1.15rem, 0.95rem + 0.75vw, 1.6rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.01em;
    font-variation-settings: "SOFT" 100, "WONK" 0;
    margin-top: auto;
}

.kk-cat__meta { display: flex; align-items: center; justify-content: space-between; color: rgba(79, 69, 61, 0.75); font: 600 13px/1 var(--kk-sans); }

@media (max-width: 639px) {
    body .kk-cat { min-height: 0; gap: 0.85rem; padding: 14px; border-radius: 22px; }
    .kk-cat__icon { width: 48px; height: 48px; border-radius: 16px; }
    .kk-cat__name { font-size: 1.08rem; }
    .kk-cat__meta { font-size: 12px; }
    .kk-cat__meta .material-symbols-outlined { width: 28px; height: 28px; font-size: 16px; }
}
.kk-cat__meta .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid rgba(79, 69, 61, 0.18);
    border-radius: 50%;
    font-size: 18px;
    transition: transform 0.5s var(--kk-ease), background-color 0.3s, color 0.3s, border-color 0.3s;
}
.kk-cat:hover .kk-cat__meta .material-symbols-outlined { background: var(--kk-ink-2); color: #fff; border-color: var(--kk-ink-2); transform: rotate(-45deg); }

/* --- Rail of new listings ------------------------------------------------ */
.kk-rail__nav { display: flex; gap: 0.5rem; }
@media (max-width: 640px) { .kk-rail__nav { display: none; } }

.kk-rail {
    /* A scroller clips both axes: leave room for the hover lift above and the
       card shadow below, and pull the next section back up by the same amount. */
    margin: -14px calc(-1 * var(--kk-pad)) -40px;
    padding: 20px var(--kk-pad) 64px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--kk-pad);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
}
.kk-rail::-webkit-scrollbar { display: none; }
.kk-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.kk-rail.is-dragging a { pointer-events: none; }

.kk-rail__track { --kk-rail-gap: clamp(14px, 1.6vw, 22px); display: flex; gap: var(--kk-rail-gap); width: max-content; }
/* End spacer: Safari ignores a scroller's right padding, so the last card sat
   flush against the screen edge on iPhone. This keeps the same margin as the
   left side (the gap before it + its width = the page padding). */
.kk-rail__track::after { content: ''; flex: none; width: max(1px, calc(var(--kk-pad) - var(--kk-rail-gap))); }
.kk-rail { padding-right: 0; }
.kk-rail__track > * { width: clamp(250px, 24vw, 310px); flex: none; scroll-snap-align: start; }

/* --- The cycle ----------------------------------------------------------- */
.kk-cycle { padding: clamp(80px, 11vw, 150px) var(--kk-pad) 0; }

.kk-cycle__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(40px, 6vw, 96px);
    max-width: var(--kk-max);
    margin: 0 auto;
}

/* Not sticky: on desktop motion.js slides the dial down beside the active card
   instead. position: relative makes the aside the dial's offsetParent. */
.kk-cycle__aside { align-self: start; position: relative; }
.kk-cycle__aside h2 { margin: 0; }
.kk-cycle__intro { max-width: 30rem; margin: 1.25rem 0 0; color: var(--kk-ink-2); font-size: 1.08rem; line-height: 1.65; }

.kk-dial { position: relative; width: clamp(200px, 20vw, 260px); aspect-ratio: 1; margin-top: clamp(28px, 4vw, 48px); will-change: transform; }
.kk-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.kk-dial__track { fill: none; stroke: var(--kk-line); stroke-width: 2; stroke-dasharray: 4 6; }
.kk-dial__fill { fill: none; stroke: var(--kk-brown); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--kk-p, 0)); }
.kk-dial__dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 4px solid var(--kk-brown);
    border-radius: 50%;
    background: var(--kk-peach);
    /* 84/200 of the dial = the ring's radius */
    transform: rotate(calc(var(--kk-p, 0) * 360deg - 90deg)) translateX(calc(clamp(200px, 20vw, 260px) * 0.42));
}
.kk-dial__label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--kk-brown);
    font-family: var(--kk-display);
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem);
    font-style: italic;
    font-variation-settings: "SOFT" 100, "WONK" 1;
}

.kk-cycle__steps { display: grid; gap: clamp(16px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }

.kk-step {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--kk-radius);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 1px 0 #fff inset, 0 26px 50px -36px rgba(79, 69, 61, 0.45);
    overflow: hidden;
    transition: opacity 0.6s var(--kk-ease), transform 0.6s var(--kk-ease), box-shadow 0.6s;
}

@media (min-width: 1024px) {
    .kk-step { min-height: 300px; }
    .kk-cycle.is-ready .kk-step { opacity: 0.42; transform: scale(0.97); }
    .kk-cycle.is-ready .kk-step.is-active { opacity: 1; transform: none; box-shadow: 0 1px 0 #fff inset, 0 36px 70px -36px rgba(79, 69, 61, 0.55); }
}

.kk-step__num {
    position: absolute;
    top: 0.1em;
    right: 0.25em;
    color: transparent;
    font-family: var(--kk-display);
    font-size: clamp(4.5rem, 3rem + 5vw, 8rem);
    font-weight: 600;
    line-height: 1;
    -webkit-text-stroke: 1.5px rgba(79, 69, 61, 0.13);
    pointer-events: none;
}

.kk-step__icon { display: grid; place-items: center; width: 60px; height: 60px; grid-row: span 2; align-self: start; border-radius: 20px; background: var(--kk-step-bg); color: var(--kk-step-fg); }
.kk-step__icon .material-symbols-outlined { font-size: 30px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.kk-step__title { margin: 0; font-family: var(--kk-display); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); font-weight: 500; line-height: 1.05; font-variation-settings: "SOFT" 100, "WONK" 0; }
.kk-step__text { grid-column: 2; margin: 0; max-width: 34rem; color: var(--kk-ink-2); line-height: 1.6; }
.kk-step .kk-link-arrow { grid-column: 2; justify-self: start; margin-top: 0.75rem; }

@media (max-width: 1023px) {
    .kk-cycle__inner { grid-template-columns: 1fr; }
    .kk-cycle__aside { position: static; }
    .kk-dial { display: none; }
}

@media (max-width: 520px) {
    .kk-step { grid-template-columns: 1fr; }
    .kk-step__icon { grid-row: auto; }
    .kk-step__text,
    .kk-step .kk-link-arrow { grid-column: 1; }
}

/* --- Duo ------------------------------------------------------------------ */
.kk-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
@media (max-width: 767px) { .kk-duo { grid-template-columns: 1fr; } }

.kk-duo__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.9rem;
    min-height: clamp(320px, 34vw, 460px);
    padding: clamp(28px, 3.5vw, 52px);
    border-radius: clamp(28px, 3vw, 44px);
    color: var(--kk-ink);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
}
.kk-duo__tile--sell { --tile: #fffacd; --tile-fg: #7a6320; background: var(--tile); }
.kk-duo__tile--gift { --tile: #f8d7e3; --tile-fg: #844960; background: var(--tile); }

/* A soft white bloom grows from the corner on hover */
.kk-duo__tile::before {
    content: '';
    position: absolute;
    left: -20%;
    bottom: -40%;
    z-index: -1;
    width: 90%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transform: scale(0.2);
    transition: transform 0.9s var(--kk-ease);
}
.kk-duo__tile:hover::before { transform: scale(1.6); }

.kk-duo__icon { position: absolute; top: clamp(18px, 3vw, 40px); right: clamp(18px, 3vw, 40px); color: var(--tile-fg); transition: transform 0.9s var(--kk-bounce); }
.kk-duo__icon .kk-icon { width: clamp(110px, 13vw, 190px); height: clamp(110px, 13vw, 190px); stroke-width: 1.6; }
.kk-duo__tile:hover .kk-duo__icon { transform: rotate(-12deg) scale(1.08); }

.kk-duo__tile .kk-eyebrow { margin: 0; color: var(--tile-fg); }
body .kk-duo__title { max-width: 13ch; margin: 0; font-size: clamp(1.9rem, 1.35rem + 2.1vw, 3.1rem); line-height: 1.04; }
.kk-duo__title .kk-em { color: var(--tile-fg); }

.kk-duo__go {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.75rem 0.85rem 0.75rem 1.2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    font: 600 15px/1 var(--kk-sans);
    transition: background-color 0.35s, color 0.35s;
}
.kk-duo__go .material-symbols-outlined { font-size: 20px; transition: transform 0.45s var(--kk-bounce); }
.kk-duo__tile:hover .kk-duo__go { background: var(--kk-ink-2); color: #fff; }
.kk-duo__tile:hover .kk-duo__go .material-symbols-outlined { transform: rotate(45deg); }


/* ==========================================================================
   9. Page hero, steps, join invitation
   ========================================================================== */
.kk-phero {
    position: relative;
    margin-top: calc(-1 * var(--kk-header-space));
    padding: calc(var(--kk-header-space) + clamp(36px, 6vw, 96px)) var(--kk-pad) clamp(28px, 4vw, 56px);
    overflow: hidden;
    isolation: isolate;
}

/* The colour comes from the page-wide mesh (main.css body::before), not a box
   of its own that would end in a hard line under the hero. */

.kk-phero__inner { display: grid; align-items: center; gap: clamp(32px, 5vw, 80px); max-width: var(--kk-max); margin: 0 auto; }

@media (min-width: 1024px) { .kk-phero--visual .kk-phero__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); } }

.kk-phero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1.1rem; }
.kk-phero__meta .kk-eyebrow { margin: 0; }
.kk-phero__badge { padding: 0.4rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 999px; background: rgba(255, 255, 255, 0.7); color: var(--kk-ink-2); font: 600 12.5px/1 var(--kk-sans); }

.kk-phero__title { margin: 0; max-width: 16ch; color: var(--kk-ink); }
.kk-phero--compact .kk-phero__title { font-size: clamp(2.3rem, 1.5rem + 3vw, 4rem); }

.kk-phero__intro { max-width: 42rem; margin: 1.5rem 0 0; color: var(--kk-ink-2); font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.22rem); line-height: 1.65; }
.kk-phero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.1rem; }
@media (max-width: 520px) { .kk-phero__actions .kk-btn { flex: 1 1 100%; } }

.kk-phero__visual { position: relative; display: none; justify-self: end; }
@media (min-width: 1024px) { .kk-phero__visual { display: block; } }

.kk-medallion { position: relative; width: clamp(240px, 22vw, 320px); aspect-ratio: 1; }
.kk-medallion__ring { position: absolute; inset: 0; border: 1.5px dashed rgba(138, 101, 68, 0.4); border-radius: 50%; animation: kk-spin 50s linear infinite; }
.kk-medallion__core {
    position: absolute;
    inset: 13%;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #ffdab9 0%, #ffe9d6 100%);
    box-shadow: 0 30px 60px -30px rgba(138, 101, 68, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.8);
    color: var(--kk-brown);
    animation: kk-morph 12s ease-in-out infinite alternate;
    border-radius: 48% 52% 44% 56% / 56% 44% 56% 44%;
}
.kk-medallion__core .material-symbols-outlined { font-size: clamp(76px, 7vw, 108px); font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48; }
.kk-medallion__orbit { position: absolute; inset: 0; animation: kk-spin 14s linear infinite; }
.kk-medallion__orbit i { position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border: 3px solid var(--kk-cream); border-radius: 50%; background: #c8e7d8; }

/* Steps (page "how it works") */
.kk-steps__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(14px, 2vw, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.kk-steps__item {
    position: relative;
    padding: clamp(24px, 2.8vw, 36px);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--kk-radius);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 1px 0 #fff inset, 0 24px 48px -34px rgba(79, 69, 61, 0.45);
    overflow: hidden;
}
.kk-steps__num { position: absolute; top: 0.15em; right: 0.3em; color: transparent; font-family: var(--kk-display); font-size: 5rem; font-weight: 600; line-height: 1; -webkit-text-stroke: 1.5px rgba(79, 69, 61, 0.13); }

/* Points: the row under the steps (kinderkutak_points) - same grid, so the
   two rows line up; tucked close to the steps as one block. */
.kk-section.kk-points { padding-top: clamp(14px, 2vw, 24px); }
.kk-points__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(14px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.kk-points__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: clamp(20px, 2.2vw, 26px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--kk-radius);
    background: rgba(255, 255, 255, 0.5);
}
.kk-points__icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 16px; background: var(--kk-peach); color: var(--kk-brown); }
.kk-points__icon .material-symbols-outlined { font-size: 24px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.kk-points__title { margin: 2px 0 0.35rem; color: var(--kk-ink); font: 500 1.2rem/1.2 var(--kk-display); font-variation-settings: "SOFT" 100, "WONK" 0; }
.kk-points__text { margin: 0; color: var(--kk-ink-2); font-size: 15px; line-height: 1.55; }
.kk-steps__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1.4rem; border-radius: 18px; background: var(--kk-step-bg); color: var(--kk-step-fg); }
.kk-steps__icon .material-symbols-outlined { font-size: 28px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.kk-steps__title { margin: 0 0 0.6rem; font-family: var(--kk-display); font-size: 1.6rem; font-weight: 500; line-height: 1.1; font-variation-settings: "SOFT" 100, "WONK" 0; }
.kk-steps__text { margin: 0; color: var(--kk-ink-2); line-height: 1.6; }

/* Join invitation */
.kk-join {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(20px, 3vw, 44px);
    padding: clamp(28px, 4vw, 56px);
    border-radius: clamp(28px, 3vw, 44px);
    background: var(--kk-peach);
    overflow: hidden;
}
.kk-join__icon { display: grid; place-items: center; align-self: center; width: clamp(84px, 8vw, 116px); height: auto; aspect-ratio: 1; /* stays a circle */ border-radius: 50%; background: rgba(255, 255, 255, 0.6); color: var(--kk-brown); }
.kk-join__icon .kk-icon { width: 60%; height: auto; aspect-ratio: 1; } /* a % height did not resolve and pushed the circle taller */
body .kk-join h2 { margin: 0 0 0.5rem; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem); }
.kk-join p { margin: 0; color: var(--kk-brown-3); line-height: 1.6; }
.kk-join__action { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.kk-join .kk-btn { --bg: var(--kk-ink-2); --fg: #fff; --fill: var(--kk-brown); --icon-bg: rgba(255, 255, 255, 0.14); --icon-fg: #fff; }
.kk-join__hint { font-size: 13px; opacity: 0.75; }

@media (max-width: 900px) {
    .kk-join { grid-template-columns: 1fr; justify-items: start; }
}


/* ==========================================================================
   10. Product cards (shop grid, rail, related)
   ========================================================================== */
.kk-pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--kk-radius);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 0 #fff inset, 0 24px 50px -38px rgba(79, 69, 61, 0.55);
    overflow: hidden;
    transition-property: opacity, transform, box-shadow, translate;
    transition-duration: 0.7s, 0.7s, 0.45s, 0.45s;
    transition-timing-function: var(--kk-ease);
}

@media (hover: hover) and (pointer: fine) {
    .kk-pcard:hover { translate: 0 -6px; box-shadow: 0 1px 0 #fff inset, 0 34px 60px -34px rgba(79, 69, 61, 0.6); }
}

.kk-pcard__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    margin: 8px 8px 0;
    border-radius: calc(var(--kk-radius) - 8px);
    background: var(--kk-mist);
    overflow: hidden;
}
.kk-pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--kk-ease); }
.kk-pcard:hover .kk-pcard__media img { transform: scale(1.06); }

/* The age / size / sold chip sits on the photo (main.css .kk-chip) */
.kk-pcard .kk-chip { top: 12px; left: 12px; }

/* Second photo: fades in over the first on hover (mouse only) */
.kk-pcard__alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s var(--kk-ease), transform 1s var(--kk-ease); }
@media (hover: hover) and (pointer: fine) {
    .kk-pcard:hover .kk-pcard__alt { opacity: 1; transform: scale(1.03); }
}

/* "New": listed in the last week - bottom left of the photo, clear of the age chip */
.kk-pcard .kk-chip--new { top: auto; bottom: 12px; border-color: transparent; background: var(--kk-peach); color: var(--kk-brown-3); font-weight: 700; letter-spacing: 0.04em; }

/* Save heart (inc/saved.php), top right of the photo, above the card link */
.kk-save {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--kk-ink-2);
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s, transform 0.35s var(--kk-bounce);
}
.kk-save .material-symbols-outlined { font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; transition: font-variation-settings 0.2s; }
.kk-save:hover { transform: scale(1.08); color: #c2185b; }
.kk-save:focus-visible { outline: 2px solid var(--kk-brown); outline-offset: 2px; }
.kk-save[aria-pressed="true"] { background: #fff; color: #d81b60; }
.kk-save[aria-pressed="true"] .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.kk-save.is-popping { animation: kk-save-pop 0.5s var(--kk-bounce); }
@keyframes kk-save-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@media (max-width: 639px) {
    .kk-save { top: 12px; right: 12px; width: 34px; height: 34px; }
    .kk-save .material-symbols-outlined { font-size: 18px; }
    .kk-pcard .kk-chip--new { bottom: 8px; left: 8px; }
}

/* Header heart: its count bubble matches the cart's */
.kk-iconbtn--saved { position: relative; }
body .kk-saved-count {
    position: absolute;
    top: 4px;
    right: 1px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: #d81b60;
    color: #fff;
    font: 700 10.5px/19px var(--kk-sans);
    text-align: center;
    box-shadow: 0 0 0 2.5px var(--kk-cream);
}
body .kk-saved-count.hidden { display: none; }

.kk-pcard__body { display: flex; flex-direction: column; flex: 1; gap: 0.35rem; padding: 14px 18px 18px; }
.kk-pcard__cat { color: var(--kk-brown); font: 700 12px/1.2 var(--kk-sans); letter-spacing: 0.14em; text-transform: uppercase; }
.kk-pcard__title { margin: 0; font: 600 16px/1.3 var(--kk-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kk-pcard__title a { color: var(--kk-ink); text-decoration: none; }
.kk-pcard__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; } /* whole card is the link */
.kk-pcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; margin-top: auto; padding-top: 0.75rem; }
.kk-pcard__price { color: var(--kk-brown); font: 700 17px/1 var(--kk-sans); }
/* Rent prices: "/ month" after the amount (kk_rent_price_html), quieter than the price */
.kk-per { color: rgba(79, 69, 61, 0.65); font-size: 0.72em; font-weight: 600; white-space: nowrap; }
.kk-pcard__price del { color: rgba(79, 69, 61, 0.5); font-weight: 500; font-size: 13px; }

/* Add-to-cart / gift buttons become a round action above the card link */
/* The action takes the room left beside the price, and drops onto its own
   row when its pill is wider than that room (the green "View cart" pill is,
   on narrow cards) - so neither pill can push past the card's edge. */
.kk-pcard__action { position: relative; z-index: 2; display: flex; flex: 1 0 auto; justify-content: flex-end; max-width: 100%; }
.kk-pcard__action > * { flex: 1 1 auto; max-width: 100%; } /* fills its row: beside the price, or full width below it */
.kk-pcard__action .button,
.kk-pcard__action .kk-gift-ask {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: auto !important;
    min-height: 40px;
    margin: 0 !important;
    padding: 0.55rem 1rem !important;
    border-radius: 999px !important;
    background: var(--kk-peach) !important;
    color: var(--kk-brown-3) !important;
    font: 600 13px/1 var(--kk-sans) !important;
    white-space: nowrap;
    transition: background-color 0.3s, color 0.3s, transform 0.35s var(--kk-bounce) !important;
}
.kk-pcard__action .button:hover,
.kk-pcard__action .kk-gift-ask:hover { background: var(--kk-ink-2) !important; color: #fff !important; transform: scale(1.04); }
/* WooCommerce's second-row "View cart" link: the button becomes the link
   instead (assets/js/main.js). main.css shows it with !important. */
.kk-pcard__action a.added_to_cart { display: none !important; }

/* Adding: the label steps aside for a spinner, same size so nothing jumps */
.kk-pcard__action .button.loading,
body.single-product .kk-single .single_add_to_cart_button.loading {
    position: relative;
    color: transparent !important;
    opacity: 1 !important;
    pointer-events: none;
}
.kk-pcard__action .button.loading::after,
body.single-product .kk-single .single_add_to_cart_button.loading::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    width: 18px !important;
    height: 18px !important;
    margin: auto !important;
    border: 2.5px solid rgba(90, 66, 42, 0.25);
    border-top-color: var(--kk-brown-3);
    border-radius: 50%;
    animation: kk-spin 0.7s linear infinite !important;
}
body.single-product .kk-single .single_add_to_cart_button.loading::before { opacity: 0; }

/* In the cart: one green pill that goes to the cart (kk_view_cart_link()) */
.kk-incart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.5rem 1rem 0.5rem 0.75rem;
    border-radius: 999px;
    background: #c8e7d8;
    color: #2f4a40;
    font: 600 13px/1 var(--kk-sans);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s, color 0.3s, transform 0.35s var(--kk-bounce);
}
.kk-incart .material-symbols-outlined { font-size: 18px; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.kk-incart:hover { background: var(--kk-ink-2); color: #fff; transform: scale(1.04); }
.kk-incart.is-new { animation: kk-incart-pop 0.6s var(--kk-bounce); }
.kk-incart.is-new .material-symbols-outlined { animation: kk-incart-tick 0.7s var(--kk-bounce) 0.1s both; }
@keyframes kk-incart-pop { 0% { transform: scale(0.82); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
@keyframes kk-incart-tick { 0% { transform: scale(0) rotate(-90deg); } 100% { transform: none; } }

/* In-cart pill + its remove button (kk_view_cart_link() with a product id).
   Mouse: the bin slides out of the pill's right edge on hover / focus.
   Touch: always shown - there is no hover to reveal it. */
.kk-incart-group { display: inline-flex; align-items: stretch; gap: 6px; max-width: 100%; }
.kk-incart-group .kk-incart { flex: 1 1 auto; min-width: 0; }
.kk-incart__remove {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--kk-paper);
    color: var(--kk-ink-2);
    cursor: pointer;
    overflow: hidden;
    transition: width 0.4s var(--kk-ease), margin 0.4s var(--kk-ease), opacity 0.3s, background-color 0.25s, color 0.25s;
}
.kk-incart__remove .material-symbols-outlined { font-size: 19px; }
.kk-incart__remove:hover,
.kk-incart__remove:focus-visible { background: #ffdad6; color: #93000a; }
.kk-incart__remove:focus-visible { outline: 2px solid #93000a; outline-offset: 2px; }
.kk-incart__remove.is-busy { pointer-events: none; opacity: 0.6; }
.kk-incart__remove.is-busy .material-symbols-outlined { animation: kk-spin 0.9s linear infinite; }

@media (hover: hover) and (pointer: fine) {
    .kk-incart-group .kk-incart__remove { width: 0; margin-left: -6px; opacity: 0; }
    .kk-incart-group:hover .kk-incart__remove,
    .kk-incart-group:focus-within .kk-incart__remove { width: 40px; margin-left: 0; opacity: 1; }
}

/* Product page: the big pill's bin matches its height */
.kk-incart--lg-group { display: flex; width: 100%; }
.kk-incart--lg-group .kk-incart__remove { width: 62px; }
@media (hover: hover) and (pointer: fine) {
    .kk-incart--lg-group:hover .kk-incart__remove,
    .kk-incart--lg-group:focus-within .kk-incart__remove { width: 62px; }
}

/* The add-to-cart button coming back after a removal */
.kk-pcard__action .is-back { animation: kk-incart-pop 0.5s var(--kk-bounce); }

/* --- Notices (woocommerce/notices/*.php) - the card language of the site ---
   A white glass card with a tinted icon bubble; Woo's action link ("View
   cart", "Undo") becomes a small dark pill at the end of the line. Overrides
   the older rules in main.css ("WooCommerce Notices"). */
.woocommerce-notices-wrapper { position: relative; z-index: 5; } /* above decorative blobs */

body .woocommerce-message,
body .woocommerce-error,
body .woocommerce-info,
body .kk-notice {
    align-items: center;
    gap: 14px;
    margin: 0 0 1.5rem;
    padding: 12px 14px 12px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 #fff inset, 0 22px 44px -30px rgba(79, 69, 61, 0.5);
    color: var(--kk-ink);
    font: 500 15px/1.5 var(--kk-sans);
}
/* Woo focuses the notice so screen readers read it; no ring for that */
body .woocommerce-message:focus,
body .woocommerce-error:focus,
body .woocommerce-info:focus,
body .kk-notice:focus { outline: none; }

body .kk-notice .kk-notice__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 21px;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
body .kk-notice--success .kk-notice__icon { background: #c8e7d8; color: #2f4a40; }
body .kk-notice--error .kk-notice__icon { background: #ffdad6; color: #93000a; }
body .kk-notice--info .kk-notice__icon { background: #e0f7fa; color: #3f6266; }
body .kk-notice.kk-notice--error { border-color: rgba(255, 218, 214, 0.95) !important; }

/* Text, then the action pill pushed to the end of the line */
body .kk-notice__body { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
body .kk-notice--error .kk-notice__body { flex-direction: column; align-items: flex-start; gap: 0.35rem; } /* one line per problem */
/* Each error line lays out like a success notice: text, then its pill */
body .kk-notice__body li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; width: 100%; }
body .kk-notice__body li > .button,
body .kk-notice__body li > a.wc-forward { order: 2; margin: 0 0 0 auto; }
body .kk-notice__body > .button,
body .kk-notice__body > .woocommerce-Button,
body .kk-notice__body > a.wc-forward { order: 2; margin: 0 0 0 auto; }
body .kk-notice .button,
body .kk-notice .woocommerce-Button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 1.1rem !important;
    border-radius: 999px !important;
    background: var(--kk-ink-2) !important;
    color: #fff !important;
    font: 600 13.5px/1 var(--kk-sans) !important;
    letter-spacing: 0;
    justify-content: center;
    white-space: nowrap;
    box-shadow: none;
    transition: background-color 0.3s, transform 0.35s var(--kk-bounce) !important;
}
body .kk-notice .button:hover,
body .kk-notice .woocommerce-Button:hover { background: var(--kk-brown) !important; color: #fff !important; transform: translateY(-1px); box-shadow: none; }

@media (max-width: 640px) {
    body .woocommerce-message,
    body .woocommerce-error,
    body .woocommerce-info,
    body .kk-notice { align-items: flex-start; border-radius: 20px; font-size: 14.5px; }
    body .kk-notice__body > .button,
    body .kk-notice__body > .woocommerce-Button,
    body .kk-notice__body > a.wc-forward,
    body .kk-notice__body li > .button,
    body .kk-notice__body li > a.wc-forward { width: 100%; margin: 0.25rem 0 0; justify-content: center; }
}

/* --- My listings (inc/my-listings.php): account screen and /sell/ summary --- */
.kk-listings { display: grid; gap: 10px; }
.kk-listings--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.kk-listing {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 10px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 1px 0 #fff inset, 0 20px 40px -32px rgba(79, 69, 61, 0.5);
    color: var(--kk-ink);
    text-decoration: none;
    transition: transform 0.4s var(--kk-ease), box-shadow 0.4s var(--kk-ease);
}
.kk-listing:hover { transform: translateY(-2px); box-shadow: 0 1px 0 #fff inset, 0 26px 48px -30px rgba(79, 69, 61, 0.55); }
.kk-listing__thumb { display: grid; place-items: center; width: 64px; height: 64px; flex: none; overflow: hidden; border-radius: 16px; background: var(--kk-mist); color: rgba(79, 69, 61, 0.5); }
.kk-listing__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kk-listing__body { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.kk-listing__name { overflow: hidden; font: 600 15px/1.3 var(--kk-sans); text-overflow: ellipsis; white-space: nowrap; }
.kk-listing__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.kk-listing__price { color: var(--kk-brown); font: 700 14.5px/1 var(--kk-sans); }
.kk-listing__type { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: #e6e6fa; color: #4d4d80; font: 600 12px/1.2 var(--kk-sans); }
.kk-listing__status { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font: 600 12px/1.2 var(--kk-sans); }
.kk-listing__status--pending { background: var(--kk-mist); color: var(--kk-ink-2); }
.kk-listing__status--live { background: #c8e7d8; color: #2f4a40; }
.kk-listing__status--done { background: var(--kk-peach); color: var(--kk-brown-3); }
.kk-listing__go { flex: none; color: rgba(79, 69, 61, 0.45); transition: transform 0.4s var(--kk-ease); }
.kk-listing:hover .kk-listing__go { transform: translateX(3px); color: var(--kk-brown); }
.kk-listings__note { margin: 14px 4px 0; color: rgba(79, 69, 61, 0.7); font-size: 13.5px; }

.kk-listings-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: clamp(28px, 4vw, 44px) 24px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--kk-radius);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 1px 0 #fff inset, 0 24px 48px -36px rgba(79, 69, 61, 0.45);
    text-align: center;
}
.kk-listings-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 0.4rem; border-radius: 50%; background: var(--kk-peach); color: var(--kk-brown); }
.kk-listings-empty__icon .material-symbols-outlined { font-size: 30px; }
.kk-listings-empty h3 { margin: 0; color: var(--kk-ink); font: 500 1.35rem/1.2 var(--kk-display); }
.kk-listings-empty p { max-width: 34ch; margin: 0 0 0.75rem; color: var(--kk-ink-2); font-size: 15px; line-height: 1.55; }

/* --- Listing form submit: the strongest button on the page, as at checkout --- */
.kk-listing-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 58px;
    padding: 0 1.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--kk-ink-2);
    color: #fff;
    font: 700 16px/1 var(--kk-sans);
    cursor: pointer;
    box-shadow: 0 18px 40px -18px rgba(79, 69, 61, 0.7);
    transition: background-color 0.35s var(--kk-ease), transform 0.35s var(--kk-bounce), box-shadow 0.35s;
}
.kk-listing-submit:hover { background: var(--kk-brown); transform: translateY(-2px); box-shadow: 0 22px 44px -18px rgba(79, 69, 61, 0.6); }
.kk-listing-submit:focus-visible { outline: 2px solid var(--kk-brown); outline-offset: 3px; }
.kk-listing-submit .material-symbols-outlined { font-size: 21px; }

/* --- Listing photos: drop area + previews (inc/listing-form.php, assets/js/listing-form.js) --- */
.kk-drop__zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: clamp(24px, 4vw, 40px) 20px;
    border: 2px dashed rgba(138, 101, 68, 0.3);
    border-radius: 20px;
    background: #faf7f2;
    color: var(--kk-ink-2);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.25s, background-color 0.25s, transform 0.35s var(--kk-bounce);
}
.kk-drop__zone:hover,
.kk-drop.is-over .kk-drop__zone { border-color: var(--kk-brown); background: #fff; }
.kk-drop.is-over .kk-drop__zone { transform: scale(1.01); }
.kk-drop__zone:focus-within { border-color: var(--kk-brown); box-shadow: 0 0 0 4px rgba(255, 218, 185, 0.6); }
/* The real input: invisible but still there to focus, pick and post */
.kk-drop__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.kk-drop__icon { font-size: 36px; color: rgba(79, 69, 61, 0.55); transition: color 0.25s, transform 0.4s var(--kk-bounce); }
.kk-drop__zone:hover .kk-drop__icon,
.kk-drop.is-over .kk-drop__icon { color: var(--kk-brown); transform: translateY(-3px); }
.kk-drop__text { font: 500 15.5px/1.45 var(--kk-sans); }
.kk-drop__browse { color: var(--kk-brown); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.kk-drop__hint { color: rgba(79, 69, 61, 0.7); font-size: 13px; line-height: 1.45; }
/* With photos the area shrinks to an "add more" strip; full: hidden */
.kk-drop.has-files .kk-drop__zone { flex-direction: row; justify-content: center; gap: 10px; padding: 14px 18px; }
.kk-drop.has-files .kk-drop__icon { font-size: 26px; }
.kk-drop.has-files .kk-drop__hint { display: none; }
.kk-drop.is-full .kk-drop__zone { display: none; }

.kk-drop__previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.kk-drop__preview { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: var(--kk-mist); box-shadow: 0 10px 24px -18px rgba(79, 69, 61, 0.6); animation: kk-incart-pop 0.4s var(--kk-bounce); }
.kk-drop__preview img { width: 100%; height: 100%; object-fit: cover; }
.kk-drop__cover { position: absolute; left: 6px; bottom: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--kk-brown-3); font: 700 11.5px/1.2 var(--kk-sans); }
.kk-drop__remove { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--kk-ink-2); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.kk-drop__remove .material-symbols-outlined { font-size: 17px; }
.kk-drop__remove:hover,
.kk-drop__remove:focus-visible { background: #ffdad6; color: #93000a; }
.kk-drop__error { margin: 10px 0 0; color: #93000a; font: 600 13.5px/1.4 var(--kk-sans); }

/* --- Marketplace (inc/marketplace.php) ------------------------------------- */
.kk-listings__entry { display: grid; gap: 0; }
.kk-listing__status--order { background: #fff1c9; color: #6f5a1c; }

/* The order box under a sold listing: what the seller does next */
.kk-sale { margin: -8px 0 4px; padding: 18px 18px 16px; border: 1px solid rgba(255, 255, 255, 0.95); border-top: 0; border-radius: 0 0 22px 22px; background: rgba(255, 245, 235, 0.9); }
.kk-sale__state { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; color: var(--kk-ink); font: 600 14.5px/1.45 var(--kk-sans); }
.kk-sale__state .material-symbols-outlined { font-size: 20px; color: var(--kk-brown); }
.kk-sale__state--done .material-symbols-outlined { color: #2f4a40; }
.kk-sale__hint { margin: 0 0 12px 28px; color: var(--kk-ink-2); font-size: 13.5px; line-height: 1.5; }
.kk-sale__address { margin: 0 0 12px 28px; color: var(--kk-ink); font-style: normal; font-size: 14px; line-height: 1.55; }
.kk-sale form { margin: 0 0 0 28px; }
.kk-sale__ship { display: flex; flex-wrap: wrap; gap: 8px; }
.kk-sale__ship input[type="text"] { flex: 1 1 200px; min-height: 44px; padding: 0 14px; border: 1.5px solid transparent; border-radius: 999px; background: #fff; font: 500 14px/1 var(--kk-sans); }
.kk-sale__ship input[type="text"]:focus { border-color: var(--kk-brown); outline: none; }
.kk-sale__btn { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 1.2rem; border: 0; border-radius: 999px; background: var(--kk-ink-2); color: #fff; font: 700 14px/1 var(--kk-sans); cursor: pointer; transition: background-color 0.3s, transform 0.35s var(--kk-bounce); }
.kk-sale__btn:hover { background: var(--kk-brown); transform: translateY(-1px); }
.kk-sale__btn .material-symbols-outlined { font-size: 19px; }

/* Listing form without a bank account yet: where buyers should pay */
.kk-needbank { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: clamp(24px, 4vw, 40px) 16px; text-align: center; }
.kk-needbank__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 0.4rem; border-radius: 50%; background: var(--kk-peach); color: var(--kk-brown); font-size: 30px; }
.kk-needbank h3 { margin: 0; color: var(--kk-ink); font: 500 1.35rem/1.2 var(--kk-display); }
.kk-needbank p { max-width: 40ch; margin: 0 0 0.75rem; color: var(--kk-ink-2); font-size: 15px; line-height: 1.55; }

/* --- Live shop filters (assets/js/shop-filters.js) ------------------------ */
[data-kk-shop-results] { position: relative; transition: opacity 0.25s var(--kk-ease); }
[data-kk-shop-results].is-loading { opacity: 0.45; pointer-events: none; }
[data-kk-shop-results].is-loading::after {
    content: '';
    position: absolute;
    top: 140px;
    left: 50%;
    width: 34px;
    height: 34px;
    margin-left: -17px;
    border: 3px solid rgba(138, 101, 68, 0.2);
    border-top-color: var(--kk-brown);
    border-radius: 50%;
    animation: kk-spin 0.8s linear infinite;
}

/* --- Cart drawer (inc/cart-ux.php, assets/js/cart-ux.js) ------------------ */
.kk-drawer { position: fixed; inset: 0; z-index: 200; }
.kk-drawer[hidden] { display: none; }
body.kk-drawer-open { overflow: hidden; }

.kk-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(27, 28, 28, 0.32);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.4s var(--kk-ease);
}
.kk-drawer.is-open .kk-drawer__backdrop { opacity: 1; }

.kk-drawer__panel {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    width: min(420px, calc(100% - 24px));
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 28px;
    background: var(--kk-cream);
    box-shadow: 0 40px 90px -30px rgba(79, 69, 61, 0.55);
    outline: none;
    transform: translateX(calc(100% + 24px));
    transition: transform 0.5s var(--kk-ease);
}
.kk-drawer.is-open .kk-drawer__panel { transform: none; }

.kk-drawer__head { display: flex; align-items: center; gap: 10px; padding: 20px 20px 14px 24px; }
.kk-drawer__title { margin: 0; color: var(--kk-ink); font: 500 1.6rem/1.1 var(--kk-display); font-variation-settings: "SOFT" 100, "WONK" 0; }
.kk-drawer__count { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--kk-peach); color: var(--kk-brown-3); font: 700 13px/1 var(--kk-sans); }
.kk-drawer__close { display: grid; place-items: center; width: 42px; height: 42px; margin-left: auto; border: 0; border-radius: 50%; background: var(--kk-mist); color: var(--kk-ink-2); cursor: pointer; transition: background-color 0.25s, transform 0.4s var(--kk-bounce); }
.kk-drawer__close:hover { background: var(--kk-peach); transform: rotate(90deg); }

.kk-drawer__content { display: flex; flex: 1; flex-direction: column; min-height: 0; }

.kk-drawer__items { flex: 1; min-height: 0; margin: 0; padding: 4px 14px 12px; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.kk-drawer__item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
    padding: 10px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 30px -26px rgba(79, 69, 61, 0.5);
    transition: opacity 0.3s, transform 0.4s var(--kk-ease);
}
.kk-drawer__item.is-leaving { opacity: 0.4; transform: translateX(12px); }
.kk-drawer__thumb { display: block; width: 72px; height: 72px; overflow: hidden; border-radius: 16px; background: var(--kk-mist); }
.kk-drawer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kk-drawer__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kk-drawer__name { display: -webkit-box; overflow: hidden; color: var(--kk-ink); font: 600 15px/1.3 var(--kk-sans); text-decoration: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kk-drawer__name:hover { color: var(--kk-brown); }
.kk-drawer__price { color: var(--kk-brown); font: 700 15px/1 var(--kk-sans); }
.kk-drawer__remove { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--kk-paper); color: var(--kk-ink-2); cursor: pointer; transition: background-color 0.25s, color 0.25s; }
.kk-drawer__remove .material-symbols-outlined { font-size: 19px; }
.kk-drawer__remove:hover,
.kk-drawer__remove:focus-visible { background: #ffdad6; color: #93000a; }
.kk-drawer__remove.is-busy .material-symbols-outlined { animation: kk-spin 0.9s linear infinite; }

.kk-drawer__foot { padding: 16px 24px 22px; border-top: 1px solid var(--kk-line); }
.kk-drawer__total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--kk-ink-2); font: 600 15px/1.3 var(--kk-sans); }
.kk-drawer__total strong { color: var(--kk-brown); font: 500 1.7rem/1 var(--kk-display); font-variation-settings: "SOFT" 100, "WONK" 0; }
.kk-drawer__note { margin: 6px 0 16px; color: rgba(79, 69, 61, 0.7); font-size: 13px; }
.kk-drawer__checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 58px;
    border-radius: 999px;
    background: var(--kk-ink-2);
    color: #fff;
    font: 700 16px/1 var(--kk-sans);
    text-decoration: none;
    box-shadow: 0 18px 40px -18px rgba(79, 69, 61, 0.7);
    transition: background-color 0.35s var(--kk-ease), transform 0.35s var(--kk-bounce);
}
.kk-drawer__checkout:hover { background: var(--kk-brown); color: #fff; transform: translateY(-2px); }
.kk-drawer__checkout .material-symbols-outlined { font-size: 22px; transition: transform 0.35s var(--kk-bounce); }
.kk-drawer__checkout:hover .material-symbols-outlined { transform: translateX(4px); }
.kk-drawer__cartlink { display: block; margin-top: 12px; color: var(--kk-brown); font: 600 14px/1.3 var(--kk-sans); text-align: center; text-decoration: underline; text-underline-offset: 3px; }

.kk-drawer__empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; padding: 32px 28px 48px; text-align: center; }
.kk-drawer__empty-icon { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 0.5rem; border-radius: 50%; background: var(--kk-peach); color: var(--kk-brown); }
.kk-drawer__empty-icon .material-symbols-outlined { font-size: 38px; }
.kk-drawer__empty-title { margin: 0; color: var(--kk-ink); font: 500 1.5rem/1.15 var(--kk-display); }
.kk-drawer__empty-text { max-width: 26ch; margin: 0 0 0.75rem; color: var(--kk-ink-2); font-size: 14.5px; line-height: 1.55; }

/* Phones: a bottom sheet */
@media (max-width: 639px) {
    .kk-drawer__panel {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 88dvh;
        border-radius: 28px 28px 0 0;
        transform: translateY(100%);
    }
    .kk-drawer__foot { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}


/* ==========================================================================
   11. Inner pages
   ========================================================================== */

/* --- Contact ------------------------------------------------------------- */
.kk-contact-cards { display: grid; gap: clamp(12px, 1.6vw, 20px); }

/* --- FAQ / Returns accordions get the soft-card treatment ---------------- */
.kk-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }

/* --- Privacy: sticky contents + readable article ------------------------- */
.kk-legal {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    max-width: var(--kk-max);
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px) var(--kk-pad) 0;
}

.kk-legal__toc { position: sticky; top: calc(var(--kk-header-space) + 24px + var(--kk-adminbar)); align-self: start; }
.kk-legal__toc p { margin: 0 0 1rem; color: var(--kk-brown); font: 700 12px/1 var(--kk-sans); letter-spacing: 0.16em; text-transform: uppercase; }
.kk-legal__toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; border-left: 2px solid var(--kk-line); }
.kk-legal__toc a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: -2px;
    padding: 0.55rem 0.9rem;
    border-left: 2px solid transparent;
    color: var(--kk-ink-2);
    font: 500 14.5px/1.35 var(--kk-sans);
    text-decoration: none;
    transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}
.kk-legal__toc a .material-symbols-outlined { font-size: 19px; color: rgba(138, 101, 68, 0.6); }
.kk-legal__toc a:hover { color: var(--kk-brown); }
.kk-legal__toc a.is-active { border-left-color: var(--kk-brown); color: var(--kk-brown); font-weight: 600; background: linear-gradient(90deg, rgba(255, 218, 185, 0.45), transparent); }

.kk-legal__body { display: grid; gap: clamp(16px, 2vw, 24px); min-width: 0; }

.kk-legal__glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.kk-legal__glance div { padding: 20px; border-radius: 22px; background: var(--kk-peach); }
.kk-legal__glance .material-symbols-outlined { color: var(--kk-brown); font-size: 26px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.kk-legal__glance h2 { margin: 0.6rem 0 0.35rem; font: 700 15px/1.3 var(--kk-sans); color: var(--kk-brown-3); }
.kk-legal__glance p { margin: 0; color: var(--kk-brown-3); font-size: 14px; line-height: 1.5; opacity: 0.85; }

body .kk-legal .kk-policy {
    scroll-margin-top: calc(var(--kk-header-space) + 16px);
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--kk-radius);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 1px 0 #fff inset, 0 24px 48px -38px rgba(79, 69, 61, 0.45);
}
body .kk-legal .kk-policy__title { font-family: var(--kk-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 500; line-height: 1.15; font-variation-settings: "SOFT" 100, "WONK" 0; }
body .kk-legal .kk-policy__text { font-size: 16.5px; line-height: 1.75; }

@media (max-width: 1023px) {
    .kk-legal { grid-template-columns: 1fr; }
    .kk-legal__toc { position: static; }
    .kk-legal__toc ol { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
    .kk-legal__toc a { margin: 0; padding: 0.5rem 0.85rem; border: 1px solid var(--kk-line); border-radius: 999px; background: rgba(255, 255, 255, 0.7); font-size: 13.5px; }
    .kk-legal__toc a.is-active { border-color: var(--kk-brown); }
}

@media (max-width: 640px) { .kk-legal__glance { grid-template-columns: 1fr; } }

/* --- About --------------------------------------------------------------- */
.kk-story { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
@media (max-width: 900px) { .kk-story { grid-template-columns: 1fr; } }
.kk-story__photo { position: relative; aspect-ratio: 4 / 5; max-width: 460px; width: 100%; justify-self: center; }
.kk-story__frame { position: absolute; inset: 0; overflow: hidden; isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); background: var(--kk-peach); animation: kk-morph 16s ease-in-out infinite alternate; border-radius: 48% 52% 44% 56% / 56% 44% 56% 44%; }
/* Shadow on its own layer: the frame's mask (Safari rounded-clip fix) would cut it off */
.kk-story__photo::before { content: ''; position: absolute; inset: 0; box-shadow: 0 40px 80px -40px rgba(79, 69, 61, 0.55); animation: kk-morph 16s ease-in-out infinite alternate; border-radius: 48% 52% 44% 56% / 56% 44% 56% 44%; pointer-events: none; }
.kk-story__frame img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.kk-story__copy p { color: var(--kk-ink-2); font-size: 1.08rem; line-height: 1.75; }
.kk-story__copy h2 { margin: 0 0 1.25rem; }

body .kk-quote {
    position: relative;
    margin: 2rem 0;
    /* Left room for the opening mark, which hangs in its own column */
    padding: 1.1rem 1.5rem 1.2rem clamp(3.4rem, 2.6rem + 2vw, 4.4rem);
    border-left: 3px solid var(--kk-peach);
    color: var(--kk-brown);
    font-family: var(--kk-display);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
    font-style: italic;
    line-height: 1.25;
    font-variation-settings: "SOFT" 100, "WONK" 1;
}
/* Big upright mark in the padding column, its top level with the first line */
body .kk-quote::before {
    top: 1.05rem;
    left: clamp(0.9rem, 0.6rem + 0.8vw, 1.3rem);
    color: var(--kk-peach-2, #f4b98a);
    font-family: var(--kk-display);
    font-size: clamp(3.2rem, 2.6rem + 2vw, 4.4rem);
    font-style: normal;
    font-variation-settings: "SOFT" 100, "WONK" 0;
    line-height: 0.8;
}

.kk-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
@media (max-width: 900px) { .kk-values { grid-template-columns: 1fr; } }

/* --- 404 ----------------------------------------------------------------- */
.kk-404-mark { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 20px); margin-bottom: 1rem; color: var(--kk-brown); font-family: var(--kk-display); font-size: clamp(6rem, 18vw, 13rem); font-weight: 600; line-height: 0.85; font-variation-settings: "SOFT" 100, "WONK" 1; }
.kk-404-mark .kk-icon { width: 0.78em; height: 0.78em; stroke-width: 1.8; color: var(--kk-brown); animation: kk-spin 14s linear infinite; }


/* Single product: see section 15 */


/* ==========================================================================
   12. Shared bits for the inner pages
   ========================================================================== */
.kk-section--tight { padding-top: clamp(24px, 4vw, 56px); }

/* Two columns: an aside and a card (Contact, Returns) */
.kk-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
@media (max-width: 1023px) { .kk-split { grid-template-columns: 1fr; } }
.kk-split__aside { display: grid; gap: clamp(20px, 3vw, 32px); }

/* Form card */
.kk-formcard {
    position: relative;
    scroll-margin-top: calc(var(--kk-header-space) + 16px);
    padding: clamp(24px, 3.5vw, 48px);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: clamp(28px, 3vw, 40px);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 0 #fff inset, 0 40px 80px -50px rgba(79, 69, 61, 0.55);
}
.kk-formcard__title { margin: 0; font-family: var(--kk-display); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); font-weight: 500; line-height: 1.1; font-variation-settings: "SOFT" 100, "WONK" 0; }
.kk-formcard__note { margin: 0.5rem 0 0; color: var(--kk-ink-2); }
.kk-formcard .kk-notice { margin-top: 1.25rem; }

.kk-form { display: grid; gap: 1.1rem; margin-top: 1.75rem; }
.kk-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 560px) { .kk-form__row { grid-template-columns: 1fr; } }

.kk-form__field { display: grid; gap: 0.45rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.kk-form__field > span,
.kk-form__field legend { margin-bottom: 0.45rem; padding: 0; color: var(--kk-ink-2); font: 600 13px/1.2 var(--kk-sans); letter-spacing: 0.02em; }

body .kk-form input[type="text"],
body .kk-form input[type="email"],
body .kk-form input[type="tel"],
body .kk-form textarea {
    width: 100%;
    padding: 0.95rem 1.1rem;
    border: 1.5px solid transparent;
    border-radius: 18px;
    background: var(--kk-paper);
    color: var(--kk-ink);
    font: 500 16px/1.4 var(--kk-sans);
    box-shadow: none;
    transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
}
body .kk-form textarea { min-height: 140px; resize: vertical; }
body .kk-form input::placeholder,
body .kk-form textarea::placeholder { color: rgba(79, 69, 61, 0.45); }
body .kk-form input:focus,
body .kk-form textarea:focus { outline: none; border-color: var(--kk-brown); background: #fff; box-shadow: 0 0 0 4px rgba(255, 218, 185, 0.6); }

.kk-form__chips > div { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kk-form__submit { justify-self: start; border: 0; cursor: pointer; }
@media (max-width: 560px) { .kk-form__submit { justify-self: stretch; } }

/* Contact: ways to reach us */
.kk-ways { display: grid; gap: 12px; }
.kk-way {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 1px 0 #fff inset, 0 20px 40px -32px rgba(79, 69, 61, 0.45);
    color: var(--kk-ink);
    text-decoration: none;
    transition-property: opacity, transform, translate, background-color;
    transition-duration: 0.7s, 0.7s, 0.45s, 0.3s;
    transition-timing-function: var(--kk-ease);
}
.kk-way:hover { translate: 6px 0; background: #fff; }
.kk-way__icon { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 18px; background: var(--kk-peach); color: var(--kk-brown); }
.kk-way__icon .material-symbols-outlined { font-size: 26px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.kk-way__body { display: grid; flex: 1; gap: 2px; min-width: 0; }
.kk-way__title { color: var(--kk-ink-2); font: 600 13px/1.2 var(--kk-sans); }
.kk-way__text { overflow: hidden; color: var(--kk-brown); font: 700 17px/1.3 var(--kk-sans); text-overflow: ellipsis; }
.kk-way__note { color: rgba(79, 69, 61, 0.65); font-size: 13px; }
.kk-way__go { color: rgba(79, 69, 61, 0.35); transition: color 0.3s, transform 0.45s var(--kk-bounce); }
.kk-way:hover .kk-way__go { color: var(--kk-brown); transform: rotate(45deg); }

.kk-shortcuts { display: grid; justify-items: start; gap: 0.85rem; padding: 4px 4px 0; }
.kk-shortcuts .kk-eyebrow { margin-bottom: 0.25rem; }

/* Returns: vertical timeline */
.kk-split__aside > .kk-eyebrow { margin-bottom: 0; }
.kk-timeline { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.kk-timeline::before { content: ''; position: absolute; top: 28px; bottom: 28px; left: 27px; border-left: 2px dashed rgba(138, 101, 68, 0.3); }
.kk-timeline__item { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 1.1rem; }
.kk-timeline__icon { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--kk-peach); color: var(--kk-brown); box-shadow: 0 0 0 6px var(--kk-cream); }
.kk-timeline h3 { margin: 0.35rem 0; font-family: var(--kk-display); font-size: 1.45rem; font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 0; }
.kk-timeline p { margin: 0; color: var(--kk-ink-2); line-height: 1.6; }

/* FAQ accordion rows (the open/close animation lives in main.js) */
body .kk-faq__item {
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 1px 0 #fff inset, 0 18px 40px -32px rgba(79, 69, 61, 0.45);
    overflow: hidden;
}
body .kk-faq__item:hover { background: #fff; }
.kk-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    color: var(--kk-ink);
    font: 600 17px/1.4 var(--kk-sans);
    list-style: none;
    cursor: pointer;
}
.kk-faq__q::-webkit-details-marker { display: none; }
.kk-faq__toggle { position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--kk-peach); transition: background-color 0.3s, transform 0.5s var(--kk-ease); }
.kk-faq__toggle::before,
.kk-faq__toggle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--kk-brown); transition: background-color 0.3s; }
.kk-faq__toggle::after { transform: rotate(90deg); }
details[open]:not(.is-closing) .kk-faq__toggle { transform: rotate(135deg); background: var(--kk-ink-2); }
details[open]:not(.is-closing) .kk-faq__toggle::before,
details[open]:not(.is-closing) .kk-faq__toggle::after { background: #fff; }
.kk-faq__a { margin: 0; padding: 0 1.5rem 1.4rem; color: var(--kk-ink-2); font-size: 16px; line-height: 1.7; }

/* "Still have a question?" */
.kk-still {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem 1.75rem;
    max-width: 860px;
    margin: clamp(28px, 4vw, 48px) auto 0;
    padding: clamp(22px, 3vw, 32px);
    border-radius: 28px;
    background: var(--kk-peach);
}
.kk-legal .kk-still { max-width: none; margin-top: 8px; }
.kk-still__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, 0.65); color: var(--kk-brown); }
.kk-still__icon .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.kk-still__title { margin: 0 0 0.25rem; color: var(--kk-brown-3); font-family: var(--kk-display); font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.85rem); font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 0; }
.kk-still p { margin: 0; color: var(--kk-brown-3); opacity: 0.85; }
.kk-still .kk-btn { --bg: var(--kk-ink-2); --fg: #fff; --fill: var(--kk-brown); --icon-bg: rgba(255, 255, 255, 0.14); --icon-fg: #fff; }
@media (max-width: 760px) { .kk-still { grid-template-columns: 1fr; justify-items: start; } }

/* About: promises band, story stamp, two-button invitation */
.kk-promises {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 3vw, 40px);
    padding: clamp(24px, 3.5vw, 44px);
    border-radius: clamp(28px, 3vw, 40px);
    background: var(--kk-ink-2);
    color: #f3f0f0;
}
@media (max-width: 860px) { .kk-promises { grid-template-columns: 1fr; } }
.kk-promise { display: flex; align-items: flex-start; gap: 1rem; }
.kk-promise > .material-symbols-outlined { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 16px; background: rgba(255, 218, 185, 0.14); color: var(--kk-peach); font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.kk-promise h3 { margin: 0.2rem 0 0.3rem; color: #fbf9f8; font: 700 16px/1.3 var(--kk-sans); }
.kk-promise p { margin: 0; color: rgba(243, 240, 240, 0.72); font-size: 15px; line-height: 1.55; }

.kk-stamp--story { top: auto; bottom: 6%; left: auto; right: -6%; width: clamp(84px, 9vw, 120px); }
.kk-join__action--row { flex-direction: row; flex-wrap: wrap; align-items: center; }
@media (min-width: 901px) {
    .kk-join--about { grid-template-columns: auto minmax(0, 1fr); }
    .kk-join--about .kk-join__action { grid-column: 2; }
}

/* Centred hero (404) */
.kk-phero--center .kk-phero__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.kk-phero--center .kk-phero__title,
.kk-phero--center .kk-phero__intro { margin-inline: auto; }
.kk-phero--center .kk-phero__actions { justify-content: center; }

/* Big search field (404, search results) */
.kk-searchbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: min(100%, 560px);
    margin-top: 2rem;
    padding: 6px 6px 6px 20px;
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 24px 50px -34px rgba(79, 69, 61, 0.55);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.kk-searchbar:focus-within { border-color: var(--kk-brown); box-shadow: 0 0 0 4px rgba(255, 218, 185, 0.6), 0 24px 50px -34px rgba(79, 69, 61, 0.55); }
.kk-searchbar > .material-symbols-outlined { color: var(--kk-brown); }
body .kk-searchbar input[type="search"] { flex: 1; min-width: 0; padding: 0.6rem 0; border: 0; background: transparent; box-shadow: none; color: var(--kk-ink); font: 500 17px/1.3 var(--kk-sans); }
body .kk-searchbar input[type="search"]:focus { outline: none; box-shadow: none; }
.kk-searchbar button { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--kk-peach); color: var(--kk-brown); transition: background-color 0.3s, color 0.3s, transform 0.35s var(--kk-bounce); }
.kk-searchbar button:hover { background: var(--kk-ink-2); color: #fff; transform: scale(1.05); }

/* Row of category chips with icons */
.kk-chiprow { margin-top: 2rem; }
.kk-chiprow p { margin: 0 0 0.75rem; color: rgba(79, 69, 61, 0.7); font-size: 14px; }
.kk-chiprow > div { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kk-phero--center .kk-chiprow > div,
.kk-empty .kk-chiprow > div { justify-content: center; }
.kk-chiprow a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem 0.5rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--kk-ink);
    font: 600 14px/1 var(--kk-sans);
    text-decoration: none;
    transition: background-color 0.3s, translate 0.35s var(--kk-bounce);
}
.kk-chiprow a .kk-icon { width: 24px; height: 24px; color: var(--kk-brown); }
.kk-chiprow a:hover { background: var(--kk-peach); translate: 0 -2px; }

/* Empty state */
.kk-empty { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; max-width: 640px; margin: 0 auto; text-align: center; }
.kk-empty__icon { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: var(--kk-peach); color: var(--kk-brown); }
.kk-empty__icon .kk-icon { width: 60%; height: 60%; }
.kk-empty p { margin: 0; color: var(--kk-ink-2); font-size: 1.1rem; line-height: 1.6; }
.kk-empty .kk-chiprow { margin-top: 0; }

.kk-count-title { display: inline-flex; align-items: center; gap: 0.75rem; margin: 0; font-family: var(--kk-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 500; }
.kk-count-title span { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 999px; background: var(--kk-peach); color: var(--kk-brown-3); font: 700 14px/1 var(--kk-sans); }

/* Pages found by search */
.kk-pagelist { display: grid; gap: 12px; }
.kk-pagelist__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--kk-ink);
    text-decoration: none;
    transition-property: opacity, transform, translate, background-color;
    transition-duration: 0.7s, 0.7s, 0.45s, 0.3s;
}
.kk-pagelist__item:hover { translate: 6px 0; background: #fff; }
.kk-pagelist__icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 16px; background: #c8e7d8; color: #4d685d; }
.kk-pagelist__body { display: grid; flex: 1; gap: 4px; min-width: 0; }
.kk-pagelist__title { font: 600 17px/1.3 var(--kk-sans); }
.kk-pagelist__excerpt { display: -webkit-box; overflow: hidden; color: rgba(79, 69, 61, 0.75); font-size: 14px; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kk-pagelist__go { color: rgba(79, 69, 61, 0.35); transition: color 0.3s, transform 0.35s var(--kk-ease); }
.kk-pagelist__item:hover .kk-pagelist__go { color: var(--kk-brown); transform: translateX(4px); }

/* Product grids: two columns on phones (better browsing than one), then fill */
body.woocommerce ul.products,
.kk-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 640px) {
    body.woocommerce ul.products,
    .kk-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; gap: clamp(14px, 1.8vw, 24px) !important; }
}

@media (max-width: 639px) {
    .kk-pcard__body { padding: 10px 12px 14px; }
    .kk-pcard__title { font-size: 14.5px; }
    .kk-pcard__foot { flex-wrap: wrap; gap: 0.5rem; }
    .kk-pcard__action { flex-basis: 100%; }
    .kk-pcard__action .button,
    .kk-pcard__action .kk-gift-ask,
    .kk-pcard__action .kk-incart { width: 100% !important; }
    .kk-pcard .kk-chip { top: 8px; left: 8px; padding: 0.25rem 0.55rem; font-size: 12px; }
}


/* ==========================================================================
   13. Cart & Checkout
   Both are WooCommerce Blocks (React). css/woocommerce-blocks.css styles
   them with !important everywhere, so the overrides here use !important too
   and win by loading later. The header with the progress bar comes from
   kinderkutak_checkout_header() via page.php.
   ========================================================================== */

/* --- Progress bar: Cart -> Checkout -> Confirmation ---------------------- */
.kk-phero--checkout { padding-bottom: clamp(16px, 2.5vw, 32px); }
.kk-phero--checkout .kk-phero__title { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); }
.kk-phero--checkout .kk-phero__intro { margin-top: 0.75rem; }
.kk-phero--steps-only { padding-bottom: 0; }
.kk-phero--steps-only .kk-progress { margin-top: 0; }

.kk-progress {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 560px;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.kk-progress__step { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.kk-progress__step:last-child { flex: 0 0 auto; }

/* The connecting line between dots */
.kk-progress__step:not(:last-child)::after {
    content: '';
    flex: 1 1 auto;
    height: 2px;
    margin: 0 10px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, rgba(138, 101, 68, 0.3) 0 6px, transparent 6px 11px);
}
.kk-progress__step.is-done:not(:last-child)::after { background: var(--kk-brown); }

.kk-progress__step > a,
.kk-progress__step > span { display: inline-flex; align-items: center; gap: 0.55rem; color: rgba(79, 69, 61, 0.6); font: 600 14px/1 var(--kk-sans); text-decoration: none; white-space: nowrap; }

.kk-progress__dot { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 2px dashed rgba(138, 101, 68, 0.35); border-radius: 50%; background: rgba(255, 255, 255, 0.7); color: rgba(138, 101, 68, 0.6); transition: background-color 0.3s, transform 0.4s var(--kk-bounce); }
.kk-progress__dot .material-symbols-outlined { font-size: 19px; }

.kk-progress__step.is-current > * { color: var(--kk-ink); }
.kk-progress__step.is-current .kk-progress__dot { border: 0; background: var(--kk-peach); color: var(--kk-brown); box-shadow: 0 0 0 5px rgba(255, 218, 185, 0.45); }
.kk-progress__step.is-done .kk-progress__dot { border: 0; background: var(--kk-brown); color: #fff; }
.kk-progress__step > a:hover .kk-progress__dot { transform: scale(1.08); }

@media (max-width: 480px) {
    .kk-progress__label { display: none; }
    .kk-progress__step.is-current .kk-progress__label { display: inline; }
}

/* --- Shared: the two-column layout and the cards ------------------------- */
body .wp-block-woocommerce-cart,
body .wp-block-woocommerce-checkout { max-width: calc(var(--kk-max) + var(--kk-pad) * 2) !important; margin: 0 auto !important; padding-left: var(--kk-pad) !important; padding-right: var(--kk-pad) !important; }

body .wp-block-woocommerce-checkout { margin-top: 0 !important; margin-bottom: 0 !important; }
body .wc-block-components-sidebar-layout.wc-block-cart.wp-block-woocommerce-filled-cart-block { margin-top: 0 !important; }
body .wp-block-woocommerce-cart .wc-block-components-sidebar-layout,
body .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout { gap: clamp(16px, 2.5vw, 32px) !important; }

/* Cards: cart items, cart totals, checkout summary */
body .wp-block-woocommerce-cart .wc-block-components-main,
body .wp-block-woocommerce-cart .wc-block-components-sidebar,
body .wp-block-woocommerce-checkout .wc-block-components-sidebar {
    padding: clamp(20px, 2.6vw, 32px) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: var(--kk-radius) !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 1px 0 #fff inset, 0 34px 70px -48px rgba(79, 69, 61, 0.55) !important;
}

@media (min-width: 1024px) {
    body .wp-block-woocommerce-cart .wc-block-components-sidebar,
    body .wp-block-woocommerce-checkout .wc-block-components-sidebar { top: calc(var(--kk-header-space) + var(--kk-adminbar) + 12px) !important; }
}

/* Headings inside the blocks: the display face */
body .wp-block-woocommerce-cart .wc-block-cart__totals-title,
body .wp-block-woocommerce-checkout .wc-block-components-checkout-step__title,
body .wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
    margin: 0 !important;
    color: var(--kk-ink) !important;
    font-family: var(--kk-display) !important;
    font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.15 !important;
    text-transform: none !important;
    font-variation-settings: "SOFT" 100, "WONK" 0;
}
body .wp-block-woocommerce-cart .wc-block-cart__totals-title { display: block !important; margin-bottom: 0.75rem !important; padding: 0 !important; text-align: left !important; }

/* --- Cart items ----------------------------------------------------------- */
body .wc-block-cart-items__header th { padding: 0 0.5rem 0.9rem !important; border-bottom: 1px solid var(--kk-line) !important; color: var(--kk-brown) !important; font: 700 12px/1 var(--kk-sans) !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; }
body .wc-block-cart-items__row td { padding: 1.25rem 0.5rem !important; border-bottom: 1px solid var(--kk-line) !important; vertical-align: middle !important; }
body .wc-block-cart-items__row:last-child td { border-bottom: 0 !important; }

body .wc-block-cart-item__image img { width: 100% !important; aspect-ratio: 1; object-fit: cover; border-radius: 18px !important; background: var(--kk-mist); }

/* Phones: Woo lays each row out as a grid with FIXED 80px + 132px columns,
   which plus cell padding overflowed the card. Fluid middle column instead. */
@media (max-width: 639px) {
    body table.wc-block-cart-items { width: 100% !important; }
    body .wc-block-cart-items__row { grid-template-columns: 72px minmax(0, 1fr) auto !important; column-gap: 12px !important; padding: 16px 0 !important; }
    body .wc-block-cart-items__row td { padding: 0 !important; border: 0 !important; }
    body .wc-block-cart-items__row + .wc-block-cart-items__row { border-top: 1px solid var(--kk-line); }
    body .wc-block-cart-item__product .wc-block-components-product-name { font-size: 15.5px !important; }
}

body .wc-block-cart-item__product .wc-block-components-product-name { color: var(--kk-ink) !important; font: 600 17px/1.3 var(--kk-sans) !important; text-decoration: none !important; transition: color 0.3s; }
body .wc-block-cart-item__product .wc-block-components-product-name:hover { color: var(--kk-brown) !important; }
body .wc-block-cart-item__prices,
body .wc-block-cart-item__total .wc-block-components-product-price { color: var(--kk-brown) !important; font: 700 16px/1.3 var(--kk-sans) !important; }

/* Every listing is one of a kind (sold individually), so Woo shows no
   quantity stepper - only this icon-only remove button. Give it a label so it
   reads as "Remove" rather than an empty dot; the icon was squeezed to 0px. */
body .wc-block-cart-item__remove-link {
    display: inline-flex !important;
    align-items: center;
    gap: 0.3rem;
    width: auto !important;
    height: auto !important;
    margin-top: 0.6rem !important;
    padding: 0.4rem 0.85rem 0.4rem 0.55rem !important;
    border-radius: 999px !important;
    background: var(--kk-mist) !important;
    color: var(--kk-ink-2) !important;
    font: 600 12.5px/1 var(--kk-sans) !important;
    text-decoration: none !important;
    transition: background-color 0.3s, color 0.3s !important;
}
body .wc-block-cart-item__remove-link:hover { background: #ffdad6 !important; color: #93000a !important; }
body .wc-block-cart-item__remove-link svg { flex: none; width: 18px !important; height: 18px !important; fill: currentColor; }
body .wc-block-cart-item__remove-link::after { content: 'Remove'; }
html[lang^="hr"] body .wc-block-cart-item__remove-link::after { content: 'Ukloni'; }

/* --- Totals --------------------------------------------------------------- */
body .wp-block-woocommerce-cart .wc-block-components-totals-item,
body .wp-block-woocommerce-checkout .wc-block-components-totals-item { color: var(--kk-ink-2) !important; font: 500 15px/1.4 var(--kk-sans) !important; }

body .wc-block-components-totals-footer-item { margin-top: 0.5rem !important; padding-top: 1rem !important; border-top: 1px dashed rgba(138, 101, 68, 0.35) !important; }
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: var(--kk-ink) !important; font: 700 16px/1.3 var(--kk-sans) !important; }
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body .wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
    color: var(--kk-brown) !important;
    font-family: var(--kk-display) !important;
    font-size: clamp(1.7rem, 1.4rem + 0.8vw, 2.1rem) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}
body .wc-block-components-totals-item__description { color: rgba(79, 69, 61, 0.65) !important; font-size: 12.5px !important; }

body .wc-block-components-totals-coupon .wc-block-components-panel__button { color: var(--kk-brown) !important; font: 600 14px/1.3 var(--kk-sans) !important; }

/* --- The big buttons: Proceed to checkout / Place order ------------------- */
body .wc-block-cart__submit-button,
body .wc-block-components-checkout-place-order-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6rem !important;
    width: 100% !important;
    min-height: 60px !important;
    padding: 0 1.75rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    /* The one step that matters most gets the strongest colour on the page */
    background: var(--kk-ink-2) !important;
    color: #fff !important;
    font: 700 16px/1 var(--kk-sans) !important;
    text-decoration: none !important;
    box-shadow: 0 18px 40px -18px rgba(79, 69, 61, 0.7) !important;
    transition: background-color 0.4s var(--kk-ease), color 0.4s, transform 0.4s var(--kk-bounce), box-shadow 0.4s !important;
}
body .wc-block-cart__submit-button::after,
body .wc-block-components-checkout-place-order-button::after {
    content: 'arrow_forward';
    font-family: 'Material Symbols Rounded';
    font-size: 22px;
    font-weight: normal;
    font-feature-settings: 'liga';
    transition: transform 0.4s var(--kk-bounce);
}
body .wc-block-cart__submit-button:hover,
body .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
    background: var(--kk-brown) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 22px 44px -18px rgba(79, 69, 61, 0.6) !important;
}
body .wc-block-cart__submit-button:hover::after,
body .wc-block-components-checkout-place-order-button:hover::after { transform: translateX(4px); }

/* --- Checkout: every section is its own numbered card --------------------- */
body .wp-block-woocommerce-checkout .wc-block-components-main {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body .wc-block-checkout__form { counter-reset: kk-step; }

body .wp-block-woocommerce-checkout .wc-block-components-checkout-step {
    counter-increment: kk-step;
    position: relative;
    margin: 0 0 16px !important;
    padding: clamp(20px, 2.6vw, 32px) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: var(--kk-radius) !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 1px 0 #fff inset, 0 30px 60px -48px rgba(79, 69, 61, 0.55) !important;
}

/* WooCommerce's own step-number rail would double up with the badges */
body .wp-block-woocommerce-checkout .wc-block-components-checkout-step::after,
body .wp-block-woocommerce-checkout .wc-block-components-checkout-step__container::after { display: none !important; }

body .wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading-container { margin-bottom: 1.25rem !important; }
body .wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading { display: flex !important; align-items: center !important; gap: 0.85rem !important; margin: 0 !important; }
body .wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading::before {
    content: counter(kk-step);
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: var(--kk-peach);
    color: var(--kk-brown-3);
    font: 700 15px/1 var(--kk-sans);
}
body .wp-block-woocommerce-checkout .wc-block-components-checkout-step__description { margin: 0.25rem 0 1rem !important; color: rgba(79, 69, 61, 0.7) !important; font-size: 14px !important; }
body .wp-block-woocommerce-checkout .wc-block-components-checkout-step__content { padding: 0 !important; }

/* Fields: soft paper wells, peach focus ring (the floating labels keep their
   positions from woocommerce-blocks.css - only surface and shape change) */
body .wc-block-components-text-input input,
body .wc-blocks-components-select__container {
    border: 1.5px solid transparent !important;
    border-radius: 16px !important;
    background-color: var(--kk-paper) !important;
    box-shadow: none !important;
}
body .wc-block-components-text-input input:hover:not(:focus),
body .wc-blocks-components-select__container:hover:not(:focus-within) { border-color: rgba(138, 101, 68, 0.3) !important; background-color: #fff !important; }
body .wc-block-components-text-input input:focus,
body .wc-blocks-components-select__container:focus-within { border-color: var(--kk-brown) !important; background-color: #fff !important; box-shadow: 0 0 0 4px rgba(255, 218, 185, 0.6) !important; }
body .wc-block-components-text-input.has-error input { border-color: #ba1a1a !important; background-color: #fffafa !important; }
body .wc-block-components-text-input input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--kk-paper) inset !important; }

/* Shipping / payment choices: rounded option cards, the chosen one lifted */
body .wp-block-woocommerce-checkout .wc-block-components-radio-control__option,
body .wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option {
    border: 1.5px solid transparent !important;
    border-radius: 18px !important;
    background: var(--kk-paper) !important;
    transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s !important;
}
body .wp-block-woocommerce-checkout .wc-block-components-radio-control__option-checked,
body .wp-block-woocommerce-checkout .wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked,
body .wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    border-color: var(--kk-brown) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(255, 218, 185, 0.55) !important;
}

/* Order note, terms, the action row */
body .wp-block-woocommerce-checkout .wc-block-checkout__add-note { border: 0 !important; border-radius: 18px !important; background: var(--kk-paper) !important; }
body .wp-block-woocommerce-checkout .wc-block-checkout__terms { margin: 0.5rem 0 1rem !important; padding: 0 0.25rem !important; border: 0 !important; }
body .wp-block-woocommerce-checkout .wc-block-checkout__actions { padding: 0 !important; }
body .wp-block-woocommerce-checkout .wc-block-checkout__actions_row { align-items: center !important; gap: 1rem !important; }
body .wp-block-woocommerce-checkout .wc-block-components-checkout-return-to-cart-button { color: var(--kk-brown) !important; font: 600 15px/1 var(--kk-sans) !important; text-decoration: none !important; }

/* Summary items: rounded thumbnails, readable lines */
body .wc-block-components-order-summary-item__image img { border-radius: 14px !important; }
/* Every item is a single piece, so the line total always equals the price
   under the name - show it once. */
body .wc-block-components-order-summary-item__total-price { display: none !important; }
body .wc-block-components-order-summary-item__description .wc-block-components-product-name { color: var(--kk-ink) !important; font: 600 14.5px/1.35 var(--kk-sans) !important; }
body .wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title { padding-bottom: 0.75rem !important; }

/* --- Empty cart ------------------------------------------------------------ */
body .wp-block-woocommerce-empty-cart-block { padding-top: clamp(8px, 2vw, 24px) !important; }
.kk-empty--cart { max-width: 720px; padding-bottom: clamp(32px, 5vw, 64px); }

/* kinderkutak_empty_cart_hero() prints this beside Woo's empty-cart block,
   not inside it, so React never removes it - it used to show under a FULL
   cart too. Hide it whenever the filled cart is on the page; when the last
   item is removed, Woo swaps the filled block out and this reappears. */
.wp-block-woocommerce-cart:has(.wp-block-woocommerce-filled-cart-block) .kk-empty--cart,
.wp-block-woocommerce-cart:has(.wc-block-components-sidebar-layout.wc-block-cart) .kk-empty--cart { display: none; }
body .wp-block-woocommerce-empty-cart-block h2.kk-empty__title {
    margin: 0 !important;
    color: var(--kk-ink) !important;
    font-family: var(--kk-display) !important;
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem) !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em;
    line-height: 1.06 !important;
    font-variation-settings: "SOFT" 100, "WONK" 0;
}
.kk-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
@media (max-width: 520px) { .kk-empty__actions .kk-btn { flex: 1 1 100%; } }
body .wp-block-woocommerce-empty-cart-block .wp-block-heading { font-family: var(--kk-display) !important; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem) !important; font-weight: 500 !important; }


/* ==========================================================================
   14. My Account
   ========================================================================== */
.kk-phero--account { padding-bottom: clamp(20px, 3vw, 36px); }
.kk-phero--account .kk-phero__title { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); }

.kk-account {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
    max-width: calc(var(--kk-max) + var(--kk-pad) * 2);
    margin: 0 auto;
    padding: 0 var(--kk-pad);
}

.kk-account__aside { position: sticky; top: calc(var(--kk-header-space) + var(--kk-adminbar) + 12px); }
/* woocommerce-layout.css floats this at width 68% for its own two-column layout */
.woocommerce-account .kk-account__main { float: none; width: auto; min-width: 0; }

.kk-account__card {
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--kk-radius);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 1px 0 #fff inset, 0 34px 70px -48px rgba(79, 69, 61, 0.55);
}

.kk-account__me { display: flex; align-items: center; gap: 0.85rem; padding: 10px 10px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--kk-line); }
.kk-account__avatar {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: none;
    background: var(--kk-peach);
    color: var(--kk-brown);
    font-family: var(--kk-display);
    font-size: 1.6rem;
    font-weight: 600;
    animation: kk-morph 10s ease-in-out infinite alternate;
    border-radius: 48% 52% 44% 56% / 56% 44% 56% 44%;
}
.kk-account__who { display: grid; gap: 2px; min-width: 0; }
.kk-account__name { overflow: hidden; color: var(--kk-ink); font: 700 15.5px/1.3 var(--kk-sans); text-overflow: ellipsis; white-space: nowrap; }
.kk-account__mail { overflow: hidden; color: rgba(79, 69, 61, 0.65); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.kk-account-nav { display: grid; gap: 2px; }
.kk-account-nav__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 16px;
    color: var(--kk-ink-2);
    font: 600 14.5px/1.2 var(--kk-sans);
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s, translate 0.35s var(--kk-ease);
}
.kk-account-nav__link .material-symbols-outlined { font-size: 21px; color: rgba(138, 101, 68, 0.7); transition: color 0.3s; }
.kk-account-nav__link:hover { background: rgba(255, 218, 185, 0.35); color: var(--kk-brown); translate: 3px 0; }
.kk-account-nav__link.is-current { background: var(--kk-peach); color: var(--kk-brown-3); }
.kk-account-nav__link.is-current .material-symbols-outlined { color: var(--kk-brown); font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.kk-account-nav__link--customer-logout { margin-top: 6px; border-top: 1px solid var(--kk-line); border-radius: 0 0 16px 16px; padding-top: 0.95rem; }
.kk-account-nav__link--customer-logout:hover { background: #ffdad6; color: #93000a; }
.kk-account-nav__link--customer-logout:hover .material-symbols-outlined { color: #93000a; }

@media (max-width: 1023px) {
    /* minmax(0, …): a bare 1fr would grow to the nowrap pill row's full width */
    .kk-account { grid-template-columns: minmax(0, 1fr); }
    .kk-account__aside { position: static; min-width: 0; }
    .kk-account__card { padding: 10px; }
    .kk-account__me { padding: 6px 6px 12px; }
    /* Navigation becomes a scrolling pill row */
    .kk-account-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; padding: 2px 10px 4px; scroll-snap-type: x proximity; }
    .kk-account-nav::-webkit-scrollbar { display: none; }
    .kk-account-nav__link { flex: none; padding: 0.6rem 0.9rem; border-radius: 999px; background: var(--kk-paper); scroll-snap-align: start; white-space: nowrap; }
    .kk-account-nav__link:hover { translate: none; }
    .kk-account-nav__link--customer-logout { margin: 0; border: 0; border-radius: 999px; padding-top: 0.6rem; }
}

/* --- Dashboard ------------------------------------------------------------ */
.kk-dash { display: grid; gap: clamp(28px, 4vw, 44px); }
.kk-dash__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.kk-dash__head h2 { margin: 0; font-family: var(--kk-display); font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.9rem); font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 0; }

.kk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); }
@media (max-width: 760px) { .kk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.kk-stat {
    display: grid;
    gap: 0.35rem;
    padding: clamp(16px, 2vw, 22px);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 1px 0 #fff inset, 0 24px 48px -38px rgba(79, 69, 61, 0.5);
    color: var(--kk-ink);
    text-decoration: none;
    transition-property: opacity, transform, translate, background-color;
    transition-duration: 0.7s, 0.7s, 0.45s, 0.3s;
    transition-timing-function: var(--kk-ease);
}
.kk-stat:hover { translate: 0 -4px; background-color: var(--kk-tint); }
.kk-stat__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 0.4rem; border-radius: 14px; background: var(--kk-tint); color: var(--kk-fg); }
.kk-stat__icon .material-symbols-outlined { font-size: 22px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.kk-stat:hover .kk-stat__icon { background: rgba(255, 255, 255, 0.7); }
.kk-stat__value { color: var(--kk-ink); font-family: var(--kk-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 600; line-height: 1.05; white-space: nowrap; }
.kk-stat__label { color: rgba(79, 69, 61, 0.7); font: 700 12px/1.2 var(--kk-sans); letter-spacing: 0.12em; text-transform: uppercase; }

.kk-latest {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 14px 18px 14px 14px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 1px 0 #fff inset, 0 24px 48px -38px rgba(79, 69, 61, 0.5);
    color: var(--kk-ink);
    text-decoration: none;
    transition: translate 0.45s var(--kk-ease), box-shadow 0.45s;
}
.kk-latest:hover { translate: 0 -3px; box-shadow: 0 1px 0 #fff inset, 0 30px 56px -36px rgba(79, 69, 61, 0.6); }
.kk-latest__thumbs { display: flex; }
.kk-latest__thumbs img,
.kk-latest__thumbs > .material-symbols-outlined { width: 56px; height: 56px; border: 3px solid #fff; border-radius: 16px; background: var(--kk-mist); object-fit: cover; }
.kk-latest__thumbs > .material-symbols-outlined { display: grid; place-items: center; color: rgba(79, 69, 61, 0.5); }
.kk-latest__thumbs img + img { margin-left: -18px; }
.kk-latest__body { display: grid; gap: 3px; min-width: 0; }
.kk-latest__no { font: 700 16px/1.3 var(--kk-sans); }
.kk-latest__meta { color: rgba(79, 69, 61, 0.7); font-size: 13.5px; }
.kk-latest__total { color: var(--kk-brown); font: 700 16px/1 var(--kk-sans); white-space: nowrap; }
.kk-latest__go { color: rgba(79, 69, 61, 0.35); transition: color 0.3s, transform 0.4s var(--kk-ease); }
.kk-latest:hover .kk-latest__go { color: var(--kk-brown); transform: translateX(4px); }
@media (max-width: 640px) {
    .kk-latest { grid-template-columns: auto minmax(0, 1fr) auto; }
    .kk-latest .kk-order__status { grid-column: 2; justify-self: start; }
    .kk-latest__total { grid-column: 3; grid-row: 1; }
    .kk-latest__go { display: none; }
    .kk-latest__thumbs img + img { display: none; }
}

.kk-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); }
@media (max-width: 760px) { .kk-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kk-quick__tile {
    position: relative;
    display: grid;
    gap: 1.6rem;
    padding: 18px;
    border-radius: 24px;
    background: var(--kk-paper);
    color: var(--kk-ink);
    text-decoration: none;
    transition-property: opacity, transform, background-color;
    transition-duration: 0.7s, 0.7s, 0.3s;
}
.kk-quick__tile:hover { background: var(--kk-peach); }
.kk-quick__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--kk-brown); }
.kk-quick__label { font: 700 15px/1.25 var(--kk-sans); }
.kk-quick__go { position: absolute; top: 16px; right: 16px; color: rgba(79, 69, 61, 0.35); transition: transform 0.45s var(--kk-bounce), color 0.3s; }
.kk-quick__tile:hover .kk-quick__go { color: var(--kk-brown); transform: rotate(45deg); }

.kk-join--welcome h2 { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.2rem) !important; }

/* --- The other account screens: same card language ------------------------ */
.kk-account__main .glass-panel,
.kk-account__main .kk-order {
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 1px 0 #fff inset, 0 24px 48px -38px rgba(79, 69, 61, 0.5) !important;
}

.kk-account__main h2.font-headline-md,
.kk-account__main h3.font-headline-md,
.kk-account__main .woocommerce-column__title,
.kk-account__main legend.font-headline-md {
    font-family: var(--kk-display) !important;
    font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem) !important;
    font-weight: 500 !important;
    color: var(--kk-ink) !important;
    border-bottom: 0 !important;
    font-variation-settings: "SOFT" 100, "WONK" 0;
}

/* Account forms (details, addresses, login): the same paper wells as the checkout */
body .kk-account__main input.input-glass,
body .kk-account__main textarea.input-glass,
body .kk-account__main select.input-glass,
body .kk-account__main .woocommerce-address-fields select,
body .kk-login input.input-text {
    min-height: 54px;
    padding: 0.85rem 1rem !important;
    border: 1.5px solid transparent !important;
    border-radius: 16px !important;
    background: var(--kk-paper) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
body .kk-account__main input.input-glass:hover,
body .kk-account__main textarea.input-glass:hover,
body .kk-login input.input-text:hover { border-color: rgba(138, 101, 68, 0.3) !important; background: #fff !important; }
body .kk-account__main input.input-glass:focus,
body .kk-account__main textarea.input-glass:focus,
body .kk-account__main select.input-glass:focus,
body .kk-login input.input-text:focus { border-color: var(--kk-brown) !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(255, 218, 185, 0.6) !important; }

body .kk-account__main button[type="submit"].button,
body .kk-account__main .woocommerce-Button {
    min-height: 54px;
    padding: 0 1.75rem !important;
    border-radius: 999px !important;
    background: var(--kk-peach) !important;
    color: var(--kk-brown-3) !important;
    font: 700 15px/1 var(--kk-sans) !important;
    transition: background-color 0.3s, color 0.3s, transform 0.35s var(--kk-bounce) !important;
}
body .kk-account__main button[type="submit"].button:hover,
body .kk-account__main .woocommerce-Button:hover { background: var(--kk-ink-2) !important; color: #fff !important; transform: translateY(-2px); }

/* Login / register cards under the shared hero */
.kk-login { padding-top: clamp(8px, 2vw, 24px); }
body .kk-login .kk-auth-card { border-radius: clamp(24px, 2.6vw, 34px) !important; }


/* ==========================================================================
   15. Single product
   Markup: woocommerce/single-product.php + inc/single-product.php.
   Desktop: the photos stay in view while the details scroll past.
   Phones: photos first, then a buy bar once the main button is gone.
   ========================================================================== */
.kk-single {
    width: 100%;
    max-width: calc(var(--kk-max) + var(--kk-pad) * 2);
    margin: 0 auto;
    padding: clamp(8px, 1.5vw, 20px) var(--kk-pad) 0;
}

/* --- Breadcrumb: small pills ------------------------------------------- */
.kk-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 4px;
    margin: 0 0 clamp(18px, 2.6vw, 32px);
    color: rgba(79, 69, 61, 0.6);
    font: 500 13px/1.3 var(--kk-sans);
}
.kk-crumbs__item a {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--kk-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--kk-brown);
    text-decoration: none;
    transition: background-color 0.3s, border-color 0.3s;
}
.kk-crumbs__item a:hover { background: var(--kk-peach); border-color: transparent; }
.kk-crumbs__item:last-child { overflow: hidden; max-width: 30ch; padding-left: 4px; text-overflow: ellipsis; white-space: nowrap; }
.kk-crumbs__sep { font-size: 16px !important; color: rgba(79, 69, 61, 0.35); }
@media (max-width: 639px) {
    .kk-crumbs__item:last-child, .kk-crumbs__item:last-child + .kk-crumbs__sep, .kk-crumbs__sep:nth-last-child(2) { display: none; }
}

/* WooCommerce notices ("added to your cart") above the product */
.kk-single .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 20px; }

/* --- Layout -------------------------------------------------------------- */
.kk-single__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(32px, 5vw, 88px);
    align-items: start;
}
.kk-single__media { position: sticky; top: calc(var(--kk-header-space) + var(--kk-adminbar) + 8px); }

@media (max-width: 1023px) {
    .kk-single__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .kk-single__media { position: static; }
}

/* --- Gallery -------------------------------------------------------------- */
.kk-gallery {
    --kk-thumb: 76px;
    display: grid;
    grid-template-columns: var(--kk-thumb) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.kk-gallery--single { grid-template-columns: minmax(0, 1fr); }

.kk-gallery__stage {
    position: relative;
    z-index: 0;
    isolation: isolate;
    /* As tall as the screen allows, never taller: the photo stays whole while sticky */
    width: min(100%, calc((100svh - var(--kk-header-space) - var(--kk-adminbar) - 40px) * 0.75));
    justify-self: center;
}

.kk-gallery__blob {
    position: absolute;
    z-index: -1;
    top: -5%;
    right: -7%;
    width: 72%;
    aspect-ratio: 1;
    background: var(--kk-peach);
    opacity: 0.75;
    animation: kk-morph 14s ease-in-out infinite alternate;
    border-radius: 48% 52% 44% 56% / 56% 44% 56% 44%;
}
.kk-gallery__blob::after {
    content: '';
    position: absolute;
    left: -38%;
    bottom: -62%;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #c8e7d8;
    opacity: 0.8;
    animation: kk-float 9s ease-in-out infinite;
}

.kk-gallery__frame {
    position: relative;
    aspect-ratio: 3 / 4;
    border: 6px solid #fff;
    border-radius: var(--kk-radius);
    background: var(--kk-mist);
    overflow: hidden;
}

/* Shadow behind the frame, not on it - see .kk-hero__visual::before. */
.kk-gallery__stage::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: var(--kk-radius);
    box-shadow: 0 50px 90px -56px rgba(79, 69, 61, 0.6);
    pointer-events: none; /* fades in with the stage (data-kk-fade) */
}
.kk-gallery__frame { z-index: 1; }

.kk-gallery__track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.kk-gallery__track::-webkit-scrollbar { display: none; }
.kk-gallery__track:focus-visible { outline-offset: -4px; }

.kk-gallery__slide { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.kk-gallery__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.kk-gallery__slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--kk-ease); }
@media (hover: hover) and (pointer: fine) {
    .kk-gallery__open:hover img { transform: scale(1.035); }
}

.kk-gallery__frame .kk-chip { top: 16px; left: 16px; padding: 0.4rem 0.85rem; font-size: 13px; }

/* Counter + arrows sit on the photo in one glass pill each */
.kk-gallery__nav {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}
.kk-gallery__nav > * { pointer-events: auto; }
.kk-gallery__count,
.kk-gallery__arrows {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.kk-gallery__count { padding: 8px 14px; color: var(--kk-ink-2); font: 700 13px/1 var(--kk-sans); font-variant-numeric: tabular-nums; }
.kk-gallery__arrows { gap: 2px; padding: 4px; }
.kk-gallery__arrow {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--kk-ink-2);
    transition: background-color 0.3s, color 0.3s, opacity 0.3s, transform 0.35s var(--kk-bounce);
}
.kk-gallery__arrow .material-symbols-outlined { font-size: 20px; }
.kk-gallery__arrow:hover { background: var(--kk-ink-2); color: #fff; transform: scale(1.06); }
.kk-gallery__arrow:disabled { opacity: 0.3; pointer-events: none; }

.kk-gallery__zoomhint {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    color: var(--kk-ink-2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    pointer-events: none;
    transition: transform 0.45s var(--kk-bounce);
}
.kk-gallery__zoomhint .material-symbols-outlined { font-size: 20px; }
.kk-gallery__frame:hover .kk-gallery__zoomhint { transform: scale(1.1) rotate(-8deg); }

/* Thumbnails: a rail on the left on desktop, a row underneath elsewhere */
.kk-gallery__thumbs {
    order: -1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100svh - var(--kk-header-space) - var(--kk-adminbar) - 40px);
    overflow: auto;
    scrollbar-width: none;
    padding: 2px;
}
.kk-gallery__thumbs::-webkit-scrollbar { display: none; }
.kk-gallery__thumb {
    flex: none;
    width: 100%;
    aspect-ratio: 3 / 4;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 16px;
    background: var(--kk-mist);
    overflow: hidden;
    opacity: 0.55;
    transition: opacity 0.3s, border-color 0.3s, transform 0.35s var(--kk-bounce);
}
.kk-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kk-gallery__thumb:hover { opacity: 0.9; transform: translateY(-2px); }
.kk-gallery__thumb[aria-current="true"] { border-color: var(--kk-brown); opacity: 1; }

@media (max-width: 1023px) {
    .kk-gallery { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .kk-gallery__stage { width: min(100%, 560px); }
    .kk-gallery__thumbs { order: 0; flex-direction: row; justify-content: center; max-height: none; overflow-x: auto; }
    .kk-gallery__thumb { width: 58px; border-radius: 14px; }
    .kk-gallery__blob { right: -4%; }
}
@media (max-width: 639px) {
    .kk-gallery__thumbs { justify-content: flex-start; }
    .kk-gallery__frame { border-width: 4px; }
}

/* --- Lightbox ------------------------------------------------------------ */
.kk-lightbox {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
}
.kk-lightbox::backdrop { background: rgba(27, 28, 28, 0.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kk-lightbox[open] { display: grid; place-items: center; animation: kk-lb-in 0.45s var(--kk-ease); }
@keyframes kk-lb-in { from { opacity: 0; transform: scale(0.97); } }

.kk-lightbox__img {
    max-width: min(92vw, 1100px);
    max-height: 86dvh;
    border-radius: clamp(14px, 2vw, 24px);
    object-fit: contain;
    box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.7);
    -webkit-user-drag: none;
    user-select: none;
}
.kk-lightbox__close,
.kk-lightbox__arrow {
    position: absolute;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transition: background-color 0.3s, color 0.3s, transform 0.35s var(--kk-bounce);
}
.kk-lightbox__close:hover,
.kk-lightbox__arrow:hover { background: var(--kk-peach); color: var(--kk-brown-3); transform: scale(1.06); }
.kk-lightbox__close { top: 20px; right: 20px; }
.kk-lightbox__arrow { top: 50%; margin-top: -26px; }
.kk-lightbox__arrow--prev { left: 20px; }
.kk-lightbox__arrow--next { right: 20px; }
.kk-lightbox__count { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; color: rgba(255, 255, 255, 0.8); font: 700 13px/1 var(--kk-sans); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
@media (max-width: 639px) {
    .kk-lightbox__arrow { top: auto; bottom: 12px; margin: 0; }
    .kk-lightbox__count { bottom: 30px; }
}
html.kk-lightbox-open { overflow: hidden; }

/* --- Summary ------------------------------------------------------------- */
/* woocommerce-layout.css floats .summary at 48% for its own two columns */
body.single-product .kk-single div.kk-single__summary.summary { float: none; width: auto; min-width: 0; margin: 0; padding-top: clamp(0px, 1.6vw, 20px); }

.kk-single__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.kk-single__cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 5px;
    border: 1px solid var(--kk-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--kk-brown);
    font: 600 13.5px/1 var(--kk-sans);
    text-decoration: none;
    transition: background-color 0.3s, border-color 0.3s;
}
.kk-single__cat .kk-icon { width: 30px; height: 30px; padding: 4px; border-radius: 50%; background: var(--kk-peach); transition: transform 0.5s var(--kk-bounce); }
.kk-single__cat:hover { background: #fff; border-color: rgba(138, 101, 68, 0.3); }
.kk-single__cat:hover .kk-icon { transform: rotate(-12deg) scale(1.08); }

/* Related: "More in [category pill] ->" */
.kk-related__more { display: inline-flex; align-items: center; gap: 10px; color: var(--kk-brown); font: 600 15px/1.2 var(--kk-sans); text-decoration: none; }
.kk-related__more > .material-symbols-outlined { font-size: 20px; transition: transform 0.45s var(--kk-ease); }
.kk-related__more:hover > .material-symbols-outlined { transform: translateX(4px); }
.kk-related__more:hover .kk-single__cat { background: #fff; border-color: rgba(138, 101, 68, 0.3); }
.kk-related__more:hover .kk-single__cat .kk-icon { transform: rotate(-12deg) scale(1.08); }
.kk-single__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    background: #f8d7e3;
    color: #844960;
    font: 700 13px/1 var(--kk-sans);
}
.kk-single__badge .material-symbols-outlined { font-size: 17px; }

/* !important: woocommerce-blocks.css forces h1.product_title and p.price */
body.single-product h1.kk-single__title {
    margin: 0 0 1rem !important;
    color: var(--kk-ink) !important;
    font-family: var(--kk-display) !important;
    font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.7rem) !important;
    font-weight: 500 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.025em;
    font-variation-settings: "SOFT" 100, "WONK" 0;
    overflow-wrap: anywhere;
}
.kk-single .woocommerce-product-rating { display: flex; align-items: center; gap: 10px; margin: -0.25rem 0 1rem; font-size: 14px; }
.kk-single .woocommerce-product-rating a { color: var(--kk-brown); }

.kk-single__pricebox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1.5px dashed rgba(79, 69, 61, 0.16);
}
body.single-product p.kk-single__price { margin: 0 !important; color: var(--kk-brown) !important; font: 700 clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem)/1 var(--kk-sans) !important; letter-spacing: -0.02em; }
body.single-product .kk-single__price del { margin-right: 6px; color: rgba(79, 69, 61, 0.45); font-size: 0.6em; font-weight: 500; }
body.single-product .kk-single__price ins { text-decoration: none; }
.kk-single__price .kk-gift-price { color: #844960; }

.kk-single__note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(200, 231, 216, 0.65);
    color: #3f5a4f;
    font: 600 13px/1.2 var(--kk-sans);
}
.kk-single__pulse { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #4d685d; }
.kk-single__pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #4d685d; opacity: 0; animation: kk-ping 2s var(--kk-ease) infinite; }
@keyframes kk-ping { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.8); opacity: 0; } }

/* Age / size / condition tiles */
.kk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin: 0 0 24px; }
.kk-fact {
    position: relative;
    display: grid;
    gap: 3px;
    padding: 14px 16px 15px;
    border-radius: 22px;
    background: var(--kk-tint);
    color: var(--kk-fg);
    overflow: hidden;
    transition: transform 0.45s var(--kk-bounce);
}
.kk-fact:hover { transform: translateY(-3px) rotate(-1deg); }
.kk-fact__icon { margin-bottom: 4px; font-size: 22px !important; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.kk-fact__label { font: 700 12px/1.2 var(--kk-sans); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.kk-fact__value { color: var(--kk-ink); font: 600 16px/1.25 var(--kk-sans); }

.kk-single__excerpt { margin: 0 0 24px; color: var(--kk-ink-2); font-size: 1.05rem; line-height: 1.7; }
.kk-single__excerpt p { margin: 0 0 0.75em; }

/* Add to cart: one big pill (one-off items have no quantity to pick) */
body.single-product .kk-single form.cart {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 0 20px !important;
}
body.single-product .kk-single form.cart .quantity {
    flex: none;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px;
    padding: 6px !important;
    border: 1px solid var(--kk-line) !important;
    border-radius: 999px !important;
    background: #fff !important;
}
body.single-product .kk-single form.cart .quantity:has(input[type="hidden"]) { display: none !important; }
body.single-product .kk-single form.cart .quantity .qty-minus,
body.single-product .kk-single form.cart .quantity .qty-plus { width: 44px; height: 44px; background: var(--kk-paper); }
body.single-product .kk-single .single_add_to_cart_button {
    flex: 1 1 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 62px;
    margin: 0 !important;
    padding: 0 2rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--kk-peach) !important;
    color: var(--kk-brown-3) !important;
    font: 700 16px/1 var(--kk-sans) !important;
    box-shadow: 0 18px 40px -20px rgba(138, 101, 68, 0.7) !important;
    transition: background-color 0.35s, color 0.35s, transform 0.4s var(--kk-bounce), box-shadow 0.35s !important;
}
body.single-product .kk-single .single_add_to_cart_button::before {
    content: 'shopping_bag';
    font-family: 'Material Symbols Rounded';
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    transition: transform 0.45s var(--kk-bounce);
}
body.single-product .kk-single .single_add_to_cart_button:hover {
    background: var(--kk-ink-2) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 22px 44px -20px rgba(79, 69, 61, 0.7) !important;
}
body.single-product .kk-single .single_add_to_cart_button:hover::before { transform: rotate(-12deg) scale(1.1); }

/* Already in the cart: a note and a big "View cart" in place of the button */
.kk-single__incart { margin: 0 0 20px; }
.kk-single__incart-note { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #2f4a40; font: 600 14.5px/1.3 var(--kk-sans); }
.kk-single__incart-note .material-symbols-outlined { font-size: 20px; color: #4d685d; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.kk-incart--lg { width: 100%; min-height: 62px; gap: 10px; font-size: 16px; font-weight: 700; box-shadow: 0 18px 40px -22px rgba(77, 104, 93, 0.7); }
.kk-incart--lg .material-symbols-outlined { font-size: 22px; }
.kk-incart--lg:hover { transform: translateY(-2px); }
/* Sold: WooCommerce's stock line becomes a dark tag */
body.single-product .kk-single .stock { margin: 0 0 16px; }
body.single-product .kk-single .stock.out-of-stock {
    display: inline-flex;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--kk-ink-2);
    color: #fff;
    font: 700 12.5px/1 var(--kk-sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.kk-single__sold p { margin: 0 0 16px; color: var(--kk-ink-2); line-height: 1.6; }

/* Reassurance rows */
.kk-assure { display: grid; margin: 0; padding: 0; list-style: none; }
.kk-assure li + li { border-top: 1px solid var(--kk-line); }
.kk-assure__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 4px;
    color: var(--kk-ink-2);
    font: 500 14.5px/1.35 var(--kk-sans);
    text-decoration: none;
}
.kk-assure__icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--kk-paper); color: var(--kk-brown); transition: background-color 0.3s, transform 0.45s var(--kk-bounce); }
.kk-assure__icon .material-symbols-outlined { font-size: 19px; }
.kk-assure__text { flex: 1; }
.kk-assure__go { color: rgba(79, 69, 61, 0.3); font-size: 18px !important; transition: color 0.3s, transform 0.4s var(--kk-ease); }
a.kk-assure__row:hover { color: var(--kk-ink); }
a.kk-assure__row:hover .kk-assure__icon { background: var(--kk-peach); transform: rotate(-8deg); }
a.kk-assure__row:hover .kk-assure__go { color: var(--kk-brown); transform: translateX(4px); }

/* Gift request panel (inc/gift-request.php) in the same language */
body.single-product .kk-single .kk-gift-panel {
    margin: 0 0 20px !important;
    padding: clamp(18px, 2vw, 24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 26px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 1px 0 #fff inset, 0 30px 60px -44px rgba(79, 69, 61, 0.55);
}
body.single-product .kk-single .kk-gift-panel label { margin-bottom: 8px; font: 700 15px/1.3 var(--kk-sans); }
body.single-product .kk-single .kk-gift-panel textarea {
    border: 1.5px solid transparent !important;
    border-radius: 16px !important;
    background: var(--kk-paper) !important;
    transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
body.single-product .kk-single .kk-gift-panel textarea:focus { border-color: var(--kk-brown) !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(255, 218, 185, 0.6) !important; outline: none; }
body.single-product .kk-single .kk-gift-panel button[type="submit"],
body.single-product .kk-single .kk-gift-panel a[href] {
    min-height: 58px;
    border-radius: 999px !important;
    background: #f8d7e3 !important;
    color: #6b3a4e !important;
    font: 700 15.5px/1 var(--kk-sans) !important;
    transition: background-color 0.35s, color 0.35s, transform 0.4s var(--kk-bounce) !important;
}
body.single-product .kk-single .kk-gift-panel button[type="submit"]:hover,
body.single-product .kk-single .kk-gift-panel a[href]:hover { background: var(--kk-ink-2) !important; color: #fff !important; transform: translateY(-2px); }

/* --- About this piece + details card ------------------------------------ */
.kk-pstory {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(28px, 5vw, 88px);
    align-items: start;
    padding-top: clamp(72px, 9vw, 128px);
}
.kk-pstory__copy h2 { margin: 0 0 1.25rem; }
.kk-prose { max-width: 62ch; color: var(--kk-ink-2); font-size: 1.08rem; line-height: 1.75; }
.kk-prose p { margin: 0 0 1em; }
.kk-prose ul { margin: 0 0 1em; padding-left: 1.2em; list-style: disc; }
.kk-pstory__empty { max-width: 46ch; margin: 0 0 1.25rem; color: var(--kk-ink-2); font-size: 1.08rem; line-height: 1.7; }

.kk-pstory__card {
    padding: clamp(20px, 2.4vw, 32px);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--kk-radius);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 1px 0 #fff inset, 0 34px 70px -48px rgba(79, 69, 61, 0.55);
}
.kk-pstory__cardtitle { margin: 0 0 6px; font: 500 1.5rem/1.2 var(--kk-display); font-variation-settings: "SOFT" 100; }
.kk-specs { display: grid; margin: 0; }
.kk-specs > div { display: grid; grid-template-columns: minmax(96px, 0.8fr) minmax(0, 1.2fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--kk-line); }
.kk-specs dt { color: rgba(79, 69, 61, 0.65); font: 600 13.5px/1.4 var(--kk-sans); }
.kk-specs dd { margin: 0; color: var(--kk-ink); font: 600 14.5px/1.4 var(--kk-sans); }
.kk-specs dd a { color: var(--kk-brown); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1.5px no-repeat; transition: background-size 0.4s var(--kk-ease); }
.kk-specs dd a:hover { background-size: 100% 1.5px; }

.kk-seller { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border-radius: 20px; background: var(--kk-paper); }
.kk-seller__avatar {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    background: var(--kk-peach);
    color: var(--kk-brown);
    font: 600 1.35rem/1 var(--kk-display);
    animation: kk-morph 10s ease-in-out infinite alternate;
    border-radius: 48% 52% 44% 56% / 56% 44% 56% 44%;
}
.kk-seller__who { display: grid; gap: 2px; min-width: 0; }
.kk-seller__label { color: rgba(79, 69, 61, 0.7); font: 700 12px/1.2 var(--kk-sans); letter-spacing: 0.14em; text-transform: uppercase; }
.kk-seller__name { display: inline-flex; align-items: center; gap: 4px; color: var(--kk-ink); font: 700 15px/1.3 var(--kk-sans); }
.kk-seller__check { color: var(--kk-brown); font-size: 17px !important; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

@media (max-width: 900px) {
    .kk-pstory { grid-template-columns: minmax(0, 1fr); }
}

/* --- Reviews (a fold-out panel) ------------------------------------------ */
.kk-previews { padding-top: clamp(28px, 4vw, 48px); }
.kk-previews__box {
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--kk-radius);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 1px 0 #fff inset, 0 30px 60px -48px rgba(79, 69, 61, 0.5);
}
.kk-previews__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 28px);
    cursor: pointer;
    list-style: none;
}
.kk-previews__summary::-webkit-details-marker { display: none; }
.kk-previews__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--kk-peach); color: var(--kk-brown); }
.kk-previews__title { font: 500 1.45rem/1.2 var(--kk-display); font-variation-settings: "SOFT" 100; }
.kk-previews__count { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--kk-paper); color: var(--kk-ink-2); font: 700 13px/1 var(--kk-sans); }
.kk-previews__summary .star-rating { margin: 0 0 0 4px; }
.kk-previews__chev { margin-left: auto; color: var(--kk-ink-2); transition: transform 0.45s var(--kk-ease); }
.kk-previews__box[open] .kk-previews__chev { transform: rotate(180deg); }
.kk-previews__body { padding: 0 clamp(18px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px); }

.kk-previews #reviews .woocommerce-Reviews-title { display: none; } /* the summary already says it */
.kk-previews #reviews .woocommerce-noreviews { margin: 0 0 1rem; color: var(--kk-ink-2); }
.kk-previews #reviews ol.commentlist { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.kk-previews #reviews ol.commentlist li { margin: 0 0 12px; padding: 16px; border-radius: 20px; background: var(--kk-paper); }
.kk-previews #reviews ol.commentlist img.avatar { border-radius: 50%; }
/* !important + an extra id: woocommerce-blocks.css styles #review_form with !important */
.kk-previews #review_form #reply-title { display: block !important; margin: 0 0 0.75rem !important; color: var(--kk-ink) !important; font: 600 1.1rem/1.3 var(--kk-sans) !important; }
.kk-previews #review_form textarea,
.kk-previews #review_form input[type="text"],
.kk-previews #review_form input[type="email"] {
    width: 100% !important;
    margin: 0.25rem 0 1rem !important;
    padding: 0.85rem 1rem !important;
    border: 1.5px solid transparent !important;
    border-radius: 16px !important;
    background: var(--kk-paper) !important;
    transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.kk-previews #review_form textarea:focus,
.kk-previews #review_form input:focus { border-color: var(--kk-brown) !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(255, 218, 185, 0.6) !important; outline: none; }
.kk-previews #review_form .submit {
    min-height: 54px;
    padding: 0 1.75rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--kk-peach) !important;
    color: var(--kk-brown-3) !important;
    font: 700 15px/1 var(--kk-sans) !important;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, transform 0.35s var(--kk-bounce) !important;
}
.kk-previews #review_form .submit:hover { background: var(--kk-ink-2) !important; color: #fff !important; box-shadow: none !important; transform: translateY(-2px) !important; }
.kk-previews #review_form_wrapper { margin-top: 0 !important; }
/* Field labels: the small uppercase style used across the theme */
.kk-previews #review_form .comment-form-rating label,
.kk-previews #review_form .comment-form-comment label,
.kk-previews #review_form .comment-form-author label,
.kk-previews #review_form .comment-form-email label {
    display: block;
    margin: 0 0 0.35rem;
    color: var(--kk-brown);
    font: 700 12px/1.2 var(--kk-sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.kk-previews #review_form .required { color: var(--kk-brown); text-decoration: none; }

/* Rating: one tinted row - label left, big stars right (they wrap under on phones) */
.kk-previews #review_form .comment-form-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1.5rem;
    margin: 0 0 1.25rem;
    padding: 14px 18px;
    border-radius: 18px;
    background: var(--kk-paper);
}
.kk-previews #review_form .comment-form-rating label { margin: 0; }
.kk-previews #respond p.stars { margin: 0 !important; line-height: 1; }
.kk-previews #respond p.stars > span { display: inline-flex; gap: 6px; }
/* Woo draws each star with its icon font (outline / filled glyph swapped on
   hover and selection); only size, colour and motion are ours. */
.kk-previews #respond p.stars a {
    width: 30px;
    height: 30px;
    margin: 0;
    color: rgba(138, 101, 68, 0.38);
    font-size: 30px;
    transition: color 0.2s, transform 0.4s var(--kk-bounce);
}
.kk-previews #respond p.stars a::before { width: 1em; height: 1em; line-height: 1; }
/* Chosen: up to the active star. Hovering previews a new choice over it. */
.kk-previews #respond p.stars.selected a { color: var(--kk-brown); }
.kk-previews #respond p.stars.selected a.active ~ a { color: rgba(138, 101, 68, 0.38); }
.kk-previews #respond p.stars:hover a,
.kk-previews #respond p.stars.selected:hover a.active ~ a { color: var(--kk-brown); }
.kk-previews #respond p.stars:hover a:hover ~ a,
.kk-previews #respond p.stars.selected:hover a:hover ~ a { color: rgba(138, 101, 68, 0.38); }
.kk-previews #respond p.stars a:hover { transform: scale(1.18) rotate(-8deg); }
.kk-previews #respond p.stars a:focus-visible { outline: 2px solid var(--kk-brown); outline-offset: 3px; border-radius: 6px; }
.kk-single .star-rating span::before,
.kk-previews .star-rating span::before { color: var(--kk-brown); }

/* --- Related -------------------------------------------------------------- */
.kk-related { padding-top: clamp(72px, 9vw, 128px); }
@media (min-width: 1024px) {
    .kk-related .kk-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* --- Phone buy bar ------------------------------------------------------- */
.kk-buybar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 50px -24px rgba(79, 69, 61, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateY(calc(100% + 32px));
    transition: transform 0.6s var(--kk-ease);
}
.kk-buybar.is-shown { transform: none; }
.kk-buybar__thumb { width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--kk-mist); overflow: hidden; }
.kk-buybar__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kk-buybar__info { display: grid; flex: 1; gap: 2px; min-width: 0; }
.kk-buybar__title { overflow: hidden; color: var(--kk-ink); font: 600 13.5px/1.25 var(--kk-sans); text-overflow: ellipsis; white-space: nowrap; }
.kk-buybar__price { color: var(--kk-brown); font: 700 15px/1.1 var(--kk-sans); }
.kk-buybar__price del { display: none; }
.kk-buybar__price ins { text-decoration: none; }
.kk-buybar__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    flex: none;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--kk-peach);
    color: var(--kk-brown-3);
    font: 700 14px/1 var(--kk-sans);
    white-space: nowrap;
}
.kk-buybar__btn .material-symbols-outlined { font-size: 20px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.kk-buybar[data-kk-buybar="gift"] .kk-buybar__btn { background: #f8d7e3; color: #6b3a4e; }
.kk-buybar[data-kk-buybar="cart"] .kk-buybar__btn { background: #c8e7d8; color: #2f4a40; text-decoration: none; }
@media (max-width: 380px) {
    .kk-buybar__thumb { display: none; }
}
@media (min-width: 1024px) {
    .kk-buybar { display: none; }
}


/* ==========================================================================
   iOS: no zoom on focus
   iOS Safari zooms the whole page in when a field under 16px gets focus
   (checkout, sell form, shipping field, quantity). Touch screens get 16px
   as the floor; the two big search fields keep their larger sizes.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]):not(#search-input):not(.kk-searchbar input),
    select,
    textarea {
        font-size: 16px !important;
    }
}


/* ==========================================================================
   Smoothness on phones
   The blob frames morph by animating border-radius, which repaints the
   masked photo on every frame - fine on a desktop GPU, but it made the hero
   stutter on iPhone while scrolling. Touch screens keep the blob shape, still.
   ========================================================================== */
@media (hover: none) {
    .kk-hero__frame,
    .kk-hero__visual::before,
    .kk-story__frame,
    .kk-story__photo::before { animation: none; }
    .kk-hero__visual::before { animation: kk-shadow-in 1.1s var(--kk-ease) 0.7s both; }
}

/* People who ask their system for less motion (iPhone: Reduce Motion) get
   a calmer site: endless decoration (spinning stamp, morphing blobs, marching
   dashes, floating card) stops. Reveals still fade in - a short fade is not
   the kind of motion that setting is about, and killing every transition
   made content just pop into place. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    .kk-reveal { transform: none; }
}

/* Phones show the category cards two by two as you scroll, so a stagger
   counted over all eight made the lower cards lag; alternate left/right instead. */
@media (max-width: 767px) {
    body .kk-cat:nth-child(odd)  { transition-delay: 0s, 0s, 0s, 0s, 0s; }
    body .kk-cat:nth-child(even) { transition-delay: 90ms, 90ms, 0s, 0s, 0s; }
}

/* Safari cannot fade an element that holds a backdrop-filter child: the blur
   is dropped while the parent is see-through and snaps back at the end, so
   product cards and the hero buttons popped instead of easing in. On touch
   screens these small, near-opaque chips get a solid fill instead of a blur
   (visually the same at 70-85% white). */
@media (hover: none) {
    .kk-btn--ghost,
    .kk-save,
    .kk-chip { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .kk-btn--ghost { --bg: rgba(255, 255, 255, 0.86); }
    .kk-save,
    .kk-chip { background-color: rgba(255, 255, 255, 0.94); }
}


/* ==========================================================================
   Performance on phones and tablets (touch screens)
   Everything here ran non-stop for the whole visit while adding little you
   would miss on a small screen. Desktops keep all of it.
   ========================================================================== */
@media (hover: none) {
    /* Paper grain: a full-screen layer blended (multiply) over the page,
       recomposited on every scroll frame. At 4.5% opacity it is invisible
       on a phone, and it was the most expensive thing on every page. */
    body::after { display: none; }

    /* The page-wide colour mesh (140% of the screen, always drifting) stays
       as a still background. */
    body::before { animation: none !important; will-change: auto !important; }

    /* Wordmark: two dashed lines marching forever inside the blurred header,
       so the header blur had to be redrawn on every frame. The dashes stay;
       they just stand still. Scroll progress still fills them in. */
    .kk-wordmark__squiggle,
    .kk-wordmark__progress { animation: none; }

    /* Smaller loops that repaint (box-shadow / border-radius animations) */
    .kk-eyebrow__dot { animation: none; }
    .kk-gallery__blob,
    .kk-medallion__core,
    .kk-404-mark .kk-icon { animation: none; }
    .kk-account__avatar,
    .kk-seller__avatar { animation: none; }
}

/* Menu: the two big blurred blobs (60px blur, floating) only animate while
   the menu is open - they kept running hidden behind the page before. */
.kk-menu:not(.is-open) .kk-menu__blob { animation-play-state: paused; }


/* ==========================================================================
   16. Page transitions (View Transitions API)

   The <meta name="view-transition"> tag in header.php turns every same-site
   link click into a cross-document view transition on browsers that know
   it (Chrome, Edge, Safari 18+ - a current iPhone). The browser freezes a
   snapshot of the old page, lets the new one load and paint underneath,
   then swaps between the two snapshots - no blank flash, no instant jump.

   Only the implicit root pair is used (no per-element view-transition-name
   anywhere), so this is one simple cross-fade of "old page" into "new page"
   that works the same regardless of what either page looks like - including
   whether the mobile menu overlay was open on the page being left: it is
   just whatever the snapshot shows, cross-fading into the new page the same
   way it would from any other state. Browsers without support, or visitors
   who disabled motion, get the old instant swap - nothing here can break
   that path, it is additive only.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-group(root) {
        animation-duration: 0.5s;
        animation-timing-function: var(--kk-ease);
    }

    /* Outgoing page: a quick, gentle settle - never scales up or slides,
       which would fight whatever is at the top of the next page. */
    ::view-transition-old(root) {
        animation: kk-page-out 0.32s var(--kk-ease-io) both;
    }

    /* Incoming page: rises in a little as it fades, so arriving feels like
       one continuous motion rather than a page appearing out of nowhere. */
    ::view-transition-new(root) {
        animation: kk-page-in 0.5s var(--kk-ease) both;
    }

    @keyframes kk-page-out {
        to { opacity: 0; }
    }

    @keyframes kk-page-in {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* Reduced motion: an instant swap, not even the browser's own default
   cross-fade - "less motion" should mean less motion here too. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(root),
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}

/* Hide the page's vertical scrollbar (scrolling still works). */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; width: 0; }

/* ==========================================================================
   Mobile / tablet performance
   Phones and tablets (touch, or narrower than 1024px) drop the effects that
   cost the GPU work on every scroll frame:
   - backdrop-filter blur re-samples everything behind the element each frame
     (the fixed header does this the whole time you scroll), so glass panels
     get a more opaque fill instead;
   - the page-wide gradient stops drifting (a 140% fixed layer re-composited
     forever);
   - the menu's blurred, floating blobs become plain soft gradients.
   ========================================================================== */
@media (max-width: 1023px), (hover: none) {
    *,
    *::before,
    *::after {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Solid, not glass: no see-through header to re-composite while
       scrolling. Covers the condensed state too. */
    .kk-header__bar,
    .kk-header.is-condensed .kk-header__bar { background: #fbf9f8 !important; }
    /* Condensing snaps instead of animating its height (a height transition
       re-lays-out the header on every frame, mid-scroll). */
    .kk-header__bar { transition: none !important; }
    .kk-hero__newest { background: rgba(255, 255, 255, 0.97); }

    /* The page background: a plain viewport-sized fixed layer. The desktop
       version is 140% of the screen so its drift never shows an edge; on
       iPhone that oversized fixed layer, re-tiled while the address bar
       slides, is a large part of what flickered while scrolling. */
    body::before {
        animation: none !important;
        will-change: auto !important;
        transform: none !important;
        top: 0; left: 0; width: 100%; height: 100lvh;
    }

    /* Fewer permanent GPU layers. Every will-change keeps a layer alive in
       memory; iOS Safari drops and re-draws tiles once it runs short, which
       is the "content disappears and comes back" effect. */
    .kk-btn,
    .kk-dial,
    .blur-\[80px\],
    .blur-\[100px\] { will-change: auto !important; }
    .blur-\[80px\],
    .blur-\[100px\] { transform: none !important; }

    .kk-menu__blob {
        filter: none;
        animation: none;
        background: radial-gradient(closest-side, var(--kk-blob, rgba(255, 218, 185, 0.65)), transparent) !important;
    }
    .kk-menu__blob--b { --kk-blob: rgba(200, 231, 216, 0.55); }
}

/* ==========================================================================
   iOS Safari / touch: lighter motion
   iPhone Safari keeps every composited layer in a limited GPU budget; past it,
   it throws page tiles away and redraws them as you scroll back (content
   "popping in" a frame late). These rules keep only the motion that matters
   on touch screens and drop what was repainting or holding layers all the time.
   ========================================================================== */
@media (max-width: 1023px), (hover: none) {
    /* Never-ending animations that repaint large areas every frame:
       the hidden search overlay's moving gradient, and the hero photo's
       morphing rounded shape (a border-radius animation on a big image). */
    .search-scrim,
    .mesh-gradient,
    .kk-hero__frame,
    .kk-hero__visual::before { animation: none !important; }
    .kk-hero__visual::before { opacity: 1; }

    /* Spinning marquee icons: 15 extra animated layers. */
    .kk-marquee__icon .kk-icon { animation: none; }

    /* Category cards' tilted, oversized 3D icon field (one big layer per card). */
    .category-card__pattern { display: none !important; }

    /* Scroll reveals: no permanent layer per item (the transition promotes
       it for its duration anyway), a shorter travel and a quicker ease so
       they finish before the finger has moved on. */
    .kk-reveal,
    .kk-reveal:not(.is-settled) { will-change: auto !important; }
    .kk-reveal { transform: translate3d(0, 14px, 0); transition-duration: 0.5s; }
    .kk-reveal.is-revealed { transform: none; }
}

/* ==========================================================================
   Hero scene (template-parts/hero-scene.php)
   Animated illustration inside the hero blob. transform/opacity only, each
   piece turning around its own box (transform-box: fill-box). The whole scene
   pauses off screen (.is-paused, assets/js/motion.js).
   ========================================================================== */
.kk-hero { min-height: min(100svh, 920px); }
.kk-hero__inner { position: relative; z-index: 1; }

/* Behind everything in the hero, edge to edge (header area included). */
.kk-scene {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Phones and tablets: the hero stacks, so the scene sits under the text,
   showing its right-hand half (sun, mobile, toys) at a fixed size. */
@media (max-width: 1023px) {
    .kk-hero { padding-bottom: min(158vw, 700px); }
    .kk-scene {
        inset: auto 0 0 auto;
        width: min(220vw, 1040px);
        height: min(137.5vw, 650px);
    }
}
/* Only on the animated pieces: elsewhere fill-box would move the pivot of
   the SVG's own rotate() attributes (the sun rays). */
.kk-scene [class*="kk-sc-"] { transform-box: fill-box; }
.kk-scene.is-paused *,
.kk-scene.is-busy * { animation-play-state: paused !important; }

.kk-sc-rays      { transform-origin: center; animation: kk-sc-spin 40s linear infinite; }
.kk-sc-sun__core { transform-origin: center; animation: kk-sc-breathe 4s ease-in-out infinite; }

.kk-sc-cloud--a { animation: kk-sc-drift 14s ease-in-out infinite alternate; }
.kk-sc-cloud--b { animation: kk-sc-drift 18s ease-in-out -6s infinite alternate-reverse; }
.kk-sc-cloud--c { animation: kk-sc-drift 22s ease-in-out -3s infinite alternate; }

.kk-sc-flower    { transform-origin: 50% 100%; animation: kk-sc-wobble 4s ease-in-out infinite; }
.kk-sc-flower--2 { animation-duration: 4.6s; animation-delay: -1.5s; }
.kk-sc-flower--3 { animation-duration: 3.6s; animation-delay: -2.6s; }

.kk-sc-spark          { transform-origin: center; animation: kk-sc-twinkle 2.6s ease-in-out infinite; }
.kk-sc-spark--2       { animation-delay: -0.7s; }
.kk-sc-spark--3       { animation-delay: -1.4s; }
.kk-sc-spark--4       { animation-delay: -2s; }

/* The mobile swings from its hook; each charm sways on its own string. */
.kk-sc-mobile     { transform-origin: 50% 0; animation: kk-sc-swing-soft 6s ease-in-out infinite; }
.kk-sc-dangle     { transform-origin: 50% 0; animation: kk-sc-swing 3.2s ease-in-out infinite; }
.kk-sc-dangle--2  { animation-duration: 3.8s; animation-delay: -1.2s; }
.kk-sc-dangle--3  { animation-duration: 2.9s; animation-delay: -2s; }

.kk-sc-blocks__top { transform-origin: 50% 100%; animation: kk-sc-wobble 3.4s ease-in-out infinite; }

.kk-sc-duck { transform-origin: 50% 85%; animation: kk-sc-rock 2.4s ease-in-out infinite; }

.kk-sc-float     { opacity: 0; transform-origin: center; animation: kk-sc-float 3.6s ease-out infinite; }
.kk-sc-float--2  { animation-delay: -1.2s; }
.kk-sc-float--3  { animation-delay: -2.4s; }

.kk-sc-ball   { animation: kk-sc-bounce 1.3s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
.kk-sc-shadow { transform-origin: center; animation: kk-sc-shadow 1.3s cubic-bezier(0.5, 0, 0.5, 1) infinite; }

@keyframes kk-sc-spin    { to { transform: rotate(360deg); } }
@keyframes kk-sc-breathe { 50% { transform: scale(1.06); } }
@keyframes kk-sc-drift   { from { transform: translateX(-18px); } to { transform: translateX(22px); } }
@keyframes kk-sc-twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes kk-sc-swing   { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes kk-sc-swing-soft { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes kk-sc-wobble  { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes kk-sc-rock    { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes kk-sc-float {
    0%   { opacity: 0; transform: translateY(10px) scale(0.5); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-70px) scale(1.1); }
}
@keyframes kk-sc-bounce {
    0%, 100% { transform: translateY(0) scale(1.12, 0.88); }
    12%      { transform: translateY(-6px) scale(0.95, 1.05); }
    50%      { transform: translateY(-58px) scale(1, 1); }
    88%      { transform: translateY(-6px) scale(0.95, 1.05); }
}
@keyframes kk-sc-shadow { 0%, 100% { transform: scale(1); opacity: 0.28; } 50% { transform: scale(0.45); opacity: 0.1; } }

@media (prefers-reduced-motion: reduce) {
    .kk-scene * { animation: none !important; }
    .kk-sc-float { opacity: 0; }
}

/* --- Throwable toys (assets/js/toys.js) ----------------------------------- */
.kk-toys {
    position: absolute;
    inset: 0;
    z-index: 2;            /* over the text: they can be thrown across it */
    pointer-events: none;
    visibility: hidden;    /* until toys.js has placed them */
}
.kk-toys.is-ready { visibility: visible; }

.kk-toy {
    position: absolute;
    /* Own GPU layer: moving a toy is then just compositing, its SVG is not
       redrawn every frame. Four small layers - cheap. */
    will-change: transform;
    left: 0;
    top: 0;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;    /* a finger on a toy throws it instead of scrolling */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    filter: drop-shadow(0 6px 6px rgba(90, 66, 42, 0.18));
}
.kk-toy svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kk-toy--ball svg { border-radius: 50%; }
.kk-toy.is-grabbed { cursor: grabbing; z-index: 1; filter: drop-shadow(0 14px 12px rgba(90, 66, 42, 0.25)); }
.kk-toy.is-grabbed svg { transform: scale(1.08); }
.kk-toy svg { transition: transform 0.2s var(--kk-bounce); }

/* Hero intro (assets/js/toys.js): scene pieces wait hidden until the intro
   reveals them. Safety net: they show anyway after 5s if the script never runs. */
.kk-js .kk-scene [data-in] { visibility: hidden; animation: kk-in-safety 0s linear 5s forwards; }
@keyframes kk-in-safety { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) { .kk-js .kk-scene [data-in] { visibility: visible; animation: none; } }

/* Hero scene on phones/tablets: Safari repaints the whole (wide) SVG for every
   animated piece, every frame. Keep the motion people notice - the swinging
   mobile, the rocking duck and its hearts - and let the sun, clouds, stars,
   flowers and the mobile's charms rest. The toys drop their filter shadow
   (a filter re-renders the element each frame while it moves). */
@media (max-width: 1023px), (hover: none) {
    .kk-sc-rays,
    .kk-sc-sun__core,
    .kk-sc-cloud,
    .kk-sc-spark,
    .kk-sc-flower,
    .kk-sc-dangle { animation: none !important; }
    .kk-sc-spark { opacity: 0.8; }
    .kk-toy,
    .kk-toy.is-grabbed { filter: none; }
}