.elementor-194 .elementor-element.elementor-element-abacb62{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--background-transition:0.3s;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-194 .elementor-element.elementor-element-eb554ad{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;--padding-top:24px;--padding-bottom:70px;--padding-left:20px;--padding-right:20px;}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price ins{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price ins .amount{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products{--products-title-color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.products-heading-show .related-products > h2, .elementor-widget-woocommerce-products.products-heading-show .upsells > h2, .elementor-widget-woocommerce-products.products-heading-show .cross-sells > h2{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del .amount{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del {font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-194 .elementor-element.elementor-element-53f7197.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-194 .elementor-element.elementor-element-53f7197.elementor-wc-products ul.products li.product span.onsale{display:block;}@media(min-width:768px){.elementor-194 .elementor-element.elementor-element-eb554ad{--content-width:1240px;}}@media(max-width:1024px){.elementor-194 .elementor-element.elementor-element-53f7197.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-194 .elementor-element.elementor-element-53f7197.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS */@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400&family=Jost:wght@200;300;400;500&display=swap'); #zlotka-app{display:block;width:100%;margin:0;padding:0;position:relative;isolation:isolate;color-scheme:dark} #zlotka-app [hidden]{display:none !important} /* ------------------------------------------------------------ 1. ZMIENNE → Elementor: Ustawienia witryny → Kolory globalne ------------------------------------------------------------ */ #zlotka-app{ /* Kolory podstawowe */ --czern: #100E0C; /* Primary — tło główne */ --czern-glab: #0A0908; /* tło sekcji przemiennych */ --czern-karta:#171412; /* tło kart produktowych */ --zloto: #C8A45D; /* Accent — akcent główny */ --zloto-jasne:#E7D3A4; /* akcent jasny, ceny, nagłówki */ --zloto-cien: #8A6F3A; /* akcent ciemny, na jasnym tle */ --kosc: #F2EBDF; /* Secondary — kość słoniowa */ --piasek: #DCCFB8; /* obramowania na jasnym tle */ /* Kolory tekstu */ --tekst: #EAE2D4; /* Text — tekst podstawowy */ --tekst-cichy:#9A9184; /* tekst pomocniczy */ --tekst-ciemny:#1A1713; /* tekst na jasnym tle */ --tekst-ciemny-cichy:#4A443B; /* Kolory statusów */ --sukces: #6E9B6B; --blad: #B4614F; /* Kreski i obramowania */ --kreska: rgba(200,164,93,.16); --kreska-mocna:rgba(200,164,93,.32); --kreska-jasna:rgba(200,164,93,.5); /* Typografia → Elementor: Czcionki globalne */ --display:"Bodoni Moda", Georgia, "Times New Roman", serif; --body:"Jost","Helvetica Neue",Arial,sans-serif; /* Siatka */ --wrap:min(1240px,91vw); --wrap-waski:min(880px,91vw); /* Na szerokich ekranach kontener się rozszerza — dzięki temu mieszczą się 4 kolumny BEZ zmniejszania kart (patrz niżej). */ /* Odstępy — Elementor: padding sekcji */ --sekcja-y:clamp(70px,9vw,132px); --sekcja-y-mala:clamp(48px,6vw,80px); /* Krzywe animacji */ --plynnie:cubic-bezier(.22,1,.36,1); }/* ------------------------------------------------------------ 0. TARCZA — odporność na motyw WP i wymuszony tryb ciemny Dwa problemy zgłoszone przez klienta: a) malinowe ramki przy przyciskach → to kolor akcentu motywu WP, który trafiał w moje elementy. Poniżej je zerujemy. b) kolory kruszcu wychodziły brązowe/oliwkowe → Android i Samsung Internet przemalowują strony w trybie ciemnym. Deklaracja color-scheme mówi przeglądarce, że strona JUŻ jest ciemna, a forced-color-adjust chroni próbki kolorów. ------------------------------------------------------------ */ #zlotka-app{ color-scheme: dark; } #zlotka-app button, #zlotka-app input, #zlotka-app select, #zlotka-app textarea, #zlotka-app a, #zlotka-app article, #zlotka-app section, #zlotka-app div, #zlotka-app span, #zlotka-app ul, #zlotka-app ol, #zlotka-app li, #zlotka-app h1, #zlotka-app h2, #zlotka-app h3, #zlotka-app h4, #zlotka-app p, #zlotka-app img, #zlotka-app svg{ border-radius:0; box-shadow:none; text-transform:none; letter-spacing:normal; } #zlotka-app button{ background:none; border:0; border-radius:0; box-shadow:none; color:inherit; text-shadow:none; min-height:0; min-width:0; line-height:inherit; } #zlotka-app a{ box-shadow:none; text-decoration:none; } #zlotka-app img{ border-radius:0; box-shadow:none; }/* ------------------------------------------------------------ 0b. UKRYCIE ELEMENTÓW MOTYWU WORDPRESS Sekcja „Dodaj komentarz" pochodzi z motywu, nie z tego projektu. Docelowo wyłącz komentarze w ustawieniach WP — to tylko zasłona. ------------------------------------------------------------ */ #zlotka-app #comments, #zlotka-app .comments-area, #zlotka-app #respond, #zlotka-app .comment-respond, #zlotka-app .post-navigation, #zlotka-app .entry-footer{display:none !important}/* ------------------------------------------------------------ 2. RESET ------------------------------------------------------------ */ #zlotka-app *{box-sizing:border-box;margin:0;padding:0} #zlotka-app{-webkit-text-size-adjust:100%}/* Zapas pod przyklejonym paskiem — bez tego kotwica chowa nagłówek sekcji za menu. Zgłoszone przez klienta. */ #zlotka-app :target, #zlotka-app [id]{scroll-margin-top:96px} #zlotka-app{ background:var(--czern); color:var(--tekst); font-family:var(--body); font-weight:300; font-size:17.5px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; } #zlotka-app img, #zlotka-app svg, #zlotka-app video{display:block;max-width:100%} #zlotka-app a{color:inherit;text-decoration:none} #zlotka-app button, #zlotka-app input, #zlotka-app select, #zlotka-app textarea{font:inherit;color:inherit} #zlotka-app button{background:none;border:0;cursor:pointer} #zlotka-app :focus-visible{outline:2px solid var(--zloto);outline-offset:3px} #zlotka-app ::selection{background:var(--zloto);color:#15100A}/* ------------------------------------------------------------ 3. UKŁAD → Elementor: Kontener, szerokość zawartości 1240 px ------------------------------------------------------------ */ #zlotka-app .wrap{width:var(--wrap);margin-inline:auto} #zlotka-app .wrap-waski{width:var(--wrap-waski);margin-inline:auto} #zlotka-app .band{padding:var(--sekcja-y) 0} #zlotka-app .band--mala{padding:var(--sekcja-y-mala) 0} #zlotka-app .band--glab{background:var(--czern-glab)} #zlotka-app .band--bez-gory{padding-top:0}/* ------------------------------------------------------------ 4. TYPOGRAFIA ------------------------------------------------------------ */ #zlotka-app h1, #zlotka-app h2, #zlotka-app h3, #zlotka-app h4{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.01em} #zlotka-app h1{font-size:clamp(38px,5.6vw,70px);color:var(--kosc)} #zlotka-app h2{font-size:clamp(29px,3.7vw,46px);color:var(--kosc)} #zlotka-app h3{font-size:clamp(19px,2vw,24px);color:var(--kosc)} #zlotka-app em{font-style:italic;color:var(--zloto-jasne)}/* Nadtytuł — Elementor: widżet Nagłówek, HTML tag = p */ #zlotka-app .etykieta{ font-family:var(--body); font-size:12.5px;letter-spacing:.24em;text-transform:uppercase; font-weight:400;color:var(--zloto); } #zlotka-app .etykieta--ciemna{color:var(--zloto-cien)} #zlotka-app .lead{font-size:clamp(16.5px,1.6vw,19px);color:var(--tekst-cichy);line-height:1.75}/* Nagłówek sekcji — Elementor: kontener poziomy, wyrównanie do dołu */ #zlotka-app .naglowek{ display:flex;align-items:flex-end;justify-content:space-between; gap:28px;margin-bottom:clamp(28px,3.4vw,50px); } #zlotka-app .naglowek h2{margin-top:12px} #zlotka-app .naglowek__link{ font-size:13px;letter-spacing:.17em;text-transform:uppercase;color:var(--zloto); white-space:nowrap;border-bottom:1px solid var(--kreska-jasna);padding-bottom:4px; transition:border-color .3s; } #zlotka-app .naglowek__link:hover{border-color:var(--zloto)}/* ------------------------------------------------------------ 5. PRZYCISKI → Elementor: widżet Przycisk, styl Obramowany / Wypełniony ------------------------------------------------------------ */ #zlotka-app .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:15px 30px;border:1px solid var(--zloto); font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:400; background:transparent;color:var(--zloto);cursor:pointer;text-align:center; transition:background .3s ease,color .3s ease,border-color .3s ease; } #zlotka-app .btn:hover{background:rgba(200,164,93,.13)} #zlotka-app .btn--pelny{background:var(--zloto);color:#15100A;font-weight:500} #zlotka-app .btn--pelny:hover{background:var(--zloto-jasne);border-color:var(--zloto-jasne)} #zlotka-app .btn--jasny{border-color:var(--tekst-ciemny);color:var(--tekst-ciemny)} #zlotka-app .btn--jasny:hover{background:var(--tekst-ciemny);color:var(--kosc)} #zlotka-app .btn--pelna-szer{width:100%} #zlotka-app .btn--maly{padding:11px 20px;font-size:11px} #zlotka-app .btn[disabled]{opacity:.45;cursor:not-allowed}/* ------------------------------------------------------------ 6. KARTA PRODUKTU → Elementor: Loop Item + WooCommerce Pola: zdjęcie / tytuł / atrybuty (ACF lub atrybuty Woo) / cena ------------------------------------------------------------ */ #zlotka-app .siatka-produktow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)} #zlotka-app .siatka-produktow--4{grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}/* Czwarta kolumna dopiero od 1500 px — przy węższym ekranie karta spadłaby do 292 px i zdjęcie kamienia zrobiłoby się nieczytelne. */ @media (min-width:1500px){ #zlotka-app{--wrap:min(1560px,94vw)} #zlotka-app .siatka-produktow--4{grid-template-columns:repeat(4,1fr);gap:26px}} #zlotka-app .produkt{ position:relative;background:var(--czern-karta);border:1px solid var(--kreska); display:flex;flex-direction:column; transition:border-color .4s ease,transform .4s ease; } #zlotka-app .produkt:hover{border-color:var(--kreska-jasna);transform:translateY(-4px)} #zlotka-app .produkt__kadr{position:relative;min-height:230px;aspect-ratio:1/1;overflow:hidden;display:block} #zlotka-app .produkt__kadr img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--plynnie)} #zlotka-app .produkt:hover .produkt__kadr img{transform:scale(1.05)}/* Plakietka — Woo: wyprzedaż / nowość */ #zlotka-app .plakietka{ position:absolute;top:14px;left:14px;z-index:2; font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500; background:var(--zloto);color:#16110A;padding:4px 9px; } #zlotka-app .plakietka--cicha{ background:rgba(10,9,8,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); border:1px solid var(--kreska-jasna);color:var(--zloto-jasne); }/* Serce — wtyczka listy życzeń */ #zlotka-app .serce{ position:absolute;top:12px;right:12px;z-index:3; width:52px;height:52px;display:grid;place-items:center; forced-color-adjust:none; background:rgba(10,9,8,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); border:1px solid var(--kreska);transition:border-color .3s,background .3s; } #zlotka-app .serce svg{width:24px;height:24px;stroke:#EAE2D4;fill:none;stroke-width:1.5;transition:stroke .3s,fill .3s;display:block} #zlotka-app .serce:hover{border-color:var(--kreska-jasna)} #zlotka-app .serce[aria-pressed="true"] svg{stroke:#C8A45D;fill:#C8A45D} #zlotka-app .produkt__opis{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1} #zlotka-app .produkt__opis h3{font-size:19px;line-height:1.3;min-height:2.6em}/* Pasek atrybutów — Woo: atrybuty globalne produktu */ #zlotka-app .atrybuty{ display:flex;flex-wrap:wrap;gap:8px;margin:13px 0 15px; padding-top:12px;border-top:1px solid var(--kreska); } #zlotka-app .atrybuty span{ font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tekst-cichy); border:1px solid rgba(200,164,93,.22);padding:3px 7px; } #zlotka-app .cena{display:flex;align-items:baseline;gap:10px;margin-top:auto} #zlotka-app .cena b{font-family:var(--display);font-size:25px;font-weight:400;color:var(--zloto-jasne)} #zlotka-app .cena s{font-size:14.5px;color:var(--tekst-cichy);text-decoration-thickness:1px} #zlotka-app .cena--duza b{font-size:clamp(28px,3.4vw,38px)} #zlotka-app .cena--duza s{font-size:16px}/* Szybkie dodanie do koszyka — Woo: przycisk Add to Cart w Loop Item */ #zlotka-app .do-koszyka-szybko{ display:flex;align-items:center;justify-content:center;gap:9px; width:100%;margin-top:14px;padding:13px 14px; border:1px solid var(--kreska-mocna);color:var(--zloto); font-size:12.5px;letter-spacing:.14em;text-transform:uppercase; transition:background .3s,border-color .3s,color .3s; } #zlotka-app .do-koszyka-szybko svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.3;flex:none} #zlotka-app .do-koszyka-szybko:hover{background:var(--zloto);border-color:var(--zloto);color:#15100A}/* ------------------------------------------------------------ 7. FORMULARZE → Elementor: Form / Woo: checkout ------------------------------------------------------------ */ #zlotka-app .pole{display:grid;gap:8px;margin-bottom:18px} #zlotka-app .pole label{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tekst-cichy)} #zlotka-app .pole input, #zlotka-app .pole select, #zlotka-app .pole textarea{ background:transparent;border:1px solid var(--kreska-mocna); padding:14px 16px;font-size:15px;font-weight:300;width:100%; transition:border-color .3s; } #zlotka-app .pole input:focus, #zlotka-app .pole select:focus, #zlotka-app .pole textarea:focus{border-color:var(--zloto);outline:0} #zlotka-app .pole input::placeholder, #zlotka-app .pole textarea::placeholder{color:#6E675C} #zlotka-app .pole textarea{min-height:130px;resize:vertical} #zlotka-app .pole select{ appearance:none;-webkit-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C8A45D' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;background-size:11px; padding-right:42px; } #zlotka-app .pole select option{background:var(--czern-karta);color:var(--tekst)} #zlotka-app .pole--para{display:grid;grid-template-columns:1fr 1fr;gap:14px} #zlotka-app .pole--para .pole{margin-bottom:0} #zlotka-app .podpowiedz{font-size:12px;color:#6E675C;line-height:1.6}/* Zgoda — pole wyboru */ #zlotka-app .zgoda-pole{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--tekst-cichy);line-height:1.7} #zlotka-app .zgoda-pole input{ appearance:none;-webkit-appearance:none;flex:none; width:17px;height:17px;margin-top:3px;border:1px solid var(--kreska-mocna);cursor:pointer; transition:background .25s,border-color .25s; } #zlotka-app .zgoda-pole input:checked{ background:var(--zloto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%2315100A' stroke-width='1.8'/%3E%3C/svg%3E") center/11px no-repeat; border-color:var(--zloto); } #zlotka-app .zgoda-pole a{color:var(--zloto);border-bottom:1px solid var(--kreska)}/* ------------------------------------------------------------ 8. PASEK OBIETNIC → Elementor: kontener 4 kolumny ------------------------------------------------------------ */ #zlotka-app .obietnice{border-block:1px solid rgba(200,164,93,.18);background:var(--czern-glab)} #zlotka-app .obietnice ul{ width:var(--wrap);margin-inline:auto;list-style:none; display:grid;grid-template-columns:repeat(4,1fr); } #zlotka-app .obietnice li{ padding:22px 18px;text-align:center; font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tekst-cichy); border-left:1px solid var(--kreska); } #zlotka-app .obietnice li:first-child{border-left:0} #zlotka-app .obietnice b{color:var(--zloto);font-weight:400}/* ------------------------------------------------------------ 9. OKRUSZKI → Woo: breadcrumbs / Yoast ------------------------------------------------------------ */ #zlotka-app .okruszki{ padding:20px 0;font-size:13px;letter-spacing:.1em;color:var(--tekst-cichy); border-bottom:1px solid var(--kreska); } #zlotka-app .okruszki ol{list-style:none;display:flex;flex-wrap:wrap;gap:9px;align-items:center} #zlotka-app .okruszki li::after{content:'/';margin-left:9px;color:rgba(200,164,93,.4)} #zlotka-app .okruszki li:last-child::after{display:none} #zlotka-app .okruszki a:hover{color:var(--zloto)} #zlotka-app .okruszki [aria-current]{color:var(--kosc)}/* Nagłówek podstrony */ #zlotka-app .tytul-strony{padding:clamp(38px,5vw,64px) 0 clamp(28px,3.5vw,44px)} #zlotka-app .tytul-strony h1{margin-top:14px} #zlotka-app .tytul-strony p{margin-top:16px;max-width:56ch;color:var(--tekst-cichy)}/* ------------------------------------------------------------ 10. PANEL KOŚCI SŁONIOWEJ ------------------------------------------------------------ */ #zlotka-app .kosc-panel{background:var(--kosc);color:var(--tekst-ciemny)} #zlotka-app .kosc-panel h1, #zlotka-app .kosc-panel h2, #zlotka-app .kosc-panel h3{color:#14110D} #zlotka-app .kosc-panel p{color:var(--tekst-ciemny-cichy)} #zlotka-app .kosc-panel .etykieta{color:var(--zloto-cien)} #zlotka-app .dwie-kolumny{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center} #zlotka-app .lista-punktow{list-style:none;display:grid;gap:13px} #zlotka-app .lista-punktow li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--tekst-ciemny-cichy)} #zlotka-app .lista-punktow li::before{content:'';flex:none;width:7px;height:7px;margin-top:9px;background:var(--zloto);transform:rotate(45deg)} #zlotka-app .lista-punktow--ciemna li{color:var(--tekst-cichy)}/* ------------------------------------------------------------ 11. PAS FOTOGRAFICZNY → Elementor: sekcja z tłem + nakładka ------------------------------------------------------------ */ #zlotka-app .pas{position:relative;min-height:clamp(380px,52vw,540px);display:grid;place-items:center;overflow:hidden;text-align:center} #zlotka-app .pas img{position:absolute;top:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85)} #zlotka-app .pas::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,8,.72),rgba(10,9,8,.5) 50%,rgba(10,9,8,.85))} #zlotka-app .pas__tresc{position:relative;z-index:2;padding:40px 24px;max-width:min(620px,88vw)} #zlotka-app .pas h2{margin:14px 0 18px} #zlotka-app .pas p{color:#CFC6B6;margin-bottom:28px}/* ------------------------------------------------------------ 12. NEWSLETTER → MailerLite / Elementor Form ------------------------------------------------------------ */ #zlotka-app .newsletter{text-align:center;background:radial-gradient(700px 340px at 50% 0%,rgba(200,164,93,.12),transparent 65%),var(--czern-glab)} #zlotka-app .newsletter h2{margin:14px auto 16px;max-width:17ch} #zlotka-app .newsletter p{color:var(--tekst-cichy);max-width:52ch;margin-inline:auto;font-size:15px} #zlotka-app .zapis{display:flex;gap:10px;max-width:520px;margin:32px auto 0;flex-wrap:wrap;justify-content:center} #zlotka-app .zapis input{ flex:1 1 260px;background:transparent;border:1px solid var(--kreska-mocna); padding:15px 18px;font-size:14px;font-weight:300; } #zlotka-app .zapis input::placeholder{color:var(--tekst-cichy)} #zlotka-app .zgoda-tekst{font-size:11px;color:#6E675C;max-width:46ch;margin:16px auto 0;line-height:1.7}/* ------------------------------------------------------------ 13. OPINIE ------------------------------------------------------------ */ #zlotka-app .opinie{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--kreska);border:1px solid var(--kreska)} #zlotka-app .opinia{background:var(--czern);padding:34px 30px} #zlotka-app .gwiazdki{color:var(--zloto);letter-spacing:.3em;font-size:12px} #zlotka-app .opinia h3{font-size:19px;margin:14px 0 12px} #zlotka-app .opinia p{font-size:14.5px;color:var(--tekst-cichy);line-height:1.75} #zlotka-app .opinia cite{display:block;margin-top:18px;font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--zloto)}/* ------------------------------------------------------------ 14. ANIMACJE WEJŚCIA Klasa .anim dodawana przez JS tylko gdy przeglądarka ją obsłuży. Bez JS treść jest widoczna od razu — to zabezpieczenie. ------------------------------------------------------------ */ #zlotka-app .wjazd{transition:opacity .9s var(--plynnie),transform .9s var(--plynnie)} #zlotka-app .anim .wjazd{opacity:0;transform:translateY(22px)} #zlotka-app .anim .wjazd.widoczny{opacity:1;transform:none}/* ------------------------------------------------------------ 15. RESPONSYWNOŚĆ Punkty łamania zgodne z Elementorem: 1024 px (tablet), 767 px (telefon) ------------------------------------------------------------ */ @media (max-width:1024px){ #zlotka-app .siatka-produktow, #zlotka-app .siatka-produktow--4{grid-template-columns:repeat(2,1fr)} #zlotka-app .dwie-kolumny{grid-template-columns:1fr;gap:38px} #zlotka-app .opinie{grid-template-columns:1fr} #zlotka-app .obietnice ul{grid-template-columns:repeat(2,1fr)} #zlotka-app .obietnice li:nth-child(odd){border-left:0} #zlotka-app .obietnice li:nth-child(-n+2){border-bottom:1px solid var(--kreska)}} @media (max-width:767px){/* Jedna kolumna — klient zgłosił przycinanie kart przy dwóch */ #zlotka-app .siatka-produktow, #zlotka-app .siatka-produktow--4{grid-template-columns:1fr;gap:16px} #zlotka-app .produkt__kadr{aspect-ratio:4/3} #zlotka-app .produkt__opis{padding:18px 16px 20px} #zlotka-app .produkt__opis h3{font-size:19px;min-height:0} #zlotka-app .atrybuty{gap:7px;margin:12px 0 14px;padding-top:12px} #zlotka-app .atrybuty span{font-size:11px;padding:3px 7px;letter-spacing:.1em} #zlotka-app .cena{flex-wrap:wrap;gap:8px} #zlotka-app .cena b{font-size:24px} #zlotka-app .cena s{font-size:14px} #zlotka-app .plakietka{top:12px;left:12px;font-size:10.5px;padding:5px 9px} #zlotka-app .serce{top:10px;right:10px;width:46px;height:46px} #zlotka-app .do-koszyka-szybko{padding:14px;font-size:13px} #zlotka-app .naglowek{flex-direction:column;align-items:flex-start;gap:14px} #zlotka-app .btn{padding:14px 24px;font-size:11.5px} #zlotka-app .pole--para{grid-template-columns:1fr} #zlotka-app .okruszki{font-size:11px;padding:14px 0}} @media (prefers-reduced-motion:reduce){ #zlotka-app *, #zlotka-app *::before, #zlotka-app *::after{animation:none!important;transition-duration:.01ms!important} #zlotka-app .wjazd, #zlotka-app .anim .wjazd{opacity:1;transform:none}}/* Nagłówek bezpośrednio nad formularzem lub tabelą — klient zgłosił nachodzenie na "Zgłoszenie zwrotu" i "Napisz do nas". Wymuszamy minimalny odstęp niezależnie od inline-style w danym miejscu. */ #zlotka-app h2 + .pole, #zlotka-app h2 + .pole--para, #zlotka-app h2 + form, #zlotka-app h2 + table, #zlotka-app h2 + .karta-cert{margin-top:28px}/* ============================================================ ZŁOTKA.PL — NAGŁÓWEK I STOPKA ODPOWIEDNIK W ELEMENTORZE: Kreator motywu (Theme Builder) → Nagłówek / Stopka. Menu = widżet Nav Menu. Ikona koszyka = widżet Menu Cart (Woo). ============================================================ *//* ------------------------------------------------------------ 1. PASEK PROMOCYJNY → Elementor: Nagłówek, sekcja nad menu ------------------------------------------------------------ */ #zlotka-app .promo{ background:linear-gradient(90deg,var(--zloto-cien),var(--zloto),var(--zloto-cien)); color:#1A150C;text-align:center;font-size:11.5px;letter-spacing:.2em; text-transform:uppercase;padding:9px 16px;font-weight:500; }/* ------------------------------------------------------------ 1b. PASEK Z DUŻYM LOGO (zastępuje napis „Prezentacja") Elementor: sekcja nad nagłówkiem, wyśrodkowana ------------------------------------------------------------ */ #zlotka-app .szyld{ background:var(--czern); border-bottom:1px solid var(--kreska); padding:clamp(26px,3.6vw,44px) 20px clamp(22px,3vw,36px); text-align:center; } #zlotka-app .szyld__znak{display:inline-flex;flex-direction:column;align-items:center;gap:16px;forced-color-adjust:none} #zlotka-app .szyld__logo{ width:clamp(180px,22vw,260px);height:auto; object-fit:contain;display:block; } #zlotka-app .szyld__podpis{ font-size:clamp(10px,1.1vw,12px);letter-spacing:.32em;text-transform:uppercase; color:var(--zloto); }/* ------------------------------------------------------------ 2. NAWIGACJA → Elementor: nagłówek przyklejony (sticky) ------------------------------------------------------------ */ #zlotka-app .nav{ position:sticky;top:0;z-index:90; background:rgba(16,14,12,.88); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom:1px solid rgba(200,164,93,.16); }/* Gdy menu mobilne jest otwarte, pasek musi być przypięty do krawędzi okna. Przy „sticky" wewnątrz kontenera Elementora zatrzymywał się w połowie ekranu i zasłaniał pozycje menu — to usterka zgłoszona przez klienta. */ #zlotka-app .nav.nad-menu{position:fixed;top:0;left:0;right:0;z-index:96} #zlotka-app .nav__in{ width:var(--wrap);margin-inline:auto; display:flex;align-items:center;justify-content:space-between; gap:24px;height:74px; }/* Logo — Elementor: widżet Logo witryny Znak klienta (PNG z przezroczystym tłem) + napis tekstowy obok. W WP: wgraj plik do Biblioteki mediów i wskaż w widżecie Logo. */ #zlotka-app .znak{display:flex;align-items:center;gap:12px;forced-color-adjust:none} #zlotka-app .znak__mark{ width:38px;height:38px;flex:none; object-fit:contain;display:block; } #zlotka-app .znak__nazwa{ font-family:var(--display);font-size:27px;letter-spacing:.04em; color:var(--kosc);line-height:1; } #zlotka-app .znak__nazwa i{font-style:normal;color:var(--zloto);font-size:.5em;letter-spacing:.1em} #zlotka-app .rejestr{font-size:.3em;color:var(--zloto);vertical-align:super;margin-left:3px;letter-spacing:0} #zlotka-app .szyld__ramka{position:relative;display:inline-block} #zlotka-app .szyld__rejestr{position:absolute;top:56%;right:-22px;font-size:17px;color:var(--zloto)}/* Menu — Elementor: widżet Nav Menu */ #zlotka-app .menu{display:flex;gap:32px;list-style:none;font-size:16px;font-weight:400;letter-spacing:.09em;text-transform:uppercase} #zlotka-app .menu a{position:relative;padding-block:6px;display:block} #zlotka-app .menu a::after{ content:'';position:absolute;left:0;bottom:0;height:1px;width:0; background:var(--zloto);transition:width .35s ease; } #zlotka-app .menu a:hover::after, #zlotka-app .menu a:focus-visible::after, #zlotka-app .menu a[aria-current]::after{width:100%} #zlotka-app .menu a[aria-current]{color:var(--zloto)} #zlotka-app .nav__akcje{display:flex;align-items:center;gap:20px} #zlotka-app .ikona{width:19px;height:19px;stroke:var(--tekst);stroke-width:1.2;fill:none;transition:stroke .25s} #zlotka-app a:hover .ikona, #zlotka-app button:hover .ikona{stroke:var(--zloto)}/* Licznik koszyka — Woo: liczba pozycji */ #zlotka-app .koszyk-ikona{position:relative;display:block} #zlotka-app .koszyk-ikona__licznik{ position:absolute;top:-6px;right:-8px; background:var(--zloto);color:#141008; font-size:9.5px;font-weight:500;line-height:1; min-width:15px;height:15px;border-radius:8px; display:grid;place-items:center;padding:0 4px; }/* ------------------------------------------------------------ 2b. ROZWIJANE KATEGORIE → Elementor: Nav Menu z podmenu albo JetMenu, jeśli kafle mają mieć zdjęcia ------------------------------------------------------------ */ #zlotka-app .menu li{position:relative} #zlotka-app .menu__strzalka{display:inline-block;width:8px;height:8px;margin-left:9px; border-right:1px solid currentColor;border-bottom:1px solid currentColor; transform:translateY(-2px) rotate(45deg);transition:transform .3s} #zlotka-app .menu li:hover .menu__strzalka{transform:translateY(1px) rotate(225deg)} #zlotka-app .podmenu{ position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px); min-width:250px;background:var(--czern-glab); border:1px solid var(--kreska-mocna); padding:14px 0;list-style:none; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .28s ease,transform .28s ease,visibility .28s; box-shadow:0 30px 60px -30px rgba(0,0,0,.9); } #zlotka-app .menu li:hover .podmenu, #zlotka-app .menu li:focus-within .podmenu{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0); }/* dzióbek nad listą */ #zlotka-app .podmenu::before{ content:'';position:absolute;top:-7px;left:50%;margin-left:-6px; width:12px;height:12px;background:var(--czern-glab); border-left:1px solid var(--kreska-mocna);border-top:1px solid var(--kreska-mocna); transform:rotate(45deg); }/* mostek, żeby kursor nie gubił menu w przerwie */ #zlotka-app .podmenu::after{content:'';position:absolute;top:-14px;left:0;right:0;height:14px} #zlotka-app .podmenu li{display:block} #zlotka-app .podmenu a{ display:block;padding:11px 26px;font-size:15px;letter-spacing:.07em; text-transform:none;color:var(--tekst);white-space:nowrap; } #zlotka-app .podmenu a::after{display:none} #zlotka-app .podmenu a:hover{background:rgba(200,164,93,.09);color:var(--zloto)}/* ------------------------------------------------------------ 3. MENU MOBILNE → Elementor: Nav Menu, układ mobilny „rozwijany" ------------------------------------------------------------ */ #zlotka-app .hamburger{display:none;padding:10px;margin-right:-10px;background:none;border:0;-webkit-tap-highlight-color:transparent;forced-color-adjust:none} #zlotka-app .hamburger span{display:block;width:22px;height:1px;background:var(--tekst);margin:5px 0;transition:transform .35s ease,opacity .25s ease} #zlotka-app .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} #zlotka-app .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0} #zlotka-app .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} #zlotka-app .panel{ position:fixed;top:0;left:0;right:0;bottom:0;inset:0;z-index:80; background:var(--czern-glab); display:flex;flex-direction:column;justify-content:center; /* Odstęp od góry musi minąć nagłówek — klient zgłosił nachodzenie */ padding:104px 9vw 40px; justify-content:flex-start; transform:translateY(-100%);visibility:hidden; transition:transform .5s var(--plynnie),visibility .5s; overflow-y:auto; -webkit-overflow-scrolling:touch; } #zlotka-app .panel.otwarty{transform:none;visibility:visible} #zlotka-app .panel a{ font-family:var(--display);font-size:clamp(27px,6.6vw,35px);color:var(--kosc); padding:17px 0;border-bottom:1px solid var(--kreska);display:block; }/* rozwijane kategorie w menu mobilnym */ #zlotka-app .panel__grupa{border-bottom:1px solid var(--kreska)} #zlotka-app .panel__grupa > a{border-bottom:0} #zlotka-app .panel__przelacz{ display:flex;align-items:center;justify-content:space-between;width:100%; background:none;border:0;padding:17px 0;text-align:left; font-family:var(--display);font-size:clamp(27px,6.6vw,35px);color:var(--kosc); } #zlotka-app .panel__przelacz i{ width:11px;height:11px;border-right:1px solid var(--zloto);border-bottom:1px solid var(--zloto); transform:rotate(45deg);transition:transform .3s;flex:none;margin-right:6px; } #zlotka-app .panel__przelacz[aria-expanded="true"] i{transform:rotate(225deg)} #zlotka-app .panel__lista{list-style:none;padding:0 0 16px 20px;display:grid;gap:2px} #zlotka-app .panel__przelacz[aria-expanded="false"] + .panel__lista{display:none} #zlotka-app .panel__lista a{ font-family:var(--body);font-size:19px;font-weight:300; color:var(--tekst-cichy);padding:11px 0;border-bottom:0;letter-spacing:.04em; } #zlotka-app .panel a:last-of-type{border-bottom:0} #zlotka-app .panel__kontakt{margin-top:32px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--zloto);line-height:2.2} body.zlotka-zablokowany{overflow:hidden}/* ------------------------------------------------------------ 4. STOPKA → Elementor: Kreator motywu → Stopka ------------------------------------------------------------ */ #zlotka-app .stopka{background:var(--czern);border-top:1px solid rgba(200,164,93,.18);padding-top:clamp(50px,6vw,80px)} #zlotka-app .stopka__siatka{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px} #zlotka-app .stopka h4{ font-family:var(--body);font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--zloto);font-weight:400;margin-bottom:18px; } #zlotka-app .stopka ul{list-style:none;display:grid;gap:10px;font-size:14px;color:var(--tekst-cichy)} #zlotka-app .stopka ul a{transition:color .25s} #zlotka-app .stopka ul a:hover{color:var(--zloto)} #zlotka-app .stopka__opis{font-size:14px;color:var(--tekst-cichy);max-width:34ch;margin-top:16px;line-height:1.8}/* Metody płatności — Woo: ikony bramek */ #zlotka-app .platnosci{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} #zlotka-app .platnosci span{ font-size:10px;letter-spacing:.14em;text-transform:uppercase; border:1px solid rgba(200,164,93,.26);padding:5px 9px;color:var(--tekst-cichy); } #zlotka-app .stopka__prawne{ display:flex;flex-wrap:wrap;gap:26px;margin-top:clamp(34px,4vw,52px); padding-top:26px;border-top:1px solid var(--kreska); font-size:14px;letter-spacing:.1em; } #zlotka-app .stopka__prawne a{color:var(--tekst-cichy);transition:color .25s} #zlotka-app .stopka__prawne a:hover{color:var(--zloto)} #zlotka-app .stopka__dol{ margin-top:24px;padding:22px 0; border-top:1px solid var(--kreska); display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; font-size:11.5px;letter-spacing:.12em;color:#655F55;text-transform:uppercase; }/* ------------------------------------------------------------ 5. RESPONSYWNOŚĆ ------------------------------------------------------------ */ @media (max-width:1024px){ #zlotka-app .menu, #zlotka-app .podmenu{display:none} #zlotka-app .hamburger{display:block} #zlotka-app .nav__akcje{gap:16px} #zlotka-app .stopka__siatka{grid-template-columns:1fr 1fr;gap:32px}} @media (max-width:767px){ #zlotka-app .promo{font-size:11px;letter-spacing:.1em} #zlotka-app .nav__in{height:68px} #zlotka-app .znak__nazwa{font-size:22px} #zlotka-app .znak__mark{width:32px;height:32px} #zlotka-app .szyld{padding:22px 20px 18px} #zlotka-app .szyld__podpis{letter-spacing:.24em} #zlotka-app .stopka ul{font-size:15px} #zlotka-app .stopka__siatka{grid-template-columns:1fr;gap:36px} #zlotka-app .stopka__dol{flex-direction:column;gap:10px}}/* ------------------------------------------------------------ 6. WYSZUKIWARKA Klient zgłosił, że lupka nie działa. W makiecie wyszukiwarka przeszukuje nazwy produktów obecnych na stronie. W WP zastąpi to wyszukiwarka WooCommerce. ------------------------------------------------------------ */ #zlotka-app .szukaj-otworz{background:none;border:0;padding:4px;cursor:pointer;forced-color-adjust:none} #zlotka-app .szukajka{ position:sticky;top:74px;z-index:85; background:var(--czern-glab); border-bottom:1px solid var(--kreska-mocna); padding:18px 0 0; } #zlotka-app .szukajka[hidden]{display:none} #zlotka-app .szukajka__in{ width:var(--wrap);margin-inline:auto; display:flex;align-items:center;gap:14px; border:1px solid var(--kreska-mocna);padding:4px 6px 4px 16px; } #zlotka-app .szukajka__szukaj{ flex:none;background:var(--zloto);color:#15100A;border:0; padding:12px 26px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500; cursor:pointer;transition:background .25s; } #zlotka-app .szukajka__szukaj:hover{background:var(--zloto-jasne)} #zlotka-app .szukajka__in .ikona{flex:none;stroke:var(--zloto)} #zlotka-app .szukajka__in input{ flex:1;background:transparent;border:0;outline:0; padding:15px 0;font-size:17px;font-weight:300;color:var(--tekst); -webkit-appearance:none;appearance:none; } #zlotka-app .szukajka__in input::placeholder{color:#6E675C} #zlotka-app .szukajka__in input::-webkit-search-cancel-button{-webkit-appearance:none} #zlotka-app .szukajka__zamknij{ background:none;border:0;flex:none;padding:8px; font-size:26px;line-height:1;color:var(--tekst-cichy);cursor:pointer; forced-color-adjust:none; } #zlotka-app .szukajka__zamknij:hover{color:var(--zloto)} #zlotka-app .szukajka__wyniki{width:var(--wrap);margin-inline:auto;padding:6px 0 18px;max-height:56vh;overflow-y:auto} #zlotka-app .wynik{ display:flex;align-items:center;gap:16px; padding:13px 4px;border-bottom:1px solid var(--kreska); } #zlotka-app .wynik:last-child{border-bottom:0} #zlotka-app .wynik img{width:60px;height:60px;object-fit:cover;flex:none;border:1px solid var(--kreska)} #zlotka-app .wynik__tekst{flex:1;min-width:0} #zlotka-app .wynik__tekst b{display:block;font-weight:400;font-size:16px;color:var(--kosc);line-height:1.35} #zlotka-app .wynik__tekst span{display:block;margin-top:5px;font-size:13.5px;color:var(--zloto)} #zlotka-app .szukajka__pusto{padding:22px 4px;font-size:15px;color:var(--tekst-cichy)} @media (max-width:1024px){ #zlotka-app .szukajka{top:68px}} @media (max-width:767px){ #zlotka-app .szukajka__in{padding:2px 13px;gap:11px} #zlotka-app .szukajka__in input{font-size:16px;padding:13px 0} #zlotka-app .wynik img{width:52px;height:52px} #zlotka-app .wynik__tekst b{font-size:15px}}/* ============================================================ ZŁOTKA.PL — STYLE PODSTRON Sekcje występujące tylko na konkretnych stronach. ============================================================ *//* ════════════════════════════════════════════════════════════ STRONA GŁÓWNA ════════════════════════════════════════════════════════════ *//* Hero „gablota" — Elementor: kontener 2 kolumny + Custom CSS na refleks */ #zlotka-app .hero{ position:relative;padding:clamp(26px,4vw,52px) 0 clamp(50px,6vw,80px); background:radial-gradient(900px 520px at 78% 18%,rgba(200,164,93,.10),transparent 62%),var(--czern); } #zlotka-app .gablota{ position:relative;overflow:hidden;border:1px solid var(--kreska-mocna); background:var(--czern-glab); display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch; }/* Refleks przechodzący po szkle — w WP: Custom CSS widżetu kontenera */ #zlotka-app .gablota::after{ content:'';position:absolute;inset:0;z-index:5;pointer-events:none; background:linear-gradient(102deg,transparent 34%,rgba(231,211,164,.10) 47%,rgba(255,255,255,.06) 50%,rgba(231,211,164,.10) 53%,transparent 66%); transform:translateX(-125%);animation:blask 8s ease-in-out 1.4s infinite; } @keyframes blask{0%{transform:translateX(-125%)}45%,100%{transform:translateX(125%)}}/* Narożniki ramki — 4 puste elementy z obramowaniem */ #zlotka-app .rog{position:absolute;z-index:6;width:16px;height:16px;border:1px solid var(--zloto);opacity:.75} #zlotka-app .rog--lg{top:14px;left:14px;border-right:0;border-bottom:0} #zlotka-app .rog--pg{top:14px;right:14px;border-left:0;border-bottom:0} #zlotka-app .rog--ld{bottom:14px;left:14px;border-right:0;border-top:0} #zlotka-app .rog--pd{bottom:14px;right:14px;border-left:0;border-top:0} #zlotka-app .gablota__tekst{padding:clamp(40px,5.5vw,78px);display:flex;flex-direction:column;justify-content:center;position:relative;z-index:3} #zlotka-app .gablota__tekst h1{margin:20px 0 22px} #zlotka-app .gablota__tekst .lead{max-width:42ch} #zlotka-app .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px} #zlotka-app .gablota__foto{position:relative;overflow:hidden;min-height:480px} #zlotka-app .gablota__foto img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04)} #zlotka-app .gablota__foto::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--czern-glab) 0%,rgba(10,9,8,.35) 26%,transparent 60%)} #zlotka-app .metka{ position:absolute;z-index:4;left:24px;bottom:24px; border:1px solid rgba(231,211,164,.5);background:rgba(10,9,8,.55); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); padding:11px 16px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--zloto-jasne); }/* Kafle kategorii — Elementor: Loop Grid po taksonomii product_cat */ #zlotka-app .kategorie{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px)} #zlotka-app .kat{position:relative;display:block;overflow:hidden;min-height:190px;aspect-ratio:3/4;border:1px solid var(--kreska)} #zlotka-app .kat img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--plynnie);filter:saturate(.9)} #zlotka-app .kat:hover img{transform:scale(1.06)} #zlotka-app .kat::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,9,8,.9) 0%,rgba(10,9,8,.35) 38%,rgba(10,9,8,.05) 70%)} #zlotka-app .kat__tresc{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:24px 22px;text-align:center} #zlotka-app .kat h3{font-size:19px;margin-bottom:6px} #zlotka-app .kat span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--zloto)}/* Karta certyfikatu — Elementor: kontener + widżet Lista ikon */ #zlotka-app .karta-cert{ position:relative;overflow:hidden;background:#FBF7F0;border:1px solid var(--piasek); padding:38px 40px;box-shadow:0 24px 50px -30px rgba(60,45,20,.5); } #zlotka-app .znak-wodny{position:absolute;right:-52px;bottom:-52px;width:240px;opacity:.07;pointer-events:none} #zlotka-app .znak-wodny line, #zlotka-app .znak-wodny polygon, #zlotka-app .znak-wodny circle{stroke:#14110D;fill:none;stroke-width:1;vector-effect:non-scaling-stroke} #zlotka-app .karta-cert__gora{ position:relative;z-index:2;display:flex;justify-content:space-between;align-items:baseline; border-bottom:1px solid var(--piasek);padding-bottom:14px;margin-bottom:18px; } #zlotka-app .karta-cert__gora strong{font-family:var(--display);font-size:27px;font-weight:400;color:#14110D} #zlotka-app .karta-cert__gora span{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--zloto-cien)} #zlotka-app .karta-cert dl{position:relative;z-index:2}/* Klient zgłosił, że na komputerze certyfikat był nieczytelny — powiększone, z większym odstępem i cienką linią między wierszami. */ #zlotka-app .wiersz{display:flex;justify-content:space-between;gap:20px;align-items:baseline; padding:13px 0;font-size:17.5px;border-bottom:1px solid rgba(220,207,184,.5)} #zlotka-app .wiersz:last-of-type{border-bottom:0} #zlotka-app .wiersz dt{color:#6E6658;letter-spacing:.1em;text-transform:uppercase;font-size:13px;flex:none} #zlotka-app .wiersz dd{color:#14110D;text-align:right} #zlotka-app .karta-cert__stopka{ position:relative;z-index:2;margin-top:20px;padding-top:18px;border-top:1px solid var(--piasek); font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--zloto-cien); display:flex;justify-content:space-between; }/* Miarka rozmiaru — w WP: widżet HTML z tym samym kodem */ #zlotka-app .rozmiar__in{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:center} #zlotka-app .rozmiar h2{margin:14px 0 18px} #zlotka-app .rozmiar .opis{max-width:40ch;color:var(--tekst-cichy)} #zlotka-app .miarka{position:relative;border:1px solid var(--kreska-mocna);padding:clamp(26px,3.4vw,40px);background:var(--czern-karta)} #zlotka-app .miarka__odczyt{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap} #zlotka-app .miarka__nr{font-family:var(--display);font-size:clamp(54px,8vw,86px);line-height:.9;color:var(--zloto-jasne)} #zlotka-app .miarka__nr small{ font-family:var(--body);font-size:12px;letter-spacing:.22em;text-transform:uppercase; color:var(--tekst-cichy);display:block;margin-bottom:10px; } #zlotka-app .miarka__dane{display:flex;gap:26px} #zlotka-app .miarka__dane div{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--tekst-cichy)} #zlotka-app .miarka__dane b{ display:block;font-family:var(--display);font-size:23px;font-weight:400; letter-spacing:0;text-transform:none;color:var(--kosc);margin-top:4px; } #zlotka-app .rozmiar__foto{position:relative;overflow:hidden;min-height:180px;aspect-ratio:4/3;border:1px solid rgba(200,164,93,.2);margin-top:28px} #zlotka-app .rozmiar__foto img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}/* Suwak — stylizacja natywnego input[type=range] */ #zlotka-app input[type=range]{ -webkit-appearance:none;appearance:none;width:100%;height:26px; background:transparent;margin-top:30px;cursor:pointer; } #zlotka-app input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--kreska-jasna)} #zlotka-app input[type=range]::-moz-range-track{height:1px;background:var(--kreska-jasna)} #zlotka-app input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;width:15px;height:15px;border-radius:50%; background:var(--zloto);margin-top:-7px;box-shadow:0 0 0 5px rgba(200,164,93,.16); transition:box-shadow .25s; } #zlotka-app input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 9px rgba(200,164,93,.2)} #zlotka-app input[type=range]::-moz-range-thumb{ width:15px;height:15px;border:0;border-radius:50%;background:var(--zloto); box-shadow:0 0 0 5px rgba(200,164,93,.16); } #zlotka-app .skala{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.16em;color:var(--tekst-cichy);margin-top:6px}/* ════════════════════════════════════════════════════════════ KATALOG → Elementor Theme Builder: Product Archive Filtry = wtyczka Filter Everything / FacetWP ════════════════════════════════════════════════════════════ */ #zlotka-app .katalog{display:grid;grid-template-columns:270px 1fr;gap:clamp(24px,3.5vw,48px);align-items:start}/* Panel filtrów — na desktopie przyklejony do góry */ #zlotka-app .filtry{ position:sticky;top:94px;border:1px solid var(--kreska);background:var(--czern-glab);padding:24px 22px; max-height:calc(100vh - 114px);overflow-y:auto;-webkit-overflow-scrolling:touch; }/* delikatny pasek przewijania zamiast domyślnego systemowego */ #zlotka-app .filtry::-webkit-scrollbar{width:6px} #zlotka-app .filtry::-webkit-scrollbar-thumb{background:rgba(200,164,93,.35)} #zlotka-app .filtry::-webkit-scrollbar-track{background:transparent} #zlotka-app .filtry__gora{ display:flex;justify-content:space-between;align-items:center;gap:14px; margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--kreska); } #zlotka-app .filtry__gora h2{font-size:20px;flex:1} #zlotka-app .filtry__reset{ font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--tekst-cichy);border:0;border-bottom:1px solid var(--kreska); padding:4px 0;background:none;white-space:nowrap; } #zlotka-app .filtry__zamknij{background:none;border:0;padding:8px;margin-right:-8px;flex:none;forced-color-adjust:none} #zlotka-app .filtry__reset:hover{color:var(--zloto)} #zlotka-app .grupa{border-top:1px solid var(--kreska);padding:16px 0} #zlotka-app .grupa:first-of-type{border-top:0;padding-top:0} #zlotka-app .grupa__tytul{ width:100%;display:flex;justify-content:space-between;align-items:center; font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--zloto); padding:4px 0;text-align:left; } #zlotka-app .grupa__tytul svg{width:11px;height:7px;stroke:var(--zloto);fill:none;stroke-width:1.4;transition:transform .3s} #zlotka-app .grupa__tytul[aria-expanded="false"] svg{transform:rotate(-90deg)} #zlotka-app .grupa__lista{display:grid;gap:10px;margin-top:14px} #zlotka-app .grupa__tytul[aria-expanded="false"]+.grupa__lista{display:none} #zlotka-app .filtr{display:flex;align-items:center;gap:11px;font-size:15px;padding:3px 0;color:var(--tekst-cichy);cursor:pointer} #zlotka-app .filtr input{ appearance:none;-webkit-appearance:none;flex:none; width:19px;height:19px;forced-color-adjust:none;border:1px solid var(--kreska-mocna);cursor:pointer; transition:background .25s,border-color .25s; } #zlotka-app .filtr input:checked{ background:var(--zloto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%2315100A' stroke-width='1.8'/%3E%3C/svg%3E") center/10px no-repeat; border-color:var(--zloto); } #zlotka-app .filtr:hover{color:var(--tekst)} #zlotka-app .filtr__ile{margin-left:auto;font-size:12.5px;color:#6E675C}/* Próbki kolorów kruszcu */ #zlotka-app .probki{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px} #zlotka-app .probka{ position:relative;width:44px;height:44px; border:1px solid var(--kreska-mocna);cursor:pointer; transition:border-color .3s;overflow:hidden; /* Bez tego Android w trybie ciemnym przemalowuje próbki na brąz */ forced-color-adjust:none; -webkit-print-color-adjust:exact;print-color-adjust:exact; } #zlotka-app .probka input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0} #zlotka-app .probka:has(input:checked){border-color:var(--zloto);box-shadow:0 0 0 2px rgba(200,164,93,.25)}/* Zapis !important konieczny — motyw WP nadpisywał tła próbek */ #zlotka-app .probka--zolte{background:linear-gradient(135deg,#F0D48A 0%,#D4A94E 50%,#B8923F 100%) !important} #zlotka-app .probka--biale{background:linear-gradient(135deg,#FAFAF7 0%,#DCDCD6 50%,#B9B9B2 100%) !important} #zlotka-app .probka--rozowe{background:linear-gradient(135deg,#F2C9B6 0%,#DBA189 50%,#C08D74 100%) !important}/* Podpis pod próbką — klient nie rozpoznawał kolorów */ #zlotka-app .probka-grupa{display:flex;flex-direction:column;align-items:center;gap:7px} #zlotka-app .probka-grupa span{font-size:11px;letter-spacing:.08em;color:var(--tekst-cichy);text-align:center}/* Pasek narzędzi nad siatką */ #zlotka-app .narzedzia{ display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap; padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid var(--kreska); } #zlotka-app .narzedzia__ile{font-size:14.5px;color:var(--tekst-cichy)} #zlotka-app .narzedzia__ile b{color:var(--kosc);font-weight:400} #zlotka-app .sortowanie{display:flex;align-items:center;gap:10px} #zlotka-app .sortowanie label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tekst-cichy)} #zlotka-app .sortowanie select{ background:transparent;border:1px solid var(--kreska-mocna);padding:9px 34px 9px 13px; font-size:13px;appearance:none;-webkit-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C8A45D' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;background-size:10px; } #zlotka-app .sortowanie select option{background:var(--czern-karta)}/* Aktywne filtry */ #zlotka-app .aktywne{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px} #zlotka-app .znacznik{ display:inline-flex;align-items:center;gap:9px; font-size:12.5px;letter-spacing:.1em;text-transform:uppercase; border:1px solid var(--kreska-jasna);color:var(--zloto);padding:6px 11px; } #zlotka-app .znacznik button{font-size:14px;line-height:1;color:var(--zloto);padding:0 0 2px}/* Przycisk filtrów na telefonie *//* Duży przycisk w pasku narzędzi — zostaje, ale dodatkowo: */ #zlotka-app .filtry-mobilne{display:none}/* Pionowa zakładka „Filtruj" przyklejona do prawej krawędzi ekranu — widoczna cały czas podczas przewijania katalogu na telefonie. */ #zlotka-app .filtruj-tab{ display:none;position:fixed;right:0;top:52%;z-index:70; transform:translateY(-50%); background:var(--czern-karta);border:1px solid var(--kreska-mocna);border-right:0; padding:16px 10px;flex-direction:column;align-items:center;gap:8px; writing-mode:vertical-rl;text-orientation:mixed; font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--zloto); } #zlotka-app .filtruj-tab svg{width:16px;height:16px;stroke:var(--zloto);fill:none;stroke-width:1.4;transform:rotate(90deg)}/* Paginacja */ #zlotka-app .paginacja{display:flex;justify-content:center;gap:8px;margin-top:clamp(38px,5vw,60px);flex-wrap:wrap} #zlotka-app .paginacja a, #zlotka-app .paginacja span{ min-width:42px;height:42px;display:grid;place-items:center; border:1px solid var(--kreska);font-size:14px;color:var(--tekst-cichy); transition:border-color .3s,color .3s; } #zlotka-app .paginacja a:hover{border-color:var(--kreska-jasna);color:var(--zloto)} #zlotka-app .paginacja [aria-current]{background:var(--zloto);border-color:var(--zloto);color:#15100A}/* ════════════════════════════════════════════════════════════ KARTA PRODUKTU → Theme Builder: Single Product ════════════════════════════════════════════════════════════ */ #zlotka-app .produkt-widok{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4.5vw,64px);align-items:start}/* Galeria — Woo: Product Images */ #zlotka-app .galeria__glowne{position:relative;overflow:hidden;min-height:300px;aspect-ratio:1/1;border:1px solid var(--kreska);background:var(--czern-karta)} #zlotka-app .galeria__glowne img{width:100%;height:100%;object-fit:cover} #zlotka-app .galeria__mini{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px} #zlotka-app .mini{ position:relative;overflow:hidden;min-height:70px;aspect-ratio:1; border:1px solid var(--kreska);cursor:pointer;transition:border-color .3s; padding:0;background:none;forced-color-adjust:none; } #zlotka-app .mini img{width:100%;height:100%;object-fit:cover} #zlotka-app .mini[aria-selected="true"]{border-color:var(--zloto)} #zlotka-app .mini:hover{border-color:var(--kreska-jasna)}/* Panel zakupu */ #zlotka-app .zakup__gora{display:flex;justify-content:space-between;align-items:flex-start;gap:18px} #zlotka-app .zakup h1{font-size:clamp(27px,3.4vw,40px);margin:10px 0 0} #zlotka-app .sku{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tekst-cichy);margin-top:14px} #zlotka-app .ocena{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;color:var(--tekst-cichy)} #zlotka-app .zakup .cena{margin:22px 0 6px} #zlotka-app .rata{font-size:13px;color:var(--tekst-cichy)} #zlotka-app .rata b{color:var(--zloto);font-weight:400} #zlotka-app .wybor{margin-top:28px;padding-top:24px;border-top:1px solid var(--kreska)} #zlotka-app .wybor__tytul{ display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:12px; font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tekst-cichy); } #zlotka-app .wybor__tytul a{color:var(--zloto);border-bottom:1px solid var(--kreska);text-transform:none;letter-spacing:.06em;font-size:12px}/* Wybór kruszcu — Woo: warianty produktu */ #zlotka-app .opcje{display:flex;flex-wrap:wrap;gap:10px} #zlotka-app .opcja{position:relative} #zlotka-app .opcja input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0} #zlotka-app .opcja span{ display:flex;align-items:center;gap:9px; border:1px solid var(--kreska-mocna);padding:13px 18px;cursor:pointer; font-size:15px;transition:border-color .3s,background .3s; } #zlotka-app .opcja input:checked+span{border-color:var(--zloto);background:rgba(200,164,93,.09)} #zlotka-app .opcja input:focus-visible+span{outline:2px solid var(--zloto);outline-offset:2px} #zlotka-app .kropka{ width:18px;height:18px;border-radius:50%;flex:none; forced-color-adjust:none;-webkit-print-color-adjust:exact;print-color-adjust:exact; } #zlotka-app .kropka--zolte{background:linear-gradient(135deg,#F0D48A 0%,#D4A94E 50%,#B8923F 100%) !important} #zlotka-app .kropka--biale{background:linear-gradient(135deg,#FAFAF7 0%,#DCDCD6 50%,#B9B9B2 100%) !important} #zlotka-app .kropka--rozowe{background:linear-gradient(135deg,#F2C9B6 0%,#DBA189 50%,#C08D74 100%) !important}/* Rozmiar — pole zamówienia, nie wariant (decyzja projektowa) */ #zlotka-app .rozmiary{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:9px} #zlotka-app .rozmiar-opcja{position:relative} #zlotka-app .rozmiar-opcja input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0} #zlotka-app .rozmiar-opcja span{ display:grid;place-items:center;height:52px; border:1px solid var(--kreska-mocna);cursor:pointer;font-size:16px; transition:border-color .3s,background .3s,color .3s; } #zlotka-app .rozmiar-opcja input:checked+span{border-color:var(--zloto);background:var(--zloto);color:#15100A} #zlotka-app .rozmiar-opcja input:focus-visible+span{outline:2px solid var(--zloto);outline-offset:2px}/* Ilość + do koszyka */ #zlotka-app .do-koszyka{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap} #zlotka-app .ilosc{display:flex;align-items:center;border:1px solid var(--kreska-mocna);flex:none;forced-color-adjust:none} #zlotka-app .ilosc button{width:48px;height:52px;display:grid;place-items:center;font-size:19px;color:var(--tekst-cichy);background:none;border:0;transition:color .25s} #zlotka-app .ilosc button:hover{color:var(--zloto)} #zlotka-app .ilosc input{width:44px;height:52px;text-align:center;border:0;background:transparent;font-size:15px;-moz-appearance:textfield} #zlotka-app .ilosc input::-webkit-outer-spin-button, #zlotka-app .ilosc input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} #zlotka-app .do-koszyka .btn{flex:1;min-width:200px;height:52px;padding-block:0}/* Dostępność */ #zlotka-app .stan{display:flex;align-items:center;gap:9px;margin-top:18px;font-size:13px;color:var(--tekst-cichy)} #zlotka-app .stan::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--sukces);flex:none}/* Zwijane sekcje — Elementor: widżet Accordion */ #zlotka-app .harmonijka{margin-top:32px;border-top:1px solid var(--kreska)} #zlotka-app .harmonijka__poz{border-bottom:1px solid var(--kreska)} #zlotka-app .harmonijka__tytul{ width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px; padding:20px 0;text-align:left;font-size:16px;background:none;border:0;letter-spacing:.08em;color:var(--kosc); } #zlotka-app .harmonijka__tytul svg{width:12px;height:8px;stroke:var(--zloto);fill:none;stroke-width:1.4;flex:none;transition:transform .35s} #zlotka-app .harmonijka__tytul[aria-expanded="true"] svg{transform:rotate(180deg)} #zlotka-app .harmonijka__tresc{padding:0 0 24px;font-size:15.5px;color:var(--tekst-cichy);line-height:1.8} #zlotka-app .harmonijka__tytul[aria-expanded="false"]+.harmonijka__tresc{display:none} #zlotka-app .harmonijka__tresc dl{display:grid;gap:9px} #zlotka-app .harmonijka__tresc .wiersz{padding:0;border:0} #zlotka-app .harmonijka__tresc .wiersz dt{color:#6E675C} #zlotka-app .harmonijka__tresc .wiersz dd{color:var(--tekst)}/* ════════════════════════════════════════════════════════════ KOSZYK → Woo: szablon Cart ════════════════════════════════════════════════════════════ */ #zlotka-app .koszyk-widok{display:grid;grid-template-columns:1fr 370px;gap:clamp(24px,3.5vw,48px);align-items:start} #zlotka-app .pozycje{border:1px solid var(--kreska)} #zlotka-app .pozycja{display:grid;grid-template-columns:110px 1fr auto;gap:20px;padding:22px;border-bottom:1px solid var(--kreska)} #zlotka-app .pozycja:last-child{border-bottom:0} #zlotka-app .pozycja__foto{position:relative;overflow:hidden;min-height:100px;aspect-ratio:4/5;border:1px solid var(--kreska)} #zlotka-app .pozycja__foto img{width:100%;height:100%;object-fit:cover} #zlotka-app .pozycja h3{font-size:17px;line-height:1.35} #zlotka-app .pozycja__meta{font-size:13.5px;color:var(--tekst-cichy);margin-top:10px;line-height:1.95} #zlotka-app .pozycja__meta b{color:var(--tekst);font-weight:400} #zlotka-app .pozycja__dol{display:flex;align-items:center;gap:20px;margin-top:18px;flex-wrap:wrap} #zlotka-app .usun{font-size:12.5px;letter-spacing:.1em;background:none;border:0;padding:6px 0;text-transform:uppercase;color:#6E675C;border-bottom:1px solid transparent;transition:color .25s,border-color .25s} #zlotka-app .usun:hover{color:var(--blad);border-color:var(--blad)} #zlotka-app .pozycja__cena{text-align:right;font-family:var(--display);font-size:24px;color:var(--zloto-jasne);white-space:nowrap;align-self:start}/* Podsumowanie — przyklejone na desktopie */ #zlotka-app .podsumowanie{position:sticky;top:94px;border:1px solid var(--kreska-mocna);background:var(--czern-glab);padding:26px 24px} #zlotka-app .podsumowanie h2{font-size:21px;margin-bottom:20px} #zlotka-app .suma-wiersz{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:14px;color:var(--tekst-cichy)} #zlotka-app .suma-wiersz b{color:var(--tekst);font-weight:400} #zlotka-app .suma-wiersz--razem{ border-top:1px solid var(--kreska);margin-top:12px;padding-top:16px; font-size:16px;color:var(--kosc); } #zlotka-app .suma-wiersz--razem b{font-family:var(--display);font-size:26px;color:var(--zloto-jasne)} #zlotka-app .rabat{display:flex;gap:8px;margin:20px 0} #zlotka-app .rabat input{flex:1;background:transparent;border:1px solid var(--kreska-mocna);padding:12px 14px;font-size:13px} #zlotka-app .podsumowanie .btn{margin-top:6px} #zlotka-app .zaufanie{display:grid;gap:9px;margin-top:22px;padding-top:20px;border-top:1px solid var(--kreska);font-size:12px;color:var(--tekst-cichy)} #zlotka-app .zaufanie div{display:flex;gap:9px;align-items:center} #zlotka-app .zaufanie svg{width:14px;height:14px;stroke:var(--zloto);fill:none;stroke-width:1.3;flex:none}/* Koszyk pusty */ #zlotka-app .pusty{text-align:center;padding:clamp(50px,8vw,90px) 20px;border:1px solid var(--kreska)} #zlotka-app .pusty h2{margin-bottom:14px} #zlotka-app .pusty p{color:var(--tekst-cichy);margin-bottom:28px}/* ════════════════════════════════════════════════════════════ O NAS ════════════════════════════════════════════════════════════ */ #zlotka-app .historia{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center} #zlotka-app .historia__foto{position:relative;overflow:hidden;min-height:280px;aspect-ratio:4/5;border:1px solid var(--kreska)} #zlotka-app .historia__foto img{width:100%;height:100%;object-fit:cover}/* Oś czasu */ #zlotka-app .os{list-style:none;display:grid;gap:0;margin-top:14px} #zlotka-app .os li{position:relative;padding:0 0 30px 34px;border-left:1px solid var(--kreska)} #zlotka-app .os li:last-child{padding-bottom:0;border-left-color:transparent} #zlotka-app .os li::before{ content:'';position:absolute;left:-4px;top:6px;width:7px;height:7px; background:var(--zloto);transform:rotate(45deg); } #zlotka-app .os time{font-family:var(--display);font-size:19px;color:var(--zloto);display:block;margin-bottom:6px} #zlotka-app .os p{font-size:14.5px;color:var(--tekst-cichy);line-height:1.75}/* Liczby */ #zlotka-app .liczby{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--kreska);border:1px solid var(--kreska)} #zlotka-app .liczba{background:var(--czern);padding:34px 22px;text-align:center} #zlotka-app .liczba b{display:block;font-family:var(--display);font-size:clamp(34px,4.4vw,52px);color:var(--zloto-jasne);line-height:1} #zlotka-app .liczba span{display:block;margin-top:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tekst-cichy)}/* Zespół */ #zlotka-app .zespol{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)} #zlotka-app .osoba__foto{position:relative;overflow:hidden;min-height:220px;aspect-ratio:3/4;border:1px solid var(--kreska);margin-bottom:18px} #zlotka-app .osoba__foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35);transition:filter .5s} #zlotka-app .osoba:hover .osoba__foto img{filter:grayscale(0)} #zlotka-app .osoba h3{font-size:20px} #zlotka-app .osoba span{display:block;margin-top:6px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--zloto)} #zlotka-app .osoba p{margin-top:12px;font-size:14px;color:var(--tekst-cichy);line-height:1.75}/* ════════════════════════════════════════════════════════════ KONTAKT ════════════════════════════════════════════════════════════ */ #zlotka-app .kontakt-widok{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,68px);align-items:start} #zlotka-app .dane{display:grid;gap:26px;margin-top:30px} #zlotka-app .dana{display:flex;gap:16px;align-items:flex-start} #zlotka-app .dana svg{width:19px;height:19px;stroke:var(--zloto);fill:none;stroke-width:1.2;flex:none;margin-top:3px} #zlotka-app .dana h3{font-size:15px;font-family:var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--zloto);font-weight:400} #zlotka-app .dana p, #zlotka-app .dana a{display:block;margin-top:7px;font-size:15px;color:var(--tekst-cichy);line-height:1.8} #zlotka-app .dana a:hover{color:var(--zloto)}/* Mapa — zastępnik, w WP: osadzona Google Maps */ #zlotka-app .mapa{ position:relative;min-height:240px;aspect-ratio:16/10;overflow:hidden; border:1px solid var(--kreska);margin-top:30px; background:linear-gradient(135deg,#16130F,#0D0B09); display:grid;place-items:center;text-align:center;padding:24px; } #zlotka-app .mapa__siatka{position:absolute;inset:0;opacity:.3; background-image:linear-gradient(var(--kreska) 1px,transparent 1px),linear-gradient(90deg,var(--kreska) 1px,transparent 1px); background-size:44px 44px; } #zlotka-app .mapa__pin{position:relative;z-index:2} #zlotka-app .mapa__pin svg{width:34px;height:34px;stroke:var(--zloto);fill:none;stroke-width:1.2;margin:0 auto 12px} #zlotka-app .mapa__pin strong{display:block;font-family:var(--display);font-size:19px;color:var(--kosc);font-weight:400} #zlotka-app .mapa__pin span{display:block;margin-top:6px;font-size:12px;color:var(--tekst-cichy)}/* Godziny */ #zlotka-app .godziny{border:1px solid var(--kreska);padding:24px;margin-top:30px} #zlotka-app .godziny h3{font-size:15px;font-family:var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--zloto);font-weight:400;margin-bottom:16px} #zlotka-app .godzina{display:flex;justify-content:space-between;padding:7px 0;font-size:14px;color:var(--tekst-cichy)} #zlotka-app .godzina b{color:var(--tekst);font-weight:400}/* FAQ */ #zlotka-app .faq{max-width:820px;margin-inline:auto}/* ════════════════════════════════════════════════════════════ RESPONSYWNOŚĆ PODSTRON ════════════════════════════════════════════════════════════ */ @media (max-width:1024px){/* Strona główna */ #zlotka-app .gablota{grid-template-columns:1fr} #zlotka-app .gablota__foto{order:-1;min-height:240px;aspect-ratio:16/11} #zlotka-app .gablota__foto::after{background:linear-gradient(180deg,transparent 40%,rgba(10,9,8,.85))} #zlotka-app .kategorie{grid-template-columns:repeat(2,1fr)} #zlotka-app .rozmiar__in{grid-template-columns:1fr;gap:38px}/* Katalog — filtry w wysuwanym panelu */ #zlotka-app .katalog{grid-template-columns:1fr} #zlotka-app .filtry{ position:fixed;top:0;left:0;bottom:0;width:min(360px,90vw);z-index:95; overflow-y:auto;-webkit-overflow-scrolling:touch; padding:24px 24px 40px;border:0;border-right:1px solid var(--kreska-mocna); transform:translateX(-100%);visibility:hidden; transition:transform .45s var(--plynnie),visibility .45s; } #zlotka-app .filtry.otwarte{transform:none;visibility:visible} #zlotka-app .filtry__zamknij{display:block !important} #zlotka-app .zaslona{ position:fixed;inset:0;z-index:94;background:rgba(8,7,6,.7); opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s; } #zlotka-app .zaslona.widoczna{opacity:1;visibility:visible} #zlotka-app .filtry-mobilne{display:inline-flex} #zlotka-app .filtruj-tab{display:flex}/* Produkt */ #zlotka-app .produkt-widok{grid-template-columns:1fr;gap:34px}/* Koszyk */ #zlotka-app .koszyk-widok{grid-template-columns:1fr} #zlotka-app .podsumowanie{position:static}/* O nas */ #zlotka-app .historia{grid-template-columns:1fr;gap:34px} #zlotka-app .liczby{grid-template-columns:repeat(2,1fr)} #zlotka-app .zespol{grid-template-columns:repeat(2,1fr)}/* Kontakt */ #zlotka-app .kontakt-widok{grid-template-columns:1fr;gap:40px}} @media (max-width:767px){ #zlotka-app .kategorie{grid-template-columns:repeat(2,1fr);gap:10px} #zlotka-app .kat__tresc{padding:16px 12px} #zlotka-app .kat h3{font-size:15px;line-height:1.25} #zlotka-app .kat span{font-size:9.5px;letter-spacing:.14em} #zlotka-app .hero__cta .btn{flex:1 1 100%} #zlotka-app .metka{left:16px;bottom:16px;font-size:9px;padding:9px 12px} #zlotka-app .miarka__odczyt{flex-direction:column;align-items:flex-start} #zlotka-app input[type=range]::-webkit-slider-thumb{width:20px;height:20px;margin-top:-9.5px} #zlotka-app input[type=range]::-moz-range-thumb{width:20px;height:20px} #zlotka-app .narzedzia{flex-direction:column;align-items:stretch;gap:14px} #zlotka-app .sortowanie{justify-content:space-between} #zlotka-app .sortowanie select{flex:1;margin-left:12px} #zlotka-app .galeria__mini{grid-template-columns:repeat(4,1fr);gap:7px} #zlotka-app .do-koszyka{flex-direction:column;gap:14px} #zlotka-app .do-koszyka .ilosc{align-self:flex-start} #zlotka-app .do-koszyka .btn{width:100%;padding:20px;font-size:15px;letter-spacing:.16em} #zlotka-app .rozmiary{grid-template-columns:repeat(auto-fill,minmax(46px,1fr))}/* Klient zgłosił nachodzenie ceny na przycisk „Usuń" */ #zlotka-app .pozycja{grid-template-columns:92px 1fr;gap:16px;padding:18px} #zlotka-app .pozycja__cena{grid-column:1 / -1;text-align:left;font-size:23px;margin-top:12px; padding-top:14px;border-top:1px solid var(--kreska)} #zlotka-app .pozycja__dol{gap:16px;margin-top:14px} #zlotka-app .zespol{grid-template-columns:1fr} #zlotka-app .liczby{grid-template-columns:repeat(2,1fr)} #zlotka-app .os li{padding-left:26px;padding-bottom:26px}}/* ════════════════════════════════════════════════════════════ ZWROTY → Elementor: widżet Form + Accordion ════════════════════════════════════════════════════════════ */ #zlotka-app .kroki{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--kreska);border:1px solid var(--kreska)} #zlotka-app .krok{background:var(--czern);padding:28px 24px} #zlotka-app .krok b{ display:grid;place-items:center;width:38px;height:38px; border:1px solid var(--zloto);color:var(--zloto); font-family:var(--display);font-size:19px;font-weight:400;margin-bottom:16px; } #zlotka-app .krok h3{font-size:18px;margin-bottom:8px} #zlotka-app .krok p{font-size:14.5px;color:var(--tekst-cichy);line-height:1.7} #zlotka-app .zwrot-widok{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:start}/* Blok z danymi do przelewu — wyróżniony, bo to newralgiczne dane */ #zlotka-app .konto-blok{ border:1px solid var(--kreska-mocna);background:var(--czern-karta); padding:26px 24px;margin:26px 0; } #zlotka-app .konto-blok h3{font-size:19px;margin-bottom:10px} #zlotka-app .zasady{border:1px solid var(--kreska);background:var(--czern-glab);padding:26px 24px} #zlotka-app .zasady h3{font-size:20px;margin-bottom:18px} #zlotka-app .zasady .lista-punktow li b{color:var(--kosc);font-weight:400} @media (max-width:1024px){ #zlotka-app .kroki{grid-template-columns:repeat(2,1fr)} #zlotka-app .zwrot-widok{grid-template-columns:1fr;gap:38px}} @media (max-width:767px){ #zlotka-app .kroki{grid-template-columns:1fr} #zlotka-app .krok{padding:22px 20px} #zlotka-app .konto-blok{padding:22px 18px} #zlotka-app .zasady{padding:22px 18px}}/* Pasek cofnięcia po usunięciu z koszyka */ #zlotka-app .cofnij{ position:fixed;left:50%;bottom:24px;transform:translateX(-50%); z-index:88;display:flex;align-items:center;gap:18px; background:var(--czern-karta);border:1px solid var(--kreska-jasna); padding:15px 22px;max-width:calc(100vw - 32px); box-shadow:0 18px 40px -18px rgba(0,0,0,.8); } #zlotka-app .cofnij[hidden]{display:none} #zlotka-app .cofnij span{font-size:14.5px;color:var(--tekst-cichy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #zlotka-app .cofnij button{ flex:none;background:none;border:0;padding:4px 0; font-size:12.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--zloto);border-bottom:1px solid var(--kreska-jasna);cursor:pointer; } #zlotka-app .cofnij button:hover{color:var(--zloto-jasne)} #zlotka-app .podsumowanie[hidden], #zlotka-app .pozycje[hidden]{display:none} @media (max-width:767px){ #zlotka-app .cofnij{left:16px;right:16px;bottom:16px;transform:none;gap:14px;padding:14px 18px} #zlotka-app .cofnij span{font-size:13.5px}}/* ------------------------------------------------------------ PRZEWIJANIE CIĄGŁE → w WP: wtyczka do infinite scroll albo Elementor Pro Loop Grid z opcją „Load on scroll" ------------------------------------------------------------ */ #zlotka-app .doladowanie{ display:flex;flex-direction:column;align-items:center;gap:16px; padding:clamp(38px,5vw,58px) 0 8px; } #zlotka-app .doladowanie[hidden]{display:none} #zlotka-app .doladowanie__kreska{ position:relative;width:180px;height:1px;background:rgba(200,164,93,.2);overflow:hidden; } #zlotka-app .doladowanie__kreska::after{ content:'';position:absolute;top:0;left:-40%;width:40%;height:1px;background:var(--zloto); animation:suniecie 1.4s ease-in-out infinite; } @keyframes suniecie{0%{left:-40%}100%{left:100%}} #zlotka-app .doladowanie__tekst{ font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tekst-cichy); } #zlotka-app .koniec-listy{ text-align:center;padding:clamp(38px,5vw,58px) 0 0; font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#6E675C; } #zlotka-app .koniec-listy[hidden]{display:none} #zlotka-app .paginacja[hidden]{display:none}/* ════════════════════════════════════════════════════════════ BLOG → Elementor: Kreator motywu → Archiwum wpisów Klient dodaje wpisy sam: tytuł, zdjęcie, treść, kategoria. ════════════════════════════════════════════════════════════ *//* Wpis wyróżniony */ #zlotka-app .wyroznik{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,3.6vw,52px); align-items:center;border:1px solid var(--kreska);background:var(--czern-glab)} #zlotka-app .wyroznik__foto{position:relative;overflow:hidden;min-height:260px;aspect-ratio:16/11;display:block} #zlotka-app .wyroznik__foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--plynnie)} #zlotka-app .wyroznik__foto:hover img{transform:scale(1.04)} #zlotka-app .wyroznik__opis{padding:clamp(26px,3vw,44px) clamp(26px,3vw,44px) clamp(26px,3vw,44px) 0} #zlotka-app .wyroznik h2{font-size:clamp(27px,3.2vw,40px);margin:14px 0 18px;line-height:1.15} #zlotka-app .wyroznik h2 a:hover{color:var(--zloto-jasne)}/* Znaczniki kategorii */ #zlotka-app .tagi-bloga{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,3.4vw,44px)} #zlotka-app .tag{font-size:13px;letter-spacing:.14em;text-transform:uppercase; border:1px solid var(--kreska-mocna);padding:10px 18px;color:var(--tekst-cichy); transition:border-color .3s,color .3s,background .3s} #zlotka-app .tag:hover{border-color:var(--kreska-jasna);color:var(--zloto)} #zlotka-app .tag--akt{background:var(--zloto);border-color:var(--zloto);color:#15100A}/* Siatka wpisów */ #zlotka-app .wpisy{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px)} #zlotka-app .wpis{background:var(--czern-karta);border:1px solid var(--kreska); display:flex;flex-direction:column;transition:border-color .4s,transform .4s} #zlotka-app .wpis:hover{border-color:var(--kreska-jasna);transform:translateY(-4px)} #zlotka-app .wpis__foto{position:relative;overflow:hidden;min-height:180px;aspect-ratio:16/10;display:block} #zlotka-app .wpis__foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--plynnie)} #zlotka-app .wpis:hover .wpis__foto img{transform:scale(1.05)} #zlotka-app .wpis__opis{padding:24px 22px 26px} #zlotka-app .wpis__meta{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#6E675C} #zlotka-app .wpis__meta span{color:var(--zloto)} #zlotka-app .wpis h3{font-size:21px;line-height:1.32;margin:12px 0 12px} #zlotka-app .wpis h3 a:hover{color:var(--zloto-jasne)} #zlotka-app .wpis p{font-size:15.5px;color:var(--tekst-cichy);line-height:1.65} @media (max-width:1024px){ #zlotka-app .wyroznik{grid-template-columns:1fr;gap:0} #zlotka-app .wyroznik__opis{padding:30px 28px 34px} #zlotka-app .wpisy{grid-template-columns:repeat(2,1fr)}} @media (max-width:767px){ #zlotka-app .wpisy{grid-template-columns:1fr;gap:18px} #zlotka-app .tag{font-size:12px;padding:9px 15px}}/* ------------------------------------------------------------ POWIĘKSZENIE / ZMNIEJSZENIE ROZMIARU → Woo: pole dodatkowe Włączane per produkt — nie każdy pierścionek się do tego nadaje. ------------------------------------------------------------ */ #zlotka-app .zmiana-rozmiaru{ margin-top:18px;padding:16px 18px;border:1px solid var(--kreska-mocna); background:var(--czern-karta);display:flex;align-items:flex-start;gap:13px; } #zlotka-app .zmiana-rozmiaru input{ appearance:none;-webkit-appearance:none;flex:none;margin-top:2px; width:19px;height:19px;border:1px solid var(--kreska-mocna);cursor:pointer; } #zlotka-app .zmiana-rozmiaru input:checked{ background:var(--zloto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%2315100A' stroke-width='1.8'/%3E%3C/svg%3E") center/11px no-repeat; border-color:var(--zloto); } #zlotka-app .zmiana-rozmiaru label{cursor:pointer;font-size:14.5px;color:var(--tekst)} #zlotka-app .zmiana-rozmiaru .dopłata{display:block;margin-top:4px;font-size:12.5px;color:var(--zloto-cien)} #zlotka-app .zmiana-rozmiaru__brak{ margin-top:18px;padding:14px 18px;border:1px solid var(--kreska); font-size:13.5px;color:var(--tekst-cichy); }/* ------------------------------------------------------------ SZUFLADKA „NIE ZNASZ ROZMIARU?" → panel wysuwany z boku ------------------------------------------------------------ */ #zlotka-app .wybor__tytul a{display:inline-flex;align-items:center;gap:7px} #zlotka-app .wybor__tytul a svg{width:16px;height:16px;stroke:var(--zloto);fill:none;stroke-width:1.3} #zlotka-app .szuflada-zaslona{ position:fixed;inset:0;z-index:97;background:rgba(8,7,6,.7); opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s; } #zlotka-app .szuflada-zaslona.widoczna{opacity:1;visibility:visible} #zlotka-app .szuflada{ position:fixed;top:0;right:0;bottom:0;width:min(460px,92vw);z-index:98; background:var(--czern-glab);border-left:1px solid var(--kreska-mocna); padding:32px 30px;overflow-y:auto;-webkit-overflow-scrolling:touch; transform:translateX(100%);transition:transform .4s var(--plynnie); } #zlotka-app .szuflada.otwarta{transform:none} #zlotka-app .szuflada__gora{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px} #zlotka-app .szuflada__gora h3{font-size:23px} #zlotka-app .szuflada__zamknij{background:none;border:0;font-size:26px;line-height:1;color:var(--tekst-cichy);padding:4px} #zlotka-app .szuflada__zamknij:hover{color:var(--zloto)} #zlotka-app .szuflada__zakladki{display:flex;gap:10px;margin-bottom:24px;border-bottom:1px solid var(--kreska)} #zlotka-app .szuflada__zakladka{ background:none;border:0;padding:11px 4px;margin-bottom:-1px; font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--tekst-cichy); border-bottom:2px solid transparent; } #zlotka-app .szuflada__zakladka.akt{color:var(--zloto);border-color:var(--zloto)} #zlotka-app .szuflada__panel{display:none} #zlotka-app .szuflada__panel.akt{display:block} #zlotka-app .szuflada__tabela{width:100%;border-collapse:collapse;font-size:14px} #zlotka-app .szuflada__tabela th{ text-align:left;padding:10px 8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--zloto);border-bottom:1px solid var(--kreska-mocna); } #zlotka-app .szuflada__tabela td{padding:9px 8px;color:var(--tekst);border-bottom:1px solid var(--kreska)} #zlotka-app .szuflada__tabela tr.akt td{color:var(--zloto-jasne);background:rgba(200,164,93,.07)} @media (max-width:767px){ #zlotka-app .szuflada{padding:26px 22px}}/* ------------------------------------------------------------ LIGHTBOX — zdjęcie produktu na pełnym ekranie, przewijane swipe ------------------------------------------------------------ */ #zlotka-app .galeria__glowne{position:relative} #zlotka-app .galeria__powieksz{ position:absolute;top:16px;right:16px;z-index:3; width:44px;height:44px;display:grid;place-items:center; background:rgba(10,9,8,.6);border:1px solid var(--kreska-mocna); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); } #zlotka-app .galeria__powieksz svg{width:19px;height:19px;stroke:var(--kosc);fill:none;stroke-width:1.4} #zlotka-app .galeria__powieksz:hover{border-color:var(--kreska-jasna)} #zlotka-app .lightbox{ position:fixed;inset:0;z-index:120;background:#000; opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s; } #zlotka-app .lightbox.otwarty{opacity:1;visibility:visible} #zlotka-app .lightbox__zamknij{ position:absolute;top:20px;right:24px;z-index:5; background:none;border:0;color:var(--kosc);font-size:34px;line-height:1;padding:8px; } #zlotka-app .lightbox__tasma{ display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; } #zlotka-app .lightbox__tasma::-webkit-scrollbar{display:none} #zlotka-app .lightbox__tasma img{ flex:0 0 100%;width:100%;height:100%;object-fit:contain;scroll-snap-align:center; } #zlotka-app .lightbox__kropki{ position:absolute;left:0;right:0;bottom:26px;z-index:5; display:flex;justify-content:center;gap:8px; } #zlotka-app .lightbox__kropki i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)} #zlotka-app .lightbox__kropki i.akt{background:var(--zloto)} #zlotka-app body.lightbox-otwarty{overflow:hidden} html,body{background:#100E0C} .zl-home{background:#100E0C} .zl-home .elementor-widget-html{width:100%} .zl-archive-grid ul.products{display:grid !important;grid-template-columns:repeat(4,1fr);gap:28px;list-style:none;margin:0;padding:0} .zl-archive-grid ul.products li.product{background:#171412;border:1px solid rgba(200,164,93,.16);padding:0 !important;margin:0 !important;position:relative;transition:border-color .4s,transform .4s} .zl-archive-grid ul.products li.product:hover{border-color:rgba(200,164,93,.32);transform:translateY(-4px)} .zl-archive-grid ul.products li.product a img{aspect-ratio:1/1;object-fit:cover;width:100%;display:block;margin:0 !important} .zl-archive-grid ul.products li.product .woocommerce-loop-product__title{font-family:'Bodoni Moda',Georgia,serif !important;font-weight:400;color:#F2EBDF !important;font-size:19px;margin:20px 20px 0;padding:0} .zl-archive-grid ul.products li.product .price,.zl-archive-grid ul.products li.product .price .amount,.zl-archive-grid ul.products li.product .price ins{color:#E7D3A4 !important;font-family:'Jost',sans-serif;font-size:24px;text-decoration:none} .zl-archive-grid ul.products li.product .price{display:block;margin:13px 20px 20px;padding-top:12px;border-top:1px solid rgba(200,164,93,.16)} .zl-archive-grid ul.products li.product .price del,.zl-archive-grid ul.products li.product .price del .amount{color:#9A9184 !important;font-size:14px} .zl-archive-grid ul.products li.product .star-rating{display:none} .zl-archive-grid ul.products li.product a.button{display:flex;justify-content:center;margin:0 20px 20px;padding:13px 14px;border:1px solid rgba(200,164,93,.32) !important;color:#C8A45D !important;background:transparent !important;border-radius:0;font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;width:calc(100% - 40px)} .zl-archive-grid ul.products li.product a.button:hover{background:#C8A45D !important;color:#100E0C !important} .zl-archive-grid ul.products li.product .onsale{position:absolute;top:14px;left:14px;z-index:2;font-size:10px;letter-spacing:.14em;background:#C8A45D;color:#16110A;padding:4px 9px;min-height:0;min-width:0;line-height:1;border-radius:0} @media(max-width:1024px){.zl-archive-grid ul.products{grid-template-columns:repeat(2,1fr);gap:16px}}/* End custom CSS */