/* ==========================================================================
   PIONEER PRODUCT v2 — product detail template only.
   Restyles Morelia's product page (gallery, buy box, shipping, description,
   related products) without touching its logic. Product cards in
   "Productos similares" come from pioneer-catalog-v1.css.
   ========================================================================== */

.template-product{
  --pio-red:#C80F2E;
  --pio-ink:#141416;
  --pio-light:#F4F4F6;
  --pio-card:#1C1B21;
  --pio-card-2:#232228;
  --pio-line-dark:rgba(255,255,255,.1);
  --pio-muted-dark:#A9A8B2;
  --pio-wa:#22A652;
}

.template-product #single-product{padding-top:24px;}

/* ==========================================================================
   1. GALLERY — white rounded panel, square slides, square thumbs
   ========================================================================== */

.template-product .product-detail-slider{
  background:#fff;border-radius:14px;overflow:hidden;
}
.template-product .product-detail-slider .js-product-slide-link{
  padding-bottom:100% !important;
}
.template-product .product-detail-slider .product-slider-image{
  top:0;width:100% !important;height:100% !important;max-height:none;
  object-fit:contain;padding:28px;
}
.template-product .product-detail-slider .label{
  border-radius:4px;font-weight:700;letter-spacing:.04em;
}
.template-product .product-detail-slider .label-accent{background:var(--pio-red);color:#fff;}

.template-product .product-thumb{
  padding-bottom:100% !important;background:#fff;border-radius:8px;
  border:2px solid transparent;transition:border-color .15s ease;
}
.template-product .product-thumb.selected,
.template-product .product-thumb:hover{border-color:var(--pio-red);}
.template-product .product-thumb img{
  top:0;width:100% !important;height:100% !important;object-fit:contain !important;padding:6px;
}

/* ==========================================================================
   2. INFO COLUMN — left aligned on every screen size
   ========================================================================== */

.template-product [data-store^="product-info"] .text-center{text-align:left !important;}
.template-product [data-store^="product-info"] .justify-content-center{justify-content:flex-start !important;}

/* Breadcrumbs as the red eyebrow */
.template-product .breadcrumbs{
  margin-bottom:14px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.template-product .breadcrumbs .crumb{color:var(--pio-muted-dark);text-decoration:none;}
.template-product .breadcrumbs .crumb:hover{color:#fff;}
.template-product .breadcrumbs .crumb.active{color:var(--pio-red);}
.template-product .breadcrumbs .separator{margin:0 6px;color:var(--pio-muted-dark);}

.template-product .js-product-name{
  font-size:clamp(1.6rem, 2.6vw, 2.25rem) !important;font-weight:800;line-height:1.15;letter-spacing:-.02em;
  margin-bottom:10px !important;
}
.template-product .js-product-sku{font-weight:600;}

/* Price */
.template-product .price-container{margin-top:18px;}
.template-product #price_display{
  font-size:clamp(1.9rem, 3vw, 2.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;
}
.template-product #compare_price_display{font-size:1rem;color:var(--pio-muted-dark);opacity:1;margin-left:10px;}

/* Installments / payment methods card */
.template-product .js-product-payments-container{
  padding:14px 16px;border:1px solid var(--pio-line-dark);border-radius:10px;background:var(--pio-card);
  cursor:pointer;transition:border-color .15s ease;
}
.template-product .js-product-payments-container:hover{border-color:rgba(255,255,255,.25);}
.template-product #btn-installments{color:#fff;font-weight:700;text-decoration:none;}
.template-product #btn-installments::after{content:" →";}

/* ==========================================================================
   3. BUY BOX — variants, quantity, add to cart
   ========================================================================== */

.template-product .form-label{
  font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pio-muted-dark);
}
.template-product .btn-variant{
  border-radius:6px;border:1px solid rgba(255,255,255,.22);transition:border-color .15s ease;
}
.template-product .btn-variant.selected,
.template-product .btn-variant:hover{border-color:var(--pio-red);}
.template-product .form-select{border-radius:6px;}

/* Quantity stepper */
.template-product #product_form .form-quantity{
  border-radius:6px;border:1px solid rgba(255,255,255,.22);background:var(--pio-card-2);
  min-height:56px;
}

/* Add to cart */
.template-product #product_form .btn-add-to-cart{
  min-height:56px;border-radius:6px;background:var(--pio-red);color:#fff;
  font-size:.95rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 10px 30px -12px rgba(200,15,46,.8);transition:filter .15s ease;
}
.template-product #product_form .btn-add-to-cart:hover{filter:brightness(1.12);}
.template-product #product_form .btn-add-to-cart.nostock,
.template-product #product_form .btn-add-to-cart[disabled]{
  background:#3A3940;color:#A9A8B2;box-shadow:none;cursor:not-allowed;
}

