/* MASTORE Checkout Studio — v17 "БИРКА" (TAG)
   White paper, black ink, nothing else. Every corner is rounded on a scale that
   grows with the element. The order summary is a garment hangtag — the object
   that proves an item is original, which is this shop's whole promise.
   Typography is Montserrat, the site's own face (v11 used Helvetica Neue and
   therefore read as a foreign page). Structure/step layout lives in
   checkout-wizard.v8.css; this file owns the look. */

:root{
  --paper:#fff;
  --ink:#000;
  --ink-70:#3a3a3a;
  --ink-45:#757575;
  --ink-25:#b5b5b5;
  --rule:#e4e4e4;
  --rule-soft:#efefef;
  --wash:#f5f5f5;

  --r-pill:999px;
  --r-card:28px;
  --r-tag:22px;
  --r-field:16px;

  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  /* line-height must not be 1: Montserrat's caps clip their own tops at this
     size, which sheared the field labels in half. */
  --micro:700 10px/1.3 var(--sans);
  --track:.18em;

  --ease:cubic-bezier(.2,.8,.2,1);
  --t:120ms var(--ease);
  --mcs-chrome-h:56px;
}

/* ---------------------------------------------------------------- shell --- */

body.mcs-page{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body.mcs-page *,body.mcs-page *::before,body.mcs-page *::after{box-sizing:border-box}
.mcs{display:block;font-variant-emoji:text}
.mcs-shell{max-width:1240px;margin:0 auto;padding:0 24px}

.mcs-kicker,.mcs-topline span{font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-45)}

.mcs-topline{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--rule);
}
.mcs-topline a{
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  border:1px solid var(--rule);border-radius:var(--r-pill);padding:9px 16px;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.mcs-topline a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* --------------------------------------------------- checkout chrome bar --- */

#mcs-chrome{
  position:sticky;top:0;z-index:60;
  height:var(--mcs-chrome-h);
  display:flex;align-items:center;gap:20px;
  padding:0 24px;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
#mcs-chrome .mcs-chrome-logo{display:flex;align-items:center;height:100%;flex:0 0 auto}
#mcs-chrome .mcs-chrome-logo img{height:26px;width:auto;display:block}
#mcs-chrome .mcs-chrome-title{
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-45);
  padding-left:20px;border-left:1px solid var(--rule);
}
#mcs-chrome .mcs-chrome-spacer{flex:1 1 auto}
#mcs-chrome .mcs-chrome-secure{
  display:inline-flex;align-items:center;gap:7px;
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-45);
}
#mcs-chrome .mcs-chrome-secure svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8}
#mcs-chrome .mcs-chrome-back{
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  border:1px solid var(--rule);border-radius:var(--r-pill);padding:9px 16px;
  transition:background var(--t),color var(--t),border-color var(--t);
}
#mcs-chrome .mcs-chrome-back:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media(max-width:720px){
  #mcs-chrome{gap:12px;padding:0 16px}
  #mcs-chrome .mcs-chrome-title,#mcs-chrome .mcs-chrome-secure{display:none}
}

/* -------------------------------------------------------------- the hero --- */
/* Kept for the non-wizard fallback; the wizard hides it to reclaim 538px. */

.mcs-hero{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;padding:48px 0 40px}
.mcs-hero-main h1{font-size:clamp(40px,6vw,84px);font-weight:900;letter-spacing:-.04em;line-height:.94;margin:14px 0 18px}
.mcs-hero-main p{color:var(--ink-45);max-width:44ch;margin:0}
.mcs-hero-object{
  background:var(--ink);color:var(--paper);border-radius:var(--r-card);
  padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;
}
.mcs-hero-object h2{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0}
.mcs-object-index,.mcs-object-foot span{font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;opacity:.6}
.mcs-object-star{font-size:34px;line-height:1}
.mcs-object-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.24);padding-top:16px}
@media(max-width:900px){.mcs-hero{grid-template-columns:1fr}}

/* ------------------------------------------------- the stitch stepper ----- */
/* nav.mcs-route: three anchors, each <span>NN</span><strong>label</strong><b>↗</b>.
   The connector between nodes is a dashed thread; completing a step pulls a
   solid black thread through it. */

.mcs-route{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;padding:20px 0 22px;margin:0;
}
.mcs-route-item{
  position:relative;
  display:flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--ink-25);
  padding-right:18px;
  transition:color var(--t);
}
.mcs-route-item>b{display:none}

