/* NSCC - Flipkart-style hero banner cards (2 Nov 2026). Loaded from includes/header.php.

   The homepage hero with Layout = "Banner cards (Flipkart style)": the hero
   banners (Admin > Banners, position "hero") as a horizontal row of rounded
   festive cards. Markup: widget_hero_cards() in includes/widgets.php.
   Behaviour: assets/js/hero-cards.js (arrows, dots, autoplay, entrance).

   1. Row and track      4. Copy            7. Dots and arrows
   2. Card and tones     5. Visual          8. Trust row
   3. Decorations        6. Entrance        9. Motion switches

   Sizes come from the section's own width (container query units), so the
   number of cards on screen is the same whatever the scrollbar takes:
       phones      ~1.08 cards (one and a peek), 220-228px tall
       768-1279    ~1.6 cards, 260-290px tall
       1280+       ~2.4 cards, 320-336px tall
   Every card has a fixed height, so nothing moves when images or the script
   arrive. */

/* --------------------------------------------------------------------------
   1. Row and track
   -------------------------------------------------------------------------- */
.sik-hcards {
    container: hcards / inline-size;
    --hc-gap: 12px;
    /* The left edge the first card lines up with: the page's content edge. */
    --hc-pad: max(var(--gutter, 16px), (100cqw - var(--sik-container, 1280px)) / 2 + var(--gutter, 16px));
    /* Visible width runs from that edge to the right edge of the screen. */
    --hc-show: 1.08;
    --hc-w: calc((100cqw - var(--hc-pad)) / var(--hc-show) - var(--hc-gap));
    --hc-w-max: 700px;
    --hc-h: 220px;
    --hc-r: 20px;
    --hc-gold: #FFD54A;
    position: relative;
    padding-top: 12px;
}
@media (min-width: 420px)  { .sik-hcards { --hc-h: 228px; } }
@media (min-width: 768px)  { .sik-hcards { --hc-show: 1.6; --hc-gap: 16px; --hc-h: 262px; --hc-r: 22px; padding-top: 16px; } }
@media (min-width: 1024px) { .sik-hcards { --hc-h: 290px; } }
@media (min-width: 1280px) { .sik-hcards { --hc-show: 2.4; --hc-gap: 18px; --hc-h: 320px; --hc-r: 24px; padding-top: 18px; } }
@media (min-width: 1600px) { .sik-hcards { --hc-h: 336px; } }

/* One or two banners: no point peeking at nothing. */
@media (min-width: 768px) {
    .sik-hcards--n1 { --hc-w: calc(100cqw - 2 * var(--hc-pad)); }
    .sik-hcards--n2 { --hc-w: calc((100cqw - 2 * var(--hc-pad) - var(--hc-gap)) / 2); }
}

.sik-hcards__viewport { position: relative; }

