/* =============================================
   RESET / BASE
   ============================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Archivo', Arial, sans-serif;
  background-color: #ffffff;
  color: #000000;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

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

/* =============================================
   HEADER / NAVBAR
   ============================================= */
.site-header {
  width: 100%;
  height: 90px;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
  position: relative;
  z-index: 100;
}

.header-container {
    position: relative;
    max-width: 1600px;
    height: 100%;
    margin: 0 auto;
    padding: 0 16px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

/* ---------- LOGO ---------- */
.logo-link {
  display: inline-block;
}

/* No "Zouraiz / Tech Store" text flash before the uploaded logo appears:
   the text logo stays invisible while the logo loads. script.js shows it
   (logo-text--show) when no logo is set; after 3s it shows anyway. */
.logo-link .logo-text {
  visibility: hidden;
  animation: zouraizLogoFallback 0s linear 3s forwards;
}

.logo-link .logo-text.logo-text--show {
  visibility: visible;
  animation: none;
}

@keyframes zouraizLogoFallback {
  to { visibility: visible; }
}

.logo-img {
  display: block;
  height: 50px;
  width: auto;
  object-fit: contain;
}

/* ---------- MAIN NAV ---------- */
.main-nav {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-slider-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  width: 520px;
  max-width: 60vw;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-slider-viewport::-webkit-scrollbar {
  display: none;
}

.nav-slide-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: #000000;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-slide-btn:hover {
  color: #666666;
}

.nav-slide-btn:disabled {
  color: #cccccc;
  cursor: default;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 36px;
  width: max-content;
}

.nav-item {
  position: relative;
  flex-shrink: 0;
}

.nav-link {
  font-family: 'Archivo', Arial, sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  line-height: 26.4px;
  font-weight: 700;
  letter-spacing: normal;
  color: #000000;
  padding: 6px 0;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.nav-link.active {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.chevron-icon {
  transition: transform 0.2s ease;
}

.nav-item.dropdown:hover .chevron-icon {
  transform: rotate(180deg);
}

.wishlist-link .arrow-icon {
  transition: transform 0.2s ease;
}

.wishlist-link:hover .arrow-icon {
  transform: translateX(3px);
}

/* ---------- DROPDOWN PANELS (hidden until JS step) ---------- */
/* Nav dropdowns (Shop By Category, Partners) use position:fixed
   with JS-computed coordinates (see initHeaderDropdowns) because
   they live inside .nav-slider-viewport, which needs overflow:hidden
   for the horizontal slider to work — an absolutely-positioned
   dropdown would get clipped by that same overflow:hidden. */
.dropdown-menu {
  display: none;
  position: fixed;
  min-width: 180px;
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 8px 0;
  z-index: 200;
}

.account-dropdown-menu,
.currency-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 180px;
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 8px 0;
  z-index: 200;
}

.dropdown-menu li a,
.account-dropdown-menu li a,
.currency-dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  transition: background-color 0.15s ease;
}

.dropdown-menu li a:hover,
.account-dropdown-menu li a:hover,
.currency-dropdown-menu li a:hover {
  background-color: #f5f5f5;
}

/* class JS will toggle to reveal dropdowns */
.dropdown-menu.is-open,
.account-dropdown-menu.is-open,
.currency-dropdown-menu.is-open {
  display: block;
}

/* ---------- HEADER ACTIONS (right side) ---------- */
.header-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* USER AVATAR */
.user-avatar-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.avatar-btn:hover {
  opacity: 0.8;
}

.avatar-initial {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.avatar-chevron {
  color: #000000;
}

.account-dropdown-menu {
  right: 0;
  left: auto;
  top: calc(100% + 16px);
}

/* CURRENCY SELECTOR */
.currency-selector {
  position: relative;
}

.currency-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #000000;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #000000;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.currency-btn:hover {
  background-color: #000000;
  color: #ffffff;
}

.currency-btn:hover .chevron-icon {
  color: #ffffff;
}

.currency-dropdown-menu {
  right: 0;
  left: auto;
  max-height: 220px;
  overflow-y: auto;
}

.account-dropdown-divider {
  height: 1px;
  margin: 8px 0;
  background-color: #eeeeee;
}

/* ---------- HEADER SEARCH (expanding inline input) ---------- */
.header-search {
  position: relative;
  display: flex;
  align-items: center;
}

.header-search-form {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: right center;
  width: 240px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.header-search.is-open .header-search-form {
  transform: translateY(-50%) scaleX(1);
  opacity: 1;
  pointer-events: auto;
  right: 36px;
}

.header-search-input {
  width: 100%;
  padding: 8px 12px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  border: 1px solid #000000;
  background-color: #ffffff;
  color: #000000;
}

.header-search-input:focus {
  outline: none;
}

@media (max-width: 768px) {
  .header-search-form {
    width: 180px;
  }
}

/* CART BUTTON */
.cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #000000;
  transition: opacity 0.2s ease;
}

/* SEARCH + WISHLIST ICON BUTTONS */
.icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: left;
  width: 32px;
  height: 32px;
  color: #000000;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.icon-btn:hover {
  opacity: 0.65;
}

.wishlist-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #000000;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-btn:hover {
  opacity: 0.65;
}

.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #000000;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =============================================
   HERO SECTION
   ============================================= */
.hero {
  position: relative;
  width: 100%;
  height: 620px;
  overflow: hidden;
  background-color: #000000;
}

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-content {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 180px 0;
}

.hero-heading {
  color: #ffffff;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 6.53vw;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -1px;
  text-transform: uppercase;
  max-width: 1600px;
  margin: 0 auto 48px auto;
  padding: 0 116px;
  width: 100%;
  box-sizing: border-box;
  margin-top: auto;
}

/* Hero slogan/subtitle — new, admin-editable (Admin -> Homepage -> Hero
   Banner), matching the contract's "title and title slogan" requirement.
   Stays [hidden] (no layout impact at all) until the admin sets one, so
   the hero looks pixel-identical to before on a fresh install. Typography
   intentionally mirrors .hero-heading (same family/color/centering) at a
   lighter weight/smaller size, consistent with the rest of the site's
   heading/subtitle pairs (see .section-subtitle, .promo-banner-subtitle). */
.hero-subtitle {
  color: #ffffff;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  max-width: 720px;
  margin: -24px auto 24px auto;
  padding: 0 24px;
}

/* Hamburger Button */
.hamburger-btn{
    display:none;          /* Hidden on desktop */
    width:42px;
    height:42px;
    border:none;
    background:none;
    cursor:pointer;

    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
}

.hamburger-btn span{
    width:24px;
    height:2px;
    background:#000;
    border-radius:2px;
}

/* Desktop cap — matches your confirmed 127.992px exactly at reference width */
@media (min-width: 1960px) {
  .hero-heading {
    font-size: 127.992px;
  }
}

.hero-btn {
  align-self: center;
  display: inline-block;
  background-color: #ffffff;
  color: #000000;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 17px;
  line-height: 28.57px;
  font-weight: 700;
  letter-spacing: normal;
  padding: 18px 40px;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.hero-btn:hover {
  background-color: #000000;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px #ffffff;
}

/* =============================================
   RESPONSIVE — TABLET (≤ 1024px)
   ============================================= */
@media (max-width: 1024px) {
  .header-container {
    padding: 0 28px;
  }

  .nav-list {
    gap: 28px;
  }

  .nav-link {
    font-size: 13px;
  }

  .header-actions {
    gap: 16px;
  }

  .currency-btn {
    padding: 8px 10px;
    font-size: 13px;
  }

  .hero {
    height: 700px;
  }

  .hero-heading {
    font-size: 72px;
    padding: 0 28px;
    white-space: normal;
  }

  .logo{
    justify-self:start;
}

.header-actions{
    justify-self:end;
}

.hamburger-btn{
    display:flex;
    justify-self:end;
}
}

/* =============================================
   RESPONSIVE — MOBILE (≤ 768px)
   ============================================= */
@media (max-width: 768px) {
  .site-header {
    height: auto;
  }

 .header-container{
    display:flex;
    align-items:center;
    justify-content:space-between;

    height:70px;
    padding:0 16px;
}

.logo{
    flex-shrink:0;
}

  .nav-list {
    gap: 20px;
  }

  .nav-link {
    font-size: 12px;
    white-space: nowrap;
  }

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

    flex-shrink:0;
}

  .currency-label {
    display: none;
  }

  .currency-btn {
    padding: 8px;
  }

  .hero {
    height: 520px;
  }

 .hero-heading{
    width:auto;
    max-width:100%;
    padding:0 20px;
    margin:0 0 24px;
    text-align:center;
    font-size:38px;
    line-height:1;
}

.hero,
.hero-media,
.hero-image,
.hero-content{
    width:100%;
    max-width:100%;
    overflow:hidden;
}

  .hero-btn {
    padding: 14px 32px;
    font-size: 13px;
  }

  .hamburger-btn{
    display:flex;
    justify-self: start;
}

.main-nav{
    display:none;
}

.user-avatar-wrapper,
.currency-selector{
    display:none;
}

.logo-img{
    height:30px;
    width:auto;
}

.icon-btn,
.cart-btn,
.hamburger-btn{
    width:28px;
    height:28px;
}

.header-actions{
    justify-self:end;
}

html,
body{
    overflow-x:hidden;
}

}

/* =============================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ============================================= */
@media (max-width: 480px) {
  .hero {
    height: 320px;
  }

  .hero-heading{
    font-size:38px;
    width:100%;
    padding:0;
    margin:0 0 24px;
    text-align:center;
}

  .hero-content{
    justify-content:center;
    align-items:center;
    padding:0 20px;
    text-align:center;
}

}

/* =============================================
   PROMO MARQUEE BAR
   ============================================= */
.marquee-bar {
  width: 100%;
  background-color: #000000;
  overflow: hidden;
  padding: 14px 0;
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 42.0333s linear infinite;
}

.marquee-item {
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 20.4696px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  text-transform: uppercase;
}

