/* ==========================================================================
   COCINIÑA — PRODUCT CARD  (Phase 2.1)
   --------------------------------------------------------------------------
   The cn-product-card component and the grid it sits in.

   This file is deliberately page-agnostic. It is scoped to .cn-redesign and
   to the component's own classes, never to .cn-cart, because Phase 4 reuses
   the same card on the shop page by enqueueing this file there.

   Every value comes from tokens.css. The markup is built server-side in
   functions.php (cn_product_card_html), so there is no JavaScript here and
   nothing to re-inject after a re-render.

   CONTRAST
     --cn-accent on --cn-surface ............ 5.27:1  (tag, View details)
     --cn-header-footer-bg on --cn-accent ... 5.28:1  (Add to cart label)
     White on --cn-accent is 2.70:1 and is never used.

   CONTENTS
     1. Grid
     2. Card shell
     3. Top section — details and photo
     4. Category tag
     5. Name, price, rating
     6. Description and "more"
     7. Divider and actions
     8. Add to cart button
     9. Mobile
   ========================================================================== */


/* ==========================================================================
   1. GRID
   --------------------------------------------------------------------------
   WooCommerce ships .wc-block-grid__products as a flex row with no gap,
   which is why the cards touched. It becomes a real grid here: two columns
   on desktop because a horizontal card needs the width, one below 768px.

   The columns-N class WooCommerce adds is overridden rather than removed,
   so the block's own setting cannot fight this.
   ========================================================================== */

.cn-redesign .wc-block-grid__products,
.cn-redesign .wc-block-grid.has-4-columns .wc-block-grid__products,
.cn-redesign .wc-block-grid.has-3-columns .wc-block-grid__products,
.cn-redesign .wc-block-grid.has-2-columns .wc-block-grid__products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cn-card-gap);
  width: 100%;
  max-width: var(--cn-card-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* WooCommerce sizes each item with `flex: 1 0 25%` and `max-width: 25%`
   from `.wc-block-grid.has-4-columns .wc-block-grid__products
   .wc-block-grid__product` — four classes. A three-class reset lost to it
   and every card rendered at a quarter of its column: 117px inside a 468px
   track, with the button label wrapping down the side. The column count is
   matched here so the win does not depend on stylesheet order. */
.cn-redesign .wc-block-grid .wc-block-grid__products > .wc-block-grid__product,
.cn-redesign .wc-block-grid.has-2-columns .wc-block-grid__products > .wc-block-grid__product,
.cn-redesign .wc-block-grid.has-3-columns .wc-block-grid__products > .wc-block-grid__product,
.cn-redesign .wc-block-grid.has-4-columns .wc-block-grid__products > .wc-block-grid__product,
.cn-redesign .wc-block-grid.has-5-columns .wc-block-grid__products > .wc-block-grid__product,
.cn-redesign .wc-block-grid.has-6-columns .wc-block-grid__products > .wc-block-grid__product {
  width: auto;
  max-width: none;
  min-width: 0;
  flex: none;
  margin: 0;
  list-style: none;
  /* No padding reset here. This selector is (0,5,0); zeroing padding at
     that weight silently beat the card own padding rule below and pinned
     the dish photo flat against the card edge. The card sets its own. */
}

.cn-redesign .wc-block-grid__products > .wc-block-grid__product::before,
.cn-redesign .wc-block-grid__products > .wc-block-grid__product::after {
  content: none;
}


/* ==========================================================================
   2. CARD SHELL
   ========================================================================== */

.cn-redesign .cn-product-card {
  display: flex;
  flex-direction: column;
  gap: var(--cn-space-sm);
  box-sizing: border-box;
  padding: var(--cn-card-pad);
  background-color: var(--cn-surface);
  border: var(--cn-border-hair);
  border-radius: var(--cn-radius-lg);
  box-shadow: var(--cn-shadow-card);
  text-align: left;
}

/* The grid centres its items by default, which left short cards floating.
   Stretching them makes every card in a row the same height.

   The padding is restated here rather than left to the shell rule above,
   at four classes so it cannot be drawn on load order. WooCommerce's
   all-products.css carries
   `@media (max-width: 480px) { .wc-block-grid.has-4-columns
   .wc-block-grid__product { padding: 0 } }` — three classes, the same
   weight a three-class rule here would have, and it loads after this file,
   so it won below 480px and the phone cards lost their padding entirely
   while desktop kept it. Media queries add no specificity, so one
   four-class rule settles every width. */
.cn-redesign .wc-block-grid .wc-block-grid__products > .cn-product-card,
.cn-redesign .wc-block-grid__products > .cn-product-card {
  align-self: stretch;
  padding: var(--cn-card-pad);
}


/* ==========================================================================
   3. TOP SECTION — details left, photo right
   ========================================================================== */

.cn-redesign .cn-product-card__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cn-card-thumb);
  gap: var(--cn-space-sm);
  align-items: start;
}

