/* modules/custom/premade_page/css/premade_expand.css */
/*───────────────────────────*
 * Premade Page – Expanded + Modal UI
 * (PDG-compatible styles kept where shared)
 *───────────────────────*/

/* 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; }

/* Expanded height safety: if --mw-expanded-h is present, respect it and avoid 2-row forcing. */
.premade-grid .premade-card.mw-expanded,
.premade-grid .premade-card.is-expanded{
  height: var(--mw-expanded-h, auto);
  grid-row-end: auto !important;
}

/* pdp1601 safety: guard against stale tiny --mw-expanded-h / broken reopen states. */
.premade-grid .premade-card.mw-expanded,
.premade-grid .premade-card.is-expanded,
.pdg-grid .pdg-card.mw-expanded,
.pdg-grid .pdg-card.is-expanded{
  min-height: 220px;
}


/* 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{ 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;
  /* sağ kolona göre yükseklik eşleme */
  align-self:stretch;
  /* Tabs + gallery should fill the left column.
   * Centering here can make the desktop layout look "swapped" or clipped when
   * heights are locked.
   */
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:stretch;
  min-height:0; /* overflow/flex uyumu */
}
.mw-right{ grid-area:right; position:relative; min-height:0; }
.mw-row-summary{ grid-area:summary; padding:0; }
.mw-row-components{ grid-area:components; padding:0; }

/* Desktop hard override for tabbed expand.
 * Some global/theme CSS in production may ship `!important` grid rules that
 * accidentally force a stacked (mobile-like) layout on desktop. These selectors
 * + `!important` ensure the canonical two-column desktop layout.
 */
@media (min-width: 901px){
  .premade-card.mw-gallery-tabbed.mw-expanded .mw-expanded-layout,
  .premade-card.mw_gallery_tabbed.is-expanded .mw-expanded-layout,
  .premade-card.mw-gallery-tabbed.is-expanded .mw-expanded-layout{
    display:grid !important;
    grid-template-columns:minmax(0, 3fr) minmax(0, 2fr) !important;
    grid-template-areas:"left right" !important;
    grid-auto-flow:row !important;
    align-items:stretch !important;
    gap:18px !important;
  }
  .premade-card.mw-gallery-tabbed.mw-expanded .mw-left,
  .premade-card.mw-gallery-tabbed.is-expanded .mw-left{ grid-area:left !important; }
  .premade-card.mw-gallery-tabbed.mw-expanded .mw-right,
  .premade-card.mw-gallery-tabbed.is-expanded .mw-right{ grid-area:right !important; }
}

/*───────────────────────────*
 * TABS (Ticket: PREMADEHATA)
 * - Built by premade_expand_component.js
 * - Uses: .mw-tabs, .mw-tabs__list, .mw-tabs__tab, .mw-tabs__panels, .mw-tabs__panel
 *───────────────────────*/
.mw-tabs{
  width:100%;
  max-width:980px;
  margin:0 auto;
}

/* Ticket: generalcolorpremade (premade_page1701u)
 * Tabs colors are sourced from General Managing Details (node 168) via wrapper CSS variables
 * injected by PremadeGridBuilder.php.
 *
 * Variables (preferred):
 *   --mw-tabs-active-bg
 *   --mw-tabs-active-fg
 *   --mw-tabs-inactive-fg
 *   --mw-tabs-hover-bg
 *   --mw-tabs-border
 *   --mw-tabs-list-bg
 *
 * Legacy fallbacks (preserve old behavior if global theme is missing):
 *   --logo, --btn, --btnfont
 */
.mw-tabs__list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  align-items:center;
  padding:6px;
  border-radius:999px;

  /* Global theme (preferred) */
  background: var(--mw-tabs-list-bg, rgba(0,0,0,.03));

  /* Fallback then theme-aware border shadow */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mw-tabs-border, rgba(0,0,0,.06)) 35%, transparent);
}

