/* ============================================================
   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%; }

/* ============================================================
   9.4 Cookie consent (WP Consent Mode v2 plugin) — GRILLY theme
   The plugin exposes --wpcc-* variables; nothing in the plugin
   is touched. Charcoal panel, orange primary with ink text,
   Plus Jakarta Sans.
   ============================================================ */
:root {
  --wpcc-font: inherit; /* Plus Jakarta Sans from the theme */
  --wpcc-bg: var(--g-char);
  --wpcc-fg: #fff;
  --wpcc-muted: var(--g-on-dark-muted, #C9C1B2);
  --wpcc-line: #413D37;
  --wpcc-radius: var(--g-r-md);
  --wpcc-shadow: 0 18px 50px rgba(28,27,25,.35);
  --wpcc-btn-bg: var(--g-orange);
  --wpcc-btn-fg: var(--g-on-orange);
  --wpcc-btn-hover: var(--g-orange-600);
  --wpcc-ghost-fg: #fff;
  --wpcc-ghost-border: rgba(255,255,255,.35);
  --wpcc-overlay: rgba(28,27,25,.55);
  --wpcc-accent: var(--g-orange-dark);
  --wpcc-z: 999999;
}
/* hover on orange → white text, like the site buttons */
.wpccv2-btn--primary:hover { color: #fff; }
/* footer "Cookie settings" link inherits footer link styling; nothing to add */

/* ---------- Header: mega menu (Blocksy Pro Mega Menu extension) ----------
   Scoped to the menu item's own CSS class "g-mega" (Appearance → Menus →
   top-level item → CSS Classes), so it does not depend on Blocksy markup.
   Charcoal panel, column headings orange-on-dark caps, links off-white,
   hover white + orange underline, no dividers, promo column = cream card.
   Structure: level 2 = column heading (URL #), level 3 = links. */

/* panel */
.ct-header .menu > li.g-mega > .sub-menu,
.ct-header .menu > li.g-mega .sub-menu {
  --theme-link-initial-color: var(--g-on-dark);
  --theme-link-hover-color: #fff;
  --dropdown-text-initial-color: var(--g-on-dark);
  --dropdown-text-hover-color: #fff;
  --dropdown-background-color: var(--g-char);
  --dropdown-divider-color: transparent;
}
.ct-header .menu > li.g-mega > .sub-menu {
  background: var(--g-char);
  border-top: 1px solid #413D37;
  box-shadow: 0 18px 40px rgba(20, 18, 16, .35);
  padding: var(--g-s7) 0;
}

/* columns: no inner borders/dividers anywhere in the panel */
.ct-header .menu > li.g-mega .sub-menu li,
.ct-header .menu > li.g-mega .sub-menu a,
.ct-header .menu > li.g-mega .sub-menu a::after,
.ct-header .menu > li.g-mega .sub-menu a::before {
  border: 0 !important;
  background-image: none !important;
}
.ct-header .menu > li.g-mega > .sub-menu > li {
  padding: 0 var(--g-s6);
}

/* column heading = level-2 item (first link/span in the column) */
.ct-header .menu > li.g-mega > .sub-menu > li > a,
.ct-header .menu > li.g-mega > .sub-menu > li > span,
.ct-header .menu > li.g-mega > .sub-menu > li > .ct-menu-link {
  display: block;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g-orange-dark) !important;   /* #FF8A4C */
  padding: 0 0 14px !important;
  pointer-events: none;
}

/* links = level-3 items */
.ct-header .menu > li.g-mega > .sub-menu > li > .sub-menu > li > a {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--g-on-dark) !important;       /* #EDE7DA */
  padding: 6px 0 !important;
  background: none !important;
}
.ct-header .menu > li.g-mega > .sub-menu > li > .sub-menu > li > a:hover {
  color: #fff !important;
  text-decoration: underline;
  text-decoration-color: var(--g-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* "All …" rows: muted, read as the exit */
.ct-header .menu > li.g-mega > .sub-menu > li > .sub-menu > li.g-mega-all > a {
  color: var(--g-on-dark-muted) !important;
  margin-top: 4px;
}

/* promo column: one product card from a Content Block, cream card on charcoal */
.ct-header .menu > li.g-mega > .sub-menu > li.g-mega-promo {
  background: none;
  padding: 0 var(--g-s6);
}
.ct-header li.g-mega-promo [data-products] .product { border-color: transparent; }
.ct-header li.g-mega-promo .g-eyebrow { margin-bottom: 10px; }
.ct-header li.g-mega-promo [data-products] .product { margin: 0; }
.ct-header li.g-mega-promo [data-products] .product .ct-woo-card-actions .button { width: 100%; }

/* mega promo: compact media box (Blocksy keeps card images in a ratio box) */
.ct-header li.g-mega-promo .product > figure { padding: 10px; }
.ct-header li.g-mega-promo .product .ct-media-container {
  aspect-ratio: auto !important;
  padding-bottom: 0 !important;
  height: 150px;
}
.ct-header li.g-mega-promo .product .ct-media-container img {
  position: static;
  height: 100%;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
}
.ct-header li.g-mega-promo .product:hover { transform: none; }
/* mega promo column has no content in the offcanvas menu */
.ct-panel .mobile-menu li.g-mega-promo { display: none; }
/* PDP: quote CTA for pallet-class products */
.single-product .g-quote { margin: var(--g-s4) 0 0; }
.single-product .g-quote__btn { width: 100%; justify-content: center; }
.single-product .g-quote__note { margin: 10px 0 0; font-size: 13px; color: var(--g-ink-2); }

/* by-request products: no express/PayPal buttons on the PDP */
.g-by-request [id^="ppc-button"],
.g-by-request .ppc-button-wrapper,
.g-by-request .ppcp-button-apm,
.g-by-request #ppcp-messages { display: none !important; }

/* ============================================================
   Contact Form 7 — forms on content pages (Customer service /
   Asiakaspalvelu, withdrawal form). Pages use Blocksy's boxed
   content area (sand background), so fields get a white surface
   and a visible border; the button is the site's orange pill.
   Scoped to .wpcf7 only.
   ============================================================ */

.wpcf7 form {
  margin-top: var(--g-s5);
}

.wpcf7 label {
  display: block;
  margin: 0 0 var(--g-s4);
  font-size: 14px;
  font-weight: 600;
  color: var(--g-ink);
}

.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  background: var(--g-surface);
  border: 1px solid var(--g-line-2);
  border-radius: var(--g-r-md);
  color: var(--g-ink);
  font-size: 16px; /* iOS: no zoom on focus */
  font-weight: 400;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--g-ease), box-shadow var(--g-ease);
}

