@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap');

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
:root {
  --bd-font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bd-font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Montserrat', var(--bd-font-sans), sans-serif;
  background-color: var(--bd-bg);
  color: var(--bd-text-primary);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Montserrat', var(--bd-font-heading), sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--bd-transition);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  outline: none;
  border: none;
}

button {
  cursor: pointer;
  background: none;
}

.bd-container {
  max-width: var(--bd-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}

/* ==========================================================================
   TOP ANNOUNCEMENT BAR
   ========================================================================== */
.bd-announcement-bar {
  background: #000000;
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  height: var(--bd-announcement-height);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 50;
  border-bottom: 2px solid #fff100;
}

.bd-announcement-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.bd-announcement-badge {
  background-color: #fff100;
  color: #000000;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: var(--bd-radius-full);
  margin-right: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bd-announcement-links {
  display: flex;
  gap: 20px;
}

.bd-announcement-links a:hover {
  color: #fff100;
  text-decoration: underline;
}

/* ==========================================================================
   HEADER & STICKY NAVIGATION (UI KIT SPECIFICATION)
   ========================================================================== */
.bd-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--bd-border);
  transition: var(--bd-transition);
}

.bd-site-header.is-scrolled {
  box-shadow: var(--bd-shadow-md);
}

.bd-header-inner {
  height: var(--bd-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Left: Logo & Greeting */
.bd-header-left {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.bd-brand-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.bd-brand-logo img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.bd-brand-text-logo {
  font-weight: 800;
  font-size: 1.625rem;
  letter-spacing: -0.03em;
  color: #111111;
}

.bd-yellow-dot {
  color: var(--bd-primary);
}

.bd-header-greeting {
  display: flex;
  flex-direction: column;
  border-left: 1.5px solid var(--bd-border);
  padding-left: 20px;
}

.bd-greeting-sub {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bd-text-muted);
  line-height: 1.2;
}

.bd-greeting-title {
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--bd-text-primary);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Center: UI Kit Rounded Pill Search */
.bd-search-wrapper {
  flex: 1;
  max-width: 480px;
  position: relative;
}

.bd-search-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.bd-search-icon-left {
  position: absolute;
  left: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bd-text-muted);
  pointer-events: none;
}

.bd-search-input {
  width: 100%;
  height: 46px;
  padding: 0 20px 0 46px;
  background-color: var(--bd-surface-subtle);
  border: 1.5px solid var(--bd-border);
  border-radius: var(--bd-radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bd-text-primary);
  transition: var(--bd-transition);
}

.bd-search-input::placeholder {
  color: var(--bd-text-muted);
}

.bd-search-input:focus {
  background-color: #ffffff;
  border-color: #111111;
  box-shadow: 0 0 0 3px var(--bd-primary-glow);
}

/* Right: Notifications, User Profile Pill, Cart */
.bd-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.bd-notify-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--bd-surface-subtle);
  border: 1.5px solid var(--bd-border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--bd-text-secondary);
  transition: var(--bd-transition);
  cursor: pointer;
}

.bd-notify-btn:hover {
  background-color: #ffffff;
  border-color: #111111;
  color: #111111;
}

.bd-notify-badge {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #000000;
  border: 1.5px solid var(--bd-primary);
}

/* User Profile Pill (Signature UI Kit Element) */
.bd-user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #ffffff;
  border: 1.5px solid var(--bd-border);
  padding: 5px 14px 5px 6px;
  border-radius: var(--bd-radius-full);
  box-shadow: var(--bd-shadow-xs);
  transition: var(--bd-transition);
  cursor: pointer;
}

.bd-user-pill:hover {
  border-color: #111111;
  background-color: var(--bd-surface-subtle);
}

.bd-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--bd-primary);
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}

.bd-user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.bd-user-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--bd-text-primary);
}

.bd-user-role {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--bd-text-muted);
}

.bd-user-chevron {
  display: flex;
  align-items: center;
  color: var(--bd-text-muted);
  margin-left: 2px;
}

/* Cart Trigger Pill Button */
.bd-cart-pill-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #111111;
  color: #ffffff;
  padding: 8px 18px;
  border-radius: var(--bd-radius-full);
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: var(--bd-shadow-xs);
  transition: var(--bd-transition);
}

.bd-cart-pill-btn:hover {
  background-color: #222222;
  color: var(--bd-primary);
  transform: translateY(-1px);
}

.bd-cart-icon-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-cart-counter {
  position: absolute;
  top: -8px;
  right: -10px;
  background-color: var(--bd-primary);
  color: #000000;
  font-size: 0.6875rem;
  font-weight: 800;
  height: 18px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--bd-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #111111;
}

/* ==========================================================================
   UI KIT NAVIGATION BAR (SOLID YELLOW PILL ACTIVE STATE)
   ========================================================================== */
.bd-nav-bar {
  background-color: #ffffff;
  border-bottom: 1px solid var(--bd-border);
}

.bd-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 8px;
}

.bd-nav-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}

.bd-nav-item {
  position: relative;
}

.bd-nav-item>a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bd-text-muted);
  border-radius: var(--bd-radius-md);
  transition: var(--bd-transition);
}

.bd-nav-item>a:hover {
  background-color: var(--bd-surface-subtle);
  color: var(--bd-text-primary);
}

/* The signature Yellow Pill Active Nav from UI Kit */
.bd-nav-item.active>a {
  background-color: var(--bd-primary) !important;
  color: #000000 !important;
  font-weight: 800 !important;
  border-radius: var(--bd-radius-md);
  box-shadow: 0 4px 14px var(--bd-primary-glow);
}

.bd-nav-item.active>a svg {
  stroke: #000000;
}

/* Dropdown Indicator & Animations */
.bd-nav-chevron {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  margin-left: 2px;
}

.bd-nav-item.bd-has-dropdown:hover .bd-nav-chevron,
.bd-nav-item.bd-has-dropdown:focus-within .bd-nav-chevron {
  transform: rotate(180deg);
}

/* Floating Submenu Dropdown Card */
.bd-nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  background: #ffffff;
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.12), 0 2px 8px rgba(17, 24, 39, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease;
  pointer-events: none;
}

/* Invisible hover bridge */
.bd-nav-dropdown::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.bd-nav-item.bd-has-dropdown:hover .bd-nav-dropdown,
.bd-nav-item.bd-has-dropdown:focus-within .bd-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.bd-nav-dropdown-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
}

.bd-dropdown-divider {
  height: 1px;
  background-color: var(--bd-border);
  margin: 6px 8px;
  list-style: none;
}

.bd-dropdown-link {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--bd-text-secondary) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: var(--bd-transition) !important;
}

.bd-dropdown-link:hover {
  background-color: var(--bd-surface-subtle) !important;
  color: #111111 !important;
  transform: translateX(4px);
}

.bd-dropdown-link.is-active {
  background-color: var(--bd-surface-subtle) !important;
  color: #111111 !important;
  font-weight: 800 !important;
}

.bd-dropdown-name-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #111111;
}

.bd-dropdown-count {
  font-size: 0.6875rem;
  font-weight: 800;
  background-color: var(--bd-surface-subtle);
  color: var(--bd-text-muted);
  padding: 2px 8px;
  border-radius: var(--bd-radius-full);
  transition: var(--bd-transition);
}

.bd-dropdown-link:hover .bd-dropdown-count {
  background-color: #111111;
  color: #ffffff;
}

.bd-dropdown-badge {
  font-size: 0.6875rem;
  font-weight: 800;
  background-color: var(--bd-primary);
  color: #000000;
  padding: 3px 8px;
  border-radius: var(--bd-radius-full);
}

.bd-nav-deals a {
  color: var(--bd-danger);
  font-weight: 700;
}

.bd-fire-icon {
  font-size: 1rem;
}

.bd-nav-badge-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--bd-surface-subtle);
  border: 1px solid var(--bd-border);
  padding: 6px 14px;
  border-radius: var(--bd-radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bd-text-secondary);
}

.bd-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

/* ==========================================================================
   CANVAS & HERO SECTION (UI KIT FLOATING CARD ARCHITECTURE)
   ========================================================================== */
.bd-main-canvas {
  background-color: var(--bd-bg);
  min-height: 100vh;
  padding-bottom: 64px;
}

/* ==========================================================================
   HERO SPLIT SECTION (MAIN SLIDER + RIGHT PROMO BANNER)
   ========================================================================== */
.bd-hero-split-section {
  padding: 24px 0 16px;
}

.bd-hero-split-grid {
  display: grid;
  grid-template-columns: 2.15fr 1fr;
  gap: 20px;
  align-items: stretch;
}

/* Left Column: Interactive Hero Slider Card */
.bd-hero-slider-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background-color: #f1f4f7;
  min-height: 420px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  --slider-speed: 0.8s;
}

.bd-hero-slides-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
}

.bd-hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  transition: opacity var(--slider-speed, 0.8s) cubic-bezier(0.25, 1, 0.5, 1),
    visibility var(--slider-speed, 0.8s) cubic-bezier(0.25, 1, 0.5, 1),
    transform var(--slider-speed, 0.8s) cubic-bezier(0.25, 1, 0.5, 1);
  transform: scale(0.985);
  pointer-events: none;
  z-index: 1;
}

.bd-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}

.bd-hero-slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  z-index: 1;
  transform: scale(1);
  transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.bd-hero-slide.is-active .bd-hero-slide-bg {
  transform: scale(1.04);
}

.bd-hero-slide-content {
  position: relative;
  z-index: 2;
  max-width: 470px;
  padding: 48px 44px;
}

.bd-hero-slide-title {
  font-size: 2.375rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: #111111;
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--slider-speed, 0.8s) cubic-bezier(0.16, 1, 0.3, 1),
    transform var(--slider-speed, 0.8s) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.bd-hero-slide.is-active .bd-hero-slide-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}

.bd-hero-slide-title strong {
  font-weight: 900;
  display: block;
}

.bd-hero-slide-desc {
  font-size: 0.9375rem;
  color: #4b5563;
  line-height: 1.55;
  margin-bottom: 26px;
  max-width: 390px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--slider-speed, 0.8s) cubic-bezier(0.16, 1, 0.3, 1),
    transform var(--slider-speed, 0.8s) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.bd-hero-slide.is-active .bd-hero-slide-desc {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.22s;
}

.bd-hero-slide .bd-hero-btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #111111;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--slider-speed, 0.8s) cubic-bezier(0.16, 1, 0.3, 1),
    transform var(--slider-speed, 0.8s) cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s ease, box-shadow 0.2s ease;
  will-change: transform, opacity;
}

.bd-hero-slide.is-active .bd-hero-btn-white {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.32s;
}

.bd-hero-btn-white:hover {
  background: #111111;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Slider Controls: Pagination Dots + Arrow Buttons */
.bd-slider-controls {
  position: absolute;
  bottom: 20px;
  right: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bd-slider-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 10px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.bd-slide-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: #cbd5e1;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  outline: none;
}

.bd-slide-dot:hover {
  background: #94a3b8;
}

.bd-slide-dot.is-active {
  width: 22px;
  background: #111111;
  border-radius: 9999px;
}

.bd-slider-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #111111;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.bd-slider-btn:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.bd-slider-btn-next {
  background: #FFF000 !important;
  color: #111111 !important;
  border-color: #FFF000 !important;
  box-shadow: 0 3px 10px rgba(255, 240, 0, 0.4);
}

.bd-slider-btn-next:hover {
  background: #ffea00 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 240, 0, 0.5);
}

/* Right Column: Yellow Sale / Promo Banner Card */
.bd-hero-promo-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(135deg, #FFF000 0%, #FFD700 40%, #FBBF24 100%);
  min-height: 420px;
  padding: 44px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 8px 24px rgba(255, 240, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.bd-promo-content {
  position: relative;
  z-index: 2;
  max-width: 240px;
}

.bd-promo-title {
  font-size: 2.125rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #000000;
  margin-bottom: 12px;
}

.bd-promo-subtitle {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 26px;
  line-height: 1.45;
}

.bd-promo-img-wrapper {
  position: absolute;
  right: -25px;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

.bd-promo-image {
  max-width: 290px;
  max-height: 250px;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.12));
}

/* ==========================================================================
   BROWSE BY CATEGORY (CAROUSEL MATCHING SCREENSHOT)
   ========================================================================== */
.bd-category-carousel-section {
  padding: 16px 0 36px;
}

.bd-cat-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.bd-cat-title-group {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.bd-cat-section-title {
  font-size: 1.875rem;
  font-weight: 800;
  color: #111111;
  letter-spacing: -0.02em;
  margin: 0;
}

.bd-cat-all-link {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--bd-text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--bd-transition);
}

.bd-cat-all-link:hover {
  color: #111111;
}

.bd-cat-nav-controls {
  display: flex;
  gap: 8px;
}

.bd-cat-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--bd-border);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #111111;
  transition: var(--bd-transition);
}

.bd-cat-nav-btn:hover {
  background-color: var(--bd-surface-subtle);
  transform: translateY(-1px);
}

.bd-cat-nav-btn.next {
  background: var(--bd-primary) !important;
  border-color: var(--bd-primary) !important;
  color: #000000 !important;
  box-shadow: 0 4px 12px var(--bd-primary-glow);
}

.bd-cat-track-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 4px 18px;
  -webkit-overflow-scrolling: touch;
}

.bd-cat-track-wrapper::-webkit-scrollbar {
  display: none;
}

.bd-cat-track {
  display: flex;
  gap: 16px;
  width: max-content;
}

.bd-cat-item-card {
  flex: 0 0 144px;
  background: #ffffff;
  border-radius: 18px;
  padding: 24px 14px 20px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.02);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bd-cat-item-card:hover,
.bd-cat-item-card.is-active {
  transform: translateY(-8px);
  box-shadow: 0 16px 32px rgba(17, 24, 39, 0.08);
  border-color: var(--bd-primary);
}

.bd-cat-icon-box {
  width: 68px;
  height: 60px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-cat-icon-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.bd-cat-item-card:hover .bd-cat-icon-box img {
  transform: scale(1.08);
}

.bd-cat-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111111;
  line-height: 1.35;
}

@media (max-width: 1024px) {
  .bd-hero-split-grid {
    grid-template-columns: 1.6fr 1fr;
  }
}

@media (max-width: 820px) {
  .bd-hero-split-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .bd-hero-slide-title {
    font-size: 1.875rem;
  }

  .bd-hero-promo-card {
    min-height: 300px;
    padding: 32px 24px;
  }
}

/* ==========================================================================
   QUICK METRICS GRID (UI KIT STATS WIDGETS)
   ========================================================================== */
.bd-metrics-section {
  padding: 12px 0 24px;
}

.bd-quick-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.bd-metric-card {
  background: var(--bd-card-bg);
  border-radius: var(--bd-radius-lg);
  padding: 26px;
  box-shadow: var(--bd-shadow-xs);
  border: 1px solid rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  transition: var(--bd-transition);
}

.bd-metric-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bd-shadow-md);
}

.bd-metric-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.bd-metric-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bd-metric-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--bd-text-primary);
  margin-top: 2px;
}

.bd-metric-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--bd-surface-subtle);
  border: 1px solid var(--bd-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 800;
  color: #111111;
  transition: var(--bd-transition);
}

.bd-metric-card:hover .bd-metric-arrow {
  background-color: var(--bd-primary);
  border-color: var(--bd-primary);
}

.bd-metric-val {
  font-size: 1.75rem;
  font-weight: 800;
  color: #111111;
  margin: 16px 0 12px;
  letter-spacing: -0.02em;
}

.bd-metric-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--bd-border-subtle);
}

.bd-metric-sub {
  font-size: 0.8125rem;
  color: var(--bd-text-muted);
}

.bd-btn-yellow-small {
  background-color: var(--bd-primary);
  color: #000000;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 10px;
  transition: var(--bd-transition);
}

.bd-btn-yellow-small:hover {
  background-color: var(--bd-primary-hover);
  transform: scale(1.04);
}

.bd-btn-black-small {
  background-color: #111111;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 10px;
  transition: var(--bd-transition);
}

.bd-btn-black-small:hover {
  background-color: #222222;
  color: var(--bd-primary);
  transform: scale(1.04);
}

/* ==========================================================================
   CATEGORY SHOWCASE GRID (UI KIT FLOATING CARDS)
   ========================================================================== */
.bd-section {
  padding: 32px 0;
}

.bd-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
}

.bd-subhead-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bd-text-muted);
  margin-bottom: 4px;
}

.bd-section-title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bd-text-primary);
}

.bd-section-desc {
  font-size: 0.9375rem;
  color: var(--bd-text-secondary);
  margin-top: 4px;
}

.bd-view-all-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #111111;
  padding: 8px 16px;
  background-color: #ffffff;
  border: 1px solid var(--bd-border);
  border-radius: var(--bd-radius-full);
  box-shadow: var(--bd-shadow-xs);
  transition: var(--bd-transition);
}

.bd-view-all-link:hover {
  background-color: var(--bd-primary);
  border-color: var(--bd-primary);
}

.bd-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.bd-category-card {
  background: var(--bd-card-bg);
  border-radius: var(--bd-radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--bd-shadow-xs);
  border: 1px solid rgba(0, 0, 0, 0.03);
  transition: var(--bd-transition);
}

.bd-category-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--bd-shadow-md);
  border-color: rgba(0, 0, 0, 0.06);
}

.bd-cat-img-wrapper {
  width: 130px;
  height: 130px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--bd-surface-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  transition: var(--bd-transition);
}

.bd-category-card:hover .bd-cat-img-wrapper {
  background: #fffbeb;
  transform: scale(1.05);
}

.bd-cat-img-wrapper img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.bd-cat-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--bd-text-primary);
  margin-bottom: 8px;
}

.bd-cat-pill {
  font-size: 0.75rem;
  font-weight: 700;
  color: #111111;
  background-color: var(--bd-surface-subtle);
  border: 1px solid var(--bd-border);
  padding: 4px 14px;
  border-radius: var(--bd-radius-full);
  transition: var(--bd-transition);
}

.bd-category-card:hover .bd-cat-pill {
  background-color: var(--bd-primary);
  border-color: var(--bd-primary);
}

/* ==========================================================================
   PRODUCT CARDS & SIGNATURE UI KIT DUAL ACTION PILL
   ========================================================================== */
.bd-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.bd-product-card {
  background: var(--bd-card-bg);
  border-radius: var(--bd-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--bd-shadow-xs);
  border: 1px solid rgba(0, 0, 0, 0.03);
  transition: var(--bd-transition);
}

.bd-product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--bd-shadow-lg);
}

.bd-product-thumb {
  position: relative;
  background: #ffffff;
  padding: 16px 12px;
  height: 260px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--bd-border-subtle);
  border-top-left-radius: var(--bd-radius-lg);
  border-top-right-radius: var(--bd-radius-lg);
}

.bd-product-thumb-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.bd-product-thumb img {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bd-product-card:hover .bd-product-thumb img {
  transform: scale(1.05);
}

.bd-product-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}

.bd-badge-sale {
  background-color: #111111;
  color: var(--bd-primary);
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--bd-radius-sm);
  letter-spacing: 0.04em;
}

.bd-product-details {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.bd-product-category {
  font-size: 0.6875rem;
  color: var(--bd-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.bd-product-title {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bd-text-primary);
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.8em;
}

.bd-product-title:hover {
  color: var(--bd-text-secondary);
}

/* THE SIGNATURE UI KIT DUAL ACTION PILL WIDGET: [ Black Price Pill ] [ Yellow Action Pill ] */
.bd-product-action-container {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.bd-price-pill {
  flex: 1;
  background-color: #111111;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.875rem;
  padding: 9px 12px;
  border-radius: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bd-price-pill ins {
  text-decoration: none;
  color: #ffffff;
}

.bd-price-pill del {
  color: #8e95a2;
  font-size: 0.75rem;
  margin-right: 6px;
}

.bd-cart-pill-action {
  background-color: var(--bd-primary);
  color: #000000;
  font-weight: 800;
  font-size: 0.8125rem;
  padding: 9px 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--bd-transition);
  white-space: nowrap;
}

.bd-cart-pill-action:hover {
  background-color: var(--bd-primary-hover);
  transform: scale(1.04);
}

/* ==========================================================================
   FLASH DEALS SECTION (DYNAMIC WOOCOMMERCE OFFERS)
   ========================================================================== */
.bd-flash-deals-section {
  padding: 24px 0 36px;
}

.bd-flash-deals-box {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e9ecef;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* Header */
.bd-flash-deals-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #f0f0f0;
  gap: 16px;
  flex-wrap: wrap;
}

.bd-flash-deals-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.bd-flash-deals-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #111827;
  margin: 0;
  letter-spacing: -0.02em;
  font-family: inherit;
}

.bd-flash-deals-countdown-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.bd-flash-deals-ends-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
}

/* Yellow timer badge with red numbers matching reference */
.bd-flash-deals-timer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFF000;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.bd-flash-deals-timer-badge .timer-num {
  color: #e02020;
  font-weight: 900;
  min-width: 18px;
  text-align: center;
  display: inline-block;
}

.bd-flash-deals-timer-badge .timer-unit {
  color: #111827;
  font-weight: 700;
}

/* Header Right: View All & Navigation */
.bd-flash-deals-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.bd-flash-deals-view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #0066cc;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.bd-flash-deals-view-all:hover {
  color: #004499;
  text-decoration: underline;
  transform: translateX(2px);
}

