.hhs {
    --hhs-container: 1530px;
    --hhs-radius: 6px;
    --hhs-gold: #c9b28b;
    --hhs-ink: #2a2a2a;
    --hhs-muted: #6a6a6a;
    --hhs-card: rgba(255, 255, 255, 0.72);
    --hhs-card-2: rgba(255, 255, 255, 0.62);
    --hhs-extras: #d7cdbd;
    --hhs-border: rgba(0, 0, 0, 0.18);
    --hhs-shadow: 0 20px 60px rgba(0, 0, 0, 0.16);

    width: 100%;
    padding: 30px 0;
    box-sizing: border-box;
}

.hhs * {
    box-sizing: border-box;
}

.hhs__container {
    max-width: var(--hhs-container);
    margin: 0 auto;
	font-family: "Monserrat", Sans-serif !important;
    display: flex;
    flex-direction: column;
}

.hhs__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 16px;
    user-select: none;
}

.hhs__count {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--hhs-ink);
    font-family: inherit;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hhs__countCurrent,
.hhs__countTotal {
    font-size: 18px;
    font-weight: 400;
	color: #2F2F2F;
}

.hhs__countLine {
    width: 270px;
    height: 1px;
    background: #EDEDED;
    display: inline-block;
}

.hhs__nav {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2F2F2F;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 300;
}

.hhs__navBtn {
    border: 0;
    background: transparent;
    color: #2F2F2F;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 18px;
    font-weight: 300;
    text-transform: lowercase;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s ease;
}

.hhs__navBtn:hover,
.hhs__navBtn:focus {
    color: #A8875E;
	background: transparent !important;
	outline: none !important;
}

.hhs__navArrow {
    width: 65px;
    height: 10px;
    flex-shrink: 0;
}

.hhs__viewport {
    position: relative;
    overflow: hidden;
    border-radius: var(--hhs-radius);
}

.hhs__track {
    display: flex;
    width: 100%;
    transform: translate3d(0, 0, 0);
    transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.hhs__slide {
    flex: 0 0 100%;
    position: relative;
    min-height: 610px;
    background: #e8e8e8;
}

.hhs__slideMedia {
    position: absolute;
    inset: 0;
}

.hhs__img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

.hhs__card {
    position: absolute;
    top: 30px;
    right: 30px;
    width: min(360px, calc(100% - 44px));
    border-radius: var(--hhs-radius);
    overflow: hidden;
	background: rgba(255, 255, 255, 0.80);
	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
	backdrop-filter: blur(6px);
}

.hhs__extras {
    display: flex;
    align-items: center;
	justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--hhs-extras);
    color: #2f2f2f;
    font-size: 14px;
	font-weight: 400;
    text-transform: none;
}

.hhs__extra {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    min-width: 0;
}

