:root{
  /* from your logo */
  --gl-accent:      #134474;  /* primary blue */
  --gl-accent-600:  #001e48;  /* hover/active (darker) */
  --gl-accent-300:  #406699;  /* lighter tint if needed */
  --gl-neutral:     #a3abbd;  /* logo grey */
  --gl-on-accent:   #e3f1ef;  /* text/icons on blue */
  --gl-yellow-accent: #daa21c;  /* highlight accent (yellow) */
  --gl-brown-accent: #90441b;  /* secondary accent (brown) */
  --gl-green-accent: #006c66; /* tertiary accent (green) */
  --gl-container-max: 1600px;
  --gl-gutter: 20px;
  --gl-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}


/* Product flags/badges (e.g., “New”, “On sale”) */
.product-flags .new,
.product-flags .on-sale,
.product-flag.new,
.product-flag.on-sale,
.product-flag.discount {
  background: var(--gl-accent) !important;
  border-color: var(--gl-accent) !important;
  color: var(--gl-on-accent) !important;
}

.product-flags .out_of_stock,
.product-flag.out_of_stock {
  background: var(--gl-brown-accent) !important;
  border-color: var(--gl-brown-accent) !important;
  color: var(--gl-on-accent) !important;
}

/* Primary buttons */
.btn-primary, button.btn-primary {
  background: var(--gl-accent);
  border-color: var(--gl-accent);
  color: var(--gl-on-accent);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--gl-accent-600);
  border-color: var(--gl-accent-600);
  color: var(--gl-on-accent);
}

/* Outline buttons */
.btn-outline-primary {
  color: var(--gl-accent);
  border-color: var(--gl-accent);
  background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  color: var(--gl-on-accent);
  background: var(--gl-accent);
  border-color: var(--gl-accent);
}

/* Menu hover/active underline + optional hover color */
#top-menu > li > a.dropdown-item::after { background: var(--gl-accent); }
#top-menu > li:hover > a.dropdown-item,
#top-menu > li.current > a.dropdown-item { color: var(--gl-accent); }

/* Dropdown item hover (first level) */
@media (min-width: 992px){
  #top-menu li ul.top-menu[data-depth="1"] > li > a:hover { color: var(--gl-accent); }
}

/* Cart bubble / counters */
.blockcart .cart-products-count {
  background: var(--gl-accent);
  color: var(--gl-on-accent);
}


/* Links (optional global tint) */
/* a { color: var(--gl-accent); }
a:hover { color: var(--gl-accent-600); } */

/* Form focus ring */
.form-control:focus {
  border-color: var(--gl-accent);
  box-shadow: 0 0 0 .2rem rgba(19, 68, 116, .15);
}

/* Top utility bar (keep your layout; just set colors to match brand) */
.header-nav{
  background: #f5f8fb;      /* light blue wash to complement the logo */
  color: #353535;
}
.header-nav a{ color: var(--gl-accent); }
.header-nav a:hover{ color: var(--gl-accent-600); }



/* =========================
   TOP MENU
   ========================= */
#top-menu > li > a.dropdown-item{
  position: relative; padding: .75rem 1rem; font-weight: 500; color: #111827;
}
#top-menu > li > a.dropdown-item::after{
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .45rem;
  height: 2px; background: transparent; transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease-out, background .18s ease-out;
}
#top-menu > li:hover > a.dropdown-item::after,
#top-menu > li.current > a.dropdown-item::after{
  background: #d65927; transform: scaleX(1);
}

/* Wider first-level dropdown on desktop */
@media (min-width: 992px){
  #top-menu > li > .sub-menu{ min-width: 320px; }
}

/* =========================
   CMS WIDTH + PRODUCT GRID (GLOBAL)
   ========================= */
@media (min-width: 1200px){
  body#cms #wrapper .container{ max-width: 1320px; }
}

/* Default category/listing density */
@media (min-width: 768px){
  .products .product-miniature{ flex: 0 0 33.333%; max-width: 33.333%; }
}
@media (min-width: 1200px){
  .products .product-miniature{ flex: 0 0 25%; max-width: 25%; }
}

/* =========================
   VERY TOP BAR (header-nav)
   ========================= */

/* Keep your colours */

.header-nav .material-icons,
.header-nav i{ color: inherit; }

/* Slimmer bar + smaller typography (no centering/layout tweaks) */
.header-nav{ padding: 0; } /* increase to .25rem 0 if you want more height */

@media (min-width: 992px){
  .header-nav{ font-size: .80rem; } /* smaller text on desktop */

  .header-nav a,
  .header-nav .dropdown-item,
  .header-nav .user-info a,
  #_desktop_user_info a,
  #_desktop_cart a,
  #_desktop_currency_selector a,
  #_desktop_language_selector a{
    font-size: .80rem;
    line-height: 1.1;
  }

  .header-nav .material-icons,
  .header-nav i{ font-size: 18px; line-height: 1; }

  /* Cart badge tends to look oversized; normalize slightly */
  .blockcart .cart-products-count{ transform: scale(.9); transform-origin: center; }
}

/* Mobile: keep readable but not huge */
@media (max-width: 991.98px){
  .header-nav{ font-size: .95rem; }
  .header-nav .material-icons,
  .header-nav i{ font-size: 20px; line-height: 1; }
}

/* =========================
   HOME PAGE: make product cards larger
   ========================= */