/* node */
.mcs-route-item>span{
  flex:0 0 auto;position:relative;z-index:2;
  width:34px;height:34px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:var(--paper);
  border:2px solid currentColor;
  font:800 12px/1 var(--mono);font-variant-numeric:tabular-nums;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.mcs-route-item>strong{
  font:700 11px/1.2 var(--sans);letter-spacing:var(--track);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* the thread between this node and the next */
.mcs-route-item::before,
.mcs-route-item::after{
  content:"";position:absolute;left:46px;right:6px;top:17px;height:2px;
  border-radius:2px;
}
.mcs-route-item::before{
  background:repeating-linear-gradient(90deg,var(--ink-25) 0 6px,transparent 6px 12px);
}
.mcs-route-item::after{
  background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 12px);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 420ms var(--ease);
}
.mcs-route-item:last-child::before,
.mcs-route-item:last-child::after{display:none}

.mcs-route-item.is-current{color:var(--ink)}
.mcs-route-item.is-current>span{border-color:var(--ink);color:var(--ink)}
.mcs-route-item.is-complete{color:var(--ink-45)}
.mcs-route-item.is-complete>span{background:var(--ink);border-color:var(--ink);color:transparent}
.mcs-route-item.is-complete>span::after{
  content:"✓︎";position:absolute;inset:0;display:grid;place-items:center;
  color:var(--paper);font:700 14px/1 var(--sans);
}
.mcs-route-item.is-complete::after{transform:scaleX(1)}
.mcs-route-item[aria-disabled="true"]{pointer-events:none}
.mcs-route-item:not([aria-disabled="true"]):hover>span{border-color:var(--ink);color:var(--ink)}

@media(max-width:720px){
  .mcs-route-item>strong{display:none}
  .mcs-route{grid-template-columns:repeat(3,1fr);padding:14px 0}
  .mcs-route-item::before,.mcs-route-item::after{left:42px}
}

/* ---------------------------------------------------------------- layout --- */

.mcs-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,380px);
  gap:28px;align-items:start;
  padding-bottom:48px;
}
@media(max-width:960px){.mcs-layout{grid-template-columns:minmax(0,1fr)}}

/* ----------------------------------------------------------- step cards --- */

.mcs-card{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r-card);
  padding:30px 32px;
  margin:0 0 20px;
  position:relative;
}
.mcs-card-head{
  display:flex;align-items:flex-start;gap:18px;
  padding-bottom:22px;margin-bottom:24px;
  border-bottom:1px solid var(--rule);
}
/* outlined step numeral — the watermark that identifies the card */
.mcs-card-head>span{
  flex:0 0 auto;
  font:900 40px/1 var(--mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px var(--ink-25);
  transition:-webkit-text-stroke-color var(--t),color var(--t);
}
.mcs-card:hover .mcs-card-head>span,
.mcs-card:focus-within .mcs-card-head>span{-webkit-text-stroke-color:var(--ink)}
.mcs-card-head h2{font-size:26px;font-weight:900;letter-spacing:-.03em;line-height:1.1;margin:0 0 5px}
.mcs-card-head p{margin:0;color:var(--ink-45);font-size:13px}
.mcs-card-head>b{margin-left:auto;color:var(--ink-25);font-size:16px;font-weight:400}

.mcs-hint{
  margin:18px 0 14px;padding:12px 16px;
  background:var(--wash);border-radius:var(--r-field);
  color:var(--ink-45);font-size:12.5px;
}

/* ---------------------------------------------------------------- fields --- */

.mcs-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.mcs-fields.mcs-address{grid-template-columns:1fr}
@media(max-width:640px){.mcs-fields{grid-template-columns:1fr}}

.mcs .form-row{margin:0;padding:0;display:block}
.mcs .form-row-wide{grid-column:1/-1}
.mcs .form-row label{
  display:block;margin-bottom:7px;
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-45);
}
.mcs .form-row label .required{color:var(--ink);text-decoration:none;border:0}
.mcs .woocommerce-input-wrapper{display:block;position:relative}

.mcs input[type=text],.mcs input[type=tel],.mcs input[type=email],
.mcs input[type=number],.mcs input[type=password],.mcs textarea,.mcs select{
  width:100%;
  font:500 15px/1.4 var(--sans);color:var(--ink);
  background:transparent;
  border:1.5px solid transparent;
  border-bottom-color:var(--rule);
  border-radius:0;
  padding:11px 2px;
  transition:border-color var(--t),border-radius var(--t),background var(--t),padding var(--t);
  -webkit-appearance:none;appearance:none;
}
.mcs input::placeholder,.mcs textarea::placeholder{color:var(--ink-25)}
/* the underline unrolls into a rounded box on focus */
.mcs input:focus,.mcs textarea:focus,.mcs select:focus{
  outline:none;
  border-color:var(--ink);
  border-radius:var(--r-field);
  background:var(--paper);
  padding:11px 14px;
}
.mcs input:not(:placeholder-shown):not(:focus){border-bottom-color:var(--ink-25)}
.mcs .woocommerce-invalid input,.mcs input[aria-invalid=true]{border-bottom-color:var(--ink);border-bottom-style:dashed}

