/* WooCommerce surfaces mapped onto the design system.
   This file restyles Woo's own markup; it does not replace Woo templates, so
   checkout logic, payments and gateways are untouched.

   RULE OF THE FILE: geometry lives in mascapital-uk-style.css and is never
   restated here. Buttons are `.button` (§4.1 there). Fields are already
   listed in §4.4 alongside Woo's selectors. This file only adds what is
   genuinely Woo-shaped: the cart table, the order review, notices, the
   account shell, and the colour of Woo's primary action. */

/* ------------------------------------------------------------------
   1. Primary action: accent colour only. Height, radius, padding and
   type come from `.button`. :not() so .ghost and .blue keep working.
   ------------------------------------------------------------------ */
.masuk.masuk .woocommerce .button:not(.ghost),
.masuk.masuk .woocommerce input.submit,
.masuk.masuk .mascapital-product-reviews input.submit,
.masuk.masuk .woocommerce #respond input#submit {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* .blue is accent by definition; kept so the class still means something
   inside WooCommerce now that the rule above no longer excludes it. */
.masuk.masuk .woocommerce .button.blue {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.masuk.masuk .woocommerce .button:not(.ghost):hover,
.masuk.masuk .woocommerce .button:not(.ghost):focus-visible,
.masuk.masuk .woocommerce input.submit:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: #fff !important;
}
/* Disabled controls stay legible instead of transparent. */
.masuk.masuk .woocommerce .button[disabled],
.masuk.masuk .woocommerce .button:disabled,
.masuk.masuk .woocommerce button.button:disabled {
  opacity: 1 !important;
  background: #e9ecf1 !important;
  border-color: #d5dae2 !important;
  color: #4b5563 !important;
  cursor: not-allowed;
}
/* Woo sets its own padding and height on these. Geometry must not drift. */
.masuk.masuk .woocommerce .wc-proceed-to-checkout a.checkout-button,
.masuk.masuk .woocommerce #place_order,
.masuk.masuk .woocommerce .single_add_to_cart_button {
  padding: 0 var(--btn-pad-x);
  min-height: var(--btn-h);
  font-size: var(--fs-btn);
}
.masuk.masuk .woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  width: 100%;
}

/* ------------------------------------------------------------------
   2. Notices. Woo floats the action button right and puts it first in
   the markup, so the notice stays a block and the float does the work.
   A flex container here inverts the banner; that is why it used to
   render "button above text".
   ------------------------------------------------------------------ */
.masuk.masuk .woocommerce-message,
.masuk.masuk .woocommerce-info,
.masuk.masuk .woocommerce-error {
  display: block;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--control-radius);
  background: var(--soft);
  color: var(--ink);
  padding: 14px 18px;
  margin: 0 0 20px;
  font-size: var(--fs-p);
  list-style: none;
}
.masuk.masuk .woocommerce-error { border-left-color: var(--danger); }
.masuk.masuk .woocommerce-message { border-left-color: var(--success); }
/* No icon font, no overlap. */
.masuk.masuk .woocommerce-message::before,
.masuk.masuk .woocommerce-info::before,
.masuk.masuk .woocommerce-error::before { content: none !important; display: none !important; }
.masuk.masuk .woocommerce-message::after,
.masuk.masuk .woocommerce-info::after,
.masuk.masuk .woocommerce-error::after { content: ""; display: table; clear: both; }
.masuk.masuk .woocommerce-message .button,
.masuk.masuk .woocommerce-info .button,
.masuk.masuk .woocommerce-error .button { float: right; margin: 0 0 0 18px; }
/* Woo focuses the notice after add-to-cart; the UA ring reads as a black frame. */
.masuk.masuk .woocommerce-message:focus,
.masuk.masuk .woocommerce-info:focus,
.masuk.masuk .woocommerce-error:focus { outline: none; box-shadow: 0 0 0 2px var(--accent-ring); }
/* Inline links inside a notice must look like links, not body text. */
.masuk.masuk .woocommerce-message a:not(.button),
.masuk.masuk .woocommerce-info a:not(.button),
.masuk.masuk .woocommerce-error a:not(.button) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------
   3. Tables: cart, order, account.
   ------------------------------------------------------------------ */
.masuk.masuk .woocommerce table.shop_table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: var(--fs-p);
}
.masuk.masuk .woocommerce table.shop_table th,
.masuk.masuk .woocommerce table.shop_table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
}
.masuk.masuk .woocommerce table.shop_table th {
  font-size: var(--fs-meta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.masuk.masuk .woocommerce table.shop_table tbody tr:last-child td { border-bottom: 0; }

/* Cart: a real remove control and a thumbnail you can see. */
.masuk.masuk .woocommerce table.cart td.product-remove { width: 56px; }
.masuk.masuk .woocommerce a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted) !important;
  font-size: 17px;
  font-weight: 400;
  text-decoration: none;
  background: #fff;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.masuk.masuk .woocommerce a.remove:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff !important;
}
.masuk.masuk .woocommerce table.cart td.product-thumbnail img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
.masuk.masuk .woocommerce table.cart td.product-name a { color: var(--ink); font-weight: 500; }
.masuk.masuk .woocommerce table.cart td.product-price,
.masuk.masuk .woocommerce table.cart td.product-subtotal { white-space: nowrap; }

