/* JustLoofah COD order form — RTL, Arabic-first. */ @import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap"); /* Type-scale tokens, in px — deliberately independent of the host theme's font-size. The installed theme sets html{font-size:62.5%} (root = 10px), which silently rendered every one of this file's old rem-based font-sizes at ~62% of its authored size (labels at 9px, the tax note at 7.8px). em with a single base per root was ruled out too: .cod-form nests inside .cod-form (blocks/cod-cart.liquid -> snippets/cod-cart-body.liquid, blocks/cod-form.liquid -> snippets/cod-form-body.liquid), so an em scale would compound to base^2 for the nested copy and change again when cod-core.js relocates the form into the modal panel. Declared on each of the form's independent root trees; every consumer below still carries an inline `var(--x, )` fallback because cod-core.js's no-donor launcher branch renders .cod-form__submit outside any of these roots. */ .cod-form, .cod-offer { --cod-fs-2xs: 13px; --cod-fs-xs: 14px; --cod-fs-sm: 15px; --cod-fs-md: 16px; --cod-fs-lg: 17px; --cod-fs-xl: 19px; --cod-fs-2xl: 22px; --cod-fs-3xl: 28px; direction: rtl; text-align: right; font-family: "Cairo", "IBM Plex Sans Arabic", "Tajawal", system-ui, -apple-system, sans-serif; max-width: 560px; margin: 24px auto; color: #2b2722; font-size: var(--cod-fs-md, 16px); line-height: 1.6; letter-spacing: normal; word-spacing: normal; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* .cod-offer is a standalone offer block that intentionally reuses the form's tier/add-on components (see below) so moving selection out of the form does not change the visual language or RTL spacing — it was byte-identical to .cod-form above, now collapsed into one rule. */ .cod-offer__notice { padding: 12px 14px; border: 1px solid #e3a11c; border-radius: 12px; background: #fff7e6; color: #6b4d0b; font-size: var(--cod-fs-sm, 15px); line-height: 1.6; } .cod-form__loading { padding: 24px; text-align: center; color: #857a6a; font-size: var(--cod-fs-md, 16px); line-height: 1.6; } .cod-form__title { /* This is an

