/* Mody Variation Matrix
   Colours, radius and heading font come from the plugin settings and are
   injected as CSS variables on .mvm-wrap. Body text always inherits the
   theme font so the matrix reads as part of the page. */

.mvm-wrap{
  --mvm-accent:#C8102E;
  --mvm-ink:#141414;
  --mvm-muted:#6E6E6E;
  --mvm-line:#E6E4E0;
  --mvm-soft:#F7F6F3;
  --mvm-radius:10px;
  --mvm-heading:"Playfair Display", Georgia, "Times New Roman", serif;

  margin:34px 0;
  color:var(--mvm-ink);
  font-family:inherit;
  line-height:1.6;
}

.mvm-wrap *{
  box-sizing:border-box;
}

/* Heading and notice ---------------------------------------------------- */

.mvm-wrap .mvm-heading{
  font-family:var(--mvm-heading);
  font-size:22px;
  font-weight:600;
  line-height:1.25;
  color:var(--mvm-ink);
  margin:0 0 6px;
  padding:0;
  letter-spacing:0;
}

.mvm-notice{
  font-family:inherit;
  font-size:13.5px;
  line-height:1.65;
  color:var(--mvm-ink);
  background:var(--mvm-soft);
  border-left:2.5px solid var(--mvm-accent);
  padding:11px 15px;
  border-radius:4px;
  margin:0 0 18px;
}

/* Table ----------------------------------------------------------------- */

.mvm-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--mvm-line);
  border-radius:var(--mvm-radius);
  background:#fff;
}

.mvm-wrap table.mvm-table{
  width:100%;
  border-collapse:collapse;
  border:none;
  margin:0;
  font-family:inherit;
  font-size:14px;
  min-width:560px;
  table-layout:auto;
}

.mvm-wrap table.mvm-table thead th{
  background:var(--mvm-ink);
  color:#fff;
  font-family:inherit;
  font-weight:500;
  font-size:12.5px;
  letter-spacing:0.4px;
  padding:13px 10px;
  text-align:center;
  white-space:nowrap;
  border:none;
}

.mvm-wrap table.mvm-table thead th.mvm-corner{
  text-align:left;
  padding-left:18px;
}

.mvm-wrap table.mvm-table tbody tr{
  border-bottom:1px solid var(--mvm-line);
  background:transparent;
}

.mvm-wrap table.mvm-table tbody tr:last-child{
  border-bottom:none;
}

