/* FoodFestival UI · product cards (category, home tabs, related, search).
   Keeps the Technics layout: gutters, fixed card height (custom.css 37/40rem), hover lift, action revealed on hover.
   Mega-menu promo cards (.products__item--dual) are left as they are.
   Loaded after the theme's inline settings <style>, so no  is needed. */

/* Manufacturer: quiet line instead of purple */
.products__item:not(.products__item--dual) .products__item-category{
  font-size:12px;line-height:16px;font-weight:400;color:#5A6477;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Title: medium weight (500 is loaded; 600 falls back to 700), two lines, no inner scrollbar */
.products__item:not(.products__item--dual) .products__item-title{
  font-size:14px;line-height:18px;font-weight:500;color:#22283A;letter-spacing:0;
  white-space:normal;max-height:none;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  margin:0;
}
@media (min-width:480px){
  .products__item:not(.products__item--dual) .products__item-title{font-size:15px;line-height:18px;margin:0}
}
/* Fits the theme's fixed card height (custom.css: 37rem / 40rem): ~90 px below the photo */
.products__item:not(.products__item--dual) .products__item-desc{row-gap:6px}
.products__item:not(.products__item--dual) .products__item-title:hover{color:#3660BC}

/* Price: ink, not link blue; sale price red, old price grey struck through */
.products__item:not(.products__item--dual) .products__item-price{
  font-size:18px;line-height:22px;font-weight:700;color:#22283A;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.products__item:not(.products__item--dual) .products__item-price:has(u){color:#C0262D}
.products__item:not(.products__item--dual) .products__item-price u{
  font-size:13px;line-height:18px;font-weight:400;color:#5A6477;
  text-decoration:line-through;margin:0 8px 0 0;
}
.products__item:not(.products__item--dual) .products__item-price u:after{display:none}

/* Narrow cards (<480 px, two per row): smaller type, old price on its own line */
@media (max-width:479px){
  .products__item:not(.products__item--dual) .products__item-title{font-size:13px;line-height:17px}
  .products__item:not(.products__item--dual) .products__item-price{font-size:16px;line-height:20px;white-space:normal}
  .products__item:not(.products__item--dual) .products__item-price u{display:block;font-size:12px;line-height:16px;margin:0}
}

/* Badges: sentence case, colour by meaning */
.products__item:not(.products__item--dual) .products__item-mark{
  text-transform:none;letter-spacing:0;font-size:12px;line-height:22px;font-weight:500;
  border-radius:999px;padding:0 10px;
}
.products__item:not(.products__item--dual) .products__item-mark--hit{background:#E6EAF6;color:#1A2870}
.products__item:not(.products__item--dual) .products__item-mark--new{background:#E8F5EE;color:#1E7A4B}
.products__item:not(.products__item--dual) .products__item-mark--sale,
.products__item:not(.products__item--dual) .products__item-mark--discount{background:#C0262D;color:#fff}
.products__item:not(.products__item--dual) .products__item-mark--popular{background:#E3EBFA;color:#2A4E9A}
.products__item:not(.products__item--dual) .products__item-mark--reward,
.products__item:not(.products__item--dual) .products__item-mark--catch,
.products__item:not(.products__item--dual) .products__item-mark--nocatch{background:#EEF1F6;color:#5A6477}
.products__item:not(.products__item--dual) .products__item-rating{font-size:12px;font-weight:500;color:#5A6477}

/* Buy button: purchase colour, theme's pill shape and icon; no caps.
   Beats the theme settings rule .btn--cart{background:#92c3e5} by specificity and order. */
.products__item .btn--cart{
  background:#A33F0C;color:#fff;border-color:transparent;
  text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;
}
.products__item .btn--cart:hover,
.products__item .btn--cart:focus-visible{background:#8A3700;color:#fff}
.products__item .btn--cart:active{background:#6C2B00}
/* Unavailable product: grey, not an active-looking purchase colour */
.products__item .btn--cart:disabled,.products__item .btn--cart.disabled{background:#EEF1F6;color:#5A6477;cursor:not-allowed}
.products__item .btn--preview{border-color:#CDD4E0;color:#5A6477}
.products__item .btn--preview:hover{border-color:#7A8599;color:#22283A}

/* Keyboard: the same reveal as hover when focus is inside the card */
.products__item .btn:focus-visible,
.products__item:not(.products__item--dual) .products__item-title:focus-visible,
.products__item-images a:focus-visible{
  outline:none;box-shadow:0 0 0 2px #fff,0 0 0 5px #3660BC;border-radius:8px;
}
@media (min-width:992px){
  /* products-ui-fix.css hides the action with visibility:hidden, which also removes it from Tab order.
     Hide it with opacity only; clicks stay blocked until the card is hovered or focused. */
  .products__item-action{visibility:visible;pointer-events:none}
  .products__item:hover .products__item-action,
  .products__item:focus-within .products__item-action{pointer-events:auto}
  .products__item:focus-within{z-index:15;overflow:visible;border-color:transparent}
  .products__item:focus-within .products__item-in:after{opacity:1;visibility:visible}
  .products__item:focus-within .products__item-action{opacity:1;visibility:visible;transform:translate(0,0)}
}

@media (prefers-reduced-motion:reduce){
  .products__item-in:after,
  .products__item-action{transition:none}
}