/* ====================================================================
   KRONEV brand static layer — build-free .kv-* components.
   Depends on the --color-* / --kv-* runtime vars set in
   themes/kronevui/views/layouts/colors.blade.php.
   Linked after the compiled Vite CSS so it can layer on top.
   Aesthetic: "high-end GPU brand x Linux terminal" — sharp, dark,
   blood-red accent, mono technical data, subtle glow.
   ==================================================================== */

/* --- Typography: headings in Space Grotesk site-wide --- */
.kv-storefront h1,
.kv-storefront h2,
.kv-storefront h3,
.kv-head {
    font-family: var(--kv-font-head);
    letter-spacing: -0.012em;
}

.kv-mono {
    font-family: var(--font-mono);
    font-variant-ligatures: none;
}

.kv-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: hsl(var(--color-primary));
}

/* --- Buttons --- */
.kv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.15rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.16s ease, box-shadow 0.16s ease,
        border-color 0.16s ease, transform 0.05s ease;
}

.kv-btn:active {
    transform: translateY(1px);
}

.kv-btn-primary {
    background: hsl(var(--color-primary));
    color: hsl(var(--color-inverted));
    border-color: hsl(var(--color-secondary) / 0.55);
}

.kv-btn-primary:hover {
    background: hsl(var(--color-secondary));
    box-shadow: 0 0 0 1px hsl(var(--color-secondary) / 0.5),
        0 0 20px hsl(var(--color-primary) / 0.45);
}

.kv-btn-ghost {
    background: transparent;
    color: hsl(var(--color-base));
    border-color: hsl(var(--color-neutral));
}

.kv-btn-ghost:hover {
    border-color: hsl(var(--kv-border-interactive));
    background: hsl(var(--kv-surface-elevated));
}

/* Brand glow for Paymenter's shared primary button component (x-button.primary) */
.kv-cta:hover {
    box-shadow: 0 0 0 1px hsl(var(--color-secondary) / 0.5),
        0 0 20px hsl(var(--color-primary) / 0.4) !important;
}

/* --- Cards --- */
.kv-card {
    position: relative;
    background: hsl(var(--color-background-secondary));
    border: 1px solid hsl(var(--color-neutral));
    border-radius: var(--radius-lg);
    transition: border-color 0.18s ease, box-shadow 0.18s ease,
        transform 0.18s ease;
}

.kv-card:hover {
    border-color: hsl(var(--kv-border-interactive));
    box-shadow: 0 0 0 1px hsl(var(--color-primary) / 0.12),
        0 12px 32px -14px rgba(0, 0, 0, 0.7);
}

/* --- Terminal / spec block: >_ prompt lines --- */
.kv-terminal {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    background: hsl(var(--color-background));
    border: 1px solid hsl(var(--color-neutral));
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    color: hsl(var(--color-muted));
}

.kv-spec {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.22rem 0;
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

.kv-spec::before {
    content: ">_";
    color: hsl(var(--color-primary));
    font-weight: 600;
    flex: none;
}

.kv-spec-label {
    color: hsl(var(--color-muted));
}

.kv-spec-value {
    color: hsl(var(--color-base));
    margin-left: auto;
    font-weight: 500;
}

/* --- Status dots --- */
.kv-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: hsl(var(--color-inactive));
    flex: none;
}

.kv-dot-online {
    background: hsl(var(--color-success));
    box-shadow: 0 0 8px hsl(var(--color-success) / 0.7);
}

.kv-dot-pending {
    background: hsl(var(--color-warning));
    box-shadow: 0 0 8px hsl(var(--color-warning) / 0.7);
}

.kv-dot-offline {
    background: hsl(var(--color-error));
    box-shadow: 0 0 8px hsl(var(--color-error) / 0.6);
}

/* --- Price (mono, brand) --- */
.kv-price {
    font-family: var(--font-mono);
    font-weight: 600;
    color: hsl(var(--color-base));
}

.kv-price-unit {
    color: hsl(var(--color-muted));
    font-size: 0.8em;
    font-weight: 500;
}

