/* ==========================================================================
   FIRE EQUIP — complete custom theme for PrestaShop 9 (Classic)
   --------------------------------------------------------------------------
   THIS IS THE WHOLE FILE. Replace the entire contents of
     /themes/classic/assets/css/custom.css
   with this. Do not append - overwrite.

   Contains: base theme + product-card fixes + background fixes.

   TUNE THE BRAND: edit the six colours in the :root block below.
   Everything else derives from them.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* --- palette: grounded in the product, not generic safety colours ------ */
  --fe-hull:    #10171C;   /* marine hull, near-black with a blue-green cast */
  --fe-deck:    #1B2830;   /* raised surface / cards                        */
  --fe-brass:   #C89B4A;   /* the literal colour of the couplings           */
  --fe-patina:  #4E7C6B;   /* bronze oxidation - stock/success only         */
  --fe-chalk:   #E8E6E1;   /* drafting paper - body text on dark            */
  --fe-signal:  #D9401F;   /* urgency only - never decoration               */

  /* derived */
  --fe-dim:     #A8B2B8;
  --fe-rule:    rgba(232,230,225,.14);
  --fe-brass-hi:#E0B863;

  /* type */
  --fe-display: 'Saira Condensed', system-ui, sans-serif;
  --fe-body:    'Inter', system-ui, -apple-system, sans-serif;
  --fe-data:    'JetBrains Mono', ui-monospace, monospace;
}

/* ==========================================================================
   1. FOUNDATION
   ========================================================================== */
body{
  font-family: var(--fe-body);
  background: var(--fe-hull);
  color: var(--fe-chalk);
  -webkit-font-smoothing: antialiased;
}
#wrapper, #main, .page-content, #content-wrapper{ background: transparent; }

h1,h2,h3,h4,h5,
.page-header h1, .h1,.h2,.h3,.h4{
  font-family: var(--fe-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .96;
  color: var(--fe-chalk);
}

a{ color: var(--fe-chalk); }
a:hover{ color: var(--fe-brass); text-decoration: none; }
hr{ border-color: var(--fe-rule); }
:focus-visible{ outline: 2px solid var(--fe-brass); outline-offset: 3px; }

/* ==========================================================================
   2. HEADER
   ========================================================================== */
#header{
  background: var(--fe-hull);
  border-bottom: 1px solid var(--fe-brass);
  box-shadow: none;
}
#header .header-nav{
  background: var(--fe-hull);
  border-bottom: 1px solid var(--fe-rule);
  font-family: var(--fe-data);
  font-size: .72rem;
  letter-spacing: .08em;
}
#header .header-nav a,
#header .header-top a{ color: var(--fe-dim); }
#header .header-nav a:hover,
#header .header-top a:hover{ color: var(--fe-brass); }
#header .header-top{ background: var(--fe-hull); padding: 12px 0; }

/* main menu */
#header .menu > ul > li > a,
#top-menu > li > a{
  font-family: var(--fe-body);
  font-weight: 500;
  font-size: .88rem;
  text-transform: none;
  color: var(--fe-dim);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
#header .menu > ul > li > a:hover,
#top-menu > li > a:hover{
  color: var(--fe-chalk);
  border-bottom-color: var(--fe-brass);
}
#header .top-menu .sub-menu,
.popover, .dropdown-menu{
  background: var(--fe-deck);
  border: 1px solid var(--fe-rule);
  border-radius: 0;
}

/* search */
#search_widget form input[type=text],
.search-widget input[type=text]{
  background: var(--fe-deck);
  border: 1px solid var(--fe-rule);
  border-radius: 0;
  color: var(--fe-chalk);
  font-family: var(--fe-body);
}
#search_widget form input[type=text]::placeholder{ color: var(--fe-dim); }
#search_widget form button, .search-widget button{ color: var(--fe-brass); }

