/* ============================================================
   LaCoffee · Comic × 50s — Shoptet CSS Override
   Paste into:  Administrace → Vzhled a obsah → Editor vzhledu
                → Vlastní CSS styly
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
  --lc-cream:    #FCEBC8;
  --lc-cream-2:  #F6DDA0;
  --lc-paper:    #FFF6E0;
  --lc-red:      #E03127;
  --lc-red-light: #e65f57;
  --lc-red-deep: #B11D14;
  --lc-teal:     #1FAFB5;
  --lc-green: #1fb577;
  --lc-mustard:  #FAD70B;
  --lc-navy:     #142847;
  --lc-ink:      #1c1209;
  --lc-pink:     #F25C9E;
  --lc-shadow:    6px 6px 0 var(--lc-ink);
  --lc-shadow-sm: 3px 3px 0 var(--lc-ink);
  --lc-shadow-lg: 10px 10px 0 var(--lc-ink);
  --lc-border:       3px solid var(--lc-ink);
  --lc-border-thick: 4px solid var(--lc-ink);
  --lc-text-shadow: 3px 3px 0 var(--lc-red-light), 6px 6px 0 var(--lc-mustard);
  --lc-text-shadow-lg: 3px 3px 0 var(--lc-red-light), 6px 6px 0 var(--lc-mustard);

  /* Font stacks */
  --lc-font-display:    'Bangers', sans-serif;
  --lc-font-body:       var(--template-font), sans-serif;
  --lc-font-body-serif: 'Zilla Slab', serif;
  --lc-font-heading:    'Bangers', 'Zilla Slab', serif;

  /* Letter spacing */
  --lc-ls:       0.08em;
  --lc-ls-wide:  0.14em;
  --lc-ls-wider: 0.18em;

  /* Border radii */
  --lc-radius-pill:  999px;
  --lc-radius-panel: 16px;
  --lc-radius-card:  14px;
  --lc-radius-input: 12px;
  --lc-radius-sm:    8px;

  /* Override Shoptet theme variables */
  --color-primary:        var(--lc-ink) !important;
  --color-primary-hover:  var(--lc-red) !important;
  --color-secondary:      var(--lc-red) !important;
  --color-secondary-hover: var(--lc-mustard) !important;
  --color-tertiary:       var(--lc-mustard) !important;
  --color-tertiary-hover: var(--lc-red) !important;
  --color-header-background: var(--lc-ink) !important;
  --colors-surface-primary: transparent !important;
  --colors-surface-secondary: var(--lc-paper) !important;
  --colors-foregrounds-borders-primary: var(--lc-cream) !important;
  --colors-foregrounds-borders-secondary: var(--lc-cream-2) !important;
  --template-font:       'Zilla Slab' !important;
  --template-headings-font: 'Bangers' !important;
}

/* ---- Halftone pattern as a body backdrop ---- */
body,
body.type-homepage,
body.type-index {
  background:
          radial-gradient(circle, rgba(26,20,16,0.07) 1.2px, transparent 1.4px) 0 0/14px 14px,
          var(--lc-cream) !important;
  color: var(--lc-ink) !important;
  font-family: var(--lc-font-body) !important;
  font-weight: 400 !important;
  font-size: 16px;
}

/* ---- Generic type ---- */
h1, h2, h3, h4,
.products-block-headline,
.basic-section h2,
.in-text-banner h1, .in-text-banner h2,
.homepage-group-title {
  font-family: var(--lc-font-heading) !important;
  letter-spacing: 0.04em !important;
  color: var(--lc-ink) !important;
  font-weight: 400 !important;
  line-height: 0.98 !important;
}

a { color: var(--lc-red); }
a:hover { color: var(--lc-red-deep); }

/* =============== TOP BAR =============== */
.top-navigation-bar,
.header-top,
#header .header-top,
.shp-top-navigation-bar {
  background: var(--lc-ink) !important;
  color: var(--lc-cream) !important;
  font-family: var(--lc-font-display) !important;
  letter-spacing: var(--lc-ls-wide) !important;
  /*border-bottom: 3px solid var(--lc-red) !important;*/
  font-size: 14px !important;
  font-weight: 400 !important;
}
.top-navigation-contacts,
.top-navigation-menu,
.top-navigation-tools,
.top-navigation-bar-menu,
.top-navigation-bar-menu-helper {
  background: transparent !important;
}
.top-navigation-bar a,
.header-top a,
.shp-top-navigation-bar a,
.top-navigation-bar strong,
.top-navigation-contacts strong { color: var(--lc-mustard) !important; font-weight: 400 !important; }
.top-navigation-bar a:hover,
.header-top a:hover { color: var(--lc-cream) !important; }
.top-navigation-bar .top-nav-button,
.top-navigation-bar .top-nav-button span {
  color: var(--lc-mustard) !important;
  font-family: var(--lc-font-display) !important;
  font-weight: 400 !important;
  background: transparent !important;
}

/* =============== HEADER (dark) =============== */
#header,
.shp-header,
header.site-header {
  background: var(--lc-ink) !important;
  /*border-bottom: 3px solid var(--lc-red) !important;*/
  position: relative;
}
#header .header-top {
  background: var(--lc-ink) !important;
}
#header a,
.header-top a,
.navigation-buttons a {
  color: var(--lc-cream) !important;
}

/* Mobile menu panel */
.menu-helper {
  background: var(--lc-ink) !important;
}
.menu-level-1 > li {
  border-bottom: 1px solid rgba(252,235,200,0.15) !important;
}

/* Logo on dark backgrounds — invert to white */
.header-logo img,
.shp-header .header-logo img,
.logo img,
#header .site-name img,
.sidebar .site-name img {
  max-height: 70px !important;
}
#footer .site-name img {
}

/* Search box */
.search-form,
#header .search,
.top-search-line,
.basic-search,
.header-search {
  border: 2px solid rgba(252,235,200,0.3) !important;
  border-radius: var(--lc-radius-pill) !important;
  background: rgba(252,235,200,0.1) !important;
  box-shadow: none !important;
  font-family: var(--lc-font-body) !important;
}
.sidebar .search,
.sidebar .search-form {
  border: var(--lc-border) !important;
  background: var(--lc-paper) !important;
  box-shadow: var(--lc-shadow-sm) !important;
}
#header .search-form input[type="search"],
#header .search-input,
#header .query-input {
  background: transparent !important;
  border: none !important;
  color: var(--lc-cream) !important;
  font-family: var(--lc-font-body) !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}