.mcs-inline-error{display:block;margin-top:6px;font-size:12px;color:var(--ink);font-weight:600}

/* WooCommerce select2 dressed as our own field */
.mcs .select2-container--default .select2-selection--single{
  height:auto;border:1.5px solid transparent;border-bottom-color:var(--rule);
  border-radius:0;background:transparent;padding:11px 2px;
}
.mcs .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:1.4;padding:0;color:var(--ink);font:500 15px/1.4 var(--sans);
}
.mcs .select2-container--default .select2-selection--single .select2-selection__arrow{top:50%;transform:translateY(-50%);right:4px}
.mcs .select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--ink);border-radius:var(--r-field);padding:11px 14px;
}
.select2-dropdown{border:1.5px solid var(--ink);border-radius:var(--r-field);overflow:hidden;font-family:var(--sans)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--ink);color:var(--paper)}

/* city autocomplete — suggestions as rounded pills */
.mcs #mcs-cities{
  display:block;position:absolute;z-index:40;left:0;right:0;top:calc(100% + 8px);
  background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r-field);
  padding:8px;max-height:260px;overflow:auto;overscroll-behavior:contain;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
}
.mcs #mcs-cities[hidden]{display:none}
.mcs #mcs-cities button{
  display:inline-block;width:auto;text-align:left;
  background:transparent;border:0;border-radius:var(--r-pill);
  padding:10px 14px;font:500 14px/1.3 var(--sans);color:var(--ink);cursor:pointer;
  transition:background var(--t),color var(--t);
}
.mcs #mcs-cities button:hover,.mcs #mcs-cities button:focus,
.mcs #mcs-cities button[aria-selected=true]{background:var(--ink);color:var(--paper);outline:none}

/* ------------------------------------------------ shipping method cards --- */

.ms-co-ship__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ms-co-ship__item{
  border:1.5px solid var(--rule);
  border-radius:var(--r-field);
  transition:border-color var(--t),background var(--t),border-radius var(--t);
  overflow:hidden;
}
.ms-co-ship__item:hover{border-color:var(--ink-25)}
.ms-co-ship__label{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;margin:0;cursor:pointer;
}
.ms-co-ship__radio,.ms-co-pay__radio{
  flex:0 0 auto;width:20px;height:20px;
  border:2px solid var(--ink-25);border-radius:7px;
  display:grid;place-items:center;
  transition:background var(--t),border-color var(--t);
}
.ms-co-ship__radio::after,.ms-co-pay__radio::after{
  content:"";width:9px;height:9px;border-radius:3px;background:transparent;transition:background var(--t);
}
.ms-co-ship__item input.shipping_method,
.ms-co-pay input[type=radio]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}

