/* ============================================================
   GRILLY child theme — component refinements
   ------------------------------------------------------------
   Only what Blocksy cannot configure. One section per component,
   every rule scoped to a GRILLY class or a Blocksy element wrapper.
   Uses the tokens from grilly-tokens.css (loaded first).
   ============================================================ */

/* ---------- Header: announcement bar (Top Bar HTML elements) ---------- */

.g-announce {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g-s5);
  font-size: 13px;
  line-height: 1.4;
}

.g-announce li {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

/* orange dot before the first service item — the mockup's only accent in this row */
.g-announce li:first-child::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--g-orange);
  flex: none;
}

.g-announce-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-on-dark);
  text-decoration: none;
  white-space: nowrap;
}

.g-announce-link:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* mobile: one service item only (mockup behaviour) */
@media (max-width: 689.98px) {
  .g-announce li:nth-child(n + 2) {
    display: none;
  }
}

/* ---------- Header: search box (Blocksy Pro "Search Box", data-id="search-input") ---------- */

/* The pill: cream field, 1.5px charcoal border, 46px tall (mockup .searchbar form) */
.ct-header .ct-search-box .ct-search-form-inner {
  min-height: 46px;
  padding: 4px 5px 4px 18px;
  gap: 8px;
  background: var(--g-cream);
  border: 1.5px solid var(--g-char);
  border-radius: var(--g-r-pill);
  box-shadow: none;
  transition: background var(--g-ease);
}

.ct-header .ct-search-box .ct-search-form-inner:focus-within {
  background: var(--g-surface);
}

.ct-header .ct-search-box input[type="search"] {
  font-size: 16px; /* never below 16px — iOS zooms the page on focus */
  min-width: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ct-header .ct-search-box input[type="search"]:focus {
  outline: none;
  box-shadow: none;
}

/* Magnifier on the left — only when the submit button is a text button
   (Blocksy: Search Box → Submit Button → text). With an icon button the
   icon already lives in the button, so nothing is added here. */
.ct-header .ct-search-form[data-submit-button$=":text"] .ct-search-form-inner::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--g-ink-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Submit button: orange pill, ink text (never white on orange at this size) */
.ct-header .ct-search-box .ct-search-form-inner > button[type="submit"] {
  flex: none;
  height: 36px;
  min-height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--g-r-pill);
  background: var(--g-orange);
  color: var(--g-on-orange);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  transition: background var(--g-ease), color var(--g-ease);
}

.ct-header .ct-search-box .ct-search-form-inner > button[type="submit"]:hover {
  background: var(--g-orange-600);
  color: #fff;
}

/* Icon-only submit (Blocksy "…:icon") → 36px orange circle */
.ct-header .ct-search-form[data-submit-button$=":icon"] .ct-search-form-inner > button[type="submit"] {
  width: 36px;
  padding: 0;
  justify-content: center;
}

.ct-header .ct-search-box .ct-search-form-inner > button[type="submit"] svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ---------- Header: cart — "Basket" when empty, running total otherwise ---------- */

/* Blocksy prints only the amount inside .ct-label[data-price="yes"], so the
   empty-state word comes from CSS. Per storefront, set the text in
   Customizer → Additional CSS:  :root { --g-cart-empty-label: "Ostoskori"; }
   Browsers without :has() simply keep showing the amount. */
.ct-header .ct-header-cart .ct-label[data-price="yes"] {
  font-variant-numeric: tabular-nums;
}

.ct-header .ct-header-cart:has(.ct-dynamic-count-cart[data-count="0"]) .ct-label[data-price="yes"] .ct-amount {
  display: none;
}

.ct-header .ct-header-cart:has(.ct-dynamic-count-cart[data-count="0"]) .ct-label[data-price="yes"]::before {
  content: var(--g-cart-empty-label, "Basket");
}

/* ---------- Header: category navigation (Bottom Row menus) ---------- */

/* Menu items carry WordPress CSS classes set in Appearance → Menus.
   Blocksy colours menu links through --theme-link-* variables, so the
   overrides are set as variables on the item (Blocksy-native), with a direct
   colour on the link as a fallback. */