/* Coupon: Woo ships a screen-reader label and a placeholder. Leave it. */
.masuk.masuk .woocommerce .coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.masuk.masuk .coupon-error-notice { font-size: var(--fs-meta); font-weight: 400; }

/* Woo stacks the cart cells on small screens but leaves the table sizing
   to its content. On a 360px phone that pushed the table 42px past its
   container and clipped the product name and price at the viewport edge. */
@media (max-width: 768px) {
  .masuk.masuk .woocommerce table.cart {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
  }
  .masuk.masuk .woocommerce table.cart td { width: auto; }
  .masuk.masuk .woocommerce table.cart td.product-name,
  .masuk.masuk .woocommerce table.cart td.product-price,
  .masuk.masuk .woocommerce table.cart td.product-subtotal {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .masuk.masuk .woocommerce table.cart td.product-price,
  .masuk.masuk .woocommerce table.cart td.product-subtotal { text-align: right; }
  .masuk.masuk .woocommerce table.cart td.actions .coupon { width: 100%; }
  .masuk.masuk .woocommerce table.cart td.actions .coupon .input-text { flex: 1 1 140px; min-width: 0; }
}

/* Cart: items left, totals right — the same two-column shape as checkout.
   .cart-collaterals becomes display:contents so the totals and any
   cross-sells can be placed on the outer grid instead of being squeezed
   into one 380px column. */
@media (min-width: 1000px) {
  body.woocommerce-cart .masuk .woocommerce:has(.woocommerce-cart-form) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: 44px;
    align-items: start;
  }
  body.woocommerce-cart .masuk .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  body.woocommerce-cart .masuk .woocommerce > .woocommerce-cart-form { grid-column: 1; grid-row: 2; }
  body.woocommerce-cart .masuk .woocommerce > .cart-collaterals { display: contents; }
  body.woocommerce-cart .masuk .cart-collaterals .cart_totals {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    float: none;
    margin: 0;
  }
  body.woocommerce-cart .masuk .cart-collaterals .cross-sells { grid-column: 1 / -1; grid-row: 3; }
  body.woocommerce-cart .masuk .woocommerce > .clear { display: none; }
}

/* Cart totals sit under the table, right-aligned, one column. */
.masuk.masuk .cart-collaterals { margin-top: var(--s-5); }
.masuk.masuk .cart-collaterals .cart_totals { width: min(460px, 100%); float: none; margin-left: auto; }
.masuk.masuk .cart-collaterals .cart_totals > h2 { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
@media (max-width: 760px) {
  .masuk.masuk .cart-collaterals .cart_totals { width: 100%; }
}

/* ------------------------------------------------------------------
   4. Checkout layout.
   Left: account invite, then Billing details. Right: the order table
   with the coupon under it (one card), then payment and consent in a
   second card. The form and #order_review are display:contents so their
   children can take a place in this grid without changing WooCommerce's
   markup.
   ------------------------------------------------------------------ */
.masuk.masuk .mas-checkout-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.masuk.masuk .mas-checkout-grid > form.checkout { display: contents; }
/* The order-attribution custom element sits directly in the form and would
   otherwise take a grid cell. Its hidden inputs still submit from here. */
.masuk.masuk .mas-checkout-grid > wc-order-attribution-inputs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* The account invite sits at the top of the left column, above Billing. */
.masuk.masuk .mas-checkout-account {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 16px;
  margin: 0 0 var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.masuk.masuk .mas-checkout-account__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
}
.masuk.masuk .mas-checkout-account__desc {
  grid-column: 1;
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--muted);
}
.masuk.masuk .mas-checkout-account__button {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
/* The generic WooCommerce button rule paints every .button accent blue.
   The account invite is a secondary action: black, like the coupon. */
.masuk.masuk .woocommerce .mas-checkout-account .button {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.masuk.masuk .woocommerce .mas-checkout-account .button:hover,
.masuk.masuk .woocommerce .mas-checkout-account .button:focus-visible {
  background: var(--ink-hover) !important;
  border-color: var(--ink-hover) !important;
  color: #fff !important;
}

/* "Your order" is gone: the table is the first thing in the column. */
.masuk.masuk #order_review { display: contents; }
.masuk.masuk #order_review_heading { display: none; }

/* The coupon is the lower half of the table card: same width, no gap. */
.masuk.masuk .checkout-panel.mas-checkout-coupon {
  border-radius: 0 0 var(--radius) var(--radius);
  border-top: 1px solid var(--line);
  margin: 0;
}
.masuk.masuk .mas-checkout-grid:has(.mas-checkout-coupon) #order_review > table.shop_table {
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}

@media (min-width: 1000px) {
  .masuk.masuk .mas-checkout-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: 56px;
  }
  .masuk.masuk .mas-checkout-left { grid-column: 1; grid-row: 1 / span 3; }
  .masuk.masuk #order_review > table.woocommerce-checkout-review-order-table { grid-column: 2; grid-row: 1; }
  .masuk.masuk .mas-checkout-coupon { grid-column: 2; grid-row: 2; }
  .masuk.masuk #payment { grid-column: 2; grid-row: 3; }
}