.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):focus {
  border-color: var(--g-orange);
  outline: none;
  box-shadow: 0 0 0 3px rgba(223, 79, 0, .18);
}

.wpcf7 textarea.wpcf7-form-control {
  min-height: 160px;
  resize: vertical;
}

/* acceptance checkbox: one line, normal weight */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 var(--g-s4);
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
  flex: none;
  margin-top: 3px;
  accent-color: var(--g-orange);
}

.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--g-ink-2);
}

/* submit: same pill as the site buttons */
.wpcf7 .wpcf7-submit {
  min-height: 46px;
  padding: 12px 28px;
  border: 0;
  border-radius: var(--g-r-pill);
  background: var(--g-orange);
  color: var(--g-on-orange);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--g-ease), color var(--g-ease);
}

.wpcf7 .wpcf7-submit:hover {
  background: var(--g-orange-600);
  color: #fff;
}

.wpcf7 .wpcf7-spinner {
  margin-left: 12px;
}

/* validation + response */
.wpcf7 .wpcf7-not-valid {
  border-color: #B3261E;
}

.wpcf7 .wpcf7-not-valid-tip {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  color: #B3261E;
}

.wpcf7 .wpcf7-response-output {
  margin: var(--g-s4) 0 0;
  padding: 12px 16px;
  border-width: 1px;
  border-radius: var(--g-r-md);
  font-size: 14px;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--g-ok);
  background: rgba(46, 125, 50, .08);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: #B3261E;
  background: rgba(179, 38, 30, .08);
}

/* ============================================================
   Checkout (classic [woocommerce_checkout]) — body.woocommerce-checkout
   ------------------------------------------------------------
   The checkout sits in Blocksy's boxed (sand) content area, so every
   block becomes a white card with the same language as the PDP buy
   panel: white surface, 1.5 px charcoal border, large radius. Fields get
   a visible border (--g-input-border, ≥3:1), payment methods become
   selectable rows, "Osta nyt" is the site's orange pill, full width.
   Scoped to body.woocommerce-checkout; the order-received page shares the
   body class, so only its overview strip is styled at the end.
   ============================================================ */

/* ---------- Section cards (left column) ---------- */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
  background: var(--g-surface);
  border: 1.5px solid var(--g-char);
  border-radius: var(--g-r-lg);
  padding: var(--g-s6);
  margin-bottom: var(--g-s5);
}

body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-shipping-fields > h3,
body.woocommerce-checkout .woocommerce-additional-fields > h3,
body.woocommerce-checkout #order_review_heading {
  margin: 0 0 var(--g-s5);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--g-ink);
}

/* the "ship to a different address" heading holds a checkbox label */
body.woocommerce-checkout #ship-to-different-address label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

body.woocommerce-checkout #ship-to-different-address input[type="checkbox"],
body.woocommerce-checkout .woocommerce-form__input-checkbox,
body.woocommerce-checkout input[type="radio"] {
  accent-color: var(--g-orange);
}

/* ---------- Fields ---------- */
body.woocommerce-checkout .form-row {
  margin-bottom: var(--g-s4);
}

body.woocommerce-checkout .form-row label {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--g-ink);
}

body.woocommerce-checkout .form-row .required,
body.woocommerce-checkout .form-row abbr.required {
  color: var(--g-orange-ink);
  text-decoration: none;
}

body.woocommerce-checkout .form-row .optional {
  font-weight: 400;
  color: var(--g-muted);
}

body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .select2-container--default .select2-selection--single {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  background: var(--g-surface);
  border: 1px solid var(--g-input-border);
  border-radius: var(--g-r-sm);
  color: var(--g-ink);
  font-size: 16px; /* iOS: no zoom on focus */
  font-weight: 400;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--g-ease), box-shadow var(--g-ease);
}

body.woocommerce-checkout .form-row textarea {
  min-height: 110px;
  resize: vertical;
}

body.woocommerce-checkout .form-row input.input-text::placeholder,
body.woocommerce-checkout .form-row textarea::placeholder {
  color: var(--g-muted);
  opacity: 1;
}

body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus,
body.woocommerce-checkout .select2-container--open .select2-selection--single,
body.woocommerce-checkout .select2-container--focus .select2-selection--single {
  border-color: var(--g-orange);
  outline: none;
  box-shadow: 0 0 0 3px rgba(223, 79, 0, .18);
}

/* country select (selectWoo): same box, text and arrow centred */
body.woocommerce-checkout .select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: var(--g-ink);
  line-height: 1.4;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0;
  height: 100%;
  right: 8px;
}

/* validation */
body.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .form-row.woocommerce-invalid select,
body.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection--single {
  border-color: var(--g-err);
}
body.woocommerce-checkout .form-row.woocommerce-validated input.input-text {
  border-color: var(--g-input-border);
}

/* ---------- Order review (right column) ---------- */
body.woocommerce-checkout #order_review {
  background: var(--g-surface);
  border: 1.5px solid var(--g-char);
  border-radius: var(--g-r-lg);
  padding: var(--g-s6);
}

body.woocommerce-checkout #order_review table.shop_table {
  width: 100%;
  margin: 0 0 var(--g-s5);
  border: 0;
  border-collapse: collapse;
}

body.woocommerce-checkout #order_review table.shop_table th,
body.woocommerce-checkout #order_review table.shop_table td {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--g-line);
  font-size: 15px;
  vertical-align: top;
  background: none;
}

body.woocommerce-checkout #order_review table.shop_table thead th {
  padding-top: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g-muted);
}

body.woocommerce-checkout #order_review table.shop_table td.product-total,
body.woocommerce-checkout #order_review table.shop_table tfoot td {
  text-align: right;
}

body.woocommerce-checkout #order_review .product-name {
  font-weight: 500;
  color: var(--g-ink);
}
body.woocommerce-checkout #order_review .product-quantity {
  font-weight: 600;
  color: var(--g-muted);
}

/* shipping line */
body.woocommerce-checkout #order_review .woocommerce-shipping-totals td {
  text-align: right;
}
body.woocommerce-checkout #order_review #shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* total: the one number that matters */
body.woocommerce-checkout #order_review tr.order-total th,
body.woocommerce-checkout #order_review tr.order-total td {
  padding-top: var(--g-s4);
  border-bottom: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--g-ink);
}
body.woocommerce-checkout #order_review tr.order-total small.includes_tax {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--g-muted);
}

/* ---------- Payment methods: selectable rows ---------- */
body.woocommerce-checkout #payment {
  background: none;
  border-radius: 0;
}

body.woocommerce-checkout #payment ul.payment_methods {
  margin: 0 0 var(--g-s4);
  padding: 0;
  list-style: none;
  border: 0;
}

body.woocommerce-checkout #payment ul.payment_methods > li {
  margin: 0 0 var(--g-s2);
  padding: var(--g-s4);
  background: var(--g-surface);
  border: 1px solid var(--g-input-border);
  border-radius: var(--g-r-md);
  transition: border-color var(--g-ease), background var(--g-ease);
}

body.woocommerce-checkout #payment ul.payment_methods > li:has(input[type="radio"]:checked) {
  border: 1.5px solid var(--g-orange);
  background: var(--g-surface-2);
}

body.woocommerce-checkout #payment ul.payment_methods > li > label {
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

body.woocommerce-checkout #payment div.payment_box {
  margin: var(--g-s3) 0 0;
  padding: 0;
  background: none;
  color: var(--g-ink-2);
  font-size: 14px;
}
body.woocommerce-checkout #payment div.payment_box::before,
body.woocommerce-checkout #payment div.payment_box::after {
  display: none;
}
body.woocommerce-checkout #payment div.payment_box p:last-child {
  margin-bottom: 0;
}

