/* MP-18.7 PREVIEW — Homepage Visual Refresh.
   Scoped to .hkm-home-refresh so production pages keep their current presentation. */

.hkm-home-refresh {
    --hr-ink: #08233f;
    --hr-green: var(--hkm-green, #007b67);
    --hr-yellow: #ffd83f;
    --hr-coral: #ff6f61;
    --hr-mint: #bff3df;
    --hr-sky: #cfeeff;
    --hr-lilac: #e7ddff;
    --hr-cream: #fff8e9;
    --hr-shadow: 0 13px 34px rgba(8, 35, 63, .10);
    color: var(--hr-ink);
    background:
        radial-gradient(circle at 4% 12%, color-mix(in srgb, var(--hkm-yellow) 32%, transparent) 0 8%, transparent 25%),
        radial-gradient(circle at 96% 28%, color-mix(in srgb, var(--hkm-accent) 14%, transparent) 0 7%, transparent 24%),
        linear-gradient(180deg, #fffdf5 0%, #effbf7 45%, #fff7ee 100%);
}

.hkm-home-refresh .hkm-header {
    border-bottom: 1px solid rgba(0, 107, 91, .12);
    background: linear-gradient(100deg, rgba(255, 253, 244, .97), rgba(239, 255, 249, .97) 60%, rgba(255, 246, 210, .96));
    box-shadow: 0 7px 24px rgba(8, 35, 63, .08);
    backdrop-filter: blur(14px);
}

.hkm-home-refresh .hkm-header-main {
    padding-top: 8px;
    padding-bottom: 7px
}

.hkm-home-refresh .hkm-brand span {
    color: var(--hr-green);
    font-weight: 950;
    letter-spacing: -.025em
}

.hkm-home-refresh .hkm-head-search input {
    border-color: rgba(0, 107, 91, .16);
    background: rgba(255, 255, 255, .84);
    box-shadow: inset 0 1px 0 #fff
}

.hkm-home-refresh .hkm-head-tools {
    gap: 7px
}

.hkm-home-refresh .hkm-head-tools a,
.hkm-home-refresh .hkm-head-tools button {
    border: 1px solid rgba(0, 107, 91, .08);
    background: #fff;
    color: var(--hr-ink);
    box-shadow: 0 4px 12px rgba(8, 35, 63, .05)
}

.hkm-home-refresh .hkm-head-tools>*:nth-child(3n+1) {
    background: #e8fbf4
}

.hkm-home-refresh .hkm-head-tools>*:nth-child(3n+2) {
    background: #eef7ff
}

.hkm-home-refresh .hkm-head-tools>*:nth-child(3n) {
    background: #fff5d5
}

.hkm-home-refresh .hkm-nav {
    padding-bottom: 8px;
    gap: 7px
}

.hkm-home-refresh .hkm-nav a {
    min-height: 34px;
    padding: 7px 15px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, .62)
}

.hkm-home-refresh .hkm-nav a:hover,
.hkm-home-refresh .hkm-nav a.hkm-active {
    background: var(--hr-green);
    color: #fff;
    box-shadow: 0 7px 16px color-mix(in srgb, var(--hr-green) 24%, transparent)
}

.hkm-home-refresh .hkm-main {
    padding-top: 8px;
    padding-bottom: 16px
}

.hkm-home-refresh .hkm-vs {
    margin-top: 14px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(8, 35, 63, .06);
    border-radius: 22px;
    box-shadow: var(--hr-shadow);
}

.hkm-home-refresh .hkm-vs:before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    right: -70px;
    top: -92px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .28);
    pointer-events: none;
}

.hkm-home-refresh .hkm-vs-inner {
    position: relative;
    z-index: 1
}

.hkm-home-refresh .hkm-vs-heading {
    align-items: flex-end;
    margin-bottom: 13px
}

.hkm-home-refresh .hkm-vs-heading h2 {
    margin-top: 5px;
    color: var(--hr-ink) !important;
    font-size: clamp(24px, 2.35vw, 34px);
    line-height: 1.05;
    letter-spacing: -.025em
}

.hkm-home-refresh .hkm-vs-heading p:not(.hkm-kicker) {
    max-width: 720px;
    margin: 5px 0 0;
    color: #3d566e !important;
    font-size: 14px;
    line-height: 1.45
}

.hkm-home-refresh .hkm-vs-heading>a {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: var(--hr-green) !important;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(8, 35, 63, .06)
}

.hkm-home-refresh .hkm-kicker {
    display: inline-flex;
    width: max-content;
    margin: 0;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: var(--hr-green) !important;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .12em
}