.bd-flash-deals-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bd-flash-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.bd-flash-nav-btn:hover {
  background: #FFF000;
  border-color: #FFF000;
  color: #111111;
  transform: scale(1.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Slider Track & Columns */
.bd-flash-deals-slider-wrapper {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  position: relative;
  width: 100%;
}

.bd-flash-deals-slider-wrapper::-webkit-scrollbar {
  display: none;
}

.bd-flash-deals-slider-wrapper:active {
  cursor: grabbing;
}

.bd-flash-deals-track {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.bd-flash-deals-col {
  flex: 0 0 33.333333%;
  min-width: 33.333333%;
  max-width: 33.333333%;
  border-right: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.bd-flash-deals-col:last-child {
  border-right: none;
}

/* Individual Deal Card */
.bd-flash-deal-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 24px 20px;
  gap: 16px;
  flex: 1;
  transition: background-color 0.2s ease;
  position: relative;
}

.bd-flash-deal-card:hover {
  background-color: #fafbfc;
}

.bd-flash-deal-card.has-bottom-divider {
  border-bottom: 1px solid #f0f0f0;
}

/* Image Column */
.bd-flash-deal-img-col {
  flex: 0 0 110px;
  width: 110px;
  height: 110px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-flash-deal-img-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  position: relative;
}

.bd-flash-deal-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.25s ease;
  display: block;
}

.bd-flash-deal-card:hover .bd-flash-deal-img {
  transform: scale(1.06);
}

/* Discount Pill Badge */
.bd-flash-deal-badge {
  position: absolute;
  top: 0;
  left: 0;
  background: #FFF000;
  color: #111111;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  z-index: 2;
  white-space: nowrap;
  line-height: 1.2;
}

/* Info Column */
.bd-flash-deal-info-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bd-flash-deal-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.bd-flash-deal-title a {
  color: #0066cc;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.bd-flash-deal-title a:hover {
  color: #004499;
  text-decoration: underline;
}

/* Rating Stars */
.bd-flash-deal-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
}

.bd-flash-rating-stars {
  display: inline-flex;
  gap: 1px;
}

.bd-flash-rating-stars .bd-star {
  font-size: 0.875rem;
  line-height: 1;
}

.bd-flash-rating-stars .bd-star.is-filled {
  color: #f59e0b;
}

.bd-flash-rating-stars .bd-star.is-empty {
  color: #d1d5db;
}

.bd-flash-review-count {
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Price */
.bd-flash-deal-price {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.bd-flash-deal-price del {
  color: #9ca3af;
  font-weight: 400;
  font-size: 0.8125rem;
  text-decoration: line-through;
}

.bd-flash-deal-price ins {
  color: #dc2626;
  text-decoration: none;
  font-weight: 800;
}

/* Sold Progress Bar */
.bd-flash-deal-progress-box {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bd-flash-progress-bar {
  width: 100%;
  height: 6px;
  background-color: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}

.bd-flash-progress-fill {
  height: 100%;
  background-color: #f59e0b;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.bd-flash-sold-text {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111827;
}

@media (max-width: 991px) {
  .bd-flash-deals-col {
    flex: 0 0 50%;
    min-width: 50%;
    max-width: 50%;
  }
}

/* ==========================================================================
   AUTHORIZED BRANDS SECTION (DYNAMIC LOGO SLIDER)
   ========================================================================== */
.bd-brands-section {
  padding: 24px 0 52px;
}

.bd-brands-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
}

.bd-brands-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bd-brands-eyebrow {
  font-size: 0.75rem;
  font-weight: 800;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bd-brands-heading {
  font-size: 1.5rem;
  font-weight: 900;
  color: #111111;
  letter-spacing: -0.02em;
  margin: 0;
}

.bd-brands-nav-controls {
  display: flex;
  gap: 8px;
}

.bd-brands-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1.5px solid #EEF2F6;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #111111;
  transition: all 0.2s ease;
}

.bd-brands-nav-btn:hover {
  background: #FFF000;
  border-color: #FFF000;
  transform: translateY(-1px);
}

.bd-brands-slider-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  padding: 6px 2px 16px;
  cursor: grab;
}

.bd-brands-slider-wrapper::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.bd-brands-slider-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px;
  width: max-content;
  user-select: none;
  -webkit-user-select: none;
}

/* Brand Slide Card */
.bd-brand-slide-card {
  flex: 0 0 190px;
  width: 190px;
  height: 104px;
  background: #FFFFFF;
  border: 1.5px solid #EEF2F6;
  border-radius: 20px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.bd-brand-slide-card:hover {
  transform: translateY(-4px);
  border-color: #FFF000;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.bd-brand-slide-card:active {
  transform: scale(0.96);
}

.bd-brand-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  pointer-events: none;
}

.bd-brand-slide-logo {
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
  filter: grayscale(15%);
  transition: filter 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.bd-brand-slide-card:hover .bd-brand-slide-logo {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* Typographic Logo Fallback when no image uploaded */
.bd-brand-text-logo-card {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.bd-brand-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FFF000;
  box-shadow: 0 0 0 2px #111111;
  flex-shrink: 0;
}

.bd-brand-card-name {
  font-size: 0.9375rem;
  font-weight: 900;
  color: #111111;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bd-brand-slide-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.03em;
  margin-top: 6px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  pointer-events: none;
}

.bd-brand-slide-card:hover .bd-brand-slide-badge {
  color: #111111;
}

/* ==========================================================================
   FREE SHIPPING PROGRESS & CART DRAWER
   ========================================================================== */
.bd-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: var(--bd-transition);
}

.bd-drawer-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.bd-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 440px;
  height: 100vh;
  background: var(--bd-card-bg);
  box-shadow: var(--bd-shadow-xl);
  border-left: 2px solid #000000;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.bd-cart-drawer.is-active {
  transform: translateX(0);
}

.bd-drawer-header {
  padding: 20px 24px;
  border-bottom: 2px solid #000000;
  background: #000000;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bd-drawer-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
}

.bd-drawer-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: var(--bd-transition);
}

.bd-drawer-close:hover {
  background: #fff100;
  color: #000000;
}

/* Free Shipping Meter */
.bd-shipping-meter-box {
  background: #fefce8;
  border-bottom: 1.5px solid #fef08a;
  padding: 16px 24px;
}

.bd-shipping-meter-text {
  font-size: 0.875rem;
  font-weight: 700;
  color: #713f12;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bd-shipping-progress-track {
  height: 8px;
  background: #e4e4e7;
  border-radius: 999px;
  overflow: hidden;
}

.bd-shipping-progress-fill {
  height: 100%;
  background: #000000;
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* Cart Items List */
.bd-drawer-items {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bd-drawer-item {
  display: flex;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bd-border-subtle);
}

.bd-drawer-item-img {
  width: 72px;
  height: 72px;
  background: var(--bd-surface-subtle);
  border-radius: var(--bd-radius-md);
  padding: 6px;
  flex-shrink: 0;
}

.bd-drawer-item-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bd-drawer-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.bd-drawer-item-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--bd-secondary);
  margin-bottom: 4px;
  line-height: 1.3;
}

.bd-drawer-item-price {
  font-size: 0.875rem;
  font-weight: 800;
  color: #000000;
  margin-bottom: 8px;
}

.bd-drawer-item-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--bd-border);
  border-radius: var(--bd-radius-sm);
  width: fit-content;
}

.bd-qty-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--bd-text-secondary);
}

.bd-qty-val {
  width: 32px;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
}

.bd-drawer-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--bd-border-subtle);
  background: var(--bd-card-bg);
}

.bd-drawer-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 1.0625rem;
  font-weight: 700;
}

.bd-drawer-subtotal-amount {
  color: #000000;
  font-size: 1.25rem;
  font-weight: 800;
}

.bd-checkout-btn {
  width: 100%;
  background: var(--bd-primary);
  color: #000000;
  border: none;
  padding: 14px;
  border-radius: var(--bd-radius-md);
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 14px var(--bd-primary-glow);
  transition: var(--bd-transition);
}

.bd-checkout-btn:hover {
  background: var(--bd-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--bd-primary-glow);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.bd-site-footer {
  margin-top: auto;
  background: var(--bd-secondary);
  color: #cbd5e1;
  padding: 64px 0 32px 0;
}

.bd-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 48px;
}

.bd-footer-brand p {
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 16px 0 24px 0;
  color: #94a3b8;
}

.bd-footer-title {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}

.bd-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bd-footer-links a {
  font-size: 0.875rem;
  color: #94a3b8;
}

.bd-footer-links a:hover {
  color: var(--bd-primary);
}

.bd-footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: #64748b;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .bd-hero-grid {
    grid-template-columns: 1fr;
  }

  .bd-category-grid,
  .bd-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bd-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .bd-promo-ui-card {
    padding: 32px;
    gap: 24px;
    grid-template-columns: 1.1fr 0.9fr;
  }
}

@media (max-width: 640px) {

  .bd-announcement-links,
  .bd-nav-bar {
    display: none;
  }

  .bd-hero-title {
    font-size: 2.25rem;
  }

  .bd-category-grid {
    grid-template-columns: 1fr;
  }

  .bd-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .bd-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   WOOCOMMERCE CORE TEMPLATE STYLING
   ========================================================================== */
.woocommerce .woocommerce-breadcrumb {
  margin-bottom: 24px;
  font-size: 0.875rem;
  color: var(--bd-text-muted);
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--bd-text-secondary);
}

.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--bd-primary);
}

/* Shop Products Loop */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 24px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 32px 0 !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
}

.woocommerce ul.products li.product {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  border-radius: var(--bd-radius-lg) !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: var(--bd-transition) !important;
  box-shadow: var(--bd-shadow-xs) !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--bd-shadow-lg) !important;
}

.woocommerce ul.products li.product a img {
  border-radius: var(--bd-radius-md);
  margin-bottom: 16px !important;
  height: 240px !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: var(--bd-text-primary) !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

.woocommerce ul.products li.product .price {
  font-size: 1.125rem !important;
  font-weight: 800 !important;
  color: #111111 !important;
  margin-bottom: 16px !important;
}

.woocommerce ul.products li.product .button {
  background: var(--bd-primary) !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 10px 20px !important;
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  text-align: center !important;
  box-shadow: 0 4px 14px var(--bd-primary-glow) !important;
  transition: var(--bd-transition) !important;
  margin-top: auto !important;
}

.woocommerce ul.products li.product .button:hover {
  background: var(--bd-primary-hover) !important;
  transform: scale(1.03) !important;
}

/* Single Product Summary */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}

@media (max-width: 768px) {
  .woocommerce div.product {
    grid-template-columns: 1fr;
  }
}

.woocommerce div.product div.images {
  margin-bottom: 0 !important;
  width: 100% !important;
  float: none !important;
  border-radius: var(--bd-radius-xl) !important;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: var(--bd-shadow-md);
  padding: 32px;
}

.woocommerce div.product div.summary {
  width: 100% !important;
  float: none !important;
}

.woocommerce div.product .product_title {
  font-size: 2.25rem;
  font-weight: 500;
  color: var(--bd-text-primary);
  line-height: 1.25;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.woocommerce div.product p.price {
  font-size: 1.75rem;
  font-weight: 800;
  color: #111111;
  margin-bottom: 24px;
}

.woocommerce div.product form.cart {
  margin: 32px 0;
  display: flex;
  gap: 16px;
  align-items: center;
}

.woocommerce div.product form.cart .quantity input.qty {
  width: 68px;
  height: 48px;
  border: 1.5px solid var(--bd-border);
  border-radius: 12px;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 800;
  background: #ffffff;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
  background: var(--bd-primary) !important;
  color: #000000 !important;
  border: none !important;
  height: 48px;
  padding: 0 32px;
  border-radius: 14px !important;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 4px 14px var(--bd-primary-glow);
  transition: var(--bd-transition);
  cursor: pointer;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: var(--bd-primary-hover) !important;
  transform: translateY(-2px);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 2px solid var(--bd-border);
  display: flex;
  gap: 32px;
  padding: 0;
  margin-bottom: 32px;
  list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  padding: 12px 0;
  margin: 0;
  background: none;
  border: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bd-text-secondary);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: #000000;
  border-bottom: 3px solid var(--bd-primary);
}

/* Cart Table */
.woocommerce table.shop_table {
  border: 1px solid var(--bd-border-subtle);
  border-radius: var(--bd-radius-lg);
  background: #ffffff;
  overflow: hidden;
  border-collapse: separate;
  width: 100%;
  margin-bottom: 32px;
}

.woocommerce table.shop_table th {
  background: var(--bd-surface-subtle);
  padding: 16px 20px;
  font-weight: 700;
  color: var(--bd-secondary);
}

.woocommerce table.shop_table td {
  padding: 18px 20px;
  border-top: 1px solid var(--bd-border-subtle);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 16px 24px;
  border-radius: var(--bd-radius-md);
  margin-bottom: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.woocommerce-message {
  background: #f0fdf4;
  border-left: 4px solid #10b981;
  color: #166534;
}

.woocommerce-error {
  background: #fef2f2;
  border-left: 4px solid var(--bd-danger);
  color: #991b1b;
}

.woocommerce-info {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  color: #1e40af;
}

/* ==========================================================================
   HICK'S LAW MOBILE BOTTOM BAR (MOBILE-FIRST 1-THUMB NAVIGATION)
   ========================================================================== */
.bd-mobile-bar {
  display: none;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 70px;
    /* Offset for fixed bottom navigation */
  }

  .bd-mobile-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--bd-border);
    z-index: 900;
    align-items: center;
    justify-content: space-around;
    padding: 0 8px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
  }

  .bd-mobile-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--bd-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    min-width: 54px;
    min-height: 48px;
    border: none;
    background: none;
    cursor: pointer;
    transition: var(--bd-transition);
    -webkit-tap-highlight-color: transparent;
  }

  .bd-mobile-bar-item:hover,
  .bd-mobile-bar-item.active {
    color: #111111;
  }

  .bd-mobile-bar-item.active svg {
    stroke: #000000;
    transform: scale(1.08);
  }

  .bd-mobile-cart-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bd-mobile-cart-icon .bd-cart-counter {
    position: absolute;
    top: -6px;
    right: -8px;
    background-color: var(--bd-primary);
    color: #000000;
    font-size: 0.625rem;
    font-weight: 900;
    height: 16px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #111111;
  }
}

/* ==========================================================================
   TOAST NOTIFICATION ENGINE (OWASP ACCESSIBLE NOTIFICATIONS)
   ========================================================================== */
.bd-toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.bd-toast {
  pointer-events: auto;
  background: #111111;
  color: #ffffff;
  padding: 12px 22px;
  border-radius: var(--bd-radius-full);
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  border: 1.5px solid var(--bd-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(-16px) scale(0.96);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bd-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.bd-toast-error {
  border-color: var(--bd-danger);
  background: #18181b;
}

/* ==========================================================================
   PAGESPEED 100% LAYOUT STABILITY & CONTENT-VISIBILITY
   ========================================================================== */
.bd-hero-img {
  aspect-ratio: 540 / 380;
}

.bd-product-thumb {
  aspect-ratio: 1 / 1;
}

.bd-cat-img-wrapper {
  aspect-ratio: 1 / 1;
}

/* Optimize below-the-fold layout computation */
.bd-promo-section,
.bd-brands-section,
.bd-site-footer {
  content-visibility: auto;
  contain-intrinsic-size: 1px 350px;
}

/* ==========================================================================
   SHOP BY SIDEBAR & 2-COLUMN CATALOG ARCHITECTURE
   ========================================================================== */
.bd-shop-header {
  margin-bottom: 28px;
}

.bd-active-chips-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.bd-active-chips-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--bd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bd-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #ffffff;
  border: 1.5px solid var(--bd-border);
  padding: 5px 12px;
  border-radius: var(--bd-radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  color: #111111;
  box-shadow: var(--bd-shadow-xs);
  transition: var(--bd-transition);
}

.bd-filter-chip:hover {
  border-color: #111111;
  background-color: var(--bd-surface-subtle);
}

.bd-chip-remove {
  font-size: 0.6875rem;
  color: var(--bd-text-muted);
  font-weight: 800;
}

.bd-clear-all-chip {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--bd-danger);
  text-decoration: underline;
  margin-left: 6px;
}

/* 2-Column Grid Layout */
.bd-shop-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: start;
}

/* Sidebar Styling */
.bd-shop-sidebar {
  position: sticky;
  top: 96px;
}

.bd-sidebar-card {
  background: var(--bd-card-bg);
  border-radius: var(--bd-radius-xl);
  padding: 28px 24px;
  box-shadow: var(--bd-shadow-md);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.bd-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1.5px solid var(--bd-border);
  margin-bottom: 24px;
}

.bd-sidebar-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #111111;
}

.bd-sidebar-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #111111;
  letter-spacing: -0.02em;
}

.bd-reset-filters-btn {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--bd-danger);
  background-color: #fef2f2;
  padding: 4px 10px;
  border-radius: var(--bd-radius-full);
  transition: var(--bd-transition);
}

.bd-reset-filters-btn:hover {
  background-color: var(--bd-danger);
  color: #ffffff;
}

.bd-sidebar-close-btn {
  display: none;
  background: var(--bd-surface-subtle);
  border: 1px solid var(--bd-border);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  color: #111111;
  transition: var(--bd-transition);
}

.bd-sidebar-close-btn:hover {
  background: #000000;
  color: #ffffff;
}

.bd-sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1400;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bd-sidebar-overlay.is-open {
  display: block;
  opacity: 1;
}

/* Filter Widgets */
.bd-filter-widget {
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--bd-border-subtle);
}

.bd-filter-widget:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.bd-filter-heading {
  font-size: 0.8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bd-text-muted);
  margin-bottom: 14px;
}

.bd-filter-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bd-filter-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bd-text-secondary);
  transition: var(--bd-transition);
}

.bd-filter-link:hover {
  background-color: var(--bd-surface-subtle);
  color: #111111;
}

.bd-filter-link.is-active {
  background-color: var(--bd-primary) !important;
  color: #000000 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px var(--bd-primary-glow);
}

.bd-filter-count {
  font-size: 0.6875rem;
  font-weight: 800;
  background-color: var(--bd-surface-subtle);
  color: var(--bd-text-muted);
  padding: 2px 8px;
  border-radius: var(--bd-radius-full);
}

.bd-filter-link.is-active .bd-filter-count {
  background-color: #000000;
  color: #ffffff;
}

/* Brands Grid Filter */
.bd-filter-brands-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bd-brand-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--bd-surface-subtle);
  border: 1px solid var(--bd-border);
  padding: 6px 12px;
  border-radius: var(--bd-radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bd-text-secondary);
  transition: var(--bd-transition);
}

.bd-brand-filter-pill:hover {
  border-color: #111111;
  color: #111111;
}

.bd-brand-filter-pill.is-active {
  background-color: var(--bd-primary) !important;
  border-color: var(--bd-primary) !important;
  color: #000000 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px var(--bd-primary-glow);
}

.bd-brand-count {
  font-size: 0.625rem;
  opacity: 0.75;
}

/* Price Filter Widget */
.bd-price-presets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.bd-price-preset-pill {
  display: block;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bd-text-secondary);
  background-color: var(--bd-surface-subtle);
  transition: var(--bd-transition);
}

.bd-price-preset-pill:hover {
  background-color: #ebeef2;
  color: #111111;
}

.bd-price-preset-pill.is-active {
  background-color: var(--bd-primary) !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

.bd-price-inputs-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bd-price-input {
  width: 76px;
  height: 36px;
  padding: 0 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  border: 1.5px solid var(--bd-border);
  border-radius: 8px;
  background-color: #ffffff;
  text-align: center;
  color: #111111;
}

.bd-price-input:focus {
  border-color: #111111;
}

.bd-price-submit-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: #111111;
  color: #ffffff;
  border: none;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--bd-transition);
}

.bd-price-submit-btn:hover {
  background-color: var(--bd-primary);
  color: #000000;
}

/* Toolbar & Catalog Grid */
.bd-shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bd-card-bg);
  border-radius: var(--bd-radius-lg);
  padding: 16px 24px;
  box-shadow: var(--bd-shadow-xs);
  border: 1px solid rgba(0, 0, 0, 0.03);
  margin-bottom: 24px;
}

.bd-mobile-filter-trigger {
  display: none;
}

