/* ==========================================================================
   YourCart Frontend — yc-frontend.css v2.0
   Pixel-perfect parity with React reference (ProductCard.tsx + Home.tsx)
   All Tailwind values converted to exact CSS
   ========================================================================== */

/* ── CSS Variables ─────────────────────────────────────────────────────────── */
:root {
  --yc-blue:        #2563eb;
  --yc-blue-hover:  #1d4ed8;
  --yc-slate-50:    #f8fafc;
  --yc-slate-100:   #f1f5f9;
  --yc-slate-200:   #e2e8f0;
  --yc-slate-400:   #94a3b8;
  --yc-slate-500:   #64748b;
  --yc-slate-600:   #475569;
  --yc-slate-700:   #334155;
  --yc-slate-800:   #1e293b;
  --yc-slate-900:   #0f172a;
  --yc-green-50:    #f0fdf4;
  --yc-green-600:   #16a34a;
  --yc-orange:      #f97316;
  --yc-shadow-xl:   0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.10);
}

/* ── Body / page background ────────────────────────────────────────────────── */
/* React: <div className="bg-slate-50/50"> wrapper around all content */
body.home,
body.page {
  background-color: #f9fafb !important;
}

/* ============================================================
   HEADER — h-16 sticky top-0 z-40 bg-white/80 backdrop-blur
   ============================================================ */
.site-header,
#masthead,
.header-main,
header.header {
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  height: 64px !important;
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--yc-slate-200) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
}

/* ============================================================
   FEATURES STRIP — sticky top-16 z-30
   React: bg-white border-b border-slate-200 sticky top-16 z-30 shadow-sm
          4-col divide-x, each item: flex items-center p-3 px-4 md:px-6
          icon box: mr-3 p-1.5 bg-blue-50 rounded-lg
          title: font-bold text-slate-900 text-xs
          desc: text-[10px] text-slate-500
   ============================================================ */
.yc-features-strip {
  position: sticky !important;
  top: 64px !important;
  z-index: 30 !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--yc-slate-200) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
  width: 100% !important;
}
.yc-features-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  display: flex !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.yc-features-inner::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .yc-features-inner {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    overflow-x: visible !important;
  }
  .yc-feature-item {
    border-right: 1px solid var(--yc-slate-100) !important;
  }
  .yc-feature-item:last-child { border-right: none !important; }
}
.yc-feature-item {
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
  flex-shrink: 0 !important;
  min-width: 200px !important;
  cursor: default !important;
  transition: background 0.15s !important;
}
@media (min-width: 768px) {
  .yc-feature-item {
    padding: 12px 24px !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }
}
.yc-feature-item:hover { background: var(--yc-slate-50) !important; }
.yc-feature-icon-box {
  margin-right: 12px !important;
  padding: 6px !important;
  background: #eff6ff !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  transition: background 0.15s !important;
}
.yc-feature-item:hover .yc-feature-icon-box { background: #dbeafe !important; }
.yc-feature-title {
  font-weight: 700 !important;
  color: var(--yc-slate-900) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  display: block !important;
}
.yc-feature-desc {
  font-size: 10px !important;
  color: var(--yc-slate-500) !important;
  display: block !important;
  margin-top: 1px !important;
}

/* ============================================================
   BRAND MARQUEE — bg-white border-b py-3
   React: "Official Partners" | dot + brand name opacity-50 hover:100
   mx-6 sm:mx-8 gap-2, dot w-1.5 h-1.5 rounded-full bg-slate-300
   brand: text-sm font-bold text-slate-600
   ============================================================ */
.yc-brand-marquee-section {
  background: #ffffff !important;
  border-bottom: 1px solid var(--yc-slate-100) !important;
  padding: 12px 0 !important;
  overflow: hidden !important;
  position: relative !important;
}
.yc-brand-marquee-section::before,
.yc-brand-marquee-section::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; bottom: 0 !important;
  width: 48px !important;
  z-index: 10 !important;
  pointer-events: none !important;
}
.yc-brand-marquee-section::before {
  left: 0 !important;
  background: linear-gradient(to right, white, transparent) !important;
}
.yc-brand-marquee-section::after {
  right: 0 !important;
  background: linear-gradient(to left, white, transparent) !important;
}
.yc-brand-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
}
.yc-brand-label {
  margin-right: 24px !important;
  padding-right: 24px !important;
  border-right: 1px solid var(--yc-slate-200) !important;
  flex-shrink: 0 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--yc-slate-400) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  display: none !important;
}
@media (min-width: 640px) { .yc-brand-label { display: block !important; } }
.yc-brand-track-wrap {
  flex: 1 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
}
.yc-brand-track {
  display: flex !important;
  white-space: nowrap !important;
  align-items: center !important;
  animation: yc-marquee-brands 40s linear infinite !important;
}
@keyframes yc-marquee-brands {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.yc-brand-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 24px !important;
  opacity: 0.5 !important;
  cursor: default !important;
  transition: opacity 0.2s !important;
}
@media (min-width: 640px) { .yc-brand-item { margin: 0 32px !important; } }
.yc-brand-item:hover { opacity: 1 !important; }
.yc-brand-dot {
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: #cbd5e1 !important;
  flex-shrink: 0 !important;
  transition: background 0.2s !important;
}
.yc-brand-item:hover .yc-brand-dot { background: var(--yc-blue) !important; }
.yc-brand-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--yc-slate-600) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
  letter-spacing: -0.01em !important;
  transition: color 0.2s !important;
}
.yc-brand-item:hover .yc-brand-name { color: var(--yc-slate-900) !important; }