body#index .products .product-miniature{
  flex: 0 0 50%;
  max-width: 50%;            /* 2 per row by default on home */
}
@media (min-width: 992px){
  body#index .products .product-miniature{
    flex: 0 0 33.333%;
    max-width: 33.333%;      /* 3 per row on desktop */
  }
}
@media (min-width: 1800px){
  body#index .products .product-miniature{
    flex: 0 0 25%;
    max-width: 25%;          /* optional: 4 per row only on ultra-wide */
  }
}

/* Ensure images fill the card width on home */
body#index .thumbnail-container .thumbnail img{
  width: 100%;
  height: auto;
  display: block;
}

/* Slightly larger, clearer titles/prices on home cards */
body#index .product-title a{ font-size: .95rem; font-weight: 600; }
body#index .product-price-and-shipping{ font-size: 1rem; font-weight: 600; }


/* =========================
   HOMEPAGE: FORCE BIGGER PRODUCT CARDS (GRID)
   ========================= */

/* 1) Turn the home product list into a responsive grid */
body#index .products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* 2 per row by default */
  gap: 14px;                                         /* space between cards */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 2) On desktop, show 3 per row (keeps cards comfortably large) */
@media (min-width: 992px) {
  body#index .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 3) DO NOT shrink on ultra-wide; keep 3 per row to avoid tiny cards
   (remove this block if you actually WANT 4 per row on very wide screens) */
@media (min-width: 1400px) {
  body#index .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 4) Neutralise any Bootstrap/grid widths on children (cols, lis, divs, etc.) */
body#index .products > *,
body#index .products > * > * {
  width: 100% !important;
  max-width: none !important;
  flex: initial !important;      /* kills any col- flex-basis that makes items tiny */
}

/* 5) Ensure the actual product miniature fills its grid cell */
body#index .products .product-miniature {
  width: 100% !important;
}

/* 6) Make images fill the card width */
body#index .thumbnail-container .thumbnail img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* 7) Slightly larger, readable title/price on homepage cards */
body#index .product-title a { font-size: .95rem; font-weight: 600; }
body#index .product-price-and-shipping { font-size: 1rem; font-weight: 600; }

/* ==== Rounded product cards (all listings, incl. home) ==== */
.products .product-miniature {
  border-radius: .6rem;         /* adjust: .4rem – 1rem */
  overflow: hidden;             /* clips image corners */
  background: #fff;             /* keeps a clean card surface */
  border: 1px solid #e5e7eb;    /* subtle edge; remove if you don't want a border */
  transition: box-shadow .18s ease;
}
.products .product-miniature:hover {
  box-shadow: 0 12px 24px rgba(0,0,0,.08); /* optional hover depth */
}

/* Ensure inner pieces don’t re-introduce square corners */
.products .product-miniature .thumbnail-container,
.products .product-miniature .product-description {
  border-radius: 0;
  background: inherit;
  border: 0;
}

/* Images fill and respect the rounded clip from the parent */
.products .product-miniature .thumbnail-container .thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0; /* parent overflow handles rounding */
}

/* =========================
   PRODUCT PAGE: rounded “card” look
   ========================= */

/* Gallery/media panel */
body#product .images-container{
  border-radius: .6rem;
  overflow: hidden;                 /* clip image corners */
  background: #fff;
  border: 1px solid #e5e7eb;
  transition: box-shadow .18s ease;
}
body#product .images-container:hover{
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
}

/* Main cover image stays squared inside the rounded wrapper (clipped by overflow) */
body#product .product-cover img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* Thumbnail chips slightly rounded */
body#product .js-qv-product-images li img{
  border-radius: .35rem;
}

/* Right-hand product info panel (title, price, actions) */
body#product .product-information{
  border-radius: .6rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 1rem 1.25rem;
  transition: box-shadow .18s ease;
}
body#product .product-information:hover{
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
}

/* Optional: small gap between the two panels on desktop */
@media (min-width: 992px){
  body#product #main .row{ row-gap: 1rem; }
}

/* PRODUCT PAGE — Block Reassurance (your exact HTML structure) */
body#product .blockreassurance_product {
  display: grid;
  grid-template-columns: 1fr;   /* 1 per row on mobile */
  gap: 12px;
  margin: 1rem 0 0 0;
}

@media (min-width: 576px) {
  body#product .blockreassurance_product {
    grid-template-columns: repeat(2, 1fr);  /* 2 per row (sm+) */
  }
}
@media (min-width: 992px) {
  body#product .blockreassurance_product {
    grid-template-columns: repeat(3, 1fr);  /* 3 per row (lg+) */
  }
}

/* Each reassurance card (your <div> children) */
body#product .blockreassurance_product > div {
  display: flex;
  align-items: center;           /* icon + text aligned */
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .6rem;
  box-shadow: none;
  transition: box-shadow .18s ease, transform .12s ease;
}

/* Hover affordance */
body#product .blockreassurance_product > div:hover {
  box-shadow: 0 12px 24px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

/* Icon wrapper (your <span class="item-product">) */
body#product .blockreassurance_product .item-product{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;                 /* icon box */
  height:28px;
  flex:0 0 28px;
  padding:0;
  margin:0;
  line-height:0;              /* remove inline whitespace effects */
}

/* Override any inline width/height or vendor rules */
body#product .blockreassurance_product .item-product svg,
body#product .blockreassurance_product .item-product svg.svg.replaced-svg,
body#product .blockreassurance_product .item-product svg[width],
body#product .blockreassurance_product .item-product svg[height],
body#product .blockreassurance_product .item-product img {
  width:26px !important;
  height:26px !important;
  max-width:none !important;
  max-height:none !important;
  display:block;
}


