/* ==========================================================================
   kara_v3.css — 2026-08 full redesign of karaoke.co.il ("שרים קריוקי").
   Client spec (WhatsApp mocks 2026-08-05, see docs/redesign-2026-08/):
   dark header + dark hero with ANIMATED moving stage lights, light gray
   body, crimson accent, white rounded cards, current logo kept.

   Replaces kara_modern.css in the doc_open load order (kara_modern stays on
   disk for rollback). Loaded AFTER kara_style.css (legacy, never edited) +
   glue_css view + kara_responsive.css — everything here is an override.

   Layout-critical rules ported from kara_modern §10/§11/§12 are marked
   [ported] — they neutralize legacy float/height traps and MUST survive
   future re-skins (see docs/sidebar-removal-2026-08 for the gotchas).

   Sections:
     1. tokens + base            7. home: shelves (carousels) + steps
     2. header (black bar)       8. home: artists row
     3. footer (dark band)       9. bands (former sidebar) as light cards
     4. generic UI (forms etc.) 10. listing page
     5. home: stage + lights    11. song page
     6. home: hero + features   12. artists index + content pages
                                13. glue pages (commerce/account/shop)
                                14. [ported] structural ≥1000px
                                15. [ported] structural <1000px
                                16. motion preferences
   ========================================================================== */

