/* ==========================================================================
   CCM OUTLET — dark theme pre Shoptet (template-11 / template-12)
   Autor: custom | v5

   NAHRAT DO: Administracia > Soubory  ->  /user/documents/upload/ccm-outlet.css
   PRELINKOVAT: riadok do hlavicky najdes v subore VLOZ-DO-HLAVICKY.txt

   !! DO TOHTO SUBORU NEPISAT HTML ZNACKY, ani do komentarov !!
   Shoptet pri ukladani prehna obsah cez HTML filter a vsetko az po koniec
   takej znacky zmaze. Subor potom zacina uprostred komentara a je nefunkcny.
   Preto tu nie je napisany ani priklad link/script riadku.

   Po kazdej zmene suboru zvys ?v= v hlavicke (obide cache prehliadaca aj CDN).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) FONTY — nacitaju sa priamo odtialto, v head netreba nic dalsie
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;1,700;1,800;1,900&family=Barlow:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1) PREMENNE — tu ladis celu identitu, zvysok CSS z nich cerpa
   -------------------------------------------------------------------------- */
:root {
  /* Znackove farby */
  --ccm-red:        #E31E24;
  --ccm-red-hover:  #B8151A;
  --ccm-black:      #000000;
  --ccm-bg:         #0A0A0B;   /* zaklad stranky */
  --ccm-surface:    #141416;   /* karty, boxy */
  --ccm-surface-2:  #1C1C20;   /* hover / vnorene boxy */
  --ccm-line:       #2A2A2F;   /* oramovania */
  --ccm-text:       #FFFFFF;
  --ccm-text-dim:   #A6A6AD;

  --ccm-radius:     2px;       /* CCM je hranate, nie zaoblene */

  /* Podklad pod fotkou produktu.
     'transparent' = fotka splynie s tmavym webom. Sedi na tmave rendery
     a fotky s priehladnym pozadim — take mas teraz.
     '#fff' = biely panel. Prepni na to az keby si presiel na klasicke
     produktove fotky na bielom pozadi od dodavatela. */
  --ccm-product-bg: transparent;
  --ccm-shadow:     0 10px 30px rgba(0,0,0,.55);

  /* --- prepis Shoptet premennych (template-11) --- */
  --color-primary:            #E31E24;
  --color-primary-h:          358;
  --color-primary-s:          77%;
  --color-primary-l:          50%;
  --color-primary-hover:      #B8151A;
  --color-primary-hover-h:    358;
  --color-primary-hover-s:    79%;
  --color-primary-hover-l:    40%;

  --color-secondary:          #FFFFFF;
  --color-secondary-hover:    #D4D4D8;

  --color-tertiary:           #E31E24;
  --color-tertiary-hover:     #B8151A;

  --color-header-background:  #0A0A0B;

  --template-font:            'Barlow', system-ui, sans-serif;
  --template-headings-font:   'Barlow Condensed', 'Barlow', sans-serif;
}

/* --------------------------------------------------------------------------
   2) ZAKLAD — tmave plátno
   -------------------------------------------------------------------------- */
html.header-background-light,
html { background: var(--ccm-bg); }

body {
  background: var(--ccm-bg);
  color: var(--ccm-text);
  font-family: var(--template-font);
  -webkit-font-smoothing: antialiased;
}

#content-wrapper,
.content-wrapper,
.container,
#main,
.main-content { background: transparent; }

a { color: var(--ccm-text); }
a:hover, a:focus { color: var(--ccm-red); }

p, li, td, dd, .text, .description { color: var(--ccm-text-dim); }

/* Nadpisy — condensed, tucne, kapitalky (CCM styl) */
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4,
.homepage-group-title,
.products-block-header,
#carousel .extended-banner-title {
  font-family: var(--template-headings-font);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ccm-text);
  line-height: 1.05;
}

h1, .h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-style: italic; }
h2, .h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }

/* Cerveny podciarknik pod nadpismi sekcii — signature prvok z prezentacie */
.homepage-group-title,
.products-block-header,
.product-slider-header,
#content h2.homepage-group-title {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 28px;
}
.homepage-group-title::after,
.products-block-header::after,
.product-slider-header::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 64px; height: 4px;
  background: var(--ccm-red);
}
/* zarovnanie na stred, ak mas nadpisy centrovane */
.text-center .homepage-group-title::after { left: 50%; transform: translateX(-50%); }

/* --------------------------------------------------------------------------
   3) HLAVICKA
   -------------------------------------------------------------------------- */
.top-navigation-bar {
  background: var(--ccm-black);
  border-bottom: 1px solid var(--ccm-line);
  color: var(--ccm-text-dim);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.top-navigation-bar a,
.top-navigation-bar .top-navigation-menu a,
.top-navigation-contacts a { color: var(--ccm-text-dim); }
.top-navigation-bar a:hover { color: var(--ccm-red); }

.header,
#header,
.header-top,
.site-name-wrapper {
  background: var(--ccm-bg);
  border-bottom: 1px solid var(--ccm-line);
}

/* Diagonalny cerveny pruh pod hlavickou — CCM "slash" */
.header::after {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--ccm-red) 0%, var(--ccm-red) 38%, transparent 38%, transparent 42%, var(--ccm-red) 42%, var(--ccm-red) 55%, transparent 55%);
}

/* Logo — ak mas svetle logo na tmavom, nic netreba. Ak tmave, odkomentuj: */
/* .site-name img { filter: brightness(0) invert(1); } */