.mw-tabs__tab{
  appearance:none;

  /* Border uses global theme if available */
  border:1px solid rgba(0,0,0,.12);
  border-color: var(--mw-tabs-border, rgba(0,0,0,.12));

  background:transparent;

  /* Inactive tab text color: global theme first, then legacy per-card --logo */
  color: var(--mw-tabs-inactive-fg, var(--logo,#111));

  border-radius:999px;
  padding:8px 12px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease, background-color .12s ease, box-shadow .12s ease, filter .12s ease, color .12s ease, border-color .12s ease;
}

/* Hover/focus styling (non-active only) */
.mw-tabs__tab:not(.is-active):hover,
.mw-tabs__tab:not(.is-active):focus-visible{
  background: var(--mw-tabs-hover-bg, rgba(0,0,0,.02));
  filter:brightness(1.02);
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}

.mw-tabs__tab:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(0,0,0,.10) inset;
}

.mw-tabs__tab.is-active{
  /* Active tab colors: global theme first, then legacy per-card --btn/--btnfont */
  background: var(--mw-tabs-active-bg, var(--btn,#eee));
  color: var(--mw-tabs-active-fg, var(--btnfont,#222));

  border-color: var(--mw-tabs-border, rgba(0,0,0,.10));
  box-shadow:0 1px 0 rgba(0,0,0,.08), inset 0 -1px 0 rgba(0,0,0,.08);
}

.mw-tabs__tab:focus-visible{
  /* Keyboard focus uses global border as the most consistent accent */
  outline:2px solid var(--mw-tabs-border, rgba(0,0,0,.55));
  outline-offset:2px;
}

.mw-tabs__panels{
  margin-top:12px;
}

.mw-tabs__panel{
  display:block;
  min-width:0;
}

/* JS sets [hidden] + .is-active; support both */
.mw-tabs__panel[hidden]{ display:none !important; }
.mw-tabs__panel.is-active{ display:block; }

.mw-empty-note{
  text-align:center;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,0,0,.02);
  border:1px dashed rgba(0,0,0,.18);
  color:#111;
  opacity:.85;
  max-width:860px;
  margin:0 auto;
}

/* Optional: component cards (if used by templates) */
.mw-component-card{
  appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(0,0,0,.02);
  border-radius:14px;
  padding:10px 12px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  text-align:left;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.mw-component-card:hover,
.mw-component-card:focus-visible{
  filter:brightness(1.01);
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.mw-component-card:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(0,0,0,.10) inset;
}
.mw-component-card:focus-visible{
  outline:2px solid rgba(0,0,0,.55);
  outline-offset:2px;
}

/* ─ Gallery (desktop) ─ */
.mw-gallery{
  /* sol alanı doldur ve içeriği ortala */
  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);
}

/* Görsel kutusu: yüksekliği doldur, oranı koru, taşma yok */
.mw-gallery-main{
  position:relative;
  border-radius:10px; overflow:hidden; background:#fff;

  height:100%;
  width:auto;           /* yüksekliğe göre genişle */
  max-width:100%;       /* kolonu taşma */
  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;

  /* make the button self-describing even if markup has no icon */
  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: düzeltmeler — Desktop gallery thumbs should be on the RIGHT side (not below) */
@media (min-width: 901px){
  .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;
    width:100%;
    height:100%;
    max-width:100%;
    max-height: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){
  /* Desktop (collapsed):
   * DO NOT lock height here.
   * Locking height + card aspect-ratio yields an intrinsic width (e.g. 600px),
   * which can overflow multi-column grids and make the grid look "bigger".
   */
  .premade-grid .premade-card:not(.mw-expand-x):not(.mw-expand-y):not(.mw-expanded):not(.is-expanded){
    height: auto;
  }

  /* Desktop: expanded card height is governed by JS-provided --mw-expanded-h (gallery/tabs baseline). */
  .premade-grid .premade-card.mw-expanded,
  .premade-grid .premade-card.is-expanded{
    grid-row-end: auto !important;
    height: var(--mw-expanded-h, auto);
  }

  /* Desktop: never allow mw-left (tabs/gallery) to remain hidden due to stale inline mobile state. */
  .premade-grid .premade-card.mw-expanded .mw-expanded-layout:not(.is-mobile) > section.mw-left{
    display: flex !important;
  }
  .premade-grid .premade-card.mw-expanded .mw-expanded-layout:not(.is-mobile) > section.mw-left .mw-tabs{
    width: 100%;
  }

  .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){
  /* Mobile: tabs should grow/shrink with active panel content (no fixed gallery baseline). */
  .premade-card .mw-tabs{ height: auto !important; }
  .premade-card .mw-tabs__panels{ height: auto !important; overflow: visible !important; }
  .premade-card .mw-tabs__panel{ height: auto !important; overflow: visible !important; }

  /* Mobile: let collapsed cards size naturally in 1-column layout. */
  .premade-grid .premade-card{ height: auto !important; }

  .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; }
}

/* Audio controls — harden hit areas & stacking to avoid desktop "overlap clicks" */
.mw-audio-controls{
  display:flex;
  gap:8px;
  margin:12px 0 8px;
  justify-content:center;

  position:relative;
  isolation:isolate;
}
.mw-audio-controls button{
  border-radius:18px;
  padding:6px 12px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  cursor:pointer;

  position:relative;
  z-index:1;
  min-width:92px;
  touch-action:manipulation;
}

/*────────── 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;

  /* Ticket: düzeltmeler — keep the price panel centered in its column */
  margin-left:auto;
  margin-right:auto;
  text-align:center;

  cursor:default; /* only pointer when .mw-open-special */
}
.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;
}
/* Fallback when color-mix is unsupported */
@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{ text-align:center; font-weight:600; margin:8px 0 4px; color:var(--logo,#111); }
.mw-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{ margin:0; padding:0; }
.mw-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{ 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; }

/*───────────────────────────*
 * Ticket: müzikbilgisi — Used in pre-made (mini cards)
 * - These elements are injected/moved into Summary tab by JS:
 *   .mw-premade-mini-list > .mw-premade-mini-cards > button.mw-premade-mini-card
 *───────────────────────*/
.mw-premade-mini-list{
  margin-top:12px;
}

/* Header style (when the title is the list header, not a card title) */
.mw-premade-mini-list > .mw-premade-mini-title{
  text-align:center;
  font-weight:700;
  margin:0 0 8px;
  color:var(--logo,#111);
}

/* Cards container */
.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;
  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;
}

/* Thumb/media (support both legacy + current JS markup) */
.mw-premade-mini-thumb,
.mw-premade-mini-media{
  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-thumb img,
.mw-premade-mini-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.mw-premade-mini-thumb--empty{
  background:rgba(0,0,0,.06);
}

/* Text wrapper + title (support both legacy + current JS markup) */
.mw-premade-mini-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.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;
}
/* Legacy: if a card title uses .mw-premade-mini-title inside the card */
.mw-premade-mini-card .mw-premade-mini-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;
}

/* Make the mini cards look good when Summary is centered (mobile) */
@media (max-width:767px){
  .mw-premade-mini-cards{
    grid-template-columns:1fr;
    max-width:520px;
  }
  .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;

  /* Ticket: düzeltmeler (Contents tab thumbs) */
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  text-align:left;
}
.mw-products-title{ margin:12px 0 6px; font-weight:600; color:var(--logo,#111); text-align:center; }

/* Ticket: düzeltmeler — Product thumbs + roles inside Contents tab list */
.mw-product-thumbs{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.mw-product-thumb{
  width:34px;
  height:34px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
}
.mw-product-thumb__img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
.mw-product-name{
  display:inline-block;
  max-width: min(620px, 70vw);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:middle;
}
/* Role label inside popup (optional) */
.mw-product-role{
  display:inline-block;
  font-size:.86em;
  opacity:.85;
  margin-left:.35rem;
}



/* Ticket: premadecontentlist (premade_page1701u)
 * Contents tab product list:
 *  - Stretch rows/buttons to the full available width (no centered "short" items).
 *  - Keep Contents text on the same readable source as Summary.
 *
 * Important: do not source Contents text from --mw-tabs-inactive-fg.
 * That variable belongs to tab buttons and can come from the global tab palette;
 * Summary text is intentionally plain readable body text.
 */
.premade-card .mw-tabs__panel[data-mw-tab-panel="contents"] .mw-products{
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:stretch;
  justify-content:flex-start;
  gap:10px;
  width:100%;
}

.premade-card .mw-tabs__panel[data-mw-tab-panel="contents"] .mw-products .mw-product{
  display:block;
  width:100%;
}

.premade-card .mw-tabs__panel[data-mw-tab-panel="contents"] .mw-products .mw-product:not(:last-child)::after{
  content:none;
  margin:0;
}

.premade-card .mw-tabs__panel[data-mw-tab-panel="contents"] .mw-products-title{
  color:#000 !important;
}

.premade-card .mw-tabs__panel[data-mw-tab-panel="contents"] .mw-open-product{
  width:100%;
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  text-align:left;

  /* keep a row-like hit area without changing the legacy "link" appearance too much */
  padding:8px 10px;
  border-radius:12px;
  box-sizing:border-box;

  /* Same readable text source as Summary; do not inherit tab-button palette. */
  color:#000 !important;

  /* Cancel underline on the full row; underline only the name for cleaner UI */
  text-decoration:none;
}

.premade-card .mw-tabs__panel[data-mw-tab-panel="contents"] .mw-product-name{
  flex:1 1 auto;
  min-width:0;

  max-width:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  text-decoration:underline;
  text-decoration-color: currentColor;
}

.premade-card .mw-tabs__panel[data-mw-tab-panel="contents"] .mw-product-role,
.premade-card .mw-tabs__panel[data-mw-tab-panel="contents"] .mw-product-type,
.premade-card .mw-tabs__panel[data-mw-tab-panel="contents"] .mw-product-code{
  color:#000 !important;
}

.premade-card .mw-tabs__panel[data-mw-tab-panel="contents"] .mw-open-product:hover,
.premade-card .mw-tabs__panel[data-mw-tab-panel="contents"] .mw-open-product:focus-visible{
  background: var(--mw-tabs-hover-bg, rgba(0,0,0,.02));
  outline:2px solid color-mix(in srgb, var(--mw-tabs-border, rgba(0,0,0,.35)) 55%, transparent);
  outline-offset:2px;
}
/* Popup CTA to personalization */
.mw-product-popup__cta{
  margin-top:12px;
  display:flex;
  justify-content:center;
}
.mw-product-popup__cta a{
  appearance:none;
  border:none;
  border-radius:999px;
  padding:8px 14px;
  line-height:1;
  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);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
.mw-product-popup__cta a:hover{ filter:brightness(1.03); }

/*───────────────────────────*
 * MODAL (Legacy + New Shell Compatibility)
 * - Legacy markup (older JS): .mw-modal as overlay + .mw-modal-content
 * - New markup (current): #mw-modal-shell > .mw-modal-overlay + .mw-modal > .mw-modal-body
 *───────────────────────*/

/* Legacy modal overlay (kept for backward compatibility) */
.mw-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center; padding:16px; z-index:1000;
}
.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;
}
.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;

  /* legacy JS may create an empty <button>, so render a visible glyph */
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.mw-modal-close::before{ content:"×"; }
.mw-modal-body{ padding:18px; }
body.mw-scroll-lock{ overflow:hidden!important; }

/*───────────────────────────*
 * New modal shell (current JS) — FIX: support BOTH class and id
 * Root cause: shell often exists as #mw-modal-shell (id) without .mw-modal-shell class,
 * so old .mw-modal-shell display rules were not applied (popups/zoom "didn't show").
 *───────────────────────*/
.mw-modal-shell,
#mw-modal-shell{
  position:fixed;
  inset:0;
  z-index:3000;            /* above guard + any card stacking contexts */
  display:none;            /* shown only when body has .mw-modal-open */
  pointer-events:none;     /* enabled when open */
}

/* Show when open (support both selector styles) */
body.mw-modal-open .mw-modal-shell,
body.mw-modal-open #mw-modal-shell{
  display:block;
  pointer-events:auto;
}

/* Lock scroll on open (new) */
body.mw-modal-open{ overflow:hidden!important; }

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

/* Override legacy .mw-modal overlay rules when inside the shell */
#mw-modal-shell .mw-modal,
.mw-modal-shell .mw-modal{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);

  inset:auto;               /* override legacy inset:0 */
  background:#fff;          /* override legacy dim background */
  padding:0;                /* legacy has padding:16px */
  display:block;            /* legacy display:flex */
  align-items:initial;
  justify-content:initial;

  border-radius:12px;
  width:min(92vw,680px);
  max-height:90vh;
  overflow:auto;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  z-index:3001;
}

/* Close button inside shell */
#mw-modal-shell .mw-modal-close,
.mw-modal-shell .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;
  z-index:3002;

  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
  font-size:18px;
  line-height:1;
}
/* Keep a visible glyph even if button is empty */
#mw-modal-shell .mw-modal-close::before,
.mw-modal-shell .mw-modal-close::before{ content:"×"; }

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

