/* =========================================================
   BonVulux child - WOOCOMMERCE stylesheet (woocommerce.css)
   Loaded after style.css (uses its design tokens, section 2).
   Sections: 1 category strip | 6 price layout | 7 trust badges
             9 cart text + sorting dropdown | 10 cart/checkout
             and archive tweaks
   (section numbers match the master list in style.css)
   ========================================================= */

/* =========================================================
   BonVulux shop layout
   ========================================================= */
.bv-shop-cats {
  position: relative;
  margin: 0 0 1.7rem;
  padding: 0 42px;
}

.bv-shop-cats-scroll {
  display: flex;
  justify-content: center;
  justify-content: safe center;
  gap: .65rem;
  overflow-x: auto;
  padding: .0rem 0 .75rem;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bv-shop-cats-scroll::-webkit-scrollbar {
  display: none;
}

.bv-shop-cats-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--bv-line);
  border-radius: 50%;
  background: var(--bv-white);
  color: var(--bv-ink);
  box-shadow: 0 8px 20px rgba(30, 29, 36, .10);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .2s ease, color .2s ease;
}

.bv-shop-cats-nav:hover {
  background: var(--bv-ink);
  color: var(--bv-white);
}

.bv-shop-cats-nav:focus-visible {
  outline: 3px solid var(--bv-ink);
  outline-offset: 2px;
}

.bv-shop-cats.is-scrollable .bv-shop-cats-nav {
  display: inline-flex;
}

.bv-shop-cats-prev {
  left: 0;
}

.bv-shop-cats-next {
  right: 0;
}

[dir="rtl"] .bv-shop-cats-prev svg,
[dir="rtl"] .bv-shop-cats-next svg {
  transform: scaleX(-1);
}

.bv-shop-cat {
  flex: 0 0 116px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--bv-white);
  border: 1px solid var(--bv-line);
  border-radius: 14px;
  color: var(--bv-ink);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.bv-shop-cat:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(30, 29, 36, .08);
}

.bv-shop-cat-all {
  flex: 0 0 auto;
  min-width: 68px;
  justify-content: center;
  padding: .7rem .85rem;
  background: var(--bv-ink);
  color: var(--bv-white);
  border-color: var(--bv-ink);
  text-align: center;
}

.bv-shop-cat-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: .3rem;
  background: var(--bv-white);
  box-sizing: border-box;
}

.bv-shop-cat-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.bv-shop-cat-name {
  display: block;
  padding: .55rem .6rem;
  font: 700 .75rem/1.25 var(--bv-font-body);
}

.bv-shop-cat-all .bv-shop-cat-name {
  padding: 0;
  color: var(--bv-white);
}

.woocommerce-shop .woocommerce-result-count,
.woocommerce-shop .woocommerce-ordering {
  margin-bottom: 1.2rem;
}

.woocommerce-shop .woocommerce-ordering select {
  min-height: 44px;
  border-color: var(--bv-line);
  border-radius: 10px;
  background: var(--bv-white);
  color: var(--bv-ink);
}

.woocommerce-shop ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.25rem;
  margin: 0 0 2rem !important;
  padding: 0 !important;
}

.woocommerce-shop ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  display: flex;
  flex-direction: column;
  padding: .8rem;
  background: var(--bv-white);
  border: 1px solid var(--bv-line);
  border-radius: 18px;
}

.woocommerce-shop ul.products li.product a img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0;
  background: var(--bv-white);
}

.woocommerce-shop ul.products li.product .woocommerce-loop-product__title {
  padding: .8rem 0 .35rem;
  color: var(--bv-ink);
  font: 700 1rem/1.3 var(--bv-font-body);
}

.woocommerce-shop ul.products li.product .price {
  color: var(--bv-ink);
  font: 700 .9rem/1.4 var(--bv-font-body);
}

.woocommerce-shop ul.products li.product .button {
  margin-top: auto;
  min-height: 44px;
  border-radius: 999px;
  background: var(--bv-ink);
  color: var(--bv-white);
  font: 700 .8rem/1.2 var(--bv-font-body);
}

.woocommerce-shop ul.products li.product .button:hover {
  background: var(--bv-paper);
  color: var(--bv-ink);
}

.woocommerce-shop .woocommerce-pagination {
  margin: 2rem 0 0;
}

.woocommerce-shop .woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
  border: 0;
}

.woocommerce-shop .woocommerce-pagination ul li a,
.woocommerce-shop .woocommerce-pagination ul li span {
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bv-line);
  border-radius: 10px;
  color: var(--bv-ink);
  background: var(--bv-white);
}

.woocommerce-shop .woocommerce-pagination ul li span.current {
  background: var(--bv-ink);
  color: var(--bv-white);
  border-color: var(--bv-ink);
}

