/* ===== Font Faces ===== */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-v23-latin-regular.woff2') format('woff2'),
       url('../fonts/montserrat-v23-latin-regular.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-v23-latin-italic.woff2') format('woff2'),
       url('../fonts/montserrat-v23-latin-italic.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-v23-latin-700.woff2') format('woff2'),
       url('../fonts/montserrat-v23-latin-700.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-v23-latin-700italic.woff2') format('woff2'),
       url('../fonts/montserrat-v23-latin-700italic.woff') format('woff');
}

@font-face {
  font-family: 'Microgramma D Extended Bold';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/MicrogrammaD-BoldExte.woff2') format('woff2'),
       url('../fonts/MicrogrammaD-BoldExte.woff') format('woff');
}

/* ===== CSS Custom Properties ===== */
:root {
  --dwg-primary: #253237;
  --dwg-primary-dark: #252D30;
  --dwg-secondary: #354651;
  --dwg-accent: #147EB3;
  --dwg-hover: #1190cc;
  --dwg-text: #666666;
  --dwg-text-dark: #253237;
  --dwg-bg: #ffffff;
  --dwg-bg-alt: #EFEFEF;
  --dwg-border: #e0e0e0;
  --dwg-success: #28a745;
  --dwg-danger: #dc3545;
  --dwg-warning: #ffc107;
  --dwg-font-body: 'Montserrat', sans-serif;
  --dwg-font-heading: 'Microgramma D Extended Bold', sans-serif;
}

/* ===== Global typography ===== */
:root {
  --bs-body-font-family: 'Montserrat', sans-serif;
  --bs-font-sans-serif: 'Montserrat', sans-serif;
}

body {
  font-family: var(--dwg-font-body);
  color: var(--dwg-text);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--dwg-text-dark);
}

a {
  color: var(--dwg-accent);
}

a:hover {
  color: var(--dwg-hover);
}

/* ===== Header — dark theme ===== */
#header {
  background-color: var(--dwg-primary-dark);
}

.header-top {
  background-color: var(--dwg-primary-dark);
  color: #fff;
}

.header-top a,
.header-top .header-block__action-btn {
  color: #fff;
}

.header-top a:hover {
  color: var(--dwg-accent);
}

.header-bottom {
  background-color: var(--dwg-primary-dark);
}

.header-bottom__logo a,
.header-bottom__logo img {
  filter: brightness(0) invert(1);
}

.header-bottom .header-block__action-btn {
  color: #fff;
}

.header-bottom .header-block__icon {
  color: #fff;
}

.header-bottom .header-block__badge {
  background-color: var(--dwg-accent);
  color: #fff;
}

/* Search bar in header */
.header-bottom .search-widget__input,
.header-bottom #search_widget input {
  background-color: #fff;
  border: none;
  border-radius: 4px;
}

.header-bottom .search-widget__submit,
.header-bottom #search_widget button {
  background-color: var(--dwg-accent);
  color: #fff;
  border: none;
}

/* Navigation bar below header */
.header-nav-full-width {
  background-color: var(--dwg-secondary);
}

.header-nav-full-width a {
  color: #fff;
  font-family: var(--dwg-font-body);
  font-size: 0.875rem;
  text-transform: uppercase;
}

.header-nav-full-width a:hover {
  color: var(--dwg-accent);
}

/* Sticky header */
.js-sticky-header.is-sticky {
  background-color: var(--dwg-primary-dark);
}

/* ===== Footer — dark theme ===== */
#footer,
.footer {
  background-color: var(--dwg-primary-dark);
  color: #ccc;
}

.footer a {
  color: #ccc;
}

.footer a:hover {
  color: var(--dwg-accent);
}

.footer__main {
  background-color: var(--dwg-primary-dark);
  color: #ccc;
}

.footer__main h4,
.footer__main .h4,
.footer .block-title,
.footer .footer-title {
  color: #fff;
  font-family: var(--dwg-font-body);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.875rem;
}

