/*
 * bs-homepage.css — BlackSpace homepage
 * Enqueued via bs-page-nav-assets.php on front page only.
 * Iteration 2: all section review fixes applied March 2026.
 * Every property uses !important — Elementor Pro post CSS specificity.
 *
 * Colors: #b0743e bronze | #1e1919 deep-brown | #252020 deep-brown-2
 *   #c8925e bronze-300 | #efd9c0 bronze-100 | #f7eee5 bronze-050
 *   #f5f0eb warm-off-white | #8c5d31 bronze-700 | #474747 graphite
 *   #e6e6e6 silver-mist | #1a1a1a neutral-900 | #2e2e2e neutral-700
 */

/* ── WoodMart container: default 40px/15px → 24px/20px ── */
body.home .wd-content-layout {
  padding-top: 24px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   SECTION 1 — HERO
   ══════════════════════════════════════════════════════════ */

.bs-hero-section {
  border-radius: 10px !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: #1e1919 !important;
  background-image:
    radial-gradient(ellipse 80% 65% at 50% 42%, rgba(176,116,62,0.20) 0%, transparent 62%),
    repeating-linear-gradient(-45deg, transparent, transparent 44px,
      rgba(255,255,255,0.018) 44px, rgba(255,255,255,0.018) 45px) !important;
}

.bs-hero-section::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, #b0743e, transparent) !important;
  opacity: 0.45 !important; z-index: 2 !important; pointer-events: none !important;
}

.bs-hero-section > .e-con-inner {
  padding-top: 100px !important;
  align-items: center !important;
  text-align: center !important;
}

/* Eyebrow */
.bs-hero-eyebrow {
  font-size: 0.6875rem !important; font-weight: 700 !important;
  letter-spacing: 0.22em !important; text-transform: uppercase !important;
  color: #c8925e !important; margin-bottom: 22px !important; width: auto !important;
}
.bs-hero-eyebrow .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-hero-eyebrow .elementor-widget-container p,
.bs-hero-eyebrow .elementor-widget-container div { margin: 0 !important; padding: 0 !important; }

/* H1 — no custom class assigned in Elementor, structural selector */
.bs-hero-section .elementor-widget-heading {
  max-width: 780px !important; margin-bottom: 20px !important; width: 100% !important;
}
.bs-hero-section .elementor-widget-heading .elementor-widget-container {
  padding: 0 !important; margin: 0 auto !important; max-width: 780px !important;
}
.bs-hero-section .elementor-widget-heading .elementor-heading-title {
  font-size: 3rem !important;
  font-weight: 700 !important; line-height: 1.08 !important;
  color: #ffffff !important; letter-spacing: -0.01em !important;
  margin: 0 !important; padding: 0 !important; text-align: center !important; max-width: 780px !important;
}
.bs-hero-title-em { font-style: normal !important; color: #c8925e !important; display: block !important; }

/* Body text */
.bs-hero-body { max-width: 500px !important; margin-bottom: 34px !important; width: 100% !important; }
.bs-hero-body .elementor-widget-container { padding: 0 !important; margin: 0 auto !important; }
.bs-hero-body .elementor-widget-container p,
.bs-hero-body .elementor-widget-container div {
  font-size: 0.875rem !important; line-height: 1.8 !important;
  color: rgba(255,255,255,0.68) !important; text-align: center !important;
  margin: 0 !important; padding: 0 !important;
}

/* CTA buttons */
.bs-hero-cta {
  display: flex !important; gap: 14px !important; flex-wrap: wrap !important;
  justify-content: center !important; align-items: center !important;
}

/* ── Trust bar ──────────────────────────────────────────────
   The trust row container fills .e-con-inner fully. The border-top
   must be constrained so it only spans the trust content width, not
   the full container. We give it matching side padding to the hero's
   80px side padding, then compensate with negative margin + wider width
   so the items stay centered but the border is contained.
   ──────────────────────────────────────────────────────────── */

.bs-hero-section .e-con:has(> .bs-hero-trust) {
  flex-direction: row !important; flex-wrap: nowrap !important;
  align-items: center !important; justify-content: center !important;
  gap: 20px !important;
  padding-top: 30px !important; padding-bottom: 0 !important;
  padding-left: 80px !important; padding-right: 80px !important;
  margin-left: -80px !important; margin-right: -80px !important;
  width: calc(100% + 160px) !important; max-width: calc(100% + 160px) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  box-sizing: border-box !important;
}

.bs-hero-trust {
  width: auto !important; min-width: 0 !important; flex: 0 0 auto !important;
  flex-direction: column !important; align-items: center !important;
  justify-content: center !important; gap: 2px !important;
  padding: 0 !important; margin: 0 !important; border: none !important;
}

.bs-hero-trust-num {
  font-size: 1.125rem !important; font-weight: 700 !important;
  color: #c8925e !important; line-height: 1 !important;
  margin: 0 !important; padding: 0 !important; width: auto !important;
}

.bs-hero-trust-num .elementor-widget-container,
.bs-hero-trust-label .elementor-widget-container { padding: 0 !important; margin: 0 !important; line-height: 1 !important; }

.bs-hero-trust-num .elementor-widget-container p,
.bs-hero-trust-num .elementor-widget-container div,
.bs-hero-trust-label .elementor-widget-container p,
.bs-hero-trust-label .elementor-widget-container div { margin: 0 !important; padding: 0 !important; line-height: 1 !important; }

.bs-hero-trust-label {
  font-size: 0.625rem !important; font-weight: 700 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,0.44) !important; margin: 0 !important; padding: 0 !important; width: auto !important;
}

/* Trust dividers — override Elementor's flex: 1 0 auto */
.bs-hero-trust-divider {
  width: 1px !important; min-width: 1px !important; max-width: 1px !important;
  flex: 0 0 1px !important; height: 30px !important;
  background: rgba(255,255,255,0.10) !important;
  align-self: center !important; overflow: hidden !important;
}
.bs-hero-trust-divider .elementor-divider { display: none !important; }
.bs-hero-trust-divider .elementor-widget-container {
  width: 1px !important; height: 30px !important; background: transparent !important;
  padding: 0 !important; margin: 0 !important; overflow: hidden !important;
}

