/* Integracja z aktywnym motywem Fashion. Motyw ogranicza treść strony
do 1516 px i ustawia overflow:auto na .block-text, co przycina sekcję
pełnoekranową. Poniższe reguły działają wyłącznie na stronie z Modyllo. */
body:has(.modyllo-wp) {
overflow-x: clip;
}

body:has(.modyllo-wp) .home__welcome.container:has(.modyllo-wp) {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}

body:has(.modyllo-wp) .home__welcome__content:has(.modyllo-wp),
body:has(.modyllo-wp) .block-text:has(.modyllo-wp) {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}

/* Zachowuje zgodność, gdy blok zostanie przeniesiony na zwykłą stronę. */
body:has(.modyllo-wp) .page__container > .page__header {
display: none !important;
}

body:has(.modyllo-wp) .page__container > .page__content,
body:has(.modyllo-wp) main.main,
body:has(.modyllo-wp) .page__container {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}

.modyllo-wp {
–md-cream: #f4efe2;
–md-paper: #fffaf0;
–md-brown: #3d2920;
–md-rust: #a94d32;
–md-moss: #68735a;
–md-sage: #c5cbb2;
–md-butter: #e6c985;
–md-line: rgba(61, 41, 32, .22);
–md-shadow: 0 22px 70px rgba(61, 41, 32, .13);
position: relative;
width: 100%;
max-width: none;
margin: 0;
overflow: hidden;
color: var(–md-brown);
background: var(–md-cream);
font-family: „Trebuchet MS”, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}

.modyllo-wp,
.modyllo-wp * { box-sizing: border-box; }
.modyllo-wp ::selection { color: var(–md-paper); background: var(–md-rust); }
.modyllo-wp a { color: inherit; text-decoration: none; }
.modyllo-wp img { display: block; width: 100%; max-width: none; }
.modyllo-wp h1,
.modyllo-wp h2,
.modyllo-wp h3,
.modyllo-wp p { margin-top: 0; }
.modyllo-wp :focus-visible { outline: 3px solid var(–md-rust); outline-offset: 4px; }

.modyllo-wp__hero {
width: calc(100% – 32px);
margin: 0 auto;
overflow: hidden;
background: var(–md-sage);
border-radius: 16px;
box-shadow: var(–md-shadow);
}

.modyllo-wp__hero-media { position: relative; height: clamp(560px, 72vh, 860px); overflow: hidden; background: var(–md-paper); }
.modyllo-wp__hero-media > img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: center 18%; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.modyllo-wp__hero:hover .modyllo-wp__hero-media > img { transform: scale(1.018); }
.modyllo-wp__look-links { position: absolute; right: 18px; bottom: 18px; left: 18px; display: flex; justify-content: space-between; gap: 12px; }
.modyllo-wp__look-link { min-width: 170px; min-height: 48px; padding: 12px 17px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-radius: 999px; background: rgba(255, 250, 240, .94); font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.modyllo-wp__look-link svg { width: 18px; flex: 0 0 auto; }

.modyllo-wp__hero-copy { position: relative; width: 100%; max-width: 1600px; margin-inline: auto; padding: clamp(38px, 4.4vw, 68px); display: grid; grid-template-columns: minmax(340px, .9fr) minmax(360px, 1.1fr); grid-template-areas: „title body” „title actions”; column-gap: clamp(44px, 7vw, 112px); align-items: end; }
.modyllo-wp__title-block { grid-area: title; }
.modyllo-wp__hero h1 { max-width: 620px; margin: 0; font-family: Georgia, „Times New Roman”, serif; font-size: clamp(52px, 6.3vw, 96px); font-weight: 400; line-height: .9; letter-spacing: -.04em; text-wrap: balance; }
.modyllo-wp__hero h1 em { color: var(–md-rust); font-weight: 400; }
.modyllo-wp__hero-copy > p { grid-area: body; max-width: 58ch; margin: 0 0 26px; font-size: 17px; }
.modyllo-wp__hero-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 11px; }

