/*
Theme Name: Monsterarium
Theme URI: https://monsterarium.pl
Template: kadence
Author: Monsterarium x JLW Automotive Solutions
Author URI: https://monsterarium.pl
Description: Custom child theme dla butiku kolekcjonerskich roslin Monsterarium. Bazuje na motywie Kadence z wlasnym designem strony glownej, custom template i self-hosted Google Fonts (Fraunces + Inter) zgodnymi z RODO.
Tags: translation-ready,accessibility-ready,two-columns,right-sidebar,left-sidebar,footer-widgets,blog,custom-logo,custom-background,custom-menu,rtl-language-support,editor-style,threaded-comments,custom-colors,featured-images,wide-blocks,full-width-template,theme-options,e-commerce
Version: 1.1.0
Updated: 2026-04-30
*/
/* ============================================================================
MONSTERARIUM CHILD THEME -- premium collector aesthetic
Faza C1: editorial luxury refresh -- warm palette, light typography,
muted bronze gold, dark footer, grain texture, slide-overlay buttons.
Hybryda v2 prototype + bold accents na cenach/CTA dla konwersji.
============================================================================ */
/* ============================================================================
0. DESIGN TOKENS
Custom properties = single source of truth dla calego stylu.
Zmiana koloru w jednym miejscu propaguje sie na cala strone.
============================================================================ */
:root {
/* --- Brand palette (C1: warm/muted) --- */
--ms-green-dark: #293a35; /* primary, links, mid-weight surfaces */
--ms-green-mid: #3d5249; /* hover state, soft accents */
--ms-green-soft: #5a7267; /* product Latin name, subtle accents */
--ms-green-deep: #1f2e28; /* deep surfaces, dark sections */
--ms-gold: #b8935a; /* muted bronze gold accent */
--ms-gold-soft: #d4b27c; /* gold hover, warm highlights */
--ms-gold-deep: #a88a48; /* gold active */
/* --- Surfaces --- */
--ms-bone: #faf7ef; /* warmest light, button text on dark */
--ms-cream: #f7f3ea; /* page background, light surface */
--ms-sand: #ede6d5; /* sectioned background, cards */
--ms-paper: #ffffff; /* product cards, modals */
--ms-border: #e4ddc9; /* subtle dividers */
/* --- Text --- */
--ms-ink: #0f1a16; /* deepest, footer bg + body text */
--ms-text: #2a2a2a; /* body text on light */
--ms-muted: #8a8577; /* secondary text, warm tan-gray */
--ms-disabled: #b8b8b8; /* disabled state */
/* --- States --- */
--ms-error: #b82105;
--ms-success: #13612e;
--ms-warning: #b8935a;
/* --- Typography --- */
--ms-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--ms-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* --- Type scale (modular, base 1rem = 16px) --- */
--ms-text-xs: 0.75rem; /* 12px */
--ms-text-sm: 0.875rem; /* 14px */
--ms-text-base: 1rem; /* 16px */
--ms-text-lg: 1.125rem; /* 18px */
--ms-text-xl: 1.25rem; /* 20px */
--ms-text-2xl: 1.5rem; /* 24px */
--ms-text-3xl: 2rem; /* 32px */
--ms-text-4xl: 2.5rem; /* 40px */
--ms-text-5xl: 3.25rem; /* 52px */
/* --- Radii --- */
--ms-radius-xs: 6px;
--ms-radius-sm: 12px;
--ms-radius: 24px; /* default, panel/card corners */
--ms-radius-pill: 999px; /* buttons, badges */
/* --- Shadows --- */
--ms-shadow-xs: 0 1px 3px rgba(41, 58, 53, 0.06);
--ms-shadow-sm: 0 2px 8px rgba(41, 58, 53, 0.08);
--ms-shadow-md: 0 8px 24px rgba(41, 58, 53, 0.12);
--ms-shadow-lg: 0 16px 40px rgba(41, 58, 53, 0.16);
--ms-shadow-xl: 0 24px 60px rgba(41, 58, 53, 0.20);
/* --- Transitions --- */
--ms-ease: cubic-bezier(0.4, 0, 0.2, 1);
--ms-duration: 0.25s;
}
/* ============================================================================
1. TYPOGRAPHY -- Fraunces + Inter (kluczowy element premium look)
============================================================================ */
/* Body text + UI (Inter) */
body,
input,
select,
optgroup,
textarea,
button,
.button,
.wp-block-button__link,
.kb-button,
.menu-item,
.woocommerce-loop-product__title,
.price,
.woocommerce-tabs ul.tabs li,
.add_to_cart_button,
.single_add_to_cart_button {
font-family: var(--ms-font-body) !important;
}
/* Display / headings (Fraunces) */
h1, h2, h3, h4, h5, h6,
.wp-block-kadence-advancedheading,
.kt-adv-heading,
.product_title,
.wc-block-grid__product-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.site-footer h4,
.entry-title,
.product-title {
font-family: var(--ms-font-display) !important;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--ms-green-dark);
}
/* Refined body -- aggressive reset zeby wyeliminowac jasny pasek na gorze.
Klient zglosil ze widac jasny pasek pod browser frame -- to bylo wynikiem
default HTML/body margin lub Kadence #wrapper bg leaking. */
html, body {
margin: 0 !important;
padding: 0 !important;
background: var(--ms-cream) !important;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.005em;
font-feature-settings: "kern" 1, "liga" 1;
color: var(--ms-ink);
}
/* Wrapper + header wrappers -- force cream bg zeby wyeliminowac BIALY PASEK na top.
Kadence ma `.site { background: var(--global-palette9) }` + `.site-header-wrap`
moze tez miec biale tlo. UWAGA: `.site-container` i `.content-container` uzywane
SA TEZ w footer -- lap je tylko gdy NIE w footer (przez :not selektor lub
explicit footer override ponizej). */
#wrapper,
#wrapper.site,
body > .site,
.wp-site-blocks,
.site-header-wrap,
#main-header,
.site-header-inner-wrap,
.site-header-upper-wrap,
.site-header-upper-inner-wrap {
background: var(--ms-cream) !important;
background-color: var(--ms-cream) !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
/* HIDE Kadence default header + footer (Phase D.Unify) -- klient zazyczyl
spojnego customowego header/footer na wszystkich podstronach. Filter
`kadence_disable_header` w wersji Kadence 1.4.5 nie laczy wszystkich elementow,
wiec brute-force display:none na masthead + colophon. Nasz custom header
(.ms-nav) renderowany przez wp_body_open hook -- nie jest zlapany przez
ten selector. */
header#masthead,
header#masthead.site-header,
#main-header.site-header-wrap,
#colophon.site-footer,
footer#colophon {
display: none !important;
}
/* Wymus dark bg na footer (override gdyby cos go zamazalo) */
.site-footer,
.site-footer-wrap,
.site-footer .site-container,
.site-footer .content-container,
#colophon,
#colophon .site-container {
background: var(--ms-ink) !important;
background-color: var(--ms-ink) !important;
}
/* Inner-wrap + content-container w MAIN content area = cream (nie footer) */
.site-content,
.site-content .site-container,
.site-content .content-container,
#inner-wrap.wrap {
background: var(--ms-cream) !important;
}
/* Header constrain do max-width content zeby logo nie wisial w skrajnym narozniku.
Kadence ma layout-fullwidth = elementy od edge viewport.
AGGRESSIVE catch-all selectors zeby zlapac kazdy possible Kadence container. */
.site-header .site-container,
.site-header > .site-header-wrap > .site-header-inner-wrap,
.site-main-header-wrap .site-header-row-container-inner,
.site-main-header-wrap .site-container,
.site-main-header-wrap > div,
.site-main-header-inner-wrap {
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 32px !important;
padding-right: 32px !important;
box-sizing: border-box !important;
}
/* Wymus full-width na zewnetrznym wrapper -- tlo header ma byc fullwidth,
ale CONTENT inside ograniczony do 1280px (logo + nav + cart) */
.site-header,
.site-main-header-wrap {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Mobile -- mniejszy padding */
@media (max-width: 768px) {
.site-header .site-container,
.site-main-header-wrap .site-header-row-container-inner,
.site-main-header-inner-wrap {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
/* Headings hierarchy -- editorial light (C1) */
h1 { font-weight: 400; font-size: var(--ms-text-4xl); }
h2 { font-weight: 400; font-size: var(--ms-text-3xl); }
h3 { font-weight: 400; font-size: var(--ms-text-2xl); }
h4 { font-weight: 600; font-size: var(--ms-text-xl); }
h5 { font-weight: 600; font-size: var(--ms-text-lg); }
h6 { font-weight: 600; font-size: var(--ms-text-base); text-transform: uppercase; letter-spacing: 0.08em; }
/* Hero H1 -- editorial luxury, responsive */
.home .entry-hero h1,
.home h1.kt-adv-heading,
.home .wp-block-kadence-advancedheading h1,
.ms-hero-title {
font-size: clamp(2.6rem, 6vw, 5rem) !important;
line-height: 1.02 !important;
font-weight: 400 !important;
letter-spacing: -0.03em !important;
color: var(--ms-green-deep) !important;
}
/* Lead paragraph */
.home .entry-hero h1 + p,
.home .ms-hero-title + p {
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
line-height: 1.65;
color: var(--ms-green-mid);
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
/* Section headings (h2 na home -- semantic, nie ID-zaleznie) */
.home h2.kt-adv-heading,
.home .wp-block-kadence-advancedheading h2,
.ms-section-title {
font-size: clamp(2rem, 4vw, 3rem) !important;
font-weight: 400 !important;
text-align: center;
margin-bottom: 1.5rem;
color: var(--ms-green-deep) !important;
letter-spacing: -0.02em;
}
/* Section H3 z klasą underline -- traktowany jak section heading */
.home h3.underline,
.home .wp-block-kadence-advancedheading h3.underline {
font-size: clamp(1.6rem, 2.8vw, 2.4rem);
font-weight: 400;
line-height: 1.2;
margin-bottom: 1.2rem;
}
/* === UTILITY: .ms-italic ===
Light italic Fraunces accent dla display copy.
Aplikacja: dodać klase do span/heading w panelu Kadence (Advanced -> Additional CSS Class). */
.ms-italic,
.ms-italic h1, .ms-italic h2, .ms-italic h3,
h1 .ms-italic, h2 .ms-italic, h3 .ms-italic {
font-family: var(--ms-font-display) !important;
font-style: italic !important;
font-weight: 300 !important;
color: var(--ms-green-mid) !important;
letter-spacing: -0.01em;
}
/* === UTILITY: .ms-eyebrow ===
Micro-header w Inter, uppercase, gold.
Aplikacja: dodac klase do bloku Kadence Advanced Heading (Additional CSS Class). */
.ms-eyebrow,
.ms-eyebrow h1, .ms-eyebrow h2, .ms-eyebrow h3 {
font-family: var(--ms-font-body) !important;
font-size: var(--ms-text-sm) !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ms-gold) !important;
}
/* === UTILITY: .ms-section-num ===
Editorial eyebrow z numeracja "No. 01" + gold linijka przed tekstem.
Aplikacja: No. 01 — Najnowsze okazy
Lub dodanie klasy do bloku Kadence Advanced Heading. */
.ms-section-num {
font-family: var(--ms-font-display);
font-style: italic;
font-size: 14px;
font-weight: 400;
color: var(--ms-gold);
letter-spacing: 0.08em;
margin-bottom: 16px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.ms-section-num::before {
content: "";
width: 24px;
height: 1px;
background: var(--ms-gold);
}
/* Reading flow paragraphs */
p {
line-height: 1.7;
}
/* ============================================================================
2. LINKS & SELECTION
============================================================================ */
::selection {
background: var(--ms-green-dark);
color: #fff;
}
a {
transition: color var(--ms-duration) var(--ms-ease);
}
.underline {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
text-decoration-color: var(--ms-gold);
}
/* ============================================================================
3. BUTTONS -- premium pill, slide-overlay animation, gold/ghost variants
============================================================================ */
.wp-block-button__link,
.kb-button,
.button:not(.add_to_cart_button):not(.single_add_to_cart_button),
.wc-block-components-button {
position: relative;
overflow: hidden;
font-family: var(--ms-font-body) !important;
border-radius: var(--ms-radius-pill) !important;
padding: 14px 32px !important;
font-weight: 500 !important;
font-size: var(--ms-text-sm) !important;
line-height: 1.4 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
transition: transform var(--ms-duration) var(--ms-ease), box-shadow var(--ms-duration) var(--ms-ease), opacity var(--ms-duration) var(--ms-ease) !important;
border: 1px solid var(--ms-green-deep) !important;
background: var(--ms-green-deep) !important;
color: var(--ms-bone) !important;
box-shadow: var(--ms-shadow-sm);
z-index: 0;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
box-sizing: border-box;
min-height: 48px;
text-decoration: none;
}
/* Disabled state -- darker but still in palette, not Kadence default gray */
.wp-block-button__link:disabled,
.wp-block-button__link[disabled],
.wp-block-button__link[aria-disabled="true"],
.kb-button:disabled,
.button[disabled],
.wc-block-components-button:disabled,
.wc-block-components-button[disabled] {
background: var(--ms-green-deep) !important;
color: var(--ms-bone) !important;
border-color: var(--ms-green-deep) !important;
opacity: 0.45;
cursor: not-allowed;
transform: none !important;
}
.wp-block-button__link:disabled:hover::before,
.wp-block-button__link[disabled]:hover::before {
transform: translateY(100%) !important; /* no slide on disabled */
}
/* WC Cart Block: button text wrapper -- some Gutenberg buttons wrap text in span */
.wc-block-components-button__text,
.wp-block-button__link span:not(.svg-iconset):not([class*="icon"]) {
line-height: inherit;
}
/* Slide-overlay -- green-mid wjeżdża z dołu na hover */
.wp-block-button__link::before,
.kb-button::before,
.button:not(.add_to_cart_button):not(.single_add_to_cart_button)::before {
content: "";
position: absolute;
inset: 0;
background: var(--ms-green-mid);
transform: translateY(100%);
transition: transform 0.4s var(--ms-ease);
z-index: -1;
}
.wp-block-button__link:hover::before,
.kb-button:hover::before,
.button:not(.add_to_cart_button):not(.single_add_to_cart_button):hover::before {
transform: translateY(0);
}
.wp-block-button__link:hover,
.kb-button:hover,
.button:not(.add_to_cart_button):not(.single_add_to_cart_button):hover {
transform: translateY(-2px);
box-shadow: var(--ms-shadow-md);
color: var(--ms-bone) !important;
border-color: var(--ms-green-mid) !important;
}
/* Outline variant (kb-btn-global-outline -- Kadence "About Us" button) */
.kb-button.kb-btn-global-outline {
background: transparent !important;
color: var(--ms-green-deep) !important;
border-color: var(--ms-green-deep) !important;
letter-spacing: 0.08em !important;
}
.kb-button.kb-btn-global-outline:hover {
color: var(--ms-bone) !important;
}
.kb-button.kb-btn-global-outline::before {
background: var(--ms-green-deep);
}
/* === VARIANT: .ms-btn-gold ===
Premium accent button -- bronze gold bg, dark green text.
Aplikacja: dodaj klase ms-btn-gold do bloku Kadence Button (Advanced -> Additional CSS Class). */
.kb-button.ms-btn-gold,
.wp-block-button__link.ms-btn-gold {
background: var(--ms-gold) !important;
border-color: var(--ms-gold) !important;
color: var(--ms-green-deep) !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
}
.kb-button.ms-btn-gold::before,
.wp-block-button__link.ms-btn-gold::before {
background: var(--ms-gold-soft);
}
.kb-button.ms-btn-gold:hover,
.wp-block-button__link.ms-btn-gold:hover {
color: var(--ms-green-deep) !important;
border-color: var(--ms-gold-soft) !important;
}
/* === VARIANT: .ms-btn-ghost ===
Underline link-style button (border-bottom only, no pill).
Aplikacja: dodaj klase ms-btn-ghost do bloku Kadence Button. */
.kb-button.ms-btn-ghost,
.wp-block-button__link.ms-btn-ghost {
background: transparent !important;
border: none !important;
border-bottom: 1px solid var(--ms-green-deep) !important;
border-radius: 0 !important;
color: var(--ms-green-deep) !important;
padding: 8px 0 !important;
box-shadow: none !important;
letter-spacing: 0.08em !important;
overflow: visible;
gap: 10px;
transition: gap 0.3s var(--ms-ease) !important;
}
.kb-button.ms-btn-ghost::before,
.wp-block-button__link.ms-btn-ghost::before {
display: none;
}
.kb-button.ms-btn-ghost:hover,
.wp-block-button__link.ms-btn-ghost:hover {
transform: none;
box-shadow: none !important;
gap: 16px;
color: var(--ms-green-deep) !important;
border-bottom-color: var(--ms-gold) !important;
}
/* ============================================================================
4. WOOCOMMERCE -- "Add to cart" buttons
============================================================================ */
.woocommerce a.add_to_cart_button .added_to_cart,
.woocommerce a.added_to_cart {
display: none !important;
}
.woocommerce a.add_to_cart_button,
.woocommerce button.single_add_to_cart_button {
position: relative;
overflow: hidden;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
font-family: var(--ms-font-body) !important;
font-weight: 600 !important;
font-size: var(--ms-text-sm) !important;
line-height: 1 !important;
letter-spacing: 0.1em !important;
text-indent: 0.1em !important; /* compensate trailing letter-spacing for true visual center */
text-transform: uppercase !important;
padding: 17px 32px 15px !important; /* slight asym to optically center uppercase glyph */
border-radius: var(--ms-radius-pill) !important;
transition: transform var(--ms-duration) var(--ms-ease), box-shadow var(--ms-duration) var(--ms-ease) !important;
background: var(--ms-green-deep) !important;
color: var(--ms-bone) !important;
border: 1px solid var(--ms-green-deep) !important;
box-shadow: var(--ms-shadow-sm);
box-sizing: border-box !important;
z-index: 0;
white-space: nowrap;
vertical-align: middle;
}
.woocommerce a.add_to_cart_button::before,
.woocommerce button.single_add_to_cart_button::before {
content: "";
position: absolute;
inset: 0;
background: var(--ms-green-mid);
transform: translateY(100%);
transition: transform 0.4s var(--ms-ease);
z-index: -1;
}
.woocommerce a.add_to_cart_button:hover::before,
.woocommerce button.single_add_to_cart_button:hover::before {
transform: translateY(0);
}
.woocommerce a.add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:hover {
transform: translateY(-2px);
box-shadow: var(--ms-shadow-md);
border-color: var(--ms-green-mid) !important;
color: var(--ms-bone) !important;
}
/* Loading spinner */
.woocommerce a.add_to_cart_button.loading {
color: transparent !important;
pointer-events: none;
}
.woocommerce a.add_to_cart_button.loading::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid #fff;
border-top-color: transparent;
border-radius: 50%;
animation: ms-spin 0.7s linear infinite;
}
@keyframes ms-spin {
to { transform: rotate(360deg); }
}
/* ============================================================================
5. WOOCOMMERCE -- product cards (editorial portrait-square)
============================================================================ */
.post-type-archive-product .product,
.wp-post-image,
.content-bg .product.entry.loop-entry,
.woocommerce-page .content-bg .product.entry.loop-entry,
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .entry-content-wrap {
border-radius: var(--ms-radius-xs);
}
.woocommerce ul.products li.product {
background: var(--ms-paper);
padding: 0 !important; /* image flush z krawedziami cardu, content area ma padding wewnatrz */
transition: transform 0.35s var(--ms-ease), box-shadow 0.35s var(--ms-ease), border-color 0.35s var(--ms-ease);
overflow: hidden;
border: 1px solid var(--ms-border); /* subtle anchor at rest */
border-radius: var(--ms-radius-sm);
box-shadow: 0 1px 3px rgba(15, 26, 22, 0.04); /* subtle elevation at rest */
/* Phase D.Mobile-fix v9 (2026-05-04): natural card height + line-clamp
na tytule daje consistent visual. Bez forced flex-grow zeby uniknac
duzych odstepow (klient zglosil "niepotrzebne tak duze odstepy"). */
}
.woocommerce ul.products li.product:hover {
/* 2026-06-30: usunieto transform: translateY(-6px) -- karta podnosila sie na hover
i PRZYCISK UCIEKAL spod kursora przy probie kliniecia (klient: "przesuwa sie").
Hover-cue zostaje: cien + zlota ramka (bez ruchu layoutu). */
box-shadow: var(--ms-shadow-md);
border-color: var(--ms-gold-soft);
}
/* Image wrap -- aspect-ratio 1:1, flush z krawedziami cardu (no padding parent) */
.woocommerce ul.products li.product a img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
height: auto;
display: block;
border-radius: 0; /* card juz ma rounded corners + overflow hidden */
transition: transform 0.6s var(--ms-ease);
}
.woocommerce ul.products li.product:hover a img {
transform: scale(1.05);
}
/* Phase D.Mobile-fix v11 (2026-05-04): grid align-items start -- cards
maja NATURAL height (nie stretched do row max). Eliminuje puste przestrzenie
pod buttonami w cards z krotkimi tytulami. Cards w rzedzie moga miec rozne
wysokosci ale visually clean (no white empty space). */
.woocommerce ul.products,
.woocommerce-page ul.products {
align-items: stretch !important; /* 2026-06-30: rowne rzedy. SAFE bo tresc znormalizowana (clamp tytulu L654 + ukryte oceny). Stretch BEZ tego = regresja "duze odstepy" z 2026-05-04. */
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
align-self: stretch !important;
height: auto !important;
}
/* Content area -- padding tylko wewnatrz, ponizej obrazu.
Title natural -- zaden line-clamp ani min-height.
Cards maja naturalne wysokosci, content plynie bez overlapow. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--ms-font-display) !important;
font-size: var(--ms-text-lg) !important;
font-weight: 400 !important;
color: var(--ms-green-deep) !important;
padding: 18px 18px 6px !important;
line-height: 1.25;
letter-spacing: -0.01em;
margin: 0 !important;
/* 2026-06-30: clamp realizowany na wewnetrznym (sekcja na koncu pliku).
h2 jest flex-itemem (rodzic .entry-content-wrap = flex) -> display:-webkit-box
na h2 jest blockifikowany do flow-root i clamp NIE dziala. Clamp na
(nie-flex-item) dziala poprawnie. NIE usuwac normalizacji -- warunek stretch (L641). */
overflow: hidden;
}
.woocommerce ul.products li.product .price {
font-family: var(--ms-font-display) !important;
font-size: var(--ms-text-xl) !important;
font-weight: 500 !important;
color: var(--ms-green-deep) !important;
padding: 0 18px !important;
/* margin natural -- bez auto top zeby nie tworzyc duzych odstepow.
Cards consistency osiagana przez line-clamp na tytule (ponizej). */
margin: 0 0 14px 0 !important;
letter-spacing: -0.01em;
}
/* === UTILITIES dla loop product (gdy meta beda dostepne w future) === */
.woocommerce ul.products li.product .ms-product-meta {
font-family: var(--ms-font-display);
font-style: italic;
font-size: var(--ms-text-xs);
color: var(--ms-muted);
letter-spacing: 0.04em;
margin: 0 4px 6px;
}
.woocommerce ul.products li.product .ms-product-latin {
font-family: var(--ms-font-body);
font-style: italic;
font-size: var(--ms-text-sm);
color: var(--ms-green-soft);
letter-spacing: 0.02em;
margin: 0 4px 8px;
}
/* === Shop archive layout fix ===
1. Hide .product-excerpt (long descriptions are for single product, NOT shop)
2. Override Kadence "woo-archive-action-on-hover" -- button always visible inline
3. Card body = flex column z buttonem na samym dole
============================================================================ */
/* 1. Hide pełen opis produktu z shop archive -- za dużo contentu */
.woocommerce ul.products li.product .product-excerpt,
.woocommerce ul.products.products li.product .product-excerpt {
display: none !important;
}
/* 2. Wymus statyczny inline button (override Kadence action-on-hover) */
.woocommerce ul.products.woo-archive-action-on-hover li.product .product-action-wrap,
.woocommerce ul.products li.product .product-action-wrap {
position: relative !important;
bottom: auto !important;
top: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
height: auto !important;
width: 100% !important;
overflow: visible !important;
margin: auto 0 0 0 !important; /* 2026-06-30: margin-top:auto = przycisk na DOL flex-column karty (rowne CTA). W non-flex auto=0 (bez efektu). Bylo margin:0 -- zerowalo nasz margin-top:auto z nizsza specyficznoscia. */
padding: 0 18px 0 18px !important; /* 2026-06-30: bottom 18->0 -- .entry-content-wrap ma juz padding-bottom 24px; podwojny dawal 43px luki pod CTA i rozjazd vs karty okazow (19px). */
background: transparent !important;
display: block !important;
box-sizing: border-box;
}
/* Plus standardowy WC related products bez wrappera Kadence -- direct add_to_cart_button.
Margin auto top + padding bottom dla card flow (bez .product-action-wrap). */
.related.products li.product > .button.add_to_cart_button,
.upsells.products li.product > .button.add_to_cart_button,
.cross-sells li.product > .button.add_to_cart_button {
margin: 0 18px 18px 18px !important;
width: calc(100% - 36px) !important;
}
.woocommerce ul.products li.product .product-action-wrap .button.add_to_cart_button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.related.products .button.add_to_cart_button,
.upsells.products .button.add_to_cart_button,
.cross-sells .button.add_to_cart_button {
position: relative !important;
transform: none !important;
box-sizing: border-box !important;
width: 100%;
max-width: 100%;
/* Mniejszy padding niz single product (32px sides) bo card width ~250-280px */
padding: 13px 16px !important;
/* Mniejszy font + tighter letter-spacing zeby "DODAJ DO KOSZYKA" sie zmiescilo */
font-size: 0.8125rem !important; /* 13px */
letter-spacing: 0.06em !important;
text-indent: 0 !important; /* override single product 0.1em text-indent */
text-align: center;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 6px;
}
/* Hide spinner + check SVG icons (only arrow should show in idle state) */
.woocommerce ul.products li.product .button.add_to_cart_button .kadence-spinner-svg,
.woocommerce ul.products li.product .button.add_to_cart_button .kadence-check-svg {
display: none !important;
}
.woocommerce ul.products li.product .button.add_to_cart_button.loading .kadence-arrow-right-alt-svg {
display: none !important;
}
.woocommerce ul.products li.product .button.add_to_cart_button.loading .kadence-spinner-svg,
.woocommerce ul.products li.product .button.add_to_cart_button.added .kadence-check-svg {
display: inline-block !important;
}
.woocommerce ul.products li.product:hover .product-action-wrap .button.add_to_cart_button {
transform: none !important; /* 2026-06-30: bez podskoku -- przycisk nie ucieka spod kursora */
}
/* 3. Card body flex column -- button na samym dole */
.woocommerce ul.products li.product .entry-content-wrap,
.woocommerce ul.products li.product > .product-details {
display: flex !important;
flex-direction: column;
height: 100%;
}
.woocommerce ul.products li.product .price {
margin-bottom: 4px !important;
}
.woocommerce ul.products li.product .product-action-wrap {
margin-top: auto !important; /* push button to card bottom in flex column */
}
/* SALE badge -- repositioned + z-index, muted bronze gold */
.woocommerce span.onsale {
background: var(--ms-gold) !important;
color: var(--ms-bone) !important;
border-radius: var(--ms-radius-pill) !important;
padding: 6px 14px !important;
font-family: var(--ms-font-body) !important;
font-weight: 700 !important;
font-size: var(--ms-text-xs) !important;
letter-spacing: 0.08em;
text-transform: uppercase;
min-height: auto !important;
min-width: auto !important;
line-height: 1 !important;
top: 22px !important;
right: 22px !important;
left: auto !important;
z-index: 2;
box-shadow: var(--ms-shadow-sm);
}
/* ============================================================================
6. WOOCOMMERCE -- category tiles (slider grid)
============================================================================ */
.woo-category-slider-grid .wcsg-item .button,
.wcsg-item > a.button,
.wcsg-cat-button,
.sp-wcsp-shop-now {
display: none !important;
}
.woo-category-slider-grid .wcsg-item,
.sp-wcsp-cat-item,
.wc-block-product-categories-list-item {
position: relative;
border-radius: var(--ms-radius-xs);
overflow: hidden;
transition: transform 0.35s var(--ms-ease), box-shadow 0.35s var(--ms-ease);
}
.sp-wcsp-cat-item:hover {
transform: translateY(-4px);
box-shadow: var(--ms-shadow-md);
}
/* Photo darkening + saturation boost (v2 prototype style) */
.sp-wcsp-cat-item img {
border-radius: var(--ms-radius-xs);
transition: transform 1s var(--ms-ease);
filter: brightness(0.85) saturate(1.1);
}
.sp-wcsp-cat-item:hover img {
transform: scale(1.06);
filter: brightness(0.92) saturate(1.15);
}
/* Dark gradient overlay top-down (intensifies on hover) */
.sp-wcsp-cat-item::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(15, 26, 22, 0.85) 0%, rgba(15, 26, 22, 0.2) 50%, rgba(15, 26, 22, 0.05) 100%);
transition: background 0.4s var(--ms-ease);
pointer-events: none;
z-index: 1;
}
.sp-wcsp-cat-item:hover::before {
background: linear-gradient(to top, rgba(15, 26, 22, 0.9) 0%, rgba(15, 26, 22, 0.4) 60%, rgba(15, 26, 22, 0.15) 100%);
}
/* Category name styling -- editorial light Fraunces */
.sp-wcsp-cat-item .sp-wcsp-cat-name {
position: relative;
z-index: 2;
}
.sp-wcsp-cat-item .sp-wcsp-cat-name a {
font-family: var(--ms-font-display) !important;
font-size: var(--ms-text-2xl) !important;
font-weight: 400 !important;
color: var(--ms-bone) !important;
letter-spacing: -0.01em;
text-transform: none;
line-height: 1.05;
}
/* Hover overlay "Zobacz kolekcje" -- gold-soft pill */
.sp-wcsp-cat-item::after {
content: "Zobacz kolekcje";
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(8px);
opacity: 0;
background: rgba(250, 247, 239, 0.95);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--ms-green-deep);
padding: 10px 22px;
border-radius: var(--ms-radius-pill);
font-family: var(--ms-font-body);
font-weight: 600;
font-size: var(--ms-text-sm);
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
transition: all var(--ms-duration) var(--ms-ease);
pointer-events: none;
box-shadow: var(--ms-shadow-sm);
z-index: 3;
}
.sp-wcsp-cat-item:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Mobile/touch -- pokaz overlay zawsze, dyskretnie */
@media (hover: none), (max-width: 768px) {
.sp-wcsp-cat-item::after {
opacity: 0.92;
transform: translateX(-50%) translateY(0);
bottom: 16px;
padding: 8px 16px;
font-size: var(--ms-text-xs);
background: rgba(15, 26, 22, 0.85);
color: var(--ms-bone);
}
}
/* ============================================================================
7. WOOCOMMERCE -- single product page
============================================================================ */
/* Reduce top padding on Kadence default layout for shop/single product/archive
-- Kadence dodaje grube padding-top na #inner-wrap + content-container.
Klient zglosil ze "na gorze jest tak golo" -- to wlasnie ten padding. */
.woocommerce-page #inner-wrap.wrap,
.single-product #inner-wrap.wrap,
.post-type-archive-product #inner-wrap.wrap,
.tax-product_cat #inner-wrap.wrap {
padding-top: 24px;
}
/* Breadcrumbs area -- Kadence ma duzy margin-top, redukujemy */
.single-product .product-title.product-above,
.woocommerce-page .product-title.product-above {
margin-top: 0;
padding-top: 0;
margin-bottom: 24px;
}
/* WC notices wrapper -- empty na produktach (no notices) zajmuje space */
.woocommerce-notices-wrapper:empty {
display: none;
}
.single-product .summary {
padding: 8px 0;
}
/* Real photo badge -- single product version (banner przed title) */
.ms-real-photo-badge {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
margin: 0 0 20px 0;
background: linear-gradient(135deg, var(--ms-sand) 0%, var(--ms-cream) 100%);
border: 1px solid var(--ms-border);
border-left: 3px solid var(--ms-gold);
border-radius: var(--ms-radius-sm);
font-family: var(--ms-font-body);
font-size: 0.875rem;
line-height: 1.45;
color: var(--ms-text);
box-shadow: var(--ms-shadow-sm);
}
.ms-real-photo-badge svg {
flex-shrink: 0;
color: var(--ms-gold);
margin-top: 1px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.ms-real-photo-badge strong {
color: var(--ms-green-dark);
font-weight: 600;
letter-spacing: 0.01em;
}
.ms-real-photo-badge-single {
/* Wider variant na single product */
max-width: 100%;
}
/* Real photo badge -- compact card overlay (shop archive + related + upsells) */
.ms-real-photo-badge-card {
position: absolute;
top: 12px;
left: 12px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
background: rgba(15, 26, 22, 0.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--ms-cream);
font-family: var(--ms-font-body);
font-size: 0.6875rem; /* 11px */
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1;
border-radius: var(--ms-radius-pill);
pointer-events: none; /* nie blokuje clicku na card link */
box-shadow: 0 2px 8px rgba(15, 26, 22, 0.15);
}
.ms-real-photo-badge-card svg {
flex-shrink: 0;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
color: var(--ms-gold-soft);
}
/* Wymus relative na product card zeby badge byl absolute pozycjonowany */
.woocommerce ul.products li.product {
position: relative;
}
.single-product .product_title {
font-family: var(--ms-font-display) !important;
font-size: clamp(2rem, 3.5vw, 2.8rem) !important;
font-weight: 700 !important;
line-height: 1.1 !important;
margin-bottom: 12px !important;
color: var(--ms-green-dark);
}
.single-product .summary .price {
font-family: var(--ms-font-body) !important;
font-size: var(--ms-text-2xl) !important;
font-weight: 700 !important;
color: var(--ms-green-dark) !important;
margin-bottom: 4px !important;
}
/* VAT note pod cena na single product (Phase D.VAT 2026-05-04, extended 2026-05-04) */
.single-product .summary .ms-vat-note {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0 0 24px 0 !important;
font-family: var(--ms-font-body);
}
.single-product .summary .ms-vat-note .ms-vat-note-primary {
font-size: 0.8125rem; /* 13px */
font-weight: 500;
color: var(--ms-text);
letter-spacing: 0.01em;
}
.single-product .summary .ms-vat-note .ms-vat-note-secondary {
font-size: 0.75rem; /* 12px */
font-weight: 400;
color: var(--ms-muted);
letter-spacing: 0.01em;
line-height: 1.45;
}
/* Trust banner na cart + checkout: faktura VAT/paragon */
.ms-cart-invoice-note {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
margin: 16px 0;
background: var(--ms-sand);
border: 1px solid var(--ms-border);
border-left: 3px solid var(--ms-gold);
border-radius: var(--ms-radius-sm);
font-family: var(--ms-font-body);
font-size: 0.8125rem;
line-height: 1.45;
color: var(--ms-text);
}
.ms-cart-invoice-note svg {
flex-shrink: 0;
color: var(--ms-gold);
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.ms-cart-invoice-note strong {
font-weight: 600;
color: var(--ms-green-dark);
}
.single-product .woocommerce-product-details__short-description {
padding: 24px 0;
border-top: 1px solid var(--ms-border);
border-bottom: 1px solid var(--ms-border);
margin-bottom: 28px;
}
.single-product .woocommerce-product-details__short-description p,
.single-product .woocommerce-Tabs-panel p {
line-height: 1.75;
font-size: var(--ms-text-base);
color: var(--ms-text);
}
.single-product .woocommerce-product-details__short-description strong {
display: inline-block;
color: var(--ms-green-dark);
font-weight: 700;
margin-top: 10px;
}
/* Important note (italic) -- styled as alert callout */
.single-product .woocommerce-product-details__short-description em {
display: block;
background: var(--ms-sand);
padding: 14px 18px;
border-radius: var(--ms-radius-sm);
border-left: 3px solid var(--ms-gold);
margin: 18px 0;
font-style: normal;
font-size: var(--ms-text-sm);
color: var(--ms-text);
}
/* Gallery */
.single-product .woocommerce-product-gallery__image img {
border-radius: var(--ms-radius);
}
/* ============================================================================
8. WOOCOMMERCE -- product page tabs
============================================================================ */
.single-product div.product .woocommerce-tabs ul.tabs {
border-bottom: 1px solid var(--ms-border);
padding-left: 0;
margin-top: 48px;
}
.single-product div.product .woocommerce-tabs ul.tabs li {
border: none;
font-family: var(--ms-font-display);
font-size: var(--ms-text-lg);
line-height: 1.4;
background-color: transparent;
transition: color var(--ms-duration) var(--ms-ease);
padding: 12px 24px 12px 0;
}
.single-product div.product .woocommerce-tabs ul.tabs li:hover {
color: var(--ms-green-mid);
}
.single-product div.product .woocommerce-tabs ul.tabs li.active {
border-bottom: 3px solid var(--ms-gold);
margin: 0;
color: var(--ms-green-dark);
font-weight: 600;
}
/* ============================================================================
9. SINGLE PRODUCT -- form.cart layout (quantity + add-to-cart row)
============================================================================ */
.single-product form.cart {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 24px;
}
.single-product form.cart .quantity {
margin: 0 !important;
}
.single-product form.cart .quantity input.qty {
width: 72px !important;
min-height: 46px !important;
height: 46px !important;
padding: 0 8px !important;
text-align: center;
font-family: var(--ms-font-body) !important;
font-size: var(--ms-text-base) !important;
font-weight: 600 !important;
line-height: 1 !important;
border: 1px solid var(--ms-border) !important;
border-radius: var(--ms-radius-sm) !important;
background: var(--ms-paper) !important;
color: var(--ms-text) !important;
box-sizing: border-box !important;
-moz-appearance: textfield;
}
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.single-product form.cart button.single_add_to_cart_button {
flex: 0 1 auto;
}
/* Mobile: sticky CTA bar */
@media (max-width: 768px) {
.single-product form.cart {
position: sticky;
bottom: 0;
background: #fff;
padding: 14px 16px;
margin: 24px -16px 0;
box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
border-top: 1px solid var(--ms-border);
z-index: 20;
}
.single-product form.cart button.single_add_to_cart_button {
flex: 1 1 auto;
}
}
/* ============================================================================
10. HEADER / NAVIGATION
============================================================================ */
.site-header,
#masthead {
transition: box-shadow 0.3s ease, background 0.3s ease;
}
.site-header.site-header-sticky,
.site-header-sticky-active,
.item-is-fixed {
box-shadow: 0 2px 24px rgba(15, 26, 22, 0.06);
background: rgba(247, 243, 234, 0.92) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
/* Globalny constraint na Kadence default logo (Shop, single product, archive).
Kadence pakuje logo w `.site-branding` lub `.site-logo` -- constrain BOTH parent
container i child img zeby uzyskac stable size.
Plus high-specificity selectory zeby wygrac kaskade z Kadence inline/dynamic CSS. */
.site-header .custom-logo-link,
.site-header .site-logo,
.site-header .site-branding,
.site-header .header-titles,
.site-header-row .site-logo,
.site-header-row .site-branding {
line-height: 0;
max-height: 120px !important;
overflow: hidden !important;
}
/* Logo IMG: max-height + auto width zachowuje aspect ratio.
`object-fit: contain` zapobiega rozciaganiu jak parent ma fixed height. */
.site-header .custom-logo-link img,
.site-header .site-logo img,
.site-header .custom-logo,
.site-header img.custom-logo,
.site-branding img,
.site-header [class*="logo"] img,
.kadence-header-row img.custom-logo,
.site-header-row img.custom-logo,
img.custom-logo {
max-height: 120px !important;
height: auto !important;
width: auto !important;
max-width: 240px !important;
object-fit: contain !important;
object-position: left center !important;
}
@media (max-width: 768px) {
.site-header .custom-logo-link img,
.site-header .site-logo img,
.site-header .custom-logo {
max-height: 80px !important;
max-width: 180px !important;
}
}
/* Menu styling */
.site-header .header-navigation .menu-item a {
position: relative;
font-family: var(--ms-font-body) !important;
font-size: var(--ms-text-sm) !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
transition: color var(--ms-duration) var(--ms-ease);
}
.site-header .header-navigation .menu-item a:hover {
color: var(--ms-green-dark) !important;
}
/* Underline accent for menu -- text-decoration zamiast ::after (respektuje text-only width, nie cala z padding) */
.site-header .header-navigation .menu-item > a {
text-decoration: none;
text-underline-offset: 6px;
text-decoration-thickness: 1px;
text-decoration-color: transparent;
transition: text-decoration-color 0.25s var(--ms-ease);
}
.site-header .header-navigation .menu-item:hover > a,
.site-header .header-navigation .menu-item.current-menu-item > a {
text-decoration: underline;
text-decoration-color: var(--ms-gold);
text-decoration-thickness: 1px;
text-underline-offset: 6px;
}
/* Wyzeruj jakies pseudo-element underlines (Kadence/inne moga je dodawac) */
.site-header .header-navigation .menu-item > a::after {
content: none !important;
}
/* Cart counter */
.header-cart-total,
.header-cart-wrap .kadence-header-cart-total {
background: var(--ms-gold) !important;
color: #fff !important;
font-weight: 700;
font-family: var(--ms-font-body);
}
/* ============================================================================
11. FOOTER -- dark editorial (--ms-ink bg + bone text + gold-soft accents)
============================================================================ */
.site-footer,
#colophon {
background: var(--ms-ink) !important;
color: var(--ms-bone) !important;
padding-top: 96px !important;
padding-bottom: 40px !important;
border-top: none;
position: relative;
z-index: 2;
}
/* Footer headings -- Fraunces italic, gold-soft, editorial */
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer .widget-title {
font-family: var(--ms-font-display) !important;
font-style: italic !important;
text-transform: none !important;
letter-spacing: 0.04em !important;
font-size: var(--ms-text-base) !important;
margin-bottom: 24px !important;
color: var(--ms-gold-soft) !important;
font-weight: 400 !important;
}
/* Brand block (semantyczny selektor zamiast .footer-widget3) */
.site-footer .ms-brand,
.site-footer .widget_text h4,
.site-footer h4.has-large-font-size {
font-family: var(--ms-font-display) !important;
font-style: italic !important;
text-transform: none !important;
letter-spacing: -0.02em !important;
font-size: var(--ms-text-3xl) !important;
color: var(--ms-cream) !important;
font-weight: 400 !important;
}
.site-footer p,
.site-footer span,
.site-footer .textwidget {
color: rgba(250, 247, 239, 0.65) !important;
font-size: var(--ms-text-sm);
line-height: 1.7;
}
.site-footer a,
.site-footer li a {
color: rgba(250, 247, 239, 0.65) !important;
transition: color 0.2s var(--ms-ease);
text-decoration: none;
font-size: var(--ms-text-sm);
}
.site-footer a:hover {
opacity: 1;
color: var(--ms-gold-soft) !important;
}
.site-footer ul li {
margin-bottom: 12px;
line-height: 1.5;
list-style: none;
}
.site-footer ul {
list-style: none;
padding-left: 0;
}
/* Bottom bar (copyright) */
.site-bottom-footer-wrap,
.site-info {
border-top: 1px solid rgba(250, 247, 239, 0.1);
margin-top: 60px;
padding-top: 28px;
font-size: var(--ms-text-xs);
color: rgba(250, 247, 239, 0.4) !important;
letter-spacing: 0.04em;
}
.site-bottom-footer-wrap a,
.site-info a {
color: rgba(250, 247, 239, 0.4) !important;
}
.site-bottom-footer-wrap a:hover,
.site-info a:hover {
color: var(--ms-gold-soft) !important;
}
/* === UTILITY: .ms-footer-social ===
Round border-only icon links (40x40), gold hover.
Aplikacja: */
.ms-footer-social {
display: flex;
gap: 16px;
margin-top: 24px;
}
.ms-footer-social a {
width: 40px;
height: 40px;
border: 1px solid rgba(250, 247, 239, 0.2);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s var(--ms-ease);
color: rgba(250, 247, 239, 0.7) !important;
}
.ms-footer-social a:hover {
background: var(--ms-gold);
border-color: var(--ms-gold);
color: var(--ms-green-deep) !important;
transform: translateY(-2px);
}
/* === UTILITY: .ms-payment-badge ===
Bordered pill dla logo platnosci (BLIK, Przelewy24, InPost, DPD).
Aplikacja: BLIK */
.ms-payment-badge {
display: inline-block;
padding: 4px 10px;
border: 1px solid rgba(250, 247, 239, 0.2);
border-radius: var(--ms-radius-xs);
font-size: 10px;
letter-spacing: 0.08em;
color: rgba(250, 247, 239, 0.6);
margin-right: 8px;
text-transform: uppercase;
}
/* ============================================================================
12. FORMS
============================================================================ */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.contact-form input,
.contact-form textarea {
font-family: var(--ms-font-body) !important;
border-radius: var(--ms-radius-sm) !important;
padding: 12px 16px !important;
border: 1px solid var(--ms-border) !important;
transition: border-color 0.2s, box-shadow 0.2s;
font-size: var(--ms-text-base) !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus {
border-color: var(--ms-green-dark) !important;
box-shadow: 0 0 0 3px rgba(41, 58, 53, 0.1) !important;
outline: none !important;
}
/* ============================================================================
13. ACCESSIBILITY & UX POLISH
============================================================================ */
html {
scroll-behavior: smooth;
}
/* Focus rings -- visible only via keyboard */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--ms-gold);
outline-offset: 3px;
border-radius: var(--ms-radius-xs);
}
/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Skip-to-content link -- WCAG 2.4.1 Bypass Blocks (Level A) + EAA compliance.
Visually hidden until keyboard focus, slides in from top-left.
Z-index high to overlay sticky header. */
.ms-skip-link {
position: absolute;
top: -100px;
left: 16px;
z-index: 100000;
padding: 12px 20px;
background: var(--ms-green-dark);
color: var(--ms-cream);
font-family: var(--ms-font-body);
font-size: 0.9375rem;
font-weight: 500;
text-decoration: none;
border-radius: var(--ms-radius-sm);
box-shadow: var(--ms-shadow-md);
transition: top 0.2s ease;
}
.ms-skip-link:focus,
.ms-skip-link:focus-visible {
top: 16px;
outline: 3px solid var(--ms-gold);
outline-offset: 2px;
}
/* aria-current="page" -- subtle visual indicator dla aktywnego nav link
(uzupelnia background change z .current-menu-item w sekcji nav). */
[aria-current="page"] {
font-weight: 500;
}
/* ============================================================================
14. CART & CHECKOUT
============================================================================ */
.woocommerce-cart table.cart,
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table {
border-radius: var(--ms-radius-sm);
overflow: hidden;
}
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
background: var(--ms-cream);
padding: 28px;
border-radius: var(--ms-radius);
border: 1px solid var(--ms-border);
}
/* ============================================================================
WC NOTICES (success / info / error / undo) -- editorial styling
Phase D.Polish-fix (2026-05-04): klient zglosil "Cofnij? Usunieto: ..."
notice byl bez stylingu. Pelny re-skin wszystkich WC notices.
============================================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
border-radius: var(--ms-radius-sm) !important;
font-family: var(--ms-font-body) !important;
font-size: 15px !important;
padding: 18px 24px !important;
margin: 0 0 28px !important;
line-height: 1.55 !important;
list-style: none !important;
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 12px !important;
box-shadow: 0 2px 8px rgba(15, 26, 22, 0.04) !important;
}
/* Success / message (np. po add-to-cart, po add-to-cart undo) */
.woocommerce-message {
background: linear-gradient(135deg, var(--ms-sand) 0%, #f5efe1 100%) !important;
border: 1px solid var(--ms-gold-soft) !important;
border-left: 4px solid var(--ms-gold) !important;
color: var(--ms-green-deep) !important;
border-top-color: var(--ms-gold-soft) !important;
}
/* Info (cart empty, shipping calculator etc.) */
.woocommerce-info {
background: var(--ms-paper) !important;
border: 1px solid var(--ms-border) !important;
border-left: 4px solid var(--ms-green-mid) !important;
color: var(--ms-text) !important;
border-top-color: var(--ms-green-mid) !important;
}
/* Error */
.woocommerce-error {
background: #fdf3f2 !important;
border: 1px solid #f5c6c4 !important;
border-left: 4px solid #c0392b !important;
color: #6b1e16 !important;
border-top-color: #c0392b !important;
}
/* Buttons inside notices ("Powrot do koszyka", "Wyswietl koszyk", "Cofnij?") */
.woocommerce-message .button,
.woocommerce-message a.button,
.woocommerce-message a.restore-item,
.woocommerce-info .button,
.woocommerce-info a.button {
background: var(--ms-green-deep) !important;
color: var(--ms-bone) !important;
padding: 10px 20px !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
border-radius: 999px !important;
text-decoration: none !important;
border: none !important;
transition: background 0.2s var(--ms-ease), transform 0.2s var(--ms-ease) !important;
margin-left: auto !important;
flex-shrink: 0 !important;
}
.woocommerce-message .button:hover,
.woocommerce-message a.button:hover,
.woocommerce-message a.restore-item:hover,
.woocommerce-info .button:hover {
background: var(--ms-green-mid) !important;
transform: translateY(-1px);
color: var(--ms-bone) !important;
}
/* Plain text links inside notices (npsystem messages) */
.woocommerce-message a:not(.button):not(.restore-item),
.woocommerce-info a:not(.button) {
color: var(--ms-green-deep) !important;
text-decoration: underline !important;
text-decoration-color: var(--ms-gold) !important;
text-underline-offset: 3px !important;
}
.woocommerce-message a:not(.button):not(.restore-item):hover,
.woocommerce-info a:not(.button):hover {
color: var(--ms-gold) !important;
}
/* "Cofnij?" undo link -- specjalnie jako secondary text link, nie button */
.woocommerce-message > a.restore-item {
background: transparent !important;
color: var(--ms-green-deep) !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
padding: 6px 12px !important;
text-decoration: underline !important;
text-decoration-color: var(--ms-gold) !important;
text-underline-offset: 3px !important;
border: 1px solid transparent !important;
}
.woocommerce-message > a.restore-item:hover {
background: rgba(184, 147, 90, 0.08) !important;
color: var(--ms-gold) !important;
transform: none;
}
/* Mobile: stack notice items pionowo */
@media (max-width: 640px) {
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
flex-direction: column !important;
align-items: flex-start !important;
padding: 14px 18px !important;
font-size: 14px !important;
}
.woocommerce-message .button,
.woocommerce-message a.button,
.woocommerce-message a.restore-item,
.woocommerce-info .button {
margin-left: 0 !important;
align-self: flex-start !important;
}
}
/* ============================================================================
15. PAGINATION & SORTING (shop)
============================================================================ */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
border-radius: 50% !important;
width: 42px;
height: 42px;
display: flex !important;
align-items: center;
justify-content: center;
transition: all var(--ms-duration) var(--ms-ease);
font-family: var(--ms-font-body);
font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
background: var(--ms-green-dark) !important;
color: #fff !important;
}
.woocommerce .woocommerce-ordering select {
font-family: var(--ms-font-body) !important;
border-radius: var(--ms-radius-pill) !important;
padding: 10px 22px !important;
border: 1px solid var(--ms-border) !important;
background: #fff;
cursor: pointer;
font-weight: 500;
}
/* ============================================================================
16. SCROLL-TO-TOP button
============================================================================ */
#kt-scroll-up,
#kt-scroll-up-reader {
border-radius: 50% !important;
background: var(--ms-green-dark) !important;
color: #fff !important;
border: 1px solid var(--ms-green-dark) !important;
box-shadow: var(--ms-shadow-md) !important;
transition: all var(--ms-duration) var(--ms-ease) !important;
}
#kt-scroll-up:hover,
#kt-scroll-up-reader:hover {
background: var(--ms-gold) !important;
border-color: var(--ms-gold) !important;
transform: translateY(-3px);
}
/* ============================================================================
17. BODY GRAIN TEXTURE (C1)
Subtelny noise overlay -- daje stronie ciepla matowa fakture papieru.
Opacity 0.18 (kompromis: czujesz teksture, nie irytuje).
============================================================================ */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.18;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Wszystkie sekcje powyzej grain (z-index 2+) */
.site-header,
#masthead,
main,
.site-content,
.site-footer,
#colophon {
position: relative;
z-index: 2;
}
/* ============================================================================
18. PREP CLASSES dla Phase C2 (utility classes do wykorzystania w partials)
Style gotowe -- elementy HTML beda dodane w Phase C2 (custom template).
============================================================================ */
/* === .ms-top-bar ===
Announcement bar nad navem ("Darmowa wysylka od 300 zl"). */
.ms-top-bar {
background: var(--ms-green-deep);
color: var(--ms-bone);
padding: 10px 24px;
text-align: center;
font-family: var(--ms-font-body);
font-size: var(--ms-text-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
position: relative;
z-index: 10;
}
.ms-top-bar strong {
color: var(--ms-gold-soft);
font-weight: 500;
margin: 0 6px;
}
/* === .ms-trust-bar ===
Phase D.Trust.RealPhoto.Home (2026-05-16): rozszerzona do 5 items
(Real photo + Paszport UE + Bezposrednio od hodowcow + Aklimatyzacja + Pakowanie).
Real photo jako 1. signal = #1 USP konkurencyjny. */
.ms-trust-bar {
background: var(--ms-green-deep);
color: var(--ms-bone);
padding: 28px 48px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 32px;
position: relative;
z-index: 3;
}
.ms-trust-item {
display: flex;
align-items: center;
gap: 14px;
font-size: var(--ms-text-sm);
letter-spacing: 0.02em;
opacity: 0.92;
}
/* Highlight first item (Real photo) jako #1 USP -- subtle gold accent */
.ms-trust-item:first-child .ms-trust-icon {
color: var(--ms-gold);
}
.ms-trust-item:first-child strong {
color: var(--ms-gold-soft);
}
.ms-trust-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ms-gold-soft);
}
.ms-trust-item strong {
display: block;
font-weight: 600;
color: var(--ms-cream);
margin-bottom: 2px;
}
.ms-trust-item span {
font-size: var(--ms-text-xs);
opacity: 0.7;
line-height: 1.4;
}
@media (max-width: 1280px) {
.ms-trust-bar { grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 28px 40px; }
}
@media (max-width: 1024px) {
.ms-trust-bar { grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 28px 32px; }
}
@media (max-width: 640px) {
.ms-trust-bar { grid-template-columns: 1fr; padding: 24px; gap: 16px; }
}
/* ============================================================================
MOBILE FIXES (Phase D.Mobile-fix 2026-05-04)
PageSpeed audit + klient feedback (Samsung Galaxy S 360px viewport):
- "DO KOSZYKA" button text clipped (padding 32px za duzy w 2-col grid)
- Tytul produktu "Rhaphidophora 'Gold Rush'" obcinany (font-size 18px za duzy)
- Logo nakladal na 1 linie page heading
- 2-col shop grid za ciasny ponizej 400px
============================================================================ */
@media (max-width: 640px) {
/* Add to cart button mobile fix v4 (2026-05-04):
Root cause v3: parent .product-action-wrap nie expand'owalo, plus
overflow: hidden z base rule clipowal text gdy szerszy niz button.
Fixy v4:
1. .product-action-wrap force display: flex + width 100% z padding
2. Button: width 100% (parent caly expand), display: flex, overflow visible
3. Hide Kadence SVG icon (zajmuje miejsce)
4. letter-spacing: 0, padding kompaktowy */
/* Force parent wrap do full width + flex.
Padding zmniejszony do 0 14px 14px -> 0 8px 14px zeby button mial wiecej miejsca. */
.woocommerce ul.products li.product .product-action-wrap,
.product-action-wrap {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
padding: 0 8px 14px !important; /* mniej side padding na mobile */
margin: 0 !important;
box-sizing: border-box !important;
}
/* Button -- 100% szerokosc parent.
FIX (DevTools data: scrollWidth 108 vs clientWidth 91 = 17px overflow):
- text-transform: none -> "Do koszyka" mixed case (~17% narrower than uppercase)
- padding: 0 horizontal -> wiecej miejsca dla text
- font: 11px fixed (clamp powodowal niespojnosci) */
.woocommerce a.add_to_cart_button,
.woocommerce button.single_add_to_cart_button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 12px 4px !important; /* minimum horizontal padding */
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-indent: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
gap: 4px !important;
text-align: center !important;
overflow: hidden !important;
white-space: nowrap !important;
box-sizing: border-box !important;
line-height: 1.2 !important;
text-transform: none !important; /* "Do koszyka" lowercase ~17% narrower than DO KOSZYKA */
}
/* Hide Kadence SVG arrow icon, .kadence-svg-iconset wrapper, ALL svg w button */
.woocommerce a.add_to_cart_button > *:not(:first-child),
.woocommerce a.add_to_cart_button .kadence-svg-iconset,
.woocommerce a.add_to_cart_button svg {
display: none !important;
}
/* Hide slide-overlay ::before na mobile -- bez hover animacji na touch,
plus pokazywal sie jako pusty zielony prostokat pod buttonem (bug v4). */
.woocommerce a.add_to_cart_button::before,
.woocommerce button.single_add_to_cart_button::before,
.woocommerce a.add_to_cart_button::after,
.woocommerce button.single_add_to_cart_button::after {
display: none !important;
content: none !important;
}
/* Single product page -- normalna szerokosc, dzialaja inne reguly */
.woocommerce.single-product button.single_add_to_cart_button {
width: auto !important;
margin: 0 !important;
padding: 16px 32px !important;
font-size: 13px !important;
letter-spacing: 0.08em !important;
gap: 0 !important;
}
/* Single product nie potrzebuje arrow ikony tez */
.woocommerce.single-product .single_add_to_cart_button svg {
display: none !important;
}
/* Product title fluid w cards -- chronimy przed obcieciem dla "Rhaphidophora 'Gold Rush'" */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: clamp(15px, 4vw, 18px) !important;
padding: 14px 14px 4px !important;
line-height: 1.2;
min-height: calc(15px * 1.2 * 2); /* floor 2-line box (clamp dziedziczy z desktop) -- bez over-rezerwy na telefonie */
}
.woocommerce ul.products li.product .price {
font-size: clamp(17px, 4.5vw, 22px) !important;
padding: 0 14px !important;
margin-bottom: 10px !important;
}
/* Page heading "Wyswietlanie wszystkich wynikow" -- top margin tak zeby logo nie nakladal */
.woocommerce-result-count,
.woocommerce-products-header,
.page-title,
.term-description {
margin-top: 32px !important; /* dodatkowy oddech na logo */
}
}
/* === Shop / category archive hero (Kadence row layout w page id 59) ===
Struktura HTML:
Kolekcjonerska kolekcja ← eyebrow
Sklep
← heading
Klient zglosil:
1. Inny bg image niz desktop (Kadence Customizer mobile-specific)
2. Pionowo zbyt duzo pustego miejsca (Kadence padding 180px+100px) */
/* Override mobile padding + force same bg image jak desktop. Selektor specyfczny
`.kb-row-layout-id59_b99995-9b` celuje konkretnie shop page hero (id 59). */
@media (max-width: 767px) {
/* Reduce inner padding (Kadence default 180+100 = 280px wasted) */
.kb-row-layout-id59_b99995-9b > .kt-row-column-wrap {
padding-top: 48px !important;
padding-bottom: 48px !important;
}
/* Force desktop bg image na mobile -- klient mial inny obrazek z Kadence Starter
(corinne-kutz-unsplash) zamiast monstery sklep image. */
.kb-row-layout-wrap.kb-row-layout-id59_b99995-9b {
background-image: url('https://monsterarium.pl/wp-content/uploads/2026/04/monsterarium-monstery-kolekcjonerskie-sklep-z-roslinami.jpeg') !important;
background-position: center center !important;
background-size: cover !important;
}
}
@media (max-width: 640px) {
/* Shop archive row -- mniejsza wysokosc + padding */
body.woocommerce-shop .wp-block-kadence-rowlayout.kt-row-has-bg,
body.post-type-archive-product .wp-block-kadence-rowlayout.kt-row-has-bg,
body.tax-product_cat .wp-block-kadence-rowlayout.kt-row-has-bg {
min-height: 220px !important;
padding-top: 56px !important;
padding-bottom: 56px !important;
background-position: center center !important;
}
/* H1 "Sklep" -- duzy display font (Fraunces editorial) */
body.woocommerce-shop .wp-block-kadence-rowlayout h1.wp-block-kadence-advancedheading,
body.post-type-archive-product .wp-block-kadence-rowlayout h1.wp-block-kadence-advancedheading,
body.tax-product_cat .wp-block-kadence-rowlayout h1.wp-block-kadence-advancedheading {
font-size: clamp(36px, 10vw, 56px) !important;
font-family: var(--ms-font-display) !important;
font-weight: 400 !important;
line-height: 1.1 !important;
margin: 12px 0 !important;
letter-spacing: -0.01em !important;
}
/* Span eyebrow "Kolekcjonerska kolekcja" -- maly italic gold */
body.woocommerce-shop .wp-block-kadence-rowlayout span.wp-block-kadence-advancedheading,
body.post-type-archive-product .wp-block-kadence-rowlayout span.wp-block-kadence-advancedheading,
body.tax-product_cat .wp-block-kadence-rowlayout span.wp-block-kadence-advancedheading {
font-size: 13px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
font-family: var(--ms-font-body) !important;
font-weight: 500 !important;
color: var(--ms-gold) !important;
}
}
/* === Bardzo waskie telefony (<=400px) -- 1-col shop grid === */
@media (max-width: 400px) {
.woocommerce ul.products,
.woocommerce-page ul.products {
grid-template-columns: 1fr !important; /* 1-col zamiast 2-col na bardzo waskich */
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: 100% !important;
max-width: 360px !important;
margin: 0 auto 20px !important;
}
/* Wiecej miejsca dla tytulow w 1-col grid */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 18px !important;
padding: 18px 18px 6px !important;
}
.woocommerce ul.products li.product .price {
font-size: 22px !important;
padding: 0 18px !important;
}
.woocommerce a.add_to_cart_button {
padding: 14px 24px !important;
font-size: 13px !important;
}
}
/* ============================================================================
Phase D.Stripe.Checkout (2026-05-17): logo grid metod platnosci pod CTA button
w cart sidebar + checkout page. Brand colors zachowane (Visa #1A1F71,
Mastercard gradient, BLIK #FF0066, Klarna #FFB3C7, Przelewy24 #B81F23).
============================================================================ */
/* === Cart proceed-to-checkout container - flexbox z forced order ===
Phase D.Stripe.Checkout iteracja 5 (2026-05-17): WC + Stripe plugin renderuja
elementy w roznych priority hooks ktore daja chaotyczna kolejnosc. Flexbox `order`
wymusza docelowa wizualna kolejnosc:
1. Main button "ZAMAWIAM I PŁACĘ" (large, prominent)
2. Logos "Do wyboru po kliknięciu" (co dostanie po kliknieciu)
3. Header "lub płać 1 klikiem" (separator)
4. Express Checkout buttons (G Pay + Link) - alternative quick path
*/
.woocommerce-cart .wc-proceed-to-checkout,
.cart_totals .wc-proceed-to-checkout,
.wc-proceed-to-checkout {
display: flex !important;
flex-direction: column;
gap: 0;
text-align: center;
}
/* Force order regardless of HTML position. Verified DOM structure 2026-05-17:
.wc-proceed-to-checkout zawiera 5 siblings:
- .ms-cart-invoice-note (VAT disclaimer, Phase D.VAT-Invoice 2026-05-04 priority 9)
- .ms-express-checkout-header (priority 19)
- a.checkout-button (priority 10 default WC + Kadence custom)
- #wc-stripe-express-checkout-element (Stripe Express - ID not class, ma inline style)
- .ms-payment-methods-strip (priority 100)
*/
/* VAT disclaimer (note o paragonie/fakturze) - na samej gorze cart_totals */
.wc-proceed-to-checkout > .ms-cart-invoice-note {
order: 0 !important;
margin-bottom: 14px;
}
/* 1. Main button "ZAMAWIAM I PŁACĘ" */
.wc-proceed-to-checkout > .checkout-button,
.wc-proceed-to-checkout > a.checkout-button,
.wc-proceed-to-checkout a.button.checkout-button {
order: 1 !important;
}
/* 2. Strip "Do wyboru po kliknięciu" + logos */
.wc-proceed-to-checkout > .ms-payment-methods-strip {
order: 2 !important;
}
/* 3. Separator + header "lub płać 1 klikiem" */
.wc-proceed-to-checkout > .ms-express-checkout-header {
order: 3 !important;
}
/* 4. Stripe Express Checkout - ID selector (faktyczna struktura DOM 2026-05-17) +
fallbacki dla wrapperow / starszych wersji pluginu. Override inline display:none
jest niepotrzebne - Stripe SDK sam zmieni na block po wczytaniu Express buttons. */
.wc-proceed-to-checkout > #wc-stripe-express-checkout-element,
.wc-proceed-to-checkout > .wc-stripe-express-checkout-element,
.wc-proceed-to-checkout > .wc-stripe-payment-request-wrapper,
.wc-proceed-to-checkout > #wc-stripe-payment-request-wrapper,
.wc-proceed-to-checkout > .wc-stripe-product-checkout-container {
order: 4 !important;
margin-top: 0 !important;
clear: none !important; /* override inline clear:both ktore moglo lamac flexbox */
}
/* Powiekszenie main button "ZAMAWIAM I PŁACĘ" zeby byl wizualnie adekwatny do
Express Checkout buttons Stripe (~48-56px height, full width). */
.wc-proceed-to-checkout > .checkout-button,
.wc-proceed-to-checkout a.button.checkout-button {
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
max-width: none !important;
min-height: 56px !important;
padding: 16px 32px !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
margin: 0 !important;
box-sizing: border-box;
}
/* Strip pod buttonem - WIZUALNIE POLACZONY z button (no border-top, maly gap, klarowna
informacja "to wybierzesz po kliknieciu"). Phase D.Stripe.Checkout UX iteracja 5. */
.ms-payment-methods-strip {
margin-top: 10px; /* gap od main button (flexbox order 1 -> 2) */
margin-bottom: 4px;
padding-top: 0;
border-top: none;
text-align: center;
}
.ms-payment-methods-label {
font-size: 11px;
color: var(--ms-muted, #6b6b6b);
margin: 0 0 8px;
letter-spacing: 0.03em;
font-weight: 400;
font-family: var(--ms-font-body, Inter, sans-serif);
font-style: italic;
text-transform: none; /* zniesienie uppercase - bardziej delikatnie */
}
/* Subtle "connector" - mala strzalka w dol lub linia laczaca button z logos, ktora wizualnie
wskazuje "to bedzie dostepne po kliknieciu wyzej". */
.ms-payment-methods-strip::before {
content: "";
display: block;
width: 1px;
height: 10px;
background: var(--ms-border, #e8e2d5);
margin: 0 auto 8px;
}
.ms-payment-methods-icons {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
/* Oficjalne SVG logos z plugin Stripe - white container z subtle border (jak credit card slip).
FIXED dimensions 44x28px (aspect ratio ~1.57:1 - card-like) + object-fit: contain dla
spojnego wygladu mimo roznych aspect ratios SVG (karty Visa/MC/Amex sa landscape ~1.6:1,
BLIK/Klarna/P24 sa square-ish ~1:1 - container fixed eliminuje wizualne dysproporcje). */
.ms-pm-icon {
display: inline-block;
width: 44px;
height: 28px;
padding: 4px 5px;
background: #fff;
border: 1px solid var(--ms-border, #e8e2d5);
border-radius: 4px;
box-sizing: border-box;
object-fit: contain;
transition: transform 0.15s ease, box-shadow 0.15s ease;
user-select: none;
vertical-align: middle;
}
.ms-pm-icon:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-color: var(--ms-gold-soft, #d9bc7a);
}
.ms-payment-methods-note {
font-size: 10px;
color: var(--ms-muted, #6b6b6b);
margin: 0;
font-family: var(--ms-font-body, Inter, sans-serif);
font-style: italic;
letter-spacing: 0.02em;
}
/* Mobile - tighter spacing + slightly mniejsze icons */
@media (max-width: 480px) {
.ms-payment-methods-icons {
gap: 6px;
}
.ms-pm-icon {
width: 38px;
height: 24px;
padding: 3px 4px;
}
.ms-payment-methods-label {
font-size: 10px;
}
.ms-payment-methods-note {
font-size: 9px;
}
}
/* Specjalny styling kiedy strip jest na checkout page (woocommerce_review_order_before_payment)
- inne kontekstowe spacing niz cart sidebar */
.woocommerce-checkout-review-order .ms-payment-methods-strip,
form.checkout .ms-payment-methods-strip {
margin-top: 24px;
padding-top: 20px;
}
/* Express Checkout header - subtle wyjasnienie PRZED G Pay / Link / Apple Pay buttons.
Phase D.Stripe.Checkout UX iteracja 4 (2026-05-17): informuje uzytkownika ze sa to
"quick checkout" alternative do main "Zamawiam i Place" buttonu. */
.ms-express-checkout-header {
margin: 18px 0 8px;
padding-top: 14px;
text-align: center;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.ms-express-checkout-header::before {
content: "";
display: block;
width: 60%;
max-width: 200px;
height: 1px;
background: var(--ms-border, #e8e2d5);
margin: 0 auto 10px;
}
.ms-ec-label {
font-size: 12px;
color: var(--ms-text, #2a2a2a);
font-family: var(--ms-font-display, Fraunces, serif);
font-style: italic;
font-weight: 400;
letter-spacing: 0.02em;
}
.ms-ec-desc {
font-size: 10px;
color: var(--ms-muted, #6b6b6b);
font-family: var(--ms-font-body, Inter, sans-serif);
letter-spacing: 0.04em;
text-transform: lowercase;
}
@media (max-width: 480px) {
.ms-ec-label {
font-size: 11px;
}
.ms-ec-desc {
font-size: 9px;
}
}
/* ============================================================================
PHASE D.KLARNA.INFO (2026-06-01) -- notka raty/platnosc odroczona Klarna
============================================================================ */
.ms-klarna-note {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0 18px;
padding: 10px 14px;
background: var(--ms-sand, #f2ede2);
border: 1px solid var(--ms-border, #e8e2d5);
border-radius: 10px;
font-family: var(--ms-font-body, 'Inter', sans-serif);
font-size: 13px;
line-height: 1.4;
color: var(--ms-text, #2a2a2a);
}
.ms-klarna-badge {
flex: 0 0 auto;
background: #ffb3c7;
color: #0a0a0a;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.01em;
padding: 3px 8px;
border-radius: 5px;
white-space: nowrap;
}
.ms-klarna-text {
font-weight: 500;
}
.ms-klarna-min {
color: var(--ms-muted, #6b6b6b);
font-weight: 400;
}
.ms-klarna-cart {
margin: 6px 0 12px;
}
@media (max-width: 480px) {
.ms-klarna-note {
font-size: 12px;
padding: 8px 10px;
gap: 8px;
}
}
/* ============================================================================
END OF STYLE.CSS
============================================================================ */
/* ============================================================================
SHOP FILTERS -- Phase D.ShopFilters (2026-06-29)
Pasek filtrow (kategoria / cena / promocje) nad siatka sklepu.
GET-based, bez JS. Design tokens --ms-*.
============================================================================ */
.ms-shop-filters {
margin: 0 0 1.75rem;
padding: 1rem 1.15rem;
background: var(--ms-sand);
border: 1px solid var(--ms-border);
border-radius: var(--ms-radius-sm);
}
.ms-shop-filters-inner {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 1.1rem 1.6rem;
}
.ms-filter-group {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.ms-filter-label {
font-family: var(--ms-font-body);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ms-muted);
font-weight: 600;
}
/* Category pills (radios visually hidden) */
.ms-pills {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.ms-pill {
position: relative;
cursor: pointer;
}
.ms-pill input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
.ms-pill span {
display: inline-block;
padding: 0.4rem 0.85rem;
font-family: var(--ms-font-body);
font-size: 0.85rem;
line-height: 1.2;
color: var(--ms-green-dark);
background: var(--ms-paper);
border: 1px solid var(--ms-border);
border-radius: 999px;
transition: background 0.2s var(--ms-ease), color 0.2s var(--ms-ease), border-color 0.2s var(--ms-ease);
}
.ms-pill:hover span {
border-color: var(--ms-gold-soft);
color: var(--ms-green-deep);
}
.ms-pill.is-active span,
.ms-pill input:focus-visible + span {
background: var(--ms-green-dark);
color: var(--ms-bone, #faf8f3);
border-color: var(--ms-green-dark);
}
/* Price inputs */
.ms-price-inputs {
display: flex;
align-items: center;
gap: 0.5rem;
}
.ms-price-inputs input {
width: 6.5rem;
max-width: 32vw;
padding: 0.5rem 0.6rem;
font-family: var(--ms-font-body);
font-size: 0.9rem;
color: var(--ms-ink);
background: var(--ms-paper);
border: 1px solid var(--ms-border);
border-radius: var(--ms-radius-xs);
}
.ms-price-inputs input:focus {
outline: none;
border-color: var(--ms-gold);
box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.18);
}
.ms-price-dash {
color: var(--ms-muted);
}
/* On-sale checkbox */
.ms-filter-checkbox {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-family: var(--ms-font-body);
font-size: 0.9rem;
color: var(--ms-green-dark);
}
.ms-filter-checkbox input {
width: 1.05rem;
height: 1.05rem;
accent-color: var(--ms-gold);
cursor: pointer;
}
/* Actions */
.ms-filter-actions {
display: flex;
align-items: center;
gap: 0.9rem;
margin-left: auto;
}
.ms-filter-apply {
padding: 0.55rem 1.5rem;
font-family: var(--ms-font-body);
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
color: var(--ms-green-deep);
background: var(--ms-gold);
border: 1px solid var(--ms-gold);
border-radius: 999px;
cursor: pointer;
transition: background 0.2s var(--ms-ease), transform 0.2s var(--ms-ease);
}
.ms-filter-apply:hover {
background: var(--ms-gold-soft);
border-color: var(--ms-gold-soft);
transform: translateY(-1px);
}
.ms-filter-reset {
font-family: var(--ms-font-body);
font-size: 0.82rem;
color: var(--ms-muted);
text-decoration: underline;
text-underline-offset: 3px;
}
.ms-filter-reset:hover {
color: var(--ms-green-dark);
}
/* Mobile: stack groups, full-width actions */
@media (max-width: 768px) {
.ms-shop-filters-inner {
gap: 1rem;
}
.ms-filter-group {
width: 100%;
}
.ms-filter-actions {
width: 100%;
margin-left: 0;
justify-content: space-between;
}
.ms-price-inputs input {
flex: 1;
width: auto;
max-width: none;
}
}
/* ============================================================================
OMNIBUS -- "najnizsza cena z 30 dni przed obnizka" -- Phase D.Omnibus (2026-06-29)
Czytelna linia pod cena promocyjna (NIE szara-niewidoczna -- wymog UOKiK).
============================================================================ */
/* Allegro-style kompakt: "-X% [przekreslona 30-dniowka] najnizsza cena z 30 dni (i)".
Pelna formula prawna w atrybucie title (tooltip). Czytelny kolor -- wymog UOKiK. */
.ms-omnibus-price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 1px 6px;
margin: 0.4rem 0 0;
font-family: var(--ms-font-body);
font-size: 0.8rem;
line-height: 1.4;
color: var(--ms-text);
cursor: help; /* afordancja tooltipa */
}
.ms-omnibus-pct {
color: var(--ms-green-deep);
font-weight: 700;
}
.ms-omnibus-was {
color: var(--ms-muted);
text-decoration: line-through;
}
.ms-omnibus-was .woocommerce-Price-amount {
color: inherit;
}
.ms-omnibus-cap {
color: var(--ms-muted);
font-size: var(--ms-text-xs);
}
.ms-omnibus-info {
color: var(--ms-muted);
font-size: 0.9em;
align-self: center;
}
/* Karta okazu w petli: wysrodkuj caly blok pod karta wariantu */
.ms-variation-li .ms-omnibus-price {
justify-content: center;
margin: 0.5rem 0.1rem 0.2rem;
}
/* Omnibus = JEDYNA referencja: chowamy natywne przekreslenie ceny regularnej WC
(loop + single + karta okazu). 30-dniowka pokazana w bloku .ms-omnibus-price.
Bez tego dublowalibysmy referencje i zawyzali rabat (kazus Zalando). */
.woocommerce ul.products li.product .price del,
.woocommerce div.product .price del,
.ms-product-price del {
display: none !important;
}
/* Pusty kontener wariantu (single product) nie zajmuje miejsca */
.ms-omnibus-variation:empty {
display: none;
}
/* ============================================================================
SHOP CARDS REDESIGN -- rowne rzedy + CTA przypiete do dolu + wyrownane badge
+ premium polish. 2026-06-30. Decyzje klienta: oceny UKRYTE, badge outline.
Pelny research + adwersarialna weryfikacja (3 krytykow):
docs/research-output/2026-06-30_RESEARCH_SHOP_CARDS.md
ZASADA: align-items:stretch (L641) dziala TYLKO z clampem tytulu (L654) +
ukrytymi ocenami (nizej). NIE wlaczac stretch bez normalizacji -- to cofa
regresje "duze odstepy" z 2026-05-04.
============================================================================ */
/* --- li jako flex column (OBA path: li.ms-variation-li ma TEZ klase .product) --- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
display: flex !important;
flex-direction: column !important;
}
/* PATH 1 simple: content wrap wypelnia rozciagnieta wysokosc -> margin-top:auto aktywny */
.woocommerce ul.products li.product .entry-content-wrap,
.woocommerce ul.products li.product > .product-details {
flex: 1 1 auto !important;
height: auto !important;
min-height: 0;
}
.woocommerce ul.products li.product .product-action-wrap {
margin-top: auto !important; /* teraz AKTYWNY -- CTA na sam dol karty */
}
/* PATH 2 variation: article jako flex column (brakujace ogniwo -- .ms-product-info
flex:1 i .ms-variation-action margin-top:auto sa juz w custom-home.css) */
.woocommerce ul.products li.ms-variation-li > article.ms-variation-card {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto;
min-height: 0;
}
/* --- Oceny gwiazdkowe UKRYTE (decyzja klienta: sklep okazow 1-of-1, ~brak
recenzji; usuwa zmiennosc wysokosci u zrodla, czysciej/premium) --- */
.woocommerce ul.products li.product .star-rating {
display: none !important;
}
/* --- Clamp tytulow 2 linie -- realizowany na WEWNETRZNYM (oba path).
Tytul h2/h3 jest flex-itemem -> -webkit-box na nim blockifikowany do flow-root
(clamp martwy). wewnatrz tytulu NIE jest flex-itemem -> clamp dziala.
min-height na = rezerwa 2-liniowa (1-line == 2-line height) -> rowne karty. --- */
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.ms-variation-li .ms-variation-card .ms-product-name a {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
color: inherit;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
min-height: calc(var(--ms-text-lg) * 1.25 * 2); /* 45px = 2 linie @18px */
}
.woocommerce ul.products li.ms-variation-li .ms-variation-card .ms-product-name a {
min-height: calc(19px * 1.2 * 2); /* 45.6px = 2 linie @19px */
}
.woocommerce ul.products li.ms-variation-li .ms-variation-card .ms-product-name {
overflow: hidden;
}
/* --- Cena promocyjna na jednej linii bazowej. Linia Omnibus (.ms-omnibus-price
powyzej) zostaje czytelna -- wymog UOKiK, NIE wyciszac --- */
.woocommerce ul.products li.product .price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 6px;
}
.woocommerce ul.products li.product .price del {
font-size: 0.8em;
color: var(--ms-muted);
opacity: 0.75;
text-decoration-thickness: 1px;
}
.woocommerce ul.products li.product .price ins {
text-decoration: none;
color: var(--ms-green-deep); /* cena promo w palecie, NIE czerwona */
font-weight: 600;
}
/* --- Badge PROMOCJA: do gornej linii REAL PHOTO (top 22->12px) + outline na bieli.
Fix kontrastu WCAG (bone-na-zlocie ~1.7:1 FAIL -> green-deep-na-bieli ~14:1 AAA).
TYLKO span.onsale (proste produkty); REAL PHOTO-card jest juz na top/left:12px.
NIE dotykac .ms-real-photo-badge (baner single-product). --- */
.woocommerce span.onsale {
top: 12px !important;
right: 12px !important;
left: auto !important;
bottom: auto !important;
margin: 0 !important;
background: rgba(255, 255, 255, 0.94) !important;
color: var(--ms-green-deep) !important;
border: 1px solid var(--ms-gold) !important;
box-shadow: none !important;
font-family: var(--ms-font-body) !important;
font-size: var(--ms-text-xs) !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
padding: 4px 10px !important;
border-radius: var(--ms-radius-pill) !important;
line-height: 1 !important;
}
/* --- Premium polish (low-risk, tokeny --ms-*) --- */
/* wolniejszy zoom obrazu (szybki=tanio, wolny=lux) */
.woocommerce ul.products li.product a img,
.ms-product-img {
transition: transform 0.7s var(--ms-ease) !important;
}
/* cichy hover nazwy -> green-mid (poza zlota ramka karty jedyny ruch) */
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title a,
.ms-variation-card:hover .ms-product-name a {
color: var(--ms-green-mid) !important;
}
/* numer okazu = czyste tracked-caps "lot aukcyjny" (bez kursywy, czytelny zielony).
Wyzsza specyficznosc -- bije .ms-product-meta (italic/muted). */
.woocommerce ul.products li.ms-variation-li .ms-variation-card .ms-specimen-meta {
font-style: normal !important;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ms-green-mid) !important;
font-size: var(--ms-text-xs);
}
/* === Polish round 2 (2026-06-30): ujednolicenie CTA okaz vs prosty === */
/* "Zobacz okaz" dostaje ten sam ksztalt/padding co "Do koszyka" + strzalke -> */
.woocommerce ul.products li.ms-variation-li .ms-variation-cta {
display: flex !important;
width: 100%;
box-sizing: border-box;
align-items: center;
justify-content: center;
gap: 7px;
padding: 13px 16px !important;
font-size: 0.8125rem !important;
letter-spacing: 0.06em !important;
}
.woocommerce ul.products li.ms-variation-li .ms-variation-cta::after {
content: "\2192"; /* strzalka -> jak w add_to_cart_button */
font-size: 1.05em;
line-height: 1;
}
/* CTA okazu nie podskakuje na hover (override lift z custom-home.css) -- przycisk nie ucieka */
.woocommerce ul.products li.ms-variation-li .ms-variation-cta:hover {
transform: none !important;
box-shadow: none !important;
}
/* === HOVER FIX (2026-06-30) -- PRAWDZIWA przyczyna uciekania przycisku ===
Kadence "woo-archive-action-on-hover" przesuwa CALY .entry-content-wrap
(tytul + cena + przycisk) o translateY(-2rem) na hover -> przycisk skacze
o 32px w gore i UCIEKA spod kursora. Wylaczamy ten slide. Hover-cue = delikatny
zoom zdjecia (zyczenie klienta), klipowany w obrebie obrazka -- nic nie rusza layoutu. */
.woocommerce ul.products li.product:hover .entry-content-wrap,
.woocommerce ul.products li.product:focus-within .entry-content-wrap,
.woocommerce ul.products li.product:hover > .product-details,
.woocommerce ul.products li.product:focus-within > .product-details {
transform: none !important;
}
/* Klip zoomu w obrebie obrazka (zeby powiekszenie nie nachodzilo na tresc) */
.woocommerce ul.products li.product a.woocommerce-loop-image-link,
.woocommerce ul.products li.ms-variation-li .ms-product-image-wrap {
overflow: hidden;
display: block;
}
/* Delikatne powiekszenie zdjecia na hover -- oba typy kart */
.woocommerce ul.products li.product a.woocommerce-loop-image-link img,
.ms-product-img {
transition: transform 0.55s var(--ms-ease) !important;
transform-origin: center center;
}
.woocommerce ul.products li.product:hover a.woocommerce-loop-image-link img,
.woocommerce ul.products li.ms-variation-li:hover .ms-product-img {
transform: scale(1.06) !important;
}
/* ============================================================================
OPIS WYBRANEGO OKAZU (wariantu) na stronie produktu.
Render server-side w inc/wc-rendering.php (priority 21, pod krotkim opisem).
Native in-form .woocommerce-variation-description chowamy (dedup) -- pokazujemy
wlasny, widoczny bez JS (odporny na WP Rocket delay_js).
============================================================================ */
.ms-specimen-description:empty {
display: none;
}
.ms-specimen-description {
margin: 1.4rem 0 0;
padding-top: 1.4rem;
border-top: 1px solid var(--ms-border);
font-family: var(--ms-font-body);
color: var(--ms-text);
font-size: 1rem;
line-height: 1.75;
}
.ms-specimen-description > *:first-child {
margin-top: 0;
}
.ms-specimen-description > *:last-child {
margin-bottom: 0;
}
.ms-specimen-description p {
margin: 0 0 0.9em;
}
.ms-specimen-description strong {
color: var(--ms-ink);
}
.ms-specimen-description a {
color: var(--ms-green-mid);
text-decoration: underline;
}
/* Native WC variation description -- chowamy, bo renderujemy wlasny server-side wyzej. */
.single-product form.variations_form .woocommerce-variation-description {
display: none !important;
}
/* KROTKI opis wybranego okazu przy cenie (klaster okazow) -- inc/wc-rendering.php prio 20. */
.ms-specimen-short:empty {
display: none;
}
.ms-specimen-short {
margin: 1.1rem 0 0;
font-family: var(--ms-font-body);
color: var(--ms-text);
font-size: 1.02rem;
line-height: 1.7;
}
.ms-specimen-short p {
margin: 0 0 0.6em;
}
.ms-specimen-short p:last-child {
margin-bottom: 0;
}
.ms-specimen-short strong {
color: var(--ms-ink);
}
/* DLUGI opis wybranego okazu w zakladce "Opis" (dol strony). */
.ms-okaz-long {
font-family: var(--ms-font-body);
line-height: 1.75;
}
.ms-okaz-long > *:first-child {
margin-top: 0;
}
.ms-okaz-long > *:last-child {
margin-bottom: 0;
}
/* ============================================================================
GALERIA ZDJEC OKAZU -- pasek miniatur pod cena + lightbox (inc/wc-rendering.php).
============================================================================ */
.ms-okaz-gallery:empty {
display: none;
}
.ms-okaz-gallery {
margin: 1.1rem 0 0;
}
.ms-okaz-gallery-label {
font-family: var(--ms-font-body);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ms-muted);
margin-bottom: 0.5rem;
}
.ms-okaz-gallery-strip {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ms-okaz-thumb {
display: block;
width: 66px;
height: 66px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--ms-border);
cursor: zoom-in;
transition: border-color 0.2s var(--ms-ease);
}
.ms-okaz-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ms-okaz-thumb:hover {
border-color: var(--ms-gold);
}
/* GALERIA GLOWNA OKAZU -- zastepuje flexslider WC (inc/wc-rendering.php).
Kontener ma klase .woocommerce-product-gallery (layout kolumny Kadence). */
.ms-okaz-main-gallery {
margin: 0 0 1.4rem;
}
.ms-gallery-stage {
position: relative;
background: var(--ms-paper);
border: 1px solid var(--ms-border);
border-radius: 10px;
overflow: hidden;
}
.ms-gallery-full {
display: block;
width: 100%;
height: auto;
cursor: zoom-in;
}
.ms-gallery-thumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.ms-gthumb {
padding: 0;
margin: 0;
width: 74px;
height: 74px;
border: 2px solid transparent;
border-radius: 8px;
overflow: hidden;
background: none;
cursor: pointer;
line-height: 0;
transition: border-color 0.2s var(--ms-ease);
}
.ms-gthumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ms-gthumb.is-active {
border-color: var(--ms-gold);
}
.ms-gthumb:hover {
border-color: var(--ms-gold-soft);
}
.ms-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(0, 0, 0, 0.88);
display: flex;
align-items: center;
justify-content: center;
cursor: zoom-out;
}
.ms-lightbox img {
max-width: 92vw;
max-height: 92vh;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.ms-lightbox-close {
position: absolute;
top: 14px;
right: 24px;
color: #fff;
font-size: 2.6rem;
line-height: 1;
cursor: pointer;
}
/* --- Wyszukiwarka produktow na sklepie (inc/shop-filters.php) --- */
/* Search field w osobnym, szerszym wierszu nad resztą filtrów (2026-07-06) */
.ms-shop-filters-search {
margin-bottom: 1.05rem;
padding-bottom: 1.05rem;
border-bottom: 1px solid var(--ms-border);
}
.ms-shop-filters-search .ms-filter-search {
width: 100%;
}
.ms-filter-search .ms-search-inputs {
display: flex;
gap: 6px;
align-items: center;
}
/* W dedykowanym wierszu pole rozciąga się (do ~600px), nie stała wąska szerokość */
.ms-shop-filters-search .ms-search-inputs {
max-width: 600px;
}
.ms-search-inputs input[type="search"] {
padding: 0.55rem 0.85rem;
border: 1px solid var(--ms-border);
border-radius: 8px;
font-family: var(--ms-font-body);
font-size: 0.95rem;
min-width: 170px;
color: var(--ms-text);
}
.ms-shop-filters-search .ms-search-inputs input[type="search"] {
flex: 1 1 auto;
min-width: 0;
}
.ms-search-inputs input[type="search"]:focus {
outline: none;
border-color: var(--ms-gold);
}
.ms-search-btn {
padding: 0.42rem 0.75rem;
border: 1px solid var(--ms-border);
border-radius: 8px;
background: var(--ms-paper);
cursor: pointer;
font-size: 0.95rem;
line-height: 1;
}
.ms-search-btn:hover {
border-color: var(--ms-gold);
background: var(--ms-sand);
}
/* --- Live autocomplete dropdown (Phase D.ShopSuggest 2026-07-06) --- */
.ms-search-inputs.ms-suggest-wrap {
position: relative;
}
.ms-suggest {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 60;
background: var(--ms-paper);
border: 1px solid var(--ms-border);
border-radius: 12px;
box-shadow: 0 12px 30px rgba(26, 40, 35, 0.14);
overflow: hidden auto;
max-height: 62vh;
}
.ms-suggest[hidden] {
display: none;
}
.ms-suggest-item {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.5rem 0.75rem;
text-decoration: none;
color: var(--ms-ink);
border-bottom: 1px solid var(--ms-sand);
}
.ms-suggest-item:last-child {
border-bottom: 0;
}
.ms-suggest-item:hover,
.ms-suggest-item.is-active {
background: var(--ms-sand);
}
.ms-suggest-thumb {
width: 44px;
height: 44px;
object-fit: cover;
border-radius: 8px;
flex: 0 0 auto;
background: var(--ms-sand);
}
.ms-suggest-body {
display: flex;
flex-direction: column;
min-width: 0;
}
.ms-suggest-title {
font-family: var(--ms-font-body);
font-size: 0.9rem;
font-weight: 600;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ms-suggest-price {
font-size: 0.8rem;
color: var(--ms-gold);
font-weight: 600;
margin-top: 2px;
}
.ms-suggest-empty {
padding: 0.8rem;
font-size: 0.85rem;
color: var(--ms-muted);
text-align: center;
}
/* --- "Aktualnie niedostępne" + Powiadom o dostępności (Phase D.Availability 2026-07-06) --- */
.ms-unavailable {
margin: 1.25rem 0;
padding: 1.1rem 1.25rem;
background: var(--ms-sand);
border: 1px solid var(--ms-border);
border-radius: var(--ms-radius-sm);
}
.ms-unavailable-badge {
display: inline-block;
font-family: var(--ms-font-body);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
color: #fff;
background: var(--ms-muted);
padding: 0.3rem 0.7rem;
border-radius: 999px;
margin: 0 0 0.65rem;
}
.ms-unavailable-text {
margin: 0 0 0.9rem;
color: var(--ms-text);
font-size: 0.95rem;
line-height: 1.5;
}
.ms-notify-form {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.ms-notify-form input[type="email"] {
flex: 1 1 220px;
min-width: 0;
padding: 0.55rem 0.85rem;
border: 1px solid var(--ms-border);
border-radius: 8px;
font-family: var(--ms-font-body);
font-size: 0.95rem;
color: var(--ms-text);
}
.ms-notify-form input[type="email"]:focus {
outline: none;
border-color: var(--ms-gold);
}
.ms-notify-hp {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
opacity: 0;
}
.ms-notify-btn {
padding: 0.55rem 1.3rem;
background: var(--ms-green-dark);
color: #fff;
border: 0;
border-radius: 8px;
font-family: var(--ms-font-body);
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background 0.15s ease;
}
.ms-notify-btn:hover {
background: var(--ms-green-mid);
}
.ms-notify-btn:disabled {
opacity: 0.55;
cursor: default;
}
.ms-notify-msg:empty {
display: none;
}
.ms-notify-msg {
margin: 0.6rem 0 0;
font-size: 0.9rem;
color: var(--ms-green-dark);
font-weight: 600;
}