.bd-toolbar-count {
  font-size: 0.875rem;
  color: var(--bd-text-secondary);
}

.bd-toolbar-count strong {
  color: #111111;
}

.bd-sort-select {
  background-color: var(--bd-surface-subtle);
  border: 1px solid var(--bd-border);
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111111;
  cursor: pointer;
  transition: var(--bd-transition);
}

.bd-sort-select:focus {
  border-color: #111111;
}

/* Catalog 3-Column Grid in Main Content */
.bd-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Pagination */
.bd-pagination-wrapper {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.bd-pagination-wrapper ul.page-numbers {
  display: flex;
  gap: 8px;
  list-style: none;
  align-items: center;
}

.bd-pagination-wrapper .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  background-color: #ffffff;
  border: 1px solid var(--bd-border);
  color: var(--bd-text-secondary);
  font-size: 0.875rem;
  font-weight: 700;
  transition: var(--bd-transition);
}

.bd-pagination-wrapper .page-numbers:hover {
  background-color: var(--bd-surface-subtle);
  color: #111111;
}

.bd-pagination-wrapper .page-numbers.current {
  background-color: var(--bd-primary) !important;
  color: #000000 !important;
  border-color: var(--bd-primary) !important;
  box-shadow: 0 4px 12px var(--bd-primary-glow);
}

/* Empty Catalog State */
.bd-empty-catalog-card {
  background: #ffffff;
  border-radius: var(--bd-radius-xl);
  padding: 64px 32px;
  text-align: center;
  box-shadow: var(--bd-shadow-md);
  border: 1px solid rgba(0, 0, 0, 0.03);
  margin-top: 16px;
}

/* Responsive Breakpoints for Shop Layout */
@media (max-width: 1024px) {
  .bd-shop-layout {
    grid-template-columns: 240px 1fr;
    gap: 20px;
  }

  .bd-shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .bd-shop-layout {
    grid-template-columns: 1fr;
  }

  .bd-mobile-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--bd-primary);
    color: #000000;
    font-size: 0.8125rem;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    position: relative;
    box-shadow: 0 2px 8px var(--bd-primary-glow);
  }

  .bd-filter-active-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #111111;
  }

  .bd-sidebar-close-btn {
    display: inline-flex;
  }

  .bd-shop-sidebar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    z-index: 1500;
    overflow-y: auto;
    background: #ffffff;
    padding: 24px 20px;
    box-shadow: var(--bd-shadow-xl);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .bd-shop-sidebar.is-open {
    transform: translateX(0);
  }

  .bd-sidebar-card {
    padding: 0;
    box-shadow: none;
    border: none;
  }
}

/* ==========================================================================
   MOBILE NATIVE APP VIEWPORT STYLES (MATCHING USER APP MOCKUP)
   ========================================================================== */
.bd-mobile-only {
  display: none !important;
}

.bd-desktop-only {
  display: inherit;
}

.bd-mobile-app-header {
  display: none;
}

.bd-mobile-drawer {
  display: flex;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-100%);
}

.bd-mobile-drawer-overlay {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.bd-bottom-tab-bar {
  display: none;
}

.bd-mobile-hero-promo {
  display: none;
}

.bd-wishlist-heart-btn {
  display: none;
}

.bd-product-rating {
  display: none;
}

.bd-cat-pill-all {
  display: none;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 92px !important;
  }

  .bd-announcement-bar {
    display: none !important;
  }

  .bd-site-header {
    display: none !important;
  }

  .bd-desktop-only {
    display: none !important;
  }

  .bd-mobile-only {
    display: inherit !important;
  }

  .bd-mobile-only.bd-mobile-card-footer {
    display: flex !important;
  }

  .bd-mobile-only.bd-mobile-subhead-row {
    display: flex !important;
  }

  .bd-mobile-app-header {
    display: flex !important;
    flex-direction: column !important;
  }

  .bd-mobile-hero-promo {
    display: block !important;
  }

  .bd-wishlist-heart-btn {
    display: flex !important;
  }

  .bd-product-rating {
    display: flex !important;
  }

  .bd-cat-pill-all {
    display: flex !important;
  }

  /* 1. Mobile Top App Bar */
  .bd-mobile-app-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: #ffffff;
    padding: 12px 16px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  }

  .bd-mobile-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .bd-mobile-grid-btn {
    width: 36px;
    height: 36px;
    display: grid;
    grid-template-columns: repeat(2, 6px);
    gap: 4px;
    align-content: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .bd-mobile-grid-btn .bd-dot {
    width: 6px;
    height: 6px;
    background-color: #111111;
    border-radius: 2px;
  }

  .bd-mobile-grid-btn .bd-dot:first-child {
    background-color: #FFF000;
  }

  .bd-mobile-app-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #111111;
    margin: 0;
    letter-spacing: -0.01em;
  }

  .bd-mobile-top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .bd-mobile-bell-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    color: #1e293b;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bd-mobile-bell-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background-color: #FFF000;
    border-radius: 50%;
    border: 1.5px solid #111111;
  }

  .bd-mobile-avatar-pill {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #FFF000;
    display: block;
    box-shadow: 0 2px 8px var(--bd-primary-glow);
  }

  .bd-mobile-avatar-pill img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Search & Filter Row */
  .bd-mobile-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .bd-mobile-search-form {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
  }

  .bd-mobile-search-input {
    width: 100%;
    height: 44px;
    background: #F8F9FA;
    border: 1px solid #EAECEF;
    border-radius: 22px;
    padding: 0 44px 0 18px;
    font-size: 0.9375rem;
    color: #111111;
    outline: none;
    transition: all 0.2s;
  }

  .bd-mobile-search-input:focus {
    background: #ffffff;
    border-color: #111111;
    box-shadow: 0 0 0 3px rgba(255, 240, 0, 0.35);
  }

  .bd-mobile-search-submit {
    position: absolute;
    right: 14px;
    background: none;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .bd-mobile-filter-btn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #FFF000;
    color: #111111;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px var(--bd-primary-glow);
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
    transition: transform 0.15s, background-color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }

  .bd-mobile-filter-btn svg {
    stroke: #111111;
  }

  .bd-mobile-filter-btn:hover {
    background: #FFE500;
  }

  .bd-mobile-filter-btn:active {
    transform: scale(0.94);
  }

  /* 2. Slide-out Mobile Menu Drawer */
  .bd-mobile-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 99998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .bd-mobile-drawer-overlay.is-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 99998 !important;
  }

  .bd-mobile-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    max-width: 86vw;
    height: 100vh;
    height: 100dvh;
    background: #ffffff;
    z-index: 99999;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    padding: 0;
  }

  .bd-mobile-drawer.is-open {
    display: flex !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 99999 !important;
  }

  .bd-mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
  }

  .bd-drawer-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }

  .bd-drawer-logo img {
    height: 32px;
    width: auto;
    object-fit: contain;
  }

  .bd-mobile-drawer-close {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 1.5rem;
    line-height: 1;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
  }

  .bd-mobile-drawer-close:hover {
    background: #e2e8f0;
  }

  .bd-mobile-drawer-close:active {
    transform: scale(0.92);
  }

  /* User Greeting Card in Drawer */
  .bd-drawer-user-card {
    margin: 14px 16px 6px;
    background: #18181b;
    color: #ffffff;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  }

  .bd-drawer-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .bd-drawer-avatar-wrap {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #FFF000;
    color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .bd-drawer-avatar-wrap svg {
    stroke: #111111;
  }

  .bd-drawer-user-name {
    font-weight: 700;
    font-size: 0.9375rem;
    color: #ffffff;
    line-height: 1.2;
  }

  .bd-drawer-user-link {
    font-size: 0.75rem;
    color: #FFF000;
    font-weight: 700;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin-top: 3px;
  }

  .bd-drawer-user-link:hover {
    text-decoration: underline;
  }

  .bd-mobile-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 36px;
    -webkit-overflow-scrolling: touch;
  }

  .bd-drawer-section-title {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin-bottom: 8px;
    padding-left: 4px;
  }

  .bd-drawer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .bd-drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-radius: 12px;
    color: #1e293b;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    background: #f8fafc;
    border: 1px solid transparent;
    transition: all 0.15s ease;
  }

  .bd-drawer-link:hover,
  .bd-drawer-link:active {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #0f172a;
    transform: translateX(3px);
  }

  .bd-drawer-link-inner {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .bd-drawer-ico {
    font-size: 1.125rem;
    width: 22px;
    display: inline-flex;
    justify-content: center;
  }

  .bd-drawer-badge {
    background: #e2e8f0;
    color: #334155;
    font-size: 0.6875rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
  }

  .bd-badge-hot {
    background: #FFF000;
    color: #111111;
  }

  .bd-drawer-support-box {
    margin-top: 22px;
    background: #fefce8;
    border: 1px solid #fef08a;
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    color: #854d0e;
  }

  .bd-drawer-support-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
  }

  .bd-drawer-support-box strong {
    display: block;
    font-weight: 700;
    color: #713f12;
    margin-bottom: 2px;
  }

  /* 3. Mobile Hero Promo Banner Card (Signature Yellow Theme) */
  .bd-hero-slider-section {
    padding: 12px 0 0 !important;
    background: transparent !important;
  }

  .bd-hero-slider-row {
    display: none !important;
  }

  .bd-mobile-hero-promo {
    display: block;
    margin: 8px 0 16px;
  }

  .bd-m-promo-card {
    position: relative;
    border-radius: 22px;
    padding: 22px 20px;
    background: linear-gradient(135deg, #FFF000 0%, #FFD700 45%, #FBBF24 100%);
    color: #111111;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 140px;
    box-shadow: 0 10px 26px rgba(255, 240, 0, 0.35);
  }

  .bd-m-promo-content {
    position: relative;
    z-index: 2;
    max-width: 55%;
  }

  .bd-m-promo-sub {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #111111;
    opacity: 0.9;
    display: block;
    margin-bottom: 4px;
  }

  .bd-m-promo-title {
    font-size: 2.125rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    color: #111111;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
  }

  .bd-m-promo-star {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111111;
    font-size: 14px;
    z-index: 3;
  }

  .bd-m-promo-img-box {
    position: relative;
    z-index: 1;
    max-width: 140px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.15));
  }

  .bd-m-promo-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform: rotate(-5deg) scale(1.05);
  }

  .bd-m-promo-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
  }

  .bd-m-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #CBD5E1;
    transition: all 0.25s;
  }

  .bd-m-dot.active {
    width: 22px;
    border-radius: 3px;
    background: #111111;
  }

  /* 4. Mobile Box-Type Browse by Category (Seamless Horizontal Swipeable Cards) */
  .bd-category-carousel-section {
    padding: 16px 0 20px !important;
    overflow: visible !important;
  }

  .bd-category-carousel-section>.bd-container {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .bd-cat-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    padding: 0 16px !important;
  }

  .bd-cat-section-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin: 0 !important;
  }

  .bd-cat-all-link {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    color: #64748B !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    text-decoration: none !important;
  }

  .bd-cat-all-link:hover {
    color: #111111 !important;
  }

  .bd-cat-nav-controls {
    display: none !important;
  }

  .bd-cat-track-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    padding: 6px 16px 18px !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain !important;
    cursor: grab !important;
  }

  .bd-cat-track-wrapper::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .bd-cat-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: max-content !important;
    padding-right: 28px !important;
    touch-action: pan-x pan-y !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  /* Box-Type Category Card */
  .bd-cat-item-card {
    flex: 0 0 96px !important;
    width: 96px !important;
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: #FFFFFF !important;
    border: 1.5px solid #EEF2F6 !important;
    border-radius: 20px !important;
    padding: 14px 6px 12px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
    text-decoration: none !important;
    color: #111111 !important;
    scroll-snap-align: none !important;
    text-align: center !important;
    position: relative !important;
    transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.18s ease, border-color 0.18s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    box-sizing: border-box !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    touch-action: pan-x pan-y !important;
  }

  .bd-cat-item-card:active {
    transform: scale(0.94) !important;
  }

  /* Active / Selected Box State */
  .bd-cat-item-card.is-active {
    background: #FFFDE6 !important;
    border-color: #FFF000 !important;
    box-shadow: 0 6px 20px rgba(255, 240, 0, 0.4) !important;
  }

  .bd-cat-item-card.is-active .bd-cat-icon-box {
    background: #FFF000 !important;
    box-shadow: 0 4px 10px rgba(255, 240, 0, 0.5) !important;
  }

  .bd-cat-item-card.is-active .bd-cat-label {
    color: #111111 !important;
    font-weight: 800 !important;
  }

  /* Icon Box: Prominent top squircle */
  .bd-cat-item-card .bd-cat-icon-box {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    border-radius: 16px !important;
    background: #F8FAFC !important;
    margin: 0 0 8px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
  }

  .bd-cat-item-card .bd-cat-icon-box img {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    object-fit: contain !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
  }

  .bd-cat-item-card .bd-cat-icon-box svg {
    width: 24px !important;
    height: 24px !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  /* Category Label: 2-line clean centered typography */
  .bd-cat-item-card .bd-cat-label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    text-align: center !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0 2px !important;
    max-width: 100% !important;
    word-break: break-word !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  .bd-cat-item-card * {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
  }

  /* 5. Mobile Section Header */
  .bd-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
  }

  .bd-section-title {
    font-size: 1.1875rem !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin: 0 !important;
  }

  .bd-view-all-link {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #94A3B8 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .bd-view-all-link svg {
    display: none !important;
  }

  /* 6. Mobile 2-Column Product Grid & Cards (Signature Theme) */
  .bd-product-grid,
  .bd-shop-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin: 0 0 24px !important;
  }

  .bd-product-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .bd-product-thumb {
    position: relative !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    padding: 12px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 140px !important;
    min-height: 140px !important;
    margin-bottom: 8px !important;
  }

  .bd-product-thumb-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  .bd-product-thumb img {
    max-width: 100% !important;
    width: auto !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    transition: transform 0.25s;
  }

  .bd-product-badges {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 2 !important;
  }

  .bd-badge-sale {
    background: #FFF000 !important;
    color: #111111 !important;
    font-size: 0.625rem !important;
    font-weight: 800 !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
  }

  .bd-badge-new {
    background: #111111 !important;
    color: #FFF000 !important;
  }

  .bd-wishlist-heart-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 5 !important;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    -webkit-tap-highlight-color: transparent;
  }

  .bd-wishlist-heart-btn::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
  }

  .bd-wishlist-heart-btn svg {
    stroke: #94A3B8 !important;
    width: 16px !important;
    height: 16px !important;
    transition: all 0.2s !important;
  }

  .bd-wishlist-heart-btn.is-liked svg {
    fill: #111111 !important;
    stroke: #111111 !important;
    transform: scale(1.1) !important;
  }

  .bd-product-details {
    padding: 0 4px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
  }

  .bd-product-category {
    display: none !important;
  }

  .bd-product-title {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    line-height: 1.25 !important;
    margin: 0 0 2px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
  }

  .bd-product-rating {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 6px !important;
  }

  .bd-stars {
    color: #F59E0B !important;
    font-size: 0.6875rem !important;
    letter-spacing: 1px !important;
  }

  .bd-mobile-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: auto !important;
    padding-top: 2px !important;
  }

  .bd-mobile-price {
    font-size: 0.9375rem !important;
    font-weight: 800 !important;
    color: #111111 !important;
  }

  .bd-mobile-price del {
    font-size: 0.75rem !important;
    color: #94A3B8 !important;
    font-weight: 500 !important;
    margin-right: 4px !important;
  }

  .bd-mobile-price ins {
    text-decoration: none !important;
  }

  .bd-mobile-add-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
    background: #FFF000 !important;
    color: #111111 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px var(--bd-primary-glow) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    position: relative !important;
    transition: transform 0.15s, background-color 0.15s !important;
    -webkit-tap-highlight-color: transparent;
  }

  .bd-mobile-add-btn::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
  }

  .bd-mobile-add-btn:hover {
    background: #FFE500 !important;
  }

  .bd-mobile-add-btn:active {
    transform: scale(0.9) !important;
  }

  /* Mobile Flash Deals Section */
  .bd-flash-deals-section {
    padding: 16px 0 24px !important;
  }

  .bd-flash-deals-box {
    border-radius: 18px !important;
    border: 1px solid #EEF2F6 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  .bd-flash-deals-header {
    padding: 14px 16px !important;
    gap: 10px !important;
  }

  .bd-flash-deals-header-left {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .bd-flash-deals-title {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
  }

  .bd-flash-deals-countdown-wrap {
    gap: 6px !important;
  }

  .bd-flash-deals-ends-label {
    font-size: 0.75rem !important;
  }

  .bd-flash-deals-timer-badge {
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
    gap: 4px !important;
  }

  .bd-flash-deals-timer-badge .timer-num {
    min-width: 14px !important;
    font-size: 0.8125rem !important;
  }

  .bd-flash-deals-header-right {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-left: 0 !important;
    padding-top: 8px !important;
    border-top: 1px dashed #EEF2F6 !important;
  }

  .bd-flash-deals-view-all {
    font-size: 0.8125rem !important;
  }

  .bd-flash-deals-slider-wrapper {
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }

  .bd-flash-deals-col {
    flex: 0 0 86% !important;
    min-width: 86% !important;
    max-width: 86% !important;
    scroll-snap-align: start !important;
    border-right: 1px solid #EEF2F6 !important;
  }

  .bd-flash-deal-card {
    padding: 16px 14px !important;
    gap: 12px !important;
  }

  .bd-flash-deal-img-col {
    flex: 0 0 90px !important;
    width: 90px !important;
    height: 90px !important;
  }

  .bd-flash-deal-badge {
    font-size: 0.6875rem !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
  }

  .bd-flash-deal-title {
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
  }

  .bd-flash-deal-price {
    font-size: 0.875rem !important;
  }

  .bd-flash-sold-text {
    font-size: 0.75rem !important;
  }

  /* Mobile Brands Slider */
  .bd-brands-section {
    padding: 20px 0 36px !important;
  }

  .bd-brands-section>.bd-container {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .bd-brands-header-row {
    padding: 0 16px !important;
    margin-bottom: 12px !important;
  }

  .bd-brands-heading {
    font-size: 1.1875rem !important;
  }

  .bd-brands-nav-controls {
    display: none !important;
  }

  .bd-brands-slider-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px 16px 18px !important;
  }

  .bd-brand-slide-card {
    flex: 0 0 144px !important;
    width: 144px !important;
    height: 88px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }

  .bd-brand-logo-container {
    height: 40px !important;
  }

  .bd-brand-slide-logo {
    max-height: 38px !important;
  }

  .bd-brand-card-name {
    font-size: 0.8125rem !important;
  }

  /* 7. Screen 2 Shop Page Subhead Row */
  .bd-mobile-subhead-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 4px 0 12px !important;
  }

  .bd-mobile-category-heading {
    font-size: 1.1875rem !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin: 0 !important;
  }

  .bd-mobile-sort-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    border: none !important;
    color: #94A3B8 !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    padding: 0 4px !important;
  }

  /* 8. Floating Mobile Bottom Dock (Signature Yellow & Black Theme) */
  .bd-mobile-dock {
    display: flex !important;
    position: fixed !important;
    bottom: 16px !important;
    left: 16px !important;
    right: 16px !important;
    height: 60px !important;
    background: #ffffff !important;
    border-radius: 32px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    z-index: 1000 !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 0 12px !important;
  }

  .bd-dock-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94A3B8 !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    -webkit-tap-highlight-color: transparent;
  }

  .bd-dock-item.is-active.is-elevated {
    transform: translateY(-8px) !important;
    width: 48px !important;
    height: 48px !important;
    background: #FFF000 !important;
    color: #111111 !important;
    box-shadow: 0 6px 18px var(--bd-primary-glow) !important;
  }

  .bd-dock-item.is-active.is-elevated svg {
    fill: #111111 !important;
    stroke: #111111 !important;
  }

  .bd-dock-item.is-active-tab {
    color: #111111 !important;
  }

  .bd-dock-item.is-active-tab svg {
    stroke: #111111 !important;
  }

  .bd-dock-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  .bd-dock-icon .bd-cart-counter {
    position: absolute !important;
    top: -6px !important;
    right: -8px !important;
    background: #111111 !important;
    color: #FFF000 !important;
    font-size: 0.625rem !important;
    font-weight: 800 !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ffffff !important;
  }
}

/* ==========================================================================
   PRODUCT PAGE ANATOMY (STRICT BLUEPRINT IMPLEMENTATION)
   01. Hero Section (Navigation, Title, Price, Gallery, Variants, Qty, CTA, Pincode, Micro-Trust)
   02. Social Proof (Review Cards, Ratings & 50K+ Numbers)
   03. Product Details (Special Offer, What's Included & Shipping Timeline)
   04. You May Also Like (Cross-sell 4-Grid Cards)
   05. FAQ Accordion (Doubts Remover Before Checkout)
   06. Second CTA (Bottom Conversion Banner)
   07. Footer Trust Layer (Security Badges, Accepted Payments & Policy Links)
   ========================================================================== */

