/* ============================================================
   TONERWORLD — Brand Override (Light / Green edition)
   Built on Hummingbird 2.0.0 / Bootstrap 5.3
   ============================================================ */

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

/* ── Design tokens ── */
:root {
  --tw-green:        #2e7d32;
  --tw-green-mid:    #388e3c;
  --tw-green-light:  #4caf50;
  --tw-green-pale:   #e8f5e9;
  --tw-green-xpale:  #f1f8f1;
  --tw-white:        #ffffff;
  --tw-surface:      #f7faf7;
  --tw-surface-2:    #eef4ee;
  --tw-border:       #c8e0c8;
  --tw-border-mid:   #a5c8a5;
  --tw-text:         #1b2e1b;
  --tw-text-mid:     #3a5a3a;
  --tw-text-muted:   #6a8f6a;
  --tw-text-dim:     #9ab89a;

  /* Bootstrap overrides */
  --bs-primary:            var(--tw-green);
  --bs-primary-rgb:        46, 125, 50;
  --bs-body-bg:            var(--tw-white);
  --bs-body-color:         var(--tw-text);
  --bs-border-color:       var(--tw-border);
  --bs-secondary-bg:       var(--tw-surface);
  --bs-tertiary-bg:        var(--tw-surface-2);
  --bs-link-color:         var(--tw-green);
  --bs-link-hover-color:   var(--tw-green-mid);
  --bs-font-sans-serif:    'Inter', system-ui, sans-serif;
  --bs-border-radius:      4px;
  --bs-border-radius-sm:   3px;
  --bs-border-radius-lg:   6px;
  --bs-border-radius-xl:   8px;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--tw-white);
  color: var(--tw-text);
  font-family: 'Inter', system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--tw-text);
}

a            { color: var(--tw-green); }
a:hover      { color: var(--tw-green-mid); }
hr           { border-color: var(--tw-border); }

/* ── TOP STRIP — .header-top (green) ── */
.header-top {
  background-color: var(--tw-green) !important;
  border-bottom: none !important;
  --header-top-color: #fff;
  --header-top-color-hover: rgba(255,255,255,0.80);
}

.header-top,
.header-top a,
.header-top .material-icons,
.header-top .dropdown-item,
.header-top .form-select,
.header-top select,
.header-top span,
.header-top p {
  color: #fff !important;
}

.header-top a:not(.dropdown-item):hover,
.header-top .dropdown-item:hover {
  color: var(--tw-green-pale) !important;
}

.header-top .dropdown-menu {
  background: var(--tw-green-mid) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

.header-top .form-select {
  background-color: transparent !important;
  border-color: rgba(255,255,255,0.3) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* ── HEADER BOTTOM — .header-bottom (white bar with logo) ── */
.header-bottom {
  background: var(--tw-white) !important;
  border-bottom: 2px solid var(--tw-green) !important;
  box-shadow: 0 2px 8px rgba(46,125,50,0.10) !important;
}

/* Ensure #header wrapper itself is white */
#header {
  background: var(--tw-white) !important;
}

/* ── LOGO ── */
.logo,
#_desktop_logo a,
#_mobile_logo a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
  text-transform: uppercase !important;
  color: var(--tw-green) !important;
  text-decoration: none !important;
}
.logo img { display: none !important; }

#_desktop_logo a::after,
#_mobile_logo  a::after {
  content: '';
  display: inline-block;
  width: 28px; height: 8px;
  margin-left: 6px;
  vertical-align: middle;
  background:
    radial-gradient(circle, #2e7d32 0%, #2e7d32 100%) 0    50% / 8px 8px no-repeat,
    radial-gradient(circle, #4caf50 0%, #4caf50 100%) 10px 50% / 8px 8px no-repeat,
    radial-gradient(circle, #a5d6a7 0%, #a5d6a7 100%) 20px 50% / 8px 8px no-repeat;
}

/* ── MAIN NAVIGATION ── */
.top-menu .nav-link,
.top-menu a {
  color: var(--tw-text-mid) !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: color 0.2s;
}
.top-menu .nav-link:hover,
.top-menu a:hover,
.top-menu .current > a {
  color: var(--tw-green) !important;
}
.top-menu .sub-menu,
.top-menu .popover {
  background: var(--tw-white) !important;
  border: 1px solid var(--tw-border) !important;
  box-shadow: 0 4px 16px rgba(46,125,50,0.12) !important;
  border-radius: 4px !important;
}
.top-menu .sub-menu a { color: var(--tw-text-mid) !important; }
.top-menu .sub-menu a:hover { color: var(--tw-green) !important; }

/* ── SEARCH BAR ── */
.search-widget form,
#search_widget form {
  border: 1.5px solid var(--tw-border);
  background: var(--tw-surface);
  border-radius: 4px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-widget form:focus-within,
#search_widget form:focus-within {
  border-color: var(--tw-green);
  box-shadow: 0 0 0 3px rgba(46,125,50,0.12);
}
.search-widget input,
#search_widget input {
  background: transparent !important;
  color: var(--tw-text) !important;
  border: none !important;
  outline: none !important;
}
.search-widget input::placeholder { color: var(--tw-text-dim); }
.search-widget button,
#search_widget button {
  background: transparent;
  border: none;
  color: var(--tw-text-muted);
  transition: color 0.2s;
}
.search-widget button:hover { color: var(--tw-green); }

