/**
 * Mechawork - Product Drafting Page
 * pdg_grid.css (FULL FILE - drop-in replacement)
 *
 * Visual parity targets:
 *  - Buttons visible without hover (unless data-actions="hover").
 *  - Palette-driven lower area (body) and button colors.
 *  - Price pill overlay in the image (top-right), like premade.
 *  - Normal card frame from --frame; Best Seller special accents from --gear; Promoted star from --frame.
 */

/* =============== 1) Root tokens =============== */

.pdg-wrapper {
  --pdg-max-content-width: 1400px;
  --pdg-gap: 16px;
  --pdg-gap-lg: 18px;
  --pdg-card-radius: 16px;
  --pdg-card-shadow: 0 6px 24px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);

  --pdg-img-ratio: 4 / 3;
  --pdg-img-bg: #f6f6f7;

  --pdg-card-min: 260px;
  --pdg-card-min-md: 280px;
  --pdg-card-min-lg: 290px;

  --pdg-sticky-offset: 0px;

  /* List-view layout tokens (do not affect grid mode unless list is active) */
  --pdg-list-thumb-w: 108px;          /* small corner image area */
  --pdg-list-thumb-h: 86px;           /* keep rows compact */
  --pdg-list-gap: 12px;               /* tighter row gap */
  --pdg-list-body-pad-y: 14px;        /* shorter height */
  --pdg-list-body-pad-x: 16px;

  /* List-view row max width: ~70% of the canonical max content width (1400 * 0.7 = 980px).
     Behavior: wide screens = centered rows with whitespace; narrow screens = becomes full width. */
  --pdg-list-card-max: calc(var(--pdg-max-content-width) * 0.7);
}

.pdg-wrapper .mw-expanded-content[hidden],
.pdg-wrapper .mw-product-popup[hidden] { display: none !important; }

/* =============== 2) Page shell & right rail =============== */

.pdg-wrapper .content {
  max-width: var(--pdg-max-content-width);
  margin-inline: auto;
  width: 100%;
}

.pdg-wrapper.has-right-rail .content {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--pdg-gap-lg);
  align-items: start;
}

/* Fallback helper using :has() */
.pdg-wrapper .content:has(.pdp-draft-contents) {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--pdg-gap-lg);
  align-items: start;
}

.pdg-wrapper .pdg-grid { width: 100%; }

/* =============== 3) Grid host =============== */

.pdg-wrapper .pdg-grid,
.pdg-wrapper .pdg-root.pdg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--pdg-card-min), 1fr));
  gap: var(--pdg-gap);
  align-items: stretch;
  grid-auto-flow: row;
  grid-auto-rows: auto;
}

/* Keep wrapper nodes layout-neutral when they are still present on the initial server render.
   The live JS normalization now hoists cards to direct grid children, but these rules make
   grid/list switching resilient even before or between normalization passes. */
.pdg-wrapper .pdg-grid > .pdg-cards,
.pdg-wrapper .pdg-grid > .pdg-cards-slice,
.pdg-wrapper .pdg-root.pdg-grid > .pdg-cards,
.pdg-wrapper .pdg-root.pdg-grid > .pdg-cards-slice {
  display: contents !important;
}

.pdg-wrapper .pdg-grid .pdg-cards,
.pdg-wrapper .pdg-grid .pdg-cards-slice { display: contents; }

@media (min-width: 1024px) {
  .pdg-wrapper .pdg-grid,
  .pdg-wrapper .pdg-root.pdg-grid {
    gap: var(--pdg-gap-lg);
  }
}
@media (min-width: 640px) { .pdg-wrapper { --pdg-card-min: var(--pdg-card-min-md); } }
@media (min-width: 1100px){ .pdg-wrapper { --pdg-card-min: var(--pdg-card-min-lg); } }

/* =============== 3b) List view mode (opt-in; does not affect Grid mode) =============== */
/*
 * List view is a rendering mode of the SAME grid block.
 * This CSS only activates when the grid root is flagged by JS:
 *   - .pdg-view--list  (preferred)
 *   - .is-list         (fallback)
 *   - [data-view="list"] (fallback)
 *
 * Default must remain Grid (no persistence).
 */

.pdg-wrapper .pdg-grid.pdg-view--list,
.pdg-wrapper .pdg-grid.is-list,
.pdg-wrapper .pdg-grid[data-view="list"],
.pdg-wrapper .pdg-root.pdg-grid.pdg-view--list,
.pdg-wrapper .pdg-root.pdg-grid.is-list,
.pdg-wrapper .pdg-root.pdg-grid[data-view="list"] {
  grid-template-columns: 1fr;
  gap: var(--pdg-list-gap);
  align-items: start;
}

