.elementor-6343 .elementor-element.elementor-element-8937e58{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:80px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}.elementor-6343 .elementor-element.elementor-element-3e85017{width:var( --container-widget-width, 483px );max-width:483px;--container-widget-width:483px;--container-widget-flex-grow:0;}.elementor-6343 .elementor-element.elementor-element-3e85017 .elementor-heading-title{font-family:"Siraaya", sans-serif;font-size:46px;font-weight:600;line-height:54px;color:#111111;}.elementor-6343 .elementor-element.elementor-element-d620449{width:var( --container-widget-width, 555px );max-width:555px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;--container-widget-width:555px;--container-widget-flex-grow:0;font-family:"Siraaya", sans-serif;color:#3D3D3D;}.elementor-6343 .elementor-element.elementor-element-d620449 p{margin-block-end:0px;}.elementor-6343 .elementor-element.elementor-element-4f9d86d{--additional-information-display:block;}.elementor-6343 .elementor-element.elementor-element-e247991 .elementor-heading-title{font-family:"Inter", sans-serif;}@media(max-width:880px){.elementor-6343 .elementor-element.elementor-element-3e85017 .elementor-heading-title{font-size:32px;line-height:40px;}}@media(min-width:768px){.elementor-6343 .elementor-element.elementor-element-8937e58{--content-width:1260px;}}/* Start custom CSS for woocommerce-checkout-page, class: .elementor-element-4f9d86d */span.woocommerce-Price-amount.amount {
    font-weight: 600 !important;
}
button span{
    color: black !important;
}
.elementor-6343 .elementor-element.elementor-element-4f9d86d button:hover, .elementor-6343 .elementor-element.elementor-element-4f9d86d button:focus{
    background-color: #F6F6F5 !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d888cee *//* ==========================================================================
   MEHRAAZ — Checkout Restyle (v2 — hardened)
   Built to match the live site's visual system:
   - Ink black / paper white / soft mist gray, no colour accent
   - Siraaya for section titles ("Billing Details", "Your Order", "Total")
   - Inter for everything else — body copy, labels, buttons, and every
     number (prices, quantities)
   - Buttons: solid black, sharp corners, sentence case (matches "Add to
     cart"); small secondary actions are uppercase + tracked (matches
     the footer "SUBMIT" button)
   - Panels use a 20px radius mist-gray fill (matches the FAQ block);
     inputs/buttons stay sharp (2–3px) like the size .elementor-6343 .elementor-element.elementor-element-d888cee & CTA

   WHAT CHANGED IN v2
   Elementor Pro ships its own default styling for this exact checkout
   widget (grey input fills, a blue button, boxed sections) scoped to
   your specific widget ID — which is MORE specific than plain class
   .elementor-6343 .elementor-element.elementor-element-d888cees, so it was winning over v1 in several places. This version
   adds `!important` to the properties that define the look (colour,
   background, border, radius, font) so they hold regardless of load
   order. It also removes the floating-label's dependency on JS — it
   now works from CSS alone via `:has()`, so it degrades safely even if
   the JS file never loads.

   HOW TO USE
   1. Paste this whole file into Elementor → Site Settings → Custom CSS
      (preferred — loads on every page) or Appearance → Customize →
      Additional CSS. No build step needed.
   2. Inter is referenced directly (`font-family: "Inter", sans-serif`),
      not loaded from Google Fonts — no @import, no <link> tag needed.
      Same situation as Siraaya below: if Inter isn't already available
      on a visitor's device, text falls back to the browser's default
      sans-serif rather than showing an error, so this degrades safely
      either way.
      Siraaya is NOT on Google Fonts — it isn't loaded by this file at
      all. If it's not already active on your site (via Elementor's
      custom-fonts uploader, a @font-face rule, or a font plugin),
      headings will silently fall back to the browser's default
      sans-serif instead of showing an error.
   3. Add mehraz-checkout.js right before </body> (Elementor → Custom
      Code, or a "footer scripts" plugin). IMPORTANT: the WordPress
      Customizer's "Additional CSS" box only accepts CSS — pasting JS
      there does nothing. It needs a spot that outputs an actual
      <script> tag.
   4. Everything below is scoped to the checkout widget, so it won't
      leak out and restyle the rest of the site.
   ========================================================================== */

