/*
Theme Name:   Mini Bike Shop
Theme URI:    https://buyminibike.com
Description:  Flatsome child theme for Mini Bike Shop — a powersports "hazard/industrial" skin: gunmetal + hazard orange + caution yellow, condensed display type, racing number-plate badges, and hazard-stripe dividers. Built to stay update-safe on top of Flatsome.
Author:       Mini Bike Shop
Version:      1.0.0
Template:     flatsome
License:      GNU General Public License v2 or later
Text Domain:  mini-bike-shop-child
*/

/* =================================================================
   DESIGN TOKENS
   A hazard/industrial system grounded in mini-bike culture:
   welded steel, hazard livery, racing number plates, redline.
   ================================================================= */
:root {
  /* palette */
  --ink:       #16191D;   /* gunmetal — header, footer, dark UI      */
  --ink-2:     #22262C;   /* raised gunmetal — cards on dark, hovers */
  --hazard:    #FF5A1F;   /* hazard orange — primary CTA & accents   */
  --hazard-d:  #E0470F;   /* hazard orange (hover)                   */
  --caution:   #FFC400;   /* caution yellow — badges, plates, marks  */
  --redline:   #E11D2A;   /* redline red — sale / price emphasis     */
  --steel:     #5A6470;   /* steel grey — muted text, meta           */
  --concrete:  #F2F3F5;   /* concrete — light section backgrounds    */
  --line:      #E3E6EA;   /* hairline borders                        */
  --paper:     #FFFFFF;   /* product cards / surfaces                */

  /* type */
  --font-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --font-body:    "Barlow", system-ui, -apple-system, sans-serif;

  /* map Flatsome's own colour vars so the whole theme follows */
  --fs-color-primary:   #FF5A1F;
  --fs-color-secondary: #16191D;
  --fs-color-success:   #1F9D55;
  --fs-color-alert:     #E11D2A;
}

/* =================================================================
   BASE TYPOGRAPHY
   Display face carries the personality; body face stays readable.
   ================================================================= */
body {
  font-family: var(--font-body);
  color: #23272C;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.is-display, .heading-font {
  font-family: var(--font-display) !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.35rem; }

/* let paragraphs and small print stay in the humanist body face */
p, li, .product-title, .from_the_blog_excerpt { font-family: var(--font-body); }

a { color: var(--hazard); }
a:hover { color: var(--hazard-d); }

/* =================================================================
   HEADER + NAV  (dark gunmetal frame)
   ================================================================= */
#header .header-main,
#header.transparent .header-main { min-height: 84px; }

#header,
.header-wrapper,
#top-bar { background-color: var(--ink); }

#top-bar { border-bottom: 1px solid rgba(255,255,255,0.06); }