/* ============================================================
   CATEGORY SECTIONS — from Home.tsx L502-544
   React: rounded-2xl border border-slate-200 bg-white shadow-sm
          hover:shadow-md transition-all relative overflow-hidden
          Header: px-5 py-3 md:px-6 md:py-4 flex items-center justify-between
                  border-b border-slate-50 bg-slate-50/30
          h2: text-lg md:text-xl font-bold text-slate-800
          count pill: px-2 py-0.5 bg-slate-100 text-[10px] rounded-full
          desc: text-[10px] md:text-xs text-slate-500 mt-1
          "View All": text-xs font-bold text-slate-500 hover:text-blue-600
          Grid: p-3 md:p-4, grid-cols-2 sm:2 md:3 xl:4 gap-3
   ============================================================ */

/* Products sections wrapper */
#products,
.yc-home-products {
  padding: 32px 0 !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}
@media (min-width: 640px) {
  #products, .yc-home-products { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (min-width: 1024px) {
  #products, .yc-home-products { padding-left: 32px !important; padding-right: 32px !important; }
}

.yc-cat-section {
  position: relative !important;
  border-radius: 16px !important;
  border: 1px solid var(--yc-slate-200) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04) !important;
  overflow: hidden !important;
  transition: box-shadow 0.3s !important;
}
.yc-cat-section:hover {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.06) !important;
}

/* Gradient top line — 4px h-1 */
.yc-cat-topline {
  height: 4px !important;
  width: 100% !important;
  display: block !important;
}

/* Header bar */
.yc-cat-header {
  padding: 12px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #f8fafc !important;
  background: rgba(248,250,252,0.3) !important;
}
@media (min-width: 768px) { .yc-cat-header { padding: 16px 24px !important; } }

.yc-cat-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Category icon box — p-2 rounded-lg */
.yc-cat-icon-box {
  padding: 8px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Category title — text-lg md:text-xl font-bold text-slate-800 */
.yc-cat-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--yc-slate-800) !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}
@media (min-width: 768px) { .yc-cat-title { font-size: 20px !important; } }

/* Count pill — px-2 py-0.5 bg-slate-100 text-[10px] text-slate-500 rounded-full */
.yc-cat-count-pill {
  display: none !important;
  padding: 2px 8px !important;
  background: var(--yc-slate-100) !important;
  font-size: 10px !important;
  color: var(--yc-slate-500) !important;
  border-radius: 9999px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
@media (min-width: 640px) { .yc-cat-count-pill { display: inline-flex !important; } }

/* Category description */
.yc-cat-desc {
  font-size: 10px !important;
  color: var(--yc-slate-500) !important;
  font-weight: 500 !important;
  margin: 4px 0 0 !important;
}
@media (min-width: 768px) { .yc-cat-desc { font-size: 12px !important; } }

/* View All button */
.yc-cat-view-all {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--yc-slate-500) !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: color 0.15s, transform 0.2s !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
@media (min-width: 768px) { .yc-cat-view-all { font-size: 14px !important; } }
.yc-cat-view-all:hover { color: var(--yc-blue) !important; transform: translateX(2px) !important; }

/* Product grid inside category section */
.yc-cat-section .products,
.yc-cat-section .woocommerce ul.products,
.yc-cat-section ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding: 12px !important;
  margin: 0 !important;
  list-style: none !important;
  background: #ffffff !important;
}
@media (min-width: 640px) {
  .yc-cat-section .products,
  .yc-cat-section ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 768px) {
  .yc-cat-section .products,
  .yc-cat-section ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 16px !important;
  }
}
@media (min-width: 1280px) {
  .yc-cat-section .products,
  .yc-cat-section ul.products { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ============================================================
   PRODUCT CARD — Pixel-perfect ProductCard.tsx parity
   ============================================================ */

/* Outer card wrapper — rounded-xl border border-slate-200 overflow-hidden
   flex flex-col h-full hover:-translate-y-1 hover:shadow-xl */
.product-block.grid.v1,
.product-block.grid {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid var(--yc-slate-200) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  position: relative !important;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
.product-block.grid:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--yc-shadow-xl) !important;
}

/* Inner layout containers */
.product-block .product-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.product-block .block-inner { display: contents !important; }

/* ── Image area: aspect-square bg-[#EEF2FF] p-2 overflow-hidden cursor-pointer */
.product-block figure.image {
  position: relative !important;
  background: #EEF2FF !important;
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  padding: 8px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border-radius: 0 !important;
}
.product-block figure.image > a.product-image {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  align-items: center !important;
  justify-content: center !important;
}
.product-block figure.image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  transition: transform 0.7s ease !important;
  display: block !important;
}
.product-block:hover figure.image img { transform: scale(1.05) !important; }

