/*
 * The product card (woocommerce/content-product.php), two looks, as the live shop (Mariusz 2026-11-08: „the
 * listing prod design [doesn't] need much change, except for minor line spacing fixes and making product names
 * bolder/blacker”):
 *  - A listing's grid (woocommerce/archive-product.php): the live card — white, the grid's own lines, paddings and
 *    columns from Tailwind classes (loop/loop-start.php, content-product.php), colour thumbnails from
 *    css/woocommerce/fibofilters-archive.css. Here only the live sizes snapped to the
 *    type scale and the ladder (price 13.7 → 14, the 0.5 em gaps → 8).
 *  - A row of cards on a band: the homepage „Promocje” / „Nowości” strips and the store pages
 *    (partials/homepage/products-scroll.php), the product page's related rows (woocommerce/single-product/related.php).
 *    Their wrapper carries `ms-card-band`: the live homepage card — white, square, the soft card lift; photo 1 : 1,
 *    then 12 inside the card's edges: brand 14 muted → name 18 / 24 / 600 (two lines reserved) → 8 → old price 14
 *    struck, muted, on its own line → price 20 / 28 / 600 (terracotta on sale) → 4 → price-history line 12 muted.
 * Badge and wishlist heart: style.css (.onsale) and the ms-wishlist plugin.
 *
 * Selectors carry .woocommerce … ul.products li.product to out-specify WooCommerce core's own margins on the
 * photo, the list and the price (1em / .5em) and the compiled `.products h2` size.
 */

/* ---- The listing card -------------------------------------------------------------------------------------------
 * The name: bolder and blacker than the live 17 / 20 (19 / 24 from 768) 400 #404040, one size at every width. Its
 * WooCommerce bottom padding (0.5 em) → 8; the price 14 / 20 (WooCommerce's 0.857 em made it 13.7), 8 under it.
 * !important: the compiled `.products h2` size (17 / 19 px !important) and WooCommerce's `.price` size. */
/* The name keeps the live shop's type (17 / 20 on a phone, 19 / 24 from 768, 400, #404040: more names fit one line;
   Mariusz 2026-11-08, reversing the 18 / 24 / 600 ink); only the gap under it is the ladder's 8. */
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding:0 0 8px; }
.woocommerce ul.products li.product .price { font-size:14px !important; line-height:20px; margin-bottom:8px; }
/* The struck old price in the muted grey at full strength: WooCommerce's 50 % fade drew it #797979 (4.3 : 1, under
   the 4.5 the rules ask of text). */
