/*
Theme Name:   FUSE Fireworks
Theme URI:    https://fusefireworks.uk
Description:  Child theme for GeneratePress carrying the FUSE Fireworks design — dark palette, category colours, tag-driven product badges, age gate, opening countdown and WhatsApp ordering.
Author:       Built for FUSE Fireworks & Pyrotechnics
Template:     generatepress
Version:      1.3.3
Text Domain:  fuse-child
*/

:root{
  --pitch:#0A0706; --soot:#120D0A; --card:#1B1410; --card-2:#241A14;
  --edge:#3A2A1E; --edge-soft:#2A1F17;
  --cream:#FFF4E6; --cream-2:#C9B49C; --cream-3:#8F7D6B;
  --flare:#FF7A18; --gold:#FFC73A; --crimson:#D32410; --green:#27B254;
  --ember:linear-gradient(170deg,#FFD15C 0%,#FF8A1F 45%,#D8300F 100%);
  --c-packages:#FF8A1F; --c-selection:#FFC73A; --c-rockets:#58C7F3;
  --c-roman:#FF5E9C; --c-barrages:#B98BFF; --c-compounds:#5CE27E; --c-misc:#C2A98F;
  --c:var(--c-misc);
  --r:14px; --r-s:9px;
  --shadow:0 2px 0 rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.45);
}

/* ---------- base ---------- */
body{
  background:var(--pitch); color:var(--cream);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-variant-numeric:tabular-nums;
  background-image:radial-gradient(900px 420px at 50% -120px, rgba(255,122,24,.16), transparent 70%);
  background-repeat:no-repeat;
}
h1,h2,h3,h4,.woocommerce-loop-product__title,.product_title{
  font-family:"Lilita One","Archivo Black",system-ui,sans-serif;
  font-weight:400; letter-spacing:.01em;
}
a{color:var(--gold)}
a:hover{color:var(--flare)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.site-content{padding-top:0}

/* ---------- header ---------- */
.site-header{background:rgba(10,7,6,.94); border-bottom:1px solid var(--edge-soft)}
.main-navigation{background:transparent}
.main-navigation .main-nav ul li a{color:var(--cream-2); font-weight:600}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a{color:var(--gold); background:transparent}
.site-logo img{max-height:52px; width:auto}

.fuse-ticker{
  background:var(--crimson); color:#fff; font-size:12.5px; font-weight:600;
  text-align:center; padding:7px 16px;
}
.fuse-ticker b{font-weight:700}

.fuse-wa-head{
  display:inline-flex; align-items:center; gap:7px; background:var(--green); color:#04210E;
  border-radius:999px; padding:9px 15px; font-weight:700; font-size:14px;
  text-decoration:none; margin-left:10px;
}
.fuse-wa-head:hover{color:#04210E; filter:brightness(1.08)}
.fuse-wa-head svg{width:18px; height:18px}
@media (max-width:768px){ .fuse-wa-head .label{display:none} .fuse-wa-head{padding:9px 11px} }

/* ---------- buttons ---------- */
.button,button,input[type="submit"],
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,
.woocommerce input.button,.wp-block-button__link{
  background:var(--ember); color:#2A0E02; border:0; border-radius:999px;
  font-weight:700; padding:12px 22px; box-shadow:0 3px 0 #8E1C05;
}
.button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce #respond input#submit:hover{
  background:var(--ember); color:#2A0E02; filter:brightness(1.07);
}
.woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--ember); color:#2A0E02}
.fuse-btn-wa{
  background:var(--green)!important; color:#04210E!important; box-shadow:0 3px 0 #10622D!important;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
}
.fuse-btn-wa svg{width:18px; height:18px}
.fuse-btn-block{display:flex; width:100%; padding:16px; font-size:16.5px; text-align:center}

/* ---------- hero ---------- */
.fuse-hero{max-width:1140px; margin:22px auto 0; padding:0 16px}
.fuse-hero-stage{
  position:relative; border-radius:var(--r); overflow:hidden; background:#000;
  border:1px solid var(--edge-soft); box-shadow:0 0 70px rgba(255,122,24,.17);
}
.fuse-hero-stage video{width:100%; height:auto; display:block}

/* ---------- countdown ---------- */
.fuse-cd{
  max-width:1140px; margin:14px auto 0; border:1px solid var(--edge); border-radius:var(--r);
  background:var(--card); padding:15px 16px; text-align:center;
}
.fuse-cd .lede{font-family:"Lilita One",sans-serif; font-size:clamp(19px,4.3vw,25px); line-height:1.12}
.fuse-cd .sub{color:var(--cream-2); font-size:14px; margin-top:5px}
.fuse-cd .clock{display:flex; justify-content:center; gap:8px; margin-top:13px; flex-wrap:wrap}
.fuse-cd .u{
  min-width:68px; background:var(--card-2); border:1px solid var(--edge-soft);
  border-radius:var(--r-s); padding:9px 6px;
}
.fuse-cd .u b{display:block; font-family:"Lilita One",sans-serif; font-weight:400; font-size:28px; line-height:1; color:var(--gold)}
.fuse-cd .u span{display:block; font-size:11px; color:var(--cream-3); margin-top:4px}
.fuse-cd.is-open{border-color:var(--green)}
.fuse-cd.is-open .lede{color:var(--green)}

