/* ==========================================================================
   COCINIÑA — SINGLE PRODUCT PAGE  (Phase 5)
   --------------------------------------------------------------------------
   Restyles WooCommerce's default single-product template as Astra renders
   it. Loaded only when <body> carries cn-product, and every selector starts
   with that class, so no other page can be touched.

   SPECIFICITY
     Astra sizes the photo and the summary from an inline rule shaped like
     `.woocommerce #content .ast-woocommerce-container div.product
     div.images` (1,4,2). Layout rules here therefore start with
     `body.cn-product #content .ast-woocommerce-container`, which lands one
     element above it at (1,4,3) and wins without !important.

   CONTRAST — see the PRODUCT PAGE block in tokens.css. In short: text on
   the brick is white; anything green sits on a deep green panel.

   CONTENTS
     1. Page and Astra's white box
     2. Layout
     3. Photo
     4. Breadcrumb
     5. Buy panel — category, title, price, description
     6. Quantity and Add to cart
     7. ShopEngine wishlist / compare buttons (hidden)
     8. Notices
     9. Tabs
    10. Reviews
    11. Related dishes band
    12. Mobile
    13. Reduced motion
   ========================================================================== */


/* ==========================================================================
   1. PAGE AND ASTRA'S WHITE BOX
   --------------------------------------------------------------------------
   Astra's "boxed" single-product style paints the body light grey
   (.ast-separate-container) and the article white. Both go; the page sits
   on the brick gradient like the checkout.
   ========================================================================== */

body.cn-product.ast-separate-container {
  background-color: var(--cn-page-bg);
  background-image: var(--cn-gradient-page);
  color: var(--cn-text);
  font-family: var(--cn-font-body);
}

body.cn-product.ast-separate-container .ast-article-single,
body.cn-product.ast-separate-container .ast-article-single:not(.ast-related-post) {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

/* The white box itself is the WooCommerce container, from Astra's inline
   `.woocommerce.ast-separate-container .ast-woocommerce-container` (0,3,0):
   white fill plus 48px padding. That padding was also the gap between the
   related band and the footer. */
body.cn-product.woocommerce.ast-separate-container .ast-woocommerce-container {
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
}

body.cn-product #content .ast-container {
  max-width: calc(var(--cn-product-max) + 2 * var(--cn-page-gutter));
  padding-left: var(--cn-page-gutter);
  padding-right: var(--cn-page-gutter);
}

/* The related band runs into the footer, so the content area must not add
   its own gap underneath it. */
body.cn-product.ast-separate-container #primary {
  margin-bottom: 0;
  padding-bottom: 0;
}


/* ==========================================================================
   2. LAYOUT
   --------------------------------------------------------------------------
   Photo left, buy panel right. Tabs and related dishes span both columns.
   Floats are ignored inside a grid, so only the widths need resetting.
   ========================================================================== */

body.cn-product #content .ast-woocommerce-container div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: var(--cn-product-gap);
  align-items: start;
  padding-top: var(--cn-space-lg);
}

body.cn-product #content .ast-woocommerce-container div.product > * {
  grid-column: 1 / -1;
}

body.cn-product #content .ast-woocommerce-container div.product div.images,
body.cn-product #content .ast-woocommerce-container div.product div.summary {
  float: none;
  width: auto;
  margin: 0 0 var(--cn-space-xl);
}

body.cn-product #content .ast-woocommerce-container div.product div.images {
  grid-column: 1;
}

body.cn-product #content .ast-woocommerce-container div.product div.summary {
  grid-column: 2;
}


/* ==========================================================================
   3. PHOTO — rounded like the dish cards on the homepage
   ========================================================================== */

body.cn-product div.product div.images .woocommerce-product-gallery__wrapper,
body.cn-product div.product div.images .flex-viewport {
  border-radius: var(--cn-product-photo-r);
  overflow: hidden;   /* clips the zoom image to the same corners */
  box-shadow: var(--cn-shadow-card);
}

body.cn-product div.product div.images img {
  border-radius: var(--cn-product-photo-r);
}