/* Deals: the one orange item — orange-on-dark tone, never pure orange on charcoal */
.ct-header .menu > .g-nav-deal {
  --theme-link-initial-color: var(--g-orange-dark);
  --theme-link-hover-color: #fff;
}
.ct-header .menu > .g-nav-deal > .ct-menu-link {
  color: var(--g-orange-dark);
}
.ct-header .menu > .g-nav-deal > .ct-menu-link:hover {
  color: #fff;
}

/* Academy / Recipes: knowledge links sit quieter than commerce links */
.ct-header .menu > .g-nav-muted {
  --theme-link-initial-color: var(--g-on-dark-muted);
  --theme-link-hover-color: #fff;
}
.ct-header .menu > .g-nav-muted > .ct-menu-link {
  color: var(--g-on-dark-muted);
}
.ct-header .menu > .g-nav-muted > .ct-menu-link:hover {
  color: #fff;
}

/* ---------- Header: full-bleed rows, contained content ---------- */

/* Rows stay "Full Width" in Blocksy (background edge to edge, like the
   mockup's announcement, nav and footer bands); only the row content is
   limited to the site container so it lines up with the page. Covers the
   header and the footer builder rows alike. */
.ct-header [data-row] > .ct-container-fluid,
.ct-footer [data-row] > .ct-container-fluid {
  max-width: var(--theme-normal-container-max-width, 1280px);
  margin-inline: auto;
}

/* Search box: 100% of its column in Blocksy, never wider than the mockup's 640px */
.ct-header .ct-search-box {
  width: 100%;
  max-width: 640px;
}

/* ---------- Footer: widget columns, tagline, bottom row ---------- */

.ct-footer .widget-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  color: #fff;
  margin: 0 0 14px;
}

.ct-footer .widget_nav_menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ct-footer .widget_nav_menu li {
  margin: 0 0 10px;
}

.ct-footer .widget_nav_menu a {
  text-decoration: none;
}

/* brand column tagline under the logo */
.ct-footer .g-footer-tagline {
  color: var(--g-on-dark-muted);
  font-size: 13px;
  line-height: 1.6;
  max-width: 240px;
  margin: 12px 0 0;
}

/* bottom row text ("Other GRILLY stores") */
.ct-footer .g-footer-markets {
  font-size: 13px;
  color: var(--g-on-dark-muted);
}

.ct-footer .g-footer-markets a {
  color: #CFC8B9;
  text-decoration: none;
}

.ct-footer .g-footer-markets a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Product card ([data-products] grids: archives, shortcodes) ---------- */

/* The card box: white, hairline border, md radius; hover = charcoal border + lift */
[data-products] .product {
  background: var(--g-surface);
  border: 1px solid var(--g-line-2);
  border-radius: var(--g-r-md);
  overflow: hidden;
  transition: border-color var(--g-ease), transform var(--g-ease);
}

[data-products] .product:hover {
  border-color: var(--g-char);
  transform: translateY(-2px);
}

/* Media area: warm surface behind packshots, divider under the image */
[data-products] .product > figure {
  margin: 0;
  padding: 14px;
  background: var(--g-surface-2);
  border-bottom: 1px solid var(--g-line);
}

/* Body rhythm: figure bleeds to the edges, everything else gets side margins */
[data-products] .product > .entry-meta {
  list-style: none;
  margin: 14px 16px 0;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--g-muted);
}

[data-products] .product > .entry-meta a {
  color: inherit;
}

[data-products] .product .woocommerce-loop-product__title {
  margin: 6px 16px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.008em;
}

/* long Finnish names: two lines, then ellipsis */
[data-products] .product .woocommerce-loop-product__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-products] .product > .price {
  margin: 8px 16px 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--g-ink);
}

[data-products] .product > .price del {
  font-size: 13px;
  font-weight: 500;
  color: var(--g-muted);
}

[data-products] .product > .price ins {
  text-decoration: none;
}

