/* WineHub wine card: three designs (owner 09.11: "don't like this layout colors", "still not good", "optimize").
   Loaded after winehub.css and mu/wh-cards/cards.css by mu/wh-card-variants.php, which puts ONE class on <body>:
     wh-card-c   the live card for everyone (lean: four rows, price and a round cart button on one line)
     wh-card-a   ?card=a  ivory card, wine-tinted type chip, solid ink Add to cart
     wh-card-b   ?card=b  white card, a short wine-colour mark, deep burgundy Add to cart
     wh-card-old ?card=old  the card as it was before 09.11 (none of the rules below except the scrollbar)
   ?card=off forgets the choice. Every rule is scoped to its body class; prefix li.wh-card.product.type-product (four
   classes) so it outranks ".woocommerce ul.products li.product ..." from the theme and WooCommerce by equal weight + order.
   Icons are the header sprite's own drawings (i-bag, i-check, i-click, i-ext) as CSS masks: no markup change, no request. */

:root {
  --whcv-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 13H6L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 016 0v2'/%3E%3C/svg%3E");
  --whcv-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 4 14 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12.5l2.7 2.7L16.5 9'/%3E%3C/svg%3E");
  --whcv-click: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M9 4v8.5l-1.7-1.6a1.6 1.6 0 00-2.3 2.2L9.5 18c.8.8 1.8 1.3 3 1.3H15a4 4 0 004-4V11a1.5 1.5 0 00-3 0v-.5a1.5 1.5 0 00-3 0V10a1.5 1.5 0 00-3 0V4a1.5 1.5 0 00-3 0z'/%3E%3C/svg%3E");
  --whcv-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-8.5 8.5M18 14v4.5A1.5 1.5 0 0116.5 20h-11A1.5 1.5 0 014 18.5v-11A1.5 1.5 0 015.5 6H10'/%3E%3C/svg%3E");
}

/* ---- everyone, every card: carousels show no scrollbar (swipe, trackpad, the arrows and the keyboard still scroll) ---- */
.wh-shelf ul.products.wh-shelf__list { scrollbar-width: none; }
.wh-shelf ul.products.wh-shelf__list::-webkit-scrollbar { display: none; }

/* ---- A, B, C: a calm hover (a hairline, no lifting shadow, no zooming bottle) ---- */
:is(body.wh-card-a, body.wh-card-b, body.wh-card-c) li.wh-card.product.type-product { box-shadow: none; transition: border-color 160ms var(--ease); }
:is(body.wh-card-a, body.wh-card-b, body.wh-card-c) li.wh-card.product.type-product:hover { box-shadow: none; }
:is(body.wh-card-a, body.wh-card-b, body.wh-card-c) li.wh-card.product.type-product .wh-card__img img { transition: none; }
:is(body.wh-card-a, body.wh-card-b, body.wh-card-c) li.wh-card.product.type-product:hover .wh-card__img img { transform: none; }
/* one-click: the sprite's hand, kept on the first word when the label wraps */
:is(body.wh-card-a, body.wh-card-b, body.wh-card-c) li.wh-card.product.type-product .wh-card__quick::before {
  content: ""; display: inline-block; flex: none; width: 15px; height: 15px; margin-right: 5px; vertical-align: -3px; background: currentColor;
  -webkit-mask: var(--whcv-click) center / contain no-repeat; mask: var(--whcv-click) center / contain no-repeat;
}
/* Add to cart with a label (A, B, and C's Book / Read more): the header's bag */
:is(body.wh-card-a, body.wh-card-b) li.wh-card.product.type-product .wh-card__body .wh-card__buy .button::before {
  -webkit-mask-image: var(--whcv-bag); mask-image: var(--whcv-bag);
}

/* =====================================================================================================================
   C, the live card: lean. Four rows - winery · region; the name (two lines at most); type dot + Vivino on one quiet line;
   the price with a round ink cart button beside it - and "one click" as a small link under the price. Flat cards, no
   outlined boxes. Body is a grid: rows 1-4 content, row 5 takes the free height (so prices line up along a row of cards),
   row 6 price + cart, row 7 a text button (Book / Read more), row 8 one click.
   ===================================================================================================================== */
