/* 9.693 — Safe Quick Proforma Info guide fix. Keep the 9.691 invoice geometry; the old instruction panel is only an invisible data/space placeholder, and the visible explanation card is light/readable. */ .quick-proforma-headbar { position: relative; z-index: 58; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; direction: ltr; } .quick-proforma-headbar .quick-proforma-catalog-rail { margin-bottom: 0; } #quickProformaInfo { position: relative; z-index: 59; display: inline-flex; align-items: center; justify-content: center; min-width: 58px; min-height: 38px; padding: 0 15px; border-color: rgba(222, 190, 235, .70); background: linear-gradient(180deg, rgba(148, 92, 166, .98), rgba(82, 47, 101, .98)), rgba(82, 47, 101, .98); color: rgba(255, 249, 255, .98); -webkit-text-fill-color: rgba(255, 249, 255, .98); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 10px 24px rgba(73, 40, 91, .22); font-size: .82rem; line-height: 1; font-weight: 950; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; } #quickProformaInfo:hover, #quickProformaInfo:focus-visible, #quickProformaInfo.is-active { border-color: rgba(239, 216, 248, .90); background: linear-gradient(180deg, rgba(168, 108, 185, .99), rgba(100, 58, 119, .99)), rgba(100, 58, 119, .99); color: #ffffff; -webkit-text-fill-color: #ffffff; transform: translateY(-1px); outline: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 28px rgba(58, 31, 73, .28), 0 0 0 3px rgba(168, 108, 185, .14), 0 0 24px rgba(168, 108, 185, .20); } .quick-proforma-info-step { position: absolute; top: clamp(58px, 5.4vw, 70px); left: clamp(14px, 1.4vw, 22px); z-index: 281260; width: min(360px, calc(100% - 28px)); box-sizing: border-box; padding: 12px; border: 1px solid rgba(224,188,115,.54); border-radius: 24px; background: radial-gradient(circle at 14% 0%, rgba(224,188,115,.22), transparent 42%), linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,241,228,.94)), rgba(246,241,228,.96); color: rgba(3, 18, 15, .92); -webkit-text-fill-color: rgba(3, 18, 15, .92); box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 18px 42px rgba(0,0,0,.20), 0 0 0 1px rgba(255,255,255,.28), 0 0 26px rgba(224,188,115,.16); pointer-events: auto; opacity: 0; transform: translate3d(0, -8px, 0) scale(.97); transition: opacity .28s cubic-bezier(.16,.84,.28,1), transform .34s cubic-bezier(.16,.84,.28,1); direction: rtl; text-align: right; } .quick-proforma-info-step[hidden] { display: none !important; } .quick-proforma-info-step.is-open { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } .quick-proforma-info-step.is-step-changing { animation: mrQuickProformaInfoStepRefresh .42s cubic-bezier(.22, 1, .36, 1) both; transform-origin: center top; will-change: opacity, box-shadow; } @keyframes mrQuickProformaInfoStepRefresh { 0% { opacity: .94; box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 14px 34px rgba(0,0,0,.16), 0 0 0 1px rgba(255,255,255,.24), 0 0 16px rgba(224,188,115,.10); } 48% { opacity: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 18px 42px rgba(0,0,0,.18), 0 0 0 3px rgba(224,188,115,.10), 0 0 24px rgba(224,188,115,.14); } 100% { opacity: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 18px 42px rgba(0,0,0,.20), 0 0 0 1px rgba(255,255,255,.28), 0 0 26px rgba(224,188,115,.16); } } .quick-proforma-info-step__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; direction: ltr; } .quick-proforma-info-step__badge { min-width: 48px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(31,62,55,.20); background: rgba(31,62,55,.075); color: rgba(31,62,55,.86); -webkit-text-fill-color: rgba(31,62,55,.86); font-size: .62rem; font-weight: 950; letter-spacing: .08em; direction: ltr; } .quick-proforma-info-step__title { margin: 0; color: rgba(31,62,55,.96); -webkit-text-fill-color: rgba(31,62,55,.96); font-size: .78rem; line-height: 1; font-weight: 950; letter-spacing: .02em; white-space: nowrap; } .quick-proforma-info-step__text { min-height: 42px; display: flex; align-items: center; justify-content: flex-start; color: rgba(3,18,15,.92); -webkit-text-fill-color: rgba(3,18,15,.92); font-size: clamp(.86rem, .92vw, .98rem); line-height: 1.85; font-weight: 800; } .quick-proforma-info-step__text .quick-proforma-guide-demo-btn { min-height: 23px; padding: 0 9px; margin: 0 3px; border-radius: 999px; border: 1px solid rgba(31,62,55,.20); background: rgba(31,62,55,.075); color: rgba(3,18,15,.92); -webkit-text-fill-color: rgba(3,18,15,.92); font-size: .68rem; font-weight: 950; display: inline-flex; align-items: center; vertical-align: middle; } .quick-proforma-info-step__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; } .quick-proforma-info-step__cancel, .quick-proforma-info-step__next { appearance: none; -webkit-appearance: none; min-height: 31px; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(224,210,182,.26); font-family: inherit; font-size: .72rem; line-height: 1; font-weight: 950; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .quick-proforma-info-step__cancel { background: rgba(31,62,55,.075); color: rgba(3,18,15,.84); -webkit-text-fill-color: rgba(3,18,15,.84); } .quick-proforma-info-step__next { border-color: rgba(224,188,115,.48); background: linear-gradient(180deg, rgba(245,213,144,.88), rgba(156,120,60,.86)); color: rgba(13,18,15,.92); -webkit-text-fill-color: rgba(13,18,15,.92); } .quick-proforma-info-step__cancel:hover, .quick-proforma-info-step__cancel:focus-visible, .quick-proforma-info-step__next:hover, .quick-proforma-info-step__next:focus-visible { transform: translateY(-1px); outline: 0; border-color: rgba(224,188,115,.68); box-shadow: 0 0 0 3px rgba(224,188,115,.12), 0 10px 20px rgba(0,0,0,.18); } [data-mr-sidebar-purchase-toggle-button].mr-qpg-highlight { position: relative !important; z-index: 281180 !important; animation: mrQuickProformaGuideSoftBreath 2.55s ease-in-out infinite !important; border-color: rgba(224, 188, 115, .72) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 14px 30px rgba(31,62,55,.20), 0 0 0 3px rgba(224,188,115,.14), 0 0 26px rgba(224,188,115,.18) !important; filter: drop-shadow(0 16px 24px rgba(31,62,55,.18)) !important; } .quick-proforma-guide-panel { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .quick-proforma-guide-panel * { visibility: hidden !important; } @media (min-width: 1180px) { body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-guide-panel, body:not(.rtl).mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-guide-panel { display: flex !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; } } /* 9.694 — remove blur/softness from visible Info comment-box text only. */ .quick-proforma-info-step, .quick-proforma-info-step *, .quick-proforma-info-step::before, .quick-proforma-info-step::after { filter: none !important; -webkit-filter: none !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .quick-proforma-info-step.is-open:not(.is-step-changing) { transform: none !important; } .quick-proforma-info-step__title, .quick-proforma-info-step__text, .quick-proforma-info-step__text *, .quick-proforma-info-step__badge, .quick-proforma-info-step__cancel, .quick-proforma-info-step__next { color: #03120f !important; -webkit-text-fill-color: #03120f !important; opacity: 1 !important; text-rendering: geometricPrecision; -webkit-font-smoothing: subpixel-antialiased; font-smooth: always; } .quick-proforma-info-step__text { font-weight: 950 !important; } .quick-proforma-info-step__text .quick-proforma-guide-demo-btn { background: #ffffff !important; border-color: rgba(31,62,55,.34) !important; color: #03120f !important; -webkit-text-fill-color: #03120f !important; } @media (max-width: 1099px) { .quick-proforma-headbar { display: block; } #quickProformaInfo { display: none !important; } .quick-proforma-info-step.is-body-mounted { display: block !important; width: min(406px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; padding: 14px !important; border-radius: 20px !important; overflow-x: hidden !important; overflow-y: auto !important; } .quick-proforma-info-step.is-body-mounted[hidden] { display: none !important; } .quick-proforma-info-step.is-body-mounted .quick-proforma-info-step__text { min-height: 68px !important; white-space: normal !important; overflow: visible !important; text-overflow: initial !important; font-size: clamp(.80rem, 3.45vw, .94rem) !important; line-height: 1.85 !important; } .quick-proforma-info-step.is-body-mounted .quick-proforma-info-step__text *, .quick-proforma-info-step.is-body-mounted .quick-proforma-info-step__text .quick-proforma-guide-demo-btn { white-space: normal !important; } } /* 9.695 — keep the Info comment box above the page blur layer. The page can stay softly blurred, but the visible comment card is mounted on body and rendered as a sharp fixed layer above the backdrop. */ .quick-proforma-info-step.is-body-mounted { position: fixed !important; top: var(--mr-qpg-info-card-top, 96px) !important; left: var(--mr-qpg-info-card-left, 18px) !important; z-index: 282200 !important; width: min(360px, calc(100vw - 28px)) !important; max-width: calc(100vw - 28px) !important; background: #f7f1e4 !important; color: #03120f !important; -webkit-text-fill-color: #03120f !important; isolation: isolate !important; contain: layout paint style !important; transform: translate3d(0, -8px, 0) scale(.97) !important; filter: none !important; -webkit-filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .quick-proforma-info-step.is-body-mounted.is-open:not(.is-step-changing) { transform: translate3d(0, 0, 0) scale(1) !important; } /* 9.698 — keep the Info card stable on Next; only a soft pulse refreshes the comment box. */ .quick-proforma-info-step.is-body-mounted.is-open.is-step-changing { transform: translate3d(0, 0, 0) scale(1) !important; } .quick-proforma-info-step.is-body-mounted, .quick-proforma-info-step.is-body-mounted * { filter: none !important; -webkit-filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; opacity: 1 !important; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; } .quick-proforma-info-step.is-body-mounted .quick-proforma-info-step__top, .quick-proforma-info-step.is-body-mounted .quick-proforma-info-step__text, .quick-proforma-info-step.is-body-mounted .quick-proforma-info-step__actions { position: relative !important; z-index: 1 !important; } /* 9.696 — Info card outside the table, attached to the table's physical right side; text content stays on a single clean row inside the comment box. */ .quick-proforma-info-step.is-body-mounted { width: var(--mr-qpg-info-card-width, 620px) !important; max-width: calc(100vw - 28px) !important; padding: 10px 12px !important; } .quick-proforma-info-step.is-body-mounted .quick-proforma-info-step__text { min-height: 30px !important; width: 100% !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; line-height: 1.25 !important; font-size: clamp(.78rem, .76vw, .92rem) !important; direction: rtl !important; text-align: right !important; } .quick-proforma-info-step.is-body-mounted .quick-proforma-info-step__text *, .quick-proforma-info-step.is-body-mounted .quick-proforma-info-step__text .quick-proforma-guide-demo-btn { white-space: nowrap !important; flex: 0 0 auto !important; } .quick-proforma-info-step.is-body-mounted .quick-proforma-info-step__top { margin-bottom: 6px !important; } .quick-proforma-info-step.is-body-mounted .quick-proforma-info-step__actions { margin-top: 8px !important; } /* 9.816 — keep the Normal/Wholesale control outside the Info card, but align it directly below the Cancel / Next action group on desktop. Its clickable width is 30% larger than the approved control while remaining inside the card's horizontal safe area. Mobile keeps the approved centered placement. */ .quick-proforma-guide-mode-toggle.mr-qpg-mode-floating { position: fixed !important; left: var(--mr-qpg-mode-left, 0px) !important; top: var(--mr-qpg-mode-top, 0px) !important; z-index: 282210 !important; display: inline-flex !important; visibility: visible !important; opacity: 0 !important; width: var(--mr-qpg-mode-width, auto) !important; box-sizing: border-box !important; margin: 0 !important; pointer-events: auto !important; transform: translate3d(0, 10px, 0) scale(.965); transition: opacity .28s cubic-bezier(.16,.84,.28,1), transform .34s cubic-bezier(.16,.84,.28,1); box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 14px 30px rgba(0,0,0,.18), 0 0 0 3px rgba(224,188,115,.11), 0 0 24px rgba(224,188,115,.16) !important; } .quick-proforma-guide-mode-toggle.mr-qpg-mode-floating.is-visible { opacity: 1 !important; transform: translate3d(0, 0, 0) scale(1); } .quick-proforma-guide-mode-toggle.mr-qpg-mode-floating .quick-proforma-guide-mode-toggle__btn { pointer-events: auto !important; } @media (min-width: 1100px) { .quick-proforma-guide-mode-toggle.mr-qpg-mode-floating .quick-proforma-guide-mode-toggle__btn { flex: 1 1 0 !important; min-width: 0 !important; } } /* 9.699 — move the «نمایندگی» section from Orbit into the old Quick Proforma guide slot. Keeps the original user-provided images untouched; only the visible placement changes. */ @media (min-width: 1180px) { .quick-proforma-section > .mr-home-representative-proforma-slot { --mr-orbit-side-storefront-w: clamp(435px, 39vw, 657px); position: absolute !important; z-index: 4 !important; top: clamp(0px, .25vw, 4px) !important; left: calc(100% + clamp(18px, 1.35vw, 30px)) !important; right: auto !important; translate: none !important; transform: none !important; display: block !important; width: var(--mr-orbit-side-storefront-w) !important; max-width: min(657px, calc(100vw - var(--mr-quick-proforma-target-width) - clamp(30px, 2.8vw, 56px))) !important; margin: 0 !important; pointer-events: auto !important; line-height: 0 !important; } body:not(.rtl) .quick-proforma-section > .mr-home-representative-proforma-slot { left: calc(100% + clamp(18px, 1.35vw, 30px)) !important; right: auto !important; } /* 9.700 — in the approved desktop sidebar layout, the old guide panel area is an actual second grid column. Put «نمایندگی» inside that column instead of absolute-positioning it outside the Quick Proforma shell. */ body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section > .mr-home-representative-proforma-slot { --mr-orbit-side-storefront-w: 100%; position: relative !important; z-index: 4 !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; grid-column: 2 !important; grid-row: 1 !important; align-self: start !important; justify-self: stretch !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; translate: none !important; transform: none !important; pointer-events: auto !important; } body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-orbit-side-storefront__button { width: 100% !important; max-width: 100% !important; } body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section > .quick-proforma-guide-panel { display: none !important; } } /* 9.701 — Representative capsule shape lock. Important: keeps the 9.688/9.689 open/close animations and delays untouched. Only locks the visible capsule geometry so inputs/selects/buttons do not look squeezed or deformed while the existing row animation remains in place. */ @media (min-width: 1180px) { .mr-home-representative-form__field { min-height: calc(clamp(11px, .78vw, 13px) * 1.12 + clamp(2px, .22vw, 4px) + clamp(22px, 1.45vw, 25px)) !important; overflow: visible !important; } .mr-home-representative-form__field input, .mr-home-representative-form__field select { height: clamp(22px, 1.45vw, 25px) !important; min-height: clamp(22px, 1.45vw, 25px) !important; max-height: clamp(22px, 1.45vw, 25px) !important; line-height: clamp(22px, 1.45vw, 25px) !important; border-radius: 999px !important; overflow: hidden !important; background-clip: padding-box !important; flex: 0 0 auto !important; transform: translateZ(0); backface-visibility: hidden; } .mr-home-representative-form__field select { padding-top: 0 !important; padding-bottom: 0 !important; } .mr-home-representative-form__submit, .mr-home-representative-form__cancel { height: clamp(22px, 1.45vw, 25px) !important; min-height: clamp(22px, 1.45vw, 25px) !important; max-height: clamp(22px, 1.45vw, 25px) !important; line-height: clamp(22px, 1.45vw, 25px) !important; padding-top: 0 !important; padding-bottom: 0 !important; border-radius: 999px !important; overflow: hidden !important; background-clip: padding-box !important; } } /* 9.702 — Representative field capsule settle fix. Keeps the approved 9.688/9.689 open/close animation untouched. After the opening sequence finishes, the field rows are released from the animation clip/scale layer so the input/select capsules keep the same clean geometry as the Submit/Cancel capsules. */ @media (min-width: 1180px) { .mr-home-orbit-side-storefront.is-representative-open.is-representative-settled .mr-home-representative-form__field { opacity: 1 !important; transform: none !important; clip-path: none !important; overflow: visible !important; } .mr-home-orbit-side-storefront.is-representative-open.is-representative-settled .mr-home-representative-form__field input, .mr-home-orbit-side-storefront.is-representative-open.is-representative-settled .mr-home-representative-form__field select { transform: none !important; border-radius: 999px !important; background-clip: padding-box !important; } } /* 9.705 — Representative slot bottom-align final override. 9.704 was declared before the later 9.700 representative slot rules, so it was overridden and did not move. This final override is placed after those rules and only shifts the representative grid item to the bottom of the Quick Proforma row. */ @media (min-width: 1180px) { body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section > .mr-home-representative-proforma-slot { align-self: end !important; margin-top: auto !important; margin-bottom: 0 !important; } } /* 9.713 — Representative image-internal site title higher + MR LIGHTING text. Keeps the title anchored inside the original 1254×1254 image canvas, but lifts it higher inside the transparent headroom above the real storefront. It stays display-none by default and absolutely positioned inside the image button, so it cannot change the Quick Proforma grid, invoice size, or representative column flow. */ .mr-home-representative-image-title { display: none; } @media (min-width: 1180px) { .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-orbit-side-storefront__button { position: relative !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-image-title { position: absolute !important; z-index: 7 !important; top: -5.0% !important; left: 0 !important; right: 0 !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 7.2% !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; line-height: 1 !important; direction: ltr !important; pointer-events: none !important; transform: none !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-image-title__kicker { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: clamp(8px, .72vw, 13px) !important; width: 100% !important; color: #1F3E37 !important; font-size: clamp(.54rem, .56vw, .68rem) !important; font-weight: 800 !important; letter-spacing: .28em !important; text-transform: uppercase !important; white-space: nowrap !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-image-title__kicker::before, .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-image-title__kicker::after { content: ""; flex: 1 1 auto; min-width: clamp(18px, 1.6vw, 38px); height: 1px; background: linear-gradient(90deg, rgba(31, 62, 55, 0), rgba(31, 62, 55, .82), rgba(31, 62, 55, 0)); } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-image-title__name { display: block !important; width: 100% !important; margin-top: clamp(6px, .46vw, 10px) !important; color: #101412 !important; font-size: clamp(1.02rem, 1.12vw, 1.42rem) !important; font-weight: 900 !important; letter-spacing: .20em !important; text-transform: uppercase !important; white-space: nowrap !important; text-shadow: 0 1px 0 rgba(255,255,255,.28), 0 10px 22px rgba(31,62,55,.12) !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-image-title__sub { display: block !important; width: 100% !important; margin-top: clamp(5px, .40vw, 8px) !important; color: #1F3E37 !important; font-size: clamp(.56rem, .60vw, .72rem) !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important; white-space: nowrap !important; } } /* 9.707 — Representative visible-content bottom alignment. The user-provided storefront file is kept untouched. Its 1254×1254 canvas has transparent space below the real storefront, so aligning the file canvas did not visually align the storefront with the Quick Proforma bottom. Keep the stretched side-column from 9.706, but offset only the displayed button/image by the measured transparent-bottom ratio (194px / 1254px ≈ 15.5%). */ @media (min-width: 1180px) { body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section { align-items: stretch !important; overflow: visible !important; } body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section > .mr-home-representative-proforma-slot { --mr-home-representative-visible-bottom-offset: 15.5%; align-self: stretch !important; justify-self: stretch !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: stretch !important; height: auto !important; min-height: 100% !important; margin-top: 0 !important; margin-bottom: 0 !important; overflow: visible !important; } body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-orbit-side-storefront__button { flex: 0 0 auto !important; margin-top: auto !important; margin-bottom: 0 !important; transform: translate3d(0, var(--mr-home-representative-visible-bottom-offset), 0) !important; transform-origin: center bottom !important; } } /* 9.716 — Quick Proforma invoice bottom-gap cleanup. Keeps the representative column bottom alignment from 9.707, but releases only the invoice form card from grid stretch so the outer form frame ends right after the buttons/note instead of carrying the representative image height. */ @media (min-width: 1180px) { body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section > .quick-proforma-wrap { align-self: start !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin-bottom: 0 !important; } body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section > .quick-proforma-wrap .quick-proforma-paper, body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section > .quick-proforma-wrap .quick-proforma-body { height: auto !important; min-height: 0 !important; max-height: none !important; } } /* 9.718 — Footer bottom-gap cleanup + invoice visual alignment correction. Corrects 9.717: the requested "foot" was the site footer, not the Quick Proforma foot/note area. Desktop-only. Keep the invoice card visually lowered to align with the representative section, but do not compress the invoice foot/note spacing. Remove the forced home footer viewport-height gap so the footer ends after its own visible glass content. */ @media (min-width: 1180px) { body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section > .quick-proforma-wrap { align-self: end !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin-bottom: 0 !important; } body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell > footer, body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .footer, body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .site-footer, body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .mr-lux-footer { height: auto !important; min-height: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .mr-lux-footer__glass { margin-bottom: 0 !important; } } /* 9.750 — Representative full stack bottom alignment correction. 9.749 nudged only the inner image button, so the visible stack could still stay visually unchanged in the live grid. Move the whole representative grid item as one stack, while preserving the existing transparent-canvas correction on the image itself. This aligns the representative image + internal title group with the lower edge of the Quick Proforma invoice. */ @media (min-width: 1180px) { body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section > .mr-home-representative-proforma-slot { --mr-home-representative-stack-invoice-align-nudge: clamp(42px, 3.65vw, 70px); align-self: end !important; justify-self: stretch !important; justify-content: flex-end !important; margin-top: auto !important; margin-bottom: 0 !important; overflow: visible !important; transform: translate3d(0, var(--mr-home-representative-stack-invoice-align-nudge), 0) !important; transform-origin: center bottom !important; } body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-orbit-side-storefront__button { transform: translate3d(0, var(--mr-home-representative-visible-bottom-offset, 15.5%), 0) !important; transform-origin: center bottom !important; } } /* 9.751 — Mobile representative stack under Quick Proforma invoice. The representative image + internal title + logo hotspot + drawer/form are now shown below the invoice on mobile, scaled together by the same outer slot width. Desktop alignment rules stay untouched. */ @media (max-width: 860px) { .quick-proforma-section, body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: clamp(10px, 3.2vw, 16px) !important; position: relative !important; left: auto !important; right: auto !important; width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; margin: 0 auto !important; padding: 0 0 clamp(16px, 4.2vw, 24px) !important; box-sizing: border-box !important; overflow: visible !important; transform: none !important; translate: none !important; } .quick-proforma-section > .quick-proforma-wrap, body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section > .quick-proforma-wrap { order: 1 !important; width: 100% !important; max-width: 100% !important; align-self: stretch !important; justify-self: auto !important; margin: 0 !important; transform: none !important; translate: none !important; } .quick-proforma-section > .mr-home-representative-proforma-slot, body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section > .mr-home-representative-proforma-slot { --mr-mobile-representative-slot-w: min(300px, 72vw); order: 2 !important; position: relative !important; z-index: 4 !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: block !important; width: var(--mr-mobile-representative-slot-w) !important; min-width: 0 !important; max-width: var(--mr-mobile-representative-slot-w) !important; height: auto !important; min-height: 0 !important; margin: clamp(2px, .9vw, 6px) auto 0 !important; padding: 0 !important; box-sizing: border-box !important; line-height: 0 !important; pointer-events: auto !important; overflow: visible !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-orbit-side-storefront__button { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; text-decoration: none !important; color: inherit !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; -webkit-tap-highlight-color: transparent; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-orbit-side-storefront__base, .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-orbit-side-storefront__overlay { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; user-select: none !important; -webkit-user-drag: none !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-orbit-side-storefront__overlay { position: absolute !important; z-index: 2 !important; inset: 0 !important; pointer-events: none !important; transform: translateZ(0) scale(1) !important; transform-origin: 28.9% 24.7% !important; transition: transform .36s cubic-bezier(.18,.78,.22,1), filter .36s ease !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-orbit-side-storefront__logo-button { position: absolute !important; z-index: 3 !important; left: 18.2% !important; top: 15.5% !important; width: 21.3% !important; height: 18.6% !important; display: block !important; cursor: pointer !important; border: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; appearance: none !important; text-decoration: none !important; -webkit-tap-highlight-color: transparent !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-orbit-side-storefront__logo-button:hover + .mr-home-orbit-side-storefront__overlay, .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-orbit-side-storefront__logo-button:focus-visible + .mr-home-orbit-side-storefront__overlay { transform: translateZ(0) scale(1.035) !important; filter: drop-shadow(0 0 8px rgba(255, 238, 188, .44)) drop-shadow(0 8px 20px rgba(31, 62, 55, .16)) !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-image-title { position: absolute !important; z-index: 7 !important; top: -3.8% !important; left: 0 !important; right: 0 !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 7.2% !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; line-height: 1 !important; direction: ltr !important; pointer-events: none !important; transform: none !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-image-title__kicker { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: clamp(5px, 1.45vw, 8px) !important; width: 100% !important; color: #1F3E37 !important; font-size: clamp(.42rem, 1.55vw, .52rem) !important; font-weight: 800 !important; letter-spacing: .22em !important; text-transform: uppercase !important; white-space: nowrap !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-image-title__kicker::before, .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-image-title__kicker::after { content: "" !important; flex: 1 1 auto !important; min-width: clamp(12px, 3.2vw, 24px) !important; height: 1px !important; background: linear-gradient(90deg, rgba(31, 62, 55, 0), rgba(31, 62, 55, .78), rgba(31, 62, 55, 0)) !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-image-title__name { display: block !important; width: 100% !important; margin-top: clamp(4px, 1vw, 6px) !important; color: #101412 !important; font-size: clamp(.76rem, 2.72vw, .96rem) !important; font-weight: 900 !important; letter-spacing: .16em !important; text-transform: uppercase !important; white-space: nowrap !important; text-shadow: 0 1px 0 rgba(255,255,255,.28), 0 8px 18px rgba(31,62,55,.10) !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-image-title__sub { display: block !important; width: 100% !important; margin-top: clamp(3px, .9vw, 5px) !important; color: #1F3E37 !important; font-size: clamp(.44rem, 1.6vw, .54rem) !important; font-weight: 700 !important; letter-spacing: .10em !important; text-transform: uppercase !important; white-space: nowrap !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-drawer { position: absolute !important; z-index: 9 !important; top: 36.9% !important; right: 0 !important; left: 0 !important; width: 100% !important; box-sizing: border-box !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; line-height: 1.2 !important; overflow: visible !important; transform: translate3d(0, -7px, 0) scale(.98) !important; transform-origin: top center !important; transition: opacity .20s ease, transform .28s ease, visibility .28s step-end !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-drawer[hidden] { display: none !important; } .quick-proforma-section > .mr-home-representative-proforma-slot.is-representative-open .mr-home-representative-drawer, .quick-proforma-section > .mr-home-representative-proforma-slot.is-representative-closing .mr-home-representative-drawer { opacity: 1 !important; visibility: visible !important; transform: translate3d(0, 0, 0) scale(1) !important; transition: opacity .18s ease, transform .24s ease, visibility 0s linear !important; } .quick-proforma-section > .mr-home-representative-proforma-slot.is-representative-open .mr-home-representative-drawer { pointer-events: auto !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form { direction: rtl !important; width: 70% !important; max-width: 70% !important; margin-inline: auto !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; gap: clamp(7px, 2.1vw, 11px) !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; overflow: visible !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__title, .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__note, .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__status { display: none !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: clamp(2px, .8vw, 4px) !important; row-gap: clamp(5px, 1.55vw, 8px) !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__field { min-width: 0 !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; gap: 1px !important; opacity: 1 !important; transform: none !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__field--wide { grid-column: 1 / -1 !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__field label { color: rgba(255,255,255,.90) !important; -webkit-text-fill-color: rgba(255,255,255,.90) !important; font-size: clamp(6px, 1.7vw, 8px) !important; font-weight: 850 !important; line-height: 1.05 !important; text-shadow: 0 1px 2px rgba(0,0,0,.34) !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__field input, .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__field select { width: 100% !important; height: clamp(15px, 4vw, 19px) !important; min-height: clamp(15px, 4vw, 19px) !important; max-height: clamp(15px, 4vw, 19px) !important; box-sizing: border-box !important; border: 1px solid rgba(255,255,255,.32) !important; border-radius: 999px !important; padding: 0 clamp(5px, 1.8vw, 8px) !important; background: rgba(255,255,255,.72) !important; color: #10251f !important; -webkit-text-fill-color: #10251f !important; font-size: clamp(7px, 1.9vw, 9px) !important; line-height: clamp(15px, 4vw, 19px) !important; outline: 0 !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: clamp(3px, 1.1vw, 5px) !important; margin: 0 !important; opacity: 1 !important; transform: none !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__submit, .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__cancel { height: clamp(18px, 4.4vw, 22px) !important; min-height: clamp(18px, 4.4vw, 22px) !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.42) !important; padding: 0 7px !important; font-size: clamp(7px, 2vw, 9px) !important; font-weight: 900 !important; line-height: 1 !important; } } /* 9.752 — Mobile representative stack 1.5x bigger and slightly lower. Scale the entire representative slot uniformly so the title, image, hotspot, overlay, and drawer/form grow together without changing desktop or invoice. */ @media (max-width: 860px) { .quick-proforma-section > .mr-home-representative-proforma-slot, body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section > .mr-home-representative-proforma-slot { margin-top: clamp(14px, 4vw, 22px) !important; margin-bottom: clamp(158px, 38vw, 228px) !important; transform: translate3d(0, clamp(10px, 2.8vw, 16px), 0) scale(1.5) !important; transform-origin: top center !important; } } /* 9.754 — Mobile representative touch geometry + no input auto-zoom. Replace the previous visual-only scale with real mobile layout size so touch targets match what the user sees. Also keep all mobile form controls at 16px+ computed font size to stop iOS/Android browser auto-zoom from sticking after typing. */ @media (max-width: 860px) { .quick-proforma-section > .mr-home-representative-proforma-slot, body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section > .mr-home-representative-proforma-slot { --mr-mobile-representative-slot-w: min(520px, 100vw) !important; width: var(--mr-mobile-representative-slot-w) !important; max-width: var(--mr-mobile-representative-slot-w) !important; margin-top: clamp(28px, 7vw, 40px) !important; margin-bottom: clamp(148px, 38vw, 216px) !important; transform: translate3d(0, clamp(22px, 5.4vw, 32px), 0) !important; transform-origin: top center !important; touch-action: manipulation !important; contain: none !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-orbit-side-storefront__button, .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-drawer, .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form { touch-action: manipulation !important; contain: none !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-orbit-side-storefront__logo-button { left: 15.4% !important; top: 12.8% !important; width: 28.2% !important; height: 24.8% !important; touch-action: manipulation !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form { width: 78% !important; max-width: 78% !important; gap: clamp(8px, 2vw, 12px) !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__grid { column-gap: clamp(4px, 1.1vw, 7px) !important; row-gap: clamp(7px, 1.8vw, 10px) !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__field { gap: 2px !important; touch-action: manipulation !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__field label { font-size: clamp(8px, 2vw, 10px) !important; line-height: 1.08 !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__field input, .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__field select { height: clamp(28px, 7vw, 34px) !important; min-height: clamp(28px, 7vw, 34px) !important; max-height: none !important; padding: 0 clamp(8px, 2vw, 11px) !important; font-size: 16px !important; line-height: 1.15 !important; touch-action: manipulation !important; -webkit-user-select: text !important; user-select: text !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__submit, .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-representative-form__cancel { height: clamp(30px, 7.4vw, 36px) !important; min-height: clamp(30px, 7.4vw, 36px) !important; font-size: 16px !important; line-height: 1 !important; touch-action: manipulation !important; } .quick-proforma-section input, .quick-proforma-section select, .quick-proforma-section textarea, .quick-proforma-whatsapp-modal input, .quick-proforma-whatsapp-modal select, .quick-proforma-whatsapp-modal textarea { font-size: 16px !important; touch-action: manipulation !important; } } /* 9.757 — Safe mobile representative +15% visual enlargement. Continue from the safe 9.755 layout. Do not grow the layout box beyond the viewport (no 120vw); instead scale the representative inner stack visually by 15% while reserving extra vertical flow space. This keeps page width stable and preserves the 9.754/9.755 touch/zoom fixes. */ @media (max-width: 860px) { .quick-proforma-section > .mr-home-representative-proforma-slot, body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .quick-proforma-section > .mr-home-representative-proforma-slot { --mr-mobile-representative-slot-w: min(520px, 100vw) !important; width: var(--mr-mobile-representative-slot-w) !important; max-width: var(--mr-mobile-representative-slot-w) !important; margin-top: clamp(34px, 8.2vw, 46px) !important; margin-bottom: clamp(184px, 47vw, 274px) !important; transform: translate3d(0, clamp(26px, 6vw, 36px), 0) !important; overflow: visible !important; } .quick-proforma-section > .mr-home-representative-proforma-slot .mr-home-orbit-side-storefront__button { transform: translate3d(0, 0, 0) scale(1.15) !important; transform-origin: top center !important; will-change: transform; } } /* 9.753 — Mobile form input zoom guard. Prevent iOS/Safari input auto-zoom on the visible Quick Proforma fields and keep all form focus/close actions able to restore the normal viewport scale. Representative mini-fields keep their existing visual size; the JS below handles zoom reset after blur/submit/cancel without changing their layout. */ @media (max-width: 860px) { .quick-proforma-code-input, .quick-proforma-qty-input, .quick-proforma-whatsapp-field input, .quick-proforma-whatsapp-dialog input, .quick-proforma-whatsapp-dialog select, .quick-proforma-whatsapp-dialog textarea { font-size: 16px !important; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } .quick-proforma-section input, .quick-proforma-section select, .quick-proforma-section textarea, .quick-proforma-whatsapp-modal input, .quick-proforma-whatsapp-modal select, .quick-proforma-whatsapp-modal textarea { -webkit-user-select: text !important; user-select: text !important; } } /* 9.758 — Surface-only Quick Proforma table fit. Surface portrait/landscape has a desktop-style five-column invoice inside a roughly 480px table viewport. Remove the legacy 620px floor only on a medium-width touch device; surrounding section geometry and the dedicated mobile, laptop, and desktop layouts stay unchanged. */ @media (min-width: 901px) and (max-width: 1440px) and (any-pointer: coarse) { body.mr-home-has-desktop-sidebar.mr-global-has-desktop-sidebar .quick-proforma-table-scroll { overflow-x: hidden !important; touch-action: pan-y !important; } body.mr-home-has-desktop-sidebar.mr-global-has-desktop-sidebar .quick-proforma-table { width: 100% !important; max-width: 100% !important; min-width: 0 !important; table-layout: fixed !important; box-sizing: border-box !important; } body.mr-home-has-desktop-sidebar.mr-global-has-desktop-sidebar .quick-proforma-col-number { width: 8% !important; } body.mr-home-has-desktop-sidebar.mr-global-has-desktop-sidebar .quick-proforma-col-image { width: 18% !important; } body.mr-home-has-desktop-sidebar.mr-global-has-desktop-sidebar .quick-proforma-col-code { width: 44% !important; } body.mr-home-has-desktop-sidebar.mr-global-has-desktop-sidebar .quick-proforma-col-qty { width: 18% !important; } body.mr-home-has-desktop-sidebar.mr-global-has-desktop-sidebar .quick-proforma-col-remove { width: 12% !important; } body.mr-home-has-desktop-sidebar.mr-global-has-desktop-sidebar .quick-proforma-table th, body.mr-home-has-desktop-sidebar.mr-global-has-desktop-sidebar .quick-proforma-table td { min-width: 0 !important; padding-left: clamp(3px, .48vw, 7px) !important; padding-right: clamp(3px, .48vw, 7px) !important; box-sizing: border-box !important; } body.mr-home-has-desktop-sidebar.mr-global-has-desktop-sidebar .quick-proforma-code-wrap { width: 100% !important; min-width: 0 !important; gap: 4px !important; } body.mr-home-has-desktop-sidebar.mr-global-has-desktop-sidebar .quick-proforma-code-input, body.mr-home-has-desktop-sidebar.mr-global-has-desktop-sidebar .quick-proforma-qty-input { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } body.mr-home-has-desktop-sidebar.mr-global-has-desktop-sidebar .quick-proforma-code-input { flex: 1 1 auto !important; } } /* 9.721 — Increase Home 3-image-panel to 12-card spacing by 50% more. Keep the correct 9.720 target: the visible desktop gap is controlled by the 3-image-panel section's bottom margin. Increase the current gap from clamp(46px, 5.72vw, 88px) to clamp(69px, 8.58vw, 132px) so the 12-card strip and all lower sections move down naturally through document flow. */ @media (min-width: 1180px) { body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .mr-home-image-panels { margin-bottom: clamp(69px, 8.58vw, 132px) !important; } } /* 9.722 — Insert centered refine-line message into the enlarged gap above the 12-card strip. Keep the 9.721 desktop spacing intact and place a non-layout-affecting heading visually inside that gap, matching the refined line treatment used above the representative section. */ @media (min-width: 1180px) { body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .mr-home-twelve-card-strip { position: relative; overflow: visible; } body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .mr-home-twelve-card-strip .mr-home-gap-refine-title { position: absolute; z-index: 3; left: 0; right: 0; top: calc(clamp(69px, 8.58vw, 132px) * -0.54); display: flex; align-items: center; justify-content: center; pointer-events: none; } body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .mr-home-twelve-card-strip .mr-home-gap-refine-title__text { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: clamp(18px, 1.55vw, 32px); min-width: min(780px, 90%); padding: 0 clamp(16px, 1.6vw, 28px); color: #14362f; background: linear-gradient(90deg, #14362f 0%, #14362f 32%, #7a5a34 44%, #c2a15d 50%, #7a5a34 56%, #14362f 68%, #14362f 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: clamp(1.46rem, 1.82vw, 2.24rem); font-weight: 950; letter-spacing: .032em; line-height: 1.04; text-align: center; white-space: nowrap; text-shadow: 0 1px 0 rgba(255,255,255,.62), 0 8px 22px rgba(31,62,55,.18), 0 18px 42px rgba(31,62,55,.14), 0 0 26px rgba(183,150,85,.22), 0 0 54px rgba(183,150,85,.14); filter: drop-shadow(0 16px 32px rgba(31,62,55,.13)); } body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .mr-home-twelve-card-strip .mr-home-gap-refine-title__text::before, body.mr-home-has-desktop-sidebar .mr-home-desktop-content-shell .mr-home-twelve-card-strip .mr-home-gap-refine-title__text::after { content: ""; flex: 1 1 auto; min-width: clamp(96px, 8.6vw, 190px); height: 1px; background: linear-gradient(90deg, rgba(183,150,85,0), rgba(183,150,85,.88), rgba(31,62,55,.58), rgba(183,150,85,.88), rgba(183,150,85,0)); opacity: .92; filter: drop-shadow(0 0 8px rgba(183,150,85,.16)); } } /* 9.760 — Mobile 12-card first-card physical-left alignment with the 3-image panel. Mobile starts at the page's physical 12px left edge, while the 12-card carousel was centered by 16.5vw rail padding. Pin the first 12-card to the same physical left inset and keep right padding for scroll breathing room. Language changes do not affect geometry. */ @media (max-width: 860px) { .mr-home-twelve-card-strip { width: min(100%, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } .mr-home-twelve-card-strip__rail { scroll-padding-left: 0 !important; scroll-padding-right: 16.5vw !important; padding-left: 0 !important; padding-right: 16.5vw !important; box-sizing: border-box !important; } } @media (max-width: 440px) { .mr-home-twelve-card-strip { width: min(100%, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; margin-left: auto !important; margin-right: auto !important; } .mr-home-twelve-card-strip__rail { scroll-padding-left: 0 !important; scroll-padding-right: 16.5vw !important; padding-left: 0 !important; padding-right: 16.5vw !important; } } @media (max-width: 860px) { .mr-home-image-panels { margin-bottom: 20px !important; } .mr-home-twelve-card-strip { margin-top: 0 !important; margin-bottom: 20px !important; overflow: visible !important; } .mr-home-twelve-card-strip .mr-home-gap-refine-title { position: relative; z-index: 3; width: 100%; display: flex; align-items: center; justify-content: center; margin: 0 0 14px; padding: 0; box-sizing: border-box; pointer-events: none; } .mr-home-twelve-card-strip .mr-home-gap-refine-title__text { position: relative; width: 100%; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: clamp(8px, 2.7vw, 13px); padding: 0 4px; box-sizing: border-box; color: #14362f; background: linear-gradient(90deg, #14362f 0%, #14362f 32%, #7a5a34 44%, #c2a15d 50%, #7a5a34 56%, #14362f 68%, #14362f 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: clamp(.88rem, 4.15vw, 1.18rem); font-weight: 950; letter-spacing: .026em; line-height: 1.04; text-align: center; white-space: nowrap; text-shadow: 0 1px 0 rgba(255,255,255,.62), 0 7px 18px rgba(31,62,55,.18), 0 0 22px rgba(183,150,85,.22); filter: drop-shadow(0 10px 22px rgba(31,62,55,.13)); } .mr-home-twelve-card-strip .mr-home-gap-refine-title__text::before, .mr-home-twelve-card-strip .mr-home-gap-refine-title__text::after { content: ""; flex: 1 1 0; min-width: 24px; height: 1px; background: linear-gradient(90deg, rgba(183,150,85,0), rgba(183,150,85,.88), rgba(31,62,55,.58), rgba(183,150,85,.88), rgba(183,150,85,0)); opacity: .92; filter: drop-shadow(0 0 8px rgba(183,150,85,.16)); } .mr-home-twelve-card__family-refine { gap: 8px; } .mr-home-twelve-card__family-code { max-width: 74%; font-size: clamp(.78rem, 3.55vw, .98rem); letter-spacing: .04em; } }