/* === Speedmax — Global stylesheet (BODY1.CSS) === */
/* Dark base */
:root { color-scheme: dark; }
html, body { background: #161616 !important; }

/* Common Shoptet wrappers */
body, #page, #content, main,
.page, .page-content, .page-wrapper,
.container, .container-fluid,
.wrapper, .wrapper-inner,
.site, .site-wrapper,
.layout, .layout__content,
.shp-wrapper, .shp-container, .shp-content,
.shp-page, .shp-page__content, .shp-page__wrapper,
section, header, footer {
  background: transparent !important;
  box-shadow: none !important;
}

/* Remove white pseudo layers */
#page::before, #page::after,
.shp-page::before, .shp-page__content::before,
.wrapper::before, .wrapper::after {
  content: none !important;
  background: transparent !important;
}

/* Blocks often forced white */
.box, .box-inner, .card, .widget,
.section--white, .content-inner, .row,
.banner, .banners, .banners__item {
  background: transparent !important;
}

/* Readable text on dark */
body, p, li, h1, h2, h3, h4, h5, h6 { color: #e9e9e9 !important; }

/* Last-resort: inline white backgrounds */
*[style*="background:#fff"],
*[style*="background: #fff"],
*[style*="background-color:#fff"],
*[style*="background-color: #fff"] {
  background: transparent !important;
}

/* ===================== BREADCRUMBS ===================== */
#content-wrapper > .breadcrumbs.navigation-home-icon-wrapper,
#content-wrapper .breadcrumbs.navigation-home-icon-wrapper,
.container.content-wrapper > .breadcrumbs.navigation-home-icon-wrapper,
div.breadcrumbs.navigation-home-icon-wrapper {
  background: #161616 !important;
  border: 0 !important;
  box-shadow: none !important;
}
#content-wrapper > .breadcrumbs.navigation-home-icon-wrapper::before,
#content-wrapper > .breadcrumbs.navigation-home-icon-wrapper::after {
  content: none !important;
  background: transparent !important;
  border: 0 !important;
}
.breadcrumbs, .breadcrumbs a, .breadcrumbs span { color: #cfcfcf !important; }
.breadcrumbs a:hover { color: #ffffff !important; }

/* ===================== MENU LEVEL 2 ===================== */
nav[id*="navigation"] ul.menu-level-2,
nav[id*="navigation"] ul.menu-level-2 > li,
nav[id*="navigation"] ul.menu-level-2 > li > a,
.menu-helper ul,
.menu-helper ul > li,
.menu-helper ul > li > a {
  background: #111111 !important;
}
nav[id*="navigation"] ul.menu-level-2,
.menu-helper ul {
  border: 1px solid #222 !important;
  box-shadow: none !important;
}
nav[id*="navigation"] ul.menu-level-2 a:hover,
.menu-helper ul a:hover {
  background: #111111 !important;
  color: #ffffff !important; /* keep readable */
}

/* === Breadcrumb bar to #161616 (wins over theme) === */
:root { --crumb-bg:#161616; --crumb-fg:#cfcfcf; }

.breadcrumbs.navigation-home-icon-wrapper,
#content-wrapper > .breadcrumbs.navigation-home-icon-wrapper,
.container.content-wrapper > .breadcrumbs.navigation-home-icon-wrapper,
div.breadcrumbs.navigation-home-icon-wrapper {
  background: var(--crumb-bg) !important;
  background-color: var(--crumb-bg) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* kill decorative pseudo plates/lines */
.breadcrumbs.navigation-home-icon-wrapper::before,
.breadcrumbs.navigation-home-icon-wrapper::after {
  content: none !important;
  background: transparent !important;
  border: 0 !important;
}

/* readable text */
.breadcrumbs, .breadcrumbs a, .breadcrumbs span { color: var(--crumb-fg) !important; }
.breadcrumbs a:hover { color: #fff !important; }

/* safety: if the wrapper has inline white background from the theme, neutralize it */
.breadcrumbs.navigation-home-icon-wrapper[style] {
  background: var(--crumb-bg) !important;
  background-color: var(--crumb-bg) !important;
}

/* === Hide category tabs/header bar (Najlacnejšie/Najdrahšie/Abecedne) === */
/* Collapse the whole block */
#category-header,
.category-header,
.category-header-wrap,
.category-header__inner,
.category-header__tabs,
.category-header .tabs,
.category-header .category-switch,
.category-header .category-navigation,
.category-header .category-sorting,
.category-header .btn-group {
  display: none !important;
  visibility: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Kill any decorative lines/plates from pseudos */
#category-header::before,
#category-header::after,
.category-header::before,
.category-header::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* choose ONE */
:root { --product-bg: #161616; } /* or #353B43 */

#products,
.products-page.products-block,
.product, .product-item, .product-box {
  background: var(--product-bg);
  color: #FFFFFF;
}

/* subtle structure so it doesn’t blend into #161616 */
.product, .product-item, .product-box {
  border: 1px solid rgba(255,255,255,0.06); /* e.g., #3A4047 on #2D3238, #424A54 on #353B43 */
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* === Product listing: 10px gaps, 4-up on desktop === */

/* 0) remove any margins/widths the theme or our old fallback added */
#products { margin: 0 !important; }
#products .product {
  margin: 0 !important;
  width: auto !important;
  flex: none !important;           /* ignore any flex-basis from theme */
}

/* 1) turn the container into a grid and add spacing */
#products {
  display: grid !important;
  gap: 10px !important;
  align-items: stretch;
}

/* 2) columns per breakpoint (adjust if you like) */
@media (min-width: 1200px) {        /* desktop */
  #products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {   /* large tablet */
  #products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {    /* tablet */
  #products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 767.98px) {       /* mobile */
  #products { grid-template-columns: 1fr !important; }
}

/* Use Chakra Petch everywhere (with sensible fallbacks) */
:root{
  --template-body-font: "Chakra Petch", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --template-headings-font: "Chakra Petch", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Force through typical template areas */
html, body, p, li,
h1,h2,h3,h4,h5,h6,
button, input, select, textarea,
nav, .nav, .menu, .breadcrumbs,
.btn, .button,
.product .name, .price, .category-title {
  font-family: var(--template-body-font) !important;
}

/* === Product card border color (accent) === */
:root { --accent: #d16527; }

/* put the border on the outer tile */
#products .product {
  border: 1px solid var(--accent) !important;
  border-radius: 10px;                 /* tweak if you prefer square corners */
  background: #161616;                /* keeps your dark card fill */
  box-shadow: none !important;
}

/* some templates draw a border on an inner wrapper — kill it so we don't get double borders */
#products .product .in,
#products .product .inner,
#products .product .product__inner,
#products .product .product-inner {
  border: 0 !important;
  box-shadow: none !important;
}

/* optional: a subtle hover pop */
#products .product:hover {
  border-color: #e1732f !important;   /* slightly brighter than #d16527 */
  transform: translateY(-1px);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* === Header nav — safe hover + persistent active ======================= */
:root{ --accent:#d16527; }

/* Desktop only (keeps layout exactly as-is) */
@media (min-width: 992px){
  /* Hover: orange + underline (no layout shift) */
  header .navigation .menu-level-1 > li > a:hover,
  header [role="menubar"] > li > a:hover,
  #navigation .menu-level-1 > li > a:hover{
    color: var(--accent) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }

  /* Active (we’ll add .smx-active via JS below) */
  header li.smx-active > a,
  header a.smx-active,
  header .navigation .menu-level-1 > li > a[aria-current="page"]{
    color: var(--accent) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }

  /* Theme wraps label in <b> → inherit */
  header .navigation .menu-level-1 > li > a > b{ color: inherit !important; }
}




/* === Header nav (navigation-in) — hover + persistent active ============== */
:root { --accent: #d16527; }

@media (min-width: 768px){
  /* Hover: orange + underline (no layout shift) */
  .navigation-in > ul > li > a:hover{
    color: var(--accent) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }

  /* Active (we'll add .smx-active on <a> and/or .is-active on <li>) */
  .navigation-in > ul > li.is-active > a,
  .navigation-in > ul > li > a.smx-active,
  .navigation-in > ul > li > a[aria-current="page"]{
    color: var(--accent) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }

  /* Theme wraps the label in <b> → make it inherit the link color */
  .navigation-in > ul > li > a > b{ color: inherit !important; }
}

/* === Active menu item (header) ========================================= */
/* Theme adds class="active" on the <a>. We override it here. */
:root { --accent:#d16527; }

@media (min-width: 768px){
  /* active = orange + underline (no layout shift) */
  .navigation-in > ul.menu-level-1 > li > a.active{
    color: var(--accent) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }

  /* ensure label wrapped in <b> inherits the color */
  .navigation-in > ul.menu-level-1 > li > a.active > b{
    color: inherit !important;
  }

  /* (optional) keep your hover as before */
  .navigation-in > ul.menu-level-1 > li > a:hover{
    color: var(--accent) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }
}

/* Mobile too, if you want it there as well */
@media (max-width: 767.98px){
  .navigation-in > ul.menu-level-1 > li > a.active{
    color: var(--accent) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
  .navigation-in > ul.menu-level-1 > li > a.active > b{
    color: inherit !important;
  }
}




/* === Header nav weight (make it bolder) === */
@media (min-width: 768px){
  .navigation-in > ul.menu-level-1 > li > a,
  .navigation-in > ul.menu-level-1 > li > a > b{
    font-weight: 600 !important;   /* was 400 */
  }
}

/* Mobile too (optional) */
@media (max-width: 767.98px){
  .navigation-in > ul.menu-level-1 > li > a,
  .navigation-in > ul.menu-level-1 > li > a > b{
    font-weight: 600 !important;
  }
}



/* Speedmax — category pills */
:root { --smx-accent: #d16527; }

/* Kill the tint overlay some themes add */
.subcategories-with-image li > a::after,
.subcategories li > a::after {
  display: none !important;
}

/* HOVER / FOCUS — force brand orange + white text, beat template by specificity */
.subcategories.subcategories li > a:is(:hover, :focus, :focus-visible),
.subcategories-with-image.subcategories-with-image li > a:is(:hover, :focus, :focus-visible) {
  background: var(--smx-accent) !important;
  border-color: var(--smx-accent) !important;
  border-width: 1px !important;
  border-style: solid !important;
  color: #fff !important;
}

/* Ensure inner icon/text follows the color */
.subcategories.subcategories li > a:is(:hover, :focus, :focus-visible) *,
.subcategories-with-image.subcategories-with-image li > a:is(:hover, :focus, :focus-visible) * {
  color: inherit !important;
}

/* If the pill has its own decorative pseudo border, hide it too */
.subcategories-with-image li::after,
.subcategories li::after {
  display: none !important;
}






/* === Search popup: dark container === */
.search-window-visible .popup-widget.search-widget,
.user-action .popup-widget.search-widget,
.user-action-search .popup-widget.search-widget,
.popup-widget.search-widget {
  background: #161616 !important;   /* the panel around the input */
  border: 0 !important;
  box-shadow: none !important;
}


/* === Speedmax: category pills – base orange border + orange fill on hover === */

/* Base (non-hover): force the orange border */
ul.subcategories.subcategories > li > a,
ul.subcategories-with-image.subcategories-with-image > li > a,
.subcategories > li > a,
.subcategories-with-image > li > a {
  border-style: solid !important;
  border-width: 1px !important;
  border-color: #d16527 !important;     /* <- orange border by default */
  background: transparent !important;    /* keep the pill empty until hover */
  color: var(--color-tertiary-hover, #fff) !important;
}

/* Remove theme overlay */
.subcategories-with-image li > a::after,
.subcategories li > a::after,
.subcategories-with-image li::after,
.subcategories li::after {
  display: none !important;
}

/* Hover/focus: orange fill + white text, keep orange border */
ul.subcategories.subcategories > li > a:is(:hover, :focus, :focus-visible),
ul.subcategories-with-image.subcategories-with-image > li > a:is(:hover, :focus, :focus-visible),
.subcategories > li > a:is(:hover, :focus, :focus-visible),
.subcategories-with-image > li > a:is(:hover, :focus, :focus-visible) {
  background: #d16527 !important;
  border-color: #d16527 !important;
  color: #fff !important;
}

/* Ensure inner icon/text follows the link color */
.subcategories-with-image li > a * ,
.subcategories li > a * {
  color: inherit !important;
}





/* === Product card CTA: orange default, white on hover === */
:root { --accent: #d16527; }

/* base state */
#products .product a.btn,
#products .product a.button,
#products .product .btn,
#products .product .button {
  background: var(--accent) !important;
  color: #fff !important;
  border: 2px solid var(--accent) !important;
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* make inner icon/arrow inherit the text color */
#products .product a.btn * ,
#products .product a.button * ,
#products .product .btn * ,
#products .product .button * { 
  color: inherit !important;
}

/* hover / focus – invert */
#products .product a.btn:hover,
#products .product a.btn:focus,
#products .product a.button:hover,
#products .product a.button:focus,
#products .product .btn:hover,
#products .product .btn:focus,
#products .product .button:hover,
#products .product .button:focus {
  background: #ffffff !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}










/* ==================== SEARCH POPUP – Speedmax ==================== */

/* The popup card itself (subtle dark card over the dimmed page)
   — added a slightly more visible border + faint inner plate for contrast */
.search-window-visible .popup-widget.search-widget{
  background:#161616 !important;                 /* matches your site */
  border:1.5px solid rgba(255,255,255,.14) !important; /* subtle, visible frame */
  border-radius:12px !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.55),                  /* depth */
    0 0 0 1px rgba(255,255,255,.03) inset !important; /* faint inner plate */
}

/* Kill any template overlay that could sit on top of the card and hide the border */
.search-window-visible .popup-widget.search-widget::before,
.search-window-visible .popup-widget.search-widget::after{
  content:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* INPUT — dark fill + brand ORANGE border (unchanged) */
.popup-widget.search-widget input[type="search"],
.popup-widget.search-widget input[type="text"]{
  background:#0f0f0f !important;
  color:#f0f0f0 !important;
  border:2px solid #d16527 !important;       /* <-- orange border stays */
  border-radius:10px !important;
  padding:12px 14px !important;
}

.popup-widget.search-widget input::placeholder{
  color:#a6a6a6 !important;
}

/* Focus ring (soft orange glow — unchanged) */
.popup-widget.search-widget input[type="search"]:focus,
.popup-widget.search-widget input[type="text"]:focus{
  outline:0 !important;
  border-color:#e1732f !important;
  box-shadow:0 0 0 3px rgba(209,101,39,.22) !important;
}




/* ==================== SEARCH POPUP – Speedmax (stronger contrast) ==================== */
.search-window-visible .popup-widget.search-widget{
  position: relative !important;
  background:#171717 !important;                       /* a touch lighter than #161616 for contrast */
  border:2px solid #2b2b2b !important;                 /* clearer frame */
  border-radius:12px !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.70),                       /* deeper drop shadow */
    0 0 0 1px rgba(255,255,255,.06) inset !important;  /* faint inner plate to avoid “flat” look */
}

/* subtle top/bottom inner highlights to define edges */
.search-window-visible .popup-widget.search-widget::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.50);
}

/* when focused/hovered, give the card a tiny lift */
.search-window-visible .popup-widget.search-widget:hover,
.search-window-visible .popup-widget.search-widget:focus-within{
  border-color:#3a3a3a !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,255,255,.08) inset !important;
}







/* === Search popup button: kill template green hover ==================== */
.search-window-visible .popup-widget.search-widget .btn,
.search-window-visible .popup-widget.search-widget .btn.btn-default,
.search-window-visible .popup-widget.search-widget .compact-form .btn,
.search-window-visible .popup-widget.search-widget .search-button {
  background:#d16527 !important;       /* brand orange */
  border-color:#d16527 !important;
  color:#fff !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* hover/focus: invert to white with orange text */
.search-window-visible .popup-widget.search-widget .btn:hover,
.search-window-visible .popup-widget.search-widget .btn:focus {
  background:#ffffff !important;
  color:#d16527 !important;
  border-color:#d16527 !important;
}

/* optional: accessible focus ring in orange */
.search-window-visible .popup-widget.search-widget .btn:focus-visible{
  outline:0 !important;
  box-shadow:0 0 0 3px rgba(209,101,39,.28) !important;
}











/* ==================== Search Whisperer (autocomplete) ==================== */
/* Container */
.searchWhisperer,
.searchWhisperer.active {
  background: #111111 !important;          /* requested dark background */
  color: #e9e9e9 !important;
  border: 1px solid #242424 !important;    /* subtle frame */
  box-shadow: 0 12px 28px rgba(0,0,0,.55) !important;
}

/* Rows / lists */
.searchWhisperer ul,
.searchWhisperer li,
.searchWhisperer .product,
.searchWhisperer .product a {
  background: transparent !important;
  color: #e9e9e9 !important;
}

/* Row separators */
.searchWhisperer li + li {
  border-top: 1px solid #242424 !important;
}

/* Product name/link on hover */
.searchWhisperer .product a:hover {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Small action buttons inside whisperer (e.g., "Detail") */
.searchWhisperer .btn,
.searchWhisperer a.btn {
  background: #d16527 !important;
  border: 1px solid #d16527 !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.searchWhisperer .btn:hover,
.searchWhisperer a.btn:hover {
  background: #ffffff !important;
  color: #d16527 !important;
  border-color: #d16527 !important;
}

/* "Show all results" link at the bottom (class names vary across themes) */
.searchWhisperer .whisperer-more,
.searchWhisperer .see-all,
.searchWhisperer .show-all {
  background: transparent !important;
  color: #d16527 !important;
  border: 0 !important;
}
.searchWhisperer .whisperer-more:hover,
.searchWhisperer .see-all:hover,
.searchWhisperer .show-all:hover {
  color: #ffffff !important;
}

/* Kill any forced white plates the theme might insert */
.searchWhisperer *[style*="background:#fff"],
.searchWhisperer *[style*="background: #fff"],
.searchWhisperer *[style*="background-color:#fff"],
.searchWhisperer *[style*="background-color: #fff"] {
  background: transparent !important;
}




/* ====== SearchWhisperer results panel – thin white frame ====== */
/* Works for both naming variants used by Shoptet (underscore / double-underscore) */
.searchWhisperer.active .searchWhisperer__products,
.searchWhisperer.active .searchWhisperer_products {
  /* tiny inner border */
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset !important;
  border-radius: 10px !important;
  background: #111111 !important; /* keep panel dark inside the popup */
}

/* Optional: make the heading match the theme on dark bg */
.searchWhisperer.active .searchWhisperer__products__heading,
.searchWhisperer.active .searchWhisperer_products__heading {
  color: #e9e9e9 !important;
}


/* ===== SearchWhisperer – product row hover highlight ===== */

/* baseline (make rows ready for animation and rounded) */
.searchWhisperer.active .searchWhisperer__products li,
.searchWhisperer.active .searchWhisperer_products li,
.searchWhisperer.active .searchWhisperer__products .item,
.searchWhisperer.active .searchWhisperer_products .item{
  border-radius: 8px;
  transition:
    background-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

/* hover effect: subtle tint + thin orange inner frame + micro lift */
.searchWhisperer.active .searchWhisperer__products li:hover,
.searchWhisperer.active .searchWhisperer_products li:hover,
.searchWhisperer.active .searchWhisperer__products .item:hover,
.searchWhisperer.active .searchWhisperer_products .item:hover{
  background: rgba(255,255,255,.05);                 /* soft contrast on #111/#161 */
  box-shadow: 0 0 0 1px rgba(209,101,39,.28) inset;  /* thin orange accent frame */
  transform: translateY(-1px);                       /* tiny lift for feedback */
}

/* (Optional) keep inner link/text inheriting color without underlines on hover */
.searchWhisperer.active .searchWhisperer__products li:hover a,
.searchWhisperer.active .searchWhisperer_products li:hover a{
  text-decoration: none !important;
  color: inherit !important;
}











/* ===================== LOGIN POPUP — Speedmax ===================== */
/* Scope it to the login user-action so we don’t touch other modals */
.user-action-login .popup-widget,
.user-action-login .popup-widget-inner {
  background: #161616 !important;            /* dark card */
  border: 3px solid #383838 !important;       /* subtle frame */
  border-radius: 12px !important;
  color: #e9e9e9 !important;
  box-shadow: 0 14px 44px rgba(0,0,0,.55) !important;
}

/* Headline */
.user-action-login .popup-widget-inner h1,
.user-action-login .popup-widget-inner h2,
.user-action-login .popup-widget-inner .popup-title {
  color: #ffffff !important;
  letter-spacing: .02em;
  font-weight: 700;
}

/* Inputs */
.user-action-login .popup-widget-inner input[type="text"],
.user-action-login .popup-widget-inner input[type="email"],
.user-action-login .popup-widget-inner input[type="password"]{
  background: #0f0f0f !important;
  color: #f0f0f0 !important;
  border: 1.6px solid #2b2b2b !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  line-height: 1.2 !important;
}
.user-action-login .popup-widget-inner input::placeholder{
  color: #a6a6a6 !important;
}
.user-action-login .popup-widget-inner input:focus{
  outline: 0 !important;
  border-color: #d16527 !important;          /* brand */
  box-shadow: 0 0 0 3px rgba(209,101,39,.22) !important;
}

/* Submit button */
.user-action-login .popup-widget-inner .btn,
.user-action-login .popup-widget-inner button[type="submit"],
.user-action-login .popup-widget-inner input[type="submit"]{
  background: #d16527 !important;
  border: 2px solid #d16527 !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 12px 18px !important;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.user-action-login .popup-widget-inner .btn:hover,
.user-action-login .popup-widget-inner button[type="submit"]:hover,
.user-action-login .popup-widget-inner input[type="submit"]:hover{
  background: #ffffff !important;
  color: #d16527 !important;
  transform: translateY(-1px);
}

/* Links (new registration, forgot password) */
.user-action-login .popup-widget-inner a{
  color: #e7e7e7 !important;
  text-decoration: none !important;
}
.user-action-login .popup-widget-inner a:hover{
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Close icon on dark */
.user-action-login .user-action-close{
  color: #ffffff !important;
  opacity: .9 !important;
}
.user-action-login .user-action-close:hover{ opacity: 1 !important; }

/* Form spacing polish (safe, only inside the login popup) */
.user-action-login .popup-widget-inner .form-line,
.user-action-login .popup-widget-inner .form-group{
  margin-bottom: 14px !important;
}

/* Validation messages (if template uses .error / .form-error) */
.user-action-login .popup-widget-inner .error,
.user-action-login .popup-widget-inner .form-error{
  color: #ffb4a6 !important;
}

/* A little breathing room on big screens */
@media (min-width: 992px){
  .user-action-login .popup-widget{
    max-width: 560px !important;
    margin: 0 auto !important;
  }
}


/* brand (only if you don't already have it) */
:root { --accent:#d16527; }

/* Search popup thumbnails: force 4:3, cover, and a subtle frame */
.searchWhisperer__product__image{
  width: 76px !important;              /* keep the same footprint */
  aspect-ratio: 4 / 3 !important;      /* <-- fixes the white background bars */
  height: auto !important;
  overflow: hidden !important;
  display: block !important;

  background:#111 !important;
  border:1px solid #363636 !important; /* use var(--accent) if you prefer orange */
  border-radius:8px !important;
}

.searchWhisperer__product__image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;         /* fill the 4:3 box */
  display:block !important;
}










/* === SpeedMax Auth forms: dark input boxes ===================== */

/* Inputs/selects/textarea (standalone pages + popups) */
input.form-control,
select.form-control,
textarea.form-control {
  background: #161616 !important;
  color: #e9e9e9 !important;
  border: 1px solid #363636 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
}

/* Placeholder */
input.form-control::placeholder,
textarea.form-control::placeholder {
  color: #a6a6a6 !important;
}

/* Focus ring (brand orange) */
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  outline: 0 !important;
  border-color: #d16527 !important;
  box-shadow: 0 0 0 3px rgba(209,101,39,.22) !important;
}

/* Error state (don’t turn field white) */
input.form-control.js-validate-error-field,
textarea.form-control.js-validate-error-field,
select.form-control.js-validate-error-field {
  background: #141414 !important;
  border-color: #e04f41 !important;
  box-shadow: 0 0 0 3px rgba(224,79,65,.18) !important;
}

/* Remove browser autofill yellow */
input.form-control:-webkit-autofill {
  -webkit-text-fill-color: #e9e9e9 !important;
  -webkit-box-shadow: 0 0 0 1000px #161616 inset !important;
  caret-color: #e9e9e9 !important;
}


/* Primary button: orange by default, invert on hover */
:root { --accent: #d16527; }

.btn.btn-primary,
a.btn.btn-primary,
span.btn.btn-primary {
  background-color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: #fff !important;
}

/* Hover / focus: white bg, orange text & border */
.btn.btn-primary:hover,
a.btn.btn-primary:hover,
span.btn.btn-primary:hover,
.btn.btn-primary:focus,
a.btn.btn-primary:focus,
span.btn.btn-primary:focus {
  background-color: #fff !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}



















/* ==== Colorbox modal — Speedmax theme ==== */
:root { 
  --card:#161616; 
  --frame:#363636; 
  --accent:#d16527; 
}

/* Modal frame */
#colorbox,
#cboxWrapper,
#cboxContent,
#cboxLoadedContent{
  background: var(--card) !important;
  border: 1px solid var(--frame) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 44px rgba(0,0,0,.55) !important;
}

/* Darken page overlay */
#cboxOverlay{
  background: rgba(0,0,0,.65) !important;
}

/* Title / misc text inside the box */
#cboxTitle, #cboxCurrent{
  color:#e9e9e9 !important;
}

/* Close button */
#cboxClose{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 36px; height: 36px;
  line-height: 34px; text-align:center;
  color:#e9e9e9 !important;
  background: transparent !important;
  border:1px solid var(--frame) !important;
  border-radius:10px !important;
}
#cboxClose:hover{
  background:#1b1b1b !important;
  color:var(--accent) !important;
  border-color:var(--accent) !important;
}

/* Inputs inside the modal */
#cboxLoadedContent input[type="text"],
#cboxLoadedContent input[type="search"],
#cboxLoadedContent .ui-autocomplete-input{
  background:#222 !important;
  color:#fff !important;
  border:1px solid var(--frame) !important;
  border-radius:10px !important;
  padding:10px 12px !important;
}
#cboxLoadedContent input::placeholder{ color:#a9a9a9 !important; }

/* Buttons inside the modal */
#cboxLoadedContent .btn,
#cboxLoadedContent button{
  background:var(--accent) !important;
  color:#fff !important;
  border:1px solid var(--accent) !important;
  border-radius:10px !important;
  padding:10px 14px !important;
}
#cboxLoadedContent .btn:hover,
#cboxLoadedContent button:hover{
  background:#fff !important;
  color:var(--accent) !important;
  border-color:var(--accent) !important;
}

/* Autocomplete / dropdown lists */
#cboxLoadedContent .ui-widget-content,
#cboxLoadedContent .ui-menu{
  background:var(--card) !important;
  color:#e9e9e9 !important;
  border:1px solid var(--frame) !important;
  border-radius:12px !important;
}
#cboxLoadedContent .ui-menu .ui-state-active{
  background:#191919 !important;
  color:#fff !important;
}
















/* ==== Colorbox modal — Speedmax theme ==== */
:root { 
  --card:#161616; 
  --frame:#363636; 
  --accent:#d16527; 
}

/* Modal frame */
#colorbox,
#cboxWrapper,
#cboxContent,
#cboxLoadedContent{
  background: var(--card) !important;
  border: 1px solid var(--frame) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 44px rgba(0,0,0,.55) !important;
}

/* Darken page overlay */
#cboxOverlay{
  background: rgba(0,0,0,.65) !important;
}

/* Title / misc text inside the box */
#cboxTitle, #cboxCurrent{
  color:#e9e9e9 !important;
}

/* Close button */
#cboxClose{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 36px; height: 36px;
  line-height: 34px; text-align:center;
  color:#e9e9e9 !important;
  background: transparent !important;
  border:1px solid var(--frame) !important;
  border-radius:10px !important;
}
#cboxClose:hover{
  background:#1b1b1b !important;
  color:var(--accent) !important;
  border-color:var(--accent) !important;
}

/* Inputs inside the modal */
#cboxLoadedContent input[type="text"],
#cboxLoadedContent input[type="search"],
#cboxLoadedContent .ui-autocomplete-input{
  background:#222 !important;
  color:#fff !important;
  border:1px solid var(--frame) !important;
  border-radius:10px !important;
  padding:10px 12px !important;
}
#cboxLoadedContent input::placeholder{ color:#a9a9a9 !important; }

