/* productes.css — Product listing styles
   Refactored: grouped variables, consolidated rules, preserved selectors used
   by templates and JS. Keep changes conservative to avoid regressions. */

:root {
  --img-size-default: 150px;
  --row-gap: 3px;
  --row-radius: 16px;
  --no-products-vertical: 1.5rem;
  --no-products-vertical-bottom: 4rem;
  --stepper-height: var(--stepper-height-default, 34px);
  --stepper-offset-center: calc(12px + (var(--stepper-height) / 2));
  --gutter: 12px;
  --accent-green: #27ae60;
}

/* ------------------------------------------------------------------
   Rows container
   ------------------------------------------------------------------ */
.row-products {
  /* Extra inline padding so box-shadows aren't clipped by the container edge. */
  padding-inline: 4px;
  margin-inline: -4px;
  margin-top: 6px;
  padding-bottom: 3rem;
}


/* ------------------------------------------------------------------
   Row item (image + info) — grid based for predictable layout
   ------------------------------------------------------------------ */
.row-product {
  position: relative;
  --img-size: var(--img-size-default);
  height: var(--img-size);
  min-height: var(--img-size);
  padding: 0;
  box-sizing: border-box;
  background: #fff;
  border: 0.5px solid #b2bab1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: opacity .16s ease-out, transform .16s ease-out;
  display: grid;
  grid-template-columns: var(--img-size) 1fr;
  column-gap: 12px;
  align-items: center;
}

.row-product-img.rp-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: rp-spin 0.7s linear infinite;
  pointer-events: none;
}
@keyframes rp-spin {
  to { transform: rotate(360deg); }
}

.row-product-img {
  width: var(--img-size);
  height: var(--img-size);
  overflow: hidden;
  background: #ececec;
  margin: 0;
  box-sizing: border-box;
  grid-column: 1;
  position: relative; /* used for seasonal badge positioning */
}
.row-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 1 / 1;
}

.row-product-info {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title title" "parada parada" "price actions";
  gap: 0 8px;
  padding: 0 var(--gutter) 0 0;
  grid-column: 2;
  align-self: start;
  max-height: 150px;
  overflow: hidden;
}
.row-product-info > * { margin: 0; }

.row-product-title {
  grid-area: title;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  display: block;
}

/* Ensure the product title sits 12px from the top of the row box
   by adding top padding to the info column. This keeps the title
   in the normal document flow so it won't be clipped or hidden. */
.row-product .row-product-info{ padding-top: var(--gutter); }