/* ── Category chips row ──────────────────────────────────────
   Desktop: flex-wrap wrap, centered.
   Mobile: single scrollable row — horizontal scroll is the correct
   pattern since the widest chip ("Art & Collectibles") prevents
   reliable 3-per-row across all device widths.
   ──────────────────────────────────────────────────────────── */

.bs-hero-section .e-con:has(> .bs-hero-cats) {
  flex-direction: row !important; flex-wrap: wrap !important;
  justify-content: center !important; align-items: center !important;
  gap: 10px !important;
  padding-top: 30px !important; padding-bottom: 52px !important;
  padding-left: 80px !important; padding-right: 80px !important;
  width: 100% !important; max-width: 100% !important;
}

.bs-hero-cats { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; }
.bs-hero-cats .elementor-widget-container { padding: 0 !important; margin: 0 !important; display: flex !important; }

.bs-hero-cat-chip {
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 7px 16px 7px 7px !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 50px !important; text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s !important; white-space: nowrap !important;
}
.bs-hero-cat-chip:hover { background: rgba(176,116,62,0.20) !important; border-color: rgba(176,116,62,0.40) !important; }

.bs-hero-cat-thumb { width: 28px !important; height: 28px !important; border-radius: 50% !important; overflow: hidden !important; flex-shrink: 0 !important; }
.bs-hero-cat-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; }

.bs-hero-cat-name {
  font-size: 0.6875rem !important; font-weight: 700 !important;
  letter-spacing: 0.06em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,0.78) !important; white-space: nowrap !important;
}


/* ══════════════════════════════════════════════════════════
   SECTION 2 — CATEGORY STRIP
   ══════════════════════════════════════════════════════════ */

.bs-cat-strip { background: #ffffff !important; border-bottom: 1px solid #e6e6e6 !important; }

.bs-cat-strip__heading .elementor-heading-title {
  font-size: 1.75rem !important; font-weight: 700 !important; color: #000000 !important; margin-top: 8px !important;
}

/* Header row: text left, button right, both vertically centered */
.bs-cat-strip .e-con-inner > .e-con:first-child {
  align-items: center !important;
  justify-content: space-between !important;
}

/* Cat card
   DOM: image widget inside renders h:0 because display:block doesn't fill.
   Fix: absolute positioning on the image widget to fill the card. */
.bs-cat-card {
  border-radius: 10px !important; overflow: hidden !important; position: relative !important;
  background: #5a3b1e !important; aspect-ratio: 3 / 4 !important;
  cursor: pointer !important; transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  display: block !important;
}
.bs-cat-card:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 28px rgba(0,0,0,0.12) !important; }

/* Image widget fills entire card */
.bs-cat-card .elementor-widget-image,
.bs-cat-card .elementor-widget:has(img):not(.bs-cat-card-label) {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important;
}
.bs-cat-card .elementor-widget-image .elementor-widget-container,
.bs-cat-card .elementor-widget:has(img):not(.bs-cat-card-label) .elementor-widget-container {
  width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important;
}
.bs-cat-card .elementor-image,
.bs-cat-card figure,
.bs-cat-card .elementor-image-box-img { width: 100% !important; height: 100% !important; margin: 0 !important; }
.bs-cat-card img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center !important; display: block !important;
}

/* Label overlay stays on top */
.bs-cat-card-label {
  position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  padding: 36px 12px 14px !important;
  background: linear-gradient(to top, rgba(0,0,0,0.72), transparent) !important;
  font-size: 0.625rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important;
  text-transform: uppercase !important; color: #ffffff !important; text-align: center !important; z-index: 1 !important;
}
.bs-cat-card-label .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-cat-card-label .elementor-widget-container p,
.bs-cat-card-label .elementor-widget-container div {
  margin: 0 !important; padding: 0 !important;
  font-size: 0.625rem !important; font-weight: 700 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #ffffff !important;
}


/* ══════════════════════════════════════════════════════════
   SECTION 3 — VALUE PROPOSITION BAR
   ──────────────────────────────────────────────────────────
   DOM findings:
   - Value items = raw e-con-full children of .bs-value-bar .e-con-inner
   - No bs-value-item class assigned
   - Icon stacks above text (column layout) → fix to row
   - bs-value-divider widgets render as horizontal 1px black lines
   - Too much vertical gap between icon/title/sub inside each item
   ══════════════════════════════════════════════════════════ */

