/* ============================================================ michalovytrubky-shop.cz — mt-recent-1.css — v1 (20. 07. 2026) NAPOSLEDY PROHLÍŽENÉ + MOHLO BY VÁS ZAJÍMAT PÁR s mt-recent-1.js. Záhlaví: vložit PŘED mt-width-1.css (mt-width-1.css zůstává VŽDY poslední CSS). Vše scoped .mt-rec-* / .mt-rec (nula generických selektorů, nula :not — jen :where kdyby bylo třeba). Karty = vizuální klon .mt-cat-card z mt-category-4.css (BASELINE curated card recipe: bílá karta, hairline border, radius 10, lift -3px na hover, CTA sytá --mt-primary). Easing literal cubic-bezier(.4,0,.2,1) — nikdy var v transition. ============================================================ */ /* ---------- Sekce (vkládá se jako přímé dítě před .mt-footer) ---------- */ .mt-rec { margin: 56px 0 0; padding: 0; } .mt-rec__inner { max-width: var(--mt-container, 1440px); margin: 0 auto; padding: 0 var(--mt-pad, 24px); box-sizing: border-box; } /* ---------- Hlavička sekce ---------- */ .mt-rec__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin: 0 0 6px; } .mt-rec__title { font-family: var(--mt-display, 'Helvetica', sans-serif); font-size: 22px; font-weight: 700; color: var(--mt-text, #253041); letter-spacing: 0; margin: 0; } .mt-rec__sub { font-family: var(--mt-display, 'Helvetica', sans-serif); font-size: 13.5px; color: var(--mt-text-hint, rgba(37, 48, 65, .55)); margin: 0 0 14px; } /* Vymazat historii — vzor legacy .mt-product-recent-head .clear */ .mt-rec__clear { background: transparent; border: 0; padding: 0; font-family: var(--mt-display, 'Helvetica', sans-serif); font-size: 11.5px; color: var(--mt-text-hint, rgba(37, 48, 65, .55)); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: color .25s cubic-bezier(.4, 0, .2, 1); } .mt-rec__clear:hover { color: var(--mt-primary, #0052DA); } /* ---------- Horizontální scroll-row ---------- */ /* Padding 6/18 = prostor pro hover lift (-3px) a stín, aby je overflow-x: auto neuřízl. Záporný margin kompenzuje boky. */ .mt-rec__row { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding: 6px 4px 18px; margin: 0 -4px; scrollbar-width: thin; scrollbar-color: rgba(37, 48, 65, .18) transparent; } .mt-rec__row::-webkit-scrollbar { height: 8px; } .mt-rec__row::-webkit-scrollbar-track { background: transparent; } .mt-rec__row::-webkit-scrollbar-thumb { background: rgba(37, 48, 65, .18); border-radius: 999px; } /* ---------- Karta (klon .mt-cat-card, bez wish/qty) ---------- */ .mt-rec-card { flex: 0 0 232px; width: 232px; scroll-snap-align: start; display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid rgba(15, 15, 15, .06); border-radius: 10px; padding: 16px; box-sizing: border-box; box-shadow: 0 6px 18px rgba(15, 15, 15, .04); text-decoration: none; color: inherit; transition: transform .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); } .mt-rec-card:hover { transform: translateY(-3px); border-color: rgba(15, 15, 15, .12); box-shadow: 0 14px 36px rgba(15, 15, 15, .08); text-decoration: none; color: inherit; } .mt-rec-card:focus-visible { outline: 2px solid var(--mt-primary, #0052DA); outline-offset: 2px; } /* Media — čtverec, cover, radius 6 (shoda s kartami kategorie v24) */ .mt-rec-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--mt-primary-bg, #DBEAFE); margin-bottom: 12px; border-radius: 6px; } .mt-rec-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.4, 0, .2, 1); } .mt-rec-card:hover .mt-rec-card__media img { transform: scale(1.03); } /* Název — 14.5/500, 2 řádky clamp, pod ním hairline (shoda rytmu karty) */ .mt-rec-card__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; font-family: var(--mt-display, 'Helvetica', sans-serif); font-size: 14.5px; font-weight: 500; color: var(--mt-text, #253041); line-height: 1.35; min-height: 39px; max-height: 39px; margin: 0 0 11px; padding-bottom: 11px; border-bottom: 1px solid rgba(15, 15, 15, .06); } /* Cena + dostupnost */ .mt-rec-card__pricerow { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 12px; } .mt-rec-card__price { font-family: var(--mt-display, 'Helvetica', sans-serif); font-size: 18px; font-weight: 700; color: var(--mt-text, #253041); font-feature-settings: "tnum"; white-space: nowrap; } .mt-rec-card__price-old { font-family: var(--mt-display, 'Helvetica', sans-serif); font-size: 12.5px; color: rgba(15, 15, 15, .46); text-decoration: line-through; margin-left: 6px; font-weight: 400; } .mt-rec-card__stock { font-family: var(--mt-display, 'Helvetica', sans-serif); font-size: 11.5px; font-weight: 600; color: var(--mt-success, #10B981); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* CTA — vzhled .mt-cat-card__add--detail (sytá modrá, hover deep) */ .mt-rec-card__cta { display: flex; align-items: center; justify-content: center; margin-top: auto; height: 36px; padding: 0 10px; background: var(--mt-primary, #0052DA); color: #FFFFFF; border-radius: 6px; font-family: var(--mt-display, 'Helvetica', sans-serif); font-size: 13px; font-weight: 600; letter-spacing: .04em; transition: background-color .25s cubic-bezier(.4, 0, .2, 1); } .mt-rec-card:hover .mt-rec-card__cta { background: var(--mt-primary-deep, #003BA8); } /* ---------- Mobil ---------- */ @media (max-width: 767px) { .mt-rec { margin-top: 44px; } .mt-rec__inner { padding: 0 16px; } .mt-rec__title { font-size: 20px; } .mt-rec__sub { font-size: 12.5px; } .mt-rec-card { flex: 0 0 178px; width: 178px; padding: 12px; } .mt-rec-card__price { font-size: 16px; } .mt-rec-card__stock { display: none; } }