/*
 * ht-shop custom overrides
 * Add all project-specific design fixes here.
 *
 * Order recommendation:
 * 1. Global variables
 * 2. Header / navigation
 * 3. Catalog / product cards
 * 4. Product page
 * 5. Footer
 * 6. Responsive fixes
 * 7. Dark theme fixes
 *
 * Example:
 * .ht-shop-header {
 *   backdrop-filter: blur(12px);
 * }
 *
 * [data-bs-theme="dark"] .ht-shop-card {
 *   border-color: rgba(255, 255, 255, 0.12);
 * }
 */

.ht-navicon-logo {
  max-height: 40px;
  width: auto;
}

:root {
  /* Brand palette */
  --ht-color-primary: #2e83ff;
  --ht-color-primary-rgb: 46, 131, 255;
  --ht-color-accent: #0e3a78;
  --ht-color-accent-rgb: 14, 58, 120;
  --ht-color-text: #4d5765;
  --ht-color-text-rgb: 77, 87, 101;
  --ht-color-heading: #0e121d;
  --ht-color-heading-rgb: 14, 18, 29;
  --ht-color-bg-soft: #f7f9fc;
  --ht-color-bg-soft-rgb: 247, 249, 252;
  --ht-color-white: #ffffff;
  --ht-color-white-rgb: 255, 255, 255;
  --ht-color-border: #d4dbe6;
  --ht-color-border-rgb: 212, 219, 230;
  --ht-slider-overlay-rgb: 232, 242, 255;

  /* Typography */
  --ht-font-base: "Public Sans", sans-serif;
  --ht-font-heading: "Exo", sans-serif;
  --ht-font-size-xs: 12px;
  --ht-font-size-sm: 14px;
  --ht-font-size-md: 16px;
  --ht-font-size-lg: 18px;
  --ht-font-size-xl: 22px;
  --ht-font-size-xxl: 32px;

  /* Sizing */
  --ht-radius-sm: 8px;
  --ht-radius-md: 10px;
  --ht-radius-lg: 16px;
  --ht-space-1: 4px;
  --ht-space-2: 8px;
  --ht-space-3: 12px;
  --ht-space-4: 16px;
  --ht-space-5: 24px;
  --ht-space-6: 32px;

  /* Template variable mapping */
  --builza-font: var(--ht-font-base);
  --builza-font-two: var(--ht-font-heading);
  --builza-base: var(--ht-color-primary);
  --builza-base-rgb: var(--ht-color-primary-rgb);
  --builza-black: var(--ht-color-heading);
  --builza-black-rgb: var(--ht-color-heading-rgb);
  --builza-gray: var(--ht-color-text);
  --builza-gray-rgb: var(--ht-color-text-rgb);
  --builza-white: var(--ht-color-white);
  --builza-white-rgb: var(--ht-color-white-rgb);
  --builza-primary: var(--ht-color-bg-soft);
  --builza-primary-rgb: var(--ht-color-bg-soft-rgb);
  --builza-bdr-color: var(--ht-color-border);
  --builza-bdr-color-rgb: var(--ht-color-border-rgb);
  --builza-bdr-radius: var(--ht-radius-md);
}

.ht-text-base {
  font-family: var(--ht-font-base);
  font-size: var(--ht-font-size-md);
}

.ht-text-heading {
  font-family: var(--ht-font-heading);
  color: var(--ht-color-heading);
}

.testimonial-one__custom-review-icon {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 10px;
}

.mobile-nav__content {
  background-color: var(--ht-color-accent);
}