/* ==========================================================================
   CPV – light redesign layer (concept C2)
   Loaded LAST (after variables/framework/app[/checkout].css).
   To return to the old look, remove the cpv.css <link> line in layouts/*.inc.php.
   ========================================================================== */

/* --- 0. Font (self-hosted variable font, OFL) ---------------------------------- */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/instrument-sans.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/instrument-sans-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* --- 1. Tokens ----------------------------------------------------------------- */
:root {
  /* brand (from the logo) */
  --red: #ee3538;
  --red-btn: #d92d33;      /* white text on it passes AA */
  --red-ink: #c4242b;      /* red text on white */
  --red-50: #fdf1f1;
  --red-100: #f8dcdc;
  --logo-grey: #a0a3a0;

  /* quiet neutrals, nudged toward the logo grey */
  --ink: #1c1e1d;
  --ink-2: #3a3d3b;
  --muted: #6f736f;
  --line: #e8e9e7;
  --line-2: #d9dbd8;
  --band: #f5f6f4;         /* soft section background */
  --band-2: #fafbfa;
  --tile: #f4f5f3;         /* flat fallback */
  --tile-bg: linear-gradient(155deg, #ffffff 0%, #fafaf9 50%, #f5f6f4 100%);   /* product image tiles */
  --r-tile: 14px;
  --card-wash: linear-gradient(150deg, #ffffff 0%, #fcfcfb 45%, #f4f5f3 100%);   /* mostly white, a touch of grey */
  --paper: #ffffff;
  --ok: #24744a;
  --ok-50: #edf6f0;

  --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --container: 1376px;
  --page-pad: clamp(16px, 2.6vw, 32px);
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --shadow-soft: 0 1px 2px rgba(28, 30, 29, 0.04), 0 10px 30px -18px rgba(28, 30, 29, 0.22);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --meta-h: 44px;
  --sec-gap: clamp(28px, 3vw, 40px);   /* one vertical space between the page areas, everywhere */

  /* remap the theme's own variables so untouched pages follow along */
  --default-text-font: var(--font);
  --default-text-size: 15.6px;
  --default-line-height: 1.55;
  --default-text-color: var(--ink);
  --link-text-color: var(--ink);
  --border-radius: var(--r);
  --site-background-color: var(--paper);
  --default-background-color: var(--band);
  --default-border-color: var(--line);
  --card-border-color: var(--line);
  --card-footer-background-color: var(--paper);
  --input-background-color: var(--paper);
  --input-border-radius: 999px;
  --input-padding-x: 1em;
  --input-padding-y: 0.55em;
  --important-notice-background-color: var(--band);
  --important-notice-text-color: var(--muted);
  --default-button-background-color: var(--paper);
  --default-button-background-color-hover: var(--band);
  --default-button-border-color: var(--line-2);
  --default-button-text-color: var(--ink);
  --primary-button-background-color: var(--ink);
  --primary-button-background-color-hover: var(--ink-2);
  --success-button-background-color: var(--red-btn);
  --success-button-background-color-hover: var(--red-ink);
  --success-button-border-color: var(--red-btn);
  --breadcrumbs-background-color: transparent;
  --breadcrumbs-text-color: var(--muted);
  --pills-text-color: var(--ink);
  --pills-background-color-active: var(--red-50);
  --pills-background-color-hover: var(--band);
  --tabs-background-color: var(--band);
  --tabs-pane-background-color: var(--band);
  --table-striped-row-background-odd: var(--band-2);
  --table-row-hover-background: var(--band);
  --pagination-background-color: var(--paper);
  --pagination-background-color-active: var(--ink);
  --pagination-text-color-active: #fff;
  --pagination-background-color-hover: var(--band);
  --pagination-border-color: var(--line);
  --cookie-notice-background-color: rgba(255, 255, 255, 0.96);
  --cookie-notice-text-color: var(--ink);
  --image-whitespace-color: var(--tile);
  --footer-background-color: var(--band);
}

/* --- 2. Base ------------------------------------------------------------------- */
/* Whole site 5% larger on computer screens (like browser zoom 105%): text, spacing, images, everything */
:root { --zoom: 1; }
@media (min-width: 1200px) { :root { --zoom: 1.05; } }
html { zoom: var(--zoom); }
html {
  font: 15.6px/1.55 var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 15.6px; }
::selection { background: var(--red-100); color: var(--ink); }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--red-ink); }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.015em; text-wrap: balance; }
h1 { line-height: 1.15; }
strong, b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (pointer: coarse) {
  input, select, textarea, .form-control { font-size: 16.6px !important; } /* stops iOS zoom on focus */
}

/* --- 3. Layout ------------------------------------------------------------------- */
.fourteen-forty,
.twelve-eighty {
  max-width: var(--container);
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}
#content-wrapper { margin: 0 !important; padding-top: 28px; padding-bottom: var(--sec-gap); }
.row.layout { grid-gap: 0 clamp(20px, 2.4vw, 36px); }

/* --- 4. Announcement line ---------------------------------------------------------- */
#important-notice {
  background: var(--band);
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--line);
}
#important-notice .fourteen-forty { padding-top: 7px; padding-bottom: 7px; }

/* --- 5. Header ------------------------------------------------------------------- */
#site-menu {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
          backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: transform 280ms var(--ease), box-shadow 200ms;
}
@media (min-width: 992px) {
  #site-menu { border-bottom: 0; }
  #category-bar { border-bottom: 1px solid var(--line); }   /* same width as the line above the logo */
  html.cpv-header-stuck #site-menu { box-shadow: 0 10px 24px -20px rgba(28, 30, 29, 0.35); }
}
@media (min-width: 992px) {
  #site-menu { top: calc(-1 * var(--meta-h)); }   /* the thin info line scrolls away, the rest stays */
}
body.scrolling-down #site-menu { top: 0; }   /* neutralise the old app.css rule */
@media (min-width: 992px) {
  body.scrolling-down #site-menu { top: calc(-1 * var(--meta-h)); }
}
html.cpv-header-hidden #site-menu { transform: translateY(-100%); }
body.has-offcanvas #site-menu { transform: none !important; }
/* product quick view / lightbox open: the sticky header goes under the dark overlay instead of covering the popup */
html.with-featherlight #site-menu,
body:has(.featherlight, .litebox, .lightbox.in, .modal.in, .modal.show) #site-menu { z-index: 1 !important; }
html { scroll-padding-top: 200px; }   /* in-page links (#kategorije, FAQ) land below the sticky header */
@media (min-width: 992px) { #box-also-purchased-products { top: 200px; } }
#site-menu .navbar { display: block; margin: 0 !important; padding: 0 !important; background: transparent; border-radius: 0; }

/* 5a. info line */
#site-menu .header-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--meta-h);
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
#site-menu .header-meta-bar .meta-left { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#site-menu .header-meta-bar .meta-right { gap: 20px; font-size: 13px; flex-shrink: 0; }
#site-menu .header-meta-bar .meta-right a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; }
#site-menu .header-meta-bar .meta-right a:hover { color: var(--red-ink); }
#site-menu .header-meta-bar .meta-right svg { width: 15px; height: 15px; color: var(--muted); }

/* 5b. main row */
#site-menu .navbar-header {
  position: static !important;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  margin: 0 !important;
  padding: 25px 0 !important;
  background: transparent;
}
#site-menu .navbar-header .logotype { display: block; line-height: 0; }
#site-menu .navbar-header .logotype img { max-height: 55px; max-width: 258px; width: auto; height: auto; }

/* search */
#site-menu .navbar-search { width: 100%; max-width: 560px; margin: 0 auto; }
#site-menu form[name="search_form"] .input-group {
  height: 44px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  box-shadow: none;
  transition: border-color 160ms, box-shadow 160ms;
}
#site-menu form[name="search_form"] .input-group:hover { border-color: #c7cac6; }
#site-menu form[name="search_form"] .input-group:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(28, 30, 29, 0.06); }
#site-menu form[name="search_form"] .input-group-icon { margin: 0; padding: 0 2px 0 16px; color: var(--muted); display: flex; }
#site-menu form[name="search_form"] .input-group-icon svg { width: 17px; height: 17px; }
#site-menu form[name="search_form"] .form-control {
  height: 100%;
  padding: 0 10px;
  font-size: 15.1px;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  color: var(--ink);
}
#site-menu form[name="search_form"] .form-control::placeholder { color: var(--muted); }
#site-menu .search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  margin-right: 4px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--band);
  color: var(--ink);
  font: 500 14px/1 var(--font);
  cursor: pointer;
  transition: background 160ms, color 160ms;
}
#site-menu .search-submit:hover { background: var(--ink); color: #fff; }
#site-menu .search-submit svg { width: 15px; height: 15px; }

