/* Product Page — Alojalo custom tweaks */

.pp-card {background: #ffffff;}

/* Spacing for CTA buttons */
.pp-card .btn { margin-right: 8px; margin-bottom: 8px; }

/* Related products grid */
.pp-related-wrap { margin: 32px auto; }
.pp-related-title { font-weight: 700; margin: 0 0 14px; }
.pp-related {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.pp-related-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 10px;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pp-related-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,.06); }
.pp-related-img { position: relative; padding-top: 80%; overflow: hidden; background: #f8fafc; border-bottom: 1px solid #eef0f3; }
.pp-related-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-related-body { padding: 10px 16px 16px; }
.pp-related-titletext { font-weight: 600; color: #0f172a; margin-bottom: 6px; }
.pp-related-stars { margin-bottom: 6px; }
.pp-related-desc { color: #4b5563; margin: 0; line-height: 1.4; min-height: 40px; }

/* Reviews list: avoid awkward scroll bar */
.reviews-list { overflow: visible !important; }

/* Slider thumbnails polish */
.thumbnail { border-radius: 6px; }
.thumbnail.active { outline: 2px solid #2563eb; }
/* Mobile: stack image above title/content on product page */
@media (max-width: 767.98px) {
  .pp-card .col-lg-3, .pp-card .col-md-4, .pp-card .col-sm-4, .pp-card .col-xs-12,
  .pp-card .col-lg-9, .pp-card .col-md-8, .pp-card .col-sm-8 {
    float: none !important;
    width: 100% !important;
  }
  .pp-logo { display: block; margin: 0 auto 12px; }
}
/* Stronger stack rules up to tablets */
@media (max-width: 1024px) {
  .pp-card .row { display: block !important; }
  .pp-card .col-lg-3, .pp-card .col-md-4, .pp-card .col-sm-4,
  .pp-card .col-lg-9, .pp-card .col-md-8, .pp-card .col-sm-8 {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  .pp-logo { display: block; margin: 0 auto 14px; }
}

/*
  Theme-aware adjustments for Lagom "Futuristic" (dark/blue background)
  Ensure product cards and related blocks pick up the theme surface and text colors.
*/
.lagom-futuristic .pp-card,
.lagom-futuristic .pp-related-card,
.lagom-futuristic .review,
.lagom-futuristic .review-response {
  background: var(--ui-block-bg) !important;
  border-color: var(--ui-block-border-color) !important;
  color: var(--text-body-color) !important;
}

.lagom-futuristic .pp-related-img {
  background: var(--gray-faded) !important;
  border-bottom-color: var(--ui-block-divider-color) !important;
}

.lagom-futuristic .pp-related-titletext,
.lagom-futuristic .review-name {
  color: var(--text-heading-color) !important;
}

.lagom-futuristic .pp-related-desc,
.lagom-futuristic .review-message,
.lagom-futuristic .review-date {
  color: var(--text-body-color) !important;
}

.lagom-futuristic .review-response strong { color: var(--text-primary-color) !important; }
.lagom-futuristic .thumbnail.active { outline-color: var(--brand-primary) !important; }
/* Force page background to theme color on Product Page in Futuristic */
.lagom-futuristic.page-product_page,
.lagom-futuristic.page-product_page .site,
.lagom-futuristic.page-product_page .app-body,
.lagom-futuristic.page-product_page .app-main,
.lagom-futuristic.page-product_page #main-body,
.lagom-futuristic.page-product_page .main-body,
.lagom-futuristic.page-product_page .container {
  background: var(--body-bg) !important;
}
/* Tabs theming for Lagom Futuristic */
.lagom-futuristic .tabs { border-bottom-color: var(--ui-block-divider-color) !important; }
.lagom-futuristic .tab { color: var(--text-body-color) !important; }
.lagom-futuristic .tab:hover { color: var(--text-heading-color) !important; }
.lagom-futuristic .tab.active {
  border-bottom-color: var(--brand-primary) !important;
  color: var(--text-heading-color) !important;
}
.lagom-futuristic .tab-content {
  background: var(--ui-block-bg) !important;
  border-color: var(--ui-block-divider-color) !important;
  color: var(--text-body-color) !important;
}
/* Reviews tab colors on Futuristic */
.lagom-futuristic #reviews h3,
.lagom-futuristic .review-card h3 {
  color: var(--text-heading-color) !important; /* whitish */
}
.lagom-futuristic .rating-text,
.lagom-futuristic .total-reviews,
.lagom-futuristic .rating-label,
.lagom-futuristic .rating-count {
  color: var(--text-body-color) !important; /* light gray */
}
/* Keep stars gold but adapt if needed */
.lagom-futuristic .overall-rating,
.lagom-futuristic .overall-stars { color: #f5a623 !important; }
/* Further reviews theming and inline white fixes */
.lagom-futuristic .admin_reply_content { 
  background: var(--ui-block-bg) !important; 
  border-color: var(--ui-block-divider-color) !important; 
  color: var(--text-body-color) !important;
}
.lagom-futuristic .review-card h2,
.lagom-futuristic .review-card h3 { color: var(--text-heading-color) !important; }
.lagom-futuristic .card-overall .rating-text,
.lagom-futuristic .total-reviews,
.lagom-futuristic .rating-label,
.lagom-futuristic .rating-count { color: var(--text-body-color) !important; }

/* Force "Reseñas de clientes" title color */
.lagom-futuristic #reviews h2 { color: var(--text-heading-color) !important; }

/* Mobile spacing tweak: lower header logo slightly on product page */
@media (max-width: 991.98px) {
  .page-product_page .app-nav-header .logo.visible-xs,
  .page-product_page .app-nav-header .logo.visible-sm {
    margin-top: 10px !important;
  }
}
/* Slightly more spacing for mobile header logo on product page */
@media (max-width: 991.98px) {
  .page-product_page .app-nav-header .logo.visible-xs,
  .page-product_page .app-nav-header .logo.visible-sm {
    margin-top: 18px !important;
  }
}
/* Footer copyright color fix on product page */
.page-product_page .main-footer .footer-bottom,
.page-product_page .main-footer .footer-bottom .footer-copyright {
  color: var(--text-heading-color) !important; /* white-ish */
}
.page-product_page .main-footer .footer-bottom .footer-nav a {
  color: var(--text-body-color) !important; /* light */
}