/* Explicit grid-mode reset after returning from list mode.
   This prevents centered/narrow list-row metrics from lingering visually on the initial batch. */
.pdg-wrapper .pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]),
.pdg-wrapper .pdg-root.pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]),
.pdg-wrapper .pdg-grid[data-view="grid"],
.pdg-wrapper .pdg-root.pdg-grid[data-view="grid"] {
  grid-auto-flow: row;
  grid-auto-rows: auto;
  align-items: stretch;
}


/* =============== 3c) Mobile grid minimum: never collapse grid mode below two columns =============== */
/*
 * MW-PDG-MOBILE-GRID-MIN-2_V1
 * Grid view must keep at least two visual columns on narrow/mobile screens.
 * List mode remains explicitly single-column through the list selectors above.
 */
@media (max-width: 639px) {
  .pdg-wrapper .pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]),
  .pdg-wrapper .pdg-root.pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]),
  .pdg-wrapper .pdg-grid[data-view="grid"],
  .pdg-wrapper .pdg-root.pdg-grid[data-view="grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .pdg-wrapper .pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]) > .pdg-card,
  .pdg-wrapper .pdg-grid[data-view="grid"] > .pdg-card,
  .pdg-wrapper .pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]) .pdg-cards > .pdg-card,
  .pdg-wrapper .pdg-grid[data-view="grid"] .pdg-cards > .pdg-card,
  .pdg-wrapper .pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]) .pdg-cards-slice > .pdg-card,
  .pdg-wrapper .pdg-grid[data-view="grid"] .pdg-cards-slice > .pdg-card {
    min-width: 0;
  }

  .pdg-wrapper .pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]) .pdg-card .card-body,
  .pdg-wrapper .pdg-grid[data-view="grid"] .pdg-card .card-body {
    padding: 14px 10px;
    gap: 10px;
    min-width: 0;
  }

  .pdg-wrapper .pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]) .pdg-card .card-title,
  .pdg-wrapper .pdg-grid[data-view="grid"] .pdg-card .card-title {
    font-size: .92rem;
    overflow-wrap: anywhere;
  }

  .pdg-wrapper .pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]) .pdg-card .card-actions,
  .pdg-wrapper .pdg-grid[data-view="grid"] .pdg-card .card-actions {
    gap: 6px;
  }

  .pdg-wrapper .pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]) .pdg-card .card-actions .button,
  .pdg-wrapper .pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]) .pdg-card .card-actions a.button,
  .pdg-wrapper .pdg-grid[data-view="grid"] .pdg-card .card-actions .button,
  .pdg-wrapper .pdg-grid[data-view="grid"] .pdg-card .card-actions a.button {
    padding: 7px 9px;
    font-size: .82rem;
    white-space: normal;
  }

  .pdg-wrapper .pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]) .pdg-card .pdg-price-pill,
  .pdg-wrapper .pdg-grid[data-view="grid"] .pdg-card .pdg-price-pill {
    top: 7px;
    right: 7px;
    padding: 5px 7px;
    font-size: .78rem;
  }

  .pdg-wrapper .pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]) .pdg-card .pdg-badge,
  .pdg-wrapper .pdg-grid[data-view="grid"] .pdg-card .pdg-badge {
    left: 7px;
    top: 7px;
  }

  .pdg-wrapper .pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]) .pdg-card .pdg-badge--bestseller,
  .pdg-wrapper .pdg-grid[data-view="grid"] .pdg-card .pdg-badge--bestseller {
    padding: 5px 7px;
    font-size: .76rem;
  }

  .pdg-wrapper .pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]) .pdg-card .speaker,
  .pdg-wrapper .pdg-grid[data-view="grid"] .pdg-card .speaker {
    inset: auto 7px 7px auto;
  }
}

/* =============== 4) Card shell =============== */

/*
 * Critical: prevent subtle horizontal overflow on mobile expand.
 * We lock widths in JS during FLIP/expand. Without border-box, the locked width
 * applies to the content box and then borders add extra pixels, causing the
 * “slightly too wide” feeling and occasional horizontal scroll.
 */