/* --- Section divider --- */
.kv-divider {
    height: 1px;
    border: 0;
    background: linear-gradient(
        90deg,
        transparent,
        hsl(var(--color-neutral)),
        transparent
    );
}

/* --- Textures for heroes --- */
.kv-grid {
    background-image:
        linear-gradient(hsl(var(--color-neutral) / 0.25) 1px, transparent 1px),
        linear-gradient(90deg, hsl(var(--color-neutral) / 0.25) 1px, transparent 1px);
    background-size: 38px 38px;
}

.kv-scanlines {
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        hsl(var(--color-base) / 0.015) 2px,
        hsl(var(--color-base) / 0.015) 3px
    );
}

.kv-glow-red {
    box-shadow: 0 0 24px hsl(var(--color-primary) / 0.25);
}

/* --- Hero --- */
.kv-hero {
    position: relative;
    overflow: hidden;
    background: hsl(var(--color-background));
    border: 1px solid hsl(var(--color-neutral));
    border-radius: var(--radius-lg);
}

.kv-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        120% 80% at 100% 0%,
        hsl(var(--color-primary) / 0.13),
        transparent 60%
    );
}

/* --- Logo (crown + wordmark fallback) --- */
.kv-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.kv-logo-crown {
    width: 1.65rem;
    height: 1.65rem;
    color: hsl(var(--color-primary));
    filter: drop-shadow(0 0 6px hsl(var(--color-primary) / 0.45));
    flex: none;
}

.kv-logo-word {
    font-family: var(--kv-font-head);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.14em;
    color: hsl(var(--color-base));
    text-transform: uppercase;
    line-height: 1;
}

/* --- Icon tile (photo-free product/category visual) --- */
.kv-icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    width: 100%;
    border-radius: var(--radius-md);
    color: hsl(var(--color-primary));
    border: 1px solid hsl(var(--color-neutral));
    background:
        radial-gradient(120% 120% at 50% 0%, hsl(var(--color-primary) / 0.10), transparent 70%),
        hsl(var(--kv-surface-elevated));
    background-size: 100% 100%, 100% 100%;
    overflow: hidden;
}

.kv-icon-tile::before {
    /* faint terminal grid behind the glyph */
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image:
        linear-gradient(hsl(var(--color-neutral) / 0.35) 1px, transparent 1px),
        linear-gradient(90deg, hsl(var(--color-neutral) / 0.35) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

.kv-icon-tile {
    position: relative;
}

.kv-icon-tile svg {
    position: relative;
    z-index: 1;
    width: 2.6rem;
    height: 2.6rem;
    filter: drop-shadow(0 0 9px hsl(var(--color-primary) / 0.4));
}

.kv-icon-tile.kv-icon-tile-sm {
    aspect-ratio: 1 / 1;
    width: 3.5rem;
    height: 3.5rem;
    flex: none;
}

.kv-icon-tile.kv-icon-tile-sm svg {
    width: 1.6rem;
    height: 1.6rem;
}

/* --- Spec list: >_ terminal lines (also overrides prose <ul> styling) --- */
.kv-spec-list,
.prose .kv-spec-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.kv-spec-list li,
.prose .kv-spec-list li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    padding: 0.2rem 0;
    border-bottom: 1px dashed hsl(var(--color-neutral) / 0.5);
}

.kv-spec-list li:last-child {
    border-bottom: 0;
}

.kv-spec-list li::before,
.prose .kv-spec-list li::before {
    content: ">_";
    color: hsl(var(--color-primary));
    font-weight: 600;
    flex: none;
}

.kv-spec-list li::marker {
    content: "";
}

.kv-spec-k {
    color: hsl(var(--color-muted));
    text-transform: lowercase;
}

.kv-spec-v {
    color: hsl(var(--color-base));
    margin-left: auto;
    font-weight: 500;
    text-align: right;
}

/* --- Pills (coming soon / status) --- */
.kv-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-md);
    border: 1px solid hsl(var(--color-neutral));
    background: hsl(var(--color-background));
    color: hsl(var(--color-muted));
    width: fit-content;
}

.kv-pill-soon {
    color: hsl(var(--color-warning));
}

.kv-pill svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* ====================================================================
   Custom homepage (landing) — self-contained, build-free.
   ==================================================================== */