/* ---------- category tiles ---------- */
.fuse-cats{
  max-width:1140px; margin:34px auto; padding:0 16px;
  display:grid; gap:10px; grid-template-columns:repeat(2,1fr);
}
.fuse-cats .fuse-cat.is-wide{grid-column:span 2}
@media (min-width:620px){
  .fuse-cats{grid-template-columns:repeat(3,1fr)}
  .fuse-cats .fuse-cat.is-wide{grid-column:span 3}
}
@media (min-width:960px){
  .fuse-cats{grid-template-columns:repeat(4,1fr)}
  .fuse-cats .fuse-cat.is-wide{grid-column:span 2}
}
.fuse-cat{
  position:relative; border:1px solid var(--edge-soft); background:var(--card);
  border-radius:var(--r); padding:14px 13px; text-decoration:none; overflow:hidden; display:block;
}
.fuse-cat::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--c)}
.fuse-cat .t{display:block; font-family:"Lilita One",sans-serif; font-size:18px; line-height:1.1; color:var(--cream)}
.fuse-cat .n{display:block; font-size:12.5px; color:var(--cream-3); margin-top:3px}

/* ---------- product cards ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background:var(--card); border:1px solid var(--edge-soft); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); padding:0 0 13px; text-align:left;
}
.woocommerce ul.products li.product a img{margin:0; border-radius:0}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:19px; line-height:1.12; padding:11px 13px 0; color:var(--cream);
}
.woocommerce ul.products li.product .price{
  display:block; padding:7px 13px 0; color:var(--gold);
  font-family:"Lilita One",sans-serif; font-size:23px;
}
.woocommerce ul.products li.product .price del{
  color:var(--cream-3); font-family:"Archivo",sans-serif; font-size:13px; opacity:1; margin-right:7px;
}
.woocommerce ul.products li.product .price ins{background:transparent; color:var(--gold); text-decoration:none}
.woocommerce ul.products li.product .button{margin:11px 13px 0; display:block; text-align:center}
.woocommerce ul.products li.product .fuse-sup{
  display:block; padding:11px 13px 0; font-size:11.5px; color:var(--cream-3); letter-spacing:.03em;
}

.woocommerce span.onsale{display:none}

/* ---------- badges ---------- */
.fuse-flags{
  position:absolute; top:9px; left:9px; z-index:3;
  display:flex; flex-direction:column; gap:5px; align-items:flex-start;
}
.woocommerce ul.products li.product,
.woocommerce div.product div.images{position:relative}
.fuse-flag{
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px;
  background:var(--card); border:1px solid var(--edge); color:var(--cream);
  line-height:1.5;
}
.fuse-flag.hot{background:var(--ember); color:#2A0E02; border-color:transparent}
.fuse-flag.low{background:#FFE9A8; color:#4A3000; border-color:transparent}
.fuse-flag.lownoise{background:#CDE9FF; color:#083554; border-color:transparent}
.fuse-flag.save{background:transparent; color:var(--gold); border-color:var(--gold)}

.fuse-sold{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  background:rgba(10,7,6,.78); color:var(--cream-2); text-align:center;
  font-family:"Lilita One",sans-serif; font-size:16px; padding:7px 4px;
}
.fuse-oos img{filter:grayscale(1) brightness(.82)}

/* ---------- single product ---------- */
.woocommerce div.product .product_title{font-size:clamp(28px,6vw,42px); line-height:1.04}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  color:var(--gold); font-family:"Lilita One",sans-serif; font-size:38px;
}
.woocommerce div.product p.price del{
  color:var(--cream-3); font-family:"Archivo",sans-serif; font-size:17px; opacity:1;
}
.woocommerce div.product p.price ins{background:transparent; color:var(--gold); text-decoration:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:var(--card); border-color:var(--edge-soft)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--card-2)}
.woocommerce div.product .woocommerce-tabs .panel{background:transparent}
.woocommerce .quantity .qty{
  background:var(--card); border:1px solid var(--edge); color:var(--cream);
  border-radius:var(--r-s); padding:10px;
}
.woocommerce div.product form.cart{margin-bottom:18px}
.fuse-collect-note{
  font-size:13.5px; color:var(--cream-3); border-top:1px solid var(--edge-soft);
  padding-top:14px; margin-top:16px;
}
.fuse-video-btn{
  display:inline-flex; align-items:center; gap:9px; margin:4px 0 16px;
  border:1px solid var(--edge); border-radius:999px; padding:11px 20px;
  background:var(--card); color:var(--cream); font-weight:700; text-decoration:none;
}
.fuse-video-btn:hover{color:var(--gold)}
.fuse-video-btn svg{width:15px; height:15px}

/* ---------- cart ---------- */
.woocommerce table.shop_table{
  background:var(--card); border:1px solid var(--edge-soft); border-radius:var(--r); color:var(--cream);
}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{border-color:var(--edge-soft)}
.woocommerce-cart table.cart img{width:62px; border-radius:var(--r-s)}
.cart-collaterals .cart_totals{background:var(--card); border:1px solid var(--edge-soft); border-radius:var(--r); padding:16px}
.woocommerce .cart-collaterals .cart_totals table{background:transparent}

.fuse-order-box{
  background:var(--card); border:1px solid var(--edge); border-radius:var(--r);
  padding:18px; margin:22px 0;
}
.fuse-order-box h2{font-size:24px; margin:0 0 6px}
.fuse-order-box p.intro{color:var(--cream-2); font-size:14.5px; margin:0 0 16px}
.fuse-field{margin-bottom:12px}
.fuse-field label{display:block; font-size:13px; font-weight:600; margin-bottom:5px}
.fuse-field input,.fuse-field textarea{
  width:100%; padding:12px; border-radius:var(--r-s);
  border:1px solid var(--edge); background:var(--card-2); color:var(--cream);
}
.fuse-preview{
  background:#0E1B12; border:1px solid #1E4A2D; border-radius:var(--r); padding:14px;
  font-size:13.5px; white-space:pre-wrap; color:#CDEBD6; line-height:1.55; margin:14px 0;
}
.fuse-preview .hd{color:#6FD693; font-size:11.5px; font-weight:700; letter-spacing:.04em; margin-bottom:8px}
.fuse-order-note{font-size:13px; color:var(--cream-3); text-align:center; margin-top:12px}

/* ---------- age gate ---------- */
.fuse-gate{
  position:fixed; inset:0; z-index:99999; background:var(--pitch);
  background-image:radial-gradient(760px 420px at 50% 8%, rgba(255,122,24,.22), transparent 70%);
  display:grid; place-items:center; padding:24px 18px; overflow-y:auto;
}
.fuse-gate-card{max-width:430px; width:100%; text-align:center}
.fuse-gate-card img{height:124px; width:auto; margin:0 auto 20px}
.fuse-gate-card h2{font-size:clamp(26px,6.4vw,34px); line-height:1.08; margin-bottom:10px}
.fuse-gate-card p{color:var(--cream-2); font-size:15px; margin:0 auto 22px; max-width:34ch}
.fuse-gate-btns{display:grid; gap:10px}
.fuse-gate-btns .alt{background:var(--card)!important; color:var(--cream)!important; border:1px solid var(--edge); box-shadow:none!important}
.fuse-gate-small{font-size:12.5px; color:var(--cream-3); margin-top:18px; line-height:1.5}

/* ---------- footer ---------- */
.site-footer,.site-info{background:var(--soot); border-top:1px solid var(--edge-soft); color:var(--cream-2)}
.site-footer a{color:var(--cream-2)}
.fuse-socials{display:flex; gap:9px; margin-top:12px}
.fuse-socials a{
  width:38px; height:38px; border-radius:999px; border:1px solid var(--edge);
  display:grid; place-items:center; color:var(--cream-2);
}
.fuse-socials svg{width:19px; height:19px}

@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

/* ==========================================================================
   GeneratePress container overrides
   The parent theme paints its own backgrounds from the customiser palette.
   These pull every structural container back to the FUSE palette.
   ========================================================================== */

:root{
  --base:var(--pitch); --base-2:var(--pitch); --base-3:var(--card);
  --contrast:var(--cream); --contrast-2:var(--cream-2); --contrast-3:var(--cream-3);
  --accent:var(--gold);
}

body,
.site,
.site-content,
#page,
#content,
.container,
.grid-container,
.inside-article,
.separate-containers .inside-article,
.separate-containers .site-main,
.one-container .site-content,
.entry-content,
.page-header,
.widget-area .widget,
.sidebar .widget,
.comments-area{
  background-color:transparent;
  color:var(--cream);
}

body{background-color:var(--pitch)}

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content{
  padding-left:0; padding-right:0;
}

/* GeneratePress underlines every link by default. */
a,.entry-title a,.site-branding a{text-decoration:none}
.entry-content a:not(.button):not(.fuse-cat):not(.fuse-video-btn):not(.fuse-wa-head){text-decoration:underline}

/* Header and footer. */
.site-header,.site-footer,.site-info,.footer-widgets{background-color:var(--soot)}
.main-title a,.site-description{color:var(--cream)}
.main-title{font-family:"Lilita One",sans-serif; font-size:26px}

/* Headings and body copy inside the parent's wrappers. */
.entry-content h1,.entry-content h2,.entry-content h3,
.page-header h1,.entry-title{color:var(--cream)}
.entry-content p,.entry-content li{color:var(--cream-2)}

/* Forms. */
input[type="text"],input[type="email"],input[type="url"],input[type="password"],
input[type="search"],input[type="number"],input[type="tel"],input[type="date"],
select,textarea{
  background-color:var(--card-2); color:var(--cream);
  border:1px solid var(--edge); border-radius:var(--r-s);
}
::placeholder{color:var(--cream-3); opacity:1}

/* WooCommerce notices and messages. */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background-color:var(--card); color:var(--cream);
  border-top-color:var(--flare);
}
.woocommerce-message::before,.woocommerce-info::before{color:var(--flare)}

/* Breadcrumbs, result count, ordering. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select{color:var(--cream-3)}
.woocommerce .woocommerce-breadcrumb a{color:var(--cream-2)}

/* Shop grid spacing. */
.woocommerce ul.products{display:grid; gap:14px; margin:0 0 28px}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{width:auto!important; margin:0!important; float:none!important}
@media (min-width:480px){ .woocommerce ul.products{grid-template-columns:repeat(2,1fr)} }
@media (min-width:860px){ .woocommerce ul.products{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1100px){ .woocommerce ul.products{grid-template-columns:repeat(4,1fr)} }

/* Category archive description. */
.term-description{color:var(--cream-2); margin-bottom:18px}

/* Tables and pagination. */
.woocommerce nav.woocommerce-pagination ul{border-color:var(--edge-soft)}
.woocommerce nav.woocommerce-pagination ul li{border-color:var(--edge-soft)}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{color:var(--cream)}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--card-2); color:var(--gold)}