/* ── Deal badge — absolute top-2 left-2 z-10 bg-[#F97316]
   text-white font-bold rounded-md flex items-center gap-0.5 text-[9px] px-1.5 py-0.5 */
span.onsale.yc-deal-badge,
.woocommerce .product span.onsale.yc-deal-badge {
  position: absolute !important;
  top: 8px !important; left: 8px !important;
  right: auto !important; bottom: auto !important;
  z-index: 10 !important;
  background: #F97316 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  border-top-left-radius: 6px !important;
  border-top-right-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  font-size: 9px !important;
  padding: 2px 6px !important;
  line-height: 1.4 !important;
  width: auto !important; height: auto !important;
  min-width: 0 !important; min-height: 0 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.12) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Hide old Urna percentage badge */
.product-block span.onsale:not(.yc-deal-badge),
.product-block span.onsale .saled,
.product-block span.onsale .featured {
  display: none !important;
  visibility: hidden !important;
}

/* ── Wishlist button — absolute top-2 right-2 z-20 w-6 h-6
   rounded-full bg-white shadow-sm text-slate-400 hover:text-red-500 */
.yc-wishlist-btn {
  position: absolute !important;
  top: 8px !important; right: 8px !important;
  z-index: 20 !important;
  width: 24px !important; height: 24px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.12) !important;
  border: 1px solid transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #94a3b8 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: color 0.15s, border-color 0.15s !important;
}
.yc-wishlist-btn:hover { color: #ef4444 !important; border-color: #fee2e2 !important; }
.yc-wishlist-btn.wishlisted { color: #ef4444 !important; }

/* ── Content section — p-2.5 flex flex-col grow */
.product-block .caption {
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* ── Product title — text-xs font-bold line-clamp-2 mb-0.5 cursor-pointer hover:text-blue-600 */
.product-block .caption h3.name {
  margin: 0 0 2px !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
.product-block .caption h3.name a {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--yc-slate-900) !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 0.15s !important;
  cursor: pointer !important;
}
.product-block .caption h3.name a:hover { color: var(--yc-blue) !important; }

/* ── Star row */
.yc-star-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
}
.yc-stars { display: inline-flex !important; gap: 1px !important; }
.yc-review-count {
  font-size: 9px !important;
  font-weight: 500 !important;
  color: var(--yc-slate-400) !important;
}

/* ── Card description — text-[10px] text-slate-500 leading-relaxed line-clamp-2 mb-1 */
.yc-card-desc {
  font-size: 10px !important;
  color: var(--yc-slate-500) !important;
  line-height: 1.6 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
}

/* ── Feature pills — flex gap-1 mb-1.5
   each: text-[9px] font-semibold bg-slate-100 px-1.5 py-0.5 rounded
         text-slate-600 border border-slate-200 whitespace-nowrap shrink-0 */
.yc-feat-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-bottom: 6px !important;
}
.yc-feat-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  background: var(--yc-slate-100) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  color: var(--yc-slate-600) !important;
  border: 1px solid var(--yc-slate-200) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1.4 !important;
}

/* ── Price section — mt-auto border-t border-slate-100 pt-2 mb-2 */
.product-block .caption .price,
.woocommerce ul.products li.product .price {
  display: flex !important;
  flex-direction: column !important;
  margin-top: auto !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--yc-slate-100) !important;
  margin-bottom: 0 !important;
}

/* Sale price — text-base font-bold text-slate-900 leading-none mb-1 */
.product-block .price ins,
.woocommerce ul.products li.product .price ins {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--yc-slate-900) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 4px !important;
}
.product-block .price ins .woocommerce-Price-amount,
.product-block .price ins bdi { font-size: 16px !important; }

/* MRP row — flex items-center gap-1.5 flex-wrap */
.yc-price-mrp-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

/* MRP — text-[10px] text-slate-400 line-through */
.product-block .price del,
.woocommerce ul.products li.product .price del {
  font-size: 10px !important;
  color: var(--yc-slate-400) !important;
  text-decoration: line-through !important;
  display: inline !important;
  margin: 0 !important;
}
.product-block .price del bdi { font-size: 10px !important; }

/* Save badge — text-[9px] font-bold text-green-600 bg-green-50 px-1.5 py-0.5 rounded */
.yc-save-row { display: block !important; margin-top: 2px !important; }
.yc-save-badge {
  display: inline-flex !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--yc-green-600) !important;
  background: var(--yc-green-50) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  line-height: 1.4 !important;
}

/* ── Action buttons row — flex gap-2 mt-2 */
.product-block .group-buttons,
.product-block .caption .group-buttons {
  display: flex !important;
  gap: 8px !important;
  align-items: stretch !important;
  margin-top: 8px !important;
  flex-wrap: nowrap !important;
}
.product-block .add-cart { flex: 1 !important; min-width: 0 !important; }
/* Hide Urna extras */
.product-block .tbay-quick-view,
.product-block .tbay-wishlist,
.product-block .add-to-links,
.product-block .yith-wcwl-add-to-wishlist { display: none !important; }

