/*
Theme Name: Oasina
Theme URI: https://oasina.com
Author: Oasina
Description: Premium water-filter e-commerce theme for oasina.com, built for WooCommerce. Visual design references lotus-filter-boutique.lovable.app (homepage only, phase 1).
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.0
Tested up to: 6.6
Requires Plugins: woocommerce
Text Domain: oasina
*/

/* =========================================================
   1. DESIGN TOKENS
   Lifted from computed styles / CSS custom properties on the
   reference site (lotus-filter-boutique.lovable.app). Colors
   are OKLCH — modern, perceptually even, matches the source
   exactly. Keep --radius at 0 everywhere; the reference uses
   sharp corners as a brand trait.
   ========================================================= */
:root {
  --radius: 0rem;

  --background: oklch(97% .012 85);       /* warm cream page bg */
  --surface: oklch(100% 0 0);              /* pure white (hero panel) */
  --foreground: oklch(20% .03 170);        /* near-black deep green, body text / brand ink */

  --card: oklch(98.5% .008 85);            /* product card bg */
  --card-foreground: oklch(20% .03 170);

  --primary: oklch(20% .03 170);           /* deep green-black: header bar, footer, cart button */
  --primary-foreground: oklch(97% .012 85);

  --muted: oklch(93% .018 85);             /* product image tile bg, trust band bg */
  --muted-foreground: oklch(45% .03 120);  /* secondary text, product titles */

  --accent: oklch(71% .07 90);             /* gold/tan CTA button */
  --accent-foreground: oklch(20% .03 170);

  --olive: oklch(38% .07 130);             /* eyebrow labels, brand names, leaf icon, "Deal" badge */
  --sale: oklch(38% .07 130);
  --sale-foreground: oklch(100% 0 0);
  --promo: oklch(57% .08 115);

  --border: oklch(88% .02 85);

  --destructive: oklch(57.7% .245 27.325);
  --destructive-foreground: oklch(100% 0 0);

  --font-sans: 'Jost', system-ui, -apple-system, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;

  --container-max: 80rem; /* 1280px, matches max-w-7xl */
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.o-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* =========================================================
   3. ANNOUNCEMENT BAR
   ========================================================= */
.o-announce {
  background: var(--primary);
  color: var(--primary-foreground);
  text-align: center;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .5rem 1rem;
}

/* =========================================================
   4. HEADER
   ========================================================= */
.o-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}
.o-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1rem;
}
.o-logo {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-family: var(--font-serif);
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.o-logo svg {
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(-.5rem);
  fill: var(--olive);
  color: var(--olive);
}
.o-nav {
  display: none;
  gap: 1.25rem;
  font-size: .875rem;
  font-weight: 600;
}
.o-nav.is-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.25rem;
  gap: .75rem;
  z-index: 40;
}
.o-nav__link {
  color: var(--muted-foreground);
  padding-bottom: .25rem;
}
.o-nav__link.is-active {
  color: var(--foreground);
  border-bottom: 2px solid var(--foreground);
}
.o-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: .25rem;
  color: var(--foreground);
  cursor: pointer;
}
.o-nav-toggle svg { width: 1.5rem; height: 1.5rem; }
.o-search {
  margin-left: auto;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--foreground);
  padding: .5rem .75rem;
}
.o-search:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.o-search svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.o-search input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  font-size: .875rem;
}
.o-header__icons {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.o-header__icons svg { width: 1.25rem; height: 1.25rem; }
.o-header__icons a, .o-header__icons button { position: relative; display: inline-flex; }
.o-cart-count,
.o-wishlist-count {
  position: absolute;
  top: -.4rem;
  right: -.4rem;
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: .625rem;
  font-weight: 700;
  min-width: 1rem;
  height: 1rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .2rem;
}

/* Category filter pill row */
.o-filters {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  font-size: .875rem;
  padding-block: .75rem;
  border-bottom: 1px solid var(--border);
}
.o-filters::-webkit-scrollbar { display: none; }
.o-filters__item {
  flex-shrink: 0;
  color: var(--muted-foreground);
  padding-bottom: .25rem;
  white-space: nowrap;
}
.o-filters__item.is-active {
  color: var(--foreground);
  font-weight: 600;
  border-bottom: 2px solid var(--foreground);
}
.o-filters__item.is-sale { color: var(--destructive); font-weight: 600; }

/* =========================================================
   5. HERO
   ========================================================= */
.o-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.o-hero__grid {
  display: grid;
  gap: 2rem;
  padding-block: 3rem;
  align-items: center;
}
.o-hero__eyebrow {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: var(--olive);
}
.o-hero__title {
  margin-top: .75rem;
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.1;
}
.o-hero__copy {
  margin-top: 1rem;
  max-width: 28rem;
  font-size: 1.125rem;
  color: var(--muted-foreground);
}
.o-btn {
  display: inline-block;
  border: 0;
  padding: .75rem 2rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .25em;
  transition: opacity .2s ease;
}
.o-btn:hover { opacity: .9; }
.o-btn--accent { background: var(--accent); color: var(--accent-foreground); }
.o-hero__media {
  margin-inline: auto;
  width: 100%;
  max-width: 24rem;
  aspect-ratio: 1 / 1;
  background: var(--background);
  object-fit: contain;
  padding: 1.5rem;
}

/* =========================================================
   6. PRODUCTS
   ========================================================= */
.o-products { padding-block: 2rem; }
.o-products__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.o-products__title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 600;
}
.o-products__count {
  margin-top: .25rem;
  font-size: .875rem;
  color: var(--muted-foreground);
}
.o-sort {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: .5rem .75rem;
  font-size: .875rem;
}

