/* theme-extra part 1/5 (CF-46105 split of theme-extra.css, rules unchanged and in original order): WP basics, WooCommerce shop grid/buttons/single-product basics/notices/breadcrumbs. */
/* ============================================================
   CapyOnsen theme extras — WordPress + WooCommerce integration
   Extends assets/css/main.css (the design system).
   ============================================================ */

/* ---------- WP basics ---------- */
.main-nav li { list-style: none; display: contents; } /* wp_nav_menu emits <li>s; flatten them into the flex row */
.main-nav li::marker { content: none; } /* display:contents alone still renders ::marker in Chromium */
.main-nav .menu-item a { color: var(--cocoa); text-decoration: none; font-size: .95rem; font-weight: 500; border-bottom: 2px solid transparent; }
.main-nav .menu-item a:hover, .main-nav .current-menu-item a { border-bottom-color: var(--clay); }

.site-main { display: block; }
.entry-content > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.entry-content img { border-radius: var(--radius); }
/* Density pass 2026-08-02: 1.6em on a 41.6px h2 was a 67px gap above every
   section heading in an article. Also, when the content OPENS with an h2 (the
   Story page does), that 67px landed on top of the section's own padding for a
   107px void under the page title — page-faq had a one-page patch for exactly
   this, now generalised to every .entry-content. Not mirrored into
   front-page.css: no .entry-content renders on the homepage (verified). */
.entry-content h2 { margin-top: 1.15em; }
.entry-content > :first-child { margin-top: 0; }
.entry-content blockquote {
  font-family: var(--font-display); font-size: 1.35rem; line-height: 1.4;
  border-left: 3px solid var(--clay); margin: 2rem auto; padding: .3rem 0 .3rem 1.4rem; color: var(--clay-ink);
}
.post-meta { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------- WooCommerce: shop grid ---------- */
.woocommerce ul.products {
  display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
  margin: 2rem 0 0; padding: 0; list-style: none;
}
/* Bug fix (2026-07-13): WooCommerce's own core CSS (woocommerce.css +
   woocommerce-layout.css) still applies a float-era clearfix
   (content:" "; display:table) to ul.products::before/::after, left over from
   before this rule switched the grid to display:grid. A pseudo-element with
   real content on a grid CONTAINER becomes an actual grid item — so that
   clearfix silently occupied row 1 / column 1 as an invisible phantom card,
   pushing every real product over by one slot (Daniel noticed 2 real products
   sitting in columns 2-3 with column 1 blank, and the 3rd product wrapping to
   a mostly-empty row 2). Neutralize both pseudo-elements; grid never needed
   float-clearing in the first place. */
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; display: none !important; }
@media (max-width: 900px) { .woocommerce ul.products { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .woocommerce ul.products { grid-template-columns: 1fr; } }
.woocommerce ul.products li.product {
  width: auto !important; float: none !important; margin: 0 !important;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-soft);
  padding: 1.1rem 1.1rem 1.4rem; text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.woocommerce ul.products li.product img {
  border-radius: var(--radius-sm); margin-bottom: .9rem; width: 100%; height: auto;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 550; color: var(--text); padding: 0;
}
.woocommerce ul.products li.product .price {
  color: var(--clay-ink) !important; font-weight: 600; font-size: 1.02rem; display: block; margin: .35rem 0 .75rem; /* CO-34: was --clay-deep (3.69:1 on oat-soft, fails AA) */
}
.woocommerce ul.products li.product .price del { opacity: .5; margin-right: .4em; }
.woocommerce ul.products li.product .product-stock { margin: 0 0 .6rem; color: var(--cocoa); font-size: .875rem; font-weight: 600; line-height: 1.5; }
.woocommerce ul.products li.product .button {
  margin-top: .2rem;
}

/* ---------- WooCommerce: buttons ---------- */
.woocommerce .button, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.wc-block-components-button {
  background: var(--clay) !important; color: var(--cocoa) !important; border: 0 !important; /* CO-34: was #fff (2.89:1 on clay, fails AA) — cocoa hits 4.98:1 */
  border-radius: 999px !important; font-family: var(--font-body) !important;
  font-weight: 600 !important; padding: .8rem 1.6rem !important; line-height: 1.2 !important;
  transition: background .2s ease !important;
}
.woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover {
  background: var(--clay-ink) !important; color: #fff !important;
}
.woocommerce a.button.checkout-button, .woocommerce button[name="add-to-cart"], .single_add_to_cart_button {
  background: var(--moss) !important; color: #fff !important; /* CO-34: base .button rule above now sets cocoa text (for the clay bg); moss is dark enough that white stays required here (5.13:1) */
}
.woocommerce a.button.checkout-button:hover, .woocommerce button[name="add-to-cart"]:hover, .single_add_to_cart_button:hover {
  background: var(--moss-deep) !important;
}

/* ---------- WooCommerce: single product ---------- */
.woocommerce div.product { margin-top: 1.5rem; }
.woocommerce div.product div.images img { border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.woocommerce div.product .product_title { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
/* P1 fix (2026-07-12): price read as supporting text next to the gallery/
   cert panel — bumped size/weight, kept the warm accent, tightened the
   margin below so it sits visually closer to the CTA it belongs with. */
.woocommerce div.product p.price { color: var(--clay-ink); font-size: 1.7rem; font-weight: 700; font-family: var(--font-body); margin-bottom: .6rem; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--muted); font-size: 1.05rem; }

/* P1 fix (2026-07-12): three scannable benefits right after the lead copy —
   "customers shouldn't need to interpret poetic copy to understand the
   product." */
.woocommerce div.product .benefit-bullets {
  list-style: none; margin: 0 0 1.3rem; padding: 0; display: flex; flex-direction: column; gap: .45rem;
}
.woocommerce div.product .benefit-bullets li {
  padding-left: 1.5rem; position: relative; color: var(--cocoa); font-size: .98rem; line-height: 1.4;
}
.woocommerce div.product .benefit-bullets li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--moss);
}