/* ---- self-hosted licensed Hebrew family (same files as kara_modern) ----- */
@font-face {
    font-family: 'almoni';
    src: url('../fonts/almoni-dl-aaa-400.woff') format('woff'),
         url('../fonts/almoni-dl-aaa-400.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'almoni';
    src: url('../fonts/almoni-dl-aaa-700.woff') format('woff'),
         url('../fonts/almoni-dl-aaa-700.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   1. TOKENS + BASE
   ========================================================================== */

:root {
    --kr-accent: #d6134e;        /* crimson from the client mocks */
    --kr-accent-strong: #b30c40; /* hover / pressed */
    --kr-accent-bright: #ff3b6e; /* accent text on dark surfaces */
    --kr-accent-soft: #fce9ef;   /* tinted circles / hovers on light */
    --kr-accent-ink: #c41049;    /* accent-colored text on light */
    --kr-yellow: #ffd200;        /* KTV highlight from the mocks */
    --kr-header-bg: #000000;     /* header bar (mock 2026-08-05: pure black) */
    --kr-nav-yellow: #fae90a;    /* KaraokeTV nav link (lemon, per the header mock) */

    --kr-ink: #1a1b22;
    --kr-ink-soft: #5f626d;
    --kr-ink-faint: #9a9da8;

    --kr-bg: #f1f1f4;            /* page canvas */
    --kr-card: #ffffff;
    --kr-line: #e6e7ec;

    --kr-dark: #0c0c13;          /* header / footer / hero base */
    --kr-dark-2: #16161f;        /* elevated dark cards */
    --kr-dark-line: rgba(255, 255, 255, .08);
    --kr-dark-text: #f5f5f8;
    --kr-dark-muted: #b9bbc6;

    --kr-radius: 16px;
    --kr-radius-sm: 12px;
    --kr-shadow: 0 1px 2px rgba(18, 18, 35, .05), 0 10px 30px rgba(18, 18, 35, .07);
    --kr-shadow-hover: 0 4px 12px rgba(18, 18, 35, .09), 0 18px 44px rgba(18, 18, 35, .13);
}

/* full-bleed dark bands + 100vw layers must never create sideways scroll */
html, body { overflow-x: hidden; overflow-x: clip; }

body {
    background: var(--kr-bg);
    background-image: none;
    font-family: 'almoni', -apple-system, 'Segoe UI', system-ui, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--kr-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* cart/checkout load pay.css + paySharim.css after this file; both force
   body{background:transparent !important} (a legacy payment-iframe hack).
   Any page that renders the karaoke chrome gets the light canvas back,
   scoped with :has() so true iframe/blank pages stay untouched. [ported] */
html body:has(> div.container > div.header) {
    background: var(--kr-bg) !important;
    background-image: none !important;
}

::selection { background: var(--kr-accent); color: #ffffff; }

a { transition: color .15s ease; }
.pink, a.pink, span.pink { color: var(--kr-accent-ink); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--kr-accent);
    outline-offset: 2px;
}

input, select, textarea, button {
    font-family: 'almoni', -apple-system, 'Segoe UI', system-ui, Arial, sans-serif;
}

/* the shell strips: everything sits directly on the light canvas */
div.main,
div.main_inner,
div.main.main_inner { background: none; }
div.content_index { background: none; }

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

/* ==========================================================================
   2. HEADER — one black bar (client mock 2026-08-05 21:04): brand lockup on
   the right, nav centered between it and the two flat social tiles pinned to
   the far left. Same legacy DOM (.line > a.logo + div.block, div.menu > ul);
   the desktop row layout lives in §14, the stacked mobile shell in §15.
   ========================================================================== */

div.header {
    position: relative;
    background: none;
}
/* the black band bleeds edge-to-edge behind the capped container */
div.header::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background: var(--kr-header-bg);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
    z-index: -1;
    pointer-events: none;
}

/* --- brand lockup: SVG mark + live text, replaces the stacked logo-base.png
   (mock: mark left of the wordmark, tagline under it, everything white) --- */
div.header a.logo.kr-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    width: auto;
    height: auto;
    margin: 0;
    color: #ffffff;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}
div.header a.logo.kr-brand:hover { color: #ffffff; }
.kr-brand-mark {
    display: block;
    flex: 0 0 auto;
    width: 60px;
    height: 51px;
}
.kr-brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* RTL: flush right, under the wordmark's right edge */
}
.kr-brand-name {
    display: block;
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.01em;
}
.kr-brand-tag {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .01em;
    color: #ffffff;
}

/* search: white pill + crimson icon button (legacy sprite gone) */
div.header div.search { background: none; border: 0; }
div.header div.search form {
    display: flex;
    align-items: center;
    direction: ltr; /* button left, field right — legacy visual order */
    background: #ffffff;
    border-radius: 999px;
    height: 38px;
    padding: 0 4px;
    box-sizing: border-box;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .04);
}
div.header div.search form > div { float: none; }
div.header div.search form > div + div { flex: 1; min-width: 0; }
div.header div.search input.field {
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    direction: rtl;
    background: none;
    border: 0;
    outline-offset: -2px;
    font: normal 14px 'almoni', Arial, sans-serif;
    color: #33373c;
}
div.header div.search input.search_button {
    width: 30px;
    height: 30px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background-color: var(--kr-accent);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
    cursor: pointer;
    transition: background-color .18s ease;
}
div.header div.search input.search_button:hover { background-color: var(--kr-accent-strong); }

/* phone: quiet outline pill on the dark band */
div.header div.phone,
div.header a.phone {
    width: auto;
    height: auto;
    padding: 9px 16px;
    background: none;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: var(--kr-dark-muted);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
div.header div.phone span,
div.header a.phone span {
    display: inline-block;
    padding-right: 22px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff3b6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat right center;
    background-size: 15px 15px;
}
div.header a.phone:hover {
    border-color: var(--kr-accent-bright);
    background: rgba(214, 19, 78, .10);
    color: #ffffff;
}

/* socials: flat 36px tiles (YouTube red, Facebook blue), YouTube outermost —
   same order in both the desktop .iconsSocial and the mobile .kara_social_inline */
div.header .iconsSocial,
.kara_social_inline {
    direction: ltr;
    display: flex;
    align-items: center;
    gap: 14px;
}
div.header .iconsSocial a,
.kara_social_inline a { display: block; line-height: 0; }
div.header .iconsSocial a img,
.kara_social_inline img {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    transition: opacity .18s ease, transform .18s ease;
}
div.header .iconsSocial a:hover img,
.kara_social_inline a:hover img { opacity: .85; transform: translateY(-1px); }

/* nav: plain white links on the black bar, no hairline (mock) */
div.header div.menu {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    font-weight: 400;
}
div.header div.menu li { background: none; }
div.header div.menu li a {
    position: relative;
    background: none;
    color: #ffffff;
    font-weight: 400;
    transition: color .18s ease;
}
/* current page (mock): crimson text + a thin crimson rule a little below it,
   spanning the link's padding box so it reads wider than the word itself */
div.header div.menu li a::after {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 2px;
    border-radius: 1px;
    background: var(--kr-accent);
    opacity: 0;
    transform: scaleX(.4);
    transform-origin: center;
    transition: opacity .18s ease, transform .22s ease;
}
div.header div.menu li a:hover,
div.header div.menu li a.current {
    background: none;
    color: var(--kr-accent);
}
div.header div.menu li a:hover::after,
div.header div.menu li a.current::after {
    opacity: 1;
    transform: scaleX(1);
}

/* highlighted items (mock): crimson for the sale links, lemon-yellow bold
   for KaraokeTV — hover keeps their own colour, only the rule appears */
div.header div.menu li.color_pink a { color: var(--kr-accent); }
div.header div.menu li.color_pink a:hover { color: var(--kr-accent-bright); }
div.header div.menu li a[title="KaraokeTV"] {
    color: var(--kr-nav-yellow);
    font-weight: 700;
}
div.header div.menu li a[title="KaraokeTV"]:hover { color: #fff176; }
div.header div.menu li a[title="KaraokeTV"]::after { background: var(--kr-nav-yellow); }

/* the homepage hero owns search — keep the petite header clean there */
body.karaoke-homepage div.header div.search,
body.karaoke-homepage div.header div.phone,
body.karaoke-homepage div.header a.phone { display: none; }

/* live-search dropdown: flat white card */
div.autosuggest ul {
    margin: 6px 0 0;
    background: #ffffff;
    border: 1px solid var(--kr-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
    font: normal 14px 'almoni', Arial, sans-serif;
}
div.autosuggest ul li { border-bottom: 1px solid #eef0f3; }
div.autosuggest ul li:last-child { border-bottom: 0; }
div.autosuggest ul li a { color: #26292e; }
div.autosuggest ul li a:hover { background-color: var(--kr-accent-soft); }
div.autosuggest ul li a span small { color: #8a8f95; }

/* mobile petite sticky bar: same black, the SVG mark instead of the cropped
   logo-base.png (kara_responsive.css positions that crop absolutely) */
.kara_sticky {
    background: var(--kr-header-bg);
    border-bottom: 1px solid var(--kr-dark-line);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
}
.kara_sticky_logo {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border-radius: 0;
}
.kara_sticky_logo img {
    position: static;
    width: 44px;
    height: 37px;
    margin: 0;
}

/* ==========================================================================
   3. FOOTER — matching dark band
   ========================================================================== */

div.footer {
    position: relative;
    height: auto;
    margin-top: 40px;
    padding: 30px 0 34px;
    border-top: 0;
    background: none;
    color: rgba(255, 255, 255, .55);
}
div.footer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background: var(--kr-dark);
    z-index: -1;
    pointer-events: none;
}
div.footer ul.menu {
    background: none;
    color: rgba(255, 255, 255, .25);
}
div.footer ul.menu a {
    color: rgba(255, 255, 255, .78);
    transition: color .15s ease;
}
div.footer ul.menu li a:hover {
    color: var(--kr-accent-bright);
    text-decoration: none;
}
div.footer div.credit {
    padding-top: 14px;
    color: rgba(255, 255, 255, .45);
}
div.footer div.credit a { color: rgba(255, 255, 255, .62); }
div.footer div.credit a:hover { color: var(--kr-accent-bright); }
div.footer div.credit img { vertical-align: middle; opacity: .85; }

/* ==========================================================================
   4. GENERIC UI — buttons, form fields, titles
   (kept low-specificity via :where so components below can re-skin freely)
   ========================================================================== */

.kr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 26px;
    height: 48px;
    background: var(--kr-accent);
    border: 0;
    border-radius: 11px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(214, 19, 78, .30);
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.kr-btn:hover {
    background: var(--kr-accent-strong);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(214, 19, 78, .38);
}
.kr-btn svg { display: block; }

/* neutral inputs anywhere in the shell; components override at will */
div.main :where(input[type="text"], input[type="email"], input[type="tel"],
                input[type="password"], input[type="number"], textarea, select) {
    background: #ffffff;
    border: 1px solid #d9dbe1;
    border-radius: 10px;
    padding: 8px 12px;
    box-sizing: border-box;
    max-width: 100%;
    color: #26292e;
    transition: border-color .15s ease, box-shadow .15s ease;
}
div.main :where(input[type="text"], input[type="email"], input[type="tel"],
                input[type="password"], input[type="number"], textarea):focus {
    border-color: var(--kr-accent);
    box-shadow: 0 0 0 3px rgba(214, 19, 78, .13);
    outline: none;
}
div.main :where(input[type="submit"], button[type="submit"]) {
    background: var(--kr-accent);
    border: 0;
    border-radius: 10px;
    padding: 9px 26px;
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}
div.main :where(input[type="submit"], button[type="submit"]):hover {
    background: var(--kr-accent-strong);
    transform: translateY(-1px);
}
/* padded 100%-width inputs must never overflow their cell [ported] */
div.main input,
div.main select,
div.main textarea { box-sizing: border-box; max-width: 100%; }

/* page titles (inner pages): dark ink + short crimson bar, per the mocks */
.main_title, .subtitle {
    background: none;
    position: relative;
    height: auto;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--kr-ink);
    padding-bottom: 10px;
    margin-bottom: 16px;
}
.main_title::after, .subtitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 2px;
    width: 52px;
    height: 4px;
    border-radius: 3px;
    background: var(--kr-accent);
}
.main_title .pink { color: var(--kr-accent-ink); }

.content { line-height: 1.7; }

/* centered section heading with the centered crimson underline (mocks) */
.kr-sec-head { text-align: center; margin: 48px 0 26px; }
.kr-sec-head h2 {
    display: inline-block;
    position: relative;
    margin: 0;
    padding-bottom: 12px;
    font-size: 28px;
    font-weight: 700;
    color: var(--kr-ink);
}
.kr-sec-head h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 4px;
    border-radius: 3px;
    background: var(--kr-accent);
}
.kr-sec-head p {
    margin: 8px 0 0;
    color: var(--kr-ink-soft);
    font-size: 15px;
}

/* ==========================================================================
   5. HOME — the dark stage + ANIMATED MOVING LIGHTS
   --------------------------------------------------------------------------
   Pure CSS light-show: swaying beam cones + drifting glow orbs + twinkles,
   all transform/opacity animations (GPU-friendly), edge-to-edge behind the
   capped hero content. Everything pauses under prefers-reduced-motion.
   ========================================================================== */

.kr-stage {
    position: relative;
    padding: 58px 0 132px;
    color: var(--kr-dark-text);
}

/* the 100vw dark canvas holding the light layers */
.kr-stage-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 50% 0%, #191925 0%, var(--kr-dark) 58%),
        var(--kr-dark);
}
/* readability scrim above the lights, below the copy */
.kr-stage-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(58% 62% at 50% 44%, rgba(10, 10, 18, 0) 0%, rgba(10, 10, 18, .38) 100%),
        linear-gradient(180deg, rgba(10, 10, 18, .25) 0%, rgba(10, 10, 18, 0) 30%);
}

/* --- swaying beam cones (stage rig) --- */
.kr-beam {
    position: absolute;
    top: -16%;
    height: 150%;
    width: min(30vw, 400px);
    transform-origin: 50% 0;
    opacity: .55;
    filter: blur(22px);
    mix-blend-mode: screen;
    clip-path: polygon(46.5% 0, 53.5% 0, 100% 100%, 0 100%);
    animation: kr-sway 8s ease-in-out infinite alternate;
    will-change: transform;
}
.kr-beam-a {
    right: 4%;
    background: linear-gradient(180deg, rgba(255, 45, 110, .78) 0%, rgba(255, 45, 110, 0) 76%);
    --sw-from: -15deg;
    --sw-to: 13deg;
    animation-duration: 7.6s;
    animation-delay: -2.2s;
}
.kr-beam-b {
    right: 30%;
    background: linear-gradient(180deg, rgba(216, 77, 255, .62) 0%, rgba(216, 77, 255, 0) 74%);
    --sw-from: 12deg;
    --sw-to: -17deg;
    animation-duration: 9.4s;
    animation-delay: -0.8s;
}
.kr-beam-c {
    left: 28%;
    background: linear-gradient(180deg, rgba(255, 122, 89, .5) 0%, rgba(255, 122, 89, 0) 72%);
    --sw-from: -9deg;
    --sw-to: 19deg;
    animation-duration: 8.8s;
    animation-delay: -4.1s;
}
.kr-beam-d {
    left: 2%;
    background: linear-gradient(180deg, rgba(110, 168, 255, .56) 0%, rgba(110, 168, 255, 0) 74%);
    --sw-from: 17deg;
    --sw-to: -13deg;
    animation-duration: 10.6s;
    animation-delay: -3.2s;
}
@keyframes kr-sway {
    from { transform: rotate(var(--sw-from, -16deg)); }
    to   { transform: rotate(var(--sw-to, 14deg)); }
}

/* --- drifting colored glow orbs --- */
.kr-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    mix-blend-mode: screen;
    animation: kr-drift 14s ease-in-out infinite alternate;
    will-change: transform;
}
.kr-orb-a {
    width: 46vw;
    height: 46vw;
    max-width: 640px;
    max-height: 640px;
    right: -9%;
    top: -22%;
    background: radial-gradient(circle, rgba(214, 19, 78, .52) 0%, rgba(214, 19, 78, 0) 66%);
}
.kr-orb-b {
    width: 40vw;
    height: 40vw;
    max-width: 560px;
    max-height: 560px;
    left: -7%;
    bottom: -30%;
    background: radial-gradient(circle, rgba(122, 60, 255, .42) 0%, rgba(122, 60, 255, 0) 66%);
    animation-duration: 17s;
    animation-delay: -6s;
}
@keyframes kr-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-6%, 9%, 0) scale(1.16); }
}

/* --- twinkling specks --- */
.kr-sparkle {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 11% 28%, rgba(255, 255, 255, .9), transparent 60%),
        radial-gradient(1.5px 1.5px at 24% 64%, rgba(255, 255, 255, .7), transparent 60%),
        radial-gradient(2px 2px at 37% 18%, rgba(255, 214, 224, .8), transparent 60%),
        radial-gradient(1.5px 1.5px at 52% 52%, rgba(255, 255, 255, .55), transparent 60%),
        radial-gradient(2px 2px at 66% 24%, rgba(255, 255, 255, .8), transparent 60%),
        radial-gradient(1.5px 1.5px at 78% 66%, rgba(255, 224, 232, .7), transparent 60%),
        radial-gradient(2px 2px at 89% 36%, rgba(255, 255, 255, .75), transparent 60%),
        radial-gradient(1.5px 1.5px at 45% 82%, rgba(255, 255, 255, .5), transparent 60%),
        radial-gradient(2px 2px at 8% 74%, rgba(255, 224, 232, .6), transparent 60%),
        radial-gradient(1.5px 1.5px at 94% 78%, rgba(255, 255, 255, .55), transparent 60%);
    animation: kr-twinkle 5.5s ease-in-out infinite alternate;
}
@keyframes kr-twinkle {
    from { opacity: .3; }
    to   { opacity: .85; }
}

