/*
 * Home Builder V2 — storefront renderer styles.
 * Everything is scoped under .hbv2 so nothing leaks into the rest of the store.
 * Logical properties throughout: RTL works from the dir attribute alone.
 * Breakpoints match the storefront: tablet <= 991.98px, mobile <= 767.98px.
 */

.hbv2 {
    --hbv2-accent: var(--mainC, #0e7c6b);
    --hbv2-accent-ink: #ffffff;
    --hbv2-ink: #15191c;
    --hbv2-ink-2: #3b434b;
    --hbv2-muted: #6f7881;
    --hbv2-line: rgba(21, 25, 28, 0.1);
    --hbv2-surface: #ffffff;
    --hbv2-surface-2: #f6f6f3;
    --hbv2-sale: #e5476b;
    --hbv2-star: #f4b400;
    --hbv2-radius: 14px;
    --hbv2-radius-sm: 10px;
    --hbv2-shadow: 0 10px 30px -18px rgba(40, 28, 16, 0.45);
    --hbv2-shadow-sm: 0 2px 8px -4px rgba(40, 28, 16, 0.25);
    --hbv2-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --hbv2-container: 1300px;
    --hbv2-gutter: 15px;
    color: var(--hbv2-ink);
    overflow-x: clip;
}

.hbv2 *,
.hbv2 *::before,
.hbv2 *::after {
    box-sizing: border-box;
}

.hbv2 img {
    max-inline-size: 100%;
    display: block;
}

.hbv2 a {
    color: inherit;
    text-decoration: none;
}

/* ------------------------------------------------------------------ sections / columns */

.hbv2-s {
    position: relative;
    isolation: isolate;
}

.hbv2-s-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
}

.hbv2-s-inner {
    margin-inline: auto;
    inline-size: 100%;
}

.hbv2-w-boxed {
    max-inline-size: calc(var(--hbv2-container) + 2 * var(--hbv2-gutter));
    padding-inline: var(--hbv2-gutter);
}

.hbv2-w-wide {
    max-inline-size: calc(1600px + 2 * var(--hbv2-gutter));
    padding-inline: var(--hbv2-gutter);
}

.hbv2-w-full {
    max-inline-size: none;
}

.hbv2-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hbv2-gap, 24px);
    align-items: stretch;
}

/* Spans are out of 12; the row's (cols - 1) gaps are taken out before sharing the width */
.hbv2-col {
    flex: 0 0 calc((100% - (var(--hbv2-cols, 1) - 1) * var(--hbv2-gap, 24px)) * var(--hbv2-span, 12) / 12);
    max-inline-size: 100%;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
}

@media (max-width: 991.98px) {
    .hbv2-row[data-stack='tablet'] > .hbv2-col {
        flex-basis: 100%;
    }
}

@media (max-width: 767.98px) {
    .hbv2-row[data-stack='mobile'] > .hbv2-col {
        flex-basis: 100%;
    }
}

/* Pictures stay in place: changing language swaps a picture for its translation, never its side.
   --hbv2-place-dir is the direction of the store's default language, so that view looks as designed
   and the others match it. Text and lists inside keep the page direction. Without the variables
   (a payload cached before this rule) everything follows the page. */
.hbv2-row[data-place='fixed'],
.hbv2-ads,
.hbv2-feature,
.hbv2-image,
.hbv2-videoblock {
    direction: var(--hbv2-place-dir);
}

.hbv2-row[data-place='fixed'] > .hbv2-col,
.hbv2-ads > *,
.hbv2-feature > * {
    direction: var(--hbv2-page-dir);
}

.hbv2-b {
    position: relative;
    min-inline-size: 0;
}

.hbv2-b + .hbv2-b {
    margin-block-start: 16px;
}

/* ------------------------------------------------------------------ block heads */

.hbv2-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-block-end: 18px;
}

.hbv2-head[data-align='center'] {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hbv2-title {
    margin: 0;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
}

.hbv2-subtitle {
    margin: 6px 0 0;
    color: var(--hbv2-muted);
    font-size: 15px;
}

.hbv2-viewall {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    /* the block's "View all" color, else the store color */
    color: var(--hbv2-viewall-c, var(--hbv2-accent)) !important;
    white-space: nowrap;
}

.hbv2-viewall svg {
    inline-size: 14px;
    block-size: 14px;
    transition: transform 200ms var(--hbv2-ease);
}

.hbv2-viewall:hover svg {
    transform: translateX(3px);
}

[dir='rtl'] .hbv2-viewall svg {
    transform: scaleX(-1);
}

[dir='rtl'] .hbv2-viewall:hover svg {
    transform: scaleX(-1) translateX(3px);
}

/* ------------------------------------------------------------------ carousel & grid */

.hbv2-carousel {
    position: relative;
}

.hbv2-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--hbv2-per) - 1) * var(--hbv2-item-gap, 16px)) / var(--hbv2-per));
    gap: var(--hbv2-item-gap, 16px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-block: 4px 8px;
}

.hbv2-track::-webkit-scrollbar {
    display: none;
}

.hbv2-track > * {
    scroll-snap-align: start;
    min-inline-size: 0;
}

.hbv2-grid {
    display: grid;
    grid-template-columns: repeat(var(--hbv2-per), minmax(0, 1fr));
    gap: var(--hbv2-item-gap, 16px);
}

.hbv2-track,
.hbv2-grid,
.hbv2-marquee {
    --hbv2-per: var(--hbv2-per-d, 4);
}

@media (max-width: 991.98px) {
    .hbv2-track,
    .hbv2-grid,
    .hbv2-marquee {
        --hbv2-per: var(--hbv2-per-t, 3);
    }
}

@media (max-width: 767.98px) {
    .hbv2-track,
    .hbv2-grid,
    .hbv2-marquee {
        --hbv2-per: var(--hbv2-per-m, 2);
    }
}

/* Items of a fixed size, not spread over the row (categories with "Spread over the row" off): each
   keeps its size and the space between items is exactly the set space. Per row is the most per row;
   on a narrow screen the items shrink to fit it. */
.hbv2-grid.is-fit {
    grid-template-columns: repeat(var(--hbv2-per), minmax(0, var(--hbv2-fit, 120px)));
    justify-content: var(--hbv2-fit-justify, start);
}

.hbv2-track.is-fit {
    grid-auto-columns: min(var(--hbv2-fit, 120px), calc((100% - (var(--hbv2-per) - 1) * var(--hbv2-item-gap, 16px)) / var(--hbv2-per)));
    justify-content: safe var(--hbv2-fit-justify, start);
}

.hbv2-marquee.is-fit .hbv2-mq-item {
    inline-size: var(--hbv2-fit, 120px);
}

/* ------------------------------------------------------------------ marquee */

/* Rows are always laid out left-to-right so the -50% loop is exact in RTL too; items keep the page direction. */
.hbv2-marquee {
    container-type: inline-size;
    display: grid;
    gap: var(--hbv2-item-gap, 16px);
}

.hbv2-mq-row {
    direction: ltr;
    overflow: hidden;
    padding-block: 4px 8px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

.hbv2-mq-track {
    display: flex;
    inline-size: max-content;
}

.hbv2-mq-row.is-ready .hbv2-mq-track {
    animation: hbv2-mq-left var(--hbv2-mq-duration, 30s) linear infinite;
    will-change: transform;
}

.hbv2-mq-row.is-ready[data-dir='right'] .hbv2-mq-track {
    animation-name: hbv2-mq-right;
}

.hbv2-marquee[data-pause='1'] .hbv2-mq-row:hover .hbv2-mq-track,
.hbv2-marquee[data-pause='1'] .hbv2-mq-row:focus-within .hbv2-mq-track {
    animation-play-state: paused;
}

/* Spacing is a margin on every item (not a flex gap), so both halves of the track are exactly equal. */
.hbv2-mq-item {
    flex: none;
    inline-size: 160px;
    inline-size: calc((100cqw - (var(--hbv2-per) - 1) * var(--hbv2-item-gap, 16px)) / var(--hbv2-per));
    margin-right: var(--hbv2-item-gap, 16px);
}

[dir='rtl'] .hbv2-mq-item {
    direction: rtl;
}

@keyframes hbv2-mq-left {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes hbv2-mq-right {
    from {
        transform: translate3d(-50%, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.hbv2-arrow {
    position: absolute;
    inset-block-start: 50%;
    z-index: 3;
    inline-size: 42px;
    block-size: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--hbv2-line);
    border-radius: 50%;
    background: var(--hbv2-surface);
    color: var(--hbv2-ink);
    box-shadow: var(--hbv2-shadow-sm);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 200ms ease, transform 200ms var(--hbv2-ease), background 200ms ease;
}

.hbv2-arrow:hover {
    background: var(--hbv2-accent);
    color: var(--hbv2-accent-ink);
    border-color: transparent;
}

.hbv2-arrow:focus-visible {
    outline: 2px solid var(--hbv2-accent);
    outline-offset: 2px;
}

.hbv2-arrow[disabled] {
    opacity: 0;
    pointer-events: none;
}

.hbv2-arrow svg {
    inline-size: 16px;
    block-size: 16px;
}

.hbv2-arrow-prev {
    inset-inline-start: -8px;
}

.hbv2-arrow-next {
    inset-inline-end: -8px;
}

[dir='rtl'] .hbv2-arrow svg {
    transform: scaleX(-1);
}

.hbv2-slides .hbv2-arrow-prev {
    inset-inline-start: 16px;
}

.hbv2-slides .hbv2-arrow-next {
    inset-inline-end: 16px;
}

.hbv2-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-block-start: 12px;
}

.hbv2-slides .hbv2-dots {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 14px;
    margin: 0;
    z-index: 3;
}

.hbv2-dot {
    inline-size: 8px;
    block-size: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(21, 25, 28, 0.25);
    cursor: pointer;
    transition: inline-size 250ms var(--hbv2-ease), background 250ms ease;
}

.hbv2-slides .hbv2-dot {
    background: rgba(255, 255, 255, 0.55);
}

.hbv2-dot[aria-current='true'] {
    inline-size: 22px;
    background: var(--hbv2-accent);
}

.hbv2-slides .hbv2-dot[aria-current='true'] {
    background: #ffffff;
}

@media (max-width: 767.98px) {
    .hbv2-arrow {
        display: none;
    }
}

/* ------------------------------------------------------------------ slides (hero / banner) */

.hbv2-slides {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
}

.hbv2-slides .hbv2-track {
    grid-auto-columns: 100%;
    gap: 0;
    padding: 0;
}

.hbv2-slide {
    position: relative;
    display: block;
    overflow: hidden;
}

.hbv2-slide picture,
.hbv2-slide img {
    display: block;
    inline-size: 100%;
}

.hbv2-slide img {
    block-size: var(--hbv2-h-d, auto);
    object-fit: var(--hbv2-fit, cover);
}

@media (max-width: 767.98px) {
    .hbv2-slide img {
        block-size: var(--hbv2-h-m, auto);
    }
}

/* ------------------------------------------------------------------ hero banner */

/*
 * Full-width slides with a glass text card (values taken from the reference hero: card 680px,
 * 46px padding, 14px corners, 18px blur, wipe 1050ms linear, 6s per slide, slow zoom to 1.06).
 * Motion uses transform and opacity only. The active slide sits in the page flow, so a long text
 * makes the hero taller instead of being cut off.
 */
.hbv2-hero {
    --hero-h: var(--hero-h-d, 720px);
    --hero-pad-x: clamp(22px, 5vw, 64px);
    --hero-ui: 0px;
    --hero-edge: 0px;
    --hero-ease: linear;
    --hero-tdur: 820ms;
    --hero-tease: cubic-bezier(0.16, 0.84, 0.34, 1);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-block-size: var(--hero-h);
    background: var(--hero-bg, #171614);
    color: #ffffff;
    outline: none;
}

.hbv2-hero:focus-visible {
    box-shadow: inset 0 0 0 3px var(--hero-accent);
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .hbv2-hero {
        --hero-h: var(--hero-h-t, 640px);
    }
}

@media (max-width: 767.98px) {
    .hbv2-hero {
        --hero-h: var(--hero-h-m, 620px);
    }
}

/* Whole picture: the banner keeps each device's shape (its height at 1920 / 1024 / 390px wide,
   scaled with the banner's own width), so a picture of the recommended size is shown completely,
   never cut or stretched. A picture of another shape is fitted inside, on the background color. */
.hbv2-hero.is-whole {
    --hero-h: calc(100vw * var(--hero-r-d, 0.375));
    container-type: inline-size;
    min-block-size: 0;
}

@supports (width: 1cqw) {
    .hbv2-hero.is-whole {
        --hero-h: calc(100cqw * var(--hero-r-d, 0.375));
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .hbv2-hero.is-whole {
        --hero-h: calc(100vw * var(--hero-r-t, 0.625));
    }

    @supports (width: 1cqw) {
        .hbv2-hero.is-whole {
            --hero-h: calc(100cqw * var(--hero-r-t, 0.625));
        }
    }
}

@media (max-width: 767.98px) {
    .hbv2-hero.is-whole {
        --hero-h: calc(100vw * var(--hero-r-m, 1.59));
    }

    @supports (width: 1cqw) {
        .hbv2-hero.is-whole {
            --hero-h: calc(100cqw * var(--hero-r-m, 1.59));
        }
    }
}

.hbv2-hero.is-whole .hbv2-hero-media img {
    object-fit: contain;
}

/* less empty space around the text, so a card fits inside the picture's shape more often (when it
   still needs more room, the banner grows and the picture sits on the background color) */
.hbv2-hero.is-whole .hbv2-hero-content {
    padding-block: clamp(20px, 3vh, 40px) calc(var(--hero-ui) + var(--hero-edge) + clamp(12px, 2vh, 20px));
}

.hbv2-hero.has-ui {
    --hero-ui: 56px;
}

/* ---- bottom edge ---- */
.hbv2-hero[data-bottom='round'] {
    border-end-start-radius: var(--hero-radius, 40px);
    border-end-end-radius: var(--hero-radius, 40px);
}

/* Arch: the bottom of the hero curves up in the middle; the page shows through below the curve */
.hbv2-hero[data-bottom='arch'] {
    --hero-edge: calc(var(--hero-arch, 90px) * 0.62);
    -webkit-mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--hero-arch, 90px) + 1px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1000V68Q500-68 0 68Z'/%3E%3C/svg%3E") bottom / 100% var(--hero-arch, 90px) no-repeat;
    mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--hero-arch, 90px) + 1px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1000V68Q500-68 0 68Z'/%3E%3C/svg%3E") bottom / 100% var(--hero-arch, 90px) no-repeat;
}

/* ---- slides ---- */
.hbv2-hero-slides {
    position: relative;
    min-block-size: var(--hero-h);
}

.hbv2-hero-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    visibility: hidden;
}

.hbv2-hero-slide.is-active {
    position: relative;
    z-index: 2;
    visibility: visible;
}

.hbv2-hero-slide.is-leaving {
    z-index: 1;
    visibility: visible;
}

.hbv2-hero-pane {
    position: relative;
    display: flex;
    min-block-size: var(--hero-h);
    block-size: 100%;
}

.hbv2-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--hero-bg, #171614);
}

.hbv2-hero-media picture,
.hbv2-hero-media img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.hbv2-hero-media img {
    max-inline-size: none;
    object-fit: cover;
}

/* a slide video plays over the picture with the same fit; the picture steps aside once it plays */
.hbv2-hero-media .hbv2-hero-video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.hbv2-hero.is-whole .hbv2-hero-media .hbv2-hero-video {
    object-fit: contain;
}

.hbv2-hero-media picture {
    transition: opacity 400ms ease;
}

.hbv2-hero-media.is-playing picture {
    opacity: 0;
}

.hbv2-hero.has-kb .hbv2-hero-slide.has-video .hbv2-hero-media img {
    animation: none;
}

/* slow zoom of the picture on screen (kept while it is covered, so it never jumps back) */
.hbv2-hero.has-kb .hbv2-hero-slide.is-active .hbv2-hero-media img,
.hbv2-hero.has-kb .hbv2-hero-slide.is-leaving .hbv2-hero-media img {
    animation: hbv2-kenburns 10s cubic-bezier(0.33, 0, 0.4, 1) both;
}

@keyframes hbv2-kenburns {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.06);
    }
}