/* account + cart */
#site-menu .quick-access { display: flex; align-items: center; gap: 8px; font-size: 14.6px; }
#site-menu .quick-access > a { color: var(--ink); text-decoration: none; }
#site-menu .quick-access .navbar-icon { font-size: inherit; line-height: 0; }
#site-menu .quick-access .navbar-icon svg { display: block; width: 19px; height: 19px; margin: 0 !important; }
#site-menu .quick-access .account,
#site-menu .quick-access #cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin: 0;
  padding: 0 16px 0 13px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 160ms, color 160ms, border-color 160ms;
}
#site-menu .quick-access .account { color: var(--ink-2); }
#site-menu .quick-access .account:hover { background: var(--band); color: var(--ink); }
#site-menu .quick-access #cart { background: var(--ink); color: #fff; }
#site-menu .quick-access #cart:hover { background: var(--ink-2); }
#site-menu .quick-access small { font-size: 14.6px; font-weight: 500; }
#site-menu .quick-access #cart .badge {
  position: static;
  display: inline-grid;
  place-items: center;
  width: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--red-btn);
  color: #fff;
  font: 600 12px/1 var(--font);
  animation: none;
}
#site-menu .quick-access #cart .badge:empty { display: none; }

/* hamburger */
#site-menu .navbar-toggler {
  display: inline-grid;
  place-content: center;
  gap: 4px;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  box-shadow: none;
}
#site-menu .navbar-toggler .icon-bar { width: 17px; height: 1.6px; margin: 0; top: 0; border-radius: 2px; background: var(--ink); }
#site-menu .navbar-toggler .icon-bar + .icon-bar { margin-top: 0; }

/* --- 6. Category menu --------------------------------------------------------------- */
#category-bar ul.category-top-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start;
  gap: 2px;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
#category-bar ul.category-top-nav li { position: relative; display: block; padding: 0; text-align: left; align-items: stretch; }
#category-bar ul.category-top-nav li a {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink-2);
  transition: background 160ms, color 160ms;
}
#category-bar .category-top-nav .svg-container {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  max-width: none;
  margin: 0;
  padding: 6px;
  aspect-ratio: auto;
  border-radius: 8px;
  background: var(--band);
  transition: background 160ms;
}
#category-bar .category-top-nav .svg-container svg,
#category-bar .category-top-nav .svg-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
  opacity: 0.85;
}
#category-bar ul.category-top-nav li a .name,
#category-bar ul.category-top-nav li a:hover .name,
#category-bar ul.category-top-nav li.active > a .name {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  color: inherit;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.25;
  text-align: left;
  overflow: visible;
}
#category-bar .category-top-nav .name::after { display: none; }
#category-bar ul.category-top-nav li a:hover { color: var(--ink); }
#category-bar ul.category-top-nav li a:hover .svg-container { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); }
#category-bar ul.category-top-nav li.active > a { color: var(--ink); }
#category-bar ul.category-top-nav li.active > a .svg-container { background: var(--red-50); box-shadow: inset 0 0 0 1px var(--red-100); }

@media (min-width: 992px) {
  #category-bar { border-top: 1px solid var(--line); }
  #category-bar ul.category-top-nav li { flex: 1 1 0; min-width: 0; }
  /* icon above the text */
  #category-bar ul.category-top-nav li a { height: 100%; min-height: 0; flex-direction: column; align-items: center; justify-content: flex-start; gap: 9px; padding: 16px 6px 15px; text-align: center; }
  #category-bar .category-top-nav .svg-container { width: 51px; height: 51px; padding: 8px; border-radius: 12px; }
  /* one text size for normal, hover and active – nothing shifts on mouse-over */
  #category-bar ul.category-top-nav li a .name,
  #category-bar ul.category-top-nav li a:hover .name,
  #category-bar ul.category-top-nav li:hover > a .name,
  #category-bar ul.category-top-nav li.active > a .name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #category-bar ul.category-top-nav li a::after { display: none !important; }   /* no lines under the category items */
}
@media (min-width: 992px) and (max-width: 1199px) {
  #category-bar .category-top-nav .svg-container { width: 40px; height: 40px; padding: 7px; border-radius: 10px; }
  #category-bar ul.category-top-nav li a { padding-left: 3px; padding-right: 3px; text-align: center; }
  #category-bar ul.category-top-nav li a .name,
  #category-bar ul.category-top-nav li a:hover .name,
  #category-bar ul.category-top-nav li:hover > a .name,
  #category-bar ul.category-top-nav li.active > a .name { text-align: center; font-size: 13px; }
}

/* mobile & tablet: swipeable chips */
@media (max-width: 991px) {
  #category-bar { margin: 0 calc(-1 * var(--page-pad)); padding: 0 0 12px; }
  #category-bar ul.category-top-nav {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding: 0 var(--page-pad);
    scroll-padding: 0 var(--page-pad);
  }
  #category-bar ul.category-top-nav::-webkit-scrollbar { display: none; }
  #category-bar ul.category-top-nav li { flex: 0 0 auto; scroll-snap-align: start; }
  #category-bar ul.category-top-nav li a {
    height: 38px;
    gap: 7px;
    padding: 0 14px 0 6px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--paper);
  }
  #category-bar .category-top-nav .svg-container { width: 26px; height: 26px; padding: 4px; border-radius: 50%; }
  #category-bar ul.category-top-nav li a .name { white-space: nowrap; font-size: 14px; }
  #category-bar ul.category-top-nav li.active > a { border-color: var(--ink); }
}

/* header – responsive */
@media (max-width: 1199px) {
  #site-menu .quick-access .account small { display: none; }
  #site-menu .quick-access .account { width: 40px; padding: 0; justify-content: center; }
}
@media (max-width: 991px) {
  #site-menu .navbar-header { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 12px !important; }
  #site-menu .quick-access { display: contents; }
  #site-menu .navbar-toggler { order: 0; }
  #site-menu .navbar-header .logotype { order: 1; flex: 1 1 auto; min-width: 0; margin-left: 4px; }
  #site-menu .navbar-header .logotype img { max-height: 36px; max-width: 170px; }
  #site-menu .quick-access .account { order: 2; border: 1px solid var(--line-2); }
  #site-menu .quick-access #cart { order: 3; }
  #site-menu .navbar-search { order: 10; flex: 1 1 100%; max-width: none; }
  #site-menu .search-submit { width: 34px; padding: 0; }
}
@media (max-width: 767px) {
  #site-menu .quick-access #cart { width: 42px; height: 42px; padding: 0; justify-content: center; }
  #site-menu .quick-access .account { width: 42px; height: 42px; }
  #site-menu .quick-access #cart .badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; font-size: 11.4px; box-shadow: 0 0 0 2px var(--paper); }
}

/* --- 7. Mobile menu (off-canvas) ------------------------------------------------- */
.offcanvas { width: min(88vw, 360px); background: var(--paper); border-radius: 0 var(--r-lg) var(--r-lg) 0; box-shadow: var(--shadow-soft); }
.offcanvas .offcanvas-header { padding: 16px 16px 14px 22px; border-bottom: 1px solid var(--line); }
.offcanvas .offcanvas-header .offcanvas-title { font-size: 17.7px; font-weight: 600; }
.offcanvas .offcanvas-header [data-toggle="dismiss"] { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); box-shadow: none; }
.offcanvas .offcanvas-body { padding: 10px 12px 24px; }
.offcanvas .navbar-nav { list-style: none; margin: 0 0 12px; padding: 0; }
.offcanvas .navbar-nav + .navbar-nav { padding-top: 12px; border-top: 1px solid var(--line); }
.offcanvas .nav-link { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-radius: var(--r); color: var(--ink); font-size: 16.6px; font-weight: 500; text-decoration: none; }
.offcanvas .nav-link:hover { background: var(--band); color: var(--ink); }
.offcanvas .dropdown-menu { position: static; float: none; margin: 2px 0 8px 12px; padding: 2px 0 2px 10px; border: 0; border-left: 1px solid var(--line-2); border-radius: 0; box-shadow: none; background: transparent; }
.offcanvas .dropdown-menu .nav-link { font-size: 15.6px; padding: 9px 12px; color: var(--ink-2); font-weight: 400; }

