/* ══════════════════════════════════════════════════════════════════════════
   SPLATCHI COUTURE — Bug Fix CSS v1.0 (2026-05-27)

   This file ONLY fixes known bugs. It does NOT reset or override
   anything that's already working. Loaded AFTER splatchi-custom.css.

   To change a value site-wide, edit the variable in :root.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --sc-gold: #D4AF37;
  --sc-gold-hover: #e9c84e;
  --sc-card-radius: 16px;
  --sc-btn-radius: 8px;
  --sc-card-padding: 20px;
}


/* ═══════════════════════════════════════════════════════════════════════
   BUG 1: BUTTON HOVER — gold text on gold bg (unreadable)
   Fix: targeted selectors for actual buttons ONLY
   ═══════════════════════════════════════════════════════════════════════ */
button[type="submit"]:hover,
input[type="submit"]:hover,
.single_add_to_cart_button:hover,
.add_to_cart_button:hover,
a.checkout-button:hover,
.wc-forward:hover,
.forminator-button:hover,
.forminator-btn-submit:hover,
.wpcf7-submit:hover,
ul.products li.product .button:hover,
ul.products li.product a.button:hover,
.elementor-button:hover,
article.card a.buy-btn:hover,
article.card a[href*="add-to-cart"]:hover {
  background: var(--sc-gold) !important;
  color: #000000 !important;
  border-color: var(--sc-gold) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   BUG 2: FAQ QUESTION HOVER — gold background on .qbtn button
   The Shoptimizer theme styles all button:hover with gold bg.
   The FAQ uses <button class="qbtn"> for expand/collapse.
   ═══════════════════════════════════════════════════════════════════════ */
.faq .qbtn,
.faq .qbtn:hover,
.faq .qbtn:focus,
.faq .qbtn:active,
.faq button.qbtn,
.sbfq .qbtn,
.sbfq .qbtn:hover,
.sbfq .qbtn:focus,
.sbfq button.qbtn {
  all: unset !important;
  cursor: pointer !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #F2F2F2 !important;
  width: 100% !important;
  text-align: left !important;
  display: block !important;
}
.faq header:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}
.sbfq .toggle-all {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #a1a1a1 !important;
  border-radius: 20px !important;
}
.sbfq .toggle-all:hover {
  border-color: var(--sc-gold) !important;
  color: var(--sc-gold) !important;
  background: transparent !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   BUG 3: SCROLL-TO-TOP — was square, ugly gold hover
   ═══════════════════════════════════════════════════════════════════════ */
[id^="sfo1-"] .sfo1-backtop {
  border-radius: 50% !important;
}
[id^="sfo1-"] .sfo1-backtop:hover {
  background: rgba(212, 175, 55, 0.15) !important;
  border-radius: 50% !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   BUG 4: FOOTER "Explore Our Collections" — turned into bordered button
   Fix: ensure CTA text links stay as text links
   ═══════════════════════════════════════════════════════════════════════ */
.sfo1-cta-link a,
.scbf5 .cta a,
article.card .cta a,
.view-all a {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.sfo1-cta-link a:hover,
.scbf5 .cta a:hover,
article.card .cta a:hover,
.view-all a:hover {
  background: none !important;
  border: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   BUG 5: BMW tow truck hover on Collection page
   (Handled via WP-CLI: gallery image added to BMW products)
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   BUG 6: NFT "Revenue Sharing" kicker — red instead of gold
   ═══════════════════════════════════════════════════════════════════════ */
[class*="nft-body"] .kicker {
  color: var(--sc-gold) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   BUG 7: NFT Provenance section text cut off
   ═══════════════════════════════════════════════════════════════════════ */
[class*="nft-body-four"] .wrap,
[class*="nft-body-four"] .content {
  padding-bottom: 48px !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   BUG 8: Caption Family section (broken wc-archive-products)
   ═══════════════════════════════════════════════════════════════════════ */
.elementor-widget-wc-archive-products {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   BUG 9-10: CARD CONSISTENCY — border-radius + padding
   ═══════════════════════════════════════════════════════════════════════ */
/* Card border-radius */
article.card {
  border-radius: var(--sc-card-radius) !important;
  overflow: hidden !important;
}
ul.products li.product {
  border-radius: var(--sc-card-radius) !important;
  overflow: hidden !important;
}

/* Card images — rounded top corners only */
article.card .imgwrap,
article.card .media,
article.card .image {
  overflow: hidden !important;
}

/* Three Gateways / Three Creatives card content padding */
.scbf5 .card .card-title,
.scbf5 .card .subline,
.scbf5 .card .body,
.scbf5 .card .stats,
.scbf5 .card .cta {
  padding-left: var(--sc-card-padding) !important;
  padding-right: var(--sc-card-padding) !important;
}
.scbf5 .card .card-title { padding-top: var(--sc-card-padding) !important; }
.scbf5 .card .cta { padding-bottom: var(--sc-card-padding) !important; }

/* Service cards (sbs10) padding */
.sbs10-card-title { padding: 16px 16px 4px !important; }
.sbs10-card-desc { padding: 0 16px 16px !important; }

/* WooCommerce Related Products — dark bg, not white */
body ul.products li.product:hover,
body .related.products ul.products li.product:hover {
  background: #1a1a1a !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   BUG 11: BLOG — Gutenberg block styling
   ═══════════════════════════════════════════════════════════════════════ */
.wp-block-post {
  background: #111 !important;
  border: 1px solid rgba(212,175,55,0.08) !important;
  border-radius: var(--sc-card-radius) !important;
  overflow: hidden !important;
  padding: 0 0 28px 0 !important;
  margin-bottom: 32px !important;
}
.wp-block-post:hover {
  border-color: rgba(212,175,55,0.3) !important;
}
h2.wp-block-post-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  padding: 24px 28px 0 !important;
  margin: 0 0 12px !important;
}
h2.wp-block-post-title a { color: var(--sc-gold) !important; }
h2.wp-block-post-title a:hover { color: var(--sc-gold-hover) !important; }
.wp-block-post-excerpt,
.wp-block-post-excerpt__excerpt {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #a1a1a1 !important;
  padding: 0 28px !important;
}
.wp-block-post-date {
  font-size: 12px !important;
  color: #666 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 16px 28px 0 !important;
}
.wp-block-query { max-width: 900px !important; margin: 0 auto !important; }

/* Single blog post */
body.single-post .entry-content h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  color: var(--sc-gold) !important;
  font-size: 30px !important;
  margin: 48px 0 20px !important;
}
body.single-post .entry-content hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--sc-gold), transparent) !important;
  margin: 48px 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   BUG 12: METRICS GRID — last row not centered
   ═══════════════════════════════════════════════════════════════════════ */
.splatchi_collections_body_seven .grid,
[class*="collections-body-seven"] .grid {
  justify-content: center !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   EXTRA: FAQ headline size (was too large)
   ═══════════════════════════════════════════════════════════════════════ */
.sbfq-headline {
  font-size: 32px !important;
}

/* EXTRA: Footer column headers consistency */
.sfo1-cta-head,
.sfo1-col h4,
.sfo1 h4 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #e9e9e9 !important;
}
.sfo1-cta-head {
  font-size: 28px !important;
  font-weight: 300 !important;
  text-transform: uppercase !important;
}

/* EXTRA: Single product Add to Cart tighten */
body.single-product .cart {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 16px 0 !important;
}
body.single-product .cart .single_add_to_cart_button {
  flex: 1 !important;
  height: 48px !important;
  padding: 0 32px !important;
  margin: 0 !important;
}

/* EXTRA: Vehicle hover images — support both data-brand and data-veh */
article.card .media {
  position: relative !important;
  overflow: hidden !important;
}
article.card .media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 2;
}
article.card:hover .media::after { opacity: 1; }
article.card[data-veh="bmw"] .media::after {
  background-image: url('/wp-content/uploads/2026/05/bmw_dark_closeup.jpg');
}
article.card[data-veh="lamborghini"] .media::after {
  background-image: url('/wp-content/uploads/2026/05/car_lamborghini_aventador.jpg');
}
article.card[data-veh="bugati"] .media::after {
  background-image: url('/wp-content/uploads/2026/05/car_bugatti_chiron.jpg');
}
article.card[data-veh="mclaren"] .media::after {
  background-image: url('/wp-content/uploads/2026/05/car_mclaren_650s_gt3.jpg');
}

/* EXTRA: Kicker colors — standard gold */
.sbfq-kicker {
  color: var(--sc-gold) !important;
}

/* ── Footer CTA link — gold text, no box ────────────────────────── */
.sfo1-cta-link a {
  color: #D4AF37 !important;
}
.sfo1-cta-link a:hover {
  color: #e9c84e !important;
}

/* ── Phone/email in footer — gold ────────────────────────────────── */
.sfo1-phone, .sfo1-email,
.sfo1 a[href^='tel'], .sfo1 a[href^='mailto'] {
  color: #D4AF37 !important;
}