@media (max-width: 999px) {
  /* Phone order: account + billing, order table + coupon, payment. */
  .masuk.masuk .mas-checkout-left { order: 1; margin-bottom: var(--s-5); }
  .masuk.masuk #order_review > table.woocommerce-checkout-review-order-table { order: 2; }
  .masuk.masuk .mas-checkout-coupon { order: 3; }
  .masuk.masuk #payment { order: 4; }
}
.masuk.masuk #customer_details .col2-set { display: grid; grid-template-columns: 1fr; gap: 22px; }
.masuk.masuk #customer_details .col-1,
.masuk.masuk #customer_details .col-2 { float: none; width: auto; }
.masuk.masuk #customer_details .col-2 { margin-top: var(--s-5); }
.masuk.masuk #customer_details h3 { font-size: var(--fs-h3); margin: 0 0 var(--s-3); letter-spacing: -.01em; }
.masuk.masuk #order_review_heading { font-size: var(--fs-h3); letter-spacing: -.01em; }
/* The table is the top card; the coupon card joins it from below. */
.masuk.masuk #order_review > table.shop_table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.masuk.masuk #order_review > table.shop_table th,
.masuk.masuk #order_review > table.shop_table td { padding: 12px var(--s-5); }
.masuk.masuk #order_review > table.shop_table thead th { padding-top: var(--s-4); }
.masuk.masuk #order_review > table.shop_table tfoot tr:last-child th,
.masuk.masuk #order_review > table.shop_table tfoot tr:last-child td { padding-bottom: var(--s-4); }
/* Every money cell shares one right edge: header, line item and totals. */
.masuk.masuk #order_review table.shop_table th.product-total,
.masuk.masuk #order_review table.shop_table td.product-total,
.masuk.masuk #order_review table.shop_table tfoot td {
  text-align: right;
}
.masuk.masuk #order_review table.shop_table tfoot th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
}
.masuk.masuk #order_review table.shop_table td.product-name { width: 64%; }
.masuk.masuk #order_review table.shop_table td.product-total { text-align: right; white-space: nowrap; }
.masuk.masuk #order_review table.shop_table tfoot th,
.masuk.masuk #order_review table.shop_table tfoot td { padding: 10px var(--s-5); }
/* The order table ends the summary; whatever follows sets the gap. 10px is
   the whole distance from TOTAL to the next block, on free and paid alike. */
.masuk.masuk #order_review table.woocommerce-checkout-review-order-table { margin-bottom: 0; }
/* Payment and consent are their own card below the table + coupon. */
.masuk.masuk #payment {
  display: flow-root;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
  margin-top: var(--s-5);
}
/* PayPal prints an empty finance-message container here and sets
   display:block inline, so it took 24px between the total and the payment
   options. It renders nothing on this merchant. */
.masuk.masuk #order_review .ppcp-messages { display: none !important; }
.masuk.masuk #payment ul.payment_methods { list-style: none; margin: 0 0 18px; padding: 0; border: 0; }
.masuk.masuk #payment ul.payment_methods li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  list-style: none;
}
/* The gap above the list is already set; the first row adds no padding. */
.masuk.masuk #payment ul.payment_methods li:first-child { padding-top: 0; }
.masuk.masuk #payment ul.payment_methods li:last-child { border-bottom: 0; }
/* Gateway names were body-sized; they are labels, not paragraphs. */
.masuk.masuk #payment ul.payment_methods label {
  font-size: var(--fs-p);
  font-weight: 500;
  color: var(--ink);
}
.masuk.masuk #payment .payment_box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  margin: 10px 0 0;
  padding: var(--s-4);
  font-size: var(--fs-meta);
  line-height: 1.55;
  color: var(--muted);
}
.masuk.masuk #payment .payment_box::before { display: none; }
/* One panel, not a card inside a card. */
.masuk.masuk #payment .wc-stripe-upe-element {
  border: 0;
  background: transparent;
  padding: 0;
}
.masuk.masuk #payment fieldset.wc-upe-form {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.masuk.masuk #place_order { width: 100%; margin-top: 10px; }
/* Woo pads .place-order itself, which indented the terms checkbox and the
   button 16px from every other line in the order card. */
/* A flex column. As a plain block, the whitespace around Woo's <noscript>
   produced a 15px anonymous line box above the terms. Flex ignores it and
   leaves the gap to #payment's own margin. */
.masuk.masuk #order_review .form-row.place-order { display: flex; flex-direction: column; padding: 0; margin: 0; }
/* Woo's clearfix ::before is a table box holding a space, which rendered
   as a 15px empty band between TOTAL and the terms. ::after still clears. */
