/*!
 * slevir-novinky-1.css  (v1)  styles for slevir-novinky-1.js ("Nové na Slevíru" strip, homepage)
 * Load in <head> (Záhlaví) so the CSS-only reservation applies before first paint.
 *
 * Reservation (body.type-index, html has neither .sx-nk-off nor .sx-nk-none):
 *   - #products-1 / .homepage-products-1 hidden (kept in the DOM, the JS reads its tiles)
 *   - .homepage-products-heading-1 collapsed to a 0-height anchor (NOT display:none: v4 reserves
 *     the Výprodej slot as this heading's margin-top). overflow:hidden makes it a BFC, so its
 *     top margin (Výprodej slot) and bottom margin (our slot) never collapse into each other.
 *   - our slot = heading margin-bottom: --sx-nk-h + --sx-nk-gap
 *   - top gap: heading margin-top --sx-nk-mt only while html has neither .sx-vy-rh nor .sx-vy-on
 * After html.sx-nk-on: heading margin-bottom 0, the section (fixed height --sx-nk-h, margin-bottom
 *   --sx-nk-gap) fills the slot -> pixel-neutral swap.
 * html.sx-nk-off / html.sx-nk-none: every rule above is gated by :not(), so the native heading and
 *   #products-1 come back exactly as Shoptet rendered them.
 * Arrows: theme classes .slv-row / .slv-arr / .slv-prev / .slv-next from slevir-theme-1.css (not duplicated).
 * Does not touch any .sx-vy rule.
 */

/* ===== Magic numbers: same as --sx-vy-* (mobile first, desktop >= 768px) ===== */
:root {
  --sx-nk-h: 428px;      /* total section height incl. padding + border (border-box) */
  --sx-nk-mt: 16px;      /* space above the section when it is the first strip */
  --sx-nk-gap: 24px;     /* space below the section */
  --sx-nk-head: 26px;    /* title row height */
  --sx-nk-sub: 36px;     /* subline slot: 2 lines on mobile */
  --sx-nk-img: 120px;    /* tile image box */
  --sx-nk-name: 36px;    /* product name: 2 lines x 13.5px x 1.3 */
  --sx-nk-av: 34px;      /* availability slot: 2 lines */
  --sx-nk-price: 24px;   /* price row */
  --sx-nk-btn: 38px;     /* add-to-cart button */
}
@media (min-width: 768px) {
  :root {
    --sx-nk-h: 482px;
    --sx-nk-mt: 20px;
    --sx-nk-gap: 28px;
    --sx-nk-head: 29px;
    --sx-nk-sub: 19px;
    --sx-nk-img: 170px;
    --sx-nk-name: 37px;
    --sx-nk-price: 26px;
  }
}

/* ===== Reservation (CSS-only, homepage) =====
   html:not(#slv) gives (1,x,x) specificity to beat slevir-tiles-t2 / prepaint rules. */