/* --- stage floor glow --- */
.kr-stage-floor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6%;
    height: 46%;
    background: radial-gradient(60% 100% at 50% 100%, rgba(214, 19, 78, .34) 0%, rgba(214, 19, 78, 0) 72%);
}

/* ==========================================================================
   6. HOME — hero copy, search, trust row, features strip
   ========================================================================== */

.kr-hero {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 16px;
    text-align: center;
}
.kr-hero h1 {
    margin: 0 0 14px;
    font-size: clamp(30px, 4.6vw, 46px);
    font-weight: 700;
    line-height: 1.18;
    color: #ffffff;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
}
.kr-hero h1 span {
    display: block;
    color: var(--kr-accent-bright);
}
.kr-hero-sub {
    margin: 0 auto 30px;
    max-width: 640px;
    font-size: 17px;
    color: var(--kr-dark-muted);
}

/* search + CTA (mock: white pill field, crimson button beside it) */
.kr-hero-search {
    display: flex;
    align-items: stretch;
    gap: 14px;
    max-width: 720px;
    margin: 0 auto;
}
.kr-search-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}
.kr-search-field svg {
    flex: 0 0 auto;
    margin: 0 18px 0 10px;
    color: var(--kr-accent);
}
div.main .kr-search-field input,
.kr-search-field input {
    flex: 1 1 auto;
    min-width: 0;
    height: 56px;
    background: none;
    border: 0;
    border-radius: 14px;
    padding: 0 0 0 16px;
    font-size: 16px;
    color: var(--kr-ink);
    box-shadow: none;
}
div.main .kr-search-field input:focus,
.kr-search-field input:focus { box-shadow: none; border: 0; }
.kr-search-field input::placeholder { color: #a3a6b1; }
.kr-hero-cta { height: 56px; border-radius: 14px; font-size: 17px; flex: 0 0 auto; }

/* trust row under the search */
.kr-trust {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 0;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}
.kr-trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
    color: rgba(255, 255, 255, .88);
    font-size: 14.5px;
}
.kr-trust li + li { border-right: 1px solid rgba(255, 255, 255, .18); }
.kr-trust svg { color: #ffffff; opacity: .92; }

/* features strip: dark rounded card floating over the stage edge (mock) */
.kr-features {
    position: relative;
    z-index: 2;
    margin: -76px 0 0;
}
.kr-features ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 10px 6px;
    list-style: none;
    background: #14141d;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(8, 8, 18, .40);
}
.kr-features li {
    padding: 22px 18px 24px;
    text-align: center;
}
.kr-features li + li { border-right: 1px solid rgba(255, 255, 255, .08); }
.kr-features svg {
    display: block;
    margin: 0 auto 12px;
    color: var(--kr-accent-bright);
}
.kr-features strong {
    display: block;
    margin-bottom: 5px;
    font-size: 16.5px;
    color: #ffffff;
}
.kr-features span {
    display: block;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--kr-dark-muted);
}

@media (max-width: 900px) {
    .kr-features { margin-top: -64px; }
    .kr-features ul { grid-template-columns: 1fr 1fr; padding: 4px 0; }
    .kr-features li { border-right: 0 !important; }
    .kr-features li:nth-child(even) { border-right: 1px solid rgba(255, 255, 255, .08) !important; }
}
@media (max-width: 640px) {
    .kr-stage { padding: 38px 0 110px; }
    .kr-hero-search { flex-direction: column; gap: 12px; }
    .kr-hero-cta { width: 100%; }
    .kr-trust li { padding: 0 12px; }
    .kr-beam { filter: blur(15px); }
    .kr-beam-c { display: none; }
}

/* ==========================================================================
   7. HOME — song shelves (the two carousels) + "איך זה עובד" steps
   ========================================================================== */

.kr-shelves { margin-top: 6px; }
.kr-shelf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}
@media (max-width: 980px) {
    .kr-shelf-grid { grid-template-columns: 1fr; }
}

.kr-shelf {
    background: var(--kr-card);
    border-radius: var(--kr-radius);
    box-shadow: var(--kr-shadow);
    padding: 18px 18px 12px;
    min-width: 0;
}
.kr-shelf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.kr-shelf-head h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--kr-ink);
}
.kr-shelf-head h3 svg { color: var(--kr-accent); }
.kr-badge-new {
    display: inline-block;
    padding: 3px 9px 4px;
    background: var(--kr-accent);
    border-radius: 999px;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
}
.kr-shelf-more {
    color: var(--kr-accent-ink);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.kr-shelf-more:hover { text-decoration: underline; color: var(--kr-accent-strong); }

.kr-shelf-scroller {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.kr-shelf-scroller::-webkit-scrollbar { display: none; }

.kr-tile {
    flex: 0 0 calc((100% - 56px) / 5);
    min-width: 100px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
}
.kr-tile strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    color: var(--kr-ink);
}
.kr-tile small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--kr-ink-soft);
}
.kr-tile-art {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(18, 18, 35, .08);
    background: #ececf0;
}
.kr-tile-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s cubic-bezier(.2, .6, .2, 1);
}
.kr-tile:hover .kr-tile-art img { transform: scale(1.07); }
.kr-tile-play {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-top: 10px;
    border: 2px solid var(--kr-accent);
    border-radius: 50%;
    color: var(--kr-accent);
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.kr-tile:hover .kr-tile-play {
    background: var(--kr-accent);
    color: #ffffff;
    transform: scale(1.08);
}

.kr-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding: 12px 0 4px;
}
.kr-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d9dadf;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}
.kr-dots button.is-on {
    background: var(--kr-accent);
    transform: scale(1.2);
}

@media (max-width: 640px) {
    .kr-tile { flex-basis: calc((100% - 28px) / 3); }
}

/* --- how it works: 4 numbered cards on a dashed line (mock) --- */
.kr-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    margin: 0;
    padding: 14px 0 6px;
    list-style: none;
    counter-reset: none;
}
.kr-steps li {
    position: relative;
    background: var(--kr-card);
    border-radius: var(--kr-radius);
    box-shadow: var(--kr-shadow);
    padding: 30px 18px 24px;
    text-align: center;
}
.kr-steps li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -26px;
    width: 26px;
    border-top: 2px dashed #d3d5db;
}
.kr-step-num {
    position: absolute;
    top: -14px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    background: var(--kr-accent);
    border-radius: 50%;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(214, 19, 78, .35);
}
.kr-step-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    background: var(--kr-accent-soft);
    border-radius: 50%;
    color: var(--kr-accent);
}
.kr-step-icon svg { display: block; }
.kr-steps strong {
    display: block;
    margin-bottom: 6px;
    font-size: 16.5px;
    color: var(--kr-ink);
}
/* :not([class]) keeps this off .kr-step-num / .kr-step-icon — the bare-class
   selectors (0,1,0) lose to ".kr-steps span" (0,1,1), which flattened their
   display:grid centering to block and shrank the badge digits. */
.kr-steps span:not([class]) {
    display: block;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--kr-ink-soft);
}
@media (max-width: 940px) {
    .kr-steps { grid-template-columns: 1fr 1fr; }
    .kr-steps li::after { display: none; }
}
@media (max-width: 540px) {
    .kr-steps { grid-template-columns: 1fr; }
}

/* ==========================================================================
   8. HOME — artists row (kept content, new light look)
   ========================================================================== */

.kr-artists-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 18px;
}
.kr-artist {
    display: block;
    text-align: center;
    text-decoration: none;
    min-width: 0;
}
.kr-artist-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--kr-dark-2);
    box-shadow: inset 0 0 0 1px rgba(18, 18, 35, .08), var(--kr-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}