/* ---- color layer ---- */
.hbv2-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.hbv2-hero-overlay[data-shape='soft'] {
    background: linear-gradient(180deg, rgba(var(--ov-rgb), calc(var(--ov) * 0.69)) 0%, rgba(var(--ov-rgb), calc(var(--ov) * 0.38)) 34%, rgba(var(--ov-rgb), calc(var(--ov) * 0.58)) 70%, rgba(var(--ov-rgb), var(--ov)) 100%);
}

.hbv2-hero-overlay[data-shape='even'] {
    background: rgba(var(--ov-rgb), var(--ov));
}

.hbv2-hero-overlay[data-shape='bottom'] {
    background: linear-gradient(180deg, rgba(var(--ov-rgb), 0) 25%, rgba(var(--ov-rgb), var(--ov)) 100%);
}

.hbv2-hero-overlay[data-shape='top'] {
    background: linear-gradient(0deg, rgba(var(--ov-rgb), 0) 25%, rgba(var(--ov-rgb), var(--ov)) 100%);
}

.hbv2-hero-overlay[data-shape='start'] {
    background: linear-gradient(90deg, rgba(var(--ov-rgb), var(--ov)) 0%, rgba(var(--ov-rgb), 0) 72%);
}

[dir='rtl'] .hbv2-hero-overlay[data-shape='start'] {
    background: linear-gradient(270deg, rgba(var(--ov-rgb), var(--ov)) 0%, rgba(var(--ov-rgb), 0) 72%);
}

/* ---- content and card ---- */
.hbv2-hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    inline-size: 100%;
    max-inline-size: calc(var(--hbv2-container) + 2 * var(--hero-pad-x));
    min-block-size: var(--hero-h);
    margin-inline: auto;
    padding-inline: var(--hero-pad-x);
    padding-block: clamp(40px, 7vh, 80px) calc(var(--hero-ui) + var(--hero-edge) + clamp(28px, 5vh, 48px));
}

.hbv2-hero-card {
    position: relative;
    max-inline-size: 680px;
    padding: 46px;
    padding: clamp(24px, 3.2vw, 46px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: var(--hero-card-bg, rgba(23, 22, 20, 0.42));
    -webkit-backdrop-filter: blur(var(--hero-card-blur, 18px)) saturate(1.25);
    backdrop-filter: blur(var(--hero-card-blur, 18px)) saturate(1.25);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
    color: #ffffff;
}

/* no blur in this browser: a solid enough card keeps the text readable */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .hbv2-hero-card {
        background: var(--hero-card-solid, rgba(23, 22, 20, 0.82));
    }
}

.hbv2-hero.no-border .hbv2-hero-card {
    border-color: transparent;
}