/* Vyhladavanie */
.search input[type="text"],
.search-form input,
#search input {
  background: var(--ccm-surface);
  border: 1px solid var(--ccm-line);
  color: var(--ccm-text);
  border-radius: var(--ccm-radius);
}
.search input::placeholder { color: #6B6B73; }
.search input:focus { border-color: var(--ccm-red); outline: none; }

/* Ikony v hlavicke (kosik, ucet) */
.navigation-buttons a,
.header-top .cart-count,
.top-nav-button-icon,
.header a i { color: var(--ccm-text); }
.cart-count, .navigation-counter { background: var(--ccm-red); color: #fff; }

/* --------------------------------------------------------------------------
   4) HLAVNE MENU
   -------------------------------------------------------------------------- */
#navigation,
.navigation-wrapper,
.menu-helper {
  background: var(--ccm-black);
  border-bottom: 1px solid var(--ccm-line);
}

.menu-level-1 > li > a,
#navigation .menu-level-1 > li > a {
  color: var(--ccm-text);
  font-family: var(--template-headings-font);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .05em;
  position: relative;
  transition: color .15s ease;
}
.menu-level-1 > li > a::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 6px;
  height: 3px;
  background: var(--ccm-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.menu-level-1 > li:hover > a::after,
.menu-level-1 > li.active > a::after { transform: scaleX(1); }
.menu-level-1 > li:hover > a,
.menu-level-1 > li.active > a { color: var(--ccm-red); }

/* Rozbalovacie podmenu */
.menu-level-2,
.navigation-in ul ul,
.submenu-wrapper {
  background: var(--ccm-surface);
  border: 1px solid var(--ccm-line);
  box-shadow: var(--ccm-shadow);
}
.menu-level-2 a, .menu-level-3 a { color: var(--ccm-text-dim); }
.menu-level-2 a:hover { color: var(--ccm-red); background: var(--ccm-surface-2); }

/* Mobilne menu */
.responsive-tools, .menu-trigger, .mobile-header { background: var(--ccm-black); }
.navigation-in.active, .menu-helper.active { background: var(--ccm-black); }

/* --------------------------------------------------------------------------
   5) TLACIDLA
   -------------------------------------------------------------------------- */
.btn, .button, input[type="submit"], button {
  font-family: var(--template-headings-font);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: var(--ccm-radius);
  transition: background .15s ease, color .15s ease, transform .1s ease;
}

.btn.btn-primary,
.btn-conversion,
.btn-cart,
.add-to-cart-button,
input[type="submit"].btn {
  background: var(--ccm-red);
  border: 2px solid var(--ccm-red);
  color: #fff;
}
.btn.btn-primary:hover,
.btn-conversion:hover,
.btn-cart:hover,
.add-to-cart-button:hover {
  background: var(--ccm-red-hover);
  border-color: var(--ccm-red-hover);
  color: #fff;
}

.btn.btn-secondary,
.btn-default,
.btn.btn-cancel {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}
.btn.btn-secondary:hover,
.btn-default:hover { background: #fff; color: var(--ccm-black); }

/* Sipkove tlacidlo ako v prezentacii (">") */
.btn-arrow::before {
  content: '\203A';
  display: inline-block;
  margin-right: 10px;
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -.08em;
}

/* --------------------------------------------------------------------------
   6) PRODUKTOVE KARTY
   -------------------------------------------------------------------------- */
.products-block .product,
.product,
.products > div {
  background: var(--ccm-surface);
  border: 1px solid var(--ccm-line);
  border-radius: var(--ccm-radius);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.products-block .product:hover,
.product:hover {
  border-color: var(--ccm-red);
  transform: translateY(-3px);
  box-shadow: var(--ccm-shadow);
}

/* Cerveny diagonalny roh na karte */
.products-block .product::after {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 28px 28px;
  border-color: transparent transparent var(--ccm-red) transparent;
  opacity: 0;
  transition: opacity .2s ease;
}
.products-block .product:hover::after { opacity: 1; }
.products-block .product { position: relative; }

/* Obrazok produktu — biele pozadie drzi produktovky citatelne */
.product .image,
.p .image,
.product-image {
  background: var(--ccm-product-bg);
  border-radius: var(--ccm-radius);
}

.product .name,
.product .name a,
.p-name a {
  color: var(--ccm-text);
  font-family: var(--template-headings-font);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.product .name a:hover { color: var(--ccm-red); }

.product .price,
.price-final,
.price-final strong,
.p-final-price-wrapper .price-final {
  color: var(--ccm-text);
  font-family: var(--template-headings-font);
  font-weight: 800;
  font-size: 22px;
}
.price-standard,
.price-additional,
del { color: #6B6B73; text-decoration: line-through; }
.price-save, .price-save-percent { color: var(--ccm-red); font-weight: 700; }

/* Vlajky / stitky (Akcia, Novinka, Vyprodej) */
.flags .flag,
.flag span,
.flag-discount,
.flag-action {
  background: var(--ccm-red);
  color: #fff;
  font-family: var(--template-headings-font);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  padding-right: 18px;
}
.flag-new span { background: #fff; color: var(--ccm-black); }

/* Dostupnost */
.availability-label, .availability span { color: var(--ccm-text-dim); }
.availability-amount { color: var(--ccm-red); }

/* --------------------------------------------------------------------------
   7) DETAIL PRODUKTU
   -------------------------------------------------------------------------- */
.p-detail, .p-detail-inner, #product-detail {
  background: var(--ccm-surface);
  border: 1px solid var(--ccm-line);
  border-radius: var(--ccm-radius);
  padding: 24px;
}
.p-detail .p-image-wrapper,
.p-main-image { background: var(--ccm-product-bg); border-radius: var(--ccm-radius); }

.p-detail-inner-header h1 { font-style: italic; }

.p-info-wrapper .price-final-holder,
.p-final-price-wrapper { color: var(--ccm-text); }
.p-final-price-wrapper .price-final { font-size: 34px; color: var(--ccm-red); }

/* Zalozky (Popis, Parametre, Diskusia) */
.p-detail-tabs, .shp-tabs-holder, .tab-content {
  background: transparent;
  border-color: var(--ccm-line);
}
.shp-tabs > li > a, .p-detail-tabs a {
  background: var(--ccm-surface-2);
  color: var(--ccm-text-dim);
  border: 1px solid var(--ccm-line);
  font-family: var(--template-headings-font);
  font-weight: 700;
  text-transform: uppercase;
}
.shp-tabs > li.active > a,
.shp-tabs > li > a:hover {
  background: var(--ccm-red);
  color: #fff;
  border-color: var(--ccm-red);
}

/* Varianty / vyber velkosti */
.advanced-parameter-inner,
.parameter-value,
select, .form-control {
  background: var(--ccm-surface-2);
  border: 1px solid var(--ccm-line);
  color: var(--ccm-text);
  border-radius: var(--ccm-radius);
}
.advanced-parameter input:checked + .advanced-parameter-inner,
.advanced-parameter-inner:hover { border-color: var(--ccm-red); }

/* --------------------------------------------------------------------------
   8) KATEGORIE, FILTRE, BOCNY PANEL
   -------------------------------------------------------------------------- */
.breadcrumbs, .breadcrumbs a, .breadcrumbs span { color: var(--ccm-text-dim); font-size: 13px; }
.breadcrumbs a:hover { color: var(--ccm-red); }

#categories, .sidebar, .box, #filters {
  background: var(--ccm-surface);
  border: 1px solid var(--ccm-line);
  border-radius: var(--ccm-radius);
}
#categories a, .sidebar a { color: var(--ccm-text-dim); }
#categories a:hover, #categories .active > a { color: var(--ccm-red); }

.category-header, .box h3, #filters h4 {
  font-family: var(--template-headings-font);
  text-transform: uppercase;
  color: var(--ccm-text);
  border-bottom: 2px solid var(--ccm-red);
}

/* Slider ceny */
.ui-slider { background: var(--ccm-line); }
.ui-slider .ui-slider-range { background: var(--ccm-red); }
.ui-slider .ui-slider-handle { background: #fff; border: 2px solid var(--ccm-red); border-radius: 50%; }

/* --- Template-12 boxy v bocnom paneli ---
   Sablona im dava biele pozadie cez triedu .box-bg-variant (dve triedy =
   vyssia specificita), preto tu treba !important. Box "Nejprodavanejsi"
   (.box-topProducts) sa objavi az ked mas v shope produkty — preto to
   vyskoci az pri plneni tovaru. */
.box,
.box-bg-variant,
.box-bg-default,
.box-sm,
.box-categories,
.box-topProducts,
.box-manufacturers,
.box-articles,
.box-poll,
.box-contact,
.sidebar .box,
.banner-wrapper.box {
  background: var(--ccm-surface) !important;
  border: 1px solid var(--ccm-line) !important;
  color: var(--ccm-text);
  border-radius: var(--ccm-radius);
}
.box h3, .box h4, .box .box-title, .box-title {
  color: var(--ccm-text);
  font-family: var(--template-headings-font);
  text-transform: uppercase;
}

/* Texty v boxoch. Sablona ma tu cierny text — na bielom podklade to sedelo,
   po stmaveni boxov by zmizol, takze ho prefarbujeme spolu s pozadim.
   Tieto dve veci musia ist VZDY naraz. */
.box, .box * { color: var(--ccm-text); }
.box a,
.box-categories a,
.top-products-name,
.top-products-content { color: var(--ccm-text) !important; }
.box a:hover,
.box-categories a:hover,
.top-products-content:hover .top-products-name { color: var(--ccm-red) !important; }
.top-products-price,
.box .price,
.box .price-final { color: var(--ccm-red) !important; }
.box strong { color: var(--ccm-text); }
.box li { border-color: var(--ccm-line); }

/* Poradove cislovanie v boxe najpredavanejsich */
.box-topProducts .order,
.top-products .order,
.top-products li > span:first-child { background: var(--ccm-red); color: #fff; }

/* Sekundarne tlacidlo ("Zpet do obchodu") — sablona mu dava cierny text */
.btn.btn-default,
a.btn.btn-default,
.btn-cancel,
a.btn-cancel {
  color: #fff !important;
  border: 2px solid #fff !important;
  background: transparent !important;
}
.btn.btn-default:hover,
a.btn.btn-default:hover,
.btn-cancel:hover {
  background: #fff !important;
  color: var(--ccm-bg) !important;
}

/* Strankovanie */
.pagination a, .pagination span {
  background: var(--ccm-surface-2);
  border: 1px solid var(--ccm-line);
  color: var(--ccm-text-dim);
  border-radius: var(--ccm-radius);
}
.pagination .active, .pagination a:hover { background: var(--ccm-red); border-color: var(--ccm-red); color: #fff; }

/* --------------------------------------------------------------------------
   9) KOSIK A OBJEDNAVKA
   -------------------------------------------------------------------------- */
.cart-inner, #cart-content, .cart-table, .order-summary {
  background: var(--ccm-surface);
  border: 1px solid var(--ccm-line);
  color: var(--ccm-text);
}
table, table th, table td { border-color: var(--ccm-line) !important; color: var(--ccm-text-dim); }
table th { background: var(--ccm-surface-2); color: var(--ccm-text); text-transform: uppercase; font-family: var(--template-headings-font); }

.cart-header .step, .co-step { color: var(--ccm-text-dim); }
.cart-header .active, .co-step.active { color: var(--ccm-red); }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea {
  background: var(--ccm-surface-2);
  border: 1px solid var(--ccm-line);
  color: var(--ccm-text);
  border-radius: var(--ccm-radius);
}
input:focus, textarea:focus, select:focus { border-color: var(--ccm-red) !important; outline: none; }

/* --------------------------------------------------------------------------
   10) BANNERY NA UVODKE
   -------------------------------------------------------------------------- */
.banner-wrapper, .next-to-carousel-banners .banner-wrapper {
  border-radius: var(--ccm-radius);
  overflow: hidden;
  position: relative;
}
.banner-wrapper::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.25) 60%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
.extended-banner-title, .banner-title {
  position: relative; z-index: 2;
  font-family: var(--template-headings-font);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0,0,0,.8);
}

/* Carousel sipky a bodky */
.carousel-control, .slick-arrow { background: rgba(0,0,0,.6); color: #fff; border: 1px solid var(--ccm-line); }
.carousel-control:hover, .slick-arrow:hover { background: var(--ccm-red); border-color: var(--ccm-red); }
.slick-dots li button::before { color: #fff; }
.slick-dots li.slick-active button::before { color: var(--ccm-red); }

/* --------------------------------------------------------------------------
   11) PATICKA
   -------------------------------------------------------------------------- */
#footer, .footer, .footer-bottom {
  background: var(--ccm-black);
  border-top: 3px solid var(--ccm-red);
  color: var(--ccm-text-dim);
}
#footer h3, #footer h4 {
  color: var(--ccm-text);
  font-family: var(--template-headings-font);
  text-transform: uppercase;
  letter-spacing: .06em;
}
#footer a { color: var(--ccm-text-dim); }
#footer a:hover { color: var(--ccm-red); }

/* Newsletter */
.newsletter, .newsletter-wrapper { background: var(--ccm-surface); border: 1px solid var(--ccm-line); }

/* --------------------------------------------------------------------------
   12) DROBNOSTI
   -------------------------------------------------------------------------- */
::selection { background: var(--ccm-red); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ccm-bg); }
::-webkit-scrollbar-thumb { background: var(--ccm-line); }
::-webkit-scrollbar-thumb:hover { background: var(--ccm-red); }

/* Cookie lista a modaly */
.siteCookies, .modal-content, .popup-widget, .messages {
  background: var(--ccm-surface);
  border: 1px solid var(--ccm-line);
  color: var(--ccm-text);
}

/* Hviezdicky hodnoteni */
.stars-wrapper .star, .rating i { color: var(--ccm-red); }

/* --------------------------------------------------------------------------
   13) POMOCNE TRIEDY pre vlastne HTML bloky (viz ccm-hero.html)
   -------------------------------------------------------------------------- */
/* Vylomenie bloku z kontajnera na plnu sirku okna (pouziva ho hero) */
.ccm-full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}

/* Obal vlozeny JS-kom */
.ccm-injected { margin-bottom: 8px; }

.ccm-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  background: #000 center/cover no-repeat;
  overflow: hidden;
  margin-bottom: 48px;
}
.ccm-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #000 0%, rgba(0,0,0,.85) 42%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.6) 100%);
}
/* diagonalny cerveny slash cez hero */
.ccm-hero::after {
  content: '';
  position: absolute;
  top: -10%; bottom: -10%; left: 46%;
  width: 46px;
  background: var(--ccm-red);
  transform: rotate(18deg);
  opacity: .9;
}
.ccm-hero__inner { position: relative; z-index: 3; max-width: 620px; padding: 48px 32px; }
.ccm-hero__eyebrow {
  font-family: var(--template-headings-font);
  letter-spacing: .35em; text-transform: uppercase;
  color: var(--ccm-text-dim); font-size: 13px; margin-bottom: 12px;
}
.ccm-hero__title {
  font-family: var(--template-headings-font);
  font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: .92; color: #fff; margin: 0 0 8px;
}
.ccm-hero__title em { color: var(--ccm-red); font-style: italic; }
.ccm-hero__text { color: #D4D4D8; font-size: 18px; margin-bottom: 28px; }

/* USP pás pod hero */
.ccm-usp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ccm-line); border-bottom: 1px solid var(--ccm-line); margin-bottom: 48px; }
.ccm-usp__item { padding: 26px 20px; border-right: 1px solid var(--ccm-line); }
.ccm-usp__item:last-child { border-right: 0; }
.ccm-usp__title { font-family: var(--template-headings-font); font-weight: 800; text-transform: uppercase; color: #fff; font-size: 17px; margin-bottom: 6px; }
.ccm-usp__title::after { content: ''; display: block; width: 32px; height: 3px; background: var(--ccm-red); margin-top: 8px; }
.ccm-usp__text { color: var(--ccm-text-dim); font-size: 14px; }

/* Kategoriove dlazdice (Hokejky / Korcule / Rukavice ...) */
.ccm-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 48px; }
.ccm-tile {
  position: relative; display: block; aspect-ratio: 1/1;
  background: var(--ccm-surface) center/cover no-repeat;
  border: 1px solid var(--ccm-line); overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.ccm-tile:hover { border-color: var(--ccm-red); transform: translateY(-4px); }
.ccm-tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.1) 60%); }
.ccm-tile__label {
  position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2;
  font-family: var(--template-headings-font); font-weight: 800; text-transform: uppercase;
  color: #fff; font-size: 20px;
}
.ccm-tile__label::after { content: ''; display: block; width: 40px; height: 3px; background: var(--ccm-red); margin-top: 8px; transition: width .2s ease; }
.ccm-tile:hover .ccm-tile__label::after { width: 80px; }

