@charset "UTF-8";
/* ==========================================================================
   MONRA UI LAYER — v2.0.0
   Implements design-system/DESIGN-SYSTEM.md v1.1 (92/92 validated).

   Presentation only. Nothing here alters products, prices, stock, cart or
   checkout behaviour.

   `!important` appears deliberately and only where the parent theme sets a
   value inline on the element (the grid custom properties) or where WoodMart
   ships an equally specific rule later in the cascade. It is not used
   defensively anywhere else.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Neutrals — warm (~30deg) to flatter the measured tan/blush product tones */
  --m-white: #FFFFFF;
  --m-ivory-50: #FAF8F4;
  --m-ivory-100: #F4F1EA;
  --m-ivory-200: #D5CCBD;
  --m-stone-300: #D6CFC4;
  --m-stone-400: #8A8279;
  --m-stone-500: #746D65;
  --m-stone-600: #57514B;
  --m-stone-700: #3D3833;
  --m-ink-900: #1A1714;

  --m-gold-800: #7A5209;
  --m-gold-600: #A16207;
  --m-gold-400: #E9C46A;
  --m-gold-100: #F7EBD0;

  --m-emerald-800: #0B4A3A;
  --m-wine-800: #6B2412;
  --m-success-700: #15683F;
  --m-danger-700: #A3231B;

  --m-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --m-font-body: Montserrat, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --m-lh-display: 1.10;
  --m-lh-heading: 1.25;
  --m-lh-body: 1.60;
  --m-ls-display: -0.02em;
  --m-ls-caps: 0.08em;

  --m-radius-sm: 8px;
  --m-radius-md: 10px;
  --m-radius-lg: 14px;
  --m-radius-xl: 20px;
  --m-radius-pill: 999px;

  --m-shadow-1: 0 1px 2px rgba(26,23,20,.04), 0 1px 3px rgba(26,23,20,.06);
  --m-shadow-2: 0 2px 4px rgba(26,23,20,.04), 0 8px 16px rgba(26,23,20,.06);
  --m-shadow-3: 0 4px 8px rgba(26,23,20,.05), 0 16px 32px rgba(26,23,20,.10);

  --m-ease-entrance: cubic-bezier(.16, 1, .30, 1);
  --m-ease-standard: cubic-bezier(.40, 0, .20, 1);

  /* Semantic */
  --surface-canvas: var(--m-ivory-50);
  --surface-card: var(--m-white);
  --surface-sunken: var(--m-ivory-100);
  --surface-inverse: var(--m-ink-900);

  --text-display: var(--m-ink-900);
  --text-strong: var(--m-stone-700);
  --text-body: var(--m-stone-600);
  --text-muted: var(--m-stone-500);
  --text-accent: var(--m-gold-800);

  --border-hairline: var(--m-ivory-200);
  --border-strong: var(--m-stone-400);
  --focus-ring: var(--m-gold-600);

  /* Motion — collapsed by the reduced-motion block at the end of this file */
  --dur-fast: 180ms;
  --dur-base: 240ms;
  --dur-slow: 360ms;
  --dur-reveal: 560ms;
  --dur-shimmer: 1400ms;

  /* Component — namespaced so nothing collides with the parent theme's own
     custom properties by accident. */
  --monra-card-radius: var(--m-radius-lg);
  --monra-card-pad: 16px;
  --monra-btn-height: 44px;
  --monra-icon-btn-size: 44px;
  --monra-toolbar-height: 56px;

  /* DELIBERATE integration, not a collision: `--btn-height` is WoodMart's own
     button-height API (its base rule reads `min-height: var(--btn-height,
     42px)`). Setting it here raises every themed button to the 44px touch
     floor through the theme's supported mechanism rather than by overriding
     each button rule individually. */
  --btn-height: 44px;
}

/* --------------------------------------------------------------------------
   2. CANVAS & TYPOGRAPHY
   -------------------------------------------------------------------------- */