/* ---------- Privacy / terms / note ---------- */
body.woocommerce-checkout .woocommerce-privacy-policy-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--g-ink-2);
}
body.woocommerce-checkout .woocommerce-privacy-policy-text p {
  margin: 0 0 var(--g-s3);
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a,
body.woocommerce-checkout .woocommerce-privacy-policy-text a {
  color: var(--g-orange-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row {
  margin: var(--g-s3) 0 var(--g-s4);
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--g-ink);
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  flex: none;
  margin-top: 3px;
}

/* "what happens after you order" line (grilly-checkout.php) */
body.woocommerce-checkout .g-checkout-note {
  margin: 0 0 var(--g-s4);
  padding-top: var(--g-s4);
  border-top: 1px solid var(--g-line);
  font-size: 14px;
  line-height: 1.55;
  color: var(--g-ink-2);
}

/* ---------- Place order: the site's orange pill, full width ---------- */
body.woocommerce-checkout #place_order {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--g-r-pill);
  background: var(--g-orange);
  color: var(--g-on-orange);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background var(--g-ease), color var(--g-ease);
}
body.woocommerce-checkout #place_order:hover {
  background: var(--g-orange-600);
  color: #fff;
}

/* ---------- Coupon / login toggles and notices ---------- */
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-error {
  margin: 0 0 var(--g-s5);
  padding: 14px 18px;
  background: var(--g-surface);
  border: 1px solid var(--g-input-border);
  border-radius: var(--g-r-md);
  font-size: 15px;
  color: var(--g-ink);
}
body.woocommerce-checkout .woocommerce-error {
  border-color: var(--g-err);
  background: rgba(179, 38, 30, .06);
}
body.woocommerce-checkout .woocommerce-info a,
body.woocommerce-checkout .woocommerce-message a {
  color: var(--g-orange-ink);
  font-weight: 600;
}

/* ---------- Mobile / tablet ---------- */
@media (max-width: 689.98px) {
  body.woocommerce-checkout .woocommerce-billing-fields,
  body.woocommerce-checkout .woocommerce-shipping-fields,
  body.woocommerce-checkout .woocommerce-additional-fields,
  body.woocommerce-checkout #order_review {
    padding: var(--g-s5);
    border-radius: var(--g-r-md);
  }
}

/* ---------- Order received: overview strip ---------- */
body.woocommerce-order-received ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-s3);
  margin: 0 0 var(--g-s7);
  padding: 0;
  list-style: none;
}
body.woocommerce-order-received ul.woocommerce-order-overview li {
  flex: 1 1 160px;
  margin: 0;
  padding: var(--g-s4);
  background: var(--g-surface);
  border: 1px solid var(--g-line-2);
  border-radius: var(--g-r-md);
  border-right-style: solid;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--g-muted);
}
body.woocommerce-order-received ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--g-ink);
}

/* ---------- Checkout fixes (rev 2): controls, payment row divider, shipping label ---------- */

/* Blocksy draws radios/checkboxes with its own pseudo-elements, which collapsed
   inside the payment row. Use the native control at a fixed size instead. */
body.woocommerce-checkout #payment input[type="checkbox"],
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
body.woocommerce-checkout #ship-to-different-address input[type="checkbox"] {
  -webkit-appearance: auto;
  appearance: auto;
  flex: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 0 10px 0 0;
  padding: 0;
  vertical-align: -4px;
  accent-color: var(--g-orange);
  background: none;
  border: 0;
  box-shadow: none;
  cursor: pointer;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]::before,
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]::after,
body.woocommerce-checkout #ship-to-different-address input[type="checkbox"]::before,
body.woocommerce-checkout #ship-to-different-address input[type="checkbox"]::after {
  content: none;
  display: none;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  margin: 1px 0 0;
}

/* no hairline inside a payment row */
body.woocommerce-checkout #payment ul.payment_methods > li > label,
body.woocommerce-checkout #payment div.payment_box {
  border: 0;
  box-shadow: none;
}

/* the required-star of the terms box sits next to the text, not at the far edge */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.checkbox .required {
  margin-left: 2px;
}

/* shipping row: label left, price right */
body.woocommerce-checkout #order_review .woocommerce-shipping-totals th {
  text-align: left;
  font-weight: 600;
}
body.woocommerce-checkout #order_review .woocommerce-shipping-totals td,
body.woocommerce-checkout #order_review .woocommerce-shipping-totals td * {
  text-align: right;
}

/* Shipping row: the package label is blanked in PHP (one package only) — drop the empty cell/heading. */
body.woocommerce-checkout #order_review .woocommerce-shipping-totals th:empty {
  display: none;
}