/* Cerveny CTA pás ("Dalsi prodejni kanal...") */
.ccm-cta-bar {
  background: var(--ccm-red);
  padding: 20px 28px;
  margin-bottom: 48px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%);
}
.ccm-cta-bar__text {
  font-family: var(--template-headings-font); font-weight: 800; font-style: italic;
  text-transform: uppercase; color: #fff; font-size: clamp(1.2rem, 2.4vw, 2rem); margin: 0;
}
.ccm-cta-bar__text::before { content: '\203A'; margin-right: 14px; font-size: 1.2em; line-height: 0; vertical-align: -.06em; }

/* Hero v rezime 'image' — cisty banner, ziadne prekrytie ani text.
   Pouziva sa, ked mas typografiu uz vypalenu v grafike bannera. */
.ccm-hero-img {
  display: block;
  width: 100%;
  background: #000;
  margin-bottom: 40px;
  overflow: hidden;
}
.ccm-hero-img__link { display: block; width: 100%; height: 100%; }
.ccm-hero-img__src {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* zmen na 'contain', ak sa ti banner nesmie orezat vobec */
  object-position: center;
}
/* Tenky cerveny prah pod bannerom — drzi to v CCM linke */
.ccm-hero-img { border-bottom: 3px solid var(--ccm-red); }