.bd-product-anatomy-wrapper {
  display: flex;
  flex-direction: column;
  gap: 56px;
  width: 100%;
  padding: 50px;
}


.bd-anatomy-section {
  width: 100%;
}

/* --- 01. HERO SECTION & NAVIGATION --- */
.bd-anatomy-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #8E95A2;
  margin-bottom: 24px;
}

.bd-anatomy-breadcrumb a {
  color: #64748B;
  text-decoration: none;
  transition: color 0.2s ease;
}

.bd-anatomy-breadcrumb a:hover {
  color: #111827;
}

.bd-breadcrumb-separator {
  color: #CBD5E1;
}

.bd-breadcrumb-current {
  color: #111827;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}

.bd-anatomy-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: start;
}

/* Gallery Column */
.bd-anatomy-gallery-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 96px;
}

.bd-anatomy-main-image-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.05);
  padding: 32px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 440px;
  overflow: hidden;
  cursor: zoom-in;
}

.bd-gallery-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #FFF000;
  color: #111111;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(255, 240, 0, 0.4);
  z-index: 2;
  letter-spacing: 0.03em;
}

.bd-gallery-image-viewport {
  width: 100%;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.bd-main-gallery-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center center;
  will-change: transform, transform-origin;
  pointer-events: none;
}

.bd-zoom-hint {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 3;
}

.bd-anatomy-main-image-card:hover .bd-zoom-hint,
.bd-modal-main-img-card:hover .bd-zoom-hint {
  opacity: 0;
  transform: translateY(4px);
}

/* Thumbnail Strip */
.bd-anatomy-thumbnails-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.bd-anatomy-thumb-btn {
  background: #ffffff;
  border-radius: 16px;
  border: 2px solid transparent;
  padding: 8px;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  overflow: hidden;
}

.bd-anatomy-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bd-anatomy-thumb-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.bd-anatomy-thumb-btn.is-active {
  border-color: #FFF000;
  box-shadow: 0 4px 16px rgba(255, 240, 0, 0.5);
  background: #FEFCE8;
}

/* Summary Column */
.bd-anatomy-summary-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.bd-summary-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bd-brand-pill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bd-brand-tag {
  background: #111111;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 12px;
}

.bd-stock-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
}

.bd-stock-tag.in-stock {
  background: #ECFDF5;
  color: #059669;
}

.bd-stock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.bd-anatomy-product-title {
  font-size: 2.25rem;
  font-weight: 500;
  color: #0F172A;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.01em;
}

.bd-summary-rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #64748B;
  flex-wrap: wrap;
}

.bd-stars {
  color: #F59E0B;
  font-size: 1.125rem;
  letter-spacing: 1px;
}

.bd-rating-number strong {
  color: #0F172A;
}

.bd-rating-divider {
  color: #CBD5E1;
}

.bd-verified-buyer-stat {
  color: #059669;
  font-weight: 700;
}

.bd-summary-pricing-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 4px;
}

.bd-anatomy-price-current {
  font-size: 2rem;
  font-weight: 900;
  color: #111111;
  letter-spacing: -0.02em;
}

.bd-anatomy-price-regular {
  font-size: 1.25rem;
  font-weight: 600;
  color: #94A3B8;
  text-decoration: line-through;
}

.bd-anatomy-discount-chip {
  background: #FEF08A;
  color: #854D0E;
  font-size: 0.8125rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 12px;
}

.bd-anatomy-short-desc {
  font-size: 0.9375rem;
  color: #475569;
  line-height: 1.6;
  margin: 4px 0 0;
}

/* Variant Selector */
.bd-anatomy-variants-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.bd-variants-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

.bd-field-label {
  font-weight: 700;
  color: #1E293B;
}

.bd-selected-variant-label {
  font-weight: 800;
  color: #0F172A;
}

.bd-variant-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bd-variant-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 16px;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  text-align: left;
}

.bd-variant-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1E293B;
}

.bd-variant-sub {
  font-size: 0.75rem;
  color: #64748B;
  font-weight: 500;
}

.bd-variant-badge {
  position: absolute;
  top: -8px;
  right: -6px;
  background: #111111;
  color: #FFF000;
  font-size: 0.625rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 8px;
  text-transform: uppercase;
}

.bd-variant-pill:hover {
  border-color: #CBD5E1;
  background: #F1F5F9;
}

.bd-variant-pill.is-active {
  background: #FFF000;
  border-color: #FFF000;
  box-shadow: 0 4px 14px rgba(255, 240, 0, 0.4);
}

.bd-variant-pill.is-active .bd-variant-title {
  color: #111111;
  font-weight: 800;
}

.bd-variant-pill.is-active .bd-variant-sub {
  color: rgba(17, 17, 17, 0.75);
}

/* Purchase Action Group */
.bd-anatomy-purchase-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bd-qty-stepper {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.bd-qty-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: #1E293B;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bd-qty-btn:hover {
  background: #F1F5F9;
  color: #000000;
}

.bd-qty-input {
  width: 44px;
  border: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  background: transparent;
  outline: none;
  -moz-appearance: textfield;
}

.bd-qty-input::-webkit-outer-spin-button,
.bd-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bd-anatomy-primary-cta {
  flex: 1;
  background: #FFF000;
  color: #111111;
  border: none;
  border-radius: 18px;
  padding: 16px 28px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(255, 240, 0, 0.45);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.bd-cta-text {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bd-cta-sub {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(17, 17, 17, 0.7);
  margin-top: 2px;
}

.bd-anatomy-primary-cta:hover {
  background: #FFE600;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255, 240, 0, 0.6);
}

.bd-anatomy-primary-cta:active {
  transform: translateY(0);
}

.bd-anatomy-wishlist-btn {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #ffffff;
  border: 1.5px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.bd-anatomy-wishlist-btn:hover {
  color: #EF4444;
  border-color: #FECDD3;
  background: #FFF1F2;
}

/* Delivery Pincode Checker */
.bd-anatomy-pincode-checker {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bd-pincode-input-group {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1.5px solid #CBD5E1;
  border-radius: 12px;
  padding: 6px 12px;
}

.bd-pincode-input-group svg {
  color: #64748B;
  flex-shrink: 0;
}

.bd-pincode-input-group input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.875rem;
  color: #1E293B;
  background: transparent;
}

.bd-pincode-btn {
  background: #111111;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.bd-pincode-btn:hover {
  background: #334155;
}

.bd-pincode-result {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: #047857;
  padding: 8px 12px;
  background: #ECFDF5;
  border-radius: 8px;
  border: 1px solid #D1FAE5;
  line-height: 1.45;
  transition: all 0.2s ease;
}

.bd-pincode-result.is-visible {
  display: flex;
}

.bd-pincode-result.is-unavailable {
  background: #FEF2F2 !important;
  color: #991B1B !important;
  border-color: #FEE2E2 !important;
}

.bd-pincode-result.is-unavailable .bd-pincode-icon {
  color: #DC2626 !important;
}

.bd-pincode-icon {
  font-weight: 800;
  flex-shrink: 0;
}

/* 4 Micro Trust Badges */
.bd-anatomy-micro-trust-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding-top: 8px;
  border-top: 1px dashed #E2E8F0;
}

.bd-micro-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
}

.bd-micro-icon {
  font-size: 1rem;
}

/* --- SECTION COMMON HEADINGS --- */
.bd-section-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 32px;
  gap: 8px;
}

.bd-anatomy-heading {
  font-size: 1.875rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  letter-spacing: -0.02em;
}

.bd-anatomy-subheading {
  font-size: 0.9375rem;
  color: #64748B;
  max-width: 580px;
  margin: 0;
}

/* --- 02. SOCIAL PROOF (REVIEWS, RATINGS & 50K+) --- */
.bd-social-proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 24px;
}

.bd-social-review-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.bd-review-stars {
  color: #F59E0B;
  font-size: 1.125rem;
}

.bd-review-quote {
  font-size: 0.9375rem;
  color: #334155;
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

.bd-review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #F1F5F9;
}

.bd-author-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFF000;
  color: #111111;
  font-size: 0.8125rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-author-meta {
  display: flex;
  flex-direction: column;
}

.bd-author-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0F172A;
}

.bd-author-status {
  font-size: 0.75rem;
  color: #64748B;
}

.bd-social-stats-card {
  background: linear-gradient(135deg, #111827 0%, #1E293B 100%);
  color: #ffffff;
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
  position: relative;
  overflow: hidden;
}

.bd-social-stats-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 240, 0, 0.15) 0%, transparent 70%);
}

.bd-stat-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.bd-stat-number {
  font-size: 2rem;
  font-weight: 900;
  color: #FFF000;
  line-height: 1;
}

.bd-stat-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #E2E8F0;
}

.bd-stat-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  width: 100%;
}

/* --- 03. PRODUCT DETAILS (OFFER, WHAT'S INCLUDED & TIMELINE) --- */
.bd-details-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.03);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.bd-special-offer-box {
  background: #FEFCE8;
  border: 1.5px solid #FEF08A;
  border-radius: 18px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.bd-offer-icon {
  font-size: 2rem;
}

.bd-offer-title {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #854D0E;
  margin: 0 0 4px;
}

.bd-offer-desc {
  font-size: 0.875rem;
  color: #A16207;
  margin: 0;
}

.bd-whats-included-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bd-included-heading,
.bd-timeline-heading {
  font-size: 1.125rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}

.bd-included-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.bd-included-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: #334155;
  background: #F8FAFC;
  padding: 12px 16px;
  border-radius: 14px;
}

.bd-check-icon {
  color: #059669;
  font-weight: 800;
  font-size: 1rem;
}

.bd-shipping-timeline-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 12px;
  border-top: 1px solid #F1F5F9;
}

.bd-timeline-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.bd-timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  flex: 1;
}

.bd-step-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #F1F5F9;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-timeline-step.is-complete .bd-step-icon,
.bd-timeline-step.is-active .bd-step-icon {
  background: #FFF000;
  box-shadow: 0 4px 12px rgba(255, 240, 0, 0.4);
}

.bd-step-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: #0F172A;
}

.bd-step-desc {
  font-size: 0.75rem;
  color: #64748B;
}

.bd-timeline-step-line {
  flex: 1;
  height: 2px;
  background: #E2E8F0;
  margin-top: -24px;
}

/* --- 04. YOU MAY ALSO LIKE (CROSS-SELL 4-GRID) --- */
.bd-cross-sell-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.bd-product-thumb-wrap {
  position: relative;
  background: #ffffff;
  padding: 16px 12px;
  height: 260px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--bd-border-subtle);
  border-top-left-radius: var(--bd-radius-lg);
  border-top-right-radius: var(--bd-radius-lg);
}

.bd-product-thumb-wrap .bd-product-img-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.bd-product-thumb-wrap .bd-product-img {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bd-product-card:hover .bd-product-thumb-wrap .bd-product-img {
  transform: scale(1.05);
}

.bd-cross-sell-grid .bd-product-title a {
  font-weight: 500;
}

.bd-product-action-group {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.bd-action-pill {
  background-color: var(--bd-primary);
  color: #000000;
  font-weight: 800;
  font-size: 0.8125rem;
  padding: 9px 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--bd-transition);
}

.bd-action-pill:hover {
  background-color: var(--bd-primary-hover);
  transform: translateY(-1px);
}

/* --- 05. FAQ ACCORDION --- */
.bd-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}

.bd-faq-item {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.bd-faq-item.is-open {
  border-color: #FFF000;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

.bd-faq-question {
  width: 100%;
  padding: 20px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #0F172A;
  text-align: left;
}

.bd-faq-toggle-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 700;
  color: #1E293B;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.bd-faq-item.is-open .bd-faq-toggle-icon {
  background: #FFF000;
  color: #111111;
}

.bd-faq-answer {
  display: none;
  padding: 0 24px 22px;
  font-size: 0.9375rem;
  color: #475569;
  line-height: 1.65;
}

.bd-faq-item.is-open .bd-faq-answer {
  display: block;
}

/* --- 06. SECOND CTA BANNER --- */
.bd-second-cta-card {
  background: linear-gradient(135deg, #111827 0%, #0F172A 100%);
  border-radius: 28px;
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  color: #ffffff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
  border: 1px solid rgba(255, 240, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.bd-second-cta-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 240, 0, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.bd-second-cta-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 620px;
  position: relative;
  z-index: 1;
}

.bd-second-cta-tag {
  color: #FFF000;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bd-second-cta-title {
  font-size: 2rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.02em;
}

.bd-second-cta-desc {
  font-size: 1rem;
  color: #94A3B8;
  margin: 0;
  line-height: 1.6;
}

.bd-second-cta-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.bd-second-cta-btn {
  background: #FFF000;
  color: #111111;
  border: none;
  border-radius: 20px;
  padding: 18px 36px;
  font-size: 1.0625rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 28px rgba(255, 240, 0, 0.45);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  white-space: nowrap;
}

.bd-second-cta-btn:hover {
  background: #FFE600;
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(255, 240, 0, 0.65);
}

.bd-second-cta-note {
  font-size: 0.75rem;
  color: #94A3B8;
}

/* --- 07. FOOTER TRUST LAYER --- */
.bd-anatomy-trust-footer {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.bd-trust-badges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.bd-trust-badge-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.bd-trust-badge-icon {
  font-size: 2rem;
  margin-bottom: 4px;
}

.bd-trust-badge-title {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}

.bd-trust-badge-sub {
  font-size: 0.8125rem;
  color: #64748B;
  margin: 0;
}

.bd-accepted-payments-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.bd-payments-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bd-payment-pills-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.bd-payment-pill {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 8px 18px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1E293B;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.bd-anatomy-policy-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 0.8125rem;
  color: #94A3B8;
  flex-wrap: wrap;
}

.bd-anatomy-policy-links a {
  color: #64748B;
  text-decoration: none;
  transition: color 0.15s ease;
}

.bd-anatomy-policy-links a:hover {
  color: #0F172A;
  text-decoration: underline;
}

.bd-policy-dot {
  color: #CBD5E1;
}

/* --- RESPONSIVE ADJUSTMENTS FOR ANATOMY --- */
@media (max-width: 1024px) {
  .bd-anatomy-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .bd-anatomy-gallery-col {
    position: static;
  }

  .bd-social-proof-grid {
    grid-template-columns: 1fr;
  }

  .bd-cross-sell-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bd-trust-badges-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bd-second-cta-card {
    flex-direction: column;
    text-align: center;
    padding: 36px 24px;
  }
}

@media (max-width: 640px) {
  .bd-anatomy-product-title {
    font-size: 1.625rem;
  }

  .bd-anatomy-main-image-card {
    min-height: 320px;
    padding: 20px;
  }

  .bd-gallery-image-viewport {
    height: 260px;
  }

  .bd-anatomy-purchase-row {
    flex-wrap: wrap;
  }

  .bd-anatomy-primary-cta {
    width: 100%;
    order: 1;
  }

  .bd-qty-stepper {
    order: 2;
  }

  .bd-anatomy-wishlist-btn {
    order: 3;
  }

  .bd-included-grid {
    grid-template-columns: 1fr;
  }

  .bd-timeline-stepper {
    flex-direction: column;
    gap: 20px;
  }

  .bd-timeline-step-line {
    width: 2px;
    height: 24px;
    margin: 0;
  }

  .bd-cross-sell-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .bd-trust-badges-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ATTACHED UI/UX MOBILE APP SCREENS (SCREEN 1, SCREEN 2, SCREEN 3)
   ========================================================================== */

/* SCREEN 1: ONBOARDING / WELCOME HERO */
.bd-onboard-hero-section {
  display: none;
}

@media (max-width: 768px) {
  .bd-onboard-hero-section {
    display: block;
    padding: 12px 16px 24px;
    background: #FAFAFA;
  }

  .bd-onboard-card {
    background: #FFFFFF;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
  }

  .bd-onboard-visual-wrap {
    width: 100%;
    height: 380px;
    overflow: hidden;
    background: #F3F4F6;
    position: relative;
  }

  .bd-onboard-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .bd-onboard-content {
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .bd-onboard-headline {
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1.15;
    color: #111111;
    letter-spacing: -0.03em;
  }

  .bd-onboard-headline .bd-onboard-l1 {
    display: block;
  }

  .bd-onboard-badge {
    background: #111111;
    color: #FFFFFF;
    padding: 2px 12px;
    border-radius: 8px;
    display: inline-block;
    margin-right: 6px;
    font-style: normal;
  }

  .bd-onboard-italic {
    font-style: italic;
    font-family: Georgia, serif;
    font-weight: 400;
  }

  .bd-onboard-sub {
    font-size: 0.875rem;
    color: #64748B;
    line-height: 1.5;
    margin: 0;
  }

  .bd-onboard-cta-dock {
    margin-top: 8px;
    background: #111111;
    color: #FFFFFF;
    border-radius: 40px;
    padding: 8px 16px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
  }

  .bd-onboard-cta-dock:active {
    transform: scale(0.98);
  }

  .bd-onboard-dock-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bd-onboard-dock-label {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
  }

  .bd-onboard-dock-arrows {
    color: #94A3B8;
    font-weight: 700;
    letter-spacing: 2px;
  }
}

/* SCREEN 2: MOBILE APP HEADER & STORE FEED */
@media (max-width: 768px) {
  .bd-mobile-app-header {
    display: flex !important;
    flex-direction: column;
    padding: 12px 16px 14px;
    background: #FFFFFF;
    border-bottom: 1px solid #F1F5F9;
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .bd-mobile-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
  }

  .bd-mobile-logo-wrap {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    max-width: 130px !important;
    overflow: hidden !important;
  }

  .bd-mobile-brand-logo {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    max-width: 130px !important;
    height: 34px !important;
  }

  .bd-mobile-logo-img,
  .bd-mobile-logo-wrap img,
  .bd-mobile-brand-logo img,
  .woocommerce img.bd-mobile-logo-img,
  .woocommerce-page img.bd-mobile-logo-img,
  .woocommerce-shop img.bd-mobile-logo-img,
  body img.bd-mobile-logo-img {
    height: 34px !important;
    max-height: 34px !important;
    width: auto !important;
    max-width: 120px !important;
    object-fit: contain !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  .bd-mobile-actions-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  .bd-mobile-actions-capsule {
    display: flex;
    align-items: center;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 24px;
    padding: 2px 4px;
    gap: 2px;
  }

  .bd-mobile-capsule-btn {
    background: none;
    border: none;
    padding: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    color: #111111;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
  }

  .bd-mobile-capsule-divider {
    width: 1px;
    height: 20px;
    background: #CBD5E1;
  }

  .bd-mobile-menu-trigger-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: #111111;
    color: #FFF000;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }

  .bd-mobile-menu-trigger-btn:active {
    transform: scale(0.95);
    background: #000000;
  }

  .bd-mobile-bell-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    background: #EF4444;
    border-radius: 50%;
    border: 1.5px solid #FFFFFF;
  }

  .bd-mobile-actions-capsule .bd-cart-counter {
    position: absolute;
    top: -2px;
    right: -4px;
    background: #111111;
    color: #FFF000;
    font-size: 0.625rem;
    font-weight: 800;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bd-mobile-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .bd-mobile-search-form {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
  }

  .bd-mobile-search-form .bd-search-icon {
    position: absolute;
    left: 14px;
    color: #94A3B8;
    pointer-events: none;
  }

  .bd-mobile-search-input {
    width: 100%;
    height: 44px;
    border-radius: 24px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    padding: 0 16px 0 42px;
    font-size: 0.875rem;
    color: #111111;
    outline: none;
  }

  .bd-mobile-search-input:focus {
    border-color: #111111;
    background: #FFFFFF;
  }

  .bd-mobile-filter-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111111;
    text-decoration: none;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(255, 240, 0, 0.28);
    transition: transform 0.15s ease, background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .bd-mobile-filter-btn:active {
    transform: scale(0.94);
    background: #FFF000;
  }

  /* Screen 2: Promo Banner Card */
  .bd-mobile-hero-promo {
    margin: 12px 16px 20px;
  }

  .bd-m-promo-card {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border-radius: 24px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(186, 230, 253, 0.4);
    border: 1px solid rgba(186, 230, 253, 0.6);
  }

  .bd-m-promo-content {
    flex: 1;
    z-index: 2;
  }

  .bd-m-promo-sub {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #0284C7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 4px;
  }

  .bd-m-promo-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.2;
    margin: 0 0 12px;
  }

  .bd-m-promo-title strong {
    font-size: 1.6rem;
    color: #0F172A;
    display: block;
  }

  .bd-m-promo-btn {
    display: inline-block;
    background: #FFFFFF;
    color: #0F172A;
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .bd-m-promo-img-box {
    width: 130px;
    height: 120px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }

  .bd-m-promo-img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .bd-m-promo-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
  }

  .bd-m-promo-dots .bd-m-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #CBD5E1;
  }

  .bd-m-promo-dots .bd-m-dot.active {
    width: 16px;
    border-radius: 4px;
    background: #111111;
  }

  /* Screen 2: 2-Column Product Card Feed */
  .bd-app-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  .bd-app-feed-header .bd-section-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #111111;
    margin: 0;
  }

  .bd-see-all-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748B;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .bd-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .bd-app-product-card {
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #F1F5F9;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  }

  .bd-app-product-card .bd-product-thumb {
    position: relative;
    background: #ffffff;
    border-radius: 18px;
    margin: 6px;
    padding: 12px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .bd-app-product-card .bd-product-thumb img {
    height: 100%;
    max-height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
  }

  .bd-wishlist-heart-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FFFFFF;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111111;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    z-index: 3;
  }

  .bd-floating-shop-pill {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: #111111;
    color: #FFFFFF;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 3;
  }

  .bd-floating-shop-pill:active {
    transform: scale(0.95);
  }

  .bd-app-product-card .bd-product-details {
    padding: 8px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .bd-app-product-card .bd-product-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #111111;
    line-height: 1.25;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .bd-app-card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
  }

  .bd-app-card-price {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #111111;
  }

  .bd-app-card-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #111111;
  }

  .bd-app-star {
    color: #EAB308;
    font-size: 0.9375rem;
  }

  /* Attached Design: Dark Floating Bottom Tab Bar with #FFF000 Accent & Center Dome */
  .bd-bottom-tab-bar {
    display: block !important;
    position: fixed !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    left: 14px !important;
    right: 14px !important;
    z-index: 99990 !important;
    pointer-events: none !important;
  }

  .bd-tab-bar-container {
    pointer-events: auto !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    height: 64px !important;
    background: #141416 !important;
    border-radius: 34px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.48), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 0 8px !important;
    position: relative !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  .bd-tab-bar-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: #94A3B8 !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 6px 12px !important;
    border-radius: 18px !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
    min-width: 56px !important;
  }

  .bd-tab-bar-item:active {
    transform: scale(0.92) !important;
  }

  .bd-tab-bar-item.is-active,
  .bd-tab-bar-item:hover {
    color: #FFF000 !important;
  }

  .bd-tab-bar-item.is-active svg,
  .bd-tab-bar-item:hover svg {
    stroke: #FFF000 !important;
    transform: translateY(-1px);
  }

  .bd-tab-bar-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    position: relative !important;
  }

  .bd-tab-bar-icon svg {
    stroke: currentColor !important;
    transition: stroke 0.2s, transform 0.2s !important;
  }

  .bd-tab-bar-label {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    transition: color 0.2s !important;
  }

  /* Cart counter badge on tab bar */
  .bd-tab-bar-item .bd-cart-counter {
    position: absolute !important;
    top: -5px !important;
    right: -8px !important;
    background: #FFF000 !important;
    color: #111111 !important;
    font-size: 0.625rem !important;
    font-weight: 800 !important;
    min-width: 17px !important;
    height: 17px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    border: 2px solid #141416 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  }

  /* Center Elevated Notch & Circular Button (Store / Shop) */
  .bd-tab-bar-center-wrap {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: -24px !important;
    z-index: 10 !important;
  }

  /* Smooth curved dome behind the elevated circular button */
  .bd-tab-bar-notch-bg {
    position: absolute !important;
    top: -3px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 72px !important;
    height: 44px !important;
    background: #141416 !important;
    border-top-left-radius: 36px !important;
    border-top-right-radius: 36px !important;
    z-index: 1 !important;
    pointer-events: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .bd-tab-bar-center-btn {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .bd-tab-bar-center-circle {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: #FFF000 !important;
    color: #111111 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 24px rgba(255, 240, 0, 0.48) !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .bd-tab-bar-center-circle svg {
    stroke: #111111 !important;
    fill: none !important;
  }

  .bd-tab-bar-center-btn:active .bd-tab-bar-center-circle {
    transform: scale(0.92) !important;
    box-shadow: 0 4px 12px rgba(255, 240, 0, 0.3) !important;
  }

  .bd-tab-bar-label.is-center {
    color: #FFF000 !important;
    font-weight: 700 !important;
    margin-top: 3px !important;
    font-size: 0.6875rem !important;
  }
}

/* SCREEN 3: DETAILS PAGE */
@media (max-width: 768px) {
  .bd-details-mobile-header {
    display: none !important;
  }

  .bd-details-circle-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111111;
    text-decoration: none;
    cursor: pointer;
  }

  .bd-details-mobile-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #111111;
  }

  .bd-anatomy-hero-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .bd-anatomy-gallery-col {
    background: #F8FAFC !important;
    padding: 20px 16px !important;
    border-radius: 0 !important;
  }

  .bd-anatomy-main-image-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    min-height: 280px !important;
  }

  .bd-anatomy-thumbnails-track {
    display: none !important;
  }

  /* Screen 3: Sliding Sheet Container */
  .bd-anatomy-summary-col {
    background: #FFFFFF !important;
    border-radius: 28px 28px 0 0 !important;
    margin-top: -24px !important;
    position: relative !important;
    z-index: 10 !important;
    padding: 24px 20px 100px !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.06) !important;
  }

  .bd-details-swatches-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
  }

  .bd-details-swatch {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    border: 1.5px solid #E2E8F0;
    background: #F8FAFC;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
  }

  .bd-details-swatch.is-active {
    border: 2px solid #111111;
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .bd-details-swatch img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .bd-details-mobile-head-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  .bd-details-title-col {
    flex: 1;
  }

  .bd-details-product-title {
    font-size: 1.35rem !important;
    font-weight: 500 !important;
    color: #111111 !important;
    line-height: 1.25 !important;
    margin: 0 0 4px !important;
  }

  .bd-details-product-subtitle {
    font-size: 0.8125rem !important;
    color: #64748B !important;
    margin: 0 !important;
  }

  .bd-details-price-col {
    text-align: right;
  }

  .bd-details-price-old {
    font-size: 0.8125rem;
    color: #94A3B8;
    text-decoration: line-through;
    display: block;
    margin-bottom: 2px;
  }

  .bd-details-price-current {
    font-size: 1.25rem;
    font-weight: 800;
    color: #111111;
  }

  .bd-details-buyer-qty-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 24px !important;
  }

  .bd-details-avatars-group {
    display: flex;
    align-items: center;
  }

  .bd-buyer-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    margin-left: -8px;
    object-fit: cover;
  }

  .bd-buyer-avatar:first-child {
    margin-left: 0;
  }

  .bd-buyer-count {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #111111;
    margin-left: 8px;
  }

  .bd-details-stepper-capsule {
    display: flex;
    align-items: center;
    background: #F1F5F9;
    border-radius: 20px;
    padding: 3px 6px;
    gap: 12px;
  }

  .bd-details-stepper-capsule .bd-qty-step-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFFFFF;
    border: none;
    font-weight: 800;
    font-size: 1rem;
    color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  }

  .bd-details-stepper-capsule .bd-qty-step-val {
    font-weight: 800;
    font-size: 0.9375rem;
    color: #111111;
    min-width: 14px;
    text-align: center;
  }

  .bd-details-desc-block {
    margin-bottom: 24px;
  }

  .bd-details-desc-heading {
    font-size: 1rem;
    font-weight: 800;
    color: #111111;
    margin: 0 0 8px;
  }

  .bd-details-desc-text {
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
  }

  .bd-anatomy-variants-block,
  .bd-anatomy-purchase-row,
  .bd-anatomy-pincode-checker {
    display: none !important;
  }

  /* Fixed Bottom Sticky Bar */
  .bd-details-fixed-bottom-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #FFFFFF !important;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08) !important;
    border-top: 1px solid #F1F5F9 !important;
    z-index: 1002 !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .bd-details-cart-pill-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #F1F5F9;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111111;
    cursor: pointer;
    flex-shrink: 0;
  }

  .bd-details-buy-btn {
    flex: 1;
    height: 52px;
    border-radius: 26px;
    background: #111111;
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s;
  }

  .bd-details-buy-btn:active {
    transform: scale(0.98);
  }
}

