:root{
  --ink:#0f172a; --muted:#64748b; --line:#e7ecf0; --line-soft:#f1f5f9;
  --brand:#27ae96;
  --danger:#ff4d4f;
  --wa:#25D366; --wa-dark:#1fb257;
  --yellow:#ffe000;
  --card: #fff;
  --shadow: 0 10px 24px rgba(15,23,42,.08);
}

.product-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 4px 14px rgba(15,23,42,.06);
  overflow:hidden; transition:transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column;
}
.product-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }

/* inner framed media area */
.product-card .pc-media{
  margin:18px; border:1px solid var(--line-soft); border-radius:16px;
  height:235px; display:flex; align-items:center; justify-content:center;
  position:relative; background:#fff;
}
.product-card .pc-media img{ max-width:85%; max-height:85%; object-fit:contain; }

/* HOT badge */
.product-card .pc-badge{
  position:absolute; left:10px; top:10px;
  background:#ff4d4f; color:#fff; font-weight:700; font-size:12px;
  padding:4px 8px; border-radius:6px;
}

/* Yellow WhatsApp ribbon across image bottom */
.product-card .pc-wa-ribbon{
  position:absolute; left:0; right:0; bottom:-1px; height:42px;
  background:var(--yellow); display:flex; align-items:center; gap:10px;
  padding:0 12px; border-radius:0 0 16px 16px;
  font-weight:700; font-size:20px; color:#0c1a33; letter-spacing:.3px;
  border-top:1px solid rgba(0,0,0,.08);
}
.pc-wa-ribbon .ico{ font-size:20px; }
.pc-wa-ribbon .sep{ width:8px; }