/* Hero bez obrazka — nech nevyzera rozbito, ale zamerne */
.ccm-hero--noimage {
  background:
    radial-gradient(1200px 400px at 20% 20%, rgba(227,30,36,.20), transparent 60%),
    linear-gradient(135deg, #141416 0%, #000 60%);
}

/* Dlazdica bez obrazka */
.ccm-tile--noimage {
  background:
    linear-gradient(135deg, var(--ccm-surface-2) 0%, #000 100%);
}
.ccm-tile--noimage::before { background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, transparent 70%); }

/* Obrazok sa dohladava az po vykresleni — nech nenaskoci tvrdo */
.ccm-tile { transition: border-color .2s ease, transform .2s ease, background-image .3s ease; }
.ccm-tile--loaded { animation: ccmFadeBg .35s ease; }
@keyframes ccmFadeBg { from { opacity: .55; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   13b) BANNER NA STRANKE KATEGORIE
   Template 11/12 obrazok kategorie sam nevykresluje — dorabame ho JS-kom.
   -------------------------------------------------------------------------- */
.ccm-cat-hero {
  position: relative;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  background: #000 center/cover no-repeat;
  margin-bottom: 32px;
  overflow: hidden;
}
.ccm-cat-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, #000 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.25) 100%);
}
.ccm-cat-hero::after {
  content: '';
  position: absolute;
  top: -20%; bottom: -20%; right: 12%;
  width: 28px;
  background: var(--ccm-red);
  transform: rotate(18deg);
  opacity: .85;
}
.ccm-cat-hero__inner {
  position: relative; z-index: 2;
  padding: 32px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.ccm-cat-hero__title {
  font-family: var(--template-headings-font);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1;
  margin: 0;
  text-shadow: 0 4px 24px rgba(0,0,0,.8);
}
.ccm-cat-hero__title::after {
  content: '';
  display: block;
  width: 64px; height: 4px;
  background: var(--ccm-red);
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   14) RESPONZIVITA
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .ccm-usp { grid-template-columns: repeat(2, 1fr); }
  .ccm-usp__item:nth-child(2n) { border-right: 0; }
  .ccm-tiles { grid-template-columns: repeat(2, 1fr); }
  .ccm-hero::after { left: 62%; }
}
@media (max-width: 575px) {
  .ccm-cat-hero { min-height: 180px; }
  .ccm-cat-hero__inner { padding: 20px; }
  .ccm-hero { min-height: 420px; }
  .ccm-hero__inner { padding: 32px 20px; }
  .ccm-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ccm-usp { grid-template-columns: 1fr; }
  .ccm-usp__item { border-right: 0; border-bottom: 1px solid var(--ccm-line); }
}

/* ==========================================================================
   15) PATICKA A NEWSLETTER
   Mas vlastnu paticku (.ccm-footerx) pridanu cez temu. Povodna Shoptet
   paticka #footer obsahuje uz len dve veci: newsletter a spodnu listu.
   Newsletter NERUSIME — je v nom jediny funkcny odberovy formular
   (posiela na /action/MailForm/subscribeToNewsletters/). Len mu dame
   vzhlad CCM Insider. Spodnu listu zostihneme a JS ju presunie az za
   tvoju paticku, aby to cele citalo ako jedna paticka.
   ========================================================================== */

/* --- povodna paticka: zhodit vsetku vlastnu grafiku --- */
#footer.footer {
  background: transparent;
  border-top: 0;
  padding: 0;
}