/* ==========================================================================
   SINGLE PRODUCT PAGE POPUP WINDOW PRESENTATION (Direct URL & Main Site)
   ========================================================================== */
.bd-is-product-popup-page {
  background: radial-gradient(circle at 50% 15%, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  min-height: 100vh !important;
  position: relative !important;
}

.bd-product-popup-viewport {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 16px 80px;
  position: relative;
}

.bd-product-popup-card {
  background: #FFFFFF !important;
  border-radius: 28px !important;
  box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  border: 2.5px solid rgba(255, 240, 0, 0.45) !important;
}

.bd-popup-floating-close {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #111111 !important;
  color: #FFF000 !important;
  border: 1px solid rgba(255, 240, 0, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 90 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bd-popup-floating-close:hover {
  background: #FFF000 !important;
  color: #111111 !important;
  transform: scale(1.08) rotate(90deg) !important;
}

@media (max-width: 768px) {
  .bd-is-product-popup-page {
    background: #F8FAFC !important;
  }

  .bd-product-popup-viewport {
    padding: 0 !important;
    width: 100% !important;
  }

  .bd-product-popup-card {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   BIGDOT OMNISCROLL™ SINGLE PRODUCT DETAILS MODAL / POPUP
   ========================================================================== */

/* 1. Modal Backdrop & Container */
.bd-product-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bd-product-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.bd-product-modal-container {
  width: 100%;
  max-width: 1080px;
  max-height: 88vh;
  background: #FFFFFF;
  border-radius: 28px;
  box-shadow: 0 25px 65px -12px rgba(0, 0, 0, 0.45);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid rgba(255, 240, 0, 0.35);
  transform: scale(0.96) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.bd-product-modal-backdrop.is-open .bd-product-modal-container {
  transform: scale(1) translateY(0);
}

/* 2. Floating Close Button (Accessible at all times) */
.bd-modal-floating-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #111111;
  color: #FFF000;
  border: 1px solid rgba(255, 240, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 60;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

.bd-modal-floating-close:hover {
  background: #FFF000;
  color: #111111;
  transform: rotate(90deg) scale(1.06);
}

.bd-modal-floating-close:active {
  transform: scale(0.92);
}

/* 3. Smooth Scrollable Body */
.bd-product-modal-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  position: relative;
}

.bd-product-modal-scroll::-webkit-scrollbar {
  width: 8px;
}

.bd-product-modal-scroll::-webkit-scrollbar-track {
  background: #F8FAFC;
}

.bd-product-modal-scroll::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}

.bd-product-modal-scroll::-webkit-scrollbar-thumb:hover {
  background: #111111;
}

/* Loading State */
.bd-modal-loading-state {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #64748B;
  font-weight: 700;
  font-size: 0.9375rem;
}

.bd-modal-spinner {
  width: 42px;
  height: 42px;
  border: 3.5px solid #F1F5F9;
  border-top-color: #FFF000;
  border-radius: 50%;
  animation: bdSpin 0.75s linear infinite;
}

@keyframes bdSpin {
  to {
    transform: rotate(360deg);
  }
}

/* 4. Hero Section (Desktop & Tablet) */
.bd-modal-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 36px;
  padding: 32px 36px 28px;
  align-items: start;
}

.bd-modal-gallery-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bd-modal-main-img-card {
  background: #ffffff;
  border-radius: 20px;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 1px solid #EEF2F6;
  padding: 20px;
  cursor: zoom-in;
}

.bd-modal-hero-img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease;
  transform-origin: center center;
  will-change: transform, transform-origin;
  pointer-events: none;
}

.bd-modal-sale-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #111111;
  color: #FFF000;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 12px;
  letter-spacing: 0.04em;
  z-index: 5;
}

.bd-modal-wishlist-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s;
  z-index: 5;
}

.bd-modal-wishlist-btn:hover {
  color: #EF4444;
  transform: scale(1.08);
}

.bd-modal-thumbs-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.bd-modal-thumb-btn {
  height: 76px;
  background: #F8FAFC;
  border: 2px solid transparent;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.15s;
}

.bd-modal-thumb-btn:hover {
  border-color: #CBD5E1;
  background: #FFFFFF;
}

.bd-modal-thumb-btn.is-active {
  border-color: #111111;
  background: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bd-modal-thumb-btn img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 5. Details Column */
.bd-modal-details-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bd-modal-brand-tag {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0284C7;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bd-modal-title {
  font-size: 1.85rem;
  font-weight: 500;
  color: #111111;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.bd-modal-rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bd-modal-rating-num {
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748B;
}

.bd-modal-price-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bd-modal-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.bd-modal-current-price {
  font-size: 1.85rem;
  font-weight: 900;
  color: #111111;
}

.bd-modal-regular-price {
  font-size: 1rem;
  font-weight: 600;
  color: #94A3B8;
  text-decoration: line-through;
}

.bd-modal-discount-chip {
  font-size: 0.875rem;
  font-weight: 800;
  color: #EA580C;
}

.bd-modal-tax-note {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #16A34A;
}

.bd-modal-option-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bd-modal-option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bd-modal-option-label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #111111;
}

.bd-modal-size-chart-link {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111111;
  text-decoration: underline;
  cursor: pointer;
}

.bd-modal-size-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.bd-modal-size-btn {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  color: #111111;
  font-weight: 700;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.15s;
}

.bd-modal-size-btn:hover {
  border-color: #111111;
}

.bd-modal-size-btn.is-active {
  border-color: #111111;
  background: #FFF000;
  color: #111111;
  box-shadow: 0 2px 8px rgba(255, 240, 0, 0.4);
}

.bd-modal-stepper-scarcity-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.bd-modal-stepper-capsule {
  display: inline-flex;
  align-items: center;
  background: #F1F5F9;
  border-radius: 24px;
  padding: 3px;
}

.bd-modal-step-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #FFFFFF;
  color: #111111;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.bd-modal-step-val {
  min-width: 32px;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #111111;
}

.bd-modal-scarcity-tag {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #DC2626;
}

.bd-modal-action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}

.bd-modal-btn-buy {
  height: 52px;
  border-radius: 26px;
  background: #111111;
  color: #FFF000;
  font-weight: 800;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s, background 0.15s;
}

.bd-modal-btn-buy:hover {
  background: #000000;
  transform: translateY(-1px);
}

.bd-modal-btn-cart {
  height: 52px;
  border-radius: 26px;
  background: #FFF000;
  color: #111111;
  font-weight: 800;
  font-size: 1rem;
  border: 2px solid #111111;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(255, 240, 0, 0.35);
  transition: transform 0.15s;
}

.bd-modal-btn-cart:hover {
  transform: translateY(-1px);
  background: #FFE600;
}

.bd-modal-share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid #F1F5F9;
}

.bd-modal-share-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #64748B;
}

.bd-modal-share-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bd-modal-share-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
}

.bd-modal-share-btn:hover {
  border-color: #111111;
  transform: translateY(-2px);
}

/* 6. Continuous Scroll Sections Inside Modal */
.bd-modal-highlights-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  background: #F8FAFC;
  padding: 18px 36px;
  border-top: 1px solid #EEF2F6;
  border-bottom: 1px solid #EEF2F6;
}

.bd-modal-highlight-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bd-modal-hi-icon {
  font-size: 1.35rem;
  flex-shrink: 0;
}

.bd-modal-highlight-item strong {
  font-size: 0.8125rem;
  color: #111111;
  display: block;
}

.bd-modal-highlight-item p {
  font-size: 0.75rem;
  color: #64748B;
  margin: 0;
}

.bd-modal-section {
  padding: 30px 36px;
}

.bd-modal-section-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #111111;
  margin-bottom: 14px;
}

.bd-modal-prose {
  font-size: 0.9375rem;
  color: #475569;
  line-height: 1.65;
}

.bd-modal-specs-table {
  margin-top: 18px;
  background: #F8FAFC;
  border-radius: 16px;
  padding: 16px 20px;
  border: 1px solid #EEF2F6;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bd-modal-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px dashed #E2E8F0;
}

.bd-modal-spec-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.bd-spec-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748B;
}

.bd-spec-val {
  font-size: 0.875rem;
  font-weight: 700;
  color: #111111;
}

.bd-modal-reviews-summary {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  background: #F8FAFC;
  padding: 20px;
  border-radius: 16px;
  margin-bottom: 20px;
}

.bd-modal-score-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid #E2E8F0;
  padding-right: 20px;
}

.bd-modal-big-score {
  font-size: 2.75rem;
  font-weight: 900;
  color: #111111;
  line-height: 1;
}

.bd-modal-score-sub {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748B;
  margin-top: 4px;
}

.bd-modal-rating-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.bd-modal-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748B;
}

.bd-modal-bar-track {
  flex: 1;
  height: 6px;
  background: #E2E8F0;
  border-radius: 4px;
  overflow: hidden;
}

.bd-modal-bar-fill {
  height: 100%;
  background: #111111;
  border-radius: 4px;
}

.bd-modal-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bd-modal-review-card {
  border: 1px solid #EEF2F6;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bd-modal-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bd-modal-review-date {
  font-size: 0.75rem;
  color: #94A3B8;
}

.bd-modal-review-card p {
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.5;
  margin: 0;
}

/* 7. Sticky Bottom Conversion Bar */
.bd-modal-sticky-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #E2E8F0;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 50;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bd-modal-sticky-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.bd-modal-sticky-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bd-modal-sticky-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: contain;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
}

.bd-modal-sticky-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #111111;
  margin: 0;
}

.bd-modal-sticky-price {
  font-size: 0.875rem;
  font-weight: 800;
  color: #111111;
}

