/* ==========================================================================
MMII — custom styles
Živě na: /user/documents/upload/mmii.css
Napojeno jedním řádkem v Vzhled a obsah → Editor → HTML kód → Záhlaví:
Po každé úpravě souboru zvyšte ?v=19 na ?v=20 atd., jinak prohlížeč
drží starou verzi z cache.
Tady už limit 8 192 bajtů neplatí — pište, kolik potřebujete.
========================================================================== */
/* ---------- 1. TYPOGRAFIE ---------- */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6 {
font-family: "Instrument Sans", system-ui, Arial, sans-serif !important;
}
body, button, input, select, textarea {
font-weight: 400;
letter-spacing: 0;
}
h1, h2, h3, h4, strong, b { font-weight: 600; }
h1 { font-size: 32px; }
h2 { font-size: 22px; }
h3, h4 { font-size: 18px; }
/* ---------- 2. IKONY: lupa / účet / taška ----------
Shoptetí ikonový font kreslí tyhle tři velmi silným tahem (asi 10 %
velikosti ikony), takže při 20 px splývají do skvrny. A košík je
supermarketový vozík. Tady jsou překreslené na 1px obrysy. */
#header .icon-search,
#header .icon-login,
#header .icon-cart {
width: 21px;
height: 21px;
font-size: 0; /* skryje původní glyf */
}
#header .icon-search::before,
#header .icon-login::before,
#header .icon-cart::before {
content: "";
display: block;
width: 21px;
height: 21px;
background: currentColor; /* ikona přebírá barvu textu */
-webkit-mask: var(--icon) center / 21px 21px no-repeat;
mask: var(--icon) center / 21px 21px no-repeat;
}
#header .icon-search { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.4 15.4 20 20'/%3E%3C/svg%3E"); }
#header .icon-login { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); }
#header .icon-cart { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M4.5 7.5h15l-1.2 13H5.7z'/%3E%3Cpath d='M8.8 10V6.6a3.2 3.2 0 0 1 6.4 0V10'/%3E%3C/svg%3E"); }
/* ---------- 3. NAVIGACE POD TLAČÍTKEM MENU (jako Prada) ----------
Shoptet hamburger i okno navigace už má hotové, jen je schovává
nad 991 px. Tady se zapne i na desktopu. */
@media (min-width: 62em) {
/* zavřené menu je schované jen na desktopu — mobil si Shoptet
řídí sám a nesmíme mu do toho sahat */
body:not(.navigation-window-visible) #navigation { display: none; }
#header .navigation-buttons { position: static; }
#header [data-target="navigation"] {
display: flex !important;
position: absolute;
left: 0;
top: 0;
}
/* Hlavička musí zůstat nad překryvem, aby šel křížek kliknout.
#navigation je potomek #header, takže bez tohohle by ho překryv
přebil vlastním z-indexem. */
body.navigation-window-visible #header { position: relative; z-index: 60; }
body.navigation-window-visible .header-top { position: relative !important; z-index: 70 !important; }
/* otevřené menu přes celou obrazovku */
body.navigation-window-visible #navigation {
position: fixed !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
width: 100% !important; height: 100% !important; max-height: none !important;
z-index: 55 !important;
background: #fefdf9 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: auto !important;
padding: 0 !important; margin: 0 !important; border: 0 !important;
}
body.navigation-window-visible #navigation .navigation-in {
display: block !important; width: 100% !important; height: auto !important;
float: none !important; position: static !important;
}
/* Shoptet dává seznamu i položkám bílý podklad — na překryvu
by dělal světlý pruh přes celou šířku. */
body.navigation-window-visible #navigation ul,
body.navigation-window-visible #navigation li { background: transparent !important; }
body.navigation-window-visible #navigation ul {
display: block !important; width: 100% !important;
text-align: center !important;
margin: 0 !important; padding: 0 !important; list-style: none !important;
}
body.navigation-window-visible #navigation li {
display: block !important; float: none !important; width: 100% !important;
margin: 0 0 30px !important; border: 0 !important;
}
body.navigation-window-visible #navigation li > a {
display: inline-block !important;
font-size: 26px !important; font-weight: 400 !important;
letter-spacing: 0 !important; text-transform: none !important;
padding: 0 !important;
}
/* Přihlášení už je v ikonách vpravo */
body.navigation-window-visible #navigation .navigationActions { display: none !important; }
}
/* ---------- 3b. ODKAZ „Poznat MMII" NA TITULCE ----------
Byl to obyčejný text k nerozeznání od odstavce nad ním. Tenká
linka pod textem je to, co z něj dělá odkaz — víc není potřeba. */
.mmii-cta {
display: inline-block;
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 4px;
}
/* ---------- 3c. BUBLINA S NÁZVEM BARVY ----------
Shoptet nad vzorkem barvy ukazuje černou bublinu s názvem. Po kliknutí
tam zůstane viset a překryje vzorky. Barva je vidět z fotky, popisek
není potřeba. Množství je v této šabloně skryté, takže jiný tooltip
na detailu produktu není. */
body.type-detail .tooltip { display: none !important; }
/* ---------- 3d. VZORKY BAREV: kurzor a nadpis ----------
Shoptet dává vzorkům kurzor "nápověda" (otazník), protože k nim patřila
bublina s názvem barvy. Tu jsme zrušili, takže otazník už nedává smysl.
A nadpis „Barva" nad třemi fotkami kabelek nic nevysvětluje. */
.advanced-parameter-inner,
.advanced-parameter-inner img { cursor: pointer; }
/* Vzorky měly 40 px a barvu z nich nešlo poznat. Zdroj je 100 px,
takže 72 px se vejde bez rozmazání. */
.advanced-parameter,
.advanced-parameter-inner { width: 72px !important; height: 72px !important; }
.advanced-parameter-inner img {
width: 100% !important; height: 100% !important; object-fit: cover;
}
.advanced-parameter { margin: 0 12px 12px 0 !important; }
.p-variants-block .variant-label { display: none !important; }
/* ---------- 3e. RYTMUS PRAVÉHO SLOUPCE NA DETAILU ----------
Hlavní viník byla cena: font 17 px, ale řádkování 56 px a k tomu
8 px odsazení nahoře i dole — 72 px vysoký blok pro jeden řádek.
Zbytek jsou trojí 32px mezery pod sebou. Sjednoceno na 20 px. */
.price-final { line-height: 1.4 !important; padding: 0 !important; }
.p-variants-block,
.p-price-wrapper,
.detail-parameters { margin-bottom: 20px !important; }
.p-to-cart-block .add-to-cart { margin-top: 0 !important; }
/* ---------- 3f. MENU ÚPLNĚ PRYČ ----------
Kategorie odešly z menu (produkty jsou rovnou na titulce), takže by
hamburger otevíral prázdnou obrazovku. Pryč je celý — navigaci nese
logo (zpět na titulku) a patička. Až přibude sortiment, stačí smazat
tuhle jednu sekci a menu se vrátí i s překryvem ze sekce 3. */
#header [data-target="navigation"] { display: none !important; }
#navigation { display: none !important; }
/* ---------- 4. FOTOGALERIE: jen fotky vybrané barvy ----------
Shoptetí hlavní obrázek sedí nad skládanou galerií, takže se první
foto vykreslovalo dvakrát. Filtrování podle barvy dělá skript
v Zápatí (řídí se ALT textem fotky). */
.mmii-stacked .p-image { display: none !important; }
/* ---------- 5. MOBILNÍ HLAVIČKA ----------
Pod 992 px Shoptet fixuje hlavičku na 60 px, takže horní odsazení
vytlačovalo logo a ikony mimo pruh. */
@media (max-width: 991px) {
.header-top { padding-top: 0; }
}
/* ---------- 6. CO NA PRÉMIOVÝ ESHOP NEPATŘÍ ----------
Kdykoliv něco z toho budete chtít zpátky, stačí smazat řádek. */
.sidebar, /* levý panel */
.filters-wrapper, /* filtry */
.listSorting, /* řazení produktů */
.category-header, /* proužek po řazení */
.listingControls, /* „1 položek celkem" */
.products-top-wrapper, /* Nejprodávanější nad výpisem */
.footer-newsletter-full-width, /* newsletter */
.checkout-box-wrapper, /* kontakt v košíku */
.cart-summary > h2 { /* nadpis Dárky a slevy */
display: none;
}
/* ---------- 7. TITULKA: PRODUKTY AŽ POD TEXTEM ----------
Shoptet dává blok produktů nad uvítací text. Tady se pořadí přehodí,
aby produkty přišly až za „Poznat MMII". Nadpis „Novinky" je název
seznamu z administrace, na titulce nedává smysl. Při jednom nebo dvou
kusech se dlaždice centrují, aby řádek nevypadal useknutý. */
body.type-index #content { display: flex; flex-direction: column; }
body.type-index .welcome-wrapper { order: 1; }
body.type-index .products-wrapper { order: 2; }
body.type-index .homepage-group-title { display: none; }
body.type-index .products.product-slider {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 32px;
}
body.type-index .products-wrapper .product { margin: 0; }
/* ---------- 8. HLAVIČKA: LOGO A VYHLEDÁVÁNÍ ----------
Logo sedělo u dolní hrany, protože .site-name má výšku 44 px a k tomu
16 px odsazení nahoře i dole (border-box) — obsah se do něj nevešel
a přetékal dolů. Bez odsazení ho flex v hlavičce vycentruje sám.
Lupa je pryč: při jednom produktu není co hledat. */
#header [data-target="search"] { display: none !important; }
#search { display: none !important; }
.header-top .site-name { height: auto !important; padding: 0 !important; }
.header-top .site-name a { display: block !important; line-height: 0 !important; }
/* Shoptet drží logo na 44 px selektorem přes #header, proto stejná síla. */
#header .header-top .site-name img {
max-height: 30px !important; height: 30px !important;
width: auto !important; max-width: none !important;
}
/* ---------- 9. HERO NA TITULCE: VEJDE SE NA OBRAZOVKU ----------
Fotka byla přes 1 100 px vysoká, takže na běžném notebooku přetékala
a nebylo poznat, že pod ní něco je. Teď je přesně na výšku okna
minus hlavička. */
body.type-index .wide-carousel,
body.type-index .wide-carousel .item,
body.type-index .wide-carousel .item img {
height: calc(100vh - 60px) !important;
max-height: calc(100vh - 60px) !important;
}
body.type-index .wide-carousel .item img { object-fit: cover; width: 100%; }
/* ---------- 10. NIŽŠÍ HLAVIČKA ----------
80 px bílého pruhu na 30px logo bylo zbytečně mnoho vzduchu.
60 px drží stejný poměr jako mobilní hlavička, kterou Shoptet
fixuje na 60 px — hlavička je tak na všech šířkách stejná.
Odsazení jde pryč a výšku nese rovnou flexový wrapper, aby
logo i ikony zůstaly na svislém středu. */
@media (min-width: 62em) {
#header .header-top { height: 60px !important; padding: 0 !important; }
/* align-content kvůli košíku: tam se .user-action zalomí na druhý
řádek a logo se pak centruje jen v rámci prvního — o 7 px výš.
Centrování řádků jako celku to srovná na všech stránkách. */
#header .header-top .navigation-wrapper {
height: 60px !important;
align-items: center !important;
align-content: center !important;
}
}
/* ---------- 11. MOBIL: HERO A LOGO ----------
Na počítači je obrazovka na šířku, na telefonu na výšku. Stejný
ořez proto nemůže fungovat na obojím: fotka je na šířku (1448×1086)
a natažená na celou výšku telefonu by z kabelky ukázala jen úzký
pruh uprostřed. Na mobilu proto drží poměr 4:5 — kabelka se vejde
celá i se vzduchem kolem a pod fotkou je vidět, že stránka pokračuje.
Shoptet navíc dopočítá min-height skriptem, to je nutné přebít.
Logo je na mobilu zarovnané doleva; absolutní pozice s posunem
o půl šířky ho dá na střed bez ohledu na to, co je vedle. */
@media (max-width: 61.99em) {
body.type-index .wide-carousel,
body.type-index .wide-carousel .carousel,
body.type-index .wide-carousel .carousel-inner,
body.type-index .wide-carousel .item,
body.type-index .wide-carousel .item img {
height: auto !important; max-height: none !important; min-height: 0 !important;
}
body.type-index .wide-carousel .item img {
aspect-ratio: 4 / 5;
object-fit: cover;
width: 100%;
display: block;
}
/* V prohlížeči uvnitř Instagramu je okno o obě jeho lišty nižší než
v Safari. Poměr 4:5 je pevný, takže na nižším displeji vytlačil
slogan pod okraj a první obrazovka byla jen fotka bez jediného
slova. Strop odvozený z výšky okna ho tam vejde vždycky; na vyšších
telefonech se neuplatní vůbec a fotka drží 4:5. */
body.type-index .wide-carousel .item img {
max-height: calc(100vh - 138px) !important;
max-height: calc(100svh - 138px) !important;
}
#header .header-top .navigation-wrapper { position: relative; }
#header .header-top .site-name {
position: absolute !important;
left: 50% !important; right: auto !important;
width: auto !important; max-width: none !important;
transform: translateX(-50%);
text-align: center !important;
pointer-events: none;
}
#header .header-top .site-name a { display: inline-block !important; pointer-events: auto; }
}
/* ---------- 12. TEČKY GALERIE VPRAVO NA STŘED ----------
Byly vlevo dole, kde kolidovaly s kompozicí fotky. */
.type-detail .mmii-dots {
top: 50vh !important;
justify-items: end !important;
padding-left: 0 !important;
padding-right: 24px !important;
}
/* Tečky jsou bílé — na tmavé fotce kabelky se čtou, ale na bílém
pozadí fotek pásku zmizely úplně. Tenký tmavý obrys a měkký stín
je udrží viditelné na jakékoli fotce, aniž by zesílily. */
.type-detail .mmii-dots i {
box-shadow:
0 0 0 1px rgba(0, 0, 0, .22),
0 1px 3px rgba(0, 0, 0, .35) !important;
}
/* ---------- 13. MOBIL: FOTKY SE ROLUJÍ VE SVÉM OKNĚ ----------
Jako u Prady: fotky se posouvají v horní části obrazovky, spodní
část (název, barvy, cena, tlačítko) zůstává stát a je vidět bez
rolování. Galerie je proto vlastní okno se scroll-snapem.
Tečky musí ven z toho okna, jinak by rolovaly spolu s fotkami —
pozicují se proto vůči .p-detail-inner, které je mimo scroll. */
@media (max-width: 61.99em) {
body.type-detail .p-detail-inner { position: relative; }
body.type-detail .mmii-stacked {
position: static !important;
height: 42vh !important;
overflow-y: auto !important;
scroll-snap-type: y mandatory;
scrollbar-width: none;
}
body.type-detail .mmii-stacked::-webkit-scrollbar { display: none; }
body.type-detail .mmii-shot { height: 42vh !important; scroll-snap-align: start; }
body.type-detail .mmii-shot img { width: 100% !important; height: 100% !important; object-fit: cover; }
/* aby se název, barvy, cena i tlačítko vešly pod fotku bez rolování.
Shoptet dává .p-data-wrapper 40 px nahoře a 120 px dole — na mobilu
to mezi fotkou a názvem dělalo přes 50 px prázdna. */
body.type-detail .p-data-wrapper { padding-top: 8px !important; padding-bottom: 40px !important; }
body.type-detail .p-detail-inner-header { margin-top: 8px !important; }
body.type-detail .p-variants-block,
body.type-detail .p-price-wrapper,
body.type-detail .detail-parameters { margin-bottom: 12px !important; }
body.type-detail .advanced-parameter,
body.type-detail .advanced-parameter-inner { width: 56px !important; height: 56px !important; }
body.type-detail .mmii-dots {
position: absolute !important;
top: 21vh !important;
transform: translateY(-50%);
left: auto !important; right: 0 !important;
width: auto !important; height: auto !important;
margin: 0 !important;
padding: 0 16px 0 0 !important;
z-index: 5;
}
}
/* ---------- 14. HLAVIČKA ZŮSTÁVÁ PŘI ROLOVÁNÍ ----------
Logo a košík jsou tak po ruce po celou dobu prohlížení.
Mobilní hlavičku si Shoptet fixuje sám, proto jen desktop. */
@media (min-width: 62em) {
#header {
position: sticky !important;
top: 0 !important;
z-index: 50 !important;
background: #fefdf9;
}
}
/* ---------- 15. HLÁŠKA „PŘIDÁNO DO KOŠÍKU" ----------
Shoptet ji dává jedovatě zelenou (rgb 60,132,15) přes celou šířku
a 32 px vysokou. Tady má stejnou barvu jako tlačítko Do košíku,
takže zapadne do značky místo aby křičela. Chybové hlášky
necháváme červené — ty mají být vidět. */
.messages .msg-success {
background: #141414 !important;
color: #fefdf9 !important;
padding: 18px 16px !important;
font-size: 13px !important;
letter-spacing: .02em;
}
/* ---------- 16. PRÁZDNÝ KOŠÍK ----------
Shoptet sem dával obří tučný nadpis „Váš nákupní košík je prázdný"
a pod něj rozcestník s tlačítkem Hledat. Prázdný košík ale není
chybová hláška — je to pozvání zpátky do kolekce. Zůstává proto
tichý nadpis, jedna věta a odkazy na kategorie; vyhledávání u dvou
kategorií nemá co nabídnout. Nadpis a větu dodává mmii.js. */
body.in-kosik .cart-inner.cart-empty { padding: 96px 20px 140px !important; }
body.in-kosik .cart-empty .cart-heading {
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #141414 !important;
margin: 0 0 18px !important;
}
body.in-kosik .mmii-prazdno {
font-size: 14px !important;
line-height: 1.85 !important;
color: rgba(20, 20, 20, .72) !important;
max-width: 46ch;
margin: 0 0 36px !important;
}
body.in-kosik .empty-cart-boxes { display: block !important; margin: 0 !important; }
body.in-kosik .empty-cart-boxes > .col-md-6 + .col-md-6 { display: none !important; }
body.in-kosik .empty-cart-boxes > .col-md-6 { width: 100% !important; max-width: none !important; padding: 0 !important; }
body.in-kosik .empty-cart-boxes h3 { display: none !important; }
body.in-kosik .empty-cart-boxes ul {
list-style: none !important;
display: flex;
gap: 30px;
margin: 0 !important;
padding: 0 !important;
}
body.in-kosik .empty-cart-boxes li { margin: 0 !important; }
body.in-kosik .empty-cart-boxes a {
display: inline-block;
font-size: 11px !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #141414 !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(20, 20, 20, .25);
padding-bottom: 6px;
}
@media (min-width: 62em) {
body.in-kosik .cart-inner.cart-empty { padding: 96px 40px 140px !important; }
}
/* ---------- 17. ÚČET ZATÍM PRYČ ----------
Při jednom produktu je zakládání účtu překážka, ne služba —
a ikona vedla do prázdné historie objednávek. Nákup bez
registrace funguje dál, ověřeno průchodem objednávkou.
Skryté je tlačítko v hlavičce i přihlašovací okno.
Až budete mít opakované zákaznice, stačí smazat tuhle sekci. */
#header [data-target="login"] { display: none !important; }
#login.login-widget { display: none !important; }
/* ---------- 18. SLOGAN NA TITULCE ----------
Shoptet mu dává 48 px a tučný řez (třída .h1) — velký nadpis
překřičel i fotku nad sebou. Zkusili jsme 16 px, ale to skončilo
pixel od názvů produktů: značka, produkt i cena stejně velké,
žádná hierarchie. Pak 20 px, jenže věta v běžné velikosti pod
fotkou čte jako podnadpis z běžného webu.
Konec je jinde: slogan není nadpis, je to podpis pod obrazem.
Dostává proto přesně stejný tvar jako všechny ostatní popisky
na webu — 11 px, verzálky, prostrkání .14em (KONTAKT, ZVOLTE
VARIANTU, názvy kategorií). Celý web tak mluví jedním hlasem:
mluví fotka, písmo jen tiše popisuje. Hierarchii nedělá velikost,
ale vzduch kolem — proto je nad ním i pod ním velká mezera. */
.welcome-wrapper .welcome { text-align: center !important; }
.welcome-wrapper .welcome .h1 {
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
line-height: 1.6 !important;
color: #141414 !important;
margin: 0 !important;
}
/* ---------- 19. TITULKA: MÉNĚ BÍLÉHO MÍSTA KOLEM PRODUKTU ----------
Shoptet dává kolem produktu na titulce 48+32+16 px odsazení a pod
názvem drží prázdné sloty pro hvězdičky a tlačítka, které stejně
nepoužíváme. Tady se to celé stáhne. */
body.type-index .welcome-wrapper {
padding-top: 56px !important;
padding-bottom: 34px !important;
}
body.type-index .products-wrapper {
padding-top: 0 !important;
padding-bottom: 12px !important;
}
body.type-index .products-wrapper .ratings-wrapper,
body.type-index .products-wrapper .p-tools {
display: none !important;
}
body.type-index .products-wrapper .p-in { padding-top: 12px !important; }
body.type-index .products-wrapper .name {
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
}
body.type-index .products-wrapper .prices { padding: 4px 0 0 !important; }
/* ---------- 20. KONTAKT V PATIČCE ----------
Odkaz „Kontakt" je z patičky pryč (Vzhled a obsah → Odkazy).
Místo něj JS (mmii.js) vloží vpravo do patičky řádek
„Kontakt info@mmii.cz". */
#footer .system-footer { position: relative; }
.mmii-contact {
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: baseline;
gap: 14px;
line-height: 1;
}
.mmii-contact span {
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
opacity: .5;
}
.mmii-contact a {
font-size: 13px;
letter-spacing: .02em;
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 2px;
transition: border-color .2s;
}
.mmii-contact a:hover { border-bottom-color: currentColor; }
@media (max-width: 61.99em) {
/* Na telefonu se odkazy v patičce lámaly doprostřed druhého řádku —
vypadalo to jako chyba sazby. Pod sebe se ale patička natáhla přes
tři řádky a byla těžká. Držíme je proto na jednom řádku, menším
písmem a s tečkou mezi nimi (v 12 px se všechny tři vejdou do
390 px s rezervou). Když někdy přibude čtvrtý odkaz, zalomí se
celý blok, ne jeden osamělý odkaz. */
#footer .system-footer { padding: 30px 20px 20px !important; }
#footer .footer-links {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
row-gap: 10px;
}
#footer .footer-links .footer-link {
display: flex;
align-items: center;
padding: 0 !important;
}
#footer .footer-links .footer-link a { font-size: 12px !important; }
/* Tečky mezi odkazy jen dokud se vejdou na jeden řádek. Se čtvrtým
odkazem se blok zalomí a tečka by zůstala viset na začátku druhého
řádku — to vypadá jako překlep. Od čtyř odkazů proto jen mezery. */
#footer .footer-links .footer-link + .footer-link::before {
content: "\00b7";
margin: 0 9px;
font-size: 12px;
opacity: .4;
}
#footer .footer-links { column-gap: 0; }
#footer .footer-links:has(.footer-link:nth-child(4)) { column-gap: 18px; }
#footer .footer-links:has(.footer-link:nth-child(4)) .footer-link + .footer-link::before {
content: none;
}
.mmii-contact {
position: static;
transform: none;
justify-content: center;
margin-top: 22px;
}
}
/* ---------- 21. DLAŽDICE PRODUKTU NA TITULCE (styl Prada) ----------
Text zarovnaný vlevo pod fotku, cena obyčejným řezem,
pod cenou barevné puntíky variant (vkládá je mmii.js). */
body.type-index .products-wrapper .p-in,
body.type-index .products-wrapper .name,
body.type-index .products-wrapper .prices,
body.type-index .products-wrapper .price-final {
text-align: left !important;
}
body.type-index .products-wrapper .name span { font-size: 15px !important; }
body.type-index .products-wrapper .price-final strong {
font-weight: 400 !important;
font-size: 15px !important;
}
.mmii-swatches {
display: flex;
align-items: center;
gap: 9px;
margin-top: 9px;
/* 3px svisle navíc: kroužek u vybrané barvy přesahuje puntík o 3 px,
takže bez toho by spodní mezera k patičce vypadala menší než ta
mezi sloganem a fotkou. */
padding: 3px 0;
}
.mmii-swatches i {
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
background-size: cover;
background-position: center;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.mmii-swatches em {
font-style: normal;
font-size: 12px;
letter-spacing: .02em;
opacity: .5;
}
/* ---------- 22. PŘEPÍNÁNÍ VARIANT V DLAŽDICI ----------
Kliknutím na puntík se ve fotce dlaždice ukáže daná barva
a proklik vede rovnou na tuto variantu (obsluhuje mmii.js). */
.mmii-swatches i { cursor: pointer; }
.mmii-swatches i.is-on {
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, .18),
0 0 0 2px #fefdf9,
0 0 0 3px #141414;
}
body.type-index .products-wrapper .image img { transition: opacity .18s ease; }
body.type-index .products-wrapper .image img.is-swapping { opacity: 0; }
/* ---------- 23. SPODNÍ LIŠTA ----------
Úplný konec stránky je jen technická patička — menší písmo,
obyčejný řez, ať netahá pozornost. */
#footer .footer-bottom,
#footer .footer-bottom .copyright,
#footer .footer-bottom .copyright strong,
#footer .footer-bottom .cookies-settings,
#footer .footer-bottom #signature,
#footer .footer-bottom #signature .title {
font-size: 12px !important;
font-weight: 400 !important;
letter-spacing: .01em;
}
#footer .footer-bottom .mmii-sep {
margin: 0 10px;
opacity: .45;
}
/* Na telefonu se spodní lišta lepila na konec stránky a mezi
copyrightem a podpisem byla zbytečně velká díra. Srovnáme
rytmus a dáme stránce pořádné zakončení. */
@media (max-width: 61.99em) {
#footer .footer-bottom {
flex-direction: column;
align-items: center;
text-align: center;
padding: 22px 20px 32px !important;
}
#footer .footer-bottom > span + span { padding-top: 16px !important; }
}
/* ---------- 24. OZNAČENÍ ZNAČKY U LOGA ----------
Přihláška ochranné známky MMII (spis 612880) je podaná 14.8.2026,
zatím ale NENÍ zapsaná — proto ™, ne ®. Symbol ® smí použít až
držitel zapsané známky; do té doby by šlo o klamavé označení.
Až Úřad známku zapíše, stačí níže vyměnit \2122 za \00ae.
Značka visí absolutně vedle loga, takže logo zůstane přesně
na středu a nikam se neposune. */
#header .header-top .site-name { text-align: center; }
#header .header-top .site-name > a {
display: inline-block !important;
position: relative;
}
#header .header-top .site-name > a::after {
content: "\2122";
position: absolute;
left: 100%;
top: 0;
margin-left: 3px;
font-size: 8px;
line-height: 1;
opacity: .45;
}
/* ---------- 25. PŘECHOD MEZI STRÁNKAMI ----------
Místo tvrdého skoku se obsah přesune do strany a prolne.
Hlavička a patička zůstávají stát — mění se jen to, co se
opravdu mění. Prohlížeče bez podpory prostě přeskočí. */
@view-transition { navigation: auto; }
#header { view-transition-name: mmii-hlavicka; }
#footer { view-transition-name: mmii-paticka; }
::view-transition-old(root) {
animation: mmii-odchod .26s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
animation: mmii-prichod .38s cubic-bezier(0, 0, .2, 1) both;
}
@keyframes mmii-odchod {
to { opacity: 0; transform: translateX(-32px); }
}
@keyframes mmii-prichod {
from { opacity: 0; transform: translateX(32px); }
}
::view-transition-old(mmii-hlavicka),
::view-transition-new(mmii-hlavicka),
::view-transition-old(mmii-paticka),
::view-transition-new(mmii-paticka) {
animation: none;
mix-blend-mode: normal;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
}
/* ---------- 26. NÁKUPNÍ TAŠKA JAKO BOČNÍ PANEL ----------
Shoptet umí jen rozbalovací okénko pod ikonou tašky. Tady se z něj
stane panel u pravého okraje, který zajede zprava přes ztmavené
pozadí — jako u Ralph Lauren. Závoj, hlavičku se zavíráním a druhé
tlačítko doplňuje mmii.js. */
/* --- panel --- */
#cart-widget.cart-widget {
display: block !important;
position: fixed !important;
top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
width: 400px !important; max-width: 100vw !important;
/* Výšku bere z top/bottom, ne ze 100dvh — na mobilu se dvh liší od
skutečné plochy a panel pak vylezl kus nad horní okraj obrazovky. */
box-sizing: border-box !important;
height: auto !important; max-height: none !important;
margin: 0 !important;
padding: env(safe-area-inset-top) 0 0 !important;
border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
background: #fefdf9 !important;
z-index: 1000 !important;
overflow: hidden !important;
visibility: hidden;
transform: translateX(100%);
transition: transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .34s;
}
body.cart-window-visible #cart-widget.cart-widget {
visibility: visible;
transform: translateX(0);
transition: transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
/* Panel bydlí uvnitř #header (sticky, z-index 50) — na dobu otevření ho
vytáhneme nad závoj, a zároveň nad administrátorskou lištu Shoptetu
(z-index 1002), která by mu jinak ukrojila horních 25 px. Zákazník
lištu nevidí, ale při úpravách vzhledu to mate. */
body.cart-window-visible #header { z-index: 1005 !important; }
/* Hláška „vloženo do košíku" musí zůstat i nad panelem. */
.messages { z-index: 1006 !important; }
#cart-widget .cart-widget-inner {
display: flex !important; flex-direction: column !important;
height: 100% !important; max-height: none !important;
margin: 0 !important; padding: 0 !important; border: 0 !important;
background: transparent !important;
}
.mmii-backdrop {
position: fixed; inset: 0; z-index: 999;
background: rgba(20, 20, 20, .32);
opacity: 0; pointer-events: none;
transition: opacity .34s ease;
}
body.cart-window-visible .mmii-backdrop { opacity: 1; pointer-events: auto; }
/* --- hlavička panelu --- */
.mmii-bag-head {
flex: 0 0 auto;
display: flex; align-items: center; justify-content: space-between;
padding: 26px 24px 18px;
border-bottom: 1px solid rgba(20, 20, 20, .10);
}
.mmii-bag-head span {
font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.mmii-bag-head em { font-style: normal; opacity: .45; margin-left: 5px; }
.mmii-bag-head button {
border: 0; background: none; padding: 4px; cursor: pointer;
font-size: 14px; line-height: 1; opacity: .5;
}
.mmii-bag-head button:hover { opacity: 1; }
/* --- seznam --- */
#cart-widget .cart-widget-products {
flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important;
overflow-y: auto !important;
margin: 0 !important; padding: 0 24px !important; border: 0 !important;
}
#cart-widget .cart-widget-products-inner { margin: 0 !important; padding: 0 !important; }
/* Položka ve stylu Ralph Lauren: velká fotka přes celou šířku panelu,
pod ní název, varianta, cena a počet kusů. */
#cart-widget .cart-widget-product {
display: grid !important;
grid-template-columns: 1fr auto;
align-items: start;
margin: 0 0 26px !important; padding: 0 0 26px !important;
border: 0 !important; border-bottom: 1px solid rgba(20, 20, 20, .08) !important;
}
#cart-widget .cart-widget-product:last-child { border-bottom: 0 !important; }
#cart-widget .cart-widget-product-image {
grid-column: 1 / -1; grid-row: 1;
width: 100% !important;
height: auto !important; min-height: 0 !important; max-height: none !important;
margin: 0 0 16px !important; padding: 0 !important;
line-height: 0 !important;
}
#cart-widget .cart-widget-product-image a {
display: block !important; width: 100% !important;
height: auto !important; line-height: 0 !important;
}
#cart-widget .cart-widget-product-image img {
display: block;
width: 100% !important; height: auto !important;
max-width: none !important; max-height: none !important;
border-radius: 0 !important;
}
/* Položka čte jako řádek v knize: název a ✕ nahoře, pod ním varianta,
dole na jedné lince cena vlevo a počet kusů vpravo. */
#cart-widget .cart-widget-product-name-and-price { display: contents !important; }
#cart-widget .cart-widget-product-name {
grid-column: 1; grid-row: 2;
font-size: 12px !important; line-height: 1.8 !important; opacity: .75;
}
#cart-widget .cart-widget-product-price {
grid-column: 1; grid-row: 3;
align-self: center; margin: 10px 0 0 !important;
}
#cart-widget .cart-widget-product-name strong { font-weight: 600 !important; font-size: 15px !important; }
#cart-widget .cart-widget-product-price strong { font-weight: 400 !important; font-size: 14px !important; }
#cart-widget .cart-widget-product-amount {
grid-column: 2 !important; grid-row: 3 !important;
justify-self: end; align-self: center;
margin: 10px 0 0 !important;
}
#cart-widget .cart-widget-product-unit { display: none !important; }
#cart-widget .cart-widget-product-delete {
grid-column: 2; grid-row: 2;
align-self: start; justify-self: end;
margin: 0 !important; padding-top: 2px !important;
}
#cart-widget .cart-widget-product-delete .btn,
#cart-widget .cart-widget-product-delete button {
border: 0 !important; background: transparent !important;
padding: 0 !important; opacity: .4;
}
#cart-widget .cart-widget-product-delete button:hover { opacity: 1; }
/* --- spodek --- */
#cart-widget .cart-widget-bottom {
flex: 0 0 auto !important;
display: flex !important; flex-direction: column !important;
position: static !important; width: auto !important; height: auto !important;
margin: 0 !important;
padding: 20px 24px calc(20px + env(safe-area-inset-bottom)) !important;
border-top: 1px solid rgba(20, 20, 20, .10) !important;
background: #fefdf9 !important;
}
/* „Dopravu máte zdarma" pryč — u kabelky za 22 000 Kč je doprava
samozřejmost, ne argument. Hlásit ji patří do slev, ne sem.
Objevuje se jen v tomhle panelu, v košíku ani u dopravy a platby ne. */
#cart-widget .cart-free-shipping { display: none !important; }
#cart-widget .cart-widget-button { margin: 0 !important; padding: 0 !important; position: static !important; }
#cart-widget .cart-widget-button .btn {
display: block !important; width: 100% !important;
min-height: 0 !important; height: auto !important;
margin: 0 !important; padding: 14px !important;
background: #141414 !important; color: #fefdf9 !important;
border: 1px solid #141414 !important; border-radius: 0 !important;
font-size: 11px !important; font-weight: 400 !important; line-height: 1.2 !important;
letter-spacing: .1em !important; text-transform: uppercase !important;
}
.mmii-bag-continue {
display: block; width: 100%; margin-top: 8px;
padding: 14px; cursor: pointer;
background: transparent; color: #141414;
border: 1px solid rgba(20, 20, 20, .35); border-radius: 0;
font-family: inherit; font-size: 11px; line-height: 1.2;
letter-spacing: .1em; text-transform: uppercase;
}
.mmii-bag-continue:hover { border-color: #141414; }
/* --- prázdná taška ---
Shoptet pro hlášku recykluje .cart-widget-product, takže by na ni
sedla mřížka pro položku. Tady se z ní udělá prostý vystředěný text. */
#cart-widget .cart-widget-product[data-testid="cartTitle"] {
display: block !important;
padding: 56px 0 !important;
border-bottom: 0 !important;
text-align: center; font-size: 13px; opacity: .6;
}
#cart-widget .cart-widget-products:has([data-testid="cartTitle"]) {
display: flex !important; align-items: center; justify-content: center;
}
.mmii-bag-foot {
flex: 0 0 auto;
margin: 0; padding: 20px 24px calc(20px + env(safe-area-inset-bottom));
border-top: 1px solid rgba(20, 20, 20, .10);
}
.mmii-bag-foot .mmii-bag-continue { margin-top: 0; }
@media (max-width: 30em) {
#cart-widget.cart-widget { width: 100% !important; }
}
/* ---------- 27. DROBEČKOVÁ NAVIGACE PRYČ ----------
„Domů / O MMII" nemá na webu se čtyřmi stránkami co dělat.
Zůstává v HTML (kvůli strukturovaným datům pro Google), jen se
nezobrazuje — a místo po ní dostane nadpis stránky jako vzduch. */
.breadcrumbs { display: none !important; }
body.type-page #content { padding-top: 44px !important; }
/* ---------- 28. NADPIS CHYBOVÉ STRÁNKY VIZUÁLNĚ PRYČ ----------
Na chybové stránce nese viditelný nadpis h2 (tak to má Shoptet
postavené) a h1 by ho jen zdvojilo. Neodstraňujeme ho z HTML:
h1 je pro Google i pro odečítače obrazovky hlavní orientační bod.
Proto standardní trik — zůstane v kódu, jen ho není vidět.
Na ostatních textových stránkách je nadpis vidět, viz sekce 42. */
body.in-404 #content h1 {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ---------- 29. STRÁNKA KOŠÍKU (styl Prada) ----------
Shoptet sem dává číslované rámečky kroků, tabulku s jednotkovou
i celkovou cenou, zelené „Skladem" a béžový box rekapitulace.
Tady z toho zůstane jen to podstatné: fotka, název, barva, počet
a cena — a vpravo součet s jedním černým tlačítkem. */
/* --- kroky objednávky: bez číselných rámečků, jen tichý řádek --- */
.cart-header {
display: flex !important; gap: 28px;
margin: 0 0 40px !important; padding: 0 0 20px !important;
border-bottom: 1px solid rgba(20, 20, 20, .10);
list-style: none;
}
.cart-header .step { margin: 0 !important; padding: 0 !important; background: none !important; }
.cart-header .step > strong::before,
.cart-header .step > a::before,
.cart-header .step::before,
.cart-header .step::after { display: none !important; content: none !important; }
.cart-header .step > strong,
.cart-header .step > a {
display: inline-block; padding: 0 !important;
font-size: 11px !important; font-weight: 400 !important;
letter-spacing: .14em; text-transform: uppercase;
color: rgba(20, 20, 20, .38) !important; text-decoration: none !important;
background: none !important; border: 0 !important;
}
.cart-header .step.active > strong { color: #141414 !important; }
.cart-header .step > strong > span,
.cart-header .step > a > span { background: none !important; }
/* --- položky --- */
.cart-table { border: 0 !important; }
.cart-table tr.removeable { border-bottom: 1px solid rgba(20, 20, 20, .08); }
.cart-table td { border: 0 !important; padding: 26px 0 !important; vertical-align: top !important; }
.cart-table td.cart-p-image { width: 150px !important; padding-right: 24px !important; }
.cart-table td.cart-p-image a { display: block; }
.cart-table td.cart-p-image img {
width: 130px !important; max-width: none !important; height: auto !important; display: block;
}
.cart-table td.p-name a.main-link {
font-size: 15px !important; font-weight: 600 !important;
color: #141414 !important; text-decoration: none !important;
}
.cart-table td.p-name .p-info-wrapper,
.cart-table td.p-name .variant { font-size: 12px !important; opacity: .75; }
/* „Skladem" má v šabloně zelenou natvrdo ve style="" */
.cart-p-availability .availability-label {
color: rgba(20, 20, 20, .45) !important;
font-weight: 400 !important; font-size: 11px !important;
letter-spacing: .1em; text-transform: uppercase;
}
.cart-p-availability .p-label { display: none !important; }
/* jednotková cena je při jednom kusu jen zdvojená informace */
.cart-table td.p-price { display: none !important; }
.cart-table td.p-total { text-align: right !important; }
.cart-table td.p-total .price-final { font-weight: 400 !important; font-size: 15px !important; }
.cart-table td.p-total .p-label { display: none !important; }
.cart-table .delete-cart-item button,
.cart-table td.p-total form button {
border: 0 !important; background: none !important; opacity: .4;
}
.cart-table .delete-cart-item button:hover,
.cart-table td.p-total form button:hover { opacity: 1; }
/* --- „Dopravu máte zdarma!" i tady pryč --- */
.cart-summary { display: none !important; }
/* --- rekapitulace --- */
.sidebar-in-cart .summary-wrapper {
background: transparent !important;
padding: 0 !important;
border: 0 !important;
}
.sidebar-in-cart .summary-wrapper h2 {
font-size: 11px !important; font-weight: 400 !important;
letter-spacing: .16em; text-transform: uppercase; opacity: .55;
margin: 0 0 18px !important;
}
.sidebar-in-cart .box {
background: transparent !important; border: 0 !important;
border-top: 1px solid rgba(20, 20, 20, .12) !important;
border-radius: 0 !important; padding: 20px 0 0 !important;
}
.sidebar-in-cart .price-wrapper {
display: flex !important; align-items: baseline; justify-content: space-between;
margin: 0 0 22px !important;
}
.sidebar-in-cart .price-label { font-size: 13px !important; font-weight: 400 !important; }
.sidebar-in-cart .price.price-primary { font-size: 17px !important; font-weight: 400 !important; }
.sidebar-in-cart .next-step { display: flex !important; flex-direction: column-reverse; gap: 14px; }
.sidebar-in-cart .next-step .btn-conversion {
display: block !important; width: 100% !important;
margin: 0 !important; padding: 16px !important;
background: #141414 !important; color: #fefdf9 !important;
border: 1px solid #141414 !important; border-radius: 0 !important;
font-size: 11px !important; font-weight: 400 !important; line-height: 1.2 !important;
letter-spacing: .14em !important; text-transform: uppercase !important;
text-align: center;
}
.sidebar-in-cart .next-step .next-step-back {
display: block !important; width: 100%; margin: 0 !important; padding: 0 !important;
background: none !important; border: 0 !important;
font-size: 12px !important; text-align: center;
color: rgba(20, 20, 20, .6) !important; text-decoration: underline !important;
}
.sidebar-in-cart .next-step .next-step-back:hover { color: #141414 !important; }
/* kroky drž u sebe vlevo */
.cart-header { justify-content: flex-start !important; }
.cart-header .step { flex: 0 0 auto !important; width: auto !important; }
/* řádek jako mřížka: fotka | popis + počet | cena */
.cart-table, .cart-table tbody { display: block !important; width: 100% !important; }
.cart-table tr.removeable {
display: grid !important;
grid-template-columns: 154px 1fr auto;
align-items: start;
padding: 26px 0 !important;
}
.cart-table td { display: block !important; padding: 0 !important; }
.cart-table td.cart-p-image { grid-column: 1; grid-row: 1 / span 2; padding-right: 24px !important; }
.cart-table td.p-name { grid-column: 2; grid-row: 1; }
.cart-table td.p-quantity { grid-column: 2; grid-row: 2; margin-top: 14px !important; }
.cart-table td.p-total { grid-column: 3; grid-row: 1; white-space: nowrap; }
/* šipka u tlačítka pryč */
.sidebar-in-cart .next-step .btn-conversion::after,
.sidebar-in-cart .next-step .order-button-text::after { display: none !important; content: none !important; }
.cart-table td.p-quantity { text-align: left !important; }
.cart-table td.p-quantity > div,
.cart-table td.p-quantity .quantity { margin-left: 0 !important; margin-right: auto !important; }
.cart-table td.p-quantity .p-label { display: none !important; }
@media (max-width: 47.99em) {
.cart-table tr.removeable { grid-template-columns: 96px 1fr; }
.cart-table td.cart-p-image { padding-right: 16px !important; }
.cart-table td.cart-p-image img { width: 96px !important; }
.cart-table td.p-total {
grid-column: 2; grid-row: 3;
margin-top: 14px !important; text-align: left !important;
}
.cart-header { gap: 18px; flex-wrap: wrap; }
}
@media (max-width: 47.99em) {
.cart-table tr.removeable { position: relative; }
/* Šablona má dvě mazací tlačítka — na mobilu ukazuje to v názvu,
kde ho absolutně pozicuje přes text. Použijeme to druhé, u ceny. */
.cart-table td.p-name .delete-cart-item { display: none !important; }
.cart-table td.p-total form.inline {
display: inline-block !important;
margin-left: 14px !important;
vertical-align: middle;
}
}
/* ---------- 30. DOPRAVA A PLATBA (druhý krok objednávky) ----------
Stejný jazyk jako košík: béžové boxy a ikony pryč, možnosti jako
řádky s tenkou linkou, zelené „ZDARMA" ztlumené, rekapitulace
vpravo bez pozadí a s jedním černým tlačítkem. */
/* --- boxy dopravy a platby: bez béžového pozadí a ikon --- */
.co-box {
background: transparent !important;
border: 0 !important;
border-top: 1px solid rgba(20, 20, 20, .12) !important;
border-radius: 0 !important;
padding: 28px 0 0 !important;
margin: 0 0 44px !important;
}
.co-box > h2 {
font-size: 11px !important; font-weight: 400 !important;
letter-spacing: .16em; text-transform: uppercase;
color: rgba(20, 20, 20, .55) !important;
margin: 0 0 8px !important; padding: 0 !important;
}
.co-box > h2 i { display: none !important; }
/* --- jednotlivé možnosti --- */
.shipping-billing-table .radio-wrapper {
border: 0 !important; border-bottom: 1px solid rgba(20, 20, 20, .08) !important;
border-radius: 0 !important; background: none !important;
margin: 0 !important; padding: 0 !important;
}
.shipping-billing-table .radio-wrapper label {
display: grid !important;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 0 20px;
margin: 0 !important; padding: 20px 0 20px 34px !important;
}
.shipping-billing-table .radio-wrapper .payment-info { grid-column: 1; }
.shipping-billing-table .radio-wrapper .payment-logo { grid-column: 2; }
.shipping-billing-table .radio-wrapper .payment-shipping-price { grid-column: 3; }
.shipping-billing-table .radio-wrapper .payment-name,
.shipping-billing-table .radio-wrapper .payment-info > strong {
font-size: 14px !important; font-weight: 600 !important;
}
.shipping-billing-table .radio-wrapper .payment-description,
.shipping-billing-table .radio-wrapper .payment-info small {
font-size: 12px !important; opacity: .6;
}
/* zelené ZDARMA ztiš */
.payment-shipping-price {
font-size: 11px !important; font-weight: 400 !important;
letter-spacing: .12em; text-transform: uppercase;
white-space: nowrap;
}
.payment-shipping-price.for-free { color: rgba(20, 20, 20, .45) !important; }
.shipping-billing-table .radio-wrapper .payment-logo img {
max-height: 22px !important; width: auto !important; opacity: .8;
}
/* --- rekapitulace vpravo --- */
#checkoutSidebar .cart-content {
background: transparent !important;
padding: 0 !important;
border: 0 !important;
}
.order-summary-inner {
background: transparent !important;
border: 0 !important; border-radius: 0 !important;
padding: 0 !important;
}
.order-summary-inner > h2 {
font-size: 11px !important; font-weight: 400 !important;
letter-spacing: .16em; text-transform: uppercase; opacity: .55;
margin: 0 0 18px !important;
}
.order-summary .cart-item {
display: grid !important;
grid-template-columns: 1fr auto;
gap: 2px 16px;
border: 0 !important; border-bottom: 1px solid rgba(20, 20, 20, .08) !important;
padding: 14px 0 !important; margin: 0 !important;
}
/* šablona kreslí uvnitř rekapitulace linky jako v tabulce */
.order-summary .cart-item > *,
.order-summary .cart-items > * > * { border: 0 !important; }
.order-summary .cart-item-name { grid-column: 1; font-size: 13px !important; }
.order-summary .cart-item-name a { color: #141414 !important; text-decoration: none !important; }
.order-summary .cart-item-amount { grid-column: 1; font-size: 12px !important; opacity: .55; }
.order-summary .cart-item-price {
grid-column: 2; grid-row: 1 / span 2;
align-self: center;
white-space: nowrap !important;
text-align: right; font-size: 13px !important;
}
.order-summary-item { border: 0 !important; padding: 14px 0 !important; }
.order-summary-item.helper,
.order-recapitulation .recapitulation-single {
display: flex !important; justify-content: space-between; gap: 16px;
flex-wrap: nowrap !important;
font-size: 13px !important;
}
.order-summary-item.helper > * { width: auto !important; margin: 0 !important; }
.order-summary-item.helper > *:last-child { text-align: right; white-space: nowrap; }
.order-recapitulation .recapitulation-single { padding: 4px 0 !important; }
.order-recapitulation .recapitulation-single > * { width: auto !important; margin: 0 !important; }
.order-recapitulation .recapitulation-shipping-billing-info { text-align: right; }
/* šablona vytahuje součet zápornými okraji mimo sloupec */
.order-summary-item.price {
border-top: 1px solid rgba(20, 20, 20, .12) !important;
margin: 8px 0 0 !important; padding-top: 18px !important;
}
.order-summary-item.price .price-wrapper {
display: flex !important; align-items: baseline; justify-content: space-between;
}
.order-summary-item.price .price-label { font-size: 13px !important; font-weight: 400 !important; }
.order-summary-item.price .price.price-primary {
font-size: 17px !important; font-weight: 400 !important; white-space: nowrap;
}
/* --- tlačítka --- */
.next-step {
display: flex !important; flex-direction: column-reverse; gap: 14px;
margin-top: 22px !important;
}
.next-step .btn-conversion,
.next-step .next-step-forward {
display: block !important; width: 100% !important;
margin: 0 !important; padding: 16px !important;
background: #141414 !important; color: #fefdf9 !important;
border: 1px solid #141414 !important; border-radius: 0 !important;
font-size: 11px !important; font-weight: 400 !important; line-height: 1.2 !important;
letter-spacing: .14em !important; text-transform: uppercase !important;
text-align: center;
}
.next-step .next-step-back {
display: block !important; width: 100%; margin: 0 !important; padding: 0 !important;
background: none !important; border: 0 !important;
font-size: 12px !important; text-align: center;
color: rgba(20, 20, 20, .6) !important; text-decoration: underline !important;
}
.next-step .next-step-back:hover { color: #141414 !important; }
.next-step .btn-conversion::after,
.next-step .order-button-text::after { display: none !important; content: none !important; }
/* ---------- 31. INFORMACE O VÁS (třetí krok objednávky) ----------
Účet jsme skryli v hlavičce i v košíku — ať nevyskočí ani tady.
Zbytek do stejného jazyka: béžové fieldsety pryč, pole s ostrými
rohy a tenkým rámečkem. */
.form-group:has(> div > a.login-from-cart) { display: none !important; }
.form-group:has(> #set-registration) { display: none !important; }
#checkoutContent fieldset.box,
#checkoutContent .box.box-bg-default {
background: transparent !important;
border: 0 !important;
border-top: 1px solid rgba(20, 20, 20, .12) !important;
border-radius: 0 !important;
padding: 28px 0 0 !important;
margin: 0 0 40px !important;
}
#checkoutContent fieldset.box > h2,
#checkoutContent fieldset.box > legend {
font-size: 11px !important; font-weight: 400 !important;
letter-spacing: .16em; text-transform: uppercase;
color: rgba(20, 20, 20, .55) !important;
margin: 0 0 20px !important; padding: 0 !important;
}
#checkoutContent fieldset.box > h2 i { display: none !important; }
#checkoutContent input[type="text"],
#checkoutContent input[type="email"],
#checkoutContent input[type="tel"],
#checkoutContent select,
#checkoutContent textarea {
border-radius: 0 !important;
border: 1px solid rgba(20, 20, 20, .22) !important;
background: transparent !important;
padding: 12px 14px !important;
font-size: 14px !important;
}
#checkoutContent input[type="text"]:focus,
#checkoutContent input[type="email"]:focus,
#checkoutContent input[type="tel"]:focus,
#checkoutContent textarea:focus {
border-color: #141414 !important;
outline: 0 !important;
}
/* ---------- 32. REKAPITULACE OBJEDNÁVKY + FORMULÁŘ (3. krok) ----------
Ve 3. kroku žijí řádky rekapitulace v .cart-items (ne v .order-recapitulation)
a mají obrácené pořadí: cena je uvnitř PŘED názvem.
Sjednocujeme obojí do jednoho tichého řádku: název vlevo, cena vpravo,
vše normální řez písma - stejně jako v kroku Doprava a platba. ---------- */
.recapitulation-single {
display: flex !important;
justify-content: space-between;
gap: 16px;
flex-wrap: nowrap !important;
padding: 4px 0 !important;
font-size: 13px !important;
font-weight: 400 !important;
}
.recapitulation-single > * {
width: auto !important;
margin: 0 !important;
font-weight: 400 !important;
}
.recapitulation-shipping-billing-info { text-align: right; }
.recapitulation-single:not(.recapitulation-shipping-billing) > span { display: none !important; }
.recapitulation-single:not(.recapitulation-shipping-billing) > strong {
display: flex !important;
width: 100%;
justify-content: space-between;
gap: 16px;
}
.recapitulation-single:not(.recapitulation-shipping-billing) > strong > span {
order: 2;
white-space: nowrap;
}
.order-summary-item.helper,
.order-summary-item.helper > *,
.order-summary-item.helper strong,
.order-summary-item.helper b,
.recapitulation-single strong,
.recapitulation-single strong span,
.recapitulation-shipping-billing-info { font-weight: 400 !important; }
#checkoutContent .form-legend {
font-size: 11px !important;
opacity: .5;
margin: 0 0 18px !important;
}
#checkoutContent .form-group > label,
#checkoutContent .form-group > .label,
#checkoutContent label.label {
font-size: 12px !important;
font-weight: 400 !important;
letter-spacing: .02em;
opacity: .75;
margin-bottom: 6px !important;
}
#checkoutContent .form-group { margin-bottom: 18px !important; }
#checkoutContent input[type="checkbox"] + label,
#checkoutContent .form-group label { font-size: 13px !important; }
.consents .label {
font-size: 12px !important;
opacity: .65;
line-height: 1.6 !important;
}
.consents .label a { color: inherit !important; text-decoration: underline !important; }
/* jedna linka pod krokovníkem, ne dvě (co-box si nese vlastní horní linku) */
#checkoutContent .cart-header { border-bottom: 0 !important; }
/* „Zdarma" místo křiklavého ZDARMA */
.payment-shipping-price.for-free { text-transform: none !important; }
/* ---------- 33. MOBIL: OKRAJE A ROZLOŽENÍ ----------
Na telefonu se obsah dotýkal okrajů displeje - hlavně v košíku
a v objednávce, kde měl kontejner nulové odsazení. Dáváme všude
stejný okraj 20 px (detail produktu si ho řeší sám, fotka jde
přes celou šířku) a přeskládáme řádky, které se do šířky nevešly.
---------- */
@media (max-width: 61.99em) {
.container.content-wrapper { padding-left: 20px !important; padding-right: 20px !important; }
/* detail produktu si okraje řeší sám (fotka jde přes celou šířku) */
body.type-detail .container.content-wrapper { padding-left: 0 !important; padding-right: 0 !important; }
#checkoutContent .form-control-wrapper,
#checkoutContent .form-group > div { max-width: 100% !important; }
#checkoutContent .phone-combined-input { display: flex !important; align-items: stretch; }
#checkoutContent .phone-combined-input > input { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; }
.cart-header { gap: 14px !important; flex-wrap: nowrap !important; }
.cart-header .step, .cart-header .step > strong, .cart-header .step > span, .cart-header .step a { font-size: 10px !important; letter-spacing: .10em !important; }
/* dopravy: na úzkém displeji jen název a cena */
.shipping-billing-table .radio-wrapper label { grid-template-columns: 1fr auto !important; gap: 0 14px !important; padding: 18px 0 18px 30px !important; }
.shipping-billing-table .radio-wrapper .payment-logo { display: none !important; }
.shipping-billing-table .radio-wrapper .payment-info { max-width: none !important; width: auto !important; }
.shipping-billing-table .radio-wrapper .payment-shipping-price { grid-column: 2 !important; align-self: start; padding-top: 2px; }
.shipping-billing-table .radio-wrapper .payment-name,
.shipping-billing-table .radio-wrapper .payment-info > strong { font-size: 13px !important; }
}
@media (max-width: 47.99em) {
/* košík: méně prázdna nad prvním zbožím, o něco větší fotka */
.cart-header { margin-bottom: 24px !important; }
.cart-table { margin-top: 0 !important; }
.cart-table tr.removeable { grid-template-columns: 118px 1fr !important; padding: 22px 0 !important; }
.cart-table td.cart-p-image img { width: 118px !important; }
.cart-table td.cart-p-image { width: 118px !important; padding-right: 18px !important; }
.cart-table tr.removeable > td { width: auto !important; min-width: 0 !important; justify-self: stretch; }
.cart-table tr.removeable > td.cart-p-image { justify-self: start; }
/* taška přes celou šířku telefonu */
#cart-widget.cart-widget { width: 100% !important; }
}
@media (max-width: 29.99em) {
/* krokovník na jeden řádek i na úzkém telefonu */
.cart-header { gap: 10px !important; }
.cart-header .step, .cart-header .step > strong, .cart-header .step > span, .cart-header .step a { letter-spacing: .05em !important; }
}
/* varianta v rekapitulaci normálním řezem */
#checkoutSidebar .main-link-variant,
#checkoutContent .main-link-variant { font-weight: 400 !important; }
/* uvnitř .co-box nekresli druhou linku hned pod tou první */
#checkoutContent .co-box .box,
#checkoutContent .co-box .co-box { border-top: 0 !important; padding-top: 0 !important; }
/* poznámka o zemi tiše, bez tučného a kurzívy */
#checkoutContent .form-control-wrapper--with-note > strong { font-weight: 400 !important; }
#checkoutContent .helpNote {
display: block;
margin-top: 4px;
font-style: normal !important;
font-size: 12px !important;
opacity: .55;
}
#checkoutContent .helpNote a { color: inherit !important; text-decoration: underline !important; }
/* ---------- 34. DETAIL PRODUKTU: ODKAZ NA POPIS ----------
Pravý sloupec končil tlačítkem a o detailním popisu pod fotkami
nikdo nevěděl. Přidáváme pod tlačítko tichý odkaz, který tam sjede,
a samotný blok s popisem sundáváme z bílé karty do typografie webu.
---------- */
.mmii-more {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 26px;
padding-bottom: 6px;
font-size: 11px;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
color: #141414 !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(20, 20, 20, .25);
transition: border-color .2s ease;
}
.mmii-more::after {
content: "";
width: 7px; height: 7px;
border-right: 1px solid rgba(20, 20, 20, .55);
border-bottom: 1px solid rgba(20, 20, 20, .55);
transform: translateY(-2px) rotate(45deg);
}
.mmii-more:hover { border-bottom-color: #141414; }
/* blok s popisem dole: bez bílé karty a stínu, tiché nadpisy */
.p-detail-tabs-wrapper { background: transparent !important; }
.p-detail-tabs-wrapper .description-inner,
.p-detail-tabs-wrapper .tab-content,
.p-detail-tabs-wrapper .basic-description {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
}
.p-detail-tabs-wrapper .basic-description { padding: 60px 0 20px !important; }
.basic-description h1, .basic-description h2,
.basic-description h3, .basic-description h4 {
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #141414 !important;
margin: 0 0 14px !important;
}
.basic-description h3, .basic-description h4 { margin-top: 40px !important; }
.basic-description > :first-child { margin-top: 0 !important; }
.basic-description p {
max-width: 62ch;
margin: 0 0 12px !important;
font-size: 14px !important;
line-height: 1.8 !important;
color: rgba(20, 20, 20, .72) !important;
}
/* název produktu tišeji, ne tučnou bezpatkou */
body.type-detail .p-detail-inner-header h1,
body.type-detail .p-detail-inner-header-mobile .h1 {
font-size: 24px !important;
font-weight: 400 !important;
letter-spacing: .01em;
margin: 0 0 4px !important;
}
/* tečky galerie přesně na střed okna (mřížka má nulovou výšku) */
.type-detail .mmii-dots { align-content: center !important; }
/* ---------- 35. STRÁNKA KATEGORIE ----------
Kategorie vypadala jako kus jiné šablony: tučný nadpis na střed,
tučná cena, žádné barvy variant. Sjednocujeme ji s titulkou —
tichý nadpis vlevo, dlaždice zarovnané vlevo, cena obyčejným
řezem a pod ní puntíky variant (vkládá je mmii.js). ---------- */
/* nadpis kategorie tiše a vlevo, jako ostatní popisky na webu */
body.type-category #content h1,
body.type-category #content .category-title {
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
text-align: left !important;
color: #141414 !important;
line-height: 1.4 !important;
margin: 0 0 22px !important;
}
/* dlaždice stejně jako na titulce */
body.type-category .products .ratings-wrapper,
body.type-category .products .p-tools { display: none !important; }
body.type-category .products .p-in { padding-top: 12px !important; }
body.type-category .products .name {
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
}
body.type-category .products .prices { padding: 4px 0 0 !important; }
body.type-category .products .p-in,
body.type-category .products .name,
body.type-category .products .prices,
body.type-category .products .price-final { text-align: left !important; }
body.type-category .products .name span { font-size: 15px !important; }
body.type-category .products .price-final strong {
font-weight: 400 !important;
font-size: 15px !important;
}
/* vzduch nad nadpisem a slušný okraj od kraje obrazovky */
body.type-category #content { padding-top: 44px; }
/* ---------- 36. COOKIE LIŠTA A PRÁZDNÁ KATEGORIE ----------
Cookie lišta je první věc, kterou návštěvník vidí, a byla to
výchozí šoptetí bílá karta se zeleným tlačítkem. Předěláváme ji
na tichý pruh přes celou šířku v barvě webu. Ve stejném duchu
i okno s nastavením a prázdná kategorie. ---------- */
/* ---- spodní lišta ---- */
.siteCookies.siteCookies--bottom {
background: #fefdf9 !important;
border-top: 1px solid rgba(20, 20, 20, .12) !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 20px 24px !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: auto !important;
max-width: none !important;
transform: none !important;
margin: 0 !important;
}
.siteCookies__form {
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 28px;
max-width: 1200px;
margin: 0 auto !important;
}
.siteCookies__content {
display: flex !important;
align-items: center;
gap: 20px;
flex: 1 1 auto;
}
.siteCookies__text,
.siteCookies__text p {
margin: 0 !important;
font-size: 12px !important;
line-height: 1.7 !important;
color: rgba(20, 20, 20, .7) !important;
}
.siteCookies__links { margin: 0 !important; }
.siteCookies__links a,
.siteCookies__text a {
color: rgba(20, 20, 20, .7) !important;
text-decoration: underline !important;
font-size: 12px !important;
}
.siteCookies__buttonWrap {
display: flex !important;
align-items: center;
gap: 18px;
flex: 0 0 auto;
}
.siteCookies__button {
border-radius: 0 !important;
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
padding: 13px 24px !important;
min-width: 0 !important;
}
/* Odmítnout musí jít stejně snadno jako souhlasit — jinak je to
tmavý vzorec a dozor to u cookie lišt hlídá. Obě tlačítka mají
proto stejnou velikost i tvar; liší se jen výplní. */
.siteCookies__buttonWrap .siteCookies__button:first-child {
background: none !important;
border: 1px solid rgba(20, 20, 20, .45) !important;
padding: 13px 24px !important;
color: #141414 !important;
text-decoration: none !important;
transition: border-color .2s;
}
.siteCookies__buttonWrap .siteCookies__button:first-child:hover {
border-color: #141414 !important;
}
/* druhé je Souhlasím — černé, jako Do košíku */
.siteCookies__buttonWrap .siteCookies__button:last-child {
background: #141414 !important;
border: 1px solid #141414 !important;
color: #fefdf9 !important;
}
/* „Nastavení" k ostatním akcím vpravo a tiše */
.siteCookies__links { margin-left: auto !important; }
.siteCookies__link.js-cookies-settings,
.siteCookies button.siteCookies__link {
background: none !important;
border: 0 !important;
border-radius: 0 !important;
padding: 13px 0 !important;
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: rgba(20, 20, 20, .7) !important;
text-decoration: underline !important;
}
/* ---- okno s nastavením cookies ---- */
.cookiesDialog {
background: #fefdf9 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.cookiesSetting__title {
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #141414 !important;
}
.cookiesSetting__perex { font-size: 13px !important; color: rgba(20, 20, 20, .7) !important; }
.cookiesSetting__data {
background: none !important;
border: 1px solid rgba(20, 20, 20, .12) !important;
border-radius: 0 !important;
}
.cookiesSetting__item__name { font-weight: 400 !important; }
.cookiesSetting__item__text { font-size: 12px !important; color: rgba(20, 20, 20, .6) !important; }
.cookiesSetting__button,
.cookiesSetting__uncheckLink {
border-radius: 0 !important;
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
padding: 13px 24px !important;
}
/* zelené „Povolit vše" na černé jako zbytek webu */
.cookiesSetting__button--green,
.cookiesSetting__button {
background: #141414 !important;
border: 1px solid #141414 !important;
color: #fefdf9 !important;
}
/* „Potvrdit moje volby" jen obrysem, ať nekřičí dvě černá tlačítka vedle sebe */
.cookiesSetting__button:not(.cookiesSetting__button--green) {
background: none !important;
color: #141414 !important;
}
.cookiesSetting__uncheckLink {
background: none !important;
border: 0 !important;
padding: 13px 0 !important;
color: rgba(20, 20, 20, .7) !important;
text-decoration: underline !important;
}
/* ---- prázdná kategorie ---- */
.empty-content {
background-image: none !important;
padding: 40px 0 60px !important;
text-align: left !important;
}
.empty-content h2 {
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #141414 !important;
margin: 0 0 12px !important;
}
.empty-content p {
font-size: 14px !important;
line-height: 1.8 !important;
color: rgba(20, 20, 20, .7) !important;
margin: 0 0 10px !important;
}
.empty-content .btn {
display: inline-block;
background: none !important;
border: 0 !important;
border-bottom: 1px solid rgba(20, 20, 20, .25) !important;
border-radius: 0 !important;
padding: 0 0 6px !important;
margin-top: 12px;
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #141414 !important;
}
/* ilustrace krabice u prázdné kategorie pryč */
.empty-content h2::after,
.empty-content h2::before { display: none !important; content: none !important; }
/* text kategorie vlevo a v čitelné šířce, ne na střed */
body.type-category .category-perex:not(.empty-content),
body.type-category .category-perex:not(.empty-content) p {
text-align: left !important;
font-size: 14px !important;
line-height: 1.8 !important;
color: rgba(20, 20, 20, .72) !important;
}
body.type-category .category-perex:not(.empty-content) p { max-width: 62ch; margin: 0 0 12px !important; }
/* ---------- 37. COOKIE LIŠTA NA TELEFONU ----------
Na širokém displeji jde text a tlačítka vedle sebe, na telefonu se
text mačkal do úzkého sloupce. Tady se to skládá pod sebe. ---------- */
@media (max-width: 47.99em) {
.siteCookies.siteCookies--bottom { padding: 18px 20px !important; }
.siteCookies__form { display: block !important; }
.siteCookies__content { display: block !important; }
.siteCookies__links { margin: 10px 0 0 !important; text-align: left !important; }
.siteCookies__buttonWrap {
margin-top: 16px;
gap: 16px;
justify-content: flex-start;
}
.siteCookies__buttonWrap .siteCookies__button { flex: 1 1 0; text-align: center; padding: 13px 10px !important; }
}
/* tlačítko „Nastavení" je na telefonu na celou šířku, text v něm doleva */
@media (max-width: 47.99em) {
.siteCookies__link.js-cookies-settings { text-align: left !important; }
}
/* ---------- 38. MENU S KATEGORIEMI (styl Dioru) ----------
Šablona měla klasickou vodorovnou lištu s kategoriemi, která se
do minimalistického záhlaví nehodila. Místo ní je vlevo tiché
slovo MENU a po kliknutí vyjede zleva panel se seznamem
kategorií. Obsah panelu skládá mmii.js z položek menu. ---------- */
.mmii-menu-open {
background: none;
border: 0;
padding: 0;
cursor: pointer;
font-family: inherit;
font-size: 11px;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
color: #141414;
}
#header .navigation-tools { display: flex; align-items: center; }
/* na telefonu je slot vlevo skrytý, ukážeme ho jen kvůli tlačítku */
@media (max-width: 61.99em) {
#header .navigation-tools {
display: flex !important;
align-items: center;
flex: 0 0 auto !important;
width: auto !important;
order: -1;
}
}
.mmii-menu {
position: fixed;
top: 0; bottom: 0; left: 0;
width: 420px;
max-width: 100vw;
box-sizing: border-box;
background: #fefdf9;
z-index: 1003;
overflow-y: auto;
visibility: hidden;
transform: translateX(-100%);
transition: transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .34s;
}
body.mmii-menu-visible .mmii-menu {
visibility: visible;
transform: translateX(0);
transition: transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
body.mmii-menu-visible .mmii-backdrop { opacity: 1; pointer-events: auto; }
.mmii-menu-in {
display: flex;
flex-direction: column;
min-height: 100%;
padding: env(safe-area-inset-top) 34px 34px;
}
.mmii-menu-close {
display: flex;
align-items: center;
gap: 12px;
background: none;
border: 0;
padding: 30px 0 24px;
cursor: pointer;
font-family: inherit;
font-size: 11px;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
color: #141414;
}
.mmii-x { position: relative; width: 12px; height: 12px; flex: 0 0 auto; }
.mmii-x::before, .mmii-x::after {
content: "";
position: absolute;
top: 50%; left: 0;
width: 100%; height: 1px;
background: #141414;
}
.mmii-x::before { transform: rotate(45deg); }
.mmii-x::after { transform: rotate(-45deg); }
.mmii-menu-list { border-top: 1px solid rgba(20, 20, 20, .12); }
.mmii-menu-list a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 21px 0;
border-bottom: 1px solid rgba(20, 20, 20, .12);
font-size: 16px;
color: #141414 !important;
text-decoration: none !important;
}
.mmii-menu-list a::after {
content: "";
width: 7px; height: 7px;
flex: 0 0 auto;
border-top: 1px solid rgba(20, 20, 20, .45);
border-right: 1px solid rgba(20, 20, 20, .45);
transform: rotate(45deg);
transition: transform .2s ease;
}
.mmii-menu-list a:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.mmii-menu-sub { padding: 26px 0 0; }
.mmii-menu-sub a {
display: block;
padding: 8px 0;
font-size: 13px;
color: rgba(20, 20, 20, .7) !important;
text-decoration: none !important;
}
.mmii-menu-sub a:hover { color: #141414 !important; }
.mmii-menu-pata {
margin-top: auto;
padding-top: 34px;
display: flex;
align-items: baseline;
gap: 14px;
}
.mmii-menu-pata span {
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(20, 20, 20, .45);
}
.mmii-menu-pata a {
font-size: 13px;
color: #141414 !important;
text-decoration: none !important;
}
@media (max-width: 47.99em) {
.mmii-menu { width: 100%; }
.mmii-menu-in { padding-left: 24px; padding-right: 24px; }
}
/* místo slova MENU tři tenké linky, ať sedí k ikoně tašky vpravo */
.mmii-menu-open {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 20px;
height: 20px;
font-size: 0;
letter-spacing: 0;
}
.mmii-menu-open span {
display: block;
width: 18px;
height: 1px;
background: #141414;
}
/* ---------- 39. STRÁNKA VYHLEDÁVÁNÍ ----------
Zůstala v původní šabloně: tučné nadpisy na střed. Srovnáváme
ji s kategorií — tiché nadpisy vlevo, odkazy pod sebou. ---------- */
/* nadpis stránky i mezinadpisy tiše a vlevo, jako u kategorie */
body.type-search #content h2,
body.type-search #content h4,
body.type-search .search-products-heading {
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
text-align: left !important;
color: #141414 !important;
line-height: 1.4 !important;
margin: 0 0 18px !important;
}
body.type-search #content > h2 { margin-bottom: 30px !important; }
body.type-search #content { padding-top: 44px; }
/* skupiny odkazů vlevo pod sebe, ne na střed */
body.type-search .search-results-groups,
body.type-search .search-results-groups * { text-align: left !important; }
body.type-search .search-results-groups > div {
padding: 0 0 26px;
margin: 0 0 26px;
border-bottom: 1px solid rgba(20, 20, 20, .12);
}
body.type-search .search-results-groups a {
display: inline-block;
padding: 6px 0;
margin-right: 26px;
font-size: 14px;
color: #141414 !important;
text-decoration: none !important;
}
body.type-search .search-results-groups a:hover { text-decoration: underline !important; }
/* dlaždice produktů stejně jako v kategorii */
body.type-search .products .ratings-wrapper,
body.type-search .products .p-tools { display: none !important; }
body.type-search .products .p-in { padding-top: 12px !important; }
body.type-search .products .name { height: auto !important; min-height: 0 !important; margin: 0 !important; }
body.type-search .products .prices { padding: 4px 0 0 !important; }
body.type-search .products .p-in,
body.type-search .products .name,
body.type-search .products .prices,
body.type-search .products .price-final { text-align: left !important; }
body.type-search .products .name span { font-size: 15px !important; }
body.type-search .products .price-final strong { font-weight: 400 !important; font-size: 15px !important; }
/* ---------- 40. DLAŽDICE PRODUKTU NA STŘED (styl Dioru) ----------
Původně byla dlaždice zarovnaná vlevo podle Prady. Dior ji má
na střed: název obyčejným řezem, cena pod ním tlumeně šedá
a pod cenou barvy. Platí na titulce, v kategorii i ve
vyhledávání. ---------- */
/* dlaždice produktu na střed (styl Dioru) */
body.type-index .products-wrapper .p-in,
body.type-index .products-wrapper .name,
body.type-index .products-wrapper .prices,
body.type-index .products-wrapper .price-final,
body.type-category .products .p-in,
body.type-category .products .name,
body.type-category .products .prices,
body.type-category .products .price-final,
body.type-search .products .p-in,
body.type-search .products .name,
body.type-search .products .prices,
body.type-search .products .price-final { text-align: center !important; }
.products .name span {
font-size: 15px !important;
font-weight: 400 !important;
letter-spacing: .01em;
color: #141414 !important;
}
.products .price-final strong {
font-size: 15px !important;
font-weight: 400 !important;
color: rgba(20, 20, 20, .55) !important;
}
.products .prices { padding-top: 6px !important; }
.mmii-swatches { justify-content: center; margin-top: 12px; gap: 10px; }
/* ---------- 41. CHYBOVÁ STRÁNKA ----------
Shoptet tu hlásí „A safra! Něco se pokazilo." — na eshopu s kabelkou
za dvacet tisíc to zní jako z úplně jiné značky. Text přepisujeme
v mmii.js, tady jen dorovnáváme okraje a odkazy postavíme vedle
sebe. Nadpis nechává Shoptet v h2, h1 si schovává pro vyhledávače. */
body.in-404 #content { padding-top: 44px; }
body.in-404 .empty-content .mmii-404-odkazy {
display: flex !important;
flex-wrap: wrap;
gap: 28px;
margin-top: 24px !important;
}
/* ---------- 42. STRÁNKY S TEXTEM ----------
Obchodní podmínky a ochrana osobních údajů jsou dlouhé dokumenty.
Přes celou šířku monitoru měl řádek přes dvě stě znaků a nedal se
číst. Text proto dostává čitelnou míru, okraje jako zbytek webu
a nadpisy ve stejném tichém rejstříku jako kategorie. Nadpis
stránky se vrací — u smluvního dokumentu čtenář potřebuje vědět,
na čem se právě nachází. ---------- */
body.type-page:not(.in-404) #content h1 {
position: static !important;
text-align: left !important;
width: auto !important;
height: auto !important;
margin: 0 0 30px !important;
padding: 0 !important;
overflow: visible !important;
clip: auto !important;
white-space: normal !important;
border: 0 !important;
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #141414 !important;
}
body.type-page .pageArticleDetail { max-width: 68ch; }
body.type-page .pageArticleDetail h2 {
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #141414 !important;
margin: 44px 0 14px !important;
}
body.type-page .pageArticleDetail h3 {
font-size: 14px !important;
font-weight: 400 !important;
letter-spacing: .02em !important;
color: #141414 !important;
margin: 28px 0 10px !important;
}
body.type-page .pageArticleDetail p,
body.type-page .pageArticleDetail li {
font-size: 14px !important;
line-height: 1.85 !important;
color: rgba(20, 20, 20, .72) !important;
}
body.type-page .pageArticleDetail p { margin: 0 0 14px !important; }
body.type-page .pageArticleDetail ul { margin: 0 0 14px !important; padding-left: 18px !important; }
body.type-page .pageArticleDetail li { margin: 0 0 8px !important; }
body.type-page .pageArticleDetail strong {
font-weight: 500 !important;
color: #141414 !important;
}
body.type-page .pageArticleDetail a {
color: #141414 !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(20, 20, 20, .25);
}
body.type-page .mmii-lead {
font-size: 17px !important;
line-height: 1.7 !important;
color: #141414 !important;
margin: 0 0 30px !important;
}
/* ---------- 43. HLÁŠKA „VLOŽENO DO KOŠÍKU" PRYČ ----------
Po vložení zboží se přes záhlaví posadil černý pruh s hláškou.
Vedle vyjeté tašky je to druhá informace o téže věci — a ta horší.
Jako u Ralpha Laurena mluví jen panel. Hlášky, které s košíkem
nesouvisí (odeslaný dotaz, přihlášení), si mmii.js označí
a ty zůstávají vidět. ---------- */
.messages { pointer-events: none; }
.messages .msg-success { display: none !important; }
.messages .msg-success.mmii-hlaska {
display: block !important;
pointer-events: auto;
}
/* ---------- 44. VARIANTY NA DETAILU PRODUKTU
Shoptet dělá z variant velké čtverce 72 × 72 px s průhledným
okrajem — světlé odstíny na bílém pozadí splývají. Používáme
proto úplně stejné puntíky jako v dlaždici na titulce
(sekce 21 a 22), aby byl web jednotný. ---------- */
body.type-detail .advanced-parameter {
display: inline-block !important;
width: auto !important;
height: auto !important;
margin: 0 9px 0 0 !important;
padding: 3px 0 !important;
vertical-align: middle;
}
body.type-detail .advanced-parameter-inner {
display: block !important;
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
min-height: 15px !important;
border: 0 !important;
border-radius: 50% !important;
overflow: hidden !important;
background-size: cover !important;
background-position: center !important;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18) !important;
}
body.type-detail .advanced-parameter-inner img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
body.type-detail .advanced-parameter:has(input:checked) .advanced-parameter-inner {
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, .18),
0 0 0 2px #fff,
0 0 0 3px #141414 !important;
}
/* ---------- 45. SERVISNÍ ŘÁDKY POD TLAČÍTKEM
Doprava, vrácení a předobjednávka patří k produktu, ne do
obchodních podmínek. Drobným písmem a potichu — mají uklidnit,
ne poutat pozornost. Vkládá je mmii.js. ---------- */
.mmii-sluzby {
list-style: none !important;
margin: 18px 0 0 !important;
padding: 0 !important;
}
.mmii-sluzby li {
position: relative;
padding-left: 14px;
font-size: 12px;
line-height: 1.9;
letter-spacing: .01em;
color: rgba(20, 20, 20, .58);
}
.mmii-sluzby li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(20, 20, 20, .3);
}
/* ---------- 46. STRÁNKA VYHLEDÁVÁNÍ
Jediná stránka, kterou jsme nikdy neupravovali — zůstal na ní
rukopis původní šablony: vše na střed, tučné nadpisy, oddělovací
linky bez obsahu. Srovnáváme ji se zbytkem webu. ---------- */
body.type-search #content { text-align: left !important; }
body.type-search #content > h2 {
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #141414 !important;
margin: 0 0 30px !important;
}
body.type-search #content > h2 .highlight {
display: inline !important;
font-weight: 400 !important;
}
body.type-search .search-products-heading,
body.type-search .search-results-group h4 {
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: rgba(20, 20, 20, .5) !important;
margin: 0 0 14px !important;
}
/* skupiny výsledků: pryč s linkami, které nic neoddělují */
body.type-search .search-results-groups,
body.type-search .search-results-group,
body.type-search .search-results-group-list li {
border: 0 !important;
padding: 0 !important;
}
/* šablona dává položkám margin: 0 auto, což je ve flexu vycentruje */
body.type-search .search-results-group-list li { margin: 0 !important; }
body.type-search .search-results-group { margin: 0 0 36px !important; }
body.type-search .search-results-group-list ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex;
flex-direction: row !important;
align-items: center !important;
flex-wrap: wrap;
justify-content: flex-start !important;
gap: 22px;
}
/* linka nad „Produkty" nic neoddělovala — dvě skupiny výsledků
od sebe drží mezera, ne čára */
body.type-search .search-results { border-top: 0 !important; }
body.type-search .search-results-group-list a {
display: inline-block;
font-size: 14px;
color: #141414 !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(20, 20, 20, .25);
padding-bottom: 4px;
}
/* dlaždice stejně jako na titulce — text vlevo pod fotkou */
body.type-search .products .p-in,
body.type-search .products .name,
body.type-search .products .prices,
body.type-search .products .price-final {
text-align: left !important;
}
body.type-search .products .name span { font-size: 15px !important; }
body.type-search .products .price-final strong {
font-weight: 400 !important;
font-size: 15px !important;
}
/* ---------- 47. JEDNOTNÝ FORMÁT STRÁNKY
Okraj od kraje obrazovky byl na každém typu stránky jiný: titulka
a košík držely 55 px, texty a kategorie 95 px. Když člověk přechází
z titulky do textu, obsah se skokem posune — čte se to jako dvě
různé šablony. Jeden formát pro všechno; jediná výjimka je detail
produktu, který je záměrně přes celou šířku okna (fotka vlevo,
údaje vpravo). Dřív to bylo rozepsané ve čtyřech sekcích zvlášť,
teď je to na jednom místě. ---------- */
@media (min-width: 62em) {
body:not(.type-product) .container.content-wrapper {
padding-left: 40px !important;
padding-right: 40px !important;
}
}
/* ---------- 48. POČÍTADLO KUSŮ
Šablona ho kreslí jako tři orámovaná políčka — vypadá to jako
formulář z e-shopu s elektronikou. Necháváme jen dvě tiché značky
a číslo mezi nimi; rámeček nepotřebuje, sousedí vždycky s cenou.
Tlačítka si Shoptet pozicuje absolutně uvnitř span.quantity
(relativní, s vnitřním odsazením po stranách) — proto stačí
přenastavit šířky a strany. ---------- */
#cart-widget .cart-widget-product-amount span.quantity,
.cart-table .p-quantity span.quantity {
display: inline-block !important;
width: auto !important; height: auto !important;
padding: 0 18px !important;
border: 0 !important; border-radius: 0 !important;
background: none !important;
font-weight: 400 !important;
}
#cart-widget .cart-widget-product-amount form,
.cart-table .p-quantity form { margin: 0 !important; padding: 0 !important; }
#cart-widget .cart-widget-product-amount form { text-align: right !important; }
#cart-widget .cart-widget-product-amount label,
#cart-widget .cart-widget-product-amount input.amount,
.cart-table .p-quantity label,
.cart-table .p-quantity input.amount {
width: 22px !important; height: 18px !important;
padding: 0 !important; border: 0 !important; background: none !important;
font-size: 12px !important; line-height: 18px !important;
letter-spacing: .04em !important;
color: rgba(20, 20, 20, .75) !important;
text-align: center !important;
}
#cart-widget .cart-widget-product-amount .increase,
#cart-widget .cart-widget-product-amount .decrease,
.cart-table .p-quantity .increase,
.cart-table .p-quantity .decrease {
width: 14px !important; height: 18px !important;
border: 0 !important; background: transparent !important;
font-weight: 400 !important;
opacity: .32;
transition: opacity .2s;
}
#cart-widget .cart-widget-product-amount .decrease,
.cart-table .p-quantity .decrease { left: 0 !important; right: auto !important; }
#cart-widget .cart-widget-product-amount .increase,
.cart-table .p-quantity .increase { left: auto !important; right: 0 !important; }
#cart-widget .cart-widget-product-amount .increase:hover,
#cart-widget .cart-widget-product-amount .decrease:hover,
.cart-table .p-quantity .increase:hover,
.cart-table .p-quantity .decrease:hover { opacity: 1; }
#cart-widget .cart-widget-product-amount .increase__sign,
#cart-widget .cart-widget-product-amount .decrease__sign,
.cart-table .p-quantity .increase__sign,
.cart-table .p-quantity .decrease__sign {
font-size: 12px !important; line-height: 18px !important;
font-weight: 400 !important;
}
.cart-table td.p-quantity { margin-top: 12px !important; }
/* ============================================================
MMII — odstíny typograficky + stránka Moje objednávka
Vzorky jako barevné dlaždice jsou vědomě pryč: ploché barvy
přebíjely fotku. Až budou vzorky makrofotky skutečné kůže,
dají se vrátit (verze s dlaždicemi leží v mmii-v2.css).
============================================================ */
/* Poznamka: pravidlo html,body s overflow-x clip bylo odstraneno.
Na mobilu delalo z html scrollovaci kontejner o vysce okna a detail
produktu pak neslo scrollovat pres fotky. Zbyly 9px vodorovny pretok
je mensi zlo. */
/* ── pokladna: bílý podklad ────────────────────────────────────
Košík i kroky objednávky mají krátký obsah, pod ním prosvítalo
tělo dokumentu (#F8F6F1) jako šedý blok. ── */
body.ordering-process{background:#fff}
/* náhled produktu v košíku: Shoptet sem posílá odvozeninu related
(100×100 px) a vykresluje ji ve 130 px, proto byla rozpitá.
JS v mmii-b.js přepíše cestu na /detail/ (423×318), tady je rám.
Výška jde přes aspect-ratio, protože Shoptet těm obrázkům vnucuje
height:auto !important. */
td.cart-p-image{padding:0 24px 0 0 !important}
td.cart-p-image a{display:block !important;width:130px !important;height:130px !important;overflow:hidden !important;background:#f3efe9 !important}
td.cart-p-image img{width:130px !important;aspect-ratio:1/1 !important;object-fit:cover !important;object-position:center !important;display:block !important;max-width:none !important}
@media (max-width:767px){
td.cart-p-image{padding:0 16px 0 0 !important}
td.cart-p-image a{width:96px !important;height:96px !important}
td.cart-p-image img{width:96px !important}
}
/* ── odstíny ve výpisu (homepage, kategorie) ───────────────── */
.mmii-swatches{flex-wrap:wrap !important;gap:8px 18px !important;margin-top:16px !important;padding:0 !important}
.mmii-swatches i{width:auto !important;height:auto !important;border-radius:0 !important;background:none !important;box-shadow:none !important;font-size:9px;font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:rgba(20,20,20,.38);border-bottom:1px solid transparent;padding-bottom:3px;transition:color .25s,border-color .25s}
.mmii-swatches i::before{content:attr(title)}
.mmii-swatches i:hover{color:rgba(20,20,20,.8)}
.mmii-swatches i.is-on{color:#141414;border-bottom-color:rgba(20,20,20,.35)}
@media (max-width:767px){
.mmii-swatches{gap:7px 13px !important}
.mmii-swatches i{font-size:8px;letter-spacing:.14em}
}
/* ── odstíny na detailu produktu ───────────────────────────────
Popisek BARVA je skrytý záměrně: měl stejnou velikost i barvu
jako názvy odstínů, takže nevedl, jen zdvojoval řádek. ── */
#content .p-variants-block .variant-label{display:none !important}
#content .variant-list{height:auto !important}
#content .hidden-split-parameter{display:flex !important;flex-wrap:wrap !important;gap:10px 28px !important;align-items:flex-start !important}
#content .hidden-split-parameter > span:has(input.variant-default){display:none !important}
#content label.advanced-parameter{display:flex !important;flex-direction:column !important;align-items:center !important;gap:0 !important;width:auto !important;height:auto !important;margin:0 !important;padding:0 !important;border:0 !important;cursor:pointer !important}
#content label.advanced-parameter > span.advanced-parameter-inner{display:none !important}
#content label.advanced-parameter > span.parameter-value{display:block !important;position:static !important;width:auto !important;height:auto !important;margin:0 !important;padding:0 0 5px !important;background:none !important;overflow:visible !important;clip:auto !important;clip-path:none !important;font-size:11px !important;letter-spacing:.2em !important;text-transform:uppercase !important;color:rgba(20,20,20,.42) !important;white-space:nowrap !important;border:0 !important;border-bottom:1px solid transparent !important;transition:color .25s,border-color .25s}
#content label.advanced-parameter:hover > span.parameter-value{color:rgba(20,20,20,.8) !important}
#content label.advanced-parameter:has(input:checked) > span.parameter-value{color:#141414 !important;border-bottom-color:rgba(20,20,20,.45) !important}
@media (max-width:767px){
#content .hidden-split-parameter{gap:10px 20px !important}
#content label.advanced-parameter > span.parameter-value{font-size:10px !important;letter-spacing:.16em !important}
}
/* ── rytmus pravého sloupce na detailu ─────────────────────────
Název a odstíny drží spolu jako jeden blok, před cenou je
větší dech. Dostupnost byla tučná — nejhlasitější drobný
řádek na stránce; ztišená. Tečkované podtržení nápovědy pryč,
tooltip při najetí funguje dál. ── */
.type-detail .p-detail-inner-header{margin:0 0 2px !important}
.type-detail .p-variants-block{margin:-12px 0 14px !important}
.type-detail .availability-label,
.type-detail .availability-label span,
.type-detail .detail-parameter-availability{font-size:10px !important;font-weight:400 !important;letter-spacing:.16em !important;color:rgba(20,20,20,.38) !important}
.type-detail .availability-label,
.type-detail .availability-label .show-tooltip,
.type-detail .availability-label .acronym{border-bottom:0 !important;text-decoration:none !important}
/* ── krátké stránky: patička ať nesedí uprostřed obrazovky ───── */
body:not(.type-detail):not(.ordering-process) .container.content-wrapper{min-height:calc(100vh - 220px)}
/* ── editoriál pro malý katalog ───────────────────────────────
Třídu mmii-editorial přidává mmii-b.js, když má kategorie
nejvýš tři kusy. Mřížka s jedním produktem vypadá jako prázdný
sklad; tohle je výloha. ── */
.mmii-editorial{display:block !important}
.mmii-editorial .product{width:100% !important;max-width:none !important;padding:0 !important;margin:0 !important;float:none !important}
.mmii-editorial .product + .product{border-top:1px solid rgba(20,20,20,.12)}
.mmii-editorial .p{display:grid !important;grid-template-columns:1.2fr 1fr;align-items:center;gap:clamp(32px,5vw,88px);padding:clamp(40px,5vw,80px) 0}
.mmii-editorial .product:nth-child(even) .p{direction:rtl}
.mmii-editorial .product:nth-child(even) .p > *{direction:ltr}
.mmii-editorial .p > a.image{display:block;width:100%;margin:0}
.mmii-editorial .p > a.image img{width:100%;height:auto;display:block;max-width:none}
.mmii-editorial .p-in{max-width:420px;padding:0 !important;justify-self:start !important}
.mmii-editorial .p-in-in{margin:0 0 10px}
.mmii-editorial .name{font-size:26px !important;letter-spacing:-.01em;line-height:1.2;display:block;font-weight:400 !important}
.mmii-editorial .price-final strong{font-size:17px !important}
.mmii-editorial .mmii-swatches{margin-top:22px !important}
body .mmii-editorial .product .p .p-in,
body .mmii-editorial .product .p .p-in .name,
body .mmii-editorial .product .p .p-in .price-final,
body .mmii-editorial .product .p .p-in .prices{text-align:left !important}
body .mmii-editorial .product .p .p-in .prices,
body .mmii-editorial .product .p .p-in .mmii-swatches{justify-content:flex-start !important}
.mmii-editorial .p-in{display:flex !important;flex-direction:column;align-items:flex-start}
.mmii-editorial .p-in .p-in-in{order:1;width:100%}
.mmii-editorial .p-in .p-bottom{order:2;width:100%}
.mmii-editorial .p-in .mmii-swatches{order:3}
.mmii-editorial .p-in .mmii-cta-row{order:4}
.mmii-cta-row{margin-top:30px;text-align:left !important}
.mmii-cta-row a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#141414;text-decoration:none;border-bottom:1px solid rgba(20,20,20,.35);padding-bottom:4px;transition:border-color .25s}
.mmii-cta-row a:hover{border-bottom-color:#141414}
@media (max-width:900px){
.mmii-editorial .p{grid-template-columns:1fr;gap:26px;padding:34px 0}
.mmii-editorial .product:nth-child(even) .p{direction:ltr}
.mmii-editorial .p-in{max-width:none}
.mmii-editorial .name{font-size:22px !important}
}
/* ── mobil: fotky v poli s vlastním posuvem ──
Zákazník vidí jednu fotku, posouvá se v ní jako na desktopu a popisek
zůstává hned pod ní. Pole staví skript (.mmii-viewport), protože
tečky musí zůstat mimo posouvanou plochu. ── */
@media (max-width:900px){
.type-detail .p-image-wrapper.mmii-stacked{position:relative !important;height:auto !important;min-height:0 !important;overflow:visible !important}
.type-detail .p-image{display:none !important}
.type-detail .mmii-viewport{position:relative;width:100%;aspect-ratio:4/3;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:#f3efe9}
.type-detail .mmii-viewport::-webkit-scrollbar{display:none}
.type-detail .mmii-viewport .mmii-shot{display:block !important;height:100% !important;scroll-snap-align:start;scroll-snap-stop:always}
.type-detail .mmii-viewport .mmii-shot img{display:block;width:100%;height:100%;object-fit:cover}
.type-detail .mmii-dots{display:none !important}
.type-detail .mmii-vp-dots{position:absolute;top:50%;right:22px;left:auto;bottom:auto;transform:translateY(-50%);display:grid;gap:14px;justify-items:center;z-index:4;pointer-events:none}
.type-detail .mmii-vp-dots i{width:7px;height:7px;border-radius:50%;border:1px solid var(--mmii-paper);opacity:.75;box-shadow:0 0 0 1px rgba(0,0,0,.22),0 1px 3px rgba(0,0,0,.35);transition:background .25s,opacity .25s}
.type-detail .mmii-vp-dots i.on{background:var(--mmii-paper);opacity:1}
}
/* ── po volbě odstínu ukaž hlavní obrázek ──
Skript skryje všechny .mmii-shot a spoléhá na Shoptetí .p-image,
který jsme ale schovali — plocha fotky zůstávala prázdná. ── */
.type-detail .p-image-wrapper:has(.mmii-shot[style*="display: none"]) .p-image{display:block !important}
.type-detail .p-image-wrapper:has(.mmii-shot[style*="display: none"]) .mmii-viewport,
.type-detail .p-image-wrapper:has(.mmii-shot[style*="display: none"]) .mmii-vp-dots{display:none !important}
@media (max-width:900px){
.type-detail .p-image-wrapper:has(.mmii-shot[style*="display: none"]) .p-image{display:block !important}
.type-detail .p-image-wrapper:has(.mmii-shot[style*="display: none"]) .p-image img{display:block;width:100% !important;height:auto !important}
}
/* ── mobil: žádná bílá díra nad patičkou ── */
@media (max-width:900px){
body:not(.type-detail):not(.ordering-process) .container.content-wrapper{min-height:0 !important}
}
/* ── detail: pryč s technickým balastem ─────────────────────── */
.type-detail .price-measure,.type-detail .p-price-wrapper .price-measure,.type-detail .sr-only{display:none !important}
/* ── detail: krátký popis nahoru, ne až pod čtyři fotky ────── */
.type-detail .p-short-description{display:block !important;max-width:44ch;margin:2px 0 0 !important;padding:0 !important;font-size:14px;line-height:1.75;color:rgba(20,20,20,.6);letter-spacing:0}
.type-detail .p-short-description p{margin:0 !important}
.type-detail .p-short-description strong,.type-detail .p-short-description b{font-weight:400 !important;color:rgba(20,20,20,.8)}
.type-detail .p-variants-block{margin:6px 0 14px !important}
/* ── prolnutí fotek při přepnutí odstínu (spouští mmii-b.js) ── */
@keyframes mmiiFade{from{opacity:0}to{opacity:1}}
.type-detail .mmii-shot.mmii-fade{animation:mmiiFade .5s ease both}
/* ── jemný pohyb fotky ve výpisu (jen mřížka, ne editoriál) ── */
.products:not(.mmii-editorial) .product a.image{display:block;overflow:hidden}
.products:not(.mmii-editorial) .product a.image img{transition:transform 1.1s cubic-bezier(.2,.6,.2,1)}
.products:not(.mmii-editorial) .product:hover a.image img{transform:scale(1.03)}
/* ── doplněné položky menu ───────────────────────────────────── */
/* zásuvkové menu: kus místo kategorie */
nav.mmii-menu-list .mmii-menu-label{display:flex;flex-direction:column;gap:5px}
nav.mmii-menu-list .mmii-menu-name{font-size:16px}
nav.mmii-menu-list .mmii-menu-type{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(20,20,20,.38)}
nav.mmii-menu-list a.mmii-menu-sep{margin-top:10px}
#navigation .mmii-hidden-cat{display:none !important}
#navigation .mmii-menu-type{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(20,20,20,.38);margin-top:4px}
#navigation .mmii-menu-extra a{display:block}
#navigation .mmii-menu-sep{margin-top:20px;padding-top:20px;border-top:1px solid rgba(20,20,20,.12)}
/* ── zákaznická sekce: přihlášení, registrace, zapomenuté heslo ──
Byl to poslední kus neupraveného Shoptetu: modré autofill inputy,
zaoblené rohy, bílé tlačítko s rámečkem a obsah v 820px sloupci,
za kterým zůstávala šedá plocha. ── */
body.in-registrace,body.in-login,body.in-zapomenute-heslo{background:#fff !important}
body.in-registrace .container.content-wrapper,body.in-login .container.content-wrapper,body.in-zapomenute-heslo .container.content-wrapper{background:#fff !important}
body.in-registrace #content,body.in-login #content,body.in-zapomenute-heslo #content{max-width:460px !important;width:100% !important;margin:0 auto !important;float:none !important;padding-top:64px !important;padding-bottom:96px !important}
body.in-registrace #content h2,body.in-login #content h2,body.in-zapomenute-heslo #content h2{font-size:10px !important;font-weight:400 !important;letter-spacing:.16em !important;text-transform:uppercase !important;color:rgba(20,20,20,.45) !important;margin:40px 0 20px !important;padding-top:24px !important;border-top:1px solid rgba(20,20,20,.12)}
body.in-registrace #content h2:first-of-type,body.in-login #content h2:first-of-type,body.in-zapomenute-heslo #content h2:first-of-type{margin-top:0 !important;padding-top:0 !important;border-top:0 !important}
body.in-registrace #content label,body.in-login #content label,body.in-zapomenute-heslo #content label{display:block !important;font-size:14px !important;font-weight:400 !important;letter-spacing:normal !important;text-transform:none !important;color:rgba(20,20,20,.62) !important;margin-bottom:7px !important}
body.in-registrace #content .required-asterisk,body.in-login #content .required-asterisk{color:inherit !important}
body.in-registrace #content .co-box,body.in-registrace #content .required-fields{font-size:10px !important;letter-spacing:.12em;text-transform:uppercase;color:rgba(20,20,20,.4) !important;margin:0 0 22px !important}
body.in-registrace #content .co-box *,body.in-registrace #content .required-fields *{color:rgba(20,20,20,.4) !important;font-size:10px !important}
body.in-registrace #content input:not([type=checkbox]):not([type=radio]):not([type=submit]),
body.in-login #content input:not([type=checkbox]):not([type=radio]):not([type=submit]),
body.in-zapomenute-heslo #content input:not([type=checkbox]):not([type=radio]):not([type=submit]),
body.in-registrace #content select,body.in-login #content select{height:46px !important;padding:0 14px !important;background:transparent !important;border:1px solid rgba(20,20,20,.22) !important;border-radius:0 !important;font-size:15px !important;line-height:normal !important;color:#141414 !important;box-shadow:none !important;transition:border-color .3s}
body.in-registrace #content input:focus,body.in-login #content input:focus,body.in-zapomenute-heslo #content input:focus{border-color:#141414 !important;outline:0 !important}
body.in-registrace #content input:-webkit-autofill,body.in-login #content input:-webkit-autofill,body.in-zapomenute-heslo #content input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset !important;-webkit-text-fill-color:#141414 !important}
body.in-registrace #content .form-group,body.in-login #content .form-group{margin-bottom:20px !important}
body.in-registrace #content button[type=submit],body.in-registrace #content input[type=submit],
body.in-login #content button[type=submit],body.in-login #content input[type=submit],
body.in-zapomenute-heslo #content button[type=submit],body.in-zapomenute-heslo #content input[type=submit]{display:block !important;width:100% !important;margin-top:12px !important;padding:16px 24px !important;background:#141414 !important;color:#fefdf9 !important;border:1px solid #141414 !important;border-radius:0 !important;font-size:11px !important;font-weight:400 !important;letter-spacing:.12em !important;text-transform:uppercase !important;box-shadow:none !important;transition:background-color .3s,color .3s}
body.in-registrace #content button[type=submit]:hover,body.in-login #content button[type=submit]:hover,body.in-zapomenute-heslo #content button[type=submit]:hover{background:#fefdf9 !important;color:#141414 !important}
body.in-login #content a{font-size:11px !important;letter-spacing:.12em;text-transform:uppercase;color:#141414 !important;text-decoration:none !important;border-bottom:1px solid rgba(20,20,20,.25);padding-bottom:2px}
/* ── Moje objednávka (widget v shadow DOM) ─────────────────── */
main.orderWithdraw{background:#fff !important}
#order-withdraw{
--Global-Foregrounds-Content-Primary:#141414;
--Global-Foregrounds-Content-Secondary:rgba(20,20,20,.72);
--Global-Foregrounds-Content-Tertiary:rgba(20,20,20,.45);
--Global-Foregrounds-Content-Muted:rgba(20,20,20,.45);
--Global-Foregrounds-Content-Disabled:rgba(20,20,20,.3);
--Global-Foregrounds-Content-White:#fefdf9;
--Global-Foregrounds-Content-Link:#141414;
--Global-Foregrounds-Content-Critical:#8c2f2a;
--Global-Foregrounds-Content-Success:#3f5540;
--Global-Foregrounds-Content-Informative:#141414;
--Global-Foregrounds-Content-Warning:#6d5533;
--Global-Foregrounds-Borders-Primary:rgba(20,20,20,.25);
--Global-Foregrounds-Borders-Secondary:rgba(20,20,20,.12);
--Global-Foregrounds-Borders-Activated:#141414;
--Global-Foregrounds-Icons-Primary:rgba(20,20,20,.45);
--Global-Backgrounds-Content-Primary:transparent;
--Global-Backgrounds-Content-Secondary:rgba(20,20,20,.03);
--Global-Backgrounds-Content-Disabled:rgba(20,20,20,.06);
--Global-Backgrounds-Button-Primary:#141414;
--Global-Backgrounds-Button-Primary_Hover:#fefdf9;
--Global-Foregrounds-Button-Primary:#fefdf9;
--Global-Foregrounds-Button-Primary_Hover:#141414;
--Corner-Radius:0;
--Corner-Radius_Bigger:0;
--Text-Font:"Instrument Sans",system-ui,Arial,sans-serif;
--Text-Body_Base:15px;
--Line-Height-Body_Base:1.6;
--Letter-Spacing-Body_Base:0;
--Text-Body_Small:13px;
--Line-Height-Body_Small:1.6;
--Letter-Spacing-Body_Small:0;
--Font-Weight-Body_Small:400;
--Text-Body_Large:16px;
--Font-Weight-Body_Large:400;
--Spacing-Gap_XL:32px;
--Spacing-Gap_L:20px;
}
/* -- Telefon na kontaktech --
Cislo je zatim sablona; az bude realne, meni se jen text stranky. -- */
#content .mmii-tel{font-size:15px !important;line-height:1.7 !important;color:#141414 !important;max-width:48ch;margin:0 0 36px !important}
#content .mmii-tel-note{display:inline-block;margin-top:8px;font-size:13px;line-height:1.7;color:rgba(20,20,20,.5)}
/* ── desktop: vybraný odstín vyplní celý sloupec ──
Shoptetí hlavní obrázek má vlastní poměr stran a pod ním zůstával
béžový pruh až k patě sekce. Teď sedí od hlavičky po spodní hranu
jako skládaná galerie, ořez na střed. ── */
@media (min-width:901px){
.type-detail .p-image-wrapper:has(.mmii-shot[style*="display: none"]) .p-image{display:block !important;height:100% !important;min-height:100% !important;overflow:hidden !important}
.type-detail .p-image-wrapper:has(.mmii-shot[style*="display: none"]) .p-image > div{display:block !important;height:100% !important}
.type-detail .p-image-wrapper:has(.mmii-shot[style*="display: none"]) .p-image a.p-main-image{display:block !important;width:100% !important;height:100% !important}
.type-detail .p-image-wrapper:has(.mmii-shot[style*="display: none"]) .p-image img{width:100% !important;height:100% !important;max-height:none !important;object-fit:cover !important;object-position:center !important}
}
/* ── hlášky: tichý proužek dole, ne červený pruh přes hlavičku ──
Shoptet kreslí .msg-error jako červenou lištu přes celou šířku nad
logem. Pro „zapomněla jsi vybrat odstín" je to poplach místo
navedení. Teď je z toho malá inkoustová destička u spodní hrany;
pozornost přitahuje řádek odstínů, ne barva. ── */
.messages{position:fixed !important;left:50% !important;right:auto !important;top:auto !important;bottom:28px !important;transform:translateX(-50%) !important;width:auto !important;max-width:min(440px,calc(100vw - 32px)) !important;z-index:9999 !important;padding:0 !important;pointer-events:none}
.messages .msg{background:#141414 !important;color:#FEFDF9 !important;border:0 !important;border-radius:0 !important;box-shadow:0 18px 40px -18px rgba(20,20,20,.55) !important;margin:0 0 10px !important;padding:0 !important;animation:mmiiToast .45s cubic-bezier(.2,.7,.2,1) both;pointer-events:auto}
.messages .msg .container{width:auto !important;max-width:none !important;padding:16px 24px !important;margin:0 !important}
.messages .msg span,.messages .msg a,.messages .msg p{color:#FEFDF9 !important;font-size:14px !important;line-height:1.5 !important;letter-spacing:.01em !important;text-transform:none !important;font-weight:400 !important}
.messages .msg a{border-bottom:1px solid rgba(254,253,249,.45) !important;text-decoration:none !important}
.messages .msg::before,.messages .msg::after{display:none !important}
@keyframes mmiiToast{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:767px){.messages{bottom:16px !important}.messages .msg .container{padding:14px 18px !important}}
/* řádek odstínů se krátce ozve, když na něj hláška ukazuje */
@keyframes mmiiAttn{0%{color:rgba(20,20,20,.42)}25%{color:#141414}60%{color:#141414}100%{color:rgba(20,20,20,.42)}}
@keyframes mmiiAttnLine{0%{width:0;opacity:0}30%{opacity:1}55%{width:100%}100%{width:100%;opacity:0}}
#content .p-variants-block.mmii-attn{position:relative}
#content .p-variants-block.mmii-attn label.advanced-parameter > span.parameter-value{animation:mmiiAttn 1.6s ease both}
#content .p-variants-block.mmii-attn::after{content:"";position:absolute;left:0;bottom:-8px;height:1px;background:rgba(20,20,20,.4);animation:mmiiAttnLine 1.6s cubic-bezier(.2,.7,.2,1) both}
/* ── O MMII: slogan a původ ──
Slogan je v uvozovkách, ať je jasné, že jde o klaim značky.
Řádek o původu je kolofon — tiché verzálky s odstupem, ne věta
v odstavci. ── */
#content .mmii-claim{font-size:17px !important;line-height:1.6 !important;color:#141414 !important;margin:0 0 30px !important}
#content .mmii-origin{font-size:10px !important;letter-spacing:.2em !important;text-transform:uppercase !important;color:rgba(20,20,20,.42) !important;margin:0 0 52px !important;padding-top:26px !important;border-top:1px solid rgba(20,20,20,.12) !important;max-width:280px !important}
/* ── patička ve čtyřech sloupcích ──
Řada odkazů vedle sebe je e-shopový patent. Pojmenované sekce
řeknou, co na webu je, až když to někdo hledá. ── */
.mmii-pata-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,4vw,64px);width:100%;max-width:1180px;margin:0 auto;padding:8px 0 4px;text-align:left}
.mmii-pata-col{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.mmii-pata-nadpis{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(20,20,20,.42);margin-bottom:7px}
.mmii-pata-col a{font-size:14px;line-height:1.4;color:#141414;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color .25s}
.mmii-pata-col a:hover{border-bottom-color:rgba(20,20,20,.4);text-decoration:none}
@media (max-width:900px){
.mmii-pata-grid{grid-template-columns:1fr 1fr;gap:30px 24px;padding:4px 0}
}
@media (max-width:480px){
.mmii-pata-grid{grid-template-columns:1fr;gap:28px}
.mmii-pata-col{align-items:center;text-align:center}
}
/* ── detail: pryč s počtem kusů ──
Kus z malé série se nekupuje po dvou. Pole zůstává ve formuláři
s hodnotou 1, jen ho není vidět. ── */
.type-detail .p-to-cart-block span.quantity{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap !important}
/* ── cena se nesmí zalomit mezi tisíci ── mmii-cena-nowrap ──
Shoptet si vynucuje obyčejnou mezeru jako oddělovač tisíců
(nezlomitelnou při uložení převede), takže „22“ a „000 Kč“
by mohly skončit na dvou řádcích. ── */
.price,.price-final,.price-standard,.p-final-price-wrapper .price-final,
.products .price,.cart-price,.p-price-wrapper .price-final{white-space:nowrap !important}