@media (max-width: 1024px) {
  .woocommerce-shop ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .bv-shop-cats-scroll {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .bv-shop-cats {
    padding: 0 34px;
  }

  .bv-shop-cats-nav {
    width: 32px;
    height: 32px;
  }

  .bv-shop-cat {
    flex-basis: 104px;
  }

  .bv-shop-cat-name {
    font-size: .72rem;
  }

  .woocommerce-shop ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .8rem;
  }

  .woocommerce-shop ul.products li.product {
    padding: .55rem;
    border-radius: 14px;
  }

  .woocommerce-shop ul.products li.product .woocommerce-loop-product__title {
    font-size: .9rem;
  }
}
/* ---- Strip top spacing: zero everywhere ---- */
.bv-shop-cats,
.bv-shop-cats-scroll {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.bv-shop-cats-scroll {
  padding: 0 0 .75rem;   /* kills the old .15rem top padding */
}

/* ---- EXCEPT single product page: 2.5rem of air above the strip ---- */
.bv-shop-cats.bv-shop-cats--single {
  padding-top: 2.5rem !important;
  margin-top: 0 !important;
}

@media (max-width: 640px) {
  .bv-shop-cats.bv-shop-cats--single { padding-top: 2rem !important; }
}

/* =========================================================
   BonVulux shop Cart text
   ========================================================= */
/* BonVulux Cart */

.woocommerce-cart .product-name a{
    font-size:18px;
    font-weight:400 !important;
}

.woocommerce-cart .woocommerce-Price-amount{
    font-size:18px !important;
    font-weight:500 !important;
}

.woocommerce-cart .cart_totals .woocommerce-Price-amount,
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount{
    font-size:18px !important;
    font-weight:500 !important;
}
/* =========================================================
   BonVulux shop sorting radius / Hover/focus on dropdown
   ========================================================= */
/*sorting radius */
/* Default sorting dropdown */
.woocommerce-ordering select {
    border-radius: 0 !important;
}

/* Grid/List buttons */
.woocommerce-shop .gridlist-toggle a,
.gridlist-toggle a {
    border-radius: 0 !important;
}

/* Dropdown box */
.woocommerce-ordering select{
    border-radius:0 !important;
}

/* Sorting dropdown: colours that match the BonVulux homepage */
/* BonVulux: custom sorting dropdown (scoped to .bv-sort) */
.bv-sort {
	position: relative;
	display: inline-block;
	min-width: 240px;
	max-width: 100%;
	font: 500 15px/1.3 Roboto, Arial, sans-serif;
	color: #1e1d24;
}
.bv-sort .bv-sort-native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}
.bv-sort .bv-sort-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	width: 100%;
	margin: 0;
	padding: .65rem 1.1rem;
	border: 1px solid rgba(30, 29, 36, .18);
	border-radius: 0;
	background: #fff;
	color: #1e1d24;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.bv-sort .bv-sort-button:focus-visible {
	outline: 3px solid #1e1d24;
	outline-offset: 3px;
}
.bv-sort .bv-sort-button::after {
	content: "";
	flex: 0 0 auto;
	width: .45rem;
	height: .45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}
.bv-sort.is-open .bv-sort-button::after {
	transform: rotate(-135deg);
}
.bv-sort .bv-sort-list {
	position: absolute;
	z-index: 50;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	display: none;
	margin: 0;
	padding: .35rem;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(30, 29, 36, .12);
	border-radius: 0;
	box-shadow: 0 14px 30px rgba(30, 29, 36, .12);
}
.bv-sort.is-open .bv-sort-list {
	display: block;
}
.bv-sort .bv-sort-list .bv-sort-item {
	margin: 0;
	padding: .6rem .8rem;
	border-radius: 0;
	color: #1e1d24;
	cursor: pointer;
	list-style: none;
}
.bv-sort .bv-sort-list .bv-sort-item:hover,
.bv-sort .bv-sort-list .bv-sort-item:focus-visible {
	background: #eef4ff;
	outline: none;
}
.bv-sort .bv-sort-list .bv-sort-item.is-selected {
	background: #1e1d24;
	color: #fff;
}

/* ============================================================
   Bonvulux — Shop card: PRICE LAYOUT  (v2, theme-proof)
   Current price LEFT (bold ink), before-discount RIGHT (struck, muted)
   ->  "333,00 Kč  444,00 Kč"

   v2 changes vs v1 (fixes "works on single but not on shop"):
   - Broadened the selector list to cover common theme loop wrappers.
   - Added !important to the layout-critical props (display / order /
     margins) so a theme's own loop-price rule can no longer win.
   - Order is ALSO fixed at the source by inc/price-order.php, so even if
     a stylesheet defeats flexbox, the DOM order is already correct.

   Tokens come from product-trust.css (:root).
   ============================================================ */