/* Section rhythm */
.kv-section {
    padding-block: 3rem;
}
.kv-hero-pad {
    padding-block: 3.25rem;
}
@media (min-width: 768px) {
    .kv-section { padding-block: 4.5rem; }
    .kv-hero-pad { padding-block: 5rem; }
}

/* Hero */
.kv-hero-grid {
    display: grid;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 900px) {
    .kv-hero-grid { grid-template-columns: 1.15fr 0.85fr; }
}

.kv-hero-title {
    font-family: var(--kv-font-head);
    font-weight: 700;
    font-size: clamp(2.2rem, 6vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: hsl(var(--color-base));
}

.kv-hero-sub {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    line-height: 1.6;
    color: hsl(var(--color-muted));
    max-width: 40rem;
}

/* Headings */
.kv-h2 {
    font-family: var(--kv-font-head);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.01em;
    color: hsl(var(--color-base));
}
.kv-h3 {
    font-family: var(--kv-font-head);
    font-weight: 600;
    font-size: 1.05rem;
    color: hsl(var(--color-base));
}

/* CTA row + large buttons */
.kv-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.kv-btn-lg {
    padding: 0.8rem 1.4rem;
    font-size: 0.95rem;
}
.kv-btn svg {
    width: 1.05rem;
    height: 1.05rem;
}

/* Trust chips row */
.kv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Feature icon badge */
.kv-feat-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-md);
    color: hsl(var(--color-primary));
    background: hsl(var(--color-primary) / 0.12);
    border: 1px solid hsl(var(--color-primary) / 0.28);
}
.kv-feat-ico svg {
    width: 1.4rem;
    height: 1.4rem;
}

/* Terminal demo block (hero right column) */
.kv-term {
    line-height: 1.55;
}
.kv-term-row {
    padding: 0.18rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kv-term-prompt {
    color: hsl(var(--color-primary));
    font-weight: 600;
}
.kv-term-dim {
    color: hsl(var(--color-muted));
}
.kv-term-ok {
    color: hsl(var(--color-success));
}
.kv-cursor {
    color: hsl(var(--color-primary));
    animation: kv-blink 1.1s steps(2, start) infinite;
}
@keyframes kv-blink {
    50% { opacity: 0; }
}

/* Closing CTA band */
.kv-cta-band {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 3rem 1.5rem;
    border: 1px solid hsl(var(--color-neutral));
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 140% at 50% 0%, hsl(var(--color-primary) / 0.12), transparent 60%),
        hsl(var(--color-background-secondary));
}
.kv-cta-band > * {
    position: relative;
    z-index: 1;
}

/* ====================================================================
   Unify every content panel/card across the client area in one place,
   without editing each page. Scoped to <main> so it never touches the
   nav/footer chrome or teleported dropdowns/modals (which live on body).
   Excludes form controls. Clickable <a> cards get the brand hover glow;
   static panels just stay visually consistent.
   ==================================================================== */
