/* FoodFestival UI · texts and headings (category and product pages). Only page headings and long-read blocks: category SEO text (.seo .editor), its FAQ (.sp-seo-faq), product description and attributes (.details__tabs-content), breadcrumbs, product tabs, product code. Sizes are in px: the theme shrinks the root rem to 9px below 480px, which made body text 12.6px. */ /* ---------- page headings ---------- */ .catalog__heading{font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.01em;color:#22283A;margin:0 0 20px} /* product.twig prints .sku__heading h1{font-size:1.8rem} inside , after this file: both block classes win without !important */ .sku__page-heading.sku__heading h1{font-size:28px;line-height:36px;font-weight:700;letter-spacing:-.01em;color:#22283A;margin:0} @media (max-width:767px){ .catalog__heading{font-size:24px;line-height:30px;margin:0 0 16px} .sku__page-heading.sku__heading h1{font-size:22px;line-height:28px} } /* ---------- breadcrumbs, tabs, product code ---------- */ .breadcrumbs__link{font-size:13px;line-height:20px;color:#3660BC} .breadcrumbs__link:hover{color:#2A4E9A} .breadcrumbs__link.is-active,.breadcrumbs__link.is-active:hover{color:#5A6477} .details__tabs-btn{font-size:15px;line-height:20px;font-weight:500;color:#5A6477} .details__tabs-btn:hover{color:#3660BC} .details__tabs-btn.is-active{color:#22283A} .sku__id{color:#5A6477;font-variant-numeric:tabular-nums} /* ---------- long reads ---------- */ .seo .editor, .details__tabs-content{color:#22283A} /* Category text keeps the full width of its column (≈840 px at 1440) */ /* Product description panel is 120rem wide (theme Custom CSS): centre the text column inside it */ .details__tabs-content > p,.details__tabs-content > ul,.details__tabs-content > ol,.details__tabs-content > h2, .details__tabs-content > h3,.details__tabs-content > h4,.details__tabs-content > blockquote,.details__tabs-content > table{ max-width:880px;margin-left:auto;margin-right:auto } .seo .editor p,.seo .editor li, .details__tabs-content p,.details__tabs-content li{font-size:16px;line-height:26px} .seo .editor p,.details__tabs-content p{margin-top:0;margin-bottom:16px} .seo .editor ul,.seo .editor ol,.details__tabs-content ul,.details__tabs-content ol{margin-top:0;margin-bottom:16px;padding-left:22px} .seo .editor li,.details__tabs-content li{margin-bottom:8px} .seo .editor li:last-child,.details__tabs-content li:last-child{margin-bottom:0} .seo .editor strong,.seo .editor b,.details__tabs-content strong,.details__tabs-content b{font-weight:700} .seo .editor a,.details__tabs-content a{color:#3660BC;text-decoration:underline;text-underline-offset:2px} .seo .editor a:hover,.details__tabs-content a:hover{color:#2A4E9A} /* Headings group with the text below: more space above, less below */ .seo .editor h2,.details__tabs-content h2{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.005em;color:#22283A;margin-top:32px;margin-bottom:12px} .seo .editor h3,.details__tabs-content h3{font-size:18px;line-height:24px;font-weight:700;color:#22283A;margin-top:24px;margin-bottom:8px} .seo .editor h4,.details__tabs-content h4{font-size:16px;line-height:24px;font-weight:700;color:#22283A;margin-top:20px;margin-bottom:6px} .seo .editor > :first-child,.details__tabs-content > :first-child{margin-top:0} .seo .editor table,.details__tabs-content table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:15px;line-height:22px} .seo .editor th,.seo .editor td,.details__tabs-content th,.details__tabs-content td{padding:8px 12px 8px 0;border-bottom:1px solid #E3E8F0;text-align:left;vertical-align:top} .seo .editor th,.details__tabs-content th{font-weight:500;color:#5A6477} @media (max-width:767px){ /* Theme pads the description panel by 4rem/3rem: give the text the width back on phones */ .details__tabs-content{padding-left:16px;padding-right:16px} .seo .editor p,.seo .editor li,.details__tabs-content p,.details__tabs-content li{font-size:15px;line-height:24px} .seo .editor h2,.details__tabs-content h2{font-size:20px;line-height:26px;margin-top:28px;margin-bottom:10px} .seo .editor h3,.details__tabs-content h3{font-size:17px;line-height:22px} } /* "Читати далі" */ .seo__readmore-link{font-size:14px;font-weight:500;color:#3660BC} .seo__readmore-link:hover{color:#2A4E9A} /* ---------- attributes (dl) ---------- */ .details__info-heading{font-size:18px;line-height:24px;font-weight:700;color:#22283A} .details__info-dl{font-size:15px;line-height:22px} .details__info-dl dt{font-size:13px;line-height:18px;color:#5A6477} /* was #d1d1d1, 1.5:1 */ .details__info-dl dd{color:#22283A;margin-bottom:16px} /* ---------- category FAQ (sp_auto_seo_faq) ---------- */ .sp-seo-faq-block{max-width:880px} /* On the product page the FAQ sits directly in

, with no container: centre it like the description */ main > .sp-seo-faq > .sp-seo-faq-block{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px} .sp-seo-faq .faq-title{font-size:22px;line-height:28px;font-weight:700;color:#22283A;text-align:left;margin:32px 0 12px} .sp-seo-faq .faq-question{margin-top:8px;padding:16px 20px;border-radius:12px;box-shadow:inset 0 0 0 1px #E3E8F0} .sp-seo-faq .faq-question:hover{box-shadow:inset 0 0 0 1px #CDD4E0,0 2px 8px rgba(26,40,112,.06)} .sp-seo-faq .faq-link{margin:-16px -20px;padding:16px 48px 16px 20px;font-size:16px;line-height:24px;font-weight:500;color:#22283A} .sp-seo-faq .faq-link:after{top:22px;right:22px} /* Product FAQ wraps each question in

(theme: 25px): keep the heading tag for SEO, look like a question */ .sp-seo-faq .faq-link h2,.sp-seo-faq .faq-link h3,.sp-seo-faq .faq-link h4{font:inherit;color:inherit;letter-spacing:inherit;margin:0} .sp-seo-faq .faq-text p{margin:0 0 8px} .sp-seo-faq .faq-text p:last-child{margin-bottom:0} .sp-seo-faq .faq-text{font-size:15px;line-height:24px;color:#3D4557;padding-top:12px} @media (max-width:767px){ .sp-seo-faq .faq-title{font-size:20px;line-height:26px} .sp-seo-faq .faq-link{font-size:15px;line-height:22px} }