/* htr-blog 0.1.4 — the site stylesheet (23 Oct 2026): what EVERY single post gets, on the old design and on the new (body.htrb). Loaded on every single post (HTRB_Frontend::enqueue_site(), and first in enqueue() on posts htr-blog renders, before htr-blog.css and htr-blog-modules.css, which win where they say more). It holds: 1. the two affiliate lines (moved here unchanged from htr-blog-affiliate.css, 0.1.3); 2. the standard media frame — the FIXES (founder, 22–23 Oct 2026: "nothing wider than the column on phones"): YouTube at 16:9 and the column's width, other iframes clamped, images never wider than the column and never upscaled, their width/height attributes kept so nothing jumps, tables that scroll sideways on phones (and tablets), Elementor widgets with an author's fixed width clamped; on touch phones the experts' banners and large photos (marked htrb-bleed by the transform) run edge to edge. The LOOK of images (one radius, spacing, captions) is the new design's alone (htr-blog.css §2, body.htrb); 3. YouTube Shorts (9:16): centred at about a phone's width, never filling the screen (the transform adds htrb-short to the iframe and its figure.wp-block-embed, or to an Elementor video widget; the new design's click-to-play Short, .htrb-video--short, is in htr-blog-modules.css); 4. ONE Amazon button (founder, 23 Oct 2026, option A "HealThyRam orange" of docs/htr-blog-amazon-button-options-23Oct2026.html): orange, ink text, a small cart, 44 px high, 15 px 600, 4 px corners — our a.htrb-amzbtn and the Hostinger affiliate boxes' "Check price on Amazon" alike; full width inside the boxes on phones; 4b. (0.1.7) Amazon product cards (buttons on one line at the bottom, photos square and centred) and product rows (one table row per product, no empty or price columns) built in Elementor; 5. reduced motion. Rules of the house (as htr-blog.css): tokens only (htrb-tokens = ht-tokens.css v2.1.1) — no hex, rgb() or rem; unitless line heights 1.3 / 1.5 and 1 px hairlines are written as numbers; ink-tinted shadows; subtle motion, none under prefers-reduced-motion; 4 px control corners (--radius-control). Weights, so that the two designs never fight: - A fix that htr-blog.css already makes on the new design (images, linked images, tables, Elementor widget widths) is scoped body:not(.htrb) here. What htr-blog.css does not touch (iframes, Shorts, the Amazon button) applies to every post. - Post content only: :where(.single-post-wrapper > .entry-content) — zero weight, so the scope adds nothing — or, on Elementor's full-width template (no .single-post-wrapper, e.g. post 75815), the post's own document .elementor[data-elementor-type="wp-post"]. - Media fixes are light (zero-weight scope + the element), except where a named rule must be beaten (the block library's embed rules (0,2,1); Elementor's per-post rules (0,3,0) and (0,4,0)). !important appears only against inline styles: an image's or a YouTube iframe's inline height, a Short's inline width, and the button's background and shadow (the transform keeps the link's inline style byte for byte). - Hostinger affiliate boxes: their button rules are (0,1,0) (colours through custom properties with !important): we set their custom properties and out-weigh the rest at (0,2,1), without !important. */ /* ── 1. The two affiliate lines ──────────────────────────────────────────────────────────────────────────────────── */ /* The founder's decision (22 Oct 2026): every post with affiliate links shows "Affiliate links: HealThyRam may earn a commission, at no extra cost to you." at the top, and posts with an Amazon link show Amazon's sentence after the text, both in small grey text (the byline's size), whatever the mode. Posts on the new design style the same lines in htr-blog-modules.css. The lines keep the post's own font. The doubled class outweighs the theme's and Elementor's paragraph rules ((0,1,1) and (0,2,0) at most around post text) without !important. */ .htrb-disclosure.htrb-disclosure, .htrb-amazon-note.htrb-amazon-note { box-sizing: border-box; display: block; padding: 0; border: 0; background: none; font-style: normal; font-weight: 400; letter-spacing: normal; line-height: 1.5; text-align: left; text-indent: 0; text-transform: none; text-shadow: none; color: var(--ht-muted); } /* At the top of the post: 14 px, the byline's size, muted grey (5.7:1 on white) — the founder's "byline size" after the compliance review (22 Oct 2026). */ .htrb-disclosure.htrb-disclosure { margin: 0 0 var(--space-4); font-size: var(--type-small); } /* After the text: Amazon's sentence, 13 px, on a line of its own. */ .htrb-amazon-note.htrb-amazon-note { margin: var(--space-6) 0 0; font-size: var(--type-tooltip); } /* ── 2. The standard media frame: the fixes ──────────────────────────────────────────────────────────────────────── */ /* Images (old design; htr-blog.css §2 on the new). Martfury already keeps an image inside the column (img { max-width: 100% }) and lets its height follow (img:not(.lazy) { height: auto }); nothing here sets a width, so a small image is never upscaled. The block editor writes a crop inline on some images (style="object-fit:cover; width:1200px;height:406px", 42247, 42307, 51623): the width gives way to the column, the inline height does not, and on a phone the picture is cut to a 345 × 406 portrait slice. On phones the height follows the width again, from the width and height attributes, so the space is reserved before the image loads; only !important releases an inline height. Wide screens keep the author's crop. */ @media (max-width: 767px) { body:not(.htrb) :where(.single-post-wrapper > .entry-content) img[style*="height"] { height: auto !important; } } /* A linked image sits in an inline-block link (block library, Elementor image widget). Until the image has loaded (LiteSpeed's lazy-load placeholder, a failed load) the link takes the image's width attribute, 1200 px and more, and the page grows wider than a phone: the link stays inside the column too. A classic caption box carries its image's width inline (style="width: 1210px"): it gives way to the column the same way. */ body:not(.htrb) :where(.single-post-wrapper > .entry-content) figure > a, body:not(.htrb) :where(.single-post-wrapper > .entry-content .elementor-widget-image) a, body:not(.htrb) :where(.single-post-wrapper > .entry-content) .wp-caption { max-width: 100%; } /* Iframes (every post: htr-blog.css has no iframe rule). Old posts paste YouTube's 560 × 315 iframe as it comes (live: kerala-ayurveda-ashwagandhadi-lehyam-500gm-review made the page 575 px wide on a phone): at most the column's width, and the height follows at 16:9 — on wide screens 560 × 315 as before. In Elementor text widgets the iframe already spans the column (Elementor: .elementor iframe { width: 100% }) at its 315 px height, a letterboxed strip (1150 × 315 on wide screens, 325 × 315 on phones): it becomes 16:9 too (325 × 183 on phones). Other iframes (web stories, maps) are only kept inside the column. Iframes that a wrapper already sizes are left to it: the block editor's responsive embeds (.wp-has-aspect-ratio), Elementor's video player (.elementor-wrapper) and our facade's (.htrb-video__frame). */ :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) iframe { max-width: 100%; } /* The founder (23 Oct 2026): "720 px, centred". On old-design posts these YouTube iframes stand at most the reading width (--measure-article, as on the new design), centred: the full-column Elementor and inline-sized ones 720 × 405 instead of 1150 × 647, a pasted 560 × 315 one centred at its own width. Phones keep the column's width (min()). A Short keeps its own width (§3). (0,1,2) out-weighs Elementor's .elementor iframe { width: 100%; margin: 0 } ((0,1,1)); without min() the declaration drops and the column's 100% stays. */ body:not(.htrb) :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) iframe:where([src*="youtube.com/embed"], [src*="youtube-nocookie.com/embed"], [data-src*="youtube.com/embed"], [data-src*="youtube-nocookie.com/embed"]):not(:where(.wp-has-aspect-ratio iframe, .elementor-wrapper iframe, .htrb-video__frame iframe, .htrb-short, .htrb-short iframe)) { display: block; max-width: min(100%, var(--measure-article)); margin-right: auto; margin-left: auto; } @supports (aspect-ratio: 16 / 9) { :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) iframe:where([src*="youtube.com/embed"], [src*="youtube-nocookie.com/embed"], [data-src*="youtube.com/embed"], [data-src*="youtube-nocookie.com/embed"]):not(:where(.wp-has-aspect-ratio iframe, .elementor-wrapper iframe, .htrb-video__frame iframe)) { height: auto; aspect-ratio: 16 / 9; } /* 21 posts (36199–38656, 58 videos) write the size inline (style="width: 100%; height: 360px; border-radius: 12px"): 1150 × 360 on wide screens, 343 × 360 on phones. Only !important releases an inline height. */ :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) iframe:where([src*="youtube.com/embed"], [src*="youtube-nocookie.com/embed"], [data-src*="youtube.com/embed"], [data-src*="youtube-nocookie.com/embed"])[style*="height"]:not(:where(.wp-has-aspect-ratio iframe, .elementor-wrapper iframe, .htrb-video__frame iframe)) { height: auto !important; } } /* Tables (old design; htr-blog.css §2 on the new): on phones and tablets (below 992 px, where Martfury's column is at most 720 px wide) a table wider than the column scrolls inside its own box instead of widening the page (live: unlock-ancient-wisdom-5-must-read-ayurveda-books-for-2023, a six-column table in an Elementor text widget: 782 px at 375, 786 px at 768). A table that fits keeps its look, cell for cell (the box is only as wide as the table needs, at most the column; no minimum cell width, which would re-wrap a fitting table: kumkumadi-tailam's two columns grew from 767 to 854 px tall with the new design's 7em). The block editor's table figure already scrolls (block library), and the Hostinger boxes lay out their own. Wide screens are untouched. */ @media (max-width: 991px) { body:not(.htrb) :where(.single-post-wrapper > .entry-content) table:not(:where(.wp-block-table table, [class*="hostinger-affiliate"] table, table table)) { display: block; width: max-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Elementor (old design; htr-blog.css §3 on the new): no widget wider than the column on a phone or tablet. An author's fixed width (Elementor's custom width, per-post rules at (0,3,0); 72438: a banner at 723 px) is clamped there; wide screens (992 px and up) keep the author's layout. */ @media (max-width: 991px) { body:not(.htrb) .single-post-wrapper > .entry-content .elementor-element.elementor-widget { max-width: 100%; } } /* The footer hangs past each side of a phone: its social icons (−10 px margins on a full-width row) and its widget row (−15 px margins inside a container with no padding: 405 px on a 375 px phone, 16 px of sideways scroll on every post; measured 23 Oct 2026). Kept inside the screen on blog posts, both designs (htr-blog.css already does the icons on the new one); the site-wide fix is the skin's. */ @media (max-width: 767px) { body:not(.htrb).single-post .site-footer .social-links-list { margin-right: 0; margin-left: 0; } body.single-post .site-footer #footer-widgets.footer-widgets { margin-right: 0; margin-left: 0; } } /* 0.1.7 (team finding, 24 Oct 2026): some posts keep the Ayurveda doctor's banner (the one approved banner, HB19) from phones and tablets with Elementor's per-device switches (27124: a section of six banners marked "hide on tablet" and "hide on mobile", no copy for phones). It shows there too, laid out as on every other post (the full-width phone rules below); the section's other banners and its spacers stay hidden there (with the banners_hide switch on, the other banners are gone anyway). The doctor's banner is known by its approved link (plan banners writes it). Only a section that holds nothing but banners and spacers, that is not hidden on desktops as well (an author's switched-off section stays off), and only in a post without a phone copy of that banner (a section hidden on desktops: 71541, 71585, 72438 — it would show twice). Corpus: 8 posts hide such a section (11224, 11249, 27124, 27265, 27283, 27285, 32760, 47561). The post's content is unchanged: this overrides Elementor's .elementor .elementor-hidden-mobile / -tablet { display: none } (0,2,0), up to Elementor's tablet breakpoint. */ @media (max-width: 1024px) { body.single-post .elementor[data-elementor-type="wp-post"]:not(:has(.elementor-hidden-desktop:not(.elementor-hidden-mobile) [class*="elementor-widget-martfury-banner"] a[href*="/shop/consult-ayurveda-doctor-online"])) .elementor-section:is(.elementor-hidden-mobile, .elementor-hidden-phone, .elementor-hidden-tablet):not(.elementor-hidden-desktop):has([class*="elementor-widget-martfury-banner"] a[href*="/shop/consult-ayurveda-doctor-online"]):not(:has(.elementor-widget:not([class*="elementor-widget-martfury-banner"], .elementor-widget-spacer))) { display: block; } body.single-post .elementor[data-elementor-type="wp-post"]:not(:has(.elementor-hidden-desktop:not(.elementor-hidden-mobile) [class*="elementor-widget-martfury-banner"] a[href*="/shop/consult-ayurveda-doctor-online"])) .elementor-section:is(.elementor-hidden-mobile, .elementor-hidden-phone, .elementor-hidden-tablet):not(.elementor-hidden-desktop):has([class*="elementor-widget-martfury-banner"] a[href*="/shop/consult-ayurveda-doctor-online"]):not(:has(.elementor-widget:not([class*="elementor-widget-martfury-banner"], .elementor-widget-spacer))) :is([class*="elementor-widget-martfury-banner"]:not(:has(a[href*="/shop/consult-ayurveda-doctor-online"])), .elementor-widget-spacer) { display: none; } } /* The approved banner's title reads "Meet Dr. Sandeep Madaan," and "MD (Ayurveda)" on two lines (plan banners writes a newline between them, 0.1.7). Martfury's own .banner-title rule already keeps newlines (white-space: pre-line); this restates it for the banner widgets in posts, in case the theme's rule changes. */ body.single-post .elementor-widget[class*="elementor-widget-martfury-banner"] .banner-title { white-space: pre-line; } /* 0.1.7: when the other promo banners go (plan banners_hide, every post), the doctor's banner is often left alone in a section built as two 50 % columns (21144, 21515, 21701, 27124, 27198, 36199, 47561, 52384 …): a blank half beside it on tablets and desktops. The transform marks that last column htrb-solo; it takes the section's full width. Out-weighs Elementor's .elementor-col-50 (0,2,0) and an author's custom width (.elementor- .elementor-element .elementor-element-, (0,3,0)). The dead-links pass marks a column left alone by a removed call-to-action box htrb-solo-col (25762's video and event text): the same rule. */ @media (min-width: 768px) { body.single-post .elementor-section > .elementor-container > .elementor-column.elementor-element:is(.htrb-solo, .htrb-solo-col) { width: 100%; } } /* On a phone the experts' banners (Martfury banner widgets inside a post) run the full width of the screen, the same on every post (the founder, 23 Oct 2026: "consistent and full width of the device"). They sat 16 px in on the new design and 25 px in on the old (the two designs' text gutters); text keeps its gutter. The column is centred, so 50% − 50vw on each side reaches the screen's edges; the old design's 100% cap above is outranked here. Authors' own negative side margins on the widget's container (−16 px on 36742's two banners: 407 px wide, 23 px of sideways scroll once full width) are dropped, and every banner's text starts the same distance in (20 / 30 px before). Measured in the test browser at 375 px on 36742 (old) and 51973 (new), 23 Oct 2026: 0 px each side, no scroll. Touch screens only: on a narrowed desktop window 100vw counts the scrollbar (15–17 px of sideways scroll). */ @media (max-width: 767px) and (pointer: coarse) { body.single-post .single-post-wrapper > .entry-content .elementor-element.elementor-widget[class*="elementor-widget-martfury-banner"] { width: 100vw; max-width: 100vw; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); } body.single-post .single-post-wrapper > .entry-content .elementor-element.elementor-widget[class*="elementor-widget-martfury-banner"] > .elementor-widget-container { margin-right: 0; margin-left: 0; } body.single-post .single-post-wrapper > .entry-content .elementor-element.elementor-widget[class*="elementor-widget-martfury-banner"] .banner-content { padding-right: var(--space-5); padding-left: var(--space-5); } /* The banner's photo fills the widened banner (founder's phone screenshot of 71541, 23 Oct 2026: a grey strip from 327 to 375 px). Authors tuned a mobile background-position per widget (−906px 0, −750px 0) for the old, narrower column, and one sets background-size: auto (51973): the photo now covers the box and keeps its right side, where the person on these banners stands. (0,7,1) out-weighs Elementor's per-element rule (.elementor- .elementor-element.elementor-element- .mf-elementor-banner-medium .banner-featured-image, (0,5,0)); none of it is inline. */ body.single-post .single-post-wrapper > .entry-content .elementor-element.elementor-widget[class*="elementor-widget-martfury-banner"] .banner-featured-image { background-position: right center; background-size: cover; } /* Large photos run edge to edge too, on every post (the founder, 23 Oct 2026: "images need to be edge to edge"). The transform marks the block that holds a stand-alone photo at least 600 px wide with htrb-bleed (an Elementor image widget, a figure, or a paragraph or div showing only the photo; never in our modules, Hostinger boxes, tables, lists, galleries, cards or banners), so nothing moves once the page has loaded. The block takes the screen's width as the banners do; the photo fills it (100vw, held to its block by max-width: 100%, which also tames an author's inline width such as 42247's width:1200px), square-cornered at the edge (the new design's 8 px radius only goes on these), its height from its width again (only !important releases an inline height). A caption keeps the text gutter. An Elementor widget's own side margins and padding go, and its per-element widths and radius ((0,4,1)) are out-weighed; the theme's featured image (hidden on single posts by the site's Additional CSS) is ready for the same. Elementor's full-width template (75815) is not touched: its sections already span the screen. The block's width and side margins carry !important: an inline width: 100% (or a caption box's inline width) on the marked block would otherwise keep it at the column's width, pinned to the left edge (the transform never marks a block whose inline style indents or narrows it). */ body.single-post .single-post-wrapper > .entry-content .htrb-bleed, body.single-post .single-post-wrapper > .entry-content .elementor-element.elementor-widget.htrb-bleed, body.single-post #mf-single-entry-format > .featured-image-post { width: 100vw !important; max-width: 100vw !important; margin-right: calc(50% - 50vw) !important; margin-left: calc(50% - 50vw) !important; } body.single-post .single-post-wrapper > .entry-content .elementor-element.elementor-widget.htrb-bleed > .elementor-widget-container { margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0; } body.single-post .single-post-wrapper > .entry-content .htrb-bleed img, body.single-post .single-post-wrapper > .entry-content .elementor-element.elementor-widget.htrb-bleed img, body.single-post #mf-single-entry-format > .featured-image-post img { display: block; width: 100vw; max-width: 100%; height: auto; border-radius: 0; } body.single-post .single-post-wrapper > .entry-content .htrb-bleed img[style*="height"] { height: auto !important; } /* Captions start where the text does: 16 px in on the new design, and on the old one 24 px (--space-6, the nearest token to its 25 px gutter: 1 px short). */ body.htrb.single-post .single-post-wrapper > .entry-content .htrb-bleed figcaption, body.htrb.single-post .single-post-wrapper > .entry-content .htrb-bleed .wp-caption-text, body.htrb.single-post .single-post-wrapper > .entry-content .htrb-bleed .widget-image-caption { padding-right: var(--space-4); padding-left: var(--space-4); } body.single-post:not(.htrb) .single-post-wrapper > .entry-content .htrb-bleed figcaption, body.single-post:not(.htrb) .single-post-wrapper > .entry-content .htrb-bleed .wp-caption-text, body.single-post:not(.htrb) .single-post-wrapper > .entry-content .htrb-bleed .widget-image-caption { padding-right: var(--space-6); padding-left: var(--space-6); } } /* ── 3. YouTube Shorts (every post) ────────────────────────────────────────────────────────────────────────────── */ /* A Short is 9:16. At the column's width it would be 1,550 px tall on a wide screen, so it stands centred at about a phone's width: 360 px (the --space-12 scale × 7.5), never wider than the column, and never taller than three quarters of the window (75vh × 9 / 16 wide), so it never fills the screen. On a 375 px phone: 343 × 610; on wide screens 360 × 640. The same frame for the click-to-play Short in htr-blog-modules.css. Without aspect-ratio (Safari before 15) the iframe keeps its own height inside the narrower width. (--htrb-short-width is set on each frame, so its 100% is that frame's column.) */ @supports (aspect-ratio: 9 / 16) and (width: min(1px, 2%)) { /* The iframe on its own (old posts paste it in a paragraph or a text widget). The doubled class out-weighs Elementor's .elementor iframe { width: 100%; margin: 0 } ((0,1,1)), whichever loads last. */ :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) iframe.htrb-short.htrb-short { --htrb-short-width: min(100%, calc(var(--space-12) * 7.5), calc(75vh * 9 / 16)); display: block; width: var(--htrb-short-width); max-width: 100%; height: auto; margin-right: auto; margin-left: auto; aspect-ratio: 9 / 16; } /* A Short whose size is written inline (style="width: 100%; …", see the iframes above) would stand 9:16 at the column's whole width: the inline width gives way (its height already does, above). */ :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) iframe.htrb-short.htrb-short[style*="width"] { width: var(--htrb-short-width) !important; } /* The block editor's embed: the figure takes the Short's width, centred; its wrapper drops the 16:9 spacer of the block library ((0,3,1)) and the iframe sits in the flow at 9:16 instead of filling that spacer ((0,2,1)). */ :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) figure.htrb-short.wp-block-embed { --htrb-short-width: min(100%, calc(var(--space-12) * 7.5), calc(75vh * 9 / 16)); width: var(--htrb-short-width); max-width: 100%; margin-right: auto; margin-left: auto; } :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) figure.htrb-short.wp-block-embed .wp-block-embed__wrapper::before { content: none; display: none; } :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) figure.htrb-short.wp-block-embed .wp-block-embed__wrapper iframe { position: static; display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 9 / 16; } /* Elementor's video widget: its player box takes the ratio from --video-aspect-ratio, which the post's own CSS sets at (0,3,0) (.elementor- .elementor-element.elementor-element- .elementor-wrapper). Here (0,5,0). The player Elementor's script adds inside fills that box. */ .elementor .elementor-element.elementor-widget-video.htrb-short .elementor-wrapper { --htrb-short-width: min(100%, calc(var(--space-12) * 7.5), calc(75vh * 9 / 16)); --video-aspect-ratio: 0.5625; width: var(--htrb-short-width); max-width: 100%; margin-right: auto; margin-left: auto; } } /* ── 4. The Amazon button ──────────────────────────────────────────────────────────────────────────────────────── */ /* Option A, "HealThyRam orange": the brand orange with ink text (7.8:1; 6.3:1 on the hover orange; never white on orange), a small cart drawn in the text colour, 44 px high, 15 px 600 (halfway between --type-small and --type-body, the founder's size), 4 px corners, a hairline of shadow; on hover a slightly darker orange. A 1 px transparent border keeps both kinds the same size (the Hostinger button has one) and shows as an outline in forced-colours mode. Shadow: the ink --shadow-card, not the green --shadow-btn of our own green buttons (a green glow under an orange button reads as a mistake) — a deliberate exception to design-system readme §Buttons. The label wraps to a second, balanced line in a narrow column (Elementor six-column rows on 47561 and 52384 at 768–991 px, and text zoom / WCAG 1.4.12 spacing) instead of spilling out; one line everywhere else. Our link (a.htrb-amzbtn: the transform's 307 "buy on Amazon" links — image links in Elementor image widgets, in paragraphs and in figure.aligncenter, and text links alone in a paragraph; the class may sit anywhere in the attribute, which class selectors do not mind) and the Hostinger boxes' button share one rule at (0,2,1): heavier than every link rule around them — Bootstrap's and the theme's a, a:hover, a:focus, Elementor's .elementor a { box-shadow: none } and .elementor-widget-image a { display: inline-block }, the skin's .site-content a ((0,1,1)), the Hostinger button rules ((0,1,0)). Our class is written twice for that weight. In an Elementor image widget the button stays inline-flex and centred (the widget's text-align: center), as in the mock. */ a.htrb-amzbtn.htrb-amzbtn, a[class*="hostinger-affiliate-block-"][class*="__product-amazon-button"] { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; width: auto; min-width: 0; max-width: 100%; height: auto; min-height: var(--target-min); margin: 0; padding: var(--space-1) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-control); background-color: var(--ht-orange); background-image: none; box-shadow: var(--shadow-card); color: var(--ht-ink); font-family: var(--ht-font-body); font-feature-settings: normal; font-size: calc((var(--type-small) + var(--type-body)) / 2); font-style: normal; font-weight: 600; line-height: 1.3; letter-spacing: normal; text-align: center; text-decoration: none; text-shadow: none; text-transform: none; white-space: normal; text-wrap: balance; vertical-align: middle; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default); } /* Our link keeps its attributes byte for byte, its old inline style among them: 225 of the 307 carry "text-decoration: none; box-shadow: none;" and 6 a white background-color. Only !important beats an inline style, so the background and the shadow carry it (the house rule: !important only against inline styles); nothing else needs it (the inline text-decoration: none is ours too). */ a.htrb-amzbtn.htrb-amzbtn { background-color: var(--ht-orange) !important; box-shadow: var(--shadow-card) !important; font-weight: 600 !important; /* 6 links carry an inline Elementor font-weight */ } /* The product's name after the label, for screen readers only ("Check price on Amazon: Kasni Cough Syrup"): the transform takes it from the old picture's alt or the link's title, so the ~300 buttons are not all the same link. */ a.htrb-amzbtn .htrb-amzbtn__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; } /* Hover: a darker orange (without color-mix() the declaration is dropped and the orange stays; the shadow still lifts). */ a.htrb-amzbtn.htrb-amzbtn:hover, a.htrb-amzbtn.htrb-amzbtn:active { background-color: color-mix(in srgb, var(--ht-orange) 88%, var(--ht-ink)) !important; box-shadow: var(--shadow-card-hover) !important; color: var(--ht-ink); text-decoration: none; } /* The cart: an inline without colour attributes (width and height 18), stroked in the text colour with no fill, 18 px at the button's 15 px. */ a.htrb-amzbtn.htrb-amzbtn .htrb-amzbtn__icon { display: inline-flex; flex: none; width: 1.2em; height: 1.2em; margin: 0; padding: 0; } a.htrb-amzbtn.htrb-amzbtn .htrb-amzbtn__icon svg { display: block; width: 100%; max-width: none; height: 100%; margin: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* An Elementor image widget that held a button picture keeps the custom width the author gave the picture (.elementor-widget__width-initial; live 47561: 67.7 % of a 264 px column, 179 px, Elementor's per-post rule at (0,3,0)): too narrow for the button's words, which stay on one line. The widget takes the button's width instead, never more than its column, and stays where the column puts it (47561: centred). (0,4,1); a browser without :has() keeps the narrow widget. */ .elementor-element.elementor-widget-image.elementor-widget__width-initial:has(a.htrb-amzbtn) { width: auto; max-width: 100%; } /* The Hostinger affiliate boxes' "Check price on Amazon" (layouts list-simple and single-type are live; the other layouts use the same class pattern). Their plugin sets the colours with !important through custom properties (--amazon-button-*, on :root), so the shared rule's background, border and text colours lose there: the properties are set on the button itself instead, with the same values; their other rules are (0,1,0), so nothing needs !important. Their text-decoration: none is already !important. The hover colour is a custom property too: a browser without color-mix() would turn the button transparent on hover, so the darker orange is set only where color-mix() works (below); elsewhere the hover keeps the orange and lifts the shadow. */ a[class*="hostinger-affiliate-block-"][class*="__product-amazon-button"] { --amazon-button-bg: var(--ht-orange); --amazon-button-bg-hover: var(--ht-orange); --amazon-button-bg-active: var(--ht-orange); --amazon-button-border: transparent; --amazon-button-border-hover: transparent; --amazon-button-border-active: transparent; --amazon-button-color: var(--ht-ink); } @supports (color: color-mix(in srgb, white 50%, black)) { a[class*="hostinger-affiliate-block-"][class*="__product-amazon-button"] { --amazon-button-bg-hover: color-mix(in srgb, var(--ht-orange) 88%, var(--ht-ink)); --amazon-button-bg-active: color-mix(in srgb, var(--ht-orange) 88%, var(--ht-ink)); } } a[class*="hostinger-affiliate-block-"][class*="__product-amazon-button"]:hover, a[class*="hostinger-affiliate-block-"][class*="__product-amazon-button"]:active { box-shadow: var(--shadow-card-hover); } /* Their buttons hold only text: the same cart, drawn by CSS as a mask filled with the text colour. Only where masks work, so no browser ever shows a solid square instead; in forced-colours mode the fill stays the (forced) text colour instead of turning into the page colour. */ @supports (mask-image: none) or (-webkit-mask-image: none) { a[class*="hostinger-affiliate-block-"][class*="__product-amazon-button"]::before { content: ""; display: block; flex: none; width: 1.2em; height: 1.2em; background-color: currentColor; forced-color-adjust: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3.5h2.6l2.4 11.2a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.2l1.7-7.3H6.1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3.5h2.6l2.4 11.2a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.2l1.7-7.3H6.1'/%3E%3C/svg%3E") center / contain no-repeat; } } /* Focus: the site's CSS removes outlines (a:focus { outline: 0 }) and Hostinger draws its own purple ring ((0,2,0)): the design system's ring on both. */ a.htrb-amzbtn.htrb-amzbtn:focus-visible, a[class*="hostinger-affiliate-block-"][class*="__product-amazon-button"]:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); box-shadow: var(--shadow-card); } /* Phones: inside the boxes the button takes the box's whole width, its cart and words centred. 690 px is where the Hostinger plugin stacks the list layout (the single-product layout stacks from 768 px). */ @media (max-width: 690px) { .hostinger-affiliate-block-list-simple .hostinger-affiliate-block-list-simple__product-data, .hostinger-affiliate-block-list-simple .hostinger-affiliate-block-list-simple__product-actions, .hostinger-affiliate-block-list-simple .hostinger-affiliate-block-list-simple__product-actions > div, .hostinger-affiliate-block-single-type .hostinger-affiliate-block-single-type__product-button-wrap { align-self: stretch; width: 100%; margin-right: 0; margin-left: 0; } .hostinger-affiliate-block-list-simple a[class*="hostinger-affiliate-block-"][class*="__product-amazon-button"], .hostinger-affiliate-block-single-type a[class*="hostinger-affiliate-block-"][class*="__product-amazon-button"] { width: 100%; } } /* ── 4b. Amazon product cards and product rows built in Elementor (0.1.7, team findings 24 Oct 2026) ─────────────── */ /* Every post, both designs: the shapes are narrow (corpus of 24 Oct 2026: 52105's cards, 47561's and 52384's rows — all three on the new design today) and the empty price column that HTRB_Prices::strip_rows() leaves behind is there whatever the design. Selectors name the shape exactly (Elementor inner sections holding our a.htrb-amzbtn, the transform's button), so nothing else is restyled; a browser without :has() keeps Elementor's layout. The :has() arguments make these rules heavier than Elementor's per-post column rules ((0,3,0) widths, (0,7,0) for a column's vertical alignment) and than htr-blog.css §3 without !important. CARDS (52105, 10 rows of two): each column of an inner section is a card — a product photo (an image widget, first) over the button (an image widget, last), maybe a heading or text between. The photos were 679 × 679, 509 × 679, 679 × 799…, so the buttons sat at different heights across a row. Now the column is a flex column: the photo is a square (aspect-ratio 1, object-fit: contain, never cropped, at most 240 px on phones where the cards stack) centred in the space it is given, and the button sits at the bottom of every card, so the buttons of a row share one line (Elementor's columns in a row are already the same height). 16 px between the photo and the button. */ :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section > .elementor-container > .elementor-column > .elementor-widget-wrap:has(> .elementor-widget-image:first-child img):has(> .elementor-widget-image:last-child a.htrb-amzbtn) { flex-direction: column; flex-wrap: nowrap; align-content: stretch; align-items: stretch; justify-content: flex-start; gap: var(--space-4); } :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section > .elementor-container > .elementor-column > .elementor-widget-wrap:has(> .elementor-widget-image:first-child img):has(> .elementor-widget-image:last-child a.htrb-amzbtn) > .elementor-widget { width: 100%; margin-top: 0; margin-bottom: 0; } :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section > .elementor-container > .elementor-column > .elementor-widget-wrap:has(> .elementor-widget-image:first-child img):has(> .elementor-widget-image:last-child a.htrb-amzbtn) > .elementor-widget-image:first-child { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; } :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section > .elementor-container > .elementor-column > .elementor-widget-wrap:has(> .elementor-widget-image:first-child img):has(> .elementor-widget-image:last-child a.htrb-amzbtn) > .elementor-widget-image:first-child a { display: block; } :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section > .elementor-container > .elementor-column > .elementor-widget-wrap:has(> .elementor-widget-image:first-child img):has(> .elementor-widget-image:last-child a.htrb-amzbtn) > .elementor-widget-image:first-child img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; aspect-ratio: 1 / 1; object-fit: contain; } :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section > .elementor-container > .elementor-column > .elementor-widget-wrap:has(> .elementor-widget-image:first-child img):has(> .elementor-widget-image:last-child a.htrb-amzbtn) > .elementor-widget-image:last-child { flex: none; margin-top: auto; text-align: center; } @media (max-width: 767px) { :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section > .elementor-container > .elementor-column > .elementor-widget-wrap:has(> .elementor-widget-image:first-child img):has(> .elementor-widget-image:last-child a.htrb-amzbtn) > .elementor-widget-image:first-child img { max-width: calc(var(--space-12) * 5); } } /* Side by side (768 px and up), every card of a row is as wide as the others: one row of 52105 was set 60 / 40 %, so its two squares were 411 and 268 px (measured in the test browser at 1280 px, 24 Oct 2026); now 340 and 340. */ @media (min-width: 768px) { :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section > .elementor-container > .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-image:first-child img):has(> .elementor-widget-wrap > .elementor-widget-image:last-child a.htrb-amzbtn) { flex: 1 1 0; width: auto; min-width: 0; } } /* ROWS (47561: 8 rows, US and India; 52384: 7 rows): a product list built as one Elementor inner section per product — a photo column (an image widget alone), a name column (a text widget, the name linked to Amazon), the typed price (a text widget alone: removed from the HTML by HTRB_Prices::strip_rows() while box prices are hidden), the button column (our button alone) and, on 47561, an empty spacer column at each end. Elementor's per-post widths (10 / 8 / 40 / 6 / 23 %) left the name centred, the button top-aligned and wrapping to two lines at 768–991 px, and the rows 8 + 20 px apart. Now a row reads as a table row (the design system's Table: hairlines, no fills; the blog's tables use the same --ht-line): one hairline under each row (and over the first), 12 px above and below, every cell centred vertically; a 64 px photo box (contain), the name left-aligned and taking the free width (16 px ink, the linked name 600 without an underline, as the Hostinger cards' titles; underlined on hover), the button at its own width at the right, the empty columns (spacers, a removed price) gone. On phones: photo and name side by side, the button the row's whole width under them, as in the Hostinger boxes. With prices shown (switch off) the price column stays a cell of its own. There is no header row in the markup (the section heading above names the list). */ :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child img):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child a.htrb-amzbtn) { margin: 0; padding: var(--space-3) 0; border: 0; border-bottom: 1px solid var(--ht-line); box-shadow: none; } :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section:first-child:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child img):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child a.htrb-amzbtn) { border-top: 1px solid var(--ht-line); } :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child img):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child a.htrb-amzbtn) > .elementor-container { flex-wrap: nowrap; align-items: center; gap: var(--space-4); } /* Cells: as wide as their content, centred vertically, no padding of their own (the row has it). */ :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child img):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child a.htrb-amzbtn) > .elementor-container > .elementor-column { flex: 0 0 auto; width: auto; min-width: 0; align-items: center; } :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child img):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child a.htrb-amzbtn) > .elementor-container > .elementor-column > .elementor-widget-wrap { align-content: center; align-items: center; justify-content: flex-start; padding: 0; } /* The name takes the free width; empty columns (spacers, the removed price) take none. */ :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child img):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child a.htrb-amzbtn) > .elementor-container > .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-text-editor) { flex: 1 1 0; } :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child img):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child a.htrb-amzbtn) > .elementor-container > .elementor-column:not(:has(.elementor-widget)) { display: none; } /* The photo: a 64 px box, the whole picture shown. */ :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child img):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child a.htrb-amzbtn) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child img { display: block; width: calc(var(--space-12) + var(--space-4)); max-width: none; height: calc(var(--space-12) + var(--space-4)); margin: 0; object-fit: contain; } /* The name: left, 16 px, ink; the linked name 600, underlined on hover. */ :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child img):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child a.htrb-amzbtn) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor { width: 100%; color: var(--ht-ink); font-family: var(--ht-font-body); font-size: var(--type-body); line-height: 1.5; text-align: left; } :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child img):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child a.htrb-amzbtn) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor p { margin: 0; } :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child img):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child a.htrb-amzbtn) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor a:where(:not([class])) { color: var(--ht-ink); font-weight: 600; text-decoration: none; } :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child img):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child a.htrb-amzbtn) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor a:where(:not([class])):hover { color: var(--ht-green-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; } /* The button: its own width, on one line beside the name (the author's narrow custom width is released). */ :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child img):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child a.htrb-amzbtn) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child:has(a.htrb-amzbtn) { width: auto; max-width: 100%; margin: 0; text-align: right; } /* Phones: photo and name on one line, the button the row's whole width under them. */ @media (max-width: 767px) { :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child img):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child a.htrb-amzbtn) > .elementor-container { flex-wrap: wrap; gap: var(--space-3); } :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child img):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child a.htrb-amzbtn) > .elementor-container > .elementor-column:has(a.htrb-amzbtn) { flex: 1 1 100%; } :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child img):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child a.htrb-amzbtn) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child:has(a.htrb-amzbtn) { width: 100%; } :where(.single-post-wrapper > .entry-content, .elementor[data-elementor-type="wp-post"]) .elementor-inner-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child img):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:only-child a.htrb-amzbtn) a.htrb-amzbtn.htrb-amzbtn { width: 100%; } } /* ── 5. Motion: none for readers who ask for less. ────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { a.htrb-amzbtn.htrb-amzbtn, a[class*="hostinger-affiliate-block-"][class*="__product-amazon-button"] { transition: none; } }