/* modules/custom/product_drafting_page/css/pdg_expand.css */
/*───────────────────────────*
 * Product Drafting Page – Expanded + Modal UI
 *───────────────────────*/

/* Grid root */
.premade-grid,
.pdg-grid{
  --gallery-ratio: 5/3;
  --thumb-size: 68px;
  --thumb-radius: 8px;
  position:relative;
  grid-auto-rows: auto !important; /* allow expanded cards to size to content; overrides theme defaults */
}

/* Card root */
.premade-grid .premade-card,
.pdg-grid .pdg-card{
  will-change:transform;
  /* Do not force a baseline transform; it creates a transformed containing
     block and can break fixed-position overlays (modal/zoom), especially in
     list view. FLIP/JS can still set transform inline when needed. */
  transform:none;
  position:relative;

  /* IMPORTANT:
   * Prevent intrinsic sizing from aspect-ratio + fixed heights from overflowing grid columns.
   * (Regression: height:450px + aspect-ratio:4/3 => width:600px)
   */
  width:100%;
  max-width:100%;
  min-width:0;
  height:auto;
}

/*───────────────────────────*
 * LIST VIEW FIXES
 * - In list view, cards are a 2-column grid (thumb + body).
 * - When expanded we hide .card-image and .card-body; then the next grid item
 *   (.mw-expanded-content) auto-places into column 1 (thumb), leaving a large
 *   blank area in column 2.
 * - Force expanded cards to become 1-column and/or make expanded content span.
 *───────────────────────*/

/* Make expanded card itself single-column in list view */
.pdg-grid.pdg-view--list .pdg-card.mw-expanded,
.pdg-grid.pdg-view--list .pdg-card.is-expanded,
.pdg-grid.is-list .pdg-card.mw-expanded,
.pdg-grid.is-list .pdg-card.is-expanded,
.pdg-grid[data-view="list"] .pdg-card.mw-expanded,
.pdg-grid[data-view="list"] .pdg-card.is-expanded,
.premade-grid.pdg-view--list .premade-card.mw-expanded,
.premade-grid.pdg-view--list .premade-card.is-expanded,
.premade-grid.is-list .premade-card.mw-expanded,
.premade-grid.is-list .premade-card.is-expanded,
.premade-grid[data-view="list"] .premade-card.mw-expanded,
.premade-grid[data-view="list"] .premade-card.is-expanded{
  grid-template-columns:minmax(0,1fr);
}

/* Ensure expanded content spans full width in list view (belt & suspenders) */
.pdg-grid.pdg-view--list .pdg-card.mw-expanded .mw-expanded-content,
.pdg-grid.pdg-view--list .pdg-card.is-expanded .mw-expanded-content,
.pdg-grid.is-list .pdg-card.mw-expanded .mw-expanded-content,
.pdg-grid.is-list .pdg-card.is-expanded .mw-expanded-content,
.pdg-grid[data-view="list"] .pdg-card.mw-expanded .mw-expanded-content,
.pdg-grid[data-view="list"] .pdg-card.is-expanded .mw-expanded-content,
.premade-grid.pdg-view--list .premade-card.mw-expanded .mw-expanded-content,
.premade-grid.pdg-view--list .premade-card.is-expanded .mw-expanded-content,
.premade-grid.is-list .premade-card.mw-expanded .mw-expanded-content,
.premade-grid.is-list .premade-card.is-expanded .mw-expanded-content,
.premade-grid[data-view="list"] .premade-card.mw-expanded .mw-expanded-content,
.premade-grid[data-view="list"] .premade-card.is-expanded .mw-expanded-content{
  grid-column:1 / -1;
  grid-row:1;
  min-width:0;
  width:100%;
  max-width:100%;
}

/* Expand states */
.premade-grid .premade-card.mw-expand-x,
.pdg-grid .pdg-card.mw-expand-x{ grid-column:1 / -1; }

.premade-grid .premade-card.mw-expand-y,
.pdg-grid .pdg-card.mw-expand-y{ grid-row:span 2; }

.premade-grid .premade-card.mw-expanded,
.pdg-grid .pdg-card.mw-expanded,
.premade-grid .premade-card.is-expanded,
.pdg-grid .pdg-card.is-expanded{ z-index:3; }

/* Hide content while FLIPing */
.premade-card.mw-expanding .card-image,
.premade-card.mw-expanding .card-body,
.premade-card.mw-expanding .mw-expanded-content,
.premade-card.mw-collapsing .card-image,
.premade-card.mw-collapsing .mw-expanded-content,
.pdg-card.mw-expanding .card-image,
.pdg-card.mw-expanding .card-body,
.pdg-card.mw-expanding .mw-expanded-content,
.pdg-card.mw-collapsing .card-image,
.pdg-card.mw-collapsing .mw-expanded-content{
  visibility:hidden!important;
}

/* Expanded: hide standard overlay (both legacy and new flags) */
.premade-grid .premade-card.mw-expanded .card-body,
.premade-grid .premade-card.mw-expanded .speaker,
.premade-grid .premade-card.mw-expanded .music-marquee,
.pdg-grid .pdg-card.mw-expanded .card-body,
.pdg-grid .pdg-card.mw-expanded .speaker,
.pdg-grid .pdg-card.mw-expanded .music-marquee,
.premade-grid .premade-card.is-expanded .card-body,
.premade-grid .premade-card.is-expanded .speaker,
.premade-grid .premade-card.is-expanded .music-marquee,
.pdg-grid .pdg-card.is-expanded .card-body,
.pdg-grid .pdg-card.is-expanded .speaker,
.pdg-grid .pdg-card.is-expanded .music-marquee{ display:none!important; }

.premade-grid .premade-card.mw-expanded .card-image,
.pdg-grid .pdg-card.mw-expanded .card-image,
.premade-grid .premade-card.is-expanded .card-image,
.pdg-grid .pdg-card.is-expanded .card-image{
  display:none!important; opacity:0!important; pointer-events:none!important;
}

/* Expanded content container
   NOT: Varsayılan kapatma sadece [hidden] ile yapılır. */
.premade-grid .premade-card .mw-expanded-content,
.pdg-grid .pdg-card .mw-expanded-content{
  padding:16px; position:relative; z-index:2;
}
.premade-grid .premade-card .mw-expanded-content[hidden],
.pdg-grid .pdg-card .mw-expanded-content[hidden]{ display:none !important; }

/* Açıkken mutlaka göster (legacy .mw-expanded ve yeni .is-expanded) */
.premade-grid .premade-card.mw-expanded .mw-expanded-content,
.pdg-grid .pdg-card.mw-expanded .mw-expanded-content,
.premade-grid .premade-card.is-expanded .mw-expanded-content,
.pdg-grid .pdg-card.is-expanded .mw-expanded-content{ display:block !important; }

/* Desktop expanded layout – default 3 satır */
.mw-expanded-layout{
  display:grid; gap:18px;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  grid-template-areas:
    "left right"
    "summary summary"
    "components components";
}

/* Boş satırlar görünmesin ve alanlar daralsın */
.mw-row-summary:empty,
.mw-row-components:empty,
.mw-row-related:empty{ display:none; }

/* :has destekliyse satır tanımı da küçülsün */
.mw-expanded-layout:has(.mw-row-summary:empty):has(.mw-row-components:empty){
  grid-template-areas: "left right";
}
.mw-expanded-layout:has(.mw-row-summary:empty):not(:has(.mw-row-components:empty)){
  grid-template-areas:
    "left right"
    "components components";
}
.mw-expanded-layout:not(:has(.mw-row-summary:empty)):has(.mw-row-components:empty){
  grid-template-areas:
    "left right"
    "summary summary";
}

/* Grid areas */
.mw-left{
  grid-area:left;
  align-self:stretch;
  /* Tabs + gallery should fill the left column.
   * Centering here can make the desktop layout look clipped when stage heights are locked.
   */
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:stretch;
  min-height:0;
}
.mw-right{ grid-area:right; position:relative; min-height:0; }

/* Ticket MW-PDG-1104-TABS-RIGHT-PREMADE:
 * Desktop expand mode now keeps the visible tabbar on the RIGHT rail, directly under
 * the title (`.mw-alt-title`). Because of that, the right stack must top-align rather
 * than vertically centering the rail.
 */
.mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  min-height:0;
}

.mw-row-summary{ grid-area:summary; padding:0; }
.mw-row-components{ grid-area:components; padding:0; }

/* pdptablar compat:
 * Some scaffolds may ship a dedicated `.mw-row-related` as a sibling grid item.
 *
 * Legacy behavior mapped it onto the Summary grid area so Summary/Related could act like
 * mutually exclusive panels.
 *
 * Ticket MW-PDG-1104-TABS-RIGHT-PREMADE:
 * - Visible tabs are now intentionally rendered in the RIGHT rail, directly under the title.
 * - `.mw-row-summary` remains a content scaffold only; it is no longer a desktop tabbar host.
 * - If `.mw-row-related` exists, it must NOT overlap the Summary host; instead it should
 *   use the (now-retired) "components" row when the active-tab attribute is present.
 */
.mw-row-related{ grid-area:summary; padding:0; }
.mw-expanded-content[data-mw-active-tab] .mw-row-related{ grid-area:components; }

/* Hard-hide panel nodes when JS sets hidden (belt & suspenders) */
.mw-tab-panel[hidden],
.mw-related[hidden],
.mw-row-related[hidden]{ display:none !important; }

/* ─ Gallery (desktop) ─ */
.mw-gallery{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  height:100%; width:100%; max-width:100%;

  position:relative; background:rgba(0,0,0,.03);
  border-radius:12px; padding:12px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}

.mw-gallery[hidden]{ display:none !important; }

.mw-gallery-main{
  position:relative;
  border-radius:10px; overflow:hidden; background:#fff;

  height:100%;
  width:auto;
  max-width:100%;
  max-height:100%;
  aspect-ratio:var(--gallery-ratio);
}
.mw-gallery-main .mw-main-img{
  display:block; width:100%; height:100%; object-fit:contain;
}

.mw-zoom-btn{
  position:absolute; right:10px; bottom:10px; width:36px; height:36px; border-radius:18px;
  background:rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.15); box-shadow:0 2px 8px rgba(0,0,0,.2); cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:18px;
  line-height:1;
  color:#111;
}
.mw-zoom-btn::before{ content:"⤢"; }

.mw-thumbs{ display:grid; grid-template-columns:repeat(auto-fill, var(--thumb-size)); gap:8px; margin-top:10px; min-height:var(--thumb-size); }
.mw-thumb{
  width:var(--thumb-size); height:var(--thumb-size);
  border:1px solid rgba(0,0,0,.15); border-radius:var(--thumb-radius);
  padding:2px; background:#fff; cursor:pointer; display:grid; place-items:center;
}
.mw-thumb img{ width:100%; height:100%; display:block; object-fit:contain; border-radius:calc(var(--thumb-radius) - 2px); }
.mw-thumb.is-active{ outline:2px solid rgba(0,0,0,.5); }

/* Ticket: productdraftingexpandfinalv1 — Desktop gallery thumbs should be on the RIGHT side (premade parity) */
@media (min-width: 901px){
  /* Ticket pdpgallery3101: In expanded view, make the main gallery square on wide screens. */
  .mw-expanded-content{ --gallery-ratio: 1/1; }

  .mw-gallery{
    /* Override the mobile-friendly stacked flex layout */
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-rows:minmax(0, 1fr);
    grid-template-areas:"main thumbs";
    align-items:stretch;
    justify-items:stretch;
    gap:12px;

    /* Preserve the fixed-height contract from JS (tabs fixed height) */
    height:100%;
  }

  /* Support both markup variants: .mw-gallery-main (preferred) and legacy .mw-stage */
  .mw-gallery-main,
  .mw-stage{
    grid-area:main;
    min-width:0;
    min-height:0;
    height:100%;
    max-width:100%;
    max-height:100%;
  }

  /* Preferred variant: allow aspect-ratio to control width (square on desktop). */
  .mw-gallery-main{
    width:auto;
    justify-self:center;
  }

  /* Legacy stage should still fill available width. */
  .mw-stage{
    width:100%;
  }

  /* If legacy stage image is used */
  .mw-stage-img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }

  .mw-thumbs{
    grid-area:thumbs;
    margin-top:0;
    min-height:0;

    /* Vertical strip */
    grid-template-columns: var(--thumb-size);
    grid-auto-flow: row;
    align-content:start;
    justify-content:start;

    /* If many thumbs exist, allow scrolling without expanding the panel */
    max-height:100%;
    overflow-y:auto;
    padding-right:2px;
  }
}

/* ─ Single-image mode: KÜÇÜLTME YOK, sadece thumbs gizle ─ */
.premade-card[data-gallery-count="1"] .mw-thumbs,
.pdg-card[data-gallery-count="1"] .mw-thumbs{ display:none !important; }
.premade-card[data-gallery-count="1"] .mw-gallery-main,
.pdg-card[data-gallery-count="1"] .mw-gallery-main{
  width:auto;
  margin-left:0;
  margin-right:0;
}

/*  Right column  */
.mw-right .mw-alt-title{
  margin:4px 0 8px; font-size:1.25rem; line-height:1.2; color:#000; text-align:center;
}
.mw-right .mw-line{ margin:8px 0; }
.mw-right .mw-link,
.mw-open-music-info,
.mw-open-musician-info{
  background:transparent!important; border:none!important; box-shadow:none!important;
  padding:0!important; color:#000; text-decoration:underline; cursor:pointer;
}
.mw-right .mw-open-music-info,
.mw-right .mw-open-musician-info{ display:block; text-align:center; margin:0 auto 6px; }
.mw-right .mw-open-music-info:hover,
.mw-right .mw-open-music-info:focus-visible,
.mw-right .mw-open-musician-info:hover,
.mw-right .mw-open-musician-info:focus-visible{
  color:#000; text-decoration:underline;
}

