/* Moopsi Size Guide — Frontend */
.mpgp-wrap{
  width:100%;
  margin:0 auto;
  font-family: var(--mpgp-font);
  color: var(--mpgp-text);
  line-height:1.6;
}

.mpgp-borders .mpgp-section{ border-bottom: var(--mpgp-section-border-w, 1px) solid var(--mpgp-section-border, #eee); }
.mpgp-no-borders .mpgp-section{ border-bottom:none; }

.mpgp-header{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.3px;
  margin:0;
  padding:14px 0 10px;
  border-bottom:1px solid #eee;
  color: var(--mpgp-primary);
}

.mpgp-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 0 12px;
}

.mpgp-topbar-left{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}

.mpgp-topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.mpgp-label{ font-size: var(--mpgp-fs-label, 12px); font-weight:700; color: var(--mpgp-text); margin-right:6px; }
.mpgp-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: var(--mpgp-pill-border-w, 1px) solid var(--mpgp-pill-border, #e7e7e7);
  background: var(--mpgp-pill-bg, #fff);
  padding: var(--mpgp-pill-pad-y, 5px) var(--mpgp-pill-pad-x, 10px);
  font-size: var(--mpgp-fs-pill, 13px);
  color: var(--mpgp-pill-text, var(--mpgp-text));
  border-radius: var(--mpgp-radius);
}

.mpgp-section{ padding:16px 0; }
.mpgp-h3 {
    margin: 10px 0 10px;
    font-size: .95rem;
    font-weight: 800;
    color: var(--mpgp-primary);
    letter-spacing: .2px;
}

.mpgp-btn{
  height: var(--mpgp-btn-h, 30px);
  line-height: var(--mpgp-btn-h, 30px);
  padding:0 10px;
  background: var(--mpgp-btn-bg, var(--mpgp-primary)) !important;
  color: var(--mpgp-btn-text, #fff) !important;
  border: var(--mpgp-btn-border-w, 1px) solid var(--mpgp-btn-border, var(--mpgp-primary)) !important;
  cursor:pointer;
  border-radius: var(--mpgp-radius) !important;
  font-size: var(--mpgp-fs-button, 14px) !important;
  font-weight:400 !important;
  text-transform:none !important;
  box-shadow:none !important;
  text-decoration:none !important;
  white-space:nowrap;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none
}
.mpgp-btn:hover{
  background: var(--mpgp-btn-hover-bg, #e5e5e5) !important;
  color: var(--mpgp-btn-hover-text, var(--mpgp-primary)) !important;
  border-color: var(--mpgp-btn-hover-border, #e5e5e5) !important;
}

.mpgp-unit-state{ font-size:12px; color: var(--mpgp-muted); }
.mpgp-muted{ color: var(--mpgp-muted); font-size:12px; }

/* Finder container (toggle box via admin) */
.mpgp-find{
  margin-bottom:12px;
  padding: var(--mpgp-finder-pad, 0px);
  background: var(--mpgp-finder-bg, transparent);
  border: 1px solid var(--mpgp-finder-border, transparent);
}
.mpgp-find.mpgp-find-minimal{
  padding: 0;
  background: transparent;
  border: none;
}

.mpgp-find-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.mpgp-find-title{ font-size:.95rem; font-weight:400; color: var(--mpgp-primary); margin:0; }

.mpgp-find-clear{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: var(--mpgp-btn-h, 30px);
  line-height: var(--mpgp-btn-h, 30px);
  padding:0 10px;
  background:#fff;
  border:1px solid var(--mpgp-border);
  border-radius: var(--mpgp-radius);
  cursor:pointer;
  font-size: var(--mpgp-fs-clear, 12px);
  color: var(--mpgp-muted);
  text-decoration:none;
}

.mpgp-find-clear:hover{
  background:#f5f5f5;
  border-color: var(--mpgp-border);
  color: var(--mpgp-primary);
}

.mpgp-pref{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.mpgp-pref-btn{
  height: var(--mpgp-btn-h, 30px);
  line-height: var(--mpgp-btn-h, 30px);
  padding:0 10px;
  border:1px solid var(--mpgp-border);
  background:#fff;
  color: var(--mpgp-primary);
  font-size: var(--mpgp-fs-pref, 12px);
  font-weight:600;
  border-radius: var(--mpgp-radius);
  cursor:pointer;
}


/* Archive/Left-menu color swatches: remove border only for color buttons (keep size borders intact) */
.mpgp-loop-tools .mpgp-pref-btn.mpgp-color-btn{
  border: 0 !important;
  /* Ensure true 30x30 square (no horizontal padding/extra width) */
  width: var(--mpgp-btn-h, 30px) !important;
  min-width: var(--mpgp-btn-h, 30px) !important;
  max-width: var(--mpgp-btn-h, 30px) !important;
  padding: 0 !important;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mpgp-loop-tools .mpgp-pref-btn.mpgp-color-btn.is-active{
  border-color: transparent !important;
}

.mpgp-find-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:10px;
}
@media (min-width:480px){ .mpgp-find-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:768px){ .mpgp-find-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.mpgp-find-field label{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color: var(--mpgp-muted);
  margin-bottom:6px;
}

.mpgp-find-unit{ color: var(--mpgp-muted); font-weight:600; }
.mpgp-find-field input{
  width:100%;
  height: var(--mpgp-input-h);
  padding:0 10px;
  border:1px solid var(--mpgp-border);
  border-radius: var(--mpgp-radius);
  font-size:14px;
  color: var(--mpgp-primary);
  background:#fff;
}

.mpgp-find-field input:focus{ outline:none; border-color: var(--mpgp-primary); }

.mpgp-find-result{
  margin-top:10px;
  border-top:1px solid #f1f1f1;
  padding-top:10px;
  font-size:13px;
  color:#333;
}

.mpgp-find-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:24px;
  padding:0 10px;
  border:1px solid var(--mpgp-primary);
  background: var(--mpgp-primary);
  color:#fff;
  font-size:12px;
  font-weight:700;
  margin-right:8px;
}

.mpgp-find-quality{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:24px;
  padding:0 10px;
  border:1px solid var(--mpgp-border);
  background:#fff;
  color: var(--mpgp-primary);
  font-size:12px;
  font-weight:700;
  margin-left:8px;
}

.mpgp-verified-dot{
  display:inline-block;
  width:8px;
  height:8px;
  background: var(--mpgp-primary);
  margin-right:8px;
  vertical-align:middle;
}

/* ================================
   MPGP – My Account: Fit Intelligence
   Mobile-first + two-column on desktop
   ================================ */
.mpgp-mi{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--mpgp-primary);flex:0 0 auto;}
.mpgp-mi svg{width:18px;height:18px;display:block;}

.mpgp-account-wrap{max-width:1100px;margin:0 auto;padding:10px 0;}
.woocommerce-account .mpgp-account-wrap{width:100%;}

.mpgp-account-hero{
  display:flex;
  gap:12px;
  align-items:center;
  border:1px solid var(--mpgp-border);
  background: var(--mpgp-subtle);
  padding:14px 14px;
  margin:0 0 12px 0;
  border-radius: var(--mpgp-radius);
}
.mpgp-hero-ico{display:inline-flex;align-items:center;justify-content:center;}
.mpgp-hero-h{margin:0;font-size:18px;font-weight:800;color:var(--mpgp-primary);letter-spacing:.2px;}
.mpgp-hero-sub{margin-top:2px;color:var(--mpgp-muted);font-size:13px;max-width:62ch;}

.mpgp-account-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px 0;}
.mpgp-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--mpgp-tab-border);
  background: var(--mpgp-tab-bg);
  color: var(--mpgp-tab-text);
  text-decoration:none !important;
  font-size:13px;
  line-height:1;
  border-radius: var(--mpgp-radius);
}
.mpgp-tab:hover{background: var(--mpgp-btn-hover-bg);color: var(--mpgp-primary);}
.mpgp-tab.is-active{background: var(--mpgp-tab-active-bg);color: var(--mpgp-tab-active-text);border-color: var(--mpgp-tab-active-border);}
.mpgp-tab.is-active .mpgp-mi{color: var(--mpgp-tab-active-text);}

.mpgp-account-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width: 980px){
  .mpgp-account-grid{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:18px;align-items:start;}
}

.mpgp-account-card{
  border:1px solid var(--mpgp-border);
  background: var(--mpgp-surface);
  padding:14px;
  border-radius: var(--mpgp-radius);
}
.mpgp-card-head{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px 0;}
.mpgp-card-title{font-size:15px;font-weight:800;color:var(--mpgp-primary);margin:0;}
.mpgp-card-sub{font-size:12px;color:var(--mpgp-muted);margin-top:2px;}

.mpgp-fit-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px;}
@media(min-width:560px){.mpgp-fit-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

.mpgp-fit-row label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mpgp-muted);margin:0 0 6px 0;}
.mpgp-fit-row input,
.mpgp-fit-row select{
  width:100%;
  height: var(--mpgp-input-h);
  padding:0 10px;
  border:1px solid var(--mpgp-border);
  border-radius: var(--mpgp-radius);
  font-size:14px;
  color: var(--mpgp-primary);
  background:#fff;
}
.mpgp-fit-row input:focus,
.mpgp-fit-row select:focus{outline:none;border-color: var(--mpgp-primary);}