.kv-storefront main :where(a, div, li, article).bg-background-secondary.border-neutral.rounded-lg,
.kv-storefront main :where(a, div, li, article).bg-background-secondary.border-neutral.rounded-md,
.kv-storefront main :where(a, div, li, article).bg-background-secondary.border-neutral.rounded-xl {
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.kv-storefront main a.bg-background-secondary.border-neutral.rounded-lg:hover,
.kv-storefront main a.bg-background-secondary.border-neutral.rounded-md:hover,
.kv-storefront main a.bg-background-secondary.border-neutral.rounded-xl:hover {
    border-color: hsl(var(--kv-border-interactive));
    box-shadow: 0 0 0 1px hsl(var(--color-primary) / 0.1),
        0 10px 28px -14px rgba(0, 0, 0, 0.6);
}

/* Section headings inside the client area get the brand head font + tighter tracking
   (already applied to h1/h2/h3 via .kv-storefront; this just firms up weight). */
.kv-storefront main h1,
.kv-storefront main h2 {
    letter-spacing: -0.015em;
}

/* ====================================================================
   PterodactylPlus customer console — unify with the Kronev brand.
   The console renders inside the theme layout (<main>, body.kv-storefront)
   so it already inherits dark / blood-red / sharp tokens + Space Grotesk
   headings. These rules add the missing personality the storefront has:
   mono technical data, CTA glow on primary buttons, glowing status dots.
   Loaded globally (kv-theme.css) so it applies on every console tab.
   ==================================================================== */

/* Mono for all live technical data: addresses, ports, uptime, CPU/RAM/disk, status */
.kv-storefront main [data-pp-stat],
.kv-storefront main [data-pp-status],
.kv-storefront main [data-pp-copyable],
.kv-storefront main [data-pp-server][id] {
    font-family: var(--font-mono);
    font-variant-ligatures: none;
    letter-spacing: -0.01em;
}

/* Blood-red CTA glow on primary buttons (console + client area), matching storefront */
.kv-storefront main button.bg-primary:hover,
.kv-storefront main a.bg-primary:hover {
    box-shadow: 0 0 0 1px hsl(var(--color-secondary) / 0.5),
        0 0 18px hsl(var(--color-primary) / 0.4);
}

/* Glowing status dots (server running / starting / etc.) */
.kv-storefront [data-pp-status-dot].bg-success { box-shadow: 0 0 8px hsl(var(--color-success) / 0.75); }
.kv-storefront [data-pp-status-dot].bg-info    { box-shadow: 0 0 8px hsl(var(--color-info) / 0.75); }
.kv-storefront [data-pp-status-dot].bg-warning { box-shadow: 0 0 8px hsl(var(--color-warning) / 0.75); }
.kv-storefront [data-pp-status-dot].bg-error   { box-shadow: 0 0 8px hsl(var(--color-error) / 0.7); }

/* ====================================================================
   Product & category cards — modern / edgy, unified with the homepage.
   Replaces the flat .kv-card box on storefront grids: a subtle top→
   bottom surface gradient, a blood-red accent line that sweeps in on
   hover, a lift + red glow, and an icon zoom. (Does NOT set display, so
   the blades' own flex/grid utilities keep working — incl. the 2-col
   product-detail layout.)
   ==================================================================== */
.kv-pcard {
    position: relative;
    background: linear-gradient(180deg,
        hsl(var(--kv-surface-elevated)) 0%,
        hsl(var(--color-background-secondary)) 100%);
    border: 1px solid hsl(var(--color-neutral));
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.kv-pcard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, hsl(var(--color-primary)), hsl(var(--color-secondary)));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s ease;
    z-index: 2;
}

.kv-pcard:hover {
    transform: translateY(-3px);
    border-color: hsl(var(--kv-border-interactive));
    box-shadow:
        0 0 0 1px hsl(var(--color-primary) / 0.15),
        0 18px 42px -18px rgba(0, 0, 0, 0.78),
        0 0 32px -10px hsl(var(--color-primary) / 0.28);
}

.kv-pcard:hover::before {
    transform: scaleX(1);
}

.kv-pcard .kv-icon-tile {
    transition: border-color 0.18s ease;
}

.kv-pcard:hover .kv-icon-tile {
    border-color: hsl(var(--kv-border-interactive));
}

.kv-pcard .kv-icon-tile svg {
    transition: transform 0.25s ease;
}

.kv-pcard:hover .kv-icon-tile svg {
    transform: scale(1.07);
}

/* ====================================================================
   Homepage building blocks — alternating rows, steps, FAQ, showcase.
   ==================================================================== */

/* Two-column split that alternates side per row */
.kv-split {
    display: grid;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 768px) {
    .kv-split { grid-template-columns: 1fr 1fr; gap: 3rem; }
    .kv-split-rev > :first-child { order: 2; }
}

/* Large category visual panel (icon over a terminal grid + bloom) */
.kv-cat-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid hsl(var(--color-neutral));
    color: hsl(var(--color-primary));
    background:
        radial-gradient(120% 120% at 50% 0%, hsl(var(--color-primary) / 0.13), transparent 70%),
        hsl(var(--kv-surface-elevated));
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.kv-cat-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image:
        linear-gradient(hsl(var(--color-neutral) / 0.35) 1px, transparent 1px),
        linear-gradient(90deg, hsl(var(--color-neutral) / 0.35) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}