/* Second and later images, and the flexslider thumbnails */
body.cn-product div.product div.images .flex-control-thumbs {
  display: flex;
  gap: var(--cn-space-2xs);
  margin-top: var(--cn-space-xs);
}
body.cn-product div.product div.images .flex-control-thumbs li {
  width: auto;
  flex: 0 0 calc((100% - 3 * var(--cn-space-2xs)) / 4);
}
body.cn-product div.product div.images .flex-control-thumbs li img {
  border-radius: var(--cn-radius-md);
}

/* Magnifier button: a deep green disc with a white glass, instead of
   Astra's white disc. Stays a 36px target inside the photo corner. */
body.cn-product div.product div.images .woocommerce-product-gallery__trigger {
  top: var(--cn-space-xs);
  right: var(--cn-space-xs);
  background: var(--cn-surface);
  border: 1px solid var(--cn-hairline-strong);
}
body.cn-product div.product div.images .woocommerce-product-gallery__trigger::before {
  border-color: var(--cn-text);
}
body.cn-product div.product div.images .woocommerce-product-gallery__trigger::after {
  background: var(--cn-text);
}


/* ==========================================================================
   4. BREADCRUMB
   ========================================================================== */

body.cn-product div.product .woocommerce-breadcrumb {
  margin: 0 0 var(--cn-space-sm);
  font-size: var(--cn-text-xs);
  letter-spacing: 0.02em;
  color: var(--cn-text-muted);
}

body.cn-product div.product .woocommerce-breadcrumb a {
  color: var(--cn-text-muted);
  text-decoration: none;
  transition: color var(--cn-dur-fast) var(--cn-ease);
}

body.cn-product div.product .woocommerce-breadcrumb a:hover,
body.cn-product div.product .woocommerce-breadcrumb a:focus-visible {
  color: var(--cn-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================================
   5. BUY PANEL — category, title, price, description
   --------------------------------------------------------------------------
   The panel is drawn on the summary itself, so the markup does not change.
   Astra prints the breadcrumb inside the summary, so it heads the panel
   (muted white on deep green, 8.10:1).
   ========================================================================== */

body.cn-product #content .ast-woocommerce-container div.product div.summary {
  position: relative;
  box-sizing: border-box;
  padding: var(--cn-product-panel-pad);
  background: var(--cn-product-panel-bg);
  border: var(--cn-border-hair);
  border-radius: var(--cn-radius-lg);
  box-shadow: var(--cn-shadow-card);
  color: var(--cn-text);
}

/* Category — the pill used on the product cards */
body.cn-product div.product div.summary .single-product-category {
  display: block;
  margin: 0 0 var(--cn-space-xs);
  line-height: 1;
}

body.cn-product div.product div.summary .single-product-category a {
  display: inline-block;
  padding: 0.4em 0.85em;
  border: 1px solid var(--cn-tag-border);
  border-radius: var(--cn-radius-pill);
  background: var(--cn-tag-bg);
  color: var(--cn-accent);
  font-size: var(--cn-text-2xs);
  font-weight: var(--cn-weight-bold);
  letter-spacing: var(--cn-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
}

body.cn-product div.product div.summary .single-product-category a:hover,
body.cn-product div.product div.summary .single-product-category a:focus-visible {
  border-color: var(--cn-accent);
}

/* Title */
body.cn-product div.product div.summary .product_title {
  margin: 0 0 var(--cn-space-xs);
  font-family: var(--cn-font-display);
  font-size: var(--cn-product-title);
  font-weight: var(--cn-weight-semibold);
  line-height: var(--cn-leading-tight);
  letter-spacing: var(--cn-tracking-tight);
  color: var(--cn-text);
  text-wrap: balance;
}

/* Price — large white figures that do not shift width */
body.cn-product div.product div.summary p.price,
body.cn-product div.product div.summary span.price {
  margin: 0 0 var(--cn-space-md);
  font-family: var(--cn-font-body);
  font-size: var(--cn-product-price);
  font-weight: var(--cn-weight-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--cn-text);
}

body.cn-product div.product div.summary p.price del {
  color: var(--cn-text-faint);
  font-size: 0.6em;
  font-weight: var(--cn-weight-regular);
}

body.cn-product div.product div.summary p.price ins {
  text-decoration: none;
}

/* Short description */
body.cn-product div.product div.summary .woocommerce-product-details__short-description {
  margin: 0 0 var(--cn-space-md);
  padding-top: var(--cn-space-md);
  border-top: var(--cn-border-hair);
  font-size: var(--cn-text-md);
  line-height: var(--cn-leading-body);
  color: var(--cn-text-muted);
}

body.cn-product div.product div.summary .woocommerce-product-details__short-description strong {
  color: var(--cn-text);
  font-weight: var(--cn-weight-semibold);
}

body.cn-product div.product div.summary .woocommerce-product-details__short-description :last-child {
  margin-bottom: 0;
}

/* "Category: Pork Dishes" under the button repeats the pill at the top of
   the panel. Hidden here rather than unhooked in PHP, because Astra may
   print the meta from its own single-product structure instead of
   WooCommerce's hook. */
body.cn-product div.product div.summary .product_meta {
  display: none;
}

/* Stock line, if a dish ever shows one */
body.cn-product div.product div.summary .stock {
  color: var(--cn-text-muted);
  font-size: var(--cn-text-sm);
}
body.cn-product div.product div.summary .stock.out-of-stock {
  color: var(--cn-error);
}


/* ==========================================================================
   6. QUANTITY AND ADD TO CART
   --------------------------------------------------------------------------
   One row: quantity field, then a full-width button. Same look as
   .cn-btn-primary in base.css, restated here because Astra's button rules
   outrank that two-class selector.
   ========================================================================== */

body.cn-product div.product div.summary form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--cn-space-xs);
  margin: 0;
}

