/*
Theme Name: PromotionBeads Child
Template: promotionbeads
Version: 1.0.0
Description: Beadguy modernization layer — anthem player, mascot integration, AI/voice search SEO, IndexNow hooks. Parent theme untouched.
Author: Beadguy
Text Domain: promotionbeads-child
*/

:root {
  --beadguy-purple: #6A0DAD;
  --beadguy-green:  #00A651;
  --beadguy-gold:   #FFD700;
  --beadguy-white:  #FFFFFF;
  --beadguy-ink:    #1a1a1a;
  --beadguy-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* ============================================================
   Responsive foundations — apply site-wide
   ============================================================ */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   Product detail page (PDP) polish
   ============================================================ */

/* Hide the theme's custom productsphoto block when empty (no <li> children).
   Uses :has() — supported in modern Chrome/Safari/Firefox. */
.products_photos:not(:has(li)) {
  display: none;
}

/* Price table — make it horizontally scrollable on small screens
   instead of overflowing the viewport. Scoped to single-product pages
   so other tables (admin, comparison grids) are unaffected. */
.single-product table.table-bordered {
  width: 100%;
}
@media (max-width: 768px) {
  .single-product table.table-bordered {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: nowrap;
  }
}

/* ============================================================
   Full-width marketing description (post_content)
   Rendered by parent theme as <div class="product-full-description">
   ============================================================ */
.product-full-description {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 1rem 1.25rem;
  line-height: 1.65;
  font-size: 1rem;
  color: var(--beadguy-ink);
}
.product-full-description h2 {
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  border-bottom: 2px solid var(--beadguy-gold);
  padding-bottom: 0.4rem;
  color: var(--beadguy-purple);
  scroll-margin-top: 80px;
}
.product-full-description h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
  color: var(--beadguy-purple);
}
.product-full-description p {
  margin: 0.75rem 0;
}
.product-full-description ul,
.product-full-description ol {
  padding-left: 1.5rem;
  margin: 0.75rem 0;
}
.product-full-description ul li,
.product-full-description ol li {
  margin-bottom: 0.4rem;
}
.product-full-description code {
  background: rgba(106, 13, 173, 0.08);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-size: 0.92em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.product-full-description a {
  color: var(--beadguy-purple);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.product-full-description a:hover {
  color: var(--beadguy-green);
}

/* PDP mobile: tighter padding, slightly smaller h2 */
@media (max-width: 768px) {
  .product-full-description {
    padding: 0.75rem 1rem;
    font-size: 0.97rem;
    margin: 1.25rem auto;
  }
  .product-full-description h2 {
    font-size: 1.25rem;
    margin-top: 1.75rem;
  }
  .product-full-description h3 {
    font-size: 1.05rem;
  }
}

/* ============================================================
   Touch-friendly Request a Quote button on mobile
   (JotForm popup link in parent theme template)
   ============================================================ */
@media (max-width: 768px) {
  .popupaoc-button,
  a.popupaoc-button,
  a[class*="lightbox-"][class*="popupaoc"] {
    display: inline-block;
    min-height: 44px;
    padding: 0.85rem 1.25rem;
    font-size: 1rem;
    line-height: 1.2;
  }
}

/* Single-product layout: ensure overflowing wide content
   doesn't break the page on small screens. */
.single-product .summary,
.single-product .entry-summary {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Heateor share container — keep it tidy and clearly separated
   from the price table on mobile. */
@media (max-width: 768px) {
  .heateor_sss_sharing_container {
    margin: 1rem 0;
  }
}

/* ============================================================
   Home page — .bg-home-hero wrapper (rendered between slider
   and the category grid by child-theme front-page.php)
   ============================================================ */
.bg-home-hero {
  background: transparent; /* 2026-07-21: let the moving .bg-mardi-layer show through the hero too */
  padding: 3.5rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.bg-home-hero .wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
}
.bg-home-h1 {
  flex-basis: 100%;
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--beadguy-purple);
  margin: 0 0 0.75rem 0;
}
.bg-home-lead {
  flex-basis: 100%;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #1E2432;
  margin: 0 0 1.75rem 0;
  max-width: 60ch;
}
.bg-home-hero h2 {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--beadguy-purple);
  margin: 0 0 0.25rem 0;
  line-height: 1.1;
  flex-basis: 100%;
}
.bg-home-hero h2:nth-of-type(2) {
  font-size: 1.55rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--beadguy-purple) 0%, var(--beadguy-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1.5rem;
}

/* Override parent theme's float-based .beads_img / .beads_text inside the hero */
.bg-home-hero .beads_img,
.bg-home-hero .beads_text {
  float: none;
  margin: 0;
  padding: 0;
  width: auto;
}
.bg-home-hero .beads_img {
  flex: 0 1 420px;
  max-width: 100%;
}
.bg-home-hero .beads_text {
  flex: 1 1 380px;
  min-width: 280px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--beadguy-ink);
}
.bg-home-hero .beads_img a {
  display: block;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(106, 13, 173, 0.18);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s ease;
}
.bg-home-hero .beads_img a::before {
  content: "★ #1 SELLER";
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: linear-gradient(135deg, var(--beadguy-purple) 0%, #4a0a7a 100%);
  color: var(--beadguy-gold);
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 0.45rem 0.85rem;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(106, 13, 173, 0.35);
  text-transform: uppercase;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1;
}
.bg-home-hero .beads_img a:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 26px 56px rgba(106, 13, 173, 0.28);
}
.bg-home-hero .beads_img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bg-home-hero .beads_img a:hover img {
  transform: scale(1.04);
}

/* Hero buttons: stack as flex row, primary CTA stands alone */
.bg-home-hero .beads_text .button {
  float: none;
  width: auto;
  margin: 0.4rem 0.6rem 0.4rem 0;
  display: inline-block;
}
.bg-home-hero .beads_text .button-1seller {
  display: block;
  margin-top: 1rem;
  margin-bottom: 0.85rem;
  width: fit-content;
}
.bg-home-hero .order {
  display: none; /* parent theme empty spacer — no longer needed */
}

@media (max-width: 768px) {
  .bg-home-hero {
    padding: 2rem 1rem;
  }
  .bg-home-hero .wrap {
    gap: 1.5rem;
  }
  .bg-home-hero h2 {
    font-size: 1.65rem;
  }
  .bg-home-hero h2:nth-of-type(2) {
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }
  .bg-home-hero .beads_img {
    flex: 1 1 100%;
  }
  .bg-home-hero .beads_text {
    flex: 1 1 100%;
    font-size: 1rem;
  }
}

/* ============================================================
   Make the hero product image clickable area visually obvious
   (legacy selector — kept for compatibility on other templates)
   ============================================================ */
.beads_img a {
  display: inline-block;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.beads_img a:hover {
  transform: translateY(-2px);
  box-shadow: var(--beadguy-shadow);
}

/* Primary "Order Our #1 Seller" CTA button — gradient + prominence */
.beads_text a.button.button-1seller,
.beads_text a.button-1seller {
  background: linear-gradient(135deg, var(--beadguy-purple) 0%, var(--beadguy-gold) 100%);
  color: #ffffff !important;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.95rem 1.6rem;
  margin: 0.5rem 0.5rem 0.5rem 0;
  border-radius: 4px;
  box-shadow: var(--beadguy-shadow);
  text-transform: uppercase;
  font-size: 1.02rem;
  display: inline-block;
  text-decoration: none;
  position: relative;
  border: none;
}
.beads_text a.button.button-1seller::before,
.beads_text a.button-1seller::before {
  content: "★ ";
  color: var(--beadguy-gold);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  margin-right: 0.15em;
}
.beads_text a.button.button-1seller:hover,
.beads_text a.button-1seller:hover {
  background: linear-gradient(135deg, var(--beadguy-gold) 0%, var(--beadguy-purple) 100%);
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* ============================================================
   Home page — Category grid: #1 Seller hero cell
   The JS in block-5 (a) pins inline-decal to slot 1, (b) adds
   .bg-cat-cell--top-seller, (c) rewrites the link to the product
   page, (d) injects price callout + ORDER NOW micro-CTA.

   Desktop 3-col: top-seller spans 2×2 (fills 9-cell grid with 6 boxes)
   Tablet 2-col:  top-seller spans 2×1 (full-width banner)
   Mobile 1-col:  default (single column with badge + ring)
   ============================================================ */
.bg-cat-grid .bg-cat-cell {
  position: relative;
}

/* Hero cell layout — desktop */
.custom_products .bg-cat-grid .bg-cat-cell--top-seller {
  grid-column: span 2;
  grid-row: span 2;
  outline: 3px solid var(--beadguy-gold);
  outline-offset: -3px;
  border-radius: 12px;
  isolation: isolate; /* establish stacking context for ::before/::after */
  background: linear-gradient(180deg,
    #ffffff 0%,
    #ffffff 88%,
    rgba(106, 13, 173, 0.04) 100%);
}

/* Hero image fills its larger cell cleanly */
.custom_products .bg-cat-cell--top-seller .bg-cat-img {
  aspect-ratio: 1 / 1;
}
.custom_products .bg-cat-cell--top-seller .bg-cat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Animated shimmer sweep on the hero cell — runs every 6s, very subtle */
.custom_products .bg-cat-cell--top-seller .bg-cat-img::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255, 215, 0, 0.0) 30%,
    rgba(255, 215, 0, 0.45) 50%,
    rgba(255, 255, 255, 0.0) 70%,
    transparent 100%);
  animation: bg-shimmer 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes bg-shimmer {
  0%, 60%, 100% { left: -120%; }
  75% { left: 120%; }
}
@media (prefers-reduced-motion: reduce) {
  .custom_products .bg-cat-cell--top-seller .bg-cat-img::after {
    animation: none;
    display: none;
  }
}

/* Ribbon badge — bigger, more prominent on the hero cell */
.bg-cat-grid .bg-cat-cell--top-seller::before,
.bg-cat-grid .bg-cat-cell:first-child:not(.bg-shuffled .bg-cat-cell:not(.bg-cat-cell--top-seller))::before {
  content: "★ #1 SELLER";
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 5;
  background: linear-gradient(135deg, var(--beadguy-purple) 0%, #4a0a7a 100%);
  color: var(--beadguy-gold);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  padding: 0.6rem 1.05rem;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(106, 13, 173, 0.35);
  pointer-events: none;
  text-transform: uppercase;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

/* Pre-JS first-child fallback (smaller, since cell is still 1×1 size) */
.bg-cat-grid:not(.bg-shuffled) .bg-cat-cell:first-child::before {
  font-size: 0.78rem;
  padding: 0.45rem 0.8rem;
  top: 14px;
  left: auto;
  right: 14px;
  background: var(--beadguy-purple);
  box-shadow: var(--beadguy-shadow);
}

/* Hide pre-JS first-child badge after shuffle runs (the JS-applied
   class takes over) */
.bg-cat-grid.bg-shuffled .bg-cat-cell:first-child:not(.bg-cat-cell--top-seller)::before {
  display: none;
}

/* Title — larger and styled inside the hero cell */
.custom_products .bg-cat-cell--top-seller .bg-cat-title {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--beadguy-purple);
  padding: 1rem 1.25rem 0.25rem;
  margin: 0;
  line-height: 1.2;
}
.custom_products .bg-cat-cell--top-seller .bg-cat-title__sub {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--beadguy-green);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 0.4rem;
}

/* Price callout — injected by JS */
.custom_products .bg-cat-cell--top-seller .bg-price-callout {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0 1.25rem 0.5rem;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.bg-price-callout__lead {
  font-size: 0.85rem;
  color: var(--beadguy-ink);
  opacity: 0.7;
  font-weight: 600;
}
.bg-price-callout__amount {
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--beadguy-purple);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--beadguy-purple) 0%, var(--beadguy-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.bg-price-callout__suffix {
  font-size: 0.95rem;
  color: var(--beadguy-ink);
  font-weight: 700;
}

/* ORDER NOW micro-CTA bar at the bottom of the hero cell */
.custom_products .bg-cat-cell--top-seller .bg-cta-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--beadguy-purple) 0%, var(--beadguy-gold) 100%);
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0.16em;
  padding: 0.85rem 1rem;
  margin: 0.5rem 0 0;
  text-transform: uppercase;
  font-size: 0.95rem;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  position: relative;
  overflow: hidden;
}
.custom_products .bg-cat-cell--top-seller .bg-cta-overlay__arrow {
  display: inline-block;
  font-size: 1.15rem;
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.custom_products .bg-cat-cell--top-seller:hover .bg-cta-overlay__arrow {
  transform: translateX(6px);
}
.custom_products .bg-cat-cell--top-seller .bg-cta-overlay::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%);
  transition: left 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.custom_products .bg-cat-cell--top-seller:hover .bg-cta-overlay::before {
  left: 100%;
}