.kr-artist-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kr-artist-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
}
.kr-artist strong {
    display: block;
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--kr-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kr-artist:hover .kr-artist-img {
    transform: translateY(-3px);
    box-shadow: 0 0 0 3px var(--kr-accent), var(--kr-shadow-hover);
}
.kr-artist:hover strong { color: var(--kr-accent-ink); }
@media (max-width: 940px) {
    .kr-artists-row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 540px) {
    .kr-artists-row { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

/* ==========================================================================
   9. BANDS — the merged former-sidebar widgets as white cards
   (markup = _bands.php with the legacy box classes; layout grid in §14/§15)
   ========================================================================== */

.nk-bands > div,
.nk-bands > .kara_app_banner {
    background: var(--kr-card);
    border-radius: var(--kr-radius);
    box-shadow: var(--kr-shadow);
    color: var(--kr-ink-soft);
}
.nk-bands > div { padding: 20px 20px 18px; }

/* shared card heading: ink + crimson kicker bar */
.nk-bands div.about h1,
.nk-bands div.about h2,
.nk-bands div.login_box h2,
.nk-bands div.dvd_month h2,
.nk-bands div.upload_song h2,
.nk-bands div.categories h2,
.nk-bands div.newsletter h2,
.nk-bands div.new_songs h2 {
    position: relative;
    background: none;
    width: auto;
    height: auto;
    margin: 0 0 14px;
    padding: 0 2px 10px;
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--kr-ink);
    border-bottom: 1px solid var(--kr-line);
}
.nk-bands div.about h1::before,
.nk-bands div.about h2::before,
.nk-bands div.login_box h2::before,
.nk-bands div.dvd_month h2::before,
.nk-bands div.upload_song h2::before,
.nk-bands div.categories h2::before,
.nk-bands div.newsletter h2::before,
.nk-bands div.new_songs h2::before {
    content: '';
    position: absolute;
    bottom: -1px;
    right: 0;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: var(--kr-accent);
}

.nk-bands div.about { color: var(--kr-ink-soft); }
.nk-bands div.about a { color: var(--kr-accent-ink); }

/* login card */
.nk-bands div.login_box { color: var(--kr-ink-soft); }
.my_subscription a { color: var(--kr-accent-ink); }
.subscription_one {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6134e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='14 6 8 12 14 18'/%3E%3C/svg%3E") no-repeat right center;
    background-size: 11px 11px;
    line-height: 28px;
    color: var(--kr-ink);
}
.subscription_two {
    width: 128px;
    height: 28px;
    padding: 0 8px;
    box-sizing: border-box;
    background: #f4f4f7;
    border: 1px solid #dcdee4;
    border-radius: 8px;
    transition: border-color .15s ease, background-color .15s ease;
}
.subscription_two:focus-within {
    background: #ffffff;
    border-color: var(--kr-accent);
}
div.main .subscription_two input,
.subscription_two input {
    width: 100%;
    height: 26px;
    background: none;
    border: 0;
    padding: 0;
    box-shadow: none;
    font: normal 14px 'almoni', Arial, sans-serif;
    color: #26292e;
}
div.main .subscription_three input,
.subscription_three input {
    padding: 0 18px;
    height: 30px;
    background: var(--kr-accent);
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    font: bold 14px 'almoni', Arial, sans-serif;
    cursor: pointer;
    transition: background-color .18s ease;
}
div.main .subscription_three input:hover,
.subscription_three input:hover { background: var(--kr-accent-strong); color: #ffffff; }
.subscription_forgot { color: var(--kr-ink-faint); }
.subscription_forgot a { color: var(--kr-accent-ink); }

/* product of the month */
.nk-bands div.dvd_month { background: var(--kr-card); }
.dvd_month_text { color: var(--kr-ink-soft); }
.dvd_month_text_title { font-weight: 700; color: var(--kr-ink); }
.dvd_bg { background: none; }
.dvd_bg img {
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(18, 18, 35, .18);
}
.price_bg { background: none; }
.price_bg a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin: 10px;
    padding: 0;
    background: var(--kr-accent);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(214, 19, 78, .35);
    color: #ffffff;
    transition: transform .18s ease;
}
.price_bg a:hover { transform: scale(1.06); }
.our_price { float: none; width: auto; font-size: 11px; color: rgba(255, 255, 255, .85); }
.price { font-size: 17px; font-weight: 700; color: #ffffff; }
.price .shekels { color: #ffffff; }

a.big_button_black {
    width: auto;
    padding: 0 18px;
    height: 34px;
    line-height: 34px;
    margin-right: 0;
    background: var(--kr-ink);
    border-radius: 10px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    transition: background-color .18s ease, color .18s ease;
}
a.big_button_black:hover { background: var(--kr-accent); color: #ffffff; }

/* "העלו את השיר שלכם" — the whole card body is one link to the
   distribution landing page: icon ring, two lines of copy, crimson button */
.kr-upload {
    display: grid;
    grid-template-columns: 1fr auto; /* RTL: copy on the right, icon at the left end */
    grid-template-areas: "text icon" "btn btn";
    align-items: center;
    gap: 10px 14px;
    padding: 0 0 2px;
    color: var(--kr-ink-soft);
    text-decoration: none;
}
.kr-upload-icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 2px solid var(--kr-accent);
    border-radius: 50%;
    color: var(--kr-accent);
    transition: transform .22s ease, background-color .22s ease, color .22s ease;
}
.kr-upload-icon svg { display: block; }
.kr-upload-text {
    grid-area: text;
    display: block;
    font-size: 13.5px;
    line-height: 1.5;
}
.kr-upload-text strong {
    display: block;
    margin-bottom: 3px;
    font-size: 15.5px;
    color: var(--kr-ink);
}
.kr-upload-btn {
    grid-area: btn;
    justify-self: start;
    height: 38px;
    padding: 0 18px;
    font-size: 14.5px;
    border-radius: 999px;
}
.kr-upload-btn svg { transition: transform .22s ease; }
.kr-upload:hover .kr-upload-icon {
    background: var(--kr-accent);
    color: #ffffff;
    transform: scale(1.08);
}
.kr-upload:hover .kr-upload-btn {
    background: var(--kr-accent-strong);
    transform: translateY(-1px);
}
.kr-upload:hover .kr-upload-btn svg { transform: translateX(-3px); }

/* categories chip cloud + inner new-songs strip (light chips) */
.nk-cat-cloud { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0 6px; }
.nk-cat-cloud a {
    display: inline-block;
    padding: 7px 16px;
    background: #f5f5f8;
    border: 1px solid var(--kr-line);
    border-radius: 999px;
    color: var(--kr-ink);
    font-size: 13.5px;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.nk-cat-cloud a:hover {
    border-color: var(--kr-accent);
    color: var(--kr-accent-ink);
    background: var(--kr-accent-soft);
}

.nk-song-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
    gap: 10px;
    padding: 2px 0 4px;
}
.nk-song-strip a {
    display: block;
    padding: 10px 12px;
    background: #f7f7fa;
    border: 1px solid var(--kr-line);
    border-radius: 12px;
    color: var(--kr-ink);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.nk-song-strip a:hover { border-color: var(--kr-accent); box-shadow: var(--kr-shadow); }
.nk-strip-title { display: block; font-weight: 700; margin-bottom: 2px; }
.nk-strip-artist { color: var(--kr-ink-soft); font-size: 12px; }

/* newsletter */
.nk-bands div.newsletter form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 4px 0 6px;
}
.nk-bands div.newsletter form > div { float: none; margin: 0; }
div.main .newsletter .field,
.newsletter .field {
    width: min(420px, 78vw);
    height: 40px;
    padding: 0 16px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #d9dbe1;
    border-radius: 999px;
    font: normal 13.5px 'almoni', Arial, sans-serif;
    color: #33373c;
}
div.main .newsletter .send,
.newsletter .send {
    width: auto;
    height: 40px;
    margin: 0;
    padding: 0 26px;
    background: var(--kr-accent);
    border: 0;
    border-radius: 999px;
    font: bold 14px 'almoni', Arial, sans-serif;
    color: #ffffff;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}
div.main .newsletter .send:hover,
.newsletter .send:hover { background: var(--kr-accent-strong); transform: translateY(-1px); }
.nk-newsletter-success {
    padding: 10px 2px;
    color: var(--kr-accent-ink);
    font-weight: 700;
    text-align: center;
}

/* sidebar app banner: invisible store-badge hotspots over the real badges
   [ported from kara_modern §2 — functional hit-areas, do not drop] */
.kara_app_banner {
    position: relative;
    display: block;
    width: 316px;
    max-width: 100%;
    margin: 0 auto;
    line-height: 0;
    border-radius: var(--kr-radius);
    overflow: hidden;
}
.kara_app_banner img.my_banner {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
}
.kara_app_banner .kara_app_ios,
.kara_app_banner .kara_app_android {
    position: absolute;
    top: 56%;
    height: 40%;
    border-radius: 6px;
}
.kara_app_banner .kara_app_ios     { left: 37%; width: 31%; }
.kara_app_banner .kara_app_android { left: 69%; width: 30%; }

/* ==========================================================================
   10. LISTING PAGES — toolbar + white song-card grid + crimson pager
   ========================================================================== */

.prevnext {
    background: var(--kr-card);
    border-radius: var(--kr-radius-sm);
    padding: 12px 16px;
    box-shadow: var(--kr-shadow);
    color: var(--kr-ink-soft);
}
.prevnext .bold { color: var(--kr-ink); }
.prevnext .green { color: var(--kr-accent-ink); }
.prevnext select {
    height: 30px;
    margin: 0 4px;
    padding: 2px 8px;
    background: #ffffff;
    border: 1px solid #d9dbe1;
    border-radius: 8px;
    color: #33373c;
    font: normal 13px 'almoni', Arial, sans-serif;
    transition: border-color .15s ease;
}
.prevnext select:hover { border-color: var(--kr-accent); }

.kr-songs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 16px 0 24px;
}
@media (max-width: 1100px) { .kr-songs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .kr-songs-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.kr-song-card {
    display: flex;
    flex-direction: column;
    background: var(--kr-card);
    border-radius: 14px;
    box-shadow: var(--kr-shadow);
    padding: 10px;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.kr-song-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--kr-shadow-hover);
}
.kr-song-thumb {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #ececf0;
}
.kr-song-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s cubic-bezier(.2, .6, .2, 1);
}
.kr-song-card:hover .kr-song-thumb img { transform: scale(1.06); }
.kr-play {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--kr-accent);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(214, 19, 78, .45);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, background-color .18s ease;
}
.kr-song-card:hover .kr-play { opacity: 1; transform: none; }
.kr-play:hover { background: var(--kr-accent-strong); }
@media (hover: none) {
    .kr-play { opacity: 1; transform: none; width: 32px; height: 32px; }
}
.kr-song-meta {
    display: block;
    padding: 10px 4px 4px;
    min-width: 0;
}
.kr-song-meta strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--kr-ink);
}
.kr-song-meta small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
    font-size: 13px;
    color: var(--kr-accent-ink);
}

