/* ==========================================================================
   Krevo AI — Design System v2 (Navbar / ProductCard / ProductDetail)
   Generated from "Krevo AI Design System v2". Do not hand-edit on the server;
   edit the local source and re-push.
   ========================================================================== */

/* native cross-fade between pages on browsers that support it (Chrome/Edge) —
   a no-op everywhere else, so it's safe to declare unconditionally */
@view-transition{navigation:auto}

/* ---------- tokens ---------- */
:root{
--krevo-black:#1A1A1A;--krevo-bg:#1E1E1E;--krevo-surface:#252525;--krevo-surface-2:#2E2E2E;--krevo-border:#333333;
--krevo-acid:#CCE404;--krevo-acid-bright:#D4EE0A;--krevo-acid-deep:#B8CE03;--krevo-acid-30:rgba(204,228,4,0.3);--krevo-acid-12:rgba(204,228,4,0.12);
--krevo-white:#FFFFFF;--krevo-red:#FF6B6B;--krevo-grey-0:#B4B4B4;--krevo-grey-1:#888888;--krevo-grey-2:#666666;--krevo-grey-3:#555555;--krevo-grey-4:#444444;
--bg-page:var(--krevo-bg);--bg-deep:var(--krevo-black);--surface-card:var(--krevo-surface);--surface-raised:var(--krevo-surface-2);--surface-accent:var(--krevo-acid);--surface-accent-deep:var(--krevo-acid-deep);--surface-media:var(--krevo-black);
--text-primary:var(--krevo-white);--text-body:var(--krevo-grey-0);--text-muted:var(--krevo-grey-1);--text-subtle:var(--krevo-grey-2);--text-disabled:var(--krevo-grey-3);--text-faint:var(--krevo-grey-4);--text-on-accent:var(--krevo-bg);--text-accent:var(--krevo-acid);--text-danger:var(--krevo-red);
--border-default:var(--krevo-border);--border-soft:var(--krevo-surface-2);--border-accent:var(--krevo-acid);--border-accent-ghost:var(--krevo-acid-30);--interactive-accent:var(--krevo-acid);--interactive-accent-hover:var(--krevo-acid-bright);
--scrim-media:rgba(30,30,30,0.85);
--font-display:'Space Grotesk',system-ui,sans-serif;--font-body:'Inter',system-ui,sans-serif;
--fw-medium:500;--fw-semibold:600;--fw-bold:700;
--type-hero:68px;--type-hero-lh:1.05;--type-hero-ls:-0.03em;--type-section:52px;--type-section-lh:1.08;--type-section-ls:-0.03em;--type-stat:56px;--type-price-xl:40px;--type-price-lg:32px;--type-title-lg:22px;--type-title:18px;--type-price:16px;--type-label-md:15px;--type-label:14px;--type-badge:13px;--type-badge-sm:11px;--type-badge-xs:10px;
--type-lead:18px;--type-body-lg:17px;--type-body:15px;--type-body-sm:14px;--type-caption:13px;--type-caption-sm:12px;--type-micro:11px;--type-body-lh:1.6;
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-9:36px;--space-10:40px;--space-12:48px;--space-15:60px;--space-20:80px;--space-25:100px;
--gutter-page:60px;--gutter-page-tablet:32px;--gutter-page-mobile:20px;--grid-gap:16px;--nav-height:60px;--max-prose:800px;
--radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:10px;--radius-xl:12px;--radius-2xl:16px;--radius-pill:20px;--radius-round:999px;
--shadow-float:0 18px 40px rgba(0,0,0,0.45);--shadow-card:0 8px 24px rgba(0,0,0,0.3);--shadow-accent:0 18px 40px rgba(204,228,4,0.14);
--ease-standard:cubic-bezier(0.4,0,0.2,1);--dur-fast:0.15s;--dur-base:0.2s;--dur-slow:0.25s;--transition-base:all var(--dur-base) var(--ease-standard);
--tilt-left:-2deg;--tilt-right:1.5deg;
}
@media(max-width:1024px){:root{--gutter-page:32px;--type-hero:52px;--type-section:40px}}
@media(max-width:768px){:root{--gutter-page:20px;--type-hero:40px}}

/* ---------- shared primitives ---------- */
.krevo-shimmer{background:linear-gradient(90deg,#1E1E1E 0%,#2A2A2A 50%,#1E1E1E 100%);background-size:200% 100%;animation:krevo-shimmer 2.4s linear infinite}
.krevo-shimmer-accent{background:linear-gradient(90deg,#B8CE03 0%,#D4EE0A 50%,#B8CE03 100%);background-size:200% 100%;animation:krevo-shimmer 2.4s linear infinite}
@keyframes krevo-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes krevo-glow-pulse{0%,100%{box-shadow:0 0 30px rgba(204,228,4,.14)}50%{box-shadow:0 0 62px rgba(204,228,4,.34),0 0 22px rgba(204,228,4,.12)}}
.krevo-glow-btn{position:relative;animation:krevo-glow-pulse 4.5s var(--ease-standard) infinite}
@media(prefers-reduced-motion:reduce){.krevo-glow-btn,.krevo-shimmer,.krevo-shimmer-accent,.krevo-wash{animation:none}}
.krevo-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
@media(max-width:1024px){.krevo-grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.krevo-grid-3{grid-template-columns:1fr}}
.krevo-no-scrollbar{scrollbar-width:none}
.krevo-no-scrollbar::-webkit-scrollbar{display:none}
.krevo-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* text-selection highlight — brand acid instead of Solace's #FF9500.
   Solace paints it from `html body ::selection` (specificity 0,0,3) reading two
   vars, so redefine the vars (containment trick) AND match its selector. */
:root{--sol-color-selection-initial:var(--text-on-accent);--sol-color-selection-high:var(--interactive-accent)}
::selection{background:var(--interactive-accent);color:var(--text-on-accent)}
::-moz-selection{background:var(--interactive-accent);color:var(--text-on-accent)}
html body ::selection{background:var(--interactive-accent);color:var(--text-on-accent)}
html body ::-moz-selection{background:var(--interactive-accent);color:var(--text-on-accent)}

/* glass surface used by ProductDetail chips / ghost buttons / panels */
.krevo-glass{background:linear-gradient(160deg,rgba(255,255,255,0.045),rgba(255,255,255,0.015));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,0.08);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 8px 24px rgba(0,0,0,0.3)}

/* Button (core/Button.jsx) */
.krevo-btn{font-family:var(--font-display);font-weight:var(--fw-bold);border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-md);transition:var(--transition-base);white-space:nowrap;text-decoration:none}
.krevo-btn--sm{font-size:var(--type-label);padding:10px 22px}
.krevo-btn--md{font-size:var(--type-label-md);padding:14px 28px}
.krevo-btn--primary{background:var(--interactive-accent);color:var(--text-on-accent)}
.krevo-btn--primary:hover,.krevo-btn--primary:focus-visible{background:var(--interactive-accent-hover);color:var(--text-on-accent)}
.krevo-btn--outline{background:transparent;color:var(--text-primary);border:1.5px solid var(--border-default)}
.krevo-btn--outline:hover{color:var(--text-accent);border-color:var(--border-accent)}

/* Badge (core/Badge.jsx) */
.krevo-badge{display:inline-block;white-space:nowrap;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-badge-xs);letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-xs)}
.krevo-badge--accent{background:var(--interactive-accent);color:var(--text-on-accent)}
.krevo-badge--dark{background:var(--bg-page);color:var(--text-accent)}
.krevo-badge--scrim{background:var(--scrim-media);color:var(--text-primary);border:1px solid var(--border-default);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-family:var(--font-body);font-weight:400}

/* ToolBadge (commerce/ToolBadge.jsx) */
.krevo-tool{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--type-micro);padding:4px 10px;border-radius:var(--radius-xs);white-space:nowrap;background:var(--surface-card);color:var(--text-primary)}
.krevo-tool[data-tool="Claude Code"]{background:var(--interactive-accent);color:var(--text-on-accent)}
.krevo-tool[data-tool="Cursor"]{background:var(--surface-card);color:var(--text-accent);border:1px solid var(--border-accent)}
.krevo-tool[data-tool="v0"]{background:var(--surface-card);color:var(--text-primary);border:1px solid var(--border-default)}
.krevo-tool--on-accent{background:var(--bg-page)!important;color:var(--text-accent)!important;border:none!important}

/* Pill / FilterBar (core/Pill.jsx, navigation/FilterBar.jsx) — a single
   outlined capsule holding all the pills (segmented-control style), with the
   active pill filled acid. .krevo-filterbar is the capsule itself; outer
   page spacing lives on the wrapper around it (.krevo-filterrow / .krevo-tierpanel__inner). */
.krevo-pill{font-family:var(--font-display);font-size:var(--type-badge);padding:8px 18px;border-radius:var(--radius-round);cursor:pointer;white-space:nowrap;transition:var(--transition-base);background:transparent;color:var(--text-muted);border:1px solid transparent;font-weight:var(--fw-medium);text-decoration:none;display:inline-block;line-height:1.4;flex-shrink:0}
.krevo-pill:hover{color:var(--text-primary);background:rgba(255,255,255,0.06)}
.krevo-pill.is-active{background:var(--interactive-accent);color:var(--text-on-accent);border-color:transparent;font-weight:var(--fw-bold)}
.krevo-filterbar{display:flex;align-items:center;gap:2px;overflow-x:auto;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-round);padding:4px}
.krevo-filterbar--tier .krevo-pill[data-krevo-tier="free"].is-active{background:var(--surface-card);color:var(--text-accent);border-color:var(--border-accent);box-shadow:inset 0 0 0 1px var(--border-accent-ghost)}

/* Row that levels the category capsule with the round filter-toggle button
   on its right — same row, same height, on mobile and desktop alike. */
.krevo-filterrow{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-6) var(--gutter-page)}
.krevo-filterrow .krevo-filterbar{flex:1 1 auto;min-width:0}