/* Tablet — full-width banner (1 row × 2 col span) */
@media (max-width: 991px) {
  .custom_products .bg-cat-grid .bg-cat-cell--top-seller {
    grid-column: span 2;
    grid-row: span 1;
  }
  .custom_products .bg-cat-cell--top-seller .bg-cat-img {
    aspect-ratio: 16 / 9;
  }
  .custom_products .bg-cat-cell--top-seller .bg-cat-title {
    font-size: 1.2rem;
  }
}

/* Mobile — default 1×1 cell behavior, but keep ribbon + ring + CTA */
@media (max-width: 600px) {
  .custom_products .bg-cat-grid .bg-cat-cell--top-seller {
    grid-column: auto;
    grid-row: auto;
  }
  .custom_products .bg-cat-cell--top-seller .bg-cat-img {
    aspect-ratio: 1 / 1;
  }
  .bg-cat-grid .bg-cat-cell--top-seller::before {
    font-size: 0.72rem;
    padding: 0.4rem 0.7rem;
    top: 10px;
    left: 10px;
  }
  .custom_products .bg-cat-cell--top-seller .bg-cat-title {
    font-size: 1.05rem;
    padding: 0.75rem 0.9rem 0.25rem;
  }
  .custom_products .bg-cat-cell--top-seller .bg-price-callout {
    padding: 0 0.9rem 0.5rem;
  }
  .bg-price-callout__amount {
    font-size: 1.45rem;
  }
  .custom_products .bg-cat-cell--top-seller .bg-cta-overlay {
    font-size: 0.85rem;
    padding: 0.7rem 0.9rem;
  }
}

/* ============================================================
   PDP — bead color swatches and sectional strand previews
   Used inside .product-full-description on product pages.
   Solid swatches: 11 circular chips with hover lift.
   Sectional strands: CSS-gradient bars showing 12-bead repeats.
   ============================================================ */
.product-full-description .bg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1rem 0.5rem;
  margin: 1rem 0 1.75rem;
  padding: 0;
  list-style: none;
}
.product-full-description .bg-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--beadguy-ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  margin-bottom: 0; /* override .product-full-description ul li margin */
}
.product-full-description .bg-swatch .bg-chip {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: 0.5rem;
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.18),
              inset 0 4px 8px rgba(255, 255, 255, 0.25),
              0 2px 6px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.product-full-description .bg-swatch:hover .bg-chip {
  transform: translateY(-2px) scale(1.04);
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.22),
              inset 0 4px 8px rgba(255, 255, 255, 0.28),
              0 6px 14px rgba(0, 0, 0, 0.18);
}
.product-full-description .bg-swatch--light .bg-chip {
  border: 1px solid rgba(0, 0, 0, 0.20); /* visible white-on-white */
}
.product-full-description .bg-swatch .bg-label {
  display: block;
  line-height: 1.2;
}

.product-full-description .bg-strands {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 1rem 0 1.75rem;
}
.product-full-description .bg-strand {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.95rem;
  background: rgba(106, 13, 173, 0.04);
  border-radius: 10px;
  border: 1px solid rgba(106, 13, 173, 0.10);
}
.product-full-description .bg-strand-preview {
  flex: 1 1 auto;
  height: 30px;
  border-radius: 15px;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.20),
              inset 0 2px 3px rgba(255, 255, 255, 0.22),
              0 2px 4px rgba(0, 0, 0, 0.10);
  border: 1px solid rgba(0, 0, 0, 0.10);
  min-width: 220px;
}
.product-full-description .bg-strand-preview--bordered {
  border-color: rgba(0, 0, 0, 0.20); /* darker rim for patterns containing white */
}
.product-full-description .bg-strand-label {
  flex: 0 0 auto;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--beadguy-purple);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  white-space: nowrap;
}
.product-full-description .bg-strand-label em {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--beadguy-ink);
  opacity: 0.75;
  margin-top: 0.15rem;
}

@media (max-width: 600px) {
  .product-full-description .bg-swatches {
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    gap: 0.85rem 0.4rem;
  }
  .product-full-description .bg-swatch .bg-chip {
    width: 46px;
    height: 46px;
  }
  .product-full-description .bg-swatch {
    font-size: 0.78rem;
  }
  .product-full-description .bg-strand {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.6rem 0.8rem;
  }
  .product-full-description .bg-strand-preview {
    width: 100%;
    min-width: 0;
  }
  .product-full-description .bg-strand-label {
    text-align: center;
    white-space: normal;
  }
}

/* ============================================================
   Per-shape pricing chart (.bg-pricechart) — post_content
   Custom Shape Medallion 1-Color Imprint (post 512): Brian's
   Excel price chart rendered as an HTML table. Added 2026-06-10.
   ============================================================ */
.product-full-description .bg-pricechart-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0 0.5rem;
  border: 1px solid rgba(106, 13, 173, 0.18);
  border-radius: 8px;
}
.product-full-description table.bg-pricechart {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 660px;
  margin: 0;
}
.product-full-description table.bg-pricechart th,
.product-full-description table.bg-pricechart td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  vertical-align: middle;
}
.product-full-description table.bg-pricechart thead th {
  background: var(--beadguy-purple);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.product-full-description table.bg-pricechart thead th:nth-child(n+4),
.product-full-description table.bg-pricechart tbody td:nth-child(n+4) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.product-full-description table.bg-pricechart tbody tr:nth-child(even) td {
  background: rgba(106, 13, 173, 0.04);
}
.product-full-description table.bg-pricechart tbody tr:hover td {
  background: rgba(255, 215, 0, 0.13);
}
.product-full-description table.bg-pricechart .bg-pricechart-subhead th {
  background: var(--beadguy-gold);
  color: var(--beadguy-ink);
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
}
@media (max-width: 768px) {
  .product-full-description table.bg-pricechart {
    font-size: 0.86rem;
    min-width: 580px;
  }
  .product-full-description table.bg-pricechart th,
  .product-full-description table.bg-pricechart td {
    padding: 0.45rem 0.5rem;
  }
}

/* GOLD BODY 2026-07-07 (Tony): remove white gap + gold main */
/* 2026-07-21 (Tony: yellow bg not moving like mardigras): opaque body bg + flat image was BURYING the
   z-index:-1 .bg-mardi-layer (see memory reference_moving_background_mobile_technique). Gold fallback on
   <html> (the canvas), body transparent -> the animated Mardi layer shows through, matching mardigras. */
html{background-color:#FFCA00!important}
body{background:transparent!important}

/* Kill the white content wrapper so the gold shows (was the white gap) 2026-07-07 */
.site-content-contain{background:transparent!important}

/* ============================================================
   2026-07-07 (Tony): promotionbeads.com-style UNIFORM category grid
   — equal rounded cards + hover/click lift. Order stays per Brian's
   email; neutralizes the asymmetric #1-seller hero cell.
   ============================================================ */
.custom_products .bg-cat-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.4rem !important;
  align-items: stretch !important;
}
.custom_products .bg-cat-grid .bg-cat-cell {
  grid-column: auto !important;
  grid-row: auto !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  outline: none !important;
  box-shadow: 0 6px 20px rgba(35, 20, 55, 0.10);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease !important;
  display: flex; flex-direction: column;
}
.custom_products .bg-cat-grid .bg-cat-cell a {
  display: flex; flex-direction: column; height: 100%; text-decoration: none;
}
.custom_products .bg-cat-grid .bg-cat-img {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: #fff;
}
.custom_products .bg-cat-grid .bg-cat-img img {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important; object-position: center; padding: 10px;
}
.custom_products .bg-cat-grid .bg-cat-title {
  font-size: 1rem !important; font-weight: 800; text-align: center;
  color: var(--beadguy-purple); padding: 12px 10px 16px; margin: 0; line-height: 1.25;
}
/* hover + click affect on each card */
.custom_products .bg-cat-grid .bg-cat-cell:hover {
  transform: translateY(-7px) scale(1.025);
  box-shadow: 0 18px 40px rgba(106, 13, 173, 0.22);
}
.custom_products .bg-cat-grid .bg-cat-cell:active,
.custom_products .bg-cat-grid .bg-cat-cell a:active {
  transform: translateY(-2px) scale(0.99);
  box-shadow: 0 8px 20px rgba(106, 13, 173, 0.18);
}
/* small #1-Seller ribbon only; drop the big-cell clutter for uniformity */
.bg-cat-grid .bg-cat-cell--top-seller::before {
  top: 9px !important; left: 9px !important; font-size: 0.62rem !important;
  padding: 0.28rem 0.55rem !important; border-radius: 6px !important;
}
.custom_products .bg-cat-cell--top-seller .bg-cat-img::after,
.bg-cat-grid .bg-price-callout, .bg-cat-grid .bg-cta-overlay { display: none !important; }
@media (max-width: 991px) { .custom_products .bg-cat-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .custom_products .bg-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .85rem !important; } }

/* ============================================================
   FIX 2026-07-10 (#1): product-page breadcrumb readability.
   The Woo breadcrumb sits on the white->yellow band and the last
   crumb was low-contrast purple on yellow. Give it a white rounded
   pill with dark, high-contrast text and lift it clear of the title.
   Scoped to single-product so blog/search breadcrumbs are untouched.
   ============================================================ */
.single-product .breadcrumbs_in.woocommerce_breadcrumbs {
    float: none !important;
    display: inline-block;
    margin: 4px 0 18px !important;
    padding: 8px 16px;
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    max-width: 100%;
    box-sizing: border-box;
}
.single-product .breadcrumbs_in.woocommerce_breadcrumbs #breadcrumbs {
    color: #1a1a1a !important;
}
.single-product .woocommerce_breadcrumbs #breadcrumbs li,
.single-product .woocommerce_breadcrumbs #breadcrumbs li a {
    color: #1a1a1a !important;
    font-weight: 600;
}
.single-product .woocommerce_breadcrumbs #breadcrumbs li a:hover {
    color: var(--beadguy-purple, #6A0DAD) !important;
    text-decoration: underline;
}
/* current (last) crumb: dark, readable, clearly the active page */
.single-product .woocommerce_breadcrumbs #breadcrumbs li strong,
.single-product .woocommerce_breadcrumbs #breadcrumbs li.item-current strong {
    color: var(--beadguy-purple, #6A0DAD) !important;
    font-weight: 800;
}
.single-product .woocommerce_breadcrumbs #breadcrumbs .separator {
    color: #555 !important;
    font-size: 16px !important;
    margin-top: 0 !important;
}
@media (max-width: 600px) {
    .single-product .breadcrumbs_in.woocommerce_breadcrumbs {
        padding: 6px 12px;
    }
    .single-product .woocommerce_breadcrumbs #breadcrumbs li,
    .single-product .woocommerce_breadcrumbs #breadcrumbs li a { font-size: 12px !important; }
}

/* ============================================================
   FIX 2026-07-10 (#5): home hero badge = round PROMOTIONBEADS.COM /
   BEADGUYPROMOS.COM bead-man badge on a WHITE circle, matching
   mardigrascustombeads.com. 5px padding + full border-radius so the
   badge sits right to the edge of the white circle. Centered + responsive.
   ============================================================ */