.pdg-wrapper .pdg-grid .pdg-card,
.pdg-wrapper .pdg-grid .pdg-card::before,
.pdg-wrapper .pdg-grid .pdg-card::after,
.pdg-wrapper .pdg-grid .pdg-card *,
.pdg-wrapper .pdg-grid .pdg-card *::before,
.pdg-wrapper .pdg-grid .pdg-card *::after {
  box-sizing: border-box;
}

.pdg-wrapper .pdg-grid > .pdg-card,
.pdg-wrapper .pdg-grid > .pdg-card.card,
.pdg-wrapper .pdg-grid .pdg-cards > .pdg-card,
.pdg-wrapper .pdg-grid .pdg-cards > .pdg-card.card,
.pdg-wrapper .pdg-grid .pdg-cards-slice > .pdg-card,
.pdg-wrapper .pdg-grid .pdg-cards-slice > .pdg-card.card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin-inline: 0;
  justify-self: stretch;
  align-self: stretch;
  border-radius: var(--pdg-card-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--pdg-card-shadow);
  position: relative;
  isolation: isolate;

  /* Card-local neutral palette defaults.
     These values intentionally live on the card itself, not only on .pdg-wrapper,
     so empty data-* palette attributes cannot inherit unrelated colors from
     global wrappers, theme skins, or previously rendered PDP surfaces. Inline
     palette variables from PHP/JS still override these defaults. */
  --bgTop: #ffffff;
  --bgMid: #ffffff;
  --bgBottom: #ffffff;
  --btn: #15161d;
  --btnfont: #ffffff;
  --hover: #242632;
  --logo: #15161d;
  --frame: transparent;
  --fontColor: #222222;
  --gear: #333333;

  /* Theme frame. Empty-palette cards fall back to the card-local neutral defaults above. */
  border: 2.5px solid var(--frame, transparent);
}

.pdg-wrapper .pdg-grid > .pdg-card:not(.card),
.pdg-wrapper .pdg-grid .pdg-cards > .pdg-card:not(.card),
.pdg-wrapper .pdg-grid .pdg-cards-slice > .pdg-card:not(.card) { border: 2.5px solid var(--frame, transparent); }

.pdg-wrapper .pdg-grid .pdg-card.card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.pdg-wrapper .pdg-grid .pdg-card.card:where(:hover, :focus-within) {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
}

/* Never dim PDG cards via foreign “out-of-stock” styles */
.pdg-wrapper .pdg-grid .pdg-card.mw-out-of-stock,
.pdg-wrapper .pdg-grid .pdg-card .mw-no-stock {
  filter: none !important;
  opacity: 1 !important;
}

/* =============== 4b) List view card layout (wide row, short height, small thumbnail) =============== */

.pdg-wrapper .pdg-grid.pdg-view--list > .pdg-card,
.pdg-wrapper .pdg-grid.is-list > .pdg-card,
.pdg-wrapper .pdg-grid[data-view="list"] > .pdg-card,
.pdg-wrapper .pdg-grid.pdg-view--list .pdg-cards > .pdg-card,
.pdg-wrapper .pdg-grid.is-list .pdg-cards > .pdg-card,
.pdg-wrapper .pdg-grid[data-view="list"] .pdg-cards > .pdg-card,
.pdg-wrapper .pdg-grid.pdg-view--list .pdg-cards-slice > .pdg-card,
.pdg-wrapper .pdg-grid.is-list .pdg-cards-slice > .pdg-card,
.pdg-wrapper .pdg-grid[data-view="list"] .pdg-cards-slice > .pdg-card {
  display: grid;
  grid-template-columns: var(--pdg-list-thumb-w) minmax(0, 1fr);
  align-items: stretch;

  /* New: center the row and keep it ~70% at max layout, but full-width on mobile */
  width: 100%;
  max-width: var(--pdg-list-card-max);
  margin-inline: auto;
}

/* Force a clean card contract when the grid view is active again. */
.pdg-wrapper .pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]) > .pdg-card,
.pdg-wrapper .pdg-grid[data-view="grid"] > .pdg-card,
.pdg-wrapper .pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]) .pdg-cards > .pdg-card,
.pdg-wrapper .pdg-grid[data-view="grid"] .pdg-cards > .pdg-card,
.pdg-wrapper .pdg-grid:not(.pdg-view--list):not(.is-list):not([data-view="list"]) .pdg-cards-slice > .pdg-card,
.pdg-wrapper .pdg-grid[data-view="grid"] .pdg-cards-slice > .pdg-card {
  display: flex;
  grid-template-columns: none;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  justify-self: stretch;
  align-self: stretch;
}