@media (max-width:767px){
  #mw-modal-shell .mw-modal,
  .mw-modal-shell .mw-modal{
    width:min(94vw,680px);
  }
}

/* Modal content layout */
.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 (legacy overlay; kept) */
.mw-zoom{
  position:fixed; inset:0; z-index:4000;
  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;

  /* legacy JS may create an empty <button>, so render a visible glyph */
  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:"×"; }

/* Zoom inside new modal shell (current JS) */
#mw-modal-shell .mw-zoom,
.mw-modal-shell .mw-zoom{
  position:relative;
  inset:auto;
  z-index:4001;
  background:transparent;
  padding:0;
}
#mw-modal-shell .mw-zoom img,
.mw-modal-shell .mw-zoom img{
  max-width:95vw;
  max-height:80vh;
}
/* If the shell uses internal close, hide zoom close to avoid double-X */
#mw-modal-shell .mw-zoom .mw-zoom-close,
.mw-modal-shell .mw-zoom .mw-zoom-close{ display:none !important; }

/*───────────────────────────*
 * FIX: Zoom content rendered INSIDE modal body must not behave like fixed overlay.
 * This prevents "top-left anchored" / double-overlay issues when markup is:
 *   .mw-modal > .mw-modal-body > .mw-zoom > img
 *───────────────────────*/
.mw-modal .mw-modal-body .mw-zoom{
  position:relative !important;
  inset:auto !important;
  z-index:auto !important;
  background:transparent !important;
  padding:0 !important;

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

  /* keep the image centered even when body scrolls */
  min-height:min(70vh, 720px);
}

.mw-modal .mw-modal-body .mw-zoom img{
  max-width:95vw;
  max-height:80vh;
  display:block;
  object-fit:contain;
}

/* Avoid duplicate close buttons if any legacy zoom-close exists in-body */
.mw-modal .mw-modal-body .mw-zoom .mw-zoom-close{ display:none !important; }

/* 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){
  .mw-expanded-layout, .mw-expanded-layout.is-mobile{ display:block; }

  /* Mobile: allow tabs and panels to grow to content (disable fixed baseline). */
  .premade-card .mw-tabs{ height:auto !important; }
  .premade-card .mw-tabs__panels{ height:auto !important; overflow:visible !important; }
  .premade-card .mw-tabs__panel{ height:auto !important; overflow:visible !important; }

  /* Mobile: expanded card height should follow content, not a fixed --mw-expanded-h. */
  .premade-grid .premade-card.mw-expanded,
  .premade-grid .premade-card.is-expanded{
    height:auto !important;
  }
  .premade-grid .premade-card.mw-expand-y,
  .pdg-grid .pdg-card.mw-expand-y{ grid-row:auto !important; }

  .mw-m-row1{ display:block; margin-bottom:12px; }
  .mw-m-row1 .mw-alt-title{ margin-top:8px; text-align:center; color:#000; }

  .mw-m-row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:8px 0 12px; }

  .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;
  }

  /* Hide empty mobile rows (tabs may replace row4 usage) */
  .mw-m-row3:empty,
  .mw-m-row4:empty{ display:none; }

  .mw-m-row3{ margin-top:8px; }
  .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; }

  /* 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){
  /* Desktop safety net: ensure the left column is visible so tabs/galleries don't collapse. */
  .premade-grid .premade-card.mw-expanded .mw-expanded-layout:not(.is-mobile) > section.mw-left{
    display:flex !important;
  }
  .premade-grid .premade-card.mw-expanded .mw-expanded-layout:not(.is-mobile) > section.mw-left .mw-tabs{
    width:100%;
  }

  .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 */