.hhs__extraIcon {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.hhs__extraIcon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.hhs__extraIcon .hs-font-icon {
    color: var( --hs-color-primary, #A8875E );
    font-size: 16px;
}

.hhs__extraSep {
    width: 1px;
    height: 18px;
    background: rgba(0, 0, 0, 0.16);
    display: inline-block;
    flex: 0 0 auto;
}

.hhs__cardBody {
    padding: 22px 22px 20px;
    text-align: center;
    color: var(--hhs-ink);
}

.hhs__logoWrap {
    display: flex;
    justify-content: center;
    margin: 6px 0 10px;
}

.hhs__logo {
    max-width: 150px;
    max-height: 70px;
    width: auto;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
}

.hhs__hotelName {
	display: inline-block;
    padding: 10px 0 0 0;
    font-size: 16px;
    text-transform: uppercase;
	color: #2f2f2f;
    font-weight: 700;
    margin: 6px 0 0 0;
	border-top: 1px solid #A8875E;
}

.hhs__hotelLoc {
	padding: 0 0 10px;
    font-size: 14px;
	font-weight: 300;
    text-transform: uppercase;
    color: #2f2f2f;
    margin: 0 0 14px;
	border-bottom: 1px solid #A8875E;
}

.hhs__stars {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0 0 14px;
}

.hhs__star img {
    width: 25px;
    height: 25px;
    display: block;
}

.hhs__desc {
    font-size: 16px;
    line-height: 29px;
	font-weight: 300;
    color: #2F2F2F;
    margin: 0 auto 18px;
}

.hhs__buttons {
    display: grid;
    gap: 10px;
    margin: 0 auto;
}

.hhs__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 6px;
    padding: 14px 14px;
    text-transform: uppercase;
    font-size: 16px;
	font-weight: 300;
    border: 1px solid var( --hs-color-primary, #D1C5B5 );
	color: #2F2F2F;
	text-decoration: none !important;
	background: #ffffff;
}

.hhs__btn:hover {
    background: var( --hs-color-primary, #D1C5B5 );
}

@media (max-width: 980px) {
    .hhs {
        padding: 20px 0px 30px;
    }
    .hhs__top {
        gap: 14px;
    }
    .hhs__countLine {
        width: min(220px, 24vw);
    }
    .hhs__nav {
        gap: 20px;
    }
    .hhs__navArrow {
        width: 45px;
    }
    .hhs__card {
        right: 14px;
        top: 14px;
        width: min(420px, calc(100% - 28px));
    }
}

/* Мобилна навигация – стрелки (GIF); на мобилно са горе */
.hhs__navMobile {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 0 0 16px;
    margin: -30px auto 0;
}

.hhs__navMobileBtn {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.hhs__navMobileBtn:hover {
    background: transparent !important;
}

.hhs__navMobileBtn img {
    display: block;
    width: auto;
    height: auto;
    max-width: 80px;
}

.hhs__countMobile {
    display: none;
}

@media (max-width: 680px) {
    .hhs {
        padding: 20px 0px 30px;
    }
    .hhs__top {
        display: none;
    }
    .hhs__container {
        padding: 0 12px;
    }
    .hhs__navMobile {
        display: flex;
        order: 1;
    }
    .hhs__viewport {
        order: 2;
        overflow: hidden;
        margin: 0 -12px;
        padding: 14px 0;
    }
    .hhs__countMobile {
        display: flex;
        order: 3;
        justify-content: center;
        padding: 24px 0 0;
    }
    .hhs__countMobile .hhs__countLine {
        width: 100%;
    }
    .hhs__slide {
        display: flex;
        flex-direction: column;
        min-height: auto;
        background: transparent;
    }
    .hhs__slideMedia {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        order: 1;
    }
    .hhs__img {
        height: auto !important;
        aspect-ratio: 16 / 9;
        border-radius: 6px !important;
    }
    .hhs__card {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        max-width: none;
        order: 2;
        margin: 14px 1px 14px 1px;
    }

    .hhs__extras {
        padding: 8px;
    }
    .hhs__extra {
        gap: 4px;
        font-size: 13px;
    }
    .hhs__extraIcon {
        width: 17px;
        height: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hhs__track {
        transition: none;
    }
    .hhs__btn {
        transition: none;
    }
}

/* Section chrome (heading / subtitle / CTA) added by the native home template */
.home-hotels {
	padding-top: 60px;
	padding-bottom: 60px;
	font-family: "Monserrat", Sans-serif;
}
.home-hotels__head {
	max-width: 1000px;
	margin: 0 auto 40px;
	padding: 0 20px;
	text-align: center;
}
.home-hotels__title {
	font-size: 42px;
	font-weight: 300;
	text-transform: uppercase;
	color: #2F2F2F;
	margin: 0 0 16px;
}
.home-hotels__subtitle {
	font-size: 16px;
	line-height: 29px;
	color: #616161;
	margin: 0;
}
.home-hotels__cta {
	text-align: center;
	margin-top: 40px;
}
.home-hotels__btn {
	display: inline-block;
	padding: 12px 34px;
	border: 1px solid var( --hs-color-primary, #A8875E );
	color: var( --hs-color-primary, #A8875E );
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	text-decoration: none;
	transition: background .25s ease, color .25s ease;
}
.home-hotels__btn:hover {
	background: var( --hs-color-primary, #A8875E );
	color: #FFFFFF;
}