#header .search-form input::placeholder {
  color: rgba(252,235,200,0.5) !important;
}
.search-form input[type="search"],
.search-input,
.query-input,
.top-search-line input,
.basic-search input {
  background: transparent !important;
  border: none !important;
  color: var(--lc-ink) !important;
  font-family: var(--lc-font-body) !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}
.search-form button,
.search-form .btn,
.top-search-line button,
.basic-search button,
.search-submit {
  background: var(--lc-red) !important;
  color: var(--lc-cream) !important;
  border: none !important;
  border-radius: var(--lc-radius-pill) !important;
  box-shadow: none !important;
  padding: 8px 16px !important;
}

/* =============== CART ICON — THE COMIC BURST =============== */
.navigation-buttons {
  position: relative;
}

/* Reset global .btn styles on the header cart link */
.navigation-buttons .btn.btn-icon,
.btn.next-step-back,
.btn.next-step-back:hover,
.navigation-buttons a.cart-count {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.navigation-buttons .btn.btn-icon:hover,
.navigation-buttons a.cart-count:hover {
  transform: none !important;
  box-shadow: none !important;
}

.btn.next-step-back,
.btn.next-step-back:hover {
  padding: 10px !important;
}

.lc-cart-burst {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  min-height: 48px;
  width: 90px;
}
.lc-cart-burst .lc-burst-svg {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  z-index: 1;
  pointer-events: none;
  transition: transform .2s ease;
}
.lc-cart-burst:hover .lc-burst-svg { transform: rotate(12deg) scale(1.06); }
.lc-cart-burst > a,
.lc-cart-burst > .header-cart-content,
.lc-cart-burst .basket-mini,
.lc-cart-burst .cart-info {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--lc-ink) !important;
  text-decoration: none !important;
  font-family: var(--lc-font-display) !important;
  letter-spacing: 0.06em !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}
.lc-cart-burst svg.lc-cart-icon {
  width: 48px;
  height: 48px;
  stroke: var(--lc-ink);
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lc-cart-burst .cart-price {
  font-family: var(--lc-font-display) !important;
  font-size: 14px !important;
  color: var(--lc-ink) !important;
}

.lc-cart-burst .cart-count.cart-count.cart-count.cart-count.cart-count {
  padding: 27px 0 0 !important;
}

/* Cart count badge — reuses Shoptet's existing element */
.lc-cart-burst .cart-count,
.lc-cart-burst .basket-mini-count,
.lc-cart-burst i,
.navigation-buttons a[data-target=cart] i{
  position: absolute !important;
  top: -2px !important;
  left: 38px !important;
  z-index: 3 !important;
  min-width: 26px !important;
  height: 26px !important;
  padding: 0 5px !important;
  background: var(--lc-red) !important;
  color: var(--lc-cream) !important;
  border: 2px solid var(--lc-ink) !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  font-family: var(--lc-font-display) !important;
  font-size: 14px !important;
  line-height: 24px !important;
  text-indent: -0.06em;
  letter-spacing: 0.06em !important;
  box-shadow: 2px 2px 0 var(--lc-ink) !important;
  font-weight: 400 !important;
}

.header-top .btn.cart-count:before {
  background: var(--lc-mustard);
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 120 120"><path d="m60 2 10 16L86 8v20h18L92 42l18 10-20 8 20 14-20 6 12 18-18-4 2 20-18-10-8 14-8-14-18 10 2-20-18 4 12-18-20-6 20-14-20-8 18-10-12-14h18V8l16 10z" style="fill:%23f4b324;fill-rule:nonzero;stroke:%231a1410;stroke-width:3.5px" transform="matrix(1.10416 .29586 -.2545 .94984 9.021 -15.742)"/><path d="m60 12 8 12 14-6v16h14l-8 12 14 8-16 6 16 12-16 4 8 14-14-4 2 18-14-8-8 12-8-12-14 8 2-18-14 4 8-14-16-4 16-12-16-6 14-8-8-12h14V18l14 6z" style="fill:none;fill-rule:nonzero;stroke:%231a1410;stroke-opacity:.55;stroke-width:1.5px;stroke-linejoin:miter;stroke-dasharray:3,4" transform="matrix(1.11763 .29437 -.27207 1.03298 9.266 -21.14)"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 100%;
  margin-right: 0px;
  font-size: 24px;
  color: var(--lc-ink);
}

.lc-cart-burst .sr-only { position: absolute !important; }

.lc-cart-burst.lc-pop { animation: lc-pop .5s ease; }
@keyframes lc-pop {
  0%   { transform: scale(1) rotate(0); }
  35%  { transform: scale(1.22) rotate(-8deg); }
  60%  { transform: scale(0.94) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Flying POW emitted on add-to-cart */
.lc-pow-flier {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  font-family: var(--lc-font-display);
  font-weight: 400;
  font-size: 30px;
  color: var(--lc-red);
  text-shadow: 2px 2px 0 var(--lc-ink), 4px 4px 0 var(--lc-mustard);
  animation: lc-pow-fly .9s ease-out forwards;
}
@keyframes lc-pow-fly {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.4) rotate(-10deg); }
  20%  { opacity: 1; transform: translate(-50%,-50%) scale(1.2) rotate(-10deg); }
  100% { opacity: 0; transform: translate(-50%,-130%) scale(1) rotate(10deg); }
}

/* =============== TOP MARQUEE (injected by JS) =============== */
.lc-marquee {
  background: var(--lc-ink);
  color: var(--lc-cream);
  font-family: var(--lc-font-display);
  font-weight: 400;
  letter-spacing: var(--lc-ls-wide);
  font-size: 15px;
  padding: 9px 0;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 3px solid var(--lc-red);
}
.lc-marquee-track {
  display: inline-flex;
  gap: 60px;
  padding-left: 60px;
  animation: lc-marquee 38s linear infinite;
}
.lc-marquee-track span { display: inline-flex; align-items: center; gap: 14px; }
.lc-marquee-track .star { color: var(--lc-mustard); font-size: 18px; }
@keyframes lc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =============== MAIN NAV (dark) =============== */
.navigation,
.navigation-in,
.navigation-buttons,
.menu-level-1,
#menu .navigation,
#navigation {
  background: var(--lc-ink) !important;
}
#navigation {
  height: auto;
}
.navigation a,
.menu-level-1 > li > a,
.menu-level-1 a,
.menu-level-1 > li > a > b {
  font-family: var(--lc-font-display) !important;
  letter-spacing: var(--lc-ls) !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  color: var(--lc-cream) !important;
  text-decoration: none !important;
  padding: 10px 12px !important;
  position: relative;
  font-weight: 400 !important;
}
.navigation a:hover,
.menu-level-1 a:hover { color: var(--lc-mustard) !important; }
.menu-level-1 > li:hover > a::after,
.menu-level-1 > li.active > a::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 6px;
  height: 4px;
  background: var(--lc-red);
  border-radius: 4px;
}
.navigationActions a,
.navigationActions span {
  color: var(--lc-mustard) !important;
}
.menu-helper {
  color: var(--lc-cream) !important;
}

