:root { --ink: #222223; --muted: #626266; --brand: #cd0039; --brand-dark: #940028; --brand-soft: #fae8ed; --navy: #2f1821; --surface: #f7f7f8; --surface-warm: #f3f1ef; --line: #e6e6e8; --white: #fff; --shadow: 0 20px 55px rgba(48, 18, 30, .10); --radius: 18px; } * { box-sizing: border-box; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--white); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } body.menu-open { overflow: hidden; } a { color: inherit; } button, a { -webkit-tap-highlight-color: transparent; } button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #e24d76; outline-offset: 3px; } img { display: block; max-width: 100%; } h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } .container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; } .skip-link { position: fixed; left: -9999px; top: 8px; z-index: 100; padding: 10px 14px; background: #fff; border-radius: 10px; box-shadow: var(--shadow); } .skip-link:focus { left: 8px; } .announcement { background: var(--brand); color: #fff; font-size: .82rem; } .announcement .container { min-height: 34px; display: flex; align-items: center; justify-content: center; text-align: center; } .site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(230, 230, 232, .9); background: rgba(255, 255, 255, .95); backdrop-filter: blur(16px); } .header-inner { min-height: 74px; display: flex; align-items: center; gap: 25px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 850; letter-spacing: -.03em; text-decoration: none; white-space: nowrap; } .brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(205, 0, 57, .23); font-size: .88rem; } .brand small { color: var(--brand); font-weight: 800; } .main-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; } .announcement .container { gap: .3em; flex-wrap: wrap; padding-block: 5px; } .announcement a { text-underline-offset: 3px; } .main-nav a { color: #4d4549; font-size: .92rem; font-weight: 700; text-decoration: none; } .main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--brand); } .menu-button { display: none; width: 44px; height: 44px; margin-left: auto; border: 0; border-radius: 10px; background: transparent; cursor: pointer; } .menu-button span, .menu-button::before, .menu-button::after { content: ""; display: block; width: 22px; height: 2px; margin: 5px auto; background: var(--ink); transition: .2s ease; } .button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border: 1px solid transparent; border-radius: 12px; font: inherit; font-size: .94rem; font-weight: 780; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; } .button:hover { transform: translateY(-1px); } .button-primary { background: var(--brand); color: #fff; box-shadow: 0 10px 25px rgba(205, 0, 57, .22); } .button-primary:hover { background: var(--brand-dark); } .button-secondary { border-color: #d7d7da; background: #fff; color: var(--ink); } .button-secondary:hover { border-color: var(--brand); color: var(--brand); } .button-light { background: #fff; color: var(--navy); } .button-link { min-height: auto; padding: 0; border-radius: 0; color: var(--brand); background: transparent; box-shadow: none; } .button-link:hover { transform: none; color: var(--brand-dark); } .arrow { font-size: 1.05em; } .eyebrow { margin: 0 0 11px; color: var(--brand); font-size: .78rem; font-weight: 850; letter-spacing: .115em; text-transform: uppercase; } .home-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, #fff 0%, #f7f7f8 58%, #f2f0ef 100%); } .home-hero::after { content: ""; position: absolute; width: 620px; height: 620px; right: -300px; top: -360px; border: 1px solid rgba(205, 0, 57, .12); border-radius: 50%; box-shadow: 0 0 0 105px rgba(205, 0, 57, .025), 0 0 0 210px rgba(205, 0, 57, .018); } .hero-grid { position: relative; z-index: 1; min-height: 585px; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 54px; padding-block: 58px; } .hero-copy h1 { max-width: 700px; margin-bottom: 20px; font-size: clamp(2.8rem, 5vw, 4.75rem); line-height: .99; letter-spacing: -.056em; } .hero-copy > p:not(.eyebrow):not(.microcopy) { max-width: 625px; margin-bottom: 27px; color: var(--muted); font-size: clamp(1.03rem, 1.6vw, 1.2rem); line-height: 1.55; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .microcopy { margin: 14px 0 0; color: var(--muted); font-size: .82rem; } .hero-showcase { position: relative; min-height: 455px; padding: 22px; border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: var(--shadow); } .hero-products { position: relative; height: 250px; display: flex; align-items: end; justify-content: center; overflow: hidden; border-radius: 18px; background: linear-gradient(155deg, #fafafa, #f0efef); } .hero-products picture { position: relative; width: 33.33%; } .hero-products picture:nth-child(1) { transform: translate(28px, 18px) rotate(-3deg); z-index: 1; } .hero-products picture:nth-child(2) { transform: translateY(-9px); z-index: 3; } .hero-products picture:nth-child(3) { transform: translate(-28px, 18px) rotate(3deg); z-index: 2; } .hero-products img { width: 100%; height: 230px; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(32, 24, 28, .14)); } .showcase-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 2px 10px; } .showcase-head strong { font-size: .96rem; } .showcase-head span { color: var(--muted); font-size: .73rem; } .mini-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mini-price { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .mini-price span { display: block; overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; } .mini-price strong { font-size: .96rem; } .trust-row { border-bottom: 1px solid var(--line); background: #fff; } .trust-grid { min-height: 78px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; } .trust-item { display: flex; align-items: center; justify-content: center; gap: 10px; color: #524b4f; font-size: .88rem; font-weight: 700; } .trust-item + .trust-item { border-left: 1px solid var(--line); } .trust-icon { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #edb5c5; border-radius: 50%; color: var(--brand); font-size: .78rem; font-weight: 900; } .section { padding-block: 82px; } .section-soft { background: var(--surface); } .section-warm { background: var(--surface-warm); } .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 32px; } .section-heading h2 { max-width: 690px; margin-bottom: 0; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.08; letter-spacing: -.042em; } .section-heading > p { max-width: 460px; margin-bottom: 3px; color: var(--muted); } .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 20px; } .product-card { position: relative; display: flex; flex-direction: column; } .product-media { min-height: 255px; display: grid; place-items: center; overflow: hidden; border: 1px solid #eeeeef; border-radius: var(--radius); background: var(--surface); } .product-media img { width: 225px; height: 225px; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(34, 26, 30, .14)); transition: transform .2s ease; } .product-card:hover .product-media img { transform: translateY(-4px) scale(1.02); } .product-body { flex: 1; display: flex; flex-direction: column; padding: 18px 2px 0; } .product-kicker { margin-bottom: 5px; color: var(--muted); font-size: .75rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; } .product-title { margin-bottom: 7px; font-size: 1.3rem; line-height: 1.25; letter-spacing: -.025em; } .product-desc { margin-bottom: 16px; color: var(--muted); font-size: .9rem; line-height: 1.5; } .product-meta { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: auto; } .product-price strong { display: block; font-size: 1.3rem; line-height: 1.1; letter-spacing: -.03em; } .product-price small, .product-meta > small { color: var(--muted); font-size: .71rem; } .card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; } .card-shop { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 12px; background: var(--brand); color: #fff; text-decoration: none; font-size: .9rem; font-weight: 750; } .card-shop:hover { background: var(--brand-dark); } .split-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 50px; align-items: center; } .feature-panel { position: relative; overflow: hidden; min-height: 430px; padding: 42px; border-radius: 24px; background: var(--navy); color: #fff; box-shadow: var(--shadow); } .feature-panel::after { content: "UK"; position: absolute; right: -18px; bottom: -80px; color: rgba(255, 255, 255, .055); font-size: 16rem; font-weight: 900; line-height: 1; } .feature-panel > * { position: relative; z-index: 1; } .feature-panel h2 { max-width: 450px; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.03; letter-spacing: -.05em; } .feature-panel p { color: #eadfe3; } .feature-list { display: grid; gap: 22px; } .feature-item { display: grid; grid-template-columns: 44px 1fr; gap: 16px; } .feature-number { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-soft); color: var(--brand); font-weight: 850; } .feature-item h3 { margin-bottom: 3px; font-size: 1.08rem; } .feature-item p { margin-bottom: 0; color: var(--muted); font-size: .92rem; } .price-shell { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 14px 40px rgba(48, 18, 30, .06); } .price-table { width: 100%; min-width: 650px; border-collapse: collapse; } .price-table th, .price-table td { padding: 17px 21px; border-bottom: 1px solid var(--line); text-align: left; } .price-table th { background: var(--brand-soft); color: #55162c; font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; } .price-table tr:last-child td { border-bottom: 0; } .price-table td:first-child a { font-weight: 800; text-decoration: none; } .price-table td:first-child a:hover { color: var(--brand); } .price-table td:nth-child(2) { width: 145px; font-weight: 850; } .price-table td:last-child { width: 175px; text-align: right; } .price-footnote { margin: 16px 0 0; color: var(--muted); font-size: .82rem; } .steps, .reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; } .step, .reason-card { padding: 27px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; } .step::before { counter-increment: step; content: "0" counter(step); display: block; margin-bottom: 36px; color: var(--brand); font-size: .8rem; font-weight: 850; letter-spacing: .08em; } .step h3, .reason-card h3 { margin-bottom: 8px; font-size: 1.17rem; } .step p, .reason-card p { margin-bottom: 0; color: var(--muted); font-size: .91rem; } .reason-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 28px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); font-weight: 900; } .faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 58px; } .faq-intro h2 { margin-bottom: 14px; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.07; letter-spacing: -.04em; } .faq-intro p { color: var(--muted); } .faq-list { border-top: 1px solid var(--line); } details { border-bottom: 1px solid var(--line); } summary { position: relative; padding: 21px 46px 21px 0; font-weight: 780; cursor: pointer; list-style: none; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; position: absolute; right: 4px; top: 16px; color: var(--brand); font-size: 1.55rem; font-weight: 400; } details[open] summary::after { content: "−"; } details p { padding: 0 46px 21px 0; margin: 0; color: var(--muted); font-size: .93rem; } .page-hero { padding: 35px 0 62px; border-bottom: 1px solid var(--line); background: linear-gradient(130deg, #fff 0%, #f6f6f7 72%, #f3eeef 100%); } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 36px; color: var(--muted); font-size: .78rem; } .breadcrumbs a { text-decoration: none; } .breadcrumbs a:hover { color: var(--brand); } .page-hero h1 { max-width: 850px; margin-bottom: 17px; font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -.055em; } .page-lead { max-width: 760px; margin-bottom: 0; color: var(--muted); font-size: 1.12rem; } .product-hero-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; } .product-visual { min-height: 470px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); } .product-visual img { width: min(420px, 90%); height: 420px; object-fit: contain; filter: drop-shadow(0 22px 23px rgba(34, 26, 30, .15)); } .product-summary h1 { margin-bottom: 16px; font-size: clamp(2.7rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -.055em; } .product-summary > p { color: var(--muted); font-size: 1.05rem; } .buy-panel { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; margin-top: 28px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 14px 35px rgba(48, 18, 30, .07); } .buy-price strong { display: block; font-size: 1.9rem; line-height: 1.1; letter-spacing: -.04em; } .buy-price span { color: var(--muted); font-size: .76rem; } .product-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 13px; } .product-actions .button { flex: 1; } .product-meta-line { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; } .meta-pill { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: .75rem; } .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; } .article-main { min-width: 0; } .article-main section { padding: 0 0 50px; scroll-margin-top: 110px; } .article-main section + section { padding-top: 50px; border-top: 1px solid var(--line); } .article-main h2 { margin-bottom: 16px; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.12; letter-spacing: -.035em; } .article-main h3 { margin-bottom: 9px; font-size: 1.15rem; } .article-main p { color: #4f4a4d; } .ingredients-copy { padding: 22px; border-radius: 15px; background: var(--surface); color: #4f4a4d; font-size: .93rem; } .caution { padding: 18px 20px; border-left: 4px solid var(--brand); background: var(--brand-soft); color: #4d1b2b; font-size: .9rem; } .article-aside { position: sticky; top: 102px; display: grid; gap: 16px; } .aside-card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; } .aside-card strong { display: block; margin-bottom: 10px; } .aside-card nav { display: grid; gap: 8px; } .aside-card nav a { color: var(--muted); font-size: .86rem; text-decoration: none; } .aside-card nav a:hover { color: var(--brand); } .aside-card .button { width: 100%; margin-top: 15px; } .nutrition-label { margin-top: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; } .nutrition-label img { width: 100%; height: auto; } .source-note { margin-top: 12px; color: var(--muted); font-size: .78rem; } .source-note a { color: var(--brand); } .variant-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .variant-card { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; } .variant-card h3 { margin-bottom: 4px; } .variant-card p { margin-bottom: 13px; color: var(--muted); font-size: .86rem; } .variant-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .variant-bottom strong { font-size: 1.05rem; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .related-card { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 15px; text-decoration: none; } .related-card:hover { border-color: #dca7b6; box-shadow: 0 12px 28px rgba(48, 18, 30, .07); } .related-card img { width: 92px; height: 92px; object-fit: contain; } .related-card span { color: var(--muted); font-size: .75rem; } .related-card strong { display: block; line-height: 1.25; } .content-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .content-card { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; } .content-card h2, .content-card h3 { margin-bottom: 10px; } .content-card p:last-child { margin-bottom: 0; color: var(--muted); } .prose { max-width: 800px; } .prose h2 { margin: 42px 0 12px; font-size: 1.65rem; letter-spacing: -.025em; } .prose h2:first-child { margin-top: 0; } .prose h3 { margin: 28px 0 9px; } .prose p, .prose li { color: #504b4e; } .prose ul, .prose ol { padding-left: 22px; } .prose a { color: var(--brand); } .policy-table { width: 100%; margin: 20px 0; border-collapse: collapse; } .policy-table th, .policy-table td { padding: 13px; border: 1px solid var(--line); text-align: left; vertical-align: top; } .policy-table th { background: var(--surface); } .source-list { padding-left: 20px; } .source-list li { margin-bottom: 8px; } .final-cta { padding-block: 70px; background: linear-gradient(120deg, var(--navy), var(--brand)); color: #fff; } .final-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 34px; } .final-cta h2 { max-width: 680px; margin-bottom: 9px; font-size: clamp(2rem, 3.5vw, 3.35rem); line-height: 1.05; letter-spacing: -.045em; } .final-cta p { margin-bottom: 0; color: #fae8ed; } .footer { padding: 48px 0 96px; background: var(--surface-warm); color: var(--muted); } .footer-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; } .footer p { max-width: 700px; margin: 17px 0 0; font-size: .79rem; line-height: 1.65; } .footer-links { display: flex; flex-wrap: wrap; align-content: start; justify-content: flex-end; gap: 11px 18px; } .footer-links a, .cookie-settings-link { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; font-size: .82rem; text-decoration: none; cursor: pointer; } .footer-links a:hover, .cookie-settings-link:hover { color: var(--brand); } .footer-bottom { margin-top: 28px; padding-top: 20px; border-top: 1px solid #dedbd9; font-size: .75rem; } .cookie-banner { position: fixed; z-index: 50; right: 18px; bottom: 18px; width: min(390px, calc(100% - 36px)); padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 18px 45px rgba(35, 20, 26, .18); } .cookie-banner[hidden] { display: none; } .cookie-banner strong { display: block; margin-bottom: 4px; font-size: 1rem; line-height: 1.3; } .cookie-banner p { margin-bottom: 10px; color: var(--muted); font-size: .78rem; line-height: 1.45; } .cookie-banner p a { color: var(--brand); } .cookie-actions { display: flex; gap: 8px; } .cookie-actions .button { flex: 1; min-height: 42px; padding: 8px 11px; font-size: .82rem; } .mobile-shop { display: none; position: fixed; z-index: 40; right: 12px; bottom: 12px; left: 12px; box-shadow: 0 16px 40px rgba(48, 18, 30, .3); } .not-found { min-height: 68vh; display: grid; place-items: center; text-align: center; } .not-found-inner { max-width: 630px; } .not-found-code { margin-bottom: 3px; color: var(--brand); font-size: 5rem; font-weight: 900; line-height: 1; } .not-found h1 { margin-bottom: 13px; font-size: clamp(2.3rem, 5vw, 4rem); } .not-found p { color: var(--muted); } @media (max-width: 980px) { .main-nav { position: absolute; inset: 100% 0 auto; display: none; max-height: 75dvh; overflow-y: auto; padding: 24px 20px 30px; border-bottom: 1px solid var(--line); background: #fff; box-shadow: 0 24px 44px rgba(48, 18, 30, .12); } .main-nav.open { display: grid; } .main-nav a { font-size: 1.03rem; } .menu-button { display: block; } .header-cta { display: inline-flex; } .hero-grid, .product-hero-grid { grid-template-columns: 1fr; } .hero-grid { gap: 35px; } .hero-copy { max-width: 780px; } .hero-showcase { max-width: 780px; width: 100%; } .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split-grid { grid-template-columns: 1fr; } .article-layout { grid-template-columns: 1fr; } .article-aside { display: none; } .related-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); font-size: 17px; } .container { width: min(calc(100% - 32px), 620px); } .announcement .container { min-height: 36px; font-size: .78rem; line-height: 1.35; } .header-inner { min-height: 66px; } .brand { font-size: .98rem; } .brand-mark { width: 32px; height: 32px; } .menu-button { width: 46px; height: 46px; } .main-nav { inset-block-start: 100%; } .header-cta { display: none; } .hero-grid { min-height: auto; padding-block: 38px; } .hero-copy h1 { font-size: clamp(2.35rem, 10.5vw, 3.2rem); } .hero-copy > p:not(.eyebrow):not(.microcopy) { font-size: 1.03rem; } .hero-actions { flex-direction: column; } .hero-actions .button { width: 100%; } .button { min-height: 48px; font-size: .97rem; } .microcopy { font-size: .86rem; line-height: 1.5; } .hero-showcase { min-height: 365px; padding: 14px; border-radius: 20px; } .hero-products { height: 205px; } .hero-products img { height: 190px; } .showcase-head { margin-top: 13px; } .showcase-head strong { font-size: 1rem; } .showcase-head span { font-size: .78rem; } .mini-price { padding: 8px; } .mini-price span { font-size: .72rem; } .mini-price strong { font-size: .94rem; } .trust-grid { grid-template-columns: 1fr; gap: 10px; padding-block: 14px; } .trust-item { font-size: .9rem; } .trust-item + .trust-item { border-left: 0; } .section { padding-block: 56px; } .section-heading { display: block; margin-bottom: 25px; } .section-heading h2 { margin-bottom: 11px; } .product-grid, .steps, .reason-grid, .content-grid, .variant-grid { grid-template-columns: 1fr; } .product-grid { gap: 31px; } .product-media { min-height: 245px; } .product-body { padding-top: 16px; } .product-kicker { font-size: .78rem; } .product-title { font-size: 1.35rem; } .product-desc { font-size: .96rem; line-height: 1.55; } .product-meta { align-items: start; } .product-price small, .product-meta > small { font-size: .8rem; line-height: 1.4; } .product-meta > small { max-width: 52%; text-align: right; } .card-shop { width: auto; min-height: 48px; } .feature-panel { min-height: 390px; padding: 29px 25px; } .feature-panel::after { font-size: 12rem; } .feature-item p, .step p, .reason-card p { font-size: .96rem; } .price-shell { overflow: visible; border: 0; background: transparent; box-shadow: none; } .price-table { display: block; min-width: 0; } .price-table thead { display: none; } .price-table tbody { display: grid; gap: 11px; } .price-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 8px 25px rgba(48, 18, 30, .055); } .price-table td { display: block; padding: 0; border: 0; } .price-table td:first-child { font-size: 1rem; line-height: 1.35; } .price-table td:nth-child(2) { width: auto; font-size: 1.04rem; line-height: 1.35; text-align: right; } .price-table td:last-child { grid-column: 1 / -1; width: auto; margin-top: 9px; padding-top: 11px; border-top: 1px solid var(--line); text-align: left; } .price-table td:last-child .button { width: 100%; } .price-footnote { font-size: .88rem; line-height: 1.55; } .faq-grid { grid-template-columns: 1fr; gap: 17px; } details p { font-size: .98rem; line-height: 1.62; } .final-cta-inner { align-items: stretch; flex-direction: column; } .final-cta .button { width: 100%; } .footer-grid { grid-template-columns: 1fr; } .footer-links { justify-content: flex-start; } .page-hero { padding: 25px 0 48px; } .breadcrumbs { margin-bottom: 25px; } .breadcrumbs { font-size: .82rem; } .page-hero h1 { font-size: clamp(2.35rem, 10.5vw, 3.2rem); } .page-lead { font-size: 1.06rem; line-height: 1.6; } .product-visual { min-height: 330px; } .product-visual img { width: 300px; height: 300px; } .product-summary h1 { font-size: clamp(2.35rem, 10.5vw, 3.2rem); } .buy-panel { grid-template-columns: 1fr; } .product-actions { flex-direction: column; } .product-actions .button { width: 100%; } .article-aside { grid-template-columns: 1fr; } .article-main section { padding-bottom: 40px; } .article-main section + section { padding-top: 40px; } .related-card { grid-template-columns: 80px 1fr; } .related-card img { width: 80px; height: 80px; } .footer { padding-bottom: 48px; } .footer p { font-size: .86rem; line-height: 1.65; } .footer-links a, .cookie-settings-link { font-size: .86rem; } .footer-bottom { font-size: .8rem; } .mobile-shop { bottom: calc(10px + env(safe-area-inset-bottom)); min-height: 50px; font-size: 1rem; } .mobile-shop.is-visible { display: inline-flex; } .cookie-banner { right: 10px; bottom: 76px; width: calc(100% - 20px); padding: 12px; border-radius: 14px; } .cookie-banner strong { font-size: 1rem; } .cookie-banner p { margin-bottom: 9px; font-size: .82rem; line-height: 1.4; } .cookie-actions .button { min-height: 44px; font-size: .88rem; } body.cookie-open .mobile-shop { display: none; } body.cookie-open .cookie-banner { bottom: calc(10px + env(safe-area-inset-bottom)); } } @media (max-width: 390px) { .hero-products picture:nth-child(1) { transform: translate(20px, 16px) rotate(-3deg); } .hero-products picture:nth-child(3) { transform: translate(-20px, 16px) rotate(3deg); } } .hero-grid > *, .product-grid > *, .product-hero-grid > *, .split-grid > *, .content-grid > *, .variant-grid > *, .header-inner > *, .article-layout > * { min-width: 0; } h1, h2, h3, .product-meta, .footer a, .ingredients-copy, .policy-table { overflow-wrap: anywhere; } .affiliate-note { margin: 14px 0 0; max-width: 640px; color: var(--muted); font-size: .875rem; line-height: 1.5; } .affiliate-note a, .text-link, .useful-links a { color: var(--brand-dark); text-underline-offset: 3px; } .hero-copy > .affiliate-note { font-size: .875rem !important; margin: 12px 0 0 !important; } .table-detail { display: block; margin-top: 5px; color: var(--muted); font-size: .8125rem; font-weight: 450; line-height: 1.45; } .portion-cell { font-weight: 750; } .comparison-list { display: grid; gap: 12px; } .comparison-row { display: grid; grid-template-columns: 155px minmax(0,1fr) minmax(250px,.8fr); gap: 24px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: #fff; } .comparison-row h3, .comparison-row p, .comparison-row dl { margin: 0; } .comparison-row h3 { font-size: 1.125rem; } .comparison-row p { color: var(--muted); } .comparison-row dl, .serving-summary dl { display: grid; gap: 10px; } .comparison-row dl div, .serving-summary dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; } .comparison-row dt { color: var(--muted); font-size: .875rem; } .comparison-row dd { margin: 0; font-weight: 650; text-align: right; font-size: .875rem; } .serving-summary { padding: 22px; margin: 22px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .serving-summary h3 { margin: 0 0 12px; } .serving-summary dt { max-width: 75%; } .serving-summary dd { margin: 0; text-align: right; font-weight: 750; } .serving-summary p:last-child { margin: 14px 0 0; font-size: .875rem; color: var(--muted); } .nutrition-table-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .nutrition-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .nutrition-table caption { padding: 16px; font-weight: 750; text-align: left; background: var(--surface); } .nutrition-table th, .nutrition-table td { padding: 12px 16px; border-top: 1px solid var(--line); text-align: left; overflow-wrap: anywhere; } .nutrition-table thead th { background: var(--brand-soft); font-size: .875rem; } .nutrition-table th:first-child { width: 47%; } .nutrition-table th:nth-child(2) { width: 31%; } .nutrition-table th:nth-child(3) { width: 22%; } .nutrition-table tbody th { font-weight: 550; } .nutrition-table tbody tr:nth-child(even) { background: var(--surface); } .label-details { margin-top: 18px; } .label-details .nutrition-label { display: block; margin: 0 0 18px; } .useful-links { margin-top: 24px; } .source-note { font-size: .875rem; line-height: 1.55; } .product-summary > .affiliate-note { font-size: .875rem; } .card-actions .button-link { min-height: 44px; } .cookie-banner { max-height: calc(100dvh - 24px); overflow-y: auto; } .cookie-banner p { font-size: .875rem; line-height: 1.5; } .cookie-actions .button { min-height: 44px; font-size: .875rem; box-shadow: none; } .cookie-actions .button-secondary { border: 2px solid var(--ink); } #close-cookie-settings { width: 100%; margin-top: 10px; } .product-intro { margin-bottom: 14px; } @media (max-width: 980px) { .comparison-row { grid-template-columns: 150px minmax(0,1fr); } .comparison-row dl { grid-column: 1 / -1; } } @media (max-width: 720px) { .header-inner { gap: 12px; } .brand { white-space: normal; line-height: 1.2; } .brand-mark, .menu-button { flex-shrink: 0; } .home-hero .hero-grid { padding-block: 30px; } .hero-copy h1 { line-height: 1.06; letter-spacing: -.04em; } .product-grid { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; } .product-card { width: 100%; min-width: 0; } .product-media img { width: 210px; height: 210px; } .mini-price span { white-space: normal; overflow: visible; font-size: .75rem; } .showcase-head { align-items: start; flex-wrap: wrap; } .product-hero { padding: 18px 0 32px; } .product-hero .breadcrumbs { margin-bottom: 18px; } .product-hero-grid { grid-template-columns: minmax(0,1fr) 116px; gap: 10px 14px; align-items: start; } .product-summary { display: contents; } .product-visual { grid-column: 2; grid-row: 1 / span 2; min-height: 0; height: 138px; border-radius: 14px; } .product-visual picture { width: 100%; } .product-visual img { width: 114px; height: 136px; object-fit: contain; } .product-summary > .eyebrow { grid-column: 1; grid-row: 1; margin: 0; font-size: .75rem; } .product-summary h1 { grid-column: 1; grid-row: 2; font-size: clamp(1.7rem,6.8vw,2.2rem); line-height: 1.13; letter-spacing: -.03em; margin: 0; } .product-intro { grid-column: 1 / -1; grid-row: 3; margin: 0; font-size: 1rem !important; line-height: 1.5; } .buy-panel { grid-column: 1 / -1; grid-row: 4; grid-template-columns: 1fr; gap: 7px; margin: 0; padding: 13px 15px; } .buy-panel > div:last-child { font-size: .875rem; } .buy-price strong { font-size: 1.7rem; } .buy-price span { font-size: .8125rem; } .product-actions { grid-column: 1 / -1; grid-row: 5; margin: 0; } .product-summary > .affiliate-note { grid-column: 1 / -1; grid-row: 6; margin: 0; font-size: .875rem; } .product-summary > .microcopy { grid-column: 1 / -1; grid-row: 7; margin: 0; font-size: .875rem; } .price-table .portion-cell { grid-column: 1 / -1; margin-top: 9px; font-size: 1rem; } .price-table .portion-cell::before { content: 'Per portion: '; color: var(--muted); font-size: .875rem; font-weight: 450; } .comparison-row { grid-template-columns: minmax(0,1fr); gap: 10px; padding: 18px; } .comparison-row dl { margin-top: 6px; } .serving-summary { padding: 17px; } .serving-summary dl div { gap: 12px; } .serving-summary dd { min-width: 70px; } .nutrition-table { font-size: .875rem; } .nutrition-table caption { font-size: .875rem; padding: 13px; } .nutrition-table th, .nutrition-table td { padding: 11px 9px; } .policy-table { table-layout: fixed; font-size: .875rem; } .policy-table th, .policy-table td { padding: 10px 7px; } .cookie-banner p { font-size: .875rem; } .cookie-actions { flex-wrap: wrap; } .cookie-actions .button { min-width: 110px; } .footer p, .footer-links a, .cookie-settings-link { font-size: .875rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }