/* ============================================================
   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; padding-block: .25rem; 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); }
.entry-content h2 { margin-top: 1.6em; }
.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-deep);
}
.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;
}
@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-deep) !important; font-weight: 600; font-size: 1.02rem; display: block; margin: .35rem 0 .75rem;
}
.woocommerce ul.products li.product .price del { opacity: .5; margin-right: .4em; }
.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: #fff !important; border: 0 !important;
  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-deep) !important; color: #fff !important;
}
.woocommerce a.button.checkout-button, .woocommerce button[name="add-to-cart"], .single_add_to_cart_button {
  background: var(--moss) !important;
}
.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); }
.woocommerce div.product p.price { color: var(--clay-deep); font-size: 1.4rem; font-weight: 600; font-family: var(--font-body); }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--muted); font-size: 1.05rem; }
.woocommerce div.product form.cart { margin: 1.4rem 0 1.8rem; }
.woocommerce div.product form.cart div.quantity .qty {
  border: 1.5px solid var(--line); border-radius: 999px; padding: .7rem .4rem .7rem .9rem; background: var(--oat-soft);
}
.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: none; }

/* product page INCI details block */
.entry-content details, .woocommerce-Tabs-panel details, .woocommerce div.product details {
  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); }

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

/* ---------- Ingredient links + quick-info tooltips ---------- */
.ing-link {
  color: inherit; text-decoration: underline dotted var(--clay); text-underline-offset: 3px;
  position: relative; cursor: help;
}
.ing-link:hover, .ing-link:focus { color: var(--clay-deep); }
.ing-link::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 300px;
  background: var(--cocoa); color: var(--oat);
  font-size: .82rem; line-height: 1.45; font-weight: 400;
  padding: .6rem .85rem; border-radius: 10px;
  opacity: 0; visibility: hidden; transition: opacity .15s ease;
  z-index: 60; pointer-events: none; white-space: normal;
  box-shadow: var(--shadow-lift);
}
.ing-link:hover::after, .ing-link:focus::after { opacity: 1; visibility: visible; }
.ing-more { margin-top: 1rem; font-size: .92rem; }

/* glossary entries: anchor targets get breathing room under the sticky header */
.entry-content [id^="ing-"] { scroll-margin-top: 90px; }

/* ---------- Journal cards reuse (archives) ---------- */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2rem; }
@media (max-width: 900px) { .journal-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .journal-grid { grid-template-columns: 1fr; } }

/* ---------- Product accent borders in grid via category class ---------- */
li.product.product_cat-the-ritual { border-top: 4px solid var(--clay); }
li.product.product_cat-night-ritual { border-top: 4px solid var(--moss); }
li.product.product_cat-essentials { border-top: 4px solid var(--petal); }
li.product.product_cat-sets { border-top: 4px solid var(--yuzu); }