.bd-modal-sticky-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bd-modal-sticky-buy-btn {
  height: 44px;
  padding: 0 24px;
  border-radius: 22px;
  background: #111111;
  color: #FFF000;
  font-weight: 800;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.bd-modal-sticky-cart-btn {
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  background: #FFF000;
  color: #111111;
  font-weight: 800;
  font-size: 0.875rem;
  border: 1.5px solid #111111;
  cursor: pointer;
}

/* ==========================================================================
   MOBILE VIEWPORT ARCHITECTURE (320px - 768px):
   - PRODUCT IMAGE MUCH BIGGER & FULL WIDTH
   - ALL OTHER ELEMENTS STRICTLY BELOW PRODUCT IMAGE
   ========================================================================== */
@media (max-width: 768px) {

  /* Modal Backdrop acts as Bottom-Sheet Container */
  .bd-product-modal-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .bd-product-modal-container {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 94vh !important;
    border-radius: 28px 28px 0 0 !important;
    transform: translateY(100%) !important;
  }

  .bd-product-modal-backdrop.is-open .bd-product-modal-container {
    transform: translateY(0) !important;
  }

  .bd-modal-floating-close {
    top: 14px !important;
    right: 14px !important;
    width: 40px !important;
    height: 40px !important;
  }

  .bd-modal-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* 1. PRODUCT IMAGE MORE BIGGER & FULL WIDTH */
  .bd-modal-gallery-col {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #FFFFFF !important;
  }

  .bd-modal-main-img-card {
    width: 100% !important;
    height: 380px !important;
    min-height: 380px !important;
    max-height: 420px !important;
    border-radius: 0 !important;
    background: #FAFAFA !important;
    border: none !important;
    border-bottom: 1px solid #F1F5F9 !important;
    padding: 20px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .bd-modal-hero-img {
    width: 100% !important;
    height: 100% !important;
    max-height: 360px !important;
    object-fit: contain !important;
  }

  /* 2. ALL OTHER ELEMENTS STRICTLY BELOW THE PRODUCT IMAGE */
  .bd-modal-thumbs-row {
    padding: 12px 18px 0 !important;
    gap: 10px !important;
  }

  .bd-modal-details-col {
    padding: 20px 18px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .bd-modal-title {
    font-size: 1.45rem !important;
  }

  .bd-modal-current-price {
    font-size: 1.5rem !important;
  }

  .bd-modal-action-buttons {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .bd-modal-highlights-strip {
    grid-template-columns: 1fr !important;
    padding: 16px 18px !important;
  }

  .bd-modal-section {
    padding: 20px 18px !important;
  }

  .bd-modal-reviews-summary {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .bd-modal-score-box {
    border-right: none !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding-right: 0 !important;
    padding-bottom: 14px !important;
  }

  /* Sticky Bottom Bar in Mobile: Touch-optimized 48px buttons */
  .bd-modal-sticky-bar {
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 10px !important;
  }

  .bd-modal-sticky-info {
    display: none !important;
    /* Keep clean and uncluttered on small screens */
  }

  .bd-modal-sticky-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .bd-modal-sticky-buy-btn,
  .bd-modal-sticky-cart-btn {
    width: 100% !important;
    height: 48px !important;
    padding: 0 !important;
    font-size: 0.9375rem !important;
  }

  /* Standalone Single Product View Mobile: Full-width bigger image & stacked elements */
  .bd-anatomy-gallery-col {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding: 0 !important;
    background: #FFFFFF !important;
  }

  .bd-anatomy-main-image-card {
    width: 100% !important;
    height: 380px !important;
    min-height: 380px !important;
    max-height: 420px !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 20px !important;
    background: #FAFAFA !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .bd-gallery-image-viewport {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .bd-main-gallery-img {
    width: 100% !important;
    height: 100% !important;
    max-height: 360px !important;
    object-fit: contain !important;
  }

  .bd-anatomy-summary-col {
    padding: 20px 18px 100px !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
  }
}

/* ==========================================================================
   MOBILE UX COMPATIBILITY & ACCESSIBILITY OVERHAUL (320px - 768px)
   - iOS Auto-Zoom Prevention (16px Input Rule)
   - Apple HIG & WCAG Touch Target Compliance (>= 44x44px)
   - WooCommerce Cart & Checkout Mobile Responsive Cards
   - Safe-Area Inset Support for Notches & Home Gesture Bars
   - Responsive Page Content Box Layout
   ========================================================================== */

/* 1. Global Safe-Area and Overflow Safeguards */
.bd-site-wrapper,
.site-main {
  overflow-x: clip;
}

/* 2. Responsive Page Template (.bd-page-container, .bd-entry-content-box) */
.bd-page-container {
  padding-top: 20px;
  padding-bottom: 50px;
}

.bd-page-header {
  margin-bottom: 20px;
  border-bottom: 1px solid var(--bd-border-subtle);
  padding-bottom: 14px;
}

.bd-entry-content-box {
  background: #ffffff;
  padding: 20px 16px;
  border-radius: var(--bd-radius-lg);
  border: 1px solid var(--bd-border-subtle);
  box-shadow: var(--bd-shadow-xs);
  line-height: 1.7;
}

@media (min-width: 769px) {
  .bd-page-container {
    padding-top: 36px;
    padding-bottom: 64px;
  }

  .bd-page-header {
    margin-bottom: 32px;
    padding-bottom: 16px;
  }

  .bd-entry-content-box {
    padding: 36px;
  }
}

/* 3. Mobile Navigation & Active Filters */
.bd-active-chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.bd-filter-chip {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  background: #f1f5f9;
  color: #111111;
  font-size: 0.8125rem;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  transition: background 0.15s;
}

.bd-filter-chip:hover {
  background: #e2e8f0;
}

.bd-chip-remove {
  font-weight: 800;
  color: #dc2626;
  font-size: 0.75rem;
  margin-left: 2px;
}

.bd-clear-all-chip {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #dc2626;
  text-decoration: underline;
  padding: 6px 8px;
}

@media (max-width: 768px) {

  /* Offset body for fixed mobile dock with safe area support */
  body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 4. iOS Safari Automatic Zoom Prevention */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea,
  .bd-mobile-search-input,
  .woocommerce-Input,
  .woocommerce-form input,
  .woocommerce-form select,
  .woocommerce-form textarea {
    font-size: 16px !important;
  }

  /* 5. Mobile Typography & Touch Target Refinements */
  .bd-onboard-headline {
    font-size: clamp(1.75rem, 6.5vw, 2.25rem) !important;
  }

  .bd-cat-track-wrapper {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
  }

  .bd-cat-item-card {
    scroll-snap-align: none !important;
  }

  /* 6. WOOCOMMERCE MOBILE CART: Responsive Cards */
  .woocommerce-cart .woocommerce {
    width: 100%;
    overflow-x: hidden;
  }

  .woocommerce table.shop_table.cart {
    border: none !important;
    background: transparent !important;
    margin-bottom: 20px !important;
    display: block !important;
    width: 100% !important;
  }

  .woocommerce table.shop_table.cart thead {
    display: none !important;
  }

  .woocommerce table.shop_table.cart tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    grid-template-areas:
      "thumb name"
      "thumb price"
      "thumb qty"
      "thumb subtotal"
      "remove remove" !important;
    gap: 8px 14px !important;
    background: #ffffff !important;
    border: 1px solid var(--bd-border-subtle) !important;
    border-radius: 18px !important;
    padding: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .woocommerce table.shop_table.cart td {
    padding: 0 !important;
    border: none !important;
    display: block !important;
  }

  .woocommerce table.shop_table.cart td.product-thumbnail {
    grid-area: thumb !important;
    width: 80px !important;
    height: 80px !important;
  }

  .woocommerce table.shop_table.cart td.product-thumbnail img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
  }

  .woocommerce table.shop_table.cart td.product-name {
    grid-area: name !important;
    font-weight: 700 !important;
    font-size: 0.9375rem !important;
    line-height: 1.35 !important;
  }

  .woocommerce table.shop_table.cart td.product-name a {
    color: #111111 !important;
    text-decoration: none !important;
  }

  .woocommerce table.shop_table.cart td.product-price {
    grid-area: price !important;
    font-weight: 700 !important;
    color: #64748b !important;
    font-size: 0.875rem !important;
  }

  .woocommerce table.shop_table.cart td.product-quantity {
    grid-area: qty !important;
    margin-top: 4px !important;
  }

  .woocommerce table.shop_table.cart td.product-quantity .quantity input.qty {
    height: 40px !important;
    width: 60px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    text-align: center !important;
  }

  .woocommerce table.shop_table.cart td.product-subtotal {
    grid-area: subtotal !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    color: #111111 !important;
  }

  .woocommerce table.shop_table.cart td.product-remove {
    grid-area: remove !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  .woocommerce table.shop_table.cart td.product-remove a.remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    background: #fef2f2 !important;
    color: #dc2626 !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    line-height: 1 !important;
  }

  .woocommerce table.shop_table.cart td.product-remove a.remove::after {
    content: ' Remove item';
    font-size: 0.8125rem;
    font-weight: 600;
  }

  .woocommerce table.shop_table.cart tr td.actions {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
  }

  .woocommerce table.shop_table.cart tr td.actions .coupon {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  .woocommerce table.shop_table.cart tr td.actions .coupon input.input-text {
    width: 100% !important;
    height: 48px !important;
    border-radius: 24px !important;
    padding: 0 18px !important;
    font-size: 16px !important;
  }

  .woocommerce table.shop_table.cart tr td.actions .coupon button.button,
  .woocommerce table.shop_table.cart tr td.actions>button.button {
    width: 100% !important;
    height: 48px !important;
    border-radius: 24px !important;
    font-weight: 700 !important;
    font-size: 0.9375rem !important;
  }

  .woocommerce-cart .cart-collaterals {
    width: 100% !important;
  }

  .woocommerce-cart .cart-collaterals .cart_totals {
    width: 100% !important;
    float: none !important;
    background: #f8fafc !important;
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
  }

  .woocommerce-cart .cart_totals table.shop_table {
    border: none !important;
    background: transparent !important;
    margin-bottom: 20px !important;
  }

  .woocommerce-cart .cart_totals table.shop_table tr th,
  .woocommerce-cart .cart_totals table.shop_table tr td {
    padding: 12px 0 !important;
    border-top: 1px solid #e2e8f0 !important;
  }

  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    width: 100% !important;
    height: 52px !important;
    border-radius: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    background: #111111 !important;
    color: #FFF000 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    text-decoration: none !important;
  }

  /* 7. WOOCOMMERCE MOBILE CHECKOUT */
  .woocommerce-checkout form.checkout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    width: 100% !important;
    float: none !important;
  }

  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .woocommerce-checkout .form-row {
    width: 100% !important;
    float: none !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
  }

  .woocommerce-checkout .form-row label {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin-bottom: 6px !important;
    display: block !important;
  }

  .woocommerce-checkout .form-row input.input-text,
  .woocommerce-checkout .form-row select,
  .woocommerce-checkout .form-row textarea {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 10px 14px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }

  .woocommerce-checkout #order_review {
    background: #f8fafc !important;
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
  }

  .woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table {
    border: none !important;
    background: transparent !important;
    width: 100% !important;
  }

  .woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table th,
  .woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table td {
    padding: 12px 6px !important;
    border-top: 1px solid #e2e8f0 !important;
    font-size: 0.875rem !important;
  }

  .woocommerce-checkout #payment ul.payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .woocommerce-checkout #payment ul.payment_methods li {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 48px !important;
    cursor: pointer !important;
  }

  .woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    accent-color: #111111 !important;
  }

  .woocommerce-checkout #payment ul.payment_methods li label {
    font-weight: 700 !important;
    font-size: 0.9375rem !important;
    color: #111111 !important;
    cursor: pointer !important;
    flex: 1 !important;
    margin: 0 !important;
  }

  .woocommerce-checkout #payment #place_order {
    width: 100% !important;
    height: 52px !important;
    border-radius: 26px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    background: #111111 !important;
    color: #FFF000 !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    cursor: pointer !important;
  }
}

/* ==========================================================================
   ABOUT US MODERN PAGE STYLES
   ========================================================================== */
.bd-about-canvas {
  background-color: #fafbfc;
  color: #1e293b;
  overflow-x: hidden;
}

.bd-about-hero-banner {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 36px 0 44px;
}

.bd-about-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: #64748b;
  margin-bottom: 12px;
}

.bd-about-breadcrumbs a {
  color: #64748b;
  text-decoration: none;
}

.bd-about-breadcrumbs a:hover {
  color: #111111;
  text-decoration: underline;
}

.bd-bc-sep {
  color: #cbd5e1;
}

.bd-about-page-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #111827;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}

.bd-about-page-subtitle {
  font-size: 1.0625rem;
  color: #475569;
  max-width: 680px;
  margin: 0;
  line-height: 1.5;
}

/* Sections Base */
.bd-about-section {
  padding: 64px 0;
}

/* Story Section */
.bd-about-story-section {
  background: #fafbfc;
}

.bd-about-story-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

.bd-about-eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.bd-about-eyebrow-tag .bd-eyebrow-dot {
  width: 8px;
  height: 8px;
  background: #FFF000;
  border: 2px solid #111111;
  border-radius: 50%;
}

.bd-about-section-heading {
  font-size: 2.35rem;
  font-weight: 900;
  color: #111827;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 20px;
}

.bd-about-lead-box {
  border-left: 4px solid #FFF000;
  padding: 14px 20px;
  background: #ffffff;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: 24px;
}

.bd-about-lead-text {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.6;
  font-style: italic;
  margin: 0;
}

.bd-about-body-text p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 16px;
}

.bd-about-signoff-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.bd-about-signature-img {
  max-height: 50px;
  width: auto;
  object-fit: contain;
}

.bd-about-founder-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #64748b;
}

/* Story Visual Card */
.bd-about-visual-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  background: #ffffff;
}

.bd-about-main-img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

.bd-about-visual-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  padding: 14px 18px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.bd-about-visual-badge .bd-badge-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #FFF000;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bd-about-visual-badge .bd-badge-text strong {
  display: block;
  font-size: 0.9375rem;
  color: #111111;
  font-weight: 800;
}

.bd-about-visual-badge .bd-badge-text span {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
}

/* Stats Section */
.bd-about-stats-section {
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: 48px 0;
}

.bd-about-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.bd-about-stat-card {
  text-align: center;
  padding: 28px 18px;
  background: #f8fafc;
  border-radius: 18px;
  border: 1px solid #eef2f6;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.bd-about-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
  background: #ffffff;
}

.bd-stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 900;
  color: #FFF000;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 6px;
}

.bd-stat-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #64748b;
}

/* Values Section */
.bd-about-values-section {
  background: #fafbfc;
}

.bd-about-header-centered {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 48px;
}

.bd-about-pill-label {
  display: inline-block;
  background: #FFF000;
  color: #111111;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.bd-about-centered-title {
  font-size: 2.15rem;
  font-weight: 900;
  color: #111827;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.bd-about-centered-subtitle {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

.bd-about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.bd-about-value-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 36px 28px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.bd-about-value-card:hover {
  transform: translateY(-4px);
  border-color: #cbd5e1;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
}

.bd-value-icon-box {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: #fffbeb;
  color: #b45309;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid #fef3c7;
}

.bd-value-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 10px;
}

.bd-value-desc {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* Brands Section */
.bd-about-brands-section {
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.bd-about-brands-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.bd-about-brand-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 85px;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.bd-about-brand-card:hover {
  transform: translateY(-2px);
  border-color: #FFF000;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.bd-about-brand-logo {
  max-height: 44px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(20%);
  transition: filter 0.2s ease;
}

.bd-about-brand-card:hover .bd-about-brand-logo {
  filter: grayscale(0%);
}

.bd-about-brand-fallback-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1e293b;
}

/* Testimonials Section */
.bd-about-testimonials-section {
  background: #fafbfc;
}

.bd-about-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.bd-about-review-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bd-review-stars {
  color: #f59e0b;
  font-size: 1.1rem;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.bd-review-quote {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #334155;
  font-style: italic;
  margin: 0 0 24px;
  padding: 0;
  border: none;
}

.bd-reviewer-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;
}

.bd-reviewer-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e2e8f0;
}

.bd-reviewer-info strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #111827;
}

.bd-reviewer-info span {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
}

/* Call to Action Card */
.bd-about-cta-section {
  padding: 0 0 64px;
}

.bd-about-cta-card {
  background: #111111;
  color: #ffffff;
  border-radius: 24px;
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

.bd-cta-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 10px;
}

.bd-cta-desc {
  font-size: 0.95rem;
  color: #94a3b8;
  margin: 0;
  max-width: 550px;
  line-height: 1.6;
}

.bd-cta-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.bd-about-btn-white {
  background: #ffffff;
  color: #111111;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.bd-about-btn-white:hover {
  background: #f1f5f9;
  transform: translateY(-1px);
}

/* Tablet & Mobile Media Queries */
@media (max-width: 991px) {
  .bd-about-story-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .bd-about-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bd-about-values-grid {
    grid-template-columns: 1fr;
  }

  .bd-about-brands-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .bd-about-testimonials-grid {
    grid-template-columns: 1fr;
  }

  .bd-about-cta-card {
    flex-direction: column;
    text-align: center;
    padding: 36px 24px;
  }

  .bd-cta-actions {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .bd-about-section {
    padding: 40px 0;
  }

  .bd-about-hero-banner {
    padding: 24px 0 32px;
  }

  .bd-about-page-title {
    font-size: 1.85rem;
  }

  .bd-about-page-subtitle {
    font-size: 0.9375rem;
  }

  .bd-about-section-heading {
    font-size: 1.65rem;
  }

  .bd-about-centered-title {
    font-size: 1.5rem;
  }

  .bd-about-story-visual {
    order: -1;
  }

  .bd-about-main-img {
    max-height: 250px;
  }

  .bd-about-visual-badge {
    position: static;
    margin-top: 14px;
    box-shadow: none;
    border: 1px solid #e2e8f0;
  }

  .bd-about-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .bd-about-stat-card {
    padding: 18px 12px;
  }

  .bd-stat-number {
    font-size: 1.85rem;
  }

  .bd-about-brands-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bd-about-cta-card {
    padding: 28px 18px;
  }

  .bd-cta-title {
    font-size: 1.35rem;
  }

  .bd-cta-actions {
    flex-direction: column;
    width: 100%;
  }

  .bd-cta-actions a {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
  }
}

/* ==========================================================================
   WOOCOMMERCE CART & CHECKOUT GLOBAL SYSTEM
   Complete sync & modern styling for Blocks, Classic Checkout, Shipping & Payments
   ========================================================================== */
.woocommerce-checkout,
.woocommerce-cart,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1e293b;
}

/* Page Wrappers & Containment */
.woocommerce-checkout .bd-container,
.woocommerce-cart .bd-container,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 20px 80px;
  box-sizing: border-box;
}

/* Classic Checkout: Desktop 2-Column Grid Layout */
@media (min-width: 992px) {
  .woocommerce-checkout form.checkout {
    display: grid !important;
    grid-template-columns: 1.35fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;
  }

  .woocommerce-checkout #customer_details {
    width: 100% !important;
    float: none !important;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  }

  .woocommerce-checkout #order_review_heading {
    display: none !important;
  }

  .woocommerce-checkout #order_review {
    width: 100% !important;
    float: none !important;
    position: sticky !important;
    top: 100px !important;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  }
}

/* Headings in Checkout & Cart */
.woocommerce-checkout h3,
.woocommerce-cart h2,
.wc-block-components-checkout-step__heading {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Clean Form Fields (Desktop & Mobile) */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.wc-block-components-text-input input,
.wc-block-components-combobox input {
  width: 100% !important;
  min-height: 48px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 0.9375rem !important;
  font-family: inherit !important;
  background: #f8fafc !important;
  color: #111827 !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s !important;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus {
  border-color: #111111 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 240, 0, 0.35) !important;
  outline: none !important;
}

.woocommerce-checkout .form-row label,
.wc-block-components-text-input label {
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #475569 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Order Review Table */
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table,
.woocommerce-cart table.shop_table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: none !important;
  margin-bottom: 24px !important;
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table td,
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
  padding: 14px 0 !important;
  border-top: 1px solid #f1f5f9 !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  font-size: 0.9375rem !important;
  color: #334155 !important;
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr.order-total td,
.woocommerce-cart table.shop_table tr.order-total th,
.woocommerce-cart table.shop_table tr.order-total td {
  border-top: 2px solid #111827 !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
  padding-top: 18px !important;
}

/* Shipping Methods Selector (Zones & Rates Sync) */
ul#shipping_method,
.wc-block-components-shipping-rates-control {
  list-style: none !important;
  padding: 0 !important;
  margin: 10px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

ul#shipping_method li,
.wc-block-components-shipping-rates-control .wc-block-components-radio-control {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

ul#shipping_method li:hover,
.wc-block-components-shipping-rates-control .wc-block-components-radio-control:hover {
  border-color: #111111 !important;
  background: #ffffff !important;
}

ul#shipping_method li input[type="radio"],
.wc-block-components-shipping-rates-control input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #111111 !important;
  cursor: pointer !important;
}

ul#shipping_method li label,
.wc-block-components-shipping-rates-control label {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #111827 !important;
  cursor: pointer !important;
  flex: 1 !important;
  margin: 0 !important;
  text-transform: none !important;
}

/* Payment Gateways Sync (BACS, COD, Visa Acceptance Solutions) */
.woocommerce-checkout #payment {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.woocommerce-checkout #payment ul.payment_methods,
.wc-block-components-payment-methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.woocommerce-checkout #payment ul.payment_methods li,
.wc-block-components-radio-control-accordion-option {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease !important;
}

.woocommerce-checkout #payment ul.payment_methods li:hover,
.wc-block-components-radio-control-accordion-option:hover {
  border-color: #94a3b8 !important;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  width: 20px !important;
  height: 20px !important;
  accent-color: #111111 !important;
  margin-right: 10px !important;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  cursor: pointer !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.woocommerce-checkout #payment div.payment_box,
.wc-block-components-radio-control-accordion-content {
  background: #f8fafc !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin-top: 12px !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  color: #475569 !important;
  border-left: 3px solid #111111 !important;
}

.woocommerce-checkout #payment div.payment_box::before {
  display: none !important;
}

/* Place Order & Proceed to Checkout Buttons */
.woocommerce-checkout #payment #place_order,
.wc-block-components-checkout-place-order-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  width: 100% !important;
  height: 54px !important;
  border-radius: 27px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  background: #111111 !important;
  color: #FFF000 !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.woocommerce-checkout #payment #place_order:hover,
.wc-block-components-checkout-place-order-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: #000000 !important;
  color: #FFF000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Terms & Conditions Checkbox */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
.wc-block-checkout__terms {
  margin: 18px 0 !important;
  font-size: 0.8125rem !important;
  color: #64748b !important;
  line-height: 1.5 !important;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
.wc-block-checkout__terms input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #111111 !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a,
.wc-block-checkout__terms a {
  color: #111827 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

/* Trust Badges below Place Order */
.bd-checkout-trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
}

.bd-checkout-trust-badges span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ==========================================================================
   AUTHENTICATION & USER REGISTRATION MODAL STYLES
   ========================================================================== */
.bd-auth-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}

.bd-auth-modal-backdrop.is-active {
  opacity: 1;
  visibility: visible;
}

.bd-auth-modal-card {
  background: #ffffff;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 24px;
  padding: 36px 32px 32px;
  box-sizing: border-box;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
  position: relative;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

.bd-auth-modal-backdrop.is-active .bd-auth-modal-card {
  transform: translateY(0) scale(1);
}

.bd-auth-modal-card::-webkit-scrollbar {
  width: 6px;
}

.bd-auth-modal-card::-webkit-scrollbar-track {
  background: transparent;
}

.bd-auth-modal-card::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

/* Floating Close Button */
.bd-auth-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bd-auth-close-btn:hover {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
  transform: rotate(90deg);
}

/* Modal Header */
.bd-auth-header {
  text-align: center;
  margin-bottom: 24px;
}

.bd-auth-brand-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #FFF000;
  color: #111111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(255, 240, 0, 0.4);
}

.bd-auth-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.bd-auth-subtitle {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}

/* Segmented Tabs Switcher */
.bd-auth-tabs-nav {
  display: flex;
  background: #f1f5f9;
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 24px;
  position: relative;
}

.bd-auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #64748b;
  border-radius: 11px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 2;
  font-family: inherit;
}

.bd-auth-tab.is-active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Social Login Integration */
.bd-social-auth-section {
  margin-bottom: 20px;
}

.bd-social-auth-section .nsl-container,
.bd-social-auth-section .nsl-container-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

.bd-social-auth-section .nsl-button {
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.bd-social-auth-section .nsl-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.bd-auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 18px 0 14px;
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bd-auth-divider::before,
.bd-auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #e2e8f0;
}

.bd-auth-divider:not(:empty)::before {
  margin-right: 12px;
}

.bd-auth-divider:not(:empty)::after {
  margin-left: 12px;
}

/* Form Alert Box */
.bd-auth-alert {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.8125rem;
  line-height: 1.45;
  margin-bottom: 18px;
  font-weight: 600;
}

.bd-auth-alert.bd-alert-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.bd-auth-alert.bd-alert-success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

/* Forms & Inputs */
.bd-auth-form {
  display: none;
  flex-direction: column;
  gap: 16px;
}

.bd-auth-form.is-active {
  display: flex;
}

.bd-auth-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bd-auth-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bd-auth-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #334155;
}

.bd-auth-label .required {
  color: #ef4444;
}

.bd-auth-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bd-auth-forgot-link {
  font-size: 0.75rem;
  color: #64748b;
  text-decoration: none;
  font-weight: 600;
}

.bd-auth-forgot-link:hover {
  color: #111111;
  text-decoration: underline;
}

.bd-auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.bd-auth-field-icon {
  position: absolute;
  left: 14px;
  color: #94a3b8;
  pointer-events: none;
}

.bd-auth-input {
  width: 100%;
  height: 48px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 0 14px 0 42px;
  font-size: 0.9375rem;
  font-family: inherit;
  color: #111827;
  background: #f8fafc;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.bd-auth-two-col .bd-auth-input {
  padding-left: 14px;
}

.bd-auth-input:focus {
  outline: none;
  border-color: #111111;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 240, 0, 0.4);
}

.bd-auth-password-toggle {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
}

.bd-auth-password-toggle:hover {
  color: #111111;
}

/* Password Strength Meter */
.bd-pass-strength-bar {
  width: 100%;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.bd-pass-strength-fill {
  height: 100%;
  width: 0;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.bd-pass-strength-fill.is-weak {
  background: #ef4444;
}

.bd-pass-strength-fill.is-medium {
  background: #f59e0b;
}

.bd-pass-strength-fill.is-strong {
  background: #10b981;
}

.bd-pass-strength-text {
  font-size: 0.71875rem;
  color: #64748b;
  margin-top: 2px;
}

/* Checkboxes */
.bd-auth-options-row,
.bd-auth-terms-row {
  display: flex;
  align-items: center;
}

.bd-auth-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: #475569;
  cursor: pointer;
}

.bd-auth-checkbox-label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #111111;
  cursor: pointer;
}

.bd-auth-checkbox-label a {
  color: #111111;
  font-weight: 700;
  text-decoration: underline;
}

/* Submit Buttons */
.bd-auth-submit-btn {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background: #111111;
  color: #FFF000;
  font-size: 1rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  margin-top: 6px;
}

.bd-auth-submit-btn:hover {
  background: #000000;
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.bd-auth-submit-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  transform: none;
}

.bd-btn-spinner {
  width: 16px;
  height: 16px;
  border: 2.5px solid rgba(255, 240, 0, 0.3);
  border-top-color: #FFF000;
  border-radius: 50%;
  animation: bdSpin 0.7s linear infinite;
}

@keyframes bdSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Footer Switch Prompt */
.bd-auth-footer-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: #64748b;
  margin-top: 4px;
}