/* Remove any margins/padding the module may inject around the icon */
body#product .blockreassurance_product .item-product > *{
  margin:0 !important;
  padding:0 !important;
}


/* If the first item is still off, nuke any special-case rules applied to the first child */
body#product .blockreassurance_product > div:first-child svg{
  width:26px !important;
  height:26px !important;
}

/* Title text */
body#product .blockreassurance_product .block-title {
  margin: 0;
  font-weight: 600;
  font-size: .68rem;
  line-height: 1.2;
  color: #111827 !important;     /* beat inline style="color:#000000" */
}

/* Kill the stray clearfix node */
body#product .blockreassurance_product .clearfix { display: none !important; }


/* Slightly smaller copy in product cards */
.products .product-miniature .product-description {
  font-size: .86rem;     /* adjust .88–.94rem to taste */
  line-height: 1.35;
}

/* (Optional) also reduce on the product page if that class appears there */
body#product .product-description {
  font-size: .88rem;
  line-height: 1.5;
}

/* =========================
   NEW-PRODUCT PAGE: rounded “card” look
   ========================= */

/* Gallery/media panel */
body#new-products .product-images{
  border-radius: .6rem;
  overflow: hidden;                 /* clip image corners */
  background: #fff;
  border: 1px solid #e5e7eb;
  transition: box-shadow .18s ease;
}
body#new-products .product-images:hover{
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
}

/* Main cover image stays squared inside the rounded wrapper (clipped by overflow) */
body#new-products .product-thumbnail img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}


/* Optional: small gap between the two panels on desktop */
@media (min-width: 992px){
  body#new-products #main .row{ row-gap: 1rem; }
}

/* NEW-PRODUCT PAGE — Product details: make values distinct */

/* Base: smaller, muted labels */
body#new-products .product-miniature .label,
body#new-products .product-miniature .data-sheet dt.name {
  font-size: .85rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #3f4042; /* muted */
  margin: 0 .25rem 0 0;
}

/* Values: clearer, slightly larger; align numbers nicely */
body#new-products .product-miniature .product-reference span,
body#new-products .product-miniature .product-quantities span,
body#new-products .product-miniature .data-sheet dd.value {
  font-size: .75rem;
  line-height: 1.35;
  font-weight: 400;
  color: #111827; /* main text */
  font-variant-numeric: tabular-nums; /* better alignment for EAN/qty */
}

/* Tidy spacing between rows/blocks */
body#new-products .product-miniature .product-reference,
body#new-products .product-miniature .product-quantities {
  margin: .25rem 0;
  display: flex;
  align-items: baseline;
  gap: .25rem;
}

body#new-products .product-miniature .product-features {
  margin-top: .75rem;
}

body#new-products .product-details .data-sheet {
  margin: .25rem 0 0 0;
}

body#new-products .product-details .data-sheet dt.name,
body#new-products .product-details .data-sheet dd.value {
  margin: 0; padding: .25rem 0;
}

/* Align dt/dd pairs in one line on larger screens for cleaner look */
@media (min-width: 576px) {
  body#new-products .product-details .data-sheet {
    display: grid;
    grid-template-columns: 180px 1fr;
    column-gap: 12px;
  }
  body#new-products .product-details .data-sheet dt.name,
  body#new-products .product-details .data-sheet dd.value {
    padding: .35rem 0;
  }
}


/* NEW-PRODUCTS: larger, consistent cards; stop Bootstrap columns forcing 25%/33% widths */
body#new-products .product-list .products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

/* Neutralise Bootstrap column constraints on each product card wrapper */
body#new-products .product-list .products > .js-product {
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
}

/* If the theme adds .row on the products container, flatten it */
body#new-products .product-list .products.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure the miniature fills the grid cell and looks like a card */
body#new-products .product-miniature {
  width: 100% !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  overflow: hidden;
  padding: 10px;
}

/* Images scale cleanly */
body#new-products .thumbnail-container .thumbnail img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Optional: typography parity */
body#new-products .product-title a { font-size: .95rem; font-weight: 500; }
body#new-products .product-price-and-shipping { font-size: 1rem; font-weight: 500; }

/* PRODUCT PAGE — Product details: make values distinct */

/* Base: smaller, muted labels */
body#product .js-product-details .label,
body#product .js-product-details .data-sheet dt.name {
  font-size: .85rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #3f4042; /* muted */
  margin: 0 .25rem 0 0;
}

/* Values: clearer, slightly larger; align numbers nicely */
body#product .js-product-details .product-reference span,
body#product .js-product-details .product-quantities span,
body#product .js-product-details .data-sheet dd.value {
  font-size: .75rem;
  line-height: 1.35;
  font-weight: 400;
  color: #111827; /* main text */
  font-variant-numeric: tabular-nums; /* better alignment for EAN/qty */
}

/* Optional: make EAN/IDs feel like “codes” (enable if you like the look) */
/*
body#product .js-product-details .product-reference span,
body#product .js-product-details .data-sheet dd.value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: .02em;
}
*/

/* Tidy spacing between rows/blocks */
body#product .js-product-details .product-reference,
body#product .js-product-details .product-quantities {
  margin: .25rem 0;
  display: flex;
  align-items: baseline;
  gap: .25rem;
}

body#product .js-product-details .product-features {
  margin-top: .75rem;
}