/* Hero remains the approved compact mosaic. */
.hkm-home-refresh .hkm-vs-hero {
    margin-top: 8px !important;
    padding: 0 !important;
    border: 0;
    background: transparent !important;
    box-shadow: none;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important
}

.hkm-home-refresh .hkm-vs-hero:before {
    display: none
}

.hkm-home-refresh .hkm-vs-hero-mosaic .hkm-hero-mosaic {
    border: 1px solid rgba(8, 35, 63, .05);
    background: linear-gradient(135deg, #fff3b2, #dff8ee);
    box-shadow: var(--hr-shadow)
}

.hkm-home-refresh .hkm-vs-hero-mosaic .hkm-hero-mosaic-main .hkm-hero-media img,
.hkm-home-refresh .hkm-vs-hero-mosaic .hkm-hero-mosaic-main .hkm-hero-media video {
    object-fit: contain !important;
    object-position: center !important
}

.hkm-home-refresh .hkm-hero-promo {
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 7px 18px rgba(8, 35, 63, .08)
}

.hkm-home-refresh .hkm-hero-promo:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 13px 26px rgba(8, 35, 63, .14)
}

/* SAFE26-HOLIDAY-HERO: public Hotel holiday booking CTA in the first viewport. */
.hkm-home-refresh .hkm-hero-promo-holiday {
    border: 3px solid #ff6b2c !important;
    background: linear-gradient(135deg, #ff5b35 0%, #ff932e 52%, #ffd63e 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 25px rgba(222, 67, 25, .38), 0 0 0 0 rgba(255, 107, 44, .48) !important;
    animation: hkmHolidayHeroPulse 1.8s ease-in-out infinite
}

.hkm-home-refresh .hkm-hero-promo-holiday:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .32) 45%, transparent 70%);
    transform: translateX(-120%);
    animation: hkmHolidayHeroShine 2.7s ease-in-out infinite
}

.hkm-home-refresh .hkm-hero-promo-holiday .hkm-hero-promo-icon {
    background: #fff;
    color: #e6451e;
    box-shadow: 0 7px 18px rgba(108, 30, 6, .22)
}

.hkm-home-refresh .hkm-hero-promo-holiday .hkm-hero-promo-copy small,
.hkm-home-refresh .hkm-hero-promo-holiday .hkm-hero-promo-copy b,
.hkm-home-refresh .hkm-hero-promo-holiday .hkm-hero-promo-copy span {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(92, 28, 5, .25)
}

.hkm-home-refresh .hkm-hero-promo-holiday .hkm-hero-promo-copy span {
    display: inline-flex;
    width: max-content;
    margin-top: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #fff;
    color: #bf3417 !important;
    text-shadow: none
}

.hkm-home-refresh .hkm-hero-holiday-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    margin-bottom: 2px;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase
}

.hkm-home-refresh .hkm-hero-holiday-live i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .24)
}

@keyframes hkmHolidayHeroPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 10px 25px rgba(222, 67, 25, .38), 0 0 0 0 rgba(255, 107, 44, .42) }
    50% { transform: scale(1.025); box-shadow: 0 15px 30px rgba(222, 67, 25, .48), 0 0 0 8px rgba(255, 107, 44, 0) }
}

@keyframes hkmHolidayHeroShine {
    0%, 55% { transform: translateX(-120%) }
    82%, 100% { transform: translateX(120%) }
}

