/*
 * KitSure SureCart <-> Etch compatibility: surface-polish layer.
 *
 * Scoped under body.kitsure-sc-etch-compat (+ its -storefront /
 * -cart-checkout-enabled / -account-order-enabled variants). Enqueued
 * (handle kitsure-surecart-etch-compat) only when a REAL page-level
 * SureCart surface matches on the request -- never merely because the
 * site-wide floating cart drawer prints (see the M5 finding). Carries its
 * own copy of the --ks-sc-etch-* token set (on body.kitsure-sc-etch-compat)
 * so surface polish stays correct even when the theme bridge is off.
 *
 * The theme-bridge (light/dark token-sync) layer lives in the sibling
 * surecart-etch-theme-bridge.css; the one-click starter layouts and the
 * builder-canvas preview skeletons (.ks-sc-starter*, .ks-sc-spotlight*,
 * .kitsure-etch-preview*) live in surecart-etch-starter.css (2026-09-05
 * split), which depends on this file for the tokens and loads only where a
 * starter renders and inside the Etch canvas. The three files partition the
 * former single stylesheet with no rule overlap.
 */

body.kitsure-sc-etch-compat {
  --ks-sc-etch-page-max: 82rem;
  --ks-sc-etch-pad-inline: clamp(1rem, 3vw, 2rem);
  --ks-sc-etch-pad-block: clamp(1.25rem, 3vw, 2.5rem);
  --ks-sc-etch-card-radius: 14px;
  --ks-sc-etch-card-content-pad: clamp(0.9rem, 1.4vw, 1.05rem);
  /*
   * Every colour below resolves through an Etch/ACSS variable, so the shop follows the
   * site's palette and a merchant can restyle it from Etch. It did not use to: the page
   * background, the wash beneath it, the dot grid, the star colour and the whole dark
   * palette were hardcoded literals, so changing the Etch palette moved the text and the
   * accent and left the surfaces behind.
   *
   * That split also had a visible cost. The page background was a fixed pale mint while
   * the product card came from Etch's --body-bg-color: two unrelated sources that landed
   * 1.08:1 apart, so cards did not read as cards at all. Page and card are now derived
   * from the same pair of tokens, which makes the separation a property of the system
   * rather than a coincidence of two palettes.
   */
  --ks-sc-etch-panel: var(--body-bg-color, #ffffff);
  --ks-sc-etch-panel-soft: var(--neutral-ultra-light, #f5f7f9);
  --ks-sc-etch-panel-raised: var(--ks-bg, var(--body-bg-color, #ffffff));
  --ks-sc-etch-surface: var(--body-bg-color, #ffffff);
  --ks-sc-etch-ink: var(--text-dark, #132033);
  --ks-sc-etch-muted: var(--text-dark-muted, #596678);
  --ks-sc-etch-subtle: color-mix(in srgb, var(--ks-sc-etch-ink) 55%, var(--ks-sc-etch-page-bg));
  --ks-sc-etch-accent: var(--primary, var(--ks-brand, hsl(var(--ff-primary-h, 174) var(--ff-primary-s, 80%) var(--ff-primary-l, 40%))));
  --ks-sc-etch-accent-strong: var(--primary-hover, #0f766e);
  --ks-sc-etch-border: color-mix(in srgb, var(--ks-sc-etch-ink) 13%, transparent);
  --ks-sc-etch-soft-border: var(--ks-sc-etch-border);
  --ks-sc-etch-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--ks-sc-etch-ink) 10%, transparent);
  --ks-sc-etch-focus: color-mix(in srgb, var(--ks-sc-etch-accent) 28%, transparent);
  /*
   * Two focus tokens, two jobs. --ks-sc-etch-focus is a 28%-alpha accent for
   * GLOWS. It also used to draw every focus ring, and a translucent ring
   * measured 1.4:1 against the page in light and 1.9:1 in dark - visible, but
   * short of the 3:1 an indicator needs. Rings take --ks-sc-etch-focus-ring:
   * the ink, opaque, which is the highest-contrast thing on the page in both
   * schemes for ANY merchant palette (an accent ring depends on the host's
   * --primary lightness, the same trap the buy pair already avoids).
   */
  --ks-sc-etch-focus-ring: var(--ks-sc-etch-ink);
  --ks-sc-etch-product-card: var(--ks-bg, var(--body-bg-color, #ffffff));
  --ks-sc-etch-page-bg: color-mix(in oklch, var(--ks-bg, var(--body-bg-color, #ffffff)), var(--ks-sc-etch-ink) var(--ks-sc-etch-page-tint, 9%));
  --ks-sc-etch-page-bg-deep: color-mix(in oklch, var(--ks-bg, var(--body-bg-color, #ffffff)), var(--ks-sc-etch-ink) calc(var(--ks-sc-etch-page-tint, 9%) + 5%));
  --ks-sc-etch-page-dot: color-mix(in srgb, var(--ks-sc-etch-accent) 14%, transparent);
  --ks-sc-etch-review-star: var(--warning, #f2b84b);
  --ks-sc-etch-review-star-empty: color-mix(in srgb, var(--ks-sc-etch-ink) 22%, var(--ks-sc-etch-product-card));
  --ks-sc-etch-buy-bg: var(--ks-sc-etch-ink);
  --ks-sc-etch-buy-hover-bg: var(--ks-sc-etch-ink);
  --ks-sc-etch-buy-ink: var(--text-light, #ffffff);
  --ks-sc-etch-buy-glow: 0 0.75rem 1.25rem color-mix(in srgb, var(--ks-sc-etch-ink) 16%, transparent);
  --ks-sc-etch-review-btn-bg: var(--ks-sc-etch-panel-raised);
  --ks-sc-etch-review-btn-ink: var(--ks-sc-etch-ink);
  --ks-sc-etch-review-btn-border: var(--ks-sc-etch-border);
  color: var(--ks-sc-etch-ink);
  color-scheme: light;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/*
 * Storefront background.
 *
 * Two rules govern how this is written, and the tests found both the hard way.
 *
 * 1. NOTHING here may out-specify a merchant. The first version used `!important`; the
 *    second traded that for an `html body...` prefix, which is the same mistake wearing a
 *    hat: a merchant rule written against `body.kitsure-sc-etch-compat.kitsure-sc-etch-compat-storefront` scored
 *    lower and lost, so "style it yourself in Etch" did not actually work. Every selector
 *    below is exactly `body.kitsure-sc-etch-compat.kitsure-sc-etch-compat-storefront[.pattern]` and no more, and
 *    the stylesheet loads early enough that an equally specific merchant rule wins on
 *    source order.
 *
 * 2. `custom` sets NO background-image at all - not even `background-image: none`, because
 *    a declaration of `none` is still a declaration and beats merchant CSS of equal weight.
 *    Saying nothing hands the body back to whatever paints it next, which on an Etch site
 *    is the site's own page background. That is the useful meaning of Custom: the shop
 *    stops having a background of its own and simply looks like the rest of your site.
 *
 * 3. `none` is the opposite and does need a declaration, precisely so it can suppress the
 *    site pattern that would otherwise show through.
 *
 * The wash therefore lives on each painting pattern rather than on the shared rule, since
 * the shared rule must not paint. The public contract is three properties:
 *   --ks-sc-etch-page-bg      the page colour
 *   --ks-sc-etch-page-bg-deep the far end of the vertical wash
 *   --ks-sc-etch-page-wash    the wash itself; set to `none` to drop it
 */
body.kitsure-sc-etch-compat.kitsure-sc-etch-compat-storefront {
  --ks-sc-etch-page-pattern-alpha: 0.14;
  --ks-sc-etch-page-pattern-ink: color-mix(in srgb, var(--ks-sc-etch-accent) calc(var(--ks-sc-etch-page-pattern-alpha) * 100%), transparent);
  --ks-sc-etch-page-wash: linear-gradient(
    var(--ks-sc-etch-page-bg) 0%,
    var(--ks-sc-etch-page-bg-deep) 48%,
    var(--ks-sc-etch-page-bg) 100%
  );

  background-color: var(--ks-sc-etch-page-bg);
}

body.kitsure-sc-etch-compat.kitsure-sc-etch-compat-storefront.kitsure-sc-etch-pattern-wash {
  background-image: var(--ks-sc-etch-page-wash);
  background-position: 50% 0%;
  background-repeat: repeat;
  background-size: auto;
}

body.kitsure-sc-etch-compat.kitsure-sc-etch-compat-storefront.kitsure-sc-etch-pattern-dots {
  background-image:
    radial-gradient(var(--ks-sc-etch-page-pattern-ink) 1px, transparent 1.2px),
    var(--ks-sc-etch-page-wash);
  background-position: 50% 0%, 50% 0%;
  background-repeat: repeat, repeat;
  background-size: 22px 22px, auto;
}

body.kitsure-sc-etch-compat.kitsure-sc-etch-compat-storefront.kitsure-sc-etch-pattern-grid {
  background-image:
    linear-gradient(var(--ks-sc-etch-page-pattern-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ks-sc-etch-page-pattern-ink) 1px, transparent 1px),
    var(--ks-sc-etch-page-wash);
  background-position: 50% 0%, 50% 0%, 50% 0%;
  background-repeat: repeat, repeat, repeat;
  background-size: 34px 34px, 34px 34px, auto;
}

body.kitsure-sc-etch-compat.kitsure-sc-etch-compat-storefront.kitsure-sc-etch-pattern-diagonal {
  background-image:
    repeating-linear-gradient(
      135deg,
      var(--ks-sc-etch-page-pattern-ink) 0 1px,
      transparent 1px 9px
    ),
    var(--ks-sc-etch-page-wash);
  background-position: 50% 0%, 50% 0%;
  background-repeat: repeat, repeat;
  background-size: auto, auto;
}

body.kitsure-sc-etch-compat.kitsure-sc-etch-compat-storefront.kitsure-sc-etch-pattern-none {
  background-image: none;
}

/* `custom` deliberately has no rule at all. See note 2 above. */

@media (prefers-reduced-motion: no-preference) {
  body.kitsure-sc-etch-compat.kitsure-sc-etch-compat-storefront {
    background-attachment: fixed, scroll;
  }
}

html[data-ks-theme="dark"] body.kitsure-sc-etch-compat {
  --ks-sc-etch-panel: var(--ks-bg, #101a2a);
  --ks-sc-etch-panel-soft: color-mix(in oklch, var(--ks-bg, #101a2a), var(--ks-sc-etch-ink) 5%);
  --ks-sc-etch-panel-raised: color-mix(in oklch, var(--ks-bg, #101a2a), var(--ks-sc-etch-ink) 9%);
  --ks-sc-etch-surface: var(--ks-bg, #101a2a);
  --ks-sc-etch-ink: var(--ks-ink, #edf7f6);
  --ks-sc-etch-muted: color-mix(in srgb, var(--ks-sc-etch-ink) 74%, var(--ks-sc-etch-page-bg));
  --ks-sc-etch-subtle: color-mix(in srgb, var(--ks-sc-etch-ink) 55%, var(--ks-sc-etch-page-bg));
  /*
   * KEEP IN SYNC with the identical block in surecart-etch-theme-bridge.css.
   * The two files are enqueued under different conditions and each has to stand
   * alone, so the dark token block is duplicated rather than shared - and this
   * copy loads LAST, so it is the one that actually wins wherever both are
   * present. Editing only the bridge changes nothing on a product page.
   *
   * Mixing the brand toward white in oklch LIGHTENS and DESATURATES: --primary
   * at chroma 0.095 came out as oklch(0.683 0.063 181), a dead sage green that
   * looked nothing like the brand and read as a disabled control. Prefer the
   * store's own dark brand token, keeping the old mix as the fallback so a site
   * without that token behaves exactly as before.
   */
  --ks-sc-etch-accent: var(--ks-brand, color-mix(in oklch, var(--primary, #14b8a6), white 34%));
  --ks-sc-etch-accent-strong: var(--ks-brand-hover, color-mix(in oklch, var(--primary, #14b8a6), white 52%));
  --ks-sc-etch-border: color-mix(in srgb, white 18%, transparent);
  --ks-sc-etch-soft-border: var(--ks-sc-etch-border);
  --ks-sc-etch-shadow: 0 1rem 2.5rem rgb(0 0 0 / 28%);
  --ks-sc-etch-page-bg: var(--ks-bg, #07111d);
  /* Raised is LIGHTER than the page in a dark scheme, the mirror of the light rule. */
  --ks-sc-etch-product-card: color-mix(in oklch, var(--ks-bg, #07111d), var(--ks-sc-etch-ink) 9%);
  --ks-sc-etch-page-bg-deep: color-mix(in oklch, var(--ks-bg, #07111d), var(--ks-sc-etch-ink) calc(var(--ks-sc-etch-page-tint, 9%) * 0.6));
  --ks-sc-etch-page-dot: color-mix(in srgb, var(--ks-sc-etch-accent) 12%, transparent);
  --ks-sc-etch-review-star: #ffd166;
  --ks-sc-etch-review-star-empty: color-mix(in srgb, var(--ks-sc-etch-ink) 26%, var(--ks-sc-etch-product-card));
  /*
   * The primary buy button MIRRORS the light rule rather than switching to the
   * accent. In light it is --ks-sc-etch-ink: near black on a white page, the
   * highest contrast thing on screen, which is what makes it read as primary.
   * The dark branch reached for the accent instead, so the same button arrived
   * as a mid-tone green next to an outlined secondary that was brighter than
   * it: the primary looked disabled and the secondary looked primary.
   *
   * Ink here means near-white on a dark page - the same idea, mirrored - and it
   * keeps the primary in the neutral family the outlined Buy Now belongs to.
   */
  --ks-sc-etch-buy-bg: var(--ks-sc-etch-ink);
  --ks-sc-etch-buy-hover-bg: color-mix(in srgb, var(--ks-sc-etch-ink) 88%, var(--ks-sc-etch-accent));
  --ks-sc-etch-buy-ink: var(--ks-bg, #07111d);
  --ks-sc-etch-buy-glow: 0 0.8rem 1.5rem color-mix(in srgb, var(--ks-sc-etch-ink) 16%, transparent);
  --ks-sc-etch-review-btn-bg: var(--ks-sc-etch-accent);
  --ks-sc-etch-review-btn-ink: #07111d;
  --ks-sc-etch-review-btn-border: transparent;
  color-scheme: dark;
}

/*
 * Dark scheme: ACSS paints h1-h6 with var(--heading-color) (from --text-dark)
 * at element specificity, above the starter's :where() ink. The storefront's
 * own dark sheet repaints headings; the Etch canvas never loads it and is
 * pinned to color-scheme: light, so a dark canvas showed the starter names
 * in light-scheme ink (1.11:1; merchant audit U02). Re-point both tokens
 * here. Cycle-safe: the block above already takes the ink from --ks-ink.
 */
html[data-ks-theme="dark"] body.kitsure-sc-etch-compat {
  --heading-color: var(--ks-sc-etch-ink);
  --text-dark: var(--ks-sc-etch-ink);
}

body.kitsure-sc-etch-compat.single-sc_product :where(h1, h2, h3, h4, .wp-block-heading) {
  color: var(--ks-sc-etch-ink);
}

body.kitsure-sc-etch-compat :where(.wp-block-surecart-product-review-average-rating-stars, .sc-star-row) .sc-star-row__label__svg {
  stroke: var(--ks-sc-etch-review-star);
  fill: var(--ks-sc-etch-review-star);
}

body.kitsure-sc-etch-compat :where(.wp-block-surecart-product-review-average-rating-stars, .sc-star-row) .sc-star-row__label__svg[fill-opacity="0"] {
  /* An unearned star should recede. It used to be drawn in 85% ink, so a 4-star rating
     read as five dark shapes and the score was impossible to take in at a glance. */
  stroke: var(--ks-sc-etch-review-star-empty);
  fill: none;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template .wp-block-surecart-product-review-average-rating-stars {
  margin-block: 0.45rem 0.35rem;
}

body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page .wp-block-surecart-product-review-average-rating-stars {
  margin-block: 0;
}

body.kitsure-sc-etch-cart-checkout-enabled :where(.wp-block-surecart-cart, .wp-block-surecart-checkout-form, sc-checkout) {
  color: var(--ks-sc-etch-ink);
}

body.kitsure-sc-etch-cart-checkout-enabled :where(.wp-block-surecart-cart, .wp-block-surecart-checkout-form) {
  width: min(var(--ks-sc-etch-page-max), calc(100vw - (var(--ks-sc-etch-pad-inline) * 2)));
  max-width: min(var(--ks-sc-etch-page-max), calc(100vw - (var(--ks-sc-etch-pad-inline) * 2)));
  margin-inline: auto;
  margin-block: clamp(1.5rem, 4vw, 3rem);
}

/*
 * A ::part() selector only ever matches an element a component EXPORTS with
 * a `part` attribute from its shadow root, so every host here was checked
 * against SureCart 4.7.2's Stencil output (loader flags + the component
 * class in its entry bundle; review R1F-09). sc-secure-notice (flag 1,
 * shadow) exports base/icon/text, so its text part is live. sc-checkout is
 * a scoped component (flag 4) and sc-total renders in the light DOM (flag
 * 0) - no shadow root for a part to live in - and sc-payment and
 * sc-order-summary (flag 1) declare no `part` at all, so their old
 * ::part(base) / ::part(empty) members matched nothing and are gone. The
 * light-DOM colour rule above and the spacing tokens below, which inherit
 * into shadow trees, are what reaches those four.
 */
body.kitsure-sc-etch-cart-checkout-enabled :where(sc-secure-notice)::part(text) {
  color: var(--ks-sc-etch-ink);
}

body.kitsure-sc-etch-cart-checkout-enabled :where(sc-checkout, sc-payment) {
  --sc-spacing-small: 0.75rem;
  --sc-spacing-medium: 1rem;
  --sc-spacing-large: clamp(1.25rem, 3vw, 1.75rem);
}

/*
 * The slide-out cart footer.
 *
 * SureCart stacks the subtotal group and the submit button as two siblings in a
 * flow container with no gap, so "Taxes & shipping calculated at checkout" sat
 * flush against the top edge of the Checkout button - a measured 0px between
 * them. The line read as a label belonging to the button rather than as a note
 * belonging to the subtotal above it.
 *
 * The margin goes on the button wrapper rather than the subtotal block because
 * the wrapper is always present, while the subtotal group varies with cart
 * state (coupons and shipping rows appear between them).
 */
body.kitsure-sc-etch-compat .sc-cart-drawer .sc-cart-items-submit__wrapper {
  margin-block-start: 1.25rem;
}

/*
 * The cart's primary action, matched to the product page's primary action.
 *
 * It inherited SureCart's brand-primary fill with white label text, which in
 * dark mode meant white on a mid-tone accent - about 1.9:1, unreadable. The buy
 * tokens already carry a fill-and-ink pair that is correct in both schemes, so
 * the checkout button uses the same pair as Add To Cart and the two primary
 * actions in the flow finally look like the same button.
 */
body.kitsure-sc-etch-compat .sc-cart-drawer .wp-block-surecart-slide-out-cart-items-submit {
  border-color: transparent !important;
  background: var(--ks-sc-etch-buy-bg) !important;
  color: var(--ks-sc-etch-buy-ink) !important;
}

body.kitsure-sc-etch-compat .sc-cart-drawer .wp-block-surecart-slide-out-cart-items-submit:hover {
  background: var(--ks-sc-etch-buy-hover-bg) !important;
}

/*
 * A focus ring the ink button can actually show. The drawer sits outside the
 * site's own chrome, where ACSS resets :focus to outline:none and the only
 * indicator left was SureCart's 1px black box-shadow - invisible on a
 * near-black button in light mode. An offset ring in the ink token sits on
 * the panel around the button, so it reads in both schemes.
 */
body.kitsure-sc-etch-compat .sc-cart-drawer .wp-block-surecart-slide-out-cart-items-submit:focus-visible {
  outline: 3px solid var(--ks-sc-etch-focus-ring);
  outline-offset: 3px;
  box-shadow: none;
}

/*
 * Quantity inputs (product page and drawer) relied on the wrapper's 1px
 * :focus-within line while every neighbouring control gets a 2-3px ring. The
 * ring goes on the wrapper only while the INPUT is focused - the -/+ buttons
 * inside it already carry their own rings.
 */
body.kitsure-sc-etch-compat .sc-quantity-selector:has(input:focus-visible) {
  outline: 3px solid var(--ks-sc-etch-focus-ring);
  outline-offset: 2px;
}

/* SureCart wraps the label in its own span, which carries its own colour: set
   the anchor alone and the button paints correctly with an invisible label. */
body.kitsure-sc-etch-compat .sc-cart-drawer .wp-block-surecart-slide-out-cart-items-submit :where(.sc-button__link-text) {
  color: inherit !important;
}

body.kitsure-sc-etch-account-order-enabled :where(.wp-block-surecart-order-confirmation, .wp-block-surecart-customer-dashboard, sc-order-confirmation, sc-order-confirmation-details, sc-order-confirmation-line-items, sc-order-confirmation-totals) {
  color: var(--ks-sc-etch-ink);
}

/*
 * The logged-out dashboard header prints its home link even when the store has
 * no logo to put inside it (SureCart's store-logo partial renders nothing
 * then), leaving an unnamed, focusable, empty link as the first tab stop of
 * the sign-in card (axe link-name, serious). A logo is always an element
 * child, so a link with no element child is that empty link; take it out of
 * the tab order and the accessibility tree. The moment a logo is set, the
 * link has a child and renders normally.
 */
body.kitsure-sc-etch-account-order-enabled header.sc-dashboard__logged-out-header > a:not(:has(*)) {
  display: none;
}

body.kitsure-sc-etch-account-order-enabled :where(.wp-block-surecart-order-confirmation, .wp-block-surecart-customer-dashboard) {
  width: min(var(--ks-sc-etch-page-max), calc(100vw - (var(--ks-sc-etch-pad-inline) * 2)));
  max-width: min(var(--ks-sc-etch-page-max), calc(100vw - (var(--ks-sc-etch-pad-inline) * 2)));
  margin-inline: auto;
  margin-block: clamp(1.5rem, 4vw, 3rem);
}

/* sc-dashboard-module exports a base part (its class in sc-card_2.entry.js);
   the four sc-order-confirmation* hosts export none (line-items exports only
   `line-items`), so their ::part(base) members were dead (review R1F-09). */
body.kitsure-sc-etch-account-order-enabled :where(sc-dashboard-module)::part(base),
body.kitsure-sc-etch-account-order-enabled :where(.sc-dashboard, .sc-order-confirmation) {
  background-color: var(--ks-sc-etch-panel-raised);
  border-color: var(--ks-sc-etch-border);
  color: var(--ks-sc-etch-ink);
}

body.kitsure-sc-etch-compat .wp-site-blocks {
  overflow-x: clip;
}

body.kitsure-sc-etch-compat :where(.wp-block-surecart-product-list.alignwide, .wp-block-surecart-product-list-related.alignwide) {
  width: min(var(--ks-sc-etch-page-max), calc(100vw - (var(--ks-sc-etch-pad-inline) * 2)));
  max-width: min(var(--ks-sc-etch-page-max), calc(100vw - (var(--ks-sc-etch-pad-inline) * 2)));
  margin-inline: auto;
}

body.kitsure-sc-etch-compat :where(#main, .ks-main:has(> .wp-block-surecart-product-list), main.wp-block-group:has(.wp-block-surecart-product-list)) {
  padding-inline: var(--ks-sc-etch-pad-inline);
  padding-block: var(--ks-sc-etch-pad-block);
}

body.kitsure-sc-etch-compat:not(.single-sc_product) .wp-block-surecart-product-list.alignwide {
  margin-block: clamp(1rem, 2.5vw, 1.75rem) clamp(2rem, 5vw, 3.75rem);
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-list > .wp-block-group.is-content-justification-space-between {
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-list-search.sc-input-group {
  min-width: min(100%, 13rem);
  max-width: 20rem;
  margin-inline-start: auto;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-list-content {
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: flex-start;
  min-width: 0;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-list-sidebar {
  flex: 0 0 min(15rem, 28vw);
  min-width: min(100%, 12rem);
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template-container {
  box-sizing: border-box;
  flex: 1 1 0% !important;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template {
  display: grid !important;
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

body.kitsure-sc-etch-compat :where(.wp-block-surecart-product-template > .sc-product-item, .wp-block-surecart-product-template .sc-product-item form, .wp-block-surecart-product-template .sc-product-item-link) {
  min-width: 0;
  height: 100%;
}

/*
 * The card content group lives in one of TWO shapes and every card rule below
 * has to match both, or the whole card polish silently paints nothing.
 *
 * SureCart's product-template (packages/blocks-next .../product-template/view.php)
 * emits `li.sc-product-item > form >` and then branches on whether the template
 * carries interactive controls:
 *
 *   no controls  ->  <a class="sc-product-item-link"> … card content … </a>
 *   has controls ->  <a class="sc-product-item-link"></a>  +  … card content …
 *
 * In the second shape (the one a stock 4.7.x shop page renders) the anchor is an
 * EMPTY overlay pinned with inset:0 and the content is its sibling, so the
 * long-standing `.sc-product-item-link > .wp-block-group` anchor matched nothing:
 * no card surface, no radius, no padding, no shadow, unstyled title scale and
 * price baselines that no longer lined up across a row. Scoping the `form` half
 * to `.sc-product-item > form` keeps the rules off anything else a card may
 * render (e.g. a quick-view dialog's own form).
 */
body.kitsure-sc-etch-compat .wp-block-surecart-product-template :is(.sc-product-item-link, .sc-product-item > form) > .wp-block-group {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template .wp-block-cover {
  overflow: hidden;
  min-height: 0 !important;
}

/* Grid tiles keep the whole product photo too (contain, not cover). The
   stage is painted in the CARD's own surface, not the softer panel tint: a
   16:9 photo letterboxed on a 3:2 stage used to sit between two bands of a
   different colour, which read as a framing mistake rather than as the
   photo simply ending. On the card surface the letterbox is invisible. */
body.kitsure-sc-etch-compat .wp-block-surecart-product-template .wp-block-cover {
  background: var(--ks-sc-etch-product-card);
}

/* SureCart's stock product-list template SAVES an inline portrait
   aspect-ratio:3/4 on every tile cover; with contain, landscape photos
   letterboxed over a tall empty band. Standardize tiles on the same 3:2
   stage as the single-product media — !important because the saved
   inline style outranks any selector (same situation as the checkout
   pattern's inline surfaces). */
body.kitsure-sc-etch-compat .wp-block-surecart-product-template .wp-block-cover.has-aspect-ratio {
  aspect-ratio: 3 / 2 !important;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template .wp-block-cover__image-background {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template :where(.wp-block-surecart-product-title, .wp-block-surecart-product-title a) {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template .wp-block-surecart-product-title {
  line-height: 1.25;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template :is(.sc-product-item-link, .sc-product-item > form) > .wp-block-group > .wp-block-group:has(.wp-block-surecart-product-title) {
  flex: 1 1 auto;
}

body.kitsure-sc-etch-compat:not(.single-sc_product) .wp-block-surecart-product-pagination {
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 0.55rem;
  flex-wrap: wrap;
  width: 100%;
  margin-top: clamp(1.5rem, 4vw, 2.75rem);
}

body.kitsure-sc-etch-compat:not(.single-sc_product) .wp-block-surecart-product-pagination > * {
  margin: 0 !important;
}

body.kitsure-sc-etch-compat:not(.single-sc_product) .wp-block-surecart-product-pagination.is-content-justification-space-between > .wp-block-surecart-product-pagination-previous:first-child,
body.kitsure-sc-etch-compat:not(.single-sc_product) .wp-block-surecart-product-pagination.is-content-justification-space-between > .wp-block-surecart-product-pagination-next:last-of-type {
  margin-inline: 0 !important;
}

body.kitsure-sc-etch-compat:not(.single-sc_product) .wp-block-surecart-product-pagination-numbers {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

body.kitsure-sc-etch-compat:not(.single-sc_product) :where(.wp-block-surecart-product-pagination-previous, .wp-block-surecart-product-pagination-next, .wp-block-surecart-product-pagination-numbers a) {
  min-height: 2.5rem;
  border: 1px solid var(--ks-sc-etch-soft-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ks-sc-etch-panel) 82%, transparent);
  color: var(--ks-sc-etch-ink);
  padding: 0.55rem 0.85rem;
  line-height: 1;
}

body.kitsure-sc-etch-compat:not(.single-sc_product) .wp-block-surecart-product-pagination-numbers a {
  min-width: 2.5rem;
  justify-content: center;
  padding-inline: 0.65rem;
}

/* The current page number is aria-disabled (the render_block normaliser also
   marks it aria-current and drops SureCart's invalid `disabled` attribute
   from the anchor, so there is no a[disabled] to style any more). */
body.kitsure-sc-etch-compat:not(.single-sc_product) .wp-block-surecart-product-pagination :where([aria-disabled="true"], .disabled) {
  border-color: color-mix(in srgb, var(--ks-sc-etch-ink) 12%, transparent);
  background: color-mix(in srgb, var(--ks-sc-etch-panel-soft) 86%, transparent);
  color: color-mix(in srgb, var(--ks-sc-etch-ink) 48%, transparent);
  opacity: 1;
}

body.kitsure-sc-etch-compat:not(.single-sc_product) .wp-block-surecart-product-pagination a:not([aria-disabled="true"]):not([disabled]):hover {
  border-color: color-mix(in srgb, var(--ks-sc-etch-accent) 45%, transparent);
  color: var(--ks-sc-etch-ink);
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-quick-view .sc-product-quick-view-dialog {
  width: min(52rem, calc(100vw - 2rem));
  max-width: min(52rem, calc(100vw - 2rem));
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-quick-view .sc-product-quick-view-dialog__content {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.35rem);
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-quick-view .sc-product-quick-view-dialog .wp-block-group.is-content-justification-space-between > .wp-block-group.is-nowrap {
  gap: 1rem;
  align-items: flex-start;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-quick-view .sc-product-quick-view-dialog .wp-block-surecart-product-selected-variant-image {
  flex: 0 0 auto;
  margin: 0;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-quick-view .sc-product-quick-view-dialog .wp-block-surecart-product-selected-variant-image + .wp-block-group {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-quick-view :where(.wp-block-surecart-product-title, .wp-block-surecart-product-variant-pills) {
  margin-block: 0;
}

/* CTAs ride the buy pair, never accent + hardcoded ink: in light mode the
   accent maps to the HOST's --primary (arbitrary lightness — ivacode's
   steel blue made near-black-on-mid-blue), the same semantic bug class as
   the old primary-text mapping. Buy pair is mode-correct by construction:
   light = ink bg + white label (matching Add To Cart), dark = accent +
   near-black. */
body.kitsure-sc-etch-compat :where(.wp-block-surecart-product-template, .kitsure-wl-quickview-row) .wp-block-surecart-product-quick-view-button {
  border-color: transparent !important;
  background: var(--ks-sc-etch-buy-bg) !important;
  color: var(--ks-sc-etch-buy-ink) !important;
}

body.kitsure-sc-etch-compat :where(.wp-block-surecart-product-template, .kitsure-wl-quickview-row) .wp-block-surecart-product-quick-view-button :where(.sc-button__link-text) {
  color: inherit !important;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-buy-buttons {
  width: 100%;
  margin-top: 0.75rem;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-buy-buttons .wp-block-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-buy-buttons .wp-block-button {
  width: auto !important;
  margin: 0 !important;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-buy-buttons .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.125rem;
  padding: 0.85rem 1rem;
  border-radius: 999px;
  line-height: 1.1;
  text-align: center;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-buy-buttons .wp-block-surecart-product-buy-button:not(.is-style-outline) .wp-block-button__link {
  border: 1px solid var(--ks-sc-etch-buy-bg);
  background: var(--ks-sc-etch-buy-bg);
  color: var(--ks-sc-etch-buy-ink);
  box-shadow: var(--ks-sc-etch-buy-glow);
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-buy-buttons .wp-block-surecart-product-buy-button.is-style-outline .wp-block-button__link {
  border-color: var(--ks-sc-etch-ink);
  color: var(--ks-sc-etch-ink);
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-buy-buttons .wp-block-surecart-product-buy-button:not(.is-style-outline) .wp-block-button__link :where(.sc-button__link-text) {
  color: inherit;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-buy-buttons .wp-block-surecart-product-buy-button:not(.is-style-outline) .wp-block-button__link:hover {
  border-color: var(--ks-sc-etch-buy-hover-bg);
  background: var(--ks-sc-etch-buy-hover-bg);
}

body.kitsure-sc-etch-compat.single-sc_product .wp-site-blocks {
  max-width: none;
  margin-inline: 0;
  padding: 0;
}

body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page.alignwide {
  width: min(var(--ks-sc-etch-page-max), calc(100vw - (var(--ks-sc-etch-pad-inline) * 2))) !important;
  max-width: min(var(--ks-sc-etch-page-max), calc(100vw - (var(--ks-sc-etch-pad-inline) * 2))) !important;
  margin: clamp(1rem, 2.5vw, 1.75rem) auto 0 !important;
  padding: 0 !important;
}

body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page.alignwide + .wp-block-group {
  width: min(var(--ks-sc-etch-page-max), calc(100vw - (var(--ks-sc-etch-pad-inline) * 2)));
  max-width: min(var(--ks-sc-etch-page-max), calc(100vw - (var(--ks-sc-etch-pad-inline) * 2)));
  margin-inline: auto !important;
}

body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page.alignwide ~ :where(p, ul, ol, h1, h2, h3, h4, .wp-block-heading) {
  width: min(var(--ks-sc-etch-page-max), calc(100vw - (var(--ks-sc-etch-pad-inline) * 2)));
  max-width: min(var(--ks-sc-etch-page-max), calc(100vw - (var(--ks-sc-etch-pad-inline) * 2)));
  margin-inline: auto;
  color: var(--ks-sc-etch-ink);
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-review-list {
  box-sizing: border-box;
  display: block;
  width: min(var(--ks-sc-etch-page-max), calc(100vw - (var(--ks-sc-etch-pad-inline) * 2))) !important;
  max-width: min(var(--ks-sc-etch-page-max), calc(100vw - (var(--ks-sc-etch-pad-inline) * 2))) !important;
  margin: clamp(2.5rem, 6vw, 4.5rem) auto clamp(2rem, 5vw, 3.5rem) !important;
  padding: 0 !important;
  color: var(--ks-sc-etch-ink);
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-review-list > * {
  width: 100%;
  max-width: 100%;
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-review-list > .wp-block-heading {
  margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.1;
  text-align: start;
}

body.kitsure-sc-etch-compat.single-sc_product :where(.wp-block-surecart-product-reviews, .wp-block-surecart-product-review-summary, .wp-block-surecart-product-review-list-no-reviews) {
  color: var(--ks-sc-etch-ink);
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-review-list-no-reviews {
  display: grid;
  max-width: 40rem;
  gap: 0.85rem;
  justify-items: start;
  color: var(--ks-sc-etch-muted);
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-review-list-no-reviews > * {
  margin-block: 0;
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-review-list-no-reviews > .wp-block-group,
body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-review-list-no-reviews .wp-block-buttons {
  width: auto;
  max-width: 100%;
  justify-content: flex-start;
}

body.kitsure-sc-etch-compat.single-sc_product :where(.wp-block-surecart-product-review-add-button, .wp-block-surecart-product-review-pagination a, .wp-block-surecart-product-review-pagination button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border: 1px solid var(--ks-sc-etch-border);
  border-radius: 999px;
  background: var(--ks-sc-etch-panel-raised);
  color: var(--ks-sc-etch-ink);
  padding: 0.7rem 1rem;
  line-height: 1.1;
  text-decoration: none;
}

/*
 * ...except that the two "Write a Review" variants are not the same kind of
 * element, which the rule above treats as if they were.
 *
 * -form-button IS the control and needs that box. -add-button is a WRAPPER
 * (div.wp-block-button) whose inner .wp-block-button__link is the real control
 * and carries its own padding, fill and radius. Styling the wrapper as a button
 * too produced a button inside a button: a 50px pill centred in a 74px pill,
 * padded and filled twice, which is why it read as oversized. It also arrives
 * with wp-block-button__width-100, so it stretched to the column rather than
 * hugging its label.
 *
 * The wrapper keeps no box of its own; the inner link already paints correctly.
 */
body.kitsure-sc-etch-compat.single-sc_product .wp-block-button.wp-block-surecart-product-review-add-button {
  display: inline-flex;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* The "Write a Review" CTAs — product-review-add-button (a wrapper whose inner
   .wp-block-button__link carries the preset classes; shown when reviews exist)
   and product-review-form-button (the element ITSELF carries them; the
   "No reviews yet" state). SureCart paints the button link with WP core preset
   classes: has-surecart-background-color sets `background-color: … !important`
   (black) and has-white-color sets `color: var(--wp--preset--color--white)
   !important`, which is UNDEFINED in the Etch theme so the color is dropped and
   falls back to inherited black — a black-on-black, unreadable pill (WCAG 1.4.3).
   A non-!important compat rule CANNOT beat those preset !important declarations,
   so force the accessible bg/ink pair with !important. Our body-scoped selector
   (0,4,1) outranks the single-class presets (0,1,0), so the pair always wins. */
body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-review-add-button {
  border-color: var(--ks-sc-etch-review-btn-border);
  background: var(--ks-sc-etch-review-btn-bg);
  color: var(--ks-sc-etch-review-btn-ink);
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-review-add-button .wp-block-button__link,
body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-review-add-button .sc-button__link {
  border: 1px solid var(--ks-sc-etch-review-btn-border);
  border-radius: 999px;
  background: var(--ks-sc-etch-review-btn-bg) !important;
  background-color: var(--ks-sc-etch-review-btn-bg) !important;
  color: var(--ks-sc-etch-review-btn-ink) !important;
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-review-add-button:hover {
  border-color: color-mix(in srgb, var(--ks-sc-etch-accent) 45%, var(--ks-sc-etch-review-btn-border));
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-review-add-button :where(.sc-button__link-text) {
  background: transparent !important;
  color: inherit !important;
}

body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page > .wp-block-columns.alignwide {
  display: grid !important;
  grid-template-columns: minmax(0, 1.38fr) minmax(20rem, 0.82fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page > .wp-block-columns.alignwide > .wp-block-column {
  min-width: 0;
}

body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page > .wp-block-columns.alignwide > .wp-block-column[style*="flex-basis"] {
  flex-basis: auto !important;
  max-width: none !important;
}

/* A stable 3:2 stage that PRESERVES the whole image at any aspect ratio
   (ivacode field finding: the old fixed-height + cover crop butchered
   square and portrait product photos). The panel-soft backdrop fills the
   letterbox for non-3:2 images; the max caps very wide columns. */
body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page .wp-block-surecart-product-media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--ks-sc-etch-card-radius);
  background: var(--ks-sc-etch-panel-soft);
  aspect-ratio: 3 / 2;
  max-block-size: 34rem;
}

body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page .wp-block-surecart-product-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page > .wp-block-columns.alignwide > .wp-block-column:last-child {
  color: var(--ks-sc-etch-ink);
}

body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page .wp-block-surecart-product-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.75rem, 2.2vw, 2.5rem);
  line-height: 1.12;
}

body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page .wp-block-surecart-product-quantity {
  display: grid;
  gap: 0.45rem;
  justify-items: start;
  margin: 1rem 0 1.25rem;
}

body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page .wp-block-surecart-product-quantity .sc-form-label {
  display: block;
  margin: 0;
}

body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page .wp-block-surecart-product-quantity .sc-quantity-selector {
  margin: 0;
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-list-related {
  width: min(var(--ks-sc-etch-page-max), calc(100vw - (var(--ks-sc-etch-pad-inline) * 2)));
  max-width: min(var(--ks-sc-etch-page-max), calc(100vw - (var(--ks-sc-etch-pad-inline) * 2)));
  margin-inline: auto;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: clamp(2rem, 5vw, 3.75rem);
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-list-related :where(.alignwide, .wp-block-surecart-product-template.alignwide) {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-list-related .wp-block-surecart-product-template {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-list-related :is(.sc-product-item-link, .sc-product-item > form) > .wp-block-group {
  overflow: hidden;
  border: 1px solid var(--ks-sc-etch-border);
  border-radius: var(--ks-sc-etch-card-radius);
  background: color-mix(in srgb, var(--ks-sc-etch-panel-raised) 78%, transparent);
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-list-related :is(.sc-product-item-link, .sc-product-item > form) > .wp-block-group > .wp-block-group:has(.wp-block-surecart-product-title) {
  padding: 1rem;
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-list-related .wp-block-surecart-product-title {
  display: -webkit-box;
  min-height: 2.5em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-list-related .wp-block-surecart-product-pagination {
  gap: 0.5rem;
  margin-top: 0;
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-list-related .wp-block-surecart-product-pagination > * {
  margin: 0;
}

@media (max-width: 1000px) {
  body.kitsure-sc-etch-compat .wp-block-surecart-product-list-search.sc-input-group {
    flex: 1 1 16rem;
    max-width: 100%;
    min-width: 0;
  }

  body.kitsure-sc-etch-compat .wp-block-surecart-product-list-content {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  body.kitsure-sc-etch-compat .wp-block-surecart-product-list-sidebar {
    width: 100%;
    inline-size: 100%;
    flex: 0 0 auto;
  }

  body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page > .wp-block-columns.alignwide {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  body.kitsure-sc-etch-compat :where(#main, .ks-main:has(> .wp-block-surecart-product-list), main.wp-block-group:has(.wp-block-surecart-product-list)) {
    padding-inline: 1rem;
  }

  body.kitsure-sc-etch-compat .wp-block-surecart-product-template {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.kitsure-sc-etch-compat .wp-block-surecart-product-quick-view .sc-product-quick-view-dialog {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
  }

  body.kitsure-sc-etch-compat .wp-block-surecart-product-buy-buttons .wp-block-buttons {
    grid-template-columns: minmax(0, 1fr);
  }

  body.kitsure-sc-etch-compat.single-sc_product .wp-site-blocks {
    padding-inline: 0;
  }

  body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page.alignwide,
  body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page.alignwide + .wp-block-group,
  body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-list-related {
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
  }
}

/* 2026 refresh: Etch-native SureCart surfaces. */
body.kitsure-sc-etch-compat :where(.wp-block-surecart-product-list-sidebar, .wp-block-surecart-product-list-search.sc-input-group) {
  border: 1px solid var(--ks-sc-etch-border);
  border-radius: var(--ks-sc-etch-card-radius);
  background: color-mix(in srgb, var(--ks-sc-etch-panel-raised) 96%, var(--ks-sc-etch-surface));
  box-shadow: 0 0.45rem 1.5rem color-mix(in srgb, var(--ks-sc-etch-ink) 7%, transparent);
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-list-sidebar {
  padding: clamp(0.85rem, 1.8vw, 1.15rem);
  color: var(--ks-sc-etch-ink);
  backdrop-filter: blur(10px);
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-list-search.sc-input-group {
  padding: 0.25rem;
}

body.kitsure-sc-etch-compat :where(.wp-block-surecart-product-list-sidebar label, .wp-block-surecart-product-list-sidebar a, .wp-block-surecart-product-list-sidebar button) {
  color: var(--ks-sc-etch-ink);
  line-height: 1.35;
}

body.kitsure-sc-etch-compat :where(.wp-block-surecart-product-list-sidebar [class*="filter"], .wp-block-surecart-product-list-sidebar [class*="sort"], .wp-block-surecart-product-list-sidebar [class*="results"]) {
  color: var(--ks-sc-etch-ink);
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template > .sc-product-item {
  border-radius: var(--ks-sc-etch-card-radius);
}

/* `position: relative` (with z-index untouched, so no stacking context) is what
   makes the lift below safe — see the hover rule for why a transform is not. */
body.kitsure-sc-etch-compat .wp-block-surecart-product-template :is(.sc-product-item-link, .sc-product-item > form) > .wp-block-group {
  position: relative;
  top: 0;
  overflow: hidden;
  border: 1px solid var(--ks-sc-etch-border);
  border-radius: var(--ks-sc-etch-card-radius);
  background: var(--ks-sc-etch-product-card);
  box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--ks-sc-etch-ink) 7%, transparent);
  transition: border-color 160ms ease, box-shadow 160ms ease, top 160ms ease;
}

/* Both card shapes lift on interaction. In the wrapping shape the anchor is the
   card's ancestor, so hover/focus on it reaches the group. In the overlay shape
   the anchor is an empty absolutely-positioned sibling that only receives :hover
   over the card's empty areas (its content sits above it at z-index 2), so hover
   is taken from the item and the keyboard lift from the anchor's sibling.

   The lift MUST NOT use a transform. SureCart holds the overlay anchor at
   z-index 1 and lifts every control in the card to z-index 2 so the controls
   win; a transform on this group creates a stacking context that traps that
   z-index 2 inside it, and the anchor — a sibling of this group — then paints
   and hit-tests above every control. Hovering a card therefore slid the
   wishlist heart and SureCart's own quick-view button under the card link, so
   a real pointer click navigated to the product instead of acting (keyboard
   activation still worked, which is what hid it). `top` moves the card by the
   same pixel without creating a stacking context. */
body.kitsure-sc-etch-compat .wp-block-surecart-product-template .sc-product-item-link:hover > .wp-block-group,
body.kitsure-sc-etch-compat .wp-block-surecart-product-template .sc-product-item-link:focus-visible > .wp-block-group,
body.kitsure-sc-etch-compat .wp-block-surecart-product-template .sc-product-item:hover > form > .wp-block-group,
body.kitsure-sc-etch-compat .wp-block-surecart-product-template .sc-product-item-link:focus-visible ~ .wp-block-group {
  border-color: color-mix(in srgb, var(--ks-sc-etch-accent) 44%, var(--ks-sc-etch-border));
  box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--ks-sc-etch-ink) 11%, transparent);
  top: -1px;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template .sc-product-item-link:focus-visible {
  outline: 3px solid var(--ks-sc-etch-focus-ring);
  outline-offset: 4px;
  border-radius: var(--ks-sc-etch-card-radius);
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template :is(.sc-product-item-link, .sc-product-item > form) > .wp-block-group > .wp-block-group:has(.wp-block-surecart-product-title) {
  display: grid;
  gap: 0.45rem;
  padding: var(--ks-sc-etch-card-content-pad);
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template :is(.sc-product-item-link, .sc-product-item > form) > .wp-block-group > :where(
  .wp-block-surecart-product-title,
  .wp-block-surecart-product-review-average-rating-stars,
  .wp-block-surecart-product-review-total-rating,
  .wp-block-surecart-product-list-price,
  .wp-block-surecart-product-price,
  .wp-block-surecart-product-selected-price-amount,
  .wp-block-surecart-product-selected-price-interval
) {
  box-sizing: border-box;
  width: 100%;
  padding-inline: var(--ks-sc-etch-card-content-pad);
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template :is(.sc-product-item-link, .sc-product-item > form) > .wp-block-group > .wp-block-surecart-product-title {
  margin-block: 0 0.35rem;
  padding-block-start: var(--ks-sc-etch-card-content-pad);
  color: var(--ks-sc-etch-ink);
  /* Size lives here, not in the page. The shop page carried inline typography on the title
     block (15px / weight 400), and an inline style beats any stylesheet, so this rule's
     weight never applied and the card title rendered lighter than its own price. The
     addon owns the card scale so the page does not have to, and so Etch can move it. */
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template :is(.sc-product-item-link, .sc-product-item > form) > .wp-block-group > .wp-block-surecart-product-review-average-rating-stars {
  margin-block: 0.25rem 0.55rem;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template :is(.sc-product-item-link, .sc-product-item > form) > .wp-block-group > .wp-block-group:has(> :where(
  .wp-block-surecart-product-list-price,
  .wp-block-surecart-product-price,
  .wp-block-surecart-product-selected-price-amount,
  .wp-block-surecart-product-selected-price-interval
)) {
  box-sizing: border-box;
  width: 100%;
  margin-block-start: auto;
  padding-inline: var(--ks-sc-etch-card-content-pad);
  padding-block-end: var(--ks-sc-etch-card-content-pad);
  /* The price and the scratch price are two separate blocks inside a core group that ships
     `gap: normal` - i.e. none - so a sale card rendered them flush: "$519$649", reading as one
     nonsense figure. Give the group a real gap, and align on the BASELINE so the struck-through
     figure sits on the same line as the price rather than riding above it. Wrapping is allowed
     because a long price plus a "Compare to" label does not fit a narrow card on one line. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--ks-sc-etch-price-gap, 0.5em);
  row-gap: 0.15rem;
}

/* Recessive through size and weight, never opacity: fading text is what dropped a control to
   4.17:1 and failed axe. --ks-sc-etch-muted is contrast-checked in both schemes. */
body.kitsure-sc-etch-compat .wp-block-surecart-product-template .wp-block-surecart-product-scratch-price {
  margin-block: 0;
  color: var(--ks-sc-etch-muted);
  font-size: 0.875em;
  font-weight: 500;
  text-decoration-thickness: from-font;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template :is(.sc-product-item-link, .sc-product-item > form) > .wp-block-group > :where(
  .wp-block-surecart-product-list-price,
  .wp-block-surecart-product-price,
  .wp-block-surecart-product-selected-price-amount
) {
  margin-block-start: auto;
  padding-block-end: var(--ks-sc-etch-card-content-pad);
  /* Full ink, not --ks-sc-etch-muted. The price was painted at 80% ink, which made the
     single most important figure on the card the faintest text on it - fainter than the
     title above it. Title, rating and price now read as a ladder rather than a wash. */
  color: var(--ks-sc-etch-ink);
  font-size: 1.125rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template :is(.sc-product-item-link, .sc-product-item > form) > .wp-block-group > .wp-block-group:has(.wp-block-surecart-product-title) :where(
  .wp-block-surecart-product-title,
  .wp-block-surecart-product-title a,
  .wp-block-surecart-product-review-average-rating-stars,
  .wp-block-surecart-product-list-price,
  .wp-block-surecart-product-price,
  .wp-block-surecart-product-selected-price-amount
) {
  margin-block: 0;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template :is(.sc-product-item-link, .sc-product-item > form) > .wp-block-group > .wp-block-group:has(> :where(
  .wp-block-surecart-product-list-price,
  .wp-block-surecart-product-price,
  .wp-block-surecart-product-selected-price-amount,
  .wp-block-surecart-product-selected-price-interval
)) :where(
  .wp-block-surecart-product-list-price,
  .wp-block-surecart-product-price,
  .wp-block-surecart-product-selected-price-amount,
  .wp-block-surecart-product-selected-price-interval
) {
  margin-block: 0;
  /* The price renders in two structural positions - loose in the card, and wrapped in a
     group alongside a scratch price - and this is the wrapped one. Both were muted; both
     are ink now, or the treatment would depend on whether a product happens to be on sale. */
  color: var(--ks-sc-etch-ink);
  font-size: 1.125rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template .wp-block-cover {
  border-radius: calc(var(--ks-sc-etch-card-radius) - 1px) calc(var(--ks-sc-etch-card-radius) - 1px) 0 0;
}

/*
 * The "no photo yet" stage. Three markups mean the same thing: SureCart's
 * product-media block substitutes its placeholder.jpg on the product page,
 * while the grid and related-products covers simply omit the <img> when the
 * product has no featured image (a cover with no image child). All three get
 * the same dimmed, accent-washed stage, so a product looks the same
 * everywhere it appears.
 *
 * The stage is deliberately WORDLESS. It used to print "Media pending" from
 * CSS content: merchant vocabulary a shopper cannot use, untranslatable, and
 * read aloud by screen readers. If a label is ever wanted it belongs in PHP,
 * translated, with proper aria - never in a stylesheet.
 */
body.kitsure-sc-etch-compat .wp-block-surecart-product-template :where(.wp-block-cover, .wp-block-surecart-product-media):has(img[src*="placeholder.jpg"]),
body.kitsure-sc-etch-compat .wp-block-surecart-product-template .wp-block-cover:not(:has(> .wp-block-cover__image-background, > .wp-block-cover__video-background)),
body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page .wp-block-surecart-product-media:has(img[src*="placeholder.jpg"]) {
  position: relative;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ks-sc-etch-accent) 14%, transparent), transparent 30%),
    linear-gradient(135deg, var(--ks-sc-etch-panel-soft), color-mix(in srgb, var(--ks-sc-etch-panel-soft) 74%, var(--ks-sc-etch-accent)));
}

/* Centring belongs to the two stages that hold the placeholder PHOTO. The
   image-less cover has no photo to centre - its glyph is the absolutely
   positioned ::before below - and its only in-flow child is the inner
   container that holds the quick-add pill and the sale badge, which core lays
   out top-left (is-position-top-center); a grid there centred the pill over
   the glyph on every image-less tile while image tiles kept it top-left
   (review R1F-02). */
body.kitsure-sc-etch-compat .wp-block-surecart-product-template :where(.wp-block-cover, .wp-block-surecart-product-media):has(img[src*="placeholder.jpg"]),
body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page .wp-block-surecart-product-media:has(img[src*="placeholder.jpg"]) {
  display: grid;
  place-items: center;
}

/* An image-less cover has nothing to dim, so it draws the same kind of quiet
   picture glyph the placeholder photo provides: a mask in the muted token,
   which follows the scheme, with no text and nothing for assistive tech. */
body.kitsure-sc-etch-compat .wp-block-surecart-product-template .wp-block-cover:not(:has(> .wp-block-cover__image-background, > .wp-block-cover__video-background))::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: min(28%, 4.5rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  background-color: var(--ks-sc-etch-muted);
  opacity: 0.42;
  -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='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='9' cy='9.5' r='1.6'/%3E%3Cpath d='M21 15.5l-4.6-4.6a1 1 0 0 0-1.4 0L8 18'/%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='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='9' cy='9.5' r='1.6'/%3E%3Cpath d='M21 15.5l-4.6-4.6a1 1 0 0 0-1.4 0L8 18'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

body.kitsure-sc-etch-compat .wp-block-surecart-product-template :where(.wp-block-cover, .wp-block-surecart-product-media) img[src*="placeholder.jpg"],
body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page .wp-block-surecart-product-media img[src*="placeholder.jpg"] {
  width: min(42%, 9rem) !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 0.42;
  filter: saturate(0.3);
}

body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page > .wp-block-columns.alignwide > .wp-block-column:last-child {
  border: 1px solid var(--ks-sc-etch-border);
  border-radius: calc(var(--ks-sc-etch-card-radius) + 2px);
  background: color-mix(in srgb, var(--ks-sc-etch-panel-raised) 84%, transparent);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--ks-sc-etch-ink) 8%, transparent);
}

body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page .wp-block-surecart-product-description {
  color: var(--ks-sc-etch-muted);
  line-height: 1.55;
}

body.kitsure-sc-etch-compat.single-sc_product :where(.wp-block-surecart-product-selected-price-amount, .wp-block-surecart-price-amount) {
  color: var(--ks-sc-etch-ink);
  font-weight: 750;
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-review-list {
  border-top: 1px solid var(--ks-sc-etch-border);
  padding-top: clamp(1.5rem, 3.5vw, 2.25rem) !important;
}

body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-review-list > .wp-block-heading,
body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-list-related > .wp-block-heading,
body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-list-related > h2 {
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 780;
  letter-spacing: 0;
}

body.kitsure-sc-etch-cart-checkout-enabled :where(.wp-block-surecart-cart, .wp-block-surecart-checkout-form),
body.kitsure-sc-etch-account-order-enabled :where(.wp-block-surecart-order-confirmation, .wp-block-surecart-customer-dashboard) {
  border: 1px solid var(--ks-sc-etch-border);
  border-radius: calc(var(--ks-sc-etch-card-radius) + 2px);
  background: color-mix(in srgb, var(--ks-sc-etch-panel-raised) 82%, transparent);
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

@media (min-width: 1001px) {
  body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page > .wp-block-columns.alignwide > .wp-block-column:last-child {
    position: sticky;
    top: 1.25rem;
  }
}

/*
 * Tablet sidebar: when the sidebar stacks above the grid its facets spread
 * into columns instead of one long strip.
 *
 * Bounded to the range where SureCart actually SHOWS the desktop sidebar. It
 * hides that copy below 780px (its own `.sc-sidebar-desktop { display: none }`
 * at max-width:779px) and offers the same facets from a drawer instead; an
 * unbounded `display: grid` outranked that display:none, so phones rendered
 * the sort radios and the price facet twice - inline AND in the drawer. The
 * :not([hidden]) keeps the rule from overriding the "Hide filters" toggle,
 * which hides the same element with the hidden attribute.
 */
@media (max-width: 1000px) and (min-width: 780px) {
  body.kitsure-sc-etch-compat .sc-sidebar-desktop.wp-block-surecart-product-list-sidebar:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: 0.75rem 1rem;
  }
}

@media (max-width: 1000px) {
  body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page > .wp-block-columns.alignwide > .wp-block-column:last-child {
    padding: clamp(1rem, 4vw, 1.35rem);
  }
}

@media (max-width: 680px) {
  body.kitsure-sc-etch-compat {
    --ks-sc-etch-pad-inline: 1rem;
  }

  body.kitsure-sc-etch-compat:not(.single-sc_product) .wp-block-surecart-product-template {
    gap: 0.95rem;
  }

  body.kitsure-sc-etch-compat .wp-block-surecart-product-template :is(.sc-product-item-link, .sc-product-item > form) > .wp-block-group > .wp-block-group:has(.wp-block-surecart-product-title) {
    padding: 0.9rem;
  }

  body.kitsure-sc-etch-compat.single-sc_product form.wp-block-surecart-product-page .wp-block-surecart-product-title {
    font-size: clamp(1.75rem, 9vw, 2.25rem);
  }

  body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-review-list > .wp-block-heading,
  body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-list-related > .wp-block-heading,
  body.kitsure-sc-etch-compat.single-sc_product .wp-block-surecart-product-list-related > h2 {
    font-size: clamp(1.65rem, 8vw, 2.1rem);
    text-align: start;
  }
}