body#product .js-product-details .data-sheet {
  margin: .25rem 0 0 0;
}

body#product .js-product-details .data-sheet dt.name,
body#product .js-product-details .data-sheet dd.value {
  margin: 0; padding: .25rem 0;
}

/* Align dt/dd pairs in one line on larger screens for cleaner look */
@media (min-width: 576px) {
  body#product .js-product-details .data-sheet {
    display: grid;
    grid-template-columns: 180px 1fr;
    column-gap: 12px;
  }
  body#product .js-product-details .data-sheet dt.name,
  body#product .js-product-details .data-sheet dd.value {
    padding: .35rem 0;
  }
}


/* ==== FORCE ACCENT ON TOP MENU LINKS ==== */
/* Default + hover/active color */
#header #_desktop_top_menu #top-menu > li > a.dropdown-item {
  color: var(--gl-accent) !important;           /* was #111827 from earlier */
}
#header #_desktop_top_menu #top-menu > li:hover > a.dropdown-item,
#header #_desktop_top_menu #top-menu > li.current > a.dropdown-item,
#header #_desktop_top_menu #top-menu > li > a.dropdown-item:focus {
  color: var(--gl-accent-600) !important;
}
/* Underline bar already set; ensure it uses accent too */
#header #_desktop_top_menu #top-menu > li > a.dropdown-item::after {
  background: var(--gl-accent) !important;
}

/* First-level dropdown items on hover */
@media (min-width: 992px){
  #header #_desktop_top_menu #top-menu li ul.top-menu[data-depth="1"] > li > a:hover {
    color: var(--gl-accent) !important;
    background: rgba(19, 68, 116, .06);         /* subtle tint */
  }
}

/* ==== TABS (product page, account pages, etc.) ==== */
.tabs .nav-tabs .nav-link {
  color: var(--gl-accent) !important;
  border-bottom: 2px solid transparent;
}
.tabs .nav-tabs .nav-link:hover,
.tabs .nav-tabs .nav-link:focus {
  color: var(--gl-accent-600) !important;
  border-bottom-color: var(--gl-accent-300);
}
.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link.active:focus {
  color: var(--gl-accent-600) !important;
  border-bottom-color: var(--gl-accent) !important;
}

/* ==== IMAGE / CARD HOVER HIGHLIGHTS ==== */
/* Product grid cards */
.products .product-miniature {
  border: 1px solid #e5e7eb;
  border-radius: .6rem;
  transition: box-shadow .18s ease, border-color .18s ease, transform .12s ease;
}
.products .product-miniature:hover {
  border-color: var(--gl-accent) !important;
  box-shadow: 0 12px 24px rgba(19, 68, 116, .18);
  transform: translateY(-1px);
}
/* Ensure the thumbnail wrapper doesn’t override the border */
.products .product-miniature .thumbnail-container {
  border: 0 !important;
}

/* Quick view / focus states */
.quick-view:hover,
.quick-view:focus {
  color: var(--gl-accent) !important;
}
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(19, 68, 116, .2) !important;
  border-color: var(--gl-accent) !important;
}

/* ==== BADGES (safety net) ==== */
.product-flags .new,
.product-flags .on-sale,
.product-flag.new,
.product-flag.on-sale,
.product-flag.discount {
  background: var(--gl-accent) !important;
  border-color: var(--gl-accent) !important;
  color: var(--gl-on-accent) !important;
}
.product-flags .out_of_stock,
.product-flag.out_of_stock {
  background: var(--gl-brown-accent) !important;
  border-color: var(--gl-brown-accent) !important;
  color: var(--gl-on-accent) !important;
}

/* ==== BUTTONS (ensure Classic variants pick up accent) ==== */
.btn-primary, button.btn-primary {
  background: var(--gl-accent) !important;
  border-color: var(--gl-accent) !important;
  color: var(--gl-on-accent) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--gl-accent-600) !important;
  border-color: var(--gl-accent-600) !important;
}
.btn-outline-primary {
  color: var(--gl-accent) !important;
  border-color: var(--gl-accent) !important;
  background: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  color: var(--gl-on-accent) !important;
  background: var(--gl-accent) !important;
  border-color: var(--gl-accent) !important;
}


/* ---------------------------
FIX: remove weird click/focus border on links
(keep focus styling on real form controls only)
----------------------------*/
a:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
/* Keep an accessible focus only on inputs/buttons */
input:focus, select:focus, textarea:focus, button:focus {
  border-color: var(--gl-accent) !important;
  box-shadow: 0 0 0 .18rem rgba(19, 68, 116, .18) !important;
  outline: none !important;
}

/* ---------------------------
FIX: unify link colors (stop light blue)
----------------------------*/
a, a:visited {
  color: var(--gl-accent) !important;          /* site-wide link color */
}
a:hover, a:active {
  color: var(--gl-accent-600) !important;
}

/* Header (logout/account/etc.) should be white, not link-blue */
.header-nav a,
.header-nav a:visited {
  color: var(--gl-accent) !important;
}
.header-nav a:hover,
.header-nav a:active {
  color: var(--gl-accent-600) !important;
}

/* Top menu default color and hover */
#header #_desktop_top_menu #top-menu > li > a.dropdown-item {
  color: var(--gl-accent) !important;                    /* normal state */
}
#header #_desktop_top_menu #top-menu > li:hover > a.dropdown-item,
#header #_desktop_top_menu #top-menu > li.current > a.dropdown-item {
  color: var(--gl-accent) !important;           /* hover/current */
}
#header #_desktop_top_menu #top-menu > li > a.dropdown-item::after {
  background: var(--gl-accent) !important;
}