.woocommerce ul.products li.product .price del { opacity:1; color:var(--brand-muted, #737373); }

/* The phone listing grid (Mariusz 2026-11-09: less empty space, „Compare that to eobuwie or zalando”; „dividing line in
   the middle must stay, lines on sides are optional”; „the horizontal lines between products need to reach screen edge”;
   of the two versions shown on staging, „i like 1”). The grid runs to the screen's edges, so the lines between rows do;
   no side lines; the line between the columns stays. Text, thumbnails, badge and heart keep the page's 16 on the outer
   side and 8 from the middle line on the inner side; the photo fills the whole card, screen edge to middle line (Mariusz
   the same evening, after a grey-backed photo showed the 16 on one side only: „I want to see a version with photos
   filling whole card”); 8 under
   the photo, 12 under the card's last line: the price and the lowest-price line carry 8 under them, the thumbnail row
   8 (css/woocommerce/fibofilters-archive.css), the card 4. Columns are told apart by odd / even: only product cards go in this grid
   (woocommerce/archive-product.php). The heart's icon ends where the text and thumbnails end — the mirror of the
   badge on the text's left edge (Mariusz the same day: the right card's heart sat at a different distance than the
   left one's); still a 48 × 48 tap area, its centre 24 down, level with the badge's. */
@media (max-width: 767.98px) {
  .woocommerce ul.products.grid { margin-left:-16px; margin-right:-16px; }
  .woocommerce ul.products.grid > li.product:nth-child(odd) { padding-left:16px; --ms-badge-left:16px; } /* the badge sits on the photo, which now starts at the screen edge: 16 keeps it on the text's edge (Mariusz 2026-11-10: „the ones in the left hand columns shouldn't be touching screen edge”) */
  .woocommerce ul.products.grid > li.product:nth-child(even) { padding-right:16px; border-right-width:0; --ms-badge-left:8px; }
  .woocommerce ul.products.grid > li.product a.flineo-product-image img { margin-bottom:8px; }
  .woocommerce ul.products.grid > li.product:nth-child(odd) a.flineo-product-image { display:block; margin-left:-16px; }
  .woocommerce ul.products.grid > li.product:nth-child(even) a.flineo-product-image { display:block; margin-right:-16px; }
  .woocommerce ul.products.grid > li.product:nth-child(odd) a.p-4 { padding:0 8px 4px 0; }
  .woocommerce ul.products.grid > li.product:nth-child(even) a.p-4 { padding:0 0 4px 8px; }
  .woocommerce ul.products.grid > li.product .ms-wishlist-btn-wrap--loop .ms-wishlist-btn { justify-content:flex-end; }
  .woocommerce ul.products.grid > li.product:nth-child(odd) .ms-wishlist-btn-wrap--loop { right:8px; }
  .woocommerce ul.products.grid > li.product:nth-child(even) .ms-wishlist-btn-wrap--loop { right:16px; }
}

/* ---- The card on a band ----------------------------------------------------------------------------------------- */
.woocommerce .ms-card-band ul.products { display:flex !important; flex:1; list-style:none; margin:0; padding:0; width:100%; border:none !important; }
.ms-card-band .product { display:flex !important; flex-direction:column !important; width:100%; margin:0; padding:0; background:var(--brand-paper, #ffffff); border:none !important; box-shadow:var(--brand-shadow-card, 0 1px 3px rgb(0 0 0 / 0.08)); }
.ms-card-band .product > a:not(.flineo-product-image) { display:flex !important; flex-direction:column !important; flex:1 !important; padding:12px; }

.ms-card-band .flineo-product-image { display:block; }
.woocommerce .ms-card-band ul.products li.product a.flineo-product-image img { margin:0; width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }

/* Brand line: the first line of the name, muted (the card is white). */
.ms-card-band .product span.ms-card-brand { display:block; min-height:20px; font-size:14px; line-height:20px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--brand-muted, #737373); }

/* Product title: clamp to 2 lines + reserve exactly 2 lines so prices align across cards.
   -webkit-line-clamp still LAYS OUT the lines it hides -- it relies on overflow:hidden to cut
   them, and overflow:hidden clips at the PADDING box. So the clip box must equal the clamped
   text height exactly; any slack inside it is a window the hidden 3rd line shows through (the
   "top of the next word peeking out" bug). Two guards, both needed:
     - padding:0 -- WC core's .woocommerce ul.products li.product .woocommerce-loop-product__title
       (specificity 402) sets padding .5em 0 and also carries its own margin and font size; `.products h2`
       zeroes only padding-top, so WC's padding-bottom would otherwise survive INSIDE the clip box.
     - min-height:2lh -- exactly two line-heights. The px value before it is the fallback for
       browsers without `lh` (pre-16.4 Safari).
   The selector is deliberately inflated to out-specify WC core's 402 rule and the compiled
   `.products h2` size (17 / 19 px !important) -- do not shorten it. */
.woocommerce .ms-card-band ul.products li.product .woocommerce-loop-product__title { font-size:18px !important; line-height:24px !important; font-weight:600; letter-spacing:0; margin:0; color:var(--brand-ink, #171717); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; padding:0; min-height:48px; min-height:2lh; }

/* Price block 8 below the name: the old price struck on its own line above the price, the price 20 / 28 / 600
   (terracotta on sale), the price-history line 4 below. The struck and sale prices out-specify WooCommerce core's
   `.woocommerce ul.products li.product .price del / ins` (inline-block, which put them side by side). No reserved
   slots: a full-price card has no empty band above or below its price (Mariusz 2026-11-08, as the live shop). */
.ms-card-band .product .custom-loop-price { margin-top:8px; }
.woocommerce .ms-card-band ul.products li.product .price { display:block; margin:0; padding:0; font-size:20px !important; line-height:28px; color:var(--brand-ink, #171717) !important; font-weight:600; }
.woocommerce .ms-card-band ul.products li.product .price del { display:block; margin:0; font-size:14px !important; line-height:20px; font-weight:400; opacity:1; color:var(--brand-muted, #737373) !important; text-decoration:line-through; }
.woocommerce .ms-card-band ul.products li.product .price ins { display:block; text-decoration:none !important; font-size:20px !important; line-height:28px; font-weight:600 !important; color:var(--brand-sale, #bf360c) !important; }
.ms-card-band .product .ms-omnibus-note { margin:4px 0 0; font-size:12px; line-height:16px; font-weight:400; color:var(--brand-muted, #737373); }

/* Colour thumbnails (components.md „Colour thumbnails on a card”, lead's decision 2026-11-02): 48 × 48 at every
   width, 8 apart (R5), 12 under the price block (R3, the product's own photos), the card's 12 edge below them; „+2”
   after them in 14 muted, straight under the price block. A row that does not fit the card wraps its overflow onto a
   hidden second line rather than cutting a thumbnail in half. !important and the long selectors: the swatch plugin's inline rules
   (inc/swatches-overrides.php: a 4 px gap, 4 px under each thumbnail, a −10 px pull on the row, sideways scroll). */
.woocommerce .ms-card-band ul.products li.product .vi_wpvs_loop_variation_form { min-height:0; margin:0 !important; padding:12px 0 0 !important; }
.ms-card-band li.product .vi_wpvs_loop_variation_form table,
.ms-card-band li.product .vi_wpvs_loop_variation_form tr { margin:0 !important; }
.woocommerce .ms-card-band ul.products li.product .vi_wpvs_loop_variation_form .vi-wpvs-variation-wrap-loop.vi-wpvs-variation-wrap { gap:8px; flex-wrap:wrap !important; max-height:48px; overflow:hidden !important; }
.woocommerce .ms-card-band ul.products li.product .vi_wpvs_loop_variation_form .vi-wpvs-variation-wrap > .vi-wpvs-option-wrap { flex:0 0 48px; width:48px; height:48px; margin:0 !important; }
.woocommerce .ms-card-band ul.products li.product .vi_wpvs_loop_variation_form .vi-wpvs-variation-wrap > .vi-wpvs-option-wrap.vi-wpvs-product-link { flex:0 0 auto; width:auto; }
.ms-card-band li.product .ms-swatch-more { font-size:14px; line-height:20px; font-weight:400; color:var(--brand-muted, #737373); }