/* =========================================================================
 * Merit checkout skin for WooCommerce
 * Loaded only on the checkout / order-received pages (body.merit-skin).
 * Restyles the native checkout to match the Merit storefront. The checkout
 * ENGINE is untouched — this is presentation only.
 * ========================================================================= */

/* ---- Fonts (served locally from the plugin) --------------------------- */
@font-face{font-family:'Raleway';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/raleway-500.woff2) format('woff2');}
@font-face{font-family:'Raleway';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/raleway-600.woff2) format('woff2');}
@font-face{font-family:'Raleway';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/raleway-700.woff2) format('woff2');}
@font-face{font-family:'Raleway';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/raleway-800.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-700.woff2) format('woff2');}

/* ---- Tokens ----------------------------------------------------------- */
body.merit-skin{
  --obsidian:#0A0A0A; --panel:#12141A; --panel-2:#171A21; --silver:#C7CCD4;
  --silver-dim:#8A9099; --white:#F4F6F9; --blue:#4FA9FF; --blue-deep:#2B6FD6;
  --blue-glow:rgba(79,169,255,.35); --green:#22c07a;
  --line:rgba(199,204,212,.12); --line-soft:rgba(199,204,212,.06);
  --radius:14px; --radius-sm:10px;
  --font-display:"Raleway",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;

  background:var(--obsidian) !important;
  color:var(--silver);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

/* Give the checkout content room to breathe and centre it. */
body.merit-skin .woocommerce,
body.merit-skin .wc-block-checkout,
body.merit-skin .wp-block-woocommerce-checkout,
body.merit-skin .entry-content,
body.merit-skin .site-main,
body.merit-skin main{
  color:var(--silver);
}

body.merit-skin h1,
body.merit-skin h2,
body.merit-skin h3,
body.merit-skin h4{
  font-family:var(--font-display);
  color:var(--white);
  letter-spacing:.01em;
}

body.merit-skin a{ color:var(--blue); }
body.merit-skin a:hover{ color:#7bc0ff; }

/* ======================================================================= */
/*  CLASSIC (shortcode) CHECKOUT                                           */
/* ======================================================================= */

/* Column cards */
body.merit-skin #customer_details .col-1,
body.merit-skin #customer_details .col-2,
body.merit-skin #order_review,
body.merit-skin .woocommerce-checkout #payment{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 24px;
}
body.merit-skin #customer_details{ margin-bottom:26px; }
body.merit-skin #order_review{ margin-top:0; }

/* Section headings */
body.merit-skin .woocommerce-billing-fields h3,
body.merit-skin .woocommerce-shipping-fields h3,
body.merit-skin .woocommerce-additional-fields h3,
body.merit-skin #order_review_heading{
  font-family:var(--font-display);
  font-weight:800;
  color:var(--white);
  font-size:18px;
  letter-spacing:.02em;
  margin:0 0 18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}

/* Labels */
body.merit-skin .woocommerce form .form-row label,
body.merit-skin .woocommerce-checkout label{
  color:var(--silver);
  font-size:13px;
  font-weight:500;
  margin-bottom:6px;
}
body.merit-skin .required{ color:var(--blue); border:0; }

/* Inputs / selects / textareas */
body.merit-skin .woocommerce form .form-row input.input-text,
body.merit-skin .woocommerce form .form-row textarea,
body.merit-skin .woocommerce-checkout input[type=text],
body.merit-skin .woocommerce-checkout input[type=email],
body.merit-skin .woocommerce-checkout input[type=tel],
body.merit-skin .woocommerce-checkout input[type=password],
body.merit-skin .woocommerce-checkout textarea,
body.merit-skin .select2-container--default .select2-selection--single,
body.merit-skin .woocommerce-checkout select{
  background:var(--obsidian) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-sm) !important;
  color:var(--white) !important;
  font-family:var(--font-body) !important;
  font-size:15px !important;
  padding:13px 15px !important;
  line-height:1.4 !important;
  box-shadow:none !important;
  transition:border-color .15s, box-shadow .15s;
}
body.merit-skin .select2-container--default .select2-selection--single{
  height:auto !important; display:flex; align-items:center;
}
body.merit-skin .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--white) !important; line-height:1.4 !important; padding:0 !important;
}
body.merit-skin .woocommerce form .form-row input.input-text::placeholder,
body.merit-skin .woocommerce-checkout textarea::placeholder{ color:var(--silver-dim); }

body.merit-skin .woocommerce form .form-row input.input-text:focus,
body.merit-skin .woocommerce form .form-row textarea:focus,
body.merit-skin .woocommerce-checkout select:focus,
body.merit-skin .select2-container--default.select2-container--focus .select2-selection--single{
  outline:none !important;
  border-color:var(--blue) !important;
  box-shadow:0 0 0 3px var(--blue-glow) !important;
}

/* select2 dropdown */
body.merit-skin .select2-dropdown{
  background:var(--panel-2); border:1px solid var(--line); color:var(--silver);
}
body.merit-skin .select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--blue-deep); color:#fff;
}

/* Order review table */
body.merit-skin .woocommerce-checkout-review-order-table,
body.merit-skin .woocommerce-checkout-review-order-table thead th,
body.merit-skin .woocommerce-checkout-review-order-table td,
body.merit-skin .woocommerce-checkout-review-order-table tfoot th,
body.merit-skin .woocommerce-checkout-review-order-table tr{
  background:transparent !important;
  color:var(--silver);
  border-color:var(--line-soft) !important;
}
body.merit-skin .woocommerce-checkout-review-order-table th{ color:var(--white); font-family:var(--font-display); }
body.merit-skin .woocommerce-checkout-review-order-table .order-total .amount,
body.merit-skin .woocommerce-checkout-review-order-table .amount{ color:var(--white); }
body.merit-skin .woocommerce-checkout-review-order-table .order-total th,
body.merit-skin .woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount{
  color:var(--white); font-size:18px;
}

/* Payment box */
body.merit-skin #payment .wc_payment_methods li{ list-style:none; }
body.merit-skin #payment .payment_box{
  background:var(--panel-2) !important;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--silver);
}
body.merit-skin #payment .payment_box::before{ display:none; }
body.merit-skin #payment div.form-row{ padding:16px 0; }
body.merit-skin #payment .woocommerce-privacy-policy-text,
body.merit-skin #payment .woocommerce-terms-and-conditions-wrapper{ color:var(--silver-dim); }

/* Coupon / notices */
body.merit-skin .woocommerce-form-coupon-toggle .woocommerce-info,
body.merit-skin .woocommerce-info,
body.merit-skin .woocommerce-message{
  background:var(--panel-2);
  border-top:3px solid var(--blue);
  color:var(--silver);
  border-radius:var(--radius-sm);
}
body.merit-skin .woocommerce-error{
  background:var(--panel-2);
  border-top:3px solid #ff5b6a;
  color:var(--silver);
  border-radius:var(--radius-sm);
}
body.merit-skin .woocommerce-info::before,
body.merit-skin .woocommerce-message::before{ color:var(--blue); }

/* ---- Place Order button (classic) — Merit primary --------------------*/
body.merit-skin #place_order,
body.merit-skin .woocommerce #payment #place_order{
  background:linear-gradient(135deg,var(--blue),var(--blue-deep)) !important;
  color:#04101f !important;
  font-family:var(--font-display) !important;
  font-weight:800 !important;
  letter-spacing:.05em !important;
  font-size:15px !important;
  border:none !important;
  border-radius:12px !important;
  padding:16px 28px !important;
  width:100%;
  box-shadow:0 8px 26px var(--blue-glow) !important;
  transition:transform .15s, box-shadow .2s;
  text-transform:none;
}
body.merit-skin #place_order:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 34px var(--blue-glow) !important;
}

/* ======================================================================= */
/*  BLOCK CHECKOUT                                                          */
/* ======================================================================= */

body.merit-skin .wc-block-checkout{ color:var(--silver); }

/* Panels / step cards */
body.merit-skin .wp-block-woocommerce-checkout .wc-block-components-checkout-step,
body.merit-skin .wc-block-checkout__sidebar .wc-block-components-sidebar,
body.merit-skin .wc-block-components-panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
body.merit-skin .wc-block-checkout__main .wc-block-components-checkout-step{
  padding:22px 24px; margin-bottom:20px;
}

/* Step titles */
body.merit-skin .wc-block-components-checkout-step__title,
body.merit-skin .wc-block-components-title{
  font-family:var(--font-display) !important;
  color:var(--white) !important;
  font-weight:800 !important;
}
body.merit-skin .wc-block-components-checkout-step__description,
body.merit-skin .wc-block-components-checkout-step__heading-content{
  color:var(--silver-dim) !important;
}

/* Inputs (block) */
body.merit-skin .wc-block-components-text-input input,
body.merit-skin .wc-block-components-text-input input[type=text],
body.merit-skin .wc-block-components-text-input input[type=email],
body.merit-skin .wc-block-components-text-input input[type=tel],
body.merit-skin .wc-block-components-select .wc-block-components-select__container,
body.merit-skin .wc-block-components-combobox .components-form-token-field__input-container,
body.merit-skin .wc-block-components-textarea{
  background:var(--obsidian) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-sm) !important;
  color:var(--white) !important;
  font-family:var(--font-body) !important;
}
body.merit-skin .wc-block-components-text-input input:focus,
body.merit-skin .wc-block-components-text-input.is-active input{
  border-color:var(--blue) !important;
  box-shadow:0 0 0 3px var(--blue-glow) !important;
}
body.merit-skin .wc-block-components-text-input label,
body.merit-skin .wc-block-components-checkout-step label,
body.merit-skin .wc-block-components-text-input.is-active label{
  color:var(--silver-dim) !important;
}

/* Order summary (block) */
body.merit-skin .wc-block-components-order-summary,
body.merit-skin .wc-block-components-totals-item,
body.merit-skin .wc-block-components-totals-footer-item{
  color:var(--silver) !important;
  border-color:var(--line-soft) !important;
}
body.merit-skin .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.merit-skin .wc-block-components-product-price,
body.merit-skin .wc-block-components-order-summary-item__total-price{
  color:var(--white) !important;
}

/* Radios / payment options (block) */
body.merit-skin .wc-block-components-radio-control__option{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
body.merit-skin .wc-block-components-radio-control__option--checked{
  border-color:var(--blue);
  box-shadow:0 0 0 1px var(--blue) inset;
}

/* Notices (block) */
body.merit-skin .wc-block-components-notice-banner{
  background:var(--panel-2) !important;
  color:var(--silver) !important;
  border-radius:var(--radius-sm);
}
body.merit-skin .wc-block-components-notice-banner.is-error{ border-color:#ff5b6a; }
body.merit-skin .wc-block-components-notice-banner.is-info{ border-color:var(--blue); }

/* ---- Place Order button (block) — Merit primary ----------------------*/
body.merit-skin .wc-block-components-checkout-place-order-button,
body.merit-skin .wc-block-checkout__actions_row button{
  background:linear-gradient(135deg,var(--blue),var(--blue-deep)) !important;
  color:#04101f !important;
  font-family:var(--font-display) !important;
  font-weight:800 !important;
  letter-spacing:.05em !important;
  border:none !important;
  border-radius:12px !important;
  box-shadow:0 8px 26px var(--blue-glow) !important;
  transition:transform .15s, box-shadow .2s;
}
body.merit-skin .wc-block-components-checkout-place-order-button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 34px var(--blue-glow) !important;
}

/* ---- Order received / thank-you page ---------------------------------- */
body.merit-skin .woocommerce-order .woocommerce-order-overview,
body.merit-skin .woocommerce-order .woocommerce-table,
body.merit-skin .woocommerce-order .woocommerce-customer-details address{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--silver);
}
body.merit-skin .woocommerce-order .woocommerce-thankyou-order-received{
  font-family:var(--font-display);
  color:var(--white);
  font-weight:800;
}

/* =========================================================================
 * Merit multi-step checkout layout (body.mco-checkout)
 * ========================================================================= */
body.mco-checkout .site-header,
body.mco-checkout .site-footer,
body.mco-checkout header.site-header,
body.mco-checkout footer.site-footer,
body.mco-checkout .woocommerce-breadcrumb,
body.mco-checkout .page-title,
body.mco-checkout .entry-title{ display:none !important; }

body.mco-checkout,
body.mco-checkout .site-content,
body.mco-checkout .content-area,
body.mco-checkout main,
body.mco-checkout .woocommerce{ background:var(--obsidian) !important; }

.mco{ max-width:1160px; margin:0 auto; padding:22px 20px 60px; color:var(--silver); }

/* Header */
.mco-header{ display:flex; align-items:center; justify-content:space-between; padding:6px 0 26px; }
.mco-brand img{ height:46px; width:auto; }
.mco-secure-tag{ display:inline-flex; align-items:center; gap:8px; color:var(--silver); font-size:13.5px; font-family:var(--font-display); font-weight:600; }
.mco-secure-tag svg{ width:16px; height:16px; color:var(--blue); }