/* ── BUTTONS ── */
.btn-primary,
.btn.btn-primary {
  background-color: var(--tw-green) !important;
  border-color: var(--tw-green) !important;
  color: #fff !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  transition: all 0.2s;
}
.btn-primary:hover,
.btn.btn-primary:hover {
  background-color: var(--tw-green-mid) !important;
  border-color: var(--tw-green-mid) !important;
  box-shadow: 0 4px 12px rgba(46,125,50,0.30);
  transform: translateY(-1px);
}

.btn-secondary,
.btn.btn-secondary {
  background-color: transparent !important;
  border-color: var(--tw-green) !important;
  color: var(--tw-green) !important;
  border-radius: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.2s;
}
.btn-secondary:hover {
  background-color: var(--tw-green-pale) !important;
}

.btn-outline-secondary {
  border-color: var(--tw-border-mid) !important;
  color: var(--tw-text-muted) !important;
  border-radius: 4px;
}
.btn-outline-secondary:hover {
  border-color: var(--tw-green) !important;
  color: var(--tw-green) !important;
  background: var(--tw-green-pale) !important;
}

/* ── FORMS ── */
.form-control,
.form-select {
  background-color: var(--tw-white) !important;
  border: 1.5px solid var(--tw-border) !important;
  color: var(--tw-text) !important;
  border-radius: 4px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--tw-green) !important;
  box-shadow: 0 0 0 3px rgba(46,125,50,0.12) !important;
  background-color: var(--tw-white) !important;
  color: var(--tw-text) !important;
}
.form-control::placeholder { color: var(--tw-text-dim); }

.form-label, label {
  color: var(--tw-text-mid);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.form-check-input {
  border-color: var(--tw-border-mid) !important;
  background-color: var(--tw-white) !important;
}
.form-check-input:checked {
  background-color: var(--tw-green) !important;
  border-color: var(--tw-green) !important;
}

/* ── PRODUCT CARDS ── */
.card,
.product-miniature .card {
  background: var(--tw-white) !important;
  border: 1.5px solid var(--tw-border) !important;
  border-radius: 6px !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.card:hover,
.product-miniature .card:hover {
  border-color: var(--tw-green-light) !important;
  box-shadow: 0 6px 24px rgba(46,125,50,0.14) !important;
  transform: translateY(-2px);
}
.card-body { background: transparent; }

.product-title a,
.product-miniature .h3 a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tw-text) !important;
  transition: color 0.2s;
}
.product-title a:hover { color: var(--tw-green) !important; }

.price,
.product-price-and-shipping .price {
  color: var(--tw-green) !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
}
.regular-price {
  color: var(--tw-text-dim) !important;
  text-decoration: line-through;
}

.product-thumbnail,
.product-miniature .thumbnail-container {
  background: var(--tw-surface);
}