/* ==========================================================================
   Header, hero and footer corrections (1.0.3)
   ========================================================================== */

/* --- header: logo, nav and the WhatsApp button on one line --- */
.site-header .inside-header{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:10px 0;
}
.site-logo{margin:0}
.site-logo img,.header-image{
  height:58px!important; width:auto!important; max-height:58px;
}
.main-title{font-size:22px; line-height:1.1; margin:0}

.main-navigation{flex:1}
.main-navigation .inside-navigation{padding:0}
.main-navigation .main-nav > ul{
  display:flex; align-items:center; flex-wrap:wrap; gap:2px; justify-content:flex-end;
}
.main-navigation .main-nav ul li a{
  padding:10px 12px; font-size:14.5px; line-height:1.2;
}

/* The WhatsApp item is a button, not a menu link — strip the nav padding. */
.main-navigation .main-nav ul li.fuse-wa-item{margin-left:8px}
.main-navigation .main-nav ul li.fuse-wa-item > a,
.main-navigation .main-nav ul li.fuse-wa-item > a:hover{
  padding:9px 15px; background:var(--green); color:#04210E;
  border-radius:999px; font-size:14px; font-weight:700; line-height:1;
  display:inline-flex; align-items:center; gap:7px; margin:0;
}
.fuse-wa-head svg{width:17px; height:17px; flex:none}

