/* ===========================================================================
   Online Firework Shop — foundation
   Deploy 002. Tokens, self-hosted type, icon subset, base.

   Loads AFTER OpenCart's bootstrap.min.css and stylesheet.css, so it wins
   where the two disagree. Deliberately contains no component styles: those
   ship with the templates that use them, once Bootstrap has been removed.

   Values are from _brandguide/brand-style-guide.md. Change them there first.
   =========================================================================== */

/* ---------- type: self-hosted, latin subset, variable ---------------------
   Both are variable fonts, so one file per family covers every weight we use.
   35KB and 33KB. No third-party connection, no CDN, no GDPR question about
   IP addresses leaving the site.                                            */
@font-face{
  font-family:"Big Shoulders Display";
  src:url("../fonts/big-shoulders-display-latin.woff2?v=1") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Chivo";
  src:url("../fonts/chivo-latin.woff2?v=1") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- icons: Font Awesome 6 Free, subset to the 58 we use -----------
   274KB of webfont reduced to 7.6KB. Font Awesome 4 stays loaded for now
   because 42 stock OpenCart templates still use it; it is removed in its own
   deploy once the last of those is rebuilt. The families are named
   differently so they cannot collide, and every icon rule below is scoped to
   .fa-solid / .fa-brands so it cannot affect a stock `fa fa-x` element.      */
@font-face{
  font-family:"Font Awesome 6 Free";
  src:url("../fonts/sub-fa-solid.woff2?v=2") format("woff2");
  font-weight:900; font-style:normal; font-display:block;
}
@font-face{
  font-family:"Font Awesome 6 Brands";
  src:url("../fonts/sub-fa-brands.woff2?v=2") format("woff2");
  font-weight:400; font-style:normal; font-display:block;
}
.fa-solid,.fa-brands{
  -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased;
  display:var(--fa-display,inline-block); font-style:normal; font-variant:normal;
  line-height:1; text-rendering:auto;
}
.fa-solid{font-family:"Font Awesome 6 Free"; font-weight:900}
.fa-brands{font-family:"Font Awesome 6 Brands"; font-weight:400}

.fa-solid.fa-arrow-right::before{content:"\f061"}
.fa-solid.fa-arrow-right-from-bracket::before{content:"\f08b"}
.fa-solid.fa-bag-shopping::before{content:"\f290"}
.fa-solid.fa-bars::before{content:"\f0c9"}
.fa-solid.fa-basket-shopping::before{content:"\f291"}
.fa-solid.fa-book-open::before{content:"\f518"}
.fa-solid.fa-box::before{content:"\f466"}
.fa-solid.fa-box-open::before{content:"\f49e"}
.fa-solid.fa-burst::before{content:"\e4dc"}
.fa-solid.fa-calendar-day::before{content:"\f783"}
.fa-solid.fa-car::before{content:"\f1b9"}
.fa-solid.fa-check::before{content:"\f00c"}
.fa-solid.fa-chevron-down::before{content:"\f078"}
.fa-solid.fa-chevron-left::before{content:"\f053"}
.fa-solid.fa-chevron-right::before{content:"\f054"}
.fa-solid.fa-circle-check::before{content:"\f058"}
.fa-solid.fa-circle-exclamation::before{content:"\f06a"}
.fa-solid.fa-circle-info::before{content:"\f05a"}
.fa-solid.fa-circle-play::before{content:"\f144"}
.fa-solid.fa-clock::before{content:"\f017"}
.fa-solid.fa-comment-dots::before{content:"\f4ad"}
.fa-solid.fa-dog::before{content:"\f6d3"}
.fa-solid.fa-envelope::before{content:"\f0e0"}
.fa-solid.fa-file-arrow-down::before{content:"\f56d"}
.fa-solid.fa-fire-extinguisher::before{content:"\f134"}
.fa-solid.fa-gauge::before{content:"\f624"}
.fa-solid.fa-gauge-high::before{content:"\f625"}
.fa-solid.fa-heart::before{content:"\f004"}
.fa-solid.fa-id-card::before{content:"\f2c2"}
.fa-solid.fa-key::before{content:"\f084"}
.fa-solid.fa-link::before{content:"\f0c1"}
.fa-solid.fa-location-dot::before{content:"\f3c5"}
.fa-solid.fa-lock::before{content:"\f023"}
.fa-solid.fa-magnifying-glass::before{content:"\f002"}
.fa-solid.fa-minus::before{content:"\f068"}
.fa-solid.fa-money-bill-wave::before{content:"\f53a"}
.fa-solid.fa-pause::before{content:"\f04c"}
.fa-solid.fa-phone::before{content:"\f095"}
.fa-solid.fa-play::before{content:"\f04b"}
.fa-solid.fa-plus::before{content:"\2b"}
.fa-solid.fa-right-from-bracket::before{content:"\f2f5"}
.fa-solid.fa-right-to-bracket::before{content:"\f2f6"}
.fa-solid.fa-rotate-left::before{content:"\f2ea"}
.fa-solid.fa-ruler-horizontal::before{content:"\f547"}
.fa-solid.fa-shop::before{content:"\f54f"}
.fa-solid.fa-sliders::before{content:"\f1de"}
.fa-solid.fa-star::before{content:"\f005"}
.fa-solid.fa-tags::before{content:"\f02c"}
.fa-solid.fa-temperature-low::before{content:"\f76b"}
.fa-solid.fa-triangle-exclamation::before{content:"\f071"}
.fa-solid.fa-truck::before{content:"\f0d1"}
.fa-solid.fa-user::before{content:"\f007"}
.fa-solid.fa-user-plus::before{content:"\f234"}
.fa-solid.fa-volume-high::before{content:"\f028"}
.fa-solid.fa-warehouse::before{content:"\f494"}
.fa-solid.fa-weight-hanging::before{content:"\f5cd"}
.fa-solid.fa-xmark::before{content:"\f00d"}
.fa-brands.fa-cc-amex::before{content:"\f1f3"}
.fa-brands.fa-cc-mastercard::before{content:"\f1f1"}
.fa-brands.fa-cc-paypal::before{content:"\f1f4"}
.fa-brands.fa-cc-visa::before{content:"\f1f0"}
.fa-brands.fa-facebook-f::before{content:"\f39e"}
.fa-brands.fa-paypal::before{content:"\f1ed"}
.fa-brands.fa-whatsapp::before{content:"\f232"}


/* ---------- tokens ------------------------------------------------------- */
:root{
  /* ground and surface */
  --ink-900:#05031A; --ink-800:#0C0054; --ink-700:#171063; --ink-600:#241C7A;
  --ink-band:#0A0640;
  --paper:#F7F7FB; --paper-edge:#E3E4EF;

  /* accent. Gold fills are primary action and nothing else. */
  --fuse-gold:#F0C024; --spark-cyan:#3CB4FC; --violet:#A860F0; --magenta:#E4609C;

  /* text */
  --text-primary:#FFFFFF; --text-secondary:#C9CEE8; --text-tertiary:#8C93B8;
  --text-on-accent:#05031A;

  /* status. Out of stock is grey, never red: red reads as an error. */
  --in-stock:#3CB4FC; --low-stock:#F0C024; --out-of-stock:#8C93B8; --error:#FF6B6B;

  --font-display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --font-body:"Chivo","Helvetica Neue",Arial,sans-serif;

  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  --r-chip:2px; --r-control:6px; --r-card:12px; --r-tile:20px; --r-pill:999px;

  --container:1320px; --gutter:24px;

  --t-micro:150ms; --t-panel:300ms; --ease-out:cubic-bezier(.22,1,.36,1);
}

/* ---------- base ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

/* An author display value must not defeat the hidden attribute. Without this,
   any component that sets display on a hideable element renders regardless. */
[hidden]{display:none !important}

/* Bootstrap 3 sets html{font-size:10px}, which makes every rem in the type
   scale 62.5% of its designed size — the nav lands at 13.75px instead of 22px
   and the utility bar at 8px. Restore the browser default so rem means 16px.
   Bootstrap 3's own components are sized in px, so this does not disturb them.
   Remove nothing here when Bootstrap goes: 100% is correct either way. */
html{font-size:100%; -webkit-text-size-adjust:100%}

body{
  background:var(--ink-900);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; height:auto}

a{color:var(--spark-cyan); text-decoration:none}
a:hover{color:var(--spark-cyan); text-decoration:underline}

/* Never remove the focus ring. */
:focus-visible{outline:2px solid var(--spark-cyan); outline-offset:2px; border-radius:2px}

/* Colour is set explicitly, not inherited. OpenCart's own stylesheet.css sets
   h1-h6 to #444, which is dark grey on a dark canvas and all but invisible.
   In the concepts headings simply inherited white from body, so nothing here
   set a colour and the omission was silent. */
h1,h2,h3,h4,h5,h6{color:var(--text-primary)}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin:0;
}
h1{font-size:clamp(2.75rem,1.5rem + 5vw,4.5rem); line-height:.95}
h2{font-size:clamp(1.875rem,1.2rem + 2.6vw,2.75rem); line-height:1}
h3{font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem); line-height:1.1; font-weight:600; letter-spacing:.02em}

/* Product names are never set in the display face: condensed caps at small
   sizes destroy scanability. See brand-style-guide.md 4.3. */
h4,h5,h6{font-family:var(--font-body); text-transform:none; letter-spacing:0; margin:0}

/* Prices, shot counts and durations must align vertically in every grid. */
.price,.money,td[data-numeric]{font-variant-numeric:tabular-nums}

.skip{position:absolute; left:-9999px; top:0; background:var(--fuse-gold);
  color:var(--text-on-accent); padding:12px 20px; font-weight:700; z-index:100}
.skip:focus{left:8px; top:8px}
.skip:hover,.skip:focus{color:var(--text-on-accent)}