.krevo-filter-toggle{flex-shrink:0;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-round);background:var(--surface-card);color:var(--text-muted);border:1px solid var(--border-default);cursor:pointer;transition:var(--transition-base)}
.krevo-filter-toggle:hover,.krevo-filter-toggle:focus-visible{color:var(--text-primary);background:var(--surface-raised)}
.krevo-filter-toggle[aria-expanded="true"]{background:var(--interactive-accent);color:var(--text-on-accent);border-color:transparent}
.krevo-filter-toggle.is-filtered:not([aria-expanded="true"]){color:var(--text-accent);border-color:var(--border-accent)}

/* Price bar collapses behind the toggle button — same max-height trick as
   .krevo-step[data-extra="1"] rather than the grid-rows/fr technique .krevo-prompt
   uses: the tier row's nested overflow-x:auto scroll container makes its
   content height indefinite, which leaves grid-template-rows:1fr stuck at 0
   in some engines. A capped max-height sidesteps content-based auto-sizing entirely. */
.krevo-tierpanel{overflow:hidden;max-height:0;opacity:0;transition:max-height var(--dur-slow) var(--ease-standard),opacity var(--dur-base) var(--ease-standard)}
.krevo-tierpanel .krevo-filterbar--tier{margin:var(--space-3) var(--gutter-page) var(--space-6)}
.krevo-tierpanel.is-open{max-height:140px;opacity:1}

/* ==========================================================================
   Navbar — navigation/Navbar.jsx
   ========================================================================== */
.krevo-nav{position:sticky;top:0;z-index:400;min-height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:0 var(--gutter-page);background:var(--bg-page);border-bottom:1px solid var(--border-soft);transition:var(--transition-base)}
.krevo-nav.is-scrolled{background:rgba(30,30,30,0.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.krevo-nav__logo{display:inline-flex;align-items:center;flex-shrink:0}
.krevo-nav__logo img{height:37px;width:auto;display:block}
.krevo-nav__tabs{display:flex;align-items:center;gap:var(--space-1);list-style:none;margin:0;padding:0}
.krevo-nav__tabs li{margin:0;padding:0}
.krevo-nav__right{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}
.krevo-navpill{font-family:var(--font-display);font-size:var(--type-badge);font-weight:var(--fw-medium);padding:6px 18px;border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;transition:var(--transition-base);background:transparent;border:none;color:var(--text-muted);text-decoration:none;display:inline-block;line-height:1.5}
.krevo-navpill:hover{color:var(--text-primary)}
.krevo-navpill.is-active{background:var(--interactive-accent);color:var(--text-on-accent);font-weight:var(--fw-bold)}
.krevo-navpill.is-active:hover{color:var(--text-on-accent)}

.krevo-wl-btn{position:relative;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-round);color:var(--text-muted);cursor:pointer;transition:var(--transition-base);padding:0}
.krevo-wl-btn:hover,.krevo-wl-btn:focus-visible{background:rgba(255,255,255,0.06);border-color:var(--border-accent-ghost);color:var(--text-accent)}
.krevo-wl-count{position:absolute;top:5px;right:3px;min-width:16px;height:16px;padding:0 4px;display:none;align-items:center;justify-content:center;border-radius:var(--radius-round);background:var(--interactive-accent);color:var(--text-on-accent);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-badge-xs);line-height:1}
.krevo-wl-count.is-on{display:inline-flex}

@media(max-width:900px){
  .krevo-nav{padding-top:10px;padding-bottom:10px;column-gap:var(--space-3)}
  .krevo-nav__logo img{height:34px}
  .krevo-navpill{padding:6px 14px}
}
@media(max-width:480px){
  .krevo-nav .krevo-btn--sm{padding:9px 14px;font-size:var(--type-badge)}
  .krevo-wl-btn{width:38px;height:38px}
}

/* ==========================================================================
   ProductCard — commerce/ProductCard.jsx  (layout="minimal")
   ========================================================================== */
.krevo-pcard{display:flex;flex-direction:column;gap:var(--space-4);text-decoration:none;color:inherit;position:relative}
.krevo-pcard__media{aspect-ratio:var(--krevo-card-ratio, 4 / 3);border-radius:var(--radius-2xl);overflow:hidden;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);transition:transform var(--dur-slow) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.krevo-pcard__media--img{background:rgba(255,255,255,0.04)}
.krevo-pcard:hover .krevo-pcard__media,.krevo-pcard:focus-within .krevo-pcard__media{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--border-accent-ghost),0 18px 40px rgba(0,0,0,0.45),0 0 34px rgba(204,228,4,0.12)}
.krevo-pcard__media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:transform 600ms var(--ease-standard)}
.krevo-pcard:hover .krevo-pcard__media img{transform:scale(1.05)}
.krevo-pcard__flag{position:absolute;top:12px;left:12px;z-index:2}
.krevo-pcard__row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);transition:transform var(--dur-base) var(--ease-standard)}
.krevo-pcard:hover .krevo-pcard__row{transform:translateX(4px)}
.krevo-pcard__name{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-title-lg);letter-spacing:-0.02em;color:var(--text-primary);margin:0;transition:color var(--dur-base) var(--ease-standard);line-height:1.25}
.krevo-pcard:hover .krevo-pcard__name{color:var(--text-accent)}
.krevo-pcard__arrow{font-size:var(--type-title);opacity:0;transform:translateX(-8px);transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.krevo-pcard:hover .krevo-pcard__arrow{opacity:1;transform:translateX(0)}
.krevo-pcard__meta{font-family:var(--font-body);font-size:var(--type-body-sm);color:var(--text-subtle);margin:2px 0 0;transition:color var(--dur-base) var(--ease-standard)}
.krevo-pcard:hover .krevo-pcard__meta{color:var(--text-muted)}
.krevo-pcard__price{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-price);color:var(--text-accent);margin:6px 0 0;display:block}
.krevo-pcard__price del{color:var(--text-subtle);font-weight:var(--fw-medium);margin-right:6px;text-decoration:line-through}
.krevo-pcard__price ins{text-decoration:none;color:var(--text-accent)}
.krevo-pcard__mark{color:var(--text-subtle);display:flex;align-items:center;flex-shrink:0;margin-top:4px;transition:color var(--dur-base) var(--ease-standard)}
.krevo-pcard:hover .krevo-pcard__mark,.krevo-pcard__mark[data-access="purchase"]{color:var(--text-accent)}

/* hover wishlist heart on the media */
.krevo-pcard__wish{position:absolute;top:12px;right:12px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-round);background:var(--scrim-media);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.14);color:var(--text-primary);cursor:pointer;padding:0;z-index:3;opacity:0;transform:translateY(-4px);transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.krevo-pcard:hover .krevo-pcard__wish,.krevo-pcard__wish:focus-visible,.krevo-pcard__wish.is-saved{opacity:1;transform:translateY(0)}
.krevo-pcard__wish.is-saved{color:var(--text-accent)}
.krevo-pcard__wish.is-saved svg{fill:currentColor}
.krevo-pcard__wish.is-busy{opacity:.6;pointer-events:none}

/* ProductCard — layout="card" (accent/dark tiles, used where the DS calls for it) */
.krevo-tcard{border-radius:var(--radius-xl);overflow:hidden;position:relative;display:block;text-decoration:none;color:inherit;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:var(--transition-base);background:linear-gradient(160deg,rgba(255,255,255,0.045),rgba(255,255,255,0.015));border:1px solid rgba(255,255,255,0.08);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 8px 24px rgba(0,0,0,0.3)}
.krevo-tcard:hover{background:linear-gradient(160deg,rgba(255,255,255,0.07),rgba(255,255,255,0.02));border-color:var(--border-accent-ghost);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 10px 32px rgba(0,0,0,0.4),0 0 32px rgba(204,228,4,0.1)}
.krevo-tcard--accent{background:linear-gradient(160deg,rgba(212,238,10,0.96),rgba(184,206,3,0.92));border:1px solid rgba(255,255,255,0.22);box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 8px 28px rgba(0,0,0,0.35)}
.krevo-tcard--accent:hover{background:linear-gradient(160deg,rgba(212,238,10,0.96),rgba(184,206,3,0.92));border-color:rgba(255,255,255,0.22)}
.krevo-tcard__media{aspect-ratio:16/9;position:relative;opacity:.55}
.krevo-tcard--accent .krevo-tcard__media{opacity:1}
.krevo-tcard__body{padding:var(--space-4)}
.krevo-tcard__name{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--type-label);letter-spacing:-0.01em;color:var(--text-primary);margin:0}
.krevo-tcard--accent .krevo-tcard__name{font-weight:var(--fw-bold);color:var(--text-on-accent)}
.krevo-tcard__desc{font-family:var(--font-body);font-size:var(--type-caption-sm);color:var(--text-subtle);margin:4px 0 0;line-height:1.45}
.krevo-tcard--accent .krevo-tcard__desc{color:var(--text-on-accent);opacity:.7}
.krevo-tcard__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-4)}
.krevo-tcard__price{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-price);color:var(--text-primary)}
.krevo-tcard--accent .krevo-tcard__price{color:var(--text-on-accent)}
.krevo-tcard__price del{opacity:.55;font-weight:var(--fw-medium);margin-right:6px}
.krevo-tcard__price ins{text-decoration:none;color:inherit}
.krevo-tcard__getit{position:absolute;left:0;right:0;bottom:0;height:44px;display:flex;align-items:center;justify-content:center;background:var(--interactive-accent);color:var(--text-on-accent);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-label);transform:translateY(100%);transition:transform var(--dur-base) var(--ease-standard)}
.krevo-tcard--accent .krevo-tcard__getit{background:var(--bg-page);color:var(--text-accent)}
.krevo-tcard:hover .krevo-tcard__getit{transform:translateY(0)}

/* ==========================================================================
   ProductDetail — ui_kits/storefront/ProductDetail.jsx
   ========================================================================== */