/* Prevent the hover lift from feeling “floaty” in list rows */
.pdg-wrapper .pdg-grid.pdg-view--list .pdg-card.card:where(:hover, :focus-within),
.pdg-wrapper .pdg-grid.is-list .pdg-card.card:where(:hover, :focus-within),
.pdg-wrapper .pdg-grid[data-view="list"] .pdg-card.card:where(:hover, :focus-within) {
  transform: none;
}

/* =============== 5) Image region + price pill + badges =============== */

.pdg-wrapper .pdg-grid .pdg-card .card-image {
  position: relative;
  background: var(--pdg-img-bg);
  aspect-ratio: var(--pdg-img-ratio);
  overflow: hidden;
}

@supports not (aspect-ratio: 1 / 1) {
  .pdg-wrapper .pdg-grid .pdg-card .card-image { height: auto; }
  .pdg-wrapper .pdg-grid .pdg-card .card-image::before {
    content: "";
    display: block;
    padding-top: calc(100% / (var(--pdg-img-ratio)));
  }
}

.pdg-wrapper .pdg-grid .pdg-card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdg-wrapper .pdg-grid .pdg-card .speaker {
  position: absolute;
  inset: auto 12px 12px auto;
  z-index: 2;
}
.pdg-wrapper .pdg-grid .pdg-card .speaker--hidden { display: none; }

 /* Price pill (overlay, top-right inside the image) */