/* cart in header */
#_desktop_cart .cart-products-count,
.blockcart .cart-products-count{
  background: var(--fe-brass);
  color: var(--fe-hull);
  font-family: var(--fe-data);
  font-size: .7rem;
  border-radius: 0;
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn, .btn-primary, .btn-secondary, .btn-tertiary,
button.btn, input[type=submit].btn{
  border-radius: 0;
  font-family: var(--fe-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 12px 22px;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-primary,
#products .btn-primary,
.product-add-to-cart .btn-primary{
  background: var(--fe-brass);
  border: 1px solid var(--fe-brass);
  color: var(--fe-hull);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{
  background: var(--fe-brass-hi);
  border-color: var(--fe-brass-hi);
  color: var(--fe-hull);
}
.btn-secondary, .btn-tertiary{
  background: transparent;
  border: 1px solid var(--fe-rule);
  color: var(--fe-chalk);
}
.btn-secondary:hover, .btn-tertiary:hover{
  border-color: var(--fe-brass);
  color: var(--fe-brass);
  background: transparent;
}

/* ==========================================================================
   4. PRODUCT CARDS
   ========================================================================== */
.product-miniature .thumbnail-container,
.product-miniature .card,
article.product-miniature{
  background: var(--fe-deck);
  border: 1px solid var(--fe-rule);
  border-radius: 0;
  box-shadow: none;
  transition: border-color .18s, transform .18s;
}
.product-miniature .thumbnail-container:hover,
article.product-miniature:hover{
  border-color: rgba(200,155,74,.42);
  transform: translateY(-2px);
  box-shadow: none;
}
.product-miniature .product-title a,
.product-miniature h3 a{
  font-family: var(--fe-display);
  font-weight: 700;
  font-size: 1.12rem;
  text-transform: uppercase;
  color: var(--fe-chalk);
  line-height: 1.05;
}
.product-miniature .product-title a:hover{ color: var(--fe-brass); }

.product-price-and-shipping,
.product-miniature .price,
.product-price{
  font-family: var(--fe-display);
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--fe-chalk);
}
.product-miniature .regular-price{ color: var(--fe-dim); }

/* reference / SKU rendered as data */
.product-reference span,
.product-miniature .product-reference{
  font-family: var(--fe-data);
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--fe-dim);
}

/* flags: on-sale, new, etc. squared off, brass outline */
.product-flags li.product-flag{
  background: transparent;
  border: 1px solid var(--fe-brass);
  color: var(--fe-brass);
  border-radius: 0;
  font-family: var(--fe-data);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
}

/* ==========================================================================
   5. PRODUCT PAGE
   ========================================================================== */
#product .product-container,
#product #content{ background: transparent; }
.product-information,
#product .tabs,
.product-tabs{
  background: var(--fe-deck);
  border: 1px solid var(--fe-rule);
  border-radius: 0;
}
.product-description, .product-information p{ color: var(--fe-dim); }
.product-description strong,
.product-information strong{ color: var(--fe-chalk); }

/* the availability line is the whole pitch - make it read like an instrument */
#product-availability,
.product-availability{
  font-family: var(--fe-data);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--fe-patina);
}
#product-availability .product-available{ color: var(--fe-patina); }
#product-availability .product-last-items,
#product-availability .product-unavailable{ color: var(--fe-signal); }

/* spec / data sheet tables */
.product-features .data-sheet,
table.table-product-discounts,
.table{
  color: var(--fe-chalk);
  font-family: var(--fe-data);
  font-size: .8rem;
}
.product-features .data-sheet dt{ background: transparent; color: var(--fe-dim); font-weight:400; }
.product-features .data-sheet dd{ background: transparent; color: var(--fe-chalk); }
.table thead th{
  background: var(--fe-hull);
  color: var(--fe-brass);
  border-color: var(--fe-rule);
  font-family: var(--fe-display);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.table td, .table th{ border-color: var(--fe-rule); }

/* quantity stepper */
.product-quantity input.input-group,
#quantity_wanted,
.bootstrap-touchspin input{
  background: var(--fe-hull);
  border: 1px solid var(--fe-rule);
  color: var(--fe-chalk);
  font-family: var(--fe-data);
  border-radius: 0;
}

/* ==========================================================================
   6. CATEGORY / LISTING PAGES
   ========================================================================== */
#category #left-column, #left-column, #search_filters{
  background: transparent;
}
#search_filters, .block-categories, .facet{
  background: var(--fe-deck);
  border: 1px solid var(--fe-rule);
  border-radius: 0;
}
#search_filters .facet-title,
.block-categories .h6,
#search_filters h4{
  font-family: var(--fe-display);
  text-transform: uppercase;
  color: var(--fe-brass);
  letter-spacing: .05em;
}
#js-product-list-top, .products-selection{
  background: var(--fe-deck);
  border: 1px solid var(--fe-rule);
  border-radius: 0;
  font-family: var(--fe-data);
  font-size: .78rem;
}
.page-header{ border-bottom: 2px solid var(--fe-chalk); padding-bottom: 12px; }
.breadcrumb, .breadcrumb a, .breadcrumb li::after{
  font-family: var(--fe-data);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--fe-dim);
  background: transparent;
}
.breadcrumb a:hover{ color: var(--fe-brass); }
.pagination .current a,
.pagination a:hover{ color: var(--fe-brass); }