/* text without the card: the card switched off, or a layout that has none */
.hbv2-hero.no-card .hbv2-hero-card,
.hbv2-hero-slide[data-layout='centered'] .hbv2-hero-card,
.hbv2-hero-slide[data-layout='bottom'] .hbv2-hero-card,
.hbv2-hero-slide[data-layout='split'] .hbv2-hero-card {
    padding: 0;
    border-color: transparent;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

.hbv2-hero-card > :first-child {
    margin-block-start: 0;
}

/* a div, so a store theme's "p { font-family: … !important }" leaves the label's monospace alone */
.hbv2-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--hero-label-c, var(--hero-accent-text, #f8a800));
    font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hbv2-hero-eyebrow::before {
    content: '';
    flex: none;
    inline-size: 26px;
    block-size: 2px;
    background: currentColor;
    transform-origin: left center;
}

[dir='rtl'] .hbv2-hero-eyebrow {
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0;
}

[dir='rtl'] .hbv2-hero-eyebrow::before {
    transform-origin: right center;
}

.hbv2-hero-title {
    margin: 14px 0 0;
    color: var(--hero-title-c, #ffffff);
    font-size: 48px;
    font-size: clamp(32px, 3.6vw, 56px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

[dir='rtl'] .hbv2-hero-title {
    line-height: 1.3;
    letter-spacing: 0;
}

.hbv2-hero-title .is-accent {
    color: var(--hero-hl-c, var(--hero-accent-text, #f8a800));
}

/* each title word in a clip box, so a line can rise into place */
.hbv2-hw {
    display: inline-block;
    vertical-align: top;
    clip-path: inset(-0.3em -0.2em -0.16em -0.2em);
}

.hbv2-hw > span {
    display: inline-block;
}

.hbv2-hero-text {
    margin: 22px 0 0;
    max-inline-size: 56ch;
    color: var(--hero-text-c, #e7e1d6);
    font-size: 20px;
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.55;
}

.hbv2-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-block-start: 30px;
}

.hbv2-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-block-size: 58px;
    max-inline-size: 100%;
    padding: 15px 28px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform 200ms var(--hbv2-ease), background 200ms ease, border-color 200ms ease, color 200ms ease, filter 200ms ease;
}

.hbv2-hero .hbv2-hero-btn[data-style='primary'] {
    border-color: var(--hero-btn-bg, var(--hero-accent));
    background: var(--hero-btn-bg, var(--hero-accent));
    color: var(--hero-btn-ink, var(--hero-accent-ink));
}

.hbv2-hero .hbv2-hero-btn[data-style='ghost'] {
    border-color: var(--hero-btn2-line, rgba(255, 255, 255, 0.32));
    background: transparent;
    color: var(--hero-btn2-c, #ffffff);
}

.hbv2-hero .hbv2-hero-btn[data-style='light'] {
    border-color: #ffffff;
    background: #ffffff;
    color: #252422;
}

.hbv2-hero-btn svg {
    flex: none;
    inline-size: 18px;
    block-size: 18px;
    transition: transform 200ms var(--hbv2-ease);
}

[dir='rtl'] .hbv2-hero-btn svg {
    transform: scaleX(-1);
}

.hbv2-hero-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* a light card: dark text */
.hbv2-hero.is-light .hbv2-hero-slide:not([data-layout='centered']):not([data-layout='bottom']):not([data-layout='split']) .hbv2-hero-card {
    border-color: rgba(20, 24, 32, 0.08);
    color: #15191c;
}

.hbv2-hero.is-light .hbv2-hero-slide:not([data-layout='centered']):not([data-layout='bottom']):not([data-layout='split']) .hbv2-hero-title {
    color: var(--hero-title-c, #15191c);
}

.hbv2-hero.is-light .hbv2-hero-slide:not([data-layout='centered']):not([data-layout='bottom']):not([data-layout='split']) .hbv2-hero-text {
    color: var(--hero-text-c, #3b434b);
}

.hbv2-hero.is-light .hbv2-hero-slide:not([data-layout='centered']):not([data-layout='bottom']):not([data-layout='split']) .hbv2-hero-btn[data-style='ghost'] {
    border-color: var(--hero-btn2-line, rgba(20, 24, 32, 0.28));
    color: var(--hero-btn2-c, #15191c);
}

/* ---- layouts ---- */
.hbv2-hero-slide[data-layout='card-center'] .hbv2-hero-content,
.hbv2-hero-slide[data-layout='centered'] .hbv2-hero-content {
    align-items: center;
    text-align: center;
}

.hbv2-hero-slide[data-layout='card-center'] .hbv2-hero-cta,
.hbv2-hero-slide[data-layout='centered'] .hbv2-hero-cta {
    justify-content: center;
}

.hbv2-hero-slide[data-layout='card-center'] .hbv2-hero-text,
.hbv2-hero-slide[data-layout='centered'] .hbv2-hero-text {
    margin-inline: auto;
}

.hbv2-hero-slide[data-layout='card-end'] .hbv2-hero-content {
    align-items: flex-end;
}

.hbv2-hero-slide[data-layout='centered'] .hbv2-hero-card {
    max-inline-size: 860px;
}

.hbv2-hero-slide[data-layout='bottom'] .hbv2-hero-content {
    justify-content: flex-end;
}

.hbv2-hero-slide[data-layout='bottom'] .hbv2-hero-card {
    max-inline-size: 900px;
}

.hbv2-hero-slide[data-layout='bottom'] .hbv2-hero-title {
    max-inline-size: 16ch;
}

/* split: text on the start side over the dark background, the picture on the end side */
.hbv2-hero-slide[data-layout='split'] .hbv2-hero-media,
.hbv2-hero-slide[data-layout='split'] .hbv2-hero-overlay {
    inset-inline-start: 44%;
}

.hbv2-hero-slide[data-layout='split'] .hbv2-hero-card {
    max-inline-size: min(40%, 560px);
}

.hbv2-hero-slide[data-layout='split'] .hbv2-hero-title {
    font-size: clamp(30px, 3.4vw, 52px);
}

/* ---- controls ---- */
.hbv2-hero-count {
    position: absolute;
    z-index: 5;
    inset-block-start: 26px;
    inset-inline-end: max(var(--hero-pad-x), calc((100% - var(--hbv2-container)) / 2));
    color: rgba(var(--hero-ui-rgb, 255, 255, 255), 0.7);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.hbv2-hero-count b {
    color: rgb(var(--hero-ui-rgb, 255, 255, 255));
    font-size: 20px;
}

.hbv2-hero-ui {
    position: absolute;
    inset-inline: 0;
    inset-block-end: calc(var(--hero-edge) + clamp(12px, 2vh, 20px));
    z-index: 5;
    pointer-events: none;
}

.hbv2-hero-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-inline-size: calc(var(--hbv2-container) + 2 * var(--hero-pad-x));
    margin-inline: auto;
    padding-inline: var(--hero-pad-x);
}

.hbv2-hero-bar > * {
    pointer-events: auto;
}

.hbv2-hero-dots {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hbv2-hero-dot {
    position: relative;
    inline-size: 56px;
    block-size: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.hbv2-hero-dot::before,
.hbv2-hero-dot .fill {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(50% - 1.5px);
    block-size: 3px;
    border-radius: 2px;
}

.hbv2-hero-dot::before {
    background: rgba(var(--hero-ui-rgb, 255, 255, 255), 0.24);
    transition: background 250ms ease;
}

.hbv2-hero-dot .fill {
    background: var(--hero-accent);
    transform: scaleX(0);
    transform-origin: left center;
}

[dir='rtl'] .hbv2-hero-dot .fill {
    transform-origin: right center;
}

/* no autoplay: the current bar is simply full */
.hbv2-hero-dot.is-active .fill {
    transform: scaleX(1);
}

/* autoplay: the current bar fills over the slide time, and pauses with it */
.hbv2-hero.is-auto .hbv2-hero-dot.is-active .fill {
    transform: scaleX(0);
}

.hbv2-hero-dot.is-active.run .fill {
    animation: hbv2-hero-fill var(--hero-dur, 6s) linear forwards;
}

.hbv2-hero.is-paused .hbv2-hero-dot.is-active.run .fill {
    animation-play-state: paused;
}

@keyframes hbv2-hero-fill {
    to {
        transform: scaleX(1);
    }
}

.hbv2-hero-dot:focus-visible,
.hbv2-hero-arrow:focus-visible,
.hbv2-hero-pause:focus-visible {
    outline: 2px solid rgb(var(--hero-ui-rgb, 255, 255, 255));
    outline-offset: 3px;
}

.hbv2-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hbv2-hero-arrow,
.hbv2-hero-pause {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 52px;
    block-size: 52px;
    padding: 0;
    border: 1px solid rgba(var(--hero-ui-rgb, 255, 255, 255), 0.28);
    border-radius: 50%;
    background: rgba(var(--hero-ui-rgb, 255, 255, 255), 0.06);
    color: rgb(var(--hero-ui-rgb, 255, 255, 255));
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease, transform 200ms ease, color 200ms ease;
}

.hbv2-hero-pause {
    inline-size: 40px;
    block-size: 40px;
}

.hbv2-hero-pause::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
}

.hbv2-hero-arrow svg {
    inline-size: 20px;
    block-size: 20px;
}

/* pause and play icons share one cell: only one of them has a visible path */
.hbv2-hero-pause svg {
    grid-area: 1 / 1;
    inline-size: 16px;
    block-size: 16px;
}

.hbv2-hero-pause .is-play,
.hbv2-hero-pause[aria-pressed='true'] .is-pause {
    display: none;
}

.hbv2-hero-pause[aria-pressed='true'] .is-play {
    display: inline;
}

/* the previous arrow points back; both turn around in right-to-left */
.hbv2-hero-arrow[data-step='-1'] svg,
[dir='rtl'] .hbv2-hero-arrow[data-step='1'] svg {
    transform: scaleX(-1);
}

[dir='rtl'] .hbv2-hero-arrow[data-step='-1'] svg {
    transform: none;
}

@media (hover: hover) and (pointer: fine) {
    .hbv2-hero-dot:hover::before {
        background: rgba(var(--hero-ui-rgb, 255, 255, 255), 0.4);
    }

    .hbv2-hero-arrow:hover,
    .hbv2-hero-pause:hover {
        border-color: var(--hero-accent);
        background: var(--hero-accent);
        color: var(--hero-accent-ink);
        transform: translateY(-2px);
    }

    .hbv2-hero-btn:hover {
        transform: translateY(-2px);
    }

    .hbv2-hero .hbv2-hero-btn[data-style='primary']:hover {
        filter: brightness(1.08);
    }

    .hbv2-hero .hbv2-hero-btn[data-style='ghost']:hover {
        border-color: var(--hero-btn2-c, #ffffff);
    }

    .hbv2-hero-btn:hover svg {
        transform: translateX(3px);
    }

    [dir='rtl'] .hbv2-hero-btn:hover svg {
        transform: scaleX(-1) translateX(3px);
    }
}

/* ---- transitions (the engine in hbv2-render.js sets data-from, .is-active and .is-leaving) ---- */
.hbv2-hero[data-transition='fade'] {
    --hero-ease: ease;
}

.hbv2-hero[data-transition='slide'] {
    --hero-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

.hbv2-hero[data-transition='zoom'] {
    --hero-ease: cubic-bezier(0.22, 0.8, 0.3, 1);
}

.hbv2-hero.is-ready .hbv2-hero-slide.is-active,
.hbv2-hero.is-ready .hbv2-hero-slide.is-leaving,
.hbv2-hero.is-ready .hbv2-hero-slide.is-active > .hbv2-hero-pane,
.hbv2-hero.is-ready .hbv2-hero-slide.is-leaving > .hbv2-hero-pane {
    transition: transform var(--hero-speed, 1050ms) var(--hero-ease), opacity var(--hero-speed, 1050ms) var(--hero-ease);
}

/* wipe: the new slide's window opens from the side over the old one, its picture stays in place */
.hbv2-hero[data-transition='wipe'][data-from='right'] .hbv2-hero-slide:not(.is-active):not(.is-leaving) {
    transform: translateX(100%);
}

.hbv2-hero[data-transition='wipe'][data-from='right'] .hbv2-hero-slide:not(.is-active):not(.is-leaving) > .hbv2-hero-pane {
    transform: translateX(-100%);
}

.hbv2-hero[data-transition='wipe'][data-from='left'] .hbv2-hero-slide:not(.is-active):not(.is-leaving) {
    transform: translateX(-100%);
}

.hbv2-hero[data-transition='wipe'][data-from='left'] .hbv2-hero-slide:not(.is-active):not(.is-leaving) > .hbv2-hero-pane {
    transform: translateX(100%);
}

/* slide: the new slide pushes the old one out */
.hbv2-hero[data-transition='slide'][data-from='right'] .hbv2-hero-slide:not(.is-active):not(.is-leaving) {
    transform: translateX(100%);
}

.hbv2-hero[data-transition='slide'][data-from='right'] .hbv2-hero-slide.is-leaving {
    transform: translateX(-100%);
}

.hbv2-hero[data-transition='slide'][data-from='left'] .hbv2-hero-slide:not(.is-active):not(.is-leaving) {
    transform: translateX(-100%);
}

.hbv2-hero[data-transition='slide'][data-from='left'] .hbv2-hero-slide.is-leaving {
    transform: translateX(100%);
}

/* fade: the new slide fades in over the old one */
.hbv2-hero[data-transition='fade'] .hbv2-hero-slide:not(.is-active):not(.is-leaving) {
    opacity: 0;
}

/* zoom: the new slide settles from a slight zoom while it fades in */
.hbv2-hero[data-transition='zoom'] .hbv2-hero-slide:not(.is-active):not(.is-leaving) {
    opacity: 0;
    transform: scale(1.14);
}

.hbv2-hero[data-transition='zoom'] .hbv2-hero-slide.is-leaving {
    transform: scale(0.96);
}

/* ---- text entrance: label line draws, title rises line by line, then the text and buttons ---- */
.hbv2-hero.has-motion .hbv2-hero-card > * {
    opacity: 0;
}

.hbv2-hero.has-motion .hbv2-hero-card.is-in > * {
    opacity: 1;
}

.hbv2-hero.has-motion .hbv2-hero-card.is-in .hbv2-hero-eyebrow {
    animation: hbv2-hero-soft var(--hero-tdur) var(--hero-tease) both;
}

.hbv2-hero.has-motion .hbv2-hero-card.is-in .hbv2-hero-eyebrow::before {
    animation: hbv2-hero-draw var(--hero-tdur) var(--hero-tease) both;
}

.hbv2-hero.has-motion .hbv2-hero-card.is-in .hbv2-hw > span {
    animation: hbv2-hero-line var(--hero-tdur) var(--hero-tease) calc(var(--w1, 0ms) + var(--l, 0) * 120ms) both;
}

.hbv2-hero.has-motion .hbv2-hero-card.is-in .hbv2-hero-text {
    animation: hbv2-hero-soft var(--hero-tdur) var(--hero-tease) var(--w2, 300ms) both;
}

.hbv2-hero.has-motion .hbv2-hero-card.is-in .hbv2-hero-cta {
    animation: hbv2-hero-up var(--hero-tdur) var(--hero-tease) var(--w3, 440ms) both;
}

.hbv2-hero.has-motion .hbv2-hero-card.is-out > * {
    animation: hbv2-hero-out 300ms cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@keyframes hbv2-hero-line {
    from {
        transform: translateY(118%);
    }
}

@keyframes hbv2-hero-soft {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

@keyframes hbv2-hero-up {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
}

@keyframes hbv2-hero-draw {
    from {
        transform: scaleX(0);
    }
}

@keyframes hbv2-hero-out {
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

/* ---- tablets and phones ---- */
@media (max-width: 940px) {
    .hbv2-hero-slide[data-layout='split'] .hbv2-hero-media,
    .hbv2-hero-slide[data-layout='split'] .hbv2-hero-overlay {
        inset: 0 0 auto 0;
        block-size: 56vw;
    }

    .hbv2-hero-slide[data-layout='split'] .hbv2-hero-content {
        justify-content: flex-end;
        padding-block-start: calc(56vw + 28px);
    }

    .hbv2-hero-slide[data-layout='split'] .hbv2-hero-card {
        max-inline-size: none;
    }
}

@media (max-width: 620px) {
    .hbv2-hero-card {
        padding: 22px;
    }

    .hbv2-hero-content {
        padding-inline: 22px;
    }

    .hbv2-hero-title {
        font-size: 32px;
    }

    .hbv2-hero-text {
        font-size: 18px;
    }

    .hbv2-hero-dot {
        inline-size: 38px;
    }

    .hbv2-hero-arrow,
    .hbv2-hero-count {
        display: none;
    }
}

@media (pointer: coarse) {
    .hbv2-hero-dot {
        block-size: 44px;
    }
}

/* ---- reduced motion: no zoom, no sliding, no text motion; slides change with a short fade ---- */
@media (prefers-reduced-motion: reduce) {
    .hbv2 .hbv2-hero .hbv2-hero-slide,
    .hbv2 .hbv2-hero .hbv2-hero-pane {
        transform: none !important;
    }

    .hbv2 .hbv2-hero .hbv2-hero-slide:not(.is-active):not(.is-leaving) {
        opacity: 0;
    }

    .hbv2 .hbv2-hero.is-ready .hbv2-hero-slide.is-active {
        transition: opacity 250ms ease !important;
    }

    .hbv2 .hbv2-hero .hbv2-hero-media img,
    .hbv2 .hbv2-hero .hbv2-hero-card > *,
    .hbv2 .hbv2-hero .hbv2-hero-card .hbv2-hw > span,
    .hbv2 .hbv2-hero .hbv2-hero-eyebrow::before {
        opacity: 1 !important;
        animation: none !important;
    }
}

/* ------------------------------------------------------------------ heading / text / button */

.hbv2-heading {
    margin: 0;
    line-height: 1.2;
    font-size: var(--hbv2-size-d, 32px);
    font-weight: var(--hbv2-weight, 700);
}

/* tablets: their own size when set (no value = the desktop size) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hbv2-heading {
        font-size: var(--hbv2-size-t, var(--hbv2-size-d, 32px));
    }
}

@media (max-width: 767.98px) {
    .hbv2-heading {
        font-size: var(--hbv2-size-m, 24px);
    }
}

.hbv2-heading-sub {
    margin: 8px 0 0;
    color: var(--hbv2-muted);
    font-size: 16px;
    white-space: pre-line;
}

.hbv2-text {
    font-size: var(--hbv2-size, 16px);
    line-height: 1.7;
}

.hbv2-text > :first-child {
    margin-block-start: 0;
}

.hbv2-text > :last-child {
    margin-block-end: 0;
}

.hbv2-text a {
    color: var(--hbv2-accent);
    text-decoration: underline;
}

.hbv2-align-start {
    text-align: start;
}

.hbv2-align-center {
    text-align: center;
}

.hbv2-align-end {
    text-align: end;
}

.hbv2-align-justify {
    text-align: justify;
}

.hbv2-btn-wrap {
    display: flex;
}

.hbv2-btn-wrap[data-align='center'] {
    justify-content: center;
}

.hbv2-btn-wrap[data-align='end'] {
    justify-content: flex-end;
}

.hbv2-btn {
    --hbv2-btn-bg: var(--hbv2-accent);
    --hbv2-btn-ink: var(--hbv2-accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-block-size: 44px;
    padding: 10px 22px;
    border: 1.5px solid var(--hbv2-btn-bg);
    border-radius: var(--hbv2-btn-radius, 8px);
    background: var(--hbv2-btn-bg);
    color: var(--hbv2-btn-ink) !important;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 150ms var(--hbv2-ease);
}

.hbv2-btn:hover {
    background: var(--hbv2-btn-hover, var(--hbv2-btn-bg));
    border-color: var(--hbv2-btn-hover, var(--hbv2-btn-bg));
    color: var(--hbv2-btn-hover-ink, var(--hbv2-btn-ink)) !important;
    filter: brightness(1.05);
}

.hbv2-btn:active {
    transform: scale(0.98);
}

.hbv2-btn:focus-visible {
    outline: 2px solid var(--hbv2-btn-bg);
    outline-offset: 3px;
}

.hbv2-btn[data-variant='outline'] {
    background: transparent;
    color: var(--hbv2-btn-bg) !important;
}

.hbv2-btn[data-variant='outline']:hover {
    background: var(--hbv2-btn-bg);
    color: var(--hbv2-btn-ink) !important;
}

.hbv2-btn[data-variant='link'] {
    background: transparent;
    border-color: transparent;
    color: var(--hbv2-btn-bg) !important;
    padding-inline: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.hbv2-btn[data-size='sm'] {
    min-block-size: 36px;
    padding: 7px 16px;
    font-size: 14px;
}

.hbv2-btn[data-size='lg'] {
    min-block-size: 54px;
    padding: 14px 30px;
    font-size: 17px;
}

.hbv2-btn-wrap[data-align='stretch'] .hbv2-btn {
    inline-size: 100%;
}

/* ------------------------------------------------------------------ image / ads */

.hbv2-image {
    display: flex;
}

.hbv2-image[data-align='center'] {
    justify-content: center;
}

.hbv2-image[data-align='end'] {
    justify-content: flex-end;
}

.hbv2-image-frame {
    display: block;
    inline-size: 100%;
    max-inline-size: var(--hbv2-max-w, 100%);
    overflow: hidden;
    border-radius: inherit;
}

.hbv2-image-frame img {
    inline-size: 100%;
    block-size: var(--hbv2-h-d, auto);
    object-fit: var(--hbv2-fit, cover);
}

@media (max-width: 767.98px) {
    .hbv2-image-frame img {
        block-size: var(--hbv2-h-m, auto);
    }
}

.hbv2-ads {
    display: grid;
    grid-template-columns: var(--hbv2-ads-cols, 1fr);
    gap: var(--hbv2-ads-gap, 16px);
}

.hbv2-ad {
    display: block;
    overflow: hidden;
    border-radius: var(--hbv2-ads-radius, 12px);
    background: var(--hbv2-surface-2);
}

.hbv2-ad img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 500ms var(--hbv2-ease);
}

.hbv2-ad:hover img {
    transform: scale(1.03);
}

/* an ad with a video: it plays over the image (same box), or alone at its own shape */
.hbv2-ad.has-video {
    position: relative;
}

.hbv2-ad .hbv2-video {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.hbv2-ad.is-video-only .hbv2-video {
    position: static;
    block-size: auto;
    min-block-size: 100%;
}

/* ------------------------------------------------------------------ video block */

.hbv2-videoblock {
    display: flex;
}

.hbv2-videoblock[data-align='center'] {
    justify-content: center;
}

.hbv2-videoblock[data-align='end'] {
    justify-content: flex-end;
}

.hbv2-video-frame {
    position: relative;
    display: block;
    inline-size: 100%;
    max-inline-size: var(--hbv2-max-w, 100%);
    overflow: hidden;
    border-radius: var(--hbv2-vid-radius, 12px);
    background: #000000;
}

.hbv2-video-frame .hbv2-video {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

/* a fixed shape: the video fills it (cut at the sides) or fits inside it */
.hbv2-video-frame.has-ratio {
    aspect-ratio: var(--hbv2-vid-ratio, 16 / 9);
}

.hbv2-video-frame.has-ratio .hbv2-video {
    block-size: 100%;
    object-fit: var(--hbv2-vid-fit, cover);
}

@media (max-width: 767.98px) {
    .hbv2-ads[data-stack='true'] {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ product card */

.hbv2-card {
    position: relative;
    display: flex;
    flex-direction: column;
    block-size: 100%;
    background: var(--hbv2-surface);
    border: 1px solid var(--hbv2-line);
    border-radius: var(--hbv2-radius);
    overflow: hidden;
    color: var(--hbv2-ink);
    transition: box-shadow 250ms ease, transform 250ms var(--hbv2-ease), border-color 250ms ease;
}

.hbv2-card:hover {
    box-shadow: var(--hbv2-shadow);
    border-color: transparent;
    transform: translateY(-2px);
}

.hbv2-card-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    overflow: hidden;
}

.hbv2-card-media img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: var(--hbv2-card-fit, contain);
    padding: var(--hbv2-card-pad, 10px);
    transition: opacity 350ms ease, transform 500ms var(--hbv2-ease);
}

.hbv2-card-media img.is-alt {
    opacity: 0;
}

.hbv2-card:hover .hbv2-card-media img.is-alt {
    opacity: 1;
}

.hbv2-card:hover .hbv2-card-media.has-alt img:not(.is-alt) {
    opacity: 0;
}

.hbv2-card:hover .hbv2-card-media:not(.has-alt) img {
    transform: scale(1.04);
}

.hbv2-badge {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    z-index: 2;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--hbv2-sale);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

/* Block badge, discount and free-shipping labels stacked at the top start of the image */
.hbv2-card-flags {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
}

.hbv2-card-flags .hbv2-badge {
    position: static;
}

.hbv2-flag {
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--hbv2-flag-bg, #e11d48);
    color: var(--hbv2-flag-ink, #ffffff);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hbv2-flag.is-shipping {
    background: #15803d;
    color: #ffffff;
    letter-spacing: 0;
    text-transform: none;
}

.hbv2-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.hbv2-swatch {
    inline-size: 16px;
    block-size: 16px;
    border-radius: 50%;
    background: var(--hbv2-swatch);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.hbv2-swatch-more {
    color: var(--hbv2-muted);
    font-size: 11px;
}

.hbv2-stock {
    color: #15803d;
    font-size: 12px;
    font-weight: 600;
}

.hbv2-stock.is-out {
    color: var(--hbv2-sale);
}

.hbv2-card-wish {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
    z-index: 2;
    inline-size: 36px;
    block-size: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--hbv2-ink);
    box-shadow: var(--hbv2-shadow-sm);
    cursor: pointer;
    transition: color 200ms ease, transform 200ms var(--hbv2-ease);
}

.hbv2-card-wish:hover {
    color: var(--hbv2-sale);
    transform: scale(1.06);
}

.hbv2-card-wish svg {
    inline-size: 18px;
    block-size: 18px;
}

.hbv2-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 4px;
    flex: 1 1 auto;
}

.hbv2-card-brand {
    color: var(--hbv2-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hbv2-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-block-size: 2.7em;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.hbv2-card-name:hover {
    color: var(--hbv2-accent);
}

.hbv2-stars {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--hbv2-muted);
}

.hbv2-stars-bar {
    position: relative;
    display: inline-block;
    inline-size: 70px;
    block-size: 13px;
    background: linear-gradient(90deg, var(--hbv2-star) var(--hbv2-rate, 0%), #dcdcd6 var(--hbv2-rate, 0%));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 13'%3E%3Cg%3E%3Cpath d='M6.5 0l1.9 4.2 4.6.5-3.4 3.1 1 4.5-4.1-2.4-4.1 2.4 1-4.5L0 4.7l4.6-.5z'/%3E%3Cpath transform='translate(14 0)' d='M6.5 0l1.9 4.2 4.6.5-3.4 3.1 1 4.5-4.1-2.4-4.1 2.4 1-4.5L0 4.7l4.6-.5z'/%3E%3Cpath transform='translate(28 0)' d='M6.5 0l1.9 4.2 4.6.5-3.4 3.1 1 4.5-4.1-2.4-4.1 2.4 1-4.5L0 4.7l4.6-.5z'/%3E%3Cpath transform='translate(42 0)' d='M6.5 0l1.9 4.2 4.6.5-3.4 3.1 1 4.5-4.1-2.4-4.1 2.4 1-4.5L0 4.7l4.6-.5z'/%3E%3Cpath transform='translate(56 0)' d='M6.5 0l1.9 4.2 4.6.5-3.4 3.1 1 4.5-4.1-2.4-4.1 2.4 1-4.5L0 4.7l4.6-.5z'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 13'%3E%3Cg%3E%3Cpath d='M6.5 0l1.9 4.2 4.6.5-3.4 3.1 1 4.5-4.1-2.4-4.1 2.4 1-4.5L0 4.7l4.6-.5z'/%3E%3Cpath transform='translate(14 0)' d='M6.5 0l1.9 4.2 4.6.5-3.4 3.1 1 4.5-4.1-2.4-4.1 2.4 1-4.5L0 4.7l4.6-.5z'/%3E%3Cpath transform='translate(28 0)' d='M6.5 0l1.9 4.2 4.6.5-3.4 3.1 1 4.5-4.1-2.4-4.1 2.4 1-4.5L0 4.7l4.6-.5z'/%3E%3Cpath transform='translate(42 0)' d='M6.5 0l1.9 4.2 4.6.5-3.4 3.1 1 4.5-4.1-2.4-4.1 2.4 1-4.5L0 4.7l4.6-.5z'/%3E%3Cpath transform='translate(56 0)' d='M6.5 0l1.9 4.2 4.6.5-3.4 3.1 1 4.5-4.1-2.4-4.1 2.4 1-4.5L0 4.7l4.6-.5z'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
}

[dir='rtl'] .hbv2-stars-bar {
    transform: scaleX(-1);
}

.hbv2-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-block-start: auto;
    padding-block-start: 4px;
}

.hbv2-price-now {
    font-size: 16px;
    font-weight: 700;
    color: var(--hbv2-ink);
    font-variant-numeric: tabular-nums;
}

.hbv2-price-was {
    font-size: 13px;
    color: var(--hbv2-muted);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.hbv2-card.has-discount .hbv2-price-now {
    color: var(--hbv2-sale);
}

.hbv2-card-foot {
    padding: 10px 14px 14px;
}

.hbv2-card-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    inline-size: 100%;
    min-block-size: 40px;
    padding: 8px 12px;
    border: 1.5px solid var(--hbv2-card-accent, var(--hbv2-accent));
    border-radius: var(--hbv2-radius-sm);
    background: transparent;
    color: var(--hbv2-card-accent, var(--hbv2-accent));
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
}

.hbv2-card-cart:hover,
.hbv2-card-cart:focus-visible {
    background: var(--hbv2-card-accent, var(--hbv2-accent));
    color: #ffffff;
    outline: none;
}

.hbv2-card-cart[disabled] {
    border-color: var(--hbv2-line);
    color: var(--hbv2-muted);
    background: var(--hbv2-surface-2);
    cursor: not-allowed;
}

.hbv2-card-cart svg {
    inline-size: 17px;
    block-size: 17px;
}

.hbv2-card-cart.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

.hbv2-store-card {
    block-size: 100%;
}

/* ------------------------------------------------------------------ product card styles: gradient / flat / modern */

/*
 * Shared structure: article.hbv2-pc > .hbv2-pc-box > media / body / foot.
 * The article is a size container, so every part scales with the card's own width (cqi), not
 * the screen: the same card works 2 per row on a phone and 6 per row on a wide screen.
 * Each declaration that uses cqi has a fixed fallback right before it for older browsers.
 * The colors (--hbv2-pc-*) are worked out per card by the renderer from the accent color.
 */
.hbv2-pc {
    --hbv2-pc-accent: var(--hbv2-accent);
    --hbv2-pc-fill: var(--hbv2-accent);
    --hbv2-pc-ink: #ffffff;
    --hbv2-pc-text: var(--hbv2-accent);
    --hbv2-pc-fill-2: var(--hbv2-accent);
    --hbv2-pc-tint: #eef6f4;
    --hbv2-pc-tint-2: #d3e9e4;
    --hbv2-pc-glow: rgba(14, 124, 107, 0.6);
    container: hbv2pc / inline-size;
    block-size: 100%;
    min-inline-size: 0;
}

.hbv2-pc-box {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    block-size: 100%;
    overflow: hidden;
}

.hbv2-pc-media {
    position: relative;
    flex: none;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.hbv2-pc-img {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}

.hbv2-pc-img img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: var(--hbv2-pc-fit, contain);
    padding: var(--hbv2-pc-pad, 8%);
    transition: opacity 350ms ease, transform 500ms var(--hbv2-ease);
}

.hbv2-pc-img img.is-alt {
    opacity: 0;
}

/* No image, or it failed to load: a quiet placeholder instead of a broken-image icon */
.hbv2-pc-ph {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    color: currentColor;
    opacity: 0.28;
}

.hbv2-pc-ph svg {
    inline-size: 34%;
    block-size: 34%;
    stroke-width: 1.3;
}

.hbv2-pc-media.is-empty .hbv2-pc-ph,
.hbv2-pc-media.is-broken .hbv2-pc-ph {
    display: grid;
}

.hbv2-pc-media.is-broken .hbv2-pc-img img {
    display: none;
}

.hbv2-pc-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-inline-size: 0;
    gap: 8px;
}

.hbv2-pc-name {
    margin: 0;
    padding: 0;
    font: inherit;
    font-size: 15px;
    font-size: clamp(13px, 6.4cqi, 17px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
}

/* Two lines at most; the space for two lines is kept so a row of cards lines up */
.hbv2-pc-name a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-block-size: 2.6em;
    overflow-wrap: anywhere;
    color: inherit;
}

/* Names and brands read in their own direction (dir="auto") but line up with the card */
.hbv2-pc-name a,
.hbv2-pc-brand {
    text-align: left;
}

[dir='rtl'] .hbv2-pc-name a,
[dir='rtl'] .hbv2-pc-brand {
    text-align: right;
}

.hbv2-pc-brand {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hbv2-pc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-inline-size: 0;
}

.hbv2-pc del,
.hbv2-pc-was {
    text-decoration: line-through;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.hbv2-pc-was {
    display: block;
    min-block-size: 1.35em;
    line-height: 1.35;
}

.hbv2-pc-flags {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-inline-size: 70%;
    pointer-events: none;
}

.hbv2-pc-flag,
.hbv2-pc-chip {
    max-inline-size: 100%;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hbv2-pc-flag.is-badge {
    background: var(--hbv2-flag-bg, var(--hbv2-pc-fill));
    color: var(--hbv2-flag-ink, var(--hbv2-pc-ink));
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hbv2-pc-flag.is-sale {
    background: var(--hbv2-sale);
    color: #ffffff;
}

.hbv2-pc-flag.is-shipping {
    background: #15803d;
    color: #ffffff;
}

/* Buttons: 44px touch targets (the wishlist circle gets an invisible larger hit area) */
.hbv2-pc-wish {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 200ms var(--hbv2-ease), color 200ms ease, background 200ms ease;
}

.hbv2-pc-wish::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
}

.hbv2-pc-wish svg {
    inline-size: 18px;
    block-size: 18px;
}

.hbv2-pc-foot {
    position: relative;
    z-index: 2;
}

.hbv2-pc-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    inline-size: 100%;
    min-block-size: 44px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--hbv2-pc-fill);
    color: var(--hbv2-pc-ink);
    font: inherit;
    font-size: 14px;
    font-size: clamp(12.5px, 5.6cqi, 15px);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 200ms var(--hbv2-ease), box-shadow 200ms ease, filter 200ms ease, background 200ms ease, color 200ms ease;
}

.hbv2-pc-cta span {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hbv2-pc-cta svg {
    flex: none;
    inline-size: 18px;
    block-size: 18px;
}

.hbv2-pc-cta[disabled] {
    background: rgba(128, 128, 128, 0.16);
    color: inherit;
    opacity: 0.7;
    cursor: not-allowed;
}

.hbv2-pc-cta.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

.hbv2-pc a:focus-visible,
.hbv2-pc button:focus-visible {
    outline: 2px solid var(--hbv2-pc-text);
    outline-offset: 2px;
    border-radius: 6px;
}

.hbv2-pc .hbv2-pc-cta:focus-visible,
.hbv2-pc .hbv2-pc-wish:focus-visible {
    border-radius: 999px;
}

/* Hover only where there is a real pointer: on touch screens hover states stick after a tap */
@media (hover: hover) and (pointer: fine) {
    .hbv2-pc:hover .hbv2-pc-media.has-alt img.is-alt {
        opacity: 1;
    }

    .hbv2-pc:hover .hbv2-pc-media.has-alt img:not(.is-alt) {
        opacity: 0;
    }

    .hbv2-pc:hover .hbv2-pc-media:not(.has-alt) img {
        transform: scale(1.05);
    }

    .hbv2-pc-cta:not([disabled]):hover {
        filter: brightness(1.07);
        transform: translateY(-1px);
        box-shadow: 0 10px 20px -10px var(--hbv2-pc-glow);
    }

    .hbv2-pc-wish:hover {
        transform: scale(1.08);
    }
}

/* ---------------- Gradient: a light card that starts white and ends in a soft tint of the accent, a
   colored glow behind the product, floating shapes, a gradient price tag and button */

.hbv2-pc[data-style='gradient'] .hbv2-pc-box {
    border: 1px solid rgba(20, 24, 32, 0.06);
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 42%, var(--hbv2-pc-tint) 100%);
    color: var(--hbv2-ink);
    box-shadow: 0 20px 40px -28px var(--hbv2-pc-glow), 0 2px 8px -4px rgba(20, 24, 32, 0.08);
}

.hbv2-pc[data-style='gradient'] .hbv2-pc-media {
    background: radial-gradient(54% 54% at 50% 55%, var(--hbv2-pc-glow-soft) 0%, rgba(255, 255, 255, 0) 74%);
    color: var(--hbv2-pc-text);
}

.hbv2-pc-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hbv2-pc-decor svg {
    position: absolute;
    fill: none;
    stroke-linecap: round;
    transition: transform 700ms var(--hbv2-ease);
}

/* Around the product; the white of the photo lets them show through (multiply, below) */
.hbv2-pc-d1,
.hbv2-pc-d3 {
    inline-size: 22%;
    stroke: var(--hbv2-pc-accent);
    stroke-width: 4;
}

.hbv2-pc-d2,
.hbv2-pc-d4 {
    stroke: var(--hbv2-pc-ring);
    stroke-width: 6;
}

.hbv2-pc-d1 {
    inset-block-start: 6%;
    inset-inline-start: 6%;
}

.hbv2-pc-d2 {
    inline-size: 14%;
    inset-block-start: 34%;
    inset-inline-end: 3%;
}

.hbv2-pc-d3 {
    inset-block-end: 15%;
    inset-inline-start: 4%;
}

.hbv2-pc-d4 {
    inline-size: 10%;
    inset-block-start: 20%;
    inset-inline-start: -2%;
}

/* Bottom corner of the image, so they never meet the price tag on a narrow card */
.hbv2-pc[data-style='gradient'] .hbv2-pc-flags {
    inset-block-end: 24px;
    inset-inline-start: 10px;
    max-inline-size: calc(100% - 64px);
}

.hbv2-pc-tag {
    position: absolute;
    z-index: 3;
    inset-block-start: 0;
    inset-inline-end: 0;
    max-inline-size: 78%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px 13px 9px;
    border-end-start-radius: 16px;
    background: linear-gradient(135deg, var(--hbv2-pc-fill) 0%, var(--hbv2-pc-fill-2, var(--hbv2-pc-fill)) 100%);
    color: var(--hbv2-pc-ink);
    box-shadow: 0 8px 18px -10px var(--hbv2-pc-glow);
    font-size: 14px;
    font-size: clamp(12.5px, 6cqi, 16px);
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hbv2-pc[data-style='gradient'] .hbv2-pc-was {
    margin-block-start: -4px;
    color: var(--hbv2-muted);
    font-size: 12.5px;
}

.hbv2-pc[data-style='gradient'] .hbv2-pc-wish {
    inset-block-end: 24px;
    inset-inline-end: 10px;
    background: #ffffff;
    color: var(--hbv2-pc-text);
    box-shadow: 0 4px 12px -4px rgba(20, 24, 32, 0.28);
}

/* Frosted info panel over the bottom of the glow */
.hbv2-pc[data-style='gradient'] .hbv2-pc-body {
    margin-block-start: -14px;
    padding: 16px 16px 4px;
    padding: 16px 7cqi 4px;
    border-radius: 16px 16px 0 0;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 -12px 24px -20px var(--hbv2-pc-glow);
}

.hbv2-pc[data-style='gradient'] .hbv2-pc-name {
    font-weight: 800;
}

.hbv2-pc[data-style='gradient'] .hbv2-pc-brand {
    color: var(--hbv2-pc-text);
    letter-spacing: 0.1em;
}

.hbv2-pc[data-style='gradient'] .hbv2-stars {
    --hbv2-star: var(--hbv2-pc-accent);
    color: var(--hbv2-muted);
}

.hbv2-pc[data-style='gradient'] .hbv2-pc-meta {
    color: var(--hbv2-muted);
    font-size: 12px;
}

.hbv2-pc[data-style='gradient'] .hbv2-pc-foot {
    display: flex;
    justify-content: center;
    padding: 12px 16px 16px;
}

.hbv2-pc[data-style='gradient'] .hbv2-pc-cta {
    inline-size: auto;
    min-inline-size: 72%;
    max-inline-size: 100%;
    padding-inline: 22px;
    background: linear-gradient(135deg, var(--hbv2-pc-fill) 0%, var(--hbv2-pc-fill-2, var(--hbv2-pc-fill)) 100%);
    box-shadow: 0 12px 24px -14px var(--hbv2-pc-glow);
}

.hbv2-pc[data-style='gradient'] .hbv2-pc-cta[disabled] {
    background: rgba(128, 128, 128, 0.16);
    color: var(--hbv2-muted);
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    .hbv2-pc[data-style='gradient']:hover .hbv2-pc-d1,
    .hbv2-pc[data-style='gradient']:hover .hbv2-pc-d4 {
        transform: translate(4px, -4px);
    }

    .hbv2-pc[data-style='gradient']:hover .hbv2-pc-d2,
    .hbv2-pc[data-style='gradient']:hover .hbv2-pc-d3 {
        transform: translate(-4px, 4px) rotate(-12deg);
    }

    .hbv2-pc[data-style='gradient'] .hbv2-pc-wish:hover {
        background: var(--hbv2-pc-fill);
        color: var(--hbv2-pc-ink);
    }
}

/* ---------------- Flat: arched top, pastel panel, centered name in the accent, dark price pill */

.hbv2-pc[data-style='flat'] .hbv2-pc-box {
    background: #ffffff;
    color: var(--hbv2-ink);
    border-radius: 140px 140px 18px 18px / 110px 110px 18px 18px;
    border-radius: 50cqi 50cqi 18px 18px / 40cqi 40cqi 18px 18px;
    box-shadow: 0 18px 36px -24px rgba(70, 45, 20, 0.42), 0 2px 6px -3px rgba(70, 45, 20, 0.14);
}

.hbv2-pc[data-style='flat'] .hbv2-pc-media {
    aspect-ratio: 1 / 1.04;
    background: linear-gradient(180deg, var(--hbv2-pc-tint-2) 0%, var(--hbv2-pc-tint) 100%);
    color: var(--hbv2-pc-text);
}

/* White photo backgrounds take on the panel color (multiply keeps the product, drops the white box) */
.hbv2-pc[data-style='gradient'] .hbv2-pc-img,
.hbv2-pc[data-style='flat'] .hbv2-pc-img,
.hbv2-pc[data-style='modern'] .hbv2-pc-img {
    mix-blend-mode: multiply;
}

/* The panel melts into the white body where the name starts */

.hbv2-pc[data-style='flat'] .hbv2-pc-media::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 2;
    block-size: 26%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    pointer-events: none;
}

.hbv2-pc[data-style='flat'] .hbv2-pc-flags {
    inset-block-start: 8%;
    inset-inline: 12%;
    max-inline-size: none;
    align-items: center;
}

.hbv2-pc[data-style='flat'] .hbv2-pc-flag.is-badge {
    background: var(--hbv2-flag-bg, #ffffff);
    color: var(--hbv2-flag-ink, var(--hbv2-pc-text));
    box-shadow: 0 4px 12px -6px rgba(70, 45, 20, 0.45);
    font-weight: 800;
}

.hbv2-pc[data-style='flat'] .hbv2-pc-wish {
    inset-block-start: 20%;
    inset-inline-end: 9%;
    background: var(--hbv2-pc-fill);
    color: var(--hbv2-pc-ink);
    box-shadow: 0 6px 14px -8px var(--hbv2-pc-glow);
}

.hbv2-pc[data-style='flat'] .hbv2-pc-body {
    align-items: center;
    margin-block-start: -6px;
    padding: 0 14px 2px;
    padding: 0 6cqi 2px;
    text-align: center;
}

.hbv2-pc[data-style='flat'] .hbv2-pc-name {
    inline-size: 100%;
    color: var(--hbv2-pc-text);
    font-size: 16px;
    font-size: clamp(14px, 7.2cqi, 19px);
    font-weight: 800;
}

.hbv2-pc[data-style='flat'] .hbv2-pc-price {
    position: relative;
    display: flex;
    justify-content: center;
    inline-size: 100%;
}

.hbv2-pc[data-style='flat'] .hbv2-pc-price::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    border-block-start: 1.5px solid var(--hbv2-pc-tint-2);
}

/* Always one line: the final price (the price before a discount sits on its own line below) */
.hbv2-pc[data-style='flat'] .hbv2-pc-pill {
    position: relative;
    display: inline-block;
    max-inline-size: 100%;
    padding: 5px 14px;
    border-radius: 999px;
    background: #14161a;
    color: #ffffff;
    font-size: 14px;
    font-size: clamp(12.5px, 5.8cqi, 15px);
    font-weight: 800;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hbv2-pc[data-style='flat'] .hbv2-pc-was {
    margin-block-start: -3px;
    color: var(--hbv2-muted);
    font-size: 12.5px;
    text-align: center;
}

.hbv2-pc[data-style='flat'] .hbv2-pc-meta {
    justify-content: center;
    color: var(--hbv2-muted);
    font-size: 12px;
}

.hbv2-pc[data-style='flat'] .hbv2-pc-brand {
    color: var(--hbv2-muted);
}

.hbv2-pc[data-style='flat'] .hbv2-pc-name a,
.hbv2-pc[data-style='flat'] .hbv2-pc-brand {
    text-align: center;
}

.hbv2-pc[data-style='flat'] .hbv2-pc-foot {
    padding: 12px 14px 16px;
    padding: 12px 6cqi 16px;
}

.hbv2-pc[data-style='flat'] .hbv2-pc-cta {
    background: var(--hbv2-pc-tint);
    color: var(--hbv2-pc-text);
}

.hbv2-pc[data-style='flat'] .hbv2-pc-cta[disabled] {
    background: rgba(128, 128, 128, 0.12);
    color: var(--hbv2-muted);
}

@media (hover: hover) and (pointer: fine) {
    .hbv2-pc[data-style='flat'] .hbv2-pc-cta:not([disabled]):hover {
        background: var(--hbv2-pc-fill);
        color: var(--hbv2-pc-ink);
        filter: none;
    }
}

/* ---------------- Modern: white card, rounded image with a folder tab (the brand), chips, full-width button */

.hbv2-pc[data-style='modern'] .hbv2-pc-box {
    padding: 10px;
    padding: clamp(8px, 4.5cqi, 12px);
    border: 1px solid rgba(20, 24, 32, 0.06);
    border-radius: 22px;
    background: #ffffff;
    color: var(--hbv2-ink);
    box-shadow: 0 16px 34px -22px rgba(20, 24, 32, 0.32), 0 1px 3px rgba(20, 24, 32, 0.05);
}

.hbv2-pc[data-style='modern'] .hbv2-pc-media {
    border-radius: 16px;
    background: #f2f3f5;
    color: var(--hbv2-muted);
}

.hbv2-pc[data-style='modern'] .hbv2-pc-img {
    border-radius: inherit;
    overflow: hidden;
}

/* Folder tab: card-colored, with concave corners where it meets the image edges */
.hbv2-pc-tab {
    position: absolute;
    z-index: 3;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: block;
    max-inline-size: 68%;
    padding-block: 5px 8px;
    padding-inline: 4px 14px;
    border-end-end-radius: 14px;
    background: #ffffff;
}

.hbv2-pc-tab::before,
.hbv2-pc-tab::after {
    content: '';
    position: absolute;
    inline-size: 14px;
    block-size: 14px;
    background: radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0) 13.5px, #ffffff 14px);
    pointer-events: none;
}

.hbv2-pc-tab::before {
    inset-block-start: 0;
    inset-inline-start: 100%;
}

.hbv2-pc-tab::after {
    inset-block-start: 100%;
    inset-inline-start: 0;
}

[dir='rtl'] .hbv2-pc-tab::before,
[dir='rtl'] .hbv2-pc-tab::after {
    background: radial-gradient(circle at 0 100%, rgba(255, 255, 255, 0) 13.5px, #ffffff 14px);
}

.hbv2-pc[data-style='modern'] .hbv2-pc-tab .hbv2-pc-brand {
    display: block;
    color: var(--hbv2-ink-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
}

.hbv2-pc[data-style='modern'] .hbv2-pc-wish {
    inset-block-start: 8px;
    inset-inline-end: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--hbv2-ink);
    box-shadow: 0 3px 10px -4px rgba(0, 0, 0, 0.3);
}

.hbv2-pc[data-style='modern'] .hbv2-pc-body {
    padding: 12px 4px 0;
    gap: 7px;
}

.hbv2-pc-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.hbv2-pc[data-style='modern'] .hbv2-pc-name {
    flex: 1 1 auto;
    min-inline-size: 0;
    font-weight: 800;
}

.hbv2-pc[data-style='modern'] .hbv2-pc-pill {
    flex: none;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--hbv2-pc-fill);
    color: var(--hbv2-pc-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hbv2-pc[data-style='modern'] .hbv2-pc-was {
    margin-block-start: -4px;
    align-self: flex-end;
    color: var(--hbv2-muted);
    font-size: 12px;
}

.hbv2-pc[data-style='modern'] .hbv2-pc-meta {
    color: var(--hbv2-muted);
    font-size: 12px;
}

.hbv2-pc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hbv2-pc-chip {
    font-weight: 600;
}

.hbv2-pc-chip.is-badge {
    background: var(--hbv2-flag-bg, var(--hbv2-pc-tint));
    color: var(--hbv2-flag-ink, var(--hbv2-pc-text));
}

.hbv2-pc-chip.is-sale {
    background: #fde8ed;
    color: #b4123a;
}

.hbv2-pc-chip.is-shipping {
    background: #dcf5e5;
    color: #13612f;
}

.hbv2-pc[data-style='modern'] .hbv2-pc-foot {
    padding: 12px 0 0;
}

.hbv2-pc[data-style='modern'] .hbv2-pc-cta {
    border-radius: 14px;
}

@media (hover: hover) and (pointer: fine) {
    .hbv2-pc[data-style='modern'] .hbv2-pc-wish:hover {
        color: var(--hbv2-sale);
    }
}

/* Narrow cards (two per row on a phone): the price goes under the name instead of beside it */
@container hbv2pc (max-width: 200px) {
    .hbv2-pc-row {
        flex-direction: column;
        gap: 6px;
    }

    .hbv2-pc[data-style='modern'] .hbv2-pc-was {
        align-self: flex-start;
        margin-block-start: -2px;
    }

    .hbv2-pc[data-style='gradient'] .hbv2-pc-cta,
    .hbv2-pc[data-style='flat'] .hbv2-pc-cta,
    .hbv2-pc[data-style='modern'] .hbv2-pc-cta {
        padding-inline: 10px;
    }

    .hbv2-pc-cta svg {
        display: none;
    }

    /* a smaller circle over the smaller photo; the invisible ring keeps the tap area at 44px */
    .hbv2-pc .hbv2-pc-wish {
        inline-size: 32px;
        block-size: 32px;
    }

    .hbv2-pc .hbv2-pc-wish::before {
        inset: -6px;
    }

    .hbv2-pc .hbv2-pc-wish svg {
        inline-size: 16px;
        block-size: 16px;
    }
}

@container hbv2pc (max-width: 150px) {
    .hbv2-pc-decor {
        display: none;
    }
}

/* Phones (up to 640px): product carousels show part of the next card, so shoppers see there is more to swipe */
@media (max-width: 640px) {
    .hbv2-peek .hbv2-track {
        grid-auto-columns: calc((100% - var(--hbv2-per) * var(--hbv2-item-gap, 16px)) / (var(--hbv2-per) + 0.28));
    }
}

/* Touch screens: a larger invisible tap area around the wishlist button */
@media (pointer: coarse) {
    .hbv2-pc-wish::before {
        inset: -6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hbv2-pc-decor svg {
        transition: none !important;
        transform: none !important;
    }
}

/* ------------------------------------------------------------------ categories / brands / sellers */

.hbv2-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.hbv2-cat-media {
    display: grid;
    place-items: center;
    inline-size: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--hbv2-surface-2);
    transition: transform 300ms var(--hbv2-ease), box-shadow 300ms ease;
}

.hbv2-cat-media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.hbv2-cat[data-card='circle'] .hbv2-cat-media {
    border-radius: 50%;
}

.hbv2-cat[data-card='square'] .hbv2-cat-media {
    border-radius: var(--hbv2-radius);
}

.hbv2-cat[data-card='tile'] {
    padding: 14px;
    border: 1px solid var(--hbv2-line);
    border-radius: var(--hbv2-radius);
    background: var(--hbv2-surface);
}

.hbv2-cat[data-card='tile'] .hbv2-cat-media {
    border-radius: var(--hbv2-radius-sm);
    background: transparent;
}

.hbv2-cat[data-card='tile'] .hbv2-cat-media img {
    object-fit: contain;
}

.hbv2-cat:hover .hbv2-cat-media {
    transform: translateY(-3px);
    box-shadow: var(--hbv2-shadow);
}

.hbv2-cat-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.hbv2-brand {
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 14px;
    aspect-ratio: 3 / 2;
    text-align: center;
}

.hbv2-brand[data-card='tile'] {
    border: 1px solid var(--hbv2-line);
    border-radius: var(--hbv2-radius);
    background: var(--hbv2-surface);
    transition: box-shadow 250ms ease, border-color 250ms ease;
}

.hbv2-brand[data-card='tile']:hover {
    box-shadow: var(--hbv2-shadow);
    border-color: transparent;
}

.hbv2-brand[data-card='circle'] {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid var(--hbv2-line);
    background: var(--hbv2-surface);
}

.hbv2-brand img {
    max-block-size: 64px;
    inline-size: auto;
    object-fit: contain;
    filter: grayscale(0);
    transition: transform 300ms var(--hbv2-ease);
}

.hbv2-brand:hover img {
    transform: scale(1.05);
}

.hbv2-brand-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--hbv2-ink-2);
}

/* Image only: the picture on the page, no box behind it (like a logo strip) */
.hbv2-cat[data-card='plain'] .hbv2-cat-media {
    border-radius: 12px;
    background: transparent;
}

.hbv2-cat[data-card='plain'] .hbv2-cat-media img {
    object-fit: contain;
}

.hbv2-cat[data-card='plain']:hover .hbv2-cat-media {
    box-shadow: none;
}

.hbv2-cat-ph {
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    color: var(--hbv2-muted);
    opacity: 0.45;
}

.hbv2-cat-ph svg {
    inline-size: 36%;
    block-size: 36%;
    stroke-width: 1.3;
}

/* A chosen image size: the picture keeps it, centered in its place (never wider than the column) */
.hbv2-cat.has-size .hbv2-cat-media {
    inline-size: min(100%, var(--hbv2-item-size, 100%));
}

/* A chosen logo size: every logo in a box of the same height, so a row keeps an even rhythm */
.hbv2-brand.has-size:not([data-card='circle']) {
    aspect-ratio: auto;
    min-block-size: calc(var(--hbv2-logo-h, 64px) + 20px);
    padding: 10px 8px;
}

.hbv2-brand.has-size img {
    max-inline-size: 100%;
    max-block-size: var(--hbv2-logo-h, 64px);
}

/* Grey logos that take their color on hover */
.hbv2-brand.is-mono img {
    filter: grayscale(1);
    opacity: 0.62;
    transition: filter 280ms ease, opacity 280ms ease, transform 280ms var(--hbv2-ease);
}

.hbv2-brand.is-mono:focus-visible img {
    filter: grayscale(0);
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .hbv2-brand.is-mono:hover img {
        filter: grayscale(0);
        opacity: 1;
    }

    .hbv2-brand[data-card='plain']:hover img,
    .hbv2-cat[data-card='plain']:hover .hbv2-cat-media {
        transform: translateY(-3px) scale(1.05);
    }
}

.hbv2-shop {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    border: 1px solid var(--hbv2-line);
    border-radius: var(--hbv2-radius);
    background: var(--hbv2-surface);
    overflow: hidden;
    transition: box-shadow 250ms ease;
}

.hbv2-shop:hover {
    box-shadow: var(--hbv2-shadow);
}

.hbv2-shop-banner {
    aspect-ratio: 16 / 7;
    background: var(--hbv2-surface-2);
}

.hbv2-shop-banner img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.hbv2-shop-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
}

.hbv2-shop.has-banner .hbv2-shop-body {
    margin-block-start: -30px;
}

.hbv2-shop-logo {
    flex: none;
    inline-size: 56px;
    block-size: 56px;
    border-radius: 50%;
    border: 3px solid var(--hbv2-surface);
    background: var(--hbv2-surface-2);
    overflow: hidden;
    box-shadow: var(--hbv2-shadow-sm);
}

.hbv2-shop-logo img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.hbv2-shop-name {
    font-weight: 700;
    font-size: 15px;
}

/* ------------------------------------------------------------------ featured product */

.hbv2-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(20px, 4vw, 56px);
}

.hbv2-feature[data-side='end'] .hbv2-feature-media {
    order: 2;
}

.hbv2-feature-media {
    position: relative;
    border-radius: var(--hbv2-radius);
    overflow: hidden;
    background: var(--hbv2-surface-2);
}

.hbv2-feature-media img {
    inline-size: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.hbv2-play {
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 72px;
    block-size: 72px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--hbv2-accent);
    box-shadow: var(--hbv2-shadow);
    cursor: pointer;
    transition: transform 250ms var(--hbv2-ease);
}

.hbv2-play:hover {
    transform: scale(1.08);
}

.hbv2-play svg {
    inline-size: 26px;
    block-size: 26px;
    margin-inline-start: 4px;
}

.hbv2-feature-eyebrow {
    display: inline-block;
    margin-block-end: 10px;
    color: var(--hbv2-accent);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hbv2-feature-title {
    margin: 0 0 14px;
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.15;
}

.hbv2-feature-text {
    margin: 0 0 18px;
    color: var(--hbv2-ink-2);
    font-size: 16px;
    line-height: 1.7;
    white-space: pre-line;
}

.hbv2-feature .hbv2-price {
    margin-block: 0 22px;
}

.hbv2-feature .hbv2-price-now {
    font-size: 22px;
}

@media (max-width: 767.98px) {
    .hbv2-feature {
        grid-template-columns: 1fr;
    }

    .hbv2-feature[data-side='end'] .hbv2-feature-media {
        order: 0;
    }
}

/* ------------------------------------------------------------------ flash deal */

.hbv2-deal {
    border-radius: inherit;
}

.hbv2-deal.has-colors {
    padding: clamp(14px, 2.5vw, 28px);
    border-radius: var(--hbv2-radius);
    background-size: cover;
    background-position: center;
}

.hbv2-countdown {
    display: inline-flex;
    gap: 6px;
    direction: ltr;
}

.hbv2-countdown span {
    display: grid;
    place-items: center;
    min-inline-size: 44px;
    padding: 6px 4px;
    border-radius: var(--hbv2-radius-sm);
    background: var(--hbv2-ink);
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.hbv2-countdown small {
    display: block;
    font-size: 10px;
    font-weight: 500;
    opacity: 0.75;
    text-transform: uppercase;
}

.hbv2-deal-ended {
    color: var(--hbv2-muted);
    font-weight: 600;
}

/* ------------------------------------------------------------------ blogs */

.hbv2-post {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    border: 1px solid var(--hbv2-line);
    border-radius: var(--hbv2-radius);
    overflow: hidden;
    background: var(--hbv2-surface);
    transition: box-shadow 250ms ease;
}

.hbv2-post:hover {
    box-shadow: var(--hbv2-shadow);
}

.hbv2-post-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--hbv2-surface-2);
}

.hbv2-post-media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 500ms var(--hbv2-ease);
}

.hbv2-post:hover .hbv2-post-media img {
    transform: scale(1.04);
}

.hbv2-post-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    flex: 1 1 auto;
}

.hbv2-post-date {
    font-size: 12px;
    color: var(--hbv2-muted);
}

.hbv2-post-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.hbv2-post-excerpt {
    margin: 0;
    color: var(--hbv2-ink-2);
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hbv2-post-more {
    margin-block-start: auto;
    padding-block-start: 6px;
    color: var(--hbv2-accent);
    font-weight: 600;
    font-size: 14px;
}

.hbv2-posts-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hbv2-posts-list .hbv2-post {
    flex-direction: row;
}

.hbv2-posts-list .hbv2-post-media {
    flex: 0 0 34%;
    aspect-ratio: auto;
    min-block-size: 120px;
}

/* ------------------------------------------------------------------ newsletter */

.hbv2-news {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hbv2-news[data-align='center'] {
    align-items: center;
    text-align: center;
}

.hbv2-news[data-align='end'] {
    align-items: flex-end;
    text-align: end;
}

.hbv2-news-title {
    margin: 0;
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 700;
}

.hbv2-news-text {
    margin: 0;
    color: var(--hbv2-muted);
    white-space: pre-line;
}

.hbv2-news-form {
    display: flex;
    gap: 8px;
    inline-size: 100%;
    max-inline-size: 520px;
    margin-block-start: 6px;
}

.hbv2-news[data-layout='stacked'] .hbv2-news-form {
    flex-direction: column;
}

.hbv2-news-form input {
    flex: 1 1 auto;
    min-inline-size: 0;
    min-block-size: 46px;
    padding: 10px 14px;
    border: 1px solid var(--hbv2-line);
    border-radius: var(--hbv2-radius-sm);
    background: var(--hbv2-surface);
    color: var(--hbv2-ink);
    font-size: 15px;
}

.hbv2-news-form input:focus {
    outline: 2px solid var(--hbv2-accent);
    outline-offset: 1px;
}

@media (max-width: 575.98px) {
    .hbv2-news-form {
        flex-direction: column;
    }
}

/* ------------------------------------------------------------------ spacer / divider */

.hbv2-spacer {
    block-size: var(--hbv2-h-d, 48px);
}

@media (max-width: 767.98px) {
    .hbv2-spacer {
        block-size: var(--hbv2-h-m, 24px);
    }
}

.hbv2-divider {
    display: flex;
}

.hbv2-divider[data-align='center'] {
    justify-content: center;
}

.hbv2-divider[data-align='end'] {
    justify-content: flex-end;
}

.hbv2-divider hr {
    margin: 0;
    border: 0;
    border-block-start: var(--hbv2-line-w, 1px) var(--hbv2-line-style, solid) var(--hbv2-line-c, var(--hbv2-line));
    inline-size: var(--hbv2-line-len, 100%);
}

/* ------------------------------------------------------------------ video dialog */

.hbv2-video {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(15, 12, 8, 0.78);
}

.hbv2-video-frame {
    inline-size: min(960px, 100%);
    aspect-ratio: 16 / 9;
    background: #000000;
    border-radius: var(--hbv2-radius);
    overflow: hidden;
}

.hbv2-video-frame iframe {
    inline-size: 100%;
    block-size: 100%;
    border: 0;
}

.hbv2-video-close {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    inline-size: 44px;
    block-size: 44px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #15191c;
    font-size: 22px;
    cursor: pointer;
}

/* ------------------------------------------------------------------ preview-only helpers */

.hbv2-empty-block {
    display: grid;
    place-items: center;
    min-block-size: 96px;
    padding: 18px;
    border: 1.5px dashed rgba(21, 25, 28, 0.22);
    border-radius: var(--hbv2-radius-sm);
    background: repeating-linear-gradient(135deg, rgba(21, 25, 28, 0.025) 0 10px, transparent 10px 20px);
    color: var(--hbv2-muted);
    font-size: 14px;
    text-align: center;
}

.hbv2-empty-block.is-error {
    border-color: rgba(229, 71, 107, 0.5);
    color: #b3324f;
}

.hbv2-empty-col {
    display: grid;
    place-items: center;
    min-block-size: 96px;
    border: 1.5px dashed rgba(109, 93, 252, 0.45);
    border-radius: 10px;
    background: rgba(109, 93, 252, 0.05);
    color: #6d5dfc;
    font: 600 14px/1.4 system-ui, sans-serif;
    cursor: pointer;
}

.hbv2-empty-col:hover {
    background: rgba(109, 93, 252, 0.1);
}

.hbv2-preview [data-hbv2-id] {
    outline-offset: -2px;
}

.hbv2-preview .hbv2-s.is-hover,
.hbv2-preview .hbv2-b.is-hover {
    outline: 1.5px dashed var(--hbv2-sel, #6d5dfc);
    cursor: pointer;
}

.hbv2-preview .hbv2-s.is-selected,
.hbv2-preview .hbv2-b.is-selected,
.hbv2-preview .hbv2-col.is-selected {
    outline: 2px solid var(--hbv2-sel, #6d5dfc);
}

.hbv2-preview .hbv2-s.is-hover::after,
.hbv2-preview .hbv2-b.is-hover::after,
.hbv2-preview .hbv2-s.is-selected::after,
.hbv2-preview .hbv2-b.is-selected::after {
    content: attr(data-hbv2-label);
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 50;
    padding: 2px 8px;
    border-end-end-radius: 6px;
    background: var(--hbv2-sel, #6d5dfc);
    color: #ffffff;
    font: 600 11px/1.6 system-ui, sans-serif;
    pointer-events: none;
    white-space: nowrap;
}

.hbv2-preview.is-interact .hbv2-s.is-hover,
.hbv2-preview.is-interact .hbv2-b.is-hover {
    outline: 0;
}

.hbv2-preview.is-interact .hbv2-s.is-hover::after,
.hbv2-preview.is-interact .hbv2-b.is-hover::after {
    display: none;
}

.hbv2-flash {
    animation: hbv2-flash 700ms ease;
}

@keyframes hbv2-flash {
    0% {
        box-shadow: inset 0 0 0 9999px rgba(109, 93, 252, 0.12);
    }

    100% {
        box-shadow: inset 0 0 0 9999px rgba(109, 93, 252, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hbv2 *,
    .hbv2 *::before,
    .hbv2 *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
        scroll-behavior: auto !important;
    }

    /* No endless motion: the marquee becomes a row the shopper can scroll. */
    .hbv2 .hbv2-mq-track {
        animation: none !important;
    }

    .hbv2 .hbv2-mq-row {
        overflow-x: auto;
        scrollbar-width: thin;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .hbv2 .hbv2-mq-item[data-clone] {
        display: none;
    }
}

/* ---------------- Outline: thin 1px frame, image in its own rounded well, mono brand line and a
   hairline above the foot (price + round add button). Every color, radius and font is a variable
   with a light default, so a store page can theme the card without overriding rules:
   --hbv2-o-surface / -well / -line / -line-strong / -ink / -muted / -faint / -radius / -radius-well
   / -font-display / -font-mono. The accent comes from the card palette (--hbv2-pc-*). */
.hbv2-pc[data-style='outline'] {
    --hbv2-star: var(--hbv2-pc-accent);
}

.hbv2-pc[data-style='outline'] .hbv2-pc-box {
    padding: 8px;
    border: 1px solid var(--hbv2-o-line, #e8e8ed);
    border-radius: var(--hbv2-o-radius, 20px);
    background: var(--hbv2-o-surface, #ffffff);
    color: var(--hbv2-o-ink, #1c1c1f);
    overflow: visible;
    transition: border-color 250ms var(--hbv2-ease), transform 250ms var(--hbv2-ease), box-shadow 250ms var(--hbv2-ease);
}

/* special state (pre-order / coming soon): dashed accent frame */
.hbv2-pc[data-style='outline'].is-pre .hbv2-pc-box {
    border: 1.5px dashed var(--hbv2-pc-accent);
}

.hbv2-pc[data-style='outline'] .hbv2-pc-media {
    border-radius: var(--hbv2-o-radius-well, 14px);
    background: var(--hbv2-o-well, #f9f9fb);
    color: var(--hbv2-o-faint, #8c8c96);
}

.hbv2-pc[data-style='outline'] .hbv2-pc-img {
    border-radius: inherit;
    overflow: hidden;
}

/* white photo backgrounds melt into the well (on the link: it is the image's stacking context) */
.hbv2-pc[data-style='outline'] .hbv2-pc-img {
    mix-blend-mode: multiply;
}

.hbv2-pc[data-style='outline'].is-out .hbv2-pc-img img {
    opacity: 0.5;
    filter: grayscale(0.35);
}

.hbv2-pc[data-style='outline'] .hbv2-pc-ph {
    opacity: 1;
}

.hbv2-pc[data-style='outline'] .hbv2-pc-ph svg {
    inline-size: 26%;
    block-size: 26%;
    opacity: 0.55;
}

.hbv2-pc[data-style='outline'] .hbv2-pc-flags {
    inset-block-start: 10px;
    inset-inline-start: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    max-inline-size: calc(100% - 64px);
}

.hbv2-pc[data-style='outline'] .hbv2-pc-flag {
    padding: 0 9px;
    block-size: 22px;
    font: 500 10px/22px var(--hbv2-o-font-mono, 'SF Mono', ui-monospace, Menlo, Consolas, monospace);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hbv2-pc[data-style='outline'] .hbv2-pc-flag.is-new {
    background: var(--hbv2-pc-fill);
    color: var(--hbv2-pc-ink);
}

.hbv2-pc[data-style='outline'] .hbv2-pc-flag.is-out {
    background: var(--hbv2-o-ink, #1c1c1f);
    color: #ffffff;
}

.hbv2-pc[data-style='outline'] .hbv2-pc-flag.is-pre {
    background: #ffffff;
    color: var(--hbv2-pc-text);
    box-shadow: inset 0 0 0 1px var(--hbv2-pc-accent);
}

/* round outlined buttons that fill with the accent */
.hbv2-pc[data-style='outline'] .hbv2-pc-wish {
    inset-block-start: 8px;
    inset-inline-end: 8px;
    inline-size: 36px;
    block-size: 36px;
    border: 1px solid var(--hbv2-o-line, #e8e8ed);
    background: rgba(255, 255, 255, 0.94);
    color: var(--hbv2-o-ink, #1c1c1f);
}

.hbv2-pc[data-style='outline'] .hbv2-pc-wish svg {
    inline-size: 17px;
    block-size: 17px;
}

.hbv2-pc[data-style='outline'] .hbv2-pc-body {
    gap: 6px;
    padding: 12px 6px 10px;
}

.hbv2-pc[data-style='outline'] .hbv2-pc-brand {
    font: 500 10.5px/1.3 var(--hbv2-o-font-mono, 'SF Mono', ui-monospace, Menlo, Consolas, monospace);
    letter-spacing: 0.14em;
    color: var(--hbv2-o-muted, #66666f);
}

.hbv2-pc[data-style='outline'] .hbv2-pc-name {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.38;
}

.hbv2-pc[data-style='outline'] .hbv2-pc-name a {
    min-block-size: 2.76em;
    text-decoration: none;
}

.hbv2-pc[data-style='outline'] .hbv2-pc-meta {
    gap: 6px 12px;
    font: 500 10.5px/1.25 var(--hbv2-o-font-mono, 'SF Mono', ui-monospace, Menlo, Consolas, monospace);
    letter-spacing: 0.06em;
    color: var(--hbv2-o-muted, #66666f);
}

.hbv2-pc[data-style='outline'] .hbv2-stars {
    font-size: inherit;
    color: inherit;
}

.hbv2-pc[data-style='outline'] .hbv2-stars-bar {
    inline-size: 62px;
    block-size: 11.5px;
}

.hbv2-pc[data-style='outline'] .hbv2-swatch {
    inline-size: 14px;
    block-size: 14px;
}

.hbv2-pc[data-style='outline'] .hbv2-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: inherit;
    font-weight: inherit;
}

.hbv2-pc[data-style='outline'] .hbv2-stock::before {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: currentColor;
}

.hbv2-pc[data-style='outline'] .hbv2-pc-foot {
    margin-block-start: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 6px 4px;
    border-block-start: 1px solid var(--hbv2-o-line, #e8e8ed);
}

.hbv2-pc[data-style='outline'] .hbv2-pc-price {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-inline-size: 0;
}

.hbv2-pc[data-style='outline'] .hbv2-pc-now {
    font: 700 17px/1.1 var(--hbv2-o-font-display, system-ui, sans-serif);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hbv2-pc[data-style='outline'] .hbv2-pc-was {
    min-block-size: 1.2em;
    font: 500 11px/1.2 var(--hbv2-o-font-mono, 'SF Mono', ui-monospace, Menlo, Consolas, monospace);
    color: var(--hbv2-o-muted, #66666f);
    white-space: nowrap;
}

.hbv2-pc[data-style='outline'] .hbv2-pc-add {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    inline-size: 42px;
    block-size: 42px;
    padding: 0;
    border: 1px solid var(--hbv2-o-line-strong, #d6d6dd);
    border-radius: 999px;
    background: var(--hbv2-o-surface, #ffffff);
    color: var(--hbv2-o-ink, #1c1c1f);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 250ms var(--hbv2-ease), border-color 250ms var(--hbv2-ease), color 250ms var(--hbv2-ease);
}

.hbv2-pc[data-style='outline'] .hbv2-pc-add svg {
    flex: none;
    inline-size: 18px;
    block-size: 18px;
}

/* grid cards: icon only (the label stays for screen readers) */
.hbv2-pc[data-style='outline'] .hbv2-pc-lbl {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.hbv2-pc[data-style='outline'] .hbv2-pc-arr {
    display: none;
}

.hbv2-pc[data-style='outline'] .hbv2-pc-add[disabled] {
    border-style: dashed;
    background: transparent;
    color: var(--hbv2-o-faint, #8c8c96);
    cursor: not-allowed;
}

.hbv2-pc[data-style='outline'] .hbv2-pc-add.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

.hbv2-pc[data-style='outline'] .hbv2-pc-add:not([disabled]):hover,
.hbv2-pc[data-style='outline'] .hbv2-pc-wish:hover,
.hbv2-pc[data-style='outline'] .hbv2-pc-add:not([disabled]):focus-visible {
    background: var(--hbv2-pc-fill);
    border-color: var(--hbv2-pc-fill);
    color: var(--hbv2-pc-ink);
}

[dir='rtl'] .hbv2-pc[data-style='outline'] .hbv2-pc-arr svg {
    transform: scaleX(-1);
}

@media (hover: hover) and (pointer: fine) {
    .hbv2-pc[data-style='outline']:hover .hbv2-pc-box {
        border-color: var(--hbv2-pc-accent);
        transform: translateY(-4px);
        box-shadow: 0 18px 36px -24px rgba(31, 30, 28, 0.36);
    }

    .hbv2-pc[data-style='outline'].is-pre:hover .hbv2-pc-box {
        border-style: dashed;
    }

    .hbv2-pc[data-style='outline']:hover .hbv2-pc-add:not([disabled]) {
        background: var(--hbv2-pc-fill);
        border-color: var(--hbv2-pc-fill);
        color: var(--hbv2-pc-ink);
    }

    .hbv2-pc[data-style='outline']:hover .hbv2-pc-name a {
        text-decoration: underline;
        text-decoration-color: var(--hbv2-pc-accent);
        text-decoration-thickness: 1.5px;
        text-underline-offset: 3px;
    }

    .hbv2-pc[data-style='outline'] .hbv2-pc-wish:hover {
        transform: none;
    }
}

/* list rows: image | text | price + labelled button */
.hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-box {
    display: grid;
    grid-template-columns: clamp(120px, 24%, 196px) minmax(0, 1fr) auto;
    grid-template-areas: 'media body foot';
    column-gap: 18px;
    align-items: center;
    padding: 10px;
}

.hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-media {
    grid-area: media;
}

.hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-body {
    grid-area: body;
    padding: 6px 0;
    gap: 8px;
}

.hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-name {
    font-size: 15.5px;
}

.hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-name a {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    min-block-size: 0;
}

.hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-foot {
    grid-area: foot;
    align-self: stretch;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    min-inline-size: 184px;
    margin: 0;
    padding-block: 8px;
    padding-inline: 18px 6px;
    border-block-start: 0;
    border-inline-start: 1px solid var(--hbv2-o-line, #e8e8ed);
}

.hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-now {
    font-size: 20px;
}

.hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-add {
    inline-size: 100%;
    padding-inline: 18px;
    background: var(--hbv2-pc-fill);
    border-color: var(--hbv2-pc-fill);
    color: var(--hbv2-pc-ink);
}

.hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-add[disabled] {
    background: transparent;
    border-color: var(--hbv2-o-line-strong, #d6d6dd);
    color: var(--hbv2-o-muted, #66666f);
}

.hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-lbl {
    position: static;
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip: auto;
}

.hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-arr {
    display: inline-flex;
    transition: transform 200ms var(--hbv2-ease);
}

.hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-add:not([disabled]):hover .hbv2-pc-arr {
    transform: translateX(3px);
}

[dir='rtl'] .hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-add:not([disabled]):hover .hbv2-pc-arr {
    transform: translateX(-3px);
}

/* narrow cards (two per row on a phone) */
@container hbv2pc (max-width: 200px) {
    .hbv2-pc[data-style='outline'] .hbv2-pc-box {
        padding: 6px;
        border-radius: 16px;
    }

    .hbv2-pc[data-style='outline'] .hbv2-pc-media {
        border-radius: 11px;
    }

    .hbv2-pc[data-style='outline'] .hbv2-pc-body {
        padding: 10px 4px 8px;
    }

    .hbv2-pc[data-style='outline'] .hbv2-pc-name {
        font-size: 13.5px;
    }

    .hbv2-pc[data-style='outline'] .hbv2-pc-foot {
        padding: 10px 4px 2px;
    }

    .hbv2-pc[data-style='outline'] .hbv2-pc-now {
        font-size: 15.5px;
    }

    .hbv2-pc[data-style='outline'] .hbv2-pc-add {
        inline-size: 38px;
        block-size: 38px;
    }

    .hbv2-pc[data-style='outline'] .hbv2-pc-flags {
        inset-block-start: 8px;
        inset-inline-start: 8px;
    }
}

/* list rows on a phone: image beside the text, price + round button under it */
@container hbv2pc (max-width: 560px) {
    .hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-box {
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-areas: 'media body' 'media foot';
        column-gap: 12px;
        align-items: start;
        padding: 8px;
    }

    .hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-body {
        padding: 2px 0 0;
        gap: 5px;
    }

    .hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-name {
        font-size: 14px;
    }

    .hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-name a {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-foot {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        min-inline-size: 0;
        padding: 8px 0 0;
        border-inline-start: 0;
        border-block-start: 1px solid var(--hbv2-o-line, #e8e8ed);
    }

    .hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-now {
        font-size: 16px;
    }

    .hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-add {
        inline-size: 40px;
        block-size: 40px;
        padding: 0;
        background: var(--hbv2-o-surface, #ffffff);
        border-color: var(--hbv2-o-line-strong, #d6d6dd);
        color: var(--hbv2-o-ink, #1c1c1f);
    }

    .hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-lbl {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .hbv2-pc[data-style='outline'][data-layout='row'] .hbv2-pc-arr {
        display: none;
    }
}

/* Arabic: brand names and labels are Arabic words, so no monospace capitals or tracking */
[dir='rtl'] .hbv2-pc[data-style='outline'] .hbv2-pc-brand,
[dir='rtl'] .hbv2-pc[data-style='outline'] .hbv2-pc-flag,
[dir='rtl'] .hbv2-pc[data-style='outline'] .hbv2-pc-meta {
    font-family: inherit;
    letter-spacing: 0;
    text-transform: none;
}

[dir='rtl'] .hbv2-pc[data-style='outline'] .hbv2-pc-brand {
    font-size: 12px;
}

[dir='rtl'] .hbv2-pc[data-style='outline'] .hbv2-pc-flag {
    font-size: 11px;
}

/* ---------------- Product grid for store product lists (HomeV2Render.cards): the number of
   columns follows the grid's own width, so it adapts to a sidebar being open or closed.
   Scoped to .hbv2-cardgrid: home page blocks also use .hbv2-grid, with their own per-row setting. */
.hbv2-cardgrid {
    container: hbv2grid / inline-size;
}

.hbv2-cardgrid > .hbv2-grid {
    --hbv2-cols: 2;
    display: grid;
    grid-template-columns: repeat(var(--hbv2-cols), minmax(0, 1fr));
    gap: var(--hbv2-grid-gap, 16px);
}

@container hbv2grid (min-width: 560px) {
    .hbv2-cardgrid > .hbv2-grid {
        --hbv2-cols: 3;
    }
}

@container hbv2grid (min-width: 860px) {
    .hbv2-cardgrid > .hbv2-grid {
        --hbv2-cols: 4;
    }
}

@container hbv2grid (min-width: 1160px) {
    .hbv2-cardgrid > .hbv2-grid {
        --hbv2-cols: 5;
    }
}

@container hbv2grid (min-width: 1440px) {
    .hbv2-cardgrid > .hbv2-grid {
        --hbv2-cols: 6;
    }
}

.hbv2-cardgrid > .hbv2-grid[data-layout='row'] {
    --hbv2-cols: 1;
}

@container hbv2grid (min-width: 1500px) {
    .hbv2-cardgrid > .hbv2-grid[data-layout='row'] {
        --hbv2-cols: 2;
    }
}

@media (max-width: 991.98px) {
    .hbv2-cardgrid > .hbv2-grid {
        gap: var(--hbv2-grid-gap-sm, 12px);
    }
}

@media (max-width: 575.98px) {
    .hbv2-cardgrid > .hbv2-grid {
        gap: var(--hbv2-grid-gap-xs, 10px);
    }
}