/* --- NEWSLETTER v tvojom dizajne (CCM Insider) --- */
#footer .footer-newsletter {
  max-width: 1180px;
  margin: 25px auto 40px;
  padding: 35px 38px;
  border-radius: 17px;
  border-left: 5px solid var(--ccm-red);
  background:
    radial-gradient(circle at 90% 30%, rgba(227,30,36,.28), transparent 25%),
    linear-gradient(125deg, #080809, #17181c);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px 40px;
}

#footer .footer-newsletter .newsletter-header {
  flex: 1 1 420px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* eyebrow "CCM Outlet Insider" — vklada ho JS */
.ccm-news__tag {
  color: var(--ccm-red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

#footer .footer-newsletter .newsletter-header h3,
#footer .footer-newsletter .newsletter-header .topic {
  margin: 0 0 8px;
  font-family: var(--template-headings-font);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
}
#footer .footer-newsletter .newsletter-header h3::after { display: none; }

#footer .footer-newsletter .newsletter-header p {
  margin: 0;
  color: #b1b3b8;
  max-width: 650px;
  font-size: 15px;
  line-height: 1.5;
}

/* --- formular --- */
#footer .footer-newsletter .subscribe-form { flex: 1 1 340px; margin: 0; }
#footer .footer-newsletter fieldset { border: 0; margin: 0; padding: 0; }