/* Add to cart button:
   flex-1 py-2 text-xs bg-blue-600 hover:bg-blue-700 text-white
   rounded-lg font-bold shadow-md cursor-pointer active:scale-95 */
.product-block .add-cart a.button,
.product-block .add-cart a.add_to_cart_button,
.product-block a.yc-add-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  background: var(--yc-blue) !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  width: 100% !important;
  box-shadow: 0 4px 6px -1px rgba(37,99,235,.25), 0 2px 4px -2px rgba(37,99,235,.1) !important;
  transition: background 0.15s, transform 0.1s !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  height: auto !important;
}
.product-block .add-cart a.button:hover { background: var(--yc-blue-hover) !important; }
.product-block .add-cart a.button:active { transform: scale(0.95) !important; }

/* Compare button — w-9 h-9 shrink-0 rounded-lg border border-slate-200
   bg-white text-slate-600 hover:border-slate-300 */
.yc-compare-btn {
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  border: 1px solid var(--yc-slate-200) !important;
  background: #ffffff !important;
  color: var(--yc-slate-600) !important;
  cursor: pointer !important;
  transition: border-color 0.15s, color 0.15s !important;
  padding: 0 !important;
  align-self: stretch !important;
}
.yc-compare-btn:hover { border-color: #cbd5e1 !important; color: var(--yc-slate-900) !important; }

/* ── Product grid — 2/3/4 col responsive  */
.woocommerce ul.products,
ul.products.columns-4,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  list-style: none !important;
}
.woocommerce ul.products li.product,
ul.products li.product {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
}
@media (min-width: 768px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1280px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ── Mobile card tweaks (<640px) */
@media (max-width: 639px) {
  .product-block .caption          { padding: 8px !important; }
  .product-block .caption h3.name a{ font-size: 11px !important; }
  .product-block .price ins        { font-size: 14px !important; }
  .product-block .add-cart a.button{ padding: 7px 8px !important; font-size: 11px !important; }
  .yc-compare-btn                  { width: 32px !important; height: 32px !important; }
  .yc-feat-pill                    { font-size: 8px !important; padding: 1px 4px !important; }
  .yc-save-badge                   { font-size: 8px !important; }
  span.onsale.yc-deal-badge        { font-size: 8px !important; padding: 2px 4px !important; }
}

/* ============================================================
   REVIEWS MARQUEE — border-y border-slate-100 bg-white py-8
   React: w-70 sm:w-[320px] rounded-xl border border-slate-200 p-4
          avatar: w-9 h-9 rounded-full gradient text-sm font-bold
          review text: text-xs italic leading-relaxed line-clamp-3
          CheckCircle2 text-green-500 size-12
   ============================================================ */
.yc-reviews-section {
  border-top: 1px solid var(--yc-slate-100) !important;
  border-bottom: 1px solid var(--yc-slate-100) !important;
  background: #ffffff !important;
  padding: 32px 0 !important;
  overflow: hidden !important;
}
.yc-reviews-header {
  max-width: 1280px !important;
  margin: 0 auto 24px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.yc-reviews-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.yc-reviews-star-box {
  padding: 6px !important;
  background: #fef9c3 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
}
.yc-reviews-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--yc-slate-900) !important;
  margin: 0 !important;
}
@media (min-width: 640px) { .yc-reviews-title { font-size: 20px !important; } }
.yc-reviews-rating-text {
  font-size: 12px !important;
  color: var(--yc-slate-500) !important;
  font-weight: 500 !important;
  display: none !important;
}
@media (min-width: 640px) { .yc-reviews-rating-text { display: block !important; } }

.yc-reviews-marquee-wrap {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}
.yc-reviews-marquee-wrap::before,
.yc-reviews-marquee-wrap::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; bottom: 0 !important;
  width: 32px !important;
  z-index: 10 !important;
  pointer-events: none !important;
}
@media (min-width: 768px) {
  .yc-reviews-marquee-wrap::before,
  .yc-reviews-marquee-wrap::after { width: 96px !important; }
}
.yc-reviews-marquee-wrap::before {
  left: 0 !important;
  background: linear-gradient(to right, #f8fafc, transparent) !important;
}
.yc-reviews-marquee-wrap::after {
  right: 0 !important;
  background: linear-gradient(to left, #f8fafc, transparent) !important;
}
.yc-reviews-track {
  display: flex !important;
  animation: yc-reviews-scroll 75s linear infinite !important;
  width: max-content !important;
}
.yc-reviews-track:hover { animation-play-state: paused !important; }
@keyframes yc-reviews-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.yc-reviews-set {
  display: flex !important;
  gap: 16px !important;
  padding: 0 8px !important;
}

/* Review card: w-70 sm:w-[320px] rounded-xl border p-4 shadow-sm hover:shadow-md */
.yc-review-card {
  width: 280px !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--yc-slate-200) !important;
  padding: 16px !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
  cursor: default !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  transition: box-shadow 0.2s !important;
}
@media (min-width: 640px) { .yc-review-card { width: 320px !important; } }
.yc-review-card:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,.08) !important; }