.mpgp-fit-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.mpgp-account-card .button{border-radius: var(--mpgp-radius) !important;}

.mpgp-side-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.mpgp-side-list li{display:flex;gap:8px;align-items:flex-start;color:var(--mpgp-muted);font-size:13px;}
.mpgp-side-list li .mpgp-mi{margin-top:1px;}
.mpgp-side-cta{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;}

/* Feedback form tweaks */
.mpgp-feedback-form select{max-width:320px;}
.mpgp-feedback-form table.shop_table{margin:10px 0 0 0;}
.mpgp-feedback-form table.shop_table th{
  background: var(--mpgp-table-header-bg, #fafafa);
  color: var(--mpgp-primary);
  font-weight:800;
}
.mpgp-feedback-form table.shop_table td{vertical-align:middle;}


.mpgp-table-wrap{ overflow-x:auto; }
table.mpgp-table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
  text-align:center;
  margin:0;
}
table.mpgp-table th, table.mpgp-table td{
  padding:10px;
  border-bottom:1px solid #eee;
  vertical-align:middle;
}
table.mpgp-table thead tr{ background: var(--mpgp-table-header-bg, var(--mpgp-subtle)); }
table.mpgp-table th{
  font-weight:800;
  color: var(--mpgp-primary);
  font-size:.85rem;
  letter-spacing:.2px;
}
tr.mpgp-alt{ background: var(--mpgp-table-alt-bg, #fcfcfc); }
tr.mpgp-row-selected{ outline:1px solid var(--mpgp-table-selected-outline, var(--mpgp-primary)); outline-offset:-1px; }
.mpgp-size-cell{ text-align:left; }

/* Mobile */
.mpgp-mobile{ display:block; border:1px solid #eee; background:#fff; padding:12px; }
.mpgp-tabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:1px solid #f1f1f1;
  -webkit-overflow-scrolling:touch;
}
.mpgp-tab{
  flex:0 0 auto;
  height: var(--mpgp-btn-h, 30px);
  line-height: var(--mpgp-btn-h, 30px);
  padding:0 12px;
  border:1px solid var(--mpgp-tab-border, var(--mpgp-border));
  background: var(--mpgp-tab-bg, #fff);
  color: var(--mpgp-tab-text, var(--mpgp-primary));
  font-size: var(--mpgp-fs-tab, 12px);
  font-weight:600;
  border-radius: var(--mpgp-radius);
  cursor:pointer;
}
.mpgp-tab.is-active{
  background: var(--mpgp-tab-active-bg, var(--mpgp-primary));
  color: var(--mpgp-tab-active-text, #fff);
  border-color: var(--mpgp-tab-active-border, var(--mpgp-primary));
}
.mpgp-tab.is-recommended{ box-shadow: inset 0 0 0 1px var(--mpgp-primary); border-color: var(--mpgp-primary); }
.mpgp-tab.is-selected{ box-shadow: inset 0 -2px 0 var(--mpgp-tab-selected-indicator, var(--mpgp-primary)); }

.mpgp-card{ display:none; }
.mpgp-card.is-active{ display:block; }
.mpgp-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.mpgp-card-title{ font-size:.95rem; font-weight:800; color: var(--mpgp-primary); line-height:1.2; }
.mpgp-card-sub{ font-size:12px; color: var(--mpgp-muted); text-align:right; line-height:1.3; }

.mpgp-metrics{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.mpgp-tile{ border:1px solid #eee; background: var(--mpgp-subtle); padding:10px; }
.mpgp-k{ font-size:11px; color: var(--mpgp-muted); margin-bottom:6px; letter-spacing:.2px; }
.mpgp-v{ font-size:14px; font-weight:700; color: var(--mpgp-primary); line-height:1.2; white-space:nowrap; }

@media (min-width:769px){ .mpgp-mobile{ display:none; } .mpgp-table-wrap{ display:block; } }
@media (max-width:768px){ .mpgp-table-wrap{ display:none; } .mpgp-mobile{ display:block; } }

.mpgp-box{
  padding:14px;
  background: var(--mpgp-subtle);
  border:1px solid #eee;
  font-size:.9rem;
  color:#333;
}
.mpgp-footer{
  margin-top:14px;
  padding:14px;
  border:1px solid #eee;
  background:#fff;
  font-size:.9rem;
  color:#333;
}

/* Clear button placed beside preference buttons */
.mpgp-pref{ align-items:center; }
.mpgp-pref .mpgp-find-clear.mpgp-pref-clear{
  height: var(--mpgp-btn-h, 30px);
  line-height: var(--mpgp-btn-h, 30px);
  font-size: var(--mpgp-fs-pref, 12px);
  border: 1px solid var(--mpgp-border);
  background:#fff;
  color: var(--mpgp-primary);
  padding: 0 var(--mpgp-btn-pad-x, 10px);
}
.mpgp-pref .mpgp-find-clear.mpgp-pref-clear:hover{
  background: #f5f5f5;
}


/* Hide legacy Clear button when Clear is placed inside preference row */
.mpgp-find-clear-legacy{ display:none !important; }


/* Hide Size Chart heading + Find my size heading (content moves up) */
.mpgp-h3-sizechart{display:none !important; margin:0 !important; padding:0 !important; height:0 !important;}
.mpgp-find-title-heading{display:none !important; margin:0 !important; padding:0 !important; height:0 !important;}


/* Diagnostics overlay (only when enabled) */
.mpgp-diag{margin-top:12px;border:1px solid #f1f1f1;background:#fff;padding:10px;font-size:12px;color:#333}
.mpgp-diag-title{font-weight:700;margin-bottom:8px;color:var(--mpgp-primary)}
.mpgp-diag-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0}
.mpgp-diag-copy{margin-top:8px;height:28px;line-height:28px;padding:0 10px;border:1px solid var(--mpgp-border);background:#fff;color:var(--mpgp-primary);border-radius:var(--mpgp-radius);cursor:pointer}
.mpgp-diag-copy:hover{background:#f5f5f5}


.mpgp-diag-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mpgp-diag-copy,.mpgp-diag-copy-state{height:28px;line-height:28px;padding:0 10px;border:1px solid var(--mpgp-border);background:#fff;color:var(--mpgp-primary);border-radius:0;cursor:pointer}
.mpgp-diag-copy:hover,.mpgp-diag-copy-state:hover{background:#f5f5f5}

/* My Size loop badge + filter */
.mpgp-my-size-badge{
  position:absolute;
  top:10px;
  left:10px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:24px;
  padding:0 10px;
  border:1px solid var(--mpgp-primary);
  background: var(--mpgp-primary);
  color:#fff;
  font-size:12px;
  font-weight:400;
  border-radius: var(--mpgp-radius);
  pointer-events:none;
}

/* Archive grid badges: My Size + My Color inline, right-aligned on product image */
.product-labels.mpgp-labels-right{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  align-items:center !important;
  justify-content:flex-end !important;
  left:auto !important;
  right:10px !important;
  top:10px !important;
  bottom:auto !important;
  position:absolute !important;
  z-index:4 !important;
  pointer-events:none !important;
}
.product-labels.mpgp-labels-right .mpgp-my-size-badge,
.product-labels.mpgp-labels-right .mpgp-my-color-badge{
  position:static !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  margin:0 !important;
}

/* Force inline stacking even when theme label styles try to absolutely position badges */
.product-labels.mpgp-labels-right .product-label.mpgp-my-size-badge,
.product-labels.mpgp-labels-right .product-label.mpgp-my-color-badge,
.product-labels.mpgp-labels-right .mpgp-my-size-badge,
.product-labels.mpgp-labels-right .mpgp-my-color-badge,
.mpgp-loop-badges .mpgp-my-size-badge,
.mpgp-loop-badges .mpgp-my-color-badge{
  position:static !important;
  inset:auto !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  float:none !important;
  display:inline-flex !important;
  white-space:nowrap !important;
  margin:0 !important;
}

/* MPGP archive badges fallback layer (shown even when theme labels are disabled) */
.mpgp-loop-badges{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  align-items:center !important;
  justify-content:flex-end !important;
  position:absolute !important;
  right:10px !important;
  top:10px !important;
  left:auto !important;
  bottom:auto !important;
  z-index:9999 !important;
  pointer-events:none !important;
}
.product-labels.mpgp-labels-right .mpgp-my-color-badge .mpgp-color-swatch{
  margin-right:0 !important;
  width:15px !important;
  height:15px !important;
}


.mpgp-loop-tools{margin:10px 0 14px; display:flex; gap:10px; flex-wrap:wrap;}

/* Loop selected filters summary (archives) */
.mpgp-loop-selected{width:100%; display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:6px 0;}
.mpgp-loop-selected-item{display:inline-flex; align-items:center; gap:6px; font-size:13px; color: var(--mpgp-text); background: rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.08); padding:4px 8px; border-radius: var(--mpgp-radius);}
.mpgp-loop-selected-label{font-size:12px; color: var(--mpgp-muted, #6b6b6b);}
.mpgp-loop-selected .mpgp-color-swatch{margin-right:0;}
.mpgp-loop-filter{
  height: var(--mpgp-btn-h, 30px);
  line-height: var(--mpgp-btn-h, 30px);
  padding:0 var(--mpgp-btn-pad-x, 10px);
  border:1px solid var(--mpgp-border);
  background:#fff;
  color: var(--mpgp-primary);
  border-radius: var(--mpgp-radius);
  cursor:pointer;
  font-size: var(--mpgp-loop-font-size, var(--mpgp-fs-button, 14px));
  color: var(--mpgp-loop-font-color, var(--mpgp-loop-btn-text, var(--mpgp-primary)));
  font-weight:400;
}
.mpgp-loop-filter:hover{background:#f5f5f5}
.mpgp-loop-filter.is-active{
  border-color: var(--mpgp-primary);
  box-shadow: inset 0 -2px 0 var(--mpgp-primary);
}

/* My Size loop: keep all products visible (highlight mode)
   - matching items: subtle underline
   - non-matching items: de-emphasized (still visible)
*/
.products.mpgp-filter-active li.mpgp-filter-dim,
.mpgp-filter-dim{
  opacity: 1;
}
.products.mpgp-filter-active li.mpgp-filter-match,
.mpgp-filter-match{
  box-shadow: inset 0 -2px 0 var(--mpgp-primary);
}


/* Ensure only the in-row CLEAR is visible */
.mpgp-find-head > .mpgp-find-clear{display:none !important;}
.mpgp-pref .mpgp-find-clear{display:inline-flex !important;}

.mpgp-loop-manager{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mpgp-loop-manager-label{font-size:12px;color:var(--mpgp-muted)}
.mpgp-loop-size{
  height: var(--mpgp-btn-h, 30px);
  line-height: var(--mpgp-btn-h, 30px);
  padding: 0 var(--mpgp-btn-pad-x,10px);
  border:1px solid var(--mpgp-border);
  background:#fff;
  color: var(--mpgp-primary);
  border-radius: var(--mpgp-radius);
  font-size: var(--mpgp-fs-button, 14px);
}
.mpgp-loop-clear{
  height: var(--mpgp-btn-h, 30px);
  line-height: var(--mpgp-btn-h, 30px);
  padding: 0 var(--mpgp-btn-pad-x,10px);
  border:1px solid var(--mpgp-border);
  background:#fff;
  color: var(--mpgp-primary);
  border-radius: var(--mpgp-radius);
  cursor:pointer;
  font-size: var(--mpgp-fs-button, 14px);
  font-weight:400;
}

/* V007.405 — Archive button-height override hardening:
   Some themes enforce min-height via:
   :is(.btn,.button,button,...) { min-height: var(--btn-height,42px) }
   Force the real MPGP clear buttons to 30px so the theme can’t win.
*/
body:not(.single-product) .mpgp-loop-clear,
body:not(.single-product) .mpgp-find-clear{
  --btn-height: 30px !important;
  min-height: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
}
.mpgp-loop-clear:disabled{opacity:.5;cursor:not-allowed}
.mpgp-loop-clear:hover{background:#f5f5f5}

/* My Size widget */
.mpgp-my-size-widget{display:block}
.mpgp-my-size-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mpgp-my-size-label{font-size:12px;color:var(--mpgp-muted)}
.mpgp-my-size-value{font-size:12px;color:var(--mpgp-primary)}
.mpgp-my-size-change,.mpgp-my-size-clear,.mpgp-my-size-help{
  height: var(--mpgp-btn-h, 30px);
  line-height: var(--mpgp-btn-h, 30px);
  padding:0 var(--mpgp-btn-pad-x,10px);
  border:1px solid var(--mpgp-border);
  background:#fff;
  color: var(--mpgp-primary);
  border-radius: var(--mpgp-radius);
  cursor:pointer;
  font-size: var(--mpgp-fs-button, 14px);
  font-weight:400;
}
.mpgp-my-size-change:hover,.mpgp-my-size-clear:hover,.mpgp-my-size-help:hover{background:#f5f5f5}
.mpgp-my-size-select{
  height: var(--mpgp-btn-h, 30px);
  padding:0 var(--mpgp-btn-pad-x,10px);
  border:1px solid var(--mpgp-border);
  background:#fff;
  color: var(--mpgp-primary);
  border-radius: var(--mpgp-radius);
}
.mpgp-my-size-hint{margin-top:8px;font-size:12px;color:var(--mpgp-muted)}

/* Result chips */
.mpgp-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.mpgp-chip{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 10px;border:1px solid var(--mpgp-border);background:#fff;color:var(--mpgp-primary);font-size:12px;font-weight:400;border-radius:var(--mpgp-radius)}

/* Loop shortcode styling (scoped; does NOT affect product page) */
.mpgp-loop-tools[data-mpgp-loop-style="1"]{display:flex;gap:var(--mpgp-loop-gap, 8px);flex-wrap:wrap;align-items:center}
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-pref{gap:var(--mpgp-loop-gap, 8px)}
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-pref-btn,
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-loop-filter,
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-pref-clear{
  height: var(--mpgp-loop-btn-h, var(--mpgp-btn-h, 30px));
  line-height: var(--mpgp-loop-btn-h, var(--mpgp-btn-h, 30px));
  padding: 0 var(--mpgp-loop-btn-pad-x, var(--mpgp-btn-pad-x,10px));
  border: var(--mpgp-loop-btn-border-w, 1px) solid var(--mpgp-loop-btn-border, var(--mpgp-border));
  background: var(--mpgp-loop-btn-bg, #fff);
  color: var(--mpgp-loop-btn-text, var(--mpgp-primary));
  font-size: var(--mpgp-fs-button, 14px);
  border-radius: var(--mpgp-radius);
  cursor:pointer;
  font-weight:400;
}

/* Theme hard-override safety: many themes set button min-height via --btn-height (often 42px).
   Force archive (loop/left-menu) MPGP controls to 30px so theme defaults can't win. */
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-pref-btn,
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-loop-filter,
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-pref-clear{
  --btn-height: 30px !important;
  min-height: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
}
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-pref-btn:hover,
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-loop-filter:hover,
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-pref-clear:hover{
  background: var(--mpgp-loop-btn-hover-bg, #f5f5f5);
  color: var(--mpgp-loop-btn-hover-text, var(--mpgp-loop-btn-text, var(--mpgp-primary)));
  border-color: var(--mpgp-loop-btn-hover-border, var(--mpgp-loop-btn-border, var(--mpgp-border)));
}
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-pref-btn.is-active,
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-loop-filter.is-active{
  background: var(--mpgp-loop-btn-active-bg, var(--mpgp-primary));
  color: var(--mpgp-loop-btn-active-text, #fff);
  border-color: var(--mpgp-loop-btn-active-border, var(--mpgp-primary));
}

/* My Size badge - keep single line */
.mpgp-my-size-badge{white-space:nowrap;}

/* If badge container is flex, push My Size badge to the right */
.wd-labels .mpgp-my-size-badge, .product-labels .mpgp-my-size-badge, .labels .mpgp-my-size-badge{margin-left:auto;}

/* Loop layout: sizes row then actions row */
.mpgp-loop-tools[data-mpgp-loop-style="1"]{flex-direction:column;align-items:stretch}
.mpgp-loop-row{display:flex;align-items:center;gap:var(--mpgp-loop-gap,8px);width:100%}
.mpgp-loop-row-actions{justify-content:space-between}
.mpgp-loop-row-actions .mpgp-loop-clear{margin-left:auto}

/* WoodMart alignment: My Size badge on top-right using a right labels container */
.product-labels.mpgp-labels-right{
  left:auto !important;
  right:10px !important;
  top:10px !important;
  bottom:auto !important;
}
.product-labels.mpgp-labels-right .mpgp-my-size-badge{
  position:static !important;
  margin:0 !important;
  white-space:nowrap !important;
}



/* === MPGP Hardening: force admin-driven styles to win over theme button rules === */
.mpgp-wrap .mpgp-btn,
.mpgp-wrap .mpgp-pref-btn,
.mpgp-wrap .mpgp-find-clear,
.mpgp-wrap .mpgp-tab{
  font-size: var(--mpgp-fs-button, 14px) !important;
}

.mpgp-wrap .mpgp-pref-btn{
  font-size: var(--mpgp-fs-pref, 12px) !important;
  height: var(--mpgp-btn-h) !important;
  line-height: var(--mpgp-btn-h) !important;
}

.mpgp-wrap .mpgp-find-clear{
  font-size: var(--mpgp-fs-clear, 12px) !important;
  height: var(--mpgp-btn-h) !important;
  line-height: var(--mpgp-btn-h) !important;
}

.mpgp-wrap .mpgp-btn{
  height: var(--mpgp-btn-h) !important;
  line-height: var(--mpgp-btn-h) !important;
  padding: 0 var(--mpgp-btn-pad-x, 10px) !important;
}

.mpgp-wrap .mpgp-tab{
  height: var(--mpgp-btn-h) !important;
  line-height: var(--mpgp-btn-h) !important;
  padding: 0 var(--mpgp-tab-pad-x, 12px) !important;
  font-size: var(--mpgp-fs-tab, 12px) !important;
}

/* Loop shortcode (scoped) should also beat theme Woo button rules */
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-pref-btn,
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-loop-filter,
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-pref-clear{
  font-size: var(--mpgp-loop-font-size, var(--mpgp-fs-button, 14px)) !important;
  color: var(--mpgp-loop-font-color, var(--mpgp-loop-btn-text, var(--mpgp-primary))) !important;
  height: var(--mpgp-loop-btn-h, var(--mpgp-btn-h, 30px)) !important;
  line-height: var(--mpgp-loop-btn-h, var(--mpgp-btn-h, 30px)) !important;
}



/* === MPGP Fix: loop shortcode hover/active text colors must override base font color === */
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-pref-btn:hover,
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-loop-filter:hover,
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-pref-clear:hover{
  color: var(--mpgp-loop-btn-hover-text, var(--mpgp-loop-font-color, var(--mpgp-loop-btn-text, var(--mpgp-primary)))) !important;
}

.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-pref-btn.is-active,
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-loop-filter.is-active{
  color: var(--mpgp-loop-btn-active-text, #fff) !important;
}

/* Loop shortcode: filter-specific typography */
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-loop-filter{
  font-size: var(--mpgp-loop-filter-font-size, var(--mpgp-loop-font-size, var(--mpgp-fs-button, 14px))) !important;
  color: var(--mpgp-loop-filter-font-color, var(--mpgp-loop-btn-text, var(--mpgp-primary))) !important;
}

/* Unit toggle CSS-only rendering (dual spans) */
.mpgp-wrap .mpgp-val-in{display:none}
.mpgp-wrap.mpgp-unit-in .mpgp-val-cm{display:none}
.mpgp-wrap.mpgp-unit-in .mpgp-val-in{display:inline}
/* In tiles, show on new line if needed */
.mpgp-wrap .mpgp-v .mpgp-val{display:block}

/* === MPGP Loop Hardening: ensure admin loop styles override theme button rules === */
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-pref-btn,
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-loop-filter,
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-pref-clear{
  height: var(--mpgp-loop-btn-h, var(--mpgp-btn-h, 30px)) !important;
  line-height: var(--mpgp-loop-btn-h, var(--mpgp-btn-h, 30px)) !important;
  padding: 0 var(--mpgp-loop-btn-pad-x, var(--mpgp-btn-pad-x, 10px)) !important;
}

/* Actions row: left filter, right clear; same height */
.mpgp-loop-row-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap: var(--mpgp-loop-gap, 8px) !important;
}
.mpgp-loop-row-actions .mpgp-loop-filter{margin-right:auto}
.mpgp-loop-row-actions .mpgp-loop-clear{margin-left:auto}

/* Loop actions row alignment: true left/right (no gaps) */
.mpgp-loop-tools[data-mpgp-loop-style="1"]{align-items:stretch !important}
.mpgp-loop-row{width:100% !important}
.mpgp-loop-row-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:0 !important;
  padding:0 !important;
}
.mpgp-loop-row-actions .mpgp-loop-clear,
.mpgp-loop-row-actions .mpgp-loop-filter{
  margin:0 !important;
  order:initial !important;
}

/* Unit toggle moved into preference row */
.mpgp-pref{width:100%}
.mpgp-pref .mpgp-pref-unit{margin-left:auto !important; min-width:52px; text-align:center;}


/* Hide topbar container when available sizes row is disabled */
.mpgp-wrap[data-mpgp-hide-topbar="1"] .mpgp-topbar{display:none !important;margin:0 !important;padding:0 !important;height:0 !important;}


/* Explainability (add-only) */
.mpgp-explain{
  margin-top:10px;
  padding:10px 10px;
  background:#fafafa;
  border:1px solid #f1f1f1;
  font-size:12.5px;
  color:#333;
}
.mpgp-explain-line{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.mpgp-explain-k{
  color:#666;
}
.mpgp-explain-v{
  font-weight:700;
  color:#121212;
}
.mpgp-explain-list{
  margin:0;
  padding-left:16px;
  color:#555;
}
.mpgp-explain-list li{
  margin:0 0 4px 0;
}



/* MPGP Account UI (add-only) */

.mpgp-account-wrap{max-width:1100px;}
.mpgp-account-hero{display:flex;gap:12px;align-items:center;padding:14px 16px;border:1px solid #e9e9e9;background:#fafafa;margin-bottom:12px;}
.mpgp-hero-ico{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#f2f2f2;border:1px solid #e5e5e5;}
.mpgp-hero-ico .dashicons{font-size:22px;width:22px;height:22px;line-height:22px;color:#444;}
.mpgp-hero-h{margin:0;font-size:18px;font-weight:700;letter-spacing:0.2px;}
.mpgp-hero-sub{margin-top:3px;color:#666;font-size:13px;max-width:900px;}
.mpgp-account-tabs{display:flex;gap:8px;margin:10px 0 0 0;border-bottom:1px solid #eee;}
.mpgp-tab{display:inline-flex;gap:8px;align-items:center;padding:10px 12px;text-decoration:none;color:#222;background:#fff;border:1px solid #eee;border-bottom:none;}
.mpgp-tab .dashicons{font-size:16px;width:16px;height:16px;line-height:16px;color:#444;}
.mpgp-tab.is-active{background:#f7f7f7;border-color:#e0e0e0;font-weight:700;}
.mpgp-account-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:14px;margin-top:12px;}
@media (max-width: 900px){.mpgp-account-grid{grid-template-columns:1fr;}}
.mpgp-account-card{border:1px solid #eee;background:#fff;padding:14px 16px;}
.mpgp-card-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;}
.mpgp-card-head .dashicons{font-size:18px;width:18px;height:18px;line-height:18px;color:#444;margin-top:2px;}
.mpgp-card-title{font-size:16px;font-weight:700;margin:0;}
.mpgp-card-sub{color:#666;font-size:13px;margin-top:2px;}
.mpgp-fit-form .mpgp-fit-row{margin-bottom:12px;}
.mpgp-fit-form .mpgp-fit-row label{display:flex;gap:8px;align-items:center;font-size:13px;color:#333;margin-bottom:6px;font-weight:600;}
.mpgp-fit-form .mpgp-fit-row input,
.mpgp-fit-form .mpgp-fit-row select{width:100%;max-width:360px;}
.mpgp-fit-actions{margin-top:10px;}
.mpgp-side-list{list-style:none;padding:0;margin:10px 0 0 0;}
.mpgp-side-list li{display:flex;gap:8px;align-items:flex-start;margin:8px 0;color:#444;font-size:13px;}
.mpgp-side-cta{margin-top:14px;}


/* MPGP Account UI Enhancements (add-only v1.9.6) */
.mpgp-account-side{background:#fafafa;}
.mpgp-fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width: 700px){.mpgp-fit-grid{grid-template-columns:1fr;}}
.mpgp-fit-grid .mpgp-fit-row input,
.mpgp-fit-grid .mpgp-fit-row select{max-width:100%;}
.mpgp-feedback-form select{min-width:220px;max-width:280px;}
@media (max-width: 700px){.mpgp-feedback-form select{width:100%;min-width:0;max-width:100%;}}

/* MPGP Account UI – Moopsi two-column refresh (add-only)
   This block intentionally overrides earlier account styles. */
.mpgp-mi{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--mpgp-primary);}
.mpgp-mi svg{width:18px;height:18px;display:block;}

.mpgp-account-wrap{max-width:1100px;margin:0 auto;padding:10px 0;}

.mpgp-account-hero{display:flex;gap:12px;align-items:center;padding:14px 14px;border:1px solid var(--mpgp-border);background:var(--mpgp-subtle);margin:0 0 12px 0;}
.mpgp-hero-ico{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--mpgp-border);background:#fff;}
.mpgp-hero-ico .mpgp-mi{width:22px;height:22px;}
.mpgp-hero-ico .mpgp-mi svg{width:22px;height:22px;}
.mpgp-hero-h{margin:0;font-size:18px;font-weight:800;letter-spacing:.2px;color:var(--mpgp-primary);}
.mpgp-hero-sub{margin-top:2px;color:var(--mpgp-muted);font-size:13px;max-width:56ch;}

.mpgp-account-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px 0;padding:0;}
.mpgp-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--mpgp-tab-border);background:var(--mpgp-tab-bg);color:var(--mpgp-tab-text);text-decoration:none;font-size:13px;line-height:1;}
.mpgp-tab:hover{background:var(--mpgp-btn-hover-bg);color:var(--mpgp-primary);}
.mpgp-tab.is-active{background:var(--mpgp-tab-active-bg);color:var(--mpgp-tab-active-text);border-color:var(--mpgp-tab-active-border);}
.mpgp-tab.is-active .mpgp-mi{color:var(--mpgp-tab-active-text);}
.mpgp-tab-label{display:inline-block;}

.mpgp-account-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:12px;align-items:start;}
@media (min-width: 980px){
  .mpgp-account-grid{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:18px;}
}

.mpgp-account-card{border:1px solid var(--mpgp-border);background:var(--mpgp-surface);padding:14px;}
.mpgp-account-side{background:var(--mpgp-subtle);}

.mpgp-card-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;}
.mpgp-card-title{font-size:15px;font-weight:800;color:var(--mpgp-primary);margin:0;}
.mpgp-card-sub{font-size:12px;color:var(--mpgp-muted);margin-top:2px;}

.mpgp-fit-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px;}
@media (min-width:560px){.mpgp-fit-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

.mpgp-fit-row label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mpgp-muted);margin-bottom:6px;font-weight:700;}
.mpgp-fit-row input,.mpgp-fit-row select{width:100%;height:var(--mpgp-input-h);padding:0 10px;border:1px solid var(--mpgp-border);background:#fff;color:var(--mpgp-primary);border-radius:var(--mpgp-radius);}
.mpgp-fit-row input:focus,.mpgp-fit-row select:focus{outline:none;border-color:var(--mpgp-primary);}

.mpgp-fit-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.mpgp-side-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.mpgp-side-list li{display:flex;gap:8px;align-items:flex-start;color:var(--mpgp-muted);font-size:13px;}
.mpgp-side-list li .mpgp-mi{margin-top:1px;}
.mpgp-side-cta{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;}

/* Feedback form tweaks */
.mpgp-feedback-form table.shop_table{margin-top:10px;border-collapse:collapse;}
.mpgp-feedback-form table.shop_table th{background:var(--mpgp-table-header-bg,#fafafa);color:var(--mpgp-primary);font-weight:800;}
.mpgp-feedback-form select{width:100%;max-width:320px;height:var(--mpgp-input-h);border:1px solid var(--mpgp-border);background:#fff;color:var(--mpgp-primary);border-radius:var(--mpgp-radius);}
@media (max-width: 700px){.mpgp-feedback-form select{max-width:100%;}}

/* Fit Feedback – Mobile cards (add-only v1.9.11) */
.mpgp-fb-list{display:grid;grid-template-columns:1fr;gap:12px;}
@media (min-width: 980px){
  .mpgp-fb-list{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.mpgp-fb-card{border:1px solid var(--mpgp-border);background:#fff;padding:12px;border-radius:var(--mpgp-radius);}
.mpgp-fb-top{display:flex;gap:10px;align-items:center;}
.mpgp-fb-thumbwrap{width:56px;height:56px;border:1px solid var(--mpgp-border);background:var(--mpgp-subtle);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--mpgp-radius);flex:0 0 auto;}
.mpgp-fb-thumbwrap img{width:100%;height:100%;object-fit:cover;display:block;}
.mpgp-fb-thumbph{width:18px;height:18px;display:block;background:rgba(0,0,0,0.08);border-radius:999px;}
.mpgp-fb-meta{min-width:0;}
.mpgp-fb-title{font-weight:800;color:var(--mpgp-primary);font-size:14px;line-height:1.2;}
.mpgp-fb-title a{color:inherit;text-decoration:none;}
.mpgp-fb-title a:hover{text-decoration:underline;}
.mpgp-fb-sub{margin-top:2px;color:var(--mpgp-muted);font-size:12px;}

.mpgp-fb-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px;}
.mpgp-fb-btn{position:relative;display:block;cursor:pointer;}
.mpgp-fb-btn input{position:absolute;opacity:0;pointer-events:none;}
.mpgp-fb-btn-in{display:flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 8px;border:1px solid var(--mpgp-border);background:#fff;color:var(--mpgp-muted);font-size:13px;font-weight:800;border-radius:var(--mpgp-radius);text-align:center;user-select:none;}
.mpgp-fb-btn-in .mpgp-mi{width:16px;height:16px;}
.mpgp-fb-btn:hover .mpgp-fb-btn-in{background:var(--mpgp-subtle);}
.mpgp-fb-btn input:checked + .mpgp-fb-btn-in{background:var(--mpgp-tab-active-bg);border-color:var(--mpgp-tab-active-border);color:var(--mpgp-tab-active-text);}
.mpgp-fb-btn input:checked + .mpgp-fb-btn-in .mpgp-mi{color:var(--mpgp-tab-active-text);}

.mpgp-fb-outcome-label{margin-top:10px;font-size:12px;color:var(--mpgp-muted);}
.mpgp-fb-choices-outcome{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px;}
@media (max-width:520px){
  .mpgp-fb-choices-outcome{grid-template-columns:1fr;}
}
@media (max-width: 420px){
  .mpgp-fb-choices{grid-template-columns:1fr;}
  .mpgp-fb-btn-in{justify-content:flex-start;padding-left:12px;}
}

/* SKU footer mobile */
@media (max-width:768px){
  .mpgp-footer{
    padding:12px;
    font-size:.85rem;
    line-height:1.45;
    margin-top:12px;
  }
  .mpgp-footer .mpgp-muted{ font-size:12px; }
}


/* ==========================================================
   ULTIMATE UPGRADE: Mobile-first Drawer UX (product guide)
   - Add-only: enabled via admin toggles
   ========================================================== */
body.mpgp-noscroll{overflow:hidden !important;}

.mpgp-drawer-open{display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.mpgp-drawer{display:none;}
.mpgp-drawer-overlay{position:fixed;inset:0;background:var(--mpgp-drawer-overlay, rgba(0,0,0,.35));}
.mpgp-drawer-sheet{
  position:fixed;left:0;right:0;bottom:0;
  max-height: calc(var(--mpgp-drawer-max-h, 86) * 1vh);
  background: var(--mpgp-drawer-bg, #fff);
  border-top:1px solid var(--mpgp-drawer-border, var(--mpgp-border));
  z-index: var(--mpgp-drawer-z, 99999);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.mpgp-drawer-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--mpgp-drawer-border, var(--mpgp-border));background:inherit;position:sticky;top:0;}
.mpgp-drawer-handle{width:42px;height:4px;border-radius:999px;background:rgba(0,0,0,0.12);margin:0 auto;}
.mpgp-drawer-close{height:30px;line-height:30px;padding:0 10px;border:1px solid var(--mpgp-border);background:#fff;color:var(--mpgp-primary);border-radius:var(--mpgp-radius);cursor:pointer;font-size:12px;}
.mpgp-drawer-close:hover{background:var(--mpgp-subtle);}
.mpgp-drawer-content{padding:12px;}

/* Mobile drawer behavior */
@media (max-width: 767px){
  .mpgp-wrap.mpgp-drawer-mobile-on .mpgp-drawer-open{display:inline-flex;}
  .mpgp-wrap.mpgp-drawer-mobile-on:not(.mpgp-drawer-opened) .mpgp-drawer{display:none;}
  .mpgp-wrap.mpgp-drawer-mobile-on.mpgp-drawer-opened .mpgp-drawer{display:block;position:fixed;inset:0;z-index: var(--mpgp-drawer-z, 99999);}
  .mpgp-wrap.mpgp-drawer-mobile-on.mpgp-drawer-opened .mpgp-drawer-sheet{z-index: calc(var(--mpgp-drawer-z, 99999) + 1);}
}

/* Desktop: when only mobile drawer is enabled, show content inline (no drawer) */
@media (min-width: 768px){
  .mpgp-wrap.mpgp-drawer-mobile-on:not(.mpgp-drawer-desktop-on) .mpgp-drawer-open{display:none;}
  .mpgp-wrap.mpgp-drawer-mobile-on:not(.mpgp-drawer-desktop-on) .mpgp-drawer{display:block;position:static;}
  .mpgp-wrap.mpgp-drawer-mobile-on:not(.mpgp-drawer-desktop-on) .mpgp-drawer-overlay{display:none;}
  .mpgp-wrap.mpgp-drawer-mobile-on:not(.mpgp-drawer-desktop-on) .mpgp-drawer-sheet{position:static;max-height:none;border:0;z-index:auto;overflow:visible;}
  .mpgp-wrap.mpgp-drawer-mobile-on:not(.mpgp-drawer-desktop-on) .mpgp-drawer-bar{display:none;}
  .mpgp-wrap.mpgp-drawer-mobile-on:not(.mpgp-drawer-desktop-on) .mpgp-drawer-content{padding:0;}
}

/* Desktop drawer (optional) */
@media (min-width: 768px){
  .mpgp-wrap.mpgp-drawer-desktop-on .mpgp-drawer-open{display:inline-flex;}
  .mpgp-wrap.mpgp-drawer-desktop-on:not(.mpgp-drawer-opened) .mpgp-drawer{display:none;}
  .mpgp-wrap.mpgp-drawer-desktop-on.mpgp-drawer-opened .mpgp-drawer{display:block;position:fixed;inset:0;z-index: var(--mpgp-drawer-z, 99999);}
  .mpgp-wrap.mpgp-drawer-desktop-on.mpgp-drawer-opened .mpgp-drawer-sheet{
    left:50%;right:auto;transform:translateX(-50%);
    width:min(820px, 92vw);
    border:1px solid var(--mpgp-drawer-border, var(--mpgp-border));
    border-bottom:0;
  }
}

/* ==========================================================
   ULTIMATE UPGRADE: Category “Find my size” drawer (loop)
   ========================================================== */
.mpgp-loop-fit-open{
  height: var(--mpgp-loop-btn-h, var(--mpgp-btn-h, 30px));
  line-height: var(--mpgp-loop-btn-h, var(--mpgp-btn-h, 30px));
  padding:0 var(--mpgp-loop-btn-pad-x, 10px);
  border:1px solid var(--mpgp-loop-btn-border, var(--mpgp-border));
  background: var(--mpgp-loop-btn-bg, #fff);
  color: var(--mpgp-loop-btn-text, var(--mpgp-primary));
  border-radius: var(--mpgp-radius);
  cursor:pointer;
  font-size: var(--mpgp-loop-font-size, var(--mpgp-fs-button, 14px));
  font-weight:400;
}
.mpgp-loop-fit-open:hover{background: var(--mpgp-loop-btn-hover-bg, var(--mpgp-subtle));}

.mpgp-loop-drawer{display:none;}
.mpgp-loop-drawer.is-open{display:block;position:fixed;inset:0;z-index: var(--mpgp-loop-drawer-z, 99999);}
.mpgp-loop-drawer .mpgp-drawer-overlay{background: var(--mpgp-loop-drawer-overlay, rgba(0,0,0,.35));}
.mpgp-loop-drawer .mpgp-drawer-sheet{
  background: var(--mpgp-loop-drawer-bg, #fff);
  border-top:1px solid var(--mpgp-loop-drawer-border, var(--mpgp-border));
  max-height: calc(var(--mpgp-loop-drawer-max-h, 86) * 1vh);
  z-index: calc(var(--mpgp-loop-drawer-z, 99999) + 1);
}
.mpgp-loop-drawer .mpgp-find-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
@media (max-width:520px){
  .mpgp-loop-drawer .mpgp-find-grid{grid-template-columns:1fr;gap:8px;}
}
.mpgp-loop-drawer .mpgp-find-result{margin-top:10px;}


/* Color swatches */
.mpgp-color-swatch {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(0, 0, 0, .15);
    vertical-align: middle;
    margin-right: 0px;
    box-sizing: border-box;
}
.mpgp-color-name{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.mpgp-color-btn{display:inline-flex;align-items:center;gap:0;}
.mpgp-my-color-badge{display:inline-flex;align-items:center;gap:6px;}

/* ------------------------------------------------------------
 * Product page swatches & size pills (variation swatches)
 * Uses MPGP options injected as CSS variables:
 *  --mpgp-prod-swatch-size, --mpgp-prod-swatch-radius, --mpgp-prod-swatch-gap,
 *  --mpgp-prod-swatch-border, --mpgp-prod-swatch-border-w, --mpgp-prod-swatch-selected-outline,
 *  --mpgp-prod-pill-h, --mpgp-prod-pill-pad-x, --mpgp-prod-pill-radius
 * ------------------------------------------------------------ */

/* Common wrappers (Woo Variation Swatches, WoodMart, VillaTheme-like) */
/* Product variations wrapper gap — split by attribute type so Size gap never inherits Color gap */
.variations_form .variable-items-wrapper[data-attribute_name*="color"],
.variations_form .variable-items-wrapper[data-attribute_name*="colour"],
.variations_form .variable-items-wrapper[data-attribute_name*="pa_color"],
.variations_form .variable-items-wrapper[data-attribute_name*="pa_colour"],
.variations_form .wd-attr-items[data-attribute_name*="color"],
.variations_form .wd-attr-items[data-attribute_name*="colour"],
.variations_form .wd-attr-items[data-attribute_name*="pa_color"],
.variations_form .wd-attr-items[data-attribute_name*="pa_colour"],
.variations_form .wd-swatch-wrap[data-attribute_name*="color"],
.variations_form .wd-swatch-wrap[data-attribute_name*="colour"],
.variations_form .wd-swatch-wrap[data-attribute_name*="pa_color"],
.variations_form .wd-swatch-wrap[data-attribute_name*="pa_colour"],
.variations_form .vi-wpvs-variation-wrap[data-attribute_name*="color"],
.variations_form .vi-wpvs-variation-wrap[data-attribute_name*="colour"],
.variations_form .vi-wpvs-variation-wrap[data-attribute_name*="pa_color"],
.variations_form .vi-wpvs-variation-wrap[data-attribute_name*="pa_colour"]{
  gap: var(--mpgp-prod-swatch-gap, 6px) !important;
}

/* Size wrappers: use pill gap so admin size gap matches (single product) */
.variations_form .variable-items-wrapper[data-attribute_name*="size"],
.variations_form .variable-items-wrapper[data-attribute_name*="pa_size"],
.variations_form .wd-attr-items[data-attribute_name*="size"],
.variations_form .wd-attr-items[data-attribute_name*="pa_size"],
.variations_form .wd-swatch-wrap[data-attribute_name*="size"],
.variations_form .wd-swatch-wrap[data-attribute_name*="pa_size"],
.variations_form .vi-wpvs-variation-wrap[data-attribute_name*="size"],
.variations_form .vi-wpvs-variation-wrap[data-attribute_name*="pa_size"]{
  gap: var(--mpgp-prod-pill-gap, 5px) !important;
}

/* Size wrappers: use pill gap so admin size gap matches (single product) */
.variations_form .variable-items-wrapper[data-attribute_name*=\"size\"],
.variations_form .variable-items-wrapper[data-attribute_name*=\"pa_size\"],
.variations_form .wd-attr-items[data-attribute_name*=\"size\"],
.variations_form .wd-attr-items[data-attribute_name*=\"pa_size\"],
.variations_form .wd-swatch-wrap[data-attribute_name*=\"size\"],
.variations_form .wd-swatch-wrap[data-attribute_name*=\"pa_size\"],
.variations_form .vi-wpvs-variation-wrap[data-attribute_name*=\"size\"],
.variations_form .vi-wpvs-variation-wrap[data-attribute_name*=\"pa_size\"]{
  gap: var(--mpgp-prod-pill-gap, 5px) !important;
}


/* Color / image swatches */
.variations_form .variable-item,
.variations_form .variable-items-wrapper .variable-item,
.variations_form .vi-wpvs-variation-wrap .vi-wpvs-option-wrap{
  border-radius: var(--mpgp-prod-swatch-radius, 0px) !important;
}

.variations_form .variable-item.color-variable-item,
.variations_form .variable-item.image-variable-item,
.variations_form .variable-items-wrapper .variable-item.color-variable-item,
.variations_form .variable-items-wrapper .variable-item.image-variable-item{
  width: var(--mpgp-prod-swatch-size, 28px) !important;
  height: var(--mpgp-prod-swatch-size, 28px) !important;
  border: var(--mpgp-prod-swatch-border-w, 1px) solid var(--mpgp-prod-swatch-border, #e7e7e7) !important;
  border-radius: var(--mpgp-prod-swatch-radius, 0px) !important;
  overflow: hidden;
  box-shadow: none !important;
}

.variations_form .variable-item.color-variable-item.selected,
.variations_form .variable-item.image-variable-item.selected,
.variations_form .variable-items-wrapper .variable-item.selected{
  outline: 2px solid var(--mpgp-prod-swatch-selected-outline, #343434) !important;
  outline-offset: 2px;
}

/* Size / text pills */
.variations_form .variable-items-wrapper.mpgp-wrap-has-pills{
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--mpgp-prod-pill-gap, 6px) !important;
  row-gap: var(--mpgp-prod-pill-gap, 6px) !important;
}

.variations_form .variable-item.button-variable-item,
.variations_form .variable-items-wrapper .variable-item.button-variable-item{
  min-height: var(--mpgp-prod-pill-h, 30px) !important;
  height: var(--mpgp-prod-pill-h, 30px) !important;
  line-height: calc(var(--mpgp-prod-pill-h, 30px) - 2px) !important;
  padding-left: var(--mpgp-prod-pill-pad-x, 10px) !important;
  padding-right: var(--mpgp-prod-pill-pad-x, 10px) !important;
  border-radius: var(--mpgp-prod-pill-radius, 0px) !important;
  border: var(--mpgp-prod-swatch-border-w, 1px) solid var(--mpgp-prod-swatch-border, #e7e7e7) !important;
  box-shadow: none !important;
  /* Phase 2: spacing is wrapper-driven (gap/row-gap/column-gap) to avoid theme double-spacing */
  margin: 0 !important;
}

.variations_form .variable-item.button-variable-item.selected,
.variations_form .variable-items-wrapper .variable-item.button-variable-item.selected{
  outline: 2px solid var(--mpgp-prod-swatch-selected-outline, #343434) !important;
  outline-offset: 2px;
}

/* Disabled / out of stock */
.variations_form .variable-item.disabled,
.variations_form .variable-items-wrapper .variable-item.disabled,
.variations_form .variable-item.out-of-stock,
.variations_form .variable-items-wrapper .variable-item.out-of-stock{
  opacity: .35;
  filter: grayscale(1);
  pointer-events: none;
}

/* ------------------------------------------------------------
 * V007.260 — Mobile sidebar filter safety (archives/categories)
 * Fixes: mobile filter sidebar content forcing horizontal layout/overflow,
 * which can push the theme “close” button off-screen.
 * We do NOT reposition theme buttons; we prevent horizontal overflow and
 * ensure filter options wrap naturally.
 * ------------------------------------------------------------ */
@media (max-width: 782px){
  /* Common off-canvas/slideout sidebars across themes (WoodMart + generic) */
  .wd-side-hidden,
  .wd-offcanvas,
  .filters-area,
  .wd-sidebar,
  .sidebar-container,
  .shop-sidebar{
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Layered nav lists: wrap instead of creating a horizontal strip */
  .wd-side-hidden .woocommerce-widget-layered-nav-list,
  .wd-offcanvas .woocommerce-widget-layered-nav-list,
  .filters-area .woocommerce-widget-layered-nav-list,
  .wd-sidebar .woocommerce-widget-layered-nav-list,
  .sidebar-container .woocommerce-widget-layered-nav-list,
  .shop-sidebar .woocommerce-widget-layered-nav-list{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  .wd-side-hidden .woocommerce-widget-layered-nav-list li,
  .wd-offcanvas .woocommerce-widget-layered-nav-list li,
  .filters-area .woocommerce-widget-layered-nav-list li,
  .wd-sidebar .woocommerce-widget-layered-nav-list li,
  .sidebar-container .woocommerce-widget-layered-nav-list li,
  .shop-sidebar .woocommerce-widget-layered-nav-list li{
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
  }

  .wd-side-hidden .woocommerce-widget-layered-nav-list a,
  .wd-offcanvas .woocommerce-widget-layered-nav-list a,
  .filters-area .woocommerce-widget-layered-nav-list a,
  .wd-sidebar .woocommerce-widget-layered-nav-list a,
  .sidebar-container .woocommerce-widget-layered-nav-list a,
  .shop-sidebar .woocommerce-widget-layered-nav-list a{
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    white-space: normal;
  }

  /* Our injected Family/Shade bar (if enabled) should never overflow sidebars */
  .wd-side-hidden .mpgp-fs-wrap,
  .wd-offcanvas .mpgp-fs-wrap,
  .filters-area .mpgp-fs-wrap,
  .wd-sidebar .mpgp-fs-wrap,
  .sidebar-container .mpgp-fs-wrap,
  .shop-sidebar .mpgp-fs-wrap{
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
}

/* V007.15 hotfix: force labels visible even if theme CSS hides spans */
.woocommerce div.mpgp-wrap .mpgp-topbar-left .mpgp-label{display:inline-flex !important; visibility:visible !important; opacity:1 !important;}


/* V007.207 — Hide any variation swatches accidentally included inside the MPG Pro guide widget/accordion (scoped, safe). */
.mpgp-wrap .variations_form,
.mpgp-wrap .variable-items-wrapper,
.mpgp-wrap .wd-attr-items,
.mpgp-wrap .wd-swatch-wrap,
.mpgp-wrap .vi-wpvs-variation-wrap,
.mpgp-wrap .wvs-variations-wrapper,
.mpgp-wrap .wvs-archive-variations-wrapper{
  display:none !important;
}
.mpgp-wrap .variations_form + *{
  margin-top:0 !important;
}


/* Phase 7 — Steward Facet Filter Bar (archives) */
.mpgp-facet-bar{
  width:100%;
  margin: 10px 0 14px;
}

.mpgp-facet-bar__inner{
  display:flex;
  flex-wrap:wrap;
  gap: var(--mpgp-archive-facet-gap, var(--mpgp-archive-size-gap, 6px));
  align-items:flex-end;
}

.mpgp-facet-bar__field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.mpgp-facet-bar__label{
  font-size:12px;
  opacity:.85;
}

.mpgp-facet-bar__pills{
  display:flex;
  flex-wrap:wrap;
  gap: var(--mpgp-archive-facet-gap, var(--mpgp-archive-size-gap, 6px));
  align-items:center;
}

.mpgp-facet-pill{
  font-size: var(--mpgp-archive-facet-fs, var(--mpgp-archive-size-fs, 11px));
  line-height: 1;
  padding: var(--mpgp-archive-facet-pad-y, var(--mpgp-archive-size-pad-y, 4px)) var(--mpgp-archive-facet-pad-x, var(--mpgp-archive-size-pad-x, 6px));
  border: var(--mpgp-archive-facet-border-w, var(--mpgp-archive-size-border-w, 1px)) solid var(--mpgp-archive-facet-border, var(--mpgp-archive-size-border, rgba(0,0,0,.15)));
  background: var(--mpgp-archive-facet-bg, var(--mpgp-archive-size-bg, #fff));
  color: var(--mpgp-archive-facet-text, var(--mpgp-archive-size-text, #121212));
  font-weight: var(--mpgp-archive-facet-fw, var(--mpgp-archive-size-fw, 500));
  border-radius: var(--mpgp-archive-facet-radius, var(--mpgp-archive-size-radius, 0px));
  white-space: nowrap;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  min-height: var(--mpgp-archive-facet-h, 0px);
}

.mpgp-facet-pill.is-active{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mpgp-facet-bar__clear{
  display:inline-flex;
  align-items:center;
  padding: var(--mpgp-archive-facet-pad-y, var(--mpgp-archive-size-pad-y, 4px)) var(--mpgp-archive-facet-pad-x, var(--mpgp-archive-size-pad-x, 6px));
  border: var(--mpgp-archive-facet-border-w, var(--mpgp-archive-size-border-w, 1px)) solid var(--mpgp-archive-facet-border, var(--mpgp-archive-size-border, rgba(0,0,0,.15)));
  border-radius: var(--mpgp-archive-facet-radius, var(--mpgp-archive-size-radius, 0px));
  text-decoration:none;
  color: inherit;
}

.mpgp-facet-bar--nolabels .mpgp-facet-bar__field{ gap:0; }



.mpgp-loop-tools-shell{margin:10px 0 14px; display:flex; flex-direction:column; gap:10px;}
/* --- MPGP V007.401: Archive left menu button height (scoped) --- */
.shop-sidebar{
  --btn-height: 30px;
}
/* Some themes enforce min-height via :is(.btn,.button,button,...) using --btn-height fallback (42px).
   Force 30px within the shop sidebar only to avoid global side-effects. */
.shop-sidebar :is(.btn,.button,button,[type=submit],[type=button]){
  min-height: 30px !important;
  height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}


/* --- MPGP: Force 30px height for our archive left-menu / preference buttons (theme sets --btn-height fallback 42px) --- */
.mpgp-pref-clear,
.mpgp-loop-clear,
.mpgp-find-clear,
.mpgp-loop-row-actions button,
.mpgp-loop-row-actions :is(.btn,.button,button,[type=submit],[type=button]){
  --btn-height: 30px;
  min-height: 30px !important;
  height: 30px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.1 !important;
}


/* =========================================================
 * Archive/Left-menu Color Swatches — no active background
 * Keep size button active backgrounds unchanged.
 * Selected color swatch gets #343434 border only.
 * ========================================================= */
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-pref-btn.mpgp-color-btn,
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-loop-filter.mpgp-color-btn{
  background: transparent !important;
  color: inherit !important;
}

.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-pref-btn.mpgp-color-btn.is-active,
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-loop-filter.mpgp-color-btn.is-active{
  background: transparent !important;
  color: inherit !important;
  border: 1px solid #343434 !important;
  border-color: #343434 !important;
}


/* V007.409 — Exception: archive loop-style=1 color swatches must have zero horizontal padding so fills 30x30 */
.mpgp-loop-tools[data-mpgp-loop-style="1"] .mpgp-pref-btn.mpgp-color-btn{
  padding: 0 !important;
}