/* Product rails: colourful stage, clean compact merchandise cards. */
.hkm-home-refresh .hkm-vs-product_slider {
    background: linear-gradient(125deg, #fff0a6 0%, #fff8d9 44%, #dff8ef 100%) !important
}

.hkm-home-refresh .hkm-vs-flash_sale {
    background: linear-gradient(125deg, #ff785f 0%, #ef4d56 45%, #ffbf35 130%) !important
}

.hkm-home-refresh .hkm-vs-flash_sale .hkm-vs-heading h2,
.hkm-home-refresh .hkm-vs-flash_sale .hkm-vs-heading p {
    color: #fff !important
}

.hkm-home-refresh .hkm-vs-flash_sale .hkm-kicker,
.hkm-home-refresh .hkm-vs-flash_sale .hkm-vs-heading>a {
    background: rgba(255, 255, 255, .92);
    color: #b52e37 !important
}

.hkm-home-refresh .hkm-product-deal-rail {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-rows: 1fr;
    align-items: start;
    gap: 11px;
    padding: 3px 2px 8px
}

.hkm-home-refresh .hkm-product-deal-rail .hkm-product-card {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0;
    align-self: start;
    padding: 8px;
    border: 1px solid rgba(8, 35, 63, .07);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(8, 35, 63, .09);
    transition: transform .22s ease, box-shadow .22s ease
}

.hkm-home-refresh .hkm-product-deal-rail .hkm-product-card:nth-child(5n+1) {
    border-top: 4px solid var(--hr-coral)
}

.hkm-home-refresh .hkm-product-deal-rail .hkm-product-card:nth-child(5n+2) {
    border-top: 4px solid #14aa8d
}

.hkm-home-refresh .hkm-product-deal-rail .hkm-product-card:nth-child(5n+3) {
    border-top: 4px solid #49a8e8
}

.hkm-home-refresh .hkm-product-deal-rail .hkm-product-card:nth-child(5n+4) {
    border-top: 4px solid #9b72df
}

.hkm-home-refresh .hkm-product-deal-rail .hkm-product-card:nth-child(5n) {
    border-top: 4px solid #f3ae26
}

.hkm-home-refresh .hkm-product-deal-rail .hkm-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 28px rgba(8, 35, 63, .16)
}

.hkm-home-refresh .hkm-product-deal-rail .hkm-product-img {
    height: 126px !important;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, #f6fbfa)
}

.hkm-home-refresh .hkm-product-deal-rail .hkm-product-card h3 {
    min-height: 32px;
    color: var(--hr-ink);
    font-size: 13px
}

.hkm-home-refresh .hkm-product-deal-rail .hkm-card-actions .hkm-btn {
    min-height: 32px;
    border-radius: 11px;
    background: var(--hr-green);
    color: #fff
}

.hkm-home-refresh .hkm-price {
    color: #d84438;
    font-weight: 950
}

.hkm-home-refresh .hkm-product-badge,
.hkm-home-refresh .hkm-discount-badge {
    box-shadow: 0 4px 12px rgba(8, 35, 63, .12)
}

/* Video rail: one dark cinematic band to break the pastel rhythm. */
.hkm-home-refresh .hkm-vs-video_rail {
    background: linear-gradient(120deg, #08233f 0%, #075a50 72%, #0a816b 100%) !important;
    border: 0
}

.hkm-home-refresh .hkm-vs-video_rail:before {
    background: rgba(255, 216, 63, .12)
}

.hkm-home-refresh .hkm-vs-video_rail .hkm-vs-heading h2,
.hkm-home-refresh .hkm-vs-video_rail .hkm-vs-heading p {
    color: #fff !important
}

.hkm-home-refresh .hkm-vs-video_rail .hkm-kicker {
    background: var(--hr-yellow);
    color: #503900 !important
}

.hkm-home-refresh .hkm-video-card {
    border-color: rgba(255, 255, 255, .14);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
    transition: transform .22s ease
}

.hkm-home-refresh .hkm-video-card:hover {
    transform: translateY(-5px)
}

.hkm-home-refresh .hkm-video-card video {
    object-fit: cover;
    background: #071a2d
}

/* Categories and lifestyle rows. */
.hkm-home-refresh .hkm-vs-category_grid {
    background: linear-gradient(125deg, #c9f5e4, #e8fbf5 48%, #d8efff) !important
}

.hkm-home-refresh .hkm-category-card {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 9px;
    min-height: 138px;
    padding: 12px 8px;
    border: 1px solid rgba(8, 35, 63, .06);
    border-radius: 18px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 7px 16px rgba(8, 35, 63, .07);
    text-align: center;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease
}

.hkm-home-refresh .hkm-category-card:hover {
    transform: translateY(-4px);
    background: #fff
}

.hkm-home-refresh .hkm-category-card-media {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 20px;
    background: linear-gradient(145deg, #fff8c9, #eafff6);
    overflow: hidden;
    color: var(--hr-green);
    box-shadow: inset 0 0 0 1px rgba(8, 35, 63, .05)
}

.hkm-home-refresh .hkm-category-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .24s ease
}

.hkm-home-refresh .hkm-category-card-media svg {
    width: 44px;
    height: 44px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round
}

.hkm-home-refresh .hkm-category-card-media>span {
    font-size: 36px
}

.hkm-home-refresh .hkm-category-card:hover .hkm-category-card-media img {
    transform: scale(1.08) rotate(-1deg)
}

.hkm-home-refresh .hkm-category-card strong {
    font-size: 14px;
    line-height: 1.2;
    color: var(--hr-ink)
}

.hkm-home-refresh .hkm-vs-service_cards {
    background: linear-gradient(125deg, #c8f4e4 0%, #e8fff7 48%, #d8efff 100%) !important
}

.hkm-home-refresh .hkm-vs-blog_slider {
    background: linear-gradient(125deg, #ffe0d9 0%, #fff0ea 48%, #eadfff 100%) !important
}

.hkm-home-refresh .hkm-lifestyle-rail {
    gap: 13px;
    padding: 5px 3px 12px
}

.hkm-home-refresh .hkm-lifestyle-rail .hkm-vs-card {
    isolation: isolate;
    min-height: 310px;
    padding: 0 0 16px !important;
    border: 1px solid rgba(8, 35, 63, .08);
    border-radius: 21px;
    background: var(--hkm-card-bg, #fff4dc);
    color: var(--hkm-card-text, var(--hr-ink));
    box-shadow: 0 10px 24px rgba(8, 35, 63, .10);
    overflow: hidden;
    text-decoration: none;
    align-content: stretch;
    grid-template-rows: auto 1fr auto
}

.hkm-home-refresh .hkm-lifestyle-rail .hkm-vs-card:before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 130px;
    height: 130px;
    right: -48px;
    top: -54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .38)
}

.hkm-home-refresh .hkm-lifestyle-rail .hkm-vs-card:nth-child(2):before {
    left: -56px;
    right: auto;
    top: auto;
    bottom: -62px
}

.hkm-home-refresh .hkm-lifestyle-icon {
    display: grid;
    place-items: center;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    border-radius: 0;
    background: linear-gradient(135deg, #ffe06b, #fff4b7);
    box-shadow: none;
    font-size: 54px
}

.hkm-home-refresh .hkm-lifestyle-rail .hkm-vs-card>div {
    position: relative;
    z-index: 1
}

.hkm-home-refresh .hkm-lifestyle-rail .hkm-vs-card h3 {
    color: inherit;
    font-size: 20px;
    letter-spacing: -.015em
}

.hkm-home-refresh .hkm-lifestyle-rail .hkm-vs-card p:not(.hkm-kicker) {
    color: inherit;
    opacity: .82;
    font-size: 14px;
    line-height: 1.42
}

.hkm-home-refresh .hkm-lifestyle-rail .hkm-vs-card .hkm-btn {
    justify-self: start;
    width: auto;
    min-width: 132px;
    min-height: 36px;
    padding: 7px 15px;
    border-radius: 12px;
    background: var(--hr-green);
    color: #fff;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--hr-green) 20%, transparent)
}

.hkm-home-refresh .hkm-lifestyle-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    margin: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    overflow: hidden
}

.hkm-home-refresh .hkm-lifestyle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .32s ease
}

.hkm-home-refresh .hkm-lifestyle-card-link:hover .hkm-lifestyle-image img {
    transform: scale(1.045)
}

.hkm-home-refresh .hkm-lifestyle-card-copy {
    display: grid;
    align-content: start;
    padding: 5px 16px 0 !important
}

.hkm-home-refresh .hkm-lifestyle-rail .hkm-vs-card>.hkm-btn {
    margin: 0 16px;
    justify-self: start
}

.hkm-home-refresh .hkm-holiday-hotel-card {
    border: 2px solid #ff9f1c;
    box-shadow: 0 14px 32px rgba(255, 117, 24, .20)
}

.hkm-home-refresh .hkm-holiday-hotel-card .hkm-lifestyle-image {
    position: relative
}

.hkm-home-refresh .hkm-holiday-hotel-badge {
    position: absolute;
    z-index: 3;
    top: 12px;
    left: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #ff7043;
    color: #fff;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .045em;
    box-shadow: 0 7px 18px rgba(118, 41, 12, .25)
}

.hkm-home-refresh .hkm-holiday-hotel-card>.hkm-btn {
    background: #ff7043
}

/* Monthly banners stay image-led and compact. */
.hkm-home-refresh .hkm-vs-campaign_banner {
    padding: 8px;
    background: linear-gradient(125deg, #ffe96f, #ffc844) !important
}

.hkm-home-refresh .hkm-vs-campaign_banner .hkm-banner-frame {
    height: clamp(150px, 17vw, 245px);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(8, 35, 63, .10)
}

/* Boss, brands and branches are compact but visually distinct. */
.hkm-home-refresh .hkm-vs-boss_arena {
    background: linear-gradient(125deg, #fff0a8 0%, #fff8d7 48%, #c9f4e5 100%) !important
}

.hkm-home-refresh .hkm-boss-empty-cta {
    padding: 14px 16px;
    border: 1px solid rgba(8, 35, 63, .07);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 8px 18px rgba(8, 35, 63, .07)
}

.hkm-home-refresh .hkm-boss-empty-cta>span {
    background: var(--hr-yellow);
    box-shadow: 0 6px 14px rgba(8, 35, 63, .08)
}

.hkm-home-refresh .hkm-home-boss-surface {
    gap: 11px
}

.hkm-home-refresh .hkm-boss-mini-card {
    border: 0;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 9px 22px rgba(8, 35, 63, .10)
}

.hkm-home-refresh .hkm-vs-trusted_brands {
    background: linear-gradient(125deg, #d8efff 0%, #f0f8ff 48%, #e9dfff 100%) !important
}

.hkm-home-refresh .hkm-brand-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(135px, 180px);
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 11px;
    scroll-snap-type: x proximity
}

.hkm-home-refresh .hkm-brand-card {
    scroll-snap-align: start;
    min-height: 92px;
    border: 1px solid rgba(8, 35, 63, .07);
    border-radius: 18px;
    background: var(--hkm-card-bg, #fff);
    box-shadow: 0 8px 18px rgba(8, 35, 63, .08)
}

.hkm-home-refresh .hkm-vs-branches {
    background: linear-gradient(125deg, #e8dfff 0%, #f5f0ff 48%, #d9f2ff 100%) !important
}

.hkm-home-refresh .hkm-branch-rail {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    align-items: start !important;
    min-height: 0 !important;
    gap: 11px
}

.hkm-home-refresh .hkm-branch-rail>.hkm-cms-mini-card {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    align-self: start !important;
    align-content: start;
    padding: 9px;
    gap: 7px;
    border: 0;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 9px 22px rgba(8, 35, 63, .10)
}

.hkm-home-refresh .hkm-branch-rail .hkm-cms-card-media {
    height: 150px !important;
    min-height: 0 !important;
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: 12px
}

.hkm-home-refresh .hkm-branch-rail .hkm-cms-mini-card h3 {
    color: var(--hr-ink);
    font-size: 16px
}

.hkm-home-refresh .hkm-branch-rail .hkm-cms-mini-card p {
    color: #496176;
    font-size: 12px
}

.hkm-home-refresh .hkm-vs-club_cta,
.hkm-home-refresh .hkm-vs-contact_cta {
    background: linear-gradient(125deg, #08233f 0%, #006b5b 70%, #0c957d 100%) !important;
    color: #fff
}

.hkm-home-refresh .hkm-vs-club_cta .hkm-vs-heading h2,
.hkm-home-refresh .hkm-vs-contact_cta .hkm-vs-heading h2,
.hkm-home-refresh .hkm-vs-club_cta .hkm-vs-heading p,
.hkm-home-refresh .hkm-vs-contact_cta .hkm-vs-heading p {
    color: #fff !important
}

.hkm-home-refresh .hkm-vs-club_cta .hkm-kicker,
.hkm-home-refresh .hkm-vs-contact_cta .hkm-kicker {
    background: var(--hr-yellow);
    color: #503900 !important
}

.hkm-home-refresh .hkm-footer {
    margin-top: 14px;
    background: linear-gradient(125deg, #082f2a, #006b5b 58%, #088773);
    box-shadow: 0 -8px 24px rgba(8, 35, 63, .08)
}

@media(min-width:901px) {
    .hkm-home-refresh .hkm-product-deal-rail {
        grid-auto-columns: calc((100% - 44px)/5) !important
    }

    .hkm-home-refresh .hkm-branch-rail {
        grid-auto-columns: calc((100% - 33px)/4) !important
    }

    .hkm-home-refresh .hkm-branch-rail:has(>.hkm-cms-mini-card:only-child) {
        grid-auto-columns: minmax(300px, 390px) !important;
        justify-content: start;
        overflow: visible
    }

    .hkm-home-refresh .hkm-lifestyle-count-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(max-width:900px) {
    .hkm-home-refresh .hkm-vs {
        padding: 15px;
        border-radius: 19px
    }

    .hkm-home-refresh .hkm-vs-heading h2 {
        font-size: 26px
    }

    .hkm-home-refresh .hkm-product-deal-rail {
        grid-auto-columns: minmax(190px, 42%) !important
    }

    .hkm-home-refresh .hkm-lifestyle-rail.hkm-lifestyle-count-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .hkm-home-refresh .hkm-lifestyle-rail .hkm-vs-card {
        min-height: 194px
    }
}

@media(max-width:640px) {
    .hkm-home-refresh .hkm-header-main {
        padding: 8px 12px
    }

    .hkm-home-refresh .hkm-main {
        padding: 8px
    }

    .hkm-home-refresh .hkm-vs {
        margin-top: 10px;
        padding: 12px;
        border-radius: 16px;
        box-shadow: 0 8px 22px rgba(8, 35, 63, .08)
    }

    .hkm-home-refresh .hkm-vs-heading {
        align-items: flex-start;
        margin-bottom: 9px
    }

    .hkm-home-refresh .hkm-vs-heading h2 {
        font-size: 21px
    }

    .hkm-home-refresh .hkm-vs-heading p:not(.hkm-kicker) {
        font-size: 12px
    }

    .hkm-home-refresh .hkm-vs-heading>a {
        padding: 5px 8px;
        font-size: 12px
    }

    .hkm-home-refresh .hkm-vs-hero {
        padding: 0
    }

    .hkm-home-refresh .hkm-product-deal-rail {
        grid-auto-columns: calc((100% - 16px)/2.4) !important;
        gap: 8px
    }

    .hkm-home-refresh .hkm-product-deal-rail .hkm-product-img {
        height: auto !important;
        aspect-ratio: 1/1 !important
    }

    .hkm-home-refresh .hkm-lifestyle-rail.hkm-lifestyle-count-1,
    .hkm-home-refresh .hkm-lifestyle-rail.hkm-lifestyle-count-2,
    .hkm-home-refresh .hkm-lifestyle-rail.hkm-lifestyle-count-3 {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 82%;
        grid-template-columns: none;
        gap: 9px;
        overflow-x: auto;
        scroll-snap-type: x mandatory
    }

    .hkm-home-refresh .hkm-lifestyle-rail .hkm-vs-card {
        min-height: 176px;
        padding: 13px;
        scroll-snap-align: start
    }

    .hkm-home-refresh .hkm-lifestyle-rail .hkm-vs-card h3 {
        font-size: 18px
    }

    .hkm-home-refresh .hkm-holiday-hotel-badge {
        top: 9px;
        left: 9px;
        padding: 6px 8px;
        font-size: 10px
    }

    .hkm-home-refresh .hkm-vs-campaign_banner .hkm-banner-frame {
        height: auto;
        aspect-ratio: 4/2.65
    }

    .hkm-home-refresh .hkm-boss-empty-cta {
        grid-template-columns: auto 1fr;
        padding: 11px
    }

    .hkm-home-refresh .hkm-boss-empty-cta .hkm-btn {
        grid-column: 1/-1;
        width: 100%
    }

    .hkm-home-refresh .hkm-brand-rail {
        grid-auto-columns: 40%
    }

    .hkm-home-refresh .hkm-branch-rail {
        grid-auto-columns: minmax(270px, 84%) !important
    }
}

@media(prefers-reduced-motion:reduce) {

    .hkm-home-refresh .hkm-hero-promo-holiday,
    .hkm-home-refresh .hkm-hero-promo-holiday:before {
        animation: none
    }

    .hkm-home-refresh .hkm-product-card,
    .hkm-home-refresh .hkm-video-card,
    .hkm-home-refresh .hkm-hero-promo,
    .hkm-home-refresh .hkm-category-card {
        transition: none
    }

    .hkm-home-refresh .hkm-product-card:hover,
    .hkm-home-refresh .hkm-video-card:hover,
    .hkm-home-refresh .hkm-hero-promo:hover,
    .hkm-home-refresh .hkm-category-card:hover {
        transform: none
    }
}

/* Seasonal themes: keep the layout, consume colors chosen in Theme. */
.hkm-home-refresh.hkm-theme-custom{--hr-ink:var(--hkm-ink);--hr-green:var(--hkm-green);--hr-yellow:var(--hkm-yellow);--hr-coral:var(--hkm-accent);color:var(--hkm-ink);background:var(--hkm-theme-bg-image,none) center top/cover fixed,linear-gradient(160deg,var(--hkm-page-bg),#fff 70%)}
.hkm-home-refresh.hkm-theme-custom .hkm-vs-club_cta,.hkm-home-refresh.hkm-theme-custom .hkm-vs-contact_cta,.hkm-home-refresh.hkm-theme-custom .hkm-footer{background:linear-gradient(125deg,var(--hkm-ink),var(--hkm-green))!important}