/* =====================================================
   MeerStickers — Single Product Page Styles
   Scoped under body.ms-productpage
   ===================================================== */

/* Parent theme (Bootstrap 3) sets html{font-size:10px} which breaks rem values. */
html { font-size: 16px !important; }

/* ── Variables ──────────────────────────────────────── */
body.ms-productpage {
  --ms-green:       #6ab023;
  --ms-green-dark:  #558f1b;
  --ms-orange:      #e8420a;
  --ms-orange-dark: #c23508;
  --ms-dark:        #1c1f18;
  --ms-dark2:       #2e3228;
  --ms-olive:       #bfc840;
  --ms-bg:          #f8f8f6;
  --ms-surface:     #ffffff;
  --ms-border:      #e4e2dc;
  --ms-text:        #1a1a1a;
  --ms-muted:       #6b6b6b;
  --ms-gray-50:     #f7f8f4;
  --ms-gray-100:    #eef0e8;
  --ms-gray-200:    #d8dbd0;
  --ms-gray-400:    #9ba090;
  --ms-radius:      4px;
  --ms-transition:  180ms ease;
  --ms-shadow:      0 2px 8px rgba(0,0,0,.10);
  --ms-shadow-md:   0 4px 20px rgba(0,0,0,.13);

  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  background: var(--ms-bg) !important;
  color: var(--ms-text) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hard reset parent theme wrappers */
body.ms-productpage #page,
body.ms-productpage .site,
body.ms-productpage #content,
body.ms-productpage .site-content,
body.ms-productpage #primary,
body.ms-productpage .content-area {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

body.ms-productpage *,
body.ms-productpage *::before,
body.ms-productpage *::after { box-sizing: border-box !important; }

body.ms-productpage img  { display: block; max-width: 100%; }
body.ms-productpage a    { text-decoration: none !important; color: inherit; }
body.ms-productpage ul   { list-style: none !important; padding: 0 !important; margin: 0 !important; }
/* Mega menu must not inherit page-level ul reset — restore parent theme's 24px gap */
body.ms-productpage ul.mega-sub-menu { margin-top: 24px !important; list-style: none !important; }
/* Nav dropdown must not inherit page-level ul reset */
body.ms-productpage .ms-nav__list .sub-menu { padding: 6px 0 !important; margin: 0 !important; display: none !important; }
body.ms-productpage .ms-nav__list li:hover > .sub-menu,
body.ms-productpage .ms-nav__list li:focus-within > .sub-menu { display: block !important; }
body.ms-productpage h1,
body.ms-productpage h2,
body.ms-productpage h3   { margin: 0 !important; font-weight: inherit; line-height: inherit; }

/* WP admin bar offset */
body.admin-bar.ms-productpage .ms-topbar { margin-top: 32px; }
body.admin-bar.ms-productpage .ms-header  { top: 32px; }

/* ── Breadcrumb ─────────────────────────────────────── */
.ms-breadcrumb {
  background: #f4f3ef;
  border-bottom: 1px solid #e2e0d8;
  padding: 9px 20px;
}
.ms-breadcrumb__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .9rem;
  color: #888;
  flex-wrap: wrap;
}
.ms-breadcrumb__inner a { color: #888; text-decoration: none !important; }
.ms-breadcrumb__inner a:hover { color: var(--ms-green); }
.ms-breadcrumb__sep { color: #bbb; margin: 0 1px; }
.ms-breadcrumb__cur { color: #1a1a1a; font-weight: 700; }

/* ── Flow Banner ────────────────────────────────────── */
.ms-flow-banner { background: var(--ms-green); }
.ms-flow-inner  {
  max-width: 1280px; margin: 0 auto;
  padding: 18px 24px;
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap;
}
.ms-flow-step {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 22px;
}
.ms-flow-step:not(:last-child)::after {
  content: '→'; font-size: 16px; font-weight: 900;
  color: var(--ms-dark); opacity: .35; margin-left: 22px;
}
.ms-flow-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ms-dark); color: #fff;
  font-size: 12px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ms-flow-label { font-size: 13px; font-weight: 700; color: var(--ms-dark); }

/* ── Product Section ────────────────────────────────── */
.ms-product-section {
  max-width: 1280px; margin: 0 auto;
  padding: 36px 24px 56px;
}
.ms-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

/* ── Gallery ────────────────────────────────────────── */
.ms-gallery         { position: sticky; top: 88px; }
.ms-gallery-main    {
  position: relative; background: var(--ms-gray-50);
  border-radius: var(--ms-radius);
  overflow: hidden; aspect-ratio: 1/1;
  cursor: zoom-in;
  border: 1.5px solid var(--ms-gray-100);
}
.ms-gallery-main img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 24px; transition: transform .3s ease; display: block;
}
.ms-gallery-main:hover img { transform: scale(1.05); }

.ms-zoom-hint {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(28,31,24,.65); color: #fff;
  font-size: 11px; font-weight: 600; padding: 5px 10px;
  border-radius: var(--ms-radius);
  display: flex; align-items: center; gap: 5px;
  pointer-events: none;
}
.ms-gal-badge {
  position: absolute; top: 14px; left: 14px;
  background: var(--ms-orange); color: #fff;
  font-size: 11px; font-weight: 800; padding: 4px 9px;
  border-radius: var(--ms-radius); letter-spacing: .04em; text-transform: uppercase;
}

.ms-gallery-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ms-thumb {
  width: 68px; height: 68px;
  border-radius: var(--ms-radius); border: 2px solid var(--ms-gray-200);
  background: var(--ms-gray-50); overflow: hidden;
  cursor: pointer; flex-shrink: 0;
  transition: border-color var(--ms-transition);
}
.ms-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.ms-thumb.ms-active,
.ms-thumb:hover { border-color: var(--ms-green); }

/* ── Product Info ────────────────────────────────────── */
.ms-product-info {}

.ms-prod-badge-row  { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ms-tag             { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--ms-radius); letter-spacing: .04em; text-transform: uppercase; }
.ms-tag-cat         { background: var(--ms-green); color: #fff; }
.ms-tag-stock       { background: #e8f5d0; color: #3a6b0e; }
.ms-tag-stock-out   { background: #fde8e0; color: #8b2500; }

.ms-prod-title { font-size: 28px !important; font-weight: 900 !important; line-height: 1.2 !important; margin-bottom: 10px !important; letter-spacing: -.3px !important; color: var(--ms-dark) !important; }

.ms-rating-row  { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.ms-stars       { color: #f5a623; font-size: 15px; letter-spacing: 1px; line-height: 1; }
.ms-rating-text { font-size: 13px; color: var(--ms-muted); }
.ms-rating-text a { color: var(--ms-green) !important; font-weight: 600; }
.ms-sku-text    { font-size: 12px; color: var(--ms-muted); }

/* ── Price Block ─────────────────────────────────────── */
.ms-price-block {
  background: var(--ms-gray-50); border-radius: var(--ms-radius);
  padding: 16px 18px; margin-bottom: 20px;
  border: 1.5px solid var(--ms-gray-100);
}
.ms-price-main,
.ms-price-block p.price,
.ms-price-block .price,
.ms-price-block .woocommerce-Price-amount {
  font-size: 30px !important; font-weight: 900 !important;
  color: var(--ms-orange) !important; line-height: 1 !important;
  margin: 0 !important; padding: 0 !important;
}
/* Hide duplicate WC price suffix — plugin already includes it in the label */
.ms-price-block .woocommerce-price-suffix { display: none !important; }
/* Also style ins/del for sale prices */
.ms-price-block .price ins { text-decoration: none !important; }
.ms-price-block .price del { font-size: 18px !important; color: var(--ms-muted) !important; font-weight: 400 !important; margin-right: 6px !important; }
.ms-price-unit { font-size: 13px; color: var(--ms-muted); margin-top: 5px; }

/* ── Options / Attributes ─────────────────────────────── */
.ms-options-block   { margin-bottom: 20px; display: flex; flex-direction: column; gap: 14px; }
.ms-option-group label,
.ms-attr-label {
  font-size: 13px !important; font-weight: 700 !important; color: var(--ms-dark) !important;
  letter-spacing: .02em !important; text-transform: uppercase !important;
  display: block !important; margin-bottom: 7px !important;
}
.ms-attr-label span { font-weight: 500; color: var(--ms-muted); text-transform: none; }

.ms-swatch-row  { display: flex; gap: 7px; flex-wrap: wrap; }
.ms-swatch {
  padding: 7px 13px; border: 1.5px solid var(--ms-gray-200);
  border-radius: var(--ms-radius); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color var(--ms-transition), background var(--ms-transition);
  background: #fff; color: var(--ms-text); user-select: none;
}
.ms-swatch:hover,
.ms-swatch.ms-active { border-color: var(--ms-green); background: #f0f8e6; color: var(--ms-green); }
.ms-swatch.ms-disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* hide WC native selects — swatches drive them */
.ms-attr-select { display: none !important; }

/* ── Quantity ────────────────────────────────────────── */
.ms-qty-wrap    { display: flex; align-items: center; gap: 0; border: 1.5px solid var(--ms-gray-200); border-radius: var(--ms-radius); width: fit-content; overflow: hidden; }
.ms-qty-btn     {
  width: 38px; height: 38px; background: var(--ms-gray-50);
  border: none; font-size: 18px; font-weight: 700;
  cursor: pointer; color: var(--ms-dark);
  transition: background var(--ms-transition); line-height: 1;
}
.ms-qty-btn:hover { background: var(--ms-gray-100); }
.ms-qty-input,
.ms-qty-wrap input[type="number"] {
  width: 52px !important; height: 38px !important;
  border: none !important; border-left: 1.5px solid var(--ms-gray-200) !important;
  border-right: 1.5px solid var(--ms-gray-200) !important;
  text-align: center !important; font-size: 15px !important;
  font-weight: 700 !important; font-family: inherit !important;
  outline: none !important; background: #fff !important;
  -moz-appearance: textfield !important;
}
.ms-qty-input::-webkit-inner-spin-button,
.ms-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── Artwork Section ─────────────────────────────────── */
.ms-artwork-section { margin-bottom: 20px; }
.ms-section-label { font-size: 13px; font-weight: 700; color: var(--ms-dark); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.ms-section-label span { color: var(--ms-orange); }

.ms-art-tabs { display: flex; gap: 0; border: 1.5px solid var(--ms-gray-200); border-radius: var(--ms-radius); overflow: hidden; margin-bottom: 12px; }
.ms-art-tab {
  flex: 1; padding: 9px 6px; font-size: 13px; font-weight: 700;
  text-align: center; cursor: pointer; border: none;
  background: #fff; color: var(--ms-muted);
  transition: background var(--ms-transition), color var(--ms-transition);
  font-family: inherit;
}
.ms-art-tab.ms-active { background: var(--ms-dark); color: #fff; }
.ms-art-tab:not(:last-child) { border-right: 1.5px solid var(--ms-gray-200); }

.ms-upload-drop {
  border: 2px dashed var(--ms-gray-200); border-radius: var(--ms-radius);
  padding: 26px 20px; text-align: center; background: var(--ms-gray-50);
  transition: border-color .2s, background .2s; cursor: pointer;
}
.ms-upload-drop:hover,
.ms-upload-drop.ms-drag { border-color: var(--ms-green); background: #f4fce8; }
.ms-upload-icon    { font-size: 34px; margin-bottom: 8px; }
.ms-upload-title   { font-size: 15px; font-weight: 700; color: var(--ms-dark); margin-bottom: 4px; }
.ms-upload-subtitle{ font-size: 13px; color: var(--ms-muted); margin-bottom: 14px; }
.ms-upload-subtitle strong { color: var(--ms-dark); }
.ms-btn-upload {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ms-green); color: #fff !important;
  border: none; border-radius: var(--ms-radius);
  padding: 10px 20px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background var(--ms-transition);
  font-family: inherit;
}
.ms-btn-upload:hover { background: var(--ms-green-dark); }
.ms-upload-note { font-size: 11px; color: var(--ms-gray-400); margin-top: 10px; }
.ms-upload-note strong { color: var(--ms-muted); }

.ms-upload-preview {
  display: none;
  border: 1.5px solid var(--ms-green); border-radius: var(--ms-radius);
  padding: 12px 16px; background: #f4fce8;
  align-items: center; gap: 12px;
}
.ms-upload-preview.ms-visible { display: flex; }
.ms-preview-icon { font-size: 28px; flex-shrink: 0; }
.ms-preview-info { flex: 1; }
.ms-preview-name { font-size: 14px; font-weight: 700; color: var(--ms-dark); }
.ms-preview-size { font-size: 12px; color: var(--ms-muted); }
.ms-preview-remove { background: none; border: none; color: var(--ms-gray-400); font-size: 18px; cursor: pointer; padding: 4px; }
.ms-preview-remove:hover { color: var(--ms-orange); }

.ms-guest-note {
  background: #fff8f0; border: 1.5px solid #f5c99a;
  border-radius: var(--ms-radius); padding: 10px 14px;
  font-size: 12px; color: #7a4010; margin-top: 8px;
  display: flex; align-items: flex-start; gap: 8px;
}

.ms-designer-btn {
  width: 100%; padding: 12px;
  border: 2px solid var(--ms-dark); border-radius: var(--ms-radius);
  background: #fff; font-size: 14px; font-weight: 800;
  color: var(--ms-dark) !important; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: background var(--ms-transition), color var(--ms-transition);
  text-transform: uppercase; letter-spacing: .04em;
  font-family: inherit;
}
.ms-designer-btn:hover { background: var(--ms-dark); color: #fff !important; }
.ms-designer-badge {
  background: var(--ms-olive); color: var(--ms-dark);
  font-size: 10px; font-weight: 900; padding: 2px 6px;
  border-radius: 2px; text-transform: uppercase;
}

.ms-later-box {
  background: var(--ms-gray-50); border: 1.5px solid var(--ms-gray-200);
  border-radius: var(--ms-radius); padding: 18px;
  font-size: 14px; color: var(--ms-muted); line-height: 1.7;
}
.ms-later-box strong { color: var(--ms-dark); display: block; margin-bottom: 6px; }

/* ── CTA Buttons ─────────────────────────────────────── */
.ms-cta-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.ms-btn-addcart,
.ms-cta-row .single_add_to_cart_button,
.ms-cta-row button.button {
  background: var(--ms-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ms-radius) !important;
  padding: 15px 24px !important;
  font-size: 16px !important; font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important;
  transition: background var(--ms-transition), transform .1s !important;
  letter-spacing: .02em !important; text-transform: uppercase !important;
  width: 100% !important; font-family: inherit !important;
  text-decoration: none !important;
}
.ms-btn-addcart:hover,
.ms-cta-row .single_add_to_cart_button:hover { background: var(--ms-orange-dark) !important; }
.ms-btn-addcart:active { transform: scale(.98) !important; }

.ms-btn-buynow {
  background: var(--ms-dark) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ms-radius) !important;
  padding: 15px 24px !important;
  font-size: 16px !important; font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important;
  transition: background var(--ms-transition) !important;
  text-transform: uppercase !important; letter-spacing: .02em !important;
  width: 100% !important; font-family: inherit !important;
  text-decoration: none !important;
}
.ms-btn-buynow:hover { background: var(--ms-dark2) !important; }

/* variation loading / disabled state */
.ms-cta-row .single_add_to_cart_button.disabled,
.ms-cta-row .single_add_to_cart_button:disabled {
  opacity: .6 !important; cursor: not-allowed !important;
}

/* variation notices */
.ms-variation-notice {
  font-size: 13px; color: var(--ms-muted);
  margin-bottom: 8px; padding: 8px 12px;
  background: var(--ms-gray-50); border-radius: var(--ms-radius);
  border: 1.5px solid var(--ms-border);
}

/* ── USP Mini Strip ──────────────────────────────────── */
.ms-usp-mini {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--ms-gray-100);
  border-radius: var(--ms-radius);
  background: var(--ms-gray-50);
  overflow: hidden;
  margin-bottom: 20px;
}
.ms-usp-item {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: none; border: none;
  transition: background var(--ms-transition);
}
.ms-usp-item:not(:last-child) {
  border-right: 1.5px solid var(--ms-gray-100);
}
.ms-usp-item:hover { background: #fff; }

.ms-usp-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: var(--ms-green);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.ms-usp-icon svg { display: block; }

.ms-usp-body {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.ms-usp-text {
  font-size: 12px !important; font-weight: 800 !important;
  color: var(--ms-dark) !important; line-height: 1.2 !important;
  white-space: nowrap;
}
.ms-usp-sub {
  font-size: 11px !important; color: var(--ms-muted) !important;
  line-height: 1.2 !important; white-space: nowrap;
}

/* ── Trust Row ───────────────────────────────────────── */
.ms-trust-row {
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; padding-top: 16px;
  border-top: 1.5px solid var(--ms-gray-100);
}
.ms-trust-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ms-muted); font-weight: 600; }
.ms-trust-muted { opacity: .5; }

/* ── Detail Tabs Section ─────────────────────────────── */
.ms-detail-tabs-section { max-width: 1280px; margin: 0 auto; padding: 0 24px 64px; }
.ms-dtabs-bar { display: flex; border-bottom: 2px solid var(--ms-gray-100); gap: 0; flex-wrap: wrap; }
.ms-dtab {
  padding: 13px 22px; font-size: 14px; font-weight: 700;
  color: var(--ms-muted); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color var(--ms-transition), border-color var(--ms-transition);
  white-space: nowrap;
}
.ms-dtab.ms-active { color: var(--ms-dark); border-bottom-color: var(--ms-orange); }
.ms-dtab:hover:not(.ms-active) { color: var(--ms-dark); }

.ms-tab-panel { display: none; padding: 36px 0; }
.ms-tab-panel.ms-active { display: block; }

.ms-desc-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; }
.ms-desc-content h2 { font-size: 22px !important; font-weight: 900 !important; margin-bottom: 14px !important; color: var(--ms-dark) !important; }
.ms-desc-content p  { color: var(--ms-muted) !important; line-height: 1.8 !important; margin-bottom: 14px !important; font-size: 15px !important; }
.ms-desc-content ul { padding-left: 20px !important; margin-bottom: 14px !important; list-style: disc !important; }
.ms-desc-content ul li { color: var(--ms-muted) !important; margin-bottom: 6px !important; font-size: 15px !important; }
.ms-desc-content ul li::marker { color: var(--ms-green) !important; }

/* WC short description / product description inside our template */
.ms-desc-content .woocommerce-product-details__short-description p,
.ms-desc-content .woocommerce-product-details__short-description ul li { color: var(--ms-muted) !important; font-size: 15px !important; }

/* ── Spec Table ──────────────────────────────────────── */
.ms-spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ms-spec-table th {
  background: var(--ms-gray-50); text-align: left;
  padding: 10px 14px; font-weight: 700;
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ms-muted); border-bottom: 2px solid var(--ms-gray-100);
}
.ms-spec-table td { padding: 10px 14px; border-bottom: 1px solid var(--ms-gray-100); }
.ms-spec-table tr:last-child td { border-bottom: none; }
.ms-spec-table td:first-child { font-weight: 600; color: var(--ms-dark); width: 45%; }
.ms-spec-table td:last-child  { color: var(--ms-muted); }

/* ── Reviews Tab ─────────────────────────────────────── */
/* Hide parent theme's ugly duplicate summary + redundant heading */
body.ms-productpage #reviews_summary { display: none !important; }
body.ms-productpage .ms-wc-reviews .woocommerce-Reviews-title { display: none !important; }

.ms-reviews-wrap { max-width: 720px; }

/* Rating summary card */
.ms-rating-summary {
  display: flex; align-items: center; gap: 32px; margin-bottom: 28px;
  padding: 24px 28px; background: var(--ms-gray-50);
  border-radius: 8px; border: 1.5px solid var(--ms-gray-200);
}
.ms-rating-big { text-align: center; min-width: 90px; }
.ms-rating-big-num { font-size: 52px; font-weight: 900; color: var(--ms-dark); line-height: 1; }
.ms-rating-big-stars { color: #f5a623; font-size: 20px; margin: 6px 0 4px; }
.ms-rating-big-count { font-size: 12px; color: var(--ms-muted); white-space: nowrap; }
.ms-rating-bars { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ms-rbar-row { display: flex; align-items: center; gap: 10px; }
.ms-rbar-label { font-size: 12px; width: 24px; text-align: right; color: var(--ms-muted); flex-shrink: 0; }
.ms-rbar-track { flex: 1; height: 8px; background: var(--ms-gray-200); border-radius: 4px; overflow: hidden; }
.ms-rbar-fill  { height: 100%; border-radius: 4px; transition: width .4s ease; }
/* Bar colors per star */
.ms-rbar-row:nth-child(1) .ms-rbar-fill { background: var(--ms-green); }
.ms-rbar-row:nth-child(2) .ms-rbar-fill { background: var(--ms-olive); }
.ms-rbar-row:nth-child(3) .ms-rbar-fill { background: #bbb; }
.ms-rbar-row:nth-child(4) .ms-rbar-fill { background: #bbb; }
.ms-rbar-row:nth-child(5) .ms-rbar-fill { background: var(--ms-orange); }
.ms-rbar-pct { font-size: 12px; color: var(--ms-muted); width: 32px; text-align: right; flex-shrink: 0; }

/* WC native reviews wrapper */
.ms-wc-reviews .commentlist { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 16px; }
.ms-wc-reviews .commentlist li { border: 1.5px solid var(--ms-gray-100); border-radius: var(--ms-radius); padding: 18px; background: #fff; }
.ms-wc-reviews .comment-text .description p { font-size: 14px; color: var(--ms-muted); line-height: 1.6; margin: 6px 0 0; }
.ms-wc-reviews .woocommerce-review__author { font-weight: 700; font-size: 14px; color: var(--ms-dark); }
.ms-wc-reviews .woocommerce-review__published-date { font-size: 12px; color: var(--ms-gray-400); margin-left: 6px; }
.ms-wc-reviews .star-rating { color: #f5a623 !important; font-size: 14px; }
.ms-wc-reviews .woocommerce-noreviews { font-size: 14px; color: var(--ms-muted); }

/* Review form */
.ms-wc-reviews #review_form_wrapper { margin-top: 28px; padding-top: 24px; border-top: 1.5px solid var(--ms-gray-100); }
.ms-wc-reviews #review_form .comment-reply-title { font-size: 16px !important; font-weight: 800 !important; color: var(--ms-dark) !important; margin-bottom: 16px !important; }
.ms-wc-reviews #review_form p { margin-bottom: 12px; }
.ms-wc-reviews #review_form label { font-size: 13px; font-weight: 600; color: var(--ms-dark); display: block; margin-bottom: 5px; }
.ms-wc-reviews #review_form input[type="text"],
.ms-wc-reviews #review_form input[type="email"],
.ms-wc-reviews #review_form textarea {
  width: 100% !important; border: 1.5px solid var(--ms-gray-200) !important;
  border-radius: var(--ms-radius) !important; padding: 9px 12px !important;
  font-size: 14px !important; font-family: inherit !important;
  transition: border-color var(--ms-transition) !important; box-sizing: border-box !important;
}
.ms-wc-reviews #review_form input:focus,
.ms-wc-reviews #review_form textarea:focus { border-color: var(--ms-green) !important; outline: none !important; }
.ms-wc-reviews .stars a { color: #f5a623 !important; font-size: 20px !important; }
.ms-wc-reviews #review_form input[type="submit"] {
  background: var(--ms-dark) !important; color: #fff !important;
  border: none !important; border-radius: var(--ms-radius) !important;
  padding: 11px 28px !important; font-size: 14px !important; font-weight: 700 !important;
  cursor: pointer !important; font-family: inherit !important; text-transform: uppercase !important;
  letter-spacing: .03em !important; transition: background var(--ms-transition) !important;
}

/* ── Download Template Tab ───────────────────────────── */
.ms-guideline-wrap { padding: 8px 0; }
.ms-guideline-desc { font-size: 14px; color: var(--ms-text); margin-bottom: 20px; }
.ms-guideline-title { font-size: 13px; font-weight: 700; color: var(--ms-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
.ms-guideline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.ms-guideline-item { }
.ms-guideline-link {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 20px; border: 1.5px solid var(--ms-gray-200);
  border-radius: var(--ms-radius); background: #fff; text-decoration: none;
  transition: border-color var(--ms-transition), box-shadow var(--ms-transition);
  min-width: 90px;
}
.ms-guideline-link:hover { border-color: var(--ms-green); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.ms-guideline-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .03em; color: #fff;
  background: var(--ms-muted);
}
.ms-gi-pdf { background: #e8420a; }
.ms-gi-ai  { background: #ff7c00; }
.ms-gi-eps { background: #6ab023; }
.ms-gi-png, .ms-gi-jpg, .ms-gi-jpeg { background: #3b82f6; }
.ms-gi-zip { background: #7c3aed; }
.ms-guideline-name { font-size: 12px; font-weight: 600; color: var(--ms-dark); text-align: center; max-width: 100px; word-break: break-word; }

/* ── Related Products ────────────────────────────────── */
.ms-related-section { background: var(--ms-gray-50); padding: 56px 0; }
.ms-related-inner   { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.ms-section-header  { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; }
.ms-section-title   { font-size: 22px !important; font-weight: 900 !important; color: var(--ms-dark) !important; }
.ms-section-link    { font-size: 13px; font-weight: 700; color: var(--ms-green) !important; margin-left: auto; }
.ms-section-link:hover { text-decoration: underline !important; }

.ms-related-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.ms-rel-card {
  background: #fff; border: 1.5px solid var(--ms-gray-100);
  border-radius: var(--ms-radius); overflow: hidden;
  transition: box-shadow var(--ms-transition), border-color var(--ms-transition);
  cursor: pointer; text-decoration: none !important;
  display: block; color: var(--ms-text) !important;
}
.ms-rel-card:hover { box-shadow: var(--ms-shadow-md); border-color: var(--ms-gray-200); }
.ms-rel-img { aspect-ratio: 1/1; background: var(--ms-gray-50); overflow: hidden; }
.ms-rel-img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform .2s; }
.ms-rel-card:hover .ms-rel-img img { transform: scale(1.04); }
.ms-rel-body { padding: 14px; }
.ms-rel-name  { font-size: 14px; font-weight: 700; margin-bottom: 6px; line-height: 1.3; color: var(--ms-dark); }
.ms-rel-price { font-size: 16px; font-weight: 900; color: var(--ms-orange); }
.ms-rel-unit  { font-size: 11px; color: var(--ms-muted); }

/* ── Lightbox ────────────────────────────────────────── */
.ms-lightbox {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.88); z-index: 9999;
  align-items: center; justify-content: center;
}
.ms-lightbox.ms-open { display: flex; }
.ms-lightbox-inner { position: relative; max-width: 90vw; max-height: 90vh; }
.ms-lightbox-inner img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: var(--ms-radius); display: block; }
.ms-lightbox-close {
  position: absolute; top: -38px; right: 0;
  background: none; border: none; color: #fff;
  font-size: 28px; cursor: pointer; line-height: 1;
}

/* ── Toast ───────────────────────────────────────────── */
.ms-toast {
  position: fixed; bottom: 28px; right: 28px;
  background: var(--ms-dark); color: #fff;
  border-radius: var(--ms-radius); padding: 14px 20px;
  font-size: 14px; font-weight: 700; z-index: 10000;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--ms-shadow-md);
  transform: translateY(80px); opacity: 0;
  transition: transform .3s, opacity .3s;
  pointer-events: none;
}
.ms-toast.ms-show { transform: translateY(0); opacity: 1; }
.ms-toast-tick { color: var(--ms-green); font-size: 18px; }

/* ── Top progress bar ────────────────────────────────── */
.ms-topbar-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 10001;
  background: transparent; pointer-events: none;
}
.ms-topbar-progress.ms-loading {
  background: linear-gradient(90deg, var(--ms-green) 0%, var(--ms-olive) 50%, var(--ms-green) 100%);
  background-size: 200% 100%;
  animation: ms-progress-slide 1.2s linear infinite;
}
@keyframes ms-progress-slide {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
  .ms-product-grid { grid-template-columns: 1fr; gap: 28px; }
  .ms-gallery      { position: static !important; }
  .ms-desc-grid    { grid-template-columns: 1fr; }
.ms-related-grid { grid-template-columns: repeat(2,1fr); }
  .ms-flow-step    { padding: 4px 14px; }
  .ms-prod-title   { font-size: 22px !important; }
}
@media (max-width: 520px) {
  .ms-related-grid { grid-template-columns: repeat(2,1fr); }
  .ms-usp-mini     { grid-template-columns: repeat(3,1fr); }
  .ms-product-section { padding: 20px 16px 40px; }
  .ms-detail-tabs-section { padding: 0 16px 48px; }
  .ms-dtab { padding: 11px 14px; font-size: 13px; }

  /* Flow banner: stack 2x2 on small screens */
  .ms-flow-inner {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 14px 16px;
  }
  .ms-flow-step  { padding: 4px 10px; }
  .ms-flow-step:not(:last-child)::after { display: none; }

  /* WIS SELECTIE / reset button: no float on mobile — display below options */
  .ms-wc-addtocart button.button:not(.single_add_to_cart_button),
  .ms-wc-addtocart a.button:not(.single_add_to_cart_button):not([class*="nbdesigner"]):not([class*="nbd"]) {
    float: none !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 6px 0 0 !important;
  }
}

/* ── WooCommerce Native Add-to-Cart Form ─────────────── */
/* Replaces our old custom form — plugins (NBDesigner, addons, etc.)
   inject their content via WC hooks which fire inside here. */

.ms-wc-addtocart { margin-bottom: 14px; }

.ms-wc-addtocart form.cart,
.ms-wc-addtocart form.variations_form {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

/* ── WC Variations table (attribute selects) ─────────── */
.ms-wc-addtocart .variations {
  width: 100% !important; border-collapse: collapse !important;
  display: block !important; margin-bottom: 16px !important;
}
.ms-wc-addtocart .variations tbody,
.ms-wc-addtocart .variations tr { display: block !important; }
.ms-wc-addtocart .variations th,
.ms-wc-addtocart .variations td {
  display: block !important; padding: 0 !important;
  border: none !important; background: none !important;
}
.ms-wc-addtocart .variations tr { margin-bottom: 16px !important; }
.ms-wc-addtocart .variations label {
  font-size: 13px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .02em !important;
  color: var(--ms-dark) !important; display: block !important;
  margin-bottom: 7px !important;
}
.ms-wc-addtocart .variations .value { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }
.ms-wc-addtocart .variations select {
  width: 100% !important; padding: 9px 12px !important;
  border: 1.5px solid var(--ms-gray-200) !important;
  border-radius: var(--ms-radius) !important;
  font-size: 14px !important; font-weight: 500 !important;
  background: #fff !important; color: var(--ms-dark) !important;
  cursor: pointer !important; font-family: inherit !important; outline: none !important;
}
.ms-wc-addtocart .variations select:focus { border-color: var(--ms-green) !important; }
.ms-wc-addtocart .reset_variations {
  font-size: 12px !important; color: var(--ms-muted) !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
}
.ms-wc-addtocart .reset_variations:hover { color: var(--ms-orange) !important; }

/* ── WC Variation price & availability ───────────────── */
.ms-wc-addtocart .woocommerce-variation { margin-bottom: 10px !important; }
.ms-wc-addtocart .woocommerce-variation-price { margin-bottom: 8px !important; }
.ms-wc-addtocart .woocommerce-variation-price .price { font-size: 20px !important; font-weight: 900 !important; color: var(--ms-orange) !important; }
.ms-wc-addtocart .woocommerce-variation-availability p { font-size: 13px !important; margin: 0 !important; }

/* ── WC Product Add-Ons (bedrukking, opstartkosten, …) ── */
.ms-wc-addtocart .wc-pao-addon-wrap { margin-bottom: 16px !important; }
.ms-wc-addtocart .wc-pao-addon      { margin-bottom: 16px !important; }
.ms-wc-addtocart .wc-pao-addon-name,
.ms-wc-addtocart .wc-pao-addon-name h3 {
  font-size: 13px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .02em !important;
  color: var(--ms-dark) !important; margin-bottom: 8px !important; border: none !important;
}
.ms-wc-addtocart .wc-pao-addon-options {
  display: flex !important; flex-direction: column !important; gap: 6px !important;
  margin: 0 !important; padding: 0 !important;
}
.ms-wc-addtocart .wc-pao-addon-item {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 9px 12px !important;
  border: 1.5px solid var(--ms-gray-200) !important; border-radius: var(--ms-radius) !important;
  cursor: pointer !important; background: #fff !important;
  transition: border-color var(--ms-transition), background var(--ms-transition) !important;
}
.ms-wc-addtocart .wc-pao-addon-item:has(input:checked) {
  border-color: var(--ms-green) !important; background: #f0f8e6 !important;
}
.ms-wc-addtocart .wc-pao-addon-item label {
  cursor: pointer !important; font-size: 14px !important;
  font-weight: 500 !important; color: var(--ms-text) !important;
  flex: 1 !important; margin: 0 !important;
}
.ms-wc-addtocart .wc-pao-addon-item input[type="radio"],
.ms-wc-addtocart .wc-pao-addon-item input[type="checkbox"] {
  accent-color: var(--ms-green) !important;
  width: 16px !important; height: 16px !important; flex-shrink: 0 !important;
  margin: 0 !important;
}
.ms-wc-addtocart .wc-pao-addon-price-extra { font-size: 13px !important; color: var(--ms-muted) !important; white-space: nowrap !important; }

/* Opsomming van de opties (addon pricing summary table) */
.ms-wc-addtocart .wc-pao-totals-table {
  width: 100% !important; border-collapse: collapse !important;
  margin: 12px 0 !important; font-size: 14px !important;
}
.ms-wc-addtocart .wc-pao-totals-table th,
.ms-wc-addtocart .wc-pao-totals-table td {
  padding: 8px 10px !important; border-bottom: 1px solid var(--ms-gray-100) !important;
  text-align: left !important;
}
.ms-wc-addtocart .wc-pao-totals-table th {
  font-size: 12px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .04em !important;
  background: var(--ms-gray-50) !important; color: var(--ms-muted) !important;
}
.ms-wc-addtocart .wc-pao-totals-table tfoot td { font-weight: 700 !important; color: var(--ms-dark) !important; }

/* ── WC Quantity (JS wraps it with ms-qty-wrap) ───────── */
/* The quantity label above the input */
.ms-wc-addtocart .quantity label {
  font-size: 13px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .02em !important;
  color: var(--ms-dark) !important; display: block !important; margin-bottom: 7px !important;
}
/* Prevent WC from forcing fixed width on the quantity block */
.ms-wc-addtocart .variations_button .quantity,
.ms-wc-addtocart .cart .quantity { margin: 12px 0 12px 0 !important; }

/* ── WC Add-to-Cart button (chỉ nút submit thật) ─────── */
.ms-wc-addtocart .single_add_to_cart_button {
  background: var(--ms-orange) !important;
  color: #fff !important; border: none !important;
  border-radius: var(--ms-radius) !important;
  padding: 15px 24px !important;
  font-size: 16px !important; font-weight: 800 !important;
  cursor: pointer !important;
  display: block !important; width: 100% !important;
  text-align: center !important;
  text-transform: uppercase !important; letter-spacing: .02em !important;
  transition: background var(--ms-transition), transform .1s !important;
  font-family: inherit !important; line-height: 1.2 !important;
  text-decoration: none !important;
  margin: 12px 0 0 0 !important;
  box-shadow: none !important;
}
.ms-wc-addtocart .single_add_to_cart_button:hover {
  background: var(--ms-orange-dark) !important; color: #fff !important;
}
.ms-wc-addtocart .single_add_to_cart_button.disabled,
.ms-wc-addtocart .single_add_to_cart_button:disabled {
  opacity: .5 !important; cursor: not-allowed !important;
}
.ms-wc-addtocart .single_add_to_cart_button:active { transform: scale(.98) !important; }

/* Cart icon via ::before pseudo-element */
.ms-wc-addtocart .single_add_to_cart_button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
.ms-wc-addtocart .single_add_to_cart_button::before {
  content: '' !important;
  display: inline-block !important;
  width: 20px !important; height: 20px !important;
  flex-shrink: 0 !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
}
/* Hide icon when button is in loading state */
.ms-wc-addtocart .single_add_to_cart_button.loading::before { display: none !important; }

/* ── Các button.button khác (Wis selectie / reset) ──────
   Không full-width cam — nhỏ gọn, căn phải                */
.ms-wc-addtocart button.button:not(.single_add_to_cart_button),
.ms-wc-addtocart a.button:not(.single_add_to_cart_button):not([class*="nbdesigner"]):not([class*="nbd"]) {
  background: transparent !important;
  color: var(--ms-muted) !important;
  border: 1.5px solid var(--ms-gray-200) !important;
  width: auto !important;
  display: inline-block !important;
  padding: 6px 14px !important;
  font-size: 12px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  border-radius: var(--ms-radius) !important;
  margin: 8px 0 8px auto !important;
  float: right !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: color var(--ms-transition), border-color var(--ms-transition) !important;
}
.ms-wc-addtocart button.button:not(.single_add_to_cart_button):hover {
  color: var(--ms-orange) !important; border-color: var(--ms-orange) !important;
}

/* ── NBDesigner button ────────────────────────────────── */
/* NBDesigner injects its button via woocommerce_before_add_to_cart_button */
.ms-wc-addtocart a[class*="nbdesigner"],
.ms-wc-addtocart button[class*="nbdesigner"],
.ms-wc-addtocart .nbdesigner-product-page-btn,
.ms-wc-addtocart .nbd-add-to-cart-btn,
.ms-wc-addtocart .nbdesigner-customization-btn,
.ms-wc-addtocart [id*="nbdesigner"] a.button,
.ms-wc-addtocart .wc-nbdesigner-btn {
  background: var(--ms-dark) !important;
  color: #fff !important; border: none !important;
  border-radius: var(--ms-radius) !important;
  padding: 13px 20px !important;
  font-size: 14px !important; font-weight: 800 !important;
  cursor: pointer !important;
  display: block !important; width: 100% !important; text-align: center !important;
  text-transform: uppercase !important; letter-spacing: .02em !important;
  margin-bottom: 10px !important; font-family: inherit !important;
  text-decoration: none !important;
}
.ms-wc-addtocart a[class*="nbdesigner"]:hover,
.ms-wc-addtocart button[class*="nbdesigner"]:hover,
.ms-wc-addtocart .nbdesigner-product-page-btn:hover {
  background: var(--ms-dark2) !important; color: #fff !important;
}

/* "Direct bestellen" button sits below the WC form */
.ms-product-info > .ms-btn-buynow { margin-bottom: 20px !important; }

/* ── NBDesigner tab UI ─────────────────────────────── */

.nbdesigner_frontend_container { margin: 0 0 20px !important; }

/* Tab bar */
.nbdesigner_frontend_container .nbd-actions-wrap {
  display: flex !important;
  align-items: stretch !important;
  border: 1.5px solid var(--ms-gray-200) !important;
  border-radius: var(--ms-radius) var(--ms-radius) 0 0 !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}
.nbdesigner_frontend_container .nbd-action-wrap { flex: 1 !important; }

/* Tab buttons — reset orange .button.alt style */
.nbdesigner_frontend_container a.nbdesign-button {
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  gap: 8px !important; padding: 11px 8px !important;
  font-size: 13px !important; font-weight: 700 !important;
  background: #fff !important; color: var(--ms-muted) !important;
  border: none !important; border-radius: 0 !important;
  text-decoration: none !important; cursor: pointer !important;
  width: 100% !important; box-sizing: border-box !important;
  text-transform: none !important; letter-spacing: 0 !important;
  box-shadow: none !important; margin: 0 !important;
  transition: background var(--ms-transition), color var(--ms-transition) !important;
}
.nbdesigner_frontend_container .nbd-action-wrap:not(:last-child) a.nbdesign-button {
  border-right: 1.5px solid var(--ms-gray-200) !important;
}
.nbdesigner_frontend_container a.nbdesign-button:hover {
  background: var(--ms-gray-100) !important; color: var(--ms-dark) !important;
}
.nbdesigner_frontend_container a.nbdesign-button.nbd-active {
  background: var(--ms-dark) !important; color: #fff !important;
}
/* Active tab icon: white — skip paths that are explicitly transparent */
.nbdesigner_frontend_container a.nbdesign-button.nbd-active svg path:not([fill="none"]) {
  fill: #fff !important; stroke: #fff !important;
}
/* Inactive tab icon: dark/muted so it's visible on white background */
.nbdesigner_frontend_container a.nbdesign-button:not(.nbd-active) svg path:not([fill="none"]) {
  fill: var(--ms-muted) !important;
}

/* ── Override plugin full-screen → inline on product page ── */
body.ms-productpage #container-online-designer {
  position: static !important;
  top: auto !important; left: auto !important;
  width: 100% !important; height: auto !important;
  z-index: 1 !important;
  opacity: 1 !important; visibility: visible !important;
  background: transparent !important; overflow: visible !important;
  transform: none !important; transition: none !important;
}
body.ms-productpage #container-online-designer.is-visible { z-index: 1 !important; }

/* Full-screen mode restored only when user explicitly opens the designer */
body.ms-productpage.nbd-fs-active #container-online-designer {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  z-index: 999999999 !important;
  opacity: 1 !important; visibility: visible !important;
  overflow: hidden !important; background: #fff !important;
}
/* Allow scroll on product page unless designer is open */
body.ms-productpage.nbd-prevent-scroll:not(.nbd-fs-active) {
  overflow: auto !important; height: auto !important; width: auto !important;
}

/* Panels hidden by default; shown by our JS via .nbd-tab-active */
body.ms-productpage #nbd-m-upload-design-wrap,
body.ms-productpage #nbd-m-custom-design-wrap {
  display: none !important;
  opacity: 1 !important; visibility: visible !important;
  position: static !important; z-index: auto !important;
}
body.ms-productpage #nbd-m-upload-design-wrap.nbd-tab-active,
body.ms-productpage #nbd-m-custom-design-wrap.nbd-tab-active {
  display: block !important;
  border: 1.5px solid var(--ms-gray-200) !important;
  border-top: none !important;
  border-radius: 0 0 var(--ms-radius) var(--ms-radius) !important;
  background: var(--ms-gray-50) !important;
  padding: 16px !important; box-sizing: border-box !important;
}

/* Hide popup overlay & close button in inline mode */
body.ms-productpage .nbd-popup-wrap { display: none !important; }
body.ms-productpage #closeFrameDesign { display: none !important; }
body.ms-productpage.nbd-fs-active #closeFrameDesign { display: block !important; }

/* ── Upload panel (correct selectors — inside #container-online-designer) ── */
#nbd-m-upload-design-wrap .nbd-upload-inner h2 { display: none !important; }
#nbd-m-upload-design-wrap .nbd-upload-loading { display: none !important; }
#nbd-m-upload-design-wrap .nbd-upload-loading.is-visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2 !important;
}

#nbd-m-upload-design-wrap .nbu-upload-zone {
  border: 2px dashed var(--ms-gray-200) !important;
  border-radius: var(--ms-radius) !important;
  background: #fff !important;
  display: block !important; width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color .2s, background .2s !important;
  cursor: pointer !important; position: relative !important; overflow: hidden !important;
}
#nbd-m-upload-design-wrap .nbu-upload-zone:hover {
  border-color: var(--ms-green) !important; background: #f4fce8 !important;
}
#nbd-m-upload-design-wrap .nbu-inputfile {
  position: absolute !important; width: 1px !important; height: 1px !important;
  opacity: 0 !important; overflow: hidden !important; pointer-events: none !important;
}
#nbd-m-upload-design-wrap .nbu-upload-zone label {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  text-align: center !important; padding: 28px 20px 20px !important;
  cursor: pointer !important; gap: 4px !important;
  color: var(--ms-muted) !important; font-size: 13px !important; font-weight: 500 !important;
}
#nbd-m-upload-design-wrap .nbu-upload-zone label svg {
  width: 38px !important; height: 38px !important;
  margin-bottom: 8px !important; fill: var(--ms-muted) !important; opacity: .55 !important;
}
#nbd-m-upload-design-wrap .nbu-upload-zone label > span:first-of-type {
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--ms-dark) !important; margin: 0 0 4px !important;
}
#nbd-m-upload-design-wrap .nbu-upload-zone label span {
  color: var(--ms-muted) !important; font-size: 12px !important;
}
#nbd-m-upload-design-wrap .nbu-upload-zone label span small {
  font-size: 11px !important; color: var(--ms-muted) !important; line-height: 1.5 !important;
}
#nbd-m-upload-design-wrap .nbu-upload-zone label::after {
  content: 'Kies bestand' !important;
  display: inline-block !important; margin-top: 14px !important;
  background: var(--ms-green) !important; color: #fff !important;
  font-size: 13px !important; font-weight: 700 !important;
  padding: 8px 22px !important; border-radius: var(--ms-radius) !important;
  cursor: pointer !important; letter-spacing: .02em !important; font-family: inherit !important;
}
#nbd-m-upload-design-wrap .nbu-upload-zone:hover label::after { background: #5a9a1d !important; }

#nbd-m-upload-design-wrap .submit-upload-design {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; box-sizing: border-box !important;
  background: var(--ms-dark) !important; color: #fff !important;
  border: none !important; border-radius: var(--ms-radius) !important;
  padding: 11px 20px !important; font-size: 14px !important; font-weight: 800 !important;
  cursor: pointer !important; font-family: inherit !important;
  text-transform: uppercase !important; letter-spacing: .03em !important;
  margin-top: 12px !important; transition: background var(--ms-transition) !important;
  box-shadow: none !important; outline: none !important; -webkit-appearance: none !important;
}
#nbd-m-upload-design-wrap .submit-upload-design:hover { background: var(--ms-dark2) !important; }
#nbd-m-upload-design-wrap .submit-upload-design span {
  color: #fff !important; display: block !important; text-align: center !important; width: 100% !important;
}
#nbd-m-upload-design-wrap p[onclick="backtoOption()"] {
  display: none !important;
}

