/* ==========================================================================
   QuantumBT — "Trace" design system overlay
   Applied on top of stock PrestaShop Hummingbird theme.css.
   Design language: technical / blueprint, Ink Navy + Paper, hairline borders,
   Barlow Condensed display + IBM Plex Sans body + IBM Plex Mono for data.
   ========================================================================== */

:root {
  /* Trace palette */
  --trace-blue: #2C5FE0;      /* primary actions, links, active state       */
  --trace-blue-dark: #244ec0;
  --trace-teal: #0FA79E;      /* in-stock / positive utility                */
  --trace-orange: #FF7A29;    /* attention / hero CTA / NEW                 */
  --trace-ink: #14171F;       /* header / nav / footer surfaces             */
  --trace-ink-soft: #1c2028;
  --trace-outline: #E1E4EA;   /* hairline borders                          */
  --trace-bg: #F5F6F8;        /* page background                           */
  --trace-surface: #FFFFFF;   /* cards / panels                           */
  --trace-on: #181B24;        /* primary text                             */
  --trace-on-variant: #434654;/* secondary text                          */

  --trace-font-display: "Barlow Condensed", "Inter", sans-serif;
  --trace-font-body: "IBM Plex Sans", "Inter", sans-serif;
  --trace-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Bootstrap variable overrides (cascade broadly through theme) */
  --bs-primary: #2C5FE0;
  --bs-primary-rgb: 44, 95, 224;
  --bs-secondary: #0FA79E;
  --bs-secondary-rgb: 15, 167, 158;
  --bs-body-font-family: "IBM Plex Sans", "Inter", sans-serif;
  --bs-body-bg: #F5F6F8;
  --bs-body-color: #181B24;
  --bs-border-color: #E1E4EA;
  --bs-border-radius: 4px;
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 8px;
  --bs-border-radius-xl: 8px;
  --bs-link-color: #2C5FE0;
  --bs-link-color-rgb: 44, 95, 224;
  --bs-link-hover-color: #244ec0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

body {
  font-family: var(--trace-font-body);
  color: var(--trace-on);
  background-color: var(--trace-bg);
  /* subtle blueprint grid on the page background */
  background-image:
    linear-gradient(to right, rgba(20, 23, 31, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 23, 31, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title-section,
.product__name,
.product-miniature__title,
.section-title,
.featured-products .h2,
.card-title {
  font-family: var(--trace-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--trace-ink);
}

.page-title-section,
.h1, h1 {
  letter-spacing: -0.02em;
}

/* ==========================================================================
   Data type — IBM Plex Mono for prices, SKU, specs, tax notes
   ========================================================================== */

.product-miniature__price,
.product-miniature__regular-price,
.product__current-price,
.product__price-regular,
.product__price-taxless,
.current-price,
.current-price-value,
.regular-price,
.product__tax-label,
.product-line__price,
.product-line__prices,
.cart-summary__product__price,
.cart-summary__totals .value,
.cart-summary__line .value,
.cart-summary__total .value,
.product-reference span,
.product-quantities span {
  font-family: var(--trace-font-mono);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.product__current-price {
  font-size: 1.9rem;
  color: var(--trace-ink);
}

.product__tax-label {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--trace-on-variant);
}

.product-miniature__price {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--trace-ink);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  font-family: var(--trace-font-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
}

.btn-primary {
  --bs-btn-bg: var(--trace-blue);
  --bs-btn-border-color: var(--trace-blue);
  --bs-btn-hover-bg: var(--trace-blue-dark);
  --bs-btn-hover-border-color: var(--trace-blue-dark);
  --bs-btn-active-bg: #1f43a8;
  --bs-btn-active-border-color: #1f43a8;
  --bs-btn-disabled-bg: var(--trace-blue);
  --bs-btn-disabled-border-color: var(--trace-blue);
  box-shadow: none;
}

.btn-secondary,
.btn-outline-primary {
  --bs-btn-color: var(--trace-teal);
  --bs-btn-border-color: var(--trace-teal);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--trace-teal);
  --bs-btn-hover-border-color: var(--trace-teal);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--trace-teal);
  --bs-btn-active-border-color: var(--trace-teal);
  box-shadow: none;
}

/* Ghost / link buttons: ink text with a blue underline accent */
.btn-link {
  color: var(--trace-ink);
  text-decoration: none;
}
.btn-link:hover { color: var(--trace-blue); }

/* Hero / banner primary CTA reads as Signal Orange */
.slider-caption .btn,
.elementor-button,
.banner .btn,
.homeslider-container .btn {
  --bs-btn-bg: var(--trace-orange);
  --bs-btn-border-color: var(--trace-orange);
  --bs-btn-hover-bg: #e86a1c;
  --bs-btn-hover-border-color: #e86a1c;
  color: #ffffff;
}

/* ==========================================================================
   Badges & product flags  — pill shaped, teal / orange
   ========================================================================== */

.badge {
  --bs-badge-border-radius: 9999px;
  font-family: var(--trace-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  font-size: 0.7rem;
}

.product-flags .badge,
.product-flags li {
  border-radius: 9999px;
  background-color: var(--trace-orange);
  color: #ffffff;
  font-family: var(--trace-font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

/* "New" flag → orange, discount/online-only → teal */
.product-flags .new,
.product-flags .badge.new {
  background-color: var(--trace-orange);
}
.product-flags .discount,
.product-flags .on-sale,
.product-flags .online-only {
  background-color: var(--trace-teal);
}

/* Stock availability pill */
.product-availability,
.product__availability,
.js-product-availability {
  font-family: var(--trace-font-mono);
  font-weight: 600;
}
.product-availability .material-icons,
.in-stock .material-icons { color: var(--trace-teal); }

/* ==========================================================================
   Cards / panels — hairline borders, no shadow
   ========================================================================== */

.card {
  --bs-card-border-width: 1px;
  --bs-card-border-color: var(--trace-outline);
  --bs-card-border-radius: 8px;
  box-shadow: none !important;
  background-color: var(--trace-surface);
}

.product-miniature .card {
  transition: border-color 0.2s ease;
}
.product-miniature .card:hover {
  border-color: var(--trace-blue);
}

.product-miniature__image-container {
  background-color: var(--trace-bg);
  border-bottom: 1px solid var(--trace-outline);
}

.product-miniature__title {
  font-weight: 700;
  color: var(--trace-ink);
}

/* Star ratings → Signal Orange */
.grade-stars .star-on,
.star-content .star.on,
.comments-note .grade-stars,
.star.on::before {
  color: var(--trace-orange) !important;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-control,
.form-select,
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="number"] {
  border: 1px solid var(--trace-outline);
  border-radius: 4px;
  box-shadow: none;
  font-family: var(--trace-font-body);
}

.form-control:focus,
.form-select:focus,
input:focus {
  border-color: var(--trace-blue);
  box-shadow: 0 0 0 1px var(--trace-blue);
}

/* Search bar in header */
.search-widget input[type="text"],
#search_widget input {
  background-color: var(--trace-bg);
  border-color: var(--trace-outline);
}

/* Prominent header search (Stitch places a large search between logo and
   actions). Let its column grow and enlarge the input on desktop. */
@media (min-width: 992px) {
  .header-bottom__row > .col-auto:has(> .search-widgets),
  .header-bottom__row > .col-auto:has(.search-widgets) {
    flex: 1 1 auto !important;
    max-width: 640px;
    margin-left: 48px !important;
  }
  .header-bottom__row .search-widgets { width: 100%; }
  .header-bottom__row .search-widgets .form-control,
  .header-bottom__row .search-widgets input[type="text"] {
    height: 48px;
    border-radius: 4px;
  }
}

/* ==========================================================================
   Header — top utility bar (dark) + main header (white)
   NB: stock theme.css sets --header-*-bg directly on the elements, so we set
   literal colors on the same selectors (not just :root).
   ========================================================================== */

.header-top {
  --header-top-bg: var(--trace-ink);
  --header-top-color: #C3C5D7;
  background-color: var(--trace-ink) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.header-top,
.header-top a:not(.dropdown-item),
.header-top .form-select,
.header-top select,
.header-top i {
  color: #C3C5D7 !important;
}

.header-top a:not(.dropdown-item):hover,
.header-top a:not(.dropdown-item):hover i {
  color: var(--trace-teal) !important;
}

.header-top .form-select,
.header-top select {
  background-color: transparent !important;
  border: 0 !important;
  font-family: var(--trace-font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Main header stays white; hairline bottom border */
.header-bottom {
  --header-bg: #ffffff;
  --header-bottom-border-bottom: 1px solid var(--trace-outline);
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--trace-outline) !important;
}

/* Main menu links: Barlow uppercase, blue active/hover */
.main-menu__tree__link {
  font-family: var(--trace-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--trace-ink) !important;
}
.main-menu__tree__item.current > .main-menu__tree__link,
.main-menu__tree__link:hover {
  color: var(--trace-blue) !important;
}
.main-menu__tree__item.current > .main-menu__tree__link {
  box-shadow: inset 0 -2px 0 0 var(--trace-blue);
}

/* Header action icons / cart badge */
.header-block__badge {
  background: var(--trace-orange) !important;
}

/* --- Nav band: category menu on its own full-bleed navy strip (desktop xl+) ---
   Stitch places the main navigation on a dark Ink-Navy band below the white
   logo/search band. We reflow the existing .main-menu onto its own row and
   extend a navy background to the viewport edges with a ::before, so no markup
   changes are needed. overflow-x:clip guards against 100vw scrollbar overflow. */
@media (min-width: 1200px) {
  html, body { overflow-x: clip; }

  .header-bottom__row { flex-wrap: wrap; }

  .header-bottom__row .main-menu {
    order: 50;
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 14px;
    position: relative;
  }
  .header-bottom__row .main-menu::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc((100% - 100vw) / 2);
    width: 100vw;
    background: var(--trace-ink);
    z-index: 0;
  }
  .header-bottom__row .main-menu > * {
    position: relative;
    z-index: 1;
  }
  .header-bottom__row .main-menu .js-menu-desktop { width: 100%; }

  .main-menu__tree { height: 52px; }

  /* Top-level links become white on navy; nested dropdown-items stay dark
     (they live in the white dropdown panel, matched only by the general rule) */
  .main-menu__tree__item > .main-menu__tree__link {
    color: #ffffff !important;
    height: 52px;
    display: flex;
    align-items: center;
    letter-spacing: 0.08em;
  }
  .main-menu__tree__item > .main-menu__tree__link .material-icons {
    color: #ffffff;
  }
  .main-menu__tree__item.current > .main-menu__tree__link,
  .main-menu__tree__item > .main-menu__tree__link:hover,
  .main-menu__tree__item:hover > .main-menu__tree__link {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 -2px 0 0 var(--trace-blue);
  }
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb,
.breadcrumb-item,
.breadcrumb a {
  font-family: var(--trace-font-mono);
  font-size: 0.8rem;
  color: var(--trace-on-variant);
}
.breadcrumb a { color: var(--trace-on-variant); }
.breadcrumb a:hover { color: var(--trace-blue); }

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination .page-item.active .page-link,
.page-list .current a {
  background-color: var(--trace-blue);
  border-color: var(--trace-blue);
  color: #ffffff;
}
.pagination .page-link { color: var(--trace-ink); }
.pagination .page-link:hover { color: var(--trace-blue); }

/* ==========================================================================
   Product page specifics
   ========================================================================== */

.product__name {
  font-size: 2rem;
  line-height: 1.05;
}

/* Data-sheet / feature tables → mono, hairline, lavender header rows */
.data-sheet dt,
.data-sheet dd,
.product-features dt,
.product-features dd,
table.table td,
table.table th {
  font-family: var(--trace-font-mono);
  font-size: 0.85rem;
}
.data-sheet dt,
.product-features dt {
  background-color: #ecedf9;
  color: var(--trace-ink);
}

/* Product info panels get the hairline-border card treatment */
.product-add-to-cart,
.product-information .card,
.product__prices {
  border-radius: 8px;
}

/* ==========================================================================
   Footer — dark navy, orange accent, Barlow uppercase headings
   ========================================================================== */

.footer {
  --footer-background-color: var(--trace-ink);
  --footer-heading-color: #ffffff;
  --footer-text-color: #C3C5D7;
  --footer-hover-color: var(--trace-teal);
}
.footer .footer__main {
  background: var(--trace-ink) !important;
}

.footer .h3,
.footer .footer__title,
.footer h3 {
  font-family: var(--trace-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff !important;
}

.footer a { color: #C3C5D7; }
.footer a:hover { color: var(--trace-teal); }

.footer .copyright {
  font-family: var(--trace-font-mono);
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Newsletter block */
.ps-emailsubscription input[type="text"],
.block-newsletter input[type="text"] {
  border-color: var(--trace-outline);
}

/* ==========================================================================
   Cart / checkout / account — style existing PrestaShop components only.
   Trace: hairline cards, mono numeric data, navy table headers, pill status,
   Barlow uppercase step/section titles. No markup added.
   ========================================================================== */

/* --- Cart page --- */
.cart-grid-body .card,
.cart-grid-right .card,
.cart-detailed,
.cart-summary {
  border: 1px solid var(--trace-outline);
  border-radius: 8px;
  box-shadow: none !important;
}

.cart-detailed-totals,
.cart-summary-line,
.cart-total {
  font-family: var(--trace-font-mono);
}
.cart-summary-line .label,
.cart-detailed-totals .label { font-family: var(--trace-font-body); }
.cart-summary-line .value,
.cart-total .value,
.cart-detailed-totals .value {
  font-family: var(--trace-font-mono);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--trace-ink);
}
.cart-total .value { font-size: 1.25rem; }

.cart-items .cart-item .product-line-info a,
.product-line-info .label {
  font-family: var(--trace-font-display);
  font-weight: 700;
  color: var(--trace-ink);
}
.product-price,
.cart__product-price,
.product-line__price,
.current-price-value { font-family: var(--trace-font-mono); }

/* --- Checkout multi-step --- */
.checkout-step .step-title,
.checkout-step .h3 {
  font-family: var(--trace-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--trace-ink);
}
.checkout-step {
  border: 1px solid var(--trace-outline);
  border-radius: 8px;
  box-shadow: none;
}
.checkout-step.-current,
.checkout-step.-current .content-wrapper--active {
  border-color: var(--trace-blue);
}
/* Step index bubble → blue */
.checkout-step .step-number,
.step-edit,
.checkout-step .step-title .done { color: var(--trace-blue); }

.order-checkout .card,
#order-summary-content,
.order-confirmation-table {
  border: 1px solid var(--trace-outline);
  border-radius: 8px;
  box-shadow: none !important;
}

/* Payment / condition option rows */
.payment-option,
.payment-options .payment-option {
  font-family: var(--trace-font-body);
}

/* --- Account dashboard (link cards) --- */
.customer-link__link,
.links a.col-lg-4,
.account-links a {
  display: block;
}
.customer-link__link .link-item,
.links .link-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 18px 20px;
  border: 1px solid var(--trace-outline) !important;
  border-radius: 8px;
  background: var(--trace-surface);
  box-shadow: none !important;
  font-family: var(--trace-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--trace-ink) !important;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.customer-link__link:hover .link-item,
.links .link-item:hover {
  border-color: var(--trace-blue) !important;
  color: var(--trace-blue) !important;
}
.customer-link__link .link-item i,
.links .link-item i { color: var(--trace-blue); }

/* --- Data / order tables: navy header, mono cells, hairline rows --- */
.table > thead,
table.table > thead,
#order-products thead,
.order-confirmation-table thead {
  background: var(--trace-ink);
}
.table > thead th,
table.table > thead th,
#order-products thead th,
.order-confirmation-table thead th {
  color: #ffffff;
  font-family: var(--trace-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-color: var(--trace-ink);
}
.table td,
.table th,
#order-products td,
.order-confirmation-table td {
  border-color: var(--trace-outline);
}
.table tbody td,
#order-products tbody td {
  font-family: var(--trace-font-mono);
  font-size: 0.85rem;
  vertical-align: middle;
}
/* Order status label pills */
.order-history .label,
.history-status .label,
.label-pill,
.order-status .label {
  border-radius: 9999px;
  font-family: var(--trace-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  padding: 0.25em 0.7em;
}

/* --- Authentication / login-register cards --- */
.login-form,
.register-form,
#authentication .card,
.page-authentication .card {
  border: 1px solid var(--trace-outline);
  border-radius: 8px;
  box-shadow: none !important;
}
.page-authentication .h3,
#authentication .h3 {
  font-family: var(--trace-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Home sections — Stitch-style trust bar, category showcase, best sellers.
   Added markup lives in templates/index.tpl (qt-* blocks).
   ========================================================================== */

.qt-section { }
.qt-sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 24px;
  flex-wrap: wrap;
}
.qt-sec-title {
  font-family: var(--trace-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 2rem;
  color: var(--trace-ink);
  margin: 0;
  line-height: 1;
}
.qt-sec-sub {
  font-family: var(--trace-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--trace-on-variant);
  margin: 6px 0 0;
}
.qt-sec-link {
  font-family: var(--trace-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--trace-blue);
  font-size: 0.9rem;
  white-space: nowrap;
}
.qt-sec-link:hover { text-decoration: underline; color: var(--trace-blue); }

/* --- Trust bar --- */
.qt-trust {
  background: var(--trace-surface);
  border-top: 1px solid var(--trace-outline);
  border-bottom: 1px solid var(--trace-outline);
}
.qt-trust__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 28px 0;
}
.qt-trust__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 24px;
  border-right: 1px solid var(--trace-outline);
}
.qt-trust__item:last-child { border-right: 0; }
.qt-trust__item .material-icons {
  color: var(--trace-blue);
  font-size: 30px;
}
.qt-trust__item span {
  font-family: var(--trace-font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--trace-ink);
}

/* --- Category showcase --- */
.qt-cats { padding: 72px 0; }
.qt-cats__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.qt-cat {
  display: block;
  background: var(--trace-surface);
  border: 1px solid var(--trace-outline);
  border-radius: 8px;
  padding: 20px;
  transition: border-color 0.2s ease;
}
.qt-cat:hover { border-color: var(--trace-blue); }
.qt-cat__img {
  aspect-ratio: 1 / 1;
  background: var(--trace-bg);
  border: 1px solid var(--trace-outline);
  border-radius: 4px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.qt-cat__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.3s ease, transform 0.4s ease;
}
.qt-cat:hover .qt-cat__img img { filter: grayscale(0); transform: scale(1.04); }
.qt-cat__label {
  display: block;
  font-family: var(--trace-font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--trace-on-variant);
  margin-bottom: 4px;
}
.qt-cat__name {
  font-family: var(--trace-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.05rem;
  color: var(--trace-ink);
  margin: 0;
  line-height: 1.1;
  transition: color 0.2s ease;
}
.qt-cat:hover .qt-cat__name { color: var(--trace-blue); }

/* --- Best sellers wrapper (widget renders .featured-products inside) --- */
.qt-best {
  padding: 72px 0;
  background: var(--trace-surface);
  border-top: 1px solid var(--trace-outline);
}
.qt-best .featured-products .products-section-title,
.qt-best .products-section-title { display: none; } /* we provide our own header */
.qt-best .featured-products { margin: 0; }

/* Responsive */
@media (max-width: 991px) {
  .qt-cats__grid { grid-template-columns: repeat(3, 1fr); }
  .qt-trust__grid { grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
  .qt-trust__item:nth-child(2n) { border-right: 0; }
}
@media (max-width: 575px) {
  .qt-cats__grid { grid-template-columns: repeat(2, 1fr); }
  .qt-sec-title { font-size: 1.6rem; }
}