.mainslider .slider_text .wrap > img.bg-hero-badge {
    display: block;
    width: min(380px, 82vw);
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto 18px;
    padding: 5px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 360px;
    object-fit: contain;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
@media (max-width: 600px) {
    .mainslider .slider_text .wrap > img.bg-hero-badge {
        width: min(260px, 74vw);
        margin-bottom: 12px;
    }
}

/* ============================================================
   Category-1 SUBCATEGORY landing grid (2026-07-10).
   Mirrors the homepage .bg-cat-grid tile look on product_cat
   archives. Scoped to .bg-subcat-grid-wrap so it never touches
   the homepage grid (which is scoped under .custom_products).
   ============================================================ */
.bg-subcat-grid-wrap {
  margin: 1.6rem 0 2.2rem;
}
.bg-subcat-grid-wrap .bg-cat-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.4rem !important;
  align-items: stretch !important;
  opacity: 1 !important;
}
.bg-subcat-grid-wrap .bg-cat-grid .bg-cat-cell {
  list-style: none;
  margin: 0;
  background: #ffffff !important;
  border: 2px solid #ece3f5;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 20px rgba(35, 20, 55, 0.10);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease !important;
  display: flex;
  flex-direction: column;
}
.bg-subcat-grid-wrap .bg-cat-grid .bg-cat-cell a,
.bg-subcat-grid-wrap .bg-cat-grid .bg-subcat-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}
.bg-subcat-grid-wrap .bg-cat-grid .bg-cat-img {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg-subcat-grid-wrap .bg-cat-grid .bg-cat-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center;
  padding: 10px;
}
.bg-subcat-grid-wrap .bg-cat-grid .bg-cat-title {
  font-size: 1rem !important;
  font-weight: 800;
  text-align: center;
  color: var(--beadguy-purple);
  padding: 12px 10px 16px;
  margin: 0;
  line-height: 1.25;
}
.bg-subcat-grid-wrap .bg-cat-grid .bg-cat-cell:hover {
  transform: translateY(-7px) scale(1.025);
  box-shadow: 0 18px 40px rgba(106, 13, 173, 0.22);
}
.bg-subcat-grid-wrap .bg-cat-grid .bg-cat-cell a:active {
  transform: translateY(-2px) scale(0.99);
}
.bg-subcat-grid-wrap .bg-subcat-noimg {
  color: var(--beadguy-purple);
  font-weight: 800;
  text-align: center;
  padding: 14px;
}
/* Coming Soon tile: visible badge on initial load, all devices, no hover needed. */
.bg-subcat-grid-wrap .bg-subcat-cell--soon {
  border: 2px dashed #c9b8e0;
  background: #faf7fe !important;
}
.bg-subcat-grid-wrap .bg-subcat-cell--soon .bg-subcat-soon-img {
  aspect-ratio: 1 / 1;
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    45deg,
    #f3ecfb,
    #f3ecfb 14px,
    #ece0f7 14px,
    #ece0f7 28px
  );
}
.bg-subcat-grid-wrap .bg-subcat-soon-badge {
  display: inline-block;
  background: var(--beadguy-purple);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(106, 13, 173, 0.28);
}
.bg-subcat-grid-wrap .bg-subcat-cell--soon .bg-cat-title {
  color: #7a6a92;
}
@media (max-width: 991px) {
  .bg-subcat-grid-wrap .bg-cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .bg-subcat-grid-wrap .bg-cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .85rem !important;
  }
}

/* Tony 2026-07-13: the AEO SEO-demote turns the slide heading into <h2>, so the parent theme's
   `.slider_text h1` styling (white, Segoe UI, 38px) stopped applying and the hero text went faint.
   Mirror mardigrascustombeads.com's readable hero font onto the demoted <h2>. */