/* Music trio (desktop) */
@media (min-width:768px){
  .mw-trio-box{
    border:2px solid var(--frame,#D5A856);
    border-radius:12px;
    background:rgba(0,0,0,.02);
    padding:10px 12px;
    max-width:480px;
    margin:0 auto 10px;
  }
  .mw-trio-box .mw-line,
  .mw-trio-box .mw-open-music-info,
  .mw-trio-box .mw-open-musician-info{
    background:transparent!important;
    border:none!important;
    box-shadow:none!important;
    padding:0!important;
    margin:0 0 6px 0;
  }
  .mw-trio-box .mw-audio-controls{
    background:transparent!important;
    border:none!important;
    padding:0!important;
    margin:8px 0 0;
    justify-content:center;
  }
}

/* Mobile trio */
@media (max-width:767px){
  .mw-col1-box{
    border:2px solid var(--frame,#D5A856); border-radius:12px;
    background:rgba(0,0,0,.02); padding:10px 12px;
  }
  .mw-col1-box .mw-open-music-info,
  .mw-col1-box .mw-open-musician-info{ display:block; text-align:center; margin:0 auto 6px; }
  .mw-col1-box .mw-audio-controls{ margin:8px auto 0; justify-content:center; }
}

.mw-audio-controls{ display:flex; gap:8px; margin:12px 0 8px; justify-content:center; }
.mw-audio-controls button{
  border-radius:18px; padding:6px 12px; border:1px solid rgba(0,0,0,.15); background:#fff; cursor:pointer;
}

/*────────── Price panel (expanded) ──────────────*/
.mw-price-chip,
.mw-price-panel{
  display:block;
  width:100%;
  max-width:100%;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.1);
  background:var(--btn,#eee);
  color:var(--btnfont,#222);
  padding:0.5rem 0.9rem;
  box-sizing:border-box;
  cursor:default;
}
.mw-price-panel.mw-open-special{ cursor:pointer; }

/* Single-row price */
.mw-price-panel .mw-price-row{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.6rem;
  flex-wrap:nowrap;
  text-align:center;
  white-space:nowrap;
}
.mw-price-panel .mw-price-final{
  font-weight:800;
  font-size:1.35em;
  line-height:1;
  font-variant-numeric: tabular-nums;
}
.mw-price-panel .mw-price-orig{
  display:inline !important;
  margin-top:0 !important;
  margin-left:.6rem !important;
  text-decoration:line-through;
  opacity:.75;
  font-size:.92em;
  line-height:1;
  font-variant-numeric: tabular-nums;
}

/* Discount chip + VAT note */
.mw-rate-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  margin-top:.35rem;
  padding:.35rem .75rem;
  border-radius:999px;
  font-weight:700;
  line-height:1;
  background:var(--btn,#eee);
  color:var(--btnfont,#222);
  border:1px solid rgba(0,0,0,.15);
  cursor:default;
}
.mw-rate-chip.mw-open-special{ cursor:pointer; }

.mw-vat-note{
  display:block;
  margin-top:.35rem;
  font-size:.85em;
  line-height:1.2;
  color:#333;
  opacity:.9;
  text-align:center;
}

/* Hover */
.mw-price-panel.mw-open-special:hover{ filter:brightness(1.02); }
.mw-rate-chip.mw-open-special:hover{ filter:brightness(1.05); }

/*─────────── Actions (expanded) ───────────*/
.mw-actions{
  display:grid;
  gap:8px;
  margin:12px 0;
  justify-content:center;
  justify-items:center;
  text-align:center;
}
.mw-actions .mw-add-to-basket,.mw-actions .mw-customize{
  border-radius:22px; padding:0 14px; height:var(--btn-h,44px);
  border:1px solid rgba(0,0,0,.15); background:#fff; cursor:pointer;
  display:grid; place-items:center; text-align:center;
}

/* === CTA PARITY WITH GRID === */
.mw-actions .pdp-drafting-wrapper .button,
.mw-actions .pdp-drafting-wrapper a.button,
.mw-actions .pdp-btn-add,
.mw-actions a.pdp-btn-add,
.mw-actions .button,
.mw-actions a.button,
.mw-actions .pdg-cta{
  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(--btn,#333); color: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;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--btn-h,44px);
}
.mw-actions .pdp-drafting-wrapper .button:hover,
.mw-actions .pdp-drafting-wrapper .button:focus-visible,
.mw-actions .pdp-drafting-wrapper a.button:hover,
.mw-actions .pdp-drafting-wrapper a.button:focus-visible,
.mw-actions .pdp-btn-add:hover,
.mw-actions .pdp-btn-add:focus-visible,
.mw-actions .button:hover,
.mw-actions .button:focus-visible,
.mw-actions .pdg-cta:hover,
.mw-actions .pdg-cta:focus-visible{
  background: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);
}
.mw-actions .pdp-drafting-wrapper .button:active,
.mw-actions .pdp-drafting-wrapper a.button:active,
.mw-actions .pdp-btn-add:active,
.mw-actions .button:active,
.mw-actions .pdg-cta:active{
  transform:translateY(0);
  box-shadow:0 1px 4px rgba(0,0,0,.12) inset;
}

/* Focus ring (a11y) */
.mw-actions .pdp-drafting-wrapper .button:focus-visible,
.mw-actions .pdp-drafting-wrapper a.button:focus-visible,
.mw-actions .pdp-btn-add:focus-visible,
.mw-actions .button:focus-visible,
.mw-actions .pdg-cta:focus-visible{
  outline:2px solid color-mix(in srgb, var(--btn,#333) 55%, #fff);
  outline-offset:2px;
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)){
  .mw-actions .pdp-drafting-wrapper .button:focus-visible,
  .mw-actions .pdp-drafting-wrapper a.button:focus-visible,
  .mw-actions .pdp-btn-add:focus-visible,
  .mw-actions .button:focus-visible,
  .mw-actions .pdg-cta:focus-visible{
    outline:2px solid rgba(0,0,0,.55);
    outline-offset:2px;
  }
}

/* Desktop'ta expanded CTA tam genişlik olmasın (grid ile hizalı) */
@media (min-width:768px){
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-actions > *{
    width:auto !important;
    max-width:100%;
  }
}

/*──────────── Related: button → link görünüm ────────────*/
.mw-related .mw-related-title,
.mw-row-related .mw-related-title{ text-align:center; font-weight:600; margin:8px 0 4px; color:var(--logo,#111); }

.mw-related .mw-related-list,
.mw-row-related .mw-related-list{
  display:flex; flex-wrap:wrap; gap:.25rem .5rem; justify-content:center; padding:0; margin:.35rem 0 0; list-style:none;
}

.mw-related .mw-related-item,
.mw-row-related .mw-related-item{ margin:0; padding:0; }

.mw-related .mw-open-premade-related,
.mw-row-related .mw-open-premade-related{
  background:transparent!important; border:none!important; padding:0!important; font:inherit;
  color:var(--logo,#111); text-decoration:underline; cursor:pointer;
}
.mw-related .mw-open-premade-related:hover,
.mw-related .mw-open-premade-related:focus-visible,
.mw-row-related .mw-open-premade-related:hover,
.mw-row-related .mw-open-premade-related:focus-visible{ filter:brightness(0.9); text-decoration:underline; }

/* Summary */
.mw-summary{ margin:12px 0; padding:0 !important; border-radius:10px; color:#000!important; background:none!important; border:none!important; }

/*───────────────────────────*
 * Tabs (lightweight; built by JS)
 *───────────────────────*/
.mw-tabbar{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:10px auto 12px;
}
.mw-tab{
  appearance:none;
  border:1px solid var(--mw-tabs-border, rgba(0,0,0,.15));
  background:var(--mw-tabs-list-bg, rgba(0,0,0,.02));
  color:var(--mw-tabs-inactive-fg, #111);
  border-radius:999px;
  padding:6px 12px;
  cursor:pointer;
  line-height:1;
  font-weight:600;
  transition:transform .12s ease, filter .12s ease, background-color .12s ease;
}
.mw-tab:hover,
.mw-tab:focus-visible{
  filter:brightness(0.98);
  transform:translateY(-1px);
}
.mw-tab:not(.is-active):hover,
.mw-tab:not(.is-active):focus-visible{
  background:var(--mw-tabs-hover-bg, rgba(0,0,0,.06));
}
.mw-tab.is-active{
  background:var(--mw-tabs-active-bg, var(--btn,#333));
  color:var(--mw-tabs-active-fg, var(--btnfont,#fff));
  border-color:var(--mw-tabs-border, transparent);
}

/* JS-inserted panel wrapper (optional) */
.mw-tab-panel{ padding:0; }

/*───────────────────────────*
 * Ticket: pdggalerytab — Tab mode behaviors (Gallery / Summary / Pre-made)
 * - Keep tabbar visible at all times.
 * - Hide retired Components row when active-tab mode is engaged.
 * - When a host is marked as "panel hidden", hide only the inner panels, not the host itself.
 *───────────────────────*/
.mw-expanded-content[data-mw-active-tab] .mw-row-components{ display:none !important; }

.mw-tab-host--panel-hidden{
  padding:0 !important;
  margin:0 !important;
}
.mw-tab-host--panel-hidden > .mw-tab-panel{
  display:none !important;
}

/* Summary content (full Product Card public description) */
.mw-summary-desc{
  max-width:860px;
  margin:12px auto 0;
  line-height:1.55;
  color:#111;
}
.mw-summary-desc p{ margin:0 0 10px; }
.mw-summary-desc p:last-child{ margin-bottom:0; }

/* When not in Gallery tab, some legacy NON-STAGE layouts collapse to a single column.
   IMPORTANT: Do NOT apply this when a tab-stage exists (stage + panels live in .mw-left). */
.mw-expanded-content:not(.mw-has-tab-stage).mw-active-tab--summary .mw-expanded-layout:not(.is-mobile) .mw-left,
.mw-expanded-content:not(.mw-has-tab-stage).mw-active-tab--premade .mw-expanded-layout:not(.is-mobile) .mw-left{
  display:none !important;
}
.mw-expanded-content:not(.mw-has-tab-stage) .mw-expanded-layout:not(.is-mobile) .mw-right.mw-right--full{
  grid-column:1 / -1;
  width:100%;
}

/*───────────────────────────*
 * Ticket: sestabsorunupdg — NO-STAGE TAB PANEL VISIBILITY (CRITICAL)
 *
 * Symptom you reported:
 *   - Gallery hides on tab change
 *   - Summary / Pre-made content does not appear
 *
 * Root CSS cause:
 *   - Legacy stage-only suppression could hide .mw-tab-panel nodes when stage is absent.
 *
 * Fix:
 *   - Always toggle panels by active tab key (data-mw-active-tab or mw-active-tab--*)
 *   - Only apply "hide row-summary panels" suppression WHEN stage exists.
 *───────────────────────*/

/* 1) Toggle panels globally by active tab (works whether panels live in row-summary or in tab-stage). */
.mw-expanded-content[data-mw-active-tab="gallery"] .mw-tab-panel--summary,
.mw-expanded-content[data-mw-active-tab="gallery"] .mw-tab-panel--premade,
.mw-expanded-content.mw-active-tab--gallery .mw-tab-panel--summary,
.mw-expanded-content.mw-active-tab--gallery .mw-tab-panel--premade{
  display:none !important;
}

.mw-expanded-content[data-mw-active-tab="summary"] .mw-tab-panel--gallery,
.mw-expanded-content[data-mw-active-tab="summary"] .mw-tab-panel--premade,
.mw-expanded-content.mw-active-tab--summary .mw-tab-panel--gallery,
.mw-expanded-content.mw-active-tab--summary .mw-tab-panel--premade{
  display:none !important;
}

.mw-expanded-content[data-mw-active-tab="premade"] .mw-tab-panel--gallery,
.mw-expanded-content[data-mw-active-tab="premade"] .mw-tab-panel--summary,
.mw-expanded-content.mw-active-tab--premade .mw-tab-panel--gallery,
.mw-expanded-content.mw-active-tab--premade .mw-tab-panel--summary{
  display:none !important;
}

/* If a panel is the active one, ensure it is visible even if another rule hides it. */
.mw-expanded-content[data-mw-active-tab="gallery"] .mw-tab-panel--gallery,
.mw-expanded-content.mw-active-tab--gallery .mw-tab-panel--gallery,
.mw-expanded-content[data-mw-active-tab="summary"] .mw-tab-panel--summary,
.mw-expanded-content.mw-active-tab--summary .mw-tab-panel--summary,
.mw-expanded-content[data-mw-active-tab="premade"] .mw-tab-panel--premade,
.mw-expanded-content.mw-active-tab--premade .mw-tab-panel--premade{
  display:block !important;
}

/* 2) Related host visibility: show only on premade tab (fallback). */
.mw-expanded-content[data-mw-active-tab="gallery"] .mw-row-related,
.mw-expanded-content.mw-active-tab--gallery .mw-row-related,
.mw-expanded-content[data-mw-active-tab="summary"] .mw-row-related,
.mw-expanded-content.mw-active-tab--summary .mw-row-related{
  display:none !important;
}
.mw-expanded-content[data-mw-active-tab="premade"] .mw-row-related,
.mw-expanded-content.mw-active-tab--premade .mw-row-related{
  display:block !important;
}

/* 3) Stage-only suppression: ONLY hide non-staged row-summary panels if stage exists. */
@supports selector(:has(*)){
  .mw-expanded-content:has(.mw-tab-stage[data-mw-stage="1"]) .mw-row-summary > .mw-tab-panel{
    display:none !important;
  }
}

/*───────────────────────────*
 * Ticket: müzikbilgisi — Used in pre-made (mini cards)
 * JS injects:
 *   .mw-premade-mini-list > .mw-premade-mini-cards > a.mw-premade-mini-card (or button.mw-premade-mini-card)
 *   with inner:
 *     .mw-premade-mini-media img
 *     .mw-premade-mini-card-title
 *───────────────────────*/
.mw-premade-mini-list{ margin-top:12px; }

/* Section heading (JS uses .mw-premade-mini-title for the heading) */
.mw-premade-mini-title{
  text-align:center;
  font-weight:700;
  margin:0 0 8px;
  color:var(--logo,#111);
}

/* Cards grid */
.mw-premade-mini-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:10px;
  padding:0;
  margin:0;
  max-width:860px;
  margin-left:auto;
  margin-right:auto;
}

.mw-premade-mini-card{
  appearance:none;
  border:none;
  background:rgba(0,0,0,.02);
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  padding:10px 12px;
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  text-align:left;
  color:inherit;
  text-decoration:none;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease, background-color .12s ease;
}
.mw-premade-mini-card:hover,
.mw-premade-mini-card:focus-visible{
  filter:brightness(1.01);
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.mw-premade-mini-card:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(0,0,0,.10) inset;
}
.mw-premade-mini-card:focus-visible{
  outline:2px solid rgba(0,0,0,.55);
  outline-offset:2px;
}

/* Anchor visited-state guard (mini cards can be <a>) */
a.mw-premade-mini-card:visited{ color:inherit; }



/* Premade mini-list theming (match tabs palette) */

/* Force exactly 2 columns in expanded view (never 3 columns).
 * Ticket: minilist3001
 * - Keep the default auto-fit grid for non-expanded contexts.
 * - Override only inside the expanded premade tab panel.
 */
.mw-expanded-content.mw-has-tab-stage .mw-tab-panel--premade .mw-premade-mini-cards{
  grid-template-columns:repeat(2, minmax(160px, 1fr));
}
.mw-expanded-content.mw-has-tab-stage .mw-tab-panel--premade .mw-premade-mini-title{
  color: var(--mw-tabs-inactive-fg, var(--logo,#111));
}
.mw-expanded-content.mw-has-tab-stage .mw-tab-panel--premade .mw-premade-mini-card{
  /* Match the same palette logic used by the tab buttons (fall back to card vars). */
  background: var(--mw-tabs-active-bg, var(--btn, rgba(0,0,0,.02)));
  color: var(--mw-tabs-active-fg, var(--btnfont, inherit));
  border:1px solid var(--mw-tabs-border, rgba(0,0,0,.12));
  text-decoration:none;
}
.mw-expanded-content.mw-has-tab-stage .mw-tab-panel--premade .mw-premade-mini-card:hover,
.mw-expanded-content.mw-has-tab-stage .mw-tab-panel--premade .mw-premade-mini-card:focus-visible{
  background: var(--mw-tabs-hover-bg, var(--hover, rgba(0,0,0,.04)));
  color: var(--mw-tabs-active-fg, var(--btnfont, inherit));
}
.mw-expanded-content.mw-has-tab-stage .mw-tab-panel--premade .mw-premade-mini-text,
.mw-expanded-content.mw-has-tab-stage .mw-tab-panel--premade .mw-premade-mini-card-title{
  color: inherit;
}
.mw-expanded-content.mw-has-tab-stage .mw-tab-panel--premade .mw-premade-mini-card:focus-visible{
  outline:2px solid var(--mw-tabs-border, rgba(0,0,0,.55));
  outline-offset:2px;
}

/* Media (support both old and new classnames) */
.mw-premade-mini-media,
.mw-premade-mini-thumb{
  width:56px;
  height:42px;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  flex:0 0 auto;
  display:grid;
  place-items:center;
}
.mw-premade-mini-media img,
.mw-premade-mini-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}



/* Placeholder thumb (no image) */
.mw-premade-mini-thumb--placeholder{
  background: var(--mw-tabs-active-bg, var(--btn, rgba(0,0,0,.03)));
  border-color: var(--mw-tabs-border, rgba(0,0,0,.12));
}
.mw-premade-mini-thumb--placeholder .mw-premade-mini-ph{
  font-weight:800;
  letter-spacing:.08em;
  font-size:.95rem;
  line-height:1;
  color: var(--mw-tabs-active-fg, var(--btnfont, var(--logo,#111)));
  opacity:.85;
  user-select:none;
}
/* Text */
.mw-premade-mini-text{ min-width:0; flex:1 1 auto; }
.mw-premade-mini-card-title{
  font-weight:700;
  line-height:1.2;
  color:var(--logo,#111);
  font-size:.98rem;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* Mobile mini cards */
@media (max-width:767px){
  .mw-premade-mini-cards{
    grid-template-columns:1fr;
    max-width:520px;
  }
  .mw-expanded-content.mw-has-tab-stage .mw-tab-panel--premade .mw-premade-mini-cards{
    grid-template-columns:1fr;
  }
  .mw-premade-mini-card{
    justify-content:flex-start;
  }
}

/* Products list */
.mw-products{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:0; padding:0; margin:12px 0 0; list-style:none;
}
.mw-product + .mw-product{ margin-top:0; }
.mw-products .mw-product{ display:inline; margin:0; }
.mw-products .mw-product:not(:last-child)::after{ content:", "; margin:0 .25em; }
.mw-open-product{ background:transparent; border:none; padding:0; font:inherit; text-decoration:underline; cursor:pointer; }
.mw-products-title{ margin:12px 0 6px; font-weight:600; color:var(--logo,#111); text-align:center; }

/* Ticket: MW-COLOR-2804 — PDP product-list text follows the same
 * global-shell color source used by Premade Contents.
 * Keep the default inline list shape, but bind text to global theme first.
 */
.mw-expanded-content .mw-products-title{
  color:var(--mw-tabs-inactive-fg, var(--logo,#111));
}
.mw-expanded-content .mw-open-product{
  color:var(--mw-tabs-inactive-fg, var(--logo,#111));
}

/* Modal products list (premadecontentlist parity)
 * - Keep inline comma-separated list in-card (default)
 * - Render full-width stacked list in body-mounted modal contexts
 */
.mw-modal .mw-products,
.mw-modal-shell .mw-products{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  width:100%;
  max-width:100%;
  gap:8px;
  padding:0;
  margin:12px 0 0;
  list-style:none;
}
.mw-modal .mw-products .mw-product,
.mw-modal-shell .mw-products .mw-product{
  display:block;
  margin:0;
}
.mw-modal .mw-products .mw-product:not(:last-child)::after,
.mw-modal-shell .mw-products .mw-product:not(:last-child)::after{
  content:none !important;
}
.mw-modal .mw-open-product,
.mw-modal-shell .mw-open-product{
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--mw-tabs-border, rgba(0,0,0,.12));
  background:var(--mw-tabs-list-bg, rgba(0,0,0,.02));
  text-decoration:none;
  color:var(--mw-tabs-inactive-fg, var(--logo,#111));
  cursor:pointer;
  transition:background-color .12s ease, color .12s ease, outline-color .12s ease, transform .12s ease;
}
.mw-modal .mw-open-product:hover,
.mw-modal .mw-open-product:focus-visible,
.mw-modal-shell .mw-open-product:hover,
.mw-modal-shell .mw-open-product:focus-visible{
  background:var(--mw-tabs-hover-bg, rgba(0,0,0,.04));
  color:var(--mw-tabs-inactive-fg, var(--logo,#111));
  outline:2px solid color-mix(in srgb, var(--mw-tabs-border, rgba(0,0,0,.35)) 55%, transparent);
  outline-offset:2px;
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)){
  .mw-modal .mw-open-product:focus-visible,
  .mw-modal-shell .mw-open-product:focus-visible{
    outline:2px solid var(--mw-tabs-border, rgba(0,0,0,.45));
  }
}

/*───────────────────────────*
 * Modal (NEW SHELL) — aligns with pdp_expand_component.js
 * DOM:
 *   #mw-modal-shell.mw-modal-shell
 *     .mw-modal-overlay
 *     .mw-modal (dialog)
 *       .mw-modal-close
 *       .mw-modal-body
 * Toggle: body.mw-modal-open
 *───────────────────────*/
.mw-modal-shell{
  position:fixed;
  inset:0;
  z-index:1200; /* above mw-expand-guard(999) */
  display:none;
}
body.mw-modal-open .mw-modal-shell{ display:block; }
body.mw-modal-open{ overflow:hidden!important; } /* scroll lock (new) */
body.mw-scroll-lock{ overflow:hidden!important; } /* legacy compat */

.mw-modal-shell .mw-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

.mw-modal-shell .mw-modal{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  border-radius:12px;
  width:min(92vw, 680px);
  max-width:680px;
  max-height:90vh;
  overflow:auto;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  display:block;
  padding:0;
}

/* Ticket pdpgallery3101: Zoom modal sizing */
.mw-modal-shell .mw-modal.mw-modal--zoom{
  width:min(96vw, 1200px);
  max-width:1200px;
  max-height:92vh;
}
.mw-modal-shell .mw-modal.mw-modal--zoom .mw-modal-body{
  padding:10px;
}
.mw-modal-shell .mw-modal.mw-modal--zoom .mw-zoom img{
  width:100%;
  height:auto;
  max-width:100%;
  max-height:86vh;
  object-fit:contain;
}

.mw-modal-close{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:16px;
  background:rgba(0,0,0,.85); border:1px solid rgba(0,0,0,.12);
  box-shadow:0 2px 6px rgba(0,0,0,.15); cursor:pointer; text-align:center; font-weight:700; font-size:18px; user-select:none; z-index:4;

  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.mw-modal-close::before{ content:"×"; }

.mw-modal-body{ padding:18px; }

/* Legacy modal compat (older markup may still exist somewhere) */
.mw-modal-content{
  background:#fff; border-radius:12px;
  max-width:680px; width:min(92vw,680px);
  max-height:90vh; overflow:auto;
  box-shadow:0 10px 28px rgba(0,0,0,.35); position:relative;
}

/* Modal content layout (inside modal body) */
.mw-modal .mw-info{
  display:grid!important; gap:16px; align-items:start!important;
  grid-template-columns:220px 1fr!important;
}
.mw-info-top{ display:contents; }
.mw-info-media{ grid-column:1; width:220px; aspect-ratio:4/3; }
.mw-info-media img{ width:100%; height:100%; display:block; object-fit:contain; border-radius:10px; }
.mw-info-title{ grid-column:2; align-self:start; }
.mw-info-title h1,.mw-info-title h2,.mw-info-title h3,.mw-info-title h4{ margin:0 0 6px; }
.mw-info-desc{ grid-column:1 / -1; line-height:1.55; }

/* Modal mobile */
@media (max-width:767px){
  .mw-modal.is-mobile .mw-info{ display:block!important; }
  .mw-modal.is-mobile .mw-info-top{ display:flex; align-items:center; gap:12px; }
  .mw-modal.is-mobile .mw-info-media{ width:140px; aspect-ratio:4/3; }
  .mw-modal.is-mobile .mw-info-title{ flex:1 1 auto; }
  .mw-modal.is-mobile .mw-info-desc{ margin-top:10px; }
}

/* Modal desktop grid areas */
@media (min-width:768px){
  .mw-modal .mw-info{
    display:grid!important;
    gap:16px;
    align-items:start!important;
    grid-template-columns:220px 1fr!important;
    grid-template-rows:auto 1fr!important;
    grid-template-areas:
      "media title"
      "media desc";
  }
  .mw-modal .mw-info-media{ grid-area:media; }
  .mw-modal .mw-info-title{ grid-area:title; }
  .mw-modal .mw-info-desc { grid-area:desc; }
}

/* Zoom
 * NEW behavior: zoom is opened inside modal shell body.
 * Keep it "big" but not a second full-screen overlay that blocks the close button.
 */
#mw-modal-shell .mw-zoom{
  position:relative;
  inset:auto;
  z-index:auto;
  background:transparent;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
#mw-modal-shell .mw-zoom img{
  width:100%;
  height:auto;
  max-width:100%;
  max-height:86vh;
  object-fit:contain;
}
#mw-modal-shell .mw-zoom-close{ display:none !important; }

/* Legacy zoom (if any other code uses it outside shell) */
.mw-zoom{
  position:fixed; inset:0; z-index:1001;
  background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.mw-zoom img{ max-width:95vw; max-height:90vh; display:block; }
.mw-zoom .mw-zoom-close{
  position:absolute; top:10px; right:10px; width:36px; height:36px;
  border-radius:18px; border:1px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.4); cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
  font-size:20px;
  line-height:1;
}
.mw-zoom .mw-zoom-close::before{ content:"×"; }

/* Hide hover overlays during expand */
.premade-card.mw-expanding .buttons,
.premade-card.mw-expanding .music-marquee,
.premade-card.mw-expanding .speaker,
.premade-card.mw-expanding .price-chip-floating,
.pdg-card.mw-expanding .buttons,
.pdg-card.mw-expanding .music-marquee,
.pdg-card.mw-expanding .speaker,
.pdg-card.mw-expanding .price-chip-floating{ display:none!important; opacity:0!important; }

/*───────────────────────────*
 * MOBILE BEHAVIOR CHANGE (REQUESTED)
 * Previously: a "hover kill-switch" on mw-no-hover devices hid .card-body,
 * card actions, etc. on narrow screens.
 * Requested: DO NOT hide details on mobile, in both grid and list views.
 * Therefore: the old kill-switch block is removed (no forced hiding).
 *───────────────────────*/

/* ===== MOBILE (<768px) ===== */
@media (max-width:767px){
  /* PREMADEHATA:
   * Force a strict vertical flow for mobile scaffold so rows cannot become
   * side-by-side columns under any upstream grid/flex leakage.
   */
  .mw-expanded-layout.is-mobile{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
  }

  /* Keep non-mobile layout safe too (some builds mark both .mw-expanded-layout and .is-mobile). */
  .mw-expanded-layout{ display:block; }


  /* Ticket productdrafting1701d: avoid subtle horizontal overflow on expanded cards in mobile.
   * JS clamps width; CSS adds a max-width and border-box to defeat rounding/border overflow.
   */
  .pdg-card.mw-expanded,
  .pdg-card.is-expanded,
  .premade-card.mw-expanded,
  .premade-card.is-expanded{
    box-sizing:border-box !important;
    max-width:calc(100vw - 2px) !important;
  }
  .mw-expanded-content.is-mobile{
    overflow-x:hidden;
  }

  .premade-grid .premade-card.mw-expand-y,
  .pdg-grid .pdg-card.mw-expand-y{ grid-row:auto !important; }

  /* PREMADEHATA: force full-width row behavior */
  .mw-expanded-layout.is-mobile > .mw-m-row1,
  .mw-expanded-layout.is-mobile > .mw-m-row-title,
  .mw-expanded-layout.is-mobile > .mw-m-row2,
  .mw-expanded-layout.is-mobile > .mw-m-row3,
  .mw-expanded-layout.is-mobile > .mw-m-row4{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    flex:0 0 auto !important;
    float:none !important;
    clear:both !important;
    position:relative !important;
  }

  .mw-m-row1{ margin-bottom:12px; }

  /* Title row in mobile scaffold */
  .mw-m-row-title .mw-alt-title{
    margin:8px 0 0;
    text-align:center;
    color:#000;
  }

  /* Row2 stays the only “column” zone on mobile */
  .mw-m-row2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin:8px 0 12px;
  }

  /* Ticket productdrafting1701d: Row2 has a TOPBAR (actions + price) that must span both columns. */
  .mw-m-row2-topbar{
    grid-column:1 / -1;
    display:block;
    width:100%;
    min-width:0;
    margin:0 0 10px;
  }

  /* Center the moved actions/price when they are inside the topbar (not in mw-m-col2). */
  .mw-m-row2-topbar .mw-actions,
  .mw-m-row2-topbar .mw-price-panel,
  .mw-m-row2-topbar .mw-price-chip{
    width:70%;
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .mw-m-row2-topbar .mw-actions > *{
    width:100%;
  }

  /* The price panel is often styled inline; enforce mobile-friendly constraints safely. */
  .mw-m-row2-topbar .mw-price-panel{
    display:block;
    max-width:420px;
    white-space:nowrap;
  }

  /* Keep column children centered, but prevent width forcing from producing “column layout” across rows */
  .mw-expanded-layout.is-mobile .mw-m-col1,
  .mw-expanded-layout.is-mobile .mw-m-col2{
    min-width:0;
  }

  .mw-expanded-layout.is-mobile .mw-m-col1 > *,
  .mw-expanded-layout.is-mobile .mw-m-col2 > *{
    width:70%;
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
  }

  /* Ticket productdrafting1701d: tabbar must be in ROW-1 (top), not row3.
   * The tab stage (built by JS) lives inside .mw-m-row1 and contains: head (tabbar) + body (active panel).
   */
  .mw-expanded-layout.is-mobile .mw-m-row1 .mw-tab-stage[data-mw-stage="1"] > .mw-tab-stage-head{
    padding:0 10px 0;
    gap:10px;
  }
  .mw-expanded-layout.is-mobile .mw-m-row1 .mw-tab-stage[data-mw-stage="1"] > .mw-tab-stage-head .mw-tabbar{
    margin:0;
    justify-content:center;
  }

  /* Row3 becomes legacy/fallback only. The canonical visible tabbar on mobile still
   * belongs to row1's staged head; row3 should stay compact and hidden unless a legacy
   * rescue path temporarily parks the tabbar there.
   */
  .mw-m-row3{ margin-top:0; padding-top:0; }
  .mw-m-row3 > .mw-tabbar{ margin:0; }
  .mw-m-row3 .mw-summary{ text-align:center; }

  .mw-m-row4{ margin-top:8px; }
  .mw-m-row4 .mw-products-title{ text-align:center; }
  .mw-m-row4 .mw-products{ max-width:680px; margin:8px auto 0; }
  .mw-m-row4 .mw-open-product{ text-decoration:none!important; }

  /* Mobile gallery: vertical thumbs */
  .mw-gallery{
    display:grid;
    grid-template-columns:1fr calc(var(--thumb-size) + 6px);
    gap:10px;
    align-items:start;
  }
  .mw-gallery-main{ grid-column:1; height:auto; width:100%; max-width:100%; }
  .mw-thumbs{
    grid-column:2;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-self:stretch;
    overflow:auto;
    margin-top:0;
    min-height:0;
  }
  .mw-thumb{ width:var(--thumb-size); height:var(--thumb-size); }

  .mw-badges{ margin:4px 0; text-align:center; }

  /* Ticket productdrafting1701d: no dedicated 'Music' / 'Musician' link-buttons in expanded UI. */
  .mw-expanded-content.is-mobile button.mw-open-music-info,
  .mw-expanded-content.is-mobile a.mw-open-music-info{
    display:none !important;
  }
  .mw-expanded-content.is-mobile button.mw-open-musician-info,
  .mw-expanded-content.is-mobile a.mw-open-musician-info{
    display:none !important;
  }

  /* Rails */
  .mw-expanded-layout.is-mobile .mw-m-col2{ --btn-h:44px; }
  .mw-expanded-layout.is-mobile .mw-m-col2 .mw-badges,
  .mw-expanded-layout.is-mobile .mw-m-col2 .mw-actions{
    width:70%; max-width:420px; margin-left:auto; margin-right:auto; text-align:center;
  }
  .mw-expanded-layout.is-mobile .mw-m-col2 .mw-price-panel{
    width:100%; display:block; text-align:center;
  }
  .mw-expanded-layout.is-mobile .mw-m-col2 .mw-actions > *{ width:100%; }

  .mw-badge{ padding:.25rem .6rem; border-radius:999px; font-size:.85rem; font-weight:600; line-height:1; display:inline-block; }
  .mw-star-only{
    display:inline-block; font-size:22px; line-height:1; text-align:center;
    margin:.25rem .35rem; background:none!important; border:none!important; color:var(--frame,#D5A856);
  }
}

/* ===== DESKTOP (≥768px) ===== */
@media (min-width:768px){
  .mw-expanded-layout:not(.is-mobile) .mw-right{ --btn-h:44px; --rail:480px; }

  /* Align rails */
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-price-panel,
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-actions,
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-badges,
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-star-only{
    width:100%; max-width:var(--rail); margin-left:auto; margin-right:auto;
  }

  /* Price panel 20% narrower */
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-price-panel{
    max-width:calc(var(--rail) * 0.8);
  }

  .mw-badges{ text-align:center; margin:4px 0; }
  .mw-badge{
    display:inline-block; padding:.25rem .6rem; border-radius:999px;
    font-weight:600; line-height:1; font-size:.95rem;
  }
  .mw-star-only{
    display:inline-block; font-size:22px; line-height:1; margin:.25rem .35rem; color:var(--frame,#D5A856);
    background:none!important; border:none!important;
  }
}

/* BEST SELLER / PROMOTED – colors in expanded too */
.premade-card[data-bestseller="1"] .mw-badge--best,
.pdg-card[data-bestseller="1"] .mw-badge--best{
  background:var(--gear,#D9782a) !important; color:#fff !important;
}
.premade-card[data-bestseller="1"] .mw-price-panel,
.premade-card[data-bestseller="1"] .mw-rate-chip,
.pdg-card[data-bestseller="1"] .mw-price-panel,
.pdg-card[data-bestseller="1"] .mw-rate-chip{
  background:var(--gear,#D9782a) !important; color:#fff !important; border-color:transparent!important;
}
.premade-card[data-star="1"] .mw-star-only,
.pdg-card[data-star="1"] .mw-star-only{ color:var(--frame,#D5A856) !important; }

/* Default panel tone when not best/promoted */
.premade-card:not([data-bestseller="1"]):not([data-star="1"]) .mw-price-panel,
.pdg-card:not([data-bestseller="1"]):not([data-star="1"]) .mw-price-panel{
  background:var(--btn,#eee) !important; color:var(--btnfont,#222) !important;
}

/* Summary: remove auto labels */
.mw-summary .field__label,
.mw-summary .field-label,
.mw-summary .label,
.mw-summary > h1,
.mw-summary > h2,
.mw-summary > h3,
.mw-summary > h4,
.mw-summary > h5,
.mw-summary > h6{ display:none !important; }

/* Close button (only while expanded) */
.premade-grid .premade-card .mw-close,
.pdg-grid .pdg-card .mw-close{
  display:none;
  position:absolute; top:10px; right:10px; width:32px; height:32px; line-height:32px; border-radius:16px;
  background:rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.12);
  box-shadow:0 2px 6px rgba(0,0,0,.15); cursor:pointer; text-align:center; font-weight:700; font-size:18px; user-select:none; z-index:4;
}
.premade-grid .premade-card.mw-expanded .mw-close,
.premade-grid .premade-card.is-expanded .mw-close,
.pdg-grid .pdg-card.mw-expanded .mw-close,
.pdg-grid .pdg-card.is-expanded .mw-close{ display:block; }
.premade-grid .premade-card .mw-close:hover,
.pdg-grid .pdg-card .mw-close:hover{ background:#fff; }

/* FLIP guard */
.mw-expand-guard{ position:fixed; inset:0; background:transparent; z-index:999; pointer-events:auto; }

@media (prefers-reduced-motion:reduce){
  .premade-grid .premade-card,
  .pdg-grid .pdg-card{ transition:none!important; }
}

/* ========================================================================== *
 * Ticket: pdggaleritabv1 — Unified Tab Stage (Gallery-region panels)
 *
 * Goal:
 *   - Gallery / Summary / Pre-made panels must render in the SAME physical region
 *     as the gallery widget.
 *   - JS creates: .mw-tab-stage[data-mw-stage="1"] and panels:
 *       [data-mw-panel="gallery"] .mw-tab-panel--gallery
 *       [data-mw-panel="summary"] .mw-tab-panel--summary
 *       [data-mw-panel="premade"] .mw-tab-panel--premade
 *
 * This CSS:
 *   - Provides sane spacing for staged panels.
 *   - Overrides legacy "hide left rail on non-gallery tabs" fallback rules.
 *   - Prevents legacy (non-staged) tab panels / premade hosts from showing.
 *   - Styles musician name trigger when it becomes the popup opener.
 * ========================================================================== */

.mw-tab-stage[data-mw-stage="1"]{
  width:100%;
  box-sizing:border-box;
}

/* Stage head: primarily keeps the stage structure / close affordance intact.
 * The visible desktop tabbar now lives in the RIGHT rail under `.mw-alt-title`.
 * On mobile, the visible tabbar still belongs to the stage head in row1.
 */
.mw-tab-stage[data-mw-stage="1"] > .mw-tab-stage-head{
  width:100%;
  box-sizing:border-box;
  padding:10px 10px 0;
  display:flex;
  align-items:center;
  gap:10px;
}
.mw-tab-stage[data-mw-stage="1"] > .mw-tab-stage-head .mw-tabbar{
  flex:1 1 auto;
}

/* Panels inside stage */
.mw-tab-stage[data-mw-stage="1"] .mw-tab-stage-body > .mw-tab-panel{
  width:100%;
  box-sizing:border-box;
}

/* Gallery panel: preserve existing gallery layout (no padding) */
.mw-tab-stage[data-mw-stage="1"] .mw-tab-stage-body > .mw-tab-panel--gallery{
  padding:0;
}

/* Summary + Pre-made panels: breathing room */
.mw-tab-stage[data-mw-stage="1"] .mw-tab-stage-body > .mw-tab-panel--summary,
.mw-tab-stage[data-mw-stage="1"] .mw-tab-stage-body > .mw-tab-panel--premade{
  padding:10px 10px 0;
}

/* Ensure the gallery-region host is never collapsed by legacy tab-mode CSS once stage exists */
/* Ticket PDG-TABS-LEFT-1010:
 * When a real tab stage exists inside `.mw-left`, the left rail must not be a centered flexbox.
 * Force block flow early (even before `data-mw-active-tab` is set) using the class added by JS.
 */
.mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-left{
  display:block !important;
  align-items:stretch;
  justify-content:stretch;
}
.mw-expanded-content[data-mw-active-tab] .mw-expanded-layout:not(.is-mobile) .mw-left{
  display:block !important;
}
.mw-expanded-content[data-mw-active-tab] .mw-expanded-layout:not(.is-mobile) .mw-right.mw-right--full{
  grid-column:auto !important;
  width:auto !important;
}

/* The legacy premade host is force-hidden by JS; keep it hidden defensively. */
.mw-expanded-content[data-mw-active-tab] .mw-expanded-layout .mw-right > .mw-related,
.mw-expanded-content[data-mw-active-tab] .mw-expanded-layout .mw-m-row3 > .mw-related{
  display:none !important;
}

/* Ticket MW-PDG-1104-PHASE3:
 * After the JS cleanup, the canonical premade panel lives in the staged tab body.
 * Older builds can still leave a legacy premade shell in the right rail (and, on some
 * mobile scaffold passes, in mRow3). Hide those legacy hosts defensively so selectors,
 * spacing, and visible content all resolve against the staged panel only.
 */
.mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right > .mw-tab-panel--premade,
.mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right > .mw-related,
.mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right > [data-mw-panel="premade"],
.mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right > [data-mw-panel="related"]{
  display:none !important;
}

.mw-expanded-content.mw-has-tab-stage .mw-expanded-layout.is-mobile .mw-m-row3 > .mw-tab-panel--premade,
.mw-expanded-content.mw-has-tab-stage .mw-expanded-layout.is-mobile .mw-m-row3 > .mw-related,
.mw-expanded-content.mw-has-tab-stage .mw-expanded-layout.is-mobile .mw-m-row3 > [data-mw-panel="premade"],
.mw-expanded-content.mw-has-tab-stage .mw-expanded-layout.is-mobile .mw-m-row3 > [data-mw-panel="related"]{
  display:none !important;
}

/* Mobile: hide duplicate empty shells if the browser supports :has() */
@supports selector(:has(*)){
  .mw-expanded-layout.is-mobile .mw-row-summary:not(:has(.mw-tabbar)):not(:has([data-mw-panel])){
    display:none !important;
  }
  .mw-expanded-layout.is-mobile .mw-row-components:not(:has([data-mw-panel])){
    display:none !important;
  }
}

/* Musician: name becomes the only popup trigger */
/* Musician: the NAME line becomes the only popup trigger (desktop + mobile) */
.mw-expanded-content .mw-line.mw-line--clickable{
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Focus ring for keyboard users */
.mw-expanded-content .mw-line.mw-line--clickable:focus-visible{
  outline:2px solid rgba(0,0,0,.55);
  outline-offset:2px;
  border-radius:6px;
}

/* Hide legacy separate musician button (e.g., "Sanatçı") if it still exists */
.mw-expanded-content button.mw-open-musician-info{
  display:none !important;
}

/* -------------------------------------------------------------------------
 * pdggalerytab hardening: stage layout should not depend on JS vars to avoid
 * clipped panels when stage height sync is delayed or disabled.
 * ---------------------------------------------------------------------- */
.mw-tab-stage[data-mw-stage="1"]{
  display: flex;
  flex-direction: column;
}
.mw-tab-stage-head{
  flex: 0 0 auto;
}
.mw-tab-stage-body{
  flex: 1 1 auto;
  min-height: 0; /* allow internal panels to scroll */
  height: auto;  /* override calc(auto - X) failure mode */
}
.mw-tab-panel{
  min-height: 0;
}


/*───────────────────────────*
 * Ticket: productdrafting_expand_desktop_layout_v1
 * Desktop (wide screen) expand view layout polish:
 * - Reduce “empty frame” feel by allowing tab-stage to grow taller (min-height).
 * - Stop vertically centering the right rail in tab-stage mode (top-align purchase stack).
 * - Improve column balance by capping the right rail and giving more room to the left (gallery).
 * - Add a max-width so the modal content feels designed on large screens.
 * NOTE: Visual-only. No behavioral changes.
 *───────────────────────*/

@media (min-width: 901px){
  /* 1) Right rail: top-align instead of vertical centering (desktop tab-stage mode). */
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right{
    justify-content:flex-start;
    padding-top:6px;
  }

  /* 2) Tab-stage: prevent “too-short stage” (gallery main collapses to ~236px square).
   * We set a conservative min-height so the gallery fills the left rail better on desktop.
   * JS still controls exact height; min-height only raises the floor when JS results are too small.
   */
  .mw-expanded-content.mw-has-tab-stage .mw-tab-stage[data-mw-stage="1"]{
    min-height:clamp(420px, 55vh, 720px);
  }
}

/* 3) Wide desktop grid: give the gallery more room; cap the right purchase rail. */
@media (min-width: 1100px){
  .mw-expanded-layout{
    grid-template-columns:minmax(0, 1fr) minmax(420px, 480px);
    gap:28px;
    padding:24px;

    /* Keep the expand content from feeling “stretched edge-to-edge” */
    max-width:1240px;
    margin-left:auto;
    margin-right:auto;
  }
}


@media (min-width: 901px){
  /* 4) Desktop: let the gallery main fill the available stage width.
   * This prevents the “small centered square” (e.g. 236px) that makes the gallery look lost.
   */
  .mw-expanded-content.mw-has-tab-stage .mw-tab-stage[data-mw-stage="1"] .mw-tab-stage-body .mw-gallery-main{
    width:100%;
    max-width:100%;
    justify-self:stretch;
  }

  /* 5) Desktop: tabs should align to the left rail edges (less floating feel). */
  .mw-expanded-content.mw-has-tab-stage .mw-tab-stage[data-mw-stage="1"] .mw-tabbar{
    width:100%;
    justify-content:flex-start;
  }
}


@media (min-width: 901px){
  /* 6) Desktop right rail: avoid “floating centered widgets”.
   * Make the purchase stack fill the rail width (rail itself is already capped on wide screens).
   */
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right{
    align-items:stretch;
  }

  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right > *{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
  }

  /* Common purchase panel wrapper in this module */
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-trio-box{
    max-width:none;
  }
}


@media (min-width: 901px){
  /* 7) Desktop right rail: tighten vertical rhythm and make the purchase stack feel cohesive.
   * We rely on flex gap + reset child margins (instead of each block adding its own margins).
   * Visual-only.
   */
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right{
    gap:12px;
  }

  /* Reset margins that currently create “floating islands” */
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-alt-title,
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-trio-box,
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-badges,
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-price-chip,
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-actions{
    margin:0 !important;
  }

  /* Make the control box feel less dominant */
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-trio-box{
    padding:8px 10px;
  }

  /* Ensure the price bar and CTA align as one unit */
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-price-chip{
    width:100%;
    max-width:100%;
  }

  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-actions{
    width:100%;
    max-width:100%;
    justify-content:flex-start;
  }

  /* The actual CTA link */
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-actions .pdp-btn-add{
    width:100%;
    max-width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
  }

  /* Remove stray empty spacing from badges placeholder if it renders empty */
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-badges:empty{
    display:none;
  }
}



/*───────────────────────────*
 * Ticket: productdrafting_expand_desktop_layout_v2 (CSS-only refinement)
 * Goal: make desktop expand feel “purchase-panel cohesive”
 * - CTA becomes full width (aligned with price bar)
 * - Right rail rhythm tighter and less “floating”
 * - Control box less dominant
 * - Left media capped so it doesn't overpower right rail vertically
 * - Tabs spacing tightened
 * Visual-only.
 *───────────────────────*/

@media (min-width: 901px){
  /* A) Price + CTA as one unit */
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-actions{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin-top:8px !important;
  }

  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-actions .pdp-btn-add{
    display:flex !important;
    width:100% !important;
    max-width:100% !important;
    justify-content:center !important;
    align-items:center !important;
    min-height:44px !important;
    text-decoration:none !important;
  }

  /* B) Control box dominance reduction */
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-trio-box{
    padding:8px 10px !important;
  }

  /* C) Tight rhythm and remove accidental spacing islands */
  .mw-expanded-layout:not(.is-mobile) .mw-right{
    gap:12px !important;
  }

  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-alt-title,
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-trio-box,
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-badges,
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-price-chip,
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-actions{
    margin:0 !important;
  }

  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-badges:empty{
    display:none !important;
  }

  /* D) Left media cap (prevents left panel dominating vertically) */
  .mw-expanded-content.mw-has-tab-stage
  .mw-tab-stage[data-mw-stage="1"] .mw-tab-stage-body{
    max-height:58vh !important;
    overflow:hidden !important;
  }

  .mw-expanded-content.mw-has-tab-stage
  .mw-tab-stage[data-mw-stage="1"] .mw-gallery-main{
    max-height:58vh !important;
  }

  /* E) Tabs spacing polish */
  .mw-expanded-content.mw-has-tab-stage
  .mw-tab-stage[data-mw-stage="1"] .mw-tabbar{
    margin:8px 0 10px !important;
    justify-content:flex-start !important;
  }
}


/* MW_PDG_EXPAND_CSS_VERSION: v6 | MW_PDG_EXPAND_CSS_V6_SIGNATURE */


@media (min-width: 901px){
  /* v6: Strong overrides (higher specificity) for CTA width + right stack cohesion */
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:12px !important;
  }

  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-actions{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }

  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-actions .pdp-btn-add{
    width:100% !important;
    max-width:none !important;
    align-self:stretch !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:44px !important;
  }
}


/* MW_PDG_EXPAND_CSS_VERSION: v7 | MW_PDG_EXPAND_CSS_V7_SIGNATURE */


@media (min-width: 901px){
  /* v7: Desktop expand cleanup (whitespace + gallery single-image behavior + CTA full style)
   * - Reduce outer padding/gaps so the white area is less “wasted”.
   * - Make gallery panel less tall (better balance with right rail): use a wider ratio than 1/1.
   * - Ensure gallery content is centered and image fits nicely when single (no awkward cropping/offset).
   * - Fully style the add/remove button as a full-width primary action (not just width).
   */

  /* 1) Reduce perceived “empty frame” inside modal */
  .mw-expanded-layout{
    padding:16px !important;
    gap:18px !important;
  }

  /* 2) Gallery ratio: make it less tall than a square on desktop.
   * JS computes panelH = basisW / ratio → higher ratio => shorter panel.
   */
  .mw-expanded-content{
    --gallery-ratio: 4 / 3;
  }

  /* 3) Stage floor/ceiling tuned for new ratio (avoid huge blocks) */
  .mw-expanded-content.mw-has-tab-stage .mw-tab-stage[data-mw-stage="1"]{
    min-height:clamp(360px, 46vh, 620px) !important;
  }

  .mw-expanded-content.mw-has-tab-stage
  .mw-tab-stage[data-mw-stage="1"] .mw-tab-stage-body{
    max-height:52vh !important;
    overflow:hidden !important;
  }

  /* 4) Gallery main should fill width but center its inner media */
  .mw-expanded-content.mw-has-tab-stage
  .mw-tab-stage[data-mw-stage="1"] .mw-tab-stage-body .mw-gallery-main{
    width:100% !important;
    max-width:100% !important;
    justify-self:stretch !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* 5) Image fit rules (works for <img>, <picture>, and common wrappers) */
  .mw-expanded-content.mw-has-tab-stage
  .mw-tab-stage[data-mw-stage="1"] .mw-gallery-main img,
  .mw-expanded-content.mw-has-tab-stage
  .mw-tab-stage[data-mw-stage="1"] .mw-gallery-main picture,
  .mw-expanded-content.mw-has-tab-stage
  .mw-tab-stage[data-mw-stage="1"] .mw-gallery-main video{
    max-width:100% !important;
    max-height:100% !important;
  }

  .mw-expanded-content.mw-has-tab-stage
  .mw-tab-stage[data-mw-stage="1"] .mw-gallery-main img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important; /* prevents ugly crop on single image */
    object-position:center center !important;
    display:block !important;
  }

  /* 6) Tabs: slightly tighter and left-aligned */
  .mw-expanded-content.mw-has-tab-stage
  .mw-tab-stage[data-mw-stage="1"] .mw-tabbar{
    margin:6px 0 10px !important;
    justify-content:flex-start !important;
  }

  /* 7) FULL “Add to draft” button styling (not only width) */
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-actions{
    display:flex !important;
    width:100% !important;
    justify-content:stretch !important;
    align-items:stretch !important;
  }

  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-actions a.pdp-btn-add,
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-actions .pdp-btn-add{
    width:100% !important;
    flex:1 1 auto !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    min-height:44px !important;
    padding:10px 16px !important;

    border-radius:999px !important;
    font-weight:750 !important;
    letter-spacing:0.2px !important;
    text-decoration:none !important;
  }

  /* Keep the button visually consistent in “added” state as well (some states change opacity) */
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-actions a.pdp-btn-add:active,
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-actions a.pdp-btn-add:focus-visible{
    outline:none !important;
  }
}

/* 8) Wide desktop: slightly tighter max width so overall composition is less “spread out” */
@media (min-width: 1100px){
  .mw-expanded-layout{
    max-width:1160px !important;
  }
}


/* MW_PDG_EXPAND_CSS_VERSION: v8 | MW_PDG_EXPAND_CSS_V8_SIGNATURE */


@media (min-width: 901px){
  /* v8: Desktop expand compaction + single-image gallery fix + CTA hard-full-width
   * - Reduce modal/max-width so it stops feeling like a giant empty white field.
   * - Reduce padding/gap.
   * - Make gallery less tall + better balanced with right rail.
   * - Force single image to fill the gallery panel nicely.
   * - Force CTA to be truly full width (flex-basis/min-width).
   */

  /* 1) Make the whole expand feel less oversized */
  .mw-expanded-content{
    padding:12px !important;
  }

  .mw-expanded-layout{
    padding:14px !important;
    gap:16px !important;
    max-width:1040px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* 2) Column balance: slightly narrower right rail */
  .mw-expanded-layout{
    grid-template-columns:minmax(0, 1fr) minmax(380px, 420px) !important;
  }

  /* 3) Gallery: less tall than square on desktop (shorter stage) */
  .mw-expanded-content{
    --gallery-ratio: 16 / 10;
  }

  .mw-expanded-content.mw-has-tab-stage .mw-tab-stage[data-mw-stage="1"]{
    min-height:clamp(320px, 40vh, 560px) !important;
  }

  .mw-expanded-content.mw-has-tab-stage
  .mw-tab-stage[data-mw-stage="1"] .mw-tab-stage-body{
    max-height:46vh !important;
    overflow:hidden !important;
  }

  /* 4) Single image: give the gallery a stable frame and fill it */
  .mw-expanded-content.mw-has-tab-stage
  .mw-tab-stage[data-mw-stage="1"] .mw-tab-stage-body .mw-gallery-main{
    width:100% !important;
    max-width:100% !important;
    justify-self:stretch !important;

    aspect-ratio:16 / 10;
    overflow:hidden;
    border-radius:14px;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .mw-expanded-content.mw-has-tab-stage
  .mw-tab-stage[data-mw-stage="1"] .mw-gallery-main img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;     /* if you prefer NO crop, switch to contain */
    object-position:center center !important;
    display:block !important;
  }

  /* 5) CTA: force true full-width under price */
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile) .mw-right .mw-actions{
    width:100% !important;
    align-items:stretch !important;
    justify-content:stretch !important;
  }

  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile)
  .mw-right .mw-actions a.pdp-btn-add,
  .mw-expanded-content.mw-has-tab-stage .mw-expanded-layout:not(.is-mobile)
  .mw-right .mw-actions .pdp-btn-add{
    flex:1 1 100% !important;
    flex-basis:100% !important;
    min-width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    min-height:44px !important;
  }
}

/* Wide screens: keep compact max width */
@media (min-width: 1300px){
  .mw-expanded-layout{ max-width:1040px !important; }
}


/* MW_PDG_EXPAND_CSS_VERSION: v9 | MW_PDG_EXPAND_CSS_V9_SIGNATURE */


@media (min-width: 901px){
  /* v9: Desktop expand fixes (tabs under CTA + left height matches right + padding compaction + price align)
   * - Collapse empty stage head (tabbar moved out).
   * - Reduce vertical paddings to 1px (as requested).
   * - Ensure price is centered immediately (no “left first, centered after click”).
   * - Style tabbar when it lives under CTA in the right rail.
   */

  /* 1) Vertical paddings: set to 1px (top/bottom) */
  .mw-expanded-content{
    padding-top:1px !important;
    padding-bottom:1px !important;
  }
  .mw-expanded-layout{
    padding-top:1px !important;
    padding-bottom:1px !important;
  }

  /* 2) Stage head: collapse only when JS explicitly marks it empty.
   * Desktop keeps the visible tabbar on the right rail; mobile still uses row1 stage-head.
   */
  .mw-tab-stage-head.mw-tab-stage-head--empty{
    display:none !important;
    height:0 !important;
    padding:0 !important;
    margin:0 !important;
  }

  /* 3) Price: always centered (fix “left aligned on open”) */
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-price-chip{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
  }

  /* 4) Right-rail tabbar placement (under RIGHT title). */
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-tabbar{
    width:100% !important;
    max-width:100% !important;
    justify-content:center !important;
    margin:6px 0 10px !important;
    padding:0 !important;
  }

  /* 5) Tab pills slightly smaller when under the right title. */
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-tabbar .mw-tab{
    transform:scale(0.96);
    transform-origin:center;
  }

  /* 6) If a desktop right-hosted tabbar exists, hide stray legacy hosts. */
  .mw-expanded-layout:not(.is-mobile):has(.mw-right .mw-tabbar) .mw-row-summary > .mw-tabbar,
  .mw-expanded-layout:not(.is-mobile):has(.mw-right .mw-tabbar) .mw-m-row3 > .mw-tabbar,
  .mw-expanded-layout:not(.is-mobile):has(.mw-right .mw-tabbar) .mw-tab-stage-head > .mw-tabbar[data-mw-tabs-location^="right"]{
    display:none !important;
  }
}


/* MW_PDG_EXPAND_CSS_VERSION: v10 | MW_PDG_EXPAND_CSS_V10_SIGNATURE */


@media (min-width: 901px){
  /* v10: Gallery full image + equal columns + square gallery sizing (desktop) */

  /* 1) Equal left/right columns */
  .mw-expanded-layout{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
    max-width:1040px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* 2) Gallery tab: square stage + full image visibility */
  .mw-expanded-content.mw-active-tab--gallery{
    --gallery-ratio: 1 / 1;
  }

  /* Remove caps that can clip the gallery */
  .mw-expanded-content.mw-active-tab--gallery
  .mw-tab-stage[data-mw-stage="1"] .mw-tab-stage-body{
    max-height:none !important;
    overflow:visible !important;
  }

  .mw-expanded-content.mw-active-tab--gallery
  .mw-tab-stage[data-mw-stage="1"] .mw-gallery-main{
    aspect-ratio:1 / 1 !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden;
    border-radius:14px;
  }

  .mw-expanded-content.mw-active-tab--gallery
  .mw-tab-stage[data-mw-stage="1"] .mw-gallery-main img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;  /* FULL image, no crop */
    object-position:center center !important;
    display:block !important;
  }
}


/* MW_PDG_EXPAND_CSS_VERSION: v11 | MW_PDG_EXPAND_CSS_V11_SIGNATURE */


@media (min-width: 901px){
  /* v11: Tabbar now sits under RIGHT title (mw-alt-title) */
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-tabbar{
    width:100% !important;
    max-width:100% !important;
    justify-content:center !important;
    margin:6px 0 10px !important;
    padding:0 !important;
  }

  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-tabbar .mw-tab{
    transform:scale(0.96);
    transform-origin:center;
  }
}


@media (min-width: 901px){
  /* Ticket MW-PDG-1104-TABS-RIGHT-PREMADE:
   * Right rail is now the canonical visible desktop tab host. These selectors make the
   * intent explicit and keep the title + tabs stack visually tight.
   */
  .mw-expanded-layout:not(.is-mobile) .mw-right > .mw-alt-title + .mw-tabbar,
  .mw-expanded-layout:not(.is-mobile) .mw-right > .mw-alt-title + .mw-line + .mw-tabbar{
    margin-top:6px !important;
  }

  .mw-expanded-layout:not(.is-mobile) .mw-right > .mw-alt-title + .mw-tabbar,
  .mw-expanded-layout:not(.is-mobile) .mw-right > .mw-alt-title + .mw-line + .mw-tabbar,
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-tabbar[data-mw-tabs-location="right-under-title"],
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-tabbar[data-mw-tabs-location="right-before-actions"],
  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-tabbar[data-mw-tabs-location="right-top"]{
    align-self:stretch;
  }

  .mw-expanded-layout:not(.is-mobile) .mw-tab-stage[data-mw-stage="1"] > .mw-tab-stage-head .mw-tabbar[data-mw-tabs-location^="right"]{
    display:none !important;
  }
}

@media (max-width: 900px){
  /* Mobile keeps row1 stage-head as the canonical visible tabbar host. */
  .mw-expanded-layout.is-mobile .mw-m-row1 .mw-tab-stage[data-mw-stage="1"] > .mw-tab-stage-head .mw-tabbar{
    display:flex;
  }

  .mw-expanded-layout.is-mobile .mw-m-row3 > .mw-tabbar[data-mw-tabs-location^="right"]{
    display:none !important;
  }
}


/*───────────────────────────*
 * Ticket MW-PDG-2104-PREMADE-DESKTOP-STRETCH
 * Premade desktop tab should size the left rail to content instead of stretching
 * to the full expanded-card row height. The earlier clipping issue is solved at
 * panel level; the remaining blank area comes from the left grid item stretching.
 *───────────────────────*/
.mw-expanded-content.mw-has-tab-stage[data-mw-active-tab="premade"] .mw-expanded-layout:not(.is-mobile),
.mw-expanded-content.mw-has-tab-stage.mw-active-tab--premade .mw-expanded-layout:not(.is-mobile){
  align-items:start !important;
}

.mw-expanded-content.mw-has-tab-stage[data-mw-active-tab="premade"] .mw-expanded-layout:not(.is-mobile) .mw-left,
.mw-expanded-content.mw-has-tab-stage.mw-active-tab--premade .mw-expanded-layout:not(.is-mobile) .mw-left{
  display:block !important;
  align-self:start !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
}

.mw-expanded-content.mw-has-tab-stage[data-mw-active-tab="premade"] .mw-expanded-layout:not(.is-mobile) .mw-tab-stage[data-mw-stage="1"],
.mw-expanded-content.mw-has-tab-stage.mw-active-tab--premade .mw-expanded-layout:not(.is-mobile) .mw-tab-stage[data-mw-stage="1"],
.mw-expanded-content.mw-has-tab-stage[data-mw-active-tab="premade"] .mw-expanded-layout:not(.is-mobile) .mw-tab-stage-body,
.mw-expanded-content.mw-has-tab-stage.mw-active-tab--premade .mw-expanded-layout:not(.is-mobile) .mw-tab-stage-body,
.mw-expanded-content.mw-has-tab-stage[data-mw-active-tab="premade"] .mw-expanded-layout:not(.is-mobile) .mw-tab-panel--premade,
.mw-expanded-content.mw-has-tab-stage.mw-active-tab--premade .mw-expanded-layout:not(.is-mobile) .mw-tab-panel--premade,
.mw-expanded-content.mw-has-tab-stage[data-mw-active-tab="premade"] .mw-expanded-layout:not(.is-mobile) .mw-premade-mini-list,
.mw-expanded-content.mw-has-tab-stage.mw-active-tab--premade .mw-expanded-layout:not(.is-mobile) .mw-premade-mini-list,
.mw-expanded-content.mw-has-tab-stage[data-mw-active-tab="premade"] .mw-expanded-layout:not(.is-mobile) .mw-premade-mini-cards,
.mw-expanded-content.mw-has-tab-stage.mw-active-tab--premade .mw-expanded-layout:not(.is-mobile) .mw-premade-mini-cards{
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

.mw-expanded-content.mw-has-tab-stage[data-mw-active-tab="premade"] .mw-expanded-layout:not(.is-mobile) .mw-premade-mini-cards,
.mw-expanded-content.mw-has-tab-stage.mw-active-tab--premade .mw-expanded-layout:not(.is-mobile) .mw-premade-mini-cards{
  align-content:start !important;
}

/* MW_PDG_EXPAND_PALETTE_SCOPE_V6
 * Purpose:
 * - Expanded view must use the same solid product/status palette surfaces as premade.
 * - No gradient background in expanded view.
 * - Empty-palette cards remain neutral and must not inherit global palette variables.
 * - This file is in the expand library and loads after the grid library, so these rules intentionally carry !important.
 */
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content,
.pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content,
.pdg-wrapper .pdg-card.pdg-card--has-palette > .mw-expanded-content,
.pdg-card.pdg-card--has-palette > .mw-expanded-content {
  background: var(--bgBottom, #ffffff) !important;
  color: var(--logo, #1b1d24) !important;
  border: 2px solid var(--frame, transparent) !important;
}

.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-expanded-layout,
.pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-expanded-layout,
.pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-expanded-layout {
  background: var(--bgBottom, #ffffff) !important;
  color: var(--logo, #1b1d24) !important;
}

.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-right,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-trio-box,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-tab-stage,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-tab-panel--summary,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-tab-panel--premade,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-row-summary,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-row-components {
  color: var(--logo, #1b1d24) !important;
}

.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-right .mw-alt-title,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-right .mw-line,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-right .mw-open-musician-info,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-summary-desc,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-summary-desc p {
  color: var(--logo, #1b1d24) !important;
}

/* Keep buttons/accent surfaces mapped like premade: background surfaces are solid,
   actions use button variables, and hover uses hover variable. */
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-actions .button,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-actions a.button,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .pdp-btn-add {
  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 > .mw-expanded-content .mw-actions .button:hover,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-actions a.button:hover,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .pdp-btn-add:hover,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-tab.is-active,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette > .mw-expanded-content .mw-tab[aria-selected="true"] {
  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--empty-palette > .mw-expanded-content,
.pdg-grid .pdg-card.pdg-card--empty-palette > .mw-expanded-content,
.pdg-wrapper .pdg-card.pdg-card--empty-palette > .mw-expanded-content,
.pdg-card.pdg-card--empty-palette > .mw-expanded-content {
  background: #ffffff !important;
  color: #1b1d24 !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}

.pdg-wrapper .pdg-grid .pdg-card.pdg-card--empty-palette > .mw-expanded-content .mw-expanded-layout,
.pdg-grid .pdg-card.pdg-card--empty-palette > .mw-expanded-content .mw-expanded-layout,
.pdg-card.pdg-card--empty-palette > .mw-expanded-content .mw-expanded-layout {
  background: #ffffff !important;
  color: #1b1d24 !important;
}

/* MW_PDG_EXPAND_SINGLE_SURFACE_V7
 * Purpose:
 * - Expanded PDP cards are built inside the original grid card root.
 * - In v6 both the outer .pdg-card shell and the inner expanded wrapper could paint
 *   the theme background/frame, creating a double-background / double-border effect.
 * - In expanded mode the outer card and .mw-expanded-content are now structural only.
 * - .mw-expanded-layout is the single visible themed 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.card.pdg-card--has-palette.is-expanded,
.pdg-wrapper .pdg-grid > .pdg-card.card.pdg-card--has-palette.mw-expanded,
.pdg-wrapper .pdg-grid .pdg-cards > .pdg-card.pdg-card--has-palette.is-expanded,
.pdg-wrapper .pdg-grid .pdg-cards > .pdg-card.pdg-card--has-palette.mw-expanded,
.pdg-wrapper .pdg-grid .pdg-cards-slice > .pdg-card.pdg-card--has-palette.is-expanded,
.pdg-wrapper .pdg-grid .pdg-cards-slice > .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,
.pdg-wrapper .pdg-grid > .pdg-card.card.pdg-card--empty-palette.is-expanded,
.pdg-wrapper .pdg-grid > .pdg-card.card.pdg-card--empty-palette.mw-expanded,
.pdg-grid > .pdg-card.pdg-card--has-palette.is-expanded,
.pdg-grid > .pdg-card.pdg-card--has-palette.mw-expanded,
.pdg-grid > .pdg-card.pdg-card--empty-palette.is-expanded,
.pdg-grid > .pdg-card.pdg-card--empty-palette.mw-expanded {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.pdg-wrapper .pdg-grid .pdg-card.is-expanded > .mw-expanded-content,
.pdg-wrapper .pdg-grid .pdg-card.mw-expanded > .mw-expanded-content,
.pdg-grid .pdg-card.is-expanded > .mw-expanded-content,
.pdg-grid .pdg-card.mw-expanded > .mw-expanded-content,
.pdg-card.is-expanded > .mw-expanded-content,
.pdg-card.mw-expanded > .mw-expanded-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
}

.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette.is-expanded > .mw-expanded-content > .mw-expanded-layout,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--has-palette.mw-expanded > .mw-expanded-content > .mw-expanded-layout,
.pdg-grid .pdg-card.pdg-card--has-palette.is-expanded > .mw-expanded-content > .mw-expanded-layout,
.pdg-grid .pdg-card.pdg-card--has-palette.mw-expanded > .mw-expanded-content > .mw-expanded-layout,
.pdg-card.pdg-card--has-palette.is-expanded > .mw-expanded-content > .mw-expanded-layout,
.pdg-card.pdg-card--has-palette.mw-expanded > .mw-expanded-content > .mw-expanded-layout {
  background: var(--bgBottom, #ffffff) !important;
  color: var(--logo, #1b1d24) !important;
  border: 2px solid var(--frame, transparent) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.14) !important;
  box-sizing: border-box !important;
  padding: 16px !important;
  overflow: visible !important;
}

.pdg-wrapper .pdg-grid .pdg-card.pdg-card--empty-palette.is-expanded > .mw-expanded-content > .mw-expanded-layout,
.pdg-wrapper .pdg-grid .pdg-card.pdg-card--empty-palette.mw-expanded > .mw-expanded-content > .mw-expanded-layout,
.pdg-grid .pdg-card.pdg-card--empty-palette.is-expanded > .mw-expanded-content > .mw-expanded-layout,
.pdg-grid .pdg-card.pdg-card--empty-palette.mw-expanded > .mw-expanded-content > .mw-expanded-layout,
.pdg-card.pdg-card--empty-palette.is-expanded > .mw-expanded-content > .mw-expanded-layout,
.pdg-card.pdg-card--empty-palette.mw-expanded > .mw-expanded-content > .mw-expanded-layout {
  background: #ffffff !important;
  color: #1b1d24 !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.10) !important;
  box-sizing: border-box !important;
  padding: 16px !important;
  overflow: visible !important;
}

.pdg-wrapper .pdg-grid .pdg-card.is-expanded > .mw-close,
.pdg-wrapper .pdg-grid .pdg-card.mw-expanded > .mw-close,
.pdg-grid .pdg-card.is-expanded > .mw-close,
.pdg-grid .pdg-card.mw-expanded > .mw-close {
  z-index: 8 !important;
}

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

.mw-price-panel .mw-price-amounts--discounted .mw-price-orig,
.mw-price-panel .mw-price-amounts--anonymous-discounted .mw-price-orig {
  display: block !important;
  margin: 0 !important;
  opacity: .75 !important;
  font-size: .92em !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: line-through !important;
}

.mw-price-panel .mw-price-amounts--discounted .mw-price-final,
.mw-price-panel .mw-price-amounts--anonymous-discounted .mw-price-final {
  display: block !important;
  font-size: 1.06em !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

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

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

.mw-actions .pdp-card-next-step-link,
.mw-actions .pdp-card-add-draft-to-basket {
  flex: 0 1 auto;
  min-height: var(--btn-h, 44px);
  max-width: min(260px, 100%);
  padding: 0.44rem 1rem;
  font-size: 0.76rem;
  line-height: 1.05;
  white-space: normal;
  text-align: center;
}

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

@media (max-width: 767px) {
  .mw-actions .pdp-drafting-wrapper--with-next {
    width: 100%;
    gap: 0.45rem;
  }

  .mw-actions .pdp-drafting-wrapper--with-next > .button,
  .mw-actions .pdp-drafting-wrapper--with-next > a.button,
  .mw-actions .pdp-card-next-step-link,
  .mw-actions .pdp-card-add-draft-to-basket {
    width: auto !important;
    max-width: 100%;
  }
}


/* mobile-gallery-fix-3105
 * Single/default-image galleries are display-only image blocks, not real
 * thumbnail galleries. Remove the reserved thumbnail column for 0/1 real image.
 */
.pdg-card[data-gallery-count="0"] .mw-gallery.mw-gallery--single,
.pdg-card[data-gallery-count="1"] .mw-gallery.mw-gallery--single,
.pdg-card .mw-gallery.mw-gallery--fallback,
.pdg-card .mw-gallery.mw-gallery--single:not(.mw-gallery--with-thumbs){
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  grid-template-columns:none !important;
  grid-template-areas:none !important;
}

.pdg-card[data-gallery-count="0"] .mw-thumbs,
.pdg-card[data-gallery-count="1"] .mw-thumbs,
.pdg-card .mw-gallery.mw-gallery--fallback .mw-thumbs,
.pdg-card .mw-gallery.mw-gallery--single:not(.mw-gallery--with-thumbs) .mw-thumbs{
  display:none !important;
}

.pdg-card[data-gallery-count="0"] .mw-gallery-main,
.pdg-card[data-gallery-count="1"] .mw-gallery-main,
.pdg-card .mw-gallery.mw-gallery--fallback .mw-gallery-main,
.pdg-card .mw-gallery.mw-gallery--single:not(.mw-gallery--with-thumbs) .mw-gallery-main{
  width:100% !important;
  max-width:100% !important;
  height:100% !important;
  max-height:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  grid-column:1 / -1 !important;
  grid-area:auto !important;
}

@media (max-width:900px){
  .pdg-card[data-gallery-count="0"] .mw-gallery-main,
  .pdg-card[data-gallery-count="1"] .mw-gallery-main,
  .pdg-card .mw-gallery.mw-gallery--fallback .mw-gallery-main,
  .pdg-card .mw-gallery.mw-gallery--single:not(.mw-gallery--with-thumbs) .mw-gallery-main{
    aspect-ratio:var(--gallery-ratio);
    height:auto !important;
  }
}