/* ============================================
   LABO Perfume — Sections Skin v1
   שדרוג ויזואלי לסקציות: Cart, Bundles, Pricing, FAQ, Reviews, Contact
   + תיקון כפתורי גדלים (.sbtn)
   ============================================ */

/* --- 0. תיקון כפתורי גדלים (.sbtn) — שלא ירשו את עיצוב הסל --- */
.pcard .sizes .sbtn,
.pcard button.sbtn {
  background: var(--labo-white, #FFFFFF) !important;
  color: var(--labo-black, #0A0A0A) !important;
  border: 1.5px solid var(--labo-gray-300, #D4D4D4) !important;
  border-radius: var(--radius-md, 8px) !important;
  font-family: var(--font-family, 'Heebo', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  min-height: 36px !important;
  cursor: pointer;
  transition: all var(--transition-fast, 150ms ease);
  letter-spacing: 0;
  text-align: center;
  justify-content: center !important;
  box-shadow: none !important;
}
.pcard .sizes .sbtn:hover {
  border-color: var(--labo-black, #0A0A0A) !important;
  background: var(--labo-cream, #F5F1EA) !important;
  transform: none !important;
}
.pcard .sizes .sbtn.sel,
.pcard .sizes .sbtn.selected,
.pcard .sizes .sbtn[aria-pressed="true"] {
  background: var(--labo-black, #0A0A0A) !important;
  color: var(--labo-gold, #C9A961) !important;
  border-color: var(--labo-black, #0A0A0A) !important;
}

/* Re-stack sizes vertically with cleaner layout */
.pcard .sizes {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px !important;
  margin: var(--sp-2, 8px) 0 var(--sp-3, 16px) 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.pcard .sizes > * { border-bottom: none !important; padding: 0 !important; }

/* --- 1. Cart Drawer — סל צדדי --- */
#cartDrawer {
  background: var(--labo-white, #FFFFFF) !important;
  border-left: 1px solid var(--labo-gray-300, #D4D4D4) !important;
  box-shadow: -8px 0 32px rgba(10,10,10,0.12) !important;
  font-family: var(--font-family, 'Heebo', sans-serif) !important;
  width: 360px !important;
  max-width: 90vw !important;
}
#cartDrawer h2, #cartDrawer h3 {
  font-family: var(--font-family, 'Heebo', sans-serif) !important;
  color: var(--labo-black, #0A0A0A) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}
#cartDrawer button {
  font-family: var(--font-family, 'Heebo', sans-serif) !important;
  border-radius: var(--radius-md, 8px) !important;
  transition: all var(--transition-base, 250ms ease);
  font-weight: 600 !important;
}
#cartDrawer button[onclick*="checkout"],
#cartDrawer .cart-checkout,
#cartDrawer .checkout-btn {
  background: var(--labo-black, #0A0A0A) !important;
  color: var(--labo-white, #FFFFFF) !important;
  border: 1px solid var(--labo-black, #0A0A0A) !important;
  padding: 14px 20px !important;
  width: 100% !important;
  min-height: 48px;
}
#cartDrawer button[onclick*="checkout"]:hover,
#cartDrawer .cart-checkout:hover,
#cartDrawer .checkout-btn:hover {
  background: var(--labo-gold, #C9A961) !important;
  color: var(--labo-black, #0A0A0A) !important;
  border-color: var(--labo-gold, #C9A961) !important;
}

/* --- 2. Bundles (.bcard) --- */
.bgrid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--sp-4, 24px) !important;
}
@media (min-width: 640px)  { .bgrid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) { .bgrid { grid-template-columns: repeat(4, 1fr) !important; gap: var(--sp-5, 32px) !important; } }

.bcard {
  background: var(--labo-white, #FFFFFF) !important;
  border: 1px solid var(--labo-gray-300, #D4D4D4) !important;
  border-radius: var(--radius-lg, 16px) !important;
  padding: var(--sp-5, 32px) var(--sp-4, 24px) !important;
  font-family: var(--font-family, 'Heebo', sans-serif) !important;
  transition: transform var(--transition-base, 250ms ease), box-shadow var(--transition-base, 250ms ease), border-color var(--transition-base, 250ms ease);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.bcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(10,10,10,0.12));
  border-color: var(--labo-black, #0A0A0A);
}
.bcard.bcard-featured {
  background: linear-gradient(180deg, #FFFCF6 0%, var(--labo-white, #FFFFFF) 30%) !important;
  border-color: var(--labo-gold, #C9A961) !important;
  border-width: 1.5px !important;
}
.bcard-pop {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--labo-gold, #C9A961);
  color: var(--labo-black, #0A0A0A);
  border-radius: var(--radius-pill, 999px);
  text-transform: uppercase;
}
.bname {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--labo-black, #0A0A0A) !important;
  letter-spacing: 0.04em;
  text-align: center;
  margin: 8px 0 4px !important;
}
.bqty {
  font-size: 14px !important;
  color: var(--labo-gray-600, #555555) !important;
  text-align: center;
  margin-bottom: var(--sp-2, 8px) !important;
}
.btags { text-align: center; margin-bottom: 4px; }
.btag {
  display: inline-block;
  font-size: 12px !important;
  background: var(--labo-cream, #F5F1EA) !important;
  color: var(--labo-gray-900, #1A1A1A) !important;
  border: 1px solid var(--labo-gray-300, #D4D4D4) !important;
  border-radius: var(--radius-pill, 999px);
  padding: 4px 10px;
  margin: 2px;
}
.btotal {
  font-size: 13px !important;
  color: var(--labo-gray-600, #555555) !important;
  text-align: center;
  margin-top: 4px;
}
.bprice {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: var(--labo-black, #0A0A0A) !important;
  text-align: center;
  margin: var(--sp-3, 16px) 0 !important;
  line-height: 1.1;
}
.bship {
  font-size: 13px !important;
  color: #2D7D32 !important;
  text-align: center;
  font-weight: 600 !important;
}
.bsave {
  font-size: 13px !important;
  color: var(--labo-gold-dark, #A68A4A) !important;
  text-align: center;
  font-weight: 500 !important;
  margin-top: 4px !important;
}
.bcard a, .bcard button {
  margin-top: auto !important;
  background: var(--labo-black, #0A0A0A) !important;
  color: var(--labo-white, #FFFFFF) !important;
  border: 1px solid var(--labo-black, #0A0A0A) !important;
  border-radius: var(--radius-md, 8px) !important;
  padding: 12px 20px !important;
  font-family: var(--font-family, 'Heebo', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base, 250ms ease);
  display: inline-block;
  width: 100%;
  min-height: 44px;
  margin-top: var(--sp-3, 16px);
}
.bcard a:hover, .bcard button:hover {
  background: var(--labo-gold, #C9A961) !important;
  color: var(--labo-black, #0A0A0A) !important;
  border-color: var(--labo-gold, #C9A961) !important;
}

/* --- 3. Pricing section --- */
.pricing-sec, section#pricing {
  background: var(--labo-cream, #F5F1EA) !important;
  padding: var(--sp-7, 64px) var(--sp-4, 24px) !important;
}
@media (min-width: 1024px) {
  .pricing-sec, section#pricing { padding: var(--sp-9, 120px) var(--sp-5, 32px) !important; }
}
.sec-title {
  font-family: var(--font-family, 'Heebo', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  color: var(--labo-gold, #C9A961) !important;
  text-align: center;
  margin-bottom: var(--sp-3, 16px) !important;
}
.pricing-sec h2, section#pricing h2,
.bundles-sec h2, section#bundles h2,
.faq-sec h2, .reviews-sec h2, .contact-sec h2 {
  font-family: var(--font-family, 'Heebo', sans-serif) !important;
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  font-weight: 800 !important;
  text-align: center;
  color: var(--labo-black, #0A0A0A) !important;
  margin-bottom: var(--sp-5, 32px) !important;
  letter-spacing: -0.02em;
}

/* Pricing table */
.ptable {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--sp-3, 16px) !important;
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 768px) { .ptable { grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; } }
.ptable-inner {
  display: contents !important;
}
.pcol {
  background: var(--labo-white, #FFFFFF) !important;
  border: 1px solid var(--labo-gray-300, #D4D4D4) !important;
  border-radius: var(--radius-lg, 16px) !important;
  padding: var(--sp-5, 32px) var(--sp-4, 24px) !important;
  text-align: center;
  font-family: var(--font-family, 'Heebo', sans-serif) !important;
  transition: all var(--transition-base, 250ms ease);
}
@media (min-width: 768px) {
  .pcol { border-radius: 0 !important; border-right: 0 !important; }
  .pcol:first-child { border-top-left-radius: var(--radius-lg, 16px) !important; border-bottom-left-radius: var(--radius-lg, 16px) !important; }
  .pcol:last-child  { border-top-right-radius: var(--radius-lg, 16px) !important; border-bottom-right-radius: var(--radius-lg, 16px) !important; border-right: 1px solid var(--labo-gray-300, #D4D4D4) !important; }
}
.pcol.featured {
  background: var(--labo-black, #0A0A0A) !important;
  border-color: var(--labo-black, #0A0A0A) !important;
  color: var(--labo-white, #FFFFFF) !important;
  position: relative;
  transform: scale(1.02);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(10,10,10,0.12));
  z-index: 1;
}
.pcol.featured * { color: var(--labo-white, #FFFFFF) !important; }
.pcol-qty   { font-size: 1.25rem !important; font-weight: 800 !important; margin-bottom: 8px !important; letter-spacing: 0.02em; }
.pcol-size  { font-size: 13px !important; color: var(--labo-gray-600, #555555) !important; margin-bottom: var(--sp-3, 16px) !important; text-transform: uppercase; letter-spacing: 0.1em; }
.pcol.featured .pcol-size { color: var(--labo-gold, #C9A961) !important; }
.pcol-price { font-size: 2rem !important; font-weight: 800 !important; margin: 8px 0 !important; letter-spacing: -0.02em; line-height: 1.1; }
.pcol.featured .pcol-price { color: var(--labo-gold, #C9A961) !important; }
.pcol-ship  { font-size: 13px !important; color: #2D7D32 !important; margin-top: var(--sp-2, 8px); font-weight: 600 !important; }
.pcol.featured .pcol-ship { color: #4CAF50 !important; }
.pcol-save  { font-size: 13px !important; color: var(--labo-gold-dark, #A68A4A) !important; font-weight: 500 !important; }

/* --- 4. Bundles section wrapper --- */
.bundles-sec, section#bundles {
  background: var(--labo-white, #FFFFFF) !important;
  padding: var(--sp-7, 64px) var(--sp-4, 24px) !important;
}
@media (min-width: 1024px) {
  .bundles-sec, section#bundles { padding: var(--sp-9, 120px) var(--sp-5, 32px) !important; }
}

/* --- 5. FAQ --- */
.faq-sec, section#faq {
  background: var(--labo-cream, #F5F1EA) !important;
  padding: var(--sp-7, 64px) var(--sp-4, 24px) !important;
}
.faq-sec details, section#faq details {
  background: var(--labo-white, #FFFFFF) !important;
  border: 1px solid var(--labo-gray-300, #D4D4D4) !important;
  border-radius: var(--radius-md, 8px) !important;
  margin-bottom: 12px;
  padding: var(--sp-3, 16px) var(--sp-4, 24px);
  font-family: var(--font-family, 'Heebo', sans-serif) !important;
  transition: border-color var(--transition-base, 250ms ease);
}
.faq-sec details[open], section#faq details[open] {
  border-color: var(--labo-gold, #C9A961) !important;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(10,10,10,0.05));
}
.faq-sec summary, section#faq summary {
  font-weight: 700 !important;
  cursor: pointer;
  color: var(--labo-black, #0A0A0A) !important;
  list-style: none;
  position: relative;
  padding-left: 28px;
}
.faq-sec summary::-webkit-details-marker, section#faq summary::-webkit-details-marker { display: none; }
.faq-sec summary::after, section#faq summary::after {
  content: '+';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 300;
  color: var(--labo-gold, #C9A961);
  transition: transform var(--transition-base, 250ms ease);
}
.faq-sec details[open] summary::after, section#faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

/* --- 6. Reviews --- */
.reviews-sec, section#reviews {
  background: var(--labo-white, #FFFFFF) !important;
  padding: var(--sp-7, 64px) var(--sp-4, 24px) !important;
}
.rgrid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--sp-4, 24px) !important;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 768px)  { .rgrid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) { .rgrid { grid-template-columns: repeat(3, 1fr) !important; } }
.rgrid > * {
  background: var(--labo-cream, #F5F1EA) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-lg, 16px) !important;
  padding: var(--sp-4, 24px) !important;
  font-family: var(--font-family, 'Heebo', sans-serif) !important;
  transition: border-color var(--transition-base, 250ms ease), transform var(--transition-base, 250ms ease);
}
.rgrid > *:hover {
  border-color: var(--labo-gold, #C9A961) !important;
  transform: translateY(-2px);
}

/* --- 7. Contact --- */
.contact-sec, section#contact {
  background: var(--labo-black, #0A0A0A) !important;
  color: var(--labo-white, #FFFFFF) !important;
  padding: var(--sp-7, 64px) var(--sp-4, 24px) !important;
}
.contact-sec h2, section#contact h2 { color: var(--labo-white, #FFFFFF) !important; }
.contact-sec a, section#contact a { color: var(--labo-gold, #C9A961) !important; }
.contact-sec a:hover, section#contact a:hover { color: var(--labo-white, #FFFFFF) !important; }