/* No @import — Inter is referenced directly rather than loaded from
   Google Fonts (the @import approach was unreliable on this site). If
   Inter isn't available on a visitor's device, it falls back to the
   browser's default sans-serif automatically. */

/* ---------- Design tokens ---------- */
.woocommerce-checkout,
.woocommerce-checkout * {
  box-sizing: border-box;
}

.woocommerce-checkout {
  --mz-ink: #0a0a0a;
  --mz-black: #000000;
  --mz-paper: #ffffff;
  --mz-mist: #f6f6f5;
  --mz-mist-dark: #efefed;
  --mz-line: #e6e6e4;
  --mz-border: #d9d9d7;
  --mz-muted: #7a7a78;
  --mz-muted-2: #a6a6a3;
  --mz-error: #b3261e;
  --mz-radius-sm: 10px;
  --mz-radius-md: 16px;
  --mz-radius-lg: 24px;
  --mz-font-display: "Siraaya", sans-serif;
  --mz-font-sans: "Inter", sans-serif;
  --mz-font-numbers: "Inter", sans-serif;
  --mz-ease: cubic-bezier(.4, 0, .2, 1);

  font-family: var(--mz-font-sans) !important;
  color: var(--mz-ink) !important;
  background: var(--mz-paper);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce-checkout * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Defensive reset ----------
   Elementor Pro draws its own border/shadow/background around several
   of these wrapper elements by default. Strip that first, then apply
   our own look only where we actually want it (order review panel,
   coupon box, payment notice). */
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .e-checkout__column,
.woocommerce-checkout .e-checkout__column-inner,
.woocommerce-checkout .e-checkout__order_review-2 {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ---------- Layout ---------- */
.woocommerce-checkout .e-checkout__container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: start;
}

.woocommerce-checkout .e-checkout__column-end {
  position: sticky;
  top: 32px;
}

@media (max-width: 900px) {
  .woocommerce-checkout .e-checkout__container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .woocommerce-checkout .e-checkout__column-end {
    position: static;
  }
}

/* ---------- Section titles ---------- */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--mz-font-display) !important;
  font-weight: 500 !important;
  font-size: 28px !important;
  letter-spacing: -0.01em;
  color: var(--mz-ink) !important;
  margin: 0 0 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mz-line);
}

.woocommerce-checkout .woocommerce-additional-fields h3:empty {
  display: none;
}

/* ---------- Form rows & floating labels ---------- */
.woocommerce-checkout .form-row {
  position: relative;
  margin: 0 0 28px;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.woocommerce-checkout .form-row-wide,
.woocommerce-checkout #order_comments_field {
  grid-column: 1 / -1;
}

/* WooCommerce's own default CSS sets width:47% + float on these two —
   inside our grid that left each box filling only 47% of its column,
   which is what was causing the big gap between First/Last Name. */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  width: 100% !important;
  float: none !important;
}

/* Section cards — billing details and order notes each get a visible
   border, matching the boxed look of the individual fields inside them. */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields {
  border: 1px solid var(--mz-border) !important;
  border-radius: var(--mz-radius-md) !important;
  background: var(--mz-paper) !important;
  padding: 32px !important;
  margin-bottom: 24px !important;
}

.woocommerce-checkout .form-row label {
  position: absolute;
  left: 17px;
  top: 16px;
  font-size: 15px;
  color: var(--mz-muted) !important;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 160ms var(--mz-ease), color 160ms var(--mz-ease), top 160ms var(--mz-ease);
  background: var(--mz-paper) !important;
  padding: 0 4px;
  margin-left: -4px;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}

/* Payment method labels (e.g. "Cash on delivery") aren't form-field
   labels — they sit inline next to their radio button, not floating. */
.woocommerce-checkout .wc_payment_methods label {
  position: static;
  display: inline;
  color: var(--mz-ink) !important;
  background: none !important;
  padding: 0;
  margin-left: 8px;
}