.masuk.masuk #order_review .form-row.place-order::before { display: none; }

.masuk.masuk #order_review .form-row.place-order .woocommerce-terms-and-conditions-wrapper { margin: 0 0 var(--s-4); }
/* Terms: the asterisk belongs to the sentence, not to the far edge.
   Woo puts the <abbr> inside the label, so the label's flex gap was landing
   between the text and the *. Gap goes on the checkbox instead. */
.masuk.masuk .woocommerce-terms-and-conditions-wrapper .form-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
}
.masuk.masuk .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
  flex: 0 1 auto;
  width: auto;
  gap: 0;
  align-items: flex-start;
}
.masuk.masuk .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox #terms {
  flex: 0 0 auto;
  margin: 2px 9px 0 0;
}
.masuk.masuk .woocommerce-terms-and-conditions-wrapper .required {
  margin: 0 0 0 2px;
  line-height: 1.5;
}
.masuk.masuk form.checkout_coupon {
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: #fff;
  padding: var(--s-4);
  margin: 0 0 20px;
}

/* Form rows: two columns with the same gutter as the rest of the site.
   A lone .form-row-first (password reset) must stay full width, so the
   rule is stated explicitly rather than left to Woo's 47% float. */
.masuk.masuk .woocommerce form .form-row::after { content: ""; display: table; clear: both; }
.masuk.masuk .woocommerce form .form-row-first { float: left; width: calc(50% - 12px); }
.masuk.masuk .woocommerce form .form-row-last { float: right; width: calc(50% - 12px); }
.masuk.masuk .woocommerce form .form-row-first:not(:has(+ .form-row-last)) { float: none; width: 100%; }
@media (max-width: 600px) {
  .masuk.masuk .woocommerce form .form-row-first,
  .masuk.masuk .woocommerce form .form-row-last { float: none; width: 100%; }
}
.masuk.masuk .woocommerce form .form-row { padding: 0; margin: 0 0 var(--s-4); }

/* Select2 mirrors the native select. Its rendered span keeps its own
   vertical padding, which added 15px to the line-height and left the box
   at 59px while every other field was 44px. Pin both. */
.masuk.masuk .select2-container--default .select2-selection--single {
  height: var(--control-h);
  min-height: var(--control-h);
  padding: 0;
  border: 1px solid var(--control-line);
  border-radius: var(--control-radius);
}
.masuk.masuk .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 32px 0 13px;
  line-height: calc(var(--control-h) - 2px);
  color: var(--ink);
  font-size: 15px;
}
.masuk.masuk .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%;
  right: 8px;
  height: 20px;
  margin-top: -10px;
}
.masuk.masuk .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--muted) transparent transparent transparent;
  border-width: 5px 4px 0 4px;
}
.masuk.masuk .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--muted) transparent;
  border-width: 0 4px 5px 4px;
}
.masuk.masuk .select2-container--default .select2-selection--single.select2-selection--focus,
.masuk.masuk .select2-container--default.select2-container--focus .select2-selection--single,
.masuk.masuk .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
/* select2 appends its dropdown to <body>, outside .masuk, so these rules
   cannot be scoped — but this stylesheet only loads on the front end. */
body .select2-dropdown,
body .select2-dropdown--below,
body .select2-dropdown--above {
  border: 1px solid var(--control-line);
  border-radius: var(--control-radius);
  font-family: "Sora", Arial, sans-serif;
  font-size: 15px;
  overflow: hidden;
}
body .select2-container--default .select2-results__option {
  padding: 9px 13px;
  color: var(--ink);
}
body .select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--soft);
  color: var(--ink);
  font-weight: 600;
}
/* Hovered row: black. Three classes so it ties the selected row above and
   wins on order — it used to be white text on a transparent row, because
   the colour tokens lived on .masuk and resolved to nothing out here.
   Tokens are on :root now. */
body .select2-container--default .select2-results__option.select2-results__option--highlighted {
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}
body .select2-search--dropdown .select2-search__field {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--control-line);
  border-radius: 8px;
}

/* Checkboxes and radios share one size. */
.masuk.masuk .woocommerce form input[type="checkbox"],
.masuk.masuk .woocommerce form input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); }
.masuk.masuk .woocommerce-terms-and-conditions-checkbox-text { font-size: var(--fs-meta); line-height: 1.5; }
/* The terms link was inheriting muted grey with no underline: a required
   agreement, unreadable as a link. */
.masuk.masuk .woocommerce-terms-and-conditions-checkbox-text a,
.masuk.masuk .woocommerce-terms-and-conditions-wrapper a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.masuk.masuk .woocommerce-terms-and-conditions-checkbox-text a:hover {
  color: var(--accent-hover);
}

/* A one-time charge on a zero-recurring subscription. */
.masuk.masuk .mas-one-time {
  font-size: var(--fs-meta);
  font-weight: 400;
  color: var(--muted);
}

/* Turnstile injects a 72px widget after load. Reserve the box, or the
   coupon panel and the place-order button jump as it appears. */
.masuk.masuk .cf-turnstile { min-height: 72px; }

