/* ═══════════════════════════════════════════════════════════
   EMART — CENTRAL INDUSTRIES PLC
   Modern E-Commerce Template  |  style.css
═══════════════════════════════════════════════════════════ */

:root {
  /* Brand colours */
  --central:     #1a1a2e;
  --central-mid: #16213e;
  --pvc:         #f97316;
  --pvc-light:   #fff7ed;
  --pvc-mid:     #fed7aa;
  --krypton:     #0ea5e9;
  --krypton-light: #f0f9ff;
  --krypton-mid: #bae6fd;

  /* Neutral palette */
  --white:    #ffffff;
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-400: #94a3b8;
  --gray-600: #475569;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Spacing & radii */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:  0 20px 48px rgba(0,0,0,.14);
  --shadow-xl:  0 32px 64px rgba(0,0,0,.18);

  --transition: .25s cubic-bezier(.4,0,.2,1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--white);
  color: var(--gray-800);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─────────────────────────────────────────────
   SCROLLING TICKER
───────────────────────────────────────────── */
.ticker-wrap {
  background: var(--central);
  overflow: hidden;
  padding: 10px 0;
  position: relative;
  z-index: 100;
}

.ticker-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: ticker-scroll 22s linear infinite;
}

.ticker-wrap:hover .ticker-track { animation-play-state: paused; }

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 40px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255,255,255,.6);
  transition: color var(--transition);
}

.ticker-item.central { color: rgba(255,255,255,.9); }
.ticker-item.pvc     { color: var(--pvc); }
.ticker-item.krypton { color: var(--krypton); }

/* ─────────────────────────────────────────────
   HEADER
───────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gray-200);
  transition: box-shadow var(--transition);
}

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

.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 72px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo-icon {
  font-size: 28px;
  color: var(--pvc);
  line-height: 1;
}

.logo-main {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--central);
  letter-spacing: -.5px;
  line-height: 1;
}

.logo-sub {
  display: block;
  font-size: 11px;
  color: var(--gray-400);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
  margin-top: 2px;
}

.main-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.main-nav a {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  transition: all var(--transition);
}

.main-nav a:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-search, .btn-cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--gray-600);
  transition: all var(--transition);
}

.btn-search:hover, .btn-cart:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pvc);
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
}

.burger span {
  display: block;
  height: 2px;
  background: var(--gray-800);
  border-radius: 2px;
  transition: all var(--transition);
}

/* Search bar */
.search-bar {
  display: none;
  padding: 12px 0;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}

.search-bar.open { display: block; }

.search-bar .container {
  display: flex;
  gap: 8px;
}

.search-bar input {
  flex: 1;
  padding: 10px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition);
}

.search-bar input:focus { border-color: var(--krypton); }

.search-bar button {
  padding: 10px 16px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--gray-400);
  font-size: 18px;
}

/* ─────────────────────────────────────────────
   HERO
───────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 580px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--central);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(14,165,233,.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 20% 30%, rgba(249,115,22,.10) 0%, transparent 50%),
    linear-gradient(135deg, #1a1a2e 0%, #0f172a 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: 80px 24px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hero-title {
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 800;
  line-height: 1.1;
  color: white;
  margin-bottom: 20px;
  letter-spacing: -.02em;
}

.gradient-text {
  background: linear-gradient(90deg, var(--pvc), var(--krypton));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-desc {
  font-size: 17px;
  color: rgba(255,255,255,.65);
  margin-bottom: 36px;
  line-height: 1.7;
}

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: linear-gradient(135deg, var(--pvc), #ea580c);
  color: white;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 4px 16px rgba(249,115,22,.35);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(249,115,22,.45);
}

.btn-primary.large {
  padding: 16px 36px;
  font-size: 16px;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 13px 28px;
  border: 1.5px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.85);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  transition: all var(--transition);
}

.btn-outline:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.5);
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 28px;
}

.stat span {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: white;
  line-height: 1;
}

.stat label {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  margin-top: 4px;
}

.stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.15);
}

/* Hero floating cards */
.hero-visual {
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-circle {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.12);
  animation: spin-slow 24s linear infinite;
}

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

.floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1);
  color: white;
}

.card-pvc  { top: 20px;  left: -30px; animation: float1 4s ease-in-out infinite; }
.card-krypton { bottom: 20px; right: -30px; animation: float2 4s ease-in-out infinite .8s; }

@keyframes float1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes float2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(10px)} }

.fc-icon {
  font-size: 28px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pvc-icon    { background: rgba(249,115,22,.2); }
.krypton-icon { background: rgba(14,165,233,.2); }

.fc-name { font-size: 14px; font-weight: 600; }
.fc-tag  { font-size: 12px; color: rgba(255,255,255,.5); }

/* ─────────────────────────────────────────────
   SECTION COMMON
───────────────────────────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: 52px;
}

.section-label {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 100px;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-header h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -.02em;
  margin-bottom: 12px;
}

.section-header p {
  font-size: 16px;
  color: var(--gray-600);
  max-width: 520px;
  margin: 0 auto;
}

.section-header.light h2 { color: white; }
.section-header.light p  { color: rgba(255,255,255,.65); }

.light-label {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
}

/* ─────────────────────────────────────────────
   BRAND CARDS
───────────────────────────────────────────── */
.brands-section {
  padding: 100px 0;
  background: var(--gray-50);
}

.brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

.brand-card {
  position: relative;
  padding: 40px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  background: white;
  transition: all var(--transition);
}

.brand-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.brand-card-bg {
  position: absolute;
  inset: 0;
  opacity: .04;
  transition: opacity var(--transition);
}

.brand-pvc .brand-card-bg {
  background: radial-gradient(ellipse at top right, var(--pvc) 0%, transparent 60%);
  opacity: .08;
}

.brand-krypton .brand-card-bg {
  background: radial-gradient(ellipse at top right, var(--krypton) 0%, transparent 60%);
  opacity: .08;
}

.brand-logo-wrap {
  margin-bottom: 24px;
}

.brand-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.pvc-logo     { background: var(--pvc-light); color: var(--pvc); }
.krypton-logo { background: var(--krypton-light); color: var(--krypton); }

.brand-card h3 {
  font-size: 24px;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 12px;
}

.brand-card p {
  color: var(--gray-600);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.brand-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}

.brand-features li {
  font-size: 14px;
  color: var(--gray-600);
  font-weight: 500;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  transition: gap var(--transition);
}

.brand-link:hover { gap: 12px; }

.pvc-link     { color: var(--pvc); }
.krypton-link { color: var(--krypton); }

/* ─────────────────────────────────────────────
   PRODUCTS
───────────────────────────────────────────── */
.products-section {
  padding: 100px 0;
}

.filter-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 44px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 9px 22px;
  border-radius: 100px;
  border: 1.5px solid var(--gray-200);
  background: white;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition);
}

.filter-btn.active,
.filter-btn:hover {
  border-color: var(--gray-900);
  background: var(--gray-900);
  color: white;
}

.filter-btn.pvc-btn.active,
.filter-btn.pvc-btn:hover {
  border-color: var(--pvc);
  background: var(--pvc);
}

.filter-btn.krypton-btn.active,
.filter-btn.krypton-btn:hover {
  border-color: var(--krypton);
  background: var(--krypton);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.product-card {
  position: relative;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gray-300);
}

.product-card.hidden { display: none; }

.product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  z-index: 2;
}

.pvc-badge     { background: var(--pvc-light);     color: var(--pvc); }
.krypton-badge { background: var(--krypton-light); color: var(--krypton); }

