/*
Theme Name: ZipperSells Theme
Description: Custom theme for ZipperSells digital gift card store
Version: 1.10.0
Author: ZipperSells
Text Domain: zippersells-theme
*/

/* =============================================
   DESIGN TOKENS
   ============================================= */
:root {
  --zs-navy:     #1a2332;
  --zs-navy-mid: #22304a;
  /* --zs-red and --zs-gray were bumped slightly darker (from #e62d2d and
     #8a9bb0) to clear the WCAG AA 4.5:1 text-contrast threshold against
     white/light backgrounds — the originals landed at 4.40:1 and 2.84:1,
     failing Lighthouse/PageSpeed's "color-contrast" audit. Both design
     tokens are reused across the whole site, so this one change fixes
     every category tag, price, subtitle, and excerpt at once. */
  --zs-red:      #dc2929;
  --zs-red-dark: #c02020;
  --zs-white:    #ffffff;
  --zs-light:    #f4f6f8;
  --zs-gray:     #64748b;
  --zs-border:   #e2e8f0;
  --zs-text:     #2d3748;
  --zs-radius:   6px;
  --zs-shadow:   0 2px 12px rgba(0,0,0,0.10);
}

/* =============================================
   RESET / BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--zs-light);
  color: var(--zs-text);
}

a { text-decoration: none; color: inherit; }
a:hover { color: var(--zs-red); }
img { max-width: 100%; height: auto; display: block; }

/* Reset browser defaults */
*, *::before, *::after { box-sizing: border-box; }
h1,h2,h3,h4,h5,h6,p,ul,ol,figure { margin: 0; padding: 0; }

/* =============================================
   ANNOUNCEMENT BAR
   ============================================= */
.zs-announcement-bar {
  background: var(--zs-navy);
  color: var(--zs-white);
  font-size: 0.8rem;
  padding: 6px 0;
}
.zs-announcement-bar .zs-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.zs-announcement-bar .zs-ann-links a {
  color: var(--zs-white);
  margin-left: 20px;
  font-size: 0.8rem;
  opacity: 0.9;
}
.zs-announcement-bar .zs-ann-links a:hover { opacity: 1; color: var(--zs-red); }

/* =============================================
   HEADER
   ============================================= */
.zs-header {
  background: var(--zs-white);
  padding: 14px 0;
  box-shadow: var(--zs-shadow);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.zs-header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}
.zs-contact-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--zs-navy);
  font-size: 0.82rem;
}
.zs-contact-info .zs-contact-icon {
  width: 40px; height: 40px;
  background: var(--zs-light);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.zs-contact-info strong { display: block; font-size: 0.95rem; color: var(--zs-navy); }

.zs-search-bar {
  flex: 1;
  display: flex;
  border: 2px solid var(--zs-border);
  border-radius: var(--zs-radius);
  overflow: hidden;
}
.zs-search-bar select {
  border: none;
  padding: 0 12px;
  background: var(--zs-light);
  font-size: 0.85rem;
  color: var(--zs-navy);
  cursor: pointer;
  border-right: 1px solid var(--zs-border);
  outline: none;
  min-width: 140px;
}
.zs-search-bar input {
  flex: 1;
  border: none;
  padding: 0 14px;
  font-size: 0.9rem;
  outline: none;
  background: var(--zs-white);
  color: var(--zs-text);
}
.zs-search-bar input::placeholder { color: var(--zs-gray); }
.zs-search-bar button {
  background: var(--zs-red);
  border: none;
  color: var(--zs-white);
  padding: 0 24px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.zs-search-bar button:hover { background: var(--zs-red-dark); }

.zs-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.zs-cart-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--zs-navy);
  padding: 6px;
}
.zs-cart-count {
  position: absolute;
  top: 0; right: 0;
  background: var(--zs-red);
  color: white;
  font-size: 0.65rem;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}

/* =============================================
   NAVIGATION
   ============================================= */
.zs-nav {
  background: var(--zs-navy);
}
.zs-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 0;
}
.zs-nav ul li a {
  display: block;
  color: var(--zs-white);
  padding: 13px 22px;
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.2s, color 0.2s;
}
.zs-nav ul li a:hover,
.zs-nav ul li.current-menu-item a {
  background: var(--zs-red);
  color: var(--zs-white);
}

/* =============================================
   CONTAINER
   ============================================= */
.zs-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* =============================================
   MAIN LAYOUT (sidebar + content)
   ============================================= */
.zs-main-layout {
  display: flex;
  gap: 0;
  min-height: 500px;
}

/* =============================================
   SIDEBAR
   ============================================= */
.zs-sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--zs-white);
  border-right: 1px solid var(--zs-border);
}
.zs-sidebar-title {
  background: var(--zs-navy);
  color: var(--zs-white);
  padding: 14px 18px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.zs-sidebar ul {
  list-style: none;
  margin: 0; padding: 0;
}
.zs-sidebar ul li {
  border-bottom: 1px solid var(--zs-border);
}
.zs-sidebar ul li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 18px;
  color: var(--zs-navy);
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.zs-sidebar ul li a:hover {
  background: var(--zs-light);
  color: var(--zs-red);
}
.zs-sidebar ul li a .zs-badge {
  font-size: 0.65rem;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 700;
  text-transform: uppercase;
}
.zs-badge-hot  { background: var(--zs-red);  color: white; }
.zs-badge-new  { background: #28a745; color: white; }
.zs-sidebar-arrow { color: var(--zs-gray); font-size: 0.75rem; }

/* =============================================
   HERO SLIDER
   ============================================= */
.zs-hero {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 400px;
}
.zs-slider {
  position: relative;
  width: 100%;
  height: 100%;
}
.zs-slide {
  display: none;
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  align-items: center;
  padding: 40px;
  min-height: 400px;
}
.zs-slide.active { display: flex; }
.zs-slide-content { max-width: 420px; }
.zs-slide-badge {
  display: inline-block;
  background: var(--zs-red);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 3px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.zs-slide-content h2 {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--zs-white);
  line-height: 1.1;
  margin: 0 0 14px;
  text-transform: uppercase;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}
.zs-slide-content p {
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  margin: 0 0 22px;
}
.zs-slide-btn {
  display: inline-block;
  background: var(--zs-red);
  color: white;
  padding: 12px 28px;
  border-radius: var(--zs-radius);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.2s;
}
.zs-slide-btn:hover { background: var(--zs-red-dark); transform: translateY(-1px); color: white; }

.zs-slider-dots {
  position: absolute;
  bottom: 16px;
  left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.zs-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  border: none;
  transition: background 0.2s;
}
.zs-dot.active { background: var(--zs-red); }

/* =============================================
   FEATURES BAR
   ============================================= */
.zs-features-bar {
  background: var(--zs-white);
  border-top: 1px solid var(--zs-border);
  border-bottom: 1px solid var(--zs-border);
  padding: 18px 0;
  margin: 0;
}
.zs-features-grid {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 10px;
}
.zs-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 160px;
}
.zs-feature-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--zs-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  color: var(--zs-red);
}
.zs-feature-item h4 {
  margin: 0 0 2px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--zs-navy);
}
.zs-feature-item p { margin: 0; font-size: 0.75rem; color: var(--zs-gray); }

/* =============================================
   CATEGORY BANNER GRID
   ============================================= */
.zs-category-section {
  padding: 28px 0;
}
.zs-section-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--zs-navy);
  text-transform: uppercase;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--zs-red);
  display: inline-block;
}
.zs-category-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
}
.zs-cat-banner {
  border-radius: var(--zs-radius);
  overflow: hidden;
  position: relative;
  min-height: 160px;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  background-size: cover;
  background-position: center;
  transition: transform 0.2s;
  text-decoration: none;
}
.zs-cat-banner:hover { transform: translateY(-2px); }
.zs-cat-banner.zs-large { grid-row: 1 / 3; min-height: 340px; }

.zs-cat-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.55) 100%);
}
.zs-cat-info { position: relative; z-index: 1; }
.zs-cat-delivery-tag {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(0,0,0,0.7);
  color: var(--zs-white);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 1;
}
.zs-cat-info h3 {
  color: var(--zs-white);
  font-size: 0.9rem;
  font-weight: 800;
  margin: 0 0 4px;
  text-transform: uppercase;
}
.zs-cat-info p {
  color: rgba(255,255,255,0.8);
  font-size: 0.75rem;
  margin: 0 0 10px;
}
.zs-cat-btn {
  display: inline-block;
  background: var(--zs-red);
  color: white;
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  transition: background 0.2s;
}
.zs-cat-btn:hover { background: var(--zs-red-dark); color: white; }

/* Xbox banner */
.zs-xbox { background: linear-gradient(135deg, #1a6b1a 0%, #107c10 100%); }
/* PlayStation banner */
.zs-playstation { background: linear-gradient(135deg, #003087 0%, #00439c 100%); }
/* Nintendo banner */
.zs-nintendo { background: linear-gradient(135deg, #e4000f 0%, #b30000 100%); }
/* Steam banner */
.zs-steam { background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%); }
/* iTunes banner */
.zs-itunes { background: linear-gradient(135deg, #6a0dad 0%, #9b59b6 100%); }

/* =============================================
   PRODUCTS SECTION
   ============================================= */
.zs-products-section {
  padding: 10px 0 32px;
}
.zs-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.zs-product-card {
  background: var(--zs-white);
  border-radius: var(--zs-radius);
  overflow: hidden;
  box-shadow: var(--zs-shadow);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.zs-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.zs-product-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.zs-product-img-placeholder {
  width: 100%; height: 160px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
}
.zs-product-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--zs-red);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 3px;
  text-transform: uppercase;
}
.zs-product-body { padding: 14px; }
.zs-product-body h3 {
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--zs-navy);
  line-height: 1.3;
}
.zs-product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.zs-product-price {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--zs-red);
}
.zs-product-old-price {
  font-size: 0.78rem;
  color: var(--zs-gray);
  text-decoration: line-through;
  margin-right: 6px;
}
.zs-add-to-cart {
  background: var(--zs-navy);
  color: white;
  border: none;
  padding: 7px 14px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.zs-add-to-cart:hover { background: var(--zs-red); }


/* =============================================
   FOOTER
   ============================================= */
.zs-footer {
  background: var(--zs-navy);
  color: rgba(255,255,255,0.8);
  padding: 56px 0 0;
}
.zs-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.6fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
}
.zs-footer-brand .zs-logo-text { color: #fff; }
.zs-footer-brand .zs-logo-text em { color: var(--zs-red); }
.zs-footer-brand p { font-size: 0.88rem; margin: 18px 0; line-height: 1.7; color: rgba(255,255,255,0.6); max-width: 320px; }
.zs-footer-social { display: flex; gap: 10px; margin-top: 20px; }
.zs-social-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-size: 0.9rem;
  transition: background 0.2s, transform 0.2s;
}
.zs-social-btn svg { display: block; }
.zs-social-btn:hover { background: var(--zs-red); color: white; transform: translateY(-2px); }

.zs-footer-col h4 {
  color: var(--zs-white);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0 0 22px;
}
.zs-footer-col ul { list-style: none; margin: 0; padding: 0; }
.zs-footer-col ul li { margin-bottom: 15px; }
.zs-footer-col ul li:last-child { margin-bottom: 0; }
.zs-footer-col ul li a,
.zs-footer-col ul li a:visited,
.zs-footer-col ul li span {
  color: rgba(255,255,255,0.6);
  font-size: 0.86rem;
  transition: color 0.2s;
}
.zs-footer-col ul li a:hover { color: #fff; }

/* Categories: two-column flow within one heading, like a clean nav cluster */
.zs-footer-col-wide ul {
  column-count: 2;
  column-gap: 28px;
}
.zs-footer-col-wide ul li { break-inside: avoid; }

.zs-footer-viewall,
.zs-footer-viewall:visited {
  display: inline-block;
  margin-top: 18px;
  color: rgba(255,255,255,0.6);
  font-size: 0.86rem;
  font-weight: 500;
  transition: color 0.2s;
}
.zs-footer-viewall:hover { color: #fff; }

.zs-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
}
.zs-footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.zs-footer-legal {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: clamp(6px, 2vw, 16px);
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
}
.zs-footer-legal::-webkit-scrollbar { display: none; }
.zs-footer-legal li {
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}
.zs-footer-legal li:not(:last-child)::after {
  content: '';
  position: absolute;
  right: calc(clamp(6px, 2vw, 16px) / -2 - 1px);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,0.18);
}
.zs-footer-legal li a,
.zs-footer-legal li a:visited {
  color: rgba(255,255,255,0.55);
  font-size: clamp(0.5rem, 2vw, 0.8rem);
  transition: color 0.2s;
}
.zs-footer-legal li a:hover { color: var(--zs-red); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .zs-products-grid { grid-template-columns: repeat(3, 1fr); }
  .zs-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .zs-sidebar { display: none; }
  .zs-category-grid { grid-template-columns: 1fr 1fr; }
  .zs-cat-banner.zs-large { grid-row: auto; }
  .zs-products-grid { grid-template-columns: repeat(2, 1fr); }
  .zs-footer-grid { grid-template-columns: 1fr 1fr; }
  .zs-features-grid { gap: 16px; }
  .zs-slide-content h2 { font-size: 1.8rem; }
  .zs-header-inner { flex-wrap: wrap; }
  .zs-contact-info { display: none; }
}

@media (max-width: 480px) {
  .zs-products-grid { grid-template-columns: 1fr 1fr; }
  .zs-category-grid { grid-template-columns: 1fr; }
  .zs-footer-grid { grid-template-columns: 1fr; }
  .zs-announcement-bar .zs-ann-links { display: none; }
}
/* ================================================================
   ZIPPERSELLS — HEADER STYLES
   ================================================================ */

/* Apply Inter font sitewide */
body, input, button, select, textarea {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ----------------------------------------------------------------
   TOP BAR
   ---------------------------------------------------------------- */
.zs-topbar {
  background: #0d1520;
  color: rgba(255,255,255,0.7);
  font-size: 0.75rem;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.zs-topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.zs-topbar-left {
  overflow: hidden;
  flex: 1;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.zs-topbar-marquee {
  display: flex;
  gap: 24px;
  white-space: nowrap;
  animation: zs-marquee 28s linear infinite;
}
.zs-topbar-marquee:hover { animation-play-state: paused; }

@keyframes zs-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Duplicate content for seamless loop — done via repeating spans */
.zs-topbar-marquee span { flex-shrink: 0; }

.zs-top-sep {
  color: rgba(255,255,255,0.2);
  margin: 0 4px;
}

.zs-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

.zs-topbar-right a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s;
}
.zs-topbar-right a:hover { color: var(--zs-red); }

/* ----------------------------------------------------------------
   MAIN HEADER
   ---------------------------------------------------------------- */
.zs-header {
  background: #ffffff;
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 999;
  border-bottom: 1px solid #eef0f4;
  transition: box-shadow 0.25s, padding 0.25s;
}

.zs-header-scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  padding: 10px 0;
}

.zs-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ----------------------------------------------------------------
   LOGO
   ---------------------------------------------------------------- */
.zs-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.zs-logo img { max-height: 44px; width: auto; display: block; }

.zs-logo-mark {
  width: 38px;
  height: 38px;
  background: var(--zs-red);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 900;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -1px;
  box-shadow: 0 4px 12px rgba(230,45,45,0.35);
  flex-shrink: 0;
}

.zs-logo-text {
  font-size: 1.45rem;
  font-weight: 900;
  color: #111927;
  letter-spacing: -0.5px;
  line-height: 1;
}
.zs-logo-text em {
  font-style: normal;
  color: var(--zs-red);
}

/* ----------------------------------------------------------------
   SEARCH BAR
   ---------------------------------------------------------------- */
.zs-search {
  flex: 1;
  max-width: 680px;
}

.zs-search-inner {
  display: flex;
  align-items: center;
  border: 2px solid #e8ebf0;
  border-radius: 50px;
  overflow: hidden;
  background: #f8f9fb;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.zs-search-inner:focus-within {
  border-color: var(--zs-red);
  box-shadow: 0 0 0 4px rgba(230,45,45,0.08);
  background: #fff;
}

.zs-search-cat {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.zs-search-cat select {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0 30px 0 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4a5568;
  cursor: pointer;
  outline: none;
  height: 46px;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zs-search-caret {
  position: absolute;
  right: 8px;
  pointer-events: none;
  color: #a0aec0;
}

.zs-search-divider {
  width: 1px;
  height: 22px;
  background: #dde1e9;
  flex-shrink: 0;
}

.zs-search-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0 16px;
  font-size: 0.9rem;
  color: #1a202c;
  outline: none;
  height: 46px;
  min-width: 0;
}
.zs-search-input::placeholder { color: #a0aec0; }

.zs-search-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--zs-red);
  color: #fff;
  border: none;
  padding: 0 22px;
  height: 46px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  border-radius: 0 50px 50px 0;
  flex-shrink: 0;
}
.zs-search-btn:hover { background: #c0202e; }

/* ----------------------------------------------------------------
   HEADER ACTIONS
   ---------------------------------------------------------------- */
.zs-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Phone block */
.zs-action-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  transition: background 0.15s;
  margin-right: 6px;
}
.zs-action-phone:hover { background: #f8f9fb; }

.zs-action-phone-icon {
  width: 36px;
  height: 36px;
  background: #fff5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zs-red);
  flex-shrink: 0;
}

.zs-action-phone-text span {
  display: block;
  font-size: 0.68rem;
  color: #a0aec0;
  font-weight: 500;
}
.zs-action-phone-text strong {
  display: block;
  font-size: 0.88rem;
  color: #1a202c;
  font-weight: 800;
  line-height: 1.2;
}

/* Icon buttons: wishlist, cart */
.zs-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: #4a5568;
  padding: 8px 12px;
  border-radius: 10px;
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.zs-action-btn:hover { background: #f8f9fb; color: var(--zs-red); }

.zs-action-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: #a0aec0;
}

/* Cart specifically */
.zs-cart-action {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  background: #f8f9fb;
  border: 1px solid #eef0f4;
  padding: 8px 14px;
  border-radius: 10px;
}
.zs-cart-action:hover { background: #fff5f5; border-color: var(--zs-red); color: var(--zs-red); }

.zs-cart-icon-wrap,
.zs-wishlist-icon-wrap {
  position: relative;
  flex-shrink: 0;
}

.zs-wishlist-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--zs-red);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  line-height: 1;
}

.zs-cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--zs-red);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  line-height: 1;
}

.zs-cart-text span {
  display: block;
  font-size: 0.68rem;
  color: #a0aec0;
  font-weight: 500;
  line-height: 1.2;
}
.zs-cart-text strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  color: #1a202c;
  line-height: 1.2;
}

/* Mobile toggle */
.zs-mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.15s;
}
.zs-mobile-toggle:hover { background: #f8f9fb; }
.zs-mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #1a202c;
  border-radius: 2px;
  transition: all 0.2s;
}

/* ----------------------------------------------------------------
   NAVIGATION BAR
   ---------------------------------------------------------------- */
.zs-nav {
  background: #111927;
  border-bottom: 2px solid rgba(230,45,45,0.25);
  position: sticky;
  top: 74px;
  z-index: 998;
}

.zs-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zs-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
}

