/* ==========================================================================
   Lumen Vault homepage shopping sections: category banners and the product showcase.
   Markup: resources/views/partials/home-category-banners.blade.php, home-showcase.blade.php
   Behaviour: public/assets/lv-home-shop.js
   Everything is prefixed lvcb- (category banners) or lvs- (showcase) so it cannot collide with existing CSS.

   House rules followed here (see the design system notes):
   - white / #F5F5F5 surfaces, #212529 text, #DEE2E6 hairlines, no heavy shadows, small 8-10px radii;
   - Lumen blue #24A8DF is a fill or border only; text uses #0B6E97 (5.69:1 on white);
   - amber #FFC107 is reserved for purchase actions; prices are maroon #B02A37;
   - hover is polish only, never required: every control is a normal link/button of at least 40-44px on touch;
   - boxes get their size from CSS (min-height, aspect-ratio), never from an image that loads later: no layout shift.
   ========================================================================== */

/* ── Category banners ───────────────────────────────────────────────────── */
/* A card's look depends on its OWN width (container query), not the screen width: a phone card, a tablet card and
   a desktop card of the same width look the same, and the admin preview can show any of them faithfully. Only the
   grid (how many columns) follows the screen. */

.lvcb {
    --lvcb-ink: #212529;
    --lvcb-accent: #0b6e97;
    width: min(calc(100% - 30px), var(--container, 1140px));
    margin: 14px auto 0;
}
.lvcb *, .lvcb *::before, .lvcb *::after { box-sizing: border-box; }

.lvcb__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.lvcb-card {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 252px;
    overflow: hidden;
    border-radius: 10px;
    background: #eef3f7;
    color: var(--lvcb-ink);
    container-type: inline-size;
}
.lvcb-card[data-theme="light"] { color: #fff; background: #1b2a36; }

.lvcb-card__bg { position: absolute; inset: 0; z-index: 0; }
.lvcb-card__bg picture { display: block; width: 100%; height: 100%; }
.lvcb-card__img {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center;
    transition: scale .5s cubic-bezier(.4, 0, .2, 1);
}
.lvcb-card[data-side="left"] .lvcb-card__img { object-position: left center; }

/* a controlled wash behind the text only; the picture stays clear on its own side */
.lvcb-card__wash {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, var(--lvcb-w1) 0%, var(--lvcb-w2) 46%, transparent 80%);
}
.lvcb-card[data-side="left"] .lvcb-card__wash { background: linear-gradient(270deg, var(--lvcb-w1) 0%, var(--lvcb-w2) 46%, transparent 80%); }

.lvcb-card__body { position: relative; z-index: 2; width: min(66%, 330px); padding: 20px 22px 18px; }
.lvcb-card[data-side="left"] .lvcb-card__body { margin-left: auto; }

.lvcb-card__title { margin: 0 0 8px; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; }
.lvcb-card__title a { color: inherit; text-decoration: none; }
.lvcb-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.lvcb-list { margin: 0 -10px; padding: 0; list-style: none; }

