/*
Theme Name:   Franchize Racing Child
Theme URI:    https://franchizeracing.com
Description:  Child theme of Kadence for FranchizeRacing.com. Brand style kit plus custom coded site header and footer. Colors sampled from the flame logo and shock fluid labels.
Author:       Franchize Racing
Author URI:   https://franchizeracing.com
Template:     kadence
Version:      1.6.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  franchize-racing-child
*/

/* ==========================================================================
   FRANCHIZE RACING — BRAND STYLE KIT
   For WordPress + WooCommerce + WPBakery
   Paste into: Appearance > Customize > Additional CSS
   (or better: a child theme's style.css)

   Colors sampled directly from the flame logo, shock fluid label,
   and cSt cap stickers.
   ========================================================================== */

:root{
  /* --- FLAME RAMP (core brand colors) --- */
  --fr-yellow:  #FCD818;   /* flame highlight */
  --fr-amber:   #FC9000;   /* flame mid */
  --fr-orange:  #D85400;   /* label body / primary */
  --fr-burnt:   #C04800;   /* deep label orange */
  --fr-red:     #A80C0C;   /* flame outline */
  --fr-maroon:  #480000;   /* label shadow / darkest brand */

  /* --- NEUTRALS --- */
  --fr-ink:     #0F0B09;   /* near-black, warm (Design A bg) */
  --fr-ink-2:   #1A1310;   /* raised dark surface */
  --fr-paper:   #F7F4EE;   /* warm paper (Design B bg) */
  --fr-paper-2: #EFEAE1;   /* alt light band */
  --fr-line:    #DCD4C8;   /* light borders */
  --fr-soft:    #5C5149;   /* muted body text on light */

  /* --- SIGNATURE GRADIENT --- */
  --fr-flame: linear-gradient(90deg,var(--fr-yellow),var(--fr-amber) 40%,var(--fr-orange) 74%,var(--fr-red));

  /* --- TYPE --- */
  --fr-head: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --fr-body: 'Barlow', system-ui, -apple-system, sans-serif;
}

/* --------------------------------------------------------------------------
   1. TYPOGRAPHY
   -------------------------------------------------------------------------- */
body{ font-family:var(--fr-body); line-height:1.62; }
h1,h2,h3,h4,.fr-head{
  font-family:var(--fr-head);
  font-weight:800;
  text-transform:uppercase;
  line-height:1.03;
  letter-spacing:-.02em;
}
.fr-italic{ font-style:italic; }             /* racing slant for hero headlines */
.fr-eyebrow{
  font-family:var(--fr-head); font-weight:800; text-transform:uppercase;
  letter-spacing:.2em; font-size:.7rem; color:var(--fr-orange);
  display:inline-flex; align-items:center; gap:.6rem;
}
.fr-eyebrow::before{ content:""; width:26px; height:3px; background:var(--fr-flame); }
.fr-gradient-text{
  background:var(--fr-flame); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}

/* --------------------------------------------------------------------------
   2. FLAME ACCENT BAR  (use under headers / between sections)
   -------------------------------------------------------------------------- */
.fr-flamebar{ height:4px; width:100%; background:var(--fr-flame); }

/* --------------------------------------------------------------------------
   3. BUTTONS  (also restyles WooCommerce buttons)
   -------------------------------------------------------------------------- */