/* ==========================================================================
   7. CART & CHECKOUT
   ========================================================================== */
.cart-grid-body .card,
.cart-grid-right .card,
#checkout .card,
.card{
  background: var(--fe-deck);
  border: 1px solid var(--fe-rule);
  border-radius: 0;
  box-shadow: none;
  color: var(--fe-chalk);
}
.card-block, .card-body{ background: transparent; }
.cart-summary-line .value,
.cart-total .value{ font-family: var(--fe-data); color: var(--fe-chalk); }
.cart-total{ border-top: 1px solid var(--fe-rule); }
.cart-summary-line.cart-total .label,
.cart-summary-line.cart-total .value{
  font-family: var(--fe-display);
  font-size: 1.2rem;
  color: var(--fe-brass);
}
#checkout .step-title, .checkout-step .step-title{
  font-family: var(--fe-display);
  text-transform: uppercase;
  color: var(--fe-chalk);
}
.form-control, input.form-control, select.form-control, textarea.form-control{
  background: var(--fe-hull);
  border: 1px solid var(--fe-rule);
  border-radius: 0;
  color: var(--fe-chalk);
  font-family: var(--fe-body);
}
.form-control:focus{ border-color: var(--fe-brass); box-shadow: none; }
.form-control-label, label{
  font-family: var(--fe-data);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fe-dim);
}

/* ==========================================================================
   8. ALERTS
   ========================================================================== */
.alert{ border-radius: 0; border-width: 1px; font-family: var(--fe-body); }
.alert-success{ background: rgba(78,124,107,.12); border-color: var(--fe-patina); color: var(--fe-chalk); }
.alert-danger { background: rgba(217,64,31,.12);  border-color: var(--fe-signal); color: var(--fe-chalk); }
.alert-warning{ background: rgba(200,155,74,.12); border-color: var(--fe-brass);  color: var(--fe-chalk); }
.alert-info   { background: rgba(168,178,184,.10);border-color: var(--fe-rule);   color: var(--fe-chalk); }

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
#footer{
  background: var(--fe-hull);
  border-top: 1px solid var(--fe-rule);
  color: var(--fe-dim);
  padding-top: 40px;
}
#footer .h3, #footer h3, .block_newsletter h3, .links .h3{
  font-family: var(--fe-display);
  text-transform: uppercase;
  color: var(--fe-brass);
  font-size: 1rem;
  letter-spacing: .06em;
}
#footer a{ color: var(--fe-dim); font-size: .85rem; }
#footer a:hover{ color: var(--fe-chalk); }
.footer-container{ background: transparent; box-shadow: none; }
#footer .block-contact,
#footer .links{ border: none; }
.block_newsletter form input[type=email]{
  background: var(--fe-deck);
  border: 1px solid var(--fe-rule);
  border-radius: 0;
  color: var(--fe-chalk);
}

/* ==========================================================================
   10. UTILITY CLASSES — use these in CMS pages and custom HTML blocks
   ========================================================================== */
.fe-eyebrow{
  font-family: var(--fe-data);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fe-brass);
  display: block;
  margin-bottom: 12px;
}
.fe-data{ font-family: var(--fe-data); font-size: .75rem; letter-spacing: .05em; }
.fe-stock{ font-family: var(--fe-data); font-size: .72rem; color: var(--fe-patina); letter-spacing:.06em; }
.fe-urgent{ color: var(--fe-signal); }