.bd-auth-switch-btn {
  background: transparent;
  border: none;
  color: #111111;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  font-family: inherit;
  font-size: inherit;
}

.bd-auth-switch-btn:hover {
  color: #2563eb;
}

/* ==========================================================================
   USER ACCOUNT DROPDOWN MENU (LOGGED IN STATE)
   ========================================================================== */
.bd-user-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.bd-user-dropdown-toggle {
  cursor: pointer;
}

.bd-user-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 240px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 12px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9999;
}

.bd-user-dropdown-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bd-user-dropdown-header {
  padding: 8px 12px 12px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 8px;
}

.bd-user-dropdown-header strong {
  display: block;
  font-size: 0.9375rem;
  color: #111827;
  font-weight: 700;
}

.bd-user-dropdown-header span {
  display: block;
  font-size: 0.75rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-user-dropdown-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bd-user-dropdown-links li a {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 10px;
  color: #334155;
  text-decoration: none;
  font-size: 0.84375rem;
  font-weight: 600;
  transition: all 0.15s ease;
}

.bd-user-dropdown-links li a:hover {
  background: #f8fafc;
  color: #111111;
  transform: translateX(3px);
}

.bd-dropdown-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 6px 0;
}

.bd-user-dropdown-links li a.bd-logout-link {
  color: #dc2626;
}

.bd-user-dropdown-links li a.bd-logout-link:hover {
  background: #fef2f2;
  color: #991b1b;
}

@media (max-width: 640px) {
  .bd-auth-modal-card {
    padding: 28px 20px 24px;
    border-radius: 20px;
  }

  .bd-auth-two-col {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ==========================================================================
   WOOCOMMERCE MY ACCOUNT & ADDRESS MANAGEMENT SUITE (NEAT ARRANGEMENT)
   ========================================================================== */
.woocommerce-account .bd-main-canvas {
  background-color: #f8fafc;
  padding: 40px 0 80px;
  min-height: calc(100vh - 300px);
}

.woocommerce-account .bd-account-container {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.woocommerce-account .bd-entry-content-box {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* 2-Column Responsive Dashboard Layout */
@media (min-width: 992px) {
  .woocommerce-account .woocommerce {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 40px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
  content: none !important;
  display: none !important;
}

/* --------------------------------------------------------------------------
   Left Sidebar: Header & Navigation
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .bd-account-sidebar-wrapper {
  float: none !important;
  width: 100% !important;
  max-width: 260px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  position: sticky;
  top: 90px;
}

.bd-account-sidebar-wrapper {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bd-account-user-profile-header {
  margin-bottom: 4px;
}

.bd-account-main-title {
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 4px !important;
  line-height: 1.2 !important;
}

.bd-account-user-meta {
  font-size: 0.8125rem !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}

.bd-account-user-name {
  font-weight: 700 !important;
  color: #1f2937 !important;
}

.bd-account-user-email-label {
  color: #64748b !important;
}

.bd-account-user-email {
  color: #64748b !important;
  word-break: break-all !important;
}

/* Navigation List */
.bd-account-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
}

.bd-account-nav-list li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
}

.bd-account-nav-list li a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 14px !important;
  border-radius: 20px !important;
  font-size: 0.90625rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
  text-decoration: none !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Icon Badge Container */
.bd-nav-icon-badge {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  flex-shrink: 0 !important;
  transition: all 0.18s ease !important;
}

.bd-nav-icon-badge svg {
  display: block;
}

/* Hover State */
.bd-account-nav-list li:not(.is-active) a:hover {
  background: #f1f5f9 !important;
  color: #111827 !important;
}

.bd-account-nav-list li:not(.is-active) a:hover .bd-nav-icon-badge {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Active State (Screenshot-matched with BigDot signature theme colors) */
.bd-account-nav-list li.is-active a {
  background: #FEF9C3 !important;
  /* Soft BigDot yellow tint matching the pill in screenshot */
  color: #111111 !important;
  font-weight: 700 !important;
}

.bd-account-nav-list li.is-active .bd-nav-icon-badge {
  background: #FFF000 !important;
  /* Vibrant BigDot yellow */
  color: #111111 !important;
  box-shadow: 0 2px 6px rgba(255, 240, 0, 0.45) !important;
}

/* Nav Divider */
.bd-account-nav-divider {
  height: 1px !important;
  background: #e5e7eb !important;
  margin: 10px 14px !important;
  list-style: none !important;
}

/* Customer Support & Logout Styling */
.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: #dc2626 !important;
}

.woocommerce-MyAccount-navigation-link--customer-logout .bd-nav-icon-badge {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

/* --------------------------------------------------------------------------
   Right Content Area: Tabs & Modern Cards
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content {
  background: transparent !important;
  padding: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}

.bd-account-content-wrapper {
  width: 100% !important;
}

/* Top Filter Tabs Bar */
.bd-account-tabs-container {
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
}

.bd-account-tabs-pill-group {
  display: inline-flex !important;
  align-items: center !important;
  background: #f1f5f9 !important;
  border-radius: 10px !important;
  padding: 4px !important;
  gap: 4px !important;
}

.bd-account-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 18px !important;
  font-size: 0.84375rem !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  transition: all 0.18s ease !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
}

.bd-account-tab:hover {
  color: #111827 !important;
}

.bd-account-tab.is-active {
  background: #ffffff !important;
  color: #111827 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  border-color: #e2e8f0 !important;
}

/* Address Cards Stack */
.bd-address-cards-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
}

/* Modern Card Component (Matches Order & Address cards in screenshot) */
.bd-account-card {
  background: #ffffff !important;
  border: 1.5px solid #eaecf0 !important;
  border-radius: 16px !important;
  padding: 22px 26px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bd-account-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
}

/* Card Header */
.bd-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
}

.bd-card-title {
  font-size: 1.125rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}

.bd-card-meta {
  font-size: 0.8125rem !important;
  color: #64748b !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  align-items: center !important;
}

.bd-meta-dot {
  color: #cbd5e1 !important;
  margin: 0 3px !important;
}

.bd-card-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* Action Button: Styled identical to "Download invoice" pill in screenshot */
.bd-card-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 15px !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  background: #ffffff !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.bd-card-action-btn:hover {
  background: #111111 !important;
  color: #FFF000 !important;
  border-color: #111111 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.bd-card-action-btn svg {
  display: block;
}

/* Kebab Menu Button (3 dots) */
.bd-card-kebab-btn {
  width: 32px !important;
  height: 32px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.bd-card-kebab-btn:hover {
  border-color: #cbd5e1 !important;
  color: #111827 !important;
  background: #f8fafc !important;
}

/* Card Divider */
.bd-card-divider {
  height: 1px !important;
  background: #f1f5f9 !important;
  margin: 16px 0 !important;
  border: none !important;
}

/* Card Details Grid: Flexbox layout for pixel-perfect neat arrangement */
.bd-card-details-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  padding-top: 2px !important;
}

.bd-detail-row {
  display: flex !important;
  align-items: baseline !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  width: 100% !important;
}

.bd-detail-label {
  width: 130px !important;
  min-width: 130px !important;
  flex-shrink: 0 !important;
  font-weight: 600 !important;
  color: #64748b !important;
}

.bd-detail-value {
  flex: 1 !important;
  min-width: 0 !important;
  color: #111827 !important;
  font-weight: 500 !important;
  word-break: break-word !important;
}

.bd-detail-sub {
  color: #64748b !important;
  font-weight: 400 !important;
}

.bd-inline-add-link {
  color: #111111 !important;
  font-weight: 700 !important;
  margin-left: 8px !important;
  text-decoration: underline !important;
  font-size: 0.8125rem !important;
}

.bd-inline-add-link:hover {
  color: #000000 !important;
}

.bd-total-value strong {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
}

/* Status Badges */
.bd-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
}

.bd-status-active {
  color: #16a34a !important;
  /* Green (as Shipped to customer in screenshot) */
}

.bd-status-warning {
  color: #d97706 !important;
  /* Amber (as On the way in screenshot) */
}

.bd-status-pending {
  color: #d97706 !important;
}

.bd-status-danger {
  color: #dc2626 !important;
}

/* Products Sub-Grid (2-column layout in Order card) */
.bd-order-products-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 16px !important;
}

.bd-order-product-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.bd-product-item-thumb {
  width: 54px !important;
  height: 54px !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  border: 1px solid #f1f5f9 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bd-product-item-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.bd-product-item-details {
  flex: 1 !important;
  min-width: 0 !important;
}

.bd-product-item-name {
  font-size: 0.84375rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 2px !important;
  line-height: 1.3 !important;
}

.bd-product-item-name a {
  color: inherit !important;
  text-decoration: none !important;
}

.bd-product-item-name a:hover {
  text-decoration: underline !important;
}

.bd-product-item-meta {
  font-size: 0.78125rem !important;
  color: #64748b !important;
  margin: 0 !important;
}

/* Empty State / CTA */
.bd-card-footer-cta {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.bd-btn-add-highlight {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #111111 !important;
  color: #FFF000 !important;
  font-size: 0.8125rem !important;
  font-weight: 800 !important;
  padding: 7px 16px !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.bd-btn-add-highlight:hover {
  background: #000000 !important;
  color: #FFF000 !important;
  transform: translateY(-1px) !important;
}

.bd-empty-orders-card {
  text-align: center !important;
  padding: 48px 24px !important;
}

.bd-empty-icon {
  font-size: 3rem !important;
  margin-bottom: 12px !important;
}

.bd-empty-orders-card h3 {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
  margin: 0 0 8px !important;
}

.bd-empty-orders-card p {
  color: #64748b !important;
  max-width: 440px !important;
  margin: 0 auto 20px !important;
  font-size: 0.9375rem !important;
}

.bd-btn-shop-now {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #111111 !important;
  color: #FFF000 !important;
  font-weight: 800 !important;
  font-size: 0.9375rem !important;
  padding: 10px 24px !important;
  border-radius: 24px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.bd-btn-shop-now:hover {
  background: #000000 !important;
  color: #FFF000 !important;
  transform: translateY(-2px) !important;
}

/* Logged-Out State Container */
.woocommerce-account:not(.logged-in) .woocommerce {
  display: block !important;
  max-width: 460px !important;
  margin: 30px auto !important;
}

.woocommerce-account:not(.logged-in) .woocommerce h2 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
  margin-bottom: 18px !important;
  text-align: center !important;
}

.woocommerce-account:not(.logged-in) .woocommerce form.login {
  background: #ffffff !important;
  border: 1.5px solid #eaecf0 !important;
  border-radius: 20px !important;
  padding: 32px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}


/* --------------------------------------------------------------------------
   Edit Address Form (/edit-address/billing/ & /shipping/)
   -------------------------------------------------------------------------- */
.woocommerce-account form[method="post"] h2,
.woocommerce-account form[method="post"] h3 {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
  margin: 0 0 20px !important;
}

.woocommerce-account .woocommerce-address-fields {
  background: #ffffff;
  border: 1.5px solid #eaecf0;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.woocommerce-account .woocommerce-address-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide,
.woocommerce-account .woocommerce-address-fields__field-wrapper #billing_address_1_field,
.woocommerce-account .woocommerce-address-fields__field-wrapper #billing_address_2_field,
.woocommerce-account .woocommerce-address-fields__field-wrapper #shipping_address_1_field,
.woocommerce-account .woocommerce-address-fields__field-wrapper #shipping_address_2_field,
.woocommerce-account .woocommerce-address-fields__field-wrapper #billing_country_field,
.woocommerce-account .woocommerce-address-fields__field-wrapper #shipping_country_field {
  grid-column: span 2 !important;
}

.woocommerce-account .form-row label {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #475569 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.woocommerce-account .form-row label .required {
  color: #ef4444 !important;
}

.woocommerce-account .form-row input.input-text,
.woocommerce-account .form-row select,
.woocommerce-account .form-row textarea {
  width: 100% !important;
  min-height: 48px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-size: 0.9375rem !important;
  font-family: inherit !important;
  background: #f8fafc !important;
  color: #111827 !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.woocommerce-account .form-row input.input-text:focus,
.woocommerce-account .form-row select:focus,
.woocommerce-account .form-row textarea:focus {
  border-color: #111111 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 240, 0, 0.4) !important;
  outline: none !important;
}

.woocommerce-account button[name="save_address"],
.woocommerce-account button[name="save_account_details"] {
  height: 50px !important;
  border-radius: 25px !important;
  font-size: 0.9375rem !important;
  font-weight: 800 !important;
  background: #111111 !important;
  color: #FFF000 !important;
  border: none !important;
  padding: 0 36px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin-top: 24px !important;
  font-family: inherit !important;
}

.woocommerce-account button[name="save_address"]:hover,
.woocommerce-account button[name="save_account_details"]:hover {
  background: #000000 !important;
  color: #FFF000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25) !important;
}

/* --------------------------------------------------------------------------
   Mobile Responsiveness
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .woocommerce-account .woocommerce {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    position: static !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }

  .bd-account-nav-list {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .bd-account-nav-list li {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 140px !important;
  }

  .bd-account-nav-list li a {
    padding: 10px 12px !important;
    font-size: 0.8125rem !important;
    justify-content: flex-start !important;
  }

  .bd-account-nav-divider {
    display: none !important;
  }

  .bd-card-details-grid {
    grid-template-columns: 110px 1fr !important;
  }

  .bd-order-products-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .bd-card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .bd-card-details-grid {
    grid-template-columns: 1fr !important;
    row-gap: 6px !important;
  }

  .bd-card-details-grid .bd-detail-label {
    margin-top: 8px !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }
}

/* ==========================================================================
   CONTACT US NEW PAGE (MATCHING ATTACHED DESIGN & SITE THEME)
   ========================================================================== */

.bd-contact-canvas {
  background-color: #ffffff;
  min-height: 100vh;
}

/* 1. Hero Header Banner */
.bd-contact-hero-banner {
  padding: 56px 20px 48px;
  text-align: center;
  color: #ffffff;
  position: relative;
}

.bd-contact-page-title {
  font-size: 2.75rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
  font-family: inherit;
}

.bd-contact-breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #a3b8b0;
}

.bd-contact-breadcrumbs a {
  color: #d1d5db;
  text-decoration: none;
  transition: color 0.2s ease;
}

.bd-contact-breadcrumbs a:hover {
  color: #FFF000;
}

.bd-contact-breadcrumbs .bd-bc-sep {
  color: #6b7280;
}

.bd-contact-breadcrumbs .bd-bc-active {
  color: #FFF000;
  font-weight: 700;
}

/* 2. Main 2-Column Section */
.bd-contact-main-section {
  padding: 72px 0 80px;
}

.bd-contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: start;
}

/* Left Column: Form */
.bd-contact-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.bd-contact-dash {
  width: 24px;
  height: 2.5px;
  background: #eab308;
  display: inline-block;
  border-radius: 2px;
}

.bd-contact-eyebrow-text {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #374151;
  text-transform: uppercase;
}

.bd-contact-heading {
  font-size: 2.6rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 32px 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.bd-heading-prefix {
  font-weight: 800;
}

.bd-heading-highlight {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  color: #fff000;
  margin-left: 6px;
}

.bd-contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bd-form-row-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.bd-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bd-form-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1f2937;
}

.bd-form-input,
.bd-form-textarea {
  background: #f4f5f7;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 0.9375rem;
  color: #111827;
  transition: all 0.2s ease;
  outline: none;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.bd-form-input:focus,
.bd-form-textarea:focus {
  background: #ffffff;
  border-color: #111111;
  box-shadow: 0 0 0 3px rgba(255, 240, 0, 0.4);
}

.bd-form-input::placeholder,
.bd-form-textarea::placeholder {
  color: #9ca3af;
  font-size: 0.9rem;
}

.bd-form-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Actions Row */
.bd-form-actions-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Signature Pill Button (from reference) */
.bd-btn-signature-pill {
  display: inline-flex;
  align-items: center;
  background: #e5b034;
  color: #111111;
  border: none;
  border-radius: 9999px;
  padding: 5px 28px 5px 6px;
  font-size: 0.9375rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(229, 176, 52, 0.3);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
}

.bd-btn-signature-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(229, 176, 52, 0.45);
  background: #d4a028;
}

.bd-pill-icon-capsule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #111827;
  color: #ffffff;
  margin-right: 14px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.bd-btn-signature-pill:hover .bd-pill-icon-capsule {
  transform: translateX(3px);
}

.bd-pill-text {
  letter-spacing: 0.01em;
}

/* WhatsApp Customer Service Button */
.bd-btn-whatsapp-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #25D366;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 9999px;
  padding: 8px 22px 8px 12px;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.bd-btn-whatsapp-pill:hover {
  background: #20bd5a;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5);
}

.bd-wa-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}

.bd-wa-content {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.2;
}

.bd-wa-text {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #ffffff;
}

.bd-wa-subtext {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.bd-wa-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: bd-wa-pulse-anim 2s infinite;
  margin-left: 2px;
}