/* --- 8. Sidebar (category pages) ------------------------------------------------- */
#sidebar .card-title {
  /* keeps the original 49.41px title block so the sidebar stays level with the content */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 17.68px 2px;
  font: 600 16.6px/31.73px var(--font);
  letter-spacing: 0;
  color: var(--ink);
}
#sidebar .card-title svg { width: 18px; height: 18px; color: var(--muted); }
#box-category-tree.box-categories {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: none;
}
#box-category-tree .card-body { padding: 6px; }
.mim-item { border-bottom: 0; }
.mim-link { gap: 12px; padding: 7px 10px; border-radius: 8px; color: var(--ink-2); font-weight: 400; transition: background 140ms, color 140ms; }
.mim-text { font-size: 15.1px; line-height: 1.35; flex: 1 1 auto; min-width: 0; }
.mim-svg-icon { width: 32px; height: 32px; padding: 6px; border-radius: 8px; background: var(--band); color: var(--ink); font: 600 11.4px/1 var(--font); }
.mim-separator { display: none; }
.mim-item:hover > .mim-link { background: var(--band); color: var(--ink); font-weight: 400; }
.mim-item.active > .mim-link { background: var(--red-50); color: var(--red-ink); font-weight: 500; }
.mim-item.active .mim-svg-icon { background: var(--paper); box-shadow: inset 0 0 0 1px var(--red-100); }
.mim-opened-list { padding: 4px 0 10px 54px !important; background: transparent; }
.mim-opened-list li > a { color: var(--muted); font-size: 14.6px; }
.mim-opened-list li.current > a,
.mim-opened-list li > a:hover,
.mim-opened-list li.current > a::before,
.mim-opened-list li > a:hover::before { color: var(--red-ink); }
.mim-opened-sublist li.current > a { color: var(--red-ink); }
#sidebar > * + * { margin-top: 22px; }
#sidebar .card { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; }
#box-recently-viewed-products .listing { grid-template-columns: repeat(4, 1fr); gap: 8px; }
#box-recently-viewed-products .link { display: block; border-radius: 8px; background: var(--tile-bg); }
#box-recently-viewed-products .img-thumbnail { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 8px; border: 0; border-radius: 8px; background: transparent; mix-blend-mode: multiply; }
#box-recently-viewed-products .card-header,
#box-recently-viewed-products .card-body { padding: 0; }

