/* ========================================
   TYPOGRAPHY
   Playfair Display — headings (700 + 800 + 900)
   Lato — body text (300 + 400 + 700 + 900)
   ======================================== */
body {
    font-family: 'Lato', system-ui, -apple-system, sans-serif;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: #2c3e50;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.01em;
}
.navbar-brand span {
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing: 0.5px;
}
/* Category badge on product detail — darken on hover to match site's dark theme
   instead of browser-default blue link colour */
.badge.bg-secondary[href]:hover {
    background-color: #343a40 !important;
    color: #fff !important;
}
/* Prices — Lato 900 for maximum visual weight */
.product-card .card-body div.fw-semibold,
.product-card .card-body .text-danger.fw-bold,
[itemprop="offers"] .h3 {
    font-weight: 900 !important;
}
/* Bootstrap's .lead defaults to font-weight: 300 — too thin with Lato.
   font-weight: 400 is the normal Lato cut and matches the previous look.
   .fw-normal (used on hero lead) is font-weight: 400 !important so it's unaffected. */
.lead {
    font-weight: 400;
}

.product-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}
@media (max-width: 600px) {
  .product-detail-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .product-detail-actions .btn {
    width: 100%;
    margin-bottom: 0;
  }
}

/* ========================================
   MOBILE-FIRST RESPONSIVE ENHANCEMENTS
   ======================================== */