@media (min-width:768px) {
  .navigation-in > ul > li > a:hover {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* Submenu / mega-menu */
.menu-level-2,
.in-menu-banner,
.menu-level-1 ul {
  background: var(--lc-cream) !important;
  border: var(--lc-border-thick) !important;
  /*box-shadow: var(--lc-shadow-lg) !important;*/
  border-bottom-width: 8px !important;
  border-right-width: 8px !important;
  border-radius: var(--lc-radius-panel) !important;
  padding: 14px !important;
}
.menu-level-2 li,
.menu-level-2 div {
  background: transparent !important;
}
.menu-level-2 a,
.menu-level-2 span {
  font-family: var(--lc-font-body-serif) !important;
  font-size: 15px !important;
  letter-spacing: normal !important;
  padding: 8px 8px !important;
  border-radius: var(--lc-radius-sm);
  font-weight: 400 !important;
  color: var(--lc-ink) !important;
  display: inline-block;
}
.menu-level-2 a:hover { background: var(--lc-mustard); color: var(--lc-ink) !important; }
.menu-level-2 img {
  border-radius: var(--lc-radius-sm) !important;
  border: 2px solid var(--lc-ink) !important;
}

/* =============== CAROUSEL / HERO BANNER =============== */
#carousel,
.banner-carousel,
.in-text-banner,
.image-banner {
  background: var(--lc-cream) !important;
  border: var(--lc-border-thick) !important;
  border-radius: var(--lc-radius-card) !important;
  box-shadow: var(--lc-shadow-sm) !important;
  margin: 16px auto !important;
  position: relative;
  overflow: hidden !important;
}
#carousel::before,
.in-text-banner::before {
  content: '';
  position: absolute;
  right: -160px; top: -120px;
  width: 700px; height: 700px;
  background:
          conic-gradient(
                  from 0deg,
                  var(--lc-mustard) 0 15deg, transparent 15deg 30deg,
                  var(--lc-mustard) 30deg 45deg, transparent 45deg 60deg,
                  var(--lc-mustard) 60deg 75deg, transparent 75deg 90deg,
                  var(--lc-mustard) 90deg 105deg, transparent 105deg 120deg,
                  var(--lc-mustard) 120deg 135deg, transparent 135deg 150deg,
                  var(--lc-mustard) 150deg 165deg, transparent 165deg 180deg,
                  var(--lc-mustard) 180deg 195deg, transparent 195deg 210deg,
                  var(--lc-mustard) 210deg 225deg, transparent 225deg 240deg,
                  var(--lc-mustard) 240deg 255deg, transparent 255deg 270deg,
                  var(--lc-mustard) 270deg 285deg, transparent 285deg 300deg,
                  var(--lc-mustard) 300deg 315deg, transparent 315deg 330deg,
                  var(--lc-mustard) 330deg 345deg, transparent 345deg 360deg
          );
  opacity: 0.35;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
#carousel img,
.banner-carousel img,
.image-banner img {
  border-radius: 18px;
  border: var(--lc-border-thick);
  box-shadow: var(--lc-shadow);
  position: relative;
  z-index: 1;
}

.carousel-control.left::before,
.carousel-control.right::before {
  color: var(--lc-ink) !important;
  background: var(--lc-mustard) !important;
  border: var(--lc-border) !important;
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  opacity: 1 !important;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: var(--lc-shadow-sm) !important;
  font-size: 24px !important;
  text-shadow: none !important;
  line-height: 43px;
}

.carousel-control.left:hover::before,
.carousel-control.right:hover::before { background: var(--lc-red) !important; color: var(--lc-cream) !important; }

/* Big homepage headline */
.shp-heading,
.heading-h1,
.in-text-banner h1,
.basic-section h1,
#content > h1:first-of-type,
.homepage-group-title {
  font-family: var(--lc-font-display) !important;
  font-size: clamp(26px, 4vw, 56px) !important;
  line-height: 0.95 !important;
  text-align: center;
  color: var(--lc-ink) !important;
  text-shadow: var(--lc-text-shadow-lg);
  margin: 24px auto 16px !important;
  letter-spacing: 0.02em !important;
  font-weight: 400 !important;
}

/* =============== BENEFIT BANNER (Shoptet template 11) =============== */
.benefitBanner,
.advantages,
.advantages-block,
.benefits,
.banners-content {
  background: var(--lc-paper) !important;
  border: var(--lc-border-thick) !important;
  border-radius: 20px !important;
  box-shadow: var(--lc-shadow) !important;
  overflow: hidden;
}
.benefitBanner__item,
.advantages li,
.advantages-block li,
.advantages > div,
.benefits > div,
.banners-content > * {
  border-right: 3px dashed rgba(26,20,16,0.18) !important;
  padding: 0 24px !important;
}

.banners-content > .col-sm-12 {
  padding: 0!important;
}

.benefitBanner__item:last-child,
.advantages li:last-child,
.benefits > div:last-child,
.banners-content > *:last-child { border-right: none !important; }
.benefitBanner__title,
.advantages strong,
.advantages-block strong,
.benefits strong {
  font-family: var(--lc-font-body-serif) !important;
  font-size: 17px !important;
  color: var(--lc-ink) !important;
  display: block;
  margin-bottom: 4px;
  font-weight: 400 !important;
}
.benefitBanner__data {
  font-family: var(--lc-font-body) !important;
  font-size: 13px !important;
  color: rgba(26,20,16,0.72) !important;
  font-weight: 400 !important;
}
.benefitBanner__img {
  filter: drop-shadow(2px 2px 0 var(--lc-ink)) !important;
}

/* =============== PRODUCT BLOCK HEADLINES =============== */
.products-block-headline,
.products-block .title,
h2.headline,
.basic-section > h2 {
  font-family: var(--lc-font-display) !important;
  font-size: clamp(28px, 4vw, 56px) !important;
  text-align: center;
  margin: 28px auto 16px !important;
  position: relative;
  font-weight: 400 !important;
}
.products-block-headline::after,
.basic-section > h2::after {
  content: '\2605 \2605 \2605';
  display: block;
  font-size: 20px;
  color: var(--lc-red);
  margin-top: 4px;
  letter-spacing: 0.6em;
}

/* =============== PRODUCT CARDS =============== */
.products,
.products-block {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  float: none !important;
}

.products-block.homepage-products-1,
.products-block.homepage-products-2 {
  grid-template-columns: repeat(2, 1fr) !important;
}

.products .product,
.products-block .product,
.products-block.products > div {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.product,
.products .product,
.products-block .product,
.products-block.products>div {
  background: var(--lc-paper) !important;
  border: var(--lc-border-thick) !important;
  border-radius: var(--lc-radius-card) !important;
  box-shadow: var(--lc-shadow-sm) !important;
  overflow: hidden !important;
  position: relative;
  transition: transform .14s ease, box-shadow .14s ease;
}
.product:hover {
  transform: translate(-2px,-2px);
  box-shadow: 5px 5px 0 var(--lc-ink) !important;
}

/* image area — fill wrapper */
.product .image,
.product .p-image,
.product a.image {
  display: block !important;
  background: var(--lc-cream-2) !important;
  border-bottom: var(--lc-border-thick) !important;
  position: relative !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.product .image::after,
.product .p-image::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(26,20,16,0.18) 1.2px, transparent 1.4px);
  background-size: 10px 10px;
  pointer-events: none;
  z-index: 0;
}
.product .image img,
.product a.image img {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover;
  transition: transform .25s ease;
}
.product:hover .image img,
.product:hover .p-image img { transform: scale(1.06) rotate(-2deg); }

/* Product name */
.product .name,
.product .p-name,
.product a.name,
.product a.name span {
  font-family: var(--lc-font-body-serif) !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  color: var(--lc-ink) !important;
  text-decoration: none !important;
  display: block;
  padding: 4px 10px 0px !important;
  min-height: 36px;
  font-weight: 700 !important;
  height: auto !important;
}
.product .name:hover,
.product a.name:hover { color: var(--lc-red) !important; }

/* "Skladem" / availability */
.product .availability,
.product .stock-and-quantity,
.product .availability-label,
.product .p-availability {
  font-family: var(--lc-font-display) !important;
  letter-spacing: 0.16em !important;
  font-size: 11px !important;
  color: var(--lc-green) !important;
  margin: 0 10px !important;
  font-weight: 400 !important;
}
.product .availability span {
  color: inherit !important;
}

/* Price + button row — inline side by side */
.product .p-bottom > div {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 10px 10px !important;
  justify-content: space-between !important;
}
.product .prices {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.product .p-tools {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.product .price,
.product .price-final,
.product .price-final-holder,
.products .price strong {
  font-family: var(--lc-font-body-serif) !important;
  font-size: 17px !important;
  color: var(--lc-ink) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}
.product .price-standard,
.product .price-old { text-decoration: line-through; opacity: .55; font-size: 16px !important; }

/* "Detail" button — no cart icon, lighter style */
.product .btn-primary {
  background: var(--lc-mustard) !important;
  color: var(--lc-ink) !important;
}
.product .btn-primary .lc-mini-cart { display: none !important; }

/* Description in product cards */
.product .description,
.product .p-desc.p-desc.p-desc,
.product .short-description {
  font-family: var(--lc-font-body) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: rgba(26,20,16,0.78) !important;
  margin: 0 !important;
  padding: 0 0 10px !important;
  /*border-top: 2px dashed rgba(26,20,16,0.25);*/
  font-weight: 400 !important;
  flex-basis: 100% !important;
  max-height: none;
  order: -1;
}

/* Product code */
.product .product-code,
.product .code,
.product .p-code {
  font-family: var(--lc-font-display) !important;
  letter-spacing: var(--lc-ls-wider) !important;
  font-size: 10px !important;
  color: var(--lc-red) !important;
  margin: 0 10px 8px !important;
  font-weight: 400 !important;
}

/* Add-to-cart button (in product cards) */
.product .add-to-cart,
.product .add-to-cart-button,
.product .btn-buy,
.product .btn-conversion,
.product .btn-action,
.product .btn-cart,
.product button.btn,
.product a.btn-buy,
.products .product .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--lc-font-display) !important;
  letter-spacing: var(--lc-ls) !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  padding: 7px 12px !important;
  border: var(--lc-border) !important;
  border-radius: var(--lc-radius-pill) !important;
  background: var(--lc-ink) !important;
  color: var(--lc-cream) !important;
  box-shadow: 2px 2px 0 var(--lc-ink) !important;
  cursor: pointer !important;
  transition: transform .08s ease, background .12s ease;
  text-decoration: none !important;
  font-weight: 400 !important;
  margin: 0!important;
}
.product .add-to-cart:hover,
.product .add-to-cart-button:hover,
.product .btn-buy:hover,
.product .btn-conversion:hover,
.product .btn-cart:hover {
  background: var(--lc-red) !important;
  transform: translate(-1px,-1px);
}
.product .add-to-cart:active,
.product .btn-buy:active,
.product .btn-cart:active {
  transform: translate(1px,1px);
  box-shadow: 0 0 0 var(--lc-ink) !important;
}
.product .lc-mini-cart { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; fill: none; }

/* =============== FLAGS (Novinka / Tip / Akce / New) =============== */
.flag,
.flag-novelty,
.flag-new,
.flag-action,
.flag-tip,
.flags > * {
  font-family: var(--lc-font-display) !important;
  letter-spacing: var(--lc-ls-wider) !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 4px 12px !important;
  border-radius: 0 8px 8px 0 !important;
  border: 2px solid var(--lc-ink) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
  position: relative;
  z-index: 2;
  font-weight: 400 !important;
}
.flag-novelty,
.flag.flag-novelty,
.flag-new,
.flag.flag-new { background: var(--lc-red) !important; color: var(--lc-cream) !important; }
.flag-tip,
.flag.flag-tip { background: var(--lc-mustard) !important; color: var(--lc-ink) !important; }
.flag-action,
.flag.flag-action,
.flag-sale,
.flag-discount { background: var(--lc-teal) !important; color: var(--lc-cream) !important; }

/* Position flags top-left, stacked */
.product .flags,
.p .flags {
  position: absolute !important;
  z-index: 5;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: flex-start !important;
  left: -2px !important;
  top: 10px!important;
}

/* =============== BUTTONS (global) =============== */
.btn,
.btn-action,
.btn-conversion,
.btn-primary,
button.btn,
a.btn,
input.btn {
  font-family: var(--lc-font-display) !important;
  letter-spacing: var(--lc-ls) !important;
  text-transform: uppercase !important;
  border: var(--lc-border) !important;
  border-radius: var(--lc-radius-pill) !important;
  background: var(--lc-mustard) !important;
  color: var(--lc-ink) !important;
  padding: 11px 22px !important;
  box-shadow: var(--lc-shadow-sm) !important;
  cursor: pointer !important;
  transition: transform .08s ease;
  font-weight: 400 !important;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: var(--lc-shadow) !important; }
.btn:active { transform: translate(1px,1px); box-shadow: 0 0 0 var(--lc-ink) !important; }
.btn-conversion,
.btn-primary { background: var(--lc-red) !important; color: var(--lc-cream) !important; }
.btn-action { background: var(--lc-teal) !important; color: var(--lc-cream) !important; }

/* =============== CONTENT TEXT BLOCKS =============== */
.basic-section,
#content .content,
.content-inner {
  font-family: var(--lc-font-body) !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}
.basic-section p,
#content p { font-size: 16px; max-width: 880px; margin: 14px auto; }

/* =============== FOOTER =============== */
#footer,
.shp-footer,
footer.footer {
  background: var(--lc-ink) !important;
  color: var(--lc-cream) !important;
  border-top: 6px solid var(--lc-red) !important;
  position: relative;
  padding-top: 56px !important;
}
#footer::before,
footer.footer::before {
  content: '';
  position: absolute;
  top: -6px; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(
          -45deg,
          var(--lc-red) 0 18px,
          var(--lc-mustard) 18px 36px
  );
}
#footer h3,
#footer h4,
footer.footer h3,
footer.footer h4,
.pageElement__heading,
.pageElement__heading span,
.custom-footer h3 {
  font-family: var(--lc-font-display) !important;
  letter-spacing: var(--lc-ls-wide) !important;
  color: var(--lc-mustard) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}
#footer a,
footer.footer a,
.custom-footer a {
  color: var(--lc-cream) !important;
  opacity: .88;
  text-decoration: none;
  font-family: var(--lc-font-body-serif);
  font-weight: 400;
}
#footer a:hover,
footer.footer a:hover,
.custom-footer a:hover { color: var(--lc-mustard) !important; opacity: 1; }
.footer-bottom,
#footer .copyright {
  border-top: 2px dashed rgba(252,235,200,0.3) !important;
  padding-top: 16px !important;
  margin-top: 30px !important;
  font-size: 13px !important;
  opacity: .7;
}
.footer-bottom strong { font-weight: 400 !important; }
#footer .contact-box,
#footer .contact-box strong,
#footer .contact-box a,
footer .contact-box,
footer .contact-box strong,
footer .contact-box a {
  color: var(--lc-cream) !important;
  font-weight: 400 !important;
}
.contact-box,
.contact-box strong {
  color: var(--lc-ink) !important;
  font-weight: 400 !important;
}
.contact-box a {
  color: var(--lc-red) !important;
  font-weight: 400 !important;
}

/* =============== CATEGORY PAGE FILTERS / SIDEBAR =============== */
.category-filter,
.filter-block,
.filter-products,
#category-filter {
  background: var(--lc-paper) !important;
  border: var(--lc-border) !important;
  border-radius: var(--lc-radius-panel) !important;
  box-shadow: var(--lc-shadow-sm) !important;
  padding: 18px !important;
}
.category-filter h3,
.filter-block h3 {
  font-family: var(--lc-font-display) !important;
  letter-spacing: 0.1em !important;
  font-size: 18px !important;
  color: var(--lc-red) !important;
  font-weight: 400 !important;
}

/* =============== PAGINATION =============== */
.pagination a,
.pagination span,
.pagination strong {
  font-family: var(--lc-font-display) !important;
  border: var(--lc-border) !important;
  border-radius: 50% !important;
  width: 40px !important; height: 40px !important;
  display: inline-grid !important;
  place-items: center;
  background: var(--lc-cream) !important;
  color: var(--lc-ink) !important;
  margin: 0 4px;
  box-shadow: var(--lc-shadow-sm);
  font-weight: 400 !important;
}
.pagination .active,
.pagination strong { background: var(--lc-red) !important; color: var(--lc-cream) !important; }

/* =============== MISC =============== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
  border: var(--lc-border) !important;
  border-radius: var(--lc-radius-input) !important;
  background: var(--lc-paper) !important;
  font-family: var(--lc-font-body) !important;
  padding: 10px 14px !important;
  font-weight: 400 !important;
}

::selection { background: var(--lc-mustard); color: var(--lc-ink); }
::-webkit-scrollbar-thumb { background: var(--lc-ink); border-radius: var(--lc-radius-pill); }

/* Cookie banner */
.siteCookies,
#cookie-bar,
.cookie-bar {
  background: var(--lc-ink) !important;
  color: var(--lc-cream) !important;
  border-top: 4px solid var(--lc-mustard) !important;
  font-family: var(--lc-font-body) !important;
  font-weight: 400 !important;
}
.siteCookies a,
.siteCookies__link,
#cookie-bar a { color: var(--lc-mustard) !important; }
.siteCookies__button {
  font-family: var(--lc-font-display) !important;
  border: var(--lc-border) !important;
  border-radius: var(--lc-radius-pill) !important;
  padding: 8px 18px !important;
  font-weight: 400 !important;
}

/* User-action popups (login, cart widget) */
.popup-widget-inner,
.cart-widget-inner {
  background: var(--lc-paper) !important;
  border: var(--lc-border-thick) !important;
  border-radius: 20px !important;
}

/* Overall wrapper — mobile bg set above; desktop reset in @media */

/* Product-item inner padding fix */
.product .p-in {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.product .p-in-in {
  padding: 0 !important;
}
.product .p-bottom {
  padding: 0 !important;
  display: flex;
  flex-grow: 1;
}
.product .p-tools {
  padding: 0 !important;
}

/* =============== BREADCRUMBS =============== */
.breadcrumbs,
.breadcrumbs-wrapper {
  font-family: var(--lc-font-body) !important;
  font-size: 13px !important;
  padding: 0 !important;
  font-weight: 400 !important;
  background: var(--lc-paper) !important;
  /*color: var(--lc-cream) !important;*/
  border: 0;
  overflow: hidden;
  --colors-foregrounds-borders-secondary: var(--lc-cream-2);
}
.breadcrumbs-wrapper {
  width: 100% !important;
}
.breadcrumbs {
  margin: 0 auto;
}
.breadcrumbs a { color: var(--lc-red) !important; }
.breadcrumbs a:hover { color: var(--lc-red-deep) !important; }
.navigation-bullet { color: rgba(26,20,16,0.4) !important; margin: 0 6px !important; }

@media (min-width:768px) {
  .breadcrumbs {
    max-width: 747px;
  }
}
@media (min-width:992px) {
  .breadcrumbs {
    max-width: 972px;
  }
}
@media (min-width:1200px) {
  .breadcrumbs {
    max-width: 1178px;
  }
}

/* =============== SIDEBAR =============== */
.sidebar,
aside.sidebar {
  font-family: var(--lc-font-body) !important;
  font-weight: 400 !important;
}
.sidebar .box,
.sidebar .box-bg-variant,
.sidebar .box-bg-default {
  background: var(--lc-paper) !important;
  border: var(--lc-border) !important;
  border-radius: var(--lc-radius-panel) !important;
  box-shadow: var(--lc-shadow-sm) !important;
  padding: 18px !important;
  margin-bottom: 20px !important;
}
.sidebar .pageElement__heading,
.sidebar .pageElement__heading span,
.sidebar h3 {
  font-family: var(--lc-font-display) !important;
  letter-spacing: 0.1em !important;
  font-size: 18px !important;
  color: var(--lc-red) !important;
  font-weight: 400 !important;
}
.sidebar a {
  color: var(--lc-ink) !important;
  font-weight: 400 !important;
}
.sidebar a:hover { color: var(--lc-red) !important; }
.sidebar .active > a,
.sidebar .child-active > a { color: var(--lc-mustard) !important; }
#categories .topic a {
  font-family: var(--lc-font-body-serif) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}
#categories ul a {
  font-family: var(--lc-font-body) !important;
  /*font-size: 14px !important;*/
  /*padding: 4px 0 !important;*/
}