/* P1 fix (2026-07-12): purchase reassurance beside the CTA, instead of
   leaving delivery/returns/payment info buried in the FAQ/footer.
   Round 2 (2026-07-12, QA audit): bumped from .82rem/muted (~13px, low
   contrast) to a legible 15px on --text, and its link gets its own
   underline + hover state since it's now a real link ("14-day returns"),
   not plain text. */
.woocommerce div.product .purchase-reassurance {
  margin: .1rem 0 0; font-size: .95rem; line-height: 1.5; color: var(--text);
  /* CO-102 (2026-07-23): the shipping span inside this line now swaps from a
     server-rendered placeholder to the real geo-resolved text on load (see
     functions.php's woocommerce_single_product_summary shipping hook + the
     minicart.js hydrate fetch) — reserve 2 lines' worth of height so that
     swap can never shift the CTA/tabs/cross-sell content below it, whichever
     direction the wrap count would otherwise move. */
  min-height: 2.85rem;
}
.woocommerce div.product .purchase-reassurance a {
  color: var(--clay-ink); font-weight: 600; text-decoration: underline dotted var(--clay);
  text-underline-offset: 2px;
}
.woocommerce div.product .purchase-reassurance a:hover,
.woocommerce div.product .purchase-reassurance a:focus-visible { color: var(--cocoa); }

/* CO-134 (2026-08-27): notify-me box on an out-of-stock PDP, replacing the
   add-to-cart form Woo doesn't render in that state. Same --oat-deep
   callout treatment as the <details> panels above; .waitlist-form/
   .form-note/.form-success are the homepage newsletter form's existing
   styles (main.css) — reused as-is, not redefined here. */
.woocommerce div.product .pdp-notify {
  background: var(--oat-deep); border-radius: var(--radius-sm); padding: 1.1rem 1.2rem; margin: 1rem 0;
}
.woocommerce div.product .pdp-notify-heading { font-weight: 600; margin: 0 0 .3rem; color: var(--cocoa); }
.woocommerce div.product .pdp-notify-sub { font-size: .92rem; color: var(--muted); margin: 0 0 .8rem; }
.woocommerce div.product .pdp-notify .waitlist-form { max-width: none; }

/* P1 fix (2026-07-12, QA audit): "150 ml" beside the price — supporting
   text, not competing with the price's own weight/color. */
.woocommerce div.product p.price .product-volume {
  font-size: 1rem; font-weight: 500; color: var(--muted); margin-left: .3rem;
}

/* P1 fix (2026-07-12): raw SKU/Category row read as technical WooCommerce
   chrome in the middle of an editorial buying area — not customer-useful
   here (still visible to anyone inspecting the order/admin side). */
.woocommerce div.product .product_meta { display: none; }
/* P0 fix (2026-07-12): CTA was small relative to the gallery/certification
   panel, and the quantity stepper carried equal visual weight (same pill
   shape, same border strength) — competing with rather than deferring to
   "Add to bag". Quantity is now compact and quiet; the button is the one
   confident, full-width-leaning shape on the row. */
.woocommerce div.product form.cart { margin: 1.4rem 0 1.8rem; display: flex; align-items: stretch; gap: .75rem; flex-wrap: wrap; }
.woocommerce div.product form.cart div.quantity { flex: 0 0 auto; }
.woocommerce div.product form.cart div.quantity .qty {
  width: 4.2rem; height: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .6rem .5rem; background: transparent; color: var(--muted); font-size: .95rem;
}
/* P2 fix (2026-07-13): consistent 44px touch target + visible focus ring —
   the qty input had neither before. */