#footer .footer-newsletter .form-group,
#footer .footer-newsletter .smart-label-wrapper { margin-bottom: 12px; }

#footer .footer-newsletter input[type="email"],
#footer .footer-newsletter input.form-control {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid #2f3037;
  border-radius: 9px;
  color: #fff;
  padding: 13px 16px;
  font-size: 15px;
}
#footer .footer-newsletter input.form-control::placeholder { color: #7a7c84; }
#footer .footer-newsletter input.form-control:focus {
  border-color: var(--ccm-red);
  background: rgba(255,255,255,.09);
  outline: none;
}

/* plavajuci label Shoptetu — nech nesvieti cierny na tmavom */
#footer .footer-newsletter label,
#footer .footer-newsletter .smart-label { color: #9a9ca3; }
#footer .footer-newsletter .required-asterisk { color: var(--ccm-red); }

#footer .footer-newsletter .btn.btn-primary {
  width: 100%;
  background: var(--ccm-red);
  border: 2px solid var(--ccm-red);
  color: #fff;
  border-radius: 9px;
  padding: 13px 22px;
  font-family: var(--template-headings-font);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
#footer .footer-newsletter .btn.btn-primary:hover {
  background: var(--ccm-red-hover);
  border-color: var(--ccm-red-hover);
}

/* suhlas so spracovanim udajov — drobny, ale citatelny */
#footer .footer-newsletter .consents,
#footer .footer-newsletter .consents * {
  color: #85878e;
  font-size: 12px;
  line-height: 1.45;
}
#footer .footer-newsletter .consents a { color: #b1b3b8; text-decoration: underline; }
#footer .footer-newsletter .consents a:hover { color: var(--ccm-red); }

/* honeypot proti spamu — Shoptet ho schovava sam, poistka */
#footer .footer-newsletter input[name="surname"] { position: absolute; left: -9999px; }

/* --- SPODNA LISTA (copyright + cookies) --- */
#footer .footer-bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 38px;
  border-top: 1px solid var(--ccm-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 24px;
  font-size: 13px;
  color: #7a7c84;
}
#footer .footer-bottom a { color: #9a9ca3; }
#footer .footer-bottom a:hover { color: var(--ccm-red); }

/* Tvoja vlastna paticka uz ma svoj copyright ("© 2026 CCM Outlet / Puffbox
   s.r.o."), takze ten Shoptetovsky by bol druhy v poradi. Skryjeme mu text,
   ale odkaz na nastavenie cookies v nom NECHAVAME viditelny — cez neho
   navstevnik meni suhlas a je to jedina cesta, ako to spravit.
   (Font-size 0 na rodicovi + vratenie na odkaze; text uzol sa inak
   samostatne schovat neda.)
   Ak by si chcel copyright od Shoptetu naspat, zmaz tieto dva riadky. */
#footer .footer-bottom .copyright { margin: 0; font-size: 0; }
#footer .footer-bottom .copyright a { font-size: 13px; }

/* Odkaz na nastavenie cookies nechavame viditelny zamerne — navstevnik
   cez neho meni suhlas a je to jedina cesta, ako to spravit. */
#footer .footer-bottom .cookies-settings { white-space: nowrap; }

/* --- Skrytie "Vytvoril Shoptet" ---
   ZAMERNE VYPNUTE. Na nizsich tarifoch Shoptetu je odstranenie tohto
   podpisu v rozpore s podmienkami sluzby; na vyssich sa da vypnut priamo
   v administracii, co je cistejsie ako schovavanie cez CSS.
   Ak vies, ze to mas v tarife dovolene, odkomentuj nasledujuce dva riadky. */
/*
#footer .footer-bottom > span:first-child { display: none; }
*/

/* --- tvoja vlastna paticka --- */
.ccm-footerx { margin-top: 0; }

@media (max-width: 767px) {
  #footer .footer-newsletter { padding: 26px 22px; margin: 16px 12px 28px; gap: 20px; }
  #footer .footer-newsletter .newsletter-header h3 { font-size: 22px; }
  #footer .footer-bottom { padding: 16px 22px; justify-content: center; text-align: center; }
}

/* ==========================================================================
   16) BOCNY PANEL KATEGORII
   Template-12 ho vykresluje ako obycajny box so zoznamom odkazov.
   Robime z neho panel s cervenym indikatorom aktivnej polozky.
   ========================================================================== */

.sidebar .box.box-categories {
  background: linear-gradient(180deg, #141416, #0e0e10) !important;
  border: 1px solid var(--ccm-line) !important;
  border-radius: 14px;
  padding: 0 !important;
  overflow: hidden;
}

/* nadpis "Kategorie" s kratkou cervenou znackou */
.sidebar .box-categories h3.pageElement__heading {
  position: relative;
  margin: 0;
  padding: 18px 20px 14px 22px;
  font-family: var(--template-headings-font);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid var(--ccm-line);
}
.sidebar .box-categories h3.pageElement__heading::after {
  content: '';
  display: block;
  position: absolute;
  left: 22px; bottom: -1px;
  width: 38px; height: 2px;
  background: var(--ccm-red);
}

/* polozky */
.sidebar .box-categories .categories { border-bottom: 1px solid rgba(42,42,47,.5); }
.sidebar .box-categories .categories:last-child { border-bottom: 0; }
.sidebar .box-categories .topic { position: relative; }

.sidebar .box-categories .topic > a {
  display: block;
  padding: 13px 40px 13px 22px !important;
  font-family: var(--template-headings-font);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #a9aab1 !important;
  transition: color .15s, background .15s, padding-left .15s;
}

/* cerveny prah vlavo — vysunie sa pri hoveri a na aktivnej polozke */
.sidebar .box-categories .topic::before {
  content: '';
  position: absolute;
  left: 0; top: 9px; bottom: 9px;
  width: 3px;
  background: var(--ccm-red);
  transform: scaleY(0);
  transition: transform .18s;
}

/* sipka vpravo */
.sidebar .box-categories .topic > a::after {
  content: '\203A';
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-58%);
  font-size: 20px;
  line-height: 0;
  color: var(--ccm-red);
  opacity: 0;
  transition: opacity .15s, right .15s;
}