/* ---- The row the two prices sit on ------------------------ */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
.woocommerce ul.products li .price,
.woocommerce .products .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.product .price {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap;
  gap: .15rem .5rem;
  /* air above the price (below the title) + below (above the button) */
  margin: var(--bv-price-top, 8px) 0 .55rem !important;
}

/* ---- CURRENT (sale) price -> LEFT ------------------------- */
.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins,
.woocommerce ul.products li .price ins,
.woocommerce .products .price ins,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins,
.product .price ins {
  order: 1 !important;
  background: none !important;      /* some UAs / themes tint <ins> */
  text-decoration: none !important; /* kill the default <ins> underline */
  color: var(--bv-ink, #1e1d24);
  font-family: var(--bv-font, 'Roboto', Arial, sans-serif);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
}

/* ---- BEFORE-DISCOUNT price -> RIGHT, struck --------------- */
.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del,
.woocommerce ul.products li .price del,
.woocommerce .products .price del,
.woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.product .price del {
  order: 2 !important;
  color: #9a948c;
  font-family: var(--bv-font, 'Roboto', Arial, sans-serif);
  font-weight: 400;
  font-size: .85rem;
  line-height: 1.4;
  text-decoration: line-through !important;
  text-decoration-thickness: 1px;
}

/* Inner amount spans: inherit decoration, no background. */
.woocommerce .price ins .woocommerce-Price-amount,
.woocommerce .price del .woocommerce-Price-amount,
.product .price ins .woocommerce-Price-amount,
.product .price del .woocommerce-Price-amount {
  text-decoration: inherit;
  background: none;
}

/* ---- Currency symbol ONCE, on the current price only -------
   Backstop for any price markup that bypasses inc/price-order.php
   (variable-product ranges, custom templates, etc). The current
   price keeps its symbol; the struck old price loses it, giving
   "333,00 Kč  444,00".                                        */
.woocommerce .price del .woocommerce-Price-currencySymbol,
.woocommerce-page .price del .woocommerce-Price-currencySymbol,
.product .price del .woocommerce-Price-currencySymbol {
  display: none !important;
}

/* Non-sale products: single amount. Keep bold ink so sale and non-sale
   cards line up vertically.                                   */
.woocommerce ul.products li.product .price > .woocommerce-Price-amount,
.woocommerce .products .price > .woocommerce-Price-amount,
.product .price > .woocommerce-Price-amount {
  color: var(--bv-ink, #1e1d24);
  font-weight: 700;
  font-size: 1rem;
}

/* ---- Narrow columns --------------------------------------- */
@media (max-width: 480px) {
  .woocommerce ul.products li.product .price,
  .woocommerce .products .price,
  .product .price { gap: .1rem .4rem; }
  .woocommerce ul.products li.product .price del,
  .woocommerce .products .price del,
  .product .price del { font-size: .8rem; }
}

/* ============================================================
   SOURCE-ORDER BACKUP
   If for any reason inc/price-order.php is not active, these two
   rules give the ins/del classes it emits a sensible look so the
   fallback still reads correctly.
   ============================================================ */
.bv-price-now { text-decoration: none; }
.bv-price-was { text-decoration: line-through; }

/* ============================================================
   Bonvulux — Product trust badges  (shop cards, OPTION B / pills)
   Built on the brand design system -> see DESIGN-SYSTEM.md

   Brand:  Ink #1e1d24 | Paper #eef4ff | White #ffffff
   Roboto family. Semantic colour is applied to the 12px ICON only,
   so it never fights the cool blue-white palette.
   ============================================================ */

/* ---- Design tokens (reusable by any future component) ---- */
:root {
  --bv-ink:   #1e1d24;
  --bv-paper: #eef4ff;
  --bv-white: #ffffff;

  --bv-ok:    #1f8a5b;   /* in stock    */
  --bv-warn:  #b26a00;   /* backorder   */
  --bv-bad:   #c03434;   /* not avail.  */

  /* vertical rhythm on shop cards */
  --bv-price-top: 8px;   /* empty space ABOVE the price (below the title) */
  --bv-badge-top: 12px;  /* empty space ABOVE the badges (below the button) */

  --bv-font:  'Roboto', Arial, Helvetica, sans-serif;
  --bv-font-display: 'Roboto Condensed', 'Roboto', Arial, Helvetica, sans-serif;
}

/* ---- Reset ------------------------------------------------
   WooCommerce + themes put bullets & padding on every <ul>;
   this is the #1 cause of broken/invisible badges.          */
.bv-product-trust,
.woocommerce ul.bv-product-trust,
.woocommerce ul.products li.product ul.bv-product-trust,
.woocommerce-page ul.products li.product ul.bv-product-trust {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;      /* shorthand kills any theme divider */
}

/* ---- Pill row --------------------------------------------
   NOTE: the selector group MUST include the high-specificity
   .woocommerce ul.products li.product ... variants, otherwise the
   reset block above (margin:0 !important at higher specificity)
   wins and the top gap collapses to 0 on real shop pages.       */
.bv-product-trust,
.woocommerce ul.products li.product ul.bv-product-trust,
.woocommerce-page ul.products li.product ul.bv-product-trust {
  display: flex !important;      /* beats theme ul{display:block} */
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  gap: .45rem .5rem;
  margin-top: var(--bv-badge-top, 12px) !important;  /* gap under Add-to-cart */
}

/* ---- Individual pill ------------------------------------- */
.bv-product-trust__item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin: 0 !important;
  padding: 2px 2px;              /* tight chip: 2px left/right as requested */
  list-style: none !important;
  background: var(--bv-paper);   /* brand paper for ALL pills by default */
  border-radius: 999px;
  color: var(--bv-ink);
  font-family: var(--bv-font);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .01em;
}

/* Quality pill explicitly on paper (same as default, kept for clarity) */
.bv-product-trust__item--quality {
  background: var(--bv-paper);   /* #eef4ff as requested */
}

.bv-product-trust__icon {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;                /* flex can never squash the SVG */
  fill: none;
  overflow: visible;
  vertical-align: middle;
  color: var(--bv-ink);          /* default icon = ink */
}

.bv-product-trust__label {
  white-space: nowrap;
  padding: 0 2px;                /* the 2px the text itself gets L/R */
}

/* ---- Semantic accent: colour lives on the ICON only ------- */
.bv-product-trust__item.is-ok   .bv-product-trust__icon { color: var(--bv-ok); }
.bv-product-trust__item.is-warn .bv-product-trust__icon { color: var(--bv-warn); }
.bv-product-trust__item.is-bad  .bv-product-trust__icon { color: var(--bv-bad); }
.bv-product-trust__item.is-bad  .bv-product-trust__icon { stroke-width: 1.8; }

/* ============================================================
   ALTERNATIVE — full green/red tinted stock pills
   Uncomment this block if you decide the icon-only green is too
   subtle and you want a stronger, classic availability signal.
   It tints the whole pill instead of just the icon.
   ============================================================ */
/*
.bv-product-trust__item.is-ok   { background: #eaf6ee; color: #1c6b45; }
.bv-product-trust__item.is-ok   .bv-product-trust__icon { color: #1c6b45; }
.bv-product-trust__item.is-warn { background: #fdf3e3; color: #8a5a00; }
.bv-product-trust__item.is-warn .bv-product-trust__icon { color: #8a5a00; }
.bv-product-trust__item.is-bad  { background: #fdecec; color: #a32020; }
.bv-product-trust__item.is-bad  .bv-product-trust__icon { color: #a32020; }
*/

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
  .bv-product-trust__label { white-space: normal; }  /* wrap, don't overflow */
  .bv-product-trust        { gap: .35rem .4rem; }
}