.zs-nav-list li { position: relative; }

.zs-nav-list li a {
  display: block;
  color: rgba(255,255,255,0.82);
  padding: 14px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  position: relative;
}

.zs-nav-list li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--zs-red);
  transition: left 0.2s, right 0.2s;
}

.zs-nav-list li a:hover,
.zs-nav-list li.current-menu-item > a {
  color: #fff;
  background: rgba(255,255,255,0.05);
}

.zs-nav-list li a:hover::after,
.zs-nav-list li.current-menu-item > a::after {
  left: 0;
  right: 0;
}

.zs-nav-extras {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 0 4px;
}

.zs-nav-offer {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}

/* ----------------------------------------------------------------
   MOBILE NAV DRAWER
   ---------------------------------------------------------------- */
.zs-mobile-nav {
  position: fixed;
  top: 0;
  left: -100%;
  width: min(320px, 85vw);
  height: 100vh;
  background: #0f1923;
  z-index: 10000;
  transition: left 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.zs-mobile-nav.open { left: 0; }

.zs-mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: #0a1118;
}

.zs-mobile-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 1.6rem;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.zs-mobile-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

.zs-mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  flex: 1;
}
.zs-mobile-nav-list li { border-bottom: 1px solid rgba(255,255,255,0.05); }
.zs-mobile-nav-list li a {
  display: block;
  padding: 14px 22px;
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, padding-left 0.15s;
}
.zs-mobile-nav-list li a:hover {
  background: rgba(230,45,45,0.12);
  color: #fff;
  padding-left: 28px;
}

.zs-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(2px);
}
.zs-mobile-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .zs-action-phone { display: none; }
  .zs-search { max-width: none; }
}

/* Mobile search row — hidden on desktop */
.zs-mobile-search-row { display: none; }

/* Belt-and-braces: force the drawer/overlay closed above the mobile
   breakpoint regardless of their .open class — the JS also closes it on
   resize, but .open alone (left:0) has no width guard of its own, so
   without this a drawer left open while narrow stays open if the window
   is then widened back past 768px. */
@media (min-width: 769px) {
  .zs-mobile-nav.open,
  .zs-mobile-overlay.open { display: none !important; }
}

@media (max-width: 768px) {
  /* ---- Header bar ------------------------------------------- */
  .zs-topbar  { display: none; }
  .zs-header  { padding: 10px 0 0; } /* no bottom padding — search row handles it */

  .zs-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between; /* logo LEFT, actions RIGHT */
    padding: 0 14px 10px;
    gap: 0;
  }

  /* Logo stays left, no flex-grow needed */
  .zs-logo { flex-shrink: 0; }
  .zs-logo-text { font-size: 1.15rem; }

  /* Desktop search hidden */
  .zs-search-desktop { display: none; }

  /* Actions group: right-aligned, no gap from logo */
  .zs-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
  }

  /* Hide desktop-only items */
  .zs-action-phone  { display: none; }

  /* Wishlist: show on mobile, icon only */
  .zs-wishlist-btn  { display: flex; padding: 7px 8px; }
  .zs-wishlist-btn .zs-action-label { display: none; }

  /* Cart: icon + count only */
  .zs-cart-text { display: none; }
  .zs-cart-action {
    flex-direction: row;
    padding: 7px 10px;
    border-radius: 10px;
    background: #f8f9fb;
    border: 1px solid #eef0f4;
    gap: 0;
  }

  /* Hamburger */
  .zs-mobile-toggle { display: flex; }

  /* ---- Mobile search row (Row 2) ---------------------------- */
  .zs-mobile-search-row {
    display: block;
    padding: 0 14px 10px;
    border-top: 1px solid #f0f2f5;
  }

  .zs-search-mobile {
    width: 100%;
  }

  .zs-search-mobile .zs-search-inner {
    border-radius: 8px;
    border-width: 1.5px;
    height: 40px;
  }

  .zs-search-mobile .zs-search-input {
    height: 40px;
    font-size: 0.85rem;
    padding: 0 12px;
  }

  .zs-search-mobile .zs-search-btn {
    height: 40px;
    padding: 0 16px;
    border-radius: 0 8px 8px 0;
    font-size: 0;  /* hide text, icon only */
  }

  /* ---- Nav: hidden in favor of the hamburger + slide-out drawer -
     Squeezing all 6 links into one row meant ~0.6rem unreadable text.
     The mobile drawer (.zs-mobile-nav) already has the same links (and
     more — full category list), so the standard fix is to hide this
     bar entirely on mobile rather than shrink it to illegibility. */
  .zs-nav { display: none; }
}

@media (max-width: 480px) {
  .zs-logo-mark { width: 30px; height: 30px; font-size: 1rem; border-radius: 6px; }
  .zs-logo-text { font-size: 1rem; }
  .zs-header-inner { padding: 0 12px 8px; }
  .zs-mobile-search-row { padding: 0 12px 8px; }
}
/* Inner pages, single product, archive, 404 styles */

/* PAGE HERO
   Solid colors instead of low-opacity white blends — opacity blending
   against a dark background reads noticeably weaker than the numbers
   suggest, especially at small font sizes. Ratios below are against
   the navy hero background (#1a2332), verified to meet WCAG AA/AAA. */