.sidebar .box-categories .topic:hover > a {
  color: #fff !important;
  background: rgba(255,255,255,.04);
  padding-left: 28px !important;
}
.sidebar .box-categories .topic:hover::before { transform: scaleY(1); }
.sidebar .box-categories .topic:hover > a::after { opacity: 1; right: 16px; }

.sidebar .box-categories .topic.active > a {
  color: #fff !important;
  background: rgba(227,30,36,.10);
}
.sidebar .box-categories .topic.active::before { transform: scaleY(1); }
.sidebar .box-categories .topic.active > a::after { opacity: 1; }

/* rozbalovacia sipka podkategorii */
.sidebar .box-categories .cat-trigger {
  width: 30px; height: 30px; line-height: 30px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid var(--ccm-line);
  color: #9a9ca3;
  transition: all .15s;
}
.sidebar .box-categories .cat-trigger:hover {
  border-color: var(--ccm-red);
  color: #fff;
  background: rgba(227,30,36,.15);
}

/* ostatne boxy v paneli */
.sidebar .box h3, .sidebar .box h4 { border-bottom: 0 !important; }
.sidebar .box:not(.box-categories) {
  padding: 18px 20px !important;
  border-radius: 14px;
  background: #121214 !important;
}
.sidebar .box:not(.box-categories) h3 {
  position: relative;
  padding-bottom: 12px;
  font-family: var(--template-headings-font);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a8c93;
}
.sidebar .box:not(.box-categories) h3::after {
  content: '';
  position: absolute;
  left: 0; bottom: 4px;
  width: 32px; height: 2px;
  background: var(--ccm-red);
}

/* logá platobných kariet — monochrom, farebne az na hover */
.sidebar .box-onlinePayments img {
  filter: brightness(0) invert(1) !important;
  opacity: .6;
  transition: opacity .2s, filter .2s;
}
.sidebar .box-onlinePayments:hover img { filter: none !important; opacity: 1; }

/* panel sa drzi pri scrollovani dlheho vypisu */
@media (min-width: 992px) {
  .sidebar .sidebar-inner { position: sticky; top: 20px; }
}

/* ==========================================================================
   17) PRODUKTOVA KARTA A DETAIL PRODUKTU

   POZOR na tlacidla do kosika: sablona im dava biele pozadie AJ biely text,
   takze bez !important vyzeraju ako prazdny obdlznik. Preto tu je.
   ========================================================================== */

.btn.btn-conversion,
.btn.btn-cart,
.add-to-cart-button,
button.add-to-cart-button,
.btn-conversion {
  background: var(--ccm-red) !important;
  border: 2px solid var(--ccm-red) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-family: var(--template-headings-font);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 13px 26px !important;
}
.btn.btn-conversion:hover,
.btn.btn-cart:hover,
.add-to-cart-button:hover {
  background: var(--ccm-red-hover) !important;
  border-color: var(--ccm-red-hover) !important;
  color: #fff !important;
}

/* --- karta vo vypise --- */
.product { border-radius: 14px !important; }
.product a.image {
  display: block;
  background: var(--ccm-product-bg) !important;
  border-radius: 12px;
  margin: 10px;
  overflow: hidden;
}
.product a.name {
  display: block;
  text-align: left !important;
  text-transform: uppercase !important;
  font-family: var(--template-headings-font);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .03em;
  color: #fff !important;
  padding: 0 14px;
}
.product .p-in-in { padding-bottom: 6px; }
.product .availability {
  text-align: left;
  padding: 0 14px;
  font-size: 13px;
  color: #8a8c93 !important;
}
.product .price-final, .product .price {
  display: block;
  text-align: left;
  padding: 0 14px;
  font-family: var(--template-headings-font);
  font-weight: 800;
  font-size: 23px;
  color: #fff !important;
}
.product .p-bottom { padding: 10px 14px 14px; }
.product .p-code {
  display: block;
  padding: 0 14px 10px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6b6d74 !important;
}
.product .p-desc, .product .description {
  padding: 0 14px 12px;
  font-size: 13px;
  color: #8a8c93 !important;
}

/* Sablona dava tymto obalom pevne biele pozadie — prebijame ich tiez,
   inak by biely ram presvital spod panela. */
.p-image-wrapper, .p-main-image, .p-image,
.p-detail .p-image-wrapper, .p-detail .p-main-image {
  background: var(--ccm-product-bg) !important;
}

/* --- detail produktu ---
   Povodne bol obrazkovy panel vysoky cez 870 px (biely blok s malym
   obrazkom hore). Davame mu rozumnu vysku a obrazok centrujeme. */