.marquee-sep {
  font-size: 20.4696px;
  color: #ffffff;
  margin: 0 24px;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Pause on hover — standard Wix marquee behavior */
.marquee-bar:hover .marquee-track {
  animation-play-state: paused;
}

/* =============================================
   PRODUCTS SECTION
   ============================================= */
.products-section {
  width: 100%;
  padding: 50px 1px;
  background-color: #ffffff;
}

.section-heading {
  text-align: center;
  margin-bottom: 48px;
}

.section-title {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 22.3304px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 8px;
}

.section-subtitle {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 18.3906px;
  font-weight: 400;
  color: #000000;
}

/* ---------- SLIDER STRUCTURE ---------- */
.product-slider {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  align-items: center;
  gap: 16px;
}

.product-track {
  display: flex;
  gap: 20px;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product-track::-webkit-scrollbar{
    display:none;
}

.slider-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #dddddd;
  background-color: #ffffff;
  color: #000000;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.slider-arrow{
    position:absolute;
    top:40%;
    transform:translateY(-50%);
    z-index:20;
}

.slider-arrow--prev{
    left:0;
}

.slider-arrow--next{
    right:0;
}

.slider-arrow:hover {
  background-color: #000000;
  color: #ffffff;
}

.slider-empty-state {
  width: 100%;
  padding: 60px 20px;
  text-align: center;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 16px;
  color: #888888;
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #dddddd;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.slider-dot.active {
  background-color: #000000;
}

/* ---------- PRODUCT CARD (rendered by JS from products.json) ---------- */
.product-card {
  flex-shrink: 0;
  width: 205px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
}

/* Grid contexts (Search, category pages, Wishlist) need the card to
   fill its actual grid cell instead of the fixed 205px used by the
   horizontal sliders — without this, cards were silently ignoring
   the grid's real column width the whole time. */
.product-grid .product-card {
  width: 100%;
}

.product-card-image-wrap {
  width: 205px;
  height: 205px;
  overflow: hidden;
  background-color: #f2f2f2;
}

.product-grid .product-card-image-wrap {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.product-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.product-card-name {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #000000;
}

.product-card-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-card-price-original {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 16px;
  color: #999999;
  text-decoration: line-through;
}

.product-card-price-sale {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #000000;
}

/* =============================================
   PROMO BANNER (reusable pattern — used again
   for "Precision on Wrist", "Elite Audio &
   Smart Home Tech", "Audio Essentials", etc.
   Built generically now so later banners just
   reuse these classes with new content/image.)
   ============================================= */
.promo-banner {
  position: relative;
  width: 100%;
  /* ESTIMATED — not yet confirmed via DevTools, see note below */
  height: 620px;
  overflow: hidden;
  background-color: #000000;
}

.promo-banner-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* zouraiz-fix:promo-banner-text-contrast - a subtle, uniform dark
   overlay behind every promo banner's heading/subtitle, so the
   hardcoded white text stays readable no matter how light the
   uploaded banner photo is (this was previously pure luck - two
   banners, "Hot Selling" and "Blog to Know More", happened to use
   light photos and were hard to read as a result). Sits above the
   photo but below .promo-banner-content (z-index: 2), so the text
   itself is unaffected. */
.promo-banner-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

.promo-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.promo-banner-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.promo-banner-heading {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 79.0797px;
  line-height: 1.1;
  font-weight: 700;
  color: #ffffff;
  max-width: 1000px;
  margin: 0 0 16px 0;
}

.promo-banner-subtitle {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 18.3906px;
  font-weight: 400;
  color: #ffffff;
  margin: 0 0 32px 0;
}

.promo-banner-btn {
  display: inline-block;
  background-color: #ffffff;
  color: #000000;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14.7125px;
  font-weight: 500;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 14.8869px 37.2174px;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.promo-banner-btn:hover {
  background-color: #000000;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px #ffffff;
}

/* =============================================
   PROMO BANNER MODIFIERS
   Extends the existing .promo-banner pattern for
   left-aligned banners: Precision on Wrist,
   Elite Audio & Smart Home Tech, Audio Essentials,
   The Future of Sound & Home.
   Base .promo-banner / .promo-banner-media /
   .promo-banner-image / .promo-banner-heading /
   .promo-banner-btn are REUSED AS-IS — untouched.
   ============================================= */
.promo-banner--left {
  height: 640px;
}

.promo-banner-content--left {
  align-items: center;
  text-align: center;
  max-width: 620px;
  padding: 0 24px;
  margin: 0 auto;
}

.promo-banner-content--left .promo-banner-heading {
  white-space: normal;
  word-break: keep-all;
}

.promo-banner-eyebrow {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 14px 0;
}

.promo-banner-tag {
  position: absolute;
  z-index: 3;
  top: 28px;
  right: 32px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0.85;
}

.promo-banner-heading--dark {
  color: #000000;
}

.promo-banner-body {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #ffffff;
  max-width: 480px;
  margin: 0 0 28px 0;
}

.promo-banner-body--dark {
  color: #000000;
}

.promo-banner-btn--dark {
  background-color: #000000;
  color: #ffffff;
}

.promo-banner-btn--dark:hover {
  background-color: #ffffff;
  color: #000000;
  box-shadow: inset 0 0 0 1px #000000;
}

.promo-banner-btn--outline-dark {
  display: inline-block;
  background-color: transparent;
  color: #000000;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14.7125px;
  font-weight: 500;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 14.8869px 37.2174px;
  box-shadow: inset 0 0 0 1px #000000;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* zouraiz-fix:elite-audio-contrast - the "Elite Audio & Smart Home Tech"
   banner (#elite-audio) sits on a dark photo but its heading/body/button
   were using the --dark (black text) variant meant for light-background
   banners, making them nearly invisible. Scoped to just this section so
   every other banner using the --dark classes on a light background is
   unaffected, and no layout/alignment properties (e.g. align-self) change. */
#elite-audio .promo-banner-heading--dark,
#elite-audio .promo-banner-body--dark {
  color: #ffffff;
}
#elite-audio .promo-banner-btn--outline-dark {
  color: #ffffff;
  box-shadow: inset 0 0 0 1px #ffffff;
}

#elite-audio .promo-banner-heading--dark,
#elite-audio .promo-banner-body--dark {
  color: #ffffff;
}
#elite-audio .promo-banner-btn--outline-dark {
  color: #ffffff;
  box-shadow: inset 0 0 0 1px #ffffff;
}

.promo-banner-btn--outline-dark:hover {
  background-color: #000000;
  color: #ffffff;
}

/* The outline button classes above carry align-self: flex-start, which is
   correct for the Motion Collection / distributor-page layouts they were
   originally built for. Reset it back to the default here specifically
   when used inside .promo-banner-content, so it respects that container's
   own centering instead of snapping to the left. */
.promo-banner-content .promo-banner-btn--outline,
.promo-banner-content .promo-banner-btn--outline-dark {
  align-self: auto;
}

@media (max-width: 768px) {
  .promo-banner--left {
    height: 520px;
  }
  .promo-banner-content--left {
    padding-left: 24px;
    max-width: 100%;
    padding-right: 24px;
  }
  .promo-banner-tag {
    display: none;
  }
}

/* Shifts the product further right within the frame so it clears the
   left-aligned text instead of sitting directly behind it. Scoped to
   these specific banners only — the shared .promo-banner-image base
   rule (object-position: center) stays untouched for Smart Home. */
#precision-wrist .promo-banner-image,
#elite-audio .promo-banner-image,
#future-of-sound .promo-banner-image {
  object-position: center;
}

@media (max-width: 768px) {
  #precision-wrist .promo-banner-image,
  #elite-audio .promo-banner-image,
  #future-of-sound .promo-banner-image {
    object-position: center;
  }
}

/* =============================================
   AUDIO ESSENTIALS — stacked layout (text block
   above, separate full-width image below).
   ============================================= */
.audio-essentials-section {
  width: 100%;
  background-color: #1a1a1a;
}

.audio-essentials-text {
  padding: 56px 80px 40px;
}

.audio-essentials-media {
  width: 100%;
  height: 420px;
  overflow: hidden;
}

.audio-essentials-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 768px) {
  .audio-essentials-text {
    padding: 40px 24px 28px;
  }
  .audio-essentials-media {
    height: 280px;
  }
}

/* =============================================
   TILE GRID (reused for: Best Selling, Trending
   Now, and both Category Collection grids)
   Same visual language as .product-card, adapted
   to a static 4-up grid with no price row.
   ============================================= */
.tile-grid-section {
  width: 100%;
  padding: 50px 1px;
  background-color: #ffffff;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  max-width: 1600px;
  margin: 0 auto;
}

.tile-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.tile-card-image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #f2f2f2;
}

.tile-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.tile-card:hover .tile-card-image {
  transform: scale(1.04);
}

.tile-card-label {
  display: block;
  text-align: center;
  padding: 18px 0;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: #000000;
}

/* Placeholder used only where no real project asset exists yet.
   Clearly marked — swap the <img> in when the real photo is available. */
.tile-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-image: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 10px, #e6e6e6 10px, #e6e6e6 20px);
  border: 1px dashed #bbbbbb;
  box-sizing: border-box;
}

.tile-placeholder-text {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 11px;
  line-height: 1.6;
  color: #777777;
}

.tile-placeholder-text code {
  display: block;
  font-size: 10px;
  color: #999999;
}

@media (max-width: 1024px) {
  .tile-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .tile-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
  }
  .tile-card-label {
    font-size: 12px;
    padding: 12px 0;
  }
}

/* =============================================
   TRUST STRIP — "Trusted by Industry Leaders"
   ============================================= */
.trust-strip {
  width: 100%;
  padding: 48px 24px;
  background-color: #f5f5f5;
  text-align: center;
}

.trust-strip-eyebrow {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0 0 32px 0;
}

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.trust-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 168px;
  height: 84px;
  background-color: #c9c9c9;
  color: #1a1a1a;
}

.trust-badge svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.trust-badge-label {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

/* =============================================
   SERVICE FEATURE STRIP (Next-Gen Speed, Studio
   Audio, Endless Power, Secure Tech)
   ============================================= */
.feature-strip {
  width: 100%;
  padding: 48px 24px;
  background-color: #ffffff;
}

.feature-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1200px;
  margin: 0 auto;
}

.feature-strip-item {
  text-align: center;
  padding: 0 24px;
  border-left: 1px solid #e6e6e6;
}

.feature-strip-item:first-child {
  border-left: none;
}

.feature-strip-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 12px;
}

.feature-strip-title {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  margin: 0 0 8px 0;
}

.feature-strip-text {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #666666;
  margin: 0;
}

@media (max-width: 768px) {
  .feature-strip-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 0;
  }
  .feature-strip-item {
    border-left: none;
  }
}

/* =============================================
   ZOURAIZ IN MOTION — split section
   ============================================= */
.motion-section {
  display: flex;
  width: 100%;
  min-height: 520px;
  background-color: #000000;
}

.motion-media {
  flex: 0 0 45%;
  overflow: hidden;
}

.motion-media img,
.motion-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.motion-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 80px;
}

.motion-eyebrow {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #cccccc;
  margin: 0 0 14px 0;
}

.motion-heading {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 20px 0;
}

.motion-body {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #cccccc;
  max-width: 460px;
  margin: 0 0 28px 0;
}

.promo-banner-btn--outline {
  display: inline-block;
  background-color: transparent;
  color: #ffffff;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14.7125px;
  font-weight: 500;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 14.8869px 37.2174px;
  box-shadow: inset 0 0 0 1px #ffffff;
  transition: background-color 0.25s ease, color 0.25s ease;
  align-self: flex-start;
}

.promo-banner-btn--outline[hidden] {
  display: none;
}

.promo-banner-btn--outline:hover {
  background-color: #ffffff;
  color: #000000;
}

@media (max-width: 900px) {
  .motion-section {
    flex-direction: column;
  }
  .motion-media {
    flex-basis: 280px;
  }
  .motion-content {
    padding: 40px 24px;
  }
  .motion-heading {
    font-size: 34px;
  }
}

/* =============================================
   WHY ZOURAIZ — feature cards
   ============================================= */
.why-section {
  width: 100%;
  padding: 64px 24px;
  background-color: #ffffff;
}

.feature-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 48px auto 0;
}

.feature-card {
  text-align: center;
}

.feature-card-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 16px;
}

.feature-card-title {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #000000;
  margin: 0 0 10px 0;
}

.feature-card-text {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #666666;
  margin: 0;
}

@media (max-width: 768px) {
  .feature-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 16px;
  }
}

/* =============================================
   NEWSLETTER — "Subscribe for Updates"
   ============================================= */
.newsletter-section {
  width: 100%;
  background-color: #ffffff;
}

.newsletter-heading-wrap {
  text-align: center;
  padding: 56px 24px 32px;
}

.newsletter-heading {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 800;
  color: #000000;
  margin: 0 0 16px 0;
}

.newsletter-subtitle {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 17px;
  color: #000000;
  max-width: 520px;
  margin: 0 auto;
}

.newsletter-media {
  position: relative;
  width: 100%;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.newsletter-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.newsletter-products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 32px 24px 48px;
  max-width: 1100px;
  margin: 0 auto;
}

.newsletter-form {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  background-color: rgba(255, 255, 255, 0.88);
  padding: 24px;
}

.newsletter-label {
  display: block;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 8px;
}

.newsletter-input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  border: 1px solid #cccccc;
  background-color: #f2f2f2;
  color: #000000;
  box-sizing: border-box;
}

.newsletter-input:focus {
  outline: none;
  border-color: #000000;
}