.fr-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--fr-head); font-weight:800; text-transform:uppercase;
  letter-spacing:.07em; font-size:.87rem; line-height:1;
  padding:1rem 1.9rem; border:2px solid var(--fr-orange);
  background:var(--fr-orange); color:#fff; border-radius:0;
  transition:transform .12s, background .2s, border-color .2s;
}
.fr-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  background:var(--fr-red); border-color:var(--fr-red);
  color:#fff; transform:translateY(-2px);
}
/* angular "speed cut" variant — Design A signature */
.fr-btn--cut{
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
}
.fr-btn--fire{ background:var(--fr-flame); border-color:transparent; color:#2B0F00; }
.fr-btn--ghost{ background:transparent; color:inherit; }
.fr-btn--ghost:hover{ background:var(--fr-orange); color:#fff; }

/* --------------------------------------------------------------------------
   4. WOOCOMMERCE — PRODUCT GRID & CARDS
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product{
  background:#fff; border:1px solid var(--fr-line);
  padding:0; overflow:hidden; transition:.18s; text-align:left;
}
.woocommerce ul.products li.product:hover{
  border-color:var(--fr-orange); box-shadow:0 16px 34px rgba(0,0,0,.09);
  transform:translateY(-4px);
}
.woocommerce ul.products li.product a img{
  margin:0; padding:9%; aspect-ratio:1; object-fit:contain; background:#fff;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--fr-body); font-size:.95rem; font-weight:600;
  text-transform:none; letter-spacing:0; padding:0 1.1rem; line-height:1.28;
}
.woocommerce ul.products li.product .price{
  font-family:var(--fr-head); font-weight:800; font-size:1.02rem;
  color:var(--fr-ink); padding:0 1.1rem 1.1rem; display:block;
}
.woocommerce ul.products li.product .button{ margin:0 1.1rem 1.1rem; }
/* sale badge */
.woocommerce span.onsale{
  background:var(--fr-orange); color:#fff; border-radius:0;
  font-family:var(--fr-head); font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; font-size:.62rem; min-height:auto;
  min-width:auto; padding:.35rem .6rem; line-height:1;
}

/* --------------------------------------------------------------------------
   5. WOOCOMMERCE — SINGLE PRODUCT
   -------------------------------------------------------------------------- */
.woocommerce div.product .product_title{
  font-family:var(--fr-head); font-style:italic; font-weight:800;
  text-transform:uppercase; font-size:clamp(1.7rem,3.6vw,2.6rem);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--fr-head); font-weight:800; color:var(--fr-orange);
  font-size:1.5rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  border-bottom-color:var(--fr-orange);
}
/* viscosity (cSt) variation dropdown */
.woocommerce div.product form.cart .variations label{
  font-family:var(--fr-head); text-transform:uppercase;
  letter-spacing:.09em; font-size:.78rem; color:var(--fr-orange);
}
.woocommerce div.product form.cart .variations select{
  border:1px solid var(--fr-line); padding:.7rem; font-size:1rem; border-radius:0;
}

/* --------------------------------------------------------------------------
   6. cSt VISCOSITY CHIPS  (use the round cap-sticker PNGs)
   WPBakery: Raw HTML element ->
   <div class="fr-chips"><a class="fr-chip" href="/?s=500+cSt">
     <img src="URL"><span>500 cSt</span></a> ... </div>
   -------------------------------------------------------------------------- */
.fr-chips{ display:grid; grid-template-columns:repeat(8,1fr); gap:.9rem; }
.fr-chip{
  background:#fff; border:1px solid var(--fr-line);
  padding:.9rem .5rem; text-align:center; transition:.18s; display:block;
}
.fr-chip:hover{
  border-color:var(--fr-orange); transform:translateY(-4px);
  box-shadow:0 12px 26px rgba(0,0,0,.09);
}
.fr-chip img{ width:100%; margin-bottom:.45rem; }
.fr-chip span{
  font-family:var(--fr-head); font-weight:800; font-size:.74rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--fr-soft);
}
.fr-chip:hover span{ color:var(--fr-orange); }
@media(max-width:1000px){ .fr-chips{ grid-template-columns:repeat(4,1fr);} }
@media(max-width:560px){ .fr-chips{ grid-template-columns:repeat(2,1fr);} }

/* --------------------------------------------------------------------------
   7. SPEC STRIP  (trust bar — Design B signature)
   WPBakery: Row with 4 columns, add class "fr-spec" to each column
   -------------------------------------------------------------------------- */
.fr-specs{ background:var(--fr-ink); color:var(--fr-paper); }
.fr-spec{ padding:1.7rem 1.4rem; border-right:1px solid rgba(255,255,255,.12); }
.fr-spec b{
  display:block; font-family:var(--fr-head); font-weight:800; font-size:1.9rem;
  background:var(--fr-flame); -webkit-background-clip:text;
  background-clip:text; color:transparent; margin-bottom:.3rem;
}
.fr-spec span{
  font-family:var(--fr-head); font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.14em; color:rgba(247,244,238,.66);
}