@media (max-width:900px){
  .site-header .inside-header{gap:10px}
  .main-navigation .main-nav > ul{justify-content:flex-start}
  .main-navigation .main-nav ul li a{padding:9px 9px; font-size:13.5px}
  .main-navigation .main-nav ul li.fuse-wa-item > a{padding:8px 12px}
  .fuse-wa-head .label{display:none}
}

/* --- hero: cap the height so it does not fill the screen --- */
.fuse-hero{margin-top:18px; padding:0}
.fuse-hero-stage video{
  width:100%; height:clamp(220px,38vw,420px); object-fit:cover; object-position:center;
}

/* --- countdown and tiles sit tighter under the hero --- */
.fuse-cd{margin-top:12px}
.fuse-cats{margin:18px auto 34px; padding:0}
.fuse-cat{padding:15px 15px 14px}
.fuse-cat.is-wide{display:flex; align-items:center; gap:14px}
.fuse-cat.is-wide .t{font-size:21px}

/* --- footer --- */
.site-info{font-size:13px; color:var(--cream-3); text-align:center}
.site-info p{margin:0 0 4px}
.site-info a{color:var(--cream-2)}
.footer-widgets{padding:26px 0 10px}
.fuse-socials{justify-content:center}

/* --- the front page has no title; give the content room instead --- */
.home .entry-header{display:none}
.home .entry-content{margin-top:0}

/* ==========================================================================
   Homepage sections (1.0.4)
   ========================================================================== */

.fuse-intro{text-align:center; padding:26px 4px 4px; max-width:1140px; margin:0 auto}
.fuse-intro h1{
  font-size:clamp(31px,7vw,54px); line-height:1.02; margin:0; color:var(--cream);
}
.fuse-intro h1 .fire{
  background:var(--ember); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fuse-intro p{color:var(--cream-2); max-width:46ch; margin:12px auto 0; font-size:16px}
.fuse-cta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px}
.fuse-btn-quiet{
  background:var(--card)!important; color:var(--cream)!important;
  border:1px solid var(--edge)!important; box-shadow:none!important;
}

.fuse-head{display:flex; align-items:baseline; gap:14px; margin:36px 0 14px}
.fuse-head h2{font-size:clamp(23px,4.6vw,32px); margin:0; color:var(--cream)}
.fuse-head a{margin-left:auto; font-size:14px; font-weight:600; color:var(--gold); white-space:nowrap; text-decoration:none}

/* "Going fast" row — a scrolling rail on phones, a grid on desktop. */
.woocommerce .products.fuse-rail{margin-bottom:10px}

.fuse-steps{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-bottom:10px}
.fuse-step{border:1px solid var(--edge-soft); border-radius:var(--r); padding:18px 16px; background:var(--card)}
.fuse-step .k{font-family:"Lilita One",sans-serif; font-size:30px; color:var(--flare); line-height:1}
.fuse-step h3{font-size:19px; margin:7px 0 6px; color:var(--cream)}
.fuse-step p{margin:0; font-size:14.5px; color:var(--cream-2)}

.fuse-sups{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:18px}
.fuse-sup-chip{
  border:1px solid var(--edge); border-radius:999px; padding:8px 16px;
  font-weight:600; font-size:14px; color:var(--cream-2);
}
.fuse-trust{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-bottom:34px}
.fuse-tr{display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--cream-2); margin:0}
.fuse-tr svg{width:19px; height:19px; color:var(--gold); flex:none; margin-top:2px}

/* Category tiles need the inner wrapper for the two-line label. */
.fuse-cat .t,.fuse-cat .n{display:block}
.fuse-cat.is-wide .n{margin-top:4px}

/* ==========================================================================
   Header basket button (1.0.5)
   ========================================================================== */