/* WooCommerce's clearfix; ::after is cleared in section 7. */
body.cn-product div.product div.summary form.cart::before {
  content: none;
}

body.cn-product div.product div.summary form.cart div.quantity {
  order: 1;
  float: none;
  flex: 0 0 var(--cn-product-qty-w);
  margin: 0;
}

/* 16px text so iOS never zooms when the field is tapped. Written as
   max(16px, …) because Astra drops the root font size to 91.2% below
   922px, which made the 1rem token 14.6px there. */
body.cn-product #content div.product div.summary form.cart .quantity input.qty {
  box-sizing: border-box;
  width: 100%;
  height: var(--cn-product-btn-h);
  min-height: var(--cn-product-btn-h);
  margin: 0;
  padding: 0 var(--cn-space-2xs);
  border: 1px solid var(--cn-field-border);
  border-radius: var(--cn-radius-pill);
  background: var(--cn-field-bg);
  color: var(--cn-field-text);
  font-family: var(--cn-font-body);
  font-size: max(16px, var(--cn-text-base));
  font-weight: var(--cn-weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

body.cn-product #content div.product div.summary form.cart .quantity input.qty:hover {
  border-color: var(--cn-field-border-hover);
}

body.cn-product #content div.product div.summary form.cart .quantity input.qty:focus,
body.cn-product #content div.product div.summary form.cart .quantity input.qty:focus-visible {
  outline: var(--cn-focus-ring);
  outline-offset: var(--cn-focus-ring-offset);
  border-color: var(--cn-field-border-hover);
}

body.cn-product #content div.product div.summary form.cart button.single_add_to_cart_button {
  order: 2;
  position: relative;
  flex: 1 1 12rem;
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  min-height: var(--cn-product-btn-h);
  margin: 0;
  padding: 0 var(--cn-space-lg);
  border: 1px solid var(--cn-accent-dark);
  border-radius: var(--cn-radius-pill);
  background: var(--cn-gradient-accent);
  box-shadow: var(--cn-shadow-button);
  color: var(--cn-header-footer-bg);
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-base);
  font-weight: var(--cn-weight-bold);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color var(--cn-dur) var(--cn-ease),
    transform        var(--cn-dur-fast) var(--cn-ease),
    box-shadow       var(--cn-dur) var(--cn-ease);
}

/* Shimmer sweep, as on .cn-btn-primary */
body.cn-product #content div.product div.summary form.cart button.single_add_to_cart_button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    115deg,
    transparent 0%,
    var(--cn-shimmer) 46%,
    var(--cn-shimmer) 54%,
    transparent 100%
  );
  transform: translateX(-130%);
  transition: transform var(--cn-dur-slow) var(--cn-ease);
  pointer-events: none;
}