/* Dropdown items on hover (first level) */
@media (min-width: 992px){
  #header #_desktop_top_menu #top-menu li ul.top-menu[data-depth="1"] > li > a:hover {
    color: var(--gl-accent) !important;
    background: rgba(19, 68, 116, .06);
  }
}

/* ---------------------------
FIX: price colors showing as light blue
----------------------------*/
.product-prices .current-price .price,
.product-price,
.product-miniature .price,
.product-list .price,
#product .current-price .price {
  color: var(--gl-accent) !important;
}
.product-prices .regular-price,
.product-miniature .regular-price {
  color: #6b7280 !important;          /* muted crossed-out price */
}

/* Safety net: prevent link styles inside price blocks */
.product-prices a,
.product-miniature .product-price-and-shipping a {
  color: inherit !important;
  text-decoration: none !important;
}

/* Button rounding — subtle, consistent */
:root{
  --gl-radius-btn: .5rem; /* adjust: .375rem–.625rem */
}

/* All buttons (covers module buttons too) */
.btn,
button.btn,
a.btn {
  border-radius: var(--gl-radius-btn) !important;
}

/* Keep grouped buttons visually joined (optional) */
.input-group .btn:first-child { border-top-left-radius: var(--gl-radius-btn); border-bottom-left-radius: var(--gl-radius-btn); }
.input-group .btn:last-child  { border-top-right-radius: var(--gl-radius-btn); border-bottom-right-radius: var(--gl-radius-btn); }

/* Compact button sizes shouldn’t look too round */
.btn-sm { border-radius: calc(var(--gl-radius-btn) - .15rem) !important; }
.btn-lg { border-radius: calc(var(--gl-radius-btn) + .1rem)  !important; }

/* Outline variant edges should match */
.btn-outline-primary { border-radius: var(--gl-radius-btn) !important; }

/* Optional: pill style if you ever need it */
.btn-pill { border-radius: 9999px !important; }


/* Thumbnails: make hover/selected border 1px in brand colour */
.product-images > li.thumb-container .thumb,
.js-qv-product-images li .thumb {                     /* base state to avoid layout jump */
  border: 1px solid transparent !important;
  transition: border-color .15s ease;
}

.product-images > li.thumb-container .thumb.selected,
.product-images > li.thumb-container .thumb:hover,
.js-qv-product-images li .thumb.selected,
.js-qv-product-images li .thumb:hover {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--gl-accent, #134474) !important; /* uses your token, falls back to logo blue */
}

/* =========================
   CATEGORY & LISTING PAGES — BIGGER PRODUCT CARDS
   Matches homepage: 2 → 3 per row; no 4-up shrink
   ========================= */

/* Apply to key listing contexts */

body#category  .products,
body#manufacturer .products,
body#supplier .products,
body#search    .products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* 2 per row by default */
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Desktop: 3 per row (keep cards comfortably large) */
@media (min-width: 992px){

  body#category  .products,
  body#manufacturer .products,
  body#supplier .products,
  body#search    .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Ultra-wide: stay at 3 to avoid tiny cards.
   (Change to repeat(4, …) if you WANT 4-up at very large widths.) */
@media (min-width: 1400px){

  body#category  .products,
  body#manufacturer .products,
  body#supplier .products,
  body#search    .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Neutralise Bootstrap/grid widths that force 25% columns */

body#category  .products > *,
body#manufacturer .products > *,
body#supplier .products > *,
body#search    .products > *,
body#category  .products > * > *,
body#manufacturer .products > * > *,
body#supplier .products > * > *,
body#search    .products > * > * {
  width: 100% !important;
  max-width: none !important;
  flex: initial !important;     /* kill col- flex-basis */
}

/* Ensure the actual miniature fills its grid cell */


body#category  .products .product-miniature,
body#manufacturer .products .product-miniature,
body#supplier .products .product-miniature,
body#search    .products .product-miniature {
  width: 100% !important;
}

/* Images fill the card width */

body#category  .thumbnail-container .thumbnail img,
body#manufacturer .thumbnail-container .thumbnail img,
body#supplier .thumbnail-container .thumbnail img,
body#search    .thumbnail-container .thumbnail img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Typography parity with homepage cards */

body#category  .product-title a,
body#manufacturer .product-title a,
body#supplier .product-title a,
body#search    .product-title a {
  font-size: .95rem;
  font-weight: 600;
}
body#new-products  .product-price-and-shipping,
body#category  .product-price-and-shipping,
body#manufacturer .product-price-and-shipping,
body#supplier .product-price-and-shipping,
body#search    .product-price-and-shipping {
  font-size: 1rem;
  font-weight: 600;
}

/* If your theme adds .row gutters on listings, flatten them in these contexts */

body#category  .products.row,
body#manufacturer .products.row,
body#supplier .products.row,
body#search    .products.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* === PATCH: ensure button text is readable (checkout, everywhere) === */

/* Solid buttons */
.btn,
button.btn,
a.btn {
  color: var(--gl-on-accent) !important;   /* e.g., white on blue */
}

/* Primary */
.btn-primary,
button.btn-primary,
a.btn.btn-primary {
  background: var(--gl-accent) !important;
  border-color: var(--gl-accent) !important;
  color: var(--gl-on-accent) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--gl-accent-600) !important;
  border-color: var(--gl-accent-600) !important;
  color: var(--gl-on-accent) !important;
}