.product-img {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pvc-img     { background: linear-gradient(135deg, var(--pvc-light), var(--pvc-mid)); }
.krypton-img { background: linear-gradient(135deg, var(--krypton-light), var(--krypton-mid)); }

.product-icon { font-size: 56px; }

.product-info {
  padding: 20px;
}

.product-category {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-400);
  display: block;
  margin-bottom: 6px;
}

.product-info h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 8px;
  line-height: 1.4;
}

.product-info p {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 16px;
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.product-price {
  font-size: 17px;
  font-weight: 800;
  color: var(--gray-900);
}

.product-price small {
  font-size: 12px;
  font-weight: 400;
  color: var(--gray-400);
}

.btn-view {
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-view:hover {
  background: var(--gray-900);
  color: white;
}

/* ─────────────────────────────────────────────
   PARTNERS
───────────────────────────────────────────── */
.partners-section {
  padding: 100px 0;
  background: var(--central);
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.partner-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  transition: all var(--transition);
  color: white;
}

.partner-card:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-4px);
}

.partner-logo {
  font-size: 36px;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.pvc-partner     { background: rgba(249,115,22,.15); }
.krypton-partner { background: rgba(14,165,233,.15); }
.central-partner { background: rgba(255,255,255,.08); }
.dist-partner    { background: rgba(168,85,247,.15); }

.partner-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.partner-desc {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 18px;
}

.partner-link-btn {
  font-size: 13px;
  font-weight: 700;
  color: var(--krypton);
  transition: color var(--transition);
}

.partner-card:hover .partner-link-btn { color: white; }

/* ─────────────────────────────────────────────
   CTA SECTION
───────────────────────────────────────────── */
.cta-section {
  padding: 72px 0;
  background: linear-gradient(135deg, var(--pvc) 0%, #ea580c 100%);
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cta-inner h2 {
  font-size: 28px;
  font-weight: 800;
  color: white;
  margin-bottom: 8px;
}

.cta-inner p {
  color: rgba(255,255,255,.75);
  font-size: 15px;
}

.cta-inner .btn-primary {
  background: white;
  color: var(--pvc);
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
}

.cta-inner .btn-primary:hover {
  box-shadow: var(--shadow-xl);
}

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.site-footer {
  background: var(--gray-900);
  padding: 72px 0 0;
  color: rgba(255,255,255,.6);
}

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

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-brand .logo-icon {
  font-size: 32px;
  color: var(--pvc);
}

.footer-logo-name {
  font-size: 20px;
  font-weight: 800;
  color: white;
  line-height: 1;
}

.footer-logo-sub {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  margin-top: 2px;
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.7;
  margin-top: 8px;
  max-width: 280px;
}

.footer-col h5 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 16px;
}

.footer-col a, .footer-col p {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,.6);
  margin-bottom: 10px;
  transition: color var(--transition);
  line-height: 1.6;
}

.footer-col a:hover { color: white; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 24px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}

/* ─────────────────────────────────────────────
   LOCATION PERMISSION BANNER
───────────────────────────────────────────── */
.loc-banner {
  position: fixed;
  bottom: -120px;
  left: 0;
  right: 0;
  z-index: 500;
  padding: 0 24px 24px;
  transition: bottom .4s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}

.loc-banner.visible {
  bottom: 0;
  pointer-events: all;
}

.loc-banner.dismissed { display: none; }

.loc-banner-inner {
  max-width: 680px;
  margin: 0 auto;
  background: var(--central);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-xl);
  flex-wrap: wrap;
}

.loc-banner-icon { font-size: 28px; flex-shrink: 0; }

.loc-banner-text {
  flex: 1;
  min-width: 200px;
}

.loc-banner-text strong {
  display: block;
  color: white;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

.loc-banner-text span {
  font-size: 13px;
  color: rgba(255,255,255,.55);
}

.loc-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.loc-btn-allow {
  padding: 8px 20px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--krypton);
  color: white;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}