body.cn-product #content div.product div.summary form.cart button.single_add_to_cart_button:hover,
body.cn-product #content div.product div.summary form.cart button.single_add_to_cart_button:focus-visible {
  background: var(--cn-accent);
  color: var(--cn-header-footer-bg);
  box-shadow: var(--cn-shadow-button-hover);
  transform: translateY(-1px);
}

body.cn-product #content div.product div.summary form.cart button.single_add_to_cart_button:hover::after,
body.cn-product #content div.product div.summary form.cart button.single_add_to_cart_button:focus-visible::after {
  transform: translateX(130%);
}

body.cn-product #content div.product div.summary form.cart button.single_add_to_cart_button:focus-visible {
  outline: var(--cn-focus-ring);
  outline-offset: var(--cn-focus-ring-offset);
}

body.cn-product #content div.product div.summary form.cart button.single_add_to_cart_button:active {
  transform: translateY(0);
}

body.cn-product #content div.product div.summary form.cart button.single_add_to_cart_button:disabled,
body.cn-product #content div.product div.summary form.cart button.single_add_to_cart_button.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}


/* ==========================================================================
   7. SHOPENGINE WISHLIST / COMPARE BUTTONS — hidden
   --------------------------------------------------------------------------
   ShopEngine injects two icon buttons at the start of the cart form. The
   product page hides them by request (2026-10-11). display:none
   also takes them out of the tab order and the accessibility tree. Only the
   product page is affected; ShopEngine itself is untouched.
   ========================================================================== */

body.cn-product div.product div.summary form.cart .shopengine-wishlist,
body.cn-product div.product div.summary form.cart .shopengine-comparison {
  display: none;
}

/* WooCommerce's clearfix ::after would otherwise become an empty flex item. */
body.cn-product div.product div.summary form.cart::after {
  content: none;
}


/* ==========================================================================
   8. NOTICES — "added to your cart" and errors
   --------------------------------------------------------------------------
   Never directly on the brick: --cn-error on brick is 2.90:1.
   ========================================================================== */

body.cn-product .woocommerce-notices-wrapper .woocommerce-message,
body.cn-product .woocommerce-notices-wrapper .woocommerce-info,
body.cn-product .woocommerce-notices-wrapper .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-xs) var(--cn-space-md);
  margin: var(--cn-space-md) 0 0;
  padding: var(--cn-space-sm) var(--cn-space-md);
  border: var(--cn-border-hair);
  border-left: 3px solid var(--cn-accent);
  border-radius: var(--cn-radius-md);
  background: var(--cn-surface);
  color: var(--cn-text);
  font-size: var(--cn-text-sm);
  list-style: none;
}

body.cn-product .woocommerce-notices-wrapper .woocommerce-error {
  border-left-color: var(--cn-error);
  color: var(--cn-error);
}

body.cn-product .woocommerce-notices-wrapper .woocommerce-message::before,
body.cn-product .woocommerce-notices-wrapper .woocommerce-info::before,
body.cn-product .woocommerce-notices-wrapper .woocommerce-error::before {
  content: none;
}

/* "View cart" inside the notice */
body.cn-product .woocommerce-notices-wrapper .woocommerce-message a.button {
  order: 2;
  margin: 0;
  padding: var(--cn-space-2xs) var(--cn-space-md);
  border: 1px solid var(--cn-accent-dark);
  border-radius: var(--cn-radius-pill);
  background: var(--cn-gradient-accent);
  color: var(--cn-header-footer-bg);
  font-size: var(--cn-text-sm);
  font-weight: var(--cn-weight-bold);
  text-decoration: none;
}

body.cn-product .woocommerce-notices-wrapper .woocommerce-message a.button:hover,
body.cn-product .woocommerce-notices-wrapper .woocommerce-message a.button:focus-visible {
  background: var(--cn-accent);
  color: var(--cn-header-footer-bg);
}


/* ==========================================================================
   9. TABS — a text row on the brick, underline under the active tab
   ========================================================================== */

body.cn-product div.product .woocommerce-tabs {
  margin: 0 0 var(--cn-space-2xl);
}

body.cn-product div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cn-space-lg);
  margin: 0 0 var(--cn-space-md);
  padding: 0;
  border-bottom: 1px solid var(--cn-hairline-strong);
}