.zs-page-hero { background:var(--zs-navy); padding:32px 0; position:relative; }
.zs-page-hero .zs-container { position:relative; z-index:1; }
.zs-page-hero .zs-page-title { color:var(--zs-white); font-size:1.5rem; font-weight:800; margin:0 0 6px; }
.zs-page-hero-desc { color:#c3ccd9; margin:4px 0 0; font-size:0.9rem; } /* ~9.7:1 */
.zs-page-hero-desc p { color:inherit; margin:0; font-size:inherit; }
.zs-breadcrumb { display:flex; align-items:center; gap:6px; font-size:0.82rem; color:#aab4c2; } /* ~7.5:1 */
.zs-breadcrumb a { color:#dbe1ea; } /* ~12:1 */
.zs-breadcrumb a:hover { color:#ff6b6b; } /* ~5.7:1 — brand red itself only hits ~3.6:1 here */

/* Category archive hero: per-category gradient background + icon badge.
   A dark scrim sits behind the content so text contrast stays reliable
   regardless of how bright the specific category's gradient is. */
.zs-page-hero-cat::before {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.38);
  z-index:0;
}
.zs-page-hero-cat-row { display:flex; align-items:center; gap:16px; margin-bottom:6px; }
.zs-page-hero-icon {
  flex-shrink:0;
  width:56px; height:56px;
  border-radius:14px;
  background:rgba(255,255,255,0.16);
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem;
}
.zs-page-hero-cat-meta { min-width:0; }
.zs-page-hero-cat-meta .zs-page-title { margin:0 0 4px; }
.zs-page-hero-count {
  display:inline-block;
  background:rgba(255,255,255,0.18);
  color:#fff;
  font-size:0.76rem;
  font-weight:600;
  padding:3px 11px;
  border-radius:20px;
}

/* INNER LAYOUT */
.zs-inner-layout { display:flex; gap:0; padding-top:24px; padding-bottom:40px; align-items:flex-start; }
.zs-main-content { flex:1; min-width:0; }

/* CONTENT BOX */
.zs-content-box { background:var(--zs-white); border-radius:var(--zs-radius); padding:32px; box-shadow:var(--zs-shadow); }
.zs-entry-content h1,.zs-entry-content h2,.zs-entry-content h3 { color:var(--zs-navy); margin-top:1.4em; }
.zs-entry-content p { line-height:1.75; color:var(--zs-text); }
.zs-entry-content a { color:var(--zs-red); }

/* BUTTONS */
.zs-btn-primary { display:inline-block; background:var(--zs-red); color:white !important; padding:11px 26px; border-radius:var(--zs-radius); font-weight:700; font-size:0.9rem; transition:background 0.2s; border:none; cursor:pointer; }
.zs-btn-primary:hover { background:var(--zs-red-dark); }
.zs-btn-outline { display:inline-block; background:transparent; color:var(--zs-navy) !important; padding:10px 24px; border-radius:var(--zs-radius); font-weight:700; font-size:0.9rem; border:2px solid var(--zs-navy); transition:all 0.2s; }
.zs-btn-outline:hover { background:var(--zs-navy); color:white !important; }

/* SINGLE POST */
.zs-sidebar-col { width:230px; flex-shrink:0; display:flex; flex-direction:column; gap:20px; margin-right:28px; }

/* ACCOUNT MENU (My Account sidebar navigation) */
.zs-account-menu { background:#0f1923; border-radius:var(--zs-radius); overflow:hidden; }
.zs-account-menu-header {
  background:var(--zs-red);
  color:#fff;
  padding:14px 18px;
  display:flex; align-items:center; gap:8px;
  font-size:0.85rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.5px;
}
.zs-account-menu-list { list-style:none; margin:0; padding:0; }
.zs-account-menu-list li { border-bottom:1px solid rgba(255,255,255,0.06); }
.zs-account-menu-list li:last-child { border-bottom:none; }
.zs-account-menu-list li a {
  display:flex; align-items:center; gap:10px;
  padding:13px 18px;
  color:rgba(255,255,255,0.75);
  font-size:0.85rem; font-weight:500;
  transition:background 0.15s, color 0.15s;
}
.zs-account-menu-list li a:hover { background:rgba(230,45,45,0.12); color:#fff; }
.zs-account-menu-list li.active a {
  background:rgba(230,45,45,0.16);
  color:#fff;
  border-left:3px solid var(--zs-red);
  padding-left:15px;
}
.zs-account-icon { font-size:1.05rem; width:20px; text-align:center; flex-shrink:0; }

/* WOOCOMMERCE ACCOUNT CONTENT — baseline polish for tables/forms
   on Orders, Downloads, Addresses, Account Details pages.
   WooCommerce's own woocommerce-layout.css floats .woocommerce-MyAccount-content
   right at 68% width, assuming a .woocommerce-MyAccount-navigation sibling fills
   the other 30% on the left — but our template renders nav separately in the
   page sidebar, so that sibling never exists and the assumed-30% gap shows as
   blank space. Reset the float so content uses the full width. */
.zs-account-content { float:none !important; width:auto !important; font-size:0.9rem; color:var(--zs-text); }
.zs-account-content h2, .zs-account-content h3 { color:var(--zs-navy); margin:0 0 14px; }
.zs-account-content table.shop_table,
.zs-account-content table.woocommerce-orders-table {
  width:100%; border-collapse:collapse; margin-bottom:20px;
  background:#fff; border-radius:var(--zs-radius); overflow:hidden;
}
.zs-account-content table.shop_table th,
.zs-account-content table.woocommerce-orders-table th {
  background:var(--zs-light); color:var(--zs-navy);
  font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.3px;
  padding:12px 14px; text-align:left; border-bottom:2px solid var(--zs-border);
}
.zs-account-content table.shop_table td,
.zs-account-content table.woocommerce-orders-table td {
  padding:12px 14px; border-bottom:1px solid var(--zs-border); font-size:0.85rem;
}
.zs-account-content .woocommerce-orders-table__cell-order-actions .button,
.zs-account-content a.button {
  display:inline-block; background:var(--zs-navy); color:#fff !important;
  padding:8px 16px; border-radius:6px; font-size:0.8rem; font-weight:600;
  transition:background 0.15s; margin:2px 0;
}
.zs-account-content a.button:hover { background:var(--zs-red); }
.zs-account-content .woocommerce-Address-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.zs-account-content address {
  background:#fff; border:1px solid var(--zs-border); border-radius:var(--zs-radius);
  padding:16px; font-style:normal; line-height:1.7;
}
.zs-account-content form .form-row { margin-bottom:14px; }
.zs-account-content form label { display:block; font-size:0.83rem; font-weight:600; color:var(--zs-navy); margin-bottom:5px; }
.zs-account-content form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.zs-account-content form select,
.zs-account-content form textarea {
  width:100%; padding:9px 12px; border:1.5px solid var(--zs-border); border-radius:6px;
  font-size:0.88rem; color:var(--zs-navy); background:#fff;
}
.zs-account-content form input:focus, .zs-account-content form select:focus, .zs-account-content form textarea:focus {
  outline:none; border-color:var(--zs-red);
}
.zs-account-content form button[type=submit],
.zs-account-content form input[type=submit] {
  background:var(--zs-red); color:#fff !important; border:none;
  padding:11px 26px; border-radius:var(--zs-radius); font-weight:700; font-size:0.9rem; cursor:pointer;
  transition:background 0.2s;
}
.zs-account-content form button[type=submit]:hover,
.zs-account-content form input[type=submit]:hover { background:var(--zs-red-dark); }
.zs-account-content form fieldset {
  border:1.5px solid var(--zs-border); border-radius:var(--zs-radius);
  padding:20px 20px 6px; margin:8px 0 20px; background:var(--zs-light);
}
.zs-account-content form fieldset legend {
  padding:0 10px; margin-left:-10px; font-size:0.85rem; font-weight:700;
  color:var(--zs-navy); background:var(--zs-light);
}

/* Login / Register split form + Addresses page 2-column layout.
   WooCommerce's own woocommerce-layout.css targets these same .u-column1/.u-column2
   elements with a more specific selector (.woocommerce .col2-set .col-1/.col-2) that
   floats them at 48% width — !important guarantees our grid layout wins instead.
   WC's clearfix also adds ::before/::after (content:" ";display:table) to this
   container for the old float layout; once the container is display:grid those
   pseudo-elements become real (blank) grid items, pushing Billing into column 2
   and wrapping Shipping onto a second row — display:none removes them since a
   grid container needs no float-clearing. */
.zs-account-content .u-columns { display:grid !important; grid-template-columns:1fr 1fr; gap:0 32px; width:100% !important; }
.zs-account-content .u-columns::before, .zs-account-content .u-columns::after { display:none !important; }
.zs-account-content .u-column1, .zs-account-content .u-column2 { float:none !important; width:auto !important; margin:0 !important; }
.zs-account-content .u-column1 { border-right:1px solid var(--zs-border); padding-right:32px; }
.zs-account-content .woocommerce-form-login, .zs-account-content .woocommerce-form-register {
  background:#fff; border:1px solid var(--zs-border); border-radius:var(--zs-radius); padding:20px;
}
.zs-account-content .woocommerce-form-login .form-row:last-child,
.zs-account-content .woocommerce-form-register .form-row:last-child { margin-bottom:0; }
.zs-account-content .woocommerce-form-login__rememberme { display:flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:500; }
.zs-account-content .lost_password { margin-top:10px; font-size:0.83rem; }
.zs-account-content .lost_password a { color:var(--zs-red); }

@media (max-width:768px) {
  .zs-account-content .woocommerce-Addresses { grid-template-columns:1fr; }
  .zs-account-content .u-columns { grid-template-columns:1fr; gap:20px; }
  .zs-account-content .u-column1 { border-right:none; border-bottom:1px solid var(--zs-border); padding-right:0; padding-bottom:20px; }
  .zs-account-content table.shop_table,
  .zs-account-content table.woocommerce-orders-table { font-size:0.78rem; }
}

/* Category menu used directly inside .zs-inner-layout (Blog index, etc.) needs a gap from content —
   scoped to this context only so the homepage hero (cat-menu + slider) is unaffected */
.zs-inner-layout > .zs-cat-menu { margin-right:28px; }

/* aspect-ratio + object-fit is a safety net for any image predating the
   zs-featured (1200x630) size registration in functions.php, or set via a
   URL rather than a proper cropped upload — keeps the hero from displaying
   as an oversized square/odd ratio regardless of the source image's shape. */
.zs-article-thumb img { width:100%; aspect-ratio:1200/630; object-fit:cover; border-radius:var(--zs-radius); margin-bottom:20px; display:block; }
.zs-article-thumb-placeholder {
  width:100%; height:220px; margin-bottom:20px;
  border-radius:var(--zs-radius);
  background:var(--zs-light);
  display:flex; align-items:center; justify-content:center;
  font-size:4.5rem;
}

.zs-article-cat-badge {
  display:inline-block;
  background:var(--zs-red);
  color:#fff !important;
  font-size:0.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
  padding:5px 14px;
  border-radius:20px;
  margin-bottom:14px;
  transition:background 0.2s;
}
.zs-article-cat-badge:hover { background:var(--zs-navy); }

.zs-article-meta { display:flex; gap:16px; flex-wrap:wrap; font-size:0.82rem; color:var(--zs-gray); margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--zs-border); }

/* entry content typography */
.zs-entry-content h4 { color:var(--zs-navy); margin-top:1.2em; }
.zs-entry-content ul,.zs-entry-content ol { margin:0 0 1.2em; padding-left:1.4em; color:var(--zs-text); line-height:1.75; }
.zs-entry-content li { margin-bottom:0.4em; }
.zs-entry-content strong { color:var(--zs-navy); }
.zs-entry-content blockquote { margin:1.4em 0; padding:14px 20px; border-left:4px solid var(--zs-red); background:var(--zs-light); color:var(--zs-text); font-style:italic; border-radius:0 var(--zs-radius) var(--zs-radius) 0; }
.zs-entry-content img { max-width:100%; height:auto; border-radius:var(--zs-radius); }

/* RECENT POSTS WIDGET */
.zs-recent-widget { background:var(--zs-white); border-radius:var(--zs-radius); box-shadow:var(--zs-shadow); overflow:hidden; }
.zs-recent-widget-title { background:var(--zs-navy); color:#fff; padding:14px 18px; font-size:0.85rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.zs-recent-widget ul { list-style:none; margin:0; padding:0; }
.zs-recent-widget ul li { border-bottom:1px solid var(--zs-border); }
.zs-recent-widget ul li:last-child { border-bottom:none; }
.zs-recent-widget ul li a { display:flex; align-items:center; gap:10px; padding:12px 14px; }
.zs-recent-thumb {
  flex-shrink:0; width:44px; height:44px; border-radius:6px;
  background:var(--zs-light); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
}
.zs-recent-thumb img { width:100%; height:100%; object-fit:cover; }
.zs-recent-info { display:flex; flex-direction:column; min-width:0; }
.zs-recent-post-title { font-size:0.8rem; font-weight:600; color:var(--zs-navy); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.zs-recent-widget ul li a:hover .zs-recent-post-title { color:var(--zs-red); }
.zs-recent-post-date { font-size:0.7rem; color:var(--zs-gray); margin-top:2px; }

/* PRICE FILTER WIDGET (shop / category archive) */
.zs-price-widget { background:var(--zs-white); border-radius:var(--zs-radius); box-shadow:var(--zs-shadow); overflow:hidden; }
.zs-price-widget-title { background:var(--zs-navy); color:#fff; padding:14px 18px; font-size:0.85rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.zs-price-widget-body { padding:16px; }
.zs-price-inputs { display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.zs-price-inputs input {
  width:0; flex:1; min-width:0;
  padding:8px 10px; border:1.5px solid var(--zs-border); border-radius:6px;
  font-size:0.83rem; color:var(--zs-navy);
  transition:border-color 0.15s;
}
.zs-price-inputs input:focus { outline:none; border-color:var(--zs-red); }
.zs-price-inputs span { color:var(--zs-gray); flex-shrink:0; }

/* GENERIC SIDEBAR WIDGETS (Search, Recent Posts, Recent Comments, etc.) */
.zs-shop-widgets { display:flex; flex-direction:column; gap:20px; }
.zs-widget { background:var(--zs-white); border-radius:var(--zs-radius); box-shadow:var(--zs-shadow); overflow:hidden; }
.zs-widget-title { background:var(--zs-navy); color:#fff; margin:0; padding:14px 18px; font-size:0.85rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.zs-widget > form,
.zs-widget > ul,
.zs-widget > p,
.zs-widget > div:not(.zs-widget-title) { padding:16px 18px; margin:0; }

.zs-widget ul { list-style:none; }
.zs-widget ul li { padding:9px 0; border-bottom:1px solid var(--zs-border); font-size:0.83rem; line-height:1.4; }
.zs-widget ul li:last-child { border-bottom:none; padding-bottom:0; }
.zs-widget ul li a { color:var(--zs-navy); }
.zs-widget ul li a:hover { color:var(--zs-red); }
.zs-widget p { font-size:0.83rem; color:var(--zs-gray); }

.zs-widget .search-form,
.zs-widget .wp-block-search__inside-wrapper { display:flex; gap:8px; }
.zs-widget input[type="search"],
.zs-widget input[type="text"] {
  flex:1; min-width:0; padding:8px 10px;
  border:1.5px solid var(--zs-border); border-radius:6px; font-size:0.83rem;
}
.zs-widget input[type="search"]:focus,
.zs-widget input[type="text"]:focus { outline:none; border-color:var(--zs-red); }
.zs-widget input[type="submit"],
.zs-widget button[type="submit"] {
  background:var(--zs-navy); color:#fff; border:none;
  padding:8px 16px; border-radius:6px; font-weight:600; font-size:0.83rem; cursor:pointer;
  transition:background 0.15s;
}
.zs-widget input[type="submit"]:hover,
.zs-widget button[type="submit"]:hover { background:var(--zs-red); }

/* RELATED POSTS */
.zs-related-posts { margin-top:36px; }
.zs-related-posts-title { font-size:1.2rem; font-weight:800; color:var(--zs-navy); margin:0 0 16px; }

/* PREV/NEXT POST NAVIGATION */
.zs-post-nav-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px; }
.zs-post-nav-card {
  background:var(--zs-white); border-radius:var(--zs-radius); box-shadow:var(--zs-shadow);
  padding:16px 18px; display:flex; flex-direction:column; gap:6px;
  transition:transform 0.2s, box-shadow 0.2s;
}
.zs-post-nav-card:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,0.1); }
.zs-post-nav-next { text-align:right; align-items:flex-end; }
.zs-post-nav-label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--zs-red); }
.zs-post-nav-title { font-size:0.88rem; font-weight:600; color:var(--zs-navy); line-height:1.4; }
.zs-post-nav-card:hover .zs-post-nav-title { color:var(--zs-red); }

/* POST GRID */
.zs-post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.zs-post-card { background:var(--zs-white); border-radius:var(--zs-radius); overflow:hidden; box-shadow:var(--zs-shadow); transition:transform 0.2s, box-shadow 0.2s; display:flex; flex-direction:column; }
.zs-post-card:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,0.13); }
.zs-post-card-img { display:block; height:180px; overflow:hidden; }
.zs-post-card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s; }
.zs-post-card:hover .zs-post-card-img img { transform:scale(1.04); }
.zs-post-card-no-img { background:var(--zs-light); display:flex; align-items:center; justify-content:center; font-size:3rem; color:var(--zs-gray); }
.zs-post-card-body { padding:18px; display:flex; flex-direction:column; flex:1; }
.zs-post-card-cat { display:inline-block; font-size:0.68rem; font-weight:700; color:var(--zs-red); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:6px; }
.zs-post-card-meta { font-size:0.75rem; color:var(--zs-gray); margin-bottom:6px; }
.zs-post-card-title { font-size:1rem; font-weight:700; margin:0 0 8px; line-height:1.3; }
.zs-post-card-title a { color:var(--zs-navy); }
.zs-post-card-title a:hover { color:var(--zs-red); }
.zs-post-card-excerpt { font-size:0.83rem; color:var(--zs-gray); margin:0 0 12px; line-height:1.5; flex:1; }
.zs-post-card-body .zs-btn-outline { align-self:flex-start; margin-top:auto; }

/* PAGINATION */
.zs-pagination { margin-top:28px; display:flex; justify-content:center; gap:6px; flex-wrap:wrap; }
.zs-pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:4px; background:var(--zs-white); color:var(--zs-navy); border:1px solid var(--zs-border); font-size:0.85rem; font-weight:600; transition:all 0.15s; }
.zs-pagination .page-numbers:hover,.zs-pagination .page-numbers.current { background:var(--zs-red); color:white; border-color:var(--zs-red); }
.zs-pagination .page-numbers.dots { background:none; border:none; }
.zs-pagination .page-numbers.next,
.zs-pagination .page-numbers.prev { width:auto; padding:0 16px; white-space:nowrap; }

/* EMPTY STATE */
.zs-empty-state { text-align:center; padding:60px 32px; }
.zs-empty-state>span { font-size:4rem; display:block; margin-bottom:16px; }
.zs-empty-state h2 { color:var(--zs-navy); margin:0 0 10px; }
.zs-empty-state p { color:var(--zs-gray); margin:0 0 20px; }

/* 404 */
.zs-404-hero {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(135deg, var(--zs-navy) 0%, var(--zs-navy-mid) 60%, #2d4468 100%);
  border-radius: var(--zs-radius); box-shadow: var(--zs-shadow);
  padding: 56px 32px 48px; color: #fff;
}
.zs-404-icon { font-size: 3.4rem; margin-bottom: 6px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }
.zs-404-number {
  font-size: 6rem; font-weight: 900; line-height: 1; letter-spacing: -4px;
  color: rgba(255,255,255,0.14); margin: -18px 0 -6px;
}
.zs-404-hero h2 { color: #fff; font-size: 1.5rem; font-weight: 800; margin: 8px 0 12px; }
.zs-404-hero p { color: rgba(255,255,255,0.75); max-width: 460px; margin: 0 auto 26px; line-height: 1.6; }
.zs-404-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.zs-btn-outline-white {
  display: inline-block; background: transparent; color: #fff !important;
  padding: 10px 24px; border-radius: var(--zs-radius); font-weight: 700; font-size: 0.9rem;
  border: 2px solid rgba(255,255,255,0.5); transition: all 0.2s;
}
.zs-btn-outline-white:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.zs-404-search {
  display: flex; max-width: 460px; margin: 0 auto; background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.25); border-radius: var(--zs-radius); overflow: hidden;
}
.zs-404-search input {
  flex: 1; border: none; background: transparent; padding: 12px 16px;
  font-size: 0.9rem; color: #fff;
}
.zs-404-search input::placeholder { color: rgba(255,255,255,0.55); }
.zs-404-search input:focus { outline: none; }
.zs-404-search button {
  border: none; background: var(--zs-red); color: #fff; padding: 0 20px;
  font-size: 1rem; cursor: pointer; transition: background 0.2s;
}
.zs-404-search button:hover { background: var(--zs-red-dark); }

.zs-404-quicklinks { margin-top: 36px; }
.zs-404-quicklinks-title { text-align: center; color: var(--zs-navy); font-size: 1.05rem; font-weight: 800; margin: 0 0 18px; }
.zs-404-cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.zs-404-cat-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 10px; border-radius: var(--zs-radius); color: #fff; text-align: center;
  box-shadow: var(--zs-shadow); transition: transform 0.2s, box-shadow 0.2s;
}
.zs-404-cat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.18); }
.zs-404-cat-icon { font-size: 1.8rem; }
.zs-404-cat-label { font-size: 0.78rem; font-weight: 700; }

