:root { --wd-text-font: "Manrope", Arial, Helvetica, sans-serif; --wd-text-font-weight: 500; --wd-text-color: rgb(72,72,72); --wd-text-font-size: 16px; --wd-title-font: "Syne", Arial, Helvetica, sans-serif; --wd-title-font-weight: 700; --wd-title-color: #242424; --wd-entities-title-font: "Syne", Arial, Helvetica, sans-serif; --wd-entities-title-font-weight: 700; --wd-entities-title-color: #333333; --wd-entities-title-color-hover: rgb(51 51 51 / 65%); --wd-alternative-font: "Manrope", Arial, Helvetica, sans-serif; --wd-widget-title-font: "Syne", Arial, Helvetica, sans-serif; --wd-widget-title-font-weight: 700; --wd-widget-title-transform: capitalize; --wd-widget-title-color: #333; --wd-widget-title-font-size: 16px; --wd-header-el-font: "Manrope", Arial, Helvetica, sans-serif; --wd-header-el-font-weight: 800; --wd-header-el-transform: uppercase; --wd-header-el-font-size: 14px; --wd-otl-style: dotted; --wd-otl-width: 2px; --wd-primary-color: rgb(28,28,28); --wd-alternative-color: #fbbc34; --btn-default-font-weight: 100; --btn-default-bgcolor: rgb(0,0,0); --btn-default-bgcolor-hover: rgb(139,92,246); --btn-accented-bgcolor: rgb(51,51,51); --btn-accented-bgcolor-hover: rgb(51,51,51); --wd-form-brd-width: 1px; --notices-success-bg: #459647; --notices-success-color: #fff; --notices-warning-bg: #E0B252; --notices-warning-color: #fff; --wd-link-color: #333333; --wd-link-color-hover: #242424; --wd-sticky-btn-height: 130px; } .wd-age-verify-wrap { --wd-popup-width: 500px; } .wd-popup.wd-promo-popup { background-color: #111111; background-image: none; background-repeat: no-repeat; background-size: contain; background-position: left center; } .wd-promo-popup-wrap { --wd-popup-width: 800px; } :is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg, :is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg :is(.wd-product,.wd-cat) { --wd-prod-bg:rgba(226,226,226,0.93); --wd-bordered-bg:rgba(226,226,226,0.93); } :is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content { max-height: 266px; } .wd-page-title .wd-page-title-bg img { object-fit: cover; object-position: center center; } .wd-footer { background-color: rgb(248,248,248); background-image: none; } html .wd-dropdown-menu.wd-design-sized .wd-sub-menu > li > a, body .wd-dropdown-menu.wd-design-full-width .wd-sub-menu > li > a, body .wd-dropdown-menu.wd-design-aside .wd-wp-menu > .sub-sub-menu > li > a, body .wd-dropdown-menu.wd-design-aside .wd-sub-menu .wd-sub-menu > li > a, html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title, html .product.wd-cat .wd-entities-title, html .product.wd-cat.cat-design-replace-title .wd-entities-title, html .wd-masonry-first .wd-cat:first-child .wd-entities-title { text-transform: capitalize; } html .wd-dropdown-cats .wd-nav.wd-nav-vertical > li > a { font-size: 16px; text-transform: capitalize; } html .wd-checkout-steps { text-transform: capitalize; } :is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) { background-color: rgb(248,248,248); background-image: none; } .woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) { background-color: rgb(248,248,248); background-image: none; } .single-product :is(.wd-page-content, .whb-header) { background-color: rgb(248,248,248); background-image: none; } .woodmart-archive-blog :is(.wd-page-content, .whb-header) { background-color: rgb(248,248,248); background-image: none; } .single-post :is(.wd-page-content, .whb-header) { background-color: rgb(248,248,248); background-image: none; } body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform { --wd-form-brd-color: rgb(51,51,51); --wd-form-brd-color-focus: rgb(51,51,51); } .wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) { --wd-arrow-radius: 30px; --wd-arrow-brd-color: rgb(0,0,0); --wd-arrow-brd-color-hover: rgb(10,10,10); --wd-arrow-brd: 0px dotted; } .wd .product-label.onsale { background-color: #8B5CF6; } .wd .product-label.new { background-color: rgb(0,102,5); } .mfp-wrap.wd-popup-quick-view-wrap { --wd-popup-width: 1000px; } .woocommerce-product-gallery { --wd-gallery-gap: 0px; } .woocommerce-product-gallery.thumbs-position-left { --wd-thumbs-height: 563px; } @media (max-width: 1024px) { :root { --wd-sticky-btn-height: 95px; } } @media (max-width: 768.98px) { :root { --wd-sticky-btn-height: 42px; } } :root{ --wd-container-w: 1519px; --wd-form-brd-radius: 0px; --btn-default-color: #fff; --btn-default-color-hover: #333; --btn-accented-color: #fff; --btn-accented-color-hover: #fff; --btn-default-bottom-active: -1px; --btn-default-brd-radius: 0px; --btn-default-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); --btn-default-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15); --btn-accented-brd-radius: 5px; --btn-accented-box-shadow: none; --btn-accented-box-shadow-hover: none; --wd-brd-radius: 12px; } @media (min-width: 1519px) { section.elementor-section.wd-section-stretch > .elementor-container { margin-left: auto; margin-right: auto; } } .wd-page-title { background-color: rgb(238,238,238); } /* ========================================================================== KICKSY.COM.UA — повний CSS-бекап (без hero-banner) POLISH + OPTIMIZE v2 — токени винесені, дублі прибрано ========================================================================== Вставити в: WP Admin → Зовнішній вигляд → Налаштувати → Додатковий CSS ========================================================================== */ /* ========================================================================== TOKENS — єдине джерело правди для кольорів і теней ========================================================================== */ :root { /* Violet brand */ --kx-v: #8B5CF6; --kx-vd: #6D28D9; --kx-vh: #6d3df0; --kx-vg: linear-gradient(90deg, var(--kx-v), var(--kx-vh)); /* Neutral palette */ --kx-ink: #111; --kx-ink-cta:#0E0F12; --kx-bone: #FAFAF7; --kx-tx: #2C2C2A; --kx-mute: rgba(17,17,17,.5); --kx-line: rgba(17,17,17,.06); /* Acid accent (CTA glow) */ --kx-acid: rgba(232,255,89,0.25); } /* ========================================================================== 1. БЛОГ / СТАТТІ — .kicksy-article ========================================================================== */ .kicksy-article { max-width: 900px; margin: 0 auto; padding: 28px 22px; background: #fff; border: 1px solid #ececf1; border-radius: 24px; box-shadow: 0 12px 35px rgba(17,17,17,0.06); } .kicksy-article h2 { font: 800 30px/1.25 inherit; color: var(--kx-ink); margin: 0 0 16px; } .kicksy-article h3 { font: 700 22px/1.35 inherit; color: var(--kx-ink); margin: 28px 0 12px; } .kicksy-article p { font: 400 17px/1.8 inherit; color: #444; margin: 0 0 16px; } .kicksy-article ul { margin: 0 0 20px; padding-left: 0; list-style: none; } .kicksy-article ul li { position: relative; padding-left: 18px; margin-bottom: 12px; font: 400 17px/1.7 inherit; color: #333; } .kicksy-article ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--kx-v); box-shadow: 0 0 0 6px rgba(139,92,246,0.12); } .kicksy-article strong { color: var(--kx-ink); font-weight: 700; } .kicksy-article a { color: var(--kx-v); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.25s ease, border-color 0.25s ease; } .kicksy-article a:hover { color: var(--kx-vh); border-color: rgba(139,92,246,0.35); } .kicksy-article .kicksy-note { margin: 24px 0; padding: 18px 20px; background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(139,92,246,0.03)); border: 1px solid rgba(139,92,246,0.18); border-radius: 18px; font: 400 16px/1.7 inherit; color: #2a2a2a; } .kicksy-article .kicksy-cta { margin-top: 30px; text-align: center; } .kicksy-article .kicksy-cta a { display: inline-block; padding: 14px 30px; border-radius: 14px; background: var(--kx-v); color: #fff; font: 700 16px/1 inherit; text-decoration: none; box-shadow: 0 12px 24px rgba(139,92,246,0.22); transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; } .kicksy-article .kicksy-cta a:hover { transform: translateY(-2px); background: #7c4df1; box-shadow: 0 16px 30px rgba(139,92,246,0.3); } @media (max-width: 768px) { .kicksy-article { padding: 22px 16px; border-radius: 18px; } .kicksy-article h2 { font-size: 24px; } .kicksy-article h3 { font-size: 20px; } .kicksy-article p, .kicksy-article ul li { font-size: 16px; line-height: 1.75; } .kicksy-article .kicksy-cta a { width: 100%; padding: 14px 18px; } } /* ========================================================================== 2. АКОРДЕОН — .wd-accordion ========================================================================== */ .wd-accordion { margin-top: 20px; } .wd-accordion .wd-accordion-item { border-radius: 18px; margin-bottom: 12px; overflow: hidden; border: 1px solid #ececf1; background: #fff; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .wd-accordion .wd-accordion-item:hover { border-color: var(--kx-v); box-shadow: 0 10px 25px rgba(139,92,246,0.12); } .wd-accordion .wd-accordion-title { position: relative; font: 700 18px/1.4 inherit; color: var(--kx-ink); padding: 16px 20px; background: #fff; transition: color 0.2s ease; } .wd-accordion .wd-accordion-title::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: transparent; transition: background-color 0.3s ease; } .wd-accordion .wd-accordion-title:hover { color: var(--kx-v); } .wd-accordion .wd-accordion-content { font: 400 16px/1.7 inherit; color: #444; padding: 0 20px 18px; background: #fff; } .wd-accordion .wd-active { border-color: var(--kx-v); box-shadow: 0 12px 30px rgba(139,92,246,0.15); } .wd-accordion .wd-active .wd-accordion-title { color: var(--kx-v); } .wd-accordion .wd-active .wd-accordion-title::before { background: var(--kx-v); } @media (max-width: 768px) { .wd-accordion .wd-accordion-title { font-size: 16px; padding: 14px 16px; } .wd-accordion .wd-accordion-content { font-size: 15px; padding: 0 16px 14px; } } /* ========================================================================== 3. CONCLUSION-БЛОК — .kicksy-bottom-cta-pro ========================================================================== */ .kicksy-bottom-cta-pro { margin-top: 60px; } .kicksy-bottom-cta-pro__inner { position: relative; padding: 42px 28px; border-radius: 26px; background: linear-gradient(135deg, #111 0%, #1c1c1c 100%); text-align: center; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.15); } .kicksy-bottom-cta-pro__inner::before { content: ""; position: absolute; top: -30%; left: -20%; width: 200px; height: 200px; background: var(--kx-v); filter: blur(60px); opacity: 0.3; pointer-events: none; } .kicksy-bottom-cta-pro__text { position: relative; font: 400 17px/1.8 inherit; color: #e5e5e5; max-width: 700px; margin: 0 auto 26px; } .kicksy-bottom-cta-pro__btn { display: inline-block; padding: 14px 34px; border-radius: 14px; background: linear-gradient(135deg, var(--kx-v), var(--kx-vh)); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 10px 25px rgba(139,92,246,0.35); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; } .kicksy-bottom-cta-pro__btn:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(139,92,246,0.5); } @media (max-width: 768px) { .kicksy-bottom-cta-pro__inner { padding: 28px 16px; border-radius: 20px; } .kicksy-bottom-cta-pro__text { font-size: 15px; } } /* ========================================================================== 4. ФОРМИ — WooCommerce inputs + Select2 + пошук ========================================================================== */ .woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="tel"], .woocommerce input[type="password"], .woocommerce textarea, .woocommerce select { border: 1.5px solid #D3D1C7; border-radius: 8px; padding: 12px 16px; font-size: 15px; background: #fff; color: var(--kx-tx); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .woocommerce input[type="text"]:focus, .woocommerce input[type="email"]:focus, .woocommerce input[type="tel"]:focus, .woocommerce input[type="password"]:focus, .woocommerce textarea:focus, .woocommerce select:focus { border-color: #7F77DD; outline: none; box-shadow: 0 0 0 3px rgba(127,119,221,0.15); } /* Select2 (Нова Пошта) */ .select2-container--default .select2-selection--single { border: 1.5px solid #D3D1C7 !important; border-radius: 8px !important; height: 48px !important; padding: 12px 16px !important; background: #fff !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 24px !important; color: var(--kx-tx) !important; padding: 0 !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px !important; right: 12px !important; } .select2-container--default.select2-container--open .select2-selection--single { border-color: #7F77DD !important; box-shadow: 0 0 0 3px rgba(127,119,221,0.15) !important; } .select2-dropdown { border: 1.5px solid #7F77DD !important; border-radius: 8px !important; overflow: hidden !important; } .select2-container--default .select2-results__option--highlighted { background: #7F77DD !important; } /* Пошук */ .searchform input[name="s"] { border: 1.5px solid #D3D1C7 !important; border-radius: 8px !important; padding: 12px 16px !important; font-size: 15px !important; background: #fff !important; color: var(--kx-tx) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .searchform input[name="s"]:focus { border-color: #7F77DD !important; outline: none !important; box-shadow: 0 0 0 3px rgba(127,119,221,0.15) !important; } .quantity { border-radius: 10px; overflow: hidden; } /* ========================================================================== 5. ЦІНИ — .price (del/ins) ========================================================================== */ .price:has(del):has(ins), .wrap-price .price, .elementor-widget .price, .products .product .price { display: inline-flex !important; align-items: center; gap: 8px; padding: 7px 14px; background: #1a1a1a; border-radius: 6px; color: #fff; } .price del, .price del bdi, .price del .woocommerce-Price-currencySymbol { color: #ff5e5e !important; font-size: 16px; font-weight: 700; text-decoration: none !important; position: relative; display: inline-block; } .price del bdi { position: relative; display: inline-block; } .price del bdi::after { content: ''; position: absolute; left: 0; right: 0; top: 65%; height: 1px; background: #ff5e5e; } .price ins, .price ins bdi, .price ins .woocommerce-Price-currencySymbol { text-decoration: none !important; color: #fff !important; font-weight: 700; font-size: 16px; } .price ins::before { content: "•"; margin-right: 4px; color: var(--kx-v); } /* ========================================================================== 6+7. CTA КНОПКИ — каталог + товар (об'єднано — однаковий стиль) Каталог: .wd-add-btn-replace > a Товар: .btn-accent + .wd-buy-now-btn + #wd-add-to-cart + .single_add_to_cart_button ========================================================================== */ .wd-add-btn-replace > a.add-to-cart-loop, .wd-add-btn-replace > a.add_to_cart_button, body a.btn-accent:nth-child(2), body button.wd-buy-now-btn, body #wd-add-to-cart, body button.single_add_to_cart_button { background: linear-gradient( 100deg, transparent 0%, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%, transparent 100% ) var(--kx-ink-cta) !important; background-size: 250% 100%, auto !important; background-repeat: no-repeat !important; background-position: 200% 0, 0 0 !important; color: var(--kx-bone) !important; border: none !important; border-radius: 999px !important; font-family: inherit !important; font-weight: 600 !important; letter-spacing: 0.02em !important; line-height: 1 !important; text-transform: uppercase !important; text-decoration: none !important; cursor: pointer !important; transition: transform 220ms ease-out, box-shadow 220ms ease-out, filter 220ms ease-out !important; } /* Розмір для loop-кнопок */ .wd-add-btn-replace > a.add-to-cart-loop, .wd-add-btn-replace > a.add_to_cart_button { --btn-padding: 14px 24px; --btn-height: auto; --btn-font-size: 13px; box-shadow: 0 8px 20px -8px rgba(0,0,0,0.35) !important; } /* Розмір для product-page кнопок */ body a.btn-accent:nth-child(2), body button.wd-buy-now-btn, body #wd-add-to-cart, body button.single_add_to_cart_button { padding: 16px 28px !important; font-size: 15px !important; box-shadow: 0 10px 24px -10px rgba(0,0,0,0.35) !important; } /* Спільний keyframe блику */ @keyframes kx-cta-shine { 0% { background-position: -150% 0, 0 0; } 100% { background-position: 250% 0, 0 0; } } /* WoodMart-фікси для loop-кнопки */ .wd-add-btn-replace > a.add-to-cart-loop:hover span, .wd-add-btn-replace > a.add_to_cart_button:hover span { transform: none !important; } .wd-add-btn-replace > a.add-to-cart-loop::before, .wd-add-btn-replace > a.add_to_cart_button::before { display: none !important; content: none !important; } .wd-add-btn-replace > a.add-to-cart-loop .wd-action-text, .wd-add-btn-replace > a.add_to_cart_button .wd-action-text { color: var(--kx-bone) !important; } /* Розблокувати hover для disabled "Обрати розмір" */ body button.single_add_to_cart_button.disabled, body button.single_add_to_cart_button:disabled { pointer-events: auto !important; opacity: 1 !important; cursor: pointer !important; } /* Hover: ліфт + glow + блік */ .wd-add-btn-replace > a.add-to-cart-loop:hover, .wd-add-btn-replace > a.add_to_cart_button:hover, body a.btn-accent:nth-child(2):hover, body button.wd-buy-now-btn:hover, body #wd-add-to-cart:hover, body button.single_add_to_cart_button:hover, body button.single_add_to_cart_button.disabled:hover, body button.single_add_to_cart_button:disabled:hover { transform: translateY(-2px) !important; filter: brightness(1.15) !important; color: var(--kx-bone) !important; animation: kx-cta-shine 1s ease-out !important; } .wd-add-btn-replace > a.add-to-cart-loop:hover, .wd-add-btn-replace > a.add_to_cart_button:hover { box-shadow: 0 14px 28px -10px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.08), 0 0 20px -4px var(--kx-acid) !important; } body a.btn-accent:nth-child(2):hover, body button.wd-buy-now-btn:hover, body #wd-add-to-cart:hover, body button.single_add_to_cart_button:hover, body button.single_add_to_cart_button.disabled:hover, body button.single_add_to_cart_button:disabled:hover { box-shadow: 0 16px 32px -10px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.08), 0 0 24px -4px var(--kx-acid) !important; } /* Active */ .wd-add-btn-replace > a.add-to-cart-loop:active, .wd-add-btn-replace > a.add_to_cart_button:active, body a.btn-accent:nth-child(2):active, body button.wd-buy-now-btn:active, body #wd-add-to-cart:active, body button.single_add_to_cart_button:active, body button.single_add_to_cart_button.disabled:active { transform: translateY(0) scale(0.97) !important; transition-duration: 80ms !important; } /* ========================================================================== 8. CHECKOUT / CART ТАБЛИЦЯ — .shop_table ========================================================================== */ .shop_table.woocommerce-checkout-review-order-table, .shop_table.cart { width: 100%; margin: 0; background: linear-gradient(180deg, #fff, var(--kx-bone)); border: 1px solid rgba(139,92,246,.14); border-radius: 24px; border-collapse: separate; border-spacing: 0; overflow: hidden; position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 20px 50px rgba(139,92,246,.08), 0 4px 12px rgba(17,17,17,.04); font-variant-numeric: tabular-nums; color: var(--kx-tx); } .shop_table.woocommerce-checkout-review-order-table::before, .shop_table.cart::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1; background: linear-gradient(90deg, transparent, rgba(139,92,246,.4) 30% 70%, transparent); } .shop_table th, .shop_table td { border: none !important; background: transparent !important; vertical-align: middle; } /* Eyebrow labels */ .shop_table thead th, .shop_table tfoot .cart-subtotal th, .shop_table tfoot tr.shipping th, .shop_table tfoot .order-total th { font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; text-align: left; } .shop_table thead th { font-size: 10px; color: rgba(17,17,17,.42) !important; padding: 24px 28px 14px !important; border-bottom: 1px solid var(--kx-line) !important; } .shop_table tfoot .cart-subtotal th, .shop_table tfoot tr.shipping th { font-size: 11px; color: var(--kx-mute) !important; padding: 18px 28px 12px !important; } .shop_table tfoot .order-total th { font-size: 12px; color: var(--kx-ink) !important; padding: 22px 28px 28px 44px !important; border-top: 1px solid rgba(17,17,17,.08) !important; position: relative; } /* Right-align prices */ .shop_table thead .product-total, .shop_table thead .product-subtotal, .shop_table .cart_item .product-total, .shop_table .cart_item .product-subtotal, .shop_table tfoot td { text-align: right; white-space: nowrap; } .shop_table thead .product-total, .shop_table thead .product-subtotal { padding-right: 28px !important; } /* Violet accents */ .shop_table thead .product-name { position: relative; padding-left: 44px !important; } .shop_table thead .product-name::before, .shop_table tfoot .order-total th::before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); border-radius: 2px; background: var(--kx-vg); } .shop_table thead .product-name::before { left: 28px; width: 12px; height: 2px; } .shop_table tfoot .order-total th::before { left: 28px; width: 4px; height: 32px; border-radius: 4px; box-shadow: 0 0 14px rgba(139,92,246,.45); } /* Item rows */ .shop_table .cart_item td { font-size: 15px; color: var(--kx-tx) !important; padding: 22px 28px !important; border-bottom: 1px solid rgba(17,17,17,.05) !important; } .cart_item .product-name { font-weight: 500; color: var(--kx-ink) !important; letter-spacing: -.005em; } .cart_item .product-name a { color: var(--kx-ink) !important; text-decoration: none; transition: color .2s ease; } .cart_item .product-name a:hover { color: var(--kx-v) !important; } .cart_item .product-total, .cart_item .product-subtotal { font-weight: 600; font-size: 16px; color: var(--kx-ink) !important; letter-spacing: -.01em; } /* Quantity chip */ .cart_item .product-quantity { display: inline-block; margin-left: 10px; padding: 3px 10px 4px; font: 700 11px/1 inherit; letter-spacing: .06em; color: var(--kx-vh); background: rgba(139,92,246,.1); border: 1px solid rgba(139,92,246,.22); border-radius: 999px; vertical-align: middle; } /* Subtotal/shipping td */ .shop_table tfoot .cart-subtotal td, .shop_table tfoot tr.shipping td { font-size: 14px; font-weight: 500; color: rgba(17,17,17,.7) !important; padding: 18px 28px 12px !important; } .shop_table tfoot .cart-subtotal td { font-size: 15px; font-weight: 600; color: var(--kx-tx) !important; } /* Total — visual anchor */ .shop_table tfoot .order-total th, .shop_table tfoot .order-total td { background: linear-gradient(180deg, rgba(139,92,246,.04), rgba(139,92,246,.02)) !important; } .shop_table tfoot .order-total td { padding: 22px 28px 28px !important; border-top: 1px solid rgba(17,17,17,.08) !important; } .shop_table tfoot .order-total td strong { display: inline-block; position: relative; font: 800 30px/1 inherit; color: var(--kx-ink); letter-spacing: -.025em; } .shop_table tfoot .order-total td strong::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; opacity: .85; background: var(--kx-vg); } /* Currency */ .shop_table .woocommerce-Price-currencySymbol { font-weight: 600; font-size: .62em; color: var(--kx-v); margin-left: 4px; opacity: .75; text-transform: uppercase; letter-spacing: .08em; vertical-align: .18em; } .cart_item .woocommerce-Price-currencySymbol, .shop_table tfoot .cart-subtotal .woocommerce-Price-currencySymbol, .shop_table tfoot tr.shipping .woocommerce-Price-currencySymbol { font-size: .75em; vertical-align: baseline; } /* Shipping radio list */ .shop_table tfoot tr.shipping ul { list-style: none; margin: 0; padding: 0; } .shop_table tfoot tr.shipping ul li { font-size: 14px; color: var(--kx-tx); padding: 4px 0; } /* === ADAPT: tablet ≤768 === */ @media (max-width: 768px) { .shop_table.woocommerce-checkout-review-order-table, .shop_table.cart { border-radius: 20px; } .shop_table thead th { padding: 20px 22px 12px !important; } .shop_table thead .product-name { padding-left: 38px !important; } .shop_table thead .product-name::before { left: 22px; } .shop_table thead .product-total, .shop_table thead .product-subtotal { padding-right: 22px !important; } .shop_table .cart_item td { padding: 20px 22px !important; } .shop_table tfoot .cart-subtotal th, .shop_table tfoot .cart-subtotal td, .shop_table tfoot tr.shipping th, .shop_table tfoot tr.shipping td { padding: 18px 22px 10px !important; } .shop_table tfoot .order-total th { padding: 20px 22px 26px 38px !important; } .shop_table tfoot .order-total th::before { left: 22px; } .shop_table tfoot .order-total td { padding: 20px 22px 26px !important; } .shop_table tfoot .order-total td strong { font-size: 28px; } } /* === ADAPT: phone ≤480 — stack item row === */ @media (max-width: 480px) { .shop_table.woocommerce-checkout-review-order-table, .shop_table.cart { border-radius: 18px; } .shop_table thead th { padding: 16px 16px 10px !important; font-size: 9px; letter-spacing: .18em; } .shop_table thead .product-name { padding-left: 28px !important; } .shop_table thead .product-name::before { left: 16px; width: 8px; } .shop_table thead .product-total, .shop_table thead .product-subtotal { padding-right: 16px !important; } .shop_table .cart_item td.product-name { display: block; width: 100%; box-sizing: border-box; padding: 16px 16px 4px !important; min-height: 44px; border-bottom: none !important; font-size: 15px; } .shop_table .cart_item td.product-total, .shop_table .cart_item td.product-subtotal { display: block; width: 100%; box-sizing: border-box; padding: 0 16px 16px !important; font-size: 17px; } .cart_item .product-quantity { padding: 4px 11px 5px; } .shop_table tfoot .cart-subtotal th, .shop_table tfoot tr.shipping th { padding: 16px 16px 6px !important; font-size: 10px !important; letter-spacing: .16em !important; } .shop_table tfoot .cart-subtotal td, .shop_table tfoot tr.shipping td { padding: 16px 16px 6px !important; font-size: 14px !important; } .shop_table tfoot .cart-subtotal td { font-size: 15px !important; } .shop_table tfoot .order-total th { padding: 18px 16px 22px 30px !important; font-size: 11px !important; letter-spacing: .18em !important; } .shop_table tfoot .order-total th::before { left: 16px; height: 28px; } .shop_table tfoot .order-total td { padding: 18px 16px 22px !important; } .shop_table tfoot .order-total td strong { font-size: 26px; letter-spacing: -.03em; } .shop_table .woocommerce-Price-currencySymbol { font-size: .65em; } } /* === ADAPT: iPhone SE ≤380 === */ @media (max-width: 380px) { .shop_table thead th { padding: 14px 14px 8px !important; } .shop_table thead .product-name { padding-left: 26px !important; } .shop_table thead .product-name::before { left: 14px; } .shop_table thead .product-total, .shop_table thead .product-subtotal { padding-right: 14px !important; } .shop_table .cart_item td.product-name { padding: 14px 14px 4px !important; } .shop_table .cart_item td.product-total, .shop_table .cart_item td.product-subtotal { padding: 0 14px 14px !important; font-size: 16px; } .shop_table tfoot .cart-subtotal th, .shop_table tfoot .cart-subtotal td, .shop_table tfoot tr.shipping th, .shop_table tfoot tr.shipping td { padding: 14px 14px 6px !important; } .shop_table tfoot .order-total th { padding: 16px 14px 20px 28px !important; font-size: 10px !important; } .shop_table tfoot .order-total th::before { left: 14px; height: 24px; } .shop_table tfoot .order-total td { padding: 16px 14px 20px !important; } .shop_table tfoot .order-total td strong { font-size: 23px; } } /* ========================================================================== 9. КНОПКА КУПОНА — a.showcoupon (dark pill) ========================================================================== */ body a.showcoupon, body .woocommerce a.showcoupon, body .woocommerce-info a.showcoupon, body .woocommerce-form-coupon-toggle a.showcoupon, body .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon { display: inline-flex; align-items: center; gap: 10px; margin-left: 8px; padding: 14px 26px; font: 600 14px/1 inherit; letter-spacing: 0.04em; text-transform: uppercase; color: #fff !important; background: var(--kx-ink-cta); border: 1px solid rgba(139,92,246,0.25); border-radius: 999px; text-decoration: none !important; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(0,0,0,0.35); transition: background-color .2s ease-out, border-color .2s ease-out, box-shadow .25s ease-out, transform .15s ease-out; } /* CSS chevron */ body a.showcoupon::after { content: ''; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 2px; transition: transform .2s ease-out; } body a.showcoupon:hover, body .woocommerce-info a.showcoupon:hover { background: #2A2C34; border-color: rgba(139,92,246,0.55); color: #fff !important; text-decoration: none !important; box-shadow: 0 12px 24px -8px rgba(0,0,0,0.45), 0 0 22px -4px rgba(139,92,246,0.4); } body a.showcoupon:hover::after { transform: rotate(45deg) translate(2px, -2px); } body a.showcoupon:active { transform: scale(0.97); transition-duration: 80ms; } body a.showcoupon:focus-visible { outline: 2px solid var(--kx-v); outline-offset: 3px; } @media (max-width: 768px) { body a.showcoupon { padding: 14px 24px; } } @media (max-width: 480px) { body a.showcoupon { width: 100%; margin: 12px 0 0; padding: 16px 22px; justify-content: center; font-size: 13px; min-height: 48px; box-sizing: border-box; } } @media (max-width: 380px) { body a.showcoupon { padding: 14px 18px; letter-spacing: 0.03em; } } /* ========================================================================== 10. SCROLL-TO-TOP — body a.scrollToTop ========================================================================== */ body a.scrollToTop { width: 52px !important; height: 52px !important; background: linear-gradient(135deg, var(--kx-v) 0%, var(--kx-vd) 100%) !important; background-color: var(--kx-v) !important; border: 2px solid rgba(255,255,255,0.95) !important; border-radius: 50% !important; box-shadow: 0 8px 24px -4px rgba(109,40,217,0.55), 0 0 0 1px rgba(139,92,246,0.3), 0 0 20px -4px rgba(139,92,246,0.4) !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; color: transparent !important; font-size: 0 !important; transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, opacity 0.3s ease-out !important; } body a.scrollToTop::before, body a.scrollToTop::after { content: none !important; } body a.scrollToTop::before { content: '' !important; display: block !important; width: 22px !important; height: 22px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat !important; position: static !important; margin: 0 !important; padding: 0 !important; transition: transform 0.25s ease-out !important; } body a.scrollToTop:hover { transform: translateY(-3px) !important; filter: brightness(1.1); box-shadow: 0 14px 32px -4px rgba(109,40,217,0.7), 0 0 0 1px rgba(139,92,246,0.5), 0 0 28px -4px rgba(139,92,246,0.6) !important; } body a.scrollToTop:hover::before { transform: translateY(-2px) !important; } body a.scrollToTop:active { transform: translateY(0) scale(0.95) !important; transition-duration: 80ms !important; } body a.scrollToTop:focus-visible { outline: 2px solid #E8FF59; outline-offset: 4px; } @media (max-width: 1024px) { /* WoodMart mobile bottom nav висить fixed — піднімаємо scrollToTop вище */ body a.scrollToTop { bottom: calc(var(--wd-mobile-bottom-nav-height, 64px) + 16px) !important; right: 16px !important; } } @media (max-width: 768px) { body a.scrollToTop { width: 48px !important; height: 48px !important; } body a.scrollToTop::before { width: 20px !important; height: 20px !important; } } @media (max-width: 480px) { body a.scrollToTop { width: 46px !important; height: 46px !important; /* bottom вже встановлений в ≤1024 — підіймає над nav-баром */ } body a.scrollToTop::before { width: 18px !important; height: 18px !important; } } /* ========================================================================== 11. REDUCED-MOTION — єдиний об'єднаний блок ========================================================================== */ @media (prefers-reduced-motion: reduce) { .wd-add-btn-replace > a.add-to-cart-loop, .wd-add-btn-replace > a.add_to_cart_button, body a.btn-accent:nth-child(2), body button.wd-buy-now-btn, body #wd-add-to-cart, body button.single_add_to_cart_button { animation: none !important; transition: none !important; } .wd-add-btn-replace > a.add-to-cart-loop:hover, body a.btn-accent:nth-child(2):hover, body button.wd-buy-now-btn:hover, body #wd-add-to-cart:hover, body button.single_add_to_cart_button:hover { transform: none !important; animation: none !important; } body a.showcoupon, body a.showcoupon::after { transition: none; } body a.showcoupon:active { transform: none; } body a.showcoupon:hover::after { transform: rotate(45deg); } body a.scrollToTop, body a.scrollToTop::before { transition: opacity 0.3s ease-out !important; } body a.scrollToTop:hover { transform: none !important; } body a.scrollToTop:hover::before { transform: none !important; } body a.scrollToTop:active { transform: none !important; } } /* === Sticky add-to-cart на мобілі: ховаємо ціну + кнопка full-width === */ @media (max-width: 768px) { /* Прибрати ціну — ТІЛЬКИ в стікі-барі, не в карточці */ .wd-sticky-btn .price, .wd-sticky-btn .wd-price, .wd-sticky-btn .wd-sticky-content .price { display: none !important; } /* Кнопка на всю ширину */ .wd-sticky-btn a.btn, .wd-sticky-btn a.btn-accent, .wd-sticky-btn a.wd-sticky-add-to-cart, body .wd-sticky-btn a.btn-accent:nth-child(2) { width: 100% !important; flex: 1 1 100% !important; max-width: 100% !important; box-sizing: border-box !important; justify-content: center !important; text-align: center !important; } /* Якщо контейнер flex — стрейчимо кнопку */ .wd-sticky-btn, .wd-sticky-btn .wd-sticky-content, .wd-sticky-btn .wd-content { display: flex !important; width: 100% !important; gap: 0 !important; } } /* ========================================================================== KICKSY — WooCommerce price filter (violet, clean slider) ========================================================================== */ /* Slider track */ body .widget_price_filter .price_slider.ui-slider { position: relative !important; height: 6px !important; background: rgba(139, 92, 246, 0.18) !important; background-image: none !important; border: none !important; border-radius: 999px !important; margin: 22px 14px 26px !important; box-shadow: none !important; } /* Range — заповнена частина */ body .widget_price_filter .ui-slider-range { position: absolute !important; top: 0 !important; height: 100% !important; background: linear-gradient(90deg, #8B5CF6, #6D28D9) !important; background-image: linear-gradient(90deg, #8B5CF6, #6D28D9) !important; border: none !important; border-radius: 999px !important; box-shadow: 0 2px 8px rgba(109, 40, 217, 0.3); } /* === HANDLES — чисті violet кружечки === */ body .widget_price_filter .ui-slider-handle, body .widget_price_filter .ui-slider-handle.ui-state-default, body .widget_price_filter .ui-slider-handle.ui-corner-all { /* Reset WoodMart defaults */ background: #fff !important; background-image: none !important; background-color: #fff !important; /* Геометрія */ position: absolute !important; top: 50% !important; width: 22px !important; height: 22px !important; margin: 0 !important; margin-left: -11px !important; padding: 0 !important; /* Форма */ border: 3px solid #8B5CF6 !important; border-radius: 50% !important; /* Стан */ cursor: grab !important; transform: translateY(-50%) !important; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.15) !important; transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, border-color 0.15s ease-out !important; z-index: 2 !important; /* Прибираємо текст/контент за замовчуванням */ font-size: 0 !important; color: transparent !important; text-indent: -9999px !important; overflow: hidden !important; } /* Прибираємо WoodMart-індикатор-риску всередині */ body .widget_price_filter .ui-slider-handle::before, body .widget_price_filter .ui-slider-handle::after { content: none !important; display: none !important; background: none !important; } /* Hover */ body .widget_price_filter .ui-slider-handle:hover { transform: translateY(-50%) scale(1.18) !important; border-color: #6D28D9 !important; box-shadow: 0 6px 20px rgba(139, 92, 246, 0.55), 0 0 0 1px rgba(139, 92, 246, 0.25) !important; } /* Focus / Active */ body .widget_price_filter .ui-slider-handle:focus, body .widget_price_filter .ui-slider-handle.ui-state-active, body .widget_price_filter .ui-slider-handle.ui-state-hover { outline: none !important; border-color: #6D28D9 !important; cursor: grabbing !important; box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.22), 0 6px 20px rgba(139, 92, 246, 0.55) !important; } /* ========================================================================== Bottom row: button + label ========================================================================== */ .widget_price_filter .price_slider_amount { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .widget_price_filter .price_slider_amount .button { padding: 10px 22px; background: linear-gradient(135deg, #8B5CF6, #6D28D9); color: #fff; font: 700 13px/1 inherit; letter-spacing: 0.05em; text-transform: uppercase; border: none; border-radius: 999px; cursor: pointer; box-shadow: 0 6px 16px -4px rgba(109, 40, 217, 0.45); transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, filter 0.2s ease-out; } .widget_price_filter .price_slider_amount .button:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 12px 24px -4px rgba(109, 40, 217, 0.55), 0 0 18px -4px rgba(139, 92, 246, 0.4); } .widget_price_filter .price_slider_amount .button:active { transform: translateY(0) scale(0.97); transition-duration: 80ms; } .widget_price_filter .price_slider_amount .button:focus-visible { outline: 2px solid #E8FF59; outline-offset: 3px; } /* Price label — в рамці-пігулці */ .widget_price_filter .price_label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(139, 92, 246, 0.03)); border: 1px solid rgba(139, 92, 246, 0.25); border-radius: 999px; font: 600 14px/1.2 inherit; color: #111; letter-spacing: -0.005em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 10px -4px rgba(139, 92, 246, 0.15); } .widget_price_filter .price_label .from, .widget_price_filter .price_label .to { font-weight: 700; color: #6D28D9; font-variant-numeric: tabular-nums; } /* === ADAPT ≤768 === */ @media (max-width: 768px) { body .widget_price_filter .ui-slider-handle, body .widget_price_filter .ui-slider-handle.ui-state-default, body .widget_price_filter .ui-slider-handle.ui-corner-all { width: 24px !important; height: 24px !important; margin-left: -12px !important; } } /* === ADAPT ≤480 === */ @media (max-width: 480px) { body .widget_price_filter .ui-slider-handle, body .widget_price_filter .ui-slider-handle.ui-state-default, body .widget_price_filter .ui-slider-handle.ui-corner-all { width: 28px !important; height: 28px !important; margin-left: -14px !important; border-width: 3px !important; } body .widget_price_filter .price_slider.ui-slider { height: 6px !important; margin: 24px 16px 28px !important; } .widget_price_filter .price_slider_amount { flex-direction: column; align-items: stretch; gap: 12px; } .widget_price_filter .price_slider_amount .button { width: 100%; min-height: 44px; padding: 12px 22px; order: 2; } .widget_price_filter .price_label { text-align: center; order: 1; } } /* === REDUCED-MOTION === */ @media (prefers-reduced-motion: reduce) { body .widget_price_filter .ui-slider-handle, .widget_price_filter .price_slider_amount .button { transition: none !important; } body .widget_price_filter .ui-slider-handle:hover { transform: translateY(-50%) !important; } .widget_price_filter .price_slider_amount .button:hover { transform: none; } } /* ========================================================================== KICKSY — sidebar widget titles (.widget-title) Подвійна рамка: внутрішня violet pill + зовнішня тонка обводка ========================================================================== */ body .wd-widget .widget-title, body .sidebar-widget .widget-title, body aside .widget-title, body .widget .widget-title { /* Inline-shrink + центрування */ display: table !important; width: auto !important; max-width: calc(100% - 16px) !important; margin: 0 auto 22px !important; /* Внутрішня рамка (pill) */ padding: 10px 26px !important; background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.04)) !important; border: 1px solid rgba(139, 92, 246, 0.4) !important; border-radius: 999px !important; /* Зовнішня рамка (через box-shadow) + глибина */ box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(139, 92, 246, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 14px -4px rgba(139, 92, 246, 0.18) !important; /* Typography */ text-align: center !important; font: 700 13px/1.3 inherit !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #6D28D9 !important; box-sizing: border-box; } /* === ADAPT ≤480 === */ @media (max-width: 480px) { body .wd-widget .widget-title, body .sidebar-widget .widget-title, body aside .widget-title, body .widget .widget-title { font-size: 12px !important; padding: 9px 22px !important; letter-spacing: 0.1em !important; margin-bottom: 18px !important; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(139, 92, 246, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 10px -4px rgba(139, 92, 246, 0.18) !important; } } /* ========================================================================== KICKSY — компактна ціна для вузьких контекстів Search dropdown, mini-cart, suggestions ========================================================================== */ /* Контейнери де ціна "стискається" */ .wd-search-results .price, .wd-dropdown-results .price, .wd-quick-search .price, .wd-search-element .price, .wd-search-result .price, .wd-suggestion .price, .autocomplete-suggestions .price, .product-search-results .price, .wd-cart-mini-product .price, .widget_shopping_cart .price, .cart_list .price { flex-wrap: nowrap !important; padding: 4px 10px !important; gap: 5px !important; border-radius: 6px !important; } .wd-search-results .price del, .wd-search-results .price del bdi, .wd-search-results .price ins, .wd-search-results .price ins bdi, .wd-search-results .price .woocommerce-Price-amount, .wd-dropdown-results .price del, .wd-dropdown-results .price ins, .wd-quick-search .price del, .wd-quick-search .price ins, .wd-search-element .price del, .wd-search-element .price ins, .wd-suggestion .price del, .wd-suggestion .price ins, .autocomplete-suggestions .price del, .autocomplete-suggestions .price ins, .wd-cart-mini-product .price del, .wd-cart-mini-product .price ins, .widget_shopping_cart .price del, .widget_shopping_cart .price ins, .cart_list .price del, .cart_list .price ins { font-size: 12px !important; font-weight: 700 !important; white-space: nowrap !important; } /* Bullet-роздільник менший */ .wd-search-results .price ins::before, .wd-dropdown-results .price ins::before, .wd-quick-search .price ins::before, .wd-search-element .price ins::before, .wd-suggestion .price ins::before, .autocomplete-suggestions .price ins::before, .wd-cart-mini-product .price ins::before, .widget_shopping_cart .price ins::before, .cart_list .price ins::before { font-size: 10px !important; margin-right: 2px !important; } /* ========================================================================== KICKSY — кнопки "Закрити" в drawer-панелях Покриває: WoodMart side-widget + Elementor menu-cart close button ========================================================================== */ /* ── Спільні стилі pill-кнопки ──────────────────────────────────────────── */ body .wd-heading .close-side-widget a, body .close-side-widget a, body .elementor-menu-cart__close-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: auto !important; height: auto !important; padding: 10px 20px !important; font: 600 13px/1 inherit !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #fff !important; background: linear-gradient(135deg, #1a1b20 0%, #0E0F12 100%) !important; background-image: linear-gradient(135deg, #1a1b20 0%, #0E0F12 100%) !important; background-color: #0E0F12 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 999px !important; text-decoration: none !important; cursor: pointer !important; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.35) !important; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out !important; } /* ── WoodMart side-widget (Фільтри, обліковий, тощо) ────────────────────── */ body .wd-heading .close-side-widget .wd-action-icon, body .close-side-widget .wd-action-icon { color: #fff !important; font-size: 13px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; } body .wd-heading .close-side-widget .wd-action-icon::before, body .close-side-widget .wd-action-icon::before { color: #fff !important; } body .wd-heading .close-side-widget .wd-action-text, body .close-side-widget .wd-action-text { color: #fff !important; font-weight: 600 !important; letter-spacing: 0.04em !important; } /* ── Elementor menu-cart close — повний reset eicons + dimensions ──────── */ html body .elementor-menu-cart__close-button { /* Скасовуємо Elementor inline-розміри */ width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; /* Скасовуємо eicons font */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; /* Прибираємо default Elementor background-image (SVG x icon) */ background-image: linear-gradient(135deg, #1a1b20 0%, #0E0F12 100%) !important; -webkit-mask: none !important; mask: none !important; } html body .elementor-menu-cart__close-button::before { content: '×' !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; font-size: 22px !important; font-weight: 400 !important; line-height: 1 !important; color: #fff !important; background: none !important; background-image: none !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: inline-block !important; position: static !important; transform: none !important; -webkit-mask: none !important; mask: none !important; } html body .elementor-menu-cart__close-button::after { content: 'ЗАКРИТИ' !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #fff !important; display: inline-block !important; position: static !important; transform: none !important; -webkit-transform: none !important; rotate: 0deg !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; background-color: transparent !important; background-image: none !important; border: none !important; -webkit-mask: none !important; mask: none !important; } /* Якщо Elementor вкладає з eicons — ховаємо */ html body .elementor-menu-cart__close-button > i, html body .elementor-menu-cart__close-button > svg, html body .elementor-menu-cart__close-button > span { display: none !important; } /* ── Hover ──────────────────────────────────────────────────────────────── */ body .wd-heading .close-side-widget a:hover, body .close-side-widget a:hover, body .elementor-menu-cart__close-button:hover { transform: translateY(-1px); background: linear-gradient(135deg, #2a2b30 0%, #1a1b20 100%) !important; background-image: linear-gradient(135deg, #2a2b30 0%, #1a1b20 100%) !important; border-color: rgba(139, 92, 246, 0.4) !important; color: #fff !important; text-decoration: none !important; box-shadow: 0 10px 20px -6px rgba(0, 0, 0, 0.45), 0 0 18px -4px rgba(139, 92, 246, 0.35) !important; } /* ── Active ─────────────────────────────────────────────────────────────── */ body .wd-heading .close-side-widget a:active, body .close-side-widget a:active, body .elementor-menu-cart__close-button:active { transform: translateY(0) scale(0.96); transition-duration: 80ms !important; } /* ── Focus ──────────────────────────────────────────────────────────────── */ body .wd-heading .close-side-widget a:focus-visible, body .close-side-widget a:focus-visible, body .elementor-menu-cart__close-button:focus-visible { outline: 2px solid #8B5CF6; outline-offset: 3px; } /* === ADAPT ≤480 === */ @media (max-width: 480px) { body .wd-heading .close-side-widget a, body .close-side-widget a, body .elementor-menu-cart__close-button { padding: 12px 22px !important; font-size: 13px !important; min-height: 44px !important; } } /* === REDUCED-MOTION === */ @media (prefers-reduced-motion: reduce) { body .close-side-widget a, body .elementor-menu-cart__close-button { transition: none !important; } body .close-side-widget a:hover, body .elementor-menu-cart__close-button:hover { transform: none !important; } body .close-side-widget a:active, body .elementor-menu-cart__close-button:active { transform: none !important; } } /* ========================================================================== KICKSY — title в drawer-панелях (.wd-heading .title) Покриває: login drawer (Увійти), filter drawer, account drawer НЕ зачіпає .close-side-widget .wd-action-text — окремий селектор ========================================================================== */ body .wd-heading .title, body .wd-heading > .title, body .wd-heading span.title { display: inline-block !important; position: relative !important; margin: 0 !important; padding: 0 0 10px 0 !important; /* Display-level typography */ font-family: inherit !important; font-size: clamp(18px, 1vw + 16px, 22px) !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; color: #111 !important; text-transform: none !important; text-wrap: balance; } /* Violet accent bar під текстом */ body .wd-heading .title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; background: linear-gradient(90deg, #8B5CF6, #6D28D9); border-radius: 2px; box-shadow: 0 1px 4px rgba(139, 92, 246, 0.4); } /* === ADAPT ≤768 === */ @media (max-width: 768px) { body .wd-heading .title { font-size: 20px !important; padding-bottom: 9px !important; } body .wd-heading .title::after { width: 28px; height: 3px; } } /* === ADAPT ≤480 === */ @media (max-width: 480px) { body .wd-heading .title { font-size: 19px !important; padding-bottom: 8px !important; } body .wd-heading .title::after { width: 26px; height: 2.5px; } } /* ========================================================================== KICKSY — порожній міні-кошик: bag icon + текст + CTA "Переглянути каталог" Кнопка реалізована через ::after pseudo + JS робить всю область клікабельною ========================================================================== */ body .woocommerce-mini-cart__empty-message, body .widget_shopping_cart_content .woocommerce-mini-cart__empty-message, body .elementor-menu-cart__main .woocommerce-mini-cart__empty-message { /* Layout — fill + center */ display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; min-height: 60vh !important; padding: 40px 24px !important; margin: 0 !important; box-sizing: border-box !important; /* Typography */ font-family: inherit !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.5 !important; letter-spacing: -0.005em !important; color: #111 !important; /* JS робить це клікабельним → курсор pointer */ cursor: pointer !important; user-select: none; } /* === Icon circle === */ body .woocommerce-mini-cart__empty-message::before { content: ''; display: block; width: 88px; height: 88px; margin: 0 auto 22px; background-color: rgba(139, 92, 246, 0.08); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%236D28D9'%3E%3Cpath d='M352 160v-32C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128v32H0v272c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V160h-96zm-192-32c0-35.29 28.71-64 64-64s64 28.71 64 64v32h-128v-32zm160 120c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zm-192 0c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24z'/%3E%3C/svg%3E"); background-size: 40px; background-repeat: no-repeat; background-position: center; border: 1px solid rgba(139, 92, 246, 0.25); border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 24px -8px rgba(139, 92, 246, 0.25); } /* === Violet pill CTA "ПЕРЕГЛЯНУТИ КАТАЛОГ" === */ body .woocommerce-mini-cart__empty-message::after { content: 'ПЕРЕГЛЯНУТИ КАТАЛОГ'; display: inline-flex; align-items: center; justify-content: center; margin-top: 26px; padding: 14px 30px; background: linear-gradient(135deg, #8B5CF6, #6D28D9); color: #fff; font: 700 13px/1 inherit; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; box-shadow: 0 10px 24px -8px rgba(109, 40, 217, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15); transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, filter 0.2s ease-out; } /* Hover на всю empty-area піднімає pill */ body .woocommerce-mini-cart__empty-message:hover::after { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 14px 28px -8px rgba(109, 40, 217, 0.6), 0 0 22px -4px rgba(139, 92, 246, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2); } /* Active — pill scale */ body .woocommerce-mini-cart__empty-message:active::after { transform: translateY(0) scale(0.97); transition-duration: 80ms; } /* === ADAPT ≤768 === */ @media (max-width: 768px) { body .woocommerce-mini-cart__empty-message { min-height: 55vh !important; padding: 32px 20px !important; font-size: 15px !important; } body .woocommerce-mini-cart__empty-message::before { width: 80px; height: 80px; margin-bottom: 20px; background-size: 36px; } body .woocommerce-mini-cart__empty-message::after { margin-top: 22px; padding: 14px 26px; font-size: 12px; } } /* === ADAPT ≤480 === */ @media (max-width: 480px) { body .woocommerce-mini-cart__empty-message { min-height: 50vh !important; padding: 28px 18px !important; font-size: 15px !important; } body .woocommerce-mini-cart__empty-message::before { width: 72px; height: 72px; margin-bottom: 18px; background-size: 32px; } body .woocommerce-mini-cart__empty-message::after { margin-top: 20px; padding: 14px 22px; min-height: 44px; font-size: 12px; letter-spacing: 0.04em; } } /* === REDUCED-MOTION === */ @media (prefers-reduced-motion: reduce) { body .woocommerce-mini-cart__empty-message::after { transition: none; } body .woocommerce-mini-cart__empty-message:hover::after { transform: none; } body .woocommerce-mini-cart__empty-message:active::after { transform: none; } } /* ========================================================================== KICKSY — My Account (WooCommerce + Woodmart + Elementor) Стильний CSS для сторінки /my-account/ Mobile-first. GPU-only анімації. Кастомні easing-криві (Emil Kowalski). Бренд-палітра kicksy: #8B5CF6 accent, #111 ink, #FFF surface. Вставити в: WP Admin → Зовнішній вигляд → Налаштувати → Додатковий CSS ========================================================================== */ /* -------------------------------------------------------------------------- 1. ТОКЕНИ (scoped до сторінки My Account) -------------------------------------------------------------------------- */ .wd-my-account-wrapper { --acc-ink: #111111; --acc-charcoal: #2C2C2A; --acc-muted: #6B6B73; --acc-line: #ECECF1; --acc-surface: #FFFFFF; --acc-surface-2: #FAFAFB; --acc-accent: #8B5CF6; --acc-accent-2: #6D3DF0; --acc-accent-tint:rgba(139, 92, 246, 0.10); --acc-danger: #E5484D; --acc-radius-lg: 20px; --acc-radius-md: 14px; --acc-radius-sm: 10px; --acc-shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.04), 0 1px 1px rgba(17, 17, 17, 0.03); --acc-shadow-md: 0 6px 18px rgba(17, 17, 17, 0.06), 0 2px 4px rgba(17, 17, 17, 0.04); --acc-shadow-lg: 0 18px 40px rgba(17, 17, 17, 0.10), 0 4px 10px rgba(17, 17, 17, 0.05); --acc-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --acc-ease-soft: cubic-bezier(0.32, 0.72, 0, 1); --acc-dur-fast: 140ms; --acc-dur-med: 220ms; } /* -------------------------------------------------------------------------- 2. WRAPPER + ВНУТРІШНЯ СІТКА (mobile-first) -------------------------------------------------------------------------- */ .wd-my-account-wrapper { gap: 18px; padding: 8px 0 40px; } /* На мобільному — одна колонка, sidebar над контентом */ .wd-my-account-sidebar, .woocommerce-MyAccount-content { width: 100%; } /* -------------------------------------------------------------------------- 3. SIDEBAR — заголовок -------------------------------------------------------------------------- */ .wd-my-account-sidebar .woocommerce-MyAccount-title.entry-title { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acc-muted); margin: 4px 4px 14px; padding: 0; border: 0; } /* -------------------------------------------------------------------------- 4. SIDEBAR — NAV -------------------------------------------------------------------------- */ .woocommerce-MyAccount-navigation { background: var(--acc-surface); border: 1px solid var(--acc-line); border-radius: var(--acc-radius-lg); padding: 10px; box-shadow: var(--acc-shadow-sm); } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .woocommerce-MyAccount-navigation-link { position: relative; margin: 0; border: 0; background: transparent; border-radius: var(--acc-radius-md); } .woocommerce-MyAccount-navigation-link a { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--acc-charcoal); text-decoration: none; border-radius: var(--acc-radius-md); transition: background-color var(--acc-dur-med) var(--acc-ease-out), color var(--acc-dur-med) var(--acc-ease-out), transform var(--acc-dur-fast) var(--acc-ease-out); } /* Видаляємо випадкові
які пхає Woodmart всередину */ .woocommerce-MyAccount-navigation-link a br { display: none; } /* Маленький leading-dot перед текстом — спокійний індикатор */ .woocommerce-MyAccount-navigation-link a::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--acc-line); transition: background-color var(--acc-dur-med) var(--acc-ease-out), transform var(--acc-dur-med) var(--acc-ease-out); } /* Hover — лише на пристроях з мишкою */ @media (hover: hover) and (pointer: fine) { .woocommerce-MyAccount-navigation-link:not(.is-active) a:hover { background: var(--acc-surface-2); color: var(--acc-ink); } .woocommerce-MyAccount-navigation-link:not(.is-active) a:hover::before { background: var(--acc-accent); transform: scale(1.4); } } /* Active — фірмовий фіолет, білий текст */ .woocommerce-MyAccount-navigation-link.is-active a { background: linear-gradient(135deg, var(--acc-accent) 0%, var(--acc-accent-2) 100%); color: #FFFFFF; box-shadow: 0 6px 16px rgba(139, 92, 246, 0.28); } .woocommerce-MyAccount-navigation-link.is-active a::before { background: #FFFFFF; transform: scale(1.4); } /* Logout — приглушений-червоний tint */ .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--acc-muted); } @media (hover: hover) and (pointer: fine) { .woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: var(--acc-danger); background: rgba(229, 72, 77, 0.06); } .woocommerce-MyAccount-navigation-link--customer-logout a:hover::before { background: var(--acc-danger); } } /* Press feedback */ .woocommerce-MyAccount-navigation-link a:active { transform: scale(0.985); } /* Focus ring (a11y) */ .woocommerce-MyAccount-navigation-link a:focus-visible { outline: 2px solid var(--acc-accent); outline-offset: 2px; } /* -------------------------------------------------------------------------- 5. CONTENT — welcome notice -------------------------------------------------------------------------- */ .woocommerce-MyAccount-content > .woocommerce-notices-wrapper { margin-bottom: 18px; } .woocommerce-MyAccount-content .woocommerce-message { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 18px 16px 20px; background: linear-gradient(135deg, #FAF7FF 0%, #FFFFFF 100%); border: 1px solid var(--acc-accent-tint); border-radius: var(--acc-radius-lg); color: var(--acc-ink); font-size: 15px; line-height: 1.5; box-shadow: var(--acc-shadow-sm); } /* Лівий accent-бар замість дефолтної woocommerce-стрілки */ .woocommerce-MyAccount-content .woocommerce-message::before, .woocommerce-MyAccount-content .woocommerce-message::after { display: none !important; } .woocommerce-MyAccount-content .woocommerce-message { padding-left: 22px; } .woocommerce-MyAccount-content .woocommerce-message { border-left: 4px solid var(--acc-accent); } .woocommerce-MyAccount-content .woocommerce-message strong { color: var(--acc-accent-2); font-weight: 700; } /* -------------------------------------------------------------------------- 6. CONTENT — основні параграфи -------------------------------------------------------------------------- */ .woocommerce-MyAccount-content > p { margin: 0 0 16px; padding: 18px 20px; background: var(--acc-surface); border: 1px solid var(--acc-line); border-radius: var(--acc-radius-lg); font-size: 15px; line-height: 1.65; color: var(--acc-charcoal); box-shadow: var(--acc-shadow-sm); } .woocommerce-MyAccount-content > p strong { color: var(--acc-ink); font-weight: 700; } .woocommerce-MyAccount-content > p a { color: var(--acc-accent-2); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(109, 61, 240, 0.25); transition: color var(--acc-dur-med) var(--acc-ease-out), border-color var(--acc-dur-med) var(--acc-ease-out); } @media (hover: hover) and (pointer: fine) { .woocommerce-MyAccount-content > p a:hover { color: var(--acc-accent); border-color: var(--acc-accent); } } /* -------------------------------------------------------------------------- 6.1 ВІТАЛЬНА КАРТКА — перший

з ім'ям користувача "Вітаємо, NAME (не NAME? Вийти)" -------------------------------------------------------------------------- */ .woocommerce-MyAccount-content > p:first-of-type { position: relative; padding: 22px 22px 22px 96px; min-height: 56px; background: radial-gradient(120% 140% at 0% 0%, rgba(139, 92, 246, 0.10) 0%, transparent 55%), linear-gradient(135deg, #FFFFFF 0%, #FBF9FF 100%); border: 1px solid var(--acc-accent-tint); border-radius: var(--acc-radius-lg); box-shadow: var(--acc-shadow-md); color: var(--acc-charcoal); /* font-size: 0 стирає bare text nodes "(не ", "?", ")" — їх не можна вибрати селектором */ font-size: 0; } /* Прибираємо паразитну дужку-знак-запитання-дужку: другий + сусідні text nodes */ .woocommerce-MyAccount-content > p:first-of-type strong:nth-of-type(2) { display: none; } /* Інжектимо "Вітаємо, " перед іменем користувача */ .woocommerce-MyAccount-content > p:first-of-type strong:first-of-type::before { content: "Вітаємо, "; font-size: 16px; font-weight: 500; color: var(--acc-charcoal); letter-spacing: 0; } /* М'яка декоративна "лампочка" в правому верхньому куті */ .woocommerce-MyAccount-content > p:first-of-type::after { content: ""; position: absolute; top: -60px; right: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(closest-side, rgba(139, 92, 246, 0.18), transparent 70%); pointer-events: none; } /* Аватар (SVG-іконка користувача на градієнтному колі) */ .woocommerce-MyAccount-content > p:first-of-type::before { content: ""; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; background: url("data:image/svg+xml;utf8,") center / 28px no-repeat, linear-gradient(135deg, var(--acc-accent) 0%, var(--acc-accent-2) 100%); box-shadow: 0 10px 24px rgba(139, 92, 246, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25); } /* Велике ім'я (перший ) */ .woocommerce-MyAccount-content > p:first-of-type strong:first-of-type { font-size: 19px; font-weight: 800; color: var(--acc-ink); letter-spacing: -0.01em; } /* Друге ім'я у фразі "не …?" — приглушене */ .woocommerce-MyAccount-content > p:first-of-type strong:nth-of-type(2) { font-weight: 600; color: var(--acc-muted); } /* Лінк "Вийти" — пілюля */ .woocommerce-MyAccount-content > p:first-of-type a { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; padding: 5px 12px; vertical-align: middle; background: rgba(229, 72, 77, 0.10); color: var(--acc-danger); font-size: 13px; font-weight: 600; border: 0; border-radius: 999px; text-decoration: none; transition: background-color var(--acc-dur-med) var(--acc-ease-out), color var(--acc-dur-med) var(--acc-ease-out), transform var(--acc-dur-fast) var(--acc-ease-out); } .woocommerce-MyAccount-content > p:first-of-type a::after { content: "→"; font-weight: 700; transition: transform var(--acc-dur-med) var(--acc-ease-out); } @media (hover: hover) and (pointer: fine) { .woocommerce-MyAccount-content > p:first-of-type a:hover { background: var(--acc-danger); color: #FFFFFF; border-color: transparent; } .woocommerce-MyAccount-content > p:first-of-type a:hover::after { transform: translateX(2px); } } .woocommerce-MyAccount-content > p:first-of-type a:active { transform: scale(0.96); } .woocommerce-MyAccount-content > p:first-of-type a:focus-visible { outline: 2px solid var(--acc-danger); outline-offset: 2px; } /* На дуже вузьких екранах — аватар вгорі, текст знизу */ @media (max-width: 480px) { .woocommerce-MyAccount-content > p:first-of-type { padding: 80px 18px 18px 18px; min-height: 0; } .woocommerce-MyAccount-content > p:first-of-type::before { top: 18px; left: 18px; transform: none; width: 48px; height: 48px; background-size: 24px, auto; } } /* На широких — більше повітря */ @media (min-width: 1025px) { .woocommerce-MyAccount-content > p:first-of-type { padding: 26px 28px 26px 110px; min-height: 64px; } .woocommerce-MyAccount-content > p:first-of-type::before { left: 28px; width: 64px; height: 64px; } .woocommerce-MyAccount-content > p:first-of-type strong:first-of-type { font-size: 22px; } } /* -------------------------------------------------------------------------- 6.2 ІНФО-КАРТКА — другий

з підказкою про можливості акаунту -------------------------------------------------------------------------- */ .woocommerce-MyAccount-content > p:nth-of-type(2) { position: relative; padding: 18px 20px 18px 68px; background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFB 100%); border: 1px solid var(--acc-line); border-radius: var(--acc-radius-lg); box-shadow: var(--acc-shadow-sm); font-size: 15px; line-height: 1.7; color: var(--acc-charcoal); } /* Info-іконка зліва */ .woocommerce-MyAccount-content > p:nth-of-type(2)::before { content: ""; position: absolute; left: 20px; top: 18px; width: 36px; height: 36px; border-radius: 10px; background: url("data:image/svg+xml;utf8,") center / 20px no-repeat, var(--acc-accent-tint); } /* Inline-лінки — без бордеру з базового стилю, але з "ростучим" highlight */ .woocommerce-MyAccount-content > p:nth-of-type(2) a { position: relative; display: inline; padding: 0 2px; color: var(--acc-accent-2); font-weight: 700; text-decoration: none; border-bottom: 0; background-image: linear-gradient(var(--acc-accent-tint), var(--acc-accent-tint)); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--acc-dur-med) var(--acc-ease-out), color var(--acc-dur-med) var(--acc-ease-out); } @media (hover: hover) and (pointer: fine) { .woocommerce-MyAccount-content > p:nth-of-type(2) a:hover { color: var(--acc-accent-2); background-size: 100% 100%; } } .woocommerce-MyAccount-content > p:nth-of-type(2) a:focus-visible { outline: 2px solid var(--acc-accent); outline-offset: 2px; border-radius: 4px; } /* Mobile — компактніше */ @media (max-width: 480px) { .woocommerce-MyAccount-content > p:nth-of-type(2) { padding: 16px 16px 16px 60px; } .woocommerce-MyAccount-content > p:nth-of-type(2)::before { left: 16px; top: 16px; width: 32px; height: 32px; background-size: 18px, auto; } } /* Desktop — більше повітря */ @media (min-width: 1025px) { .woocommerce-MyAccount-content > p:nth-of-type(2) { padding: 20px 24px 20px 76px; } .woocommerce-MyAccount-content > p:nth-of-type(2)::before { left: 24px; top: 20px; } } /* -------------------------------------------------------------------------- 7. QUICK-ACCESS CARDS — .wd-my-account-links -------------------------------------------------------------------------- */ .wd-my-account-links.wd-nav-my-acc { --wd-col-lg: 4; --wd-col-md: 3; --wd-col-sm: 2; --wd-gap-lg: 14px; --wd-gap-sm: 12px; list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .wd-my-account-links > li { margin: 0; list-style: none; } .wd-my-account-links > li > a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 124px; padding: 18px 14px; background: var(--acc-surface); border: 1px solid var(--acc-line); border-radius: var(--acc-radius-lg); color: var(--acc-charcoal); text-align: center; text-decoration: none; box-shadow: var(--acc-shadow-sm); transition: transform var(--acc-dur-med) var(--acc-ease-out), box-shadow var(--acc-dur-med) var(--acc-ease-out), border-color var(--acc-dur-med) var(--acc-ease-out), background-color var(--acc-dur-med) var(--acc-ease-out); will-change: transform; } /* Видаляємо паразитні
з шаблону Woodmart */ .wd-my-account-links > li > a br { display: none; } /* Іконка */ .wd-my-account-links .wd-nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--acc-accent-tint); color: var(--acc-accent-2); font-size: 22px; line-height: 1; transition: background-color var(--acc-dur-med) var(--acc-ease-out), color var(--acc-dur-med) var(--acc-ease-out), transform var(--acc-dur-med) var(--acc-ease-out); } /* Woodmart рендерить іконку як ::before на .wd-nav-icon — підхопить колір */ .wd-my-account-links .wd-nav-icon::before { font-size: 22px; line-height: 1; } /* Текст */ .wd-my-account-links .nav-link-text { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--acc-ink); letter-spacing: -0.005em; } /* HOVER (тільки fine-pointer) — підйом + кольоровий бордер */ @media (hover: hover) and (pointer: fine) { .wd-my-account-links > li > a:hover { transform: translateY(-2px); border-color: var(--acc-accent); box-shadow: var(--acc-shadow-md); } .wd-my-account-links > li > a:hover .wd-nav-icon { background: var(--acc-accent); color: #FFFFFF; transform: scale(1.05); } } /* PRESS — миттєвий тактильний фідбек */ .wd-my-account-links > li > a:active { transform: scale(0.97); transition-duration: var(--acc-dur-fast); } /* Focus a11y */ .wd-my-account-links > li > a:focus-visible { outline: 2px solid var(--acc-accent); outline-offset: 3px; } /* Logout-карточка — приглушений-червоний accent */ .wd-my-account-links .wd-my-acc-customer-logout > a .wd-nav-icon { background: rgba(229, 72, 77, 0.10); color: var(--acc-danger); } @media (hover: hover) and (pointer: fine) { .wd-my-account-links .wd-my-acc-customer-logout > a:hover { border-color: var(--acc-danger); } .wd-my-account-links .wd-my-acc-customer-logout > a:hover .wd-nav-icon { background: var(--acc-danger); color: #FFFFFF; } } /* -------------------------------------------------------------------------- 8. SECONDARY ELEMENTOR CONTAINER (порожній блок під списком) -------------------------------------------------------------------------- */ .elementor-element-5536795 { min-height: 0; } /* -------------------------------------------------------------------------- 9. BREAKPOINTS — від мобілки вгору -------------------------------------------------------------------------- */ /* Tablet (≥600px) — 3 колонки у grid-карточок */ @media (min-width: 600px) { .wd-my-account-links.wd-nav-my-acc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .wd-my-account-links > li > a { min-height: 140px; } } /* Desktop (≥1025px) — двоколонкова сітка sidebar/content + 4 карточки */ @media (min-width: 1025px) { .wd-my-account-wrapper { gap: 30px; } .woocommerce-MyAccount-navigation { position: sticky; top: 90px; padding: 14px; } .wd-my-account-links.wd-nav-my-acc { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .wd-my-account-links > li > a { min-height: 148px; } .woocommerce-MyAccount-content .woocommerce-message, .woocommerce-MyAccount-content > p { padding: 20px 22px; } } /* -------------------------------------------------------------------------- 10. STAGGER ENTRY (легкий каскад при заході на сторінку) -------------------------------------------------------------------------- */ .wd-my-account-links > li { opacity: 0; transform: translateY(6px); animation: kicksy-acc-in 320ms var(--acc-ease-out) forwards; } .wd-my-account-links > li:nth-child(1) { animation-delay: 0ms; } .wd-my-account-links > li:nth-child(2) { animation-delay: 40ms; } .wd-my-account-links > li:nth-child(3) { animation-delay: 80ms; } .wd-my-account-links > li:nth-child(4) { animation-delay: 120ms; } .wd-my-account-links > li:nth-child(5) { animation-delay: 160ms; } .wd-my-account-links > li:nth-child(6) { animation-delay: 200ms; } .wd-my-account-links > li:nth-child(7) { animation-delay: 240ms; } @keyframes kicksy-acc-in { to { opacity: 1; transform: translateY(0); } } /* -------------------------------------------------------------------------- 11. REDUCED MOTION — поважаємо налаштування користувача -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .wd-my-account-wrapper *, .wd-my-account-wrapper *::before, .wd-my-account-wrapper *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .wd-my-account-links > li { opacity: 1; transform: none; } } /* ========================================================================== KICKSY — мобільні контакти у side-меню (icon-list) Стилі застосовуються ТІЛЬКИ до widget ID 6dd6405 (контактна інформація) Не зачіпає інші icon-list (графік роботи, тощо) ========================================================================== */ /* === Загальна рамка-контейнер === */ body .elementor-element-6dd6405 .elementor-icon-list-items { display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 12px 0 !important; padding: 14px !important; list-style: none !important; position: relative; background: linear-gradient(180deg, #fff, #FAFAF7) !important; border: 1px solid rgba(139, 92, 246, 0.25) !important; border-radius: 20px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 24px -8px rgba(139, 92, 246, 0.15), 0 2px 6px rgba(17, 17, 17, 0.04) !important; } /* === Заголовок "КОНТАКТНА ІНФОРМАЦІЯ" === */ body .elementor-element-6dd6405 .elementor-icon-list-items::before { content: 'КОНТАКТНА ІНФОРМАЦІЯ'; display: block; text-align: center; padding: 6px 0 12px; margin: 0 0 6px; font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.18em; text-transform: uppercase; color: #6D28D9; border-bottom: 1px solid rgba(139, 92, 246, 0.15); } body .elementor-element-6dd6405 .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; } /* === Row-картка === */ body .elementor-element-6dd6405 .elementor-icon-list-item > a { display: flex !important; align-items: center !important; gap: 12px !important; padding: 8px 12px !important; min-height: 48px !important; background: rgba(17, 17, 17, 0.02) !important; border: 1px solid rgba(17, 17, 17, 0.05) !important; border-radius: 12px !important; color: #111 !important; text-decoration: none !important; transition: background-color 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out !important; } body .elementor-element-6dd6405 .elementor-icon-list-item > a:hover { background: rgba(139, 92, 246, 0.06) !important; border-color: rgba(139, 92, 246, 0.25) !important; transform: translateX(2px); } body .elementor-element-6dd6405 .elementor-icon-list-item > a:active { transform: scale(0.98); transition-duration: 80ms !important; } /* === Icon circle — ВСІ чорні === */ body .elementor-element-6dd6405 .elementor-icon-list-icon { flex-shrink: 0 !important; width: 40px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, #1a1b20, #0E0F12) !important; border-radius: 50% !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.35) !important; } body .elementor-element-6dd6405 .elementor-icon-list-icon svg { width: 18px !important; height: 18px !important; fill: #fff !important; } /* === Text === */ body .elementor-element-6dd6405 .elementor-icon-list-text { flex: 1 !important; font: 600 14px/1.3 inherit !important; color: #111 !important; letter-spacing: -0.005em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* === ADAPT ≤480 === */ @media (max-width: 480px) { body .elementor-element-6dd6405 .elementor-icon-list-items { padding: 12px !important; gap: 7px !important; border-radius: 18px !important; } body .elementor-element-6dd6405 .elementor-icon-list-items::before { font-size: 10px; letter-spacing: 0.16em; padding: 4px 0 11px; } body .elementor-element-6dd6405 .elementor-icon-list-item > a { padding: 8px 10px !important; gap: 11px !important; } body .elementor-element-6dd6405 .elementor-icon-list-icon { width: 38px !important; height: 38px !important; } body .elementor-element-6dd6405 .elementor-icon-list-icon svg { width: 17px !important; height: 17px !important; } body .elementor-element-6dd6405 .elementor-icon-list-text { font-size: 13.5px !important; } } /* === REDUCED-MOTION === */ @media (prefers-reduced-motion: reduce) { body .elementor-element-6dd6405 .elementor-icon-list-item > a { transition: none !important; } body .elementor-element-6dd6405 .elementor-icon-list-item > a:hover, body .elementor-element-6dd6405 .elementor-icon-list-item > a:active { transform: none !important; } } @media (min-width: 1025px) { /* ================================================================ Kicksy mega-menu — SCOPED TO .menu-mega-dropdown ONLY Не затрагивает: корзину, личный кабинет, поиск, другие dropdown'ы ================================================================ */ /* ---------- Tokens (живут только на меге, не текут наружу) ---------- */ .menu.wd-nav > li.menu-mega-dropdown, .menu.wd-nav > li.menu-mega-dropdown .wd-dropdown-menu { --k-brand: oklch(0.62 0.20 293); --k-brand-hover: oklch(0.55 0.22 293); --k-brand-tint: oklch(0.62 0.20 293 / 0.08); --k-brand-soft: oklch(0.62 0.20 293 / 0.14); --k-brand-glow: oklch(0.62 0.20 293 / 0.35); --k-ink: oklch(0.15 0.008 293); --k-charcoal: oklch(0.18 0.008 293); --k-canvas-soft: oklch(0.97 0.005 293); --k-ease: cubic-bezier(0.23, 1, 0.32, 1); --k-d: 220ms; --k-d-fast: 160ms; } /* ================================================================ Mega-dropdown container — ТОЛЬКО внутри .menu-mega-dropdown ================================================================ */ .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu { display: flex !important; flex-wrap: nowrap; gap: 6px; padding: 18px 14px !important; align-items: stretch; } .menu-mega-dropdown .wd-dropdown-menu .container { overflow: hidden; } /* ---------- Brand cell ---------- */ .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col { flex: 1 1 0; min-width: 0; margin: 0 !important; position: relative; opacity: 0; transform: translateY(6px); } /* Stagger при открытии меги */ .menu.wd-nav > li.menu-mega-dropdown:hover .wd-sub-menu > li.wd-col, .menu.wd-nav > li.menu-mega-dropdown.wd-event-hover .wd-sub-menu > li.wd-col { animation: kFadeUp 380ms var(--k-ease) both; } .menu-mega-dropdown .wd-sub-menu > li.wd-col:nth-child(1) { animation-delay: 0ms; } .menu-mega-dropdown .wd-sub-menu > li.wd-col:nth-child(2) { animation-delay: 40ms; } .menu-mega-dropdown .wd-sub-menu > li.wd-col:nth-child(3) { animation-delay: 80ms; } .menu-mega-dropdown .wd-sub-menu > li.wd-col:nth-child(4) { animation-delay: 120ms; } .menu-mega-dropdown .wd-sub-menu > li.wd-col:nth-child(5) { animation-delay: 160ms; } .menu-mega-dropdown .wd-sub-menu > li.wd-col:nth-child(6) { animation-delay: 200ms; } .menu-mega-dropdown .wd-sub-menu > li.wd-col:nth-child(7) { animation-delay: 240ms; } .menu-mega-dropdown .wd-sub-menu > li.wd-col:nth-child(8) { animation-delay: 280ms; } @keyframes kFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Link as card ---------- */ .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col > a, .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col > a:link, .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col > a:visited { display: flex !important; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; height: 100%; padding: 14px 8px !important; border-radius: 14px !important; background: transparent; color: #1a1a1a !important; font-size: 14px !important; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none !important; position: relative; overflow: hidden; isolation: isolate; will-change: transform; transition: transform var(--k-d) var(--k-ease), color var(--k-d) var(--k-ease), background-color var(--k-d) var(--k-ease) !important; } /* Underline indicator */ .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px; background: var(--k-brand); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform var(--k-d) var(--k-ease); z-index: 1; } /* ---------- Brand icons ---------- */ .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col > a > img.wd-nav-img { width: 92px !important; height: 92px !important; max-width: 92px !important; max-height: 92px !important; margin: 0 !important; padding: 16px; border-radius: 50%; background: transparent; object-fit: contain; box-sizing: border-box; will-change: transform; transition: transform var(--k-d) var(--k-ease), filter var(--k-d) var(--k-ease), background-color var(--k-d) var(--k-ease), box-shadow var(--k-d) var(--k-ease); } /* ---------- Hero cell (Для нього / Для неї) ---------- */ .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col:first-child { flex: 1.5 1 0; } .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col:first-child > a, .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col:first-child > a:link, .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col:first-child > a:visited { background: var(--k-canvas-soft); font-weight: 700; font-size: 15px !important; color: #ffffff !important; text-shadow: 0 1px 3px oklch(0 0 0 / 0.45); } .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col:first-child > a > img.wd-nav-img { width: 144px !important; height: 144px !important; max-width: 144px !important; max-height: 144px !important; padding: 0; border-radius: 14px; background: transparent; object-fit: cover; } /* ---------- Hover (gated) ---------- */ @media (hover: hover) and (pointer: fine) { .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col > a:hover { color: var(--k-brand-hover) !important; background: var(--k-brand-tint); transform: translateY(-2px); } .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col:first-child > a:hover { color: #ffffff !important; background: var(--k-brand-soft); } .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col > a:hover::after { transform: scaleX(1); } .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col > a:hover img.wd-nav-img { transform: scale(1.15); background: var(--k-brand-soft); box-shadow: 0 8px 20px var(--k-brand-glow), inset 0 0 0 1px oklch(0.62 0.20 293 / 0.25); filter: drop-shadow(0 2px 4px oklch(0.20 0.01 293 / 0.15)); } .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col > a > img.wd-nav-img:hover { transform: scale(1.20); } .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col:first-child > a:hover img.wd-nav-img { transform: scale(1.04); box-shadow: 0 10px 24px var(--k-brand-glow); } } /* ---------- Active feedback ---------- */ .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col > a:active { transform: scale(0.97); transition-duration: 100ms !important; } /* ---------- Focus visible ---------- */ .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col > a:focus-visible { outline: 2px solid var(--k-brand); outline-offset: 2px; } /* ---------- Current page ---------- */ .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.current-menu-item > a, .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.current-menu-parent > a { color: var(--k-brand) !important; background: var(--k-brand-tint) !important; font-weight: 700; } .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.current-menu-item > a::after, .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.current-menu-parent > a::after { transform: scaleX(1); } /* ================================================================ Shine sweep — ТОЛЬКО на тумбе мега-меню категорий ================================================================ */ @keyframes kShine { 0% { transform: translateX(-160%) skewX(-20deg); } 55%, 100% { transform: translateX(260%) skewX(-20deg); } } .menu.wd-nav > li.menu-mega-dropdown > .woodmart-nav-link:has(> img.wd-nav-img) { position: relative; overflow: hidden; isolation: isolate; transition: color var(--k-d-fast) var(--k-ease) !important; } .menu.wd-nav > li.menu-mega-dropdown > .woodmart-nav-link:has(> img.wd-nav-img)::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 55%; background: linear-gradient( 110deg, transparent, oklch(1 0 0 / 0.42) 50%, transparent ); transform: translateX(-160%) skewX(-20deg); pointer-events: none; z-index: 5; animation: kShine 4.2s var(--k-ease) infinite; } .menu.wd-nav > li.menu-mega-dropdown > .woodmart-nav-link:has(> img.wd-nav-img) > * { position: relative; z-index: 6; } @media (hover: hover) and (pointer: fine) { .menu.wd-nav > li.menu-mega-dropdown > .woodmart-nav-link:hover { color: var(--k-brand-hover) !important; } .menu.wd-nav > li.menu-mega-dropdown > .woodmart-nav-link:hover::after { animation-play-state: paused; } } .menu.wd-nav > li.menu-mega-dropdown > .woodmart-nav-link:active { transform: scale(0.97); transition: transform 100ms var(--k-ease); } /* ================================================================ Responsive ================================================================ */ @media (max-width: 1024px) { .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu { flex-wrap: wrap; } .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col { flex: 0 0 calc(25% - 6px); } .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col:first-child { flex: 0 0 100%; } .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col:first-child > a { flex-direction: row; justify-content: flex-start; gap: 16px; text-align: left; } .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col:first-child > a > img.wd-nav-img { width: 108px !important; height: 108px !important; max-width: 108px !important; max-height: 108px !important; } } @media (max-width: 600px) { .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu { padding: 12px 10px !important; } .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col { flex: 0 0 calc(33.333% - 6px); } .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col > a { padding: 12px 6px !important; font-size: 12.5px !important; min-height: 44px; } .menu-mega-dropdown .wd-dropdown-menu .wd-sub-menu > li.wd-col > a > img.wd-nav-img { width: 68px !important; height: 68px !important; max-width: 68px !important; max-height: 68px !important; padding: 12px; } } /* ================================================================ Reduced motion ================================================================ */ @media (prefers-reduced-motion: reduce) { .menu-mega-dropdown .wd-sub-menu > li.wd-col, .menu-mega-dropdown .wd-sub-menu > li.wd-col > a, .menu-mega-dropdown .wd-sub-menu > li.wd-col > a::after, .menu-mega-dropdown .wd-sub-menu > li.wd-col > a img.wd-nav-img, .menu.wd-nav > li.menu-mega-dropdown > .woodmart-nav-link { animation: none !important; transform: none !important; transition-duration: 0.01ms !important; opacity: 1 !important; } .menu.wd-nav > li.menu-mega-dropdown > .woodmart-nav-link:has(> img.wd-nav-img)::after { display: none; } } }