/* --- 9. Banner slider ------------------------------------------------------------- */
#box-slides {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: none;
  background: var(--band);
  margin-bottom: 0;
}
#box-slides .carousel-inner > .item img { display: block; }
#box-slides .carousel-control {
  top: 50%;
  bottom: auto;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink) !important;
  text-shadow: none;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 180ms, background 160ms;
}
#box-slides .carousel-control.left { left: 14px; }
#box-slides .carousel-control.right { right: 14px; }
#box-slides:hover .carousel-control { opacity: 1; }
#box-slides .carousel-control:hover { background: #fff; border-radius: 50%; }
#box-slides .carousel-control .icon-prev,
#box-slides .carousel-control .icon-next { position: static; width: auto; height: auto; margin: 0; font-size: 0; line-height: 0; display: grid; place-items: center; }
#box-slides .carousel-control svg { width: 20px; height: 20px; }
#box-slides .carousel-control svg path { filter: none; }
#box-slides .carousel-indicators { left: 50%; right: auto; bottom: 12px; width: auto; margin: 0; transform: translateX(-50%); display: flex; gap: 6px; opacity: 1; padding: 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); }
#box-slides .carousel-indicators li { width: 6px; height: 6px; margin: 0; border: 0; border-radius: 3px; background: rgba(28, 30, 29, 0.25); text-indent: -999px; overflow: hidden; cursor: pointer; transition: width 260ms var(--ease), background 200ms; }
#box-slides .carousel-indicators .active { width: 18px; height: 6px; margin: 0; background: var(--ink); }
@media (hover: none) {
  #box-slides .carousel-control { opacity: 0.9; width: 34px; height: 34px; margin-top: -17px; }
  #box-slides .carousel-control.left { left: 8px; }
  #box-slides .carousel-control.right { right: 8px; }
  #box-slides .carousel-control svg { width: 16px; height: 16px; }
}
@media (max-width: 575px) { #box-slides { border-radius: var(--r); } #box-slides .carousel-indicators { bottom: 6px; } }

/* --- 10. Homepage ------------------------------------------------------------------- */
.cpv-home { margin-top: -28px; }
.cpv-home > .fourteen-forty:first-of-type { position: relative; }   /* the intro sets its own top space */
.cpv-intro { position: relative; overflow: hidden; }
.cpv-intro::before {   /* very soft drifting light */
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 60%; height: 100%;
  background: radial-gradient(closest-side, rgba(238, 53, 56, 0.06), transparent), radial-gradient(closest-side at 70% 60%, rgba(160, 163, 160, 0.12), transparent);
  animation: cpv-drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes cpv-drift { to { transform: translate(-6%, 4%); } }
.cpv-intro-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px 64px;
  align-items: end;
  padding: clamp(32px, 3.6vw, 50px) 0 clamp(28px, 3.4vw, 50px);
}
.cpv-kicker { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.cpv-kicker span { width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: 0 0 auto; }
.cpv-intro-title { margin: 18px 0 0; font-size: clamp(31.2px, 3.74vw, 49.9px); line-height: 1.12; font-weight: 500; letter-spacing: -0.025em; color: var(--ink); max-width: 15em; }
.cpv-intro-text { margin: 0; color: var(--ink-2); font-size: 16.1px; line-height: 1.6; max-width: 32em; }
.cpv-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.cpv-btn { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 999px; font-size: 14.6px; font-weight: 500; text-decoration: none; transition: background 160ms, border-color 160ms, color 160ms; }
a.cpv-btn-dark, a.cpv-btn-dark:link, a.cpv-btn-dark:visited { background: var(--ink); color: #fff; }
a.cpv-btn-dark:hover { background: var(--ink-2); color: #fff; }
a.cpv-btn-line, a.cpv-btn-line:link, a.cpv-btn-line:visited { border: 1px solid var(--line-2); color: var(--ink); }
a.cpv-btn-line:hover { border-color: var(--ink); color: var(--ink); }

.cpv-band { margin-top: var(--sec-gap); padding: clamp(24px, 2.8vw, 40px) 0 clamp(32px, 4vw, 56px); background: linear-gradient(var(--band), var(--band-2)); }   /* grey starts right at the top edge: same space above "Kategorije" as under the grey area */
.cpv-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 24px; }
.cpv-head h2 { margin: 0; font-size: clamp(22.9px, 2.29vw, 29.1px); line-height: 1.2; font-weight: 500; }
.cpv-head p { margin: 6px 0 0; color: var(--muted); }
.cpv-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cpv-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 132px;
  padding: 20px;
  border-radius: var(--r-tile);
  background: var(--paper);
  border: 1px solid rgba(28, 30, 29, 0.04);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 300ms var(--ease);
}
.cpv-cat:hover { color: var(--ink); box-shadow: var(--shadow-soft); }
.cpv-cat-icon { display: grid; place-items: center; width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--band); transition: transform 300ms var(--ease); }
.cpv-cat-icon svg, .cpv-cat-icon img { width: 100% !important; height: 100% !important; object-fit: contain; opacity: 0.85; }
.cpv-cat:hover .cpv-cat-icon { transform: translateY(-2px); }
.cpv-cat-name { font-size: 15.6px; font-weight: 500; line-height: 1.35; padding-right: 28px; }
.cpv-cat-arrow {
  position: absolute; right: 18px; bottom: 20px;
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  color: var(--muted);
  transition: transform 220ms var(--ease), color 160ms;
}
.cpv-cat:hover .cpv-cat-arrow { color: var(--ink); transform: translateX(3px); }

.cpv-home-content { padding-top: var(--sec-gap); }
.cpv-split { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cpv-split > div { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-tile); background: var(--card-wash); border: 1px solid var(--line); }
.cpv-split h3 { margin: 0; font-size: 21.8px; line-height: 1.25; }
.cpv-split p { margin: 10px 0 20px; color: var(--ink-2); max-width: 30em; }
.cpv-split .cpv-split-contact { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.cpv-split small { color: var(--muted); font-size: 13.5px; }
.cpv-split small a { color: inherit; text-decoration: none; }
.cpv-split-phone { font-size: clamp(25px, 2.5vw, 31.2px); font-weight: 500; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }

@media (max-width: 991px) {
  .cpv-intro-grid { grid-template-columns: 1fr; align-items: start; }
  .cpv-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cpv-split { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .cpv-cat { min-height: 112px; padding: 16px; gap: 14px; }
  .cpv-cat-name { font-size: 14.6px; }
  .cpv-head { flex-direction: column; align-items: start; }
}

/* --- 11. Product sections + cards -------------------------------------------------- */
.cpv-home-content > section.card,
#box-campaign-products,
#box-latest-products,
#box-popular-products,
#box-similar-products,
#box-also-purchased-products {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: var(--sec-gap);
}
.cpv-home-content > section.card > .card-header,
#box-campaign-products > .card-header,
#box-latest-products > .card-header,
#box-popular-products > .card-header,
#box-similar-products > .card-header,
#box-also-purchased-products > .card-header,
.cpv-home-content > section.card > .card-body,
#box-campaign-products > .card-body,
#box-latest-products > .card-body,
#box-popular-products > .card-body,
#box-similar-products > .card-body,
#box-also-purchased-products > .card-body { padding: 0; background: transparent; }
.cpv-home-content > section.card > .card-header,
#box-campaign-products > .card-header,
#box-latest-products > .card-header,
#box-popular-products > .card-header,
#box-similar-products > .card-header,
#box-also-purchased-products > .card-header { margin-bottom: 20px; }
.cpv-home-content > section.card > .card-header .card-title,
#box-campaign-products > .card-header .card-title,
#box-latest-products > .card-header .card-title,
#box-popular-products > .card-header .card-title,
#box-similar-products > .card-header .card-title,
#box-also-purchased-products > .card-header .card-title { margin: 0; font-size: clamp(22.9px, 2.29vw, 29.1px); line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }

.listing { grid-gap: 28px 18px; }
.listing.products.columns { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 768px) { .listing.products.columns { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }

.listing .product {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  transform: none;
  box-shadow: none !important;
}
.listing .product .link { display: flex; flex-direction: column; flex: 1 1 auto; color: var(--ink); }
.listing.columns .product .image-wrapper {
  position: relative;
  padding: 10%;
  border-radius: var(--r-tile);
  background: var(--tile-bg);
  box-shadow: inset 0 0 0 1px rgba(28, 30, 29, 0.035);
  overflow: hidden;
}
.listing.columns .product .image { mix-blend-mode: multiply; transition: transform 500ms var(--ease); }
.listing .product .image-wrapper .sticker {
  position: absolute;
  top: 10px;
  left: 10px;
  width: auto;
  padding: 3px 9px;
  border-radius: 999px;
  transform: none;
  font: 500 12px/1.4 var(--font);
  letter-spacing: 0;
  text-transform: none;
  background: #fff !important;
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.listing .product .image-wrapper .sticker.sale { color: var(--red-ink); border-color: var(--red-100); }
.listing.columns .product .info { display: flex; flex-direction: column; flex: 1 1 auto; gap: 4px; padding: 12px 2px 0; text-align: left; }
.listing .product .name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: auto;
  margin: 0;
  font-size: 14.6px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-2);
}
.listing .product .manufacturer-name { display: none; }
.listing.columns .product .price-wrapper { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 2px; font-size: 1em; }
.listing .product .price-wrapper .price,
.listing .product .price-wrapper .campaign-price { font-size: 15.6px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.listing .product .price-wrapper .campaign-price { color: var(--red-ink); order: 2; }
.listing .product .price-wrapper .regular-price { font-size: 14px; color: var(--muted); order: 1; }
@media (hover: hover) {
  .listing.columns .product:hover .image { transform: scale(1.04); }
  .listing .product:hover .name { color: var(--ink); }
}
.listing .product .preview {
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}
.listing .product .preview:hover { background: var(--ink) !important; color: #fff; border-color: var(--ink); }
.listing.rows .product { flex-direction: row; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.listing.rows .product .link { flex-direction: row; align-items: center; padding: 0; }
.listing.rows .product .image-wrapper { border-radius: var(--r-tile); background: var(--tile-bg); padding: 8px; }
.listing.rows .product .image { mix-blend-mode: multiply; }
@media (max-width: 575px) {
  .listing { grid-gap: 22px 12px; }
  .listing .product .name { font-size: 14px; -webkit-line-clamp: 3; }
}
.product.no-hover-effect { border: 1px solid var(--line) !important; border-radius: var(--r-lg); background: var(--paper); }

/* --- 12. Generic components ------------------------------------------------------- */
.card { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; }
.card .card-header .card-title { font-weight: 500; letter-spacing: -0.01em; }
.card .card-footer { box-shadow: none; border-top: 1px solid var(--line); }
.btn { border-radius: 999px; font-weight: 500; box-shadow: none; transition: background-color 160ms, border-color 160ms, color 160ms; }
.btn.active, .btn:active { box-shadow: none !important; }
.btn.btn-default { border: 1px solid var(--line-2); }
.btn.btn-default:hover:not(.active):not(.disabled):not([disabled]) { border-color: var(--ink); background: var(--paper); }
.btn.btn-success:hover:not(.active):not(.disabled):not([disabled]) { background: var(--red-ink); border-color: var(--red-ink); }
.btn.btn-lg { padding: 0.7em 1.6em; font-size: 1.05em; }
.form-control,
.input-group { border: 1px solid var(--line-2); background-color: var(--paper); }
.form-control { border-radius: var(--r); }
.input-group { border-radius: var(--r); }
textarea.form-control { border-radius: var(--r); }
.form-control:focus,
.input-group:focus-within { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(28, 30, 29, 0.06); }
.input-group .form-control,
.input-group .form-control:focus { border: 0; box-shadow: none; }
.input-group .input-group-text { background: var(--band); border-color: var(--line-2); color: var(--muted); }
/* input groups (e-mail, phone, password, user, quantity …): same height and corners as a normal field */
.input-group { align-items: stretch; }
.input-group > .input-group-text { display: flex; align-items: center; justify-content: center; margin: 0; padding-top: 0; padding-bottom: 0; line-height: 1; border-top: 0; border-bottom: 0; }
.input-group > .input-group-text svg,
.input-group > .input-group-text .fa { display: block; width: 18px; height: 18px; flex: 0 0 auto; font-size: 16px; line-height: 18px; text-align: center; }
.input-group > .input-group-text:first-child { margin-inline-start: 0; border-inline-start: 0; border-radius: calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px); }
.input-group > .input-group-text:last-child { margin-inline-end: 0; border-inline-end: 0; border-radius: 0 calc(var(--r) - 1px) calc(var(--r) - 1px) 0; }
.input-group > .form-control:first-child { border-radius: calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px); }
.input-group > .form-control:last-child { border-radius: 0 calc(var(--r) - 1px) calc(var(--r) - 1px) 0; }
.input-group > .form-control:only-child { border-radius: calc(var(--r) - 1px); }
.input-group > .btn { padding-top: 0; padding-bottom: 0; }
.input-group > .input-group-btn { display: flex; }
.input-group > .input-group-btn > .btn { height: 100%; margin: 0; padding-top: 0; padding-bottom: 0; border: 0 !important; border-inline-start: 1px solid var(--line-2) !important; }
.input-group > .input-group-btn:last-child > .btn { border-radius: 0 calc(var(--r) - 1px) calc(var(--r) - 1px) 0 !important; }
.input-group > .form-control:first-child[style*="border-radius"] { border-radius: calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px) !important; }
.form-group > label, label { font-weight: 500; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }
ul.breadcrumb { margin: 0 0 18px; padding: 0; background: transparent; border: 0; font-size: 13.5px; color: var(--muted); }
ul.breadcrumb li:not(:last-child)::after { content: '›'; padding: 0 0.6em; color: var(--line-2); }
ul.breadcrumb li:last-child { color: var(--ink); }
ul.breadcrumb li a { text-decoration: none; }
.table { border-color: var(--line); }
.table th { font-weight: 600; }
.pagination > li > a,
.pagination > li > span { border-radius: 999px !important; margin: 0 3px; border-color: var(--line); min-width: 38px; text-align: center; }
.pagination > .active > a,
.pagination > .active > span { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.alert { border-radius: var(--r); }
.nav-tabs a { border-radius: var(--r) var(--r) 0 0; font-weight: 500; }

/* --- 13. Category page (full width) ------------------------------------------------- */
.cpv-category { padding-top: 2px; }
#box-category > .row:first-of-type { margin-bottom: var(--sec-gap) !important; }
#box-category .category-front {
  position: relative;
  align-items: start;   /* image stays at the top when "Preberi več" opens the text */
  padding: clamp(22px, 3vw, 44px) !important;
  background-color: var(--band-2);
  border: 1px solid var(--line);
  border-radius: 18px !important;
  grid-gap: 20px clamp(20px, 3vw, 48px);
  overflow: hidden;
  isolation: isolate;
}
#box-category .category-front::before {   /* the same soft light as the homepage intro */
  content: '';
  position: absolute;
  z-index: -1;
  right: -15%; top: -70%;
  width: 70%; height: 240%;
  background: radial-gradient(closest-side, rgba(238, 53, 56, 0.05), transparent), radial-gradient(closest-side at 70% 60%, rgba(160, 163, 160, 0.12), transparent);
  animation: cpv-drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}
#box-category .category-front.cpv-has-color {   /* admin colour: no flat fill, a soft circular light in that colour instead */
  background: var(--band-2) !important;
  border-color: color-mix(in srgb, var(--cat-color) 16%, var(--line));
}
#box-category .category-front.cpv-has-color::before {
  right: -12%; top: -80%;
  width: 78%; height: 260%;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--cat-color) 30%, transparent), transparent),
    radial-gradient(closest-side at 70% 60%, rgba(160, 163, 160, 0.10), transparent);
}
#box-category .category-front.cpv-has-color::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -12%; bottom: -70%;
  width: 46%; height: 160%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cat-color) 13%, transparent), transparent);
  pointer-events: none;
}
#box-category .cat-col-image { align-self: start; }
#box-category .cat-image-1x1 { max-width: 280px; border-radius: 12px; background: var(--tile-bg); padding: 8%; box-shadow: inset 0 0 0 1px rgba(28, 30, 29, 0.04); }
#box-category .cat-image-1x1 img { object-fit: contain; mix-blend-mode: multiply; }
#box-category .category-front-right { padding: 0; }
#box-category h1.title { margin: 0 0 14px; font-size: clamp(31.2px, 3.54vw, 37px); line-height: 1.1; font-weight: 500; letter-spacing: -0.025em; }
#box-category .category-front-right .description,
#box-category .cat-desc-content { font-size: 16.1px; line-height: 1.65; text-align: left; max-width: 70ch; }   /* colour inherited: admins can set text_color per category */
#box-category .cat-read-more-btn { align-items: center; gap: 6px; margin-top: 6px; color: inherit; font-size: 14.6px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
#box-category .faq-jump-link { font-size: 14.6px !important; font-weight: 500 !important; }
#box-category #category-ads-carousel,
#box-category .category-front .thumbnail { border-radius: 12px; overflow: hidden; }