.cn-redesign .cn-product-card__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cn-space-2xs);
  min-width: 0;   /* lets long dish names wrap instead of widening the card */
}

.cn-redesign .cn-product-card__media {
  display: block;
  width: var(--cn-card-thumb);
  height: var(--cn-card-thumb);
  border-radius: var(--cn-radius-md);
  border: var(--cn-border-hair);
  overflow: hidden;
  background-color: var(--cn-surface-sunken);
}

/* WooCommerce wraps the image in its own div; both it and the image have to
   fill the frame or a non-square dish photo letterboxes inside it. */
.cn-redesign .cn-product-card__media .wc-block-grid__product-image,
.cn-redesign .cn-product-card__media a,
.cn-redesign .cn-product-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.cn-redesign .cn-product-card__media img {
  object-fit: cover;
  object-position: center;
  transition: transform var(--cn-dur) var(--cn-ease);
}

.cn-redesign .cn-product-card:hover .cn-product-card__media img {
  transform: scale(1.04);
}


/* ==========================================================================
   4. CATEGORY TAG
   --------------------------------------------------------------------------
   A green tint rather than a solid green fill, because a solid fill would
   force the label to --cn-header-footer-bg and read as a second button.
   ========================================================================== */

.cn-redesign .cn-product-card__tag {
  display: inline-block;
  max-width: 100%;
  padding: 0.25em 0.7em;
  background-color: var(--cn-tag-bg);
  border: 1px solid var(--cn-tag-border);
  border-radius: var(--cn-radius-pill);
  color: var(--cn-accent);
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-2xs);
  font-weight: var(--cn-weight-semibold);
  letter-spacing: var(--cn-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ==========================================================================
   5. NAME, PRICE, RATING
   ========================================================================== */

.cn-redesign .cn-product-card .cn-product-card__name {
  display: block;
  color: var(--cn-text);
  font-family: var(--cn-font-display);
  font-size: var(--cn-text-lg);
  font-weight: var(--cn-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;   /* a very long dish name wraps, never overflows */
}

.cn-redesign .cn-product-card .cn-product-card__name:hover,
.cn-redesign .cn-product-card .cn-product-card__name:focus-visible {
  color: var(--cn-accent);
  text-decoration: none;
}

.cn-redesign .cn-product-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cn-space-2xs);
}

/* WooCommerce's price markup, restyled in place. */
.cn-redesign .cn-product-card__meta .wc-block-grid__product-price,
.cn-redesign .cn-product-card__meta .woocommerce-Price-amount {
  margin: 0;
  padding: 0;
  color: var(--cn-text);
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-md);
  font-weight: var(--cn-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* Only ever rendered when the dish has real reviews. */
.cn-redesign .cn-product-card__rating .star-rating {
  font-size: var(--cn-text-2xs);
  color: var(--cn-accent);
}


/* ==========================================================================
   6. DESCRIPTION AND "MORE"
   --------------------------------------------------------------------------
   Clamped to two lines. The "more" link is a sibling, not a child, so the
   clamp cannot swallow it.
   ========================================================================== */

.cn-redesign .cn-product-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: var(--cn-card-desc-lines);
  line-clamp: var(--cn-card-desc-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: var(--cn-text-muted);
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-sm);
  line-height: 1.5;
}

.cn-redesign .cn-product-card__more {
  align-self: flex-start;
  color: var(--cn-accent);
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-sm);
  font-weight: var(--cn-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--cn-accent);
}

.cn-redesign .cn-product-card__more:hover,
.cn-redesign .cn-product-card__more:focus-visible {
  color: var(--cn-text);
  text-decoration-color: var(--cn-text);
}


/* ==========================================================================
   7. DIVIDER AND ACTIONS
   --------------------------------------------------------------------------
   The hairline is drawn as the actions row's top border rather than as an
   extra element, so there is one less node per card and the rule can never
   drift away from the row it belongs to.

   margin-top: auto pins this row to the bottom, which is what keeps the
   buttons of two cards in a row aligned when their descriptions differ in
   length.
   ========================================================================== */