/* Actions: small full-width pill; Blocksy's margin-top:auto keeps feet aligned */
[data-products] .product .ct-woo-card-actions {
  margin: 12px 16px 16px;
}

[data-products] .product .ct-woo-card-actions .button {
  width: 100%;
  justify-content: center;
  min-height: 40px;
  padding: 8px 16px;
  font-size: 13px;
}

/* Out of stock: ghost button (charcoal outline), not a dead primary */
[data-products] .product.outofstock .ct-woo-card-actions .button {
  background: transparent;
  color: var(--g-ink);
  box-shadow: inset 0 0 0 1.5px var(--g-char);
}

[data-products] .product.outofstock .ct-woo-card-actions .button:hover {
  background: var(--g-char);
  color: #fff;
}

/* Badges: one visual system — 11px caps chip, radius 6. Sale = orange with ink
   text (white on orange fails contrast at this size); status = charcoal. The
   selector list covers Woo's .onsale and Blocksy badge classes; extras no-op. */
[data-products] .product :is(.onsale, .ct-woo-badge, [class*="badge"]) {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--g-r-xs);
  background: var(--g-orange);
  color: var(--g-on-orange);
  box-shadow: none;
}

[data-products] .product.outofstock :is(.onsale, .ct-woo-badge, [class*="badge"]) {
  background: var(--g-char);
  color: #fff;
}

/* ---------- Product card: stock line — always visible, three states
   (shape + colour, never colour alone). Selector list covers Woo's .stock and
   Blocksy variants; scoped to the card so non-matching parts no-op. ---------- */

[data-products] .product :is(.stock, [class*="stock-info"], p[class*="stock"]) {
  margin: 8px 16px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--g-ink-2);
  display: flex;
  align-items: center;
  gap: 7px;
}

[data-products] .product :is(.stock, [class*="stock-info"], p[class*="stock"])::before {
  content: "";
  flex: none;
}

/* in stock: green dot */
[data-products] .product .in-stock::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g-ok);
}

/* low stock: amber triangle (the class comes from grilly-woocommerce.php) */
[data-products] .product .in-stock.low-stock {
  color: var(--g-warn);
}

[data-products] .product .in-stock.low-stock::before {
  width: 0;
  height: 0;
  border-radius: 0;
  background: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid currentColor;
}

/* backorder: quiet dot */
[data-products] .product .available-on-backorder::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g-muted);
}

/* out of stock: grey square; the state lives here + the ghost button,
   so the card badge is hidden on out-of-stock products (no third voice) */
[data-products] .product .out-of-stock {
  color: var(--g-muted);
}

[data-products] .product .out-of-stock::before {
  width: 7px;
  height: 7px;
  background: var(--g-muted);
}

[data-products] .product.outofstock :is(.onsale, .ct-woo-badge, [class*="badge"]) {
  display: none;
}

/* ---------- PLP hero: the intro reads at lede width, not container width ---------- */
.hero-section :is(.entry-excerpt, .page-description, .ct-description, p) {
  max-width: 68ch;
}

/* ---------- PLP sidebar: filter group rhythm — short accent over the heading,
   not a full-width rule (the mockup's accent, minus the table effect) ---------- */

.ct-sidebar .widget-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 12px;
}

.ct-sidebar .widget-title::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--g-orange);
  margin-bottom: 10px;
}

.ct-sidebar .widget + .widget,
.ct-sidebar [class*="widget"] + [class*="widget"] {
  margin-top: 28px;
}

/* ---------- Product card: consumables meta line (qty · pepper scale) ---------- */

[data-products] .product .g-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 16px 0;
  font-size: 13px;
  color: var(--g-muted);
}

[data-products] .product .g-card-meta__sep {
  color: var(--g-line-2);
}

