@charset "UTF-8";
/* CSS Document */
:root {
  --red: #CC1B1B;
  --red-dark: #A01212;
  --red-light: #E82424;
  --red-bg: #FFF0F0;
  --off-white: #F8F6F4;
  --gray-100: #F2F2F2;
  --gray-200: #E0E0E0;
  --gray-400: #9A9A9A;
  --gray-600: #5A5A5A;
  --gray-900: #1A1A1A;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Manrope', sans-serif;
}
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--gray-900); overflow-x: hidden; }

/* ANNOUNCEMENT BAR */
.announce { background: var(--red); font-size: 13px; font-weight: 500; letter-spacing: 0.3px; }
.announce-badge { background: rgba(255,255,255,0.2); padding: 2px 10px; border-radius: 20px; font-size: 12px; }

/* HEADER */
.site-header { border-bottom: 1px solid var(--gray-200); position: sticky; top: 0; z-index: 1030; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.logo-mark { width: 50px; height: 50px; }
.logo-text strong { font-family: var(--font-display); font-size: 24px; letter-spacing: 2px; color: var(--gray-900); }
.logo-text span { font-size: 10px; color: var(--gray-400); letter-spacing: 2.5px; text-transform: uppercase; }

.search-wrap { background: var(--gray-100); border-radius: 10px; border: 2px solid transparent; transition: all 0.2s; }
.search-wrap:focus-within { border-color: var(--red); background: #fff; box-shadow: 0 0 0 4px rgba(204,27,27,0.08); }
.search-wrap input { background: transparent; border: none; outline: none; font-family: var(--font-body); font-size: 14px; color: var(--gray-900); }
.search-wrap input::placeholder { color: var(--gray-400); }
.search-wrap .btn-search { background: var(--red); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 700; font-family: var(--font-body); transition: background 0.2s; }
.search-wrap .btn-search:hover { background: var(--red-light); }

.btn-icon { background: none; border: none; cursor: pointer; border-radius: 8px; color: var(--gray-600);  font-size: 14px; font-family: var(--font-body); font-weight: 500; transition: all 0.2s; position: relative; }
.btn-icon:hover { color: var(--red); background: var(--red-bg); }
.btn-icon svg { width: 22px; height: 22px; stroke-width: 1.8; display: block; margin: 0 auto 3px; }
.cart-badge { position: absolute; top: 4px; right: 6px; background: var(--red); color: #fff; border-radius: 50%; width: 17px; height: 17px; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.btn-header-cta { background: var(--red);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-body);
    transition: background 0.2s;
    text-decoration: none;}
.btn-header-cta:hover { background: var(--red-dark); color: #fff; }

/* HEADER DROPDOWNS (Wishlist / Cart / Account) */
.hdr-dropdown { position: relative; }
.hdr-dropdown-panel {
display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: -90px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    z-index: 3000;
    border: 1px solid var(--gray-200);
    min-width: 320px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    top: 61px;
}
.hdr-dropdown:hover .hdr-dropdown-panel,
.hdr-dropdown-panel:hover {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hdr-dropdown:hover .hdr-dropdown-panel { display: block; opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Panel header */
.hdp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--gray-200);
}
.hdp-head-title { font-size: 14px; font-weight: 800; color: var(--gray-900); }
.hdp-head-count { font-size: 11px; color: var(--gray-400); font-weight: 500; }

/* Wishlist items */
.hdp-items { padding: 8px; max-height: 300px; overflow-y: auto; }
.hdp-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  border-radius: 10px;
  transition: background 0.15s;
  text-decoration: none;
}
.hdp-item:hover { background: var(--gray-100); }
.hdp-item-img {
  width: 48px; height: 48px;
  border-radius: 8px;
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  border: 1px solid var(--gray-200);
}
.hdp-item-info { flex: 1; min-width: 0; }
.hdp-item-brand { font-size: 10px; color: var(--red); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.hdp-item-name { font-size: 13px; font-weight: 600; color: var(--gray-900); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdp-item-price { font-size: 13px; font-weight: 800; color: var(--gray-900); flex-shrink: 0; }
.hdp-item-remove {
  background: none; border: none; cursor: pointer;
  color: var(--gray-400); font-size: 16px; line-height: 1;
  padding: 4px; border-radius: 4px; transition: color 0.15s;
  flex-shrink: 0;
}
.hdp-item-remove:hover { color: var(--red); }

/* Cart summary footer */
.hdp-footer { padding: 14px 18px; border-top: 1px solid var(--gray-200); }
.hdp-subtotal { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.hdp-subtotal-label { font-size: 12px; color: var(--gray-600); font-weight: 600; }
.hdp-subtotal-val { font-size: 16px; font-weight: 800; color: var(--gray-900); }
.hdp-btn-full {
background: var(--red);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px;
    width: 100%;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    text-align: center;
    text-decoration: none;
}
.hdp-btn-full:hover { background: var(--red-dark); }
.hdp-btn-outline {
    width: 100%;
    background: transparent;
    color: var(--gray-900);
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all 0.2s;
    margin-top: 8px;
    text-align: center;
    text-decoration: none;
}
.hdp-btn-outline:hover { border-color: var(--red); color: var(--red); }

/* Wishlist heart toggle */
.wl-heart { font-size: 18px; flex-shrink: 0; }
.wl-heart.active { color: var(--red); }

/* Account panel */
.hdp-user-info { padding: 18px 18px 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--gray-200); }
.hdp-avatar-circle { width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; flex-shrink: 0; font-family: var(--font-body); }
.hdp-user-name { font-size: 14px; font-weight: 700; color: var(--gray-900); }
.hdp-user-email { font-size: 12px; color: var(--gray-400); }
.hdp-menu-list { padding: 8px; }
.hdp-menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 9px;
  text-decoration: none; color: var(--gray-700);
  font-size: 13px; font-weight: 500; transition: all 0.15s;
}
.hdp-menu-item:hover { background: var(--gray-100); color: var(--gray-900); }
.hdp-menu-item svg { width: 16px; height: 16px; stroke: var(--gray-400); flex-shrink: 0; }
.hdp-menu-item:hover svg { stroke: var(--red); }
.hdp-menu-divider { height: 1px; background: var(--gray-200); margin: 6px 8px; }
.hdp-menu-item.logout { color: var(--red); }
.hdp-menu-item.logout svg { stroke: var(--red); }

/* NAV */
.main-nav { background: var(--gray-900);  scrollbar-width: none; position: relative; }
.main-nav::-webkit-scrollbar { display: none; }
.main-nav .nav-inner-wrap { display: flex; justify-content: center; align-items: center; }
.main-nav .nav-link { color: rgba(255,255,255,0.7);     font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    padding: 14px 20px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;}
.main-nav .nav-link:hover, .main-nav .nav-link.active { color: #fff; border-bottom-color: var(--red); }

/* MEGA DROPDOWN */
.nav-dropdown { position: static; }
.nav-dropdown > .nav-link { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.nav-dropdown > .nav-link svg { width: 12px; height: 12px; transition: transform 0.2s; }
.nav-dropdown:hover > .nav-link { color: #fff; border-bottom-color: var(--red); }
.nav-dropdown:hover > .nav-link svg { transform: rotate(180deg); }

.mega-menu {
     display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: 892px;
    background: #fff;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
    z-index: 2000;
    padding: 28px;
    border-top: 3px solid var(--red);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav-dropdown:hover .mega-menu {
  display: flex;
  gap: 0;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega-col { flex: 1; padding: 0 20px; border-right: 1px solid var(--gray-200); }
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child { border-right: none; padding-right: 0; }

.mega-col-title {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #2e2e2e;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-200);
}
.mega-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--gray-900);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  margin-bottom: 2px;
}
.mega-link:hover { background: var(--red-bg); color: var(--red); }
.mega-link:hover .mega-link-icon { background: var(--red); color: #fff; }
.mega-link-icon {
  width: 32px; height: 32px;
  background: var(--gray-100);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: all 0.15s;
}
.mega-link-count { font-size: 11px; color: var(--gray-400); margin-left: auto; }
.mega-link:hover .mega-link-count { color: var(--red); }

/* Mega featured box */
.mega-featured {
  background: var(--gray-900);
  border-radius: 12px;
  padding: 20px;
  margin-top: 4px;
}
.mega-featured-label { font-size: 10px; color: var(--red-light); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; }
.mega-featured-title { font-family: var(--font-display); font-size: 22px; color: #fff; letter-spacing: 1px; margin-bottom: 6px; line-height: 1.1; }
.mega-featured-sub { font-size: 12px; color: rgba(255,255,255,0.4); line-height: 1.5; margin-bottom: 14px; }
.mega-featured-btn { background: var(--red); color: #fff; border: none; border-radius: 7px; padding: 8px 16px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font-body); transition: background 0.2s; }
.mega-featured-btn:hover { background: var(--red-light); }
/* Slide 1: dark overlay + red left glow */
.hero-slide-1 {
  background-image:url("../img/slider-04.jpg");
	    background-position: center;
}
.hero-slide-1::before {
  background: linear-gradient(100deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.60) 55%, rgba(204,27,27,0.18) 100%);
}
/* Slide 2: deep overlay */
.hero-slide-2 {
  background-image:url("../img/slider-02.jpg");
	background-position: bottom;
}
.hero-slide-2::before {
  background: linear-gradient(100deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.55) 55%, rgba(10,10,10,0.25) 100%);
}
/* Slide 3: red-tinted */
.hero-slide-3 {
  background-image: url('../img/slider-03.jpg');
}
.hero-slide-3::before {
  background: linear-gradient(100deg, rgba(100,10,10,0.90) 0%, rgba(30,10,10,0.65) 55%, rgba(204,27,27,0.15) 100%);
}

.hero-content-wrap {
  position: relative;
  z-index: 2;
  padding: 80px 0;
  max-width: 640px;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(204,27,27,0.25);
  border: 1px solid rgba(204,27,27,0.5);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 11px;
  color: #FF8080;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.dot-pulse {
  width: 7px; height: 7px;
  background: #FF8080;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
  flex-shrink: 0;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(52px, 7vw, 90px);
    line-height: 0.92;
    letter-spacing: 3px;
    color: #000000;
}
.hero-title em { color: var(--red-light); font-style: normal; }

.hero-sub {
font-size: 16px;
    color: rgb(0 0 0);
    line-height: 1.75;
    max-width: 460px;
}

.btn-primary-red {
  background: var(--red); color: #fff; border: none; border-radius: 10px;
  padding: 15px 30px; font-size: 15px; font-weight: 700;
  font-family: var(--font-body); transition: all 0.2s;
}
.btn-primary-red:hover {
  background: var(--red-light); color: #fff;
  transform: translateY(-1px); box-shadow: 0 8px 24px rgba(204,27,27,0.45);
}
.btn-outline-white {
background: #000;
    color: #fff;
    border: 1.5px solid #000;
    border-radius: 10px;
    padding: 15px 30px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-body);
    transition: all 0.2s;
}
.btn-outline-white:hover {
  border-color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.07); color: #fff;
}

/* Stats bar inside slide */
.hero-stats {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 28px;
  margin-top: 36px;
}
.stat strong { font-family: var(--font-display);
    font-size: 34px;
    color: #212529;
    letter-spacing: 2px;
    display: block;}
.stat span { font-size: 11px;
    color: #717171;
    text-transform: uppercase;
    letter-spacing: 1.5px; }

/* Slide badge / offer pill */
.slide-offer {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 5px 14px;
  margin-bottom: 18px;
}

/* Carousel controls custom */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  top: 50%; transform: translateY(-50%);
  bottom: auto;
  opacity: 1;
  transition: background 0.2s, border-color 0.2s;
}
.hero-carousel .carousel-control-prev { left: 28px; }
.hero-carousel .carousel-control-next { right: 28px; }
.hero-carousel .carousel-control-prev:hover,
.hero-carousel .carousel-control-next:hover {
  background: var(--red);
  border-color: var(--red);
}
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon { width: 18px; height: 18px; }

/* Carousel indicators custom */
.hero-carousel .carousel-indicators {
  bottom: 24px;
  gap: 6px;
  margin: 0;
  justify-content: flex-start;
  padding-left: 60px;
}
.hero-carousel .carousel-indicators [data-bs-target] {
  width: 28px; height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.3);
  border: none;
  transition: all 0.3s;
  opacity: 1;
}
.hero-carousel .carousel-indicators .active {
  background: var(--red);
  width: 52px;
}

/* Slide-in animation for content */
.carousel-item.active .hero-content-wrap { animation: slideInContent 0.7s ease both; }
@keyframes slideInContent {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* TRUST BAR */
.trust-bar {     background: #737373; }
.trust-item { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 13px; font-weight: 600; }
.trust-item svg { width: 20px; height: 20px; flex-shrink: 0; }

/* CATEGORIES */
.cat-card { background: var(--gray-100); border-radius: 14px; padding: 22px 16px; text-align: center; cursor: pointer; border: 2px solid transparent; transition: all 0.25s; text-decoration: none; color: var(--gray-900); display: block; }
.cat-card:hover { background: var(--red-bg); border-color: var(--red); transform: translateY(-3px); color: var(--gray-900); }
.cat-icon { width: 56px; height: 56px; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 26px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.cat-card h3 {     font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 4px;}
.cat-card .count { font-size: 11px; color: var(--gray-400); }
.cat-card.featured { border-color: var(--red); background: var(--red-bg); }
.cat-card.featured .cat-icon { background: var(--red-bg); }
.cat-card.featured .count { color: var(--red); }

/* PRODUCT CARDS */
.prod-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; overflow: hidden; transition: all 0.25s; cursor: pointer; height: 100%; }
.prod-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.12); transform: translateY(-4px); border-color: transparent; }
.prod-img { height: 210px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; position: relative; font-size: 72px; overflow: hidden; }
.prod-badge { position: absolute; top: 12px; left: 12px; color: #fff; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.prod-badge.sale { background: var(--red); }
.prod-badge.new { background: var(--gray-900); }
.prod-badge.hot { background: #FF8C00; }
.wishlist-btn { position: absolute; top: 12px; right: 12px; background: #fff; border: 1px solid var(--gray-200); border-radius: 8px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: all 0.2s; }
.wishlist-btn:hover { background: var(--red-bg); border-color: var(--red); }
.prod-body { padding: 18px; }
.prod-brand { font-size: 11px; color: var(--red); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; }
.prod-name { font-size: 15px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 10px;
    line-height: 1.4;}
.prod-stars { display: flex; align-items: center; gap: 5px; margin-bottom: 12px; }
.stars { color: #F5A623; font-size: 13px; letter-spacing: 2px; }
.reviews { font-size: 11px; color: var(--gray-400); }
.prod-price { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.price { font-size: 20px; font-weight: 800; color: var(--gray-900); }
.price-old { font-size: 13px; color: var(--gray-400); text-decoration: line-through; }
.price-save { font-size: 11px; font-weight: 700; color: var(--red); background: var(--red-bg); padding: 3px 8px; border-radius: 5px; }
.add-cart { width: 100%; background: var(--gray-900); color: #fff; border: none; border-radius: 10px; padding: 11px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font-body); transition: all 0.2s; }
.add-cart:hover { background: var(--red); }

/* SECTION HEADERS */
.section-title { font-family: var(--font-display); font-size: 46px; letter-spacing: 2px; line-height: 1; }
.section-title span { color: var(--red); }
.see-all { color: var(--red); font-size: 14px; font-weight: 700; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color 0.2s; }
.see-all:hover { border-bottom-color: var(--red); color: var(--red); }

/* PROMO BANNERS */
.promo-card { border-radius: 18px; padding: 44px; position: relative; overflow: hidden; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; }
.promo-card.dark { background: var(--gray-900); }
.promo-card.red-card { background: var(--red); }
.promo-card h3 { font-family: var(--font-display); font-size: 40px; color: #fff; letter-spacing: 2px; margin-bottom: 10px; position: relative; z-index: 2; line-height: 1; }
.promo-card p { font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 22px;
    position: relative;
    z-index: 2;
    line-height: 1.6; }
.promo-btn { background: #fff; border: none; border-radius: 9px; padding: 11px 22px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font-body); position: relative; z-index: 2; transition: opacity 0.2s; }
.promo-btn:hover { opacity: 0.9; }
.promo-btn.dark-btn { color: var(--red); }
.promo-btn.light-btn { color: var(--gray-900); }
.promo-watermark { position: absolute; top: -30px; right: -15px; font-family: var(--font-display); font-size: 180px; color: rgba(255,255,255,0.04); letter-spacing: -5px; user-select: none; pointer-events: none; line-height: 1; }

/* BRANDS */
.brand-chip { background: var(--gray-100); border: 1.5px solid var(--gray-200); border-radius: 9px; padding: 10px 22px; font-size: 13px; font-weight: 800; color: var(--gray-600); letter-spacing: 0.5px; transition: all 0.2s; cursor: pointer; display: inline-block; }
.brand-chip:hover { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.brands-label { font-size: 11px; color: var(--gray-400); text-align: center; text-transform: uppercase; letter-spacing: 2.5px; font-weight: 600; }

/* WHY US */
.why-section { background: var(--gray-900); }
.why-title { font-family: var(--font-display); font-size: 48px; color: #fff; letter-spacing: 2px; }
.why-sub { color: rgba(255,255,255,0.4); font-size: 15px; }
.why-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 30px 24px; text-align: center; transition: border-color 0.2s; height: 100%; }
.why-card:hover { border-color: rgba(204,27,27,0.4); }
.why-icon { width: 56px; height: 56px; background: rgba(204,27,27,0.12); border: 1px solid rgba(204,27,27,0.25); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 26px; }
.why-card h4 { font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;}
.why-card p {     font-size: 15px;
    color: rgb(255 255 255 / 64%);
    line-height: 1.7;
    margin: 0; }

/* TESTIMONIALS */
.testi-card { background: var(--off-white); border-radius: 14px; padding: 30px; border: 1px solid var(--gray-200); transition: box-shadow 0.2s; height: 100%; }
.testi-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
.testi-stars { color: #F5A623; font-size: 15px; letter-spacing: 3px; }
.testi-text {     font-size: 15px;
    line-height: 1.8;
    color: var(--gray-600);
    font-style: italic;}
.avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 800; flex-shrink: 0; }
.testi-author strong { font-size: 14px; font-weight: 700; display: block; }
.testi-author em { font-size: 12px; color: var(--gray-400); font-style: normal; }

/* CTA */
.cta-section { background: #515151;}
.cta-title { font-family: var(--font-display); font-size: 52px; color: #fff; letter-spacing: 2px; }
.btn-cta-white { background: #fff; color: var(--red); border: none; border-radius: 10px; padding: 15px 32px; font-size: 15px; font-weight: 800; font-family: var(--font-body); transition: opacity 0.2s; }
.btn-cta-white:hover { opacity: 0.92; }
.btn-cta-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.4); border-radius: 10px; padding: 15px 32px; font-size: 15px; font-weight: 700; font-family: var(--font-body); transition: border-color 0.2s; }
.btn-cta-outline:hover { border-color: #fff; color: #fff; }
.cta-phone { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: #fff; letter-spacing: 2px; }
.cta-lang {     font-size: 15px;
    color: rgb(255 255 255 / 73%);
    letter-spacing: 0.5px; }

/* FOOTER */
.site-footer { background: #111; }
.footer-brand-logo .ft { font-family: var(--font-display); font-size: 22px; color: #fff; letter-spacing: 2px; }
.footer-brand-logo .fs { font-size: 10px; color: rgba(255,255,255,0.35); letter-spacing: 2px; text-transform: uppercase; }
.footer-tagline {     font-size: 15px;
    color: rgb(255 255 255 / 68%);
    line-height: 1.75;
    max-width: 340px; }
.footer-contacts a { display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: rgb(255 255 255 / 75%);
    text-decoration: none;
    transition: color 0.2s; }
.footer-contacts a:hover { color: var(--red-light); }
.footer-col h5 {     font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: rgb(205 27 27);
    font-weight: 700;}
.footer-col a { display: block;
    font-size: 15px;
    color: rgb(255 255 255 / 75%);
    text-decoration: none;
    transition: color 0.2s;
    line-height: 28px; }
.footer-col a:hover { color: var(--red-light); }
.footer-divider {border-top: 1px solid rgb(255 255 255 / 80%); }
.footer-bottom p {     font-size: 15px;
    color: rgb(255 255 255 / 58%); }
.f-badge {     background: rgb(255 255 255 / 0%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 13px;
    color: rgb(255 255 255 / 48%);
    font-weight: 600;
    letter-spacing: 0.5px; }

/* =============================================
   RESPONSIVE — MOBILE & TABLET
   ============================================= */

/* --- Hamburger Button --- */
.btn-hamburger {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 40px; height: 40px; background: none; border: 1.5px solid var(--gray-200);
  border-radius: 9px; cursor: pointer; padding: 8px; flex-shrink: 0;
}
.btn-hamburger span {
  display: block; width: 18px; height: 2px; background: var(--gray-900);
  border-radius: 2px; transition: all 0.25s;
}
.btn-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.btn-hamburger.open span:nth-child(2) { opacity: 0; }
.btn-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile Search Bar --- */
.mobile-search-bar { padding-top: 0; }
.mobile-search-bar .search-wrap { border-radius: 10px; border: 2px solid transparent; }
.mobile-search-bar .search-wrap:focus-within { border-color: var(--red); background:#fff; box-shadow:0 0 0 4px rgba(204,27,27,0.08); }

/* --- Mobile Menu Overlay --- */
.mobile-menu-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 2000; backdrop-filter: blur(2px);
}
.mobile-menu-overlay.active { display: block; }

/* --- Mobile Menu Drawer --- */
.mobile-menu-drawer {
  position: fixed; top: 0; left: -100%; width: min(85vw, 360px); height: 100%;
  background: #fff; z-index: 2001; display: flex; flex-direction: column;
  transition: left 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 4px 0 32px rgba(0,0,0,0.18);
}
.mobile-menu-drawer.open { left: 0; }

.mob-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--gray-200); flex-shrink: 0;
}
.mob-close-btn {
  background: var(--gray-100); border: none; border-radius: 8px;
  width: 36px; height: 36px; font-size: 16px; cursor: pointer; color: var(--gray-600);
}

.mob-menu-body { flex: 1; overflow-y: auto; padding: 8px 0; }

.mob-nav-link {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px 20px; font-size: 15px; font-weight: 600;
  color: var(--gray-900); text-decoration: none; background: none; border: none;
  cursor: pointer; font-family: var(--font-body); transition: background 0.15s;
  border-left: 3px solid transparent;
}
.mob-nav-link:hover, .mob-nav-link.active {
  background: var(--red-bg); color: var(--red); border-left-color: var(--red);
}
.mob-acc-arrow {
  width: 16px; height: 16px; flex-shrink: 0;
  transition: transform 0.25s; stroke: var(--gray-400);
}
.mob-nav-accordion.open .mob-acc-arrow { transform: rotate(180deg); }

.mob-accordion-body {
  display: none; padding: 4px 12px 8px 12px;
  background: var(--gray-100); border-top: 1px solid var(--gray-200);
}
.mob-nav-accordion.open .mob-accordion-body { display: block; }
.mob-acc-section-title {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
  color: var(--gray-400); padding: 10px 8px 6px;
}
.mob-acc-link {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 10px; border-radius: 8px; font-size: 13px; font-weight: 500;
  color: var(--gray-900); text-decoration: none; transition: background 0.15s;
}
.mob-acc-link:hover { background: #fff; color: var(--red); }
.mob-acc-link span { font-size: 11px; color: var(--gray-400); }

.mob-menu-footer {
  padding: 14px 18px; border-top: 1px solid var(--gray-200); display: flex;
  flex-direction: column; gap: 10px; flex-shrink: 0;
}
.mob-cta-call {
  display: block; text-align: center; background: var(--gray-900); color: #fff;
  border: none; border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: var(--font-body); text-decoration: none;
}
.mob-cta-quote {
  width: 100%; background: var(--red); color: #fff; border: none; border-radius: 10px;
  padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font-body);
}
.tools-01 img{
	    width: 116px;
    margin-bottom: 14px;
    border-radius: 10px;
}
/* --- Header height fix on mobile --- */
@media (max-width: 767.98px) {
  .site-header .d-flex { height: auto !important; padding: 12px 0 8px !important; gap: 12px !important; }
  .logo-text strong { font-size: 20px; }
  .logo-text span { font-size: 9px; }
  .logo-mark { width: 40px; height: 40px; }

  /* Hide desktop header icons labels on mobile to save space */
  .btn-icon { font-size: 8px; padding: 6px 6px !important; }
  .btn-icon svg { width: 20px; height: 20px; }
}

/* --- Hero Section --- */
@media (max-width: 991.98px) {
  .hero-content-wrap { padding: 48px 0 40px; max-width: 100%; }
  .hero-title { font-size: clamp(38px, 9vw, 60px); }
  .hero-sub { font-size: 14px; }
  .hero-stats { margin-top: 24px; padding-top: 20px; }
  .stat strong { font-size: 26px; }
  .hero-carousel .carousel-control-prev { left: 12px; }
  .hero-carousel .carousel-control-next { right: 12px; }
  .hero-carousel .carousel-indicators { padding-left: 20px; }
}
@media (max-width: 575.98px) {
  .hero-content-wrap { padding: 36px 0 32px; }
  .hero-title { font-size: clamp(32px, 10vw, 48px); letter-spacing: 1px; }
  .hero-sub { font-size: 13px; max-width: 100%; }
  .hero-stats { flex-wrap: wrap; gap: 14px !important; }
  .stat strong { font-size: 22px; }
  .btn-primary-red, .btn-outline-white { padding: 12px 20px; font-size: 13px; }
  .slide-offer { font-size: 10px; padding: 4px 10px; }
  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next { width: 38px; height: 38px; }
}

/* --- Trust Bar --- */
@media (max-width: 767.98px) {
  .trust-bar .d-flex { gap: 12px !important; }
  .trust-item { font-size: 11px; }
  .trust-item svg { width: 16px; height: 16px; }
}

/* --- Section Titles --- */
@media (max-width: 767.98px) {
  .section-title { font-size: 30px; letter-spacing: 1px; }
  .see-all { font-size: 12px; }
}
@media (max-width: 575.98px) {
  .section-title { font-size: 26px; }
  .d-flex.align-items-end.justify-content-between { flex-direction: column; align-items: flex-start !important; gap: 6px; }
}

/* --- Category Cards --- */
@media (max-width: 575.98px) {
  .cat-card { padding: 14px 10px; }
  .cat-icon { width: 44px; height: 44px; font-size: 20px; margin-bottom: 10px; }
  .cat-card h3 { font-size: 11px; }
  .cat-card .count { font-size: 10px; }
}

/* --- Product Cards --- */
@media (max-width: 575.98px) {
  .prod-img { height: 160px; font-size: 54px; }
  .prod-body { padding: 12px; }
  .prod-name { font-size: 13px; }
  .price { font-size: 17px; }
}

/* --- Promo Banners --- */
@media (max-width: 767.98px) {
  .promo-card { padding: 30px 24px; min-height: 180px; }
  .promo-card h3 { font-size: 28px; }
  .promo-watermark { font-size: 120px; }
}
@media (max-width: 575.98px) {
  .promo-card { padding: 24px 20px; }
  .promo-card h3 { font-size: 24px; }
  .promo-card p { font-size: 13px; }
}

/* --- Brands --- */
@media (max-width: 575.98px) {
  .brand-chip { padding: 8px 14px; font-size: 11px; }
}

/* --- Why Section --- */
@media (max-width: 767.98px) {
  .why-title { font-size: 34px; }
  .why-sub { font-size: 13px; }
  .why-card { padding: 22px 18px; }
}
@media (max-width: 575.98px) {
  .why-title { font-size: 28px; }
}

/* --- CTA Section --- */
@media (max-width: 767.98px) {
  .cta-title { font-size: 36px; letter-spacing: 1px; }
  .btn-cta-white, .btn-cta-outline { padding: 12px 22px; font-size: 13px; }
  .cta-phone { font-size: 22px; }
}
@media (max-width: 575.98px) {
  .cta-title { font-size: 28px; }
  .btn-cta-white, .btn-cta-outline { width: 100%; }
  .d-flex.justify-content-center.gap-3.flex-wrap { flex-direction: column; align-items: stretch; }
  .cta-lang { font-size: 11px; }
}

/* --- Footer --- */
@media (max-width: 767.98px) {
  .footer-tagline { max-width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start !important; }
  .footer-badges { flex-wrap: wrap; }
}
@media (max-width: 575.98px) {
  .site-footer { padding-top: 36px !important; padding-bottom: 36px !important; }
}

/* --- Announcement Bar --- */
@media (max-width: 575.98px) {
  .announce { font-size: 11px; padding: 6px 12px !important; }
  .announce-badge { display: none; }
}

/* --- Testimonials --- */
@media (max-width: 575.98px) {
  .testi-card { padding: 20px; }
  .testi-text { font-size: 13px; }
}

/* --- Header dropdown panels — full-width on tablet/mobile --- */
@media (max-width: 991.98px) {
  .hdr-dropdown-panel { right: -10px; min-width: 280px !important; }
}
@media (max-width: 575.98px) {
  .hdr-dropdown-panel { position: fixed; left: 10px; right: 10px; min-width: unset !important; width: auto; }
}

/* ----- About Us ----*/

/* ── PAGE HERO ──────────────────────────────────────────── */
  .about-hero{
position: relative;
    overflow: hidden;
    background: #0d1b2e;
	      padding: 60px 0px;
  }
  .about-hero::before{
    content:'';
    position:absolute;
    top:-120px;right:-120px;
    width:600px;height:600px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(204,27,27,.25) 0%,transparent 70%);
    pointer-events:none;
  }
  .about-hero::after{
    content:'FAQIHI';
    position:absolute;
    bottom:-30px;right:-20px;
    font-family:var(--font-display);
    font-size:220px;
    color:rgba(255,255,255,.03);
    letter-spacing:-4px;
    pointer-events:none;
    line-height:1;
  }
  .hero-breadcrumb{font-size:12px;font-weight:600;color:rgba(255,255,255,.5);letter-spacing:.5px;text-transform:uppercase;margin-bottom:14px;}
  .hero-breadcrumb a{color:rgba(255,255,255,.5);text-decoration:none;}
  .hero-breadcrumb a:hover{color:var(--red);}
  .hero-breadcrumb span{margin:0 6px;}
  .about-hero h1{font-family:var(--font-display);font-size:clamp(52px,8vw,96px);color:#fff;line-height:.95;letter-spacing:2px;margin-bottom:20px;}
  .about-hero h1 em{color:var(--red);font-style:normal;}
  .about-hero p{color:rgba(255,255,255,.65);font-size:17px;line-height:1.7;max-width:540px;}
  .hero-year-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:6px 16px 6px 8px;margin-bottom:28px;}
  .hero-year-dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 2s infinite;}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(204,27,27,.6);}50%{box-shadow:0 0 0 8px rgba(204,27,27,0);}}
  .hero-year-badge span{font-size:12px;font-weight:700;color:rgba(255,255,255,.75);letter-spacing:.5px;text-transform:uppercase;}

  /* ── STAT STRIP ─────────────────────────────────────────── */
  .stat-strip{background: #4f4f4f;
    padding: 32px 0;}
  .stat-item{text-align:center;}
  .stat-num{font-family:var(--font-display);font-size:48px;color:#fff;line-height:1;letter-spacing:1px;}
  .stat-label{font-size:13px;font-weight:700;color:rgba(255,255,255,.75);letter-spacing:.5px;text-transform:uppercase;margin-top:4px;}
  .stat-divider{width:1px;background:rgba(255,255,255,.2);align-self:stretch;}

  /* ── STORY SECTION ─────────────────────────────────────── */
  .story-section{padding:90px 0;background:var(--white);}
  .section-eyebrow{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--red);margin-bottom:12px;}
  .section-heading{font-family:var(--font-display);font-size:clamp(36px,5vw,60px);color:var(--navy);line-height:1.0;letter-spacing:1px;}
  .section-heading span{color:var(--red);}
  .story-body{font-size:16px;line-height:1.8;color:var(--gray-700);}
  .story-body p+p{margin-top:18px;}
  .story-img-wrap{position:relative;}
  .story-img-main{width:100%;border-radius:16px;aspect-ratio:4/3;object-fit:cover;background:var(--gray-100);display:flex;align-items:center;justify-content:center;}
  .story-img-placeholder{width:100%;aspect-ratio:4/3;border-radius:16px;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
  .story-img-placeholder svg{width:80px;height:80px;opacity:.3;}
  .story-img-placeholder span{font-family:var(--font-display);font-size:22px;color:rgba(255,255,255,.3);letter-spacing:3px;}
  .story-badge{position:absolute;bottom:-20px;left:-20px;background:var(--red);color:#fff;border-radius:14px;padding:20px 24px;box-shadow:0 8px 32px rgba(204,27,27,.35);}
  .story-badge-num{font-family:var(--font-display);font-size:48px;line-height:1;letter-spacing:1px;}
  .story-badge-txt{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;opacity:.85;}
  .story-callout{background:var(--gray-100);border-left:4px solid var(--red);border-radius:0 10px 10px 0;padding:20px 24px;margin-top:28px;font-size:16px;font-weight:600;color:var(--navy);font-style:italic;line-height:1.6;}

  /* ── TIMELINE ───────────────────────────────────────────── */
  .timeline-section{padding:80px 0;background:var(--off-white);}
  .timeline{position:relative;margin-top:50px;}
  .timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--red),transparent);transform:translateX(-50%);}
  .tl-item{display:flex;gap:40px;margin-bottom:48px;align-items:flex-start;}
  .tl-item:nth-child(even){flex-direction:row-reverse;}
  .tl-item:nth-child(even) .tl-content{text-align:right;}
  .tl-content{flex:1;}
  .tl-dot-wrap{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:60px;}
  .tl-dot{width:16px;height:16px;border-radius:50%;background:var(--red);border:3px solid var(--white);box-shadow:0 0 0 3px var(--red);flex-shrink:0;}
  .tl-year{font-family:var(--font-display);font-size:32px;color:var(--red);letter-spacing:1px;line-height:1;}
  .tl-title{font-size:17px;font-weight:800;color:var(--navy);margin:4px 0 6px;}
  .tl-text{font-size:14px;color:var(--gray-700);line-height:1.65;}

  /* ── VALUES ─────────────────────────────────────────────── */
  .values-section{padding:80px 0;background:var(--white);}
  .value-card{background:var(--gray-100);border-radius:16px;padding:32px 28px;height:100%;transition:.25s;border-bottom:4px solid transparent;}
  .value-card:hover{border-bottom-color:var(--red);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.08);}
  .value-icon{font-size:40px;margin-bottom:18px;}
  .value-card h4{font-size:18px;font-weight:800;color:var(--navy);margin-bottom:10px;}
  .value-card p{font-size:14px;color:var(--gray-700);line-height:1.65;}

  /* ── TEAM ───────────────────────────────────────────────── */
  .team-section{padding:80px 0;  background: #0d1b2e;}
  .team-section .section-heading{color:#fff;}
  .team-section .section-eyebrow{color:rgba(255,255,255,.5);}
  .lang-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
  .lang-chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:100px;padding:7px 18px;font-size:13px;font-weight:700;color:rgba(255,255,255,.8);letter-spacing:.3px;}
  .lang-chip:hover{background:rgba(204,27,27,.25);border-color:var(--red);color:#fff;}
  .team-highlight{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:32px;margin-top:40px;}
  .team-highlight p{color:rgba(255,255,255,.7);font-size:15px;line-height:1.7;}
  .team-highlight strong{color:#fff;}

  /* ── CERTIFICATIONS ─────────────────────────────────────── */
  .cert-section{padding:80px 0;background:var(--off-white);}
  .cert-card{background:var(--white);border-radius:14px;padding:28px;text-align:center;border:1px solid #E5E7EB;height:100%;transition:.2s;}
  .cert-card:hover{border-color:var(--red);box-shadow:0 8px 32px rgba(204,27,27,.1);}
  .cert-icon{font-size:48px;margin-bottom:14px;}
  .cert-card h5{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:8px;}
  .cert-card p{font-size:13px;color:var(--gray-400);line-height:1.6;}


/*----Products ----*/

/* ── PAGE HERO ── */
  .page-hero {     background: #0d1b2e;
    padding: 40px 0 36px;
    position: relative;
    overflow: hidden;}
  .page-hero::before { content: 'PRODUCTS'; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 140px; color: rgba(255,255,255,.04); line-height: 1; pointer-events: none; letter-spacing: 4px; }
  .page-hero-title { font-family: var(--font-display); font-size: clamp(32px, 5vw, 54px); color: #fff; letter-spacing: 2px; line-height: 1; }
  .page-hero-title span { color: var(--red); }
  .page-hero-sub { color: rgba(255,255,255,.65); font-size: 14px; margin-top: 8px; }
  .page-hero-stats { display: flex; gap: 24px; margin-top: 20px; flex-wrap: wrap; }
  .hero-stat { display: flex; flex-direction: column; gap: 2px; }
  .hero-stat strong { color: #fff; font-size: 18px; font-family: var(--font-display); letter-spacing: 1px; }
  .hero-stat span { color: rgba(255,255,255,.5); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; }

  /* ── FILTERS BAR ── */
  .filters-section { background: #fff; border-bottom: 1px solid var(--gray-200); position: sticky; top: 77px; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
  .filters-inner { padding: 14px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .filter-label { font-size: 12px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; margin-right: 4px; }

  /* Filter Pills */
  .filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .filter-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--gray-100); border: 1.5px solid var(--gray-200); border-radius: 20px; padding: 5px 13px; font-size: 12px; font-weight: 600; color: var(--gray-700); cursor: pointer; transition: all .15s; white-space: nowrap; user-select: none; }
  .filter-pill:hover { border-color: var(--red); color: var(--red); background: #fff5f5; }
  .filter-pill.active { background: var(--red); border-color: var(--red); color: #fff; }
  .filter-pill .pill-count { font-size: 10px; font-weight: 700; opacity: .7; }

  /* Sort + View Toggle on right */
  .filters-right {     display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
    margin-top: 26px; }
  .sort-select { border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 6px 10px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--gray-700); background: #fff; cursor: pointer; outline: none; transition: border-color .15s; }
  .sort-select:focus { border-color: var(--red); }
  .view-toggle { display: flex; border: 1.5px solid var(--gray-200); border-radius: 8px; overflow: hidden; }
  .view-btn { background: none; border: none; padding: 6px 10px; cursor: pointer; color: var(--gray-400); transition: all .15s; }
  .view-btn.active { background: var(--gray-900); color: #fff; }
  .view-btn svg { width: 16px; height: 16px; display: block; }

  /* Active Filter Tags */
  .active-filters { display: flex; align-items: center; gap: 8px; padding: 8px 0 6px; flex-wrap: wrap; }
  .active-filters-label { font-size: 12px; color: var(--gray-400); font-weight: 600; }
  .active-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--red); color: #fff; border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 700; }
  .active-tag button { background: none; border: none; color: rgba(255,255,255,.8); cursor: pointer; padding: 0; font-size: 13px; line-height: 1; display: flex; align-items: center; transition: color .1s; }
  .active-tag button:hover { color: #fff; }
  .clear-all { background: none; border: none; color: var(--red); font-family: var(--font-body); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0; }

  /* ── PRODUCT GRID ── */
  .products-section { padding: 32px 0 16px; }
  .results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
  .results-count { font-size: 14px; color: var(--gray-500); }
  .results-count strong { color: var(--gray-900); font-weight: 700; }

  /* Product Card */
  .prod-card { background: #fff; border-radius: var(--radius); border: 1px solid var(--gray-200); overflow: hidden; transition: box-shadow .2s, transform .2s; height: 100%; display: flex; flex-direction: column; }
  .prod-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
  .prod-img { position: relative; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .prod-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
  .prod-card:hover .prod-img img { transform: scale(1.04); }
  .prod-badge { position: absolute; top: 10px; left: 10px; border-radius: 4px; padding: 3px 8px; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
  .prod-badge.sale { background: var(--red); color: #fff; }
  .prod-badge.new { background: #0B6E4F; color: #fff; }
  .prod-badge.hot { background: #E07B00; color: #fff; }
  .wishlist-btn { position: absolute; top: 10px; right: 10px; background: #fff; border: 1.5px solid var(--gray-200); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: all .15s; box-shadow: var(--shadow-sm); color: var(--gray-400); }
  .wishlist-btn:hover { border-color: var(--red); color: var(--red); }
  .wishlist-btn.active { background: var(--red); color: #fff; border-color: var(--red); }
  .prod-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
  .prod-stars { display: flex; align-items: center; gap: 5px; }
  .stars { color: #F5A623; font-size: 13px; letter-spacing: 1px; }
  .reviews { font-size: 11px; color: var(--gray-400); }
  .prod-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .price { font-size: 18px; font-weight: 800; color: var(--gray-900); font-family: var(--font-display); letter-spacing: .5px; }
  .price-old { font-size: 13px; color: var(--gray-400); text-decoration: line-through; }
  .price-save { font-size: 11px; font-weight: 700; color: #0B6E4F; background: #E6F4EF; padding: 2px 7px; border-radius: 20px; }
  .add-cart { background: var(--gray-900); color: #fff; border: none; border-radius: 7px; padding: 9px 0; width: 100%; font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer; letter-spacing: .3px; transition: background .15s; margin-top: auto; }
  .add-cart:hover { background: var(--red); }

  /* List View */
  .products-grid.list-view .col { flex: 0 0 100%; max-width: 100%; }
  .products-grid.list-view .prod-card { flex-direction: row; }
  .products-grid.list-view .prod-img { width: 200px; min-width: 200px; aspect-ratio: unset; }
  .products-grid.list-view .prod-body { padding: 20px; }
  .products-grid.list-view .add-cart { max-width: 160px; }

  /* ── PAGINATION ── */
  .pagination-section { padding: 32px 0 48px; }
  .pagination-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
  .pagination-info { font-size: 13px; color: var(--gray-500); }
  .pagination-info strong { color: var(--gray-900); }
  .pagination-controls { display: flex; align-items: center; gap: 4px; }
  .page-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; border: 1.5px solid var(--gray-200); background: #fff; color: var(--gray-700); font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; text-decoration: none; }
  .page-btn:hover { border-color: var(--red); color: var(--red); background: #fff5f5; }
  .page-btn.active { background: var(--red); border-color: var(--red); color: #fff; font-weight: 800; }
  .page-btn.disabled { opacity: .4; pointer-events: none; cursor: default; }
  .page-btn svg { width: 14px; height: 14px; }
  .page-dots { color: var(--gray-400); font-size: 14px; padding: 0 4px; display: flex; align-items: center; }
  .per-page-wrap { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-500); }
  .per-page-select { border: 1.5px solid var(--gray-200); border-radius: 7px; padding: 6px 10px; font-family: var(--font-body); font-size: 13px; color: var(--gray-700); background: #fff; outline: none; cursor: pointer; }
  .per-page-select:focus { border-color: var(--red); }

  /* ── MOBILE RESPONSIVE ── */
  @media (max-width: 768px) {
    .filters-inner { gap: 6px; }
    .filters-right { margin-left: 0; width: 100%; justify-content: space-between; }
    .page-hero::before { display: none; }
    .products-grid.list-view .prod-card { flex-direction: column; }
    .products-grid.list-view .prod-img { width: 100%; aspect-ratio: 1/1; }
    .pagination-wrap { flex-direction: column; align-items: center; text-align: center; }
  }

  /* ── MOBILE MENU OVERLAY & DRAWER ── */
  .mobile-menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1050; opacity: 0; visibility: hidden; transition: all .25s; }
  .mobile-menu-overlay.active { opacity: 1; visibility: visible; }
  .mobile-menu-drawer { position: fixed; top: 0; left: -100%; width: 320px; height: 100vh; background: #fff; z-index: 1100; overflow-y: auto; transition: left .3s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; }
  .mobile-menu-drawer.open { left: 0; }
  .mob-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--gray-200); }
  .mob-close-btn { background: none; border: 1.5px solid var(--gray-200); border-radius: 8px; width: 36px; height: 36px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .mob-menu-body { flex: 1; padding: 12px 16px; }
  .mob-nav-link { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 8px; color: var(--gray-700); text-decoration: none; font-size: 14px; font-weight: 600; transition: background .12s; }
  .mob-nav-link:hover, .mob-nav-link.active { background: var(--gray-100); color: var(--gray-900); }
  .mob-nav-accordion .mob-accordion-toggle { justify-content: space-between; width: 100%; background: none; border: none; font-family: var(--font-body); cursor: pointer; }
  .mob-acc-arrow { width: 18px; height: 18px; transition: transform .2s; }
  .mob-nav-accordion.open .mob-acc-arrow { transform: rotate(180deg); }
  .mob-accordion-body { display: none; padding-left: 12px; }
  .mob-nav-accordion.open .mob-accordion-body { display: block; }
  .mob-acc-section-title { font-size: 10px; font-weight: 800; color: var(--gray-400); text-transform: uppercase; letter-spacing: 1.2px; padding: 8px 8px 4px; }
  .mob-acc-link { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px; border-radius: 6px; color: var(--gray-700); text-decoration: none; font-size: 13px; font-weight: 500; transition: background .12s; }
  .mob-acc-link:hover { background: var(--gray-100); }
  .mob-acc-link span { font-size: 11px; color: var(--gray-400); font-weight: 700; background: var(--gray-100); padding: 1px 7px; border-radius: 20px; }
  .mob-menu-footer { padding: 16px; border-top: 1px solid var(--gray-200); display: flex; flex-direction: column; gap: 10px; }
  .mob-cta-call { display: block; text-align: center; background: var(--gray-900); color: #fff; border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 700; text-decoration: none; }
  .mob-cta-quote { background: var(--red); color: #fff; border: none; border-radius: 8px; padding: 12px; font-family: var(--font-body); font-size: 14px; font-weight: 700; cursor: pointer; }

  /* Dropdown panels */
  .hdr-dropdown { position: relative; }
  
  .hdr-dropdown:hover .hdr-dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); }
  .hdp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--gray-100); }
  .hdp-head-title { font-size: 14px; font-weight: 700; color: var(--gray-900); }
  .hdp-head-count { font-size: 11px; font-weight: 700; background: var(--gray-100); padding: 2px 9px; border-radius: 20px; color: var(--gray-500); }
  .hdp-items { max-height: 280px; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
  .hdp-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; transition: background .12s; }
  .hdp-item:hover { background: var(--gray-100); }
  .hdp-item-img { width: 40px; height: 40px; border-radius: 8px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
  .hdp-item-info { flex: 1; min-width: 0; }
  .hdp-item-brand { font-size: 10px; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .5px; }
  .hdp-item-name { font-size: 12px; font-weight: 600; color: var(--gray-900); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hdp-item-price { font-size: 13px; font-weight: 800; color: var(--gray-900); white-space: nowrap; font-family: var(--font-display); }
  .hdp-item-remove { background: none; border: none; color: var(--gray-400); cursor: pointer; font-size: 18px; line-height: 1; padding: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all .12s; flex-shrink: 0; }
  .hdp-item-remove:hover { background: #ffe5e5; color: var(--red); }
  .hdp-footer { padding: 12px 14px; border-top: 1px solid var(--gray-100); display: flex; flex-direction: column; gap: 8px; }
  .hdp-subtotal { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 4px; }
  .hdp-subtotal-label { font-size: 12px; color: var(--gray-500); font-weight: 600; }
  .hdp-subtotal-val { font-size: 16px; font-weight: 800; color: var(--gray-900); font-family: var(--font-display); }
  

  .hdp-user-info { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; border-bottom: 1px solid var(--gray-100); }
  .hdp-avatar-circle { width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex-shrink: 0; }
  .hdp-user-name { font-size: 14px; font-weight: 700; color: var(--gray-900); }
  .hdp-user-email { font-size: 12px; color: var(--gray-400); }
  .hdp-menu-list { padding: 8px; }
  .hdp-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--gray-700); text-decoration: none; font-size: 13px; font-weight: 600; transition: background .12s; }
  .hdp-menu-item:hover { background: var(--gray-100); color: var(--gray-900); }
  .hdp-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; }
  .hdp-menu-item.logout { color: var(--red); }
  .hdp-menu-item.logout:hover { background: #fff5f5; }
  .hdp-menu-divider { height: 1px; background: var(--gray-100); margin: 4px 0; }

/*---Product Details ----*/
/* ── BREADCRUMB ── */
  .breadcrumb-bar { background: #fff; border-bottom: 1px solid var(--gray-200); padding: 12px 0; }
  .breadcrumb-bar a { color: var(--gray-500); text-decoration: none; font-size: 13px; }
  .breadcrumb-bar a:hover { color: var(--red); }
  .breadcrumb-bar span { color: var(--gray-400); font-size: 13px; margin: 0 6px; }
  .breadcrumb-bar .current { color: var(--gray-900); font-weight: 600; font-size: 13px; }
/* ── PRODUCT DETAIL ── */
  .product-section { padding: 40px 0 48px; }

  /* Image Gallery */
  .gallery-wrap { position: relative; }
  .main-img-box { background: #EEF2F8; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid var(--gray-200); }
  .main-img-badge { position: absolute; top: 16px; left: 16px; background: var(--red); color: #fff; border-radius: 5px; padding: 4px 10px; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
  .img-zoom-btn { position: absolute; bottom: 14px; right: 14px; background: rgba(255,255,255,.9); border: 1px solid var(--gray-200); border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--gray-700); backdrop-filter: blur(4px); transition: all .15s; }
  .img-zoom-btn:hover { background: #fff; color: var(--red); }
  .thumbs-row { display: flex; gap: 8px; margin-top: 12px; }
  .thumb { width: 70px; height: 70px; border-radius: var(--radius-sm); border: 2px solid var(--gray-200); background: var(--gray-100); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 28px; transition: border-color .15s; flex-shrink: 0; overflow: hidden; }
  .thumb.active, .thumb:hover { border-color: var(--red); }
  .share-row { display: flex; gap: 8px; margin-top: 14px; align-items: center; }
  .share-label { font-size: 12px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .8px; }
  .share-btn { background: var(--gray-100); border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--gray-700); cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 5px; }
  .share-btn:hover { border-color: var(--gray-900); color: var(--gray-900); }

  /* Product Info */
  .prod-brand-tag { font-size: 12px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 6px; }
  .prod-brand-tag::before { content: ''; display: inline-block; width: 18px; height: 2px; background: var(--red); border-radius: 2px; }
  .prod-detail-title { font-family: var(--font-display); font-size: clamp(26px, 4vw, 40px); letter-spacing: 1.5px; line-height: 1.1; color: var(--gray-900); margin: 10px 0 14px; }
  .prod-detail-sku { font-size: 12px; color: var(--gray-400); font-weight: 600; }
  .prod-detail-sku span { color: var(--gray-700); }

  .rating-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
  .stars-lg { color: #F5A623; font-size: 18px; letter-spacing: 2px; }
  .rating-score { font-size: 15px; font-weight: 800; color: var(--gray-900); }
  .rating-count { font-size: 13px; color: var(--gray-400); }
  .rating-divider { width: 1px; height: 16px; background: var(--gray-200); }
  .sold-count { font-size: 12px; font-weight: 700; color: #0B6E4F; background: #E6F4EF; padding: 3px 10px; border-radius: 20px; }

  .price-row { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 6px; flex-wrap: wrap; }
  .price-main { font-family: var(--font-display); font-size: 42px; letter-spacing: 1px; color: var(--gray-900); line-height: 1; }
  .price-main sub { font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: 0; vertical-align: super; }
  .price-old-lg { font-size: 18px; color: var(--gray-400); text-decoration: line-through; font-weight: 600; }
  .price-save-lg { background: var(--red); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 11px; border-radius: 20px; letter-spacing: .5px; }
  .vat-note { font-size: 12px; color: var(--gray-400); }

  .stock-row { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
  .stock-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; display: inline-block; }
  .stock-text { font-size: 13px; font-weight: 700; color: #0B6E4F; }
  .stock-qty { font-size: 12px; color: var(--gray-400); }

  /* Options */
  .option-label { font-size: 12px; font-weight: 800; color: var(--gray-700); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 8px; }
  .option-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
  .opt-chip { border: 2px solid var(--gray-200); border-radius: 8px; padding: 7px 16px; font-size: 13px; font-weight: 700; color: var(--gray-700); cursor: pointer; transition: all .15s; background: #fff; }
  .opt-chip:hover { border-color: var(--gray-900); color: var(--gray-900); }
  .opt-chip.active { border-color: var(--gray-900); background: var(--gray-900); color: #fff; }
  .opt-chip.disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

  /* Qty + CTA */
  .qty-cart-row { display: flex; gap: 12px; align-items: stretch; margin-top: 4px; flex-wrap: wrap; }
  .qty-wrap { display: flex; align-items: center; border: 2px solid var(--gray-200); border-radius: 10px; overflow: hidden; background: #fff; }
  .qty-btn { background: none; border: none; width: 42px; height: 50px; font-size: 20px; font-weight: 300; cursor: pointer; color: var(--gray-700); transition: background .12s; display: flex; align-items: center; justify-content: center; }
  .qty-btn:hover { background: var(--gray-100); }
  .qty-val { width: 48px; text-align: center; font-size: 16px; font-weight: 800; color: var(--gray-900); font-family: var(--font-display); letter-spacing: 1px; line-height: 1; display: flex; align-items: center; justify-content: center; }
  .btn-add-cart { flex: 1; background: var(--gray-900); color: #fff; border: none; border-radius: 10px; font-family: var(--font-body); font-size: 15px; font-weight: 800; cursor: pointer; letter-spacing: .5px; transition: background .15s; min-width: 180px; padding: 0 24px; height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; }
  .btn-add-cart:hover { background: var(--red); }
  .btn-wishlist { background: #fff; border: 2px solid var(--gray-200); border-radius: 10px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; color: var(--gray-400); transition: all .15s; }
  .btn-wishlist:hover, .btn-wishlist.active { border-color: var(--red); color: var(--red); }

  .btn-quote { width: 100%; background: transparent; border: 2px solid var(--gray-900); border-radius: 10px; font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--gray-900); cursor: pointer; padding: 12px; margin-top: 10px; transition: all .15s; letter-spacing: .3px; }
  .btn-quote:hover { background: var(--gray-900); color: #fff; }

  /* Trust badges */
  .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; }
  .trust-item { display: flex; align-items: flex-start; gap: 10px;  border-radius: var(--radius-sm); padding: 12px 14px; }
  .trust-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
  .trust-title { font-size: 12px; font-weight: 800; color: var(--gray-900); margin-bottom: 2px; }
  .trust-sub { font-size: 11px; color: var(--gray-500); line-height: 1.4; }

  /* Divider */
  .detail-divider { border: none; border-top: 1px solid var(--gray-200); margin: 28px 0; }

  /* Tabs */
  .tabs-nav { display: flex; gap: 0; border-bottom: 2px solid var(--gray-200); margin-bottom: 28px; overflow-x: auto; }
  .tab-btn { background: none; border: none; font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--gray-500); padding: 12px 22px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; white-space: nowrap; letter-spacing: .2px; }
  .tab-btn:hover { color: var(--gray-900); }
  .tab-btn.active { color: var(--red); border-bottom-color: var(--red); }
  .tab-pane { display: none; }
  .tab-pane.active { display: block; }

  /* Specs table */
  .specs-table { width: 100%; border-collapse: collapse; }
  .specs-table tr { border-bottom: 1px solid var(--gray-100); }
  .specs-table tr:last-child { border-bottom: none; }
  .specs-table td { padding: 11px 14px; font-size: 13px; vertical-align: top; }
  .specs-table td:first-child { font-weight: 700; color: var(--gray-500); width: 40%; background: var(--gray-100); }
  .specs-table td:last-child { color: var(--gray-900); font-weight: 600; }
  .specs-table tr:nth-child(even) td:last-child { background: #FAFAFA; }

  /* Features list */
  .feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--gray-700); line-height: 1.5; }
  .feature-list li::before { content: '✓'; color: #0B6E4F; font-weight: 800; font-size: 15px; flex-shrink: 0; margin-top: 1px; }

  /* Reviews */
  .review-summary { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--gray-200); }
  .review-big-score { text-align: center; }
  .review-big-num { font-family: var(--font-display); font-size: 64px; color: var(--gray-900); letter-spacing: 2px; line-height: 1; }
  .review-big-stars { color: #F5A623; font-size: 20px; letter-spacing: 2px; }
  .review-big-count { font-size: 12px; color: var(--gray-400); margin-top: 4px; }
  .rating-bars { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
  .rbar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
  .rbar-label { color: var(--gray-500); font-weight: 700; white-space: nowrap; width: 36px; }
  .rbar-track { flex: 1; height: 7px; background: var(--gray-200); border-radius: 10px; overflow: hidden; }
  .rbar-fill { height: 100%; background: #F5A623; border-radius: 10px; }
  .rbar-count { color: var(--gray-400); width: 28px; text-align: right; font-weight: 600; }
  .review-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; }
  .review-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
  .reviewer-name { font-size: 14px; font-weight: 700; color: var(--gray-900); }
  .review-date { font-size: 12px; color: var(--gray-400); }
  .review-stars { color: #F5A623; font-size: 13px; letter-spacing: 1px; }
  .review-verified { font-size: 11px; font-weight: 700; color: #0B6E4F; background: #E6F4EF; padding: 2px 8px; border-radius: 20px; }
  .review-text { font-size: 13px; color: var(--gray-700); line-height: 1.6; }

  /* Related Products */
  .section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; }
  .section-title { font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px); color: var(--gray-900); letter-spacing: 1.5px; }
  .section-title span { color: var(--red); }
  .section-link { font-size: 13px; font-weight: 700; color: var(--red); text-decoration: none; display: flex; align-items: center; gap: 4px; }
  .section-link:hover { color: var(--red-dark); }

  /* Product Card */
  .prod-card { background: #fff; border-radius: var(--radius); border: 1px solid var(--gray-200); overflow: hidden; transition: box-shadow .2s, transform .2s; height: 100%; display: flex; flex-direction: column; }
  .prod-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
  .prod-img { position: relative; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .prod-img-placeholder { font-size: 56px; opacity: .2; user-select: none; }
  .prod-badge { position: absolute; top: 10px; left: 10px; border-radius: 4px; padding: 3px 8px; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
  .prod-badge.sale { background: var(--red); color: #fff; }
  .prod-badge.new { background: #0B6E4F; color: #fff; }
  .prod-badge.hot { background: #E07B00; color: #fff; }
  .wishlist-btn { position: absolute; top: 10px; right: 10px; background: #fff; border: 1.5px solid var(--gray-200); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: all .15s; box-shadow: var(--shadow-sm); color: var(--gray-400); }
  .wishlist-btn:hover { border-color: var(--red); color: var(--red); }
  .prod-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
  .prod-stars { display: flex; align-items: center; gap: 5px; }
  .stars { color: #F5A623; font-size: 13px; letter-spacing: 1px; }
  .reviews { font-size: 11px; color: var(--gray-400); }
  .prod-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .price { font-size: 18px; font-weight: 800; color: var(--gray-900); font-family: var(--font-display); letter-spacing: .5px; }
  .price-old { font-size: 13px; color: var(--gray-400); text-decoration: line-through; }
  .price-save { font-size: 11px; font-weight: 700; color: #0B6E4F; background: #E6F4EF; padding: 2px 7px; border-radius: 20px; }
  .add-cart { background: var(--gray-900); color: #fff; border: none; border-radius: 7px; padding: 9px 0; width: 100%; font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer; letter-spacing: .3px; transition: background .15s; margin-top: auto; }
  .add-cart:hover { background: var(--red); }

  /* Recently Viewed strip */
  .recently-viewed { background: #fff; border-top: 1px solid var(--gray-200); padding: 28px 0; }

/*----Checkout----*/

/* ── CHECKOUT PROGRESS STEPS ── */
  .checkout-progress { background: #fff; border-bottom: 1px solid var(--gray-200); padding: 16px 0; }
  .steps-row { display: flex; align-items: center; justify-content: center; gap: 0; }
  .step { display: flex; align-items: center; gap: 8px; }
  .step-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; border: 2px solid var(--gray-200); color: var(--gray-400); background: #fff; transition: all .2s; flex-shrink: 0; }
  .step-label { font-size: 13px; font-weight: 700; color: var(--gray-400); white-space: nowrap; }
  .step.active .step-num { background: var(--gray-900); border-color: var(--gray-900); color: #fff; }
  .step.active .step-label { color: var(--gray-900); }
  .step.done .step-num { background: var(--green); border-color: var(--green); color: #fff; }
  .step.done .step-label { color: var(--green); }
  .step-connector { width: 40px; height: 2px; background: var(--gray-200); margin: 0 4px; }
  .step-connector.done { background: var(--green); }
  @media(max-width:480px) { .step-label { display: none; } .step-connector { width: 24px; } }

  /* ── BREADCRUMB ── */
  .breadcrumb-bar { background: #fff; border-bottom: 1px solid var(--gray-200); padding: 12px 0; }
  .breadcrumb-bar a { color: var(--gray-500); text-decoration: none; font-size: 13px; }
  .breadcrumb-bar a:hover { color: var(--red); }
  .breadcrumb-bar span { color: var(--gray-400); font-size: 13px; margin: 0 6px; }
  .breadcrumb-bar .current { color: var(--gray-900); font-weight: 600; font-size: 13px; }

  /* ── MAIN LAYOUT ── */
  .checkout-main { padding: 32px 0 64px; }

  /* ── SECTION CARDS ── */
  .checkout-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; }
  .card-header-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--gray-200); }
  .card-step-badge { width: 26px; height: 26px; border-radius: 50%; background: var(--gray-900); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .card-title { font-family: var(--font-display); font-size: 18px; letter-spacing: 1.5px; color: var(--gray-900); }
  .card-edit-btn { font-size: 12px; font-weight: 700; color: var(--red); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; }
  .card-body-pad { padding: 20px; }

  /* ── FORM ELEMENTS ── */
  .form-row { display: grid; gap: 14px; margin-bottom: 14px; }
  .form-row.cols-2 { grid-template-columns: 1fr 1fr; }
  .form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .form-row.cols-1 { grid-template-columns: 1fr; }
  .form-group { display: flex; flex-direction: column; gap: 5px; }
  .form-label { font-size: 12px; font-weight: 700; color: var(--gray-700); text-transform: uppercase; letter-spacing: .6px; }
  .form-label .req { color: var(--red); }
  .form-input { border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 10px 14px; font-family: var(--font-body); font-size: 14px; color: var(--gray-900); background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; width: 100%; }
  .form-input:focus { border-color: var(--gray-900); box-shadow: 0 0 0 3px rgba(26,26,26,.06); }
  .form-input.error { border-color: var(--red); }
  .form-input::placeholder { color: var(--gray-400); }
  .form-select { border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 10px 14px; font-family: var(--font-body); font-size: 14px; color: var(--gray-900); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center; appearance: none; outline: none; transition: border-color .15s; width: 100%; cursor: pointer; }
  .form-select:focus { border-color: var(--gray-900); }
  .field-hint { font-size: 11px; color: var(--gray-400); margin-top: 3px; }
  .field-error { font-size: 11px; color: var(--red); font-weight: 600; margin-top: 3px; display: none; }
  .form-input.error + .field-error { display: block; }
  .input-with-icon { position: relative; }
  .input-with-icon .form-input { padding-left: 38px; }
  .input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 15px; pointer-events: none; }

  /* ── RADIO / CHECKBOX CARDS ── */
  .option-cards { display: flex; flex-direction: column; gap: 10px; }
  .option-card { display: flex; align-items: flex-start; gap: 14px; border: 2px solid var(--gray-200); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s; }
  .option-card:hover { border-color: var(--gray-400); }
  .option-card.selected { border-color: var(--gray-900); background: #FAFAFA; }
  .option-card input[type="radio"] { display: none; }
  .radio-indicator { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--gray-300, #ccc); background: #fff; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
  .option-card.selected .radio-indicator { border-color: var(--gray-900); background: var(--gray-900); }
  .radio-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .15s; }
  .option-card.selected .radio-dot { opacity: 1; }
  .option-info { flex: 1; }
  .option-title { font-size: 14px; font-weight: 700; color: var(--gray-900); margin-bottom: 3px; }
  .option-sub { font-size: 12px; color: var(--gray-500); line-height: 1.5; }
  .option-price-tag { font-family: var(--font-display); font-size: 18px; letter-spacing: .5px; color: var(--gray-900); flex-shrink: 0; align-self: center; }
  .option-price-tag.free { color: var(--green); font-size: 14px; font-weight: 800; font-family: var(--font-body); }
  .option-badge { display: inline-block; background: var(--green-light); color: var(--green); font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 20px; margin-left: 8px; letter-spacing: .5px; }

  /* Payment method cards */
  .pay-card { display: flex; align-items: center; gap: 14px; border: 2px solid var(--gray-200); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s; }
  .pay-card:hover { border-color: var(--gray-400); }
  .pay-card.selected { border-color: var(--gray-900); background: #FAFAFA; }
  .pay-card input[type="radio"] { display: none; }
  .pay-icon { width: 40px; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--gray-100); flex-shrink: 0; }
  .pay-label { font-size: 14px; font-weight: 700; color: var(--gray-900); flex: 1; }
  .pay-sub { font-size: 11px; color: var(--gray-500); }
  .pay-logos { display: flex; gap: 6px; align-items: center; }
  .pay-logo { background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 4px; padding: 2px 8px; font-size: 10px; font-weight: 800; color: var(--gray-500); letter-spacing: .5px; }

  /* Card fields panel */
  .card-fields { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gray-100); animation: fadeIn .2s; }
  .card-fields.visible { display: block; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
  .card-num-wrap { position: relative; }
  .card-type-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; }

  /* ── COUPON ── */
  .coupon-row { display: flex; gap: 8px; }
  .coupon-input { flex: 1; border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 10px 14px; font-family: var(--font-body); font-size: 14px; outline: none; transition: border-color .15s; text-transform: uppercase; letter-spacing: 1px; }
  .coupon-input:focus { border-color: var(--gray-900); }
  .coupon-btn { background: var(--gray-900); color: #fff; border: none; border-radius: 8px; padding: 10px 20px; font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s; }
  .coupon-btn:hover { background: var(--red); }
  .coupon-success { display: none; align-items: center; gap: 8px; background: var(--green-light); border: 1px solid #A7D9C5; border-radius: 8px; padding: 10px 14px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--green); }

  /* ── ORDER SUMMARY (RIGHT COLUMN) ── */
  .summary-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); position: sticky; top: 20px; }
  .summary-head { padding: 16px 20px; border-bottom: 1px solid var(--gray-200); }
  .summary-title { font-family: var(--font-display); font-size: 20px; letter-spacing: 1.5px; color: var(--gray-900); }
  .summary-body { padding: 16px 20px; }
  .cart-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
  .cart-item:last-child { border-bottom: none; }
  .cart-item-img { width: 52px; height: 52px; border-radius: 8px; background: #EEF2F8; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; position: relative; border: 1px solid var(--gray-200); }
  .cart-qty-badge { position: absolute; top: -6px; right: -6px; background: var(--gray-700); color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
  .cart-item-info { flex: 1; min-width: 0; }
  .cart-item-brand { font-size: 10px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: .8px; }
  .cart-item-name { font-size: 13px; font-weight: 600; color: var(--gray-900); line-height: 1.4; margin: 2px 0; }
  .cart-item-meta { font-size: 11px; color: var(--gray-400); }
  .cart-item-price { font-family: var(--font-display); font-size: 18px; letter-spacing: .5px; color: var(--gray-900); flex-shrink: 0; }
  .cart-remove { background: none; border: none; color: var(--gray-400); cursor: pointer; font-size: 16px; padding: 0 0 0 4px; transition: color .12s; line-height: 1; }
  .cart-remove:hover { color: var(--red); }

  /* Totals */
  .totals-table { width: 100%; margin-top: 4px; }
  .totals-table td { padding: 6px 0; font-size: 13px; vertical-align: middle; }
  .totals-table td:last-child { text-align: right; font-weight: 700; color: var(--gray-900); }
  .totals-table td:first-child { color: var(--gray-500); }
  .totals-divider { border: none; border-top: 1px solid var(--gray-200); margin: 8px 0; }
  .total-row td { font-size: 16px; font-weight: 800; padding-top: 12px; }
  .total-row td:first-child { color: var(--gray-900); font-family: var(--font-display); font-size: 18px; letter-spacing: 1px; }
  .total-row td:last-child { font-family: var(--font-display); font-size: 22px; letter-spacing: 1px; color: var(--gray-900); }
  .savings-row td { color: var(--green); font-size: 12px; }
  .savings-row td:first-child { color: var(--green); }

  /* Place order button */
  .btn-place-order { width: 100%; background: var(--red); color: #fff; border: none; border-radius: 10px; padding: 16px; font-family: var(--font-body); font-size: 16px; font-weight: 800; cursor: pointer; letter-spacing: .5px; transition: background .15s, transform .1s; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
  .btn-place-order:hover { background: var(--red-dark); }
  .btn-place-order:active { transform: scale(.98); }
  .secure-note { text-align: center; font-size: 11px; color: var(--gray-400); margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 5px; }
  .summary-trust { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gray-100); }
  .strust-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray-500); font-weight: 600; }
  .strust-icon { font-size: 14px; }

  /* ── CHECKBOX ── */
  .check-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin-bottom: 10px; }
  .check-box { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--gray-200); flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; transition: all .15s; cursor: pointer; }
  .check-box.checked { background: var(--gray-900); border-color: var(--gray-900); }
  .check-tick { color: #fff; font-size: 11px; font-weight: 800; }
  .check-label { font-size: 13px; color: var(--gray-700); line-height: 1.5; }
  .check-label a { color: var(--red); text-decoration: none; font-weight: 700; }
  .check-label a:hover { text-decoration: underline; }

/*----Contact Us ----*/

/* ── PAGE HERO ── */
  .page-hero {       background: #0d1b2e;
    padding: 48px 0 44px;
    position: relative;
    overflow: hidden; }
  .page-hero::before { content: 'CONTACT'; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 140px; color: rgba(255,255,255,.04); line-height: 1; pointer-events: none; letter-spacing: 4px; }
  .page-hero-title { font-family: var(--font-display); font-size: clamp(32px, 5vw, 56px); color: #fff; letter-spacing: 2px; line-height: 1; }
  .page-hero-title span { color: var(--red); }
  .page-hero-sub { color: rgba(255,255,255,.6); font-size: 15px; margin-top: 10px; max-width: 520px; line-height: 1.6; }

  /* Quick contact strip */
  .quick-contact-strip { background: #fff; border-bottom: 1px solid var(--gray-200); padding: 0; }
  .qc-items { display: flex; align-items: stretch; }
  .qc-item { flex: 1; display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-right: 1px solid var(--gray-200); text-decoration: none; color: var(--gray-900); transition: background .15s; cursor: pointer; }
  .qc-item:last-child { border-right: none; }
  .qc-item:hover { background: var(--gray-100); }
  .qc-icon-wrap { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
  .qc-icon-wrap.red { background: #fff0f0; }
  .qc-icon-wrap.green { background: var(--green-light); }
  .qc-icon-wrap.blue { background: #EEF4FF; }
  .qc-icon-wrap.orange { background: #FFF4E8; }
  .qc-label { font-size: 11px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 3px; }
  .qc-value { font-size: 14px; font-weight: 800; color: var(--gray-900); }
  .qc-sub { font-size: 11px; color: var(--gray-500); margin-top: 1px; }

  /* ── MAIN CONTENT ── */
  .contact-main { padding: 48px 0 64px; }

  /* ── CONTACT FORM CARD ── */
  .contact-form-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; }
  .cfc-header { background: var(--gray-900); padding: 22px 28px; display: flex; align-items: center; gap: 12px; }
  .cfc-title { font-family: var(--font-display); font-size: 22px; letter-spacing: 2px; color: #fff; }
  .cfc-sub { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 2px; }
  .cfc-body { padding: 28px; }

  /* Subject tabs */
  .subject-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
  .subj-tab { border: 2px solid var(--gray-200); border-radius: 8px; padding: 8px 16px; font-size: 12px; font-weight: 700; color: var(--gray-700); cursor: pointer; transition: all .15s; background: #fff; display: flex; align-items: center; gap: 6px; }
  .subj-tab:hover { border-color: var(--gray-900); color: var(--gray-900); }
  .subj-tab.active { border-color: var(--gray-900); background: var(--gray-900); color: #fff; }

  /* Form elements */
  .form-row { display: grid; gap: 14px; margin-bottom: 14px; }
  .form-row.cols-2 { grid-template-columns: 1fr 1fr; }
  .form-row.cols-1 { grid-template-columns: 1fr; }
  .form-group { display: flex; flex-direction: column; gap: 5px; }
  .form-label { font-size: 12px; font-weight: 700; color: var(--gray-700); text-transform: uppercase; letter-spacing: .6px; }
  .form-label .req { color: var(--red); }
  .form-input { border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 11px 14px; font-family: var(--font-body); font-size: 14px; color: var(--gray-900); background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; width: 100%; }
  .form-input:focus { border-color: var(--gray-900); box-shadow: 0 0 0 3px rgba(26,26,26,.06); }
  .form-input.error { border-color: var(--red); }
  .form-input::placeholder { color: var(--gray-400); }
  .form-select { border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 11px 14px; font-family: var(--font-body); font-size: 14px; color: var(--gray-900); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center; appearance: none; outline: none; transition: border-color .15s; width: 100%; cursor: pointer; }
  .form-select:focus { border-color: var(--gray-900); }
  .input-with-icon { position: relative; }
  .input-with-icon .form-input { padding-left: 40px; }
  .input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 15px; pointer-events: none; }
  .field-hint { font-size: 11px; color: var(--gray-400); }
  .char-count { font-size: 11px; color: var(--gray-400); text-align: right; }

  .btn-send { background: var(--red); color: #fff; border: none; border-radius: 10px; padding: 14px 32px; font-family: var(--font-body); font-size: 15px; font-weight: 800; cursor: pointer; letter-spacing: .5px; transition: background .15s, transform .1s; display: inline-flex; align-items: center; gap: 10px; }
  .btn-send:hover { background: var(--red-dark); }
  .btn-send:active { transform: scale(.98); }

  /* Language badges */
  .lang-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
  .lang-badge { background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 20px; padding: 4px 12px; font-size: 11px; font-weight: 700; color: var(--gray-600, #555); }

  /* ── INFO CARDS (right column) ── */
  .info-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
  .info-card-head { padding: 16px 20px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; gap: 10px; }
  .info-card-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
  .info-card-title { font-family: var(--font-display); font-size: 17px; letter-spacing: 1.5px; color: var(--gray-900); }
  .info-card-body { padding: 18px 20px; }

  .contact-detail-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
  .contact-detail-row:last-child { border-bottom: none; }
  .cd-icon { font-size: 18px; flex-shrink: 0; width: 32px; text-align: center; margin-top: 1px; }
  .cd-label { font-size: 11px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 3px; }
  .cd-value { font-size: 14px; font-weight: 700; color: var(--gray-900); text-decoration: none; }
  .cd-value:hover { color: var(--red); }
  .cd-sub { font-size: 12px; color: var(--gray-500); margin-top: 2px; }

  /* Hours table */
  .hours-table { width: 100%; }
  .hours-table tr td { padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--gray-100); }
  .hours-table tr:last-child td { border-bottom: none; }
  .hours-table td:first-child { color: var(--gray-600, #555); font-weight: 600; }
  .hours-table td:last-child { text-align: right; font-weight: 700; color: var(--gray-900); }
  .hours-table .closed td { color: var(--gray-400); }
  .hours-table .today td { color: var(--green); font-weight: 800; }
  .open-now { display: inline-flex; align-items: center; gap: 6px; background: var(--green-light); color: var(--green); font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 20px; margin-top: 10px; }
  .open-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 1.5s infinite; }
  @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)} }

  /* Department cards */
  .dept-card { background: var(--gray-100); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: flex-start; gap: 12px; transition: background .15s; cursor: pointer; }
  .dept-card:hover { background: var(--gray-200); }
  .dept-icon { font-size: 22px; flex-shrink: 0; }
  .dept-name { font-size: 14px; font-weight: 800; color: var(--gray-900); margin-bottom: 3px; }
  .dept-info { font-size: 12px; color: var(--gray-500); line-height: 1.5; }
  .dept-contact { font-size: 12px; font-weight: 700; color: var(--red); margin-top: 4px; text-decoration: none; }
  .dept-contact:hover { text-decoration: underline; }

  /* Map box */
  .map-box { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--gray-200); background: var(--gray-100); position: relative; height: 260px; display: flex; align-items: center; justify-content: center; }
  .map-placeholder { text-align: center; }
  .map-pin { font-size: 48px; display: block; margin-bottom: 8px; animation: bounce 2s infinite; }
  @keyframes bounce { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }
  .map-label { font-family: var(--font-display); font-size: 16px; letter-spacing: 1px; color: var(--gray-700); }
  .map-sub { font-size: 12px; color: var(--gray-400); margin-top: 4px; }
  .map-directions-btn { position: absolute; bottom: 14px; right: 14px; background: var(--gray-900); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-family: var(--font-body); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s; display: flex; align-items: center; gap: 6px; }
  .map-directions-btn:hover { background: var(--red); }

  /* ── FAQ SECTION ── */
  .faq-section { padding: 0 0 56px; }
  .section-title-block { margin-bottom: 28px; }
  .section-title { font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 36px); color: var(--gray-900); letter-spacing: 1.5px; }
  .section-title span { color: var(--red); }
  .section-sub { font-size: 14px; color: var(--gray-500); margin-top: 6px; }

  .faq-item { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; }
  .faq-question { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; cursor: pointer; gap: 12px; transition: background .12s; user-select: none; }
  .faq-question:hover { background: var(--gray-100); }
  .faq-q-text { font-size: 14px; font-weight: 700; color: var(--gray-900); flex: 1; }
  .faq-arrow { font-size: 18px; color: var(--gray-400); transition: transform .22s; flex-shrink: 0; }
  .faq-item.open .faq-arrow { transform: rotate(180deg); color: var(--red); }
  .faq-item.open .faq-question { background: var(--gray-100); }
  .faq-answer { display: none; padding: 0 20px 16px; font-size: 13px; color: var(--gray-700); line-height: 1.7; border-top: 1px solid var(--gray-100); }
  .faq-answer.open { display: block; animation: fadeIn .2s; }
  @keyframes fadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }

  /* ── SUCCESS MODAL ── */
  .success-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; }
  .success-overlay.active { display: flex; animation: fadeIn .25s; }
  .success-modal { background: #fff; border-radius: 14px; max-width: 480px; width: 100%; padding: 40px 36px; text-align: center; box-shadow: var(--shadow-lg); }
  .success-icon { font-size: 64px; margin-bottom: 16px; animation: popIn .4s cubic-bezier(.68,-.55,.27,1.55); }
  @keyframes popIn { from{transform:scale(0)} to{transform:scale(1)} }
  .success-title { font-family: var(--font-display); font-size: 34px; letter-spacing: 2px; color: var(--gray-900); margin-bottom: 10px; }
  .success-body { font-size: 14px; color: var(--gray-500); line-height: 1.7; margin-bottom: 24px; }
  .btn-success-close { background: var(--gray-900); color: #fff; border: none; border-radius: 10px; padding: 13px 32px; font-family: var(--font-body); font-size: 14px; font-weight: 800; cursor: pointer; transition: background .15s; }
  .btn-success-close:hover { background: var(--red); }

  /* ── MOBILE MENU ── */
  .mobile-menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1050; opacity: 0; visibility: hidden; transition: all .25s; }
  .mobile-menu-overlay.active { opacity: 1; visibility: visible; }
  .mobile-menu-drawer { position: fixed; top: 0; left: -100%; width: 320px; height: 100vh; background: #fff; z-index: 1100; overflow-y: auto; transition: left .3s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; }
  .mobile-menu-drawer.open { left: 0; }
  .mob-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--gray-200); }
  .mob-close-btn { background: none; border: 1.5px solid var(--gray-200); border-radius: 8px; width: 36px; height: 36px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .mob-menu-body { flex: 1; padding: 12px 16px; }
  .mob-nav-link { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 8px; color: var(--gray-700); text-decoration: none; font-size: 14px; font-weight: 600; transition: background .12s; }
  .mob-nav-link:hover, .mob-nav-link.active { background: var(--gray-100); color: var(--gray-900); }
  .mob-menu-footer { padding: 16px; border-top: 1px solid var(--gray-200); display: flex; flex-direction: column; gap: 10px; }
  .mob-cta-call { display: block; text-align: center; background: var(--gray-900); color: #fff; border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 700; text-decoration: none; }
  .mob-cta-quote { background: var(--red); color: #fff; border: none; border-radius: 8px; padding: 12px; font-family: var(--font-body); font-size: 14px; font-weight: 700; cursor: pointer; }


 /* ── CHECKOUT PROGRESS ── */
  .checkout-progress { background: #fff; border-bottom: 1px solid var(--gray-200); padding: 14px 0; }
  .steps-row { display: flex; align-items: center; justify-content: center; }
  .step { display: flex; align-items: center; gap: 8px; }
  .step-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; border: 2px solid var(--gray-200); color: var(--gray-400); background: #fff; flex-shrink: 0; }
  .step-label { font-size: 13px; font-weight: 700; color: var(--gray-400); white-space: nowrap; }
  .step.active .step-num { background: var(--gray-900); border-color: var(--gray-900); color: #fff; }
  .step.active .step-label { color: var(--gray-900); }
  .step-connector { width: 48px; height: 2px; background: var(--gray-200); margin: 0 6px; }
  @media(max-width:480px) { .step-label { display: none; } .step-connector { width: 24px; } }

  /* ── PAGE HERO STRIP ── */
  .page-strip { background: var(--gray-900); padding: 24px 0; border-bottom: 3px solid var(--red); }
  .page-strip-title { font-family: var(--font-display); font-size: clamp(26px, 4vw, 40px); color: #fff; letter-spacing: 2px; }
  .page-strip-title span { color: var(--red); }
  .page-strip-sub { color: rgba(255,255,255,.5); font-size: 13px; margin-top: 4px; }

  /* ── CART MAIN ── */
  .cart-main { padding: 36px 0 72px; }

  /* ── CART TABLE CARD ── */
  .cart-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; }
  .cart-card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--gray-200); }
  .cart-card-title { font-family: var(--font-display); font-size: 18px; letter-spacing: 1.5px; color: var(--gray-900); }
  .cart-count-badge { background: var(--gray-900); color: #fff; border-radius: 20px; padding: 3px 12px; font-size: 12px; font-weight: 800; }
  .btn-clear { background: none; border: 1.5px solid var(--gray-200); border-radius: 7px; padding: 6px 14px; font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--gray-500); cursor: pointer; transition: all .15s; }
  .btn-clear:hover { border-color: var(--red); color: var(--red); }

  /* Column headers (desktop) */
  .cart-cols-header { display: grid; grid-template-columns: 1fr 110px 120px 100px 44px; gap: 12px; align-items: center; padding: 10px 24px; background: var(--gray-100); border-bottom: 1px solid var(--gray-200); font-size: 11px; font-weight: 800; color: var(--gray-400); text-transform: uppercase; letter-spacing: .8px; }
  .cart-cols-header .col-price, .cart-cols-header .col-total { text-align: right; }

  /* Cart item row */
  .cart-item-row { display: grid; grid-template-columns: 1fr 110px 120px 100px 44px; gap: 12px; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--gray-100); transition: background .12s; }
  .cart-item-row:last-child { border-bottom: none; }
  .cart-item-row:hover { background: #FEFEFE; }

  /* Product cell */
  .item-product { display: flex; align-items: center; gap: 14px; }
  .item-img { width: 72px; height: 72px; border-radius: 8px; background: #EEF2F8; display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; border: 1px solid var(--gray-200); position: relative; }
  .item-img-bg-green { background: #F0F7F0; }
  .item-img-bg-warm  { background: #F7F3EE; }
  .item-img-bg-blue  { background: #EEF2F8; }
  .item-save-tag { position: absolute; top: -6px; left: -6px; background: var(--red); color: #fff; border-radius: 4px; padding: 2px 6px; font-size: 9px; font-weight: 800; letter-spacing: .5px; }
  .item-brand { font-size: 10px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 3px; }
  .item-name { font-size: 14px; font-weight: 700; color: var(--gray-900); line-height: 1.35; margin-bottom: 4px; }
  .item-meta { display: flex; gap: 6px; flex-wrap: wrap; }
  .item-meta-chip { background: var(--gray-100); border-radius: 4px; padding: 2px 7px; font-size: 10px; font-weight: 700; color: var(--gray-500); }
  .item-actions { display: flex; gap: 8px; margin-top: 6px; }
  .item-action-btn { background: none; border: none; font-size: 11px; font-weight: 700; color: var(--gray-400); cursor: pointer; padding: 0; display: flex; align-items: center; gap: 3px; transition: color .12s; }
  .item-action-btn:hover { color: var(--red); }
  .item-action-btn.wishlist:hover { color: #E0529C; }

  /* Unit price cell */
  .item-price { font-size: 14px; font-weight: 700; color: var(--gray-700); text-align: right; }
  .item-price-old { font-size: 11px; color: var(--gray-400); text-decoration: line-through; display: block; }

  /* Qty cell */
  .qty-wrap { display: flex; align-items: center; border: 1.5px solid var(--gray-200); border-radius: 8px; overflow: hidden; background: #fff; width: fit-content; }
  .qty-btn { background: none; border: none; width: 34px; height: 36px; font-size: 18px; font-weight: 300; cursor: pointer; color: var(--gray-700); transition: background .12s; display: flex; align-items: center; justify-content: center; }
  .qty-btn:hover { background: var(--gray-100); }
  .qty-val { width: 38px; text-align: center; font-size: 14px; font-weight: 800; color: var(--gray-900); font-family: var(--font-display); letter-spacing: 1px; }

  /* Row total cell */
  .item-total { font-family: var(--font-display); font-size: 19px; letter-spacing: .5px; color: var(--gray-900); text-align: right; }

  /* Remove btn */
  .item-remove { background: none; border: 1.5px solid var(--gray-200); border-radius: 7px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--gray-400); font-size: 14px; transition: all .15s; }
  .item-remove:hover { border-color: var(--red); color: var(--red); background: #fff0f0; }

  /* ── CART FOOTER (coupon + continue) ── */
  .cart-footer-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-top: 1px solid var(--gray-200); background: var(--gray-100); flex-wrap: wrap; gap: 12px; }
  .coupon-row { display: flex; gap: 8px; }
  .coupon-input { border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 9px 14px; font-family: var(--font-body); font-size: 13px; outline: none; transition: border-color .15s; text-transform: uppercase; letter-spacing: 1px; width: 180px; background: #fff; }
  .coupon-input:focus { border-color: var(--gray-900); }
  .coupon-btn { background: var(--gray-900); color: #fff; border: none; border-radius: 8px; padding: 9px 18px; font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s; }
  .coupon-btn:hover { background: var(--red); }
  .btn-continue { background: #fff; border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 9px 18px; font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--gray-700); cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 6px; }
  .btn-continue:hover { border-color: var(--gray-900); color: var(--gray-900); }
  .coupon-success { display: none; align-items: center; gap: 8px; background: var(--green-light); border: 1px solid #A7D9C5; border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 700; color: var(--green); }

  /* ── ORDER SUMMARY ── */
  .summary-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); position: sticky; top: 90px; }
  .summary-head { padding: 16px 20px; border-bottom: 1px solid var(--gray-200); }
  .summary-title { font-family: var(--font-display); font-size: 20px; letter-spacing: 1.5px; color: var(--gray-900); }
  .summary-body { padding: 18px 20px; }

  .totals-table { width: 100%; }
  .totals-table td { padding: 7px 0; font-size: 13px; vertical-align: middle; }
  .totals-table td:last-child { text-align: right; font-weight: 700; color: var(--gray-900); }
  .totals-table td:first-child { color: var(--gray-500); }
  .totals-divider { border: none; border-top: 1px solid var(--gray-200); margin: 10px 0; }
  .total-row td { font-size: 15px; font-weight: 800; padding-top: 10px; }
  .total-row td:first-child { font-family: var(--font-display); font-size: 19px; letter-spacing: 1px; color: var(--gray-900); }
  .total-row td:last-child { font-family: var(--font-display); font-size: 24px; letter-spacing: 1px; color: var(--gray-900); }
  .savings-badge-row { background: var(--green-light); border-radius: 8px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; margin: 10px 0; font-size: 13px; }
  .savings-badge-row .label { color: var(--green); font-weight: 700; display: flex; align-items: center; gap: 6px; }
  .savings-badge-row .amount { color: var(--green); font-weight: 800; font-family: var(--font-display); font-size: 18px; letter-spacing: .5px; }

  .btn-checkout { width: 100%; background: var(--red); color: #fff; border: none; border-radius: 10px; padding: 15px; font-family: var(--font-body); font-size: 15px; font-weight: 800; cursor: pointer; letter-spacing: .5px; transition: background .15s, transform .1s; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
  .btn-checkout:hover { background: var(--red-dark); }
  .btn-checkout:active { transform: scale(.98); }
  .btn-checkout-secondary { width: 100%; background: transparent; border: 2px solid var(--gray-900); border-radius: 10px; padding: 12px; font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--gray-900); cursor: pointer; transition: all .15s; margin-top: 8px; }
  .btn-checkout-secondary:hover { background: var(--gray-900); color: #fff; }

  .tabby-note { background: var(--gray-100); border-radius: 8px; padding: 10px 12px; margin-top: 10px; font-size: 12px; color: var(--gray-500); display: flex; align-items: center; gap: 8px; }
  .tabby-note strong { color: var(--gray-900); }

  .secure-row { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--gray-400); margin-top: 10px; }

  /* Trust icons */
  .trust-row { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gray-100); }
  .trust-item-sm { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray-500); font-weight: 600; }

  /* ── DELIVERY ESTIMATE BAR ── */
  .delivery-bar { background: var(--green-light); border: 1px solid #A7D9C5; border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .delivery-bar .icon { font-size: 18px; }
  .delivery-bar .text { font-size: 13px; font-weight: 700; color: var(--green); }
  .delivery-bar .sub { font-size: 12px; color: var(--green); opacity: .8; }

  /* Threshold bar */
  .threshold-bar-wrap { background: var(--gray-100); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
  .threshold-label { font-size: 12px; font-weight: 700; color: var(--gray-700); margin-bottom: 8px; display: flex; justify-content: space-between; }
  .threshold-track { height: 6px; background: var(--gray-200); border-radius: 10px; overflow: hidden; }
  .threshold-fill { height: 100%; background: var(--green); border-radius: 10px; transition: width .4s ease; }
  .threshold-note { font-size: 11px; color: var(--green); font-weight: 700; margin-top: 6px; }

  /* ── RECENTLY VIEWED / YOU MAY ALSO LIKE ── */
  .section-title { font-family: var(--font-display); font-size: clamp(20px, 3vw, 30px); color: var(--gray-900); letter-spacing: 1.5px; }
  .section-title span { color: var(--red); }
  .section-link { font-size: 13px; font-weight: 700; color: var(--red); text-decoration: none; }
  .section-link:hover { color: var(--red-dark); }

  /* Product Card */
  .prod-card { background: #fff; border-radius: var(--radius); border: 1px solid var(--gray-200); overflow: hidden; transition: box-shadow .2s, transform .2s; height: 100%; display: flex; flex-direction: column; }
  .prod-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
  .prod-img { position: relative; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .prod-img-placeholder { font-size: 52px; opacity: .2; user-select: none; }
  .prod-badge { position: absolute; top: 10px; left: 10px; border-radius: 4px; padding: 3px 8px; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
  .prod-badge.sale { background: var(--red); color: #fff; }
  .prod-badge.new { background: var(--green); color: #fff; }
  .wl-btn { position: absolute; top: 10px; right: 10px; background: #fff; border: 1.5px solid var(--gray-200); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: var(--gray-400); transition: all .15s; box-shadow: var(--shadow-sm); }
  .wl-btn:hover { border-color: var(--red); color: var(--red); }
  .prod-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
  .prod-brand { font-size: 11px; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .8px; }
  .prod-stars { display: flex; align-items: center; gap: 4px; }
  .stars { color: #F5A623; font-size: 12px; letter-spacing: 1px; }
  .reviews { font-size: 11px; color: var(--gray-400); }
  .prod-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .price { font-size: 17px; font-weight: 800; color: var(--gray-900); font-family: var(--font-display); letter-spacing: .5px; }
  .price-old { font-size: 12px; color: var(--gray-400); text-decoration: line-through; }
  .add-cart { background: var(--gray-900); color: #fff; border: none; border-radius: 7px; padding: 9px 0; width: 100%; font-family: var(--font-body); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s; margin-top: auto; }
  .add-cart:hover { background: var(--red); }

  /* ── EMPTY CART STATE ── */
  .empty-cart { text-align: center; padding: 64px 24px; }
  .empty-icon { font-size: 72px; margin-bottom: 16px; opacity: .5; }
  .empty-title { font-family: var(--font-display); font-size: 28px; letter-spacing: 1.5px; color: var(--gray-900); margin-bottom: 8px; }
  .empty-sub { font-size: 14px; color: var(--gray-500); margin-bottom: 24px; }
  .btn-shop-now { background: var(--red); color: #fff; border: none; border-radius: 10px; padding: 13px 32px; font-family: var(--font-body); font-size: 14px; font-weight: 800; cursor: pointer; transition: background .15s; }
  .btn-shop-now:hover { background: var(--red-dark); }

  /* ── TOAST ── */
  .toast-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
  .toast-item { background: var(--gray-900); color: #fff; border-radius: 10px; padding: 12px 18px; font-size: 13px; font-weight: 700; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; animation: slideIn .3s ease; max-width: 300px; }
  @keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

  /* ── MOBILE STICKY CHECKOUT ── */
  .sticky-checkout { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--gray-200); padding: 12px 16px; z-index: 900; display: none; box-shadow: 0 -4px 16px rgba(0,0,0,.10); }
  .sticky-checkout-inner { display: flex; align-items: center; gap: 12px; }
  .sticky-total { flex: 1; }
  .sticky-total-label { font-size: 11px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .6px; }
  .sticky-total-amt { font-family: var(--font-display); font-size: 22px; letter-spacing: 1px; color: var(--gray-900); }
  .sticky-checkout-btn { background: var(--red); color: #fff; border: none; border-radius: 8px; padding: 12px 22px; font-family: var(--font-body); font-size: 14px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: background .15s; }
  .sticky-checkout-btn:hover { background: var(--red-dark); }

  /* ── MOBILE MENU ── */
  .mobile-menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1050; opacity: 0; visibility: hidden; transition: all .25s; }
  .mobile-menu-overlay.active { opacity: 1; visibility: visible; }
  .mobile-menu-drawer { position: fixed; top: 0; left: -100%; width: 320px; height: 100vh; background: #fff; z-index: 1100; overflow-y: auto; transition: left .3s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; }
  .mobile-menu-drawer.open { left: 0; }
  .mob-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--gray-200); }
  .mob-close-btn { background: none; border: 1.5px solid var(--gray-200); border-radius: 8px; width: 36px; height: 36px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .mob-menu-body { flex: 1; padding: 12px 16px; }
  .mob-nav-link { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 8px; color: var(--gray-700); text-decoration: none; font-size: 14px; font-weight: 600; transition: background .12s; }
  .mob-nav-link:hover { background: var(--gray-100); }
  .mob-menu-footer { padding: 16px; border-top: 1px solid var(--gray-200); display: flex; flex-direction: column; gap: 10px; }
  .mob-cta-call { display: block; text-align: center; background: var(--gray-900); color: #fff; border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 700; text-decoration: none; }
  .mob-cta-quote { background: var(--red); color: #fff; border: none; border-radius: 8px; padding: 12px; font-family: var(--font-body); font-size: 14px; font-weight: 700; cursor: pointer; }


 /* ── PROFILE HERO ── */
  .profile-hero {     background: #0d1b2e;
       padding: 32px 0px 40px;
    overflow: hidden;
    position: relative; }
  .profile-hero::before { content: 'ACCOUNT'; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 130px; color: rgba(255,255,255,.04); pointer-events: none; letter-spacing: 4px; line-height: 1; }
  .avatar-ring { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--red), #FF4444); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 32px; color: #fff; letter-spacing: 1px; position: relative; flex-shrink: 0; border: 3px solid rgba(255,255,255,.2); }
  .avatar-edit { position: absolute; bottom: 0; right: 0; width: 24px; height: 24px; background: var(--gray-900); border: 2px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; }
  .profile-name { font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px); color: #fff; letter-spacing: 2px; }
  .profile-email { font-size: 13px; color: rgba(255,255,255,.5); }
  .member-badge { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: 4px 14px; font-size: 11px; font-weight: 800; color: rgba(255,255,255,.7); letter-spacing: .8px; display: inline-flex; align-items: center; gap: 6px; }
  .member-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #F5A623; }

  /* Stats strip */
  .stats-strip { display: flex; gap: 0; margin-top: 24px; border-top: 1px solid rgba(255,255,255,.08); }
  .stat-item { flex: 1; text-align: center; padding: 14px 8px; border-right: 1px solid rgba(255,255,255,.08); cursor: pointer; transition: background .15s; }
  .stat-item:last-child { border-right: none; }
  .stat-item:hover { background: rgba(255,255,255,.05); }
  .stat-num { font-family: var(--font-display); font-size: 24px; color: #fff; letter-spacing: 1px; }
  .stat-label { font-size: 11px; color: rgba(255,255,255,.45); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; margin-top: 2px; }

  /* ── SIDEBAR NAV ── */
  .profile-main { padding: 32px 0 64px; }
  .sidebar-nav { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; position: sticky; top: 90px; }
  .sidebar-nav-head { padding: 14px 18px; border-bottom: 1px solid var(--gray-200); background: var(--gray-100); }
  .sidebar-nav-title { font-family: var(--font-display); font-size: 14px; letter-spacing: 1.5px; color: var(--gray-500); }
  .sidebar-nav-item { display: flex; align-items: center; gap: 12px; padding: 13px 18px; font-size: 13px; font-weight: 700; color: var(--gray-700); cursor: pointer; border-bottom: 1px solid var(--gray-100); transition: background .12s, color .12s; text-decoration: none; border-left: 3px solid transparent; }
  .sidebar-nav-item:last-child { border-bottom: none; }
  .sidebar-nav-item:hover { background: var(--gray-100); color: var(--gray-900); }
  .sidebar-nav-item.active { background: #FFF5F5; color: var(--red); border-left-color: var(--red); }
  .sidebar-nav-item .nav-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
  .sidebar-nav-item .nav-badge { margin-left: auto; background: var(--red); color: #fff; border-radius: 20px; padding: 2px 8px; font-size: 10px; font-weight: 800; }
  .sidebar-logout { display: flex; align-items: center; gap: 12px; padding: 13px 18px; font-size: 13px; font-weight: 700; color: var(--gray-400); cursor: pointer; border-top: 1px solid var(--gray-200); transition: color .12s; }
  .sidebar-logout:hover { color: var(--red); }

  /* ── CONTENT PANELS ── */
  .panel { display: none; }
  .panel.active { display: block; }

  /* Panel card */
  .panel-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
  .panel-card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--gray-200); }
  .panel-card-title { font-family: var(--font-display); font-size: 18px; letter-spacing: 1.5px; color: var(--gray-900); }
  .panel-card-body { padding: 22px; }
  .btn-edit-section { background: none; border: 1.5px solid var(--gray-200); border-radius: 7px; padding: 6px 14px; font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--gray-700); cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 6px; }
  .btn-edit-section:hover { border-color: var(--gray-900); color: var(--gray-900); }

  /* ── FORM ── */
  .form-row { display: grid; gap: 14px; margin-bottom: 14px; }
  .form-row.cols-2 { grid-template-columns: 1fr 1fr; }
  .form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .form-row.cols-1 { grid-template-columns: 1fr; }
  .form-group { display: flex; flex-direction: column; gap: 5px; }
  .form-label { font-size: 12px; font-weight: 700; color: var(--gray-700); text-transform: uppercase; letter-spacing: .6px; }
  .form-input { border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 10px 14px; font-family: var(--font-body); font-size: 14px; color: var(--gray-900); background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; width: 100%; }
  .form-input:focus { border-color: var(--gray-900); box-shadow: 0 0 0 3px rgba(26,26,26,.06); }
  .form-input:disabled { background: var(--gray-100); color: var(--gray-500); cursor: not-allowed; }
  .form-input::placeholder { color: var(--gray-400); }
  .form-select { border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 10px 14px; font-family: var(--font-body); font-size: 14px; color: var(--gray-900); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center; appearance: none; outline: none; transition: border-color .15s; width: 100%; cursor: pointer; }
  .form-select:focus { border-color: var(--gray-900); }
  .field-hint { font-size: 11px; color: var(--gray-400); }
  .btn-save { background: var(--gray-900); color: #fff; border: none; border-radius: 8px; padding: 11px 24px; font-family: var(--font-body); font-size: 13px; font-weight: 800; cursor: pointer; transition: background .15s; display: inline-flex; align-items: center; gap: 8px; }
  .btn-save:hover { background: var(--red); }
  .btn-cancel { background: none; border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 11px 24px; font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--gray-700); cursor: pointer; transition: all .15s; }
  .btn-cancel:hover { border-color: var(--gray-900); }
  .divider { border: none; border-top: 1px solid var(--gray-200); margin: 22px 0; }

  /* ── ORDERS ── */
  .order-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
  .order-card-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--gray-100); border-bottom: 1px solid var(--gray-200); flex-wrap: wrap; gap: 8px; }
  .order-ref { font-family: var(--font-display); font-size: 16px; letter-spacing: 1px; color: var(--gray-900); }
  .order-date { font-size: 12px; color: var(--gray-400); font-weight: 600; }
  .order-status { display: inline-flex; align-items: center; gap: 6px; border-radius: 20px; padding: 4px 12px; font-size: 11px; font-weight: 800; letter-spacing: .5px; }
  .status-delivered { background: var(--green-light); color: var(--green); }
  .status-processing { background: var(--orange-light); color: var(--orange); }
  .status-shipped { background: var(--blue-light); color: var(--blue); }
  .status-cancelled { background: #FEE2E2; color: var(--red); }
  .order-items-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--gray-100); flex-wrap: wrap; }
  .order-item-thumb { width: 44px; height: 44px; border-radius: 7px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; font-size: 20px; border: 1px solid var(--gray-200); flex-shrink: 0; }
  .order-item-info { flex: 1; min-width: 0; }
  .order-item-brand { font-size: 10px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: .7px; }
  .order-item-name { font-size: 13px; font-weight: 600; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .order-item-meta { font-size: 11px; color: var(--gray-400); }
  .order-item-price { font-family: var(--font-display); font-size: 17px; color: var(--gray-900); letter-spacing: .5px; flex-shrink: 0; }
  .order-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; flex-wrap: wrap; gap: 10px; }
  .order-total-lbl { font-size: 12px; color: var(--gray-500); font-weight: 700; }
  .order-total-val { font-family: var(--font-display); font-size: 20px; color: var(--gray-900); letter-spacing: .5px; }
  .order-actions { display: flex; gap: 8px; }
  .btn-order-action { border: 1.5px solid var(--gray-200); border-radius: 7px; padding: 7px 14px; font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--gray-700); cursor: pointer; background: #fff; transition: all .15s; }
  .btn-order-action:hover { border-color: var(--gray-900); color: var(--gray-900); }
  .btn-order-action.reorder { background: var(--gray-900); color: #fff; border-color: var(--gray-900); }
  .btn-order-action.reorder:hover { background: var(--red); border-color: var(--red); }

  /* Tracking timeline */
  .tracking-timeline { display: flex; flex-direction: column; gap: 0; padding: 16px 18px; }
  .track-step { display: flex; gap: 14px; padding-bottom: 18px; position: relative; }
  .track-step:last-child { padding-bottom: 0; }
  .track-dot-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 20px; }
  .track-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gray-200); background: #fff; flex-shrink: 0; }
  .track-dot.done { background: var(--green); border-color: var(--green); }
  .track-dot.active { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,86,219,.15); }
  .track-line { flex: 1; width: 2px; background: var(--gray-200); margin-top: 2px; }
  .track-line.done { background: var(--green); }
  .track-step:last-child .track-line { display: none; }
  .track-info { flex: 1; padding-top: 0; }
  .track-title { font-size: 13px; font-weight: 700; color: var(--gray-900); }
  .track-title.muted { color: var(--gray-400); font-weight: 600; }
  .track-time { font-size: 11px; color: var(--gray-400); margin-top: 2px; }

  /* ── ADDRESSES ── */
  .address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  .address-card { border: 2px solid var(--gray-200); border-radius: var(--radius); padding: 16px; position: relative; transition: border-color .15s; }
  .address-card.default { border-color: var(--gray-900); }
  .address-card:hover { border-color: var(--gray-400); }
  .address-default-tag { position: absolute; top: 12px; right: 12px; background: var(--gray-900); color: #fff; border-radius: 4px; padding: 2px 8px; font-size: 10px; font-weight: 800; letter-spacing: .5px; }
  .address-type { font-size: 11px; font-weight: 800; color: var(--gray-400); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px; }
  .address-name { font-size: 14px; font-weight: 800; color: var(--gray-900); margin-bottom: 4px; }
  .address-lines { font-size: 13px; color: var(--gray-500); line-height: 1.6; }
  .address-actions { display: flex; gap: 8px; margin-top: 12px; }
  .addr-btn { background: none; border: 1.5px solid var(--gray-200); border-radius: 6px; padding: 5px 12px; font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--gray-700); cursor: pointer; transition: all .15s; }
  .addr-btn:hover { border-color: var(--gray-900); color: var(--gray-900); }
  .addr-btn.danger:hover { border-color: var(--red); color: var(--red); }
  .add-address-card { border: 2px dashed var(--gray-200); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: border-color .15s, background .15s; min-height: 140px; }
  .add-address-card:hover { border-color: var(--gray-900); background: var(--gray-100); }
  .add-address-icon { font-size: 28px; }
  .add-address-label { font-size: 13px; font-weight: 700; color: var(--gray-500); }

  /* ── WISHLIST ── */
  .wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
  .wl-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s, transform .2s; }
  .wl-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
  .wl-img { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; font-size: 44px; opacity: .25; position: relative; }
  .wl-remove { position: absolute; top: 8px; right: 8px; background: #fff; border: 1.5px solid var(--gray-200); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; color: var(--gray-400); transition: all .15s; }
  .wl-remove:hover { border-color: var(--red); color: var(--red); }
  .wl-body { padding: 10px 12px 12px; }
  .wl-brand { font-size: 10px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: .7px; }
  .wl-name { font-size: 12px; font-weight: 600; color: var(--gray-900); line-height: 1.4; margin: 3px 0 6px; }
  .wl-price { font-family: var(--font-display); font-size: 17px; color: var(--gray-900); letter-spacing: .5px; margin-bottom: 8px; }
  .wl-add { background: var(--gray-900); color: #fff; border: none; border-radius: 6px; padding: 7px; width: 100%; font-family: var(--font-body); font-size: 11px; font-weight: 700; cursor: pointer; transition: background .15s; }
  .wl-add:hover { background: var(--red); }

  /* ── SECURITY ── */
  .security-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--gray-100); gap: 12px; flex-wrap: wrap; }
  .security-item:last-child { border-bottom: none; }
  .sec-icon-wrap { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
  .sec-title { font-size: 14px; font-weight: 700; color: var(--gray-900); margin-bottom: 3px; }
  .sec-sub { font-size: 12px; color: var(--gray-500); }
  .sec-status-on  { font-size: 11px; font-weight: 800; color: var(--green); background: var(--green-light); padding: 3px 10px; border-radius: 20px; }
  .sec-status-off { font-size: 11px; font-weight: 800; color: var(--gray-400); background: var(--gray-100); padding: 3px 10px; border-radius: 20px; }
  .btn-sec { border: 1.5px solid var(--gray-200); border-radius: 7px; padding: 7px 16px; font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--gray-700); cursor: pointer; background: #fff; transition: all .15s; flex-shrink: 0; }
  .btn-sec:hover { border-color: var(--gray-900); color: var(--gray-900); }

  /* Toggle switch */
  .toggle-wrap { display: flex; align-items: center; gap: 10px; }
  .toggle { width: 40px; height: 22px; border-radius: 11px; background: var(--gray-200); position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; }
  .toggle.on { background: var(--green); }
  .toggle::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: left .2s; box-shadow: var(--shadow-sm); }
  .toggle.on::after { left: 21px; }

  /* ── NOTIFICATIONS ── */
  .notif-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--gray-100); gap: 12px; flex-wrap: wrap; }
  .notif-row:last-child { border-bottom: none; }
  .notif-label { font-size: 14px; font-weight: 700; color: var(--gray-900); margin-bottom: 2px; }
  .notif-sub { font-size: 12px; color: var(--gray-500); }

  /* ── LOYALTY / STATS CARDS ── */
  .loyalty-card { background: #0d1b2e;
    border-radius: var(--radius);
    padding: 24px;
    color: #fff;
    position: relative;
    overflow: hidden;}
  .loyalty-card::before { content: ''; position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; border-radius: 50%; background: rgba(204,27,27,.2); }
  .loyalty-card::after { content: ''; position: absolute; right: 30px; bottom: -40px; width: 100px; height: 100px; border-radius: 50%; background: rgba(204,27,27,.1); }
  .loyalty-title { font-family: var(--font-display); font-size: 14px; letter-spacing: 2px; color: rgba(255,255,255,.5); margin-bottom: 8px; }
  .loyalty-points { font-family: var(--font-display); font-size: 56px; color: #fff; letter-spacing: 2px; line-height: 1; }
  .loyalty-pts-label { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 4px; }
  .loyalty-level { display: inline-flex; align-items: center; gap: 6px; background: rgba(245,166,35,.2); border: 1px solid rgba(245,166,35,.3); border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 800; color: #F5A623; margin-top: 14px; }
  .loyalty-bar-wrap { margin-top: 16px; }
  .loyalty-bar-label { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.4); margin-bottom: 6px; }
  .loyalty-track { height: 5px; background: rgba(255,255,255,.1); border-radius: 10px; overflow: hidden; }
  .loyalty-fill { height: 100%; width: 68%; background: linear-gradient(90deg, var(--red), #FF6B6B); border-radius: 10px; }

  .stat-mini-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 18px 20px; display: flex; align-items: center; gap: 14px; }
  .stat-mini-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
  .stat-mini-val { font-family: var(--font-display); font-size: 26px; color: var(--gray-900); letter-spacing: 1px; line-height: 1; }
  .stat-mini-label { font-size: 12px; color: var(--gray-500); font-weight: 600; margin-top: 2px; }

  /* ── TOAST ── */
  .toast-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
  .toast-item { background: var(--gray-900); color: #fff; border-radius: 10px; padding: 12px 18px; font-size: 13px; font-weight: 700; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; animation: slideIn .3s ease; max-width: 300px; }
  @keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

  /* ── MOBILE MENU ── */
  .mobile-menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1050; opacity: 0; visibility: hidden; transition: all .25s; }
  .mobile-menu-overlay.active { opacity: 1; visibility: visible; }
  .mobile-menu-drawer { position: fixed; top: 0; left: -100%; width: 320px; height: 100vh; background: #fff; z-index: 1100; overflow-y: auto; transition: left .3s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; }
  .mobile-menu-drawer.open { left: 0; }
  .mob-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--gray-200); }
  .mob-close-btn { background: none; border: 1.5px solid var(--gray-200); border-radius: 8px; width: 36px; height: 36px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .mob-menu-body { flex: 1; padding: 12px 16px; }
  .mob-nav-link { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 8px; color: var(--gray-700); text-decoration: none; font-size: 14px; font-weight: 600; transition: background .12s; }
  .mob-nav-link:hover { background: var(--gray-100); }
  .mob-menu-footer { padding: 16px; border-top: 1px solid var(--gray-200); display: flex; flex-direction: column; gap: 10px; }
  .mob-cta-call { display: block; text-align: center; background: var(--gray-900); color: #fff; border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 700; text-decoration: none; }

  /* Mobile sidebar nav */
  .mobile-tab-bar { display: none; overflow-x: auto; background: #fff; border-bottom: 1px solid var(--gray-200); padding: 0; -webkit-overflow-scrolling: touch; }
  .mobile-tab-bar::-webkit-scrollbar { display: none; }
  .mobile-tab-item { flex-shrink: 0; padding: 12px 16px; font-size: 12px; font-weight: 700; color: var(--gray-500); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; transition: color .12s, border-color .12s; }
  .mobile-tab-item.active { color: var(--red); border-bottom-color: var(--red); }



/* --- certificate -page ----*/

/* Hero */
.cert-hero {
  background: #111;
  background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(204,27,27,.22) 0%, transparent 70%);
  padding: 80px 0 60px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.cert-hero .section-eyebrow {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #CC1B1B;
  margin-bottom: 14px;
}
.cert-hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(38px, 6vw, 72px);
  letter-spacing: 4px;
  color: #fff;
  line-height: 1;
  margin-bottom: 18px;
}
.cert-hero h1 span { color: #CC1B1B; }
.cert-hero p {
  color: rgba(255,255,255,.55);
  font-size: 16px;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
  font-family: 'Manrope', sans-serif;
}

/* Stats strip */
.cert-stats {
  background: #1a1a1a;
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 24px 0;
}
.cert-stat {
  text-align: center;
  padding: 0 20px;
}
.cert-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  letter-spacing: 2px;
  color: #CC1B1B;
  line-height: 1;
}
.cert-stat-label {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-top: 4px;
}
.cert-stat-divider {
  width: 1px;
  background: rgba(255,255,255,.1);
  height: 44px;
  margin: auto;
}

/* Gallery section */
.cert-gallery-section {
  background: #0f0f0f;
  padding: 72px 0 80px;
}
.cert-gallery-section .section-eyebrow {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #CC1B1B;
  margin-bottom: 12px;
}
.cert-gallery-section .section-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: 3px;
  color: #fff;
  margin-bottom: 8px;
}
.cert-gallery-section .section-heading span { color: #CC1B1B; }

/* Certificate card */
.cert-card-item {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.cert-card-item:hover {
  transform: translateY(-6px);
  border-color: rgba(204,27,27,.5);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(204,27,27,.15);
}
.cert-card-img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform .35s ease;
}
.cert-card-item:hover .cert-card-img {
  transform: scale(1.04);
}
.cert-card-body {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a1a1a;
}
.cert-card-label {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.cert-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #CC1B1B;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .5px;
  transition: background .2s ease;
}
.cert-view-btn:hover { background: #a81515; color: #fff; }

/* Lightbox overlay */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(6px);
}
.lightbox-overlay.active { display: flex; }
.lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}
.lightbox-inner img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0,0,0,.8);
}
.lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.lightbox-close:hover { background: #CC1B1B; }

/* Cert trust strip */
.cert-trust-strip {
  background: linear-gradient(135deg, #CC1B1B 0%, #991111 100%);
  padding: 48px 0;
}
.cert-trust-strip h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(24px, 3.5vw, 40px);
  letter-spacing: 3px;
  color: #fff;
  margin-bottom: 10px;
}
.cert-trust-strip p {
  color: rgba(255,255,255,.75);
  font-size: 15px;
  font-family: 'Manrope', sans-serif;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.7;
}
.trust-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}
.trust-badge {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 6px;
}


/* Announce bar */
.announce {
  background: #CC1B1B;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
}
.announce-badge {
  background: rgba(255,255,255,.2);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

/*----Privacy-Policy----*/

 

  /* ── LAYOUT ── */
  .policy-main { padding: 40px 0 72px; }

  /* ── STICKY TABLE OF CONTENTS ── */
  .toc-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); position: sticky; top: 90px; overflow: hidden; }
  .toc-head { padding: 14px 18px; border-bottom: 1px solid var(--gray-200); background: var(--gray-100); }
  .toc-title { font-family: var(--font-display); font-size: 14px; letter-spacing: 1.5px; color: var(--gray-500); }
  .toc-list { list-style: none; padding: 8px 0; margin: 0; }
  .toc-list li a { display: flex; align-items: center; gap: 10px; padding: 9px 18px; font-size: 13px; font-weight: 600; color: var(--gray-700); text-decoration: none; border-left: 3px solid transparent; transition: all .12s; }
  .toc-list li a:hover { background: var(--gray-100); color: var(--gray-900); border-left-color: var(--gray-200); }
  .toc-list li a.active { background: #FFF5F5; color: var(--red); border-left-color: var(--red); font-weight: 700; }
  .toc-num { width: 20px; height: 20px; border-radius: 50%; background: var(--gray-200); color: var(--gray-500); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .toc-list li a.active .toc-num { background: var(--red); color: #fff; }
  .toc-footer { padding: 12px 18px; border-top: 1px solid var(--gray-200); }
  .toc-updated { font-size: 11px; color: var(--gray-400); font-weight: 600; }

  /* Download / Print bar */
  .action-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
  .action-btn { display: flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 8px 16px; font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--gray-700); cursor: pointer; transition: all .15s; text-decoration: none; }
  .action-btn:hover { border-color: var(--gray-900); color: var(--gray-900); }

  /* ── POLICY SECTIONS ── */
  .policy-section { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 32px 36px; margin-bottom: 16px; scroll-margin-top: 100px; }
  .section-num-badge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gray-900); color: #fff; font-size: 13px; font-weight: 800; flex-shrink: 0; }
  .section-heading { font-family: var(--font-display); font-size: 22px; letter-spacing: 1.5px; color: var(--gray-900); }
  .section-intro { font-size: 14px; color: var(--gray-500); line-height: 1.7; margin-top: 6px; margin-bottom: 20px; }

  /* Prose */
  .policy-prose { font-size: 14px; color: var(--gray-700); line-height: 1.75; }
  .policy-prose p { margin-bottom: 14px; }
  .policy-prose p:last-child { margin-bottom: 0; }
  .policy-prose strong { color: var(--gray-900); font-weight: 700; }
  .policy-prose a { color: var(--red); text-decoration: none; font-weight: 700; }
  .policy-prose a:hover { text-decoration: underline; }

  /* Highlight boxes */
  .info-box { display: flex; gap: 14px; background: var(--blue-light); border: 1px solid #C3D9FF; border-radius: 8px; padding: 14px 16px; margin: 16px 0; }
  .info-box.green { background: var(--green-light); border-color: #A7D9C5; }
  .info-box.yellow { background: #FFFBEB; border-color: #FDE68A; }
  .info-box.red { background: #FFF5F5; border-color: #FECACA; }
  .info-box-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
  .info-box-text { font-size: 13px; color: var(--gray-700); line-height: 1.6; }
  .info-box-text strong { color: var(--gray-900); }

  /* Policy list */
  .policy-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
  .policy-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--gray-700); line-height: 1.55; }
  .policy-list li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0; margin-top: 7px; }
  .policy-list.check li::before { content: '✓'; background: none; color: var(--green); font-size: 13px; font-weight: 800; margin-top: 0; width: auto; height: auto; border-radius: 0; }
  .policy-list.numbered { counter-reset: pol-cnt; }
  .policy-list.numbered li::before { counter-increment: pol-cnt; content: counter(pol-cnt); background: var(--gray-900); color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

  /* Data table */
  .data-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
  .data-table thead th { background: var(--gray-900); color: #fff; padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; }
  .data-table thead th:first-child { border-radius: 6px 0 0 0; }
  .data-table thead th:last-child { border-radius: 0 6px 0 0; }
  .data-table tbody tr { border-bottom: 1px solid var(--gray-100); }
  .data-table tbody tr:last-child { border-bottom: none; }
  .data-table tbody tr:hover { background: #FAFAFA; }
  .data-table td { padding: 10px 14px; color: var(--gray-700); vertical-align: top; line-height: 1.5; }
  .data-table td:first-child { font-weight: 700; color: var(--gray-900); width: 28%; }
  .data-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--gray-200); }

  /* Rights grid */
  .rights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
  .right-card { background: var(--gray-100); border-radius: 8px; padding: 16px; }
  .right-icon { font-size: 24px; margin-bottom: 8px; }
  .right-title { font-size: 13px; font-weight: 800; color: var(--gray-900); margin-bottom: 4px; }
  .right-desc { font-size: 12px; color: var(--gray-500); line-height: 1.5; }

  /* Cookie table */
  .cookie-type { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--gray-100); }
  .cookie-type:last-child { border-bottom: none; }
  .cookie-toggle { width: 36px; height: 20px; border-radius: 10px; flex-shrink: 0; margin-top: 2px; position: relative; cursor: pointer; transition: background .2s; }
  .cookie-toggle.on  { background: var(--green); }
  .cookie-toggle.off { background: var(--gray-300, #ccc); cursor: not-allowed; }
  .cookie-toggle::after { content: ''; position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 50%; top: 3px; transition: left .2s; box-shadow: var(--shadow-sm); }
  .cookie-toggle.on::after  { left: 19px; }
  .cookie-toggle.off::after { left: 3px; }
  .cookie-info { flex: 1; }
  .cookie-name { font-size: 13px; font-weight: 800; color: var(--gray-900); margin-bottom: 3px; }
  .cookie-desc { font-size: 12px; color: var(--gray-500); line-height: 1.5; }
  .cookie-required { font-size: 10px; font-weight: 800; background: var(--gray-100); color: var(--gray-400); padding: 2px 8px; border-radius: 20px; margin-left: 8px; letter-spacing: .5px; }
  .btn-save-cookies { background: var(--gray-900); color: #fff; border: none; border-radius: 8px; padding: 11px 24px; font-family: var(--font-body); font-size: 13px; font-weight: 800; cursor: pointer; transition: background .15s; margin-top: 16px; }
  .btn-save-cookies:hover { background: var(--red); }

  /* Section divider */
  .policy-divider { border: none; border-top: 1px solid var(--gray-200); margin: 22px 0; }

  /* Last updated bar */
  .last-updated-bar { background: var(--green-light); border: 1px solid #A7D9C5; border-radius: 8px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
  .lub-icon { font-size: 18px; }
  .lub-text { font-size: 13px; font-weight: 700; color: var(--green); }
  .lub-sub { font-size: 12px; color: var(--green); opacity: .75; }

  /* Contact card */
  .contact-card { background: var(--gray-900); border-radius: var(--radius); padding: 24px 28px; color: #fff; }
  .contact-card-title { font-family: var(--font-display); font-size: 22px; letter-spacing: 1.5px; margin-bottom: 12px; }
  .contact-detail { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; color: rgba(255,255,255,.65); }
  .contact-detail a { color: rgba(255,255,255,.85); text-decoration: none; font-weight: 700; transition: color .12s; }
  .contact-detail a:hover { color: var(--red); }


/*-----Term and conditions ------*/

 /* ── PAGE HERO ── */
  .page-hero { background: #0d1b2e;
    padding: 44px 0 40px;
    position: relative;
    overflow: hidden; }
  .page-hero::before { content: 'PRODUCTS'; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 160px; color: rgba(255,255,255,.035); pointer-events: none; letter-spacing: 4px; line-height: 1; white-space: nowrap; }
  .hero-title { font-family: var(--font-display); font-size: clamp(30px, 5vw, 54px);  letter-spacing: 2px; line-height: 1; }
  .hero-title span { color: var(--red); }
  .hero-sub {font-size: 14px; margin-top: 10px; max-width: 560px; line-height: 1.6; }
  .hero-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
  .hero-meta-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255,255,255,.45); font-weight: 600; }
  .hero-meta-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }

  /* ── LAYOUT ── */
  .terms-main { padding: 40px 0 72px; }

  /* ── STICKY TOC ── */
  .toc-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); position: sticky; top: 90px; overflow: hidden; }
  .toc-head { padding: 14px 18px; border-bottom: 1px solid var(--gray-200); background: var(--gray-100); }
  .toc-title { font-family: var(--font-display); font-size: 14px; letter-spacing: 1.5px; color: var(--gray-500); }
  .toc-list { list-style: none; padding: 8px 0; margin: 0; }
  .toc-list li a { display: flex; align-items: center; gap: 10px; padding: 8px 18px; font-size: 12px; font-weight: 600; color: var(--gray-700); text-decoration: none; border-left: 3px solid transparent; transition: all .12s; line-height: 1.4; }
  .toc-list li a:hover { background: var(--gray-100); color: var(--gray-900); border-left-color: var(--gray-200); }
  .toc-list li a.active { background: #FFF5F5; color: var(--red); border-left-color: var(--red); font-weight: 700; }
  .toc-num { width: 20px; height: 20px; border-radius: 50%; background: var(--gray-200); color: var(--gray-500); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .toc-list li a.active .toc-num { background: var(--red); color: #fff; }
  .toc-footer { padding: 12px 18px; border-top: 1px solid var(--gray-200); font-size: 11px; color: var(--gray-400); font-weight: 600; }

  /* ── ACTION BAR ── */
  .action-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
  .action-btn { display: flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 8px 16px; font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--gray-700); cursor: pointer; transition: all .15s; text-decoration: none; }
  .action-btn:hover { border-color: var(--gray-900); color: var(--gray-900); }

  /* ── LAST UPDATED BAR ── */
  .last-updated-bar { background: var(--orange-light); border: 1px solid #FBBF24; border-radius: 8px; padding: 12px 16px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
  .lub-icon { font-size: 18px; flex-shrink: 0; }
  .lub-text { font-size: 13px; font-weight: 700; color: var(--orange); }
  .lub-sub { font-size: 12px; color: var(--orange); opacity: .8; margin-top: 2px; }

  /* ── SECTION CARDS ── */
  .terms-section { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 32px 36px; margin-bottom: 16px; scroll-margin-top: 100px; }
  .section-num-badge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gray-900); color: #fff; font-size: 13px; font-weight: 800; flex-shrink: 0; }
  .section-heading { font-family: var(--font-display); font-size: 22px; letter-spacing: 1.5px; color: var(--gray-900); }
  .section-intro { font-size: 14px; color: var(--gray-500); line-height: 1.7; margin-top: 6px; margin-bottom: 20px; }

  /* ── PROSE ── */
  .terms-prose { font-size: 14px; color: var(--gray-700); line-height: 1.75; }
  .terms-prose p { margin-bottom: 14px; }
  .terms-prose p:last-child { margin-bottom: 0; }
  .terms-prose strong { color: var(--gray-900); font-weight: 700; }
  .terms-prose a { color: var(--red); text-decoration: none; font-weight: 700; }
  .terms-prose a:hover { text-decoration: underline; }

  /* ── INFO BOXES ── */
  .info-box { display: flex; gap: 14px; border-radius: 8px; padding: 14px 16px; margin: 16px 0; }
  .info-box.blue   { background: var(--blue-light);   border: 1px solid #C3D9FF; }
  .info-box.green  { background: var(--green-light);  border: 1px solid #A7D9C5; }
  .info-box.yellow { background: var(--orange-light); border: 1px solid #FDE68A; }
  .info-box.red    { background: #FFF5F5;             border: 1px solid #FECACA; }
  .info-box.dark   { background: var(--gray-900);     border: 1px solid var(--gray-700); }
  .info-box-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
  .info-box-body { font-size: 13px; line-height: 1.6; }
  .info-box-body strong { color: var(--gray-900); }
  .info-box.dark .info-box-body { color: rgba(255,255,255,.75); }
  .info-box.dark .info-box-body strong { color: #fff; }

  /* ── LISTS ── */
  .terms-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
  .terms-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--gray-700); line-height: 1.6; }
  .terms-list li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0; margin-top: 8px; }
  .terms-list.check li::before { content: '✓'; background: none; color: var(--green); font-size: 13px; font-weight: 800; margin-top: 1px; width: auto; height: auto; border-radius: 0; }
  .terms-list.cross li::before { content: '✕'; background: none; color: var(--red); font-size: 12px; font-weight: 800; margin-top: 2px; width: auto; height: auto; border-radius: 0; }
  .terms-list.numbered { counter-reset: t-cnt; }
  .terms-list.numbered li::before { counter-increment: t-cnt; content: counter(t-cnt); background: var(--gray-900); color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }

  /* ── DEFINITION BLOCK ── */
  .definition-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0; border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; font-size: 13px; margin-bottom: 16px; }
  .def-term { background: var(--gray-100); padding: 10px 16px; font-weight: 800; color: var(--gray-900); border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
  .def-meaning { background: #fff; padding: 10px 16px; color: var(--gray-700); border-bottom: 1px solid var(--gray-200); line-height: 1.55; }
  .def-term:last-of-type, .def-meaning:last-of-type { border-bottom: none; }

  /* ── DATA TABLE ── */
  .data-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--gray-200); margin: 16px 0; }
  .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .data-table thead th { background: var(--gray-900); color: #fff; padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; }
  .data-table tbody tr { border-bottom: 1px solid var(--gray-100); }
  .data-table tbody tr:last-child { border-bottom: none; }
  .data-table tbody tr:hover { background: #FAFAFA; }
  .data-table td { padding: 10px 14px; color: var(--gray-700); vertical-align: top; line-height: 1.5; }
  .data-table td:first-child { font-weight: 700; color: var(--gray-900); }

  /* ── WARRANTY GRID ── */
  .warranty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 16px 0; }
  .warranty-card { background: var(--gray-100); border-radius: 8px; padding: 16px; }
  .warranty-icon { font-size: 26px; margin-bottom: 8px; }
  .warranty-title { font-size: 13px; font-weight: 800; color: var(--gray-900); margin-bottom: 4px; }
  .warranty-desc { font-size: 12px; color: var(--gray-500); line-height: 1.5; }

  /* ── DIVIDER ── */
  .terms-divider { border: none; border-top: 1px solid var(--gray-200); margin: 20px 0; }

  /* ── CONTACT CARD ── */
  .contact-card { background: var(--gray-900); border-radius: var(--radius); padding: 24px 28px; }
  .contact-card-title { font-family: var(--font-display); font-size: 22px; letter-spacing: 1.5px; color: #fff; margin-bottom: 14px; }
  .contact-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; color: rgba(255,255,255,.65); }
  .contact-row a { color: rgba(255,255,255,.85); text-decoration: none; font-weight: 700; }
  .contact-row a:hover { color: var(--red); }

  /* ── STATUS CHIPS ── */
  .chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 800; letter-spacing: .4px; }
  .chip.green  { background: var(--green-light); color: var(--green); }
  .chip.red    { background: #FFF5F5; color: var(--red); }
  .chip.blue   { background: var(--blue-light); color: var(--blue); }
  .chip.orange { background: var(--orange-light); color: var(--orange); }

  /* ── TOAST ── */
  .toast-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
  .toast-item { background: var(--gray-900); color: #fff; border-radius: 10px; padding: 12px 18px; font-size: 13px; font-weight: 700; box-shadow: var(--shadow-lg); animation: slideIn .3s ease; max-width: 300px; }
  @keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.prod-body a{
	    text-decoration: none;
}

/* ══ RIGHT FORM PANEL ══ */
.form-panel {
    background: var(--white);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.form-panel::before {
  content: '';
  position: absolute;
  bottom: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(204,27,27,.05) 0%, transparent 65%);
  pointer-events: none;
}
.form-panel::after {
  content: '';
  position: absolute;
  top: -60px; left: -60px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(204,27,27,.04) 0%, transparent 70%);
  pointer-events: none;
}

.signin-card {
  width: 100%;
 max-width: 560px;
  position: relative;
  z-index: 2;
  animation: riseUp .55s .08s var(--ease) both;
}

/* Card header */
.card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.8px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(204,27,27,.15);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.card-title {
  font-family: var(--font-d);
  font-size: 36px;
  letter-spacing: 1.5px;
  color: var(--gray-900);
  line-height: 1;
  margin-bottom: 7px;
}
.card-sub { font-size: 13px; color: var(--gray-400); }
.card-sub a { color: var(--red); font-weight: 700; text-decoration: none; }
.card-sub a:hover { text-decoration: underline; }

/* ── FIELD STYLES ── */
.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gray-700);
  letter-spacing: .3px;
  margin-bottom: 6px;
}
.field-label-row a { color: var(--red); font-weight: 700; text-decoration: none; font-size: 11px; }
.field-label-row a:hover { text-decoration: underline; }
.req { color: var(--red); }

.field-wrap { position: relative; }
.f-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
  color: var(--gray-400);
  z-index: 5;
}
.f-icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

.f-input {
  width: 100%;
  padding: 12px 14px 12px 40px;
  border: 1.5px solid var(--gray-200);
  border-radius: 9px;
  font-family: var(--font-b);
  font-size: 14px;
  color: var(--gray-900);
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  /* Override Bootstrap */
  box-shadow: none !important;
}
.f-input::placeholder { color: #C0C0C0; }
.f-input:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(204,27,27,.1) !important;
}
.f-input.is-invalid { border-color: #e53e3e !important; background: #fff8f8; }
.f-input.is-valid   { border-color: #22a651 !important; }

.f-suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  padding: 2px;
  transition: color .15s;
  z-index: 5;
}
.f-suffix:hover { color: var(--gray-700); }
.f-suffix svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

.field-error-msg {
  font-size: 11px;
  color: #e53e3e;
  font-weight: 600;
  margin-top: 5px;
  display: none;
  padding-left: 2px;
}
.field-group.has-error .field-error-msg { display: block; }
.field-group.has-error .f-input { border-color: #e53e3e !important; background: #fff8f8; }

/* ── REMEMBER / FORGOT ROW ── */
.remember-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.check-box {
  width: 17px; height: 17px;
  border: 1.5px solid var(--gray-200);
  border-radius: 4px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
  cursor: pointer;
}
.check-box.checked { background: var(--red); border-color: var(--red); }
.check-box svg { width: 10px; height: 10px; stroke: #fff; fill: none; stroke-width: 2.2; display: none; }
.check-box.checked svg { display: block; }
.remember-label { font-size: 12.5px; color: var(--gray-600); font-weight: 500; }
.forgot-link { font-size: 12.5px; color: var(--red); font-weight: 700; text-decoration: none; }
.forgot-link:hover { text-decoration: underline; }

/* ── SUBMIT BUTTON ── */
.btn-signin {
  width: 100%;
  padding: 14px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-d);
  font-size: 19px;
  letter-spacing: 2.5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .18s, box-shadow .18s, transform .12s;
}
.btn-signin::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.14) 0%, transparent 55%);
  pointer-events: none;
}
.btn-signin:hover  { background: var(--red-dark); box-shadow: 0 6px 22px rgba(204,27,27,.38); color: #fff; }
.btn-signin:active { transform: scale(.98); }
.btn-signin:disabled { background: #ccc; cursor: not-allowed; box-shadow: none; }
.btn-signin .btn-spinner { display: none; }
.btn-signin.loading .btn-label   { display: none; }
.btn-signin.loading .btn-spinner { display: inline; font-size: 14px; letter-spacing: 1px; }

/* ── DIVIDER ── */
.or-divider {
  display: flex;
  align-items: center;
  gap: 14px;
}
.div-line { flex: 1; height: 1px; background: var(--gray-200); }
.div-text  { font-size: 11px; font-weight: 700; color: var(--gray-400); letter-spacing: .6px; white-space: nowrap; }

/* ── SOCIAL BUTTONS ── */
.btn-social {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 8px;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-b);
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-700);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, background .15s, transform .1s;
}
.btn-social:hover { border-color: #bbb; background: var(--gray-100); transform: translateY(-1px); color: var(--gray-700); }
.btn-social svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ── SIGNUP CTA ── */
.signup-cta {
  text-align: center;
  font-size: 13px;
  color: var(--gray-600);
}
.signup-cta a { color: var(--red); font-weight: 700; text-decoration: none; }
.signup-cta a:hover { text-decoration: underline; }

/* ── ERROR ALERT ── */
.alert-error {
  display: none;
  background: #fff5f5;
  border: 1.5px solid #feb2b2;
  border-left: 4px solid #e53e3e;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: #c53030;
  font-weight: 600;
  animation: shake .35s ease;
}
.alert-error.show { display: flex; align-items: center; gap: 8px; }
@keyframes shake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}

/* ── FORGOT PASSWORD VIEW ── */
.forgot-view { display: none; animation: riseUp .35s var(--ease) both; }
.forgot-view.show { display: block; }
.main-view.hidden { display: none; }

.back-btn {
  background: none;
  border: none;
  color: var(--gray-400);
  font-family: var(--font-b);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  transition: color .15s;
}
.back-btn:hover { color: var(--red); }
.back-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; }

.forgot-sent { display: none; text-align: center; animation: riseUp .4s var(--ease) both; }
.forgot-sent.show { display: block; }
.forgot-sent-icon { font-size: 48px; margin-bottom: 14px; }
.forgot-sent-title { font-family: var(--font-d); font-size: 26px; letter-spacing: 1.5px; color: var(--gray-900); margin-bottom: 8px; }
.forgot-sent-msg { font-size: 13.5px; color: var(--gray-400); line-height: 1.65; max-width: 310px; margin: 0 auto 20px; }

/* ── ANIMATIONS ── */
@keyframes riseUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── RESPONSIVE OVERRIDES ── */
@media (max-width: 991.98px) {
  .vis-panel { min-height: auto; }
  .vis-body  { display: none; }
  .vis-bottom { display: none; }
  .form-panel { min-height: auto; padding: 40px 20px; }
}
@media (max-width: 575.98px) {
  .social-btns-row { flex-direction: column; }
  .card-title { font-size: 30px; }
}
/* ── RIGHT PANEL ── */
.right-panel {
  background: #fff;
  position: relative; overflow: hidden;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
}


.signup-card { width: 100%; max-width: 660px; animation: fadeUp .55s .1s ease both; }

/* Card top */
.card-tag {
  display: inline-block;
  background: #FFF0F0; color: var(--red);
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  padding: 4px 12px; border-radius: 20px;
  border: 1px solid rgba(204,27,27,.15);
}
.card-title { font-family: var(--font-display); font-size: 34px; letter-spacing: 1.5px; color: var(--gray-900); line-height: 1; }
.card-sub { font-size: 13px; color: var(--gray-600); }
.card-sub a { color: var(--red); font-weight: 700; text-decoration: none; }
.card-sub a:hover { text-decoration: underline; }

/* Account type toggle */
.acct-toggle { background: var(--gray-100); border-radius: 10px; padding: 4px; }
.acct-btn {
  flex: 1; padding: 9px 10px;
  border: none; border-radius: 8px; background: transparent;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
  color: var(--gray-600); cursor: pointer; transition: all .2s;
  letter-spacing: .3px; white-space: nowrap;
}
.acct-btn.active { background: var(--white); color: var(--gray-900); box-shadow: 0 2px 8px rgba(0,0,0,.1); }

/* Form fields */
.field-label { font-size: 11.5px; font-weight: 700; color: var(--gray-700); letter-spacing: .3px; margin-bottom: 5px; }
.req { color: var(--red); }
.field-wrap { position: relative; display: flex; align-items: center; }
.field-icon {
  position: absolute; left: 13px; color: var(--gray-400);
  pointer-events: none; flex-shrink: 0; display: flex; align-items: center; z-index: 5;
}
.field-icon svg { width: 15px; height: 15px; stroke: var(--gray-400); }
.field-input {
  width: 100%; padding: 11px 13px 11px 38px;
  border: 1.5px solid var(--gray-200); border-radius: 8px;
  font-family: var(--font-body); font-size: 13.5px; color: var(--gray-900);
  background: #fff; outline: none; transition: border-color .15s, box-shadow .15s;
}
.field-input::placeholder { color: #bbb; }
.field-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(204,27,27,.1); }
.field-input.is-invalid { border-color: #e53e3e !important; background: #fff8f8; }
.field-input.is-valid  { border-color: #22a651 !important; }
.field-suffix {
  position: absolute; right: 12px; cursor: pointer; color: var(--gray-400);
  display: flex; align-items: center; background: none; border: none; padding: 2px;
  transition: color .15s; z-index: 5;
}
.field-suffix:hover { color: var(--gray-700); }
.field-suffix svg { width: 16px; height: 16px; stroke: currentColor; }
.field-error { font-size: 11px; color: #e53e3e; font-weight: 600; display: none; padding-left: 2px; margin-top: 4px; }
.form-field.has-error .field-error { display: block; }
.form-field.has-error .field-input { border-color: #e53e3e; background: #fff8f8; }

/* B2B extra fields */
.b2b-fields { display: none; }
.b2b-fields.show { display: contents; }

/* Password strength */
.pw-strength { margin-top: 6px; display: none; }
.pw-strength.show { display: block; }
.pw-bars { display: flex; gap: 4px; margin-bottom: 4px; }
.pw-bar { flex: 1; height: 3px; border-radius: 2px; background: var(--gray-200); transition: background .2s; }
.pw-bar.fill-weak   { background: #e53e3e; }
.pw-bar.fill-fair   { background: #f6ad55; }
.pw-bar.fill-good   { background: #63b3ed; }
.pw-bar.fill-strong { background: #22a651; }
.pw-label { font-size: 10.5px; font-weight: 700; color: var(--gray-400); }

/* Phone field */
.phone-prefix { position: absolute; left: 38px; font-size: 13.5px; font-weight: 700; color: var(--gray-700); pointer-events: none; z-index: 6; }
.field-input.phone-pad { padding-left: 78px; }

/* Custom Checkbox */
.check-box {
  width: 17px; height: 17px; border: 1.5px solid var(--gray-200); border-radius: 4px;
  background: #fff; cursor: pointer; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; transition: border-color .15s, background .15s;
}
.check-box.checked { background: var(--red); border-color: var(--red); }
.check-box svg { width: 10px; height: 10px; stroke: #fff; display: none; }
.check-box.checked svg { display: block; }
.check-label { font-size: 12px; color: var(--gray-600); line-height: 1.5; }
.check-label a { color: var(--red); font-weight: 700; text-decoration: none; }
.check-label a:hover { text-decoration: underline; }
.check-error { font-size: 11px; color: #e53e3e; font-weight: 600; display: none; margin-top: 4px; }
.check-row.has-error .check-error { display: block; }

/* Submit button */
.btn-signup {
  width: 100%; padding: 14px;
  background: var(--red); color: #fff; border: none; border-radius: 10px;
  font-family: var(--font-display); font-size: 18px; letter-spacing: 2px;
  cursor: pointer; transition: background .18s, transform .12s, box-shadow .18s;
  position: relative; overflow: hidden;
}
.btn-signup::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%); pointer-events: none; }
.btn-signup:hover { background: var(--red-dark); box-shadow: 0 6px 20px rgba(204,27,27,.35); }
.btn-signup:active { transform: scale(.98); }
.btn-signup:disabled { background: #ccc; cursor: not-allowed; box-shadow: none; }

/* Divider */
.divider-line { flex: 1; height: 1px; background: var(--gray-200); }
.divider-text { font-size: 11px; font-weight: 700; color: var(--gray-400); letter-spacing: .5px; white-space: nowrap; }

/* Social buttons */
.btn-social {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px; border: 1.5px solid var(--gray-200); border-radius: 8px;
  background: #fff; font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
  color: var(--gray-700); cursor: pointer; transition: border-color .15s, background .15s, transform .1s; text-decoration: none;
}
.btn-social:hover { border-color: var(--gray-400); background: var(--gray-100); transform: translateY(-1px); color: var(--gray-700); }
.btn-social svg { width: 17px; height: 17px; flex-shrink: 0; }

.login-link { text-align: center; font-size: 12.5px; color: var(--gray-600); }
.login-link a { color: var(--red); font-weight: 700; text-decoration: none; }
.login-link a:hover { text-decoration: underline; }

/* B2B select */
.b2b-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; }

/* Success screen */
.success-screen { display: none; text-align: center; padding: 20px 0; animation: fadeUp .4s ease both; }
.success-icon {
  width: 72px; height: 72px; background: #F0FFF4; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto; font-size: 34px; border: 2px solid #22a651;
}
.success-title { font-family: var(--font-display); font-size: 30px; letter-spacing: 1.5px; color: var(--gray-900); }
.btn-go-shop {
  display: inline-block; padding: 12px 32px; background: var(--red); color: #fff;
  border-radius: 8px; font-family: var(--font-display); font-size: 16px; letter-spacing: 1.5px; text-decoration: none; transition: background .15s;
}
.btn-go-shop:hover { background: var(--red-dark); color: #fff; }

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up          { animation: fadeUp .6s ease both; }
.animate-fade-up-delay-1  { animation: fadeUp .6s .15s ease both; }
.animate-fade-up-delay-2  { animation: fadeUp .5s .25s ease both; }
.animate-fade-up-delay-3  { animation: fadeUp .5s .35s ease both; }
.animate-fade-up-delay-4  { animation: fadeUp .5s .45s ease both; }
.animate-fade-up-delay-5  { animation: fadeUp .5s .55s ease both; }
.animate-fade-up-delay-6  { animation: fadeUp .5s .60s ease both; }

/* Responsive overrides */
@media (max-width: 991.98px) {
  .left-panel { min-height: auto; }
  .panel-headline { font-size: 36px; }
}
@media (max-width: 575.98px) {
  .social-row { flex-direction: column; }
}