/* --------------------------------------------------------------------------
   8. cSt CONVERSION TABLE
   -------------------------------------------------------------------------- */
.fr-table{ border:1px solid var(--fr-line); background:#fff; max-width:680px; margin:0 auto; }
.fr-table table{ width:100%; border-collapse:collapse; text-align:center; margin:0; }
.fr-table th{
  background:var(--fr-ink); color:var(--fr-paper); font-family:var(--fr-head);
  font-weight:800; font-size:.8rem; text-transform:uppercase;
  letter-spacing:.1em; padding:.9rem;
}
.fr-table td{ padding:.72rem; border-bottom:1px solid var(--fr-line); font-weight:600; }
.fr-table tr:nth-child(even) td{ background:var(--fr-paper-2); }
.fr-table .cst{ font-family:var(--fr-head); font-weight:800; color:var(--fr-orange); }

/* --------------------------------------------------------------------------
   9. DARK SECTION HELPER (Design A look on any WPBakery row)
   Add "fr-dark" to a row's Extra Class Name
   -------------------------------------------------------------------------- */
.fr-dark{ background:var(--fr-ink); color:var(--fr-paper); }
.fr-dark h1,.fr-dark h2,.fr-dark h3{ color:var(--fr-paper); }
.fr-dark .fr-eyebrow{ color:var(--fr-yellow); }
.fr-dark p{ color:rgba(247,244,238,.72); }
.fr-maroon{ background:var(--fr-maroon); color:#F7E7C8; }

/* --------------------------------------------------------------------------
   10. ANNOUNCEMENT BAR
   -------------------------------------------------------------------------- */
.fr-topbar{
  background:var(--fr-maroon); color:var(--fr-yellow); text-align:center;
  font-family:var(--fr-head); font-weight:700; font-size:.7rem;
  letter-spacing:.22em; text-transform:uppercase; padding:.7rem;
}

/* --------------------------------------------------------------------------
   11. LOGO PLATE (light header — Design B)
   Wrap the logo <img> in <a class="fr-logo-plate">
   -------------------------------------------------------------------------- */
.fr-logo-plate{           /* DEFAULT: no plate — logo sits on the paper bg */
  background:transparent; border:0; padding:0; display:inline-flex;
}
.fr-logo-plate--white{ background:#fff; border:1px solid var(--fr-line); padding:.6rem .95rem; }
/* dark variant, if you ever put the logo on a light-on-dark header */
.fr-logo-plate--dark{ background:var(--fr-ink); border-color:transparent; }
/* no plate at all — logo sits directly on the paper background */
.fr-logo-plate--none{ background:transparent; border:0; padding:0; }

/* --------------------------------------------------------------------------
   12. cSt VARIATION SWATCHES (single product)
   Works with the "Variation Swatches for WooCommerce" plugin.
   Set the "Viscosity (cSt)" attribute type to IMAGE and upload each
   round cap-sticker PNG to its term.
   -------------------------------------------------------------------------- */
.woo-variation-swatches .variable-items-wrapper{ gap:.55rem; }
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item){
  background:#fff; border:2px solid var(--fr-line); border-radius:0;
  box-shadow:none; padding:.35rem; width:auto; height:auto; transition:.15s;
}
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):hover{
  border-color:var(--fr-amber); transform:translateY(-3px);
}
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected{
  border-color:var(--fr-orange); box-shadow:0 0 0 3px rgba(216,84,0,.16);
}
/* manual markup fallback: .fr-sw inside .fr-swatches */
.fr-swatches{ display:grid; grid-template-columns:repeat(8,1fr); gap:.55rem; margin-bottom:1.5rem; }
.fr-sw{ background:#fff; border:2px solid var(--fr-line); padding:.4rem; cursor:pointer; text-align:center; transition:.15s; }
.fr-sw:hover{ border-color:var(--fr-amber); transform:translateY(-3px); }
.fr-sw.is-selected{ border-color:var(--fr-orange); box-shadow:0 0 0 3px rgba(216,84,0,.16); }
.fr-sw img{ width:100%; display:block; }
.fr-sw b{ display:block; font-family:var(--fr-head); font-weight:800; font-size:.6rem;
  color:var(--fr-soft); margin-top:.25rem; }
.fr-sw.is-selected b{ color:var(--fr-orange); }
@media(max-width:1000px){ .fr-swatches{ grid-template-columns:repeat(5,1fr);} }
@media(max-width:560px){ .fr-swatches{ grid-template-columns:repeat(4,1fr);} }

/* --------------------------------------------------------------------------
   13. PRODUCT PAGE EXTRAS
   -------------------------------------------------------------------------- */
.woocommerce div.product div.images img{ background:#fff; padding:6%; border:1px solid var(--fr-line); }
.woocommerce div.product .woocommerce-product-gallery__image{ border:0; }
.fr-instock{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--fr-head);
  font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:#1D7A3D; }
.fr-instock::before{ content:""; width:8px; height:8px; border-radius:50%; background:#1D7A3D; }
.fr-assure{ display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem;
  padding:1.1rem 0; border-block:1px solid var(--fr-line); margin-bottom:1.4rem; }
.fr-assure div{ font-size:.8rem; color:var(--fr-soft); display:flex; gap:.5rem; }
.fr-assure b{ color:var(--fr-orange); }
.fr-specs-list{ list-style:none; padding:0; margin:0; border-top:1px solid var(--fr-line); }
.fr-specs-list li{ display:flex; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--fr-line); }
.fr-specs-list b{ min-width:12rem; font-family:var(--fr-head); font-weight:800; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.09em; }
.fr-specs-list span{ color:var(--fr-soft); }

/* --------------------------------------------------------------------------
   14. SHOP / CATEGORY ARCHIVE
   -------------------------------------------------------------------------- */
.fr-cbanner{ background:var(--fr-ink); color:var(--fr-paper); padding:clamp(34px,5vw,66px) 0;
  position:relative; overflow:hidden; }
.fr-cbanner::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(60% 100% at 88% 60%,rgba(252,144,12,.26),transparent 62%); }
.fr-cbanner > *{ position:relative; z-index:2; }
.fr-cbanner h1{ font-style:italic; margin:0; }
.fr-filter{ border:1px solid var(--fr-line); background:#fff; margin-bottom:1rem; }
.fr-filter h3{ font-size:.78rem; letter-spacing:.12em; margin:0;
  padding:.95rem 1.1rem; border-bottom:1px solid var(--fr-line); }
.fr-filter .body{ padding:.9rem 1.1rem 1.1rem; }
.fr-vpills{ display:flex; flex-wrap:wrap; gap:.35rem; }
.fr-vpill{ border:1px solid var(--fr-line); padding:.34rem .5rem; cursor:pointer;
  font-family:var(--fr-head); font-weight:800; font-size:.68rem; color:var(--fr-soft); transition:.14s; }
.fr-vpill:hover{ border-color:var(--fr-amber); color:var(--fr-orange); }
.fr-vpill.is-active{ background:var(--fr-orange); border-color:var(--fr-orange); color:#fff; }
.woocommerce .woocommerce-ordering select{ border:1px solid var(--fr-line); padding:.6rem .8rem; border-radius:0; }
.woocommerce nav.woocommerce-pagination ul{ border:0; gap:.4rem; display:flex; }
.woocommerce nav.woocommerce-pagination ul li{ border:0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--fr-line); background:#fff; padding:.6rem .95rem;
  font-family:var(--fr-head); font-weight:800; font-size:.84rem; color:var(--fr-soft); }
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{
  background:var(--fr-orange); border-color:var(--fr-orange); color:#fff; }

/* --------------------------------------------------------------------------
   15. BREADCRUMBS
   -------------------------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb{ font-size:.78rem; font-weight:600;
  color:var(--fr-soft); padding:1.3rem 0; margin:0; }
.woocommerce .woocommerce-breadcrumb a:hover{ color:var(--fr-orange); }
/* ==========================================================================
   FRANCHIZE RACING — cSt SWATCH SIZING FIX
   Paste at the END of your child theme style.css
   (or Appearance > Customize > Additional CSS)

   Constrains the variation swatches to a compact wrapping grid.
   Uses !important because the swatch plugin sets inline sizes.
   ========================================================================== */

/* --- 1. Lay the swatches out in a wrapping row --- */
.woo-variation-swatches .variable-items-wrapper,
.variable-items-wrapper,
ul.variable-items-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 1.2rem !important;
  padding: 0 !important;
  list-style: none !important;
  max-width: 100%;
}

/* --- 2. Size each swatch --- */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item),
.variable-items-wrapper li.variable-item,
.variable-items-wrapper .variable-item.image-variable-item {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  padding: 2px !important;
  margin: 0 !important;
  border: 2px solid var(--fr-line, #DCD4C8) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  overflow: hidden;
  transition: transform .15s, border-color .2s;
  box-sizing: border-box !important;
}

/* --- 3. Make the sticker fill the swatch --- */
.woo-variation-swatches .variable-items-wrapper .variable-item img,
.variable-items-wrapper .variable-item img,
.variable-item .variable-item-span-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin: 0 !important;
}

/* --- 4. Hover + selected states --- */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):hover {
  border-color: var(--fr-amber, #FC9000) !important;
  transform: translateY(-3px);
}
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected,
.variable-items-wrapper .variable-item.selected {
  border-color: var(--fr-orange, #D85400) !important;
  box-shadow: 0 0 0 3px rgba(216,84,0,.18) !important;
}

/* --- 5. Kill the oversized checkmark overlay (border already shows selection) --- */
.woo-variation-swatches .variable-item:not(.radio-variable-item).selected::after,
.woo-variation-swatches .variable-item:not(.radio-variable-item).selected::before,
.variable-item.selected .variable-item-contents::after {
  display: none !important;
  content: none !important;
}

/* --- 6. Label row --- */
.woo-variation-swatches .variations label,
.woocommerce div.product form.cart .variations label {
  font-family: var(--fr-head, inherit);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem;
  color: var(--fr-orange, #D85400);
}

/* --- 7. Mobile --- */
@media (max-width: 480px) {
  .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item),
  .variable-items-wrapper li.variable-item {
    width: 50px !important; height: 50px !important;
    min-width: 50px !important; min-height: 50px !important;
    max-width: 50px !important; max-height: 50px !important;
  }
}
/* ==========================================================================
   FRANCHIZE RACING — cSt SWATCHES (FINAL)
   Full-size sticker + cSt number underneath. Replaces all earlier swatch CSS.
   Paste into Appearance > Customize > Additional CSS
   ========================================================================== */

/* --- 1. The row --- */
.woo-variation-swatches .variable-items-wrapper,
ul.variable-items-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 0 1.4rem !important;
  padding: 0 !important;
  list-style: none !important;
}

/* --- 2. Each swatch = vertical card (image on top, number below) --- */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item),
ul.variable-items-wrapper li.variable-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 64px !important;
  height: auto !important;
  min-width: 64px !important;
  max-width: 64px !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 3px !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 2px solid var(--fr-line, #DCD4C8) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  cursor: pointer;
  transition: transform .15s, border-color .2s;
}

/* --- 3. THE FIX: size the plugin's inner container, not just the img --- */
.woo-variation-swatches .variable-item .variable-item-contents,
.woo-variation-swatches .variable-item .variable-item-span,
.woo-variation-swatches .variable-item .variable-item-span-image,
ul.variable-items-wrapper li.variable-item > div,
ul.variable-items-wrapper li.variable-item > span {
  display: block !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.woo-variation-swatches .variable-item img,
ul.variable-items-wrapper li.variable-item img {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* --- 4. The cSt number, forced below the image --- */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item)::after,
ul.variable-items-wrapper li.variable-item::after {
  content: attr(data-value) !important;
  display: block !important;
  position: static !important;
  order: 2;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  text-align: center !important;
  font-family: var(--fr-head, system-ui, sans-serif) !important;
  font-weight: 800 !important;
  font-size: .66rem !important;
  line-height: 1.5 !important;
  color: var(--fr-soft, #5C5149) !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  padding: 2px 0 1px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  pointer-events: none;
}

/* --- 5. Kill the plugin's hover tooltip (the number is always visible now) --- */
.woo-variation-swatches .variable-item::before,
.woo-variation-swatches .variable-item .wvs-tooltip,
.woo-variation-swatches [data-wvstooltip]::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

/* --- 6. Hover + selected --- */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):hover {
  border-color: var(--fr-amber, #FC9000) !important;
  transform: translateY(-3px);
}
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected,
ul.variable-items-wrapper li.variable-item.selected {
  border-color: var(--fr-orange, #D85400) !important;
  box-shadow: 0 0 0 3px rgba(216,84,0,.18) !important;
}
.woo-variation-swatches .variable-items-wrapper .variable-item.selected::after,
ul.variable-items-wrapper li.variable-item.selected::after {
  color: var(--fr-orange, #D85400) !important;
}

/* --- 7. Selected value beside the label --- */
.woo-variation-swatches .variations .woo-selected-variation-item-name {
  display: inline-block !important;
  font-family: var(--fr-head, inherit);
  font-weight: 800;
  font-size: .95rem;
  color: var(--fr-orange, #D85400);
  margin-left: .4rem;
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 480px) {
  .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) {
    width: 58px !important; min-width: 58px !important; max-width: 58px !important;
  }
  .woo-variation-swatches .variable-item img,
  .woo-variation-swatches .variable-item .variable-item-contents { height: 46px !important; min-height: 46px !important; }
}
/* ==========================================================================
   FRANCHIZE RACING — remove the white checkmark overlay on selected swatches
   Append to Additional CSS, AFTER swatch-final.css
   ========================================================================== */

/* The plugin draws a check via a pseudo-element, an SVG, or a background
   image depending on version — this covers all of them. */
.woo-variation-swatches .variable-item.selected .variable-item-contents::after,
.woo-variation-swatches .variable-item.selected .variable-item-contents::before,
.woo-variation-swatches .variable-item.selected::after,
.woo-variation-swatches .variable-item.selected .variable-item-span::after,
.woo-variation-swatches .variable-item.selected .variable-item-span-image::after {
  background-image: none !important;
}

/* keep OUR number label visible (re-assert after the blanket rule above) */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item)::after,
ul.variable-items-wrapper li.variable-item::after {
  content: attr(data-value) !important;
  display: block !important;
  background: none !important;
  background-image: none !important;
}

/* hide any SVG / icon the plugin injects for the selected state */
.woo-variation-swatches .variable-item.selected svg,
.woo-variation-swatches .variable-item .wvs-selected-icon,
.woo-variation-swatches .variable-item.selected .wvs-check,
.woo-variation-swatches .variable-item.selected i {
  display: none !important;
  opacity: 0 !important;
}

/* some builds tint the image on select — keep the sticker clean */
.woo-variation-swatches .variable-item.selected img,
.woo-variation-swatches .variable-item.selected .variable-item-contents {
  filter: none !important;
  opacity: 1 !important;
}

/* ==========================================================================
   16. CUSTOM SITE HEADER (rendered by functions.php)
   ========================================================================== */

/* Hide the stock Kadence header — ours replaces it */
#masthead, .site-header:not(.fr-header), #main-header,
.kadence-sticky-header:not(.fr-header) { display: none !important; }

.fr-site-header-wrap { position: sticky; top: 0; z-index: 500; }

/* announcement bar */
.fr-topbar{
  background: var(--fr-maroon,#480000); color:#F7E7C8; text-align:center;
  font-family: var(--fr-head,'Archivo',sans-serif); font-weight:700;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; padding:.7rem 1rem;
}

/* header bar */
.fr-header{ background: rgba(247,244,238,.96); backdrop-filter: blur(12px);
  border-bottom:1px solid var(--fr-line,#DCD4C8); position:relative; }
.fr-header-inner{
  max-width:1300px; margin:0 auto; padding:.85rem clamp(16px,4vw,40px);
  display:flex; align-items:center; gap:1.5rem;
}
.fr-logo{ display:inline-flex; flex:0 0 auto; }
.fr-logo img{ width:200px; height:auto; display:block; }

.fr-nav{ margin-left:auto; }
.fr-nav ul{ display:flex; gap:1.6rem; list-style:none; margin:0; padding:0; }
.fr-nav a{
  font-family: var(--fr-head,'Archivo',sans-serif); font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; font-size:.79rem;
  color: var(--fr-ink,#171210); text-decoration:none;
  padding:.4rem 0; border-bottom:3px solid transparent; transition:.16s; display:block;
}
.fr-nav a:hover, .fr-nav a.is-active{ color: var(--fr-orange,#D85400); border-color: var(--fr-orange,#D85400); }

.fr-actions{ display:flex; align-items:center; gap:1rem; margin-left:.5rem; }
.fr-ico{ color: var(--fr-ink,#171210); display:inline-flex; position:relative; transition:color .15s; }
.fr-ico:hover{ color: var(--fr-orange,#D85400); }
.fr-cart-count{
  position:absolute; top:-8px; right:-10px; background: var(--fr-orange,#D85400); color:#fff;
  font-family: var(--fr-head,'Archivo',sans-serif); font-weight:800; font-size:.6rem;
  min-width:17px; height:17px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; padding:0 4px; line-height:1;
}
.fr-burger{ display:none; background:none; border:0; color: var(--fr-ink,#171210); cursor:pointer; padding:0; }

/* flame accent bar */
.fr-flamebar{ height:4px; width:100%; background: var(--fr-flame,
  linear-gradient(90deg,#FCD818,#FC9000 40%,#D85400 74%,#A80C0C)); }

/* mobile menu */
.fr-mobile{ display:none; border-top:1px solid var(--fr-line,#DCD4C8); background:#F7F4EE; }
.fr-mobile.is-open{ display:block; }
.fr-mobile ul{ list-style:none; margin:0; padding:.4rem 0; }
.fr-mobile a{
  display:block; padding:.85rem clamp(16px,4vw,40px);
  font-family: var(--fr-head,'Archivo',sans-serif); font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; font-size:.82rem;
  color: var(--fr-ink,#171210); text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.05);
}
.fr-mobile a:hover{ color: var(--fr-orange,#D85400); }

@media (max-width:1100px){ .fr-nav ul{ gap:1.1rem; } .fr-nav a{ font-size:.74rem; } .fr-logo img{ width:170px; } }
@media (max-width:900px){
  .fr-nav{ display:none; }
  .fr-burger{ display:inline-flex; }
  .fr-actions{ margin-left:auto; }
}

/* ==========================================================================
   17. CUSTOM SITE FOOTER (rendered by functions.php)
   ========================================================================== */
#colophon, .site-footer:not(.fr-footer), .footer-widget-area:not(.fr-footer) { display:none !important; }

.fr-footer{ background: var(--fr-maroon,#480000); color:#EDD9C4; }
.fr-footer-inner{
  max-width:1300px; margin:0 auto; padding:clamp(36px,5vw,64px) clamp(16px,4vw,40px);
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem;
}
.fr-footer-brand img{ width:200px; height:auto; display:block; }
.fr-footer-brand p{ color:rgba(237,217,196,.72); max-width:36ch; margin:1rem 0 0; font-size:.92rem; line-height:1.6; }
.fr-footer-col h4{
  font-family: var(--fr-head,'Archivo',sans-serif); font-weight:800;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--fr-yellow,#FCD818); margin:0 0 .9rem;
}
.fr-footer-col ul{ list-style:none; margin:0; padding:0; }
.fr-footer-col li{ margin-bottom:.55rem; }
.fr-footer-col a{ color:rgba(237,217,196,.82); font-size:.9rem; text-decoration:none; transition:color .15s; }
.fr-footer-col a:hover{ color:#fff; }

.fr-footer-bottom{ border-top:1px solid rgba(255,255,255,.16); }
.fr-footer-bottom .fr-footer-inner{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:1.2rem; padding-bottom:1.2rem; gap:.5rem; flex-wrap:wrap;
}
.fr-footer-bottom p{ margin:0; color:rgba(237,217,196,.6); font-size:.82rem; }

@media(max-width:900px){
  .fr-footer-inner{ grid-template-columns:1fr 1fr; }
  .fr-footer-brand{ grid-column:1 / -1; }
}
@media(max-width:520px){
  .fr-footer-inner{ grid-template-columns:1fr; }
  .fr-footer-bottom .fr-footer-inner{ flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   18. CATALOG MODE (browse, no purchase)
   ========================================================================== */
.fr-catalog-notice{
  display:block; margin:1.2rem 0 1.4rem; padding:1rem 1.2rem;
  background:#EFEAE1; border-left:4px solid var(--fr-orange,#D85400);
  font-family: var(--fr-head,'Archivo',sans-serif); font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; font-size:.82rem;
  color: var(--fr-ink,#171210);
}
.fr-details-btn{
  background:transparent !important; border:2px solid var(--fr-ink,#171210) !important;
  color: var(--fr-ink,#171210) !important;
}
.fr-details-btn:hover{
  background: var(--fr-ink,#171210) !important; color:#F7F4EE !important;
  border-color: var(--fr-ink,#171210) !important;
}
/* hide cart affordances while ordering is off */
body.fr-catalog-mode .fr-cart,
body.fr-catalog-mode .fr-cart-count{ display:none !important; }
body.fr-catalog-mode .woocommerce div.product form.cart,
body.fr-catalog-mode .woocommerce .quantity{ display:none !important; }
/* keep swatches visible so people can see the range */
body.fr-catalog-mode .woo-variation-swatches .variable-items-wrapper{ display:flex !important; }

/* ==========================================================================
   19. CONTACT PAGE + FORM
   ========================================================================== */
.fr-contact{ padding: clamp(30px,3.5vw,54px) 0; }
.fr-contact-inner{
  max-width:1100px; margin:0 auto; padding:0 clamp(16px,4vw,40px);
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(26px,4vw,56px); align-items:start;
}
.fr-contact-intro .fr-title{ margin-bottom:.5rem; }
.fr-contact-intro .fr-sub{ margin-bottom:1.6rem; }
.fr-contact-detail{ padding:.9rem 0; border-top:1px solid var(--fr-line,#DCD4C8); }
.fr-contact-detail h3{
  font-family: var(--fr-head,'Archivo',sans-serif); font-weight:800; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color: var(--fr-orange,#D85400); margin:0 0 .3rem;
}
.fr-contact-detail p{ margin:0; color: var(--fr-soft,#5C5149); font-size:.94rem; }
.fr-contact-detail a{ color: var(--fr-ink,#171210); text-decoration:underline; }
.fr-contact-detail a:hover{ color: var(--fr-orange,#D85400); }

.fr-contact-formwrap{ background:#fff; border:1px solid var(--fr-line,#DCD4C8); padding:clamp(18px,2.4vw,30px); }
.fr-form{ display:flex; flex-direction:column; gap:.9rem; }
.fr-field{ display:block; }
.fr-field > span{
  display:block; font-family: var(--fr-head,'Archivo',sans-serif); font-weight:800;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--fr-ink,#171210); margin-bottom:.35rem;
}
.fr-form input[type=text],
.fr-form input[type=email],
.fr-form select,
.fr-form textarea{
  width:100%; border:1px solid var(--fr-line,#DCD4C8); background:#fff;
  padding:.8rem .9rem; font:inherit; font-size:1rem; color: var(--fr-ink,#171210);
  border-radius:0; transition:border-color .15s;
}
.fr-form input:focus, .fr-form select:focus, .fr-form textarea:focus{
  outline:none; border-color: var(--fr-orange,#D85400); box-shadow:0 0 0 3px rgba(216,84,0,.14);
}
.fr-form textarea{ resize:vertical; }
.fr-form .fr-btn{ align-self:flex-start; margin-top:.3rem; }
.fr-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.fr-alert{
  padding:.95rem 1.1rem; margin-bottom:1.1rem; font-size:.93rem; line-height:1.5;
  border-left:4px solid; font-weight:600;
}
.fr-alert--ok{ background:#EAF3DE; border-color:#639922; color:#27500A; }
.fr-alert--err{ background:#FCEBEB; border-color:#E24B4A; color:#791F1F; }

@media(max-width:820px){ .fr-contact-inner{ grid-template-columns:1fr; } }