.krevo-pdp{max-width:1000px;margin:0 auto;padding:0 var(--gutter-page) 100px;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--type-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
.krevo-pdp *{box-sizing:border-box}
/* :where() keeps this at zero specificity so the component rules below win */
.krevo-pdp :where(h1,h2,h3){font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:var(--type-hero-ls);margin:0}
.krevo-pdp__back{padding:var(--space-6) 0}
.krevo-pdp__media{aspect-ratio:var(--krevo-pdp-ratio, 3 / 2);border-radius:var(--radius-2xl);border:1px solid rgba(255,255,255,0.08);overflow:hidden;opacity:.6;position:relative}
.krevo-pdp__media--img{opacity:1;background:rgba(255,255,255,0.04)}
.krevo-pdp__media img{width:100%;height:100%;object-fit:cover;display:block}
.krevo-pdp__chips{display:flex;gap:var(--space-2);margin-top:var(--space-8);flex-wrap:wrap}
.krevo-chip{font-family:var(--font-body);font-size:var(--type-caption);color:var(--text-muted);padding:7px 16px;border-radius:var(--radius-round);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)}
.krevo-chip--price{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--text-accent)}
.krevo-chip--price del{color:var(--text-subtle);font-weight:var(--fw-medium);margin-right:6px;text-decoration:line-through}
.krevo-chip--price ins{text-decoration:none;color:var(--text-accent)}
.krevo-chip--sm{font-size:var(--type-caption-sm);color:var(--text-subtle)}
.krevo-pdp__title{font-size:46px;line-height:1.05;letter-spacing:-0.03em;margin:var(--space-5) 0 0}
.krevo-pdp__actions{display:flex;gap:var(--space-3);margin-top:var(--space-7);flex-wrap:wrap;align-items:center}
.krevo-buy{display:inline-flex;align-items:center;gap:var(--space-3);background:var(--interactive-accent);color:var(--text-on-accent);border:none;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-label-md);padding:14px 16px 14px 28px;border-radius:var(--radius-round);cursor:pointer;box-shadow:0 0 44px rgba(204,228,4,0.18);transition:var(--transition-base);text-decoration:none}
.krevo-buy:hover{background:var(--interactive-accent-hover);color:var(--text-on-accent)}
.krevo-buy__glyph{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--radius-round);background:rgba(30,30,30,0.14);font-size:var(--type-caption)}
.krevo-buy.is-busy{opacity:.65;pointer-events:none}
.krevo-ghost{display:inline-flex;align-items:center;white-space:nowrap;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--type-label);color:var(--text-primary);padding:12px 22px;border-radius:var(--radius-round);cursor:pointer;transition:var(--transition-base);text-decoration:none}
.krevo-ghost:hover{color:var(--text-accent);border-color:var(--border-accent-ghost)}
.krevo-ghost--lg{padding:14px 26px;font-size:var(--type-label-md)}
.krevo-ghost--sm{padding:9px 18px;font-size:var(--type-caption)}
.krevo-ghost.is-saved{color:var(--text-accent);border-color:var(--border-accent-ghost)}
.krevo-pdp__lede{font-family:var(--font-body);font-size:var(--type-body-lg);line-height:var(--type-body-lh);color:var(--text-body);margin:var(--space-7) 0 0;max-width:62ch}
.krevo-pdp__tags{display:flex;gap:var(--space-2);margin-top:var(--space-7);flex-wrap:wrap;align-items:center}
.krevo-pdp__tags .krevo-tool{padding:7px 14px;border-radius:var(--radius-round);font-size:var(--type-caption-sm)}
.krevo-pdp__panel{border-radius:var(--radius-2xl);padding:var(--space-8);margin-top:var(--space-12)}
.krevo-pdp__panel h2{font-size:var(--type-title-lg);letter-spacing:-0.02em;margin:0}
.krevo-pdp__panel-sub{font-family:var(--font-body);font-size:var(--type-caption);color:var(--text-subtle);margin:var(--space-1) 0 0}
.krevo-steps{display:flex;flex-direction:column;gap:var(--space-6);margin-top:var(--space-7)}
.krevo-step{display:flex;gap:var(--space-4)}
.krevo-step[data-extra="1"]{display:none}
.krevo-pdp__panel.is-open .krevo-step[data-extra="1"]{display:flex}
.krevo-step__n{flex:0 0 auto;width:34px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:rgba(204,228,4,0.1);border:1px solid var(--border-accent-ghost);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-micro);color:var(--text-accent)}
.krevo-step__t{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--type-label-md);color:var(--text-primary)}
.krevo-step__b{font-family:var(--font-body);font-size:var(--type-body-sm);line-height:1.55;color:var(--text-body);margin:2px 0 0}
.krevo-more{width:100%;margin-top:var(--space-7);padding:var(--space-5) 0 0;border:none;border-top:1px solid rgba(255,255,255,0.07);background:none;color:var(--text-muted);font-family:var(--font-body);font-size:var(--type-body-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--space-2)}
.krevo-more__c{color:var(--text-accent);transition:transform var(--dur-base) var(--ease-standard)}
.krevo-pdp__panel.is-open .krevo-more__c{transform:rotate(180deg)}
.krevo-pdp__related{margin-top:var(--space-20)}
.krevo-sechead{margin-bottom:var(--space-8)}
.krevo-sechead h2{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:34px;line-height:var(--type-section-lh);letter-spacing:var(--type-section-ls);color:var(--text-primary);margin:0}
.krevo-sechead p{font-family:var(--font-body);font-size:15px;color:var(--text-body);margin:var(--space-3) 0 0}
.krevo-pdp__long{margin-top:var(--space-12);font-family:var(--font-body);font-size:var(--type-body);line-height:var(--type-body-lh);color:var(--text-body);max-width:72ch}
.krevo-pdp__long h2,.krevo-pdp__long h3{color:var(--text-primary);margin:var(--space-8) 0 var(--space-3)}
.krevo-pdp__long ul,.krevo-pdp__long ol{padding-left:1.2em}
.krevo-pdp__long a{color:var(--text-accent)}
.krevo-pdp__notice{margin-top:var(--space-6);padding:12px 18px;border-radius:var(--radius-md);border:1px solid var(--border-accent-ghost);background:rgba(204,228,4,0.08);color:var(--text-accent);font-family:var(--font-body);font-size:var(--type-body-sm)}
@media(max-width:768px){
  .krevo-pdp__title{font-size:32px}
  .krevo-pdp__panel{padding:var(--space-6)}
  .krevo-buy{width:100%;justify-content:space-between}
}

/* ==========================================================================
   Catalog / archive shell
   ========================================================================== */
.krevo-catalog{background:var(--bg-page);color:var(--text-primary);font-family:var(--font-body)}
.krevo-catalog *{box-sizing:border-box}
.krevo-catalog__grid{padding:0 var(--gutter-page);row-gap:var(--space-9)}
.krevo-catalog__head{padding:var(--space-15) var(--gutter-page) 0}
.krevo-catalog__head h1{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-section);line-height:var(--type-section-lh);letter-spacing:var(--type-section-ls);margin:0}
.krevo-catalog__head p{font-family:var(--font-body);font-size:var(--type-lead);color:var(--text-body);margin:var(--space-3) 0 0}
.krevo-catalog__empty{padding:var(--space-20) var(--gutter-page);text-align:center;color:var(--text-muted);font-family:var(--font-body)}
.krevo-page{background:var(--bg-page);min-height:60vh}
.krevo-page>.krevo-catalog{padding-bottom:var(--space-25)}
.krevo-pcard[hidden]{display:none}

/* toast for wishlist / cart feedback */
.krevo-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(16px);z-index:9999;background:var(--surface-card);color:var(--text-primary);border:1px solid var(--border-accent-ghost);border-radius:var(--radius-round);padding:11px 22px;font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--type-label);box-shadow:0 18px 40px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.krevo-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ==========================================================================
   Suppress the theme chrome the DS v2 header replaces
   ========================================================================== */
body .builder-item--header_search_responsive{display:none!important}
body.krevo-ds-header #header-grid{display:none!important}
body.krevo-ds-header header.header{border:0}

/* WooCommerce emits .screen-reader-text inside price markup — keep it inaudible-only. */
.krevo-pcard .screen-reader-text,.krevo-tcard .screen-reader-text,.krevo-pdp .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}

/* ==========================================================================
   Theme-override guards — the Solace stylesheet is loaded after ours, so the
   DS surfaces need to win on colour, list markers and headings.
   ========================================================================== */
body.krevo-ds-page{background:var(--bg-page)}
body.krevo-ds-page .wrapper,body.krevo-ds-page #mycontent{background:transparent}

.krevo-nav .krevo-nav__tabs,.krevo-nav .krevo-nav__tabs li{list-style:none!important;list-style-type:none!important}
.krevo-nav .krevo-nav__tabs li::marker{content:none}
.krevo-nav .krevo-nav__tabs li::before,.krevo-nav .krevo-nav__tabs li::after{content:none!important;display:none!important}

.krevo-catalog h1,.krevo-catalog h2,.krevo-catalog h3,
.krevo-pdp h1,.krevo-pdp h2,.krevo-pdp h3{color:var(--text-primary)}
.krevo-catalog__head h1{color:var(--text-primary)!important}
.krevo-pdp__title{color:var(--text-primary)!important}
.krevo-sechead h2{color:var(--text-primary)!important}
.krevo-pcard__name{color:var(--text-primary)}
.krevo-pcard:hover .krevo-pcard__name{color:var(--text-accent)}
.krevo-catalog a,.krevo-pdp a{text-decoration:none}
/* Only the wpautop'd product description needs a paragraph reset — every other
   DS paragraph carries its own margin and must keep it. */
.krevo-pdp__long :where(p):not([class]){margin:0 0 var(--space-4)}
.krevo-pdp__panel h2{color:var(--text-primary)!important}
.krevo-tcard__name{color:var(--text-primary)}
.krevo-tcard--accent .krevo-tcard__name{color:var(--text-on-accent)}

/* the theme puts a page banner above content on non-Elementor templates */
body.krevo-ds-page .boxes-header,body.krevo-ds-page .nv-page-title-wrap,
body.krevo-ds-page .nv-bc-count-wrap,body.krevo-ds-page .woocommerce-breadcrumb{display:none!important}

/* ==========================================================================
   Page sections — Hero, Marquee, StatsBar, SectionHeading, Accordion
   (ui_kits/storefront/Hero.jsx, components/content/*, commerce/StatBlock.jsx)
   ========================================================================== */