/* ── Designer panel — "OPEN NBDESIGNER" button ── */
#nbd-m-custom-design-wrap #nbd_processing { display: none !important; }

.ms-nbd-open-wrap { padding: 4px 0 !important; }
a.ms-open-designer-btn {
  display: flex !important; align-items: center !important;
  justify-content: center !important; gap: 10px !important;
  background: var(--ms-dark) !important; color: #fff !important;
  border: none !important; border-radius: var(--ms-radius) !important;
  padding: 13px 20px !important; font-size: 14px !important; font-weight: 800 !important;
  cursor: pointer !important; text-decoration: none !important; width: 100% !important;
  box-sizing: border-box !important; text-transform: uppercase !important;
  letter-spacing: .04em !important; font-family: inherit !important;
  transition: background var(--ms-transition) !important;
}
a.ms-open-designer-btn:hover { background: var(--ms-dark2) !important; }
.ms-nbd-badge {
  background: var(--ms-olive) !important; color: var(--ms-dark) !important;
  font-size: 10px !important; font-weight: 800 !important;
  padding: 2px 7px !important; border-radius: 3px !important;
  letter-spacing: .06em !important; white-space: nowrap !important;
}

/* Hide upload preview while panel is open; show after AFGEROND */
body.ms-productpage #nbdesigner-upload-title { display: none !important; }
body.ms-productpage #nbdesigner_upload_preview { display: none !important; }

/* After AFGEROND: show thumbnail confirmation below the tab bar */
body.ms-productpage.nbd-upload-done #nbdesigner-upload-title {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ms-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  margin: 12px 0 6px !important;
}
body.ms-productpage.nbd-upload-done #nbdesigner_upload_preview {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}
body.ms-productpage.nbd-upload-done #nbdesigner_upload_preview .img-con {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
}
body.ms-productpage.nbd-upload-done #nbdesigner_upload_preview .img-con img {
  width: 64px !important; height: 64px !important;
  object-fit: cover !important;
  border-radius: var(--ms-radius) !important;
  border: 1.5px solid var(--ms-gray-200) !important;
}
body.ms-productpage.nbd-upload-done #nbdesigner_upload_preview .nbd-file-title {
  font-size: 11px !important;
  color: var(--ms-muted) !important;
  max-width: 72px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin: 0 !important;
}


/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.ms-productpage * { transition: none !important; animation: none !important; }
}