/* Outline variant (dark text on white; invert on hover) */
.btn-outline-primary,
a.btn.btn-outline-primary {
  color: var(--gl-accent) !important;
  border-color: var(--gl-accent) !important;
  background: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: var(--gl-on-accent) !important;
  background: var(--gl-accent) !important;
  border-color: var(--gl-accent) !important;
}

/* Checkout safety net (anchors inside checkout blocks) */
.checkout .btn,
.cart-detailed-actions .btn,
.card-block .btn {
  color: var(--gl-on-accent) !important;
}

/* Disabled buttons should still be legible */
.btn:disabled,
.btn.disabled {
  color: var(--gl-on-accent) !important;
  opacity: .65; /* keep Bootstrap's disabled affordance */
}

/* ===========================================
   CHECKOUT / ORDER CONFIRMATION — POPULAR / CROSS-SELL
   Match homepage/category size: 2 → 3 per row
   =========================================== */

/* Common containers used by PrestaShop modules */
body#checkout  .featured-products .products,
body#checkout  .crosssell .products,
body#checkout  .products,

body#order-confirmation .featured-products .products,
body#order-confirmation .crosssell .products,
body#order-confirmation .products,

body#cart .featured-products .products,
body#cart .crosssell .products,
body#cart .products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* 2 per row by default */
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Desktop: 3 per row (keeps cards comfortably large) */
@media (min-width: 992px) {
  body#checkout  .featured-products .products,
  body#checkout  .crosssell .products,
  body#checkout  .products,

  body#order-confirmation .featured-products .products,
  body#order-confirmation .crosssell .products,
  body#order-confirmation .products,

  body#cart .featured-products .products,
  body#cart .crosssell .products,
  body#cart .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Ultra-wide: keep 3 per row (avoid tiny cards) */
@media (min-width: 1400px) {
  body#checkout  .featured-products .products,
  body#checkout  .crosssell .products,
  body#checkout  .products,

  body#order-confirmation .featured-products .products,
  body#order-confirmation .crosssell .products,
  body#order-confirmation .products,

  body#cart .featured-products .products,
  body#cart .crosssell .products,
  body#cart .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Neutralise module/Bootstrap cols that force tiny widths */
body#checkout  .featured-products .products > *,
body#checkout  .crosssell .products > *,
body#checkout  .products > *,
body#order-confirmation .featured-products .products > *,
body#order-confirmation .crosssell .products > *,
body#order-confirmation .products > *,
body#cart .featured-products .products > *,
body#cart .crosssell .products > *,
body#cart .products > *,
/* and one level deeper just in case */
body#checkout  .featured-products .products > * > *,
body#checkout  .crosssell .products > * > *,
body#checkout  .products > * > *,
body#order-confirmation .featured-products .products > * > *,
body#order-confirmation .crosssell .products > * > *,
body#order-confirmation .products > * > *,
body#cart .featured-products .products > * > *,
body#cart .crosssell .products > * > *,
body#cart .products > * > * {
  width: 100% !important;
  max-width: none !important;
  flex: initial !important;
}

/* Ensure miniature fills its grid cell */
body#checkout  .products .product-miniature,
body#order-confirmation .products .product-miniature,
body#cart .products .product-miniature {
  width: 100% !important;
}

/* Image sizing */
body#checkout  .thumbnail-container .thumbnail img,
body#order-confirmation .thumbnail-container .thumbnail img,
body#cart .thumbnail-container .thumbnail img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Typography parity with home/category */
body#checkout  .product-title a,
body#order-confirmation .product-title a,
body#cart .product-title a {
  font-size: .95rem;
  font-weight: 600;
}
body#checkout  .product-price-and-shipping,
body#order-confirmation .product-price-and-shipping,
body#cart .product-price-and-shipping {
  font-size: 1rem;
  font-weight: 600;
}

/* Some themes wrap these in .row; flatten gutters */
body#checkout  .featured-products .products.row,
body#checkout  .crosssell .products.row,
body#order-confirmation .featured-products .products.row,
body#order-confirmation .crosssell .products.row,
body#cart .featured-products .products.row,
body#cart .crosssell .products.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* =========================
   PATCH: Add-to-cart modal, secondary button contrast
   ========================= */
.modal .btn-secondary,
.quickview .btn-secondary {
  background: #e5e7eb !important;   /* light grey */
  border-color: #e5e7eb !important;
  color: #111827 !important;         /* dark text for contrast */
}
.modal .btn-secondary:hover,
.quickview .btn-secondary:hover {
  background: #d1d5db !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

/* =========================
   PATCH: Quantity +/- buttons (make icons legible on light bg)
   ========================= */
.bootstrap-touchspin .btn-touchspin,
.input-group .input-group-btn-vertical .btn {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  color: var(--gl-accent) !important;
}
.bootstrap-touchspin .btn-touchspin:hover,
.input-group .input-group-btn-vertical .btn:hover {
  background: #f5f7fa !important;
  border-color: var(--gl-brown-accent) !important;
  color: var(--gl-accent-600) !important;
}
/* make sure the icon glyph itself gets the color */
.bootstrap-touchspin .btn-touchspin i,
.bootstrap-touchspin .btn-touchspin .material-icons {
  color: inherit !important;
}

/* =========================
   PATCH: Pagination (active = blue bg + white text)
   ========================= */
/* Pagination: spacing + centred items */
.pagination .page-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem; /* space between items */
}

