/*──────────────────────────

  Mechawork  Premade Product Grid

  v3.5  hover'da küçük buton + responsive gutter

───────────────────────*/



/* ========== GRID ========== */

.premade-grid{

  /* responsive gutter & page padding */

  --gutter: clamp(12px, 2.6vw, 32px);

  --page-pad: clamp(8px, 4vw, 56px);



  display: grid;

  gap: var(--gutter);

  grid-template-columns: repeat(3, minmax(0, 1fr));



  /* önce yan boşluklar küçülsün */

  max-width: 1200px;

  width: calc(100% - var(--page-pad) * 2);

  margin: 2rem auto 4rem;

}

@media (max-width: 1024px){

  .premade-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 768px){

  .premade-grid{ margin: 1.5rem auto 3rem; }

}



/* ========== CARD ========== */

.premade-card{

  position: relative;

  aspect-ratio: 4/3;

  border: 2px solid var(--frame,#ddd);

  border-radius: 18px;

  background: #fff;

  color: var(--fontColor,#111);

  box-shadow: 0 4px 6px rgba(0,0,0,.14);

  overflow: hidden;

  transition: transform .18s ease, border .18s ease;

}



/* Expanded cards must grow with content; remove the fixed aspect ratio clamp. */
.premade-card.mw-expanded,
.premade-card.is-expanded{
  aspect-ratio: auto;
}
.premade-card:hover{ transform: translateY(-4px); }
.premade-card.mw-auto-hover{ transform: translateY(-4px); }



/* IMAGE AREA (mutlaka tek katman) */

.premade-card .card-image{ position: absolute; inset: 0; overflow: hidden; }



/* Drupal sarmalayıcların sabitle */

.premade-card .card-image .field,

.premade-card .card-image .field__items{ position: relative; height: 100%; }



/* Grsel katmanlar cross-fade */

.premade-card .card-image .field__item{

  position: absolute; inset: 0;

  opacity: 0; transition: opacity .35s ease;

}

.premade-card .card-image .field__item:nth-child(1){ opacity: 1; }

.premade-card[data-has-real-gallery="1"]:hover .card-image .field__item:nth-child(1){ opacity: 0; }

.premade-card[data-has-real-gallery="1"]:hover .card-image .field__item:nth-child(2){ opacity: 1; }
.premade-card[data-has-real-gallery="1"].mw-auto-hover .card-image .field__item:nth-child(1){ opacity: 0; }
.premade-card[data-has-real-gallery="1"].mw-auto-hover .card-image .field__item:nth-child(2){ opacity: 1; }



/* Görsel */

.premade-card .card-image img{

  display: block !important;

  width: 100%; height: 100%;

  object-fit: cover;

}



/* SPEAKER (hover’da görünür) */

.premade-card .speaker{

  position: absolute; top: 50%; left: 50%;

  transform: translate(-50%,-50%);

  font-size: 2rem; color: #fff;

  text-shadow: 0 2px 6px rgba(0,0,0,.35);

  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 22;

}

.premade-card.is-playing .speaker,

.premade-card:hover .speaker{ opacity: 1; }



/* OVERLAY (balık + marquee + butonlar) */

.premade-card .card-body{

  position: absolute; inset: 0; z-index: 15;

  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;

  padding: 14px; color: #fff;

  background: linear-gradient(to top, rgba(0,0,0,.55) 32%, rgba(0,0,0,0) 65%);

  opacity: 0; transform: translateY(8px);

  transition: opacity .22s ease, transform .22s ease;

  pointer-events: none;

}

.premade-card:hover .card-body,

.premade-card.mw-auto-hover .card-body,

.premade-card:focus-within .card-body{ opacity: 1; transform: translateY(0); pointer-events: auto; }



.premade-card .card-title{ margin:.5rem 0 .25rem; text-align:center; text-shadow:0 1px 3px rgba(0,0,0,.35); }

.premade-card .card-title strong{ font-weight:800; }



/* ==== HOVER BUTONLARI (collapsed katman) ==== */

.premade-card .card-actions,

.premade-card .buttons{

  display: flex;

  gap: clamp(6px, 1.6vw, 12px);          /* aradaki boşluk ekranla küçülür */

  justify-content: center;

  margin-top: .5rem;

}

.premade-card .card-actions .button,

.premade-card .buttons .button,

.premade-card .card-actions .btn-add,

.premade-card .card-actions .btn-cust{

  height: clamp(34px, 3.4vh, 40px);      /* daha küçk zemin */

  padding: 0 clamp(10px, 1.8vw, 14px);   /* zemin daralt */

  border-radius: 18px;                   /* oval ama daha küçük */

  font: 700 .93rem/1 var(--mw-font, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);

  display: inline-flex; align-items: center; justify-content: center;



  background: var(--mw-tabs-active-bg, var(--btn,#4d8cf5));

  color: var(--mw-tabs-active-fg, var(--btnfont,#fff));

  border: 1px solid rgba(0,0,0,.12);

  box-shadow: 0 1px 3px rgba(0,0,0,.18);

  text-decoration: none;

  transition: background .15s ease, color .15s ease, transform .1s ease;

}

.premade-card .card-actions .button:hover,

.premade-card .buttons .button:hover{ background: var(--mw-tabs-hover-bg, var(--hover,#3d7ae0)); }

.premade-card .card-actions .button:active,

.premade-card .buttons .button:active{ transform: translateY(1px); }



/* PRICE balonu – her zaman görünür (chip modunda gizlenecek) */

.premade-card .card-price{

  position: absolute; top: 14px; right: 14px; z-index: 30;

  background: var(--bgTop,#fff); color: var(--logo,#333);

  border-radius: 999px; padding: .34em 1.07em; font: 700 1.07rem/1 sans-serif; white-space: nowrap;

  box-shadow: 0 2px 8px rgba(0,0,0,.10);

}

/* Eski-yeni fiyat küçük stiller */

.card-price .price-old{ text-decoration: line-through; opacity:.75; font-size:.9em; margin-right:.35rem; }

.card-price .price-new{ font-weight: 700; }



/* BADGE / STAR – her zaman üstte */

.premade-card .status-label,

.premade-card .status-star{

  position: absolute; top: 14px; left: 14px; z-index: 30;

  display: inline-block; border-radius: 999px; font: 700 1.07rem/1 sans-serif; white-space: nowrap;

  box-shadow: 0 2px 8px rgba(0,0,0,.10); pointer-events: none;

}

.premade-card .status-label{

  background: var(--badgeBg,var(--bgTop,#fff));

  color: var(--badgeColor,var(--logo,#333)); padding: .34em 1.07em;

}

.premade-card .status-star{

  background: transparent !important; color: var(--starColor,var(--frame,#caa75c)) !important;

  box-shadow: none; font-size: 1.33rem; padding: .23em .95em; letter-spacing: .06em;

}



/* CHIP (indirim) – sa üstte; hover’da gizle */

.mw-chip.mw-open-special{ cursor:pointer; }

.premade-card .card-image .mw-chip{

  position: absolute; top: .5rem; right: .5rem; z-index: 30;

  display: inline-block; padding: 4px 10px; border-radius: 16px; font-weight: 700; line-height: 1;

  background: #111; color: #fff; transition: opacity .15s ease, transform .15s ease, visibility .15s;

  opacity: 0; visibility: hidden; pointer-events: none;

}

/* İndirimli kartlarda çip açık… */

.premade-card.has-discount .card-image .mw-chip{

  opacity: 1; visibility: visible; pointer-events: auto; transform: none;

}

/* …ama hover’da overlay ile çakışmaması için gizle */

.premade-card.has-discount:hover .card-image .mw-chip,

.premade-card.has-discount.mw-auto-hover .card-image .mw-chip{

  opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.98);

}



/* Kart gövdesindeki CHIP sürümünü kapat */

.premade-card .card-price[data-state="chip"]{ display: none !important; }



/* Drupal label gizle */

.premade-card .field--name-field-pre-made-shop-image .field__label{ display: none !important; }



/* ========== REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce){

  .premade-card .music-marquee__track{ animation: none !important; transform: translateX(0); }

}



/* ===================================================== */

/* Aşağdakiler EXPANDED görünüm ve modal stilleri       */

/* (daha önceki v3.4 ile aynı – hover butonları etkilenmez) */

/* ===================================================== */



/* Expanded: kart overlay'lerini gizle */

.premade-grid .premade-card.mw-expanded .card-body,

.premade-grid .premade-card.mw-expanded .speaker,

.premade-grid .premade-card.mw-expanded .music-marquee{ display:none!important; }

.premade-grid .premade-card.mw-expanded .card-image{

  display:none!important; opacity:0!important; pointer-events:none!important;

}



/* Expanded content container */

.premade-grid .premade-card .mw-expanded-content{

  display:none; padding:16px; position:relative; z-index:2;

}

.premade-grid .premade-card.mw-expanded .mw-expanded-content{ display:block; }



/* Desktop expanded layout */

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

}

.mw-left{ grid-area:left; }

.mw-right{ grid-area:right; position:relative; }

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

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



/* ─ Gallery ─ */

.mw-gallery{

  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-main{ position:relative; border-radius:10px; overflow:hidden; background:#fff; aspect-ratio:5/3; }

.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 var(--mw-tabs-border, rgba(0,0,0,.15)); box-shadow:0 2px 8px rgba(0,0,0,.2); cursor:pointer;

}

.mw-thumbs{ display:grid; grid-template-columns:repeat(auto-fill, 68px); gap:8px; margin-top:10px; min-height:68px; }

.mw-thumb{

  width:68px; height:68px;

  border: 1px solid var(--mw-tabs-border, rgba(0,0,0,.15)); border-radius:8px;

  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:6px; }

.mw-thumb.is-active{ outline:2px solid rgba(0,0,0,.5); }



/*  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:var(--logo,#111); 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; }



/*  Music box ─ */

@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 var(--mw-tabs-border, 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; }



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

}



.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 var(--mw-tabs-border, 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;

}



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

.mw-actions .mw-add-to-basket,.mw-actions .mw-customize{

  border-radius:22px; padding:0 14px; height:var(--btn-h,44px);

  border: 1px solid var(--mw-tabs-border, rgba(0,0,0,.15)); background:#fff; cursor:pointer;

  display:grid; place-items:center; text-align:center;

}



/* Summary */

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



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



/* ─ Modal ─ */

.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,.06); border: 1px solid var(--mw-tabs-border, rgba(0,0,0,.15)); cursor:pointer;

}

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

body.mw-scroll-lock{ overflow:hidden!important; }



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

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

}



/* 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{ display:none!important; opacity:0!important; }



/* Hover kill-switch (JS .mw-no-hover) */

@media (max-width:767px){

  .premade-card .buttons{ display:none!important; }

  html.mw-no-hover .premade-card:not(.mw-expanded) .buttons,

  html.mw-no-hover .premade-card:not(.mw-expanded):hover .buttons,

  html.mw-no-hover .premade-card:not(.mw-expanded):hover .music-marquee,

  html.mw-no-hover .premade-card:not(.mw-expanded):hover .speaker,

  html.mw-no-hover .premade-card:not(.mw-expanded):hover .card-overlay{

    display:none!important; opacity:0!important; pointer-events:none!important;

  }

}



/* ===== DESKTOP (≥768px) – expanded rails ===== */

@media (min-width:768px){

  .mw-expanded-layout:not(.is-mobile) .mw-right{ --btn-h:44px; --rail:480px; }



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

  }

  .mw-expanded-layout:not(.is-mobile) .mw-right .mw-actions > *{ width:100%; }



  .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  renk mantığı ==== */

.premade-card[data-bestseller="1"]{

  border-color: var(--gear, var(--frame,#D5A856)) !important;

  box-shadow: 0 0 0 2px var(--gear, var(--frame,#D5A856)) inset !important;

}

.premade-card[data-star="1"]{

  border-color: var(--frame,#D5A856) !important;

  box-shadow: 0 0 0 2px var(--frame,#D5A856) inset !important;

}

.premade-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{

  background: var(--gear,#D9782a) !important; color:#fff !important; border-color:transparent!important;

}

.premade-card[data-star="1"] .mw-star-only{ color: var(--frame,#D5A856) !important; }



/* Varsayılan panel tonu */

.premade-card:not([data-bestseller="1"]):not([data-star="1"]) .mw-price-panel{

  background: var(--btn,#eee) !important; color: var(--btnfont,#222) !important;

}



/* Summary label gizleme */

.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{

  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{ 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{ transition:none!important; }

}



/* Mobile collapsed: kill hover UI entirely */

@media (max-width:767px){

  html.mw-no-hover .premade-card:not(.mw-expanded) .card-body{ display:none !important; }

  html.mw-no-hover .premade-card:not(.mw-expanded) .buttons,

  html.mw-no-hover .premade-card:not(.mw-expanded) .music-marquee,

  html.mw-no-hover .premade-card:not(.mw-expanded) .speaker,

  html.mw-no-hover .premade-card:not(.mw-expanded) .card-actions,

  html.mw-no-hover .premade-card:not(.mw-expanded) .card-overlay{

    display:none !important; opacity:0 !important; pointer-events:none !important;

  }

}



/* Expanded balık/linkler siyah */

.premade-card.mw-expanded .mw-open-music-info,

.premade-card.mw-expanded .mw-open-musician-info,

.premade-card.mw-expanded .mw-products-title{ color:#000 !important; }



/* === Marquee container (geri getir) === */

.premade-card .music-marquee{

  position: relative;

  height: 1.6em;

  line-height: 1.6em;

  overflow: hidden;

  max-width: 90%;

  white-space: nowrap;

  opacity: 0;

  transition: opacity .2s ease;

  pointer-events: none;

  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);

          mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);

}

.premade-card:hover .music-marquee,

.premade-card.mw-auto-hover .music-marquee,

.premade-card.is-playing .music-marquee{ opacity: 1; }



/* Başlangıç konumu */

.premade-card .music-marquee__track{

  will-change: transform;

  transform: translateX(var(--marquee-start, 50%));

}



/* Hareket tercihi "no-preference" olanlarda animasyonu başlat */

@media (prefers-reduced-motion: no-preference){

  .premade-card:hover .music-marquee .music-marquee__track,

  .premade-card.mw-auto-hover .music-marquee .music-marquee__track,

  .premade-card.is-playing .music-marquee .music-marquee__track,

  .music-marquee.marquee-active .music-marquee__track{

    animation: mw-marquee var(--marquee-speed, 12s) linear infinite !important;

  }

}



/* Keyframes (dosyada yoksa ekle) */

@keyframes mw-marquee {

  0%   { transform: translateX(var(--marquee-start, 50%)); }

  100% { transform: translateX(-100%); }

}

/* ===================== Page FX (enter/exit) – köşe kırpma fix ===================== */



html.mw-pgfx-enter .premade-grid,

html.mw-pgfx-exit  .premade-grid { pointer-events: none; }



/* Filtre */

.mw-filter-boot  { opacity: 0; }

.mw-filter-enter { opacity: 1; transition: opacity .36s ease; }

.mw-filter-exit  { opacity: 0; transition: opacity .16s ease; }



/* Kartlar – SADECE FADE (stagger duruyor) */

.mw-card-boot{

  opacity: 0;

}

.mw-card-enter{

  opacity: 1;

  transition: opacity .40s ease;

  transition-delay: calc(var(--i, 0) * 40ms);

}

.mw-card-exit{

  opacity: 0;

  transition: opacity .24s ease;

  transition-delay: calc(var(--iExit, 0) * 25ms);

}



/* Köşe aliasing’ini bastıran genel korumalar */

.premade-card{

  position: relative;                 /* pseudo/clip için güvenli */

  background-clip: padding-box;       /* border ve arka plan ayrışsın */

  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Chrome AA hilesi */

  contain: paint;                      /* kart kendi boyar, kompozit sızıntı yok */

}





/* =====================================================
 * Ticket: duzeltmeler
 * Patch set:
 *  - (1) Contents tab: Product thumbs before product name + popup CTA styling
 *  - (2) Price alignment hardening (visual centering + spacing)
 *  - (3) Desktop gallery: thumbs on the right (not below)
 * ===================================================== */


/* ---------- (2) Price: avoid double spacing that can look off-center ---------- */
.mw-price-panel .mw-price-orig{
  /* The row already uses gap; extra margin shifts visual centering. */
  margin-left: 0 !important;
}

.mw-right .mw-price-panel,
.mw-right .mw-rate-chip,
.mw-right .mw-vat-note{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* ---------- (1) Contents list: switch from comma-inline to thumb list ---------- */
.mw-products{
  /* Override legacy comma-inline list so we can show thumbs cleanly. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 0;
  margin: 12px 0 0;
  list-style: none;
}

.mw-products .mw-product{
  display: block;
  margin: 0;
}

.mw-products .mw-product:not(:last-child)::after{
  /* Disable legacy comma separator. */
  content: none !important;
}

.mw-open-product{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;

  background: transparent;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  padding: 8px 10px;

  font: inherit;
  color: inherit;
  text-decoration: none;

  cursor: pointer;
}

.mw-open-product:hover{
  background: rgba(0,0,0,.04);
}

.mw-open-product:focus{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 2px;
}

.mw-open-product .mw-product-name{
  text-decoration: underline;
}

.mw-product-thumbs{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.mw-product-thumb{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;

  border: 1px solid rgba(0,0,0,.12);
  background: #fff;

  display: grid;
  place-items: center;
}

.mw-product-thumb__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}


/* Popup CTA (Personalization link) */
.mw-to-personalization,
.mw-btn.mw-to-personalization{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;

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

  border: 1px solid var(--mw-tabs-border, rgba(0,0,0,.15));
  text-decoration: none;
  font-weight: 700;
}

.mw-to-personalization:hover,
.mw-btn.mw-to-personalization:hover{
  background: var(--mw-tabs-hover-bg, var(--hover,#3d7ae0));
}

.mw-to-personalization:focus-visible,
.mw-btn.mw-to-personalization:focus-visible{
  outline: 2px solid var(--mw-tabs-border, rgba(0,0,0,.35));
  outline-offset: 2px;
}



/* ---------- (3) Desktop gallery: thumbs to the RIGHT of main image ---------- */
@media (min-width: 992px){
  .mw-gallery{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 10px;
    align-items: start;
  }

  /* Support both markup variants. */
  .mw-gallery-main,
  .mw-stage{
    grid-column: 1;
  }

  .mw-thumbs{
    grid-column: 2;

    /* Override legacy: no longer below */
    margin-top: 0 !important;
    min-height: 0 !important;

    display: flex;
    flex-direction: column;
    gap: 8px;

    height: 100%;
    max-height: 100%;
    overflow: auto;

    /* A tiny padding so scrollbar doesn't overlap borders. */
    padding-right: 2px;

    /* Reduce horizontal grid behavior from legacy rules. */
    grid-template-columns: none !important;
  }

  .mw-thumb{
    width: 72px;
    height: 72px;
  }
}


/* =====================================================
 * Ticket: premade-auto-hover-0105-v6
 * Purpose: visual-only hover simulation must remain visible even when the
 * mobile/touch hover kill-switch is active. It does not show the speaker and
 * does not start audio because JS only toggles .mw-auto-hover.
 * ===================================================== */
.premade-card.mw-auto-hover:not(.mw-expanded):not(.is-expanded):not(.mw-expanding){
  transform: translateY(-4px) !important;
}

.premade-card.mw-auto-hover:not(.mw-expanded):not(.is-expanded):not(.mw-expanding) .card-body{
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.premade-card.mw-auto-hover:not(.mw-expanded):not(.is-expanded):not(.mw-expanding) .card-actions,
.premade-card.mw-auto-hover:not(.mw-expanded):not(.is-expanded):not(.mw-expanding) .buttons{
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.premade-card.mw-auto-hover:not(.mw-expanded):not(.is-expanded):not(.mw-expanding) .music-marquee{
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.premade-card.mw-auto-hover:not(.mw-expanded):not(.is-expanded):not(.mw-expanding) .speaker{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.premade-card.mw-auto-hover:not(.mw-expanded):not(.is-expanded):not(.mw-expanding):not([data-gallery-count="1"]) .card-image .field__item:nth-child(1){
  opacity: 0 !important;
}

.premade-card.mw-auto-hover:not(.mw-expanded):not(.is-expanded):not(.mw-expanding):not([data-gallery-count="1"]) .card-image .field__item:nth-child(2){
  opacity: 1 !important;
}

.premade-card.has-discount.mw-auto-hover:not(.mw-expanded):not(.is-expanded):not(.mw-expanding) .card-image .mw-chip{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width:767px){
  html.mw-no-hover .premade-card.mw-auto-hover:not(.mw-expanded):not(.is-expanded):not(.mw-expanding) .card-body{
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  html.mw-no-hover .premade-card.mw-auto-hover:not(.mw-expanded):not(.is-expanded):not(.mw-expanding) .buttons,
  html.mw-no-hover .premade-card.mw-auto-hover:not(.mw-expanded):not(.is-expanded):not(.mw-expanding) .card-actions{
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html.mw-no-hover .premade-card.mw-auto-hover:not(.mw-expanded):not(.is-expanded):not(.mw-expanding) .music-marquee{
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }

  html.mw-no-hover .premade-card.mw-auto-hover:not(.mw-expanded):not(.is-expanded):not(.mw-expanding) .speaker{
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* mobile-gallery-fix-3105
 * Mobile grid hardening:
 * - Real gallery hover/auto-hover may show the second image and price panel.
 * - Single-image and fallback-only cards must not fake a second-image transition.
 * - Mobile grid has room for one primary action only.
 */
.premade-card[data-has-real-gallery="1"]:hover .card-image .status-label,
.premade-card[data-has-real-gallery="1"]:hover .card-image .status-star,
.premade-card[data-has-real-gallery="1"].mw-auto-hover .card-image .status-label,
.premade-card[data-has-real-gallery="1"].mw-auto-hover .card-image .status-star,
.premade-card[data-has-real-gallery="1"]:focus-within .card-image .status-label,
.premade-card[data-has-real-gallery="1"]:focus-within .card-image .status-star{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:scale(.98);
}

@media (max-width:767px){
  .premade-grid{
    --page-pad:clamp(4px, 1.45vw, 10px);
    --gutter:clamp(7px, 2vw, 12px);
    width:calc(100% - var(--page-pad) * 2);
    margin-left:auto;
    margin-right:auto;
  }

  .premade-card:not(.mw-expanded):not(.is-expanded) .card-actions,
  .premade-card:not(.mw-expanded):not(.is-expanded) .buttons{
    gap:0 !important;
  }

  .premade-card:not(.mw-expanded):not(.is-expanded) .card-actions .btn-cust,
  .premade-card:not(.mw-expanded):not(.is-expanded) .card-actions .mw-customize,
  .premade-card:not(.mw-expanded):not(.is-expanded) .card-actions .mw-customise,
  .premade-card:not(.mw-expanded):not(.is-expanded) .buttons .btn-cust,
  .premade-card:not(.mw-expanded):not(.is-expanded) .buttons .mw-customize,
  .premade-card:not(.mw-expanded):not(.is-expanded) .buttons .mw-customise{
    display:none !important;
  }

  .premade-card:not(.mw-expanded):not(.is-expanded) .card-actions .btn-add,
  .premade-card:not(.mw-expanded):not(.is-expanded) .buttons .btn-add{
    display:inline-flex !important;
    width:min(100%, 11.5rem);
    max-width:100%;
    padding-left:12px;
    padding-right:12px;
  }
}