.woocommerce-checkout label .required,
.woocommerce-checkout label .optional {
  color: var(--mz-muted-2) !important;
}

/* Floats on focus or once JS marks the row — kept as a belt-and-braces
   layer alongside the CSS-only :has() rule below. */
.woocommerce-checkout .form-row.is-focused label,
.woocommerce-checkout .form-row.has-value label,
/* CSS-only fallback: floats without any JS, using :has(). Covers modern
   evergreen browsers; on older ones the label still sits legibly over
   the (now invisible-placeholder) input at rest. */
.woocommerce-checkout .form-row:has(input:focus) label,
.woocommerce-checkout .form-row:has(textarea:focus) label,
.woocommerce-checkout .form-row:has(input:not(:placeholder-shown)) label,
.woocommerce-checkout .form-row:has(textarea:not(:placeholder-shown)) label {
  top: -9px !important;
  font-size: 11px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mz-ink) !important;
}

.woocommerce-checkout .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea.input-text,
.woocommerce-checkout select {
  width: 100%;
  font-family: var(--mz-font-sans) !important;
  font-size: 15px;
  color: var(--mz-ink) !important;
  background: var(--mz-paper) !important;
  border: 1px solid var(--mz-border) !important;
  border-radius: var(--mz-radius-sm) !important;
  box-shadow: none !important;
  padding: 16px 16px 15px;
  transition: border-color 160ms var(--mz-ease), box-shadow 160ms var(--mz-ease);
}

/* Kills the native placeholder visually (its only job now is to drive
   :placeholder-shown above) so it can never sit underneath the label. */
.woocommerce-checkout input.input-text::placeholder,
.woocommerce-checkout textarea.input-text::placeholder {
  color: transparent !important;
}

.woocommerce-checkout textarea.input-text {
  min-height: 96px;
  resize: vertical;
}

.woocommerce-checkout input.input-text:hover,
.woocommerce-checkout textarea.input-text:hover {
  border-color: var(--mz-muted-2) !important;
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea.input-text:focus {
  outline: none;
  border-color: var(--mz-ink) !important;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06) !important;
}

.woocommerce-checkout .form-row.has-error input.input-text,
.woocommerce-checkout .form-row.has-error textarea.input-text {
  border-color: var(--mz-error) !important;
}

.woocommerce-checkout :focus-visible {
  outline: 2px solid var(--mz-ink);
  outline-offset: 2px;
}

/* Order notes textarea gets its own eyebrow label, not floating */
.woocommerce-checkout #order_comments_field label {
  position: static;
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mz-muted) !important;
  margin-bottom: 8px;
  background: none !important;
  padding: 0;
}

/* Select2 boxes always show their own value/placeholder text, so their
   labels sit permanently in the floated position instead of overlapping
   the box the way a text-input label rests on an empty field. */
.woocommerce-checkout #billing_country_field label,
.woocommerce-checkout #billing_state_field label {
  top: -9px !important;
  font-size: 11px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mz-ink) !important;
}

/* ---------- Select2 (Country / State) ---------- */
/* Belt-and-braces: hides the native <select> the same way select2 itself
   does, so it never doubles up with the styled dropdown below it even if
   select2's own stylesheet hasn't loaded yet. */
.woocommerce-checkout select.select2-hidden-accessible {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

.woocommerce-checkout .select2-container {
  width: 100% !important;
}

.woocommerce-checkout .select2-container .select2-selection--single {
  height: 54px !important;
  border: 1px solid var(--mz-border) !important;
  border-radius: var(--mz-radius-sm) !important;
  background: var(--mz-paper) !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  transition: border-color 160ms var(--mz-ease);
}

.woocommerce-checkout .select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container .select2-selection--single:hover {
  border-color: var(--mz-ink) !important;
}

.woocommerce-checkout .select2-selection__rendered {
  padding-left: 16px;
  padding-top: 6px;
  font-size: 15px;
  color: var(--mz-ink) !important;
}

.woocommerce-checkout .select2-selection__arrow {
  height: 52px !important;
  right: 12px !important;
}

.woocommerce-checkout .select2-dropdown {
  border: 1px solid var(--mz-ink) !important;
  border-radius: var(--mz-radius-sm) !important;
  overflow: hidden;
}

.woocommerce-checkout .select2-results__option--highlighted {
  background: var(--mz-ink) !important;
  color: var(--mz-paper) !important;
}

/* ---------- Buttons ---------- */
.woocommerce-checkout button[type="submit"],
.woocommerce-checkout #place_order {
  font-family: var(--mz-font-sans) !important;
  cursor: pointer;
  border: 1px solid var(--mz-ink) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background 160ms var(--mz-ease), color 160ms var(--mz-ease),
              transform 160ms var(--mz-ease), box-shadow 160ms var(--mz-ease);
}