@media (max-width: 900px) {
  .zs-404-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .zs-404-hero { padding: 44px 20px 36px; }
  .zs-404-number { font-size: 4.2rem; }
  .zs-404-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .zs-404-search { flex-direction: column; }
  .zs-404-search button { padding: 12px; }
}

/* SHOP TOOLBAR */
.zs-shop-toolbar { display:flex; justify-content:space-between; align-items:center; background:var(--zs-white); padding:12px 18px; border-radius:var(--zs-radius); margin-bottom:18px; box-shadow:var(--zs-shadow); }
.zs-results-count { font-size:0.85rem; color:var(--zs-gray); }
.zs-results-count span { font-weight:700; color:var(--zs-navy); }
.zs-sort-select { border:1px solid var(--zs-border); border-radius:4px; padding:7px 12px; font-size:0.85rem; color:var(--zs-navy); background:var(--zs-light); cursor:pointer; outline:none; }

/* PRODUCT CARD EXTRAS */
.zs-product-cat { font-size:0.72rem; color:var(--zs-red); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; display:block; margin-bottom:4px; }
.zs-product-title { font-size:0.88rem; font-weight:700; margin:0 0 6px; line-height:1.3; color:var(--zs-navy); }
.zs-product-title a { color:inherit; }
.zs-product-title a:hover { color:var(--zs-red); }
.zs-product-price-wrap .woocommerce-Price-amount { color:var(--zs-red); font-weight:800; font-size:1rem; }
.zs-product-price-wrap del .woocommerce-Price-amount { color:var(--zs-gray); font-size:0.8rem; }
.zs-product-thumb-link { display:block; overflow:hidden; height:160px; }
.zs-product-thumb-link img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s; }
.zs-product-card:hover .zs-product-thumb-link img { transform:scale(1.05); }

/* SINGLE PRODUCT */
.zs-product-detail-top { display:grid; grid-template-columns:1fr 1fr; gap:32px; background:var(--zs-white); border-radius:var(--zs-radius); padding:28px; box-shadow:var(--zs-shadow); margin-bottom:28px; }
.zs-product-gallery-main { position:relative; border-radius:var(--zs-radius); overflow:hidden; background:var(--zs-light); }
.zs-product-gallery-main img { width:100%; height:360px; object-fit:contain; }
.zs-product-thumbnails { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.zs-product-thumbnails img { width:64px; height:64px; object-fit:cover; border-radius:4px; border:2px solid var(--zs-border); cursor:pointer; transition:border-color 0.15s; }
.zs-product-thumbnails img:hover,.zs-product-thumbnails img.zs-thumb-active { border-color:var(--zs-red); }
.zs-product-cat-tag { display:inline-block; background:var(--zs-light); color:var(--zs-red); font-size:0.72rem; font-weight:700; padding:3px 10px; border-radius:3px; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; }
.zs-product-cat-tag a { color:var(--zs-red); }
.zs-product-name { font-size:1.6rem; font-weight:900; color:var(--zs-navy); margin:8px 0 10px; line-height:1.2; }
.zs-product-price-big { margin:14px 0; }
.zs-product-price-big .woocommerce-Price-amount { font-size:1.8rem; font-weight:900; color:var(--zs-red); }
.zs-product-price-big del .woocommerce-Price-amount { font-size:1.1rem; color:var(--zs-gray); }
.zs-product-short-desc { color:var(--zs-text); font-size:0.9rem; line-height:1.65; margin:14px 0; border-top:1px solid var(--zs-border); padding-top:14px; }
.zs-stock-in { color:#28a745; font-weight:700; font-size:0.88rem; }
.zs-stock-out { color:var(--zs-red); font-weight:700; font-size:0.88rem; }
.zs-product-stock { margin:12px 0; }
.zs-add-to-cart-wrap { margin:18px 0; }
.zs-add-to-cart-wrap .quantity { display:inline-flex; align-items:center; gap:6px; margin-right:10px; }
.zs-add-to-cart-wrap .qty { width:60px; height:42px; text-align:center; border:2px solid var(--zs-border); border-radius:4px; font-size:1rem; font-weight:700; color:var(--zs-navy); }
.zs-add-to-cart-wrap .single_add_to_cart_button,.woocommerce .single_add_to_cart_button { background:var(--zs-red) !important; color:white !important; border:none !important; padding:12px 30px !important; font-size:0.95rem !important; font-weight:700 !important; border-radius:var(--zs-radius) !important; cursor:pointer; transition:background 0.2s !important; text-transform:uppercase !important; }
.zs-add-to-cart-wrap .single_add_to_cart_button:hover,.woocommerce .single_add_to_cart_button:hover { background:var(--zs-red-dark) !important; }

.zs-add-to-cart-wrap-with-wishlist { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.zs-wishlist-toggle-single {
  position:static;
  display:inline-flex; align-items:center; gap:7px;
  width:auto; height:auto;
  padding:11px 20px;
  border-radius:var(--zs-radius);
  background:#fff;
  border:2px solid var(--zs-border);
  color:var(--zs-navy);
  font-size:0.88rem; font-weight:700;
  box-shadow:none;
}
.zs-wishlist-toggle-single:hover { border-color:var(--zs-red); color:var(--zs-red); transform:none; }
.zs-wishlist-toggle-single.active { border-color:var(--zs-red); color:var(--zs-red); background:#fff5f5; }
.zs-trust-badges { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0; padding:16px; background:var(--zs-light); border-radius:var(--zs-radius); border:1px solid var(--zs-border); }
.zs-product-trust-item { font-size:0.8rem; color:var(--zs-navy); font-weight:600; display:flex; gap:6px; align-items:center; }
.zs-product-meta-info { font-size:0.82rem; color:var(--zs-gray); border-top:1px solid var(--zs-border); padding-top:12px; margin-top:12px; }
.zs-product-meta-info p { margin:4px 0; }
.zs-product-meta-info a { color:var(--zs-red); }

/* PRODUCT TABS */
.zs-product-tabs { background:var(--zs-white); border-radius:var(--zs-radius); box-shadow:var(--zs-shadow); margin-bottom:28px; overflow:hidden; }
.zs-tab-nav { display:flex; border-bottom:2px solid var(--zs-border); background:var(--zs-light); }
.zs-tab-btn { padding:14px 28px; border:none; background:none; cursor:pointer; font-size:0.9rem; font-weight:700; color:var(--zs-gray); border-bottom:3px solid transparent; margin-bottom:-2px; transition:color 0.15s; }
.zs-tab-btn.active,.zs-tab-btn:hover { color:var(--zs-red); }
.zs-tab-btn.active { border-bottom-color:var(--zs-red); }
.zs-tab-panel { display:none; padding:28px; }
.zs-tab-panel.active { display:block; }
.zs-related-products { margin-top:10px; }

/* SIDEBAR WIDGET */
.zs-sidebar-widget { border-top:1px solid var(--zs-border); }
.zs-sidebar-widget ul { list-style:none; margin:0; padding:0; }
.zs-sidebar-widget ul li { border-bottom:1px solid var(--zs-border); padding:10px 18px; font-size:0.82rem; }
.zs-sidebar-widget ul li a { color:var(--zs-navy); }
.zs-sidebar-widget ul li a:hover { color:var(--zs-red); }

/* WOOCOMMERCE NOTICES */
.woocommerce-notices-wrapper { padding:0 0 10px; }
.woocommerce-message,.woocommerce-info { background:var(--zs-navy) !important; color:white !important; border-top-color:var(--zs-red) !important; padding:12px 18px !important; border-radius:var(--zs-radius) !important; margin-bottom:14px !important; }
.woocommerce-message a,.woocommerce-info a { color:var(--zs-red) !important; }
/* Errors get their own red-tinted treatment so they read as distinct from the
   navy success/info notices above, rather than reusing WC's plain default look. */
.woocommerce-error { background:#fdecec !important; color:var(--zs-red-dark) !important; border-top-color:var(--zs-red) !important; padding:12px 18px !important; border-radius:var(--zs-radius) !important; margin-bottom:14px !important; }
.woocommerce-error a { color:var(--zs-red) !important; font-weight:700; }
/* WC's default notice reserves padding-left:3.5em for an icon glyph injected via
   ::before (position:absolute; left:1.5em). Our uniform 12px/18px padding above
   doesn't reserve that space, so the icon overlaps the text — remove it, since
   our navy notice bar doesn't use WC's icon-font style anyway. */
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before { display:none !important; }

/* RESPONSIVE */
@media (max-width:1024px) {
  .zs-post-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .zs-page-hero { padding:22px 0; }
  .zs-page-hero-icon { width:44px; height:44px; font-size:1.4rem; border-radius:10px; }
  .zs-page-hero-cat-row { gap:12px; }
  .zs-inner-layout { flex-direction:column; gap:24px; }
  .zs-sidebar { width:100%; border-right:none; border-bottom:1px solid var(--zs-border); }
  .zs-sidebar-col { width:100%; margin-right:0; }
  .zs-inner-layout > .zs-cat-menu { margin-right:0; }

  /* Content before sidebar on mobile — readers want the article/products first */
  .zs-inner-layout > .zs-main-content { order:1; }
  .zs-inner-layout > .zs-sidebar,
  .zs-inner-layout > .zs-sidebar-col,
  .zs-inner-layout > .zs-cat-menu { order:2; }
  .zs-product-detail-top { grid-template-columns:1fr; }
  .zs-post-grid { grid-template-columns:1fr; }
  .zs-post-nav-cards { grid-template-columns:1fr; }
  .zs-post-nav-next { text-align:left; align-items:flex-start; }
}
/* ================================================================
   ZIPPERSELLS — HOMEPAGE STYLES
   ================================================================ */

/* ----------------------------------------------------------------
   HERO SECTION wrapper
   ---------------------------------------------------------------- */
.zs-hero-section {
  background: #111927;
  border-bottom: 2px solid rgba(255,255,255,0.05);
  position: relative;
  z-index: 1;
}

.zs-hero-wrap {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  height: 460px;
}

/* ----------------------------------------------------------------
   CATEGORY MENU (left panel)
   ---------------------------------------------------------------- */
.zs-cat-menu {
  width: 230px;
  flex-shrink: 0;
  background: #0f1923;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 100;
  height: 460px;
  overflow: visible;
}

.zs-cat-menu-header {
  background: var(--zs-red);
  color: #fff;
  padding: 15px 18px;
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.zs-cat-menu-icon { font-size: 1rem; }

.zs-cat-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* Top-level category rows only (> = direct child) */
.zs-cat-menu-list > li {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex: 1;
  position: relative;
}

.zs-cat-menu-list > li > a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 32px 0 14px;
  position: absolute;
  inset: 0;
  color: rgba(255,255,255,0.82);
  font-size: 0.81rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, padding-left 0.15s;
}

.zs-cat-menu-list > li > a:hover,
.zs-cat-menu-list > li:hover > a {
  background: rgba(230,45,45,0.12);
  color: #fff;
  padding-left: 18px;
}

.zs-cat-icon { font-size: 1rem; flex-shrink: 0; width: 22px; text-align: center; }
.zs-cat-label { flex: 1; }

.zs-cat-badge {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.zs-cat-badge.hot { background: var(--zs-red); color: #fff; }
.zs-cat-badge.new { background: #22c55e; color: #fff; }

/* Arrow on top-level rows only */
.zs-cat-menu-list > li::after {
  content: '›';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.3);
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
  transition: color 0.15s;
}
.zs-cat-menu-list > li:hover::after { color: #fff; }

/* Invisible button over the arrow icon only — keeps the rest of the row
   clickable as the real category link. Desktop opens the submenu on
   hover already; this only handles keyboard/accessibility toggling. */
.zs-cat-arrow-btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
}

.zs-cat-submenu {
  position: absolute;
  left: calc(100% + 2px);
  top: -1px;
  z-index: 999;
  width: 210px;
  background: #1a2332;
  border: 1px solid rgba(255,255,255,0.10);
  border-left: 3px solid var(--zs-red);
  border-radius: 0 6px 6px 6px;
  box-shadow: 6px 6px 24px rgba(0,0,0,0.6);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.15s, transform 0.15s;
}
.zs-has-sub:hover .zs-cat-submenu,
.zs-has-sub.open .zs-cat-submenu {
  pointer-events: auto;
  opacity: 1;
  transform: translateX(0);
}
.zs-has-sub:hover .zs-cat-submenu { display: block; }

.zs-cat-submenu li a {
  display: block;
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, padding-left 0.12s;
}
.zs-cat-submenu li a:hover {
  background: rgba(230,45,45,0.12);
  color: #fff;
  padding-left: 20px;
}

.zs-cat-view-all {
  display: block;
  padding: 12px 16px;
  color: var(--zs-red);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  transition: background 0.15s;
}
.zs-cat-view-all:hover { background: rgba(230,45,45,0.1); color: #ff5555; }

/* ----------------------------------------------------------------
   HERO SLIDER (right panel)
   ---------------------------------------------------------------- */
.zs-hero-slider {
  flex: 1;
  position: relative;
  overflow: hidden;
  height: 460px;
}

.zs-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 48px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.zs-slide.active {
  opacity: 1;
  pointer-events: all;
}

/* Slide backgrounds */

/* Decorative bg pattern */
/* Inner wrapper — fills slide, handles content layout on all breakpoints */
.zs-slide-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 40px 64px;
}

.zs-slide-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 50%, rgba(255,255,255,0.04) 0%, transparent 60%);
  pointer-events: none;
}

/* Gradient scrim over a slide background IMAGE — keeps text legible */
.zs-slide-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Content side */
.zs-slide-content { position: relative; z-index: 2; max-width: 420px; }

.zs-slide-tag {
  display: inline-block;
  background: var(--zs-red);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.zs-slide-content h2 {
  font-size: 2.6rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 14px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.zs-slide-content h2 em {
  font-style: normal;
  color: rgba(255,255,255,0.75);
  font-weight: 700;
  font-size: 0.85em;
  display: block;
}

.zs-slide-content p {
  color: rgba(255,255,255,0.78);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 24px;
}
/* Desktop: show desktop desc, hide mobile desc */
.zs-desc-mobile { display: none; }
.zs-desc-desktop { display: block; }

.zs-slide-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.zs-slide-btn-primary {
  display: inline-block;
  background: var(--zs-red);
  color: #fff;
  padding: 13px 30px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 18px rgba(230,45,45,0.35);
}
.zs-slide-btn-primary:hover {
  background: #c0202e;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(230,45,45,0.5);
  color: #fff;
}

.zs-slide-btn-ghost {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: background 0.2s;
  backdrop-filter: blur(4px);
}
.zs-slide-btn-ghost:hover { background: rgba(255,255,255,0.22); color: #fff; }

/* Visual side (emoji + price bubbles) */
.zs-slide-visual {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.zs-slide-emoji {
  font-size: 7rem;
  line-height: 1;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,0.4));
  animation: zs-float 3s ease-in-out infinite;
}

@keyframes zs-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* Slider navigation arrows */
.zs-slider-prev,
.zs-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  backdrop-filter: blur(4px);
}
.zs-slider-prev { left: 14px; }
.zs-slider-next { right: 14px; }
.zs-slider-prev:hover,
.zs-slider-next:hover { background: var(--zs-red); border-color: var(--zs-red); }

/* Dots */
.zs-slider-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 20;
}
.zs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
}
.zs-dot.active {
  background: var(--zs-red);
  transform: scale(1.3);
}

/* ----------------------------------------------------------------
   TRUST BAR
   ---------------------------------------------------------------- */
.zs-trust-bar {
  background: #fff;
  border-top: 3px solid var(--zs-red);
  border-bottom: 1px solid var(--zs-border);
  padding: 0;
  position: relative;
  z-index: 5;
  clear: both;
}

.zs-trust-grid {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.zs-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  flex: 1;
  min-width: 0;
  position: relative;
}
.zs-trust-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 38px;
  background: var(--zs-border);
}

.zs-trust-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: #fff5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zs-trust-text { min-width: 0; }
.zs-trust-text strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--zs-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zs-trust-text span {
  display: block;
  font-size: 0.74rem;
  color: var(--zs-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----------------------------------------------------------------
   SECTION SHARED STYLES
   ---------------------------------------------------------------- */
.zs-section { padding: 40px 0; }

.zs-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.zs-section-head.zs-center {
  flex-direction: column;
  text-align: center;
  gap: 6px;
}
.zs-section-cta { margin-top: 28px; }
.zs-section-cta.zs-center { display: flex; justify-content: center; }

.zs-section-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--zs-navy);
  margin: 0;
  position: relative;
  padding-left: 14px;
}
.zs-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: var(--zs-red);
  border-radius: 2px;
}

.zs-section-sub { color: var(--zs-gray); margin: 0; font-size: 0.9rem; }

.zs-section-link {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--zs-red);
  text-decoration: none;
  white-space: nowrap;
}
.zs-section-link:hover { color: var(--zs-red-dark); }

/* ----------------------------------------------------------------
   DEAL OF THE DAY
   ---------------------------------------------------------------- */
.zs-deal-section { background: #fff; }

.zs-deal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 24px;
}

.zs-deal-heading-wrap { display: flex; align-items: center; gap: 16px; }

.zs-deal-fire {
  font-size: 2.6rem;
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(220,41,41,0.35));
  animation: zs-deal-pulse 1.8s ease-in-out infinite;
}
@keyframes zs-deal-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