.premade-grid .premade-card .mw-close,
.pdg-grid .pdg-card .mw-close{
  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-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; }
}

/*───────────────────────────*
 * TABS — premadegalerytab (Gallery tab)
 * - Gallery is moved into tabs on expand.
 * - We mark the card with .mw-gallery-tabbed once the move happens.
 * - This section stabilizes desktop + mobile layout so we do not keep an empty left column.
 *───────────────────────*/

/* When gallery is tabbed, collapse the left column and let right span full width */
.premade-card.mw-gallery-tabbed .mw-expanded-layout,
.pdg-card.mw-gallery-tabbed .mw-expanded-layout{
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "right"
    "summary"
    "components" !important;
}

/* Hide the now-empty left container (it may still exist structurally) */
.premade-card.mw-gallery-tabbed .mw-left,
.pdg-card.mw-gallery-tabbed .mw-left{
  display:none !important;
}

/* Gallery inside tabs should not try to stretch to a non-existing column height */
.mw-tabs__panel--gallery .mw-gallery{
  height:auto;
}

/* Other markets (field_outsource_market) — domain buttons */
.mw-outsource-markets{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:center;
  padding:4px 0;
}
.mw-market-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(0,0,0,.04);
  color:#000;
  text-decoration:none;
  font-weight:600;
  line-height:1.1;
  max-width:100%;
  overflow-wrap:anywhere;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.mw-market-btn:hover,