.newsletter-submit {
  width: 100%;
  padding: 14px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  background-color: #000000;
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.newsletter-submit:hover {
  background-color: #222222;
}

.newsletter-note {
  margin-top: 10px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  color: #000000;
  display: none;
}

.newsletter-note.is-visible {
  display: block;
}

@media (max-width: 600px) {
  .newsletter-heading {
    font-size: 28px;
  }
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
  width: 100%;
  background-color: #000000;
  padding: 40px 24px 24px;
}

.footer-preheading {
  max-width: 1200px;
  margin: 0 auto 32px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  color: #ffffff;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 32px;
}

.footer-col-title {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 16px 0;
}

.footer-link-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-link-list a {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  color: #cccccc;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* zouraiz-fix:footer-contact-info - new "Contact Us" footer column */
.footer-contact-list li {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  color: #cccccc;
  line-height: 1.6;
  margin: 0 0 8px 0;
}
.footer-contact-list a {
  color: #cccccc;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-link-list a:hover {
  color: #ffffff;
}

.footer-divider {
  max-width: 1200px;
  margin: 0 auto;
  border: none;
  border-top: 1px solid #333333;
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #000000;
  transition: opacity 0.2s ease;
}

.footer-social a:hover {
  opacity: 0.75;
}

.footer-social svg {
  width: 16px;
  height: 16px;
}

.footer-copyright {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  color: #999999;
}

@media (max-width: 900px) {
  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 16px;
  }
}

@media (max-width: 480px) {
  .footer-columns {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =============================================
   INTERIOR PAGES — Search / Wishlist / Cart
   Reuses .section-title, .product-card, and the
   site's spacing/typography tokens.
   ============================================= */
.page-hero {
  width: 100%;
  padding: 56px 24px 32px;
  text-align: center;
  background-color: #ffffff;
}

.page-hero-title {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #000000;
  margin: 0 0 12px 0;
}

.page-hero-subtitle {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 15px;
  color: #666666;
  max-width: 520px;
  margin: 0 auto;
}

.category-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 1600px;
  margin: 0 auto 40px;
}

.category-filter-chip {
  padding: 10px 20px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #000000;
  border: 1px solid #dddddd;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.category-filter-chip:hover {
  border-color: #000000;
}

.category-filter-chip.is-active {
  background-color: #000000;
  color: #ffffff;
  border-color: #000000;
}

.page-content {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.product-card-out-of-stock {
  display: inline-block;
  margin-top: 4px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #b3261e;
}

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

.product-grid[hidden] {
  display: none;
}

.empty-state-block {
  text-align: center;
  padding: 80px 24px;
}

.empty-state-icon {
  font-size: 40px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state-title {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 8px 0;
}

.empty-state-text {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  color: #666666;
  margin: 0 0 24px 0;
}

.empty-state-cta {
  display: inline-block;
  background-color: #000000;
  color: #ffffff;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  padding: 12px 28px;
}

.empty-state-cta:hover {
  background-color: #222222;
}

/* ---------- CART TABLE ---------- */
.cart-table {
  width: 100%;
  border-collapse: collapse;
}

.cart-table th {
  text-align: left;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #666666;
  padding: 0 0 16px 0;
  border-bottom: 1px solid #eeeeee;
}

.cart-table td {
  padding: 20px 0;
  border-bottom: 1px solid #eeeeee;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  vertical-align: middle;
}

.cart-item-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cart-item-image {
  width: 72px;
  height: 72px;
  object-fit: cover;
  background-color: #f2f2f2;
  flex-shrink: 0;
}

.cart-item-name {
  font-weight: 600;
  color: #000000;
}

.cart-qty-controls {
  display: inline-flex;
  align-items: center;
  border: 1px solid #dddddd;
}

.cart-qty-btn {
  width: 28px;
  height: 28px;
  font-size: 14px;
  color: #000000;
}

.cart-qty-btn:hover {
  background-color: #f5f5f5;
}

.cart-qty-value {
  min-width: 28px;
  text-align: center;
  font-size: 13px;
}

.cart-remove-btn {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  text-decoration: underline;
  color: #666666;
}

.cart-remove-btn:hover {
  color: #000000;
}

.cart-summary {
  max-width: 360px;
  margin: 32px 0 0 auto;
  padding-top: 24px;
  border-top: 1px solid #000000;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* Same override pattern as .product-grid[hidden] above — without this,
   the `display: flex` rule wins over the [hidden] attribute's UA-stylesheet
   `display: none` (author styles beat UA styles regardless of specificity),
   so the shipping/discount/total rows would stay visible with their
   default $0.00 markup before JS ever calculates real values. */
.cart-summary-row[hidden] {
  display: none;
}

.cart-checkout-btn {
  display: block;
  width: 100%;
  padding: 16px;
  text-align: center;
  background-color: #000000;
  color: #ffffff;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
}

/* Checkout is now a real, working flow (see js/pages/cart.js) — only the
   genuinely-disabled state (mid-submission) should look disabled. The
   original always-on opacity/not-allowed above dated from when this
   button was permanently non-functional. */
.cart-checkout-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.cart-checkout-btn[hidden] {
  display: none;
}

.cart-checkout-note {
  margin-top: 10px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  color: #999999;
  text-align: center;
}

@media (max-width: 640px) {
  .cart-table thead {
    display: none;
  }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td {
    display: block;
    width: 100%;
  }
  .cart-table tr {
    padding: 16px 0;
  }
}

/* =============================================
   SHOP / PRODUCTS PAGE
   ============================================= */
.shop-hero {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  background-color: #e5e5e5;
}

.shop-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.shop-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.shop-hero-title {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: #000000;
  margin: 0 0 16px 0;
}

.shop-hero-subtitle {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 16px;
  color: #1a1a1a;
  max-width: 560px;
  margin: 0;
}

/* Dark hero images (Headphones, Earbuds, Smartwatch) need white
   text instead of the default black — set per-category via
   config.heroTheme in js/category-config.js */
.shop-hero--dark .shop-hero-title,
.shop-hero--dark .shop-hero-subtitle {
  color: #ffffff;
}

.shop-intro {
  text-align: center;
  padding: 56px 24px 40px;
}

.shop-intro-title {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: #000000;
  margin: 0 0 14px 0;
}

.shop-intro-subtitle {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 15px;
  color: #666666;
}

.shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px 80px;
  align-items: start;
}

/* ---------- SIDEBAR / ACCORDION FILTERS ---------- */
.shop-sidebar {
  border-top: 1px solid #eeeeee;
}

.filter-group {
  border-bottom: 1px solid #eeeeee;
}

.filter-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #000000;
}

.filter-toggle-icon {
  font-size: 16px;
  color: #666666;
}

.filter-group-body {
  padding: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  color: #333333;
  cursor: pointer;
}

.filter-unavailable-note {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  color: #999999;
  font-style: italic;
}

.price-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-filter-input {
  width: 0;
  flex: 1;
  padding: 8px 10px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  border: 1px solid #dddddd;
}

.price-filter-apply {
  margin-top: 12px;
  width: 100%;
  padding: 10px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background-color: #000000;
  color: #ffffff;
}

.price-filter-apply:hover {
  background-color: #222222;
}

/* ---------- TOOLBAR (result count + sort) ---------- */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.shop-result-count {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  color: #666666;
}

.sort-select-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sort-label {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  color: #666666;
}

.sort-select {
  padding: 10px 14px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  border: 1px solid #dddddd;
  background-color: #ffffff;
  color: #000000;
  cursor: pointer;
}

/* ---------- PRODUCT GRID (shop variant) + Add to Cart ---------- */
.shop-product-grid {
  margin-bottom: 40px;
}

.shop-product-grid .product-card {
  width: 100%;
}

.shop-product-grid .product-card-image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
}

.card-wishlist-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  color: #000000;
  transition: transform 0.15s ease, color 0.15s ease;
}

.card-wishlist-btn:hover {
  transform: scale(1.08);
}

.card-wishlist-btn.is-active {
  color: #d3273e;
}

.add-to-cart-btn {
  margin-top: 6px;
  width: 100%;
  padding: 12px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  background-color: #000000;
  color: #ffffff;
  transition: background-color 0.2s ease;
}

.add-to-cart-btn:hover:not(:disabled) {
  background-color: #222222;
}

.add-to-cart-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.load-more-wrap {
  display: flex;
  justify-content: center;
}

.load-more-btn {
  padding: 14px 48px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 1px solid #000000;
  background-color: #ffffff;
  color: #000000;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.load-more-btn:hover {
  background-color: #000000;
  color: #ffffff;
}

@media (max-width: 900px) {
  .shop-layout {
    grid-template-columns: 1fr;
  }
  .shop-hero-title {
    font-size: 34px;
  }
  .shop-intro-title {
    font-size: 30px;
  }
}

/* =============================================
   PRODUCT DETAIL PAGE — first section (real,
   data-driven from products.json)
   ============================================= */
.product-detail {
  display: grid;
  grid-template-columns: minmax(400px, 1fr) 460px;
  gap: 32px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.product-detail-gallery {
  display: flex;
  gap: 16px;
}

.product-gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100px;
  flex-shrink: 0;
}

.gallery-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #f2f2f2;
  border: 2px solid transparent;
}

.gallery-thumb.is-active {
  border-color: #000000;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-gallery-main {
  position: relative;
  flex: 1;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #f2f2f2;
}

.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  color: #000000;
  font-size: 22px;
  line-height: 1;
}

.gallery-nav-btn:hover {
  background-color: #ffffff;
}

.gallery-nav-btn--prev {
  left: 12px;
}

.gallery-nav-btn--next {
  right: 12px;
}

.product-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-detail-title {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 12px 0;
}

.product-detail-price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.product-detail-price-original {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 18px;
  color: #999999;
  text-decoration: line-through;
}

.product-detail-price-sale {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #000000;
}

.product-detail-color-row {
  margin-bottom: 20px;
}

.product-detail-color-label {
  display: block;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 10px;
}

.product-detail-swatches {
  display: flex;
  gap: 10px;
}

.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
  transition: box-shadow 0.15s ease;
}

.color-swatch:hover {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
}

.color-swatch.is-active {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
}

.product-detail-qty-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.product-detail-qty-label {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #000000;
}

.product-detail-cart-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}

.product-detail-add-btn {
  flex: 1;
  width: auto;
  margin-bottom: 0;
}

.product-detail-wishlist-btn {
  flex-shrink: 0;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dddddd;
  color: #000000;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.product-detail-wishlist-btn:hover {
  border-color: #000000;
}

.product-detail-wishlist-btn.is-active {
  color: #d3273e;
  border-color: #d3273e;
}

.product-detail-buy-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 24px;
  padding: 16px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  box-sizing: border-box;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.product-detail-buy-btn:hover {
  background-color: #000000;
  color: #ffffff;
}

.product-detail-blurb {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #666666;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eeeeee;
}

.product-tabs-nav {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 20px;
}

.product-tab-btn {
  padding: 12px 0;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #999999;
  border-bottom: 2px solid transparent;
}

.product-tab-btn.is-active {
  color: #000000;
  border-bottom-color: #000000;
}

.product-tab-panel {
  display: none;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #444444;
}

.product-tab-panel.is-active {
  display: block;
}

@media (max-width: 900px) {
  .product-detail {
    grid-template-columns: 1fr;
  }
  .product-detail-gallery {
    flex-direction: column;
  }
  .product-gallery-thumbs {
    flex-direction: row;
    height: 80px;
    width: 100%;
  }
  .gallery-thumb {
    width: 80px;
    flex-shrink: 0;
  }
}

/* =============================================
   PRODUCT DETAIL PAGE — marketing sections
   (entirely driven by js/product-themes.js)
   ============================================= */
.pd-hero {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: hidden;
  background-color: #000000;
}

.pd-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

.pd-hero .pd-media-slot {
  width: 100%;
  height: 100%;
}

.pd-hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 80px;
  max-width: 800px;
}

.pd-hero-headline {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 20px 0;
}

.pd-hero-paragraph {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #dddddd;
}

.pd-showcase {
  display: flex;
  flex-direction: column;
}

/* Same override pattern as .product-grid[hidden] above — an explicit
   `display` always beats the `hidden` attribute's UA-stylesheet
   `display:none`, regardless of specificity. Needed now that
   js/pages/product.js can hide this section for a product with no
   stored marketing copy. */
.pd-showcase[hidden] {
  display: none;
}

.pd-showcase-card {
  position: relative;
  height: 340px;
  overflow: hidden;
  background-color: #111111;
}