.krevo-hero{position:relative;padding:56px var(--gutter-page) 44px;text-align:center;overflow:hidden}
.krevo-hero__wash{position:absolute;left:50%;top:-40%;width:760px;height:420px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(204,228,4,0.14),transparent 70%);pointer-events:none}
@keyframes krevo-wash-breathe{0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}50%{opacity:.8;transform:translateX(-50%) scale(1.1)}}
.krevo-wash{animation:krevo-wash-breathe 7s var(--ease-standard) infinite}
.krevo-hero__inner{position:relative;max-width:720px;margin:0 auto}
.krevo-eyebrow{display:inline-flex;align-items:center;white-space:nowrap;gap:6px;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--text-accent);padding:5px 14px;border-radius:var(--radius-round);background:rgba(204,228,4,0.08);border:1px solid var(--border-accent-ghost);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.krevo-hero h1{font-size:44px;line-height:1.06;letter-spacing:-0.03em;margin:var(--space-4) 0 0;color:var(--text-primary)}
.krevo-hero h1 .krevo-glow{color:var(--text-accent);text-shadow:0 0 44px rgba(204,228,4,0.45)}
.krevo-hero p{font-family:var(--font-body);font-size:var(--type-body);line-height:1.55;color:var(--text-body);margin:var(--space-4) auto 0;max-width:52ch}
.krevo-hero__cta{display:flex;justify-content:center;margin-top:var(--space-6)}
.krevo-glass-btn{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-label-md);cursor:pointer;padding:13px 30px;border-radius:var(--radius-round);background:rgba(204,228,4,0.1);color:var(--text-accent);border:1.5px solid var(--border-accent-ghost);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:var(--transition-base);text-decoration:none;display:inline-block}
.krevo-glass-btn:hover{background:rgba(204,228,4,0.18);color:var(--interactive-accent-hover);border-color:var(--border-accent);animation-duration:2.2s}

.krevo-marquee{background:var(--surface-card);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:14px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.krevo-marquee__run{display:flex;align-items:center;gap:var(--space-6);width:max-content;animation:krevo-marquee 40s linear infinite}
@keyframes krevo-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.krevo-marquee__item{display:flex;align-items:center;gap:var(--space-6)}
.krevo-marquee__item b{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--type-badge);color:var(--text-subtle)}
.krevo-marquee__item i{color:var(--text-accent);font-style:normal}
@media(prefers-reduced-motion:reduce){.krevo-marquee__run{animation:none}}

.krevo-statsbar{background:var(--surface-accent);padding:40px var(--gutter-page);display:flex;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap}
.krevo-stat__v{font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:-0.03em;font-size:var(--type-stat);line-height:1;color:var(--text-on-accent)}
.krevo-stat__l{font-family:var(--font-body);font-size:var(--type-body);color:var(--text-on-accent);margin-top:var(--space-2)}

.krevo-section{padding:80px var(--gutter-page)}
.krevo-section--deep{background:var(--bg-deep)}
.krevo-sechead--lg h2{font-size:var(--type-section);line-height:var(--type-section-lh);letter-spacing:var(--type-section-ls)}
.krevo-sechead--lg p{font-size:var(--type-lead)}

.krevo-acc{max-width:var(--max-prose);margin-top:var(--space-10)}
.krevo-acc__item{border-top:1px solid var(--border-soft)}
.krevo-acc__q{width:100%;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:20px 0;text-align:left;font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--type-title);color:var(--text-primary)}
.krevo-acc__plus{color:var(--text-accent);font-size:20px;line-height:1;transition:transform var(--dur-slow) var(--ease-standard)}
.krevo-acc__item.is-open .krevo-acc__plus{transform:rotate(45deg)}
.krevo-acc__a{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease-standard)}
.krevo-acc__item.is-open .krevo-acc__a{max-height:260px}
.krevo-acc__a p{font-family:var(--font-body);font-size:var(--type-body-sm);line-height:var(--type-body-lh);color:var(--text-body);margin:0;padding-bottom:18px;max-width:62ch}

/* numbered "how it works" steps, reusing the ProductDetail step marks */
.krevo-howto{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);margin-top:var(--space-12)}
@media(max-width:768px){.krevo-howto{grid-template-columns:1fr}}
.krevo-howto__card{border-radius:var(--radius-2xl);padding:var(--space-8)}
.krevo-howto__n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:26px;border-radius:var(--radius-sm);background:rgba(204,228,4,0.1);border:1px solid var(--border-accent-ghost);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-micro);color:var(--text-accent)}
.krevo-howto__t{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-title);color:var(--text-primary);margin:var(--space-5) 0 0;letter-spacing:-0.02em}
.krevo-howto__b{font-family:var(--font-body);font-size:var(--type-body-sm);line-height:1.55;color:var(--text-body);margin:var(--space-2) 0 0}

.krevo-cta{padding:0 var(--gutter-page) var(--space-25);text-align:center}
.krevo-cta__box{border-radius:var(--radius-2xl);padding:var(--space-15) var(--space-8)}
.krevo-cta__box h2{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-section);line-height:var(--type-section-lh);letter-spacing:var(--type-section-ls);color:var(--text-primary);margin:0}
.krevo-cta__box p{font-family:var(--font-body);font-size:var(--type-lead);color:var(--text-body);margin:var(--space-3) 0 var(--space-8)}

/* ==========================================================================
   Contact — DS v2 layout + the Solace form styled to match
   ========================================================================== */
/* The Solace form is its own Elementor widget rendered after our HTML, so the
   page reads as one centred column and the form is constrained to match it. */
.krevo-contact{max-width:760px;margin:0 auto;padding:0 var(--gutter-page) var(--space-8)}
body.krevo-contact-page .elementor-widget-solaceform>.elementor-widget-container{max-width:760px;margin:0 auto;padding:0 var(--gutter-page) var(--space-25)}
.krevo-contact__panel{border-radius:var(--radius-2xl);padding:var(--space-8)}
.krevo-contact__panel h2{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-title-lg);letter-spacing:-0.02em;color:var(--text-primary);margin:0}
.krevo-contact__list{list-style:none;margin:var(--space-6) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-5)}
.krevo-contact__list li{display:flex;gap:var(--space-3);align-items:flex-start;font-family:var(--font-body);font-size:var(--type-body-sm);line-height:1.55;color:var(--text-body);margin:0}
.krevo-contact__tick{flex:0 0 auto;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-round);background:rgba(204,228,4,0.1);border:1px solid var(--border-accent-ghost);color:var(--text-accent);font-size:11px;margin-top:1px}
.krevo-contact__note{font-family:var(--font-body);font-size:var(--type-caption);color:var(--text-subtle);margin:var(--space-7) 0 0}
.krevo-contact__note a{color:var(--text-accent)}
.krevo-formhead{margin-top:var(--space-10)}
.krevo-formhead h2{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-title-lg);letter-spacing:-0.02em;color:var(--text-primary);margin:0}
.krevo-formhead p{font-family:var(--font-body);font-size:var(--type-caption);color:var(--text-subtle);margin:var(--space-1) 0 var(--space-6)}

/* Solace form, restyled to the design system */
body.krevo-contact-page .solaceform-form{display:flex;flex-direction:column;gap:var(--space-5);width:100%}
body.krevo-contact-page .solaceform-field-column{width:100%!important;padding:0!important}
body.krevo-contact-page .solaceform-form label{display:block;font-family:var(--font-display)!important;font-weight:var(--fw-medium)!important;font-size:var(--type-caption)!important;color:var(--text-muted)!important;margin-bottom:var(--space-2)}
body.krevo-contact-page .solaceform-input{width:100%;background:rgba(255,255,255,0.03)!important;border:1px solid rgba(255,255,255,0.1)!important;border-radius:var(--radius-md)!important;color:var(--text-primary)!important;font-family:var(--font-body)!important;font-size:var(--type-body-sm)!important;padding:13px 16px!important;white-space:normal;transition:var(--transition-base)}
body.krevo-contact-page .solaceform-input::placeholder{color:var(--text-disabled)}
body.krevo-contact-page .solaceform-input:focus{outline:none;border-color:var(--border-accent-ghost)!important;background:rgba(255,255,255,0.05)!important;box-shadow:0 0 0 3px rgba(204,228,4,0.08)}
body.krevo-contact-page textarea.solaceform-input{min-height:132px;resize:vertical}
body.krevo-contact-page .solaceform-button-column{width:100%!important;padding:0!important}
body.krevo-contact-page .solaceform-form-button{background:var(--interactive-accent)!important;color:var(--text-on-accent)!important;border:none!important;border-radius:var(--radius-round)!important;font-family:var(--font-display)!important;font-weight:var(--fw-bold)!important;font-size:var(--type-label-md)!important;padding:14px 30px!important;cursor:pointer;box-shadow:0 0 44px rgba(204,228,4,0.18);transition:var(--transition-base);width:auto!important;min-width:190px}
body.krevo-contact-page .solaceform-form-button:hover{background:var(--interactive-accent-hover)!important}
body.krevo-contact-page .solaceform-form-button .elementor-button-icon{display:none!important}
body.krevo-contact-page .solaceform-response,body.krevo-contact-page .solaceform-message{font-family:var(--font-body);font-size:var(--type-body-sm);color:var(--text-accent);margin-top:var(--space-4)}

/* ==========================================================================
   Copy-prompt panel (ProductDetail.jsx, access = copy)
   ========================================================================== */
.krevo-prompt__inner{border-radius:var(--radius-2xl);overflow:hidden}
.krevo-prompt__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-bottom:1px solid rgba(255,255,255,0.07);font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--type-caption);color:var(--text-muted)}
.krevo-prompt__copy{background:rgba(204,228,4,0.1);border:1px solid var(--border-accent-ghost);color:var(--text-accent);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-micro);padding:6px 14px;border-radius:var(--radius-round);cursor:pointer;transition:var(--transition-base)}
.krevo-prompt__copy:hover{background:rgba(204,228,4,0.18);border-color:var(--border-accent)}
.krevo-prompt pre{margin:0;padding:var(--space-6);max-height:420px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--type-caption-sm);line-height:1.65;color:var(--text-body);white-space:pre-wrap;word-break:break-word}
.krevo-buy.is-copied,.krevo-prompt__copy.is-copied{background:var(--interactive-accent-hover)}
.krevo-prompt__copy.is-copied{color:var(--text-on-accent)}

