.elementor-kit-8{--e-global-color-primary:#EC2E8F;--e-global-color-secondary:#FF2D95;--e-global-color-text:#FFFFFF;--e-global-color-accent:#B0B0B8;--e-global-color-19c6a7a:#0E0E11;--e-global-color-40d9b5b:#17171B;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-size:15px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:1px;background-color:#0E0E11;color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{background-color:var( --e-global-color-secondary );font-family:"Poppins", Sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#FFFFFF;border-radius:6px 6px 6px 6px;}.elementor-kit-8 button:hover,.elementor-kit-8 button:focus,.elementor-kit-8 input[type="button"]:hover,.elementor-kit-8 input[type="button"]:focus,.elementor-kit-8 input[type="submit"]:hover,.elementor-kit-8 input[type="submit"]:focus,.elementor-kit-8 .elementor-button:hover,.elementor-kit-8 .elementor-button:focus{background-color:#C41F74;color:var( --e-global-color-text );}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 a{color:#FFFFFF;font-family:"Poppins", Sans-serif;}.elementor-kit-8 h1{color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:40px;font-weight:600;line-height:1.2em;}.elementor-kit-8 h2{color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:32px;font-weight:600;line-height:1.25em;}.elementor-kit-8 h3{color:#FFFFFF;font-family:"Poppins", Sans-serif;font-weight:600;}.elementor-kit-8 h4{color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:20px;font-weight:600;line-height:1.4em;}.elementor-kit-8 h5{color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:600;line-height:1.4em;}.elementor-kit-8 h6{color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:600;line-height:1.5em;}.elementor-kit-8 img{border-radius:8px 8px 8px 8px;}.elementor-kit-8 label{color:#111111;}.elementor-kit-8 input:not([type="button"]):not([type="submit"]),.elementor-kit-8 textarea,.elementor-kit-8 .elementor-field-textual{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );color:#111111;background-color:#FFFFFF;border-style:none;border-radius:6px 6px 6px 6px;}.elementor-kit-8 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-8 textarea:focus,.elementor-kit-8 .elementor-field-textual:focus{border-style:solid;border-width:1px 1px 1px 1px;border-color:#EC2E8F;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-8 input:not([type="button"]):not([type="submit"]),.elementor-kit-8 textarea,.elementor-kit-8 .elementor-field-textual{font-size:var( --e-global-typography-text-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8 h1{line-height:1.2em;}.elementor-kit-8 h2{line-height:1.25em;}.elementor-kit-8 h3{line-height:1.3em;}.elementor-kit-8 h4{line-height:1.4em;}.elementor-kit-8 h5{line-height:1.4em;}.elementor-kit-8 h6{line-height:1.4em;}.elementor-kit-8 input:not([type="button"]):not([type="submit"]),.elementor-kit-8 textarea,.elementor-kit-8 .elementor-field-textual{font-size:var( --e-global-typography-text-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ============================================================ CrazyStaff — mockup styles WHERE TO PASTE: Elementor (top-left hamburger) > Site Settings > Custom CSS Paste EVERYTHING below. Click UPDATE. ============================================================ */ /* ---------- 1. COLOR TOKENS ---------- */ :root{ --cs-bg: #0e0e11; /* page background */ --cs-bg-deep: #0a0a0c; /* topbar / footer bottom */ --cs-surface: #17171b; /* product cards */ --cs-surface-2: #141417; /* trust bar, nav bar */ --cs-pink: #ec2e8f; /* main pink */ --cs-pink-2: #ff2d95; /* button pink (brighter) */ --cs-pink-dark: #c41f74; /* hover */ --cs-text: #ffffff; --cs-muted: #b0b0b8; /* labels, meta, secondary lines */ --cs-body: #d5d5dd; /* long-form copy: descriptions, tabs, legal pages. --cs-muted is sized for short labels; a whole paragraph of it next to white headings reads as two different greys. */ --cs-border: #2a2a31; --cs-radius: 10px; } /* ---------- 2. KILL OLD THEME LOOK ---------- */ /* removes doodle background + boxed narrow column from current site */ body, body.woocommerce, .wpr-theme-body, #content, .site, .site-content{ background-color: var(--cs-bg) !important; background-image: none !important; color: var(--cs-text); } /* If the Royal theme header/footer still shows ON TOP of your new Elementor header, REMOVE the two slashes on the next 2 lines. */ /* header.site-header, .wpr-header-wrap { display:none !important; } */ /* footer.site-footer, .wpr-footer-wrap { display:none !important; } */ /* The theme stripes EVERY table on the site: table tbody > tr:nth-child(2n+1) > td { background-color:#f7f7f7 } in the theme's style.css. On a dark site with white body text that is white on near-white — it is what made the product attributes table unreadable, and then the wishlist rows. Killed once, globally, instead of being fought table by table; anything that wants striping declares its own below. */ table tbody > tr:nth-child(2n+1) > td, table tbody > tr:nth-child(2n+1) > th{ background-color:transparent !important; } /* ---------- 2b. LINE ICONS (Lucide / Tabler SVG) ---------- Makes uploaded stroke-style SVGs render at mockup weight and inherit Elementor's colour picker. Harmless if you use icon fonts. */ /* :not(...) matters — social brand glyphs and payment logos are SOLID shapes, and fill:none makes them vanish. This rule is only for outline icons. */ .cs-topbar svg, .cs-usp svg, .cs-trust svg, .cs-header-actions svg, .cs-wish svg, .cs-footer .elementor-icon-list-icon svg{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } /* Kill the baseline gap under inline SVGs and centre them in their box. Without this an uploaded SVG sits a few px high or low next to the text. */ .cs-topbar .elementor-icon-box-icon, .cs-usp .elementor-icon-box-icon, .cs-trust .elementor-icon-box-icon, .cs-header-actions .elementor-icon-box-icon, .cs-topbar .elementor-icon, .cs-usp .elementor-icon, .cs-trust .elementor-icon, .cs-header-actions .elementor-icon{ display:flex !important; align-items:center; justify-content:center; line-height:0; } .cs-topbar .elementor-icon svg, .cs-usp .elementor-icon svg, .cs-trust .elementor-icon svg, .cs-header-actions .elementor-icon svg{ display:block; vertical-align:middle; } /* ---------- 2c. LINE-HEIGHT GUARD ---------- Style motywu > Typografia stores line-height with a unit. If a heading is left on PX with a value like 1.2, that means 1.2 PIXELS and every wrapped line draws on top of the one above it. Icon-box titles render as

, so they collapse the same way headings do. Fix the real cause in Site Settings (switch the unit to EM on H1-H6); these rules stop it happening inside our components regardless. */ .cs-topbar .elementor-icon-box-title, .cs-usp .elementor-icon-box-title, .cs-trust .elementor-icon-box-title, .cs-header-actions .elementor-icon-box-title, .cs-topbar .elementor-icon-box-description, .cs-usp .elementor-icon-box-description, .cs-trust .elementor-icon-box-description{ line-height:1.35 !important; } .cs-foot-head, .cs-sec-title, .cs-card-title, .cs-card-title a{ line-height:1.35 !important; } /* ---------- 3. TOPBAR ---------- */ .cs-topbar{ font-size:12px; letter-spacing:.4px; } .cs-topbar .elementor-icon-box-title{ margin:0; font-size:12px; font-weight:600; } .cs-topbar .elementor-icon-box-wrapper{ display:flex; align-items:center; gap:8px; } .cs-topbar .elementor-icon-box-icon{ margin:0 !important; } .cs-topbar svg, .cs-topbar i{ color:var(--cs-pink); } /* ---------- 4. HEADER ---------- */ .cs-header{ border-bottom:1px solid var(--cs-border); } /* The desktop category menu is its own row (.cs-nav) below .cs-header, not a child of it. Nothing in its chain sets a z-index, and Elementor's dropdown is position:absolute with z-index:auto — so it paints at level 0, in DOM order. Product-card badges are z-index:3 (sections 10 and 18b), which beats level 0 regardless of source order: an open submenu was covered by every NOWOŚĆ and -XX% badge it overlapped. Raising the two header rows puts the whole chrome above page content, so no per-dropdown value needs tuning. Both rows get it because they are siblings — lifting only .cs-nav would let the row above it be overlapped instead. */ .cs-header, .cs-nav{ position:relative; z-index:100; } /* Logo via an HTML widget with , so the browser downloads only the variant it needs. Elementor's image controls are not responsive, so the Site Logo widget cannot swap files per breakpoint on its own. */ .cs-logo{ display:block; line-height:0; } .cs-logo img{ display:block; width:210px; /* desktop: full lockup */ height:auto; max-width:100%; } @media (max-width:1024px){ .cs-logo img{ width:170px; } /* compact lockup from here down */ } @media (max-width:767px){ .cs-logo img{ width:130px; } } /* search bar */ /* !important is needed here: Elementor ships .elementor.elementor .e-con > .elementor-widget { max-width:100% } which is (0,4,0) and outranks a plain class .elementor-kit-8. */ .cs-search{ flex:1 1 auto; /* takes the space between logo and account/cart */ width:100%; max-width:520px !important; margin:0 auto; } /* Values sampled from wordpress2_upscale.png (4x). Field : #181818, 1px #434345 border, white text, 46px tall, radius 8px on the LEFT only — the right end is square. Button : own element, ALL FOUR corners rounded 10px, flush against the field (no gap), pink #F02F94, near-black magnifier icon. Selectors cover both Elementor markups: legacy .elementor-search-form__input / __submit / __container current .e-search / .e-search-input / .e-search-submit The current one positions the button with a custom property, so that is zeroed rather than fought with margins. */ /* Markup (Elementor current Search widget): search.e-search form.e-search-form <- this is the flex row label.e-search-label <- screen-reader only div.e-search-input-wrapper <- THIS must flex, not the input input.e-search-input svg.e-fas-times <- clear button output.e-search-results-container button.e-search-submit Field is square on its RIGHT edge, button is square on its LEFT edge. They meet flush and the pair reads as one rounded control: field border-radius: 8px 0 0 8px button border-radius: 0 10px 10px 0 */ .cs-search{ --e-search-submit-margin-inline-start:0 !important; } .cs-search .e-search{ display:block; width:100%; } /* Selectors below are doubled (.cs-search.cs-search) and go through .e-search-form on purpose. Elementor ships .elementor-widget-search .e-search .e-search-submit = (0,3,0), which outranks a plain two-class .elementor-kit-8 and was silently killing display / align-items / transition. Doubling gets us to (0,4,0). */ .cs-search.cs-search .e-search-form{ display:flex !important; align-items:stretch !important; /* button inherits the input's height */ gap:0 !important; width:100%; background:transparent; border:none; border-radius:0; overflow:visible; /* never clip the button's corners */ } /* the a11y label must not eat width */ .cs-search.cs-search .e-search-form .e-search-label{ flex:0 0 0; width:0; margin:0; padding:0; } .cs-search.cs-search .e-search-form .e-search-input-wrapper{ flex:1 1 auto; min-width:0; /* lets it actually shrink/grow in flex */ position:relative; display:flex; align-items:stretch; } /* Height comes from the widget panel (Styl > Pole wejściowe > Dopełnienie), NOT from here. The button below stretches to whatever this ends up being, so the two can never disagree again. */ .cs-search.cs-search .e-search-form .e-search-input{ width:100% !important; box-sizing:border-box !important; padding:0 20px !important; background:#181818 !important; color:#ffffff !important; border:1px solid #434345 !important; border-radius:8px 0 0 8px !important; /* square on the right */ box-shadow:none !important; font-size:15px; } .cs-search.cs-search .e-search-form .e-search-input::placeholder{ color:rgba(255,255,255,.92); opacity:1; } .cs-search.cs-search .e-search-form .e-search-input:focus{ outline:none !important; border-color:var(--cs-pink) !important; } /* the little clear (×) icon that appears once you type */ .cs-search.cs-search .e-search-input-wrapper > svg{ color:#ffffff; fill:currentColor; stroke:none; width:14px; height:14px; position:absolute; right:14px; top:50%; transform:translateY(-50%); } .cs-search.cs-search .e-search-form .e-search-submit{ flex:0 0 52px; /* Do NOT pin a height here. align-self:stretch makes the button exactly as tall as the input, whatever the panel sets it to. */ width:52px !important; min-width:52px !important; max-width:52px !important; align-self:stretch !important; height:auto !important; min-height:0 !important; max-height:none !important; aspect-ratio:auto !important; box-sizing:border-box !important; line-height:1 !important; margin:0 0 0 -1px !important; /* covers the field's right border, no seam */ margin-inline-start:-1px !important; padding:0 !important; position:relative; z-index:1; background:var(--cs-pink-2) !important; border:none !important; border-radius:0 10px 10px 0 !important; /* square on the left, meets the field */ display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer; transition:background .2s !important; } .cs-search.cs-search .e-search-form .e-search-submit:hover{ background:var(--cs-pink-dark) !important; } /* Lucide icon: stroked, so colour it via stroke */ .cs-search.cs-search .e-search-form .e-search-submit svg{ width:20px; height:20px; color:#1a1a1a !important; stroke:#1a1a1a !important; stroke-width:2.2; fill:none !important; } /* Live-results dropdown. It is always in the DOM, empty, at ~2px tall — so giving it a background and border unconditionally draws a thin line under the search field. Style it only once it actually holds results. (Elementor's editor does not render this container, which is why the line is invisible while editing.) */ .cs-search .e-search-results-container{ background:transparent; border:none; color:#fff; margin:0; min-height:0; } .cs-search .e-search-results-container:has(.e-search-results > *){ background:#1a1a1f; border:1px solid var(--cs-border); border-radius:8px; margin-top:6px; } /* fallback for browsers without :has() — hide an empty container outright */ .cs-search .e-search-results-container:empty{ display:none !important; } .cs-search .e-search-results:empty{ display:none !important; } /* account + cart cluster Must be a CHILD container of .cs-header. If it renders with the class `e-parent` it is top-level and will span the full width no matter what is set here — fix that in the Navigator, not in CSS. These rules only stop it stretching once it is correctly nested. */ .cs-header-actions{ flex:0 0 auto !important; width:auto !important; max-width:none !important; } /* neutralise the .e-con-inner wrapper that "Boxed" adds */ .cs-header-actions > .e-con-inner{ width:auto !important; max-width:none !important; padding:0 !important; display:flex; flex-direction:row; align-items:center; gap:28px; } .cs-header-actions .elementor-icon-box-title{ margin:0; font-size:13px; font-weight:600; letter-spacing:.5px; white-space:nowrap; /* "Moje konto" must stay on one line */ } .cs-header-actions .elementor-icon-box-wrapper{ display:flex; align-items:center; gap:10px; } .cs-header-actions .elementor-icon-box-icon{ margin:0 !important; } .cs-header-actions .elementor-icon-box-content{ display:flex; align-items:center; } .cs-cart-group p{ white-space:nowrap; } /* both blocks share one baseline */ .cs-header-actions > .e-con-inner > *{ display:flex; align-items:center; } /* Cart toggle is an icon, NOT a call-to-action button. Style motywu > Przyciski paints every .elementor-button pink, and the Menu Cart toggle renders as , so it gets painted too. Strip it back here. */ .elementor-menu-cart__toggle .elementor-button, .elementor-menu-cart__toggle_button, a#elementor-menu-cart__toggle_button{ background:transparent !important; background-color:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; min-height:0 !important; color:var(--cs-text) !important; } .elementor-menu-cart__toggle .elementor-button:hover, .elementor-menu-cart__toggle_button:hover{ background:transparent !important; color:var(--cs-pink) !important; } /* subtotal text next to the icon — hide it, the mockup shows only the icon, the bubble and the KOSZYK label. Also switch it off in the widget panel. */ .cs-header-actions .elementor-menu-cart__toggle .elementor-button-text{ display:none !important; } /* cart icon + KOSZYK label sit as one unit */ .cs-cart-group{ flex:0 0 auto !important; width:auto !important; } .cs-cart-group > .e-con-inner{ width:auto !important; max-width:none !important; padding:0 !important; display:flex; flex-direction:row; align-items:center; gap:10px; } .cs-cart-group p{ margin:0; } /* cart bubble */ .elementor-menu-cart__toggle .elementor-button-icon{ color:#fff; } .elementor-menu-cart__toggle .elementor-button-icon [data-counter]:before{ background:var(--cs-pink-2) !important; color:#fff !important; font-size:11px; min-width:18px; height:18px; line-height:18px; } /* ---------- 5. MAIN NAV ---------- Two menu widgets, one visible at a time: .cs-nav desktop bar > 1024 .cs-nav-mobile hamburger <= 1024, sits first in the header row The burger lives inside the nav widget, so hiding .cs-nav on tablet would remove the menu entirely — hence the second widget. */ /* The hamburger is identified structurally, not by class: any nav-menu widget inside the header row IS the mobile one, because the desktop menu lives in its own .cs-nav container. This keeps working whether or not the widget has the cs-nav-mobile class. */ .cs-nav-mobile, .cs-header .elementor-widget-nav-menu, .cs-header .elementor-widget-wordpress-menu{ display:none !important; } .cs-nav{ background:var(--cs-surface-2); border-top:1px solid var(--cs-border); border-bottom:1px solid var(--cs-border); } .cs-nav .elementor-item{ font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--cs-text) !important; padding:16px 18px !important; } .cs-nav .elementor-item:hover, .cs-nav .elementor-item.elementor-item-active{ color:var(--cs-pink) !important; } .cs-nav .sub-menu{ background:#1c1c21 !important; border:1px solid var(--cs-border); } .cs-nav .sub-menu .elementor-sub-item{ color:var(--cs-text) !important; font-size:13px; letter-spacing:.5px; } .cs-nav .sub-menu .elementor-sub-item:hover{ color:var(--cs-pink) !important; background:#26262c !important; } /* ---------- 6. HERO ---------- */ .cs-hero{ position:relative; background-repeat:no-repeat !important; } /* Hero height. The background is 1714x918 (1.87:1) but the hero box is far wider than that, so `cover` always crops some height. Matching the container to the image's aspect ratio removes the crop but makes the hero ~750px tall at 1400 wide — too much. Fixed height + a chosen crop point is the better trade. 480px matches the mockup, which is ~485px at 1440 wide. */ /* A FIXED height + background-size:cover means the crop changes with viewport width — which is why the hero looks right in Elementor (narrow canvas) and zoomed on the live site (wide viewport). Giving the container the image's own aspect ratio removes the crop entirely: the height then follows the width and the whole banner is always visible. >>> SET THIS TO YOUR IMAGE'S RATIO <<< e.g. 2560x640 -> 4 / 1 1520x470 -> 152 / 47 1714x430 -> 1714 / 430 */ @media (min-width:1025px){ .cs-hero{ aspect-ratio: 2784 / 956; /* background_d2.webp */ max-height:560px; /* ceiling before it crops on wide screens */ min-height:0 !important; height:auto !important; background-size:cover !important; background-position:center center !important; } } /* Tablet: deliberately no aspect-ratio rule. The desktop image plus Elementor's own min-height already renders well at 768-1024, so there is nothing to fix. A 2:1 tablet crop exists at hero/hero-tablet-2to1.webp if it is ever needed. */ .cs-hero .cs-hero-title-2{ color:var(--cs-pink); } .cs-hero .elementor-button{ background:var(--cs-pink-2); color:#fff; border-radius:6px; padding:14px 30px; font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:13px; } .cs-hero .elementor-button:hover{ background:var(--cs-pink-dark); } /* ---------- 7. USP STRIP (4 icons under hero) ---------- */ .cs-usp .elementor-icon-box-wrapper{ display:flex; align-items:center; gap:14px; text-align:left; } .cs-usp .elementor-icon-box-icon{ margin:0 !important; } .cs-usp .elementor-icon-box-title{ margin:0 0 2px; font-size:14px; font-weight:700; letter-spacing:.5px; } .cs-usp .elementor-icon-box-description{ margin:0; font-size:12px; color:var(--cs-muted); } .cs-usp svg, .cs-usp i{ color:var(--cs-pink); } /* ---------- 8. CATEGORY CIRCLES ---------- The row is a horizontal scroll strip, not a carousel widget. All 8 fit on desktop so it never scrolls there; on phones it becomes a swipeable strip with the next circle peeking, which is what mockup 3 shows. No JS needed. */ .cs-cats-strip{ display:flex !important; flex-wrap:nowrap !important; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; /* Firefox */ padding-bottom:4px; } .cs-cats-strip::-webkit-scrollbar{ display:none; } .cs-cats-strip > *{ flex:0 0 auto; scroll-snap-align:start; } /* Selectors go through .cs-cats-strip rather than relying on .cs-cat, because widget-level CSS classes are stored under `_css_classes` and earlier imports used the container key — so the circles have no class of their own. */ .cs-cats-strip > *, .cs-cats-strip .elementor-widget-image-box{ flex:0 0 auto !important; width:auto !important; max-width:none !important; } .cs-cat .elementor-image-box-wrapper, .cs-cats-strip .elementor-image-box-wrapper{ text-align:center; } .cs-cat .elementor-image-box-img, .cs-cats-strip .elementor-image-box-img{ width:112px !important; height:112px !important; margin:0 auto 14px !important; border-radius:50% !important; overflow:hidden; border:2px solid var(--cs-pink) !important; box-shadow:0 0 14px rgba(236,46,143,.45); transition:.25s; display:block; } .cs-cat .elementor-image-box-img img, .cs-cats-strip .elementor-image-box-img img{ width:100% !important; height:100% !important; object-fit:cover; border-radius:50%; display:block; } .cs-cat:hover .elementor-image-box-img, .cs-cats-strip .elementor-widget-image-box:hover .elementor-image-box-img{ box-shadow:0 0 24px rgba(236,46,143,.9); transform:translateY(-4px); } .cs-cat .elementor-image-box-title, .cs-cats-strip .elementor-image-box-title{ font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; margin:0; line-height:1.35; white-space:nowrap; } /* Elementor's global link colour (pink) was winning here — the mockup has white labels under the circles, with pink reserved for hover. */ .cs-cat .elementor-image-box-title a, .cs-cats-strip .elementor-image-box-title a{ color:var(--cs-text) !important; } .cs-cat:hover .elementor-image-box-title a, .cs-cats-strip .elementor-widget-image-box:hover .elementor-image-box-title a{ color:var(--cs-pink) !important; } /* the image-box description is unused here */ .cs-cats-strip .elementor-image-box-description{ display:none; } /* ---------- CATEGORY ICONS ---------- Real generated icons (neon line art on black) are uploaded as the Image Box images. They are pre-padded to 400x400 with the artwork at 280px, so the circular crop never clips them: a circle inscribed in a 400px square has a safe inner square of 400/sqrt2 = 283px. Files: ~/Documents/CrazyStuff/category-icons-web/ — 38 KB for all eight. */ .cs-cats-strip .elementor-image-box-img{ background-color:#000; } /* text-only circles (NEW / %) — add the class cs-cat-text to those two widgets, or leave them as images */ .cs-cat-text .elementor-image-box-img{ display:flex !important; align-items:center; justify-content:center; background:transparent; color:var(--cs-pink); font-size:26px; font-weight:700; } /* ---------- 9. SECTION HEADING ROW ---------- Used by BOTH "POPULARNE KATEGORIE" and "POLECANE PRODUKTY". */ .cs-sec-title{ font-size:24px; font-weight:600; letter-spacing:1px; text-transform:uppercase; margin:0; } .cs-sec-link a{ color:var(--cs-pink); font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; } .cs-sec-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--cs-border); padding-bottom:12px; margin-bottom:22px; } .cs-sec-arrows{ display:flex; gap:6px; } .cs-sec-arrows button{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; color:var(--cs-text); cursor:pointer; } .cs-sec-arrows button:hover{ color:var(--cs-pink); } .cs-sec-arrows button:disabled{ opacity:.3; cursor:default; } /* ---------- 10. PRODUCT CARD (Loop Item) ---------- */ .cs-card{ background:var(--cs-surface); border:1px solid var(--cs-border); border-radius:var(--cs-radius); overflow:hidden; transition:.25s; height:100%; } .cs-card:hover{ border-color:var(--cs-pink); box-shadow:0 8px 28px rgba(0,0,0,.55); } /* Media block: image flush to the card edges, no inset. Elementor containers ship 10px of default padding, which was leaving a visible border around the photo. */ .cs-card, .cs-card > .e-con-inner, .cs-card-media, .cs-card-media > .e-con-inner{ padding:0 !important; } .cs-card-media{ position:relative; overflow:hidden; } /* The featured-image widget wraps the in an that Elementor leaves `display:inline-block`, so the link shrink-wraps to the file's intrinsic 300px and the image's own `width:100%` then resolves against THAT, not the card. Desktop cards are 291px so max-width:100% masked it; on a 325px phone card it left ~13px of card background down each side of the photo. */ .cs-card-media .elementor-widget-theme-post-featured-image a, .cs-card-media .elementor-widget-image a, .cs-card-media > a{ display:block; width:100%; } .cs-card-media img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; } .cs-card-media .elementor-widget-theme-post-featured-image, .cs-card-media .elementor-widget-image{ margin:0 !important; line-height:0; } /* Badge — position the WIDGET WRAPPER, not just the span inside it. The wrapper is a block-level element; leaving it in the flow pushed the layout even though the span itself was absolute. */ .cs-card-media .elementor-widget-shortcode, .cs-card-media [data-widget_type^="shortcode"]{ position:absolute !important; top:12px; left:12px; z-index:3; margin:0 !important; padding:0 !important; width:auto !important; line-height:0; } .cs-badge{ position:static; display:inline-block; background:var(--cs-pink-2); color:#fff; font-size:11px; font-weight:700; letter-spacing:.5px; line-height:1.3; padding:5px 12px; border-radius:999px; white-space:nowrap; } .cs-badge--best{ background:var(--cs-pink-2); } /* Wishlist heart — TI WooCommerce Wishlist via [ti_wishlists_addtowishlist]. The plugin outputs a heart icon PLUS a text label, which made the widget 239px wide. Label hidden, icon kept bare. The mockup has a thin outline heart sitting straight on the photo — no circular plate behind it. TI's webfont already carries that glyph (e909 outline, e908 solid), so only the plate had to go. A drop-shadow replaces what the plate was doing for contrast: several supplier photos have white backgrounds, and a plain white heart on them is invisible. */ .cs-wish{ position:absolute !important; top:12px; right:12px; z-index:3; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; line-height:0; } .cs-wish .tinv-wraper, .cs-wish .elementor-shortcode, .cs-wish .tinv-wishlist{ margin:0 !important; padding:0 !important; line-height:0; } .cs-wish .tinv-wishlist-clear{ display:none !important; } /* The text next to the heart. TI ships TWO labels and swaps them by class: "Dodaj do ulubionych" and, once the product is on the list, "Usuń z ulubionych". Only the first was hidden here, so every card whose product was already in the wishlist printed "Usuń z ulubionych" across the photo. Both go — the card has only room for the icon. The single-product page is outside .cs-wish and keeps its label. */ .cs-wish a.tinvwl_add_to_wishlist_button .tinvwl_add_to_wishlist-text, .cs-wish a.tinvwl_add_to_wishlist_button .tinvwl_remove_from_wishlist-text, .cs-wish a.tinvwl_add_to_wishlist_button .tinvwl_already_on_wishlist-text, .cs-wish .tinvwl-tooltip{ display:none !important; } /* The button is pinned inside .cs-wish rather than being left in its flow. Elementor's widget wrapper is 100% of the card, so the moment the button stopped being a fixed 34px box it stretched with it and the heart drifted to the left edge. Positioning the button itself against .cs-wish keeps it in the corner whatever the wrapper does. */ .cs-wish .tinvwl_add_to_wishlist_button{ position:absolute !important; top:0; right:0; display:flex !important; align-items:center; justify-content:center; width:26px !important; height:26px !important; margin:0 !important; padding:0 !important; border:none !important; border-radius:0 !important; background:transparent !important; color:#fff !important; font-size:22px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.7)); transition:.2s; } .cs-wish .tinvwl_add_to_wishlist_button::before{ font-size:22px !important; } .cs-wish .tinvwl_add_to_wishlist_button:hover{ background:transparent !important; color:var(--cs-pink) !important; transform:scale(1.08); } /* already on the list — pink, and the solid glyph instead of the outline */ .cs-wish .tinvwl_add_to_wishlist_button.tinvwl-product-in-list, .cs-wish .tinvwl_add_to_wishlist_button.tinvwl-product-already-in, .cs-wish .tinvwl-product-already-in{ color:var(--cs-pink) !important; } .cs-wish .tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before, .cs-wish .tinvwl_add_to_wishlist_button.tinvwl-product-already-in::before{ content:"\e908" !important; } .cs-wish svg, .cs-wish i{ font-size:22px; } /* Equal-height cards with the button pinned to the bottom. Titles run one or two lines, which otherwise leaves every DO KOSZYKA at a different height. The card becomes a full-height flex column, the body grows to fill it, and the button gets margin-top:auto. */ .cs-products .swiper-slide, .cs-products .e-loop-item, .cs-products .elementor-loop-container > *{ height:auto !important; display:flex; align-items:stretch; } /* Every flex declaration here needs !important: Elementor ships .elementor.elementor .e-con > .e-con { flex: 0 1 auto } at (0,4,0), which outranks a plain class. Without it the body never grows, and then margin-top:auto on the button has no free space to consume and resolves to 0 — which looks like the margin rule failing, but isn't. */ .cs-card{ display:flex !important; flex-direction:column !important; width:100%; height:100% !important; } .cs-card-media{ flex:0 0 auto !important; } .cs-card-body{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0; } .cs-card-body > .elementor-widget-woocommerce-product-add-to-cart, .cs-card-body > [data-widget_type^="woocommerce-product-add-to-cart"]{ margin-top:auto !important; } /* body */ .cs-card-body{ padding:14px 16px 18px; } .cs-card-cats{ font-size:11px; color:var(--cs-pink); margin-bottom:6px; } .cs-card-cats a{ color:var(--cs-pink); } /* Title clamp. Targets the widget type as well as .cs-card-title, because Elementor stores widget CSS classes under `_css_classes` (containers use `css_classes`) — so templates imported with the wrong key have no class to hook. */ .cs-card-title, .cs-card-title a, .cs-card-body [data-widget_type^="woocommerce-product-title"] .elementor-heading-title, .cs-card-body [data-widget_type^="woocommerce-product-title"] .elementor-heading-title a{ font-size:15px; font-weight:600; line-height:1.35; color:var(--cs-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:41px; margin:0 0 8px; } .cs-card-title a:hover, .cs-card-body [data-widget_type^="woocommerce-product-title"] a:hover{ color:var(--cs-pink); } /* rating */ .cs-card .star-rating, .cs-card .elementor-widget-woocommerce-product-rating{ color:var(--cs-pink); font-size:13px; margin-bottom:8px; } .cs-card .woocommerce-review-link{ color:var(--cs-muted); font-size:12px; } /* price */ .cs-card .price{ font-size:17px; font-weight:700; color:var(--cs-text); display:flex; gap:10px; align-items:baseline; } .cs-card .price del{ color:var(--cs-muted); font-size:14px; font-weight:400; } .cs-card .price ins{ text-decoration:none; color:var(--cs-text); } /* add to cart button. The `.woocommerce .cs-card` duplicates are load-bearing: section 15 sets `.woocommerce .button{ padding:13px 26px !important }` and sits LATER in this file, so at equal specificity it beat every `.cs-card .button` rule here — the card button silently used the cart's padding, which on a 157px phone card wrapped DO KOSZYKA onto two lines. Three classes beats it. */ .cs-card .elementor-button, .cs-card .add_to_cart_button, .cs-card .button, .woocommerce .cs-card .elementor-button, .woocommerce .cs-card .add_to_cart_button, .woocommerce .cs-card .button{ display:block !important; width:100% !important; text-align:center; background:var(--cs-pink-2) !important; color:#fff !important; border:none !important; border-radius:6px !important; padding:12px 10px !important; margin-top:14px !important; font-size:13px !important; font-weight:700 !important; letter-spacing:1px; text-transform:uppercase; } .cs-card .elementor-button:hover, .cs-card .add_to_cart_button:hover, .cs-card .button:hover{ background:var(--cs-pink-dark) !important; } /* DO KOSZYKA — text only, centred, full width of the card body. No cart icon: the desktop mockup has none. WooCommerce nests the button as .e-loop-add-to-cart-form-container > form.cart > a.button and form.cart is a flex item that shrinks to its content. Widening only the does nothing, because 100% is 100% of that shrunk form — both ancestors have to be stretched too. */ .cs-card .e-loop-add-to-cart-form-container, .cs-card .elementor-add-to-cart{ width:100% !important; display:block !important; } .cs-card form.cart{ width:100% !important; flex:1 1 auto !important; margin:0 !important; } .cs-card .add_to_cart_button, .cs-card .button{ display:flex !important; width:100% !important; align-items:center; justify-content:center; text-align:center; gap:0; } /* WooCommerce appends a "Zobacz koszyk" link after an AJAX add. Dropped: the header cart icon already updates its count, and the link changed the card's height mid-grid, nudging every card in the row. */ .cs-card .added_to_cart, .woocommerce .cs-card .added_to_cart{ display:none !important; } /* AJAX spinner. Woo places it with `position:absolute; top:.618em; right:1em` and dims the button to opacity .25 — sized for a static button with 2.618em of right padding. Ours is a centred flex box whose padding we override, so the spinner sat high and to the right, on top of the label. Centred here by inset alone, NOT transform: Woo's spin keyframes animate `transform`, so a translate(-50%,-50%) is wiped the moment the animation starts. */ .cs-card .button.loading, .cs-card .add_to_cart_button.loading, .woocommerce .cs-card .button.loading{ color:transparent !important; opacity:1 !important; pointer-events:none; } .cs-card .button.loading::after, .cs-card .add_to_cart_button.loading::after, .woocommerce .cs-card .button.loading::after{ position:absolute !important; top:calc(50% - 8px) !important; left:calc(50% - 8px) !important; right:auto !important; margin:0 !important; width:16px; height:16px; font-size:16px; line-height:16px; color:#fff !important; } /* ---------- 11. CAROUSEL ARROWS ---------- */ .cs-products .elementor-swiper-button{ color:var(--cs-text); font-size:20px; } .cs-products .elementor-swiper-button:hover{ color:var(--cs-pink); } /* ---------- 12. NEWSLETTER BAR ---------- */ .cs-news{ border:1px solid var(--cs-pink); border-radius:var(--cs-radius); background:transparent; } .cs-news .cs-news-off{ font-size:38px; font-weight:700; color:var(--cs-pink); line-height:1; } /* Newsletter field: same dark treatment as the search input, but here the button IS joined to the field (mockup differs from the header on purpose). */ .cs-news .elementor-field-textual{ background:#181818 !important; color:#ffffff !important; border:1px solid #434345 !important; border-right:none !important; height:46px !important; border-radius:6px 0 0 6px !important; padding-left:18px !important; font-size:15px; } .cs-news .elementor-field-textual::placeholder{ color:rgba(255,255,255,.85); opacity:1; } .cs-news .elementor-field-textual:focus{ outline:none !important; border-color:var(--cs-pink) !important; } .cs-news .elementor-button[type="submit"]{ background:var(--cs-pink-2) !important; color:#fff !important; border:none !important; border-radius:0 6px 6px 0 !important; height:46px !important; padding:0 26px; font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:13px; } .cs-news .elementor-button[type="submit"]:hover{ background:var(--cs-pink-dark) !important; } /* ---------- 13. FOOTER ---------- */ .cs-trust{ background:var(--cs-surface-2); border-top:1px solid var(--cs-border); } .cs-trust .elementor-icon-box-wrapper{ display:flex; align-items:center; gap:14px; text-align:left; } .cs-trust .elementor-icon-box-icon{ margin:0 !important; } .cs-trust .elementor-icon-box-title{ margin:0; font-size:13px; font-weight:500; color:var(--cs-text); } /* brand pink, matching the USP strip. The SVGs are stroke="currentColor", so `color` is what paints them — setting `stroke` or `fill` here does nothing useful. */ .cs-trust svg, .cs-trust i{ color:var(--cs-pink); } .cs-footer{ background:#0d0d10; } .cs-footer .cs-foot-head{ font-size:13px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--cs-text); margin-bottom:18px; } .cs-footer .elementor-icon-list-item a, .cs-footer .elementor-icon-list-text{ color:var(--cs-muted); font-size:14px; } .cs-footer .elementor-icon-list-item a:hover{ color:var(--cs-pink); } .cs-footer .elementor-icon-list-icon svg, .cs-footer .elementor-icon-list-icon i{ color:var(--cs-pink); } /* Social icons. Targeted structurally, not via .cs-social — that class does not land on the widget (widget classes use _css_classes). Elementor paints each one its brand colour (Instagram #262626, Facebook #3B5998, TikTok #69727D, YouTube #CD201F), which is four unrelated colours against a pink-on-black palette. Outlined circles instead. */ .cs-social .elementor-social-icon, .cs-footer .elementor-social-icon, .cs-foot-acc .elementor-social-icon{ background-color:transparent !important; background:transparent !important; border:1px solid var(--cs-border) !important; width:36px !important; height:36px !important; transition:.2s; } /* Brand glyphs are SOLID shapes — the line-icon rule in section 2b sets fill:none on .cs-footer svg, which made them disappear entirely. */ .cs-social .elementor-social-icon svg, .cs-footer .elementor-social-icon svg, .cs-foot-acc .elementor-social-icon svg{ fill:currentColor !important; stroke:none !important; color:var(--cs-text) !important; width:16px; height:16px; } .cs-social .elementor-social-icon i, .cs-footer .elementor-social-icon i{ color:var(--cs-text) !important; font-size:16px; } .cs-social .elementor-social-icon:hover, .cs-footer .elementor-social-icon:hover, .cs-foot-acc .elementor-social-icon:hover{ border-color:var(--cs-pink) !important; background:rgba(236,46,143,.08) !important; } .cs-social .elementor-social-icon:hover svg, .cs-footer .elementor-social-icon:hover svg, .cs-social .elementor-social-icon:hover i, .cs-footer .elementor-social-icon:hover i{ color:var(--cs-pink) !important; } .cs-copy{ background:var(--cs-bg-deep); border-top:1px solid var(--cs-border); font-size:12px; color:var(--cs-muted); } /* Payment provider badges. Use each brand's OFFICIAL SVG, unmodified — Visa, Mastercard, PayPal and Apple Pay all require that. Put one Image widget per logo inside a row container with the class cs-pay. The subtle light plate exists because several of these marks (Visa's blue, Mastercard's dark text) are designed for light backgrounds and lose contrast on near-black. It keeps the artwork itself untouched. */ .cs-pay{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto; /* pinned to the right of the copyright row */ justify-content:flex-end; flex:0 0 auto; width:auto !important; } .cs-copy > .e-con-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; } .cs-pay .elementor-widget-image, .cs-pay > *{ margin:0 !important; } .cs-pay img{ height:24px !important; width:auto !important; display:block; background:transparent !important; padding:0 !important; border-radius:0; } /* PayU's SVG is #002124 — near-black, invisible on this footer. brightness(0) flattens it to solid black, invert(1) flips that to solid white, giving the same result as PayU's official reversed/white mark. blik is deliberately left alone: its badge is dark with white lettering, so it already reads on black — inverting it would produce a white slab. */ .cs-pay img[src*="PAYU"], .cs-pay img[src*="payu"]{ filter:brightness(0) invert(1); opacity:.9; } .cs-pay img[src*="PAYU"]:hover, .cs-pay img[src*="payu"]:hover{ opacity:1; } /* Fallback if you ever need light plates back (some marks require them) */ .cs-pay.cs-pay--plate img{ background:rgba(255,255,255,.92) !important; border-radius:4px; padding:5px 8px !important; box-sizing:content-box; filter:none; } @media (max-width:767px){ .cs-copy > .e-con-inner{ flex-direction:column; gap:14px; text-align:center; } .cs-pay{ justify-content:center; margin-left:0; gap:8px; } .cs-pay img{ height:20px !important; } } /* Footer has TWO parallel blocks — 5 link columns for desktop, an accordion for phones. Each is hidden at the other breakpoint (see section 14). This is the one place in the build where duplicating content is justified: five columns of links cannot collapse into an accordion by CSS alone. The phone block is Elementor's TOGGLE widget, not its Accordion. The Accordion widget stamps elementor-active on item 0 in PHP, so it always rendered with "Obsługa klienta" hanging open and no setting turns that off. Toggle uses the same .elementor-tab-* markup but names its wrapper .elementor-toggle-item, hence the extra .elementor-kit-8 below. The two widgets also hang their divider on different elements: Accordion draws it on the item, Toggle on the title and on the content, in a near-white #d5d8dc that reads as a hard line on this dark footer. Toggle's declaration is border-block-end, a logical property — it resolves to the same computed border-bottom, so plain border-bottom:none only wins here because it is !important. Both are written out anyway; a future Elementor build could flip which form it emits. */ .cs-foot-acc{ display:none; } .cs-foot-acc .elementor-toggle-item, .cs-foot-acc .elementor-accordion-item, .cs-foot-acc .e-n-accordion-item{ border:none !important; border-bottom:1px solid var(--cs-border) !important; background:transparent !important; } .cs-foot-acc summary, .cs-foot-acc .elementor-tab-title{ padding:16px 0 !important; background:transparent !important; font-size:13px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--cs-text) !important; border:none !important; border-block-end:none !important; } .cs-foot-acc .elementor-tab-content{ background:transparent !important; padding:0 0 14px !important; border:none !important; border-block-end:none !important; } /* link lists inside the accordion panels */ .cs-foot-acc .cs-acc-list{ list-style:none; margin:0; padding:0; } .cs-foot-acc .cs-acc-list li{ margin:0 0 12px; } .cs-foot-acc .cs-acc-list li, .cs-foot-acc .cs-acc-list a{ color:var(--cs-muted); font-size:14px; text-decoration:none; } .cs-foot-acc .cs-acc-list a:hover{ color:var(--cs-pink); } /* ============================================================ 15. WOOCOMMERCE PAGES — Koszyk / Kasa / Moje konto Classic (shortcode) templates, not the block cart. Selectors verified against the live /koszyk/ markup. NOTE: each of these pages must be set to "Elementor Full Width", not Canvas, or it renders with no header and no footer. ============================================================ */ .woocommerce-cart, .woocommerce-checkout, .woocommerce-account{ color:var(--cs-text); } /* ---- panels ---- */ .woocommerce .cart_totals, .woocommerce .woocommerce-cart-form, .woocommerce .checkout_coupon, .woocommerce-checkout #order_review, .woocommerce-account .woocommerce-MyAccount-content{ background:var(--cs-surface); border:1px solid var(--cs-border); border-radius:var(--cs-radius); padding:22px 24px; } /* ---- tables ---- */ .woocommerce table.shop_table{ background:transparent; border:none !important; border-collapse:collapse; width:100%; color:var(--cs-text); } .woocommerce table.shop_table th{ background:transparent; border:none; border-bottom:1px solid var(--cs-border); color:var(--cs-muted); font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:14px 12px; } .woocommerce table.shop_table td{ background:transparent; border:none; border-bottom:1px solid var(--cs-border); padding:18px 12px; vertical-align:middle; color:var(--cs-text); } .woocommerce table.shop_table tr:last-child td{ border-bottom:none; } .woocommerce table.shop_table .product-thumbnail img{ width:64px; height:64px; object-fit:cover; border-radius:8px; display:block; } .woocommerce table.shop_table td.product-name a{ color:var(--cs-text); font-weight:600; } .woocommerce table.shop_table td.product-name a:hover{ color:var(--cs-pink); } .woocommerce table.shop_table .product-price, .woocommerce table.shop_table .product-subtotal{ font-weight:600; } /* remove (x) */ .woocommerce a.remove{ color:var(--cs-muted) !important; background:transparent !important; font-size:20px; line-height:1; width:24px; height:24px; } .woocommerce a.remove:hover{ color:var(--cs-pink) !important; background:transparent !important; } /* ---- inputs ---- */ .woocommerce .input-text, .woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="tel"], .woocommerce input[type="password"], .woocommerce input[type="number"], .woocommerce textarea, .woocommerce select, .woocommerce .select2-selection{ background:#181818 !important; color:#fff !important; border:1px solid #434345 !important; border-radius:6px !important; min-height:44px; padding:0 14px !important; font-size:15px; box-shadow:none !important; } .woocommerce textarea{ padding:12px 14px !important; min-height:110px; } .woocommerce .input-text::placeholder{ color:rgba(255,255,255,.55); } .woocommerce .input-text:focus, .woocommerce select:focus, .woocommerce textarea:focus{ outline:none !important; border-color:var(--cs-pink) !important; } .woocommerce .quantity input.qty{ width:72px; text-align:center; padding:0 6px !important; } .woocommerce label{ color:var(--cs-muted); font-size:13px; } /* ---- buttons ---- */ .woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button, .woocommerce a.checkout-button, .woocommerce #place_order{ background:var(--cs-pink-2) !important; color:#fff !important; border:none !important; border-radius:6px !important; padding:13px 26px !important; font-size:13px !important; font-weight:700 !important; letter-spacing:1px; text-transform:uppercase; opacity:1 !important; transition:background .2s; } .woocommerce .button:hover, .woocommerce a.checkout-button:hover, .woocommerce #place_order:hover{ background:var(--cs-pink-dark) !important; } /* disabled "Zaktualizuj koszyk" until a qty changes — keep it readable */ .woocommerce .button:disabled, .woocommerce .button[disabled]{ background:#2e2e36 !important; color:var(--cs-muted) !important; cursor:not-allowed; } /* secondary buttons (coupon, shipping calculator) */ .woocommerce .coupon .button, .woocommerce .shipping-calculator-button{ background:transparent !important; color:var(--cs-text) !important; border:1px solid var(--cs-border) !important; } .woocommerce .coupon .button:hover, .woocommerce .shipping-calculator-button:hover{ border-color:var(--cs-pink) !important; color:var(--cs-pink) !important; } /* checkout CTA full width, like the mockup buttons */ .woocommerce .wc-proceed-to-checkout a.checkout-button{ display:block; width:100%; text-align:center; } /* ---- totals ---- */ .woocommerce .cart_totals h2, .woocommerce-checkout #order_review_heading{ font-size:20px; font-weight:600; letter-spacing:.5px; margin:0 0 18px; color:var(--cs-text); } .woocommerce .cart_totals table tr th{ width:40%; } .woocommerce .cart_totals .order-total td, .woocommerce .cart_totals .order-total th{ font-size:18px; font-weight:700; color:var(--cs-text); border-top:1px solid var(--cs-border); } .woocommerce .cart_totals .order-total .amount{ color:var(--cs-pink); } /* shipping methods list */ .woocommerce ul#shipping_method{ list-style:none; margin:0; padding:0; } .woocommerce ul#shipping_method li{ margin:0 0 8px; color:var(--cs-text); } .woocommerce .woocommerce-shipping-destination{ color:var(--cs-muted); font-size:13px; } /* ---- notices ---- */ /* Notices can carry a button (e.g. POTWIERDŹ ADRES EMAIL). WooCommerce floats it right, which collides with the message text. Lay the notice out as a flex row instead: text grows, button sits at the end. */ .woocommerce-message, .woocommerce-info, .woocommerce-error{ display:flex !important; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 20px; background:var(--cs-surface) !important; border:1px solid var(--cs-border) !important; border-top:3px solid var(--cs-pink) !important; border-radius:8px; color:var(--cs-text) !important; line-height:1.6; } .woocommerce-message > .button, .woocommerce-info > .button, .woocommerce-error > .button{ float:none !important; display:inline-flex !important; align-items:center; order:2; flex:0 0 auto; width:auto !important; margin:0 !important; white-space:nowrap; } .woocommerce-message::before, .woocommerce-info::before{ color:var(--cs-pink) !important; } .woocommerce-error{ border-top-color:#e5484d !important; } /* ---- coupon row ---- */ .woocommerce .coupon{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .woocommerce .coupon .input-text{ flex:1 1 220px; max-width:280px; } /* ---- empty cart ---- */ .woocommerce .cart-empty{ color:var(--cs-text); font-size:18px; } .woocommerce .return-to-shop{ margin-top:18px; } /* ---- two-column cart: items left, sticky summary right ---- Stacked full width, the checkout button sits below the fold and the totals read as an afterthought. The cart shortcode outputs form.woocommerce-cart-form + .cart-collaterals > .cart_totals as siblings, so a grid on the wrapper splits them with no template edits. */ /* The cart here is the ROYAL ADDONS widget (wpr-page-cart), not the plain shortcode. Its two-column layout is a NATIVE setting, so no grid override: Koszyk > select the cart widget > Cart Layout: Horizontal (product_summary_width is already 70%) All that is left for CSS is making the summary follow you down the page. */ @media (min-width:1025px){ /* The widget's product_summary_width % does not win: the summary column has a wide intrinsic minimum (InPost block + shipping sentence), so it refuses to shrink and steals the space. 30% gave 30%, but 72% still gave 42%. Pinning the summary to a fixed width and letting the items column take the remainder is the reliable fix. min-width:0 is what allows a flex item to shrink below its content width at all. */ .woocommerce-cart .wpr-cart-wrapper > .cart-collaterals, .woocommerce-cart .cart-collaterals{ flex:0 0 340px !important; width:340px !important; max-width:340px !important; min-width:0 !important; position:sticky; top:24px; align-self:start; } .woocommerce-cart .wpr-cart-wrapper > form.woocommerce-cart-form, .woocommerce-cart form.woocommerce-cart-form{ flex:1 1 auto !important; width:auto !important; max-width:none !important; min-width:0 !important; } /* Long shipping strings must wrap — but only the VALUE cells. Applying overflow-wrap:anywhere to th broke "PRZESYŁKA" into "PRZESYŁK / A". */ .woocommerce-cart .cart_totals td{ overflow-wrap:anywhere; } .woocommerce-cart .cart_totals th{ overflow-wrap:normal; word-break:keep-all; hyphens:none; white-space:nowrap; width:38%; padding-right:12px; } .woocommerce-cart .cart_totals img{ max-width:100%; height:auto; } /* give the product name the room it gains */ .woocommerce-cart td.product-name{ width:auto; min-width:220px; } /* Column widths. Without these the table auto-sizes to content, so a long product name pushes the price hard against ILOŚĆ and the numbers end up touching the quantity box. Fixed numeric columns + a gutter on the name keep the spacing constant whatever the title length. */ .woocommerce-cart table.shop_table th, .woocommerce-cart table.shop_table td{ padding:18px 14px; } .woocommerce-cart table.shop_table th.product-remove, .woocommerce-cart table.shop_table td.product-remove{ width:44px; padding-left:4px; padding-right:4px; text-align:center; } .woocommerce-cart table.shop_table th.product-thumbnail, .woocommerce-cart table.shop_table td.product-thumbnail{ width:100px; } .woocommerce-cart table.shop_table td.product-name{ padding-right:32px !important; line-height:1.45; } .woocommerce-cart table.shop_table th.product-price, .woocommerce-cart table.shop_table td.product-price, .woocommerce-cart table.shop_table th.product-subtotal, .woocommerce-cart table.shop_table td.product-subtotal{ width:130px; text-align:right; white-space:nowrap; } .woocommerce-cart table.shop_table th.product-quantity, .woocommerce-cart table.shop_table td.product-quantity{ width:130px; text-align:center; } .woocommerce-cart table.shop_table td.product-quantity .quantity{ display:inline-block; margin:0 auto; } .woocommerce-cart .quantity input.qty{ width:80px !important; height:44px; } } /* heading + intro line need breathing room; the descenders in "Koszyk" were running into the sentence below */ .woocommerce-cart h1, .woocommerce-cart h2.elementor-heading-title{ line-height:1.25 !important; margin:0 0 10px !important; } /* coupon: give the field room, it was 220px with an English placeholder */ .woocommerce .coupon .input-text{ flex:1 1 260px; max-width:340px; } /* slightly larger product thumbnails read better against the dark panel */ .woocommerce table.shop_table .product-thumbnail img{ width:76px; height:76px; } /* ---- cart below 1025: full width, stacked ---- Royal's product_summary_width has no tablet/mobile value, so the desktop 72% carried down and squeezed the items table to 238px inside a 330px wrapper. Force both blocks to full width here. */ @media (max-width:1024px){ .woocommerce-cart .wpr-cart-wrapper{ display:block !important; } .woocommerce-cart form.woocommerce-cart-form, .woocommerce-cart .cart-collaterals, .woocommerce-cart .cart-collaterals .cart_totals{ width:100% !important; max-width:none !important; flex:none !important; float:none !important; position:static !important; margin-left:0 !important; margin-right:0 !important; } .woocommerce-cart .cart-collaterals{ margin-top:20px !important; } } /* ============================================================ CART ITEM CARDS <=1024 Rebuilds each as a grid instead of a squeezed table row: ┌────────┬──────────────────┬──────────┐ │ │ product name │ × │ │ image │ │ price │ │ ├──────────────────┼──────────┤ │ │ − qty + │ subtotal │ └────────┴──────────────────┴──────────┘ Uses grid-template-areas over the existing td classes, so no template override is needed. The old approach — one td per line with a label — forced a 100px image to squeeze everything else into ~134px. ============================================================ */ @media (max-width:1024px){ body.woocommerce-cart table.shop_table tbody tr.cart_item{ display:grid !important; grid-template-columns:100px minmax(0,1fr) auto; grid-template-rows:auto auto; /* Name spans both text columns. Showing the unit price up here as well squeezed the title into ~120px and wrapped it to four lines — and it duplicates the line total below for any qty of 1. */ grid-template-areas: "thumb name name" "thumb qty subtotal"; gap:14px 16px; align-items:start; position:relative; border:1px solid var(--cs-border); border-radius:12px; padding:18px 16px; margin:0 0 14px; } /* unit price hidden — the subtotal on the second row carries the number */ body.woocommerce-cart table.shop_table tbody tr.cart_item td.product-price{ display:none !important; } body.woocommerce-cart table.shop_table tbody tr.cart_item td{ display:block !important; width:auto !important; border:none !important; padding:0 !important; text-align:left; } /* labels are redundant once the layout is visual */ body.woocommerce-cart table.shop_table tbody tr.cart_item td::before{ display:none !important; } body.woocommerce-cart table.shop_table tbody tr.cart_item td.product-thumbnail{ grid-area:thumb; position:static !important; width:100px !important; min-width:100px !important; max-width:100px !important; } body.woocommerce-cart table.shop_table tbody tr.cart_item td.product-thumbnail img{ width:100px !important; height:100px !important; object-fit:cover; border-radius:10px; border:1px solid var(--cs-border); } body.woocommerce-cart table.shop_table tbody tr.cart_item td.product-name{ grid-area:name; padding-right:34px !important; /* clear of the × */ text-align:left !important; } body.woocommerce-cart table.shop_table tbody tr.cart_item td.product-name a{ font-size:16px; font-weight:600; line-height:1.4; color:var(--cs-text); display:block; text-align:left; overflow-wrap:normal; } /* variation data (Rozmiar / Kolor) under the title */ body.woocommerce-cart table.shop_table tbody tr.cart_item td.product-name .variation{ margin:6px 0 0; font-size:13px; color:var(--cs-muted); } body.woocommerce-cart .variation dt{ color:var(--cs-pink); font-weight:600; } body.woocommerce-cart table.shop_table tbody tr.cart_item td.product-price{ grid-area:price; text-align:right; font-size:15px; font-weight:700; color:var(--cs-pink); white-space:nowrap; } body.woocommerce-cart table.shop_table tbody tr.cart_item td.product-quantity{ grid-area:qty; align-self:center; } body.woocommerce-cart table.shop_table tbody tr.cart_item td.product-subtotal{ grid-area:subtotal; align-self:center; text-align:right; font-size:15px; font-weight:700; color:var(--cs-pink); white-space:nowrap; } /* × sits in the corner, out of the flow so it cannot overlap the title */ body.woocommerce-cart table.shop_table tbody tr.cart_item td.product-remove{ position:absolute !important; top:10px; right:10px; width:auto !important; padding:0 !important; } body.woocommerce-cart td.product-remove a.remove{ font-size:22px; line-height:1; color:var(--cs-muted) !important; } /* quantity field */ body.woocommerce-cart .quantity input.qty{ width:88px !important; height:40px; text-align:center; border-radius:8px !important; } /* actions row (Zaktualizuj koszyk) is not an item — plain block */ body.woocommerce-cart table.shop_table tbody tr:not(.cart_item){ display:block !important; padding:0 !important; border:none !important; margin:0; } body.woocommerce-cart td.actions{ padding:0 !important; } body.woocommerce-cart td.actions .button{ width:100%; } /* ---- summary: stack label above value so nothing overflows ---- */ body.woocommerce-cart .cart_totals table tr{ display:block; padding:12px 0; border-bottom:1px solid var(--cs-border); } body.woocommerce-cart .cart_totals table th, body.woocommerce-cart .cart_totals table td{ display:block !important; width:100% !important; padding:0 !important; text-align:left !important; white-space:normal !important; overflow-wrap:anywhere; } body.woocommerce-cart .cart_totals table th{ margin-bottom:6px !important; color:var(--cs-muted); } body.woocommerce-cart .cart_totals .order-total td{ font-size:20px; color:var(--cs-pink); font-weight:700; } body.woocommerce-cart .cart_totals .shipping-calculator-button{ display:inline-block; margin-top:8px; } body.woocommerce-cart .cart_totals img{ max-width:100%; height:auto; } } /* ---- phone-only tweaks ---- */ @media (max-width:767px){ .woocommerce .cart_totals, .woocommerce .woocommerce-cart-form, .woocommerce-checkout #order_review{ padding:16px; } .woocommerce .coupon .input-text{ max-width:none; } /* table/tbody go block so rows can be cards. Do NOT force tr/td here — tr.cart_item is a grid (see the CART ITEM CARDS block above) and a later `display:block` would undo it. */ .woocommerce-cart table.shop_table, .woocommerce-cart table.shop_table tbody{ display:block; width:100% !important; } .woocommerce-cart table.shop_table thead{ display:none; } /* Royal nests three wrappers that each add padding: form 16 + .wpr-cart-section-table-wrap 10 + .wpr-shop-table 10 On a 390px screen that plus the section/column padding left the product name 134px wide. Collapse the inner three; the card border comes from the row itself, so they are not doing any visual work. */ .woocommerce-cart .woocommerce-cart-form{ padding:12px !important; } .woocommerce-cart .wpr-cart-section-table-wrap, .woocommerce-cart .wpr-cart-section-wrap, .woocommerce-cart table.wpr-shop-table{ padding:0 !important; margin:0 !important; border:none !important; } /* narrower screens: shrink the image column, keep the grid */ body.woocommerce-cart table.shop_table tbody tr.cart_item{ grid-template-columns:84px minmax(0,1fr) auto; padding:12px; } body.woocommerce-cart table.shop_table tbody tr.cart_item td.product-thumbnail, body.woocommerce-cart table.shop_table tbody tr.cart_item td.product-thumbnail img{ width:84px !important; min-width:84px !important; max-width:84px !important; } body.woocommerce-cart table.shop_table tbody tr.cart_item td.product-thumbnail img{ height:84px !important; } /* Everything else for the item rows is handled by the CART ITEM CARDS block above. Rules that used to live here (flex td, absolutely positioned thumbnail, ::before labels) fought the grid and were removed — they sat later in the file, so they were silently winning. */ .woocommerce-cart td.actions .button{ width:100%; } } /* ============================================================ 18. SINGLE PRODUCT (/sklep//) Rendered by the Royal theme, not Elementor — .site-main has no max-width and no padding, so everything ran edge to edge, and the theme's price colour is olive (rgb 149,142,9). A Theme Builder → Single Product template would be the proper rework; this makes the theme template presentable meanwhile. ============================================================ */ /* ---- page container ---- */ .single-product .site-main{ max-width:1200px; margin:0 auto; padding:0 24px 60px; } .single-product .woocommerce-breadcrumb{ color:var(--cs-muted); font-size:13px; padding:22px 0 18px; margin:0; } .single-product .woocommerce-breadcrumb a{ color:var(--cs-muted); } .single-product .woocommerce-breadcrumb a:hover{ color:var(--cs-pink); } /* ---- two columns ---- */ .single-product div.product{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start; } .single-product div.product > .woocommerce-product-gallery{ grid-column:1; width:auto !important; float:none !important; } .single-product div.product > .summary{ grid-column:2; width:auto !important; float:none !important; margin:0 !important; } .single-product div.product > .woocommerce-tabs, .single-product div.product > .related, .single-product div.product > .upsells, .single-product div.product > .woocommerce-notices-wrapper{ grid-column:1 / -1; } /* ---- gallery ---- */ .single-product .woocommerce-product-gallery{ position:relative; } .single-product .woocommerce-product-gallery__wrapper{ margin:0; } .single-product .woocommerce-product-gallery__image img{ border-radius:var(--cs-radius); border:1px solid var(--cs-border); display:block; width:100%; height:auto; } .single-product .woocommerce-product-gallery__trigger{ background:rgba(0,0,0,.55) !important; border-radius:50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center; color:#fff !important; top:12px; right:12px; } .single-product .flex-control-thumbs{ display:flex; gap:10px; margin-top:12px; padding:0; list-style:none; } .single-product .flex-control-thumbs li{ width:76px; } .single-product .flex-control-thumbs img{ border-radius:8px; border:1px solid var(--cs-border); cursor:pointer; opacity:.7; } .single-product .flex-control-thumbs img.flex-active, .single-product .flex-control-thumbs img:hover{ opacity:1; border-color:var(--cs-pink); } /* ---- summary ---- */ .single-product .product_title{ color:var(--cs-text) !important; font-size:30px !important; font-weight:600; line-height:1.25; margin:0 0 12px !important; } .single-product .woocommerce-product-rating{ margin:0 0 16px; } .single-product .woocommerce-product-rating .star-rating{ color:var(--cs-pink); } .single-product .woocommerce-review-link{ color:var(--cs-muted); font-size:13px; } .single-product .summary .price{ color:var(--cs-text) !important; font-size:28px !important; font-weight:700; margin:0 0 20px !important; display:flex; gap:12px; align-items:baseline; } .single-product .summary .price del{ color:var(--cs-muted) !important; font-size:20px; font-weight:400; } .single-product .summary .price ins{ text-decoration:none; color:var(--cs-text) !important; } /* short description — product copy often carries its own headings, which rendered at 32px and outshouted the price */ .single-product .woocommerce-product-details__short-description{ color:var(--cs-body); font-size:15px; line-height:1.7; margin-bottom:20px; } .single-product .woocommerce-product-details__short-description h1, .single-product .woocommerce-product-details__short-description h2, .single-product .woocommerce-product-details__short-description h3{ font-size:15px !important; font-weight:700; color:var(--cs-text); margin:0 0 10px !important; letter-spacing:.3px; } .single-product .woocommerce-product-details__short-description ul{ margin:0; padding-left:18px; } .single-product .woocommerce-product-details__short-description li{ margin-bottom:6px; } .single-product .woocommerce-product-details__short-description li::marker{ color:var(--cs-pink); } .single-product .woocommerce-product-details__short-description strong, .single-product .woocommerce-product-details__short-description b{ color:var(--cs-text); font-weight:600; } .single-product .woocommerce-product-details__short-description p:empty{ display:none; } /* WooCommerce paints this olive (#958e09) via .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock `:where()` contributes nothing to specificity, but the `div` element in that .elementor-kit-8 still outranked a plain `.single-product .stock.in-stock`, so the in-stock line rendered mustard rather than green. Matching the `div.product` shape wins it back. */ .single-product div.product .stock.in-stock, .single-product .stock.in-stock{ color:#4ac26b !important; font-size:13px !important; } .single-product div.product .stock.out-of-stock, .single-product .stock.out-of-stock{ color:#e5484d !important; font-size:13px !important; } /* ---- quantity + add to cart ---- */ .single-product form.cart{ display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; margin:20px 0 !important; } /* WooCommerce's clearfix pseudo-elements (content:" "; display:table) become FLEX ITEMS here — zero width, but each still consumes a 12px gap, which pushed the quantity box 12px right of the button's left edge and added a phantom column after it. */ .single-product form.cart::before, .single-product form.cart::after{ display:none !important; } .single-product form.cart .quantity input.qty{ width:88px !important; height:52px; text-align:center; background:#181818 !important; color:#fff !important; border:1px solid #434345 !important; border-radius:6px !important; } .single-product form.cart .single_add_to_cart_button{ flex:1 1 220px; height:52px; background:var(--cs-pink-2) !important; color:#fff !important; border:none !important; border-radius:6px !important; font-size:14px !important; font-weight:700 !important; letter-spacing:1px; text-transform:uppercase; } .single-product form.cart .single_add_to_cart_button:hover{ background:var(--cs-pink-dark) !important; } /* wishlist link under the button */ .single-product .tinv-wraper{ margin:0 0 18px; } .single-product .tinvwl_add_to_wishlist_button{ color:var(--cs-muted) !important; font-size:14px; } .single-product .tinvwl_add_to_wishlist_button:hover{ color:var(--cs-pink) !important; } .single-product .product_meta{ border-top:1px solid var(--cs-border); padding-top:16px; margin-top:8px; color:var(--cs-muted); font-size:13px; } .single-product .product_meta a{ color:var(--cs-pink); } /* ---- tabs ---- */ .single-product .woocommerce-tabs{ margin-top:56px; } .single-product .woocommerce-tabs ul.tabs{ display:flex; gap:4px; list-style:none; margin:0 0 0 !important; padding:0 !important; border-bottom:1px solid var(--cs-border); } .single-product .woocommerce-tabs ul.tabs::before, .single-product .woocommerce-tabs ul.tabs::after, .single-product .woocommerce-tabs ul.tabs li::before, .single-product .woocommerce-tabs ul.tabs li::after{ display:none !important; } .single-product .woocommerce-tabs ul.tabs li{ background:transparent !important; border:none !important; border-radius:0 !important; margin:0 !important; padding:0 !important; } .single-product .woocommerce-tabs ul.tabs li a{ display:block; padding:14px 20px !important; color:var(--cs-muted) !important; font-size:13px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; border-bottom:2px solid transparent; } .single-product .woocommerce-tabs ul.tabs li.active a, .single-product .woocommerce-tabs ul.tabs li a:hover{ color:var(--cs-text) !important; border-bottom-color:var(--cs-pink); } .single-product .woocommerce-Tabs-panel{ padding:28px 24px !important; background:var(--cs-surface); border:1px solid var(--cs-border); border-top:none; border-radius:0 0 var(--cs-radius) var(--cs-radius); color:var(--cs-body); font-size:15px; line-height:1.75; } .single-product .woocommerce-Tabs-panel > *:first-child{ margin-top:0 !important; } .single-product .woocommerce-Tabs-panel > *:last-child{ margin-bottom:0 !important; } /* ---- rich text inside a tab ---- Descriptions are pasted in from an outside editor, so what lands here varies per product: its own H1, empty paragraphs, inline text-align, stray wrapper attributes. Every product page has to read the same regardless, so the panel styles the tags rather than any class. The two-tone look the copy had came from here: headings were painted --cs-text (white) while the panel painted body copy --cs-muted, a grey meant for short labels. Body copy is now --cs-body, so the contrast between a heading and its paragraph is weight and size, not colour. */ /* WooCommerce prints "Opis" as an h2 at the top of the panel and most descriptions then open with their own title — two headings, same words, directly under a tab already labelled OPIS. */ .single-product #tab-description > h2:first-child{ display:none; } .single-product .woocommerce-Tabs-panel h1, .single-product .woocommerce-Tabs-panel h2{ color:var(--cs-text) !important; font-size:21px !important; font-weight:600; line-height:1.3; margin:30px 0 12px; } .single-product .woocommerce-Tabs-panel h3, .single-product .woocommerce-Tabs-panel h4, .single-product .woocommerce-Tabs-panel h5, .single-product .woocommerce-Tabs-panel h6{ color:var(--cs-text) !important; font-size:17px !important; font-weight:600; line-height:1.35; margin:24px 0 10px; } .single-product .woocommerce-Tabs-panel p{ margin:0 0 14px; } /* editors leave these behind by the dozen */ .single-product .woocommerce-Tabs-panel p:empty{ display:none; } .single-product .woocommerce-Tabs-panel strong, .single-product .woocommerce-Tabs-panel b{ color:var(--cs-text); font-weight:600; } /* Descriptions keep writing subheadings as "

Specyfikacja

" rather than a real heading tag. Snippet 12 rewrites those to

in PHP — NOT here: `p > strong:only-child` counts elements, not text nodes, so it also matches a strong inside an ordinary sentence and threw the bold words onto their own oversized line mid-paragraph. */ .single-product .woocommerce-Tabs-panel em, .single-product .woocommerce-Tabs-panel i{ color:var(--cs-muted); } .single-product .woocommerce-Tabs-panel a{ color:var(--cs-pink); text-decoration:underline; text-underline-offset:3px; } .single-product .woocommerce-Tabs-panel a:hover{ color:var(--cs-pink-2); } .single-product .woocommerce-Tabs-panel ul, .single-product .woocommerce-Tabs-panel ol{ padding-left:22px; margin:0 0 16px; } .single-product .woocommerce-Tabs-panel li{ margin-bottom:6px; } .single-product .woocommerce-Tabs-panel li::marker{ color:var(--cs-pink); } .single-product .woocommerce-Tabs-panel img{ max-width:100%; height:auto; display:block; border-radius:var(--cs-radius); margin:18px 0; } .single-product .woocommerce-Tabs-panel iframe, .single-product .woocommerce-Tabs-panel video{ max-width:100%; width:100%; aspect-ratio:16/9; height:auto; border:none; border-radius:var(--cs-radius); margin:18px 0; display:block; } .single-product .woocommerce-Tabs-panel hr{ border:none; border-top:1px solid var(--cs-border); margin:26px 0; } .single-product .woocommerce-Tabs-panel blockquote{ margin:20px 0; padding:2px 0 2px 16px; border-left:3px solid var(--cs-pink); color:var(--cs-text); font-style:italic; } /* a table pasted into a description gets the same treatment as the attributes table below — the theme paints both #f7f7f7 */ .single-product .woocommerce-Tabs-panel table{ width:100%; border-collapse:collapse; margin:0 0 16px; background:transparent !important; } .single-product .woocommerce-Tabs-panel table th, .single-product .woocommerce-Tabs-panel table td{ background:transparent !important; border:none !important; border-bottom:1px solid var(--cs-border) !important; padding:12px !important; text-align:left; } .single-product .woocommerce-Tabs-panel table th{ color:var(--cs-text); font-weight:600; } /* "Informacje dodatkowe" — WooCommerce/the theme paints these rows #f7f7f7, which with the site's white body text is white-on-near-white. */ .single-product .shop_attributes, .single-product .shop_attributes tbody, .single-product .shop_attributes tr, .single-product .shop_attributes th, .single-product .shop_attributes td, .single-product .shop_attributes tr:nth-child(even) th, .single-product .shop_attributes tr:nth-child(even) td{ background:transparent !important; background-color:transparent !important; } .single-product .shop_attributes{ width:100%; border-collapse:collapse; border:none !important; margin:0; } .single-product .shop_attributes th{ color:var(--cs-text) !important; font-weight:600; text-align:left; width:34%; } .single-product .shop_attributes td{ color:var(--cs-muted) !important; font-style:normal; } .single-product .shop_attributes td p{ margin:0; } .single-product .shop_attributes th, .single-product .shop_attributes td{ border:none !important; border-bottom:1px solid var(--cs-border) !important; padding:14px 12px !important; } .single-product .shop_attributes tr:last-child th, .single-product .shop_attributes tr:last-child td{ border-bottom:none !important; } /* ---- reviews ---- */ /* the reviews panel gets the same inner padding as the others */ .single-product #reviews{ margin:0; } .single-product #reviews .commentlist{ list-style:none; padding:0; margin:0 0 28px; } .single-product #reviews .comment_container{ display:flex; gap:16px; background:var(--cs-surface); border:1px solid var(--cs-border); border-radius:var(--cs-radius); padding:18px; margin-bottom:14px; } /* WooCommerce ships the old float layout for reviews: `.woocommerce #reviews #comments ol.commentlist li img.avatar` pins the avatar position:absolute top:0 left:0, so it lands on the card's outer corner instead of inside our flex row, and `.comment-text` carries a margin-left:50px + border meant for that float. Two IDs in the .elementor-kit-8, so it outranks anything with a single #reviews — match its shape. */ .single-product #reviews #comments ol.commentlist li{ margin:0 0 14px !important; } .single-product #reviews #comments ol.commentlist li img.avatar{ position:static !important; float:none !important; width:48px !important; height:48px !important; padding:0 !important; margin:0 !important; flex:0 0 48px !important; align-self:flex-start; background:var(--cs-surface-2) !important; border:1px solid var(--cs-border) !important; border-radius:50% !important; object-fit:cover !important; box-shadow:none !important; } .single-product #reviews #comments ol.commentlist li .comment-text{ margin:0 !important; padding:0 !important; border:none !important; border-radius:0 !important; flex:1 1 auto; min-width:0; } .single-product #reviews .comment-text p.meta{ color:var(--cs-text) !important; font-size:14px !important; margin:0 0 6px !important; } .single-product #reviews .meta{ color:var(--cs-text); font-size:14px; margin:0 0 6px; } .single-product #reviews .description{ color:var(--cs-muted); } .single-product #reviews .comment-text .description p{ margin:0 !important; } .single-product #reviews .star-rating{ color:var(--cs-pink); } .single-product #reviews .comment-text .star-rating{ float:none !important; margin:0 0 8px !important; } .single-product #review_form_wrapper{ background:var(--cs-surface); border:1px solid var(--cs-border); border-radius:var(--cs-radius); padding:22px; } .single-product #review_form .comment-reply-title{ color:var(--cs-text); font-weight:600; } .single-product #review_form label{ color:var(--cs-muted); font-size:13px; } .single-product #review_form textarea, .single-product #review_form input[type=text], .single-product #review_form input[type=email]{ background:#181818 !important; color:#fff !important; border:1px solid #434345 !important; border-radius:6px !important; padding:12px 14px !important; width:100%; } .single-product #review_form .stars a{ color:var(--cs-pink); } .single-product #review_form input[type=submit]{ background:var(--cs-pink-2) !important; color:#fff !important; border:none !important; border-radius:6px !important; padding:13px 26px !important; font-size:13px !important; font-weight:700 !important; letter-spacing:1px; text-transform:uppercase; } /* ---- related products ---- */ .single-product .related.products, .single-product .upsells.products{ margin-top:56px; } .single-product .related.products > h2, .single-product .upsells.products > h2{ color:var(--cs-text); font-size:24px; font-weight:600; letter-spacing:1px; text-transform:uppercase; border-bottom:1px solid var(--cs-border); padding-bottom:12px; margin:0 0 22px; } /* The cards themselves are section 18b — the same rules serve the shop archive and the cart's cross-sells, so they are not scoped to .single-product here. */ /* ---- responsive ---- */ @media (max-width:1024px){ .single-product div.product{ gap:32px; } .single-product .product_title{ font-size:26px !important; } } @media (max-width:767px){ .single-product .site-main{ padding:0 16px 40px; } /* minmax(0,1fr), NOT 1fr: `1fr` means minmax(auto,1fr), and that `auto` floor refuses to shrink below the gallery image's min-content width. The single column resolved to 386.75px inside a 343px container, so the photo hung 29px off the right edge of the phone and the whole page scrolled sideways. The desktop rule above already had the zero floor; this override lost it. */ .single-product div.product{ grid-template-columns:minmax(0,1fr); gap:24px; } .single-product div.product > .woocommerce-product-gallery, .single-product div.product > .summary{ grid-column:1; min-width:0; } .single-product .product_title{ font-size:22px !important; } .single-product .summary .price{ font-size:24px !important; } .single-product .woocommerce-tabs ul.tabs{ overflow-x:auto; scrollbar-width:none; } .single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar{ display:none; } .single-product .woocommerce-tabs ul.tabs li a{ white-space:nowrap; padding:12px 14px !important; } .single-product form.cart .single_add_to_cart_button{ flex:1 1 100%; } } /* ============================================================ 18b. WOOCOMMERCE PRODUCT LOOP CARD "Podobne produkty" under a product, the cart's cross-sells and the /sklep/ archive are rendered by WooCommerce itself, as `ul.products li.product` — they never touch Loop Item #1919, so they arrived with no badge, no heart, no category line and a different title element. Snippet 11 in snippets.php reshapes that markup to carry the same parts as the Elementor card. This section then gives it section 10's metrics: 1/1 cover image, 11px pink category line, clamped 15px/600 title, 17px/700 price, DO KOSZYKA pinned to the bottom. The two belong together — change them together. Deliberately NOT scoped to .single-product, so the shop archive inherits it the day it is built. ============================================================ */ .woocommerce ul.products{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; list-style:none; margin:0 !important; padding:0 !important; } .woocommerce ul.products::before, .woocommerce ul.products::after{ display:none !important; } /* position:relative is what the badge and the heart are placed against */ .woocommerce ul.products li.product{ position:relative; display:flex !important; flex-direction:column; width:auto !important; margin:0 !important; padding:0 !important; float:none !important; background:var(--cs-surface); border:1px solid var(--cs-border); border-radius:var(--cs-radius); overflow:hidden; transition:.25s; } .woocommerce ul.products li.product:hover{ border-color:var(--cs-pink); box-shadow:0 8px 28px rgba(0,0,0,.55); } /* ---- media ---- */ /* line-height:0 kills the inline gap under the thumbnail — but ONLY on the image-only link. Woo's own wrapper (the one snippet 11 removes) holds the title and the price too, and zero line-height collapsed the price to height:0, which then drew on top of the title and the button. */ .woocommerce ul.products li.product a.cs-loop-imglink{ display:block; line-height:0; } .woocommerce ul.products li.product a.woocommerce-LoopProduct-link{ display:block; line-height:1.5; } .woocommerce ul.products li.product img{ width:100% !important; aspect-ratio:1/1; object-fit:cover; display:block; margin:0 !important; border-radius:0 !important; } .woocommerce ul.products li.product .cs-badge{ position:absolute; top:12px; left:12px; z-index:3; } /* WooCommerce's own sale flash: an olive 74x47 circle reading "Promocja!", in the theme's colours, sitting next to our own -10% [cs_badge] on the same card. Hidden everywhere — [cs_badge] already says a product is discounted, and says it in the mockup's language. Snippet 11 also unhooks it, so this only matters where that snippet has not run. */ .woocommerce span.onsale{ display:none !important; } /* .cs-wish already carries the outline heart from section 10 */ .woocommerce ul.products li.product .cs-wish{ position:absolute !important; top:12px; right:12px; z-index:3; } /* ---- body ---- */ .woocommerce ul.products li.product .cs-card-cats{ display:block; padding:14px 16px 0; margin:0 0 6px; font-size:11px; color:var(--cs-pink); } .woocommerce ul.products li.product .cs-card-cats a{ color:var(--cs-pink); } .woocommerce ul.products li.product .woocommerce-loop-product__title{ color:var(--cs-text) !important; font-size:15px !important; font-weight:600; line-height:1.35; padding:0 16px !important; margin:0 0 8px !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:41px; /* "Masturbator/masażer" has no break opportunity, so on a 165px phone column it ran straight out of the card instead of wrapping */ overflow-wrap:anywhere; } /* before snippet 11 is active the title is still inside the big link and has no category line above it — keep it off the image */ .woocommerce ul.products li.product .woocommerce-LoopProduct-link .woocommerce-loop-product__title{ padding-top:14px !important; } .woocommerce ul.products li.product .woocommerce-loop-product__title a{ color:inherit; } .woocommerce ul.products li.product .woocommerce-loop-product__title a:hover{ color:var(--cs-pink); } .woocommerce ul.products li.product .star-rating{ margin:0 16px 8px; color:var(--cs-pink); font-size:13px; } /* explicit line-height: the price sits inside Woo's wrapper link until snippet 11 is active, so it must not inherit whatever that link carries */ .woocommerce ul.products li.product .price{ color:var(--cs-text) !important; font-size:17px !important; font-weight:700; line-height:1.5; display:flex; gap:10px; align-items:baseline; /* 14px of padding, not margin: margin-top:auto on the button collapses to 0 on the tallest card in a row, and that left the button touching the price */ padding:0 16px 14px; margin:0 !important; } .woocommerce ul.products li.product .price del{ color:var(--cs-muted) !important; font-size:14px; font-weight:400; } .woocommerce ul.products li.product .price ins{ text-decoration:none; color:var(--cs-text); } /* margin-top:auto pins DO KOSZYKA to the bottom, so cards with a one-line and a two-line title still line their buttons up */ .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .add_to_cart_button{ display:flex !important; align-items:center; justify-content:center; text-align:center; margin:auto 16px 18px !important; background:var(--cs-pink-2) !important; color:#fff !important; border:none !important; border-radius:6px !important; padding:12px 10px !important; font-size:13px !important; font-weight:700 !important; letter-spacing:1px; text-transform:uppercase; } .woocommerce ul.products li.product .button:hover, .woocommerce ul.products li.product .add_to_cart_button:hover{ background:var(--cs-pink-dark) !important; } /* same two as the Elementor card: no "Zobacz koszyk" link, and the AJAX spinner centred by inset rather than by transform */ .woocommerce ul.products li.product .added_to_cart{ display:none !important; } .woocommerce ul.products li.product .button.loading, .woocommerce ul.products li.product .add_to_cart_button.loading{ color:transparent !important; opacity:1 !important; pointer-events:none; } .woocommerce ul.products li.product .button.loading::after, .woocommerce ul.products li.product .add_to_cart_button.loading::after{ position:absolute !important; top:calc(50% - 8px) !important; left:calc(50% - 8px) !important; right:auto !important; margin:0 !important; width:16px; height:16px; font-size:16px; line-height:16px; color:#fff !important; } @media (max-width:1024px){ .woocommerce ul.products{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:767px){ .woocommerce ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .woocommerce ul.products li.product .cs-card-cats{ padding:12px 12px 0; } .woocommerce ul.products li.product .woocommerce-loop-product__title{ padding:0 12px !important; } .woocommerce ul.products li.product .price{ padding:0 12px; } .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .add_to_cart_button{ margin:auto 12px 14px !important; } } /* ============================================================ 19. SHOP / CATEGORY ARCHIVE /sklep/ and every /kategoria-produktu/…/ page. Rendered by the Royal theme, exactly like the single product in section 18, so `.site-main` again has no max-width and no padding: the title sat at x=0 and the grid ran the full 1277px of the window while every other page stops at 1200. The cards themselves come from section 18b — this section is only the page furniture around them. ============================================================ */ body.woocommerce.archive .site-main, body.post-type-archive-product .site-main, body.tax-product_cat .site-main{ max-width:1200px; margin:0 auto; padding:0 24px 60px; } /* ---- breadcrumb + heading ---- */ body.woocommerce.archive .woocommerce-breadcrumb, body.post-type-archive-product .woocommerce-breadcrumb{ color:var(--cs-muted); font-size:13px; margin:0 0 14px; } body.woocommerce.archive .woocommerce-breadcrumb a, body.post-type-archive-product .woocommerce-breadcrumb a{ color:var(--cs-muted); } body.woocommerce.archive .woocommerce-breadcrumb a:hover, body.post-type-archive-product .woocommerce-breadcrumb a:hover{ color:var(--cs-pink); } .woocommerce-products-header{ margin:0 0 6px; } .woocommerce-products-header .page-title, body.woocommerce.archive h1.page-title{ color:var(--cs-text); font-size:30px; font-weight:600; line-height:1.25; letter-spacing:.5px; margin:0 0 6px; } .woocommerce-products-header .term-description{ color:var(--cs-body); font-size:15px; line-height:1.7; margin:0 0 8px; } /* ---- count left, sort right, grid clears both ---- Woo floats these two by default and the theme resets the floats, so they stacked as two full-width blocks. */ .woocommerce .woocommerce-result-count{ float:left; clear:none; margin:0 0 18px; color:var(--cs-muted); font-size:13px; } .woocommerce .woocommerce-ordering{ float:right; margin:0 0 18px; } .woocommerce .woocommerce-ordering select, .woocommerce .woocommerce-ordering select.orderby{ background:var(--cs-surface) !important; color:var(--cs-text) !important; border:1px solid var(--cs-border) !important; border-radius:6px !important; padding:11px 14px !important; font-size:13px; line-height:1.2; } body.woocommerce.archive ul.products, body.post-type-archive-product ul.products{ clear:both; } /* ---- pagination ---- */ .woocommerce nav.woocommerce-pagination{ margin:34px 0 0; text-align:center; } .woocommerce nav.woocommerce-pagination ul{ display:inline-flex; flex-wrap:wrap; gap:8px; border:none !important; margin:0; padding:0; } .woocommerce nav.woocommerce-pagination ul li{ border:none !important; margin:0; overflow:visible; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{ display:block; min-width:40px; padding:10px 12px; background:var(--cs-surface); color:var(--cs-text) !important; border:1px solid var(--cs-border); border-radius:8px; font-size:14px; line-height:1; transition:.2s; } .woocommerce nav.woocommerce-pagination ul li a:hover{ border-color:var(--cs-pink); color:var(--cs-pink) !important; background:var(--cs-surface); } .woocommerce nav.woocommerce-pagination ul li span.current{ background:var(--cs-pink-2); border-color:transparent; color:#fff !important; } /* Woo's "no products" notice on an empty category */ body.woocommerce.archive .woocommerce-info, body.post-type-archive-product .woocommerce-info{ background:var(--cs-surface); border:1px solid var(--cs-border); border-left:3px solid var(--cs-pink); border-radius:var(--cs-radius); color:var(--cs-body); padding:16px 18px; } @media (max-width:767px){ body.woocommerce.archive .site-main, body.post-type-archive-product .site-main, body.tax-product_cat .site-main{ padding:0 16px 40px; } .woocommerce-products-header .page-title, body.woocommerce.archive h1.page-title{ font-size:24px; } /* side by side they need more width than a phone has */ .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering{ float:none; margin:0 0 12px; } .woocommerce .woocommerce-ordering select, .woocommerce .woocommerce-ordering select.orderby{ width:100%; } } /* ============================================================ 17. SEARCH RESULTS (/?s=…) Rendered by the Theme Builder "Search Results" template using Loop Item #1919 — the same card as the homepage carousel. Layout: heading + result count left, sort dropdown right, then a 4-column grid with numbered pagination. ============================================================ */ /* ---- heading row ---- */ .cs-search-head{ align-items:flex-end; } .cs-search-head .elementor-heading-title{ color:var(--cs-text); font-size:30px; font-weight:600; line-height:1.25; margin:0; } /* the query itself in pink, if you wrap it in via the shortcode */ .cs-search-head .elementor-heading-title span, .cs-search-head .cs-query{ color:var(--cs-pink); } .cs-result-count{ color:var(--cs-muted); font-size:14px; margin:0; } /* ---- sort dropdown ---- */ .cs-ordering{ margin:0; } .cs-ordering select, .cs-sort select{ background:#181818; color:#fff; border:1px solid #434345; border-radius:6px; height:44px; padding:0 38px 0 16px; font-size:14px; font-family:inherit; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; } .cs-ordering select:focus{ outline:none; border-color:var(--cs-pink); } .cs-ordering select option{ background:#181818; color:#fff; } /* ---- pagination ---- */ .cs-search-results .elementor-pagination, .elementor-loop-container ~ .elementor-pagination, .e-loop-nothing-found-message ~ .elementor-pagination{ display:flex; justify-content:center; gap:8px; margin-top:32px; } .elementor-pagination .page-numbers{ display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border:1px solid var(--cs-border); border-radius:8px; color:var(--cs-text) !important; font-size:14px; text-decoration:none; transition:.2s; } .elementor-pagination .page-numbers:hover{ border-color:var(--cs-pink); color:var(--cs-pink) !important; } .elementor-pagination .page-numbers.current{ background:var(--cs-pink); border-color:var(--cs-pink); color:#fff !important; } .elementor-pagination .page-numbers.dots{ border:none; } /* ---- wishlist page (/ulubione/) ---- The page is Elementor Full Width and the plugin's shortcode brings no container of its own, so the table ran the full 1509px of the viewport while every other page stops at 1200. */ .tinv-wishlist{ max-width:1200px; margin:0 auto; padding:0 20px; } /* the plugin prints its own "Ulubione" h2 directly under the page title */ .tinv-wishlist .tinv-header{ display:none; } /* the page renders through the Royal fallback template, whose .post-header carries no container either — the H1 sat hard against the viewport edge while the table below was centred at 1200 */ .page-id-2104 .post-header{ max-width:1200px; margin:0 auto; padding:0 20px 8px; } .tinv-wishlist table.tinvwl-table-manage-list{ background:transparent; color:var(--cs-text); width:100%; border-collapse:collapse; border:1px solid var(--cs-border); border-radius:var(--cs-radius); overflow:hidden; } .tinv-wishlist table th{ background:transparent; border:none; border-bottom:1px solid var(--cs-border); color:var(--cs-muted); font-size:12px; letter-spacing:1px; text-transform:uppercase; font-weight:600; padding:14px 12px; text-align:left; } .tinv-wishlist table td{ background:transparent; border:none; border-bottom:1px solid var(--cs-border); padding:16px 12px; vertical-align:middle; } .tinv-wishlist tbody tr:last-child td{ border-bottom:none; } .tinv-wishlist tbody tr{ transition:background .2s; } .tinv-wishlist tbody tr:hover td{ background:rgba(255,255,255,.03); } .tinv-wishlist .product-thumbnail{ width:88px; } .tinv-wishlist .product-thumbnail img{ width:72px; height:72px; object-fit:cover; border-radius:8px; border:1px solid var(--cs-border); display:block; } .tinv-wishlist .product-name a{ color:var(--cs-text); font-size:15px; font-weight:600; line-height:1.35; } .tinv-wishlist .product-name a:hover{ color:var(--cs-pink); } /* tbody only — .product-price, .product-date and .product-stock are also the header cells' classes, so unscoped these rules repainted "CENA JEDNOSTKOWA" as a 16px white price instead of a 12px muted column label */ .tinv-wishlist tbody .product-price{ color:var(--cs-text); font-size:16px; font-weight:700; white-space:nowrap; } .tinv-wishlist tbody .product-price del{ color:var(--cs-muted); font-size:13px; font-weight:400; } .tinv-wishlist tbody .product-price ins{ text-decoration:none; color:var(--cs-text); } /* "Data dodania" hidden — the class is on the th and the td alike, so one rule drops the whole column. It can also be switched off at source in Ulubione > Ustawienia (the add-date option), which stops it being queried at all; this covers it either way. */ .tinv-wishlist .product-date{ display:none !important; } .tinv-wishlist tbody .product-date{ color:var(--cs-muted); font-size:13px; white-space:nowrap; } .tinv-wishlist tbody .product-stock{ color:var(--cs-muted); font-size:13px; } .tinv-wishlist tbody .product-stock .stock.in-stock, .tinv-wishlist tbody .product-stock .in-stock{ color:#4ac26b; } .tinv-wishlist tbody .product-stock .stock.out-of-stock, .tinv-wishlist tbody .product-stock .out-of-stock{ color:#e5484d; } /* the checkbox column and the round remove button */ .tinv-wishlist .product-cb{ width:38px; } .tinv-wishlist .product-cb input[type=checkbox]{ width:16px; height:16px; accent-color:var(--cs-pink); cursor:pointer; } .tinv-wishlist .product-remove{ width:44px; } .tinv-wishlist .product-remove button{ background:transparent !important; color:var(--cs-muted) !important; border:1px solid var(--cs-border) !important; width:27px; height:27px; border-radius:50%; padding:0 !important; font-size:11px; transition:.2s; } .tinv-wishlist .product-remove button:hover{ color:#fff !important; background:#e5484d !important; border-color:#e5484d !important; } /* add-to-cart per row */ .tinv-wishlist .product-action .button, .tinv-wishlist .tinvwl-btn, .tinv-wishlist button.button{ background:var(--cs-pink-2) !important; color:#fff !important; border:none !important; border-radius:6px !important; padding:11px 20px !important; font-size:13px !important; font-weight:700 !important; letter-spacing:1px; text-transform:uppercase; transition:.2s; } .tinv-wishlist .tinvwl-btn:hover, .tinv-wishlist button.button:hover{ background:var(--cs-pink-dark) !important; } /* footer bar: bulk actions left, add-to-cart buttons right */ .tinv-wishlist tfoot td{ padding:18px 12px 0; border-bottom:none; } .tinv-wishlist tfoot .tinvwl-to-left{ float:left; } .tinv-wishlist tfoot .tinvwl-to-right{ float:right; display:flex; gap:10px; flex-wrap:wrap; } .tinv-wishlist tfoot::after{ content:""; display:table; clear:both; } .tinv-wishlist select, .tinv-wishlist .form-control{ background:var(--cs-surface) !important; color:var(--cs-text) !important; border:1px solid var(--cs-border) !important; border-radius:6px !important; padding:11px 14px !important; font-size:13px; } /* "Zastosuj" is a secondary action next to the dropdown */ .tinv-wishlist tfoot .tinvwl-to-left button.button{ background:transparent !important; color:var(--cs-muted) !important; border:1px solid var(--cs-border) !important; } .tinv-wishlist tfoot .tinvwl-to-left button.button:hover{ color:var(--cs-text) !important; border-color:var(--cs-pink) !important; background:transparent !important; } /* TI's sharing row — an untranslated "Share on" label plus six network icons under the table. Nobody shares a wishlist on an adult store, and the label is English on a Polish page. (It can also be switched off in Ulubione > Ustawienia > Udostępnianie, which stops it being rendered at all; this hides it either way.) */ .tinv-wishlist .social-buttons{ display:none !important; } .tinv-wishlist .tinv-wishlist-empty{ color:var(--cs-muted); } /* ---- phone: the table becomes cards ---- TI ships its own phone layout: .tinv-wishlist table.tinvwl-table-manage-list tbody td{ display:block; text-align:center; width:100% !important } That `width:100% !important` is why a plain `width:72px` on the thumbnail cell did nothing and the image ended up centred on top of the name. The row is made a GRID instead — the cells become grid items placed by area, so their own width declaration applies inside the track and stops fighting us. Same pattern as the cart at this breakpoint. 768, not the usual 767: TI switches its own stacked layout on at max-width:768, so a 767 query left exactly one viewport width (768px, the iPad portrait width) where the plugin had stacked every cell to full width and our card grid had not started yet. */ @media (max-width:768px){ .tinv-wishlist{ padding:0 16px; } .tinv-wishlist table.tinvwl-table-manage-list, .tinv-wishlist table.tinvwl-table-manage-list tbody{ display:block; width:auto; } .tinv-wishlist table.tinvwl-table-manage-list{ border:none; } .tinv-wishlist table.tinvwl-table-manage-list thead{ display:none; } .tinv-wishlist tbody tr{ display:grid !important; grid-template-columns:84px minmax(0,1fr); /* stock sits in the RIGHT column, not full width: the thumbnail is 84px tall and the name/price/date stack is often shorter than that, so a full-width stock row was drawn straight over the bottom of the image */ grid-template-areas: "thumb name" "thumb price" "thumb stock" "action action"; align-content:start; gap:2px 14px; position:relative; background:var(--cs-surface); border:1px solid var(--cs-border); border-radius:var(--cs-radius); padding:14px; margin-bottom:12px; } /* every cell rule below repeats `table.tinvwl-table-manage-list`: the plugin's own .elementor-kit-8 carries that class, so a shorter .elementor-kit-8 loses the width:100% !important battle even with !important of its own — the remove cell then stretched across the whole row and the thumbnail cell overflowed its 84px track. */ .tinv-wishlist table.tinvwl-table-manage-list tbody td{ width:auto !important; text-align:left !important; padding:0 !important; border:none !important; } /* the plugin also puts min-width:100px on this cell, which beats any width and spilled 16px of it over the name column */ .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-thumbnail{ grid-area:thumb; width:84px !important; min-width:84px !important; max-width:84px !important; padding:0 !important; } .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-thumbnail img{ width:84px !important; height:84px !important; max-width:none !important; margin:0 !important; } /* room for the remove button in the top-right corner */ .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-name{ grid-area:name; padding-right:32px !important; } .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-price{ grid-area:price; } /* .product-date is display:none above, so it has no grid area here */ .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-stock{ grid-area:stock; margin-top:6px; } .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-stock p{ margin:0; display:flex; gap:6px; align-items:flex-start; } .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-action{ grid-area:action; margin-top:10px; } .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-cb{ display:none !important; } .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-remove{ position:absolute !important; top:10px; right:10px; width:auto !important; padding:0 !important; } .tinv-wishlist .product-action .button{ width:100%; margin:0 !important; } /* tfoot stayed a table-footer-group while the table above it went block, so its cells sized to their content and the action bar came out ~50px narrower than the cards */ .tinv-wishlist table.tinvwl-table-manage-list tfoot, .tinv-wishlist table.tinvwl-table-manage-list tfoot tr, .tinv-wishlist table.tinvwl-table-manage-list tfoot td{ display:block; width:auto !important; padding:0 !important; } .tinv-wishlist tfoot .tinvwl-to-left, .tinv-wishlist tfoot .tinvwl-to-right{ float:none; display:block; } /* dropdown and its Zastosuj button stack: side by side they need 325 + 106 + gap on a 343px card, and the button was pushed clean off the right edge of the screen */ .tinv-wishlist tfoot .tinvwl-input-group{ display:flex; flex-direction:column; gap:8px; width:100%; } .tinv-wishlist tfoot .tinvwl-input-group select, .tinv-wishlist tfoot .tinvwl-input-group .form-control{ width:100% !important; } .tinv-wishlist tfoot .tinvwl-input-group .tinvwl-input-group-btn{ display:block; width:100%; padding:0 !important; margin:0 !important; } .tinv-wishlist tfoot .tinvwl-to-left button.button{ width:100%; white-space:nowrap; } .tinv-wishlist tfoot .tinvwl-to-right{ display:flex; flex-direction:column; gap:10px; margin-top:10px; } .tinv-wishlist tfoot .tinvwl-to-right button.button{ width:100%; margin:0 !important; } } /* ---- "added to wishlist" dialog ---- TI pops this up after every heart click, on any page that has a card, so it is styled here rather than under a page section. It shipped as a 360x327 white box with white text — the plugin paints .tinv-modal-inner #fff and the site's global white body text sits on it, the same white-on-white trap as the attributes table. Restyled as a compact dark card: surface background, pink primary button, muted ghost button for Zamknij, and the plugin's oversized decorative icon dropped. */ .tinv-modal .tinv-overlay{ background:rgba(0,0,0,.72) !important; opacity:1 !important; } .tinv-modal .tinv-modal-inner{ background:var(--cs-surface) !important; color:var(--cs-body) !important; border:1px solid var(--cs-border); border-radius:var(--cs-radius); box-shadow:0 20px 60px rgba(0,0,0,.6); padding:26px 24px !important; max-width:380px; } /* the plugin's big decorative glyph is most of that 327px height */ .tinv-modal .tinv-modal-inner > i.icon_big_times, .tinv-modal .tinv-modal-inner > i[class^="icon_big"]{ display:none !important; } .tinv-modal .tinv-txt{ color:var(--cs-text) !important; font-size:15px; line-height:1.5; margin:0 0 20px !important; } .tinv-modal .tinvwl-buttons-group{ display:flex; flex-direction:column; gap:10px; margin:0 !important; } .tinv-modal .tinvwl-buttons-group button.button{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin:0 !important; background:var(--cs-pink-2) !important; color:#fff !important; border:none !important; border-radius:6px !important; padding:12px 18px !important; font-size:13px !important; font-weight:700 !important; letter-spacing:1px; text-transform:uppercase; } .tinv-modal .tinvwl-buttons-group button.button:hover{ background:var(--cs-pink-dark) !important; } /* Zamknij is the secondary action — a ghost button, so the eye lands on "Zobacz ulubione" first */ .tinv-modal .tinvwl-buttons-group button.tinvwl_button_close{ background:transparent !important; color:var(--cs-muted) !important; border:1px solid var(--cs-border) !important; } .tinv-modal .tinvwl-buttons-group button.tinvwl_button_close:hover{ background:transparent !important; color:var(--cs-text) !important; border-color:var(--cs-pink) !important; } .tinv-modal .tinvwl-buttons-group button .ftinvwl{ font-size:14px; } /* ---- nothing found ---- The message text itself is set on the Loop Grid in template #2090. !important on the colour: Elementor writes the widget's own `nothing_found_message_color` into post-2090.css at a higher specificity, and its default is near-black — the message was rendering #1f2124 on #0e0e11, i.e. invisible. */ .e-loop-nothing-found-message{ color:var(--cs-body) !important; font-size:16px; line-height:1.7; padding:40px 20px; text-align:center; max-width:560px; margin:0 auto; } .e-loop-nothing-found-message a{ color:var(--cs-pink); } /* ---- badges added for the search view ---- */ .cs-badge--new{ background:#7b3ff2 !important; } @media (max-width:767px){ .cs-search-head{ flex-direction:column !important; align-items:flex-start !important; gap:14px; padding:24px 16px 14px !important; } .cs-search-head .elementor-heading-title{ font-size:22px; } .cs-sort, .cs-ordering, .cs-ordering select{ width:100%; } } /* ============================================================ 20. CHECKOUT (/podsumowanie-zamowienia/) Section 15 already covers the shared WooCommerce furniture — inputs, buttons, notices — so this section only handles what is specific to the checkout: the two-column shell, the payment block (which ships light grey), the terms box (#555 on dark) and the shipping rows (#666 at 12px). ============================================================ */ /* The heading and its subtitle are Elementor widgets, and the subtitle carries margin-top:-15px. That reads as tight spacing while the H1 is one line; the moment it wraps — which it does on a phone — the subtitle is dragged up into the heading's second line. */ .woocommerce-checkout .elementor-widget-text-editor{ margin-top:0 !important; } /* ---- section headings ---- */ .woocommerce-checkout form.checkout h3, .woocommerce-checkout #order_review_heading{ color:var(--cs-text); font-size:20px; font-weight:600; letter-spacing:.3px; margin:0 0 18px; } /* ---- form fields ---- */ .woocommerce-checkout .woocommerce-billing-fields label, .woocommerce-checkout .woocommerce-shipping-fields label, .woocommerce-checkout .woocommerce-additional-fields label{ color:var(--cs-muted); font-size:13px; font-weight:500; margin:0 0 6px; } .woocommerce-checkout .required{ color:var(--cs-pink); border:none; } /* 12px is below the comfortable minimum for a form you type an address into */ .woocommerce-checkout form .input-text, .woocommerce-checkout form input[type=text], .woocommerce-checkout form input[type=email], .woocommerce-checkout form input[type=tel], .woocommerce-checkout form textarea{ font-size:15px !important; min-height:46px; } .woocommerce-checkout form textarea{ padding-top:12px !important; } /* select2 is the country / voivodeship picker. * Three things fight over its box and all three have to be undone, or the * field ends up 64px tall and inset from every other input in the column: * 1. the theme puts padding:10px on the .select2-container itself * 2. select2's own stylesheet pads .__rendered as well, so the 14px indent * from the shared input rule (section 10) is applied twice * 3. the container carries margin-bottom:-4px, which pulls the next label up * Height is set on the container too — select2 sizes it from the selection, and * an unset container is what lets the arrow drift off the text baseline. */ .woocommerce-checkout .select2-container{ display:block !important; width:100% !important; padding:0 !important; margin:0 !important; height:46px !important; } .woocommerce-checkout .select2-container .select2-selection--single{ height:46px !important; margin:0 !important; padding:0 !important; background:#181818 !important; border:1px solid #434345 !important; border-radius:6px !important; } .woocommerce-checkout .select2-container .select2-selection__rendered{ height:44px !important; line-height:44px !important; /* right padding clears the arrow so long country names cannot run under it */ padding:0 34px 0 14px !important; margin:0 !important; color:var(--cs-text) !important; font-size:15px !important; } .woocommerce-checkout .select2-container .select2-selection__arrow{ height:44px !important; top:0 !important; right:10px !important; } .select2-dropdown{ background:var(--cs-surface) !important; border:1px solid var(--cs-border) !important; border-radius:6px !important; color:var(--cs-text) !important; } /* match the field's own 14px indent so the list lines up under the closed box */ .select2-results__option{ background:transparent !important; color:var(--cs-body) !important; padding:9px 14px !important; font-size:15px !important; } .select2-results__option--highlighted{ background:var(--cs-pink-2) !important; color:#fff !important; } .select2-search--dropdown{ padding:8px !important; } .select2-search__field{ background:#181818 !important; color:var(--cs-text) !important; border:1px solid #434345 !important; border-radius:6px !important; min-height:38px !important; padding:0 12px !important; font-size:15px !important; } /* ---- order review panel ---- */ .woocommerce-checkout #order_review{ background:var(--cs-surface) !important; border:1px solid var(--cs-border) !important; border-radius:var(--cs-radius) !important; padding:22px 24px !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table th{ color:var(--cs-muted); font-size:12px; letter-spacing:1px; text-transform:uppercase; border:none; border-bottom:1px solid var(--cs-border); padding:0 0 12px; } .woocommerce-checkout .woocommerce-checkout-review-order-table td{ border:none; border-bottom:1px solid var(--cs-border); padding:12px 0; color:var(--cs-body); font-size:14px; } .woocommerce-checkout .woocommerce-checkout-review-order-table .product-name{ color:var(--cs-text); } .woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity{ color:var(--cs-muted); } .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td{ border-bottom:none; padding-top:16px; color:var(--cs-text); font-size:17px; font-weight:700; text-transform:none; letter-spacing:0; } .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount{ color:var(--cs-pink); } /* shipping choices — the theme leaves these #666 at 12px */ .woocommerce-checkout #shipping_method, .woocommerce-checkout .woocommerce-shipping-totals td{ color:var(--cs-body) !important; font-size:14px !important; } .woocommerce-checkout #shipping_method li{ margin:0 0 8px; list-style:none; } .woocommerce-checkout #shipping_method label{ color:var(--cs-body); font-size:14px; } .woocommerce-checkout #shipping_method input[type=radio], .woocommerce-checkout .wc_payment_methods input[type=radio]{ accent-color:var(--cs-pink); margin-right:8px; } /* InPost's parcel-machine picker ships its own grey */ .woocommerce-checkout .easypack-parcel-machine-select, .woocommerce-checkout .easypack-parcel-machine-label, .woocommerce-checkout .easypack-osm-widget-label{ color:var(--cs-body) !important; font-size:13px !important; } /* ---- payment block ---- */ .woocommerce-checkout #payment{ background:var(--cs-surface-2) !important; border:1px solid var(--cs-border) !important; border-radius:var(--cs-radius) !important; padding:16px !important; } .woocommerce-checkout #payment ul.wc_payment_methods{ border:none !important; padding:0 !important; margin:0 0 6px; } .woocommerce-checkout #payment ul.wc_payment_methods li{ list-style:none; border:none; margin:0 0 6px; color:var(--cs-text); } .woocommerce-checkout #payment ul.wc_payment_methods label{ color:var(--cs-text); font-size:14px; } /* WooCommerce paints this #f6f6f6 with #515151 text — a white panel mid-page, and it carries a matching triangle via ::before */ .woocommerce-checkout #payment div.payment_box{ background:var(--cs-bg-deep) !important; color:var(--cs-body) !important; border:1px solid var(--cs-border); border-radius:8px !important; font-size:13px; line-height:1.6; } .woocommerce-checkout #payment div.payment_box::before{ border-bottom-color:var(--cs-bg-deep) !important; } /* the gateway's own description carries #222 on the

, so colouring only the box left near-black text on a near-black panel */ .woocommerce-checkout #payment div.payment_box p, .woocommerce-checkout #payment div.payment_box li, .woocommerce-checkout #payment div.payment_box span{ color:var(--cs-body) !important; } .woocommerce-checkout #payment div.payment_box a{ color:var(--cs-pink); } /* PayU ships a dark navy logo — invisible on this background. Same treatment as the footer badge in section 13. */ .woocommerce-checkout #payment label img{ filter:brightness(0) invert(1); max-height:22px; width:auto; margin-left:8px; vertical-align:middle; } /* ---- InPost parcel-locker picker ---- The plugin ships this row with an EMPTY , so it read as a stray button floating in the totals table. It cannot be made full width from CSS — the column widths come from the rows above (PRODUKT / KWOTA) and spanning them needs colspan, i.e. markup. Instead the empty label cell is given a real label, so the row matches the KWOTA / PRZESYŁKA / Łącznie rhythm. */ .woocommerce-checkout tr.easypack-parcel-machine{ display:table-row !important; } .woocommerce-checkout tr.easypack-parcel-machine th.easypack-parcel-machine-label{ display:table-cell !important; vertical-align:top; padding:12px 0 0 !important; border:none !important; color:var(--cs-muted) !important; font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; text-align:left; } .woocommerce-checkout tr.easypack-parcel-machine th.easypack-parcel-machine-label::before{ content:"Punkt odbioru"; } .woocommerce-checkout tr.easypack-parcel-machine td.easypack-parcel-machine-select{ display:table-cell !important; padding:12px 0 0 !important; border:none !important; } /* InPost keep their yellow — it is the carrier's brand cue — but the plugin sets WHITE text on it (#fff on #fcc905 is about 1.9:1, unreadable). Dark ink on the yellow is InPost's own treatment and passes contrast. */ .woocommerce-checkout .easypack_show_geowidget{ display:flex !important; align-items:center; justify-content:center; width:100% !important; box-sizing:border-box; min-height:44px; padding:11px 12px !important; background:#fcc905 !important; color:#14140f !important; border:none !important; border-radius:6px !important; font-size:12px !important; font-weight:700; letter-spacing:.4px; text-transform:uppercase; text-align:center; line-height:1.25; cursor:pointer; transition:filter .2s; } .woocommerce-checkout .easypack_show_geowidget:hover{ filter:brightness(1.08); } /* the chosen locker: the plugin gives the header a mint-green background (rgb(156,249,183)) which fights the whole palette */ .woocommerce-checkout .easypack-visible-point-header, .woocommerce-checkout .easypack-visible-point-description{ background:transparent !important; display:block; font-style:normal; } .woocommerce-checkout .easypack-visible-point-header{ color:var(--cs-muted) !important; font-size:11px; letter-spacing:1px; text-transform:uppercase; margin:14px 0 4px; } .woocommerce-checkout .easypack-visible-point-description{ color:var(--cs-text) !important; font-size:13px; line-height:1.5; background:var(--cs-bg-deep) !important; border:1px solid var(--cs-border); border-radius:8px; padding:10px 12px !important; } .woocommerce-checkout .woocommerce-shipping-totals img{ max-width:52px; height:auto; display:block; margin:6px 0; } /* ---- the geowidget modal (jBox) ---- Its title bar is #fafafa with white text — the heading was invisible — and the container is white, which flashes against the dark checkout. */ .jBox-Modal .jBox-container{ background:var(--cs-surface) !important; border:1px solid var(--cs-border); border-radius:var(--cs-radius) !important; overflow:hidden; } .jBox-Modal .jBox-title{ background:var(--cs-surface-2) !important; color:var(--cs-text) !important; border-bottom:1px solid var(--cs-border); font-size:15px; font-weight:600; } .jBox-Modal .jBox-content{ background:var(--cs-surface) !important; padding:14px !important; } .jBox-Modal .jBox-closeButton{ border:1px solid var(--cs-border) !important; background:var(--cs-surface) !important; border-radius:50%; } .jBox-Modal .jBox-closeButton svg path, .jBox-Modal .jBox-closeButton svg{ fill:var(--cs-text) !important; } .jBox-Modal .jBox-closeButton:hover{ border-color:var(--cs-pink) !important; } /* ---- InPost parcel-locker map ---- is a custom element, so with no stylesheet of its own it inherits `display:inline` and collapses to line-height — measured 739 x 22px while the map iframe inside it was fully loaded at 617px tall. The modal opened and looked empty, which reads as "the map doesn't work". Nothing here fixes InPost's own token/domain errors — those render inside the iframe. */ inpost-geowidget{ display:block !important; width:100%; height:100%; min-height:560px; } inpost-geowidget iframe{ display:block; width:100%; height:100%; min-height:560px; border:0; } .jBox-content inpost-geowidget{ min-height:600px; } /* ---- terms + place order ---- */ .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{ color:var(--cs-body) !important; font-size:13px; line-height:1.6; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a{ color:var(--cs-pink); text-decoration:underline; text-underline-offset:3px; } .woocommerce-checkout .woocommerce-form__label-for-checkbox, .woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text{ color:var(--cs-body); } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type=checkbox], .woocommerce-checkout .woocommerce-form__input-checkbox{ accent-color:var(--cs-pink); width:16px; height:16px; margin-right:8px; } .woocommerce-checkout #place_order{ display:block; width:100%; padding:16px 26px !important; font-size:14px !important; margin-top:6px; } /* Royal lays the two columns out as a flex row in .wpr-customer-details-wrapper. At tablet the summary column is squeezed to 251px, which wraps the InPost row ("InPost Paczkomat 24/7: 20,00 zł") and its pickup-point button into a narrow ribbon — stack instead. */ @media (max-width:1024px){ .woocommerce-checkout .wpr-customer-details-wrapper{ flex-direction:column !important; gap:24px; } .woocommerce-checkout .wpr-customer-details-wrapper > *{ width:100% !important; max-width:100% !important; flex:1 1 auto !important; } } @media (max-width:767px){ .woocommerce-checkout form.checkout h3, .woocommerce-checkout #order_review_heading{ font-size:18px; margin-bottom:14px; } .woocommerce-checkout #order_review{ padding:18px 16px !important; } .woocommerce-checkout #payment{ padding:14px !important; } } /* ============================================================ 22. LEGAL / CONTENT PAGES regulamin · polityka-prywatnosci · polityka-cookies · zwroty-i-reklamacje · dostawa-i-platnosci · odstapienie-od-umowy All six are plain Elementor pages holding a single text-editor widget, and all six shipped with the same two faults: the section container is `padding:100px 0` — no HORIZONTAL padding at all, so on a phone the text touched both screen edges — and on desktop the measure ran the full 1180px at 13px, about 150 characters a line. Scoped by page ID because nothing else distinguishes them from any other Elementor page. ADD THE ID HERE if the client writes another legal page (kontakt, faq, newsletter were removed from the footer pending exactly that decision). ============================================================ */ .page-id-1368 .e-con-inner, .page-id-1392 .e-con-inner, .page-id-1397 .e-con-inner, .page-id-1402 .e-con-inner, .page-id-1407 .e-con-inner, .page-id-1412 .e-con-inner{ padding-left:20px !important; padding-right:20px !important; /* ~75 characters a line instead of ~150 */ max-width:min(100%, 820px) !important; margin-inline:auto; } /* !important throughout: Elementor writes per-page typography into post-1368.css and friends as `.elementor-1368 .elementor-element-xxxx`, which outranks any page-id .elementor-kit-8 here. */ .page-id-1368 .elementor-widget-text-editor, .page-id-1392 .elementor-widget-text-editor, .page-id-1397 .elementor-widget-text-editor, .page-id-1402 .elementor-widget-text-editor, .page-id-1407 .elementor-widget-text-editor, .page-id-1412 .elementor-widget-text-editor{ color:var(--cs-body) !important; font-size:15px !important; line-height:1.8 !important; } .page-id-1368 h1, .page-id-1392 h1, .page-id-1397 h1, .page-id-1402 h1, .page-id-1407 h1, .page-id-1412 h1{ color:var(--cs-text); font-size:30px !important; font-weight:600; line-height:1.25; margin:0 0 22px !important; } .page-id-1368 h2, .page-id-1392 h2, .page-id-1397 h2, .page-id-1402 h2, .page-id-1407 h2, .page-id-1412 h2{ color:var(--cs-text); font-size:21px !important; font-weight:600; line-height:1.3; margin:34px 0 12px !important; } .page-id-1368 h3, .page-id-1392 h3, .page-id-1397 h3, .page-id-1402 h3, .page-id-1407 h3, .page-id-1412 h3{ color:var(--cs-text); font-size:17px !important; font-weight:600; margin:24px 0 10px !important; } .page-id-1368 .elementor-widget-text-editor p, .page-id-1392 .elementor-widget-text-editor p, .page-id-1397 .elementor-widget-text-editor p, .page-id-1402 .elementor-widget-text-editor p, .page-id-1407 .elementor-widget-text-editor p, .page-id-1412 .elementor-widget-text-editor p{ margin:0 0 16px; } .page-id-1368 .elementor-widget-text-editor strong, .page-id-1392 .elementor-widget-text-editor strong, .page-id-1397 .elementor-widget-text-editor strong, .page-id-1402 .elementor-widget-text-editor strong, .page-id-1407 .elementor-widget-text-editor strong, .page-id-1412 .elementor-widget-text-editor strong{ color:var(--cs-text) !important; font-weight:600; } /* links were grey and indistinguishable from body copy */ .page-id-1368 .elementor-widget-text-editor a, .page-id-1392 .elementor-widget-text-editor a, .page-id-1397 .elementor-widget-text-editor a, .page-id-1402 .elementor-widget-text-editor a, .page-id-1407 .elementor-widget-text-editor a, .page-id-1412 .elementor-widget-text-editor a{ color:var(--cs-pink) !important; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; } .page-id-1368 .elementor-widget-text-editor ul, .page-id-1392 .elementor-widget-text-editor ul, .page-id-1397 .elementor-widget-text-editor ul, .page-id-1402 .elementor-widget-text-editor ul, .page-id-1407 .elementor-widget-text-editor ul, .page-id-1412 .elementor-widget-text-editor ul, .page-id-1368 .elementor-widget-text-editor ol, .page-id-1392 .elementor-widget-text-editor ol, .page-id-1397 .elementor-widget-text-editor ol, .page-id-1402 .elementor-widget-text-editor ol, .page-id-1407 .elementor-widget-text-editor ol, .page-id-1412 .elementor-widget-text-editor ol{ padding-left:22px; margin:0 0 18px; } .page-id-1368 .elementor-widget-text-editor li, .page-id-1392 .elementor-widget-text-editor li, .page-id-1397 .elementor-widget-text-editor li, .page-id-1402 .elementor-widget-text-editor li, .page-id-1407 .elementor-widget-text-editor li, .page-id-1412 .elementor-widget-text-editor li{ margin-bottom:8px; } .page-id-1368 .elementor-widget-text-editor li::marker, .page-id-1392 .elementor-widget-text-editor li::marker, .page-id-1397 .elementor-widget-text-editor li::marker, .page-id-1402 .elementor-widget-text-editor li::marker, .page-id-1407 .elementor-widget-text-editor li::marker, .page-id-1412 .elementor-widget-text-editor li::marker{ color:var(--cs-pink); } @media (max-width:767px){ /* 100px top and bottom is a lot of empty screen before any words */ .page-id-1368 .e-con-inner, .page-id-1392 .e-con-inner, .page-id-1397 .e-con-inner, .page-id-1402 .e-con-inner, .page-id-1407 .e-con-inner, .page-id-1412 .e-con-inner{ padding:48px 16px !important; } .page-id-1368 h1, .page-id-1392 h1, .page-id-1397 h1, .page-id-1402 h1, .page-id-1407 h1, .page-id-1412 h1{ font-size:24px !important; } .page-id-1368 h2, .page-id-1392 h2, .page-id-1397 h2, .page-id-1402 h2, .page-id-1407 h2, .page-id-1412 h2{ font-size:19px !important; } } /* ============================================================ 21. 404 The 404 is NOT Elementor Pro's "Error 404" location — Royal Elementor Addons owns it, through its own theme-builder template "Woo Food V1 404" (post 285), already conditioned to 404. That is why a new Elementor error-404 template never appeared: two theme builders, and Royal's wins. Edit 285, not Elementor's. The template renders standalone — no header, no footer — hence the logo at the top and the two buttons: they are the only way out. ============================================================ */ body.error404 .cs-404, body.error404 .page-404{ background:var(--cs-bg); padding:70px 20px 90px; text-align:center; } body.error404 .cs-404 .elementor-widget-wrap, body.error404 .cs-404 .elementor-column-wrap{ display:flex; flex-direction:column; align-items:center; } body.error404 .cs-404 > .elementor-container{ max-width:640px; margin:0 auto; } .cs-404-logo img{ width:190px; height:auto; margin:0 auto 34px; display:block; } /* the big number — pink, tight, and not so tall it pushes the useful controls below the fold on a phone */ .cs-404-code .elementor-heading-title{ color:var(--cs-pink) !important; font-size:96px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:2px; margin:0 0 6px !important; } .cs-404-title .elementor-heading-title{ color:var(--cs-text) !important; font-size:26px !important; font-weight:600 !important; line-height:1.3 !important; margin:0 0 12px !important; } .cs-404-text{ color:var(--cs-body); font-size:15px; line-height:1.7; margin:0 0 26px !important; } .cs-404-text p{ margin:0; } /* search — same shape as the header's */ .cs-404-search{ width:100%; max-width:440px; margin:0 auto 26px !important; } .cs-404-search .e-search-input-wrapper{ display:flex; } .cs-404-search input[type=search], .cs-404-search .e-search-input{ flex:1 1 auto; min-width:0; height:52px; padding:0 18px !important; background:var(--cs-surface) !important; color:var(--cs-text) !important; border:1px solid var(--cs-border) !important; border-radius:8px 0 0 8px !important; font-size:15px; } .cs-404-search button, .cs-404-search .e-search-submit{ align-self:stretch; flex:0 0 56px; width:56px; background:var(--cs-pink-2) !important; color:#fff !important; border:none !important; border-radius:0 8px 8px 0 !important; display:flex; align-items:center; justify-content:center; } /* buttons sit side by side on desktop, stacked on a phone */ .cs-404-btn{ display:inline-block; } .cs-404-btn .elementor-button{ min-width:230px; text-align:center; border-radius:6px !important; padding:14px 26px !important; font-size:13px !important; font-weight:700 !important; letter-spacing:1px; text-transform:uppercase; } .cs-404-btn--primary .elementor-button{ background:var(--cs-pink-2) !important; color:#fff !important; border:none !important; } .cs-404-btn--primary .elementor-button:hover{ background:var(--cs-pink-dark) !important; } .cs-404-btn--ghost .elementor-button{ background:transparent !important; color:var(--cs-text) !important; border:1px solid var(--cs-border) !important; } .cs-404-btn--ghost .elementor-button:hover{ border-color:var(--cs-pink) !important; color:var(--cs-pink) !important; } @media (max-width:767px){ body.error404 .cs-404, body.error404 .page-404{ padding:44px 16px 64px; } .cs-404-logo img{ width:150px; margin-bottom:26px; } .cs-404-code .elementor-heading-title{ font-size:68px !important; } .cs-404-title .elementor-heading-title{ font-size:21px !important; } .cs-404-btn{ display:block; width:100%; } .cs-404-btn .elementor-button{ width:100%; min-width:0; } } /* ============================================================ 16. MOJE KONTO (/moje-konto/ and every endpoint) Royal's wpr-my-account-pro widget wraps standard WooCommerce markup, so these are the stock Woo .elementor-kit-8s. Endpoints are ENGLISH slugs on this site: /orders/ /downloads/ /edit-address/ /edit-account/ /customer-logout/ NOTE: the page is currently Elementor Canvas — switch it to Elementor Full Width or it renders with no header/footer. ============================================================ */ /* ---- two-column shell: nav left, content right ---- .logged-in scopes this to the dashboard. Logged out there is no navigation, and the login form would otherwise be squeezed into the 250px track. */ .logged-in.woocommerce-account .woocommerce{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:24px; align-items:start; } /* Royal outputs the CONTENT before the NAVIGATION in the DOM, so relying on source order puts the content in the 250px track and the nav in the wide one. Pin both explicitly. */ .woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation{ grid-column:1; grid-row:2; } .woocommerce-account .woocommerce > .woocommerce-MyAccount-content{ grid-column:2; grid-row:2; } .woocommerce-account .woocommerce > .woocommerce-notices-wrapper{ grid-column:1 / -1; grid-row:1; } /* ---- side navigation ---- */ .woocommerce-MyAccount-navigation{ background:var(--cs-surface); border:1px solid var(--cs-border); border-radius:var(--cs-radius); padding:10px; position:sticky; top:24px; } .woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:block; } .woocommerce-account .woocommerce-MyAccount-navigation ul li{ margin:0; background:transparent !important; border:none !important; } /* Royal paints these light — override with the full chain */ .woocommerce-account .woocommerce-MyAccount-navigation ul li a{ display:block !important; padding:12px 14px !important; border-radius:8px !important; background:transparent !important; color:var(--cs-muted) !important; font-size:14px !important; font-weight:500 !important; text-decoration:none !important; transition:.18s; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{ background:#20202a !important; color:var(--cs-text) !important; } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a{ background:var(--cs-pink) !important; color:#fff !important; font-weight:600 !important; } .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a{ color:#e5484d !important; } /* ---- content panel ---- */ .woocommerce-account .woocommerce-MyAccount-content{ background:var(--cs-surface); border:1px solid var(--cs-border); border-radius:var(--cs-radius); padding:26px 28px; min-width:0; } .woocommerce-MyAccount-content > p{ color:var(--cs-muted); line-height:1.7; } .woocommerce-MyAccount-content a{ color:var(--cs-pink); } .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3{ color:var(--cs-text); font-size:18px; font-weight:600; margin:0 0 16px; line-height:1.3; } /* ---- forms (edit-account, addresses, login, register) ---- */ .woocommerce form .form-row{ margin:0 0 16px; padding:0; } .woocommerce form .form-row label{ display:block; margin-bottom:6px; color:var(--cs-muted); font-size:13px; font-weight:500; } .woocommerce form .form-row-first, .woocommerce form .form-row-last{ width:48.5%; float:left; } .woocommerce form .form-row-last{ float:right; } .woocommerce form .form-row-wide{ width:100%; clear:both; } .woocommerce form .clear{ clear:both; } .woocommerce fieldset{ border:1px solid var(--cs-border); border-radius:10px; padding:20px; margin:26px 0 20px; } .woocommerce fieldset legend{ color:var(--cs-text); font-size:14px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:0 10px; } .woocommerce .woocommerce-Input, .woocommerce .input-text{ width:100%; } .woocommerce em, .woocommerce .woocommerce-password-hint{ color:var(--cs-muted); font-size:12px; font-style:normal; } .woocommerce .show-password-input{ color:var(--cs-muted); } .woocommerce .required{ color:var(--cs-pink); border:none; } /* ---- saved addresses ---- */ .woocommerce-Addresses{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .woocommerce-Addresses .woocommerce-Address{ width:auto !important; float:none !important; background:#141419; border:1px solid var(--cs-border); border-radius:10px; padding:20px; } .woocommerce-Address-title{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; } .woocommerce-Address-title h2, .woocommerce-Address-title h3{ margin:0 !important; font-size:16px !important; } .woocommerce-Address-title a.edit{ font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--cs-pink) !important; white-space:nowrap; } .woocommerce-Address address{ font-style:normal; color:var(--cs-muted); line-height:1.7; font-size:14px; margin:0; } /* ---- orders table ---- */ .woocommerce-orders-table, .woocommerce-MyAccount-orders{ width:100%; } /* An order row can carry ZAPŁAĆ / ZOBACZ / ANULUJ. They render as inline blocks with no margin, so they stack flush and read as one overlapping lump. Give them full width, a gap, and distinct roles. */ .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{ min-width:150px; vertical-align:middle; } .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button{ display:block !important; width:100% !important; margin:0 0 8px !important; padding:10px 14px !important; font-size:12px !important; text-align:center; } .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button:last-child{ margin-bottom:0 !important; } /* primary action stays pink; the rest are quieter */ .woocommerce-orders-table .button.view, .woocommerce-orders-table .button.cancel{ background:transparent !important; border:1px solid var(--cs-border) !important; color:var(--cs-text) !important; } .woocommerce-orders-table .button.view:hover{ border-color:var(--cs-pink) !important; color:var(--cs-pink) !important; background:transparent !important; } .woocommerce-orders-table .button.cancel{ color:var(--cs-muted) !important; } .woocommerce-orders-table .button.cancel:hover{ border-color:#e5484d !important; color:#e5484d !important; background:transparent !important; } .woocommerce-orders-table .woocommerce-orders-table__cell-order-status{ color:var(--cs-muted); } .woocommerce-account .woocommerce-pagination a, .woocommerce-account .woocommerce-pagination span{ color:var(--cs-text); } /* ---- login / register (logged-out view) ---- Royal's widget does NOT emit Woo's #customer_login wrapper: logged out, the form is a direct child of .woocommerce. That means the two-column grid at the top of this section applied to it — the form landed in the 250px navigation track with ~900px of dead space beside it, and the "Logowanie" heading in the other track, so the two did not even line up. Undo the grid whenever there is no navigation to put in it. */ .woocommerce-account:not(.logged-in) .woocommerce{ display:block !important; max-width:440px; margin-inline:auto; } .woocommerce-account:not(.logged-in) .woocommerce > h2{ text-align:center; font-size:22px; letter-spacing:.2px; margin:0 0 18px; } #customer_login.u-columns{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } #customer_login .u-column1, #customer_login .u-column2{ width:auto !important; float:none !important; } /* WooCommerce ships `.woocommerce form.login` (0,2,1) with a #cfc8d8 border and 2em margins. The plain-class rule that used to live here was (0,1,0) and lost every time, which is why the card kept a pale lavender outline on black. Match Woo's own shape so the cascade is decided by source order, not luck. */ /* /moje-konto/lost-password/ uses the same shell with a different form class */ .woocommerce form.woocommerce-form-login, .woocommerce form.woocommerce-form-register, .woocommerce form.woocommerce-ResetPassword{ background:var(--cs-surface-2) !important; border:1px solid var(--cs-border) !important; border-radius:10px !important; padding:26px !important; margin:0 !important; } /* Royal's widget CSS sets `.wpr-my-account-tab p{margin:0}`, so rows need an explicit bottom margin rather than inheriting Woo's. */ .woocommerce form.woocommerce-form-login p.woocommerce-form-row, .woocommerce form.woocommerce-ResetPassword p.woocommerce-form-row{ margin:0 0 18px !important; padding:0; } .woocommerce form.woocommerce-ResetPassword > p:first-child{ color:var(--cs-body); font-size:14px; line-height:1.6; margin:0 0 18px; } .woocommerce form.woocommerce-form-login label, .woocommerce form.woocommerce-ResetPassword label{ display:block; margin:0 0 6px; font-size:13px; color:var(--cs-muted); } /* The submit button shares its

with the "remember me" checkbox, and Woo emits the checkbox AFTER the button. Flex + order swaps them back. :not(.woocommerce-form-row) is what keeps this off the username/password rows — they carry BOTH classes, so a bare .form-row .elementor-kit-8 would flex every row and (being later in the file) wipe their bottom margin. */ .woocommerce form.woocommerce-form-login .form-row:not(.woocommerce-form-row){ display:flex; flex-direction:column; gap:14px; margin:0; } .woocommerce form.woocommerce-form-login button[type="submit"], .woocommerce form.woocommerce-ResetPassword button[type="submit"]{ width:100%; min-height:46px; order:2; } .woocommerce form.woocommerce-form-login .woocommerce-form-login__rememberme{ order:1; display:flex; align-items:center; gap:8px; /* Woo ships 25px top / 5px bottom on this label; the row's gap handles spacing now, so zero it or the block drifts away from the password field */ margin:0 !important; } .woocommerce form.woocommerce-form-login .form-row:not(.woocommerce-form-row) button[type="submit"]{ margin:0 !important; } .woocommerce form.woocommerce-form-login .woocommerce-form-login__rememberme input{ margin:0; } .woocommerce-form-login__rememberme{ color:var(--cs-muted); font-size:13px; } .woocommerce-LostPassword{ text-align:center; margin:18px 0 0 !important; } /* Royal's widget sets link colour per element on page 10 with (0,3,0), which outranks a plain .woocommerce-LostPassword a — the link rendered grey. */ .woocommerce .woocommerce-LostPassword a{ color:var(--cs-pink) !important; font-size:13px; } .woocommerce-privacy-policy-text p{ color:var(--cs-muted); font-size:12px; line-height:1.6; } /* ---- responsive ---- */ @media (max-width:1024px){ .woocommerce-account .woocommerce{ grid-template-columns:1fr; } .woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation{ grid-column:1; grid-row:2; } .woocommerce-account .woocommerce > .woocommerce-MyAccount-content{ grid-column:1; grid-row:3; } .woocommerce-MyAccount-navigation{ position:static; } .woocommerce-MyAccount-navigation ul{ display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; scrollbar-width:none; } .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{ display:none; } .woocommerce-MyAccount-navigation li{ flex:0 0 auto; } .woocommerce-MyAccount-navigation li a{ white-space:nowrap; padding:10px 14px; } .woocommerce-Addresses, #customer_login.u-columns{ grid-template-columns:1fr; } } @media (max-width:767px){ .woocommerce-account .woocommerce-MyAccount-content{ padding:18px 16px; } .woocommerce form .form-row-first, .woocommerce form .form-row-last{ width:100%; float:none; } .woocommerce fieldset{ padding:16px; } /* orders table -> stacked rows */ .woocommerce-account table.shop_table, .woocommerce-account table.shop_table tbody, .woocommerce-account table.shop_table tr, .woocommerce-account table.shop_table td{ display:block; width:100% !important; } .woocommerce-account table.shop_table thead{ display:none; } .woocommerce-account table.shop_table tbody tr{ border:1px solid var(--cs-border); border-radius:10px; padding:12px; margin:0 0 12px; } .woocommerce-account table.shop_table td{ display:flex !important; justify-content:space-between; gap:12px; border:none !important; padding:6px 0 !important; text-align:right; } .woocommerce-account table.shop_table td::before{ color:var(--cs-muted); font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; } } /* ============================================================ 14. RESPONSIVE Reference: crazy_stuff_mobile3.png (tablet/phone), wordpress2.png (desktop). Breakpoints match Elementor defaults — do not change one without changing the other. Tablet <= 1024 Phone <= 767 Small <= 430 (real iPhone width; mockup 3 is drawn at 849) ============================================================ */ /* ---------- TABLET <=1024 ---------- */ @media (max-width:1024px){ .cs-search{ max-width:360px !important; } /* The last horizontal scroll on the site: at 768 the footer's contact column is narrow enough that `crazystuff@int.pl` — one unbreakable token — ran to x=781 against a 768 viewport, so EVERY page could be dragged 13px sideways. Note it was the email, not the topbar phone number the old to-do blamed; the topbar items actually fit. */ .cs-footer .elementor-icon-list-item, .cs-footer .elementor-icon-list-item a{ min-width:0; } .cs-footer .elementor-icon-list-text{ overflow-wrap:anywhere; word-break:break-word; min-width:0; } /* Five columns in 720px gave each one 112px, so "+48 530 778 438" broke into four lines and the email was clipped. Two across instead — .cs-foot-cols is BOXED, so the flex row is .e-con-inner, not the container itself. */ .cs-foot-cols > .e-con-inner{ flex-wrap:wrap !important; gap:28px 24px !important; } .cs-foot-cols > .e-con-inner > *{ flex:0 0 calc(50% - 12px) !important; max-width:calc(50% - 12px) !important; } /* .cs-cat never lands on the widgets (widget classes use _css_classes), so these must go through .cs-cats-strip like the desktop rules do. */ .cs-cat .elementor-image-box-img, .cs-cats-strip .elementor-image-box-img{ width:96px !important; height:96px !important; } /* The category strip scrolls here, and `justify-content:center` (correct on desktop, where the eight circles fit) is fatal once the content overflows: the browser centres the overflow, so part of it sits at NEGATIVE x, to the left of the scroll origin. scrollLeft cannot go below 0, so that part is unreachable by any swipe — measured 549px of content in a 327px box with the first circle at x=-197. It looked like "dla niego is cut in half and the strip won't swipe", and it reproduced on every Android device because touch is the only way people scroll it. flex-start puts the first circle at the container edge and makes the whole 443px of scroll reachable. */ .cs-cats-strip{ justify-content:flex-start !important; } .cs-news .cs-news-off{ font-size:30px; } /* desktop nav bar off, hamburger on — it sits first in the header row */ .cs-nav{ display:none !important; } /* The header container is BOXED, so its children live inside .e-con-inner, not directly under .cs-header. Ordering rules must go through that wrapper or they silently target nothing. Layout below 1024: row 1: ☰ logo account cart row 2: search, full width */ .cs-header{ padding:14px 18px !important; } .cs-header > .e-con-inner{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; row-gap:12px; column-gap:14px; } /* belt and braces — each item centres itself on the row too, so the burger cannot ride high when its widget is shorter than the logo */ .cs-header > .e-con-inner > *{ align-self:center !important; } /* !important on every width here: Elementor ships .elementor.elementor .e-con > .elementor-widget { max-width:100% } at (0,4,0), which silently beat these and left the three items at 203 + 210 + 154 = 567px inside a 362px row, so they wrapped. */ .cs-header > .e-con-inner > .cs-nav-mobile, .cs-header > .e-con-inner > .elementor-widget-nav-menu, .cs-header > .e-con-inner > .elementor-widget-wordpress-menu{ display:flex !important; align-items:center; justify-content:center; order:0; flex:0 0 auto !important; width:44px !important; min-width:44px !important; max-width:44px !important; /* burger only */ /* the widget box was 54px tall against a 44px toggle, so the icon sat 5px above the logo's centre line */ height:44px !important; padding:0 !important; margin:0 !important; /* The widget is a COLUMN flex holding three children: the (hidden) horizontal menu, the toggle, and the dropdown panel. The dropdown is display:block at 0 height but still a flex item, so the widget's 10px gap made the content 54px inside a 44px box — overflowing 5px above and pulling the burger off the logo's centre line. */ gap:0 !important; row-gap:0 !important; column-gap:0 !important; } /* The dropdown panel must not occupy layout space when closed. It is positioned against .cs-nav-mobile, which is only the 44px burger box sitting 18px inside the header's padding. With width:100vw the panel therefore ran from x=18 to x=786 on a 768px screen — 18px past the right edge. It paints nothing when closed (max-height:0; overflow:hidden) but a zero-height box still has width, so the browser counted it and every page could be dragged sideways. Making the burger box non-positioned hands the panel to .cs-header as its containing block, so `width:100%` is the header's width and `top:100%` is the header's bottom edge. Verified open: 0-375 on phone, 0-753 on tablet, flush under the header. .cs-nav-mobile is display:none on desktop, so none of this reaches the desktop nav. */ .cs-header .cs-nav-mobile{ position:static; } .cs-header .elementor-nav-menu--dropdown{ margin:0 !important; position:absolute !important; top:100% !important; left:0 !important; right:auto !important; width:100% !important; max-width:100% !important; z-index:99; /* The panel shipped with a WHITE background while the menu items are white text — the mobile menu opened as a blank white sheet on every page, at both phone and tablet width. */ background:var(--cs-surface) !important; border-top:1px solid var(--cs-border); border-bottom:1px solid var(--cs-border); } .cs-header .elementor-nav-menu--dropdown a.elementor-item{ color:var(--cs-text) !important; padding:12px 18px !important; } .cs-header .elementor-nav-menu--dropdown a.elementor-item:hover, .cs-header .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{ color:var(--cs-pink) !important; background:transparent !important; } .cs-header .elementor-nav-menu--dropdown li:not(:last-child) > a.elementor-item{ border-bottom:1px solid var(--cs-border); } /* The submenu chevron is an inline with no fill of its own, so it fell back to the SVG default — black on the dark panel, effectively invisible. The desktop nav escaped this because its dropdown colours were set in the widget; the mobile widget's were not. currentColor makes the arrow track the item, so it turns pink on hover/active with no extra rule. */ .cs-header .elementor-nav-menu--dropdown .sub-arrow svg, .cs-header .elementor-nav-menu--dropdown .sub-arrow i{ fill:currentColor !important; color:currentColor !important; } /* only the toggle shows at this width; the horizontal list must not size it */ .cs-header > .e-con-inner .elementor-nav-menu--main, .cs-header > .e-con-inner .elementor-nav-menu--layout-horizontal{ display:none !important; } /* The toggle is a direct flex child of the nav widget, but Elementor sizes it from font-size/padding with a more specific rule — it rendered 34px tall and stuck to the top of the 44px box, 5px above the logo's centre. Every value here needs !important to win. */ .cs-header .elementor-menu-toggle, .cs-header > .e-con-inner .elementor-menu-toggle{ display:flex !important; align-items:center !important; justify-content:center !important; align-self:center !important; width:44px !important; height:44px !important; min-height:44px !important; padding:0 !important; margin:0 !important; background:transparent !important; border:none !important; } .cs-header .elementor-menu-toggle i, .cs-header .elementor-menu-toggle svg{ display:block; margin:0 !important; line-height:1; } .cs-header > .e-con-inner > .elementor-widget-theme-site-logo, .cs-header > .e-con-inner > .elementor-widget-html{ order:1; flex:0 1 auto !important; /* must NOT grow, or it takes the whole row */ width:auto !important; max-width:170px !important; min-width:0 !important; } .cs-header > .e-con-inner > .elementor-widget-theme-site-logo img{ max-width:100% !important; width:100% !important; height:auto; } .cs-header > .e-con-inner > .cs-header-actions{ order:2; flex:0 0 auto !important; width:auto !important; margin-left:auto; /* pushes account + cart to the right edge */ /* Elementor's default 10px container padding was leaving the icons 10px short of the edge, which reads as "not quite right-aligned" */ padding:0 !important; justify-content:flex-end !important; } .cs-header > .e-con-inner > .cs-header-actions > .e-con-inner{ padding:0 !important; justify-content:flex-end !important; } /* .cs-cart-group is nested one level deeper and kept its own 10px default, which left the cart icon 20px short of the search bar's right edge even though every container above it was already flush. */ .cs-header-actions .cs-cart-group, .cs-header-actions .cs-cart-group > .e-con-inner, .cs-header-actions > .e-con-inner > *, .cs-header-actions > *{ padding:0 !important; } .cs-header-actions .cs-cart-group{ justify-content:flex-end !important; } .cs-header-actions .elementor-menu-cart__toggle, .cs-header-actions .elementor-menu-cart__toggle_button{ margin-right:0 !important; padding-right:0 !important; } .cs-header > .e-con-inner > .cs-search{ order:3; flex:1 0 100% !important; max-width:100% !important; margin:0; } /* icons only at this width */ .cs-header-actions .elementor-icon-box-title{ display:none !important; } /* Hide the whole KOSZYK widget, not just its

. A zero-width flex item is still an item, so the group's gap kept 10px of dead space to the right of the cart icon and stopped it reaching the search button's edge. */ .cs-cart-group .elementor-widget-text-editor, .cs-cart-group > .e-con-inner > .elementor-widget-text-editor{ display:none !important; } .cs-cart-group, .cs-cart-group > .e-con-inner{ gap:0 !important; } .cs-header-actions > .e-con-inner{ gap:18px !important; } /* topbar loses the phone block, keeps the three promises */ .cs-topbar{ font-size:11px; } .cs-topbar .elementor-icon-box-title{ font-size:11px; } /* USP + trust icons stack above their text to save width */ .cs-usp .elementor-icon-box-wrapper, .cs-trust .elementor-icon-box-wrapper{ flex-direction:column; align-items:center; text-align:center; gap:8px; } } /* ---------- PHONE <=767 ---------- */ @media (max-width:767px){ .cs-topbar{ display:none; } /* same row structure as tablet, just tighter */ .cs-header{ padding:12px 14px !important; } .cs-header > .e-con-inner{ column-gap:10px; row-gap:10px; } .cs-header > .e-con-inner > .elementor-widget-theme-site-logo{ max-width:140px !important; } .cs-search.cs-search .e-search-form .e-search-submit{ flex:0 0 48px; width:48px !important; min-width:48px !important; max-width:48px !important; } /* icons only — drop the MOJE KONTO / KOSZYK labels */ .cs-header-actions .elementor-icon-box-title{ display:none; } .cs-header-actions{ gap:16px !important; } .cs-header-actions a, .cs-header-actions .elementor-icon-box-icon{ min-width:44px; min-height:44px; } .cs-sec-title{ font-size:19px; } /* ---- product card density on phone ---- Two cards across leaves each one 152px wide. With the desktop body padding of 16px that is 118px of usable width, and at that width every single line wrapped: the price broke so "zł" sat alone on its own line, DO KOSZYKA ran to two lines (65px tall), and "(1 opinia klienta)" beside the stars took 48px. Measured result: a 430px card carrying only 150px of photo — 65% text. Tightened to roughly 340px, so the photo leads again. */ .cs-card-body{ padding:12px 12px 14px !important; } .cs-card-cats{ font-size:10px; line-height:1.4; margin-bottom:4px; } .cs-card-title, .cs-card-title a, .cs-card-body [data-widget_type^="woocommerce-product-title"] .elementor-heading-title, .cs-card-body [data-widget_type^="woocommerce-product-title"] .elementor-heading-title a{ font-size:14px; line-height:1.3; margin-bottom:6px; min-height:36px; overflow-wrap:anywhere; } /* stars stay, the review count goes — it is the single biggest waste of height on the card and the number is on the product page anyway */ .cs-card .woocommerce-review-link{ display:none !important; } .cs-card .star-rating, .cs-card .elementor-widget-woocommerce-product-rating{ margin-bottom:6px !important; font-size:12px; } /* nowrap on the amounts: without it "149,00" and "zł" split across lines */ .cs-card .price{ font-size:15px !important; gap:6px; margin-bottom:0 !important; flex-wrap:wrap; } .cs-card .price .amount, .cs-card .price del, .cs-card .price ins, .cs-card .price bdi{ white-space:nowrap; } .cs-card .price del{ font-size:12px; } /* NO white-space:nowrap here. It fits DO KOSZYKA on one line, but it also raises the card's min-content width to 172.8px, and Elementor's loop grid tracks are `1fr` (= minmax(auto,1fr)) which then grew past the 327px container and pushed the second column off screen. 12px type with a smaller letter-spacing fits on one line without forcing anything. */ .cs-card .elementor-button, .cs-card .add_to_cart_button, .cs-card .button, .woocommerce .cs-card .elementor-button, .woocommerce .cs-card .add_to_cart_button, .woocommerce .cs-card .button{ font-size:12px !important; letter-spacing:.5px; padding:11px 8px !important; margin-top:10px !important; } /* zero floor on the tracks so no future card content can blow the grid out, and a tighter gap to buy back width */ .cs-products .elementor-loop-container, .elementor-loop-container.elementor-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px !important; } /* ---- USP + trust strips: 2 x 2, not a 480px tower ---- These are BOXED containers, so their only child is .e-con-inner and the four icon boxes live inside that. The old rule sized `.cs-trust > *`, which hit the wrapper itself — it squeezed .e-con-inner to 50% (152px) and the four items then stacked down that narrow column, 483px tall. Size the inner wrapper as the grid instead. */ .cs-usp > .e-con-inner, .cs-trust > .e-con-inner{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 12px; width:100% !important; max-width:none !important; flex:1 1 auto !important; } .cs-usp > .e-con-inner > *, .cs-trust > .e-con-inner > *{ width:auto !important; max-width:none !important; flex:0 1 auto !important; } /* same effect if either strip is ever rebuilt as a full-width container, where the widgets are direct children and there is no .e-con-inner */ .cs-usp > .elementor-widget, .cs-trust > .elementor-widget{ flex:0 0 calc(50% - 6px) !important; max-width:calc(50% - 6px) !important; } .cs-usp .elementor-icon-box-title, .cs-trust .elementor-icon-box-title{ font-size:12px; line-height:1.4; } .cs-usp .elementor-icon-box-icon svg, .cs-trust .elementor-icon-box-icon svg{ width:26px; height:26px; } /* hero: text sits over the image instead of beside it */ .cs-hero{ flex-direction:column !important; padding:40px 20px !important; } .cs-hero > *{ width:100% !important; } .cs-hero .cs-hero-title-2{ font-size:34px; } /* Category strip scrolls, circles shrink, the next one peeks in. At 390px the strip is 342 wide; 84px circles + 14px gap show ~3.5 of them, which is what signals "this scrolls". 112px showed only 2.7 and read as oversized. */ .cs-cats-strip{ gap:14px; padding-inline:0; } .cs-cat .elementor-image-box-img, .cs-cats-strip .elementor-image-box-img{ width:84px !important; height:84px !important; margin-bottom:10px !important; } .cs-cat .elementor-image-box-title, .cs-cats-strip .elementor-image-box-title{ font-size:11px; letter-spacing:.5px; } /* footer: hide the 5-column block, show the accordion */ .cs-foot-cols{ display:none !important; } .cs-foot-acc{ display:block !important; } .cs-news .elementor-field-textual, .cs-news .elementor-button[type="submit"]{ border-radius:6px !important; } } /* ---------- SMALL PHONE <=430 ---------- Mockup 3 is drawn at 849px, so these four are not covered by it. Four-across strips do not survive a 390px screen. */ @media (max-width:430px){ /* The USP / trust 2 x 2 used to live here and sized `.cs-trust > *`, which is the boxed container's .e-con-inner wrapper rather than the icon boxes. It now sits in the <=767 block above, applied to that wrapper. */ /* newsletter stacks; the gift image is decorative, drop it */ .cs-news{ flex-direction:column !important; align-items:stretch !important; gap:18px; padding:22px 18px !important; } .cs-news > *{ width:100% !important; } .cs-news .cs-news-gift{ display:none !important; } .cs-news .cs-news-off{ font-size:34px; text-align:center; } /* payment logos wrap instead of overflowing */ .cs-copy{ flex-direction:column !important; gap:14px; text-align:center; } .cs-copy img{ max-width:100%; height:auto; } .cs-hero .cs-hero-title-2{ font-size:28px; } .cs-sec-title{ font-size:17px; } } /* ============================================================ 23. AGE GATE (plugin: age-gate) The gate replaces the whole document but still loads the theme's head, so post-8.css reaches it and these rules apply. Markup: .age-gate__wrapper .age-gate__background-color fixed backdrop, z-index 1 .age-gate__background fixed image layer, z-index 2 .age-gate [role=dialog] z-index 10000 form.age-gate__form flex column, align-items:center .age-gate__heading > h1.age-gate__heading-title .age-gate__fields > .age-gate__challenge + .age-gate__buttons .age-gate__remember-wrapper > label > input + span .age-gate__errors The plugin's own colours come from :root custom properties in an inline