.pdg-wrapper .pdg-grid .pdg-card .pdg-price-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;

  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;

  background: var(--btn, #333);
  color: var(--btnfont, #fff);
  font: 700 1.07rem/1 sans-serif;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.pdg-wrapper .pdg-grid .pdg-card .pdg-price-pill .mw-price-final {
  letter-spacing: .12px;
}

/* Badges (top-left in the image) */
.pdg-wrapper .pdg-grid .pdg-card .pdg-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Best Seller pill */
.pdg-wrapper .pdg-grid .pdg-card .pdg-badge--bestseller {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--gear, #333);
  color: #fff;
  font-weight: 700;
  font-size: .90rem;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Promoted star */
.pdg-wrapper .pdg-grid .pdg-card .pdg-badge--star {
  font-size: 2.15rem;
  color: var(--frame, #333);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.18));
}

/* List view: make the image a small corner thumbnail (no palette changes) */
.pdg-wrapper .pdg-grid.pdg-view--list .pdg-card .card-image,
.pdg-wrapper .pdg-grid.is-list .pdg-card .card-image,
.pdg-wrapper .pdg-grid[data-view="list"] .pdg-card .card-image {
  aspect-ratio: auto;
  width: var(--pdg-list-thumb-w);
  min-height: var(--pdg-list-thumb-h);

  /* Critical for "pill on the right" in LIST:
     - make image NOT the positioning container
     - prevent clipping when pill anchors to the card */
  position: static;
  overflow: visible;
}

@supports not (aspect-ratio: 1 / 1) {
  .pdg-wrapper .pdg-grid.pdg-view--list .pdg-card .card-image::before,
  .pdg-wrapper .pdg-grid.is-list .pdg-card .card-image::before,
  .pdg-wrapper .pdg-grid[data-view="list"] .pdg-card .card-image::before {
    display: none;
    padding-top: 0;
  }
}

.pdg-wrapper .pdg-grid.pdg-view--list .pdg-card .card-image img,
.pdg-wrapper .pdg-grid.is-list .pdg-card .card-image img,
.pdg-wrapper .pdg-grid[data-view="list"] .pdg-card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tighten overlays so they fit the smaller thumbnail cleanly */
.pdg-wrapper .pdg-grid.pdg-view--list .pdg-card .pdg-price-pill,
.pdg-wrapper .pdg-grid.is-list .pdg-card .pdg-price-pill,
.pdg-wrapper .pdg-grid[data-view="list"] .pdg-card .pdg-price-pill {
  top: 8px;
  right: 8px;
  padding: 5px 8px;
  font-size: .86rem;
}

.pdg-wrapper .pdg-grid.pdg-view--list .pdg-card .pdg-badge,
.pdg-wrapper .pdg-grid.is-list .pdg-card .pdg-badge,
.pdg-wrapper .pdg-grid[data-view="list"] .pdg-card .pdg-badge {
  left: 8px;
  top: 8px;
}

.pdg-wrapper .pdg-grid.pdg-view--list .pdg-card .pdg-badge--bestseller,
.pdg-wrapper .pdg-grid.is-list .pdg-card .pdg-badge--bestseller,
.pdg-wrapper .pdg-grid[data-view="list"] .pdg-card .pdg-badge--bestseller {
  padding: 5px 8px;
  font-size: .82rem;
}

.pdg-wrapper .pdg-grid.pdg-view--list .pdg-card .pdg-badge--star,
.pdg-wrapper .pdg-grid.is-list .pdg-card .pdg-badge--star,
.pdg-wrapper .pdg-grid[data-view="list"] .pdg-card .pdg-badge--star {
  font-size: 1.75rem;
}

/* Speaker icon fits into the smaller thumb */
.pdg-wrapper .pdg-grid.pdg-view--list .pdg-card .speaker,
.pdg-wrapper .pdg-grid.is-list .pdg-card .speaker,
.pdg-wrapper .pdg-grid[data-view="list"] .pdg-card .speaker {
  inset: auto 8px 8px auto;
}

/* =============== 6) Body: title + actions (no price here) =============== */

.pdg-wrapper .pdg-grid .pdg-card .card-body {
  display: grid;
  grid-template-rows: auto auto;
  gap: 16px;
  padding: 22px;

  /* Premade-compatible solid lower area.
     Themed cards use one solid surface color; empty-palette cards stay neutral.
     Do not use gradients here: gradients scatter PDP palette colors across the grid. */
  background: var(--bgBottom, #ffffff);
  color: var(--logo, #1b1d24);
}

/* Runtime palette state from pdg_grid.js. Empty-palette cards must stay white
   and must not inherit unrelated global palette values. */
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--empty-palette .card-body {
  background: #ffffff;
  color: #1b1d24;
}
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--empty-palette .card-title,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--empty-palette .card-title strong {
  color: #1b1d24;
}

@media (min-width: 1024px) {
  .pdg-wrapper .pdg-grid .pdg-card .card-body {
    gap: 18px;
    padding: 22px;
  }
}

.pdg-wrapper .pdg-grid .pdg-card .card-title {
  line-height: 1.25;
  font-weight: 600;
  color: var(--fontColor, #222);
}
.pdg-wrapper .pdg-grid .pdg-card .card-title strong { color: var(--fontColor, #222); }

.pdg-wrapper .pdg-grid .pdg-card .card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;

  /* default visible (data-actions="always") */
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .18s ease, transform .18s ease;
}

/* If explicitly hover-only */
.pdg-wrapper .pdg-grid .pdg-card[data-actions="hover"] .card-actions {
  opacity: 0; transform: translateY(6px); pointer-events: none;
}
.pdg-wrapper .pdg-grid .pdg-card[data-actions="hover"]:where(:hover, :focus-within) .card-actions {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}

/* Buttons: global-first like premade, item palette fallback */
.pdg-wrapper .pdg-grid .pdg-card .card-actions .button,
.pdg-wrapper .pdg-grid .pdg-card .card-actions a.button {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  line-height: 1;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none !important;

  background: var(--mw-tabs-active-bg, var(--btn, #333));
  color: var(--mw-tabs-active-fg, var(--btnfont, #fff));

  box-shadow: 0 1px 0 rgba(0,0,0,.08), inset 0 -1px 0 rgba(0,0,0,.08);
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
.pdg-wrapper .pdg-grid .pdg-card .card-actions .button:hover,
.pdg-wrapper .pdg-grid .pdg-card .card-actions .button:focus-visible,
.pdg-wrapper .pdg-grid .pdg-card .card-actions a.button:hover,
.pdg-wrapper .pdg-grid .pdg-card .card-actions a.button:focus-visible {
  background: var(--mw-tabs-hover-bg, var(--hover, #444));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.18), inset 0 -1px 0 rgba(0,0,0,.08);
}
.pdg-wrapper .pdg-grid .pdg-card .card-actions .button:active,
.pdg-wrapper .pdg-grid .pdg-card .card-actions a.button:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0,0,0,.12) inset;
}

/* Legacy price row (if something injects it) — keep centered, but we don't render it anymore */
.pdg-wrapper .pdg-grid .pdg-card .card-price {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* List view: shorten height by tightening spacing (palette stays the same) */
.pdg-wrapper .pdg-grid.pdg-view--list .pdg-card .card-body,
.pdg-wrapper .pdg-grid.is-list .pdg-card .card-body,
.pdg-wrapper .pdg-grid[data-view="list"] .pdg-card .card-body {
  padding: var(--pdg-list-body-pad-y) var(--pdg-list-body-pad-x);
  gap: 10px;
}

.pdg-wrapper .pdg-grid.pdg-view--list .pdg-card .card-title,
.pdg-wrapper .pdg-grid.is-list .pdg-card .card-title,
.pdg-wrapper .pdg-grid[data-view="list"] .pdg-card .card-title {
  font-size: 1rem;
}

.pdg-wrapper .pdg-grid.pdg-view--list .pdg-card .card-actions .button,
.pdg-wrapper .pdg-grid.is-list .pdg-card .card-actions .button,
.pdg-wrapper .pdg-grid[data-view="list"] .pdg-card .card-actions .button,
.pdg-wrapper .pdg-grid.pdg-view--list .pdg-card .card-actions a.button,
.pdg-wrapper .pdg-grid.is-list .pdg-card .card-actions a.button,
.pdg-wrapper .pdg-grid[data-view="list"] .pdg-card .card-actions a.button {
  padding: 7px 12px;
  font-size: .92rem;
}

/* Mobile safety: if the row gets too narrow, stack thumb above body */
@media (max-width: 520px) {
  .pdg-wrapper .pdg-grid.pdg-view--list > .pdg-card,
  .pdg-wrapper .pdg-grid.is-list > .pdg-card,
  .pdg-wrapper .pdg-grid[data-view="list"] > .pdg-card,
  .pdg-wrapper .pdg-grid.pdg-view--list .pdg-cards > .pdg-card,
  .pdg-wrapper .pdg-grid.is-list .pdg-cards > .pdg-card,
  .pdg-wrapper .pdg-grid[data-view="list"] .pdg-cards > .pdg-card {
    grid-template-columns: 1fr;
  }

  .pdg-wrapper .pdg-grid.pdg-view--list .pdg-card .card-image,
  .pdg-wrapper .pdg-grid.is-list .pdg-card .card-image,
  .pdg-wrapper .pdg-grid[data-view="list"] .pdg-card .card-image {
    width: 100%;
    min-height: 0;
    aspect-ratio: var(--pdg-img-ratio);
  }
}

/* =============== 7) Expanded panel =============== */

.pdg-wrapper .pdg-grid > .mw-expander-row {
  grid-column: 1 / -1;
  margin-top: calc(var(--pdg-gap) * -0.5);
}

.pdg-wrapper .mw-expanded-content {
  background: #fff;
  box-shadow: var(--pdg-card-shadow);
  border-radius: var(--pdg-card-radius);
  overflow: hidden;
}

.pdg-wrapper .mw-expanded-content .mw-expanded-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pdg-gap);
  padding: var(--pdg-gap);
}

@media (min-width: 768px) {
  .pdg-wrapper .mw-expanded-content .mw-expanded-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--pdg-gap-lg);
    padding: var(--pdg-gap-lg);
  }
}

.pdg-wrapper .mw-expanded-content .mw-left .mw-gallery-main {
  position: relative;
  /* pdpgallery3101: allow expanded gallery ratio to be controlled by expand CSS (square on desktop). */
  aspect-ratio: var(--gallery-ratio, 1 / 1);
  background: var(--pdg-img-bg);
  overflow: hidden;
  border-radius: 12px;
}
.pdg-wrapper .mw-expanded-content .mw-left .mw-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdg-wrapper .mw-expanded-content .mw-left .mw-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.pdg-wrapper .mw-expanded-content .mw-right .mw-alt-title {
  margin: 0 0 8px 0;
  font-weight: 700;
  line-height: 1.25;
}
.pdg-wrapper .mw-expanded-content .mw-right .mw-line { margin: 6px 0; }
.pdg-wrapper .mw-expanded-content .mw-right .mw-actions {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px;
}

/* If expanded content stays inside the card for a moment */
.pdg-wrapper .pdg-card .mw-expanded-content { margin-top: var(--pdg-gap); }

/* ✅ Ek: Expanded durumunda gösterimi garanti et (pdg_expand.css ile uyumlu) */
.pdg-wrapper .pdg-card.is-expanded .mw-expanded-content { display: block; }

/* List view: expander should feel like it extends downward in the single column */
.pdg-wrapper .pdg-grid.pdg-view--list > .mw-expander-row,
.pdg-wrapper .pdg-grid.is-list > .mw-expander-row,
.pdg-wrapper .pdg-grid[data-view="list"] > .mw-expander-row {
  grid-column: 1 / -1;
  margin-top: 0;
}

/* =============== 8) Filter bar =============== */

.pdg-wrapper .premade-filter-bar.mw-filter {
  position: sticky;
  top: var(--pdg-sticky-offset);
  z-index: 3;
  background: #fff;
  margin-bottom: var(--pdg-gap);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
}
.pdg-wrapper .premade-filter-bar.mw-filter[data-sticky="0"] { position: static; box-shadow: none; }

/* =============== 9) Utilities =============== */

.pdg-wrapper .pdg-grid.is-loading { pointer-events: none; opacity: .6; transition: opacity .18s ease; }
.pdg-wrapper .pdg-grid .pdg-card [class*="views-"] { all: unset; }
.pdg-wrapper .pdg-grid .pdg-card { margin: 0; }

/* =============== 10) Right rail =============== */

.pdg-wrapper .pdp-draft-contents {
  position: sticky;
  top: calc(var(--pdg-sticky-offset) + 10px);
  align-self: start;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--pdg-card-shadow);
  padding: 12px;
}

/* =============== 11) Admin toolbar safe area =============== */
body.toolbar-horizontal .pdg-wrapper { --pdg-sticky-offset: 48px; }

/* Keep a small minimum to avoid weird tiny cards with long titles */
.pdg-card .card-body { min-height: 75px; }

/* MW_PDG_GRID_PALETTE_SCOPE_V6
 * Purpose:
 * - Keep product/status palette surfaces on themed collapsed grid cards.
 * - Keep empty-palette cards neutral so they do not inherit unrelated/global colors.
 * - Use premade-compatible solid surfaces; no gradients in grid cards.
 * - Use stronger selectors because expand/theme libraries are loaded after the grid library on the PDP bundle.
 */
.pdg-wrapper .pdg-grid > .pdg-card.pdg-card--has-palette,
.pdg-wrapper .pdg-grid > .pdg-card.card.pdg-card--has-palette,
.pdg-wrapper .pdg-grid .pdg-cards > .pdg-card.pdg-card--has-palette,
.pdg-wrapper .pdg-grid .pdg-cards-slice > .pdg-card.pdg-card--has-palette {
  background: var(--bgBottom, #ffffff) !important;
  border-color: var(--frame, transparent) !important;
}

.pdg-wrapper .pdg-grid > .pdg-card.pdg-card--has-palette > .card-body,
.pdg-wrapper .pdg-grid > .pdg-card.card.pdg-card--has-palette > .card-body,
.pdg-wrapper .pdg-grid .pdg-cards > .pdg-card.pdg-card--has-palette > .card-body,
.pdg-wrapper .pdg-grid .pdg-cards-slice > .pdg-card.pdg-card--has-palette > .card-body {
  background: var(--bgBottom, #ffffff) !important;
  color: var(--logo, #1b1d24) !important;
}

.pdg-wrapper .pdg-grid > .pdg-card.pdg-card--has-palette > .card-body .card-title,
.pdg-wrapper .pdg-grid > .pdg-card.pdg-card--has-palette > .card-body .card-title strong,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette .card-title,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette .card-title strong {
  color: var(--logo, #1b1d24) !important;
}

/* Premade-compatible palette use: background is one solid surface, actions keep
   the button/accent variables instead of spreading background colors into text. */
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette .card-actions .button,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette .card-actions a.button {
  background: var(--mw-tabs-active-bg, var(--btn, #15161d)) !important;
  color: var(--mw-tabs-active-fg, var(--btnfont, #ffffff)) !important;
}

.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette .card-actions .button:hover,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette .card-actions .button:focus-visible,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette .card-actions a.button:hover,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette .card-actions a.button:focus-visible {
  background: var(--mw-tabs-hover-bg, var(--hover, #242632)) !important;
}

.pdg-wrapper .pdg-grid > .pdg-card.pdg-card--empty-palette,
.pdg-wrapper .pdg-grid > .pdg-card.card.pdg-card--empty-palette,
.pdg-wrapper .pdg-grid .pdg-cards > .pdg-card.pdg-card--empty-palette,
.pdg-wrapper .pdg-grid .pdg-cards-slice > .pdg-card.pdg-card--empty-palette {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.06) !important;
}

.pdg-wrapper .pdg-grid > .pdg-card.pdg-card--empty-palette > .card-body,
.pdg-wrapper .pdg-grid > .pdg-card.card.pdg-card--empty-palette > .card-body,
.pdg-wrapper .pdg-grid .pdg-cards > .pdg-card.pdg-card--empty-palette > .card-body,
.pdg-wrapper .pdg-grid .pdg-cards-slice > .pdg-card.pdg-card--empty-palette > .card-body {
  background: #ffffff !important;
  color: #1b1d24 !important;
}

.pdg-wrapper .pdg-grid > .pdg-card.pdg-card--empty-palette > .card-body .card-title,
.pdg-wrapper .pdg-grid > .pdg-card.pdg-card--empty-palette > .card-body .card-title strong,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--empty-palette .card-title,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--empty-palette .card-title strong {
  color: #1b1d24 !important;
}

/* MW_PDG_GRID_EXPANDED_SHELL_GUARD_V7
 * Expanded cards reuse the grid card root. Grid shell palette rules must not remain
 * visible on the expanded structural wrapper, otherwise expand gets a second surface.
 * pdg_expand.css owns the single visible expanded surface.
 */
.pdg-wrapper .pdg-grid > .pdg-card.pdg-card--has-palette.is-expanded,
.pdg-wrapper .pdg-grid > .pdg-card.pdg-card--has-palette.mw-expanded,
.pdg-wrapper .pdg-grid > .pdg-card.pdg-card--empty-palette.is-expanded,
.pdg-wrapper .pdg-grid > .pdg-card.pdg-card--empty-palette.mw-expanded {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Discounted price pills: premade-aligned two-line stack.
 * Line 1: undiscounted/original price, struck-through.
 * Line 2: discounted/final price, only slightly larger.
 */
.pdg-wrapper .pdg-grid .pdg-card .pdg-price-pill .mw-price-amounts--discounted,
.pdg-wrapper .pdg-grid .pdg-card .pdg-price-pill .mw-price-amounts--anonymous-discounted {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .12rem;
  line-height: 1.03;
  text-align: center;
  font: 700 1.07rem/1 sans-serif;
  font-variant-numeric: tabular-nums;
}

.pdg-wrapper .pdg-grid .pdg-card .pdg-price-pill .mw-price-amounts--discounted .mw-price-orig,
.pdg-wrapper .pdg-grid .pdg-card .pdg-price-pill .mw-price-amounts--anonymous-discounted .mw-price-orig {
  display: block;
  margin: 0;
  opacity: .75;
  font-size: .92em;
  font-weight: 700;
  line-height: 1;
  text-decoration: line-through;
}

.pdg-wrapper .pdg-grid .pdg-card .pdg-price-pill .mw-price-amounts--discounted .mw-price-final,
.pdg-wrapper .pdg-grid .pdg-card .pdg-price-pill .mw-price-amounts--anonymous-discounted .mw-price-final {
  display: block;
  font-size: 1.06em;
  font-weight: 800;
  line-height: 1;
}

/* MW-PDG-v10: card-level next-step link beside selected remove button. */
.pdg-wrapper .pdg-grid .pdg-card .card-actions .pdp-drafting-wrapper--with-next {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  flex-wrap: wrap;
  max-width: 100%;
}

.pdg-wrapper .pdg-grid .pdg-card .card-actions .pdp-drafting-wrapper--with-next > .button,
.pdg-wrapper .pdg-grid .pdg-card .card-actions .pdp-drafting-wrapper--with-next > a.button {
  flex: 0 0 auto;
}

.pdg-wrapper .pdg-grid .pdg-card .card-actions .pdp-card-next-step-link,
.pdg-wrapper .pdg-grid .pdg-card .card-actions .pdp-card-add-draft-to-basket {
  flex: 0 1 auto;
  min-height: 34px;
  max-width: min(220px, 100%);
  padding: 0.42rem 0.82rem;
  font-size: 0.72rem;
  line-height: 1.05;
  white-space: normal;
  text-align: center;
}

.pdg-wrapper .pdg-grid .pdg-card .card-actions .pdp-card-add-draft-to-basket.is-hidden {
  display: none !important;
}

@media (max-width: 639px) {
  .pdg-wrapper .pdg-grid .pdg-card .card-actions .pdp-drafting-wrapper--with-next {
    gap: 0.35rem;
  }

  .pdg-wrapper .pdg-grid .pdg-card .card-actions .pdp-card-next-step-link,
  .pdg-wrapper .pdg-grid .pdg-card .card-actions .pdp-card-add-draft-to-basket {
    min-height: 32px;
    padding: 0.38rem 0.68rem;
    font-size: 0.66rem;
  }
}