/* Base pill size & centring for numbers and arrows */
.pagination .page-list li a,
.pagination .page-list li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 4px;              /* a bit of horizontal padding */
  border: 1px solid transparent;
  border-radius: 6px;           /* soften the corners; adjust to taste */
  line-height: 1;               /* vertical centring */
  text-align: center;
}

/* Current page: border only, no fill */
.pagination .page-list li.current > a,
.pagination .page-list li.current > span {
  background: transparent !important;
  border: 1px solid var(--gl-brown-accent) !important;
  border-radius: 6px;
  color: var(--gl-accent) !important;
}

/* Normal pages: subtle hover */
.pagination .page-list li:not(.current) a {
  background: transparent;
  color: inherit;
}
.pagination .page-list li:not(.current) a:hover {
  border-color: var(--gl-brown-accent);
  text-decoration: none;
}

/* Disabled prev/next (if present) */
.pagination .page-list li.disabled a,
.pagination .page-list li.disabled span {
  opacity: 0.45;
  pointer-events: none;
  border-color: transparent;
}

/* Keyboard focus visibility */
.pagination .page-list li a:focus-visible {
  outline: 2px dashed var(--gl-brown-accent);
  outline-offset: 2px;
}


/* =========================
   Cart icon badge — clean states
   ========================= */

/* Never tint the cart link background on hover */
#header .blockcart a,
#header .blockcart a:hover,
#header .blockcart a:focus {
  background: transparent !important;
}

/* Base badge look (handles both empty and non-empty) */
#header .blockcart .cart-products-count {
  display: inline-block;
  min-width: 1.25rem;
  line-height: 1.25rem;
  text-align: center;
  border-radius: 9999px;
  border: 1px solid var(--gl-accent);
  background: transparent;
  color: var(--gl-accent);
}

/* When there ARE items: solid accent pill with readable text */
#header .blockcart .cart-products-count:not(:empty) {
  background: var(--gl-accent);
  color: var(--gl-on-accent);
  border: 0;
}

/* Optional: make hover not flip colors */
#header .blockcart a:hover .cart-products-count {
  background: var(--gl-accent);
  color: var(--gl-on-accent);
  border: 0;
}

/* =========================
   Add-to-cart modal only — secondary button contrast
   (scoped to avoid breaking other hovers)
   ========================= */
#blockcart-modal .modal-footer .btn-secondary {
  background: #ffffff !important;
  border-color: var(--gl-neutral) !important;
  color: var(--gl-accent-600) !important;
}
#blockcart-modal .modal-footer .btn-secondary:hover,
#blockcart-modal .modal-footer .btn-secondary:focus {
  background: #ffffff !important;
  border-color: var(--gl-accent) !important;
  color: var(--gl-accent) !important;
}

#blockcart-modal .product-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gl-accent-300) !important;   /* beat inline style="color:#000000" */
}

/* =========================
   Quantity +/- legibility (scoped)
   ========================= */
.product-quantity .bootstrap-touchspin .btn-touchspin,
.cart-summary .bootstrap-touchspin .btn-touchspin,
.cart-item .bootstrap-touchspin .btn-touchspin {
  background: #ffffff !important;
  border-color: var(--gl-neutral) !important;
  color: var(--gl-accent) !important;
}
.product-quantity .bootstrap-touchspin .btn-touchspin i,
.cart-summary .bootstrap-touchspin .btn-touchspin i,
.cart-item .bootstrap-touchspin .btn-touchspin i {
  color: inherit !important;
}

/* =========================
   Pagination current page (safe re-assert)
   ========================= */
.pagination .page-list li.current,
.pagination .page-list li.current a,
.page-list li.current a,
.page-list li.current span {
  background: var(--gl-accent) !important;
  border-color: var(--gl-accent) !important;
  color: var(--gl-on-accent) !important;
}
/* Cart preview (header) — outer wrapper only */
#header .header-nav .blockcart.cart-preview.active{
  background: #fff4eb !important;               /* soft tint */
  border: 1px solid var(--gl-brown-accent) !important;          /* outer border only */
  border-radius: .5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  color: var(--gl-accent-600) !important;
}

/* Reset inner containers/links so they don't draw borders/backgrounds */
#header .header-nav .blockcart.cart-preview.active .header,
#header .header-nav .blockcart.cart-preview.active a{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--gl-accent-600) !important;
}

/* Keep hover clean */
#header .header-nav .blockcart.cart-preview.active a:hover,
#header .header-nav .blockcart.cart-preview.active a:focus{
  background: transparent !important;
  border: 0 !important;
  color: var(--gl-accent-600) !important;
}

/* Count badge stays on-brand and borderless */
#header .header-nav .blockcart.cart-products-count{
  background: var(--gl-accent) !important;
  color: var(--gl-on-accent) !important;
  border: 0 !important;
}

#header .header-nav .material-icons.shopping-cart{
  color: var(--gl-accent-600) !important;
}

/* ====== MENUS & CATEGORIES — LIGHTER TYPOGRAPHY ====== */

/* Global menu font (optional) */
body, button, input, select, textarea {
  font-family: var(--gl-font);
}

/* Top menu (desktop) — make normal weight, not all-caps, tidy size */
#header #_desktop_top_menu #top-menu > li > a.dropdown-item {
  font-weight: 500 !important;            /* was 600 */
  text-transform: none !important;        /* remove forced uppercase if any */
  letter-spacing: 0 !important;
  font-size: 0.95rem !important;          /* adjust to taste */
}

