/* PROFILE STORE CSS */


#body {
    height: 100vh;
    overflow: scroll !important;
}







.mwvstore-app{margin:10px 0}

@media screen and (max-width: 768px){
	.mwvstore-avatar {
    display: flex;
    justify-content: center;
}	
	.mwvstore-vmeta {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: stretch:
		margin-right: 0 !important;
        gap: 10px;
}
.mwvstore-vname {
    display: flex;
    justify-content: center;
}	
	
}



.mwvstore-vendor{
    display: flex;
    gap: 16px;
    align-items: stretch;
    margin: 0 0 16px 0;
    padding: 10px;
    border: 1px solid #e3e6eb;
    border-radius: 10px;
    background: #fff;
    flex-direction: column;
    justify-content: space-between;
}



@media screen and (min-width: 768px){
.mwvstore-vendor{
    align-items: center;
    flex-direction: row;
}
	
}
.mwvstore-vmeta {
    margin-right: 16px;
}
.mwvstore-avatar img{width:64px;height:64px;object-fit:cover;border-radius:10px}
.mwvstore-vname{font-weight:700;font-size:18px;margin-bottom:4px}
.mwvstore-vlink .button{
	    display: inline-block;
    text-align: center;
    width: 100%;
    padding: 6px 16px;
    border: 1px solid #e3e6eb;
    border-radius: 10px;
    font-size: 14px;
}
.mwvstore-controls{
	flex: 3 1 0;
}
.mwvstore-search input[type=search]{
	padding: 8px 16px;
    border: 1px solid #e3e6eb;
    border-radius: 50px;
    min-width: 240px;
}

.mwvstore-controls-products-wrapper {
  display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

@media screen and (min-width: 900px){
.mwvstore-controls-products-wrapper {
    grid-template-columns: 320px 1fr;
}
}



.mwvstore-filters{   
	padding: 0 10px 10px;
    border: 1px solid #e3e7eb;
    border-radius: 10px;
    background: #fff;
    flex: 1 1 0;
    font-size: 14px;
    height: fit-content;
	    position: sticky;
    top: 16px;
}
.mwvstore-filters__summary{
	    display: flex;
    align-items: center;
    gap: 8px;
    background-color: white;
    padding: 10px 0;
    cursor: pointer;
    font-weight: 500;
    font-size: 18px;
	    justify-content: space-between;
}
.mwvstore-filters__panel{
	margin-top: 0;
    display: grid;
    gap: 12px;
}
.mwvstore-label{display:block;margin:2px 0 6px;font-weight:600}
#mwvstore-category{
	font-size: 14px;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: auto;
    position: sticky;
    top: 0;
}
.mwvstore-attrs{
	display: grid;
    gap: 10px;
    position: relative;
    height: 80vh;
    bottom: 10px;
    margin-bottom: 10px;
    overflow: scroll;
}

.mwv-attr legend{
	    font-weight: 600;
    width: 100%;
    position: sticky;
    top: 0;
    background-color: white;
    padding: 10px 0;
	border-bottom: solid 1px #e3e6eb;
}
.mwv-attr__terms{
	    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    flex-direction: column;
}
.mwv-attr__term{
	    display: flex;
    align-items: center;
    gap: 6px;
    flex-direction: row;
}