.footer .copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #999;
  font-size: 0.8rem;
}

/* ===== Buttons ===== */
.btn-primary {
  background-color: var(--dwg-accent);
  border-color: var(--dwg-accent);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--dwg-hover);
  border-color: var(--dwg-hover);
}

.btn-outline-primary {
  color: var(--dwg-accent);
  border-color: var(--dwg-accent);
}

.btn-outline-primary:hover {
  background-color: var(--dwg-accent);
  border-color: var(--dwg-accent);
  color: #fff;
}

/* ===== Product miniature — availability ===== */
.product-miniature__availability {
  font-size: 0.75rem;
  margin-top: 0.375rem;
  line-height: 1.3;
}

.product-miniature__availability .in-stock {
  color: var(--dwg-success);
}

.product-miniature__availability .last-items {
  color: var(--dwg-warning);
}

.product-miniature__availability .out-of-stock {
  color: var(--dwg-danger);
}

/* ===== Product miniature — card styling ===== */
.product-miniature {
  border: 1px solid var(--dwg-border);
  transition: border-color 0.2s ease;
  text-align: center;
}

.product-miniature:hover {
  border-color: var(--dwg-accent);
}

.product-miniature__infos {
  text-align: center;
}

.product-miniature__manufacturer {
  margin-bottom: 0.25rem;
}

.product-miniature__manufacturer-link {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--dwg-text-light);
  text-decoration: none;
}

.product-miniature__manufacturer-link:hover {
  color: var(--dwg-accent);
}

.product-miniature__title {
  font-weight: 600;
  font-size: 0.875rem;
}

.product-miniature__prices {
  margin-top: 0.25rem;
}

.product-miniature__price {
  font-weight: 400;
  font-size: 1rem;
}

.product-miniature__regular-price {
  text-decoration: line-through;
  color: var(--dwg-text-light);
  font-size: 0.85rem;
  margin-right: 0.25rem;
}

.product-miniature__discount {
  background-color: var(--dwg-danger);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.2rem;
  margin-left: 0.25rem;
}

/* Hide add-to-cart on miniatures — match live site */
.product-miniature__actions {
  display: none;
}

/* ===== Product detail — stock info ===== */
.product__stock-info {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

.availability-list {
  font-size: 0.875rem;
  font-weight: 500;
}

.availability-list.in-stock {
  color: var(--dwg-success);
}

.availability-list.out-of-stock {
  color: var(--dwg-danger);
}

/* ===== Product detail — Buy Now button ===== */
.product__buy-now {
  margin-top: 0.75rem;
}

.btn-buy-now {
  width: 100%;
  background-color: var(--dwg-primary-dark);
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background-color 0.2s ease;
}

.btn-buy-now:hover {
  background-color: var(--dwg-secondary);
  color: #fff;
}

.btn-buy-now:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Product detail — Tabs (not accordion) ===== */
.product__tabs .nav-tabs {
  border-bottom: 2px solid var(--dwg-border);
  margin-bottom: 0;
}

.product__tabs .nav-tabs .nav-link {
  color: var(--dwg-text);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.75rem 1.25rem;
  margin-bottom: -2px;
  background: none;
}

.product__tabs .nav-tabs .nav-link:hover {
  color: var(--dwg-accent);
  border-bottom-color: var(--dwg-accent);
}

.product__tabs .nav-tabs .nav-link.active {
  color: var(--dwg-accent);
  border-bottom-color: var(--dwg-accent);
  background: none;
}

.product__tabs .tab-content {
  padding: 1.5rem 0;
}

.product__tabs .tab-pane .product-description {
  line-height: 1.7;
}

/* Hide accordion styling from parent */
.product__bottom .product__accordion {
  display: none;
}

/* ===== Product detail — name ===== */
.product__name {
  font-family: var(--dwg-font-body);
  color: var(--dwg-text-dark);
}

/* ===== Category Hero Banner ===== */
.category__hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--dwg-primary-dark);
  min-height: 220px;
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 1.5rem;
}

