/** Shopify CDN: Minification failed Line 1309:0 Unexpected "}" **/ /* ========================================================================== QUIET STANDARD: custom styles Loaded from layout/theme.liquid, immediately above , via {{ 'qs-custom.css' | asset_url | stylesheet_tag }}. It therefore loads after every theme stylesheet and wins at equal specificity. Replaces the theme's "Custom CSS" settings field, which is capped at 500 characters. Keep that field empty so there is only one place to look. A Prestige update removes this file. The others to restore alongside it: assets/qs-video-autoplay.js, sections/qs-study-results.liquid, and the two loader lines in layout/theme.liquid. CONTENTS 1. Type scale tokens 2. Type utility classes 3. Layout tokens: the container cap, the page edge, the text column 4. Section headings 5. Product card 6. Page geometry: containers, the text column, policy pages 7. Full-bleed and split sections 8. Header 9. Footer buttons 10. Video with text (ai-vwt sections) 11. Text grid (Creator Kit) 12. Creator Kit tables 13. Product media 14. Consumer study results 15. Judge.me review widget ========================================================================== */ /* ========================================================================== 1. TYPE SCALE TOKENS THE RULE: no heading is smaller than body copy. Achieved by ending the heading ladder at h3 and giving the smaller roles honest names, rather than by inflating h5 and h6 until the levels are indistinguishable. Headings are h1, h2, h3. Everything below that is a label or a caption, which are not headings and are not expected to outsize body copy. FULL SCALE ---------------------------------------------------------------------- Role Mobile Desktop Weight Line-height Tracking Colour ---------------------------------------------------------------------- h1 24px 32px 600 1.2 0.02em ink h2 20px 26px 600 1.25 0.08em ink h3 17px 20px 600 1.3 0.04em ink body-lead 16px 17px 400 1.55 0.01em ink body 14px 15px 400 1.6 0.01em ink label 11px 12px 600 1.4 0.08em muted caption 10.5px 11px 400 1.5 0.02em muted ---------------------------------------------------------------------- Smallest heading (h3, 17px mobile) is above body (14px mobile), and the same holds on desktop (20px against 15px). The rule is satisfied at every breakpoint. WEIGHTS AVAILABLE: Inter is loaded on this store at 400, 600 and 700 only. There is no 500. Do not write font-weight: 500 anywhere; it will silently fall back and appear to do nothing. UPPERCASE: h2, h3 and label are set uppercase by the theme's own heading styles. Type headings in sentence case and let the CSS do it, so the German copy can be lower-cased later without retyping. NOT REDEFINED HERE: --text-h4, --text-h5 and --text-h6. The header, navigation, footer and cart drawer use those classes. Changing them globally would shift the site chrome to no benefit. ========================================================================== */ :root { /* Ink */ --qs-ink: #3a3a3a; --qs-ink-muted: #737373; /* Sizes, mobile */ --qs-size-h1: 24px; --qs-size-h2: 20px; --qs-size-h3: 17px; --qs-size-body-lead: 16px; --qs-size-body: 14px; --qs-size-label: 11px; --qs-size-caption: 10.5px; /* Weights */ --qs-weight-heading: 600; --qs-weight-body: 400; /* Line heights */ --qs-lh-h1: 1.2; --qs-lh-h2: 1.25; --qs-lh-h3: 1.3; --qs-lh-body-lead: 1.55; --qs-lh-body: 1.6; --qs-lh-label: 1.4; --qs-lh-caption: 1.5; /* Letter spacing */ --qs-ls-h1: 0.02em; --qs-ls-h2: 0.08em; --qs-ls-h3: 0.04em; --qs-ls-body: 0.01em; --qs-ls-label: 0.08em; --qs-ls-caption: 0.02em; } @media (min-width: 700px) { :root { --qs-size-h1: 32px; --qs-size-h2: 26px; --qs-size-h3: 20px; --qs-size-body-lead: 17px; --qs-size-body: 15px; --qs-size-label: 12px; --qs-size-caption: 11px; } } /* ========================================================================== 2. TYPE UTILITY CLASSES Apply these wherever you control the markup: custom Liquid sections, rich text blocks, metafield output. They do not override the theme's own .h1 to .h6 classes, so nothing in the site chrome is affected. ========================================================================== */ .qs-h1 { font-size: var(--qs-size-h1); font-weight: var(--qs-weight-heading); line-height: var(--qs-lh-h1); letter-spacing: var(--qs-ls-h1); color: var(--qs-ink); } .qs-h2 { font-size: var(--qs-size-h2); font-weight: var(--qs-weight-heading); line-height: var(--qs-lh-h2); letter-spacing: var(--qs-ls-h2); color: var(--qs-ink); } .qs-h3 { font-size: var(--qs-size-h3); font-weight: var(--qs-weight-heading); line-height: var(--qs-lh-h3); letter-spacing: var(--qs-ls-h3); color: var(--qs-ink); } .qs-body-lead { font-size: var(--qs-size-body-lead); font-weight: var(--qs-weight-body); line-height: var(--qs-lh-body-lead); letter-spacing: var(--qs-ls-body); color: var(--qs-ink); } .qs-body { font-size: var(--qs-size-body); font-weight: var(--qs-weight-body); line-height: var(--qs-lh-body); letter-spacing: var(--qs-ls-body); color: var(--qs-ink); } .qs-label { font-size: var(--qs-size-label); font-weight: var(--qs-weight-heading); line-height: var(--qs-lh-label); letter-spacing: var(--qs-ls-label); color: var(--qs-ink-muted); text-transform: uppercase; } .qs-caption { font-size: var(--qs-size-caption); font-weight: var(--qs-weight-body); line-height: var(--qs-lh-caption); letter-spacing: var(--qs-ls-caption); color: var(--qs-ink-muted); } /* ========================================================================== 3. LAYOUT TOKENS Three declarations that the whole page geometry depends on. They were previously spread across the file in three separate :root blocks, which made it hard to see that they are one system. --container-max-width The theme ships this as 100%, so most sections grow without limit. The product section uses .container--lg and stops at 1260px, which is why it gained margins on a wide monitor while everything around it did not. Setting the default to the same lg value makes every section stop at the same point. Below about 1360px nothing changes at all, because the container is narrower than the cap anyway. Using the theme's own variable rather than a literal 1260px means that if the lg value ever changes, the whole site follows. --qs-page-edge Where any section's content should begin. Below the cap this is just the gutter; above it, it is whatever the centred container leaves. This is the same calculation .container performs internally. The 100% resolves against whichever element uses the variable, not against :root, which is what makes one declaration work everywhere. Measured: 48px at 1280px, 217.5px at 1710px. --qs-text-column The reading measure for continuous text: FAQ, the page template, the generated policy pages, the Creator Kit tables and the text grid header. One value so they cannot drift apart again. Gutter reference: --container-gutter is 20px below 700px, 32px to 999px, 48px from 1000px. ========================================================================== */ :root { --container-max-width: var(--container-lg-max-width); --qs-page-edge: max(var(--container-gutter), calc((100% - var(--container-lg-max-width)) / 2)); --qs-text-column: 900px; } /* ========================================================================== 4. SECTION HEADINGS: left aligned, site wide The theme wraps every section heading in .section-header.justify-self-center.text-center and offers no per-section alignment control. This is why section content could be set to left in the editor while the headings stayed centred. ========================================================================== */ .section-header { justify-self: start !important; text-align: left !important; } /* ========================================================================== 5. PRODUCT CARD Card typography sits below the body scale on purpose. A card title is a link, not a heading, so the no-heading-below-body rule does not apply to it. Prestige renders it as . ========================================================================== */ /* Title: 13px mobile, 14px desktop, weight 600, line-height 1.35 */ .product-card .product-title { font-size: 13px !important; font-weight: 600 !important; line-height: 1.35 !important; } @media (min-width: 700px) { .product-card .product-title { font-size: 14px !important; } } /* Price row and spec row. min-height on the spec reserves the line so cards stay level even where a product has no fill volume (the sets). */ .qs-card-price { display: grid; gap: 3px; justify-items: stretch; } .qs-card-price__amount { font-size: 13px; line-height: 1.3; letter-spacing: 0.02em; color: var(--qs-ink); margin: 0; } .qs-card-price__spec { font-size: var(--qs-size-caption); line-height: var(--qs-lh-caption); letter-spacing: var(--qs-ls-caption); color: var(--qs-ink-muted); margin: 0; min-height: 1.5em; } /* Left alignment. product-card.liquid hard-codes justify-items-center on two v-stack wrappers with no theme setting for it. 'stretch' rather than 'start' is deliberate: with 'start' a grid item shrinks to max-content, so a long two-line title would size itself to its longest line and could overflow the card. Covers all three places the card appears: homepage grid, collection pages, and related products on every PDP. */ .product-card__info, .product-card__info .v-stack, .qs-card-price { justify-items: stretch !important; text-align: left !important; } /* ========================================================================== 6. PAGE GEOMETRY THE DECISION, 2 October: one left edge for the whole site. Everything that holds continuous text now starts at --qs-page-edge and runs 900px. Previously the FAQ and the page template used Shopify's policy-page geometry instead, a 900px column centred in the viewport, which put them at 397.5px on a 1710px screen while the header, footer, product section and every ordinary .container sat at 217.5px. The policy pages were the reference for that centred treatment. They are now the thing being aligned, so the reference is gone and the sitewide edge governs. The PDP takes priority. Verified at 1710px: FAQ, page template and policy container all at 217.5 / 900, against header padding 217.5 and footer container 217.5. Below roughly 1300px every one of these resolves to the gutter, exactly as before, so nothing changes on a phone or a laptop. ========================================================================== */ /* -------------------------------------------------------------------------- CONTAINER WIDTH MODIFIERS Rich text carries .container--sm (980px), hard-coded in its section file. Being narrower than the page, it centred, so its left edge landed at 143px instead of 48px. The theme expresses the gutter AND the width cap through one margin-inline calculation, roughly max(gutter, (100% - container-max-width) / 2) so overriding the margins alone destroys both behaviours at once. That is what made these sections stretch to the full viewport width. For a container that should simply behave like every other container, the correct lever is the variable the modifier sets, not the margins. Pointing it at the lg value is enough. Verified: 48px / 1169px wide at 1280px, exactly matching a plain .container. -------------------------------------------------------------------------- */ .shopify-section--rich-text .container--sm { --container-max-width: var(--container-lg-max-width); } /* -------------------------------------------------------------------------- RICH TEXT: keep a reading measure Widening the container to match the page costs the rich text its 980px measure, and a paragraph running 1169px is about 130 characters per line. The measure belongs on the paragraph, not the container, so the heading stays free to use the full width. Measured on this store: 1ch = 8.83px at the 14px paragraph size. 64ch = 565px 68ch = 601px 72ch = 636px Note: rich text therefore keeps a 68ch paragraph rather than the 900px column used below. That is deliberate for a section whose heading is meant to run wide, but it is the one remaining text measure that is not --qs-text-column. Worth revisiting if the two ever sit on one page. -------------------------------------------------------------------------- */ .shopify-section--rich-text .prose p { max-width: 68ch; } /* -------------------------------------------------------------------------- THE TEXT COLUMN: one edge, one measure, three places .shopify-section--faq .container--md FAQ sections .shopify-section--main-page .container--xs the page template .shopify-policy__container generated policy pages max-width is not optional alongside the margins. The theme derives a narrow .container's WIDTH from its margins, so setting margins alone makes the column stretch to the full width and lose the measure. !important throughout. For the two theme containers it beats the theme's own modifier. For the policy container it beats the stylesheet Shopify generates for those pages, which is outside the theme and cannot be relied on to load before this file. The policy container also carries 20px of its own horizontal padding, which was Shopify's mobile gutter. With the margin now doing that job the padding would double up and push the text to 237.5px, so it is zeroed. On a phone the result is identical to before: 20px margin instead of 20px padding. Shopify policy pages are generated, not theme sections, so they cannot be edited in the theme editor. This file is the only place to style them. -------------------------------------------------------------------------- */ .shopify-section--faq .container--md, .shopify-section--main-page .container--xs, .shopify-policy__container { max-width: var(--qs-text-column) !important; margin-inline: var(--qs-page-edge) !important; } .shopify-policy__container { padding-inline: 0 !important; } /* The FAQ's inner column is a flex child set to a fraction of the container. flex-basis 100% lets it fill the 900px; flex-shrink stays 1, so it still shrinks on a phone. */ .shopify-section--faq .faq__content { flex-basis: 100% !important; margin-left: 0 !important; justify-self: start !important; } /* The policy title is the only centred element Shopify generates. The body beneath it is already left-aligned. Prestige also gives the title wrapper an h2 class, so it picks up the heading scale. */ .shopify-policy__title, .shopify-policy__title h1 { text-align: left; } /* Custom sections: a nested narrow container would otherwise centre itself inside the page gutter, insetting twice. */ .shopify-section--blocks .container > .container--sm { margin-inline: 0; max-width: var(--container-sm-max-width); /* 980px */ } /* ========================================================================== 7. FULL-BLEED AND SPLIT SECTIONS ========================================================================== */ /* -------------------------------------------------------------------------- FULL-BLEED SECTIONS: bring them inside the page margins slideshow, video, image-with-text and the custom video-with-text sections ship with no .container, so they run edge to edge. At 1280px that is only 48px wider and barely shows; on a 2000px monitor the container starts at 362px and these still start at 0. :has() excludes sections that already have a container, which would otherwise be inset twice. Some "blocks" sections have one, some do not. -------------------------------------------------------------------------- */ .shopify-section--slideshow:not(:has(.container)), .shopify-section--video:not(:has(.container)), .shopify-section--blocks:not(:has(.container)), .shopify-section--image-with-text:not(:has(.container)) { margin-inline: var(--qs-page-edge); } /* -------------------------------------------------------------------------- .container--align-start This class exists to pin a narrow container to the page's start edge, and it does so with the gutter. That was correct while containers were uncapped. Now that they cap and centre, the start edge is no longer the gutter, so the collection title drifted left of its own product grid. -------------------------------------------------------------------------- */ .container--align-start { margin-inline-start: var(--qs-page-edge) !important; } /* -------------------------------------------------------------------------- SPLIT SECTIONS: the text column's outward padding image-with-text puts 96px of padding on both sides of its text column. That was the outer gutter while the section was full bleed. Now that the section sits inside the page margins, the outward-facing side doubles up, which put left-aligned text at 144px against a 48px edge. Zero only the outward-facing side, per variant. The padding facing the image is the gap between them and stays. -------------------------------------------------------------------------- */ .shopify-section--image-with-text .image-with-text--reverse .prose { padding-left: 0; } .shopify-section--image-with-text .image-with-text:not(.image-with-text--reverse) .prose { padding-right: 0; } /* -------------------------------------------------------------------------- IMAGE WITH TEXT: left aligned on mobile too The text block carries "prose text-center sm:text-start", so the theme centres it below the sm breakpoint and only left-aligns above it. On desktop it was already left, which is why this only showed on a phone. No media query: the desktop value already computes to left, so one unconditional rule covers both and avoids having to guess where the theme's sm breakpoint sits. Verified on all three sections on the Our Story page. -------------------------------------------------------------------------- */ .shopify-section--image-with-text .prose { text-align: left !important; } /* -------------------------------------------------------------------------- MOBILE: media-only sections go back to full bleed The full-bleed rule applies the page edge at every width, which puts a 24px margin around videos on a phone. On a phone there is no excess width to cap, and a video inset from both edges looks like a mistake rather than a decision. Only slideshow and video are released here. image-with-text is handled separately below, because its text needs a gutter put back. These three blocks must stay after the full-bleed rule above. -------------------------------------------------------------------------- */ @media (max-width: 699px) { .shopify-section--slideshow:not(:has(.container)), .shopify-section--video:not(:has(.container)) { margin-inline: 0; } } /* IMAGE WITH TEXT ON MOBILE: full-bleed image, inset text. Stacked, the image and text no longer sit side by side, so releasing the section margin lets the image reach both edges, which is the right treatment for media on a phone. The text then needs its own gutter on both sides. On desktop only the inward-facing side carries padding, because the other side faces the image; stacked, both sides face the screen edge. 767px matches the breakpoint in this section's own Custom CSS, where the stacking happens. The two have to agree, or between 700 and 767px you get a stacked layout with an inset image. */ @media screen and (max-width: 767px) { .shopify-section--image-with-text:not(:has(.container)) { margin-inline: 0; } .shopify-section--image-with-text .prose { padding-inline: var(--container-gutter) !important; } } /* Video with text (custom section): same treatment, at this section's own stacking breakpoint. Replaces the block's hard-coded 24px inset with the site token. */ @media screen and (max-width: 749px) { .shopify-section--blocks:has([class*="ai-vwt-"]) { margin-inline: 0; } [class*="ai-vwt-"][class*="__content"] { padding-inline: var(--container-gutter); } } /* ========================================================================== 8. HEADER The header bar has no .container. It is a grid with padding-inline set to the gutter, which is the right mechanism for a header: the bar and its bottom border stay full width while the content insets. It just needs the padding to follow the cap rather than staying at 48px, or the navigation sits 130px+ left of the page content on a large screen. Verified: nav at 217.5 alongside page and footer at 217.5 at 1710px; unchanged at 1280. ========================================================================== */ .header { padding-inline: var(--qs-page-edge) !important; } /* ========================================================================== 9. FOOTER BUTTONS The newsletter Subscribe button (the theme renders it solid) and the withdrawal menu link (a menu item, so it carries no button class and is matched by href). Identical in every respect. ========================================================================== */ .footer .form button.button, .footer a[href*="/pages/withdrawal"] { display: inline-block; box-sizing: border-box; width: fit-content; max-width: 100%; padding: 10.4px 14px; border: 1px solid var(--qs-ink); color: var(--qs-ink); font-size: 12px !important; font-weight: 600; line-height: 16.8px; /* 1.4 */ letter-spacing: 1.1px; /* 0.092em at 12px. The old comment said 0.8em, which was a slip of the pen: 0.8em would be 9.6px. Value unchanged. */ text-transform: uppercase; text-align: center; text-decoration: none; background-color: transparent; background-image: linear-gradient(transparent, transparent), linear-gradient(var(--qs-ink), var(--qs-ink)); background-repeat: no-repeat, no-repeat; background-size: 101% 101%, 0 101%; background-position: left, left; transition: background-size 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86), background-position 0.45s steps(1), color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86), border-color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86); } .footer a[href*="/pages/withdrawal"] { margin-top: 8px; } .footer .form button.button:hover, .footer a[href*="/pages/withdrawal"]:hover { background-size: 0 101%, 101% 101%; background-position: right, right; color: #FAFAF8; } /* ========================================================================== 10. VIDEO WITH TEXT (ai-vwt sections) Selectors match class fragments rather than full class names, because each block carries its own hash. One rule covers every instance on every PDP. Typography is deliberately left as the theme sets it. The large label over small value is an intended design decision, not an oversight. ========================================================================== */ /* Alignment. The section centres on three axes: text-align on content, groups, headings and bodies, plus align-items: center on the flex columns, which also shrink-wraps each group to its own text width. justify-content: center is left alone on __content so the text column stays vertically centred against the video. align-items: stretch rather than flex-start so each group fills the column width and its text wraps inside it. */ [class*="ai-vwt-"][class*="__content"], [class*="ai-vwt-"][class*="__group"] { align-items: stretch !important; text-align: left !important; } [class*="ai-vwt-"][class*="__heading"], [class*="ai-vwt-"][class*="__body"] { text-align: left !important; } /* Spacing. Groups 32px apart, matching .multi-column__item's gap. Label to value 4px, tight enough to read as one pair. The 8:1 ratio is what makes three pairs read as three pairs. */ [class*="ai-vwt-"][class*="__content"] { gap: 32px !important; } [class*="ai-vwt-"][class*="__group"] { gap: 4px !important; } /* ========================================================================== 11. TEXT GRID (Creator Kit): type aligned to the site scale ========================================================================== */ .shopify-section--blocks [class*="ai-text-grid__subheading-"] { font-family: var(--text-font-family); font-size: 12px; font-weight: 600; /* Inter 500 is not loaded */ letter-spacing: 0.08em; /* 0.96px at 12px */ line-height: 1.4; /* 16.8px at 12px */ text-transform: uppercase; } .shopify-section--blocks [class*="ai-text-grid__heading-"] { font-family: var(--heading-font-family); font-size: var(--text-h2); /* 20px to 28px, 27.06px at 1280px */ font-weight: var(--heading-font-weight); /* 600 */ letter-spacing: var(--heading-letter-spacing); /* 0.08em */ line-height: 1.4; /* 37.9px at 27.06px */ text-transform: var(--heading-text-transform); } .shopify-section--blocks [class*="ai-text-grid__item-"] p { font-family: var(--text-font-family); font-size: var(--text-base); /* 14px */ font-weight: var(--text-font-weight); /* 400 */ letter-spacing: normal; line-height: 1.65; /* 23.1px at 14px */ } /* Sit on the sitewide left edge, and share the site text column. */ .shopify-section--blocks [class*="ai-text-grid-"] { padding-inline: 0; } .shopify-section--blocks [class*="ai-text-grid__header-"] { max-width: var(--qs-text-column); margin-inline: 0; } /* ========================================================================== 12. CREATOR KIT TABLES Prestige sets border-top and border-left on every cell, so each rule zeroes the border before drawing the one hairline it wants. Without the reset you get vertical rules between columns. ========================================================================== */ /* Routine table -------------------------------------------------------- */ .qs-routine-table { width: 100%; max-width: var(--qs-text-column); border-collapse: collapse; font-family: var(--text-font-family); font-variant-numeric: tabular-nums; } .qs-routine-table th { border: 0; border-bottom: 1px solid #DDDDDB; padding: 0 0 10px; color: #737373; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; /* 0.96px at 12px */ line-height: 1.4; /* 16.8px at 12px */ text-transform: uppercase; text-align: left; } .qs-routine-table td { border: 0; border-bottom: 1px solid #DDDDDB; padding: 14px 0; font-size: var(--text-base); /* 14px */ font-weight: 400; letter-spacing: normal; line-height: 1.65; /* 23.1px at 14px */ vertical-align: baseline; } .qs-routine-table__num { width: 3.5em; color: #737373; } .qs-routine-table__right { text-align: right; white-space: nowrap; } .qs-routine-table td.qs-routine-table__right, .qs-routine-table th.qs-routine-table__right { padding-left: 16px; } @media screen and (max-width: 749px) { .qs-routine-table th { font-size: 11px; letter-spacing: 0.08em; /* 0.88px at 11px */ line-height: 1.4; /* 15.4px at 11px */ } .qs-routine-table td { padding: 12px 0; font-size: 13px; line-height: 1.65; /* 21.45px at 13px */ } .qs-routine-table__num { width: 2.75em; } } /* Figure table --------------------------------------------------------- */ .qs-fact-table { width: 100%; max-width: var(--qs-text-column); border-collapse: collapse; font-family: var(--text-font-family); } .qs-fact-table th, .qs-fact-table td { border: 0; border-bottom: 1px solid #DDDDDB; padding: 16px 24px 16px 0; vertical-align: top; text-align: left; } .qs-fact-table thead th { padding-top: 0; padding-bottom: 10px; color: #737373; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; /* 0.96px at 12px */ line-height: 1.4; /* 16.8px at 12px */ text-transform: uppercase; } .qs-fact-table tbody th { width: 7em; font-size: var(--text-base); /* 14px */ font-weight: 600; letter-spacing: normal; line-height: 1.65; /* 23.1px at 14px */ } .qs-fact-table__num { display: block; } .qs-fact-table td { font-size: var(--text-base); /* 14px */ font-weight: 400; letter-spacing: normal; line-height: 1.65; /* 23.1px at 14px */ padding-right: 0; } .qs-fact-table strong { font-weight: 600; } .qs-fact-table--wide tbody th { width: 32%; font-weight: 400; } @media screen and (max-width: 749px) { .qs-fact-table th, .qs-fact-table td { padding: 14px 16px 14px 0; font-size: 13px; line-height: 1.65; /* 21.45px at 13px */ } .qs-fact-table thead th { font-size: 11px; letter-spacing: 0.08em; /* 0.88px at 11px */ line-height: 1.4; /* 15.4px at 11px */ } .qs-fact-table tbody th { width: 5.5em; } .qs-fact-table td { padding-right: 0; } .qs-fact-table--wide tbody th { width: 40%; } } /* ========================================================================== 13. PRODUCT MEDIA The featured-product section renders video at its intrinsic height, which leaves a short letterboxed strip. min-height plus object-fit makes it fill the media slot like an image would. Autoplay itself is handled in assets/qs-video-autoplay.js. ========================================================================== */ .featured-product video-media video { width: 100%; height: 100%; min-height: 400px; object-fit: cover; } /* ========================================================================== 14. CONSUMER STUDY RESULTS (product pages) Markup: sections/qs-study-results.liquid. The heading keeps the theme's .h2 class and this file only sets its margin, so the section heading scale stays in one place. ========================================================================== */ .qs-study { max-width: 640px; } .qs-study__heading { margin: 0 0 16px; } .qs-study__row { display: grid; grid-template-columns: 76px 1fr; column-gap: 14px; align-items: baseline; margin: 0; padding: 14px 0; border-top: 1px solid #DDDDDB; } .qs-study__row:last-child { border-bottom: 1px solid #DDDDDB; } .qs-study__figure { color: #3A3A3A; font-size: 22px; font-weight: 600; letter-spacing: 0; line-height: 1.2; /* 26.4px at 22px */ font-variant-numeric: tabular-nums; white-space: nowrap; } .qs-study__sentence { color: #737373; font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.6; /* 22.4px at 14px */ } .qs-study__note { margin: 16px 0 0; color: #7D7D7C; font-size: 10px; font-weight: 400; letter-spacing: 0; line-height: 1.65; /* 16.5px at 10px */ } /* ========================================================================== 15. JUDGE.ME REVIEW WIDGET The app sets its 106 --jm-* tokens inline on an inner element, so every token override needs !important and has to be applied to the widget and its descendants. The same goes for the handful of properties their own rules win on: font-size, background, radius, padding. Bold is 600 on this site, not 700. Inter 500 is not loaded, so any token asking for medium is set to 600 as well. ========================================================================== */ .jm-review-widget, .jm-review-widget * { /* Colour */ --jm-review-widget-text-color: #3A3A3A !important; --jm-review-widget-lighter-text-color: #737373 !important; --jm-review-widget-star-and-histogram-color: #3A3A3A !important; --jm-review-widget-button-color: #3A3A3A !important; --jm-review-widget-button-text-color: #FAFAF8 !important; --jm-review-widget-form-background-color: #FAFAF8 !important; --jm-review-widget-form-field-background-color: #FAFAF8 !important; --jm-review-widget-form-text-color: #3A3A3A !important; --jm-review-widget-form-button-color: #3A3A3A !important; --jm-review-widget-form-button-text-color: #FAFAF8 !important; --jm-widget-primary-color: #3A3A3A !important; /* Square corners everywhere */ --jm-review-widget-form-border-radius: 0 !important; --jm-widget-border-radius: 0 !important; --jm-widget-border-radius-simplified: 0 !important; --jm-border-radius-200: 0 !important; --jm-border-radius-400: 0 !important; --jm-border-radius-600: 0 !important; /* Weights */ --jm-heading-xl-weight-bold: 600 !important; --jm-heading-lg-weight-bold: 600 !important; --jm-heading-md-weight-bold: 600 !important; --jm-heading-sm-weight-bold: 600 !important; --jm-heading-xs-weight-bold: 600 !important; --jm-body-lg-weight-bold: 600 !important; --jm-body-md-weight-bold: 600 !important; --jm-body-sm-weight-bold: 600 !important; --jm-body-sm-weight-medium: 600 !important; --jm-body-xs-weight-medium: 600 !important; --jm-body-xxs-weight-medium: 600 !important; /* Average rating figure: 1.875em was 26.25px, this is 21px, close to the 22px used on the study results block */ --jm-heading-lg-size: 1.5em !important; } /* Base size: every Judge.me size is an em multiple of this. 14px makes review body text 14px, matching the site. */ .jm-review-widget { font-size: 14px !important; } /* Title: the site section-heading scale */ .jm-review-widget .jm-review-widget-minimal-header__title { font-family: var(--heading-font-family, Inter), sans-serif !important; font-size: var(--text-h2) !important; /* 20px to 28px, 27.06px at 1280 */ font-weight: 600 !important; letter-spacing: 0.08em !important; /* 2.17px at 27.06px */ line-height: 1.4 !important; /* 37.89px at 27.06px */ text-transform: uppercase !important; } /* Buttons: the site outline button */ .jm-review-widget .jm-button, .jm-review-widget .jm-button--primary, .jm-review-widget button.jm-button { background-color: transparent !important; border: 1px solid #3A3A3A !important; border-radius: 0 !important; color: #3A3A3A !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; /* 0.96px at 12px */ line-height: 1.4 !important; /* 16.8px at 12px */ padding: 10.4px 14px !important; text-transform: uppercase !important; transition: background-color 0.45s, color 0.45s; } .jm-review-widget .jm-button:hover, .jm-review-widget .jm-button--primary:hover, .jm-review-widget button.jm-button:hover { background-color: #3A3A3A !important; color: #FAFAF8 !important; } /* Left alignment, part one: the containers that stack vertically. .jm-center is a COLUMN flex container, so its centring comes from align-items, not justify-content. Setting justify-content alone is why the first attempt left everything centred. */ .jm-review-widget .jm-center, .jm-review-widget .jm-center--center-text, .jm-review-widget .jm-center--intrinsic, .jm-review-widget .jm-no-reviews-state { text-align: left !important; align-items: flex-start !important; justify-content: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; } /* Part two: the rows. align-items is deliberately NOT set on these. They lay out along the horizontal axis, so align-items controls vertical centring, and forcing flex-start would unalign a button from the text beside it. */ .jm-review-widget .jm-no-reviews-state__text, .jm-review-widget .jm-no-reviews-state__action-buttons, .jm-review-widget .jm-action-buttons, .jm-review-widget .jm-cluster { text-align: left !important; justify-content: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; } /* The outer wrapper ships max-width 900px with auto margins, which centred the whole widget inside the product section. */ .jdgm-widget.jdgm-review-widget { margin-left: 0 !important; margin-right: 0 !important; } /* Review cards --------------------------------------------------------- */ /* Hairline between reviews, matching the study results table */ .jm-review-widget .jm-review-item { border-bottom: 1px solid #DDDDDB; padding-bottom: 21px; margin-bottom: 21px; } .jm-review-widget .jm-review-item:last-child { margin-bottom: 0; } /* Review body at the site's reading values */ .jm-review-widget .jm-review-content__body, .jm-review-widget .jdgm-review-content__body-content { font-size: 14px; line-height: 1.65; /* 23.1px at 14px */ letter-spacing: normal; } /* The avatar is a 39px circle with a tinted fill. The site uses no circles and no avatars. */ .jm-review-widget .jm-reviewer-avatar { display: none; } /* Sort and filter controls */ .jm-review-widget .jm-sort-filter__select, .jm-review-widget .jm-custom-answer-filter { border-radius: 0; font-weight: 600; /* was 500, which is not loaded */ } /* Review photos and videos */ .jm-review-widget .jm-media-grid__image, .jm-review-widget .jm-media-grid__image-container, .jm-review-widget .jm-media-thumbnail-list__thumbnail { border-radius: 0; } .jm-review-widget .jm-transparency-badge-list { color: #737373; font-size: 12px; line-height: 1.65; /* 19.8px at 12px */ } /* --------------------------------------------------------------- VERIFIED BADGE Wording, mark, placement and padding. Judge.me's Text section does not expose the badge string, so the label is set here. The

becomes an inline flex row so the tick and the label are both flex items. That avoids baseline juggling, which matters because the element's own font-size is zeroed to suppress the original "Verified" string. ---------------------------------------------------------------- */ .jm-review-widget .jm-verified-buyer-badge__text { display: inline-flex !important; align-items: center; gap: 5px; font-size: 0 !important; letter-spacing: 0 !important; padding: 0 !important; border: 0 !important; } /* The tick, drawn inline so it takes the site ink rather than the app's own colour. */ .jm-review-widget .jm-verified-buyer-badge__text::before { content: ""; flex: none; width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%233A3A3A'/%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-4.6' fill='none' stroke='%23FAFAF8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } /* The label. \00E4 is an escaped a-umlaut; the trailing space ends the escape and is not rendered. */ .jm-review-widget .jm-verified-buyer-badge__text::after { content: "Verified buyer"; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.4; } html[lang^="de"] .jm-review-widget .jm-verified-buyer-badge__text::after { content: "Verifizierter K\00E4 ufer"; } /* Badge beside the name. */ .jm-review-widget .jm-cluster:has(> .jm-verified-buyer-badge) { flex-direction: row; align-items: center; gap: 7px; } /* Judge.me animates each step of the review form with an 0.8s fade and slide. Long enough that content reads washed out while it arrives, and the transform rasterises text softly for the duration. 120ms keeps the sense of movement without the smear. */ .jdgm-write-review-modal__sections, .jdgm-write-review-modal__section, .jdgm-write-review-modal__page { transition-duration: 0.12s !important; } /* --------------------------------------------------------------- FAQ ACCORDION QUESTIONS Prestige hard-codes .text-lg on the FAQ toggle, rendering 16px/400, while every other accordion on a PDP uses .h6 at 12px/600 uppercase and body copy sits at 14px. 16px is not a value in the type scale, which is why it reads louder than everything around it without reading as a heading. Pulled back to body size, with weight doing the work instead of size. Weight matters here: an open row would otherwise show the question and its answer at identical type. ---------------------------------------------------------------- */ .shopify-section--faq .accordion__toggle { font-size: var(--text-base); /* 14px */ font-weight: 400; line-height: 1.65; /* 23.1px at 14px, matching body */ letter-spacing: normal; } /* --------------------------------------------------------------- JUDGE.ME REVIEWS CAROUSEL (home page) Different namespace from the PDP Review Widget: this is .jdgm-rev-snippet-widget-v2 / .jdgm-rev-snippet-card, so none of the .jm-review-widget rules reach it. ---------------------------------------------------------------- */ /* --------------------------------------------------------------- JUDGE.ME REVIEWS CAROUSEL (home page) Judge.me's own card and arrow design is kept by choice. Only type and alignment are brought onto the site's system. Namespace is .jdgm-rev-snippet-*, separate from the .jm-review-widget rules used on the PDPs. ---------------------------------------------------------------- */ /* Page edge. Max width 1100 inside a 1169 container makes Judge.me centre the block with margin: 34.5px auto, putting it 35px right of every other section. Zeroing the margin keeps the width the carousel layout expects. */ .jdgm-rev-snippet-widget-v2__inner { margin-inline: 0 !important; } /* Review body: the site's reading values. 14px, weight 400, line-height 1.65 (23.1px), letter-spacing normal. */ .jdgm-rev-snippet-card__body { font-size: 14px; font-weight: 400; line-height: 1.65; letter-spacing: normal; } /* Reviewer name: body size, weight 600 for contrast. 14px, line-height 1.65 (23.1px), letter-spacing normal. */ .jdgm-rev-snippet-card__reviewer-name { font-size: 14px; font-weight: 600; line-height: 1.65; letter-spacing: normal; } /* Product line: the caption role. Judge.me ships 11.9px in full ink, off the scale and the same colour weight as the review itself. 11px, weight 400, line-height 1.5 (16.5px), letter-spacing 0.02em. */ .jdgm-rev-snippet-card__product { font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0.02em; color: #737373; } .jdgm-rev-snippet-card__product-name { font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: 0.02em; color: #737373; } /* --------------------------------------------------------------- STUDY RESULTS: home page variant Shares .qs-study with the product page section, so both surfaces present the same content type identically. Three differences: a wider figure column for 100 %, a source line naming the product, and left alignment, because the Custom Liquid block sits inside the section's .text-center wrapper. ---------------------------------------------------------------- */ .qs-study--home { text-align: left; } /* 100 % needs more than the 76px column used on the product pages. */ .qs-study--home .qs-study__row { grid-template-columns: 88px 1fr; } /* Top alignment, not baseline. Baseline lines up the baselines, which with a 22px figure against a 14px sentence pushes the figure's top about 5.7px higher. With start, both cap tops land about 7.5px from the top of their boxes and agree within a fraction of a pixel. */ .qs-study__row { align-items: start; } /* The sentence is the claim, so it carries the ink. 14px, weight 400, line-height 1.6 (22.4px), letter-spacing 0. */ .qs-study__sentence { color: #3A3A3A; } /* The product name is context, so it stays muted. Caption role: 11px, weight 400, line-height 1.5 (16.5px), letter-spacing 0.02em. */ .qs-study__source { display: block; margin-top: 4px; color: #737373; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0.02em; } /* One muted grey across the block, not two. Was #7D7D7C. */ .qs-study__note { color: #737373; } } .qs-study--home .qs-study__row { align-items: start; }