/* the whole row is the link: arrow, label and the padding around them */
.lvcb-link {
    display: flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 6px 10px; border-radius: 6px;
    color: inherit; font-size: 15px; line-height: 1.25; text-decoration: none;
    transition: background-color .17s ease, color .17s ease;
    -webkit-tap-highlight-color: transparent;
}
.lvcb-link svg { flex: 0 0 auto; width: 14px; height: 14px; opacity: .55; transition: translate .17s ease, opacity .17s ease; }
.lvcb-link:active { background: rgba(36, 168, 223, .18); }
.lvcb-card[data-theme="light"] .lvcb-link:active { background: rgba(255, 255, 255, .22); }
.lvcb-link:focus-visible, .lvcb-card__title a:focus-visible { outline: 3px solid #24a8df; outline-offset: 1px; }
@media (pointer: coarse) { .lvcb-link { min-height: 44px; } }

@media (hover: hover) {
    .lvcb-link:hover { background: rgba(36, 168, 223, .12); color: var(--lvcb-accent); text-shadow: 0 0 0 currentColor; }   /* text-shadow: a stronger look without changing the width */
    .lvcb-link:hover svg { translate: 3px 0; opacity: 1; }
    .lvcb-card[data-theme="light"] .lvcb-link:hover { background: rgba(255, 255, 255, .16); color: #fff; }
    .lvcb-card:hover .lvcb-card__img { scale: 1.03; }
}

/* narrow cards (a phone, or a three-across desktop card): a slightly wider text column over a wider wash */
@container (max-width: 440px) {
    .lvcb-card__body { width: min(72%, 320px); padding: 16px 14px 12px 18px; }
    .lvcb-card__wash { background: linear-gradient(90deg, var(--lvcb-w1) 0%, var(--lvcb-w2) 58%, transparent 92%); }
    .lvcb-card[data-side="left"] .lvcb-card__wash { background: linear-gradient(270deg, var(--lvcb-w1) 0%, var(--lvcb-w2) 58%, transparent 92%); }
}
/* a card that spans the whole tablet row keeps its text column compact */
@container (min-width: 640px) {
    .lvcb-card__body { width: min(46%, 380px); }
}

/* the grid itself follows the screen: three across, two on tablet (an odd last card takes the full row), one on a phone */
@media (max-width: 991.98px) {
    .lvcb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lvcb-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 639.98px) {
    .lvcb { width: calc(100% - 12px); margin-top: 12px; }
    .lvcb__grid { grid-template-columns: 1fr; gap: 12px; }
    .lvcb-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .lvcb *, .lvcb *::before, .lvcb *::after { transition-duration: .01ms !important; }
}

/* ==========================================================================
   Product showcase (lvs-): featured pick, labels on cards, bundles, reviews, recently viewed.
   The carousel sections reuse the homepage's own .hp-carousel markup and the shared product card.
   ========================================================================== */

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



/* ── Product rows (best sellers, shelves, new arrivals) ─────────────────── */
/* The homepage's own rows show six cards per line on a desktop. These rows hold five, so they are sized for five and fill the line
   (a sixth, if the admin asks for more, scrolls in). Rows with a different number of cards simply scroll as usual. */
@media (min-width: 1024px) {
    .lvs .hp-carousel > .catalog-product { flex: 0 0 calc((100% - 4 * 10px) / 5); }
}
/* On a phone the homepage turns every product row into a two-column grid. Five picks would leave one card alone on the last line and
   each shelf would be three screens of cards, so here the row stays a swipeable strip: two cards and a sliver of the next one. */
@media (max-width: 767.98px) {
    .lvs .hp-carousel { display: flex; overflow-x: auto; overflow-y: hidden; gap: 10px; scroll-snap-type: x proximity; scrollbar-width: none; }
    .lvs .hp-carousel::-webkit-scrollbar { display: none; }
    .lvs .hp-carousel > .catalog-product { flex: 0 0 calc((100% - 10px) / 2 - 14px); scroll-snap-align: start; }
}

/* ── Shared small parts ─────────────────────────────────────────────────── */
.lvs-muted { color: #5c666f; }
.lvs-price { font-size: 24px; font-weight: 700; line-height: 1.1; color: #b02a37; }
.lvs-price del { margin-left: 8px; font-size: 15px; font-weight: 400; color: #6c757d; }
.lvs-star { fill: #dee2e6; }
.lvs-star.is-on { fill: #495057; }                                        /* charcoal stars: amber keeps its single job */
.lvs-stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.lvs-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(36, 168, 223, .14); color: #0b6e97; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }

.lvs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 22px; border: 1.5px solid transparent; border-radius: 8px;
    font: inherit; font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color .17s ease, border-color .17s ease, translate .17s ease;
}
.lvs-btn--buy { background: #ffc107; color: #212529; }                    /* amber: purchase actions only */
.lvs-btn--ghost { background: #fff; color: #212529; border-color: #212529; }
.lvs-btn--link { min-height: 44px; padding: 0 6px; background: none; color: #212529; font-weight: 500; }
.lvs-btn--link i { color: #15803d; font-size: 18px; }
.lvs-btn:focus-visible { outline: 3px solid #24a8df; outline-offset: 2px; }
.lvs-btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.lvs-btn.is-done { background: #15803d; color: #fff; }
@media (hover: hover) {
    .lvs-btn--buy:hover { background: #f5b800; translate: 0 -1px; }
    .lvs-btn--ghost:hover { background: #f5f5f5; }
    .lvs-btn--link:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.lvs-status { margin: 10px 0 0; font-size: 13.5px; color: #15803d; }
.lvs-status.is-error { color: #b02a37; }

/* ── Featured Pick (rotating) ───────────────────────────────────────────── */
.lvs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The card chrome lives on the wrapper, so the slides inside it can fade without a border flickering. */
.lvs-feat { position: relative; background: #fff; border: 1px solid #dee2e6; border-radius: 10px; overflow: hidden; }
.lvs-feat__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 8px 12px 0 22px; }
.lvs-feat__title { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #0b6e97; }
.lvs-feat__ctrl { display: flex; align-items: center; gap: 6px; }
.lvs-feat__count { margin-right: 6px; font-size: 13px; font-variant-numeric: tabular-nums; color: #5c666f; white-space: nowrap; }
.lvs-feat__count b { font-weight: 700; color: #212529; }
.lvs-feat__btn {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 36px; height: 36px; padding: 0; border: 1px solid #dee2e6; border-radius: 50%;
    background: #fff; color: #212529; cursor: pointer;
    transition: background-color .17s ease, border-color .17s ease;
}
.lvs-feat__btn:focus-visible { outline: 3px solid #24a8df; outline-offset: 2px; }
.lvs-feat__btn:active { background: #e9ecef; }
.lvs-ico-play { display: none; }
.lvs.is-paused .lvs-ico-pause { display: none; }
.lvs.is-paused .lvs-ico-play { display: block; }
@media (hover: hover) { .lvs-feat__btn:hover { background: #f5f5f5; border-color: #adb5bd; } }
@media (pointer: coarse) { .lvs-feat__btn { width: 44px; height: 44px; } }

/* One grid cell holds every slide, so the block is always as tall as its tallest slide and nothing below it ever moves. */
.lvs-feat__stage { display: grid; touch-action: pan-y; }
.lvs-slide {
    grid-area: 1 / 1; min-width: 0;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .35s ease, visibility 0s linear .35s;
}
.lvs-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s ease; }

/* A thin line along the bottom edge shows how long until the next pick. Blue is a fill here, never text. */
.lvs-feat__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #f1f3f5; pointer-events: none; }
.lvs-feat__progress i { display: block; width: 100%; height: 100%; background: #24a8df; transform-origin: left center; transform: scaleX(0); animation: lvs-feat-fill 20s linear both paused; }
.lvs.is-running .lvs-feat__progress i { animation-play-state: running; }
@keyframes lvs-feat-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.lvs-spot {
    display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 32px; align-items: center;
    padding: 4px 22px 26px;
}
.lvs-spot__media { display: block; aspect-ratio: 1 / 1; border-radius: 8px; background: #fff; overflow: hidden; }
.lvs-spot__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lvs-spot__body { min-width: 0; }
.lvs-spot__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #0b6e97; }
.lvs-spot__brand { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; color: #5c666f; }
.lvs-spot__name { margin: 0 0 8px; font-size: clamp(20px, 2.3vw, 28px); font-weight: 600; line-height: 1.2; color: #212529; text-wrap: balance; }
.lvs-spot__name a { color: inherit; text-decoration: none; }
.lvs-spot__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lvs-spot__rating { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 14px; }
.lvs-facts { display: flex; flex-wrap: wrap; margin: 0 0 10px; padding: 0; list-style: none; font-size: 14.5px; color: #495057; }
.lvs-facts li + li::before { content: "\00B7"; margin: 0 8px; color: #adb5bd; }   /* quiet middots, not boxed chips */
.lvs-spot__blurb { margin: 0 0 14px; max-width: 58ch; font-size: 15px; line-height: 1.55; color: #495057; }
.lvs-spot__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.lvs-spot__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.lvs-spot__quote { margin: 16px 0 0; padding: 2px 0 2px 14px; border-left: 3px solid #24a8df; max-width: 58ch; }
.lvs-spot__quote blockquote { margin: 0 0 4px; font-size: 14.5px; line-height: 1.5; color: #212529; }
.lvs-spot__quote figcaption { font-size: 12.5px; color: #5c666f; }

@media (max-width: 991.98px) {
    .lvs-feat__bar { padding-left: 18px; }
    .lvs-spot { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 22px; padding: 2px 18px 22px; }
}
@media (max-width: 639.98px) {
    .lvs-feat__bar { min-height: 48px; padding: 4px 8px 0 14px; }
    .lvs-spot { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 14px 18px; }
    .lvs-spot__media { max-width: 190px; width: 100%; margin: 0 auto; }
    .lvs-spot__name { margin-bottom: 6px; font-size: 18px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }   /* the full name is on the product page; three lines keep every slide the same short height */
    /* a phone gets the essentials: the long blurb and the quote stay on larger screens, so the block is one screen, not two */
    .lvs-spot__blurb, .lvs-spot__quote { display: none; }
    .lvs-facts { gap: 2px 12px; margin-bottom: 8px; font-size: 13.5px; }
    .lvs-facts li + li::before { display: none; }
    .lvs-spot__buy { margin-bottom: 10px; }
    /* Add to cart and View details share one row; the WhatsApp link sits under them */
    .lvs-spot__cta { gap: 6px 10px; }
    .lvs-spot__cta .lvs-btn--buy, .lvs-spot__cta .lvs-btn--ghost { flex: 1 1 0; min-width: 0; padding: 0 10px; }
    .lvs-spot__cta .lvs-btn--link { flex: 1 1 100%; justify-content: center; }
}

/* ── Often bought together ──────────────────────────────────────────────── */
.lvs-bundles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lvs-bundle { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: #fff; border: 1px solid #dee2e6; border-radius: 10px; }
.lvs-bundle__items { display: flex; align-items: flex-start; gap: 8px; }
.lvs-bundle__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #212529; text-decoration: none; text-align: center; }
.lvs-bundle__item img { display: block; width: 96px; height: 96px; object-fit: contain; }
.lvs-bundle__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.3; }
.lvs-bundle__price { font-size: 14px; font-weight: 600; color: #b02a37; }
.lvs-bundle__plus { flex: 0 0 auto; align-self: center; margin-top: -24px; font-size: 22px; font-weight: 300; color: #6c757d; }
.lvs-bundle__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid #dee2e6; }
.lvs-bundle__total { display: flex; flex-direction: column; line-height: 1.2; }
.lvs-bundle__total span { font-size: 12.5px; color: #5c666f; }
.lvs-bundle__total strong { font-size: 18px; font-weight: 700; color: #b02a37; }
@media (hover: hover) { .lvs-bundle__item:hover .lvs-bundle__name { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 991.98px) { .lvs-bundles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) {
    .lvs-bundles { grid-template-columns: 1fr; gap: 12px; }
    .lvs-bundle__foot { flex-wrap: wrap; }
    .lvs-bundle__foot .lvs-btn { flex: 1 1 auto; }
}

/* ── Reviews ────────────────────────────────────────────────────────────── */
.lvs-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lvs-review { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px; background: #fff; border: 1px solid #dee2e6; border-radius: 10px; }
.lvs-review blockquote { margin: 0; font-size: 15px; line-height: 1.55; color: #212529; }
.lvs-review figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: auto; font-size: 13.5px; color: #495057; }
.lvs-verified { color: #15803d; font-size: 12.5px; white-space: nowrap; }
.lvs-review__product { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding-top: 10px; border-top: 1px solid #dee2e6; color: #212529; text-decoration: none; font-size: 13px; line-height: 1.3; }
.lvs-review__product img { flex: 0 0 auto; width: 40px; height: 40px; object-fit: contain; border: 1px solid #dee2e6; border-radius: 6px; background: #fff; }
@media (hover: hover) { .lvs-review__product:hover span { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 991.98px) { .lvs-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lvs-review:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 639.98px) { .lvs-reviews { grid-template-columns: 1fr; gap: 12px; } }

/* ── Recently viewed ────────────────────────────────────────────────────── */
.lvs-clear { min-height: 44px; padding: 0 6px; border: 0; background: none; color: #5c666f; font: inherit; font-size: 13px; cursor: pointer; }
.lvs-clear:hover { color: #212529; text-decoration: underline; }
.lvs-recent { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.lvs-mini { flex: 0 0 min(250px, 78%); scroll-snap-align: start; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; background: #fff; border: 1px solid #dee2e6; border-radius: 8px; color: #212529; text-decoration: none; }
.lvs-mini img { flex: 0 0 auto; width: 56px; height: 56px; object-fit: contain; }
.lvs-mini__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lvs-mini__brand { font-size: 12px; color: #5c666f; }
.lvs-mini__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; }
.lvs-mini:focus-visible { outline: 3px solid #24a8df; outline-offset: 2px; }
@media (hover: hover) { .lvs-mini:hover { border-color: #adb5bd; } }

@media (prefers-reduced-motion: reduce) {
    .lvs *, .lvs *::before, .lvs *::after { transition-duration: .01ms !important; }
    .lvs-feat__progress { display: none; }
}

/* ==========================================================================
   Compact intro + one-row trust strip (merchandising layout).
   Only applied when home.blade.php adds .hp-intro / .hp-trust-strip, i.e. while the merchandising system is on and
   "Compact intro" is ticked in the admin. Every rule uses TWO classes on purpose: the original single-class rules also
   live in the layout's inline critical CSS and in the async stylesheet, and this file must win whichever loads last.
   ========================================================================== */
.hp-hero-banner.hp-intro { padding: 22px 0 12px; text-align: left; background: #fff; }
/* heading + paragraph in the left column, the two buttons in the right one (no wrapper element needed, so the markup is the original) */
.hp-hero-banner.hp-intro .page-container { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; }
.hp-hero-banner.hp-intro .hp-hero-banner-title { grid-column: 1; grid-row: 1; align-self: end; }
.hp-hero-banner.hp-intro .hp-hero-banner-tagline { grid-column: 1; grid-row: 2; align-self: start; }
.hp-hero-banner.hp-intro .hp-hero-banner-ctas { grid-column: 2; grid-row: 1 / span 2; }
.hp-hero-banner.hp-intro .hp-hero-banner-title { margin: 0 0 6px; max-width: none; font-size: clamp(20px, 2.5vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: 0; color: #212529; text-wrap: balance; }
.hp-hero-banner.hp-intro .hp-hero-banner-tagline { margin: 0; max-width: 74ch; font-size: 15px; line-height: 1.5; color: #495057; }
.hp-hero-banner.hp-intro .hp-hero-banner-ctas { flex: 0 0 auto; justify-content: flex-end; gap: 10px; }
.hp-hero-banner.hp-intro .hp-hero-banner-btn { min-height: 46px; padding: 0 22px; border: 1.5px solid transparent; font-size: 15px; font-weight: 600; white-space: nowrap; transition: background-color .17s ease, border-color .17s ease; }
.hp-hero-banner.hp-intro .hp-hero-banner-btn:hover { opacity: 1; transform: none; }
.hp-hero-banner.hp-intro .hp-hero-banner-btn--shop { background: #0b6e97; color: #fff; }               /* white on #0B6E97 is 5.6:1; the brand blue itself is too light for text */
.hp-hero-banner.hp-intro .hp-hero-banner-btn--wa { background: #fff; color: #212529; border-color: #ced4da; }
.hp-hero-banner.hp-intro .hp-hero-banner-btn--wa i { color: #15803d; font-size: 17px; }
.hp-hero-banner.hp-intro .hp-hero-banner-btn:focus-visible { outline: 3px solid #24a8df; outline-offset: 2px; }
@media (hover: hover) {
    .hp-hero-banner.hp-intro .hp-hero-banner-btn--shop:hover { background: #085a7c; }
    .hp-hero-banner.hp-intro .hp-hero-banner-btn--wa:hover { background: #f5f5f5; border-color: #adb5bd; }
}

/* The trust strip: four short promises on one line, each with a tick. The longer sub-lines and big icons are dropped. */
.hp-trust-row-section.hp-trust-strip { padding: 0 0 14px; border-bottom: 1px solid #dee2e6; background: #fff; }
.hp-trust-strip .hp-trust-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 0; }
.hp-trust-strip .hp-trust-row-item { flex: 0 1 auto; gap: 0; }
.hp-trust-strip .hp-trust-row-item i, .hp-trust-strip .hp-trust-row-item span { display: none; }
.hp-trust-strip .hp-trust-row-item strong { overflow: visible; font-size: 13.5px; font-weight: 600; color: #343a40; white-space: nowrap; text-overflow: clip; }
.hp-trust-strip .hp-trust-row-item strong::before { content: "\2713"; display: inline-block; margin-right: 7px; font-weight: 700; color: #0b6e97; }

@media (max-width: 991.98px) {
    .hp-hero-banner.hp-intro .page-container { grid-template-columns: minmax(0, 1fr); }
    .hp-hero-banner.hp-intro .hp-hero-banner-ctas { grid-column: 1; grid-row: 3; justify-content: flex-start; margin-top: 12px; }
}
@media (max-width: 767.98px) {
    .hp-hero-banner.hp-intro { padding: 16px 0 10px; }
    .hp-hero-banner.hp-intro .page-container { padding-left: 10px; padding-right: 10px; }   /* the container itself is only 6px in from the screen edge on a phone */
    .hp-hero-banner.hp-intro .hp-hero-banner-title { font-size: 20px; margin-bottom: 5px; }
    .hp-hero-banner.hp-intro .hp-hero-banner-tagline { font-size: 14px; line-height: 1.45; }
    /* the two buttons share one row (Shop Now is the short one) instead of stacking into two full-width bars */
    .hp-hero-banner.hp-intro .hp-hero-banner-ctas { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); flex-direction: row; gap: 8px; padding: 0; }
    .hp-hero-banner.hp-intro .hp-hero-banner-btn { width: auto; min-height: 44px; padding: 0 10px; font-size: 14px; }
    /* four promises on a phone: two rows of two, which is as close to "one row" as 360px honestly allows */
    .hp-trust-strip .hp-trust-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 0 10px; }
    .hp-trust-strip .hp-trust-row-item strong { font-size: 13px; white-space: normal; line-height: 1.3; }
}


/* ==========================================================================
   Look and feel pass: light backgrounds, tags, stars, type scale, arrows, reveal.
   ========================================================================== */

/* Soft, light section backgrounds (never solid or heavy). Two classes so they beat .hp-section--alt wherever it loads. */
body.home-page .lvs.lvs--featured     { background: linear-gradient(180deg, #eef7fd 0%, #f9fcfe 100%); }
body.home-page .lvs.lvs--bestsellers  { background: linear-gradient(180deg, #fff8ea 0%, #fffdf8 100%); }
body.home-page .lvs.lvs--shelf-flashlights { background: linear-gradient(180deg, #f1f7fd 0%, #fbfdff 100%); }
body.home-page .lvs.lvs--shelf-batteries   { background: linear-gradient(180deg, #effaf3 0%, #fbfffc 100%); }
body.home-page .lvs.lvs--shelf-smart  { background: linear-gradient(180deg, #f5f2fd 0%, #fcfbff 100%); }
body.home-page .lvs.lvs--shelf-heating { background: linear-gradient(180deg, #fff3ee 0%, #fffcfa 100%); }
body.home-page .lvs.lvs--new          { background: linear-gradient(180deg, #edf9f9 0%, #fafefe 100%); }
body.home-page .lvs.lvs--pairs, body.home-page .lvs.lvs--reviews, body.home-page .lvs.lvs--deals, body.home-page .lvs.lvs--trending, body.home-page .lvs.lvs--favourites, body.home-page .lvs.lvs--recent { background: #f8f9fb; }
.lvs-feat, .lvs-bundle, .lvs-review { box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.lvs-pill { background: #e4f3fb; color: #0b5f85; }
.lvs-feat__progress i { background: #8fd0ee; }
.hp-hero-banner.hp-intro .hp-hero-banner-btn--shop { background: #dff1fb; color: #0a5a7c; border-color: #8fd0ee; }   /* a light fill, not a solid block */
@media (hover: hover) { .hp-hero-banner.hp-intro .hp-hero-banner-btn--shop:hover { background: #cbe8f7; } }

/* Tags on the photograph: small rectangles, 11px, bold, uppercase, light tint with a coloured edge and text. At most two per card. */
.catalog-image-wrap .lvs-badge {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    padding: 3px 6px; border-radius: 3px; border: 1px solid transparent;
    font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: .3px; text-transform: uppercase;
}
.catalog-image-wrap .lvs-badge--second { top: 34px; }                 /* sits under a SALE label */
.lvs-badge--best { background: #fff4d6; color: #b77900; border-color: #f1d28a; }
.lvs-badge--new { background: #e6f1fd; color: #1976d2; border-color: #b7d6f6; }
.lvs-badge--trending { background: #dff3f0; color: #00796b; border-color: #a9dcd5; }
.lvs-badge--featured { background: #f1e8f8; color: #6a1b9a; border-color: #d7bdea; }

/* Review stars: real yellow, everywhere on the homepage. */
.home-page .pcr-filled, .home-page .pcr-half { color: #ffb400; }
.home-page .pcr-empty { color: #d9dde2; }
.lvs-star.is-on { fill: #ffb400; }
.lvs-star { fill: #dfe3e8; }

/* Type scale: page title 28 > block titles 26 > product name 28/featured, 15/card > sub-headings 14.5 > meta 12-13. */
.lvs .hp-section-title { font-size: clamp(21px, 2.3vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: 0; color: #1d2733; }
.lvs .hp-section-sub { margin-top: 3px; font-size: 14.5px; font-weight: 400; color: #5c6975; }
.lvs .hp-viewall { font-size: 14px; font-weight: 600; }
.lvs-feat__title { font-size: 13px; }
.lvs-spot__name { font-size: clamp(21px, 2.4vw, 30px); font-weight: 700; }
.lvs-price { font-size: 26px; }

/* Carousel arrows: big, white, outlined and shadowed so nobody misses them, on desktop and on phones. */
.lvs .hp-carousel-btn {
    display: flex; width: 46px; height: 46px; border: 2px solid #343a40; border-radius: 50%;
    background: #fff; color: #212529; box-shadow: 0 4px 14px rgba(16, 24, 40, .22);
    opacity: 1; transition: background-color .17s ease, color .17s ease, transform .17s ease, box-shadow .17s ease;
}
.lvs .hp-carousel-btn svg { width: 20px; height: 20px; stroke-width: 3; }
.lvs .hp-carousel-btn--prev { left: -16px; }
.lvs .hp-carousel-btn--next { right: -16px; }
.lvs .hp-carousel-btn:disabled { opacity: .35; box-shadow: none; }
.lvs .hp-carousel-btn:focus-visible { outline: 3px solid #24a8df; outline-offset: 2px; }
@media (hover: hover) { .lvs .hp-carousel-btn:not(:disabled):hover { background: #212529; color: #fff; border-color: #212529; transform: translateY(-50%) scale(1.08); } }
@media (max-width: 767.98px) {
    .lvs .hp-carousel-btn { display: flex; width: 40px; height: 40px; }
    .lvs .hp-carousel-btn--prev { left: -8px; }
    .lvs .hp-carousel-btn--next { right: -8px; }
}

/* Gentle reveal as a block scrolls into view. Only applied by JS to blocks that start below the fold, so nothing is ever hidden without JS and nothing moves layout. */
.lvs.lvs-reveal { opacity: 0; translate: 0 14px; }
.lvs.lvs-reveal.is-shown { opacity: 1; translate: 0 0; transition: opacity .5s ease, translate .5s ease; }
@media (prefers-reduced-motion: reduce) { .lvs.lvs-reveal { opacity: 1; translate: none; } }