

:root { --ink:#302a25; --paper:#f6f1e7; --rust:#b25335; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
::selection { background:#d1a27d; color:#261d1a; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.055em; }
h1 em,h2 em { font-weight:400; color:var(--rust); }
.section-shell { width:min(100% - 7.2vw,1480px); margin-inline:auto; }
.section-kicker,.eyebrow { font-size:11px; font-weight:800; letter-spacing:.18em; line-height:1.5; text-transform:uppercase; }
.section-kicker { color:var(--rust); }
.site-header { height:82px; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:0 3.6vw; border-bottom:1px solid #302a2522; position:relative; z-index:10; }
.wordmark { font-family:Arial,Helvetica,sans-serif; font-weight:900; font-size:clamp(22px,2vw,31px); letter-spacing:-.095em; white-space:nowrap; }
.wordmark span,.catalog-heading h2 span { color:var(--rust); }
.site-header nav { display:flex; gap:clamp(20px,2.7vw,48px); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.site-header nav a,.site-footer a,.text-link { transition:color .2s ease; }
.site-header nav a:hover,.site-footer a:hover,.text-link:hover { color:var(--rust); }
.header-shop { border:1px solid var(--ink); border-radius:40px; padding:13px 18px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; transition:background .2s ease,color .2s ease; }
.header-shop:hover { background:var(--ink); color:var(--paper); }
.header-shop span { margin-left:17px; font-size:16px; }

.hero { min-height:min(780px,83vw); display:grid; grid-template-columns:52% 48%; }
.hero-copy { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:80px 5vw 80px 7.2vw; }
.eyebrow { display:flex; align-items:center; gap:14px; margin-bottom:36px; }
.eyebrow span { width:29px; height:1px; background:var(--rust); }
.hero h1 { font-size:clamp(64px,7.4vw,132px); line-height:.92; margin-bottom:33px; }
.hero-lede { font-size:clamp(16px,1.2vw,19px); line-height:1.65; max-width:555px; color:#5b534a; margin-bottom:34px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:27px; }
.button { min-height:55px; display:inline-flex; align-items:center; justify-content:center; gap:25px; padding:17px 24px; border-radius:2px; font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; transition:transform .2s ease,background .2s ease; }
.button:hover { transform:translateY(-3px); }
.button span { font-size:20px; font-weight:400; line-height:.5; }
.button-dark { background:var(--ink); color:#fff9ef; }
.button-dark:hover { background:var(--rust); }
.text-link { padding:7px 0; border-bottom:1px solid currentColor; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.text-link span { margin-left:8px; }
.hero-side-note { position:absolute; left:7.2vw; bottom:24px; margin:0; font-size:10px; font-weight:800; letter-spacing:.2em; color:#8b8176; text-transform:uppercase; }
.hero-visual { position:relative; min-height:620px; overflow:hidden; background:#b96d49; }
.hero-photo-wrap { position:absolute; inset:5.5% 6.5% 8.5% 0; overflow:hidden; }
.hero-photo { width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.hero-visual:hover .hero-photo { transform:scale(1.035); }
.hero-stamp { position:absolute; top:6%; right:1.8%; width:148px; height:148px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1px solid #6e6b4c; border-radius:50%; background:#e8dcaa; box-shadow:0 0 0 6px #e8dcaa; transform:rotate(10deg); text-align:center; font-size:10px; font-weight:900; letter-spacing:.14em; }
.hero-stamp strong { font-size:35px; line-height:.8; color:var(--rust); }
.hero-caption { position:absolute; bottom:3%; right:6.5%; color:#fff7ee; font-size:10px; font-weight:800; letter-spacing:.19em; text-transform:uppercase; }
.ingredient-strip { min-height:72px; display:flex; align-items:center; justify-content:space-around; gap:15px; padding:20px 3vw; background:var(--ink); color:#f6f1e7; font-size:11px; font-weight:800; letter-spacing:.2em; }
.ingredient-strip b { color:#b7bf8e; font-size:24px; font-weight:400; }

.intro { display:grid; grid-template-columns:18% 82%; padding-top:130px; padding-bottom:150px; }
.intro .section-kicker { padding-top:15px; }
.intro-main { display:grid; grid-template-columns:1.2fr .7fr; gap:clamp(50px,7vw,150px); }
.intro h2 { font-size:clamp(54px,5.9vw,102px); line-height:1.03; margin:0; }
.intro-text { align-self:end; }
.intro-text p { font-size:16px; line-height:1.72; color:#5b534a; margin-bottom:18px; }
.intro-text p:last-child { margin:0; }
.catalog { padding-bottom:135px; }
.catalog-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:43px; }
.catalog-heading .section-kicker { margin-bottom:18px; }
.catalog-heading h2 { font-size:clamp(58px,6vw,105px); line-height:1; margin:0; }
.catalog-heading p { max-width:340px; margin:0 0 6px; font-size:15px; line-height:1.65; color:#60584e; }
.cheese-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.product-card { min-width:0; }
.product-image { position:relative; display:block; aspect-ratio:4/4.6; overflow:hidden; background:#ded5c5; }
.product-image img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease,filter .4s ease; }
.product-image:hover img { transform:scale(1.06); filter:saturate(1.08); }
.product-number { position:absolute; top:16px; left:17px; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#f7f1e6e0; font-size:11px; font-weight:800; }
.product-image-arrow { position:absolute; bottom:16px; right:16px; display:grid; place-items:center; width:37px; height:37px; border-radius:50%; background:var(--paper); font-size:19px; transition:background .2s ease,color .2s ease; }
.product-image:hover .product-image-arrow { background:var(--ink); color:#fff; }
.product-info { display:flex; justify-content:space-between; align-items:start; gap:15px; padding:19px 0 22px; border-bottom:1px solid #392d2440; }
.product-info h3 { font-size:clamp(24px,2.1vw,35px); line-height:1.1; margin-bottom:7px; }
.product-info p { font-size:12px; color:#766c60; margin:0; }
.product-price { display:block; margin-top:12px; color:var(--rust); font-size:14px; font-weight:800; }
.product-info > a { font-size:24px; line-height:1; transition:transform .2s ease; }
.product-info > a:hover { transform:translate(3px,-3px); }
.other-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:17px; margin-top:65px; }
.product-other .product-image { aspect-ratio:1.55; }
.product-other .product-info h3 { font-size:clamp(30px,2.9vw,48px); }
.catalog-note { text-align:right; margin:24px 0 0; font-size:12px; color:#6b6054; }
.catalog-note a { color:var(--rust); text-decoration:underline; text-underline-offset:3px; }

.story { background:#dcdfca; }
.story-inner { display:grid; grid-template-columns:.92fr 1fr; gap:12vw; padding-top:140px; padding-bottom:145px; }
.story .section-kicker { color:#58674b; margin-bottom:25px; }
.story h2 { font-size:clamp(62px,6vw,105px); line-height:.99; margin-bottom:29px; }
.story h2 em { color:#667754; }
.story-heading > p { font-size:16px; line-height:1.6; max-width:365px; color:#596353; }
.story-steps { border-top:1px solid #56614764; }
.story-step { display:grid; grid-template-columns:52px 1fr; gap:20px; padding:30px 0 32px; border-bottom:1px solid #56614764; }
.story-step > span { color:#637553; font-size:13px; font-weight:900; }
.story-step h3 { font-size:clamp(27px,2.4vw,39px); line-height:1.1; margin-bottom:12px; }
.story-step p { color:#4f5847; font-size:14px; line-height:1.7; max-width:570px; margin:0; }
.process { padding-top:135px; padding-bottom:135px; }
.process .section-kicker { margin-bottom:27px; }
.process-grid { display:grid; grid-template-columns:1fr .8fr; gap:10vw; align-items:center; }
.process h2 { font-size:clamp(58px,5.4vw,92px); line-height:1.02; margin-bottom:35px; }
.process-lede { font-size:19px; line-height:1.6; max-width:650px; color:#4d493f; }
.process-history { font-size:14px; line-height:1.7; max-width:620px; color:#746b60; margin:28px 0 0; padding-top:23px; border-top:1px solid #b8aa96; }
.process-art { aspect-ratio:1; border-radius:50%; background:#d9b693; position:relative; overflow:hidden; display:grid; place-items:center; }
.orbit { position:absolute; border:1px solid #7b553f99; border-radius:50%; }
.orbit-one { width:77%; height:77%; } .orbit-two { width:54%; height:54%; } .orbit-three { width:30%; height:30%; }
.microbe { position:absolute; font-family:Georgia,serif; line-height:1; color:#624a36; }
.microbe-one { font-size:clamp(140px,19vw,340px); top:11%; left:28%; color:#79563d; }
.microbe-two { font-size:clamp(80px,8vw,180px); bottom:6%; right:-2%; color:#ab6945; }
.microbe-three { font-size:clamp(55px,6vw,120px); top:0; left:6%; color:#bb754e; }
.process-art-label { position:absolute; bottom:12%; font-family:Georgia,serif; font-size:clamp(22px,2.2vw,42px); font-style:italic; color:#fff5df; transform:rotate(-13deg); }
.closing { background:var(--rust); color:#fff6ea; text-align:center; }
.closing-inner { padding-top:122px; padding-bottom:132px; }
.closing .section-kicker { color:#f8dcc9; margin-bottom:27px; }
.closing h2 { font-size:clamp(62px,8vw,130px); line-height:.98; margin-bottom:36px; }
.closing h2 em { color:#e6c898; }
.button-light { background:#fbf0e4; color:var(--ink); }
.button-light:hover { background:#e8d0b1; }
.site-footer { min-height:150px; display:flex; align-items:center; justify-content:space-between; gap:22px; }
.site-footer p { font-size:12px; color:#766e64; margin:0; }
.site-footer > a:not(.wordmark),.site-footer > span { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }

.detail-page { background:var(--paper); }
.detail-breadcrumb { display:flex; align-items:center; gap:13px; padding-top:28px; padding-bottom:27px; color:#8b7e70; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.detail-breadcrumb a { color:var(--ink); transition:color .2s ease; }
.detail-breadcrumb a:hover { color:var(--rust); }
.detail-main { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.82fr); gap:clamp(45px,6vw,115px); align-items:start; padding-bottom:110px; }
.detail-visual { position:relative; background:#e1d8c8; }
.detail-image { width:100%; aspect-ratio:1/1.07; object-fit:cover; }
.detail-copy { padding-top:clamp(13px,2.3vw,39px); }
.detail-copy .section-kicker { margin-bottom:22px; }
.detail-copy h1 { font-size:clamp(70px,7vw,128px); line-height:.95; margin:0 0 30px; overflow-wrap:anywhere; }
.detail-copy h1 span,.detail-related-heading h2 span { color:var(--rust); }
.detail-lead { max-width:620px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(25px,2.5vw,38px); line-height:1.2; letter-spacing:-.03em; margin-bottom:34px; }
.detail-meta { display:grid; grid-template-columns:1fr 1fr; gap:15px; border-top:1px solid #302a2544; border-bottom:1px solid #302a2544; padding:17px 0; }
.detail-meta > div { display:flex; flex-direction:column; gap:6px; }
.detail-meta span { color:#74685e; font-size:11px; text-transform:uppercase; font-weight:800; letter-spacing:.12em; }
.detail-meta strong { font-size:17px; }
.detail-story { color:#5b534a; font-size:16px; line-height:1.7; margin:31px 0; }
.detail-order { margin-top:7px; }
.detail-availability { margin:14px 0 0; color:#82776b; font-size:12px; line-height:1.5; }
.detail-information { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:clamp(50px,8vw,150px); border-top:1px solid #302a2544; padding-top:85px; padding-bottom:125px; }
.detail-information-heading .section-kicker { margin-bottom:23px; }
.detail-information-heading h2 { font-size:clamp(52px,5.3vw,88px); line-height:1.02; overflow-wrap:anywhere; margin-bottom:26px; }
.detail-information-heading p { max-width:400px; color:#796d60; font-size:13px; line-height:1.65; }
.detail-information-body { border-top:1px solid #302a2538; }
.detail-info-section { padding:28px 0 32px; border-bottom:1px solid #302a2538; }
.detail-info-section h3 { font-size:clamp(27px,2.8vw,42px); margin-bottom:14px; }
.detail-info-section h3 small { font-family:Arial,Helvetica,sans-serif; font-size:11px; font-weight:800; letter-spacing:.08em; color:#8d7967; }
.detail-info-section > p,.detail-info-section dd,.detail-notes { color:#564e45; font-size:15px; line-height:1.72; }
.detail-info-section > p { margin:0; }
.detail-nutrition,.detail-guidance { margin:0; }
.detail-nutrition > div { display:flex; justify-content:space-between; gap:20px; border-bottom:1px solid #302a2520; padding:10px 0; }
.detail-nutrition > div:last-child { border-bottom:0; }
.detail-nutrition dt { color:#756a5e; font-size:13px; }
.detail-nutrition dd { margin:0; font-weight:800; color:var(--ink); line-height:1.35; }
.detail-info-section .detail-info-note { margin-top:13px; font-size:12px; color:#85786b; }
.detail-guidance > div { display:grid; grid-template-columns:155px 1fr; gap:22px; padding:13px 0; border-bottom:1px solid #302a2520; }
.detail-guidance > div:last-child { border-bottom:0; }
.detail-guidance dt { color:var(--rust); font-size:12px; font-weight:800; line-height:1.5; }
.detail-guidance dd { margin:0; }
.detail-notes { margin:0; padding-left:20px; }
.detail-notes li + li { margin-top:9px; }
.detail-related { border-top:1px solid #302a2538; padding-top:67px; padding-bottom:110px; }
.detail-related-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:30px; }
.detail-related-heading .section-kicker { margin-bottom:14px; }
.detail-related-heading h2 { margin:0; font-size:clamp(45px,4.7vw,76px); }
.detail-related-heading > a { border-bottom:1px solid currentColor; padding-bottom:4px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.detail-related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.detail-related-card { min-width:0; }
.detail-related-card img { width:100%; aspect-ratio:1.25; object-fit:cover; background:#ddd4c5; transition:transform .3s ease; }
.detail-related-card:hover img { transform:scale(1.015); }
.detail-related-card span { display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid #302a2540; padding:14px 0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(21px,2.1vw,32px); letter-spacing:-.04em; }
.detail-related-card b { font-family:Arial,Helvetica,sans-serif; font-size:20px; font-weight:400; }

@media (max-width:1100px) {
  .site-header { padding-inline:4vw; }
  .site-header nav { gap:16px; }
  .hero { grid-template-columns:54% 46%; }
  .hero-copy { padding-left:5vw; padding-right:3vw; }
  .hero h1 { font-size:clamp(62px,7vw,90px); }
  .hero-side-note { left:5vw; }
  .intro { grid-template-columns:1fr; gap:34px; }
  .intro-main { grid-template-columns:1fr .65fr; }
  .story-inner { gap:7vw; }
  .detail-main { gap:4vw; }
  .detail-copy h1 { font-size:clamp(57px,7vw,95px); }
}
@media (max-width:760px) {
  .section-shell { width:min(100% - 36px,600px); }
  .site-header { height:66px; padding:0 18px; gap:12px; }
  .site-header nav { display:none; }
  .wordmark { font-size:23px; }
  .header-shop { padding:10px 12px; font-size:10px; }
  .header-shop span { margin-left:4px; }
  .hero { display:flex; flex-direction:column; }
  .hero-copy { min-height:625px; padding:75px 23px 90px; }
  .hero h1 { font-size:clamp(59px,12vw,90px); }
  .hero-lede { font-size:16px; }
  .hero-actions { gap:16px; }
  .button { font-size:11px; gap:13px; padding-inline:15px; }
  .text-link { font-size:11px; }
  .hero-side-note { left:23px; bottom:27px; }
  .hero-visual { min-height:430px; }
  .hero-photo-wrap { inset:20px 20px 32px 0; }
  .hero-stamp { width:105px; height:105px; font-size:8px; right:3%; top:4%; box-shadow:0 0 0 4px #e8dcaa; }
  .hero-stamp strong { font-size:24px; }
  .ingredient-strip { flex-wrap:wrap; justify-content:center; min-height:80px; font-size:9px; gap:11px; }
  .ingredient-strip b { font-size:15px; }
  .intro { padding-top:90px; padding-bottom:95px; }
  .intro-main { grid-template-columns:1fr; gap:23px; }
  .intro h2,.catalog-heading h2,.story h2,.process h2 { font-size:clamp(52px,10vw,76px); }
  .intro-text p { font-size:15px; }
  .catalog { padding-bottom:90px; }
  .catalog-heading { display:block; margin-bottom:28px; }
  .catalog-heading h2 { margin-bottom:22px; }
  .catalog-heading p { font-size:14px; }
  .cheese-grid { grid-template-columns:repeat(2,1fr); gap:22px 12px; }
  .product-image { aspect-ratio:4/4.7; }
  .product-info h3 { font-size:clamp(23px,5.5vw,31px); }
  .product-info p { font-size:11px; line-height:1.35; }
  .product-info > a { font-size:20px; }
  .other-grid { grid-template-columns:1fr; gap:25px; margin-top:48px; }
  .product-other .product-image { aspect-ratio:1.55; }
  .product-other .product-info h3 { font-size:34px; }
  .catalog-note { text-align:left; line-height:1.5; }
  .story-inner { display:block; padding-top:90px; padding-bottom:90px; }
  .story-heading { margin-bottom:48px; }
  .story-heading > p { font-size:15px; }
  .story-step { grid-template-columns:36px 1fr; gap:14px; padding:24px 0; }
  .story-step h3 { font-size:30px; }
  .story-step p { font-size:13px; }
  .process { padding-top:90px; padding-bottom:90px; }
  .process-grid { grid-template-columns:1fr; gap:45px; }
  .process-lede { font-size:16px; }
  .process-art { max-width:540px; width:100%; margin-inline:auto; }
  .microbe-one { font-size:50vw; } .microbe-two { font-size:25vw; } .microbe-three { font-size:17vw; }
  .closing-inner { padding-top:90px; padding-bottom:95px; }
  .closing h2 { font-size:clamp(51px,10.2vw,80px); }
  .site-footer { display:grid; grid-template-columns:1fr 1fr; padding-top:32px; padding-bottom:35px; gap:20px 10px; }
  .site-footer .wordmark,.site-footer p { grid-column:1/-1; }
  .detail-breadcrumb { padding-top:19px; padding-bottom:20px; }
  .detail-main { grid-template-columns:1fr; gap:30px; padding-bottom:82px; }
  .detail-image { aspect-ratio:1; }
  .detail-copy { padding-top:4px; }
  .detail-copy h1 { font-size:clamp(64px,13vw,92px); margin-bottom:22px; }
  .detail-lead { font-size:clamp(27px,6vw,38px); margin-bottom:27px; }
  .detail-story { font-size:15px; }
  .detail-information { grid-template-columns:1fr; gap:35px; padding-top:60px; padding-bottom:85px; }
  .detail-information-heading h2 { font-size:clamp(50px,10vw,75px); margin-bottom:20px; }
  .detail-info-section { padding:23px 0 26px; }
  .detail-guidance > div { grid-template-columns:1fr; gap:5px; }
  .detail-related { padding-top:55px; padding-bottom:75px; }
  .detail-related-heading { display:block; }
  .detail-related-heading h2 { font-size:clamp(45px,10vw,70px); margin-bottom:22px; }
  .detail-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
  .detail-related-card:last-child { display:none; }
  .detail-related-card span { font-size:24px; }
}
@media (max-width:380px) {
  .hero-copy { min-height:660px; }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .product-info { gap:4px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}
button { font:inherit; cursor:pointer; border:0; }
button:disabled { background:#aaa; color:#fff; cursor:not-allowed; }
.cart { padding-block:40px; min-height:65vh; }
.cart h1 { font-size:48px; }
.cart-row { display:flex; gap:18px; align-items:center; justify-content:space-between; padding:20px 0; border-bottom:1px solid #302a2522; }
.cart-row[hidden] { display:none; }
.cart-row input { width:70px; padding:8px; }
#shop-message:not(:empty) { position:sticky; bottom:0; padding:16px; background:var(--paper); border-top:1px solid; z-index:20; }
@media(max-width:600px) { .cart-row { flex-wrap:wrap; } .cart-row a { width:100%; } }

/* Енді 07.11: дрібний текст описів читається важко - на крок більше */
.product-info p,.catalog-note,.site-footer p,.detail-availability,.detail-info-section .detail-info-note { font-size:14px; }
.intro-text p,.detail-story { font-size:17px; }
.catalog-heading p,.story-heading > p { font-size:17px; }
.story-step p,.process-history,.detail-information-heading p { font-size:16px; }
.detail-info-section > p,.detail-info-section dd,.detail-notes { font-size:16px; }
.detail-nutrition dt,.detail-guidance dt { font-size:14px; }
.hero-lede { font-size:clamp(17px,1.3vw,20px); }
@media (max-width:760px) { .hero-lede { font-size:17px; } }
