/* ReactWoo Product Grid — Figma 16:21 / 16:143 / 16:211 (BEM: rwa-product-grid*)
 *
 * Design parity notes
 * - Every number below is taken from Figma node 16:2 (Product Grid / Desktop / Tablet / Mobile).
 * - Figma strokes are INSIDE strokes: a 1px border does not add to the box and padding is
 *   measured from the outer edge. CSS borders sit outside the padding, so boxes with a 1px
 *   border use `padding: calc(<figma padding> - 1px)` to land content on the Figma inset.
 * - Figma "line-height: normal" with Inter maps to CSS `line-height: normal`, except where
 *   Figma rounds the auto line box differently from Chrome (pixel-verified against the frame):
 *   11px -> 13 (Chrome 14) and 17px -> 21 (Chrome 20). The badge pill therefore uses
 *   padding 6/10/5 (25px tall, glyph on the Figma row) and the price row carries 1px of top
 *   padding (21px tall, current price 1px lower, old price pulled back up with margin).
 * - Plugin CSS carries the complete default look (frontend articles + editor clones).
 *   Kit Global Classes (Product_Grid_Class_Map) carry the same values so the card stays
 *   editable in the Class Manager; they load later and win when a user edits them.
 */

/* Star glyph (16:38): Figma draws the rating with Inter Medium U+2605. Web Inter subsets
   (Google Fonts latin) do not ship U+2605, so browsers fell back to a system symbol font
   (Segoe UI Symbol: narrower, shorter, taller line box). This face maps only U+2605/U+2606 to
   the plugin's shared self-hosted Inter file (assets/shared/inter.css, same URL, one download)
   so the stars match the design exactly.
   Inter (c) 2016 The Inter Project Authors, SIL Open Font License 1.1 (license text is in the
   font's name table; https://openfontlicense.org). */