/* title */
.product-card .pc-body{ padding:8px 18px 14px; display:flex; flex-direction:column; gap:8px; }
.product-card .pc-title a{
  color:var(--ink); text-decoration:none; font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-card .pc-title a:hover{ text-decoration:underline; }

/* price row */
.product-card .pc-price{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pc-price .old{ color:#94a3b8; text-decoration:line-through; }
.pc-price .label{ color:#111827; font-weight:700; }
.pc-price .off{
  background:#e6f7ff; color:#1677ff; font-weight:600; font-size:12px;
  padding:4px 8px; border-radius:8px;
}

/* rating row */
.product-card .pc-meta{
  margin-top:2px; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px;
}
.pc-stars{ color:#fbbf24; font-size:14px; }

/* hover actions (bottom overlay) */
.product-card .pc-actions{
  position:absolute; left:18px; right:18px; bottom:12px;
  display:flex; gap:10px; opacity:0; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease; pointer-events:none;
}
.product-card:hover .pc-actions{ opacity:1; transform:translateY(0); pointer-events:auto; }
.pc-btn{
  flex:1 1 auto; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; text-decoration:none; border:1px solid transparent;
  box-shadow:0 6px 14px rgba(15,23,42,.10); white-space:nowrap;
}
.pc-btn.wa{ background:var(--wa); color:#fff; }
.pc-btn.wa:hover{ background:var(--wa-dark); }
.pc-btn.view{ background:#fff; color:var(--ink); border-color:#e5e7eb; }
.pc-btn.view:hover{ border-color:#cbd5e1; }
.pc-btn i{ margin-right:8px; }

/* space so overlay doesn't overlap text */
.product-card .pc-spacer{ height:46px; }

/* responsive */
@media (max-width: 575px){
  .product-card .pc-media{ height:200px; }
  .product-card .pc-wa-ribbon{ font-size:18px; height:40px; }
}

/* ===== Compact variant for Single Product related carousel ===== */
.product-card.is-compact .pc-media{ height:190px; margin:14px; border-radius:14px; }
.product-card.is-compact .pc-wa-ribbon{ height:36px; font-size:16px; border-radius:0 0 14px 14px; }
.product-card.is-compact .pc-body{ padding:8px 14px 12px; gap:6px; }
.product-card.is-compact .pc-title a{ font-size:14px; -webkit-line-clamp:2; }
.product-card.is-compact .pc-price{ font-size:13px; gap:8px; }
.product-card.is-compact .pc-meta{ font-size:12px; }
.product-card.is-compact .pc-spacer{ height:40px; }
.product-card.is-compact .pc-actions .pc-btn{ height:34px; font-size:13px; }

/* Slider fallback (scroll-snap) */
.related-slider{
  display:flex; gap:16px; overflow:auto; padding:4px 8px;
  scroll-snap-type:x mandatory;
}
.related-slider .slide{ scroll-snap-align:start; min-width:240px; }
@media (min-width: 576px){ .related-slider .slide{ min-width:260px; } }
@media (min-width: 992px){ .related-slider .slide{ min-width:280px; } }

/* Optional heading style */
.related-head{
  display:flex; align-items:center; justify-content:space-between; margin:8px 0 16px;
}
.related-head h3{ margin:0; font-size:20px; font-weight:700; }

/* ==== CTA near bottom of card (responsive, accessible) ==== */
.product-card{ position:relative; }

/* place actions at card bottom, not media middle */
.product-card .pc-actions{
  position:absolute; left:14px; right:14px; bottom:12px;
  display:flex; gap:10px;
  opacity:0; transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease;
  pointer-events:none;
  z-index:3;
}
/* reveal on card hover/focus-inside */
.product-card:hover .pc-actions,
.product-card:focus-within .pc-actions{ opacity:1; transform:translateY(0); pointer-events:auto; }

/* reserve space so content doesn't get covered */
.product-card .pc-spacer{ height:48px; }

/* clean buttons */
.pc-btn{
  flex:1 1 0; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; text-decoration:none;
  border:1px solid transparent; box-shadow:0 6px 14px rgba(15,23,42,.10);
  white-space:nowrap; user-select:none;
}
.pc-btn i{ margin-right:8px; }

/* states: no underline; subtle focus ring, no jump */
.pc-btn:link, .pc-btn:visited, .pc-btn:hover, .pc-btn:active, .pc-btn:focus{
  text-decoration:none; outline:0;
}
.pc-btn:focus-visible{ box-shadow:0 0 0 3px rgba(37,211,102,.25), 0 6px 14px rgba(15,23,42,.10); }

/* color variants */
.pc-btn.wa{ background:#25D366; color:#fff; }
.pc-btn.wa:hover{ filter:brightness(.95); }
.pc-btn.view{ background:#fff; color:#0f172a; border-color:#e5e7eb; }
.pc-btn.view:hover{ border-color:#cbd5e1; }

/* compact tune (if using .is-compact) */
.product-card.is-compact .pc-actions{ left:12px; right:12px; bottom:10px; }
.product-card.is-compact .pc-spacer{ height:44px; }
.product-card.is-compact .pc-btn{ height:36px; font-size:13px; }

/* ===== Reduced Carousel Spacing ===== */
/* Owl Carousel spacing */
.owl-carousel .owl-stage-outer{ padding:0; }
.owl-carousel .owl-stage{ padding:0; }
.owl-carousel .owl-item{ padding:0 4px; }
.owl-carousel .owl-item:first-child{ padding-left:0; }
.owl-carousel .owl-item:last-child{ padding-right:0; }

/* Featured products carousel */
.owl-carousel-featured .owl-item{ padding:0 6px; }
.owl-carousel-featured .owl-item:first-child{ padding-left:0; }
.owl-carousel-featured .owl-item:last-child{ padding-right:0; }

/* Related products carousel */
.related-carousel .owl-item{ padding:0 4px; }
.related-carousel .owl-item:first-child{ padding-left:0; }
.related-carousel .owl-item:last-child{ padding-right:0; }

/* Category carousels */
.categories-list .owl-carousel .owl-item{ padding:0 5px; }
.categories-list .owl-carousel .owl-item:first-child{ padding-left:0; }
.categories-list .owl-carousel .owl-item:last-child{ padding-right:0; }

/* Container spacing reduction */
.categories-list .container{ padding-left:8px; padding-right:8px; }
.categories-list .row{ margin-left:-4px; margin-right:-4px; }
.categories-list .col-lg-12{ padding-left:4px; padding-right:4px; }

/* Section spacing reduction */
.categories-list{ margin-bottom:20px; }
.section-header{ margin-bottom:15px; }
.heading-design-h5{ margin-bottom:10px; }

/* Product card container spacing */
.single-categorie{ padding:0; }
.single-categorie .owl-carousel{ margin:0; }

/* Responsive adjustments */
@media (max-width: 768px){
  .owl-carousel .owl-item{ padding:0 3px; }
  .owl-carousel-featured .owl-item{ padding:0 4px; }
  .categories-list .container{ padding-left:6px; padding-right:6px; }
}

@media (max-width: 576px){
  .owl-carousel .owl-item{ padding:0 2px; }
  .owl-carousel-featured .owl-item{ padding:0 3px; }
  .categories-list .container{ padding-left:4px; padding-right:4px; }
}

/* ===== Homepage Specific Carousel Fixes ===== */
/* Force override for homepage carousels */
.categories-list .owl-carousel-featured .owl-stage-outer{ padding:0 !important; }
.categories-list .owl-carousel-featured .owl-stage{ padding:0 !important; }
.categories-list .owl-carousel-featured .owl-item{ padding:0 4px !important; }
.categories-list .owl-carousel-featured .owl-item:first-child{ padding-left:0 !important; }
.categories-list .owl-carousel-featured .owl-item:last-child{ padding-right:0 !important; }

/* Homepage container overrides */
.categories-list .container{ max-width:100% !important; padding-left:8px !important; padding-right:8px !important; }
.categories-list .row{ margin-left:-4px !important; margin-right:-4px !important; }
.categories-list .col-lg-12{ padding-left:4px !important; padding-right:4px !important; }

/* Force remove any existing margins */
.categories-list .single-categorie{ padding:0 !important; margin:0 !important; }
.categories-list .single-categorie .owl-carousel{ margin:0 !important; }

/* Product card spacing on homepage */
.categories-list .product-card{ margin-bottom:8px !important; }

/* Mobile homepage adjustments */
@media (max-width: 768px){
  .categories-list .owl-carousel-featured .owl-item{ padding:0 3px !important; }
  .categories-list .container{ padding-left:6px !important; padding-right:6px !important; }
}

@media (max-width: 576px){
  .categories-list .owl-carousel-featured .owl-item{ padding:0 2px !important; }
  .categories-list .container{ padding-left:4px !important; padding-right:4px !important; }
}