.yc-review-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}
.yc-review-author-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
/* Avatar: w-9 h-9 rounded-full gradient */
.yc-review-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.12) !important;
}
.yc-review-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--yc-slate-900) !important;
  line-height: 1.2 !important;
  display: block !important;
}
.yc-review-role {
  font-size: 10px !important;
  color: var(--yc-slate-500) !important;
  display: block !important;
  margin-top: 1px !important;
}
.yc-review-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  text-align: right !important;
}
.yc-review-product {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--yc-blue) !important;
  max-width: 100px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
  margin-bottom: 2px !important;
}
.yc-review-stars { display: flex !important; gap: 2px !important; }
/* Review text: text-xs italic leading-relaxed line-clamp-3 */
.yc-review-text {
  font-size: 12px !important;
  color: var(--yc-slate-600) !important;
  line-height: 1.625 !important;
  font-style: italic !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  flex: 1 !important;
  margin: 0 !important;
}
.yc-review-footer {
  margin-top: 12px !important;
  padding-top: 8px !important;
  border-top: 1px solid #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.yc-review-verified {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  color: var(--yc-slate-400) !important;
  font-weight: 500 !important;
}
.yc-review-date {
  font-size: 9px !important;
  color: var(--yc-slate-400) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  opacity: 0.7 !important;
}

/* ============================================================
   FAQ — max-w-4xl mx-auto, 2-col grid gap-2 md:gap-3
   React: border border-slate-200 rounded-lg
          button: p-3 md:p-3.5 font-semibold text-slate-800 text-xs md:text-sm
          answer: px-3 pb-3 text-slate-600 text-xs leading-relaxed bg-slate-50/50
   ============================================================ */
.yc-faq-section {
  padding: 24px 0 !important;
  background: #ffffff !important;
  border-top: 1px solid var(--yc-slate-100) !important;
}
@media (min-width: 768px) { .yc-faq-section { padding: 32px 0 !important; } }
.yc-faq-inner {
  max-width: 896px !important;
  margin: 0 auto !important;
  padding: 0 12px !important;
}
@media (min-width: 640px) { .yc-faq-inner { padding: 0 16px !important; } }
@media (min-width: 768px) { .yc-faq-inner { padding: 0 24px !important; } }
.yc-faq-heading {
  text-align: center !important;
  margin-bottom: 16px !important;
}
@media (min-width: 768px) { .yc-faq-heading { margin-bottom: 24px !important; } }
.yc-faq-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--yc-slate-900) !important;
  margin: 0 0 4px !important;
}
@media (min-width: 768px) { .yc-faq-title { font-size: 20px !important; } }
.yc-faq-subtitle {
  font-size: 12px !important;
  color: var(--yc-slate-600) !important;
  margin: 0 !important;
}
.yc-faq-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}
@media (min-width: 768px) {
  .yc-faq-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}
.yc-faq-item {
  border: 1px solid var(--yc-slate-200) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s !important;
}
.yc-faq-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; }
.yc-faq-btn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px !important;
  text-align: left !important;
  background: #ffffff !important;
  cursor: pointer !important;
  border: none !important;
  gap: 8px !important;
  transition: background 0.15s !important;
}
@media (min-width: 768px) { .yc-faq-btn { padding: 14px !important; } }
.yc-faq-btn:hover { background: var(--yc-slate-50) !important; }
.yc-faq-question {
  font-weight: 600 !important;
  color: var(--yc-slate-800) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  flex: 1 !important;
  text-align: left !important;
}
@media (min-width: 768px) { .yc-faq-question { font-size: 14px !important; } }
.yc-icon-down { color: var(--yc-slate-400) !important; flex-shrink: 0 !important; }
.yc-icon-up   { color: var(--yc-blue) !important; flex-shrink: 0 !important; display: none; }
.yc-faq-answer {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s ease !important;
}
.yc-faq-answer-inner {
  padding: 0 12px 12px !important;
  color: var(--yc-slate-600) !important;
  font-size: 12px !important;
  line-height: 1.625 !important;
  background: rgba(248,250,252,0.5) !important;
}
@media (min-width: 768px) { .yc-faq-answer-inner { padding: 0 14px 14px !important; } }

/* ============================================================
   NEWSLETTER — bg-gradient-to-br from-blue-50 via-indigo-50
   Inner card: bg-white/80 backdrop-blur-xl rounded-2xl p-5
   Mail icon box: w-12 h-12 rounded-xl bg-blue-600 gradient
   Input: rounded-xl bg-slate-100 border text-sm
   Button: rounded-xl from-blue-600 to-indigo-600 text-sm font-semibold
   ============================================================ */
