/* Container */
.mkep-widget{
  border:1px solid #e5e7eb; background:#fff; padding:16px; border-radius:10px; margin:12px 0;
}

/* Grid: 4 per row (2 on mobile) */
.mkep-widget .mkep-sizes{
  display:grid;
  grid-template-columns:repeat(4, minmax(140px, 1fr));
  gap:16px;
}
@media (max-width: 768px){
  .mkep-widget .mkep-sizes{ grid-template-columns:repeat(2, minmax(140px, 1fr)); }
}

/* Card */
.mkep-widget .mkep-size{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:14px 16px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}

/* Size label */
.mkep-widget .mkep-size-label{
  font-weight:700; letter-spacing:.02em; text-transform:uppercase;
}

/* Neutralize theme button styles inside the widget */
.mkep-widget .button,
.mkep-widget .button:focus,
.mkep-widget .button:active{
  background:#f3f4f6; border:1px solid #e5e7eb; color:#111;
  box-shadow:none; text-shadow:none;
}

/* Stepper: group the 3 controls so it looks like a single pill */
.mkep-widget .mkep-dec,
.mkep-widget .mkep-inc{
  display:inline-block; min-width:34px; height:34px; line-height:32px; text-align:center;
  background:#f3f4f6; border:1px solid #e5e7eb; color:#111; cursor:pointer;
  padding:0 10px; font-weight:600;
}
.mkep-widget .mkep-dec{ border-top-left-radius:6px; border-bottom-left-radius:6px; border-right:0; }
.mkep-widget .mkep-inc{ border-top-right-radius:6px; border-bottom-right-radius:6px; border-left:0; }
.mkep-widget .mkep-dec:hover,
.mkep-widget .mkep-inc:hover{ background:#e5e7eb; }

/* The number in the middle */
.mkep-widget .mkep-qty{
  width:56px; height:34px; text-align:center; margin:0;
  border:1px solid #e5e7eb; border-left:0; border-right:0;
  outline:0; background:#fff;
}

.mkep-exvat {
  display:none;
}

.value disable-to-select{
    display:none !important;
}

/* Remove native spinners for cleaner look */
.mkep-widget input[type=number]::-webkit-outer-spin-button,
.mkep-widget input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.mkep-widget input[type=number]{ -moz-appearance:textfield; }

/* Keep spacing when placed under variations table */
.single-product .variations + .mkep-widget{ margin-top:12px; }

/* Grid of size cards (4 per row desktop, 2 per row mobile) */
.mkep-widget .mkep-sizes{
  display:grid;
  grid-template-columns:repeat(4, minmax(140px,1fr));
  gap:16px;
}
@media (max-width: 768px){
  .mkep-widget .mkep-sizes{ grid-template-columns:repeat(2, minmax(140px,1fr)); }
}

/* Card */
.mkep-widget .mkep-size{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:14px 16px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.mkep-widget .mkep-size-label{
  font-weight:700; letter-spacing:.02em; text-transform:uppercase;
}

/* Row stepper (pill) */
.mkep-widget .mkep-stepper{
  display:inline-flex; align-items:center; overflow:hidden;
  border:1px solid #e5e7eb; border-radius:6px; background:#fff;
}

/* Our own buttons to avoid theme overrides */
.mkep-widget .mkep-btn{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:#f3f4f6 !important; color:#111 !important;
  border:0; padding:0 12px; height:36px; line-height:36px; font-weight:600; cursor:pointer;
}
.mkep-widget .mkep-btn:focus{ outline:2px solid #d1d5db; outline-offset:0; }
.mkep-widget .mkep-btn:hover{ background:#e5e7eb !important; }

/* Middle number */
.mkep-widget .mkep-qty{
  width:56px; height:36px; text-align:center; margin:0;
  border:0; border-left:1px solid #e5e7eb; border-right:1px solid #e5e7eb; background:#fff;
}
.mkep-widget input[type=number]::-webkit-outer-spin-button,
.mkep-widget input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.mkep-widget input[type=number]{ -moz-appearance:textfield; }

/* Keep spacing under attributes */
.single-product .variations + .mkep-widget{ margin-top:12px; }
/* Ensure grid preserves flow left->right */
.mkep-widget .mkep-sizes{
  display:grid; grid-auto-flow:row; grid-template-columns:repeat(4,minmax(140px,1fr)); gap:16px;
}

/* Stepper pill with full-height separators handled by the buttons */
.mkep-widget .mkep-stepper{
  display:inline-flex; align-items:center; background:#fff;
  border:1px solid #e5e7eb; border-radius:6px; overflow:hidden;
}
.mkep-widget .mkep-btn{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  height:36px; padding:0 12px; margin:0; border:0; cursor:pointer;
  background:#f3f4f6 !important; color:#111 !important; font-weight:600;
}
.mkep-widget .mkep-btn:first-child{ border-right:1px solid #e5e7eb; } /* left separator */
.mkep-widget .mkep-btn:last-child{  border-left:1px solid #e5e7eb; }  /* right separator */
.mkep-widget .mkep-qty{
  width:56px; height:36px; border:0; margin:0; text-align:center; background:#fff;
}

/* Bold, centered +/- */
.mkep-widget .mkep-btn{
  display:inline-flex;             /* perfect centering */
  align-items:center;
  justify-content:center;
  font-weight:800;                 /* bolder */
  font-size:18px;                  /* a bit larger */
}

/* Bold, centered quantity */
.mkep-widget .mkep-qty{
  text-align:center;
  font-weight:700;
  font-size:16px;
  font-variant-numeric: tabular-nums; /* cleaner digits */
  padding:0;                         /* keeps vertical centering with fixed height */
}

/* Bulk pricing strip (under main price) */
.mkep-bulk-strip{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:18px;
  background:#f7f7f7;
  padding:16px;
  border-radius:6px;
  margin:12px 0 0;
}
@media (max-width:900px){ .mkep-bulk-strip{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .mkep-bulk-strip{ grid-template-columns:repeat(2,1fr); } }

.mkep-bulk-cell{ text-align:center; }
.mkep-bulk-qty  { font-size:12px; color:#111; opacity:.85; margin-bottom:2px; }
.mkep-bulk-from { font-weight:600; margin-bottom:2px; }
.mkep-bulk-price{ font-size:24px; font-weight:700; line-height:1.1; margin:2px 0; color:#2b5e7a; }
.mkep-bulk-each { font-weight:600; }

/* CTA row */
.mkep-cta-row{
  display:flex; gap:24px; align-items:center;
  margin:12px 0 18px;
}
.mkep-cta{
  display:flex; align-items:center; gap:10px;
  padding:14px 18px; font-weight:700; color:#fff;
  border:0; cursor:pointer; border-radius:2px;
}
.mkep-cta__icon{ display:inline-block; }
.mkep-cta--customisation{ background:#285C7A; } /* blue */
.mkep-cta--customisation:hover { color:#285C7A !important; } /* blue */
.mkep-cta--delivery{ background:#000;display:none !important; }

/* Modal shell */
.mkep-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.mkep-modal.is-open{ display:block; }
.mkep-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.mkep-modal__dialog{
  position:relative; margin:40px auto; max-width:980px; background:#fff;
  border-radius:8px; padding:22px;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
}
.mkep-modal__close{
  position:absolute; right:12px; top:8px;
  width:36px; height:36px; border:0; border-radius:50%;
  background:#111; color:#fff; font-size:20px; line-height:36px; cursor:pointer;
}
.mkep-modal__title{ margin: 0 0 14px; font-size:20px; }

/* Grid of positions */
.mkep-modal__grid{
  display:grid; gap:18px; grid-template-columns:repeat(4, minmax(0,1fr));
}
.mkep-pos-card{
  display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center;
  border:1px solid #e5e7eb; border-radius:8px; background:#fff; padding:14px;
  cursor:pointer; text-align:center;
}
.mkep-pos-card:hover{ box-shadow:0 6px 16px rgba(0,0,0,.08); }
.mkep-pos__img img{ display:block; width:160px; height:auto; object-fit:contain; }
.mkep-pos__ph{ width:160px; height:160px; display:grid; place-items:center; background:#f3f4f6; border-radius:6px; font-weight:700; color:#9ca3af; }
.mkep-pos__name{ font-weight:700; }

/* Prevent body scroll when modal open */
body.mkep-modal-open{ overflow:hidden; }

/* Responsive */
@media (max-width: 1024px){ .mkep-modal__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 680px){ .mkep-modal__grid{ grid-template-columns:repeat(2,1fr); } }

/* --- CTA row (below bulk strip) --- */
.mkep-cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:12px;
  margin-bottom:6px;
}
.mkep-bulk-strip + .mkep-cta-row{ margin-top:12px; } /* when injected right after the strip */

.mkep-cta{
  appearance:none;
  border:1px solid #e5e7eb; /* gray-200 */
  background:#fff;
  color:#111827;            /* gray-900 */
  padding:10px 14px;
  border-radius:10px;
  font-weight:600;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
.mkep-cta:hover{ background:#e1e1e1 !important; color:#1e356f !important; }  /* gray-100 */
.mkep-cta__icon{ display:inline-block; }

/* --- Modal --- */
.mkep-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.mkep-modal.is-open{ display:block; }
.mkep-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.4); }
.mkep-modal__dialog{
  position:relative;
  max-width:860px;
  margin:10vh auto;
  background:#fff;
  border-radius:12px;
  padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.mkep-modal__title{ margin:0 0 12px; font-size:20px; font-weight:700; }
.mkep-modal__close{
  position:absolute; top:10px; right:12px;
  background:transparent; border:0; font-size:24px; cursor:pointer;
}
body.mkep-modal-open{ overflow:hidden; }

/* Cards inside modal */
.mkep-modal__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:12px;
}
.mkep-pos-card{
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  padding:10px;
  text-align:center;
  cursor:pointer;
  transition:box-shadow .15s, border-color .15s;
}
.mkep-pos-card:hover{
  border-color:#111827;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.mkep-pos__img img{
  max-width:100%; height:auto; display:block; margin:0 auto 8px; border-radius:8px;
}
.mkep-pos__name{ font-weight:600; font-size:14px; color:#111827; }

/* Add-to-basket panel */
.mkep-step-title{display:flex;align-items:center;gap:.5rem;margin:0 0 .75rem;font-weight:700; font-size:17px;}
.mkep-step{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#1f5577;color:#fff;font-weight:700}
.mkep-basket{border:1px solid #cfd8e3;background:#fff;border-radius:6px;padding:16px;margin:20px 0}
.mkep-basket__row{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:12px}
.mkep-basket__stat{background:#f3f6f9;border-radius:6px;padding:12px 16px;min-width:220px}
.mkep-basket__num{font-weight:700;font-size:20px}
.mkep-basket__warning{background:#f7fafc;border-left:4px solid #5aa0c7;padding:12px 16px;border-radius:4px;margin:8px 0 12px}
.mkep-basket__check{display:flex;align-items:center;justify-content:space-between;background:#f1f3f5;padding:12px 16px;border-radius:6px;margin:10px 0}
.mkep-basket__btn{display:block;width:100%;border:0;border-radius:8px;padding:14px 18px;background:#09b64e;color:#fff;font-weight:700;font-size:18px;cursor:pointer}
#mkep-basket-btn[disabled]{opacity:.5;cursor:not-allowed}

/* Example cards */
.mkep-example{border:1px solid #e3e8ee;border-radius:6px;margin-top:18px}
.mkep-example__title{padding:14px 16px;border-bottom:1px solid #e5e9ef;text-align:center;font-weight:700}
.mkep-example__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:16px}
.mkep-example__card{background:#f8fafc;border-radius:6px}
.mkep-example__head{background:#2b5c7d;color:#fff;padding:12px 16px;border-radius:6px 6px 0 0;font-weight:700}
.mkep-example__body{padding:12px 16px}
.mkep-example__row{display:flex;gap:8px;align-items:baseline;margin:6px 0}
.mkep-example__total{padding:12px 16px;border-top:1px solid #e5e9ef;font-weight:700}
.mkep-example__note{font-size:12px;text-align:center;color:#6b7280;padding:10px 12px}

/* Modal image: remove hover scale */
.mkep-pos-card .mkep-pos__img.nohover img{transform:none !important}

/* Hide Woo's native add-to-cart row for the main product only */
.single-product .summary form.cart .woocommerce-variation-add-to-cart,
.single-product .summary form.cart .variations_button,
.single-product .summary form.cart .quantity,
.single-product .summary form.cart button.single_add_to_cart_button {
  display: none !important;
}

/* Hide Woo's native qty + add-to-cart (variable + simple) */
.single-product .summary form.cart .woocommerce-variation-add-to-cart.variations_button,
.single-product .summary form.cart .woocommerce-variation-add-to-cart .quantity,
.single-product .summary form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.single-product .summary form.cart .quantity,
.single-product .summary form.cart button.single_add_to_cart_button {
  display: none !important;
}

/* Elementor / Blocks fallbacks */
.elementor-widget-woocommerce-product-add-to-cart .woocommerce-variation-add-to-cart,
.elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button,
.elementor-widget-woocommerce-product-add-to-cart .quantity,
.wc-block-components-product-add-to-cart,
.wc-block-components-quantity-selector {
  display: none !important;
}

/* Hide unwanted fields on Woo product page */
.single-product .mkep-remove-branding,
.single-product .mkep-method,
.single-product .mkep-method-toggle,
.single-product .mkep-application-method,
.single-product .branding-group,
.single-product .mkep-position,
.single-product .position-row,
.single-product label[for*="position"],
.single-product select[name*="position"] {
  display: none !important;
}

/* PRODUCT PAGE: hide ONLY the native Woo size dropdown and its label */
.single-product form.variations,
.single-product table.variations {
  /* Hide select & its label (covers pa_size and generic size) */
}
.single-product table.variations select[name*="attribute_pa_size"],
.single-product table.variations select[name*="attribute_size"],
.single-product table.variations #pa_size,
.single-product table.variations label[for*="attribute_pa_size"],
.single-product table.variations label[for*="pa_size"],
.single-product table.variations label[for*="attribute_size"] {
  display: none !important;
}

/* If your theme uses Select2 for the attribute, hide that container too */
.single-product table.variations .value .select2-container--default[aria-owns*="attribute_pa_size"],
.single-product table.variations .value .select2-container--default[aria-owns*="attribute_size"] {
  display: none !important;
}

/* Do NOT touch your custom +/- grid */

/* Remove the little dividing line that some themes add under the swatch row */
.single-product .variable-items-wrapper,
.single-product .variable-items-wrapper + hr {
  border: 0 !important;
  margin-bottom: 0 !important;
}

/* Hide the native Woo 'Clear' link under swatches, plus the thin rule some themes add */
.single-product .reset_variations { display: none !important; }
.single-product .variable-items-wrapper,
.single-product .variable-items-wrapper + hr { border: 0 !important; }

/* Product page: remove the thin line under the variations table */
.single-product.woocommerce-js div.product form.cart .variations {
  border-bottom: 0 !important;
}
/* Box that wraps our widget + the swatch row */
.mkep-around-swatches {
  border: 1px solid rgba(0,0,0,.12);
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 16px;
}

/* Tighten spacing between our step title and swatches */
.mkep-around-swatches .mkep-step-title { margin-top: 0; margin-bottom: 10px; }

/* Hide "Ex VAT" under Total (no personalisation) */
.mkep-s2-summary .mkep-cost-row .ex-vat {
    display: none !important;
}

/* Hide Delivery CTA on product page */
.mkep-step2-view .mkep-delivery-cta,
.single-product .mkep-delivery-cta {
    display: none !important;
}




/* Layout */
.mkep-s1-key{
  display:flex;
  align-items:center;
  gap:14px;
}

/* Badge base */
.mkep-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:12px;             /* rounded rectangle like screenshot */
  font-size:15px;
  font-weight:600;
  line-height:1;
  color:#fff;
  box-shadow:0 2px 0 rgba(0,0,0,.15);
  user-select:none;
}

/* Icons (works for <img> or inline <svg>) */
.mkep-badge-ico img{
  width:22px;
  height:22px;
  display:block;
  /* make any dark icon appear white */
  filter:brightness(0) invert(1);
}
.mkep-badge-ico svg{
  width:22px;
  height:22px;
  display:block;
  fill:#fff;            /* if your SVGs use fill */
  stroke:#fff;          /* if your SVGs use stroke */
}

/* Hide Size row completely (label + value cell) */
table.variations tbody tr .label label[for="pa_size"],
table.variations tbody tr .value select[name="attribute_pa_size"],
table.variations tbody tr .value .cfvsw-product-container[swatches-attr="attribute_pa_size"],
table.variations tbody tr .value.disable-to-select .reset_variations {
  display: none !important;
}

/* Collapse the table row by hiding both cells when they contain size controls */
table.variations tbody tr .label label[for="pa_size"] { display: none !important; }
table.variations tbody tr .label label[for="pa_size"] + * { display: none !important; }

/* Optional: zero out padding on any leftover cells to remove the blank gap */
table.variations tbody tr .label label[for="pa_size"] {
  padding: 0 !important; margin: 0 !important;
}


/* Colors */
.mkep-badge--emb{
  background:#1976A3; /* blue like your sample */
  background-image:linear-gradient(#1B7EAE, #176E99); /* subtle depth */
}
.mkep-badge--prn{
  background:#000;     /* solid black like your sample */
}
/* KEY badges — force reference look */
.mkep-s1-key{ display:flex; align-items:center; gap:14px; }

/* Base badge */
.mkep-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  padding:6px !important;
  border-radius:5px !important;       /* rounded rectangle */
  border:0 !important;
  background:#1976A3 !important;       /* default blue */
  color:#fff !important;
  box-shadow:0 2px 0 rgba(0,0,0,.18) !important;
  line-height:1 !important;
  font-size:12px !important;
  font-weight:600 !important;
  text-decoration:none !important;
}

/* Inner text must be white (override theme) */
.mkep-badge span{ color:#fff !important; }

/* Icon */
.mkep-badge-ico img,
.mkep-badge-ico svg{
  width:22px; height:22px; display:block;
  filter:none !important;      /* don’t fade to light blue */
  /* If your SVGs are strokes, ensure they render white: */
  stroke:#fff; fill:#fff;
}

/* Specific colours */
.mkep-badge--emb{ background:#1976A3 !important; }  /* blue */
.mkep-badge--prn{ background:#000 !important; }     /* black */

/* Optional: tighter on small screens */
@media (max-width:640px){
  .mkep-badge{ padding:8px 12px !important; font-size:14px !important; }
  .mkep-badge-ico img,.mkep-badge-ico svg{ width:20px; height:20px; }
}
/* Force SVGs in the badges to render white */
.mkep-badge-ico svg {
  width: 22px;
  height: 22px;
  display: block;

  /* Override any inline colors */
  fill: #fff !important;
  stroke: #fff !important;
}

/* If using <img> for icons instead of inline <svg> */
.mkep-badge-ico img {
  width: 22px;
  height: 22px;
  display: block;

  /* Invert black PNGs to white */
  filter: brightness(0) invert(1) !important;
}
.variations tr th label[for="pa_size"],
.variations tr td .cfvsw-product-container[swatches-attr="attribute_pa_size"] {
    display: none !important;
}

/* or simpler: hide the whole table row for size */
.variations tr:has(select[name="attribute_pa_size"]) {
    display: none !important;
}