.p-detail-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  align-items: flex-start;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.p-detail-inner .p-image-wrapper {
  flex: 1 1 420px;
  order: -1;                 /* obrazok vlavo, udaje vpravo */
  height: auto !important;
  background: var(--ccm-product-bg) !important;
  border: 1px solid var(--ccm-line);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Wrapper je flex. Sablona doň dava dve deti — obrazok a pas miniatur
   (.row). V riadku vedla seba a s bootstrapovymi zapornymi okrajmi to
   obrazok odtlacalo doprava, takze bol vlavo odsadeny a vpravo na hrane.
   Preto stlpec a vynulovane okraje — potom sedi presne v strede. */
.p-detail-inner .p-image-wrapper {
  flex-direction: column !important;
  box-sizing: border-box;
}
.p-detail-inner .p-image-wrapper .p-image {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.p-detail-inner .p-image-wrapper .p-main-image {
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.p-detail-inner .p-image-wrapper img {
  display: block !important;
  margin: 0 auto !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 520px !important;
  object-fit: contain;
}
/* pas miniatur: odsadenie len ked tam nejake naozaj su, inak by prazdny
   pas rozhodil zvisle centrovanie */
.p-detail-inner .p-image-wrapper .row { margin: 0 !important; padding: 0 !important; }
.p-detail-inner .p-image-wrapper .row > * { margin-top: 14px; }

/* --- LUPA (cloud-zoom) ---
   Shoptet si pri prejdeni myskou vytvara vlastne vrstvy a dava im
   biele pozadie aj biele okraje. Na tmavom webe to preblikne bielou. */
.cloud-zoom-big,
.cloud-zoom-lens,
.cloud-zoom-loading,
.mousetrap,
.zoom-big-wrapper,
a.p-main-image.cloud-zoom {
  background: var(--ccm-product-bg) !important;
  border-color: var(--ccm-line) !important;
}
.cloud-zoom-lens { border: 2px solid var(--ccm-red) !important; }
.cloud-zoom-loading { color: #fff !important; }

/* Keby ti lupa aj tak prekazala (napr. orezava obrazok), vypnes ju
   odkomentovanim tohto riadku: */
/* .p-main-image.cloud-zoom { pointer-events: none; } */
.p-detail-inner .p-data-wrapper {
  flex: 1 1 380px;
  background: var(--ccm-surface) !important;
  border: 1px solid var(--ccm-line);
  border-radius: 16px;
  padding: 26px;
}
.p-detail-inner-header h1 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-style: italic;
  margin: 6px 0 14px;
}
.p-short-description { color: #a9aab1 !important; font-size: 15px; line-height: 1.6; }
.p-detail .price-final,
.p-final-price-wrapper .price-final {
  color: var(--ccm-red) !important;
  font-family: var(--template-headings-font);
  font-weight: 800;
  font-size: 34px;
}
.p-detail .availability, .p-detail .availability-label { color: #8a8c93 !important; font-size: 14px; }

/* pocitadlo kusov */
.p-detail input[type="number"],
.p-detail .quantity input {
  background: var(--ccm-surface-2) !important;
  border: 1px solid var(--ccm-line) !important;
  color: #fff !important;
  border-radius: 9px;
}
.p-detail .increase, .p-detail .decrease,
.p-detail .btn-minus, .p-detail .btn-plus {
  background: var(--ccm-surface-2) !important;
  border: 1px solid var(--ccm-line) !important;
  color: #fff !important;
  border-radius: 9px;
}
.p-detail .increase:hover, .p-detail .decrease:hover {
  border-color: var(--ccm-red) !important;
  color: var(--ccm-red) !important;
}

/* zalozky pod detailom */
.shp-tabs-wrapper { margin-top: 38px; }
.shp-tabs-row { border-bottom: 1px solid var(--ccm-line); }
.shp-tabs > li > a, .shp-tabs-row a {
  font-family: var(--template-headings-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8a8c93 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 14px 20px !important;
}
.shp-tabs > li.active > a,
.shp-tabs-row a.active,
.shp-tabs-row a:hover {
  color: #fff !important;
  border-bottom: 3px solid var(--ccm-red) !important;
}

@media (max-width: 767px) {
  .p-detail-inner { gap: 20px; }
  .p-detail-inner .p-image-wrapper { padding: 14px; }
  .p-detail-inner .p-image-wrapper img { max-height: 320px; }
  .p-detail-inner .p-data-wrapper { padding: 20px; }
}

/* ==========================================================================
   18) DROBNE ODKAZY A POPISKY
   Sablona im dava ciernu farbu, co na tmavom podklade znamena neviditelne.
   Su to male veci, ale zakaznik ich bez toho proste nenajde.
   ========================================================================== */

/* "Tisk", "Zeptat se", "Sdilet" pod detailom produktu */
.link-icon,
.link-icon span,
.link-icon i,
.p-detail .link-icon,
.p-detail-inner .link-icon { color: #a9aab1 !important; }
.link-icon:hover,
.link-icon:hover span,
.link-icon:hover i { color: var(--ccm-red) !important; }

/* panel, ktory sa otvori po kliknuti na "Sdilet" */
.share-buttons,
.js-share-buttons,
.share-wrapper {
  background: var(--ccm-surface) !important;
  border: 1px solid var(--ccm-line) !important;
  border-radius: 10px;
}
.share-buttons a,
.share-buttons span,
.social-buttons a,
.js-share-buttons a,
.share-wrapper a { color: #fff !important; }
.share-buttons a:hover,
.js-share-buttons a:hover { color: var(--ccm-red) !important; }

/* "Kod: 47" pri produkte */
.p-code,
.p-code-label,
.p-code-value,
.p-code span { color: #6b6d74 !important; }

/* sekundarne tlacidla — text vnutri spanu si drzal ciernu */
.btn.btn-default, .btn.btn-default *,
a.btn.btn-default, a.btn.btn-default * { color: #fff !important; }
.btn.btn-default:hover, .btn.btn-default:hover * { color: var(--ccm-bg) !important; }

/* hviezdicka povinneho pola */
.required-asterisk { color: var(--ccm-red) !important; }

/* podpis Shoptetu v spodnej liste — nechavame ho, ale nech je aspon citatelny */
#footer .footer-bottom a.title,
#footer .footer-bottom > span { color: #7a7c84 !important; }
#footer .footer-bottom a.title:hover { color: #9a9ca3 !important; }