(na webu je to
u produktu a
v carouselu). */
:is(p, div):has(> .gift-badge--duo) {
container-type: inline-size;
}
@container (max-width: 24rem) {
.gift-badge--inline.gift-badge--duo {
flex-direction: column;
gap: .5rem;
padding: .625rem 1.125rem .75rem;
border-radius: 1rem;
}
.gift-badge--inline.gift-badge--duo .gift-badge__divider {
width: auto;
height: 1px;
margin: 0;
background: linear-gradient(90deg, transparent, var(--gb-gold) 50%, transparent);
}
}
/* Záloha pro starší prohlížeče bez container queries */
@media (max-width: 399.98px) {
.gift-badge--inline.gift-badge--duo {
flex-direction: column;
gap: .5rem;
padding: .625rem 1.125rem .75rem;
border-radius: 1rem;
}
.gift-badge--inline.gift-badge--duo .gift-badge__divider {
width: auto;
height: 1px;
margin: 0;
background: linear-gradient(90deg, transparent, var(--gb-gold) 50%, transparent);
}
}
/* ===== Moderní carousel ===== */
.modern-carousel {
/* Rozměry */
--carousel-height: clamp(320px, 65vh, 570px);
--carousel-radius: 1.5rem;
/* Společné boční odsazení – popisek i ovládání začínají na stejné linii */
--side: clamp(1.25rem, 6%, 7rem);
/* Ovládací lišta dole: šipky + indikátory */
--ctrl-size: clamp(2.5rem, 4vw, 3rem); /* průměr kulatých šipek */
--ctrl-icon: calc(var(--ctrl-size) * .4); /* velikost ikony v šipce */
--ctrl-gap: .5rem; /* mezera mezi šipkami */
--ctrl-bottom: clamp(1.25rem, 3vw, 2rem); /* odsazení od spodního okraje */
--dots-offset: 1.5rem; /* mezera mezi šipkami a indikátory */
--dot-width: clamp(28px, 4.5vw, 60px);
--dot-height: 5px;
/* Délka plnění indikátoru – musí odpovídat data-bs-interval (6000 = 6s) */
--slide-duration: 8000ms;
/* Popisek */
--caption-top: clamp(1.5rem, 12%, 5rem);
position: relative;
border-radius: var(--carousel-radius);
overflow: hidden;
}
/* ---------- Slide + obrázek ---------- */
.modern-carousel .carousel-item {
height: var(--carousel-height);
overflow: hidden;
background: #111;
}
.modern-carousel .carousel-item .carousel-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.2);
}
.modern-carousel .carousel-item.active .carousel-img {
animation: kenburns 8s ease-out both;
}
@keyframes kenburns {
from { transform: scale(1.2); }
to { transform: scale(1); }
}
/* Ztmavení spodní části kvůli čitelnosti textu a ovládání */
.modern-carousel .carousel-item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(0, 0, 0, .6) 0%,
rgba(0, 0, 0, .1) 45%,
transparent 70%);
pointer-events: none;
}
/* ---------- Popisek ---------- */
.modern-carousel .carousel-caption {
z-index: 2;
top: var(--caption-top);
left: var(--side);
right: var(--side);
/* končí nad ovládací lištou, takže do ní obsah nikdy nezajede */
bottom: calc(var(--ctrl-bottom) + var(--ctrl-size) + 1rem);
max-width: 600px;
padding: 0;
text-align: left;
}
.modern-carousel .carousel-caption h2 {
font-size: clamp(1.75rem, 3vw, 2.75rem);
font-weight: 500;
margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.modern-carousel .carousel-caption p {
font-size: clamp(1rem, 1.3vw, 1.2rem);
font-weight: 300;
margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
text-wrap: balance;
}
.modern-carousel .carousel-caption a {
font-weight: 600;
}
/* Postupný nájezd obsahu popisku */
.modern-carousel .carousel-caption > * {
opacity: 0;
}
.modern-carousel .carousel-item.active .carousel-caption > * {
animation: captionIn .8s ease both;
}
.modern-carousel .carousel-item.active .carousel-caption > *:nth-child(2) { animation-delay: .15s; }
.modern-carousel .carousel-item.active .carousel-caption > *:nth-child(3) { animation-delay: .3s; }
.modern-carousel .carousel-item.active .carousel-caption > *:nth-child(4) { animation-delay: .45s; }
@keyframes captionIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- Šipky – dole vlevo, zarovnané s popiskem ---------- */
.modern-carousel .carousel-control-prev,
.modern-carousel .carousel-control-next {
top: auto;
right: auto;
bottom: var(--ctrl-bottom);
z-index: 3;
width: var(--ctrl-size);
height: var(--ctrl-size);
margin: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .15);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 1;
transition: background .3s ease;
}
.modern-carousel .carousel-control-prev {
left: var(--side);
}
.modern-carousel .carousel-control-next {
left: calc(var(--side) + var(--ctrl-size) + var(--ctrl-gap));
}
.modern-carousel .carousel-control-prev:hover,
.modern-carousel .carousel-control-next:hover,
.modern-carousel .carousel-control-prev:focus-visible,
.modern-carousel .carousel-control-next:focus-visible {
background: rgba(255, 255, 255, .3);
opacity: 1;
}
.modern-carousel .carousel-control-prev:focus-visible,
.modern-carousel .carousel-control-next:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.modern-carousel .carousel-control-prev-icon,
.modern-carousel .carousel-control-next-icon {
width: var(--ctrl-icon);
height: var(--ctrl-icon);
}
/* ---------- Indikátory – hned za šipkami, na stejné linii ---------- */
.modern-carousel .carousel-indicators {
left: calc(var(--side) + 2 * var(--ctrl-size) + var(--ctrl-gap) + var(--dots-offset));
right: auto;
bottom: var(--ctrl-bottom);
z-index: 3;
height: var(--ctrl-size); /* stejná výška jako šipky → svislý střed sedí */
margin: 0;
align-items: center;
justify-content: flex-start;
}
/* Indikátor = poloprůhledná dráha, do které se plní bílý průběh */
.modern-carousel .carousel-indicators [data-bs-target] {
position: relative;
overflow: hidden;
width: var(--dot-width);
height: var(--dot-height);
margin: 0 4px;
border: 0;
border-radius: 999px;
background-color: rgba(255, 255, 255, .35);
opacity: 1;
transition: background-color .3s ease;
}
.modern-carousel .carousel-indicators [data-bs-target]:hover {
background-color: rgba(255, 255, 255, .55);
}
.modern-carousel .carousel-indicators [data-bs-target]::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 0;
border-radius: inherit;
background: #fff;
}
/* Aktivní indikátor se plní po dobu zobrazení slidu.
Bootstrap při přepnutí přesune .active na další indikátor,
takže se animace spustí znovu od nuly. */
.modern-carousel .carousel-indicators .active::after {
animation: indicatorProgress var(--slide-duration) linear forwards;
}
@keyframes indicatorProgress {
from { width: 0; }
to { width: 100%; }
}
.modern-carousel .carousel-indicators [data-bs-target]:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
/* ---------- Mobil – mění se jen hodnoty proměnných ---------- */
@media (max-width: 767.98px) {
.modern-carousel {
--carousel-height: 500px;
--carousel-radius: 1rem;
--caption-top: 2.5rem;
--dots-offset: 1rem;
--dot-height: 4px;
}
}
/* ---------- Uživatelé s omezenými animacemi ---------- */
@media (prefers-reduced-motion: reduce) {
.modern-carousel .carousel-item .carousel-img,
.modern-carousel .carousel-item.active .carousel-img {
transform: none;
animation: none;
}
.modern-carousel .carousel-caption > *,
.modern-carousel .carousel-item.active .carousel-caption > * {
opacity: 1;
animation: none;
}
/* Bez animace je aktivní indikátor rovnou plný */
.modern-carousel .carousel-indicators .active::after {
width: 100%;
animation: none;
}
}
.marketplace-link {
transition: transform .2s ease, box-shadow .2s ease;
}
.marketplace-link:hover {
transform: translateY(-3px);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12) !important;
}
/* --- -------- breadcrumb ------------ -----*/
.breadcrumb {
display: none;
}
[class*="rubric-"] .breadcrumb, #eshop .breadcrumb, .category-detail .breadcrumb, .product-detail .breadcrumb, .gallery-detail .breadcrumb, .folder-detail .breadcrumb {
display: flex;
}
/* Celoplošný bílý pruh se stínem */
/*nav.breadcrumb {
width: 100%;
}*/
/* Vycentrování a mřížka uvnitř bílého pruhu */
nav.breadcrumb .breadcrumb__list {
/* Chování BOOTSTRAP CONTAINERU */
width: 100%;
margin-right: auto;
margin-left: auto;
@media (min-width: 1400px) {
max-width: 1320px;
}
}
/* Položky jako col-auto */
nav.breadcrumb .breadcrumb__item {
flex: 0 0 auto;
width: auto;
/* Odstraněno záporné odsazení, aby text lícoval přesně s mřížkou webu */
padding-right: 0.5rem;
padding-left: 0.5rem;
}