.g-heat {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* chili glyph via mask: filled = orange, empty = hairline tone (shape + colour) */
.g-pepper {
  width: 12px;
  height: 12px;
  background: var(--g-line-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 3c.9 0 1.6.7 1.6 1.6 0 .6-.3 1.1-.8 1.4.4 1 .6 2.3.6 3.6 0 6.3-4.6 11.4-11.2 11.4-2 0-3.8-1.4-3.8-2.9 0-1 .7-1.8 1.7-2 4.2-1 7.4-4.5 8-8.8.1-.9.5-1.8 1.1-2.4.7-.6 1.7-.9 2.8-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 3c.9 0 1.6.7 1.6 1.6 0 .6-.3 1.1-.8 1.4.4 1 .6 2.3.6 3.6 0 6.3-4.6 11.4-11.2 11.4-2 0-3.8-1.4-3.8-2.9 0-1 .7-1.8 1.7-2 4.2-1 7.4-4.5 8-8.8.1-.9.5-1.8 1.1-2.4.7-.6 1.7-.9 2.8-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.g-pepper.is-filled {
  background: var(--g-orange);
}

/* ---------- PDP: brand link above the title (printed by grilly-woocommerce.php) ---------- */

.single-product .g-pdp-brand {
  display: inline-block;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--g-muted);
  text-decoration: none;
}

.single-product .g-pdp-brand:hover {
  color: var(--g-orange-ink);
}

/* ============================================================
   PDP A (step 6.2) — single product, Blocksy markup:
   .product > .product-entry-wrapper (gallery + .entry-summary)
            > .woocommerce-tabs[data-type^="type-4"] > article
            > .g-pdp-below (child hook) > .woocommerce-tabs + aside.g-pdp-aside
            > section.related
   ============================================================ */

/* ---------- Summary column = the buy panel (audit: whole column, not a box-in-a-box) ---------- */

.single-product .product .entry-summary {
  background: var(--g-surface);
  border: 1.5px solid var(--g-char);
  border-radius: var(--g-r-lg);
  padding: var(--g-s6);
}

.single-product .product .entry-summary .product_title {
  margin: 0 0 var(--g-s2);
  letter-spacing: -.022em;
  line-height: 1.08;
  text-wrap: balance;
}

/* price 34 px, tabular (mockup .buybox .price__now) */
.single-product .product .entry-summary > .price {
  margin: 0 0 var(--g-s4);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--g-ink);
}

.single-product .product .entry-summary > .price del {
  font-size: 16px;
  font-weight: 500;
  color: var(--g-muted);
}

.single-product .product .entry-summary > .price ins {
  text-decoration: none;
}

.single-product .product .woocommerce-product-details__short-description {
  color: var(--g-ink-2);
}

/* ---------- Key facts strip (dl.g-keyfacts from grilly-woocommerce.php → mockup .specstrip) ---------- */

.single-product .g-keyfacts {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: var(--g-s4) 0 0;
  background: var(--g-line);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r-md);
  overflow: hidden;
}

.single-product .g-keyfacts > div {
  flex: 1 1 120px;
  margin: 0;
  padding: 12px 14px;
  background: var(--g-surface);
}

.single-product .g-keyfacts dt {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--g-muted);
}

.single-product .g-keyfacts dd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--g-ink);
}

.single-product .g-keyfacts .g-pepper {
  width: 14px;
  height: 14px;
}

/* heat cell: pods + "3 / 5 · Medium" stay on one line; the other cells may wrap */
.single-product .g-keyfacts > div:first-child {
  flex-basis: 170px;
}

.single-product .g-keyfacts .g-num {
  white-space: nowrap;
}

/* ---------- Stock line: same three states as the card (shape + colour) ---------- */

.single-product .product .entry-summary .stock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--g-s3);
  font-size: 14px;
  font-weight: 600;
  color: var(--g-ink-2);
}

.single-product .product .entry-summary .stock::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g-ok);
}

.single-product .product .entry-summary .stock.low-stock {
  color: var(--g-warn);
}

.single-product .product .entry-summary .stock.low-stock::before {
  width: 0;
  height: 0;
  border-radius: 0;
  background: none;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid currentColor;
}

.single-product .product .entry-summary .stock.available-on-backorder::before {
  background: var(--g-muted);
}