.pd-showcase-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  pointer-events: none;
}

.pd-showcase-media {
  width: 100%;
  height: 100%;
}

.pd-showcase-text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.pd-showcase-text h3 {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  max-width: 600px;
  margin: 0 0 12px 0;
}

.pd-showcase-text p {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #aaaaaa;
}

.pd-tech {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  background-color: #000000;
}

.pd-tech::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 55%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

.pd-tech .pd-media-slot {
  width: 100%;
  height: 100%;
}

.pd-tech-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 80px;
  max-width: 800px;
}

.pd-tech-headline {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 16px 0;
}

.pd-tech-paragraph {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #dddddd;
}

.pd-highlights {
  max-width: 900px;
  margin: 0 auto;
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.pd-highlights[hidden] {
  display: none;
}

.pd-highlight-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.pd-highlight-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.pd-highlight-row p {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  margin: 0;
}

.pd-icon-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

.pd-icon-strip[hidden] {
  display: none;
}

.pd-icon-strip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background-color: #f7f7f7;
}

.pd-icon-strip-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.pd-icon-strip-item span:last-child {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #000000;
}

.pd-promo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.pd-promo-grid[hidden] {
  display: none;
}

.pd-promo-card {
  position: relative;
  height: 260px;
  overflow: hidden;
  background-color: #1a1a1a;
}

.pd-promo-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-promo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 45%);
  pointer-events: none;
}

.pd-promo-card h3 {
  position: absolute;
  left: 24px;
  bottom: 20px;
  z-index: 2;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  max-width: 80%;
  margin: 0;
}

.pd-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
}

.pd-trust-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pd-trust-item strong {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  color: #000000;
}

.pd-trust-item span {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  color: #999999;
}

.pd-brand-story {
  position: relative;
  width: 100%;
  height: 440px;
  overflow: hidden;
  background-color: #000000;
}

.pd-brand-story::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}

.pd-brand-story .pd-media-slot {
  width: 100%;
  height: 100%;
}

.pd-brand-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.pd-brand-headline {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  max-width: 700px;
  margin: 0 0 16px 0;
}

.pd-brand-paragraph {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #dddddd;
  max-width: 700px;
  margin: 0 0 16px 0;
}

.pd-brand-tagline {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #999999;
}

.related-products-section {
  padding: 56px 0 80px;
}

@media (max-width: 768px) {
  .pd-hero-content,
  .pd-tech-content {
    padding: 0 24px;
  }
  .pd-hero-headline {
    font-size: 28px;
  }
  .pd-icon-strip,
  .pd-trust-strip {
    grid-template-columns: 1fr;
  }
  .pd-promo-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   ABOUT PAGE
   ============================================= */
.about-hero {
  width: 100%;
  background-color: #f2f2f2;
  padding: 64px 24px;
}

.about-hero-title {
  max-width: 1600px;
  margin: 0 auto;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 56px;
  font-weight: 800;
  color: #000000;
  line-height: 1.05;
}

.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.about-intro-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.about-intro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-intro-content {
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 64px;
}

.about-intro-content p {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #000000;
  margin: 0 0 20px 0;
}

.about-intro-content p:last-child {
  margin-bottom: 0;
}

.about-story-heading-wrap {
  background-color: #f2f2f2;
  padding: 64px 64px 40px;
}

.about-eyebrow {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #444444;
  margin: 0 0 20px 0;
}

.about-eyebrow--light {
  color: #ffffff;
}

.about-section-heading {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 42px;
  font-weight: 800;
  color: #000000;
  margin: 0;
  max-width: 1600px;
}

.about-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  background-color: #f2f2f2;
  padding: 40px 64px;
  border-bottom: 2px solid #ffffff;
}

.about-info-row--last {
  border-bottom: none;
}

.about-info-row-title h3 {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: #000000;
  margin: 0 0 6px 0;
}

.about-info-row-subtitle {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  color: #666666;
  margin: 0;
}

.about-info-row-text {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #333333;
  margin: 0;
  align-self: center;
}

.about-values-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 64px;
}

.about-values-left .about-section-heading {
  margin: 0 0 32px 0;
}

.about-values-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-top: 32px;
}

.about-values-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-values-right {
  display: flex;
  flex-direction: column;
}

.about-value-card {
  padding: 32px 0;
  border-bottom: 1px solid #eeeeee;
}

.about-value-card:first-child {
  padding-top: 0;
}

.about-value-card h3 {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 10px 0;
}

.about-value-card p {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #555555;
  margin: 0;
}

.about-summary-banner {
  position: relative;
  width: 100%;
  min-height: 420px;
  overflow: hidden;
  background-color: #000000;
}

.about-summary-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  position: absolute;
  inset: 0;
}

.about-summary-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 64px;
}

.about-summary-text {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 20px;
  line-height: 1.6;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

@media (max-width: 900px) {
  .about-hero-title {
    font-size: 36px;
  }
  .about-intro,
  .about-info-row,
  .about-values-section {
    grid-template-columns: 1fr;
  }
  .about-story-heading-wrap,
  .about-info-row,
  .about-values-section,
  .about-intro-content {
    padding-left: 24px;
    padding-right: 24px;
  }
  .about-section-heading {
    font-size: 30px;
  }
}

/* =============================================
   CONTACT PAGE
   ============================================= */
.contact-hero {
  max-width: 900px;
  margin: 0 auto;
  padding: 72px 24px 32px;
  text-align: center;
}

.contact-eyebrow {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #444444;
  margin: 0 0 20px 0;
}

.contact-hero-title {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: #000000;
  line-height: 1.1;
  margin: 0 0 24px 0;
}

.contact-hero-subtitle {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #666666;
  margin: 0;
}

.contact-info-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px;
  text-align: center;
}

.contact-info-col h2 {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #000000;
  margin: 0 0 16px 0;
}

.contact-info-col p {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #333333;
  margin: 0 0 14px 0;
}

.contact-info-col p:last-child {
  margin-bottom: 0;
}

.contact-cta-wrap {
  display: flex;
  justify-content: center;
  padding: 24px 24px 72px;
}

.contact-cta-btn {
  display: inline-block;
  background-color: #000000;
  color: #ffffff;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 18px 48px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.contact-cta-btn:hover {
  background-color: #ffffff;
  color: #000000;
  box-shadow: inset 0 0 0 1px #000000;
}

.contact-form-section {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 24px 96px;
}

.contact-form-heading {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: #000000;
  margin: 0 0 16px 0;
}

.contact-form-subtitle {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #666666;
  margin: 0;
}

.contact-form-right {
  background-color: #f7f7f7;
  padding: 40px;
}

.contact-form-intro {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
  margin: 0 0 28px 0;
}

.contact-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-field {
  margin-bottom: 20px;
}

.contact-field label {
  display: block;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 8px;
}

.contact-field input,
.contact-field select {
  width: 100%;
  padding: 12px 14px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  border: 1px solid #cccccc;
  background-color: #ffffff;
  color: #000000;
  box-sizing: border-box;
}

.contact-field input:focus,
.contact-field select:focus {
  outline: none;
  border-color: #000000;
}

.contact-field input.has-error,
.contact-field select.has-error {
  border-color: #b3261e;
}


/* Contact form Details box: same look as the other fields, and taller */
.contact-field textarea {
  width: 100%;
  min-height: 140px;
  padding: 12px 14px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid #cccccc;
  background-color: #ffffff;
  color: #000000;
  box-sizing: border-box;
  resize: vertical;
}

.contact-field textarea:focus {
  outline: none;
  border-color: #000000;
}

.contact-field textarea.has-error {
  border-color: #b3261e;
}

.contact-field-error {
  display: block;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  color: #b3261e;
  margin-top: 6px;
}

.contact-submit-btn {
  width: 100%;
  padding: 16px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  background-color: #000000;
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.contact-submit-btn:hover:not(:disabled) {
  background-color: #222222;
}

.contact-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-form-status {
  margin-top: 16px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  text-align: center;
}

.contact-form-status--success {
  color: #1a7a3c;
}

.contact-form-status--error {
  color: #b3261e;
}

@media (max-width: 900px) {
  .contact-hero-title {
    font-size: 32px;
  }
  .contact-info-columns {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .contact-form-section {
    grid-template-columns: 1fr;
  }
  .contact-field-row {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   BLOG SYSTEM
   ============================================= */
.blog-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.blog-hero-content {
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 64px;
}

.blog-hero-title {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 56px;
  font-weight: 800;
  color: #000000;
  line-height: 1.05;
  margin: 0 0 20px 0;
}

.blog-hero-subtitle {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
  margin: 0;
  max-width: 420px;
}

.blog-hero-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.blog-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-topics-section,
.blog-editorial-section {
  padding: 64px 64px 80px;
  background-color: #f2f2f2;
}

.blog-editorial-section {
  background-color: #ffffff;
}

.blog-topics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.topic-card {
  background-color: #ffffff;
}

.topic-card-media-link {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #e6e6e6;
}

.topic-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.topic-card:hover .topic-card-image {
  transform: scale(1.04);
}

.topic-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-image: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 10px, #e6e6e6 10px, #e6e6e6 20px);
}

.topic-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 0;
}

.topic-card-title {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #000000;
}

.topic-card-btn {
  display: inline-block;
  background-color: #000000;
  color: #ffffff;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  padding: 10px 20px;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.topic-card-btn:hover {
  background-color: #ffffff;
  color: #000000;
  box-shadow: inset 0 0 0 1px #000000;
}

.blog-editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}

.blog-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-card-image-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #f2f2f2;
  margin-bottom: 16px;
}

.blog-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-image {
  transform: scale(1.04);
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.blog-card-author-initial {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #000000;
  color: #ffffff;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-card-meta-text {
  display: flex;
  flex-direction: column;
  font-family: 'Archivo', Arial, sans-serif;
}

.blog-card-author {
  font-size: 12px;
  font-weight: 600;
  color: #000000;
}

.blog-card-date-time {
  font-size: 12px;
  color: #999999;
}

.blog-card-title {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #000000;
  line-height: 1.3;
  margin: 0 0 10px 0;
}

.blog-card-excerpt {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #666666;
  margin: 0;
}

/* ---------- Blog Post detail page ---------- */
.blog-post-header {
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 24px 32px;
  text-align: center;
}

.blog-post-back {
  display: inline-block;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  color: #666666;
  text-decoration: underline;
  margin-bottom: 24px;
}

.blog-post-category {
  display: block;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #666666;
  margin: 0 0 16px 0;
}

.blog-post-title {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 42px;
  font-weight: 800;
  color: #000000;
  line-height: 1.15;
  margin: 0 0 24px 0;
}

.blog-post-meta {
  justify-content: center;
}

.blog-post-cover {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #f2f2f2;
}

.blog-post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-post-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 64px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.8;
  color: #222222;
}

.blog-post-content p {
  margin: 0 0 24px 0;
}

@media (max-width: 900px) {
  .blog-hero {
    grid-template-columns: 1fr;
  }
  .blog-hero-content {
    padding: 40px 24px;
  }
  .blog-hero-title {
    font-size: 34px;
  }
  .blog-topics-section,
  .blog-editorial-section {
    padding: 48px 24px 64px;
  }
  .blog-topics-grid,
  .blog-editorial-grid {
    grid-template-columns: 1fr;
  }
  .blog-post-title {
    font-size: 28px;
  }
}


/* =============================================
   POLICY PAGE DESIGN SYSTEM
   Shared by: Shipping Policy, Return & Refund
   Policy, Privacy Policy, Terms & Conditions.
   One set of reusable components — no page-
   specific duplicated CSS.
   ============================================= */

/* ---------- Policy Hero ---------- */
.policy-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 56px 24px 64px;
  align-items: center;
}

.policy-hero--no-image {
  grid-template-columns: 1fr;
  max-width: 900px;
  text-align: center;
}

.policy-hero-eyebrow {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #666666;
  margin: 0 0 16px 0;
}

.policy-hero-title {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 44px;
  font-weight: 800;
  color: #000000;
  line-height: 1.1;
  margin: 0 0 20px 0;
}