.bs-value-bar { background: #1e1919 !important; position: relative !important; padding-top: 48px !important; padding-bottom: 48px !important; }
.bs-value-bar::before {
  content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important; background: linear-gradient(90deg, transparent, rgba(176,116,62,0.5), transparent) !important; pointer-events: none !important;
}
.bs-value-bar::after {
  content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important; background: linear-gradient(90deg, transparent, rgba(176,116,62,0.5), transparent) !important; pointer-events: none !important;
}

/* e-con-inner row: remove extra gap, allow stretch for dividers */
.bs-value-bar .e-con-inner {
  gap: 0 !important; padding: 0 !important; align-items: stretch !important;
}

/* Each item: CSS grid — icon left col spans both rows, title+sub stack in right col.
   Explicit border:none overrides any Elementor-generated border on e-con elements. */
.bs-value-bar .e-con-inner > .e-con:not(.bs-value-divider) {
  display: grid !important;
  grid-template-columns: 40px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 16px !important;
  row-gap: 3px !important;
  align-items: start !important;
  padding: 0 32px !important;
  min-height: 0 !important;
  border: none !important;
}
.bs-value-bar .e-con-inner > .e-con:not(.bs-value-divider):first-child { padding-left: 0 !important; }
.bs-value-bar .e-con-inner > .e-con:not(.bs-value-divider):last-child { padding-right: 0 !important; }

/* Grid placement */
.bs-value-icon { grid-column: 1 !important; grid-row: 1 / 3 !important; align-self: center !important; }

/* Icon widget — fixed size, full flex chain to center icon inside */
.bs-value-icon {
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  background: rgba(176,116,62,0.13) !important; border: 1px solid rgba(176,116,62,0.30) !important;
  border-radius: 8px !important; display: flex !important; align-items: center !important;
  justify-content: center !important; flex-shrink: 0 !important; overflow: hidden !important;
}
.bs-value-icon .elementor-widget-container {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important; padding: 0 !important; margin: 0 !important;
  line-height: 1 !important;
}
/* The Elementor icon widget wraps icon in these elements — center all of them */
.bs-value-icon .elementor-icon-wrapper { display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; }
.bs-value-icon .elementor-icon { display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; font-size: 25px !important; }
.bs-value-icon .elementor-icon, .bs-value-icon i, .bs-value-icon svg {
  color: #b0743e !important; fill: none !important; stroke: #b0743e !important;
}

/* Grid placement for title and sub */
.bs-value-title {
  grid-column: 2 !important; grid-row: 1 !important;
  margin: 0 !important; align-self: end !important;
}
.bs-value-sub {
  grid-column: 2 !important; grid-row: 2 !important;
  margin: 0 !important; align-self: start !important;
}

.bs-value-title .elementor-widget-container p,
.bs-value-title .elementor-widget-container div {
  font-size: 0.8125rem !important; font-weight: 700 !important; color: #ffffff !important;
  margin: 0 0 3px !important; padding: 0 !important; line-height: 1.3 !important;
}
.bs-value-sub .elementor-widget-container p,
.bs-value-sub .elementor-widget-container div {
  font-size: 0.75rem !important; color: rgba(255,255,255,0.44) !important;
  line-height: 1.5 !important; margin: 0 !important; padding: 0 !important;
}

/* ── Value dividers ──────────────────────────────────────────
   DOM: Elementor divider widget. .elementor-divider-separator renders
   as horizontal 1px solid black border-top spanning full width.
   Transform to vertical 1px line using border-left instead.
   ──────────────────────────────────────────────────────────── */

.bs-value-divider {
  width: 1px !important; min-width: 1px !important; max-width: 1px !important;
  flex: 0 0 1px !important; align-self: stretch !important;
  overflow: hidden !important; padding: 0 !important; margin: 16px 0 !important;
}
.bs-value-divider .elementor-widget-container {
  width: 1px !important; height: 100% !important;
  padding: 0 !important; margin: 0 !important; display: flex !important; align-items: stretch !important;
}
.bs-value-divider .elementor-divider { width: 1px !important; height: 100% !important; padding: 0 !important; margin: 0 !important; }
.bs-value-divider .elementor-divider-separator {
  width: 1px !important; height: 100% !important; min-height: 40px !important;
  border-top: none !important;
  border-left: 1px solid rgba(255,255,255,0.07) !important;
  border-right: none !important; border-bottom: none !important;
  background: transparent !important; display: block !important;
  align-self: stretch !important; flex: 1 !important;
}


/* ══════════════════════════════════════════════════════════
   SECTION 4 — SELLER SPOTLIGHT
   ══════════════════════════════════════════════════════════ */

.bs-spotlight { background: #ffffff !important; }

.bs-spotlight-heading .elementor-heading-title {
  font-size: 1.75rem !important;
  font-weight: 700 !important; color: #000000 !important; line-height: 1.2 !important;
}
.bs-spotlight-heading em,
.bs-spotlight-heading .elementor-heading-title em { font-style: normal !important; color: #b0743e !important; }

.bs-spotlight-bio .elementor-widget-container p {
  font-size: 0.875rem !important; color: #474747 !important;
  line-height: 1.85 !important; margin: 0 0 28px !important; padding: 0 !important;
}

.bs-spotlight-quote {
  background: #f7eee5 !important; border-left: 3px solid #b0743e !important;
  border-radius: 0 8px 8px 0 !important; padding: 18px 20px !important; margin-bottom: 32px !important;
}
.bs-spotlight-quote .elementor-widget-container,
.bs-spotlight-quote .elementor-widget-container p {
  font-size: 0.875rem !important; font-style: italic !important;
  color: #2e2e2e !important; line-height: 1.7 !important; margin: 0 !important; padding: 0 !important;
}

.bs-spotlight-actions { display: flex !important; gap: 14px !important; flex-wrap: wrap !important; }

/* Photo column with Bronze 100 offset accent */
.bs-spotlight-photo-col { position: relative !important; padding: 14px 0 0 14px !important; }
.bs-spotlight-photo-col::before {
  content: '' !important; position: absolute !important;
  top: 0 !important; left: 0 !important; right: 24px !important; bottom: 14px !important;
  background: #efd9c0 !important; border-radius: 10px !important; z-index: 0 !important;
}
.bs-spotlight-photo { position: relative !important; z-index: 1 !important; border-radius: 10px !important; overflow: hidden !important; aspect-ratio: 4 / 5 !important; }
.bs-spotlight-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center !important; }

/* Floating seller tag — place this HTML widget inside .bs-spotlight-photo-col */
.bs-spotlight-seller-tag {
  position: absolute !important; bottom: 20px !important; left: 20px !important;
  background: rgba(26,26,26,0.88) !important; border: 1px solid rgba(176,116,62,0.40) !important;
  border-radius: 8px !important; padding: 10px 14px !important;
  display: flex !important; align-items: center !important; gap: 10px !important; z-index: 2 !important;
}
.bs-spotlight-seller-dot { width: 7px !important; height: 7px !important; background: #b0743e !important; border-radius: 50% !important; flex-shrink: 0 !important; }
.bs-spotlight-seller-name { font-size: 0.75rem !important; font-weight: 700 !important; color: #ffffff !important; }
.bs-spotlight-seller-cat { font-size: 0.625rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #c8925e !important; }

/* Products label */
.bs-spotlight-products-label .elementor-widget-container p,
.bs-spotlight-products-label .elementor-widget-container div {
  font-size: 0.625rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important;
  text-transform: uppercase !important; color: #474747 !important; margin: 0 0 12px !important; padding: 0 !important;
}

/* ── WoodMart Products Grid ──────────────────────────────────
   Widget: WoodMart Products (grid). Assigned class: bs-spotlight-product-card
   DOM: .wd-products → .wd-product → .wd-product-wrapper →
     .wd-product-thumb (image, overflow:clip)
     .product-element-bottom (title + price, padding:15px)
   ──────────────────────────────────────────────────────────── */

/* Grid row — 4 across, consistent spacing */
.bs-spotlight-product-card .wd-products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  list-style: none !important; padding: 0 !important; margin: 0 !important;
}

/* Each card wrapper — flex column so image + desc stack */
.bs-spotlight-product-card .wd-product-wrapper {
  display: flex !important;
  flex-direction: column !important;
  background: #f5f0eb !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease !important;
  height: 100% !important;
}
.bs-spotlight-product-card .wd-product-wrapper:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
  transform: translateY(-2px) !important;
}

/* Image area — square aspect ratio, clips to bounds, image never bleeds into desc */
.bs-spotlight-product-card .wd-product-thumb {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  display: block !important;
  width: 100% !important;
}
.bs-spotlight-product-card .wd-product-thumb a { display: block !important; width: 100% !important; height: 100% !important; }
.bs-spotlight-product-card .wd-product-thumb img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center !important;
  display: block !important;
}

/* Remove hover buttons entirely */
.bs-spotlight-product-card .wd-buttons { display: none !important; }

/* Desc area — stretches to fill remaining card height */
.bs-spotlight-product-card .product-element-bottom {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 10px 12px !important;
  gap: 4px !important;
}

/* Title — H3, reduce from 16px to 12px */
.bs-spotlight-product-card .wd-entities-title {
  font-size: 0.75rem !important;       /* 12px */
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1a1a1a !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  margin: 0 !important;
}
.bs-spotlight-product-card .wd-entities-title a {
  color: #1a1a1a !important;
  text-decoration: none !important;
  font-size: inherit !important;
}

/* Price — allow wrapping, correct size, "From" prefix */
.bs-spotlight-product-card .price {
  font-size: 0.6875rem !important;     /* 11px */
  font-weight: 700 !important;
  color: #b0743e !important;
  white-space: normal !important;      /* wrap instead of truncating */
  overflow: visible !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px !important;
  line-height: 1.4 !important;
  margin-top: auto !important;         /* push price to bottom of desc */
}

/* Prepend "From " before the price — WoodMart renders the minimum price
   for grouped/variable products, so "From" is always accurate */
.bs-spotlight-product-card .price::before {
  content: 'From ' !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  color: #b0743e !important;
  white-space: pre !important;   /* preserves trailing space */
}

/* Hide the range: for variable/grouped products WoodMart marks ALL price amounts
   with aria-hidden="true". We must show the first one explicitly, then hide the rest.
   Sequence in DOM: [amount1 aria-hidden] [– aria-hidden] [amount2 aria-hidden] [screen-reader-text]
   Strategy: show first .woocommerce-Price-amount unconditionally, then hide its siblings. */

/* Show the first price amount regardless of aria-hidden */
.bs-spotlight-product-card .price .woocommerce-Price-amount:first-of-type {
  display: inline !important;
}
/* Hide every price amount after the first */
.bs-spotlight-product-card .price .woocommerce-Price-amount ~ .woocommerce-Price-amount {
  display: none !important;
}
/* Hide the en-dash separator (aria-hidden span that is NOT a price amount) */
.bs-spotlight-product-card .price > span[aria-hidden="true"]:not(.woocommerce-Price-amount) {
  display: none !important;
}
/* Hide screen reader text */
.bs-spotlight-product-card .price .screen-reader-text { display: none !important; }

.bs-spotlight-product-card .price .woocommerce-Price-amount,
.bs-spotlight-product-card .price bdi,
.bs-spotlight-product-card .price .woocommerce-Price-currencySymbol {
  color: #b0743e !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}



/* ══════════════════════════════════════════════════════════
   SECTION 5 — SHOP ALL CATEGORIES
   ──────────────────────────────────────────────────────────
   DOM findings:
   - bs-shop-cat-card is on the <A> anchor element (e-con-full)
   - Card contains only: bs-shop-cat-card-name widget + bs-shop-cat-arrow widget
   - No image widget yet — when added it'll be .elementor-widget-image
   - Card height is only 87px without image
   - Name and arrow must be at the bottom, text left, arrow right
   ══════════════════════════════════════════════════════════ */

.bs-shop-cats { background: #f5f0eb !important; }

.bs-shop-cats__heading .elementor-heading-title {
  font-size: 1.75rem !important;
  font-weight: 700 !important; color: #000000 !important; text-align: center !important;
}

/* Card — NO aspect-ratio on the card itself.
   The mockup sizes the card by: image (3/2 ratio) + body bar (48px).
   padding: 0 overrides Elementor's per-element generated CSS (16px 18px 20px 18px)
   which was creating white space around the image. */
.bs-shop-cat-card {
  background: #ffffff !important; border: 1px solid #e6e6e6 !important;
  border-radius: 10px !important; overflow: hidden !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
  flex-direction: column !important; display: flex !important;
  aspect-ratio: unset !important; position: relative !important;
  text-decoration: none !important;
  padding: 0 !important;
}
.bs-shop-cat-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.09) !important; transform: translateY(-2px) !important; }

/* Image widget — aspect-ratio 3/2 lives HERE, not on the card */
.bs-shop-cat-card .elementor-widget-image {
  position: relative !important; inset: unset !important; z-index: 0 !important;
  width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important;
  aspect-ratio: 3 / 2 !important; overflow: hidden !important; flex-shrink: 0 !important;
}
.bs-shop-cat-card .elementor-widget-image .elementor-widget-container {
  width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important;
}
.bs-shop-cat-card .elementor-widget-image figure,
.bs-shop-cat-card .elementor-image { width: 100% !important; height: 100% !important; margin: 0 !important; }
.bs-shop-cat-card .elementor-widget-image img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
  object-position: center !important; transition: transform 0.3s ease !important; display: block !important;
}
.bs-shop-cat-card:hover .elementor-widget-image img { transform: scale(1.04) !important; }

/* Card body — in-flow approach.
   The ::after absolute bar does NOT add to flex height, so cards were 
   only as tall as the image. Name is now position:static (in flex flow),
   adding its height to the card. Arrow stays absolute within the bar area.
   Confirmed: card = 163px image + 47px name bar = 210px total. */

/* Remove the ::after bar — replaced by in-flow name widget */
.bs-shop-cat-card::after { display: none !important; }

/* Name bar — in-flow, white background, fills remaining width */
.bs-shop-cat-card-name {
  position: static !important;
  background: #ffffff !important;
  padding: 13px 50px 13px 14px !important; /* right pad leaves room for arrow */
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  z-index: 1 !important;
  height: auto !important;
}
.bs-shop-cat-card-name .elementor-widget-container { padding: 0 !important; margin: 0 !important; width: 100% !important; }
.bs-shop-cat-card-name .elementor-widget-container p,
.bs-shop-cat-card-name .elementor-widget-container div {
  font-size: 0.8125rem !important; font-weight: 700 !important; color: #000000 !important;
  margin: 0 !important; padding: 0 !important; white-space: nowrap !important;
  overflow: hidden !important; text-overflow: ellipsis !important;
}

/* Arrow — absolute within the card, sits over the name bar */
.bs-shop-cat-arrow {
  position: absolute !important;
  bottom: 10px !important; right: 14px !important;
  z-index: 2 !important;
  width: 28px !important; height: 28px !important; min-width: 28px !important;
  background: #f7eee5 !important; border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background 0.15s ease !important; flex-shrink: 0 !important;
}
.bs-shop-cat-arrow .elementor-widget-container {
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 !important; margin: 0 !important; width: 28px !important; height: 28px !important;
}
.bs-shop-cat-arrow .elementor-icon-wrapper,
.bs-shop-cat-arrow .elementor-icon {
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.bs-shop-cat-arrow i, .bs-shop-cat-arrow svg { color: #b0743e !important; font-size: 13px !important; }
.bs-shop-cat-card:hover .bs-shop-cat-arrow { background: #b0743e !important; }
.bs-shop-cat-card:hover .bs-shop-cat-arrow i,
.bs-shop-cat-card:hover .bs-shop-cat-arrow svg { color: #ffffff !important; }


/* ══════════════════════════════════════════════════════════
   SECTION 6 — MISSION BAND
   ══════════════════════════════════════════════════════════ */

.bs-mission-band { background: #f7eee5 !important; border-top: 1px solid #efd9c0 !important; border-bottom: 1px solid #efd9c0 !important; text-align: center !important; }
.bs-mission-band .bs-section-label { color: #8c5d31 !important; margin-bottom: 24px !important; }

.bs-mission-quote .elementor-heading-title,
.bs-mission-quote .elementor-widget-container p {
  font-size: 1.375rem !important; font-weight: 700 !important;
  color: #1a1a1a !important; line-height: 1.45 !important; letter-spacing: -0.01em !important;
  margin-bottom: 28px !important; padding: 0 !important;
}
.bs-mission-quote em { font-style: normal !important; color: #b0743e !important; }

.bs-mission-body .elementor-widget-container p,
.bs-mission-body .elementor-widget-container div {
  font-size: 0.875rem !important; color: #474747 !important;
  line-height: 1.85 !important; margin-bottom: 32px !important; padding: 0 !important;
}

.bs-mission-disclosure .elementor-widget-container p,
.bs-mission-disclosure .elementor-widget-container div {
  font-size: 0.8125rem !important; color: #8c5d31 !important;
  line-height: 1.65 !important; margin: 0 0 32px !important; padding: 0 !important;
}
.bs-mission-disclosure a { color: #8c5d31 !important; text-decoration: underline !important; text-underline-offset: 2px !important; }
.bs-mission-disclosure a:hover { color: #b0743e !important; }

.bs-mission-cta { display: flex !important; gap: 14px !important; justify-content: center !important; flex-wrap: wrap !important; }


/* ══════════════════════════════════════════════════════════
   SECTION 7 — BLOG / CULTURE FEED
   ══════════════════════════════════════════════════════════ */

.bs-blog-feed { background: #ffffff !important; }
.bs-blog-feed__heading .elementor-heading-title {
  font-size: 1.75rem !important; font-weight: 700 !important; color: #000000 !important; margin-top: 8px !important;
}

.bs-blog-card {
  background: #f5f0eb !important; border: 1px solid #e6e6e6 !important;
  border-radius: 10px !important; overflow: hidden !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
  display: flex !important; flex-direction: column !important;
}
.bs-blog-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.08) !important; transform: translateY(-2px) !important; }
.bs-blog-card img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.3s ease !important; display: block !important; }
.bs-blog-card:hover img { transform: scale(1.03) !important; }

.bs-blog-tag {
  display: inline-block !important; font-size: 0.5625rem !important; font-weight: 700 !important;
  letter-spacing: 0.14em !important; text-transform: uppercase !important;
  color: #b0743e !important; background: #f7eee5 !important;
  border-radius: 50px !important; padding: 3px 10px !important; margin-bottom: 10px !important;
}

.bs-blog-title .elementor-heading-title {
  font-size: 0.9375rem !important; font-weight: 700 !important; color: #1a1a1a !important;
  line-height: 1.35 !important; margin-bottom: 10px !important;
}
.bs-blog-card--sm .bs-blog-title .elementor-heading-title { font-size: 0.8125rem !important; }

.bs-blog-excerpt .elementor-widget-container p,
.bs-blog-excerpt .elementor-widget-container div {
  font-size: 0.8125rem !important; color: #474747 !important;
  line-height: 1.7 !important; margin-bottom: 16px !important; padding: 0 !important;
}

.bs-blog-meta .elementor-widget-container p,
.bs-blog-meta .elementor-widget-container div {
  font-size: 0.6875rem !important; color: #474747 !important;
  display: flex !important; align-items: center !important; gap: 8px !important;
  margin: 0 !important; padding: 0 !important;
}
.bs-blog-meta-dot { width: 3px !important; height: 3px !important; background: #b0743e !important; border-radius: 50% !important; display: inline-block !important; flex-shrink: 0 !important; }


/* ══════════════════════════════════════════════════════════
   SECTION 8 — SELLER CTA
   ──────────────────────────────────────────────────────────
   Fixes:
   1. Bullet list margin-bottom halved: 12px → 6px
   2. Feature card icon: structural target (.elementor-widget-icon
      inside .bs-seller-feature-card), centered with flex
   3. Mobile: cards thinner (less padding), icon right-aligned
      via flex-direction: row-reverse
   ══════════════════════════════════════════════════════════ */

.bs-seller-cta { background: #252020 !important; position: relative !important; overflow: hidden !important; }
.bs-seller-cta::before {
  content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important; background: linear-gradient(90deg, transparent, rgba(176,116,62,0.40), transparent) !important; pointer-events: none !important;
}

.bs-seller-cta .bs-section-label { color: #c8925e !important; margin-bottom: 12px !important; }

.bs-seller-cta-heading .elementor-heading-title {
  font-size: 1.75rem !important; font-weight: 700 !important;
  color: #ffffff !important; line-height: 1.2 !important; margin-bottom: 16px !important;
}
.bs-seller-cta-heading em,
.bs-seller-cta-heading .elementor-heading-title em { font-style: normal !important; color: #c8925e !important; }

.bs-seller-cta-body .elementor-widget-container p,
.bs-seller-cta-body .elementor-widget-container div {
  font-size: 0.875rem !important; color: rgba(255,255,255,0.55) !important;
  line-height: 1.85 !important; margin-bottom: 32px !important; padding: 0 !important;
}

/* Bullet list — halved spacing */
.bs-seller-cta-list-item {
  display: flex !important; align-items: flex-start !important; gap: 12px !important;
  font-size: 0.8125rem !important; color: rgba(255,255,255,0.72) !important;
  line-height: 1.5 !important;
  margin-bottom: 6px !important;    /* was 12px */
  padding-top: 0 !important; padding-bottom: 0 !important;
}
.bs-seller-cta-dot {
  width: 7px !important; height: 7px !important; min-width: 7px !important;
  background: #b0743e !important; border-radius: 50% !important;
  flex-shrink: 0 !important; margin-top: 5px !important;
}

.bs-seller-cta-actions { display: flex !important; gap: 14px !important; flex-wrap: wrap !important; margin-top: 36px !important; }

/* Feature cards */
.bs-seller-feature-card {
  background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 10px !important; padding: 22px 24px !important;
  display: flex !important; align-items: flex-start !important; gap: 16px !important;
  transition: background 0.2s ease, border-color 0.2s ease !important; margin-bottom: 14px !important;
}
.bs-seller-feature-card:last-child { margin-bottom: 0 !important; }
.bs-seller-feature-card:hover { background: rgba(176,116,62,0.08) !important; border-color: rgba(176,116,62,0.25) !important; }

/* Icon widget — structural target, no bs- class assigned */
.bs-seller-feature-card .elementor-widget-icon {
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  background: rgba(176,116,62,0.13) !important; border: 1px solid rgba(176,116,62,0.30) !important;
  border-radius: 8px !important; display: flex !important; align-items: center !important;
  justify-content: center !important; flex-shrink: 0 !important; margin-bottom: 0 !important;
}
.bs-seller-feature-card .elementor-widget-icon .elementor-widget-container {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important; padding: 0 !important; margin: 0 !important;
}
.bs-seller-feature-card .elementor-widget-icon .elementor-icon-wrapper,
.bs-seller-feature-card .elementor-widget-icon .elementor-icon {
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.bs-seller-feature-card .elementor-widget-icon i,
.bs-seller-feature-card .elementor-widget-icon svg { color: #b0743e !important; }

.bs-seller-feature-title .elementor-widget-container p,
.bs-seller-feature-title .elementor-widget-container div {
  font-size: 0.8125rem !important; font-weight: 700 !important; color: #ffffff !important;
  margin: 0 0 4px !important; padding: 0 !important;
}
.bs-seller-feature-body .elementor-widget-container p,
.bs-seller-feature-body .elementor-widget-container div {
  font-size: 0.75rem !important; color: rgba(255,255,255,0.44) !important;
  line-height: 1.6 !important; margin: 0 !important; padding: 0 !important;
}


/* ══════════════════════════════════════════════════════════
   SECTION 9 — EMAIL CTA STRIP
   ══════════════════════════════════════════════════════════ */

.bs-email-cta { background: #b0743e !important; position: relative !important; overflow: hidden !important; text-align: center !important; }
.bs-email-cta::before {
  content: '' !important; position: absolute !important; inset: 0 !important;
  background: repeating-linear-gradient(-45deg, transparent, transparent 36px, rgba(0,0,0,0.04) 36px, rgba(0,0,0,0.04) 37px) !important; pointer-events: none !important;
}
.bs-email-cta .bs-section-label { color: rgba(255,255,255,0.70) !important; font-size: 0.625rem !important; letter-spacing: 0.2em !important; margin-bottom: 16px !important; }
.bs-email-cta-heading .elementor-heading-title {
  font-size: 1.75rem !important; font-weight: 700 !important;
  color: #ffffff !important; letter-spacing: -0.01em !important; margin-bottom: 10px !important;
}
.bs-email-cta-sub .elementor-widget-container p,
.bs-email-cta-sub .elementor-widget-container div {
  font-size: 0.875rem !important; color: rgba(255,255,255,0.78) !important; margin-bottom: 32px !important; padding: 0 !important;
}
.bs-email-cta .elementor-form { max-width: 420px !important; margin: 0 auto !important; border-radius: 50px !important; overflow: hidden !important; box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important; display: flex !important; }
.bs-email-cta .elementor-field-group { flex: 1 !important; margin: 0 !important; padding: 0 !important; }
.bs-email-cta .elementor-field { border: none !important; outline: none !important; border-radius: 0 !important; padding: 14px 22px !important; font-size: 0.8125rem !important; color: #1a1a1a !important; background: #ffffff !important; width: 100% !important; height: 100% !important; }
.bs-email-cta .elementor-button { background: #1a1a1a !important; color: #ffffff !important; border: none !important; border-radius: 0 !important; padding: 14px 26px !important; font-size: 0.6875rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; white-space: nowrap !important; transition: background 0.15s ease !important; }
.bs-email-cta .elementor-button:hover { background: #2e2e2e !important; }
.bs-email-cta-privacy .elementor-widget-container p,
.bs-email-cta-privacy .elementor-widget-container div { font-size: 0.625rem !important; color: rgba(255,255,255,0.50) !important; letter-spacing: 0.04em !important; margin-top: 12px !important; padding: 0 !important; }


/* ══════════════════════════════════════════════════════════
   SHARED UTILITIES
   ══════════════════════════════════════════════════════════ */

.bs-section-label { font-size: 0.6875rem !important; font-weight: 700 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: #b0743e !important; display: block !important; }
.bs-section-label .elementor-widget-container p,
.bs-section-label .elementor-widget-container div { font-size: 0.6875rem !important; font-weight: 700 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: #b0743e !important; margin: 0 !important; padding: 0 !important; }
.bs-amber-rule { display: block !important; width: 44px !important; height: 3px !important; background: #b0743e !important; border-radius: 2px !important; margin: 12px 0 20px !important; }
.bs-amber-rule--center { margin: 12px auto 20px !important; }
.bs-bronze-text { color: #b0743e !important; }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 1100px
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .bs-shop-cat-card:nth-child(n+7) { display: none !important; }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 960px (tablet landscape)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  /* Hero — reduce section side padding so chips have room */
  .bs-hero-section { padding-left: 40px !important; padding-right: 40px !important; }
  .bs-hero-section > .e-con-inner { padding-top: 80px !important; }
  .bs-hero-section .e-con:has(> .bs-hero-cats) { padding-left: 40px !important; padding-right: 40px !important; padding-top: 24px !important; padding-bottom: 40px !important; }
  .bs-hero-section .e-con:has(> .bs-hero-trust) { padding-left: 40px !important; padding-right: 40px !important; margin-left: -40px !important; margin-right: -40px !important; width: calc(100% + 80px) !important; max-width: calc(100% + 80px) !important; }

  /* Value bar — 2×2 grid. No borders on any card. */
  .bs-value-bar { padding-top: 40px !important; padding-bottom: 40px !important; }
  .bs-value-bar .e-con-inner { flex-wrap: wrap !important; gap: 0 !important; }
  .bs-value-bar .e-con-inner > .e-con:not(.bs-value-divider) {
    width: 50% !important; flex: 0 0 50% !important;
    padding: 20px 20px 20px 0 !important;
    border: none !important;
    display: grid !important;
    grid-template-columns: 40px 1fr !important;
    column-gap: 14px !important;
    row-gap: 3px !important;
  }
  .bs-value-bar .e-con-inner > .e-con:not(.bs-value-divider):nth-of-type(even) {
    border: none !important;
    padding-left: 20px !important;
  }
  .bs-value-bar .e-con-inner > .e-con:not(.bs-value-divider):first-child { padding-left: 0 !important; }
  .bs-value-bar .e-con-inner > .e-con:not(.bs-value-divider):last-child { padding-right: 0 !important; }
  .bs-value-divider { display: none !important; }

  /* Spotlight */
  .bs-spotlight-photo-col { max-width: 400px !important; }

  /* Shop cats — show only 4 */
  .bs-shop-cat-card:nth-child(n+5) { display: none !important; }

  /* WoodMart products — keep 4 columns at 960px */
  .bs-spotlight-product-card .wd-products { grid-template-columns: repeat(4, 1fr) !important; }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 768px (tablet portrait)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .bs-hero-section { padding-left: 40px !important; padding-right: 40px !important; }
  .bs-hero-section > .e-con-inner { padding-top: 72px !important; }
  .bs-hero-section .e-con:has(> .bs-hero-cats) { padding-left: 40px !important; padding-right: 40px !important; padding-top: 20px !important; padding-bottom: 36px !important; }
  .bs-hero-section .elementor-widget-heading .elementor-heading-title { font-size: 2.25rem !important; }
  .bs-hero-section .e-con:has(> .bs-hero-trust) { padding-left: 40px !important; padding-right: 40px !important; margin-left: -40px !important; margin-right: -40px !important; width: calc(100% + 80px) !important; max-width: calc(100% + 80px) !important; }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 640px (large mobile)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  body.home .wd-content-layout { padding-top: 12px !important; padding-left: 12px !important; padding-right: 12px !important; }

  /* Hero — reduce Elementor's 80px side padding */
  .bs-hero-section { border-radius: 8px !important; padding-left: 20px !important; padding-right: 20px !important;
    /* Allow chips to scroll horizontally — overflow-y:hidden keeps border-radius clip on top/bottom */
    overflow-x: visible !important; overflow-y: hidden !important;
  }
  .bs-hero-section > .e-con-inner { padding-top: 52px !important; }
  .bs-hero-section .elementor-widget-heading .elementor-heading-title { font-size: 1.875rem !important; }

  /* S1 Chips: horizontal scroll single row — reliable across all device widths */
  .bs-hero-section .e-con:has(> .bs-hero-cats) {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 18px 20px 32px !important;
    gap: 8px !important;
  }
  .bs-hero-section .e-con:has(> .bs-hero-cats)::-webkit-scrollbar { display: none !important; }
  /* Each chip widget: don't shrink */
  .bs-hero-cats { flex-shrink: 0 !important; }

  /* Trust bar — constrain border to reduced hero padding */
  .bs-hero-section .e-con:has(> .bs-hero-trust) { gap: 14px !important; flex-wrap: wrap !important; padding-left: 20px !important; padding-right: 20px !important; margin-left: -20px !important; margin-right: -20px !important; width: calc(100% + 40px) !important; max-width: calc(100% + 40px) !important; }
  .bs-hero-trust-divider { display: none !important; }
  .bs-hero-cat-name { font-size: 0.625rem !important; }
  .bs-hero-cta { flex-direction: column !important; align-items: center !important; }

  /* Section padding */
  .bs-cat-strip, .bs-spotlight, .bs-shop-cats, .bs-blog-feed, .bs-seller-cta, .bs-email-cta, .bs-mission-band { padding-left: 24px !important; padding-right: 24px !important; }
  .bs-value-bar { padding-left: 24px !important; padding-right: 24px !important; }

  /* Cat strip header row — stack vertically on mobile: label+heading top, button below */
  .bs-cat-strip .e-con-inner > .e-con:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .bs-cat-strip .e-con-inner > .e-con:first-child > .e-con {
    width: 100% !important;
  }

  /* S2: Cat cards — 2 col grid. The grid e-con needs wrap + cards at 50% */
  .bs-cat-strip .e-con:has(> .bs-cat-card) {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .bs-cat-card {
    flex: 0 0 calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }
  /* Show 6 cards (2 rows of 3 portrait cards) */
  .bs-cat-strip .bs-cat-card:nth-child(n+7) { display: none !important; }

  /* S5: Shop cats — 2×4 grid: all 8 cards visible, 2 per row */
  .bs-shop-cats .e-con:has(> .bs-shop-cat-card) {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .bs-shop-cat-card {
    display: flex !important;
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
  }

  /* Value bar — 2×2 stays. No borders on any card at any mobile size. */
  .bs-value-bar .e-con-inner > .e-con:not(.bs-value-divider) {
    padding: 14px 14px 14px 0 !important;
    border: none !important;
  }
  .bs-value-bar .e-con-inner > .e-con:not(.bs-value-divider):nth-of-type(even) {
    border: none !important; padding-left: 14px !important;
  }
  .bs-value-bar .e-con-inner > .e-con:not(.bs-value-divider):nth-last-of-type(-n+2) {
    border: none !important;
  }

  /* S4 WoodMart products: 2×2 grid on mobile */
  .bs-spotlight-product-card .wd-products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Seller CTA */
  .bs-seller-cta-actions { flex-direction: column !important; }

  /* Feature cards — thinner + icon right-aligned via row-reverse */
  .bs-seller-feature-card { padding: 14px 16px !important; flex-direction: row-reverse !important; gap: 12px !important; }
  .bs-seller-feature-card .elementor-widget-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; flex-shrink: 0 !important; align-self: flex-start !important; }
  .bs-seller-feature-card .elementor-widget-icon .elementor-widget-container { width: 32px !important; height: 32px !important; }

  /* Email form */
  .bs-email-cta .elementor-form { flex-direction: column !important; border-radius: 10px !important; }
  .bs-email-cta .elementor-field { border-radius: 8px 8px 0 0 !important; }
  .bs-email-cta .elementor-button { border-radius: 0 0 8px 8px !important; padding: 13px 22px !important; }

  .bs-mission-cta { flex-direction: column !important; align-items: center !important; }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 480px (small mobile)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  body.home .wd-content-layout { padding-top: 10px !important; padding-left: 10px !important; padding-right: 10px !important; }
  .bs-hero-section { border-radius: 6px !important; padding-left: 16px !important; padding-right: 16px !important; overflow-x: visible !important; overflow-y: hidden !important; }
  .bs-hero-section > .e-con-inner { padding-top: 44px !important; }
  .bs-hero-section .elementor-widget-heading .elementor-heading-title { font-size: 1.625rem !important; }

  /* Chips: scroll continues, just tighter chip size */
  .bs-hero-section .e-con:has(> .bs-hero-cats) { padding: 14px 16px 28px !important; gap: 6px !important; }
  .bs-hero-cat-chip { padding: 5px 12px 5px 5px !important; }
  .bs-hero-cat-thumb { width: 22px !important; height: 22px !important; }
  .bs-hero-cat-name { font-size: 0.5625rem !important; }

  /* Trust bar */
  .bs-hero-section .e-con:has(> .bs-hero-trust) { padding-left: 16px !important; padding-right: 16px !important; margin-left: -16px !important; margin-right: -16px !important; width: calc(100% + 32px) !important; max-width: calc(100% + 32px) !important; }

  /* Section padding */
  .bs-cat-strip, .bs-spotlight, .bs-shop-cats, .bs-blog-feed, .bs-seller-cta, .bs-email-cta, .bs-mission-band { padding-left: 18px !important; padding-right: 18px !important; }
  .bs-value-bar { padding-left: 18px !important; padding-right: 18px !important; padding-top: 28px !important; padding-bottom: 28px !important; }

  /* S2: cat cards still 2-col */
  .bs-cat-strip .e-con:has(> .bs-cat-card) { flex-wrap: wrap !important; gap: 10px !important; }
  .bs-cat-card { flex: 0 0 calc(50% - 5px) !important; width: calc(50% - 5px) !important; max-width: calc(50% - 5px) !important; }

  /* S5: shop cats still 2×4 */
  .bs-shop-cats .e-con:has(> .bs-shop-cat-card) { flex-wrap: wrap !important; gap: 8px !important; }
  .bs-shop-cat-card { flex: 0 0 calc(50% - 4px) !important; width: calc(50% - 4px) !important; max-width: calc(50% - 4px) !important; }

  /* Value bar — tighter padding, no borders */
  .bs-value-bar .e-con-inner > .e-con:not(.bs-value-divider) {
    padding: 12px 12px 12px 0 !important;
    border: none !important;
  }
  .bs-value-bar .e-con-inner > .e-con:not(.bs-value-divider):nth-of-type(even) {
    border: none !important; padding-left: 12px !important;
  }

  /* S4: WoodMart products — 2 columns at 480px */
  .bs-spotlight-product-card .wd-products { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* Feature cards — even tighter */
  .bs-seller-feature-card { padding: 12px 14px !important; }
}


/* ══════════════════════════════════════════════════════════
   ELEMENTOR POSTS CARDS — thumbnail fill fix
   Previously supplied by ekit-widget-styles.css (ElementsKit).
   The img intrinsic size was winning over height:100% because
   another rule sets an explicit pixel height. Absolute fill
   bypasses that entirely — the container has overflow:hidden
   so nothing bleeds out.
   ══════════════════════════════════════════════════════════ */
.elementor-posts--skin-cards .elementor-post__thumbnail {
  position: relative !important;
}
.elementor-posts--skin-cards .elementor-post__thumbnail img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}