:root{--purple:#8d55b8;--purple2:#a05cbd;--blue:#86a8d5;--ink:#454348;--muted:#66646a;--light:#f2f2f3;--line:#e9e8eb;--white:#fff} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:Arial,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%}.page{width:min(1260px,100%);margin:0 auto}.header{padding:34px 18px 42px;background:#fff}.head{display:flex;align-items:center;justify-content:space-between;max-width:1160px;margin:auto}.logo{width:320px;height:auto}.menu-btn{width:76px;height:76px;border:0;border-radius:50%;background:var(--blue);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}.menu-icon,.menu-icon::before,.menu-icon::after{display:block;width:34px;height:4px;background:#fff;border-radius:5px;position:relative}.menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0}.menu-icon::before{top:-11px}.menu-icon::after{top:11px} .menu-panel{position:fixed;inset:0;background:rgba(39,31,45,.42);z-index:100;display:flex;justify-content:flex-end;opacity:0;visibility:hidden;transition:.22s ease}.menu-panel.open{opacity:1;visibility:visible}.menu-sheet{width:min(420px,88vw);height:100%;background:#fff;padding:34px 28px;transform:translateX(30px);transition:.22s ease;box-shadow:-20px 0 60px rgba(0,0,0,.15);overflow:auto}.menu-panel.open .menu-sheet{transform:none}.menu-close{width:48px;height:48px;border:0;border-radius:50%;background:#f1f0f2;cursor:pointer;font-size:30px;color:var(--ink);float:right}.menu-nav{clear:both;padding-top:54px;display:grid;gap:8px}.menu-nav a{font-size:23px;font-weight:700;padding:17px 14px;border-radius:16px}.menu-nav a:hover{background:#f5eff8;color:var(--purple)}.menu-actions{display:grid;gap:12px;margin-top:25px;padding-top:25px;border-top:1px solid var(--line)}.contact-btn{display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:999px;font-weight:800;border:0;transition:.2s}.contact-vk{background:var(--purple);color:#fff}.contact-max{background:#edf1f7;color:#475a75}.contact-btn:hover{transform:translateY(-2px)} .hero{padding:0 18px 95px}.hero-card{position:relative;min-height:920px;border-radius:34px;overflow:hidden;background:linear-gradient(125deg,#8667c7 0%,#9a61b9 43%,#84a7d5 100%);color:#fff;padding:74px 60px 80px}.hero-copy{position:relative;z-index:2;width:62%;max-width:700px}.hero h1{margin:0 0 26px;font-size:clamp(40px,5.2vw,76px);line-height:1.02;letter-spacing:.2px;text-transform:uppercase;font-weight:800}.hero-lead{font-size:clamp(24px,2.2vw,34px);line-height:1.28;font-weight:700;margin:0 0 36px}.hero-text{font-size:clamp(18px,1.55vw,24px);line-height:1.42;font-weight:600;max-width:740px;margin:0 0 38px}.hero-note{font-size:clamp(18px,1.55vw,24px);line-height:1.45;font-weight:600;max-width:380px;margin:0}.hero-person{position:absolute;right:-2%;bottom:-1px;width:66%;max-width:800px;z-index:1}.hero-actions{position:absolute;left:60px;bottom:58px;display:flex;gap:12px;z-index:3}.hero-actions .contact-btn{padding:0 24px;background:#fff;color:var(--purple);min-height:52px} .section{padding:95px 18px 70px}.section-inner{max-width:1160px;margin:auto}.section-title{font-size:clamp(42px,5vw,68px);line-height:1.05;text-align:center;margin:0 0 48px;font-weight:800}.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin:0 auto 78px;gap:18px 28px}.category-link{appearance:none;-webkit-appearance:none;border:2px solid #d9c8e3;background:#fff;color:#66328b;font-size:clamp(18px,1.65vw,24px);font-weight:700;text-align:center;padding:14px 22px;min-height:56px;border-radius:999px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}.category-link:hover{border-color:#a875c6;background:#f8f1fb;color:#7a419f;transform:translateY(-2px)}.category-link.is-active{background:var(--purple);border-color:var(--purple);color:#fff;box-shadow:0 8px 22px rgba(141,85,184,.2)}.category-link:focus-visible{outline:3px solid rgba(134,168,213,.8);outline-offset:3px}.product-rail-wrap{position:relative}.product-rail{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px 8px 18px;margin:0 -8px}.product-rail::-webkit-scrollbar{display:none}.product-card{flex:0 0 min(560px,62vw);min-height:700px;background:var(--light);border-radius:30px;overflow:hidden;scroll-snap-align:center;display:flex;flex-direction:column}.product-media{height:430px;display:grid;place-items:end center;padding:18px 50px 0}.product-media img{height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 20px 14px rgba(0,0,0,.14))}.product-info{padding:12px 42px 40px;text-align:center}.product-tag{font-size:17px;color:#744197;font-weight:700;margin-bottom:10px}.product-info h3{font-size:clamp(28px,2.8vw,42px);line-height:1.13;margin:0 0 15px;font-weight:700}.product-info p{font-size:18px;line-height:1.35;color:#626067;margin:0}.rail-controls{display:flex;justify-content:center;gap:46px;margin-top:38px}.rail-btn{width:74px;height:74px;border:0;border-radius:50%;background:#d2d3d5;color:#fff;font-size:42px;line-height:1;cursor:pointer}.rail-btn:hover{background:var(--purple)} .important{padding-top:75px}.important .section-title{margin-bottom:42px}.important-intro{max-width:780px;text-align:center;margin:0 auto 120px;font-size:clamp(23px,2.3vw,34px);line-height:1.38;font-weight:700}.features{display:grid;gap:120px;max-width:1000px;margin:auto}.feature{text-align:center}.feature img{width:96px;height:96px;object-fit:contain;margin:0 auto 34px}.feature h3{font-size:clamp(28px,2.7vw,42px);font-weight:400;margin:0 0 25px;line-height:1.15}.feature p{font-size:clamp(20px,2vw,31px);line-height:1.34;margin:0 auto;color:#444;max-width:900px} .about{padding:80px 18px}.about-box{max-width:1160px;margin:auto;border-radius:34px;background:linear-gradient(135deg,#f7f2fa,#edf2f8);padding:55px;display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}.about-copy h2{font-size:48px;margin:0 0 20px}.about-copy p{font-size:19px;line-height:1.55;color:#5f5c62}.about-list{padding:0;margin:24px 0 0;list-style:none;display:grid;gap:14px}.about-list li{font-size:18px;font-weight:600}.about-list li::before{content:"✓";display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--purple);color:#fff;margin-right:10px;font-size:14px}.about-visual{min-height:450px;border-radius:28px;background:linear-gradient(135deg,#8b64c5,#85a8d5);display:grid;align-items:end;overflow:hidden}.about-visual img{width:100%;height:100%;object-fit:contain;object-position:center bottom} .contacts{padding:80px 18px}.contact-box{max-width:1160px;margin:auto;border-radius:34px;background:linear-gradient(125deg,#8d55b8,#84a8d5);color:#fff;padding:58px;display:flex;justify-content:space-between;align-items:center;gap:35px}.contact-box h2{margin:0 0 12px;font-size:clamp(34px,4vw,54px)}.contact-box p{margin:0;max-width:650px;font-size:19px;line-height:1.5}.contact-box .contact-actions{display:flex;gap:12px;flex-wrap:wrap}.contact-box .contact-btn{background:#fff;color:var(--purple);padding:0 25px;white-space:nowrap} .footer{background:#302c33;color:#fff;padding:54px 18px 25px}.footer-inner{max-width:1160px;margin:auto}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:45px}.footer-logo{width:230px;filter:brightness(0) invert(1);margin-bottom:15px}.footer p{color:#d2cdd4;line-height:1.5;margin:0;max-width:470px}.footer h3{margin:0 0 18px;font-size:18px}.footer-links{display:grid;gap:10px}.footer-links a:hover{color:#d8b8ed}.legal-links{display:grid;gap:10px}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:35px;padding-top:18px;color:#aaa3ad;font-size:13px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.producer-details{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);color:#aaa3ad;font-size:13px;line-height:1.5}.producer-details strong{display:block;color:#d2cdd4;font-weight:600;margin-bottom:5px}.producer-details span{display:block}.producer-details span:last-child{margin-top:3px;color:#b9b2bc} .modal{position:fixed;inset:0;z-index:200;background:rgba(25,19,29,.62);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:.2s}.modal.open{opacity:1;visibility:visible}.modal-box{position:relative;background:#fff;border-radius:28px;width:min(820px,100%);max-height:85vh;overflow:auto;padding:40px}.modal-close{position:absolute;right:16px;top:16px;width:44px;height:44px;border:0;border-radius:50%;background:#f1eff2;font-size:28px;cursor:pointer}.modal-box h2{margin:0 50px 24px 0;font-size:32px}.modal-box h3{font-size:19px;margin:25px 0 8px}.modal-box p{font-size:16px;line-height:1.6;color:#555;margin:0 0 12px} .cookie{position:fixed;left:20px;right:20px;bottom:20px;z-index:150;background:#fff;border:1px solid #ddd;border-radius:20px;box-shadow:0 16px 45px rgba(0,0,0,.16);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px}.cookie p{margin:0;color:#555;font-size:14px;line-height:1.45}.cookie-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}.cookie button{border:0;border-radius:999px;font-weight:800;padding:12px 22px;cursor:pointer;white-space:nowrap;transition:transform .2s ease,background .2s ease}.cookie button:hover{transform:translateY(-1px)}.cookie-accept{background:var(--purple);color:#fff}.cookie-reject{background:#f0eef2;color:#555}.cookie-reject:hover{background:#e6e1e9}.to-top{position:fixed;right:24px;bottom:24px;z-index:140;width:58px;height:58px;border:0;border-radius:50%;background:var(--purple);color:#fff;font-size:27px;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:.2s;box-shadow:0 10px 25px rgba(141,85,184,.25)}.to-top.show{opacity:1;visibility:visible;transform:none} /* Contact phone: keep the long multi-channel number inside the button on narrow screens */ .contact-box .contact-phone{white-space:normal !important;overflow-wrap:anywhere;word-break:normal;text-align:center;line-height:1.25;height:auto;min-width:0;padding:12px 18px !important;} .contact-box .contact-actions{min-width:0;width:100%;} .contact-box .contact-actions .contact-btn{min-width:0;box-sizing:border-box;} @media(max-width:900px){ .contact-box .contact-phone{font-size:15px;line-height:1.25;padding:12px 16px !important;} } @media(max-width:560px){ .contact-box .contact-phone{font-size:14px;padding:12px 14px !important;} } /* Multi-channel phone: the note is strictly below the phone number */ .contact-phone{flex-wrap:wrap !important;align-content:center;} .contact-phone .phone-number{white-space:nowrap;margin-left:8px;} .contact-phone .phone-note{flex:0 0 100%;width:100%;display:block;font-size:.82em;line-height:1.55;margin-top:4px;white-space:nowrap;text-align:center;} @media(max-width:560px){ .contact-box .contact-phone .phone-note{font-size:.84em;line-height:1.6;margin-top:4px;} } html,body{overflow-x:hidden;} /* Final mobile contact buttons: same typography and slightly narrower width */ @media(max-width:900px){ .contact-box .contact-actions{width:calc(100% - 18px);margin-left:auto;margin-right:auto;} .contact-box .contact-btn{width:100%;font-family:inherit;font-size:15px;font-weight:800;letter-spacing:0;} } @media(max-width:560px){ .contact-box .contact-actions{width:calc(100% - 14px);} .contact-box .contact-btn{font-size:15px;} } @media(max-width:900px){.header{padding:22px 14px 26px}.logo{width:230px}.menu-btn{width:58px;height:58px}.menu-icon,.menu-icon::before,.menu-icon::after{width:27px;height:3px}.menu-icon::before{top:-9px}.menu-icon::after{top:9px}.hero{padding:0 12px 65px}.hero-card{min-height:720px;border-radius:22px;padding:30px 22px 250px}.hero-copy{width:100%;max-width:100%}.hero h1{font-size:clamp(29px,7vw,50px);margin-bottom:18px}.hero-lead{font-size:clamp(16px,4.3vw,25px);margin-bottom:22px}.hero-text,.hero-note{font-size:clamp(13px,3.4vw,18px)}.hero-text{margin-bottom:18px}.hero-note{max-width:230px}.hero-person{width:92%;right:-6%}.hero-actions{left:22px;bottom:18px;right:22px;display:grid;grid-template-columns:1fr 1fr}.hero-actions .contact-btn{min-height:46px;padding:0 10px;font-size:13px}.section{padding:65px 12px 50px}.section-title{font-size:36px;margin-bottom:35px}.category-grid{gap:8px 40px;margin-bottom:50px}.category-link{font-size:18px}.product-card{flex-basis:78vw;min-height:540px;border-radius:20px}.product-media{height:320px;padding:12px 28px 0}.product-info{padding:10px 22px 30px}.product-info h3{font-size:25px}.product-info p{font-size:15px}.rail-controls{gap:30px;margin-top:22px}.rail-btn{width:56px;height:56px;font-size:32px}.important{padding-top:55px}.important-intro{font-size:19px;margin-bottom:75px;max-width:620px}.features{gap:82px}.feature img{width:78px;height:78px;margin-bottom:25px}.feature h3{font-size:25px;margin-bottom:14px}.feature p{font-size:17px;max-width:650px}.about-box{grid-template-columns:1fr;padding:28px;border-radius:22px}.about-copy h2{font-size:34px}.about-visual{min-height:320px}.contact-box{padding:32px 24px;display:block;border-radius:22px}.contact-box h2{font-size:34px}.contact-box .contact-actions{margin-top:22px;display:grid}.contact-box .contact-btn{width:100%}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.cookie{left:10px;right:10px;bottom:10px;display:block;padding:14px}.cookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.cookie button{width:100%;margin-top:0}.to-top{right:14px;bottom:88px;width:50px;height:50px}} @media(max-width:560px){.category-grid{grid-template-columns:1fr;gap:12px;max-width:360px;margin-bottom:54px}.category-link{width:100%;min-height:52px}.logo{width:190px}.menu-sheet{padding:22px 18px}.menu-nav a{font-size:19px;padding:14px 12px}.hero-card{min-height:640px}.hero-person{width:108%;right:-11%}.hero-actions{grid-template-columns:1fr;gap:8px}.hero-actions .contact-btn{min-height:42px}.product-card{flex-basis:84vw;min-height:510px}.product-media{height:300px}.footer-grid{grid-template-columns:1fr}.modal-box{padding:28px 22px}} /* ====== Revision 3: responsive/menu/carousel/hero fixes ====== */ /* Final product-card sizing: keep every package fully visible inside the media box. */ .product-media{overflow:hidden;display:flex;align-items:center;justify-content:center;padding:18px 34px 8px;box-sizing:border-box;} .product-media img{display:block;width:auto;height:auto;max-width:78%;max-height:82%;object-fit:contain;flex:0 0 auto;} @media(max-width:900px){.product-media{height:300px;padding:16px 28px 8px;} .product-media img{max-width:72%;max-height:76%;}} @media(max-width:560px){.product-media{height:285px;padding:12px 24px 8px;} .product-media img{max-width:68%;max-height:72%;}} @media (min-width:901px){ .menu-btn{display:none!important} } /* Product cards: keep the package inside its media area and always keep text above it. */ .product-card{min-height:0;height:auto;overflow:hidden} .product-media{position:relative;z-index:1;flex:0 0 430px;overflow:hidden;background:var(--light)} .product-media img{position:relative;z-index:1;display:block;max-width:100%;max-height:100%;height:100%;width:100%;object-fit:contain} .product-info{position:relative;z-index:5;flex:0 0 auto;min-height:170px;background:var(--light);padding:18px 42px 40px} .product-info p{position:relative;z-index:6} /* Hero: text continuously wraps around the actual silhouette of the person + dog. */ .hero-card{min-height:0;overflow:hidden} .hero-copy{width:100%;max-width:none;display:block;overflow:visible} .hero-person{ position:relative!important; float:right; right:auto!important; bottom:auto!important; width:min(50%,620px); max-width:50%; height:auto; margin:250px -1% 18px 34px; z-index:1; /* Use the transparent silhouette, not the rectangular image box, as the wrap shape. */ shape-outside:url("assets/images/hero-person.png"); shape-margin:10px; shape-image-threshold:0.02; filter:drop-shadow(0 20px 14px rgba(0,0,0,.10)); } .hero-copy h1,.hero-copy p{position:relative;z-index:2} .hero-copy:after{content:"";display:block;clear:both} .hero h1{max-width:100%} .hero-lead,.hero-text,.hero-note{max-width:none} /* Menu contacts */ .menu-actions{gap:10px} .contact-phone{background:#eef1f6;color:#44536b} .contact-email{background:#f3edf8;color:#6b398c} .menu-actions .contact-btn{font-size:15px;line-height:1.2;text-align:center;padding:10px 14px} /* Auto carousel state */ .product-rail{scroll-behavior:smooth;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.product-rail img{user-select:none;-webkit-user-drag:none;pointer-events:none} @media (max-width:900px){ .hero-card{padding:30px 22px 42px} .hero-person{ width:68%;max-width:68%; margin:220px -5% 12px 22px; shape-margin:8px; } .product-media{flex-basis:320px;height:320px} .product-info{min-height:180px;padding:16px 22px 30px} .menu-actions .contact-btn{font-size:14px} } @media (max-width:560px){ .hero-card{padding:24px 18px 34px} .hero-person{ width:72%;max-width:72%; margin:210px -7% 10px 16px; shape-margin:7px; } .product-media{flex-basis:300px;height:300px} .product-info{min-height:170px;padding:14px 18px 26px} } @media (max-width:390px){ .hero-person{width:70%;max-width:70%;margin-top:200px;margin-right:-6%;} .hero h1{font-size:29px} .hero-lead{font-size:16px} .hero-text,.hero-note{font-size:13px} } /* ===== Product card drill-down / description ===== */ .product-card{cursor:pointer;transition:transform .25s ease,box-shadow .25s ease} .product-card:focus-visible{outline:3px solid rgba(118,91,169,.45);outline-offset:4px} .product-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(53,43,65,.10)} .product-card.is-detail-open{cursor:default;box-shadow:0 18px 42px rgba(53,43,65,.14)} .product-detail{display:none;background:#fff;border-top:1px solid rgba(101,94,110,.12);padding:28px 42px 36px;scroll-margin-top:90px} .product-card.is-detail-open .product-detail{display:block;animation:detailIn .32s ease both} .product-detail-kicker{margin:0 0 8px;font-size:15px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#744197} .product-detail h4{margin:0 0 12px;font-size:clamp(24px,2.2vw,34px);line-height:1.12;color:#3f3d42} .product-detail p{margin:0;color:#626067;font-size:18px;line-height:1.45} .product-detail-hint{margin-top:16px;font-size:14px;color:#8b8790} .product-detail-close{position:fixed;z-index:1200;top:18px;right:18px;display:none;border:0;border-radius:999px;background:#fff;color:#5f3a78;box-shadow:0 10px 30px rgba(25,18,31,.18);padding:11px 17px;font:700 14px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer} .product-detail-close.show{display:block;animation:detailCloseIn .22s ease both} @keyframes detailIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes detailCloseIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} @media(max-width:900px){ .product-detail{padding:24px 22px 30px;scroll-margin-top:75px} .product-detail p{font-size:16px;line-height:1.45} .product-detail-close{top:12px;right:12px;padding:10px 14px} } @media(max-width:560px){ .product-card:hover{transform:none;box-shadow:none} .product-detail{padding:22px 18px 28px} .product-detail h4{font-size:24px} .product-detail p{font-size:15px} } /* ===== Product cards: reference layout ===== */ .product-rail{align-items:flex-start;padding:12px 8px 18px;} .product-card{flex:0 0 min(430px,48vw);min-height:0;height:auto;background:transparent;border-radius:0;overflow:visible;display:flex;flex-direction:column;scroll-snap-align:center;cursor:pointer;} .product-body{height:430px;background:#f2f2f4;border-radius:28px;overflow:hidden;display:flex;flex-direction:column;position:relative;} .product-media{height:285px;flex:0 0 285px;background:transparent;padding:10px 34px 0;display:grid;place-items:end center;overflow:hidden;} .product-media img{height:88%;width:auto;max-width:88%;max-height:88%;object-fit:contain;filter:drop-shadow(0 18px 12px rgba(0,0,0,.14));} .product-info{padding:0 28px 28px;text-align:center;background:transparent;flex:1;display:flex;align-items:flex-start;justify-content:center;} .product-info p{font-size:22px;line-height:1.12;color:#66646a;font-weight:600;margin:0;max-width:360px;} .product-tag{display:none!important;} .product-name{padding:18px 8px 0;text-align:center;background:transparent;} .product-name h3{font-size:clamp(22px,2vw,30px);line-height:1.15;margin:0;font-weight:700;color:#4d4b50;} .product-card:hover .product-body{transform:translateY(-2px);box-shadow:0 14px 32px rgba(53,43,65,.10);} .product-body{transition:transform .25s ease,box-shadow .25s ease;} .product-card.is-detail-open .product-body{box-shadow:0 18px 42px rgba(53,43,65,.14);} .product-detail{margin-top:16px;border-radius:22px;background:#fff;border:1px solid rgba(101,94,110,.12);padding:28px 32px 34px;scroll-margin-top:90px;} .product-detail h4{margin:0 0 12px;font-size:clamp(24px,2.2vw,34px);line-height:1.12;color:#3f3d42;} .product-detail p{margin:0;color:#626067;font-size:18px;line-height:1.45;} @media(max-width:900px){ .product-card{flex-basis:78vw;} .product-body{height:390px;border-radius:22px;} .product-media{height:260px;flex-basis:260px;padding:8px 26px 0;} .product-media img{height:88%;max-width:88%;} .product-info{padding:0 20px 24px;} .product-info p{font-size:19px;line-height:1.12;} .product-name{padding-top:14px;} .product-name h3{font-size:23px;} } @media(max-width:560px){ .product-card{flex-basis:82vw;} .product-body{height:345px;border-radius:20px;} .product-media{height:225px;flex-basis:225px;padding:6px 22px 0;} .product-media img{height:86%;max-width:86%;} .product-info{padding:0 18px 20px;} .product-info p{font-size:17px;line-height:1.13;max-width:280px;} .product-name{padding-top:12px;} .product-name h3{font-size:20px;} } /* Product information modal */ .product-modal{position:fixed;inset:0;z-index:1400;background:rgba(24,19,28,.72);display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease} .product-modal.open{opacity:1;visibility:visible;pointer-events:auto} .product-modal-box{position:relative;width:min(1120px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:26px;box-shadow:0 28px 90px rgba(0,0,0,.28);padding:42px 44px 46px;scroll-behavior:smooth} .product-modal-close{position:sticky;top:0;float:right;z-index:3;width:48px;height:48px;border:0;border-radius:50%;background:#ececef;color:#454247;font-size:31px;line-height:1;cursor:pointer;display:grid;place-items:center;margin:-12px -12px 0 12px} .product-modal-close:hover{background:#d9d9dc} .product-modal-top{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(390px,1.1fr);gap:54px;align-items:start;clear:both} .product-modal-media{min-height:420px;display:grid;place-items:center;padding:4px 12px 0} .product-modal-media img{width:100%;height:420px;object-fit:contain;filter:drop-shadow(0 22px 18px rgba(0,0,0,.15))} .product-modal-summary h2{margin:0 0 22px;font-size:clamp(25px,2.3vw,34px);line-height:1.12;color:#151419;font-weight:800} .product-modal-weight{font-size:22px;line-height:1.35;font-weight:800;margin:0 0 34px;color:#19171c} .product-modal-actions{display:grid;gap:18px;max-width:360px} .product-modal-actions a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;border:2px solid #7b469d;color:#7b469d;background:#fff;text-decoration:none;font-size:20px;font-weight:800;transition:.2s} .product-modal-actions a:hover{background:#f5eff8} .product-modal-actions a.store{background:#252123;color:#fff;border-color:#252123} .product-modal-section{margin-top:34px} .product-modal-section h3{font-size:21px;line-height:1.2;margin:0 0 9px;color:#171519;font-weight:800} .product-modal-section p{font-size:16px;line-height:1.28;margin:0;color:#26232a} .product-modal-data{display:grid;grid-template-columns:1fr 1fr;gap:30px 55px;margin-top:26px} .product-modal-data .data-col h4{font-size:18px;margin:0 0 8px;font-weight:800;color:#161419} .product-modal-data .data-col p{font-size:15px;line-height:1.22} .product-modal-badges{margin-top:28px;display:flex;align-items:flex-start;justify-content:flex-start;gap:22px} .product-modal-badges img{width:min(300px,100%);height:auto;display:block} .product-modal-note{font-size:13px;color:#77737b;margin-top:20px} @media(max-width:820px){ .product-modal{padding:10px}.product-modal-box{padding:28px 22px 34px;border-radius:22px;max-height:94vh}.product-modal-top{grid-template-columns:1fr;gap:20px}.product-modal-media{min-height:300px}.product-modal-media img{height:300px}.product-modal-summary h2{font-size:26px}.product-modal-weight{font-size:20px;margin-bottom:24px}.product-modal-actions{max-width:none}.product-modal-actions a{font-size:18px}.product-modal-data{grid-template-columns:1fr;gap:24px}.product-modal-badges{justify-content:center}.product-modal-badges img{max-width:300px} } @media(max-width:520px){.product-modal-box{padding:22px 16px 28px}.product-modal-close{width:42px;height:42px;font-size:27px}.product-modal-media{min-height:250px}.product-modal-media img{height:250px}.product-modal-summary h2{font-size:23px}.product-modal-section p{font-size:14px}.product-modal-data .data-col p{font-size:14px}} /* FINAL PRODUCT SECTION LAYOUT — reference mobile composition */ .product-section .category-grid, #products .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));} #products .category-link{ appearance:none; -webkit-appearance:none; border:0; background:transparent; box-shadow:none; color:var(--purple,#6f3aa8); min-height:0; width:auto; padding:0; border-radius:0; font-weight:600; text-align:left; justify-self:start; cursor:pointer; transition:color .2s ease, transform .2s ease; } #products .category-link:hover{background:transparent;color:#51247e;transform:none;box-shadow:none;} #products .category-link.is-active{background:transparent;color:var(--purple,#6f3aa8);box-shadow:none;font-weight:700;} #products .product-rail{ align-items:flex-start; gap:36px; overflow-x:hidden; padding:12px 8px 18px; scroll-snap-type:none; } #products .product-card{ flex:0 0 430px; width:430px; min-height:0; height:auto; background:transparent; border-radius:0; overflow:visible; } #products .product-body{ width:100%; height:430px; border-radius:28px; background:#f2f2f4; overflow:hidden; display:flex; flex-direction:column; } #products .product-media{ height:285px; flex:0 0 285px; padding:10px 34px 0; display:grid; place-items:center; overflow:hidden; background:transparent; } #products .product-media img{ display:block; width:auto; height:auto; max-width:78%; max-height:82%; object-fit:contain; filter:drop-shadow(0 18px 12px rgba(0,0,0,.14)); } #products .product-info{ flex:1; min-height:0; padding:0 28px 28px; display:flex; align-items:flex-start; justify-content:center; text-align:center; background:transparent; } #products .product-info p{ margin:0; max-width:360px; color:#66646a; font-size:22px; line-height:1.12; font-weight:600; } #products .product-name{padding:18px 8px 0;text-align:center;background:transparent;} #products .product-name h3{margin:0;color:#4d4b50;font-size:26px;line-height:1.15;font-weight:700;} @media (max-width:900px){ #products .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 46px;max-width:330px;margin-left:auto;margin-right:auto;margin-bottom:58px;} #products .category-link{font-size:18px;justify-self:start;} #products .product-rail{gap:36px;padding:12px 0 18px;overflow-x:hidden;} #products .product-card{flex:0 0 300px;width:300px;} #products .product-body{height:390px;border-radius:22px;} #products .product-media{height:260px;flex-basis:260px;padding:8px 26px 0;} #products .product-media img{max-width:76%;max-height:80%;} #products .product-info{padding:0 20px 24px;} #products .product-info p{font-size:19px;line-height:1.12;max-width:280px;} #products .product-name{padding-top:14px;} #products .product-name h3{font-size:23px;} } @media (max-width:560px){ #products .section-title{font-size:36px;margin-bottom:34px;} #products .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 38px;max-width:292px;margin-bottom:74px;} #products .category-link{font-size:17px;line-height:1.2;white-space:nowrap;} #products .product-rail{gap:36px;padding:0 0 12px;margin:0;overflow-x:hidden;} #products .product-card{flex:0 0 218px;width:218px;} #products .product-body{height:345px;border-radius:20px;} #products .product-media{height:225px;flex-basis:225px;padding:6px 18px 0;} #products .product-media img{max-width:74%;max-height:74%;} #products .product-info{padding:0 10px 18px;} #products .product-info p{font-size:17px;line-height:1.13;max-width:205px;} #products .product-name{padding-top:12px;} #products .product-name h3{font-size:20px;} #products .rail-controls{gap:42px;margin-top:28px;} #products .rail-btn{width:56px;height:56px;font-size:32px;} } /* ===== Final corrections: product packages, hero social icons, modal product data ===== */ .hero-socials{left:60px;bottom:48px;display:flex;align-items:center;gap:14px;} /* Живые кнопки VK / MAX в hero */ @keyframes heroSocialFloat{ 0%,100%{transform:translateY(0) scale(1) rotate(0deg);box-shadow:0 10px 24px rgba(35,25,45,.16);} 25%{transform:translateY(-4px) scale(1.035) rotate(-1deg);box-shadow:0 14px 29px rgba(35,25,45,.20);} 50%{transform:translateY(-1px) scale(1.015) rotate(1deg);box-shadow:0 11px 26px rgba(35,25,45,.18);} 75%{transform:translateY(-5px) scale(1.03) rotate(-.7deg);box-shadow:0 15px 31px rgba(35,25,45,.21);} } @keyframes heroSocialIcon{ 0%,100%{transform:scale(1) rotate(0deg);} 35%{transform:scale(1.08) rotate(-4deg);} 65%{transform:scale(1.04) rotate(4deg);} } .hero-social{ width:58px;height:58px;border-radius:50%;display:grid;place-items:center; background:#fff;color:#8d55b8; box-shadow:0 10px 24px rgba(35,25,45,.16); transition:transform .2s ease,box-shadow .2s ease; overflow:hidden; animation:heroSocialFloat 3.2s ease-in-out infinite; will-change:transform,box-shadow; } .hero-social:nth-child(2){animation-delay:1.15s;} .hero-social:hover{ animation-play-state:paused; transform:translateY(-5px) scale(1.1) !important; box-shadow:0 16px 34px rgba(35,25,45,.25); } .hero-social svg{ width:30px;height:30px;display:block; animation:heroSocialIcon 2.8s ease-in-out infinite; } .hero-social-max img{ width:42px;height:42px;object-fit:contain; animation:heroSocialIcon 2.8s ease-in-out infinite .35s; } .hero-social:active{transform:scale(.94) !important;animation-play-state:paused;} @media (prefers-reduced-motion:reduce){ .hero-social,.hero-social svg,.hero-social-max img{animation:none!important;} } .product-body{height:430px!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;} .product-media{flex:0 0 315px!important;height:315px!important;min-height:315px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:14px 22px 4px!important;overflow:hidden!important;} .product-media img{width:auto!important;height:auto!important;max-width:92%!important;max-height:96%!important;object-fit:contain!important;flex:0 0 auto!important;} .product-info{flex:1 1 auto!important;min-height:0!important;padding:6px 20px 18px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;background:var(--light)!important;} .product-info p{margin:0!important;max-width:92%!important;font-size:18px!important;line-height:1.18!important;text-align:center!important;} @media(max-width:900px){ .hero-socials{left:28px;bottom:34px;gap:12px;} .hero-social{width:54px;height:54px;} .product-body{height:390px!important;} .product-media{flex-basis:275px!important;height:275px!important;min-height:275px!important;padding:12px 18px 4px!important;} .product-media img{max-width:90%!important;max-height:95%!important;} .product-info{padding:4px 16px 16px!important;} .product-info p{font-size:17px!important;line-height:1.16!important;} } @media(max-width:560px){ .hero-socials{left:22px;bottom:26px;gap:10px;} .hero-social{width:50px;height:50px;} .hero-social svg{width:27px;height:27px;} .hero-social-max img{width:36px;height:36px;} .product-card{flex-basis:78vw!important;} .product-body{height:350px!important;border-radius:20px!important;} .product-media{flex-basis:245px!important;height:245px!important;min-height:245px!important;padding:10px 14px 3px!important;} .product-media img{max-width:88%!important;max-height:95%!important;} .product-info{padding:3px 10px 12px!important;} .product-info p{font-size:16px!important;line-height:1.14!important;max-width:94%!important;} } .product-modal-section + .product-modal-section{margin-top:26px;} .product-modal-section h3{margin-bottom:10px;} /* HERO FINAL: continuous text wrap around person + dog; social icons do not cover copy */ .hero-card{min-height:0!important;overflow:hidden!important;} .hero-copy{width:100%!important;max-width:none!important;display:flow-root!important;overflow:visible!important;} .hero-person{position:relative!important;float:right!important;right:auto!important;bottom:auto!important;width:min(52%,760px)!important;max-width:52%!important;height:auto!important;margin:6px -2% 8px 28px!important;z-index:1!important;shape-outside:polygon(18% 0,76% 0,94% 10%,100% 28%,96% 58%,100% 82%,90% 100%,12% 100%,0 82%,8% 58%,7% 32%)!important;clip-path:none!important;} .hero h1,.hero-lead{position:relative!important;z-index:2!important;} .hero-text,.hero-note{position:relative!important;z-index:2!important;max-width:none!important;} .hero-actions.hero-socials{position:relative!important;left:auto!important;bottom:auto!important;right:auto!important;display:flex!important;width:max-content!important;margin:8px 0 18px auto!important;z-index:4!important;clear:none!important;} @media(max-width:900px){ .hero-card{padding:30px 22px 34px!important;} .hero-person{width:57%!important;max-width:57%!important;margin:8px -5% 6px 18px!important;shape-outside:polygon(20% 0,76% 0,94% 12%,100% 30%,98% 58%,100% 82%,88% 100%,10% 100%,0 78%,8% 50%,8% 26%)!important;} .hero-socials{gap:10px!important;} .hero-social{width:50px!important;height:50px!important;} .hero-social svg{width:27px!important;height:27px!important;} .hero-social-max img{width:36px!important;height:36px!important;} } @media(max-width:560px){ .hero-card{padding:26px 18px 28px!important;} .hero-person{width:59%!important;max-width:59%!important;margin:10px -7% 4px 14px!important;shape-outside:polygon(22% 0,78% 0,95% 13%,100% 32%,98% 58%,100% 83%,88% 100%,9% 100%,0 79%,7% 51%,8% 27%)!important;} .hero-socials{margin:4px 0 16px auto!important;} } /* FINAL PATCH: hero silhouette wrap + seamless one-direction carousel */ .hero-copy{display:flow-root!important;} .hero-person{ width:min(62%,820px)!important; max-width:62%!important; margin:170px -2% 10px 34px!important; shape-outside:polygon(18% 0,48% 0,72% 4%,88% 14%,96% 28%,100% 46%,96% 63%,100% 78%,92% 90%,78% 100%,42% 100%,18% 94%,5% 82%,0 66%,6% 50%,8% 35%,12% 18%)!important; shape-margin:8px!important; } .hero-text,.hero-note{max-width:none!important;} @media(max-width:900px){ .hero-person{width:66%!important;max-width:66%!important;margin:150px -7% 8px 22px!important;shape-outside:polygon(18% 0,50% 0,74% 5%,90% 16%,98% 31%,100% 49%,96% 66%,100% 80%,91% 92%,76% 100%,42% 100%,18% 95%,5% 82%,0 66%,6% 50%,8% 33%,12% 17%)!important;shape-margin:7px!important;} } @media(max-width:560px){ .hero-person{width:72%!important;max-width:72%!important;margin:135px -10% 8px 18px!important;shape-outside:polygon(17% 0,48% 0,73% 5%,89% 16%,98% 31%,100% 49%,96% 66%,100% 81%,90% 93%,75% 100%,40% 100%,17% 95%,4% 82%,0 65%,6% 49%,8% 32%,12% 16%)!important;shape-margin:6px!important;} } .product-rail{scroll-snap-type:none!important;} /* ===== Final hero wrap + one-way carousel correction ===== */ .hero-person{ width:min(64%,760px)!important; max-width:64%!important; margin:210px -1% 14px 30px!important; float:right!important; } .hero-socials{ position:absolute!important; right:22px!important; left:auto!important; bottom:20px!important; display:flex!important; gap:8px!important; z-index:8!important; } .hero-social{ width:46px!important; height:46px!important; min-height:46px!important; padding:0!important; border-radius:50%!important; display:grid!important; place-items:center!important; background:#fff!important; color:var(--purple)!important; box-shadow:0 6px 16px rgba(0,0,0,.12)!important; } .hero-social svg{width:22px!important;height:22px!important} .hero-social-max img{width:28px!important;height:28px!important;object-fit:contain!important} @media(max-width:900px){ .hero-card{padding-bottom:35px!important} .hero-person{width:78%!important;max-width:78%!important;margin:185px -2% 12px 24px!important} .hero-socials{right:18px!important;bottom:16px!important} } @media(max-width:560px){ .hero-person{width:84%!important;max-width:84%!important;margin:175px -3% 10px 20px!important} .hero-social{width:42px!important;height:42px!important;min-height:42px!important} .hero-social svg{width:20px!important;height:20px!important} .hero-social-max img{width:25px!important;height:25px!important} } /* ===== Hero wrap: match the reference silhouette and natural word flow ===== */ .hero-card{overflow:hidden;} .hero-copy{width:100%;max-width:none;display:block;overflow:visible;} .hero-person{ position:relative !important; float:right !important; right:auto !important; bottom:auto !important; width:68% !important; max-width:760px !important; height:auto !important; margin:112px -4% 8px 16px !important; z-index:1 !important; shape-outside:polygon(55% 4%,51% 10%,45% 15%,46% 21%,35% 27%,18% 32%,10% 38%,8% 44%,8% 49%,8% 55%,8% 60%,9% 66%,10% 72%,10% 77%,7% 83%,5% 89%,1% 94%,1% 100%,95% 100%,92% 94%,89% 89%,88% 83%,100% 77%,99% 72%,97% 66%,93% 60%,89% 55%,85% 49%,82% 44%,76% 38%,69% 32%,74% 27%,80% 21%,81% 15%,81% 10%,76% 4%); -webkit-shape-outside:polygon(55% 4%,51% 10%,45% 15%,46% 21%,35% 27%,18% 32%,10% 38%,8% 44%,8% 49%,8% 55%,8% 60%,9% 66%,10% 72%,10% 77%,7% 83%,5% 89%,1% 94%,1% 100%,95% 100%,92% 94%,89% 89%,88% 83%,100% 77%,99% 72%,97% 66%,93% 60%,89% 55%,85% 49%,82% 44%,76% 38%,69% 32%,74% 27%,80% 21%,81% 15%,81% 10%,76% 4%); shape-margin:3px; filter:drop-shadow(0 18px 12px rgba(0,0,0,.10)); } .hero-copy h1,.hero-copy .hero-lead{position:relative;z-index:3;} .hero-copy .hero-text,.hero-copy .hero-note{position:relative;z-index:2;max-width:none;} .hero-text,.hero-note{overflow:visible;} .hero-actions{position:relative !important;left:auto !important;bottom:auto !important;clear:both;display:flex;gap:10px;z-index:4;margin-top:4px;} @media(max-width:900px){ .hero-card{padding:30px 22px 30px;} .hero-person{width:72% !important;max-width:72% !important;margin:118px -7% 6px 10px !important;shape-margin:3px;} } @media(max-width:560px){ .hero-card{padding:24px 18px 28px;} .hero-person{width:73% !important;max-width:73% !important;margin:110px -8% 4px 8px !important;} } @media(max-width:390px){ .hero-person{width:75% !important;max-width:75% !important;margin-top:104px !important;margin-right:-9% !important;} } /* ===== HERO — reference composition ===== */ .hero-card{overflow:hidden!important;min-height:0!important;} .hero-copy{width:100%!important;max-width:none!important;display:flow-root!important;position:relative!important;z-index:2!important;} .hero h1,.hero-lead,.hero-text,.hero-note{position:relative!important;z-index:3!important;max-width:none!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important;white-space:normal!important;} .hero-text{margin-bottom:0!important;} .hero-person{float:right!important;position:relative!important;right:auto!important;bottom:auto!important;z-index:1!important;display:block!important;width:76%!important;max-width:76%!important;height:auto!important;margin:0 -5% 0 18px!important;shape-outside:polygon(46% 0%,72% 0%,79% 10%,80% 20%,84% 30%,90% 40%,94% 50%,96% 62%,98% 74%,100% 88%,100% 100%,8% 100%,14% 92%,20% 82%,25% 72%,31% 62%,37% 52%,40% 42%,42% 30%,43% 18%)!important;-webkit-shape-outside:polygon(46% 0%,72% 0%,79% 10%,80% 20%,84% 30%,90% 40%,94% 50%,96% 62%,98% 74%,100% 88%,100% 100%,8% 100%,14% 92%,20% 82%,25% 72%,31% 62%,37% 52%,40% 42%,42% 30%,43% 18%)!important;shape-margin:2px!important;-webkit-shape-margin:2px!important;} .hero-note{width:auto!important;margin:26px 0 0!important;font-size:clamp(18px,1.55vw,24px)!important;line-height:1.45!important;font-weight:600!important;} .hero-actions.hero-socials{position:absolute!important;right:18px!important;left:auto!important;bottom:18px!important;z-index:8!important;display:flex!important;gap:8px!important;} .hero-social{width:46px!important;height:46px!important;} @media (min-width:901px){.hero-card{padding:74px 60px 80px!important}.hero-person{width:62%!important;max-width:62%!important;margin-right:-4%!important;margin-left:24px!important}} @media (max-width:900px){.hero-card{padding:30px 26px 34px!important}.hero h1{font-size:clamp(29px,7.1vw,48px)!important;line-height:1.03!important}.hero-lead{font-size:clamp(16px,4.2vw,23px)!important;line-height:1.28!important}.hero-text,.hero-note{font-size:clamp(13px,3.45vw,17px)!important;line-height:1.38!important}.hero-person{width:76%!important;max-width:76%!important;margin-right:-7%!important;margin-left:14px!important}} @media (max-width:560px){.hero-card{padding:26px 22px 30px!important}.hero-person{width:78%!important;max-width:78%!important;margin-right:-9%!important;margin-left:12px!important}.hero-note{margin-top:20px!important}.hero-socials{right:14px!important;bottom:14px!important}.hero-social{width:42px!important;height:42px!important}} @media (max-width:390px){.hero-card{padding-left:18px!important;padding-right:18px!important}.hero-person{width:80%!important;max-width:80%!important;margin-right:-10%!important}} @media (min-width:901px){.menu-btn{display:none!important;}} /* ===== PRODUCTS REFERENCE PASS ===== */ .category-grid{max-width:760px;margin:0 auto 64px;gap:16px 28px;} .category-link{position:relative;min-height:54px;} .category-link:not(.is-active){background:#fff;} .category-link.is-active{transform:translateY(-1px);} .product-rail{scroll-snap-type:none;} .product-card{overflow:visible;} .product-body{overflow:visible;} .product-media{overflow:visible;position:relative;z-index:2;} .product-media img{ height:112%!important; max-height:none!important; width:auto!important; max-width:108%!important; object-fit:contain!important; transform:translateY(-8%) scale(1.05); transform-origin:center bottom; } .product-info{position:relative;z-index:3;} .product-name{position:relative;z-index:4;} .rail-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:16px;min-height:14px;} .rail-dot{width:8px;height:8px;border-radius:50%;border:0;background:#d1d1d4;padding:0;cursor:pointer;transition:transform .2s ease,background .2s ease,opacity .2s ease;} .rail-dot.is-active{background:var(--purple);transform:scale(1.45);} @media(max-width:900px){ .category-grid{margin-bottom:54px;gap:12px 18px;} .product-media{height:285px!important;flex-basis:285px!important;padding-top:4px!important;} .product-media img{height:116%!important;max-width:112%!important;transform:translateY(-9%) scale(1.04);} .rail-dots{margin-top:12px;} } @media(max-width:560px){ .category-grid{gap:10px 14px;} .category-link{font-size:16px!important;min-height:48px!important;padding:10px 12px!important;} .product-media{height:245px!important;flex-basis:245px!important;} .product-media img{height:118%!important;max-width:116%!important;transform:translateY(-10%) scale(1.03);} .product-info{padding-top:0!important;} .product-info p{font-size:17px!important;line-height:1.13!important;} } /* ===== FINAL WORKING CAROUSEL ===== */ #products .product-rail{ position:relative!important; display:block!important; overflow:hidden!important; overflow-x:hidden!important; overflow-y:visible!important; scroll-snap-type:none!important; scroll-behavior:auto!important; padding:12px 0 18px!important; margin:0!important; } #products .product-rail-wrap{ position:relative!important; overflow:visible!important; } #products .carousel-track{ display:flex!important; flex-wrap:nowrap!important; align-items:flex-start!important; gap:36px!important; width:max-content!important; will-change:transform!important; transform:translate3d(0,0,0); transition:transform .78s cubic-bezier(.22,.61,.36,1)!important; } #products .carousel-track .product-card{ flex:0 0 218px!important; width:218px!important; min-width:218px!important; scroll-snap-align:none!important; } @media (min-width:901px){ #products .carousel-track{gap:36px!important;} #products .carousel-track .product-card{ flex-basis:430px!important; width:430px!important; min-width:430px!important; } } @media (max-width:900px){ #products .carousel-track{gap:36px!important;} #products .carousel-track .product-card{ flex-basis:300px!important; width:300px!important; min-width:300px!important; } } @media (max-width:560px){ #products .carousel-track{gap:36px!important;} #products .carousel-track .product-card{ flex-basis:218px!important; width:218px!important; min-width:218px!important; } } .product-modal-badges{ margin-top:28px!important; display:flex!important; align-items:flex-start!important; justify-content:center!important; width:100%!important; } .product-modal-badges img{ display:block!important; width:300px!important; max-width:100%!important; height:auto!important; object-fit:contain!important; } @media(max-width:820px){ .product-modal-badges{margin-top:24px!important} .product-modal-badges img{width:min(300px,100%)!important} } /* ===== Mobile reference layout: sections and typography ===== */ @media (max-width:900px){ #products .section-title{ font-size:36px !important; line-height:1.08 !important; font-weight:800 !important; color:#4b4b4f !important; margin-bottom:34px !important; } #products .category-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; max-width:330px !important; margin:0 auto 68px !important; gap:12px 42px !important; } #products .category-link{ border:0 !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important; min-height:0 !important; padding:0 !important; color:#63358b !important; font-size:18px !important; line-height:1.25 !important; font-weight:400 !important; text-align:left !important; transform:none !important; } #products .category-link:hover, #products .category-link.is-active{ border:0 !important; background:transparent !important; color:#63358b !important; box-shadow:none !important; transform:none !important; } #products .category-link.is-active::after{ content:''; display:block; width:34px; height:2px; margin-top:5px; background:#8b63aa; border-radius:2px; } #products .product-rail{ gap:16px !important; padding:8px 0 16px !important; margin:0 !important; } #products .product-card{ flex:0 0 clamp(165px,44vw,205px) !important; min-height:360px !important; border-radius:18px !important; } #products .product-media{ height:225px !important; padding:8px 10px 0 !important; } #products .product-media img{ max-width:92% !important; max-height:92% !important; } #products .product-info{ padding:8px 12px 22px !important; } #products .product-tag{display:none !important;} #products .product-info h3{ font-size:18px !important; line-height:1.15 !important; font-weight:700 !important; color:#5b5b5f !important; margin:0 !important; } #products .product-info p{font-size:13px !important;line-height:1.25 !important;} #products .rail-controls{ gap:30px !important; margin-top:36px !important; } #products .rail-btn{ width:56px !important; height:56px !important; font-size:32px !important; background:#d2d3d5 !important; } #important{ padding-top:58px !important; padding-bottom:70px !important; } #important .section-title{ font-size:36px !important; line-height:1.08 !important; font-weight:800 !important; color:#4b4b4f !important; margin-bottom:42px !important; } #important .important-intro{ max-width:330px !important; margin:0 auto 86px !important; font-size:18px !important; line-height:1.38 !important; font-weight:700 !important; color:#26262a !important; } #important .features{ max-width:330px !important; gap:104px !important; } #important .feature{ text-align:center !important; } #important .feature img{ width:62px !important; height:62px !important; margin:0 auto 28px !important; } #important .feature p{ max-width:315px !important; margin:0 auto !important; font-size:17px !important; line-height:1.32 !important; font-weight:400 !important; color:#3e3e42 !important; } } @media (max-width:560px){ #products .section-title,#important .section-title{font-size:34px !important;} #products .category-grid{max-width:292px !important;gap:12px 34px !important;margin-bottom:66px !important;} #products .category-link{font-size:17px !important;} #products .product-card{flex-basis:44vw !important;min-height:345px !important;} #products .product-media{height:210px !important;} #products .product-info h3{font-size:17px !important;} #important .important-intro{font-size:18px !important;max-width:315px !important;margin-bottom:82px !important;} #important .features{gap:100px !important;max-width:315px !important;} #important .feature img{width:58px !important;height:58px !important;margin-bottom:26px !important;} #important .feature p{font-size:16.5px !important;line-height:1.34 !important;} } /* === О нас: блок по мобильному эталону === */ .about-reference{ padding:72px 18px 90px; background:#fff; } .about-reference-wrap{ width:100%; max-width:1100px; margin:0 auto; } .about-reference-card{ position:relative; width:min(100%, 1000px); margin:0 auto; min-height:760px; border-radius:28px; background:linear-gradient(155deg,#8174cf 0%,#a15abb 100%); color:#fff; overflow:visible; display:flex; align-items:center; justify-content:center; padding:115px 120px 125px; } .about-reference-content{ width:min(100%, 720px); margin:0 auto; text-align:center; position:relative; z-index:2; } .about-reference-content h2{ margin:0 0 22px; color:#fff; font-size:clamp(34px,4vw,48px); line-height:1.08; font-weight:700; letter-spacing:-.02em; } .about-reference-content p{ margin:0 auto 20px; max-width:720px; color:#fff; font-size:clamp(16px,1.65vw,20px); line-height:1.28; font-weight:400; } .about-reference-content .about-reference-strong{ margin-top:28px; margin-bottom:0; font-weight:700; } .about-reference-photo{ position:absolute; z-index:3; width:220px; height:220px; border-radius:50%; object-fit:cover; object-position:center; display:block; box-shadow:none; } .about-reference-dog{ top:-110px; left:50%; transform:translateX(-50%); } .about-reference-cat{ bottom:-110px; left:50%; transform:translateX(-50%); } /* Не наследуем старую карточную стилизацию about */ .about-reference .about-box, .about-reference .about-copy, .about-reference .about-visual{ all:unset; } @media (max-width:900px){ .about-reference{ padding:68px 25px 92px; } .about-reference-card{ width:100%; min-height:565px; border-radius:18px; padding:105px 28px 105px; } .about-reference-content{ width:100%; } .about-reference-content h2{ font-size:30px; margin-bottom:22px; } .about-reference-content p{ font-size:15.5px; line-height:1.22; margin-bottom:19px; } .about-reference-content .about-reference-strong{ margin-top:25px; font-size:15.5px; } .about-reference-photo{ width:200px; height:200px; } .about-reference-dog{ top:-100px; } .about-reference-cat{ bottom:-100px; } } @media (max-width:520px){ .about-reference{ padding:72px 25px 90px; } .about-reference-card{ min-height:565px; padding:105px 28px 104px; } .about-reference-content h2{ font-size:29px; } .about-reference-content p, .about-reference-content .about-reference-strong{ font-size:15px; } .about-reference-photo{ width:200px; height:200px; } } /* Благодарственные письма и маркетплейсы */ .thanks-section,.marketplaces-section{padding:88px 24px;background:#fff} .thanks-inner,.marketplaces-inner{width:min(100%,980px);margin:0 auto;text-align:center} .section-kicker{margin-bottom:10px;color:#8b54b7;font-size:14px;line-height:1.2;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .thanks-inner h2,.marketplaces-inner h2{margin:0 auto 18px;color:#302d35;font-size:clamp(30px,4vw,48px);line-height:1.08;font-weight:700;letter-spacing:-.025em} .thanks-lead,.marketplaces-lead{max-width:680px;margin:0 auto 28px;color:#55515a;font-size:clamp(16px,1.6vw,19px);line-height:1.45} .diploma-link{border:0;background:none;padding:0;color:#8b54b7;font:inherit;font-size:clamp(16px,1.6vw,19px);font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer} .marketplaces-section{padding-top:20px} .marketplaces-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:14px} .marketplace-btn{min-width:190px;padding:15px 24px;border-radius:14px;border:1px solid #d9cbe5;background:#fff;color:#413c45;text-decoration:none;font-size:17px;font-weight:700;box-shadow:0 8px 24px rgba(70,50,90,.08);transition:.2s} .marketplace-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(70,50,90,.13);background:#faf7fc} .diploma-modal{display:none;align-items:center;justify-content:center;padding:18px;z-index:10050} .diploma-modal.is-open{display:flex} .diploma-backdrop{position:absolute;inset:0;background:rgba(25,20,30,.78)} .diploma-dialog{position:relative;z-index:2;width:min(1100px,96vw);max-height:94vh;padding:54px 52px 30px;border-radius:24px;background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.3)} .diploma-close{position:absolute;right:14px;top:10px;width:42px;height:42px;border:0;border-radius:50%;background:#f2eef5;color:#39333d;font-size:30px;cursor:pointer} .diploma-stage{display:grid;grid-template-columns:54px minmax(0,1fr) 54px;align-items:center;gap:12px;min-height:70vh;padding:14px;border-radius:18px;background:#f7f5f8;box-sizing:border-box} .diploma-frame{position:relative;height:68vh;min-height:420px;max-height:75vh;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px;background:#f7f5f8;box-sizing:border-box} #diplomaImage{display:none;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} #diplomaImage.is-visible{display:block} .diploma-empty{max-width:520px;padding:40px;color:#68616d;text-align:center;font-size:17px;line-height:1.5} .diploma-arrow{width:50px;height:50px;border:0;border-radius:50%;background:#eeeaf1;color:#4b4650;font-size:38px;cursor:pointer} .diploma-caption{min-height:24px;margin-top:14px;color:#55515a;text-align:center;font-size:15px} .diploma-dots{display:flex;justify-content:center;gap:7px;margin-top:10px} .diploma-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#d3ccd8;cursor:pointer} .diploma-dots button.active{background:#8b54b7} @media(max-width:700px){ .thanks-section,.marketplaces-section{padding:68px 20px} .marketplace-btn{width:100%;min-width:0} .diploma-dialog{width:100%;padding:52px 12px 22px;border-radius:18px} .diploma-stage{grid-template-columns:38px minmax(0,1fr) 38px;gap:5px} .diploma-stage{min-height:70vh;padding:8px;border-radius:14px}.diploma-frame{height:66vh;min-height:0;max-height:none}.diploma-arrow{width:36px;height:36px;font-size:29px} } /* === Блок благодарностей + маркетплейсов по эталону === */ .thanks-marketplace-reference{ width:100%; padding:46px 20px 64px; background:#fff; } .thanks-marketplace-inner{ width:min(100%,620px); margin:0 auto; text-align:center; } .thanks-marketplace-icon{ display:block; width:112px; height:112px; margin:0 auto 28px; object-fit:contain; } .thanks-marketplace-copy{ margin:0 auto; color:#4b4850; font-family:inherit; font-size:18px; line-height:1.28; font-weight:400; letter-spacing:0; } .thanks-marketplace-copy strong{ font-weight:700; color:#36333a; } .thanks-marketplace-link{ display:inline; margin:0; padding:0; border:0; background:none; color:#9a35c4; font:inherit; font-weight:700; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; cursor:pointer; } .thanks-marketplace-buttons{ width:min(100%,440px); margin:48px auto 0; display:flex; flex-direction:column; gap:44px; } .thanks-marketplace-btn{ display:flex; align-items:center; justify-content:center; width:100%; min-height:46px; padding:8px 18px; background:#9636bf; color:#fff; border:0; border-radius:0; text-decoration:none; font-family:inherit; font-size:17px; line-height:1.15; font-weight:700; transition:transform .2s ease,filter .2s ease; } .thanks-marketplace-btn:hover{ transform:translateY(-1px); filter:brightness(.96); } @media(max-width:700px){ .thanks-marketplace-reference{ padding:54px 46px 60px; } .thanks-marketplace-icon{ width:112px; height:112px; margin-bottom:27px; } .thanks-marketplace-copy{ font-size:16px; line-height:1.28; } .thanks-marketplace-buttons{ margin-top:48px; gap:44px; } .thanks-marketplace-btn{ min-height:34px; font-size:16px; } } @media(min-width:701px){ .thanks-marketplace-buttons{ width:420px; } } @media(min-width:1200px){ .awards-after-about .thanks-marketplace-inner{ width:760px; max-width:760px; display:grid; grid-template-columns:130px minmax(0,1fr); column-gap:30px; align-items:start; text-align:left; } .awards-after-about .thanks-marketplace-icon{ width:112px; height:112px; margin:0; justify-self:start; } .awards-after-about .thanks-marketplace-copy{ margin:0; text-align:left; font-size:18px; line-height:1.28; } .awards-after-about .thanks-marketplace-buttons{ grid-column:2; width:420px; margin:38px 0 0; } } /* Блок благодарностей расположен непосредственно после «О нас» */ .awards-after-about{ padding-top:38px !important; padding-bottom:58px !important; } .awards-after-about .thanks-marketplace-icon{ margin-bottom:22px; } .awards-after-about .thanks-marketplace-buttons{ margin-top:38px; } @media(max-width:700px){ .awards-after-about{ padding-top:32px !important; padding-bottom:52px !important; } .awards-after-about .thanks-marketplace-icon{ width:112px; height:112px; margin-bottom:22px; } .awards-after-about .thanks-marketplace-buttons{ margin-top:38px; } }