.policy-hero-date {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  color: #999999;
  margin: 0 0 20px 0;
}

.policy-hero-paragraph {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #333333;
  margin: 0;
}

.policy-hero-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #f2f2f2;
}

.policy-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Section wrapper + heading ---------- */
.policy-section {
  padding: 56px 64px;
}

.policy-section--shaded {
  background-color: #f2f2f2;
}

.policy-section--dark {
  background-color: #000000;
  color: #ffffff;
}

.policy-section--centered {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.policy-section-heading {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: inherit;
  margin: 0 0 20px 0;
}

.policy-section-subheading {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: inherit;
  margin: 28px 0 10px 0;
}

.policy-section-subheading:first-child {
  margin-top: 0;
}

.policy-section p {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: inherit;
  margin: 0 0 16px 0;
}

.policy-section p:last-child {
  margin-bottom: 0;
}

.policy-list {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: inherit;
  margin: 0 0 16px 0;
  padding-left: 20px;
}

.policy-list li {
  margin-bottom: 8px;
}

.policy-list li:last-child {
  margin-bottom: 0;
}

/* ---------- Two-column content layout ---------- */
.policy-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.policy-two-col--label-content {
  grid-template-columns: 320px 1fr;
}

/* ---------- Information Cards ---------- */
.policy-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.policy-card-grid--2up {
  grid-template-columns: repeat(2, 1fr);
}

.policy-info-card {
  background-color: #f2f2f2;
  padding: 32px;
}

.policy-info-card h3 {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 12px 0;
}

.policy-info-card p {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
  margin: 0;
}

/* ---------- Notice / Highlight Box ---------- */
.policy-notice-box {
  background-color: #000000;
  color: #ffffff;
  padding: 32px;
}

.policy-notice-box h3 {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0 0 14px 0;
}

.policy-notice-box p {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #dddddd;
  margin: 0;
}

/* ---------- Numbered Steps ---------- */
.policy-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.policy-step-number {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: #000000;
  margin: 0 0 16px 0;
}

.policy-step h3 {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 10px 0;
}

.policy-step p {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
  margin: 0;
}

/* ---------- CTA Section ---------- */
.policy-cta {
  background-color: #000000;
  color: #ffffff;
  text-align: center;
  padding: 64px 24px;
}

.policy-cta-heading {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 34px;
  font-weight: 800;
  margin: 0 0 16px 0;
}

.policy-cta-text {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #cccccc;
  max-width: 600px;
  margin: 0 auto 32px;
}

.policy-cta-btn {
  display: inline-block;
  background-color: #ffffff;
  color: #000000;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 16px 40px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.policy-cta-btn:hover {
  background-color: transparent;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px #ffffff;
}

.policy-divider {
  max-width: 1400px;
  margin: 0 auto;
  border: none;
  border-top: 1px solid #eeeeee;
}

@media (max-width: 900px) {
  .policy-hero,
  .policy-two-col,
  .policy-two-col--label-content,
  .policy-card-grid,
  .policy-steps {
    grid-template-columns: 1fr;
  }
  .policy-section {
    padding: 40px 24px;
  }
  .policy-hero-title,
  .policy-section-heading,
  .policy-cta-heading {
    font-size: 28px;
  }
}

/* =============================================
   AGENT LOCATOR / BECOME A DISTRIBUTOR
   ============================================= */
.process-steps {
  max-width: 1200px;
  margin: 0 auto;
}

.process-step-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid #eeeeee;
}

.process-step-row:first-child {
  border-top: 1px solid #eeeeee;
}

.process-step-number {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #000000;
}

.process-step-title {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #000000;
  margin: 0;
}

.process-step-description {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #666666;
  margin: 0;
}

.partner-card .blog-card-image-wrap {
  aspect-ratio: 16 / 10;
}

.partner-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.partner-card .blog-card-image-wrap {
  margin-bottom: 16px;
}

.partner-card .blog-card-title,
.partner-card .blog-card-excerpt {
  margin-bottom: 8px;
}

.partner-card-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
}

.partner-card-actions .topic-card-btn {
  flex: 1;
  text-align: center;
}

#locator-map {
  z-index: 1;
}

@media (max-width: 768px) {
  .process-step-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* =============================================
   MEMBER AREA
   ============================================= */
.member-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.member-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: fit-content;
}

.member-sidebar-link {
  display: block;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #444444;
  text-decoration: none;
  padding: 12px 16px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}

.member-sidebar-link:hover {
  background-color: #f2f2f2;
  color: #000000;
}

.member-sidebar-link.is-active {
  background-color: #000000;
  color: #ffffff;
}

.member-sidebar-logout {
  margin-top: 12px;
  color: #b3261e;
}

.member-content {
  min-width: 0;
}

.member-dashboard-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}

.member-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #000000;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.member-summary-number {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #000000;
  margin: 0;
}

.member-order-row {
  border: 1px solid #eeeeee;
  padding: 20px;
  margin-bottom: 16px;
}

.member-order-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.member-order-number {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 4px 0;
}

.member-order-items {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  color: #555555;
  margin: 0 0 4px 0;
}

.member-order-date {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  color: #999999;
  margin: 0;
}

.member-order-status-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.member-order-status {
  display: inline-block;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  background-color: #e6e6e6;
  color: #333333;
  text-transform: uppercase;
}

.member-order-status--shipped,
.member-order-status--out-for-delivery {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.member-order-status--delivered {
  background-color: #dcfce7;
  color: #15803d;
}

.member-order-status--processing,
.member-order-status--packed {
  background-color: #fef9c3;
  color: #854d0e;
}

.member-order-status--cancelled {
  background-color: #fee2e2;
  color: #b3261e;
}

.member-order-payment {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  color: #666666;
}

.member-order-total {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #000000;
}

.member-order-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.member-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  background-color: #000000;
  color: #ffffff;
  text-transform: uppercase;
  margin-left: 6px;
  vertical-align: middle;
}

.member-address-card h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.member-address-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.member-address-form-wrap {
  margin-top: 40px;
  padding: 32px;
  background-color: #f7f7f7;
}

.member-items-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 32px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
}

.member-items-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: #666666;
  padding: 10px 8px;
  border-bottom: 2px solid #000000;
}

.member-items-table td {
  padding: 12px 8px;
  border-bottom: 1px solid #eeeeee;
  color: #333333;
}

.member-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 32px;
}

.member-timeline-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  opacity: 0.4;
}

.member-timeline-step.is-complete {
  opacity: 1;
}

.member-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #cccccc;
  flex-shrink: 0;
}

.member-timeline-step.is-complete .member-timeline-dot {
  background-color: #000000;
}

.member-timeline-step.is-cancelled .member-timeline-dot {
  background-color: #b3261e;
}

.member-timeline-label {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #000000;
  margin: 0;
}

.member-timeline-date {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  color: #999999;
  margin: 0;
}

.member-notification-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid #eeeeee;
  margin-bottom: 12px;
}

.member-notification-item.is-unread {
  background-color: #f7f9ff;
  border-color: #c7d6ff;
}

.member-notification-type {
  display: inline-block;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #666666;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.member-notification-message {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  color: #333333;
  margin: 0 0 4px 0;
}

.member-notification-date {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  color: #999999;
  margin: 0;
}

.member-notification-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .member-layout {
    grid-template-columns: 1fr;
  }
  .member-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .member-summary-grid {
    grid-template-columns: 1fr;
  }
  .member-order-main {
    flex-direction: column;
  }
}

/* ---------- Login / Register / OTP tabs ---------- */
.member-auth-tabs {
  display: flex;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 32px;
}

.member-auth-tab {
  flex: 1;
  padding: 14px 0;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #999999;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.member-auth-tab.is-active {
  color: #000000;
  border-bottom-color: #000000;
}

.member-auth-panel {
  text-align: left;
}

/* =============================================
   WISHLIST — Move to Cart / Quick View / Remove
   ============================================= */
.wishlist-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.wishlist-card-actions .add-to-cart-btn {
  width: 100%;
}

/* =============================================
   QUICK VIEW MODAL (reusable)
   ============================================= */
.quick-view-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.quick-view-modal {
  position: relative;
  background-color: #ffffff;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.quick-view-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-view-image-wrap {
  aspect-ratio: 1 / 1;
  background-color: #f2f2f2;
  overflow: hidden;
}

.quick-view-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quick-view-content {
  padding: 32px;
  display: flex;
  flex-direction: column;
}

.quick-view-title {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 8px 0;
}

.quick-view-price {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 16px 0;
}

.quick-view-description {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
  margin: 0 0 20px 0;
}

.quick-view-qty-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.quick-view-qty-row label {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #000000;
}

.quick-view-full-details {
  display: block;
  text-align: center;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  color: #666666;
  text-decoration: underline;
  margin-top: 14px;
}

@media (max-width: 700px) {
  .quick-view-modal {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   COOKIE PREFERENCES MODAL
   Reuses .quick-view-overlay for the backdrop.
   ============================================= */
.cookie-prefs-modal {
  position: relative;
  background-color: #ffffff;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
}

.cookie-pref-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid #eeeeee;
}

.cookie-pref-row h3 {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 4px 0;
}

.cookie-pref-row p {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #666666;
  margin: 0;
}

.cookie-pref-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.cookie-prefs-modal [data-save-cookie-prefs] {
  margin-top: 20px;
}

/* =============================================
   MOBILE NAV DRAWER
   The hamburger button existed with no working
   drawer behind it — nav was completely hidden and
   inaccessible below 768px. This is real, working
   functionality behind an already-styled button,
   not a new design element.
   ============================================= */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 900;
}

.mobile-nav-overlay.is-open {
  display: block;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  max-width: 85vw;
  background-color: #ffffff;
  z-index: 901;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
  padding: 24px;
}

.mobile-nav-drawer.is-open {
  transform: translateX(0);
}

.mobile-nav-close {
  display: block;
  margin-left: auto;
  width: 32px;
  height: 32px;
  font-size: 24px;
  line-height: 1;
  background: none;
  border: none;
  color: #000000;
  margin-bottom: 16px;
}

.mobile-nav-drawer-content {
  display: flex;
  flex-direction: column;
}

.mobile-nav-link {
  display: block;
  padding: 14px 0;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  border-bottom: 1px solid #f0f0f0;
}

.mobile-nav-sublink {
  display: block;
  padding: 12px 0 12px 16px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #555555;
  border-bottom: 1px solid #f0f0f0;
}

.mobile-nav-section-label {
  padding: 18px 0 4px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #999999;
  text-transform: uppercase;
}

/* zouraiz-fix:mobile-header-account-currency - the sign-in/account
   link + currency selector script.js now adds inside the mobile
   drawer. The currency selector is hidden globally below 768px
   (see ".user-avatar-wrapper, .currency-selector" above), so this
   un-hides it specifically inside the drawer and lays it out as a
   plain in-flow block instead of the desktop's floating,
   absolutely-positioned dropdown - there's no header bar for it to
   float under in here. */
.mobile-nav-account-currency {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}
.mobile-nav-drawer-content .currency-selector {
  display: block !important;
  margin-top: 4px;
}
.mobile-nav-drawer-content .currency-btn {
  width: 100%;
  justify-content: space-between;
}
.mobile-nav-drawer-content .currency-dropdown-menu {
  position: static;
  min-width: 0;
  box-shadow: none;
  border: none;
  padding: 0;
}
.mobile-nav-drawer-content .currency-dropdown-menu li a {
  padding: 10px 4px;
}

@media (min-width: 769px) {
  .mobile-nav-overlay,
  .mobile-nav-drawer {
    display: none !important;
  }
}

/* =============================================
   PROMO BANNER — mobile text sizing
   .promo-banner-heading was a fixed 79px with zero
   responsive scaling anywhere in the stylesheet,
   unlike every other large heading on the page —
   causing it to overflow into several huge, wrapped
   lines on phone-width screens. Scaled down to match
   the same breakpoint pattern already used correctly
   by .hero-heading elsewhere in this file.
   ============================================= */