/* Password reveal sits inside the field, not on its border. */
.masuk.masuk .woocommerce .password-input-wrapper { position: relative; display: block; }
.masuk.masuk .woocommerce .password-input-wrapper input.input-text { padding-right: 44px; }
.masuk.masuk .woocommerce .show-password-input { color: var(--muted); }

/* ------------------------------------------------------------------
   5. Account
   ------------------------------------------------------------------ */

/* Registration privacy copy: it is fine print, and its link is the thing
   that has to be readable. It was 15px body text with an unstyled link. */
.masuk.masuk .woocommerce-privacy-policy-text {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-meta);
  line-height: 1.6;
  color: var(--muted);
}
.masuk.masuk .woocommerce-privacy-policy-text p { margin: 0; font-size: inherit; }
.masuk.masuk .woocommerce-privacy-policy-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.masuk.masuk .woocommerce-privacy-policy-text a:hover { color: var(--accent-hover); }

/* Woo's col2-set clearfix pseudo-elements become grid items the moment the
   container is a grid, which silently pushes the first column into cell 2
   and wraps the second onto row 2. Remove them — except on #customer_login,
   where the two pseudo-elements carry the OR divider. */
.masuk.masuk #customer_details .col2-set::before,
.masuk.masuk #customer_details .col2-set::after { content: none; display: none; }

/* Auth forms were Woo's default card: 1px #cfc8d8, radius 5. */
.masuk.masuk .woocommerce form.woocommerce-form {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: var(--s-5);
}
.woocommerce-account .masuk #customer_login {
  max-width: none;
  margin-inline: 0;
}
.woocommerce-account .masuk #customer_login.u-columns {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 160px;
  align-items: start;
}
/* Divide login from register with a hairline down the full height, broken
   in the middle by OR at the same size as the column headings. Both are
   pseudo-elements on the grid container, so they cost no markup and stay
   out of flow (Woo's clearfix versions are neutralised above). */
.woocommerce-account .masuk #customer_login.u-columns::before {
  content: "";
  display: block; /* Woo's clearfix leaves display:table, which collapses to height 0 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -.5px;
  background: var(--line);
}
.woocommerce-account .masuk #customer_login.u-columns::after {
  content: "OR";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 0;
  background: #fff;
  color: var(--ink);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
}
@media (max-width: 900px) {
  .woocommerce-account .masuk #customer_login.u-columns { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .woocommerce-account .masuk #customer_login.u-columns::before,
  .woocommerce-account .masuk #customer_login.u-columns::after { display: none; }
}
.woocommerce-account .masuk .u-column1,
.woocommerce-account .masuk .u-column2 { width: auto; float: none; }
.woocommerce-account .masuk .woocommerce > .clear { display: none; }

/* A real sidebar once logged in. The media query repeats the :has()
   selector on purpose: without it the override loses on specificity and
   the grid never collapses on a phone. */
.woocommerce-account .masuk .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .woocommerce-account .masuk .woocommerce:has(.woocommerce-MyAccount-navigation) {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
}
.woocommerce-account .masuk .woocommerce-MyAccount-navigation,
.woocommerce-account .masuk .woocommerce-MyAccount-content { width: auto; float: none; }
.woocommerce-account .masuk .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
.woocommerce-account .masuk .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1; }
@media (max-width: 900px) {
  .woocommerce-account .masuk .woocommerce-MyAccount-navigation,
  .woocommerce-account .masuk .woocommerce-MyAccount-content { grid-column: 1; grid-row: auto; }
}
.masuk.masuk .woocommerce-MyAccount-navigation ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.masuk.masuk .woocommerce-MyAccount-navigation li { margin: 0; border-bottom: 1px solid var(--line); }
.masuk.masuk .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.masuk.masuk .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 13px 16px;
  font-size: var(--fs-btn);
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.masuk.masuk .woocommerce-MyAccount-navigation a:hover { background: var(--soft); color: var(--accent); }
.masuk.masuk .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--softblue);
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}
.masuk.masuk .woocommerce-MyAccount-content h2 { font-size: var(--fs-h3); margin: 0 0 var(--s-4); }
.masuk.masuk .woocommerce-MyAccount-content h3 { font-size: var(--fs-p); margin: var(--s-5) 0 var(--s-3); }
.masuk.masuk .woocommerce-MyAccount-content p { margin: 0 0 14px; font-size: var(--fs-p); }
.masuk.masuk .woocommerce-MyAccount-content p:first-of-type { font-size: var(--fs-body); }
.masuk.masuk .woocommerce-MyAccount-content .button { margin-top: var(--s-2); }