/* =============== PRODUCT DETAIL =============== */
.p-detail {
  font-family: var(--lc-font-body) !important;
  font-weight: 400 !important;
}
.p-detail h1 {
  font-family: var(--lc-font-display) !important;
  font-size: clamp(28px, 3.5vw, 48px) !important;
  text-shadow: var(--lc-text-shadow);
  line-height: 1 !important;
  font-weight: 400 !important;
  text-align: left;
}
.p-detail .p-code {
  font-family: var(--lc-font-display) !important;
  color: var(--lc-red) !important;
  letter-spacing: var(--lc-ls-wider) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}
.p-detail .p-image-wrapper {
  background: var(--lc-ink) !important;
  border: var(--lc-border-thick) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: var(--lc-shadow) !important;
  padding: 0;
}
.p-detail .p-image {
  margin-bottom: 0;
}
.p-detail .p-image img,
.p-detail .p-main-image img {
  border-radius: var(--lc-radius-card) !important;
}
.p-detail .p-thumbnails-wrapper {
  margin-top: 12px !important;
}
.p-detail .p-thumbnail {
  border: 2px solid var(--lc-ink) !important;
  border-radius: 10px !important;
  overflow: hidden;
}
.p-detail .p-thumbnail.highlighted {
  border-color: var(--lc-red) !important;
  box-shadow: var(--lc-shadow-sm) !important;
}
.p-detail .price-final,
.p-detail .price-final-holder,
.p-detail .p-final-price-wrapper {
  font-family: var(--lc-font-body-serif) !important;
  font-size: 32px !important;
  color: var(--lc-ink) !important;
  font-weight: 400 !important;
}
.p-detail .availability-label {
  font-family: var(--lc-font-display) !important;
  color: var(--lc-teal) !important;
  letter-spacing: 0.16em !important;
  font-weight: 400 !important;
}
.p-detail .add-to-cart {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 18px 0 !important;
}
.p-detail .quantity {
  display: inline-flex !important;
  align-items: center !important;
  border: var(--lc-border) !important;
  border-radius: var(--lc-radius-pill) !important;
  background: var(--lc-paper) !important;
  overflow: hidden;
}
.p-detail .quantity input.amount {
  text-align: center !important;
  width: 50px !important;
  border: none !important;
  background: transparent !important;
  font-family: var(--lc-font-display) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}