.ms-co-ship__icon{
  flex:0 0 auto;width:38px;height:38px;border-radius:var(--r-pill);
  background:var(--wash);display:grid;place-items:center;
  filter:grayscale(1);
  transition:background var(--t),filter var(--t);
}
.ms-co-ship__icon img,.ms-co-ship__icon svg{max-width:22px;max-height:22px;display:block}
.ms-co-ship__body{flex:1 1 auto;min-width:0}
.ms-co-ship__title,.ms-co-ship__name{display:block;font-weight:700;font-size:14px;letter-spacing:-.01em}
.ms-co-ship__subtitle{display:block;font-size:12px;color:var(--ink-45);margin-top:2px}
.ms-co-ship__price{
  flex:0 0 auto;font:700 15px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.ms-co-ship__hint{display:block;padding:0 18px 12px;font-size:12px;color:var(--ink-45)}

/* invert on select — the chosen row becomes a solid black chip */
.ms-co-ship__item:has(input.shipping_method:checked){
  background:var(--ink);border-color:var(--ink);color:var(--paper);border-radius:20px;
}
.ms-co-ship__item:has(input:checked) .ms-co-ship__subtitle,
.ms-co-ship__item:has(input:checked) .ms-co-ship__hint{color:rgba(255,255,255,.66)}
.ms-co-ship__item:has(input:checked) .ms-co-ship__radio{background:var(--paper);border-color:var(--paper)}
.ms-co-ship__item:has(input:checked) .ms-co-ship__radio::after{background:var(--ink)}
.ms-co-ship__item:has(input:checked) .ms-co-ship__icon{background:rgba(255,255,255,.14);filter:grayscale(1) invert(1)}

/* the carrier's own pickup widget lives here — it must stay mounted */
.ms-co-ship__extra{padding:0 18px 16px;display:grid;gap:10px}
.ms-co-ship__extra:empty{display:none}
.ms-co-ship__item:not(:has(input:checked)) .ms-co-ship__extra{display:none}

/* CDEK paints its brand green on the WRAPPER div, not on the link inside it,
   so the wrapper has to be flattened before the link can be dressed. */
.mcs .open-pvz-btn{
  background:transparent !important;
  border:0;padding:0;margin:0;border-radius:0;box-shadow:none;
  display:inline-block;width:auto;
}
.mcs .open-pvz-btn a,
.mcs .wc-yandex-choose-pickup-point,
.mcs .wc-russian-post-choose-delivery-point,
.mcs-retry{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink);background:var(--paper);
  border:1.5px solid var(--ink);border-radius:var(--r-pill);
  padding:11px 20px;cursor:pointer;text-decoration:none;
  transition:background var(--t),color var(--t),transform var(--t);
}
.mcs .open-pvz-btn a:hover,
.mcs .wc-yandex-choose-pickup-point:hover,
.mcs .wc-russian-post-choose-delivery-point:hover,
.mcs-retry:hover{background:var(--ink);color:var(--paper)}
.mcs .open-pvz-btn a{width:auto}
.mcs-retry{margin-top:14px;border-color:var(--rule);color:var(--ink-45)}
.mcs-retry:hover{border-color:var(--ink)}

/* ------------------------------------------------ wizard-only trimmings -- */
/* Both columns must reach the same baseline or step 1 (four fields) leaves the
   left half of the screen empty next to a tall receipt. */
.mcs-wizard .mcs-layout{align-items:stretch}

/* The running stitch on the form already says "recalculating", so the text
   status is redundant chrome in a viewport this tight. */
.mcs-wizard .mcs-live-status{display:none}

/* The reassurance strip: the promise that earns the order, placed where the
   shopper is deciding rather than after they have already paid. */
.mcs-wizard .mcs-step-controls::before{
  content:"Оригинал 100% · Проверка подлинности · Возврат 14 дней";
  display:block;
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink-25);
  padding-bottom:10px;
}

/* Each carrier plugin wraps its pickup control in its own light panel, which
   reads as a hole punched in the selected black row. Flatten the wrappers and
   let the row own the surface. */
.mcs .wc-russian-post-method-additional-info,
.mcs .wc-yandex-delivery-method-additional-info,
.mcs .ms-co-ship__extra>div:not(.cdek-office-info):not(.wc-yandex-delivery-chosen-address):not(.wc-russian-post-chosen-address):not(.cdek-office-error){
  background:transparent;
  padding:0;border:0;box-shadow:none;
}

.mcs .cdek-office-info,
.mcs .wc-yandex-delivery-chosen-address,
.mcs .wc-russian-post-chosen-address{
  background:rgba(255,255,255,.12);border-radius:var(--r-field);
  padding:11px 14px;font-size:12.5px;line-height:1.45;
}
.ms-co-ship__item:not(:has(input:checked)) .cdek-office-info,
.ms-co-ship__item:not(:has(input:checked)) .wc-yandex-delivery-chosen-address,
.ms-co-ship__item:not(:has(input:checked)) .wc-russian-post-chosen-address{background:var(--wash)}
.mcs .cdek-office-error{color:var(--ink);font-weight:700;font-size:12px}

/* ------------------------------------------------------ payment methods --- */

#payment{background:transparent;border-radius:0}
#payment .wc_payment_methods{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ms-co-pay{
  position:relative;
  border:1.5px solid var(--rule);border-radius:var(--r-field);
  transition:border-color var(--t),background var(--t),border-radius var(--t);
}
.ms-co-pay:hover{border-color:var(--ink-25)}
.ms-co-pay>label{
  display:flex !important;align-items:center;gap:14px;
  padding:14px 18px;margin:0;cursor:pointer;
  /* v11 set uppercase + tracking here, which wrapped every label onto two
     lines and pushed this step to 905px. Title and subtitle are separate
     spans already — style them, don't shout them. */
  text-transform:none;letter-spacing:normal;font-size:14px;
}
.ms-co-pay__text{flex:1 1 auto;min-width:0}
.ms-co-pay__title{display:block;font-weight:700;font-size:14px;letter-spacing:-.01em}
.ms-co-pay__subtitle{display:block;font-size:12px;line-height:1.35;color:var(--ink-45);margin-top:2px}
.ms-co-pay>label img{max-height:20px;width:auto;flex:0 0 auto;filter:grayscale(1);transition:filter var(--t)}