/* Very tight 2-up mobile columns: keep only the stock pill if you prefer.
@media (max-width: 380px) {
  .bv-product-trust__item--quality { display: none; }
}
*/

/* ============================================================
   DARK CARDS  (uncomment if a section uses a dark background)
   ============================================================ */
/*
.dark .bv-product-trust__item        { background: rgba(238,244,255,.12); color: #eef4ff; }
.dark .bv-product-trust__icon        { color: #eef4ff; }
.dark .bv-product-trust__item.is-ok   .bv-product-trust__icon { color: #6fdc9f; }
.dark .bv-product-trust__item.is-warn .bv-product-trust__icon { color: #ffc46b; }
.dark .bv-product-trust__item.is-bad  .bv-product-trust__icon { color: #ff8f8f; }
*/

/* ============================================================
   10. CART / CHECKOUT / ARCHIVE TWEAKS  (logic in inc/woocommerce.php PART A)
   ============================================================ */

/* ---- Hide product descriptions on Cart & Checkout pages ---- */
body.woocommerce-cart .product-short-description,
body.woocommerce-checkout .product-short-description,
body.woocommerce-cart .cart_item .description,
body.woocommerce-checkout .cart_item .description,
body.woocommerce-cart .kadence-cart-product-description,
body.woocommerce-checkout .kadence-cart-product-description,
body.woocommerce-cart .wc-block-components-product-metadata__description,
body.woocommerce-checkout .wc-block-components-product-metadata__description,
body.woocommerce-cart .wc-block-components-product-summary,
body.woocommerce-checkout .wc-block-components-product-summary { display: none !important; }

/* ---- Hide "excl. VAT" suffix on product archive pages ---- */
body.post-type-archive-product .woocommerce-price-suffix {
            display: none !important;
        }
