/*
  avui_productes.css
  Responsive product grid (3 columns x 4 rows) with one large 2x2 card.

  Usage:
  - Add `ap-grid` to the grid container.
  - Use `.ap-card` for each card; mark the large card as `.ap-card--large`.

  CSS variables (defaults can be overridden):
  --ap-gap: gap between items (px)
  --ap-cols: number of columns
  --ap-rows: number of rows
  --ap-horizontal-padding: total horizontal padding (left + right) in px
  --ap-vertical-extra: vertical reserved space subtracted from viewport height
  --ap-meta-height: fixed height of the card meta area

*/
.avui-productes-section { padding: 0; }
.avui-productes-section h2 { margin-bottom: .25rem; padding-top: 12px; }
.avui-productes-section p { margin-bottom: .5rem; }

/* KPI strip */
.avui-kpi-strip {
  padding: 0.6rem 0 0.75rem;
}
.avui-kpi-text {
  font-size: 0.95rem;
  font-weight: 400;
  color: #6c757d;
  margin-bottom: 0.5rem;
}
.avui-kpi-row {
  display: flex;
  gap: 10px;
  padding: 0 12px;
}
.avui-kpi-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.5rem;
  background: #f0f5f1;
  border: 0.5px solid #b2bab1;
  border-radius: 16px;
  min-width: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.avui-kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: #222;
}
.avui-kpi-label {
  font-size: 0.72rem;
  color: #6c757d;
  margin-top: 0.2rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ap-grid {
  --ap-gap: 3px;
  --ap-cols: 3;
  --ap-rows: 4;
  --ap-horizontal-padding: 24px;
  --ap-vertical-extra: 140px;
  --ap-meta-height: 56px;
  display: grid;
  grid-template-columns: repeat(var(--ap-cols), 1fr);
  gap: var(--ap-gap);
  --ap-column-width: calc((100vw - var(--ap-horizontal-padding) - ((var(--ap-cols) - 1) * var(--ap-gap))) / var(--ap-cols));
  grid-auto-rows: calc(var(--ap-column-width) + var(--ap-meta-height));
  box-sizing: border-box;
  max-width: 100vw;
  padding-left: 12px;
  padding-right: 12px;
}

.ap-grid { --ap-horizontal-padding: 24px; grid-auto-rows: calc(var(--ap-column-width) + var(--ap-meta-height)); }

.ap-card { display: grid; grid-template-rows: var(--ap-column-width) var(--ap-meta-height); background: #fff; border: 0.5px solid #b2bab1; border-radius: 0; overflow: hidden; padding: 0; text-align: left; box-sizing: border-box; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }

.ap-card:focus { outline: 2px solid #78b28a; }
.ap-card .ap-image-wrap { display: block; overflow: hidden; height: 100%; position: relative; background: #f4f4f4; }
.ap-card .ap-image-wrap.img-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid rgba(0,0,0,0.12);
  border-top-color: #5B7065;
  animation: ap-spin 0.7s linear infinite;
  pointer-events: none;
}
@keyframes ap-spin {
  to { transform: rotate(360deg); }
}
.ap-card:not(.ap-card--large) .ap-image-wrap { height: var(--ap-column-width); }
.ap-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-card--large .ap-image-wrap { height: calc((var(--ap-column-width) * 2) + var(--ap-meta-height) + var(--ap-gap)); }
.ap-card .ap-meta { padding: 0.5rem 0.6rem; background: #f8f9fa; height: var(--ap-meta-height); box-sizing: border-box; border-top: 1px solid rgba(0,0,0,0.06); color: #222; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

.ap-card .product-action-stepper-wrapper{ position: absolute; right: 5px; left: auto; bottom: 5px; z-index: 999; box-shadow: 0 0 0 0.5px rgba(255,255,255,0.95); border-radius: calc(var(--stepper-height, var(--stepper-height-default)) / 2 + 2px); }
.ap-card .product-action-stepper-wrapper .product-actions{ display: block; }
.ap-card .ap-product { font-weight: 600; font-size: 0.95rem; color: #222; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.05; }
.ap-card .ap-stall { font-size: 0.85rem; color: #6c757d; }

.ap-card .ap-product { margin-bottom: 0.18rem; }

.ap-card:not(.ap-card--large) { height: 100%; }
.ap-card:not(.ap-card--large) .ap-product { font-size: 0.78rem; line-height: 1.05; }
.ap-card:not(.ap-card--large) .ap-stall { font-size: 0.64rem; line-height: 1; }
.ap-card:not(.ap-card--large) .ap-meta { padding: 0.25rem 0.3rem; }

.ap-card--large { grid-column: 1 / span 2; grid-row: 1 / span 2; grid-template-rows: calc((var(--ap-column-width) * 2) + var(--ap-meta-height) + var(--ap-gap)) var(--ap-meta-height); border-top-left-radius: 16px; }
.ap-card--large .ap-meta { font-size: 1rem; height: var(--ap-meta-height); padding: 0.25rem 0.3rem; }
.ap-card--large .ap-product { font-size: 0.95rem; line-height: 1.05; }
.ap-card--large .ap-stall { font-size: 0.78rem; }

.ap-grid > .ap-card:nth-child(2) { border-top-right-radius: 16px; }
.ap-grid > .ap-card:nth-child(7) { border-bottom-left-radius: 16px; }
.ap-grid > .ap-card:nth-child(9) { border-bottom-right-radius: 16px; }

/* Avui chips (moved from partial) */
.ap-chips { position: absolute; left: 5px; top: 5px; z-index: 5; display: flex; gap: 6px; }
.ap-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; color: #fff; font-weight: 700; line-height: 1; min-width: 0; }
.ap-chip i.bi { font-size: 0.95em; line-height: 1; display: inline-block; }

/* Requested colors/icons:
  Destacado: bi-star-fill — #FBBF24
  Top ventas: bi-fire — #8B5CF6
  De temporada: bi-leaf — #22C55E */
.ap-chip--destacat { background: #FBBF24; color: #111; font-size: 22px; padding: 12px 24px; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.ap-chip--top { background: #8B5CF6; }
.ap-chip--season { background: #22C55E; }

@media (max-width: 420px) {
  .ap-chip { font-size: 10px; padding: 3px 6px; }
  .ap-chip--destacat { font-size: 14px; padding: 6px 10px; }
  .avui-productes-section h2, .avui-productes-section p, .avui-productes-section > .ap-grid { padding-left: 12px; padding-right: 12px; }
}

/* mini add-to-cart removed; steppers are used on all cards */

  /* Defensive: hide stray text nodes (e.g. accidental '.') inside the
    Avui stepper wrapper while preserving controls. This prevents a lone
    '.' text node from showing in the image corner without changing markup. */
  .ap-card .product-action-stepper-wrapper { font-size: 0; }
  .ap-card .product-action-stepper-wrapper .add-btn,
  .ap-card .product-action-stepper-wrapper .stepper-btn { font-size: 1.25rem; }
  .ap-card .product-action-stepper-wrapper .stepper-qty { font-size: var(--stepper-center-font-size); }
  .ap-card .product-action-stepper-wrapper .add-btn i { font-size: 1rem; line-height: 1; }