.fe-strip{
  background: var(--fe-deck);
  border-top: 1px solid var(--fe-rule);
  border-bottom: 1px solid var(--fe-rule);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 0 32px;
}
@media (min-width: 800px){ .fe-strip{ grid-template-columns: repeat(4, 1fr); } }
.fe-strip > div{
  padding: 20px 16px;
  border-right: 1px solid var(--fe-rule);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fe-strip > div:last-child{ border-right: none; }
.fe-strip .v{
  font-family: var(--fe-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fe-brass);
  line-height: 1;
}
.fe-strip .k{
  font-family: var(--fe-data);
  font-size: .63rem;
  letter-spacing: .1em;
  color: var(--fe-dim);
  text-transform: uppercase;
}

/* ==========================================================================
   11. HOUSEKEEPING — squares off Bootstrap's rounded defaults site-wide
   ========================================================================== */
.card, .btn, .form-control, .alert, .dropdown-menu, .modal-content,
.custom-checkbox input[type=checkbox] + span, .thumbnail-container,
img.img-fluid, .product-cover img{ border-radius: 0 !important; }

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


/* ==========================================================================
   SECTION 2 — PRODUCT CARDS (PrestaShop 9 Classic markup)
   ========================================================================== */

/* --- product card shell ------------------------------------------------- */
.product-miniature,
.product-miniature .thumbnail-container,
.product-miniature .card,
.product-miniature .product-description,
.js-product-miniature,
.js-product-miniature .thumbnail-container,
#products .product-miniature,
.featured-products .product-miniature,
.product-accessories .product-miniature{
  background: var(--fe-deck) !important;
  border-color: var(--fe-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.product-miniature .thumbnail-container{
  border: 1px solid var(--fe-rule) !important;
  overflow: hidden;
}
.product-miniature .thumbnail-container:hover{
  border-color: rgba(200,155,74,.45) !important;
}

/* the description block sits below the image - it was staying white */
.product-miniature .product-description,
.product-miniature .thumbnail-container .product-description{
  background: var(--fe-deck) !important;
  border-top: 1px solid var(--fe-rule) !important;
  padding: 14px 14px 16px !important;
}

/* --- product title ------------------------------------------------------ */
.product-miniature .product-title,
.product-miniature .product-title a,
.product-miniature h2 a,
.product-miniature h3 a,
.product-miniature .h3 a,
.js-product-miniature .product-title a{
  font-family: var(--fe-display) !important;
  font-weight: 700 !important;
  font-size: 1.08rem !important;
  line-height: 1.08 !important;
  text-transform: uppercase !important;
  color: var(--fe-chalk) !important;
  text-align: left !important;
  opacity: 1 !important;
}
.product-miniature .product-title a:hover{ color: var(--fe-brass) !important; }

/* --- price -------------------------------------------------------------- */
.product-miniature .product-price-and-shipping,
.product-miniature .product-price-and-shipping .price,
.product-miniature .price,
.product-price-and-shipping span.price{
  font-family: var(--fe-display) !important;
  font-weight: 700 !important;
  font-size: 1.35rem !important;
  color: var(--fe-chalk) !important;
  text-align: left !important;
}
.product-miniature .regular-price{
  color: var(--fe-dim) !important;
  font-size: .9rem !important;
}

/* --- image area --------------------------------------------------------- */
/* PS puts a white placeholder behind missing images - tone it down */
.product-miniature .thumbnail-container .thumbnail,
.product-miniature .product-thumbnail,
.product-miniature .product-thumbnail img,
.product-miniature img.img-fluid{
  background: var(--fe-hull) !important;
  border-radius: 0 !important;
}
.product-miniature .product-thumbnail{
  display: block;
  border-bottom: 1px solid var(--fe-rule) !important;
}

/* --- flags (NEW / SALE) ------------------------------------------------- */
.product-flags li.product-flag,
.product-flags .product-flag{
  background: transparent !important;
  border: 1px solid var(--fe-brass) !important;
  color: var(--fe-brass) !important;
  border-radius: 0 !important;
  font-family: var(--fe-data) !important;
  font-size: .58rem !important;
  font-weight: 500 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  box-shadow: none !important;
}

/* wishlist heart - square it and tone it */
.product-miniature .wishlist-button-add,
.wishlist-button-add{
  background: var(--fe-hull) !important;
  border: 1px solid var(--fe-rule) !important;
  border-radius: 0 !important;
  color: var(--fe-dim) !important;
}
.product-miniature .wishlist-button-add:hover{ color: var(--fe-brass) !important; }

/* --- section headings on the homepage ---------------------------------- */
.featured-products .h2,
.featured-products h2,
#products .h2,
.products-section-title,
section.featured-products .products-section-title{
  font-family: var(--fe-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--fe-chalk) !important;
  letter-spacing: .03em !important;
  border-bottom: 2px solid var(--fe-rule);
  padding-bottom: 12px;
  margin-bottom: 26px;
  text-align: left !important;
}

/* "All products" link under a product section */
.featured-products .all-product-link,
.all-product-link{
  font-family: var(--fe-data) !important;
  font-size: .75rem !important;
  letter-spacing: .08em !important;
  color: var(--fe-brass) !important;
  text-transform: uppercase !important;
}

/* --- header logo sizing ------------------------------------------------- */
#header .header-top .logo,
#_desktop_logo img,
#header .logo,
header .logo img{
  max-width: 260px !important;
  width: 100% !important;
  height: auto !important;
}

/* --- search bar --------------------------------------------------------- */
#search_widget, .search-widget{ max-width: 420px; }
#search_widget form input[type=text],
.search-widget input[type=text],
input[name="s"]{
  background: var(--fe-deck) !important;
  border: 1px solid var(--fe-rule) !important;
  color: var(--fe-chalk) !important;
  border-radius: 0 !important;
  padding: 10px 12px !important;
}

/* --- kill leftover white panels ---------------------------------------- */
#wrapper, #main, #content, #content-wrapper,
.page-home, #index #wrapper, .container, .card-block{
  background: transparent !important;
}
#index #content-wrapper > section,
.page-home > section{ background: transparent !important; }


/* ==========================================================================
   SECTION 3 — BACKGROUND OVERRIDES
   Blanks every background inside a product card, then paints the card.
   Must stay last in the file.
   ========================================================================== */

/* 1. blank every background inside a product card, whatever it's called.
      Images, SVGs and the NEW/SALE flags are excluded so they keep theirs. */
.product-miniature *:not(img):not(svg):not(picture):not(.product-flag),
.js-product-miniature *:not(img):not(svg):not(picture):not(.product-flag),
.product-miniature,
.js-product-miniature{
  background-color: transparent !important;
  background-image: none !important;
}

/* 2. now paint the card shell itself */
.product-miniature,
.js-product-miniature,
.product-miniature > .thumbnail-container,
.js-product-miniature > .thumbnail-container{
  background-color: var(--fe-deck) !important;
  border: 1px solid var(--fe-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}
.product-miniature:hover,
.js-product-miniature:hover{ border-color: rgba(200,155,74,.45) !important; }

/* 3. text sits on deck now, so give it proper contrast */
.product-miniature .product-title a,
.product-miniature h2 a, .product-miniature h3 a, .product-miniature .h3 a{
  color: var(--fe-chalk) !important;
  opacity: 1 !important;
}
.product-miniature .product-title a:hover{ color: var(--fe-brass) !important; }
.product-miniature .product-price-and-shipping,
.product-miniature .price,
.product-miniature .product-price-and-shipping .price{
  color: var(--fe-brass) !important;
}

/* 4. tidy the description block */
.product-miniature .product-description{
  padding: 13px 14px 15px !important;
  border-top: 1px solid var(--fe-rule) !important;
  text-align: left !important;
}
.product-miniature .product-title{ margin-bottom: 6px !important; }

/* 5. the image cell - dark behind any transparent or letterboxed image */
.product-miniature .thumbnail-top,
.product-miniature .product-thumbnail,
.product-miniature a.thumbnail{
  background-color: var(--fe-hull) !important;
  display: block;
}
.product-miniature .product-thumbnail img,
.product-miniature img.img-fluid{
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: normal;
}

/* 6. wishlist heart - it was a white circle */
.product-miniature .wishlist-button-add,
.wishlist-button-add,
.product-miniature .wishlist-button-add i{
  background-color: var(--fe-hull) !important;
  border: 1px solid var(--fe-rule) !important;
  border-radius: 0 !important;
  color: var(--fe-dim) !important;
  box-shadow: none !important;
}
.product-miniature .wishlist-button-add:hover{
  border-color: var(--fe-brass) !important;
  color: var(--fe-brass) !important;
}

/* 7. section heading - it was centred */
.featured-products .products-section-title,
.products-section-title,
#index .featured-products h2{
  text-align: left !important;
  border-bottom: 2px solid var(--fe-rule);
  padding-bottom: 12px;
  margin-bottom: 26px;
}

/* 8. header search - the magnifier and X were stacking oddly */
#search_widget, .search-widget{ position: relative; max-width: 420px; }
#search_widget form, .search-widget form{
  display: flex; align-items: center; gap: 8px;
}
#search_widget i.material-icons,
.search-widget i.material-icons{
  position: static !important;
  color: var(--fe-brass) !important;
}
#search_widget form input[type=text],
.search-widget input[type=text]{ flex: 1; }


/* ==========================================================================
   SECTION 4 — WHITE CONTAINER OVERRIDES
   ========================================================================== */

/* ---------- every white container in PS9 Classic ------------------------ */
.card, .card-body, .card-block, .card-header, .card-footer,
.js-product, .js-product-miniature, .product-miniature,
.thumbnail-container, .thumbnail-top, .product-description,
.products article, .products .product,
.block_newsletter, .newsletter, .block_newsletter .card,
#custom-text, .custom-text, #htmlcontent-home, .htmlcontent-home,
.page-content, .page-footer, .block-category,
.featured-products, .new-products, .products-section,
#products, #js-product-list, .product-list,
.quickview, .modal-content{
  background-color: var(--fe-deck) !important;
  border-color: var(--fe-rule) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* sections that should stay transparent, not deck */
.featured-products, .new-products, .products-section,
#products, #js-product-list{
  background-color: transparent !important;
  border: none !important;
}

/* ---------- product cards, nuclear option ------------------------------ */
.product-miniature *:not(img):not(svg):not(picture):not(.product-flag):not(.product-flags),
.js-product-miniature *:not(img):not(svg):not(picture):not(.product-flag):not(.product-flags),
.js-product *:not(img):not(svg):not(picture):not(.product-flag):not(.product-flags){
  background-color: transparent !important;
  background-image: none !important;
}
.product-miniature, .js-product-miniature{
  background-color: var(--fe-deck) !important;
  border: 1px solid var(--fe-rule) !important;
}

/* text contrast on the now-dark cards */
.product-miniature a, .product-miniature .product-title a,
.product-miniature h2, .product-miniature h3, .product-miniature .h3,
.product-miniature .product-title{
  color: var(--fe-chalk) !important;
}
.product-miniature .product-price-and-shipping,
.product-miniature .price, .product-miniature .product-price{
  color: var(--fe-brass) !important;
}
.product-miniature .product-title a:hover{ color: var(--fe-brass) !important; }

/* ---------- newsletter block ------------------------------------------- */
.block_newsletter, .block_newsletter *:not(input):not(button){
  background-color: transparent !important;
  color: var(--fe-dim) !important;
}
.block_newsletter{
  background-color: var(--fe-deck) !important;
  border: 1px solid var(--fe-rule) !important;
  padding: 20px !important;
}
.block_newsletter p, .block_newsletter h3, .block_newsletter .h3{
  color: var(--fe-chalk) !important;
}
.block_newsletter input[type=email]{
  background-color: var(--fe-hull) !important;
  border: 1px solid var(--fe-rule) !important;
  color: var(--fe-chalk) !important;
  border-radius: 0 !important;
}
.block_newsletter button, .block_newsletter input[type=submit]{
  background-color: var(--fe-brass) !important;
  color: var(--fe-hull) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--fe-display) !important;
  text-transform: uppercase !important;
}