.cn-redesign .cn-product-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-sm);
  margin-top: auto;
  padding-top: var(--cn-space-sm);
  border-top: var(--cn-border-hair);
}

.cn-redesign .cn-product-card__buy {
  flex: 1 1 auto;
  min-width: 0;
}

.cn-redesign .cn-product-card .cn-product-card__link {
  flex: 0 0 auto;
  color: var(--cn-accent);
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-sm);
  font-weight: var(--cn-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.cn-redesign .cn-product-card .cn-product-card__link:hover,
.cn-redesign .cn-product-card .cn-product-card__link:focus-visible {
  color: var(--cn-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* ==========================================================================
   8. ADD TO CART BUTTON
   --------------------------------------------------------------------------
   The anchor inside is WooCommerce's own, re-emitted untouched by the PHP so
   its AJAX handler still works. Only its appearance is changed here.

   WooCommerce ships this as a blue wp-block-button link; the label must be
   --cn-header-footer-bg on green (5.28:1), never white (2.70:1).
   ========================================================================== */

.cn-redesign .cn-product-card__buy .wp-block-button,
.cn-redesign .cn-product-card__buy .wc-block-grid__product-add-to-cart {
  display: block;
  width: 100%;
  margin: 0;
}

.cn-redesign .cn-product-card .cn-product-card__buy .wp-block-button__link,
.cn-redesign .cn-product-card .cn-product-card__buy a.add_to_cart_button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--cn-nav-tap-min);
  padding: var(--cn-space-2xs) var(--cn-space-sm);
  background: var(--cn-gradient-accent);
  background-color: var(--cn-accent);
  border: 1px solid var(--cn-accent-dark);
  border-radius: var(--cn-radius-pill);
  box-shadow: var(--cn-shadow-button);
  color: var(--cn-header-footer-bg);
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-sm);
  font-weight: var(--cn-weight-bold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: filter var(--cn-dur-fast) var(--cn-ease);
}

.cn-redesign .cn-product-card__buy .wp-block-button__link:hover,
.cn-redesign .cn-product-card__buy a.add_to_cart_button:hover,
.cn-redesign .cn-product-card__buy .wp-block-button__link:focus-visible,
.cn-redesign .cn-product-card__buy a.add_to_cart_button:focus-visible {
  background: var(--cn-accent);
  color: var(--cn-header-footer-bg);
  filter: brightness(1.06);
}

/* WooCommerce's "adding" and "added" states. The tick it appends is a
   separate anchor that would otherwise inherit the button styling. */
.cn-redesign .cn-product-card__buy a.add_to_cart_button.loading {
  opacity: 0.75;
}

.cn-redesign .cn-product-card__buy a.added_to_cart {
  display: block;
  width: 100%;
  margin-top: var(--cn-space-2xs);
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--cn-accent);
  font-size: var(--cn-text-2xs);
  font-weight: var(--cn-weight-semibold);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* ==========================================================================
   9. MOBILE
   ========================================================================== */

@media (max-width: 767px) {

  .cn-redesign .wc-block-grid__products,
  .cn-redesign .wc-block-grid.has-4-columns .wc-block-grid__products,
  .cn-redesign .wc-block-grid.has-3-columns .wc-block-grid__products,
  .cn-redesign .wc-block-grid.has-2-columns .wc-block-grid__products {
    grid-template-columns: minmax(0, 1fr);
  }

  .cn-redesign .cn-product-card__top {
    grid-template-columns: minmax(0, 1fr) var(--cn-card-thumb-mobile);
  }

  .cn-redesign .cn-product-card__media {
    width: var(--cn-card-thumb-mobile);
    height: var(--cn-card-thumb-mobile);
  }

  /* The chat widget floats over the bottom-right corner, and on a single
     column the last card's Add to cart button ends up underneath it. This
     reserves the widget's own height plus its inset below the grid so the
     last button is always reachable. */
  .cn-redesign .wc-block-grid__products {
    padding-bottom: calc(var(--cn-widget-h) + var(--cn-widget-inset) * 2);
  }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .cn-redesign .cn-product-card__media img,
  .cn-redesign .cn-product-card__buy .wp-block-button__link {
    transition: none;
  }

  .cn-redesign .cn-product-card:hover .cn-product-card__media img {
    transform: none;
  }
}