/* ============================================================
   Waterclick — Product catalog archive (shop / category / tag)
   Scoped stylesheet, conditionally enqueued on is_shop() ||
   is_product_taxonomy() only. Restyles the theme's WooCommerce
   loop markup (ul.products > li.product) + the catalog hero built
   in woocommerce.php. Sibling of pdp.css / landing.css.
   Brand: red #d72127 sole accent + cool greys. Single font: Prompt.
   No build step — this file is hand-authored flat CSS; keep it
   byte-identical to assets/scss/catalog.scss.
   ============================================================ */

/* ---------- TOKENS (on body.woocommerce — file only loads on archives) ---------- */
body.woocommerce{
  --ink:#0A2430;        /* deep — text */
  --ink-2:#3A5563;      /* muted grey */
  --paper:#F4F8FA;      /* cool near-white ground */
  --surface:#FFFFFF;    /* card */
  --mist:#DCE8ED;       /* cool grey line/fill */
  --mist-2:#EAF1F4;
  --red:#D72127;        /* brand red — sole accent */
  --red-deep:#B01015;
  --red-wash:#EEF2F4;   /* cool grey wash */
  --shadow:0 1px 2px rgba(10,36,48,.05), 0 8px 30px -12px rgba(10,36,48,.18);
  --shadow-lift:0 2px 4px rgba(10,36,48,.06), 0 24px 48px -18px rgba(10,36,48,.30);
  --r:14px; --r-lg:22px;
  --font-sans:"Prompt","Noto Sans Thai","Sarabun",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}

/* The title band (header) is the shared site page-cover, emitted by
   woocommerce.php via wc_page_cover() and styled in style-m.scss — identical to
   /products/ and every other page. No header CSS lives here on purpose. */

/* ============================================================
   FILTER CHIPS — same category nav as the /products/ hub, rendered
   here as plain links (current term highlighted) by
   waterclick_products_archive_chips() on woocommerce_before_shop_loop.
   Mirrors landing.css .wc-filters / .wc-chip, scoped to body.woocommerce.
   ============================================================ */
body.woocommerce .shop-content .wc-filters{
  position:sticky;top:85px;z-index:6;
  display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  padding:12px 0;margin:0 0 16px;
  background:var(--surface);border-bottom:1px solid var(--mist);
}
body.woocommerce .shop-content .wc-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:999px;cursor:pointer;
  border:1px solid var(--mist);background:var(--surface);
  color:var(--ink-2);font-size:14px;font-weight:500;line-height:1;
  text-decoration:none;white-space:nowrap;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
body.woocommerce .shop-content .wc-chip:hover{border-color:var(--red);color:var(--ink)}
body.woocommerce .shop-content .wc-chip__n{
  font-size:12px;font-weight:600;color:var(--ink-2);
  background:var(--mist-2);border-radius:999px;padding:2px 8px;
  font-variant-numeric:tabular-nums;transition:background .16s ease, color .16s ease;
}
body.woocommerce .shop-content .wc-chip.is-active{
  background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:0 6px 16px -8px rgba(215,33,39,.6);
}
body.woocommerce .shop-content .wc-chip.is-active .wc-chip__n{background:rgba(255,255,255,.22);color:#fff}
body.woocommerce .shop-content .wc-chip:focus-visible{outline:2.5px solid var(--red);outline-offset:3px}
@media(max-width:1023px){
  body.woocommerce .shop-content .wc-filters{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;
  }
  body.woocommerce .shop-content .wc-filters::-webkit-scrollbar{display:none}
  body.woocommerce .shop-content .wc-chip{flex:0 0 auto}
}

/* ============================================================
   PRODUCT GRID + CARDS
   Overrides plant3/woo-m.css (.products / li.product / .onsale / .price)
   ============================================================ */
body.woocommerce .shop-content ul.products{
  display:grid;gap:18px;margin:0 0 8px;padding:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:1024px){
  body.woocommerce .shop-content ul.products,
  body.woocommerce .shop-content ul.products.columns-3,
  body.woocommerce .shop-content ul.products.columns-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

body.woocommerce .shop-content ul.products li.product{
  list-style:none;margin:0;text-align:left;
  display:flex;flex-direction:column;gap:12px;
  background:var(--surface);border:1px solid var(--mist);border-radius:var(--r);
  padding:14px;position:relative;overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.woocommerce .shop-content ul.products li.product:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--red);
}
/* signature: a red "waterline" that fills across the card top on hover */
body.woocommerce .shop-content ul.products li.product::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--red),var(--red-deep));
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
body.woocommerce .shop-content ul.products li.product:hover::before{transform:scaleX(1)}

