/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */ :root{--orange:#f7a51a;--ink:#0c0e0f;--soft:#f5f3ef;--line:#ffffff21}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--ink);color:#fff;margin:0;font-family:Inter,Arial,sans-serif;font-weight:400}a{color:inherit;text-decoration:none}button{font:inherit}.mobile-only{display:none!important}.site-header{z-index:50;background:#0d1112;position:relative}.topline{border-bottom:1px solid var(--line);color:#aeb3b3;letter-spacing:.16em;justify-content:space-between;align-items:center;height:30px;padding:0 3.4vw;font-size:10px;display:flex}.topline p{margin:0}.topline div{align-items:center;gap:22px;display:flex}.topline a{color:var(--orange);letter-spacing:.13em}.nav-row{align-items:center;gap:28px;height:82px;padding:0 3.4vw;display:flex}.logo{flex:0 0 235px;align-items:center;height:58px;display:flex;overflow:hidden}.logo img{object-fit:contain;width:100%;height:100%;display:block}.desktop-nav{white-space:nowrap;flex:1;justify-content:center;align-items:center;gap:clamp(15px,1.55vw,28px);display:flex}.desktop-nav a{color:#d9dddd;font-size:12px;transition:color .2s}.desktop-nav a:hover{color:#fff}.desktop-menu-group{align-items:center;height:82px;display:flex;position:relative}.desktop-menu-group>a{align-items:center;gap:6px;display:flex}.desktop-menu-group>a span{color:var(--orange);font-size:15px;line-height:1;transition:transform .2s}.desktop-submenu{z-index:80;opacity:0;visibility:hidden;pointer-events:none;background:#111516;border:1px solid #ffffff1f;flex-direction:column;min-width:285px;padding:10px;transition:opacity .2s,transform .2s,visibility .2s;display:flex;position:absolute;top:70px;left:-18px;transform:translateY(8px);box-shadow:0 20px 45px #00000057}.desktop-submenu a{white-space:normal;border-bottom:1px solid #ffffff14;padding:12px 13px;line-height:1.35}.desktop-submenu a:last-child{border-bottom:0}.desktop-submenu a:hover{color:var(--orange);background:#ffffff0e}.desktop-menu-group:hover .desktop-submenu,.desktop-menu-group:focus-within .desktop-submenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.desktop-menu-group:hover>a span,.desktop-menu-group:focus-within>a span{transform:rotate(180deg)}.nav-actions{align-items:center;gap:12px;display:flex}.phone{color:#fff;white-space:nowrap;cursor:pointer;font-size:14px;font-weight:450}.icon-button{color:#fff;cursor:pointer;background:0 0;border:1px solid #ffffff2e;border-radius:50%;place-items:center;width:42px;height:42px;padding:10px;display:grid;position:relative}.icon-button svg{width:21px;height:21px}.cart b{background:var(--orange);color:#111;border-radius:50%;place-items:center;width:19px;height:19px;font-size:10px;display:grid;position:absolute;top:-5px;right:-4px}.mobile-contact{display:none}.hero{background:#111;height:calc(100vh - 112px);min-height:610px;max-height:860px;position:relative;overflow:hidden}.hero-slide{opacity:0;pointer-events:none;transition:opacity .7s;position:absolute;inset:0}.hero-slide.is-active{opacity:1;pointer-events:auto}.hero-slide picture,.hero-slide img{width:100%;height:100%;position:absolute;inset:0}.hero-slide img{object-fit:cover;object-position:center}.hero-slide:after{content:"";background:linear-gradient(90deg,#040708eb 0%,#0407089e 47%,#04070800 100%);width:58%;position:absolute;inset:0 auto 0 0}.hero-content{z-index:2;flex-direction:column;justify-content:center;align-items:flex-start;max-width:720px;height:100%;margin-left:clamp(42px,7vw,118px);padding:30px 0 75px;display:flex;position:relative}.eyebrow{max-width:780px;color:var(--orange);letter-spacing:-.035em;text-transform:none;text-shadow:0 2px 18px #00000059;margin:0 0 18px;font-size:clamp(48px,5.5vw,88px);font-weight:330;line-height:1}.hero-slogan{color:#fff;letter-spacing:-.025em;text-shadow:0 2px 15px #0006;max-width:650px;margin:0;font-size:clamp(24px,2.15vw,35px);font-weight:390;line-height:1.12}.hero-slogan span{color:#fff}.hero-copy{color:#e2e4e4;max-width:565px;margin:25px 0 31px;font-size:16px;line-height:1.65}.primary-button{color:#fff;background:0 0;border:1px solid #ffffffd9;border-radius:2px;align-items:center;gap:45px;min-height:54px;padding:0 26px;font-size:14px;font-weight:550;transition:background .2s,border-color .2s,transform .2s;display:inline-flex}.primary-button:hover{border-color:var(--orange);background:#f7a51a29;transform:translateY(-2px)}.primary-button span{font-size:20px;font-weight:300}.hero-controls{z-index:4;gap:9px;display:flex;position:absolute;bottom:43px;left:clamp(42px,7vw,118px)}.hero-controls button{cursor:pointer;background:#ffffff61;border:0;width:38px;height:3px;padding:0}.hero-controls button[aria-current=true]{background:var(--orange)}.hero-arrows{z-index:4;gap:10px;display:flex;position:absolute;bottom:33px;right:3.4vw}.hero-arrows button{color:#fff;cursor:pointer;background:#0000002e;border:1px solid #ffffff73;width:48px;height:48px}.categories-section{background:#0d1112;padding:88px 3.4vw 108px}.section-heading{max-width:1480px;margin:0 auto 34px}.section-heading>p{color:var(--orange);letter-spacing:.23em;margin:0 0 12px;font-size:10px}.section-heading h2{letter-spacing:-.03em;margin:0;font-size:clamp(28px,3vw,43px);font-weight:400}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1480px;margin:auto;display:grid}.category-card{background:#191d1e;min-height:440px;position:relative;overflow:hidden}.category-card img{object-fit:cover;filter:brightness(1.08)saturate(1.04);width:100%;height:100%;transition:transform .65s;position:absolute;inset:0}.category-card:after{display:none}.category-card:hover img{transform:scale(1.025)}.category-copy{z-index:2;text-shadow:0 2px 12px #000000e6,0 1px 3px #000000f2;position:absolute;inset:auto 34px 31px}.category-copy small{color:#d5d7d7;letter-spacing:.2em;font-size:9px;font-weight:300}.category-copy h3{letter-spacing:-.025em;max-width:90%;margin:8px 0 9px;font-size:clamp(23px,2.2vw,35px);font-weight:420;line-height:1.08}.category-copy p{color:#e2e3e3;margin:0;font-size:14px;font-weight:300}.category-copy>span{border:1px solid #ffffff8c;border-radius:50%;place-items:center;width:46px;height:46px;font-size:21px;display:grid;position:absolute;bottom:0;right:0}.mobile-drawer{display:none}.light-section{color:#111516;background:#fff}.popular-section{padding:104px 3.4vw 58px}.split-heading{justify-content:space-between;align-items:flex-end;gap:30px;display:flex}.split-heading>div>p{color:#bf7500;letter-spacing:.23em;margin:0 0 12px;font-size:10px}.split-heading>a{color:#15191a;border-bottom:1px solid #b7b9b8;padding-bottom:8px;font-size:13px;font-weight:600}.split-heading>a span{margin-left:20px}.product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;max-width:1480px;margin:auto;display:grid}.product-card{background:#f4f3f0;min-width:0}.product-image{aspect-ratio:1;background:#0b0d0e;overflow:hidden}.product-image img{object-fit:cover;width:100%;height:100%;transition:transform .55s;display:block}.product-card:hover .product-image img{transform:scale(1.025)}.product-info{flex-direction:column;justify-content:space-between;gap:20px;min-height:115px;padding:20px 20px 18px;display:flex}.product-info h3{margin:0;font-size:16px;font-weight:500;line-height:1.35}.product-price{color:#15191a;margin-top:12px;font-size:18px;font-weight:550;line-height:1.2;display:block}.product-info span{color:#8a5a0c;letter-spacing:.07em;font-size:11px;font-weight:600}.benefits-section{padding:48px 3.4vw 110px}.benefits-heading{margin-bottom:18px}.benefits-heading>p{color:#a96300}.benefits-grid{border-top:1px solid #dfe0dc;border-bottom:1px solid #dfe0dc;grid-template-columns:repeat(4,1fr);max-width:1480px;margin:auto;padding:30px 0;display:grid}.benefit{border-right:1px solid #dedfdb;align-items:flex-start;gap:20px;min-width:0;padding:13px 28px;display:flex}.benefit:last-child{border:0}.benefit img{object-fit:contain;mix-blend-mode:multiply;flex:0 0 52px;width:52px;height:52px}.benefit h3{margin:2px 0 10px;font-size:15px;font-weight:550}.benefit p{color:#666a68;margin:0;font-size:12px;line-height:1.55}.editorial-section{grid-template-columns:1fr 1fr;align-items:stretch;padding:0 3.4vw 112px;display:grid}.editorial-copy{background:#f2f0eb;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(45px,6vw,100px);display:flex}.editorial-copy .orange-label{color:#a96300;letter-spacing:.22em;margin:0 0 17px;font-size:10px}.editorial-copy h2{letter-spacing:-.045em;max-width:650px;margin:0;font-size:clamp(34px,4vw,62px);font-weight:420;line-height:1.04}.editorial-copy>p:not(.orange-label){color:#555a58;max-width:580px;margin:27px 0 31px;font-size:16px;line-height:1.7}.editorial-image{min-height:590px;overflow:hidden}.editorial-image img{object-fit:cover;width:100%;height:100%;display:block}.dark-button{color:#fff;background:#111516;align-items:center;gap:46px;min-height:54px;padding:0 25px;font-size:13px;font-weight:600;display:flex}.dark-button span{color:var(--orange);font-size:19px}.phone-button{background:var(--orange);color:#111516;grid-template-rows:auto auto;grid-template-columns:1fr auto;gap:8px 20px;min-height:72px;padding:12px 21px;display:grid}.phone-button small{letter-spacing:.16em;grid-column:1;font-size:8px;font-weight:650;line-height:1}.phone-button strong{grid-column:1;font-size:18px;font-weight:650;line-height:1.1}.phone-button span{color:#111516;grid-area:1/2/3;font-size:23px}.delivery-section .editorial-copy{background:#fff;border:1px solid #dedfdb}.delivery-section .editorial-image{order:0}.delivery-section .editorial-copy{order:1}.text-link{border-bottom:1px solid #6d716f;padding-bottom:6px;font-size:14px;font-weight:600}.text-link span{margin-left:28px}.editorial-copy ul{width:100%;margin:32px 0 0;padding:0;list-style:none}.editorial-copy li{color:#343837;border-top:1px solid #dedfdb;padding:14px 0 14px 23px;font-size:13px;line-height:1.4;position:relative}.editorial-copy li:before{content:"";background:var(--orange);border-radius:50%;width:6px;height:6px;position:absolute;top:20px;left:0}.site-footer{color:#fff;background:#0b0e0f;padding:78px 3.4vw 0}.footer-main{grid-template-columns:1.5fr 1.2fr .8fr 1fr;gap:60px;max-width:1480px;margin:auto;padding-bottom:58px;display:grid}.footer-brand img{object-fit:contain;width:260px;height:76px}.footer-brand p{color:#939897;max-width:370px;margin:22px 0 0;font-size:13px;line-height:1.7}.footer-column{flex-direction:column;align-items:flex-start;gap:13px;display:flex}.footer-column h3{color:var(--orange);letter-spacing:.19em;margin:8px 0 14px;font-size:10px;font-weight:500}.footer-column a,.footer-column p{color:#c5c9c8;margin:0;font-size:12px;line-height:1.45}.footer-column a:hover{color:#fff}.footer-column .footer-phone{color:#fff;font-size:19px;font-weight:550} /* Пошта в підвалі — обов'язковий контакт магазину (вимога Portmone). Дрібніша за телефон, щоб не сперечалася з ним за увагу. */ .footer-column .footer-mail{color:#c5c9c8;font-size:13px;margin-top:2px} .footer-column .footer-mail:hover{color:#fff}.portmone{object-fit:contain;width:105px;height:auto;max-height:35px;margin-top:10px}.footer-bottom{border-top:1px solid var(--line);color:#777d7c;justify-content:space-between;max-width:1480px;margin:auto;padding:22px 0;font-size:11px;display:flex}@media (width<=1180px){.desktop-nav{gap:14px}.desktop-nav a{font-size:11px}.desktop-phone{display:none}.logo{flex-basis:210px}}@media (width<=720px){.mobile-only{display:grid!important}.topline,.desktop-nav,.desktop-phone{display:none}.nav-row{justify-content:space-between;gap:10px;height:70px;padding:0 14px}.nav-row>.icon-button{flex:0 0 39px}.logo{flex:1;max-width:210px;height:54px}.nav-actions{gap:7px}.icon-button{width:39px;height:39px;padding:9px}.mobile-drawer{z-index:100;background:#0b0e0f;flex-direction:column;gap:0;padding:76px 27px 35px;display:flex;position:fixed;inset:0;overflow-y:auto}.mobile-drawer img{object-fit:contain;align-self:center;width:220px;height:62px;margin-bottom:35px}.mobile-drawer>a{border-bottom:1px solid var(--line);padding:17px 2px;font-size:18px;font-weight:350}.mobile-drawer .drawer-phone{color:var(--orange);border:0;margin-top:auto;font-weight:600}.mobile-drawer small{color:#999;letter-spacing:.1em}.drawer-close{border:1px solid var(--line);color:#fff;background:0 0;border-radius:50%;width:43px;height:43px;padding:10px;position:absolute;top:18px;right:18px}.drawer-close svg{width:100%;height:100%}.mobile-menu-group{border-bottom:1px solid var(--line)}.mobile-menu-group summary{cursor:pointer;justify-content:space-between;align-items:center;gap:12px;padding:17px 2px;font-size:18px;font-weight:350;list-style:none;display:flex}.mobile-menu-group summary::-webkit-details-marker{display:none}.mobile-menu-group summary span{color:var(--orange);font-size:22px;line-height:1;transition:transform .2s}.mobile-menu-group[open] summary span{transform:rotate(180deg)}.mobile-menu-group>div{flex-direction:column;padding:0 0 10px 15px;display:flex}.mobile-menu-group>div a{color:#b9bdbc;padding:10px 0;font-size:14px;line-height:1.35}.mobile-contact{border-top:1px solid var(--line);background:#0d1112;justify-content:center;align-items:center;gap:16px;height:34px;padding:0 16px;display:flex}.mobile-contact a{color:var(--orange);letter-spacing:.025em;cursor:pointer;font-size:13.5px;font-weight:420}.mobile-contact span{color:#a8adac;letter-spacing:.08em;font-size:9px;font-weight:350}.hero{height:calc(100svh - 104px);min-height:620px;max-height:none}.hero-slide{transition-duration:.45s}.hero-slide img{object-position:center center}.hero-slide:after{background:linear-gradient(#05070899 0%,#05070826 35%,#0507080a 57%,#050708c7 100%);width:100%;inset:0}.hero-content{justify-content:space-between;align-items:flex-start;width:100%;max-width:none;margin:0;padding:42px 22px 87px}.hero-content:after{content:"";display:block}.eyebrow{letter-spacing:-.03em;max-width:350px;margin:0 0 13px;font-size:clamp(45px,12.7vw,58px);font-weight:320;line-height:1}.hero-slogan{max-width:320px;font-size:clamp(21px,6vw,27px);font-weight:390;line-height:1.12}.hero-copy{max-width:335px;margin-top:auto;margin-bottom:20px;font-size:14px;line-height:1.5}.primary-button{gap:30px;min-height:50px;padding:0 20px}.hero-controls{bottom:27px;left:22px}.hero-arrows,.desktop-break{display:none}.categories-section{padding:64px 14px 70px}.section-heading{margin-bottom:24px;padding:0 6px}.section-heading h2{font-size:30px}.category-grid{grid-template-columns:1fr;gap:12px}.category-card{min-height:460px}.category-copy{inset:auto 22px 24px}.category-copy h3{font-size:28px}.category-copy p{max-width:80%;font-size:13px;line-height:1.45}.popular-section{padding:68px 14px 30px}.split-heading{align-items:flex-end;padding:0 5px}.split-heading h2{font-size:30px}.split-heading>a{white-space:nowrap;font-size:11px}.split-heading>a span{margin-left:6px}.product-grid{scroll-snap-type:x mandatory;scrollbar-width:none;gap:10px;padding-bottom:8px;display:flex;overflow-x:auto}.product-grid::-webkit-scrollbar{display:none}.product-card{scroll-snap-align:start;flex:0 0 82vw}.product-info{min-height:105px}.benefits-section{padding:30px 14px 72px}.benefits-grid{grid-template-columns:1fr 1fr;padding:20px 0}.benefit{border-bottom:1px solid #dedfdb;border-right:1px solid #dedfdb;flex-direction:column;gap:10px;padding:18px 12px}.benefit:nth-child(2){border-right:0}.benefit:nth-child(3){border-bottom:0}.benefit:nth-child(4){border:0}.benefit img{width:48px;height:48px}.benefit h3{font-size:13px}.benefit p{font-size:11px}.editorial-section{grid-template-columns:1fr;padding:0 14px 70px}.editorial-copy{padding:50px 25px 48px}.editorial-copy h2{font-size:38px}.editorial-copy>p:not(.orange-label){margin:22px 0 27px;font-size:14px}.editorial-image{order:-1;min-height:430px}.delivery-section .editorial-image{order:0}.delivery-section .editorial-copy{order:1}.editorial-copy li{font-size:12px}.phone-button{width:100%;max-width:320px}.site-footer{padding:58px 20px 0}.footer-main{grid-template-columns:1fr 1fr;gap:42px 24px}.footer-brand{grid-column:1/-1}.footer-brand img{width:240px}.footer-brand p{font-size:12px}.footer-contacts{grid-column:1/-1}.footer-bottom{gap:15px;font-size:10px}.footer-column .footer-phone{font-size:20px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false} .mobile-drawer[hidden]{display:none!important} /* Заглавні фото товарів — студійні знімки на чорному градієнті, тож рамка заповнюється повністю, без бежевих полів по краях. Обрізається лише дорисоване тло: сам виріб у кадрі не втрачається. */ .product-image img{object-fit:cover} /* Ціна в картці: WooCommerce віддає / для акційних товарів, і без стилів це ламало ритм блоку. Чинна ціна виглядає точно як у макеті, стара — дрібним приглушеним закресленням поруч. */ .product-price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;line-height:1.2} .product-price del{font-size:13px;font-weight:400;color:#9b9b96;text-decoration:line-through;opacity:1} .product-price ins{text-decoration:none;background:none;color:inherit;font-weight:inherit;font-size:inherit} .product-price .woocommerce-Price-amount{white-space:nowrap} .product-price bdi{display:inline} .product-info span{line-height:1.5} /* WooCommerce додає до акційної ціни підписи для читалок екрана («Оригінальна ціна…», «Поточна ціна…»). Без цього правила вони виводились у картці як звичайний текст і ламали блок. */ .screen-reader-text{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* Сума в WooCommerce загорнута у вкладені та . Ці вузли мали власний розмір і колір із теми, тож ціна виглядала дрібною й помаранчевою замість великої чорної, як у макеті. */ .product-price, .product-price ins, .product-price .woocommerce-Price-amount, .product-price .woocommerce-Price-currencySymbol, .product-price bdi, .product-price > span{ font:550 18px/1.2 Inter,Arial,sans-serif!important; color:#15191a!important; background:none!important; text-decoration:none!important; } .product-price del, .product-price del .woocommerce-Price-amount, .product-price del .woocommerce-Price-currencySymbol, .product-price del bdi{ font:400 13px/1.2 Inter,Arial,sans-serif!important; color:#9b9b96!important; text-decoration:line-through!important; } /* Тема задавала h1–h4 text-wrap:balance та p text-wrap:pretty. У макеті перенесення звичайне, і через balance заголовки (напр. «Доставка і оплата») ламались на два рядки, збільшуючи висоту блоків. */ .site-header h1,.site-header h2,.site-header h3, .hero h1,.hero p, .categories-section h3,.categories-section p, .popular-section h2,.popular-section h3,.popular-section p, .benefits-section h3,.benefits-section p, .editorial-section h2,.editorial-section p, .mobile-drawer a,.mobile-drawer summary, .site-footer h3,.site-footer p{text-wrap:wrap} /* Карусель товарів на телефоні прокручується всередині .product-grid, але її ширина розтягувала документ (1023px замість 390) — через це браузер розширював вьюпорт, і шторка меню з position:fixed отримувала неправильні розміри. overflow-x:clip обрізає, не створюючи нового контейнера прокрутки й не ламаючи sticky. */ .popular-section{contain:paint} /* ================================================================ Каталог, форми та фільтри ================================================================ */ /* --- фото товару в каталозі вміщується повністю --- */ .woocommerce ul.products li.product img, ul.products li.product img{object-fit:contain!important;background:#14191b} .section--light ul.products li.product img{background:#f4f3f0} /* --- форми: єдиний вигляд на всіх сторінках --- */ :root{color-scheme:dark} .section--light,.section--light *{color-scheme:light} select, .woocommerce-ordering select, .woocommerce select, input[type=text],input[type=search],input[type=email],input[type=tel], input[type=number],input[type=password],input[type=url],textarea{ appearance:none;-webkit-appearance:none; background-color:#14191b;color:#f2f2ee; border:1px solid #2b3235;border-radius:9px; padding:0 16px;height:48px;font:400 15px/1 Inter,Arial,sans-serif; box-shadow:none;outline:none;max-width:100%} textarea{height:auto;min-height:110px;padding:14px 16px;line-height:1.55;resize:vertical} select{ padding-right:42px;cursor:pointer; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 14px center;background-size:16px} select option{background:#14191b;color:#f2f2ee} input:focus,select:focus,textarea:focus{border-color:var(--orange)} input::placeholder,textarea::placeholder{color:#767d7b} /* світлі секції — світлі поля */ .section--light select,.section--light input[type=text],.section--light input[type=search], .section--light input[type=email],.section--light input[type=tel],.section--light textarea{ background-color:#fff;color:#0c0e0f;border-color:#e4e4de} .section--light select option{background:#fff;color:#0c0e0f} /* --- кнопка «Фільтри» --- */ .svl-filter-btn{ display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 18px; border:1px solid #2b3235;background:#14191b;color:#f2f2ee;border-radius:9px;cursor:pointer; font:500 14px/1 Inter,Arial,sans-serif;position:relative;transition:border-color .2s,background .2s} .svl-filter-btn:hover{border-color:var(--orange);color:#fff} .svl-filter-btn__dot{width:7px;height:7px;border-radius:50%;background:var(--orange);display:block} /* --- панель фільтрів --- */ .svl-filters{position:fixed;inset:0;z-index:1300} .svl-filters[hidden]{display:none!important} .svl-filters__back{position:absolute;inset:0;background:rgba(4,6,7,.66);backdrop-filter:blur(4px)} .svl-filters__panel{ position:absolute;top:0;right:0;bottom:0;width:min(420px,100%); background:#0d1112;border-left:1px solid #2b3235;display:flex;flex-direction:column; animation:svlIn .28s cubic-bezier(.22,.61,.36,1)} @keyframes svlIn{from{transform:translateX(102%)}to{transform:none}} .svl-filters__head{display:flex;align-items:center;justify-content:space-between; padding:20px;border-bottom:1px solid #2b3235} .svl-filters__title{font:600 19px/1 Inter,Arial,sans-serif;color:#fff} .svl-filters__x{width:42px;height:42px;border:1px solid #2b3235;background:transparent;color:#fff; border-radius:50%;cursor:pointer;display:grid;place-items:center} .svl-filters__x:hover{border-color:var(--orange);color:var(--orange)} .svl-filters__body{flex:1;overflow-y:auto;padding:8px 20px 20px} .svl-filters__group{border:0;margin:0;padding:18px 0;border-bottom:1px solid #232a2c} .svl-filters__group legend{padding:0;margin-bottom:12px;font:500 11px/1 'JetBrains Mono',monospace; letter-spacing:.14em;text-transform:uppercase;color:#9aa2a0} .svl-filters__foot{border-top:1px solid #2b3235;padding:18px 20px;display:flex;flex-direction:column;gap:10px;background:#0d1112} .svl-filters__reset{text-align:center;font:400 13px/1 Inter,Arial,sans-serif;color:#9aa2a0;text-decoration:underline} .svl-filters__reset:hover{color:var(--orange)} /* --- свій чекбокс --- */ .svl-check{display:flex;align-items:center;gap:12px;padding:9px 0;cursor:pointer; font:400 15px/1.3 Inter,Arial,sans-serif;color:#f2f2ee} .svl-check input{position:absolute;opacity:0;width:0;height:0} .svl-check__box{width:20px;height:20px;border:1.5px solid #394245;border-radius:5px;flex:0 0 auto; display:grid;place-items:center;transition:border-color .18s,background .18s} .svl-check__box::after{content:"";width:10px;height:10px;border-radius:2px;background:transparent;transition:background .18s} .svl-check input:checked + .svl-check__box{border-color:var(--orange)} .svl-check input:checked + .svl-check__box::after{background:var(--orange)} .svl-check input:focus-visible + .svl-check__box{outline:2px solid var(--orange);outline-offset:2px} .svl-check__label{flex:1;min-width:0} .svl-check__n{font:400 12px/1 'JetBrains Mono',monospace;color:#767d7b} /* --- панель інструментів каталогу --- */ .svl-toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:24px 0 28px} .svl-toolbar__left{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-width:0} .woocommerce .woocommerce-result-count,.woocommerce-result-count{ float:none!important;margin:0!important;font:400 12px/1.4 'JetBrains Mono',monospace;color:#767d7b} .woocommerce .woocommerce-ordering,.woocommerce-ordering{float:none!important;margin:0 0 0 auto!important} @media (max-width:640px){ .svl-toolbar{gap:12px} .woocommerce .woocommerce-ordering,.woocommerce-ordering{margin-left:0!important;width:100%} .svl-toolbar__left{width:100%;justify-content:space-between} } /* --- свій випадний список --- */ .svl-select{position:relative;display:inline-block;width:var(--svl-w,240px);min-width:0;max-width:100%} .svl-select select{position:absolute;inset:0;opacity:0;pointer-events:none;width:100%;height:100%} .svl-select__btn{ display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%; height:46px;padding:0 14px 0 16px;cursor:pointer; background:#14191b;color:#f2f2ee;border:1px solid #2b3235;border-radius:9px; font:400 14px/1 Inter,Arial,sans-serif;text-align:left;transition:border-color .18s} .svl-select__btn:hover{border-color:#394245} .svl-select.is-open .svl-select__btn{border-color:var(--orange)} .svl-select__btn svg{flex:0 0 auto;color:var(--orange);transition:transform .18s} .svl-select.is-open .svl-select__btn svg{transform:rotate(180deg)} .svl-select__val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .svl-select__list{ position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60; background:#14191b;border:1px solid #2b3235;border-radius:10px;padding:6px; box-shadow:0 26px 54px -26px rgba(0,0,0,.8);max-height:320px;overflow-y:auto; display:flex;flex-direction:column;gap:2px;animation:svlDrop .16s ease-out} @keyframes svlDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .svl-select__opt{ display:block;width:100%;text-align:left;border:0;background:transparent;color:#c9d0cd; padding:11px 12px;border-radius:7px;cursor:pointer;font:400 14px/1.35 Inter,Arial,sans-serif} .svl-select__opt:hover{background:#1b2124;color:#fff} .svl-select__opt.is-on{background:rgba(247,165,26,.14);color:var(--orange)} /* у світлих секціях — світлий список */ .section--light .svl-select__btn{background:#fff;color:#0c0e0f;border-color:#e4e4de} .section--light .svl-select__list{background:#fff;border-color:#e4e4de} .section--light .svl-select__opt{color:#3c4341} .section--light .svl-select__opt:hover{background:#f4f3f0;color:#0c0e0f} @media (max-width:640px){ .woocommerce-ordering,.woocommerce .woocommerce-ordering{width:100%} .woocommerce-ordering .svl-select,.svl-toolbar .svl-select{width:100%;min-width:0;display:block} } /* Атрибут hidden працює через display:none в UA-стилях, і будь-яке авторське display його перебиває. У списку стоїть display:flex — тому без цього правила він був розгорнутий одразу. */ .svl-select__list[hidden]{display:none!important} /* ================================================================ Модальний пошук ================================================================ */ /* Шапка НЕ фіксується: на телефоні вона з'їдала верх екрана й перекривала шторку меню (звідси були два логотипи та неклікабельний хрестик). */ /* Шторка меню має бути вище за шапку в будь-якому разі. */ .mobile-drawer{z-index:1250!important} /* Шторка меню не успадковує колір тексту сторінки. На картці товару, «Доставці й оплаті» та сторінці подяки body пофарбований у темний (ці сторінки за макетом світлі), а пункти меню брали колір звідти — на темному тлі шторки вони ставали майже невидимі. Тому колір задається явно: шторка однакова на будь-якій сторінці сайту. */ .mobile-drawer{color:#fff} .mobile-drawer>a,.mobile-menu-group summary{color:#fff} .mobile-menu-group>div a{color:#b9bdbc} .mobile-drawer .drawer-phone{color:var(--orange)} .mobile-drawer small{color:#999} /* З тієї ж причини — шапка. Усередині майже скрізь колір заданий, але покладатись на це не варто: один новий елемент без color — і він знову візьме темний від сторінки. */ .site-header{color:#fff} .svl-search{position:fixed;inset:0;z-index:1400;display:grid;place-items:start center;padding:14vh 16px 16px} .svl-search[hidden]{display:none!important} .svl-search__back{position:absolute;inset:0;background:rgba(4,6,7,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .svl-search__box{ position:relative;width:min(680px,100%);background:#14191b;border:1px solid #2b3235;border-radius:16px; padding:28px 28px 22px;box-shadow:0 40px 90px -40px rgba(0,0,0,.9); animation:svlSearchIn .24s cubic-bezier(.22,.61,.36,1)} @keyframes svlSearchIn{from{opacity:0;transform:translateY(-14px) scale(.985)}to{opacity:1;transform:none}} .svl-search__x{position:absolute;top:14px;right:14px;width:40px;height:40px;border:1px solid #2b3235; background:transparent;color:#c9d0cd;border-radius:50%;cursor:pointer;display:grid;place-items:center} .svl-search__x:hover{border-color:var(--orange);color:var(--orange)} .svl-search__label{display:block;font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.16em; text-transform:uppercase;color:#9aa2a0;margin-bottom:14px} .svl-search__row{display:flex;align-items:center;gap:10px;border:1px solid #394245;border-radius:11px; padding:0 8px 0 14px;background:#0d1112;transition:border-color .18s} .svl-search__row:focus-within{border-color:var(--orange)} .svl-search__icon{flex:0 0 auto;color:#767d7b} .svl-search__row input[type=search]{ flex:1;min-width:0;height:58px;border:0!important;background:transparent!important; padding:0!important;font:400 16px/1 Inter,Arial,sans-serif;color:#f2f2ee} .svl-search__row input[type=search]:focus{outline:none} .svl-search__go{flex:0 0 auto;height:44px;padding:0 22px;border:0;border-radius:9px;cursor:pointer; background:var(--orange);color:#0c0e0f;font:600 14px/1 Inter,Arial,sans-serif;transition:filter .2s} .svl-search__go:hover{filter:brightness(1.08)} .svl-search__hints{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px; font:400 12px/1 'JetBrains Mono',monospace;color:#767d7b} .svl-search__hint{border:1px solid #2b3235;background:transparent;color:#c9d0cd;border-radius:20px; padding:7px 13px;cursor:pointer;font:400 12px/1 Inter,Arial,sans-serif;transition:border-color .18s,color .18s} .svl-search__hint:hover{border-color:var(--orange);color:var(--orange)} @media (max-width:640px){ .svl-search{padding:10vh 12px 12px} .svl-search__box{padding:24px 18px 18px} .svl-search__row{flex-wrap:wrap;padding:10px;gap:8px} .svl-search__row input[type=search]{height:44px;flex:1 1 100%;order:1} .svl-search__icon{display:none} .svl-search__go{width:100%;order:2} } /* --- позначка знижки на фото товару (каталог і головна) --- */ .product-image, .woocommerce ul.products li.product a, ul.products li.product a{position:relative} .discount-badge, .woocommerce span.onsale, span.onsale{position:absolute;top:15px;right:15px;z-index:4; background:var(--orange);color:#111;letter-spacing:.1em;padding:8px 10px; font-size:10px;font-weight:700;line-height:1;border-radius:0; min-height:0;min-width:0;margin:0;text-align:center} @media (max-width:720px){ .discount-badge,.woocommerce span.onsale,span.onsale{top:13px;right:13px;padding:7px 9px;font-size:9px} } /* ================================================================ Шторка кошика — у світлому вигляді сторінки кошика ================================================================ Шторка лишилась із першого, темного оформлення, а сторінка кошика зібрана за макетом і світла. Поруч вони виглядали як два різні сайти. Розмітку не чіпаємо: перефарбовуємо змінними теми в межах шторки. */ .svl-drawer{ --card:#fff; --tile:#f4f3ef; --sub:#faf9f6; --s-ink:#171a19; --mut:#777b78; --mut2:#8a8f8c; --s-line:#e1e2de; --line-in:#d7d7d2; --acc:#f5a000; color-scheme:light} .svl-drawer *{color-scheme:light} .svl-drawer__panel{background:#fff;color:#171a19;border-left:1px solid #e1e2de; border-radius:0;box-shadow:-24px 0 60px #00000026} .svl-drawer__head{border-bottom:1px solid #e1e2de;padding:18px 20px} .svl-drawer__title{color:#171a19;font:350 22px/1 Manrope,Inter,sans-serif;letter-spacing:-.03em} .svl-drawer__count{color:#8a8f8c} .svl-drawer__back{background:#0b0f1073} /* Товар у шторці — тими самими лініями, що й у кошику. */ .svl-drawer__list{padding:18px 20px;gap:0} .svl-ditem{border:0;border-bottom:1px solid #e1e2de;border-radius:0;padding:16px 0} .svl-ditem:first-child{padding-top:0} .svl-ditem:last-child{border-bottom:0} .svl-ditem__media{background:#0b0d0e;border-radius:0;width:84px;height:84px} .svl-ditem__media img{object-fit:cover} .svl-ditem__title{color:#171a19;font:500 13px/1.4 Inter,Arial,sans-serif} .svl-ditem__title:hover{color:#f5a000} .svl-ditem__opt{color:#8a8f8c} .svl-ditem__sum{color:#171a19;font:600 14px/1 Inter,Arial,sans-serif} /* Крок кількості — прямокутний, як у кошику. */ .svl-qty{border:1px solid #d7d7d2;border-radius:0;background:#fff} .svl-qty__btn{color:#171a19;background:0 0} .svl-qty__btn:hover:not([disabled]){color:#f5a000} .svl-qty__val{color:#171a19} .svl-ditem__del{color:#8a8f8c} .svl-ditem__del:hover{color:#c0392b} /* Підсумок і кнопки. */ .svl-drawer__foot{border-top:1px solid #e1e2de;background:#faf9f6;padding:18px 20px} .svl-drawer__line{color:#777b78;font-size:12px} .svl-drawer__line span:last-child{color:#171a19} .svl-drawer__ship{color:#8a8f8c;font-size:11px} .svl-drawer__total{color:#171a19;border-top:1px solid #e1e2de;padding-top:14px;margin-top:12px} .svl-drawer__total strong,.svl-drawer__total span:last-child{color:#f5a000;font-weight:650} .svl-drawer .svl-btn{border-radius:0;font:650 13px/1 Inter,Arial,sans-serif;min-height:52px} .svl-drawer .svl-btn--wide{background:#0b0f10;color:#fff;border:1px solid #0b0f10} .svl-drawer .svl-btn--wide:hover{background:#22282a} .svl-drawer .svl-btn--ghost{background:#fff;color:#171a19;border:1px solid #d7d7d2} .svl-drawer .svl-btn--ghost:hover{border-color:#171a19} .svl-drawer__empty-title{color:#171a19} .svl-drawer__empty p{color:#777b78} /* Кнопка закриття шторки й хрестик товару — прямокутні, як решта. */ .svl-drawer .icon-btn{border-radius:0;border:1px solid #d7d7d2;background:#fff;color:#171a19; width:44px;height:44px;display:grid;place-items:center} .svl-drawer .icon-btn:hover{border-color:#171a19} .svl-ditem__del{top:0;right:0;padding:2px} /* Планшет. Десктопна шапка вмикалась із 721 px, а місця їй треба ~1090 px: від 721 до 1086 телефон, пошук і кошик виїздили за екран, і сторінка їхала вбік. Мобільна шапка з бургером тримається аж до 1080 px. */ @media (width<=1080px){ .mobile-only{display:grid!important} .topline,.desktop-nav,.desktop-phone{display:none} .nav-row{justify-content:space-between;gap:10px;height:70px;padding:0 20px} .nav-row>.icon-button{flex:0 0 39px} } /* Фото «Комплектація» і «Доставка» на телефоні — окремі вертикальні файли (1200×1499). У ландшафтній рамці вони або лишали 40% порожнечі, або втрачали 45% висоти, тож на мобільній рамка стає вертикальною. */ @media (width<=720px){ /* Вертикальна рамка — тільки там, де для телефона є свій вертикальний файл (тоді PHP віддає ). Якщо файлу немає, показується десктопний кадр, і вертикальна рамка обрізала б у ньому майже половину ширини. */ .svl-product .overview-photo, .svl-product .delivery-image{height:auto;min-height:0;aspect-ratio:1.5} .svl-product .overview-photo:has(picture), .svl-product .delivery-image:has(picture){aspect-ratio:.86} .svl-product .overview-photo img, .svl-product .delivery-image img{object-fit:cover;object-position:center;padding:0} } /* Телефон у шапці вмикався з 1181 px, а разом із меню й діями йому треба ~1350 px: на 1200 рядок виїздив за екран на 146 px. Тримаємо його вимкненим до 1365 px включно: контрольна ширина 1366 його вже показує. */ @media (width<=1365px){.desktop-phone{display:none}} /* Підйом нагору. Тонка кнопка в тон сайту; з'являється лише коли є куди підніматися, і не перекриває вміст — тримається в кутку. */ .svl-top{ position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:60; width:46px;height:46px;display:grid;place-items:center;padding:0;line-height:0; color:#15191a;background:#fffffff2;border:1px solid #d7d4cd;border-radius:50%; box-shadow:0 8px 24px #1a1a1a1f;cursor:pointer; opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .25s,transform .25s,visibility .25s,border-color .2s,color .2s} /* Значок центруємо власними координатами, а не лише сіткою: службові відступи кнопки (1px 6px) не зсунуть його, хоч би як браузер розклав вміст