/* nav links */
.header-nav a,
.nav > li > a,
#top-bar a { color: #D7DBE0 !important; font-weight: 600; letter-spacing: 0.02em; }
.header-nav a:hover,
.nav > li > a:hover { color: #FFFFFF !important; }

/* active/hover accent underline in hazard orange */
.header-nav-main.nav > li.active > a,
.header-nav-main.nav > li:hover > a { box-shadow: inset 0 -3px 0 var(--hazard); }

/* cart / account icons pick up the accent */
.header .icon-cart .cart-icon strong { background-color: var(--hazard); color:#fff; }

/* =================================================================
   BUTTONS  (chunky, hazard-orange, tactile hover lift)
   ================================================================= */
.button,
button,
input[type="submit"],
.add_to_cart_button,
.single_add_to_cart_button {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 7px;
  border: 0;
  padding: 0.85em 1.7em;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.button.primary,
button[type="submit"],
input[type="submit"],
.single_add_to_cart_button,
.add_to_cart_button {
  background-color: var(--hazard) !important;
  color: #fff !important;
  box-shadow: 0 3px 0 var(--hazard-d);
}
.button.primary:hover,
button[type="submit"]:hover,
.single_add_to_cart_button:hover,
.add_to_cart_button:hover {
  background-color: var(--hazard-d) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(255,90,31,.35);
}
.button.primary:active,
.single_add_to_cart_button:active { transform: translateY(0); box-shadow: 0 2px 0 var(--hazard-d); }

/* secondary = outlined gunmetal */
.button.secondary {
  background: transparent !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 2px var(--ink);
}
.button.secondary:hover { background: var(--ink) !important; color:#fff !important; transform: translateY(-2px); }

/* =================================================================
   SHOP / PRODUCT CARDS  (paper on concrete, hover raise)
   ================================================================= */
.products .product-small.box,
.product-small .box-image {
  background: var(--paper);
  border-radius: 10px;
}
.product-small.box {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.product-small.box:hover {
  box-shadow: 0 10px 28px rgba(22,25,29,.12);
  transform: translateY(-3px);
  border-color: #CDD2D8;
}
.product-small .box-text { padding: 14px 14px 18px; }
.product-title, .product-small .name a {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
}

/* price in redline red, heavy */
.price, .amount, .woocommerce-Price-amount {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--redline);
}
.price del .amount { color: var(--steel); font-weight: 400; }
.price ins .amount { color: var(--redline); }

/* star ratings in caution yellow */
.star-rating span:before, .stars a:before { color: var(--caution); }

/* =================================================================
   BADGES  →  racing NUMBER-PLATE + hazard sale tag  (SIGNATURE)
   ================================================================= */
.badge-container .badge .badge-inner {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 4px;
}
/* Sale badge = hazard tag */
.badge.onsale .badge-inner,
.onsale .badge-inner {
  background: var(--redline) !important;
  color: #fff !important;
}
/* "New" / featured = caution number-plate */
.badge.featured .badge-inner {
  background: var(--caution) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 2px var(--ink);
}

/* Utility: number-plate eyebrow for headings/category cards.
   Usage in Flatsome: wrap text in <span class="plate">03</span> */
.plate {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--caution);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 5px;
  padding: 2px 10px;
  letter-spacing: .06em;
  transform: rotate(-2deg);
}

/* =================================================================
   SIGNATURE: hazard-stripe divider
   Usage: add an HTML block <div class="hazard-stripe"></div>
   (or apply class .hazard-stripe to a Flatsome divider row)
   ================================================================= */
.hazard-stripe {
  height: 12px;
  width: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--ink) 0, var(--ink) 16px,
    var(--caution) 16px, var(--caution) 32px
  );
  border-radius: 2px;
}

/* section eyebrow label */
.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--hazard);
  font-size: .8rem;
}

/* =================================================================
   FORMS / CHECKOUT  (readable, gunmetal focus)
   ================================================================= */
input:not([type="submit"]):not([type="button"]),
select, textarea {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px 14px;
  font-family: var(--font-body);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--hazard);
  box-shadow: 0 0 0 3px rgba(255,90,31,.18);
  outline: none;
}

/* =================================================================
   FOOTER  (gunmetal)
   ================================================================= */
#footer, .footer-widgets, #footer .footer-1, #footer .footer-2 {
  background-color: var(--ink);
  color: #AEB6BF;
}
#footer a { color: #C6CDD4; }
#footer a:hover { color: #fff; }
#footer .widget-title, #footer h3, #footer h4 { color: #fff; }
.absolute-footer, html #footer .absolute-footer a { color: #7E8894; }

/* =================================================================
   QUALITY FLOOR — focus visibility, motion, responsive
   ================================================================= */
a:focus-visible, button:focus-visible, .button:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 3px solid var(--hazard);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .button:hover, .product-small.box:hover { transform: none; }
}

@media (max-width: 549px) {
  h1 { font-size: 1.9rem; }
  .button { padding: 0.8em 1.3em; }
  .plate { transform: none; }
}