/* Buttons inside the modal */
#cboxLoadedContent .btn,
#cboxLoadedContent button{
  background:var(--accent) !important;
  color:#fff !important;
  border:1px solid var(--accent) !important;
  border-radius:10px !important;
  padding:10px 14px !important;
}
#cboxLoadedContent .btn:hover,
#cboxLoadedContent button:hover{
  background:#fff !important;
  color:var(--accent) !important;
  border-color:var(--accent) !important;
}

/* Autocomplete / dropdown lists */
#cboxLoadedContent .ui-widget-content,
#cboxLoadedContent .ui-menu{
  background:var(--card) !important;
  color:#e9e9e9 !important;
  border:1px solid var(--frame) !important;
  border-radius:12px !important;
}
#cboxLoadedContent .ui-menu .ui-state-active{
  background:#191919 !important;
  color:#fff !important;
}



/* === SpeedMax – Cookie settings modal (Colorbox) ================= */
:root{
  --smx-bg:#161616;
  --smx-bg-2:#1b1b1b;
  --smx-border:#242424;
  --smx-fg:#e9e9e9;
  --smx-muted:#cfcfcf;
  --smx-accent:#d16527;
}

/* Outer colorbox chrome */
.cboxOverlay{ background: rgba(0,0,0,.75) !important; }
#colorbox, #colorbox .cboxContent{ background: transparent !important; }