.mvm-wrap table.mvm-table tbody tr.mvm-filled{
  background:color-mix(in srgb, var(--mvm-accent) 4%, #fff);
}

.mvm-wrap table.mvm-table td{
  padding:11px 10px;
  text-align:center;
  border:none;
  vertical-align:middle;
  font-size:14px;
}

.mvm-rowname{
  text-align:left !important;
  padding-left:18px !important;
  white-space:nowrap;
  font-weight:500;
  color:var(--mvm-ink);
}

.mvm-dot{
  width:15px;
  height:15px;
  border-radius:50%;
  display:inline-block;
  vertical-align:-2px;
  margin-right:9px;
  border:1px solid color-mix(in srgb, var(--mvm-line) 70%, #999);
}

/* Quantity inputs ------------------------------------------------------- */

.mvm-wrap input.mvm-qty{
  width:64px;
  height:auto;
  padding:8px 6px;
  border:1px solid var(--mvm-line);
  border-radius:5px;
  text-align:center;
  font-family:inherit;
  font-size:14px;
  line-height:1.3;
  background:#fff;
  color:var(--mvm-ink);
  box-shadow:none;
  -moz-appearance:textfield;
}

.mvm-wrap input.mvm-qty::-webkit-outer-spin-button,
.mvm-wrap input.mvm-qty::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.mvm-wrap input.mvm-qty:focus{
  outline:none;
  border-color:var(--mvm-accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--mvm-accent) 18%, transparent);
}

.mvm-wrap input.mvm-qty:disabled{
  background:var(--mvm-soft);
  color:color-mix(in srgb, var(--mvm-muted) 55%, #fff);
  cursor:not-allowed;
}

.mvm-stock{
  display:block;
  font-family:inherit;
  font-size:11px;
  line-height:1.4;
  color:var(--mvm-muted);
  margin-top:5px;
}

.mvm-stock.mvm-out{
  color:var(--mvm-accent);
}

.mvm-na{
  color:color-mix(in srgb, var(--mvm-muted) 40%, #fff);
}

.mvm-rowtot{
  font-weight:600;
  min-width:62px;
  color:var(--mvm-ink);
}

/* Footer ---------------------------------------------------------------- */

.mvm-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:18px;
}

.mvm-summary{
  font-family:inherit;
  font-size:14px;
  color:var(--mvm-muted);
}

.mvm-summary strong{
  color:var(--mvm-ink);
  font-weight:600;
}

.mvm-sep{
  margin:0 8px;
  color:color-mix(in srgb, var(--mvm-muted) 45%, #fff);
}

.mvm-wrap button.mvm-submit,
.mvm-wrap .mvm-submit{
  background:var(--mvm-accent);
  color:#fff;
  border:none;
  border-radius:6px;
  padding:14px 30px;
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:0;
  text-transform:none;
  cursor:pointer;
  transition:opacity .15s ease;
}

.mvm-wrap button.mvm-submit:hover{
  background:var(--mvm-accent);
  color:#fff;
  opacity:.88;
}

.mvm-wrap button.mvm-submit:disabled{
  opacity:.35;
  cursor:not-allowed;
}

/* Messages -------------------------------------------------------------- */

.mvm-msg{
  margin-top:14px;
  font-family:inherit;
  font-size:14px;
  display:none;
  padding:12px 16px;
  border-radius:6px;
  line-height:1.6;
}

.mvm-msg.mvm-ok,
.mvm-msg.mvm-err{
  display:block;
  background:var(--mvm-soft);
  border-left:2.5px solid var(--mvm-accent);
  color:var(--mvm-ink);
}

.mvm-msg a{
  color:var(--mvm-ink);
  border-bottom:1.5px solid var(--mvm-accent);
  text-decoration:none;
  margin-left:8px;
}

.mvm-msg a:hover{
  opacity:.75;
}

/* Price decorations ----------------------------------------------------- */

.mvm-price-suffix{
  font-size:.6em;
  color:var(--mvm-muted, #6E6E6E);
  font-weight:400;
  white-space:nowrap;
  letter-spacing:0;
}

.mvm-per-piece{
  display:block;
  font-family:inherit;
  font-size:13px;
  font-weight:400;
  color:var(--mvm-muted, #6E6E6E);
  margin-top:4px;
  letter-spacing:0;
}

.mvm-per-piece.mvm-inline{
  display:inline;
  margin-top:0;
}

/* Mobile ---------------------------------------------------------------- */

@media (max-width:782px){
  .mvm-wrap{margin:26px 0;}
  .mvm-wrap .mvm-heading{font-size:19px;}
  .mvm-foot{flex-direction:column; align-items:stretch;}
  .mvm-wrap button.mvm-submit{width:100%;}
  .mvm-summary{text-align:center;}
  .mvm-wrap input.mvm-qty{width:58px;}
}

/* ========================================================================
   MOBILE
   Two modes, chosen in the plugin settings.
   .mvm-mobile-sticky  scrolling table with a frozen first column
   .mvm-mobile-cards   each colour becomes its own card
   ===================================================================== */

.mvm-scroll-hint{
  font-size:12.5px;
  color:var(--mvm-muted);
  margin:8px 0 0;
  text-align:center;
  display:none;
}

/* ---- Sticky column mode ---------------------------------------------- */

@media (max-width:782px){

  .mvm-mobile-sticky .mvm-scroll{
    position:relative;
  }

  /* Fade on the right edge so it reads as scrollable. */
  .mvm-mobile-sticky .mvm-scroll.is-scrollable::after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:28px;
    pointer-events:none;
    background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.95));
    border-radius:0 var(--mvm-radius) var(--mvm-radius) 0;
    z-index:3;
  }

  .mvm-mobile-sticky .mvm-scroll.is-end::after{
    opacity:0;
    transition:opacity .2s ease;
  }

  .mvm-mobile-sticky .mvm-scroll-hint{
    display:block;
  }

  .mvm-mobile-sticky table.mvm-table{
    min-width:0;
  }

  /* Freeze the colour column. */
  .mvm-mobile-sticky table.mvm-table thead th.mvm-corner,
  .mvm-mobile-sticky table.mvm-table td.mvm-rowname{
    position:sticky;
    left:0;
    z-index:2;
    min-width:104px;
    max-width:130px;
    padding-left:12px !important;
    padding-right:10px !important;
  }

  .mvm-mobile-sticky table.mvm-table thead th.mvm-corner{
    background:var(--mvm-ink);
  }

  .mvm-mobile-sticky table.mvm-table td.mvm-rowname{
    background:#fff;
    box-shadow:1px 0 0 var(--mvm-line);
    font-size:13.5px;
    white-space:normal;
  }

  .mvm-mobile-sticky table.mvm-table tbody tr.mvm-filled td.mvm-rowname{
    background:color-mix(in srgb, var(--mvm-accent) 4%, #fff);
  }

  .mvm-mobile-sticky .mvm-dot{
    margin-right:7px;
  }

  .mvm-mobile-sticky table.mvm-table td{
    padding:10px 8px;
  }

  .mvm-mobile-sticky input.mvm-qty{
    width:56px;
  }
}

/* ---- Card mode -------------------------------------------------------- */

@media (max-width:782px){

  .mvm-mobile-cards .mvm-scroll{
    border:none;
    border-radius:0;
    overflow:visible;
    background:transparent;
  }

  .mvm-mobile-cards table.mvm-table,
  .mvm-mobile-cards table.mvm-table tbody,
  .mvm-mobile-cards table.mvm-table tr,
  .mvm-mobile-cards table.mvm-table td{
    display:block;
    width:100%;
    min-width:0;
  }

  .mvm-mobile-cards table.mvm-table thead{
    display:none;
  }

  .mvm-mobile-cards table.mvm-table tbody tr{
    border:1px solid var(--mvm-line);
    border-radius:var(--mvm-radius);
    background:#fff;
    margin-bottom:12px;
    overflow:hidden;
  }

  .mvm-mobile-cards table.mvm-table tbody tr:last-child{
    margin-bottom:0;
  }

  .mvm-mobile-cards table.mvm-table tbody tr.mvm-filled{
    border-color:var(--mvm-accent);
  }

  /* Card header, the colour name */
  .mvm-mobile-cards td.mvm-rowname{
    background:var(--mvm-soft);
    border-bottom:1px solid var(--mvm-line);
    padding:12px 16px !important;
    font-size:15px;
    text-align:left !important;
  }

  /* One row per size */
  .mvm-mobile-cards td.mvm-cell{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:10px 16px;
    border-bottom:1px solid var(--mvm-line);
    text-align:left;
  }

  .mvm-mobile-cards td.mvm-cell::before{
    content:attr(data-label);
    font-size:14px;
    font-weight:500;
    color:var(--mvm-ink);
    flex:1 1 auto;
  }

  .mvm-mobile-cards td.mvm-cell input.mvm-qty{
    width:74px;
    flex:0 0 auto;
    order:3;
  }

  .mvm-mobile-cards td.mvm-cell .mvm-stock{
    order:2;
    margin-top:0;
    flex:0 0 auto;
    text-align:right;
    font-size:11.5px;
  }

  .mvm-mobile-cards td.mvm-cell .mvm-na{
    order:3;
  }

  /* Card footer, the row total */
  .mvm-mobile-cards td.mvm-rowtot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:11px 16px;
    background:var(--mvm-soft);
    border-bottom:none;
    font-size:14px;
  }

  .mvm-mobile-cards td.mvm-rowtot::before{
    content:attr(data-label);
    font-weight:400;
    color:var(--mvm-muted);
  }
}

/* Per row pack label and price */

.mvm-rowmeta{
  display:block;
  margin-top:4px;
  font-weight:400;
  line-height:1.5;
  white-space:nowrap;
}

.mvm-rowpack{
  display:inline-block;
  padding:2px 7px;
  border:1px solid var(--mvm-line);
  border-radius:20px;
  font-size:10.5px;
  color:var(--mvm-muted);
  white-space:nowrap;
}

.mvm-rowprice{
  display:inline-block;
  margin-left:7px;
  font-size:12.5px;
  color:var(--mvm-ink);
  white-space:nowrap;
}

.mvm-rowprice .amount,
.mvm-rowprice bdi{
  font-weight:500;
  color:inherit;
}

/* On the sticky mobile column the meta line needs room to wrap. */
@media (max-width:782px){
  .mvm-mobile-sticky table.mvm-table td.mvm-rowname{
    max-width:150px;
  }
  .mvm-rowmeta{
    white-space:normal;
  }
  .mvm-rowprice{
    margin-left:0;
    margin-top:3px;
    display:block;
  }
}

/* Shown instead of the add to cart button when prices are hidden */

.mvm-locked{
  font-size:14px;
  color:var(--mvm-muted);
  line-height:1.5;
}

.mvm-locked a{
  color:var(--mvm-ink);
  border-bottom:1.5px solid var(--mvm-accent);
  text-decoration:none;
  padding-bottom:1px;
}

/* Minimum order notice on the cart page */

.mvm-moq-notice{
  background:#F7F6F3;
  border-left:2.5px solid #C8102E;
  border-radius:4px;
  padding:13px 16px;
  margin:0 0 22px;
  font-size:14px;
  line-height:1.6;
  color:#141414;
}