.mainslider .slider_text h2{ margin:0; padding:0; font-size:38px; color:#fff; font-family:'Segoe UI', system-ui, Arial, sans-serif; font-weight:normal; text-transform:uppercase; line-height:1.15; }
@media(max-width:1200px){ .mainslider .slider_text h2{ font-size:33px; } }
@media(max-width:1024px){ .mainslider .slider_text h2{ font-size:27px; } }
@media(max-width:768px){ .mainslider .slider_text h2{ font-size:25px; font-weight:600; } }
@media(max-width:600px){ .mainslider .slider_text h2{ font-size:23px; } }
@media(max-width:480px){ .mainslider .slider_text h2{ font-size:20px; } }

/* Tony 2026-07-13: subcategory grids are NOT shuffled and must NOT show a "#1 SELLER" badge or a 2x2 hero cell -- fixed spreadsheet order, left-to-right/top-to-bottom. */
.bg-subcat-grid .bg-cat-cell::before,
.bg-subcat-grid .bg-cat-cell:first-child::before { content: none !important; display: none !important; }
.bg-subcat-grid .bg-cat-cell--top-seller { grid-column: auto !important; grid-row: auto !important; }

/* Tony 2026-07-13: gently MOVE the gold Mardi Gras confetti background (background_2.jpg) behind the
   product grid + hero -- slow diagonal drift so it feels alive without being distracting. */
@keyframes bg-mardi-drift {
  0%   { background-position: 47% 0%; }
  50%  { background-position: 53% 100%; }
  100% { background-position: 47% 0%; }
}
/* ===== MOVING YELLOW MARDI-GRAS BACKGROUND — faithful copy of mardigrascustombeads.com (Tony 2026-07-21) =====
   mardigras paints background_2.jpg (gold field + light confetti shapes: hexagons/triangles/squares/dots)
   with background-attachment:fixed so it parallax-scrolls behind the content. We use the SAME image on a
   single fixed z-index:-1 layer behind everything, PLUS a slow drift so the shapes visibly move even at
   rest (Tony repeatedly: "yellow not moving"). Content sections stay transparent so the one field shows
   through seamlessly — no seams, no white bands. */
.bg-home-hero, .custom_products, .innerpage, .innerpage_background,
#content.site-content, .site-main, #primary.content-area, .woocommerce_page_benner,
.site-content-contain, body {
  background-image: none !important;
  background-color: transparent !important;
  animation: none !important;
}
html { background-color: #FFCC00 !important; }  /* gold fallback canvas behind the shapes */
.bg-mardi-layer {
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #FFCC00;
  /* the REAL mardigras shapes tile. image/repeat/size set SEPARATELY so no !important
     background-position is written (an !important position beats the animation and freezes it). */
  background-image: url("/wp-content/themes/promotionbeads/assets/images/background_2.jpg") !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  -webkit-animation: bg-confetti-drift 40s linear infinite;
          animation: bg-confetti-drift 40s linear infinite;
}
@-webkit-keyframes bg-confetti-drift { from { background-position: 0 0; } to { background-position: 700px 1050px; } }
@keyframes bg-confetti-drift { from { background-position: 0 0; } to { background-position: 700px 1050px; } }

/* Tony 2026-07-13 inner-page hero: KEEP the bokeh (Slider_1.jpg) with a diagonal bottom; kill the WHITE
   slider_bottom.png slant so the moving yellow background shows below the hero (not white). */
.innerpage_background {
  background: url("/wp-content/themes/promotionbeads/assets/images/Slider_1.jpg") center top / cover no-repeat !important;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  animation: none !important;
}
.innerpage::before { display: none !important; }

/* Beadguy leaf-subcategory DETAIL landing (Tony 2026-07-13): readable white cards on the moving yellow, round logo. */
.bg-detail{max-width:1080px;margin:0 auto;padding:10px 14px 44px}
.bg-detail-card{background:#fff;border-radius:14px;box-shadow:0 4px 18px rgba(0,0,0,.10);padding:22px 26px;margin:0 0 18px}
.bg-detail-card h3{color:#6a0dad;margin:0 0 12px;font-size:1.25rem}
.bg-detail-head{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.bg-detail-logo{flex:0 0 190px;max-width:190px}
.bg-detail-logo img{width:190px;height:190px;object-fit:contain;border-radius:50%;background:#fff;display:block;box-shadow:0 3px 12px rgba(0,0,0,.12);border:3px solid #6a0dad}
.bg-detail-intro{flex:1;min-width:260px}
.bg-detail-title{color:#0F2744;font-size:1.7rem;margin:0 0 8px}
.bg-detail-lede{font-size:1.05rem;line-height:1.6;color:#334155;margin:0 0 14px}
.bg-detail-cta{display:flex;gap:10px;flex-wrap:wrap}
.bg-btn{display:inline-block;background:#6a0dad;color:#fff !important;font-weight:800;text-decoration:none;padding:.7rem 1.3rem;border-radius:8px}
.bg-btn:hover{background:#54098a}
.bg-btn--ghost{background:#fff;color:#6a0dad !important;border:2px solid #6a0dad}
/* Brian Kalakie 2026-08-10, "Category 6" Sections 1 and 2, in red font:
   "(Fix the space gap between lead time and Standard Colors. Bring up so that the box can be
   smaller from top to bottom)" and, on the Shot Glass sheet, "Fix gap between lead time and
   Standard Colors".

   MEASURED CAUSE, not guessed. This was a two column GRID, so every grid ROW was as tall as its
   TALLEST cell. "Lead Time" is one line and sits beside "Sizes & Options" which is four lines,
   so the row stretched to 82px and left 59px of dead space under Lead Time, and "Standard
   Colors" - directly beneath it in the same column - started 67px after the Lead Time text
   ended. Chrome 1440px, both leaves, measured with a Range over the text nodes.

   align-items:start does NOT fix this. It shrinks the li box but the ROW keeps its height, so
   the visible void is unchanged. Multi column flows the items and packs them, which is exactly
   "bring up so that the box can be smaller from top to bottom", and it is the same mechanism
   .bg-who on the next line already uses. Measured after: spec list 401px -> 312px on term 71
   and 376px -> ~300px on term 73, zero overlap, no horizontal scroll. */
.bg-spec{list-style:none;padding:0;margin:0;columns:2;-webkit-columns:2;column-gap:24px}
.bg-spec li{line-height:1.5;margin:0 0 8px;break-inside:avoid;-webkit-column-break-inside:avoid}
.bg-spec li:last-child{margin-bottom:0}
.bg-spec strong{color:#0F2744}
.bg-who{columns:2;-webkit-columns:2;gap:24px;margin:0;padding-left:18px}.bg-who li{margin:4px 0;break-inside:avoid}
.bg-price-wrap{overflow-x:auto}
.bg-price{width:100%;border-collapse:collapse;font-size:.95rem}
.bg-price th{background:#0F2744;color:#fff;padding:8px 12px;text-align:left}
.bg-price td{border:1px solid #e6e6e6;padding:8px 12px}
.bg-note{font-size:.85rem;color:#667;margin:10px 0 0}
.bg-faq-item{border-bottom:1px solid #eef2f5}
.bg-faq-item summary{cursor:pointer;font-weight:700;color:#0F2744;padding:9px 0}
.bg-faq-a{padding:2px 0 10px;color:#334155;line-height:1.6}
.bg-safety{border-left:5px solid #C4A052}
@media(max-width:640px){.bg-spec{columns:1;-webkit-columns:1}.bg-who{columns:1;-webkit-columns:1}.bg-detail-logo{margin:0 auto}}

/* Brian Kalakie 2026-08-10, "Category 6" Section 1, in red font:
   "About Blinking Shot Glass Beads(FIX the paragraph on website to be spaced like below)"

   MEASURED CAUSE. The About block already stores seven separate paragraphs and the template
   already emits seven <p> elements, so the DATA was never the problem. The parent theme carries
   `.entry-content p{margin:0}` at specificity (0,1,1), which beats its own `p{margin:0 0 1.5em}`,
   and the leaf renders inside .entry-content. Every gap between those seven paragraphs measured
   0px in Chrome, so the section rendered as one unbroken wall of text while his document shows
   them as separated blocks. This selector is (0,2,1) so it wins without !important, and it is
   scoped to the About card so no other card's spacing moves. Line height stays 1.53x, above the
   1.30x house minimum, and the paragraphs wrap rather than shrink. */
.entry-content .bg-about p{margin:0 0 14px}
.entry-content .bg-about p:last-child{margin-bottom:0}
/* leaf detail page: hide the duplicate archive title/description (the card supplies them).
   The .entry-header sits in a plain .wrap (sibling before #primary .site-main), so it is NOT
   a child of .site-main - target it directly. The bokeh hero title is .page_titale h2 and is
   untouched. */
.bg-has-detail .entry-header,
.bg-has-detail .woocommerce-products-header,
.bg-has-detail .term-description,
.bg-has-detail .taxonomy-description{display:none !important}

/* ===== Tony 2026-07-14: leaf-detail PRODUCT GALLERY (mardigras-style big image + click/hover thumbnails) + hide redundant archive loop ===== */
.bg-detail-head{align-items:flex-start}
.bg-detail-gallery{display:flex;flex-direction:column;gap:12px;flex:0 0 360px;max-width:360px}
.bg-gal-main{background:#fff;border:1px solid #eadfc0;border-radius:14px;padding:12px;box-shadow:0 8px 22px -14px rgba(35,26,46,.4)}
.bg-gal-main-img{display:block;width:100%;height:auto;border-radius:8px;aspect-ratio:1/1;object-fit:contain}
.bg-gal-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.bg-gal-thumb{width:74px;height:74px;padding:4px;background:#fff;border:2px solid #e2d3a8;border-radius:10px;cursor:pointer;transition:border-color .15s,transform .15s;overflow:hidden}
.bg-gal-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.bg-gal-thumb:hover{border-color:#6A0DAD;transform:translateY(-2px)}
.bg-gal-thumb.is-active{border-color:#6A0DAD;box-shadow:0 0 0 2px rgba(106,13,173,.25)}
.bg-has-detail ul.products,.bg-has-detail .woocommerce-result-count,.bg-has-detail .woocommerce-ordering,.bg-has-detail nav.woocommerce-pagination{display:none !important}
@media(max-width:640px){.bg-detail-gallery{flex:1 1 100%;max-width:100%}}

/* 2026-07-21 (Tony: "navigation hidden behind the top bar"): the parent theme forces
   .navigation-top{display:none}, and the fixed notibar (.njt-nofi-container) is ~62px tall (the Request-a-Quote
   button makes it taller than 44px). Restore the top menu as a real navy bar and keep it BELOW the notibar. */
.navigation-top { display: block !important; position: relative; z-index: 60; background: #0F2744; }
.navigation-top .wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.navigation-top .main-navigation { display: block; }
.navigation-top .menu-toggle { display: none !important; }
.navigation-top .main-navigation ul { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 2px 6px; list-style: none !important; margin: 0 !important; padding: 6px 0 !important; }
.navigation-top .main-navigation li { position: relative; float: none !important; width: auto !important; margin: 0 !important; border: 0 !important; }
.navigation-top .main-navigation li a { display: block; color: #FAFAFA; text-decoration: none; font-weight: 600; font-size: .9rem; padding: 8px 12px; border-radius: 6px; line-height: 1.2; }
.navigation-top ul li a:hover, .navigation-top ul li.current-menu-item > a { color: #0F2744; background: #C4A052; }
/* nested submenus = SEXY dark-glass dropdowns (Tony): dark panel, gold hairline, gold-gradient hover slide */
.navigation-top ul ul { display: none; position: absolute; top: 100%; left: 0; flex-direction: column; align-items: stretch;
  background: rgba(14,19,30,.97) !important; min-width: 250px; z-index: 9100;
  box-shadow: 0 16px 38px rgba(0,0,0,.55); border: 1px solid rgba(196,160,82,.40);
  border-radius: 12px; padding: 8px; gap: 2px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.navigation-top li:hover > ul, .navigation-top li:focus-within > ul { display: flex; }
.navigation-top ul ul li { width: 100% !important; margin: 0 !important; }
.navigation-top ul ul li a { white-space: nowrap; display: block; padding: 10px 16px !important; border-radius: 8px;
  color: #F3ECDA !important; background: transparent !important; font-weight: 600; font-size: .85rem; letter-spacing: .01em;
  transition: background .18s ease, color .18s ease, padding-left .18s ease; }
.navigation-top ul ul li a:hover, .navigation-top ul ul li a:focus {
  background: linear-gradient(90deg,#C4A052 0%,#e2c47f 100%) !important; color: #0F2744 !important; padding-left: 22px !important; }
/* when it becomes fixed on scroll, sit below the ~62px notibar (not behind it) */
.site-navigation-fixed.navigation-top { top: 62px !important; }
.admin-bar .site-navigation-fixed.navigation-top { top: 94px !important; } /* 32px admin bar + 62px notibar */

/* 2026-07-21 (Tony): logo tucked into the LEFT of the full-width nav bar; menu spreads across the
   FULL remaining width in ONE row (like the version Tony approved), phone dropped from nav (already
   in the top bar). Full-width navy — NOT a centered partial box. */
/* Sticky header: logo+menu stay pinned just below the fixed 62px notibar when scrolling
   (Tony: "still does not show when scroll" — the theme's JS fixed-nav never fired, so the
   relative nav slid under the notibar). Whole header sticks as one unit so the logo stays too. */
/* Nav bar = BLACK 50% TRANSPARENT, NO image (Tony) — the moving background/bubbles show straight
   through it and the dark gives white-text contrast. Not the baked-in bokeh, not flat navy. */
#masthead.site-header {
  background: rgba(0,0,0,.5) !important;
  position: sticky !important; top: 62px; z-index: 9000;
  padding: 0 !important;   /* kill the theme's 18px top padding — it showed the gold bg through the
                              semi-transparent bar as a "big border on top" and pushed the nav down (Tony) */
}
.admin-bar #masthead.site-header { top: 94px; } /* 32px wp admin bar + 62px notibar */
/* When the notibar is dismissed, collapse the 62px offset to 0 so the masthead
   sits flush and no gold strip shows. Class added by beadguy-notibar-fix.php. */
body.notibar-dismissed #masthead.site-header { top: 0 !important; }
body.notibar-dismissed.admin-bar #masthead.site-header { top: 32px !important; }
.site-navigation-fixed.navigation-top { position: relative !important; top: auto !important; } /* neutralize theme JS double-fix */
/* shorter bar (Tony: "make the height less so the logo is a circle not oval") */
.site-header .wrap { display: flex !important; align-items: center; gap: 18px; max-width: 100%; margin: 0; padding: 1px 24px; background: transparent; }
.site-branding { flex: 0 0 auto; margin: 0 !important; padding: 0 !important; text-align: left; }
.site-branding .bg-site-logo, .site-branding img { height: 44px !important; width: 44px !important; object-fit: contain !important; display: block; margin: 0 !important; }
.navigation-top { flex: 1 1 auto; background: transparent !important; }
/* spread the menu across the whole remaining width, single row */
.navigation-top .main-navigation ul { display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center; width: 100%; gap: 4px; }
.navigation-top .main-navigation > div > ul,
.navigation-top .main-navigation ul#top-menu { width: 100%; }
/* phone number is already in the top bar -> drop the duplicate nav item (Tony: "minus phone number") */
.navigation-top li:has(> a[href^="tel:"]) { display: none !important; }
/* desktop: full menu shows, theme's phone hamburger stays hidden */
#masthead .mobile_menu { display: none !important; }
/* 2026-08-16 (Opie): 767 -> 1080. MEASURED in a real browser: the mega menu needs 1077px,
   but the theme handed over to it at 768px, so EVERY width from 768 to 1079 had horizontal
   scroll (scrollWidth 1077 vs clientWidth 768) - a rule 11 violation on every page of the
   site. It was missed because the responsive sweep tested 360/390/1280 and 768 sits in the
   gap. Max Mega Menu's own responsive_breakpoint was moved 600px -> 1080px to match, so the
   two now agree and the theme hamburger covers the whole band the mega menu cannot fit. */
@media (max-width: 1080px){
  .site-header .wrap { flex-wrap: nowrap; gap: 8px; padding: 4px 12px; justify-content: space-between; align-items: center; }
  .site-branding { flex: 0 0 auto; }
  .site-branding .bg-site-logo, .site-branding img { height: 40px !important; }
  .navigation-top { display: none !important; }          /* phones use the theme hamburger, not the stacked desktop menu */
  #masthead .mobile_menu { display: block !important; flex: 0 0 auto; position: static !important; }
  #masthead #mobile_phone { display: none !important; }  /* number already lives in the top bar */
}
/* Mobile MEGA-MENU panel polish (Tony 2026-07-21): drop the phone item, push Home below the
   toggle/close so they don't overlap, and cut the wasted vertical space between items. */
@media (max-width: 1080px){
  li.mega-menu-item:has(> a[href^="tel:"]),
  #mega-menu-top a[href^="tel:"] { display: none !important; }
  #mega-menu-top.mega-menu-mobile-open,
  ul#mega-menu-top { padding-top: 42px !important; }     /* clear the hamburger/× so Home starts below it */
  #mega-menu-top > li.mega-menu-item > a.mega-menu-link {
    padding: 9px 16px !important; height: auto !important; min-height: 0 !important;
    line-height: 1.2 !important; font-size: 1rem !important; }
  #mega-menu-top > li.mega-menu-item { margin: 0 !important; border: 0 !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRICE TABLE INSIDE THE WHITE INTRO BOX (Tony 2026-07-29)
   Order in the white container is now: title, short description, price table,
   then the Request a Quote / Call buttons. "Volume Pricing" is no longer its own
   section further down the page - a buyer should not have to scroll past four
   containers to find what it costs.
   It is an h4 here, not an h3, because it now sits UNDER the h2 product title
   inside the same box; an h3 would have skipped no level but would have read as a
   sibling of the page's real sections.
   ───────────────────────────────────────────────────────────────────────────── */
.bg-detail-price { margin: 14px 0 18px; }
.bg-detail-price h4 {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--beadguy-purple, #6A0DAD);
}
/* The table must scroll INSIDE its own box on a narrow screen. The house baseline
   is that the page itself never scrolls sideways, so the overflow has to be owned
   by the wide element rather than pushed onto <body>. */
.bg-detail-price .bg-price-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
/* "As Low as $3.09 each at 1,000" (Tony 2026-08-13). Sits between the Volume Pricing
   heading and the table it is computed from, so the buyer reads the answer and then the
   evidence. Plain text flow, NOT flex: the line is one sentence, and the anonymous-flex-item
   split would replace real spaces with layout gaps, which changes what a screen reader and a
   voice assistant read back. No fixed width anywhere, so it wraps rather than widen the card. */
.bg-detail-price .bg-aslowas {
    margin: 0 0 10px;
    padding: 8px 12px;
    background: #F6F1FB;
    border-left: 4px solid var(--beadguy-purple, #6A0DAD);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: #0F2744;
    max-width: 100%;
    overflow-wrap: break-word;
}
.bg-detail-price .bg-aslowas .bg-aslowas-price {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--beadguy-purple, #6A0DAD);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.bg-detail-price .bg-aslowas .bg-aslowas-qty { font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
    .bg-detail-price .bg-aslowas { font-size: .95rem; padding: 7px 10px; }
    .bg-detail-price .bg-aslowas .bg-aslowas-price { font-size: 1.2rem; }
}

/* Per-variant "Starting at" list, for TRANSPOSED tables whose rows are variants rather than
   quantity tiers (Custom Stadium Cups). Same card treatment as .bg-aslowas so the two never look
   like different kinds of claim, but a list because a transposed table has one entry price PER
   VARIANT and no single stateable figure. list-style is killed and the marker rebuilt as a dot,
   because the parent theme's ul resets vary by context and a missing bullet ran the lines
   together into one sentence. max-width 100% + break-word: never introduce horizontal scroll. */
.bg-detail-price .bg-startingat {
    margin: 0 0 10px;
    padding: 8px 12px;
    background: #F6F1FB;
    border-left: 4px solid var(--beadguy-purple, #6A0DAD);
    border-radius: 8px;
    list-style: none;
    font-size: 1rem;
    line-height: 1.45;
    color: #0F2744;
    max-width: 100%;
    overflow-wrap: break-word;
}
.bg-detail-price .bg-startingat li {
    margin: 0;
    padding: 0 0 0 14px;
    position: relative;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.bg-detail-price .bg-startingat li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--beadguy-purple, #6A0DAD);
}
@media (max-width: 600px) {
    .bg-detail-price .bg-startingat { font-size: .95rem; padding: 7px 10px; }
}

.bg-detail-price table.bg-price { margin: 0; font-size: .92rem; }
.bg-detail-price .bg-price-min { margin: 8px 0 0; font-size: .92rem; }
.bg-detail-price .bg-note { margin: 6px 0 0; font-size: .82rem; opacity: .85; }
/* The CTA now follows the table, so it needs its own separation. */
.bg-detail-head .bg-detail-cta { margin-top: 14px; }

/* ============================================================
   2026-08-12 (Brian Kalakie, 080226 HOME PAGE changes.docx):
   "Custom Shape Mardi Gras beads - make picture larger if possible"
   "Custom overseas Mardi Gras Beads - make larger if possible"

   The homepage tile is a fixed 1/1 box with object-fit:contain and
   10px padding, so a product photo that carries white margin renders
   small. These two photos must NOT be re-cropped (the Custom Shape
   file was already cropped once to remove a burned-in caption), so
   the enlargement is done in CSS only: drop the padding and scale
   the image inside its own overflow:hidden box.

   The per-tile scale comes from --bg-cat-zoom set inline on the <li>
   so each photo gets only as much zoom as its own white margin can
   absorb; scaling past that would clip the product itself.
   ============================================================ */
.custom_products .bg-cat-grid .bg-cat-cell--zoom .bg-cat-img img {
  padding: 0 !important;
  transform: scale(var(--bg-cat-zoom, 1));
  transform-origin: 50% 50%;
}

/* ============================================================
   2026-08-13 — "Companies That Trust Our Products" trust strip:
   subtle continuous right-to-left marquee.

   WHERE THE MARKUP LIVES. In the text widget (widget_text index 4),
   NOT in front-page.php. The parent theme registers this sidebar with
   'after_title' => '</h3' (missing '>', promotionbeads/functions.php:397).
   That malformed end tag swallows the widget's own opening
   <div class="textwidget">, so the widget's trailing </div> closes
   .companies_logo .wrap early and anything appended after
   dynamic_sidebar() renders OUTSIDE the yellow band. Widget text lands
   inside it. Do not move this markup without fixing the parent theme.

   WHY PADDING AND NOT gap FOR TILE SPACING. The track holds two
   identical <ul> sets. A gap on the track would space the two sets
   differently from the tiles inside them, so the seam at the loop point
   would be visibly wider than every other gap. Symmetric padding on each
   tile makes every gap 2x the padding, including the set-to-set seam.

   WHY THE LOOP IS SEAMLESS. Two identical sets, animation travels
   exactly -50% of the track = one whole set. The final frame is
   pixel-identical to frame 0, so the restart is invisible. Changing the
   number of sets without changing the -50% breaks this.

   TILE CONTRACT. A name tile and a logo tile are the same box: same
   padding, same optical height. Logos are sized by height with width:auto
   so any future logo self-sizes from its own aspect ratio. Promoting a
   name to a real logo is a one-line markup swap in the widget, no CSS
   change. Only Philips and Discover artwork exists; the other five are
   text because we hold no logo files for them and four are third-party
   marks that are the client's to supply.
   ============================================================ */
.companies_logo .bg-trust-marquee {
  --bg-trust-duration: 55s;
  margin: 4px 0 0;
  max-width: 100%;
}

/* overflow:hidden here is what keeps a track wider than the screen from
   ever becoming horizontal PAGE scroll. Do not change it to visible. */
.companies_logo .bg-trust-viewport {
  overflow: hidden;
  max-width: 100%;
  padding: 8px 0;
  /* Tiles fade in and out at the edges instead of being chopped off. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* The strip is a tab stop so a keyboard user can land on it and stop the
   motion, which is the same affordance a mouse user gets by hovering. */
.companies_logo .bg-trust-viewport:focus {
  outline: 3px solid #0A0A0A;
  outline-offset: 2px;
}

.companies_logo .bg-trust-track {
  display: flex;
  align-items: center;
  width: -webkit-max-content;
  width: max-content;
  animation: bg-trust-scroll var(--bg-trust-duration) linear infinite;
  will-change: transform;
}

.companies_logo .bg-trust-set {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.companies_logo .bg-trust-set > li.bg-trust-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0 34px;
  min-height: 68px;
  background: none;
  /* Matches .companies_logo h3 so the tiles read as part of the section. */
  color: #000000;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  white-space: nowrap;
}

/* THE LOGO LINK, Tony 2026-08-13. Each mark links to that company's own site in a new tab.
   This rule exists so the anchor is a PURE WRAPPER and changes nothing about the tile: as a
   flex child of the <li> it would otherwise pick up the theme's global anchor colour and
   underline, and it must not add a box of its own around the chip. The <img> keeps every one
   of its own properties (height, padding, plate, radius, shadow) because those live on
   .bg-trust-item--logo img, which is a DESCENDANT selector and so still matches through the
   anchor. Nothing about the artwork changes.
   The focus ring is not decoration: these are now seven keyboard-reachable links, and a link
   you cannot see yourself land on is a link a keyboard user cannot use. It matches the ring
   already used on .bg-trust-viewport:focus. :focus-visible so a mouse click does not draw it. */
.companies_logo .bg-trust-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  border: 0;
  box-shadow: none;
  background: none;
  padding: 0;
  margin: 0;
  line-height: 0;
}

.companies_logo .bg-trust-link:focus-visible {
  outline: 3px solid #0A0A0A;
  outline-offset: 3px;
  border-radius: 15px;
}

/* THE WHITE CHIP IS DELIBERATE, AND IT IS LOAD-BEARING.
   Both logo files we hold are opaque white artwork: Companies_Logo_05.png (Discover)
   has no alpha channel at all, and Companies_Logo_02.png (Philips) is RGBA whose alpha
   never drops below 199, i.e. a near-solid white plate. Dropped straight onto the yellow
   band they read as two ragged white rectangles. The artwork must NOT be edited or
   re-cut (third-party marks, and we hold no source files), and mix-blend-mode:multiply
   is not an option either because multiplying Philips blue against this yellow turns the
   mark green, which is worse than a white box.
   So the white becomes an intentional, uniform chip. Padding on the <img> extends the
   artwork's own white into a rounded plate, which also means ANY future logo normalises
   to the same chip whether its background is white or transparent. That is what keeps
   the swap-a-name-for-a-logo promise cheap.
   box-sizing stays content-box on purpose: height is the ARTWORK height, padding is the
   chip margin, so logos of different proportions still align optically. */
.companies_logo .bg-trust-item--logo img {
  display: block;
  box-sizing: content-box;
  width: auto;
  /* ONE HEIGHT FOR EVERY DEVICE, Tony 2026-08-13: "make that for all devices as we see many css
     for media thing but this is perfect on all devices". Was 44px flat with a 34px override under
     600px; both fixed steps are gone and this single fluid value now governs every width. There is
     deliberately NO media-query override of this height anywhere in this file, and adding one back
     would reintroduce exactly the breakpoint jump he asked to be rid of.
     calc(44px + 3vw) keeps the old 44px floor and grows with the viewport: 55.7px at 390,
     67.0px at 768, 74.7px at 1024, 87.2px at 1440. The uploaded artwork is 136px tall, so even
     the 1440px figure is still a 1.6x downscale and stays crisp on a 2x screen.
     The strip cannot overflow the page as it grows: .bg-trust-viewport is overflow:hidden, and
     the widest mark (Coca-Cola, 3.18:1) is 249px wide at 390px, well inside the viewport. */
  height: calc(44px + 3vw);
  max-width: none;
  margin: 0;
  padding: 10px 20px;
  background: #FFFFFF;
  border-radius: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  object-fit: contain;
}

/* THE ONE EXCEPTION, Tony 2026-08-13: Coca-Cola ships on its own red field, so a white plate
   would frame the mark in a colour the brand does not use. #E0081B is MEASURED from all four
   corners of the supplied artwork (66% of its pixels), not eyeballed, so plate and image are
   the same red and the padding disappears into it. Any future brand-plate tile sets
   'bg' => 'brand' in bg-marquee-widget.php and gets its own rule here. */
.companies_logo .bg-trust-item--brand img {
  background: #E0081B;
}

@keyframes bg-trust-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Pause so a visitor can actually read a name. Hover for pointers,
   focus-within for keyboards. */
.companies_logo .bg-trust-marquee:hover .bg-trust-track,
.companies_logo .bg-trust-marquee:focus-within .bg-trust-track,
.companies_logo .bg-trust-viewport:focus .bg-trust-track {
  animation-play-state: paused;
}

@media only screen and (max-width: 600px) {
  .companies_logo .bg-trust-marquee { --bg-trust-duration: 40s; }
  .companies_logo .bg-trust-set > li.bg-trust-item {
    padding: 0 20px;
    font-size: 17px;
    min-height: 56px;
  }
  .companies_logo .bg-trust-item--logo img {
    /* NO height HERE ON PURPOSE, Tony 2026-08-13. This block used to force height:34px and beat
       the base rule below 600px, which is the breakpoint jump he asked to remove. The base
       calc(44px + 3vw) is now the ONLY height rule for this image at any width and already
       resolves to 55.7px here. Do not add a height back into this block.
       Padding and radius stay: they size the white CHIP around the artwork, not the artwork,
       and a phone still wants a tighter chip than a desktop. */
    padding: 9px 16px;
    border-radius: 12px;
  }
}

/* ACCESSIBILITY REQUIREMENT, not a nicety. With reduced motion the strip
   must be static AND fully readable: kill the animation, drop the clone
   so nothing is announced or shown twice, unclip the viewport and let the
   single set wrap and centre. */
@media (prefers-reduced-motion: reduce) {
  .companies_logo .bg-trust-track {
    animation: none;
    transform: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    will-change: auto;
  }
  .companies_logo .bg-trust-set--clone { display: none; }
  .companies_logo .bg-trust-set {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .companies_logo .bg-trust-viewport {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .companies_logo .bg-trust-set > li.bg-trust-item {
    padding: 6px 18px;
    white-space: normal;
  }
  /* THE ONLY PLACE A TILE CAN BECOME PAGE SCROLL, so the only place that needs a cap.
     Everywhere else .bg-trust-viewport is overflow:hidden and a 3900px track is harmless. Here
     the viewport is deliberately unclipped so the strip can wrap and be read, which means a tile
     WIDER THAN THE SCREEN pushes the whole document sideways.
     MEASURED, not guessed: at 390px with height:calc(44px + 3vw) the widest mark is not the one
     you would expect. Discover is 257x44, a 5.84:1 letterbox, so it renders 325px of artwork and
     a 393px tile against a 390px viewport - 2px of horizontal scroll. Coca-Cola, the physically
     largest file, is only 245px because it is a much squarer 3.18:1.
     The cap subtracts the tile's own chrome (36px li padding + 40px img padding at the widest
     setting) from the viewport, so the tile can never exceed the screen. It binds ONLY on very
     narrow screens; at 768px and up every tile is under half the viewport and this does nothing.
     Height is untouched, so Tony's one-height-everywhere rule still holds, and object-fit:contain
     (set on the base rule) scales the mark down inside the same chip rather than cropping it. */
  .companies_logo .bg-trust-item--logo img {
    max-width: calc(100vw - 76px);
  }
}

/* ── PromotionBeads smiley mark on product detail pages (Tony 2026-08-21) ──────────────
   Tony: "in the upper left corner of every product page ... add this photo ... to the
   yellow part slanting down", then "position similar to where it is on the original
   site ... but on the yellow".
   WHY IT IS ANCHORED TO .site-content AND NOT THE BANNER: .innerpage_background carries
   clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%). Any child or pseudo-element of a
   clipped box is clipped with it, so a badge placed on the banner gets sliced along the
   diagonal. .innerpage measures 0x0, so it is useless as a positioning context too.
   .site-content is the nearest ancestor with real geometry.
   THE IMAGE IS SERVED FROM beadguy.appwt.cc, never hotlinked from mardigrascustombeads.com
   (Tony 2026-08-21: every image must match the URL of the site showing it). */
body.bg-has-detail .site-content { position: relative; }
body.bg-has-detail .site-content::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 392px;
  width: 152px;
  height: 155px;
  background-color: #ffffff;
  background-image: url("https://promotionbeads.com/wp-content/uploads/2026/06/promobeads-logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 86%;
  border-radius: 360px;
  z-index: 6;
  pointer-events: none;
}
@media (max-width: 1024px) {
  body.bg-has-detail .site-content::before { width: 112px; height: 114px; left: 18px; top: 300px; }
}
@media (max-width: 640px) {
  /* MEASURED on a 390px iPhone viewport, not eyeballed (Tony 2026-08-21):
     the banner title ran 459-544 and the yellow diagonal crossed 497-575, so the second
     line of the title was white-on-yellow and unreadable. The content card starts at 634,
     which leaves only a thin band of yellow to place the badge in. */
  /* MEASURED across 5 product pages on a 390px viewport: the content card starts as high
     as 594 (abs), so a badge whose bottom passed ~586 sat UNDER the product photo. At this
     width the yellow sliver between the diagonal and the card is only ~19px, too small for
     a badge, so on phones the mark rides the banner exactly as it does on the source site. */
  /* MEASURED FROM PIXELS, not the DOM (2026-08-21): elementFromPoint could not see the yellow
     because it is painted by an ancestor, so the boundary was read off a screenshot instead.
     At 390px the yellow starts at abs y=543 and the tightest content card starts at 594.
     top:386 -> badge abs 520..581, so 38 of its 61px (62%) sit on the yellow and it still
     clears the card by 13px on the tightest page. */
  body.bg-has-detail .site-content::before { width: 60px; height: 61px; left: 14px; top: 386px; }
  /* Lift the banner title clear of the diagonal so no glyph lands on yellow.
     USE top:, NOT margin-bottom: the title is already position:relative, so `top` moves it
     without reflowing anything. margin-bottom was tried first and it pushed the whole
     content card 66px DOWN instead of raising the title, which fixed nothing. */
  body.bg-has-detail .page_titale h2.entry-title,
  body.bg-has-detail .page_titale h1.entry-title {
    font-size: 20px;
    line-height: 1.25;
    top: -72px;
    margin-bottom: 0;
  }
}


/* ══ NO OFF-SITE IMAGES (Tony 2026-08-21) ═══════════════════════════════════════════════════
   "no fucking image should point to anything other than this site saved locally at
   beadguy.appwt.cc". The PARENT theme hotlinked TWO images from promotionbeads.com. Overridden
   here, never edited in the parent, because a theme update would silently restore the hotlink.
   .innerpage:after was a SECOND 240x220 badge pulling page_logo_2.png off another domain. The
   badge Tony wants lives on body.bg-has-detail only (PRODUCT PAGES), so this one is killed. */
.innerpage:after { content: none !important; }
.btn_bottom:before {
  background-image: url("https://promotionbeads.com/wp-content/uploads/2018/10/order.png") !important;
}

/* ══ HERO HEADLINE LEGIBILITY (Tony 2026-08-21) ═══════════════════════════════════════════
   "add some subtle dark shadow ... and maybe even a subtle outline, just need them to pop".
   The hero background is now a bright beads-and-bubbles photo, so white text sits over gold
   highlights in places and loses contrast. Layered shadows (a tight dark one for edge definition
   plus a wider soft one for lift) do most of the work; a hairline stroke sharpens the edge without
   the cartoon look a heavy outline gives. paint-order:stroke keeps the stroke BEHIND the glyph so
   the letterforms stay clean. Scoped to the hero only, so no other heading changes. */
.mainslider .slider_text .text_in h1,
.mainslider .slider_text .text_in h2,
.homeslider .slider_text .text_in h1,
.homeslider .slider_text .text_in h2 {
  text-shadow:
    0 1px 2px rgba(0,0,0,.55),
    0 2px 6px rgba(0,0,0,.45),
    0 6px 22px rgba(0,0,0,.35);
  -webkit-text-stroke: 0.6px rgba(0,0,0,.38);
  paint-order: stroke fill;
}
@media (max-width:640px){
  .mainslider .slider_text .text_in h1,
  .mainslider .slider_text .text_in h2,
  .homeslider .slider_text .text_in h1,
  .homeslider .slider_text .text_in h2 { -webkit-text-stroke: 0.4px rgba(0,0,0,.34); }
}

/* ══ YELLOW INTRO BLOCK NEATNESS (Tony 2026-08-21) ════════════════════════════════════════
   "look neater in the yellow, spacing is exactly how we wanted".
   SPACING IS DELIBERATELY UNTOUCHED - no margin, no padding, no line-height changes here.
   MEASURED cause of the ragged look: the heading rendered 1168px wide while the paragraph
   below it was capped at 693px, so the two blocks had different right edges and read as
   misaligned. Both now share one 44rem measure, giving a single clean column edge.
   text-wrap:balance stops the heading dropping a lone orphan word; text-wrap:pretty does the
   same for the paragraph's last line. Both degrade silently on older browsers. */
.bg-home-hero .bg-home-who,
.bg-home-hero .bg-home-lead {
  /* ⭐ THE SINGLE MEASURE for the yellow block (Tony 2026-08-21: "make this text more horizontal
     center on page or more width, it wraps early and funny"). MEASURED before changing: the wrap
     content box is 1168px at 1920 and the copy was capped at 704px/785px hard against its left
     edge, so roughly 400px of the band sat empty on the right and the block read as off-centre.
     64rem = 1024px fills the band properly and still stops short of an uncomfortable line length.
     min(...,100%) keeps it honest on a phone. The auto margins centre it as a flex item, which is
     the "more horizontal center on page" half of the ask.
     ⚠ Anything that re-caps these two elements MUST change this rule, not add another one. Three
     competing max-widths is the bug this replaced. */
  max-width: min(64rem, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* The auto margins above only centre truthfully once the COLUMN gap is gone. MEASURED: the wrap
   is display:flex with gap:40px, and that 40px was being charged to the paragraph's line, so its
   free space was 104px (52/52) while the heading's was 144px (72/72). Same width, two different
   left edges, 20px apart. row-gap stays at 40px, which is where the vertical spacing Tony
   approved actually comes from, so the yellow block's rhythm is unchanged. */
.bg-home-hero .wrap { column-gap: 0; }
.bg-home-hero .bg-home-who  { text-wrap: balance; letter-spacing: .1px; }
.bg-home-hero .bg-home-lead { text-wrap: pretty; }

/* ══ HERO HEADLINE HIERARCHY (Tony 2026-08-21) ════════════════════════════════════════════
   "make these lines look elegant with pop".
   The two lines were rendering at the SAME size and weight, so they competed and neither led.
   Line 1 is the emotional hook and now leads; line 2 is the descriptor and steps back:
     - line 1 larger, tighter tracking, full white
     - line 2 ~58% of line 1, WIDER letter-spacing (uppercase reads better spaced), slightly
       softened white so it recedes without losing legibility
     - a short champagne-gold rule between them, the site's existing accent, for separation
       without adding words
     - text-wrap:balance so line 2 breaks evenly instead of orphaning "& Apparel"
   All sizes use clamp() so nothing overflows between 320px and 1920px. The shadow/stroke added
   earlier still applies underneath. */
.homeslider .slider_text .text_in h1,
.homeslider .slider_text .text_in h2 { text-wrap: balance; margin: 0; }

.homeslider .slider_text .text_in h1:first-of-type,
.homeslider .slider_text .text_in h2:first-of-type {
  font-size: clamp(22px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: .5px;
  font-weight: 800;
  color: #fff;
}
.homeslider .slider_text .text_in h1:first-of-type::after,
.homeslider .slider_text .text_in h2:first-of-type::after {
  content: "";
  display: block;
  width: clamp(48px, 7vw, 96px);
  height: 3px;
  margin: clamp(8px, 1.2vw, 16px) auto;
  border-radius: 3px;
  background: #FFCC00;
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.homeslider .slider_text .text_in h1:last-of-type,
.homeslider .slider_text .text_in h2:last-of-type {
  font-size: clamp(18px, 3.35vw, 42px);
  line-height: 1.22;
  letter-spacing: clamp(.6px, .18vw, 2.2px);
  font-weight: 600;
  color: rgba(255,255,255,.94);
  /* Tony 2026-08-21 chose the NARROWER stack ("I liked how you had the hero text one step
     back"). 22ch keeps line 2 as a compact centred block under the gold rule rather than one
     wide line. Kept deliberately - it is a design choice, not an oversight. */
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

/* Less air under the hero (Tony 2026-08-21: "the bottom padding below it").
   MEASURED before: .slider_text padding 100px top / 90px bottom. */
.homeslider .slider_text { padding-bottom: 40px !important; }
@media (max-width:640px){ .homeslider .slider_text { padding-bottom: 22px !important; } }

/* ══ HERO LINE 2 AS "CUSTOM" + A THREE-LINE STACK (Tony 2026-08-21) ═══════════════════════
   "CUSTOM to the left and then MARDI GRAS BEADS / PARADE THROWS / & APPAREL ... still centered".
   Flex row: the word CUSTOM sits left and vertically centred against a left-aligned three-line
   column, and the pair is centred as a unit. The 22ch cap from the single-line version is
   removed here or it would squash the row. */
.homeslider .slider_text .text_in h1.bg-hero-stack,
.homeslider .slider_text .text_in h2.bg-hero-stack {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1.1vw, 16px);
  max-width: none;
  text-wrap: initial;
  letter-spacing: normal;
}
.bg-hero-custom {
  font-size: clamp(29px, 5.45vw, 71px);  /* inset ~12px each side vs line 1 (Tony 2026-08-21) */
  font-weight: 800;
  letter-spacing: clamp(.6px, .16vw, 2.2px);
  line-height: 1;
  white-space: nowrap;
  color: #fff;
}
.bg-hero-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* the three lines share one left edge */
  text-align: left;
  line-height: 1.16;
  letter-spacing: clamp(.4px, .1vw, 1.2px);
}
.bg-hero-items > span { display: block; white-space: nowrap; }
@media (max-width: 380px) {
  /* Only at the very narrowest do the three lines get to wrap, so nothing ever
     pushes the page sideways (execution rule: never allow horizontal scroll). */
  .bg-hero-items > span { white-space: normal; }
}

/* ══ YELLOW INTRO BLOCK — ELEGANCE PASS (Tony 2026-08-21) ═════════════════════════════════
   "make that more elegant and double the padding at the top at least on desktop".
   Top padding was 18px after the earlier trim -> 40px desktop (more than double), phone left
   at 14px so the fold is not pushed down on a small screen.
   ELEGANCE, measured rather than decorative:
     - the heading gets a short champagne-gold rule beneath it, echoing the hero, so the block
       has a deliberate opening instead of starting cold
     - heading tracking opened slightly and weight held at 700; it is a section head, not a shout
     - body set at a 68ch measure with 1.72 line-height, the comfortable reading band for a
       paragraph this long, and text-wrap:pretty to stop a one-word last line
     - the brand link inherits an underline offset so it reads as a link without breaking rhythm
   Spacing BETWEEN heading and paragraph is untouched (Tony: "spacing is exactly how we wanted"). */
.bg-home-hero { padding-top: 40px !important; }
@media (max-width: 640px) { .bg-home-hero { padding-top: 14px !important; } }

.bg-home-hero .bg-home-who {
  letter-spacing: .3px;
  position: relative;
}
.bg-home-hero .bg-home-who::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  border-radius: 3px;
  background: #FFCC00;
  margin-top: 10px;
}
.bg-home-hero .bg-home-lead {
  /* max-width deliberately NOT set here. It used to say 68ch, which quietly beat the shared
     measure below on source order (identical specificity, later line), so the heading rendered
     704px wide and this paragraph 785px. Two different right edges is what read as "wraps early
     and funny". The single measure now lives in one place, further down. */
  line-height: 1.72;
  text-wrap: pretty;
  color: #23282f;
}
.bg-home-hero .bg-home-lead a.bg-brand-link {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ══ "CUSTOM" STRETCHED TO THE FULL STACK HEIGHT (Tony 2026-08-21) ════════════════════════
   "stretch the height so Custom hits the top of line one and the bottom of line 3".
   The word cannot simply be made ~3x larger: CUSTOM at that size runs several hundred px wide
   and breaks the row on a phone. Instead the outer span STRETCHES to the row height and the
   inner span is scaled on the Y axis only, so the height matches the three lines while the
   width stays exactly what it was. transform-origin:center keeps it optically aligned. */
.bg-hero-custom { align-self: stretch; display: flex; align-items: center; overflow: visible; }
.bg-hero-custom-i {
  display: block;
  /* MEASURED, not guessed: at 48px + scaleY(2.9) the word rendered 139px tall against a
     101px three-line stack, hanging 19px above and below. 2.22 lands it on line 1's top and
     line 3's bottom. Font size stays at the larger clamp so the letters keep the extra width
     Tony asked for; only the vertical scale was corrected. */
  /* MEASURED FROM PIXELS, not boxes (Tony: "have one side puppeteer watch and the other tweak").
     All-caps CUSTOM has no descenders, so its INK sits above its box centre and a symmetric box
     told a lie. Ink measured on an isolated render: CUSTOM 739..816 (77px) vs stack 732..819
     (87px), sitting 2px low. 2.51 matches the ink height; the -2px shift lands the centres. */
  /* Read off a CROPPED render of just this row (the padded pixel band kept catching the
     headline above and lying). Stack ink 723..855 = 132px; CUSTOM was 727..865 = 138px and
     7px low. 2.34 matches the height, -12px lands the centres. */
  /* Tony's eye, 2026-08-21: "almost like it needs -2px margin-top". He was right and the pixel
     scan was not: CUSTOM renders in Segoe UI BLACK while the stack is Segoe UI SEMIBOLD, and the
     two faces have different cap-heights, so identical ink extents still read as sitting low. */
  /* ⭐ THESE EXACT VALUES ARE TONY'S, 2026-08-21, and they are FINAL for desktop.
     Do not "correct" them from a pixel measurement. Four automated passes all reported this
     row as perfectly even while it visibly was not: the confetti layer, the white headline
     above, and finally the fact that CUSTOM renders in Segoe UI BLACK against the stack's
     Segoe UI SEMIBOLD, two faces with different cap-heights. Identical ink extents genuinely
     read as sitting low. His eye caught what no measurement here could. */
  transform: translateY(-8.5px) scaleY(2.54);
  transform-origin: center;
  line-height: 1;
}
@media (max-width: 640px) {
  /* Ink measured at 390px: CUSTOM 689..721 (32px) vs stack 673..726 (53px), 5.5px low. */
  /* MEASURED at 390px with line 1 hidden: the clamp FLOORS make CUSTOM 29px against 18px
     items, so the old 3.32 scale rendered 162px of ink against a 53px stack. 1.09 matches. */
  /* At 390px the clamp floors give CUSTOM 29px against 18px items. Its cap height is ~21px
     while the three-line stack's ink is ~53px, so it needs ~2.5x to span line 1 to line 3. */
  /* DERIVED FROM TONY'S PROVEN DESKTOP VALUES, not re-measured from pixels (that method failed
     four times on this element). Segoe UI Black cap ratio = 126/2.54/71 = 0.6987. Mobile stack
     ink target = (126/42)*18 = 54.0px; CUSTOM base ink at 29px = 20.3px; 54.0/20.3 = 2.67.
     Shift scales with font size: -8.5 * (29/71) = -3.5px. */
  .bg-hero-custom-i { transform: translateY(-3.5px) scaleY(2.67); }
}


/* ══ YELLOW BLOCK COLOUR (Tony 2026-08-21) ═══════════════════════════════════════════════
   "would you suggest a purple for Who We Are & What We Do?" - yes, and it is also the safe
   choice. CONTRAST MEASURED against the yellow #FFCC00, not eyeballed:
     brand purple #6A0DAD  6.11:1  PASS      deeper purple #4E0A80  8.27:1  PASS
     brand green  #00A651  2.11:1  FAIL      deep green    #00713A  4.06:1  FAIL
   So the Mardi Gras GREEN cannot carry text on this yellow at any usable weight - it fails
   the 4.5:1 body-text floor. Purple is the brand colour that survives the background.
   Heading takes brand purple; the links take the DEEPER purple so they are distinguishable
   from the heading and from the near-black body copy, with an underline so colour is never
   the only signal (a colour-blind reader still sees a link). */
.bg-home-hero .bg-home-who { color: #6A0DAD; }

.bg-home-hero .bg-home-lead a,
.bg-home-hero .bg-home-lead a.bg-brand-link,
.bg-home-hero .bg-home-lead a.bg-ig-tag {
  /* Tony 2026-08-21: "no underline, thats why a color change". Colour carries the link.
     Deeper purple #4E0A80 = 8.27:1 on the yellow, and it is clearly distinct from both the
     #6A0DAD heading and the near-black body copy, so the link still reads as a link. */
  color: #4E0A80;
  text-decoration: none;
  font-weight: 700;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.bg-home-hero .bg-home-lead a:hover,
.bg-home-hero .bg-home-lead a:focus-visible {
  color: #1a1a1a;                      /* 11.51:1 on the yellow */
  text-decoration: none;
}
.bg-home-hero .bg-home-lead a:active { color: #6A0DAD; }
.bg-home-hero .bg-home-lead a:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }

/* ══ SECTION HEADINGS MATCH THE HERO TYPE (Tony 2026-08-21) ═══════════════════════════════
   "All caps ... to match the hero text font style, but not color".
   MEASURED hero: Segoe UI, weight 800, text-transform uppercase, letter-spacing .5px, white.
   Both headings adopt the FACE, WEIGHT, CASE and TRACKING. Colour is deliberately NOT touched:
   the yellow-block heading keeps its purple #6A0DAD and the products heading keeps black. */
.bg-home-hero .bg-home-who,
h3.wp-block-heading {
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ══ HERO BACKGROUND FIXED ON SCROLL (Tony 2026-08-21) ════════════════════════════════════
   "be fixed so as we scroll it does not move" - a parallax hold on the beads photo.
   DESKTOP ONLY, deliberately: background-attachment:fixed is broken on iOS Safari (it drops
   or jitters the image and can blank the hero entirely), and it is a known battery/scroll-jank
   cost on touch devices. Phones and tablets keep the normal scrolling background, which looks
   identical on a screen that short. Also honours prefers-reduced-motion. */
@media (min-width: 1025px) and (hover: hover) {
  .homeslider {
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .homeslider { background-attachment: scroll; }
}

/* The PARENT theme sets .homeslider background-attachment:fixed UNCONDITIONALLY
   (promotionbeads/style.css lines 1781 and 3227), including on phones. That is the case that
   breaks on iOS Safari: the image drops, jitters or blanks the hero entirely. Force scroll
   below the desktop breakpoint so touch devices get a normal, reliable background. */
@media (max-width: 1024px) {
  .homeslider { background-attachment: scroll !important; background-size: cover; }
}

/* ══ BRAND SCROLLBAR, EVERY DEVICE THAT ALLOWS ONE (Tony 2026-08-21) ══════════════════════════
   "can you theme the scrollbar for all devices"

   TWO SYNTAXES, NOT ONE WITH A FALLBACK. They are separate specs and each is ignored by the
   engines that implement the other, so both ship:
     1. scrollbar-color / scrollbar-width  = the W3C standard. Firefox (all platforms) and
        Chrome/Edge 121+. Only accepts two colours, thumb then track, so the gradient and the
        rounded corners below are not expressible here. That is a limit of the spec, not an
        oversight.
     2. ::-webkit-scrollbar*                = Blink/WebKit pseudo-elements. Chrome, Edge, Safari,
        Opera, Samsung Internet, and any in-page scrolling container on Android.
   Chrome 121+ understands BOTH; per spec the standard properties win there, so the two are
   tuned to the same purple so a Chrome user and a Firefox user see the same bar.

   HONEST LIMIT: iOS Safari and Android Chrome draw the PAGE scrollbar as a transient overlay
   owned by the OS. It is not in the CSS box tree and no rule here can reach it. Those devices
   get the brand colour on in-page scrollers (the product tables, any overflow box) and the OS
   overlay everywhere else. Claiming otherwise would be a claim no screenshot could support.

   Colours are the ones already on this site, not new ones: #6A0DAD is the heading purple,
   #4E0A80 the link purple, #FFCC00 the Mardi Gras gold from the .bg-home-who rule, #f3ecfb the
   pale purple already used as a surface tint. */

/* color-scheme keeps the UI the browser draws for us (form controls, and the overlay scrollbars
   we cannot reach) in the light family, so an OS set to dark mode does not hand this yellow and
   purple site a black scrollbar we never asked for. */
html { color-scheme: light; }

/* --- 1. the standard, FOR THE ENGINES THAT HAVE ONLY THIS ---------------------------------
   MEASURED, not assumed: with scrollbar-color set on html, Chrome 139 reported a 10px bar and
   computed `scrollbar-color: rgb(106,13,173) rgb(243,236,251)`, meaning the standard properties
   had taken over rendering and the gradient plus the gold hover below were never drawing in
   Chrome at all. Per spec the standard properties win wherever both are understood.
   The feature query fixes that without sniffing a browser: Chrome/Edge/Safari support the
   ::-webkit-scrollbar selector, so they SKIP this block and get the full pseudo-element
   treatment. Firefox does not support that selector, so it lands here and gets the same two
   brand colours in the only form it can render. */
@supports not selector(::-webkit-scrollbar) {
  html,
  .bg-scroll-x, .woocommerce table.shop_table_responsive, .entry-content table,
  pre, textarea, .beadguy_scroll {
    scrollbar-width: thin;
    scrollbar-color: #6A0DAD #f3ecfb;   /* thumb, then track. The spec allows no third value. */
  }
}

/* --- 2. Blink / WebKit ------------------------------------------------------------------- */
::-webkit-scrollbar { width: 12px; height: 12px; }

::-webkit-scrollbar-track {
  background: #f3ecfb;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  /* Purple body with a gold edge. The border is transparent-backed via background-clip so the
     gold reads as a thin inset rather than a heavy outline, and the thumb keeps breathing room
     inside the track at every scroll position. */
  background: linear-gradient(180deg, #6A0DAD 0%, #4E0A80 100%);
  border-radius: 10px;
  border: 2px solid #f3ecfb;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #FFCC00 0%, #E0A800 100%);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
  background: #4E0A80;
  background-clip: padding-box;
}

/* Where a horizontal and a vertical bar meet. Left unstyled it renders as a bare grey square. */
::-webkit-scrollbar-corner { background: #f3ecfb; }

/* A pointer-coarse device that DOES draw a classic scrollbar (Android tablet, touch laptop) gets
   a slimmer bar, because 12px of chrome costs more on a small screen than it does on a desktop. */
@media (pointer: coarse) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-thumb { border-width: 1px; }
}

/* Respect a user who has asked the OS for higher contrast: drop the gradient for a flat, fully
   saturated thumb against a white track. */
@media (prefers-contrast: more) {
  ::-webkit-scrollbar-track { background: #ffffff; }
  ::-webkit-scrollbar-thumb { background: #4E0A80; border-color: #ffffff; }
}
@supports not selector(::-webkit-scrollbar) {
  @media (prefers-contrast: more) {
    html { scrollbar-color: #4E0A80 #ffffff; }
  }
}

/* ============================================================================
   AppWT 2026-09-05 (Security: Clint + Blake) — TERM-DESCRIPTION LINK CONTRAST
   Brian reported the overseas category as "Still not correct ... Doesn't open up".
   The four die-cut lines were plain text; they are now links (term 48 description).
   Once linked they inherited the theme's default link green, which is unreadable
   on this section's gold.
   MEASURED FROM THE RENDERED PIXELS of /category/custom-overseas-mardi-gras-beads/,
   not from a stylesheet value (the gold is painted by an image, so the DOM reports
   the background as transparent all the way to <html> and cannot be trusted here):
       background      #FFCC00   (20,480 of 34,100 sampled pixels in the link band)
       default link    #009900   ->  2.50:1   FAILS WCAG AA (needs 4.5:1 at 17px/400)
       this site's own card-title purple #6A0DAD -> 6.11:1   PASSES
   #6A0DAD is sampled FROM THIS SITE'S OWN card titles, so it is not a new colour.
   SCOPED to .term-description so no other link anywhere on the site changes.
   Underline added because colour alone must never be the only affordance.
   Backup: style.css.bak-termdesc-contrast-20260905
   ============================================================================ */
/* SPECIFICITY, measured not assumed: the parent theme sets
       .entry-content p a { color:#009900 }        specificity (0,1,2)
   which outranks a plain .term-description a      specificity (0,1,1)
   regardless of load order, so the first attempt was served and still lost.
   .entry-content .term-description p a is (0,2,2) and wins on merit.
   No !important: that would be a sledgehammer that hides the next conflict. */
.entry-content .term-description p a {
    color: #6A0DAD;
    text-decoration: underline;
}
.entry-content .term-description p a:hover,
.entry-content .term-description p a:focus {
    color: #4B0F63;
    text-decoration: underline;
}

/* =====================================================================================
   SINGLE PRODUCT PAGE POLISH — Tony 2026-09-08, "it's so sloppy"
   Measured against the leaf category card, which is this site's best product layout.
   ===================================================================================== */

/* The quote-only pricing line, for products the site holds no tier table for. Same visual
   weight as the .bg-price table it stands in for, so the card does not look unfinished. */
.summary .bg-detail-price .bg-quoteonly {
    margin: 0 0 8px;
    padding: 10px 14px;
    background: #f4f0fa;
    border: 1px solid #cbb8e0;
    border-radius: 8px;
    font-size: 1.02rem;
    color: #2a1a3a;
}
.summary .bg-detail-price .bg-quoteonly strong { color: #6a0dad; }

/* The paired CTA sits under the price block with room to breathe, matching the leaf card. */
.bg-detail-cta--product { margin: 16px 0 4px; }

/* PRODUCT GALLERY THUMBNAILS were a ragged 4 + 3 + 1 run of mixed aspect ratios, because the
   theme let each thumbnail keep its own. Uniform squares with object-fit:cover give the tidy
   row the leaf card already has. cover crops rather than distorts: a squashed product photo is
   a worse defect than a cropped one. */
.woocommerce div.product .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; }
.woocommerce div.product .flex-control-thumbs li { width: calc((100% - 32px) / 5); margin: 0; list-style: none; }
.woocommerce div.product .flex-control-thumbs li img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border: 1px solid #e6d9f2;
    border-radius: 6px;
    background: #fff;
}
@media (max-width: 640px) {
    .woocommerce div.product .flex-control-thumbs li { width: calc((100% - 24px) / 4); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRODUCT-PAGE NAV LEGIBILITY (Dean/HR 2026-09-08)
   Tony: "even the navigation header area look odd" / "It hurts my eyes" on
   /product/custom-plastic-overseas-mardi-gras-beads/

   THE 50% TRANSPARENT NAV IS DELIBERATE AND IS NOT BEING REVERTED. Tony asked
   for it above: "Nav bar = BLACK 50% TRANSPARENT, NO image (Tony) — the moving
   background/bubbles show straight through it". That works over the DARK moving
   bokeh it was designed against.

   THE DEFECT IS BACKGROUND-DEPENDENT. A single-product page's body is BRIGHT
   YELLOW, and 50% black over yellow composites to a muddy olive rgb(128,100,0).
   MEASURED, not eyeballed — white nav text on that is 5.61:1, which fails WCAG AA
   for body text. At 68% it composites to rgb(82,64,0) for roughly 10:1 and passes
   comfortably while still clearly showing the background through.

   SCOPED TO PRODUCT PAGES ONLY so the home page Tony approved is untouched.
   ⭐ WHY OPAQUE AND NOT JUST DARKER (the second pass, after rendering it):
   At .68 the contrast passed, but the H1 STILL BLED THROUGH the bar while scrolling
   (measured 50px of overlap between h1 and #masthead at scrollY 520). That is inherent
   to a semi-transparent sticky header: whatever scrolls under it is visible through it.
   Tony's stated intent was for the MOVING BACKGROUND/BUBBLES to show through. On a
   single-product page there is no moving background behind the nav — only body copy and
   headings — so the transparency delivers none of the effect he asked for and produces
   only the text bleed-through he is complaining about. Opaque HERE honors the intent.
   The color is not arbitrary: #524000 is exactly what rgba(0,0,0,.68) already composited
   to over this page's #FFC800 body, so the bar looks the SAME as it does now and simply
   stops being see-through. White on #524000 measures ~10:1.
   The home page keeps the transparent bar untouched.
   ───────────────────────────────────────────────────────────────────────────── */
body.single-product #masthead.site-header,
body.product-template-default #masthead.site-header {
  background: #524000 !important;
}

/* =====================================================================================
   SINGLE PRODUCT = THE SAME CARD AS THE LEAF CATEGORY PAGE — Cole 2026-09-08
   Tony: "image 1 does not look like the other products Image 2 or the rest or image 3"
   (/product/custom-plastic-overseas-mardi-gras-beads/ vs /category/parade-throws/doubloons/
   and /category/custom-overseas-mardi-gras-beads/eva-foam-medallion/).

   The two wrapper divs that make this work are in the template, not here. This block only
   sizes the two columns inside them so the WooCommerce gallery stops eating half the page.
   Every value is copied from the leaf card's own rules above (.bg-detail 1080px,
   .bg-detail-gallery 360px, .bg-gal-thumb 74px), so the two routes match by construction
   rather than by eye. Backup: style.css.bak-cole-20260908
   ===================================================================================== */

/* The leaf page centres everything in a 1080px column (.bg-detail). The product route had no
   such wrapper, so breadcrumbs, card and description all ran the full 1408px content width. */
body.single-product div.woocommerce div.single-product {
    max-width: 1080px;
    margin: 0 auto;
    /* 14px side gutter is .bg-detail's own, so the card lands at the SAME measured width and
       x-offset as the leaf page: 1052px at x=194 on a 1440 viewport. */
    padding: 10px 14px 44px;
}

/* SPECIFICITY, MEASURED NOT ASSUMED. WooCommerce ships
       .woocommerce div.product div.images { float:left; width:48% }        (0,3,2)
   and the existing child rule .woocommerce div.product .flex-control-thumbs li is (0,3,2),
   which is why its calc() width never applied and the thumbnails rendered at WooCommerce's
   own 25% (169px on a 676px column, giving the ragged 3-per-row grid Tony saw). Adding
   body.single-product lifts these to (0,4,3) and higher, so they win on merit, no !important. */
body.single-product .woocommerce div.product div.images {
    float: none;
    width: 360px;
    max-width: 360px;
    flex: 0 0 360px;
    margin: 0;
}
body.single-product .woocommerce div.product div.summary {
    float: none;
    width: auto;
    /* Cole 2026-09-08, second pass: was `flex: 1 1 300px`, which is the ONE place the two
       routes still diverged. Measured at 768 with no cache buster: the reference kept two
       columns (gallery [56,595,360], intro [442,595,270], same row) and the product page
       wrapped (gallery [56,740,360], intro [56,1296,656], NOT same row), because 360 + 26 gap
       + a 300px basis is 686 in a 656px content box. The leaf's own .bg-detail-intro is
       `flex:1`, i.e. basis 0%, so it shrinks to 270 and stays alongside. 1024 and 900 were
       already two-column on both pages, so 768 was the only width that showed it. */
    flex: 1 1 0%;
    min-width: 260px;
    margin: 0;
}

/* Main image: the same square, contained, white-card treatment as .bg-gal-main-img on the leaf
   page. Without this the slides keep their native aspect ratios (652px to 1029px tall on this
   one product) and the card grows a different height for every product. */
body.single-product .woocommerce div.product div.images .woocommerce-product-gallery__image img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
}

/* Thumbnails: 74px squares in a wrapped row, the leaf card's .bg-gal-thumb geometry. */
body.single-product .woocommerce div.product div.images .flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    overflow: visible;
}
body.single-product .woocommerce div.product div.images .flex-control-thumbs li {
    width: 74px;
    height: 74px;
    float: none;
    margin: 0;
    padding: 4px;
    background: #fff;
    border: 2px solid #e2d3a8;
    border-radius: 10px;
    overflow: hidden;
    list-style: none;
}
body.single-product .woocommerce div.product div.images .flex-control-thumbs li img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    display: block;
    border: 0;
    border-radius: 0;
    background: #fff;
}

/* Short description reads as the leaf card's lede rather than default body copy. */
body.single-product .summary .woocommerce-product-details__short-description p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #334155;
    margin: 0 0 14px;
}

/* WooCommerce prints an empty <p class="price"> for a quote-only product. It contributes a
   13px gap directly under the title and nothing else. Hidden only when it is genuinely empty,
   so a product that ever carries a price still shows it. */
body.single-product .summary > p.price:empty { display: none; }

/* The About card and the product card sit in the same 1080px column with the same gutter the
   leaf page uses between its cards. */
body.single-product div.product > .bg-detail-card { margin: 0 0 18px; }
body.single-product .bg-detail-card .product-full-description { margin: 0; }

@media (max-width: 640px) {
    body.single-product .woocommerce div.product div.images,
    body.single-product .woocommerce div.product div.summary {
        width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
    }
    /* Keep the 14px side gutter at phone width too: measured, the leaf page's card sits at
       x=29 w=332 on a 390 viewport, and dropping the gutter here put the product card at
       x=15 w=360 - visibly wider than the pages it has to match. */
    body.single-product div.woocommerce div.single-product { padding: 10px 14px 32px; }
}


/* =====================================================================================
   PRODUCT ROUTE = THE LEAF CARD - Cole 2026-09-08, second pass
   Tony named the exact reference:
     /category/full-color-mardi-gras-beads/full-color-imprint-mardi-gras-beads/
     overseas-full-color-imprint-mardi-gras-beads/
   "is exactly what /product/custom-plastic-overseas-mardi-gras-beads/ should look like"
   Everything below closes a difference measured in real headless Chrome at 1440 / 768 / 390
   between those two served pages, reference first, target second.
   ===================================================================================== */

/* The quote-only line stood in for the reference's .bg-aslowas callout but was painted
   differently: 1px #cbb8e0 border on all four sides where the reference has NO box border and
   a 4px #6A0DAD accent bar on the left only, and 1.02rem/400 #2a1a3a where the reference is
   1rem/700 #0F2744. Same treatment now, so a product with no tier table reads as the same
   component as one with one, rather than as a different design. */
.summary .bg-detail-price .bg-quoteonly {
    margin: 0 0 10px;
    padding: 8px 12px;
    background: #F6F1FB;
    border: 0;
    border-left: 4px solid var(--beadguy-purple, #6A0DAD);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: #0F2744;
    max-width: 100%;
    overflow-wrap: break-word;
}
.summary .bg-detail-price .bg-quoteonly strong { color: var(--beadguy-purple, #6A0DAD); }

/* Short description: the reference's lede is p.bg-detail-lede at 17px / line-height 26px.
   WooCommerce wraps the product excerpt in its own div, so the rule needs that selector too.
   Measured before: 16.8px / 26.88px. */
body.single-product .summary .woocommerce-product-details__short-description,
body.single-product .summary .woocommerce-product-details__short-description p {
    font-size: 1.0625rem;
    line-height: 1.53;
    color: #334155;
    margin: 0 0 14px;
}

/* The product route now emits the leaf's own .bg-detail-gallery markup, so the two columns are
   laid out by the SAME rules (style.css:1193-1202). This only re-states the flex basis for the
   single-product wrapper, whose own .images/.summary widths would otherwise fight it. */
body.single-product .woocommerce div.product .bg-detail-gallery { flex: 0 0 360px; max-width: 360px; }
body.single-product .woocommerce div.product .bg-detail-intro    { flex: 1; min-width: 260px; }
@media (max-width: 640px) {
    body.single-product .woocommerce div.product .bg-detail-gallery { flex: 1 1 100%; max-width: 100%; }
}

/* Every section of the product copy is now its own card, exactly as the reference stacks its
   eight. Same 18px gutter the leaf uses between cards. */
body.single-product div.product > .bg-detail-card { margin: 0 0 18px; }