/* Main modal card */
#colorbox .cookiesSetting__data,
.cookiesSetting__data{
  background: var(--smx-bg) !important;
  color: var(--smx-fg) !important;
  border: 1px solid var(--smx-border) !important;
  border-radius: 12px !important;
}

/* Title/heading */
#colorbox .cookiesSetting__data h2,
.cookiesSetting__title{ color: var(--smx-fg) !important; }

/* Each cookie section block */
.cookiesSetting__item{
  background: var(--smx-bg-2) !important;
  border: 1px solid var(--smx-border) !important;
  border-radius: 10px !important;
  color: var(--smx-fg) !important;
}
.cookiesSetting__item + .cookiesSetting__item{ margin-top: 10px !important; }
.cookiesSetting__item p,
.cookiesSetting__desc{ color: var(--smx-muted) !important; }

/* Bottom area with buttons */
.cookiesSetting__bottom{
  background: transparent !important;
  border-top: 1px solid var(--smx-border) !important;
}

/* Buttons */
.cookiesSetting__bottom .btn,
.cookiesSetting__bottom button{
  background: var(--smx-accent) !important;
  border: 1px solid var(--smx-accent) !important;
  color: #fff !important;
  border-radius: 10px !important;
}
.cookiesSetting__bottom .btn:hover,
.cookiesSetting__bottom button:hover{
  filter: brightness(1.05);
}