/* Progress steps */
.mco-steps{ list-style:none; display:flex; align-items:center; justify-content:center; gap:0; margin:6px auto 34px; padding:0; max-width:640px; }
.mco-step-dot{ display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; flex:0 0 auto; }
.mco-step-dot:not(:last-child){ flex:1 1 auto; }
.mco-step-dot .n{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--line); color:var(--silver-dim); font-family:var(--font-display); font-weight:800; font-size:14px; background:var(--panel); transition:.2s; }
.mco-step-dot .t{ font-size:12.5px; font-family:var(--font-display); font-weight:600; color:var(--silver-dim); letter-spacing:.02em; }
.mco-step-dot:not(:last-child)::after{ content:""; position:absolute; top:17px; left:calc(50% + 24px); right:calc(-50% + 24px); height:1.5px; background:var(--line); }
.mco-step-dot.is-active .n{ border-color:var(--blue); color:var(--blue); box-shadow:0 0 0 4px var(--blue-glow); }
.mco-step-dot.is-active .t{ color:var(--blue); }
.mco-step-dot.is-done .n{ background:linear-gradient(135deg,var(--blue),var(--blue-deep)); border-color:transparent; color:#04101f; }
.mco-step-dot.is-done .t{ color:var(--white); }
.mco-step-dot.is-done:not(:last-child)::after{ background:var(--blue-deep); }

/* Grid */
.mco-grid{ display:grid; grid-template-columns:1fr 400px; gap:30px; align-items:start; }

/* Panels */
.mco-panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px 24px; margin-bottom:20px; }
.mco-panel-title{ font-family:var(--font-display); font-weight:800; color:var(--white); font-size:17px; margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
body.mco-checkout #customer_details .col-1,
body.mco-checkout #customer_details .col-2{ width:auto; float:none; padding:0; background:transparent; border:0; }
body.mco-checkout .woocommerce-billing-fields h3,
body.mco-checkout .woocommerce-shipping-fields h3{ margin-top:0; }
.mco-muted{ color:var(--silver-dim); font-size:13.5px; line-height:1.6; }

/* Buttons */
.mco .btn-primary,
.mco-next{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#04101f; font-family:var(--font-display); font-weight:800; letter-spacing:.04em; font-size:15px; border:none; border-radius:12px; padding:16px 24px; cursor:pointer; box-shadow:0 8px 26px var(--blue-glow); transition:transform .15s, box-shadow .2s; }
.mco-next:hover{ transform:translateY(-2px); box-shadow:0 12px 34px var(--blue-glow); }
.mco-next svg{ width:18px; height:18px; }
.mco-step-actions{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:6px; }
.mco-step-actions .mco-next{ width:auto; }
.mco-back{ background:none; border:none; color:var(--silver); font-family:var(--font-body); font-size:14px; cursor:pointer; padding:8px 4px; }
.mco-back:hover{ color:var(--blue); }

/* Payment step: don't double-card (base skin cards #payment already) */
body.mco-checkout .mco-panel--payment #payment,
body.mco-checkout .mco-panel--payment .woocommerce-checkout-payment{ background:transparent !important; border:0 !important; padding:0 !important; }

/* Summary */
.mco-summary{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; position:sticky; top:20px; }
.mco-summary-title{ font-family:var(--font-display); font-weight:800; color:var(--white); font-size:16px; letter-spacing:.02em; margin:0 0 18px; }
body.mco-checkout #order_review{ background:transparent !important; border:0 !important; padding:0 !important; }

.mco-review-items{ display:flex; flex-direction:column; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.mco-item{ display:grid; grid-template-columns:56px 1fr auto; gap:14px; align-items:start; }
.mco-item-thumb{ position:relative; width:56px; height:56px; border-radius:10px; overflow:hidden; background:var(--obsidian); border:1px solid var(--line); }
.mco-item-thumb .mco-item-img,
.mco-item-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }


   at every scale. On a cart or checkout thumbnail that makes it only about
   three pixels tall - which is exactly how the printed label reads at that
   spelled out in text beside every line item, so nothing is lost. */
}

.mco-item-thumb, .mco-order-item-thumb{ overflow:visible; }
.mco-item-qtybadge{ position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px; border-radius:20px; background:var(--blue); color:#04101f; font-size:11px; font-weight:800; font-family:var(--font-display); display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.5); }
.mco-item-name{ font-family:var(--font-display); font-weight:700; color:var(--white); font-size:14.5px; line-height:1.25; }
.mco-item-tag{ color:var(--silver-dim); font-size:11.5px; margin-top:2px; }
.mco-item-price{ font-family:var(--font-display); font-weight:800; color:var(--white); font-size:14.5px; white-space:nowrap; }
.mco-item-price del{ color:var(--silver-dim); font-weight:600; }

.mco-qty{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; }
.mco-qty-btn{ width:24px; height:24px; border-radius:7px; border:1px solid var(--line); background:var(--obsidian); color:var(--white); font-size:15px; line-height:1; cursor:pointer; display:grid; place-items:center; }
.mco-qty-btn:hover{ border-color:var(--blue); color:var(--blue); }
.mco-qty-n{ min-width:20px; text-align:center; font-family:var(--font-display); font-weight:700; color:var(--white); font-size:13.5px; }
.mco-qty-rm{ margin-left:8px; background:none; border:none; color:var(--silver-dim); font-size:12px; cursor:pointer; text-decoration:underline; }
.mco-qty-rm:hover{ color:#ff6b78; }
.mco-review.is-busy{ opacity:.55; pointer-events:none; }

.mco-review-totals{ padding-top:16px; display:flex; flex-direction:column; gap:11px; }
.mco-total-row{ display:flex; align-items:center; justify-content:space-between; font-size:14px; color:var(--silver); }
.mco-total-row span:last-child{ color:var(--white); font-family:var(--font-display); font-weight:600; }
.mco-total-row--muted span{ color:var(--silver-dim) !important; font-weight:500 !important; }
.mco-total-row--discount span:last-child{ color:var(--green) !important; }
.mco-total-row--grand{ margin-top:6px; padding-top:14px; border-top:1px solid var(--line); }
.mco-total-row--grand span:first-child{ font-family:var(--font-display); font-weight:800; color:var(--white); font-size:17px; }
.mco-total-row--grand span:last-child{ color:var(--blue) !important; font-size:20px; font-weight:800; }
.mco-shipping-rows{ display:flex; flex-direction:column; gap:8px; }
.mco-shipping-rows ul#shipping_method{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.mco-shipping-rows label{ color:var(--silver); }

/* Assurance blocks + pay icons */
.mco-assure{ display:flex; gap:12px; align-items:flex-start; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.mco-assure-ic svg{ width:22px; height:22px; color:var(--blue); }
.mco-assure strong{ display:block; font-family:var(--font-display); font-weight:700; color:var(--white); font-size:13.5px; margin-bottom:3px; }
.mco-assure p{ margin:0; color:var(--silver-dim); font-size:12.5px; line-height:1.55; }
.mco-payicons{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.mco-payicons span{ font-family:var(--font-display); font-weight:800; font-size:9.5px; letter-spacing:.04em; color:var(--silver); background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:6px 9px; }

/* Trust bar */
.mco-trustbar{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:44px 0 34px; padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.mco-trust{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; }
.mco-trust svg{ width:28px; height:28px; color:var(--blue); margin-bottom:4px; }
.mco-trust b{ font-family:var(--font-display); font-weight:800; color:var(--white); font-size:13px; letter-spacing:.02em; }
.mco-trust span{ color:var(--silver-dim); font-size:12.5px; line-height:1.5; }

/* Footer */
.mco-footer{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-top:20px; }
.mco-foot-brand{ display:flex; align-items:center; gap:18px; }
.mco-foot-brand img{ height:40px; width:auto; }
.mco-foot-brand p{ margin:0; color:var(--silver-dim); font-size:13px; max-width:320px; line-height:1.5; }
.mco-foot-legal{ color:var(--silver-dim); font-size:12.5px; }

/* Responsive */
@media (max-width:980px){
	.mco-grid{ grid-template-columns:1fr; }
	.mco-summary{ position:static; order:-1; }
	.mco-trustbar{ grid-template-columns:repeat(2,1fr); gap:26px; }
	.mco-step-dot .t{ display:none; }
}
@media (max-width:560px){
	.mco-header{ padding-bottom:18px; }
	.mco-brand img{ height:38px; }
	.mco-footer{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================================
 * Single-screen checkout additions / overrides
 * ========================================================================= */

/* Sidebar becomes a transparent column of cards */
body.mco-checkout .mco-summary{ background:transparent; border:0; padding:0; position:sticky; top:20px; display:flex; flex-direction:column; gap:20px; }
body.mco-checkout .mco-summary .mco-panel{ margin:0; }
body.mco-checkout .mco-panel-title{ text-transform:uppercase; letter-spacing:.06em; font-size:14px; }
body.mco-checkout #customer_details .woocommerce-billing-fields h3,
body.mco-checkout #customer_details .woocommerce-shipping-fields h3,
body.mco-checkout #customer_details h3{ text-transform:uppercase; letter-spacing:.06em; font-size:14px; }

/* Coupon (always visible) */
.mco-coupon-head{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; color:var(--white); font-size:14.5px; margin-bottom:14px; }
.mco-coupon-head svg{ width:18px; height:18px; color:var(--silver-dim); }
.mco-coupon-row{ display:flex; gap:10px; }
.mco-coupon-row input{ flex:1 1 auto; min-width:0; background:var(--obsidian); border:1px solid var(--line); border-radius:10px; color:var(--white); font-family:var(--font-body); font-size:14px; padding:12px 14px; }
.mco-coupon-row input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-glow); }
.mco-coupon-apply{ flex:0 0 auto; background:var(--panel-2); border:1px solid var(--line); color:var(--white); font-family:var(--font-display); font-weight:800; letter-spacing:.04em; font-size:13px; border-radius:10px; padding:0 20px; cursor:pointer; transition:.15s; }
.mco-coupon-apply:hover{ border-color:var(--blue); color:var(--blue); }
.mco-coupon-msg{ font-size:12.5px; margin-top:9px; }
.mco-coupon-msg[data-state="ok"]{ color:var(--green); }
.mco-coupon-msg[data-state="err"]{ color:#ff6b78; }

.mco-pay-note{ margin-top:-6px; margin-bottom:16px; }

/* Relocated shipping options (left panel) */
#mco-shipping-methods tr,
#mco-shipping-methods td{ display:block; padding:0; border:0; background:none; }
#mco-shipping-methods th{ display:none; }
#mco-shipping-methods ul#shipping_method{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
#mco-shipping-methods li{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--obsidian); transition:.15s; }
#mco-shipping-methods li:hover{ border-color:rgba(79,169,255,.4); }
#mco-shipping-methods input[type="radio"]{ width:18px; height:18px; accent-color:var(--blue); flex:0 0 auto; }
#mco-shipping-methods label{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; margin:0; color:var(--white); font-family:var(--font-display); font-weight:600; font-size:14px; cursor:pointer; }
#mco-shipping-methods label .woocommerce-Price-amount{ color:var(--white); font-weight:800; }
#mco-shipping-methods .mco-shipping-rows > tr:only-child td:empty{ display:none; }
.mco-shipping-slot .mco-muted{ margin:0; }

/* Place Order relocated to sidebar */
.mco-placeorder-slot{ margin-top:6px; }
body.mco-checkout #mco-placeorder-slot .place-order{ margin:0; padding:0; float:none; width:auto; }
body.mco-checkout #place_order{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px; background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#04101f; font-family:var(--font-display); font-weight:800; letter-spacing:.05em; font-size:16px; border:0; border-radius:12px; padding:17px 24px; box-shadow:0 8px 26px var(--blue-glow); cursor:pointer; transition:transform .15s, box-shadow .2s; }
body.mco-checkout #place_order:hover{ transform:translateY(-2px); box-shadow:0 12px 34px var(--blue-glow); }
body.mco-checkout #mco-placeorder-slot .woocommerce-terms-and-conditions-wrapper{ margin-bottom:12px; }

/* USD label on total */
.mco-usd{ font-size:12px; color:var(--silver-dim); font-weight:600; letter-spacing:.04em; margin-right:4px; }

/* 4-badge grid inside the summary card */
.mco-badgegrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.mco-badge{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; color:var(--silver-dim); font-size:10.5px; line-height:1.25; font-family:var(--font-display); font-weight:600; }
.mco-badge svg{ width:22px; height:22px; color:var(--blue); }

@media (max-width:980px){
	body.mco-checkout .mco-summary{ position:static; order:-1; }
}

/* =========================================================================
 * Returning-customer login bar
 * ========================================================================= */

/* Returning customer prompt + collapsible login form */
.mco-login-bar{ margin:0 0 24px; }
.mco-login-prompt{ color:var(--silver); font-size:14px; }
.mco-showlogin{ color:var(--blue); font-weight:600; text-decoration:none; cursor:pointer; }
.mco-showlogin:hover{ text-decoration:underline; }
.mco-login-form{ display:none; margin-top:16px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; max-width:520px; }
.mco-login-form.is-open{ display:block; }
.mco-login-fields{ display:flex; flex-direction:column; gap:14px; }
.mco-login-row{ display:flex; flex-direction:column; gap:6px; margin:0; }
.mco-login-row label{ font-size:12.5px; color:var(--silver-dim); font-family:var(--font-display); font-weight:600; letter-spacing:.02em; }
.mco-login-row input{ background:var(--obsidian); border:1px solid var(--line); border-radius:10px; color:var(--white); padding:12px 14px; font-size:14px; font-family:var(--font-body); }
.mco-login-row input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-glow); }
.mco-login-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0; flex-wrap:wrap; }
.mco-login-remember{ font-size:12.5px; color:var(--silver); display:flex; gap:8px; align-items:center; }
.mco-login-remember input{ accent-color:var(--blue); width:16px; height:16px; }
.mco-login-lost{ font-size:12.5px; color:var(--blue); text-decoration:none; }
.mco-login-lost:hover{ text-decoration:underline; }
.mco-login-submit{ background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#04101f; border:0; border-radius:10px; font-family:var(--font-display); font-weight:800; letter-spacing:.03em; font-size:14px; padding:12px 26px; cursor:pointer; transition:transform .15s; }
.mco-login-submit:hover{ transform:translateY(-1px); }

/* Styled select, for any dropdown on the checkout */
.mco-select-wrap{ position:relative; margin-bottom:18px; }
.mco-select-wrap select{ width:100%; appearance:none; -webkit-appearance:none; -moz-appearance:none; background:var(--obsidian); border:1px solid var(--line); border-radius:12px; color:var(--white); font-family:var(--font-display); font-weight:600; font-size:14px; padding:15px 44px 15px 16px; cursor:pointer; }
.mco-select-wrap select:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-glow); }
.mco-select-wrap select:required:invalid{ color:var(--silver-dim); }
.mco-select-wrap option{ color:var(--white); background:var(--graphite); }
.mco-select-wrap option[value=""]{ color:var(--silver-dim); }
.mco-select-caret{ position:absolute; right:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--silver-dim); pointer-events:none; }


/* =========================================================================
 * Order-received / thank-you page (body.mco-thankyou)
 * ========================================================================= */

body.mco-thankyou .site-header,
body.mco-thankyou .site-footer,
body.mco-thankyou header.site-header,
body.mco-thankyou footer.site-footer,
body.mco-thankyou .woocommerce-breadcrumb,
body.mco-thankyou .page-title,
body.mco-thankyou .entry-title{ display:none !important; }
body.mco-thankyou,
body.mco-thankyou .site-content,
body.mco-thankyou .content-area,
body.mco-thankyou main,
body.mco-thankyou .woocommerce{ background:var(--obsidian) !important; }
body.mco-thankyou .woocommerce-order{ margin:0; }
body.mco-thankyou .mco-panel-title,
body.mco-thankyou .mco-summary-title{ text-transform:uppercase; letter-spacing:.06em; font-size:14px; }

.mco-ty-shopmore{ text-decoration:none; }
.mco-ty-shopmore:hover{ color:var(--blue); }

/* Hero */
.mco-ty-hero{ text-align:center; padding:22px 0 30px; }
.mco-ty-check{ width:78px; height:78px; margin:0 auto 22px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--blue); box-shadow:0 0 0 6px rgba(79,169,255,.12), 0 0 34px var(--blue-glow); }
.mco-ty-check svg{ width:34px; height:34px; color:var(--blue); }
.mco-ty-title{ font-family:var(--font-display); font-weight:800; color:var(--blue); font-size:42px; letter-spacing:.01em; margin:0 0 8px; text-shadow:0 0 30px var(--blue-glow); }
.mco-ty-title--failed{ color:#ff6b78; text-shadow:none; }
.mco-ty-received{ font-family:var(--font-display); font-weight:800; color:var(--white); font-size:22px; letter-spacing:.04em; text-transform:uppercase; margin:0 0 16px; }
.mco-ty-lead{ color:var(--silver); font-size:14.5px; line-height:1.7; max-width:560px; margin:0 auto; }
.mco-ty-cta{ margin-top:22px; }

/* Facts bar */
.mco-ty-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; text-align:center; padding:26px 24px; }
.mco-ty-fact{ display:flex; flex-direction:column; align-items:center; gap:7px; position:relative; }
.mco-ty-fact:not(:last-child)::after{ content:""; position:absolute; right:-6px; top:10%; height:80%; width:1px; background:var(--line); }
.mco-ty-fact svg{ width:26px; height:26px; color:var(--blue); }
.mco-ty-fact-label{ color:var(--white); font-family:var(--font-display); font-weight:700; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; margin-top:2px; }
.mco-ty-fact-value{ color:var(--blue); font-family:var(--font-display); font-weight:700; font-size:14.5px; word-break:break-word; }

/* Two-column: summary + what happens next */
.mco-ty-grid{ grid-template-columns:1fr 1fr; align-items:start; }
.mco-ty-summary{ margin:0; }
.mco-ty-next{ margin:0; }
.mco-free{ color:var(--blue); font-weight:800; }

/* What happens next timeline */
.mco-steps-list{ list-style:none; margin:0; padding:0; position:relative; }
.mco-steps-list li{ display:grid; grid-template-columns:44px 1fr; gap:16px; padding:0 0 26px; position:relative; }
.mco-steps-list li:last-child{ padding-bottom:0; }
.mco-steps-list li::before{ content:""; position:absolute; left:21px; top:44px; bottom:0; width:2px; background:var(--line); }
.mco-steps-list li:last-child::before{ display:none; }
.mco-step-ic{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(79,169,255,.1); border:1px solid rgba(79,169,255,.4); position:relative; z-index:1; }
.mco-step-ic svg{ width:20px; height:20px; color:var(--blue); }
.mco-steps-list strong{ display:block; font-family:var(--font-display); font-weight:700; color:var(--white); font-size:14.5px; letter-spacing:.03em; text-transform:uppercase; margin:6px 0 5px; }
.mco-steps-list p{ margin:0; color:var(--silver-dim); font-size:13px; line-height:1.6; }

/* Need help bar */
.mco-ty-help{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.mco-ty-help-left{ display:flex; align-items:center; gap:16px; }
.mco-ty-help-ic svg{ width:30px; height:30px; color:var(--blue); }
.mco-ty-help strong{ display:block; font-family:var(--font-display); font-weight:700; color:var(--white); font-size:15px; margin-bottom:3px; }
.mco-ty-help p{ margin:0; color:var(--silver-dim); font-size:13px; }
.mco-ty-help-btn{ display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--blue); color:var(--blue); font-family:var(--font-display); font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:13px; border-radius:10px; padding:13px 26px; text-decoration:none; transition:.15s; white-space:nowrap; }
.mco-ty-help-btn:hover{ background:var(--blue); color:#04101f; }

/* Trust badges w/ descriptions */
.mco-ty-badges{ border-top:0; padding:24px 0 6px; margin:0; grid-template-columns:repeat(4,1fr); }
.mco-ty-badges .mco-badge{ gap:8px; font-size:11px; }
.mco-ty-badges .mco-badge svg{ width:26px; height:26px; }
.mco-ty-badges .mco-badge strong{ color:var(--white); font-family:var(--font-display); font-weight:700; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; }
.mco-ty-badges .mco-badge span{ color:var(--silver-dim); line-height:1.4; }

/* Gateway extra (bank transfer instructions, etc.) */
.mco-ty-gateway{ color:var(--silver); font-size:13.5px; line-height:1.7; }
.mco-ty-gateway h2,.mco-ty-gateway h3{ color:var(--white); font-family:var(--font-display); font-size:15px; margin:0 0 10px; }
.mco-ty-gateway ul,.mco-ty-gateway ol{ margin:0; padding-left:18px; }

/* Button */
.mco-ty-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#04101f; font-family:var(--font-display); font-weight:800; letter-spacing:.03em; font-size:15px; border-radius:12px; padding:15px 30px; text-decoration:none; box-shadow:0 8px 26px var(--blue-glow); }
.mco-ty-btn:hover{ transform:translateY(-2px); color:#04101f; }

/* Expanded footer */
.mco-ty-footer{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; align-items:start; border-top:1px solid var(--line); margin-top:34px; padding-top:34px; }
.mco-foot-col h4{ font-family:var(--font-display); font-weight:700; color:var(--white); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 14px; }
.mco-foot-col a{ display:block; color:var(--silver-dim); font-size:13.5px; text-decoration:none; margin-bottom:9px; transition:color .15s; }
.mco-foot-col a:hover{ color:var(--blue); }
.mco-ty-copyright{ text-align:center; color:var(--silver-dim); font-size:12.5px; border-top:1px solid var(--line); margin-top:24px; padding:22px 0 0; }

@media (max-width:900px){
	.mco-ty-grid{ grid-template-columns:1fr; }
	.mco-ty-facts{ grid-template-columns:1fr; gap:22px; }
	.mco-ty-fact:not(:last-child)::after{ display:none; }
	.mco-ty-badges{ grid-template-columns:1fr 1fr; gap:20px; }
	.mco-ty-footer{ grid-template-columns:1fr; gap:24px; }
	.mco-ty-title{ font-size:34px; }
	.mco-ty-received{ font-size:18px; }
	.mco-ty-help{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================================
 * Fixes: total alignment + full product thumbnails (checkout + thank-you)
 * ========================================================================= */

/* Show the whole product instead of a cropped square. Tall images need the
   thumb gets a portrait ratio and the image is contained, not cropped. */
.mco-item{ grid-template-columns:60px 1fr auto; }
.mco-item-thumb{ width:60px; height:74px; border-radius:10px; padding:5px; box-sizing:border-box; display:grid; place-items:center; }
.mco-item-thumb .mco-item-img,
.mco-item-thumb img{ width:100%; height:100%; object-fit:contain !important; display:block; }

/* Totals: keep every row on one baseline so labels and figures line up, and
   stop the grand total's "USD" from floating off the price's baseline. */
.mco-total-row{ align-items:baseline; gap:16px; }
.mco-total-row > span:last-child{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.mco-total-row--grand{ align-items:baseline; }
.mco-total-row--grand > span:last-child{ display:inline-flex; align-items:baseline; justify-content:flex-end; gap:7px; line-height:1.1; }
.mco-total-row--grand .woocommerce-Price-amount,
.mco-total-row--grand bdi{ line-height:1.1; }
.mco-usd{ margin-right:0; position:relative; top:-1px; }

/* Line prices share the same numeric alignment. */
.mco-item-price{ font-variant-numeric:tabular-nums; text-align:right; }

/* =========================================================================
 * Fixes v2: lining figures everywhere + full image (not top-cropped)
 * ========================================================================= */

/* Raleway ships old-style figures by default: 8 stands tall while 2, 3, 4, 7
   and 9 are drawn short and dip below the baseline, so prices look mismatched
   and crooked. Force lining (uniform-height) + tabular (equal-width) figures
   across the whole checkout and confirmation, including WooCommerce's own
   price markup. */
body.merit-skin,
body.merit-skin *,
body.mco-thankyou,
body.mco-thankyou *,
.mco,
.mco *{
	font-variant-numeric:lining-nums tabular-nums !important;
	-moz-font-feature-settings:"lnum" 1, "tnum" 1;
	-webkit-font-feature-settings:"lnum" 1, "tnum" 1;
	font-feature-settings:"lnum" 1, "tnum" 1 !important;
}

/* Prices sit on one baseline regardless of size */
.mco-total-row,
.mco-total-row--grand,
.mco-item{ align-items:baseline; }
.mco-item{ align-items:start; }
.woocommerce-Price-amount,
.woocommerce-Price-currencySymbol,
.mco-item-price,
.mco-total-row span,
.mco-ty-fact-value{ font-variant-numeric:lining-nums tabular-nums !important; font-feature-settings:"lnum" 1, "tnum" 1 !important; }

/* The theme's `img{height:auto}` was overriding the thumb sizing, so the image
   rendered at full height and got clipped to its top half. Pin it explicitly.
   Tall source images need a portrait box, so the frame is shaped to
   match; a square box could only ever show a slice. */
/* The frame is only as wide as the image it holds, so a
   squarish box left big empty gutters either side of the picture. */
.mco-item{ grid-template-columns:46px 1fr auto; align-items:start; }
.mco-item-thumb{ width:46px; height:104px; overflow:hidden; padding:4px; box-sizing:border-box; display:grid; place-items:center; }
.mco-item-thumb .mco-item-img,
.mco-item-thumb img,
.mco-item-thumb picture img{
	width:100% !important;
	height:100% !important;
	max-width:100% !important;
	max-height:100% !important;
	min-height:0 !important;
	object-fit:contain !important;
	object-position:center center !important;
	display:block !important;
	margin:0 !important;
	padding:0 !important;
	aspect-ratio:auto !important;
}

/* =========================================================================
 * Place Order: sidebar (desktop) / under the payment panel (mobile), with total
 * ========================================================================= */

.mco-placeorder-slot:empty{ display:none; }
.mco-placeorder-slot--mobile{ margin-top:-4px; }

/* Label: "Place Order  •  $129.99" */
body.mco-checkout #place_order{ gap:12px; }
.mco-po-sep{ opacity:.55; font-size:13px; line-height:1; }
.mco-po-total{ font-weight:800; letter-spacing:.02em; }

@media (max-width:980px){
	/* The summary sits above the form on mobile, so the sidebar slot would
	   strand the button at the top; it lives under the payment panel instead. */
	body.mco-checkout #mco-placeorder-slot{ display:none; }
	.mco-placeorder-slot--mobile{ position:sticky; bottom:12px; z-index:5; }
	body.mco-checkout #place_order{ padding:18px 22px; font-size:16.5px; box-shadow:0 10px 30px rgba(0,0,0,.55), 0 8px 26px var(--blue-glow); }
}

/* =========================================================================
 * Quantity badge: smaller, and no longer clipped by the thumb
 * ========================================================================= */

/* The badge is anchored just outside the thumb, so the thumb's overflow:hidden
   was shaving its edge. The image is contained (not cropped) now, so nothing
   needs clipping — let the badge show in full. */
.mco-item-thumb{ overflow:visible !important; }
.mco-item-thumb .mco-item-img,
.mco-item-thumb img{ border-radius:7px; }

.mco-item-qtybadge{
	top:-5px;
	right:-5px;
	min-width:17px;
	height:17px;
	padding:0 4px;
	font-size:9.5px;
	line-height:1;
	border-radius:20px;
	box-shadow:0 2px 6px rgba(0,0,0,.55);
}

/* =========================================================================
 * Thank-you: styled address panels (replaces WooCommerce's default table)
 * ========================================================================= */

.mco-ty-addr{ grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
.mco-ty-addr .mco-panel{ margin-bottom:0; }
.mco-ty-address{ font-style:normal !important; color:var(--silver); font-size:13.5px; line-height:1.8; }
.mco-ty-address-email{ margin:12px 0 0; color:var(--silver-dim); font-size:13px; }

/* Any stray WooCommerce order table that still renders keeps our alignment */
.mco-ty .woocommerce-table--order-details,
.mco-ty-gateway table{ width:100%; border-collapse:collapse; }
.mco-ty .woocommerce-table--order-details th,
.mco-ty .woocommerce-table--order-details td{ text-align:left; padding:10px 0; border-bottom:1px solid var(--line); color:var(--silver); font-size:13.5px; }
.mco-ty .woocommerce-table--order-details td:last-child,
.mco-ty .woocommerce-table--order-details th:last-child{ text-align:right; white-space:nowrap; }

@media (max-width:900px){
	.mco-ty-addr{ grid-template-columns:1fr; }
}

/* =========================================================================
 * Hide block-theme chrome (Assembler etc.) + trim the space it leaves
 * ========================================================================= */

/* Block themes don't use .site-header; they render a template-part header and
   a site-title block, which is why the site title was still printing above
   the checkout. */
body.mco-checkout .wp-block-site-title,
body.mco-checkout .wp-block-site-logo,
body.mco-checkout .wp-block-site-tagline,
body.mco-checkout header.wp-block-template-part,
body.mco-checkout footer.wp-block-template-part,
body.mco-checkout .wp-site-blocks > header,
body.mco-checkout .wp-site-blocks > footer,
body.mco-checkout .wp-block-navigation,
body.mco-thankyou .wp-block-site-title,
body.mco-thankyou header.wp-block-template-part,
body.mco-thankyou footer.wp-block-template-part,
body.mco-thankyou .wp-site-blocks > header,
body.mco-thankyou .wp-site-blocks > footer{ display:none !important; }

/* Remove the gap the theme's wrappers reserve above the content */
body.mco-checkout .wp-site-blocks,
body.mco-checkout .wp-site-blocks > main,
body.mco-checkout .is-layout-constrained,
body.mco-checkout .entry-content,
body.mco-checkout .wp-block-post-content,
body.mco-checkout .wp-block-group{ margin-top:0 !important; padding-top:0 !important; }
body.mco-checkout .wp-site-blocks > *:first-child{ margin-block-start:0 !important; }

/* Tighten the checkout's own top spacing */
body.mco-checkout .mco{ padding-top:10px; }
.mco-header{ padding-top:0; }

/* =========================================================================
 * Auth pages (password reset) — matches the storefront's log-in / sign-up card
 * ========================================================================= */

.mco-auth-wrap{ min-height:100vh; display:grid; place-items:center; padding:54px 24px; box-sizing:border-box; }
.mco-auth-card{ width:100%; max-width:460px; text-align:center; position:relative; overflow:hidden;
	background:linear-gradient(180deg, rgba(20,23,30,.98), rgba(9,11,16,.99));
	border:1px solid rgba(79,169,255,.28); border-radius:24px; padding:42px 38px 34px;
	box-shadow:0 44px 120px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); }
.mco-auth-card::before{ content:""; position:absolute; top:-40px; left:50%; transform:translateX(-50%);
	width:280px; height:120px; background:radial-gradient(circle, rgba(79,169,255,.18), transparent 70%); pointer-events:none; }
.mco-auth-inner{ position:relative; z-index:1; }
.mco-auth-logo{ height:104px; width:auto; margin:0 auto 4px; display:block; }
.mco-auth-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(24px,4vw,30px);
	letter-spacing:.02em; text-transform:uppercase; margin:6px 0 0; color:var(--white); }
.mco-blue{ color:var(--blue); }
.mco-auth-sub{ color:var(--silver-dim); font-size:14.5px; line-height:1.6; margin:10px 0 26px; }
.mco-auth-body{ text-align:left; }

/* WooCommerce's reset form inside the card */
.mco-auth-body form{ margin:0; }
.mco-auth-body .woocommerce-form-row,
.mco-auth-body p.form-row{ margin:0 0 16px; padding:0; }
.mco-auth-body label{ display:block; font-size:12.5px; color:var(--silver-dim); font-family:var(--font-display);
	font-weight:600; letter-spacing:.02em; margin-bottom:7px; }
.mco-auth-body input[type="text"],
.mco-auth-body input[type="email"],
.mco-auth-body input[type="password"]{ width:100%; box-sizing:border-box; background:var(--obsidian);
	border:1px solid var(--line); border-radius:12px; color:var(--white); font-family:var(--font-body);
	font-size:14.5px; padding:14px 16px; }
.mco-auth-body input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-glow); }
.mco-auth-body button,
.mco-auth-body input[type="submit"],
.mco-auth-body .woocommerce-Button{ width:100%; background:linear-gradient(135deg,var(--blue),var(--blue-deep));
	color:#04101f; border:0; border-radius:12px; font-family:var(--font-display); font-weight:800;
	letter-spacing:.04em; font-size:15px; padding:15px 24px; cursor:pointer; box-shadow:0 8px 26px var(--blue-glow);
	transition:transform .15s; margin-top:4px; }
.mco-auth-body button:hover,
.mco-auth-body input[type="submit"]:hover{ transform:translateY(-2px); }
.mco-auth-body .woocommerce-ResetPassword > p:first-child{ color:var(--silver); font-size:13.5px; line-height:1.6;
	margin:0 0 18px; }

/* Notices inside the card */
.mco-auth-body .woocommerce-message,
.mco-auth-body .woocommerce-error,
.mco-auth-body .woocommerce-info,
.mco-auth-wrap .woocommerce-message,
.mco-auth-wrap .woocommerce-error,
.mco-auth-wrap .woocommerce-info{ list-style:none; margin:0 0 18px; padding:13px 15px; border-radius:12px;
	font-size:13.5px; line-height:1.55; background:var(--panel-2); border:1px solid var(--line); color:var(--silver); }
.mco-auth-body .woocommerce-error,
.mco-auth-wrap .woocommerce-error{ border-color:rgba(255,107,120,.45); color:#ff9aa3; }
.mco-auth-body .woocommerce-message,
.mco-auth-wrap .woocommerce-message{ border-color:rgba(34,192,122,.45); color:#7fe3b4; }
.mco-auth-body .woocommerce-error li,
.mco-auth-wrap .woocommerce-error li{ list-style:none; }

.mco-auth-foot{ font-size:14px; color:var(--silver-dim); margin-top:22px; }
.mco-auth-foot a{ color:var(--blue); text-decoration:none; font-weight:600; }
.mco-auth-foot a:hover{ text-decoration:underline; }

@media (max-width:520px){
	.mco-auth-card{ padding:32px 22px 26px; border-radius:18px; }
	.mco-auth-logo{ height:80px; }
}

/* Lost-password form rows (our template uses .mco-form-row) */
.mco-auth-body .mco-form-row{ margin:0 0 16px; padding:0; }
.mco-auth-body .mco-form-row:last-of-type{ margin-bottom:0; }

/* WooCommerce login form inside the auth card */
.mco-auth-body .woocommerce-form-login__rememberme{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--silver); margin:12px 0; }
.mco-auth-body .woocommerce-form-login__rememberme input{ accent-color:var(--blue); width:16px; height:16px; }
.mco-auth-body .woocommerce-LostPassword{ margin:14px 0 0; font-size:13px; }
.mco-auth-body .woocommerce-LostPassword a{ color:var(--blue); text-decoration:none; }
.mco-auth-body .woocommerce-LostPassword a:hover{ text-decoration:underline; }
.mco-auth-body h2{ font-family:var(--font-display); font-weight:800; color:var(--white); font-size:16px;
	text-transform:uppercase; letter-spacing:.05em; margin:0 0 16px; }
.mco-auth-body .woocommerce-privacy-policy-text{ font-size:12px; color:var(--silver-dim); line-height:1.6; }

/* =========================================================================
 * My Account area (dashboard, orders, view-order, addresses, details)
 * ========================================================================= */

body.mco-account .mco{ padding-top:10px; }

/* Header block */
.mco-acct-head{ display:flex; align-items:center; gap:16px; margin:14px 0 24px; }
.mco-acct-avatar{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
	background:linear-gradient(135deg, rgba(79,169,255,.28), rgba(43,111,214,.18));
	border:1px solid rgba(79,169,255,.45); color:var(--white); font-family:var(--font-display);
	font-weight:800; font-size:20px; }
.mco-acct-head h1{ font-family:var(--font-display); font-weight:800; color:var(--white); font-size:24px;
	letter-spacing:.04em; text-transform:uppercase; margin:0 0 4px; }
.mco-acct-head p{ margin:0; color:var(--silver-dim); font-size:13.5px; }

/* Two-column layout */
.mco-acct-grid{ display:grid; grid-template-columns:250px 1fr; gap:20px; align-items:start; }
.mco-acct-nav{ margin:0; padding:14px; position:sticky; top:20px; }
.mco-acct-content{ margin:0; min-height:340px; }

/* Safety net for anything WooCommerce renders in here that we haven't styled by
   name. This page is a standalone dark document, so an element nobody colours
   falls back to the browser's near-black and disappears into the panel. Kept
   ahead of the specific rules below so those still win. */
.mco-acct-content :is(p,li,td,th,dt,dd,span,strong,b,em,i,small,label,address,figcaption,legend,summary,time,abbr,code){
	color:var(--silver);
}
.mco-acct-content :is(h1,h2,h3,h4,h5,h6){ color:var(--white); }
.mco-acct-content :is(ul,ol){ padding-left:18px; }
.mco-acct-content img{ max-width:100%; height:auto; }
.mco-acct-content hr{ border:0; border-top:1px solid var(--line); margin:20px 0; }

/* Navigation */
.mco-acct-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.mco-acct-nav li{ margin:0; }
.mco-acct-nav li a{ display:block; padding:12px 14px; border-radius:10px; color:var(--silver);
	font-family:var(--font-display); font-weight:600; font-size:13.5px; letter-spacing:.02em;
	text-decoration:none; transition:.15s; }
.mco-acct-nav li a:hover{ background:var(--panel-2); color:var(--white); }
.mco-acct-nav li.is-active > a,
.mco-acct-nav li.woocommerce-MyAccount-navigation-link--dashboard.is-active > a{
	background:linear-gradient(135deg, rgba(79,169,255,.18), rgba(43,111,214,.1));
	border:1px solid rgba(79,169,255,.4); color:var(--white); }

/* Content typography */
.mco-acct-content h2,
.mco-acct-content h3{ font-family:var(--font-display); font-weight:800; color:var(--white); font-size:16px;
	letter-spacing:.05em; text-transform:uppercase; margin:0 0 16px; }
.mco-acct-content p{ color:var(--silver); font-size:14px; line-height:1.7; }
.mco-acct-content a{ color:var(--blue); }
.mco-acct-content mark{ background:none; color:var(--white); font-weight:700; }

/* Tables: orders list + order details */
.mco-acct-content table.shop_table,
.mco-acct-content table.woocommerce-orders-table,
.mco-acct-content table.woocommerce-table--order-details,
.mco-acct-content table.woocommerce-table--customer-details{ width:100%; border-collapse:collapse;
	border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:0 0 22px; }
.mco-acct-content table th{ background:var(--panel-2); color:var(--white); font-family:var(--font-display);
	font-weight:700; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; text-align:left;
	padding:13px 14px; border-bottom:1px solid var(--line); }
.mco-acct-content table td{ padding:14px; border-bottom:1px solid var(--line); color:var(--silver);
	font-size:13.5px; vertical-align:middle; }
.mco-acct-content table tr:last-child td{ border-bottom:0; }
.mco-acct-content table td:last-child,
.mco-acct-content table th:last-child{ text-align:right; }
.mco-acct-content table tfoot th{ background:transparent; text-align:left; }
.mco-acct-content table tfoot tr:last-child th,
.mco-acct-content table tfoot tr:last-child td{ color:var(--white); font-size:15px; font-weight:800; }
.mco-acct-content .woocommerce-Price-amount{ color:var(--white); font-weight:700; }
.mco-acct-content table a{ color:var(--blue); text-decoration:none; font-weight:600; }
.mco-acct-content table a:hover{ text-decoration:underline; }

/* Order status pill */
.mco-acct-content .woocommerce-orders-table__cell-order-status{ color:var(--silver); }

/* Buttons */
.mco-acct-content .button,
.mco-acct-content .woocommerce-Button,
.mco-acct-content button[type="submit"]{ display:inline-flex; align-items:center; justify-content:center;
	background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#04101f; border:0; border-radius:10px;
	font-family:var(--font-display); font-weight:800; letter-spacing:.03em; font-size:13px; padding:11px 20px;
	text-decoration:none; cursor:pointer; box-shadow:0 6px 18px var(--blue-glow); transition:transform .15s; }
.mco-acct-content .button:hover,
.mco-acct-content button[type="submit"]:hover{ transform:translateY(-1px); color:#04101f; }
.mco-acct-content .woocommerce-Button--previous,
.mco-acct-content .woocommerce-Button--next{ background:var(--panel-2); color:var(--white); box-shadow:none;
	border:1px solid var(--line); }

/* Addresses */
.mco-acct-content .woocommerce-Addresses{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.mco-acct-content .woocommerce-Address{ border:1px solid var(--line); border-radius:12px; padding:18px;
	background:var(--obsidian); }
.mco-acct-content .woocommerce-Address-title{ display:flex; align-items:center; justify-content:space-between;
	gap:12px; margin-bottom:10px; }
.mco-acct-content .woocommerce-Address-title h2,
.mco-acct-content .woocommerce-Address-title h3{ margin:0; }
.mco-acct-content address{ font-style:normal; color:var(--silver); font-size:13.5px; line-height:1.8; }

/* Order again / order detail wrapper */
.mco-acct-content .woocommerce-order-details,
.mco-acct-content .woocommerce-customer-details{ margin:0 0 8px; }
.mco-acct-content .woocommerce-column__title{ font-size:14px; }
.mco-acct-content .woocommerce-columns{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.mco-acct-content .woocommerce-columns .col-1,
.mco-acct-content .woocommerce-columns .col-2{ width:auto; float:none; }

/* Forms (account details, edit address) */
.mco-acct-content form .form-row{ margin:0 0 16px; padding:0; display:block; }
.mco-acct-content label{ display:block; font-size:12.5px; color:var(--silver-dim);
	font-family:var(--font-display); font-weight:600; margin-bottom:7px; }
.mco-acct-content input[type="text"],
.mco-acct-content input[type="email"],
.mco-acct-content input[type="tel"],
.mco-acct-content input[type="password"],
.mco-acct-content select,
.mco-acct-content textarea{ width:100%; box-sizing:border-box; background:var(--obsidian);
	border:1px solid var(--line); border-radius:10px; color:var(--white); font-family:var(--font-body);
	font-size:14px; padding:12px 14px; }
.mco-acct-content input:focus,
.mco-acct-content select:focus,
.mco-acct-content textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-glow); }
.mco-acct-content fieldset{ border:1px solid var(--line); border-radius:12px; padding:18px; margin:22px 0; }
.mco-acct-content legend{ color:var(--white); font-family:var(--font-display); font-weight:700;
	font-size:13px; text-transform:uppercase; letter-spacing:.05em; padding:0 8px; }

/* Notices */
.mco-acct-content .woocommerce-message,
.mco-acct-content .woocommerce-info,
.mco-acct-content .woocommerce-error{ list-style:none; margin:0 0 20px; padding:14px 16px; border-radius:12px;
	background:var(--panel-2); border:1px solid var(--line); color:var(--silver); font-size:13.5px; }
.mco-acct-content .woocommerce-message{ border-color:rgba(34,192,122,.45); color:#7fe3b4; }
.mco-acct-content .woocommerce-error{ border-color:rgba(255,107,120,.45); color:#ff9aa3; }
.mco-acct-content .woocommerce-message .button,
.mco-acct-content .woocommerce-info .button{ margin-left:12px; }
.mco-acct-content .woocommerce-notices-wrapper:empty{ display:none; }
.mco-acct-content :is(.woocommerce-message,.woocommerce-info,.woocommerce-error){
	display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.mco-acct-content :is(.woocommerce-message,.woocommerce-info,.woocommerce-error) > *{ margin:0; }
.mco-acct-content :is(.woocommerce-message,.woocommerce-info,.woocommerce-error)::before{ display:none; }
.mco-acct-content :is(.woocommerce-message,.woocommerce-info,.woocommerce-error) .button{
	margin-left:auto; flex:none;
}

/* WooCommerce's newer notices use block markup (.wc-block-components-notice-
   banner), not the classic .woocommerce-info shape, so they were falling
   through unstyled and rendering near-black text on the dark panel. */
.mco .wc-block-components-notice-banner{
	display:flex; align-items:flex-start; gap:11px; margin:0 0 20px;
	padding:14px 16px; border-radius:12px; border:1px solid var(--line);
	background:var(--panel-2); color:var(--silver); font-size:13.5px; line-height:1.6;
}
.mco .wc-block-components-notice-banner.is-success{ border-color:rgba(34,192,122,.45); color:#7fe3b4; }
.mco .wc-block-components-notice-banner.is-error{ border-color:rgba(255,107,120,.45); color:#ff9aa3; }
.mco .wc-block-components-notice-banner.is-info{ border-color:rgba(79,169,255,.4); color:#9fd0ff; }
.mco .wc-block-components-notice-banner > svg{
	width:18px; height:18px; flex:none; margin:1px 0 0; fill:currentColor;
}
.mco .wc-block-components-notice-banner__content{ min-width:0; flex:1; color:inherit; }
.mco .wc-block-components-notice-banner__content :is(p,li,span,strong){ color:inherit; }
.mco .wc-block-components-notice-banner .wc-block-components-button{
	margin-left:auto; background:var(--blue); color:#04101f; border:0; border-radius:9px;
	padding:8px 14px; font-weight:700; cursor:pointer;
}

/* The guest email-verification block is suppressed in PHP; this is the backstop
   in case a WooCommerce update renders it through markup we don't filter. */
.mco :is(.woocommerce-order-email-verification,
          .wc-block-order-confirmation-verify-email,
          form.woocommerce-verify-email){ display:none !important; }

@media (max-width:900px){
	.mco-acct-grid{ grid-template-columns:1fr; }
	.mco-acct-nav{ position:static; }
	.mco-acct-nav ul{ flex-direction:row; flex-wrap:wrap; }
	.mco-acct-content .woocommerce-Addresses,
	.mco-acct-content .woocommerce-columns{ grid-template-columns:1fr; }
	.mco-acct-content table th{ font-size:10.5px; }
	.mco-acct-content table td{ padding:11px; font-size:12.5px; }
}

/* =========================================================================
 * Password reset confirmation page
 * ========================================================================= */

.mco-reset-hero{ padding:44px 0 30px; }
.mco-reset-h1{ margin:0 0 4px; }
.mco-reset-h1-top{ display:block; font-family:var(--font-display); font-weight:800; color:var(--white);
	font-size:26px; letter-spacing:.03em; text-transform:uppercase; }
.mco-reset-h1-main{ display:block; font-family:var(--font-display); font-weight:800; color:var(--blue);
	font-size:40px; letter-spacing:.02em; text-transform:uppercase; text-shadow:0 0 34px var(--blue-glow);
	margin-top:4px; }
.mco-reset-rule{ display:flex; align-items:center; justify-content:center; gap:6px; margin:22px auto 24px;
	max-width:560px; }
.mco-reset-rule span{ height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent);
	flex:1 1 auto; }
.mco-reset-rule span:nth-child(2){ flex:0 0 34px; height:2px; background:var(--blue); border-radius:2px;
	box-shadow:0 0 12px var(--blue-glow); }

.mco-reset-btn{ font-size:15px; letter-spacing:.06em; text-transform:uppercase; padding:17px 34px; gap:14px; }
.mco-reset-btn svg{ width:18px; height:18px; }

.mco-reset-secure{ margin-top:26px; }
.mco-reset-secure-line{ display:inline-flex; align-items:center; gap:9px; color:var(--silver); font-size:14px; }
.mco-reset-secure-line svg{ width:19px; height:19px; color:var(--blue); }
.mco-reset-secure p{ margin:7px 0 0; color:var(--silver-dim); font-size:13.5px; }

.mco-reset-badges{ margin-top:14px; padding:26px 24px; }
.mco-reset-badges .mco-badge{ position:relative; }
.mco-reset-badges .mco-badge:not(:last-child)::after{ content:""; position:absolute; right:-6px; top:12%;
	height:76%; width:1px; background:var(--line); }

@media (max-width:900px){
	.mco-reset-h1-top{ font-size:19px; }
	.mco-reset-h1-main{ font-size:28px; }
	.mco-reset-badges .mco-badge:not(:last-child)::after{ display:none; }
}

/* =========================================================================
 * Account: top nav, icon sidebar, order-history cards
 * ========================================================================= */

.mco-acct-header{ align-items:center; }
.mco-acct-topnav{ display:flex; align-items:center; gap:26px; }
.mco-acct-topnav a{ color:var(--silver); font-family:var(--font-display); font-weight:600; font-size:13.5px;
	text-decoration:none; transition:color .15s; }
.mco-acct-topnav a:hover{ color:var(--blue); }

/* Sidebar */
.mco-acct-nav{ background:transparent; border:0; padding:0; }
.mco-nav-label{ color:var(--silver-dim); font-family:var(--font-display); font-weight:700; font-size:11px;
	letter-spacing:.12em; text-transform:uppercase; margin:4px 0 12px 6px; }
.mco-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.mco-nav li a{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px;
	color:var(--silver); font-family:var(--font-display); font-weight:600; font-size:13.5px; text-decoration:none;
	border-left:2px solid transparent; transition:.15s; }
.mco-nav li a:hover{ background:var(--panel-2); color:var(--white); }
.mco-nav-ic{ display:grid; place-items:center; width:20px; height:20px; flex:0 0 20px; }
.mco-nav-ic svg{ width:18px; height:18px; }
.mco-nav li.is-active > a{ background:transparent; color:var(--blue); border-left:2px solid var(--blue);
	border-radius:0 10px 10px 0; }
.mco-nav li.is-active .mco-nav-ic svg{ color:var(--blue); }

/* Need help card */
.mco-help-card{ margin-top:22px; border:1px solid var(--line); border-radius:14px; padding:18px;
	background:var(--panel); }
.mco-help-head{ display:flex; align-items:center; gap:10px; color:var(--white); font-family:var(--font-display);
	font-weight:700; font-size:13.5px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:10px; }
.mco-help-head svg{ width:20px; height:20px; color:var(--blue); }
.mco-help-card p{ margin:0 0 14px; color:var(--silver-dim); font-size:12.5px; line-height:1.6; }
.mco-help-btn{ display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--blue);
	color:var(--blue); font-family:var(--font-display); font-weight:800; letter-spacing:.05em; font-size:12px;
	text-transform:uppercase; border-radius:9px; padding:11px 18px; text-decoration:none; transition:.15s;
	white-space:nowrap; }
.mco-help-btn:hover{ background:var(--blue); color:#04101f; }

/* Orders header */
.mco-orders-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
	margin-bottom:20px; flex-wrap:wrap; }
.mco-orders-title{ font-family:var(--font-display); font-weight:800; color:var(--white); font-size:22px;
	letter-spacing:.05em; text-transform:uppercase; margin:0 0 6px; }
.mco-orders-sub{ margin:0; color:var(--silver-dim); font-size:13.5px; }
.mco-orders-filter{ min-width:200px; margin:0; }
.mco-orders-filter select{ padding:12px 40px 12px 14px; }

/* Order cards */
.mco-orders{ display:flex; flex-direction:column; gap:16px; }
.mco-order-card{ border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; }
.mco-order-top{ display:grid; grid-template-columns:1.2fr 1fr 1fr .9fr auto; gap:16px; align-items:center;
	padding:18px 20px; }
.mco-order-id a{ display:block; color:var(--blue); font-family:var(--font-display); font-weight:800;
	font-size:15px; text-decoration:none; }
.mco-order-id a:hover{ text-decoration:underline; }
.mco-order-id span{ display:block; color:var(--silver-dim); font-size:12.5px; margin-top:3px; }
.mco-order-date{ color:var(--silver); font-size:13.5px; }
.mco-order-date span{ display:block; color:var(--silver-dim); font-size:12.5px; margin-top:3px; }
.mco-order-total{ color:var(--white); font-family:var(--font-display); font-weight:800; font-size:15px;
	text-align:left; }
.mco-order-total span{ display:block; color:var(--silver-dim); font-size:11.5px; font-weight:600; margin-top:3px; }
.mco-order-total .woocommerce-Price-amount{ color:var(--white); }
.mco-order-actions{ display:flex; align-items:center; gap:10px; justify-self:end; }
.mco-vieworder{ display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line);
	background:var(--panel-2); color:var(--white); font-family:var(--font-display); font-weight:700; font-size:12.5px;
	border-radius:9px; padding:10px 16px; text-decoration:none; transition:.15s; white-space:nowrap; }
.mco-vieworder:hover{ border-color:var(--blue); color:var(--blue); }
.mco-order-arrow{ color:var(--silver-dim); display:grid; place-items:center; }
.mco-order-arrow svg{ width:18px; height:18px; }
.mco-order-arrow:hover{ color:var(--blue); }

/* Status pills */
.mco-pill{ display:inline-flex; align-items:center; border-radius:8px; padding:6px 12px;
	font-family:var(--font-display); font-weight:700; font-size:12px; border:1px solid var(--line);
	color:var(--silver); white-space:nowrap; }
.mco-pill--completed{ color:var(--green); border-color:rgba(34,192,122,.5); background:rgba(34,192,122,.08); }
.mco-pill--processing{ color:var(--silver); border-color:var(--line); background:var(--panel-2); }
.mco-pill--on-hold{ color:#ffc861; border-color:rgba(255,200,97,.45); background:rgba(255,200,97,.08); }
.mco-pill--cancelled,
.mco-pill--failed,
.mco-pill--refunded{ color:#ff9aa3; border-color:rgba(255,107,120,.45); background:rgba(255,107,120,.08); }
.mco-pill--shipped{ color:var(--blue); border-color:rgba(79,169,255,.5); background:rgba(79,169,255,.08); }

/* Items strip */
.mco-order-items{ border-top:1px solid var(--line); padding:16px 20px; }
.mco-order-items-label{ display:block; color:var(--silver-dim); font-size:12.5px; margin-bottom:12px; }
.mco-order-items-list{ display:flex; flex-wrap:wrap; gap:26px; }
.mco-order-item{ display:flex; align-items:center; gap:12px; min-width:0; }
/* Sized to the image's own proportions, so the picture fills the frame instead
   of sitting in a squarish box with empty gutters either side. */
.mco-order-item-thumb{ width:38px; height:80px; border-radius:9px; background:var(--obsidian);
	border:1px solid var(--line); box-sizing:border-box; display:flex; align-items:center;
	justify-content:center; overflow:hidden; flex:0 0 38px; }
.mco-order-item-name{ color:var(--white); font-family:var(--font-display); font-weight:700; font-size:13.5px; }

/* Guest-order note */
.mco-orders-note{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
	border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:16px 20px; margin-top:16px; }
.mco-orders-note-left{ display:flex; align-items:center; gap:14px; }
.mco-orders-note-left svg{ width:22px; height:22px; color:var(--blue); flex:0 0 22px; }
.mco-orders-note strong{ display:block; color:var(--white); font-family:var(--font-display); font-weight:700;
	font-size:13.5px; margin-bottom:3px; }
.mco-orders-note p{ margin:0; color:var(--silver-dim); font-size:12.5px; }

/* Pagination + empty state */
.mco-orders-pagination{ display:flex; gap:10px; margin-top:18px; }
.mco-pagebtn{ border:1px solid var(--line); background:var(--panel-2); color:var(--white); border-radius:9px;
	padding:10px 18px; font-family:var(--font-display); font-weight:700; font-size:12.5px; text-decoration:none; }
.mco-pagebtn:hover{ border-color:var(--blue); color:var(--blue); }
.mco-orders-empty{ text-align:center; padding:44px 20px; }
.mco-orders-empty svg{ width:46px; height:46px; color:var(--silver-dim); margin-bottom:16px; }
.mco-orders-empty h3{ margin:0 0 8px; }
.mco-orders-empty p{ margin:0 0 22px; color:var(--silver-dim); }

@media (max-width:900px){
	.mco-acct-topnav{ gap:16px; font-size:12px; flex-wrap:wrap; }
	.mco-order-top{ grid-template-columns:1fr 1fr; gap:14px; }
	.mco-order-actions{ justify-self:start; }
	.mco-orders-head{ flex-direction:column; }
	.mco-orders-filter{ width:100%; }
}

/* =========================================================================
 * Account header (mirrors the storefront) + no avatars anywhere
 * ========================================================================= */

/* Belt-and-braces: whatever injects avatars into the account area stays out,
   including via hooks we don't render. */
body.mco-account .avatar,
body.mco-account img.avatar,
body.mco-account .gravatar,
body.mco-account .change-avatar,
body.mco-account .woocommerce-MyAccount-userAvatar,
body.mco-account .wc-memberships-profile-avatar,
body.mco-account a[href*="gravatar"],
body.mco-account .mco-acct-avatar{ display:none !important; }

.mco-acct-header{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.mco-acct-header .mco-brand img{ height:54px; width:auto; }
.mco-acct-topnav{ display:flex; align-items:center; gap:30px; flex:1 1 auto; justify-content:center; }
.mco-acct-topnav a{ color:var(--silver); font-family:var(--font-display); font-weight:600; font-size:14px;
	letter-spacing:.02em; text-decoration:none; transition:color .15s; white-space:nowrap; }
.mco-acct-topnav a:hover{ color:var(--blue); }

.mco-acct-actions{ display:flex; align-items:center; gap:14px; }
.mco-icon-btn{ display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
	border:1px solid var(--line); color:var(--silver); transition:.15s; }
.mco-icon-btn svg{ width:19px; height:19px; }
.mco-icon-btn:hover{ border-color:var(--blue); color:var(--blue); }
.mco-cart-btn{ display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:10px;
	padding:9px 14px; color:var(--white); text-decoration:none; font-family:var(--font-display); font-weight:700;
	font-size:13px; transition:.15s; }
.mco-cart-btn svg{ width:19px; height:19px; color:var(--silver); }
.mco-cart-btn:hover{ border-color:var(--blue); }
.mco-cart-btn:hover svg{ color:var(--blue); }
.mco-cart-count{ min-width:19px; height:19px; padding:0 5px; border-radius:20px; background:var(--blue);
	color:#04101f; font-size:11px; font-weight:800; display:grid; place-items:center; }
.mco-cart-total{ color:var(--silver); font-weight:600; }

/* Heading without the avatar circle */
.mco-acct-head{ display:block; margin:22px 0 24px; }

@media (max-width:1040px){
	.mco-acct-topnav{ gap:18px; font-size:13px; order:3; width:100%; justify-content:flex-start; }
	.mco-acct-header{ gap:14px; }
}

/* =========================================================================
 * Account sidebar: user block + icon menu
 * ========================================================================= */

.mco-nav-label{ color:var(--white); font-family:var(--font-display); font-weight:800; font-size:12.5px;
	letter-spacing:.1em; text-transform:uppercase; margin:2px 0 16px 2px; }

.mco-nav-user{ display:flex; align-items:center; gap:13px; padding:0 2px 18px; margin-bottom:14px;
	border-bottom:1px solid var(--line); }
.mco-nav-user-ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
	border:1.5px solid var(--blue); color:var(--blue); flex:0 0 46px; }
.mco-nav-user-ic svg{ width:24px; height:24px; }
.mco-nav-hello{ display:block; color:var(--silver-dim); font-size:12.5px; line-height:1.3; }
.mco-nav-user strong{ display:block; color:var(--white); font-family:var(--font-display); font-weight:700;
	font-size:14px; margin:2px 0 3px; word-break:break-word; }
.mco-nav-user a{ color:var(--blue); font-size:12.5px; text-decoration:none; }
.mco-nav-user a:hover{ text-decoration:underline; }

.mco-nav li.mco-nav-extra a{ color:var(--silver); }

/* =========================================================================
 * Header colours: restore the storefront's own palette
 * =========================================================================
 * `body.merit-skin a { color: var(--blue) }` above is more specific than the
 * storefront's `.main-nav a`, and this file loads last, so it was repainting
 * every header link blue. Re-assert the storefront's colours here.
 */
body.mco-account .announce a,
body.mco-account .site-header a,
body.mco-thankyou .site-header a,
body.mco-authpage .site-header a{ color:inherit; text-decoration:none; }

body.mco-account .site-header .main-nav a{ color:var(--silver); }
body.mco-account .site-header .main-nav a:hover,
body.mco-account .site-header .main-nav a.active{ color:var(--white); }
body.mco-account .site-header .brand .wordmark b{ color:var(--white); }
body.mco-account .site-header .brand .wordmark small{ color:var(--silver-dim); }
body.mco-account .site-header .icon-btn{ color:var(--silver); }
body.mco-account .site-header .icon-btn:hover{ color:var(--white); }
body.mco-account .site-header .cart-btn,
body.mco-account .site-header .cart-btn .txt{ color:var(--white); }
body.mco-account .site-header .cart-btn svg{ color:var(--silver); }
body.mco-account .site-header .acct-initial{ color:#04101f; }
body.mco-account .announce .mq-item{ color:var(--silver); }
body.mco-account .announce .mq-sep{ color:var(--blue); }

/* =========================================================================
 * Support pages (FAQ, Shipping, Returns, Privacy, Terms)
 * ========================================================================= */

.mco-doc{ max-width:900px; }
.mco-doc-head{ padding:34px 0 26px; }
.mco-doc-eyebrow{ display:inline-block; color:var(--blue); font-family:var(--font-display); font-weight:700;
	letter-spacing:.12em; text-transform:uppercase; font-size:11.5px; margin-bottom:10px; }
.mco-doc-head h1{ font-family:var(--font-display); font-weight:800; color:var(--white); font-size:34px;
	letter-spacing:.02em; text-transform:uppercase; margin:0 0 8px; }
.mco-doc-updated{ margin:0; color:var(--silver-dim); font-size:12.5px; }

.mco-doc-body{ padding:34px 38px; }
.mco-doc-body h2{ font-family:var(--font-display); font-weight:800; color:var(--white); font-size:18px;
	letter-spacing:.04em; text-transform:uppercase; margin:34px 0 14px; padding-bottom:12px;
	border-bottom:1px solid var(--line); }
.mco-doc-body h2:first-child{ margin-top:0; }
.mco-doc-body h3{ font-family:var(--font-display); font-weight:700; color:var(--blue); font-size:15px;
	margin:22px 0 8px; }
.mco-doc-body p{ color:var(--silver); font-size:14.5px; line-height:1.85; margin:0 0 14px; }
.mco-doc-body a{ color:var(--blue); }
.mco-doc-help{ margin-top:22px; }

@media (max-width:700px){
	.mco-doc-body{ padding:24px 20px; }
	.mco-doc-head h1{ font-size:25px; }
}

/* Temporary-password notice (shown until the customer sets their own) */
.mco-temp-pass{ display:flex; gap:14px; align-items:center; border:1px solid rgba(255,200,97,.45);
	background:rgba(255,200,97,.07); border-radius:12px; padding:15px 17px; margin:0 0 22px; }
.mco-temp-pass-ic svg{ width:22px; height:22px; color:#ffc861; flex:0 0 22px; }
.mco-temp-pass p{ margin:0; color:#ffd591; font-size:13.5px; line-height:1.6; }
.mco-temp-pass a{ color:var(--blue); font-family:var(--font-display); font-weight:700; font-size:13px;
	text-decoration:none; }
.mco-temp-pass a:hover{ text-decoration:underline; }

/* Sign-in card: form, remember/forgot row, register prompt */
.mco-loginform{ margin:0; }
.mco-login-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 18px; }
.mco-check{ display:flex; align-items:center; gap:8px; margin:0; color:var(--silver); font-size:13px;
	font-family:var(--font-body); cursor:pointer; }
.mco-check input{ width:16px; height:16px; accent-color:var(--blue); margin:0; }
.mco-check span{ font-family:var(--font-body); }
.mco-forgot{ color:var(--blue); font-size:13px; text-decoration:none; }
.mco-forgot:hover{ text-decoration:underline; }
.mco-or{ display:flex; align-items:center; gap:14px; margin:22px 0 18px; color:var(--silver-dim);
	font-size:12px; }
.mco-or::before,.mco-or::after{ content:""; flex:1; height:1px; background:var(--line); }
.mco-register-cta{ text-align:center; color:var(--silver-dim); font-size:13.5px; }
.mco-register-cta a{ color:var(--blue); font-family:var(--font-display); font-weight:700;
	text-decoration:none; margin-left:4px; }
.mco-register-cta a:hover{ text-decoration:underline; }

/* =========================================================================
 * Account layout: explicit placement for menu / content / help
 * =========================================================================
 * The help card is a sibling of the menu and the content, positioned by grid
 * area: beside the menu on desktop, and after the content once the columns
 * stack on mobile.
 */
body.mco-account .mco-acct-grid{
	display:grid;
	grid-template-columns:250px 1fr;
	grid-template-areas:"nav content" "help content";
	align-content:start;
	gap:20px;
}
body.mco-account .mco-acct-nav{ grid-area:nav; }
body.mco-account .mco-acct-content{ grid-area:content; }
body.mco-account .mco-help-card{ grid-area:help; margin-top:0; align-self:start; }

@media (max-width:900px){
	body.mco-account .mco-acct-grid{
		grid-template-columns:1fr;
		grid-template-areas:"nav" "content" "help";
	}
}

/* Shipping-first checkout: different-billing toggle */
.mco-diff-billing { margin: 18px 0 0; }
.mco-diff-billing label { display: flex; align-items: center; gap: 10px; cursor: pointer;
	color: var(--silver, #C7CCD4); font-size: 14px; }
.mco-diff-billing input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--blue, #4FA9FF);
	margin: 0; flex: none; cursor: pointer; }
.mco-billing-panel { animation: mco-fade-in .2s ease; }
@keyframes mco-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* =========================================================================
 * Sign in with Google / Apple
 *
 * The buttons are only printed when a provider has credentials saved, so an
 * unconfigured site shows the ordinary form and nothing else. Both keep their
 * own brand mark: Google's four-colour G is fixed by their brand guidelines,
 * Apple's mark inherits the button's text colour.
 * ========================================================================= */
.mco-social{ margin:20px 0 18px; }
.mco-social-sep{ display:flex; align-items:center; gap:14px; margin:0 0 16px;
	color:var(--silver-dim); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.mco-social-sep::before,
.mco-social-sep::after{ content:""; flex:1; height:1px; background:var(--line); }
.mco-social-btns{ display:flex; gap:10px; }
.mco-social-btn{
	flex:1 1 0; min-width:0;
	display:inline-flex; align-items:center; justify-content:center; gap:9px;
	padding:12px 14px; border-radius:12px; box-sizing:border-box;
	background:var(--panel-2); border:1px solid var(--line);
	color:var(--white); text-decoration:none;
	font-family:var(--font-display); font-weight:700; font-size:14px; line-height:1;
	transition:border-color .18s, background .18s, transform .18s;
}
.mco-social-btn:hover{ border-color:rgba(199,204,212,.34); background:#1c2029;
	color:var(--white); transform:translateY(-1px); }
.mco-social-btn:focus-visible{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-glow); }
.mco-social-btn svg{ width:18px; height:18px; flex:none; display:block; }
.mco-social-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:380px){
	.mco-social-btns{ flex-direction:column; }
}

/* =========================================================================
 * Partner Program (My Account)
 * ========================================================================= */
.mco-pp-head h2{ margin:0 0 6px; }
.mco-pp-head p{ margin:0 0 22px; max-width:62ch; }
.mco-pp-suspended{ color:#e8b45a; }

.mco-pp-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 24px; }
.mco-pp-step{ border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--panel-2); }
/* Scoped to the step number: wc_price() also emits a <span> in this block, and
   a bare descendant rule turned the payout figure into a numbered disc. */
.mco-pp-step .mco-pp-n{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
	background:rgba(79,169,255,.14); border:1px solid rgba(79,169,255,.35); color:var(--blue);
	font-family:var(--font-display); font-weight:800; font-size:12.5px; margin-bottom:10px; }
.mco-pp-step .woocommerce-Price-amount{ color:var(--white); font-weight:700; }
.mco-pp-step b{ display:block; color:var(--white); font-family:var(--font-display); font-size:14px; margin-bottom:4px; }
.mco-pp-step p{ margin:0; font-size:13px; color:var(--silver-dim); }

.mco-pp-terms{ border:1px solid var(--line); border-radius:12px; padding:18px 20px; background:var(--panel-2); margin:0 0 22px; }
.mco-pp-terms h3{ margin:0 0 10px; }
.mco-pp-terms ul{ margin:0; padding-left:18px; }
.mco-pp-terms li{ font-size:13.5px; line-height:1.75; color:var(--silver); }

.mco-pp-join{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.mco-pp-join .mco-check{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px;
	color:var(--silver); font-weight:400; letter-spacing:0; text-transform:none; }
.mco-pp-join .mco-check input{ margin-top:3px; width:17px; height:17px; accent-color:var(--blue); flex:none; }

.mco-pp-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 22px; }
.mco-pp-stat{ border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--panel-2); }
.mco-pp-stat b{ display:block; color:var(--white); font-family:var(--font-display); font-weight:800; font-size:20px; }
.mco-pp-stat b .woocommerce-Price-amount{ color:var(--white); font-size:20px; }
.mco-pp-stat span{ display:block; color:var(--silver-dim); font-size:12px; margin-top:4px; }

.mco-pp-share{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 16px; }
.mco-pp-field label{ display:block; font-size:12.5px; color:var(--silver-dim); margin-bottom:7px; }
.mco-pp-copy{ display:flex; gap:8px; }
.mco-pp-copy input{ flex:1; min-width:0; background:var(--obsidian); border:1px solid var(--line);
	border-radius:10px; padding:12px 14px; color:var(--white); font-size:13.5px; font-family:var(--font-body); }
.mco-pp-copybtn{ flex:none; border:1px solid var(--line); background:var(--panel-2); color:var(--white);
	border-radius:10px; padding:0 16px; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:13px; }
.mco-pp-copybtn:hover{ border-color:rgba(79,169,255,.5); color:var(--blue); }

.mco-pp-rename{ margin-top:14px; }
.mco-pp-rename label{ display:block; font-size:12.5px; color:var(--silver-dim); margin-bottom:7px; }
.mco-pp-rename input{ text-transform:uppercase; letter-spacing:.06em; }
.mco-pp-rename small{ display:block; margin-top:8px; font-size:12px; line-height:1.6; color:var(--silver-dim); }

.mco-pp-note{ font-size:13px; color:var(--silver-dim); margin:0 0 26px; max-width:70ch; }
.mco-pp-subhead{ margin:0 0 12px; }
.mco-pp-empty{ color:var(--silver-dim); font-size:13.5px; }
.mco-pp-table{ width:100%; border-collapse:collapse; }
.mco-pp-pill{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700;
	letter-spacing:.05em; text-transform:uppercase; border:1px solid; }
.mco-pp-pill--pending{ color:#e8b45a; border-color:rgba(232,180,90,.4); background:rgba(232,180,90,.1); }
.mco-pp-pill--paid{ color:#7fe3b4; border-color:rgba(34,192,122,.4); background:rgba(34,192,122,.1); }
.mco-pp-pill--void{ color:var(--silver-dim); border-color:var(--line); background:rgba(255,255,255,.03); }

/* --- The gate before the agreement ---------------------------------- */
.mco-pp-gate{ border:1px solid rgba(79,169,255,.3); border-radius:14px; padding:22px 24px;
	background:var(--panel-2); }
.mco-pp-gate h3{ margin:0 0 10px; }
.mco-pp-gate p{ font-size:13.5px; line-height:1.75; color:var(--silver); margin:0 0 12px; max-width:70ch; }
.mco-pp-gate .button{ margin-top:6px; }

/* --- The agreement itself -------------------------------------------- */
.mco-pp-doc{ max-height:min(58vh,540px); overflow-y:auto; overscroll-behavior:contain;
	border:1px solid var(--line); border-radius:14px; padding:22px 26px; background:var(--obsidian);
	scrollbar-width:thin; }
.mco-pp-doc:focus-visible{ outline:2px solid rgba(79,169,255,.5); outline-offset:2px; }
.mco-pp-doc::-webkit-scrollbar{ width:10px; }
.mco-pp-doc::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:10px;
	border:3px solid var(--obsidian); }
.mco-pp-clause{ padding:0 0 18px; }
.mco-pp-clause + .mco-pp-clause{ border-top:1px solid var(--line); padding-top:18px; }
.mco-pp-clause h3{ font-size:14px; margin:0 0 8px; display:flex; gap:8px; }
.mco-pp-clause h3 span{ color:var(--blue); font-variant-numeric:tabular-nums; }
.mco-pp-clause p{ font-size:13.5px; line-height:1.8; color:var(--silver); margin:0 0 9px; max-width:74ch; }
.mco-pp-clause p:last-child{ margin-bottom:0; }
.mco-pp-docend{ margin:4px 0 0; padding-top:16px; border-top:1px solid var(--line);
	font-size:12px; color:var(--silver-dim); text-align:center; letter-spacing:.04em;
	text-transform:uppercase; font-family:var(--font-display); }

.mco-pp-progress{ margin:12px 0 22px; font-size:13px; color:var(--silver-dim);
	display:flex; align-items:center; gap:8px; }
.mco-pp-progress::before{ content:""; width:8px; height:8px; border-radius:50%; flex:none;
	background:rgba(255,255,255,.25); }
.mco-pp-progress.is-done{ color:#7fe3b4; }
.mco-pp-progress.is-done::before{ background:#22c07a; box-shadow:0 0 0 4px rgba(34,192,122,.15); }

/* --- Signing ---------------------------------------------------------- */
.mco-pp-sign{ border:1px solid var(--line); border-radius:14px; padding:22px 24px; background:var(--panel-2); }
.mco-pp-sign h3{ margin:0 0 14px; }
.mco-pp-affirms{ display:flex; flex-direction:column; gap:12px; margin:0 0 20px; }
.mco-pp-affirms .mco-check{ display:flex; gap:11px; align-items:flex-start; font-size:13.5px;
	line-height:1.65; color:var(--silver); font-weight:400; cursor:pointer; }
.mco-pp-affirms .mco-check input{ margin-top:2px; width:17px; height:17px; accent-color:var(--blue); flex:none; }
.mco-pp-affirms .mco-check:hover span{ color:var(--white); }
.mco-pp-sigfield{ max-width:420px; margin:0 0 20px; }
.mco-pp-sigfield input{ width:100%; background:var(--obsidian); border:1px solid var(--line);
	border-radius:9px; color:var(--white); padding:11px 13px; font-size:15px;
	font-family:var(--font-display); letter-spacing:.02em; }
.mco-pp-sigfield input:focus{ outline:none; border-color:rgba(79,169,255,.55); }
.mco-pp-sigfield small{ display:block; margin-top:8px; font-size:12px; line-height:1.6; color:var(--silver-dim); }
.mco-pp-sign .button[disabled]{ opacity:.4; cursor:not-allowed; filter:grayscale(.6); box-shadow:none; }
.mco-pp-signnote{ margin:12px 0 0; font-size:12px; color:var(--silver-dim); }
.mco-pp-signed{ margin:0 0 22px; font-size:12.5px; color:var(--silver-dim); }

@media (max-width:860px){
	.mco-pp-steps, .mco-pp-share{ grid-template-columns:1fr; }
	.mco-pp-stats{ grid-template-columns:repeat(2,1fr); }
	.mco-pp-doc{ max-height:64vh; padding:18px 18px; }
	.mco-pp-gate, .mco-pp-sign{ padding:18px 18px; }
}

/* ---- PayPal Advanced Card fields -------------------------------------- *
 * WooCommerce prints its own card inputs; PayPal then draws cross-origin
 * iframes next to them and hides the originals with the [hidden] attribute.
 * Our input rules were specific enough to beat that, so every field showed
 * twice - one dark, one light. Honour [hidden] inside the payment box.
 */
body.merit-skin #payment [hidden]{ display:none !important; }

/*
 * The card fields are iframes on PayPal's origin. assets/paypal-card-style.js
 * passes the dark palette through PayPal's own styling API, which is the only
 * way in - so these rules only have to dress what surrounds them, and match the
 * native inputs to it. Those natives matter for a moment: they are what shows
 * before PayPal draws, and WooCommerce hides them afterwards with the [hidden]
 * attribute. Getting them wrong makes the field flash white and then go dark.
 */
body.merit-skin #payment input.wc-credit-card-form-card-number,
body.merit-skin #payment input.wc-credit-card-form-card-expiry,
body.merit-skin #payment input.wc-credit-card-form-card-cvc{
  /* These carry a size attribute, so without this they claim their intrinsic
     width and push the panel wider than the phone. */
  width:100% !important;
  box-sizing:border-box !important;
  background:#12141A !important;
  color:var(--white) !important;
  border:1px solid rgba(199,204,212,.18) !important;
  border-radius:10px !important;
  height:48px !important;
  padding:13px 14px !important;
  font-family:var(--font-body) !important;
  font-size:15px !important;
  line-height:1.4 !important;
}
body.merit-skin #payment input.wc-credit-card-form-card-number::placeholder,
body.merit-skin #payment input.wc-credit-card-form-card-expiry::placeholder,
body.merit-skin #payment input.wc-credit-card-form-card-cvc::placeholder{
  color:var(--silver-dim);
}
/* PayPal's own wrapper - the styling lives inside the frame, so this only
   needs to reserve the right space and stay out of the way. */
body.merit-skin #payment div[id^="zoid-paypal-card-"]{
  display:block !important;
  width:100% !important;
  height:50px !important;
  background:transparent;
  border:0;
  padding:0;
}
body.merit-skin #payment div[id^="zoid-paypal-card-"] iframe.zoid-visible{ height:50px !important; }
body.merit-skin #payment .wc-credit-card-form .form-row{ padding:0 0 14px !important; }
body.merit-skin #payment .wc-credit-card-form label{ color:var(--silver) !important; font-size:12.5px !important; }

/* Expiry and CVV sit side by side. WooCommerce floats them, which survives
   desktop but drifts once the column narrows - a grid keeps the two columns
   honest at every width and needs no clearfix after them. */
body.merit-skin #payment .wc-credit-card-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:14px;
}
body.merit-skin #payment .wc-credit-card-form .form-row-wide{ grid-column:1 / -1; }
body.merit-skin #payment .wc-credit-card-form .form-row-first{ grid-column:1; }
body.merit-skin #payment .wc-credit-card-form .form-row-last{ grid-column:2; }
body.merit-skin #payment .wc-credit-card-form .form-row{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  min-width:0; /* let the grid columns shrink below the fields' intrinsic width */
}

/* =========================================================================
 * Mobile: give the content back the width the padding was eating
 * =========================================================================
 * At 390px the page reserved 20px each side and every panel another 24px, so
 * a field had 302px to live in - the fields looked cramped and the card row
 * had nowhere to go. Trimming both gains a little over 30px, which is the
 * difference between the expiry and CVV fitting side by side and not.
 */
@media (max-width:600px){
  .mco{ padding-left:12px !important; padding-right:12px !important; }
  .mco-panel{ padding:18px 14px; border-radius:14px; }
  body.mco-checkout .mco-summary{ padding:0; }
  .mco-panel-title{ font-size:14px; }

  /* Keep the two card columns, just tighter. */
  body.merit-skin #payment .wc-credit-card-form{ column-gap:10px; }

  /* WooCommerce's own two-column address rows, same treatment. */
  .mco-form .form-row-first,
  .mco-form .form-row-last{ width:100% !important; float:none !important; }
}

/* Very small screens: stack the card row rather than squeeze it. */
@media (max-width:360px){
  body.merit-skin #payment .wc-credit-card-form{ grid-template-columns:1fr; }
  body.merit-skin #payment .wc-credit-card-form .form-row-first,
  body.merit-skin #payment .wc-credit-card-form .form-row-last{ grid-column:1 / -1; }
}

/* ---- Expired checkout session ---------------------------------------- *
 * Served standalone when the checkout is reached with an empty cart, so the
 * theme's chrome never gets a chance to reappear. */
body.mco-expired .mco{ min-height:100vh; display:grid; place-items:center; padding:40px 20px; }
.mco-expired-card{
  max-width:520px; text-align:center;
  background:linear-gradient(180deg, rgba(18,22,30,.8), rgba(10,13,19,.8));
  border:1px solid var(--line); border-radius:20px; padding:44px 38px;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.mco-expired-ic{
  width:56px; height:56px; margin:0 auto 22px; display:grid; place-items:center;
  border-radius:50%; background:rgba(79,169,255,.1); border:1px solid rgba(79,169,255,.3); color:var(--blue);
}
.mco-expired-ic svg{ width:26px; height:26px; }
.mco-expired-card h1{ font-size:24px; margin:0 0 14px; color:var(--white); }
.mco-expired-card p{ color:var(--silver); font-size:14.5px; line-height:1.75; margin:0 0 12px; }
.mco-expired-fine{ color:var(--silver-dim) !important; font-size:13px !important; }
.mco-expired-actions{ margin-top:26px; display:grid; gap:14px; justify-items:center; }
.mco-expired-actions .button{ width:100%; max-width:280px; text-align:center; }
.mco-expired-alt{ color:var(--silver-dim); font-size:13.5px; }
.mco-expired-alt:hover{ color:var(--blue); }
@media (max-width:560px){ .mco-expired-card{ padding:34px 22px; } }

/* =========================================================================
 * SECTION HEADER + DELIVERY-DETAILS BOX
 * One screen: the address and delivery method sit in a box that starts
 * closed, with payment below it. Nothing here is load-bearing — the box is
 * only collapsible once checkout.js marks it live, so without the script
 * everything is on show and the page is a plain single-screen checkout.
 * ========================================================================= */

/* ---- Section header ---------------------------------------------------- */
.mco-steps{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin:0 0 26px; padding:0 0 18px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--font-body); font-size:13.5px; letter-spacing:.01em;
}

/* Scoped to body.merit-skin: the skin colours every <a> blue, which would
   otherwise light up the whole bar and lose the here / elsewhere reading it
   exists to give. The section links are buttons, so they also need the button
   styling stripped back to plain text. */
body.merit-skin .mco-steps-item{
  display:inline-flex; align-items:center; gap:5px;
  color:var(--silver-dim); text-decoration:none; transition:color .15s;
  background:none; border:0; padding:0; margin:0;
  font:inherit; line-height:inherit; cursor:pointer;
}
body.merit-skin .mco-steps-item:hover{ color:var(--blue); }
body.merit-skin .mco-steps-item.is-current{ color:var(--white); font-weight:700; }
body.merit-skin .mco-steps-item:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }

.mco-steps-back{ width:13px; height:13px; }
.mco-steps-sep{ display:inline-flex; color:rgba(138,144,153,.55); }
.mco-steps-sep svg{ width:14px; height:14px; }

@media (max-width:560px){
  .mco-steps{ gap:6px; font-size:12.5px; margin-bottom:20px; padding-bottom:14px; }
  .mco-steps-sep svg{ width:12px; height:12px; }
}

/* ---- The box ----------------------------------------------------------- */
.mco-fold{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  margin:0 0 20px; overflow:hidden;
}

.mco-fold-head{
  /* border-box matters here: a <button> is border-box by default but a <label>
     is not, and the shipping box's head is a label. Without this its padding
     is added to the 100% and the switch hangs off the right edge. */
  width:100%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; text-align:left;
  background:none; border:0; font-family:inherit; color:inherit;
}
.mco-fold--live .mco-fold-head{ cursor:pointer; }
.mco-fold--live .mco-fold-head:hover .mco-fold-title{ color:var(--blue); }
.mco-fold-head:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }

.mco-fold-heading{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.mco-fold-title{
  font-family:var(--font-display); font-weight:800; color:var(--white); font-size:16px;
  letter-spacing:.02em; transition:color .15s;
}
.mco-fold-summary{
  color:var(--silver-dim); font-size:13px; line-height:1.5;
  overflow:hidden; text-overflow:ellipsis;
}

.mco-fold-arrow{
  width:20px; height:20px; flex:0 0 20px; color:var(--silver-dim);
  transition:transform .2s, color .15s;
}
.mco-fold--live .mco-fold-head:hover .mco-fold-arrow{ color:var(--blue); }
.mco-fold.is-open .mco-fold-arrow{ transform:rotate(180deg); }

/* The arrow only means anything once the box can actually close. */
.mco-fold:not(.mco-fold--live) .mco-fold-arrow{ display:none; }

.mco-fold-body{ padding:0 22px 6px; border-top:1px solid var(--line-soft); }
.mco-fold-body .mco-panel{
  background:none; border:0; border-radius:0; padding:22px 0; margin:0;
}
.mco-fold-body .mco-panel + .mco-panel{ border-top:1px solid var(--line-soft); }

@media (max-width:560px){
  .mco-fold-head{ padding:17px 16px; }
  .mco-fold-body{ padding:0 16px 4px; }
  .mco-fold-summary{ font-size:12.5px; }
}

/* =========================================================================
 * ORDER SUMMARY — image-free rows, collapsible panel
 * The line items carry no thumbnail: on a checkout the customer has already
 * seen the product, and a picture of it costs a request and a lot of the
 * narrow column for nothing. A quantity chip, the name and the price line up
 * instead, on a baseline grid so the prices form a clean right edge.
 * These rules come last so they win over the earlier thumbnail layout.
 * ========================================================================= */

.mco-review-items{ gap:14px; }

.mco-item{
  display:grid; grid-template-columns:auto 1fr auto; column-gap:18px; row-gap:0;
  align-items:start;
}

/* Blue, as it was -- what made it read as part of the product name was the
   closeness, not the colour. The 18px column gap above is what separates them;
   this keeps the accent that made the count easy to pick out. */
.mco-item-qty{
  justify-self:start; min-width:24px; height:24px; padding:0 6px; margin-top:1px;
  border-radius:6px; display:inline-grid; place-items:center;
  background:rgba(79,169,255,.12); border:1px solid rgba(79,169,255,.28); color:var(--blue);
  font-family:var(--font-display); font-weight:800; font-size:12px;
  font-variant-numeric:tabular-nums; line-height:1;
}

.mco-item-info{ min-width:0; }
.mco-item-name{ font-size:14px; line-height:1.35; }
/* The SKU stays in the markup and in the accessibility tree -- screen readers
   still announce it, and anything reading the DOM still finds it -- but it is
   off the screen. Clipped rather than display:none precisely so it keeps
   working; deleting this rule brings it back. */
.mco-item-sku{
  color:var(--silver-dim); font-size:11.5px; letter-spacing:.04em; margin-top:2px;
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.mco-item-meta{ color:var(--silver-dim); font-size:11.5px; margin-top:2px; }
.mco-item-meta p{ margin:0; }

.mco-item-price{ font-size:14px; font-variant-numeric:tabular-nums; }

/* ---- Collapsible summary ---------------------------------------------- */
.mco-sumfold-head{
  width:100%; display:flex; align-items:center; gap:12px;
  padding:0 0 16px; margin:0; text-align:left;
  background:none; border:0; font-family:inherit; color:inherit;
}
.mco-sumfold--live .mco-sumfold-head{ cursor:pointer; }
.mco-sumfold-head:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }

.mco-sumfold-head .mco-summary-title{ margin:0; flex:1 1 auto; }

.mco-sumfold-total{
  font-family:var(--font-display); font-weight:800; color:var(--white); font-size:15px;
  font-variant-numeric:tabular-nums;
}
/* The total belongs on the header only while the rows below are hidden —
   with the summary open it would be saying the same thing twice. */
.mco-sumfold.is-open .mco-sumfold-total,
[data-mco-sumfold].is-open .mco-sumfold-total{ display:none; }

.mco-sumfold-arrow{
  width:18px; height:18px; flex:0 0 18px; color:var(--silver-dim);
  transition:transform .2s, color .15s;
}
.mco-sumfold--live .mco-sumfold-head:hover .mco-sumfold-arrow{ color:var(--blue); }
[data-mco-sumfold].is-open .mco-sumfold-arrow{ transform:rotate(180deg); }
[data-mco-sumfold]:not(.mco-sumfold--live) .mco-sumfold-arrow{ display:none; }

/* =========================================================================
 * MOBILE — fit the checkout on a phone
 * The aim is that a customer arriving on a phone sees the whole thing at
 * once: the section header, a shut summary, a shut details box, the payment
 * choices and the button that pays. Everything below is spacing; nothing
 * here hides or moves a field.
 * ========================================================================= */
@media (max-width:600px){

  /* Chrome first: the page frame gives back the most for the least. */
  .mco{ padding-top:14px !important; padding-bottom:20px !important; }
  .mco-header{ padding:2px 0 14px; }
  .mco-header .mco-brand img{ max-height:34px; width:auto; }

  /* The crumbs stay on one line — wrapping them cost a whole row and made
     the last crumb look like a stray heading. They scroll sideways instead
     on the narrowest phones. */
  .mco-steps{
    flex-wrap:nowrap; overflow-x:auto; margin-bottom:16px; padding-bottom:12px;
    gap:5px; font-size:12px; scrollbar-width:none;
  }
  .mco-steps::-webkit-scrollbar{ display:none; }
  /* The crumb strip scrolls sideways, so a tap on it can be read as the
     start of a drag. touch-action tells the browser it is a tap. */
  .mco-steps-item{ white-space:nowrap; touch-action:manipulation; }
  .mco-steps-sep svg{ width:11px; height:11px; }

  /* Panels and the two folds. */
  .mco-panel{ padding:15px 14px; }
  .mco-fold{ margin-bottom:14px; }
  .mco-fold-head{ padding:14px; gap:12px; }
  .mco-fold-title{ font-size:15px; }
  .mco-fold-summary{ font-size:12px; }
  .mco-fold-body{ padding:0 14px 2px; }
  .mco-fold-body .mco-panel{ padding:16px 0; }

  body.mco-checkout .mco-summary{ gap:14px; }
  .mco-sumfold-head{ padding-bottom:0; }
  [data-mco-sumfold].is-open .mco-sumfold-head{ padding-bottom:14px; }

  .mco-panel-title{ margin-bottom:12px; padding-bottom:10px; }
  .mco-pay-note{ margin:0 0 10px; }

  /* Payment rows carry a lot of vertical padding for pointer targets that a
     thumb does not need this much of. */
  body.merit-skin #payment .wc_payment_methods li{ padding:11px 0; }
  body.merit-skin #payment div.form-row{ padding:12px 0; }

  .mco-footer{ padding-top:14px; }
  .mco-foot-brand img{ max-height:28px; width:auto; }

  /* The pay button stays within reach at the bottom of the screen. Reserving
     the same height underneath it means it never sits on top of the footer or
     the last payment option — a sticky element that overlaps content is worse
     than one that scrolls. */
  .mco-placeorder-slot--mobile{ bottom:10px; }
  .mco-main{ padding-bottom:8px; }
}

/* =========================================================================
 * MOBILE — express wallets (Apple Pay / Google Pay) below the payment methods
 *
 * Stripe prints its Express Checkout Element at the top of the checkout
 * column, before the details box. On a phone that puts the wallet button
 * above everything, far from the button that actually pays. The column
 * becomes a flex column here and the blocks are re-ordered with `order`, so
 * the wallet lands directly under the payment methods and directly above
 * Place Order.
 *
 * Order — not DOM moves — on purpose: Stripe mounts the wallet in an iframe
 * and moving that node in the DOM re-creates the frame, which drops the
 * mounted element and the button with it. `order` repaints without touching
 * the tree, so the mounted iframe survives untouched.
 *
 * Anything not named below keeps order:1 and so stays where it is today,
 * above the details box — a notice or a gateway's own banner is not pushed
 * to the bottom by this.
 * ========================================================================= */
@media (max-width:600px){

  .mco-main{ display:flex; flex-direction:column; }

  .mco-main > *{ order:1; }
  .mco-main > .mco-fold{ order:2; }
  .mco-main > .mco-panel--payment{ order:3; }

  /* The element, its order-attribution inputs and the "Or" separator all
     carry the wc-stripe-express-checkout id prefix, so one selector keeps
     the three of them together wherever Stripe renames the parts. */
  .mco-main > [id^="wc-stripe-express-checkout"]{ order:5; }

  /* The separator reads as "or" between two ways to pay, so it belongs above
     the wallet button here rather than below it, where the source order and
     its old top-of-page position would leave it. */
  .mco-main > #wc-stripe-express-checkout-button-separator{ order:4; }

  .mco-main > .mco-placeorder-slot--mobile{ order:6; }
}

/* =========================================================================
 * Payment-method icons
 *
 * Stripe ships cards.svg and bank-debit.svg as a solid WHITE rounded card
 * with a near-black glyph on it -- artwork drawn for a light checkout. On
 * this page they read as two white blocks stuck to a dark panel.
 *
 * `content:` on a replaced element swaps the image the browser paints while
 * leaving the element, its size and its alt text alone, so the gateway keeps
 * working exactly as it did -- nothing is hidden and no markup is touched.
 * The replacements are the same two ideas (a card, a bank) drawn as an
 * outline in the site's blue on a transparent ground.
 *
 * Any other gateway icon that arrives light-on-transparent is caught by the
 * last rule, which flips it dark and tints it toward the same blue rather
 * than leaving a white slab behind.
 * ========================================================================= */
body.merit-skin #payment img.stripe-cards-icon,
body.merit-skin #payment img[src*="cards.svg"]{
  content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSIyNiIgdmlld0JveD0iMCAwIDQwIDI2IiBmaWxsPSJub25lIj48cmVjdCB4PSIxIiB5PSIxIiB3aWR0aD0iMzgiIGhlaWdodD0iMjQiIHJ4PSI1IiBmaWxsPSIjNEZBOUZGIiBmaWxsLW9wYWNpdHk9Ii4xMCIvPjxyZWN0IHg9IjEiIHk9IjEiIHdpZHRoPSIzOCIgaGVpZ2h0PSIyNCIgcng9IjUiIHN0cm9rZT0iIzRGQTlGRiIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjEuOSIvPjxwYXRoIGQ9Ik0xLjkgOS42aDM2LjIiIHN0cm9rZT0iIzRGQTlGRiIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjEuOSIvPjxyZWN0IHg9IjYuNSIgeT0iMTUiIHdpZHRoPSIxMC41IiBoZWlnaHQ9IjMiIHJ4PSIxLjUiIGZpbGw9IiM0RkE5RkYiIGZpbGwtb3BhY2l0eT0iLjkiLz48cmVjdCB4PSIxOS41IiB5PSIxNSIgd2lkdGg9IjUuNSIgaGVpZ2h0PSIzIiByeD0iMS41IiBmaWxsPSIjNEZBOUZGIiBmaWxsLW9wYWNpdHk9Ii41Ii8+PC9zdmc+Cg==");
}

body.merit-skin #payment img.stripe-ach-icon,
body.merit-skin #payment img[src*="bank-debit.svg"]{
  content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSIyNiIgdmlld0JveD0iMCAwIDQwIDI2IiBmaWxsPSJub25lIj48cmVjdCB4PSIxIiB5PSIxIiB3aWR0aD0iMzgiIGhlaWdodD0iMjQiIHJ4PSI1IiBmaWxsPSIjNEZBOUZGIiBmaWxsLW9wYWNpdHk9Ii4xMCIvPjxyZWN0IHg9IjEiIHk9IjEiIHdpZHRoPSIzOCIgaGVpZ2h0PSIyNCIgcng9IjUiIHN0cm9rZT0iIzRGQTlGRiIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjEuOSIvPjxwYXRoIGQ9Ik0yMCA2bDguNiA0LjhIMTEuNEwyMCA2eiIgZmlsbD0iIzRGQTlGRiIgZmlsbC1vcGFjaXR5PSIuOSIvPjxwYXRoIGQ9Ik0xNCAxMy4ydjQuOU0yMCAxMy4ydjQuOU0yNiAxMy4ydjQuOSIgc3Ryb2tlPSIjNEZBOUZGIiBzdHJva2Utb3BhY2l0eT0iLjkiIHN0cm9rZS13aWR0aD0iMi4xIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMTEuNiAyMC42aDE2LjgiIHN0cm9rZT0iIzRGQTlGRiIgc3Ryb2tlLW9wYWNpdHk9Ii45IiBzdHJva2Utd2lkdGg9IjIuMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+Cg==");
}

/* Sized to the row they sit in rather than to the artwork: a shade under the
   cap height of the payment label beside them, so they read as part of the
   line instead of as a badge stuck to it. */
body.merit-skin #payment img.stripe-cards-icon,
body.merit-skin #payment img.stripe-ach-icon,
body.merit-skin #payment img[src*="cards.svg"],
body.merit-skin #payment img[src*="bank-debit.svg"]{
  width:27px; height:18px; max-width:27px; object-fit:contain;
  vertical-align:middle; opacity:.92;
}

/* Fallback for gateway icons we have no replacement for. */
body.merit-skin #payment .wc_payment_methods label img:not(.stripe-cards-icon):not(.stripe-ach-icon):not([src*="cards.svg"]):not([src*="bank-debit.svg"]){
  filter:invert(1) sepia(1) hue-rotate(172deg) saturate(2.6) brightness(.95);
  border-radius:5px; opacity:.9;
}

/* =========================================================================
 * The express wallet button and its "or"
 *
 * Stripe prints the separator as a bare <p> carrying the word "or" and no
 * styling of its own, so it inherits whatever the surrounding text does --
 * which is why it sat against the left edge instead of between the two ways
 * to pay it separates.
 *
 * Only alignment, size and spacing are set here. Its `display` is left
 * completely alone on purpose: Stripe toggles that inline to hide the
 * separator when no wallet is available, and a rule confident enough to
 * override an inline style would leave an "or" floating above nothing on
 * every device without Apple Pay.
 * ========================================================================= */
body.merit-skin #wc-stripe-express-checkout-button-separator{
  margin:14px 0 12px;
  text-align:center;
  color:var(--silver-dim);
  font-family:var(--font-display);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1;
}

/* The wallet button's own height comes from Stripe (MP_Stripe_Express sets
   it); this is only the room around it. */
body.merit-skin #wc-stripe-express-checkout-element{
  margin:0 0 12px;
}

/* The wallet button and the button that pays are two ways to do one thing, so
   they are spaced as a pair rather than left touching. */
body.merit-skin #wc-stripe-express-checkout-element{ margin-bottom:14px; }

@media (max-width:600px){
  /* The wallet sits right under the payment methods -- the separator is a
     hairline of space, not a gap. */
  body.merit-skin #wc-stripe-express-checkout-button-separator{ margin:7px 0 6px; font-size:11px; }
  body.merit-skin #wc-stripe-express-checkout-element{ margin-bottom:9px; }

  body.mco-checkout #place_order{ padding:13px 20px; font-size:15px; }
}

/* =========================================================================
 * MOBILE — one screen
 *
 * Every value below is a few pixels taken off something that had them to
 * spare: page margins, panel padding, the space around headings, the height
 * of each payment row. Nothing is hidden, no text is shrunk past reading
 * size, and no tap target goes under about 40px.
 *
 * The one thing that cannot be trimmed is the card form itself. Stripe draws
 * that inside an iframe roughly 300px tall and sizes it from its own config,
 * so it is beyond the reach of any stylesheet here.
 * ========================================================================= */
@media (max-width:600px){

  .mco{ padding-top:10px !important; padding-bottom:14px !important; }
  .mco-header{ padding:0 0 10px; }
  .mco-header .mco-brand img{ max-height:28px; }

  .mco-steps{ margin-bottom:12px; padding-bottom:9px; }

  /* The details box, shut on arrival: its head is the whole of its height. */
  .mco-fold{ margin-bottom:10px; }
  .mco-fold-head{ padding:11px 12px; gap:10px; }
  .mco-fold-title{ font-size:14px; }
  .mco-fold-summary{ font-size:11.5px; }

  .mco-panel{ padding:11px 12px; }
  .mco-panel-title{ margin-bottom:8px; padding-bottom:7px; font-size:11.5px; }

  /* "All transactions are secure and encrypted" is a line the header already
     makes with its Secure Checkout lock. Saying it twice costs a row of the
     one screen this is trying to fit into, so on a phone it says it once. */
  .mco-pay-note{ display:none; }

  /* Payment rows: still a comfortable thumb target, without the desktop's
     generous breathing room around each one. */
  body.merit-skin #payment .wc_payment_methods li{ padding:7px 0; }
  body.merit-skin #payment div.form-row{ padding:8px 0; }
  body.merit-skin #payment .payment_box{ margin:6px 0 0; padding:8px 0 2px; }

  /* The summary, collapsed on arrival. */
  body.mco-checkout .mco-summary{ gap:10px; }
  .mco-summary-card{ padding:12px 12px; }
  .mco-sumfold-head{ padding-bottom:0; }

  .mco-footer{ padding-top:10px; }
  .mco-foot-brand img{ max-height:22px; }

  /*
   * The pay button stops being sticky here, and it has to.
   *
   * Sticky pins it to the bottom of the screen, and the wallet button now sits
   * directly above it -- so the pinned button covered the wallet until you
   * scrolled all the way down, which is the opposite of having both on screen.
   * In normal flow they stack in the order they read: payment methods, "or",
   * wallet, pay.
   */
  .mco-placeorder-slot--mobile{ position:static; bottom:auto; }
  .mco-main{ padding-bottom:4px; }
}

/* =========================================================================
 * The shipping address, shown not asked
 *
 * The delivery address is chosen on the cart page, so on the checkout it is a
 * statement rather than a field. No arrow, no hover, no cursor, no link:
 * nothing here suggests it can be touched, because it cannot.
 * ========================================================================= */
.mco-fold--static .mco-fold-head--static{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  width:100%; box-sizing:border-box; padding:20px 22px 0;
  cursor:default; background:none; border:0;
}
.mco-fold--static .mco-fold-title{ cursor:default; }

.mco-ship-readout{ padding:12px 22px 20px; }
.mco-ship-readout address{
  margin:0; font-style:normal; color:var(--white);
  font-size:14.5px; line-height:1.65;
}

@media (max-width:600px){
  .mco-fold--static .mco-fold-head--static{ padding:11px 12px 0; gap:10px; }
  .mco-ship-readout{ padding:8px 12px 12px; }
  .mco-ship-readout address{ font-size:13.5px; line-height:1.55; }
}

/* The delivery method stays in the order summary, where WooCommerce puts it. */
.mco-summary .mco-shipping-rows{
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--line-soft);
}