.modyllo-wp__button { min-height: 52px; padding: 0 25px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(–md-brown); border-radius: 999px; color: var(–md-paper) !important; background: var(–md-brown); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.modyllo-wp__button svg { width: 22px; }
.modyllo-wp__button:hover { color: var(–md-brown) !important; background: var(–md-butter); transform: translateY(-2px); }
.modyllo-wp__button–outline { color: var(–md-brown) !important; background: transparent; }
.modyllo-wp__button–outline:hover { background: var(–md-paper); }

.modyllo-wp__marquee { margin: 0; padding: 19px 0; overflow: hidden; color: var(–md-paper); background: var(–md-rust); }
.modyllo-wp__marquee-track { width: max-content; display: flex; animation: modyllo-move 30s linear infinite; font-family: Georgia, serif; font-size: 16px; font-style: italic; will-change: transform; }
.modyllo-wp__marquee-group { min-width: 100vw; padding-inline: clamp(24px, 4vw, 64px); display: flex; flex: 0 0 auto; align-items: center; justify-content: space-around; gap: clamp(36px, 6vw, 100px); white-space: nowrap; }
@keyframes modyllo-move { to { transform: translate3d(-50%, 0, 0); } }

.modyllo-wp__products-wrap { padding-block: clamp(48px, 6vw, 82px); background: var(–md-paper); }
.modyllo-wp__products { width: min(1440px, calc(100% – 40px)); margin: 0 auto; }
.modyllo-wp__product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.modyllo-wp__product { min-width: 0; }
.modyllo-wp__product-media { aspect-ratio: 3 / 4; display: block; overflow: hidden; background: #e5ddce; border-radius: 14px; }
.modyllo-wp__product-media img { height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.modyllo-wp__product-media:hover img { transform: scale(1.025); }
.modyllo-wp__product-info { padding-top: 16px; }
.modyllo-wp__product-name { display: block; margin-bottom: 7px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.modyllo-wp__product-price { min-height: 25px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.modyllo-wp__product-price del { color: rgba(61, 41, 32, .65); }
.modyllo-wp__product-price ins { color: var(–md-rust); font-weight: 700; text-decoration: none; }
.modyllo-wp__product-button { width: 100%; min-height: 48px; padding: 10px 16px; display: inline-flex; align-items: center; justify-content: center; color: var(–md-paper) !important; background: var(–md-brown); border: 1px solid var(–md-brown); border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: background-color .2s ease, color .2s ease; }
.modyllo-wp__product-button:hover { color: var(–md-brown) !important; background: var(–md-butter); }
.modyllo-wp__status { grid-column: 1 / -1; margin: 0; padding: 22px; background: var(–md-cream); color: rgba(61, 41, 32, .82); border-radius: 12px; font-size: 16px; line-height: 1.55; }
.modyllo-wp__skeleton { min-height: 430px; background: #e5ddce; border-radius: 14px; animation: modyllo-pulse 1.25s ease-in-out infinite alternate; }
@keyframes modyllo-pulse { to { opacity: .48; } }

.modyllo-wp__campaign { width: min(1600px, calc(100% – 40px)); margin: clamp(78px, 9vw, 112px) auto; display: grid; grid-template-columns: 1.2fr .8fr; overflow: hidden; background: var(–md-moss); border-radius: 16px; box-shadow: var(–md-shadow); }
.modyllo-wp__campaign-media { min-height: 610px; }
.modyllo-wp__campaign-media img { height: 100%; object-fit: cover; object-position: center; }
.modyllo-wp__campaign-copy { padding: clamp(42px, 5vw, 74px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: var(–md-paper); }
.modyllo-wp__campaign-copy h2 { margin-bottom: 30px; font-family: Georgia, „Times New Roman”, serif; font-size: clamp(54px, 5.4vw, 82px) !important; font-weight: 400 !important; line-height: .94 !important; letter-spacing: -.04em; text-wrap: balance; }
.modyllo-wp__campaign-copy p { max-width: 42ch; margin-bottom: 30px; color: rgba(255, 250, 240, .86); }
.modyllo-wp__campaign .modyllo-wp__button { color: var(–md-brown) !important; background: var(–md-butter); border-color: var(–md-butter); }
.modyllo-wp__campaign .modyllo-wp__button:hover { background: var(–md-paper); }

@media (max-width: 960px) {
.modyllo-wp__hero-copy { grid-template-columns: 1fr; grid-template-areas: „title” „body” „actions”; row-gap: 24px; }
.modyllo-wp__hero-copy > p { margin: 0; }
.modyllo-wp__product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modyllo-wp__campaign { grid-template-columns: 1fr; }
.modyllo-wp__campaign-media { min-height: 480px; }
}

@media (max-width: 640px) {
.modyllo-wp__hero { width: calc(100% – 16px); margin-top: 0; }
.modyllo-wp__hero-media { height: 470px; }
.modyllo-wp__hero-media > img { object-position: 54% center; }
.modyllo-wp__hero-copy { padding: 42px 26px 48px; }
.modyllo-wp__hero h1 { font-size: clamp(50px, 15vw, 70px); }
.modyllo-wp__look-links { right: 9px; bottom: 9px; left: 9px; gap: 7px; }
.modyllo-wp__look-link { min-width: 0; min-height: 46px; flex: 1; padding: 10px 12px; gap: 8px; font-size: 12px; letter-spacing: .04em; }
.modyllo-wp__products,
.modyllo-wp__campaign { width: calc(100% – 24px); }
.modyllo-wp__product-grid { gap: 28px 10px; }
.modyllo-wp__skeleton { min-height: 300px; }
.modyllo-wp__product-button { min-height: 46px; padding-inline: 8px; font-size: 12px; letter-spacing: .035em; }
.modyllo-wp__campaign-media { min-height: 390px; }
.modyllo-wp__campaign-copy { padding: 42px 27px 48px; }
.modyllo-wp__campaign-copy h2 { font-size: clamp(44px, 12vw, 54px) !important; }
}

@media (hover: none) {
.modyllo-wp__hero:hover .modyllo-wp__hero-media > img,
.modyllo-wp__product-media:hover img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
.modyllo-wp *, .modyllo-wp *::before, .modyllo-wp *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

Dwa style.
Jeden rytm.

Codzienne fasony dla niej i dla niego — miękkie, swobodne i z odrobiną nostalgii. Noście razem albo zupełnie po swojemu.

Dla niej
Dla niego

Mniej zasad.
Więcej Ciebie.

Ta kolekcja łączy wygodę, charakter i kolory, które zostają na dłużej. Zbuduj swój zestaw bez dzielenia garderoby na okazje.

Zobacz kolekcję

(() => {
const escapeHtml = (value = ”) => String(value).replace(/[&'”]/g, (character) => ({
'&’: '&’, ”: ’>’, „'”: ''’, '”’: '"’
}[character]));

const formatPrice = (rawPrice, prices = {}) => {
const minorUnit = Number(prices.currency_minor_unit ?? 2);
const amount = Number(rawPrice || 0) / Math.pow(10, minorUnit);
try {
return new Intl.NumberFormat(’pl-PL’, { style: 'currency’, currency: prices.currency_code || 'PLN’ }).format(amount);
} catch (error) {
return `${amount.toFixed(minorUnit)} ${prices.currency_symbol || 'zł’}`;
}
};

const productPrice = (product) => {
const prices = product.prices || {};
const current = formatPrice(prices.price, prices);
const regular = formatPrice(prices.regular_price, prices);
const sale = prices.regular_price && prices.price !== prices.regular_price;
return sale ? `${escapeHtml(regular)}${escapeHtml(current)}` : `${escapeHtml(current)}`;
};

const productCard = (product) => {
const image = product.images?.[0] || {};
const productUrl = product.permalink || '/shop/’;
const hasOptions = Boolean(product.has_options);
const cartUrl = product.add_to_cart?.url || (hasOptions ? productUrl : `${window.location.origin}/?add-to-cart=${product.id}`);
const buttonText = product.add_to_cart?.text || (hasOptions ? 'Wybierz opcje’ : 'Dodaj do koszyka’);
const productImage = image.src
? ``
: ’Zdjęcie produktu wkrótce’;

return `

`;
};

document.querySelectorAll('[data-modyllo-page]’).forEach((page) => {
if (page.dataset.ready === 'true’) return;
page.dataset.ready = 'true’;

const root = page.querySelector('[data-products-section]’);
const grid = root?.querySelector('[data-products-grid]’);
if (!root || !grid) return;

const ids = (root.dataset.productIds || ”).split(’,’).map((id) => id.trim()).filter((id) => /^\d+$/.test(id));
const limit = Math.max(1, Math.min(20, Number(root.dataset.productsLimit) || 4));
const endpoint = new URL(root.dataset.storeApi, window.location.origin);
endpoint.searchParams.set(’per_page’, String(limit));

if (ids.length) endpoint.searchParams.set(’include’, ids.join(’,’));
else { endpoint.searchParams.set(’orderby’, 'date’); endpoint.searchParams.set(’order’, 'desc’); }

fetch(endpoint.toString(), { credentials: 'same-origin’ })
.then((response) => { if (!response.ok) throw new Error(`HTTP ${response.status}`); return response.json(); })
.then((products) => {
if (!Array.isArray(products) || products.length === 0) throw new Error(’Nie znaleziono produktów.’);
const ordered = ids.length ? ids.map((id) => products.find((product) => String(product.id) === id)).filter(Boolean) : products;
grid.innerHTML = ordered.slice(0, limit).map(productCard).join(”);
grid.setAttribute(’aria-busy’, 'false’);
})
.catch((error) => {
grid.setAttribute(’aria-busy’, 'false’);
grid.innerHTML = ’

Nie udało się pobrać produktów. Sprawdź, czy WooCommerce i Store API są aktywne. Dla konkretnych produktów uzupełnij atrybut data-product-ids.

’;
console.warn(’Produkty WooCommerce:’, error);
});
});
})();