/* ---------- footer link columns ---------------------------------------- */
#footer .links .h3, #footer .h3, .footer-container .h3{
  color: var(--fe-brass) !important;
}
#footer a, .footer-container a{ color: var(--fe-dim) !important; }
#footer a:hover{ color: var(--fe-chalk) !important; }
#footer, .footer-container{
  background-color: var(--fe-hull) !important;
  border-top: 1px solid var(--fe-rule) !important;
}

/* ---------- hide leftover demo banners --------------------------------- */
/* the "20% off on clothes" strip - belt and braces, also disable the module */
#custom-text img, .custom-text img,
[id*="banner"] img[src*="sale"],
.block-banner img{
  display: none !important;
}


/* ==========================================================================
   SECTION 5 — HOMEPAGE BLOCK
   Styles for the Custom text block markup. Must stay last.
   ========================================================================== */


/* ==========================================================================
   FIRE EQUIP — HOMEPAGE BLOCK STYLES
   --------------------------------------------------------------------------
   APPEND to the very bottom of custom.css.
   The matching HTML goes in the Custom text block module.
   These live here because the WYSIWYG editor strips <style> tags on save.
   ========================================================================== */

/* fonts already imported at the top of this file */

.fe-block{
  --hull:#10171C; --deck:#1B2830; --brass:#C89B4A; --brass-hi:#E0B863;
  --patina:#4E7C6B; --chalk:#E8E6E1; --dim:#A8B2B8;
  --rule:rgba(232,230,225,.14);
  --display:'Saira Condensed',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --data:'JetBrains Mono',ui-monospace,monospace;

  background:#10171C !important;
  color:#E8E6E1 !important;
  font-family:var(--body) !important;
  line-height:1.55 !important;
  display:block !important;
  margin:0 -15px !important;
  padding:52px 20px 0 !important;
  position:relative !important;
  overflow:hidden !important;
}
.fe-block *{ box-sizing:border-box !important; }

