/* ============================================================ skinspecialist.cz / bioby.cz — ss-category-19.css — v19 PRODUCTION CSS for Shoptet category pages v19 changes: - HERO: fotka 5:4 -> 16:9 (horizontalni), sekce nizsi (~500 -> ~395px). - NEW: bestseller pasek (.ss-cat-bestbar / .ss-cat-minicard) - kompaktni horizontalni strip pod hero (inspirace proteinaco.cz). - NEW: SEO pruvodce (.ss-cat-guide) - 2-col editorial text blok. - NEW: FAQ (.ss-cat-faq) - accordion (native

). - Pagination cisla: serif -> sans (sjednoceno s ciselnou UI; u .is-current zrusen italic, Manrope nema pravou kurzivu). v18 changes: - Product card hover: translateY(-3px) lift + 5-sloupcovy grid, Tamara karta V2 (Full Sage editorial sloupec). v17 changes — CRITICAL FIX for hover delay on live bioby.cz: - REMOVED: all 36 occurrences of `var(--ss-ease, cubic-bezier(.4, 0, .2, 1))` replaced with literal `cubic-bezier(.4, 0, .2, 1)` (same pattern as homepage ss-curated-5.css uses successfully). - Root cause: token `--ss-ease` in style.css is defined as `.3s cubic-bezier(.4, 0, .2, 1)` (DURATION + easing combined). When written as `.25s var(--ss-ease)`, the var() expands and browser parses two adjacent values as duration + delay: `.25s .3s cubic-bezier(...)` = duration .25s, DELAY .3s. Every transition + animation on category had unintended .3s delay. User perceived this as "hover starts almost a second late". - Fix matches the homepage curated card pattern: literal cubic-bezier timing function, no var() expansion, no accidental delays. ARCHITECTURE — PDP REPLACE PATTERN (matches ss-product-3 pattern): - Native Shoptet category UI hidden via class gate + inline JS setProperty('display','none','important') for foolproof override. - Custom UI rendered in fresh `.ss-cat-root` parallel DOM tree. - Product cards are OUR OWN `.ss-cat-card` elements — NOT wrapped or mutated `.product` natives. - Cart submit via PROXY — our Add button click() triggers native form's submit button (Shoptet's CSRF, AJAX, events all run native). - Graceful degradation — if JS fails, `.ss-cat-loaded` class never added, native UI stays visible. WHY (v14/v15 failed): - v14/v15 used MUTATE pattern: wrapped native .product images, injected heart/cart row INTO native .product, MOVED native .availability. Result: frankenstein DOM = native CSS + JS handlers + Shoptet runtime hover effects + our overrides all fighting on every hover. Hover lag ~1s on live bioby.cz. - This file (v16) eliminates that entirely by following PDP pattern. TOKENS — inherited from style.css?v=11 (global). ============================================================ */ /* ============================================================ 1) PAGE BASELINE — applies INSTANTLY (no class gate) so the cream canvas is in place even during the brief FOUC window before JS replaces native UI. body.type-category bg is the single source of truth; native Shoptet content-wrapper gets transparent so the canvas shows through. ============================================================ */ body.type-category { background: var(--ss-canvas, #F2EBDB) !important; } body.type-category .container.content-wrapper, body.type-category #content-wrapper, body.type-category .content-wrapper-in, body.type-category main.content, body.type-category main.content.narrow, body.type-category .category-content-wrapper, body.type-category .category-header { background: transparent !important; background-color: transparent !important; } /* ============================================================ 2) HIDE NATIVE — CLASS-GATED. `.ss-cat-loaded` is added to by JS AFTER render succeeds. If JS fails, class is never set, native UI stays visible (graceful degradation — Shoptet category page works as-is). Inline `setProperty('display','none','important')` in JS adds belt-and-suspenders against higher-specificity Shoptet rules. ============================================================ */ body.type-category.ss-cat-loaded .products, body.type-category.ss-cat-loaded .product-list, body.type-category.ss-cat-loaded #products, body.type-category.ss-cat-loaded .listSorting, body.type-category.ss-cat-loaded .breadcrumbs-wrapper, body.type-category.ss-cat-loaded .category-perex, body.type-category.ss-cat-loaded .category-description, body.type-category.ss-cat-loaded .sidebar.sidebar-left, body.type-category.ss-cat-loaded .sidebar-left, body.type-category.ss-cat-loaded .category-top, body.type-category.ss-cat-loaded .pagination-wrapper, body.type-category.ss-cat-loaded .pagination, body.type-category.ss-cat-loaded #products-pagination, body.type-category.ss-cat-loaded .listItemsTotal, body.type-category.ss-cat-loaded .itemsTotal, body.type-category.ss-cat-loaded .filters-wrapper, body.type-category.ss-cat-loaded .filters-unveil-button-wrapper, body.type-category.ss-cat-loaded .box-filters, body.type-category.ss-cat-loaded .category-content-wrapper, body.type-category.ss-cat-loaded h1.category-title:not(.ss-cat-title) { display: none !important; } /* ============================================================ 3) ROOT CONTAINER Sits as a SIBLING of (now-hidden) native .category-content-wrapper. Inner content capped at 1500px (matches header BASELINE). ============================================================ */ .ss-cat-root { display: block; width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 56px) clamp(40px, 4vw, 64px); /* v22: výraznější mezera dole (footer je těžký zelený blok); 32px bylo málo */ box-sizing: border-box; font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); color: var(--ss-text, #0F0F0F); background: var(--ss-canvas, #F2EBDB); } /* ============================================================ 4) BREADCRUMB ============================================================ */ .ss-cat-root .ss-cat-crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 28px 0 0; width: 100%; font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ss-muted, rgba(15, 15, 15, .62)); box-sizing: border-box; } .ss-cat-root .ss-cat-crumbs a { color: var(--ss-muted, rgba(15, 15, 15, .62)); text-decoration: none; transition: color .25s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-crumbs a:hover { color: var(--ss-black, #0F0F0F); } .ss-cat-root .ss-cat-crumbs .sep { color: rgba(15, 15, 15, .18); font-weight: 400; letter-spacing: 0; padding: 0 2px; } .ss-cat-root .ss-cat-crumbs .current { font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif); font-style: italic; font-weight: 400; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ss-black, #0F0F0F); } /* ============================================================ 5) HERO — editorial 60/40 grid (text/image) ============================================================ */ .ss-cat-root .ss-cat-hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 4vw, 56px); align-items: center; padding: 24px 0 30px; width: 100%; } .ss-cat-root .ss-cat-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ss-terracotta-deep, #7E6248); margin-bottom: 14px; } .ss-cat-root .ss-cat-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--ss-terracotta-deep, #7E6248); } .ss-cat-root .ss-cat-title { font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif); font-weight: 300; font-size: clamp(40px, 5vw, 72px); line-height: 1.02; letter-spacing: -.025em; color: var(--ss-black, #0F0F0F); margin: 0 0 20px; } .ss-cat-root .ss-cat-title em { font-style: italic; font-weight: 300; color: var(--ss-terracotta, #9A7A5F); } .ss-cat-root .ss-cat-intro { font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 15.5px; line-height: 1.72; color: rgba(15, 15, 15, .82); max-width: 540px; margin: 0 0 20px; } .ss-cat-root .ss-cat-intro strong { font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif); font-style: italic; font-weight: 400; font-size: 1.05em; color: var(--ss-black, #0F0F0F); } .ss-cat-root .ss-cat-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .ss-cat-root .ss-cat-cta { display: inline-flex; align-items: center; gap: 14px; background: var(--ss-black, #0F0F0F); color: #FAF6EE; padding: 16px 28px; font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; border-radius: var(--ss-r, 6px); /* Explicit transition list — never `transition: all`. */ transition: background-color .35s cubic-bezier(.4, 0, .2, 1), gap .35s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-cta:hover { background: var(--ss-terracotta-deep, #7E6248); gap: 22px; color: #FAF6EE; } .ss-cat-root .ss-cat-cta-arrow { width: 18px; height: 1px; background: #FAF6EE; position: relative; transition: width .35s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-cta-arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-right: 1px solid #FAF6EE; border-top: 1px solid #FAF6EE; transform: rotate(45deg); } .ss-cat-root .ss-cat-cta:hover .ss-cat-cta-arrow { width: 26px; } .ss-cat-root .ss-cat-meta-link { font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif); font-style: italic; font-size: 15px; color: var(--ss-black, #0F0F0F); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid var(--ss-muted, rgba(15, 15, 15, .62)); transition: border-color .3s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-meta-link:hover { border-color: var(--ss-black, #0F0F0F); } /* Right side — hero image */ .ss-cat-root .ss-cat-aside { position: relative; aspect-ratio: 16 / 9; max-height: 420px; overflow: visible; } .ss-cat-root .ss-cat-aside-frame { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--ss-r, 6px); background: var(--ss-cream, #E8DDC8); } .ss-cat-root .ss-cat-aside img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: contrast(1.04) saturate(.96); display: block; } .ss-cat-root .ss-cat-aside-tag { position: absolute; bottom: 22px; left: 22px; background: var(--ss-canvas, #F2EBDB); padding: 13px 18px 11px; font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-black, #0F0F0F); border: 1px solid var(--ss-border, rgba(15, 15, 15, .10)); border-radius: var(--ss-r, 6px); z-index: 3; } /* ============================================================ 6) SUBCAT PILL NAV ============================================================ */ .ss-cat-root .ss-cat-subcats { display: flex; flex-wrap: wrap; gap: 32px 36px; padding: 36px 0 28px; border-top: 1px solid var(--ss-border, rgba(15, 15, 15, .10)); border-bottom: 1px solid var(--ss-border, rgba(15, 15, 15, .10)); width: 100%; align-items: baseline; } .ss-cat-root .ss-cat-subcats-label { font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ss-muted, rgba(15, 15, 15, .62)); margin-right: 8px; } .ss-cat-root .ss-cat-subcat { font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif); font-weight: 400; font-size: 17px; color: var(--ss-muted, rgba(15, 15, 15, .62)); text-decoration: none; position: relative; padding-bottom: 4px; transition: color .3s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-subcat:hover { color: var(--ss-black, #0F0F0F); } .ss-cat-root .ss-cat-subcat::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-subcat:hover::after, .ss-cat-root .ss-cat-subcat.is-active::after { transform: scaleX(1); transform-origin: left; } .ss-cat-root .ss-cat-subcat.is-active { font-style: italic; font-weight: 500; color: var(--ss-black, #0F0F0F); } /* ============================================================ 7) SORT ROW — product count + custom dropdown ============================================================ */ .ss-cat-root .ss-cat-sortrow { display: flex; justify-content: space-between; align-items: center; padding: 36px 0 24px; width: 100%; gap: 16px; flex-wrap: wrap; position: relative; z-index: 30; } .ss-cat-root .ss-cat-count { font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif); font-style: italic; font-size: 17px; color: var(--ss-black, #0F0F0F); } .ss-cat-root .ss-cat-count strong { font-weight: 500; font-style: normal; font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 14px; margin-right: 4px; letter-spacing: .03em; } .ss-cat-root .ss-cat-sortdropdown { position: relative; display: inline-block; z-index: 100; } .ss-cat-root .ss-cat-sortdropdown__trigger { display: inline-flex; align-items: center; gap: 10px; background: #FAF6EE; border: 1px solid var(--ss-border, rgba(15, 15, 15, .10)); border-radius: var(--ss-r, 6px); padding: 10px 14px 10px 18px; font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 13px; font-weight: 500; color: var(--ss-black, #0F0F0F); cursor: pointer; transition: border-color .25s cubic-bezier(.4, 0, .2, 1), background-color .25s cubic-bezier(.4, 0, .2, 1); min-width: 220px; justify-content: space-between; } .ss-cat-root .ss-cat-sortdropdown__trigger:hover { border-color: rgba(15, 15, 15, .25); background: #FFFFFF; } .ss-cat-root .ss-cat-sortdropdown__label { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ss-muted, rgba(15, 15, 15, .62)); margin-right: 4px; } .ss-cat-root .ss-cat-sortdropdown__value { flex: 1; text-align: left; font-size: 13px; font-weight: 500; color: var(--ss-black, #0F0F0F); letter-spacing: .01em; } .ss-cat-root .ss-cat-sortdropdown__chev { width: 10px; height: 10px; color: var(--ss-muted, rgba(15, 15, 15, .62)); transition: transform .3s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-sortdropdown.is-open .ss-cat-sortdropdown__chev { transform: rotate(180deg); } .ss-cat-root .ss-cat-sortdropdown__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 100%; background: #FFFFFF; border: 1px solid var(--ss-border, rgba(15, 15, 15, .10)); border-radius: var(--ss-r, 6px); box-shadow: 0 12px 32px rgba(15, 15, 15, .10); padding: 6px; z-index: 200; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); transition: opacity .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1), visibility .2s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-sortdropdown.is-open .ss-cat-sortdropdown__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .ss-cat-root .ss-cat-sortdropdown__option { display: block; font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 13px; font-weight: 500; color: var(--ss-black, #0F0F0F); text-decoration: none; padding: 9px 14px; border-radius: 4px; cursor: pointer; transition: background-color .15s cubic-bezier(.4, 0, .2, 1); letter-spacing: .01em; } .ss-cat-root .ss-cat-sortdropdown__option:hover, .ss-cat-root .ss-cat-sortdropdown__option.is-focused { background: var(--ss-cream, #E8DDC8); color: var(--ss-black, #0F0F0F); } .ss-cat-root .ss-cat-sortdropdown__option.is-active, .ss-cat-root .ss-cat-sortdropdown__option.is-active:hover, .ss-cat-root .ss-cat-sortdropdown__option.is-active.is-focused { background: var(--ss-black, #0F0F0F); color: #FFFFFF; font-weight: 600; } /* ============================================================ 8) PRODUCT GRID — fresh DOM, OUR selectors only. No `body.type-category .product` rules anywhere — that's what caused the v14/v15 mutation hover lag. ============================================================ */ .ss-cat-root .ss-cat-grid { display: grid; /* v18-r2: 5 sloupců = stejná velikost karet jako homepage ss-curated (ta má taky 5/řádek). Column gap 18px = shoda s šířkou homepage karty. repeat(N,1fr): osamělá karta na posledním řádku zabere přesně 1 sloupec — nikdy se neroztáhne na obří. */ grid-template-columns: repeat(3, 1fr); /* v23: 3 sloupce na desktopu (bylo 5) */ gap: 30px 18px; padding: 0; margin: 0 auto; width: 100%; list-style: none; position: relative; z-index: 1; } /* ============================================================ 9) PRODUCT CARD — follows BASELINE curated card recipe. ============================================================ */ .ss-cat-root .ss-cat-card { display: flex; flex-direction: column; background: #FAF6EE; border: 1px solid rgba(15, 15, 15, .06); border-radius: 10px; padding: 16px; position: relative; box-sizing: border-box; box-shadow: 0 6px 18px rgba(15, 15, 15, .04); text-decoration: none; color: inherit; /* v18 — VARIANTA A: sjednoceno s homepage ss-curated__card (uživatel schválil). Lift translateY(-3px) na hover. Explicit transition list, literal cubic-bezier — NIKDY `.25s var(--ss-ease)` (BASELINE §13). */ transition: transform .35s cubic-bezier(.4, 0, .2, 1), background-color .35s cubic-bezier(.4, 0, .2, 1), border-color .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-card:hover { transform: translateY(-3px); background: #FFFFFF; border-color: rgba(15, 15, 15, .12); box-shadow: 0 14px 36px rgba(15, 15, 15, .08); } /* Media wrapper — relative for badge/wish positioning, 3:4 portrait. */ .ss-cat-root .ss-cat-card__media { position: relative; aspect-ratio: 1 / 1; /* v24 — bývalo 3/4 (karty „odporně vysoké"); čtverec = nižší karta (varianta 1) */ overflow: hidden; background: var(--ss-cream, #E8DDC8); margin-bottom: 12px; border-radius: 6px; display: block; } .ss-cat-root .ss-cat-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-card:hover .ss-cat-card__media img { transform: scale(1.03); } /* Badge (top-left of media) — sage by default, terracotta for sale, black for accent */ .ss-cat-root .ss-cat-card__badge { position: absolute; top: 10px; left: 10px; background: var(--ss-sage, #6B8B85); color: #FFFFFF; font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; z-index: 2; border-radius: 4px; } .ss-cat-root .ss-cat-card__badge--terra { background: var(--ss-terracotta, #9A7A5F); } .ss-cat-root .ss-cat-card__badge--accent { background: var(--ss-black, #0F0F0F); } /* Wishlist heart (top-right of media) */ .ss-cat-root .ss-cat-card__wish { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .92); border: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ss-muted, rgba(15, 15, 15, .62)); z-index: 2; cursor: pointer; padding: 0; transition: color .25s cubic-bezier(.4, 0, .2, 1), transform .25s cubic-bezier(.4, 0, .2, 1), background-color .25s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-card__wish:hover { color: var(--ss-terracotta, #9A7A5F); background: #FFFFFF; transform: scale(1.08); } .ss-cat-root .ss-cat-card__wish.is-active { color: var(--ss-terracotta, #9A7A5F); } .ss-cat-root .ss-cat-card__wish svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ss-cat-root .ss-cat-card__wish.is-active svg { fill: currentColor; } /* Name link (sans 14.5/500, 2-line clamp, hairline divider) */ .ss-cat-root .ss-cat-card__name-link { text-decoration: none; color: inherit; display: block; margin-bottom: 7px; /* v24 — dělící linka se přesunula pod hvězdičky (rating row) */ } .ss-cat-root .ss-cat-card__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 14.5px; font-weight: 500; color: var(--ss-black, #0F0F0F); line-height: 1.35; margin: 0; min-height: 39px; max-height: 39px; letter-spacing: 0; } /* Rating row (v24) — 5 hvězd (plné/prázdné) + počet recenzí. Vždy vykresleno (rezervuje místo); plní se z Shoptet microdata, default (0). Nese spodní hairline = dělící linka mezi „titulkem" a „nákupem". */ .ss-cat-root .ss-cat-card__rating { display: flex; align-items: center; gap: 7px; margin: 0 0 11px; padding-bottom: 11px; border-bottom: 1px solid rgba(15, 15, 15, .06); } .ss-cat-root .ss-cat-card__stars { display: inline-flex; align-items: center; gap: 2px; line-height: 0; } .ss-cat-root .ss-cat-card__star { width: 14px; height: 14px; display: block; flex-shrink: 0; fill: rgba(15, 15, 15, .15); /* prázdná hvězda */ } .ss-cat-root .ss-cat-card__star.is-on { fill: var(--ss-terracotta, #9A7A5F); /* vybarvená hvězda — brand terracotta */ } .ss-cat-root .ss-cat-card__rcount { font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 12px; font-weight: 500; color: var(--ss-muted, rgba(15, 15, 15, .55)); letter-spacing: 0; } /* Price + stock row */ .ss-cat-root .ss-cat-card__pricerow { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 12px; } .ss-cat-root .ss-cat-card__price { font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 18px; font-weight: 700; color: var(--ss-black, #0F0F0F); font-feature-settings: "tnum"; } .ss-cat-root .ss-cat-card__price-old { font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 12.5px; color: var(--ss-hint, rgba(15, 15, 15, .46)); text-decoration: line-through; margin-left: 6px; font-weight: 400; } .ss-cat-root .ss-cat-card__stock { font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 11.5px; font-weight: 600; color: #3c840f; white-space: nowrap; } /* Cart row — qty stepper + add button */ .ss-cat-root .ss-cat-card__cartrow { display: flex; align-items: stretch; gap: 8px; margin: 0; padding: 0; background: transparent; border: 0; } .ss-cat-root .ss-cat-card__qty { display: inline-flex; align-items: center; border: 1px solid rgba(15, 15, 15, .12); border-radius: 6px; background: rgba(255, 255, 255, .6); overflow: hidden; flex-shrink: 0; } .ss-cat-root .ss-cat-card__qty button { width: 28px; height: 36px; border: 0; background: transparent; color: var(--ss-black, #0F0F0F); font-size: 14px; cursor: pointer; font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); padding: 0; line-height: 1; transition: background-color .15s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-card__qty button:hover { background: rgba(15, 15, 15, .04); } .ss-cat-root .ss-cat-card__qty input { width: 30px; height: 36px; border: 0; text-align: center; font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 13px; background: transparent; outline: none; color: var(--ss-black, #0F0F0F); -moz-appearance: textfield; } .ss-cat-root .ss-cat-card__qty input::-webkit-outer-spin-button, .ss-cat-root .ss-cat-card__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ss-cat-root .ss-cat-card__add { flex: 1; background: var(--ss-terracotta, #9A7A5F); color: #FFFFFF; border: 0; border-radius: 6px; font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 13px; font-weight: 600; letter-spacing: .04em; cursor: pointer; transition: background-color .25s cubic-bezier(.4, 0, .2, 1); padding: 0 10px; height: 36px; } .ss-cat-root .ss-cat-card__add:hover { background: var(--ss-terracotta-deep, #7E6248); } .ss-cat-root .ss-cat-card__add.is-success { background: var(--ss-sage, #6B8B85); } .ss-cat-root .ss-cat-card__add:disabled { background: var(--ss-muted, rgba(15, 15, 15, .62)); cursor: not-allowed; } /* v24 — mezera mezi produktovým gridem a sekcí recenzí (full-bleed sage). Dřív se .ss-reviews lepila PŘÍMO na grid (gap 0 — to uživatelka viděla). margin-top je vertikální → nerozbije full-bleed (ten jede přes margin-left/right !important v ss-reviews-3.css). Scoped na .ss-cat-root, takže recenze na homepage zůstávají nedotčené. Ověřeno živě = gap 80px. */ .ss-cat-root .ss-reviews { margin-top: clamp(48px, 5vw, 80px) !important; } /* ============================================================ 10) TAMARA CONSULTATION CARD — sits in grid as natural slot. ============================================================ */ /* v18 — Tamara karta: text-CTA "Editorial sloupec" (Verze 2 z round 3). Full Sage, BEZ fotky. Layout = vlevo zarovnaný editorial sloupec: eyebrow+hairline -> serif hook -> detail -> [spacer] -> hairline+podpis -> CTA tlačítko. Box stejně velký jako produktová karta (grid stretch na výšku řádku). Dvě hairline linky bookendují kompozici. */ .ss-cat-root .ss-cat-card-tamara { display: flex; flex-direction: column; background: var(--ss-sage, #6B8B85); border: 1px solid var(--ss-sage, #6B8B85); border-radius: 10px; padding: 24px 20px; position: relative; box-sizing: border-box; overflow: hidden; text-decoration: none; box-shadow: 0 6px 18px rgba(15, 15, 15, .04); transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s cubic-bezier(.4, 0, .2, 1), background-color .35s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-card-tamara:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(15, 15, 15, .10); text-decoration: none; } /* Eyebrow + hairline rule extending right (editorial bookend #1) */ .ss-cat-root .ss-cat-card-tamara__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ss-cream, #E8DDC8); margin-bottom: 18px; } .ss-cat-root .ss-cat-card-tamara__eyebrow::after { content: ''; flex: 1; min-width: 24px; height: 1px; background: rgba(232, 221, 200, .45); } /* Headline — serif editorial hook */ .ss-cat-root .ss-cat-card-tamara__headline { font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif); font-weight: 300; font-size: clamp(27px, 2.3vw, 34px); line-height: 1.12; letter-spacing: -.02em; color: #FFFFFF; margin: 0 0 12px; } .ss-cat-root .ss-cat-card-tamara__headline em { font-style: italic; font-weight: 300; color: var(--ss-cream, #E8DDC8); } /* Detail copy */ .ss-cat-root .ss-cat-card-tamara__detail { font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .82); margin: 0; } /* Spacer — flex:1 pushes signature + CTA to the bottom */ .ss-cat-root .ss-cat-card-tamara__spacer { flex: 1; min-height: 16px; } /* Signature with hairline above (editorial bookend #2) */ .ss-cat-root .ss-cat-card-tamara__sign { font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif); font-style: italic; font-weight: 400; font-size: 16px; color: var(--ss-cream, #E8DDC8); padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .18); margin-bottom: 14px; } /* CTA — cream button (inverze na sage) */ .ss-cat-root .ss-cat-card-tamara__cta { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 18px; background: #FAF6EE; color: var(--ss-sage-deep, #5A7E78); border-radius: 6px; font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; transition: background-color .3s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-card-tamara:hover .ss-cat-card-tamara__cta { background: #FFFFFF; } .ss-cat-root .ss-cat-card-tamara__arrow { width: 18px; height: 1px; background: currentColor; position: relative; transition: width .3s cubic-bezier(.4, 0, .2, 1); flex-shrink: 0; } .ss-cat-root .ss-cat-card-tamara__arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-right: 1px solid currentColor; border-top: 1px solid currentColor; transform: rotate(45deg); } .ss-cat-root .ss-cat-card-tamara:hover .ss-cat-card-tamara__arrow { width: 26px; } /* ============================================================ 11) PAGINATION — our own, mirrors native shape but on fresh DOM ============================================================ */ .ss-cat-root .ss-cat-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 32px 0 100px; width: 100%; list-style: none; background: transparent; border: none; flex-wrap: wrap; } .ss-cat-root .ss-cat-pagination__item { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(15, 15, 15, .18); font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 14px; font-weight: 500; color: var(--ss-black, #0F0F0F); cursor: pointer; border-radius: var(--ss-r, 6px); text-decoration: none; transition: background-color .3s cubic-bezier(.4, 0, .2, 1), color .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1); padding: 0; margin: 0; } .ss-cat-root .ss-cat-pagination__item:hover { background: var(--ss-black, #0F0F0F); color: #FAF6EE; border-color: var(--ss-black, #0F0F0F); } .ss-cat-root .ss-cat-pagination__item.is-current { background: var(--ss-black, #0F0F0F); color: #FAF6EE; border-color: var(--ss-black, #0F0F0F); font-weight: 600; cursor: default; } .ss-cat-root .ss-cat-pagination__item--disabled { opacity: .35; cursor: not-allowed; pointer-events: none; } /* ============================================================ 11b) BESTSELLER PASEK + SEO PRUVODCE + FAQ (v19) - bestbar: kompaktni horizontalni strip pod hero - guide: 2-col editorial SEO text - faq: accordion (native

) ============================================================ */ /* ---- Spolecny eyebrow pro nove sekce ---- */ .ss-cat-root .ss-cat-bestbar__eyebrow, .ss-cat-root .ss-cat-guide__eyebrow, .ss-cat-root .ss-cat-faq__eyebrow { display: block; font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ss-sage, #6B8B85); margin-bottom: 12px; } /* ---- BESTSELLER PASEK ---- */ .ss-cat-root .ss-cat-bestbar { padding: 30px 0 36px; border-top: 1px solid var(--ss-border, rgba(15, 15, 15, .10)); width: 100%; } .ss-cat-root .ss-cat-bestbar__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 20px; } .ss-cat-root .ss-cat-bestbar__heading { font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif); font-weight: 300; font-size: clamp(21px, 2vw, 28px); letter-spacing: -.015em; line-height: 1.1; color: var(--ss-black, #0F0F0F); margin: 0; } .ss-cat-root .ss-cat-bestbar__nav { display: flex; gap: 8px; flex-shrink: 0; } /* Sipky = identicke s .ss-cat-pagination__item (hranate, 6px radius) */ .ss-cat-root .ss-cat-bestbar__arrow { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(15, 15, 15, .18); border-radius: var(--ss-r, 6px); background: transparent; color: var(--ss-black, #0F0F0F); cursor: pointer; transition: background-color .3s cubic-bezier(.4, 0, .2, 1), color .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-bestbar__arrow:hover { background: var(--ss-black, #0F0F0F); border-color: var(--ss-black, #0F0F0F); color: #FAF6EE; } .ss-cat-root .ss-cat-bestbar__arrow:disabled { opacity: .35; cursor: default; } .ss-cat-root .ss-cat-bestbar__arrow:disabled:hover { background: transparent; border-color: rgba(15, 15, 15, .18); color: var(--ss-black, #0F0F0F); } .ss-cat-root .ss-cat-bestbar__row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; /* vnitrni padding = prostor pro hover lift + stin minikaret; zaporny margin vrati box do puvodniho vnejsiho odsazeni */ padding: 6px 2px 18px; margin: -6px -2px -18px; } .ss-cat-root .ss-cat-bestbar__row::-webkit-scrollbar { display: none; } /* ---- Horizontalni mini-karta ---- */ .ss-cat-root .ss-cat-minicard { display: flex; align-items: center; gap: 14px; padding: 10px; background: #FAF6EE; border: 1px solid rgba(15, 15, 15, .06); border-radius: 10px; text-decoration: none; flex: 0 0 calc((100% - 48px) / 4); scroll-snap-align: start; transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s cubic-bezier(.4, 0, .2, 1), border-color .35s cubic-bezier(.4, 0, .2, 1), background-color .35s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-minicard:hover { transform: translateY(-3px); background: #FFFFFF; border-color: rgba(15, 15, 15, .12); box-shadow: 0 14px 30px rgba(15, 15, 15, .08); } .ss-cat-root .ss-cat-minicard__thumb { width: 84px; height: 84px; flex-shrink: 0; border-radius: var(--ss-r, 6px); overflow: hidden; background: var(--ss-cream, #E8DDC8); } .ss-cat-root .ss-cat-minicard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-minicard:hover .ss-cat-minicard__thumb img { transform: scale(1.04); } .ss-cat-root .ss-cat-minicard__text { min-width: 0; display: flex; flex-direction: column; gap: 8px; } .ss-cat-root .ss-cat-minicard__name { font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 13px; font-weight: 500; line-height: 1.36; color: var(--ss-black, #0F0F0F); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ss-cat-root .ss-cat-minicard__price { font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 15px; font-weight: 700; color: var(--ss-black, #0F0F0F); } /* ---- SEO PRUVODCE ---- */ .ss-cat-root .ss-cat-guide { margin-top: 80px; padding-top: 56px; border-top: 1px solid var(--ss-border, rgba(15, 15, 15, .10)); display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(32px, 5vw, 80px); align-items: start; width: 100%; } .ss-cat-root .ss-cat-guide__heading { font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif); font-weight: 300; font-size: clamp(28px, 3vw, 44px); letter-spacing: -.02em; line-height: 1.08; color: var(--ss-black, #0F0F0F); margin: 0; max-width: 360px; } .ss-cat-root .ss-cat-guide__heading em { font-style: italic; color: var(--ss-terracotta, #9A7A5F); } .ss-cat-root .ss-cat-guide__body { font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: clamp(14.5px, 1.05vw, 16px); line-height: 1.75; color: var(--ss-text, #0F0F0F); } .ss-cat-root .ss-cat-guide__body p { margin: 0 0 16px; } .ss-cat-root .ss-cat-guide__body p:last-child { margin-bottom: 0; } .ss-cat-root .ss-cat-guide__body strong { font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif); font-style: italic; font-weight: 400; font-size: 1.05em; color: var(--ss-black, #0F0F0F); } .ss-cat-root .ss-cat-guide__nudge { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ss-border, rgba(15, 15, 15, .10)); font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 13.5px; color: var(--ss-muted, rgba(15, 15, 15, .62)); } .ss-cat-root .ss-cat-guide__nudge a { color: var(--ss-terracotta-deep, #7E6248); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; } /* ---- FAQ accordion ---- */ .ss-cat-root .ss-cat-faq { margin-top: 80px; padding: 56px 0 100px; border-top: 1px solid var(--ss-border, rgba(15, 15, 15, .10)); width: 100%; } .ss-cat-root .ss-cat-faq__head { text-align: center; margin-bottom: 40px; } .ss-cat-root .ss-cat-faq__heading { font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif); font-weight: 300; font-size: clamp(28px, 3vw, 44px); letter-spacing: -.02em; line-height: 1.05; color: var(--ss-black, #0F0F0F); margin: 0; } .ss-cat-root .ss-cat-faq__list { max-width: 780px; margin: 0 auto; } .ss-cat-root .ss-cat-faq__item { border-bottom: 1px solid var(--ss-border, rgba(15, 15, 15, .10)); } .ss-cat-root .ss-cat-faq__item:first-child { border-top: 1px solid var(--ss-border, rgba(15, 15, 15, .10)); } .ss-cat-root .ss-cat-faq__item summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif); font-weight: 400; font-size: clamp(17px, 1.6vw, 20px); color: var(--ss-black, #0F0F0F); transition: color .25s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-faq__item summary::-webkit-details-marker { display: none; } .ss-cat-root .ss-cat-faq__item summary:hover { color: var(--ss-terracotta, #9A7A5F); } .ss-cat-root .ss-cat-faq__ico { position: relative; width: 14px; height: 14px; flex-shrink: 0; transition: transform .3s cubic-bezier(.4, 0, .2, 1); } .ss-cat-root .ss-cat-faq__ico::before, .ss-cat-root .ss-cat-faq__ico::after { content: ''; position: absolute; background: var(--ss-terracotta, #9A7A5F); } .ss-cat-root .ss-cat-faq__ico::before { left: 0; top: 6px; width: 14px; height: 2px; } .ss-cat-root .ss-cat-faq__ico::after { left: 6px; top: 0; width: 2px; height: 14px; } .ss-cat-root .ss-cat-faq__item[open] .ss-cat-faq__ico { transform: rotate(135deg); } .ss-cat-root .ss-cat-faq__body { padding: 0 36px 24px 0; font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 14px; line-height: 1.7; color: var(--ss-muted, rgba(15, 15, 15, .62)); max-width: 640px; } .ss-cat-root .ss-cat-faq__cta { text-align: center; margin-top: 36px; font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif); font-size: 13.5px; color: var(--ss-muted, rgba(15, 15, 15, .62)); } .ss-cat-root .ss-cat-faq__cta a { color: var(--ss-terracotta-deep, #7E6248); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; } /* ============================================================ 12) ANIMATIONS — only ONE-TIME fade-in on root sections. NO per-card stagger — that was the GPU compositor leak in v14/v15. ============================================================ */ @keyframes ss-cat-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .ss-cat-root .ss-cat-hero, .ss-cat-root .ss-cat-bestbar, .ss-cat-root .ss-cat-subcats, .ss-cat-root .ss-cat-sortrow, .ss-cat-root .ss-cat-grid { animation: ss-cat-fade-in .35s cubic-bezier(.4, 0, .2, 1) both; } .ss-cat-root .ss-cat-hero { animation-delay: 0s; } .ss-cat-root .ss-cat-bestbar { animation-delay: .04s; } .ss-cat-root .ss-cat-subcats { animation-delay: .08s; } .ss-cat-root .ss-cat-sortrow { animation-delay: .12s; } .ss-cat-root .ss-cat-grid { animation-delay: .16s; } /* LEAVE TRANSITION — applied via JS body.ss-cat-leaving on subcat/sort/pagination click */ body.ss-cat-leaving .ss-cat-root .ss-cat-hero, body.ss-cat-leaving .ss-cat-root .ss-cat-bestbar, body.ss-cat-leaving .ss-cat-root .ss-cat-subcats, body.ss-cat-leaving .ss-cat-root .ss-cat-sortrow, body.ss-cat-leaving .ss-cat-root .ss-cat-grid, body.ss-cat-leaving .ss-cat-root .ss-cat-pagination { opacity: 0; transform: translateY(-6px); transition: opacity .18s cubic-bezier(.4, 0, .2, 1), transform .22s cubic-bezier(.4, 0, .2, 1); animation: none; } /* ============================================================ 13) FOCUS INDICATORS (WCAG 2.4.7 AA) ============================================================ */ .ss-cat-root .ss-cat-crumbs a:focus-visible, .ss-cat-root .ss-cat-cta:focus-visible, .ss-cat-root .ss-cat-meta-link:focus-visible, .ss-cat-root .ss-cat-subcat:focus-visible, .ss-cat-root .ss-cat-sortdropdown__trigger:focus-visible, .ss-cat-root .ss-cat-sortdropdown__option:focus-visible, .ss-cat-root .ss-cat-card__media:focus-visible, .ss-cat-root .ss-cat-card__name-link:focus-visible, .ss-cat-root .ss-cat-card__wish:focus-visible, .ss-cat-root .ss-cat-card__qty button:focus-visible, .ss-cat-root .ss-cat-card__qty input:focus-visible, .ss-cat-root .ss-cat-card__add:focus-visible, .ss-cat-root .ss-cat-card-tamara:focus-visible, .ss-cat-root .ss-cat-pagination__item:focus-visible, .ss-cat-root .ss-cat-bestbar__arrow:focus-visible, .ss-cat-root .ss-cat-minicard:focus-visible, .ss-cat-root .ss-cat-faq__item summary:focus-visible, .ss-cat-root .ss-cat-guide__nudge a:focus-visible, .ss-cat-root .ss-cat-faq__cta a:focus-visible { outline: 2px solid var(--ss-terracotta-deep, #7E6248); outline-offset: 2px; border-radius: 4px; } /* ============================================================ 14) RESPONSIVE ============================================================ */ /* v18-r2: grid se zmenšuje plynule 5 -> 4 -> 3 -> 2 -> 1, aby karty nikdy nenarostly. Žádný skok co by je zvětšil. */ @media (max-width: 1280px) { .ss-cat-root .ss-cat-grid { grid-template-columns: repeat(3, 1fr); /* v23: base je teď 3, sladit (bylo 4 = víc než base) */ } } @media (max-width: 1000px) { .ss-cat-root .ss-cat-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .ss-cat-root .ss-cat-hero { grid-template-columns: 1fr; padding: 36px 0 56px; gap: 40px; } } @media (max-width: 680px) { .ss-cat-root .ss-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; } } @media (max-width: 540px) { .ss-cat-root { padding: 0 16px clamp(40px, 4vw, 64px); /* v22: zachovat bottom mezeru (dřív 0 16px → bottom 0 = footer nalepený) */ } .ss-cat-root .ss-cat-actions { gap: 18px; } .ss-cat-root .ss-cat-subcats { gap: 24px 28px; padding: 28px 0 22px; } } @media (max-width: 460px) { /* v20: 2 produkty vedle sebe i na malých telefonech (bylo 1fr = 1 produkt). ≤680 už mělo 2 sloupce, jen ≤460 to vracelo na 1 → většina telefonů (390–430) viděla jen 1 produkt. Gap z ≤680 (28px 14px) platí dál. */ .ss-cat-root .ss-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; } } /* --- v19: bestseller pasek + SEO pruvodce responsive --- */ @media (max-width: 1100px) { .ss-cat-root .ss-cat-minicard { flex-basis: calc((100% - 32px) / 3); } } @media (max-width: 1000px) { .ss-cat-root .ss-cat-guide { grid-template-columns: 1fr; } .ss-cat-root .ss-cat-guide__heading { max-width: none; } } @media (max-width: 760px) { .ss-cat-root .ss-cat-minicard { flex-basis: calc((100% - 16px) / 2); } } @media (max-width: 600px) { .ss-cat-root .ss-cat-minicard { flex-basis: 84%; } } /* ============================================================ 15) REDUCED MOTION — vestibular safety. ============================================================ */ @media (prefers-reduced-motion: reduce) { .ss-cat-root .ss-cat-hero, .ss-cat-root .ss-cat-bestbar, .ss-cat-root .ss-cat-subcats, .ss-cat-root .ss-cat-sortrow, .ss-cat-root .ss-cat-grid { animation: none !important; opacity: 1 !important; transform: none !important; } .ss-cat-root .ss-cat-card:hover, .ss-cat-root .ss-cat-card:hover .ss-cat-card__media img, .ss-cat-root .ss-cat-card__wish:hover, .ss-cat-root .ss-cat-card-tamara:hover, .ss-cat-root .ss-cat-cta:hover, .ss-cat-root .ss-cat-minicard:hover, .ss-cat-root .ss-cat-minicard:hover .ss-cat-minicard__thumb img { transform: none !important; } .ss-cat-root .ss-cat-faq__ico { transition: none !important; } body.ss-cat-leaving .ss-cat-root * { transition: none !important; } }