/* Mobile: Product Tile Optimizations */
@media (max-width: 767px) {
  /* aspect-ratio handles sizing — no height override needed */
  
  /* Product card spacing - tighter for better mobile experience */
  .product-card .card-body {
    padding: 0.875rem 0.75rem 0.5rem !important;
  }
  
  .product-card .card-footer {
    padding: 0.5rem 0.75rem 0.75rem !important;
  }
  
  /* Product tile title - better readability */
  .product-card .card-title, .product-card h5 {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Product tile price - clear and prominent */
  .product-card .card-body > div > div {
    font-size: 0.95rem !important;
  }
  
  /* Sale price emphasis */
  .product-card .text-danger.fw-bold {
    font-size: 1rem !important;
  }
  
  /* CTA buttons on tiles - perfect touch size */
  .cta-btn {
    font-size: 0.9rem !important;
    padding: 0.7em 1.5em !important;
    min-height: 44px !important;
  }
  
  /* Product card hover effect adjustment for mobile */
  .product-card {
    border-radius: 0.375rem !important;
    margin-bottom: 0.5rem !important;
  }
}

/* Mobile: Touch Targets - Minimum 44x44px */
@media (max-width: 767px) {
  /* Heart button - larger touch target */
  .heart-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.1rem !important;
  }
  
  /* Share buttons */
  .shareButton, .btn-sm {
    min-height: 44px !important;
    padding: 0.7em 1.2em !important;
  }
  
  /* Pagination buttons */
  .pagination .page-link {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Mobile: Product Detail Page */
@media (max-width: 767px) {
  /* Product detail card padding */
  .product-detail-card {
    padding: 1rem 0.5rem !important;
    border-radius: 1rem !important;
    margin-bottom: 1rem;
  }
  
  /* Product detail image - better mobile sizing */
  .product-detail-img {
    height: 300px !important;
    max-height: 300px;
  }
  
  /* Product thumbnails - larger for touch */
  .product-thumb {
    width: 70px !important;
    height: 70px !important;
    margin: 0 0.25rem !important;
  }
  
  /* Product title on detail page */
  .product-detail-card .card-title {
    font-size: 1.5rem !important;
  }
  
  /* Product description text */
  .product-detail-card .card-text {
    font-size: 1rem !important;
  }
  
  /* Product detail buttons */
  .product-detail-card .btn {
    font-size: 1rem !important;
    padding: 0.75em 1.5em !important;
  }
  
  .product-detail-card .btn-lg {
    font-size: 1.1rem !important;
    padding: 0.85em 1.75em !important;
  }
  
  /* Trust strip - stack vertically on mobile */
  .product-detail-card .d-flex.justify-content-around.text-center {
    flex-direction: column !important;
    gap: 0.75rem;
    padding: 1rem 0 !important;
  }
  
  .product-detail-card .d-flex.justify-content-around.text-center > span {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 0.5rem;
  }
  
  .product-detail-card .d-flex.justify-content-around.text-center > span:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* Mobile: Typography Optimization */
@media (max-width: 767px) {
  /* Headers - SIGNIFICANTLY reduced size and spacing for mobile */
  header.bg-dark {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  header.bg-dark .container {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  header.bg-dark h1.display-4 {
    font-size: 1.75rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.2 !important;
  }
  
  header.bg-dark p.lead {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }
  
  /* Article detail page heading (has inline style) */
  .col-lg-8.col-xl-7 h1[style*="font-size: 2rem"] {
    font-size: 1.6rem !important;
  }
  
  /* Article detail lead text (has inline style) */
  .col-lg-8.col-xl-7 p.lead[style*="font-size: 1.15rem"] {
    font-size: 1rem !important;
  }
  
  /* home/category page heading */
  h3.text-center {
    font-size: 1.5rem !important;
  }
  
  /* Article content headings */
  .article-content h2 {
    font-size: 1.3rem !important;
  }
  
  .article-content h3 {
    font-size: 1.15rem !important;
  }
  
  .article-content p, .article-content li {
    font-size: 1rem !important;
  }
}

/* Mobile: Navbar Optimization */
@media (max-width: 991px) {
  /* Navbar brand - better spacing */
  .navbar-brand {
    font-size: 1rem !important;
  }
  
  .navbar-brand img {
    height: 24px !important;
  }
  
  /* Collapsed navbar items spacing */
  .navbar-collapse {
    margin-top: 1rem;
  }
  
  .navbar-nav {
    gap: 0.5rem !important;
  }
  
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem !important;
  }
  
  /* Saved items button in mobile menu */
  .navbar form {
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(0,0,0,0.1);
  }
}

/* Category filter pills */
/* Desktop: Lato has a smaller optical x-height than system-ui; target
   these directly since rem units are unaffected by body { font-size } */
@media (min-width: 768px) {
  .lead {
    font-size: 1.375rem;
  }
  .category-pill-scroll .btn,
  .article-filter-tabs .btn {
    font-size: 0.9375rem;
  }
}
@media (max-width: 767px) {
  /* Category buttons - compact on small screens */
  .category-pill-scroll .btn {
    font-size: 0.85rem !important;
    padding: 0.5em 1em !important;
  }
}

/* Mobile: Sort & Filter Controls */
@media (max-width: 767px) {
  /* Sort dropdown */
  .form-select, .form-select-sm {
    font-size: 0.95rem !important;
    padding: 0.6rem 0.75rem !important;
  }
  
  /* Sort form spacing */
  #sortForm {
    justify-content: center;
  }
}

/* Mobile: Search Page Filters */
@media (max-width: 767px) {
  /* Search form improvements */
  .input-group-text {
    padding: 0.5rem !important;
  }
  
  .form-control {
    font-size: 1rem !important;
  }
  
  /* Filter pills */
  .badge.rounded-pill {
    font-size: 0.85rem !important;
    padding: 0.5em 0.85em !important;
  }
}

/* Mobile: Article List & Detail Page */
@media (max-width: 767px) {
  /* Article cards - optimized spacing */
  .hover-lift {
    margin-bottom: 1rem;
  }
  
  /* Article card images - better mobile sizing */
  .card-img-top.article-card-img,
  .card-img-top.article-card-img[style*="height: 220px"] {
    height: 180px !important;
    max-height: 180px !important;
  }
  
  /* Article card body spacing */
  .hover-lift .card-body {
    padding: 1rem !important;
  }
  
  /* Article card title */
  .hover-lift .card-title {
    font-size: 1.1rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  /* Article card text */
  .hover-lift .card-text {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
  
  /* Article list meta info - smaller on mobile */
  .hover-lift .text-muted[style*="font-size: 0.8rem"] {
    font-size: 0.75rem !important;
  }
  
  /* Article detail page */
  .article-content {
    padding: 0 0.5rem;
  }
  
  /* Article detail featured image - reduce from 460px */
  .col-lg-8.col-xl-7 img[style*="max-height: 460px"] {
    max-height: 320px !important;
  }
  
  /* Article header meta - better stacking */
  .article-header-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
  
  .article-header-meta .ms-auto {
    margin-left: 0 !important;
  }
  
  /* Article meta separator - hide on mobile */
  .article-header-meta span.text-muted[style*="font-size: 0.85rem"]:first-of-type {
    display: none !important;
  }
  
  /* Article share buttons */
  .article-content + .card .d-flex.gap-2 {
    flex-direction: column;
  }
  
  .article-content + .card .btn {
    width: 100%;
  }
  
  /* Article affiliate disclosure */
  .col-lg-8.col-xl-7 [style*="background:#f8f9fa"] {
    font-size: 0.85rem !important;
    padding: 0.75rem !important;
  }
  
  /* Related article cards */
  .card-body p.lead {
    font-size: 1rem !important;
  }
  
  /* Featured products in articles - 2 columns on mobile */
  .row > .col-6.col-sm-4.col-md-3.col-lg-2 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  /* Featured product cards in articles - better sizing */
  .col-6.col-sm-4.col-md-3.col-lg-2 .card {
    margin-bottom: 0.75rem;
  }
  
  .col-6.col-sm-4.col-md-3.col-lg-2 img[style*=\"height: 150px\"] {
    height: 120px !important;\n  }
  
  .col-6.col-sm-4.col-md-3.col-lg-2 .card-body {
    padding: 0.5rem !important;
  }
  
  .col-6.col-sm-4.col-md-3.col-lg-2 .small.fw-semibold {
    font-size: 0.8rem !important;
    min-height: 2.4rem !important;
  }
  
  /* Author bio card */
  .col-lg-8.col-xl-7 .card[style*=\"width:64px\"] img,
  .col-lg-8.col-xl-7 .card[style*=\"width:64px\"] > div {
    width: 48px !important;
    height: 48px !important;
  }
  
  /* Related articles section \"You Might Also Like\" */
  section[style*=\"background: #f5f0eb\"] {
    padding: 2.5rem 0 !important;
  }
  
  section[style*=\"background: #f5f0eb\"] h2 {
    font-size: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  section[style*=\"background: #f5f0eb\"] .card-img-top,
  section[style*=\"background: #f5f0eb\"] .card-img-top[style*=\"height: 190px\"] {
    height: 160px !important;
  }
  
  section[style*=\"background: #f5f0eb\"] .card-body {
    padding: 1rem !important;
  }
  
  section[style*=\"background: #f5f0eb\"] .card-title {
    font-size: 1rem !important;
  }
}

/* Mobile: Footer Optimization */
@media (max-width: 767px) {
  footer p {
    font-size: 0.9rem !important;
    line-height: 1.6;
  }
}

/* Mobile: Pagination Improvements */
@media (max-width: 575px) {
  .pagination {
    font-size: 0.85rem;
  }

  .pagination .page-link {
    padding: 0.5rem 0.65rem;
  }
}

/* Mobile: Modal Optimization */
@media (max-width: 767px) {
  /* Share modal */
  .modal-dialog {
    margin: 0.5rem;
  }
  
  .modal-body .d-grid.gap-2 {
    gap: 0.75rem !important;
  }
  
  .modal-body .btn {
    padding: 0.85rem 1rem !important;
    font-size: 1rem !important;
  }
}

/* Mobile: Breadcrumb Optimization */
@media (max-width: 767px) {
  .breadcrumb {
    font-size: 0.8rem !important;
    padding: 0.5rem 0 !important;
  }
}

/* Mobile: Badge & Labels */
@media (max-width: 767px) {
  /* Sale badges */
  .badge.bg-danger.position-absolute {
    font-size: 0.7rem !important;
    padding: 0.35em 0.65em !important;
  }
  
  /* Category badges */
  .badge.bg-secondary {
    font-size: 0.75rem !important;
  }
  
  /* Post type badges */
  .post-type-badge {
    font-size: 0.65rem !important;
  }
}

/* Mobile: Spacing & Padding Adjustments */
@media (max-width: 767px) {
  /* Container padding */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Section padding */
  section.py-5 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  
  /* Card padding */
  .card-body {
    padding: 1rem !important;
  }
  
  /* Row gutters - tighter on mobile for better grid */
  .row.gx-2, .row.gx-lg-3 {
    --bs-gutter-x: 0.5rem !important;
  }
  
  /* Product grid - optimize column spacing */
  #product-grid .row {
    row-gap: 1rem !important;
  }
  
  /* Product grid columns - consistent spacing */
  #product-grid .col {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  #product-grid .col.mb-4 {
    margin-bottom: 1rem !important;
  }
}


/* Mobile: Hover Effects - Disable on Touch Devices */
@media (hover: none) and (pointer: coarse) {
  .product-card:hover {
    transform: none;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1.5px 6px rgba(0,0,0,0.04);
  }
  
  .hover-lift:hover {
    transform: none;
  }
  
  .cta-btn:hover {
    transform: none;
  }
}

/* Mobile: Improved Focus States for Accessibility */
@media (max-width: 767px) {
  button:focus-visible, .btn:focus-visible, a:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
  }
}

/* Mobile: About Page List Optimization */
@media (max-width: 767px) {
  .col-lg-8.col-md-10 ul li {
    margin-bottom: 0.75rem !important;
    line-height: 1.6;
  }
}

/* Mobile: Saved Items Page */
@media (max-width: 767px) {
  /* Saved items product cards spacing */
  .card.mb-3.border-0.product-detail-card {
    margin-bottom: 2rem !important;
  }
  
  hr[style*="border: 2px solid black"] {
    margin: 2rem 0 !important;
  }
}

/* Mobile: SEO Content Section in Category Pages */
@media (max-width: 767px) {
  .seo-content {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
  }
  
  .seo-content h2 {
    font-size: 1.25rem !important;
  }
}

/* Extra Small Devices - Fine-tuning for phones < 375px */
@media (max-width: 374px) {
  /* Headers - even more compact on tiny screens */
  header.bg-dark h1.display-4 {
    font-size: 1.5rem !important;
  }
  
  header.bg-dark p.lead {
    font-size: 0.875rem !important;
  }
  
  /* Product tile images - slightly smaller */
  /* aspect-ratio handles sizing — no height override needed */
  
  /* Product tile text - compact */
  .product-card .card-title, .product-card h5 {
    font-size: 0.875rem !important;
  }
  
  /* Category buttons - more compact */
  .category-pill-scroll .btn {
    font-size: 0.8rem !important;
    padding: 0.45em 0.85em !important;
  }
  
  /* Article card images */
  .card-img-top.article-card-img {
    height: 160px !important;
  }
  
  /* Navbar brand - more compact */
  .navbar-brand {
    font-size: 0.9rem !important;
  }
}

/* Product Page Visual Overhaul */
.product-page-bg {
  background: linear-gradient(120deg, #f8f9fa 60%, #e9ecef 100%);
}
.product-card-detail {
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 4px 32px rgba(0,0,0,0.08);
}
.product-detail-card {
  box-shadow: 0 4px 32px rgba(0,0,0,0.10);
  background: #fff;
  padding: 2rem 1rem;
}
.product-detail-img {
  border-radius: 1rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
  object-fit: contain;
  height: 45vh;
  background: #f8f9fa;
}
.product-thumbnails {
  gap: 0.5rem;
}

/* Mobile: Product thumbnails - reduce size and gap for narrow screens */
@media (max-width: 767px) {
  .product-thumbnails {
    gap: 0.35rem;
    flex-wrap: wrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }
  .product-thumbnails::-webkit-scrollbar {
    display: none;
  }
  .product-thumb {
    width: 60px !important;
    height: 60px !important;
  }
}

/* md/lg breakpoints: aspect-ratio: 1/1 on .product-img handles sizing automatically */

/* Mid screens: col-md-6 available width = 336px (360px - 24px col padding).
   5 × 65px + 4 × 8px gap = 357px overflows. 5 × 60px + 32px = 332px fits. */
@media (min-width: 768px) and (max-width: 991px) {
  .product-thumb {
    width: 60px !important;
    height: 60px !important;
  }
}

.product-thumb {
  width: 80px;
  height: 80px;
  object-fit: contain;
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: box-shadow 0.2s, border 0.2s;
  border: 2px solid #dee2e6;
}
.product-thumb:hover, .product-thumb.active {
  box-shadow: 0 2px 8px rgba(33,37,41,0.18);
  border: 2px solid #212529;
}
.sale-badge {
  background: linear-gradient(135deg, #dc3545 80%, #fff 100%);
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  padding: 0.5em 1em;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(220,53,69,0.18);
  letter-spacing: 1px;
}
.product-detail-card .card-title {
  font-size: 2rem;
  font-weight: 700;
  color: #212529;
}
.product-detail-card .card-text {
  font-size: 1.1rem;
  color: #495057;
}
.product-detail-card .btn {
  font-size: 1.1rem;
  border-radius: 2rem;
  font-weight: 500;
  padding: 0.6em 1.5em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: 0.5em;
}
.product-detail-card .btn-lg {
  font-size: 1.2rem;
  padding: 0.8em 2em;
}
.product-detail-card .btn-primary {
  background: linear-gradient(120deg, #212529 80%, #343a40 100%);
  border: none;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(33,37,41,0.12);
}
.product-detail-card .btn-primary:hover {
  background: linear-gradient(120deg, #343a40 80%, #212529 100%);
  color: #fff;
}
.product-detail-card .btn-danger, .product-detail-card .btn-outline-danger {
  box-shadow: 0 2px 8px rgba(220,53,69,0.10);
}
.product-detail-card .btn-outline-success {
  box-shadow: 0 2px 8px rgba(25,135,84,0.10);
}
.product-detail-card .btn-outline-secondary {
  box-shadow: 0 2px 8px rgba(108,117,125,0.10);
}
.heart-btn {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0.95rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.07);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  cursor: pointer;
}
.heart-btn i {
  color: #6c757d;
  transition: color 0.2s;
}
.heart-btn:hover {
  transform: scale(1.15);
  background: rgba(255,255,255,1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.10);
}
.heart-btn.animate {
  animation: heartScale 0.3s cubic-bezier(.4,0,.2,1);
}
.product-card {
  position: relative;
}
.product-img {
  z-index: 1;
  position: relative;
  aspect-ratio: 1 / 1;
  object-fit: scale-down;
  /*background-color: #f8f9fa;*/
}
.product-card .badge {
  z-index: 2;
  position: absolute;
}
/* Modern Product Card Enhancements */
.product-card {
  box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1.5px 6px rgba(0,0,0,0.04);
  transition: box-shadow 0.3s, transform 0.3s;
  background: #fff;
}
.product-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.16), 0 3px 12px rgba(0,0,0,0.08);
  transform: translateY(-4px) scale(1.03);
}
.product-img {
  transition: filter 0.3s;
}
.product-card:hover .product-img {
  filter: brightness(0.97) saturate(1.1);
}
/* heart-btn animation (defined above) */
@keyframes heartScale {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* CTA Button Enhancements */
.cta-btn {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.cta-btn:hover, .cta-btn:focus {
  background: #343a40;
  color: #fff;
  border-color: #343a40;
  box-shadow: 0 4px 16px rgba(33,37,41,0.22);
  transform: scale(1.05);
}

/* Navbar Enhancements */
.navbar {
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  transition: background 0.3s, box-shadow 0.3s;
  background: rgba(255,255,255,0.98);
  z-index: 1050;
}
.navbar.scrolled {
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}

/* Button Ripple Animation */
.cta-btn:active {
  animation: ripple 0.4s linear;
}
@keyframes ripple {
  0% { box-shadow: 0 0 0 0 rgba(33,37,41,0.2); }
  80% { box-shadow: 0 0 0 12px rgba(33,37,41,0.0); }
  100% { box-shadow: 0 0 0 0 rgba(33,37,41,0.0); }
}

/* Product Image Lightbox */
.product-lightbox-trigger {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 4;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.88);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
  transition: background 0.2s, transform 0.2s;
  font-size: 1rem;
  color: #212529;
}
.product-lightbox-trigger:hover {
  background: #fff;
  transform: scale(1.1);
}
.product-carousel-wrapper:hover .product-lightbox-trigger {
  opacity: 1;
}
.product-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.92);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.product-lightbox-overlay.lb-active {
  display: flex;
}
.product-lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  cursor: default;
  box-shadow: 0 8px 48px rgba(0,0,0,0.5);
}
.product-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
}
.product-lightbox-close:hover {
  background: rgba(255,255,255,0.3);
}
.product-lightbox-prev,
.product-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  font-size: 1.25rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 1;
  padding: 0;
}
.product-lightbox-prev:hover,
.product-lightbox-next:hover {
  background: rgba(255,255,255,0.3);
}
.product-lightbox-prev { left: 1.25rem; }
.product-lightbox-next { right: 1.25rem; }