.mw-market-btn:focus-visible{
  background:rgba(0,0,0,.06);
  box-shadow:0 2px 0 rgba(0,0,0,.08);
  transform:translateY(-1px);
}
.mw-market-btn:active{
  transform:translateY(0);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}

/* Mobile scaffold: when gallery is tabbed, collapse the two-column row into single column */
@media (max-width:767px){
  .premade-card.mw-gallery-tabbed .mw-expanded-layout.is-mobile .mw-m-row2,
  .pdg-card.mw-gallery-tabbed .mw-expanded-layout.is-mobile .mw-m-row2{
    grid-template-columns:1fr !important;
  }
  .premade-card.mw-gallery-tabbed .mw-expanded-layout.is-mobile .mw-m-col1,
  .pdg-card.mw-gallery-tabbed .mw-expanded-layout.is-mobile .mw-m-col1{
    display:none !important;
  }
  .premade-card.mw-gallery-tabbed .mw-expanded-layout.is-mobile .mw-m-col2,
  .pdg-card.mw-gallery-tabbed .mw-expanded-layout.is-mobile .mw-m-col2{
    width:100%;
  }
}

/* premadetab0401 — layout + tabs height stability + mobile CTA row
   - Tabs content pinned to gallery height; tab switching doesn't change layout height.
   - Mobile: keep .mw-left out of col1; row1 hosts .mw-tabs; col1 shows price; col2 shows CTAs side-by-side.
*/

.premade-card .mw-expanded-layout.is-mobile section.mw-left{
  display:none !important; /* tabs are moved into .mw-m-row1 on mobile */
}

/* Mobile: row1 is the single host for tabs (which contains gallery panel). */
.premade-card .mw-expanded-layout.is-mobile .mw-m-row1{
  display:block !important;
  width:100%;
}