.category__hero-overlay {
  width: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  background: rgba(37, 45, 48, 0.7);
  padding: 2rem 0;
}

.category__hero-content {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

.category__hero .breadcrumb__wrapper {
  margin-bottom: 0.5rem;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.category__hero .breadcrumb__wrapper .container {
  padding: 0;
  background: none !important;
}

.category__hero .breadcrumb {
  margin-bottom: 0;
  padding: 0;
  background: none !important;
}

.category__hero .breadcrumb-item,
.category__hero .breadcrumb-item a,
.category__hero .breadcrumb-item span,
.category__hero .breadcrumb-link,
.category__hero .breadcrumb-link span {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.8rem;
  background: none !important;
}

.category__hero .breadcrumb-item:last-child span {
  color: #fff !important;
}

.category__hero-title {
  font-family: var(--dwg-font-heading);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.category__hero-description {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  max-width: 600px;
  line-height: 1.5;
}

@media (max-width: 767.98px) {
  .category__hero {
    min-height: 150px;
  }
  .category__hero-overlay {
    min-height: 150px;
  }
  .category__hero-title {
    font-size: 1.5rem;
  }
}

/* Hide default breadcrumb on category listing pages — hero has its own */
body#category #wrapper > .breadcrumb__wrapper,
body#best-sales #wrapper > .breadcrumb__wrapper,
body#new-products #wrapper > .breadcrumb__wrapper,
body#prices-drop #wrapper > .breadcrumb__wrapper {
  display: none;
}

/* ===== Category page — description ===== */
.category__description {
  max-width: 50%;
}

@media (max-width: 767.98px) {
  .category__description {
    max-width: 100%;
  }
}

/* ===== Category Tree — indent subcategories, accent only on hover ===== */
.category-tree__list[data-depth="0"] {
  padding-left: 0.75rem;
}

.category-tree__list[data-depth="1"] {
  padding-left: 0.75rem;
}

.category-tree__item-link {
  color: var(--dwg-text-dark);
  text-decoration: none;
}

.category-tree__item-link:hover {
  color: var(--dwg-accent);
}

.left-block__title-link {
  color: var(--dwg-accent);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}

/* ===== Breadcrumb ===== */
.breadcrumb .breadcrumb-item.active {
  color: var(--dwg-accent);
}

/* ===== Subcategory listing ===== */
.subcategory__link {
  border: 1px solid var(--dwg-border);
  transition: border-color 0.2s ease;
}

.subcategory__link:hover {
  border-color: var(--dwg-accent);
}

.subcategory__thumbnail {
  display: none;
}

.subcategory__list--with-images .subcategory__link--with-image {
  padding: 0.5rem 1rem;
}

/* ===== Pagination accent ===== */
.pagination .page-item.active .page-link {
  background-color: var(--dwg-accent);
  border-color: var(--dwg-accent);
}

.pagination .page-link {
  color: var(--dwg-accent);
}

/* ===== Faceted search accent ===== */
.facet .custom-checkbox input[type="checkbox"]:checked + span {
  background-color: var(--dwg-accent);
  border-color: var(--dwg-accent);
}

/* ===== Product flags ===== */
.product-flag.discount,
.product-flag.on-sale {
  background-color: var(--dwg-danger);
}

.product-flag.new {
  background-color: var(--dwg-accent);
}

/* ===== Back to top ===== */
.back-to-top-link:focus {
  background-color: var(--dwg-accent);
}

/* ===== Forms — focus accent ===== */
.form-control:focus {
  border-color: var(--dwg-accent);
  box-shadow: 0 0 0 0.2rem rgba(20, 126, 179, 0.25);
}

/* ===== Toast / notifications ===== */
.toast--success {
  border-color: var(--dwg-success);
}

/* ===== Checkout steps accent ===== */
.checkout-step .step-title .step-number {
  background-color: var(--dwg-accent);
}