.row-product-parada {
  grid-area: parada;
  font-size: .95rem;
  color: var(--muted-text, #666);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  display: block;
}

.product-action-stepper-wrapper { grid-area: actions; display:flex; align-items:center; justify-content:flex-end; width: var(--stepper-width); justify-self: end; align-self: center; }

/* In product listing rows, position the stepper absolutely bottom-right with 12px offset */
.row-product .product-action-stepper-wrapper{
  position: absolute;
  right: var(--gutter);
  bottom: var(--gutter);
  left: auto;
  width: auto; /* let content size itself */
  justify-self: auto;
  align-self: auto;
  z-index: 999;
  pointer-events: auto;
  background: transparent;
}

.row-product-price { grid-area: price; margin-top: 0; font-weight: 700; color: var(--color-pine, #2a7a5f); text-align: left; justify-self: start; }

/* Position price to align vertically with the stepper (12px from row bottom).
   Reserve space on the right for the stepper using the --stepper-width variable. */
.row-product .row-product-price{
  position: absolute;
  /* place the price so its center aligns with the stepper's center */
  bottom: calc(var(--stepper-offset-center) - 0.7rem - 1px);
  left: calc(var(--img-size) + var(--gutter));
  right: calc(var(--stepper-width, 90px) + (var(--gutter) * 2));
  margin: 0;
  transform: translateY(0);
}
  .price-per-unit { display: inline-block; margin-left: 6px; color: var(--muted-text, #666); font-weight: 400; font-size: 0.9rem; }

/* Ensure per-weight markers are visible next to titles (used by listing and picked up by modal JS) */
.pr-per, .pr-unit { display: inline-block; margin-left: 6px; color: var(--muted-text, #666); font-weight: 400; font-size: 0.9rem; vertical-align: middle; }
  /* Weight label next to product name (e.g. (250g)) */
  .product-qty { color: var(--muted-text, #666) !important; font-weight: 400 !important; font-size: 0.9rem !important; margin-left: 6px; display: inline-block; vertical-align: baseline; }

/* Keep inline suffixes inside the title line and prevent wrapping */
.row-product-title .pr-per,
.row-product-title .pr-unit,
.row-product-title .product-qty,
.row-product-title .price-per-unit {
  white-space: nowrap;
  display: inline;
}

  @media (max-width: 420px) {
    .row-product { --img-size: 100px; height: var(--img-size); min-height: var(--img-size); }
    .row-product-img { width: var(--img-size); height: var(--img-size); }
  }


  /* ------------------------------------------------------------------
     Filter chips (horizontal, full-bleed feel)
     ------------------------------------------------------------------ */
  #productes-types-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 12px;
    padding-bottom: 0;
    padding-inline: 12px;
    margin: 0;
    margin-bottom: 0 !important; /* preserve layout where necessary */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
  }
  #productes-types-chips::-webkit-scrollbar { display: none; }
  .productes-chip {
    white-space: nowrap;
    padding: 0 12px;
    height: var(--stepper-height, var(--stepper-height-default, 34px));
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 999px;
    border: 0.5px solid #b2bab1;
    color: #111;
    text-decoration: none;
    font-size: 0.95rem;
    box-sizing: border-box;
  }
  .productes-chip.active { background: var(--Color-pine, var(--color-pine, #2a7a5f)); color: #fff; border-color: transparent; }


  /* ------------------------------------------------------------------
     Row states
     ------------------------------------------------------------------ */
  .row-product.hidden { display: none !important; }


  /* ------------------------------------------------------------------
     Product-type groups & spacing
     ------------------------------------------------------------------ */
  .product-type-heading { font-size: 1.25rem; font-weight: 700; margin: 0 0 8px 0; color: #333; }
  .product-type-group { padding-top: 6px; padding-bottom: 12px; }

  /* Group list / flat list spacing and first/last rounded corners */
  .product-type-group .row-product,
  .row-products > .row-product { margin-bottom: var(--row-gap); }
  .product-type-group .row-product:last-child,
  .row-products > .row-product:last-child { margin-bottom: 0; }

  .product-type-group .row-product:first-of-type,
  .row-products > .row-product:first-child {
    border-top-left-radius: var(--row-radius);
    border-top-right-radius: var(--row-radius);
  }
  .product-type-group .row-product:first-of-type .row-product-img,
  .row-products > .row-product:first-child .row-product-img { border-top-left-radius: var(--row-radius); }

  .product-type-group .row-product:last-of-type,
  .row-products > .row-product:last-child {
    border-bottom-left-radius: var(--row-radius);
    border-bottom-right-radius: var(--row-radius);
  }
  .product-type-group .row-product:last-of-type .row-product-img,
  .row-products > .row-product:last-child .row-product-img { border-bottom-left-radius: var(--row-radius); }


  /* ------------------------------------------------------------------
     Seasonal badge & list (used by productes.js)
     ------------------------------------------------------------------ */
  .seasonal-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-block;
    background: var(--accent-green); /* match ap-chip--season */
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1;
    z-index: 10;
  }

  /* Last visible seasonal article (set by JS) */
  .rp-seasonal-last { border-bottom-left-radius: var(--row-radius); border-bottom-right-radius: var(--row-radius); }
  .rp-seasonal-last .row-product-img { border-bottom-left-radius: var(--row-radius); }


  /* ------------------------------------------------------------------
     Search header
     ------------------------------------------------------------------ */
  .search-results-header { padding-top: 6px; padding-bottom: 6px; }
  .search-results-meta { margin: 0; color: var(--muted-text, #666); }
  .search-results-title {
    display: block;
    width: 100vw;
    margin: 0 0 4px 0 !important;
    margin-left: calc(50% - 50vw) !important;
    padding-inline: var(--gutter);
    box-sizing: border-box;
    font-size: 1.1rem;
    font-weight: 700;
  }


  /* ------------------------------------------------------------------
     No-products notice & CTAs
     ------------------------------------------------------------------ */
  .no-products-notice {
    padding-top: var(--no-products-vertical);
    padding-bottom: var(--no-products-vertical-bottom, var(--no-products-vertical));
  }
  .row-products .no-products-notice { padding-bottom: var(--no-products-vertical-bottom) !important; }
  .no-products-notice h3 { margin-bottom: .5rem; font-size: 1.375rem; font-weight: 700; color: var(--color-evergreen, #0b6b57); }
  .no-products-notice p { margin-bottom: 1rem; color: var(--muted-text, #666); }

  .no-products-notice .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .5rem 1rem;
    border-radius: 16px;
    font-weight: 600;
  }
  .no-products-notice .btn-primary { background: var(--color-pine, #2a7a5f); color: #fff; border: 1px solid transparent; }
  .no-products-notice .btn-outline-secondary { background: transparent; color: var(--color-pine, #2a7a5f); border: 1px solid var(--color-pine, #2a7a5f); }

  .no-products-notice .d-flex {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-inline: var(--gutter); /* site gutter */
    box-sizing: border-box;
    display: flex;
    gap: .5rem;
  }
  .no-products-notice .d-flex > .btn { flex: 1 1 0; min-width: 0; border-radius: 16px; }


  /* ------------------------------------------------------------------
     Page-specific tweaks
     ------------------------------------------------------------------ */
  .productes-page main { padding-top: 0; }
  .productes-page #productes-types-chips {
    margin-top: var(--gutter) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: var(--gutter) !important;
  }

/* ------------------------------------------------------------------
   Stepper placement: align stepper to the right of the product box
   - `.product-action-stepper-wrapper` is injected inside `.row-product` and
     positioned to the right edge, vertically centered.
   - Keep layout non-invasive: absolute positioning within the relative
     `.row-product` avoids changing grid/flex flow.
 ------------------------------------------------------------------ */
/* fallback: keep a small right offset for legacy placements */
.product-actions{ display:block; }

/* Provide spacing so price text doesn't overlap stepper */
.row-product .row-product-info{ padding-right: 12px; }

@media (max-width: 420px){
  .row-product .row-product-info{ padding-right: 8px; }
}