.yc-newsletter-section {
  position: relative !important;
  background: linear-gradient(to bottom right, #eff6ff, #eef2ff, #eff6ff) !important;
  border-top: 1px solid #bfdbfe !important;
  border-bottom: 1px solid #bfdbfe !important;
  padding: 32px 0 !important;
  overflow: hidden !important;
}
.yc-newsletter-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 0.05 !important;
  background-image: radial-gradient(circle at 2px 2px, currentColor 1px, transparent 0) !important;
  background-size: 32px 32px !important;
  pointer-events: none !important;
}
.yc-newsletter-inner {
  max-width: 1024px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  position: relative !important;
  z-index: 1 !important;
}
.yc-newsletter-card {
  background: rgba(255,255,255,0.8) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 16px !important;
  border: 1px solid #bfdbfe !important;
  padding: 20px !important;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.04) !important;
}
.yc-newsletter-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
}
@media (min-width: 768px) {
  .yc-newsletter-body {
    flex-direction: row !important;
    justify-content: space-between !important;
  }
}
.yc-newsletter-text-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  text-align: left !important;
}
.yc-newsletter-icon-box {
  display: none !important;
  width: 48px !important; height: 48px !important;
  background: linear-gradient(to bottom right, #3b82f6, #4f46e5) !important;
  border-radius: 12px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 6px -1px rgba(59,130,246,.3) !important;
}
@media (min-width: 640px) { .yc-newsletter-icon-box { display: flex !important; } }
.yc-newsletter-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--yc-slate-900) !important;
  margin: 0 0 2px !important;
  letter-spacing: -0.01em !important;
}
.yc-newsletter-subtitle {
  font-size: 12px !important;
  color: var(--yc-slate-500) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}