/* subcategories: white cards on a very light full-width band; the subcategory image sits in the card background, full size and dimmed */
#box-category .listing.categories {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin: 0 0 var(--sec-gap) !important;
  padding: clamp(24px, 3.2vw, 44px) 0;
  background: var(--band-2);
  box-shadow: 0 0 0 100vmax var(--band-2);
  clip-path: inset(0 -100vmax);
}
#box-category .listing .category-no-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 176px;   /* room for the picture tile + the title below it */
  padding: 18px 20px;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  border: 1px solid rgba(28, 30, 29, 0.06);
  border-radius: var(--r-tile);
  text-align: left;
  transition: box-shadow 300ms var(--ease), border-color 200ms;
}
#box-category .listing .category-no-box > .link { position: static; display: block !important; padding: 0; color: var(--ink); text-decoration: none; }
#box-category .listing .category-no-box > .link::before { content: ''; position: absolute; inset: 0; z-index: 0; }   /* whole card is the link */
#box-category .listing .category-no-box img {   /* the image as a rounded square tile, top left, behind the text */
  position: absolute;
  z-index: -2;
  top: 16px;
  left: 16px;
  display: block !important;
  width: var(--sub-tile, 92px) !important;
  height: var(--sub-tile, 92px) !important;
  max-width: none;
  margin: 0 !important;
  padding: 0;
  border-radius: 12px;
  background: var(--tile-bg);
  box-shadow: inset 0 0 0 1px rgba(28, 30, 29, 0.06);
  aspect-ratio: 1 / 1 !important;
  object-fit: cover;
  object-position: center;
  opacity: 0.82;   /* a little transparent, so text running over it stays readable */
  transition: opacity 300ms var(--ease), transform 400ms var(--ease);
}
#box-category .listing .category-no-box.cpv-text-over img { opacity: 0.3; }   /* text runs over the picture */
#box-category .listing .category-no-box::before {   /* keeps the text side clean */
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0) 65%);
  pointer-events: none;
}
#box-category .listing.categories > .cpv-sub-title { grid-column: 1 / -1; margin: 0 0 6px; font-size: clamp(22.9px, 2.29vw, 29.1px); line-height: 1.2; font-weight: 500; color: var(--ink); }
#box-category .listing .category-no-box .caption { position: relative; padding: 0; min-width: 0; text-align: left; }
#box-category .listing .category-no-box .name { display: block; margin: 0 !important; padding-right: 26px; font-weight: 500; font-size: 16.6px; line-height: 1.3; text-wrap: balance; }
#box-category .listing .category-no-box .short-description { margin-top: 4px; font-size: 14px; color: var(--muted); }
#box-category .listing .category-no-box .short-description:empty { display: none; }
#box-category .listing .category-no-box .sub-sub-list { margin-top: 8px !important; font-size: 13.5px !important; color: var(--ink-2) !important; line-height: 1.45 !important; }
#box-category .listing .category-no-box .sub-sub-list { position: relative; z-index: 1; }
#box-category .listing .category-no-box .sub-sub-list a { display: block; width: fit-content; margin-bottom: 1px !important; }
#box-category .listing .category-no-box .sub-sub-list a:hover { color: var(--red-ink) !important; }
#box-category .listing .category-no-box > .link::after {   /* arrow, top right */
  content: '';
  position: absolute;
  right: 16px;
  top: 18px;
  width: 15px;
  height: 15px;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 220ms var(--ease), background 160ms;
}
@media (hover: hover) {
  #box-category .listing .category-no-box:hover { box-shadow: var(--shadow-soft); border-color: var(--line-2); }
  #box-category .listing .category-no-box:hover img { opacity: 1; transform: scale(1.03); }
  #box-category .listing .category-no-box.cpv-text-over:hover img { opacity: 0.5; }
  #box-category .listing .category-no-box:hover > .link::after { background: var(--ink); transform: translateX(3px); }
}
@media (max-width: 991px) {
  #box-category .listing.categories { grid-template-columns: 1fr 1fr; gap: 8px; }
  #box-category .listing .category-no-box { --sub-tile: 76px; min-height: 150px; padding: 14px 16px; }
  #box-category .listing .category-no-box img { top: 14px; left: 14px; }
}
@media (max-width: 575px) {
  #box-category .listing.categories { grid-template-columns: 1fr; }
  #box-category .listing .category-no-box { min-height: 0; }
  #box-category .listing .category-no-box img { display: none !important; }   /* phones: one wide row per subcategory, no background picture */
}
/* FAQ: the same space above as everywhere, nothing extra below */
#category-faqs { margin-top: var(--sec-gap) !important; margin-bottom: 0 !important; }
#box-category > .card { margin-bottom: 0; }
#box-category#box-category > :not(script, style):not(:has(~ :not(script, style))) { margin-bottom: 0 !important; }   /* last area of the category: no space of its own */
#category-faqs .faq-panel:last-child { margin-bottom: 0 !important; }