/* product link = the anchor wrapping badge + image + title + price */
body.woocommerce .shop-content ul.products li.product a.woocommerce-loop-product__link{
  display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none;flex:1 1 auto;
}

/* product shot on the plain white card — no frame */
body.woocommerce .shop-content ul.products li.product a.woocommerce-loop-product__link img,
body.woocommerce .shop-content ul.products li.product img{
  width:100%;aspect-ratio:1/1;object-fit:contain;
  background:transparent;padding:6px;margin:0;
  display:block;
}

/* discount badge — restyled pill (PHP filter suppresses token 0% discounts) */
body.woocommerce .shop-content ul.products li.product .onsale{
  position:absolute;top:22px;left:22px;z-index:3;
  background:var(--red);color:#fff;
  font-size:12px;font-weight:600;line-height:1;letter-spacing:.01em;
  padding:5px 10px;border-radius:999px;
  box-shadow:0 4px 12px -4px rgba(215,33,39,.5);
  font-variant-numeric:tabular-nums;
}

/* title — 2-line clamp keeps rows even */
body.woocommerce .shop-content ul.products li.product h2.woocommerce-loop-product__title{
  margin:0;padding:0;color:var(--ink);
  font-size:15px;line-height:1.4;font-weight:500;letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.8em;
}

/* price — undo the parent's absolute del/ins overlap; lay them inline */
body.woocommerce .shop-content ul.products li.product .price{
  margin:0;font-size:inherit;line-height:1.3;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;
  font-variant-numeric:tabular-nums;
}
body.woocommerce .shop-content ul.products li.product .price .amount{
  font-size:18px;font-weight:600;color:var(--ink);
}
body.woocommerce .shop-content ul.products li.product .price ins{
  position:static;padding:0;text-decoration:none;background:none;order:1;
}
body.woocommerce .shop-content ul.products li.product .price ins .amount{color:var(--ink)}
body.woocommerce .shop-content ul.products li.product .price del{
  position:static;left:auto;bottom:auto;transform:none;opacity:1;order:2;
}
body.woocommerce .shop-content ul.products li.product .price del .amount{
  font-size:13px;font-weight:400;color:var(--ink-2);text-decoration:line-through;
}

/* footer actions ---------------------------------------------------------- */
/* primary CTA: solid-red pill (add to cart / read more / select options) */
body.woocommerce .shop-content ul.products li.product a.button,
body.woocommerce .shop-content ul.products li.product a.added_to_cart{
  font-family:var(--font-sans);
}
body.woocommerce .shop-content ul.products li.product > a.button{
  display:flex;width:100%;justify-content:center;align-items:center;gap:8px;
  margin:0;min-height:0;border:none;cursor:pointer;
  background:var(--red);color:#fff;
  font-size:14px;font-weight:600;line-height:1.2;
  padding:11px 16px;border-radius:999px;
  transition:background .16s ease, transform .16s ease, box-shadow .16s ease;
}
body.woocommerce .shop-content ul.products li.product > a.button:hover{
  background:var(--red-deep);transform:translateY(-1px);
  box-shadow:0 10px 22px -8px rgba(215,33,39,.55);color:#fff;
}
body.woocommerce .shop-content ul.products li.product > a.button.loading{opacity:.75}
/* "View cart" link that appears after an AJAX add */
body.woocommerce .shop-content ul.products li.product a.added_to_cart{
  display:inline-flex;align-self:center;margin:2px 0 0;padding:2px 4px;
  font-size:13px;font-weight:500;color:var(--red-deep);text-decoration:none;
}
body.woocommerce .shop-content ul.products li.product a.added_to_cart:hover{text-decoration:underline}

/* compare button: keep compare.css colours (outline → solid when .is-in),
   just make it a full-width secondary block under the CTA */
body.woocommerce .shop-content ul.products li.product .wc-cmp-btn{
  display:flex;width:100%;margin:8px 0 0;padding:.62em 1.1em;font-size:13px;
}