body.monra-ui {
  background-color: var(--surface-canvas);
  font-family: var(--m-font-body);
  font-weight: 400;              /* was 300 — the washed-out culprit */
  line-height: var(--m-lh-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.monra-ui h1, .monra-ui h2, .monra-ui h3,
.monra-ui .wd-title-wrapp .title,
.monra-ui .woodmart-title-container,
.monra-ui .title.slider-title {
  font-family: var(--m-font-display);
  font-weight: 600;
  line-height: var(--m-lh-heading);
  letter-spacing: var(--m-ls-display);
  color: var(--text-display);
}

.monra-ui h1,
.monra-ui .slider-title,
.monra-ui .wd-slide .title {
  line-height: var(--m-lh-display);
}

.monra-ui h1 { font-size: clamp(34px, 4.6vw, 60px); }
.monra-ui h2 { font-size: clamp(24px, 3.2vw, 32px); }
.monra-ui h3 { font-size: clamp(20px, 2.4vw, 24px); }

.monra-ui p { color: var(--text-body); }

.monra-ui a { transition: color var(--dur-fast) var(--m-ease-standard); }

/* Section rules use a gold gradient hairline rather than a hard border. */
.monra-ui .wd-title-wrapp .liner-continer:after,
.monra-ui .title-wrapper .wd-title-line:after {
  background: linear-gradient(90deg, transparent, var(--m-gold-600), transparent);
  height: 1px;
}

/* --------------------------------------------------------------------------
   3. RESPONSIVE PRODUCT GRID  — the primary defect (D2)
   --------------------------------------------------------------------------
   WoodMart writes the column knobs as an INLINE style attribute on the grid
   element:
     style="--wd-col-lg:4;--wd-col-md:4;--wd-col-sm:2;..."
   Verified live: a :root override is a no-op, and an element-targeted rule
   without !important is also a no-op. Element + !important is the only thing
   that wins, so both are required here.

   Resolution chain in the parent theme:
     base        --wd-col: var(--wd-col-lg)
     <=1024px    --wd-col: var(--wd-col-md)
     <=768.98px  --wd-col: var(--wd-col-sm)
     <=576px     --wd-col: var(--wd-col-xs)
   -------------------------------------------------------------------------- */
.monra-ui .products.wd-grid-g,
.monra-ui .wd-products.wd-grid-g {
  --wd-col-md: 3 !important;   /* tablet: was 4 -> 199px cards */
  --wd-col-sm: 2 !important;
  /* <=576px is 2-up by request. This was briefly 1-up because at 2-up the
     "Select options" label (105.7px, measured) did not fit a 163px card. The
     card is therefore COMPACTED below 576px — see §4b — rather than leaving
     the CTA to truncate. Do not raise the paddings there without re-measuring
     the label. */
  --wd-col-xs: 2 !important;
}

/* Two bands exist for the same reason: a column count must never be adopted
   before it yields at least a 240px card. Both are derived, not guessed —
   container = viewport - 45px chrome.

   769-804px: WoodMart enters --wd-col-md at 769px, where 3 columns give only
   (724-40)/3 = 228px. Hold 2 columns until 3 columns reach 240px, which
   happens at 805px ((760-40)/3 = 240). */
@media (min-width: 769px) and (max-width: 804.98px) {
  .monra-ui .products.wd-grid-g,
  .monra-ui .wd-products.wd-grid-g {
    --wd-col-md: 2 !important;
  }
}

/* 1025-1079px: WoodMart switches to --wd-col-lg at 1025px, where 4 columns
   give only ~230px. Windows display scaling lands here routinely
   (1366@125% = 1093, 1600@150% = 1067), so hold 3 columns to 1080px, where
   4 columns reach (1035-60)/4 = 244px. */
@media (min-width: 1025px) and (max-width: 1079.98px) {
  .monra-ui .products.wd-grid-g,
  .monra-ui .wd-products.wd-grid-g {
    --wd-col-lg: 3 !important;
  }
}

/* --------------------------------------------------------------------------
   4. PRODUCT CARD
   -------------------------------------------------------------------------- */
.monra-ui .wd-product {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--monra-card-radius);
  padding: var(--monra-card-pad);
  box-shadow: var(--m-shadow-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur-base) var(--m-ease-standard),
              transform var(--dur-base) var(--m-ease-standard),
              border-color var(--dur-base) var(--m-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .monra-ui .wd-product:hover {
    box-shadow: var(--m-shadow-3);
    border-color: var(--m-gold-600);
    transform: translateY(-2px);
  }
}

/* Media well. The product photography was measured on pure white (#fefefe),
   so the well must be white too or every image shows a visible rectangle. */
.monra-ui .wd-product .product-element-top {
  background: var(--m-white);
  border-radius: var(--m-radius-md);
  overflow: hidden;
  position: relative;
}

.monra-ui .wd-product .product-element-top img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--dur-slow) var(--m-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .monra-ui .wd-product:hover .product-element-top img { transform: scale(1.04); }
}

/* Title — a fixed two-line box. Clamping alone only truncates long titles and
   leaves short ones short, which is what left the mobile grid ragged (D4). */
.monra-ui .wd-product .wd-entities-title {
  font-family: var(--m-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: var(--m-lh-body);
  letter-spacing: 0;
  color: var(--text-display);
  margin: 14px 0 6px;
  min-height: calc(16px * var(--m-lh-body) * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.monra-ui .wd-product .wd-entities-title a { color: inherit; }

.monra-ui .wd-product .wd-product-cats,
.monra-ui .wd-product .wd-product-cats a {
  font-size: 12px;
  letter-spacing: var(--m-ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Price — the key conversion element. Was 13px uppercase and smaller than
   the title; now 18px and the most prominent text in the card. */
.monra-ui .wd-product .price {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  color: var(--text-display);
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.monra-ui .wd-product .price del,
.monra-ui .wd-product .price del .amount {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);   /* 5.10:1 — the old #8A8279 failed at 3.78:1 */
  opacity: 1;
  text-decoration: line-through;
}

.monra-ui .wd-product .price ins,
.monra-ui .wd-product .price ins .amount {
  text-decoration: none;
  font-weight: 600;
  color: var(--text-display);
}

/* --------------------------------------------------------------------------
   4b. COMPACT CARD AT 2-UP (<=576px)
   At 2-up a 375px viewport gives a 162.5px card. With the default 16px card
   padding and 20px button padding that leaves 91px for a CTA label that
   measures 105.7px, so the button would truncate to "Select option…".
   Trimming the paddings and dropping the button to 13px yields ~118px of label
   room against ~95px needed — it fits with headroom, at full 44px height.
   Touch targets are NOT reduced here; only whitespace and type size are.
   -------------------------------------------------------------------------- */
@media (max-width: 576.98px) {
  .monra-ui .wd-product {
    padding: 12px;
  }

  .monra-ui .wd-product[class*="wd-hover-"] .wd-add-btn > a.button,
  .monra-ui .wd-product[class*="wd-hover-"] .wd-add-btn > a.add-to-cart-loop,
  .monra-ui .wd-product .wd-add-btn > a {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* 3 x 44px icons + gaps must clear the card's content box. */
  .monra-ui .wd-product .wd-buttons,
  .monra-ui .wd-product[class*="wd-hover-"] .wd-buttons {
    gap: 2px;
  }

  /* Category eyebrow is noise at this size; the title carries the meaning. */
  .monra-ui .wd-product .wd-product-cats {
    font-size: 11px;
  }

  /* Reserve two lines for the price, exactly as the title does.
     On a narrow 2-up card a sale item renders `<del>was</del> <ins>now</ins>`
     inline; longer amounts (₨3,999.00 ₨2,699.00) wrap to a second line while
     shorter ones do not, so card heights diverged by 27px — measured 490 vs
     517 at 430px. This is the same defect class as D4 and takes the same
     remedy: reserve the space so the row is deterministic whether or not it
     wraps. Cheaper and less disruptive than force-stacking every price. */
  .monra-ui .wd-product .price {
    min-height: 54px;
    align-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   5. BUTTONS & TOUCH TARGETS  — defect D1 (17px tap target)
   -------------------------------------------------------------------------- */
/* The catalogue uses WoodMart's "hover-alt" loop layout, whose stylesheet
   ships `.wd-product.wd-hover-alt .wd-add-btn > a { min-height:unset;
   padding:0; background:transparent }` at specificity (0,3,1) and loads
   AFTER the child theme. Matching that specificity would lose on source
   order, so these selectors deliberately carry the hover-layout class and
   the `.button` class to win at (0,5,1) — on specificity, not `!important`.
   The `[class*="wd-hover-"]` form covers every loop layout the theme offers,
   so switching layouts in theme options cannot silently undo the fix. */
.monra-ui .wd-product[class*="wd-hover-"] .wd-add-btn > a.button,
.monra-ui .wd-product[class*="wd-hover-"] .wd-add-btn > a.add-to-cart-loop,
.monra-ui .wd-product .wd-bottom-actions a.button,
.monra-ui .wd-product .wd-add-btn > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--monra-btn-height);
  height: auto;
  padding: 0 20px;
  margin-top: 12px;
  border: 0;
  border-radius: var(--m-radius-md);
  background: var(--m-ink-900);
  color: var(--m-white);
  font-family: var(--m-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;          /* no tracking: the label is width-critical */
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  /* `transform` must be listed HERE, not only in the motion layer: this rule
     is (0,5,1) and uses the `transition` shorthand, so it resets the property
     list and outranks the lower-specificity declaration in §18a. Without it
     the :active press had nothing to animate and snapped. */
  transition: background var(--dur-fast) var(--m-ease-standard),
              color var(--dur-fast) var(--m-ease-standard),
              transform var(--dur-fast) var(--m-ease-standard);
}

.monra-ui .wd-product[class*="wd-hover-"] .wd-add-btn > a.button:hover,
.monra-ui .wd-product[class*="wd-hover-"] .wd-add-btn > a.add-to-cart-loop:hover,
.monra-ui .wd-product .wd-add-btn > a:hover {
  background: #322B25;
  color: var(--m-white);
}

/* The CTA wrapper must never be hover-gated: on a touch device there is no
   hover, so a hidden wrapper means the product cannot be added to cart at
   all. Keep it in flow and always visible. */
.monra-ui .wd-product .wd-add-btn,
.monra-ui .wd-product[class*="wd-hover-"] .wd-add-btn {
  display: block;
  width: 100%;
  opacity: 1;
  visibility: visible;
  position: static;
  margin-top: auto;
  text-align: center;
}

/* The theme's icon+label markup inside the button. */
.monra-ui .wd-product .wd-add-btn > a .wd-action-text { font: inherit; color: inherit; }
.monra-ui .wd-product .wd-add-btn > a .wd-action-icon { display: none; }

/* Gold shimmer sweep. Purely decorative: it never sits under text, so it
   cannot affect any verified contrast ratio.
   Deliberately on ::before — WoodMart draws its AJAX loading spinner on
   ::after of the same element at identical specificity. Sharing the
   pseudo-element made the properties split by source order, which both broke
   the sweep (it became a 16px dot) and displaced the spinner out of an
   overflow:hidden button, so an add-to-cart would have shown no feedback. */
.monra-ui .wd-product .wd-add-btn > a::before,
.monra-ui .wd-product a.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%,
              rgba(233,196,106,0) 35%, rgba(233,196,106,.45) 50%,
              rgba(233,196,106,0) 65%, transparent 80%);
  transform: translateX(-100%);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .monra-ui .wd-product .wd-add-btn > a:hover::before,
  .monra-ui .wd-product a.button:hover::before {
    animation: monra-shimmer var(--dur-shimmer) var(--m-ease-standard);
  }
}

@keyframes monra-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Primary site-wide CTAs (product page, cart, checkout). Styling only —
   no change to behaviour. */
.monra-ui .single_add_to_cart_button,
.monra-ui .checkout-button,
.monra-ui .wc-proceed-to-checkout .button.alt {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--m-radius-md);
  background: var(--m-ink-900);
  color: var(--m-white);
  border: 1px solid var(--m-ink-900);
  font-weight: 600;
  letter-spacing: var(--m-ls-caps);
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--m-ease-standard),
              color var(--dur-fast) var(--m-ease-standard),
              transform var(--dur-fast) var(--m-ease-standard);
}

.monra-ui .single_add_to_cart_button:hover,
.monra-ui .checkout-button:hover,
.monra-ui .wc-proceed-to-checkout .button.alt:hover {
  background: #322B25;
  color: var(--m-white);
}

/* --------------------------------------------------------------------------
   6. CARD ACTION ICONS  — defect D3 (0x0 and hover-only on touch)
   -------------------------------------------------------------------------- */
.monra-ui .wd-product .wd-buttons .wd-action-btn > a,
.monra-ui .wd-product .wd-action-btn > a {
  min-width: var(--monra-icon-btn-size);
  min-height: var(--monra-icon-btn-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--m-radius-pill);
}

/* Below 1024px there is no hover, so the icon rail must be permanently
   visible and permanently hit-testable. */
/* The theme hides this rail with `visibility: hidden` (not just opacity) and
   reveals it on hover. Below 1024px there is no hover, so all three actions
   are unreachable — the measured defect was a 0x0, visibility:hidden rail.
   `!important` is required here because the theme's own rule is more
   specific and hover-scoped. */
@media (max-width: 1024px) {
  .monra-ui .wd-product .wd-buttons,
  .monra-ui .wd-product[class*="wd-hover-"] .wd-buttons {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    position: static;
    display: flex;
    /* MUST reset direction: WoodMart's `.wd-pos-r-t` sets
       `flex-direction: column` for the desktop hover rail. Inheriting it here
       stacked the three 44px actions vertically into a 140px block inside the
       image well, pushing price and CTA below the fold on a 375x812 phone. */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .monra-ui .wd-product .wd-buttons {
    transition: opacity var(--dur-base) var(--m-ease-standard),
                visibility var(--dur-base) var(--m-ease-standard);
  }
  .monra-ui .wd-product:hover .wd-buttons { opacity: 1; visibility: visible; }
}

/* --------------------------------------------------------------------------
   7. BADGES
   -------------------------------------------------------------------------- */
.monra-ui .product-labels .product-label {
  border-radius: var(--m-radius-pill);
  padding: 4px 10px;
  font-family: var(--m-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* The theme-settings stylesheet loads last and ships
   `.product-labels .product-label.onsale{background-color:#000}` at the same
   (0,3,0) specificity, so it won on source order and the badges shipped plain
   black. Carrying `.product-label` alongside the state class takes these to
   (0,4,0) and wins on specificity rather than `!important`. */
.monra-ui .product-labels .product-label.onsale {
  background-color: var(--m-wine-800);    /* 11.13:1 with white */
  color: var(--m-white);
}

.monra-ui .product-labels .product-label.new {
  background-color: var(--m-emerald-800); /* 10.22:1 with white */
  color: var(--m-white);
}

.monra-ui .product-labels .product-label.out-of-stock {
  background-color: var(--m-stone-600);
  color: var(--m-white);
}

/* --------------------------------------------------------------------------
   8. HEADER / FOOTER
   -------------------------------------------------------------------------- */
.monra-ui .whb-main-header {
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--border-hairline);
  box-shadow: none;
}

.monra-ui .whb-main-header .wd-nav > li > a {
  font-family: var(--m-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--m-ls-caps);
  color: var(--text-display);
}

@media (hover: hover) and (pointer: fine) {
  .monra-ui .whb-main-header .wd-nav > li > a:hover { color: var(--m-gold-800); }
}

.monra-ui .footer-container {
  background: var(--surface-inverse);
  border-top: 0;
  color: rgba(255,255,255,.86);
}

.monra-ui .footer-container a { color: rgba(255,255,255,.86); }

/* Gold on ink is 10.68:1; the light-surface gold (#7A5209) would be 2.58:1
   here and fail outright. */
@media (hover: hover) and (pointer: fine) {
  .monra-ui .footer-container a:hover { color: var(--m-gold-400); }
}

.monra-ui .footer-container .widget-title,
.monra-ui .footer-container h1,
.monra-ui .footer-container h2,
.monra-ui .footer-container h3 { color: var(--m-white); }

/* --------------------------------------------------------------------------
   9. FORMS
   -------------------------------------------------------------------------- */
.monra-ui input[type="text"],
.monra-ui input[type="email"],
.monra-ui input[type="tel"],
.monra-ui input[type="search"],
.monra-ui input[type="password"],
.monra-ui input[type="number"],
.monra-ui textarea,
.monra-ui select {
  min-height: var(--monra-btn-height);
  border: 1px solid var(--border-strong);   /* 3.78:1 — clears 1.4.11 */
  border-radius: var(--m-radius-md);
  /* MUST stay `background-color`, never the `background` shorthand: WoodMart
     draws the <select> dropdown chevron with `background-image`, and the
     shorthand resets it to none. Using the shorthand here stripped the arrow
     from every select on the site, including checkout Country/State, leaving
     them as flat rectangles with no affordance that they open. */
  background-color: var(--m-white);
  color: var(--text-strong);
  font-family: var(--m-font-body);
  font-size: 16px;   /* >=16px prevents iOS Safari zoom-on-focus */
  transition: border-color var(--dur-fast) var(--m-ease-standard),
              box-shadow var(--dur-fast) var(--m-ease-standard);
}

.monra-ui input::placeholder,
.monra-ui textarea::placeholder { color: var(--text-muted); opacity: 1; }

.monra-ui input:focus,
.monra-ui textarea:focus,
.monra-ui select:focus {
  border-color: var(--m-gold-600);
  box-shadow: 0 0 0 3px rgba(161,98,7,.16);
  outline: none;
}

/* --------------------------------------------------------------------------
   10. FOCUS VISIBILITY
   -------------------------------------------------------------------------- */
/* `!important` is required, not defensive: WoodMart's base.min.css ships
   `:is(a,button,input[type=submit],…):focus-visible { outline: … !important }`,
   so without it the gold ring never applied to any link, button or submit —
   keyboard users got the theme's black dotted outline while selects and
   textareas (absent from the theme's :is() list) got gold, i.e. focus styling
   was inconsistent across the same form. */
.monra-ui a:focus-visible,
.monra-ui button:focus-visible,
.monra-ui [tabindex]:focus-visible,
.monra-ui input:focus-visible,
.monra-ui select:focus-visible,
.monra-ui textarea:focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 2px;
  border-radius: var(--m-radius-sm);
}

.monra-ui .footer-container a:focus-visible { outline-color: var(--m-gold-400); }

/* --------------------------------------------------------------------------
   11. STICKY TOOLBAR CLEARANCE
   The 55px bottom toolbar would otherwise cover the final grid row.
   -------------------------------------------------------------------------- */
@media (max-width: 768.98px) {
  .monra-ui.sticky-toolbar-on .main-page-wrapper,
  .monra-ui.sticky-toolbar-on .site-content {
    padding-bottom: calc(var(--monra-toolbar-height) + 12px);
  }
}

/* --------------------------------------------------------------------------
   12. SCROLL REVEAL
   Class is applied by monra-ui.js only when IntersectionObserver exists, so
   content is never hidden from browsers that cannot reveal it.
   -------------------------------------------------------------------------- */
.monra-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--m-ease-entrance),
              transform var(--dur-reveal) var(--m-ease-entrance);
  will-change: opacity, transform;
}

.monra-reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --------------------------------------------------------------------------
   13. ACCESSIBILITY PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .monra-ui *,
  .monra-ui *::before,
  .monra-ui *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .monra-reveal { opacity: 1; transform: none; }
}

/* box-shadow is dropped in forced-colors, so the card boundary must become a
   real border or cards lose their edge entirely. */
@media (forced-colors: active) {
  .monra-ui .wd-product {
    border: 1px solid CanvasText;
    box-shadow: none;
  }
  .monra-ui a:focus-visible,
  .monra-ui button:focus-visible { outline: 2px solid CanvasText; }
}

::selection { background: var(--m-gold-100); color: var(--m-ink-900); }

/* --------------------------------------------------------------------------
   14. PARENT-THEME / PAGE-BUILDER RECONCILIATION
   Rules that exist purely to beat a competing declaration found by auditing
   the live cascade, rather than to express a new design decision.
   -------------------------------------------------------------------------- */

/* The homepage hero and its subtitle declare Josefin Sans directly in
   Elementor's per-post CSS at (0,4,0). Removing the font REQUEST without
   removing these DECLARATIONS left the largest brand element on the site
   rendering in the browser's default sans, which is worse than before. */
/* Elementor's per-post rule is
   `.elementor-907 .elementor-element.elementor-element-fb4cbe5 .title` at
   (0,4,0) and loads after this sheet. `.elementor-element` is repeated and the
   `body` element selector added to reach (0,4,1), which wins on specificity
   without `!important`. */
body.monra-ui .elementor-element.elementor-element .title,
body.monra-ui .elementor-element.elementor-element .slider-title,
body.monra-ui .elementor-element.elementor-element h1,
body.monra-ui .elementor-element.elementor-element h2 {
  font-family: var(--m-font-display);
}

body.monra-ui .elementor-element.elementor-element .wd-text-block {
  font-family: var(--m-font-body);
}

/* Quick-view and compare are hidden outright below 1024px by
   `@media(max-width:1024px) .wd-buttons :is(.wd-quick-view-icon,.wd-compare-btn)
   {display:none}`, so only wishlist was ever reachable on touch. */
@media (max-width: 1024px) {
  /* inline-flex, never block: `display:block` made each action a full-width
     row inside the rail's flex column. */
  .monra-ui .wd-product .wd-buttons .wd-quick-view-icon,
  .monra-ui .wd-product .wd-buttons .wd-compare-btn,
  .monra-ui .wd-product .wd-buttons .wd-wishlist-btn {
    display: inline-flex;
    flex: 0 0 auto;
  }
}

/* "Place order" is the final click in the funnel and was left at the theme's
   default grey while "Proceed to checkout" was already restyled. */
.monra-ui #place_order,
.monra-ui .woocommerce-checkout #place_order {
  min-height: 52px;
  border-radius: var(--m-radius-md);
  background-color: var(--m-ink-900);
  color: var(--m-white);
  border: 1px solid var(--m-ink-900);
  font-weight: 600;
  letter-spacing: var(--m-ls-caps);
  text-transform: uppercase;
}

.monra-ui #place_order:hover { background-color: #322B25; color: var(--m-white); }

/* --------------------------------------------------------------------------
   15. SINGLE PRODUCT — RESPONSIVE (Phase 3)
   Measured at 375px: the add-to-cart row is display:flex with gap:10px, and
   quantity (80px) + add-to-cart (147px) + buy-now (108px) = 355px inside a
   275px column, so it wrapped into a cramped three-item scramble with the
   primary CTA at only 147px.
   -------------------------------------------------------------------------- */
@media (max-width: 768.98px) {
  /* Primary CTA takes all remaining space beside the quantity stepper. */
  .monra-ui .woocommerce-variation-add-to-cart .single_add_to_cart_button,
  .monra-ui form.cart .single_add_to_cart_button {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Buy-now is secondary: give it its own full-width row rather than letting
     it fight for space on the same line. */
  .monra-ui .woocommerce-variation-add-to-cart .wd-buy-now-btn,
  .monra-ui form.cart .wd-buy-now-btn {
    flex: 1 1 100%;
    min-height: 52px;
  }
}

/* The reviews block measured 385px against a 345px column, caused by
   `margin: 0 -20px` on itself. `max-width:100%` alone reflows it to 345px and
   fully resolves the overflow — verified by isolating each half of the rule.
   `overflow-x:hidden` was therefore clipping nothing, while its spec side
   effect computed `overflow-y` to `auto`, turning reviews into a scroll
   container and a new BFC that would clip any absolutely-positioned child
   (tooltips, a rating popover, a reCAPTCHA badge). Removed. */
.monra-ui .woocommerce-Reviews {
  max-width: 100%;
}

/* Product-page secondary actions measured 19px tall. */
.monra-ui .product-additional-info .wd-action-btn > a,
.monra-ui .wd-compare-btn > a,
.monra-ui .wd-wishlist-btn > a,
.monra-ui .wd-action-btn.wd-style-text > a {
  min-height: var(--monra-btn-height);
  display: inline-flex;
  align-items: center;
}

/* Generic themed .btn links (e.g. "Create an Account" measured 18px) and the
   off-canvas close control (25px). */
.monra-ui a.btn,
.monra-ui .create-account-button,
.monra-ui .close-side-widget {
  min-height: var(--monra-btn-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   16. IMAGE LOADING SKELETON (Phase 3)
   Product images are lazy-loaded, so the card would otherwise show an empty
   white well. The skeleton is brand-toned rather than generic grey, and is
   removed by JS on load so the animation never runs indefinitely.
   -------------------------------------------------------------------------- */
.monra-ui .wd-product .product-element-top:not(.is-loaded) {
  background-color: var(--surface-sunken);
  background-image: linear-gradient(100deg,
      transparent 20%, rgba(255,255,255,.7) 50%, transparent 80%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  /* Finite, not infinite. JS is what normally ends the skeleton, but if
     monra-ui.js ever fails to load (LiteSpeed JS combine/defer, a CSP change,
     a rename) an infinite animation would run compositor work forever on every
     card. 8 iterations (~11s) outlasts any realistic image load and then
     stops on its own. */
  animation: monra-skeleton var(--dur-shimmer) var(--m-ease-standard) 8;
}

/* Once loaded the well returns to pure white so the photo edge disappears. */
.monra-ui .wd-product .product-element-top.is-loaded {
  background-color: var(--m-white);
  background-image: none;
  animation: none;
}

@keyframes monra-skeleton {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .monra-ui .wd-product .product-element-top:not(.is-loaded) {
    animation: none;
    background-image: none;
  }
}

/* --------------------------------------------------------------------------
   17. TOUCH TARGETS THE THEME'S BUTTON API DOES NOT REACH
   `--btn-height` only governs elements the theme treats as buttons. These
   controls were measured at 16-40px and are primary navigation or form
   controls, so they are real WCAG 2.5.5 / 2.5.8 failures rather than the
   inline-text-link exception.
   -------------------------------------------------------------------------- */

/* Mobile menu toggle and header cart/account/search — measured 40px, and the
   menu toggle is the primary navigation control on every mobile page.

   SCOPED TO <header> DELIBERATELY. The sticky bottom toolbar re-uses
   `.wd-tools-element` on its item wrappers (and `.wd-header-cart` /
   `.wd-header-my-account` on cart and account), so the earlier unscoped
   selector also hit toolbar links: `display:inline-flex` collapsed them to
   shrink-to-fit inside the toolbar's flex cells, `min-width:44px` then pinned
   them at exactly 44px, and the theme's `text-overflow:ellipsis` truncated the
   labels to "Sh…", "Wi…", "M…". Toolbar links measured 91x45 BEFORE this rule
   existed — already above the 44px floor — so they never needed it.

   An ancestor `:not()` cannot express this: `:not(.wd-toolbar) .wd-tools-element`
   still matches, via <body>. A positive ancestor scope is the only correct form.
   `.wd-header-nav-mobile` stays unscoped because WoodMart prints that panel
   outside <header>. Verified live: `.wd-toolbar` is NOT inside <header>. */
.monra-ui header .wd-tools-element > a,
.monra-ui header .wd-header-cart > a,
.monra-ui header .wd-header-my-account > a,
.monra-ui header .wd-header-search > a,
.monra-ui header .wd-mobile-menu-toggle,
.monra-ui header a.wd-mobile-menu-toggle,
.monra-ui .wd-header-nav-mobile .wd-tools-element > a,
.monra-ui .wd-header-nav-mobile .wd-mobile-menu-toggle {
  min-height: var(--monra-btn-height);
  min-width: var(--monra-btn-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   17b. NARROWEST PHONES AT 2-UP (<=360px)
   At 320px a 2-up card is only 140px wide (116px of content). Two things break
   there and neither is fixable by whitespace alone:

   1. The CTA measured 143px against a 116px box. `white-space: nowrap` makes
      the button's min-content width the full label, and a flex item's default
      `min-width: auto` refuses to shrink below that — so it overflowed and was
      clipped by the card. Dropping to 12px type plus 8px padding brings the
      natural width to ~104px, inside the box, with no ellipsis.
   2. Three 44px icons need 136px and wrapped onto a second row, adding ~48px
      to every card. 36px icons fit on one row (112px).

   The 36px icons are a deliberate, bounded trade: below WCAG 2.5.5's 44px
   ideal but comfortably above the 24px floor of 2.5.8 AA, and only on 320-360px
   viewports. The alternative — a two-row rail on a 140px card — is worse for
   both usability and appearance. Targets stay 44px at every width above 360px.

   These rules sit AFTER §5 deliberately: §5's button rule has equal
   specificity, so this must win on source order. An identical attempt inside
   §4b (which precedes §5) had no effect.
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .monra-ui .wd-product[class*="wd-hover-"] .wd-add-btn > a.button,
  .monra-ui .wd-product[class*="wd-hover-"] .wd-add-btn > a.add-to-cart-loop,
  .monra-ui .wd-product .wd-add-btn > a {
    font-size: 12px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 0;          /* allow shrink below min-content as a backstop */
  }

  .monra-ui .wd-product .wd-buttons .wd-action-btn > a,
  .monra-ui .wd-product .wd-action-btn > a {
    min-width: 36px;
    min-height: 36px;
  }

  .monra-ui .wd-product {
    padding: 10px;
  }
}

/* KNOWN, ACCEPTED: at 320px only, "My account" ellipsises to "My acc…". The
   theme pins that label box to 57.5px while the string needs 66px at its 11px
   size. This is WoodMart's own layout and its own `text-overflow: ellipsis` —
   not something this layer introduced, and it does not occur at >=375px.
   Left alone on purpose. Overriding it cleanly needs either sub-10px type
   (worse for readability than the ellipsis) or a rewrite of the toolbar item's
   internal flex layout, which is disproportionate for one label on the
   narrowest phones. The person icon carries the meaning regardless. */

/* Hero carousel pagination dots measured 16px tall — below even the relaxed
   24px floor of WCAG 2.5.8. The visual dot stays small; only the hit area
   grows, via padding rather than by scaling the dot itself. */
.monra-ui .wd-nav-pagin-item,
.monra-ui .wd-nav-pagin-item > a,
.monra-ui .swiper-pagination-bullet {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Slider arrows, social icons, back-to-top, password reveal — all measured
   40-42px, a 2-4px near-miss. */
.monra-ui .wd-btn-arrow,
.monra-ui a.wd-social-icon,
.monra-ui a.scrollToTop,
.monra-ui button.show-password-input {
  min-width: var(--monra-btn-height);
  min-height: var(--monra-btn-height);
}

/* Block-level utility links (measured 26px) — the inline-text exception does
   not apply because these are display:block. */
.monra-ui a.woocommerce-LostPassword,
.monra-ui .woocommerce-LostPassword > a {
  min-height: var(--monra-btn-height);
  display: inline-flex;
  align-items: center;
}

/* The theme's <select> chevron is stroked #bbb — 2.14:1 on white, failing
   WCAG 1.4.11 for a control affordance. Restated at the ink tone. */
.monra-ui select,
.monra-ui select.wd-variation-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2357514B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ==========================================================================
   18. MOTION LAYER (Phase 4)

   Continuous and per-interaction motion uses `transform`/`opacity` only —
   both composite on the GPU and never trigger layout or paint. Nothing here
   animates width, height, top or left.

   Two deliberate exceptions, both one-shot rather than continuous:
     * the header transitions `box-shadow`/`background-color`, but only once
       as it crosses the scroll threshold, not per frame;
     * the loading skeleton animates `background-position` (a paint property)
       and is capped at 8 iterations, running only until the image loads.
   Every rule below is disabled by the reduced-motion block in §13.
   ========================================================================== */

/* --- 18a. Press states ---------------------------------------------------
   The stylesheet previously had no `:active` state anywhere, so on a phone
   every tap felt dead until the page navigated. Press feedback is the single
   highest-value micro-interaction on a touch device because it confirms the
   tap landed before the network responds. */

.monra-ui .wd-product .wd-add-btn > a.button,
.monra-ui .wd-product a.button,
.monra-ui .single_add_to_cart_button,
.monra-ui .wd-buy-now-btn,
.monra-ui .checkout-button,
.monra-ui #place_order,
.monra-ui a.btn,
.monra-ui .wd-action-btn > a,
.monra-ui .wd-tools-element > a,
.monra-ui a.wd-social-icon,
.monra-ui .wd-btn-arrow {
  -webkit-tap-highlight-color: transparent;  /* replaced by our own feedback */
  touch-action: manipulation;                /* removes the 300ms tap delay */
  /* `transform` MUST be in the base transition-property or the press has
     nothing to animate: the :active rules below set a duration, but a
     property absent from the base declaration simply snaps. These elements
     inherit only `background`/`color` transitions from earlier rules, so
     without this the press was instant in and instant out. */
  transition-property: background-color, color, transform, box-shadow, border-color;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--m-ease-standard);
}

.monra-ui .wd-product .wd-add-btn > a.button:active,
.monra-ui .wd-product a.button:active,
.monra-ui .single_add_to_cart_button:active,
.monra-ui .wd-buy-now-btn:active,
.monra-ui .checkout-button:active,
.monra-ui #place_order:active {
  transform: scale(.972);
  transition-duration: 90ms;   /* press must feel instant; release eases back */
}

.monra-ui .wd-action-btn > a:active,
.monra-ui .wd-tools-element > a:active,
.monra-ui a.wd-social-icon:active,
.monra-ui .wd-btn-arrow:active {
  transform: scale(.92);
  transition-duration: 90ms;
}

/* The whole card responds to a press on touch, where there is no hover to
   signal interactivity. Scoped away from pointer devices so it never fights
   the desktop hover lift. */
@media (hover: none) {
  .monra-ui .wd-product:active {
    transform: scale(.988);
    transition-duration: 110ms;
  }
}

/* --- 18b. Add-to-cart confirmation ---------------------------------------
   Adding to cart is the moment the store earns money, and WoodMart's default
   feedback is a small spinner. The count badge pops and a gold ring pulses
   out of it, so the confirmation is visible even if the user's eyes are on
   the button rather than the header. Driven by JS, which listens for
   WooCommerce's own events AND watches the badge text, so it fires whether or
   not AJAX add-to-cart is enabled. */

.monra-ui .wd-cart-number,
.monra-ui [class*="wd-cart-number"] {
  /* `display` is load-bearing, not cosmetic: the desktop header badge computes
     `display: inline`, and transform does not apply to a non-replaced inline
     box. The animation object was still created and getComputedStyle still
     reported a transform, so the pop looked correct in devtools while the
     element's rect never moved — the feature was silently dead on desktop. */
  display: inline-block;
  transform-origin: center;
  position: relative;
}

.monra-ui .monra-cart-pop {
  animation: monra-cart-pop 520ms var(--m-ease-entrance);
}

@keyframes monra-cart-pop {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.42); }
  55%  { transform: scale(.94); }
  100% { transform: scale(1); }
}

/* Gold ring that expands and fades out of the badge. Pseudo-element so it
   costs nothing when idle and never affects layout. */
.monra-ui .monra-cart-pop::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: var(--m-radius-pill);
  border: 2px solid var(--m-gold-600);
  animation: monra-cart-ring 620ms var(--m-ease-entrance) forwards;
  pointer-events: none;
}

@keyframes monra-cart-ring {
  0%   { opacity: .9; transform: scale(.6); }
  100% { opacity: 0;  transform: scale(1.9); }
}

/* Button success state — a brief confirmation on the button itself. */
.monra-ui .monra-added {
  animation: monra-added-pulse 480ms var(--m-ease-entrance);
}

@keyframes monra-added-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* --- 18c. Section reveal -------------------------------------------------
   Products already reveal. This extends the same observer to section-level
   content so the page composes as you scroll instead of arriving flat.
   Uses the identical hide/failsafe contract as .monra-reveal, so content can
   never be stranded invisible. */
.monra-reveal-section {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--m-ease-entrance),
              transform var(--dur-reveal) var(--m-ease-entrance);
  will-change: opacity, transform;
}

.monra-reveal-section.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --- 18d. Header on scroll -----------------------------------------------
   Driven by a sentinel element observed with IntersectionObserver, so there
   is no scroll listener and no per-frame work. */
.monra-ui .whb-main-header {
  transition: box-shadow var(--dur-base) var(--m-ease-standard),
              background-color var(--dur-base) var(--m-ease-standard);
}

.monra-ui.monra-scrolled .whb-main-header {
  box-shadow: var(--m-shadow-2);
  background-color: rgba(255, 255, 255, .97);
}

@media (prefers-reduced-motion: reduce) {
  .monra-reveal-section { opacity: 1; transform: none; }
  .monra-ui .monra-cart-pop,
  .monra-ui .monra-cart-pop::after,
  .monra-ui .monra-added { animation: none; }
}

/* --------------------------------------------------------------------------
   19. SAFETY
   -------------------------------------------------------------------------- */
.monra-ui img,
.monra-ui video,
.monra-ui iframe { max-width: 100%; }

/* ==========================================================================
   20. HOMEPAGE HERO — MOBILE & TABLET FRAMING

   The slider's heights and per-slide background positions come from WoodMart's
   theme-settings block, which is INLINE and prints after every enqueued
   stylesheet, keyed on `#slider-73` / `#slide-NNN` (1,1,0). Two defects, both
   measured live:

   1. Heights invert. Desktop 650px, tablet 840px, mobile 720px — mobile and
      tablet are BOTH taller than desktop. At 375x812 the hero took 89% of the
      viewport, more than the visual viewport once Safari's chrome is counted.
   2. Below 768px the focal points are hardcoded PIXEL offsets (-785px on
      slide-907, -715px on slide-922) against 1920x1080 sources. Pixels do not
      scale with the viewport, so they are correct at exactly one width.
      Measured at 375px: slide-907 still captured 100% of the bag, but
      slide-922 captured only 36% — the bag was cropped almost entirely out,
      which is the defect the client reported. Percentages are
      viewport-independent and are correct at 320/375/430 alike.

   `!important` is REQUIRED here, not defensive, for two independent reasons:
     - the block being overridden uses an ID selector AND prints later, so no
       class-based rule can win on either specificity or source order;
     - if the parallax script ever writes `background-position` inline, author
       `!important` still outranks it.
   Verified live that parallax does NOT currently drive this: `.wd-slide-bg`
   measures exactly the slide box (not oversized), `transform: none`, and its
   only inline style is `transition-duration`.

   TRADE-OFF: the hero focal point and mobile height can no longer be changed
   from the slider's settings screen — those settings will appear to do nothing
   on mobile. This is intentional.
   ========================================================================== */

/* 20a. Tablet — 840px was 190px taller than desktop. 620px keeps the ramp
   monotonic: 560 (phone) -> 620 (tablet) -> 650 (desktop). Must come BEFORE
   20c: same specificity, both !important, so source order decides. */
@media (max-width: 1024.98px) {
  .monra-ui.home .wd-slide {
    min-height: 620px !important;
  }
}

/* 20b. Focal points, <=768.98px — the band where the theme ships pixel
   offsets. Note this deliberately INCLUDES an iPad at exactly 768px, where
   -785px falls outside the available horizontal overflow entirely and would
   leave a blank strip.

   Base value first, so an unrecognised or newly-added slide can never inherit
   a pixel offset. 50% is also the desktop value and is within ~1pt of
   slide-922's measured optimum, making it a safe floor if the ids below ever
   go stale. Y is normalised to 50%: with `cover` on a container narrower than
   16:9 of its own height there is zero vertical overflow, so the theme's 65px
   Y was already a no-op. */
@media (max-width: 768.98px) {
  .monra-ui.home .wd-slide .wd-slide-bg {
    background-position: 50% 50% !important;
  }

  /* Per-slide focal points, computed to CENTRE the bag — not merely to keep it
     in frame. The first pass optimised for maximum subject capture, which left
     both bags roughly 5% of image-width right of centre (~57px at 375px, and
     visible). Measuring the bag's own span (strong-subject pixels only,
     backdrop and the decorative lower band excluded) gives a bag centre of
     74.5% on slide-907 and 50.7% on slide-922. Solving
        X% = (S * renderedWidth - containerWidth / 2) / (renderedWidth - containerWidth)
     for a 560px-tall slide puts those at 89% and 51%. Re-checked at 320/375/430:
     the bag lands within ~2% of dead centre at every width and stays fully in
     frame. Attribute form rather than `#id` so this file contributes no
     ID-level specificity; `!important` alone does the work. These are the only
     id-dependent lines in the stylesheet — if the slides are rebuilt, re-read
     the ids and update them; until then both fall back to the 50% base above.
     Degraded, never broken. */
  .monra-ui.home [id="slide-907"] .wd-slide-bg {   /* bag centre at 74.5% of source */
    background-position: 89% 50% !important;
  }
  .monra-ui.home [id="slide-922"] .wd-slide-bg {   /* bag centre at 50.7% of source */
    background-position: 51% 50% !important;
  }
}

/* slide-907 needs per-band correction; slide-922 does not.
   The solved X depends on container width, so a single value only centres a
   subject at one width. slide-922's bag sits at 50.7% — essentially the image
   centre — so its solution is 51.0/51.1/51.2% at 320/375/430: one value holds
   everywhere. slide-907's bag is at 74.5%, far off-centre, so its solution
   swings 86.1 -> 89.3 -> 93.1% across the same range; left at a single value it
   measured 23px off at 430px. Two narrow bands bring it to within a few px at
   every phone width. */
@media (max-width: 360px) {
  .monra-ui.home [id="slide-907"] .wd-slide-bg {
    background-position: 86% 50% !important;
  }
}

@media (min-width: 401px) and (max-width: 576.98px) {
  .monra-ui.home [id="slide-907"] .wd-slide-bg {
    background-position: 93% 50% !important;
  }
}

/* 20c. Phone — 560px. The text overlay needs ~200px (36% of the box) and this
   leaves ~250px of viewport below the fold to signal the page continues.
   A fixed px value, not min()/dvh: a fluid height makes the optimal X drift
   (49% @720 -> 42% @560 -> 36% @480) and the values in 20b were measured at
   560. Confined to <=576.98 so 577-768px keeps 620px and does not look squat.
   All bands use `.98` so they are strict supersets of the theme's 768px/1024px
   bands — there is no width where the theme's offsets apply and ours do not. */
@media (max-width: 576.98px) {
  .monra-ui.home .wd-slide {
    min-height: 560px !important;
  }
}

/* MONRA: hide homepage newsletter / Follow Us / Read our news section */
.elementor-element-b16b5e0 { display: none; }