/* legacy result rows (still used by CMS bodies): soften to the new look */
.line_grey { background-color: transparent; }
.result_box {
    background: var(--kr-card);
    border-radius: 12px;
    padding: 8px;
    box-sizing: border-box;
    box-shadow: var(--kr-shadow);
}
.result_image, .result_image_orig { overflow: hidden; border-radius: 10px; }
.result_image img, .result_image_orig img { border-radius: 10px; }
.result_image a, .result_image_orig a { background: none; border-radius: 10px; }
a.result_text { transition: color .15s ease; }
.result_box:hover a.result_text { color: var(--kr-accent-ink); }

/* pager pills */
a.prev_page, a.next_page {
    width: auto;
    height: 40px;
    padding: 0 24px;
    background: var(--kr-accent);
    border-radius: 11px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    box-shadow: 0 8px 22px rgba(214, 19, 78, .30);
    transition: background-color .18s ease, transform .18s ease;
}
a.prev_page:hover, a.next_page:hover {
    background: var(--kr-accent-strong);
    color: #ffffff;
    transform: translateY(-1px);
}

/* ==========================================================================
   11. SONG PAGE — cover card + details column, mock-style rows
   ========================================================================== */

.kr-song-layout {
    /* RTL grid: 1st track = right = the cover card (fixed, so the legacy
       188px art isn't over-upscaled); 2nd track = left = details column */
    display: grid;
    grid-template-columns: minmax(300px, 480px) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    margin-top: 6px;
}
@media (max-width: 980px) {
    .kr-song-layout { grid-template-columns: 1fr; }
}

/* cover card (first in DOM = right column in RTL) */
.kr-song-cover {
    background: var(--kr-card);
    border-radius: var(--kr-radius);
    box-shadow: var(--kr-shadow);
    padding: 12px;
}
.kr-song-cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.kr-song-title a { color: var(--kr-accent-ink); text-decoration: none; }
.kr-song-title a:hover { color: var(--kr-accent-strong); }

/* details rows (מילים / לחן / גירסה...) */
.kr-song-panel {
    background: var(--kr-card);
    border-radius: var(--kr-radius);
    box-shadow: var(--kr-shadow);
    padding: 6px 20px;
    margin-bottom: 16px;
}
.kr-detail-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--kr-line);
}
.kr-detail-row:last-child { border-bottom: 0; }
.kr-detail-row .author {
    flex: 0 0 auto;
    min-width: 86px;
    background: none;
    color: var(--kr-ink);
    font-weight: 700;
}
.kr-detail-row .bold { color: var(--kr-ink-soft); font-weight: 400; }

/* media offers: the legacy song_clip rows as white cards with the crimson
   buttons from the mocks. Rows keep class song_clip + inline display:none —
   kara_scripts' slideDown reveal still runs; the stylesheet display:flex
   takes over once the inline 'none' is removed. */
.song_details { width: auto; }
.kr-offer,
.song_details .song_clip {
    float: none;
    clear: both;
    width: auto;
    background: var(--kr-card);
    border: 0;
    border-radius: 14px;
    box-shadow: var(--kr-shadow);
    padding: 14px 18px;
    margin: 0 0 12px;
}
.kr-offer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.kr-offer h3.song_clip_name {
    flex: 1 1 auto;
    min-width: 160px;
    margin: 0;
    padding-right: 34px;
    background-size: 24px 24px;
    background-position: right center;
    background-repeat: no-repeat;
    font-size: 16px;
    font-weight: 700;
    color: var(--kr-ink);
    line-height: 1.4;
}
.song_clip .song_clip_name {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6134e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 7l-7 5 7 5V7z'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E");
}
.song_clipsng .song_clip_name {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6134e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3C/svg%3E");
}
.song_playback .song_clip_name {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6134e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
}