.ms-co-pay:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--paper);border-radius:20px}
.ms-co-pay:has(input:checked) .ms-co-pay__subtitle{color:rgba(255,255,255,.66)}
.ms-co-pay:has(input:checked) .ms-co-pay__radio{background:var(--paper);border-color:var(--paper)}
.ms-co-pay:has(input:checked) .ms-co-pay__radio::after{background:var(--ink)}
.ms-co-pay:has(input:checked)>label img{filter:grayscale(1) invert(1)}

/* "Рекомендуем к оплате" is real markup: div.ms-co-pay__ribbon holding an
   inline <svg> tick plus a <span>. The svg carries only a viewBox — no width
   or height — so with nothing sizing it, it expanded to fill the whole card.
   That is the giant stray checkmark; it needs a size, not a rewrite. */
.ms-co-pay--recommended{border-color:var(--ink-25)}
.mcs .ms-co-pay__ribbon{
  position:absolute;top:-9px;left:16px;z-index:1;
  display:inline-flex;align-items:center;gap:6px;
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;
  background:var(--ink);color:var(--paper);
  border-radius:var(--r-pill);padding:5px 11px;
}
.mcs .ms-co-pay__ribbon svg{width:11px;height:11px;flex:0 0 auto;display:block}
.ms-co-pay--recommended>label{padding-top:20px}
/* safety net: any other unsized inline icon in these lists stays an icon */
.mcs #payment svg:not([width]),
.mcs #ms-co-delivery-methods svg:not([width]){max-width:22px;max-height:22px}

/* the payment block's own heading — compact micro-caps, not a page title */
.mcs .ms-co-pay-wrap__head{margin:0 0 14px}
.mcs .ms-co-pay-wrap__title{
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink-45);margin:0;
}
.mcs .ms-co-pay-wrap__desc{font-size:12px;color:var(--ink-25);margin:4px 0 0}

.mcs .payment_box{
  margin:0;padding:0 18px 16px;
  background:transparent;font-size:12.5px;line-height:1.5;color:var(--ink-45);
}
.mcs .payment_box::before{display:none}
.ms-co-pay:has(input:checked) .payment_box{color:rgba(255,255,255,.7)}
/* the Yandex Pay / Split widget needs a light well so it is legible on the
   inverted row it sits inside */
.mcs .yandex-pay-and-split_widget_container:not(:empty),
.mcs #yandex-pay-and-split-button-container:not(:empty){
  background:var(--paper);border-radius:var(--r-field);padding:12px;margin-top:4px;
}
/* SDK remounts into the newly checked method without clearing the previous
   Pay/Split box. Keep only the selected row's widget on screen. */
.mcs .wc_payment_method:not(:has(> input[name="payment_method"]:checked)) .yandex-pay-and-split_widget_container{
  display:none !important;
}

.mcs .woocommerce-terms-and-conditions-wrapper{margin-top:16px;font-size:12.5px;color:var(--ink-45)}
.mcs .woocommerce-terms-and-conditions-wrapper a{color:var(--ink)}
.mcs .validate-required .woocommerce-form__label-for-checkbox{display:flex;gap:10px;align-items:flex-start}
.mcs input[type=checkbox]{
  flex:0 0 auto;-webkit-appearance:none;appearance:none;
  width:19px;height:19px;margin:1px 0 0;
  border:2px solid var(--ink-25);border-radius:6px;background:var(--paper);
  cursor:pointer;display:grid;place-items:center;
  transition:background var(--t),border-color var(--t);
}
.mcs input[type=checkbox]:checked{background:var(--ink);border-color:var(--ink)}
.mcs input[type=checkbox]:checked::after{content:"✓︎";color:var(--paper);font:700 12px/1 var(--sans)}

/* ------------------------------------------------------ buttons / CTA ----- */

