@font-face {
  font-family: 'Eurostile Extended Black';
  src: url('EurostileExtendedBlack.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --font-eurostile: 'Eurostile Extended Black', 'Arial Black', 'Impact', sans-serif;
}

html { scroll-padding-top: 88px; }
body { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x: hidden; }

.font-display,
h1, h2, h3,
.product-name,
.eyebrow,
.section-heading h2 {
  font-family: var(--font-eurostile);
}
.noise { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.nav-link { color: rgb(203 213 225); font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: .2s ease; }
.nav-link:hover { color: #19d3ff; }
.region-toggle, .lang-toggle { display: inline-flex; align-items: center; gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 2px; flex-shrink: 0; }
.region-btn, .lang-btn { border: none; background: transparent; color: rgb(148 163 184); font-size: .68rem; font-weight: 800; padding: 4px 7px; border-radius: 999px; transition: all .2s ease; cursor: pointer; white-space: nowrap; line-height: 1; }
.region-btn:hover, .lang-btn:hover { color: white; }
.region-btn.active, .lang-btn.active { background: #19d3ff; color: #020609; font-weight: 900; box-shadow: 0 0 12px rgba(25,211,255,.35); }

@media (max-width: 639px) {
  .region-toggle, .lang-toggle { padding: 1.5px; }
  .region-btn, .lang-btn { font-size: .62rem; padding: 3px 5px; }
}
.mobile-link { border-radius: .8rem; padding: .9rem 1rem; color: rgb(226 232 240); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.mobile-link:hover { background: rgba(255,255,255,.05); color: #19d3ff; }
.btn-primary,.btn-whatsapp { min-height: 3.25rem; display: inline-flex; align-items: center; justify-content: center; gap: .65rem; border-radius: .85rem; padding: .85rem 1.35rem; font-size: .82rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; transition: .22s ease; }
.btn-primary { border: 1px solid rgba(25,211,255,.75); background: #19d3ff; color: #020609; box-shadow: 0 0 0 1px rgba(25,211,255,.15), 0 10px 35px rgba(25,211,255,.18); }
.btn-primary:hover { transform: translateY(-2px); background: #70e5ff; box-shadow: 0 0 0 1px rgba(25,211,255,.35), 0 15px 45px rgba(25,211,255,.28); }
.btn-whatsapp { border: 1px solid rgba(37,211,102,.45); background: #25D366; color: #04170b; box-shadow: 0 12px 35px rgba(37,211,102,.2); }
.btn-whatsapp:hover { transform: translateY(-2px); background: #52e47f; }
.section-shell { max-width: 80rem; margin-inline: auto; padding: 5rem 1rem; }
@media (min-width:1024px){ .section-shell { padding-inline: 2rem; } }
.section-heading { display: flex; flex-direction: column; gap: 1.5rem; justify-content: space-between; margin-bottom: 2.2rem; }
@media (min-width:900px){ .section-heading { flex-direction: row; align-items: end; } }
.section-heading h2 { margin-top: .7rem; font-family: "Arial Black", Impact, system-ui, sans-serif; font-size: clamp(2.2rem,5vw,4.5rem); line-height: .95; text-transform: uppercase; }
.section-heading p { max-width: 44rem; margin-top: 1rem; color: rgb(148 163 184); line-height: 1.75; }
.eyebrow { color: #19d3ff; font-size: .75rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.feature-card { display: flex; gap: 1rem; align-items: center; min-height: 8rem; background: #0b1017; padding: 1.5rem; }
.feature-card h3 { font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.feature-card p { margin-top: .3rem; font-size: .82rem; color: rgb(148 163 184); }
.feature-icon { display:grid; place-items:center; flex:0 0 auto; width:2.7rem; height:2.7rem; border:1px solid rgba(25,211,255,.35); border-radius:999px; color:#19d3ff; font-size:.72rem; font-weight:900; }
.search-box { display:flex; align-items:center; gap:.7rem; min-width:min(100%,20rem); border:1px solid rgba(255,255,255,.12); border-radius:.9rem; background:rgba(255,255,255,.04); padding:.75rem 1rem; color:rgb(148 163 184); }
.search-box:focus-within { border-color: rgba(25,211,255,.65); box-shadow:0 0 0 3px rgba(25,211,255,.09); }
.search-box input { width:100%; background:transparent; outline:none; color:white; }
.filter-btn { border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:.62rem 1rem; background:rgba(255,255,255,.03); color:rgb(203 213 225); font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; transition:.2s; }
.filter-btn:hover,.filter-btn.active { border-color:rgba(25,211,255,.7); background:rgba(25,211,255,.12); color:#19d3ff; }
/* Scroll Progress Bar */
#scrollProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #19d3ff, #70e5ff);
  z-index: 100;
  width: 0%;
  box-shadow: 0 0 12px #19d3ff;
  pointer-events: none;
}

.product-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.product-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(25, 211, 255, 0.55);
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.6), 0 0 35px rgba(25, 211, 255, 0.18);
}
.product-image-wrap { position:relative; overflow:hidden; aspect-ratio:1/1; background:#05070a; }
.product-image-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.product-card:hover .product-image-wrap img { transform:scale(1.05); }
.product-badge { position:absolute; left:1rem; top:1rem; border:1px solid rgba(25,211,255,.35); border-radius:999px; background:rgba(2,8,12,.82); padding:.42rem .7rem; color:#19d3ff; font-size:.62rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; backdrop-filter:blur(8px); }
.product-content { padding:1.15rem; }
.product-category { color:rgb(100 116 139); font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.product-name { margin-top:.35rem; font-size:1.08rem; font-weight:900; text-transform:uppercase; }
.product-description { min-height:2.6rem; margin-top:.5rem; color:rgb(148 163 184); font-size:.82rem; line-height:1.45; }
.product-price { color:#19d3ff; font-size:1.25rem; font-weight:900; }
.card-actions { display:grid; grid-template-columns:1fr auto; gap:.6rem; margin-top:1rem; }
.card-btn,.card-detail { min-height:2.75rem; border-radius:.75rem; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; transition:.2s; }
.card-btn { background:#19d3ff; color:#020609; }
.card-btn:hover { background:#70e5ff; }
.card-detail { width:2.9rem; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.04); color:white; }
.card-detail:hover { border-color:rgba(25,211,255,.55); color:#19d3ff; }
.mini-step { display:flex; align-items:center; gap:.8rem; border:1px solid rgba(255,255,255,.1); border-radius:1rem; background:rgba(0,0,0,.35); padding:1rem; }
.mini-step b { display:grid; place-items:center; width:2rem; height:2rem; border-radius:999px; background:#19d3ff; color:#020609; }
.mini-step span { font-size:.8rem; font-weight:800; text-transform:uppercase; }
.field { display:block; }
.field span { display:block; margin-bottom:.5rem; color:rgb(203 213 225); font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.field input,.field select,.field textarea { width:100%; border:1px solid rgba(255,255,255,.12); border-radius:.85rem; background:rgba(255,255,255,.045); padding:.85rem 1rem; color:white; outline:none; transition:.2s; }
.field select option { color:black; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:rgba(25,211,255,.7); box-shadow:0 0 0 3px rgba(25,211,255,.08); }
.value-card { border-left:2px solid #19d3ff; background:rgba(255,255,255,.035); padding:1.2rem; }
.value-card h3 { font-weight:900; text-transform:uppercase; }
.value-card p { margin-top:.45rem; color:rgb(148 163 184); font-size:.85rem; line-height:1.55; }
.shipping-card { display:grid; grid-template-columns:auto 1fr; gap:1.2rem; border:1px solid rgba(255,255,255,.1); border-radius:1.3rem; background:rgba(255,255,255,.035); padding:1.5rem; }
.shipping-flag { display:grid; place-items:center; width:3.3rem; height:3.3rem; border:1px solid rgba(25,211,255,.4); border-radius:1rem; color:#19d3ff; font-weight:900; }
.shipping-card h3 { font-size:1.35rem; font-weight:900; text-transform:uppercase; }
.shipping-card p { margin-top:.35rem; color:rgb(148 163 184); line-height:1.6; }
.shipping-card ul { margin-top:1rem; display:grid; gap:.45rem; color:rgb(203 213 225); font-size:.85rem; }
.shipping-card li::before { content:'✓'; color:#19d3ff; margin-right:.55rem; font-weight:900; }
.testimonial { border:1px solid rgba(255,255,255,.1); border-radius:1.2rem; background:rgba(255,255,255,.035); padding:1.5rem; }
.testimonial p { margin-top:1rem; color:rgb(226 232 240); line-height:1.75; }
.testimonial footer { margin-top:1rem; color:rgb(100 116 139); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.stars { color:#19d3ff; letter-spacing:.18em; }
.faq-item { overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:1rem; background:rgba(255,255,255,.025); }
.faq-item button { display:flex; align-items:center; justify-content:space-between; width:100%; padding:1.2rem 1.3rem; text-align:left; font-weight:900; }
.faq-plus { color:#19d3ff; font-size:1.4rem; transition:transform .2s; }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-answer p { padding:0 1.3rem 1.3rem; color:rgb(148 163 184); line-height:1.7; }
.faq-item.open .faq-answer { max-height:16rem; }
.faq-item.open .faq-plus { transform:rotate(45deg); }
.footer-title { font-size:.75rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:white; }
.footer-links { margin-top:1rem; display:grid; gap:.75rem; color:rgb(148 163 184); font-size:.88rem; }
.footer-links a:hover { color:#19d3ff; }
.cart-row { display:grid; grid-template-columns:4.5rem 1fr auto; gap:.85rem; align-items:center; border:1px solid rgba(255,255,255,.09); border-radius:1rem; background:rgba(255,255,255,.025); padding:.75rem; }
.cart-row img { width:4.5rem; height:4.5rem; object-fit:cover; border-radius:.75rem; }
.qty-control { display:inline-flex; align-items:center; border:1px solid rgba(255,255,255,.12); border-radius:.65rem; overflow:hidden; }
.qty-control button { width:2rem; height:2rem; }
.qty-control span { min-width:2rem; text-align:center; font-size:.78rem; }
body.locked { overflow:hidden; }
@media (max-width:640px){ .section-shell{padding-top:4rem;padding-bottom:4rem}.shipping-card{grid-template-columns:1fr}.shipping-flag{width:3rem;height:3rem} }

/* Google Translate & Language Switcher styles */
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
.goog-te-gadget,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
}
body {
  top: 0px !important;
  position: static !important;
}
.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}
.lang-toggle,
.region-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  padding: 3px;
  gap: 2px;
}
.lang-btn,
.region-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  border-radius: 9999px;
  color: #94a3b8;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lang-btn:hover,
.region-btn:hover {
  color: #ffffff;
}
/* Product Card & Modal Options (Colors & Sizes) */
.size-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: all 0.2s ease;
  cursor: pointer;
}
.size-chip:hover {
  border-color: rgba(25, 211, 255, 0.5);
  color: #ffffff;
  background: rgba(25, 211, 255, 0.08);
}
.size-chip.active {
  border-color: #19d3ff;
  background: #19d3ff;
  color: #020609;
  box-shadow: 0 0 14px rgba(25, 211, 255, 0.45);
}

.color-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 800;
  transition: all 0.2s ease;
  cursor: pointer;
}
.color-chip:hover {
  border-color: rgba(25, 211, 255, 0.5);
  color: #ffffff;
}
.color-chip.active {
  border-color: #19d3ff;
  background: rgba(25, 211, 255, 0.15);
  color: #19d3ff;
  box-shadow: 0 0 14px rgba(25, 211, 255, 0.3);
}

.color-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: inline-block;
}

.card-tag {
  font-size: 0.64rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Mobile Responsive Modal Overrides */
#productModal > div {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  #productModal {
    padding: 0.75rem !important;
  }
  #productModal > div {
    max-height: 88vh !important;
    border-radius: 1.5rem !important;
  }
  #modalImage {
    max-height: 200px !important;
    object-fit: cover;
  }
}
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.45rem;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.08);
}