.loc-btn-allow:hover { background: #0284c7; }

.loc-btn-deny {
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.15);
  background: none;
  color: rgba(255,255,255,.6);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.loc-btn-deny:hover { color: white; border-color: rgba(255,255,255,.4); }

/* ─────────────────────────────────────────────
   PRODUCT DETAIL PAGE (PDP)
───────────────────────────────────────────── */
.pdp-page {
  position: fixed;
  inset: 0;
  top: 0;
  background: var(--gray-50);
  z-index: 150;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

.pdp-page.open {
  transform: translateX(0);
}

/* PDP top bar */
.pdp-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  height: 60px;
}

.pdp-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--gray-200);
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}

.pdp-back:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

.pdp-breadcrumb {
  font-size: 13px;
  color: var(--gray-400);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdp-breadcrumb span { color: var(--gray-700); font-weight: 500; }

.pdp-topbar-actions { flex-shrink: 0; }

.pdp-cart-btn {
  padding: 9px 20px;
  font-size: 14px;
  gap: 7px;
}

/* PDP hero */
.pdp-hero {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: center;
}

.pdp-hero-bg {
  position: absolute;
  inset: 0;
}

.pdp-hero-bg.pvc-img {
  background: linear-gradient(135deg, var(--pvc-light) 0%, var(--pvc-mid) 60%, #fdba74 100%);
}

.pdp-hero-bg.krypton-img {
  background: linear-gradient(135deg, var(--krypton-light) 0%, var(--krypton-mid) 60%, #7dd3fc 100%);
}

.pdp-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 48px 24px 48px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.pdp-hero-icon {
  font-size: 100px;
  line-height: 1;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.15));
  flex-shrink: 0;
  animation: pdp-pop .5s cubic-bezier(.34,1.56,.64,1);
}

@keyframes pdp-pop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.pdp-hero-meta { flex: 1; }

.pdp-hero-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pdp-badge {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

.cat-badge {
  background: rgba(0,0,0,.08);
  color: var(--gray-700);
}

.pdp-hero-name {
  font-size: clamp(22px, 3.5vw, 36px);
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-bottom: 12px;
}

.pdp-hero-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--gray-900);
}

.pdp-price-unit {
  font-size: 15px;
  font-weight: 400;
  color: var(--gray-500);
}

/* PDP body two-column layout */
.pdp-body {
  padding: 48px 0 80px;
}

.pdp-columns {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 32px;
  align-items: start;
}

.pdp-left { display: flex; flex-direction: column; gap: 32px; }

.pdp-section {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.pdp-section-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-100);
}

.pdp-desc {
  font-size: 15px;
  color: var(--gray-600);
  line-height: 1.8;
}

.pdp-specs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.spec-item {
  padding: 14px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
}

.spec-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray-400);
  margin-bottom: 4px;
}

.spec-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

.pdp-brand-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--gray-200);
  transition: all var(--transition);
  text-decoration: none;
  color: inherit;
}

.pdp-brand-link:hover {
  border-color: var(--krypton);
  background: var(--krypton-light);
}

.pdp-brand-link-logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.pdp-brand-link-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 2px;
}

.pdp-brand-link-sub {
  font-size: 12px;
  color: var(--gray-500);
}

/* PDP right — dealers card */
.pdp-right { position: sticky; top: 76px; }

.pdp-dealers-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pdp-dealers-header {
  padding: 20px 20px 0;
}

.pdp-dealers-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-700);
  margin-bottom: 6px;
}

.pdp-dealers-sub {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 16px;
}

/* Location status strips */
.loc-status-strip { padding: 0 20px 8px; }

.loc-strip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  flex-wrap: wrap;
}

.loc-strip-ok {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.loc-strip-pending {
  background: var(--krypton-light);
  color: var(--krypton);
  border: 1px solid var(--krypton-mid);
}

.loc-strip-denied {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
  flex-direction: column;
  gap: 10px;
}

.loc-strip-ask {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  align-items: center;
  justify-content: space-between;
}

.loc-denied-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.loc-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid currentColor;
  background: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: inherit;
  transition: all var(--transition);
}