body.cn-product div.product .woocommerce-tabs ul.tabs::before,
body.cn-product div.product .woocommerce-tabs ul.tabs::after,
body.cn-product div.product .woocommerce-tabs ul.tabs li::before,
body.cn-product div.product .woocommerce-tabs ul.tabs li::after {
  content: none;
  display: none;
}

body.cn-product div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

body.cn-product div.product .woocommerce-tabs ul.tabs li a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cn-nav-tap-min);
  padding: 0;
  margin-bottom: -1px;   /* the underline sits on the row's hairline */
  border-bottom: var(--cn-product-tab-line) solid transparent;
  color: var(--cn-text-muted);
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-sm);
  font-weight: var(--cn-weight-bold);
  letter-spacing: var(--cn-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition:
    color        var(--cn-dur-fast) var(--cn-ease),
    border-color var(--cn-dur-fast) var(--cn-ease);
}

body.cn-product div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--cn-text);
}

body.cn-product div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--cn-text);
  border-bottom-color: var(--cn-text);
}

body.cn-product div.product .woocommerce-tabs .panel {
  max-width: 68ch;
  margin: 0;
  padding: 0;
  font-size: var(--cn-text-md);
  line-height: var(--cn-leading-body);
  color: var(--cn-text);
}

/* WooCommerce repeats the tab name as an h2 inside the panel; the tab
   already says it. Hidden visually, kept for screen readers. */
body.cn-product div.product .woocommerce-tabs .panel > h2:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.cn-product div.product .woocommerce-tabs .panel a {
  color: var(--cn-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.cn-product div.product .woocommerce-tabs .panel strong {
  font-weight: var(--cn-weight-semibold);
}


/* ==========================================================================
   10. REVIEWS — only shown once a dish has one, or to a buyer who can add
       one (see cn_product_tabs in functions.php)
   ========================================================================== */

body.cn-product #reviews .woocommerce-Reviews-title,
body.cn-product #reviews .comment-reply-title {
  font-family: var(--cn-font-display);
  font-size: var(--cn-text-xl);
  font-weight: var(--cn-weight-semibold);
  color: var(--cn-text);
}

body.cn-product #reviews .commentlist {
  margin: 0 0 var(--cn-space-lg);
  padding: 0;
  list-style: none;
}

body.cn-product #reviews .commentlist li .comment_container,
body.cn-product #reviews #review_form_wrapper {
  padding: var(--cn-space-md);
  border: var(--cn-border-hair);
  border-radius: var(--cn-radius-lg);
  background: var(--cn-surface);
}

body.cn-product #reviews .commentlist li {
  margin: 0 0 var(--cn-space-sm);
}

body.cn-product #reviews .meta,
body.cn-product #reviews .woocommerce-noreviews,
body.cn-product #reviews .woocommerce-verification-required {
  color: var(--cn-text-muted);
  font-size: var(--cn-text-sm);
}

/* Stars in white: green on brick would be 2.90:1 */
body.cn-product #reviews .star-rating,
body.cn-product #reviews .star-rating span::before,
body.cn-product #reviews p.stars a {
  color: var(--cn-text);
}

body.cn-product #reviews input[type="text"],
body.cn-product #reviews input[type="email"],
body.cn-product #reviews textarea,
body.cn-product #reviews select {
  box-sizing: border-box;
  width: 100%;
  padding: var(--cn-space-xs) var(--cn-space-sm);
  border: 1px solid var(--cn-field-border);
  border-radius: var(--cn-radius-md);
  background: var(--cn-field-bg);
  color: var(--cn-field-text);
  font-family: var(--cn-font-body);
  font-size: max(16px, var(--cn-text-base)); /* no iOS zoom, as for .qty */
}

body.cn-product #reviews .form-submit input[type="submit"] {
  min-height: var(--cn-nav-tap-min);
  padding: 0 var(--cn-space-lg);
  border: 1px solid var(--cn-accent-dark);
  border-radius: var(--cn-radius-pill);
  background: var(--cn-gradient-accent);
  color: var(--cn-header-footer-bg);
  font-family: var(--cn-font-body);
  font-weight: var(--cn-weight-bold);
  cursor: pointer;
}


