/* Add custom CSS styles below */ 
/* =========================================================
   ZEE STAR — Streetwear storefront styling for Salla
   Version: 1.0 | Mobile first | RTL safe
   Paste into: Store Design > CSS for the active theme.
   Keep the theme's native HTML, cart, search and checkout.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Cairo:wght@400;500;600;700;800;900&display=swap');

/* 01. Brand tokens */
:root {
  --zs-black: #0A0A0A;
  --zs-white: #FFFFFF;
  --zs-charcoal: #2B2728;
  --zs-gray: #F0F0F0;
  --zs-red: #ED1C24;
  --zs-purple: #6B3FA0;
  --zs-ink: #141414;
  --zs-muted: #737373;
  --zs-border: #E7E7E7;
  --zs-surface: #FAFAFA;
  --zs-radius: 0px;
  --zs-shadow: 0 12px 32px rgba(10, 10, 10, .09);
  --zs-shadow-hover: 0 18px 40px rgba(10, 10, 10, .15);
  --zs-space-1: .5rem;
  --zs-space-2: .75rem;
  --zs-space-3: 1rem;
  --zs-space-4: 1.5rem;
  --zs-space-5: 2rem;
  --zs-space-6: 3rem;
  --zs-space-7: 4.5rem;
  --zs-content-width: 1440px;
  --zs-motion: 220ms ease;
}

/* 02. Base typography and spacing */
html { scroll-behavior: smooth; }
body {
  color: var(--zs-ink);
  background: var(--zs-white);
  font-family: 'Cairo', sans-serif;
  text-rendering: optimizeLegibility;
}
:lang(en), [lang="en"] { font-family: 'Anton', 'Cairo', sans-serif; }
h1, h2, h3, h4, h5, h6 {
  color: var(--zs-black);
  font-family: 'Cairo', sans-serif;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
}
:lang(en) h1, :lang(en) h2, :lang(en) h3,
[lang="en"] h1, [lang="en"] h2, [lang="en"] h3 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
}
img { max-width: 100%; }
::selection { color: var(--zs-white); background: var(--zs-black); }

/* 03. Announcement strip and header surfaces */
.s-top-navbar, .top-navbar {
  color: var(--zs-white);
  background: var(--zs-black);
  font-size: .78rem;
  letter-spacing: .035em;
}
.s-header, header {
  background: var(--zs-white);
  border-bottom: 1px solid var(--zs-border);
}
.s-header a, header a { color: var(--zs-black); }
.s-header a:hover, header a:hover { color: var(--zs-red); }

/* 04. Navigation links */
.s-main-nav a, .main-menu a, .s-header a {
  transition: color var(--zs-motion), opacity var(--zs-motion);
}
.s-main-nav a:hover, .main-menu a:hover { opacity: .68; }

/* 05. Buttons — square, high contrast, accessible */
.s-button-element,
button:not(.sicon),
input[type="submit"],
.s-cart-summary__submit,
.product-form button {
  border-radius: var(--zs-radius) !important;
  transition: color var(--zs-motion), background-color var(--zs-motion),
              border-color var(--zs-motion), transform var(--zs-motion),
              box-shadow var(--zs-motion);
}
.s-button-element:not(.s-button-unstyled),
.s-cart-summary__submit,
.product-form button {
  color: var(--zs-white);
  background: var(--zs-black);
  border: 1px solid var(--zs-black);
  font-weight: 700;
}
.s-button-element:not(.s-button-unstyled):hover,
.s-cart-summary__submit:hover,
.product-form button:hover {
  color: var(--zs-black);
  background: var(--zs-white);
  border-color: var(--zs-black);
  transform: translateY(-1px);
}
:focus-visible {
  outline: 2px solid var(--zs-red);
  outline-offset: 3px;
}

/* 06. Homepage sections and product cards */
.s-block, .store-features, .s-products-slider {
  margin-block: clamp(2.5rem, 7vw, 6rem);
}
.s-block__title, .s-section-title {
  margin-bottom: var(--zs-space-4);
  color: var(--zs-black);
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  font-weight: 900;
}
.s-product-card-entry, .product-card {
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--zs-radius) !important;
  background: var(--zs-white);
  box-shadow: none;
  transition: transform var(--zs-motion), box-shadow var(--zs-motion), border-color var(--zs-motion);
}
.s-product-card-entry:hover, .product-card:hover {
  transform: translateY(-4px);
  border-color: var(--zs-border);
  box-shadow: var(--zs-shadow-hover);
}
.s-product-card-image, .s-product-card__image {
  overflow: hidden;
  background: var(--zs-surface);
  border-radius: var(--zs-radius) !important;
}
.s-product-card-image img, .s-product-card__image img {
  transition: transform 450ms ease;
}
.s-product-card-entry:hover .s-product-card-image img,
.s-product-card-entry:hover .s-product-card__image img {
  transform: scale(1.035);
}
.s-product-card-content, .s-product-card__content { padding: var(--zs-space-3); }
.s-product-card-price, .s-product-card__price { color: var(--zs-black); font-weight: 800; }
.s-product-card-sale-price, .s-product-card__sale-price { color: var(--zs-red); }

/* 07. Product detail — keep the theme's gallery and purchase controls */
.s-product-gallery, .s-product-gallery-main { background: var(--zs-surface); }
.s-product-details, .product-details { color: var(--zs-ink); }
.s-product-details h1, .product-details h1 { font-size: clamp(1.45rem, 3vw, 2.35rem); }
.s-product-details .price, .product-details .price { color: var(--zs-black); font-weight: 900; }
.s-product-options button, .s-product-options label,
.product-options button, .product-options label {
  border-radius: var(--zs-radius) !important;
}
.s-product-description, .product-description { line-height: 1.9; }

/* 08. Cart, checkout, forms — visual polish only */
.s-cart-summary, .s-cart-item, .s-checkout-step, .s-form-control,
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border-radius: var(--zs-radius) !important;
}
.s-cart-item, .s-cart-summary { border-color: var(--zs-border); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border-color: #D8D8D8;
  box-shadow: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--zs-black) !important;
  box-shadow: 0 0 0 2px rgba(10, 10, 10, .08) !important;
}

/* 09. Footer — simple dark brand close */
.s-footer, footer {
  color: var(--zs-white);
  background-color: var(--zs-black);
}
.s-footer a, footer a { color: var(--zs-white); opacity: .86; }
.s-footer a:hover, footer a:hover { color: var(--zs-white); opacity: 1; }
.s-footer h2, .s-footer h3, footer h2, footer h3 { color: var(--zs-white); }

/* 10. Mobile-first refinements */
@media (max-width: 767px) {
  .s-block, .store-features, .s-products-slider {
    margin-block: 2.25rem;
  }
  .s-product-card-content, .s-product-card__content { padding: .75rem; }
  .s-product-card-entry:hover, .product-card:hover { transform: none; box-shadow: none; }
  .s-button-element:not(.s-button-unstyled), .s-cart-summary__submit,
  .product-form button { min-height: 48px; }
}

/* Red is reserved for sale states. Do not apply it to every button. */