.mcs-btn,.mcs #place_order{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;
  font:800 12px/1 var(--sans);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--paper);background:var(--ink);
  border:1.5px solid var(--ink);border-radius:var(--r-pill);
  padding:19px 26px;cursor:pointer;text-decoration:none;
  transition:transform var(--t),opacity var(--t),background var(--t),color var(--t);
}
.mcs-btn:hover,.mcs #place_order:hover{transform:translateY(-1px)}
.mcs-btn:active,.mcs #place_order:active{transform:translateY(0)}
.mcs-btn[disabled],.mcs #place_order[disabled]{opacity:.45;pointer-events:none}
.mcs-btn>.mcs-btn-arrow{transition:transform 220ms var(--ease)}
.mcs-btn:hover>.mcs-btn-arrow{transform:translateX(4px)}

.mcs-register{
  display:inline-block;margin-top:14px;
  font-size:13px;color:var(--ink-45);text-decoration:none;
  border-bottom:1px solid var(--rule);
}
.mcs-register:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* --------------------------------------------------- the hangtag (chek) --- */

.mcs-aside{display:grid;gap:16px;align-content:start;position:sticky;top:88px}

.mcs-order{
  position:relative;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:var(--r-tag);
  padding:46px 24px 24px;
  margin:0;
}
/* the punched hole + its thread — this is the tag's signature */
.mcs-order::before{
  content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:20px;height:20px;border-radius:var(--r-pill);
  border:2px solid var(--ink);background:var(--paper);
}
.mcs-order::after{
  content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:44px;height:16px;
  border:1px solid var(--ink-25);border-bottom:0;
  border-radius:22px 22px 0 0;
}
.mcs-order-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:16px;border-bottom:1px solid var(--rule);
}
.mcs-order-head h2{
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-45);
  margin:0;font-size:10px;
}
.mcs-order-head a{
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);
}

/* The theme prints an INLINE <style> that paints
   .woocommerce-checkout-review-order-table.ms-co-review in #0b0b0c with a 26px
   radius and its own padding. That template is shared with /new_order/ and must
   not be edited, and an inline sheet wins ties against ours — so it is
   out-specified here instead. The tag is white paper; the receipt is printed on
   it, not dropped into a black box. */
.mcs .woocommerce-checkout-review-order-table.ms-co-review{
  background:var(--paper);
  color:var(--ink);
  border-radius:0;
  padding:0;
}

/* line items */
.ms-co-review__item{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--rule-soft);
}
.ms-co-review__thumb{
  flex:0 0 auto;position:relative;
  width:44px;height:44px;border-radius:12px;overflow:hidden;background:var(--wash);
}
.ms-co-review__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ms-co-review__qty{
  position:absolute;right:-5px;bottom:-5px;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--ink);color:var(--paper);
  font:700 10px/18px var(--mono);text-align:center;
}
.ms-co-review__name{display:block;font-size:13px;font-weight:600;line-height:1.3}
.ms-co-review__meta{display:block;font-size:11.5px;color:var(--ink-45);margin-top:3px}
.ms-co-review__line{
  margin-left:auto;flex:0 0 auto;
  font:600 13px/1.3 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* totals, below a dashed fold */
.ms-co-review__totals{
  margin-top:6px;padding-top:16px;
  border-top:1.5px dashed var(--ink-25);
}
.ms-co-review__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:6px 0;font-size:13px;color:var(--ink-45);
}
.ms-co-review__row .woocommerce-Price-amount,
.ms-co-review__row bdi{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
/* the carrier "Изменить" link ships red from the theme — contrast is the only
   colour this checkout has */
.mcs .ms-co-review__ship-change,
.ms-co-review__row.shipping button,
.ms-co-review__row .ms-co-review__toggle{
  background:transparent;border:0;padding:0 0 0 8px;cursor:pointer;
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--ink);
}
.ms-co-review__row.order-total{
  margin-top:10px;padding-top:14px;border-top:1px solid var(--ink);
  color:var(--ink);
}
.ms-co-review__row.order-total>*:first-child{
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;
}
.ms-co-review__row.order-total .woocommerce-Price-amount,
.ms-co-review__row.order-total bdi{
  font:900 30px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.mcs .woocommerce-remove-coupon{
  margin-left:8px;font-size:11px;color:var(--ink-45);text-decoration:none;border-bottom:1px solid var(--rule);
}

/* promo code */
.mcs-coupon{margin-top:16px;border-top:1px dashed var(--rule);padding-top:14px}
.mcs-coupon>summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-45);
}
.mcs-coupon>summary::-webkit-details-marker{display:none}
.mcs-coupon>summary::after{content:"＋";font-size:14px;color:var(--ink)}
.mcs-coupon[open]>summary::after{content:"−︎"}
.mcs-coupon-field{display:flex;gap:8px;margin-top:12px}
.mcs-coupon-field input{
  flex:1 1 auto;min-width:0;
  border:1.5px solid var(--rule) !important;border-radius:var(--r-pill) !important;
  padding:11px 16px !important;font-size:13px;
}
.mcs-coupon-field input:focus{border-color:var(--ink) !important}
.mcs-coupon-field button{
  flex:0 0 auto;
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:0;border-radius:var(--r-pill);
  padding:11px 18px;cursor:pointer;
}
#mcs-coupon-result{margin-top:8px;font-size:12px;color:var(--ink-45)}

