/* =========================================================
   Falluja Tyres Limited — Premium Stylesheet v2
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --red: #E31E24;
  --red-dark: #B4141A;
  --red-light: #FF4A50;
  --red-glow: rgba(227,30,36,.35);
  --black: #0a0a0b;
  --black-soft: #141416;
  --grey-950: #0f0f11;
  --grey-900: #1a1a1d;
  --grey-700: #55565c;
  --grey-500: #8a8b92;
  --grey-300: #d7d8dd;
  --grey-200: #e9eaee;
  --grey-100: #f4f5f7;
  --white: #ffffff;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(10,10,15,.06);
  --shadow-md: 0 16px 40px rgba(10,10,15,.10);
  --shadow-lg: 0 30px 60px rgba(10,10,15,.18);
  --shadow-red: 0 14px 32px rgba(227,30,36,.28);
  --transition: all .3s cubic-bezier(.4,0,.2,1);
  --transition-fast: all .18s ease;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-head: 'Poppins', -apple-system, sans-serif;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font-body);
  color: var(--grey-900);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-size: 15.5px;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
.container{ width:100%; max-width:1320px; margin:0 auto; padding:0 24px; }
h1,h2,h3,h4{ font-family: var(--font-head); font-weight:700; letter-spacing:-.01em; color: var(--black); }
::selection{ background: var(--red); color:#fff; }

.bg-dotgrid{
  background-image: radial-gradient(circle, rgba(10,10,15,.06) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}

.section{ padding: 88px 0; position: relative; }
.section-tight{ padding: 56px 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color: var(--red); margin-bottom:14px;
}
.eyebrow::before{ content:''; width:26px; height:2px; background: var(--red); border-radius:2px; }
.section-title{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom: 40px; flex-wrap:wrap; gap:16px;
}
.section-title h2{
  font-size: 36px; line-height:1.15; letter-spacing:-.02em;
}
.section-title p.section-sub{ color: var(--grey-700); font-size:15px; max-width:480px; margin-top:8px; }
.section-title .view-all{
  font-weight:700; color: var(--black); display:flex; align-items:center; gap:8px; font-size:14px;
  transition: var(--transition-fast); padding-bottom:2px; border-bottom:2px solid var(--grey-200);
}
.section-title .view-all:hover{ color: var(--red); border-color: var(--red); gap:12px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding: 15px 30px; border-radius: 50px; font-weight:700; font-size:14px;
  border:none; cursor:pointer; transition: var(--transition-fast); text-transform:uppercase; letter-spacing:.4px;
  position:relative;
}
.btn-primary{
  background: var(--red); color:#fff;
  box-shadow: var(--shadow-red);
}
.btn-primary:hover{ background: var(--red-dark); }
.btn-outline{ background:transparent; border:2px solid var(--black); color:var(--black); }
.btn-outline:hover{ background:var(--black); color:#fff; }
.btn-dark{ background:var(--black); color:#fff; }
.btn-dark:hover{ background:var(--red); }
.btn-white{ background:#fff; color:var(--black); }
.btn-white:hover{ background: var(--red); color:#fff; }
.btn-secondary{ background: var(--grey-200); color: var(--grey-500); cursor:not-allowed; }
.btn:disabled{ background: var(--grey-200); color: var(--grey-500); cursor:not-allowed; box-shadow:none; }
.btn-block{ width:100%; }
.btn-sm{ padding: 10px 20px; font-size:12.5px; }

/* =============== TOP BAR =============== */
.topbar{
  background: var(--black); color:#bbb; font-size:12.5px; padding:9px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.topbar a{ color:#bbb; transition:var(--transition-fast); }
.topbar a:hover{ color: var(--red-light); }
.topbar-left{ display:flex; gap:24px; flex-wrap:wrap; }
.topbar-left span{ display:flex; align-items:center; gap:7px; font-weight:500; }
.topbar-left i{ color: var(--red); font-size:11px; }
.topbar-social{ display:flex; gap:10px; }
.topbar-social a{
  width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; font-size:12px; transition: var(--transition-fast);
}
.topbar-social a:hover{ background: var(--red); color:#fff; transform: translateY(-2px); }

/* =============== HEADER =============== */
header.site-header{
  background: rgba(10,10,11,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  position: sticky; top:0; z-index:1000;
  box-shadow: 0 4px 24px rgba(0,0,0,.22);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: var(--transition);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:28px; padding: 15px 0;
  transition: var(--transition);
}
.logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo img{ height:54px; width:auto; }

.main-nav{ display:flex; align-items:center; gap:6px; }
.main-nav > ul{ display:flex; align-items:center; gap:2px; }
.main-nav > ul > li{ position:static; }
.main-nav > ul > li > a{
  display:flex; align-items:center; gap:6px; color:#e4e4e6; font-weight:600; font-size:14px;
  padding: 30px 17px; transition: var(--transition-fast); letter-spacing:.1px; position:relative;
}
.main-nav > ul > li > a::after{
  content:''; position:absolute; left:17px; right:17px; bottom:24px; height:2px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.main-nav > ul > li > a:hover, .main-nav > ul > li.active > a{ color: #fff; }
.main-nav > ul > li > a:hover::after, .main-nav > ul > li.active > a::after{ transform: scaleX(1); }
.main-nav > ul > li > a .chev{ font-size:9px; transition: transform .2s ease; opacity:.7; }
.main-nav > ul > li:hover > a .chev{ transform: rotate(180deg); }

/* Full-width mega dropdowns — anchored to the sticky header, not the nav item */
.mega-dropdown{
  position:absolute; top:100%; left:0; right:0; width:100%;
  background:#fff; box-shadow: var(--shadow-lg); border-top:1px solid rgba(0,0,0,.06);
  opacity:0; visibility:hidden;
  transition: opacity .12s ease, visibility .12s ease;
  z-index: 50;
}
.main-nav li:hover .mega-dropdown{ opacity:1; visibility:visible; transition: none; }
.mega-dropdown-inner{ padding: 30px 24px; }

/* Shop By Brand — bordered logo tiles */
.mega-dropdown-logos .mega-dropdown-inner{
  display:grid; grid-template-columns: repeat(6, 1fr); gap:16px;
}
.mega-dropdown a.mega-item{
  display:flex; align-items:center; justify-content:center;
  height:110px; padding:18px; border:1.5px solid var(--grey-200); border-radius: var(--radius-sm);
  transition: var(--transition-fast); background:#fff;
}
.mega-dropdown a.mega-item:hover{ border-color: var(--red); box-shadow: 0 10px 22px rgba(227,30,36,.12); }
.mega-dropdown a.mega-item img{ height:64px; max-width:100%; width:auto; object-fit:contain; transition: var(--transition-fast); }
.mega-dropdown a.mega-item:hover img{ transform: scale(1.08); }

/* Categories — large photo tiles, text overlaid directly on the image */
.mega-dropdown-categories .mega-dropdown-inner{
  display:grid; grid-template-columns: repeat(5, 1fr); gap:14px;
}
.mega-dropdown-categories .cat-item{
  position:relative; height:130px; overflow:hidden; color:#fff; background: var(--black);
  transition: var(--transition-fast); border:none; border-radius: var(--radius-sm);
}
.mega-dropdown-categories .cat-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.9; transition: transform .4s ease; }
.mega-dropdown-categories .cat-item:hover img{ transform: scale(1.06); }
.mega-dropdown-categories .cat-item::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.55) 55%, rgba(10,10,11,.1) 100%);
  z-index:1;
}
.mega-dropdown-categories .cat-item-content{ position:absolute; z-index:2; left:12px; right:12px; bottom:10px; }
.mega-dropdown-categories .cat-item-content h4{ font-size:12.5px; color:#fff; margin-bottom:4px; letter-spacing:.1px; text-transform:uppercase; line-height:1.25; max-width:100%; }
.mega-dropdown-categories .cat-item-content span{ color:#fff; font-weight:600; font-size:11px; display:inline-flex; align-items:center; gap:4px;
  border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:2px; transition: var(--transition-fast); }
.mega-dropdown-categories .cat-item:hover .cat-item-content span{ color: var(--red-light); border-color: var(--red-light); }

.header-actions{ display:flex; align-items:center; gap:12px; }
.icon-btn{
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.07); color:#fff;
  display:flex; align-items:center; justify-content:center; position:relative; transition: var(--transition-fast);
  border: 1px solid rgba(255,255,255,.08);
}
.icon-btn:hover{ background: var(--red); border-color: var(--red); transform: translateY(-2px); }
.icon-btn .badge{
  position:absolute; top:-5px; right:-5px; background: var(--red); color:#fff; font-size:10px;
  width:19px; height:19px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800;
  box-shadow: 0 0 0 2px var(--black);
}
.call-btn{
  background: linear-gradient(135deg, var(--red), var(--red-dark)); color:#fff; padding: 11px 20px;
  border-radius:50px; display:flex; align-items:center; gap:9px; font-weight:700; font-size:13.5px;
  box-shadow: 0 8px 20px var(--red-glow); transition: var(--transition-fast);
}
.call-btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px var(--red-glow); }
.mobile-toggle{ display:none; background:none; border:none; color:#fff; font-size:24px; }

/* =============== MOBILE NAV =============== */
.mobile-nav{
  position: fixed; top:0; right:-320px; width:310px; height:100vh; background: var(--grey-950);
  z-index: 2000; transition: right .35s cubic-bezier(.4,0,.2,1); overflow-y:auto; padding: 24px;
  border-left: 1px solid rgba(255,255,255,.06);
}
.mobile-nav.open{ right:0; }
.mobile-nav-close{ color:#fff; font-size:22px; background:rgba(255,255,255,.08); border:none; margin-bottom:16px; width:38px; height:38px; border-radius:50%; }
.mobile-nav ul li{ border-bottom:1px solid rgba(255,255,255,.07); }
.mobile-nav ul li a{ display:block; color:#eee; padding:15px 4px; font-weight:600; font-size:14.5px; }
.mobile-nav .sub{ display:none; padding-left:12px; }
.mobile-nav .sub.open{ display:block; }
.mobile-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter: blur(2px); z-index:1999; display:none; }
.mobile-overlay.show{ display:block; }

/* =============== HERO SLIDER =============== */
.hero-slider{
  position:relative; overflow:hidden; background: var(--black); color:#fff; min-height: 460px;
}
.hero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden; transition: opacity .8s ease;
  display:flex; align-items:center;
}
.hero-slide.active{ opacity:1; visibility:visible; position:relative; }
.hero-slide-media{ position:absolute; inset:0; z-index:0; }
.hero-slide-media img, .hero-slide-media video{
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.hero-slide-media::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(10,10,11,.94) 28%, rgba(10,10,11,.65) 55%, rgba(180,20,26,.35) 100%);
}
.hero-slide-content{ position:relative; z-index:2; padding: 70px 0; width:100%; }
.hero-slide-content .container{ max-width: 620px; margin:0; }
.hero-slide .tag{
  display:inline-flex; align-items:center; gap:8px; background: rgba(227,30,36,.16); color: #ff8a8e; border:1px solid rgba(227,30,36,.5);
  padding:7px 16px; border-radius:50px; font-size:12px; font-weight:700; letter-spacing:1.4px; margin-bottom:22px; text-transform:uppercase;
  animation: fadeInUp .7s ease both;
}
.hero-slide .tag::before{ content:''; width:7px; height:7px; border-radius:50%; background: var(--red-light); box-shadow: 0 0 0 3px rgba(227,30,36,.3); }
.hero-slide h1{
  font-size: 44px; line-height:1.1; margin-bottom:16px; letter-spacing:-.02em; color:#fff;
  animation: fadeInUp .8s .05s ease both;
}
.hero-slide p{ color:#cfd0d6; max-width:520px; margin-bottom:24px; font-size:15px; line-height:1.6; animation: fadeInUp .8s .1s ease both; }
.hero-slide .hero-cta{ display:flex; gap:16px; flex-wrap:wrap; animation: fadeInUp .8s .15s ease both; }

.hero-nav-dots{ position:absolute; z-index:5; bottom:34px; left:50%; transform:translateX(-50%); display:flex; gap:10px; }
.hero-nav-dots button{
  width:34px; height:4px; border-radius:4px; background:rgba(255,255,255,.3); border:none; padding:0; transition: var(--transition-fast); cursor:pointer;
}
.hero-nav-dots button.active{ background: var(--red); width:46px; }
.hero-arrow{
  position:absolute; z-index:5; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center;
  transition: var(--transition-fast); backdrop-filter: blur(6px);
}
.hero-arrow:hover{ background: var(--red); border-color: var(--red); }
.hero-arrow.prev{ left:28px; }
.hero-arrow.next{ right:28px; }
@media (max-width:900px){ .hero-arrow{ display:none; } }

@keyframes fadeInUp{ from{ opacity:0; transform: translateY(26px);} to{ opacity:1; transform:translateY(0);} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes floatY{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} }
@keyframes spin{ from{ transform: rotate(0);} to{ transform: rotate(360deg);} }
@keyframes shimmer{ 0%{ background-position: -200% 0;} 100%{ background-position: 200% 0;} }

.finder-bar{
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 26px;
  margin-top:-52px; position:relative; z-index:20;
}
.finder-tabs{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.finder-tabs button{
  background: var(--grey-100); border:none; padding:10px 20px; border-radius:50px; font-weight:700; font-size:13px; transition: var(--transition-fast);
  display:flex; align-items:center; gap:7px;
}
.finder-tabs button.active{ background: var(--black); color:#fff; }
.finder-grid{ display:grid; grid-template-columns: repeat(4,1fr) auto; gap:14px; align-items:end; }
.finder-grid .field label{ font-size:11.5px; font-weight:700; color:var(--grey-700); display:block; margin-bottom:7px; text-transform:uppercase; letter-spacing:.5px; }
.finder-grid select, .finder-grid input{
  width:100%; padding:13px 15px; border:1.5px solid var(--grey-200); border-radius: var(--radius-sm); font-size:14px; background:#fff;
  transition: var(--transition-fast); font-family: inherit;
}
.finder-grid select:focus, .finder-grid input:focus{ outline:none; border-color: var(--red); }
.finder-grid .btn{ height:48px; white-space:nowrap; }

/* =============== BRAND MARQUEE =============== */
.marquee-wrap{ overflow:hidden; position:relative; -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:70px; width:max-content; animation: marquee 36s linear infinite; align-items:center; }
.marquee-wrap:hover .marquee-track{ animation-play-state: paused; }
.marquee-track img{ height:48px; width:auto; object-fit:contain; opacity:.9; transition: var(--transition-fast); }
.marquee-track img:hover{ opacity:1; transform: scale(1.18); }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* =============== BRAND / CATEGORY GRID (home) =============== */
.grid-6{ display:grid; grid-template-columns: repeat(6, 1fr); gap:18px; }
.brand-card{
  border:1px solid var(--grey-200); border-radius: var(--radius); padding: 28px 16px; display:flex;
  align-items:center; justify-content:center; height:100px; transition: var(--transition); background:#fff; position:relative; overflow:hidden;
}
.brand-card::before{ content:''; position:absolute; inset:0; background: linear-gradient(135deg, rgba(227,30,36,.06), transparent); opacity:0; transition: var(--transition-fast); }
.brand-card:hover{ border-color: var(--red); box-shadow: var(--shadow-md); transform: translateY(-6px); }
.brand-card:hover::before{ opacity:1; }
.brand-card img{ max-height:40px; max-width:100%; object-fit:contain; position:relative; z-index:1; }

.category-tiles{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.category-tile{
  position:relative; height:150px; border-radius: 10px; overflow:hidden; color:#fff; background: var(--black);
  display:flex; align-items:center; padding:0 26px; transition: var(--transition-fast);
}
.category-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.85; }
.category-tile::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.78) 34%, rgba(10,10,11,.25) 68%, rgba(10,10,11,0) 100%);
  z-index:1;
}
.category-tile:hover{ box-shadow: var(--shadow-md); }
.category-tile-content{ position:relative; z-index:2; }
.category-tile-content h3{ font-size:17px; color:#fff; margin-bottom:10px; letter-spacing:.2px; text-transform:uppercase; line-height:1.3; }
.category-tile-content .category-tile-link{ color: #fff; font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:6px;
  border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:2px; transition: var(--transition-fast); }
.category-tile:hover .category-tile-content .category-tile-link{ color: var(--red-light); border-color: var(--red-light); }

/* =============== PRODUCT CARD =============== */
.product-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap:0; border-top:1px solid var(--grey-200); border-left:1px solid var(--grey-200); }
.product-card{
  background:#fff; border-right:1px solid var(--grey-200); border-bottom:1px solid var(--grey-200); position:relative;
  transition: var(--transition-fast); display:flex; flex-direction:column;
}
.product-card:hover{ box-shadow: var(--shadow-md); z-index:2; }
.product-card .type-badge{
  position:absolute; top:12px; right:12px; background: rgba(10,10,11,.85); color:#fff;
  font-size:10px; font-weight:700; padding:5px 11px; border-radius:4px; z-index:3; text-transform:uppercase; letter-spacing:.5px;
}
.product-card .stock-badge{
  position:absolute; top:12px; left:12px; background: var(--red); color:#fff;
  font-size:10.5px; font-weight:700; padding:7px 12px; border-radius:4px; z-index:3;
  border:1.5px solid #ffc93c; line-height:1.4; text-align:center;
}
.product-card .stock-badge-out{ background: var(--grey-900); border-color: var(--grey-500); }
.product-card .img-wrap{ height:210px; display:flex; align-items:center; justify-content:center; padding:24px; background:#fff; position:relative; overflow:hidden; }
.product-card .img-wrap img{ max-height:100%; max-width:100%; object-fit:contain; transition: transform .3s ease; }
.product-card:hover .img-wrap img{ transform: scale(1.04); }
.product-card .brand-strip{
  display:flex; align-items:center; justify-content:center; padding:16px; border-top:1px solid var(--grey-200);
  background:#fff; transition: var(--transition-fast);
}
.product-card .brand-strip:hover{ background: var(--grey-100); }
.product-card .brand-strip .brand-logo{ height:52px; max-width:80%; object-fit:contain; }
.product-card .body{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-card .body h4{ font-size:13.5px; font-weight:700; line-height:1.45; font-family: var(--font-body); min-height:38px; color: var(--black); text-transform:uppercase; }
.product-card .body h4 a:hover{ color: var(--red); }
.product-card .product-size-line{ font-size:13px; color: var(--grey-900); font-weight:600; }
.product-card .product-size-line i{ color: var(--red); margin-right:4px; }
.product-card .product-size-line strong{ font-weight:800; }
.product-card .meta-row{ display:flex; flex-wrap:wrap; gap:6px; }
.product-card .size-tag{
  font-size:12.5px; color: var(--grey-900); font-weight:700; display:flex; align-items:center; gap:6px;
  background: var(--grey-100); border-radius:4px; padding:5px 9px; width:fit-content;
}
.product-card .size-tag i{ color: var(--red); }
.product-card .sku-row{ display:none; } /* kept in the DOM for reference; SKU still shows on the product detail page */
.product-card .price{ font-size:19px; font-weight:800; color: var(--black); font-family: var(--font-head); margin-top:2px; }
.product-card .price .compare{ font-size:12.5px; color:var(--grey-500); text-decoration: line-through; font-weight:600; margin-left:7px; }
.product-card .stock-status{ font-size:12px; font-weight:700; display:flex; align-items:center; gap:6px; }
.product-card .stock-status.in-stock{ color:#1a9c53; }
.product-card .stock-status.in-stock i{ color:#1a9c53; }
.product-card .btn{ margin-top:auto; width:100%; border-radius:6px; }
.product-card .btn-primary{
  background: linear-gradient(135deg, #f7a83d, #f0891b); color:#fff; box-shadow:none;
}
.product-card .btn-primary:hover{ background: linear-gradient(135deg, #f0891b, #d8760f); }

/* =============== STORE LOCATOR =============== */
.store-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.store-card{ background:#fff; border:1px solid var(--grey-200); border-radius: var(--radius); overflow:hidden; transition: var(--transition-fast); }
.store-card:hover{ box-shadow: var(--shadow-md); }
.store-map{ position:relative; height:200px; background: var(--grey-100); }
.store-map iframe{ width:100%; height:100%; border:0; display:block; }
.store-map-link{
  position:absolute; top:12px; left:12px; z-index:2; background:#fff; color: var(--black); font-weight:700; font-size:12.5px;
  padding:8px 14px; border-radius:8px; box-shadow: var(--shadow-md); display:inline-flex; align-items:center; gap:8px;
}
.store-map-link:hover{ color: var(--red); }
.store-body{ padding:22px; }
.store-county{ color: var(--red); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
.store-body h3{ font-size:16px; text-transform:uppercase; margin-bottom:8px; letter-spacing:.2px; }
.store-address{ color: var(--grey-700); font-size:14px; line-height:1.6; margin-bottom:16px; }
.store-meta{ display:flex; flex-direction:column; gap:10px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--grey-200); }
.store-meta a{ font-size:13.5px; color: var(--grey-900); display:flex; align-items:center; gap:9px; font-weight:600; }
.store-meta a:hover{ color: var(--red); }
.store-meta i{ color: var(--grey-500); width:16px; }
.store-hours-title{ color: var(--red); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
.store-hours p{ font-size:13.5px; color: var(--grey-700); display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.store-hours i{ color: var(--grey-500); width:16px; }

/* =============== PAGE / BREADCRUMB =============== */
.breadcrumb-bar{ background: var(--grey-100); padding:18px 0; }
.breadcrumb{ display:flex; gap:9px; align-items:center; font-size:13px; color: var(--grey-700); flex-wrap:wrap; font-weight:500; }
.breadcrumb a:hover{ color: var(--red); }
.breadcrumb .sep{ color: var(--grey-500); }
.page-banner{
  background: linear-gradient(120deg, var(--black), var(--red-dark)); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden;
}
.page-banner::before{ content:''; position:absolute; width:500px;height:500px; background:radial-gradient(circle,rgba(227,30,36,.3),transparent 70%); top:-220px; right:-120px; border-radius:50%; }
.page-banner h1{ color:#fff; font-size:38px; position:relative; z-index:1; letter-spacing:-.02em; }
.page-banner p{ color:#ccc; margin-top:10px; position:relative; z-index:1; }

/* =============== SHOP / FILTERS =============== */
.shop-layout{ display:grid; grid-template-columns: 270px 1fr; gap:32px; align-items:start; }
.filters-box{ background:#fff; border:1px solid var(--grey-200); border-radius: var(--radius); padding:24px; position:sticky; top:100px; }
.filters-box h3{ font-size:16px; margin-bottom:18px; }
.filters-box .field{ margin-bottom:16px; }
.filters-box label{ font-size:11.5px; font-weight:700; text-transform:uppercase; color:var(--grey-700); display:block; margin-bottom:7px; letter-spacing:.4px; }
.filters-box select, .filters-box input{ width:100%; padding:11px 13px; border:1.5px solid var(--grey-200); border-radius: var(--radius-sm); font-size:13.5px; transition: var(--transition-fast); }
.filters-box select:focus, .filters-box input:focus{ outline:none; border-color: var(--red); }
.results-bar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:10px; font-weight:600; color: var(--grey-700); }
.pagination{ display:flex; gap:8px; justify-content:center; margin-top:40px; }
.pagination a, .pagination span{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%;
  border:1.5px solid var(--grey-200); font-weight:700; font-size:13px; transition: var(--transition-fast);
}
.pagination a:hover, .pagination .active{ background: var(--red); color:#fff; border-color:var(--red); }

/* =============== PRODUCT DETAIL =============== */
.product-detail{ display:grid; grid-template-columns: 1fr 1fr; gap:52px; }
.pd-gallery{ position:sticky; top:100px; }
.pd-main-img{
  background: #fff; border: 1px solid var(--grey-200); border-radius: var(--radius); display:flex; align-items:center; justify-content:center;
  height:440px; padding:24px; margin-bottom:16px; position:relative; overflow:hidden; cursor: zoom-in;
}
.pd-main-img img{ max-height:100%; max-width:100%; object-fit:contain; }
.pd-main-img .zoom-hint{
  position:absolute; bottom:12px; right:12px; background:rgba(10,10,11,.75); color:#fff; font-size:11px; font-weight:600;
  padding:6px 12px; border-radius:50px; display:flex; align-items:center; gap:6px; pointer-events:none;
}
.pd-thumbs{ display:flex; gap:12px; }
.pd-thumbs img{ width:72px; height:72px; object-fit:contain; background:#fff; border:2px solid var(--grey-200); border-radius:10px; padding:8px; cursor:pointer; transition: var(--transition-fast); }
.pd-thumbs img:hover{ border-color: var(--grey-300); }
.pd-thumbs img.active{ border-color: var(--red); }

/* Click-to-zoom lightbox */
.pd-lightbox{
  position:fixed; inset:0; background:rgba(10,10,11,.94); z-index:5000; display:none;
  align-items:center; justify-content:center; overflow:hidden; touch-action:none;
}
.pd-lightbox.open{ display:flex; }
.pd-lightbox img{
  max-width:90vw; max-height:90vh; object-fit:contain; transition: transform .08s ease-out; cursor: grab; user-select:none; -webkit-user-drag:none;
}
.pd-lightbox img.zoomed{ cursor: grab; }
.pd-lightbox-close{
  position:absolute; top:20px; right:24px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25); color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.pd-lightbox-close:hover{ background: var(--red); border-color: var(--red); }
.pd-lightbox-controls{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; gap:10px;
}
.pd-lightbox-controls button{
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.pd-lightbox-controls button:hover{ background: var(--red); border-color: var(--red); }
.pd-lightbox-hint{ position:absolute; top:20px; left:50%; transform:translateX(-50%); color:#aaa; font-size:12.5px; }

.pd-info .limited-badge{
  display:inline-block; background: var(--red); color:#fff; padding:7px 16px; border-radius:50px; font-size:11px; font-weight:700;
  margin-bottom:14px; text-transform:uppercase; letter-spacing:.4px;
}
.pd-info .pd-brand{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.pd-info .pd-brand img{ height:26px; }
.pd-info h1{ font-size:28px; font-family: var(--font-body); font-weight:800; margin-bottom:12px; letter-spacing:-.01em; }
.pd-price-row{ display:flex; align-items:baseline; gap:14px; margin: 18px 0; }
.pd-price-row .price{ font-size:34px; font-weight:800; font-family: var(--font-head); color: var(--black); }
.pd-price-row .compare{ font-size:16px; color: var(--grey-500); text-decoration: line-through; }
.pd-desc{ color: var(--grey-700); margin-bottom:20px; font-size:14.5px; }
.pd-specs{ width:100%; border-collapse: collapse; margin-bottom:24px; }
.pd-specs tr{ border-bottom:1px solid var(--grey-200); }
.pd-specs td{ padding:11px 6px; font-size:13.5px; }
.pd-specs td:first-child{ color: var(--grey-700); font-weight:600; width:42%; }
.qty-row{ display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.qty-selector{ display:flex; align-items:center; border:1.5px solid var(--grey-200); border-radius:50px; overflow:hidden; }
.qty-selector button{ width:40px; height:42px; background:var(--grey-100); border:none; font-size:16px; font-weight:700; transition: var(--transition-fast); }
.qty-selector button:hover{ background: var(--grey-200); }
.qty-selector input{ width:52px; text-align:center; border:none; font-weight:700; font-size:15px; }
.pd-actions{ display:flex; gap:14px; margin-bottom:28px; }
.stock-note{ font-size:13.5px; color:#188038; font-weight:600; display:flex; align-items:center; gap:7px; margin-bottom:24px; }

.pd-fitment{ background:#fff8f8; border:1px solid rgba(227,30,36,.2); border-radius: var(--radius); padding:18px 20px; margin-bottom:22px; }
.pd-fitment h4{ font-size:13px; text-transform:uppercase; margin-bottom:10px; color: var(--red-dark); letter-spacing:.4px; }
.pd-fitment-list{ display:flex; flex-wrap:wrap; gap:8px; }
.pd-fitment-list span{ background:#fff; border:1px solid rgba(227,30,36,.25); color: var(--grey-900); font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:50px; }

.pd-contact-box{
  background: var(--grey-100); border-radius: var(--radius); padding:24px; margin-top:12px;
}
.pd-contact-box h4{ font-size:14px; text-transform:uppercase; margin-bottom:14px; letter-spacing:.4px; }
.pd-contact-list{ display:flex; flex-direction:column; gap:11px; margin-bottom:16px; }
.pd-contact-list a{ display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:600; color:var(--grey-900); transition: var(--transition-fast); }
.pd-contact-list a:hover{ color: var(--red); }
.pd-contact-list .ic{
  width:34px; height:34px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.pd-social{ display:flex; gap:10px; }
.pd-social a{
  width:38px; height:38px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.08); transition: var(--transition-fast);
}
.pd-social a:hover{ background: var(--red); color:#fff; transform: translateY(-3px); }

.tabs-block{ margin-top:56px; }
.tabs-nav{ display:flex; gap:6px; border-bottom:2px solid var(--grey-200); margin-bottom:26px; }
.tabs-nav button{
  background:none; border:none; padding:15px 24px; font-weight:700; font-size:14px; color:var(--grey-700);
  border-bottom:3px solid transparent; margin-bottom:-2px; transition: var(--transition-fast); text-transform:uppercase; letter-spacing:.3px;
}
.tabs-nav button.active{ color: var(--red); border-color: var(--red); }
.tab-panel{ display:none; color:var(--grey-700); font-size:14.5px; line-height:1.85; }
.tab-panel.active{ display:block; animation: fadeIn .3s ease; }

/* =============== CART / CHECKOUT =============== */
.cart-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cart-table{ width:100%; border-collapse:collapse; min-width:560px; }
.cart-table th{ text-align:left; padding:14px 12px; background: var(--grey-100); font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; }
.cart-table td{ padding:18px 12px; border-bottom:1px solid var(--grey-200); vertical-align:middle; }
.cart-item-info{ display:flex; align-items:center; gap:16px; }
.cart-item-info img{ width:68px; height:68px; object-fit:contain; background:var(--grey-100); border-radius:10px; padding:8px; }
.cart-summary{ background: var(--grey-100); border-radius: var(--radius); padding:26px; }
.cart-summary .row{ display:flex; justify-content:space-between; margin-bottom:13px; font-size:14px; }
.cart-summary .row.total{ font-size:20px; font-weight:800; border-top:1px solid var(--grey-200); padding-top:16px; margin-top:8px; }
.remove-link{ color: var(--red); font-size:12px; font-weight:700; }
.mini-qty{ display:flex; align-items:center; border:1.5px solid var(--grey-200); border-radius:50px; width:fit-content; }
.mini-qty button{ width:30px; height:30px; background:none; border:none; font-weight:700; }
.mini-qty input{ width:36px; text-align:center; border:none; font-weight:600; }

.checkout-grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap:40px; }
.form-box{ background:#fff; border:1px solid var(--grey-200); border-radius: var(--radius); padding:28px; }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-size:13px; font-weight:700; margin-bottom:8px; }
.form-group input, .form-group textarea, .form-group select{
  width:100%; padding:13px 15px; border:1.5px solid var(--grey-200); border-radius: var(--radius-sm); font-size:14px; font-family:inherit;
  transition: var(--transition-fast);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{ outline:none; border-color: var(--red); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.payment-options{ display:flex; flex-direction:column; gap:12px; margin:20px 0; }
.payment-option{
  display:flex; align-items:center; gap:14px; border:2px solid var(--grey-200); padding:18px; border-radius: var(--radius-sm); cursor:pointer; transition: var(--transition-fast);
}
.payment-option.selected, .payment-option:hover{ border-color: var(--red); background: rgba(227,30,36,.03); }
.payment-option img{ height:26px; }

/* =============== NEWSLETTER STRIP =============== */
.newsletter-strip{
  background: linear-gradient(120deg, var(--black), var(--red-dark)); border-radius: var(--radius-lg); padding:48px 52px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; color:#fff; position:relative; overflow:hidden;
}
.newsletter-strip::before{ content:''; position:absolute; width:340px; height:340px; background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%); top:-140px; left:-80px; border-radius:50%; }
.newsletter-strip h3{ font-size:24px; color:#fff; margin-bottom:8px; position:relative; z-index:1; }
.newsletter-strip p{ color:#ddd; font-size:14px; position:relative; z-index:1; }
.newsletter-form{ display:flex; gap:10px; position:relative; z-index:1; flex-wrap:wrap; }
.newsletter-form input{ padding:14px 18px; border-radius:50px; border:none; width:260px; font-size:14px; font-family:inherit; }
.newsletter-form input:focus{ outline:2px solid rgba(255,255,255,.5); }

/* =============== FOOTER =============== */
footer.site-footer{ background: var(--black); color:#ccc; margin-top:70px; }
.footer-top{ padding:64px 0 34px; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:36px; }
.footer-col h4{ color:#fff; font-size:15px; margin-bottom:20px; position:relative; padding-bottom:12px; letter-spacing:.2px; }
.footer-col h4::after{ content:''; position:absolute; left:0; bottom:0; width:38px; height:3px; background: var(--red); border-radius:3px; }
.footer-col p{ font-size:13.5px; color:#a3a4aa; line-height:1.85; }
.footer-col ul li{ margin-bottom:11px; }
.footer-col ul li a{ color:#a3a4aa; font-size:13.5px; transition: var(--transition-fast); }
.footer-col ul li a:hover{ color: var(--red-light); padding-left:5px; }
.footer-contact li{ display:flex; align-items:flex-start; gap:11px; margin-bottom:15px; font-size:13.5px; color:#a3a4aa; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center;
  transition: var(--transition-fast); color:#fff; border: 1px solid rgba(255,255,255,.08);
}
.footer-social a:hover{ background: var(--red); border-color: var(--red); transform: translateY(-4px); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding:20px 0; text-align:center; font-size:12.5px; color:#77787e; }
.footer-logo{ height:36px; margin-bottom:18px; }

.whatsapp-float{
  position:fixed; bottom:26px; right:26px; width:60px; height:60px; background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 12px 28px rgba(37,211,102,.5); z-index:900;
  font-size:29px; color:#fff; animation: floatY 3.4s ease-in-out infinite;
}

/* =============== TRUST STRIP =============== */
.trust-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background: var(--grey-200); border-radius: var(--radius); overflow:hidden; border: 1px solid var(--grey-200); }
.trust-item{ background:#fff; text-align:center; padding:34px 20px; transition: var(--transition-fast); }
.trust-item:hover{ background: var(--grey-100); }
.trust-item i{ font-size:30px; color:var(--red); margin-bottom:14px; }
.trust-item h4{ font-size:14.5px; }
.trust-item p{ font-size:12.5px; color: var(--grey-700); margin-top:4px; }

/* =============== MISC / ALERTS =============== */
.alert{ padding:15px 20px; border-radius: var(--radius-sm); margin-bottom:22px; font-size:14px; font-weight:500; }
.alert-success{ background:#e6f7ed; color:#0f6b3a; border:1px solid #b7e5c8; }
.alert-error{ background:#fdeaea; color:#a11; border:1px solid #f5b8b8; }
.empty-state{ text-align:center; padding:70px 20px; color: var(--grey-700); }
.empty-state i{ font-size:52px; color: var(--grey-200); margin-bottom:18px; }

.reveal{ opacity:0; transform: translateY(12px); transition: all .4s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *{ animation: fadeInUp .4s ease both; }
.reveal-stagger.in > *:nth-child(1){ animation-delay:0s; }
.reveal-stagger.in > *:nth-child(2){ animation-delay:.04s; }
.reveal-stagger.in > *:nth-child(3){ animation-delay:.08s; }
.reveal-stagger.in > *:nth-child(4){ animation-delay:.12s; }
.reveal-stagger.in > *:nth-child(5){ animation-delay:.16s; }
.reveal-stagger.in > *:nth-child(n+6){ animation-delay:.2s; }

/* =============== RESPONSIVE =============== */
@media (max-width: 1100px){
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
  .grid-6{ grid-template-columns: repeat(3, 1fr); }
  .shop-layout{ grid-template-columns: 1fr; }
  .filters-box{ position:static; }
  .product-detail{ grid-template-columns: 1fr; }
  .pd-gallery{ position:static; }
  .checkout-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .hero-slide h1{ font-size:42px; }
  .store-grid{ grid-template-columns: 1fr 1fr; }
  .mega-dropdown-logos .mega-dropdown-inner{ grid-template-columns: repeat(4, 1fr); }
  .mega-dropdown-categories .mega-dropdown-inner{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px){
  .main-nav, .call-btn{ display:none; }
  .mobile-toggle{ display:block; }
  .hero-slide h1{ font-size:32px; }
  .hero-slider{ min-height:420px; }
  .finder-grid{ grid-template-columns: 1fr 1fr; }
  .category-tiles{ grid-template-columns: 1fr 1fr; }
  .trust-strip{ grid-template-columns:1fr 1fr; }
  .newsletter-strip{ flex-direction:column; align-items:flex-start; }
  .section{ padding: 56px 0; }
  .pd-main-img{ height:340px; }
}
@media (max-width: 640px){
  .container{ padding:0 16px; }
  .product-grid{ grid-template-columns: repeat(2, 1fr); gap:14px; }
  .grid-6{ grid-template-columns: repeat(2, 1fr); }
  .footer-top{ grid-template-columns: 1fr; }
  .category-tiles{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .finder-grid{ grid-template-columns: 1fr; }
  .store-grid{ grid-template-columns: 1fr; }
  .topbar .container{ justify-content:center; text-align:center; }
  .section{ padding: 42px 0; }
  .section-title h2{ font-size:24px; }
  .hero-slide-content{ padding:56px 0; }
  .hero-slide h1{ font-size:26px; }
  .hero-slide p{ font-size:14px; }
  .trust-strip{ grid-template-columns:1fr; }
  .newsletter-form input{ width:100%; }
  .newsletter-strip{ padding:32px 24px; }
  .pd-main-img{ height:280px; padding:14px; }
  .pd-info h1{ font-size:22px; }
  .pd-price-row .price{ font-size:26px; }
  .pd-actions{ flex-direction:column; }
  .qty-row{ flex-wrap:wrap; }
  .finder-bar{ padding:18px; margin-top:-36px; }
  .mega-dropdown-logos .mega-dropdown-inner{ grid-template-columns: repeat(3, 1fr); }
  .mega-dropdown-categories .mega-dropdown-inner{ grid-template-columns: repeat(2, 1fr); }
  .pd-lightbox-controls{ bottom:16px; }
  .pd-lightbox-hint{ display:none; }
  .checkout-grid{ gap:20px; }
  .form-box{ padding:20px; }
}
@media (max-width: 400px){
  .product-grid{ grid-template-columns: 1fr 1fr; gap:10px; }
  .product-card .body{ padding:12px 12px 16px; }
  .product-card .price{ font-size:16px; }
  .hero-slide h1{ font-size:22px; }
}