.yc-newsletter-form-wrap {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 6px !important;
}
@media (min-width: 768px) { .yc-newsletter-form-wrap { width: auto !important; } }
.yc-newsletter-form {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
}
@media (min-width: 768px) { .yc-newsletter-form { width: auto !important; } }
.yc-newsletter-input-wrap {
  position: relative !important;
  flex: 1 !important;
}
@media (min-width: 768px) { .yc-newsletter-input-wrap { width: 288px !important; flex: none !important; } }
.yc-newsletter-mail-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--yc-slate-500) !important;
  pointer-events: none !important;
}
.yc-newsletter-input {
  width: 100% !important;
  padding: 10px 12px 10px 36px !important;
  border-radius: 12px !important;
  background: var(--yc-slate-100) !important;
  border: 1px solid var(--yc-slate-200) !important;
  color: var(--yc-slate-900) !important;
  font-size: 14px !important;
  outline: none !important;
  transition: background 0.15s, border-color 0.15s !important;
  box-sizing: border-box !important;
}
.yc-newsletter-input:focus {
  background: #ffffff !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
}
.yc-newsletter-btn {
  padding: 10px 20px !important;
  background: linear-gradient(to right, #2563eb, #4f46e5) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 6px -1px rgba(59,130,246,.3) !important;
  transition: box-shadow 0.2s, transform 0.1s !important;
  flex-shrink: 0 !important;
}
.yc-newsletter-btn:hover { box-shadow: 0 8px 15px -3px rgba(59,130,246,.4) !important; }
.yc-newsletter-btn:active { transform: scale(0.97) !important; }
.yc-newsletter-status { font-size: 12px !important; display: none !important; margin-top: 4px !important; }
.yc-newsletter-status.success { color: #065f46 !important; display: block !important; }
.yc-newsletter-status.error   { color: #991b1b !important; display: block !important; }

/* ============================================================
   SHOP PAGE
   ============================================================ */
.yc-shop-page {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}
@media (min-width: 640px) { .yc-shop-page { padding: 0 24px !important; } }

.yc-shop-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 0 !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--yc-slate-200) !important;
  flex-wrap: wrap !important;
}
.yc-shop-title-row { display: flex !important; align-items: center !important; gap: 8px !important; }
.yc-shop-title { font-size: 18px !important; font-weight: 700 !important; color: var(--yc-slate-900) !important; margin: 0 !important; }
.yc-total-badge {
  font-size: 10px !important;
  background: var(--yc-slate-100) !important;
  color: var(--yc-slate-500) !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  font-weight: 500 !important;
}
.yc-sort-wrap { display: flex !important; align-items: center !important; gap: 8px !important; }
.yc-sort-select {
  padding: 6px 10px !important;
  border: 1px solid var(--yc-slate-200) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  color: var(--yc-slate-700) !important;
  background: #ffffff !important;
  cursor: pointer !important;
  outline: none !important;
}
.yc-mobile-filter-btn {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border: 1px solid var(--yc-slate-200) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: #ffffff !important;
  cursor: pointer !important;
}
@media (min-width: 768px) { .yc-mobile-filter-btn { display: none !important; } }

.yc-shop-body { display: flex !important; gap: 24px !important; padding-top: 16px !important; }

.yc-filter-sidebar {
  width: 256px !important;
  flex-shrink: 0 !important;
  display: none !important;
}
@media (min-width: 768px) { .yc-filter-sidebar { display: block !important; } }

.yc-filter-section { margin-bottom: 20px !important; }
.yc-filter-label { font-size: 11px !important; font-weight: 700 !important; color: var(--yc-slate-500) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-bottom: 8px !important; display: block !important; }
.yc-cat-btn {
  display: block !important; width: 100% !important;
  text-align: left !important; padding: 6px 10px !important;
  border-radius: 6px !important; font-size: 13px !important;
  color: var(--yc-slate-700) !important; background: transparent !important;
  border: none !important; cursor: pointer !important; margin-bottom: 2px !important;
  transition: background 0.15s, color 0.15s !important;
}
.yc-cat-btn:hover { background: var(--yc-slate-100) !important; }
.yc-cat-btn.active { background: #eff6ff !important; color: var(--yc-blue) !important; font-weight: 600 !important; }
.yc-price-inputs { display: flex !important; gap: 8px !important; margin-top: 8px !important; }
.yc-price-input {
  flex: 1 !important; padding: 6px 8px !important;
  border: 1px solid var(--yc-slate-200) !important; border-radius: 6px !important;
  font-size: 12px !important; color: var(--yc-slate-700) !important;
  width: 100% !important; outline: none !important;
}
.yc-apply-price-btn, .yc-clear-btn {
  width: 100% !important; padding: 6px !important;
  border-radius: 6px !important; font-size: 12px !important;
  font-weight: 600 !important; cursor: pointer !important;
  margin-top: 6px !important; border: none !important;
}
.yc-apply-price-btn { background: var(--yc-blue) !important; color: white !important; }
.yc-clear-btn { background: var(--yc-slate-100) !important; color: var(--yc-slate-700) !important; }

.yc-shop-main { flex: 1 !important; min-width: 0 !important; }
.yc-shop-grid .woocommerce ul.products { grid-template-columns: repeat(2,1fr) !important; }
@media (min-width: 1024px) { .yc-shop-grid .woocommerce ul.products { grid-template-columns: repeat(3,1fr) !important; } }
@media (min-width: 1280px) { .yc-shop-grid .woocommerce ul.products { grid-template-columns: repeat(4,1fr) !important; } }

/* Drawer */
.yc-drawer-overlay {
  display: none !important;
  position: fixed !important; inset: 0 !important;
  background: rgba(0,0,0,.5) !important; z-index: 50 !important;
}
.yc-drawer-overlay.open { display: block !important; }
.yc-drawer-panel {
  position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 280px !important; background: white !important; z-index: 51 !important;
  transform: translateX(100%) !important;
  transition: transform 0.3s ease !important;
  overflow-y: auto !important; padding: 16px !important;
}
.yc-drawer-panel.open { transform: translateX(0) !important; }

/* Pagination */
#yc-pagination { display: flex !important; gap: 4px !important; margin-top: 24px !important; justify-content: center !important; }
.yc-page-btn {
  padding: 6px 12px !important; border: 1px solid var(--yc-slate-200) !important;
  border-radius: 6px !important; font-size: 13px !important; cursor: pointer !important;
  background: white !important; color: var(--yc-slate-700) !important;
  transition: background 0.15s !important;
}
.yc-page-btn:hover { background: var(--yc-slate-100) !important; }
.yc-page-btn.active { background: var(--yc-blue) !important; color: white !important; border-color: var(--yc-blue) !important; }

/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */
.yc-breadcrumbs { font-size: 12px !important; color: var(--yc-slate-500) !important; margin-bottom: 12px !important; display: flex !important; align-items: center !important; gap: 4px !important; flex-wrap: wrap !important; }
.yc-breadcrumb-sep { color: var(--yc-slate-400) !important; }
.yc-breadcrumb-current { color: var(--yc-slate-900) !important; font-weight: 600 !important; }
.yc-single-rating { display: flex !important; align-items: center !important; gap: 6px !important; margin-bottom: 8px !important; }
.yc-single-rating .yc-stars { gap: 2px !important; }
.yc-rating-label { font-size: 12px !important; color: var(--yc-slate-500) !important; }
.yc-delivery-badge { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 6px 12px !important; background: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 600 !important; color: #15803d !important; margin-bottom: 8px !important; }
.yc-delivery-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #22c55e !important; flex-shrink: 0 !important; animation: yc-pulse-dot 2s ease-in-out infinite !important; }
@keyframes yc-pulse-dot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.2);opacity:.7} }
.yc-single-save-badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 10px !important; background: #fef9c3 !important; border: 1px solid #fde68a !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 600 !important; color: #92400e !important; margin-bottom: 12px !important; }
.yc-spec-grid { display: grid !important; grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; margin-bottom: 16px !important; }
.yc-spec-pill { background: var(--yc-slate-50) !important; border: 1px solid var(--yc-slate-200) !important; border-radius: 8px !important; padding: 10px !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.yc-spec-label { font-size: 10px !important; color: var(--yc-slate-500) !important; font-weight: 500 !important; }
.yc-spec-value { font-size: 12px !important; color: var(--yc-slate-900) !important; font-weight: 600 !important; }
.yc-trust-strip { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 12px !important; }
.yc-trust-pill { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 4px 10px !important; background: var(--yc-slate-50) !important; border: 1px solid var(--yc-slate-200) !important; border-radius: 9999px !important; font-size: 11px !important; color: var(--yc-slate-600) !important; font-weight: 500 !important; }
.yc-payment-seal { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; margin-top: 12px !important; }
.yc-payment-secured { font-size: 11px !important; color: var(--yc-slate-500) !important; }
.yc-payment-badge { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 3px 8px !important; background: var(--yc-slate-100) !important; border: 1px solid var(--yc-slate-200) !important; border-radius: 4px !important; font-size: 11px !important; color: var(--yc-slate-600) !important; font-weight: 500 !important; }

/* WC Tabs — styled like React tab bar */
.woocommerce-tabs ul.tabs { border-bottom: 2px solid var(--yc-slate-200) !important; margin-bottom: 20px !important; padding: 0 !important; list-style: none !important; display: flex !important; gap: 0 !important; }
.woocommerce-tabs ul.tabs li { border: none !important; border-radius: 0 !important; margin: 0 !important; background: transparent !important; }
.woocommerce-tabs ul.tabs li a { padding: 10px 16px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--yc-slate-500) !important; border-bottom: 2px solid transparent !important; margin-bottom: -2px !important; display: block !important; }
.woocommerce-tabs ul.tabs li.active a { color: var(--yc-blue) !important; border-bottom-color: var(--yc-blue) !important; }