/* focus-visible (accessibility floor) */
body.woocommerce .shop-content ul.products li.product a:focus-visible{
  outline:2.5px solid var(--red);outline-offset:3px;border-radius:6px;
}

/* ============================================================
   PAGINATION (categories with more than one page)
   ============================================================ */
body.woocommerce .shop-content .woocommerce-pagination ul{gap:6px}
body.woocommerce .shop-content .woocommerce-pagination a,
body.woocommerce .shop-content .woocommerce-pagination span{
  min-width:38px;height:38px;border-radius:999px;
  color:var(--ink);font-weight:600;transition:background .16s ease,color .16s ease;
}
body.woocommerce .shop-content .woocommerce-pagination a:hover{background:var(--mist-2);color:var(--red-deep)}
body.woocommerce .shop-content .woocommerce-pagination .current{
  background:var(--red);color:#fff;border-radius:999px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:520px){
  .wc-cat-hero{margin-top:60px;padding:24px 18px 22px}
  body.woocommerce .shop-content ul.products{gap:12px}
  body.woocommerce .shop-content ul.products li.product{padding:11px;gap:10px}
  body.woocommerce .shop-content ul.products li.product a.woocommerce-loop-product__link img,
  body.woocommerce .shop-content ul.products li.product img{padding:4px}
  body.woocommerce .shop-content ul.products li.product h2.woocommerce-loop-product__title{font-size:14px}
  body.woocommerce .shop-content ul.products li.product .price .amount{font-size:16px}
}

/* ============================================================
   DARK THEME
   ============================================================ */
@media (prefers-color-scheme:dark){
  body.woocommerce{
    --ink:#EAF3F6; --ink-2:#9FB6C0; --paper:#06222C; --surface:#0C2E3A;
    --mist:#1B3F4C; --mist-2:#123240;
    --red:#FF5A5F; --red-deep:#E23C41; --red-wash:#1B2A30;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 34px -14px rgba(0,0,0,.6);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 28px 56px -18px rgba(0,0,0,.7);
  }
  body.woocommerce .shop-content ul.products li.product > a.button{color:#12060a}
  body.woocommerce .shop-content ul.products li.product > a.button:hover{color:#12060a}
  body.woocommerce .shop-content ul.products li.product .onsale{color:#12060a}
  body.woocommerce .shop-content .wc-chip.is-active,
  body.woocommerce .shop-content .wc-chip.is-active .wc-chip__n{color:#12060a}
}
:root[data-theme="light"] body.woocommerce{
  --ink:#0A2430; --ink-2:#3A5563; --paper:#F4F8FA; --surface:#FFFFFF;
  --mist:#DCE8ED; --mist-2:#EAF1F4; --red:#D72127; --red-deep:#B01015; --red-wash:#EEF2F4;
  --shadow:0 1px 2px rgba(10,36,48,.05), 0 8px 30px -12px rgba(10,36,48,.18);
  --shadow-lift:0 2px 4px rgba(10,36,48,.06), 0 24px 48px -18px rgba(10,36,48,.30);
}
:root[data-theme="dark"] body.woocommerce{
  --ink:#EAF3F6; --ink-2:#9FB6C0; --paper:#06222C; --surface:#0C2E3A;
  --mist:#1B3F4C; --mist-2:#123240; --red:#FF5A5F; --red-deep:#E23C41; --red-wash:#1B2A30;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 34px -14px rgba(0,0,0,.6);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 28px 56px -18px rgba(0,0,0,.7);
}
:root[data-theme="dark"] body.woocommerce .shop-content ul.products li.product > a.button,
:root[data-theme="dark"] body.woocommerce .shop-content ul.products li.product .onsale,
:root[data-theme="dark"] body.woocommerce .shop-content .wc-chip.is-active,
:root[data-theme="dark"] body.woocommerce .shop-content .wc-chip.is-active .wc-chip__n{color:#12060a}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .wc-cat-hero__title::after{transition:none}
  body.woocommerce .shop-content ul.products li.product,
  body.woocommerce .shop-content ul.products li.product::before,
  body.woocommerce .shop-content ul.products li.product > a.button{transition:none}
  body.woocommerce .shop-content ul.products li.product:hover{transform:none}
  body.woocommerce .shop-content ul.products li.product:hover::before{transform:scaleX(1)}
}