/* "Lost your password?" was 16px/300 sitting under the button. */
.masuk.masuk .woocommerce .lost_password { margin: 14px 0 0; }
.masuk.masuk .woocommerce .lost_password a {
  font-size: var(--fs-meta);
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.masuk.masuk .woocommerce .lost_password a:hover { color: var(--accent); }
.masuk.masuk .woocommerce .lost_reset_password { width: 100%; max-width: 480px; margin-inline: auto; }
/* Password reset is a plain form: it needs the gaps other forms get for free. */
.masuk.masuk .woocommerce .lost_reset_password > p:first-of-type {
  font-size: var(--fs-p);
  color: var(--muted);
  margin: 0 0 var(--s-4);
}
.masuk.masuk .woocommerce .lost_reset_password .form-row { margin-bottom: var(--s-4); }
.masuk.masuk .woocommerce .lost_reset_password .form-row label { display: block; }

/* Downloads and order tables never squeeze on a phone. */
.masuk.masuk .woocommerce table.my_account_orders .button { white-space: nowrap; }
.masuk.masuk .woocommerce table.my_account_orders td,
.masuk.masuk .woocommerce table.my_account_orders th { font-size: var(--fs-meta); }
/* Pay / View / Cancel used to render as one fused block. */
.masuk.masuk .woocommerce table.my_account_orders td.woocommerce-orders-table__cell-order-actions .button {
  margin: 0 8px 6px 0;
}
.masuk.masuk .woocommerce table.my_account_orders td.woocommerce-orders-table__cell-order-actions .button:last-child {
  margin-right: 0;
}

/* ------------------------------------------------------------------
   6. Checkout progress lives in the black bar at the top of the page.
   See section 9: the bar renders before the template, so the step is
   read from the request rather than passed in by the page.
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   7. Order received ("thank you")
   Woo emits an unstyled green sentence, a floated <ul> of order facts,
   then three full-width sections. Give the facts a card, the sections a
   two-column pair, and every heading the same size as the rest of the site.
   ------------------------------------------------------------------ */
.masuk.masuk .woocommerce-order {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) 44px;
  align-items: start;
}
.masuk.masuk .woocommerce-order > .woocommerce-thankyou-order-received,
.masuk.masuk .woocommerce-order > .woocommerce-order-overview,
.masuk.masuk .woocommerce-order > .woocommerce-order-downloads,
.masuk.masuk .woocommerce-order > .woocommerce-bacs-bank-details {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  .masuk.masuk .woocommerce-order { grid-template-columns: minmax(0, 1fr); }
}

.masuk.masuk .woocommerce-thankyou-order-received {
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--green-line);
  border-left: 3px solid var(--success);
  border-radius: var(--control-radius);
  background: var(--green-soft);
  color: var(--green-ink);
  font-size: var(--fs-p);
  font-weight: 500;
  line-height: 1.5;
}

.masuk.masuk .woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  list-style: none;
}
/* Woo's clearfix pseudo-elements become grid items and push every cell
   one place to the right. Same trap as .col2-set. */
.masuk.masuk .woocommerce-order-overview::before,
.masuk.masuk .woocommerce-order-overview::after { content: none; display: none; }
.masuk.masuk .woocommerce-order-overview li {
  float: none;
  width: auto;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-right: 1px solid var(--line);
  text-align: left;
  font-size: var(--fs-meta);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.masuk.masuk .woocommerce-order-overview li:last-child { border-right: 0; }
.masuk.masuk .woocommerce-order-overview li strong {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-p);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  word-break: break-word;
}
@media (max-width: 700px) {
  .masuk.masuk .woocommerce-order-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .masuk.masuk .woocommerce-order-overview li:nth-child(2n) { border-right: 0; }
  .masuk.masuk .woocommerce-order-overview li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

.masuk.masuk .woocommerce-order h2 {
  font-size: var(--fs-h3);
  margin: 0 0 var(--s-3);
  letter-spacing: -.01em;
}
.masuk.masuk .woocommerce-order-details,
.masuk.masuk .woocommerce-customer-details { margin: 0; }
.masuk.masuk .woocommerce-customer-details address {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4);
  font-style: normal;
  font-size: var(--fs-p);
  line-height: 1.65;
  color: var(--ink);
}
.masuk.masuk .woocommerce-columns--addresses .woocommerce-column { width: auto; float: none; }
.masuk.masuk .woocommerce-order .woocommerce-table--order-downloads { margin: 0; }

/* ------------------------------------------------------------------
   8. Checkout coupon: under the order card in the right column.
   The Apply button is black on purpose — the page has one primary
   action, and it is the one that finishes the order.
   ------------------------------------------------------------------ */
.masuk.masuk .checkout-panel {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.masuk.masuk .checkout-panel__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  margin: 0 0 4px;
}
.masuk.masuk .checkout-panel__desc {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--muted);
}
.masuk.masuk .checkout-panel__desc:first-child { margin-top: 0; }

.masuk.masuk .checkout-panel__row { display: flex; gap: 8px; }
.masuk.masuk .checkout-panel__row #coupon_code,
.masuk.masuk .woocommerce .coupon #coupon_code {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--btn-h);
  min-height: var(--btn-h);
  padding: 0 12px;
  font-size: var(--fs-btn);
  border: 1px solid var(--control-line);
  border-radius: var(--control-radius);
  background: #fff;
  color: var(--ink);
}
/* The cart's coupon field has a whole row to itself, so it takes the space
   instead of shrinking to its placeholder. */
