/* Bazalet design system. Shared tokens and legacy component adapters. */
:root {
  --bz-color-canvas: #f3f5f6;
  --bz-color-surface: #ffffff;
  --bz-color-surface-soft: #edf2f4;
  --bz-color-text: #203139;
  --bz-color-text-muted: #667982;
  --bz-color-border: #cbd6db;
  --bz-color-primary: #365867;
  --bz-color-primary-hover: #294753;
  --bz-color-primary-active: #203a45;
  --bz-color-primary-contrast: #ffffff;
  --bz-color-secondary: #e8eef1;
  --bz-color-secondary-hover: #dbe5e9;
  --bz-color-danger: #b63f3f;
  --bz-color-success: #34704d;
  --bz-radius-sm: 6px;
  --bz-radius-md: 10px;
  --bz-radius-lg: 16px;
  --bz-control-height: 44px;
  --bz-shadow-sm: 0 2px 8px rgba(25, 45, 55, .10);
  --bz-shadow-md: 0 12px 32px rgba(25, 45, 55, .13);
  --bz-font-main: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --bz-focus-ring: 0 0 0 3px rgba(79, 116, 133, .24);
  /* Compatibility aliases used by earlier Bazalet components. */
  --bz-button: var(--bz-color-primary);
  --bz-button-hover: var(--bz-color-primary-hover);
}

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

.bz-skip-link {
  position: fixed;
  z-index: 100000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: var(--bz-radius-sm);
  background: var(--bz-color-primary);
  color: var(--bz-color-primary-contrast);
  transform: translateY(-160%);
}

.bz-skip-link:focus {
  color: var(--bz-color-primary-contrast);
  transform: translateY(0);
}

.baz-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.baz-social-links img {
  display: block;
  width: 36px;
  height: 36px;
}

/* Header contact and cart alignment. The email value still comes from OpenCart. */
.baz-header-contact,
.baz-header-cart {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: flex-end;
}

.baz-header-email {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #d3e2e8;
  border-radius: 999px;
  background: #f2f8fa;
  color: #2f657c;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.baz-header-email:hover,
.baz-header-email:focus {
  border-color: #6fa4b8;
  background: #e8f2f6;
  color: #244b5e;
  text-decoration: none;
}

.baz-header-email i {
  color: #4f8fa8;
  font-size: 17px;
}

.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  min-height: var(--bz-control-height);
  border-radius: var(--bz-radius-sm);
  font-family: var(--bz-font-main);
  font-weight: 700;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* UniShop uses Font Awesome <i> elements as the two quantity controls.
   Keep them on the icon font and split the shared 44px control height evenly. */
#product .quantity span .fa-plus.btn,
#product .quantity span .fa-minus.btn,
#cart .quantity span .fa-plus.btn,
#cart .quantity span .fa-minus.btn {
  display: block;
  width: 38px;
  min-width: 38px;
  height: calc(var(--bz-control-height) / 2);
  min-height: calc(var(--bz-control-height) / 2);
  margin: 0;
  padding: 0;
  border-radius: 0;
  font-family: FontAwesome !important;
  font-size: 11px !important;
  font-weight: normal;
  line-height: calc(var(--bz-control-height) / 2);
  text-align: center;
}

#product .quantity span .fa-plus.btn,
#cart .quantity span .fa-plus.btn {
  border-radius: 0 var(--bz-radius-sm) 0 0;
}

#product .quantity span .fa-minus.btn,
#cart .quantity span .fa-minus.btn {
  border-top: 0;
  border-radius: 0 0 var(--bz-radius-sm) 0;
}

.btn-primary,
button.btn-primary,
html .btn.btn-primary,
input.btn-primary[type="submit"],
.btn-success,
html .btn.btn-success,
.add_to_cart:not(.disabled),
.baz-contact-button,
#button-confirm,
#button-register,
#button-guest,
#button-login,
#button-cart {
  border-color: var(--bz-color-primary) !important;
  background-color: var(--bz-color-primary) !important;
  background-image: none !important;
  color: var(--bz-color-primary-contrast) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
html .btn.btn-primary:hover,
html .btn.btn-primary:focus,
html .btn.btn-primary:active,
html .btn.btn-primary.active,
.btn-success:hover,
.btn-success:focus,
.add_to_cart:not(.disabled):hover,
.add_to_cart:not(.disabled):focus,
.baz-contact-button:hover,
.baz-contact-button:focus,
#button-confirm:hover,
#button-confirm:focus,
#button-cart:hover,
#button-cart:focus {
  border-color: var(--bz-color-primary-hover) !important;
  background-color: var(--bz-color-primary-hover) !important;
  background-image: none !important;
  color: var(--bz-color-primary-contrast) !important;
}

.btn-default,
.btn-secondary {
  border-color: var(--bz-color-border);
  background: var(--bz-color-secondary);
  color: var(--bz-color-text);
}

.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  border-color: #b9c8cf;
  background: var(--bz-color-secondary-hover);
  color: var(--bz-color-text);
}

.btn-danger {
  border-color: var(--bz-color-danger);
  background: var(--bz-color-danger);
  color: #fff;
}

.btn:focus,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
.form-control:focus,
select:focus,
textarea:focus {
  outline: 0;
  box-shadow: var(--bz-focus-ring);
}

.btn[disabled],
.btn.disabled,
button[disabled],
input[disabled] {
  cursor: not-allowed;
  opacity: .58;
  box-shadow: none;
  transform: none;
}

.form-control,
select.form-control,
textarea.form-control {
  min-height: var(--bz-control-height);
  border-color: var(--bz-color-border);
  border-radius: var(--bz-radius-sm);
  color: var(--bz-color-text);
  font-family: var(--bz-font-main);
}

.panel,
.well,
.product-thumb,
.baz-card {
  border-color: var(--bz-color-border);
  border-radius: var(--bz-radius-md);
}

.alert {
  border-radius: var(--bz-radius-sm);
}

/* Accessible shared typography and controls. */
#div_search input[name="search"]::placeholder,
#input-search::placeholder {
  color: #5f6b70 !important;
  opacity: 1 !important;
}

.baz-main-links__eyebrow,
.baz-home-intro__eyebrow,
.baz-home-categories__heading span,
.baz-extra-heading span {
  color: #526247 !important;
}

.baz-trust-strip span,
.pagination_wrap .col-sm-6.text-left + .col-sm-6.text-right {
  color: #5f6b67 !important;
}

footer .baz-footer-heading,
#product .baz-section-heading {
  margin: 0 0 15px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 480px) {
  .baz-header-contact,
  .baz-header-cart {
    min-height: 58px;
  }

  .baz-header-email {
    min-height: 38px;
    padding: 9px 11px;
    font-size: 12px;
  }
}

/* Keep the legacy About layout inside the mobile viewport. */
@media (max-width: 768px) {
  .about-hero-inner {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .about-hero-panels {
    width: 100% !important;
    min-width: 0 !important;
  }

  .about-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .about-brands {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .about-brand-info,
  .about-brand-origin,
  .about-brand p {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .about-stat {
    min-width: 0;
    padding-right: 10px;
    padding-left: 10px;
  }
}