/* ==========================================================================
   PIONEER CATALOG v2 — loaded on category, search and product templates.
   Restyles Morelia's own markup (no logic changes): product cards, page
   header, filter bar, grid band and pagination. Selectors are prefixed
   with the body's template-* class so nothing leaks to other pages, and
   so they beat Morelia's style-async.css, which loads after this file.
   ========================================================================== */

:is(.template-category, .template-search, .template-product){
  --pio-red:#C80F2E;
  --pio-ink:#141416;
  --pio-ink-muted:#6B6A73;
  --pio-light:#F4F4F6;
  --pio-card-line:#E4E4E8;
  --pio-line-dark:rgba(255,255,255,.1);
  --pio-muted-dark:#A9A8B2;
}

/* ==========================================================================
   1. PRODUCT CARD (snipplets/grid/item.tpl) — same look as the home's
      "Los más elegidos": white card, square image, left-aligned info,
      full-width dark button. Applies to listing, search and related.
   ========================================================================== */

:is(.template-category, .template-search, .template-product) .item-product:not(.item-product-reduced){
  margin-bottom:24px;
}
:is(.template-category, .template-search, .template-product) .item-product:not(.item-product-reduced) .item{
  height:100%;margin:0;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--pio-card-line);border-radius:12px;overflow:hidden;
  transition:box-shadow .2s ease, border-color .2s ease;
}
:is(.template-category, .template-search, .template-product) .item-product:not(.item-product-reduced) .item:hover{
  border-color:#D2D2D8;box-shadow:0 14px 32px -18px rgba(0,0,0,.35);
}
/* Quick-shop wrapper sits between .item and its content */
:is(.template-category, .template-search, .template-product) .item-product .js-quickshop-container{
  display:flex;flex-direction:column;flex:1;
}