@font-face {
  font-family: 'RWA Inter Star';
  src: url('../../shared/fonts/inter/InterVariable-text-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: block;
  unicode-range: U+2605-2606;
}

.rwa-product-grid {
  --rwa-pg-font: var(--rwa-font-sans, Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  --rwa-pg-stroke: 1px;
  --rwa-pg-panel-pad: 24px;
  --rwa-pg-panel-gap: 20px;
  --rwa-pg-header-gap: 24px;
  --rwa-pg-col-gap: 16px;
  --rwa-pg-row-gap: 20px;
  --rwa-pg-card-pad: 14px;
  --rwa-pg-card-gap: 10px;
  --rwa-pg-media-h: 190px;
  --rwa-pg-card-radius: 16px;
  --rwa-pg-media-radius: 14px;
  --rwa-pg-control-radius: 10px;
  --rwa-pg-panel-radius: 20px;
  --rwa-pg-ink: #121621;
  --rwa-pg-title: #111522;
  --rwa-pg-muted: #6b7591;
  --rwa-pg-line: #dee3ed;
  --rwa-pg-fill: #f6f8fc;
  --rwa-pg-accent: #6740ff;
  --rwa-pg-star: #f28c24;
  --rwa-pg-star-empty: #dee3ed;
  --rwa-pg-sale-bg: #fee4e2;
  --rwa-pg-sale: #d92d20;
  --rwa-pg-disabled-opacity: 0.58;
  --rwa-pg-skel: color-mix(in srgb, #121621 10%, transparent);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--rwa-pg-panel-gap);
  width: 100%;
  max-width: none;
  padding: calc(var(--rwa-pg-panel-pad) - var(--rwa-pg-stroke));
  color: var(--rwa-pg-ink);
  font-family: var(--rwa-pg-font);
  background: #fff;
  border: var(--rwa-pg-stroke) solid var(--rwa-pg-line);
  border-radius: var(--rwa-pg-panel-radius);
  overflow: visible;
}

.rwa-product-grid *,
.rwa-product-grid *::before,
.rwa-product-grid *::after {
  box-sizing: border-box;
}

/* ---- Header (16:22): row, gap 24, 60px tall, "View all" sits beside the copy ---- */

.rwa-product-grid .rwa-product-grid__header {
  display: flex;
  flex-wrap: wrap; /* 390px acceptance: wrap instead of clipping "View all" (Figma clips it). */
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--rwa-pg-card-gap) var(--rwa-pg-header-gap);
  width: 100%;
  min-height: 60px;
  margin: 0;
  padding: 0;
}

.rwa-product-grid .rwa-product-grid__header-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.rwa-product-grid .rwa-product-grid__title {
  margin: 0;
  padding: 0;
  font-family: var(--rwa-pg-font);
  font-size: 24px;
  font-weight: 700;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  color: var(--rwa-pg-title);
}

.rwa-product-grid .rwa-product-grid__subtitle {
  margin: 0;
  padding: 0;
  font-family: var(--rwa-pg-font);
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  color: var(--rwa-pg-muted);
}

.rwa-product-grid .rwa-product-grid__view-all {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: calc(12px - var(--rwa-pg-stroke)) calc(16px - var(--rwa-pg-stroke));
  font-family: var(--rwa-pg-font);
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: normal;
  white-space: nowrap;
  color: var(--rwa-pg-ink);
  text-decoration: none;
  background: #fff;
  border: var(--rwa-pg-stroke) solid var(--rwa-pg-line);
  border-radius: var(--rwa-pg-control-radius);
}

:where(.rwa-product-grid) .rwa-product-grid__view-all:hover {
  color: var(--rwa-pg-ink);
  background: var(--rwa-pg-fill);
}

:where(.rwa-product-grid) .rwa-product-grid__view-all:focus-visible {
  outline: 2px solid var(--rwa-pg-accent);
  outline-offset: 3px;
}

/* ---- Grid: only the wrapper is a grid. The nestable list shell and the live host are
   display:contents so the authoring template and live cards are all direct grid items.
   (The list shell used to be forced to display:grid and took the first cell.) ---- */

.rwa-product-grid .rwa-product-grid__grid {
  display: grid;
  /* Columns come from the per-device vars (data attrs / settings), switched by media query.
     Never from an inline --rwa-pg-cols: that pinned tablet and mobile to 4 columns. */
  grid-template-columns: repeat(var(--rwa-pg-cols-desktop, 4), minmax(0, 1fr));
  grid-auto-flow: row;
  align-items: stretch;
  justify-content: stretch;
  column-gap: var(--rwa-pg-col-gap);
  row-gap: var(--rwa-pg-row-gap);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.rwa-product-grid .rwa-collection-list,
.rwa-product-grid [data-rwa-collection-list],
.rwa-product-grid .rwa-product-grid__live {
  display: contents;
}

/* ---- Card (16:29): column, gap 10, padding 14 (inside 1px stroke), radius 16 ---- */

.rwa-product-grid .rwa-product-grid__card,
.rwa-product-grid [data-rwa-collection-item] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--rwa-pg-card-gap);
  width: 100%;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: calc(var(--rwa-pg-card-pad) - var(--rwa-pg-stroke));
  background: #fff;
  border: var(--rwa-pg-stroke) solid var(--rwa-pg-line);
  border-radius: var(--rwa-pg-card-radius);
  overflow: hidden;
}

.rwa-product-grid .rwa-product-grid__media-link {
  display: block;
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
}

/* Product image (16:30): full inner width, 190px tall, radius 14. */
.rwa-product-grid .rwa-product-grid__media {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: var(--rwa-pg-media-h);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--rwa-pg-media-radius);
  background: var(--rwa-pg-fill);
}

/* Image ratio setting. "design" (default) = Figma's fixed 190px box; the ratio options are
   explicit widget settings, so they out-rank the kit media class (0,3,0 vs 0,2,0). */
:where(.rwa-product-grid) .rwa-product-grid__media.rwa-product-grid__media--design {
  aspect-ratio: auto;
}