.mcs-order-foot{margin:16px 0 14px;font-size:11.5px;line-height:1.5;color:var(--ink-45)}

/* care-symbol guarantees along the tag's bottom edge */
.mcs-reassurance{
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;
  border:1px solid var(--rule);border-radius:var(--r-tag);
  color:var(--ink-45);font-size:11.5px;line-height:1.4;
}
.mcs-reassurance span{font-size:16px;color:var(--ink)}
.mcs-reassurance p{margin:0}

/* ------------------------------------------------------- notices/status --- */

.mcs .woocommerce-error,.mcs .woocommerce-message,.mcs .woocommerce-info,.mcs .notification{
  list-style:none;margin:0 0 16px;padding:14px 18px;
  border:1.5px solid var(--ink);border-radius:var(--r-field);
  background:var(--paper);color:var(--ink);font-size:13px;
}
.mcs .woocommerce-error{border-style:dashed}
.mcs .notification.mcs-notice-toast,
.mcs .woocommerce-message.mcs-notice-toast,
#mcs-coupon-result .notification.mcs-notice-toast{
  max-height:120px;overflow:hidden;
  transition:opacity .4s ease,transform .4s ease,max-height .4s ease,margin .4s ease,padding .4s ease,border-width .4s ease;
}
.mcs .notification.mcs-notice-out,
.mcs .woocommerce-message.mcs-notice-out,
#mcs-coupon-result .notification.mcs-notice-out{
  opacity:0;transform:translateY(-8px);
  max-height:0;margin:0 !important;padding-top:0 !important;padding-bottom:0 !important;
  border-width:0 !important;pointer-events:none;
}
@media(prefers-reduced-motion:reduce){
  .mcs .notification.mcs-notice-toast,.mcs .woocommerce-message.mcs-notice-toast{
    transition:none;
  }
}
.mcs-live-status{margin:14px 0 0;font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-25)}

/* busy: a running stitch instead of a spinner */
.mcs-form.mcs-is-busy{position:relative}
.mcs-form.mcs-is-busy::before{
  content:"";position:absolute;left:0;right:0;top:-2px;height:2px;z-index:50;
  background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 16px);
  background-size:16px 2px;
  animation:mcs-stitch 700ms linear infinite;
}
@keyframes mcs-stitch{from{background-position:0 0}to{background-position:16px 0}}

/* --------------------------------------------------------- gate / empty --- */

.mcs-gate{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:40px 0 56px;align-items:stretch}
.mcs-gate-art{
  background:var(--ink);color:var(--paper);border-radius:var(--r-card);
  padding:32px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;
}
.mcs-gate-art>span{font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;opacity:.6}
.mcs-gate-art>strong{font-size:72px;font-weight:900;letter-spacing:-.05em;line-height:1}
.mcs-gate-art>div{font-size:15px;line-height:1.45;opacity:.8}
.mcs-gate-copy{display:flex;flex-direction:column;justify-content:center;gap:14px}
.mcs-gate-copy h2{font-size:clamp(32px,4.6vw,54px);font-weight:900;letter-spacing:-.04em;line-height:1;margin:0}
.mcs-gate-copy p{color:var(--ink-45);margin:0;max-width:42ch}
.mcs-gate-copy .mcs-btn{width:auto;align-self:flex-start;margin-top:8px}
.mcs-gate-perks{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mcs-gate-perks span{
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-45);
  border:1px solid var(--rule);border-radius:var(--r-pill);padding:9px 14px;
}
.mcs-empty{text-align:center;padding:64px 0 72px;display:grid;gap:14px;justify-items:center}
.mcs-empty>span{font-size:34px}
.mcs-empty h2{font-size:clamp(30px,4.4vw,50px);font-weight:900;letter-spacing:-.04em;line-height:1;margin:0}
.mcs-empty p{color:var(--ink-45);margin:0}
.mcs-empty .mcs-btn{width:auto}
@media(max-width:900px){.mcs-gate{grid-template-columns:1fr}}