/* Mobile: keep columns predictable */
.premade-card .mw-expanded-layout.is-mobile .mw-m-col1{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.premade-card .mw-expanded-layout.is-mobile .mw-m-col2{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

/* Mobile: CTAs side-by-side for premade (Add to basket + Customise) */
.premade-card .mw-expanded-layout.is-mobile .mw-actions{
  display:flex !important;
  flex-direction:row !important;
  gap:8px !important;
  width:100%;
  justify-content:stretch;
  justify-items:stretch;
}
.premade-card .mw-expanded-layout.is-mobile .mw-actions > *{
  flex:1 1 0;
  width:100%;
}

/* Tabs: lock panels height to gallery height using --mw-tabs-h.
   JS sets: tabs.style.setProperty('--mw-tabs-h', '<px>'); tabs.setAttribute('data-mw-tabs-h','<px>');
*/

.premade-card .mw-tabs--fixed{
  /* Tabs total height = tabbar + panels (JS also sets inline height; this is a CSS fallback). */
  height: calc(var(--mw-tabbar-h, 44px) + var(--mw-tabs-h, 420px));
}
.premade-card .mw-tabs[data-mw-tabs-h] .mw-tabs__panels{
  height: var(--mw-tabs-h);
  overflow:hidden;
}
.premade-card .mw-tabs[data-mw-tabs-h] .mw-tabs__panel{
  height:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.premade-card .mw-tabs[data-mw-tabs-h] .mw-tabs__panel[data-mw-tab-panel="gallery"]{
  overflow:hidden;
}

/* Contents tab: compact list of component product cards */
.premade-card .mw-products-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.premade-card .mw-product-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  background:rgba(255,255,255,.65);
}
.premade-card .mw-product-row .mw-product-label{
  font-weight:600;
  opacity:.9;
  white-space:nowrap;
}
.premade-card .mw-product-row .mw-product-title{
  text-align:right;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:60%;
}


/* premade1301: tabs fixed-height contract — allow JS to stabilize heights on mobile */
.mw-expanded-layout.is-mobile .mw-tabs.mw-tabs--fixed {
  height: var(--mw-tabs-h, auto);
}
.mw-expanded-layout.is-mobile .mw-tabs.mw-tabs--fixed .mw-panels,
.mw-expanded-layout.is-mobile .mw-tabs.mw-tabs--fixed .mw-panels-wrap {
  height: var(--mw-tabs-panels-h, var(--mw-tabs-fixed-h, auto));
  overflow: hidden;
}

/* premade1301: price chip / panel hardening (your live DOM uses .mw-price-chip + .mw-price-panel) */
.mw-expanded-layout.is-mobile .mw-price-chip,
.mw-expanded-layout.is-mobile .mw-price-panel {
  max-width: 100%;
  white-space: normal !important;
  overflow: hidden;
}
.mw-expanded-layout.is-mobile .mw-price-panel .mw-price-amounts {
  max-width: 100%;
  white-space: normal;
}

/* premadeprice — center price panel in right column (v1.0)
 * Goal: The price chip/panel must be horizontally centered within the mw-right column,
 * even if markup is injected with inline `display:inline-block`.
 */
.premade-card .mw-expanded-layout section.mw-right .mw-price-chip.mw-price-panel,
.premade-card .mw-expanded-layout section.mw-right .mw-price-panel {
  /* Override inline display so auto-margins can center reliably */
  display: table !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* Gentle vertical rhythm; keep panel visually separated from audio + actions */
  margin-top: 0.6rem !important;
  margin-bottom: 0.6rem !important;
  max-width: 100% !important;
  text-align: center;
}

/* Ensure the inner price stack remains centered (do not center entire mw-right column) */
.premade-card .mw-expanded-layout section.mw-right .mw-price-panel .mw-price-block,
.premade-card .mw-expanded-layout section.mw-right .mw-price-panel .mw-price-amounts {
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}

/* premadeprice — hide legacy duplicate discount line (keep only .mw-rate-chip) */
.premade-card .mw-expanded-layout .mw-right .mw-price-panel .mw-price-rate,
.premade-card .mw-expanded-layout .mw-right .mw-price-chip .mw-price-rate {
  display: none !important;
}

/* Ticket: premade-right-title-tabs-2804
 * The tab button row is intentionally hosted under the premade title in .mw-right,
 * while the tab panels remain in the existing responsive panel host.
 */
.mw-right > .mw-tabs__list--right-title{
  width:min(100%, 560px);
  margin:0 auto 10px;
  box-sizing:border-box;

  /* The holder row under the title must not create its own pill/background.
   * Only individual .mw-tabs__tab buttons keep their visual treatment.
   */
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}

/* Ticket: premade-right-title-tabs-button-bg-3004
 * The tab holder row is transparent, but each tab button must still have
 * its own visible background in normal, hover/focus, pressed, and active states.
 */
.mw-right > .mw-tabs__list--right-title .mw-tabs__tab{
  background: color-mix(in srgb, var(--mw-tabs-active-bg, var(--btn,#eee)) 16%, #fff) !important;
  background: var(--mw-tabs-list-bg, color-mix(in srgb, var(--mw-tabs-active-bg, var(--btn,#eee)) 16%, #fff)) !important;
}

.mw-right > .mw-tabs__list--right-title .mw-tabs__tab:not(.is-active):hover,
.mw-right > .mw-tabs__list--right-title .mw-tabs__tab:not(.is-active):focus-visible{
  background: var(--mw-tabs-hover-bg, var(--mw-tabs-active-bg, var(--btn,#eee))) !important;
}

.mw-right > .mw-tabs__list--right-title .mw-tabs__tab:active{
  background: var(--mw-tabs-active-bg, var(--btn,#eee)) !important;
}

.mw-right > .mw-tabs__list--right-title .mw-tabs__tab.is-active{
  background: var(--mw-tabs-active-bg, var(--btn,#eee)) !important;
}

@media (min-width:901px){
  .premade-card.mw-gallery-tabbed .mw-expanded-layout,
  .pdg-card.mw-gallery-tabbed .mw-expanded-layout{
    display:grid !important;
    grid-template-columns:minmax(0, 3fr) minmax(0, 2fr) !important;
    grid-template-areas:"left right" !important;
    grid-auto-flow:row !important;
    align-items:stretch !important;
    gap:18px !important;
  }

  .premade-card.mw-gallery-tabbed .mw-left,
  .pdg-card.mw-gallery-tabbed .mw-left{
    display:flex !important;
    grid-area:left !important;
  }

  .premade-card.mw-gallery-tabbed .mw-right,
  .pdg-card.mw-gallery-tabbed .mw-right{
    grid-area:right !important;
  }
}

/* Ticket: premade-contents-thumbs-2804
 * Contents tab thumbnails are restored to 40px after the 20px test proved too small.
 */
.premade-card .mw-tabs__panel[data-mw-tab-panel="contents"] .mw-product-thumbs .mw-product-thumb,
.premade-card .mw-tabs__panel[data-mw-tab-panel="contents"] .mw-product-thumbs .pb-basket-item-info__thumb{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  border-radius:5px !important;
}

.premade-card .mw-tabs__panel[data-mw-tab-panel="contents"] .mw-product-thumbs .mw-product-thumb__img,
.premade-card .mw-tabs__panel[data-mw-tab-panel="contents"] .mw-product-thumbs .pb-basket-item-info__img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}

/* premade-gallery-height-fix-v3
 * Fixed-height tabs must keep the Gallery panel non-scrollable. Only text/list
 * panels may scroll internally. This prevents the main image from shifting when
 * the panel height is locked by JS and the gallery contains padding/thumbs.
 */
.premade-card .mw-tabs,
.premade-card .mw-tabs__panels,
.premade-card .mw-tabs__panel,
.premade-card .mw-gallery,
.premade-card .mw-gallery-main,
.premade-card .mw-thumbs,
.pdg-card .mw-tabs,
.pdg-card .mw-tabs__panels,
.pdg-card .mw-tabs__panel,
.pdg-card .mw-gallery,
.pdg-card .mw-gallery-main,
.pdg-card .mw-thumbs{
  box-sizing:border-box;
  min-height:0;
}

.premade-card .mw-tabs[data-mw-tabs-h] .mw-tabs__panel:not([data-mw-tab-panel="gallery"]),
.pdg-card .mw-tabs[data-mw-tabs-h] .mw-tabs__panel:not([data-mw-tab-panel="gallery"]){
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.premade-card .mw-tabs[data-mw-tabs-h] .mw-tabs__panel[data-mw-tab-panel="gallery"],
.pdg-card .mw-tabs[data-mw-tabs-h] .mw-tabs__panel[data-mw-tab-panel="gallery"]{
  overflow:hidden !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:auto;
}

.premade-card .mw-tabs[data-mw-tabs-h] .mw-tabs__panel[data-mw-tab-panel="gallery"] .mw-gallery,
.pdg-card .mw-tabs[data-mw-tabs-h] .mw-tabs__panel[data-mw-tab-panel="gallery"] .mw-gallery{
  height:100% !important;
  min-height:0 !important;
  max-height:100%;
  overflow:hidden;
}

.premade-card .mw-tabs[data-mw-tabs-h] .mw-tabs__panel[data-mw-tab-panel="gallery"] .mw-gallery-main,
.pdg-card .mw-tabs[data-mw-tabs-h] .mw-tabs__panel[data-mw-tab-panel="gallery"] .mw-gallery-main{
  min-height:0 !important;
  max-height:100%;
  overflow:hidden;
}

.premade-card .mw-tabs[data-mw-tabs-h] .mw-tabs__panel[data-mw-tab-panel="gallery"] .mw-gallery-main .mw-main-img,
.pdg-card .mw-tabs[data-mw-tabs-h] .mw-tabs__panel[data-mw-tab-panel="gallery"] .mw-gallery-main .mw-main-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.premade-card .mw-tabs[data-mw-tabs-h] .mw-tabs__panel[data-mw-tab-panel="gallery"] .mw-thumbs,
.pdg-card .mw-tabs[data-mw-tabs-h] .mw-tabs__panel[data-mw-tab-panel="gallery"] .mw-thumbs{
  min-height:0;
  max-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}


/* mobile-gallery-fix-3105
 * Single/fallback galleries are not real galleries. They must not reserve the
 * thumbnail strip/column in desktop-tabbed or mobile-tabbed expanded layouts.
 */
.premade-card[data-gallery-count="0"] .mw-gallery.mw-gallery--single,
.premade-card[data-gallery-count="1"] .mw-gallery.mw-gallery--single,
.premade-card .mw-gallery.mw-gallery--fallback,
.premade-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;
}

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

.premade-card[data-gallery-count="0"] .mw-gallery-main,
.premade-card[data-gallery-count="1"] .mw-gallery-main,
.premade-card .mw-gallery.mw-gallery--fallback .mw-gallery-main,
.premade-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){
  .premade-card[data-gallery-count="0"] .mw-gallery-main,
  .premade-card[data-gallery-count="1"] .mw-gallery-main,
  .premade-card .mw-gallery.mw-gallery--fallback .mw-gallery-main,
  .premade-card .mw-gallery.mw-gallery--single:not(.mw-gallery--with-thumbs) .mw-gallery-main{
    aspect-ratio:var(--gallery-ratio);
    height:auto !important;
  }
}