/* ==========================================================================
   11. RELATED DISHES BAND
   --------------------------------------------------------------------------
   Built by cn_product_related() from the shared cn-product-card. The band
   is full width while its content stays in the page column: the colour is
   painted out to the viewport edges with a spread shadow and clip-path,
   which never causes horizontal scroll the way 100vw margins can.
   ========================================================================== */

body.cn-product .cn-related {
  position: relative;
  margin: 0;
  padding: var(--cn-space-2xl) 0 var(--cn-space-3xl);
  background: var(--cn-product-band-bg);
  box-shadow: 0 0 0 100vmax var(--cn-product-band-bg);
  clip-path: inset(0 -100vmax);
  color: var(--cn-text);
}

body.cn-product .cn-related__title {
  margin: 0 0 var(--cn-space-lg);
  font-family: var(--cn-font-display);
  font-size: var(--cn-text-xl);
  font-weight: var(--cn-weight-semibold);
  line-height: var(--cn-leading-tight);
  color: var(--cn-text);
}

/* One column until there is room for a row of three. product-card.css sets
   the grid at (0,4,0) — two columns, centred at --cn-card-max — so these
   rules carry the related grid's own class to outrank it. */
body.cn-product .cn-related .wc-block-grid.cn-related__grid .wc-block-grid__products {
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  margin: 0;
  padding-bottom: 0;   /* the band's own padding already clears the widget */
}

/* Below ~1100px a third of the column leaves the card's text beside the
   photo too narrow, so three across starts here. The smaller photo keeps
   the name and price readable at the narrow end of the range. */
@media (min-width: 1100px) {
  body.cn-product .cn-related .wc-block-grid.cn-related__grid .wc-block-grid__products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.cn-product .cn-related .cn-product-card__top {
    grid-template-columns: minmax(0, 1fr) var(--cn-card-thumb-mobile);
  }

  body.cn-product .cn-related .cn-product-card__media {
    width: var(--cn-card-thumb-mobile);
    height: var(--cn-card-thumb-mobile);
  }
}


/* ==========================================================================
   12. MOBILE
   --------------------------------------------------------------------------
   Stacks below 922px, Astra's own desktop breakpoint, so the photo and the
   panel never sit side by side at a width Astra treats as tablet.
   ========================================================================== */

@media (max-width: 921px) {

  body.cn-product #content .ast-woocommerce-container div.product {
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--cn-space-md);
  }

  body.cn-product #content .ast-woocommerce-container div.product div.images,
  body.cn-product #content .ast-woocommerce-container div.product div.summary {
    grid-column: 1;
  }

  body.cn-product #content .ast-woocommerce-container div.product div.images {
    margin-bottom: var(--cn-space-md);
  }

  body.cn-product div.product .woocommerce-tabs ul.tabs {
    gap: var(--cn-space-md);
  }

  body.cn-product .cn-related {
    padding: var(--cn-space-xl) 0 var(--cn-space-2xl);
  }
}

/* Clears the chat widget: the last thing on the page is the related band,
   and its bottom padding is already taller than the widget's 50px pill plus
   its 20px inset. */
@media (max-width: 480px) {

  body.cn-product div.product div.summary form.cart div.quantity {
    flex-basis: 76px;
  }

  body.cn-product #content div.product div.summary form.cart button.single_add_to_cart_button {
    padding: 0 var(--cn-space-md);
  }

  /* Keeps Add to cart out of the chat launcher's column. The launcher is a
     48px circle 20px in from the bottom-right corner (measured 2026-10-11),
     and at 390px the full-width button ran 33px underneath it whenever it
     scrolled to the bottom of the screen. */
  body.cn-product div.product div.summary form.cart {
    padding-right: var(--cn-product-widget-clear);
  }

  body.cn-product .cn-related {
    padding-bottom: calc(var(--cn-widget-h) + var(--cn-widget-inset) * 2 + var(--cn-space-lg));
  }
}


/* ==========================================================================
   13. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  body.cn-product #content div.product div.summary form.cart button.single_add_to_cart_button,
  body.cn-product #content div.product div.summary form.cart button.single_add_to_cart_button::after {
    transition: none;
  }

  body.cn-product #content div.product div.summary form.cart button.single_add_to_cart_button:hover,
  body.cn-product #content div.product div.summary form.cart button.single_add_to_cart_button:focus-visible {
    transform: none;
  }
}