, and themes routinely style headings by element — Dawn's base.css has `h1,h2,h3,h4,h5 { font-family: var(--font-heading-family) }`. Our Cairo stack is only *inherited* from the .cod-form root, and an inherited value always loses to a rule that matches the element directly, no matter how low its specificity. Without this the section headings silently render in the theme's heading font while the labels and inputs beside them render Cairo. */ font-family: inherit; font-size: var(--cod-fs-xl, 19px); line-height: 1.35; font-weight: 700; margin: 22px 0 12px; } /* Tiers */ .cod-form__tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .cod-tier { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border: 2px solid #e7ded0; border-radius: 14px; background: #fff; cursor: pointer; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s; } .cod-tier:active { transform: scale(0.99); } .cod-tier.is-selected { border-color: #e3a11c; box-shadow: 0 0 0 3px rgba(227, 161, 28, 0.18); } .cod-tier:focus-visible { outline: 3px solid rgba(227, 161, 28, 0.5); outline-offset: 2px; } .cod-tier__label { font-size: var(--cod-fs-md, 16px); line-height: 1.35; font-weight: 700; } .cod-tier__price { font-size: var(--cod-fs-xl, 19px); line-height: 1.25; font-weight: 700; color: #2b2722; font-variant-numeric: tabular-nums; } .cod-tier__compare { font-size: var(--cod-fs-xs, 14px); line-height: 1.3; color: #a99e8c; text-decoration: line-through; } .cod-tier__desc { font-size: var(--cod-fs-xs, 14px); line-height: 1.45; color: #857a6a; text-align: center; } /* Upsells */ .cod-form__upsells { display: flex; flex-direction: column; gap: 8px; } .cod-upsell { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e7ded0; border-radius: 12px; cursor: pointer; } .cod-upsell__cb { width: 18px; height: 18px; accent-color: #e3a11c; } .cod-upsell.is-disabled, .cod-upsell__cb:disabled { opacity: 0.58; cursor: not-allowed; } .cod-upsell__img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; } .cod-upsell__title { flex: 1; font-size: var(--cod-fs-md, 16px); line-height: 1.45; } .cod-upsell__price { font-size: var(--cod-fs-md, 16px); line-height: 1.45; font-weight: 600; color: #6b6355; } /* Form fields */ .cod-form__fields { display: flex; flex-direction: column; gap: 12px; } .cod-field { display: flex; flex-direction: column; gap: 5px; } .cod-field__label { font-size: var(--cod-fs-sm, 15px); line-height: 1.5; font-weight: 600; color: #55504a; } .cod-field__input { width: 100%; box-sizing: border-box; padding: 13px 14px; min-height: 48px; border: 1px solid #d9cfbe; border-radius: 10px; font-family: inherit; /* Hard floor: must never resolve below 16px at any breakpoint, or iOS zooms the viewport on focus. --cod-fs-md is 16px desktop / 17px mobile — always above the floor. */ font-size: var(--cod-fs-md, 16px); line-height: 1.5; background: #fff; color: inherit; } .cod-field__input:focus { outline: none; border-color: #e3a11c; box-shadow: 0 0 0 3px rgba(227, 161, 28, 0.15); } /* Composite phone field: country-code select + numeric local-number input */ .cod-field__phone { display: flex; flex-direction: row; gap: 8px; } .cod-field__cc { /* Always rendered with the .cod-field__input class alongside this one (see cod-core.js and the *-body.liquid templates), so it already gets that rule's font-size/min-height. Width stays in em (not px) so it keeps auto-tracking whatever that font-size resolves to. */ flex: 0 0 auto; width: 6.5em; padding-inline: 8px; } .cod-field__phone-input { flex: 1; } /* Quantity selector (simple/non-bundle mode). No rule previously existed for either class — the input inherited only .cod-field__input and rendered as a full-width text field. */ .cod-form__qty, .cod-field__qty { width: 96px; min-height: 48px; text-align: center; font-variant-numeric: tabular-nums; } /* Summary */ .cod-form__summary { border: 1px solid #e7ded0; border-radius: 12px; padding: 12px 14px; background: #fbf8f3; } .cod-summary__row { display: flex; justify-content: space-between; padding: 5px 0; font-size: var(--cod-fs-md, 16px); line-height: 1.55; font-variant-numeric: tabular-nums; } .cod-summary__row.is-total { border-top: 1px dashed #d9cfbe; margin-top: 6px; padding-top: 10px; font-weight: 700; font-size: var(--cod-fs-xl, 19px); line-height: 1.4; } /* Whole-cart summary line items (cart form, drawer, product whole-cart). RTL flex row: media (image + qty badge) sits at the right, title grows, price then remove-✕ trail to the left — matching the reference design. */ .cod-cartline { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #ece3d4; } .cod-cartline:first-child { padding-top: 2px; } .cod-cartline__media { position: relative; flex: 0 0 auto; } .cod-cartline__img { display: block; width: 52px; height: 52px; object-fit: cover; border-radius: 10px; } /* Qty badge is a fixed circle pinned to the image corner: glyph size, box size/line-height, and offset move together as one unit, or a 2-digit quantity clips or drifts off the corner. Offset = -(box/2 - 3), i.e. the badge sits centred on the corner with a consistent 3px overlap. Verify at qty 1, 12, and 100. */ .cod-cartline__qty { position: absolute; top: -8px; inset-inline-start: -8px; min-width: 22px; height: 22px; box-sizing: border-box; padding: 0 5px; border-radius: 999px; background: #2b2722; color: #fff; font-size: var(--cod-fs-2xs, 13px); font-weight: 700; line-height: 22px; text-align: center; } .cod-cartline__info { flex: 1; min-width: 0; } .cod-cartline__title { font-weight: 600; font-size: var(--cod-fs-md, 16px); line-height: 1.4; } .cod-cartline__price { flex: 0 0 auto; font-weight: 700; white-space: nowrap; font-size: var(--cod-fs-md, 16px); line-height: 1.4; font-variant-numeric: tabular-nums; } .cod-cartline__remove { flex: 0 0 auto; /* Tap target 26px -> 32px desktop / 36px mobile (merchant-requested). Full 44px would dominate a 76px cart row; this plus the row's own hit area is the accepted compromise. */ width: 32px; height: 32px; border: none; border-radius: 50%; background: transparent; color: #a99e8c; font-family: inherit; font-size: var(--cod-fs-sm, 15px); line-height: 1; cursor: pointer; transition: color 0.15s, background 0.15s; } .cod-cartline__remove:hover { background: #fdeceb; color: #b3261e; } .cod-summary__totals { margin-top: 10px; } .cod-summary__tax { margin-top: 4px; font-size: var(--cod-fs-xs, 14px); line-height: 1.5; color: #6b6355; text-align: start; } /* Submit */ .cod-form__submit { width: 100%; margin-top: 16px; padding: 15px; border: none; border-radius: 12px; background: #e3a11c; color: #fff; font-family: inherit; font-size: var(--cod-fs-xl, 19px); line-height: 1.3; font-weight: 700; cursor: pointer; transition: background 0.15s, opacity 0.15s; } .cod-form__submit:hover { background: #cf9013; } .cod-form__submit:disabled { opacity: 0.65; cursor: default; } .cod-form__error { margin-top: 12px; padding: 11px 14px; border-radius: 10px; background: #fdeceb; color: #b3261e; font-size: var(--cod-fs-sm, 15px); line-height: 1.55; } /* Result */ .cod-form__result { text-align: center; padding: 28px 16px; border: 1px solid #e7ded0; border-radius: 16px; background: #f6fbf4; } /* Was a line-height-as-box-height hack (line-height:54px on a 54px circle), which couples glyph baseline to box height and breaks the moment either changes. Decoupled: flex-centering sizes the box, line-height:1 keeps the glyph from adding its own leading on top of that. */ .cod-result__check { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; border-radius: 50%; background: #3fa34d; color: #fff; font-size: var(--cod-fs-3xl, 28px); line-height: 1; font-weight: 700; } .cod-result__title { font-size: var(--cod-fs-2xl, 22px); line-height: 1.35; font-weight: 700; } .cod-result__order { margin-top: 6px; color: #6b6355; font-size: var(--cod-fs-md, 16px); line-height: 1.5; } .cod-result__hint { margin-top: 14px; font-size: var(--cod-fs-sm, 15px); line-height: 1.6; color: #6b6355; } .cod-result__again { margin-top: 16px; } /* Popup launcher (display_mode: popup) */ .cod-form__launcher { margin-top: 0; } /* Embed auto-mount launcher (P6) — same look as .cod-form__submit; inserted directly into theme markup (not inside a .cod-form root) so it can't rely on cascade from a COD form/block wrapper. RTL-safe (no directional properties beyond what .cod-form__submit already sets via inheritance). Deliberately has NO font-size: cod-core.js clones the theme's own donor button class here so the launcher matches the surrounding theme. */ .cod-embed-launcher { display: block; box-sizing: border-box; text-align: center; } /* Modal / drawer overlay (popup display mode) — RTL-friendly */ .cod-modal { --cod-fs-2xs: 13px; --cod-fs-xs: 14px; --cod-fs-sm: 15px; --cod-fs-md: 16px; --cod-fs-lg: 17px; --cod-fs-xl: 19px; --cod-fs-2xl: 22px; --cod-fs-3xl: 28px; position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 16px; direction: rtl; font-size: var(--cod-fs-md, 16px); line-height: 1.6; letter-spacing: normal; word-spacing: normal; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .cod-modal__backdrop { position: absolute; inset: 0; background: rgba(43, 39, 34, 0.55); } .cod-modal__panel { position: relative; width: 100%; max-width: 620px; /* min() of vh and dvh so the iOS Safari URL bar can't eat the panel bottom when it collapses/expands mid-scroll. */ max-height: min(88vh, 88dvh); overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fbf8f3; border: 1px solid #e7ded0; border-radius: 16px; padding: 18px 20px 26px; box-shadow: 0 18px 48px rgba(43, 39, 34, 0.32); font-size: var(--cod-fs-md, 16px); line-height: 1.6; } .cod-modal__close { position: absolute; /* Tap target 34px -> 40px desktop / 44px mobile (merchant-requested); offset grown to match so it stops crowding the first title. */ top: 14px; inset-inline-end: 14px; width: 40px; height: 40px; border: 1px solid #e7ded0; border-radius: 50%; background: #fff; color: #6b6355; font-size: var(--cod-fs-sm, 15px); line-height: 1; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .cod-modal__close:hover { border-color: #e3a11c; color: #2b2722; } .cod-modal__content.cod-form { margin: 10px auto 0; } body.cod-modal-open { overflow: hidden; } /* --------------------------------------------------------------------- Sticky Add to Cart Bar — RTL, Arabic-first. Additive; SSR by blocks/cod-embed.liquid only when block.settings.sticky_enable is on. All colors come from --cod-sticky-* custom properties set inline by Liquid so merchant color-picker settings apply without a build step. z-index sits BELOW the COD modal (2147483000) so the modal always layers above the bar. That z-index (2147482900) also beats any theme cart-drawer z-index, which on mobile means the bar renders ON TOP of an open cart drawer and covers the drawer's checkout button. The z-index ordering above is not the whole story: html.cod-drawer-open (toggled by syncDrawerGate() in cod-core.js) and body.cod-modal-open (toggled by the COD modal) both force-hide the bar entirely rather than re-layer it — see the rule right after .cod-sticky--devices-desktop below. --------------------- */ .cod-sticky { --cod-sticky-radius: 16px; --cod-fs-2xs: 13px; --cod-fs-xs: 14px; --cod-fs-sm: 15px; --cod-fs-md: 16px; --cod-fs-lg: 17px; --cod-fs-xl: 19px; --cod-fs-2xl: 22px; --cod-fs-3xl: 28px; position: fixed; inset-inline: 0; z-index: 2147482900; display: flex; align-items: center; gap: 12px; direction: rtl; font-family: "Cairo", "IBM Plex Sans Arabic", "Tajawal", system-ui, -apple-system, sans-serif; background: var(--cod-sticky-bg, #ffffff); box-sizing: border-box; font-size: var(--cod-fs-md, 16px); line-height: 1.6; letter-spacing: normal; word-spacing: normal; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .cod-sticky--bottom { bottom: 0; } .cod-sticky--top { top: 0; } .cod-sticky--shadow-none { box-shadow: none; } .cod-sticky--shadow-soft { box-shadow: 0 -4px 16px rgba(43, 39, 34, 0.12); } .cod-sticky--shadow-strong { box-shadow: 0 -8px 28px rgba(43, 39, 34, 0.24); } .cod-sticky--top.cod-sticky--shadow-soft { box-shadow: 0 4px 16px rgba(43, 39, 34, 0.12); } .cod-sticky--top.cod-sticky--shadow-strong { box-shadow: 0 8px 28px rgba(43, 39, 34, 0.24); } /* Device-visibility utility classes */ .cod-sticky--devices-mobile { display: none; } .cod-sticky--devices-desktop { display: none; } /* Force-hide the bar rather than re-layer it under a drawer/modal. html.cod-drawer-open is set by syncDrawerGate() in cod-core.js whenever an open theme cart drawer reaches the viewport edge the bar is pinned to. body.cod-modal-open is already set by the COD modal (see the rule at ~line 530 above) — needed here too because the modal's translucent backdrop (rgba(43,39,34,.55)) does not cover the bar's card, so the bar glows through at the bottom; and because closeThemeCartDrawer() closes the drawer before the modal opens, which would otherwise clear the drawer gate and let the bar pop straight back through the backdrop. !important is defensive only: html.cod-drawer-open .cod-sticky (0,2,1) already outspecifies .cod-sticky--devices-both { display: flex } (0,1,0) inside the device media queries below. */ html.cod-drawer-open .cod-sticky, body.cod-modal-open .cod-sticky { display: none !important; } .cod-sticky__image { flex-shrink: 0; width: 56px; height: 56px; border-radius: calc(var(--cod-sticky-radius) / 2); overflow: hidden; background: #f4efe6; } .cod-sticky__image img { display: block; width: 100%; height: 100%; object-fit: cover; } .cod-sticky__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cod-sticky__title { color: var(--cod-sticky-title-color, #2b2722); /* Sticky bar is position:fixed and permanently eats viewport height, so its type grows conservatively (+1-2px over the old rem-at-16px-root estimate) with a tight line-height — scaling it like the rest of the form would push more page content off-screen on mobile. */ font-size: var(--cod-fs-xs, 14px); line-height: 1.25; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cod-sticky__stars { display: flex; align-items: center; gap: 2px; color: var(--cod-sticky-star-color, #e3a11c); /* 2xs is the one token that does NOT grow on mobile (13px at both breakpoints) — the right fit for a fixed-height bar row. */ font-size: var(--cod-fs-2xs, 13px); line-height: 1.2; } .cod-sticky__star { color: var(--cod-sticky-star-color, #e3a11c); } .cod-sticky__star-score { font-weight: 700; color: var(--cod-sticky-title-color, #2b2722); margin-inline-start: 4px; } .cod-sticky__review-count { color: #857a6a; } .cod-sticky__prices { display: flex; align-items: baseline; gap: 8px; } .cod-sticky__price { color: var(--cod-sticky-price-color, #2b2722); font-weight: 700; font-size: var(--cod-fs-md, 16px); line-height: 1.25; font-variant-numeric: tabular-nums; } .cod-sticky__compare { color: var(--cod-sticky-compare-color, #a39a8b); font-size: var(--cod-fs-xs, 14px); line-height: 1.25; text-decoration: line-through; } .cod-sticky__cta { flex-shrink: 0; border: none; cursor: pointer; background: var(--cod-sticky-btn-bg, #e3a11c); color: var(--cod-sticky-btn-text, #ffffff); font-family: inherit; font-weight: 700; transition: background-color 0.15s ease; } .cod-sticky__cta:hover, .cod-sticky__cta:active { background: var(--cod-sticky-btn-hover, #c98a12); } /* Mobile card — image on the right, title/stars/prices stacked and right-aligned to its left, full-width pill CTA below. */ @media (max-width: 749px) { /* Type tokens read LARGER on mobile than desktop, which looks backwards at first glance. It's intentional: the form is full-width on small screens (no 560px cap to shrink into), Arabic script needs slightly more size than Latin for equal perceived legibility, and the original merchant complaint was specifically about the mobile/cart view. Reuses this existing breakpoint rather than adding a new one. */ .cod-form, .cod-offer, .cod-modal, .cod-sticky { --cod-fs-xs: 15px; --cod-fs-sm: 16px; --cod-fs-md: 17px; --cod-fs-lg: 18px; --cod-fs-xl: 20px; --cod-fs-2xl: 23px; --cod-fs-3xl: 30px; } .cod-modal__panel { /* Reclaim line width on small screens. */ padding: 16px 16px 24px; } .cod-cartline__remove { width: 36px; height: 36px; } .cod-modal__close { width: 44px; height: 44px; } .cod-sticky { flex-wrap: wrap; padding: 10px 12px 12px; border-radius: var(--cod-sticky-radius) var(--cod-sticky-radius) 0 0; } .cod-sticky--top { border-radius: 0 0 var(--cod-sticky-radius) var(--cod-sticky-radius); } .cod-sticky__info { order: 1; text-align: right; } .cod-sticky__image { order: 2; } .cod-sticky__cta { order: 3; width: 100%; padding: 12px 16px; border-radius: 25px; /* Capped at md (not lg) to stay within the +1-2px mobile growth budget — the CTA's font-size is the biggest single driver of the bar's total height. */ font-size: var(--cod-fs-md, 17px); line-height: 1.3; } .cod-sticky--devices-mobile { display: flex; } .cod-sticky--devices-both { display: flex; } } /* Desktop bar — single horizontal row. */ @media (min-width: 750px) { .cod-sticky { padding: 12px 24px; border-radius: var(--cod-sticky-radius); max-width: 720px; margin-inline: auto; inset-inline: 0; } .cod-sticky--bottom { margin-bottom: 16px; } .cod-sticky--top { margin-top: 16px; } .cod-sticky__info { flex-direction: row; align-items: center; gap: 16px; } .cod-sticky__title { max-width: 220px; } .cod-sticky__cta { padding: 10px 28px; border-radius: calc(var(--cod-sticky-radius) / 2); font-size: var(--cod-fs-md, 16px); line-height: 1.3; } .cod-sticky--devices-desktop { display: flex; } .cod-sticky--devices-both { display: flex; } }