/* Primary: Place order — matches "Add to cart": solid black, sentence case */
.woocommerce-checkout #place_order {
  width: 100%;
  background: var(--mz-black) !important;
  color: var(--mz-paper) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
  border-radius: var(--mz-radius-sm) !important;
  padding: 19px 24px !important;
  margin-top: 8px;
}

.woocommerce-checkout #place_order:hover {
  background: #1a1a1a !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
}

.woocommerce-checkout #place_order:active {
  transform: translateY(0);
  box-shadow: none !important;
}

/* Secondary: Apply coupon / Update totals — tracked uppercase, matches footer "SUBMIT" */
.woocommerce-checkout .e-apply-coupon,
.woocommerce-checkout button[name="woocommerce_checkout_update_totals"] {
  background: var(--mz-paper) !important;
  color: var(--mz-ink) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase !important;
  border-radius: var(--mz-radius-sm) !important;
  padding: 0 20px !important;
  height: 52px;
}

.woocommerce-checkout .e-apply-coupon:hover,
.woocommerce-checkout button[name="woocommerce_checkout_update_totals"]:hover {
  background: var(--mz-ink) !important;
  color: var(--mz-paper) !important;
}

/* ---------- Coupon field (always visible, no click-to-expand) ---------- */
/* Standalone look — used as a fallback if JS never moves this box inside
   the order review panel (see .e-checkout__order_review .e-coupon-box
   below, which overrides this once it's nested there). */
.woocommerce-checkout .e-coupon-box {
  border: 1px solid var(--mz-border) !important;
  border-radius: var(--mz-radius-sm) !important;
  background: var(--mz-paper) !important;
  box-shadow: none !important;
  margin: 24px 0;
  padding: 18px 20px !important;
}

/* The "Have a coupon? Click here…" nudge is no longer needed — the field
   is always shown — so its own description label stands in for it. */
.woocommerce-checkout .e-woocommerce-coupon-nudge {
  display: none;
}

.woocommerce-checkout .e-coupon-anchor-description {
  display: block;
  font-size: 13px;
  color: var(--mz-muted) !important;
  margin-bottom: 12px;
}

/* Always expanded — CSS-only, so this holds even if the JS that used to
   toggle it never loads. */
.woocommerce-checkout .e-coupon-anchor {
  display: block !important;
  overflow: visible !important;
  max-height: none !important;
  opacity: 1 !important;
  margin-top: 0 !important;
}

/* Once JS appends .e-coupon-box into the order review panel, blend it
   in — drop its own border/background and use a top divider instead. */
.woocommerce-checkout .e-checkout__order_review .e-coupon-box {
  border: none !important;
  border-top: 1px solid var(--mz-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin: 24px 0 0 !important;
  padding: 20px 0 0 !important;
}

.woocommerce-checkout .coupon-container-grid {
  display: flex;
  gap: 0px;
}

.woocommerce-checkout .coupon-col-1 { flex: 1; }

.woocommerce-checkout #coupon_code {
  height: 52px;
}