/* Shipping calculator */
.template-product #product-shipping-container{
  padding:18px;border-radius:10px;background:var(--pio-card);border:1px solid var(--pio-line-dark);
}
.template-product #product-shipping-container .form-control{border-radius:6px;}

/* ==========================================================================
   4. PIONEER EXTRAS (snipplets/product/pio-product-extras.tpl)
   ========================================================================== */

.template-product .pio-pdp-extras{margin:8px 0 28px;}
.template-product .pio-pdp-trust{
  list-style:none;margin:0 0 16px;padding:0;display:grid;gap:12px;
}
.template-product .pio-pdp-trust li{display:flex;align-items:center;gap:14px;font-size:.9rem;color:var(--pio-muted-dark);}
.template-product .pio-pdp-trust svg{
  width:40px;height:40px;flex:none;padding:10px;border-radius:8px;
  background:rgba(200,15,46,.16);color:var(--pio-red);
}
.template-product .pio-pdp-trust strong{display:block;color:#fff;font-weight:700;}

.template-product .pio-pdp-wa{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  padding:20px;border-radius:12px;background:var(--pio-card);
  border:1px solid rgba(200,15,46,.35);border-top:3px solid var(--pio-red);
}
.template-product .pio-pdp-wa__title{margin:0;font-weight:800;font-size:1.05rem;color:#fff;}
.template-product .pio-pdp-wa__text{margin:4px 0 0;font-size:.88rem;color:var(--pio-muted-dark);max-width:28em;}
.template-product .pio-pdp-wa__btn{
  display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:6px;
  background:var(--pio-wa);color:#fff !important;text-decoration:none;white-space:nowrap;
  font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.template-product .pio-pdp-wa__btn:hover{filter:brightness(1.08);}
.template-product .pio-pdp-wa__btn svg{width:18px;height:18px;}

/* ==========================================================================
   5. DESCRIPTION — full-width panel under gallery + buy box, with a
      comfortable reading width (long Mercado Libre texts)
   ========================================================================== */

.template-product .pio-pdp-description{
  margin:24px 0 8px;padding:44px 48px;border-radius:14px;
  background:var(--pio-card);border:1px solid var(--pio-line-dark);
  text-align:left;
}
.template-product .pio-pdp-heading{
  margin:0 0 20px;font-size:1.5rem;font-weight:800;letter-spacing:-.01em;
}
.template-product .pio-pdp-description .user-content{
  max-width:78ch;margin-bottom:0 !important;
  font-size:1rem !important;line-height:1.75;color:#D2D1D8;
  overflow-wrap:anywhere;          /* long "-----" separator lines wrap instead of overflowing */
}
.template-product .pio-pdp-description .user-content p{margin:0 0 1em;}
.template-product .pio-pdp-description .user-content ul{padding-left:1.2em;}
.template-product .pio-pdp-description .user-content li::marker{color:var(--pio-red);}
.template-product .pio-pdp-description .user-content strong,
.template-product .pio-pdp-description .user-content b{color:#fff;}

/* Desktop: gallery stays in view while the buy box scrolls */
@media (min-width:768px){
  .template-product .pio-pdp-gallery > *{position:sticky;top:110px;}
}

/* ==========================================================================
   6. RELATED / COMPLEMENTARY PRODUCTS — light band like the home
   ========================================================================== */

.template-product .section-products-related{
  background:var(--pio-light);color:var(--pio-ink);padding:64px 0 48px;margin-top:24px;
}
.template-product .section-products-related .section-title{
  text-align:left !important;color:var(--pio-ink);
  font-size:clamp(1.5rem, 2.6vw, 2.1rem);font-weight:800;letter-spacing:-.02em;
}
.template-product .section-products-related .svg-icon-text,
.template-product .section-products-related .swiper-button-prev,
.template-product .section-products-related .swiper-button-next{color:var(--pio-ink);fill:var(--pio-ink);}
.template-product .section-products-related .item-product{height:auto;}
.template-product .section-products-related .swiper-slide{height:auto;}

/* ---------- mobile ---------- */
@media (max-width:767px){
  .template-product #single-product{padding-top:8px;}
  .template-product .pio-pdp-description{padding:28px 20px;margin-top:8px;}
  .template-product .pio-pdp-heading{font-size:1.3rem;}
  .template-product .product-detail-slider .product-slider-image{padding:16px;}
  .template-product .pio-pdp-wa__btn{width:100%;justify-content:center;}
  .template-product .section-products-related{padding:44px 0 32px;}
}