/* product grid area */
#box-category > .card,
#box-search-results > .card,
#box-manufacturer > .card { background: transparent; border: 0; box-shadow: none; }
#box-category > .card > .card-body,
#box-search-results > .card > .card-body { padding: 0; }
#box-category > .card > .card-footer { background: transparent; border: 0; padding: 32px 0 0; }
.cpv-category .listing.products.columns { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
#box-filter { margin-bottom: 24px; padding: 10px; background: var(--band); border: 0; border-radius: var(--r); }
#category-faqs { max-width: 920px; }
#category-faqs > .title { font-size: clamp(22.9px, 2.29vw, 29.1px) !important; font-weight: 500 !important; }
#category-faqs .faq-panel { border-radius: var(--r) !important; border-color: var(--line) !important; }
#category-faqs .faq-toggle-btn { color: var(--ink) !important; font-weight: 500 !important; }

/* recently viewed, now at the bottom of category pages */
.cpv-category #box-recently-viewed-products,
.cpv-home-content #box-recently-viewed-products { margin-top: var(--sec-gap); padding-top: 28px; border-top: 1px solid var(--line); }
.cpv-category #box-recently-viewed-products .card-title,
.cpv-home-content #box-recently-viewed-products .card-title { margin: 0 0 14px; font-size: 17.7px; font-weight: 500; }
.cpv-category #box-recently-viewed-products .listing,
.cpv-home-content #box-recently-viewed-products .listing { grid-template-columns: repeat(auto-fill, 84px); gap: 8px; }

/* --- 14. Product page ------------------------------------------------------------------- */
#box-product > .card { border-radius: var(--r-lg); }
#box-product > .card > .card-body { padding: clamp(14px, 2vw, 28px); }
#box-product > .card:first-child > .card-body > .row { grid-column-gap: clamp(20px, 3vw, 48px); }
#box-product .images { grid-gap: 8px; }
#box-product .images [class*="col-"] { box-shadow: none; }
#box-product .main-image,
#box-product .extra-image {
  position: relative;
  display: flex;
  margin: 0;
  padding: 2%;
  border: 0;
  border-radius: var(--r);
  background: var(--paper);
  overflow: hidden;
  cursor: zoom-in;
}
#box-product .extra-image { padding: 8%; border-radius: var(--r-sm); border: 1px solid var(--line); transition: border-color 160ms; }
#box-product .extra-image:hover { border-color: var(--ink); }
#box-product .main-image img,
#box-product .extra-image img { margin: auto; }
#box-product .main-image img { width: auto; max-width: 100%; max-height: min(560px, 64vh); transition: transform 500ms var(--ease); }
#box-product .main-image .sticker { top: 14px; left: 14px; width: auto; padding: 3px 10px; border-radius: 999px; transform: none; font: 500 12.5px/1.4 var(--font); text-transform: none; background: #fff !important; color: var(--red-ink); border: 1px solid var(--red-100); }
#box-product .main-image .sticker.new { color: var(--ink-2); border-color: var(--line); }
#box-product h1.title { margin: 4px 0 12px; font-size: clamp(25px, 2.29vw, 33.3px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; }
#box-product .short-description { color: var(--ink-2); font-size: 15.6px; line-height: 1.6; }
#box-product .codes { font-size: 13.5px; color: var(--muted); }
#box-product .codes .value { color: var(--ink-2); }
#box-product .stock-status { display: flex; flex-direction: column; gap: 6px; font-size: 14.6px; color: var(--muted); }
#box-product .stock-status .value { color: var(--ink); font-weight: 500; }
#box-product .stock-available .value { display: inline-flex; align-items: center; gap: 7px; padding: 2px 10px 2px 8px; border-radius: 999px; background: var(--ok-50); color: var(--ok); }
#box-product .stock-available .value::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#box-product .stock-unavailable .value { color: var(--red-ink); }
#box-product form[name="buy_now_form"] { margin: 18px 0 0; padding: clamp(16px, 1.8vw, 22px); border: 0; border-radius: var(--r-lg); background: var(--band); }
#box-product .price-wrapper { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 2px; }
#box-product .price-wrapper .price,
#box-product .price-wrapper .campaign-price { font-size: clamp(29.1px, 2.5vw, 35.4px); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
#box-product .price-wrapper .campaign-price { color: var(--red-ink); order: 2; }
#box-product .price-wrapper .regular-price,
#box-product .price-wrapper .recommended-price { font-size: 16.6px; color: var(--muted); order: 1; }
#box-product .tax { color: var(--muted); font-size: 13.5px; }
#box-product .buy_now .form-group > label { font-size: 13.5px; color: var(--muted); font-weight: 500; }
#box-product .buy_now .form-group > div[style*="flex"] { gap: 8px; flex-wrap: wrap; }
#box-product .buy_now .input-group { height: 50px; background: var(--paper); border-radius: 999px; }
#box-product .buy_now .input-group .form-control { height: 100%; font-size: 16.6px; font-weight: 500; text-align: center; border-radius: 999px; }
#box-product .buy_now .input-group .input-group-text { display: flex; align-items: center; border: 0; background: transparent; border-radius: 999px; }
#box-product .buy_now [style*="padding-inline-start"] { padding: 0 !important; flex: 1 1 200px; }
#box-product button[name="add_cart_product"] { width: 100%; height: 50px; border-radius: 999px; font-size: 16.1px; font-weight: 600; }
#box-product .quantity-prices-box { background: var(--paper); border-radius: var(--r) !important; }
#box-product .quantity-prices-box .table { margin: 0; }
#box-product .stock-notice { border-radius: var(--r); }
#box-product .box-product-ad { border-radius: var(--r) !important; background: var(--paper); }
#box-product .description { font-size: 15.6px; line-height: 1.7; color: var(--ink-2); }
#box-product .description li::marker { color: var(--muted); }
#box-product .technical-data .table { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); border-collapse: separate; border-spacing: 0; }
#box-product .technical-data td { padding: 10px 14px; border: 0; }
#box-product .technical-data td:first-child { color: var(--muted); width: 40%; }
#box-product .technical-data tr + tr td { border-top: 1px solid var(--line); }

/* --- 15. Footer ----------------------------------------------------------------------- */
#footer { margin-top: 0; padding: 0; background: var(--band); color: var(--ink-2); border-top: 1px solid var(--line); }
#footer a { color: var(--ink-2); text-decoration: none; }
#footer a:hover { color: var(--ink); text-decoration: underline; }
#footer .columns {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 32px clamp(24px, 3vw, 48px);
  margin: 0;
  padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 48px);
  font-size: 14.6px;
}
#footer .columns > section { padding: 0; min-width: 0; margin: 0 !important; }
#footer .columns > section.footer-ads-double { grid-column: span 2; }
#footer .columns > section:empty { display: none; }
#footer .title { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--ink); }
#footer ul.list-unstyled { margin: 0; padding: 0; }
#footer ul.list-unstyled li { margin: 0 0 9px; line-height: 1.5; color: var(--muted); }
#footer ul.list-unstyled li:empty { display: none; }
#footer .footer-arrow { display: none; }
#footer .contact li { display: flex; align-items: flex-start; gap: 10px; }
#footer .contact li svg { flex: 0 0 auto; margin-top: 3px; width: 15px; height: 15px; color: var(--muted); }
#footer .contact li.customer-service-link { margin-top: 14px; }
#footer .contact li.customer-service-link a { text-decoration: underline; text-underline-offset: 3px; }
#footer .footer-text { margin-top: 14px; }
#footer .footer-ads .content img { border-radius: var(--r); }
#footer .contact svg:not([fill]) { fill: none; }
#footer .google-map-container { margin-top: 0 !important; }
#footer .google-map-container iframe { display: block; border-radius: var(--r-lg); border: 1px solid var(--line); filter: saturate(0.65) contrast(1.02); }
#copyright { background: var(--band); color: var(--muted); }
#copyright .container { padding: 16px var(--page-pad); border-top: 0; background: linear-gradient(var(--line), var(--line)) no-repeat top center / calc(100% - 2 * var(--page-pad)) 1px; }
#copyright .notice { font-size: 13px; text-align: left; }
@media (max-width: 767px) {
  #footer .columns { grid-template-columns: 1fr 1fr; }
  #footer .columns > section.contact,
  #footer .columns > section.footer-ads-double { grid-column: 1 / -1; }
  #copyright .notice { text-align: center; }
}
#box-cookie-notice { border-radius: var(--r-lg); box-shadow: var(--shadow-soft); border: 1px solid var(--line); }

/* --- 16. Checkout ------------------------------------------------------------------- */
body > #header,
#header.twelve-eighty {
  max-width: none;
  margin: 0 0 clamp(18px, 2.4vw, 32px);
  padding: 12px max(var(--page-pad), calc((100vw / var(--zoom) - var(--container)) / 2 + var(--page-pad)));
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
#header .logotype img { max-height: 44px; }
#header .middle .btn { height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14.6px; font-weight: 500; display: inline-flex; }
#header .middle .btn svg { width: 16px; height: 16px; }
#header .customer-service { font-size: 14.6px; color: var(--ink-2); }
#header .customer-service svg { color: var(--muted); fill: currentColor; width: 16px; height: 16px; }
#box-checkout { counter-reset: cpv-step; }
#box-checkout .card-title,
#box-checkout-shipping > .title,
#box-checkout-payment > .title {
  counter-increment: cpv-step;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19.8px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  color: var(--ink);
}
#box-checkout .card-title::before,
#box-checkout-shipping > .title::before,
#box-checkout-payment > .title::before {
  content: counter(cpv-step);
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}
#box-checkout-shipping > .title,
#box-checkout-payment > .title { margin: 4px 0 12px; }
#box-checkout-cart .item .thumbnail { border-radius: var(--r-sm); background: var(--tile-bg); }
#box-checkout-cart .item .thumbnail img { mix-blend-mode: multiply; }
#box-checkout-cart .name { font-weight: 500; }
#box-checkout-shipping .options.btn-group-vertical,
#box-checkout-payment .options.btn-group-vertical { display: flex; flex-direction: column; gap: 8px; }
#box-checkout-shipping .option.btn,
#box-checkout-payment .option.btn {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg) !important;
  background: var(--paper);
  box-shadow: none;
  text-align: start;
  transition: border-color 160ms, background 160ms;
}
#box-checkout-shipping .option.btn:hover:not(.active),
#box-checkout-payment .option.btn:hover:not(.active) { border-color: #b9bcb8 !important; background: var(--paper) !important; }
#box-checkout-shipping .option.active,
#box-checkout-payment .option.active { border-color: var(--ink) !important; background: var(--band-2) !important; box-shadow: inset 0 0 0 1px var(--ink) !important; }
#box-checkout-shipping .option .header,
#box-checkout-payment .option .header { position: relative; align-items: center; margin-bottom: 0; padding-right: 36px; }
#box-checkout-shipping .option .header::after,
#box-checkout-payment .option .header::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  background: var(--paper);
  transition: border 160ms;
}
#box-checkout-shipping .option.active .header::after,
#box-checkout-payment .option.active .header::after { border: 6px solid var(--red-btn); }
#box-checkout-shipping .option .title,
#box-checkout-payment .option .title { font-size: 15.6px; font-weight: 500; color: var(--ink); }
#box-checkout-shipping .option .price,
#box-checkout-payment .option .price { color: var(--muted) !important; font-size: 14px; }
#box-checkout-shipping .option .thumbnail img,
#box-checkout-payment .option .thumbnail img { border-radius: var(--r-sm); }
#box-checkout-shipping .option:not(.active) .content,
#box-checkout-payment .option:not(.active) .content { margin-top: 0 !important; }   /* same space under the icon on every option, with or without a description */
#box-checkout-summary .table td,
#box-checkout-summary .table th { border-color: var(--line); }
#confirm-order-button,
#box-checkout-summary button[name="confirm_order"] { min-height: 52px; padding: 0 2.2em; border-radius: 999px; font-size: 16.6px; font-weight: 600; }