.masuk.masuk .woocommerce .coupon #coupon_code {
  flex: 1 1 320px;
  width: auto;
  min-width: 320px;
  max-width: 560px;
}
.masuk.masuk .checkout-panel__row #coupon_code:focus,
.masuk.masuk .woocommerce .coupon #coupon_code:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.masuk.masuk .woocommerce .checkout-panel .button {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.masuk.masuk .woocommerce .checkout-panel .button:hover,
.masuk.masuk .woocommerce .checkout-panel .button:focus-visible {
  background: var(--ink-hover) !important;
  border-color: var(--ink-hover) !important;
  color: #fff !important;
}

@media (max-width: 600px) {
  .masuk.masuk .woocommerce-MyAccount-navigation a { padding: 11px 14px; }
  /* Eight stacked rows is a wall of links; two columns halves it. */
  .masuk.masuk .woocommerce-MyAccount-navigation ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .masuk.masuk .woocommerce-MyAccount-navigation li:nth-child(odd) { border-right: 1px solid var(--line); }
  .masuk.masuk .woocommerce-MyAccount-navigation li:nth-last-child(-n+2) { border-bottom: 0; }
  .masuk.masuk .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
}

/* A free order has no payment box, so say why: without this the empty
   space between the terms and the button reads as a missing price. */
.masuk.masuk .mas-free-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: var(--s-3) 0 var(--s-2);
  padding: 12px 14px;
  border: 1px solid var(--green-line, #c9f0db);
  border-radius: var(--control-radius);
  background: var(--green-soft, #eafaf1);
}
.masuk.masuk .mas-free-note__icon {
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--success, #16a34a);
}
.masuk.masuk .mas-free-note__icon svg { width: 16px; height: 16px; display: block; }
.masuk.masuk .mas-free-note__text {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--green-ink, #0a6b45);
}
.masuk.masuk .mas-free-note__text strong { font-weight: 600; color: inherit; }

/* ------------------------------------------------------------------
   9. Focused checkout bar.
   Cart, checkout and order-received drop the site header and the
   breadcrumb. One black strip carries the whole flow: the logo in
   white, the three steps, and the way back.

   The bar renders before the page template, so the current step comes
   from the request (mas_current_checkout_step), not from the page.
   ------------------------------------------------------------------ */
.mas-checkout-bar {
  background: var(--surface-dark, #0c0e12);
  color: #fff;
  /* Outside .masuk, so Sora has to be stated again. */
  font-family: "Sora", Arial, sans-serif;
}
.mas-checkout-bar__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(1180px, calc(100% - 48px));
  min-height: 56px;
  margin: 0 auto;
}
.mas-checkout-bar__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}
/* The logo ships dark; invert it for the black strip. */
.mas-checkout-bar__logo img {
  display: block;
  width: auto;
  height: 20px;
  filter: brightness(0) invert(1);
}

/* Steps: number and label on one line, small enough for a 56px bar. */
.mas-checkout-bar .checkout-steps { flex: 1 1 auto; min-width: 0; }
.mas-checkout-bar .checkout-steps ol {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mas-checkout-bar .checkout-steps li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mas-checkout-bar .checkout-steps li + li::before {
  content: "\203A";
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin: 0 10px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .42);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transform: none;
}
/* Each stage is a pill, so completed, current and upcoming differ by
   shape as well as by colour. */
.mas-checkout-bar .checkout-steps__step {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255, 255, 255, .68);
  text-decoration: none;
  transition: color var(--dur-fast, .16s) var(--ease, ease),
              background-color var(--dur-fast, .16s) var(--ease, ease),
              border-color var(--dur-fast, .16s) var(--ease, ease);
}
.mas-checkout-bar .checkout-steps__n,
.mas-checkout-bar .checkout-steps__label {
  font-size: 11px;
  line-height: 1;
  color: inherit;
  transition: color var(--dur-fast, .16s) var(--ease, ease);
}
.mas-checkout-bar .checkout-steps__n {
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.mas-checkout-bar .checkout-steps__label {
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.mas-checkout-bar .checkout-steps .is-done .checkout-steps__step {
  background: rgba(255, 255, 255, .10);
  color: #fff;
}
/* The number is replaced by a check on a completed stage. */
.mas-checkout-bar .checkout-steps .is-done .checkout-steps__n {
  position: relative;
  width: 11px;
  height: 11px;
  font-size: 0;
  color: transparent;
}
.mas-checkout-bar .checkout-steps .is-done .checkout-steps__n::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1px;
  width: 4px;
  height: 8px;
  border: solid #7ee2b8;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mas-checkout-bar .checkout-steps .is-current .checkout-steps__step {
  background: #1a6bff;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(26, 107, 255, .20);
}
.mas-checkout-bar .checkout-steps .is-current .checkout-steps__label { font-weight: 600; }
.mas-checkout-bar .checkout-steps .is-next .checkout-steps__step {
  border-color: rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .68);
}
/* State colour is set on the label/number too, not only inherited from the
   pill, so it cannot be beaten by an older, more specific rule. */