.zs-deal-heading {
  margin: 0;
  font-size: 2rem;
  font-weight: 900;
  color: var(--zs-red);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.1;
}
.zs-deal-subheading { margin: 4px 0 0; color: var(--zs-gray); font-size: 0.92rem; }

.zs-deal-countdown-label {
  display: block;
  text-align: right;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--zs-gray);
  margin-bottom: 6px;
}
.zs-deal-countdown { display: flex; align-items: center; gap: 6px; }
.zs-deal-timebox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--zs-navy);
  border-top: 2px solid var(--zs-red);
  border-radius: 8px;
}
.zs-deal-timebox span { font-size: 1.25rem; font-weight: 900; color: #fff; line-height: 1.2; font-variant-numeric: tabular-nums; }
.zs-deal-timebox label { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.55); margin-top: 2px; }
.zs-deal-colon { color: var(--zs-navy); font-weight: 900; font-size: 1.2rem; }

.zs-deal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.zs-deal-tile {
  position: relative;
  background: linear-gradient(145deg, var(--zs-navy) 0%, var(--zs-navy-mid) 100%);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.zs-deal-tile:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,0.25); }

.zs-deal-tile.has-bg-image { min-height: 320px; justify-content: flex-end; }
.zs-deal-tile-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,15,24,0.92) 0%, rgba(10,15,24,0.55) 45%, rgba(10,15,24,0.15) 75%, transparent 100%);
}

.zs-deal-tile-discount {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--zs-red);
  color: #fff;
  font-weight: 900;
  font-size: 0.8rem;
  padding: 5px 12px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(220,41,41,0.5);
}

.zs-deal-tile-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; position: relative; z-index: 1; }

.zs-deal-tile-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 20px 0;
  padding: 14px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.zs-deal-img { width: 100%; height: 150px; object-fit: contain; display: block; }
.zs-deal-img-placeholder { width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; font-size: 3rem; }

.zs-deal-tile-body { padding: 16px 18px; }
.zs-deal-tile.has-bg-image .zs-deal-tile-body { padding: 40px 18px 16px; }

.zs-deal-name {
  margin: 0 0 8px;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #fff;
}

.zs-deal-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.zs-deal-price .amount { font-size: 0.85rem; }
.zs-deal-price del { order: 2; }
.zs-deal-price del .amount { color: rgba(255,255,255,0.55); font-size: 0.82rem; }
.zs-deal-price ins { order: 1; text-decoration: none; }
.zs-deal-price ins .amount { color: #4ade80; font-weight: 900; font-size: 1.2rem; }
.zs-deal-price .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.zs-deal-btn {
  display: block;
  text-align: center;
  margin: 0 18px 18px;
  background: var(--zs-red);
  color: #fff;
  padding: 11px 20px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
  position: relative;
  z-index: 1;
}
.zs-deal-btn:hover { background: var(--zs-red-dark); color: #fff; transform: translateY(-1px); }
.zs-deal-btn.loading { opacity: 0.6; pointer-events: none; }

@media (max-width: 1024px) {
  .zs-deal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .zs-deal-header { flex-direction: column; align-items: flex-start; }
  .zs-deal-countdown-label { text-align: left; }
  .zs-deal-heading { font-size: 1.5rem; }
  .zs-deal-fire { font-size: 2rem; }
  .zs-deal-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ----------------------------------------------------------------
   PLATFORM / CATEGORY GRID
   ---------------------------------------------------------------- */
.zs-section-cats { background: var(--zs-light); }

.zs-platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.zs-plat-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 200px;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  padding: 20px;
  transition: transform 0.22s, box-shadow 0.22s;
}
.zs-plat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}

.zs-plat-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%);
  transition: opacity 0.25s;
}
.zs-plat-card:hover .zs-plat-overlay { opacity: 0.7; }

.zs-plat-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
  backdrop-filter: blur(4px);
}

.zs-plat-body {
  position: relative;
  z-index: 2;
}

.zs-plat-logo {
  font-size: 2.2rem;
  margin-bottom: 6px;
  display: block;
}

.zs-plat-body h3 {
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 3px;
  text-transform: uppercase;
}

.zs-plat-body p {
  color: rgba(255,255,255,0.78);
  font-size: 0.78rem;
  margin: 0 0 12px;
}

.zs-plat-btn {
  display: inline-block;
  background: var(--zs-red);
  color: #fff;
  padding: 7px 18px;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  transition: background 0.2s;
}
.zs-plat-card:hover .zs-plat-btn { background: #c0202e; }

/* ----------------------------------------------------------------
   PRODUCTS SECTION
   ---------------------------------------------------------------- */
.zs-section-products { background: #fff; }

/* Override WooCommerce shortcode output */
.zs-section-products .woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
}

.zs-section-products .woocommerce ul.products li.product {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  transition: transform 0.2s, box-shadow 0.2s;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
}

.zs-section-products .woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}

.zs-section-products .woocommerce ul.products li.product a img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.zs-section-products .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--zs-navy) !important;
  padding: 12px 14px 4px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.zs-section-products .woocommerce ul.products li.product .price {
  padding: 0 14px 4px !important;
  color: var(--zs-red) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
}

.zs-section-products .woocommerce ul.products li.product .button {
  margin: 0 14px 14px !important;
  display: block !important;
  text-align: center !important;
  background: var(--zs-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 5px !important;
  padding: 9px 0 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  transition: background 0.2s !important;
}

.zs-section-products .woocommerce ul.products li.product .button:hover {
  background: var(--zs-red) !important;
}

/* ----------------------------------------------------------------
   FEATURED PRODUCTS (homepage) — custom query-driven grid
   ---------------------------------------------------------------- */
.zs-feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.zs-feat-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.zs-feat-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,0.13); }

.zs-feat-badge {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 4px 10px;
  border-radius: 4px;
  color: #fff;
}
.zs-feat-badge-sale { background: var(--zs-red); }
.zs-feat-badge-new  { background: #1aa14b; }

/* WISHLIST HEART TOGGLE — overlays the top-right corner of a product card */
.zs-wishlist-toggle {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--zs-navy);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.zs-wishlist-toggle:hover { transform: scale(1.08); color: var(--zs-red); }
.zs-wishlist-toggle.active { color: var(--zs-red); }
.zs-wishlist-toggle.loading { opacity: 0.6; pointer-events: none; }

.zs-feat-img-wrap { display: block; background: var(--zs-light); }
.zs-feat-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform 0.25s;
}
.zs-feat-card:hover .zs-feat-img { transform: scale(1.05); }
.zs-feat-img-placeholder {
  width: 100%; height: 180px;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; background: var(--zs-light);
}

.zs-feat-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.zs-feat-cat {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--zs-red);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.zs-feat-title { font-size: 0.92rem; font-weight: 700; line-height: 1.35; margin: 0; }
.zs-feat-title a { color: var(--zs-navy); }
.zs-feat-title a:hover { color: var(--zs-red); }

.zs-feat-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
  gap: 8px;
}
.zs-feat-price { font-size: 1.02rem; font-weight: 800; color: var(--zs-red); }
.zs-feat-price del { color: var(--zs-gray); font-weight: 500; font-size: 0.8em; margin-right: 4px; }
.zs-feat-price ins { text-decoration: none; }

.zs-feat-btn {
  background: var(--zs-navy);
  color: #fff;
  border: none;
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.zs-feat-btn:hover { background: var(--zs-red); color: #fff; }
.zs-feat-btn.loading { opacity: 0.6; pointer-events: none; }
.zs-feat-btn.added::after { content: ' \2713'; }

/* Fallback placeholder grid */
.zs-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.zs-product-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.zs-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}

.zs-product-img-placeholder {
  width: 100%; height: 160px;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; background: var(--zs-light);
}

.zs-product-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--zs-red);
  color: #fff;
  font-size: 0.62rem; font-weight: 800;
  padding: 3px 9px; border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.zs-product-body { padding: 12px 14px 14px; }
.zs-product-cat { font-size: 0.7rem; color: var(--zs-red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 4px; }
.zs-product-title { font-size: 0.86rem; font-weight: 700; color: var(--zs-navy); margin: 0 0 8px; line-height: 1.3; }
.zs-product-old-price { font-size: 0.75rem; color: var(--zs-gray); text-decoration: line-through; margin-right: 5px; }
.zs-product-price { font-size: 1rem; font-weight: 800; color: var(--zs-red); }

.zs-product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.zs-add-to-cart {
  background: var(--zs-navy);
  color: #fff;
  border: none;
  padding: 7px 13px;
  border-radius: 5px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  display: inline-block;
}
.zs-add-to-cart:hover { background: var(--zs-red); color: #fff; }

/* ----------------------------------------------------------------
   PROMO BANNERS
   ---------------------------------------------------------------- */
.zs-promo-banners { background: var(--zs-light); }

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

.zs-promo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
  padding: 28px 32px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
  position: relative;
}
.zs-promo-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.14); }

.zs-promo-tag {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.zs-promo-content h3 {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 6px;
}
.zs-promo-content p {
  color: rgba(255,255,255,0.7);
  font-size: 0.82rem;
  margin: 0 0 14px;
}
.zs-promo-link {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.25);
  transition: background 0.2s;
}
.zs-promo-card:hover .zs-promo-link { background: rgba(255,255,255,0.28); }

.zs-promo-visual { font-size: 4.5rem; opacity: 0.2; flex-shrink: 0; }

/* ----------------------------------------------------------------
   WHY CHOOSE US
   ---------------------------------------------------------------- */