.main-navigation .main-nav ul li.fuse-basket-item{margin-left:6px}
.main-navigation .main-nav ul li.fuse-basket-item > a,
.main-navigation .main-nav ul li.fuse-basket-item > a:hover,
a.fuse-basket{
  display:inline-flex; align-items:center; gap:8px; margin:0;
  padding:9px 14px 9px 12px; border-radius:999px;
  background:var(--card); border:1px solid var(--edge); color:var(--cream);
  font-weight:700; font-size:14px; line-height:1; text-decoration:none;
}
.main-navigation .main-nav ul li.fuse-basket-item > a:hover{border-color:var(--gold); color:var(--cream)}
a.fuse-basket svg{width:18px; height:18px; flex:none}
a.fuse-basket .n{
  background:var(--card-2); color:var(--cream-3); border-radius:999px;
  min-width:21px; height:21px; display:inline-grid; place-items:center;
  font-size:12.5px; font-weight:700; padding:0 6px;
}
a.fuse-basket.has-items{border-color:transparent; background:var(--ember); color:#2A0E02}
a.fuse-basket.has-items .n{background:rgba(42,14,2,.22); color:#2A0E02}

@media (max-width:900px){
  a.fuse-basket{padding:8px 11px}
  a.fuse-basket .label{display:none}
}

/* ==========================================================================
   Menu dropdown, footer and shop layout (1.0.6)
   ========================================================================== */

/* --- categories dropdown --- */
.main-navigation ul ul{
  background:var(--card); border:1px solid var(--edge); border-radius:var(--r-s);
  box-shadow:var(--shadow); padding:6px; min-width:220px; overflow:hidden;
}
.main-navigation ul ul li{border:0}
.main-navigation .main-nav ul ul li a{
  padding:9px 12px; border-radius:var(--r-s); font-size:14px; color:var(--cream-2);
}
.main-navigation .main-nav ul ul li:hover > a,
.main-navigation .main-nav ul ul li.current-menu-item > a{
  background:var(--card-2); color:var(--gold);
}
.main-navigation .main-nav ul li.menu-item-has-children > a .dropdown-menu-toggle{padding-left:6px}

/* Keep the two buttons at the end of the bar, whatever the menu holds. */
.main-navigation .main-nav ul li.fuse-wa-item{margin-left:auto}
.main-navigation .main-nav ul li.fuse-basket-item{margin-left:6px}
@media (max-width:900px){
  .main-navigation .main-nav ul li.fuse-wa-item{margin-left:4px}
}

/* --- footer: tighter, and the icons centred on every page --- */
.site-footer .footer-widgets{padding:18px 0 6px}
.site-footer .footer-widgets-container{padding:0}
.site-footer .widget{margin:0; padding:0}
.site-footer .inside-footer-widgets{display:flex; justify-content:center}
.fuse-socials{justify-content:center; margin:0}
.site-info{padding:14px 0 18px}
.site-info .inside-site-info{padding:0}

/* --- shop pages: full width now the sidebar is gone --- */
.woocommerce .site-content .content-area,
.woocommerce-page .site-content .content-area{width:100%; float:none}
.woocommerce .widget-area,.woocommerce-page .widget-area{display:none}

/* --- "Going fast" row --- */
.fuse-rail-wrap{margin-bottom:8px}
.fuse-rail-wrap .products{margin-bottom:0}

/* ==========================================================================
   Hero: show the whole frame, never crop it (1.0.7)
   The video carries the strapline and address, so cropping loses content.
   Constrain the stage's width instead and let the height follow.
   ========================================================================== */

.fuse-hero{max-width:1140px; margin:18px auto 0; padding:0}
.fuse-hero-stage{max-width:800px; margin:0 auto}
.fuse-hero-stage video{
  width:100%; height:auto; max-height:none;
  object-fit:contain; object-position:center; display:block;
}

/* ==========================================================================
   Nav alignment and logo sizing (1.0.8)
   ========================================================================== */

/* The menu bar fills its space so the two buttons can be pushed right.
   Desktop only — on mobile the list must stay hidden until toggled. */
@media (min-width:769px){
  .site-header .inside-header > nav.main-navigation{flex:1 1 auto; min-width:0}
  .main-navigation .inside-navigation{width:100%}
  .main-navigation .main-nav,
  .main-navigation .main-nav > ul{width:100%}
}

/* Logo: transparent PNG, fixed height, never stretched. */
.site-logo img,.header-image{
  height:64px!important; width:auto!important; max-height:64px;
  background:transparent; object-fit:contain;
}
@media (max-width:900px){
  .site-logo img,.header-image{height:48px!important; max-height:48px}
}

/* ==========================================================================
   1.0.9 — mobile menu, product grid outside the shop, hero image support
   ========================================================================== */

/* --- the menu toggle is NOT a call-to-action button --- */
.menu-toggle,
button.menu-toggle,
.main-navigation .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle{
  background:transparent!important; color:var(--cream)!important;
  box-shadow:none!important; border:0!important; border-radius:0!important;
  padding:12px 14px!important; font-weight:600; font-size:15px; width:auto;
}
.menu-toggle:hover,.menu-toggle:focus{background:transparent!important; color:var(--gold)!important}
.menu-toggle .gp-icon{display:inline-flex}

/* --- mobile navigation --- */
@media (max-width:768px){
  .site-header .inside-header{
    flex-wrap:nowrap; gap:8px; padding:8px 0; align-items:center;
  }
  .site-logo{flex:0 0 auto}
  .main-navigation{flex:0 0 auto; margin-left:auto}

  /* superseded in 1.1.1 — see the mobile block at the end of this file */
  .main-navigation .main-nav > ul > li{display:block; width:100%; margin:0!important}
  .main-navigation .main-nav > ul > li > a{
    display:block; padding:13px 16px; border-bottom:1px solid var(--edge-soft);
    font-size:15.5px;
  }
  .main-navigation ul ul{
    position:static!important; width:100%; box-shadow:none; border:0;
    border-radius:0; padding:0; background:var(--card);
  }
  .main-navigation .main-nav ul ul li a{padding:11px 16px 11px 30px; border-bottom:1px solid var(--edge-soft)}

  /* superseded in 1.1.1 */
  .main-navigation .main-nav > ul > li.fuse-wa-item > a,
  .main-navigation .main-nav > ul > li.fuse-basket-item > a{
    display:flex; justify-content:center; padding:12px 10px; border-bottom:0;
  }
  .fuse-wa-head .label,a.fuse-basket .label{display:inline!important}
}

/* --- product grid works anywhere, not only inside .woocommerce --- */
ul.products{
  display:grid!important; gap:14px; margin:0 0 28px; padding:0; list-style:none;
}
ul.products::before,ul.products::after{display:none!important}
ul.products li.product{
  width:auto!important; margin:0!important; float:none!important;
  position:relative; list-style:none;
  background:var(--card); border:1px solid var(--edge-soft); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); padding:0 0 13px; text-align:left;
}
@media (min-width:480px){ ul.products{grid-template-columns:repeat(2,1fr)} }
@media (min-width:860px){ ul.products{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1100px){ ul.products{grid-template-columns:repeat(4,1fr)} }

ul.products li.product a img{margin:0; border-radius:0; width:100%; display:block}
ul.products li.product .woocommerce-loop-product__title{
  font-family:"Lilita One",sans-serif; font-weight:400;
  font-size:19px; line-height:1.12; padding:11px 13px 0; color:var(--cream);
}
ul.products li.product .price{
  display:block; padding:7px 13px 0; color:var(--gold);
  font-family:"Lilita One",sans-serif; font-size:23px;
}
ul.products li.product .price del{
  color:var(--cream-3); font-family:"Archivo",sans-serif; font-size:13px; opacity:1; margin-right:7px;
}
ul.products li.product .price ins{background:transparent; color:var(--gold); text-decoration:none}
ul.products li.product .button{margin:11px 13px 0; display:block; text-align:center}
ul.products li.product .fuse-sup{
  display:block; padding:11px 13px 0; font-size:11.5px; color:var(--cream-3); letter-spacing:.03em;
}
span.onsale{display:none!important}

/* Badges anchor to their own card, wherever that card appears. */
ul.products li.product,
div.product div.images{position:relative}
.fuse-flags{position:absolute; top:9px; left:9px; z-index:3}

/* --- hero accepts an image or a gif as well as a video --- */
.fuse-hero-stage{max-width:1140px; margin:0 auto}
.fuse-hero-stage video,
.fuse-hero-stage img{
  width:100%; height:auto; display:block; object-fit:contain;
}

/* ==========================================================================
   1.1.0 — mobile menu must stay closed until it is opened
   Earlier rules forced the menu list to display at every width, which beat
   the parent theme's "hidden until toggled" state. Everything that lays the
   bar out horizontally is now desktop-only.
   ========================================================================== */

/* --- desktop only: one row, buttons pinned right --- */
@media (min-width:769px){
  .main-navigation .main-nav > ul{
    display:flex!important; align-items:center; flex-wrap:wrap;
    justify-content:flex-start; gap:2px; width:100%;
  }
  .main-navigation .main-nav > ul > li.fuse-wa-item{margin-left:auto!important}
  .main-navigation .main-nav > ul > li.fuse-basket-item{margin-left:6px!important}
}

/* --- mobile: closed by default, opens on the toggle --- */
@media (max-width:768px){
  .main-navigation .main-nav > ul{
    display:none;
    width:100%; background:var(--soot); border-top:1px solid var(--edge-soft);
  }
  .main-navigation.toggled .main-nav > ul,
  .main-navigation .main-nav > ul.toggled{display:block}

  .main-navigation .main-nav > ul > li{
    display:block; width:100%; margin:0!important; float:none;
  }
  .main-navigation .main-nav > ul > li > a{
    display:block; padding:13px 16px; border-bottom:1px solid var(--edge-soft); font-size:15.5px;
  }
  .main-navigation ul ul{
    position:static!important; width:100%; box-shadow:none; border:0;
    border-radius:0; padding:0; background:var(--card); display:none;
  }
  .main-navigation .main-nav ul li.sfHover > ul,
  .main-navigation .main-nav ul ul.toggled-on{display:block}
  .main-navigation .main-nav ul ul li a{
    padding:11px 16px 11px 30px; border-bottom:1px solid var(--edge-soft);
  }

  /* superseded in 1.1.1 */
  .main-navigation .main-nav > ul > li.fuse-wa-item > a,
  .main-navigation .main-nav > ul > li.fuse-basket-item > a{
    display:flex; justify-content:center; padding:12px 10px; border-bottom:0;
  }

  /* The bar itself: logo left, hamburger right, menu drops underneath. */
  .site-header .inside-header{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:8px; padding:8px 0;
  }
  .site-logo{flex:0 0 auto; order:1}
  .mobile-menu-control-wrapper,.main-navigation .menu-toggle{order:2}
  .main-navigation{order:3; width:100%; flex:0 0 100%}
}

/* --- footer: icons sit centred in a tighter band --- */
.site-footer .footer-widgets{padding:16px 0}
.site-footer .inside-footer-widgets{
  display:flex; align-items:center; justify-content:center; min-height:0;
}
.site-footer .footer-widget-1,.site-footer .widget{margin:0!important; padding:0!important}
.fuse-socials{justify-content:center; align-items:center; margin:0; padding:0}
.site-info{padding:12px 0 16px}

/* ==========================================================================
   1.1.1 — the last word on the mobile header
   Nothing below uses !important on `display` for the menu list, so the
   parent theme's open/closed state is always the one that wins.
   ========================================================================== */

@media (max-width:768px){

  /* Header row: logo left, hamburger pinned top-right, menu beneath. */
  .site-header .inside-header{
    display:block!important; position:relative; padding:10px 0;
  }
  .site-logo{display:inline-block; margin:0}
  .site-logo img,.header-image{height:46px!important; max-height:46px}

  .main-navigation{width:100%; margin:0; flex:none}
  .main-navigation .inside-navigation{padding:0}
  .main-navigation .menu-toggle{
    position:absolute; top:50%; right:0; transform:translateY(-50%);
    margin:0; padding:10px 4px!important; line-height:1;
  }
  /* The toggle must clear the list once that list is open. */
  .main-navigation.toggled .menu-toggle{top:33px; transform:none}

  /* Closed by default; the parent theme's .toggled class opens it. */
  .main-navigation .main-nav > ul{
    display:none;
    width:100%; background:var(--soot); border-top:1px solid var(--edge-soft);
    margin-top:8px; padding:0;
  }
  .main-navigation.toggled .main-nav > ul{display:block}

  .main-navigation .main-nav > ul > li{
    display:block; width:100%; margin:0!important; float:none;
  }

  /* WhatsApp first, basket underneath, a gap between them. */
  .main-navigation .main-nav > ul > li.fuse-wa-item{
    display:block; width:auto; margin:12px 14px 0!important;
  }
  .main-navigation .main-nav > ul > li.fuse-basket-item{
    display:block; width:auto; margin:10px 14px 14px!important;
  }
  .main-navigation .main-nav > ul > li.fuse-wa-item > a,
  .main-navigation .main-nav > ul > li.fuse-basket-item > a{
    display:flex; justify-content:center; width:100%;
    padding:13px 10px; border-bottom:0;
  }
  .fuse-wa-head .label,a.fuse-basket .label{display:inline!important}
}

/* ==========================================================================
   1.1.2 — the social strip is one tight, centred band
   GeneratePress pads the footer band, the widget column and the paragraph
   that wraps the icons. All three are flattened here so the only height in
   the strip is the icons plus a little air.
   ========================================================================== */

.site-footer .footer-widgets,
#footer-widgets.footer-widgets{padding:12px 0!important}

/* Zero the padding only. These containers are centred by `margin: 0 auto`,
   so clearing their margins would pin the whole band to the left. */
.site-footer .footer-widgets-container,
.site-footer .inside-footer-widgets{padding:0!important}
.site-footer .footer-widgets-container{margin-left:auto!important; margin-right:auto!important}

.site-footer .inside-footer-widgets{
  display:flex; align-items:center; justify-content:center; min-height:0;
}

.site-footer .footer-widget-1,
.site-footer [class*="footer-widget-"]{
  margin:0!important; padding:0!important; width:100%; float:none;
}

.site-footer .widget,
.site-footer aside.widget,
.site-footer .widget.inner-padding{
  margin:0!important; padding:0!important; border:0;
}

/* The block editor wraps shortcode output in a paragraph with its own margin. */
.site-footer .widget p,
.site-footer .widget_block p,
.site-footer .wp-block-group{margin:0!important; padding:0!important; line-height:0}

.fuse-socials{
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin:0!important; padding:0!important; line-height:1;
}
.fuse-socials a{
  width:36px; height:36px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid var(--edge); color:var(--cream-2);
  margin:0; padding:0;
}
.fuse-socials a:hover{border-color:var(--gold); color:var(--gold)}
.fuse-socials svg{width:18px; height:18px; display:block}

/* ==========================================================================
   1.1.4 — basket button balance
   With no items there is no badge, so icon and label centre on their own.
   With items the count sits directly beside the label.
   ========================================================================== */

a.fuse-basket{
  justify-content:center; gap:8px; padding:9px 16px; text-align:center;
}
a.fuse-basket.has-items{padding:9px 12px 9px 14px}
a.fuse-basket .n{margin-left:1px}

/* ==========================================================================
   1.1.5 — basket count contrast
   The badge previously used a dark tint behind dark text, which read as
   invisible on the orange button. Solid dark pill, cream numeral.
   ========================================================================== */

a.fuse-basket.has-items .n{
  background:#2A0E02!important; color:var(--cream)!important;
  min-width:22px; height:22px; padding:0 7px;
  display:inline-grid; place-items:center;
  border-radius:999px; font-size:12.5px; font-weight:700; line-height:1;
}
a.fuse-basket .n{
  background:var(--card-2); color:var(--cream);
  min-width:22px; height:22px; padding:0 7px;
  display:inline-grid; place-items:center;
  border-radius:999px; font-size:12.5px; font-weight:700; line-height:1;
}

/* ==========================================================================
   1.1.7 — sale price marks, and the order-sent confirmation
   WooCommerce wraps the sale price in <ins>, which browsers underline by
   default. That underline on the whitespace before the figure read as a
   stray dash next to the price.
   ========================================================================== */

ins,
.price ins,
.woocommerce-Price-amount,
.woocommerce div.product p.price ins,
ul.products li.product .price ins{
  text-decoration:none!important; background:transparent!important;
}
del,.price del{text-decoration:line-through!important}
.price{text-decoration:none}

/* Give the two figures a clean gap instead of relying on a text space. */
.price del{margin-right:9px}
.price ins{display:inline-block}

.fuse-sent{
  background:var(--card); border:1px solid var(--green); border-radius:var(--r);
  padding:20px; margin:0 0 22px; text-align:center;
}
.fuse-sent h2{font-size:26px; margin:0 0 8px; color:var(--green)}
.fuse-sent p{margin:0 auto; max-width:48ch; color:var(--cream-2); font-size:15px}

/* 1.1.8 — hide the emptied notice entirely on the order-sent view. */
.woocommerce-cart .fuse-sent ~ .cart-empty,
.woocommerce-cart .fuse-sent ~ .woocommerce-info:empty{display:none}

/* ==========================================================================
   1.2.0 — order form, confirmation and contact form
   ========================================================================== */

.fuse-order-box h2{font-size:25px; margin:0 0 6px}
.fuse-order-box .intro{color:var(--cream-2); font-size:14.5px; margin:0 0 18px}

.fuse-pair{display:grid; gap:12px; grid-template-columns:1fr}
@media (min-width:560px){ .fuse-pair{grid-template-columns:1fr 1fr} }

.fuse-field label .req{color:var(--flare)}
.fuse-reach{
  font-size:13px; color:var(--cream-3); margin:4px 0 10px;
  padding-top:12px; border-top:1px solid var(--edge-soft);
}

.fuse-form-error{
  background:color-mix(in srgb, var(--crimson) 18%, var(--card));
  border:1px solid var(--crimson); border-radius:var(--r-s);
  padding:11px 13px; color:var(--cream); font-size:14px; margin:0 0 14px;
}
.fuse-form-error[hidden]{display:none}

#fuse-place,#fc-send{margin-top:4px}
#fuse-place[disabled],#fc-send[disabled]{opacity:.65; cursor:progress}

.fuse-sent{
  background:var(--card); border:1px solid var(--green); border-radius:var(--r);
  padding:22px; margin:0 0 22px; text-align:center;
}
.fuse-sent h2{font-size:26px; margin:0 0 8px; color:var(--green)}
.fuse-sent p{margin:0 auto 14px; max-width:48ch; color:var(--cream-2); font-size:15px}
.fuse-sent strong{color:var(--gold)}
.fuse-sent .button{display:inline-flex; align-items:center; gap:9px}
.fuse-sent-small{font-size:12.5px!important; color:var(--cream-3)!important; margin:12px 0 0!important}

.fuse-contact-box{max-width:620px; margin:0 auto}
.fuse-contact-box .fuse-sent{margin:0}

/* The admin order screen's reply buttons. */
.fuse-admin-contact .button{margin-right:6px}

/* ==========================================================================
   1.2.1 — the "send your order" choice page
   ========================================================================== */

.fuse-choice{
  max-width:680px; margin:0 auto 26px; padding:26px 22px 20px;
}
.fuse-choice-ref{
  display:inline-block; margin:0 0 14px!important;
  padding:6px 14px; border-radius:999px;
  background:color-mix(in srgb, var(--green) 16%, var(--card));
  border:1px solid color-mix(in srgb, var(--green) 55%, transparent);
  font-size:13px!important; letter-spacing:.02em; color:var(--cream)!important;
}
.fuse-choice h2{color:var(--cream)}
.fuse-choice-intro{margin:0 auto 20px!important}

.fuse-choice-grid{
  display:grid; gap:12px; grid-template-columns:1fr;
  text-align:left;
}
@media (min-width:560px){ .fuse-choice-grid{grid-template-columns:1fr 1fr} }

.fuse-choice-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:16px 18px; border-radius:var(--r-s);
  border:1px solid var(--edge); background:var(--card-2);
  color:var(--cream); text-decoration:none!important;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.fuse-choice-card:hover,.fuse-choice-card:focus-visible{
  transform:translateY(-2px); background:var(--card);
}
.fuse-choice-card .ico{
  display:inline-flex; width:30px; height:30px; margin-bottom:8px;
}
.fuse-choice-card .ico svg{width:100%; height:100%}
.fuse-choice-card strong{
  font-family:"Lilita One",sans-serif; font-weight:400; font-size:19px; line-height:1.15;
  color:var(--cream)!important;
}
.fuse-choice-card small{
  font-size:12.5px; color:var(--cream-3); word-break:break-word;
}

.fuse-choice-card.is-wa{
  border-color:color-mix(in srgb, var(--green) 60%, transparent);
  background:color-mix(in srgb, var(--green) 13%, var(--card-2));
}
.fuse-choice-card.is-wa .ico{color:var(--green)}
.fuse-choice-card.is-wa:hover{border-color:var(--green)}

.fuse-choice-card.is-mail{
  border-color:color-mix(in srgb, var(--flare) 55%, transparent);
  background:color-mix(in srgb, var(--flare) 11%, var(--card-2));
}
.fuse-choice-card.is-mail .ico{color:var(--gold)}
.fuse-choice-card.is-mail:hover{border-color:var(--flare)}

/* ==========================================================================
   1.3.0 — hero: reserved space, a real still, a deferred video
   The stage holds its aspect ratio from the first paint, so nothing below it
   moves as the media arrives (this was 0.173 of a 0.182 layout-shift score).
   Both layers are absolutely positioned inside it; earlier rules that sized
   `.fuse-hero-stage video` directly are superseded here.
   ========================================================================== */

.fuse-hero-stage{
  position:relative;
  max-width:1140px; margin:0 auto;
  border-radius:var(--r); overflow:hidden; background:#000;
  border:1px solid var(--edge-soft); box-shadow:0 0 70px rgba(255,122,24,.17);
}

.fuse-hero-stage .fuse-hero-still,
.fuse-hero-stage .fuse-hero-vid{
  position:absolute; inset:0;
  width:100%!important; height:100%!important; max-height:none!important;
  display:block; object-fit:contain; object-position:center;
}

.fuse-hero-stage .fuse-hero-vid{opacity:0; transition:opacity .4s ease}
.fuse-hero-stage .fuse-hero-still{opacity:1; transition:opacity .4s ease}
.fuse-hero-stage.is-playing .fuse-hero-vid{opacity:1}
.fuse-hero-stage.is-playing .fuse-hero-still{opacity:0}

@media (prefers-reduced-motion: reduce){
  .fuse-hero-stage .fuse-hero-vid,
  .fuse-hero-stage .fuse-hero-still{transition:none}
}

/* ==========================================================================
   1.3.2 — footer icons centre on every page, not just the homepage
   `margin:0 !important` (1.1.4) was meant to kill the strip's vertical space,
   but it also zeroed the LEFT and RIGHT margins — and `margin:auto` on a flex
   item is what centres it when its parent is not full width. The homepage
   happened to give the widget full width, so justify-content covered it there;
   every other template left the icons pinned left. Vertical margins are zeroed
   explicitly now, horizontal ones are auto, and the row is centred by both
   routes so it no longer depends on the parent's width.
   ========================================================================== */

.site-footer .widget,
.site-footer aside.widget,
.site-footer .widget.inner-padding{
  margin:0 auto!important;
  width:100%; max-width:100%; float:none;
  text-align:center;
}

.site-footer .widget p,
.site-footer .widget_block p,
.site-footer .wp-block-group{
  margin:0 auto!important;
  text-align:center;
}

.fuse-socials{
  display:flex!important;
  align-items:center; justify-content:center;
  width:fit-content;
  margin-top:0!important; margin-bottom:0!important;
  margin-left:auto!important; margin-right:auto!important;
  padding:0!important;
  line-height:1;
}