html:not(#slv):not(.sx-nk-off):not(.sx-nk-none) body.type-index #products-1,
html:not(#slv):not(.sx-nk-off):not(.sx-nk-none) body.type-index .homepage-products-1 {
  display: none !important;
}
html:not(#slv):not(.sx-nk-off):not(.sx-nk-none) body.type-index .homepage-products-heading-1 {
  display: block !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  visibility: hidden !important;
  /* margin-top intentionally not set here (v4 html.sx-vy-rh slot / v4 sx-vy-on zeroing) */
  margin-bottom: calc(var(--sx-nk-h) + var(--sx-nk-gap)) !important;
}
html:not(#slv):not(.sx-nk-off):not(.sx-nk-none) body.type-index .homepage-products-heading-1::before,
html:not(#slv):not(.sx-nk-off):not(.sx-nk-none) body.type-index .homepage-products-heading-1::after {
  display: none !important;
}
/* Novinky is the first strip (Výprodej neither reserved nor on): its top gap */
html:not(#slv):not(.sx-nk-off):not(.sx-nk-none):not(.sx-vy-rh):not(.sx-vy-on) body.type-index .homepage-products-heading-1 {
  margin-top: var(--sx-nk-mt) !important;
}
/* on: the section occupies the slot */
html:not(#slv).sx-nk-on:not(.sx-nk-off):not(.sx-nk-none) body.type-index .homepage-products-heading-1 {
  margin-bottom: 0 !important;
}
/* off / none: never show a stray section */
html.sx-nk-off .sx-nk,
html.sx-nk-none .sx-nk {
  display: none !important;
}

/* ===== Section ===== */
.sx-nk {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--sx-nk-h);
  margin: 0 0 var(--sx-nk-gap);
  padding: 14px 12px 12px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 14px;
  overflow: hidden;
  clear: both;
}
.sx-nk *, .sx-nk *::before, .sx-nk *::after { box-sizing: border-box; }

.sx-nk .sx-nk__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--sx-nk-head);
  margin: 0;
}
/* font-family intentionally not set: h2 inherits the theme heading font */
.sx-nk .sx-nk__title {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: var(--sx-nk-head);
  color: #14532D;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sx-nk .sx-nk__all {
  flex: 0 0 auto;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #15803D;
  text-decoration: none;
  white-space: nowrap;
}
.sx-nk .sx-nk__all:hover,
.sx-nk .sx-nk__all:focus-visible { color: #15803D; text-decoration: underline; }
.sx-nk .sx-nk__sub {
  flex: 0 0 auto;
  height: var(--sx-nk-sub);
  margin: 4px 0 12px;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: #6B7280;
  overflow: hidden;
}

/* ===== Row (overrides .in-index .products-block rules) ===== */
.sx-nk .slv-row {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}
.sx-nk .sx-nk__row.products-block {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 10px;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.sx-nk .sx-nk__row::-webkit-scrollbar { display: none; }

/* ===== Tile ===== */
.sx-nk .sx-nk__row.products-block > .product.sx-nk__tile {
  flex: 0 0 calc((100% - 10px) / 2.25) !important;
  width: calc((100% - 10px) / 2.25) !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px !important;
  float: none !important;
  position: relative;
  display: flex !important;
  flex-direction: column;
  background: #fff;
  border: 1px solid #DCFCE7 !important;
  border-right-style: solid !important;
  border-radius: 10px;
  box-shadow: none;
  overflow: hidden;
  scroll-snap-align: start;
}
.sx-nk .sx-nk__tile > .p {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* image box */
.sx-nk .sx-nk__tile a.image {
  flex: 0 0 auto;
  position: relative !important;
  display: block !important;
  height: var(--sx-nk-img) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  overflow: hidden;
}
.sx-nk .sx-nk__tile a.image img {
  display: block;
  position: static;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  margin: 0;
  object-fit: contain;
}
.sx-nk .sx-nk__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  padding: 4px 6px;
  border-radius: 6px;
  background: #15803D;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
}

/* body */
.sx-nk .sx-nk__tile .p-in {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.sx-nk .sx-nk__tile .p-in-in {
  flex: 0 0 auto;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.sx-nk .sx-nk__tile a.name {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  height: var(--sx-nk-name) !important;
  min-height: 0 !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.3 !important;
  color: #111827 !important;
  text-decoration: none;
}
.sx-nk .sx-nk__tile a.name span { display: inline; font-size: inherit; line-height: inherit; }
.sx-nk .sx-nk__tile .ratings-wrapper {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.sx-nk .sx-nk__tile .availability {
  display: block !important;
  height: var(--sx-nk-av) !important;
  min-height: var(--sx-nk-av) !important;
  max-height: var(--sx-nk-av) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 12.5px !important;
  line-height: 17px !important;
  white-space: normal;
}

/* hidden parts */
.sx-nk .sx-nk__tile .ratings-wrapper .stars-wrapper,
.sx-nk .sx-nk__tile .p-desc,
.sx-nk .sx-nk__tile .p-code,
.sx-nk .sx-nk__tile .quantity,
.sx-nk .sx-nk__tile input[type="number"],
.sx-nk .sx-nk__tile .flags,
.sx-nk .sx-nk__tile .flag-discount,
.sx-nk .sx-nk__tile .prices .price-standard,
.sx-nk .sx-nk__tile .prices .price-standard-wrapper,
.sx-nk .sx-nk__tile .prices .price-save,
.sx-nk .sx-nk__tile .prices .price-additional {
  display: none !important;
}

/* price + button pinned to the bottom (fixed heights) */
.sx-nk .sx-nk__tile .p-bottom {
  display: block !important;
  margin: auto 0 0 !important;
  padding: 0 !important;
  position: static;
}
.sx-nk .sx-nk__tile .prices {
  display: flex !important;
  align-items: center;
  float: none;
  width: auto;
  height: var(--sx-nk-price);
  margin: 4px 0 6px !important;
  padding: 0 !important;
  overflow: hidden;
}
.sx-nk .sx-nk__tile .price-final { margin: 0 !important; padding: 0; white-space: nowrap; }
.sx-nk .sx-nk__tile .price-final strong {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: var(--sx-nk-price);
  color: #111827 !important;
}
.sx-nk .sx-nk__tile .p-tools {
  display: block !important;
  float: none;
  position: static;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1;
  visibility: visible;
}
.sx-nk .sx-nk__tile .p-tools form { display: block; width: 100%; margin: 0; }
/* size only - colours stay from the live theme */
.sx-nk .sx-nk__tile .add-to-cart-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: var(--sx-nk-btn) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sx-nk .sx-nk__tile .add-to-cart-button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Desktop ===== */
@media (min-width: 768px) {
  .sx-nk { padding: 18px 16px 14px; }
  .sx-nk .sx-nk__title { font-size: 22px; }
  .sx-nk .sx-nk__sub { white-space: nowrap; text-overflow: ellipsis; }
  .sx-nk .sx-nk__row.products-block > .product.sx-nk__tile {
    flex: 0 0 calc((100% - 30px) / 4) !important;
    width: calc((100% - 30px) / 4) !important;
  }
  .sx-nk .sx-nk__tile a.name { font-size: 14px !important; }
  .sx-nk .sx-nk__tile .price-final strong { font-size: 18px !important; }
}

/* ===== T2 tile overrides (slevir-tiles-t2 uses html:not(#slv) specificity) ===== */
html:not(#slv) .sx-nk .sx-nk__tile .p .p-in-in,
html:not(#slv) .sx-nk .sx-nk__tile .p a.name,
html:not(#slv) .sx-nk .sx-nk__tile .p .ratings-wrapper { flex: 0 0 auto !important; }
html:not(#slv) .sx-nk .sx-nk__tile .p .prices { align-items: flex-start !important; justify-content: center !important; text-align: left !important; }
html:not(#slv) .sx-nk .sx-nk__tile .p .price-final { text-align: left !important; }
html:not(#slv) .sx-nk .sx-nk__tile .p .flag-discount,
html:not(#slv) .sx-nk .sx-nk__tile .p .flags { display: none !important; }

/* ===== Struck-through old price inline, on one line with the current price (as v4) ===== */
html:not(#slv) .sx-nk :is(#products,.products-block) .p .price-final {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  gap: 6px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap !important;
  line-height: var(--sx-nk-price) !important;
}
html:not(#slv) .sx-nk :is(#products,.products-block) .p .price-final strong { flex: 0 0 auto; }
html:not(#slv) .sx-nk :is(#products,.products-block) .p .sx-nk__old {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: #6B7280;
  text-decoration: line-through;
}
@media (max-width: 767px) {
  html:not(#slv) .sx-nk :is(#products,.products-block) .p .price-final { gap: 5px; }
}
@media (min-width: 768px) {
  html:not(#slv) .sx-nk :is(#products,.products-block) .p .sx-nk__old { font-size: 13px; }
}
@media (max-width: 379px) {
  html:not(#slv) .sx-nk :is(#products,.products-block) .p .price-final { gap: 4px; }
  html:not(#slv) .sx-nk :is(#products,.products-block) .p .price-final strong { font-size: 16px !important; }
  html:not(#slv) .sx-nk :is(#products,.products-block) .p .sx-nk__old { font-size: 11px; }
}