/* Top menu dropdown items */
#header #_desktop_top_menu #top-menu li ul.top-menu[data-depth="1"] > li > a {
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.95rem !important;
}

/* Mobile menu items */
#mobile_top_menu_wrapper .top-menu a,
#mobile_top_menu_wrapper .js-top-menu-bottom a {
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Header utility links (login, account, etc.) */
.header-nav a,
.header-nav .dropdown-item {
  font-weight: 400 !important;
  text-transform: none !important;
}

/* ====== LEFT SIDEBAR CATEGORIES (ps_categorytree) ====== */

/* Block title */
#left-column .block-categories .h6,
#left-column .block-categories .title_block {
  font-weight: 600 !important;   /* keep title sturdy… */
  text-transform: none !important;
}

/* Category links (all levels) */
#left-column .block-categories .category-sub-menu a,
#left-column .block-categories .category-sub-menu .category a,
#left-column .block-categories .category-sub-menu li a {
  font-weight: 400 !important;    /* …but links should be regular */
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.95rem !important;
}

/* Current/active category shouldn’t jump to bold */
#left-column .block-categories .category-sub-menu li a[href*="category"] .open,
#left-column .block-categories .category-sub-menu li.current > a,
#left-column .block-categories .category-sub-menu li a:hover {
  font-weight: 500 !important; /* slight emphasis on hover/active */
}

/* Faceted search (if you’re using it) – make labels normal weight */
#left-column .facets-title,
#left-column .facet .facet-title,
#left-column .facet .facet-label a,
#left-column .facet .custom-checkbox > label {
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Breadcrumbs (often too heavy) */
.breadcrumb li a, .breadcrumb li {
  font-weight: 400 !important;
}

/* Section headings that looked chunky on category pages */
#content h1.h1, #content h2.h2, .products-section-title {
  font-weight: 600 !important;     /* keep headings clear, but not black-bold */
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ===== Subcategory tiles: kill thick hover border, add subtle card hover ===== */

.subcategories-list li,
.subcategories-list li h5,
.subcategories-list li .subcategory-name,
.subcategories-list li .cat_desc {
  text-align: center !important;
}

.subcategories-list li .subcategory-image {
  display: flex;
  justify-content: center;
}

/* Base: remove any default borders/outlines */
.subcategories-list li .subcategory-image a.img,
.subcategories-list li .subcategory-image a.img img {
  border: 0 !important;               /* kill any border */
  outline: none !important;
  box-shadow: none !important;
  display: inline-block; 
  margin: 0 auto;
  border-radius: .6rem;              /* optional: rounded corners */
  overflow: hidden;                   /* clip image to radius */
  transition: box-shadow .18s ease, transform .12s ease, border-color .18s ease;
}

/* Explicitly override the theme's 3px hover border */
.subcategories-list li:hover  {
  border: 1px solid var(--gl-brown-accent) !important;
  border-radius: 5px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.09); /* subtle lift */
  transform: translateY(-1px);
}

/* (Optional) brand-tinted hairline instead of border */
.subcategories-list li:hover .subcategory-image a.img::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: .6rem;
  box-shadow: 0 0 0 1px rgba(19, 68, 116, .80); /* uses your blue tint, super light */
}

/* Make sure the anchor can host the ::after hairline */
.subcategories-list li .subcategory-image {
  position: relative;
}
.subcategories-list li .subcategory-image a.img {
  position: relative;
}

/* Optional: tidy titles under tiles */
.subcategories-list .subcategory-name {
  font-weight: 500;                    /* lighten from 600 */
}

/* New products — minimal, correct stack like Classic */
body#new-products .product-miniature .thumbnail-container{
  float:none!important;
  display:block!important;
  width:100%!important;
  margin:0 0 .5rem!important;
}

body#new-products .product-miniature .product-description{
  display:block!important;
  clear:both!important;          /* kills any side-by-side layout */
  width:100%!important;
  text-align:center!important;
}

body#new-products .product-miniature .product-title,
body#new-products .product-miniature .product-title a{
  display:block!important;
  float:none!important;          /* cancels float:left variants */
  margin:0 0 .25rem!important;
  white-space:normal!important;
  word-break:break-word!important;
}

body#new-products .product-miniature .product-price-and-shipping{
  display:block!important;
  float:none!important;          /* cancels float:right variants */
  margin:0!important;
  text-align:center!important;
}
/* New products — make cards fill columns (width + equal height) */
body#new-products #js-product-list .products.row > .product {
  display: flex !important;            /* column becomes flex container */
}

body#new-products #js-product-list article.product-miniature {
  flex: 1 1 auto !important;           /* stretch to full column height */
  width: 100% !important;              /* fill column width */
  max-width: none !important;          /* kill any theme cap */
  box-sizing: border-box !important;   /* include padding in width */
}

/* New products — stop title truncation, no vendor prefixes */
body#new-products .product-miniature .product-title,
body#new-products .product-miniature .product-title a {
  display: block !important;
  width: 100% !important;
  white-space: normal !important;   /* allow wrapping */
  overflow: visible !important;     /* no clipping */
  text-overflow: clip !important;   /* no ellipsis */
  height: auto !important;          /* cancel fixed heights */
  max-height: none !important;
}

body#new-products .product-miniature .product-title a.text-truncate,
body#new-products .product-miniature .product-title a.ellipsis {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body#new-products .product-miniature .product-description {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}