/* Square image box, whatever the photo's proportions */
:is(.template-category, .template-search, .template-product) .item-product .item-image{background:#fff;}
:is(.template-category, .template-search, .template-product) .item-product .js-item-image-padding{
  padding-bottom:100% !important;
}
:is(.template-category, .template-search, .template-product) .item-product .js-item-image-padding img{
  top:0;width:100% !important;height:100% !important;object-fit:contain;padding:14px;
}

/* Info */
:is(.template-category, .template-search, .template-product) .item-product .item-description{
  flex:1;display:flex;flex-direction:column;
  padding:16px 18px 18px;text-align:left !important;
}
:is(.template-category, .template-search, .template-product) .item-product .item-link{
  flex:1;display:flex;flex-direction:column;color:var(--pio-ink);text-decoration:none;
}
:is(.template-category, .template-search, .template-product) .item-product .item-name{
  opacity:1 !important;margin-bottom:10px !important;min-height:2.6em;
  font-size:.95rem !important;font-weight:700;line-height:1.3;color:var(--pio-ink);
}
:is(.template-category, .template-search, .template-product) .item-product .item-price-container{
  font-size:inherit;line-height:1.25;
}
:is(.template-category, .template-search, .template-product) .item-product .item-price{
  font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:var(--pio-ink);
}
:is(.template-category, .template-search, .template-product) .item-product .price-compare{
  font-size:.85rem;color:var(--pio-ink-muted);opacity:1;
}
:is(.template-category, .template-search, .template-product) .item-product .item-installments{
  color:var(--pio-ink-muted);font-size:.8rem;
}

/* Buy button */
:is(.template-category, .template-search, .template-product) .item-product .item-actions{
  margin-top:auto !important;padding-top:14px !important;
}
:is(.template-category, .template-search, .template-product) .item-product .item-submit-container{width:100%;}
:is(.template-category, .template-search, .template-product) .item-product .item-actions .btn-link,
:is(.template-category, .template-search, .template-product) .item-product .item-actions .btn-small-quickshop{
  display:flex !important;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:46px;padding:0 14px;border:0;border-radius:6px;
  background:var(--pio-ink);color:#fff !important;fill:#fff;
  font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  transition:background-color .15s ease;
}
:is(.template-category, .template-search, .template-product) .item-product .item-actions .btn-link:hover,
:is(.template-category, .template-search, .template-product) .item-product .item-actions .btn-small-quickshop:hover{
  background:var(--pio-red);
}
:is(.template-category, .template-search, .template-product) .item-product .item-actions .btn-small-quickshop.nostock{
  background:#C9C9CF;cursor:not-allowed;
}
:is(.template-category, .template-search, .template-product) .item-product .item-quickshop-icon,
:is(.template-category, .template-search, .template-product) .item-product .js-open-quickshop-icon{display:none;}

/* Discount / no-stock labels on the image */
:is(.template-category, .template-search, .template-product) .item-product .label{
  border-radius:4px;font-weight:700;letter-spacing:.04em;
}
:is(.template-category, .template-search, .template-product) .item-product .label-accent{
  background:var(--pio-red);color:#fff;
}

/* ==========================================================================
   2. LISTING & SEARCH — dark header, light product band (like the home)
   ========================================================================== */

/* Page header: left aligned, breadcrumbs styled as the red eyebrow */
:is(.template-category, .template-search) .page-header{
  text-align:left !important;padding:44px 0 20px !important;
}
:is(.template-category, .template-search) .page-header h1{
  font-size:clamp(2rem, 4vw, 3rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;
}
:is(.template-category, .template-search) .breadcrumbs{
  margin-bottom:12px;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
:is(.template-category, .template-search) .breadcrumbs .crumb{color:var(--pio-muted-dark);text-decoration:none;}
:is(.template-category, .template-search) .breadcrumbs .crumb:hover{color:#fff;}
:is(.template-category, .template-search) .breadcrumbs .crumb.active{color:var(--pio-red);}
:is(.template-category, .template-search) .breadcrumbs .separator{margin:0 6px;color:var(--pio-muted-dark);}

/* Category description + banner */
.template-category .page-header ~ p{
  text-align:left !important;max-width:46em;color:var(--pio-muted-dark);line-height:1.6;
}
.template-category .category-banner{border-radius:14px;overflow:hidden;margin-top:8px;}

/* Search: "Mostrando los resultados para …" */
.template-search h2.h5{text-align:left !important;color:var(--pio-muted-dark);}
.template-search h2.h5 .font-weight-bold{color:#fff;}

/* Filter / sort bar */
:is(.template-category, .template-search) .category-controls{
  border-bottom:1px solid var(--pio-line-dark);padding:12px 0;
}
:is(.template-category, .template-search) .category-controls-container{text-align:left !important;}
:is(.template-category, .template-search) .category-controls .js-modal-open.btn-link{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:10px 20px;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  transition:border-color .15s ease;
}
:is(.template-category, .template-search) .category-controls .js-modal-open.btn-link:hover{border-color:#fff;}
:is(.template-category, .template-search) .category-controls .js-modal-open.btn-link::before{
  content:"";width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center/contain no-repeat;
}
:is(.template-category, .template-search) .category-controls .filters-badge{position:static;font-size:inherit;color:var(--pio-red);}

/* Product band */
:is(.template-category, .template-search) .category-body{
  background:var(--pio-light);color:var(--pio-ink);padding:40px 0 24px;
}
:is(.template-category, .template-search) .category-body > .container{margin-top:0 !important;}
:is(.template-category, .template-search) .category-body [data-component="filter.message"]{
  color:var(--pio-ink);padding:40px 0;
}

/* Pagination */
:is(.template-category, .template-search) .category-body .svg-icon-text{fill:var(--pio-ink);}
:is(.template-category, .template-search) .category-body .row.justify-content-center .col-auto > a{
  display:inline-grid;place-items:center;width:46px;height:46px;padding:0 !important;
  border-radius:50%;background:#fff;border:1px solid var(--pio-card-line);
}
:is(.template-category, .template-search) .category-body .row.justify-content-center .col-auto > a:not(.disabled):hover{
  border-color:var(--pio-ink);
}
:is(.template-category, .template-search) .category-body .row.justify-content-center .text-center{
  font-weight:700;color:var(--pio-ink);
}
:is(.template-category, .template-search) .js-load-more .btn{
  min-height:50px;padding:0 32px;border-radius:6px;background:var(--pio-ink);color:#fff;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}

/* ---------- mobile ---------- */
@media (max-width:767px){
  :is(.template-category, .template-search) .page-header{padding:28px 0 12px !important;}
  :is(.template-category, .template-search) .category-body{padding:24px 0 16px;}
  :is(.template-category, .template-search, .template-product) .item-product:not(.item-product-reduced){margin-bottom:14px;}
  :is(.template-category, .template-search, .template-product) .item-product .item-description{padding:12px;}
  :is(.template-category, .template-search, .template-product) .item-product .item-name{font-size:.85rem !important;}
  :is(.template-category, .template-search, .template-product) .item-product .item-price{font-size:1.1rem;}
  :is(.template-category, .template-search, .template-product) .item-product .js-item-image-padding img{padding:8px;}
  :is(.template-category, .template-search, .template-product) .item-product .item-actions .btn-link,
  :is(.template-category, .template-search, .template-product) .item-product .item-actions .btn-small-quickshop{
    min-height:42px;font-size:.72rem;
  }
}

/* ---------- small phones (≤480px) ---------- */
@media (max-width:480px){
  :is(.template-category, .template-search, .template-product){overflow-x:clip;}
  :is(.template-category, .template-search, .template-product) .item-product:not(.item-product-reduced){
    padding-left:6px !important;padding-right:6px !important;
  }
  :is(.template-category, .template-search, .template-product) .item-product .item-description{padding:10px;}
  :is(.template-category, .template-search, .template-product) .item-product .item-name{font-size:.8rem !important;}
  :is(.template-category, .template-search, .template-product) .item-product .item-price{font-size:1rem;letter-spacing:-.01em;}
  :is(.template-category, .template-search, .template-product) .item-product .price-compare{display:block;margin-left:0;}
  :is(.template-category, .template-search, .template-product) .item-product .item-actions .btn-link,
  :is(.template-category, .template-search, .template-product) .item-product .item-actions .btn-small-quickshop{
    min-height:40px;padding:0 8px;font-size:.68rem;letter-spacing:.03em;gap:4px;
  }
  :is(.template-category, .template-search, .template-product) .item-product .item-actions svg{display:none;}
  :is(.template-category, .template-search) .page-header h1{font-size:1.8rem;}
}