:where(.rwa-product-grid) .rwa-product-grid__media.rwa-product-grid__media--1-1,
:where(.rwa-product-grid) .rwa-product-grid__media.rwa-product-grid__media--3-4,
:where(.rwa-product-grid) .rwa-product-grid__media.rwa-product-grid__media--4-3,
:where(.rwa-product-grid) .rwa-product-grid__media.rwa-product-grid__media--4-5 {
  height: auto;
}

:where(.rwa-product-grid) .rwa-product-grid__media.rwa-product-grid__media--1-1 {
  aspect-ratio: 1 / 1;
}

:where(.rwa-product-grid) .rwa-product-grid__media.rwa-product-grid__media--3-4 {
  aspect-ratio: 3 / 4;
}

:where(.rwa-product-grid) .rwa-product-grid__media.rwa-product-grid__media--4-3 {
  aspect-ratio: 4 / 3;
}

:where(.rwa-product-grid) .rwa-product-grid__media.rwa-product-grid__media--4-5 {
  aspect-ratio: 4 / 5;
}

.rwa-product-grid .rwa-product-grid__thumb {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
}

.rwa-product-grid [class*="rwa-product-grid__media"] :where(img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image placeholder = Figma sample art: horizontal gradient + soft tile + ground ellipse. */
.rwa-product-grid .rwa-product-grid__thumb--placeholder {
  position: absolute;
  inset: 0;
  min-height: 100%;
  background: linear-gradient(90deg, var(--rwa-pg-ph-from, #eee8ff) 0%, var(--rwa-pg-ph-to, #d9eeff) 100%);
}

.rwa-product-grid .rwa-product-grid__thumb--placeholder::before,
.rwa-product-grid .rwa-product-grid__thumb--placeholder::after {
  content: '';
  position: absolute;
}

.rwa-product-grid .rwa-product-grid__thumb--placeholder::before {
  left: 27%;
  top: 68%;
  width: 46%;
  aspect-ratio: 112.24 / 53.68;
  border-radius: 50%;
  background: rgba(17, 21, 34, 0.13);
}

.rwa-product-grid .rwa-product-grid__thumb--placeholder::after {
  left: 31%;
  top: 22%;
  width: 38%;
  height: 50%;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 18px 0 rgba(17, 21, 34, 0.12);
}

:where(.rwa-product-grid) .rwa-product-grid__live > :nth-child(8n + 2) { --rwa-pg-ph-from: #e0f7e8; --rwa-pg-ph-to: #e7f0ff; }
:where(.rwa-product-grid) .rwa-product-grid__live > :nth-child(8n + 3) { --rwa-pg-ph-from: #fff0d6; --rwa-pg-ph-to: #efe5ff; }
:where(.rwa-product-grid) .rwa-product-grid__live > :nth-child(8n + 4) { --rwa-pg-ph-from: #e7f0ff; --rwa-pg-ph-to: #e0f7e8; }
:where(.rwa-product-grid) .rwa-product-grid__live > :nth-child(8n + 5) { --rwa-pg-ph-from: #fee4e1; --rwa-pg-ph-to: #fff0d6; }
:where(.rwa-product-grid) .rwa-product-grid__live > :nth-child(8n + 6) { --rwa-pg-ph-from: #e9ecf5; --rwa-pg-ph-to: #f6f8fc; }
:where(.rwa-product-grid) .rwa-product-grid__live > :nth-child(8n + 7) { --rwa-pg-ph-from: #eae3ff; --rwa-pg-ph-to: #e0f7e8; }
:where(.rwa-product-grid) .rwa-product-grid__live > :nth-child(8n + 8) { --rwa-pg-ph-from: #fff0d6; --rwa-pg-ph-to: #e7f0ff; }

/* Badge pill (16:33): 12/12 offset, padding 6x10, radius 999, SemiBold 11. */
.rwa-product-grid .rwa-product-grid__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: flex-start;
  margin: 0;
  padding: 6px 10px 5px;
  font-family: var(--rwa-pg-font);
  font-size: 11px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: normal;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rwa-pg-sale);
  background: var(--rwa-pg-sale-bg);
  border-radius: 999px;
}

:where(.rwa-product-grid) .rwa-product-grid__badge[hidden] {
  display: none;
}

/* Body: the Figma card is one column with gap 10; the body wrapper continues it and grows
   so the CTA can pin to the card bottom (equal action alignment across a row). */
.rwa-product-grid .rwa-product-grid__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  gap: var(--rwa-pg-card-gap);
  min-width: 0;
  margin: 0;
  padding: 0;
}

.rwa-product-grid .rwa-product-grid__category {
  margin: 0;
  padding: 0;
  font-family: var(--rwa-pg-font);
  font-size: 10px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: normal;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: var(--rwa-pg-muted);
}

/* Title (16:36): SemiBold 15 / 20, two lines reserved (40px) so rows line up. */
.rwa-product-grid .rwa-product-grid__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: var(--rwa-pg-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--rwa-pg-title);
}

.rwa-product-grid .rwa-product-grid__name :where(a) {
  font: inherit;
  color: inherit;
  text-decoration: none;
}

:where(.rwa-product-grid) .rwa-product-grid__name :where(a):hover,
:where(.rwa-product-grid) .rwa-product-grid__name :where(a):focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

:where(.rwa-product-grid) .rwa-product-grid__name :where(a):focus-visible {
  outline: 2px solid var(--rwa-pg-accent);
  outline-offset: 2px;
}

/* Rating (16:37): stars Medium 12 #F28C24, count Regular 11 muted, gap 8. */
.rwa-product-grid .rwa-product-grid__rating {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-family: var(--rwa-pg-font);
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
  white-space: nowrap;
  color: var(--rwa-pg-star);
}

.rwa-product-grid .rwa-product-grid__stars {
  font-family: 'RWA Inter Star', var(--rwa-pg-font);
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
  color: var(--rwa-pg-star);
}

/* Each star is its own glyph. Filled stars inherit the stars colour (--rwa-pg-star); empty stars
   use --rwa-pg-star-empty (card line colour); a half star overlays the empty colour on its right
   half. Zero specificity so V4 classes always win. */
:where(.rwa-product-grid__star) {
  position: relative;
  display: inline-block;
  color: inherit;
}

:where(.rwa-product-grid__star--empty) {
  color: var(--rwa-pg-star-empty);
}

:where(.rwa-product-grid__star--half)::after {
  content: '\2605';
  position: absolute;
  inset: 0;
  color: var(--rwa-pg-star-empty);
  clip-path: inset(0 0 0 50%);
}

.rwa-product-grid .rwa-product-grid__rating-count {
  font-size: 11px;
  font-weight: 400;
  line-height: normal;
  color: var(--rwa-pg-muted);
}

/* Price (16:40): old Regular 13 muted, current SemiBold 17 ink, gap 8, top aligned.
   Old price stays a semantic <del> (Woo adds screen-reader copy); Figma draws it without
   a strike line, so the default follows Figma. Set --rwa-pg-old-price-decoration to
   line-through to add one. */
.rwa-product-grid .rwa-product-grid__price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 1px 0 0;
  font-family: var(--rwa-pg-font);
  font-size: 17px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: normal;
  white-space: nowrap;
  color: var(--rwa-pg-title);
}

.rwa-product-grid .rwa-product-grid__price :where(del) {
  order: 0;
  margin-top: -1px;
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  color: var(--rwa-pg-muted);
  text-decoration: var(--rwa-pg-old-price-decoration, none);
  opacity: 1;
}

.rwa-product-grid .rwa-product-grid__price :where(ins) {
  font-size: 17px;
  font-weight: 600;
  line-height: normal;
  color: var(--rwa-pg-title);
  text-decoration: none;
  background: none;
}

:where(.rwa-product-grid) .rwa-product-grid__price .woocommerce-Price-amount,
.rwa-product-grid .rwa-product-grid__price :where(bdi) {
  font: inherit;
  color: inherit;
}

:where(.rwa-product-grid) .rwa-product-grid__price .subscription-details {
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  color: var(--rwa-pg-muted);
}

/* CTA (16:43): padding 12x16 (inside 1px stroke), radius 10, SemiBold 13, hug width,
   pinned to the card bottom. Base = secondary (Choose options); --add = primary;
   --disabled = secondary at 58% (Out of stock). */
.rwa-product-grid .rwa-product-grid__cta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  width: auto;
  min-height: 0;
  margin: auto 0 0;
  padding: calc(12px - var(--rwa-pg-stroke)) calc(16px - var(--rwa-pg-stroke));
  font-family: var(--rwa-pg-font);
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  color: var(--rwa-pg-ink);
  background: #fff;
  border: var(--rwa-pg-stroke) solid var(--rwa-pg-line);
  border-radius: var(--rwa-pg-control-radius);
  box-shadow: none;
  cursor: pointer;
}

:where(.rwa-product-grid) .rwa-product-grid__cta:hover {
  color: var(--rwa-pg-ink);
  background: var(--rwa-pg-fill);
}

:where(.rwa-product-grid) .rwa-product-grid__cta:focus-visible {
  outline: 2px solid var(--rwa-pg-accent);
  outline-offset: 2px;
}

.rwa-product-grid .rwa-product-grid__cta--add {
  color: #fff;
  background: var(--rwa-pg-accent);
  border-color: var(--rwa-pg-accent);
}

:where(.rwa-product-grid) .rwa-product-grid__cta--add:hover {
  color: #fff;
  background: var(--rwa-pg-accent);
  filter: brightness(0.94);
}

.rwa-product-grid .rwa-product-grid__cta--disabled {
  opacity: var(--rwa-pg-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

/* Woo appends "View cart" after an ajax add; keep it out of the pinned CTA row. */
.rwa-product-grid .added_to_cart {
  display: none;
}

/* ---- Authoring template (nested list/item) ---- */

/* Frontend: live cards are server-rendered; keep the authoring template out of the grid. */
:where(.rwa-product-grid):not([data-rwa-editor="1"]) [data-rwa-collection-item] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

:where(.rwa-product-grid)[data-rwa-editor="1"] [data-rwa-collection-item] {
  position: relative;
  clip: auto;
}

/* Authoring template stays in Structure; clip it out of the visual grid once live products paint. */
:where(.rwa-product-grid[data-rwa-editor="1"]:has([data-rwa-live-clone])) [data-rwa-collection-item]:not([data-rwa-live-clone]) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

/* Live cards stay hittable so Elementor can select the Product Grid.
   JS maps those clicks to the parent; the nestable item template keeps its data-id. */
:where(.rwa-product-grid[data-rwa-editor="1"]) [data-rwa-collection-item]:not([data-rwa-live-clone]),
:where(.rwa-product-grid[data-rwa-editor="1"]) [data-rwa-collection-item]:not([data-rwa-live-clone]) * {
  pointer-events: auto;
}

/* Editor clones of the template: Elementor wrappers must not add chrome inside the card. */

.rwa-product-grid__state {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 28px 24px;
  border: 1px dashed var(--rwa-pg-line);
  border-radius: 16px;
  background: var(--rwa-pg-fill);
}

.rwa-product-grid__state-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.rwa-product-grid__state-copy,
.rwa-product-grid__state-hint {
  margin: 0;
  color: var(--rwa-pg-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 36rem;
}

.rwa-product-grid__state--integration {
  border-style: solid;
}

.rwa-product-grid__skel {
  background: var(--rwa-pg-skel);
  border-radius: 8px;
}

.rwa-product-grid__card--skeleton .rwa-product-grid__media {
  min-height: 0;
}

.rwa-product-grid__skel--line {
  height: 12px;
  width: 100%;
}

.rwa-product-grid__skel--short {
  width: 42%;
}

.rwa-product-grid__skel--mid {
  width: 58%;
}

.rwa-product-grid__skel--cta {
  height: 44px;
  width: 60%;
  margin-top: 4px;
  border-radius: var(--rwa-pg-control-radius);
}

:where(.rwa-product-grid[data-rwa-state='loading']) .rwa-product-grid__grid--skeleton .rwa-product-grid__skel {
  animation: rwa-pg-pulse 1.2s ease-in-out infinite;
}

@keyframes rwa-pg-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.rwa-product-grid)[data-rwa-state='loading'] .rwa-product-grid__skel {
    animation: none;
  }
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ---- Breakpoints (Elementor defaults: tablet <= 1024, mobile <= 767) ----
   Figma tablet (760) and mobile (390) frames keep the desktop paddings and gaps. */
@media (max-width: 1024px) {
  .rwa-product-grid .rwa-product-grid__grid {
    grid-template-columns: repeat(var(--rwa-pg-cols-tablet, 2), minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .rwa-product-grid .rwa-product-grid__grid {
    grid-template-columns: repeat(var(--rwa-pg-cols-mobile, 1), minmax(0, 1fr));
  }
}

/* V4 priority: normal declarations of capped selectors, re-emitted in original specificity order. */
.rwa-product-grid [class*="rwa-product-grid__media"] :where(img) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rwa-product-grid .rwa-product-grid__name :where(a) {
	font: inherit;
	color: inherit;
	text-decoration: none;
}
.rwa-product-grid .rwa-product-grid__price :where(del) {
	order: 0;
	margin-top: -1px;
	font-size: 13px;
	font-weight: 400;
	line-height: normal;
	color: var(--rwa-pg-muted);
	text-decoration: var(--rwa-pg-old-price-decoration, none);
	opacity: 1;
}
.rwa-product-grid .rwa-product-grid__price :where(ins) {
	font-size: 17px;
	font-weight: 600;
	line-height: normal;
	color: var(--rwa-pg-title);
	text-decoration: none;
	background: none;
}
.rwa-product-grid .rwa-product-grid__price :where(bdi) {
	font: inherit;
	color: inherit;
}
:where(.rwa-product-grid) .rwa-product-grid__view-all:hover {
	color: var(--rwa-pg-ink);
	background: var(--rwa-pg-fill);
}
:where(.rwa-product-grid) .rwa-product-grid__view-all:focus-visible {
	outline: 2px solid var(--rwa-pg-accent);
	outline-offset: 3px;
}
:where(.rwa-product-grid) .rwa-product-grid__media.rwa-product-grid__media--design {
	aspect-ratio: auto;
}
:where(.rwa-product-grid) .rwa-product-grid__media.rwa-product-grid__media--1-1,
:where(.rwa-product-grid) .rwa-product-grid__media.rwa-product-grid__media--3-4,
:where(.rwa-product-grid) .rwa-product-grid__media.rwa-product-grid__media--4-3,
:where(.rwa-product-grid) .rwa-product-grid__media.rwa-product-grid__media--4-5 {
	height: auto;
}
:where(.rwa-product-grid) .rwa-product-grid__media.rwa-product-grid__media--1-1 {
	aspect-ratio: 1 / 1;
}
:where(.rwa-product-grid) .rwa-product-grid__media.rwa-product-grid__media--3-4 {
	aspect-ratio: 3 / 4;
}
:where(.rwa-product-grid) .rwa-product-grid__media.rwa-product-grid__media--4-3 {
	aspect-ratio: 4 / 3;
}
:where(.rwa-product-grid) .rwa-product-grid__media.rwa-product-grid__media--4-5 {
	aspect-ratio: 4 / 5;
}
:where(.rwa-product-grid) .rwa-product-grid__live > :nth-child(8n + 2) {
	--rwa-pg-ph-from: #e0f7e8;
	--rwa-pg-ph-to: #e7f0ff;
}
:where(.rwa-product-grid) .rwa-product-grid__live > :nth-child(8n + 3) {
	--rwa-pg-ph-from: #fff0d6;
	--rwa-pg-ph-to: #efe5ff;
}
:where(.rwa-product-grid) .rwa-product-grid__live > :nth-child(8n + 4) {
	--rwa-pg-ph-from: #e7f0ff;
	--rwa-pg-ph-to: #e0f7e8;
}
:where(.rwa-product-grid) .rwa-product-grid__live > :nth-child(8n + 5) {
	--rwa-pg-ph-from: #fee4e1;
	--rwa-pg-ph-to: #fff0d6;
}
:where(.rwa-product-grid) .rwa-product-grid__live > :nth-child(8n + 6) {
	--rwa-pg-ph-from: #e9ecf5;
	--rwa-pg-ph-to: #f6f8fc;
}
:where(.rwa-product-grid) .rwa-product-grid__live > :nth-child(8n + 7) {
	--rwa-pg-ph-from: #eae3ff;
	--rwa-pg-ph-to: #e0f7e8;
}
:where(.rwa-product-grid) .rwa-product-grid__live > :nth-child(8n + 8) {
	--rwa-pg-ph-from: #fff0d6;
	--rwa-pg-ph-to: #e7f0ff;
}
:where(.rwa-product-grid) .rwa-product-grid__badge[hidden] {
	display: none;
}
:where(.rwa-product-grid) .rwa-product-grid__price .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}
:where(.rwa-product-grid) .rwa-product-grid__price .subscription-details {
	font-size: 13px;
	font-weight: 400;
	line-height: normal;
	color: var(--rwa-pg-muted);
}
:where(.rwa-product-grid) .rwa-product-grid__cta:hover {
	color: var(--rwa-pg-ink);
	background: var(--rwa-pg-fill);
}
:where(.rwa-product-grid) .rwa-product-grid__cta:focus-visible {
	outline: 2px solid var(--rwa-pg-accent);
	outline-offset: 2px;
}
:where(.rwa-product-grid) .rwa-product-grid__cta--add:hover {
	color: #fff;
	background: var(--rwa-pg-accent);
	filter: brightness(0.94);
}
:where(.rwa-product-grid):not([data-rwa-editor="1"]) [data-rwa-collection-item] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
:where(.rwa-product-grid)[data-rwa-editor="1"] [data-rwa-collection-item] {
	position: relative;
	clip: auto;
}
@media (prefers-reduced-motion: reduce) {
:where(.rwa-product-grid)[data-rwa-state='loading'] .rwa-product-grid__skel {
	animation: none;
}
}
:where(.rwa-product-grid) .rwa-product-grid__name :where(a):hover,
:where(.rwa-product-grid) .rwa-product-grid__name :where(a):focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
}
:where(.rwa-product-grid) .rwa-product-grid__name :where(a):focus-visible {
	outline: 2px solid var(--rwa-pg-accent);
	outline-offset: 2px;
}
:where(.rwa-product-grid[data-rwa-editor="1"]) [data-rwa-collection-item]:not([data-rwa-live-clone]),
:where(.rwa-product-grid[data-rwa-editor="1"]) [data-rwa-collection-item]:not([data-rwa-live-clone]) * {
	pointer-events: auto;
}
:where(.rwa-product-grid[data-rwa-state='loading']) .rwa-product-grid__grid--skeleton .rwa-product-grid__skel {
	animation: rwa-pg-pulse 1.2s ease-in-out infinite;
}


/* V4 priority: former !important declarations at V4 specificity (0,2,0), in original specificity order.
   Elementor V4 classes and local styles print after this file, so they override these defaults. */
:where(.rwa-product-grid) [data-rwa-live-clone] .elementor-element-overlay,
:where(.rwa-product-grid) [data-rwa-live-clone] .elementor-editor-element-settings,
:where(.rwa-product-grid)[data-hide-category="1"] .rwa-product-grid__category,
:where(.rwa-product-grid)[data-hide-rating="1"] .rwa-product-grid__rating,
:where(.rwa-product-grid)[data-hide-price="1"] .rwa-product-grid__price,
:where(.rwa-product-grid)[data-hide-sale="1"] .rwa-product-grid__badge,
:where(.rwa-product-grid)[data-hide-cta="1"] .rwa-product-grid__cta,
:where(.rwa-product-grid)[data-hide-header="1"] .rwa-product-grid__header {
	display: none;
}