@media (max-width: 1024px) {
  .promo-banner-heading {
    font-size: 48px;
  }
}

@media (max-width: 768px) {
  .promo-banner-heading {
    font-size: 34px;
  }
  .promo-banner-subtitle {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .promo-banner-heading {
    font-size: 26px;
  }
}

/* =============================================
   Additional headings missing mobile scaling —
   found via the same systematic check as the promo
   banner fix above. Smaller base sizes than that one
   (32px/40px vs 79px), but still unscaled, affecting
   Cart, Search, Wishlist, Blog Category, and Contact.
   ============================================= */
@media (max-width: 480px) {
  .page-hero-title {
    font-size: 26px;
  }
  .contact-form-heading {
    font-size: 28px;
  }
}

/* =============================================
   PRODUCT GRID — mobile 2-column layout
   At mobile widths, the 205px minimum card width
   (plus gaps and page padding) doesn't quite fit
   twice, so auto-fill was silently collapsing to a
   single column — used by Search results, category
   pages (Products), and Wishlist.
   ============================================= */
@media (max-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
  }
}

@media (max-width: 380px) {
  .product-grid {
    gap: 16px 10px;
  }
}

/* Homepage: sections whose content comes from Admin stay invisible until
   that content is applied, so the old placeholder images/text never flash
   on refresh. script.js adds html.cms-ready when done; after 5s they show
   anyway as a safety net. */
html:not(.cms-ready) [data-hero-section],
html:not(.cms-ready) [data-tile-section],
html:not(.cms-ready) [data-existing-banner-override],
html:not(.cms-ready) .marquee-track,
html:not(.cms-ready) [data-section-title],
html:not(.cms-ready) [data-section-subtitle],
html:not(.cms-ready) [data-feature-cards-section],
html:not(.cms-ready) [data-newsletter-heading] {
  visibility: hidden;
  animation: zouraizCmsFallback 0s linear 5s forwards;
}

@keyframes zouraizCmsFallback {
  to { visibility: visible; }
}

/* Homepage header banner button: outlined, like the other banner buttons.
   The light tint keeps the text readable on bright banner images. */
.hero-btn {
  background-color: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px #ffffff;
}

.hero-btn:hover {
  background-color: #ffffff;
  color: #000000;
  box-shadow: inset 0 0 0 1px #ffffff;
}

/* Header: the arrow next to the account initial also opens the account menu */
.user-avatar-wrapper .avatar-chevron {
  cursor: pointer;
}


/* zouraiz-fix:smooth-navigation
   Smooth page changes. Browsers that support cross-page view transitions
   (Chrome, Edge, Safari) keep the old page on screen and cross-fade to the
   new one instead of blinking white. Others just get the soft fade-in. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
}

@keyframes zouraizPageIn {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

body { animation: zouraizPageIn 0.25s ease-out; }

/* used just before a currency change reloads the page */
html.zouraiz-leaving body {
  opacity: 0.4;
  transition: opacity 0.16s ease;
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  html.zouraiz-leaving body { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}

/* zouraiz-fix:hidden-means-hidden
   Several rules set an explicit display (flex, inline-block...) on elements
   the page marks as [hidden], which silently cancelled the hiding. That is
   why the account icon + drop-down showed to logged-out visitors, the heart
   showed a "0" badge, and the filter sidebar showed placeholder text. */
[hidden] {
  display: none !important;
}

/* zouraiz-fix:admin-banner-gate
   Admin-managed promo banners (top promo, Hot Selling, Blog to Know More)
   were revealed the moment their text arrived, with an empty box where the
   image was still downloading. Keep them invisible until the page is ready
   (script.js adds html.cms-ready once the images are loaded; after 5s they
   show anyway as a safety net). */
html:not(.cms-ready) [data-admin-homepage-banner],
html:not(.cms-ready) #admin-promo-banner-top {
  visibility: hidden;
  animation: zouraizCmsFallback 0s linear 5s forwards;
}

/* zouraiz-fix:page-banners
   Page banner (Admin > Pages > "Banner Image"): full width, 1600x500 proportions.
   - .policy-hero--banner : pages that use the shared page template (FAQ, New
     Arrivals, Deals and every new page). The image goes on top, the title below.
   - .zouraiz-page-banner : the built-in pages (About, Contact, policies), where
     script.js puts the banner right under the header. */
.zouraiz-page-banner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  aspect-ratio: 1600 / 500;
  overflow: hidden;
  background: #f2f2f2;
}
.zouraiz-page-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.policy-hero--banner {
  display: flex;
  flex-direction: column-reverse;
  max-width: none;
  padding: 0 0 8px;
  gap: 0;
  text-align: center;
}
.policy-hero--banner .policy-hero-media {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  aspect-ratio: 1600 / 500;
}
.policy-hero--banner .policy-hero-title {
  max-width: 900px;
  margin: 32px auto 0;
  padding: 0 24px;
}

/* zouraiz-fix:blog-part8
   Blog page header: held back until Admin's header text/banner has loaded (no
   flash of the old text), with a 3-second safety net. With a banner image the
   header becomes a single centred column under the full-width banner. */
html:not(.blog-hero-ready) .blog-hero {
  visibility: hidden;
  animation: zouraizCmsFallback 0s linear 3s forwards;
}
.blog-hero--banner {
  grid-template-columns: 1fr;
  text-align: center;
}
.blog-hero--banner .blog-hero-media {
  display: none;
}
.blog-hero--banner .blog-hero-content {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  align-items: center;
}
.blog-hero--banner .blog-hero-subtitle {
  max-width: 760px;
  margin: 0 auto;
}
.blog-hero--banner .blog-hero-subtitle p {
  margin: 0 0 12px;
}

/* zouraiz-fix:mobile-header-icons
   Phone header: person icon (sign in / my account) + currency button, next to
   search / heart / cart / menu. The hidden-below-768px rule for these two is
   overridden only for the elements inside the header bar. */
.zouraiz-mobile-account {
  display: none;
}
@media (max-width: 768px) {
  .zouraiz-mobile-account {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #000000;
    flex-shrink: 0;
  }
  .site-header .header-actions .currency-selector {
    display: block;
  }
  .site-header .header-actions .currency-selector .currency-label {
    display: inline;
    font-size: 11px;
    white-space: nowrap;
  }
  .site-header .header-actions .currency-selector .currency-btn {
    padding: 4px 6px;
    gap: 3px;
  }
  .site-header .header-actions .currency-selector .chevron-icon {
    width: 9px;
    height: 9px;
  }
}
@media (max-width: 380px) {
  .site-header .header-container {
    padding: 0 10px;
  }
  .site-header .header-actions {
    gap: 5px;
  }
  .site-header .logo-img {
    height: 24px;
  }
}
@media (max-width: 340px) {
  .site-header .header-actions .wishlist-btn {
    display: none;
  }
}

/* zouraiz-fix:cart-shipping + zouraiz-fix:translate-link
   Cart: "Shipping to" box above the Checkout button. Footer: translate language box. */
