/* Overrides on top of the compiled Astro CSS (shell.css + pdp.css), loaded last.
   Keeps the self-contained product page 1:1 on WordPress. */

/* Fonts: the compiled CSS references fontsource '… Variable' faces whose files
   aren't on WP. Point the tokens at the Google Fonts families (loaded in the
   template head) so type renders identically. */
:root {
  --font-display: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

/* Size selector — was an inline <style is:global> in [slug].astro, so it isn't
   in the compiled bundle. Outlined boxes, not a solid button. */
.size-row { display: flex; gap: 8px; flex-wrap: wrap; }
.size-opt {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 16px; border: 1px solid rgba(0,0,0,.18); border-radius: 8px;
  background: transparent; color: inherit; cursor: pointer; font: inherit; line-height: 1.2;
  min-width: 0; transition: border-color .15s ease, background .15s ease;
}
.size-opt:hover { border-color: rgba(0,0,0,.42); }
.size-opt.is-active { border-color: currentColor; border-width: 2px; padding: 7px 15px; background: rgba(0,0,0,.04); }
.size-opt__label { font-weight: 700; font-size: .92rem; }
.size-opt__price { font-size: .8rem; opacity: .6; }

/* Kadence's breadcrumb is hooked to woocommerce_before_single_product (which we
   fire for cart notices), so it duplicates our Astro .crumbs — hide it. */
.nzm-astro-pdp .kadence-breadcrumbs,
.nzm-astro-pdp .kadence-breadcrumb-container { display: none !important; }

/* Kadence still injects an external-link <img> into target=_blank links via a
   global filter — hide inside the PDP (we render a "↗" glyph). */
.pdp .rpanel__link img, .pdp .lab-table__btn img,
main a[target="_blank"] img, main a[href="#"] img { display: none !important; }

/* The page is our own document now, but WP/Kadence base CSS still loads via
   wp_head — make sure the Astro paper canvas wins site-wide on this page. */
html, body { background: var(--paper) !important; }

/* `.gallery` is ALSO a WordPress core class (the [gallery] shortcode), so core
   styles it as a grid and collapses our product image. Force Astro behavior. */
.pdp .gallery { display: block !important; }
.pdp .gallery__main { width: 100% !important; }

/* WordPress/Kadence base CSS puts margin-bottom on <table>; our spec table
   inherits it, leaving a ~21px white band below the table inside the rounded
   white card (so the grey label column stops short of the card bottom). Zero it
   so the table fills the card. THIS was the "imperfect box". */
.materials__table { margin: 0 !important; }
/* Belt-and-suspenders: border-collapse tables aren't always clipped to the
   wrapper's radius in Chrome — round the bottom corner cells directly too. */
.materials__table tr:last-child th:first-child { border-bottom-left-radius: 5px; }
.materials__table tr:last-child td:last-child { border-bottom-right-radius: 5px; }

/* ── Native WooCommerce reviews, NZM skin (list + form under #reviews) ────── */
.nzm-reviews { padding: 88px 0; border-top: 1px solid var(--line-soft); }
.nzm-reviews__title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 40px; color: var(--ink); }
.nzm-reviews .woocommerce-Reviews-title,
.nzm-reviews .comment-reply-title { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); display: block; margin-bottom: 20px; }
.nzm-reviews .commentlist { list-style: none; padding: 0; margin: 0 0 48px; display: grid; gap: 14px; }
.nzm-reviews .commentlist li { background: var(--white); border: 1px solid var(--line-soft); border-radius: 6px; padding: 22px 26px; margin: 0; }
.nzm-reviews .comment_container img.avatar { display: none; }
.nzm-reviews .comment-text { margin: 0; border: 0; padding: 0; }
.nzm-reviews .comment-text .meta { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); margin: 6px 0 10px; }
.nzm-reviews .comment-text .meta .woocommerce-review__author { color: var(--ink); font-weight: 600; }
.nzm-reviews .comment-text .description p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.nzm-reviews .star-rating { color: var(--accent); }
/* Review form */
.nzm-reviews .comment-respond { background: var(--white); border: 1px solid var(--line-soft); border-radius: 6px; padding: 28px 26px; }
.nzm-reviews .comment-form { display: grid; gap: 14px; margin: 0; }
.nzm-reviews .comment-form label { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); display: block; margin-bottom: 6px; }
.nzm-reviews .comment-form input[type="text"],
.nzm-reviews .comment-form input[type="email"],
.nzm-reviews .comment-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); padding: 10px 12px; font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.nzm-reviews .comment-form .submit { background: var(--accent); color: var(--white); border: 0; border-radius: 4px; padding: 12px 28px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; width: auto; justify-self: start; }
.nzm-reviews .comment-form .submit:hover { background: var(--accent-hover); }
.nzm-reviews .comment-form-cookies-consent { display: flex; gap: 8px; align-items: baseline; }
.nzm-reviews .comment-form-cookies-consent label { text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-size: 13px; }