/* ==========================================================================
   Navbar — colour containment + interaction layer
   Solace paints every <a> with --sol-color-link-button-initial (#1D70DB).
   Nothing inside the DS navbar may inherit it, in any state.
   ========================================================================== */
.krevo-nav .krevo-nav__logo,
.krevo-nav .krevo-nav__logo:link,
.krevo-nav .krevo-nav__logo:visited,
.krevo-nav .krevo-nav__logo:hover,
.krevo-nav .krevo-nav__logo:focus,
.krevo-nav .krevo-nav__logo:active{color:var(--text-primary)}
.krevo-nav .krevo-navpill,
.krevo-nav .krevo-navpill:link,
.krevo-nav .krevo-navpill:visited{color:var(--text-muted)}
.krevo-nav .krevo-navpill:hover,
.krevo-nav .krevo-navpill:focus,
.krevo-nav .krevo-navpill:active{color:var(--text-primary)}
.krevo-nav .krevo-navpill.is-active,
.krevo-nav .krevo-navpill.is-active:link,
.krevo-nav .krevo-navpill.is-active:visited,
.krevo-nav .krevo-navpill.is-active:hover,
.krevo-nav .krevo-navpill.is-active:focus,
.krevo-nav .krevo-navpill.is-active:active{color:var(--text-on-accent)}
.krevo-nav .krevo-wl-btn,
.krevo-nav .krevo-wl-btn:link,
.krevo-nav .krevo-wl-btn:visited{color:var(--text-muted)}
.krevo-nav .krevo-wl-btn:hover,
.krevo-nav .krevo-wl-btn:focus{color:var(--text-accent)}
.krevo-nav .krevo-btn--primary,
.krevo-nav .krevo-btn--primary:link,
.krevo-nav .krevo-btn--primary:visited,
.krevo-nav .krevo-btn--primary:hover,
.krevo-nav .krevo-btn--primary:focus,
.krevo-nav .krevo-btn--primary:active{color:var(--text-on-accent)}

/* Solace's skip link is blue on light grey and lands inside the header on focus.
   Keep it (it is the keyboard entry point) but dress it as a DS pill. */
body.krevo-ds-header .solace-skip-link{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;padding:0!important;margin:-1px!important}
body.krevo-ds-header .solace-skip-link:focus{position:fixed!important;left:var(--gutter-page)!important;top:12px!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important;clip-path:none!important;margin:0!important;z-index:1000!important;background:var(--interactive-accent)!important;color:var(--text-on-accent)!important;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-label);padding:10px 22px!important;border-radius:var(--radius-round)!important;box-shadow:0 8px 24px rgba(0,0,0,0.45);outline:2px solid var(--krevo-white);outline-offset:2px}

/* --- the gliding hover pill --- */
.krevo-nav__navwrap{position:relative;display:flex;align-items:center;min-width:0}
.krevo-glide{position:absolute;top:50%;left:0;width:0;height:30px;transform:translateY(-50%);border-radius:var(--radius-pill);opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),left var(--dur-slow) var(--ease-standard),width var(--dur-slow) var(--ease-standard),height var(--dur-slow) var(--ease-standard)}
[data-krevo-glidewrap].is-gliding .krevo-glide{opacity:1}
/* navbar: transparent tabs, so the glide is a translucent pill behind the text */
.krevo-glide--nav{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.06)}
/* category bar: the pills are opaque, so the glide traces them as an acid ring */
.krevo-glide--ring{background:transparent;border:1px solid var(--border-accent-ghost);box-shadow:0 0 18px rgba(204,228,4,0.12)}
.krevo-nav__tabs{position:relative;z-index:1}
.krevo-filterbar{position:relative}
.krevo-filterbar .krevo-pill{position:relative;z-index:1}

/* --- reading progress hairline --- */
/* full width, scaled on the X axis — transform stays off the layout path */
.krevo-nav__progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--interactive-accent);box-shadow:0 0 12px rgba(204,228,4,0.5);pointer-events:none;transform:scaleX(0);transform-origin:left center;will-change:transform;backface-visibility:hidden}

/* --- logo, CTA and heart micro-interactions --- */
.krevo-nav__logo img{transition:transform var(--dur-slow) var(--ease-standard)}
.krevo-nav__logo:hover img{transform:scale(1.04)}
.krevo-nav .krevo-btn--primary{transition:background var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.krevo-nav .krevo-btn--primary:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(204,228,4,0.28)}
.krevo-nav .krevo-btn--primary:active{transform:translateY(0)}
@keyframes krevo-heart-pop{0%{transform:scale(1)}38%{transform:scale(1.35)}100%{transform:scale(1)}}
.krevo-wl-btn.is-bumped svg{animation:krevo-heart-pop 450ms var(--ease-standard)}
@keyframes krevo-count-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.krevo-wl-count.is-bumped{animation:krevo-count-pop 320ms var(--ease-standard)}

/* --- visible keyboard focus, in the DS accent --- */
.krevo-nav a:focus-visible,.krevo-nav button:focus-visible{outline:2px solid var(--border-accent);outline-offset:3px;border-radius:var(--radius-pill)}

@media(max-width:900px){
  .krevo-glide{display:none}
}
@media(prefers-reduced-motion:reduce){
  .krevo-nav__glide{transition:opacity var(--dur-base) linear}
  .krevo-wl-btn.is-bumped svg,.krevo-wl-count.is-bumped{animation:none}
  .krevo-nav .krevo-btn--primary:hover{transform:none}
  .krevo-nav__logo:hover img{transform:none}
}

/* ==========================================================================
   Link-colour containment (site-wide)
   Solace paints a / :visited / :hover / :active / :focus from
   --sol-color-link-button-initial|hover (#1D70DB). Rather than chase every
   state, redefine those two variables on the DS surfaces so Solace's own rules
   resolve to design-system colours. Cart, checkout and my-account are left out
   on purpose — those keep stock WooCommerce styling.
   ========================================================================== */
.krevo-nav,
.krevo-page,
.krevo-ds,
body.krevo-ds-page{
  --sol-color-link-button-initial:var(--text-accent);
  --sol-color-link-button-hover:var(--interactive-accent-hover);
}

/* Components that are not "links" and must keep their own ink in every state. */
.krevo-glass-btn,.krevo-glass-btn:link,.krevo-glass-btn:visited,.krevo-glass-btn:active,.krevo-glass-btn:focus{color:var(--text-accent)}
.krevo-glass-btn:hover{color:var(--interactive-accent-hover)}
.krevo-btn--primary,.krevo-btn--primary:link,.krevo-btn--primary:visited,.krevo-btn--primary:hover,.krevo-btn--primary:focus,.krevo-btn--primary:active{color:var(--text-on-accent)}
.krevo-btn--outline,.krevo-btn--outline:link,.krevo-btn--outline:visited,.krevo-btn--outline:active{color:var(--text-primary)}
.krevo-btn--outline:hover,.krevo-btn--outline:focus{color:var(--text-accent)}
.krevo-buy,.krevo-buy:link,.krevo-buy:visited,.krevo-buy:hover,.krevo-buy:focus,.krevo-buy:active{color:var(--text-on-accent)}
.krevo-ghost,.krevo-ghost:link,.krevo-ghost:visited,.krevo-ghost:active{color:var(--text-primary)}
.krevo-ghost:hover,.krevo-ghost:focus{color:var(--text-accent)}
.krevo-ghost.is-saved,.krevo-ghost.is-saved:link,.krevo-ghost.is-saved:visited{color:var(--text-accent)}
.krevo-pill,.krevo-pill:link,.krevo-pill:visited,.krevo-pill:active{color:var(--text-muted)}
.krevo-pill:hover,.krevo-pill:focus{color:var(--text-primary)}
.krevo-pill.is-active,.krevo-pill.is-active:link,.krevo-pill.is-active:visited,.krevo-pill.is-active:hover,.krevo-pill.is-active:focus{color:var(--text-on-accent)}
.krevo-pcard,.krevo-pcard:link,.krevo-pcard:visited,.krevo-pcard:hover,.krevo-pcard:focus,.krevo-pcard:active{color:inherit}
.krevo-tcard,.krevo-tcard:link,.krevo-tcard:visited,.krevo-tcard:hover,.krevo-tcard:focus,.krevo-tcard:active{color:inherit}
.krevo-pcard__name,.krevo-pcard:link .krevo-pcard__name,.krevo-pcard:visited .krevo-pcard__name{color:var(--text-primary)}
.krevo-pcard:hover .krevo-pcard__name,.krevo-pcard:focus .krevo-pcard__name{color:var(--text-accent)}

/* Keyboard focus, in the accent — replaces the browser/theme default ring. */
.krevo-page a:focus-visible,.krevo-page button:focus-visible,
.krevo-ds a:focus-visible,.krevo-ds button:focus-visible{outline:2px solid var(--border-accent);outline-offset:3px}
.krevo-pcard:focus-visible{outline:2px solid var(--border-accent);outline-offset:6px;border-radius:var(--radius-2xl)}


/* ==========================================================================
   Spacing corrections (measured against the design system)
   ========================================================================== */
/* the catalog grid must not butt straight into the next section */
.krevo-catalog__grid{padding-bottom:var(--space-20)}
.krevo-page>.krevo-catalog{padding-bottom:var(--space-5)}
.krevo-pdp__related .krevo-grid-3{padding-bottom:0}
.krevo-pdp__related .krevo-catalog__grid{padding-bottom:0}

/* restate the DS margins the resets above used to flatten */
.krevo-pdp .krevo-pdp__title{margin:var(--space-5) 0 0}
.krevo-pdp .krevo-pdp__lede{margin:var(--space-7) 0 0;margin-bottom:0}
.krevo-pdp .krevo-pdp__panel-sub{margin:var(--space-1) 0 0}
.krevo-pdp .krevo-step__b{margin:2px 0 0}
.krevo-pdp .krevo-pdp__long p{margin:0 0 var(--space-4)}
.krevo-pdp .krevo-pdp__long p:last-child{margin-bottom:0}
.krevo-catalog .krevo-pcard__meta,.krevo-page .krevo-pcard__meta{margin:2px 0 0}
.krevo-catalog .krevo-pcard__name,.krevo-page .krevo-pcard__name{margin:0}
.krevo-catalog .krevo-tcard__desc{margin:4px 0 0}
.krevo-catalog .krevo-catalog__empty{margin:0}