/* Optional “secondary/reject” style */
.cookiesSetting__bottom .btn-secondary,
.cookiesSetting__bottom button.btn-secondary{
  background: var(--smx-bg) !important;
  border: 1px solid var(--smx-border) !important;
  color: var(--smx-fg) !important;
}



/* COOKIES: force all text to white */
#colorbox .cookiesSetting__data,
#colorbox .cookiesSetting__data *:not(input):not(select):not(textarea):not(button):not(svg):not(path) {
  color: #fff !important;
}

/* Extra safety for headings/labels that sometimes have their own rules */
#colorbox .cookiesSetting__title,
#colorbox .cookiesSetting__item_name,
#colorbox .cookiesSetting__item_name strong,
#colorbox .cookiesSetting__desc,
#colorbox .cookiesSetting__text,
#colorbox .switch__text,
#colorbox label {
  color: #fff !important;
}


/* Mobile menu background — SpeedMax dark */
@media (max-width: 768px){
  .navigation-in.menu,
  #navigation{
    background-color: #161616 !important;
  }
}



/* Mobile menu: only a 2px bottom border on each item */
@media (max-width: 768px){
  .navigation-in.menu li,
  #navigation li{
    border: 0 !important;                 /* nuke any LI borders */
  }

  .navigation-in.menu li > a,
  #navigation li > a{
    border: 0 !important;                  /* remove all sides */
    border-bottom: 2px solid var(--smx-border, #363636) !important;
    border-radius: 0 !important;           /* no rounded card look */
    background: transparent !important;    /* keep it clean */
    box-shadow: none !important;           /* kill any shadows */
  }
}




/* SPEEDMAX footer (clean) */
:root{
  /* Tweak these if you want: */
  --smx-footer-bg: #496c8b;        /* WP footer blue; change if needed */
  --smx-footer-fg: #e9f1f8;
  --smx-footer-dim: #cddae5;
  --smx-footer-accent: #d16527;    /* Speedmax orange */
}