.single-product .product .entry-summary .stock.out-of-stock {
  color: var(--g-muted);
}

.single-product .product .entry-summary .stock.out-of-stock::before {
  border-radius: 0;
  background: var(--g-muted);
}

/* ---------- Reasons to Buy → trust list (mockup .trustlist) ---------- */

.single-product .product .ct-product-additional-info {
  margin-top: var(--g-s4);
}

.single-product .product .ct-product-additional-info .ct-module-title:empty {
  display: none;
}

.single-product .product .ct-product-additional-info ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.single-product .product .ct-product-additional-info li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  font-size: 13px;
  color: var(--g-ink-2);
}

.single-product .product .ct-product-additional-info .ct-icon-container {
  flex: none;
  margin-top: 1px;
  color: var(--g-orange-ink);
}

.single-product .product .ct-product-additional-info .ct-icon-container svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ---------- Below the fold: tabs left, expert tip right (mockup split) ----------
   .g-pdp-below wraps Woo's tabs + aside.g-pdp-aside (grilly-woocommerce.php);
   is-width-constrained is Blocksy's own container class. */

.single-product .g-pdp-below {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  column-gap: var(--g-gap-editorial);
  align-items: start;
}

/* the tabs are a grid item now: no own max-width / centring */
.single-product .g-pdp-below > .woocommerce-tabs {
  grid-column: 1;
  width: 100%;
  max-width: none;
  margin: 0;
}

.single-product .g-pdp-below > .g-pdp-aside {
  grid-column: 2;
}

/* no tip → tabs take the full width */
.single-product .g-pdp-below:not(:has(> .g-pdp-aside)) > .woocommerce-tabs {
  grid-column: 1 / -1;
}

@media (max-width: 999.98px) {
  .single-product .g-pdp-below > .woocommerce-tabs,
  .single-product .g-pdp-below > .g-pdp-aside {
    grid-column: 1 / -1;
  }
}

/* Expanded tabs (type-4): Blocksy's tab-title headings as real headings, not caps labels */
.single-product .woocommerce-tabs[data-type^="type-4"] .entry-content > h2:first-child {
  margin: 0 0 var(--g-s3);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: none;
}

.single-product .woocommerce-tabs[data-type^="type-4"] .entry-content + .entry-content {
  margin-top: var(--g-s7);
}

/* Additional information table: zebra on the warm surface, no outer chrome */
.single-product .shop_attributes {
  border: 1px solid var(--g-line);
  border-radius: var(--g-r-md);
  overflow: hidden;
}

.single-product .shop_attributes th {
  font-weight: 600;
  color: var(--g-ink);
}

.single-product .shop_attributes tr:nth-child(even) > * {
  background: var(--g-surface-2);
}

/* ---------- Expert tip card (mockup .tip) ---------- */

.g-pdp-aside {
  padding-top: var(--g-s8); /* aligns with the first tab heading */
}

.g-tip {
  display: flex;
  gap: var(--g-s5);
  align-items: flex-start;
  padding: var(--g-s6);
  background: var(--g-char);
  color: #F1EBDD;
  border-radius: var(--g-r-lg);
}

.g-tip__who {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--g-orange);
  color: var(--g-on-orange);
  font-weight: 800;
}

.g-tip__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.g-tip__body p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #D8D2C4;
  max-width: 62ch;
}

.g-tip__body .g-tip__author {
  font-size: 13px;
  color: var(--g-on-dark-muted);
}

/* ---------- Related: section spacing; cards reuse the [data-products] rules ---------- */

.single-product div.product > .related {
  margin-top: var(--g-section);
}

.single-product div.product > .related > .ct-module-title {
  margin: 0 0 var(--g-s5);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ---------- Sale price: −% chip and the 30-day lowest price line (grilly-woocommerce.php) ---------- */

.single-product .entry-summary > .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
}