.cart-ship-estimate { margin: 14px 0 6px; text-align: left; }
.cart-ship-estimate label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.cart-ship-estimate select { width: 100%; padding: 10px 12px; border: 1px solid #cccccc; font-family: inherit; font-size: 14px; background: #ffffff; color: #000000; }
.cart-ship-note { margin: 8px 0 0; font-size: 13px; color: #2e7d32; }
.cart-ship-note.is-error { color: #c62828; }
.zouraiz-translate { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; }
.zouraiz-translate select { font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 0; max-width: 220px; cursor: pointer; }
.zouraiz-translate select option { color: #000000; background: #ffffff; }

/* zouraiz-fix:translate-colors - footer is black: light text and border for the translate box */
.zouraiz-translate { color: #999999; }
.zouraiz-translate select { color: #cccccc; border-color: #555555; background: #000000; }
.zouraiz-translate select option { color: #000000; background: #ffffff; }

/* zouraiz-fix:wtb-cms
   Optional banner pictures on the Where to Buy page (Admin > Where to Buy): full width, 1600x500. */
.zouraiz-wtb-banner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto 32px;
  aspect-ratio: 1600 / 500;
  overflow: hidden;
  background: #f2f2f2;
}
.zouraiz-wtb-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* zouraiz-fix:billing-css */
.zouraiz-billing { margin-bottom: 16px; }
.zouraiz-billing-same { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; cursor: pointer; }
.zouraiz-billing-same input { width: auto; margin-top: 3px; }
.zouraiz-billing-fields { margin-top: 14px; }
.zouraiz-billing-title { font-family: 'Archivo', Arial, sans-serif; font-size: 16px; margin: 0 0 12px; }
.zouraiz-addr-heading { grid-column: 1 / -1; font-family: 'Archivo', Arial, sans-serif; font-size: 20px; margin: 18px 0 4px; }
.zouraiz-addr-heading:first-child { margin-top: 0; }
.zouraiz-addr-empty { grid-column: 1 / -1; color: #777; font-size: 14px; margin: 0 0 8px; }
.zouraiz-track-panel { margin-top: 22px; max-width: 760px; }
.zouraiz-track-box { border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px 18px; margin-bottom: 14px; background: #fff; }
.zouraiz-track-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.zouraiz-track-row { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
.zouraiz-newsletter-card label { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; margin-top: 8px; }
.zouraiz-newsletter-card input { width: auto; }
@media (max-width: 640px) { .zouraiz-track-grid { grid-template-columns: 1fr; } }

/* zouraiz-fix:highlights-hero-mobile
   1) the 4 small banners under "Trusted by Industry Leaders" come from Admin now: keep them hidden until the
      Admin content is applied (same rule the other homepage blocks use), so the old text never flashes.
   2) phone: the top (hero) banner looks like the other banners - taller, a soft dark layer so the white text
      reads, a smaller heading and the same outlined button. Tablets and desktop are unchanged. */
html:not(.cms-ready) [data-feature-strip] {
  visibility: hidden;
  animation: zouraizCmsFallback 0s linear 5s forwards;
}
@media (max-width: 640px) {
  .hero { height: 620px; }
  .hero-media::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); pointer-events: none; }
  .hero-content { justify-content: center; align-items: center; padding: 0 24px; text-align: center; z-index: 2; }
  .hero-heading { font-size: 26px; line-height: 1.1; letter-spacing: 0; text-transform: none; padding: 0; margin: 0 0 16px 0; width: 100%; max-width: 100%; text-align: center; }
  .hero-subtitle { font-size: 16px; margin: 0 0 28px 0; padding: 0; }
  .hero-btn { background-color: transparent; color: #ffffff; font-size: 14.7px; font-weight: 500; letter-spacing: 1px; padding: 14.9px 37.2px; box-shadow: inset 0 0 0 1px #ffffff; line-height: normal; }
  .hero-btn:hover { background-color: #ffffff; color: #000000; box-shadow: inset 0 0 0 1px #ffffff; }
}

/* zouraiz-fix:no-dim-blink
   Every page used to start at 55% brightness and fade in, and a currency change dimmed the page to 40% before
   reloading. On top of the cross-page fade that made the whole page "blink" on search, cart, currency change and
   every link. The cross-page fade (above) stays; the extra dimming is removed. */
body { animation: none !important; }
html.zouraiz-leaving body { opacity: 1 !important; transition: none !important; }

/* zouraiz-fix:search-smooth
   Search page: the heading shows the right words from the start (it used to say "All Products" for a moment),
   the results area keeps its height while loading so the footer does not jump, and shows "Searching...". */
[data-search-query-label]:not(.zouraiz-ready) {
  visibility: hidden;
  animation: zouraizCmsFallback 0s linear 2.5s forwards;
}
.page-content:has([data-search-results-grid]) { min-height: 60vh; }
[data-search-results-grid]:empty::before {
  content: "Searching…";
  display: block;
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 0;
  color: #777777;
  font-size: 15px;
}

/* zouraiz-fix:blog-buy-button
   The blog "Shop Now" button was white with a hairline border, so it was easy to miss (especially on a phone).
   Now a clear black button; full width on phones. */
.blog-post > a.product-detail-buy-btn[data-buy-now] {
  background-color: #000000;
  color: #ffffff;
  border: 1px solid #000000;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-decoration: none;
}
.blog-post > a.product-detail-buy-btn[data-buy-now]:hover {
  background-color: #ffffff;
  color: #000000;
}
@media (max-width: 767px) {
  .blog-post > a.product-detail-buy-btn[data-buy-now] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: center;
    margin: 24px 0 8px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
  }
}

/* zouraiz-fix:blog-buy-small
   Blog "Shop Now": a small button below the text on phones too (not a line across the whole page). */
@media (max-width: 767px) {
  .blog-post > a.product-detail-buy-btn[data-buy-now] {
    display: inline-block !important;
    width: auto !important;
    text-align: center;
    margin: 20px 0 8px !important;
    padding: 11px 26px !important;
    font-size: 13px !important;
  }
}

/* zouraiz-fix:benefit-icon-image
   A benefit icon uploaded as a picture (instead of an emoji) on the product page. */
.pd-benefit-img { width: 30px; height: 30px; object-fit: contain; display: inline-block; vertical-align: middle; }
.pd-icon-strip-icon .pd-benefit-img { width: 34px; height: 34px; }

/* zouraiz-fix:product-colors
   Product page colour choices (each colour can be sold out on its own), the colour name in the cart, and the new
   sidebar drop-downs on the shop pages. */
.product-detail-swatches.has-real-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.color-chip {
  padding: 9px 16px; border: 1px solid #000; background: #fff; color: #000;
  font: inherit; font-size: 13px; cursor: pointer; line-height: 1.2;
}
.color-chip.is-active { background: #000; color: #fff; }
.color-chip.is-soldout { opacity: 0.45; text-decoration: line-through; cursor: not-allowed; }
.filter-select {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #000; border-radius: 0;
  background: #fff; color: #000; font: inherit; font-size: 14px;
}
.filter-select:disabled { opacity: 0.5; }

/* zouraiz-fix:mobile-polish - phone layout touches */
@media (max-width: 640px) {
  .cart-table td { border-bottom: 0; padding: 8px 0; }
  .cart-table tr { border-bottom: 1px solid #eeeeee; padding: 14px 0; }
  .cart-table td:nth-child(2), .cart-table td:nth-child(3), .cart-table td:nth-child(4) {
    display: flex; justify-content: space-between; align-items: center;
  }
  .cart-table td:nth-child(2)::before, .cart-table td:nth-child(3)::before, .cart-table td:nth-child(4)::before {
    font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: #666666;
  }
  .cart-table td:nth-child(2)::before { content: "Price"; }
  .cart-table td:nth-child(3)::before { content: "Quantity"; }
  .cart-table td:nth-child(4)::before { content: "Total"; }
}
@media (max-width: 900px) {
  .member-sidebar-logout { margin-top: 0; }
}

/* zouraiz-fix:mobile-filters-css - filters fold away on phones; footer links easier to tap */
.shop-filters-toggle { display: none; }
@media (max-width: 900px) {
  .shop-filters-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 12px 16px; margin: 0 0 14px; border: 1px solid #d9dde3; border-radius: 10px;
    background: #fff; color: #000; font-family: 'Archivo', Arial, sans-serif; font-size: 14px;
    font-weight: 700; cursor: pointer;
  }
  .shop-sidebar:not(.is-open) { display: none; }
}
@media (max-width: 640px) {
  .footer-link-list li a { display: inline-block; padding: 6px 0; }
}

/* zouraiz-fix:online-payments-css - payment method choice at checkout */
.zpay-box { margin: 0 0 18px; padding: 14px 16px; border: 1px solid #d9d9d9; border-radius: 8px; background: #fafafa; }
.zpay-title { margin: 0 0 6px; font-family: 'Archivo', Arial, sans-serif; font-size: 15px; font-weight: 700; }
.zpay-option { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-weight: 400; cursor: pointer; }
.zpay-option input { width: auto; margin: 0; flex: none; }
.zpay-test { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

/* zouraiz-fix:footer-payments-css - "We accept" strip in the footer */
.footer-payments { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0 auto; padding: 22px 16px 4px; max-width: 900px; }
.footer-payment-badge { background: #fff; color: #111; border-radius: 6px; padding: 5px 11px; font-family: 'Archivo', Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: .02em; }
.footer-payments--image { padding-top: 22px; }
.footer-payments--image img { display: block; max-width: 100%; height: 30px; width: auto; background: #fff; border-radius: 8px; padding: 6px 12px; box-sizing: content-box; }

/* zouraiz-fix:tap-targets-css - phones: bigger tap areas, same look */
@media (max-width: 640px) {
  header .icon-btn, header .cart-btn, header .hamburger-btn, header .zouraiz-mobile-account, header .currency-btn, header .logo-link { position: relative; }
  header .icon-btn::after, header .cart-btn::after, header .hamburger-btn::after, header .zouraiz-mobile-account::after { content: ""; position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; }
  header .currency-btn::after, header .logo-link::after { content: ""; position: absolute; top: -9px; right: -2px; bottom: -9px; left: -2px; }
  .footer-link-list li a { display: inline-flex; align-items: center; min-height: 36px; padding: 0; }
  .site-footer select { min-height: 40px; }
}

/* zouraiz-fix:round52 */
/* 1. Login / account icon is visible on desktop too (and hidden there once the customer is signed in - the round initial button takes over) */
.zouraiz-mobile-account { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #000000; flex-shrink: 0; }
@media (min-width: 769px) {
  .header-actions:has(.user-avatar-wrapper:not([hidden])) .zouraiz-mobile-account { display: none; }
}
/* password eye */
.z-pw-wrap { position: relative; }
.z-pw-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 6px; cursor: pointer; color: #555555; display: flex; align-items: center; justify-content: center; line-height: 0; }
.z-pw-eye:hover, .z-pw-eye:focus-visible { color: #000000; }
/* 11. Blog: wider description under the heading */
.blog-hero .blog-hero-subtitle { max-width: 1100px !important; width: 100%; }
/* 19. Blog article: centred Shop Now button */
.blog-post > a.product-detail-buy-btn[data-buy-now] { display: block !important; width: fit-content !important; max-width: 100%; margin: 32px auto 8px !important; text-align: center; }
/* 33. Hero Shop now button on phones/tablets: clear white outline, see-through inside */
@media (max-width: 900px) {
  .hero-btn { background-color: transparent !important; box-shadow: inset 0 0 0 2px #ffffff !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }
  .hero-btn:hover { background-color: #ffffff !important; color: #000000 !important; text-shadow: none; }
}

/* zouraiz-fix:round53 */
/* product page: the photo fades in when ready (no empty / broken picture box first) */
img[data-product-main-image] { opacity: 0; transition: opacity 0.25s ease; }
img[data-product-main-image].z-loaded { opacity: 1; }
img[src=""][data-admin-banner-image], img[src=""][data-admin-homepage-banner-image] { visibility: hidden; }

/* zouraiz-fix:banner-titles */
.z-has-banner-text { position: relative; }
.z-has-banner-text::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(rgba(0,0,0,0.30), rgba(0,0,0,0.50)); pointer-events: none; z-index: 1; }
.z-banner-text { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #ffffff; padding: 0 24px; }
.z-banner-title { font-family: 'Archivo', Arial, sans-serif; font-weight: 800; font-size: clamp(26px, 5vw, 52px); line-height: 1.1; color: #ffffff; text-shadow: 0 2px 12px rgba(0,0,0,0.45); }
.z-banner-crumbs { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; font-family: 'Archivo', Arial, sans-serif; font-size: 14px; letter-spacing: 0.4px; margin-bottom: 10px; color: #ffffff; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.z-banner-crumbs a { color: #ffffff; text-decoration: none; opacity: 0.9; }
.z-banner-crumbs a:hover { text-decoration: underline; opacity: 1; }
@media (max-width: 600px) { .z-banner-crumbs { font-size: 12px; margin-bottom: 6px; } .z-banner-text { padding: 0 14px; } }

/* zouraiz-fix:showrooms
   Showrooms / Distributors / Become a Distributor / Track Order: same banner (image on top, title + breadcrumb on it) as the other pages. */
.policy-hero--banner .policy-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.policy-hero--banner > div:not(.policy-hero-media) { max-width: 900px; margin: 0 auto; padding: 32px 24px 0; }
.policy-hero--banner > div:not(.policy-hero-media) > div[style*="display:flex"], .policy-hero--banner > div:not(.policy-hero-media) > div[style*="display: flex"] { justify-content: center; }
.z-banner-only { display: block; max-width: none; padding: 0 0 8px; }
.z-banner-only .policy-hero-media { width: 100%; max-width: 1600px; margin: 0 auto; aspect-ratio: 1600 / 500; }
@media (max-width: 600px) { .policy-hero--banner > div:not(.policy-hero-media) { padding: 24px 16px 0; } }

/* zouraiz-fix:partner-pages-text */
.z-why-img { display: block; width: 72px; height: 72px; object-fit: contain; margin: 0 auto 16px; }

/* zouraiz-fix:checkout-polish
   Cart > Shipping & Payment: a tidier, less bulky form (card look, smaller fields, short fields side by side, small section titles)
   and a Terms & Conditions pop-up that closes back to the checkout. */
.checkout-panel { max-width: 720px !important; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 22px 22px 18px; box-sizing: border-box; }
.checkout-panel h2 { font-size: 18px !important; margin-bottom: 12px !important; }
.checkout-panel .contact-field { margin-bottom: 11px; }
.checkout-panel .contact-field label { font-size: 12px; margin-bottom: 4px; }
.checkout-panel input[type="text"], .checkout-panel input[type="tel"], .checkout-panel input[type="email"], .checkout-panel select { padding: 9px 12px; font-size: 14px; }
.checkout-panel .contact-field-row { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.checkout-panel .z-co-sub { font-family: 'Archivo', Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #555555; margin: 14px 0 8px; padding-bottom: 6px; border-bottom: 1px solid #eeeeee; }
.checkout-panel .z-co-sub:first-of-type { margin-top: 0; }
@media (max-width: 600px) { .checkout-panel { padding: 16px 14px 14px; margin-left: -4px; margin-right: -4px; } .checkout-panel .contact-field-row { gap: 8px !important; } }
.z-terms-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.z-terms-box { background: #ffffff; width: 100%; max-width: 860px; height: 85vh; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
.z-terms-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e5e5; font-family: 'Archivo', Arial, sans-serif; font-weight: 700; }
.z-terms-close { border: 0; background: #000000; color: #ffffff; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-family: 'Archivo', Arial, sans-serif; font-size: 13px; }
.z-terms-frame { flex: 1; width: 100%; border: 0; }
.checkout-panel [data-apply-coupon] { margin-top: 0 !important; align-self: end; height: 38px; padding-top: 0; padding-bottom: 0; }

/* zouraiz-fix:content-tables
   Tables made in Admin > Pages / Blogs (Deals, About ...) now show with lines, padding and a heading row. */
.policy-section table:not([class]), [data-page-content] table:not([class]), .blog-article-body table:not([class]) { width: 100%; max-width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; display: block; overflow-x: auto; }
.policy-section table:not([class]) th, .policy-section table:not([class]) td, [data-page-content] table:not([class]) th, [data-page-content] table:not([class]) td, .blog-article-body table:not([class]) th, .blog-article-body table:not([class]) td { border: 1px solid #cfcfcf; padding: 10px 14px; text-align: left; vertical-align: top; min-width: 90px; }
.policy-section table:not([class]) th, [data-page-content] table:not([class]) th, .blog-article-body table:not([class]) th { background: #f2f2f2; font-weight: 700; }
.policy-section table:not([class]) tbody tr:nth-child(even) td, [data-page-content] table:not([class]) tbody tr:nth-child(even) td, .blog-article-body table:not([class]) tbody tr:nth-child(even) td { background: #fafafa; }


/* zouraiz-fix:icon-pictures */
.z-icon-img { display: block; width: 64px; height: 64px; object-fit: contain; margin: 0 auto; }
.z-icon-img--sm { width: 44px; height: 44px; }

/* zouraiz-fix:color-pictures */
.color-chip { display: inline-flex; align-items: center; gap: 8px; }
.color-chip-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid #cfcfcf; flex: 0 0 auto; background: #fff; }
.color-chip.is-active .color-chip-img { border-color: #fff; }

/* zouraiz-fix:page-banners-seo */
.z-banner-slogan { margin-top: 12px; max-width: 760px; font-family: 'Archivo', Arial, sans-serif; font-size: clamp(14px, 2.2vw, 20px); line-height: 1.4; color: #ffffff; text-shadow: 0 1px 8px rgba(0,0,0,0.55); }

/* zouraiz-fix:footer-payment-logos */
.footer-payments:not([data-z-ok]) { visibility: hidden; }
.footer-payments--logos { flex-direction: column; gap: 12px; padding: 22px 16px 4px; }
.footer-payments-text { margin: 0; text-align: center; color: #ffffff; opacity: .9; font-family: 'Archivo', Arial, sans-serif; font-size: 14px; line-height: 1.4; }
.footer-payments-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.footer-payments-row img { display: block; height: 28px; width: auto; max-width: 96px; object-fit: contain; background: #fff; border-radius: 6px; padding: 5px 10px; box-sizing: content-box; }

/* zouraiz-fix:cms-polish - pages edited in Admin keep their look; no white flash / broken-image boxes while loading */
.policy-two-col[data-page-region]{display:block}
.policy-section [data-page-region] h3,.policy-section[data-page-region] h3{margin:26px 0 8px;line-height:1.3}
.policy-section [data-page-region]>h3:first-child,.policy-section[data-page-region]>h3:first-child{margin-top:0}
.policy-section [data-page-region] p,.policy-section[data-page-region] p{margin:0 0 12px;line-height:1.7}
.policy-section [data-page-region] ul,.policy-section[data-page-region] ul{margin:0 0 14px}
/* About page */
.about-intro-content[data-page-region] p{font-size:16px;line-height:1.7;color:#333;margin:0 0 14px;max-width:900px}
.about-story-heading-wrap[data-page-region]>p:first-child,.about-values-left [data-page-region="values-heading"]>p:first-child{font-size:14px;font-weight:500;color:#444;margin:0 0 20px}
.about-story-heading-wrap[data-page-region]>h3:first-of-type,[data-page-region="values-heading"]>h3:first-of-type{font-size:42px;font-weight:800;line-height:1.15;margin:0 0 18px}
.about-story-heading-wrap[data-page-region]>h3:not(:first-of-type){font-size:22px;font-weight:700;margin:28px 0 8px}
.about-story-heading-wrap[data-page-region]>p:not(:first-child),[data-page-region="values-heading"]>p:not(:first-child){font-size:16px;line-height:1.7;color:#333;margin:0 0 12px;max-width:900px}
.about-info-row[data-page-region]{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;align-items:start}
.about-info-row[data-page-region]>h3{grid-column:1;grid-row:1;font-size:26px;font-weight:600;margin:0 0 8px}
.about-info-row[data-page-region]>p:nth-of-type(1){grid-column:1;grid-row:2;font-size:14px;color:#666;margin:0}
.about-info-row[data-page-region]>p:nth-of-type(2){grid-column:2;grid-row:1/span 2;align-self:center;font-size:15px;line-height:1.7;color:#333;margin:0}
.about-values-right[data-page-region]>h3{font-size:22px;font-weight:700;margin:28px 0 8px;padding-top:28px;border-top:1px solid #eee}
.about-values-right[data-page-region]>h3:first-child{margin-top:0;padding-top:0;border-top:0}
.about-values-right[data-page-region]>p{font-size:15px;line-height:1.6;color:#555;margin:0}
.about-summary-content[data-page-region] p{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45);margin:0 0 10px}
.about-summary-content[data-page-region]>p:first-child{font-size:14px}
.about-summary-content[data-page-region]>p:nth-child(2){font-size:20px;font-weight:600;line-height:1.6}
@media(max-width:768px){
 .about-info-row[data-page-region]{display:block}
 .about-info-row[data-page-region]>p:nth-of-type(2){margin-top:10px}
 .about-story-heading-wrap[data-page-region]>h3:first-of-type,[data-page-region="values-heading"]>h3:first-of-type{font-size:30px}
}
/* Blog hero text can use the full width */
.blog-hero--banner .blog-hero-content{max-width:1200px}
/* loading polish: no broken-image box, soft placeholder instead of white */
@keyframes zShimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
img[src=""],img:not([src]){visibility:hidden}
.shop-hero:has(img.shop-hero-image[src=""]){min-height:260px;background:#f2f2f2}
.product-gallery-main:has(img[data-product-main-image][src=""]){min-height:380px;background:linear-gradient(90deg,#f2f2f2 25%,#fafafa 50%,#f2f2f2 75%);background-size:800px 100%;animation:zShimmer 1.4s infinite linear}
[data-shop-grid]:empty{min-height:420px;background:linear-gradient(90deg,#f2f2f2 25%,#fafafa 50%,#f2f2f2 75%);background-size:800px 100%;animation:zShimmer 1.4s infinite linear}
/* hide CMS-edited text until it has been filled in (4s safety) */
html:not(.z-cms-done) body[data-cms-page-slug] [data-page-region],
html:not(.z-cms-done) body[data-cms-page-slug] [data-page-content],
html:not(.z-cms-done) body[data-cms-page-slug] [data-page-title],
html:not(.z-cms-done) body[data-cms-page-slug] [data-cms-hero]{opacity:0;animation:zCmsShow 0s 4s forwards}
@keyframes zCmsShow{to{opacity:1}}
html.z-cms-done body[data-cms-page-slug] [data-page-region],html.z-cms-done body[data-cms-page-slug] [data-page-content],html.z-cms-done body[data-cms-page-slug] [data-page-title],html.z-cms-done body[data-cms-page-slug] [data-cms-hero]{opacity:1;transition:opacity .15s}

/* zouraiz-fix:cookie-consent */
.zck{position:fixed;left:0;right:0;bottom:0;z-index:100000;display:flex;justify-content:center;padding:14px;pointer-events:none;font-family:'Archivo',Arial,sans-serif}
.zck-card{pointer-events:auto;width:100%;max-width:880px;background:#fff;color:#111;border:1px solid #e3e3e3;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.22);padding:20px 22px;max-height:88vh;overflow:auto}
.zck-title{font-size:17px;font-weight:700;margin:0 0 6px}
.zck-text{margin:0 0 14px;font-size:14px;line-height:1.6;color:#333}
.zck-text a{color:#000;text-decoration:underline}
.zck-opts{margin:0 0 14px;border-top:1px solid #eee}
.zck-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 0;border-bottom:1px solid #eee;cursor:pointer}
.zck-row b{display:block;font-size:14px}
.zck-row small{display:block;font-size:12.5px;color:#666;margin-top:2px;line-height:1.45}
.zck-row input{width:20px;height:20px;accent-color:#000;flex:none}
.zck-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.zck-b{font:inherit;font-size:14px;font-weight:600;padding:11px 18px;border-radius:8px;cursor:pointer;border:1px solid #000;background:#fff;color:#000}
.zck-main,.zck-save{background:#000;color:#fff}
.zck-b:hover{opacity:.85}
.zck [hidden]{display:none!important}
@media(max-width:560px){.zck{padding:8px}.zck-card{padding:16px}.zck-btns{flex-direction:column-reverse}.zck-b{width:100%}}

/* zouraiz-fix:become-distributor */
.z-bd-page section.policy-hero{display:none!important}
/* zouraiz-fix:color-popup */
.zcp{position:fixed;inset:0;z-index:100001;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px;font-family:'Archivo',Arial,sans-serif}
.zcp-card{position:relative;background:#fff;color:#111;border-radius:14px;width:min(92vw,380px);max-height:86vh;overflow:auto;padding:22px;box-shadow:0 12px 40px rgba(0,0,0,.28)}
.zcp-x{position:absolute;right:10px;top:6px;background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:#444}
.zcp-title{font-size:17px;font-weight:700;margin:0 0 4px}
.zcp-name{font-size:13px;color:#666;margin:0 0 14px}
.zcp-list{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.zcp-opt{display:flex;align-items:center;gap:12px;border:1px solid #ddd;border-radius:10px;padding:8px 10px;cursor:pointer}
.zcp-opt.is-on{border-color:#000;box-shadow:inset 0 0 0 1px #000}
.zcp-opt.is-out{opacity:.5;cursor:not-allowed}
.zcp-opt input{position:absolute;opacity:0;pointer-events:none}
.zcp-opt img{width:44px;height:44px;object-fit:cover;border-radius:8px;background:#f2f2f2;flex:none}
.zcp-dot{width:44px;height:44px;border-radius:8px;background:#e8e8e8;flex:none}
.zcp-opt span{display:flex;flex-direction:column;font-size:14px}
.zcp-opt small{font-size:12px;color:#888;margin-top:2px}
.zcp-add{width:100%;font:inherit;font-size:14px;font-weight:700;padding:12px;border:0;border-radius:8px;background:#000;color:#fff;cursor:pointer}
.zcp-add:disabled{background:#999;cursor:not-allowed}
/* zouraiz-fix:hero-btn-light
   Home banner: the SHOP NOW button is white with black text (clearly visible, not dark).
   Tables written in Admin > Pages / Blogs always show their lines, also when they were pasted from Word or Google Docs. */
/* zouraiz-fix:hero-btn-clear (wider than 900 px: transparent button with a clear white outline, like the phone look) */
@media (min-width: 901px) {
.hero .hero-btn { background-color: transparent; color: #ffffff; box-shadow: 0 0 0 2px #ffffff inset; text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.hero .hero-btn:hover { background-color: #ffffff; color: #000000; text-shadow: none; }
}
[data-page-content] table, .blog-article-body table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; display: block; overflow-x: auto; }
[data-page-content] table th, [data-page-content] table td, .blog-article-body table th, .blog-article-body table td { border: 1px solid #cfcfcf !important; padding: 10px 12px !important; text-align: left; vertical-align: top; }
[data-page-content] table th, .blog-article-body table th { background: #f2f2f2; font-weight: 700; }
/* zouraiz-fix:blog-hero-wide - the text under the Blog banner can spread wider */
.blog-hero .blog-hero-content { max-width: 1320px !important; }
.blog-hero .blog-hero-subtitle { max-width: 1240px !important; width: 100%; }

/* zouraiz-fix:loading-polish - no broken-picture icon and no blank space while data loads */
img[src=""] { visibility: hidden; }
@keyframes zshim { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@keyframes zshim-off { to { opacity: 0; visibility: hidden; } }
.shop-product-grid[data-shop-grid]:empty { position: relative; min-height: 460px; }
.product-gallery-main:has(> img[data-product-main-image][src=""]) { position: relative; }
.shop-product-grid[data-shop-grid]:empty::after,
.product-gallery-main:has(> img[data-product-main-image][src=""])::after {
  content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  background: linear-gradient(100deg, #efefef 35%, #f8f8f8 50%, #efefef 65%); background-size: 250% 100%;
  animation: zshim 1.4s linear infinite, zshim-off 0s 12s forwards;
}
[data-product-title]:empty::after {
  content: ""; display: block; height: 1.1em; width: 70%; border-radius: 6px;
  background: linear-gradient(100deg, #efefef 35%, #f8f8f8 50%, #efefef 65%); background-size: 250% 100%;
  animation: zshim 1.4s linear infinite, zshim-off 0s 12s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .shop-product-grid[data-shop-grid]:empty::after, .product-gallery-main:has(> img[data-product-main-image][src=""])::after,
  [data-product-title]:empty::after { animation: none; }
}


/* zouraiz-fix:hide-banner-crumbs - the small "Home > page name" line on the page banners is not shown (the banner keeps its title and slogan) */
.z-banner-crumbs { display: none !important; }