.smx-wp-footer{
  background: var(--smx-footer-bg);
  color: var(--smx-footer-fg);
  padding: 48px 0 28px;
}
.smx-wp-footer .smx-inner{
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 32px;
}
.smx-wp-footer .smx-logo img{
  height: 40px; width: auto; display: block;
  filter: drop-shadow(0 0 0 transparent);
}
.smx-wp-footer .smx-note{
  margin: 14px 0 10px;
  line-height: 1.6;
  color: var(--smx-footer-dim);
}
.smx-wp-footer .smx-head{
  font-weight: 700;
  letter-spacing: .06em;
  margin: 6px 0 12px;
  color: #fff;
}
.smx-wp-footer .smx-block{ margin-top: 14px; }
.smx-wp-footer .smx-block-title{
  font-weight: 700; margin-bottom: 4px; color: #fff;
}
.smx-wp-footer .smx-links{ list-style: none; padding: 0; margin: 0; }
.smx-wp-footer .smx-links li{ margin: 8px 0; }
.smx-wp-footer a{
  color: var(--smx-footer-fg);
  text-decoration: none;
}
.smx-wp-footer a:hover{
  color: var(--smx-footer-accent);
}

/* Bottom row */
.smx-wp-footer .smx-bottom{
  max-width: 1170px;
  margin: 22px auto 0;
  padding: 16px 16px 0;
  border-top: 1px solid rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--smx-footer-dim);
  font-size: 14px;
}
.smx-wp-footer .smx-credit{ font-weight: 600; }

