/* BORONDO V8.3 mobile layout fix — no overlapping cards */

/* Never let product/detail content escape its card. */
.v8-product,
.v8-product-detail,
.v8-panel,
.v8-panel > *,
.v8-variant,
.v8-variant-head,
.v8-variant-body{
  min-width:0;
  max-width:100%;
}

/* Overview: the first generated two-column block is safe on desktop and stacks on mobile. */
.v8-panel > div[style*="grid-template-columns:minmax(220px,390px) 1fr"]{
  width:100%;
  max-width:100%;
  min-width:0;
}

/* Variant summary cards must stay inside their column. */
.v8-panel > div[style*="grid-template-columns:minmax(220px,390px) 1fr"] > div{
  min-width:0;
  max-width:100%;
}
.v8-panel > div[style*="grid-template-columns:minmax(220px,390px) 1fr"] .v8-variant{
  width:100%;
  max-width:100%;
}

/* Give the page enough real space below the fixed history controls. */
.v8-shell{padding-bottom:132px!important;}

/* History controls: compact, readable and not stretched edge-to-edge. */
.v8-historybar{
  width:min(660px,calc(100% - 36px))!important;
  padding:6px!important;
  gap:4px!important;
  border-radius:12px!important;
}
.v8-historybar button{
  min-height:36px;
  white-space:nowrap;
}

/* Two distinct visuals in Vista: round swatch + square associated main. */
.borondo-overview-main{
  width:38px;height:38px;min-width:38px;border:1px solid #dedad1;border-radius:7px;background:#f1efe9;
  display:grid;place-items:center;overflow:hidden;color:#756f65;font-size:10px;
}
.borondo-overview-main img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;padding:2px!important}
.borondo-overview-main.loading{opacity:.6}

@media(max-width:620px){
  /* Main content breathes on the sides. */
  .v8-shell{
    padding-left:20px!important;
    padding-right:20px!important;
    padding-bottom:142px!important;
  }
  .v8-product-detail{
    padding:11px!important;
    overflow:hidden;
  }
  .v8-panel{
    padding:12px!important;
    overflow:hidden;
  }

  /* Critical fix: Vista becomes one vertical column on phones. */
  .v8-panel > div[style*="grid-template-columns:minmax(220px,390px) 1fr"]{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
    width:100%!important;
    overflow:hidden!important;
  }

  /* Principal image never exceeds the card. */
  .v8-panel > div[style*="grid-template-columns:minmax(220px,390px) 1fr"] > div:first-child{
    width:100%!important;
    min-width:0!important;
  }
  .v8-panel > div[style*="grid-template-columns:minmax(220px,390px) 1fr"] > div:first-child > img{
    width:100%!important;
    height:auto!important;
    max-height:430px!important;
    aspect-ratio:1 / 1!important;
    object-fit:contain!important;
    object-position:center!important;
    background:#f1efe9!important;
  }

  /* Gallery thumbnails under the main image, never behind the variant list. */
  .v8-panel > div[style*="grid-template-columns:minmax(220px,390px) 1fr"] .v8-media-grid{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:6px!important;
    overflow:visible!important;
  }
  .v8-panel > div[style*="grid-template-columns:minmax(220px,390px) 1fr"] .v8-media-tile{
    min-width:0!important;
    min-height:0!important;
    aspect-ratio:1 / 1;
  }
  .v8-panel > div[style*="grid-template-columns:minmax(220px,390px) 1fr"] .v8-media-tile img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }

  /* Variant preview list is a separate block below the gallery. */
  .v8-panel > div[style*="grid-template-columns:minmax(220px,390px) 1fr"] > div:last-child{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    gap:7px!important;
  }
  .v8-panel > div[style*="grid-template-columns:minmax(220px,390px) 1fr"] .v8-variant{
    margin:0!important;
    width:100%!important;
    min-width:0!important;
  }
  .v8-panel > div[style*="grid-template-columns:minmax(220px,390px) 1fr"] .v8-variant-head{
    width:100%!important;
    grid-template-columns:38px 38px minmax(0,1fr) auto 18px!important;
    gap:7px!important;
    padding:8px 9px!important;
    overflow:hidden!important;
  }
  .v8-panel > div[style*="grid-template-columns:minmax(220px,390px) 1fr"] .v8-variant-head strong{
    font-size:11px!important;
    white-space:nowrap;
  }

  /* Real option preview stays circular and visible. */
  .borondo-overview-swatch{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
  }
  .borondo-overview-swatch .borondo-swatch-circle{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
  }
  .borondo-overview-main{width:38px!important;height:38px!important;min-width:38px!important;}

  /* The fixed history bar is much less intrusive on iPhone. */
  .v8-historybar{
    left:18px!important;
    right:18px!important;
    width:auto!important;
    transform:none!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    padding:5px!important;
    gap:3px!important;
    border-radius:11px!important;
  }
  .v8-historybar button{
    min-height:34px!important;
    padding:7px 8px!important;
    font-size:9px!important;
  }
  .v8-historybar .changes{margin-left:auto!important;}
  .v8-historybar .apply{
    max-width:116px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* When there are no pending changes, don't cover the catalogue with disabled controls. */
  .v8-historybar.is-empty{
    left:auto!important;
    right:18px!important;
    width:auto!important;
    min-width:0!important;
    background:rgba(31,30,26,.90)!important;
  }
  .v8-historybar.is-empty > button:not(.changes){display:none!important;}
  .v8-historybar.is-empty .changes{
    margin:0!important;
    min-height:32px!important;
    padding:6px 10px!important;
  }

  /* No giant header row. */
  .v8-panel-head{
    align-items:flex-start!important;
    gap:8px!important;
  }
}

@media(max-width:390px){
  .v8-shell{padding-left:16px!important;padding-right:16px!important;}
  .v8-panel > div[style*="grid-template-columns:minmax(220px,390px) 1fr"] .v8-media-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  .v8-historybar:not(.is-empty){left:10px!important;right:10px!important;}
  .v8-historybar button{padding:6px!important;}
  .v8-panel > div[style*="grid-template-columns:minmax(220px,390px) 1fr"] .v8-variant-head{
    grid-template-columns:34px 34px minmax(0,1fr) auto 16px!important;
    gap:6px!important;
  }
  .borondo-overview-swatch,.borondo-overview-main{width:34px!important;height:34px!important;min-width:34px!important;}
  .borondo-overview-swatch .borondo-swatch-circle{width:30px!important;height:30px!important;min-width:30px!important;}
}