/* --- 17. Motion preferences ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
#sidebar .box > .card,
#sidebar .card-body.card { padding: 14px 16px; }
.cpv-cat-grid > * { min-width: 0; }
.cpv-cat-name { overflow-wrap: anywhere; }

/* --- 18. Full category list as cards (home + category pages) ------------------------- */
.cpv-cat-tree { margin: 0; }
.cpv-cat-tree > :not(#box-category-tree):not(.mim-side-menu) { display: none !important; }   /* hours/contact/popular boxes from the old sidebar */
.cpv-cat-tree #box-category-tree,
.cpv-cat-tree #box-category-tree.box-categories { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.cpv-cat-tree #box-category-tree > :not(.card-body) { display: none; }
.cpv-cat-tree #box-category-tree .card-body { padding: 0; }
.cpv-cat-tree #box-category-tree .card-body > :not(.mim-side-menu) { display: none; }
.cpv-cat-tree .mim-side-menu { display: grid; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.cpv-cat-tree .mim-item { position: relative !important; border: 0; min-width: 0; }
.cpv-cat-tree .mim-opened-list,
.cpv-cat-tree .mim-popover,
.cpv-cat-tree .mim-separator { display: none !important; }
.cpv-cat-tree .mim-link {
  position: relative;
  display: flex !important;
  gap: 14px;
  height: 100%;
  margin: 0;
  border-radius: var(--r-tile);
  background: var(--paper);
  border: 1px solid rgba(28, 30, 29, 0.05);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  transition: box-shadow 260ms var(--ease), border-color 200ms, background 200ms;
}
.cpv-cat-tree .mim-text { font-size: 15.6px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.cpv-cat-tree .mim-svg-icon { flex: 0 0 auto; width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--band); color: var(--ink); font: 600 12.5px/1 var(--font); display: grid; place-items: center; }
.cpv-cat-tree .mim-svg-icon svg,
.cpv-cat-tree .mim-svg-icon img { width: 100% !important; height: 100% !important; max-width: none; max-height: none; object-fit: contain; opacity: 0.85; }
.cpv-cat-tree .mim-link::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 220ms var(--ease), background 160ms;
}
.cpv-cat-tree .mim-item:hover > .mim-link { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-soft); font-weight: 500; }
.cpv-cat-tree .mim-item:hover > .mim-link::after { background: var(--ink); transform: translateX(3px); }
/* selected category */
.cpv-cat-tree .mim-item.active > .mim-link { background: var(--red-50); border-color: var(--red-100); color: var(--red-ink); font-weight: 500; box-shadow: none; }
.cpv-cat-tree .mim-item.active .mim-svg-icon { background: var(--paper); box-shadow: inset 0 0 0 1px var(--red-100); }
.cpv-cat-tree .mim-item.active > .mim-link::after { background: var(--red-ink); }

