/* Cart and checkout, ported from the canvas.
   Sources: assets/html/all-pages-v2/{Cart,Checkout} Page.dc.html

   These style WooCommerce's own server-rendered cart and checkout rather than
   reimplementing them. Payments, tax and shipping stay Woo's job; the design
   is ours. The canvas's anatomy — line items left, sticky summary right —
   matches the classic templates closely, so most of this is retheming rather
   than relayout. */

.mf-co{padding:56px 40px 96px;background:#14100E;color:#F4EDE1}
.mf-co-inner{max-width:1280px;margin:0 auto}
.mf-co-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.mf-co h1{margin:0;font-size:clamp(40px,5.4vw,72px);line-height:0.95;font-weight:900;letter-spacing:-0.035em}
.mf-co-steps{
  display:flex;gap:8px;font-family:'DM Mono',monospace;font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;color:rgba(244,237,225,0.35);
}
.mf-co-steps .is-done{color:var(--mf-accent)}
.mf-co-rule{
  margin:34px 0 40px;height:10px;
  background:repeating-linear-gradient(90deg,var(--mf-accent) 0 18px,#14100E 18px 24px,#1E6B4F 24px 42px,#B81D24 42px 48px);
}

/* Woo's own markup, retheme ------------------------------------------- */
.mf-co .woocommerce{color:inherit}
.mf-co .woocommerce-cart-form{margin:0}
.mf-co .shop_table{
  width:100%;border-collapse:separate;border-spacing:0 14px;border:0;
}
.mf-co .shop_table thead th{
  padding:0 0 10px;border:0;text-align:left;
  font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:0.18em;
  text-transform:uppercase;color:rgba(244,237,225,0.45);font-weight:400;
}
.mf-co .shop_table td{
  padding:20px;border:0;background:#1C1714;vertical-align:middle;
  border-top:1px solid rgba(244,237,225,0.1);border-bottom:1px solid rgba(244,237,225,0.1);
}
.mf-co .shop_table td:first-child{
  border-left:1px solid rgba(244,237,225,0.1);border-radius:20px 0 0 20px;
}
.mf-co .shop_table td:last-child{
  border-right:1px solid rgba(244,237,225,0.1);border-radius:0 20px 20px 0;
}
.mf-co .shop_table .product-thumbnail{width:104px}
.mf-co .shop_table .product-thumbnail img{
  display:block;width:84px;height:84px;border-radius:14px;object-fit:cover;background:#EAF4F8;
}
.mf-co .shop_table .product-name a{font-size:19px;font-weight:900;letter-spacing:-0.02em;color:#F4EDE1}
.mf-co .shop_table .variation{
  margin:6px 0 0;font-family:'DM Mono',monospace;font-size:11.5px;
  letter-spacing:0.1em;text-transform:uppercase;color:rgba(244,237,225,0.5);
}
.mf-co .shop_table .variation dt,.mf-co .shop_table .variation dd{display:inline;margin:0}
.mf-co .shop_table .variation dd p{display:inline;margin:0}
.mf-co .amount{font-family:'DM Mono',monospace;color:var(--mf-accent)}
.mf-co .product-remove a{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(244,237,225,0.08);color:rgba(244,237,225,0.7);
  font-size:16px;line-height:1;text-decoration:none;transition:all .2s ease;
}
.mf-co .product-remove a:hover{background:#B81D24;color:#FFF3E2}

.mf-co .quantity{display:inline-flex;align-items:center;border:1px solid rgba(244,237,225,0.2);border-radius:12px;overflow:hidden}
.mf-co .quantity input{
  width:62px;height:44px;padding:0 8px;border:0;background:none;color:#F4EDE1;
  font-family:'DM Mono',monospace;font-size:15px;text-align:center;
}

.mf-co .coupon{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}
/* Woo's form styling is more specific than a bare element selector, and its
   inputs default to a white ground that is unreadable on this page. */
main.mf-co input[type="text"],main.mf-co input[type="email"],main.mf-co input[type="tel"],
main.mf-co input[type="password"],main.mf-co input[type="number"],main.mf-co input.input-text,
main.mf-co textarea,main.mf-co select,main.mf-co .select2-container .select2-selection{
  padding:15px 18px;border:1px solid rgba(244,237,225,0.22);border-radius:14px;
  /* Woo's own form rules are more specific than anything reasonable to write
     here (.woocommerce form .form-row input.input-text), and they hardcode a
     white ground that is unreadable on this page. Scoped to form controls
     inside main.mf-co only. */
  background:#1C1714 !important;color:#F4EDE1 !important;
  font-family:inherit;font-size:15px;outline:none;
  transition:border-color .2s ease;width:100%;
}
main.mf-co input:focus,main.mf-co textarea:focus,main.mf-co select:focus{border-color:var(--mf-accent)}
main.mf-co input::placeholder,main.mf-co textarea::placeholder{color:rgba(244,237,225,0.4)}
main.mf-co .select2-container .select2-selection__rendered{color:#F4EDE1;line-height:1.4;padding:0}
main.mf-co .select2-container .select2-selection{height:auto;display:flex;align-items:center}
main.mf-co .select2-container .select2-selection__arrow{top:50%;transform:translateY(-50%);right:12px}
main.mf-co .quantity input{background:none;border:0}
.mf-co label{
  display:block;margin-bottom:8px;font-family:'DM Mono',monospace;font-size:10.5px;
  letter-spacing:0.16em;text-transform:uppercase;color:rgba(244,237,225,0.5);
}
.mf-co .required{color:#E4572E;text-decoration:none}

.mf-co .button,.mf-co button[type="submit"],.mf-co .checkout-button{
  padding:17px 30px;border:none;border-radius:999px;background:#B81D24;color:#FFF3E2;
  font-size:13px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;
  cursor:pointer;transition:background .2s ease;text-decoration:none;display:inline-block;
}
.mf-co .button:hover,.mf-co button[type="submit"]:hover,.mf-co .checkout-button:hover{background:#E4572E;color:#FFF3E2}
.mf-co .checkout-button{display:block;width:100%;text-align:center;margin-top:18px}
.mf-co .button[name="update_cart"]{background:none;border:1px solid rgba(244,237,225,0.3);color:#F4EDE1}
.mf-co .button[name="update_cart"]:hover{border-color:var(--mf-accent);color:var(--mf-accent);background:none}
.mf-co .button[disabled]{opacity:.45;cursor:not-allowed}

/* The canvas puts line items left and a sticky summary right. Classic Woo
   stacks them, so grid the wrapper: the form and the collaterals are siblings. */
/* Woo's own stylesheet caps .woocommerce at 1000px and floats .cart_totals at
   48% inside .cart-collaterals — a leftover of its classic two-column
   collaterals. Both have to go before the grid can do anything. */
/* Cart only. On checkout the .woocommerce wrapper holds form.checkout, which
   runs its own grid — nesting the two split the page twice and squeezed the
   order summary to 274px. */
main.mf-co .woocommerce{max-width:none;width:100%}
body.woocommerce-cart main.mf-co .woocommerce{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,0.85fr);
  gap:48px;align-items:start;
}
main.mf-co .woocommerce .cart-collaterals,
main.mf-co .woocommerce .cart-collaterals .cart_totals,
main.mf-co .woocommerce .cart-collaterals .cross-sells{float:none;width:100%}
.mf-co .woocommerce > .woocommerce-notices-wrapper,
.mf-co .woocommerce > .cart-empty,
.mf-co .woocommerce > .return-to-shop{grid-column:1 / -1}
.mf-co .cart-collaterals{width:100%;margin:0;position:sticky;top:28px}
.mf-co .cart-collaterals .cross-sells{margin-top:26px}

/* Summary panel: the canvas's sticky aside. */
.mf-co .cart_totals,.mf-co #order_review{
  padding:30px;background:#1C1714;border:1px solid rgba(244,237,225,0.12);border-radius:24px;
}
.mf-co .cart_totals h2,.mf-co #order_review_heading{
  margin:0 0 22px;font-size:22px;font-weight:900;letter-spacing:-0.02em;
}
.mf-co .cart_totals table,.mf-co #order_review table{width:100%;border-collapse:collapse;border:0}
.mf-co .cart_totals th,.mf-co .cart_totals td,
.mf-co #order_review th,.mf-co #order_review td{
  padding:13px 0;border:0;border-bottom:1px solid rgba(244,237,225,0.1);
  font-size:15px;text-align:left;
}
.mf-co .cart_totals th,.mf-co #order_review th{font-weight:600;color:rgba(244,237,225,0.7)}
.mf-co .cart_totals td,.mf-co #order_review td{text-align:right}
.mf-co .order-total th,.mf-co .order-total td{
  padding-top:18px;border-bottom:0;font-size:19px;font-weight:900;letter-spacing:-0.01em;
}
.mf-co .order-total .amount{font-size:22px}
.mf-co .woocommerce-shipping-methods{margin:0;padding:0;list-style:none}
.mf-co .woocommerce-shipping-methods li{padding:6px 0}

/* Woo ships both classic and block notice markup; theme both. */
.mf-co .woocommerce-info,.mf-co .woocommerce-message,.mf-co .woocommerce-error,
.mf-co .wc-block-components-notice-banner,
.mf-co .cart-empty{
  padding:20px 24px;border-radius:18px;background:#1C1714;
  border:1px solid rgba(244,237,225,0.14);list-style:none;margin:0 0 24px;
}
.mf-co .woocommerce-error{border-color:rgba(184,29,36,0.5)}
.mf-co .wc-block-components-notice-banner{color:#F4EDE1}
.mf-co .wc-block-components-notice-banner__content{color:inherit}
.mf-co .woocommerce-message,.mf-co .woocommerce-info{color:#F4EDE1}
.mf-co .woocommerce-message a,.mf-co .woocommerce-info a{color:var(--mf-accent)}
.mf-co .woocommerce-message::before,.mf-co .woocommerce-info::before{color:var(--mf-accent)}
.mf-co .return-to-shop{margin-top:22px}

/* Checkout two-column, matching the canvas's split.
   Woo's classic checkout is built on floats and percentage widths — .col-1 and
   .col-2 at 47%, .form-row-first/.form-row-last likewise. Every one has to be
   unset before a grid can take over, and the selectors have to outrank
   woocommerce-layout.css, which is why these are anchored on main.mf-co. */
main.mf-co form.checkout{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,0.85fr);
  gap:48px;align-items:start;
}
main.mf-co form.checkout .col2-set,
main.mf-co form.checkout .col-1,
main.mf-co form.checkout .col-2,
main.mf-co form.checkout .form-row,
main.mf-co form.checkout .form-row-first,
main.mf-co form.checkout .form-row-last,
main.mf-co form.checkout .form-row-wide{
  float:none;width:100%;padding:0;margin:0 0 18px;
}
/* form.checkout emits three siblings — customer details, the "Your order"
   heading, and the review table. Left to flow, the heading lands in column two
   and the table wraps back to column one. Place all three explicitly. */
main.mf-co #customer_details{grid-column:1;grid-row:1 / span 2;min-width:0;display:flex;flex-direction:column;gap:8px}
main.mf-co #order_review_heading{grid-column:2;grid-row:1;margin:0 0 20px}
main.mf-co #order_review{grid-column:2;grid-row:2}
main.mf-co #customer_details .col2-set{display:block}
main.mf-co .woocommerce-checkout-review-order{min-width:0}
.mf-co h3{margin:0 0 20px;font-size:20px;font-weight:900;letter-spacing:-0.02em}
main.mf-co .woocommerce-billing-fields__field-wrapper,
main.mf-co .woocommerce-shipping-fields__field-wrapper{
  display:grid;grid-template-columns:1fr 1fr;gap:0 16px;
}
main.mf-co .woocommerce-billing-fields__field-wrapper > .form-row-wide,
main.mf-co .woocommerce-shipping-fields__field-wrapper > .form-row-wide,
main.mf-co .form-row-full{grid-column:1 / -1}
.mf-co .wc_payment_methods{margin:0;padding:0;list-style:none}
.mf-co .wc_payment_method{padding:14px 0;border-bottom:1px solid rgba(244,237,225,0.1)}
.mf-co .wc_payment_method label{
  display:inline;margin:0 0 0 8px;font-family:inherit;font-size:15px;
  letter-spacing:0;text-transform:none;color:#F4EDE1;
}
.mf-co .payment_box{
  margin-top:12px;padding:16px;border-radius:14px;
  background:rgba(244,237,225,0.05);font-size:14px;color:rgba(244,237,225,0.7);
}
.mf-co .payment_box p{margin:0}
.mf-co #place_order{width:100%;margin-top:20px}
.mf-co .woocommerce-terms-and-conditions-wrapper{margin:18px 0 0;font-size:14px;color:rgba(244,237,225,0.65)}

@media (max-width:1100px){
  body.woocommerce-cart main.mf-co .woocommerce{grid-template-columns:minmax(0,1fr)}
  main.mf-co form.checkout{grid-template-columns:minmax(0,1fr)}
  main.mf-co #customer_details,main.mf-co #order_review_heading,main.mf-co #order_review{grid-column:1;grid-row:auto}
  .mf-co .cart-collaterals{position:static}
}

@media (max-width:900px){
  .mf-co{padding:36px 20px 64px}
  .mf-co form.checkout{grid-template-columns:minmax(0,1fr)}
  .mf-co .woocommerce-checkout-review-order{position:static}
  .mf-co .woocommerce-billing-fields__field-wrapper,
  .mf-co .woocommerce-shipping-fields__field-wrapper{grid-template-columns:1fr}
  .mf-co .shop_table thead{display:none}
  .mf-co .shop_table td{display:block;border-radius:0}
}

/* --- Order received ---------------------------------------------------
   Source: assets/html/all-pages-v2/Order Received Page.dc.html
   Woo renders the thankyou template into the checkout page. */
.mf-co .woocommerce-order{max-width:900px}
.mf-co .woocommerce-thankyou-order-received{
  margin:0 0 26px;font-size:clamp(28px,3.4vw,42px);line-height:1.05;
  font-weight:900;letter-spacing:-0.03em;color:#F4EDE1;
}
.mf-co .woocommerce-order-overview{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;
  margin:0 0 34px;padding:26px;list-style:none;
  background:#1C1714;border:1px solid rgba(244,237,225,0.12);border-radius:22px;
}
.mf-co .woocommerce-order-overview li{
  border:0;padding:0;
  font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:0.16em;
  text-transform:uppercase;color:rgba(244,237,225,0.5);
}
.mf-co .woocommerce-order-overview li strong{
  display:block;margin-top:8px;font-family:'Archivo',sans-serif;font-size:19px;
  letter-spacing:-0.01em;text-transform:none;color:#F4EDE1;
}
.mf-co .woocommerce-order-details,.mf-co .woocommerce-customer-details{margin-top:34px}
.mf-co .woocommerce-order-details__title,.mf-co .woocommerce-column__title{
  margin:0 0 18px;font-size:22px;font-weight:900;letter-spacing:-0.02em;
}
.mf-co .woocommerce-order .shop_table{border-spacing:0}
.mf-co .woocommerce-order .shop_table td,.mf-co .woocommerce-order .shop_table th{
  padding:14px 16px;border-radius:0;border-top:0;
  border-bottom:1px solid rgba(244,237,225,0.1);background:none;
}
.mf-co .woocommerce-order .shop_table tfoot th{font-weight:600;color:rgba(244,237,225,0.7)}
.mf-co .woocommerce-customer-details address{
  font-style:normal;padding:22px;border-radius:18px;
  background:#1C1714;border:1px solid rgba(244,237,225,0.12);
  font-size:15px;line-height:1.65;color:rgba(244,237,225,0.75);
}

/* Woo's block-based order confirmation (a separate template from checkout). */
.mf-co .wc-block-order-confirmation-status p{font-size:19px;line-height:1.55;color:rgba(244,237,225,0.78)}
.mf-co .wc-block-order-confirmation-summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;
  margin:26px 0 34px;padding:26px;
  background:#1C1714;border:1px solid rgba(244,237,225,0.12);border-radius:22px;
}
.mf-co .wc-block-order-confirmation-summary-list-item__key{
  font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:0.16em;
  text-transform:uppercase;color:rgba(244,237,225,0.5);
}
.mf-co .wc-block-order-confirmation-summary-list-item__value{
  display:block;margin-top:8px;font-size:19px;letter-spacing:-0.01em;color:#F4EDE1;
}
.mf-co .wc-block-order-confirmation-totals__table{width:100%;border-collapse:collapse}
.mf-co .wc-block-order-confirmation-totals__table th,
.mf-co .wc-block-order-confirmation-totals__table td{
  padding:14px 0;border-bottom:1px solid rgba(244,237,225,0.1);text-align:left;font-size:15px;
}
.mf-co .wc-block-order-confirmation-totals__table td:last-child{text-align:right}
.mf-co .wc-block-order-confirmation-address address{
  display:block;font-style:normal;margin-top:12px;padding:22px;border-radius:18px;
  background:#1C1714;border:1px solid rgba(244,237,225,0.12);
  font-size:15px;line-height:1.65;color:rgba(244,237,225,0.75);
}
.mf-co h2,.mf-co h3{color:#F4EDE1}
/* The template already carries the page heading; Woo's status block repeats it. */
.mf-co .wc-block-order-confirmation-status > h2:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}