/* the empty-state paragraph inside a filtered catalog */
.krevo-catalog>[data-krevo-catalog-empty]{padding-top:var(--space-10)}

@media(max-width:768px){
  /* the PDP title and actions need room once they wrap */
  .krevo-pdp .krevo-pdp__title{margin-top:var(--space-4)}
  .krevo-pdp__actions{gap:var(--space-3);margin-top:var(--space-6)}
  .krevo-catalog__grid{padding-bottom:var(--space-12)}
}

/* ==========================================================================
   Touch devices
   A link whose descendants change on :hover needs two taps on iOS — the first
   arms the hover state, the second follows the link. Neutralise every card
   hover on a coarse pointer so one tap opens the product.
   ========================================================================== */
@media (hover: none), (pointer: coarse){
  .krevo-pcard:hover .krevo-pcard__media,
  .krevo-pcard:focus-within .krevo-pcard__media{transform:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06)}
  .krevo-pcard:hover .krevo-pcard__media img{transform:none}
  .krevo-pcard:hover .krevo-pcard__row{transform:none}
  .krevo-pcard:hover .krevo-pcard__name,
  .krevo-pcard:focus .krevo-pcard__name{color:var(--text-primary)}
  .krevo-pcard:hover .krevo-pcard__meta{color:var(--text-subtle)}
  .krevo-pcard:hover .krevo-pcard__mark{color:var(--text-subtle)}
  .krevo-pcard__mark[data-access="purchase"]{color:var(--text-accent)}
  .krevo-pcard__arrow{display:none}
  /* the wishlist heart has nothing to hover out of, so it simply stays put */
  .krevo-pcard__wish{opacity:1;transform:none}
  .krevo-tcard:hover{background:linear-gradient(160deg,rgba(255,255,255,0.045),rgba(255,255,255,0.015));border-color:rgba(255,255,255,0.08);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 8px 24px rgba(0,0,0,0.3)}
  .krevo-tcard--accent:hover{background:linear-gradient(160deg,rgba(212,238,10,0.96),rgba(184,206,3,0.92))}
  .krevo-tcard__getit{transform:translateY(0)}
  .krevo-pill:hover{background:var(--surface-card)}
  .krevo-navpill:hover{color:var(--text-muted)}
  .krevo-nav .krevo-btn--primary:hover{transform:none}
  .krevo-nav__logo:hover img{transform:none}
  .krevo-glide{display:none}
}
/* a tap should still read as a press */
.krevo-pcard{-webkit-tap-highlight-color:transparent}
.krevo-pcard:active .krevo-pcard__media{transform:scale(.985);transition:transform 90ms var(--ease-standard)}

/* card -> product page: a quick press-and-fade plays before the navigation
   actually happens (see initCardTransition in krevo-ds.js), so opening a
   product reads as a deliberate action instead of an abrupt page swap */
.krevo-pcard,.krevo-tcard{transition:transform var(--dur-base) var(--ease-standard),opacity var(--dur-base) var(--ease-standard)}
.krevo-pcard.is-opening,.krevo-tcard.is-opening{transform:scale(.96);opacity:.55;pointer-events:none}
.krevo-pill:active,.krevo-navpill:active,.krevo-btn:active,.krevo-buy:active,.krevo-ghost:active{transform:scale(.97)}

/* ==========================================================================
   Fixed header on every device
   `.krevo-nav` was sticky inside `header.header`, a box exactly its own height,
   so it never actually stuck. The wrapper is the fixed element now, and the
   body carries a matching offset kept in --krevo-nav-h.
   ========================================================================== */
body.krevo-ds-header header.header{position:fixed;top:0;left:0;right:0;z-index:400;width:100%}
body.krevo-ds-header{padding-top:var(--krevo-nav-h,60px)}
body.krevo-ds-header.admin-bar header.header{top:32px}
@media screen and (max-width:782px){
  body.krevo-ds-header.admin-bar header.header{top:46px}
}
.krevo-nav{position:relative;top:auto}

/* keep the mobile bar to one compact row so it costs less of the screen —
   the nav links live behind the hamburger now instead of wrapping into a
   second row, which is what leaves room for a bigger logo. */
@media(max-width:900px){
  .krevo-nav{padding-top:8px;padding-bottom:8px}
}
@media(max-width:480px){
  .krevo-nav{column-gap:var(--space-2)}
  .krevo-nav__logo img{height:30px}
}

/* ==========================================================================
   Mobile nav — a hamburger opens the nav links as a dropdown panel instead
   of wrapping them into a second row.
   ========================================================================== */
.krevo-nav__burger{display:none;flex-shrink:0;width:38px;height:38px;padding:0;border:none;background:transparent;border-radius:var(--radius-round);cursor:pointer;position:relative;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.krevo-nav__burger:hover,.krevo-nav__burger:focus-visible{background:rgba(255,255,255,0.06)}
.krevo-nav__burger-bar{position:absolute;left:9px;width:20px;height:2px;border-radius:2px;background:var(--text-primary);transition:transform var(--dur-base) var(--ease-standard),opacity var(--dur-base) var(--ease-standard),top var(--dur-base) var(--ease-standard)}
.krevo-nav__burger-bar:nth-child(1){top:13px}
.krevo-nav__burger-bar:nth-child(2){top:18px}
.krevo-nav__burger-bar:nth-child(3){top:23px}
.krevo-nav.is-nav-open .krevo-nav__burger-bar:nth-child(1){top:18px;transform:rotate(45deg)}
.krevo-nav.is-nav-open .krevo-nav__burger-bar:nth-child(2){opacity:0}
.krevo-nav.is-nav-open .krevo-nav__burger-bar:nth-child(3){top:18px;transform:rotate(-45deg)}

@media(max-width:900px){
  .krevo-nav__burger{display:inline-flex}
  /* a floating card anchored under the burger on the right, not a full-width
     dropdown — .krevo-nav is position:relative (see "Fixed header" above) */
  .krevo-nav__navwrap{position:absolute;left:auto;right:0;top:calc(100% + 8px);
    width:min(72vw,280px);max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-xl);
    box-shadow:var(--shadow-float);
    transition:max-height var(--dur-slow) var(--ease-standard),opacity var(--dur-base) var(--ease-standard)}
  .krevo-nav.is-nav-open .krevo-nav__navwrap{max-height:70vh;opacity:1;overflow-y:auto;pointer-events:auto}
  .krevo-nav__tabs{flex-direction:column;align-items:stretch;gap:0;padding:var(--space-2)}
  .krevo-nav__tabs li{width:100%}
  .krevo-nav__tabs li+li{border-top:1px solid var(--border-soft)}
  .krevo-navpill{display:block;width:100%;padding:14px 16px;border-radius:var(--radius-md);font-size:var(--type-label-md);font-weight:var(--fw-semibold)}
}
@media(prefers-reduced-motion:reduce){
  .krevo-nav__navwrap{transition:none}
  .krevo-nav__burger-bar{transition:none}
}

/* ==========================================================================
   Open / close motion
   ========================================================================== */
.krevo-prompt{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;
  transition:grid-template-rows var(--dur-slow) var(--ease-standard),opacity var(--dur-base) var(--ease-standard),margin-top var(--dur-slow) var(--ease-standard)}
.krevo-prompt__inner{overflow:hidden;min-height:0;border-radius:var(--radius-2xl)}
.krevo-prompt.is-open{grid-template-rows:1fr;opacity:1;margin-top:var(--space-6)}

/* the "Show all" steps grow instead of appearing */
.krevo-step[data-extra="1"]{display:flex;overflow:hidden;max-height:0;opacity:0;margin-top:calc(var(--space-6) * -1);
  transition:max-height var(--dur-slow) var(--ease-standard),opacity var(--dur-base) var(--ease-standard),margin-top var(--dur-slow) var(--ease-standard)}
.krevo-pdp__panel.is-open .krevo-step[data-extra="1"]{max-height:220px;opacity:1;margin-top:0}