.zs-why-section { background: #fff; }

.zs-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.zs-why-card {
  text-align: center;
  padding: 28px 20px;
  border-radius: 12px;
  border: 1px solid var(--zs-border);
  background: var(--zs-light);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.zs-why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-color: var(--zs-red);
}

.zs-why-icon {
  font-size: 2.2rem;
  margin-bottom: 14px;
  width: 60px;
  height: 60px;
  background: #fff5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.zs-why-card h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--zs-navy);
  margin: 0 0 8px;
}
.zs-why-card p {
  font-size: 0.82rem;
  color: var(--zs-gray);
  margin: 0;
  line-height: 1.6;
}


/* ----------------------------------------------------------------
   NEWSLETTER
   ---------------------------------------------------------------- */
.zs-newsletter {
  background: linear-gradient(135deg, #111927 0%, #1a2b3c 100%);
  padding: 36px 0;
}

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

.zs-newsletter-text { display: flex; align-items: flex-start; gap: 14px; }

.zs-newsletter-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.zs-newsletter-inner h3 {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 6px;
}
.zs-newsletter-inner p {
  color: rgba(255,255,255,0.65);
  font-size: 0.86rem;
  margin: 0;
}

.zs-newsletter-form {
  display: flex;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  min-width: 380px;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.15);
}
.zs-newsletter-form input {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: none;
  padding: 13px 16px;
  color: #fff;
  font-size: 0.9rem;
  outline: none;
}
.zs-newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
.zs-newsletter-form button {
  background: var(--zs-red);
  color: #fff;
  border: none;
  padding: 0 24px;
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.zs-newsletter-form button:hover { background: #c0202e; }

/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */

/* Tablet (1024px) */
@media (max-width: 1024px) {
  .zs-why-grid { grid-template-columns: repeat(2, 1fr); }
  .zs-products-grid { grid-template-columns: repeat(3, 1fr); }
  .zs-section-products .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
  .zs-feat-grid { grid-template-columns: repeat(3, 1fr); }
  .zs-slide-content h2 { font-size: 2rem; }
  .zs-slide-emoji { font-size: 5rem; }
  .zs-cat-menu { width: 200px; }
}

/* ================================================================
   MOBILE (768px and below)
   Industry-standard: slider full-width on top, chips below
   ================================================================ */
@media (max-width: 768px) {

  /* ---- HERO: slider on top, categories below ----------------- */
  .zs-hero-section { overflow: hidden; }

  .zs-hero-wrap {
    flex-direction: column;
    height: auto;
  }

  /* --- SLIDER ------------------------------------------------- */
  .zs-hero-slider {
    order: -1;
    width: 100% !important;
    height: 220px !important;
    flex: 0 0 220px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Slide: fills 220px container */
  .zs-slide {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    padding: 0 !important;
  }

  /* Inner: top:50%+translateY(-50%) — reliable vertical centering */
  .zs-slide-inner {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 14px 0 18px !important;
    gap: 10px !important;
    z-index: 2 !important;
  }

  /* Text column */
  .zs-slide-content {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 62% !important;
    position: relative !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 3 !important;
  }

  .zs-slide-tag {
    display: inline-block !important;
    font-size: 0.58rem !important;
    padding: 3px 10px !important;
    margin-bottom: 8px !important;
    border-radius: 20px !important;
  }

  .zs-slide-content h2 {
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
    font-weight: 900 !important;
  }
  .zs-slide-content h2 em { display: block !important; font-size: 0.85em !important; }

  .zs-slide-content p {
    font-size: 0.68rem !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .zs-slide-actions { gap: 6px !important; flex-wrap: nowrap !important; }
  .zs-slide-btn-primary { padding: 7px 14px !important; font-size: 0.72rem !important; border-radius: 6px !important; }
  .zs-slide-btn-ghost   { display: none !important; }

  /* Emoji column: static flex child on the right */
  .zs-slide-visual {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 76px !important;
    z-index: 3 !important;
    transform: none !important;
    top: auto !important; right: auto !important; bottom: auto !important;
  }
  .zs-slide-emoji {
    font-size: 3.4rem !important;
    line-height: 1 !important;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4)) !important;
    animation: zs-float 3s ease-in-out infinite !important;
  }
  /* Arrows */
  .zs-slider-prev { left: 4px !important;  width: 24px !important; height: 24px !important; font-size: 0.65rem !important; }
  .zs-slider-next { right: 4px !important; width: 24px !important; height: 24px !important; font-size: 0.65rem !important; }

  /* Dots */
  .zs-slider-dots { bottom: 8px !important; gap: 5px !important; }
  .zs-dot { width: 5px !important; height: 5px !important; }
  .zs-dot.active { width: 14px !important; border-radius: 3px !important; }

  /* --- CATEGORY MENU ------------------------------------------ */
  .zs-cat-menu {
    order: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    background: #111927;
    flex-direction: column;
    flex: none;
  }

  /* Keep the header — compact single line */
  .zs-cat-menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: var(--zs-red);
  }

  /* Chips row: 5 categories */
  .zs-cat-menu-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    overflow: hidden;
    height: auto;
    gap: 0;
  }

  /* Hide the desktop › arrow pseudo-element on mobile */
  .zs-cat-menu-list > li::after { display: none !important; }

  /* Hide submenu arrow button + submenu on mobile */
  .zs-cat-arrow-btn { display: none !important; }
  .zs-cat-submenu   { display: none !important; }

  /* Hide all items, show only first 5 */
  .zs-cat-menu-list > li { display: none; }
  .zs-cat-menu-list > li:nth-child(-n+5) {
    display: flex !important;
    flex: 1;
    align-items: stretch;
    border-right: 1px solid rgba(255,255,255,0.06);
    position: static;
    overflow: hidden;
  }
  .zs-cat-menu-list > li:nth-child(5) { border-right: none; }

  .zs-cat-menu-list > li > a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 4px;
    gap: 6px;
    width: 100%;
    position: static;
    transition: background 0.15s;
  }
  .zs-cat-menu-list > li > a:hover { background: rgba(255,255,255,0.06); }

  .zs-cat-icon  { font-size: 1.4rem; width: auto; }
  .zs-cat-label { font-size: 0.6rem; font-weight: 600; white-space: nowrap; color: rgba(255,255,255,0.82); line-height: 1.3; }
  .zs-cat-badge { display: none; }

  /* View All — slim link below the chips */
  .zs-cat-view-all {
    display: block !important;
    text-align: right;
    padding: 6px 14px;
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    letter-spacing: 0.3px;
    transition: color 0.15s;
  }
  .zs-cat-view-all:hover { color: var(--zs-red); }

  /* ---- TRUST BAR: auto-moving marquee strip -------------------- */
  .zs-trust-bar { padding: 0; overflow: hidden; }
  .zs-trust-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    width: max-content;
  }
  .zs-trust-grid::-webkit-scrollbar { display: none; }

  /* once JS duplicates the items, animate continuously */
  .zs-trust-grid.zs-trust-marquee {
    overflow-x: hidden;
    animation: zsTrustMarquee 16s linear infinite;
  }
  .zs-trust-grid.zs-trust-marquee.zs-paused { animation-play-state: paused; }

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

  .zs-trust-item {
    flex: 0 0 auto;
    min-width: 150px;
    padding: 12px 16px;
    gap: 10px;
  }
  .zs-trust-item:not(:last-child)::after { height: 28px; }

  .zs-trust-icon { width: 32px; height: 32px; font-size: 1rem; flex-shrink: 0; }
  .zs-trust-text strong { font-size: 0.74rem; }
  .zs-trust-text span   { font-size: 0.66rem; }

  /* ---- SECTION HEADINGS ------------------------------------- */
  .zs-section { padding: 20px 0; }
  .zs-section-head { margin-bottom: 14px; }
  .zs-section-title { font-size: 1.05rem; }
  .zs-section-link  { font-size: 0.78rem; }

  /* ---- PLATFORM GRID: 2-column grid ---------------------------- */
  .zs-platform-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .zs-plat-card {
    min-height: 158px;
    padding: 14px;
    border-radius: 12px;
  }
  .zs-plat-logo  { font-size: 1.9rem; margin-bottom: 6px; }
  .zs-plat-body h3 { font-size: 0.88rem; font-weight: 800; }
  .zs-plat-body p  { font-size: 0.7rem; margin-bottom: 9px; }
  .zs-plat-btn { padding: 5px 14px; font-size: 0.72rem; }
  .zs-plat-tag { font-size: 0.5rem; padding: 3px 7px; top: 8px; right: 8px; }

  /* Lone item in last row: span full width, reflow as a horizontal banner */
  .zs-platform-grid > .zs-plat-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    min-height: 110px;
    align-items: center;
  }
  .zs-platform-grid > .zs-plat-card:last-child:nth-child(odd) .zs-plat-body {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 16px;
    align-items: center;
    width: 100%;
  }
  .zs-platform-grid > .zs-plat-card:last-child:nth-child(odd) .zs-plat-logo {
    grid-row: 1 / 3;
    grid-column: 1;
    margin-bottom: 0;
    font-size: 2.2rem;
  }
  .zs-platform-grid > .zs-plat-card:last-child:nth-child(odd) .zs-plat-body h3 { grid-column: 2; grid-row: 1; }
  .zs-platform-grid > .zs-plat-card:last-child:nth-child(odd) .zs-plat-body p  { grid-column: 2; grid-row: 2; margin-bottom: 0; }
  .zs-platform-grid > .zs-plat-card:last-child:nth-child(odd) .zs-plat-btn     {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    width: fit-content;
    white-space: nowrap;
  }

  /* ---- PRODUCTS --------------------------------------------- */
  .zs-products-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .zs-section-products .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .zs-product-img-placeholder { height: 110px; font-size: 2rem; }
  .zs-product-body    { padding: 10px; }

  /* ---- FEATURED PRODUCTS GRID --------------------------------- */
  .zs-feat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .zs-feat-img, .zs-feat-img-placeholder { height: 128px; }
  .zs-feat-img-placeholder { font-size: 2rem; }
  .zs-feat-body { padding: 10px 11px 11px; gap: 4px; }
  .zs-feat-cat   { font-size: 0.6rem; }
  .zs-feat-title { font-size: 0.78rem; }
  .zs-feat-price { font-size: 0.85rem; }
  .zs-feat-btn   { padding: 5px 12px; font-size: 0.68rem; }
  .zs-feat-badge { font-size: 0.55rem; padding: 3px 7px; top: 8px; left: 8px; }
  .zs-product-title   { font-size: 0.76rem; -webkit-line-clamp: 2; }
  .zs-product-price   { font-size: 0.85rem; }
  .zs-add-to-cart     { padding: 6px; font-size: 0.68rem; }

  /* ---- PROMO BANNERS ---------------------------------------- */
  .zs-promo-grid { grid-template-columns: 1fr; gap: 10px; }
  .zs-promo-card { padding: 18px 16px; border-radius: 10px; }
  .zs-promo-visual  { font-size: 2.5rem; }
  .zs-promo-content h3 { font-size: 0.95rem; }
  .zs-promo-content p  { font-size: 0.78rem; }

  /* ---- WHY CHOOSE US: stacked icon+text rows ------------------ */
  .zs-why-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
  .zs-why-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    align-items: center;
    text-align: left;
    padding: 14px 16px;
    border-radius: 10px;
  }
  .zs-why-icon {
    grid-row: 1 / 3;
    grid-column: 1;
    margin: 0;
    width: 46px;
    height: 46px;
    font-size: 1.25rem;
  }
  .zs-why-card h4 { grid-column: 2; grid-row: 1; font-size: 0.85rem; margin-bottom: 3px; }
  .zs-why-card p  { grid-column: 2; grid-row: 2; font-size: 0.76rem; display: block; margin: 0; line-height: 1.5; }

/* ---- NEWSLETTER ------------------------------------------- */
  .zs-newsletter { padding: 22px 0; }
  .zs-newsletter-inner {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    padding: 20px 16px;
    border-radius: 10px;
  }
  .zs-newsletter-text { text-align: left; }
  .zs-newsletter-icon { width: 38px; height: 38px; font-size: 1.05rem; }
  .zs-newsletter-inner h3 { font-size: 0.92rem; }
  .zs-newsletter-inner p  { font-size: 0.76rem; }
  .zs-newsletter-form {
    width: 100%;
    min-width: 0;
    flex-direction: column;
    border: none;
    gap: 10px;
    border-radius: 0;
    overflow: visible;
  }
  .zs-newsletter-form input  {
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.85rem;
  }
  .zs-newsletter-form button {
    padding: 12px 18px;
    font-size: 0.82rem;
    border-radius: 8px;
  }

  /* ---- FOOTER -------------------------------------------------- */
  .zs-footer { padding-top: 28px; }
  .zs-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; padding-bottom: 24px; }
  .zs-footer-brand { grid-column: 1 / -1; }
  .zs-footer-col h4 { font-size: 0.82rem; margin-bottom: 14px; }
  .zs-footer-col ul li { margin-bottom: 12px; }
  .zs-footer-col ul li a, .zs-footer-col ul li span { font-size: 0.78rem; }

  /* Categories gets its own full-width row (own row 2 cols look cramped at half width);
     Quick Links + Contact then share the row that follows */
  .zs-footer-col-wide { grid-column: 1 / -1; order: 1; }
  .zs-footer-col-wide ul { column-count: 2; column-gap: 16px; }
  .zs-footer-grid > .zs-footer-col:not(.zs-footer-col-wide) { order: 2; }

  .zs-footer-viewall { margin-top: 12px; }
  .zs-footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ================================================================
   SMALL PHONES (480px and below)
   ================================================================ */
@media (max-width: 480px) {
  .zs-hero-slider { flex: 0 0 200px; height: 200px; }
  .zs-slide-content h2 { font-size: 1.25rem; }
  .zs-slide-tag { display: none; }
  .zs-slide-btn-primary { padding: 9px 18px; }

  .zs-cat-menu-list li a { padding: 8px 11px; min-width: 60px; }
  .zs-cat-icon  { font-size: 1.1rem; }
  .zs-cat-label { font-size: 0.6rem; }

  .zs-plat-card  { min-height: 140px; padding: 12px; }
  .zs-plat-logo  { font-size: 1.6rem; }
  .zs-plat-body h3 { font-size: 0.8rem; }
  .zs-plat-body p { font-size: 0.65rem; }
}

/* ================================================================
   ALL CATEGORIES PAGE  (page-template-categories.php)
   ================================================================ */

.zs-cats-page { padding: 40px 16px 64px; }
.zs-cats-intro { text-align: center; margin-bottom: 36px; }
.zs-cats-intro p { color: var(--zs-gray); font-size: 0.97rem; max-width: 560px; margin: 0 auto; }

/* Grid */
.zs-cats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 22px;
}

/* Card shell */
.zs-cat-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s, box-shadow 0.18s;
}
.zs-cat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.13); }

/* Gradient header */
.zs-cat-card-header {
  display: flex;
  align-items: center;
  padding: 0;
  position: relative;
}

/* The link covers icon + text */
.zs-cat-card-header-link {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  padding: 20px 14px 20px 18px;
  text-decoration: none;
  transition: opacity 0.15s;
}
.zs-cat-card-header-link:hover { opacity: 0.88; }

.zs-cat-card-icon {
  font-size: 2.2rem;
  line-height: 1;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: rgba(255,255,255,0.18);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zs-cat-card-icon img { width: 32px; height: 32px; object-fit: contain; }

.zs-cat-card-meta { flex: 1; }
.zs-cat-card-name { font-size: 1rem; font-weight: 700; color: #fff; margin: 0 0 3px; line-height: 1.2; }
.zs-cat-card-count { font-size: 0.74rem; color: rgba(255,255,255,0.82); font-weight: 500; display: block; }

/* Arrow button inside header */
.zs-card-arrow-btn {
  flex-shrink: 0;
  width: 44px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.18);
  border: none;
  border-left: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  color: #fff;
  transition: background 0.15s;
}
.zs-card-arrow-btn:hover { background: rgba(0,0,0,0.32); }
.zs-card-chevron { transition: transform 0.22s; }
.zs-card-arrow-btn[aria-expanded="true"] .zs-card-chevron { transform: rotate(180deg); }

/* Card body */
.zs-cat-card-body {
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}
.zs-cat-card-desc { font-size: 0.85rem; color: var(--zs-gray); line-height: 1.55; margin: 0; }
.zs-cat-no-desc { font-style: italic; }

/* Subcategory list */
.zs-sub-list[hidden] { display: none; }
.zs-sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--zs-border);
  border-radius: 8px;
  overflow: hidden;
  animation: zsSubSlide 0.18s ease;
}
@keyframes zsSubSlide {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.zs-sub-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 13px;
  font-size: 0.83rem;
  color: var(--zs-text);
  transition: background 0.12s, color 0.12s;
}
.zs-sub-list li a:hover { background: var(--zs-navy); color: #fff; }
.zs-sub-list li:not(:last-child) a { border-bottom: 1px solid var(--zs-border); }
.zs-sub-count {
  font-size: 0.72rem;
  background: var(--zs-light);
  color: var(--zs-gray);
  border-radius: 20px;
  padding: 1px 8px;
  font-weight: 600;
  border: 1px solid var(--zs-border);
  transition: background 0.12s, color 0.12s;
}
.zs-sub-list li a:hover .zs-sub-count { background: rgba(255,255,255,0.2); color: #fff; border-color: transparent; }

/* Browse button — hidden by default, shown via JS */
.zs-cat-browse-btn[hidden] { display: none; }
.zs-cat-browse-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--zs-navy);
  color: #fff;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  transition: background 0.15s;
  align-self: flex-start;
  animation: zsSubSlide 0.18s ease;
}
.zs-cat-browse-btn:hover { background: var(--zs-red); color: #fff; }

/* Responsive */
@media (max-width: 900px) { .zs-cats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 540px) {
  .zs-cats-grid { grid-template-columns: 1fr; gap: 14px; }
  .zs-cats-page { padding: 24px 12px 48px; }
}

/* ================================================================
   CART PAGE (classic [woocommerce_cart] shortcode)
   ================================================================ */
body.woocommerce-cart .woocommerce { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
body.woocommerce-cart .woocommerce-notices-wrapper:empty { display: none; }
body.woocommerce-cart .woocommerce-notices-wrapper { flex-basis: 100%; }

/* Cart items table — sits directly on .zs-content-box's own white card, no nested shadow */
body.woocommerce-cart .woocommerce-cart-form { flex: 2 1 520px; min-width: 0; }
/* WooCommerce's own woocommerce.css puts a default border + border-radius on
   every .shop_table, including this one — redundant with .zs-content-box's own
   card border, and on mobile it made the thumbnail/remove button look like
   they were touching that inner box edge. */
body.woocommerce-cart table.cart { width: 100%; border-collapse: collapse; border: none !important; border-radius: 0 !important; }
body.woocommerce-cart table.cart thead th {
  text-align: left; font-size: 0.72rem; font-weight: 700; color: var(--zs-gray);
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 16px 8px; border-bottom: 2px solid var(--zs-border);
}
body.woocommerce-cart table.cart thead th.product-remove { width: 1%; }
body.woocommerce-cart table.cart thead th.product-thumbnail,
body.woocommerce-cart table.cart td.product-thumbnail { width: 88px; }
body.woocommerce-cart table.cart tbody td { padding: 18px 8px; border-bottom: 1px solid var(--zs-border); vertical-align: middle; }
body.woocommerce-cart table.cart tbody tr:last-of-type td { border-bottom: none; }

body.woocommerce-cart td.product-remove a.remove {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--zs-light); color: var(--zs-red) !important;
  font-size: 1.2rem; line-height: 1; text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
}
body.woocommerce-cart td.product-remove a.remove:hover { background: var(--zs-red); color: #fff !important; }

body.woocommerce-cart td.product-thumbnail img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--zs-border);
}
body.woocommerce-cart td.product-name a { color: var(--zs-navy); font-weight: 700; font-size: 0.92rem; text-decoration: none; }
body.woocommerce-cart td.product-name a:hover { color: var(--zs-red); }
body.woocommerce-cart td.product-price,
body.woocommerce-cart td.product-subtotal { font-weight: 700; color: var(--zs-navy); font-size: 0.9rem; white-space: nowrap; }