/* ── PRODUCT BADGES ── */
.product-flag,
.badge {
  border-radius: 3px !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.product-flag.new-product,
.badge.bg-primary  { background: var(--tw-green) !important;       color: #fff !important; }
.product-flag.on-sale,
.badge.bg-danger   { background: #d32f2f !important;                color: #fff !important; }
.product-flag.discount,
.badge.bg-warning  { background: #f57f17 !important;                color: #fff !important; }

/* ── PRODUCT DETAIL ── */
#product .page-content--product { background: var(--tw-white); }
#product .product-prices .current-price .price { font-size: 36px; color: var(--tw-green); }
#product .product-name  { font-size: clamp(24px,3vw,40px); color: var(--tw-text); }
#product .add-to-cart,
#add-to-cart-or-refresh .add-to-cart {
  background: var(--tw-green) !important;
  border-color: var(--tw-green) !important;
  color: #fff !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  transition: all 0.2s;
}
#product .add-to-cart:hover {
  background: var(--tw-green-mid) !important;
  box-shadow: 0 4px 14px rgba(46,125,50,0.30);
  transform: translateY(-1px);
}

/* ── CATEGORY / LISTING ── */
.category-header  { background: var(--tw-green-xpale); border-bottom: 2px solid var(--tw-border); }
.category-name,
.page-header h1   { color: var(--tw-text) !important; }

/* facets */
#search_filters,
.faceted-search {
  background: var(--tw-surface) !important;
  border: 1.5px solid var(--tw-border) !important;
  border-radius: 6px !important;
}
#search_filters .facet-title,
.faceted-search  .facet-title {
  color: var(--tw-text-mid);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; text-transform: uppercase;
}

/* ── CART ── */
.cart-grid-body .card,
.cart-summary   .card {
  background: var(--tw-white) !important;
  border-color: var(--tw-border) !important;
}
.cart-item { border-bottom: 1px solid var(--tw-border) !important; }

/* ── CHECKOUT ── */
.checkout-container { background: var(--tw-surface); }
.checkout-step {
  background: var(--tw-white);
  border: 1.5px solid var(--tw-border);
  border-radius: 6px;
  margin-bottom: 1rem;
}
.checkout-step .step-title { color: var(--tw-text); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; }
.checkout-step.-complete  .step-title { color: var(--tw-green); }
.checkout-step.-reachable .step-title { color: var(--tw-text-muted); }

/* ── AUTH FORMS ── */
.login-form,
.register-form,
.customer-form {
  background: var(--tw-white);
  border: 1.5px solid var(--tw-border);
  border-radius: 6px;
  padding: 2rem;
}

/* ── BREADCRUMB ── */
.breadcrumb-item a    { color: var(--tw-text-muted) !important; }
.breadcrumb-item.active { color: var(--tw-text-mid); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--tw-text-dim); }
nav.breadcrumb-wrapper, .breadcrumb-wrapper {
  background: var(--tw-green-xpale);
  border-bottom: 1px solid var(--tw-border);
}

/* ── PAGINATION ── */
.pagination .page-link {
  background: var(--tw-white);
  border-color: var(--tw-border);
  color: var(--tw-text-mid);
  border-radius: 4px !important;
}
.pagination .page-link:hover    { border-color: var(--tw-green); color: var(--tw-green); background: var(--tw-green-pale); }
.pagination .active .page-link  { background: var(--tw-green) !important; border-color: var(--tw-green) !important; color: #fff !important; }

/* ── ALERTS ── */
.alert-danger  { background: #ffebee; border-color: #ef9a9a; color: #b71c1c; }
.alert-success { background: var(--tw-green-pale); border-color: #a5d6a7; color: var(--tw-green); }
.alert-warning { background: #fff8e1; border-color: #ffe082; color: #e65100; }
.alert-info    { background: #e3f2fd; border-color: #90caf9; color: #0d47a1; }

/* ── TABLES ── */
.table               { color: var(--tw-text); border-color: var(--tw-border); }
.table th            { color: var(--tw-text-muted); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; border-color: var(--tw-border); }
.table td            { border-color: var(--tw-border); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--tw-green-xpale); color: var(--tw-text); }

/* ── MODALS ── */
.modal-content  { background: var(--tw-white); border: 1.5px solid var(--tw-border); border-radius: 6px; }
.modal-header   { border-bottom-color: var(--tw-border); }
.modal-footer   { border-top-color: var(--tw-border); }
.modal-title    { color: var(--tw-text); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; }

/* ── DROPDOWN ── */
.dropdown-menu    { background: var(--tw-white); border: 1px solid var(--tw-border); border-radius: 4px; box-shadow: 0 4px 16px rgba(46,125,50,0.10); }
.dropdown-item    { color: var(--tw-text-mid); }
.dropdown-item:hover,
.dropdown-item:focus { background: var(--tw-green-pale); color: var(--tw-green); }
.dropdown-divider { border-color: var(--tw-border); }

/* ── CATEGORY TREE ── */
.category-top-menu a,
.category-sub-menu a,
.ps-categorytree a { color: var(--tw-text-mid) !important; transition: color 0.2s; }
.category-top-menu a:hover,
.category-sub-menu a:hover,
.ps-categorytree   a:hover,
.category-top-menu .current > a { color: var(--tw-green) !important; }

/* ── REASSURANCE BLOCK ── */
.block-reassurance { background: var(--tw-green-xpale); border-top: 1px solid var(--tw-border); border-bottom: 1px solid var(--tw-border); }
.block-reassurance p    { color: var(--tw-text-muted); }
.block-reassurance span { color: var(--tw-text); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; }

/* ── FOOTER ── */
.footer-container {
  background: var(--tw-green) !important;
  border-top: none !important;
  color: #fff !important;
}
.footer-container *         { color: rgba(255,255,255,0.85) !important; }
.footer-container h3,
.footer-container .h3 { color: #fff !important; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: 1 !important; }
.footer-container a         { color: rgba(255,255,255,0.75) !important; transition: color 0.2s; }
.footer-container a:hover   { color: #fff !important; }
.footer-container hr        { border-color: rgba(255,255,255,0.20); }
#footer .copyright { background: #1b5e20 !important; border-top: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.7) !important; }
#footer .copyright * { color: rgba(255,255,255,0.7) !important; }

/* ── OFFCANVAS (mobile) ── */
.offcanvas         { background: var(--tw-white) !important; border-color: var(--tw-border) !important; }
.offcanvas-header  { border-bottom: 1px solid var(--tw-border); }
.offcanvas-title   { color: var(--tw-text); font-family: 'Barlow Condensed', sans-serif; }

/* ── INPUT GROUPS ── */
.input-group-text { background: var(--tw-surface); border-color: var(--tw-border); color: var(--tw-text-muted); }

/* ── QTY INPUT ── */
.qty .input-group .btn { background: var(--tw-surface); border-color: var(--tw-border); color: var(--tw-text-muted); }
.qty .input-group .btn:hover { color: var(--tw-green); border-color: var(--tw-green); background: var(--tw-green-pale); }
.qty input[type="number"] { background: var(--tw-white) !important; color: var(--tw-text) !important; border-color: var(--tw-border) !important; }

/* ── SORT / FILTER ── */
.products-sort-order .select-title,
.products-per-page   .select-title {
  background: var(--tw-white);
  border: 1.5px solid var(--tw-border);
  color: var(--tw-text-mid);
  border-radius: 4px;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--tw-surface); }
::-webkit-scrollbar-thumb  { background: var(--tw-border-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--tw-green-light); }

/* ── UTILITY ── */
.text-primary   { color: var(--tw-green) !important; }
.bg-primary     { background-color: var(--tw-green) !important; }
.border-primary { border-color: var(--tw-green) !important; }
.text-muted     { color: var(--tw-text-muted) !important; }
.bg-light       { background-color: var(--tw-surface) !important; }

/* ── GREEN HIGHLIGHT ACCENT (dividers, active states) ── */
.nav-tabs .nav-link.active { border-bottom-color: var(--tw-green) !important; color: var(--tw-green) !important; }
.nav-tabs .nav-link:hover  { color: var(--tw-green) !important; }
.progress-bar              { background-color: var(--tw-green) !important; }
.badge.bg-success          { background-color: var(--tw-green) !important; }

/* ── HEADER-BOTTOM white text on green ── */
.header-bottom .navbar-brand,
.header-bottom .navbar-brand .logo,
.header-bottom .header-block__action-btn,
.header-bottom .header-block__icon,
.header-bottom .header-block__badge,
.header-bottom .nav-link,
.header-bottom a {
  color: #fff !important;
}
.header-bottom .header-block__badge {
  background: rgba(255,255,255,0.25) !important;
  color: #fff !important;
}
.header-bottom .search-widget form,
.header-bottom #search_widget form {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.4) !important;
}
.header-bottom .search-widget input,
.header-bottom #search_widget input {
  color: #fff !important;
}
.header-bottom .search-widget input::placeholder,
.header-bottom #search_widget input::placeholder {
  color: rgba(255,255,255,0.7) !important;
}
.header-bottom .search-widget button,
.header-bottom #search_widget button {
  color: #fff !important;
}