.mas-checkout-bar .checkout-steps .is-done .checkout-steps__label,
.mas-checkout-bar .checkout-steps .is-current .checkout-steps__n,
.mas-checkout-bar .checkout-steps .is-current .checkout-steps__label { color: #fff; }
.mas-checkout-bar .checkout-steps .is-next .checkout-steps__n,
.mas-checkout-bar .checkout-steps .is-next .checkout-steps__label { color: rgba(255, 255, 255, .68); }
.mas-checkout-bar .checkout-steps a.checkout-steps__step:hover,
.mas-checkout-bar .checkout-steps a.checkout-steps__step:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .30);
}
.mas-checkout-bar .checkout-steps a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .7);
  outline-offset: 3px;
  border-radius: 999px;
}

.mas-checkout-bar__back {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-fast, .16s) var(--ease, ease);
}
.mas-checkout-bar__back svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: transform var(--dur-fast, .16s) var(--ease, ease);
}
.mas-checkout-bar__back:hover,
.mas-checkout-bar__back:focus-visible { color: #fff; }
.mas-checkout-bar__back:hover svg,
.mas-checkout-bar__back:focus-visible svg { transform: translateX(-3px); }
.mas-checkout-bar__back:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .7);
  outline-offset: 4px;
  border-radius: 4px;
}
@media (max-width: 900px) {
  .mas-checkout-bar__inner { gap: 16px; }
  .mas-checkout-bar .checkout-steps li + li::before { margin: 0 8px; }
  .mas-checkout-bar .checkout-steps__n,
  .mas-checkout-bar .checkout-steps__label { font-size: 10.5px; }
  .mas-checkout-bar .checkout-steps__label { letter-spacing: .06em; }
  .mas-checkout-bar__back { font-size: 12px; }
}
/* The three pills stop fitting beside the logo on tablets and phones.
   Logo and Back share the first row; the stages take the second. */
@media (max-width: 900px) {
  .mas-checkout-bar__inner {
    flex-wrap: wrap;
    width: calc(100% - 32px);
    padding: 9px 0 10px;
    row-gap: 8px;
  }
  .mas-checkout-bar__logo img { height: 15px; }
  .mas-checkout-bar .checkout-steps { order: 3; flex: 0 0 100%; }
  .mas-checkout-bar .checkout-steps ol { justify-content: center; }
  .mas-checkout-bar .checkout-steps__step { min-height: 34px; padding: 0 10px; gap: 5px; }
  .mas-checkout-bar .checkout-steps li + li::before { font-size: 16px; margin: 0 6px; }
  .mas-checkout-bar__back { margin-left: auto; font-size: 11px; gap: 6px; }
  .mas-checkout-bar__back svg { width: 14px; height: 14px; }
}
@media (max-width: 400px) {
  .mas-checkout-bar__logo img { height: 13px; }
  .mas-checkout-bar .checkout-steps__n,
  .mas-checkout-bar .checkout-steps__label { font-size: 10px; }
  .mas-checkout-bar .checkout-steps__label { letter-spacing: .03em; }
  .mas-checkout-bar .checkout-steps__step { padding: 0 9px; gap: 5px; }
  .mas-checkout-bar .checkout-steps li + li::before { margin: 0 5px; }
}


/* ------------------------------------------------------------------
   10. Login dialog
   ------------------------------------------------------------------ */
.mas-login-modal {
  width: min(460px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(17, 17, 17, .28);
}
.mas-login-modal::backdrop { background: rgba(17, 17, 17, .55); }
.mas-login-modal__panel {
  position: relative;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: var(--s-6);
}
.mas-login-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.mas-login-modal__close:hover { color: var(--ink); border-color: var(--ink); }
.mas-login-modal__close:focus-visible {
  outline: 3px solid rgba(26, 107, 255, .5);
  outline-offset: 2px;
}
.masuk.masuk .mas-login-modal__title {
  margin: 0 0 4px;
  max-width: none;
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -.015em;
}
.masuk.masuk .mas-login-modal__desc {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--muted);
}
.masuk.masuk .mas-login-modal form.woocommerce-form {
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
}
.masuk.masuk .mas-login-modal .gglw-login-option { display: none; }
.masuk.masuk .mas-login-modal .woocommerce-form .form-row,
.masuk.masuk .mas-login-modal .woocommerce-form .form-row-first,
.masuk.masuk .mas-login-modal .woocommerce-form .form-row-last {
  float: none;
  width: 100%;
  margin: 0 0 var(--s-3);
  padding: 0;
}
.masuk.masuk .mas-login-modal .woocommerce-form .form-row label { display: block; margin-bottom: 5px; }
.masuk.masuk .mas-login-modal .woocommerce-form .lost_password { margin: var(--s-3) 0 0; }
.masuk.masuk .mas-login-modal .woocommerce-form .woocommerce-form-login__rememberme { margin: 0; }
body.mas-modal-open { overflow: hidden; }