/*!
Theme Name:   Zasium Wellness
Theme URI:    https://zasiumwellness.com
Author:       Zasium Wellness
Author URI:   https://zasiumwellness.com
Description:  Zasium Wellness is a lightweight, Elementor-first WooCommerce theme built for US health & supplement stores. Full Elementor / Elementor Pro Theme Builder support (header, footer, single, archive locations), WooCommerce product gallery zoom, lightbox and slider, HPOS-safe, and clean brand-ready defaults for shop, product, cart and checkout pages.
Version:      1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  zasium-wellness
Tags:         e-commerce, one-column, custom-logo, custom-menu, featured-images, translation-ready, full-width-template, theme-options
WC requires at least: 7.0
WC tested up to: 9.9
*/

/* -------------------------------------------------------------------------
   1. Brand tokens (Elementor global styles override these easily)
   ------------------------------------------------------------------------- */
:root {
  --zw-ink: #1c2b27;
  --zw-pine: #2e5e4e;
  --zw-pine-dark: #24493d;
  --zw-mist: #eff3ee;
  --zw-paper: #ffffff;
  --zw-citrus: #e8a33d;
  --zw-line: #dde4df;
  --zw-muted: #5f6f69;

  --zw-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --zw-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --zw-radius-pill: 999px;
  --zw-radius-card: 14px;
  --zw-container: 1200px;
  --zw-shadow: 0 6px 24px rgba(28, 43, 39, 0.08);
}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--zw-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--zw-ink);
  background: var(--zw-paper);
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--zw-font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--zw-ink);
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h3 { font-size: 1.35rem; }

a { color: var(--zw-pine); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--zw-pine-dark); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--zw-pine);
  outline-offset: 2px;
}

.zw-container {
  width: 100%;
  max-width: var(--zw-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.site-main { padding: 48px 0 72px; }

/* Screen reader text (WP standard) */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; width: 1px; word-wrap: normal !important;
}

/* Signature: capsule divider */
.zw-capsule-rule {
  border: 0;
  height: 6px;
  width: 64px;
  border-radius: var(--zw-radius-pill);
  background: linear-gradient(90deg, var(--zw-pine) 60%, var(--zw-citrus) 60%);
  margin: 0 0 24px;
}

/* -------------------------------------------------------------------------
   3. Buttons — capsule signature
   ------------------------------------------------------------------------- */
.zw-btn,
button,
input[type="submit"],
input[type="button"],
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button {
  display: inline-block;
  font-family: var(--zw-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--zw-radius-pill);
  background: var(--zw-pine);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  text-align: center;
}

button:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--zw-pine-dark);
  color: #fff;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--zw-ink);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  background: var(--zw-muted);
  color: #fff;
  padding: 14px 26px;
}

/* -------------------------------------------------------------------------
   4. Forms
   ------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--zw-font-body);
  font-size: 0.95rem;
  color: var(--zw-ink);
  background: #fff;
  border: 1px solid var(--zw-line);
  border-radius: 10px;
}

input:focus, select:focus, textarea:focus { border-color: var(--zw-pine); }

/* -------------------------------------------------------------------------
   5. Fallback header / footer
   (Elementor Pro Theme Builder header/footer replaces these automatically)
   ------------------------------------------------------------------------- */
.zw-header {
  background: var(--zw-paper);
  border-bottom: 1px solid var(--zw-line);
  position: relative;
  z-index: 100;
}

.zw-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}

.zw-header__brand { display: flex; align-items: center; gap: 12px; }

.zw-header__brand .custom-logo { max-height: 48px; width: auto; }

.zw-sitename {
  font-family: var(--zw-font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--zw-ink);
}

.zw-sitename span { color: var(--zw-pine); }

.zw-nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }

.zw-nav a {
  font-family: var(--zw-font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--zw-ink);
}

.zw-nav a:hover { color: var(--zw-pine); }

.zw-nav .sub-menu {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid var(--zw-line);
  border-radius: 12px;
  box-shadow: var(--zw-shadow);
  padding: 10px 0;
  min-width: 200px;
  flex-direction: column;
  gap: 0;
}

.zw-nav li { position: relative; }
.zw-nav li:hover > .sub-menu,
.zw-nav li:focus-within > .sub-menu { display: flex; }
.zw-nav .sub-menu a { display: block; padding: 8px 18px; }

.zw-header__actions { display: flex; align-items: center; gap: 18px; }

.zw-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--zw-font-display);
  font-weight: 600;
  color: var(--zw-ink);
}

.zw-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--zw-radius-pill);
  background: var(--zw-citrus);
  color: var(--zw-ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.zw-menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--zw-line);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--zw-ink);
  font-size: 1rem;
}

.zw-footer {
  background: var(--zw-ink);
  color: #cfd8d3;
  padding: 48px 0 32px;
  margin-top: 0;
}

.zw-footer a { color: #fff; }
.zw-footer__inner { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: center; }
.zw-footer__note { font-size: 0.85rem; color: #9db0a8; max-width: 640px; }

/* -------------------------------------------------------------------------
   6. WooCommerce — shop loop
   ------------------------------------------------------------------------- */
.woocommerce ul.products li.product {
  background: #fff;
  border: 1px solid var(--zw-line);
  border-radius: var(--zw-radius-card);
  padding: 16px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--zw-shadow);
  transform: translateY(-2px);
}

.woocommerce ul.products li.product img { border-radius: 10px; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--zw-font-display);
  font-size: 1rem;
  font-weight: 600;
  padding-top: 10px;
}