/* homepage: big cards – icon on top in the middle, name + arrow below, soft wash in the category colour from admin */
.cpv-cat-tree--cards .mim-side-menu { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cpv-cat-tree--cards .mim-link {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  min-height: 160px;
  padding: 26px 18px 22px;
  text-align: center;
  background: var(--card-wash);
  border-color: rgba(28, 30, 29, 0.06);
}
.cpv-cat-tree.cpv-cat-tree--cards .mim-item > .mim-link.cpv-has-color {   /* same soft wash as the product tiles, tinted with the category colour */
  background: linear-gradient(155deg, #ffffff 0%, color-mix(in srgb, var(--cat-color) 5%, #ffffff) 50%, color-mix(in srgb, var(--cat-color) 13%, #ffffff) 100%);
  border-color: color-mix(in srgb, var(--cat-color) 14%, rgba(28, 30, 29, 0.06));
}
.cpv-cat-tree--cards .mim-svg-icon {
  width: 64px;
  height: 64px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 2px rgba(28, 30, 29, 0.05), 0 6px 16px -10px rgba(28, 30, 29, 0.25);
  transition: transform 300ms var(--ease);
}
.cpv-cat-tree--cards .mim-item:hover .mim-svg-icon { transform: translateY(-2px); }
.cpv-cat-tree--cards .mim-text { font-size: 16.2px; text-wrap: balance; }
.cpv-cat-tree--cards .mim-link::after { display: none; }
.cpv-cat-tree--cards .mim-text::after {   /* arrow right after the name */
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 7px;
  vertical-align: -2px;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 220ms var(--ease), background 160ms;
}
.cpv-cat-tree--cards .mim-item:hover > .mim-link { background: var(--card-wash); }
.cpv-cat-tree--cards .mim-item:hover .mim-text::after { background: var(--ink); transform: translateX(3px); }
.cpv-cat-tree--cards .mim-item.active > .mim-link { border-color: var(--red-100); box-shadow: inset 0 0 0 1px var(--red-100); }
.cpv-cat-tree--cards .mim-item.active .mim-text::after { background: var(--red-ink); }

/* category pages: compact cards above the category header */
.cpv-cat-tree--compact { margin: 0 0 var(--sec-gap); }
.cpv-cat-tree--compact .mim-side-menu { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.cpv-cat-tree--compact .mim-link { flex-direction: row; align-items: center; min-height: 66px; padding: 9px 38px 9px 10px; background: var(--band-2); }
.cpv-cat-tree--compact .mim-svg-icon { width: 50px; height: 50px; padding: 8px; border-radius: 12px; background: var(--paper); }
.cpv-cat-tree--compact .mim-text { font-size: 14.6px; }
.cpv-cat-tree--compact .mim-link::after { right: 14px; top: 50%; margin-top: -7px; width: 13px; height: 13px; }

@media (max-width: 767px) {
  /* one swipeable row on phones */
  .cpv-cat-tree--compact .mim-side-menu {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--page-pad)) !important;
    padding: 0 var(--page-pad) 4px !important;
    scroll-snap-type: x proximity;
  }
  .cpv-cat-tree--compact .mim-side-menu::-webkit-scrollbar { display: none; }
  .cpv-cat-tree--compact .mim-item { flex: 0 0 auto; scroll-snap-align: start; }
  .cpv-cat-tree--compact .mim-link { min-height: 46px; padding: 5px 16px 5px 6px; border-radius: 999px; }
  .cpv-cat-tree--compact .mim-link::after { display: none; }
  .cpv-cat-tree--compact .mim-svg-icon { width: 36px; height: 36px; padding: 6px; border-radius: 50%; }
  .cpv-cat-tree--compact .mim-text { white-space: nowrap; }
  .cpv-cat-tree--cards .mim-side-menu { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cpv-cat-tree--cards .mim-link { min-height: 136px; padding: 18px 10px 16px; gap: 12px; }
  .cpv-cat-tree--cards .mim-svg-icon { width: 54px; height: 54px; padding: 10px; border-radius: 14px; }
  .cpv-cat-tree--cards .mim-text { font-size: 14.6px; }
  .cpv-cat-tree--cards .mim-text::after { width: 13px; height: 13px; margin-left: 5px; }
}
@media (max-width: 991px) {
  /* pages that show the full category list don't need the header chip row as well */
  body:has(.cpv-cat-tree) #category-bar { display: none; }
  body:has(.cpv-cat-tree) #site-menu .navbar-header { padding-bottom: 12px !important; }
}

/* product options: keep the red "please choose" highlight that box_product.inc.php sets inline */
#box-product .buy_now .form-group[style*="color"] > label { color: inherit; }
@media (max-width: 480px) {
  /* checkout header: logo + contact fit on small phones (overflowed before the redesign too) */
  body > #header { gap: 12px; }
  #header .logotype { width: auto; flex: 0 1 auto; }
  #header .logotype img { max-width: 120px; }
  #header .customer-service { flex: 1 1 0; min-width: 0; width: auto; font-size: 13px; }
  #header .customer-service span { overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  /* checkout cart row: quantity + update + remove fit on small phones */
  #box-checkout-cart .btn { --input-padding-x: 0.75em; }
  #box-checkout-cart .input-group { max-width: 120px !important; }
  #box-checkout-cart [style*="margin-inline-start: 1em"] { margin-inline-start: 0.4em !important; }
}
/* checkout columns may shrink on very small phones (grid items default to min-width:auto) */
#box-checkout [class*="col-"] { min-width: 0; }
@media (max-width: 991px) {
  /* the checkout's inline 2rem gap creates 11 column gaps on a 12-column grid and overflows narrow phones */
  #box-checkout > .row { column-gap: 0 !important; }
}


/* --- 19. Bottom boxes on every shop page: extra boxes from the old sidebar (Delovni čas, Kontakt …) + the two contact boxes ------ */
.cpv-bottom { --bb-gap: 18px; margin-top: var(--sec-gap); }   /* same gap as between the products */
@media (max-width: 575px) { .cpv-bottom { --bb-gap: 12px; } }
.cpv-bottom > .fourteen-forty { display: grid; gap: var(--bb-gap); }   /* same space between the rows as between the boxes */
.cpv-bottom .cpv-extras { display: grid; gap: var(--bb-gap); grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }   /* 1 box = full width, 2 = halves, 3 = thirds */
.cpv-bottom .cpv-extras[hidden] { display: none; }
.cpv-bottom .cpv-split { gap: var(--bb-gap); }
.cpv-rv-source { display: none !important; }
/* the last box on any page brings no extra space of its own: the space above the bottom boxes / the footer is the same everywhere */
#content-wrapper> :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) ,
#content-wrapper> :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) ,
#content-wrapper> :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) ,
#content-wrapper> :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) ,
#content-wrapper> :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) ,
#content-wrapper> :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) ,
#content-wrapper> :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) { margin-bottom: 0 !important; }
#content-wrapper .row:not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) > [class*="col-"] > :not(script, style, link, template):not(:has(~ :not(script, style, link, template, .cpv-rv-source, #cpv-bottom))) { margin-bottom: 0 !important; }   /* side-by-side columns at the end of a page */
#box-product { margin-bottom: var(--sec-gap) !important; }
/* the last box of a page brings no space of its own -> the space above the bottom boxes is the same on every page */
main#content#content > :not(script, style):not(:has(~ :not(script, style))),
main#content#content > :is(section, article, .card, .box):not(:has(~ :is(section, article, div, aside, .card, .box))) { margin-bottom: 0 !important; }
.cpv-extra {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: var(--r-tile);
  border: 1px solid var(--line);
  background: var(--card-wash);
  color: var(--ink-2);
}
.cpv-extra .box, .cpv-extra section, .cpv-extra .card, .cpv-extra .card-body, .cpv-extra .card-header {
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; display: block;
}
.cpv-extra .card-header { margin-bottom: 10px !important; }
.cpv-extra .card-title, .cpv-extra h2, .cpv-extra > h3 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px; font-size: 19.8px; line-height: 1.3; font-weight: 500; color: var(--ink);
}
.cpv-extra .card-title svg, .cpv-extra h2 svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.cpv-extra strong, .cpv-extra b { color: var(--ink); font-weight: 600; }
.cpv-extra small { font-size: 14.6px; color: var(--muted); }
/* the product inside "Priljubljeno" */
.cpv-extra .product,
.cpv-extra .product.no-hover-effect { display: block; margin: 0; padding: 0; border: 0 !important; border-radius: 0; background: transparent; box-shadow: none !important; }
.cpv-extra .product .link { display: grid; grid-template-columns: minmax(120px, 42%) 1fr; align-items: center; gap: 22px; color: var(--ink); text-decoration: none; }
.cpv-extra .product .image-wrapper { padding: 8%; border-radius: var(--r-tile); background: var(--paper) !important; border: 1px solid var(--line); }
.cpv-extra .product .image { width: 100%; height: auto; transition: transform 500ms var(--ease); }
.cpv-extra .product:hover .image { transform: scale(1.04); }
.cpv-extra .product .info,
.cpv-extra .info.popular { padding: 0; text-align: left; }
.cpv-extra .product .name { display: block; height: auto; margin: 0 0 10px; font-size: 16.6px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.cpv-extra .product .price-wrapper { margin: 0; font-size: 1em; }
.cpv-extra .product .price,
.cpv-extra .product .campaign-price { font-size: 20.8px; font-weight: 600; color: var(--ink); }
.cpv-extra .product .campaign-price { color: var(--red-ink); }
.cpv-extra .product .regular-price { font-size: 14.6px; color: var(--muted); }
.cpv-extra .product .preview,
.cpv-extra .product .sticker { display: none; }
@media (max-width: 767px) {
  .cpv-bottom .cpv-extras { grid-template-columns: 1fr; }
  .cpv-extra .product .link { grid-template-columns: 110px 1fr; gap: 14px; }
}

/* normalise whatever markup the old sidebar boxes use */
.cpv-extra-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cpv-extra-head > * { margin: 0 !important; }
.cpv-extra-head svg, .cpv-extra-head img, .cpv-extra-head i { display: block; width: 18px !important; height: 18px !important; color: var(--muted); }
.cpv-extra-head .card-title, .cpv-extra-head h2, .cpv-extra-head h3, .cpv-extra-head h4 { margin: 0 !important; }
.cpv-extra h2, .cpv-extra h3:not(.name), .cpv-extra h4:not(.name), .cpv-extra .title {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  margin: 0 0 10px; font-size: 19.8px; line-height: 1.3; font-weight: 500; color: var(--ink); text-align: left;
}
.cpv-extra h2 svg, .cpv-extra h3:not(.name) svg, .cpv-extra h4:not(.name) svg, .cpv-extra .title svg,
.cpv-extra h2 i, .cpv-extra .title i { display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; color: var(--muted); }
.cpv-extra h2 br, .cpv-extra .title br { display: none; }
.cpv-extra > div:not(.cpv-extra-head),
.cpv-extra .card, .cpv-extra .card-body, .cpv-extra .box, .cpv-extra section {
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
.cpv-extra hr { margin: 10px 0; border: 0; border-top: 1px solid var(--line); }
.cpv-extra [style*="border-bottom"], .cpv-extra li + li { border-color: var(--line) !important; }
.cpv-extra ul { margin: 0; padding: 0; list-style: none; }
.cpv-extra p { margin: 0 0 6px; }

/* --- 20. Extra boxes, rebuilt format (same type as the "po vašem predlogu" boxes) ------------- */
.cpv-extra { gap: 0; }
.cpv-extra .cpv-extra-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.cpv-extra .cpv-extra-head h3 { margin: 0 !important; padding: 0; font-size: 21.8px; line-height: 1.25; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); display: block; }
.cpv-extra .cpv-extra-icon { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--band); color: var(--ink); }
.cpv-extra .cpv-extra-icon > * { display: block !important; width: 100% !important; height: 100% !important; max-width: none; margin: 0 !important; font-size: 20.8px; line-height: 22px; text-align: center; color: inherit; }
.cpv-extra .cpv-extra-icon svg:not([fill]) { fill: currentColor; }
.cpv-kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 15.6px; line-height: 1.5; }
.cpv-kv dt { margin: 0; font-weight: 500; color: var(--ink); }
.cpv-kv dd { margin: 0; color: var(--ink-2); }
.cpv-kv dd a { color: inherit; text-decoration: none; }
.cpv-kv dd a:hover { color: var(--ink); text-decoration: underline; }
.cpv-kv dt:empty { display: none; }
.cpv-kv dt:empty + dd { grid-column: 1 / -1; }
/* any leftover inner borders/tables in boxes that could not be rebuilt */
.cpv-extra table, .cpv-extra th, .cpv-extra td, .cpv-extra tr, .cpv-extra li, .cpv-extra [style*="border"] { border: 0 !important; background: transparent !important; }
@media (max-width: 480px) {
  .cpv-kv { grid-template-columns: 1fr; gap: 2px 0; }
  .cpv-kv dd + dt { margin-top: 8px; }
}
.cpv-kv dt { font-weight: 600; }