:root {
    --red: #ed1c24;
    --red-dark: #c90e16;
    --ink: #17181b;
    --muted: #6d7179;
    --line: #e8e8eb;
    --paper: #fff;
    --wash: #f6f6f4;
    --green: #14835f;
    --shadow: 0 12px 36px rgba(28, 25, 23, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--wash); color: var(--ink); font-family: "Segoe UI", Arial, system-ui, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.hero { background: var(--red); color: white; overflow: hidden; position: relative; }
.hero::after { content: ""; position: absolute; width: 430px; height: 430px; border: 90px solid rgba(255,255,255,.07); border-radius: 50%; right: -160px; top: -210px; }
.hero-inner { width: min(1440px, calc(100% - 48px)); margin: auto; min-height: 300px; position: relative; z-index: 1; display: grid; grid-template-columns: 270px 1fr; gap: 48px; align-items: center; padding: 30px 0 45px; }
.brand { color: white; text-decoration: none; display: flex; align-items: center; gap: 12px; align-self: start; }
.brand-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: white; color: var(--red); font-weight: 900; letter-spacing: -2px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 17px; letter-spacing: .06em; }
.brand small { opacity: .78; font-size: 11px; margin-top: 3px; }
.top-nav { position: absolute; right: 0; top: 36px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.top-nav a { color: white; text-decoration: none; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; padding: 9px 14px; font-size: 11px; font-weight: 800; }
.top-nav a:hover { background: white; color: var(--red); }
.hero-copy { max-width: 830px; padding-top: 18px; }
.eyebrow { font-size: 12px; letter-spacing: .17em; font-weight: 800; opacity: .77; margin: 0 0 12px; }
.hero h1 { font-size: clamp(34px, 5vw, 64px); letter-spacing: -.045em; line-height: 1; margin: 0 0 14px; }
.hero-copy > p:last-child { margin: 0; max-width: 700px; font-size: 17px; opacity: .86; }
.search-box { grid-column: 2; background: white; color: var(--ink); height: 62px; border-radius: 16px; display: flex; align-items: center; padding: 0 18px; max-width: 880px; box-shadow: 0 18px 35px rgba(109,0,0,.16); }
.search-box > span { font-size: 33px; transform: rotate(-20deg); line-height: 1; color: var(--red); margin-right: 12px; }
.search-box input { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 16px; background: transparent; }
.search-box button { border: 0; background: #f3f3f3; border-radius: 50%; width: 32px; height: 32px; font-size: 22px; line-height: 1; color: #777; }

.catalog-layout { width: min(1440px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; padding: 30px 0 60px; }
.filters { position: sticky; top: 18px; background: var(--paper); border-radius: 18px; padding: 22px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.filters-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.filters-title span, .results-head span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; display: block; }
.filters-title strong, .results-head strong { font-size: 18px; display: block; margin-top: 3px; }
.filters-title button { border: 0; background: none; color: var(--red); padding: 3px 0; font-size: 12px; font-weight: 700; }
.filter-group { border: 0; padding: 0; margin: 20px 0 0; min-width: 0; }
.filter-group > label:first-child, .filter-label, .filter-group legend { display: block; font-size: 13px; font-weight: 800; margin-bottom: 9px; padding: 0; }
.filter-group select { width: 100%; height: 44px; background: white; border: 1px solid #dcdce0; border-radius: 11px; padding: 0 12px; color: var(--ink); outline: 0; }
.filter-group select:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(237,28,36,.09); }
.segment-control { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 4px; background: #f1f1f1; padding: 4px; border-radius: 12px; }
.segment-control button { border: 0; border-radius: 9px; background: transparent; height: 34px; color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; padding: 0 5px; }
.segment-control button.active { background: white; color: var(--red); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.check-row { display: flex !important; align-items: center; gap: 10px; font-size: 13px !important; font-weight: 600 !important; margin: 0 0 10px !important; cursor: pointer; }
.check-row input { appearance: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid #c9c9cf; border-radius: 6px; display: grid; place-items: center; flex: 0 0 auto; }
.check-row input:checked { background: var(--red); border-color: var(--red); }
.check-row input:checked::after { content: "✓"; color: white; font-size: 13px; font-weight: 800; }
.rating-note { margin-top: 20px; padding: 14px; border-radius: 12px; background: #fff7df; color: #66501d; }
.rating-note strong { font-size: 12px; }
.rating-note p { font-size: 10.5px; line-height: 1.55; margin: 5px 0 0; }

.results { min-width: 0; }
.results-head { min-height: 48px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.page-status { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; transition: opacity .15s; }
.product-grid.is-loading { opacity: .45; pointer-events: none; }
.product-card { background: white; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 18px rgba(25,25,25,.045); min-width: 0; transition: transform .2s, box-shadow .2s; }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.product-photo-wrap { position: relative; aspect-ratio: 4/2.7; background: #f3f1ed; overflow: hidden; }
.product-photo { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s; }
.product-card:hover .product-photo { transform: scale(1.025); }
.category-chip { position: absolute; left: 12px; top: 12px; max-width: calc(100% - 100px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-radius: 999px; padding: 6px 10px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.fitness-badge { position: absolute; right: 10px; top: 10px; color: white; min-width: 61px; height: 44px; border-radius: 12px; display: grid; place-content: center; text-align: center; box-shadow: 0 5px 14px rgba(0,0,0,.16); }
.fitness-badge span { font-size: 8px; text-transform: uppercase; font-weight: 700; opacity: .88; }
.fitness-badge strong { font-size: 14px; }
.fitness-5 { background: #15835f; } .fitness-4 { background: #2d9c6f; } .fitness-3 { background: #d69b13; } .fitness-2 { background: #e46f24; } .fitness-1 { background: #d63840; }
.product-body { padding: 15px 16px 14px; }
.product-body h2 { font-size: 17px; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 10px; min-height: 43px; }
.product-title-link { color: inherit; text-decoration: none; }.product-title-link:hover { color: var(--red); }
.price-row { display: flex; align-items: baseline; gap: 8px; margin: -2px 0 9px; }.price-row strong { color: var(--red); font-size: 17px; }.price-row del { color: #9a9ca2; font-size: 11px; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; min-height: 24px; }
.meta-row > span:not(.tag) + span:not(.tag)::before { content: "•"; margin-right: 6px; color: #bbb; }
.tag { border-radius: 999px; background: #eeeeef; color: #55585e; padding: 4px 7px; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.tag-hot { background: #ffeaeb; color: #c70e16; } .tag-warm { background: #fff0de; color: #a7510d; } .tag-purple { background: #f0e8ff; color: #6f36a8; } .tag-green { background: #e3f5ed; color: #116c4e; }
.topping-box { margin-top: 12px; background: #eef8f3; border-left: 3px solid var(--green); border-radius: 0 10px 10px 0; padding: 8px 10px; min-height: 39px; }
.topping-box p { font-size: 10px; line-height: 1.45; margin: 0; color: #345e50; }
.topping-box p + p { margin-top: 3px; }
.topping-box span { font-weight: 800; color: #17674e; margin-right: 4px; }
details { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
summary { color: var(--red); font-size: 11px; font-weight: 800; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
summary::after { content: "+"; font-size: 16px; line-height: .7; }
details[open] summary::after { content: "−"; }
.details-body { padding-top: 9px; color: var(--muted); }
.details-body h3 { font-size: 9px; color: var(--ink); text-transform: uppercase; letter-spacing: .05em; margin: 10px 0 3px; }
.details-body p { font-size: 10px; line-height: 1.55; margin: 0; }
.set-links { list-style: none; padding: 0; margin: 3px 0 0; }.set-links li { display: inline; font-size: 10px; }.set-links li:not(:last-child)::after { content: " · "; color: #aaa; }.set-links a { color: var(--red); font-weight: 700; }.set-links small { margin-left: 3px; }

.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 28px; }
.pagination button, .empty-state button { border: 1px solid #dddde0; background: white; border-radius: 10px; min-width: 39px; height: 39px; padding: 0 12px; color: var(--ink); font-size: 12px; font-weight: 700; }
.pagination button.active, .empty-state button { background: var(--red); color: white; border-color: var(--red); }
.pagination button:disabled { opacity: .35; cursor: default; }
.loading-state, .empty-state { background: white; border: 1px dashed #d5d5d8; border-radius: 18px; min-height: 320px; display: grid; place-content: center; justify-items: center; text-align: center; padding: 30px; }
.loading-state span { width: 38px; height: 38px; border: 4px solid #eee; border-top-color: var(--red); border-radius: 50%; animation: spin .8s linear infinite; }
.empty-state > span { font-size: 44px; }.empty-state h2 { margin: 12px 0 4px; }.empty-state p { color: var(--muted); margin: 0 0 18px; font-size: 13px; }
@keyframes spin { to { transform: rotate(360deg); } }
footer { padding: 22px; background: #1d1d20; color: #aaa; text-align: center; font-size: 11px; }
.error-page { max-width: 700px; margin: 100px auto; padding: 30px; }
.simple-header { min-height: 92px; padding: 19px max(24px, calc((100% - 1200px) / 2)); background: var(--red); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.back-link { color: white; text-decoration: none; font-size: 12px; font-weight: 800; }
.update-page { width: min(1200px, calc(100% - 40px)); margin: 42px auto 70px; display: grid; grid-template-columns: minmax(0, 760px) 1fr; gap: 24px; align-items: start; }
.update-card, .update-info { background: white; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.update-card { padding: clamp(24px, 5vw, 48px); }
.red-text { color: var(--red); opacity: 1; }
.update-card h1 { font-size: clamp(31px, 4vw, 48px); letter-spacing: -.04em; margin: 0 0 12px; }
.update-card .lead { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0 0 25px; }
.update-card code { background: #f3f3f3; border-radius: 5px; padding: 2px 5px; font-size: 12px; }
.database-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.database-stats div { background: var(--wash); border-radius: 13px; padding: 16px; }
.database-stats strong, .database-stats span { display: block; }
.database-stats strong { font-size: 22px; color: var(--red); }
.database-stats span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
.safety-note { background: #eef8f3; color: #245f4b; padding: 16px; border-radius: 13px; margin: 20px 0; }
.safety-note strong { font-size: 12px; }.safety-note p { font-size: 11px; line-height: 1.55; margin: 5px 0 0; }
.update-button { width: 100%; min-height: 54px; border: 0; border-radius: 13px; background: var(--red); color: white; font-weight: 800; font-size: 13px; display: flex; justify-content: center; align-items: center; gap: 10px; }
.update-button:hover:not(:disabled) { background: var(--red-dark); }.update-button:disabled { opacity: .7; cursor: wait; }
.button-spinner { width: 19px; height: 19px; border: 2px solid rgba(255,255,255,.4); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; }
.update-result { margin-top: 18px; border-radius: 13px; padding: 16px; }.update-result strong { font-size: 13px; }.update-result p { font-size: 11px; line-height: 1.55; margin: 5px 0; }
.update-result.success { background: #e5f6ee; color: #146447; }.update-result.error { background: #ffebec; color: #a90f17; }
.update-result a { color: inherit; font-size: 11px; font-weight: 800; }
.update-info { padding: 26px; }.update-info h2 { font-size: 18px; margin: 0 0 14px; }.update-info ul { padding-left: 18px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.9; }.update-info p { color: var(--red); font-size: 11px; font-weight: 800; margin: 16px 0 0; }
.details-page { width: min(1000px, calc(100% - 40px)); margin: 35px auto 70px; display: grid; grid-template-columns: minmax(0, 430px) 1fr; gap: 24px; align-items: start; }.details-product .product-card { max-width: 430px; }.relations-card { background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 25px; }.relations-card h1 { margin: 0 0 20px; font-size: 25px; }.relations-card h2 { margin: 18px 0 9px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }.relations-card ul { list-style: none; margin: 0; padding: 0; }.relations-card li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; }.relations-card a { color: var(--red); font-weight: 700; }.relations-card small, .relations-card p { color: var(--muted); font-size: 10px; }

/* Selection controls */
.filter-help { color: var(--muted); font-size: 12px; line-height: 1.4; margin: -4px 0 10px; }
.price-values { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; }
.price-values strong { color: var(--red); }
.price-filter label { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; margin-top: 7px; }
.price-filter input { width: 100%; accent-color: var(--red); }
.ingredient-group { margin: 7px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: #fafafa; }
.ingredient-group summary { padding: 10px 11px; color: var(--ink); font-size: 12px; }
.ingredient-group summary small { margin-left: auto; margin-right: 7px; color: var(--muted); }
.ingredient-group > div { max-height: 210px; overflow-y: auto; padding: 4px 11px 5px; }
.ingredient-group .check-row { font-size: 11px !important; }
.add-cart-button, .friendly-add { width: 100%; min-height: 40px; border: 0; border-radius: 10px; background: var(--red); color: white; font-size: 12px; font-weight: 800; }
.add-cart-button:hover, .friendly-add:hover { background: var(--red-dark); }
.price-missing { color: var(--muted); font-size: 12px; margin: 3px 0 10px; }

/* Related product drawer */
.detail-drawer-overlay, .cart-overlay { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.42); }
.detail-drawer { position: fixed; z-index: 31; right: 0; top: 0; bottom: 0; width: min(470px, 94vw); overflow-y: auto; background: white; box-shadow: -16px 0 45px rgba(0,0,0,.22); }
.drawer-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; background: #17181b; color: white; padding: 15px 18px; }
.drawer-head span { font-size: 12px; font-weight: 900; letter-spacing: .08em; }.drawer-head a { color: white; text-decoration: none; font-size: 28px; }
.detail-drawer > img { width: 100%; aspect-ratio: 4/2.8; object-fit: cover; display: block; }.drawer-body { padding: 22px; }.drawer-category { color: var(--red); font-size: 12px; font-weight: 850; }.drawer-body h2 { font-size: 28px; margin: 6px 0 12px; }.drawer-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }.drawer-price strong { color: var(--red); font-size: 23px; }.drawer-price del { color: var(--muted); }.drawer-meta { display: flex; gap: 7px; margin: 14px 0; }.drawer-meta span { background: #eee; border-radius: 999px; padding: 6px 9px; font-size: 12px; }.drawer-body h3 { font-size: 13px; margin: 18px 0 5px; }.drawer-body p { color: var(--muted); font-size: 14px; line-height: 1.6; }.drawer-full-link { display: block; color: var(--red); font-size: 14px; font-weight: 800; margin-top: 20px; }

/* Friendly Card */
.promo-header { background: #17181b; border-bottom: 4px solid var(--red); }.friendly-page { width: min(1240px, calc(100% - 40px)); margin: 28px auto 72px; }
.friendly-summary { display: grid; grid-template-columns: repeat(4, 1fr); background: #17181b; color: white; border-radius: 18px; overflow: hidden; }.friendly-summary > div { padding: 20px; border-right: 1px solid #34353a; }.friendly-summary > div:last-child { border: 0; }.friendly-summary span { color: #ff4a51; font-size: 12px; font-weight: 900; letter-spacing: .08em; }.friendly-summary strong { display: block; font-size: 23px; margin: 5px 0; }.friendly-summary p { color: #c7c8cc; font-size: 14px; line-height: 1.45; margin: 0; }
.friendly-toolbar, .compact-heading { display: flex; justify-content: space-between; align-items: end; gap: 25px; }.friendly-toolbar { margin: 34px 0 22px; }.friendly-toolbar h1 { font-size: 36px; margin: 0 0 6px; }.friendly-toolbar p, .compact-heading p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; }.friendly-toolbar a { flex: 0 0 auto; color: white; background: var(--red); border-radius: 10px; padding: 11px 14px; text-decoration: none; font-size: 14px; font-weight: 800; }
.friendly-block { margin-top: 42px; }.compact-heading { margin-bottom: 16px; }.compact-heading span { color: var(--red); font-size: 12px; font-weight: 900; letter-spacing: .08em; }.compact-heading h2 { font-size: 28px; margin: 3px 0 0; }.compact-heading > p { max-width: 430px; text-align: right; }
.friendly-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.friendly-product-card { background: white; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }.friendly-product-card > a { display: block; background: #f1efeb; }.friendly-product-card img { width: 100%; aspect-ratio: 4/2.55; object-fit: cover; display: block; }.friendly-product-body { padding: 16px; }.friendly-product-card h3 { font-size: 17px; line-height: 1.25; margin: 0 0 10px; }.friendly-product-card h3 a, .bonus-product-card h3 a { color: inherit; text-decoration: none; }.friendly-product-card h3 a:hover, .bonus-product-card h3 a:hover { color: var(--red); }.friendly-price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }.friendly-price-row strong { color: var(--red); font-size: 19px; }.friendly-price-row strong small { font-size: 9px; text-transform: uppercase; }.friendly-price-row > span { color: var(--muted); font-size: 10px; text-align: right; }.promo-meta { display: flex; gap: 6px; margin: 10px 0; }.promo-meta span { background: #eee; border-radius: 999px; padding: 5px 8px; font-size: 10px; }.friendly-composition { margin: 10px 0; }.friendly-composition summary { font-size: 11px; }.friendly-composition ul { padding-left: 18px; }.friendly-composition li { color: var(--muted); font-size: 11px; line-height: 1.45; }.box-note { background: #fff2c9; color: #76550b; border-radius: 8px; padding: 8px 10px; font-size: 11px; line-height: 1.4; }.friendly-add { margin-top: 10px; }
.bonus-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }.bonus-product-card { display: grid; grid-template-columns: 82px 1fr auto; gap: 12px; align-items: center; background: white; border: 1px solid var(--line); border-radius: 13px; padding: 9px; }.bonus-product-card img { width: 82px; height: 68px; object-fit: cover; border-radius: 9px; }.bonus-product-card h3 { font-size: 14px; margin: 0 0 4px; }.bonus-product-card p { color: var(--red); font-size: 12px; font-weight: 800; margin: 0; }.bonus-product-card button { border: 0; border-radius: 9px; background: var(--red); color: white; padding: 9px 10px; font-size: 12px; font-weight: 800; }.bonus-product-card button:disabled { background: #ddd; color: #888; cursor: default; }
.friendly-gift { display: grid; grid-template-columns: 130px 1fr auto; gap: 20px; align-items: center; background: #fff1c7; border: 1px solid #f1d77f; border-radius: 16px; padding: 15px; margin-top: 30px; }.friendly-gift img { width: 130px; height: 100px; object-fit: cover; border-radius: 11px; }.friendly-gift span { color: #9b6700; font-size: 11px; font-weight: 900; }.friendly-gift h2 { font-size: 21px; margin: 4px 0; }.friendly-gift p { color: #695b37; font-size: 13px; margin: 0; }.friendly-gift > strong { color: white; background: var(--red); border-radius: 999px; padding: 10px 13px; font-size: 13px; }.friendly-rules { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin-top: 30px; }.friendly-rules h2 { font-size: 19px; margin: 0 0 9px; }.friendly-rules ul { margin: 0; padding-left: 20px; }.friendly-rules li { color: var(--muted); font-size: 13px; line-height: 1.6; }.sync-note { background: #ffebec; color: #a90f17; border-radius: 10px; padding: 12px; font-size: 12px; }

/* Mini cart */
.cart-fab { position: fixed; z-index: 25; right: 20px; bottom: 20px; display: grid; grid-template-columns: 1fr auto; gap: 1px 12px; min-width: 180px; border: 0; border-radius: 15px; background: #17181b; color: white; box-shadow: 0 12px 35px rgba(0,0,0,.25); padding: 11px 14px; text-align: left; }.cart-fab span { font-size: 13px; font-weight: 800; }.cart-fab strong { grid-row: 1/3; grid-column: 2; align-self: center; display: grid; place-items: center; min-width: 30px; height: 30px; background: var(--red); border-radius: 50%; }.cart-fab small { color: #bbb; font-size: 11px; }
.cart-toast { position: fixed; z-index: 24; right: 20px; bottom: 88px; width: min(340px, calc(100% - 40px)); border: 1px solid #ebcc70; border-radius: 11px; background: #fff2c9; color: #72530c; box-shadow: var(--shadow); padding: 11px 13px; text-align: left; font-size: 12px; line-height: 1.4; }
.mini-cart { position: fixed; z-index: 32; right: 0; top: 0; bottom: 0; width: min(430px, 96vw); background: white; box-shadow: -18px 0 45px rgba(0,0,0,.25); overflow-y: auto; }.cart-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; background: #17181b; color: white; padding: 17px 19px; }.cart-head span { color: #ff4a51; font-size: 10px; font-weight: 900; letter-spacing: .08em; }.cart-head h2 { font-size: 23px; margin: 2px 0 0; }.cart-head button { border: 0; background: none; color: white; font-size: 28px; }.cart-message { display: flex; gap: 8px; justify-content: space-between; background: #fff2c9; color: #72530c; padding: 12px 15px; font-size: 12px; line-height: 1.4; }.cart-message button { border: 0; background: none; color: inherit; }.cart-empty { padding: 50px 24px; text-align: center; }.cart-empty strong { font-size: 19px; }.cart-empty p { color: var(--muted); font-size: 13px; }
.cart-lines { padding: 8px 16px; }.cart-line { display: grid; grid-template-columns: 72px 1fr; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); }.cart-line img { width: 72px; height: 64px; object-fit: cover; border-radius: 9px; }.cart-line-main > strong { display: block; font-size: 13px; line-height: 1.3; }.cart-promo { color: var(--red); font-size: 10px; font-weight: 800; }.cart-line-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }.quantity-control { display: flex; align-items: center; gap: 8px; }.quantity-control button { width: 25px; height: 25px; border: 1px solid var(--line); background: white; border-radius: 7px; }.quantity-control span { font-size: 12px; }.cart-line-bottom > strong { font-size: 13px; }
.cart-benefits { background: #fff7df; margin: 8px 16px; border-radius: 11px; padding: 13px; }.cart-benefits > strong { font-size: 13px; }.cart-benefits p { color: #66501d; font-size: 11px; line-height: 1.4; margin: 4px 0 8px; }.cart-suggestions { display: grid; gap: 5px; }.cart-suggestions button { border: 1px solid #ebcc70; background: white; color: #6c5112; border-radius: 7px; padding: 7px; text-align: left; font-size: 10px; }.gift-progress { border-top: 1px solid #ebd793; margin-top: 10px; padding-top: 9px; color: #76550b; }.gift-progress.unlocked { color: var(--green); }.cart-total { border-top: 1px solid var(--line); padding: 16px; }.cart-total p { display: flex; justify-content: space-between; margin: 0 0 7px; font-size: 12px; }.cart-total p strong { color: var(--green); }.cart-total .cart-grand-total { font-size: 18px; margin-top: 10px; }.cart-total .cart-grand-total strong { color: var(--red); }.cart-total > small { display: block; color: var(--muted); font-size: 10px; line-height: 1.4; }.cart-clear { width: 100%; border: 1px solid var(--line); background: white; border-radius: 9px; padding: 9px; color: var(--muted); font-size: 11px; margin-top: 13px; }

@media (max-width: 1150px) { .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 850px) {
    .hero-inner { grid-template-columns: 1fr; gap: 22px; width: min(100% - 30px, 720px); min-height: 0; padding: 22px 0 32px; }
    .brand { align-self: auto; }.top-nav { top: 29px; }.hero-copy { padding: 0; }.hero h1 { font-size: 42px; }.search-box { grid-column: 1; }
    .catalog-layout { grid-template-columns: 1fr; width: min(100% - 30px, 720px); padding-top: 18px; }
    .filters { position: static; }.product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .update-page { grid-template-columns: 1fr; }
    .details-page { grid-template-columns: 1fr; }.details-product .product-card { max-width: none; }
    .friendly-summary { grid-template-columns: repeat(2, 1fr); }.friendly-summary > div:nth-child(2) { border-right: 0; }.friendly-product-grid { grid-template-columns: repeat(2, 1fr); }.bonus-product-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .hero h1 { font-size: 34px; }.hero-copy > p:last-child { font-size: 14px; }.search-box { height: 54px; }
    .product-grid { grid-template-columns: 1fr; }.product-photo-wrap { aspect-ratio: 4/2.5; }.catalog-layout { gap: 18px; }
    .product-body h2 { min-height: 0; }.page-status { display: none !important; }
    .top-nav { position: static; grid-row: 2; justify-content: flex-start; }.top-nav a { display: inline-block; }.hero-copy { grid-row: 3; }.search-box { grid-row: 4; }
    .simple-header { align-items: flex-start; }.back-link { margin-top: 10px; }.database-stats { grid-template-columns: 1fr; }.update-page { width: min(100% - 24px, 520px); margin-top: 20px; }
    .friendly-page { width: min(100% - 24px, 520px); margin-top: 16px; }.friendly-summary { grid-template-columns: 1fr; }.friendly-summary > div { border-right: 0; border-bottom: 1px solid #34353a; }.friendly-toolbar, .compact-heading { display: block; }.friendly-toolbar h1 { font-size: 29px; }.friendly-toolbar a { display: inline-block; margin-top: 12px; }.compact-heading > p { text-align: left; margin-top: 7px; }.friendly-product-grid { grid-template-columns: 1fr; }.bonus-product-card { grid-template-columns: 66px 1fr auto; }.bonus-product-card img { width: 66px; height: 58px; }.friendly-gift { grid-template-columns: 88px 1fr; }.friendly-gift img { width: 88px; height: 76px; }.friendly-gift > strong { grid-column: 1/3; text-align: center; }.cart-fab { right: 12px; bottom: 12px; min-width: 160px; }.drawer-body { padding: 18px; }
}

/* Mobile usability */
img { max-width: 100%; }
a, button, input, select, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(237,28,36,.35); outline-offset: 2px; }

@media (hover: none) {
    .product-card:hover { transform: none; box-shadow: 0 4px 18px rgba(25,25,25,.045); }
    .product-card:hover .product-photo { transform: none; }
}

@media (max-width: 760px) {
    body { overflow-x: hidden; padding-bottom: env(safe-area-inset-bottom); }
    .hero::after { display: none; }
    .hero-inner, .catalog-layout, .friendly-page, .details-page { width: calc(100% - 24px); }
    .hero-inner { padding-top: max(18px, env(safe-area-inset-top)); }
    .brand-mark { width: 46px; height: 46px; border-radius: 13px; }
    .brand strong { font-size: 1rem; }.brand small { font-size: .75rem; }
    .top-nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; scrollbar-width: none; }
    .top-nav::-webkit-scrollbar { display: none; }
    .top-nav a { min-height: 44px; display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0 14px; font-size: .82rem; }
    .hero h1 { font-size: clamp(2rem, 10vw, 2.75rem); line-height: 1.04; }
    .hero-copy > p:last-child { font-size: 1rem; line-height: 1.5; }
    .eyebrow { font-size: .75rem; }
    .search-box { width: 100%; height: 54px; padding: 0 13px; border-radius: 13px; }
    .search-box input { font-size: 1rem; }.search-box button { min-width: 36px; min-height: 36px; }

    .catalog-layout { padding: 14px 0 88px; }
    .filters { padding: 16px; border-radius: 15px; box-shadow: none; }
    .filters-title strong, .results-head strong { font-size: 1.1rem; }
    .filters-title button { min-height: 40px; padding: 0 6px; font-size: .85rem; }
    .filter-group { margin-top: 17px; }
    .filter-group > label:first-child, .filter-label, .filter-group legend { font-size: .92rem; }
    .filter-group select { height: 48px; font-size: 1rem; }
    .segment-control { gap: 5px; }.segment-control button { min-height: 42px; font-size: .82rem; }
    .check-row { min-height: 40px; font-size: .92rem !important; margin-bottom: 5px !important; }
    .check-row input { width: 24px; height: 24px; }
    .price-values { font-size: .9rem; }.price-filter label { grid-template-columns: 30px 1fr; min-height: 40px; font-size: .82rem; }
    .price-filter input { min-height: 32px; }
    .ingredient-group summary { min-height: 46px; align-items: center; padding: 11px 13px; font-size: .9rem; }
    .ingredient-group > div { max-height: 260px; padding: 5px 13px 8px; }
    .ingredient-group .check-row { font-size: .88rem !important; }
    .rating-note strong { font-size: .88rem; }.rating-note p { font-size: .8rem; }

    .results-head { margin: 5px 0 12px; }.page-status { display: none !important; }
    .product-grid { grid-template-columns: 1fr; gap: 13px; }
    .product-card { border-radius: 15px; }
    .product-photo-wrap { aspect-ratio: 16/10; }
    .category-chip { max-width: calc(100% - 92px); padding: 7px 10px; font-size: .72rem; }
    .fitness-badge { min-width: 62px; height: 46px; }.fitness-badge span { font-size: .64rem; }.fitness-badge strong { font-size: .9rem; }
    .product-body { padding: 15px; }.product-body h2 { font-size: 1.15rem; min-height: 0; margin-bottom: 9px; }
    .price-row strong { font-size: 1.15rem; }.price-row del { font-size: .82rem; }
    .add-cart-button, .friendly-add { min-height: 48px; font-size: .92rem; }
    .meta-row { font-size: .82rem; line-height: 1.4; }.tag { padding: 5px 8px; font-size: .68rem; }
    .topping-box p, .details-body p, .set-links li { font-size: .82rem; }.topping-box { min-height: 0; }
    details summary { min-height: 40px; align-items: center; font-size: .86rem; }
    .details-body h3 { font-size: .75rem; }
    .pagination { gap: 6px; margin-top: 20px; }.pagination button { min-width: 44px; height: 44px; font-size: .85rem; }

    .simple-header { min-height: 78px; padding: max(14px, env(safe-area-inset-top)) 14px 14px; flex-wrap: wrap; }
    .back-link { min-height: 42px; display: inline-flex; align-items: center; font-size: .84rem; }
    .details-page { margin: 18px auto 90px; gap: 14px; }
    .relations-card { padding: 18px; border-radius: 15px; }.relations-card h1 { font-size: 1.35rem; }
    .relations-card h2 { font-size: .78rem; }.relations-card li { min-height: 46px; align-items: center; font-size: .9rem; }.relations-card small, .relations-card p { font-size: .75rem; }
    .detail-drawer, .mini-cart { width: 100%; max-width: none; padding-bottom: env(safe-area-inset-bottom); }
    .drawer-head, .cart-head { padding-top: max(15px, env(safe-area-inset-top)); }
    .drawer-head a, .cart-head button { width: 44px; height: 44px; display: grid; place-items: center; }
    .detail-drawer > img { aspect-ratio: 16/10; }.drawer-body h2 { font-size: 1.55rem; }.drawer-body p { font-size: .95rem; }

    .friendly-summary { border-radius: 15px; }.friendly-summary > div { padding: 17px; }.friendly-summary strong { font-size: 1.3rem; }.friendly-summary p { font-size: .9rem; }
    .friendly-toolbar { margin: 24px 0 18px; }.friendly-toolbar h1 { font-size: 1.8rem; }.friendly-toolbar p, .compact-heading p { font-size: .9rem; }
    .friendly-toolbar a { min-height: 44px; display: inline-flex; align-items: center; }
    .compact-heading h2 { font-size: 1.5rem; }.friendly-product-card h3 { font-size: 1.05rem; }
    .friendly-price-row { align-items: flex-start; }.friendly-price-row strong { font-size: 1.15rem; }.friendly-price-row > span { font-size: .75rem; }
    .promo-meta span { font-size: .75rem; }.friendly-composition li, .box-note { font-size: .8rem; }
    .bonus-product-card { min-width: 0; }.bonus-product-card h3 { font-size: .88rem; overflow-wrap: anywhere; }.bonus-product-card p { font-size: .78rem; }.bonus-product-card button { min-width: 64px; min-height: 44px; }
    .friendly-gift h2 { font-size: 1.1rem; }.friendly-gift p, .friendly-rules li { font-size: .85rem; }

    .cart-fab { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); min-width: 170px; min-height: 56px; }
    .cart-toast { right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); width: calc(100% - 24px); font-size: .85rem; }
    .cart-line { grid-template-columns: 68px 1fr; }.cart-line-main > strong { font-size: .9rem; }.cart-promo { font-size: .75rem; }
    .quantity-control button { width: 36px; height: 36px; font-size: 1rem; }.quantity-control span, .cart-line-bottom > strong { font-size: .9rem; }
    .cart-benefits > strong { font-size: .9rem; }.cart-benefits p { font-size: .8rem; }.cart-suggestions button { min-height: 42px; font-size: .8rem; }
    .cart-total p { font-size: .9rem; }.cart-total > small { font-size: .75rem; }.cart-clear { min-height: 44px; font-size: .85rem; }

    .update-page { width: calc(100% - 24px); margin: 16px auto 80px; }.update-card, .update-info { border-radius: 15px; }.update-card { padding: 20px 16px; }.update-card h1 { font-size: 1.9rem; }.update-card .lead { font-size: .95rem; }.database-stats strong { font-size: 1.35rem; }.database-stats span { font-size: .72rem; }.update-button { min-height: 50px; font-size: .9rem; }
    footer { padding: 20px 14px 90px; font-size: .78rem; line-height: 1.5; }
}

@media (max-width: 380px) {
    .hero-inner, .catalog-layout, .friendly-page, .details-page, .update-page { width: calc(100% - 16px); }
    .hero h1 { font-size: 1.9rem; }
    .top-nav a { padding: 0 11px; font-size: .76rem; }
    .filters, .product-body, .relations-card, .friendly-product-body { padding-left: 13px; padding-right: 13px; }
    .bonus-product-card { grid-template-columns: 58px 1fr; }.bonus-product-card img { width: 58px; height: 54px; }.bonus-product-card button { grid-column: 1/3; width: 100%; }
    .cart-fab { left: 8px; right: 8px; width: calc(100% - 16px); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}