{"version":3,"file":"blocks/ProductTemplate/style-index.css","mappings":";;;AAKA;EACE;EAWA;EACA;EACA;EACA;EACA;AAdF;AAgBE;EAlBF;IAmBI;EAbF;AACF;AAeE;EAtBF;IAuBI;EAZF;AACF;AAgBE;EACE;EACA;AAdJ;AAgBI;EACE;EACA;EACA;AAdN;;AAmBA;EACE;EACA;EACA;AAhBF;;AA8BA;;EAEE;AA3BF;;AAkCA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;AAjCF;AAmCE;EACE;AAjCJ;;AAuCA;EACE;EACA;EACA;EACA;EACA;EACA;AApCF,C","sources":["webpack://brandy-blocks/./src/blocks/ProductTemplate/style.scss"],"sourcesContent":["// Layout wrapper for the repeated product items (shared editor + frontend).\n// Column counts per breakpoint come from CSS custom properties set inline by the\n// block render (desktop/tablet/mobile), configurable in the block inspector —\n// which is what makes responsive columns a setting here rather than a CSS patch\n// over WooCommerce's columns-N classes.\n.wp-block-brandy-product-template {\n  display: grid;\n  // --bpc-gap is the block's own \"Block spacing\" value, written inline by the\n  // render (see get_gap_style() — core's flow layout would otherwise turn it\n  // into sibling margins, which a grid ignores). The fallbacks are the block's\n  // own defaults, deliberately not the global block gap: that one is tuned for\n  // stacked content and reads as cramped between product cards.\n  //\n  // Rows are looser than columns (42/30), which is what the theme applied to\n  // WooCommerce's product grid before this block existed — a card is much taller\n  // than it is wide, so equal gaps read as tight rows. Setting \"Block spacing\"\n  // explicitly collapses both axes onto that one value.\n  gap: var(--bpc-row-gap, 42px) var(--bpc-gap, 30px);\n  grid-template-columns: repeat(var(--bpc-columns, 4), minmax(0, 1fr));\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  @media (max-width: 780px) {\n    grid-template-columns: repeat(var(--bpc-columns-tablet, 2), minmax(0, 1fr));\n  }\n\n  @media (max-width: 480px) {\n    grid-template-columns: repeat(var(--bpc-columns-mobile, 1), minmax(0, 1fr));\n  }\n\n  // Slider mode: Embla owns the layout, so the wrapper drops the grid and the\n  // .embla__container inside it becomes the flex track.\n  &.is-slider {\n    display: block;\n    grid-template-columns: none;\n\n    .embla__container {\n      margin: 0;\n      padding: 0;\n      list-style: none;\n    }\n  }\n}\n\n.wp-block-brandy-product {\n  min-width: 0;\n  margin: 0 !important;\n  list-style: none;\n}\n\n// Quick actions stacked over the product image.\n//\n// The reveal itself is the theme's HoverAnimation setting (`fade-in` with\n// trigger `parent`); what was missing is somewhere for the icons to sit. An\n// author adds this class to a group of action blocks — Quick View, Share,\n// Wishlist — inside the group that also holds the image, and the column pins\n// itself to the image's top corner.\n//\n// `position: relative` goes on the card's own hover trigger rather than on a\n// dedicated wrapper, because that trigger is the element the reveal already\n// keys off, so the two cannot be attached to different ancestors.\n.wp-block-brandy-product .is-hover-trigger,\n.wp-block-brandy-product .wp-block-group:has(> .brandy-card-actions) {\n  position: relative;\n}\n\n// Scoped to the product item rather than left as a bare class: the editor gives\n// every block wrapper `position: relative` to hang its outline off, at the same\n// specificity, so an unscoped rule loses in the canvas and the column drops back\n// into the flow — the author edits a layout the frontend does not have.\n.wp-block-brandy-product .brandy-card-actions {\n  position: absolute;\n  top: var(--brandy-card-actions-offset, 12px);\n  right: var(--brandy-card-actions-offset, 12px);\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  gap: var(--brandy-card-actions-gap, 8px);\n  // The column only frames its buttons; clicks between them belong to the card\n  // link underneath, not to a transparent box sitting over the image.\n  pointer-events: none;\n\n  > * {\n    pointer-events: auto;\n  }\n}\n\n// Editor-only hint shown when the query matches nothing yet. (Slider mode has\n// its own preview bar, in editor.scss.)\n.wp-block-brandy-product-template__notice {\n  margin: 0 0 0.75em;\n  padding: 6px 10px;\n  font-size: 12px;\n  color: #50575e;\n  background: #f0f0f1;\n  border-radius: 4px;\n}\n"],"names":[],"sourceRoot":""}