.woocommerce div.product form.cart div.quantity .qty:focus-visible {
  outline: 2px solid var(--clay); outline-offset: 1px; border-color: var(--clay);
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 1 1 220px; min-height: 52px; font-size: 1.05rem; padding: 0 1.8rem !important;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
}
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--cocoa) !important; outline-offset: 2px;
}
.woocommerce div.product form.cart .single_add_to_cart_button:active {
  background: var(--moss-deep) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin-bottom: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--line); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent; border: 0; border-radius: 0; margin: 0 1.2rem 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-weight: 600; color: var(--muted); padding: .8rem 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--cocoa); border-bottom: 2px solid var(--clay); }
.woocommerce div.product .woocommerce-tabs .panel { padding-top: 1.2rem; max-width: 820px; }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-of-type { display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* product page INCI details block. :not(.pdp-accordion__item) added 2026-07-13:
   this generic `<details>` selector was also matching the mobile-accordion
   <details> elements (item 42) — same tag, nested inside .woocommerce div.product
   — and beat the accordion's own desktop "invisible chrome" reset on specificity
   (2 classes here vs 1 there), so every accordion item rendered as an empty
   oat-deep card on desktop even when WooCommerce's tab-switch JS had hidden its
   panel content. Excluding pdp-accordion__item here leaves this rule's real
   target (the "Full ingredient list" toggle) untouched. */
.entry-content details:not(.pdp-accordion__item),
.woocommerce-Tabs-panel details:not(.pdp-accordion__item),
.woocommerce div.product details:not(.pdp-accordion__item) {
  background: var(--oat-deep); border-radius: var(--radius-sm); padding: .9rem 1.2rem; margin: 1rem 0;
}
.woocommerce div.product details summary { cursor: pointer; font-weight: 600; }
.woocommerce div.product details .inci, .entry-content details .inci { font-size: .9rem; color: var(--muted); margin-top: .7rem; }

/* ---------- WooCommerce: notices, cart, checkout ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--moss); background: var(--oat-soft); border-radius: var(--radius-sm); color: var(--text);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--moss); }
.woocommerce table.shop_table { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-color: var(--line); }
.woocommerce-cart .cart-collaterals .cart_totals, .woocommerce-checkout #order_review {
  background: var(--surface); border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow-soft);
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .9rem; background: var(--oat-soft);
}
.woocommerce form .form-row input.input-text:focus { outline: none; border-color: var(--clay); }

/* onsale badge */
.woocommerce span.onsale {
  background: var(--yuzu); color: var(--cocoa); border-radius: 999px; font-weight: 600;
  min-height: auto; min-width: auto; padding: .35em .9em; line-height: 1.4;
}

/* breadcrumbs */
.woocommerce .woocommerce-breadcrumb { color: var(--muted); font-size: .85rem; margin-top: 1.2rem; }
.woocommerce .woocommerce-breadcrumb a { color: var(--muted); }

/* CO-138: visible breadcrumb on journal singles + product_cat/journal-category archives —
   same pattern as .woocommerce-breadcrumb above, scoped to its own class since it renders
   outside the .woocommerce body-class wrapper on journal pages. */
.capyonsen-breadcrumb { color: var(--muted); font-size: .85rem; padding-top: 1.2rem; }
.capyonsen-breadcrumb a { color: var(--muted); }

/* star ratings in brand clay */
.woocommerce .star-rating span::before, .woocommerce p.stars a { color: var(--clay); }


/* CO-162: readable journal comparisons, scoped away from product tables. */
.single-post .entry-content .cleansing-comparison {
  width: 100%; table-layout: fixed; border-collapse: collapse; margin: 1.5rem auto;
  color: var(--cocoa); font-size: 17px; line-height: 1.55;
}
.single-post .entry-content .cleansing-comparison caption {
  text-align: left; font-weight: 600; margin-bottom: .65rem;
}
.single-post .entry-content .cleansing-comparison th,
.single-post .entry-content .cleansing-comparison td {
  padding: .75rem; border: 1px solid var(--line); text-align: left;
  vertical-align: top; overflow-wrap: anywhere;
}
.single-post .entry-content .cleansing-comparison th:first-child { width: 32%; }
.single-post .entry-content .cleansing-comparison thead { background: var(--oat-deep); }
.single-post .entry-content .cleansing-comparison tbody th { font-weight: 600; }

@media (min-width: 1181px) and (max-width: 1280px) {
  .single-post .main-nav { gap: .75rem; }
}