/* file-type chip (MP4 / MP3) — echoes the mock's step-1 cards */
.kr-offer-kind {
    flex: 0 0 auto;
    padding: 4px 12px 5px;
    background: var(--kr-accent-soft);
    border: 1px solid rgba(214, 19, 78, .25);
    border-radius: 999px;
    color: var(--kr-accent-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

a.song_clip_download, a.song_clip_play {
    float: none;
    width: auto;
    height: 38px;
    padding: 0 22px;
    margin: 0;
    background: var(--kr-accent);
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 38px;
    text-align: center;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
a.song_clip_download {
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 15px 15px;
    box-shadow: 0 8px 20px rgba(214, 19, 78, .28);
}
a.song_clip_download:hover { background-color: var(--kr-accent-strong); color: #ffffff; }
a.song_clip_play {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--kr-accent);
    color: var(--kr-accent-ink);
}
a.song_clip_play:hover { background: var(--kr-accent); color: #ffffff; }

/* pitch card: legacy widget, crimson accents */
.song_details .song_clip.song_pitch { display: flex; align-items: center; }
.song_pitch .song_clip_name {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6134e' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E");
}
.song_pitch .pitch_value span { color: var(--kr-ink-faint); }
.song_pitch .pitch_value span.current { color: var(--kr-accent-ink); font-weight: 700; }
.song_pitch .pitch_intervals span { background: #dfe1e6; }
.song_pitch .pitch_intervals span.current { background: var(--kr-accent); }
.song_pitch .pitch_wrap .pitch_slide_wrap button {
    background: var(--kr-accent-soft);
    border: 1px solid rgba(214, 19, 78, .3);
    border-radius: 8px;
    color: var(--kr-accent-ink);
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.song_pitch .pitch_wrap .pitch_slide_wrap button:hover {
    background: var(--kr-accent);
    color: #ffffff;
}
.song_pitch input[type=range] { accent-color: var(--kr-accent); }
.song_pitch input[type=range]::-webkit-slider-runnable-track {
    background: #e4e5ea;
    border: 0;
}
.song_pitch input[type=range]::-webkit-slider-thumb {
    background: var(--kr-accent);
    border: 3px solid #ffffff;
    box-shadow: 0 2px 8px rgba(18, 18, 35, .3);
}
.song_pitch input[type=range]::-moz-range-track { background: #e4e5ea; border: 0; }
.song_pitch input[type=range]::-moz-range-thumb {
    background: var(--kr-accent);
    border: 3px solid #ffffff;
    box-shadow: 0 2px 8px rgba(18, 18, 35, .3);
}

/* preview players */
.song_preview { background: none; }
.song_preview audio,
.song_preview video {
    border-radius: 10px;
    background: var(--kr-dark);
}

/* credit/link rows */
.song_more_details { color: var(--kr-ink-soft); }
.song_rdetails .line { border-bottom: 1px solid var(--kr-line); padding: 8px 0; }
.song_rdetails .line:last-child { border-bottom: 0; }
.author { color: var(--kr-ink); font-weight: 700; background: none; }
.song_rdetails .bold { color: var(--kr-ink-soft); font-weight: 400; }

a.lyrics, a.all_songs, a.tv_icon {
    color: var(--kr-ink);
    background-size: 16px 16px;
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 24px;
    line-height: 1.9;
    text-decoration: none;
    transition: color .15s ease;
}
a.lyrics {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6134e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
}
a.all_songs {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6134e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
}
a.tv_icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6134e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='10 8 16 12 10 16 10 8'/%3E%3C/svg%3E");
}
a.lyrics:hover, a.all_songs:hover, a.tv_icon:hover { color: var(--kr-accent-ink); }

.song_lyrics_box {
    background: var(--kr-card);
    border-radius: var(--kr-radius-sm);
    padding: 16px 20px !important; /* beats the inline legacy padding */
    box-shadow: var(--kr-shadow);
    margin-bottom: 12px;
    color: var(--kr-ink-soft);
}

.song_description { color: var(--kr-ink-soft); }

/* related strip heading + button (specific enough to beat the ported
   div.content_index > div.line flow-root rule at every width) */
div.content_index > div.line.song_titles,
.song_titles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 26px 0 4px;
    width: auto;
    float: none;
}
.song_titles h2 {
    width: auto;
    height: auto;
    background: none;
    font-size: 20px;
    font-weight: 700;
    color: var(--kr-ink);
}
a.song_button {
    float: none;
    width: auto;
    height: 36px;
    padding: 0 20px;
    background: transparent;
    border-radius: 10px;
    box-shadow: inset 0 0 0 2px var(--kr-accent);
    color: var(--kr-accent-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 36px;
    text-align: center;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}
a.song_button:hover { background: var(--kr-accent); color: #ffffff; }

.kr-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 14px;
}
@media (max-width: 720px) { .kr-related-grid { grid-template-columns: 1fr; } }
.kr-related-grid .kr-song-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
.kr-related-grid .kr-song-thumb { flex: 0 0 74px; width: 74px; }

/* ==========================================================================
   12. ARTISTS INDEX + CMS CONTENT PAGES
   ========================================================================== */

/* the generic content card (artists grid, CMS bodies, listing empty state) */
div.content_index > div.content {
    background: var(--kr-card);
    border-radius: var(--kr-radius);
    box-shadow: var(--kr-shadow);
    padding: 24px 26px;
    box-sizing: border-box;
}

.artists_grid { padding: 4px 0 6px; direction: rtl; text-align: right; }
.artists_grid a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #f7f7fa;
    border: 1px solid var(--kr-line);
    border-radius: 10px;
    color: var(--kr-ink);
    font-size: 14px;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.artists_grid a:hover {
    border-color: var(--kr-accent);
    color: var(--kr-accent-ink);
    background: var(--kr-accent-soft);
    text-decoration: none;
}
.artists_grid a .count { color: var(--kr-ink-faint); font-size: 12px; }
.kr-artists-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 14px;
}
@media (max-width: 1000px) { .kr-artists-columns { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .kr-artists-columns { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .kr-artists-columns { grid-template-columns: 1fr; } }

/* CMS body typography */
div.content_index > div.content h2,
div.content_index > div.content h3 { color: var(--kr-ink); line-height: 1.35; }
div.content_index > div.content a { color: var(--kr-accent-ink); }
div.content_index > div.content a:hover { color: var(--kr-accent-strong); }
div.content_index > div.content img { max-width: 100%; height: auto; border-radius: 10px; }
div.content_index > div.content table { max-width: 100%; border-collapse: collapse; }
div.content_index > div.content table td,
div.content_index > div.content table th { border: 1px solid var(--kr-line); padding: 8px 12px; }

/* CMS/content forms (contact etc.) */
.content input[type="text"],
.content input[type="email"],
.content input[type="tel"],
.content input[type="password"],
.content textarea,
.content select {
    background: #ffffff;
    border: 1px solid #d9dbe1;
    border-radius: 10px;
    padding: 8px 12px;
    box-sizing: border-box;
    color: #26292e;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.content input[type="submit"],
.content button[type="submit"] {
    background: var(--kr-accent);
    border: 0;
    border-radius: 10px;
    padding: 9px 28px;
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}
.content input[type="submit"]:hover,
.content button[type="submit"]:hover {
    background: var(--kr-accent-strong);
    transform: translateY(-1px);
}

/* ==========================================================================
   13. GLUE PAGES (commerce / account / shop / operators / auth)
   Shared cross-brand views — CSS-only re-skin, no markup edits.
   ========================================================================== */

.nk-title { color: var(--kr-ink); font-weight: 700; }
.nk-btn { background: var(--kr-accent); border-radius: 10px; }
.nk-btn:hover { background: var(--kr-accent-strong); }
.nk-hero { background: linear-gradient(120deg, #141420 0%, #3a0f22 100%); border-radius: var(--kr-radius); }
.nk-card { border: 0; border-radius: 14px; box-shadow: var(--kr-shadow); }
.nk-empty { background: var(--kr-card); border: 1px dashed #d5d7de; border-radius: 14px; color: var(--kr-ink-faint); }

/* checkout / cart boxes */
.nk-commerce .nk-box,
.nk-box {
    border: 0;
    border-radius: 14px;
    box-shadow: var(--kr-shadow);
}
.nk-box h3 { color: var(--kr-ink); }
.nk-btn-pay { background: var(--kr-accent); border-radius: 11px; }
.nk-btn-pay:hover { background: var(--kr-accent-strong); }
.nk-field input:focus,
.nk-field select:focus,
.nk-field textarea:focus {
    border-color: var(--kr-accent);
    box-shadow: 0 0 0 3px rgba(214, 19, 78, .13);
    outline: none;
}

/* member-area / auth shared bits */
.nk-flash { border-radius: 10px; }
.nk-credits h3 { color: var(--kr-ink); }

/* ==========================================================================
   14. [ported] STRUCTURAL — desktop shell ≥1000px (from kara_modern §10+§12)
   Neutralizes legacy float/fixed-height traps. Colors adapted to v3.
   ========================================================================== */
@media (min-width: 1000px) {

    /* wide fluid shell: 960px -> up to 1280px, centered */
    div.container { width: min(1280px, calc(100% - 48px)); }

    /* ---- header: ONE 88px row — .line (brand [+ search/phone on inner
       pages]) on the right, div.menu filling the rest with its list centered,
       .iconsSocial lifted out of .block and pinned to the far left. The bar's
       content runs a little wider than the page column, as in the mock. If
       .line grows too wide (inner pages show search + phone) the nav simply
       wraps under it as a second, full-width row. ---- */
    div.header {
        width: min(1480px, calc(100vw - 56px));
        height: auto;
        /* symmetric so the RTL over-constrained-margin rule (which drops
           margin-left) still centres it on the 1280px column */
        margin: 0 calc(50% - min(740px, 50vw - 28px));
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    div.header .line {
        float: none; /* legacy float:right + width:auto = shrink-to-fit trap */
        width: auto;
        min-height: 88px;
        display: flex;
        align-items: center;
        gap: 0;
        padding: 0;
        position: static; /* .iconsSocial positions against div.header */
        flex: 0 1 auto;
    }
    div.header a.logo {
        float: none;
        flex: 0 0 auto;
        margin: 0;
    }
    div.header div.block {
        float: none;
        width: auto;
        flex: 0 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 18px;
    }
    div.header div.search {
        float: none;
        width: 300px;
        height: auto;
        margin: 0 26px 0 0; /* breathing room from the brand (inner pages) */
        padding: 0;
    }
    div.header div.search br.clear { display: none; }
    div.header div.phone,
    div.header a.phone { float: none; margin: 0; }
    div.header .iconsSocial {
        float: none;
        position: absolute; /* far LEFT, centred on the first (88px) row */
        left: 0;
        top: 44px;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        margin: 0;
    }
    div.header .iconsSocial a { float: none; margin: 0; width: auto; }

    /* empty legacy partner slot adds dead height under the bar */
    div.header .partner_logo { display: none; }

    /* nav takes whatever is left of the row (flex-basis 0) as long as that
       is at least 920px — the eight links fit on one line at every size
       below — otherwise the whole strip drops under the brand row (inner
       pages, where .line also carries search + phone). padding-left keeps
       the list clear of the social tiles pinned to the corner; the links
       spread evenly across the remaining width, so they can never overflow.
       Link size eases 17px→21px with the viewport (mock: 21px-equivalent). */
    div.header div.menu {
        flex: 1 1 0;
        min-width: 920px;
        width: auto;
        margin: 0;
        padding: 0 30px 0 116px;
        height: auto;
        font-size: 21px;
    }
    div.header div.menu ul {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        width: auto;
        height: auto;
        background: none;
    }
    div.header div.menu li {
        float: none;
        background: none;
        height: auto;
    }
    /* .38/.48em top/bottom: letters centred on the 88px row, the 2px rule
       lands ~12px under them (mock: text rows 39-49, rule at 61 of 87) */
    div.header div.menu li a {
        display: block;
        float: none;
        width: auto;
        height: auto;
        padding: .38em .43em .48em;
        font-size: clamp(17px, 1.5625vw - 3px, 21px);
        line-height: 1;
        white-space: nowrap;
    }

    /* inner pages: .line also carries search + phone, so the nav always
       lands on its own full-width row under the brand — centre it there */
    body:not(.karaoke-homepage) div.header div.menu {
        flex: 1 1 100%;
        min-width: 0;
        padding: 0 0 4px;
        border-top: 1px solid var(--kr-dark-line);
    }
    body:not(.karaoke-homepage) div.header div.menu ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0 clamp(6px, 2.5vw - 20px, 34px);
    }

    /* single-column shell: block flow, floats contained [ported §12] */
    div.main {
        float: none;
        width: auto;
        display: block;
        background: none;
        border-radius: 0;
        padding-bottom: 30px;
    }
    div.content_index {
        float: none;
        width: auto;
        min-width: 0;
        box-sizing: border-box;
        padding: 22px 0 8px;
        background: none;
        border-radius: 0;
        display: flow-root; /* contains legacy floated children (.content) */
        margin-bottom: 8px;
    }
    /* the legacy IE-era "float:right + display:inline" hack on
       .main_inner .content_index fragments the column in block flow —
       make it a float-containing block and drop the 614px width cap */
    .main_inner .content_index { display: flow-root; width: auto; }

    /* homepage column hugs the dark band (stage starts at the very top) */
    body.karaoke-homepage div.content_index { padding-top: 0; }

    /* feature pages (shop, operators) wrap content in a classless
       inline-styled div — let it fill the shell */
    div.main.main_inner > div[style*="max-width"] {
        min-width: 0;
        box-sizing: border-box;
    }

    div.footer { float: none; width: auto; }

    /* neutral glue pages (login/account/commerce) in the light shell */
    body.karaoke .nk-main {
        width: auto;
        max-width: 1140px;
        min-width: 0;
    }

    /* wide inline blocks may never overflow the column [ported] */
    div.content_index [style*="max-width:960px"],
    div.content_index [style*="max-width:860px"],
    div.content_index [style*="max-width:760px"] { max-width: 100% !important; }
    div.content_index table  { max-width: 100%; }
    div.content_index iframe { max-width: 100%; }

    /* listing chrome goes fluid [ported] */
    div.content_index > div.line {
        float: none;
        width: auto;
        display: flow-root;
    }
    div.content_index > div.line:has(.result_box) {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 14px;
    }
    .content { width: auto; }
    .result_box { width: calc(33.33% - 24px); }

    .prevnext {
        float: none;
        width: auto;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 18px;
        margin-bottom: 14px;
    }
    .prevnext .showing,
    .prevnext .filtering,
    .prevnext .turning {
        float: none;
        margin: 0;
        height: auto;
    }

    .prevnext_links {
        display: flex !important;
        justify-content: center;
        gap: 30px;
        width: auto;
    }
    a.prev_page { float: none; margin-right: 0; }
    a.next_page { float: none; margin-left: 0; }

    /* song page guards [ported §12] */
    .song_details { width: auto; overflow: visible; }
    .song_clip { width: auto; }
    .song_titles h2 { width: auto; }

    .main_title, .subtitle { width: auto; height: auto; }
}

/* narrow desktops: the row can't hold brand + eight links + socials, so the
   nav drops under the brand row (same look as the inner pages above) */
@media (min-width: 1000px) and (max-width: 1255px) {
    div.header div.menu {
        flex: 1 1 100%;
        min-width: 0;
        padding: 0 0 4px;
        border-top: 1px solid var(--kr-dark-line);
    }
    div.header div.menu ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0 clamp(6px, 2.5vw - 20px, 34px);
    }
}

/* ==========================================================================
   15. [ported] STRUCTURAL — mobile harmonization <1000px (from §11+§12)
   ========================================================================== */
@media (max-width: 999px) {

    /* brand lockup centred at the top of the stacked header */
    div.header a.logo.kr-brand { margin: 14px auto 0; }

    /* hamburger tile in the black-bar palette (legacy: lime bars) */
    .kara_nav_toggle {
        background: #1a1a1a;
        border-color: rgba(255, 255, 255, .16);
    }
    .kara_nav_toggle span { background: #ffffff; }

    /* nav: transparent container, dark dropdown panel */
    div.header div.menu {
        background: transparent;
        border: 0;
        border-radius: 0;
    }
    div.header div.menu ul {
        background: var(--kr-dark-2);
        border-radius: 12px;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), 0 14px 34px rgba(0, 0, 0, .45);
    }
    /* collapsed (max-height:0) the 1px ring would still draw as a hairline */
    div.header div.menu:not(.kara_nav_open) ul { box-shadow: none; }
    /* the underline is a desktop idiom — row highlight instead */
    div.header div.menu li a::after { display: none; }
    div.header div.menu li a:hover,
    div.header div.menu li a.current {
        background: rgba(214, 19, 78, .14);
        color: #ffffff;
    }

    /* search keeps the pill, loses double chrome */
    div.header div.search {
        background: none;
        border: 0;
        padding: 0;
    }
    div.header div.phone,
    div.header a.phone { margin: 12px auto 0; }

    div.footer { padding: 22px 12px 26px; }

    /* stacked columns sit on the light canvas */
    div.main div.content_index,
    div.main div.side_index,
    div.main.main_inner div.content_index,
    div.main.main_inner div.side_index { background: transparent; }

    /* feature pages' classless inline-styled wrapper (shop, operators) */
    div.main.main_inner > div[style*="max-width"] {
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
    }
    div.main.main_inner > div[style*="max-width"] .nk-title,
    div.main.main_inner > div[style*="max-width"] > h1 { color: var(--kr-ink); }

    /* the stage bleeds edge-to-edge over the responsive paddings */
    .kr-stage { margin-top: 0; }
}

/* ==========================================================================
   16. [ported §12] BANDS layout — the merged-widgets grid
   ========================================================================== */

.nk-bands {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    padding: 26px 0 12px;
    direction: rtl;
    /* a grid is a BFC: never sit beside an uncontained legacy float */
    clear: both;
    order: 3;
}
.nk-bands > div {
    float: none;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    box-sizing: border-box;
}
.nk-band-wide { grid-column: 1 / -1; }
@media (min-width: 700px) {
    .nk-span2 { grid-column: span 2; }
}
.nk-bands > .kara_app_banner { align-self: center; }
.nk-bands div.login_box { padding-bottom: 16px; }

/* homepage: the three cards under the about text (product of the month,
   member login, newsletter) sit in three equal columns; the wide bands
   still span the row. Below 1000px the auto-fit grid above takes over. */
@media (min-width: 1000px) {
    .nk-bands-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* newsletter as a regular card: the field takes the row, the button trails */
.nk-bands div.newsletter form { justify-content: flex-start; }
.nk-bands div.newsletter form > div:first-child { flex: 1 1 150px; min-width: 0; }
div.main .nk-bands .newsletter .field,
.nk-bands .newsletter .field { width: 100%; }

/* ==========================================================================
   17. MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .kr-beam, .kr-orb, .kr-sparkle, .kr-eq-divider i, .kr-stage-eq i { animation: none; }
    .kr-btn, .kr-song-card, .kr-tile-art img, .kr-artist-img,
    .kr-step-icon, .kr-features svg { transition: none; }
}

/* ==========================================================================
   18. LANDING MOTIFS — animated equalizer + outlined icon language
   --------------------------------------------------------------------------
   Ported from karaokelanding.bizdesign.co (Heebo/purple landing, Aug 2026)
   and recolored to the v3 crimson palette. Self-contained: every rule here
   overrides earlier sections by source order, so the whole block can be
   lifted to the live kara_v3.css as one piece.
   ========================================================================== */

/* the shared "breathing bar" keyframe (landing: @keyframes eq) */
@keyframes kr-eq {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(.5); }
}

/* --- section headings: the static crimson underline becomes a 5-bar
       mini equalizer (landing .wave-divider heights + .brand-mark stagger).
       Only where the divider markup is present — headings without it
       ("איך זה עובד?", "הזמרים המבוקשים ביותר") keep the §4 static rule --- */
.kr-sec-head h2:has(+ .kr-eq-divider) { padding-bottom: 0; }
.kr-sec-head h2:has(+ .kr-eq-divider)::after { content: none; }
.kr-eq-divider {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
    height: 26px;
    margin: 12px 0 0;
}
.kr-eq-divider i {
    width: 5px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--kr-accent-bright), var(--kr-accent));
    transform-origin: bottom;
    animation: kr-eq 1.4s ease-in-out infinite;
}
.kr-eq-divider i:nth-child(1) { height: 10px; animation-delay: 0s;   }
.kr-eq-divider i:nth-child(2) { height: 18px; animation-delay: .15s; }
.kr-eq-divider i:nth-child(3) { height: 26px; animation-delay: .3s;  }
.kr-eq-divider i:nth-child(4) { height: 18px; animation-delay: .45s; }
.kr-eq-divider i:nth-child(5) { height: 10px; animation-delay: .6s;  }

/* --- hero: faint equalizer breathing along the stage floor (landing
       .hero-eq). The 48 bars are generated by the inline script at the end
       of the page; each carries its own --h / duration / negative delay. --- */
.kr-stage-eq {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    display: flex;
    align-items: flex-end;
    gap: clamp(3px, .5vw, 8px);
    padding: 0 1.5vw;
    opacity: .2;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8% 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8% 92%, transparent);
}
.kr-stage-eq i {
    flex: 1;
    height: calc(var(--h, 50) * 1%);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--kr-accent-bright), var(--kr-accent));
    transform-origin: bottom;
    animation: kr-eq 1.6s ease-in-out infinite;
    will-change: transform;
}

/* --- icon language: outlined rings instead of filled discs (landing .bicon),
       thinner 1.8 strokes, gentle swell from the hovered card --- */
.kr-step-icon {
    background: transparent;
    border: 2px solid var(--kr-accent);
    transition: transform .22s ease;
}
.kr-steps li:hover .kr-step-icon { transform: scale(1.1); }
.kr-step-icon svg { width: 28px; height: 28px; stroke-width: 1.8; }

/* step number badges pick up the bars' gradient (landing .stepper active) */
.kr-step-num { background: linear-gradient(135deg, var(--kr-accent-bright), var(--kr-accent)); }

/* --- dark features strip: icons carry the landing's neon glow --- */
.kr-features svg {
    filter: drop-shadow(0 0 7px rgba(255, 59, 110, .4));
    transition: transform .22s ease;
}
.kr-features li:hover svg { transform: scale(1.12); }

/* ==========================================================================
   19. HERO PHOTO — black hero with the singer cutout (client asset 2026-09-01)
   --------------------------------------------------------------------------
   images/hero-singer.webp/.png (1474×887, transparent): the client's singer
   cutout without any stage lights — the §5 rig (re-enabled by §20) is the
   only lighting. The copy moves into the empty left half (the full-page
   mock's arrangement) and stays white on black.
   Self-contained override-by-order like §18 — delete this block and the
   animated dark stage is back.
   ========================================================================== */

.kr-stage {
    padding-top: 54px;
    color: var(--kr-dark-text);
}
/* the cutout (transparent PNG/WebP, 1474×887, the cable at its left edge)
   is anchored bottom-right. Its width follows the viewport so the cable
   always clears the 52% copy column: W ≤ (vw/2 − 42px) / .983 → 50.9vw − 43px,
   capped at 738px (= 444px tall, the mock's proportion at 1536). Past 1536px
   it stops following the edge and stays 768px from centre so the singer
   doesn't drift away from the copy. The photo is its own layer
   (span.kr-stage-photo inside .kr-stage-bg): light spans before it in the
   markup shine from behind the singer, spans after it in front. §20 drifts it. */
/* the stage ground: black, with a dark-red glow spilling from the top-left
   corner (glued to the top edge, fading out by ~70% of the height / ~55% of
   the width) */
.kr-stage-bg {
    background:
        radial-gradient(52% 70% at 10% 0%, rgba(255, 59, 110, .34) 0%, rgba(214, 19, 78, .17) 36%, rgba(214, 19, 78, 0) 70%),
        #000000;
}
.kr-stage-photo {
    position: absolute;
    inset: 0;
    background: url('../images/hero-singer.png')
        right max(0px, calc(50vw - 768px)) bottom 0 / min(50.9vw - 43px, 738px) auto no-repeat;
    background-image: image-set(
        url('../images/hero-singer.webp') type('image/webp'),
        url('../images/hero-singer.png') type('image/png'));
}
.kr-stage-bg::after { content: none; }
.kr-stage-bg .kr-orb,
.kr-stage-bg .kr-beam,
.kr-stage-bg .kr-sparkle,
.kr-stage-bg .kr-stage-floor,
.kr-stage-bg .kr-stage-eq { display: none; }

/* copy on black (mock: white title, crimson second line, light subtitle) */
.kr-hero h1 {
    color: #ffffff;
    text-shadow: none;
}
.kr-hero h1 span { color: var(--kr-accent); }
.kr-hero-sub { color: rgba(255, 255, 255, .9); }
.kr-trust li { color: rgba(255, 255, 255, .9); }

/* desktop: copy block flush LEFT (RTL end side), text still right-aligned,
   leaving the right half to the singer */
@media (min-width: 1000px) {
    .kr-hero {
        max-width: min(680px, 52%);
        margin: 0 auto 0 0;
        padding: 0;
        text-align: right;
    }
    .kr-hero-sub { margin-left: 0; margin-right: 0; }
    .kr-hero-search { margin: 0; }
    .kr-trust { justify-content: flex-start; }
    .kr-trust li:first-child { padding-right: 0; }
}

/* stacked (<1000px): centred copy on top, the singer as a band underneath;
   the features strip then covers his chest like the mock */
@media (max-width: 999px) {
    .kr-stage { padding-bottom: 300px; }
    .kr-stage-photo {
        background: url('../images/hero-singer.png') right bottom / auto 290px no-repeat;
        background-image: image-set(
            url('../images/hero-singer.webp') type('image/webp'),
            url('../images/hero-singer.png') type('image/png'));
    }
}

/* ==========================================================================
   20. MOTION — the "alive" pass (2026-09-01)
   --------------------------------------------------------------------------
   Everything transform/opacity/filter based; each block below is independent
   and can be deleted on its own. JS side: js/kara_motion.js (scroll reveal,
   counters, shelf auto-advance, artists ticker). html.kr-js is set by that
   script only when motion is allowed, so nothing is ever hidden without it.
   All of it stops under prefers-reduced-motion (end of this section).
   ========================================================================== */

/* --- 20a. hero: living stage — the photo drifts (slow Ken Burns around the
       singer), two of the §5 beam cones sweep from the lamp side, two glow
       orbs breathe, dust twinkles. Screen-blended, so they only add light. --- */
@keyframes kr-drift-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes kr-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.055); }
}
.kr-stage-photo {
    transform-origin: 78% 100%;
    animation: kr-drift-in 1.4s ease both,
               kr-kenburns 24s ease-in-out 1s infinite alternate;
    will-change: transform;
}
/* singer side: just the gentle glow at the back (orb-a) + dust + floor —
   no cone beams (client 2026-09-01) */
.kr-stage-bg .kr-orb-a,
.kr-stage-bg .kr-sparkle,
.kr-stage-bg .kr-stage-floor { display: block; }
/* the §18 floor equalizer, back on: full width along the hero's bottom, in
   the dark crimson at low opacity, and BEHIND the singer (its div sits before
   span.kr-stage-photo in the markup, so his cutout covers the bars; they show
   on both sides of him and through the gaps, never on him) — like the
   landing page's .hero-eq */
.kr-stage-bg .kr-stage-eq {
    display: flex;
    height: 170px;
    opacity: .25;
    /* only in the side margins outside the 1280px column (the strip + copy
       zone stays clean): transparent across the centre, soft edges */
    -webkit-mask-image: linear-gradient(to right,
        transparent 0, #000 60px, #000 calc(50% - 664px), transparent calc(50% - 640px),
        transparent calc(50% + 640px), #000 calc(50% + 664px), #000 calc(100% - 60px), transparent 100%);
            mask-image: linear-gradient(to right,
        transparent 0, #000 60px, #000 calc(50% - 664px), transparent calc(50% - 640px),
        transparent calc(50% + 640px), #000 calc(50% + 664px), #000 calc(100% - 60px), transparent 100%);
}
@media (max-width: 1327px) {
    /* the column fills the viewport here — no side margins, so no bars */
    .kr-stage-bg .kr-stage-eq { display: none; }
}
/* neon red — the icons' crimson family: bright-crimson tubes with a crimson
   glow, ~20% narrower than the flex:1 default (1.2vw ≈ 18px at 1536), 56 of
   them (the inline script) spread evenly → ~8px gaps */
.kr-stage-bg .kr-stage-eq { justify-content: space-between; gap: 0; }
.kr-stage-bg .kr-stage-eq i {
    flex: 0 0 clamp(15px, 1.2vw, 24px);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--kr-accent-bright) 0%, var(--kr-accent) 100%);
    box-shadow: 0 0 6px rgba(255, 59, 110, .9), 0 0 16px rgba(214, 19, 78, .55), 0 0 30px rgba(214, 19, 78, .3);
}
.kr-stage-bg .kr-orb-a {
    opacity: .7;
    background: radial-gradient(circle, rgba(255, 59, 110, .55) 0%, rgba(214, 19, 78, .28) 30%, rgba(214, 19, 78, 0) 66%);
}
.kr-stage-bg .kr-stage-floor {
    opacity: .6;
    background: radial-gradient(60% 100% at 50% 100%, rgba(255, 59, 110, .4) 0%, rgba(214, 19, 78, 0) 72%);
}
@media (max-width: 699px) {
    /* phones: keep only the cheap twinkle layer (+ the K rays below) */
    .kr-stage-bg .kr-orb { display: none; }
}

/* --- 20b. hero copy: staggered rise-in on load --- */
@keyframes kr-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}
.kr-hero > h1,
.kr-hero > .kr-hero-sub,
.kr-hero > .kr-hero-search,
.kr-hero > .kr-trust {
    animation: kr-rise .85s cubic-bezier(.2, .6, .2, 1) both;
}
.kr-hero > .kr-hero-sub    { animation-delay: .16s; }
.kr-hero > .kr-hero-search { animation-delay: .30s; }
.kr-hero > .kr-trust       { animation-delay: .44s; }

/* --- 20d. scroll reveal (classes applied by kara_motion.js) --- */
html.kr-js .kr-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .6, .2, 1);
    transition-delay: var(--kr-d, 0s);
}
html.kr-js .kr-reveal.is-in {
    opacity: 1;
    transform: none;
}
/* section headings: the crimson rule grows out of the centre as they land */
html.kr-js .kr-sec-head.kr-reveal h2::after {
    transform: translateX(-50%) scaleX(0);
    transition: transform .7s cubic-bezier(.2, .6, .2, 1) .35s;
}
html.kr-js .kr-sec-head.kr-reveal.is-in h2::after { transform: translateX(-50%) scaleX(1); }