/* accordion answers already animate; give the text a gentle lift too */
.krevo-acc__a p{opacity:0;transform:translateY(-4px);transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.krevo-acc__item.is-open .krevo-acc__a p{opacity:1;transform:translateY(0)}

@media(prefers-reduced-motion:reduce){
  .krevo-prompt,.krevo-tierpanel,.krevo-step[data-extra="1"],.krevo-acc__a p,.krevo-pcard:active .krevo-pcard__media{transition:none}
  .krevo-pill:active,.krevo-navpill:active,.krevo-btn:active,.krevo-buy:active,.krevo-ghost:active{transform:none}
}

/* ==========================================================================
   Anchor landings clear the fixed header
   Native hash navigation and scrollIntoView both honour scroll-margin-top, so
   one rule covers "/#catalog" typed in the URL and an in-page link click.
   ========================================================================== */
:target{scroll-margin-top:calc(var(--krevo-nav-h, 60px) + 12px)}
#catalog,#pricing,#library,#site-footer,.krevo-page [id],.krevo-ds [id]{scroll-margin-top:calc(var(--krevo-nav-h, 60px) + 12px)}

/* ==========================================================================
   Preview heights
   Both preview slots are taller than the original 16:9. Two tokens, tune once:
   --krevo-card-ratio  catalog cards   (3/2 shorter, 1/1 taller)
   --krevo-pdp-ratio   product page hero
   ========================================================================== */
:root{--krevo-card-ratio:4 / 3;--krevo-pdp-ratio:3 / 2}
@media(max-width:768px){:root{--krevo-card-ratio:3 / 2;--krevo-pdp-ratio:4 / 3}}

/* ==========================================================================
   Video previews
   An MP4/WebM fills the same slot an image would, and behaves the same on
   hover. Playback is started and stopped by the runtime as cards scroll in
   and out of view, so a catalog full of clips does not decode all at once.
   ========================================================================== */
.krevo-media-video{width:100%;height:100%;object-fit:cover;display:block;background:var(--krevo-black);
  transform:scale(1);transition:transform 600ms var(--ease-standard)}
@media (hover: hover) and (pointer: fine){
  .krevo-pcard:hover .krevo-media-video{transform:scale(1.05)}
}
@media (hover: none), (pointer: coarse){
  .krevo-pcard:hover .krevo-media-video{transform:none}
}
.krevo-pdp__media .krevo-media-video{border-radius:inherit}
@media(prefers-reduced-motion:reduce){
  .krevo-media-video{transition:none;transform:none}
}

/* ==========================================================================
   KREVO-PREFOOTER — CTA band that sits above the Solace footer on every
   storefront page (rendered by krevo_ds_prefooter_cta on the get_footer hook)
   ========================================================================== */
.krevo-prefooter{background:var(--bg-page);color:var(--text-primary);font-family:var(--font-body);border-top:1px solid var(--border-soft)}
.krevo-prefooter__strip{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap;padding:var(--space-12) var(--gutter-page);border-bottom:1px solid var(--border-soft)}
.krevo-prefooter__strip-txt{max-width:56ch}
.krevo-prefooter__strip-txt h3{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-title-lg);line-height:1.15;letter-spacing:-0.01em;color:var(--text-primary);margin:0}
.krevo-prefooter__strip-txt p{font-size:var(--type-body);line-height:var(--type-body-lh);color:var(--text-body);margin:var(--space-2) 0 0}
.krevo-prefooter__strip .krevo-glass-btn{flex-shrink:0;white-space:nowrap}
.krevo-prefooter__dfy{text-align:center;max-width:var(--max-prose);margin:0 auto;padding:var(--space-20) var(--gutter-page)}
.krevo-prefooter__dfy h2{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-section);line-height:var(--type-section-lh);letter-spacing:var(--type-section-ls);color:var(--text-primary);margin:var(--space-5) 0 0}
.krevo-prefooter__dfy>p{font-size:var(--type-lead);line-height:var(--type-body-lh);color:var(--text-body);margin:var(--space-4) auto 0;max-width:56ch}
.krevo-prefooter__dfy .krevo-btn{margin-top:var(--space-8)}
.krevo-prefooter__fine{font-size:var(--type-label);color:var(--text-muted);margin:var(--space-6) auto 0;max-width:46ch}
@media(max-width:768px){
  .krevo-prefooter__strip{padding:var(--space-10) var(--gutter-page)}
  .krevo-prefooter__strip .krevo-glass-btn{width:100%;text-align:center}
  .krevo-prefooter__dfy{padding:var(--space-15) var(--gutter-page)}
}

/* ==========================================================================
   KREVO-AFFILIATE  —  /affiliate/ (engine-rendered; not linked in nav/footer)
   ========================================================================== */
.krevo-aff-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-10);max-width:var(--max-prose);margin:0 auto}
@media(max-width:768px){.krevo-aff-stats{grid-template-columns:1fr;gap:var(--space-6)}}
.krevo-aff-stat__n{display:block;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-price-lg);line-height:1;letter-spacing:-0.03em;color:var(--text-primary)}
.krevo-aff-stat p{font-family:var(--font-body);font-size:var(--type-body-sm);line-height:1.55;color:var(--text-body);margin:var(--space-3) 0 0}

.krevo-aff-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-15);max-width:1000px;margin:0 auto;align-items:start}
@media(max-width:900px){.krevo-aff-grid{grid-template-columns:1fr;gap:var(--space-12)}}
.krevo-aff-how .krevo-sechead{margin-bottom:0}
.krevo-aff-steps{list-style:none;margin:var(--space-8) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-6)}
.krevo-aff-steps li{display:flex;gap:var(--space-4)}
.krevo-aff-steps__n{flex:none;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-caption);color:var(--text-accent);padding-top:3px}
.krevo-aff-steps b{display:block;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--type-label-md);color:var(--text-primary)}
.krevo-aff-steps p{font-family:var(--font-body);font-size:var(--type-body-sm);line-height:1.55;color:var(--text-body);margin:var(--space-1) 0 0}
.krevo-aff-fine{font-family:var(--font-body);font-size:var(--type-caption);line-height:1.5;color:var(--text-subtle);margin:var(--space-8) 0 0}

.krevo-aff-card{border-radius:var(--radius-2xl);padding:var(--space-10);color:var(--text-body)}
@media(max-width:768px){.krevo-aff-card{padding:var(--space-7)}}
.krevo-aff-card h2{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-title-lg);letter-spacing:-0.02em;color:var(--text-primary);margin:0}
.krevo-aff-card__sub{font-family:var(--font-body);font-size:var(--type-body-sm);line-height:1.55;color:var(--text-body);margin:var(--space-2) 0 var(--space-6)}
.krevo-aff-submit{align-self:stretch;width:100%;margin-top:var(--space-2);border:none;cursor:pointer;justify-content:center}
.krevo-aff-card__fine{font-family:var(--font-body);font-size:var(--type-caption-sm);line-height:1.5;color:var(--text-subtle);margin:var(--space-5) 0 0}
.krevo-aff-card__fine a{color:var(--text-accent)}

/* /affiliate/ application form — plain, no account. Placeholder-only fields. */
.krevo-aff-form{display:flex;flex-direction:column;gap:var(--space-4)}
.krevo-aff-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
body.krevo-affiliate-page .krevo-aff-input{width:100%!important;background:rgba(255,255,255,0.03)!important;border:1px solid rgba(255,255,255,0.1)!important;border-radius:var(--radius-md)!important;color:var(--text-primary)!important;font-family:var(--font-body)!important;font-size:var(--type-body-sm)!important;line-height:1.5!important;padding:13px 16px!important;box-shadow:none!important;transition:var(--transition-base);white-space:normal}
body.krevo-affiliate-page textarea.krevo-aff-input{min-height:120px!important;resize:vertical}
body.krevo-affiliate-page .krevo-aff-input::placeholder{color:var(--text-disabled)!important}
body.krevo-affiliate-page .krevo-aff-input:focus{outline:none!important;border-color:var(--border-accent-ghost)!important;background:rgba(255,255,255,0.05)!important;box-shadow:0 0 0 3px rgba(204,228,4,0.08)!important}
body.krevo-affiliate-page .krevo-aff-notices .woocommerce-error,
body.krevo-affiliate-page .krevo-aff-notices ul{list-style:none!important;margin:0 0 var(--space-5)!important;padding:12px 16px!important;border:1px solid var(--text-danger)!important;border-radius:var(--radius-md)!important;background:rgba(255,107,107,0.08)!important;color:var(--text-primary)!important;font-family:var(--font-body)!important;font-size:var(--type-body-sm)!important;box-shadow:none!important}
body.krevo-affiliate-page .krevo-aff-notices li{margin:0!important;padding:0!important;background:none!important;border:none!important;color:var(--text-primary)!important}
body.krevo-affiliate-page .krevo-aff-notices a{display:none!important}

/* ==========================================================================
   KREVO-SLICEWP  —  the affiliate area (/affiliate-area/): SliceWP's login +
   dashboard. SliceWP ships its own front-end CSS; this is the DS skin over it.
   Solace repaints controls + links, so scope to body.krevo-affiliate-area and
   lean on !important, same containment trick as the contact page.
   ========================================================================== */