.sik-hcards__track {
    display: flex;
    gap: var(--hc-gap);
    /* Cards slide out from under the content edge on the left and run off
       the screen on the right, which is where the "peek" comes from. */
    margin-left: var(--hc-pad);
    padding: 2px var(--hc-pad) 12px 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.sik-hcards__track::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------------------
   2. Card and tones
   -------------------------------------------------------------------------- */
.sik-hcards__card {
    /* size, not inline-size: the card's height is fixed by --hc-h, so the
       copy can size itself against it (cqh) as well as against the width. */
    container: hcard / size;
    position: relative;
    isolation: isolate;
    flex: 0 0 min(var(--hc-w), var(--hc-w-max));
    height: var(--hc-h);
    border-radius: var(--hc-r);
    overflow: hidden;
    scroll-snap-align: start;
    color: #fff;
    background: var(--hc-grad);
    box-shadow: 0 10px 22px -14px rgba(80, 6, 30, .6), 0 2px 6px -2px rgba(80, 6, 30, .25);
}

/* Cycled by position: red to orange, magenta to wine, maroon, orange to gold.
   The left end of each - where the words sit - is the dark end. */
.sik-hcards__card--t1 { --hc-grad: linear-gradient(118deg, #740A1B 0%, #B01A22 42%, #E0411F 72%, #FF8A1F 100%); }
.sik-hcards__card--t2 { --hc-grad: linear-gradient(118deg, #4E0530 0%, #8E0E47 40%, #CC0F5C 74%, #F9056A 100%); }
.sik-hcards__card--t3 { --hc-grad: linear-gradient(118deg, #2C020C 0%, #5A0819 42%, #84112F 76%, #A8204A 100%); }
.sik-hcards__card--t4 { --hc-grad: linear-gradient(118deg, #702005 0%, #A0350A 40%, #D4570E 72%, #F5A01C 100%); }
/* A banner's own Background colour (Admin > Banners) wins over the cycle. */
.sik-hcards__card--custom {
    --hc-grad: linear-gradient(118deg,
        color-mix(in srgb, var(--hc-bg) 52%, #14000a) 0%,
        var(--hc-bg) 60%,
        color-mix(in srgb, var(--hc-bg) 72%, #ffb347) 100%);
}

/* --------------------------------------------------------------------------
   3. Decorations - CSS only, all behind the words (z-index 0)
   -------------------------------------------------------------------------- */
.sik-hcards__fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        /* Soft gold bokeh. */
        radial-gradient(circle at 57% 24%, rgba(255, 224, 150, .34) 0 6px, rgba(255, 224, 150, .1) 8px, transparent 10px),
        radial-gradient(circle at 69% 70%, rgba(255, 224, 150, .2) 0 12px, rgba(255, 224, 150, .07) 15px, transparent 17px),
        radial-gradient(circle at 89% 26%, rgba(255, 240, 196, .3) 0 4px, transparent 7px),
        radial-gradient(circle at 46% 62%, rgba(255, 206, 150, .16) 0 8px, transparent 11px),
        radial-gradient(circle at 95% 84%, rgba(255, 224, 150, .22) 0 13px, transparent 17px),
        radial-gradient(circle at 38% 16%, rgba(255, 255, 255, .14) 0 3px, transparent 5px),
        radial-gradient(circle at 80% 46%, rgba(255, 236, 180, .16) 0 18px, transparent 22px),
        /* Warm light pooling behind the picture. */
        radial-gradient(60% 75% at 84% 62%, rgba(255, 186, 90, .3), transparent 70%),
        /* A dark wash under the words, for contrast on the brighter tones. */
        radial-gradient(120% 95% at 0% 55%, rgba(24, 0, 8, .38) 0%, rgba(24, 0, 8, .14) 46%, transparent 68%);
}

/* String lights along the top edge: a sagging wire with sockets, then two
   layers of glowing bulbs that twinkle out of step. */
.sik-hcards__bulbs {
    position: absolute;
    inset: 0 0 auto;
    height: 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='26' viewBox='0 0 64 26'%3E%3Cpath d='M0 4Q16 16 32 4Q48 16 64 4' fill='none' stroke='%23241006' stroke-opacity='.55' stroke-width='1.3'/%3E%3Crect x='14.6' y='9.4' width='2.8' height='4' rx='.7' fill='%23D8A644'/%3E%3Crect x='46.6' y='9.4' width='2.8' height='4' rx='.7' fill='%23D8A644'/%3E%3C/svg%3E") repeat-x 0 0 / 64px 26px;
}
.sik-hcards__bulbs::before,
.sik-hcards__bulbs::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: repeat-x;
    background-size: 64px 26px;
    animation: sikHcTwinkle 2.6s ease-in-out infinite alternate;
}
.sik-hcards__bulbs::before {
    background-image: radial-gradient(circle at 16px 17px, #FFFCEB 0 1.4px, #FFD54A 2.3px 3.4px, rgba(255, 206, 80, .55) 4.2px, rgba(255, 190, 70, 0) 9px);
}
.sik-hcards__bulbs::after {
    background-image: radial-gradient(circle at 48px 17px, #FFF2F7 0 1.4px, #FF9EC4 2.3px 3.4px, rgba(255, 140, 185, .5) 4.2px, rgba(255, 140, 185, 0) 9px);
    animation-delay: -1.3s;
}

/* Paper lanterns hanging from the top edge. */
.sik-hcards__lantern {
    position: absolute;
    top: -3px;
    width: clamp(18px, 5.2cqi, 30px);
    aspect-ratio: 32 / 84;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 84'%3E%3Cdefs%3E%3CradialGradient id='l' cx='.5' cy='.42' r='.62'%3E%3Cstop offset='0' stop-color='%23FFF1B8'/%3E%3Cstop offset='.42' stop-color='%23FFA33A'/%3E%3Cstop offset='1' stop-color='%23C8102E'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M16 0v25' stroke='%23F3C969' stroke-opacity='.75'/%3E%3Crect x='10' y='24' width='12' height='5' rx='1.5' fill='%23E2AE45'/%3E%3Cellipse cx='16' cy='44' rx='14' ry='16' fill='url(%23l)'/%3E%3Cpath d='M16 28c-5 4-5 28 0 32m0-32c5 4 5 28 0 32m0-32c-11 4-11 28 0 32m0-32c11 4 11 28 0 32' fill='none' stroke='%23861028' stroke-opacity='.4'/%3E%3Crect x='10' y='58' width='12' height='5' rx='1.5' fill='%23E2AE45'/%3E%3Cpath d='M13 63l-1 19M16 63v21M19 63l1 19' stroke='%23F3C969' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
    filter: drop-shadow(0 0 8px rgba(255, 170, 60, .7));
    transform-origin: 50% 0;
    animation: sikHcSway 4.8s ease-in-out infinite alternate;
}
.sik-hcards__lantern--a { left: 52%; }
.sik-hcards__lantern--b { right: 5%; width: clamp(16px, 4.2cqi, 24px); animation-duration: 5.6s; animation-delay: -2s; }

/* Diyas near the bottom edge, each sitting in its own glow. */
.sik-hcards__diya {
    position: absolute;
    bottom: 7px;
    width: clamp(24px, 6.4cqi, 38px);
    aspect-ratio: 40 / 28;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M20 1c3.4 4.2 4.2 7.6 0 11.4C15.8 8.6 16.6 5.2 20 1z' fill='%23FFC93C'/%3E%3Cpath d='M20 5.5c1.6 2.2 1.9 4 0 5.8-1.9-1.8-1.6-3.6 0-5.8z' fill='%23FFF7DA'/%3E%3Cpath d='M2 13h36c-1.2 8.2-8.6 13.5-18 13.5S3.2 21.2 2 13z' fill='%23A63A14'/%3E%3Cpath d='M2 13h36' stroke='%23F3C969' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M8 18.5c5 3.2 19 3.2 24 0' fill='none' stroke='%23F3C969' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.sik-hcards__diya::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -30%;
    width: 260%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 210, 110, .55) 0%, rgba(255, 170, 70, .22) 34%, transparent 66%);
    animation: sikHcGlow 1.9s ease-in-out infinite alternate;
}
.sik-hcards__diya--a { left: 41%; }
.sik-hcards__diya--b { left: 50.5%; bottom: 4px; width: clamp(20px, 5cqi, 30px); }
.sik-hcards__diya--b::before { animation-delay: -.8s; }

/* Small cards: fewer ornaments, so the headline keeps its room. */
@container hcard (max-width: 439px) {
    .sik-hcards__lantern--a,
    .sik-hcards__diya--b { display: none; }
    .sik-hcards__diya--a { left: 44%; bottom: 5px; }
}

/* --------------------------------------------------------------------------
   4. Copy - the left ~58%
   -------------------------------------------------------------------------- */
/* Every size below is the smaller of a share of the card's width (cqi) and
   of its height (cqh), so a wide-but-short card (a phone held sideways) and
   a narrow-but-tall one both keep a three-line headline, the offer, the line
   and the arrow inside the card. Nothing in the column may shrink: a flex
   item with overflow:hidden would otherwise be squeezed and cut mid-line. */
.sik-hcards__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: safe center;
    gap: clamp(3px, 2.2cqh, 8px);
    height: 100%;
    max-width: 58%;
    padding: max(22px, 10.5cqh) 0 max(10px, 5.5cqh) clamp(14px, 5.6cqi, 32px);
}
.sik-hcards__copy > * { flex-shrink: 0; }

.sik-hcards__badge {
    display: inline-block;
    max-width: 100%;
    padding: .3em .95em;
    border-radius: 999px;
    background: #FFE08A;
    color: #5A0A1E;
    font-size: clamp(10px, 3.6cqh, 12.5px);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 8px -2px rgba(30, 0, 10, .45);
}

.sik-hcards__title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(18px, min(6.2cqi, 10.8cqh), 38px);
    font-style: normal;
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.02em;
    color: var(--hc-fg, #fff);
    text-shadow: 0 2px 0 rgba(60, 0, 18, .38), 0 4px 16px rgba(30, 0, 8, .4);
    text-wrap: balance;
}
.sik-hcards__accent {
    display: block;
    color: var(--hc-gold);
}

.sik-hcards__offer {
    margin: 0;
    font-size: clamp(12px, min(3.5cqi, 6cqh), 19px);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 1px 6px rgba(30, 0, 8, .45);
}
.sik-hcards__offer b {
    font-size: 1.32em;
    font-weight: 900;
    color: var(--hc-gold);
    letter-spacing: -.01em;
}

/* Up to two lines, then an ellipsis. One line cut almost every subtitle
   mid-word ("hair ban…"), which read as broken copy. */
.sik-hcards__line {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    font-size: clamp(11.5px, min(2.75cqi, 4.6cqh), 15px);
    line-height: 1.35;
    color: rgba(255, 255, 255, .93);
    text-shadow: 0 1px 4px rgba(30, 0, 8, .45);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.sik-hcards__go {
    display: grid;
    place-items: center;
    width: clamp(30px, 14cqh, 48px);
    height: clamp(30px, 14cqh, 48px);
    margin-top: 1.5cqh;
    border-radius: 50%;
    background: #fff;
    color: #B0123F;
    box-shadow: 0 6px 16px -5px rgba(30, 0, 8, .55);
    transition: transform .25s ease, box-shadow .25s ease;
}
.sik-hcards__go svg { width: 48%; height: 48%; stroke-width: 2.4; }

/* The card's one link, laid over the whole card. */
.sik-hcards__link {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
}
.sik-hcards__link:focus { outline: none; }
.sik-hcards__link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
    box-shadow: inset 0 0 0 6px #2A0010;
}
@media (hover: hover) {
    .sik-hcards__card:hover .sik-hcards__go {
        transform: translateX(4px) scale(1.06);
        box-shadow: 0 10px 22px -6px rgba(30, 0, 8, .6);
    }
}

/* --------------------------------------------------------------------------
   5. Visual - the right ~45%
   -------------------------------------------------------------------------- */
.sik-hcards__visual {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    width: 42%;
    pointer-events: none;
}
@container hcard (min-width: 440px) {
    .sik-hcards__visual { width: 45%; }
}
.sik-hcards__visual picture { display: contents; }

/* A cut-out stands on the bottom edge, in a ring of warm light. */
.sik-hcards__visual--cutout::before,
.sik-hcards__visual--cutout::after {
    content: "";
    position: absolute;
    right: 4%;
    bottom: 6%;
    width: 86%;
    aspect-ratio: 1;
    border-radius: 50%;
}
.sik-hcards__visual--cutout::before {
    background: radial-gradient(circle, rgba(255, 220, 140, .55) 0%, rgba(255, 170, 80, .24) 42%, transparent 70%);
}
.sik-hcards__visual--cutout::after {
    width: 72%;
    right: 11%;
    bottom: 14%;
    border: 2px dashed rgba(255, 220, 150, .34);
}
/* Kept inside its column (and the words kept out of it): a model pointing
   left would otherwise reach under the end of the short line. */
.sik-hcards__card--cutout .sik-hcards__copy { max-width: 56%; }
.sik-hcards__cutout {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 96%;
    height: 96%;
    object-fit: contain;
    object-position: right bottom;
    filter: drop-shadow(0 10px 18px rgba(25, 0, 8, .45));
}

/* A photo sits in a gold-edged arch, tilted, running off the bottom edge. */
.sik-hcards__visual--frame::before {
    content: "";
    position: absolute;
    right: -4%;
    bottom: -8%;
    width: 104%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 210, 120, .42) 0%, rgba(255, 170, 80, .16) 40%, transparent 66%);
}
.sik-hcards__visual--frame::after {
    /* Two sparkles beside the frame. */
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    width: 30%;
    aspect-ratio: 1;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11 6 14 9 20 10C14 11 11 14 10 20C9 14 6 11 0 10C6 9 9 6 10 0Z' fill='%23FFE7A3'/%3E%3C/svg%3E") no-repeat 20% 10% / 38%,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11 6 14 9 20 10C14 11 11 14 10 20C9 14 6 11 0 10C6 9 9 6 10 0Z' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat 78% 72% / 22%;
    filter: drop-shadow(0 0 4px rgba(255, 220, 140, .9));
    animation: sikHcSparkle 2.2s ease-in-out infinite alternate;
}
.sik-hcards__frame {
    position: absolute;
    right: 9%;
    bottom: -12px;
    z-index: 1;
    width: 80%;
    max-height: 84%;
    aspect-ratio: .86;
    border-radius: 999px 999px 16px 16px;
    overflow: hidden;
    border: 3px solid #F4CC6A;
    background: #2A0612;
    box-shadow:
        0 0 0 4px rgba(255, 216, 120, .22),
        0 0 30px 4px rgba(255, 186, 90, .42),
        0 18px 30px -10px rgba(20, 0, 8, .65);
    transform: rotate(3deg);
    transform-origin: 50% 100%;
}
@container hcard (min-width: 440px) {
    .sik-hcards__frame { border-width: 4px; bottom: -16px; width: 78%; }
}
.sik-hcards__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 42%;
}

/* No picture at all: the words take the width. */
.sik-hcards__card--none .sik-hcards__copy { max-width: 88%; }

/* --------------------------------------------------------------------------
   6. Entrance - headline rises, arrow pops
   On first paint every card plays it (cards off to the right finish
   unseen); hero-cards.js then holds back the ones still off screen
   (.is-pending) and lets each play as it scrolls in. The first card's
   headline only moves, never fades, so it paints at once.
   -------------------------------------------------------------------------- */
@keyframes sikHcRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes sikHcLift {
    from { transform: translateY(12px); }
    to   { transform: none; }
}
@keyframes sikHcPop {
    0%   { opacity: 0; transform: scale(.4); }
    65%  { opacity: 1; transform: scale(1.14); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes sikHcTwinkle {
    from { opacity: .45; }
    to   { opacity: 1; }
}
@keyframes sikHcSway {
    from { transform: rotate(-4deg); }
    to   { transform: rotate(4deg); }
}
@keyframes sikHcGlow {
    from { opacity: .55; }
    to   { opacity: 1; }
}
@keyframes sikHcSparkle {
    from { opacity: .45; transform: scale(.9); }
    to   { opacity: 1; transform: scale(1.05); }
}

.sik-hcards__badge { animation: sikHcRise .5s ease-out both; }
.sik-hcards__title { animation: sikHcRise .6s .07s cubic-bezier(.2, .7, .2, 1) both; }
.sik-hcards__card:first-child .sik-hcards__title { animation-name: sikHcLift; }
.sik-hcards__offer { animation: sikHcRise .55s .16s ease-out both; }
.sik-hcards__line  { animation: sikHcRise .55s .22s ease-out both; }
/* backwards, not both: a held end frame would override the hover nudge. */
.sik-hcards__go    { animation: sikHcPop .5s .32s cubic-bezier(.3, 1.4, .5, 1) backwards; }

@media (prefers-reduced-motion: no-preference) {
    .sik-hcards__card.is-pending :is(.sik-hcards__badge, .sik-hcards__title, .sik-hcards__offer, .sik-hcards__line, .sik-hcards__go) {
        animation: none;
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   7. Dots and arrows (shown once hero-cards.js is running)
   -------------------------------------------------------------------------- */
.sik-hcards__dots {
    display: flex;
    justify-content: center;
    min-height: 20px;
    margin-top: -4px;
}
.sik-hcards:not(.is-ready) .sik-hcards__dots,
.sik-hcards.is-static .sik-hcards__dots { visibility: hidden; }

.sik-hcards__dot {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
/* The script hides dots for positions the row can never scroll to; the rule
   above outweighs app.css's [hidden] rule, so it is restated here. */
.sik-hcards__dot[hidden] { display: none; }
.sik-hcards__dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .24);
    background: color-mix(in srgb, var(--sik-text, #111827) 24%, transparent);
    transition: width .3s ease, background-color .3s ease;
}
.sik-hcards__dot.is-active { width: 34px; }
.sik-hcards__dot.is-active::before { width: 24px; background: var(--sik-primary, #F9056A); }
.sik-hcards__dot:hover::before { background: color-mix(in srgb, var(--sik-primary, #F9056A) 60%, transparent); }
.sik-hcards__dot.is-active:hover::before { background: var(--sik-primary, #F9056A); }
.sik-hcards__dot:focus-visible { outline: 2px solid var(--sik-primary, #F9056A); outline-offset: -2px; border-radius: 999px; }

.sik-hcards__arrow { display: none; }
@media (min-width: 1024px) {
    .sik-hcards__arrow {
        position: absolute;
        top: calc(50% - 5px);
        z-index: 5;
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #fff;
        color: #1F2937;
        box-shadow: 0 8px 22px -6px rgba(16, 24, 40, .38), 0 0 0 1px rgba(16, 24, 40, .06);
        cursor: pointer;
        transform: translateY(-50%);
        transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
    }
    .sik-hcards__arrow svg { width: 22px; height: 22px; stroke-width: 2.4; }
    .sik-hcards__arrow:hover { color: var(--sik-primary, #F9056A); transform: translateY(-50%) scale(1.06); }
    .sik-hcards__arrow:focus-visible { outline: 3px solid var(--sik-primary, #F9056A); outline-offset: 2px; }
    .sik-hcards__arrow--prev { left: max(6px, var(--hc-pad) - 23px); }
    /* Over the peeking card at the screen edge, never on the one in front. */
    .sik-hcards__arrow--next { right: 14px; }
    .sik-hcards:not(.is-ready) .sik-hcards__arrow,
    .sik-hcards.is-static .sik-hcards__arrow { visibility: hidden; }
}

/* --------------------------------------------------------------------------
   8. Trust row - a slim band under the cards
   -------------------------------------------------------------------------- */
.sik-hcards__trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 6px 0 0;
    padding: 9px 8px;
    list-style: none;
    border-radius: 14px;
    background: #FFF4F8;
    background: color-mix(in srgb, var(--sik-primary, #F9056A) 6%, var(--sik-surface, #fff));
    border: 1px solid #FDDCEA;
    border: 1px solid color-mix(in srgb, var(--sik-primary, #F9056A) 14%, var(--sik-surface, #fff));
}
.sik-hcards__trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    text-align: center;
}
.sik-hcards__trust-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sik-surface, #fff);
    color: var(--sik-primary, #F9056A);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .1);
}
.sik-hcards__trust-icon svg { width: 15px; height: 15px; }
.sik-hcards__trust-text { display: flex; flex-direction: column; min-width: 0; }
.sik-hcards__trust-text b {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sik-text, #111827);
}
.sik-hcards__trust-text small { display: none; }

@media (min-width: 768px) {
    .sik-hcards__trust { gap: 12px; padding: 10px 16px; }
    .sik-hcards__trust-item { flex-direction: row; justify-content: center; gap: 10px; text-align: left; }
    .sik-hcards__trust-icon { width: 34px; height: 34px; }
    .sik-hcards__trust-icon svg { width: 17px; height: 17px; }
    .sik-hcards__trust-text b { font-size: 13px; }
    .sik-hcards__trust-text small {
        display: block;
        overflow: hidden;
        font-size: 12px;
        line-height: 1.3;
        color: var(--sik-muted, #6B7280);
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

/* --------------------------------------------------------------------------
   9. Motion switches
   -------------------------------------------------------------------------- */
/* Off screen: the ornaments stop working for nobody. */
.sik-hcards.is-offscreen *,
.sik-hcards.is-offscreen *::before,
.sik-hcards.is-offscreen *::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .sik-hcards *,
    .sik-hcards *::before,
    .sik-hcards *::after { animation: none !important; transition: none !important; }
}
.sik-noanim .sik-hcards *,
.sik-noanim .sik-hcards *::before,
.sik-noanim .sik-hcards *::after { animation: none !important; transition: none !important; }

/* --------------------------------------------------------------------------
   Older browsers without container units (Safari before 16, Chrome before
   105). There every cqw/cqi/cqh size above is dropped, so the row would
   collapse: the same layout is given here against the viewport, with fixed
   type sizes per breakpoint. Newer browsers never read this block.
   -------------------------------------------------------------------------- */
@supports not (width: 1cqw) {
    .sik-hcards {
        --hc-pad: max(var(--gutter, 16px), (100vw - var(--sik-container, 1280px)) / 2 + var(--gutter, 16px));
        --hc-w: calc((100vw - var(--hc-pad)) / var(--hc-show) - var(--hc-gap));
    }
    @media (min-width: 768px) {
        .sik-hcards--n1 { --hc-w: calc(100vw - 2 * var(--hc-pad)); }
        .sik-hcards--n2 { --hc-w: calc((100vw - 2 * var(--hc-pad) - var(--hc-gap)) / 2); }
    }
    .sik-hcards__copy { justify-content: center; gap: 6px; padding: 24px 0 12px 18px; }
    .sik-hcards__badge { font-size: 11px; }
    .sik-hcards__title { font-size: 21px; }
    .sik-hcards__offer { font-size: 14px; }
    .sik-hcards__line { font-size: 12.5px; }
    .sik-hcards__go { width: 36px; height: 36px; margin-top: 4px; }
    .sik-hcards__lantern { width: 22px; }
    .sik-hcards__lantern--b { width: 18px; }
    .sik-hcards__diya { width: 28px; }
    .sik-hcards__diya--b { width: 24px; }
    @media (min-width: 768px) {
        .sik-hcards__copy { padding: 30px 0 14px 24px; }
        .sik-hcards__title { font-size: 27px; }
        .sik-hcards__offer { font-size: 16px; }
        .sik-hcards__line { font-size: 14px; }
        .sik-hcards__go { width: 42px; height: 42px; }
    }
    @media (min-width: 1280px) {
        .sik-hcards__title { font-size: 31px; }
        .sik-hcards__offer { font-size: 17px; }
        .sik-hcards__go { width: 46px; height: 46px; }
    }
}