.fe-block .fe-in{
  max-width:780px !important; margin:0 auto !important; text-align:center !important;
  position:relative !important; z-index:2 !important;
}
.fe-block .fe-eyebrow{
  font-family:var(--data) !important; font-size:.7rem !important;
  letter-spacing:.18em !important; text-transform:uppercase !important;
  color:#C89B4A !important; display:block !important; margin-bottom:14px !important;
}
.fe-block h1{
  font-family:var(--display) !important; font-weight:700 !important;
  text-transform:uppercase !important; font-size:clamp(2.2rem,5.6vw,3.8rem) !important;
  line-height:.94 !important; margin:0 0 20px !important; color:#E8E6E1 !important;
  letter-spacing:.01em !important;
}
.fe-block h1 .amp{ color:#C89B4A !important; }
.fe-block p.lede{
  font-size:1.05rem !important; color:#A8B2B8 !important; max-width:56ch !important;
  margin:0 auto 12px !important;
}
.fe-block p.lede strong{ color:#E8E6E1 !important; font-weight:600 !important; }
.fe-block .fe-ctas{
  display:flex !important; gap:12px !important; flex-wrap:wrap !important;
  justify-content:center !important; margin-top:26px !important;
}
.fe-block .btn-fe{
  padding:13px 24px !important; font-family:var(--display) !important;
  font-weight:600 !important; font-size:1rem !important; letter-spacing:.05em !important;
  text-transform:uppercase !important; text-decoration:none !important;
  display:inline-block !important; border-radius:0 !important; transition:all .15s !important;
}
.fe-block .btn-brass{ background:#C89B4A !important; color:#10171C !important; border:1px solid #C89B4A !important; }
.fe-block .btn-brass:hover{ background:#E0B863 !important; border-color:#E0B863 !important; color:#10171C !important; }
.fe-block .btn-line{ background:transparent !important; color:#E8E6E1 !important; border:1px solid rgba(232,230,225,.28) !important; }
.fe-block .btn-line:hover{ border-color:#E8E6E1 !important; color:#E8E6E1 !important; }

/* three-division panel */
.fe-block .fe-div{
  border:1px solid rgba(232,230,225,.14) !important; margin-top:44px !important;
  background:#161f26 !important;
}
.fe-block .fe-div-hd{
  display:flex !important; justify-content:space-between !important; align-items:center !important;
  gap:10px !important; padding:11px 16px !important;
  border-bottom:1px solid rgba(232,230,225,.14) !important;
}
.fe-block .fe-div-hd .t{ font-family:var(--data) !important; font-size:.65rem !important; letter-spacing:.13em !important; color:#C89B4A !important; }
.fe-block .fe-div-hd .r{ font-family:var(--data) !important; font-size:.61rem !important; color:#A8B2B8 !important; }
.fe-block .fe-div-body{ display:grid !important; grid-template-columns:1fr !important; }
@media(min-width:720px){ .fe-block .fe-div-body{ grid-template-columns:repeat(3,1fr) !important; } }
.fe-block .fe-cell{
  padding:22px 16px 20px !important; text-align:center !important; text-decoration:none !important;
  display:block !important; border-bottom:1px solid rgba(232,230,225,.14) !important;
  transition:background .2s !important;
}
.fe-block .fe-cell:last-child{ border-bottom:none !important; }
@media(min-width:720px){
  .fe-block .fe-cell{ border-bottom:none !important; border-right:1px solid rgba(232,230,225,.14) !important; }
  .fe-block .fe-cell:last-child{ border-right:none !important; }
}
.fe-block .fe-cell:hover{ background:rgba(200,155,74,.05) !important; }
.fe-block .fe-cell .seq{
  font-family:var(--data) !important; font-size:.6rem !important; letter-spacing:.18em !important;
  color:#C89B4A !important; display:block !important; margin-bottom:14px !important;
}
.fe-block .fe-cell img{
  display:block !important; margin:0 auto !important; width:100% !important;
  max-width:140px !important; height:auto !important; background:transparent !important;
  border:none !important; box-shadow:none !important;
}
.fe-block .fe-cell .ttl{
  font-family:var(--display) !important; font-weight:700 !important; text-transform:uppercase !important;
  font-size:1.18rem !important; margin:12px 0 0 !important; letter-spacing:.04em !important;
  color:#E8E6E1 !important;
}
.fe-block .fe-cell .note{ font-family:var(--data) !important; font-size:.62rem !important; color:#A8B2B8 !important; margin-top:6px !important; letter-spacing:.04em !important; }
.fe-block .fe-cell .stk{ font-family:var(--data) !important; font-size:.62rem !important; color:#4E7C6B !important; margin-top:10px !important; letter-spacing:.06em !important; }
.fe-block .fe-cell .stk.build{ color:#C89B4A !important; }
.fe-block .fe-div-ft{
  padding:11px 16px !important; border-top:1px solid rgba(232,230,225,.14) !important;
  font-family:var(--data) !important; font-size:.61rem !important; color:#A8B2B8 !important;
  letter-spacing:.05em !important; text-align:center !important;
}

/* spec strip */
.fe-block .fe-strip{
  background:#1B2830 !important; border-top:1px solid rgba(232,230,225,.14) !important;
  border-bottom:1px solid rgba(232,230,225,.14) !important;
  display:grid !important; grid-template-columns:repeat(2,1fr) !important;
  margin:44px -20px 0 !important;
}
@media(min-width:800px){ .fe-block .fe-strip{ grid-template-columns:repeat(4,1fr) !important; } }
.fe-block .fe-strip > div{
  padding:20px 16px !important; border-right:1px solid rgba(232,230,225,.14) !important;
  display:flex !important; flex-direction:column !important; gap:3px !important;
}
.fe-block .fe-strip > div:last-child{ border-right:none !important; }
.fe-block .fe-strip .v{ font-family:var(--display) !important; font-size:1.5rem !important; font-weight:700 !important; color:#C89B4A !important; line-height:1 !important; }
.fe-block .fe-strip .k{ font-family:var(--data) !important; font-size:.63rem !important; letter-spacing:.1em !important; color:#A8B2B8 !important; text-transform:uppercase !important; }

/* --- cell children are spans now (the editor splits <a> if it finds block
       elements inside). Force them to lay out as blocks. ------------------ */
.fe-block .fe-cell .seq,
.fe-block .fe-cell .ttl,
.fe-block .fe-cell .note,
.fe-block .fe-cell .stk{
  display:block !important;
  width:100% !important;
}
.fe-block .fe-cell .ttl{
  font-family:var(--display) !important; font-weight:700 !important;
  text-transform:uppercase !important; font-size:1.18rem !important;
  margin:12px 0 0 !important; letter-spacing:.04em !important;
  color:#E8E6E1 !important; line-height:1.05 !important;
}
.fe-block .fe-cell:hover .ttl{ color:#C89B4A !important; }

/* ==========================================================================
   SECTION 6 — MODULE WRAPPER
   The Custom text block sits inside a white container. Blank it so the
   block can bleed full width.
   ========================================================================== */
#custom-text, .custom-text,
#custom-text .container, .custom-text .container,
#custom-text > div, .custom-text > div,
.block_customtext, #block_customtext,
section#custom-text{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  max-width:none !important;
}

/* the block itself must win over anything above */
div.fe-block{
  background:#10171C !important;
  background-color:#10171C !important;
  color:#E8E6E1 !important;
  display:block !important;
  padding:52px 20px 0 !important;
  margin:0 !important;
  width:100% !important;
  max-width:none !important;
}

/* belt and braces: spans inside cells lay out as blocks */
div.fe-block a.fe-cell > span{
  display:block !important;
  width:100% !important;
  text-align:center !important;
}
div.fe-block a.fe-cell > img{
  display:block !important;
  margin:0 auto !important;
  max-width:140px !important;
  width:100% !important;
  height:auto !important;
}

/* ==========================================================================
   SECTION 7 — HEADER SEARCH POSITION & FOOTER COPYRIGHT
   ========================================================================== */

/* --- push the search widget to the right of the header ------------------ */
#header .header-top > .container > .row,
#header .header-top .row{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
}
#header .header-top #_desktop_logo,
#header .header-top .header-logo{
  flex:0 0 auto !important;
  margin-right:auto !important;   /* everything after it gets pushed right */
}
#header .header-top #search_widget,
#header .header-top .search-widget,
#_desktop_search_filters_wrapper{
  flex:0 1 360px !important;
  margin-left:auto !important;
  max-width:360px !important;
}
#search_widget form,
.search-widget form{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
}
#search_widget form input[type=text],
.search-widget form input[type=text]{
  flex:1 1 auto !important;
  min-width:0 !important;
}
/* the stray magnifier and X were stacking under the field */
#search_widget i, .search-widget i,
#search_widget .material-icons, .search-widget .material-icons{
  position:static !important;
  order:-1 !important;
  color:#C89B4A !important;
}
#search_widget .clear, .search-widget .clear{ display:none !important; }

/* --- hide the PrestaShop copyright line --------------------------------- */
#footer .footer-container > .container > .row:last-child,
#footer p.text-sm-center,
.footer-container p.text-sm-center,
#footer .copyright,
#footer a[href*="prestashop.com"],
#footer p:has(a[href*="prestashop"]){
  display:none !important;
}