.loc-retry-btn:hover { opacity: .75; }

.loc-hint {
  font-size: 12px;
  color: #9a3412;
  line-height: 1.5;
  opacity: .8;
}

/* Spinner */
.loc-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}

.loc-spinner.lg { width: 20px; height: 20px; border-width: 2.5px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Shops list */
.shops-list {
  display: flex;
  flex-direction: column;
  padding: 12px 20px 20px;
  gap: 10px;
  max-height: 65vh;
  overflow-y: auto;
}

.shop-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  transition: all var(--transition);
  text-decoration: none;
  color: inherit;
}

.shop-card:hover {
  border-color: var(--krypton);
  background: var(--krypton-light);
  transform: translateX(2px);
}

.shop-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.shop-info { flex: 1; min-width: 0; }

.shop-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-address {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-phone {
  font-size: 12px;
  color: var(--krypton);
  margin-top: 2px;
  font-weight: 500;
}

.shop-distance {
  font-size: 12px;
  font-weight: 700;
  color: var(--krypton);
  white-space: nowrap;
  background: var(--krypton-light);
  padding: 3px 8px;
  border-radius: 100px;
  flex-shrink: 0;
}

.shop-distance.far {
  color: var(--gray-400);
  background: var(--gray-100);
}

.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 20px;
  color: var(--gray-400);
  font-size: 14px;
}

/* ─────────────────────────────────────────────
   CART DRAWER
───────────────────────────────────────────── */
.cart-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 420px;
  height: 100vh;
  background: white;
  z-index: 300;
  display: flex;
  flex-direction: column;
  transition: right var(--transition);
  box-shadow: var(--shadow-xl);
}

.cart-drawer.open { right: 0; }

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid var(--gray-200);
}

.cart-header h3 {
  font-size: 18px;
  font-weight: 700;
}

.cart-header button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--gray-100);
  cursor: pointer;
  font-size: 16px;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.cart-empty {
  text-align: center;
  color: var(--gray-400);
  font-size: 14px;
  padding: 40px 0;
}

.cart-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--gray-200);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  margin-bottom: 14px;
}

.cart-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
}

.cart-item-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
}

.cart-item-name { font-size: 13px; font-weight: 600; flex: 1; }
.cart-item-price { font-size: 14px; font-weight: 700; }

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 299;
  display: none;
}

.cart-overlay.open { display: block; }

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-visual { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .pdp-columns { grid-template-columns: 1fr; }
  .pdp-right   { position: static; }
  .shops-list  { max-height: none; }
}

@media (max-width: 768px) {
  .main-nav { display: none; }
  .main-nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: 12px 24px;
    gap: 4px;
    z-index: 80;
  }
  .burger { display: flex; }
  .hero-content { padding: 60px 24px; }
  .hero-stats { gap: 16px; }
  .hero-stats .stat span { font-size: 22px; }
  .brands-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .cta-inner { flex-direction: column; text-align: center; }
  .cart-drawer { width: 100%; right: -100%; }

  /* PDP mobile */
  .pdp-topbar { padding: 0 12px; gap: 8px; }
  .pdp-breadcrumb { display: none; }
  .pdp-hero-content { padding: 32px 16px; gap: 20px; }
  .pdp-hero-icon { font-size: 64px; }
  .pdp-hero-name { font-size: 22px; }
  .pdp-hero-price { font-size: 22px; }
  .pdp-body { padding: 24px 0 60px; }
  .pdp-cart-btn { padding: 8px 14px; font-size: 13px; }

  /* Location banner mobile */
  .loc-banner-inner { gap: 10px; padding: 14px; }
  .loc-banner-icon  { display: none; }
}

@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr; }
  .partners-grid { grid-template-columns: 1fr; }
  .pdp-specs { grid-template-columns: 1fr 1fr; }
  .loc-banner-actions { width: 100%; justify-content: flex-end; }
}