/* ============================================================================ INORA — Recommenda quiz result page Paste into: Recommenda → quiz 4128 → custom CSS field Pairs with: result-content.html (the authored copy in the result editor) Preview: open preview.html in a browser — it loads this file live, so edit and refresh; the buttons at the top switch between the three results. (It does not load the app's own quiz.css, so the Close / Retake chrome outside the panel looks unstyled there.) ============================================================================ WHAT THIS DOES Rebuilds the app's default result page as the INORA PDP layout: Your results → Your priority health goals → goal lines " is your formula!" ── divider ── DAILY SLEEP LIQUID SUPPLEMENT product image + badge, testimonial description | ✓ benefits SIZE, price, purchase type, plan, ADD TO CART / LEARN MORE, RITUAL15 strip ── The perfect pairing → AM TO PM DUO ── Why Subscribe + 4 tiles + SUBSCRIBE & SAVE HOW IT WORKS (three techniques, worth knowing before editing) 1. `display: contents` on the product link, the title paragraph and the meta description promotes their children AND their pseudo-elements into the product

grid, so each piece can be placed independently. 2. `order:` on that grid, and on the results container, puts everything in mockup sequence. 3. Text the app hard-codes is replaced with `font-size: 0` + `::after` content (Add to Cart → ADD TO CART, View Product → LEARN MORE, prices on the purchase-type rows). SEARCH FOR "EDIT ME" — every value you are likely to want to change is marked. ========================================================================= */ /* ========================================================================== 0a. FONTS — required, do not remove -------------------------------------------------------------------------- The quiz renders in an iframe on the app's own domain, so the theme's @font-face rules do not exist here: 'Romie' and 'Roboto' would silently fall back to generic serif/sans (this is why the current result page does not look like the rest of the site). The theme's font files are served from Shopify's CDN with `access-control-allow-origin: *`, so they can be re-declared here. If the theme is updated the ?v= hashes change and these URLs 404 — the page still works, it just loses the typeface. Re-copy the URLs from the theme's Romie @font-face block and the roboto preload tags in . ========================================================================== */ @font-face { font-family: 'Romie'; src: url('https://www.inorahealth.com/cdn/shop/t/80/assets/Romie-Medium.woff2?v=122524806331226140181785304478') format('woff2'), url('https://www.inorahealth.com/cdn/shop/t/80/assets/Romie-Medium.woff?v=176100323358023924741785304478') format('woff'); font-weight: 500; /* the only weight the theme ships */ font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('https://www.inorahealth.com/cdn/fonts/roboto/roboto_n4.2019d890f07b1852f56ce63ba45b2db45d852cba.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('https://www.inorahealth.com/cdn/fonts/roboto/roboto_n7.f38007a10afbbde8976c4056bfe890710d51dec2.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('https://www.inorahealth.com/cdn/fonts/roboto/roboto_i4.57ce898ccda22ee84f49e6b57ae302250655e2d4.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } /* ========================================================================== 0. TOKENS ========================================================================== */ #recommenda-container-4128 { --inora-bg: #f3efe9; /* EDIT ME — page/panel cream */ --inora-tile: #e9e2d6; /* EDIT ME — image tile background */ --inora-ink: #1a1a1a; --inora-muted: #5c574f; --inora-rule: #d8d1c4; --inora-accent: #a9695b; /* EDIT ME — eyebrow, ticks, quote bar */ --inora-btn: #141414; --inora-btn-ink: #ffffff; --inora-serif: 'Romie', Georgia, 'Times New Roman', serif; --inora-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --inora-content: 649px; /* EDIT ME — width of the centred column */ --inora-image: 250px; /* EDIT ME — product bottle width */ /* --- prices ------------------------------------------------------------- CSS cannot read Shopify's price, so the displayed figures are typed here and section 4b picks which one to show from the size + purchase-type controls. Keep the quotes — these are strings used by `content`. EDIT ME — all three amounts. */ --inora-price-50-once: '£70.00'; /* 50ml, One-Time Purchase */ --inora-price-50-sub: '£56.00'; /* 50ml, Subscribe & Save */ --inora-price-20: '£45.00'; /* 20ml — one price, no subscription */ } /* ========================================================================== 1. PAGE SHELL + VERTICAL ORDER ========================================================================== */ /* The app does not set border-box everywhere; without this, padding on the stretched grid items (the buttons especially) is added outside the column and pushes the page sideways on mobile. */ #recommenda-container-4128 .recommenda-results-page-content, #recommenda-container-4128 .recommenda-results-page-content *, #recommenda-container-4128 .recommenda-results-page-content *::before, #recommenda-container-4128 .recommenda-results-page-content *::after { box-sizing: border-box; } #recommenda-container-4128 .recommenda-results-page-content { display: flex; flex-direction: column; align-items: center; background-color: var(--inora-bg) !important; border-radius: 30px !important; color: var(--inora-ink); padding: 40px 20px 48px; box-sizing: border-box; } #recommenda-container-4128 .recommenda-results-page-content > * { width: 100%; max-width: var(--inora-content); margin-inline: auto; } /* Mockup order: goals → title → products → discount strip → duo/why subscribe. The app outputs subheading, title, discount, products, subheading — so the two authored blocks are identified by what they contain, not by position, which survives the app adding or moving wrappers. */ #recommenda-container-4128 .recommenda-results-subheading:has(.inora-goals) { order: 1; } #recommenda-container-4128 .recommenda-title { order: 2; } #recommenda-container-4128 .recommenda-products-list.layout-adaptive { order: 2; } #recommenda-container-4128 .recommenda-discount-box { order: 4; } #recommenda-container-4128 .recommenda-results-subheading:last-child { order: 5; } /* The app ships these with its own max-width / padding; reset to our column. */ #recommenda-container-4128 .recommenda-products-list.layout-adaptive, #recommenda-container-4128 .recommenda-results-subheading { max-width: var(--inora-content) !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: auto !important; margin-right: auto !important; } /* ========================================================================== 2. GOALS BLOCK (authored — BLOCK B) ========================================================================== */ #recommenda-container-4128 .inora-goals { text-align: center; } #recommenda-container-4128 .inora-eyebrow { font-family: var(--inora-sans) !important; font-size: 10px; font-weight: 400 !important; letter-spacing: 0.22em; text-transform: uppercase; color: var(--inora-accent); margin: 0 0 18px !important; } #recommenda-container-4128 .inora-goals-heading { font-family: var(--inora-serif) !important; font-size: clamp(19px, 3.6vw, 24px); font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.35; margin: 0 0 18px !important; } #recommenda-container-4128 .inora-goal-line { font-family: var(--inora-sans) !important; font-size: 13px; line-height: 1.7; color: var(--inora-muted); max-width: 420px; margin: 0 auto 8px !important; } #recommenda-container-4128 .inora-goal-line strong { font-weight: 700 !important; color: var(--inora-ink); } /* Hero — the app's own title node */ #recommenda-container-4128 .recommenda-title { font-family: var(--inora-serif) !important; font-size: 4rem!important; font-weight: 900 !important; line-height: 1.2; text-align: center; text-transform: none; white-space: pre-wrap; margin: 26px auto 0 !important; padding: 0 !important; letter-spacing: 2px; } /* Divider between the hero and the product block */ #recommenda-container-4128 .recommenda-products-list.layout-adaptive { border-top: 1px solid var(--inora-rule); margin-top: 36px !important; padding-top: 40px !important; } /* ========================================================================== 3. PRODUCT BLOCK -------------------------------------------------------------------------- Unnest so every piece becomes a grid item of the

. ========================================================================== */ #recommenda-container-4128 .recommenda-products-list.layout-adaptive { list-style: none; } #recommenda-container-4128 .recommenda-product-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-items: center; align-items: start; gap: 0; padding: 0 !important; margin: 0 !important; width: auto; } /* the three unnesting hoists */ #recommenda-container-4128 .recommenda-product-box, #recommenda-container-4128 .recommenda-product-title, #recommenda-container-4128 .recommenda-variant-meta-description { display: contents !important; } /* --- category label ----------------------------------------------------- * "DAILY SLEEP LIQUID SUPPLEMENT". It has to live here rather than in the authored copy: it must sit *between* the hero title and the product image, and the authored block is a single flex item that cannot straddle the title. Hoisted out of the title paragraph (display:contents) as the first grid item. INORA_CATEGORY_* — EDIT ME. ---------------------------------------------------------------------- */ #recommenda-container-4128 .recommenda-product-title::before { order: 0; grid-column: 1 / -1; display: block; width: 100%; font-family: var(--inora-serif); font-size: 1.4rem; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; color: var(--inora-ink); margin-bottom: 26px; content: ''; font-weight:900; } /* INORA_CATEGORY_DREAM */ #recommenda-container-4128:has(.dream) .recommenda-product-title::before { content: 'Daily Sleep Liquid Supplement'; } /* INORA_CATEGORY_WAKE */ #recommenda-container-4128:has(.wake) .recommenda-product-title::before { content: 'Daily Energy Liquid Supplement'; } /* INORA_CATEGORY_MARATHON — EDIT ME (placeholder wording) */ #recommenda-container-4128:has(.marathon) .recommenda-product-title::before { content: 'Daily Cell Support Liquid Supplement'; } /* --- image + badge + testimonial ---------------------------------------- */ #recommenda-container-4128 .recommenda-product-image-container { order: 1; grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; margin-bottom:20px; } #recommenda-container-4128 .recommenda-product-image { order: 1; width: var(--inora-image) !important; height: auto !important; max-width: 100%; object-fit: contain !important; background: var(--inora-tile); display: block; } /* Testimonial — injected here because this is app-rendered markup the authored copy cannot reach. INORA_TESTIMONIAL_QUOTE / _AUTHOR — EDIT ME. Per result via the marker span, exactly like your benefit lists. */ #recommenda-container-4128 .recommenda-product-image-container::before, #recommenda-container-4128 .recommenda-product-image-container::after { order: 2; display: block; width: 100%; max-width: 320px; box-sizing: border-box; border-left: 2px solid var(--inora-accent); padding-left: 12px; font-family: var(--inora-sans); text-align: left; } #recommenda-container-4128 .recommenda-product-image-container::before { margin-top: 20px; padding-top: 2px; font-size: 14px; font-style: italic; line-height: 1.5; color: var(--inora-muted); content: ''; padding-bottom: 10px; } #recommenda-container-4128 .recommenda-product-image-container::after { order: 3; padding-bottom: 2px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--inora-ink); content: ''; } /* INORA_TESTIMONIAL_DREAM */ #recommenda-container-4128:has(.dream) .recommenda-product-image-container::before { content: '“I fall asleep faster, stay asleep, and wake up feeling like myself again.”'; } #recommenda-container-4128:has(.dream) .recommenda-product-image-container::after { content: 'Sarah, verified INORA customer'; } /* INORA_TESTIMONIAL_WAKE */ #recommenda-container-4128:has(.wake) .recommenda-product-image-container::before { content: '“I love that the energy feels steady and natural. No jitters or afternoon crash.”'; } #recommenda-container-4128:has(.wake) .recommenda-product-image-container::after { content: 'Lucy, verified INORA customer'; } /* INORA_TESTIMONIAL_MARATHON — EDIT ME (placeholder wording) */ #recommenda-container-4128:has(.marathon) .recommenda-product-image-container::before { content: '“These drops make me feel like I am investing in my future self every morning.”'; } #recommenda-container-4128:has(.marathon) .recommenda-product-image-container::after { content: 'GENEVIEVE, VERIFIED INORA CUSTOMER'; } /* --- description | benefits row ----------------------------------------- */ /* The product name is already in the hero, so hide it here. */ #recommenda-container-4128 .recommenda-product-name { display: none !important; } #recommenda-container-4128 .recommenda-variant-meta-description > p { order: 4; grid-column: 1; justify-self: stretch; font-family: var(--inora-sans) !important; font-size: 12.5px; line-height: 1.65; color: var(--inora-muted) !important; text-align: left; padding-right: 24px; margin: 34px 0 0 !important; display:none; } /* ✓ benefit list — your existing per-result ::before content, now column 2 */ #recommenda-container-4128 .recommenda-variant-meta-description::before { order: 5; justify-self: stretch; display: block; white-space: pre-line; font-family: var(--inora-sans); font-size: 14px; line-height: 1.85; color: #333; text-align: left; margin: 20px 0 20px; } #recommenda-container-4128:has(.wake) .recommenda-variant-meta-description::before { content: "Based on your responses, this doctor-formulated liquid supplement combining methylated B12, folate, panax ginseng and gotu kola is designed to support the body's natural energy production through multiple pathways - without the jitters or crash."; } #recommenda-container-4128:has(.marathon) .recommenda-variant-meta-description::before { content: "Based on your responses, this doctor-formulated liquid supplement featuring NAD+ precursor Nicotinamide Riboside, Lion's Mane, Vitamin C and potent antioxidants is designed to support cellular ageing, cognitive health and long-term vitality."; } #recommenda-container-4128:has(.dream) .recommenda-variant-meta-description::before { content: "Based on your responses, this award-winning liquid blend of valerian root, passionflower, lemon balm and montmorency cherry is designed to help you fall asleep faster, sleep more deeply and wake feeling refreshed."; } #recommenda-container-4128:has(.wake) .recommenda-variant-meta-description::after { content: "✓ Reduces tiredness & fatigue\A✓ Caffeine and stimulant-free\A✓ Multi-pathway energy support\A✓ Highly absorbable liquid format"; } #recommenda-container-4128:has(.marathon) .recommenda-variant-meta-description::after { content: "✓ Supports healthy cells\A✓ Supports healthy ageing\A✓ Antioxidant support against oxidative stress\A✓ Supports cognitive function"; } #recommenda-container-4128:has(.dream) .recommenda-variant-meta-description::after { content: "✓ 90% more restorative sleep\A✓ Improved sleep quality\A✓ Nervous system support\A✓ No next day grogginess\A✓ 90% reduced anxiety before bedtime"; } /* --- SIZE label + variant dropdown -------------------------------------- */ /* Pseudo-elements do not render on , and check the option order and the value="" ids against the :is() lists above. #recommenda-container-4128 .recommenda-product-item:has( .recommenda-product-variants-dropdown:not(.recommenda-selling-plan-dropdown) option:is(:not(:first-child), [value="56861934813509"], [value="56608187842885"]):checked) { outline: 3px solid red !important; } */ #recommenda-container-4128 .recommenda-product-price { order: 8; grid-column: 1 / -1; font-family: var(--inora-serif) !important; font-weight: 500 !important; color: var(--inora-ink) !important; text-align: center; margin: 22px 0 14px !important; font-size: 0 !important; /* hides the app's "GBP £70.00" */ } #recommenda-container-4128 .recommenda-product-price::after { content: var(--inora-price); font-size: 19px; } /* --- purchase type ------------------------------------------------------ */ #recommenda-container-4128 .recommenda-product-item > div:has(.recommenda-purchase-type-button) { order: 9; grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 2px; border-top: 0 !important; margin: 0 !important; padding: 0 !important; gap:10px; } #recommenda-container-4128 .recommenda-purchase-type-button { display: flex; align-items: center; gap: 10px; min-height: 34px; margin: 0 !important; font-family: var(--inora-sans) !important; font-size: 13px; color: var(--inora-ink) !important; cursor: pointer; width:100%; } /* Prices appended to each row. These follow the size dropdown too, because --inora-once / --inora-sub are set on the product

in section 4b and inherit down. Edit the amounts in section 0 (TOKENS), not here. */ #recommenda-container-4128 .recommenda-purchase-type-button:nth-child(1) .recommenda-purchase-type-text::after { content: ' (' var(--inora-once) ')'; color: var(--inora-muted); } #recommenda-container-4128 .recommenda-purchase-type-button:nth-child(2) .recommenda-purchase-type-text::after { content: ' (' var(--inora-sub) ')'; color: var(--inora-muted); } /* --- selling plan ------------------------------------------------------- */ #recommenda-container-4128 .recommenda-selling-plan-dropdown { order: 10; grid-column: 1 / -1; width: 100% !important; min-height: 44px; background-color: #fff; border: 1px solid var(--inora-rule); border-radius: 0; color: var(--inora-ink); font-family: var(--inora-sans) !important; font-size: 13px; padding: 0 12px; margin-top: 14px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 19px, calc(100% - 15px) 19px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; } /* A plan only applies to a subscription — hide it on one-time. */ #recommenda-container-4128 .recommenda-product-item:has(.recommenda-purchase-type-button:nth-child(1) input:checked) .recommenda-selling-plan-dropdown { display: none !important; } /* --- actions ------------------------------------------------------------ */ #recommenda-container-4128 .recommenda-add-to-cart-button { order: 11; grid-column: 1; justify-self: stretch; width: auto !important; min-height: 46px; margin: 16px 10px 0 0 !important; padding: 12px 18px !important; border: 1px solid var(--inora-btn) !important; background-color: var(--inora-btn) !important; color: var(--inora-btn-ink) !important; border-radius: 0 !important; font-size: 0 !important; /* hides "Add to Cart" */ display: flex !important; align-items: center; justify-content: center; cursor: pointer; } #recommenda-container-4128 .recommenda-add-to-cart-button::after { content: 'ADD TO CART'; font-family: var(--inora-sans); font-size: 10.5px; letter-spacing: 0.18em; color: var(--inora-btn-ink); width:100%; } /* the app's +/- quantity stubs are not in the mockup */ #recommenda-container-4128 .recommenda-add-to-cart-button-action-buttons { display: none !important; } #recommenda-container-4128 .recommenda-results-page-view-product-text_link { order: 12; grid-column: 2; justify-self: stretch; min-height: 46px; margin-top: 16px; padding: 12px 18px; border: 1px solid var(--inora-ink); background: transparent; display: flex !important; align-items: center; justify-content: center; text-decoration: none !important; font-size: 0; /* hides "View Product" */ min-width:100%; } #recommenda-container-4128 .recommenda-results-page-view-product-text_link::after { content: 'LEARN MORE'; font-family: var(--inora-sans); font-size: 10.5px; letter-spacing: 0.18em; color: var(--inora-ink); position: initial; width: 100%; display: block; background-color: transparent; transform: none; } #recommenda-container-4128 .recommenda-results-page-view-product-text_link .Polaris-Icon { display: none !important; } /* ========================================================================== 4. DISCOUNT STRIP ========================================================================== */ #recommenda-container-4128 .recommenda-discount-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 2px dashed var(--inora-rule); padding: 12px 14px; margin-top: 14px !important; box-sizing: border-box; } #recommenda-container-4128 .recommenda-discount-box * { font-family: var(--inora-sans) !important; font-size: 14px !important; color: var(--inora-muted) !important; margin-bottom: 0; } #recommenda-container-4128 .recommenda-discount-box button { background: transparent; border: 0; padding: 4px 0; color: var(--inora-ink) !important; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; width: auto; gap: 0; min-width:135px; } #recommenda-container-4128 .recommenda-discount-box button svg { width: 11px; height: 11px; fill: currentColor; } /* ========================================================================== 5. BELOW THE PRODUCT (authored — BLOCK C) ========================================================================== */ #recommenda-container-4128 .inora-below { text-align: center; } /* section headings with flanking rules */ #recommenda-container-4128 .inora-section-heading { display: flex; align-items: center; gap: 16px; font-family: var(--inora-serif) !important; font-size: clamp(16px, 3.2vw, 20px); font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; text-align: center; margin: 56px 0 26px !important; } #recommenda-container-4128 .inora-section-heading::before, #recommenda-container-4128 .inora-section-heading::after { content: ''; flex: 1 1 0; height: 1px; background: var(--inora-rule); } /* --- duo ---------------------------------------------------------------- */ #recommenda-container-4128 .inora-duo-media img { width: 100%; max-width: 170px; /* EDIT ME — duo image width */ height: auto; display: block; margin: 0 auto; } #recommenda-container-4128 .inora-duo-title { font-family: var(--inora-serif) !important; font-size: clamp(15px, 3vw, 18px); font-weight: 500 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; margin: 22px 0 14px !important; } #recommenda-container-4128 .inora-duo-copy { font-family: var(--inora-sans) !important; font-size: 12.5px; line-height: 1.65; color: var(--inora-muted); max-width: 400px; margin: 0 auto 16px !important; } #recommenda-container-4128 .inora-duo-price { font-family: var(--inora-sans) !important; font-size: 13px; margin: 0 0 18px !important; } #recommenda-container-4128 .inora-duo-price s { color: var(--inora-muted); margin-right: 6px; } #recommenda-container-4128 .inora-duo-price strong { font-weight: 700 !important; } #recommenda-container-4128 .inora-duo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 380px; margin: 0 auto !important; } /* shared button styling — also covers an app-rendered add-to-cart button if the pairing product renders one instead of the authored link */ #recommenda-container-4128 .inora-btn, #recommenda-container-4128 .recommenda-products-list:not(.layout-adaptive) .recommenda-add-to-cart-button { display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px; padding: 11px 16px !important; border: 1px solid var(--inora-btn) !important; background-color: var(--inora-btn) !important; color: var(--inora-btn-ink) !important; border-radius: 0 !important; font-family: var(--inora-sans) !important; font-size: 10.5px !important; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none !important; text-align: center; cursor: pointer; } #recommenda-container-4128 .inora-btn--ghost { background-color: transparent !important; color: var(--inora-ink) !important; border-color: var(--inora-ink) !important; } /* --- why subscribe ----------------------------------------------------- */ #recommenda-container-4128 .inora-why { max-width: 440px; margin: 0 auto 26px; } #recommenda-container-4128 .inora-why p { font-family: var(--inora-sans) !important; font-size: 12.5px; line-height: 1.7; color: var(--inora-muted); margin: 0 0 14px !important; } #recommenda-container-4128 .inora-tiles { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--inora-rule); margin: 0 !important; padding: 0 !important; } #recommenda-container-4128 .inora-tiles li { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 54px; padding: 14px 10px; border-left: 1px solid var(--inora-rule); font-family: var(--inora-sans) !important; font-size: 10px; line-height: 1.4; letter-spacing: 0.04em; color: var(--inora-muted); } #recommenda-container-4128 .inora-tiles li:first-child { border-left: 0; } #recommenda-container-4128 .inora-sublink { margin: 26px 0 0 !important; } #recommenda-container-4128 .inora-sublink a { font-family: var(--inora-sans) !important; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--inora-ink); text-decoration: underline; text-underline-offset: 4px; } #recommenda-container-4128 .inora-marker { font-size: 0 !important; margin: 0 !important; height: 0; overflow: hidden; } /* ========================================================================== 6. RETAKE ========================================================================== */ #recommenda-container-4128 .recommenda-buttons-wrapper-retake { display: flex !important; align-items: center; justify-content: center; margin-top: 30px; padding-bottom: 0 !important; } #recommenda-container-4128 .recommenda-button-retake, #recommenda-container-4128 .recommenda-retake-icon-box .Polaris-Icon { font-family: var(--inora-sans) !important; font-size: 10px !important; letter-spacing: 0.18em; text-transform: uppercase; color: var(--inora-muted) !important; } /* ========================================================================== 7. RESPONSIVE ========================================================================== */ @media (max-width: 699px) { #recommenda-container-4128 { --inora-image: 150px; --inora-content: 100%; } #recommenda-container-4128 .recommenda-title { font-size:2rem!important; } #recommenda-container-4128 .recommenda-results-page-content { padding: 26px 16px 34px; border-radius: 18px !important; } /* description above benefits instead of beside them */ #recommenda-container-4128 .recommenda-product-item { grid-template-columns: minmax(0, 1fr); } #recommenda-container-4128 .recommenda-variant-meta-description > p, #recommenda-container-4128 .recommenda-variant-meta-description::before { grid-column: 1; padding-right: 0; margin-top: 22px !important; } /* full-width stacked buttons */ #recommenda-container-4128 .recommenda-add-to-cart-button, #recommenda-container-4128 .recommenda-results-page-view-product-text_link { grid-column: 1; width: 100% !important; margin-right: 0 !important; } #recommenda-container-4128 .recommenda-results-page-view-product-text_link { margin-top: 10px; } #recommenda-container-4128 .inora-duo-actions { grid-template-columns: minmax(0, 1fr); } /* tiles 2 x 2 */ #recommenda-container-4128 .inora-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } #recommenda-container-4128 .inora-tiles li:nth-child(3) { border-left: 0; } #recommenda-container-4128 .inora-tiles li:nth-child(n + 3) { border-top: 1px solid var(--inora-rule); } /* Keep the rules flexible (flex: 1 1 0 from the base rule) — pinning them to a fixed width leaves a short heading like "Why Subscribe" sitting off-centre. */ #recommenda-container-4128 .inora-section-heading { gap: 10px; margin-top: 42px !important; } #recommenda-container-4128 .recommenda-discount-box { align-items: flex-start; gap: 4px; } /* tighter divider above the product block */ #recommenda-container-4128 .recommenda-products-list.layout-adaptive { margin-top: 26px !important; padding-top: 28px !important; } #recommenda-container-4128 .recommenda-product-title::before { margin-bottom: 20px; } } /* The tiles stay 2 x 2 all the way down — four stacked rows made the block needlessly tall, and the 10px labels wrap fine in a half-width cell. */ /* ========================================================================== 8. CARRIED OVER FROM THE PREVIOUS CUSTOM CSS ========================================================================== */ @media (max-width: 575px) { #recommenda-container-4128 .recommenda-wrapper { justify-content: flex-start !important; } #recommenda-container-4128 .recommenda-question-container { height: auto !important; } #recommenda-container-4128 .recommenda-buttons-wrapper { position: static !important; margin: 0 auto !important; } #recommenda-container-4128 .recommenda-questions-wrapper { padding-bottom: 10px !important; } } /* quiz (question) screens — unchanged behaviour */ #recommenda-container-4128 .recommenda-question-title { margin: 0 0 30px !important; } #recommenda-container-4128 .recommenda-question-title * { font-weight: 400 !important; } #recommenda-container-4128 ul.recommenda-question-answers-list { gap: 30px !important; } #recommenda-container-4128 .recommenda-question-answer { border-radius: 0 !important; } #recommenda-container-4128 .recommenda-wrapper .recommenda-buttons-wrapper .recommenda-start-quiz { background-color: #ffffff !important; color: #000000 !important; } #recommenda-container-4128 #recommenda-question-25047 .recommenda-question-answers-wrap, #recommenda-container-4128 #recommenda-question-25047 .recommenda-question-answers-wrap *, #recommenda-container-4128 #recommenda-question-25051 .recommenda-question-answers-wrap, #recommenda-container-4128 #recommenda-question-25051 .recommenda-question-answers-wrap *, #recommenda-container-4128 .recommenda-email-skip-button * { color: #000000 !important; } .recommenda-container-minimal-theme .recommenda-question-answers-list li:not(.recommenda-question-picture-choice-container) { border-radius: 0px !important; } /* ========================================================================== 9. KNOWN LIMITS (CSS cannot do these) ========================================================================== a) SIZE PILLS.