:root{--paper:#f7f5ee;--ink:#30362a;--olive:#373f30;--line:#d8dace;--muted:#6e7468;--serif:Georgia,'Times New Roman',serif;--sans:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.6 var(--sans)}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select,summary,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;border:0;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #878f54;outline-offset:5px}img{display:block;width:100%;object-fit:cover}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.07}h1{font-size:clamp(48px,6.8vw,102px);letter-spacing:-3px}h2{font-size:clamp(36px,4vw,58px);letter-spacing:-1.5px}h3{font-size:25px}em{font-weight:400}.eyebrow{font:10px/1.5 var(--sans);letter-spacing:2px;text-transform:uppercase}.muted{color:var(--muted)}.skip{position:absolute;top:-60px;z-index:99;padding:12px;background:white}.skip:focus{top:0}.announcement{background:var(--olive);color:#eceee4;text-align:center;padding:8px 4%;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.7px}.header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px 4.5%;min-height:105px;border-bottom:1px solid var(--line)}.header nav,.header-actions{display:flex;gap:29px;align-items:center}.header nav{font-size:12px}.header-actions{justify-content:flex-end;gap:25px}.header-actions button{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:11px}.header svg{width:19px;height:21px;stroke:currentColor;stroke-width:1.2;fill:none}.logo{text-align:center;font:35px/1 var(--serif);letter-spacing:6px;padding-left:6px}.logo small{display:block;font:7px/1 var(--sans);letter-spacing:2.5px;margin-top:10px}.hero{position:relative;background:#252d21;isolation:isolate;overflow:hidden;color:#fffdf3;min-height:650px;display:flex;align-items:center;justify-content:center;text-align:center}.hero-photo{position:absolute;z-index:-2;inset:0;height:100%;object-position:center 44%;opacity:.45;filter:brightness(.6) saturate(.65)}.hero::after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(26,36,22,.48),transparent 70%)}.hero-content{padding:80px 20px 100px;max-width:840px}.hero-content .eyebrow{margin-bottom:32px}.hero h1{line-height:1.02;font-size:clamp(54px,7.3vw,110px);font-weight:normal}.hero h1 em{display:block;color:#e5e9cd}.hero .btn{margin-top:37px}.hero-caption{position:absolute;left:4.5%;bottom:31px;font-size:9px;letter-spacing:1.4px}.hero-inset{position:absolute;left:5%;top:29%;width:14%;max-width:180px;transform:rotate(-6deg);background:var(--paper);padding:9px 9px 24px;box-shadow:0 12px 40px #0002}.hero-inset img{aspect-ratio:4/5}.hero-inset span{display:block;color:var(--ink);font:italic 13px var(--serif);margin-top:12px}.btn{display:inline-flex;gap:35px;align-items:center;justify-content:center;border:1px solid var(--ink);border-radius:50px;min-height:48px;padding:13px 25px;font-size:11px;letter-spacing:.6px;background:transparent;transition:background .2s,color .2s}.btn:hover{background:var(--ink);color:var(--paper)}.btn-light{border-color:#c9cbb7;color:#fff}.btn-light:hover{background:var(--paper);color:var(--ink)}.btn-solid{background:var(--ink);color:var(--paper)}.btn-solid:hover{background:#4b573b}.btn:disabled{cursor:default;opacity:.45}.text-link{border-bottom:1px solid var(--ink);font-size:11px;padding:8px 0;white-space:nowrap}.intro{text-align:center;padding:70px 20px 64px;max-width:740px;margin:auto}.intro .eyebrow{margin-bottom:20px}.intro h2{font-size:44px}.intro p:last-child{color:var(--muted);margin:22px auto 0;max-width:460px;font-size:12px}.section{padding:20px 4.5% 72px}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:32px}.section-head .eyebrow{margin-bottom:14px}.section-head h2{font-size:43px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 22px}.product-card{min-width:0;position:relative}.product-card .photo{position:relative;display:block;overflow:hidden;background:#e7e8e1}.product-card img{aspect-ratio:4/5;transition:transform .5s}.product-card:hover img{transform:scale(1.035)}.card-label{position:absolute;left:13px;top:13px;background:#f7f5eef2;padding:5px 10px;font-size:8px;letter-spacing:1.1px}.card-arrow{position:absolute;right:12px;bottom:12px;background:#f7f5ee;display:grid;place-items:center;border-radius:50%;width:34px;height:34px;font-size:20px}.card-info{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding-top:16px}.card-info h3{font-size:22px;line-height:1.3}.card-info p{font-size:9px;color:var(--muted);letter-spacing:1px;margin-top:5px}.card-price{white-space:nowrap;font-size:12px;padding-top:5px}.all-link{text-align:center;margin-top:38px}.story{display:grid;grid-template-columns:1fr 1fr;gap:8%;padding:65px 9%;background:#e9ebdf;align-items:center}.story img{height:455px;object-position:center}.story .eyebrow{margin-bottom:28px}.story h2{font-size:57px}.story p:not(.eyebrow){margin:24px 0 28px;max-width:400px;color:#626858;font-size:12px}.service{display:grid;grid-template-columns:repeat(3,1fr);padding:54px 4.5%;gap:40px;border-bottom:1px solid var(--line)}.service>div{border-right:1px solid var(--line);padding-right:30px}.service>div:last-child{border:0}.service .num{font:italic 26px var(--serif);color:#969d83}.service h3{font-size:26px;margin:10px 0}.service p{font-size:12px;color:var(--muted);max-width:300px}.catalog-heading{padding:64px 4.5% 30px}.catalog-heading h1{font-size:72px;margin:20px 0}.catalog-heading p{max-width:580px}.toolbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}.filters{display:flex;gap:8px;flex-wrap:wrap}.filter{border:1px solid var(--line);padding:8px 15px;border-radius:30px;font-size:11px}.filter.active{background:var(--ink);color:white;border-color:var(--ink)}.toolbar select{background:transparent;border:0;padding:8px;max-width:200px;font-size:12px}.crumbs{font-size:10px;color:var(--muted);display:flex;gap:12px;padding:28px 4.5%}.product-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;padding:0 7% 50px}.product-visual{position:relative}.main-product-image{height:570px;object-fit:cover;object-position:center;background:#e6e6df}.photo-note{font-size:9px;line-height:1.6;color:var(--muted);padding:12px 0;max-width:470px}.product-panel{padding-top:20px;max-width:475px}.product-panel h1{font-size:58px;letter-spacing:-1.8px;margin:19px 0}.product-panel .description{font-size:12px;color:var(--muted);max-width:440px;line-height:1.9}.price-line{display:flex;align-items:center;justify-content:space-between;padding:22px 0 20px;margin-bottom:20px;border-bottom:1px solid var(--line)}.price-line strong{font:30px var(--serif)}.price-line span{font-size:9px;color:var(--muted)}fieldset{padding:0;margin:0 0 20px;border:0}legend{font-size:11px;margin-bottom:10px}.option-row{display:flex;gap:10px}.option{display:inline-flex;position:relative}.option input{position:absolute;opacity:0;width:1px;height:1px}.option span{display:inline-block;min-width:70px;text-align:center;border:1px solid var(--line);padding:11px 17px;font-size:11px;cursor:pointer;border-radius:3px}.option input:checked+span{background:var(--ink);color:white;border-color:var(--ink)}.option input:focus-visible+span{outline:2px solid #878f54;outline-offset:3px}.wrap-choice .option span{font-size:10px;padding:10px}.add-cart{width:100%;justify-content:space-between;margin:4px 0 13px}.tiny-note{font-size:9px;color:var(--muted)}.product-details{margin-top:20px}.product-details details{border-top:1px solid var(--line);padding:12px 0;font-size:11px}.product-details summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between}.product-details summary::after{content:'+'}.product-details details[open] summary::after{content:'−'}.product-details details p{padding:10px 0;color:var(--muted)}.recommendations{border-top:1px solid var(--line);padding-top:48px}.recommendations .grid{gap:26px}.recommendations img{aspect-ratio:1/1}.recommendations h2{font-size:36px}footer{padding:42px 4.5% 20px;background:var(--ink);color:#eef0e3}.footer-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #626955;padding-bottom:23px}.round-link{width:48px;height:48px;border:1px solid #858c72;border-radius:50%;display:grid;place-items:center;font-size:28px}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:35px;padding:38px 0 40px;align-items:center}.footer-logo{font:100px/1 var(--serif);letter-spacing:-6px}.footer-grid .eyebrow{font-size:8px;margin-bottom:15px;color:#b9c0a7}.footer-grid a:not(.footer-logo),.footer-grid button,.footer-grid p:not(.eyebrow){display:block;font-size:11px;padding:0;margin:6px 0;color:#e1e5d6}.footer-bottom{display:flex;justify-content:space-between;gap:20px;font-size:8px;color:#bec6ad;border-top:1px solid #626955;padding-top:18px}.footer-bottom button{font-size:8px;color:inherit;padding:0}dialog{border:0;background:var(--paper);color:var(--ink);padding:25px 35px 35px;margin:auto 0 auto auto;height:100dvh;max-height:100dvh;width:500px;max-width:100%;overflow-y:auto;box-shadow:-20px 0 100px #0002}dialog::backdrop{background:#151c1466;backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.close{font-size:30px;font-weight:200;padding:0 8px}.dialog-head .eyebrow{font-size:8px}dialog h2{font-size:42px;margin-bottom:24px}.dialog-intro{font-size:12px;color:var(--muted);margin-bottom:22px}.cart-item{display:grid;grid-template-columns:75px 1fr;gap:20px;border-bottom:1px solid var(--line);padding:18px 0}.cart-item img{height:100px}.cart-item h3{font-size:21px;margin:3px 0 8px}.cart-item p{font-size:10px;color:var(--muted)}.cart-controls{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:10px}.stepper{display:flex;gap:12px;align-items:center;border:1px solid var(--line);padding:3px}.stepper button{padding:0 6px}.delete{font-size:10px;text-decoration:underline}.cart-total{display:flex;justify-content:space-between;margin:26px 0;font-size:18px}.full{width:100%}.form-label{display:block;font-size:11px;margin:16px 0}.form-label input,.form-label textarea,.form-label select{width:100%;display:block;margin-top:6px;background:transparent;border:1px solid var(--line);padding:12px;border-radius:0}.form-label textarea{min-height:70px;resize:vertical}.check-label{display:flex;align-items:flex-start;gap:8px;font-size:10px;margin:20px 0}.check-label input{accent-color:var(--ink);margin-top:2px}.notice{padding:15px;background:#e9ebdf;font-size:11px;margin-bottom:22px}.empty{padding:30px 0}.empty p{margin-bottom:25px}.toast-visible{transform:translate(-50%,0)!important;opacity:1!important}#toast{position:fixed;z-index:10;bottom:25px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:white;padding:12px 24px;border-radius:30px;font-size:12px;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 5px 20px #0002;max-width:90%;text-align:center}.article{max-width:850px;margin:auto;padding:70px 30px 90px}.article h1{font-size:60px;margin:18px 0 32px}.article h2{font-size:28px;margin:35px 0 14px}.article p{color:var(--muted);margin:14px 0}.single-card{max-width:450px;margin:65px auto 90px}.single-card .product-card img{aspect-ratio:4/5}.single-card>.eyebrow{margin-bottom:25px}.card-size-list{display:flex;gap:7px;margin-top:15px}.card-size-list span{font-size:10px;border:1px solid var(--line);border-radius:30px;padding:5px 12px} @media(min-width:1600px){.hero{min-height:760px}.section,.header,.crumbs{padding-left:max(4.5%,calc((100vw - 1450px)/2));padding-right:max(4.5%,calc((100vw - 1450px)/2))}} @media(max-width:1050px){.hero-inset{display:none}.header nav{gap:18px}.header-actions{gap:15px}.product-layout{gap:5%;padding-left:4.5%;padding-right:4.5%}.product-panel h1{font-size:46px}.main-product-image{height:540px}.card-info{display:block}.story h2{font-size:46px}.footer-grid{grid-template-columns:1fr 1fr}.grid{gap:24px 16px}} @media(max-width:700px){.announcement{font-size:7px;justify-content:center;padding:7px}.announcement span{display:none}.announcement{gap:28px}.header{padding:18px 5%;min-height:89px}.header .desktop{display:none}.logo{font-size:29px}.logo small{font-size:5px;letter-spacing:1.7px}.header nav{font-size:11px}.header-actions{gap:15px}.header-actions button{gap:5px}.hero{min-height:570px}.hero-content{padding:72px 20px 95px}.hero h1{font-size:61px;letter-spacing:-2px}.hero-content .eyebrow{font-size:8px;letter-spacing:1.5px;max-width:270px;margin:0 auto 32px}.hero-photo{object-position:60% center}.hero-caption{font-size:7px;left:6%;max-width:180px;text-align:left}.intro{padding:51px 25px}.intro h2{font-size:36px}.section{padding:10px 5% 45px}.section-head{align-items:center;gap:15px;margin-bottom:22px}.section-head h2{font-size:31px}.section-head .eyebrow{font-size:8px}.section-head>.text-link{font-size:9px;white-space:normal;min-width:65px;text-align:right}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 13px}.card-info{padding-top:11px}.card-info h3{font-size:20px}.card-info p{font-size:8px;letter-spacing:.5px}.card-price{font-size:11px}.card-label{font-size:7px;left:7px;top:7px;padding:4px 6px}.card-arrow{width:28px;height:28px;right:8px;bottom:8px}.story{grid-template-columns:1fr;padding:35px 6%;gap:35px}.story img{height:310px}.story h2{font-size:46px}.story .eyebrow{margin-bottom:18px}.story p:not(.eyebrow){max-width:none}.service{grid-template-columns:1fr;gap:26px;padding:35px 6%}.service>div{border-right:0;border-bottom:1px solid var(--line);padding-bottom:24px}.service>div:last-child{padding-bottom:0}.service p{max-width:none}.footer-grid{grid-template-columns:1fr 1fr;gap:28px 15px;padding:30px 0}.footer-logo{font-size:72px}.footer-grid .eyebrow{font-size:7px;letter-spacing:1px}.footer-grid p:not(.eyebrow){font-size:10px}.footer-bottom{flex-wrap:wrap;gap:12px;font-size:7px}.footer-bottom span:nth-child(2){order:3;width:100%}.footer-top .eyebrow{font-size:8px}.catalog-heading{padding:42px 5% 25px}.catalog-heading h1{font-size:53px;letter-spacing:-2px}.toolbar{align-items:flex-start;flex-direction:column;gap:12px}.toolbar select{padding-left:0}.filter{font-size:10px;padding:7px 12px}.product-layout{grid-template-columns:1fr;gap:18px;padding:0 5% 35px}.crumbs{padding:21px 5%;font-size:9px;gap:9px}.main-product-image{height:auto;aspect-ratio:1/1}.product-panel{padding-top:0;max-width:none}.product-panel h1{font-size:44px;margin:14px 0}.product-panel .description{max-width:none}.price-line{padding:16px 0;margin-bottom:18px}.photo-note{font-size:8px;padding:8px 0}.recommendations{padding-top:30px}.recommendations .grid{gap:22px 13px}.recommendations h2{font-size:29px}.single-card{margin:35px auto 50px;max-width:340px;padding:0 18px}.article{padding:45px 6% 60px}.article h1{font-size:45px}dialog{padding:20px 24px 30px}.dialog-head{margin-bottom:22px}dialog h2{font-size:36px}.option-row{flex-wrap:wrap}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}} /* Readability and expanded shop flow */ body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.65}.eyebrow{font-size:12px;line-height:1.5;letter-spacing:1.7px}.announcement{font-size:10px}.header nav{font-size:14px}.header-actions button{font-size:13px}.logo small{font-size:9px}.btn{min-height:52px;padding:14px 27px;font-size:14px}.text-link{font-size:13px}.intro p:last-child,.story p:not(.eyebrow),.service p{font-size:15px}.card-label{font-size:10px}.card-info p{font-size:11px}.card-price{font-size:14px}.filter,.toolbar select{font-size:13px}.crumbs{font-size:13px}.photo-note{font-size:12px}.product-panel{max-width:560px}.product-panel .description{font-size:15px;line-height:1.75}.price-line span{font-size:12px}legend{font-size:14px;font-weight:600}.option-row{flex-wrap:wrap}.option span,.wrap-choice .option span{font-size:13px;padding:12px 16px}.tiny-note{font-size:12px}.product-details details{font-size:14px;padding:16px 0}.footer-grid .eyebrow{font-size:10px}.footer-grid a:not(.footer-logo),.footer-grid button,.footer-grid p:not(.eyebrow){font-size:13px}.footer-bottom,.footer-bottom button{font-size:10px}.dialog-head .eyebrow{font-size:10px}.dialog-intro,.cart-item p{font-size:13px}.delete{font-size:12px}.form-label{font-size:14px}.check-label{font-size:13px}.notice{font-size:13px}#toast{font-size:14px}.product-kicker{display:flex;justify-content:space-between;align-items:center;gap:20px}.favorite-btn{font-size:13px;border-bottom:1px solid var(--line);padding:7px 0;white-space:nowrap}.favorite-btn[aria-pressed="true"]{color:#7c313b}.product-meta{display:flex;justify-content:space-between;gap:15px;margin-top:18px;color:var(--muted);font-size:12px}.product-gallery{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px}.gallery-thumbs{display:flex;flex-direction:column;gap:10px}.gallery-thumb{padding:0;border:1px solid transparent;opacity:.7}.gallery-thumb.active{border-color:var(--ink);opacity:1}.gallery-thumb img{aspect-ratio:1/1}.purchase-row{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-top:6px}.product-stepper{display:flex;align-items:center;border:1px solid var(--line);min-height:52px}.product-stepper button{font-size:20px;padding:8px 15px}.product-stepper span{min-width:28px;text-align:center;font-weight:600}.purchase-row .add-cart{margin:0}.delivery-mini{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0 18px}.delivery-mini>div{border:1px solid var(--line);padding:13px}.delivery-mini strong,.delivery-mini span{display:block}.delivery-mini strong{font-size:13px}.delivery-mini span{font-size:11px;color:var(--muted);margin-top:3px}.checkout-page{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:6%;padding:20px 6% 90px;align-items:start}.checkout-main>h1{font-size:clamp(48px,6vw,82px);margin:12px 0 28px}.checkout-main .notice{max-width:720px}.checkout-section{display:grid;grid-template-columns:54px minmax(0,1fr);gap:22px;border-top:1px solid var(--line);padding:34px 0}.checkout-step{font:italic 21px var(--serif);color:#8b927d}.checkout-section h2{font-size:32px;margin-bottom:18px}.checkout-section>div:last-child{min-width:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.form-grid .wide{grid-column:1/-1}.form-label input,.form-label textarea,.form-label select{min-height:48px;font-size:15px;background:#fffefa}.form-label textarea{min-height:100px}.choice-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px}.payment-cards{grid-template-columns:repeat(3,1fr)}.choice-cards label{position:relative}.choice-cards input{position:absolute;opacity:0}.choice-cards span{display:block;border:1px solid var(--line);padding:15px;cursor:pointer;min-height:76px}.choice-cards input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:#eef0e5}.choice-cards strong,.choice-cards small{display:block}.choice-cards strong{font-size:14px}.choice-cards small{font-size:12px;color:var(--muted);margin-top:4px}.receiver-check{margin:0 0 10px}.pickup-selected .wide{opacity:.45}.checkout-submit{width:100%;margin-top:10px}.terms{margin:5px 0 20px}.checkout-summary{position:sticky;top:24px;background:#e9ebdf;padding:26px}.checkout-summary>.eyebrow{margin-bottom:12px}.checkout-item{display:grid;grid-template-columns:82px 1fr;gap:14px;padding:15px 0;border-bottom:1px solid #cfd2c3}.checkout-item img{height:98px}.checkout-item h3{font-size:20px}.checkout-item p{font-size:12px;color:var(--muted);margin:4px 0}.checkout-item strong{font-size:13px}.summary-row{display:flex;justify-content:space-between;gap:15px;padding:9px 0;font-size:14px}.summary-row.total{border-top:1px solid var(--ink);margin-top:7px;padding-top:16px;font-size:20px}.checkout-summary .text-link{margin-top:14px}.checkout-empty{max-width:760px;margin:80px auto;padding:50px;text-align:center}.checkout-empty h1{font-size:60px;margin:15px 0}.checkout-empty p:not(.eyebrow){margin-bottom:25px} @media(max-width:900px){.checkout-page{grid-template-columns:1fr;padding-left:5%;padding-right:5%}.checkout-summary{position:static;order:-1}.payment-cards{grid-template-columns:1fr}.product-gallery{grid-template-columns:60px minmax(0,1fr)}} @media(max-width:700px){body{font-size:15px}.announcement{font-size:9px}.header nav{font-size:13px}.logo small{font-size:7px}.eyebrow{font-size:10px}.btn{font-size:13px}.text-link{font-size:12px}.hero-content .eyebrow,.section-head .eyebrow{font-size:10px}.hero-caption{font-size:9px}.intro p:last-child,.story p:not(.eyebrow),.service p{font-size:14px}.card-info p{font-size:10px}.card-price{font-size:13px}.card-label{font-size:9px}.crumbs{font-size:11px}.product-gallery{grid-template-columns:1fr}.gallery-thumbs{order:2;flex-direction:row}.gallery-thumb{width:68px}.photo-note{font-size:11px}.product-panel .description{font-size:14px}.product-meta{font-size:11px;flex-wrap:wrap}.product-kicker{align-items:flex-start}.purchase-row{grid-template-columns:1fr}.product-stepper{justify-content:center}.delivery-mini{grid-template-columns:1fr}.checkout-page{padding-top:5px}.checkout-main>h1{font-size:45px}.checkout-section{grid-template-columns:1fr;gap:8px;padding:27px 0}.checkout-section h2{font-size:28px}.form-grid,.choice-cards{grid-template-columns:1fr}.checkout-summary{padding:20px}.form-label{font-size:13px}.check-label{font-size:12px}.footer-grid .eyebrow{font-size:9px}.footer-grid a:not(.footer-logo),.footer-grid button,.footer-grid p:not(.eyebrow){font-size:12px}.footer-bottom,.footer-bottom button{font-size:9px}} /* A shorter first screen keeps the next section visible on laptop displays. */ .hero{min-height:540px} .hero-content{padding:58px 20px 78px} .hero h1{font-size:clamp(50px,6.2vw,92px)} .hero-inset{top:24%;max-width:150px} @media(min-width:1600px){.hero{min-height:620px}} @media(max-width:700px){.hero{min-height:480px}.hero-content{padding:55px 20px 75px}.hero h1{font-size:54px}} /* Final laptop readability pass */ .announcement{font-size:11px} .logo small{font-size:10px} .card-label{font-size:11px} .card-info p{font-size:13px} .card-price{font-size:15px} .checkout-item p{font-size:13px} .choice-cards small{font-size:13px} @media(max-width:900px){.checkout-summary{order:initial}} @media(max-width:700px){.announcement{font-size:10px}.logo small{font-size:9px}.card-label{font-size:10px}.card-info p{font-size:12px}.card-price{font-size:14px}} /* Каталог из базы: много значений опций, своё количество, недоступная покупка */ .option-row{flex-wrap:wrap} .custom-qty{max-width:260px;margin:12px 0 0} .custom-qty[hidden]{display:none} .add-cart:disabled{opacity:.45;cursor:not-allowed} /* Вход, заказ, история заказов */ .verified-phone{border-bottom:1px solid var(--line);padding:12px 0;font-size:15px}.verified-phone span{font:10px var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-left:8px} .status{display:inline-block;padding:6px 12px;background:#e9ebdf;font:11px/1.3 var(--sans);letter-spacing:1px;text-transform:uppercase;white-space:nowrap}.status-pending_payment{background:#f3e6c9}.status-cancelled,.status-refunded{background:#eee;color:var(--muted)}.status-delivered{background:var(--olive);color:var(--paper)} .order-page,.orders-page{max-width:850px;margin:auto;padding:40px 30px 90px}.order-page h1,.orders-page h1{margin-bottom:22px}.order-status{margin-bottom:26px}.order-page>.btn{margin-bottom:34px} .order-card{border-top:1px solid var(--line);padding:26px 0}.order-card h2{font-size:22px;margin-bottom:16px}.order-card p{margin-bottom:8px} .order-line{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}.order-line span{display:block;font-size:13px;color:var(--muted);margin-top:4px} .order-row{display:grid;grid-template-columns:1fr auto auto auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.order-row a span{display:block;font-size:13px;color:var(--muted);margin-top:4px}.order-row .text-link{margin:0} .orders-page .tiny-note{margin-top:26px} @media (max-width:700px){.order-page,.orders-page{padding:28px 16px 60px}.order-row{grid-template-columns:1fr auto;gap:10px}.order-row a{grid-column:1/-1}.order-row .status{justify-self:start}.order-row .text-link{grid-column:1/-1;justify-self:start;width:auto;min-width:0;text-align:left}} /* Motion system: navigation keeps the shell in place and replaces only main. */ #main{position:relative;min-height:55vh;opacity:1;transform:translateY(0);filter:blur(0);transition:opacity .22s ease,transform .38s cubic-bezier(.22,.8,.22,1),filter .22s ease} body.route-changing #main{opacity:0;transform:translateY(8px);filter:blur(3px);pointer-events:none} .route-loader{position:fixed;z-index:8;left:50%;top:52%;display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;transform:translate(-50%,-45%);pointer-events:none;transition:opacity .16s ease,transform .3s ease} .route-loader span{font:18px/1 var(--serif);letter-spacing:5px} .route-loader i{display:block;width:92px;height:1px;background:var(--line);overflow:hidden;position:relative} .route-loader i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-105%)} body.route-changing .route-loader{opacity:1;transform:translate(-50%,-50%);transition-delay:.08s} body.route-changing .route-loader i::after{animation:route-progress .62s cubic-bezier(.65,0,.35,1) infinite} @keyframes route-progress{50%{transform:translateX(10%)}100%{transform:translateX(105%)}} /* Quiet hover feedback without changing layout. */ .header nav a,.footer-grid a:not(.footer-logo),.header-actions button{position:relative} .header nav a::after,.footer-grid a:not(.footer-logo)::after,.header-actions button::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:center;transition:transform .32s cubic-bezier(.65,0,.35,1)} .header nav a:hover::after,.footer-grid a:not(.footer-logo):hover::after,.header-actions button:hover::after{transform:scaleX(1);transform-origin:center} .footer-grid a:not(.footer-logo),.footer-grid button{width:max-content;max-width:100%} .header-actions button svg{transition:transform .28s ease} .header-actions button:hover svg{transform:translateY(-2px) scale(1.06)} .logo{transition:letter-spacing .35s ease,opacity .25s ease} .logo:hover{letter-spacing:7px;opacity:.78} .btn{transition:background .25s ease,color .25s ease,transform .3s cubic-bezier(.22,.8,.22,1),box-shadow .3s ease} .btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(40,48,35,.12)} .btn span,.round-link,.card-arrow{transition:transform .3s cubic-bezier(.22,.8,.22,1)} .btn:hover span{transform:translateX(4px)} .round-link:hover{transform:rotate(45deg);background:#eef0e3;color:var(--ink)} .product-card{transition:transform .38s cubic-bezier(.22,.8,.22,1)} .product-card:hover{transform:translateY(-5px)} .product-card:hover .card-arrow{transform:translate(2px,-2px) rotate(8deg)} .product-card .card-info h3 a{background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:0 1px;transition:background-size .35s ease} .product-card:hover .card-info h3 a{background-size:100% 1px} .option span,.choice-cards span,.gallery-thumb,.delivery-mini>div,.service>div{transition:transform .28s ease,border-color .25s ease,background-color .25s ease,opacity .25s ease} .option:hover span,.choice-cards label:hover span{transform:translateY(-2px);border-color:#8e9582} .gallery-thumb:hover{opacity:1;transform:translateX(3px)} .delivery-mini>div:hover{transform:translateY(-3px);border-color:#aeb4a3;background:#fffefa} .service>div:hover{transform:translateY(-3px)} .text-link{transition:color .2s ease,border-color .2s ease,letter-spacing .3s ease} .text-link:hover{letter-spacing:.25px;color:#66704f;border-color:#66704f} dialog[open]{animation:drawer-in .42s cubic-bezier(.22,.8,.22,1)} dialog[open]::backdrop{animation:backdrop-in .3s ease} @keyframes drawer-in{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:translateX(0)}} @keyframes backdrop-in{from{background:#151c1400;backdrop-filter:blur(0)}to{background:#151c1466;backdrop-filter:blur(3px)}} @media(max-width:700px){.route-loader{top:50%}.product-card:hover{transform:none}.gallery-thumb:hover{transform:none}} @media(prefers-reduced-motion:reduce){#main,.route-loader,.header nav a::after,.footer-grid a:not(.footer-logo)::after,.header-actions button::after,.header-actions button svg,.logo,.btn,.btn span,.round-link,.card-arrow,.product-card,.product-card .card-info h3 a,.option span,.choice-cards span,.gallery-thumb,.delivery-mini>div,.service>div,.text-link,dialog[open],dialog[open]::backdrop{animation:none!important;transition:none!important;transform:none!important;filter:none!important}} /* Compact home opening: the product collection starts inside the first viewport. */ .hero{min-height:380px} .hero-content{padding:36px 20px 56px} .hero-content .eyebrow{margin-bottom:18px} .hero h1{font-size:clamp(46px,5.2vw,74px)} .hero .btn{margin-top:22px} .hero-inset{top:18%;max-width:120px;padding-bottom:18px} .hero-caption{bottom:18px} .intro{padding:28px 20px 24px;max-width:680px} .intro .eyebrow{margin-bottom:10px} .intro h2{font-size:34px} .intro p:last-child{margin-top:10px;max-width:520px} @media(min-width:1600px){.hero{min-height:420px}} @media(max-width:700px){.hero{min-height:400px}.hero-content{padding:42px 18px 64px}.hero h1{font-size:48px}.intro{padding:25px 20px 22px}.intro h2{font-size:31px}} /* Soft media corners balance the rounded controls without changing the layout. */ .hero{margin:10px 1.5% 0;border-radius:16px} .hero-photo{border-radius:inherit} .hero-inset{border-radius:12px} .hero-inset img{border-radius:8px} .product-card .photo{border-radius:12px} .product-card .photo img{border-radius:inherit} .main-product-image,.story img,.article>img{border-radius:14px} .gallery-thumb{border-radius:9px;overflow:hidden} .gallery-thumb img{border-radius:8px} .cart-item img,.checkout-item img{border-radius:10px} @media(max-width:700px){.hero{margin:6px 3% 0;border-radius:12px}.product-card .photo{border-radius:10px}.main-product-image,.story img,.article>img{border-radius:12px}} /* Keep the desktop card arrow unchanged on mobile. */ @media(max-width:700px){.card-arrow{width:34px;height:34px;right:10px;bottom:10px;display:grid;place-items:center;font-size:20px;line-height:normal;padding:0}.card-arrow::before{content:none}} /* FlorenLab длиннее прежнего BLOOM: логотип плотнее, в подвале — на всю ширину на телефоне. */ .logo{letter-spacing:2px;padding-left:2px} .logo:hover{letter-spacing:3px} .footer-logo{font-size:76px;letter-spacing:-2px} @media(max-width:700px){.logo{font-size:24px}.footer-logo{grid-column:1/-1;font-size:56px}} .btn-yandex{gap:12px}.btn-yandex i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fc3f1d;color:#fff;font:700 13px/1 var(--sans);font-style:normal} /* ===== Плавность v2: заставка, переходы, нажатия, панель, вход, заказы ===== */ :root{--ease:cubic-bezier(.22,.8,.22,1);--ease-io:cubic-bezier(.65,0,.35,1);--ease-in:cubic-bezier(.55,0,.75,.2);--soft:#e9ebdf;--card:#fffefa} /* Заставка при загрузке сайта */ .splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--paper);transition:opacity .75s var(--ease),visibility .75s} .splash-mark{text-align:center;transition:transform .9s var(--ease),filter .9s var(--ease)} .splash-word{display:block;font:clamp(40px,6vw,58px)/1 var(--serif);letter-spacing:2px;color:var(--ink)} .splash-word span{display:inline-block;opacity:0;transform:translateY(.4em);filter:blur(8px);animation:splash-letter .8s var(--ease) forwards;animation-delay:calc(var(--i) * 50ms + 120ms)} .splash small{display:block;margin-top:14px;font:10px/1 var(--sans);letter-spacing:3.2px;color:var(--muted);opacity:0;animation:fade-in .9s ease .65s forwards} .splash i{display:block;position:relative;overflow:hidden;width:110px;height:1px;margin:24px auto 0;background:var(--line);opacity:0;animation:fade-in .6s ease .8s forwards} .splash i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-105%);animation:route-progress 1.15s var(--ease-io) .9s infinite} .splash.is-done{opacity:0;visibility:hidden;pointer-events:none} .splash.is-done .splash-mark{transform:translateY(-14px) scale(.98);filter:blur(2px)} @keyframes splash-letter{to{opacity:1;transform:none;filter:blur(0)}} @keyframes fade-in{to{opacity:1}} /* Переход между страницами: старая уходит, «FlorenLab» держится, новая проявляется по частям */ #main{transition:none} body.route-changing #main{opacity:0;transform:translateY(-6px);filter:blur(3px);transition:opacity .28s ease,transform .28s ease,filter .28s ease} .route-loader span{display:block;font:22px/1 var(--serif);letter-spacing:3px;filter:blur(4px);transition:filter .5s var(--ease)} .route-loader i{width:110px} body.route-changing .route-loader{transition:opacity .35s ease .14s,transform .5s var(--ease) .14s} body.route-changing .route-loader span{filter:blur(0)} body.route-changing .route-loader i::after{animation-duration:1.1s} #main.page-enter>*{animation:enter-up .8s var(--ease) both} #main.page-enter>*:nth-child(2){animation-delay:.08s} #main.page-enter>*:nth-child(3){animation-delay:.16s} #main.page-enter>*:nth-child(n+4){animation-delay:.24s} #main.page-enter .grid>*{animation:enter-up .75s var(--ease) both;animation-delay:calc(.18s + min(var(--i,0),11) * 55ms)} @keyframes enter-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} /* Фото проявляются, когда загрузились, а не «выпрыгивают» */ :is(#main,#dialog-content) img{transition:opacity .7s var(--ease),transform .5s} :is(#main,#dialog-content) img:not(.is-loaded){opacity:0} .product-card .photo,.main-product-image,.oc-photo,.ol-photo{background:linear-gradient(100deg,#e7e8e1 30%,#eff0ea 50%,#e7e8e1 70%) 0 0/300% 100%;animation:shimmer 1.6s linear infinite} @keyframes shimmer{to{background-position:-150% 0}} /* Нажатия: всё мягко проседает и возвращается */ button,.btn,.filter,.text-link,.round-link,.option span,.choice-cards span,.gallery-thumb{-webkit-user-select:none;user-select:none} button:not(.btn){transition:transform .3s var(--ease),opacity .25s ease,color .25s ease,background-color .3s ease,border-color .3s ease} button:not(.btn):not(:disabled):active{transform:scale(.95);transition-duration:.12s} .btn{position:relative;overflow:hidden;isolation:isolate;transition:color .45s var(--ease),border-color .45s var(--ease),transform .4s var(--ease),box-shadow .45s var(--ease),opacity .3s} .btn::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--ink);transform:translateY(102%);transition:transform .55s var(--ease)} .btn:hover{background:transparent;color:var(--paper)} .btn:hover::before{transform:translateY(0)} .btn-solid{background:var(--ink)} .btn-solid::before{background:#4d5a3d} .btn-solid:hover{background:var(--ink)} .btn-light::before{background:var(--paper)} .btn-light:hover{background:transparent;color:var(--ink)} .btn:not(:disabled):active{transform:translateY(0) scale(.975);transition-duration:.12s} .btn:disabled::before{display:none} .btn:disabled:hover{transform:none;box-shadow:none} .btn:not(.btn-solid):disabled:hover{color:inherit} .filter:not(:disabled):active,.option:active span,.choice-cards label:active span{transform:scale(.96);transition-duration:.12s} .text-link{transition:color .3s ease,border-color .3s ease,opacity .3s ease} .text-link:hover{letter-spacing:normal} .btn.is-busy{color:transparent!important} .btn.is-busy::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:1.5px solid currentColor;border-color:var(--paper) var(--paper) transparent transparent;animation:spin .8s linear infinite} .btn:not(.btn-solid).is-busy::after{border-color:var(--ink) var(--ink) transparent transparent} @keyframes spin{to{transform:rotate(360deg)}} #toast{transition:opacity .45s var(--ease),transform .55s var(--ease)} /* Шапка: вошедший покупатель виден по имени */ .header-actions button{white-space:nowrap} .avatar{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--olive);color:var(--paper);font:15px/1 var(--serif);text-transform:uppercase} .account-name{max-width:150px;overflow:hidden;text-overflow:ellipsis} #account-btn.is-in{gap:9px} #account-btn>*{animation:fade-in .5s ease both} #account-btn>.avatar{opacity:0;animation:avatar-in .6s var(--ease) both} @keyframes avatar-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}} /* Боковая панель: въезжает и уезжает плавно */ dialog{padding:24px 36px 36px;width:520px;box-shadow:-30px 0 120px rgba(21,28,20,.18);overscroll-behavior:contain} dialog[open]{animation:drawer-in .62s var(--ease) both} dialog[open]::backdrop{animation:backdrop-in .5s ease both} dialog.is-closing{animation:drawer-out .46s var(--ease-io) both} dialog.is-closing::backdrop{animation:backdrop-out .46s ease both} @keyframes drawer-in{from{transform:translateX(100%)}to{transform:none}} @keyframes drawer-out{from{transform:none}to{transform:translateX(100%)}} @keyframes backdrop-out{from{background:#151c1466;backdrop-filter:blur(3px)}to{background:#151c1400;backdrop-filter:blur(0)}} dialog[open]:not(.is-closing) #dialog-content>*{animation:enter-up .7s var(--ease) both} dialog[open] #dialog-content>*:nth-child(2){animation-delay:.12s} dialog[open] #dialog-content>*:nth-child(3){animation-delay:.17s} dialog[open] #dialog-content>*:nth-child(4){animation-delay:.22s} dialog[open] #dialog-content>*:nth-child(n+5){animation-delay:.27s} dialog[open] #dialog-content>*:first-child{animation-delay:.07s} #dialog-content.no-enter>*{animation:none!important} .dialog-head{margin-bottom:34px} .close{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:50%;font-size:22px;line-height:1;transition:transform .5s var(--ease),border-color .3s,background-color .3s} .close:hover{transform:rotate(90deg);border-color:var(--ink);background:var(--card)} /* Вход */ .auth-eyebrow{margin-bottom:14px;color:var(--muted)} dialog h2{margin-bottom:18px} .auth-yandex{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:54px;padding:0 24px;border-radius:50px;background:#000;color:#fff;font-size:15px;font-weight:500;letter-spacing:.1px;transition:transform .4s var(--ease),box-shadow .45s var(--ease),background-color .3s} .auth-yandex:hover{background:#1c1c1c;box-shadow:0 12px 30px rgba(0,0,0,.18);transform:translateY(-2px)} .auth-yandex svg{width:26px;height:26px;flex:none} .auth-divider{display:flex;align-items:center;gap:14px;margin:26px 0 20px;color:var(--muted);font-size:12px;letter-spacing:.3px} .auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)} .segmented{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;margin-bottom:18px;border-radius:50px;background:#eceee4} .segmented button{position:relative;z-index:1;padding:10px 0;border-radius:50px;font-size:14px;color:var(--muted)} .segmented button[aria-selected="true"]{color:var(--ink)} .segmented button:not(:disabled):active{transform:scale(.97)} .seg-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:50px;background:var(--card);box-shadow:0 2px 12px rgba(40,48,35,.1);transition:transform .5s var(--ease)} .segmented[data-mode="email"] .seg-pill{transform:translateX(100%)} .auth-form[hidden]{display:none} .auth-form.is-swapping{animation:enter-up .5s var(--ease) both} .field{display:block;margin:0 0 14px} .field>span{display:block;margin-bottom:8px;font-size:13px;color:var(--muted)} .field input{display:block;width:100%;min-height:56px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card);font-size:17px;letter-spacing:.2px;outline:0;transition:border-color .3s ease,box-shadow .4s var(--ease)} .field input:hover{border-color:#b9bdae} .field input:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(55,63,48,.08)} .field input:focus-visible{outline:0} .field-error{min-height:0;margin:-4px 0 12px;font-size:13px;color:#8a3a36} .field-error:empty{display:none} .auth-form .btn{margin-top:4px} .auth-legal{display:flex;gap:10px;margin-top:22px;font-size:12px;line-height:1.55;color:var(--muted)} .auth-legal svg{flex:none;width:15px;height:15px;margin-top:1px;stroke:currentColor;stroke-width:1.4;fill:none} .auth-sent{font-weight:600;color:var(--ink);white-space:nowrap} .code-cells{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:16px} .code-cells input{position:absolute;inset:0;z-index:2;width:100%;height:100%;opacity:0;font-size:16px;color:transparent;caret-color:transparent;border:0;background:transparent;letter-spacing:40px} .code-cells>span{display:grid;place-items:center;height:62px;border:1px solid var(--line);border-radius:14px;background:var(--card);font:28px/1 var(--serif);transition:border-color .3s,box-shadow .35s var(--ease),transform .35s var(--ease)} .code-cells>span.is-filled{border-color:#b9bdae;animation:digit-in .35s var(--ease)} .code-cells.is-focus>span.is-active{border-color:var(--ink);box-shadow:0 0 0 4px rgba(55,63,48,.08)} .code-cells.is-focus>span.is-active:not(.is-filled)::after{content:"";width:1.5px;height:26px;background:var(--ink);animation:caret 1s steps(1) infinite} .code-cells.is-error{animation:shake .45s var(--ease)} .code-cells.is-error>span{border-color:#b86a64} @keyframes digit-in{from{transform:scale(.9)}to{transform:none}} @keyframes caret{50%{opacity:0}} @keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}} .auth-row{display:flex;justify-content:space-between;gap:16px;margin-top:20px;font-size:13px} .auth-row button{padding:6px 0;color:var(--ink);border-bottom:1px solid var(--line)} .auth-row button:disabled{color:var(--muted);border-color:transparent;cursor:default} /* Личный кабинет в панели */ .account-hero{display:flex;align-items:center;gap:18px;margin-bottom:10px} .account-hero .avatar{width:64px;height:64px;font-size:30px} .account-hero h2{margin:0} .account-links{display:grid;margin:26px 0 8px;border-top:1px solid var(--line)} .account-links>*{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;width:100%;padding:18px 4px;border-bottom:1px solid var(--line);text-align:left;transition:padding .45s var(--ease),background-color .3s} .account-links>*:hover{padding-left:12px;padding-right:0;background:rgba(233,235,223,.5)} .account-links strong{font:22px/1.2 var(--serif);font-weight:400} .account-links small{grid-column:1;font-size:13px;color:var(--muted)} .account-links i{grid-row:1/3;grid-column:2;font-style:normal;font-size:18px;transition:transform .45s var(--ease)} .account-links>*:hover i{transform:translate(3px,-3px)} .account-last{margin-top:22px} .account-last:empty{display:none} .account-last>.eyebrow{margin-bottom:12px;color:var(--muted)} .sign-out{margin-top:26px;font-size:13px;color:var(--muted);border-bottom:1px solid transparent;padding:4px 0} .sign-out:hover{color:var(--ink);border-color:var(--line)} /* Сортировка: свой список в стиле сайта */ .select{position:relative;display:flex;align-items:center;gap:12px} .select-label{font-size:10px;color:var(--muted)} .select-button{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:9px 16px 9px 18px;border:1px solid var(--line);border-radius:50px;font-size:13px;background:transparent} .select-button:hover{border-color:#b9bdae;background:var(--card)} .select-button svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.5;fill:none;transition:transform .45s var(--ease)} .select.is-open .select-button{border-color:var(--ink);background:var(--card)} .select.is-open .select-button svg{transform:rotate(180deg)} .select-menu{position:absolute;z-index:20;right:0;top:calc(100% + 10px);min-width:240px;margin:0;padding:6px;list-style:none;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 22px 60px rgba(40,48,35,.16);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top right;transition:opacity .25s ease,transform .45s var(--ease),visibility .45s} .select.is-open .select-menu{opacity:1;visibility:visible;transform:none} .select-menu li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 14px;border-radius:11px;font-size:14px;cursor:pointer;outline:0;transition:background-color .25s ease,padding .4s var(--ease)} .select-menu li:hover,.select-menu li:focus-visible{background:#eef0e5;padding-left:18px} .select-menu li svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s var(--ease)} .select-menu li[aria-selected="true"]{font-weight:600} .select-menu li[aria-selected="true"] svg{opacity:1;transform:none} .select.is-open .select-menu li{animation:enter-up .45s var(--ease) both} .select.is-open .select-menu li:nth-child(2){animation-delay:.04s} .select.is-open .select-menu li:nth-child(3){animation-delay:.08s} /* Фильтры каталога: тёмная «пилюля» переезжает, карточки меняются волной */ .filters{position:relative} .filter{position:relative;z-index:1;background:transparent;transition:color .45s var(--ease),border-color .45s var(--ease),transform .3s var(--ease)} .filter:hover{border-color:#aeb4a3} .filter.active{background:transparent;color:var(--paper)} .filters.has-pill .filter.active{border-color:transparent} .filter-pill{position:absolute;left:0;top:0;z-index:0;border-radius:30px;background:var(--ink);pointer-events:none;transition:transform .55s var(--ease),width .55s var(--ease),height .55s var(--ease)} .filters:not(.pill-ready) .filter-pill{transition:none} #catalog-grid{transition:opacity .22s ease,transform .22s ease} #catalog-grid.is-leaving{opacity:0;transform:translateY(8px)} #catalog-grid.is-sizing{overflow:hidden;transition:height .6s var(--ease),opacity .22s ease,transform .22s ease} #catalog-grid.is-entering>*{animation:enter-up .65s var(--ease) both;animation-delay:calc(min(var(--i,0),11) * 45ms)} #catalog-count{transition:opacity .3s} /* Товар: смена фото и цены без рывков */ .price-tick{animation:price-tick .5s var(--ease)} @keyframes price-tick{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}} #main .main-product-image.is-swapping{opacity:0!important;transition-duration:.25s} .product-card .photo:has(img.is-loaded),.oc-photo:has(img.is-loaded),.ol-photo:has(img.is-loaded),.main-product-image.is-loaded{animation:none} .avatar svg{width:15px!important;height:15px!important;stroke:currentColor} .field-hint{margin:-6px 0 14px;font-size:12px;color:var(--muted)} /* Мои заказы */ .orders-page{max-width:980px;padding-top:56px} .orders-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px} .orders-head h1{margin:14px 0 0} .orders-head p:not(.eyebrow){color:var(--muted);font-size:14px} .orders-group{margin:0 0 14px;color:var(--muted)} .orders-list{display:grid;gap:14px;margin-bottom:38px} .oc{position:relative;display:grid;grid-template-columns:128px minmax(0,1fr) auto;gap:26px;align-items:stretch;padding:16px 22px 16px 16px;border:1px solid var(--line);border-radius:18px;background:var(--card);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s,opacity .45s ease,margin .5s var(--ease)} .oc:hover{transform:translateY(-3px);border-color:#c9ccbe;box-shadow:0 18px 44px rgba(40,48,35,.09)} .oc-photo{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:12px} .oc-photo img{height:100%;transition:transform .8s var(--ease),opacity .7s var(--ease)} .oc:hover .oc-photo img{transform:scale(1.05)} .oc-more-count{position:absolute;right:8px;bottom:8px;padding:3px 9px;border-radius:20px;background:#f7f5eef2;font-size:12px} .oc-body{display:flex;flex-direction:column;min-width:0;padding:4px 0} .oc-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:12px} .oc-num{font-size:13px;letter-spacing:.3px;color:var(--muted)} .oc h2{font-size:26px;line-height:1.15;margin:0 0 6px} .oc h2 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit} .oc-options{font-size:14px;color:var(--muted)} .oc-extra{margin-top:4px;font-size:14px} .oc-when{display:flex;gap:8px;align-items:center;margin-top:auto;padding-top:14px;font-size:14px} .oc-when svg{width:16px;height:16px;flex:none;stroke:currentColor;stroke-width:1.3;fill:none;color:var(--muted)} .oc-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:12px;padding:4px 0;text-align:right} .oc-side strong{font:26px/1 var(--serif);font-weight:400;white-space:nowrap} .oc-open{font-size:13px;display:inline-flex;gap:6px;align-items:center} .oc-open i{font-style:normal;transition:transform .45s var(--ease)} .oc:hover .oc-open i{transform:translate(3px,-3px)} .oc-hide{position:relative;z-index:2;font-size:12px;color:var(--muted);padding:4px 0;border-bottom:1px solid transparent} .oc-hide:hover{color:var(--ink);border-color:var(--line)} .oc.is-removing{opacity:0;transform:translateX(24px)} .orders-empty{padding:56px 40px;border:1px dashed #c9ccbe;border-radius:18px;text-align:center} .orders-empty h2{font-size:34px;margin:0 0 10px} .orders-empty p{color:var(--muted);margin-bottom:24px} .status{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:30px;background:var(--soft);color:var(--ink);font:12px/1.2 var(--sans);letter-spacing:.2px;text-transform:none} .status::before{content:"";width:7px;height:7px;border-radius:50%;background:#7d8a5c} .status-pending_payment{background:#f4ead3}.status-pending_payment::before{background:#c28a2c;animation:pulse 1.8s ease-in-out infinite} .status-assembling::before,.status-delivering::before{animation:pulse 1.8s ease-in-out infinite} .status-delivering{background:#e3e9e6}.status-delivering::before{background:#4f7466} .status-delivered{background:var(--olive);color:var(--paper)}.status-delivered::before{background:#c9d3a7} .status-cancelled,.status-refunded{background:#ecebe6;color:var(--muted)}.status-cancelled::before,.status-refunded::before{background:#a3a39b} @keyframes pulse{50%{opacity:.35}} /* Страница заказа */ .order-page{max-width:1080px;padding-top:16px} .order-page .crumbs{padding:12px 0 26px} .order-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:30px} .order-head h1{margin:14px 0 0} .order-head .status{margin-bottom:10px} .steps{display:grid;grid-template-columns:repeat(var(--n,5),1fr);margin:0 0 36px;padding:0;list-style:none;counter-reset:step} .steps li{position:relative;padding-top:26px;font-size:13px;color:var(--muted)} .steps li::before{content:"";position:absolute;left:0;top:6px;z-index:1;width:13px;height:13px;border-radius:50%;border:1px solid #b9bdae;background:var(--paper);transition:background-color .5s,border-color .5s} .steps li::after{content:"";position:absolute;left:14px;right:0;top:12px;height:1px;background:var(--line)} .steps li:last-child::after{display:none} .steps li.done{color:var(--ink)} .steps li.done::before{background:var(--olive);border-color:var(--olive)} .steps li.done::after{background:var(--olive)} .steps li.current{color:var(--ink);font-weight:600} .steps li.current::before{background:var(--paper);border:4px solid var(--olive)} .order-pay{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 24px;margin-bottom:30px;border-radius:18px;background:#f4ead3} .order-pay p{font-size:14px;max-width:460px} .order-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:start} .order-box{padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--card)} .order-box+.order-box{margin-top:16px} .order-box>.eyebrow{margin-bottom:6px;color:var(--muted)} .order-aside{padding:26px;border-radius:18px;background:var(--soft)} .order-aside h2{font-size:26px;margin:0 0 14px} .order-aside p{font-size:14px;margin:0 0 10px} .order-aside .card-quote{margin-top:18px;padding:16px 18px;border-radius:12px;background:var(--card);font:italic 17px/1.5 var(--serif)} .ol{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)} .ol-photo{display:block;overflow:hidden;aspect-ratio:4/5;border-radius:10px} .ol-photo img{height:100%} .ol h3{font-size:21px;line-height:1.2;margin-bottom:5px} .ol h3 a{transition:opacity .3s}.ol h3 a:hover{opacity:.7} .ol p{font-size:13px;color:var(--muted)} .ol strong{white-space:nowrap} .order-box .summary-row:first-of-type{margin-top:10px} .order-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px} .oc-photo.is-empty,.ol-photo.is-empty{display:grid;place-items:center;animation:none;background:var(--soft);color:#8b927d;font:italic 30px var(--serif)} .skeleton{border-radius:14px;background:linear-gradient(100deg,#e7e8e1 30%,#eff0ea 50%,#e7e8e1 70%) 0 0/300% 100%;animation:shimmer 1.6s linear infinite} .sk-title{height:74px;width:min(420px,80%);margin:22px 0 38px} .sk-card{height:170px;margin-bottom:14px} .oc-photo,.ol-photo{display:block;width:100%;align-self:start} .oc-mini{grid-template-columns:66px minmax(0,1fr);gap:14px;padding:10px 14px 10px 10px;border-radius:14px} .oc-mini .oc-body{justify-content:center;padding:0} .oc-mini .oc-top{margin-bottom:6px;gap:8px} .oc-mini .oc-num{font-size:12px} .oc-mini .status{padding:4px 10px 4px 8px;font-size:11px} .oc-title{display:block;font:19px/1.2 var(--serif)} .oc-mini .oc-options{display:block;margin-top:3px;font-size:13px} .account-last .oc{animation:enter-up .6s var(--ease) both} @media(max-width:900px){.order-grid{grid-template-columns:1fr}} @media(max-width:700px){ dialog{padding:18px 20px 28px} .dialog-head{margin-bottom:24px} .select{width:100%;justify-content:space-between} .select-menu{left:auto;right:0} .orders-page{padding-top:32px} .orders-head{flex-direction:column;align-items:flex-start;gap:6px} .oc{grid-template-columns:92px minmax(0,1fr);gap:14px;padding:12px;border-radius:16px} .oc h2{font-size:21px} .oc-top{margin-bottom:8px;gap:8px} .oc-options,.oc-extra,.oc-when{font-size:13px} .oc-side{grid-column:1/-1;flex-direction:row;align-items:center;padding:12px 2px 2px;border-top:1px solid var(--line)} .oc-side strong{font-size:22px;margin-right:auto} .oc-open{display:none} .oc:hover{transform:none} .order-head{flex-direction:column;align-items:flex-start;gap:4px} .steps{grid-template-columns:1fr;gap:0} .steps li{padding:0 0 16px 28px} .steps li::before{top:4px} .steps li::after{left:6px;right:auto;top:18px;bottom:0;width:1px;height:auto} .order-pay{flex-direction:column;align-items:stretch} .order-box,.order-aside{padding:18px} .ol{grid-template-columns:64px minmax(0,1fr);gap:14px} .ol>strong{grid-column:2} .code-cells{gap:6px} .code-cells>span{height:56px} .account-hero .avatar{width:54px;height:54px;font-size:26px} } @media(prefers-reduced-motion:reduce){ .splash{display:none} *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important} } /* Крупным кнопкам — лёгкое нажатие, крестик не теряет поворот. */ .close:not(:disabled):active{transform:rotate(90deg) scale(.9)} .auth-yandex:not(:disabled):active{transform:scale(.98)} .account-links>button:not(:disabled):active,.account-links>a:active,.select-menu li:active{transform:scale(.99)} /* ===== v3: без стрелок, выбор получения, плавные блоки, кабинет с фото и лояльностью ===== */ .visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .add-cart{justify-content:center} .oc-open{border-bottom:1px solid transparent;transition:border-color .35s ease} .oc:hover .oc-open{border-color:currentColor} /* Подвал: вместо круглой стрелки — спокойная кнопка */ .footer-cta{display:inline-flex;align-items:center;min-height:42px;padding:10px 22px;border:1px solid #858c72;border-radius:50px;font-size:13px;color:#eef0e3;transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)} .footer-cta:hover{background:#eef0e3;color:var(--ink);border-color:#eef0e3} .footer-cta:active{transform:scale(.97)} /* Карточки выбора (доставка/самовывоз, оплата): скруглённые, выбранная — с отметкой */ .choice-cards span{position:relative;border-radius:14px;padding:15px 44px 15px 16px;background:var(--card);transition:border-color .35s ease,box-shadow .45s var(--ease),background-color .35s ease,transform .3s var(--ease)} /* Отметка не меняет размер: кружок просто наливается цветом, галочка того же цвета, что фон, проявляется вместе с ним */ .choice-cards span::after{content:"";position:absolute;right:15px;top:16px;width:18px;height:18px;border-radius:50%;border:1px solid #b9bdae;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3l2.5 2.4 5.1-5.2' fill='none' stroke='%23fffefa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;transition:border-color .3s ease,background-color .3s ease} .choice-cards input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:#eef0e5} .choice-cards input:checked+span::after{border-color:var(--ink);background-color:var(--ink)} .choice-cards input:focus-visible+span{outline:2px solid #878f54;outline-offset:3px} .delivery-choice{margin:15px 0 18px} .delivery-choice span{min-height:0} .delivery-choice strong{font-size:14px} .delivery-choice small{font-size:12px!important} /* Поля оформления — в одном стиле с полями входа */ .form-label input,.form-label textarea,.form-label select{border-radius:12px;transition:border-color .3s ease,box-shadow .4s var(--ease)} .form-label input:focus,.form-label textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px rgba(55,63,48,.08)} /* Выпадающий список как поле формы (интервал доставки) */ .form-label{position:relative} .native-select{position:absolute!important;left:0;bottom:0;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;opacity:0;pointer-events:none} .select-field{display:block;margin-top:6px} .select-field .select-button{justify-content:space-between;width:100%;min-height:48px;padding:12px 16px;border-radius:12px;background:var(--card);font-size:15px} .select-field .select-menu{left:0;right:0;min-width:0;max-height:300px;overflow-y:auto;transform-origin:top center} .select-field.is-empty .select-button{color:var(--muted)} .select-menu li[aria-disabled="true"]{color:var(--muted);cursor:default;background:none!important;padding-left:14px!important} /* Раскрывающиеся блоки на странице товара */ .product-details summary{align-items:center} .product-details summary::-webkit-details-marker{display:none} .product-details summary::after,.product-details details[open] summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;transition:transform .5s var(--ease),background-size .5s var(--ease)} .product-details details.is-expanded summary::after{transform:rotate(180deg);background-size:12px 1.5px,1.5px 0} .product-details summary{transition:opacity .3s} .product-details summary:hover{opacity:.7} /* Кабинет: разделы без дёрганья — только мягкая подсветка фона */ .account-links>*{position:relative;padding:18px 6px;transition:none} .account-links>*::before{content:"";position:absolute;inset:4px -8px;z-index:-1;border-radius:12px;background:#eceee4;opacity:0;transition:opacity .45s var(--ease)} .account-links{isolation:isolate} .account-links>*:hover{padding:18px 6px;background:none} .account-links>*:hover::before{opacity:1} .al-meta{grid-row:1/3;grid-column:2;min-width:30px;padding:3px 10px;border-radius:20px;background:var(--card);border:1px solid var(--line);font-size:13px;text-align:center;color:var(--muted);transition:background-color .45s,color .45s,border-color .45s} .al-meta:empty{visibility:hidden} .account-links>*:hover .al-meta{background:var(--ink);border-color:var(--ink);color:var(--paper)} /* Фото профиля */ .avatar{overflow:hidden} .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%} .avatar-edit{position:relative;flex:none;width:72px;height:72px;font-size:32px;cursor:pointer} .avatar-face{display:grid;place-items:center;width:100%;height:100%} .avatar-cam{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:rgba(30,36,27,.55);opacity:0;transition:opacity .4s var(--ease)} .avatar-cam svg{width:24px;height:24px;stroke:#fff;stroke-width:1.4;fill:none;transform:scale(.85);transition:transform .45s var(--ease)} .avatar-edit:hover .avatar-cam,.avatar-edit:focus-within .avatar-cam{opacity:1} .avatar-edit:hover .avatar-cam svg{transform:none} .avatar-edit:active{transform:scale(.96)} .avatar-edit{transition:transform .3s var(--ease)} .avatar-edit.is-busy .avatar-cam{opacity:1} .avatar-edit.is-busy .avatar-cam svg{display:none} .avatar-edit.is-busy .avatar-cam::after{content:"";width:22px;height:22px;border-radius:50%;border:1.5px solid #fff;border-right-color:transparent;animation:spin .8s linear infinite} @media(hover:none){.avatar-cam{opacity:1;inset:auto -2px -2px auto;width:26px;height:26px;background:var(--ink);border:2px solid var(--paper)}.avatar-cam svg{width:13px;height:13px;transform:none}} .account-meta{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline} .account-tools{display:inline-flex;gap:14px} .account-tools button{font-size:13px;color:var(--ink);border-bottom:1px solid var(--line);padding:2px 0;transition:border-color .3s} .account-tools button:hover{border-color:var(--ink)} .name-form{margin:4px 0 8px} .name-actions{display:flex;align-items:center;gap:18px} .name-actions .sign-out{margin:0} /* Программа лояльности */ .loyalty{margin:22px 0 4px} .loyalty:empty{display:none} .loyalty>.eyebrow{margin-bottom:12px;color:var(--muted)} .ly-card{padding:20px 22px;border-radius:18px;background:var(--olive);color:var(--paper);animation:enter-up .6s var(--ease) both} .ly-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap} .ly-head strong{font:22px/1.2 var(--serif);font-weight:400} .ly-head span{font-size:12px;color:#c9cfb8} .ly-dots{display:flex;align-items:center;gap:10px;margin:18px 0 14px} .ly-dot{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid #6f7863;background:transparent;transition:background-color .5s,border-color .5s} .ly-dot.is-on{border-color:#e5e9cd;background:#e5e9cd;animation:dot-in .6s var(--ease) both;animation-delay:calc(.25s + var(--d) * 110ms)} .ly-gift{display:grid;place-items:center;width:auto;min-width:58px;height:30px;padding:0 10px;border-radius:20px;border-style:dashed;font-size:12px;color:#e5e9cd} .ly-gift.is-next{border-style:solid;border-color:#e5e9cd;background:#e5e9cd;color:var(--olive);font-weight:600;animation:gift-glow 2.4s ease-in-out infinite} .ly-text{font-size:14px;color:#dfe3d2} .ly-text strong{color:#fff;font-weight:600} @keyframes dot-in{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}} @keyframes gift-glow{50%{box-shadow:0 0 0 6px rgba(229,233,205,.15)}} @media(max-width:700px){.ly-dot{width:24px;height:24px}.ly-dots{gap:7px}.ly-card{padding:18px}.avatar-edit{width:60px;height:60px;font-size:26px}} /* Широкие мониторы: все блоки держатся той же колонки 1450px, что шапка и сетка букетов */ @media(min-width:1600px){ :root{--wide:calc((100vw - 1450px)/2)} .catalog-heading,.service,footer{padding-left:max(4.5%,var(--wide));padding-right:max(4.5%,var(--wide))} .product-layout{padding-left:max(7%,var(--wide));padding-right:max(7%,var(--wide))} .checkout-page{padding-left:max(6%,var(--wide));padding-right:max(6%,var(--wide))} .story{padding-left:max(9%,var(--wide));padding-right:max(9%,var(--wide))} } /* Корзина/кабинет открыты: страница стоит, место полосы прокрутки держим отступом */ html.scroll-locked{overflow:hidden} html.scroll-locked body{padding-right:var(--scrollbar,0px)} /* «Выбрать букет» в подвале не нужен там, где букет уже выбирают: в каталоге и в оформлении */ body:is([data-route="catalog"],[data-route="checkout"]) .footer-top{display:none} /* Избранное */ :root{--heart:#8a3440} #fav-link{position:relative;display:flex;align-items:center;gap:5px;padding:8px 0;font-size:13px;white-space:nowrap} #fav-link svg{transition:transform .28s ease,fill .3s ease,stroke .3s ease} #fav-link:hover svg{transform:translateY(-2px) scale(1.06)} #fav-count:empty{display:none} #fav-link:has(#fav-count:not(:empty)) svg{fill:var(--heart);stroke:var(--heart)} .card-fav{position:absolute;z-index:2;top:12px;right:12px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:rgba(247,245,238,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(30,36,26,.08);transition:background-color .3s ease,transform .3s var(--ease)} .card-fav svg,.favorite-btn svg{width:19px;height:19px;fill:transparent;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round;transition:fill .3s ease,stroke .3s ease} .card-fav:hover{background:#fffefa} .card-fav:hover svg{stroke:var(--heart)} .card-fav:active{transform:scale(.92)} .card-fav[aria-pressed="true"] svg,.favorite-btn[aria-pressed="true"] svg{fill:var(--heart);stroke:var(--heart)} .favorite-btn{display:inline-flex;align-items:center;gap:8px} .favorite-btn svg{width:17px;height:17px} .favorite-btn[aria-pressed="true"]{color:var(--heart)} .is-popping svg{animation:heart-pop .45s var(--ease)} @keyframes heart-pop{0%{transform:scale(1)}35%{transform:scale(.8)}100%{transform:scale(1)}} .product-card.is-removing{opacity:0;transform:scale(.96);transition:opacity .35s ease,transform .35s ease} #favorites-count:empty{display:none} @media(max-width:700px){ .card-fav{top:8px;right:8px;width:34px;height:34px}.card-fav svg{width:17px;height:17px} /* узкая карточка: плашка уходит вниз, чтобы не упираться в сердечко */ .product-card .card-label{top:auto;bottom:8px} /* в шапке тесно: число избранного — маленькой меткой над сердечком, не занимает ширину */ .header-actions{gap:12px} #fav-count{position:absolute;top:1px;right:-7px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--heart);color:#fffefa;font-size:9px;line-height:15px;text-align:center;box-shadow:0 0 0 2px var(--paper)} } @media(prefers-reduced-motion:reduce){.is-popping svg{animation:none}.product-card.is-removing{transition:none}} @media(max-width:380px){.header{padding-left:4%;padding-right:4%}.header-actions{gap:10px}.logo{font-size:22px}} /* «Добавлено в корзину»: карточка справа сверху (на телефоне — снизу, под большим пальцем) */ .added{position:fixed;z-index:20;top:24px;right:24px;width:380px;max-width:calc(100vw - 32px);padding:18px 20px 16px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 70px rgba(30,36,26,.16),0 2px 10px rgba(30,36,26,.06);opacity:0;transform:translateY(-14px) scale(.98);pointer-events:none} .added.is-shown{opacity:1;transform:none;pointer-events:auto;transition:opacity .45s var(--ease),transform .6s var(--ease)} .added.is-leaving{opacity:0;transform:translateY(-10px) scale(.98);pointer-events:none;transition:opacity .3s ease,transform .38s var(--ease-io)} .added-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .added-head .eyebrow{margin:0;color:var(--muted)} .added-x{width:32px;height:32px;margin:-6px -8px -6px 0;border-radius:50%;font-size:22px;line-height:1;color:var(--muted);transition:background-color .25s ease,color .25s ease} .added-x:hover{background:#eef0e5;color:var(--ink)} .added-item{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;margin-bottom:16px} .added-item img{width:64px;height:78px;object-fit:cover;border-radius:10px;background:#e7e8e1} .added-item strong{display:block;font:400 19px/1.25 var(--serif);margin-bottom:4px} .added-item small{color:var(--muted);font-size:13px} .added-go{width:100%;min-height:50px} .added-more{display:block;width:100%;margin-top:6px;padding:10px;font-size:13px;color:var(--muted);transition:color .25s ease} .added-more:hover{color:var(--ink)} @media(max-width:700px){ .added{top:auto;right:12px;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;max-width:none;padding:16px 16px 12px;transform:translateY(24px)} .added.is-leaving{transform:translateY(20px)} .added-item{grid-template-columns:56px 1fr;margin-bottom:14px} .added-item img{width:56px;height:68px} .added-item strong{font-size:17px} } @media(prefers-reduced-motion:reduce){.added.is-shown,.added.is-leaving{transition:none}} /* Компактный первый экран: без плашки-анонса, шапка ниже, баннер по ширине сетки карточек, вместо заголовка-интро — одна строка. Цель — карточки видны сразу при открытии сайта. */ .header{padding-top:12px;padding-bottom:12px;min-height:72px} .logo{font-size:30px} .logo small{margin-top:7px} .hero{margin:14px 4.5% 0;min-height:300px} .hero-content{padding:26px 20px 44px} .hero-content .eyebrow{margin-bottom:12px} .hero h1{font-size:clamp(40px,4.3vw,62px)} .hero .btn{margin-top:18px} .hero-inset{top:14%;max-width:100px;padding-bottom:14px} .hero-inset span{font-size:11px;margin-top:8px} .hero-caption{bottom:14px} .intro{padding:20px 20px 4px;max-width:none} .intro p:last-child{margin:0 auto;max-width:none;font-size:14px} .section-head{margin-bottom:20px} .section-head h2{font-size:34px} @media(min-width:1600px){.hero{min-height:340px;margin-left:max(4.5%,calc((100vw - 1450px)/2));margin-right:max(4.5%,calc((100vw - 1450px)/2))}} @media(max-width:700px){.header{padding-top:12px;padding-bottom:12px;min-height:64px}.logo{font-size:24px}.hero{margin:8px 5% 0;min-height:340px}.hero-content{padding:34px 18px 52px}.hero h1{font-size:42px}.intro{display:none}.intro+.section{padding-top:20px}.section-head h2{font-size:28px}.section-head{margin-bottom:16px}} /* Контакты и компактная навигация: тот же спокойный ритм и палитра FlorenLab. */ .contact-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:8px 4.5%;border-bottom:1px solid var(--line);background:var(--paper);font-size:12px;line-height:1.35} .contact-strip__details{display:flex;align-items:center;gap:18px;min-width:0} .contact-phone{white-space:nowrap;font-weight:600;letter-spacing:.2px} .contact-address{color:var(--muted)} .contact-socials{display:flex;align-items:center;gap:7px;flex:none} .social-mark{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;padding:0 10px 0 7px;border-radius:999px;color:#fff;font-size:11px;font-weight:650;line-height:1;letter-spacing:.1px;box-shadow:0 2px 7px rgba(40,45,39,.12);user-select:none} .social-mark--vk{background:#0077ff} .social-mark--telegram{background:#229ed9} .social-mark svg{width:18px;height:18px;flex:none;fill:currentColor} .social-mark--vk svg{width:20px;height:20px} .social-mark[aria-disabled="true"]{cursor:default} .header{min-height:60px;padding-top:9px;padding-bottom:9px} @media(min-width:1600px){.contact-strip{padding-left:max(4.5%,calc((100vw - 1450px)/2));padding-right:max(4.5%,calc((100vw - 1450px)/2))}} @media(max-width:700px){ .contact-strip{align-items:flex-start;gap:10px;padding:7px 5%;font-size:10px} .contact-strip__details{display:grid;gap:1px} .contact-address{max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .social-mark{width:28px;height:28px;padding:0;border-radius:50%} .social-mark svg{width:16px;height:16px} .social-mark--vk svg{width:19px;height:19px} .social-mark__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .header{min-height:58px;padding-top:8px;padding-bottom:8px} .header nav{gap:12px} } /* Главная: восемь компактных карточек как единая витрина 4 × 2. */ .home-catalog{padding-top:34px} .home-catalog{scroll-margin-top:calc(var(--site-header-height,93px) + 8px)} .home-products{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 20px} .home-products .photo{aspect-ratio:4/5} .home-products .photo img{height:100%} .home-products .card-info h3{font-size:19px} .home-products .card-info p{font-size:10px} .home-products .card-price{font-size:13px} @media(max-width:900px){.home-products{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:700px){.home-catalog{padding-top:20px}.home-products{gap:24px 12px}.home-products .card-info h3{font-size:17px}.home-products .card-info p{font-size:9px}.home-products .card-price{font-size:12px}} /* Карточка товара: категории одной строкой, ракурсы справа, цены — у каждой группы. */ .category-strip{display:flex;align-items:center;gap:0;overflow-x:auto;padding:18px 4.5%;border-bottom:0;white-space:nowrap;scrollbar-width:thin;font-size:12px;color:var(--muted)} .category-strip>*{flex:none} .category-strip__label{display:inline-flex;align-items:center;gap:8px;padding-right:16px;color:var(--ink);font-weight:600} .category-strip__label i{width:8px;height:8px;background:var(--ink)} .category-strip a{position:relative;padding:4px 14px;border-left:1px solid var(--line);transition:color .25s ease} .category-strip a:hover,.category-strip a[aria-current="page"]{color:var(--ink)} .category-strip a[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:1px;height:1px;background:var(--ink)} .product-layout{padding-top:34px} .product-gallery{display:grid;grid-template-columns:minmax(0,1fr) 86px;gap:14px;align-items:start} .main-product-image{grid-column:1;grid-row:1;width:100%;height:auto;aspect-ratio:1/1;border-radius:14px} .product-image-placeholder{background:linear-gradient(135deg,#e7e8e1,#eff0ea);border:1px solid var(--line)} .gallery-thumbs{grid-column:2;grid-row:1;display:grid;align-content:start;gap:10px} .gallery-thumb{width:86px;border-radius:10px} .gallery-thumb img{width:100%;aspect-ratio:1/1;object-fit:cover} .product-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin:0 0 18px} .product-heading h1{min-width:0;margin:0} .product-heading .favorite-btn{flex:none;margin-top:8px} .option-group{display:grid;grid-template-columns:88px minmax(0,1fr) max-content;gap:12px;align-items:start;padding:0 0 17px;margin:0 0 17px;border-bottom:1px solid var(--line)} .option-group legend{grid-column:1;padding-top:11px;margin:0;font-weight:600} .option-control{grid-column:2;min-width:0} .option-row{align-items:stretch} .option span{display:flex;align-items:center;justify-content:center;min-width:72px;min-height:44px;padding:9px 15px;border-radius:8px} .option-group[data-group="pack"] .option span{min-width:132px;padding-inline:20px} .option-price{grid-column:3;min-width:74px;padding-top:11px;white-space:nowrap;text-align:right;color:var(--muted);font-size:13px} .custom-qty{display:grid;grid-template-columns:minmax(150px,1fr) auto;align-items:center;gap:3px 12px;max-width:330px;margin:12px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fffefa;box-shadow:0 10px 30px rgba(42,48,37,.08);animation:custom-qty-in .22s var(--ease) both} .custom-qty[hidden]{display:none} .custom-qty>span:first-child{font-size:12px;font-weight:600} .custom-qty small{grid-column:1;font-size:10px;color:var(--muted)} .custom-qty__field{grid-column:2;grid-row:1/3;display:flex;align-items:center;min-width:104px;border-bottom:1px solid #8d9480} .custom-qty__field input{width:72px;min-width:0;padding:5px 3px;border:0;background:transparent;font-size:18px;font-weight:600;text-align:right;outline:0} .custom-qty__field b{font-size:11px;font-weight:400;color:var(--muted)} .custom-qty:has(input[aria-invalid="true"]){border-color:#a35454;box-shadow:0 0 0 3px rgba(163,84,84,.08)} @keyframes custom-qty-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} @media(min-width:1600px){.category-strip{padding-left:max(4.5%,calc((100vw - 1450px)/2));padding-right:max(4.5%,calc((100vw - 1450px)/2))}} @media(max-width:900px){.product-gallery{grid-template-columns:minmax(0,1fr) 72px}.gallery-thumb{width:72px}.main-product-image{height:auto;aspect-ratio:1/1}} @media(max-width:700px){ .category-strip{padding:13px 5%;font-size:11px} .product-layout{padding-top:22px} .product-gallery{grid-template-columns:1fr} .main-product-image{grid-column:1;grid-row:1} .gallery-thumbs{grid-column:1;grid-row:2;display:flex;overflow-x:auto;padding:1px 0 3px} .gallery-thumb{flex:0 0 66px;width:66px} .product-heading{gap:14px;margin-bottom:14px} .product-heading h1{font-size:38px} .product-heading .favorite-btn span{display:none} .option-group{grid-template-columns:1fr auto;gap:8px 12px} .option-group legend{grid-column:1;padding-top:0} .option-control{grid-column:1/-1;grid-row:2} .option-price{grid-column:2;grid-row:1;padding-top:0} .option span{min-height:44px} .option-group[data-group="pack"] .option span{min-width:125px;padding-inline:15px} } /* Получение заказа: самовывоз слева, доставка справа, одинаковый формат. */ .product-fulfillment{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0 18px} .fulfillment-card{position:relative;display:grid;gap:4px;min-height:76px;padding:15px 42px 15px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-align:left;transition:transform .28s ease,border-color .25s ease,background-color .25s ease,box-shadow .35s ease} .fulfillment-card::after{content:"";position:absolute;right:15px;top:16px;width:18px;height:18px;border:1px solid #b9bdae;border-radius:50%;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3l2.5 2.4 5.1-5.2' fill='none' stroke='%23fffefa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat} .fulfillment-card:hover{transform:translateY(-2px);border-color:#8e9582} .fulfillment-card[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:#eef0e5} .fulfillment-card[aria-pressed="true"]::after{border-color:var(--ink);background-color:var(--ink)} .fulfillment-card strong,.fulfillment-card small{display:block} .fulfillment-card strong{font-size:14px} .fulfillment-card small{font-size:12px;color:var(--muted)} /* Центральное окно доставки не наследует боковое поведение корзины. */ #delivery-dialog{inset:50% auto auto 50%;width:min(520px,calc(100vw - 32px));height:auto;max-height:calc(100dvh - 32px);margin:0;padding:28px;transform:translate(-50%,-50%);border:1px solid var(--line);border-radius:22px;overflow-y:auto;box-shadow:0 28px 100px rgba(21,28,20,.24)} #delivery-dialog[open]{animation:delivery-dialog-in .42s var(--ease) both} #delivery-dialog::backdrop{background:rgba(21,28,20,.48);backdrop-filter:blur(3px)} #delivery-dialog[open]::backdrop{animation:backdrop-in .35s ease both} .delivery-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:12px} #delivery-dialog h2{margin:8px 0 0;font-size:42px} .delivery-dialog__intro{margin:0 0 22px;color:var(--muted);font-size:14px} .delivery-form{display:grid;gap:14px} .delivery-form .form-label{margin:0} .delivery-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px} #delivery-dialog .field-error{min-height:20px;margin:8px 0 0;color:#8b3e3e;font-size:12px} @keyframes delivery-dialog-in{from{opacity:0;transform:translate(-50%,calc(-50% + 18px)) scale(.98)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} @media(max-width:700px){ .product-fulfillment{grid-template-columns:1fr 1fr} .fulfillment-card{min-height:84px;padding:13px 34px 13px 13px} .fulfillment-card::after{right:11px;top:13px} .fulfillment-card small{font-size:10px} #delivery-dialog{padding:22px 18px} #delivery-dialog h2{font-size:34px} .delivery-actions{display:grid;grid-template-columns:1fr 1fr} } /* Адрес студии перенесён из подвала в содержательный блок главной. */ .story-visual{position:relative;margin:0;overflow:hidden;border-radius:14px;background:#d7d9d0} .story-visual img{filter:saturate(.72) contrast(.96) brightness(.92)} .story-visual figcaption{position:absolute;left:16px;bottom:14px;padding:7px 10px;border-radius:20px;background:rgba(247,245,238,.9);font-size:10px;letter-spacing:.5px;color:var(--ink);backdrop-filter:blur(5px)} .studio-contact{display:grid;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid #c8ccbd} .studio-contact address{display:grid;gap:2px;font-style:normal} .studio-contact address strong{font-size:15px;font-weight:600} .studio-contact address span{font-size:13px;color:var(--muted)} .studio-phone{width:max-content;font:clamp(24px,2.4vw,34px)/1.15 var(--serif);border-bottom:1px solid #8d9480;padding-bottom:4px} @media(max-width:700px){ .story-visual figcaption{left:10px;bottom:10px;font-size:9px} .studio-contact{margin-top:22px;padding-top:18px} .studio-phone{font-size:26px} } /* Карточки коллекции: компактная фотография и мини-галерея без перехода в товар. */ .card-media{position:relative;cursor:pointer} .product-card .photo,.home-products .photo{aspect-ratio:6/7} .card-carousel__viewport{touch-action:pan-y} .card-carousel__track{display:flex;width:100%;height:100%;transition:transform .5s var(--ease)} .card-carousel__slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden} .product-card .card-carousel__slide img,.home-products .card-carousel__slide img{width:100%;height:100%;aspect-ratio:auto;border-radius:0;object-fit:cover;transition:opacity .7s var(--ease),transform .65s var(--ease)} .card-carousel__slide--detail img{transform:scale(1.16)} .product-card:hover .card-carousel__slide:not(.card-carousel__slide--detail) img{transform:scale(1.025)} .product-card:hover .card-carousel__slide--detail img{transform:scale(1.2)} .card-carousel__arrow{position:absolute;z-index:3;top:50%;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid rgba(80,86,73,.12);border-radius:50%;background:rgba(247,245,238,.88);box-shadow:0 3px 14px rgba(30,36,26,.08);color:var(--ink);opacity:0;touch-action:manipulation;transform:translateY(-50%);transition:opacity .25s ease,background-color .18s ease;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)} .card-carousel__arrow svg{width:20px;height:20px;pointer-events:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .card-carousel__arrow--prev{left:10px} .card-carousel__arrow--next{right:10px} .card-media:hover .card-carousel__arrow,.card-carousel__arrow:focus-visible{opacity:1} .card-carousel__arrow:hover{background:#fffefa} .card-carousel__arrow:active{background:#fffefa;transform:translateY(-50%)} .card-carousel__dots{position:absolute;z-index:3;left:50%;bottom:11px;display:flex;align-items:center;gap:5px;padding:6px 8px;border-radius:20px;background:rgba(247,245,238,.72);transform:translateX(-50%);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)} .card-carousel__dots button{width:6px;height:6px;padding:0;border-radius:50%;background:#c8cabb;transition:width .3s var(--ease),background-color .3s ease,transform .3s var(--ease)} .card-carousel__dots button[aria-current="true"]{width:16px;border-radius:8px;background:#69705e} .card-carousel__dots button:focus-visible{outline-offset:3px} .card-media .card-label{z-index:3} .card-media .card-fav{z-index:4} .article p a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} /* На главной карточки используют ту же типографику, что и в каталоге. */ .home-products .card-info h3{font-size:22px} .home-products .card-info p{font-size:13px} .home-products .card-price{font-size:15px} @media(max-width:700px){ .header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:14px} .header nav{justify-content:flex-start;transform:translateX(-6px)} .header-actions{justify-content:flex-end} .product-card .photo,.home-products .photo{aspect-ratio:6/7} .card-carousel__arrow{width:38px;height:38px} .card-carousel__arrow--prev{left:7px} .card-carousel__arrow--next{right:7px} .card-carousel__arrow svg{width:19px;height:19px} .card-carousel__dots{bottom:8px;gap:4px;padding:5px 7px} .card-carousel__dots button{width:5px;height:5px} .card-carousel__dots button[aria-current="true"]{width:13px} .product-card .card-label{top:8px;right:auto;bottom:auto;display:inline-flex;width:max-content;max-width:calc(100% - 50px);align-items:center;white-space:nowrap;border-radius:5px} .home-products .card-info h3{font-size:20px} .home-products .card-info p{font-size:12px} .home-products .card-price{font-size:14px} } @media(max-width:380px){ .header{column-gap:10px} .header nav{gap:8px;font-size:12px;transform:translateX(-3px)} .logo{font-size:22px} } @media(hover:none){.card-carousel__arrow{display:none}} @media(prefers-reduced-motion:reduce){.card-carousel__track,.card-carousel__slide img,.card-carousel__arrow,.card-carousel__dots button{transition:none!important}} /* Геометрический крестик вращается строго вокруг центра кнопки. */ .close{position:relative;flex:none;font-size:0;transform-origin:50% 50%;will-change:transform} .close::before,.close::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;border-radius:2px;background:currentColor;transform-origin:center} .close::before{transform:translate(-50%,-50%) rotate(45deg)} .close::after{transform:translate(-50%,-50%) rotate(-45deg)} .close:hover{transform:rotate(90deg)} /* Параметры букета: без заголовков, все варианты выровнены по единой сетке. */ .product-panel .price-line{margin-bottom:0} .option-group{display:block;padding:12px 0;margin:0;border-bottom:1px solid var(--line)} .option-control{display:block;min-width:0} .option-row{display:grid;gap:8px;width:100%;align-items:stretch} .option{display:block;min-width:0} .option>.option__label,.option__trigger>.option__label{display:flex;width:100%;min-width:0;min-height:46px;padding:8px 7px;align-items:center;justify-content:center;text-align:center;line-height:1.2;border-radius:8px} .option__trigger{display:block;position:relative;width:100%;height:100%;cursor:pointer} .option__trigger[hidden]{display:none} .option-group[data-group="qty"] .option-row,.option-group[data-group="length"] .option-row{grid-template-columns:repeat(5,minmax(0,1fr))} .option-group[data-group="pack"] .option-row{grid-template-columns:repeat(4,minmax(0,1fr))} .option-group[data-group="pack"] .option span{width:100%;min-width:0;padding-inline:8px} .option--custom{height:100%} .option--custom .custom-qty{display:flex;width:100%;height:100%;min-height:46px;max-width:none;margin:0;padding:0 8px;align-items:center;justify-content:center;border:1px solid var(--ink);border-radius:8px;background:#eef0e5;box-shadow:none;animation:custom-qty-in .2s var(--ease) both} .option--custom .custom-qty[hidden]{display:none} .option--custom .custom-qty__field{display:flex;width:100%;min-width:0;min-height:0;height:100%;padding:0;align-items:center;justify-content:center;border:0;border-radius:0;background:transparent} .option--custom .custom-qty__field input{position:static;width:42px;min-width:0;height:auto;padding:0;border:0;background:transparent;color:var(--ink);-webkit-text-fill-color:var(--ink);opacity:1;appearance:none;font:600 14px/1 var(--sans);letter-spacing:0;text-align:center;outline:0} .option--custom .custom-qty__field b{flex:none;font-size:10px;font-weight:400;color:var(--muted)} .option--custom .custom-qty:has(input[aria-invalid="true"]){border-color:#a35454;box-shadow:inset 0 0 0 1px #a35454} .product-fulfillment{margin:14px 0 10px} .purchase-row{margin-top:0} body[data-route="product"] .product-heading{margin-bottom:10px} body[data-route="product"] .product-heading+.product-meta{margin-top:0} @media(max-width:700px){ .option-group{padding:10px 0} .option-row{gap:5px} .option>.option__label,.option__trigger>.option__label{min-height:48px;padding:6px 3px;font-size:10px} .option--custom .custom-qty{min-height:48px;padding-inline:3px} .option--custom .custom-qty__field input{width:34px;font-size:12px} .option--custom .custom-qty__field b{font-size:9px} .option-group[data-group="pack"] .option span{padding-inline:4px;font-size:10px} } /* Фиксированная шапка и адаптивная витрина для ноутбуков. */ .site-header{position:fixed;z-index:50;top:0;right:0;left:0;background:rgba(247,245,238,.96);box-shadow:0 8px 24px rgba(35,41,31,.055);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transform:translateZ(0)} .site-header-spacer{height:var(--site-header-height,93px)} html{scroll-padding-top:calc(var(--site-header-height,93px) + 18px)} @media(min-width:901px){ :root{--laptop-gutter:max(8vw,calc((100vw - 1450px)/2))} .contact-strip,.header,.section,.crumbs,.catalog-heading,.category-strip{padding-left:var(--laptop-gutter);padding-right:var(--laptop-gutter)} .hero{margin-left:var(--laptop-gutter);margin-right:var(--laptop-gutter)} .home-products{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.25vw,20px)} .home-products .card-info{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;padding-top:clamp(10px,1vw,16px)} .home-products .card-info>div{min-width:0} .home-products .card-info h3{font-size:clamp(15px,1.25vw,22px);line-height:1.2} .home-products .card-info p{font-size:clamp(9px,.72vw,13px)} .home-products .card-price{padding-top:3px;font-size:clamp(11px,.82vw,15px)} .home-products .card-label{font-size:clamp(7px,.56vw,10px);padding:clamp(4px,.42vw,6px) clamp(7px,.7vw,11px)} .home-products .card-fav{width:clamp(32px,2.5vw,40px);height:clamp(32px,2.5vw,40px)} } @media(min-width:901px) and (max-height:950px){ .hero{min-height:clamp(190px,calc(100dvh - 560px),260px)} .hero-content{padding:16px 20px 24px} .hero-content .eyebrow{margin-bottom:8px;font-size:9px} .hero h1{font-size:clamp(34px,3.5vw,50px)} .hero .btn{min-height:40px;margin-top:10px;padding:9px 21px} .hero-inset{top:12%;max-width:74px;padding:6px 6px 10px} .hero-inset span{margin-top:5px;font-size:9px} .hero-caption{bottom:8px;font-size:8px} .intro{padding:8px 20px 0} .intro p:last-child{font-size:12px} .home-catalog{padding-top:8px} .home-products{row-gap:22px} } @media(min-width:901px) and (max-height:800px){ :root{--laptop-gutter:max(15vw,calc((100vw - 1280px)/2))} .hero{min-height:185px} .hero h1{font-size:clamp(32px,3.2vw,44px)} .hero-inset{display:none} .home-products .card-info h3{font-size:clamp(14px,1.15vw,18px)} } /* Планшеты: галерея занимает верхний квадратный блок, конфигурация идёт ниже на всю ширину. */ @media(min-width:701px) and (max-width:1024px){ body[data-route="product"] .category-strip{padding-right:max(5vw,calc((100vw - 700px)/2));padding-left:max(5vw,calc((100vw - 700px)/2))} body[data-route="product"] .product-layout{grid-template-columns:minmax(0,1fr);gap:30px;padding:24px max(5vw,calc((100vw - 700px)/2)) 52px} body[data-route="product"] .product-visual,body[data-route="product"] .product-panel{width:100%;max-width:none} body[data-route="product"] .product-gallery{grid-template-columns:minmax(0,1fr);gap:12px;width:min(100%,620px);margin:0 auto} body[data-route="product"] .main-product-image{grid-column:1;grid-row:1;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover} body[data-route="product"] .gallery-thumbs{grid-column:1;grid-row:2;display:flex;flex-direction:row;gap:10px;overflow-x:auto;padding:1px 0 3px} body[data-route="product"] .gallery-thumb{flex:0 0 78px;width:78px} body[data-route="product"] .product-panel{padding-top:0} body[data-route="product"] .product-heading h1{font-size:clamp(44px,6.2vw,58px)} body[data-route="product"] .option>.option__label,body[data-route="product"] .option__trigger>.option__label{padding-inline:10px} } @media(min-width:701px) and (max-width:800px){ .header .desktop{display:none} .header{column-gap:18px} .header nav{gap:18px} } /* Юридические ссылки у форм и самостоятельное согласие на обработку данных. */ .check-label.terms{margin:12px 0;align-items:flex-start}.check-label.terms a,.auth-consent a{color:inherit;text-decoration:underline;text-underline-offset:3px}.auth-consent{display:block;margin-top:18px;font-size:12px;line-height:1.6}.auth-consent input{margin:0 7px 0 0;vertical-align:middle} .auth-consent{display:flex;gap:8px;align-items:flex-start}.auth-consent input{flex:none;margin-top:4px}.check-label.terms span,.auth-consent span{min-width:0}