.o-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
}
@media (min-width: 48rem) {
  .o-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
}
@media (min-width: 64rem) {
  .o-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.o-card { display: block; }
.o-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--muted);
}
.o-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  mix-blend-mode: multiply;
  transition: transform .5s ease;
}
.o-card:hover .o-card__media img { transform: scale(1.05); }
.o-card__badge {
  position: absolute;
  left: 0;
  top: .75rem;
  background: var(--background);
  padding: .25rem .5rem;
  font-size: .7rem;
  font-weight: 700;
}
.o-card__badge--deal { background: var(--sale); color: var(--sale-foreground); }
.o-card__wishlist {
  position: absolute;
  right: .5rem;
  top: .5rem;
  background: var(--background);
  border-radius: 999px;
  padding: .5rem;
  display: inline-flex;
}
.o-card__wishlist svg { width: 1rem; height: 1rem; }
.o-card__wishlist.is-active svg { fill: var(--destructive); stroke: var(--destructive); }
.o-card__add {
  position: absolute;
  left: .5rem;
  right: .5rem;
  bottom: .5rem;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: .5rem;
  font-size: .8125rem;
  font-weight: 700;
  text-align: center;
  transform: translateY(3.5rem);
  transition: transform .2s ease;
}
.o-card:hover .o-card__add,
.o-card:focus-within .o-card__add { transform: translateY(0); }

.o-card__brand {
  margin-top: .75rem;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--olive);
}
.o-card__title {
  margin-top: .15rem;
  font-size: .875rem;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.o-card__price {
  margin-top: .25rem;
  font-size: .875rem;
  font-weight: 600;
}

/* =========================================================
   7. TRUST BAND
   ========================================================= */
.o-trust { background: var(--muted); }
.o-trust__grid {
  display: grid;
  gap: 1.5rem;
  padding-block: 2.5rem;
  font-size: .875rem;
}
@media (min-width: 48rem) {
  .o-trust__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.o-trust__item { display: flex; align-items: center; gap: .75rem; }
.o-trust__item svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.o-trust__item strong { display: block; font-weight: 700; }
.o-trust__item span { color: var(--muted-foreground); }

/* =========================================================
   8. FOOTER
   ========================================================= */
.o-footer { background: var(--primary); color: var(--primary-foreground); }
.o-footer__inner { padding-block: 2.5rem; font-size: .875rem; }
.o-footer__logo {
  font-family: var(--font-serif);
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.o-footer__tagline {
  margin-top: .25rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: var(--accent);
}
.o-footer__copy {
  margin-top: .5rem;
  opacity: .7;
}

/* =========================================================
   9. RESPONSIVE: DESKTOP NAV / HERO
   ========================================================= */
@media (min-width: 48rem) {
  .o-nav { display: flex; position: static; padding: 0; border-bottom: 0; gap: 1.25rem; flex-direction: row; }
  .o-nav-toggle { display: none; }
  .o-search { max-width: 28rem; }
  .o-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-hero__title { font-size: 4.5rem; }
}

/* =========================================================
   10. PAGINATION (archive-product.php)
   ========================================================= */
.o-pagination {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-block: 3rem;
  font-family: var(--font-sans);
}
.o-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .5rem;
  border: 1px solid var(--border);
  color: var(--foreground);
  text-decoration: none;
  font-size: .875rem;
}
.o-pagination .page-numbers.current {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
.o-pagination .page-numbers.dots { border: none; }

/* =========================================================
   11. WOOCOMMERCE DEFAULT PAGES (single product, cart, checkout,
   my account) — visual polish only. These pages keep WooCommerce's
   own templates/markup/JS (variations, gallery, AJAX cart) rather
   than being rebuilt; this section re-skins them with Oasina's
   tokens and fonts instead of the plugin's default look.
   ========================================================= */
.woocommerce {
  font-family: var(--font-sans);
  color: var(--foreground);
}
.woocommerce h1, .woocommerce h2, .woocommerce h3 {
  font-family: var(--font-serif);
}
.woocommerce ::selection { background: var(--accent); }

.woocommerce div.product .woocommerce-product-gallery { background: var(--muted); }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--primary);
  font-family: var(--font-serif);
  font-size: 1.5rem;
}
.woocommerce span.onsale {
  background: var(--sale);
  color: var(--sale-foreground);
  border-radius: 0;
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .05em;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .added_to_cart,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--accent);
  color: var(--accent-foreground);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .8rem;
  padding: .85rem 1.75rem;
  border: none;
  transition: opacity .15s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  opacity: .85;
  background: var(--accent);
  color: var(--accent-foreground);
}

.woocommerce table.shop_table {
  border: 1px solid var(--border);
  border-radius: 0;
}
.woocommerce table.shop_table th {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .05em;
  background: var(--muted);
}

.woocommerce-breadcrumb {
  font-size: .8rem;
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
}
.woocommerce-breadcrumb a { color: var(--olive); }

.woocommerce nav.woocommerce-pagination ul {
  border-color: var(--border);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--primary);
  color: var(--primary-foreground);
}

.woocommerce-tabs ul.tabs li a { font-family: var(--font-sans); }
.woocommerce-tabs ul.tabs li.active a { color: var(--primary); font-weight: 600; }