/* Responsive */
@media (max-width: 960px){
  .smx-wp-footer .smx-inner{ grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 560px){
  .smx-wp-footer .smx-inner{ grid-template-columns: 1fr; }
  .smx-wp-footer .smx-bottom{ flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* Keep Shoptet's thin attribution panel UNDER our footer */
.full-width.footer-bottom-full-width,
.container.footer-bottom { margin-top: 0; }




/* Speedmax orange for footer headings */
:root { --smx-orange: #d16527; }

.smx-inner .smx-head,
.smx-inner .smx-head a,
.smx-inner .item--sub-title span { 
  color: var(--smx-orange) !important;
}
















/* Align footer column headings with the “Naša spoločnosť…” text */
:root { --smx-foot-head-offset: 38px; }  /* try 32–48px until it’s perfect */

.smx-inner { 
  align-items: start;                     /* prevents vertical centering */
}

/* Push columns 2–4 down by the same amount */
.smx-inner > div:not(:first-child) {
  padding-top: var(--smx-foot-head-offset);
}

/* Mobile: stack cleanly, no extra offset */
@media (max-width: 768px){
  .smx-inner > div:not(:first-child){ padding-top: 0; }
}





/* Mobile: center the footer */
@media (max-width: 768px){
  /* Center each column and its content */
  .smx-inner{
    display: grid;                 /* safe even if already grid/flex */
    grid-template-columns: 1fr;    /* stack */
    justify-items: center;         /* center blocks */
    text-align: center;            /* center text */
    row-gap: 16px;
  }

  /* Remove left indents on lists so they center cleanly */
  .smx-inner ul{ margin: 0; padding-left: 0; }
  .smx-inner li{ list-style: none; }

  /* Center the logo/img block */
  .smx-inner img,
  .smx-inner .ct-logo img{
    display: block;
    margin: 0 auto;
  }

  /* Drop the desktop offset we added earlier */
  .smx-inner > div:not(:first-child){ padding-top: 0; }

  /* Bottom copyright row centered too (use whichever you have) */
  .smx-bottom, .footer-bottom{ text-align: center; }
  .smx-bottom .container, .footer-bottom .container{ justify-content: center; }
}



/* Hover zoom + slight brighten for homepage banner images */
@media (hover:hover) {
  /* keep the zoom neatly clipped */
  .carousel-banners .banner-wrapper,
  .next-to-carousel-banners .banner-wrapper {
    overflow: hidden;
    border-radius: 8px;            /* optional, remove if you don't want rounding */
  }

  .carousel-banners .banner-wrapper img,
  .next-to-carousel-banners .banner-wrapper img {
    display: block;
    transform-origin: center;
    transition: transform .35s ease, filter .35s ease;
  }

  .carousel-banners .banner-wrapper:hover img,
  .next-to-carousel-banners .banner-wrapper:hover img {
    transform: scale(1.05);        /* +5% */
    filter: brightness(1.2);      /* slight light-up */
  }
}




/* Hide Shoptet's built-in bottom panel */
#footer .full-width.footer-bottom-full-width,
#footer .container.footer-bottom {
  display: none !important;
}


:root{
  --smx-bg:#111111;
  --smx-border:#363636;
  --smx-fg:#e9e9e9;
  --smx-accent:#d16527;
}

.smx-bottombar{
  background: var(--smx-bg);
  border-top: 1px solid var(--smx-border);
  color: var(--smx-fg);
  font-size: 14px;
}
.smx-bottombar__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.smx-bottombar a{
  color: var(--smx-fg);
  text-decoration: none;
}
.smx-bottombar a:hover{
  color: var(--smx-accent);
}
.smx-signature{
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: .9;
}
.smx-signature img{
  width: 17px; height: 17px; display: block;
}

/* Centered on mobile */
@media (max-width: 768px){
  .smx-bottombar__inner{
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}



/* The container immediately following #footer */
#footer + .container{
  background: #111111 !important;
  box-shadow: none !important;
}
#footer + .container .smx-footer,
#footer + .container .smx-bottom{
  background: transparent !important;
}













/* === Product detail tabs: switch to SpeedMax dark ===================== */

/* The white card itself */
html body .detail-full-width #tab-content.tab-content,
html body #tab-content.tab-content,
html body .detail-full-width .tab-content {
  background: #161616 !important;
  color: #e9e9e9 !important;
  border: 1px solid #242424 !important;
  border-radius: 8px;
}

/* Kill any “helper” backgrounds inside the card */
html body .detail-full-width .tab-content .bg-white,
html body .detail-full-width .tab-content .bg-light,
html body .detail-full-width .tab-content .card,
html body .detail-full-width .tab-content .panel,
html body .detail-full-width .tab-content [class*="bg-"],
html body .detail-full-width .col-sm-12 {
  background: transparent !important;
  box-shadow: none !important;
}

/* Ensure all text is legible in dark mode */
html body .detail-full-width .tab-content h1,
html body .detail-full-width .tab-content h2,
html body .detail-full-width .tab-content h3,
html body .detail-full-width .tab-content h4,
html body .detail-full-width .tab-content h5,
html body .detail-full-width .tab-content h6,
html body .detail-full-width .tab-content p,
html body .detail-full-width .tab-content li,
html body .detail-full-width .tab-content dt,
html body .detail-full-width .tab-content dd,
html body .detail-full-width .tab-content strong,
html body .detail-full-width .tab-content span {
  color: #e9e9e9 !important;
}

/* Links use SpeedMax orange */
html body .detail-full-width .tab-content a {
  color: #d16527 !important;
  text-decoration: none;
}
html body .detail-full-width .tab-content a:hover {
  filter: brightness(1.1);
}







:root { --smx-orange:#d16527; }

/* Active + hover state */
.shp-tabs-row .shp-tabs-holder li.active > a.shp-tab-link,
.shp-tabs-row .shp-tabs-holder a.shp-tab-link:hover{
  background-color: var(--smx-orange) !important;
  border-color: var(--smx-orange) !important;
  color: #fff !important;                 /* <- white text */
}

/* If the theme colors inner spans, force them too */
.shp-tabs-row .shp-tabs-holder li.active > a.shp-tab-link *,
.shp-tabs-row .shp-tabs-holder a.shp-tab-link:hover *{
  color: #fff !important;
}





/* Hide the top inline product strip (Najpredávanejšie) on category pages */
.category-top .products-top.products-inline {
  display: none !important;
}

/* (Optional) remove any leftover spacing from the wrapper */
.category-top { margin-bottom: 0 !important; }



/* Hide the "Najpredávanejšie" title above the strip */
.category-top h3.products-top-header,
h3.products-top-header {
  display: none !important;
}

/* (Optional) collapse any spacing it left behind */
.category-top .products-top-header { margin: 0 !important; padding: 0 !important; }











/* Any <img> that has width="1024" and height="768" → force 800×600 */
img[width="1024"][height="768"],
img[style*="width: 1024px"][style*="height: 768px"] {
  width: 800px !important;
  height: 600px !important;
  aspect-ratio: 4 / 3 !important;  /* keeps 800×600 ratio */
  object-fit: contain;              /* avoids cropping */
  display: block;
  margin: 0 auto;
}




/* === Speedmax • Cart popup (colors + 1px border) — scoped === */
:root{
  /* contrast-adjusted surface + frame */
  --smx-cart-bg:     #23262b;   /* slightly lighter than page bg */
  --smx-cart-fg:     #e9e9e9;   /* text */
  --smx-cart-border: #474b52;   /* clearer 1px frame */
  --smx-cart-sep:    #2b2f36;   /* row separator */
  --smx-orange:      #d16527;   /* brand */
  --smx-qty-bg:      #0f0f0f;   /* qty box fill */
}

/* Outer card */
.user-action-cart .popup-widget,
.user-action-cart .popup-widget-inner{
  background: var(--smx-cart-bg) !important;
  color: var(--smx-cart-fg) !important;
  border: 1px solid var(--smx-cart-border) !important;   /* 1px frame */
  border-radius: 0px !important;
  overflow: hidden !important;                            /* fixes any white corners */
  box-shadow: 0 14px 44px rgba(0,0,0,.55) !important;     /* subtle separation */
}

/* Nuke template plates that cause bright edges */
.user-action-cart .popup-widget::before,
.user-action-cart .popup-widget::after,
.user-action-cart .popup-widget-inner::before,
.user-action-cart .popup-widget-inner::after,
.user-action-cart .cart-widget::before,
.user-action-cart .cart-widget::after,
.user-action-cart .cart-widget-button::before,
.user-action-cart .cart-widget-button::after{
  content: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Inner surfaces keep the same dark */
.user-action-cart .cart-widget,
.user-action-cart .cart-widget-products,
.user-action-cart .site-msg.user-action,
.user-action-cart .cart-widget-bottom,
.user-action-cart .cart-widget-button,
.user-action-cart .cart-free-shipping{
  background: var(--smx-cart-bg) !important;
  color: var(--smx-cart-fg) !important;
  border: 0 !important;
}

/* Some themes use various “cart-widget-inner” class combos */
.user-action-cart [class*="cart-widget-inner"]{
  background: var(--smx-cart-bg) !important;
  border: 0 !important;
}

/* Row separator between products */
.user-action-cart .cart-widget-products > * + *{
  border-top: 1px solid var(--smx-cart-sep) !important;
}

/* Quantity controls (colors only) */
.user-action-cart .cart-widget-product .quantity,
.user-action-cart .cart-widget-product .quantity input,
.user-action-cart .cart-widget-product .quantity .increase,
.user-action-cart .cart-widget-product .quantity .decrease{
  background: var(--smx-qty-bg) !important;
  color: #fff !important;
  border-color: var(--smx-cart-border) !important;
}

/* CTA button colors */
.user-action-cart .cart-widget-button .btn,
.user-action-cart .cart-widget-button .button,
.user-action-cart .cart-widget-button [type="submit"]{
  background: var(--smx-orange) !important;
  border-color: var(--smx-orange) !important;
  color: #fff !important;
}
.user-action-cart .cart-widget-button .btn:hover,
.user-action-cart .cart-widget-button .button:hover,
.user-action-cart .cart-widget-button [type="submit"]:hover{
  background: #fff !important;
  color: var(--smx-orange) !important;
  border-color: var(--smx-orange) !important;
}

/* Accents that belong to the popup only */
.user-action-cart .cart-widget-product .price{ color: var(--smx-orange) !important; }
.user-action-cart a, .user-action-cart .user-action-close{ color: #fff !important; }




/* Cart popup – quantity steppers (bg + border) */
.user-action-cart .cart-widget-product .quantity,
.user-action-cart .cart-widget-product .quantity input,
.user-action-cart .cart-widget-product .quantity .increase,
.user-action-cart .cart-widget-product .quantity .decrease{
  background: #23262D !important;  /* darker tile behind +/- and number */
  color: #fff !important;           /* icons/number */
  border-color: #fff !important;    /* white frame around the control */
}








/* Cart popup thumbnails — force 4:3 and remove letterboxing */
.user-action-cart .cart-widget-product-image{
  /* make the box 4:3 instead of square */
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;

  /* optional polish to match your theme */
  background: #161616 !important;
  border: 1px solid #363636 !important;
  border-radius: 8px !important;
  display: block !important;
}

/* Fill the box and crop (no white bars) */
.user-action-cart .cart-widget-product-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  background: transparent !important;
}






/* Cart popup thumbnail — truly 4:3, no white bars */
.user-action-cart .cart-widget-product-image,
.user-action-cart .cart-widget-product-image a{
  /* make the frame 4:3 and clip anything outside */
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;

  /* kill template padding/plates */
  padding: 0 !important;
  line-height: 0 !important;
  background: #161616 !important;     /* dark plate behind PNGs */
  border: 1px solid #363636 !important;
  border-radius: 8px !important;
  display: block !important;
}

/* some templates draw decorative bars with pseudos */
.user-action-cart .cart-widget-product-image::before,
.user-action-cart .cart-widget-product-image::after,
.user-action-cart .cart-widget-product-image a::before,
.user-action-cart .cart-widget-product-image a::after{
  content: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Fill the frame and crop (no letterboxing) */
.user-action-cart .cart-widget-product-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}







/* Remove the thin border under the category header */
.category-top {
  border-bottom: none !important;
}

/* Some themes draw it with a pseudo element */
.category-top::after {
  content: none !important;
  border: 0 !important;
}







/* ==== Speedmax product tiles — high-contrast hover only ==== */
:root{
  --smx-border: #d16527;       /* base border (brand orange) */
  --smx-border-hover: #FFD166; /* BRIGHT amber for strong contrast */
}

/* Base tile (unchanged) */
#products .product,
.products .product,
.products-block .product,
.product-item,
.product-box,
li.product,
div.product {
  border: 1px solid var(--smx-border) !important;
  transition: border-color .15s ease !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Hover — color only, very visible */
#products .product:hover,
.products .product:hover,
.products-block .product:hover,
.product-item:hover,
.product-box:hover,
li.product:hover,
div.product:hover {
  border-color: var(--smx-border-hover) !important;
  transform: none !important;
  box-shadow: none !important;
  background: inherit !important;
}

/* Match keyboard focus to the same high-contrast look */
#products .product:focus-visible,
.products .product:focus-visible,
.products-block .product:focus-visible,
.product-item:focus-visible,
.product-box:focus-visible,
li.product:focus-visible,
div.product:focus-visible {
  border-color: var(--smx-border-hover) !important;
  outline: none !important;
}

/* Stop any template image zooms */
#products .product:hover .image img,
.products .product:hover .image img,
div.product:hover .image img {
  transform: none !important;
}









/* ================== Speedmax — WP footer (bg #111111 + subtle hairline) ================== */
:root{
  --smx-footer-bg:   #111111;  /* requested footer fill */
  --smx-footer-fg:   #e9e9e9;  /* footer text */
  --smx-footer-dim:  #c7c9cd;  /* muted text */
  --smx-footer-line: #242424;  /* thin neutral top line (visible on #111111) */
  --smx-accent:      #d16527;  /* brand orange for link hovers only */
}

/* Footer (high specificity to beat theme) */
footer.smx-wp-footer,
#footer .smx-wp-footer{
  background: var(--smx-footer-bg) !important;
  color: var(--smx-footer-fg) !important;

  /* ensure there IS a hairline */
  border: 0 !important;
  border-top: 1px solid var(--smx-footer-line) !important;
  box-shadow: inset 0 1px 0 var(--smx-footer-line) !important; /* safety hairline */

  /* full-width breakout */
  width: 100vw !important;
  margin-left:  calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  border-radius: 0 !important;
}

/* kill template plates/overlays that hide the line */
footer.smx-wp-footer::before,
footer.smx-wp-footer::after{
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* keep backgrounds on the footer root only */
footer.smx-wp-footer > *,
footer.smx-wp-footer .container,
footer.smx-wp-footer .wrapper,
footer.smx-wp-footer .smx-inner{
  background: transparent !important;
}

/* comfortable inner width */
footer.smx-wp-footer > *,
footer.smx-wp-footer .container,
footer.smx-wp-footer .wrapper,
footer.smx-wp-footer .smx-inner{
  max-width: 1170px;
  margin: 0 auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* links + muted text */
footer.smx-wp-footer a,
#footer .smx-wp-footer a{
  color: var(--smx-footer-fg) !important;
  text-decoration: none !important;
}
footer.smx-wp-footer a:hover,
#footer .smx-wp-footer a:hover{
  color: var(--smx-accent) !important; /* orange only on hover */
}
footer.smx-wp-footer .muted,
footer.smx-wp-footer small{
  color: var(--smx-footer-dim) !important;
}

/* optional: the very next strip below the footer (copyright bar) */
footer.smx-wp-footer + .container{
  background: #0e0e0e !important;  /* a touch darker than #111 */
  border-top: 1px solid var(--smx-footer-line) !important;
  box-shadow: none !important;
}


/* === SPEEDMAX – Footer (full width band, 1680px inner) === */
:root{
  --smx-footer-bg: #111111;      /* footer fill */
  --smx-footer-fg: #e9e9e9;      /* text */
  --smx-footer-sep: #2b2b2b;     /* thin top line */
  --smx-accent:    #d16527;      /* brand on hover */
}

/* Footer band (edge to edge) */
footer.smx-wp-footer{
  background: var(--smx-footer-bg) !important;
  color: var(--smx-footer-fg) !important;
  border-top: 1px solid var(--smx-footer-sep) !important;

  /* break out of theme wrapper */
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  border-radius: 0 !important;
  box-shadow: none !important;
}
footer.smx-wp-footer::before,
footer.smx-wp-footer::after{
  content: none !important;
}

/* --- Inner width = 1680px (override theme .container cap) --- */
footer.smx-wp-footer .smx-inner,
footer.smx-wp-footer .smx-bottom,
.smx-bottombar__inner,
.container.smx-inner,
.container.smx-bottom{
  max-width: 1680px !important;
  width: min(1680px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* comfortable side gutters */
  padding-left: clamp(16px, 2vw, 32px) !important;
  padding-right: clamp(16px, 2vw, 32px) !important;

  background: transparent !important; /* keep color on the band, not children */
}

/* Links & small text in footer */
footer.smx-wp-footer a{ color: var(--smx-footer-fg) !important; text-decoration: none !important; }
footer.smx-wp-footer a:hover{ color: var(--smx-accent) !important; }
footer.smx-wp-footer .muted,
footer.smx-wp-footer small{ opacity: .8; }

/* Bottom copyright strip (keeps the same width rules) */
.smx-bottombar{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-top: 1px solid var(--smx-footer-sep) !important;
  background: #0e0e0e !important; /* slightly darker than footer band */
}





/* Cart table – background only */
table.cart-table { background: #23262B !important; }
table.cart-table > :is(thead, tbody, tfoot) > tr > * { background: #23262B !important; }




/* Cart quantity steppers background */
.quantity .decrease,
.quantity .increase {
  background-color: #23262B !important; /* <- change this hex if you want another color */
}








/* Cart row + thumbnail fix (ONE block) */
.cart-table tr.removeable > td,
.cart-table tr.removeable td{
  padding-top: 0 !important;                 /* kill the extra top padding */
}

.cart-table td.cart-p-image,
.cart-table td.cart-p-image > a,
.cart-table td.cart-p-image img{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Thumbnail cell */
.cart-table td.cart-p-image{
  width: 76px !important;
  padding: 0 !important;                     /* no inner padding */
}

/* 76×57 frame that clips the image (no white bars) */
.cart-table td.cart-p-image > a{
  display: block !important;
  width: 76px !important;
  height: 57px !important;                   /* 4:3 of 76px */
  position: relative !important;
  overflow: hidden !important;               /* crop overflow */
  line-height: 0 !important;                 /* remove inline-image gap */
}

/* Fill the frame and crop */
.cart-table td.cart-p-image img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}


/* === Titles: never ellipsize, wrap nicely, equal height === */

/* 1) Remove any inner line-clamp/ellipsis (even on nested <a>) */
.products .product .name,
.products .product .name *,
.products-block .product .name,
.products-block .product .name *,
.product-item .name,
.product-item .name *,
.p-in .name,
.p-in .name *{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;        /* no ellipsis */
  display: block !important;              /* override -webkit-box clamps */
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

/* 2) Friendly wrapping for long words / codes */
.products .product .name,
.products .product .name *{
  overflow-wrap: anywhere !important;     /* modern */
  word-break: break-word !important;      /* fallback */
  hyphens: auto !important;               /* add soft hyphens if available */
}

/* 3) Make all tiles line up: reserve space for exactly 3 lines */
.products .product .name,
.products-block .product .name,
.product-item .name,
.p-in .name{
  --bm3-lines: 3;                         /* tweak to 2/4 if you prefer */
  line-height: 1.25 !important;
  min-height: calc(var(--bm3-lines) * 1.25em + 6px) !important;
  margin-top: 6px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-weight: 700 !important;
}


/* === Product cards — price row small, consistent spacing === */
:root{
  /* nudge how close the price sits under the title */
  --smx-price-gap: 16px;             /* try 6–10px to taste */
  --smx-price-bottom: 14px;          /* space before the button */
}

/* Cover common Shoptet card selectors */
.products .product .price,
.products .product .price-final,
.products .product .prices,
.products-block .product .price,
.products-block .product .price-final,
.products-block .product .prices,
.product-item .price,
.product-item .price-final,
.product-item .prices,
.product .price,
.product .price-final,
.product .prices{
  display: block !important;
  text-align: center !important;
  margin-top: var(--smx-price-gap) !important;
  margin-bottom: var(--smx-price-bottom) !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

/* If any template wraps price in a holder, keep its height stable */
.products .product .price-holder,
.products-block .product .price-holder,
.product-item .price-holder,
.product .price-holder{
  min-height: 1.25em !important; /* one line worth of space */
}






/* Cart row: add a little space under the product name cell */
.cart-table tr td.p-name{
  padding-bottom: 7px !important;
}


/* Cart thumbnail: add 5px breathing room around the picture */
.cart-table td.cart-p-image{
  padding: 5px !important;
}
.cart-table td.cart-p-image a,
.cart-table td.cart-p-image img{
  display: block !important; /* avoid inline gaps */
}






/* Cart rows: add vertical gap between rows + comfy inner padding */
table.cart-table{
  border-collapse: separate !important;
  border-spacing: 0 8px !important;          /* space between rows */
}

/* Make every cell breathe and align nicely */
table.cart-table tbody tr > td{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  vertical-align: middle !important;          /* keeps qty/price centered */
}

/* Product name cell: a touch more top room */
table.cart-table td.p-name{
  padding-top: 12px !important;
  padding-bottom: 8px !important;             /* you already had 7px; tiny tweak */
}

/* Keep the thumbnail padding you added and center it vertically */
table.cart-table td.cart-p-image{
  padding: 5px !important;
  vertical-align: middle !important;
}

/* (optional) If the row gap looks “filled” by the table background,
   make the table itself transparent so the page bg shows through */
/*
table.cart-table { background: transparent !important; }
*/








/* Product card titles — keep UPPERCASE but not so heavy */
#products .product .name,
.products-block .product .name,
.product-item .name {
  text-transform: uppercase !important;   /* keep uppercase */
  font-weight: 600 !important;            /* was 700 → lighter */
  letter-spacing: .015em !important;      /* was .06em */
  line-height: 1.22 !important;           /* tidy lines */
  color: #e6e6e6 !important;              /* slightly dimmer than pure white */
  -webkit-font-smoothing: antialiased;    /* improve rendering on dark bg */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* If you use an equal-height calc tied to line-height, update it: */
.products .product .name,
.products-block .product .name,
.product-item .name {
  --bm3-lines: 3;
  min-height: calc(var(--bm3-lines) * 1.22em + 6px) !important;
}














/* === Cart popup — fix narrow product name column ===================== */
.user-action-cart .cart-widget-products .cart-widget-product{
  /* lay out the row: thumbnail | NAME | qty | unit price | delete */
  display: grid !important;
  grid-template-columns: 76px 1fr auto auto auto !important;
  column-gap: 12px !important;
  align-items: center !important;
}

/* keep thumbnail fixed */
.user-action-cart .cart-widget-product-image{
  width: 76px !important;
  flex: 0 0 76px !important;     /* safe if some themes use flex */
}

/* let the name expand and wrap normally */
.user-action-cart .cart-widget-product-name-and-price{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;       /* prevents flex/grid overflow clipping */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* keep these columns their natural size */
.user-action-cart .cart-widget-product-amount,
.user-action-cart .cart-widget-product-unit,
.user-action-cart .cart-widget-product-delete{
  white-space: nowrap !important;
  flex: 0 0 auto !important;     /* safe if flex is in play */
}

/* small screens: keep it tidy */
@media (max-width: 480px){
  .user-action-cart .cart-widget-products .cart-widget-product{
    grid-template-columns: 76px 1fr auto !important;  /* thumb | name | qty */
    row-gap: 6px !important;
  }
}



/* === Cart popup — product title: match tile typography === */
.user-action-cart .cart-widget-product-name-and-price .cart-widget-product-name,
.user-action-cart .cart-widget-product-name-and-price .cart-widget-product-name a {
  font-size: 13px !important;           /* a touch smaller */
  font-weight: 600 !important;          /* lighter than 700 */
  text-transform: uppercase !important;
  letter-spacing: .015em !important;    /* less wide */
  line-height: 1.22 !important;
  color: #e6e6e6 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* kill the hard 700 coming from <strong> */
.user-action-cart .cart-widget-product-name-and-price
  .cart-widget-product-name strong {
  font-weight: inherit !important;
}

/* nicer hover */
.user-action-cart .cart-widget-product-name-and-price
  .cart-widget-product-name a:hover {
  color: #fff !important;
}



/* Cart popup – fix the "empty cart" message being squashed into a narrow column */
.user-action-cart .popup-widget-inner.cart-widget-inner .cart-widget-products
  .cart-widget-product[data-testid="cartTitle"]{
  display: block !important;              /* kill the grid on this row */
  grid-template-columns: none !important; /* safety */
  column-gap: 0 !important;
  width: 100% !important;
  min-height: 120px !important;
  padding: 24px 28px !important;
  text-align: center !important;
  white-space: normal !important;

  /* lighter typography so it matches your product cards */
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  color: var(--smx-cart-fg, #e9e9e9) !important;
}

/* (if the wrapper itself is forced into grid on your template, un-grid it too) */
.user-action-cart .popup-widget-inner.cart-widget-inner .cart-widget-products-inner{
  display: block !important;
}






/* === Country select — fix clipping and match input height === */
/* Adjust 44px → your real input height if different */
#billCountryId.form-control,
#deliveryCountryId.form-control,
#companyCountryId.form-control,
form select[name$="CountryId"].form-control,
.form-group select.form-control,
select.form-control {
  box-sizing: border-box !important;
  height: 44px !important;        /* match your inputs */
  min-height: 44px !important;
  padding: 10px 14px !important;  /* vertical centering via padding */
  line-height: 1.25 !important;   /* NOT equal to height → no clipping */
  font-size: 16px !important;

  /* keep your dark theme styling */
  background: #161616 !important;
  color: #e9e9e9 !important;
  border: 1px solid #363636 !important;
  border-radius: 12px !important;

  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Options (for dropdown list) */
select.form-control option {
  background: #161616 !important;
  color: #e9e9e9 !important;
}









/* Logout button only — fix clipped text & size */
a.btn.btn-xs.btn-primary[data-testid="buttonSignOut"],
a.btn.btn-xs.btn-primary[href*="/logout"]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* give the label breathing room */
  padding: 8px 14px !important;
  min-height: 36px !important;

  /* stop the top of the text from being cut off */
  line-height: 1.2 !important;
  overflow: visible !important;

  /* keep it on one line and centered */
  white-space: nowrap !important;
  vertical-align: middle !important;

  /* keep the rounded look consistent */
  border-radius: 9999px !important; /* or your preferred radius */
}








/* Thank-you (order recap) — hide the product picture entirely */
div[data-testid="recapTable"] table tr td:first-child img,
div[data-testid="recapTable"] .cartp-image img,
div[data-testid="recapTable"] .cartp__image img {
  display: none !important;
  visibility: hidden !important;
}





/* ======================= SPEEDMAX — VARIANT SELECT (UPDATED) ======================= */
:root{ --accent:#d16527; }

/* wrapper */
html body .p-detail-inner :is(.variants-block,.p-variants-block) #simple-variants{
  position: relative !important;
  max-width: 480px !important;
}

/* SELECT pole */
html body .p-detail-inner :is(.variants-block,.p-variants-block)
#simple-variants select#simple-variants-select{
  width: 100% !important;
  height: 44px !important;
  padding: 10px 44px 10px 14px !important;
  border-radius: 8px !important;

  background-color: #171717 !important;     /* <- nové pozadie poľa */
  color: #e9e9e9 !important;
  border: 1.5px solid #2b2b2b !important;
  background-clip: padding-box !important;

  font-family: var(--template-body-font, "Chakra Petch", system-ui) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;

  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease !important;
  cursor: pointer !important;
}

/* hover / focus */
html body .p-detail-inner :is(.variants-block,.p-variants-block)
#simple-variants select#simple-variants-select:hover,
html body .p-detail-inner :is(.variants-block,.p-variants-block)
#simple-variants select#simple-variants-select:focus{
  background-color: #1b1b1b !important;     /* jemne svetlejšie pri akcii */
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(209,101,39,.18) !important;
  outline: none !important;
}

/* Rozbalené položky */
html body .p-detail-inner :is(.variants-block,.p-variants-block)
#simple-variants select#simple-variants-select option{
  background-color: #171717 !important;     /* <- nové pozadie zoznamu */
  color: #e9e9e9 !important;
}

/* Placeholder/disabled položka = oranžový text (napr. „Zvoľte variant“) */
html body .p-detail-inner :is(.variants-block,.p-variants-block)
#simple-variants select#simple-variants-select option[disabled],
html body .p-detail-inner :is(.variants-block,.p-variants-block)
#simple-variants select#simple-variants-select option[data-disable-button="1"]{
  color: var(--accent) !important;
  font-weight: 700 !important;
}

/* Skryť legacy rozbalovač */
html body .p-detail-inner :is(.variants-block,.p-variants-block)
#simple-variants select#simple-variants-select::-ms-expand{ display:none !important; }

/* Label „VARIANT:“ */
html body .p-detail-inner :is(.variants-block,.p-variants-block) .variant-label,
html body .p-detail-inner :is(.variants-block,.p-variants-block) .variant-label span{
  display:block !important;
  margin-bottom:6px !important;
  color:#cfcfcf !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
  font-weight:700 !important;
  font-size:12px !important;
}




html body .p-detail-inner :is(.variants-block,.p-variants-block) 
#simple-variants select#simple-variants-select { color:#ffffff !important; }

html body .p-detail-inner :is(.variants-block,.p-variants-block) #simple-variants select#simple-variants-select { border: 0.5px solid #d16527 !important; }


html body .p-detail-inner :is(.variants-block,.p-variants-block) #simple-variants select#simple-variants-select {
  /* draw ARROW + CAP as 2 layers */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'><path d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    linear-gradient(to right, transparent calc(100% - 44px), #d16527 0);
  background-repeat: no-repeat, no-repeat;
  background-position: right 18px center, right 0 center; /* arrow, cap */
  background-size: 12px 7px, 44px 100%;
  padding-right: 56px; /* space for the cap */
  border-radius: 10px; /* keep your rounding if needed */

  /* ensure no native arrow competes */
  -webkit-appearance: none;
  appearance: none;
}







/* === MOBILE-FIRST: full width so it never overflows === */
html body .p-detail-inner :is(.variants-block,.p-variants-block) #simple-variants {
  width: 100% !important;
  max-width: 100% !important;
}

html body .p-detail-inner :is(.variants-block,.p-variants-block) #simple-variants select#simple-variants-select {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: block !important;

  /* keep your cap + arrow correct on mobile too */
  padding-right: 56px !important;
  background-position: right 18px center, right 0 center !important; /* arrow, cap */
  background-size: 12px 7px, 44px 100% !important;
}

/* === DESKTOP ONLY: bring back the wider control === */
@media (min-width: 992px) {
  html body .p-detail-inner :is(.variants-block,.p-variants-block) #simple-variants {
    width: auto !important;
    max-width: none !important;
  }

  html body .p-detail-inner :is(.variants-block,.p-variants-block) #simple-variants select#simple-variants-select {
    width: 560px !important;      /* your wide desktop size */
    min-width: 560px !important;
  }
}