/* --- 20e. features strip: the four icons as neon tubes — a pink core
       with a soft layered crimson glow (static; no flicker) --- */
.kr-features li svg {
    color: var(--kr-accent); /* the site crimson — same as the hero line + button above */
    stroke-width: 1.8;
    filter: drop-shadow(0 0 1px rgba(255, 190, 210, .5))
            drop-shadow(0 0 5px rgba(214, 19, 78, .75))
            drop-shadow(0 0 12px rgba(214, 19, 78, .5))
            drop-shadow(0 0 22px rgba(214, 19, 78, .28));
}
/* hover: the tube burns brighter and the icon grows */
.kr-features li:hover svg {
    color: var(--kr-accent-bright);
    transform: scale(1.28) translateY(-2px);
    filter: drop-shadow(0 0 2px rgba(255, 210, 225, .8))
            drop-shadow(0 0 7px var(--kr-accent))
            drop-shadow(0 0 16px rgba(214, 19, 78, .75))
            drop-shadow(0 0 30px rgba(214, 19, 78, .5));
}

/* --- 20f. artists: the row becomes a slow ticker (kara_motion.js wraps
       it in .kr-marquee-clip and doubles the items); pauses on hover --- */
@keyframes kr-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}
.kr-marquee-clip {
    overflow: hidden;
    padding: 6px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.kr-artists-row.kr-marquee {
    display: flex;
    gap: 18px;
    width: max-content;
    animation: kr-marquee 44s linear infinite;
    will-change: transform;
}
.kr-artists-row.kr-marquee .kr-artist {
    flex: 0 0 auto;
    width: clamp(92px, 9.4vw, 140px);
}
.kr-marquee-clip:hover .kr-marquee,
.kr-marquee-clip:focus-within .kr-marquee { animation-play-state: paused; }

/* --- 20g. counters: numbers count up when they come into view (JS) --- */
.kr-count { font-variant-numeric: tabular-nums; }
/* the strip's generic "span" rule (display:block) must not split the number */
.kr-features span.kr-count { display: inline; font-size: inherit; color: inherit; }

/* --- reduced motion: everything above goes still --- */
@media (prefers-reduced-motion: reduce) {
    .kr-stage-photo { animation: none; }
    .kr-stage-bg .kr-beam,
    .kr-stage-bg .kr-orb,
    .kr-stage-bg .kr-sparkle { display: none; }
    .kr-hero > h1,
    .kr-hero > .kr-hero-sub,
    .kr-hero > .kr-hero-search,
    .kr-hero > .kr-trust { animation: none; }
    .kr-artists-row.kr-marquee { animation: none; }
}