.mcs-bottom-note{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  padding:28px 0 40px;border-top:1px solid var(--rule);
  font-size:12.5px;color:var(--ink-45);
}
.mcs-bottom-note a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink)}

/* ------------------------------------------------------- mobile bar ------ */

.mcs-mobile-bar{display:none}
.mcs-mobile-total{font:900 18px/1 var(--mono);font-variant-numeric:tabular-nums}

/* --------------------------------------------------------- pickup modals -- */

body.mcs-page .cdek-map .cdek-iz2c54,
body.mcs-page .wc-backbone-modal .wc-backbone-modal-content{
  border-radius:var(--r-card);overflow:hidden;border:2px solid var(--ink);
  font-family:var(--sans);
}
body.mcs-page .wc-backbone-modal .wc-backbone-modal-header{
  background:var(--paper);border-bottom:1px solid var(--rule);
}
body.mcs-page .wc-backbone-modal .wc-backbone-modal-header h1{
  font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
}
body.mcs-page .wc-backbone-modal .modal-close-link,
body.mcs-page .cdek-map .cdek-pw1flc{
  border-radius:var(--r-pill);background:var(--ink);color:var(--paper);
  width:34px;height:34px;display:grid;place-items:center;border:0;cursor:pointer;
}

/* ------------------------------------------------------------ a11y ------- */

.mcs :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
@media(prefers-reduced-motion:reduce){
  body.mcs-page *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}


/* --------------------------------------------------- checkout footer ---- */
/* studio/chrome-footer.php. A thin monochrome strip; as a flex child of
   body.mcs-wizard-on it takes its natural height and the step area shrinks
   to fit, so the page still never scrolls. */

#mcs-chrome-foot{
  flex:0 0 auto;
  display:flex;align-items:center;gap:18px;
  min-height:40px;padding:0 24px;
  background:var(--paper);
  border-top:1px solid var(--rule);
  font:var(--micro);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink-45);
}
#mcs-chrome-foot a{color:var(--ink-45);text-decoration:none;transition:color var(--t)}
#mcs-chrome-foot a:hover{color:var(--ink)}
.mcs-foot-copy{color:var(--ink);font-weight:700;flex:0 0 auto}
.mcs-foot-links{display:flex;gap:16px;flex-wrap:wrap}
.mcs-foot-spacer{flex:1 1 auto}
.mcs-foot-pay{display:flex;gap:10px;flex:0 0 auto}
.mcs-foot-pay span{opacity:.7}
.mcs-foot-secure{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;white-space:nowrap}
.mcs-foot-secure svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8}

@media(max-width:860px){ .mcs-foot-pay{display:none} }
@media(max-width:640px){
  #mcs-chrome-foot{gap:10px;padding:8px 16px;min-height:0;flex-wrap:wrap;justify-content:center;text-align:center}
  .mcs-foot-spacer{display:none}
  .mcs-foot-secure{display:none}
}
@media(max-height:700px){ .mcs-foot-pay{display:none} }

/* WooCommerce blockUI covers the whole checkout until update_order_review
   returns. Post RF's tariff call can hang that request; do not trap clicks. */
body.mcs-page .blockUI,
body.mcs-page .blockOverlay{
  display:none !important;
  pointer-events:none !important;
}

/* CDEK widget popup (.cdek-o13fdj / .cdek-3f9gze) is position:fixed; inset:0;
   z-index:99999. After update_checkout the map unmounts and this layer stays. */
body.mcs-page:not(.mcs-cdek-map-open) > [class*="cdek-"]{
  display:none !important;
  pointer-events:none !important;
}

/* ── Wallet payment method card ────────────────────────────────────────────── */
/* Balance badge shown in the right icon area */
.ms-co-pay__wallet-balance {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
}
.ms-co-pay:has(input:checked) .ms-co-pay__wallet-balance {
  color: var(--paper);
}
/* Make the wallet subtitle (cashback hint) stand out slightly */
.payment_method_wallet .ms-co-pay__subtitle {
  font-weight: 500;
}

.ms-co-pay__wallet-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--r-pill, 999px);
  padding: 4px 10px;
  white-space: nowrap;
}
.ms-co-pay:has(input:checked) .ms-co-pay__wallet-badge {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.15);
}
.ms-co-pay:has(input:checked) .ms-co-pay__wallet-badge svg {
  stroke: var(--paper);
}