.mwvstore-count{align-self:center;color:#666}
.mwvstore-grid{
	list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    flex: 3 1 0;
}
@media(min-width:720px){.mwvstore-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}


@media screen and (min-width: 1024px) and (max-width: 1366px) {
    .mwvstore-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}



.mwvstore-card{
	background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
	justify-content: space-between;
}
.mwvstore-thumb{
	display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    padding: 10px 0;
}
.mwvstore-thumb img{
	width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.mwvstore-ph{width:100%;height:100%;background:#f4f4f4}
.mwvstore-meta{
	padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}
.mwvstore-title{display:block;font-size:14px;line-height:1.2;text-decoration:none}
.mwvstore-price{font-weight:600}
.mwvstore-actions{
	display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    margin-top: 6px;
    flex-direction: column;
    justify-content: space-between;
}
.mwvstore-see.button, .mwvstore-toggle.button, .mwvstore-login.button{
	padding: 8px 8px;
    border: 1px solid #e3e6eb;
    border-radius: 6px;
    display: inline-block;
    background: #fff;
    cursor: pointer;
    color: #494955;
    text-align: center;
    font-size: 14px;
}
.mwvstore-note{color:#666;background:#fafafa;border:1px dashed #ddd;border-radius:8px;padding:10px}

 .mwvstore-clear{
    position:sticky;
    bottom:10px;
    width:auto;
    background:#fff;
	  color: #2f88ff;
    border:1px solid #e3e7eb;
    border-radius:10px;
    padding:10px 12px;
    box-shadow:0 -2px 6px rgba(0,0,0,.06);
  }








/* ===========================
   MWV Store — Mobile Modal (Z-index hardening)
   =========================== */
:root{
  /* absurdly high z's to beat admin bars & headers */
  --mwv-z-modal: 2147483646;   /* panel */

  --mwv-z-chip: 2147483647;    /* floating close chip */
}

/* Hide the site nav when the filters modal is open */
@media (max-width: 768px) {
  html:has(.mwvstore-filters[open]) .nav-header {
    display: none !important;
  }
	 html:has(.mwvstore-filters[open]) .gc-widgets--bottom {
    display: none !important;
  }
}


@media (max-width: 768px){

	.mwvstore-filters {
    margin: 0 10px;
    border: solid 1px #2f88ff;
		        position: relative;
        top: 0;
}
	
	
.mwvstore-filters[open] .mwvstore-filters__summary span {
    display: none;
}	

	.mwv-attr legend {
    font-weight: 600;
    width: 100%;
    position: sticky;
    top: 0;
    background-color: white;
    padding: 10px 0;
    border-bottom: solid 1px #e3e6eb;
}

	.mwvstore-thumb{
    height: 300px;
}

.mwvstore-filters {
    padding: 0 10px;
}		
	
	.mwvstore-filters__summary {
    justify-content: center;
}
	
	
	.mwvstore-category-dd {
    padding: 10px 0;
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 9;
    width: 80%;
}
	
.mwvstore-controls-products-wrapper {
    flex-direction: column;
}
	
  /* 1) Root overlay lives on the html element, so it's NOT trapped by ancestors */
  html:has(.mwvstore-filters[open])::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(15,15,15,.55);
    backdrop-filter:saturate(1.1) blur(2px);
    z-index:var(--mwv-z-overlay);
  }

  /* 2) Lock background scroll when open */
  html:has(.mwvstore-filters[open]),
  body:has(.mwvstore-filters[open]){ overflow:hidden; }

  /* 3) The panel becomes a true modal (fixed, full viewport) */
  .mwvstore-filters__panel{
    transform:translateY(100%);           /* off-canvas start */
    transition:transform .25s ease;
    will-change:transform;
  }
  .mwvstore-filters[open] .mwvstore-filters__panel{
    position:fixed !important;            /* escape layout */
    inset:0;
    height:100dvh;
    width:auto;
    margin:0;
    padding:0px 10px calc(10px + env(safe-area-inset-bottom));
    background:#fff;
    border:0;
    border-radius:0;
    overflow:auto;
    box-shadow:0 -6px 24px rgba(0,0,0,.18);
    z-index:var(--mwv-z-modal) !important;/* sit above overlay */
    transform:translateY(0);
  }

  /* 4) Floating summary becomes the close chip */
  .mwvstore-filters[open] .mwvstore-filters__summary{
    position:fixed;
    top:calc(8px + env(safe-area-inset-top));
    right:12px;
    z-index:var(--mwv-z-chip);
    background:#fff;
    border:1px solid #ddd;
    border-radius:9999px;
    padding:8px 12px;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
    cursor:pointer;
  }
  .mwvstore-filters[open] .mwvstore-filters__summary::after{
    content:" ✕";
    font-weight:600;
	  font-size: 16px;
  }

  /* 5) Comfortable controls in modal */
  #mwvstore-category{ 
	  width:100% !important; 
	  max-width:none; }
	
  .mwvstore-attrs{
	  max-height:none;
	    padding-bottom: 32px;
	}
  .mwvstore-clear{
    position:sticky;
    bottom:16px;
    width:auto;
    background:#fff;
	  color: #2f88ff;
    border:1px solid #e3e7eb;
    border-radius:10px;
    padding:10px 12px;
    box-shadow:0 -2px 6px rgba(0,0,0,.06);
  }

  /* 6) (Important) Neutralize common stacking-context traps while open:
        transforms, filters, and hidden overflow on typical wrappers. */
  html:has(.mwvstore-filters[open]) .peepso,
  html:has(.mwvstore-filters[open]) .ps-page,
  html:has(.mwvstore-filters[open]) .ps-section,
  html:has(.mwvstore-filters[open]) .site,
  html:has(.mwvstore-filters[open]) .site-content{
    transform:none !important;
    filter:none !important;
    perspective:none !important;
    contain:none !important;
    overflow:visible !important;
  }
}

/* Accessibility: honor reduced motion */
@media (prefers-reduced-motion: reduce){
  .mwvstore-filters__panel{ transition:none !important; }
}