body.woocommerce-cart .quantity .qty {
  width: 64px; padding: 8px 10px; border: 1.5px solid var(--zs-border); border-radius: 6px;
  font-size: 0.88rem; font-weight: 600; color: var(--zs-navy); text-align: center;
}
body.woocommerce-cart .quantity .qty:focus { outline: none; border-color: var(--zs-red); }

/* Coupon + update-cart row. Note: td.actions must stay a normal table cell
   (no display:flex here) — setting flex directly on a <td> breaks its table
   column width entirely and collapses everything into a narrow stacked column.
   WooCommerce's own woocommerce-layout.css sets text-align:right on this cell
   (expecting .coupon to be floated left, as it is by default) — since we un-float
   .coupon below, text-align:right would otherwise push it to the right edge. */
body.woocommerce-cart tr td.actions {
  position: relative;
  text-align: left !important;
  padding: 18px 8px 20px; border-bottom: none;
}
/* WooCommerce's own woocommerce-layout.css floats .coupon itself
   (.woocommerce table.cart td.actions .coupon { float:left }) at higher
   specificity than our rule — since floated elements don't push a following
   block sibling to a new line (they just let it wrap alongside), this is
   what was letting "Update cart" render next to Coupon/Apply instead of
   below them. !important removes the float so normal block flow applies. */
body.woocommerce-cart .coupon { float: none !important; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Inline "coupon does not exist" validation message, injected by WC's cart.js
   next to the coupon field — give it its own line and a proper error card
   instead of WC's unstyled inline red text. */
body.woocommerce-cart .coupon-error-notice {
  flex-basis: 100%; margin: 4px 0 0 !important; padding: 8px 12px;
  background: #fdecec; border-left: 3px solid var(--zs-red); border-radius: 4px;
  color: var(--zs-red-dark) !important; font-size: 0.8rem; font-weight: 600; line-height: 1.4;
}
body.woocommerce-cart .coupon .input-text.has-error { border-color: var(--zs-red) !important; }
/* WooCommerce's own woocommerce.css targets this input with a 5-class selector
   (.woocommerce-cart table.cart td.actions .coupon .input-text) that beats ours
   on specificity alone — !important forces our border/padding/margin to win. */
body.woocommerce-cart .coupon .input-text {
  float: none !important; margin: 0 !important; box-sizing: border-box !important;
  padding: 9px 14px !important; border: 1.5px solid var(--zs-border) !important;
  border-radius: var(--zs-radius); font-size: 0.85rem; width: 200px;
}
body.woocommerce-cart .coupon .input-text:focus { outline: none; border-color: var(--zs-red) !important; }
body.woocommerce-cart .actions .button {
  background: var(--zs-navy); color: #fff !important; border: none;
  padding: 10px 20px; border-radius: var(--zs-radius); font-weight: 700; font-size: 0.85rem;
  cursor: pointer; transition: background 0.2s;
}
body.woocommerce-cart .actions .button:hover { background: var(--zs-red); }
/* Pinned to the top-right corner of the row via absolute positioning (anchored
   to td.actions, which is position:relative) so it stays put next to Coupon/Apply
   regardless of .coupon growing taller to fit a wrapped error message below —
   an absolutely positioned element is out of normal flow, so it can't be pushed
   down or overlapped by that growth. */
body.woocommerce-cart .actions .button[name=update_cart] {
  position: absolute; top: 18px; right: 8px; margin: 0;
  background: var(--zs-light); color: var(--zs-navy) !important; border: 1.5px solid var(--zs-border);
}
body.woocommerce-cart .actions .button[name=update_cart]:hover { background: var(--zs-border); }

/* Cart totals sidebar — light tint + border sets it apart as a distinct summary panel
   without stacking a second shadow on top of .zs-content-box's own card shadow */
/* Fixed width (not just a min-width flex-basis) so it can't get squeezed
   narrow enough to wrap "Proceed to checkout" onto three lines */
body.woocommerce-cart .cart-collaterals { flex: 0 0 300px; width: 300px; }
/* WooCommerce's own woocommerce.css targets .cart_totals with a more specific
   selector (.woocommerce .cart-collaterals .cart_totals) that floats it at
   48% width — !important guarantees it fills the sidebar instead. */
body.woocommerce-cart .cart_totals {
  float: none !important; width: 100% !important;
  background: var(--zs-light); border: 1px solid var(--zs-border); border-radius: var(--zs-radius);
  padding: 22px; box-sizing: border-box;
}
body.woocommerce-cart .cart_totals h2 { font-size: 1.05rem; font-weight: 800; color: var(--zs-navy); margin: 0 0 14px; }
body.woocommerce-cart .cart_totals table.shop_table { width: 100%; border-collapse: collapse; border: none; }
body.woocommerce-cart .cart_totals table.shop_table tr th,
body.woocommerce-cart .cart_totals table.shop_table tr td {
  padding: 12px 10px; border-bottom: 1px solid var(--zs-border); font-size: 0.88rem; color: var(--zs-text);
}
body.woocommerce-cart .cart_totals table.shop_table tr th { text-align: left; font-weight: 600; }
body.woocommerce-cart .cart_totals table.shop_table tr td { text-align: right; font-weight: 700; color: var(--zs-navy); }
body.woocommerce-cart .cart_totals tr.order-total th,
body.woocommerce-cart .cart_totals tr.order-total td { border-bottom: none; font-size: 1.05rem; font-weight: 800; }
/* The price is wrapped in its own .woocommerce-Price-amount span, which doesn't
   reliably inherit the td's color, and on some widths the label itself renders
   from a th rather than the td — so all three get the color explicitly. */
body.woocommerce-cart .cart_totals tr.order-total th,
body.woocommerce-cart .cart_totals tr.order-total td,
body.woocommerce-cart .cart_totals tr.order-total td .woocommerce-Price-amount { color: var(--zs-red) !important; }
/* WC's smallscreen.css zebra-stripes even rows with a faint gray background —
   same fix as the product table, applied here since this is a separate table. */
body.woocommerce-cart .cart_totals table.shop_table tr:nth-child(2n) td,
body.woocommerce-cart .cart_totals table.shop_table tr:nth-child(2n) th { background-color: transparent !important; }

body.woocommerce-cart .wc-proceed-to-checkout { margin-top: 16px; }
body.woocommerce-cart .checkout-button {
  display: block; width: 100%; text-align: center; box-sizing: border-box;
  background: var(--zs-red) !important; color: #fff !important;
  padding: 14px 20px; border-radius: var(--zs-radius); font-weight: 800; font-size: 0.95rem;
  text-decoration: none !important; transition: background 0.2s;
}
body.woocommerce-cart .checkout-button:hover { background: var(--zs-red-dark) !important; }

/* Empty cart state — .cart-empty already gets the navy .woocommerce-info notice
   styling defined earlier; here we only handle layout/spacing around it. */
body.woocommerce-cart .wc-empty-cart-message { flex: 1 1 100%; }
body.woocommerce-cart .return-to-shop { margin-top: 16px; flex-basis: 100%; }
body.woocommerce-cart .return-to-shop .button {
  display: inline-block; background: var(--zs-red); color: #fff !important;
  padding: 11px 26px; border-radius: var(--zs-radius); font-weight: 700; font-size: 0.9rem;
  text-decoration: none !important;
}
body.woocommerce-cart .return-to-shop .button:hover { background: var(--zs-red-dark); }

@media (max-width: 782px) {
  /* WooCommerce ships a separate stylesheet, woocommerce-smallscreen.css, loaded
     only below 768px, that turns every .shop_table_responsive row into stacked
     "Label: value" blocks (tr/td { display:block }, td { text-align:right!important }),
     and injects those labels via td::before { content:attr(data-title) }. It very
     nearly matches our own breakpoint, so without !important here it was winning:
     no product image showed, and every cell rendered as a plain labeled line
     instead of our grid layout. Every rule below fights that specific behavior. */
  body.woocommerce-cart .woocommerce { flex-direction: column; }
  body.woocommerce-cart .woocommerce-cart-form,
  body.woocommerce-cart .cart-collaterals { flex-basis: 100%; }
  /* .woocommerce is column-direction here, so flex-basis above controls height,
     not width — .cart-collaterals still had its desktop width:300px in effect
     (a separate property flex-direction doesn't touch), leaving the rest of the
     row blank. Force it to fill the row's width instead. */
  body.woocommerce-cart .cart-collaterals { width: 100% !important; }
  body.woocommerce-cart table.cart thead { display: none !important; }
  /* Card-style row: thumbnail left, title spans the top, price + quantity + the
     remove (×) button all sit inline together on one line underneath — grid
     placement throughout (no position:absolute), so alignment is consistent
     row to row regardless of content height differences. */
  body.woocommerce-cart table.cart tbody tr {
    display: grid !important; grid-template-columns: 72px 1fr auto auto !important; gap: 6px 10px;
    align-items: center;
    grid-template-areas:
      "thumb name name name"
      "thumb price qty remove";
    padding: 16px 4px;
    background: transparent !important;
  }
  /* WC's smallscreen.css zebra-stripes even rows with a faint gray background
     (tr:nth-child(2n) td { background-color: rgba(0,0,0,.025) }) — remove it. */
  body.woocommerce-cart table.cart tbody tr:nth-child(2n) td { background-color: transparent !important; }
  /* table.cart tbody prefix matches (and beats) the generic "tbody td { display:block }"
     rule below on specificity — without it, that broader rule would win and these
     overrides would silently lose despite looking more specific at a glance. */
  body.woocommerce-cart table.cart tbody td.product-remove {
    grid-area: remove; justify-self: end !important;
    display: flex !important; align-items: center; width: auto !important;
  }
  body.woocommerce-cart table.cart tbody td.product-thumbnail { grid-area: thumb; width: auto !important; align-self: start; }
  body.woocommerce-cart td.product-thumbnail img { width: 72px; height: 72px; }
  body.woocommerce-cart td.product-name { grid-area: name; font-size: 0.95rem; }
  body.woocommerce-cart td.product-price { grid-area: price; color: var(--zs-gray); font-weight: 600 !important; font-size: 0.82rem; }
  body.woocommerce-cart table.cart tbody td.product-quantity { grid-area: qty; justify-self: start !important; }
  /* Per-line subtotal is redundant with unit price × quantity right next to it,
     and the overall total already shows in the Cart totals summary below —
     hiding it keeps the card focused, matching the reference layout. */
  body.woocommerce-cart table.cart tbody td.product-subtotal { display: none !important; }
  body.woocommerce-cart .quantity .qty { width: 48px; padding: 6px; text-align: center; background: #fff; }
  /* border-top/bottom come from WC's own .shop_table td rule — clear both so
     the stacked fields don't look like a bordered spreadsheet. */
  body.woocommerce-cart table.cart tbody td {
    display: block !important; text-align: left !important;
    border-top: none !important; border-bottom: none !important; padding: 0;
  }
  /* Kill WC's injected "Product:" / "Price:" / etc. labels — our grid layout
     (thumbnail + name together, quantity stepper, etc.) is self-explanatory
     without them. */
  body.woocommerce-cart table.cart tbody td::before { content: none !important; display: none !important; }
  body.woocommerce-cart table.cart tbody tr:not(:last-child) { border-bottom: 1px solid var(--zs-border); }
  /* The actions row (Coupon/Apply/Update Cart) has only one cell, colspan=6 —
     it doesn't fit the product row's named grid areas ("thumb"/"name"/etc.), so
     without an explicit span it auto-placed into the first (72px "thumb") column,
     squeezing everything into a narrow strip. Span the full row width instead.
     Its parent <tr> is already display:grid (not a real table row anymore), so
     it's now safe to make this cell itself a flex row for Coupon/Apply/Update —
     unlike a genuine table-cell, a grid item's own display doesn't fight the
     table layout algorithm. */
  body.woocommerce-cart table.cart tbody td.actions {
    grid-column: 1 / -1 !important;
    display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 16px !important;
  }
  body.woocommerce-cart .coupon { display: flex; flex: 1 1 auto; margin: 0; }
  body.woocommerce-cart .coupon .input-text { width: auto; flex: 1; min-width: 90px; }
  body.woocommerce-cart .actions .button { padding: 10px 14px; font-size: 0.8rem; white-space: nowrap; }
  body.woocommerce-cart .actions .button[name=update_cart] { position: static; margin: 0; }
}

/* ================================================================
   ADD-TO-CART TOAST — success/error confirmation popup shown when
   an AJAX "Add" button (product cards, related products, wishlist)
   is clicked, since the WooCommerce default feedback for those is
   just a small checkmark on the button itself.
   ================================================================ */
.zs-toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px; max-width: 340px;
  pointer-events: none;
}
.zs-toast {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fff; border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  padding: 14px 16px; border-left: 4px solid var(--zs-red);
  transform: translateX(120%); opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: auto;
}
.zs-toast.zs-toast-show { transform: translateX(0); opacity: 1; }
.zs-toast-success { border-left-color: #1aa14b; }
.zs-toast-icon {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800; color: #fff;
  background: var(--zs-red); margin-top: 1px;
}
.zs-toast-success .zs-toast-icon { background: #1aa14b; }
.zs-toast-body { flex: 1; min-width: 0; }
.zs-toast-msg { font-size: 0.86rem; font-weight: 600; color: var(--zs-navy); line-height: 1.4; }
.zs-toast-action { display: inline-block; margin-top: 6px; font-size: 0.8rem; font-weight: 700; color: var(--zs-red); text-decoration: none; }
.zs-toast-action:hover { text-decoration: underline; }
.zs-toast-close {
  background: none; border: none; cursor: pointer; color: var(--zs-gray);
  font-size: 0.9rem; line-height: 1; padding: 2px; flex-shrink: 0;
}
.zs-toast-close:hover { color: var(--zs-navy); }

@media (max-width: 480px) {
  .zs-toast-container { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* ================================================================
   CHECKOUT PAGE (classic [woocommerce_checkout] shortcode)
   Layout: billing/shipping form on the left, a sticky order-summary
   + payment card on the right — the standard two-column checkout
   pattern used by most e-commerce sites. Single column on mobile.
   ================================================================ */

/* "Have a coupon?" toggle + hidden coupon form */
body.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 20px; }
body.woocommerce-checkout .showcoupon { font-weight: 700; }
body.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon {
  background: var(--zs-light); border: 1px solid var(--zs-border); border-radius: var(--zs-radius);
  padding: 20px; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
}
body.woocommerce-checkout .checkout_coupon .form-row { margin: 0; flex: 1 1 200px; }
body.woocommerce-checkout .checkout_coupon .form-row-last { flex: 0 0 auto; }
body.woocommerce-checkout .checkout_coupon label { display: block; font-size: 0.83rem; font-weight: 600; color: var(--zs-navy); margin-bottom: 5px; }
body.woocommerce-checkout .checkout_coupon .input-text {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--zs-border); border-radius: var(--zs-radius);
  font-size: 0.9rem; box-sizing: border-box;
}
body.woocommerce-checkout .checkout_coupon .input-text:focus { outline: none; border-color: var(--zs-red); }
body.woocommerce-checkout .checkout_coupon .button {
  background: var(--zs-navy); color: #fff !important; border: none; padding: 10px 22px;
  border-radius: var(--zs-radius); font-weight: 700; cursor: pointer; transition: background 0.2s;
}
body.woocommerce-checkout .checkout_coupon .button:hover { background: var(--zs-red); }

/* Two-column layout */
body.woocommerce-checkout form.checkout {
  display: grid; grid-template-columns: 1fr 400px; grid-template-rows: auto 1fr; gap: 40px; align-items: start;
}
/* Spans both grid rows so its own (usually much taller) height doesn't force
   row 1 to stretch to match it — without this, "Your order" heading and the
   order-review card were being pushed apart by a big blank gap, since row 1
   was being sized to fit the entire billing form. */
body.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / -1; }
body.woocommerce-checkout #order_review_heading {
  grid-column: 2; grid-row: 1; margin: 0 0 16px; font-size: 1.2rem; font-weight: 800; color: var(--zs-navy);
}
body.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 20px; align-self: start; }