body.wh-card-c li.wh-card.product.type-product:hover { border-color: var(--line-2); }
body.wh-card-c li.wh-card.product.type-product .wh-card__body {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto 1fr auto auto auto;
  column-gap: 8px; row-gap: 0; padding: 10px 12px 8px; container: whcv / inline-size;
}
body.wh-card-c li.wh-card.product.type-product .wh-card__body > * { grid-column: 1 / -1; min-width: 0; }
body.wh-card-c li.wh-card.product.type-product .wh-card__producer { grid-row: 1; margin: 0; font-size: .75rem; line-height: 1.4; }
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__title { grid-row: 2; min-height: 2.6em; margin: 2px 0 0; font: 600 .9375rem/1.3 var(--font-text); letter-spacing: -.005em; }
body.wh-card-c li.wh-card.product.type-product .wh-card__title a:hover { text-decoration-color: var(--line-2); text-underline-offset: 3px; }
body.wh-card-c li.wh-card.product.type-product :is(.whk-row, .wh-card__body > .wh-score) { grid-row: 3; }
body.wh-card-c li.wh-card.product.type-product .wh-card__stars { grid-row: 4; margin: 4px 0 0; }

/* type: a dot and plain words; Vivino after it in grey with the sprite's arrow, its tap area 44 px tall */
body.wh-card-c li.wh-card.product.type-product .whk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-height: 20px; margin: 5px 0 0; }
body.wh-card-c li.wh-card.product.type-product .whk-type { gap: 6px; padding: 0; border-radius: 0; background: none; color: var(--ink-2); font: 500 .75rem/1.35 var(--font-text); }
body.wh-card-c li.wh-card.product.type-product .whk-type span { width: 7px; height: 7px; }
body.wh-card-c li.wh-card.product.type-product .whk-row .wh-score { margin: 0; }
body.wh-card-c li.wh-card.product.type-product .whk-row .wh-score--link a { position: relative; display: inline-flex; align-items: center; gap: 3px; min-height: 20px; color: var(--muted); font-size: 0; font-weight: 500; text-decoration: none; }
body.wh-card-c li.wh-card.product.type-product .whk-row .wh-score--link a span { font-size: .75rem; line-height: 1.35; }
body.wh-card-c li.wh-card.product.type-product .whk-row .wh-score--link a::after {
  content: ""; width: 10px; height: 10px; background: currentColor;
  -webkit-mask: var(--whcv-ext) center / contain no-repeat; mask: var(--whcv-ext) center / contain no-repeat;
}
body.wh-card-c li.wh-card.product.type-product .whk-row .wh-score--link a::before { content: ""; position: absolute; inset: -12px -6px; }
body.wh-card-c li.wh-card.product.type-product .whk-row .wh-score--link a:hover { color: var(--ink); }
body.wh-card-c li.wh-card.product.type-product .whk-row .wh-score--link a:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* price and the cart button on one line */
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__price { grid-row: 6; grid-column: 1; align-self: center; margin: 10px 0 0; font: 800 1.1875rem/1.15 var(--font-text); letter-spacing: -.015em; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__buy { grid-row: 6; grid-column: 2; display: block; align-self: end; margin: 10px 0 0; padding: 0; }
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__buy .add_to_cart_button {
  display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; gap: 0;
  border: 1.5px solid transparent; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0; line-height: 0;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__buy .add_to_cart_button::before {
  content: ""; width: 21px; height: 21px; background: currentColor;
  -webkit-mask: var(--whcv-bag) center / contain no-repeat; mask: var(--whcv-bag) center / contain no-repeat;
}
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__buy .add_to_cart_button::after { content: none; }
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__buy .add_to_cart_button:hover { background: var(--ink-2); border-color: transparent; color: #fff; }
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__buy .add_to_cart_button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__buy .add_to_cart_button.loading { opacity: .55; cursor: progress; }
/* added: a white disc with an ink ring and the sprite's tick (the toast says it was added and offers checkout) */
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__buy .add_to_cart_button.added { background: #fff; border-color: var(--ink); color: var(--ink); }
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__buy .add_to_cart_button.added::before { width: 22px; height: 22px; -webkit-mask-image: var(--whcv-check); mask-image: var(--whcv-check); }
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__buy .add_to_cart_button.added:hover { background: var(--ink); color: #fff; }
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__buy .added_to_cart { display: none; }
/* Book (cellar visits) and Read more keep their words: a full-width pill under the price */
body.wh-card-c li.wh-card.product.type-product .wh-card__body:not(:has(.add_to_cart_button)) .wh-card__price { grid-column: 1 / -1; white-space: normal; }
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__buy:not(:has(> .add_to_cart_button)) { grid-row: 7; grid-column: 1 / -1; align-self: auto; margin-top: 10px; }
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__buy .button:not(.add_to_cart_button) {
  min-height: 44px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink); font: 600 .875rem var(--font-text);
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__buy .button:not(.add_to_cart_button)::before { content: none; }
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__buy .button:not(.add_to_cart_button):hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* one click: a small link under the price; 32 px tall, its tap area reaches 44 px (into the card's bottom padding) */
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__quick {
  grid-row: 8; position: relative; display: block; min-height: 32px; margin: 4px 0 0; padding: 7.5px 0; text-align: left;
  color: var(--ink-2); font: 600 .8125rem/1.3 var(--font-text); text-decoration: none; text-wrap: balance;
}
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__quick::after { content: ""; position: absolute; inset: -4px 0 -8px; }
body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__quick:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }

/* narrow cards (two per row on phones): less padding, a price that shrinks with the card (8.500 MDL still fits beside the
   button), the type line in 11.5 px without the arrow and the one-click label without the hand, so neither wraps */
@media (max-width: 480px) {
  body.wh-card-c li.wh-card.product.type-product .wh-card__body { padding: 8px 8px 8px; }
}
@container whcv (max-width: 175px) {
  body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__price { font-size: min(1.0625rem, 10.5cqi); letter-spacing: -.02em; }
  body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__quick { font-size: .75rem; }
  body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__quick::before { display: none; }
  body.wh-card-c li.wh-card.product.type-product .whk-row { gap: 0 5px; }
  body.wh-card-c li.wh-card.product.type-product .whk-row .wh-score--link a { gap: 0; }
  body.wh-card-c li.wh-card.product.type-product .whk-type { gap: 5px; font-size: .71875rem; }
  body.wh-card-c li.wh-card.product.type-product .whk-type span { width: 6px; height: 6px; }
  body.wh-card-c li.wh-card.product.type-product .whk-row .wh-score--link a span { font-size: .71875rem; }
  body.wh-card-c li.wh-card.product.type-product .whk-row .wh-score--link a::after { display: none; }
}

/* =====================================================================================================================
   A: ivory. A warm paper card, the type chip tinted from the wine in the glass, a solid ink Add to cart, one click small.
   ===================================================================================================================== */
body.wh-card-a li.wh-card.product.type-product { background: #FBF8F3; border-color: #EEE7DB; }
body.wh-card-a li.wh-card.product.type-product:hover { border-color: #D9CCB8; background: #FBF8F3; }
body.wh-card-a li.wh-card.product.type-product .wh-card__media { background: transparent; }
html:not(.whk-fitted) body.wh-card-a li.wh-card.product.type-product .wh-card__media .wh-card__img { background: #F3EEE5; } /* a fitted home frame keeps the photos' own grey (no photo edge) */
body.wh-card-a li.wh-card.product.type-product .wh-card__body { gap: 0; padding: 10px 12px 8px; }
body.wh-card-a li.wh-card.product.type-product .wh-card__producer { color: #6B6258; }
body.wh-card-a li.wh-card.product.type-product .wh-card__producer a { color: #3A332B; font-weight: 600; }
body.wh-card-a li.wh-card.product.type-product .wh-card__body .wh-card__title { margin-top: 2px; }
body.wh-card-a li.wh-card.product.type-product .whk-row { margin-top: 8px; }
body.wh-card-a li.wh-card.product.type-product .whk-type { background: var(--whk-bg); color: var(--whk-ink); font-weight: 600; }
body.wh-card-a li.wh-card.product.type-product .whk-row .wh-score--link a { color: #6B6258; }
body.wh-card-a li.wh-card.product.type-product .wh-card__body .wh-card__price { margin-top: 10px; color: var(--ink); }
body.wh-card-a li.wh-card.product.type-product .wh-card__body .wh-card__buy { padding-top: 10px; }
body.wh-card-a li.wh-card.product.type-product .wh-card__body .wh-card__buy .button { border: 1px solid var(--ink); background: var(--ink); color: #fff; }
body.wh-card-a li.wh-card.product.type-product .wh-card__body .wh-card__buy .button:hover,
body.wh-card-a li.wh-card.product.type-product .wh-card__body .wh-card__buy .button:focus-visible { border-color: var(--ink-2); background: var(--ink-2); color: #fff; }
body.wh-card-a li.wh-card.product.type-product .wh-card__body .wh-card__buy .button.added { border-color: var(--ink); background: #FBF8F3; color: var(--ink); }
body.wh-card-a li.wh-card.product.type-product .wh-card__body .wh-card__quick { display: block; min-height: 0; margin: 2px 0 0; padding: 13px 0; text-align: center; color: #4A4239; font-size: .8125rem; font-weight: 600; text-decoration: underline; text-decoration-color: #D8CDBD; text-underline-offset: 3px; text-wrap: balance; }
body.wh-card-a li.wh-card.product.type-product .wh-card__body .wh-card__quick:hover { color: var(--ink); text-decoration-color: currentColor; }

/* =====================================================================================================================
   B: wine mark. White card; a short bar in the wine's colour opens the text (the foil on the bottle's neck), the type
   is written in that wine's ink; Add to cart is deep burgundy (#7A1626, the darkest red-wine ink, not the brand red).
   ===================================================================================================================== */
body.wh-card-b li.wh-card.product.type-product:hover { border-color: var(--line-2); }
body.wh-card-b li.wh-card.product.type-product .wh-card__body { gap: 0; padding: 10px 12px 8px; }
body.wh-card-b li.wh-card.product.type-product .wh-card__body::before { content: ""; display: block; width: 28px; height: 3px; margin: 2px 0 8px; border-radius: 2px; background: var(--whk-dot); }
body.wh-card-b li.wh-card.product.type-product .wh-card__body .wh-card__title { margin-top: 2px; }
body.wh-card-b li.wh-card.product.type-product .whk-row { margin-top: 6px; }
body.wh-card-b li.wh-card.product.type-product .whk-type { padding: 0; border-radius: 0; background: none; color: var(--whk-ink); font-weight: 600; }
body.wh-card-b li.wh-card.product.type-product .whk-type span { display: none; }
body.wh-card-b li.wh-card.product.type-product .wh-card__body .wh-card__price { margin-top: 8px; color: var(--ink); }
body.wh-card-b li.wh-card.product.type-product .wh-card__body .wh-card__buy { padding-top: 10px; }
body.wh-card-b li.wh-card.product.type-product .wh-card__body .wh-card__buy .button { border: 1px solid #7A1626; background: #7A1626; color: #fff; }
body.wh-card-b li.wh-card.product.type-product .wh-card__body .wh-card__buy .button:hover,
body.wh-card-b li.wh-card.product.type-product .wh-card__body .wh-card__buy .button:focus-visible { border-color: #5C0F1C; background: #5C0F1C; color: #fff; }
body.wh-card-b li.wh-card.product.type-product .wh-card__body .wh-card__buy .button.added { border-color: #7A1626; background: #fff; color: #7A1626; }
body.wh-card-b li.wh-card.product.type-product .wh-card__body .wh-card__quick { display: block; min-height: 0; margin: 2px 0 0; padding: 13px 0; text-align: center; color: var(--ink); font-size: .8125rem; font-weight: 600; text-decoration: none; text-wrap: balance; }
body.wh-card-b li.wh-card.product.type-product .wh-card__body .wh-card__quick:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  :is(body.wh-card-a, body.wh-card-b, body.wh-card-c) li.wh-card.product.type-product,
  body.wh-card-c li.wh-card.product.type-product .wh-card__body .wh-card__buy .button { transition: none; }
}