/* ---------- Order review panel ---------- */
.woocommerce-checkout .e-checkout__order_review {
  background: var(--mz-mist) !important;
  border: 1px solid var(--mz-border) !important;
  box-shadow: none !important;
  border-radius: var(--mz-radius-lg) !important;
  padding: 32px !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table thead {
  display: none;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item {
  border-bottom: 1px solid var(--mz-line);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
  padding: 16px 0;
  font-size: 15px;
  color: var(--mz-ink) !important;
}

.woocommerce-checkout .product-quantity {
  color: var(--mz-muted) !important;
  font-weight: 400;
  font-family: var(--mz-font-numbers) !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total {
  padding: 16px 0;
  text-align: right;
  font-weight: 500;
  white-space: nowrap;
  color: var(--mz-ink) !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr {
  border-bottom: 1px solid var(--mz-line);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:last-child {
  border-bottom: none;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
  padding: 14px 0;
  text-align: right;
  font-weight: 400;
  color: var(--mz-muted) !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
  text-align: left;
}

.woocommerce-checkout .order-total th {
  font-family: var(--mz-font-display) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--mz-ink) !important;
  padding-top: 18px;
}

/* Amount stays in the numbers font, not the display heading font —
   custom/display fonts often lack a glyph for the ₨ rupee sign, silently
   falling back to a mismatched font for just that symbol ("Rs" vs "₨"
   elsewhere). Inter has full support, so every amount stays consistent. */
.woocommerce-checkout .order-total td {
  font-family: var(--mz-font-numbers) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--mz-ink) !important;
  padding-top: 18px;
}

.woocommerce-checkout .woocommerce-Price-amount {
  color: inherit !important;
  font-family: var(--mz-font-numbers) !important;
}

/* Mobile collapsible summary toggle (injected by JS) */
.mz-summary-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background: var(--mz-mist);
  border: none;
  border-radius: var(--mz-radius-lg);
  padding: 18px 24px;
  font-family: var(--mz-font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 12px;
}

.mz-summary-toggle .mz-caret {
  transition: transform 200ms var(--mz-ease);
}

.mz-summary-toggle[aria-expanded="true"] .mz-caret {
  transform: rotate(180deg);
}

@media (max-width: 900px) {
  .mz-summary-toggle { display: flex; }
  .woocommerce-checkout .e-checkout__order_review {
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    transition: max-height 280ms var(--mz-ease), padding 280ms var(--mz-ease);
  }
  .woocommerce-checkout .e-checkout__order_review.is-open {
    max-height: 1000px;
    padding: 32px !important;
    margin-bottom: 16px;
  }
}

/* ---------- Payment section ---------- */
.woocommerce-checkout #payment {
  margin-top: 28px;
  border-top: 1px solid var(--mz-line) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 24px 0 0 !important;
}

.woocommerce-checkout .wc_payment_methods {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.woocommerce-checkout .wc_payment_methods li {
  border: 1px solid var(--mz-border) !important;
  border-radius: var(--mz-radius-sm) !important;
  background: transparent !important;
  padding: 16px;
  margin-bottom: 10px;
}

.woocommerce-checkout .woocommerce-info {
  font-size: 14px;
  color: var(--mz-muted) !important;
  background: var(--mz-mist) !important;
  border-radius: var(--mz-radius-sm) !important;
  padding: 16px !important;
  border: 1px solid var(--mz-border) !important;
  box-shadow: none !important;
  list-style: none;
}

.woocommerce-checkout .woocommerce-privacy-policy-text {
  font-size: 12px;
  color: var(--mz-muted-2) !important;
  line-height: 1.6;
  margin: 16px 0;
}

.woocommerce-checkout .woocommerce-privacy-policy-text a {
  color: var(--mz-ink) !important;
}

/* ---------- Trust row (echoes the PDP's own delivery / returns copy) ---------- */
.mz-trust {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.mz-trust li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--mz-muted);
}

.mz-trust li::before {
  content: "✓";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--mz-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--mz-ink);
}

/* ---------- Fade-in on load ---------- */
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2,
.woocommerce-checkout .e-checkout__order_review {
  animation: mz-rise 480ms var(--mz-ease) both;
}
.woocommerce-checkout .col-2 { animation-delay: 60ms; }
.woocommerce-checkout .e-checkout__order_review { animation-delay: 100ms; }

@keyframes mz-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Siraaya';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://mehraaz.pk/wp-content/uploads/2025/12/0775c9a1d53fe390-s.p.woff2') format('woff2');
}
/* End Custom Fonts CSS */