.woocommerce ul.products li.product .price {
  color: var(--zw-pine);
  font-weight: 700;
  font-size: 1.02rem;
}

.woocommerce ul.products li.product .price del { color: var(--zw-muted); font-weight: 400; }

.woocommerce span.onsale {
  background: var(--zw-citrus);
  color: var(--zw-ink);
  border-radius: var(--zw-radius-pill);
  min-height: 0;
  min-width: 0;
  line-height: 1;
  padding: 8px 14px;
  font-weight: 700;
  font-family: var(--zw-font-display);
}

.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0 3px; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: var(--zw-radius-pill);
  padding: 10px 16px;
  font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--zw-pine); color: #fff; }

/* -------------------------------------------------------------------------
   7. WooCommerce — single product
   ------------------------------------------------------------------------- */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--zw-pine);
  font-family: var(--zw-font-display);
  font-size: 1.5rem;
  font-weight: 700;
}

.woocommerce div.product .woocommerce-product-rating { margin-bottom: 8px; }
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: var(--zw-citrus); }

.woocommerce div.product form.cart .quantity .qty {
  padding: 12px 8px;
  border-radius: 10px;
  border: 1px solid var(--zw-line);
  width: 84px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 1.2em;
  border-bottom: 1px solid var(--zw-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom: 1px solid var(--zw-line); }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 18px 0 0;
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--zw-font-display);
  font-weight: 600;
  color: var(--zw-muted);
  padding: 12px 2px;
  display: inline-block;
  border-bottom: 3px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--zw-ink);
  border-bottom-color: var(--zw-citrus);
}

/* -------------------------------------------------------------------------
   8. WooCommerce — notices, cart, checkout
   ------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: 12px;
  border-top-width: 3px;
  background: var(--zw-mist);
}

.woocommerce-message { border-top-color: var(--zw-pine); }
.woocommerce-message::before { color: var(--zw-pine); }
.woocommerce-info { border-top-color: var(--zw-citrus); }
.woocommerce-info::before { color: var(--zw-citrus); }

.woocommerce table.shop_table {
  border: 1px solid var(--zw-line);
  border-radius: var(--zw-radius-card);
  border-collapse: separate;
}

.woocommerce table.shop_table th { font-family: var(--zw-font-display); }

.woocommerce-cart table.cart img { border-radius: 8px; width: 64px; }

.woocommerce .cart_totals,
.woocommerce-checkout #order_review {
  background: var(--zw-mist);
  border-radius: var(--zw-radius-card);
  padding: 20px;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
  border: 1px solid var(--zw-line);
  border-radius: var(--zw-radius-card);
}

/* My Account */
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 500;
  color: var(--zw-ink);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover { background: var(--zw-mist); color: var(--zw-pine); }

/* -------------------------------------------------------------------------
   9. Blog fallback + pagination + comments (minimal)
   ------------------------------------------------------------------------- */
.zw-article { max-width: 780px; margin: 0 auto; }
.zw-article .entry-meta { color: var(--zw-muted); font-size: 0.9rem; margin-bottom: 20px; }
.zw-article .post-thumbnail img { border-radius: var(--zw-radius-card); }

.zw-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.zw-archive-grid .zw-card {
  border: 1px solid var(--zw-line);
  border-radius: var(--zw-radius-card);
  overflow: hidden;
  background: #fff;
}
.zw-archive-grid .zw-card:hover { box-shadow: var(--zw-shadow); }
.zw-card__body { padding: 18px 20px 22px; }
.zw-card__body h2 { font-size: 1.1rem; margin-bottom: 8px; }
.zw-card img { display: block; width: 100%; height: 200px; object-fit: cover; }

.navigation.pagination .nav-links { display: flex; gap: 6px; justify-content: center; margin-top: 40px; }
.navigation.pagination .page-numbers {
  padding: 10px 16px;
  border-radius: var(--zw-radius-pill);
  border: 1px solid var(--zw-line);
  font-weight: 600;
}
.navigation.pagination .page-numbers.current { background: var(--zw-pine); color: #fff; border-color: var(--zw-pine); }

/* -------------------------------------------------------------------------
   10. Elementor cooperation
   ------------------------------------------------------------------------- */
.elementor-page .site-main { padding: 0; }
.elementor-page .zw-container.zw-content-area { max-width: none; padding: 0; }

/* Elementor full width / canvas: never fight Elementor's own layout */
.elementor-template-full-width .site-main,
.elementor-template-canvas .site-main { padding: 0; }

/* -------------------------------------------------------------------------
   11. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .zw-archive-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .zw-menu-toggle { display: inline-flex; }

  .zw-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--zw-line);
    box-shadow: var(--zw-shadow);
    padding: 12px 20px 20px;
  }

  .zw-nav.is-open { display: block; }
  .zw-nav ul { flex-direction: column; gap: 4px; }
  .zw-nav a { display: block; padding: 10px 4px; }
  .zw-nav .sub-menu { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0 16px; }

  .zw-archive-grid { grid-template-columns: 1fr; }
  .site-main { padding: 32px 0 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}