body.krevo-affiliate-area .slicewp-form{display:flex;flex-direction:column;gap:var(--space-4);max-width:none}
body.krevo-affiliate-area .slicewp-field-wrapper{display:flex;flex-direction:column;gap:var(--space-2);margin:0}
body.krevo-affiliate-page .slicewp-field-label-wrapper label,
body.krevo-affiliate-area .slicewp-field-label-wrapper label,
body.krevo-affiliate-page .slicewp-field-wrapper > label,
body.krevo-affiliate-area .slicewp-field-wrapper > label{font-family:var(--font-display)!important;font-weight:var(--fw-medium)!important;font-size:var(--type-caption)!important;color:var(--text-muted)!important;margin:0!important;padding:0!important}
body.krevo-affiliate-page .slicewp-field-description,
body.krevo-affiliate-area .slicewp-field-description{font-family:var(--font-body)!important;font-size:var(--type-caption-sm)!important;color:var(--text-subtle)!important;margin:0!important}
body.krevo-affiliate-page .slicewp-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),
body.krevo-affiliate-page .slicewp-form textarea,
body.krevo-affiliate-page .slicewp-form select,
body.krevo-affiliate-area .slicewp-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),
body.krevo-affiliate-area .slicewp-form textarea,
body.krevo-affiliate-area .slicewp-form select,
body.krevo-affiliate-area .slicewp-affiliate-custom-link-input input{width:100%!important;background:rgba(255,255,255,0.03)!important;border:1px solid rgba(255,255,255,0.1)!important;border-radius:var(--radius-md)!important;color:var(--text-primary)!important;font-family:var(--font-body)!important;font-size:var(--type-body-sm)!important;line-height:1.5!important;padding:13px 16px!important;box-shadow:none!important;transition:var(--transition-base)}
body.krevo-affiliate-page .slicewp-form input::placeholder,
body.krevo-affiliate-page .slicewp-form textarea::placeholder{color:var(--text-disabled)!important}
body.krevo-affiliate-page .slicewp-form input:focus,
body.krevo-affiliate-page .slicewp-form textarea:focus,
body.krevo-affiliate-page .slicewp-form select:focus,
body.krevo-affiliate-area .slicewp-form input:focus,
body.krevo-affiliate-area .slicewp-form textarea:focus{outline:none!important;border-color:var(--border-accent-ghost)!important;background:rgba(255,255,255,0.05)!important;box-shadow:0 0 0 3px rgba(204,228,4,0.08)!important}
body.krevo-affiliate-page .slicewp-field-inner{position:relative}
body.krevo-affiliate-page .slicewp-show-hide-password{color:var(--text-muted)!important}
body.krevo-affiliate-page .slicewp-field-wrapper-terms-and-conditions,
body.krevo-affiliate-area .slicewp-field-wrapper-terms-and-conditions{flex-direction:row;align-items:flex-start;gap:var(--space-3)}
body.krevo-affiliate-page .slicewp-field-wrapper-terms-and-conditions label{color:var(--text-body)!important;font-family:var(--font-body)!important}
body.krevo-affiliate-page .slicewp-button-primary,
body.krevo-affiliate-area .slicewp-button-primary,
body.krevo-affiliate-page button.slicewp-button,
body.krevo-affiliate-area button.slicewp-button{display:inline-flex!important;align-items:center;justify-content:center;background:var(--interactive-accent)!important;color:var(--text-on-accent)!important;border:none!important;border-radius:var(--radius-round)!important;font-family:var(--font-display)!important;font-weight:var(--fw-bold)!important;font-size:var(--type-label-md)!important;padding:14px 30px!important;cursor:pointer;box-shadow:0 0 44px rgba(204,228,4,0.18)!important;transition:var(--transition-base)!important;width:auto!important;text-transform:none!important;letter-spacing:0!important}
body.krevo-affiliate-page .slicewp-button-primary:hover,
body.krevo-affiliate-area .slicewp-button-primary:hover{background:var(--interactive-accent-hover)!important;color:var(--text-on-accent)!important}
body.krevo-affiliate-page .slicewp-lost-password a,
body.krevo-affiliate-area .slicewp-lost-password a,
body.krevo-affiliate-area .slicewp-form a{color:var(--text-accent)!important}
/* notices */
body.krevo-affiliate-page .slicewp-user-notice,
body.krevo-affiliate-area .slicewp-user-notice{font-family:var(--font-body)!important;font-size:var(--type-body-sm)!important;border-radius:var(--radius-md)!important;padding:12px 16px!important;margin:0 0 var(--space-4)!important;background:var(--surface-raised)!important;border:1px solid var(--border-default)!important;border-left:3px solid var(--interactive-accent)!important;color:var(--text-primary)!important;box-shadow:none!important}
body.krevo-affiliate-page .slicewp-user-notice.slicewp-error,
body.krevo-affiliate-area .slicewp-user-notice.slicewp-error{border-left-color:var(--text-danger)!important}
/* affiliate area: tabs, cards, tables */
body.krevo-affiliate-area .slicewp-nav-tab-wrapper{display:flex;flex-wrap:wrap;gap:var(--space-2);border:0!important;margin:0 0 var(--space-8)!important;padding:0!important}
body.krevo-affiliate-area .slicewp-nav-tab{font-family:var(--font-display)!important;font-weight:var(--fw-semibold)!important;font-size:var(--type-label)!important;color:var(--text-muted)!important;background:var(--surface-card)!important;border:1px solid var(--border-default)!important;border-radius:var(--radius-round)!important;padding:9px 18px!important;margin:0!important;text-decoration:none!important;transition:var(--transition-base)}
body.krevo-affiliate-area .slicewp-nav-tab:hover{color:var(--text-primary)!important;background:var(--surface-raised)!important}
body.krevo-affiliate-area .slicewp-nav-tab.slicewp-nav-tab-active,
body.krevo-affiliate-area .slicewp-nav-tab-active{color:var(--text-on-accent)!important;background:var(--interactive-accent)!important;border-color:var(--interactive-accent)!important}
body.krevo-affiliate-area .slicewp-card{background:var(--surface-card)!important;border:1px solid var(--border-default)!important;border-radius:var(--radius-2xl)!important;box-shadow:none!important;color:var(--text-body)!important}
body.krevo-affiliate-area .slicewp-card-inner{padding:var(--space-6)!important}
body.krevo-affiliate-area .slicewp-card-title{font-family:var(--font-display)!important;font-weight:var(--fw-medium)!important;font-size:var(--type-caption)!important;color:var(--text-muted)!important;text-transform:uppercase;letter-spacing:.06em}
body.krevo-affiliate-area .slicewp-kpi-value{font-family:var(--font-display)!important;font-weight:var(--fw-bold)!important;font-size:var(--type-price-lg)!important;color:var(--text-primary)!important;letter-spacing:-0.03em}
body.krevo-affiliate-area .slicewp-section-heading,
body.krevo-affiliate-area h2,body.krevo-affiliate-area h3{font-family:var(--font-display)!important;color:var(--text-primary)!important;letter-spacing:-0.02em}
body.krevo-affiliate-area .slicewp-grid{display:grid;gap:var(--grid-gap)}
body.krevo-affiliate-area .slicewp-grid-affiliate-dashboard{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
body.krevo-affiliate-area table{width:100%;border-collapse:collapse;font-family:var(--font-body);font-size:var(--type-body-sm);color:var(--text-body)}
body.krevo-affiliate-area table th{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--type-caption);color:var(--text-muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--border-default)}
body.krevo-affiliate-area table td{padding:12px 14px;border-bottom:1px solid var(--border-soft)}
body.krevo-affiliate-area .slicewp-input-copy{cursor:pointer}
body.krevo-affiliate-area .slicewp-menu-toggle,body.krevo-affiliate-area .slicewp-menu-button{color:var(--text-primary)!important}
/* KPI trend pill — SliceWP ships it near-white */
body.krevo-affiliate-area .slicewp-kpi-direction{background:transparent!important;color:var(--text-muted)!important;font-size:var(--type-caption)!important}
body.krevo-affiliate-area .slicewp-kpi-value{display:flex;align-items:baseline;gap:var(--space-2)}
body.krevo-affiliate-area .slicewp-arrow-up{color:var(--interactive-accent)!important}
body.krevo-affiliate-area .slicewp-arrow-down{color:var(--text-danger)!important}
/* dashboard date-range filter — Solace paints it #374151 on #252525 */
body.krevo-affiliate-area .slicewp-affiliate-dashboard-filters,
body.krevo-affiliate-area .slicewp-affiliate-dashboard-filters *{color:var(--text-body)}
body.krevo-affiliate-area .slicewp-affiliate-dashboard-filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-bottom:var(--space-8)}
body.krevo-affiliate-area .slicewp-affiliate-dashboard-filters form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
body.krevo-affiliate-area .slicewp-date-picker,
body.krevo-affiliate-area .slicewp-date-picker-input-date-range,
body.krevo-affiliate-area .slicewp-affiliate-dashboard-filters input{background:var(--surface-card)!important;border:1px solid var(--border-default)!important;border-radius:var(--radius-md)!important;color:var(--text-primary)!important;padding:9px 14px!important}
body.krevo-affiliate-area .slicewp-affiliate-dashboard-filters .slicewp-button-primary{padding:9px 20px!important;font-size:var(--type-label)!important;white-space:nowrap!important;flex:0 0 auto;box-shadow:none!important}
/* litepicker popover */
body.krevo-affiliate-area .litepicker .container__main{background:var(--surface-raised)!important;border:1px solid var(--border-default)!important;color:var(--text-body)!important;border-radius:var(--radius-lg)!important}
body.krevo-affiliate-area .litepicker .container__months .month-item-header,
body.krevo-affiliate-area .litepicker .container__days .day-item{color:var(--text-body)!important}
body.krevo-affiliate-area .litepicker .day-item.is-start-date,
body.krevo-affiliate-area .litepicker .day-item.is-end-date{background:var(--interactive-accent)!important;color:var(--text-on-accent)!important}
body.krevo-affiliate-area .slicewp-date-picker-predefined-date-range{color:var(--text-body)!important}
body.krevo-affiliate-area .slicewp-date-picker-predefined-date-range:hover{background:var(--surface-card)!important;color:var(--text-primary)!important}
body.krevo-affiliate-area select,
body.krevo-affiliate-area .slicewp-chart-time-unit-selector{background:var(--surface-card)!important;border:1px solid var(--border-default)!important;color:var(--text-primary)!important;border-radius:var(--radius-md)!important;padding:8px 12px!important;font-family:var(--font-body)!important}
/* /affiliate-area/ page shell — Solace wraps page content in .the-content inside
   .boxes-content. Give it DS rhythm; keep the bare login / register / reset forms
   in a readable column, let the logged-in dashboard use the full width. */
body.krevo-affiliate-area .the-content{padding-top:var(--space-15)!important;padding-bottom:var(--space-20)!important}
body.krevo-affiliate-area .the-content > .slicewp-form,
body.krevo-affiliate-area .the-content > .slicewp-user-notice{max-width:460px;margin-left:auto;margin-right:auto}
body.krevo-affiliate-area .the-content > .slicewp-affiliate-account{max-width:1000px;margin-left:auto;margin-right:auto}
body.krevo-affiliate-area .slicewp-lost-password{text-align:center;margin-top:var(--space-4)}

/* ==========================================================================
   KREVO-POLICY  —  /privacy-policy/ /terms-and-conditions/
   /refund-and-cancellation/ /shipping-and-delivery/ (plain WP pages, dark DS)
   ========================================================================== */
body.krevo-policy-page .the-content{max-width:var(--max-prose);margin:0 auto;padding:var(--space-15) var(--gutter-page) var(--space-25);font-family:var(--font-body);font-size:var(--type-body);line-height:var(--type-body-lh);color:var(--text-body)}
body.krevo-policy-page .the-content h1,
body.krevo-policy-page .nv-page-title-wrap .title,
body.krevo-policy-page .entry-title{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--type-section);line-height:var(--type-section-lh);letter-spacing:var(--type-section-ls);color:var(--text-primary)}
body.krevo-policy-page .the-content h2{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--type-title-lg);letter-spacing:-0.02em;color:var(--text-primary);margin:var(--space-10) 0 var(--space-3)}
body.krevo-policy-page .the-content p{margin:0 0 var(--space-4)}
body.krevo-policy-page .the-content ul{margin:0 0 var(--space-5);padding-left:1.4em}
body.krevo-policy-page .the-content li{margin:0 0 var(--space-2)}
body.krevo-policy-page .the-content strong{color:var(--text-primary)}
body.krevo-policy-page .the-content em{color:var(--text-muted)}
body.krevo-policy-page .the-content a{color:var(--text-accent)}
body.krevo-policy-page .the-content a:hover{color:var(--interactive-accent-hover)}