/* ===== CELESTIAL-BUILD-MARKER: DARKMODE-V36-BATCH ===== */
/**
 * ModKor Celestial — visual system (build-independent; loaded via layout).
 * The heavy dark "celestial" treatment is scoped to the homepage (body.cms-index-index)
 * so catalog/CMS pages keep the default Hyvä look until they are themed.
 *
 * @copyright Copyright (c) 2026 ModKor Inc.
 * @license   Proprietary — commercial license
 */
:root{
  --mk-accent:#0f766e;
  --mk-accent-light:#2dd4bf;
  --mk-on-accent:#ffffff;
  --mk-star:#fbbf24;
  --mk-line:rgba(255,255,255,.1);
  --mk-rb:10px;   /* button radius */
  --mk-rc:16px;   /* card radius */
  --mk-text:#e8ecf4;       /* primary readable text on dark */
  --mk-text-dim:rgba(232,236,244,.66);
}
/* Replace Hyvä's default primary (yellow) with the ModKor mint, site-wide.
   Loaded after styles.css, so these win the cascade. Fixes Subscribe / Add-to-cart / etc. */
:root{
  --color-primary:#0f766e!important;
  --color-primary-lighter:#2dd4bf!important;
  --color-primary-darker:#14b8a6!important;
  --color-on-primary:#ffffff!important;
  --color-secondary:#1b2b49!important;
}
/* secondary buttons (e.g. "View and Edit Cart") + minicart edit/delete: mint, not yellow */
.btn-secondary,a.btn-secondary,button.btn-secondary{border-color:#0f766e!important;color:#14b8a6!important}

/* ===== SITE-WIDE DARK MODE — flip Hyvä's semantic colour vars so EVERY page
   (category, product, cart, account, search) matches the dark celestial homepage.
   Hyvä is built around these vars, so most native elements adapt automatically. ===== */
:root{
  --color-bg:#0f1729!important;                       /* page background */
  --color-fg:#e8ecf4!important;                       /* primary text */
  --color-fg-secondary:rgba(232,236,244,.66)!important;
  --color-surface:#17191f!important;                  /* cards / panels */
  --color-container-lighter:#17191f!important;
  --color-container:#1b2b49!important;
  --color-container-darker:#14161b!important;
  /* greys used for card bg, dividers & borders -> dark / subtle-light */
  --color-gray-50:#17191f!important;
  --color-gray-100:#1b2b49!important;
  --color-gray-200:rgba(255,255,255,.10)!important;
  --color-gray-300:rgba(255,255,255,.14)!important;
  --color-gray-400:rgba(255,255,255,.34)!important;
  --color-slate-50:#17191f!important;
  --color-slate-200:rgba(255,255,255,.12)!important;
  --color-slate-400:rgba(255,255,255,.40)!important;
  --color-slate-600:rgba(232,236,244,.70)!important;
  /* form fields readable on dark */
  --form-bg:#14161b!important;
  --form-stroke:rgba(255,255,255,.18)!important;
  --form-color:#e8ecf4!important;
  /* dropdown chevron: default is a BLACK svg (invisible on dark) -> light */
  --select-icon:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke='%23cbd5e1'><path d='m6 9 6 6 6-6'/></svg>")!important;
}
/* CELESTIAL gradient background on EVERY page (fixed so long pages stay consistent).
   !important is REQUIRED: celestial.css loads BEFORE Hyvä styles.css, whose later
   body{background:var(--color-bg)} would otherwise win and flatten this to solid navy. */
body{background:var(--mk-bg,radial-gradient(1000px 600px at 50% -12%, rgba(20,184,166,.07), transparent 60%), #08070c)!important;background-attachment:fixed!important}
/* any leftover hard-coded white card surfaces inside the main content -> dark */
.column.main .bg-white,#maincontent .bg-white{background:#17191f!important}

/* GLOBAL TEXT CONTRAST — many Hyvä templates hard-code Tailwind colour utilities
   (text-gray-900 = var(--color-gray-900), text-black…) instead of the semantic --color-fg,
   so on a dark page they render dark-on-dark (e.g. Contact "Write Us", form labels).
   Force the dark-text utilities light site-wide; muted greys -> dimmed light. */
#maincontent h1,#maincontent h2,#maincontent h3,#maincontent h4,#maincontent h5,#maincontent h6{color:#e8ecf4}
#maincontent .text-black,#maincontent .text-gray-900,#maincontent .text-gray-800,#maincontent .text-gray-700,#maincontent .text-gray-600,
#maincontent .text-slate-900,#maincontent .text-slate-800,#maincontent .text-slate-700,#maincontent .text-slate-600,
#maincontent .text-zinc-900,#maincontent .text-zinc-800,#maincontent .text-zinc-700{color:#e8ecf4!important}
#maincontent .text-gray-500,#maincontent .text-gray-400,#maincontent .text-slate-500,#maincontent .text-slate-400{color:rgba(232,236,244,.62)!important}
#maincontent label,#maincontent legend{color:rgba(232,236,244,.86)!important}
/* Empty-state / info notices (category "We can't find products", My Downloadable Products, Stored
   Payment Methods, My Orders empty, etc.) render as light-blue boxes with black text — out of place
   on the dark theme. Restyle as dark mint cards. (Scoped to in-content; toasts are .page.messages.) */
#maincontent .message.info,#maincontent .message.empty,#maincontent .message.notice,#maincontent .message.info.empty,
.column.main .message.info,.column.main .message.empty,.column.main .message.notice{
  background:var(--color-surface,#17191f)!important;border:1px solid var(--mk-line)!important;
  border-left:3px solid var(--mk-accent)!important;border-radius:12px!important;box-shadow:none!important;
  color:rgba(232,236,244,.92)!important;padding:16px 18px!important}
#maincontent .message.info span,#maincontent .message.empty span,#maincontent .message.notice span,
.column.main .message.info span,.column.main .message.empty span,.column.main .message.notice span{color:rgba(232,236,244,.92)!important}
#maincontent .message.info a,#maincontent .message.empty a,.column.main .message.info a,.column.main .message a{color:var(--mk-accent)!important;text-decoration:underline}
/* page title (e.g. "Customer Login") -> brand green */
.page-title,.page-title .base,.page-title-wrapper .page-title{color:var(--mk-accent)!important}
/* Breadcrumbs were dark-on-dark ("Home / Navigation And Search" invisible) -> readable. */
.breadcrumbs,.breadcrumbs a,.breadcrumbs .item,.breadcrumbs strong,.breadcrumbs li,.breadcrumbs .separator{color:var(--mk-text)!important}
.breadcrumbs a:hover{color:var(--mk-accent)!important}
.breadcrumbs strong,.breadcrumbs .item:last-child{color:#fff!important}
/* CATEGORY pages: drop the big H1 heading (the breadcrumb already shows where you are) and
   pull the content up so there's no empty gap above SHOP BY. Account/CMS titles stay (green). */
.catalog-category-view .page-title-wrapper,
.catalog-category-view .category-view .page-title-wrapper{display:none!important}
.catalog-category-view .page-main,.catalog-category-view .column.main{padding-top:0!important}
.catalog-category-view .columns{margin-top:8px!important}
/* customer account / login / create pages: readable description text + visible links on dark */
[class*="customer-account"] .column.main p,[class*="customer-account"] .column.main li,
[class*="customer-account"] .column.main .block-content,
[class*="customer-account"] .column.main span:not(.base):not(.btn *):not(.action *):not(.actions-toolbar *),
.account .column.main p,.account .column.main li{color:rgba(232,236,244,.82)!important}
[class*="customer-account"] .column.main a:not(.action):not([class*="btn"]):not(.mk-signin),
.account .column.main a:not(.action):not([class*="btn"]){color:var(--mk-accent)!important;text-decoration:underline}
/* ----- V16: extend readability to the account SIDEBAR, address/box-content/definition-lists,
   the ORDER-SUCCESS page (Luma markup), and the password strength meter + show/hide eye icons ----- */
/* account sidebar (My Account nav, Recently Ordered, Compare/Wishlist) — was dark-on-dark */
.account .sidebar,[class*="customer-account"] .sidebar{color:rgba(232,236,244,.82)}
.account .sidebar p,.account .sidebar li,.account .sidebar span,.account .sidebar strong,.account .sidebar .product-item-name,.account .sidebar .product-item-name a,
[class*="customer-account"] .sidebar p,[class*="customer-account"] .sidebar li,[class*="customer-account"] .sidebar span,[class*="customer-account"] .sidebar strong,[class*="customer-account"] .sidebar .product-item-name,[class*="customer-account"] .sidebar .product-item-name a{color:rgba(232,236,244,.82)!important}
.account .sidebar a:not(.action):not([class*="btn"]),[class*="customer-account"] .sidebar a:not(.action):not([class*="btn"]){color:var(--mk-text)!important}
.account .sidebar a:not(.action):hover,[class*="customer-account"] .sidebar a:not(.action):hover{color:var(--mk-accent)!important}
/* address boxes + definition lists (Account Information, Default Billing/Shipping) */
.account .column.main .box-content,[class*="customer-account"] .column.main .box-content,
.account .column.main address,[class*="customer-account"] .column.main address,
.account .column.main dt,.account .column.main dd,[class*="customer-account"] .column.main dt,[class*="customer-account"] .column.main dd{color:rgba(232,236,244,.82)!important}
/* ORDER SUCCESS page (checkout-onepage-success) — whole content light, headings white, links accent */
.checkout-onepage-success .column.main,.checkout-onepage-success .checkout-success{color:rgba(232,236,244,.9)!important}
.checkout-onepage-success .column.main p,.checkout-onepage-success .column.main span,.checkout-onepage-success .column.main li,.checkout-onepage-success .column.main .order-number{color:rgba(232,236,244,.9)!important}
.checkout-onepage-success .column.main strong{color:#fff!important}
.checkout-onepage-success .column.main a:not([class*="btn"]):not(.action){color:var(--mk-accent)!important;text-decoration:underline}
/* password strength meter + show/hide eye icons (create-account / edit) */
.password-strength-meter,#password-strength-meter,#password-strength-meter-label,
.account .field .password-info,[class*="customer-account"] .field .password-info,
[class*="customer-account"] .column.main .password-strength-meter{color:rgba(232,236,244,.82)!important}
.account .column.main .field .control button svg,[class*="customer-account"] .column.main .field .control button svg,
.field.password .control button svg,.field.confirmation .control button svg{color:var(--mk-text)!important;stroke:currentColor!important;opacity:.9}

/* ----- V17: address-edit + orders pages (new body-scope), section headings, orders table, tooltip "?" + Go-back ----- */
/* customer-address-* and sales-order-* pages were not in scope at all → all text dark */
[class*="customer-address"] .column.main,[class*="sales-order"] .column.main{color:rgba(232,236,244,.85)}
[class*="customer-address"] .column.main p,[class*="customer-address"] .column.main li,[class*="customer-address"] .column.main label,[class*="customer-address"] .column.main span:not(.base):not(.btn *):not(.action *),
[class*="sales-order"] .column.main p,[class*="sales-order"] .column.main li,[class*="sales-order"] .column.main span:not(.base):not(.btn *):not(.action *){color:rgba(232,236,244,.85)!important}
/* section headings (block-title / legend / h2-h3) → white on every customer page (page-title stays mint) */
.account .column.main .block-title strong,[class*="customer-account"] .column.main .block-title strong,[class*="customer-address"] .column.main .block-title strong,[class*="sales-order"] .column.main .block-title strong,
.account .column.main .legend,.account .column.main .legend span,[class*="customer-account"] .column.main .legend,[class*="customer-account"] .column.main .legend span,[class*="customer-address"] .column.main .legend,[class*="customer-address"] .column.main .legend span,
.account .column.main h2,.account .column.main h3,[class*="customer-account"] .column.main h2,[class*="customer-account"] .column.main h3,[class*="customer-address"] .column.main h1:not(.page-title),[class*="customer-address"] .column.main h2,[class*="customer-address"] .column.main h3,[class*="sales-order"] .column.main h2,[class*="sales-order"] .column.main h3{color:#fff!important}
/* My Orders table — headers + cells were invisible */
[class*="sales-order"] .column.main table th,.account .column.main .orders-history th,.account .column.main #my-orders-table th{color:#fff!important;font-weight:700}
[class*="sales-order"] .column.main table td,.account .column.main .orders-history td,.account .column.main #my-orders-table td,[class*="sales-order"] .column.main .price{color:rgba(232,236,244,.9)!important}
[class*="sales-order"] .column.main table a:not([class*="btn"]),[class*="sales-order"] .column.main .action.view{color:var(--mk-accent)!important}
[class*="sales-order"] .column.main .action svg,.account .column.main .action.reorder svg,.account .column.main .action.order svg{color:var(--mk-text)!important;stroke:currentColor!important;opacity:.9}
/* tooltip "?" icon + "Go back"/back secondary links */
[class*="customer-account"] .column.main .field-tooltip svg,[class*="customer-account"] .column.main .field-tooltip-action svg,.account .column.main .field-tooltip svg,.field-tooltip .label svg{color:var(--mk-text)!important;stroke:currentColor!important;opacity:.85}
.account .column.main .action.back,[class*="customer-account"] .column.main .action.back,[class*="customer-address"] .column.main .action.back{color:rgba(232,236,244,.7)!important;text-decoration:underline}
.account .column.main .action.back:hover,[class*="customer-address"] .column.main .action.back:hover{color:var(--mk-accent)!important}

/* ============================================================================
   V18 — MASTER customer-pages readability. Every account-section page (dashboard,
   orders, address book, newsletter, wishlist, reviews, vault, downloadable) shares
   body.account; address-edit forms add customer-address-*; order success adds
   checkout-onepage-success. One broad light-text default + targeted overrides so
   NOTHING stays dark-on-dark. page-title stays mint; buttons stay dark-on-mint.
   ============================================================================ */
/* 1. light default text on the whole content + sidebar of every customer page */
.account .column.main,.account .sidebar,[class*="customer-address"] .column.main,.checkout-onepage-success .column.main{color:rgba(232,236,244,.86)!important}
/* 2. elements that carry their OWN dark colour (labels, dt, th, totals .mark) */
.account .column.main label,.account .column.main dt,.account .column.main th,.account .column.main .mark,.account .column.main caption,
[class*="customer-address"] .column.main label,[class*="customer-address"] .column.main dt,.checkout-onepage-success .column.main label{color:rgba(232,236,244,.86)!important}
/* 3. section headings (block-title / legend / h2–h4) → white (page-title stays mint) */
.account .column.main .block-title strong,.account .column.main .legend,.account .column.main .legend span,
.account .column.main h2,.account .column.main h3,.account .column.main h4,
[class*="customer-address"] .column.main .legend,[class*="customer-address"] .column.main .legend span,[class*="customer-address"] .column.main h1:not(.page-title),[class*="customer-address"] .column.main h2,[class*="customer-address"] .column.main h3,
.checkout-onepage-success .column.main h2,.checkout-onepage-success .column.main h3{color:#fff!important}
/* 4. order / cart totals — labels light, grand total white */
.account .column.main .table-totals .mark,.account .column.main tfoot .mark,.account .column.main .order-totals .mark{color:rgba(232,236,244,.86)!important}
.account .column.main .grand_total .mark,.account .column.main .grand_total .amount strong,.account .column.main .grand_total strong,.account .column.main .grand_total td strong{color:#fff!important}
/* order VIEW page totals (sales-order-view) — broad catch: every .mark label readable, grand total white */
[class*="sales-order"] .column.main .mark,[class*="sales-order"] .column.main td.mark,[class*="sales-order"] .column.main th.mark{color:rgba(232,236,244,.86)!important}
[class*="sales-order"] .column.main .grand_total .mark,[class*="sales-order"] .column.main .grand_total .amount,[class*="sales-order"] .column.main .grand_total .amount strong,[class*="sales-order"] .column.main .grand_total strong{color:#fff!important}
/* INVOICE / SHIPMENT / CREDIT-MEMO item lists are DIV GRIDS, not <table> — the column headers
   (Product Name / Price / Qty Invoiced / Subtotal) and the totals rows are bare <div>s that inherited
   dark. The `table th/td` rules above never matched them. Target .order-items directly. */
[class*="sales-order"] .column.main .order-items,[class*="sales-order"] .column.main .order-items div,[class*="sales-order"] .column.main .order-items span,[class*="sales-order"] .column.main .order-items td,[class*="sales-order"] .column.main .order-items th,[class*="sales-order"] .column.main .order-title{color:rgba(232,236,244,.92)!important}
[class*="sales-order"] .column.main .order-items strong,[class*="sales-order"] .column.main .order-items .grand_total *{color:#fff!important}

/* ===== COMPARE PAGE (catalog/product_compare/index — body .catalog-product_compare-index) =====
   The whole comparison <table> inherited dark text (no rule existed). Row labels white, values readable,
   product names white, prices mint. */
[class*="product_compare"] .column.main td,[class*="product_compare"] .column.main td span,[class*="product_compare"] .column.main td p,[class*="product_compare"] .column.main td li,[class*="product_compare"] .column.main td div{color:rgba(232,236,244,.9)!important}
[class*="product_compare"] .column.main th,[class*="product_compare"] .column.main th span{color:#fff!important;font-weight:700}
[class*="product_compare"] .column.main td a:not(.btn),[class*="product_compare"] .column.main td strong,[class*="product_compare"] .column.main .product-item-name a{color:#fff!important}
[class*="product_compare"] .column.main .price,[class*="product_compare"] .column.main .price-box .price,[class*="product_compare"] .column.main td .price{color:var(--mk-accent)!important}
/* 5. field-tooltip "?" icon — svg (stroke/circle/path) or glyph */
.account .column.main .field-tooltip,.account .column.main .field-tooltip .label,.account .column.main .field-tooltip-action,
[class*="customer-address"] .column.main .field-tooltip,[class*="customer-address"] .column.main .field-tooltip-action{color:var(--mk-text)!important}
.account .column.main .field-tooltip svg,.account .column.main .field-tooltip-action svg,.account .column.main .field-tooltip svg *,
[class*="customer-address"] .column.main .field-tooltip svg,[class*="customer-address"] .column.main .field-tooltip svg *{color:var(--mk-text)!important;stroke:currentColor!important;opacity:.9}
/* 6. dashboard box avatar icons (Contact Information person, Newsletter envelope) → MINT */
.account .column.main .box svg,.account .column.main .block-dashboard-info svg,.account .column.main .box-information svg,.account .column.main .box-newsletter svg{color:var(--mk-accent)!important;stroke:currentColor!important}
/* 7. secondary "Back" / "Back to My Orders" links → readable */
.account .column.main .action.back,[class*="customer-address"] .column.main .action.back{color:rgba(232,236,244,.72)!important;text-decoration:underline}
.account .column.main .action.back:hover,[class*="customer-address"] .column.main .action.back:hover{color:var(--mk-accent)!important}

/* ===== V19 — button-text fix, category Add-to-Cart label, sidebar widget cards, login-state icon ===== */
/* 1. mint/primary buttons keep DARK text — V18's broad light default must NOT lighten them */
.account .column.main .btn-primary,.account .column.main .action.primary,.account .column.main button.primary,.account .column.main .action.tocart,.account .column.main .action.continue,.account .column.main .action.save,.account .column.main .action.update,
.checkout-onepage-success .column.main .btn-primary,.checkout-onepage-success .column.main .action.primary,.checkout-onepage-success .column.main .action.continue,
[class*="customer-address"] .column.main .btn-primary,[class*="customer-address"] .column.main .action.primary,[class*="customer-address"] .column.main .action.save,
.account .column.main .btn-primary *,.account .column.main .action.primary *,.account .column.main .action.tocart *,.account .column.main .action.continue *,.account .column.main .action.save *,
.checkout-onepage-success .column.main .btn-primary *,.checkout-onepage-success .column.main .action.primary *,.checkout-onepage-success .column.main .action.continue *,
[class*="customer-address"] .column.main .action.save *{color:var(--mk-on-accent,#ffffff)!important}
/* 2. category GRID Add-to-Cart: show the "Add to Cart" label, not just the cart icon */
.page-products .products-grid .product-item .btn-primary[data-addto="cart"]{gap:8px!important}
.page-products .products-grid .product-item .btn-primary[data-addto="cart"] span{display:inline-flex!important}
/* 3. sidebar widgets (Recently Ordered / Wish List / Compare / Recently Viewed) → card surface + readable text */
/* card surface ONLY when the widget actually has content — compare/wishlist widgets keep an
   always-present outer div (x-if template inside), so an empty one would otherwise show as a blank card. */
.sidebar .block-reorder,.sidebar .block-wishlist,.sidebar .wishlist-widget:has(.mt-8),.sidebar .block-compare,.sidebar .compare-widget:has(.mt-8),.sidebar .block-viewed{background:var(--color-surface,#17191f)!important;border:1px solid var(--mk-line)!important;border-radius:var(--mk-rc)!important;padding:18px!important;margin:0 0 16px!important}
/* the widgets wrap their content in an inner div with mt-8/border-t — neutralise so the card reads clean */
.sidebar .wishlist-widget > div,.sidebar .compare-widget > div{margin-top:0!important}
.sidebar .wishlist-widget h2,.sidebar .compare-widget h2,.sidebar .block-reorder h2{border-top:0!important;padding-top:0!important;margin-top:0!important}
/* sidebar Wish List / Compare widget thumbnails: square image type (view.xml) + cover-fill so the
   blue artwork fills a clean rounded square with NO white bars, regardless of source aspect */
.sidebar .wishlist-widget li > a,.sidebar .compare-widget li > a{width:3.5rem!important;height:3.5rem!important;overflow:hidden!important;border-radius:10px!important;background:transparent!important;flex:0 0 auto!important;margin-right:1rem!important}
.sidebar .wishlist-widget li > a img,.sidebar .compare-widget li > a img{width:100%!important;height:100%!important;object-fit:cover!important;background:transparent!important;display:block!important;border-radius:10px!important;margin:0!important}
.block-reorder .product-item-name,.block-reorder .product-item-name a,.block-reorder label,
.block-wishlist .product-item-name,.block-wishlist .product-item-name a,.block-wishlist .price,.block-wishlist .price-box,.block-wishlist .product-item-details,.block-wishlist .product-item-details *{color:rgba(232,236,244,.85)!important}
/* 4. header account icon — keyed off the markup (the two icons are mutually exclusive):
   logged OUT = `.mk-signin-icon` (login link) → NEUTRAL light;
   logged IN  = `#customer-menu` (account dropdown button) → MINT.
   No dependency on the mk-logged-in JS class, so it can't land backwards. */
#header .mk-signin-icon svg{color:#e8ecf4!important}
#header #customer-menu svg{color:var(--mk-accent)!important}

/* ===== V21 — dashboard avatar icons mint, wishlist page 3-up ===== */
/* Contact-Information / Newsletter avatar icons: real markup is `.card .rounded-full.bg-gray-100 > svg`.
   Tint the circle faint-mint and make the icon mint (V18/V19 `.box svg` didn't match — it's `.card`). */
.account .column.main .card .rounded-full,.account .column.main .block-dashboard-info .rounded-full{background:rgba(20,184,166,.12)!important}
.account .column.main .card .rounded-full svg,.account .column.main .block-dashboard-info .rounded-full svg{color:var(--mk-accent)!important;stroke:currentColor!important}
/* Wishlist PAGE: DON'T force a grid here. Hyvä already makes the inner <ol class="product-items">
   a responsive grid (grid-cols-1 md:grid-cols-2 xl:grid-cols-3). The earlier override also forced
   the .products-grid WRAPPER to a 3-col grid — nesting two 3-col grids squished each card to ~1/9
   width. Leaving both native fixes it (3-up on desktop, 2-up tablet, 1-up mobile). */
/* wishlist PAGE: Hyvä sets the product image to a fixed inline width:240px — in a narrow grid
   column that overflows the card. Force it responsive so it fits whatever column width it gets. */
.wishlist-index-index .product-image-container,.wishlist-index-index .product-image-wrapper,.wishlist-index-index .product-image-photo{width:100%!important;max-width:100%!important;height:auto!important}
.wishlist-index-index .products-grid .product-item-info{padding:14px!important}
/* product PAGE: wishlist (heart) + compare (scale) icon buttons were dark — mint icon on a
   faint-mint circle, matching the dashboard newsletter/contact icons. */
.catalog-product-view [data-addto="wishlist"],.catalog-product-view [data-addto="compare"],.catalog-product-view .action.towishlist,.catalog-product-view .action.tocompare{background:rgba(20,184,166,.12)!important;border:1px solid var(--mk-line)!important;color:var(--mk-accent)!important}
.catalog-product-view [data-addto="wishlist"] svg,.catalog-product-view [data-addto="compare"] svg,.catalog-product-view .action.towishlist svg,.catalog-product-view .action.tocompare svg{color:var(--mk-accent)!important;stroke:currentColor!important}
.catalog-product-view [data-addto="wishlist"]:hover,.catalog-product-view [data-addto="compare"]:hover,.catalog-product-view .action.towishlist:hover,.catalog-product-view .action.tocompare:hover{background:rgba(20,184,166,.22)!important;border-color:var(--mk-accent)!important}

/* ============================================================================
   SHOPPING SURFACES — readable light text on dark for the minicart drawer, cart
   page and product view. These either live OUTSIDE #maincontent (the drawer) or
   use Tailwind utilities the global contrast block above doesn't reach, so their
   text rendered dark-on-dark. One block, applied consistently across all of them.
   ============================================================================ */
/* container default: light body text (children inherit) */
.minicart-wrapper,.block-minicart,#minicart-content-wrapper,
[id*="cart-drawer"],[class*="cart-drawer"],[x-ref="cartDrawer"],
.checkout-cart-index .column.main,.checkout-cart-index .cart-container,
.catalog-product-view .product-info-main,
.catalog-product-view .product.info.detailed{color:var(--mk-text)}
/* product names / item titles -> light */
.minicart-items .product-item-name a,.block-minicart .product-item-name a,
[class*="cart-drawer"] .product-item-name a,
.checkout-cart-index .product-item-name a,.checkout-cart-index .product-item-details a,
.catalog-product-view .product-info-main .page-title,
.catalog-product-view .product-info-main .base{color:var(--mk-text)!important}
/* PRICES -> bright white (were dark-on-dark in cart, minicart and the product page) */
.minicart-wrapper .price,.block-minicart .price,[class*="cart-drawer"] .price,
.checkout-cart-index .price,.checkout-cart-index .cart-totals .price,.checkout-cart-index .subtotal .price,
.catalog-product-view .product-info-price .price,.catalog-product-view .price-box .price,
.catalog-product-view .product-info-main [class*="price"]{color:#fff!important}
/* qty inputs / labels and the "x quantity" line in the minicart -> light */
.minicart-items .details-qty,.minicart-items .details-qty .label,
[class*="cart-drawer"] .details-qty,[class*="cart-drawer"] .item-qty,
.checkout-cart-index .col.qty .label{color:var(--mk-text)!important}
/* cart Summary block — labels/headings (Apply Discount Code, Estimate Shipping & Tax,
   Subtotal, Grand Total) were near-invisible. Force light; keep totals bright. */
.cart-summary,.cart-summary .summary.title,.cart-summary .title,.cart-summary .mark,
.cart-summary .label,.cart-summary span,.cart-summary strong,.cart-summary a,
.checkout-cart-index .cart-summary .totals .mark,
.checkout-cart-index #block-discount,.checkout-cart-index #block-shipping{color:var(--mk-text)!important}
.cart-summary .grand .price,.cart-summary .grand strong,
.checkout-cart-index .grand.totals .price{color:#fff!important;font-weight:800}
.cart-summary a,#block-discount .title,#block-shipping .title{color:var(--mk-accent)!important}
/* product page stock indicator ("In Stock") + SKU value -> readable */
.catalog-product-view .stock.available,.catalog-product-view .stock span,
.catalog-product-view .product.attribute.sku,.catalog-product-view .product.attribute.sku .value{color:var(--mk-text)!important}

/* catalog product grid + toolbar columns (the classes the incomplete build omitted) */
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}
@media(min-width:640px){.sm\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(min-width:768px){.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}}
@media(min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(min-width:1280px){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* FORCE the catalog grid to a real 3-up grid on desktop (Hyvä's native classes go
   1 -> 2 -> back to 1 at md -> 2 -> 3, which left a single product stretched full-width).
   Grid mode only; list mode stays single. A lone product now sits in column 1 at 1/3 width
   with two empty tracks beside it — no zoom/stretch. */
@media(min-width:1024px){
  .products.wrapper.mode-grid ul.grid,
  .products-grid ul.grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* Catalog toolbar view-mode switch (grid/list). Hyvä renders each icon as a CSS
   background-image data-URI on the .modes-mode button — and the SVG uses stroke="currentColor",
   which does NOT resolve in a background-image context (renders black → invisible on the dark
   nav). TWO fixes: (1) the button surface must use background-COLOR, not the `background`
   shorthand, or it wipes the icon image; (2) override the icon with an explicitly light / accent
   SVG so it shows regardless of currentColor. */
.column.main .modes{display:inline-flex!important;gap:6px!important;background:transparent!important;border:0!important;padding:0!important}
.column.main .modes-mode{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:34px!important;height:34px!important;border-radius:8px!important;background-color:transparent!important;background-repeat:no-repeat!important;background-position:center!important;background-size:20px 20px!important;border:0!important;opacity:1!important}
.column.main .modes-mode svg{display:none!important}
.column.main .modes-mode.mode-grid{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cbd5e1'><rect x='3' y='3' width='8' height='8' rx='1.5'/><rect x='13' y='3' width='8' height='8' rx='1.5'/><rect x='3' y='13' width='8' height='8' rx='1.5'/><rect x='13' y='13' width='8' height='8' rx='1.5'/></svg>")!important}
.column.main .modes-mode.mode-list{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.4' stroke-linecap='round'><path d='M4 6h16M4 12h16M4 18h16'/></svg>")!important}
.column.main .modes-mode:hover{background-color:transparent!important}
.column.main .modes-mode.active{border:0!important;background-color:transparent!important}
.column.main .modes-mode.active.mode-grid{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314ffaf'><rect x='3' y='3' width='8' height='8' rx='1.5'/><rect x='13' y='3' width='8' height='8' rx='1.5'/><rect x='3' y='13' width='8' height='8' rx='1.5'/><rect x='13' y='13' width='8' height='8' rx='1.5'/></svg>")!important}
.column.main .modes-mode.active.mode-list{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314ffaf' stroke-width='2.4' stroke-linecap='round'><path d='M4 6h16M4 12h16M4 18h16'/></svg>")!important}

/* Category / search PLP product cards — hover lift + 3D tilt to match the homepage cards.
   Hyvä's card is the `.product-item` FORM (with .card.card-interactive) — there is NO
   `.product-item-info` element, so the tilt JS + this CSS target `.product-item` directly.
   The dark glass surface already comes from the celestial `.card` styling; here we just add the
   perspective context + hover lift. */
.page-products .products-grid .product-item,.page-products .product-items .product-item{
  transition:box-shadow .2s ease,border-color .2s ease,transform .15s ease;
  transform-style:preserve-3d;will-change:transform}
.page-products .products-grid .product-item:hover,.page-products .product-items .product-item:hover{
  border-color:rgba(20,184,166,.4)!important;box-shadow:0 16px 44px rgba(0,0,0,.38)!important}
.column.main .sorter svg,.column.main [class*="sorter"] svg,.column.main .toolbar-sorter svg{color:#e8ecf4!important}
/* PLP card CONTENT was dark-on-dark: product name (.product-item-link), price (.price), and the
   wishlist/compare icon buttons (.btn.p-2 — currentColor inherited the dark card text). Make them
   readable. NOT the Add-to-Cart button (.btn-primary keeps its dark-on-mint from the inline block). */
.column.main .product-item .product-item-link,
.column.main .product-item .product-item-name a,
.column.main .product-item .product-item-link:hover{color:var(--mk-text)!important}
.column.main .product-item .price,
.column.main .product-item .price-wrapper,
.column.main .product-item .price-box .price,
.column.main .product-item .special-price .price,
.column.main .product-item .minimal-price .price{color:#fff!important}
.column.main .product-item .old-price .price{color:rgba(232,236,244,.55)!important}
/* wishlist + compare icon buttons (NOT btn-primary): light icon + faint surface so they're visible on the card */
.column.main .product-item .btn.p-2:not(.btn-primary),
.column.main .product-item [data-addto="wishlist"],
.column.main .product-item [data-addto="compare"]{color:var(--mk-accent)!important;background-color:rgba(20,184,166,.08)!important;border:1px solid var(--mk-line)!important}
.column.main .product-item .btn.p-2:not(.btn-primary) svg,
.column.main .product-item [data-addto="wishlist"] svg,
.column.main .product-item [data-addto="compare"] svg{color:var(--mk-accent)!important;stroke:var(--mk-accent)!important;opacity:1}
.column.main .product-item .btn.p-2:not(.btn-primary):hover,
.column.main .product-item [data-addto="wishlist"]:hover,
.column.main .product-item [data-addto="compare"]:hover{color:var(--mk-accent)!important;border-color:var(--mk-accent)!important}
/* hide the SKU row from the product-page info (user removed the SKU field) */
.catalog-product-view .mk-pdp-info .attribute-sku,.catalog-product-view .product-info-main .attribute-sku,.catalog-product-view .product.attribute.sku{display:none!important}
/* Compare Products page: table cells / labels / descriptions were dark-on-dark -> readable */
/* ===== Compare Products — centered, dark rounded table, rounded thumbs, mint actions ===== */
.catalog-product-compare .column.main{max-width:1080px!important;margin-left:auto!important;margin-right:auto!important}
.catalog-product-compare .table-wrapper{display:flex!important;justify-content:center!important}
.catalog-product-compare table.table-auto{border-collapse:separate!important;border-spacing:0!important;border:1px solid var(--mk-line)!important;border-radius:16px!important;overflow:hidden!important}
/* every cell: dark surface, readable light text, subtle borders */
.catalog-product-compare table th,.catalog-product-compare table td{background:var(--mk-surface)!important;border:1px solid var(--mk-line)!important;color:#cdd7e3!important;vertical-align:top}
/* left label column: slightly tinted + white bold labels */
.catalog-product-compare table th{background:rgba(255,255,255,.035)!important;color:#fff!important;font-weight:700}
/* product names + prices stand out */
.catalog-product-compare .product-item-name,.catalog-product-compare .product-item-name a{color:#fff!important;font-weight:700;font-size:15px}
.catalog-product-compare .price,.catalog-product-compare .price-box .price,.catalog-product-compare .price-wrapper .price{color:var(--mk-accent)!important;font-weight:800}
.catalog-product-compare p,.catalog-product-compare .product.attribute,.catalog-product-compare .description{color:#cdd7e3!important}
/* rounded product thumbnails */
.catalog-product-compare .product-image-photo,.catalog-product-compare td a.block img,.catalog-product-compare td img{border-radius:12px!important;overflow:hidden;display:block}
/* action icons (wishlist heart + remove ×) -> mint */
.catalog-product-compare .btn.p-2,.catalog-product-compare .btn.p-2 svg,.catalog-product-compare [data-role="remove"] svg,.catalog-product-compare .action.delete svg{color:var(--mk-accent)!important;stroke:currentColor!important}
.catalog-product-compare .btn.p-2{border:1px solid var(--mk-line)!important;border-radius:10px!important}
/* ===== My Wishlist: real multi-col grid (the md:/xl:grid-cols Tailwind classes aren't in the build, so it collapsed to 1 huge card), rounded image, fill the box (kills the white top) ===== */
.wishlist-index-index .product-items{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important;gap:16px!important}
/* Wishlist qty: kill the native number-spinner scroller (the JS adds a mint − / + stepper instead) */
.wishlist-index-index input[data-role="qty"]{-moz-appearance:textfield!important;appearance:textfield!important}
.wishlist-index-index input[data-role="qty"]::-webkit-outer-spin-button,.wishlist-index-index input[data-role="qty"]::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important;display:none!important}
/* Stack the buybox: stepper on top, "Add to Cart" drops to the bottom-left (was right of the qty) */
.wishlist-index-index .box-tocart{flex-direction:column!important;align-items:flex-start!important;gap:14px!important}
.wishlist-index-index .box-tocart .product-item-actions{margin:0!important;width:auto!important}
.wishlist-index-index .box-tocart .btn-primary[data-addto="cart"]{justify-content:center!important;padding-left:22px!important;padding-right:22px!important}
.wishlist-index-index .product-item-photo{display:block!important;aspect-ratio:1/1!important;overflow:hidden!important;border-radius:14px!important;background:transparent!important;margin-bottom:12px!important}
.wishlist-index-index .product-item-photo img,.wishlist-index-index .product-image-photo{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;border-radius:14px!important}
/* ===== Orders / Invoices / Shipments view: dark-on-dark headers, totals labels + gray text -> readable ===== */
/* drop .column.main so it also covers the Invoices/Shipments tab content (which sits outside it) */
[class*="sales-order"] [class*="text-gray-"],[class*="sales-order"] td,[class*="sales-order"] .mark,[class*="sales-order"] dt,[class*="sales-order"] dd,[class*="sales-order"] .label{color:#cdd7e3!important}
[class*="sales-order"] th,[class*="sales-order"] caption,[class*="sales-order"] table caption,[class*="sales-order"] h1:not(.page-title),[class*="sales-order"] h2,[class*="sales-order"] h3,[class*="sales-order"] h4,[class*="sales-order"] .order-title,[class*="sales-order"] .grand_total,[class*="sales-order"] .grand_total .mark{color:#fff!important;font-weight:700}
/* GLOBAL: hide the native number-spinner everywhere (wishlist qty etc.); custom +/- steppers are separate buttons and still work */
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none!important;appearance:none!important;margin:0!important}
input[type=number]{-moz-appearance:textfield!important}
/* ===== GLOBAL product-image normalization — EVERY product thumbnail (wishlist dropdown, related/upsell/cross-sell, account order rows, sidebar, search, anywhere) fills its box: no white letterbox/top, transparent bg, rounded, clipped. The PDP MAIN gallery is excluded so it keeps showing the full product. ===== */
img.product-image-photo{object-fit:cover!important;background:transparent!important;border-radius:10px!important;display:block}
.product-image-container,.product-item-photo,.product-image-box,.product-image-wrapper,.product-image-container span,.product-image-container > a{background:transparent!important;overflow:hidden!important}
.product-image-container,.product-image-box{border-radius:10px!important}
.catalog-product-view #gallery-main img.product-image-photo{object-fit:contain!important;border-radius:var(--mk-pdp-img-radius,14px)!important}

/* Bottom toolbar layout: "N Items" centred, "Show" limiter pinned right, drop the empty pager cell. */
.column.main .toolbar-products:has(.field.limiter){display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;gap:8px!important}
.column.main .toolbar-products:has(.field.limiter) > .flex.justify-center{display:none!important}
.column.main .toolbar-products:has(.field.limiter) .toolbar-amount{grid-column:2!important;order:0!important;justify-self:center!important;text-align:center!important;margin:0!important}
.column.main .toolbar-products:has(.field.limiter) .field.limiter{grid-column:3!important;order:0!important;justify-self:end!important}

/* Category page: hide the green page-title AND fully collapse its wrapper (div.page-main) so the
   grid shifts up. `clip`/absolute didn't reclaim the wrapper's height — display:none does.
   The .page.messages box is kept (add-to-cart confirmation). Breadcrumb still names the category. */
.catalog-category-view div.page-main{padding:0!important;margin:0!important}
.catalog-category-view div.page-main > .container:has(> .page-title){display:none!important}
.catalog-category-view h1.page-title{display:none!important}

/* ===== CATEGORY V13 — pull content up (match cart page), align toolbar row, homepage-style cards ===== */
/* 1. CONSISTENT top spacing on EVERY interior page (homepage hero manages its own top, excluded):
      ONE 20px gap below the nav, then content (breadcrumb → page-title / SHOP BY / grid) flows tight. */
.page-wrapper .breadcrumbs{margin:0!important}
.page-wrapper .breadcrumbs .items,.page-wrapper .breadcrumbs ol{padding:20px 0 4px!important;margin:0!important}
body:not(.cms-index-index) main.page-main{padding-top:0!important}
body:not(.cms-index-index) div.page-main{padding-top:0!important}
main.page-main > .columns{margin-top:0!important;padding-top:0!important}
.column.main > section:first-child,.column.main > .toolbar-products:first-child{padding-top:0!important;margin-top:0!important}
.sidebar-main{margin-top:0!important;padding-top:0!important}
.sidebar-main > div,.sidebar-main .block.filter{margin-top:0!important}
/* visible page titles (cart "Shopping Cart", account, etc.) sit tight under the breadcrumb */
div.page-main > .container > .page-title{margin:0 0 12px!important}
.catalog-category-view .category-view,.catalog-category-view .category-description{margin:0!important}

/* 2. Top toolbar (grid/list toggle + sort) on ONE aligned row: modes left, sort right, centred */
.column.main .toolbar-products:not(:has(.field.limiter)){display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin:0 0 10px!important;padding:0!important}
.column.main .toolbar-products:not(:has(.field.limiter)) .modes{order:0!important;margin:0!important}
.column.main .toolbar-products:not(:has(.field.limiter)) .toolbar-sorter,
.column.main .toolbar-products:not(:has(.field.limiter)) .sorter{order:1!important;margin-left:auto!important}

/* 3. GRID cards → homepage .mk-pcard look (only grid mode; list mode keeps its row layout) */
.page-products .products-grid .product-item.card{padding:0!important;overflow:hidden!important;background:var(--mk-surface)!important;border:1px solid var(--mk-line)!important;border-radius:16px!important}
.page-products .products-grid .product-item .product-item-photo,
.page-products .products-grid .product-item .product.photo{background:transparent!important;padding:0!important;margin:0!important;width:100%!important;max-width:none!important;border-radius:0!important;flex:none!important;aspect-ratio:1!important;overflow:hidden!important}
.page-products .products-grid .product-item .product-image-photo{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;background:transparent!important}
.page-products .products-grid .product-item .product-info{padding:16px!important;width:100%!important}
.page-products .products-grid .product-item .product-item-link{font-size:15px!important;font-weight:700!important}
/* actions: full-width mint Add-to-Cart (dark text inherited from the .btn-primary rule), wishlist/compare in a small centred row below */
.page-products .products-grid .product-item .mt-auto{flex-direction:column!important;align-items:stretch!important;gap:10px!important}
.page-products .products-grid .product-item .btn-primary[data-addto="cart"]{width:100%!important;margin:0!important;justify-content:center!important;padding:12px!important;font-size:14px!important;font-weight:800!important;border-radius:10px!important}
.page-products .products-grid .product-item .mt-auto > .flex{justify-content:center!important}
/* wishlist + compare icons -> mint (bulletproof: stroke set directly, specificity past .btn currentColor) */
.page-products .product-item button[data-addto="wishlist"] svg,.page-products .product-item button[data-addto="compare"] svg,
.catalog-category-view button[data-addto="wishlist"] svg,.catalog-category-view button[data-addto="compare"] svg,
.catalogsearch-result-index button[data-addto="wishlist"] svg,.catalogsearch-result-index button[data-addto="compare"] svg{stroke:var(--mk-accent)!important;color:var(--mk-accent)!important}
.page-products .product-item button[data-addto="wishlist"],.page-products .product-item button[data-addto="compare"]{color:var(--mk-accent)!important}
/* list-view (mode-list) short-description + name were dark-on-dark -> readable */
.products-list .product-item .product-info,.products-list .product-item .product-info div,.mode-list .product-item .product-info,.mode-list .product-item .product-info div{color:#cdd7e3!important}
.products-list .product-item .product-item-link,.mode-list .product-item .product-item-link{color:#fff!important}
/* toolbar Show + Sort dropdowns: mint selection instead of OS blue (accent-color = modern lever; native option highlight is otherwise browser-controlled) */
.toolbar select,.toolbar-sorter select,.field.limiter select,#sorter,#limiter,.toolbar-amount + * select,select.sorter-options{accent-color:var(--mk-accent)!important}
.toolbar select option:checked,.toolbar-sorter select option:checked,.field.limiter select option:checked{background:var(--mk-accent)!important;color:#ffffff!important}
.toolbar select:focus,.toolbar-sorter select:focus,.field.limiter select:focus{border-color:var(--mk-accent)!important;box-shadow:0 0 0 2px rgba(20,184,166,.4)!important}

/* ===== LAYERED NAV / SHOP BY — filter option text was dark-on-dark (Price ranges, counts) ===== */
.sidebar .filter-options-title,.filter-options-title,
.sidebar .filter-options-content,.filter-options-content,
.filter-options-content a,.filter-options-content .item,.filter-options-content label,
.filter-options-content .count,.filter .count,.filter-current .item,.filter-current a{color:var(--mk-text)!important}
.filter-options-content a:hover,.filter-current a:hover{color:var(--mk-accent)!important}
.filter-options-title{font-weight:700}
/* the price-range numbers specifically (often nested spans) -> readable */
.filter-options-content li,.filter-options-content li span,.filter-options-content ol li{color:var(--mk-text)!important}
/* ===== Sidebar blocks (Compare Products / Recently Ordered / My Wish List) — product names, prices, X + action links were dark-on-dark on the dark cards ===== */
.sidebar [class*="text-gray-"],.sidebar [class*="text-slate-"],.sidebar-additional [class*="text-gray-"],.sidebar-additional [class*="text-slate-"]{color:#cdd7e3!important}
.sidebar a:not(.btn):not([class*="btn-"]),.sidebar button:not(.btn):not([class*="btn-"]),.sidebar label,.sidebar dt,.sidebar dd,.sidebar .product-item-details,.sidebar-additional a:not(.btn):not([class*="btn-"]){color:#cdd7e3!important}
.sidebar strong,.sidebar strong a,.sidebar .product-item-name a,.sidebar h2,.sidebar .block-title,.sidebar-additional strong a,.sidebar-additional h2{color:#fff!important}
.sidebar .price,.sidebar .price-box .price,.sidebar-additional .price{color:var(--mk-accent)!important}
.sidebar [class*="text-slate-"] svg,.sidebar button:not(.btn) svg,.sidebar-additional [class*="text-slate-"] svg{color:var(--mk-accent)!important;stroke:currentColor!important}

/* ===== CART / MINICART item actions — edit (pencil) + delete (trash) icons were near-black
   on the dark teal button. Icons use currentColor, so colour the action -> accent/visible. ===== */
.minicart-items .action.edit,.minicart-items .action.delete,
.minicart-wrapper .action.edit,.minicart-wrapper .action.delete,
.block-minicart .action.edit,.block-minicart .action.delete,
[class*="cart-drawer"] .action.edit,[class*="cart-drawer"] .action.delete,
.checkout-cart-index .action-edit,.checkout-cart-index .action-delete,
.cart.item .action-edit,.cart.item .action-delete,
.cart.item .action.action-edit,.cart.item .action.action-delete{color:var(--mk-accent)!important}
.minicart-items .action.edit svg,.minicart-items .action.delete svg,
[class*="cart-drawer"] .action.edit svg,[class*="cart-drawer"] .action.delete svg,
.checkout-cart-index .action-edit svg,.checkout-cart-index .action-delete svg,
.cart.item .action-edit svg,.cart.item .action-delete svg{color:inherit!important;stroke:currentColor!important}
/* Hyvä's actual cart-DRAWER + cart-PAGE icon buttons are `.btn.p-2` (NOT .action.edit), so the
   above missed them — the pencil/trash rendered near-black on the dark teal box. Make the icon
   LIGHT (same as the qty box text), brighten on hover. */
#cart-drawer .btn.p-2,[id*="cart-drawer"] .btn.p-2,[class*="cart-drawer"] .btn.p-2,
.checkout-cart-index .cart.item .action,.checkout-cart-index .item-actions .btn{color:var(--mk-text)!important}
#cart-drawer .btn.p-2 svg,[id*="cart-drawer"] .btn.p-2 svg,[class*="cart-drawer"] .btn.p-2 svg,
.checkout-cart-index .cart.item .action svg,.checkout-cart-index .item-actions .btn svg{color:var(--mk-text)!important;stroke:currentColor!important;opacity:.95}
#cart-drawer .btn.p-2:hover,[id*="cart-drawer"] .btn.p-2:hover,[class*="cart-drawer"] .btn.p-2:hover{color:var(--mk-accent)!important}
/* ============================================================================
   BUILD PATCH — supply the responsive utility classes that the incomplete
   styles.css build omitted (it never scanned the parent Hyvä header/footer/nav
   templates). These make the NATIVE Hyvä templates work without a rebuild.
   --spacing is defined in styles.css (0.25rem).
   ============================================================================ */
@media(min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:flex{display:flex}
  .sm\:flex-row{flex-direction:row}
  .sm\:w-auto{width:auto}
  .sm\:pb-0{padding-bottom:0}
  .sm\:order-1{order:1}
  .sm\:hidden{display:none}
  .sm\:block{display:block}
}
@media(min-width:768px){
  .md\:w-1\/2{width:50%}
  .md\:w-1\/3{width:33.333333%}
  .md\:w-1\/4{width:25%}
  .md\:flex{display:flex}
  .md\:flex-nowrap{flex-wrap:nowrap}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:gap-1{gap:calc(var(--spacing)*1)}
  .md\:-mr-1{margin-right:calc(var(--spacing)*-1)}
  .md\:hidden{display:none}
  .md\:block{display:block}
}
@media(min-width:1024px){
  .lg\:flex{display:flex}
  .lg\:hidden{display:none}
  .lg\:block{display:block}
  .lg\:inline-block{display:inline-block}
  .lg\:flex-nowrap{flex-wrap:nowrap}
  .lg\:flex-row{flex-direction:row}
  .lg\:order-0{order:0}
  .lg\:px-8{padding-inline:calc(var(--spacing)*8)}
  .lg\:gap-8{gap:calc(var(--spacing)*8)}
  .lg\:w-auto{width:auto}
}

/* Hardcoded mint on the primary utilities so the cart badge / Add-to-cart / Subscribe
   are mint regardless of CSS load order (beats the build's yellow via !important). */
.bg-primary{background-color:var(--mk-accent)!important}
.text-on-primary{color:var(--mk-on-accent)!important}
.text-primary{color:var(--mk-accent)!important}
/* ===== PRIMARY BUTTONS — mint background, BLACK text, EVERYWHERE =====
   Root cause of the white text: this Hyvä/Tailwind build wires the button colour through
   custom props — `.btn-primary{--btn-color:var(--color-on-primary)}` and `--color-on-primary:#fff`.
   So we fix it at the source (--btn-* props + --color-on-primary above) AND assert color/bg
   directly. All values come from --mk-accent / --mk-on-accent, so changing the brand colour in
   the configurator (which overrides --mk-accent) recolours every button automatically. */
.btn-primary,.btn.btn-primary,button.btn-primary,a.btn-primary,
.action.primary,button.action.primary,a.action.primary,
.action-primary,button.action-primary,
.action.tocart,button.action.tocart,
.action.checkout,button.action.checkout,
.mk-btn--p,button.mk-btn--p,a.mk-btn--p,
#maincontent .action.primary,#maincontent button.action.primary,
.minicart-wrapper .action.primary,.checkout-cart-index .action.primary{
  --btn-bg:var(--mk-accent)!important;
  --btn-color:var(--mk-on-accent)!important;
  --btn-hover-bg:var(--mk-accent-light,#2dd4bf)!important;
  --btn-hover-color:var(--mk-on-accent)!important;
  --btn-active-bg:var(--mk-accent)!important;
  --btn-active-color:var(--mk-on-accent)!important;
  background-color:var(--mk-accent)!important;
  color:var(--mk-on-accent)!important;
  border-color:var(--mk-accent)!important;
}
/* labels live in nested <span>/<svg> — force them dark too (icons use currentColor) */
.btn-primary *,.action.primary *,.action.tocart *,.action.checkout *,.mk-btn--p *{
  color:var(--mk-on-accent)!important;fill:currentColor!important}

/* Sign-In button (guests) — dark text on mint; beat the homepage #header a skin */
.mk-signin{display:inline-flex;align-items:center;padding:9px 18px;border-radius:var(--mk-rb);background:var(--mk-accent);color:var(--mk-on-accent)!important;font-weight:700;font-size:14px;text-decoration:none!important;white-space:nowrap;line-height:1;transition:background .15s ease,transform .12s ease,box-shadow .15s ease}
/* hover: keep the text DARK (the global #header a:hover turned it mint -> invisible on the
   mint button). Lighten the mint + lift instead. Active: press down + darker mint. */
.mk-signin:hover,#header a.mk-signin:hover{background:#2dd4bf!important;color:var(--mk-on-accent)!important;transform:translateY(-1px);box-shadow:0 8px 20px rgba(20,184,166,.35)}
.mk-signin:active,#header a.mk-signin:active{background:#14b8a6!important;color:var(--mk-on-accent)!important;transform:translateY(0);box-shadow:0 2px 6px rgba(20,184,166,.5) inset}
#header .mk-signin,#header a.mk-signin{color:var(--mk-on-accent)!important}

/* Celestial REAL-product card (ThemeOptions sliders: Featured / Latest / Best-sellers) */
.mk-pcard{display:flex;flex-direction:column;border-radius:var(--mk-rc);overflow:hidden}
.mk-pcard__img{position:relative;display:block;background:transparent;padding:0;aspect-ratio:1;overflow:hidden}
.mk-pcard__img img{width:100%;height:100%;object-fit:cover;display:block}
.mk-pcard__badge{position:absolute;top:12px;left:12px;background:var(--mk-accent);color:var(--mk-on-accent);font-size:11px;font-weight:800;letter-spacing:.04em;padding:4px 11px;border-radius:999px;text-transform:uppercase}
.mk-pcard__body{padding:16px;display:flex;flex-direction:column;gap:9px;flex:1}
.mk-pcard__stars{color:var(--mk-star);font-size:14px;letter-spacing:2px;line-height:1}
.mk-pcard__name{color:#fff;font-size:15px;font-weight:700;text-decoration:none;line-height:1.3;display:block}
.mk-pcard__name:hover{color:var(--mk-accent)}
.mk-pcard__price,.mk-pcard__price .price,.mk-pcard__price .price-wrapper,.mk-pcard__price .price-box{color:#fff!important;font-weight:800;font-size:18px}
.mk-pcard__form{width:100%;margin-top:auto}
.mk-pcard__atc{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--mk-accent)!important;color:var(--mk-on-accent)!important;border:0;border-radius:10px;padding:12px;font-size:14px;font-weight:800;cursor:pointer}
.mk-pcard__atc svg{width:16px;height:16px}

/* ====================== HOMEPAGE CELESTIAL TREATMENT ====================== */
body.cms-index-index{
  background:
    radial-gradient(1100px 640px at 85% -6%, rgba(20,184,166,.12), transparent 55%),
    radial-gradient(900px 560px at 3% 108%, rgba(139,92,246,.08), transparent 55%),
    #08070c;
  color:#e8ecf4;
}
body.cms-index-index a{text-decoration:none}
/* constellation canvas (injected at after.body.start) sits behind everything */
.mk-cst{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* lift the whole page above the fixed constellation canvas on EVERY page
   (Hyvä wrapper = .page-wrapper). Canvas is z-0/pointer-events:none, content z-1. */
.page-wrapper{position:relative;z-index:1}

/* header skin (Hyvä: <header class="page-header"> wraps the inner #header div carrying bg-white).
   !important beats Tailwind's bg-white / border-gray utility classes. */
#header{
  background:radial-gradient(1200px 460px at 85% -70%, color-mix(in srgb,var(--mk-accent) 14%,transparent), transparent 60%), #08070c !important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border-color:color-mix(in srgb,var(--mk-accent) 55%,transparent)!important;box-shadow:0 1px 16px -7px color-mix(in srgb,var(--mk-accent) 55%,transparent)!important;
}
#header a,
#header button{color:#e8ecf4!important}
#header a:hover{color:var(--mk-accent)!important}
#header svg{color:#e8ecf4}
/* Menu links GREEN by default (ID-level so it beats the generic #header a above). */
#header .mk-cfg-nav a,
#header .navigation a{color:var(--mk-accent)!important}
/* Sign-in (person) icon = NEUTRAL light when LOGGED OUT. Logged-in uses #customer-menu (mint,
   set up top). Was mint regardless — the green now signals "signed in", neutral signals "signed out". */
#header .mk-signin-icon,
#header .mk-signin-icon svg{color:#e8ecf4!important}
#header .mk-signin-icon:hover svg{color:var(--mk-accent)!important}
/* search dropdown / any white panel inside the header — stays opaque for readability */
#header .bg-white{background:rgba(10,8,18,.97)!important;border-color:var(--mk-line)!important}
/* the header BAR itself is fully transparent so the moving constellation shows through; keep
   only the bottom border. (bar = .mk-header; the search-results dropdown above stays opaque.) */
#header .mk-header.bg-white{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;border-bottom:1px solid var(--mk-line)!important}
/* Desktop only (>=1024px, above Hyvä's tablet header breakpoint): cap the header bar to
   a consistent content width on EVERY page (un-scoped from homepage) so the header +
   menu look identical site-wide. Never affects the tablet/mobile wrapped layout. */
@media (min-width:1024px){
  #header .container{max-width:1440px}
}
/* CONSISTENT 1440px CONTENT WIDTH ON EVERY PAGE — header, homepage, category, product,
   cart, account + footer all line up at 1440px. Hyvä's native .columns/.container otherwise
   step 1280px (80rem) -> 1536px (96rem); pin them to 1440px. Keeps Hyvä's full-width opt-outs. */
@media (min-width:1440px){
  :where(main:not(.product-main-full-width,.page-main-full-width)) .columns,
  :where(main:not(.product-main-full-width,.page-main-full-width)) .container,
  .page-wrapper > .breadcrumbs,.page-main > .page-title-wrapper{max-width:1440px!important;margin-inline:auto!important}
}

/* footer skin (Hyvä footer container = <div class="footer content">) */
.page-footer,.footer.content{background:transparent!important;color:rgba(255,255,255,.7)}
.footer.content .bg-gray-100,
.footer.content .bg-surface{background:transparent!important;border-color:var(--mk-line)!important}
.footer.content a{color:rgba(255,255,255,.7)}
.footer.content a:hover{color:var(--mk-accent)}
/* custom celestial footer (footer.phtml override): 4 columns, brand, copyright — no newsletter */
.mk-footer{background:transparent;border-top:1px solid rgba(20,184,166,.55);box-shadow:0 -1px 16px -7px rgba(20,184,166,.55);padding:54px 0 26px}
.mk-foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
.mk-foot-col h3{color:#14b8a6!important;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px}
.mk-foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:9px}
.mk-foot-col a{color:rgba(232,236,244,.66);font-size:14px;text-decoration:none;transition:color .15s}
.mk-foot-col a:hover{color:var(--mk-accent)}
.mk-foot-contact{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:36px;color:rgba(232,236,244,.66);font-size:14px}
.mk-foot-contact a{color:rgba(232,236,244,.66);text-decoration:none;transition:color .15s}
.mk-foot-contact a:hover{color:var(--mk-accent)}
.mk-foot-contact .sep{opacity:.35}
.mk-foot-social{display:flex;gap:10px;justify-content:center;margin:0}
.mk-foot-social a{min-width:36px;height:36px;padding:0 9px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid var(--mk-line);color:#e8ecf4;font-size:12px;font-weight:800;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.mk-foot-social a:hover{background:var(--mk-accent);color:var(--mk-on-accent);border-color:var(--mk-accent)}
.mk-foot-contact{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:24px;padding-top:18px;border-top:1px solid var(--mk-line)}
.mk-foot-contact a,.mk-foot-contact span{color:rgba(232,236,244,.7);font-size:13px;text-decoration:none}
.mk-foot-contact a:hover{color:var(--mk-accent)}
.mk-foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:36px;padding-top:20px;border-top:1px solid var(--mk-line)}
.mk-foot-bl{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* bottom row: [logo+name  •  copyright] grouped LEFT, social icons RIGHT */
.mk-foot-bl{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-width:0}
.mk-foot-brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:#fff;text-decoration:none;letter-spacing:-.01em}
.mk-foot-brand:hover{color:var(--mk-accent)}
.mk-foot-logo{width:28px;height:28px;border-radius:8px;background:#17191f;border:1px solid var(--mk-line);position:relative;flex:none;overflow:hidden}
.mk-foot-logo .sq{position:absolute;top:0;left:0;width:5px;height:5px;border-radius:2px;background:var(--mk-accent);box-shadow:0 0 6px var(--mk-accent);transform:translate(18px,5px);animation:mk-sq-glitch-f 4s steps(1,end) infinite}
@keyframes mk-sq-glitch-f{0%,86%,100%{transform:translate(18px,5px) scaleX(1);opacity:1}87%{transform:translate(15px,4px) scaleX(1.7);opacity:.55}89%{transform:translate(20px,7px) scaleX(1);opacity:1}90%{transform:translate(16px,3px) scaleX(.45);opacity:.3}92%{transform:translate(19px,6px) scaleX(1);opacity:1}93%{transform:translate(17px,5px) scaleX(2);opacity:.6}95%{transform:translate(19px,4px) scaleX(1);opacity:1}97%{transform:translate(18px,5px) scaleX(1);opacity:.85}}
.mk-foot-copy{color:rgba(232,236,244,.5);font-size:13px}
.mk-foot-bottom .mk-foot-social{margin-left:auto;justify-content:flex-end}
@media(max-width:760px){.mk-foot-cols{grid-template-columns:1fr 1fr}.mk-foot-bottom{flex-direction:column;align-items:flex-start}}

/* ====================== TOAST NOTIFICATIONS ======================
   Float the Hyvä `.page.messages` block as auto-dismissing toast cards (top-right).
   position:fixed removes it from page flow (no layout shift). Success toasts self-hide
   via window.defaultSuccessMessageTimeout (set in celestial.js); errors persist. */
.page.messages{position:fixed!important;top:88px!important;right:18px!important;left:auto!important;z-index:60!important;width:auto!important;max-width:92vw!important;margin:0!important;padding:0!important;pointer-events:none}
.page.messages #messages,.page.messages .messages,.page.messages .w-full{max-width:none!important;width:auto!important;margin:0!important;padding:0!important;background:transparent!important}
.page.messages .message{pointer-events:auto;position:relative;display:flex!important;align-items:center;gap:12px;width:360px;max-width:92vw;margin:0 0 10px auto!important;padding:14px 40px 14px 14px!important;background:#fff!important;color:#1b2733!important;border:0!important;border-radius:12px!important;box-shadow:0 14px 40px rgba(0,0,0,.4)!important;font-weight:600;font-size:14px;line-height:1.35;animation:mk-toast-in .25s cubic-bezier(.2,.8,.2,1)}
.page.messages .message a{color:#0b8f63!important;text-decoration:underline}
/* leading status chip: green check (success/default), red X (error/warning) */
.page.messages .message:before{content:'';flex:none;width:30px;height:30px;border-radius:9px;background:#10b981 center/18px 18px no-repeat;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")}
.page.messages .message.error:before,.page.messages .message.warning:before{background-color:#ef4444;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18M6 6l12 12'/></svg>")}
.page.messages .message > button{position:absolute!important;top:8px!important;right:8px!important;color:#9aa3b2!important;background:transparent!important;padding:2px!important}
.page.messages .message > button:hover{color:#1b2733!important}
@keyframes mk-toast-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@media(max-width:760px){.page.messages{top:72px!important;right:10px!important;left:10px!important}.page.messages .message{width:auto!important}}

/* ====================== CUSTOM HEADER (all pages) ======================
   Flex bar with wrap: desktop = [logo · search · actions] + nav on row 2;
   mobile = ONE row [hamburger · logo · search-icon · sign-in-icon · cart].
   .mk-header__menu uses display:contents so the topmenu's nav + hamburger
   become direct flex items orderable alongside logo/search/actions. */
.mk-header__bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:12px 0}
.mk-header__menu{display:contents}
/* announcement bar (config-driven via header.announce) */
.mk-announce{background:transparent;color:rgba(232,236,244,.85);font-size:12.5px;font-weight:600;text-align:center;padding:8px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
/* Sticky top band: frosted dark so page content scrolling under it is hidden (neat + tidy).
   A fully transparent sticky header lets the scrolling text/boxes show through — this blurs
   + darkens whatever is behind it while the glowing pills + amethyst border sit on top. */
.page-header{background:transparent!important}
/* logo + actions share equal flex so the 460px search sits dead-centre (matches configurator) */
.mk-header__logo{display:flex;align-items:center;order:1;flex:1 1 0;min-width:0}
.mk-header__search{order:2;flex:0 1 460px;display:flex;align-items:center;width:100%;max-width:460px;margin:0;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:10px;overflow:hidden}
.mk-header__search:focus-within{border-color:#14b88a;box-shadow:0 0 0 3px rgba(20,184,166,.15)}
.mk-header__search-btn{flex:none;display:flex;align-items:center;justify-content:center;padding:10px 12px;background:none;border:0;color:rgba(255,255,255,.6);cursor:pointer}
.mk-header__search-btn svg{width:18px;height:18px}
.mk-header__search-input{flex:1;min-width:0;outline:none!important;padding:10px 12px 10px 0;font-size:13.5px;color:#fff;
  background:transparent!important;border:0!important;box-shadow:none!important;-webkit-appearance:none;appearance:none;border-radius:0}
.mk-header__search-input::placeholder{color:rgba(255,255,255,.6)}
.mk-header__search-input::-webkit-search-cancel-button{-webkit-appearance:none}
.mk-header__actions{order:3;display:flex;align-items:center;gap:12px;flex:1 1 0;justify-content:flex-end}
.mk-signin-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;color:#e8ecf4}
.mk-signin-icon svg{width:22px;height:22px}
/* desktop nav (Hyvä .navigation) wraps to a full-width centered second row */
.mk-header__bar .navigation{order:4;flex-basis:100%}
@media(min-width:1024px){
  .mk-header__bar .navigation{display:flex!important;justify-content:center;border-top:1px solid var(--mk-line);padding-top:6px;margin-top:2px}
  .mk-header__bar .navigation>.hidden{display:block!important}
  .mk-header__bar [x-data="initMobileMenu"]{display:none!important}
}
@media(max-width:1023px){
  .mk-header__bar .navigation{display:none!important}
  .mk-header__bar [x-data="initMobileMenu"]{display:block!important;order:0;flex:none}
}
@media(max-width:760px){
  .mk-header__bar{flex-wrap:nowrap;gap:10px;position:relative}
  .mk-header__logo{flex:1 1 auto;min-width:0;order:1}
  .mk-header__search{order:2;flex:0 0 auto;width:auto;max-width:none;margin:0;background:transparent;border-color:transparent}
  .mk-header__search:not(.mk-search--open) .mk-header__search-input{display:none}
  .mk-search--open{position:absolute;left:10px;right:10px;top:60px;width:auto;max-width:none;background:#14161b;border-color:var(--mk-line)!important;z-index:40}
  .mk-header__actions{order:3;gap:8px;flex:0 0 auto}
  .mk-signin-icon{width:34px;height:34px}
}
/* Tablet (761–1023px): burger shows but the search is still a bar. The logo was flex:1 1 0/min-width:0
   so it shrank below the "ModKor" wordmark and overflowed into the search. Pin logo + actions to their
   content width, let the search fill the gap between them, keep it on one row. */
@media(min-width:761px) and (max-width:1023px){
  .mk-header__bar{flex-wrap:nowrap}
  .mk-header__logo{flex:0 0 auto}
  .mk-header__actions{flex:0 0 auto}
  .mk-header__search{flex:1 1 auto;max-width:none;min-width:0}
}

/* sticky header (configurator toggle). Stick the OUTER <header class="page-header"> —
   sticking the inner #header fails because its parent is only header-height (no scroll room). */
.page-header:has(.mk-header.mk-sticky){position:sticky;top:0;z-index:50}
/* configurator theme-nav (shares .navigation desktop row-2 styling; custom mobile drawer) */
.mk-cfg-burger{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:4px;order:0}
.mk-cfg-burger span{width:22px;height:2px;background:#e8ecf4;border-radius:2px}
.mk-cfg-nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
/* Default green for BOTH the configurator nav AND the Hyvä topmenu fallback (whichever renders).
   !important + high specificity beat the parent Hyvä build's .navigation link styles. */
.mk-header__bar .mk-cfg-nav a,
.mk-header__bar .navigation a{position:relative;padding:8px 6px;margin:0 8px;font-weight:700;font-size:14px;color:var(--mk-accent)!important;text-decoration:none!important;transition:text-shadow .2s ease}
/* neon underline that slides in on hover — content/transform forced past any parent ::after reset */
.mk-header__bar .mk-cfg-nav a::after,
.mk-header__bar .navigation a::after{content:''!important;display:block!important;position:absolute;left:6px;right:6px;bottom:2px;height:2px;border-radius:2px;background:var(--mk-accent);box-shadow:0 0 8px var(--mk-accent),0 0 16px var(--mk-accent);transform:scaleX(0);transform-origin:center;transition:transform .22s ease;pointer-events:none}
.mk-header__bar .mk-cfg-nav a:hover,
.mk-header__bar .navigation a:hover{text-shadow:0 0 9px rgba(20,184,166,.55);color:var(--mk-accent)!important}
.mk-header__bar .mk-cfg-nav a:hover::after,
.mk-header__bar .navigation a:hover::after{transform:scaleX(1)!important}
@media(max-width:1023px){
  .mk-cfg-burger{display:flex}
  .mk-header__bar{position:relative}
  /* open menu = a real full-width dropdown below the header bar (dark, elevated) so it's always visible */
  .mk-cfg-nav{display:none!important;position:absolute;top:100%;left:0;right:0;flex-direction:column;width:100%;padding:10px 0;gap:2px;text-align:center;background:rgba(10,16,30,.98);border-top:1px solid var(--mk-line);box-shadow:0 16px 36px rgba(0,0,0,.45);z-index:120}
  /* must out-specify `.mk-header__bar .navigation{display:none!important}` (0,2,0) from the ≤760px
     block — the nav carries the `navigation` class, so the plain `.mk-cfg-nav--open` (0,1,0) lost
     on phones and the dropdown stayed hidden ("nothing happens"). */
  .mk-header__bar .navigation.mk-cfg-nav--open,.mk-header__bar .mk-cfg-nav--open{display:flex!important}
  .mk-cfg-nav a{display:block;padding:12px 16px!important;margin:0!important}
}

/* ===== Footer: force the real Hyvä column layout (build-independent) ===== */
@media(min-width:768px){
  /* footer.phtml row + the static-links inner flex: lay children out in a row */
  .footer.content .flex.flex-wrap{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:3rem!important;align-items:flex-start}
  .footer.content .flex.flex-wrap>*{flex:1 1 240px!important;width:auto!important;min-width:200px;max-width:100%}
  /* COMPANY + LEGAL grid -> two columns */
  .footer.content .grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:2.5rem!important}
}

/* ====================== REUSABLE MK COMPONENTS (homepage content) ====================== */
.mk-wrap{max-width:1440px;margin:0 auto;padding:0 24px}
.mk-glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.mk-accent{color:var(--mk-accent)}

/* hero */
.mk-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:46px 0 26px;min-height:520px}
.mk-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 13px;font-size:12px;font-weight:700;color:#fff}
.mk-badge .d{width:7px;height:7px;border-radius:50%;background:var(--mk-accent);box-shadow:0 0 7px var(--mk-accent)}
.mk-hero h1{font-size:48px;line-height:1.05;font-weight:800;letter-spacing:-.03em;margin:16px 0 0;color:#fff}
.mk-hero h1 em{font-style:normal;color:var(--mk-accent);text-shadow:0 0 18px rgba(20,184,166,.45)}
.mk-hero p{color:rgba(232,236,244,.72);font-size:17px;margin-top:16px;max-width:480px}
/* rotating hero slides: fade/slide transition between the 7 banners (JS-driven) */
.mk-hero__text{transition:opacity .38s ease,transform .38s ease}
.mk-hero__text.mk-hero-out{opacity:0;transform:translateY(10px)}
.mk-hero__text.mk-hero-in{animation:mk-hero-in .55s ease}
@keyframes mk-hero-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
/* slide dots */
.mk-hero__nav{display:flex;align-items:center;gap:14px;margin-top:22px}
/* flex + line-height:0 optically centres the ‹ › glyph in the circle (grid/place-items left it high) */
.mk-hero__arrow{width:40px;height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--mk-line);color:var(--mk-accent);font-size:22px;line-height:0;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .12s}
.mk-hero__arrow:hover{background:var(--mk-accent);color:var(--mk-on-accent);border-color:var(--mk-accent);transform:translateY(-1px);box-shadow:0 8px 20px rgba(20,184,166,.3)}
.mk-hero__dots{display:flex;align-items:center;gap:7px;min-height:40px}
/* 24x24 tap target (a11y/touch-target audit) with the visible dot drawn via ::before */
.mk-hero__dots button{position:relative;width:24px;height:24px;min-width:24px;padding:0;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.mk-hero__dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .2s,width .2s}
.mk-hero__dots button.active::before{width:22px;border-radius:5px;background:var(--mk-accent);box-shadow:0 0 8px var(--mk-accent)}
.mk-cta{margin-top:24px;display:flex;gap:11px;flex-wrap:wrap}
.mk-btn{border-radius:var(--mk-rb);padding:12px 20px;font-weight:700;font-size:14px;display:inline-block;border:1px solid transparent;cursor:pointer}
.mk-btn--p{background:var(--mk-accent);color:var(--mk-on-accent)}
.mk-btn--s{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
.mk-mock{border-radius:16px;padding:16px}
.mk-mock .bar{display:flex;gap:6px;margin-bottom:12px}
.mk-mock .bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.3)}
/* Hero showcase: cards are grid-stacked in one cell so they crossfade in the same
   spot (sized to the tallest card) and rotate one at a time — not piled vertically. */
.mk-mock__stage{display:grid}
.mk-mock__stage > .mk-mock-card{grid-area:1/1;opacity:0;transition:opacity .5s ease;pointer-events:none}
.mk-mock__stage > .mk-mock-card.mk-card-active{opacity:1;pointer-events:auto}
.mk-gauge{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.06);border-radius:12px;padding:15px;margin-bottom:9px}
.mk-gauge .ring{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--mk-accent)}
.mk-gauge .ring b{width:36px;height:36px;border-radius:50%;background:#17191f;display:grid;place-items:center;font-size:13px}
.mk-chk{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border-radius:10px;padding:11px 13px;font-size:13px;font-weight:600;color:#fff;margin-top:8px}
.mk-chk svg{width:17px;height:17px;color:var(--mk-accent);flex:none}

/* powered-by / trust band (typing handled by JS) */
.mk-trust{border-top:1px solid var(--mk-line);border-bottom:1px solid var(--mk-line)}
.mk-trust .row{display:flex;justify-content:center;align-items:center;min-height:26px;padding:20px 0}
.mk-rmsg{text-align:center;color:rgba(255,255,255,.66);font-weight:600;font-size:16px}
.mk-rmsg b{color:var(--mk-accent);font-weight:700}
.mk-caret{display:inline-block;width:2px;height:1.05em;background:var(--mk-accent);vertical-align:-2px;margin:0 1px;box-shadow:0 0 6px var(--mk-accent);animation:mk-blink 1s steps(1) infinite}
/* "powered by" band transition effects (fade / slide) */
.mk-rmsg.mk-fx-fade.mk-fx-in{animation:mk-fade-in .4s ease forwards}
.mk-rmsg.mk-fx-fade.mk-fx-out{animation:mk-fade-out .35s ease forwards}
.mk-rmsg.mk-fx-slide.mk-fx-in{animation:mk-slide-in .45s ease forwards}
.mk-rmsg.mk-fx-slide.mk-fx-out{animation:mk-slide-out .35s ease forwards}
@keyframes mk-fade-in{from{opacity:0}to{opacity:1}}
@keyframes mk-fade-out{from{opacity:1}to{opacity:0}}
@keyframes mk-slide-in{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:none}}
@keyframes mk-slide-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-11px)}}
@keyframes mk-blink{50%{opacity:0}}

/* sections */
.mk-sec{padding:34px 0}
.mk-sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mk-sh h2{font-size:24px;font-weight:800;letter-spacing:-.02em;color:#fff}
.mk-sh a{font-size:13px;color:rgba(255,255,255,.7);font-weight:600}

/* category tiles */
.mk-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mk-cat{position:relative;overflow:hidden;border-radius:var(--mk-rc);padding:20px 16px;display:flex;flex-direction:column;gap:10px;min-height:96px;font-weight:700;color:#fff;background-size:cover;background-position:center}
/* "Shop →" inherits the tile's text colour (the per-tile `tc` colour from the configurator),
   so changing a tile's text colour recolours its Shop label too. */
.mk-cat small{color:inherit;opacity:.78;font-weight:600;margin-top:auto}

/* product / module tiles with 3D tilt */
/* one-row horizontal product slider — N visible (configurable per breakpoint), rest slide in.
   --mk-cols is driven by --mk-cols-desktop/tablet/mobile (defaults 4/3/2) which the
   configurator can override live via css-variables.phtml. */
.mk-prods{--mk-cols:var(--mk-cols-desktop,4);--mk-gap:16px;display:flex;gap:var(--mk-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.mk-prods>*{scroll-snap-align:start;flex:0 0 calc((100% - (var(--mk-cols) - 1) * var(--mk-gap)) / var(--mk-cols));min-width:calc((100% - (var(--mk-cols) - 1) * var(--mk-gap)) / var(--mk-cols))}
.mk-prods::-webkit-scrollbar{height:8px}
.mk-prods::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:4px}
.mk-prods::-webkit-scrollbar-track{background:transparent}
/* slider arrows (sit in the section header next to "All") */
.mk-sh__r{display:flex;align-items:center;gap:14px}
.mk-slider-nav{display:flex;gap:6px}
.mk-sld-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#e8ecf4;font-size:18px;line-height:1;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.mk-sld-btn:hover{background:var(--mk-accent);color:var(--mk-on-accent);border-color:var(--mk-accent)}
.mk-card{border-radius:var(--mk-rc);overflow:hidden;transition:transform .12s ease;transform-style:preserve-3d;will-change:transform}
.mk-card .ph{height:260px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px;letter-spacing:.02em}
.mk-card .meta{padding:12px 13px}
.mk-card .nm{font-size:13.5px;font-weight:700;color:#fff}
.mk-card .pr{display:flex;align-items:center;justify-content:space-between;margin-top:9px}
.mk-card .pr b{color:#fff;font-size:15px}
.mk-card .atc{background:var(--mk-accent);color:var(--mk-on-accent);border:0;border-radius:8px;padding:7px 10px;font-size:12px;font-weight:800;cursor:pointer}

/* banners */
.mk-banners{display:grid;gap:14px}
.mk-bx{position:relative;border-radius:var(--mk-rc);padding:26px;min-height:180px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background-size:cover;background-position:center}
.mk-bx h3{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.01em}
.mk-bx p{color:rgba(255,255,255,.82);font-size:14px;margin-top:7px;max-width:380px}
.mk-bx .bbtn{align-self:flex-start;margin-top:14px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:700;font-size:13px;padding:9px 15px;border-radius:var(--mk-rb)}
/* per-banner hover effects — chosen in the configurator. Each is visually distinct:
   ZOOM = magnify the bg image inside the fixed frame (box/button stay); LIFT = the whole box
   rises with a shadow; GLOW = a mint ring + glow, no movement. transform/box-shadow only. */
.mk-bx.mk-fx-zoom,.mk-bx.mk-fx-lift,.mk-bx.mk-fx-glow,.mk-cat.mk-fx-zoom,.mk-cat.mk-fx-lift,.mk-cat.mk-fx-glow{transition:transform .3s ease,box-shadow .28s ease}
/* ZOOM = the whole tile grows in place (always visible, image or not); the inner ::before bg
   scales with it so any image magnifies too. LIFT = rises. GLOW = mint ring. */
.mk-bx.mk-fx-zoom:hover,.mk-cat.mk-fx-zoom:hover{transform:scale(1.05)}
.mk-bx.mk-fx-lift:hover,.mk-cat.mk-fx-lift:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(0,0,0,.42)}
.mk-bx.mk-fx-glow:hover,.mk-cat.mk-fx-glow:hover{box-shadow:0 0 0 2px var(--mk-accent),0 0 30px rgba(20,184,166,.45)}
@media(prefers-reduced-motion:reduce){
  .mk-bx[class*=mk-fx-],.mk-cat[class*=mk-fx-]{transition:none}
  .mk-bx.mk-fx-zoom:hover,.mk-cat.mk-fx-zoom:hover,.mk-bx.mk-fx-lift:hover,.mk-cat.mk-fx-lift:hover{transform:none}
}

/* subscribe section */
.mk-sub{text-align:center;padding:42px 26px;border-radius:var(--mk-rc)}
.mk-sub h2{font-size:26px;font-weight:800;color:#fff;letter-spacing:-.02em}
.mk-sub p{color:rgba(232,236,244,.7);font-size:15px;margin-top:8px}
.mk-sub-form{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.mk-sub-form input{flex:1;max-width:380px;min-width:220px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:12px 14px;color:#fff;font-size:14px;outline:none}
.mk-sub-form input::placeholder{color:rgba(255,255,255,.5)}
.mk-sub-form input:focus{border-color:var(--mk-accent)}
.mk-sub-form .mk-btn{border:0;cursor:pointer}

/* ---- product detail tabs (Product Page configurator) ---- */
.mk-pdp-tabs{margin-top:28px}
.mk-pdp-tabs__bar{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;border-bottom:1px solid var(--mk-line,rgba(255,255,255,.1));scrollbar-width:none;-ms-overflow-style:none}
.mk-pdp-tabs__bar::-webkit-scrollbar{display:none}
.mk-pdp-tab{position:relative;flex:0 0 auto;background:transparent;border:0;cursor:pointer;padding:14px 20px;font-size:15px;font-weight:700;color:rgba(232,236,244,.6);white-space:nowrap;transition:color .15s}
.mk-pdp-tab:hover{color:var(--mk-text,#e8ecf4)}
.mk-pdp-tab::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--mk-accent,#0f766e);transform:scaleX(0);transform-origin:center;transition:transform .18s}
.mk-pdp-tab--active{color:#fff}
.mk-pdp-tab--active::after{transform:scaleX(1)}
.mk-pdp-panel{padding-top:22px}
.mk-pdp-panel__inner{background:var(--mk-surface,#17191f);border:1px solid var(--mk-line,rgba(255,255,255,.1));border-radius:14px;padding:24px;color:var(--mk-text,#e8ecf4)}
.mk-pdp-panel__inner :where(h1,h2,h3,h4,strong){color:#fff}
.mk-pdp-panel__inner a:not(.action):not([class*="btn"]){color:var(--mk-accent,#0f766e)}
.mk-pdp-richtext{line-height:1.65}
.mk-pdp-richtext ul{list-style:disc;padding-left:1.3em;margin:.6em 0}
.mk-pdp-empty{color:rgba(232,236,244,.6);font-style:italic;margin:0}

/* ---- product info-column conversion cards ---- */
.mk-pdp-cards{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.mk-pdp-card{background:var(--mk-surface,#17191f);border:1px solid var(--mk-line,rgba(255,255,255,.1));border-radius:14px;padding:18px 20px;color:var(--mk-text,#e8ecf4);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;transform-style:preserve-3d}
.mk-pdp-card__title{font-weight:800;color:#fff;font-size:15px;margin-bottom:10px}
.mk-pdp-card__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.mk-pdp-card__list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.4}
.mk-pdp-card__tick{width:18px;height:18px;flex:none;color:var(--mk-accent,#0f766e);margin-top:1px}
.mk-pdp-card__note{margin-top:12px;padding-top:12px;border-top:1px solid var(--mk-line,rgba(255,255,255,.1));font-size:12.5px;color:var(--mk-dim,rgba(232,236,244,.62))}
.mk-pdp-trust{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mk-pdp-trust__item{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600}
.mk-pdp-trust__ic{display:flex;width:34px;height:34px;flex:none;align-items:center;justify-content:center;border-radius:9px;background:rgba(20,184,166,.12);color:var(--mk-accent,#0f766e)}
.mk-pdp-trust__ic svg{width:18px;height:18px}
.mk-pdp-card__html{font-size:14px;line-height:1.6}
.mk-pdp-card__html a{color:var(--mk-accent,#0f766e)}
.mk-pdp-card.mk-fx-lift:hover{transform:translateY(-4px)}
.mk-pdp-card.mk-fx-glow:hover{border-color:var(--mk-accent,#0f766e);box-shadow:0 0 0 1px var(--mk-accent,#0f766e),0 12px 40px rgba(20,184,166,.18)}
.mk-pdp-card.mk-fx-zoom:hover{transform:scale(1.02)}
@media (prefers-reduced-motion:reduce){.mk-pdp-card{transition:none}.mk-pdp-card.mk-fx-lift:hover,.mk-pdp-card.mk-fx-zoom:hover{transform:none}}

/* ---- info-column block cards (Builder B) ---- */
.mk-pdp-info{display:flex;flex-direction:column;gap:16px}
.mk-info-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;transform-style:preserve-3d}
.mk-info-card .mk-info-seg+.mk-info-seg{margin-top:14px}
/* readable text on the dark info cards (Hyvä child blocks ship Tailwind gray + .prose colours) */
.mk-pdp-info,.mk-info-card{color:var(--mk-text,#e8ecf4)}
.mk-info-card :is(.prose,.prose *,.product-description,.product-description *){color:var(--mk-text,#e8ecf4)!important}
.mk-info-card :is(.text-gray-900,.text-gray-800,.text-gray-700,.text-gray-600,.text-black){color:var(--mk-text,#e8ecf4)!important}
.mk-info-card :is(.text-gray-500,.text-gray-400,.product-detail-label,dt){color:var(--mk-dim,rgba(232,236,244,.66))!important}
.mk-info-card :is(.border-gray-300,.border-gray-200,.border-t,.border-b){border-color:var(--mk-line,rgba(255,255,255,.12))!important}
.mk-info-card a:not([class*="btn"]):not(.action){color:var(--mk-accent,#0f766e)!important}
.mk-info-seg--price [class*="price"],.mk-info-seg--price .price{color:#fff!important}
/* belt-and-suspenders: readable product-view text regardless of card structure — Hyvä ships
   Tailwind gray + .prose colours that out-specify the container colour on the dark theme. */
.catalog-product-view .column.main .product-description,.catalog-product-view .column.main .product-description *,
.catalog-product-view .column.main .prose,.catalog-product-view .column.main .prose *{color:var(--mk-text,#e8ecf4)!important}
.catalog-product-view .column.main :is(.text-gray-900,.text-gray-800,.text-gray-700,.text-gray-600,.text-black){color:var(--mk-text,#e8ecf4)!important}
.catalog-product-view .column.main :is(.text-gray-500,.text-gray-400),.catalog-product-view .product-detail-label{color:var(--mk-dim,rgba(232,236,244,.72))!important}
.catalog-product-view #product-details dt,.catalog-product-view #product-details dd,.catalog-product-view .product-detail-value,
.catalog-product-view .product.attribute.sku,.catalog-product-view .product.attribute.sku *{color:var(--mk-text,#e8ecf4)!important}
/* configurable product-image / thumbnail corner radius (Media → image corners) */
.catalog-product-view #gallery-main{border-radius:var(--mk-pdp-img-radius,14px);overflow:hidden}
.catalog-product-view #gallery-main img{border-radius:var(--mk-pdp-img-radius,14px)}
.catalog-product-view #thumbs .js_thumbs_slide,.catalog-product-view #thumbs .js_thumbs_slide img{border-radius:calc(var(--mk-pdp-img-radius,14px) * .62);overflow:hidden}
/* the actual thumb is a <button class="border border-gray-300"> — that square border + dark fill = the black corners. Round the button, fill the image, and make hover/active a ROUNDED mint glow (no square edges). */
.catalog-product-view #thumbs .js_thumbs_slide button{position:relative;display:block;border:1px solid var(--mk-line)!important;border-radius:calc(var(--mk-pdp-img-radius,14px)*.62)!important;overflow:hidden!important;background:transparent!important;transition:box-shadow .2s,border-color .2s}
.catalog-product-view #thumbs .js_thumbs_slide button img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;border-radius:inherit!important}
.catalog-product-view #thumbs .js_thumbs_slide button:hover,.catalog-product-view #thumbs .js_thumbs_slide button:focus,.catalog-product-view #thumbs .js_thumbs_slide button.border-primary{border-color:var(--mk-accent)!important;box-shadow:0 0 0 3px var(--mk-accent),0 0 26px rgba(20,184,166,.85)!important;outline:none!important}
/* active thumbnail keeps a clearly-visible mint ring even without hover */
.catalog-product-view #thumbs .js_thumbs_slide button.border-primary{border-width:2px!important}
/* qty stepper -> mint accent (product + cart) */
.catalog-product-view input[type=number],.checkout-cart-index input[type=number],.checkout-cart-index .qty input,.cart.item input.qty,.product-info-main .qty input{accent-color:var(--mk-accent)!important}
/* category / search wishlist + compare icons -> mint */
/* category/search wishlist + compare -> mint. REAL Hyvä markup: button[data-addto] > lucide svg(stroke=currentColor) */
[data-addto="wishlist"],[data-addto="compare"]{color:var(--mk-accent)!important}
[data-addto="wishlist"] svg,[data-addto="compare"] svg{color:var(--mk-accent)!important;stroke:currentColor!important}
/* remove cart icon, keep "Add to Cart" text. REAL markup: button[data-addto="cart"] > svg; PDP = #product-addtocart-button */
[data-addto="cart"] svg,#product-addtocart-button svg,.mk-pcard__atc svg{display:none!important}
/* ===== COMPARE PAGE action buttons + centering ===== */
/* On the compare page the Add-to-Cart button is ICON-ONLY (its label is sr-only), so the global
   "hide cart icon" rule above collapsed it into a tiny green dot. Re-show the icon here only. */
[class*="product_compare"] .column.main [data-addto="cart"] svg{display:inline-flex!important}
[class*="product_compare"] .column.main [data-addto="cart"]{align-items:center!important;justify-content:center!important}
/* The wishlist heart + the remove X share .btn p-2; the X has no data-addto so it stayed dark.
   Make every non-primary action button here a mint icon button (cart keeps its solid btn-primary). */
[class*="product_compare"] .column.main td button:not(.btn-primary){color:var(--mk-accent)!important;background:rgba(20,184,166,.08)!important;border:1px solid var(--mk-line)!important}
[class*="product_compare"] .column.main td button:not(.btn-primary) svg{color:var(--mk-accent)!important;stroke:currentColor!important;display:inline-flex!important}
[class*="product_compare"] .column.main td button:not(.btn-primary):hover{border-color:var(--mk-accent)!important;background:rgba(20,184,166,.18)!important}
/* center the whole comparison page content */
[class*="product_compare"] .column.main{max-width:1080px!important;margin-left:auto!important;margin-right:auto!important}
/* ModKor wordmark -> mint */
.mk-logo-text{color:var(--mk-accent)!important}
/* category/search product CARD: the white was Hyvä's .card (white bg + padding) showing around the image — NOT the image (verified: image corner pixel is mint gradient). Darken the card + flush the image full-bleed at the top, matching the homepage cards. */
.catalog-category-view .product-item.card,.catalogsearch-result-index .product-item.card,.products-grid .product-item.card,.product-items .product-item.card{background:var(--mk-surface)!important;border:1px solid var(--mk-line)!important;border-radius:16px!important;padding:0!important;overflow:hidden!important}
.catalog-category-view .product-item .product-info,.catalogsearch-result-index .product-item .product-info,.products-grid .product-item .product-info,.product-items .product-item .product-info{padding:0 14px 14px!important}
.catalog-category-view .product-item-photo,.catalogsearch-result-index .product-item-photo,.products-grid .product-item-photo,.product-items .product-item-photo{display:block!important;margin:0 0 12px!important;aspect-ratio:1/1!important;overflow:hidden!important;border-radius:0!important;background:transparent!important;padding:0!important}
.product-image-photo{background:transparent!important}
.catalog-category-view .product-item-photo img,.catalogsearch-result-index .product-item-photo img,.products-grid .product-item-photo img,.product-items .product-item-photo img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;background:transparent!important}
/* minicart drawer: REAL container is id="cart-drawer" (not a class). Thumbnail <img> has NO class -> round it via the container. Edit/delete are <button> with lucide svg -> mint. */
#cart-drawer{max-width:400px!important;width:100%!important}
#cart-drawer img{border-radius:10px!important;overflow:hidden!important}
#cart-drawer button svg{stroke:var(--mk-accent)!important;color:var(--mk-accent)!important}
/* cart page: each line item a card, rounded thumb, mint edit/delete. REAL markup: article.cart.item > .product-item-photo + .item-actions */
.checkout-cart-index .cart.item{background:var(--mk-surface)!important;border:1px solid var(--mk-line)!important;border-radius:14px!important;padding:14px!important;margin-bottom:14px!important}
.checkout-cart-index .cart.item .product-item-photo img{border-radius:12px!important;overflow:hidden}
.checkout-cart-index button[data-delete-post-json],.checkout-cart-index a.btn[href*="cart/configure"],.checkout-cart-index .item-actions .btn,.checkout-cart-index .item-actions a,.checkout-cart-index .item-actions button{color:var(--mk-accent)!important}
.checkout-cart-index button[data-delete-post-json] svg,.checkout-cart-index a.btn[href*="cart/configure"] svg,.checkout-cart-index .item-actions .btn svg,.checkout-cart-index .item-actions svg{stroke:var(--mk-accent)!important;color:var(--mk-accent)!important}
/* auth/account pages: keep body text readable on the dark theme (Hyvä text defaults assume a light theme; the forgot-password note is a bare fieldset with no colour class) */
[class*="customer-account"] .column.main,[class*="customer-account"] .card,[class*="customer-account"] .card fieldset,.account .column.main{color:#c7d2e0!important}
/* mint +/- qty stepper (celestial.js wraps the qty input; native spinner arrows hidden because CSS can't recolour them) */
.mk-qty{display:inline-flex;align-items:stretch;height:42px;border:1px solid var(--mk-line);border-radius:10px;overflow:hidden;background:var(--mk-surface)}
.mk-qty__btn{width:36px;border:0;background:transparent;color:var(--mk-accent);font-size:20px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.mk-qty__btn:hover{background:rgba(20,184,166,.14)}
.mk-qty__btn:active{background:rgba(20,184,166,.24)}
.mk-qty__input{width:48px;text-align:center;border:0;border-left:1px solid var(--mk-line);border-right:1px solid var(--mk-line);background:transparent;color:#fff;font-weight:600;-moz-appearance:textfield!important;appearance:textfield!important}
.mk-qty__input:focus{outline:none}
.mk-qty__input::-webkit-outer-spin-button,.mk-qty__input::-webkit-inner-spin-button{-webkit-appearance:none!important;appearance:none!important;margin:0!important}
/* bulletproof: hide native number-spinner on EVERY qty input (product + cart), independent of the JS wrapper class */
.catalog-product-view input[type=number]::-webkit-inner-spin-button,.catalog-product-view input[type=number]::-webkit-outer-spin-button,.checkout-cart-index input[type=number]::-webkit-inner-spin-button,.checkout-cart-index input[type=number]::-webkit-outer-spin-button,input.qty::-webkit-inner-spin-button,input.qty::-webkit-outer-spin-button,input[data-role="cart-item-qty"]::-webkit-inner-spin-button,input[data-role="cart-item-qty"]::-webkit-outer-spin-button{-webkit-appearance:none!important;appearance:none!important;margin:0!important}
.catalog-product-view input[type=number],.checkout-cart-index input[type=number],input.qty,input[data-role="cart-item-qty"]{-moz-appearance:textfield!important;appearance:textfield!important}
/* MOBILE: 5px page gutters so cards/content reach the screen edges (header bar = .mk-header__bar.container.px-6; content = .container) */
@media (max-width:767px){
  .mk-header__bar,.breadcrumbs,#maincontent,.page-main,.columns,.column.main{padding-left:5px!important;padding-right:5px!important}
  .container{max-width:100%!important;padding-left:5px!important;padding-right:5px!important}
}
.mk-info-card.mk-fx-lift:hover{transform:translateY(-4px)}
.mk-info-card.mk-fx-glow:hover{border-color:var(--mk-accent,#0f766e);box-shadow:0 0 0 1px var(--mk-accent,#0f766e),0 12px 40px rgba(20,184,166,.18)}
.mk-info-card.mk-fx-zoom:hover{transform:scale(1.01)}
@media (min-width:1024px){.mk-pdp-info--sticky{position:sticky;top:90px;align-self:flex-start}}
@media (prefers-reduced-motion:reduce){.mk-info-card{transition:none}.mk-info-card.mk-fx-lift:hover,.mk-info-card.mk-fx-zoom:hover{transform:none}}

/* gradient palette helpers */
.mk-g1{background:linear-gradient(135deg,#0f766e,#0ea5e9)}
.mk-g2{background:linear-gradient(135deg,#a855f7,#6366f1)}
.mk-g3{background:linear-gradient(135deg,#fb7185,#f59e0b)}
.mk-g4{background:linear-gradient(135deg,#22d3ee,#2dd4bf)}
.mk-g5{background:linear-gradient(135deg,#34d399,#14b8a6)}
.mk-g6{background:linear-gradient(135deg,#f472b6,#a855f7)}
.mk-g7{background:linear-gradient(135deg,#facc15,#f97316)}
.mk-g8{background:linear-gradient(135deg,#60a5fa,#818cf8)}
.mk-g9{background:linear-gradient(135deg,#f43f5e,#ec4899)}
.mk-g10{background:linear-gradient(135deg,#10b981,#84cc16)}
.mk-g11{background:linear-gradient(135deg,#06b6d4,#0ea5e9)}
.mk-g12{background:linear-gradient(135deg,#8b5cf6,#d946ef)}
.mk-g13{background:linear-gradient(135deg,#ef4444,#f97316)}
.mk-g14{background:linear-gradient(135deg,#0ea5e9,#6366f1)}
.mk-g15{background:linear-gradient(135deg,#14b8a6,#0ea5e9)}
.mk-g16{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.mk-g17{background:linear-gradient(135deg,#ec4899,#8b5cf6)}
.mk-g18{background:linear-gradient(135deg,#84cc16,#22c55e)}
.mk-g19{background:linear-gradient(135deg,#2dd4bf,#14b8a6)}
.mk-g20{background:linear-gradient(135deg,#d946ef,#a855f7)}
.mk-g21{background:linear-gradient(135deg,#f97316,#fb923c)}
.mk-g22{background:linear-gradient(135deg,#06b6d4,#2dd4bf)}
.mk-g23{background:linear-gradient(135deg,#22c55e,#16a34a)}
.mk-g24{background:linear-gradient(135deg,#64748b,#334155)}

/* animated glitch logo (JS toggles --x/--y corners) */
.mk-logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.mk-logo-text{font-weight:800;font-size:27px;letter-spacing:-.01em;color:inherit;line-height:34px}
/* uploaded header logo image (configurator "Image only" / image override) */
.mk-logo-img{height:54px;width:auto;max-width:320px;display:block;object-fit:contain}
/* logo mark at original 34px box, with the smaller 5px dot */
.mk-logo-box{position:relative;width:34px;height:34px;border-radius:9px;background:#17191f;border:1px solid rgba(255,255,255,.12);overflow:hidden;flex:none}
.mk-logo-box .sq{position:absolute;top:0;left:0;width:5px;height:5px;border-radius:2px;background:var(--mk-accent);box-shadow:0 0 6px var(--mk-accent);
  transform:translate(23px,6px);animation:mk-sq-glitch 4s steps(1,end) infinite}
/* GLITCH logo: dot sits steady top-right, then DIGITALLY GLITCHES once every ~4s (rapid jitter +
   horizontal tear + flicker) — NOT an on/off blink. transform+opacity only = GPU-composited. */
@keyframes mk-sq-glitch{
  0%,86%,100%{transform:translate(23px,6px) scaleX(1);opacity:1}
  87%{transform:translate(20px,5px) scaleX(1.7);opacity:.55}
  89%{transform:translate(26px,8px) scaleX(1);opacity:1}
  90%{transform:translate(21px,4px) scaleX(.45);opacity:.3}
  92%{transform:translate(25px,7px) scaleX(1);opacity:1}
  93%{transform:translate(22px,6px) scaleX(2.1);opacity:.6}
  95%{transform:translate(24px,5px) scaleX(1);opacity:1}
  97%{transform:translate(23px,6px) scaleX(1);opacity:.85}
}
@keyframes mk-sq-blink{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.mk-logo-box .sq{animation:none;transform:translate(6px,6px)}}

/* responsive */
/* tablet: default 3 products/row (configurable via --mk-cols-tablet) */
@media(max-width:1100px){
  .mk-prods{--mk-cols:var(--mk-cols-tablet,3)}
}
@media(max-width:900px){
  .mk-hero{grid-template-columns:1fr;min-height:auto}
  .mk-hero h1{font-size:34px}
  .mk-cats{grid-template-columns:1fr 1fr}
  .mk-banners[data-boxes]{grid-template-columns:1fr !important}
}
/* phone: default 2 products/row (configurable via --mk-cols-mobile) + edge-to-edge so the
   cards use the full screen width instead of leaving big side margins. */
@media(max-width:760px){
  .mk-wrap{padding:0 2px}            /* near-edge-to-edge on phones — 2px side gutter */
  /* widen the rest of the site to the same slim 2px gutter (category, product, cart, account) */
  #maincontent .container,.columns .container,.page-main > .container,.column.main{padding-left:2px!important;padding-right:2px!important}
  .mk-header__bar{padding-left:12px!important;padding-right:12px!important}
  .mk-prods{--mk-cols:var(--mk-cols-mobile,2);--mk-gap:12px}
  .mk-sec{padding:24px 0}
}

/* accessibility: respect reduced motion */
@media(prefers-reduced-motion:reduce){
  .mk-cst{display:none}
  .mk-card{transition:none}
  .mk-caret{animation:none}
}

/* ===== V25 — tax label off, qty spinner, review text, order-view totals ===== */
/* Remove the "Excl. Tax" / "Incl. Tax" suffix (cart, order, line items). The label is a CSS pseudo
   built from data-label — kill the pseudo; the price itself is a child span and stays. */
.price-excluding-tax:before,.price-excluding-tax:after,.price-including-tax:before,.price-including-tax:after,
[data-label="Excl. Tax"]:after,[data-label="Incl. Tax"]:after,[data-label="Excl. Tax"]:before,[data-label="Incl. Tax"]:before{content:none!important}
/* Qty number inputs: show the native up/down spinner and tint it mint where the browser honours
   accent-color (Chrome/Firefox). */
input[type=number].qty,input[type=number].form-input,.box-tocart input[type=number],.cart input[type=number],
.wishlist-index-index input[type=number],#cart-drawer input[type=number],.checkout-cart-index input[type=number]{accent-color:var(--mk-accent)!important}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:auto!important;opacity:1!important}
/* Product page "Write Your Own Review" card: heading + form text were dark-on-dark. */
.catalog-product-view #review-form,.catalog-product-view .review-form,
.catalog-product-view #review-form legend,.catalog-product-view #review-form legend span,
.catalog-product-view #review-form label,.catalog-product-view #review-form .text-xl{color:rgba(232,236,244,.9)!important}
.catalog-product-view #review-form .text-xl{color:#fff!important}
.catalog-product-view #review-form .form-input::placeholder,.catalog-product-view #review-form .form-textarea::placeholder{color:rgba(232,236,244,.5)!important}
.catalog-product-view #review-form .form-input,.catalog-product-view #review-form .form-textarea{color:#fff!important}
/* Order VIEW: subtotal / shipping / grand total + item rows are plain <div>/<span> (no .mark), so
   the earlier .mark rules missed them. Force the whole order-details block readable. */
.sales-order-view .column.main .order-details-items div,.sales-order-view .column.main .order-details-items span,
.sales-order-view .column.main .order-details-items .price,.sales-order-view .column.main address,
.sales-order-view .column.main .order-details-items p{color:rgba(232,236,244,.9)!important}
.sales-order-view .column.main .order-details-items strong,.sales-order-view .column.main .order-details-items strong .price{color:#fff!important}
.sales-order-view .column.main .order-details-items a:not([class*=btn]){color:var(--mk-accent)!important}

/* ===== DARKMODE-V27-BATCH — checkout flow: sign-in / register / forgot + onepage checkout =====
   The checkout authentication page (body.customer-account-login, context=checkout) and the
   onepage checkout still rendered with Hyvä's light form/card defaults (the "Luma" look) while
   the themed header (top bar / search / mega-menu) was already dark. This themes the page BODY
   only — no header selectors are touched, so the top bar, search and mega-menu stay as-is. */

/* Form fields — Hyvä's .form-input / .form-select / .form-textarea hard-code a light surface,
   so the global --form-bg var never reached them. Force the dark celestial field. */
.customer-account-login .form-input,.customer-account-login .form-select,.customer-account-login .form-textarea,
.customer-account-create .form-input,.customer-account-create .form-select,.customer-account-create .form-textarea,
.customer-account-forgotpassword .form-input,
.checkout-index-index .form-input,.checkout-index-index .form-select,.checkout-index-index .form-textarea,
.checkout-index-index input.input-text,.checkout-index-index select{
  background:#14161b!important;border:1px solid rgba(255,255,255,.18)!important;color:#e8ecf4!important}
.customer-account-login .form-input:focus,.customer-account-create .form-input:focus,
.customer-account-forgotpassword .form-input:focus,.checkout-index-index .form-input:focus,
.checkout-index-index input.input-text:focus,.checkout-index-index select:focus{
  border-color:var(--mk-accent)!important;box-shadow:0 0 0 3px rgba(20,184,166,.18)!important;outline:none!important}
.customer-account-login .form-input::placeholder,.customer-account-create .form-input::placeholder,
.customer-account-forgotpassword .form-input::placeholder,.checkout-index-index .form-input::placeholder,
.checkout-index-index input.input-text::placeholder{color:rgba(232,236,244,.5)!important}

/* "Checkout as a new customer" / register block has no .card surface (just a top border) — give
   it the same dark celestial card as the sign-in panel beside it. */
.customer-account-login .block-new-customer,.checkout-index-index .block-new-customer,
.customer-account-login .login-container .block-customer-login{
  background:var(--color-surface,#17191f)!important;border:1px solid var(--mk-line)!important;
  border-radius:var(--mk-rc)!important;padding:24px!important}

/* Card copy / headings -> readable (strong "Checkout using your account", benefits list, legends) */
.customer-account-login .column.main strong,.customer-account-login .column.main p,
.customer-account-login .column.main li,.customer-account-login .column.main legend,
.customer-account-login .column.main legend span,.customer-account-create .column.main p,
.customer-account-create .column.main li,.customer-account-create .column.main legend span{color:rgba(232,236,244,.88)!important}
.customer-account-login .column.main h2,.customer-account-login .column.main .text-lg strong,
.customer-account-create .column.main h2{color:#fff!important}

/* "Forgot Your Password?" + inline underline links -> mint */
.customer-account-login .actions-toolbar a,.customer-account-login a.underline,
.customer-account-create a.underline,.checkout-index-index a.underline{color:var(--mk-accent)!important}

/* Onepage checkout (standard Magento Knockout checkout) — panels + order summary as dark cards. */
.checkout-index-index .opc-wrapper .checkout-shipping-address,
.checkout-index-index .checkout-shipping-method,
.checkout-index-index .checkout-payment-method,
.checkout-index-index .opc-block-summary{
  background:var(--color-surface,#17191f)!important;border:1px solid var(--mk-line)!important;border-radius:var(--mk-rc)!important}
.checkout-index-index .opc-estimated-wrapper,.checkout-index-index .step-title,
.checkout-index-index .opc-block-summary .title{color:#fff!important;border-color:var(--mk-line)!important}
.checkout-index-index .opc-block-summary .mark,.checkout-index-index .opc-block-summary td,
.checkout-index-index .opc-block-summary .product-item-name,.checkout-index-index .table-totals .price,
.checkout-index-index .opc-block-summary .amount{color:rgba(232,236,244,.9)!important}
.checkout-index-index .opc-block-summary .grand .mark,.checkout-index-index .opc-block-summary .grand .price{color:#fff!important}

/* ===== AMETHYST MAX-GLOW — primary buttons emit a violet bloom (compensates for violet's
   lower luminance vs the old mint; hero CTA also pulses). accent=#0f766e(199,125,255)
   light=#2dd4bf(224,187,255). ===== */
.btn-primary,.btn.btn-primary,button.btn-primary,a.btn-primary,
.action.primary,button.action.primary,a.action.primary,
.action.tocart,.action.checkout,.mk-btn--p,button.mk-btn--p,a.mk-btn--p{
  box-shadow:
    0 0 0 1px rgba(224,187,255,.55),
    0 0 18px -2px rgba(224,187,255,.85),
    0 0 44px 2px rgba(20,184,166,.5),
    0 10px 26px -12px rgba(20,184,166,.9)!important;
}
.btn-primary:hover,.btn.btn-primary:hover,button.btn-primary:hover,a.btn-primary:hover,
.action.primary:hover,.action.tocart:hover,.action.checkout:hover,.mk-btn--p:hover{
  box-shadow:
    0 0 0 1px rgba(224,187,255,.75),
    0 0 24px 0 rgba(224,187,255,1),
    0 0 62px 8px rgba(20,184,166,.65),
    0 12px 30px -10px rgba(20,184,166,1)!important;
}
@keyframes mkGlowPulse{
  0%,100%{box-shadow:
    0 0 0 1px rgba(224,187,255,.55),
    0 0 18px -2px rgba(224,187,255,.85),
    0 0 44px 2px rgba(20,184,166,.45),
    0 10px 26px -12px rgba(20,184,166,.9)!important;}
  50%{box-shadow:
    0 0 0 1px rgba(224,187,255,.8),
    0 0 30px 2px rgba(224,187,255,1),
    0 0 74px 12px rgba(20,184,166,.62),
    0 12px 30px -10px rgba(20,184,166,1)!important;}
}
.mk-cta .mk-btn--p,.mk-hero .mk-btn--p{animation:mkGlowPulse 2.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.mk-cta .mk-btn--p,.mk-hero .mk-btn--p{animation:none!important}}

/* ===== GLOWING PILL nav (desktop) — product menu labels as amethyst glass pills over the
   transparent header, so they pop like the buttons. #header-scoped to beat the ID color rule;
   min-width:1024px so the mobile drawer keeps its block layout. ===== */
@media(min-width:1024px){
  #header .mk-header__bar .mk-cfg-nav a,
  #header .mk-header__bar .navigation a{
    display:inline-flex!important;align-items:center;
    padding:8px 15px!important;margin:0 3px!important;border-radius:10px;
    font-weight:700;font-size:13.5px;text-decoration:none!important;
    color:var(--mk-accent-light,#2dd4bf)!important;
    background:color-mix(in srgb,var(--mk-accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--mk-accent) 46%,transparent);
    box-shadow:0 0 18px -5px color-mix(in srgb,var(--mk-accent) 80%,transparent),inset 0 0 14px -10px color-mix(in srgb,var(--mk-accent-light,#2dd4bf) 90%,transparent);
    transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;
  }
  #header .mk-header__bar .mk-cfg-nav a::before,
  #header .mk-header__bar .navigation a::before{
    content:''!important;display:inline-block!important;width:6px;height:6px;border-radius:50%;
    margin-right:8px;flex:none;background:var(--mk-accent-light,#2dd4bf);
    box-shadow:0 0 8px var(--mk-accent-light,#2dd4bf),0 0 3px #fff;
  }
  #header .mk-header__bar .mk-cfg-nav a::after,
  #header .mk-header__bar .navigation a::after{display:none!important}
  #header .mk-header__bar .mk-cfg-nav a:hover,
  #header .mk-header__bar .navigation a:hover{
    color:#fff!important;background:color-mix(in srgb,var(--mk-accent) 22%,transparent);border-color:color-mix(in srgb,var(--mk-accent) 80%,transparent);
    transform:translateY(-1px);text-shadow:none!important;
    box-shadow:0 0 30px -3px color-mix(in srgb,var(--mk-accent) 95%,transparent),inset 0 0 16px -8px color-mix(in srgb,var(--mk-accent-light,#2dd4bf) 100%,transparent);
  }
}

/* ===== HEADER-LOCAL CONSTELLATION — the opaque #header hides page content scrolling under the
   sticky bar; this canvas paints the moving stars/lines on top of it so the top bar still
   animates. Header content sits above the canvas. ===== */
.mk-head-cst{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#header>*:not(.mk-head-cst){position:relative;z-index:1}

/* Breadcrumb bar: the Hyvä nav carries `bg-surface shadow-sm` = a navy strip + shadow across
   every inner page. Drop both so it blends into the flat-black celestial theme. */
.breadcrumbs.bg-surface,.page-wrapper .breadcrumbs,.breadcrumbs{background:transparent!important;box-shadow:none!important;border:0!important}

/* ===== PER-PAGE PRODUCT ACCENT — each product page adopts its own colour (header pills,
   header constellation, border/glow, breadcrumb, buttons). Homepage + all other pages keep the
   amethyst house colour. body.class beats the configurator's :root !important on specificity. ===== */
body.cms-pdf-editor{--mk-accent:#C81E1E!important;--mk-accent-light:#F87171!important;--mk-on-accent:#ffffff!important;--color-primary:#C81E1E!important;--color-primary-lighter:#F87171!important}
body.cms-stock-trader{--mk-accent:#22C55E!important;--mk-accent-light:#4ADE80!important;--mk-on-accent:#06210f!important;--color-primary:#22C55E!important;--color-primary-lighter:#4ADE80!important}
body.cms-travel{--mk-accent:#0EA5E9!important;--mk-accent-light:#38BDF8!important;--mk-on-accent:#04263a!important;--color-primary:#0EA5E9!important;--color-primary-lighter:#38BDF8!important}
body.cms-my-vault{--mk-accent:#8B5CF6!important;--mk-accent-light:#A78BFA!important;--mk-on-accent:#ffffff!important;--color-primary:#8B5CF6!important;--color-primary-lighter:#A78BFA!important}
body.cms-mirror{--mk-accent:#14B8A6!important;--mk-accent-light:#2DD4BF!important;--mk-on-accent:#04241f!important;--color-primary:#14B8A6!important;--color-primary-lighter:#2DD4BF!important}

/* ===== Top product nav = ALWAYS house blue (not the per-product accent). The header
   border-line below the bar stays product-coloured (it uses var(--mk-accent) on #header). ===== */
#header .mk-header__bar .navigation a,#header .mk-header__bar .mk-cfg-nav a,
#header .navigation a,#header .mk-cfg-nav a{color:#2dd4bf!important;border-color:color-mix(in srgb,#0f766e 45%,transparent)!important}
#header .mk-header__bar .navigation a:hover,#header .mk-header__bar .mk-cfg-nav a:hover,
#header .navigation a:hover,#header .mk-cfg-nav a:hover{color:#7fe6d6!important;text-shadow:0 0 9px rgba(20,184,166,.55)!important}
#header .mk-header__bar .navigation a::after,#header .mk-header__bar .mk-cfg-nav a::after{background:#0f766e!important;box-shadow:0 0 8px #0f766e,0 0 16px #0f766e!important}

/* HOME-ROYAL-START — Royal #14b8a6 colour + card/button design, HOMEPAGE ONLY (2026-07-11). No other page touched. */
body.cms-index-index{--mk-accent:#14b8a6!important;--mk-accent-light:#2dd4bf!important;--mk-on-accent:#ffffff!important;--color-primary:#14b8a6!important;--color-primary-darker:#0f766e!important}
/* nav = Option B: no box, muted text + product-colour dot, product underline slides in on hover */
body.cms-index-index #header .navigation a,body.cms-index-index #header .mk-cfg-nav a{background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;color:#c2cae0!important;font-weight:600!important;display:inline-flex!important;align-items:center!important;gap:8px!important;padding:8px 8px!important;position:relative!important}
body.cms-index-index #header .navigation a::before,body.cms-index-index #header .mk-cfg-nav a::before{content:""!important;width:7px;height:7px;border-radius:50%;background:var(--pd,#14b8a6);flex:0 0 auto;display:inline-block;transition:box-shadow .22s ease}
body.cms-index-index #header .navigation a:hover,body.cms-index-index #header .mk-cfg-nav a:hover{color:#ffffff!important;text-shadow:none!important}
body.cms-index-index #header .navigation a:hover::before,body.cms-index-index #header .mk-cfg-nav a:hover::before{box-shadow:0 0 0 4px color-mix(in srgb,var(--pd,#14b8a6) 22%,transparent)}
body.cms-index-index #header .navigation a::after,body.cms-index-index #header .mk-cfg-nav a::after{background:var(--pd,#14b8a6)!important;box-shadow:none!important}
body.cms-index-index #header .navigation a[href*="pdf-editor"],body.cms-index-index #header .mk-cfg-nav a[href*="pdf-editor"]{--pd:#C81E1E}
body.cms-index-index #header .navigation a[href*="stock-trader"],body.cms-index-index #header .mk-cfg-nav a[href*="stock-trader"]{--pd:#22C55E}
body.cms-index-index #header .navigation a[href*="travel"],body.cms-index-index #header .mk-cfg-nav a[href*="travel"]{--pd:#0EA5E9}
body.cms-index-index #header .navigation a[href*="vault"],body.cms-index-index #header .mk-cfg-nav a[href*="vault"]{--pd:#8B5CF6}
body.cms-index-index #header .navigation a[href*="mirror"],body.cms-index-index #header .mk-cfg-nav a[href*="mirror"]{--pd:#14B8A6}
/* 5 product cards: corporate border + Royal top-border + corporate shadow (inner text stays each product colour) */
body.cms-index-index .mk-prod-card{border:1px solid color-mix(in srgb,var(--c) 28%,transparent)!important;border-top:3px solid var(--c)!important;box-shadow:0 18px 40px -22px var(--c)!important;transition:transform .2s ease,box-shadow .2s ease}
body.cms-index-index .mk-prod-card:hover{transform:translateY(-3px);box-shadow:0 26px 52px -18px var(--c)!important}
/* the product-coloured top-accent bar -> force corporate Royal (single solid line) */
body.cms-index-index .mk-prod-card::before{background:var(--c)!important;background-image:none!important}
/* Sweep-fill primary buttons (no glow) */
body.cms-index-index .mk-btn--p{position:relative;overflow:hidden;z-index:0;background:transparent!important;border:1.5px solid #14b8a6!important;color:#7fe6d6!important;box-shadow:none!important;animation:none!important;transition:color .25s ease!important}
body.cms-index-index .mk-btn--p::before{content:"";position:absolute;inset:0;background:#14b8a6;transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.7,0,.2,1);z-index:-1}
body.cms-index-index .mk-btn--p:hover{color:#ffffff!important}
body.cms-index-index .mk-btn--p:hover::before{transform:scaleX(1)}
/* HOME-ROYAL-END */
/* PDF-ROYAL-START — corporate Royal #14b8a6 system on /pdf-editor. PDF red #C81E1E kept ONLY on the hero headline "handled." and the "Choose your plan" bullet dots. (2026-07-11) */
/* header + content accent -> Royal */
body.cms-pdf-editor{--mk-accent:#14b8a6!important;--mk-accent-light:#2dd4bf!important;--mk-on-accent:#ffffff!important;--color-primary:#14b8a6!important;--color-primary-darker:#0f766e!important}
body.cms-pdf-editor .pdfpg{--r:#14b8a6!important}
/* nav = Option B (no box, muted text, product-colour dot, product hover underline) */
body.cms-pdf-editor #header .navigation a,body.cms-pdf-editor #header .mk-cfg-nav a{background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;color:#c2cae0!important;font-weight:600!important;display:inline-flex!important;align-items:center!important;gap:8px!important;padding:8px 8px!important;position:relative!important}
body.cms-pdf-editor #header .navigation a::before,body.cms-pdf-editor #header .mk-cfg-nav a::before{content:""!important;width:7px;height:7px;border-radius:50%;background:var(--pd,#14b8a6);flex:0 0 auto;display:inline-block;transition:box-shadow .22s ease}
body.cms-pdf-editor #header .navigation a:hover,body.cms-pdf-editor #header .mk-cfg-nav a:hover{color:#ffffff!important;text-shadow:none!important}
body.cms-pdf-editor #header .navigation a:hover::before,body.cms-pdf-editor #header .mk-cfg-nav a:hover::before{box-shadow:0 0 0 4px color-mix(in srgb,var(--pd,#14b8a6) 22%,transparent)}
body.cms-pdf-editor #header .navigation a::after,body.cms-pdf-editor #header .mk-cfg-nav a::after{background:var(--pd,#14b8a6)!important;box-shadow:none!important}
body.cms-pdf-editor #header .navigation a[href*="pdf-editor"]{--pd:#C81E1E}
body.cms-pdf-editor #header .navigation a[href*="stock-trader"]{--pd:#22C55E}
body.cms-pdf-editor #header .navigation a[href*="travel"]{--pd:#0EA5E9}
body.cms-pdf-editor #header .navigation a[href*="vault"]{--pd:#8B5CF6}
body.cms-pdf-editor #header .navigation a[href*="mirror"]{--pd:#14B8A6}
/* EXCEPTIONS -> keep product red */
body.cms-pdf-editor .pdfpg h1 em,body.cms-pdf-editor .pdf-htext h1 em{color:#C81E1E!important}
body.cms-pdf-editor .pdf-plan-list li::before{background:#C81E1E!important;box-shadow:none!important}
/* hardcoded red tints -> Royal (corporate) */
body.cms-pdf-editor .pdf-badge{background:rgba(20,184,166,.12)!important;border-color:rgba(20,184,166,.38)!important}
body.cms-pdf-editor .pdf-band{background:linear-gradient(180deg,rgba(200,30,30,.06),rgba(255,255,255,.02))!important;border-color:#C81E1E!important;box-shadow:none!important}
body.cms-pdf-editor .pdf-plan{border-color:#C81E1E!important;box-shadow:none!important}
body.cms-pdf-editor .pdf-plan.featured{border-color:#C81E1E!important;background:linear-gradient(180deg,rgba(200,30,30,.08),rgba(255,255,255,.02))!important;box-shadow:none!important}
body.cms-pdf-editor .pdf-plan-tag.save{color:#14b8a6!important;background:rgba(20,184,166,.12)!important;border-color:rgba(20,184,166,.38)!important}
/* feature cards -> corporate (unchanged) */
body.cms-pdf-editor .pdf-feat .f{box-shadow:0 16px 38px -26px #14b8a6!important}
body.cms-pdf-editor .pdf-feat .f:hover{box-shadow:0 22px 48px -24px #14b8a6!important}
/* primary buttons -> Sweep Fill, no glow */
body.cms-pdf-editor .pdf-btn.p{background:transparent!important;background-image:none!important;border:1.5px solid #14b8a6!important;color:#7fe6d6!important;box-shadow:none!important;position:relative;overflow:hidden;z-index:0;transition:color .25s ease}
body.cms-pdf-editor .pdf-btn.p::before{content:"";position:absolute;inset:0;background:#14b8a6;transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.7,0,.2,1);z-index:-1}
body.cms-pdf-editor .pdf-btn.p:hover{color:#ffffff!important}
body.cms-pdf-editor .pdf-btn.p:hover::before{transform:scaleX(1)}
/* breathing room between sections (was cramped: headings had only 8px top margin) */
body.cms-pdf-editor .pdf-gh{margin-top:68px!important}
body.cms-pdf-editor .pdf-feat{margin-top:60px!important;margin-bottom:8px!important}
body.cms-pdf-editor .pdf-band{margin-top:68px!important}
body.cms-pdf-editor .pdf-hero{margin-bottom:14px!important}
body.cms-pdf-editor .pdf-free{margin-top:56px!important}
body.cms-pdf-editor .pdf-gal{margin-bottom:8px!important}
/* final CTA: two buttons side by side */
body.cms-pdf-editor .pdf-band-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center;margin:6px 0 2px}
/* Watch Demo (coming soon) -> polished ghost that complements the blue primary, not a dead grey */
body.cms-pdf-editor .pdf-btn.s.pdf-disabled{opacity:1!important;color:#b4bee0!important;background:color-mix(in srgb,#14b8a6 7%,transparent)!important;border:1.5px solid color-mix(in srgb,#14b8a6 42%,transparent)!important;cursor:not-allowed!important;display:inline-flex!important;align-items:center;gap:9px}
body.cms-pdf-editor .pdf-btn.s.pdf-disabled::before{content:"\25B6";font-size:9px;color:#7f9bf0}
body.cms-pdf-editor .pdf-btn.s.pdf-disabled::after{content:"Soon";font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7fe6d6;background:color-mix(in srgb,#14b8a6 18%,transparent);border:1px solid color-mix(in srgb,#14b8a6 36%,transparent);padding:2px 7px;border-radius:999px}
/* PDF-ROYAL-END */
/* BANNER-LOOP-START — cross-fade the two announcement lines on ALL pages, in corporate blue (2026-07-11) */
.mk-announce{position:relative}
.mk-announce > span{color:#7fe6d6!important;animation:mkAnnA 10s ease-in-out infinite}
.mk-announce::after{content:"From PDFs to passwords, trading to travel, mirroring to safety.";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 16px;color:#7fe6d6;font-weight:600;opacity:0;pointer-events:none;animation:mkAnnB 10s ease-in-out infinite}
@keyframes mkAnnA{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes mkAnnB{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.mk-announce > span{animation:none!important;opacity:1!important}.mk-announce::after{display:none!important}}
/* BANNER-LOOP-END */
/* NAV-B-START — subtle Option B nav on ALL pages (no box, muted text, product-colour dot). High specificity to beat the old boxed-pill rules. */
#header .mk-header__bar .navigation a,#header .mk-header__bar .mk-cfg-nav a{background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;color:#c2cae0!important;font-weight:600!important;display:inline-flex!important;align-items:center!important;gap:8px!important;padding:8px 8px!important;position:relative!important}
#header .mk-header__bar .navigation a::before,#header .mk-header__bar .mk-cfg-nav a::before{content:""!important;width:7px;height:7px;border-radius:50%;background:var(--pd,#14b8a6);flex:0 0 auto;display:inline-block;transition:box-shadow .22s ease}
#header .mk-header__bar .navigation a:hover,#header .mk-header__bar .mk-cfg-nav a:hover{color:#ffffff!important;text-shadow:none!important}
#header .mk-header__bar .navigation a:hover::before,#header .mk-header__bar .mk-cfg-nav a:hover::before{box-shadow:0 0 0 4px color-mix(in srgb,var(--pd,#14b8a6) 22%,transparent)}
#header .mk-header__bar .navigation a::after,#header .mk-header__bar .mk-cfg-nav a::after{background:var(--pd,#14b8a6)!important;box-shadow:none!important}
#header .mk-header__bar .navigation a[href*="pdf-editor"],#header .mk-header__bar .mk-cfg-nav a[href*="pdf-editor"]{--pd:#C81E1E}
#header .mk-header__bar .navigation a[href*="stock-trader"],#header .mk-header__bar .mk-cfg-nav a[href*="stock-trader"]{--pd:#22C55E}
#header .mk-header__bar .navigation a[href*="travel"],#header .mk-header__bar .mk-cfg-nav a[href*="travel"]{--pd:#0EA5E9}
#header .mk-header__bar .navigation a[href*="vault"],#header .mk-header__bar .mk-cfg-nav a[href*="vault"]{--pd:#8B5CF6}
#header .mk-header__bar .navigation a[href*="mirror"],#header .mk-header__bar .mk-cfg-nav a[href*="mirror"]{--pd:#14B8A6}
/* NAV-B-END */
/* BTN-S-START — corporate-standard secondary button (blue ghost) across product pages */
.pdf-btn.s,.stk-btn.s,.tc-btn.s,.vlt-btn.s,.mir-btn.s{background:transparent!important;border:1.5px solid color-mix(in srgb,#14b8a6 45%,transparent)!important;color:#7fe6d6!important;box-shadow:none!important;transition:background .22s ease,color .22s ease,border-color .22s ease}
.pdf-btn.s:hover,.stk-btn.s:hover,.tc-btn.s:hover,.vlt-btn.s:hover,.mir-btn.s:hover{background:color-mix(in srgb,#14b8a6 12%,transparent)!important;color:#dbe7ff!important;border-color:#14b8a6!important}
/* BTN-S-END */
/* TRADER-ROYAL-START — corporate Royal on /stock-trader; green #22C55E only on hero em + plan bullet dots + plan/CTA card frames (2026-07-11) */
body.cms-stock-trader{--mk-accent:#14b8a6!important;--mk-accent-light:#2dd4bf!important;--mk-on-accent:#ffffff!important;--color-primary:#14b8a6!important;--color-primary-darker:#0f766e!important}
body.cms-stock-trader .stkpg{--g:#14b8a6!important}
/* the HERO demo mock keeps its real trading colours (green up / red down); gallery frames stay corporate on hover */
body.cms-stock-trader .stk-hero .stk-frame{--g:#22C55E!important}
/* hero headline stays green */
body.cms-stock-trader .stkpg h1 em{color:#22C55E!important}
/* plan cards (mk-pp): green frame + green bullet dots, no shadow/glow */
body.cms-stock-trader .mk-pp-card{border-color:#22C55E!important;box-shadow:none!important}
body.cms-stock-trader .mk-pp-card.featured{background:linear-gradient(180deg,rgba(34,197,94,.08),rgba(255,255,255,.02))!important}
body.cms-stock-trader .mk-pp-list li::before{background:#22C55E!important;box-shadow:none!important}
/* CTA band frame green, no shadow */
body.cms-stock-trader .stk-band{border-color:#22C55E!important;box-shadow:none!important;background:linear-gradient(180deg,rgba(34,197,94,.06),rgba(255,255,255,.02))!important;margin-top:68px!important}
/* hardcoded green tints -> Royal */
body.cms-stock-trader .stk-badge{background:rgba(20,184,166,.12)!important;border-color:rgba(20,184,166,.38)!important}
/* primary buttons -> Sweep Fill, no glow */
body.cms-stock-trader .stk-btn.p{background:transparent!important;background-image:none!important;border:1.5px solid #14b8a6!important;color:#7fe6d6!important;box-shadow:none!important;position:relative;overflow:hidden;z-index:0;transition:color .25s ease}
body.cms-stock-trader .stk-btn.p::before{content:"";position:absolute;inset:0;background:#14b8a6;transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.7,0,.2,1);z-index:-1}
body.cms-stock-trader .stk-btn.p:hover{color:#ffffff!important}
body.cms-stock-trader .stk-btn.p:hover::before{transform:scaleX(1)}
/* spacing */
body.cms-stock-trader .stk-gh{margin-top:68px!important}
body.cms-stock-trader .stk-feat{margin-top:60px!important}
/* TRADER-ROYAL-END */
/* GALLERY-NB-START — "See it in action" image cards: NO border (resting or hover), neutral lift-shadow only. Kills the blue on hover; PDF + Trader match. */
.pdf-gal .pdf-shot,.stk-gal .stk-frame{border-color:transparent!important}
.pdf-gal .pdf-shot:hover,.stk-gal .stk-frame:hover{border-color:transparent!important;box-shadow:0 30px 64px -26px rgba(0,0,0,.85)!important}
/* GALLERY-NB-END */
/* ============ TRAVEL (sky #0EA5E9) ============ */
/* TRAVEL-ROYAL-START */
body.cms-travel{--mk-accent:#14b8a6!important;--mk-accent-light:#2dd4bf!important;--mk-on-accent:#ffffff!important;--color-primary:#14b8a6!important;--color-primary-darker:#0f766e!important}
body.cms-travel .tcpg{--s:#14b8a6!important}
body.cms-travel .tcpg h1 em{color:#0EA5E9!important}
body.cms-travel .mk-pp-card{border-color:#0EA5E9!important;box-shadow:none!important}
body.cms-travel .mk-pp-card.featured{background:linear-gradient(180deg,rgba(14,165,233,.08),rgba(255,255,255,.02))!important}
body.cms-travel .mk-pp-list li::before{background:#0EA5E9!important;box-shadow:none!important}
body.cms-travel .tc-band{border-color:#0EA5E9!important;box-shadow:none!important;background:linear-gradient(180deg,rgba(14,165,233,.06),rgba(255,255,255,.02))!important;margin-top:68px!important}
body.cms-travel .tc-badge{background:rgba(20,184,166,.12)!important;border-color:rgba(20,184,166,.38)!important}
body.cms-travel .tc-btn.p{background:transparent!important;background-image:none!important;border:1.5px solid #14b8a6!important;color:#7fe6d6!important;box-shadow:none!important;position:relative;overflow:hidden;z-index:0;transition:color .25s ease}
body.cms-travel .tc-btn.p::before{content:"";position:absolute;inset:0;background:#14b8a6;transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.7,0,.2,1);z-index:-1}
body.cms-travel .tc-btn.p:hover{color:#fff!important}
body.cms-travel .tc-btn.p:hover::before{transform:scaleX(1)}
body.cms-travel .tc-gh{margin-top:68px!important}
body.cms-travel .tc-feat{margin-top:60px!important}
/* TRAVEL-ROYAL-END */

/* ============ VAULT (purple #8B5CF6) ============ */
/* VAULT-ROYAL-START */
body.cms-my-vault{--mk-accent:#14b8a6!important;--mk-accent-light:#2dd4bf!important;--mk-on-accent:#ffffff!important;--color-primary:#14b8a6!important;--color-primary-darker:#0f766e!important}
body.cms-my-vault .vltpg{--v:#14b8a6!important}
body.cms-my-vault .vltpg h1 em{color:#8B5CF6!important}
body.cms-my-vault .mk-pp-card{border-color:#8B5CF6!important;box-shadow:none!important}
body.cms-my-vault .mk-pp-card.featured{background:linear-gradient(180deg,rgba(139,92,246,.08),rgba(255,255,255,.02))!important}
body.cms-my-vault .mk-pp-list li::before{background:#8B5CF6!important;box-shadow:none!important}
body.cms-my-vault .vlt-band{border-color:#8B5CF6!important;box-shadow:none!important;background:linear-gradient(180deg,rgba(139,92,246,.06),rgba(255,255,255,.02))!important;margin-top:68px!important}
body.cms-my-vault .vlt-badge{background:rgba(20,184,166,.12)!important;border-color:rgba(20,184,166,.38)!important}
body.cms-my-vault .vlt-btn.p{background:transparent!important;background-image:none!important;border:1.5px solid #14b8a6!important;color:#7fe6d6!important;box-shadow:none!important;position:relative;overflow:hidden;z-index:0;transition:color .25s ease}
body.cms-my-vault .vlt-btn.p::before{content:"";position:absolute;inset:0;background:#14b8a6;transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.7,0,.2,1);z-index:-1}
body.cms-my-vault .vlt-btn.p:hover{color:#fff!important}
body.cms-my-vault .vlt-btn.p:hover::before{transform:scaleX(1)}
body.cms-my-vault .vlt-gh{margin-top:68px!important}
body.cms-my-vault .vlt-feat{margin-top:60px!important}
/* VAULT-ROYAL-END */

/* ============ MIRROR (teal #14B8A6) ============ */
/* MIRROR-ROYAL-START */
body.cms-mirror{--mk-accent:#14b8a6!important;--mk-accent-light:#2dd4bf!important;--mk-on-accent:#ffffff!important;--color-primary:#14b8a6!important;--color-primary-darker:#0f766e!important}
body.cms-mirror .mirpg{--b:#14b8a6!important}
body.cms-mirror .mirpg h1 em{color:#14B8A6!important}
body.cms-mirror .mk-pp-card{border-color:#14B8A6!important;box-shadow:none!important}
body.cms-mirror .mk-pp-card.featured{background:linear-gradient(180deg,rgba(20,184,166,.08),rgba(255,255,255,.02))!important}
body.cms-mirror .mk-pp-list li::before{background:#14B8A6!important;box-shadow:none!important}
body.cms-mirror .mir-band{border-color:#14B8A6!important;box-shadow:none!important;background:linear-gradient(180deg,rgba(20,184,166,.06),rgba(255,255,255,.02))!important;margin-top:68px!important}
body.cms-mirror .mir-badge{background:rgba(20,184,166,.12)!important;border-color:rgba(20,184,166,.38)!important}
body.cms-mirror .mir-btn.p{background:transparent!important;background-image:none!important;border:1.5px solid #14b8a6!important;color:#7fe6d6!important;box-shadow:none!important;position:relative;overflow:hidden;z-index:0;transition:color .25s ease}
body.cms-mirror .mir-btn.p::before{content:"";position:absolute;inset:0;background:#14b8a6;transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.7,0,.2,1);z-index:-1}
body.cms-mirror .mir-btn.p:hover{color:#fff!important}
body.cms-mirror .mir-btn.p:hover::before{transform:scaleX(1)}
body.cms-mirror .mir-gh{margin-top:68px!important}
body.cms-mirror .mir-feat{margin-top:60px!important}
/* MIRROR-ROYAL-END */

/* ============ borderless galleries on the remaining product pages ============ */
/* GALLERY-NB2-START */
.tc-gal .tc-frame,.vlt-gal .vlt-frame,.mir-gallery .mir-shot,.mir-gal .mir-shot{border-color:transparent!important}
.tc-gal .tc-frame:hover,.vlt-gal .vlt-frame:hover,.mir-gallery .mir-shot:hover,.mir-gal .mir-shot:hover{border-color:transparent!important;box-shadow:0 30px 64px -26px rgba(0,0,0,.85)!important}
/* GALLERY-NB2-END */







/* ===== WOW sweep-fill primary button — teal (storefront + account), 2026-07-15 ===== */
/* Outline by default; teal sweeps in left-to-right on hover/click — same effect as the
   corporate account .mp-btn. "html body" prefix outranks the theme's own btn rules. */
html body .btn.btn-primary,html body button.btn-primary,html body a.btn-primary,html body .action.primary,html body button.action.primary{
  position:relative!important;overflow:hidden!important;z-index:0!important;
  background:transparent!important;background-color:transparent!important;
  border:1.5px solid #14b8a6!important;
  color:#7fe6d6!important;box-shadow:none!important;
  transition:color .28s ease!important;
}
html body .btn.btn-primary::before,html body button.btn-primary::before,html body a.btn-primary::before,html body .action.primary::before,html body button.action.primary::before{
  content:""!important;position:absolute!important;inset:0!important;
  background:#2dd4bf!important;transform:scaleX(0);transform-origin:left;
  transition:transform .36s cubic-bezier(.7,0,.2,1)!important;z-index:-1!important;
}
html body .btn.btn-primary:hover,html body button.btn-primary:hover,html body a.btn-primary:hover,html body .action.primary:hover,html body button.action.primary:hover,
html body .btn.btn-primary:active,html body button.btn-primary:active,html body a.btn-primary:active,html body .action.primary:active{color:#ffffff!important;}
html body .btn.btn-primary:hover::before,html body button.btn-primary:hover::before,html body a.btn-primary:hover::before,html body .action.primary:hover::before,html body button.action.primary:hover::before,
html body .btn.btn-primary:active::before,html body button.btn-primary:active::before,html body a.btn-primary:active::before,html body .action.primary:active::before{transform:scaleX(1)!important;}
@media(prefers-reduced-motion:reduce){html body .btn.btn-primary::before,html body button.btn-primary::before,html body a.btn-primary::before{transition:none!important;}}

/* --- Storefront product CTA buttons: recolor the existing royal-blue sweep-fill to teal --- */
/* body[class] prefix (0,3,2) outranks the per-page body.cms-<product> .<x>-btn.p rules (0,3,1) --- */
html body[class] .mk-btn--p,html body[class] .pdf-btn.p,html body[class] .stk-btn.p,html body[class] .tc-btn.p,html body[class] .vlt-btn.p,html body[class] .mir-btn.p{
  border-color:#14b8a6!important;color:#7fe6d6!important;
}
html body[class] .mk-btn--p::before,html body[class] .pdf-btn.p::before,html body[class] .stk-btn.p::before,html body[class] .tc-btn.p::before,html body[class] .vlt-btn.p::before,html body[class] .mir-btn.p::before{
  background:#2dd4bf!important;
}
html body[class] .mk-btn--p:hover,html body[class] .pdf-btn.p:hover,html body[class] .stk-btn.p:hover,html body[class] .tc-btn.p:hover,html body[class] .vlt-btn.p:hover,html body[class] .mir-btn.p:hover{
  color:#ffffff!important;
}
/* secondary CTA variants */
html body[class] .pdf-btn.s,html body[class] .stk-btn.s,html body[class] .tc-btn.s,html body[class] .vlt-btn.s,html body[class] .mir-btn.s{
  border-color:color-mix(in srgb,#14b8a6 45%,transparent)!important;color:#7fe6d6!important;
}
html body[class] .pdf-btn.s:hover,html body[class] .stk-btn.s:hover,html body[class] .tc-btn.s:hover,html body[class] .vlt-btn.s:hover,html body[class] .mir-btn.s:hover{
  background:color-mix(in srgb,#14b8a6 12%,transparent)!important;border-color:#14b8a6!important;color:#dbfff7!important;
}
/* --- "Light up" glow on hover: the bright teal fill glows behind the button (matches the Save button feel) --- */
html body .btn.btn-primary:hover,html body button.btn-primary:hover,html body a.btn-primary:hover,html body .action.primary:hover,html body button.action.primary:hover,
html body[class] .mk-btn--p:hover,html body[class] .pdf-btn.p:hover,html body[class] .stk-btn.p:hover,html body[class] .tc-btn.p:hover,html body[class] .vlt-btn.p:hover,html body[class] .mir-btn.p:hover{
  box-shadow:0 0 16px rgba(45,212,191,.55),0 0 42px rgba(45,212,191,.28)!important;
}

/* --- Themed scrollbars site-wide (teal thumb, transparent track — never grey) --- */
html{scrollbar-width:thin;scrollbar-color:#14b8a6 transparent;}
*{scrollbar-width:thin;scrollbar-color:#14b8a6 transparent;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#14b8a6;border-radius:6px;border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:#0f9488;}
::-webkit-scrollbar-corner{background:transparent;}
/* END WOW teal buttons */

/* CTA-CARD-UNIFY-START — all product bottom CTA cards match the homepage .mk-prod-card teal frame (2026-07-15) */
html body[class] .pdf-band,html body[class] .stk-band,html body[class] .tc-band,html body[class] .vlt-band,html body[class] .mir-band,
html body[class] .pdf-get,html body[class] .stk-get,html body[class] .tc-get,html body[class] .vlt-get,html body[class] .mir-get{
  border:1px solid color-mix(in srgb,#14b8a6 28%,transparent)!important;
  border-top:3px solid #14b8a6!important;
  box-shadow:0 18px 40px -22px #14b8a6!important;
  background:linear-gradient(180deg,rgba(20,184,166,.06),rgba(255,255,255,.02))!important;
}
/* CTA-CARD-UNIFY-END */

/* ===== Auth/login popup readability (cart) 2026-07-16: text was #1b2733 on dark ===== */
.block-customer-login,.block-new-customer,.block-authentication{color:#dfe3ee}
.block-customer-login p,.block-customer-login span,.block-customer-login label,
.block-new-customer p,.block-new-customer span,.block-new-customer label,.block-new-customer li,
.block-authentication p,.block-authentication span,.block-authentication label{color:#dfe3ee}
.modal-popup .modal-title,.block-title>strong,.block-customer-login .block-title strong,
.block-new-customer .block-title strong,#block-customer-login-heading,#block-new-customer-heading{color:#ffffff}
.block-new-customer .block-content ul li,.field .note{color:#aab0c6}
.block-customer-login a,.block-new-customer a,.block-authentication a{color:#7fe6d6}

/* ===== Crestora — branded order view / print receipt ===== */
.sales-order-view .page-main,.sales-order-print .page-main{max-width:920px;margin:0 auto}
.sales-order-view .page-title-wrapper .order-date,.sales-order-print .order-date{color:#8a92b2;font-size:13px;margin:2px 0 20px}
.sales-order-view .order-status,.sales-order-print .order-status{display:inline-block;background:rgba(45,212,191,.14);color:#5ee6a8;border:1px solid rgba(45,212,191,.42);border-radius:999px;padding:4px 14px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;vertical-align:middle;margin-left:10px}
.sales-order-view .block-order-details-view,.sales-order-print .block-order-details-view{background:#17191f;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px 26px;margin-bottom:18px;box-shadow:0 30px 70px -40px rgba(0,0,0,.7)}
.sales-order-view .block-order-details-view .box-title strong,.sales-order-print .block-order-details-view .box-title strong{color:#7fe6d6;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.sales-order-view .block-order-details-view .box-content,.sales-order-print .box-content{color:#c4cae0;font-size:13.5px;line-height:1.7;margin-top:6px}
.sales-order-view .order-details-items,.sales-order-print .order-details-items{background:#17191f;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px 26px;box-shadow:0 30px 70px -40px rgba(0,0,0,.7)}
.sales-order-view .order-title strong,.sales-order-print .order-title strong{color:#fff;font-size:16px;font-weight:800}
.sales-order-view .table-order-items thead th{color:#8a92b2;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid rgba(255,255,255,.1);padding:12px 8px;text-align:left}
.sales-order-view .table-order-items tbody td{color:#c4cae0;padding:14px 8px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top}
.sales-order-view .table-order-items .product-item-name{color:#fff;font-weight:700}
.sales-order-view .table-order-items tfoot th,.sales-order-view .table-order-items tfoot td{padding:8px;color:#c4cae0;text-align:right}
.sales-order-view .table-order-items tfoot .grand_total th,.sales-order-view .table-order-items tfoot .grand_total td{color:#fff;font-weight:800;font-size:18px;border-top:2px solid rgba(45,212,191,.5);padding-top:16px}
.sales-order-view .actions-toolbar .action.back,.sales-order-view .action.print{color:#7fe6d6;font-weight:700;text-decoration:none}


/* ===== MK-ORDER-PORTRAIT — order view reads as a document, not a dashboard =====
   It was full-bleed: billing on the far left, payment stranded mid-page, and the item
   columns flung to the edges. Constrain it to a portrait-ish column and tighten the
   rhythm so the content fills the frame instead of floating in it. */
.sales-order-view .column.main,.sales-order-print .column.main{max-width:720px;margin-left:auto;margin-right:auto}
.sales-order-view .order-details-items,.sales-order-print .order-details-items{padding:22px 24px}
/* billing / payment: two honest columns, not one column + a void */
.sales-order-view .order-details-items .grid,.sales-order-print .order-details-items .grid{gap:18px}
.sales-order-view .order-details-items .w-full,.sales-order-print .order-details-items .w-full{padding-top:2px;padding-bottom:2px}
/* item table: pull the columns back in so Price/Qty/Subtotal sit near the product */
.sales-order-view .order-items,.sales-order-print .order-items{font-size:13.5px}
.sales-order-view .order-items .grid-cols-5>div,.sales-order-print .order-items .grid-cols-5>div{padding-top:7px;padding-bottom:7px}
.sales-order-view .order-title p,.sales-order-print .order-title p{margin-top:22px;margin-bottom:6px;font-size:15px}
.sales-order-view .actions-toolbar,.sales-order-print .actions-toolbar{margin-top:18px}
@media(max-width:820px){.sales-order-view .column.main,.sales-order-print .column.main{max-width:100%}}