.kv-cat-visual svg {
    position: relative;
    z-index: 1;
    width: 4rem;
    height: 4rem;
    filter: drop-shadow(0 0 16px hsl(var(--color-primary) / 0.45));
}
/* Diagonal light streak for a designed, graphic feel */
.kv-cat-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 42%, hsl(var(--color-primary) / 0.07) 50%, transparent 58%);
}
/* Oversized faded brand glyph in the corner (depth) — more specific than the
   generic `.kv-cat-visual svg` rule so it wins. */
.kv-cat-visual .kv-cat-glyph-bg {
    position: absolute;
    z-index: 0;
    right: -1.5rem;
    bottom: -2rem;
    width: 11rem;
    height: 11rem;
    color: hsl(var(--color-base));
    opacity: 0.05;
    filter: none;
}

/* Highlight bullet list (red check + text) */
.kv-hl {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.kv-hl li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: hsl(var(--color-base));
}
.kv-hl li svg {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    color: hsl(var(--color-primary));
}

/* Step number (how it works) */
.kv-step-num {
    font-family: var(--font-mono);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: hsl(var(--color-primary));
}

/* FAQ accordion (native <details>) */
.kv-faq {
    border: 1px solid hsl(var(--color-neutral));
    border-radius: var(--radius-lg);
    background: hsl(var(--color-background-secondary));
    overflow: hidden;
}
.kv-faq + .kv-faq { margin-top: 0.6rem; }
.kv-faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    font-family: var(--kv-font-head);
    font-weight: 600;
    color: hsl(var(--color-base));
}
.kv-faq summary::-webkit-details-marker { display: none; }
.kv-faq summary::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: 1.25rem;
    line-height: 1;
    color: hsl(var(--color-primary));
}
.kv-faq[open] summary::after { content: "\2212"; }
.kv-faq-body {
    padding: 0 1.1rem 1.1rem;
    color: hsl(var(--color-muted));
    line-height: 1.65;
}

/* Decorative mock power buttons in the control-panel showcase */
.kv-mock-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-md);
    border: 1px solid hsl(var(--color-neutral));
    background: hsl(var(--color-background));
}

/* ====================================================================
   MOBILE HARDENING — applies only at ≤768px, so the desktop layout is
   completely untouched. Tightens rhythm, scales headlines/terminal down,
   stacks hero CTAs full-width, shortens showcase visuals, and prevents
   any accidental horizontal scroll on phones.
   ==================================================================== */
@media (max-width: 768px) {
    html, body { overflow-x: hidden; }

    .kv-section { padding-block: 2.5rem; }
    .kv-hero-pad { padding-block: 2.75rem; }
    .kv-hero-grid { gap: 1.75rem; }
    .kv-split { gap: 1.75rem; }

    /* Headlines: smaller floors so they never overflow narrow screens */
    .kv-hero-title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); line-height: 1.08; }
    .kv-h2 { font-size: clamp(1.35rem, 6.5vw, 1.7rem); }
    .kv-hero-sub { font-size: 1rem; }

    /* Hero CTAs: full-width, stacked tap targets */
    .kv-cta-row { flex-direction: column; align-items: stretch; }
    .kv-cta-row .kv-btn { width: 100%; }

    /* Category showcase visual: shorter + smaller glyph so each row fits the screen */
    .kv-cat-visual { aspect-ratio: 16 / 9; }
    .kv-cat-visual svg { width: 3rem; height: 3rem; }
    .kv-cat-visual .kv-cat-glyph-bg { width: 7.5rem; height: 7.5rem; }

    /* Terminal demos: shrink so command lines fit without clipping */
    .kv-terminal { font-size: 0.72rem; padding: 0.75rem 0.85rem; }

    /* Tighter chip wrapping + closing band padding */
    .kv-chips { gap: 0.4rem; }
    .kv-cta-band { padding: 2.5rem 1.25rem; }

    /* Icon tiles a touch smaller on product/category cards */
    .kv-icon-tile svg { width: 2.1rem; height: 2.1rem; }
}