@keyframes bd-wa-pulse-anim {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* Status Alert */
.bd-contact-status {
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-top: 14px;
  line-height: 1.4;
}

.bd-contact-status.success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.bd-contact-status.error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.bd-contact-status.loading {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* Right Column: Asymmetric Dark Card (BigDot Jet Black & Yellow Theme) */
.bd-contact-info-card {
  border-radius: 28px 96px 28px 28px;
  padding: 48px 42px;
  background-color: #111111 !important;
  color: #FFF000 !important;
  border: 1px solid rgba(255, 240, 0, 0.2);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
}

.bd-card-section {
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(255, 240, 0, 0.12);
  padding-bottom: 22px;
}

.bd-card-section:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.bd-card-section-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFF000 !important;
  margin: 0 0 10px 0;
  letter-spacing: -0.01em;
}

.bd-card-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #FFF000 !important;
  margin: 0;
  opacity: 0.95;
}

.bd-card-contact-list,
.bd-card-hours-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9375rem;
  color: #FFF000 !important;
}

.bd-card-prop {
  color: #FFF000 !important;
  font-weight: 700;
  margin-right: 6px;
  opacity: 0.85;
}

.bd-card-contact-list a {
  color: #FFF000 !important;
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px dashed rgba(255, 240, 0, 0.4);
  transition: all 0.2s ease;
}

.bd-card-contact-list a:hover {
  color: #ffffff !important;
  border-bottom-color: #ffffff;
}

.bd-card-social-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.bd-social-circle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FFF000;
  color: #111111 !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.bd-social-circle-btn:hover {
  background: #ffffff;
  color: #000000 !important;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 18px rgba(255, 240, 0, 0.4);
}

/* 3. Google Maps Section */
.bd-contact-map-section {
  width: 100%;
  overflow: hidden;
  background: #eaedf0;
  line-height: 0;
}

.bd-map-container {
  width: 100%;
  position: relative;
}

.bd-map-container iframe {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}

/* 4. Feature Highlights Bar */
.bd-contact-features-section {
  padding: 48px 0;
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}

.bd-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  align-items: center;
}

.bd-feature-card {
  display: flex;
  align-items: center;
  gap: 20px;
}

.bd-feature-icon-box {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bd-icon-cube {
  background: #fff8e6;
  color: #d97706;
}

.bd-icon-clock {
  background: #fef3c7;
  color: #b45309;
}

.bd-icon-team {
  background: #f3f4f6;
  color: #374151;
}

.bd-feature-title {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 4px 0;
}

.bd-feature-desc {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

/* 5. Bottom Yellow Scrolling Marquee */
.bd-contact-marquee-banner {
  background: #FFF000;
  overflow: hidden;
  padding: 16px 0;
  white-space: nowrap;
  border-top: 1px solid #e0d400;
  user-select: none;
}

.bd-marquee-track {
  display: flex;
  width: max-content;
  animation: bd-marquee-scroll 35s linear infinite;
}

.bd-contact-marquee-banner:hover .bd-marquee-track {
  animation-play-state: paused;
}

.bd-marquee-group {
  display: flex;
  align-items: center;
  font-size: 1.0625rem;
  font-weight: 800;
  color: #111111;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bd-marquee-glyph {
  color: #111111;
  margin: 0 20px;
  font-size: 1.25rem;
  vertical-align: middle;
}

@keyframes bd-marquee-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   Responsive Design for Contact Page
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .bd-contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .bd-contact-heading {
    font-size: 2.1rem;
  }

  .bd-features-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .bd-contact-info-card {
    border-radius: 24px 64px 24px 24px;
    padding: 36px 28px;
  }
}

@media (max-width: 640px) {
  .bd-contact-hero-banner {
    padding: 40px 16px 36px;
  }

  .bd-contact-page-title {
    font-size: 2.1rem;
  }

  .bd-form-row-half {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .bd-contact-main-section {
    padding: 44px 0 56px;
  }

  .bd-form-actions-row {
    flex-direction: column;
    align-items: stretch;
  }

  .bd-btn-signature-pill {
    justify-content: flex-start;
  }

  .bd-btn-whatsapp-pill {
    justify-content: center;
  }

  .bd-contact-info-card {
    padding: 28px 20px;
    border-radius: 20px 48px 20px 20px;
  }
}

/* Dynamic WooCommerce Attribute Chips */
.bd-attr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  font-size: 0.85rem;
  color: #334155;
  transition: border-color 0.2s ease;
}

.bd-attr-chip:hover {
  border-color: #CBD5E1;
}

.bd-attr-chip strong {
  font-weight: 700;
  color: #0F172A;
}

/* ==========================================================================
   MOBILE NOTIFICATION POPUP MODAL & OVERLAY
   ========================================================================== */
.bd-mobile-notif-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99998;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.bd-mobile-notif-overlay.is-open {
  display: block;
  opacity: 1;
}

.bd-mobile-notif-modal {
  display: none;
  position: fixed;
  top: 68px;
  right: 14px;
  width: calc(100vw - 28px);
  max-width: 360px;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
  z-index: 99999;
  border: 1.5px solid #F1F5F9;
  overflow: hidden;
  animation: bdNotifFadeSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.bd-mobile-notif-modal.is-open {
  display: block;
}

@keyframes bdNotifFadeSlide {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.bd-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #141416;
  color: #ffffff;
}

.bd-notif-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #FFF000;
}

.bd-notif-title svg {
  stroke: #FFF000;
}

.bd-notif-close {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 1.35rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}

.bd-notif-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.bd-notif-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
}

.bd-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
}

.bd-notif-ico {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.bd-notif-text strong {
  display: block;
  font-size: 0.875rem;
  color: #0F172A;
  margin-bottom: 2px;
}

.bd-notif-text p {
  margin: 0;
  font-size: 0.78125rem;
  color: #64748B;
  line-height: 1.35;
}

.bd-notif-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.78125rem;
  font-weight: 700;
  color: #0F172A;
  text-decoration: underline;
}

/* ==========================================================================
   MY-ACCOUNT: NATIVE MOBILE PROFILE VIEW (MATCHES ATTACHED SCREENSHOT)
   ========================================================================== */
/* ==========================================================================
   MY-ACCOUNT: RESPONSIVE DISPLAY LOGIC
   Desktop & Tab view (min-width: 768px): Exact previous way (theme grid & navigation).
   Mobile view (max-width: 767.98px): Custom mobile friendly Profile layout.
   ========================================================================== */

/* 1. Desktop & Tab View (min-width: 768px): Keep the exact previous layout */
@media (min-width: 768px) {
  .bd-mobile-profile-container {
    display: none !important;
  }

  .bd-mobile-auth-only {
    display: none !important;
  }

  .bd-desktop-tab-content {
    display: block !important;
  }

  .bd-desktop-tab-auth-wrapper {
    display: block !important;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    display: block !important;
  }

  .bd-desktop-tab-auth-wrapper #customer_login.col2-set {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }
}

/* 2. Mobile View Only (max-width: 767.98px): Native Mobile Profile Layout */
@media (max-width: 767.98px) {
  .bd-desktop-tab-content {
    display: none !important;
  }

  .bd-desktop-tab-auth-wrapper {
    display: none !important;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    display: none !important;
  }

  .woocommerce-account .bd-page-header {
    display: none !important;
  }

  .bd-mobile-auth-only {
    display: block !important;
  }

  .bd-mobile-profile-container {
    display: block !important;
    padding: 16px 20px 110px;
    max-width: 440px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* 1. Profile Top Bar */
  .bd-profile-top-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 10px 0 16px;
  }

  .bd-profile-top-bar.is-subpage-bar {
    justify-content: space-between;
  }

  .bd-profile-page-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #111111;
    margin: 0;
    letter-spacing: -0.02em;
    text-align: center;
  }

  .bd-profile-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #111111;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 12px;
    background: #F1F5F9;
    transition: background 0.15s;
  }

  .bd-profile-back-link:active {
    background: #E2E8F0;
  }

  .bd-profile-back-link svg {
    stroke: #111111;
  }

  /* 2. User Profile Card (Avatar + Badge + Name + Gear Button) */
  .bd-profile-user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0 24px;
  }

  .bd-profile-user-left {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .bd-profile-avatar-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
  }

  .bd-profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border: 2px solid #ffffff;
  }

  .bd-profile-camera-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #FFF000;
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111111;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
    transition: transform 0.15s ease;
  }

  .bd-profile-camera-badge:active {
    transform: scale(0.9);
  }

  .bd-profile-camera-badge svg {
    stroke: #111111;
  }

  .bd-profile-user-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .bd-profile-name {
    font-size: 1.1875rem;
    font-weight: 800;
    color: #111111;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .bd-profile-email {
    font-size: 0.84375rem;
    color: #8E8E93;
    margin: 0;
    word-break: break-all;
  }

  /* Gear / Settings Circular Dark Button */
  .bd-profile-settings-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #232536;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    transition: transform 0.15s, background-color 0.15s;
    flex-shrink: 0;
  }

  .bd-profile-settings-btn:active {
    transform: scale(0.92);
    background: #181924;
  }

  .bd-profile-settings-btn svg {
    stroke: #ffffff;
  }

  /* 3. Section Heading */
  .bd-profile-section-heading {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #111111;
    margin: 22px 0 12px;
    letter-spacing: -0.01em;
  }

  /* 4. "My Orders" Dark Card (Packed / Delivery / Give a Rating) */
  .bd-profile-orders-card {
    background: #0D0E12;
    border-radius: 22px;
    padding: 20px 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 24px;
  }

  .bd-profile-order-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    transition: transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .bd-profile-order-col:active {
    transform: scale(0.92);
  }

  .bd-profile-order-icon-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bd-profile-order-icon-wrap svg {
    stroke: #ffffff;
    transition: stroke 0.2s;
  }

  .bd-profile-order-col:hover .bd-profile-order-icon-wrap svg {
    stroke: #FFF000;
  }

  .bd-profile-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #FF3B30;
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 800;
    min-width: 17px;
    height: 17px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(255, 59, 48, 0.5);
  }

  .bd-profile-order-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #E2E8F0;
    margin-top: 6px;
    text-align: center;
  }

  /* 5. "General" Menu Pill Stack */
  .bd-profile-general-menu {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }

  .bd-profile-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F3F4F7;
    border-radius: 18px;
    padding: 12px 18px;
    text-decoration: none;
    color: #111111;
    transition: all 0.16s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .bd-profile-menu-row:active {
    transform: scale(0.98);
    background: #E8EBF0;
  }

  .bd-profile-menu-row-left {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .bd-profile-row-ico {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #252839;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .bd-profile-row-ico svg {
    stroke: #ffffff;
  }

  .bd-profile-row-text {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #111111;
    letter-spacing: -0.01em;
  }

  .bd-profile-row-arrow {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111111;
  }

  /* Dark Theme iOS Switch */
  .bd-profile-theme-row {
    cursor: default;
  }

  .bd-profile-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px;
    margin: 0;
  }

  .bd-profile-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .bd-profile-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #CBD5E1;
    transition: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 30px;
  }

  .bd-profile-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    transition: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  }

  .bd-profile-switch input:checked + .bd-profile-slider {
    background-color: #FFF000;
  }

  .bd-profile-switch input:checked + .bd-profile-slider:before {
    transform: translateX(20px);
    background-color: #111111;
  }

  /* Red Logout Pill */
  .bd-profile-menu-row.is-logout {
    background: #FFF1F2;
    border: 1px solid #FFE4E6;
    margin-top: 6px;
  }

  .bd-profile-menu-row.is-logout:active {
    background: #FEE2E2;
  }

  .bd-profile-row-ico.is-logout-ico {
    background: #EF4444;
    color: #ffffff;
  }

  .bd-profile-row-ico.is-logout-ico svg {
    stroke: #ffffff;
  }

  .bd-profile-row-text.is-logout-text {
    color: #EF4444;
  }

  .bd-profile-row-arrow.is-logout-arrow {
    color: #EF4444;
  }

  /* Subpage Inner Container (Orders list, Edit Address, etc.) */
  .bd-mobile-subpage-body {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px 16px;
    margin-top: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
    border: 1px solid #F1F5F9;
  }

  .bd-mobile-subpage-body table.my_account_orders {
    font-size: 0.84375rem;
  }

  .bd-mobile-subpage-body .woocommerce-button {
    background: #111111;
    color: #FFF000;
    border-radius: 12px;
    padding: 8px 14px;
    font-weight: 700;
    text-decoration: none;
  }
}

/* ==========================================================================
   AUTH PAGE (LOGIN & REGISTER) - MODERN CARD WITH #FFF000 ACCENTS
   ========================================================================== */
.bd-auth-page-container {
  padding: 30px 16px 120px;
  max-width: 460px;
  margin: 0 auto;
}

.bd-auth-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 32px 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
  border: 1px solid #EAECEF;
}

.bd-auth-header {
  text-align: center;
  margin-bottom: 24px;
}

.bd-auth-logo {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 8px;
}

.bd-auth-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #111111;
  margin: 6px 0 4px;
  letter-spacing: -0.02em;
}

.bd-auth-sub {
  font-size: 0.875rem;
  color: #64748B;
  margin: 0;
  line-height: 1.4;
}

/* Segmented Tabs */
.bd-auth-tabs-nav {
  display: flex;
  background: #F1F5F9;
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 22px;
  gap: 4px;
}

.bd-auth-tab-btn {
  flex: 1;
  padding: 10px 14px;
  border: none;
  background: transparent;
  font-weight: 700;
  font-size: 0.875rem;
  color: #64748B;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

.bd-auth-tab-btn.is-active {
  background: #111111;
  color: #FFF000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

.bd-auth-pane {
  display: none;
}

.bd-auth-pane.is-active {
  display: block;
  animation: bdAuthFade 0.2s ease;
}

@keyframes bdAuthFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.bd-form-field {
  margin-bottom: 16px;
}

.bd-form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111111;
  margin-bottom: 6px;
}

.bd-field-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.bd-lost-password-link {
  font-size: 0.78125rem;
  font-weight: 700;
  color: #64748B;
  text-decoration: none;
}

.bd-lost-password-link:hover {
  color: #111111;
  text-decoration: underline;
}

.bd-input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.bd-input-icon {
  position: absolute;
  left: 14px;
  stroke: #94A3B8;
  pointer-events: none;
}

.bd-input-text {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: 1.5px solid #E2E8F0;
  background: #F8FAFC;
  padding: 0 16px 0 44px;
  font-size: 0.9375rem;
  color: #111111;
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
  box-sizing: border-box;
}

.bd-input-text:focus {
  border-color: #111111;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 240, 0, 0.35);
}

.bd-form-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 18px;
}

.bd-remember-me-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84375rem;
  color: #475569;
  cursor: pointer;
}

.bd-remember-me-label input {
  accent-color: #111111;
  width: 16px;
  height: 16px;
}

.bd-btn-primary-yellow {
  width: 100%;
  height: 48px;
  background: #FFF000;
  color: #111111;
  border: none;
  border-radius: 14px;
  font-weight: 800;
  font-size: 0.9375rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 240, 0, 0.35);
  transition: transform 0.15s, background-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-btn-primary-yellow:hover {
  background: #FFE500;
  transform: translateY(-1px);
}

.bd-btn-primary-yellow:active {
  transform: scale(0.98);
}

.bd-privacy-policy-text {
  font-size: 0.78125rem;
  color: #64748B;
  line-height: 1.4;
  margin-bottom: 14px;
}

/* ==========================================================================
   DARK MODE ADAPTATION (body.bd-dark-mode)
   ========================================================================== */
body.bd-dark-mode {
  background-color: #121217 !important;
  color: #F1F5F9 !important;
}

body.bd-dark-mode .bd-mobile-profile-container {
  background: #121217;
}

body.bd-dark-mode .bd-profile-page-title,
body.bd-dark-mode .bd-profile-name,
body.bd-dark-mode .bd-profile-section-heading {
  color: #FFFFFF !important;
}

body.bd-dark-mode .bd-profile-menu-row {
  background: #1C1C24 !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #FFFFFF !important;
}

body.bd-dark-mode .bd-profile-row-text,
body.bd-dark-mode .bd-profile-row-arrow {
  color: #FFFFFF !important;
}

body.bd-dark-mode .bd-profile-row-ico {
  background: #2D2E3E;
}

body.bd-dark-mode .bd-profile-menu-row.is-logout {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

body.bd-dark-mode .bd-mobile-subpage-body {
  background: #1A1A22;
  border-color: rgba(255, 255, 255, 0.08);
  color: #F1F5F9;
}

body.bd-dark-mode .bd-auth-card {
  background: #181820;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

body.bd-dark-mode .bd-auth-title {
  color: #FFFFFF;
}

body.bd-dark-mode .bd-input-text {
  background: #20202A;
  border-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

body.bd-dark-mode .bd-input-text:focus {
  background: #252532;
  border-color: #FFF000;
}

/* ==========================================================================
   FOOTER SECURE SHOPPING PAYMENT BADGES (VISA, MASTERCARD, CASH ON DELIVERY)
   ========================================================================== */
.bd-payment-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.bd-pay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  user-select: none;
}

.bd-pay-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.bd-pay-badge svg {
  display: block;
  flex-shrink: 0;
}

.bd-pay-badge.bd-pay-visa {
  padding: 0 10px;
}

.bd-pay-badge.bd-pay-mastercard {
  padding: 0 12px;
}

.bd-pay-badge.bd-pay-cod {
  padding: 0 12px;
}

.bd-pay-badge .bd-cod-text {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ==========================================================================
   MOBILE VIEW: HERO SLIDER (BANNER IMAGE ON TOP, CONTENT & CONTROLS BELOW)
   ========================================================================== */
@media (max-width: 768px) {
  .bd-hero-split-section {
    padding: 8px 0 16px !important;
  }

  .bd-hero-split-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Slider Card: Clean White Card with Image on Top and Content Below */
  .bd-hero-slider-card {
    min-height: unset !important;
    height: auto !important;
    border-radius: 22px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .bd-hero-slides-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 310px !important;
    min-height: 310px !important;
    overflow: hidden !important;
  }

  .bd-hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease, visibility 0.35s ease !important;
    background: #FFFFFF !important;
    transform: none !important;
  }

  .bd-hero-slide.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2 !important;
    transform: none !important;
  }

  /* 1. Hero Slide Banner Image (Top half - 100% clean and unobstructed) */
  .bd-hero-slide-bg {
    position: relative !important;
    width: 100% !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    flex-shrink: 0 !important;
    background-size: cover !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    border-radius: 20px 20px 0 0 !important;
    transform: none !important;
    transition: none !important;
  }

  .bd-hero-slide.is-active .bd-hero-slide-bg {
    transform: none !important;
  }

  /* 2. Hero Slide Content (Placed directly below the image) */
  .bd-hero-slide-content {
    position: relative !important;
    width: 100% !important;
    flex: 1 !important;
    max-width: 100% !important;
    padding: 16px 18px 20px !important;
    background: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    z-index: 3 !important;
  }

  .bd-hero-slide-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.015em !important;
    color: #111111 !important;
    margin: 0 0 6px 0 !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .bd-hero-slide-title strong {
    font-weight: 900 !important;
    display: inline !important;
  }

  .bd-hero-slide-desc {
    font-size: 0.8125rem !important;
    line-height: 1.45 !important;
    color: #64748B !important;
    margin: 0 0 16px 0 !important;
    max-width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* CTA Button: Positioned on Top of the Slider Image */
  .bd-hero-slide .bd-hero-btn-white {
    position: absolute !important;
    top: -100px !important;
    left: 14px !important;
    z-index: 10 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #FFFFFF !important;
    color: #111111 !important;
    font-size: 0.8125rem !important;
    font-weight: 800 !important;
    height: 34px !important;
    padding: 0 16px !important;
    border-radius: 17px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
    text-decoration: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .bd-hero-slide .bd-hero-btn-white:active {
    transform: scale(0.95) !important;
    background: #FFF000 !important;
    color: #111111 !important;
  }

  /* 3. Slider Navigation Controls (Dots & Arrows at bottom-right) */
  .bd-slider-controls {
    position: absolute !important;
    bottom: 16px !important;
    right: 18px !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .bd-slider-dots {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 8px !important;
    background: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 9999px !important;
    box-shadow: none !important;
  }

  .bd-slide-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 9999px !important;
    background: #CBD5E1 !important;
    transition: all 0.25s ease !important;
  }

  .bd-slide-dot.is-active {
    width: 16px !important;
    background: #111111 !important;
    border-radius: 9999px !important;
  }

  .bd-slider-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    color: #111111 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .bd-slider-btn svg {
    width: 12px !important;
    height: 12px !important;
  }

  .bd-slider-btn-next {
    background: #FFF000 !important;
    color: #111111 !important;
    border-color: #FFF000 !important;
    box-shadow: 0 2px 8px rgba(255, 240, 0, 0.4) !important;
  }

  .bd-hero-promo-card {
    display: none !important;
  }
}