/* ============================================================
   CARD PRICE ROW FIX — MRP + Save inline with flex
   ============================================================ */

/* Override: del and save-badge on same line */
.product-block .caption .price {
  display: flex !important;
  flex-direction: column !important;
  margin-top: auto !important;
  padding-top: 8px !important;
  border-top: 1px solid #f1f5f9 !important;
}

/* Sale price row */
.product-block .price ins {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1 !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 4px !important;
}

/* MRP + save in one flex row */
.product-block .price .yc-mrp-save-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.product-block .price del {
  font-size: 10px !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
  display: inline !important;
}
.yc-save-row { display: inline !important; margin: 0 !important; }
.yc-save-badge {
  display: inline-flex !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #16a34a !important;
  background: #f0fdf4 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  line-height: 1.5 !important;
  vertical-align: middle !important;
}

/* ============================================================
   ACTION BUTTON ROW — exact React sizing
   flex gap-2 mt-2 — Add cart flex-1 py-2 text-xs rounded-lg
                     Compare w-9 h-9 rounded-lg border
   ============================================================ */
.product-block .group-buttons {
  display: flex !important;
  gap: 8px !important;
  align-items: stretch !important;
  margin-top: 8px !important;
}
.product-block .add-cart { flex: 1 !important; min-width: 0 !important; }
.product-block .add-cart a.button,
.product-block .add-cart a.add_to_cart_button,
.product-block a.yc-add-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  background: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  width: 100% !important;
  height: 36px !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 6px -1px rgba(37,99,235,.25) !important;
  transition: background 0.15s, transform 0.1s !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.product-block .add-cart a.button:hover { background: #1d4ed8 !important; }
.product-block .add-cart a.button:active { transform: scale(0.95) !important; }

.yc-compare-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #475569 !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, color 0.15s !important;
}
.yc-compare-btn:hover { border-color: #cbd5e1 !important; color: #0f172a !important; }

/* Hide all old Urna action overlays on cards */
.product-block .tbay-quick-view,
.product-block .product-loop-overlay,
.product-block .loop-product-link-title,
.product-block .add-to-links { display: none !important; }

/* ============================================================
   CARD IMAGE — fix Urna absolute link blocking aspect-ratio
   ============================================================ */
.woocommerce .product .product-block figure.image,
.product-block figure.image {
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  background: #EEF2FF !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  padding: 8px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.product-block figure.image a.product-image {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}
.product-block figure.image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  display: block !important;
  transition: transform 0.5s ease !important;
}
.product-block:hover figure.image img { transform: scale(1.05) !important; }

/* ============================================================
   GRID — Urna overrides
   ============================================================ */
/* Kill Urna .columns-4 float layout completely */
.woocommerce .columns-4 li.product,
ul.products.columns-4 li.product {
  width: auto !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   MOBILE (<640px)
   ============================================================ */
@media (max-width: 639px) {
  .product-block .caption             { padding: 8px !important; }
  .product-block .caption h3.name a   { font-size: 11px !important; }
  .product-block .price ins           { font-size: 14px !important; }
  .product-block .add-cart a.button   { font-size: 11px !important; height: 32px !important; padding: 0 8px !important; }
  .yc-compare-btn                     { width: 32px !important; height: 32px !important; min-width: 32px !important; }
  .yc-feat-pill                       { font-size: 8px !important; padding: 1px 4px !important; }
  .yc-save-badge                      { font-size: 8px !important; }
  span.onsale.yc-deal-badge           { font-size: 8px !important; padding: 2px 4px !important; }
}