/* col2-set (billing / shipping+notes) — stacked vertically for a clean single
   form flow, instead of WC's default float-based 2-column split. This page
   uses .col-1/.col-2 directly (not .u-column1/.u-column2 like the Addresses
   page), so it needs its own float reset here with matching !important. */
body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2 { float: none !important; width: 100% !important; }
body.woocommerce-checkout h3 { font-size: 1.1rem; font-weight: 800; color: var(--zs-navy); margin: 28px 0 16px; }
body.woocommerce-checkout .col-1 h3 { margin-top: 0; }

/* Form fields */
body.woocommerce-checkout .form-row { margin-bottom: 16px; }
body.woocommerce-checkout .form-row label { display: block; font-size: 0.83rem; font-weight: 600; color: var(--zs-navy); margin-bottom: 5px; }
body.woocommerce-checkout .form-row .required { color: var(--zs-red); }
body.woocommerce-checkout .form-row .optional { color: var(--zs-gray); font-weight: 400; }
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row textarea {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--zs-border); border-radius: var(--zs-radius);
  font-size: 0.9rem; color: var(--zs-navy); background: #fff; box-sizing: border-box;
  transition: border-color 0.15s;
}
body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row select:focus,
body.woocommerce-checkout .form-row textarea:focus { outline: none; border-color: var(--zs-red); }
body.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .form-row.woocommerce-invalid select { border-color: var(--zs-red) !important; }

/* form-row-first/last side by side (e.g. First name / Last name) */
body.woocommerce-checkout .form-row-first,
body.woocommerce-checkout .form-row-last { width: 48% !important; float: left !important; }
body.woocommerce-checkout .form-row-last { float: right !important; }
body.woocommerce-checkout .form-row-wide { width: 100%; clear: both; }

/* Order review card */
body.woocommerce-checkout #order_review {
  background: var(--zs-light); border: 1px solid var(--zs-border); border-radius: var(--zs-radius);
  padding: 22px; box-sizing: border-box;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
  width: 100%; border-collapse: collapse; background: transparent; border: none !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
  text-align: left; font-size: 0.72rem; font-weight: 700; color: var(--zs-gray);
  text-transform: uppercase; letter-spacing: 0.5px; padding: 0 0 10px; border-bottom: 2px solid var(--zs-border);
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th.product-total { text-align: right; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td {
  padding: 12px 0; border-bottom: 1px solid var(--zs-border); font-size: 0.88rem; color: var(--zs-navy);
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total { text-align: right; font-weight: 700; white-space: nowrap; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-quantity { color: var(--zs-gray); font-weight: 600; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
  padding: 12px 0; border-bottom: 1px solid var(--zs-border); font-size: 0.88rem;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th { text-align: left; font-weight: 600; color: var(--zs-text); }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td { text-align: right; font-weight: 700; color: var(--zs-navy); }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td { border-bottom: none; font-size: 1.05rem; font-weight: 800; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td .woocommerce-Price-amount { color: var(--zs-red) !important; }

/* Payment methods */
body.woocommerce-checkout ul.wc_payment_methods { list-style: none; margin: 20px 0 0; padding: 0; }
body.woocommerce-checkout ul.payment_methods li.wc_payment_method {
  border: 1.5px solid var(--zs-border); border-radius: var(--zs-radius); margin-bottom: 10px;
  padding: 12px 14px; background: #fff; list-style: none;
}
body.woocommerce-checkout ul.payment_methods li.wc_payment_method label { font-weight: 700; color: var(--zs-navy); cursor: pointer; }
body.woocommerce-checkout ul.payment_methods li.wc_payment_method input.input-radio { margin-right: 8px; accent-color: var(--zs-red); }
body.woocommerce-checkout .payment_box { background: var(--zs-light); border-radius: 6px; padding: 12px 14px; margin-top: 10px; font-size: 0.85rem; color: var(--zs-text); }
body.woocommerce-checkout .payment_box p { margin: 0; }

/* Terms + place order */
body.woocommerce-checkout .woocommerce-privacy-policy-text { font-size: 0.78rem; color: var(--zs-gray); margin: 14px 0; }
body.woocommerce-checkout .woocommerce-privacy-policy-text a { color: var(--zs-red); }
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label { font-size: 0.85rem; }
body.woocommerce-checkout #place_order {
  display: block; width: 100%; background: var(--zs-red) !important; color: #fff !important;
  border: none; padding: 15px 20px; border-radius: var(--zs-radius); font-weight: 800; font-size: 1rem;
  cursor: pointer; transition: background 0.2s; margin-top: 6px;
}
body.woocommerce-checkout #place_order:hover { background: var(--zs-red-dark) !important; }

@media (max-width: 900px) {
  body.woocommerce-checkout form.checkout { grid-template-columns: 1fr; gap: 24px; }
  body.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1; }
  body.woocommerce-checkout #order_review_heading { grid-column: 1; grid-row: 2; }
  body.woocommerce-checkout #order_review { grid-column: 1; grid-row: 3; position: static; }
  body.woocommerce-checkout .form-row-first,
  body.woocommerce-checkout .form-row-last { width: 100% !important; float: none !important; }
  body.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon { flex-direction: column; align-items: stretch; }
}

/* ================================================================
   THANK YOU / ORDER RECEIVED PAGE
   ================================================================ */
.woocommerce-order { max-width: 820px; margin: 0 auto; }

/* Success hero — a checkmark badge + the "Thank you..." message, centered */
.woocommerce-order .woocommerce-thankyou-order-received {
  background: none; border: none; margin: 0 0 28px; padding: 64px 0 0; position: relative;
  text-align: center; font-size: 1.4rem; font-weight: 800; color: var(--zs-navy);
}
.woocommerce-order .woocommerce-thankyou-order-received::before {
  content: "✓"; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 52px; height: 52px; border-radius: 50%; background: #1aa14b; color: #fff;
  font-size: 1.6rem; font-weight: 900; display: flex; align-items: center; justify-content: center;
}

/* Order overview — horizontal stat strip */
.woocommerce-order ul.woocommerce-order-overview {
  list-style: none; margin: 0 0 24px; padding: 20px 24px;
  display: flex; flex-wrap: wrap; gap: 20px 32px; justify-content: center; text-align: center;
  background: var(--zs-light); border: 1px solid var(--zs-border); border-radius: var(--zs-radius);
}
.woocommerce-order ul.woocommerce-order-overview li {
  list-style: none; margin: 0; padding: 0; border: none;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--zs-gray);
}
.woocommerce-order ul.woocommerce-order-overview li strong {
  display: block; margin-top: 4px; font-size: 0.98rem; font-weight: 800;
  text-transform: none; letter-spacing: normal; color: var(--zs-navy);
}

/* Payment-instructions paragraph (e.g. "Pay with cash upon delivery.") that
   gateways print directly after the order overview, with no class of its own */
.woocommerce-order > p:not([class]) {
  background: #eaf4ff; border-left: 3px solid #2e86de; border-radius: 6px;
  padding: 12px 16px; margin: 0 0 28px; font-size: 0.88rem; color: var(--zs-navy);
}

.woocommerce-order section.woocommerce-order-details,
.woocommerce-order section.woocommerce-customer-details { margin-bottom: 28px; }
.woocommerce-order h2 { font-size: 1.05rem; font-weight: 800; color: var(--zs-navy); margin: 0 0 14px; }

/* Order details table */
.woocommerce-order table.woocommerce-table--order-details {
  width: 100%; border-collapse: collapse; border: none !important; box-shadow: none;
}
.woocommerce-order table.woocommerce-table--order-details thead th {
  text-align: left; font-size: 0.72rem; font-weight: 700; color: var(--zs-gray);
  text-transform: uppercase; letter-spacing: 0.5px; padding: 0 0 10px; border-bottom: 2px solid var(--zs-border) !important;
}
.woocommerce-order table.woocommerce-table--order-details thead th.product-total { text-align: right; }
.woocommerce-order table.woocommerce-table--order-details tbody td {
  padding: 12px 0; border-top: none !important; border-bottom: 1px solid var(--zs-border); font-size: 0.9rem;
}
.woocommerce-order table.woocommerce-table--order-details tbody .product-name a { color: var(--zs-navy); font-weight: 700; text-decoration: none; }
.woocommerce-order table.woocommerce-table--order-details tbody .product-name a:hover { color: var(--zs-red); }
.woocommerce-order table.woocommerce-table--order-details tbody .product-quantity { color: var(--zs-gray); font-weight: 600; }
.woocommerce-order table.woocommerce-table--order-details .product-total { text-align: right; font-weight: 700; color: var(--zs-navy); white-space: nowrap; }
.woocommerce-order table.woocommerce-table--order-details tfoot th,
.woocommerce-order table.woocommerce-table--order-details tfoot td {
  padding: 10px 0; border-top: none !important; border-bottom: 1px solid var(--zs-border); font-size: 0.88rem;
}
.woocommerce-order table.woocommerce-table--order-details tfoot th { text-align: left; font-weight: 600; color: var(--zs-text); }
.woocommerce-order table.woocommerce-table--order-details tfoot td { text-align: right; font-weight: 700; color: var(--zs-navy); }
.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child td { border-bottom: none; }

/* Billing address card */
.woocommerce-order .woocommerce-customer-details address {
  background: var(--zs-light) !important; border: 1px solid var(--zs-border) !important;
  border-radius: var(--zs-radius) !important; padding: 16px !important; line-height: 1.8; color: var(--zs-text);
}
.woocommerce-order .woocommerce-customer-details--email { margin: 10px 0 0; }

/* Continue shopping CTA */
.woocommerce-order-continue-shopping {
  display: block; width: fit-content; margin: 8px auto 0;
  background: var(--zs-red); color: #fff !important; text-decoration: none !important;
  padding: 13px 30px; border-radius: var(--zs-radius); font-weight: 700; font-size: 0.92rem;
  transition: background 0.2s;
}
.woocommerce-order-continue-shopping:hover { background: var(--zs-red-dark); }

@media (max-width: 600px) {
  .woocommerce-order ul.woocommerce-order-overview { justify-content: flex-start; text-align: left; gap: 16px 28px; }
  .woocommerce-order table.woocommerce-table--order-details thead { display: none; }
  .woocommerce-order table.woocommerce-table--order-details tbody td,
  .woocommerce-order table.woocommerce-table--order-details tbody .product-total { display: block; text-align: left; padding: 4px 0; }
  .woocommerce-order table.woocommerce-table--order-details tbody tr { display: block; padding: 10px 0; }
}

/* ================================================================
   ADD-TO-CART CONFIRMATION MODAL — replaces the plain toast for a
   successful add with a richer popup: item added, cart subtotal, and
   Continue Shopping / Checkout actions.
   ================================================================ */

/* Buttons injected onto product cards by WooCommerce (checkmark state +
   inline "View cart" link) — cleaned up since the modal below now owns
   the add-to-cart confirmation instead. */
.zs-add-to-cart.added,
.zs-feat-btn.added { background: var(--zs-red) !important; color: #fff !important; }
.zs-feat-meta .added_to_cart.wc-forward,
.zs-product-meta .added_to_cart.wc-forward,
.zs-add-to-cart-wrap .added_to_cart.wc-forward { display: none !important; }

.zs-cart-modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,34,0.6);
  z-index: 10050; display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.zs-cart-modal-overlay.zs-show { opacity: 1; pointer-events: auto; }
.zs-cart-modal {
  background: #fff; border-radius: 12px; width: 100%; max-width: 420px;
  padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  transform: scale(0.94); transition: transform 0.25s; position: relative; box-sizing: border-box;
}
.zs-cart-modal-overlay.zs-show .zs-cart-modal { transform: scale(1); }
.zs-cart-modal-close {
  position: absolute; top: 14px; right: 14px; background: none; border: none;
  font-size: 1.3rem; color: var(--zs-gray); cursor: pointer; line-height: 1; padding: 4px;
}
.zs-cart-modal-close:hover { color: var(--zs-navy); }
.zs-cart-modal-success {
  display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 800;
  color: var(--zs-navy); margin: 0 0 20px;
}
.zs-cart-modal-check {
  width: 30px; height: 30px; border-radius: 50%; background: #1aa14b; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.zs-cart-modal-item {
  display: flex; gap: 14px; align-items: center;
  padding-bottom: 18px; border-bottom: 1px solid var(--zs-border); margin-bottom: 16px;
}
.zs-cart-modal-item img,
.zs-cart-modal-noimg {
  width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--zs-border); flex-shrink: 0;
}
.zs-cart-modal-noimg { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; background: var(--zs-light); }
.zs-cart-modal-item-info { min-width: 0; }
.zs-cart-modal-item-name { font-weight: 700; color: var(--zs-navy); font-size: 0.92rem; margin-bottom: 4px; }
.zs-cart-modal-item-price { color: var(--zs-red); font-weight: 800; font-size: 0.95rem; }
.zs-cart-modal-subtotal {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.9rem; color: var(--zs-text); margin-bottom: 20px;
}
.zs-cart-modal-subtotal strong { color: var(--zs-navy); font-size: 1.05rem; }
.zs-cart-modal-actions { display: flex; gap: 10px; }
/* Override the shared button classes' padding/font-size just here — at the
   modal's width, "Continue Shopping" wrapped to two lines while "Checkout"
   stayed on one, making the two buttons mismatched heights. */
.zs-cart-modal-actions a {
  flex: 1; text-align: center; white-space: nowrap;
  padding: 12px 8px !important; font-size: 0.82rem !important;
}

@media (max-width: 480px) {
  .zs-cart-modal { padding: 22px; }
  .zs-cart-modal-actions { flex-direction: column; }
}