.single-product .entry-summary > .price .g-price-pct {
  align-self: center;
  padding: 3px 8px;
  border-radius: var(--g-r-xs);
  background: var(--g-orange);
  color: var(--g-on-orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

.single-product .entry-summary > .price .g-price-low {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--g-muted);
}

/* ============================================================
   PDP B (step 7.1) — equipment additions + compliance sections
   ============================================================ */

/* SKU · EAN under the title (non-food) */
.single-product .entry-summary .g-pdp-ids {
  margin: -4px 0 var(--g-s3);
  font-size: 13px;
  color: var(--g-muted);
}

/* Derived trust lines (delivery from shipping class, warranty) — same voice
   as the Reasons to Buy list that follows; icons are outline, not filled */
.single-product .g-trust {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: var(--g-s4) 0 0;
  padding: 0;
  list-style: none;
}

.single-product .g-trust li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--g-ink-2);
}

.single-product .g-trust svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--g-orange-ink);
}

/* Reasons to Buy directly after .g-trust: one list rhythm, no double gap */
.single-product .g-trust + .ct-product-additional-info {
  margin-top: 9px;
}

/* Compliance / food facts inside the expanded tabs (dl.g-facts) */
.single-product .g-facts {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 12px 24px;
  margin: 0;
  max-width: 68ch;
}

.single-product .g-facts > div {
  display: contents;
}

.single-product .g-facts dt {
  font-weight: 600;
  color: var(--g-ink);
}

.single-product .g-facts dd {
  margin: 0;
  color: var(--g-ink-2);
}

.single-product .g-facts dd p:last-child {
  margin-bottom: 0;
}

@media (max-width: 689.98px) {
  .single-product .g-facts {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .single-product .g-facts dd {
    margin-bottom: 10px;
  }
}

/* ---------- Heat level filter: chili pods before each option (sidebar + mobile canvas).
   One pod mask repeated 5×; the filled share comes from the term slug in the
   link (heat-1 … heat-5). Text stays for screen readers and the counter. ---------- */

:is(.ct-sidebar, .ct-panel) a[href*="heat-level"][href*="heat-"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

:is(.ct-sidebar, .ct-panel) a[href*="heat-level"][href*="heat-"]::before {
  content: "";
  flex: none;
  width: 60px;  /* 5 × 12px */
  height: 12px;
  background: linear-gradient(to right, var(--g-orange) var(--g-heat-fill, 0%), var(--g-line-2) var(--g-heat-fill, 0%));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 3c.9 0 1.6.7 1.6 1.6 0 .6-.3 1.1-.8 1.4.4 1 .6 2.3.6 3.6 0 6.3-4.6 11.4-11.2 11.4-2 0-3.8-1.4-3.8-2.9 0-1 .7-1.8 1.7-2 4.2-1 7.4-4.5 8-8.8.1-.9.5-1.8 1.1-2.4.7-.6 1.7-.9 2.8-.9z'/%3E%3C/svg%3E") left center / 12px 12px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 3c.9 0 1.6.7 1.6 1.6 0 .6-.3 1.1-.8 1.4.4 1 .6 2.3.6 3.6 0 6.3-4.6 11.4-11.2 11.4-2 0-3.8-1.4-3.8-2.9 0-1 .7-1.8 1.7-2 4.2-1 7.4-4.5 8-8.8.1-.9.5-1.8 1.1-2.4.7-.6 1.7-.9 2.8-.9z'/%3E%3C/svg%3E") left center / 12px 12px repeat-x;
}

:is(.ct-sidebar, .ct-panel) a[href*="heat-level"][href*="heat-1"] { --g-heat-fill: 20%; }
:is(.ct-sidebar, .ct-panel) a[href*="heat-level"][href*="heat-2"] { --g-heat-fill: 40%; }
:is(.ct-sidebar, .ct-panel) a[href*="heat-level"][href*="heat-3"] { --g-heat-fill: 60%; }
:is(.ct-sidebar, .ct-panel) a[href*="heat-level"][href*="heat-4"] { --g-heat-fill: 80%; }
:is(.ct-sidebar, .ct-panel) a[href*="heat-level"][href*="heat-5"] { --g-heat-fill: 100%; }