.p-detail .quantity .increase,
.p-detail .quantity .decrease {
  width: 36px !important;
  height: 36px !important;
  border: none !important;
  background: var(--lc-ink) !important;
  color: var(--lc-cream) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.p-detail .add-to-cart-button {
  font-family: var(--lc-font-display) !important;
  font-size: 18px !important;
  letter-spacing: var(--lc-ls) !important;
  padding: 12px 28px !important;
  border: var(--lc-border) !important;
  border-radius: var(--lc-radius-pill) !important;
  background: var(--lc-red) !important;
  color: var(--lc-cream) !important;
  box-shadow: var(--lc-shadow-sm) !important;
  font-weight: 400 !important;
}
.p-detail .add-to-cart-button:hover {
  transform: translate(-2px,-2px);
  box-shadow: var(--lc-shadow) !important;
}
.p-detail .flags-inline .flag {
  border-radius: var(--lc-radius-sm) !important;
}
.p-detail .p-short-description {
  font-family: var(--lc-font-body) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}
.p-detail .detail-parameters {
  font-family: var(--lc-font-body) !important;
  font-weight: 400 !important;
}
.p-detail .detail-parameters td {
  padding: 6px 12px !important;
  border-bottom: 1px dashed rgba(26,20,16,0.2);
}
.link-icons a {
  color: var(--lc-red) !important;
  font-family: var(--lc-font-body) !important;
  font-weight: 400 !important;
}

/* Product detail tabs */
.shp-tabs,
.p-detail-tabs {
  /*border-bottom: var(--lc-border) !important;*/
}
.shp-tab {
  border-width: 0 !important;
}
.responsive-nav .shp-tabs-holder {
  border-radius: var(--lc-radius-pill) !important;
  padding: 0 24px;
  overflow: hidden;
}
.shp-tab-link {
  font-family: var(--lc-font-display) !important;
  letter-spacing: var(--lc-ls) !important;
  font-size: 16px !important;
  color: var(--lc-ink) !important;
  font-weight: 400 !important;
  padding: 12px 20px !important;
}
.shp-tab.active .shp-tab-link {
  color: var(--lc-red) !important;
  border-bottom: 4px solid var(--lc-red) !important;
}
.tab-content,
.description-inner,
.basic-description {
  font-family: var(--lc-font-body) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

/* =============== CART PAGE =============== */
body.ordering-process #header {
  border-bottom: none !important;
}
.cart-wrapper,
.cart-inner {
  font-family: var(--lc-font-body) !important;
  font-weight: 400 !important;
}
.cart-row > .col-md-8 {
  padding-top: 16px !important;
}

.cart-inner {
  padding-top: 16px !important;
}
.cart-header {
  position: relative !important;
  background: var(--lc-paper) !important;
  border: var(--lc-border) !important;
  border-radius: var(--lc-radius-panel) !important;
  box-shadow: var(--lc-shadow-sm) !important;
  padding: 14px 20px !important;
  margin-bottom: 16px !important;
  z-index: auto !important;
}
.cart-heading {
  font-family: var(--lc-font-display) !important;
  font-weight: 400 !important;
  text-shadow: var(--lc-text-shadow);
}
.cart-content {
  background: var(--lc-paper) !important;
  border: var(--lc-border) !important;
  border-radius: var(--lc-radius-panel) !important;
  box-shadow: var(--lc-shadow-sm) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}
.cart-overview .btn {
  background: var(--lc-red) !important;
  color: var(--lc-cream) !important;
}
.empty-cart-boxes h3 {
  font-family: var(--lc-font-display) !important;
  font-weight: 400 !important;
  color: var(--lc-red) !important;
}
.checkout-box-wrapper h2 {
  font-family: var(--lc-font-display) !important;
  font-weight: 400 !important;
  color: var(--lc-ink) !important;
  letter-spacing: var(--lc-ls) !important;
}

/* =============== CHECKOUT / ORDERING =============== */
.ordering-process .content {
  font-family: var(--lc-font-body) !important;
  font-weight: 400 !important;
}
.form-group label {
  font-family: var(--lc-font-body) !important;
  font-weight: 400 !important;
}
.form-control {
  border: var(--lc-border) !important;
  border-radius: var(--lc-radius-input) !important;
  background: var(--lc-paper) !important;
  font-family: var(--lc-font-body) !important;
  font-weight: 400 !important;
}
select.form-control {
  border: var(--lc-border) !important;
  border-radius: var(--lc-radius-input) !important;
  background: var(--lc-paper) !important;
  font-family: var(--lc-font-body) !important;
}

/* =============== STATIC PAGE =============== */
.type-page .content h1,
.type-article .content h1 {
  font-family: var(--lc-font-display) !important;
  text-shadow: var(--lc-text-shadow);
  font-weight: 400 !important;
}
.type-page .content,
.type-article .content {
  font-family: var(--lc-font-body) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

/* =============== CATEGORY PAGE =============== */
.category-header {
  border-radius: var(--lc-radius-pill);
}
.category-header h1,
.products-header h1 {
  font-family: var(--lc-font-display) !important;
  text-shadow: var(--lc-text-shadow);
  font-weight: 400 !important;
}
.products-top-panel,
.sorting {
  font-family: var(--lc-font-body) !important;
  font-weight: 400 !important;
}
.sorting select {
  border: var(--lc-border) !important;
  border-radius: var(--lc-radius-input) !important;
  background: var(--lc-paper) !important;
  font-family: var(--lc-font-body) !important;
}
.subcategories a {
  font-family: var(--lc-font-body-serif) !important;
  font-weight: 400 !important;
  background: var(--lc-paper) !important;
  border: var(--lc-border) !important;
  border-radius: var(--lc-radius-input) !important;
  box-shadow: var(--lc-shadow-sm) !important;
  padding: 12px 18px !important;
}
.subcategories a:hover {
  transform: translate(-2px,-2px);
  box-shadow: var(--lc-shadow) !important;
}

.btn.add-to-cart-button:before, .btn.btn-cart:before, .btn.express-checkout-button:before, a.btn.add-to-cart-button:before, a.btn.btn-cart:before, a.btn.express-checkout-button:before {
  display: none;
}

.sidebar {
  background-color: transparent;
}

.sidebar .sidebar-inner {
  padding: 20px 20px 0 0;
}

.sidebar .search, .sidebar .search-form {
  border: none !important;
  box-shadow: none !important;
}

.products-block .ratings-wrapper {
  min-height: 0;
}

/* =============== RESPONSIVE — mobile-first (min-width only) =============== */

/* -- Large phones / small tablets: bump card content sizing, keep 2 columns -- */
@media (min-width: 600px) {
  .products,
  .products-block {
    gap: 16px !important;
  }
  .product,
  .products .product,
  .products-block .product,
  .products-block.products>div {
    border-radius: var(--lc-radius-panel) !important;
    box-shadow: var(--lc-shadow) !important;
  }
  .product:hover {
    transform: translate(-3px,-3px);
    box-shadow: 7px 7px 0 var(--lc-ink) !important;
  }
  .product .name,
  .product .p-name,
  .product a.name,
  .product a.name span {
    font-size: 16px !important;
    padding: 4px 8px 0 !important;
    min-height: 40px;
  }
  .product .price,
  .product .price-final,
  .product .price-final-holder,
  .products .price strong {
    font-size: 20px !important;
  }
  .price-wrapper .price-label.price-primary, .price-wrapper .price.price-primary, .price-final {
    font-weight: 400;
  }
  .product .p-bottom > div {
    padding: 0 12px 12px !important;
  }
  .product .availability,
  .product .stock-and-quantity,
  .product .availability-label,
  .product .p-availability {
    font-size: 12px !important;
    margin: 0 12px !important;
  }
  .product .product-code,
  .product .code,
  .product .p-code {
    font-size: 11px !important;
    margin: 0 12px 10px !important;
  }
  .product .add-to-cart,
  .product .add-to-cart-button,
  .product .btn-buy,
  .product .btn-conversion,
  .product .btn-action,
  .product .btn-cart,
  .product button.btn,
  .product a.btn-buy,
  .products .product .btn {
    font-size: 14px !important;
    padding: 8px 14px !important;
    gap: 7px !important;
    box-shadow: var(--lc-shadow-sm) !important;
  }
  #carousel,
  .banner-carousel,
  .in-text-banner,
  .image-banner {
    border-radius: 18px !important;
    box-shadow: var(--lc-shadow) !important;
    margin: 20px auto !important;
  }
  .lc-cart-burst {
    min-height: 54px;
    width: 105px;
    padding: 4px 10px;
  }
  .lc-cart-burst svg.lc-cart-icon {
    width: 56px;
    height: 56px;
  }
}

.banner-wrapper {
  margin-top: 0;
}

/* -- Tablets: 3-column grid -- */
@media (min-width: 768px) {
  .products,
  .products-block {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .products-block.homepage-products-1,
  .products-block.homepage-products-2 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  #carousel,
  .banner-carousel,
  .in-text-banner,
  .image-banner {
    border-radius: 20px !important;
    margin: 24px auto !important;
  }
  .products-block-headline,
  .products-block .title,
  h2.headline,
  .basic-section > h2 {
    margin: 40px auto 22px !important;
  }
  .shp-heading,
  .heading-h1,
  .in-text-banner h1,
  .basic-section h1,
  #content > h1:first-of-type,
  .homepage-group-title {
    margin: 32px auto 20px !important;
  }
  .navigation a,
  .menu-level-1 > li > a,
  .menu-level-1 a,
  .menu-level-1 > li > a > b {
    font-size: 18px !important;
    padding: 12px 14px !important;
  }
  #navigation {
    height: 40px;
  }
  .overall-wrapper {
    background: transparent !important;
  }
  .menu-level-1 > li {
    border-bottom: none !important;
  }
}

/* -- Desktop: full sizing, 4-column homepage grids -- */
@media (min-width: 1200px) {
  .products,
  .products-block {
    gap: 28px !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .products-block.homepage-products-1,
  .products-block.homepage-products-2 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .product,
  .products .product,
  .products-block .product,
  .products-block.products>div {
    border-radius: 18px !important;
  }
  .product:hover {
    transform: translate(-3px,-3px);
    box-shadow: 9px 9px 0 var(--lc-ink) !important;
  }
  .product .name,
  .product .p-name,
  .product a.name,
  .product a.name span {
    font-size: 18px !important;
    min-height: 44px;
  }
  .product .price,
  .product .price-final,
  .product .price-final-holder,
  .products .price strong {
    font-size: 22px !important;
  }
  .product .p-bottom > div {
    padding: 0 18px 12px !important;
  }
  .product .availability,
  .product .stock-and-quantity,
  .product .availability-label,
  .product .p-availability {
    margin: 0 18px !important;
  }
  .product .product-code,
  .product .code,
  .product .p-code {
    margin: 0 18px 10px !important;
  }
  .product .add-to-cart,
  .product .add-to-cart-button,
  .product .btn-buy,
  .product .btn-conversion,
  .product .btn-action,
  .product .btn-cart,
  .product button.btn,
  .product a.btn-buy,
  .products .product .btn {
    font-size: 16px !important;
    padding: 10px 18px !important;
    gap: 8px !important;
  }
  #carousel,
  .banner-carousel,
  .in-text-banner,
  .image-banner {
    border-radius: 24px !important;
    box-shadow: var(--lc-shadow-lg) !important;
    margin: 32px auto !important;
  }
  .products-block-headline,
  .products-block .title,
  h2.headline,
  .basic-section > h2 {
    margin: 56px auto 28px !important;
  }
  .shp-heading,
  .heading-h1,
  .in-text-banner h1,
  .basic-section h1,
  #content > h1:first-of-type,
  .homepage-group-title {
    margin: 36px auto 24px !important;
  }
  .navigation a,
  .menu-level-1 > li > a,
  .menu-level-1 a,
  .menu-level-1 > li > a > b {
    font-size: 20px !important;
    padding: 14px 18px !important;
  }
  .lc-cart-burst {
    min-height: 60px;
    width: 120px;
    padding: 4px 12px;
  }
  .lc-cart-burst svg.lc-cart-icon {
    width: 64px;
    height: 64px;
  }
}

.search-whisperer {
  margin-top: 2px;
  padding: 10px;
  border-radius: var(--lc-radius-card);
  border: 0;
}

.search-whisperer,
.search-window-visible #header .search,
.search-whisperer * {
  background: var(--lc-ink) !important;
  color: var(--lc-paper) !important;
}


.search-window-visible #header .search {
  pointer-events: auto;
  display: block;
  inset: 50px 0 0;
  position: absolute;
  height: 50px;
  padding: 0px 10px;
  border-radius: 0 !important;
  border: none !important;
}


@media (max-width:767px) {
  #header .site-name {
    left: 10px;
    position: absolute;
    text-align: left;
    top: 0px;
    pointer-events: auto;
  }

  #header {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 56;
  }


  #header, .shp-header, header.site-header,
  .navigation, .navigation-in, .navigation-buttons,
  .top-navigation-bar, .header-top, #header .header-top, .shp-top-navigation-bar {
    background: none !important;
  }

  #header {
    pointer-events: none;
  }

  #header .visible,
  #header #navigation
  {
    pointer-events: auto;
    z-index: 58;
  }

  #header .cart-count {
    left: auto;
    position: absolute;
    right: 10px;
    top: 0;
    transition: transform .15s;
    pointer-events: auto;
  }

  #header .cart-count::before {
    width: 52px;
    height: 48px;
    background-size: 100%;
  }

  .navigation-buttons a[data-target=cart] i {
    left: 26px !important;
    top: 5px !important;
  }


  /*.search-window-visible #header .header-top,*/
  .top-navigation-bar,
  #header .search-whisperer,
  .search-whisperer .p-name, .search-whisperer > * {
    background: var(--lc-ink) !important;
    color: white;
  }

  .search-window-visible #header .site-name {
    z-index: -1;
  }

  .ordering-process .site-name {
    display: block;
  }

  #header .navigation-buttons {
    margin-right: 40px;
  }

  .lc-cart-burst{
    width: 64px;
    height: 48px;
  }

  #header .site-name a {
    max-width: 150px;
  }
}

.popup-widget-inner, .popup-widget:before {
  background-color: var(--lc-ink);
  border-color: var(--colors-foregrounds-borders-secondary);
  z-index: -1;
}

.popup-widget.cart-widget {
  border-radius: var(--lc-radius-panel);
  background: var(--lc-ink);
  padding-right: 4px;
  padding-bottom: 4px;
}

.cart-widget, .cart-widget-button {
  background: var(--lc-ink);
  border-color: var(--lc-mustard);
}

#header .site-name a img {
  display: none !important;
}
#header .site-name a {
  width: 100%;
  background-size: contain !important;
  background: url('https://672720.myshoptet.com/user/documents/upload/logo.min.svg') no-repeat 0 50% !important;
  min-width: 120px;
  height: 48px;
}

#header .site-name a:hover {
  filter: hue-rotate(-32deg);
}