/* cspell:ignore alignwide alignfull */

/*
 * SuprBad UX — wide catalog layout (U6, v1.4.0; spacing and picture shape v1.4.1).
 * Feature and scope: docs/ARCHITECTURE.md "Wide catalog layout"; the scope rule
 * is includes/Catalog/CatalogLayout.php. Loaded only where the layout applies.
 *
 * Ported from staging's preview mu-plugin v12 (graded and kept by the owner
 * 2026-10-06), without its grid-button size rules: button sizing is SB Buttons'
 * (owner decision B1).
 *
 * 1.4.1 ports the B2b preview (graded "a more premium look" and kept by the owner
 * 2026-10-06): the picture takes the product photo's portrait shape and fills
 * the card, so the visible photo edge is the card edge, and one even space
 * (112 / 128 / 136px) sits at the page edge and between cards.
 *
 * Browser floor: prefix media queries (min-width), so Safari 12 parses every
 * block. The few :has() rules (heading-row spacing, picture-hover underline) are
 * dropped by engines without :has() (Safari before 15.4); nothing else depends
 * on them.
 *
 * !important is used only where WordPress or WooCommerce writes the value with
 * more weight than a stylesheet can win: the image size is an inline style on
 * the <img>, WP preset font sizes are !important, and the title block carries an
 * inline margin-top: 0.
 */

/* ── Edge equals gap ──────────────────────────────────────────────────────────
 * One value per width step drives both the page's root padding (heading row,
 * sorting, grid) and the grid gap, so the spacing is even edge to edge.
 * Full-bleed blocks (the SB Window carousel) are unaffected; the header and
 * footer keep their own 40px edge. Only `columns-4` grids are re-columned, so a
 * grid set to another column count in the editor keeps its own count. */
@media (min-width: 1024px) {
  body.sbux-catalog-layout {
    --sbux-catalog-edge: 112px;
  }

  body.sbux-catalog-layout
    .wp-site-blocks
    > .wp-block-group.has-global-padding.is-layout-constrained {
    --wp--style--root--padding-left: var(--sbux-catalog-edge);
    --wp--style--root--padding-right: var(--sbux-catalog-edge);
  }

  body.sbux-catalog-layout .wp-site-blocks .wp-block-group.is-layout-constrained > .alignwide {
    max-width: none;
  }

  body.sbux-catalog-layout .wc-block-product-template__responsive.columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sbux-catalog-edge);
  }
}

/* ── Card scale steps ─────────────────────────────────────────────────────────
 * 1800px: 5 columns, title and price x1.1.
 * 2300px: 6 columns at every wider width (owner, 2026-10-06), title and price
 * x1.15. The fixed image heights here (300 / 340px) are the Safari 12 fallback
 * only; the picture-shape block below replaces them where aspect-ratio exists. */
@media (min-width: 1800px) {
  body.sbux-catalog-layout {
    --sbux-catalog-edge: 128px;
  }

  body.sbux-catalog-layout .wc-block-product-template__responsive.columns-4 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  body.sbux-catalog-layout .wc-block-product-template .wc-block-components-product-image img {
    height: 300px !important;
  }

  body.sbux-catalog-layout .wc-block-product-template .wp-block-post-title {
    font-size: 18.5px !important;
  }

  body.sbux-catalog-layout .wc-block-product-template .wc-block-components-product-price {
    font-size: 15px !important;
  }
}

@media (min-width: 2300px) {
  body.sbux-catalog-layout {
    --sbux-catalog-edge: 136px;
  }

  body.sbux-catalog-layout .wc-block-product-template__responsive.columns-4 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body.sbux-catalog-layout .wc-block-product-template .wc-block-components-product-image img {
    height: 340px !important;
  }

  body.sbux-catalog-layout .wc-block-product-template .wp-block-post-title {
    font-size: 19.5px !important;
  }

  body.sbux-catalog-layout .wc-block-product-template .wc-block-components-product-price {
    font-size: 16px !important;
  }
}

/* ── Picture shape ────────────────────────────────────────────────────────────
 * Product photos are portrait (269 x 345). WooCommerce draws them with
 * object-fit: contain in a fixed-height box as wide as the card, so the photo
 * was narrower than its card and the spare width read as extra space between
 * cards. Here the box takes the photo's own shape at the full card width, so
 * the photo fills it and the even edge / gap is what the eye sees. Later in the
 * file than the fixed heights above, so it wins at equal specificity. Engines
 * without aspect-ratio (Safari before 15) skip it and keep the fixed heights. */
@media (min-width: 1024px) {
  @supports (aspect-ratio: 1 / 1) {
    body.sbux-catalog-layout .wc-block-product-template .wc-block-components-product-image img {
      width: 100% !important;
      height: auto !important;
      aspect-ratio: 269 / 345;
      object-fit: contain;
    }
  }
}

/* ── Heading row ──────────────────────────────────────────────────────────────
 * Keyed on block structure, never on the heading's content: the row is the
 * alignwide group holding the catalog sorting control. More space above only
 * where an SB Window carousel directly precedes it; less space below (the 20px
 * spacer block is hidden). */
@media (min-width: 1024px) {
  body.sbux-catalog-layout
    .wp-block-group.alignfull:has(.sb-stage)
    + .wp-block-group
    > .wp-block-group.alignwide:has(.wc-block-catalog-sorting) {
    margin-block-start: 64px;
  }

  body.sbux-catalog-layout
    .wp-block-group.alignwide:has(.wc-block-catalog-sorting)
    + .wp-block-spacer {
    display: none;
  }

  body.sbux-catalog-layout
    .wp-block-group.alignwide:has(.wc-block-catalog-sorting)
    ~ .wp-block-woocommerce-product-collection {
    margin-block-start: 36px;
  }
}

/* ── Card text (all widths) ───────────────────────────────────────────────────
 * The title sits 8px off the picture, and the gap between the title group and
 * the price group is 8px; rows still align prices because the card group keeps
 * space-between. The price loses the margin that sat above a grid button. */
body.sbux-catalog-layout .wc-block-product-template .wc-block-product .wp-block-post-title {
  margin-top: 8px !important;
}

body.sbux-catalog-layout .wc-block-product-template .wc-block-product > .wp-block-group {
  gap: 8px;
}

body.sbux-catalog-layout
  .wc-block-product-template
  .wc-block-product
  .wp-block-woocommerce-product-price {
  margin-bottom: 0;
}

@media (min-width: 1800px) {
  body.sbux-catalog-layout .wc-block-product-template .wc-block-product .wp-block-post-title {
    margin-top: 9px !important;
  }
}

@media (min-width: 2300px) {
  body.sbux-catalog-layout .wc-block-product-template .wc-block-product .wp-block-post-title {
    margin-top: 10px !important;
  }
}

/* Desktop hover underlines the title, from the title or from the picture. */
@media (hover: hover) {
  body.sbux-catalog-layout
    .wc-block-product-template
    .wc-block-product
    .wp-block-post-title
    a:hover,
  body.sbux-catalog-layout
    .wc-block-product-template
    .wc-block-product:has(.wc-block-components-product-image a:hover)
    .wp-block-post-title
    a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }
}