/* ==========================================================================
   Storefront home page blocks
   --------------------------------------------------------------------------
   The home page is a stack of blocks chosen in Store Management → Home Page
   Builder. Each one picks a background from the same palette the landing
   pages use, and App\Support\LandingPalette writes the readable text colour
   onto the section as --lp-on, so a dark background never needs its own rule.

   Everything here is mobile-first: the grids fall to fewer columns, the rails
   scroll with a finger, and nothing is allowed to overflow the viewport.
   ========================================================================== */

.hb {
    --hb-line: rgba(148, 163, 184, .28);
    --hb-radius: 14px;
    padding: 34px 0;
    color: var(--lp-on, inherit);
}
.hb:first-child { padding-top: 18px; }
/* Each block carries its own bottom padding, so two blocks on the SAME
   background need no top padding as well -- it would double the gap. Where
   the background changes (white -> light grey, say) the new band needs its
   own top padding, or its heading sits flush against the colour edge. */
.hb-bg-white + .hb-bg-white,
.hb-bg-light + .hb-bg-light,
.hb-bg-green + .hb-bg-green,
.hb-bg-orange + .hb-bg-orange,
.hb-bg-blue + .hb-bg-blue,
.hb-bg-purple + .hb-bg-purple,
.hb-bg-pink + .hb-bg-pink,
.hb-bg-amber + .hb-bg-amber,
.hb-bg-teal + .hb-bg-teal,
.hb-bg-dark + .hb-bg-dark { padding-top: 0; }
/* A hero slider sits flush under the header -- the 18px breathing room
   above is for text/banner blocks opening the page, not a full-width image. */
.hb.hb-slider:first-child { padding-top: 0; }

/* -- backgrounds ---------------------------------------------------------- */
.hb-bg-white  { background: #fff; }
.hb-bg-light  { background: #f4f6f8; }
.hb-bg-green  { background: linear-gradient(150deg, #0aa06a, #076f4a); }
.hb-bg-orange { background: linear-gradient(150deg, #f97316, #dc4a11); }
.hb-bg-blue   { background: linear-gradient(150deg, #2f7bf6, #1b52b8); }
.hb-bg-purple { background: linear-gradient(150deg, #8b5cf6, #6127d4); }
.hb-bg-pink   { background: linear-gradient(150deg, #ec4899, #be1b62); }
.hb-bg-amber  { background: linear-gradient(150deg, #f9b115, #d38707); }
.hb-bg-teal   { background: linear-gradient(150deg, #12b3a8, #0a7d76); }
.hb-bg-dark   { background: linear-gradient(150deg, #263041, #14181f); }
.hb-on-dark { --hb-line: rgba(255, 255, 255, .22); }

/* -- section heading ------------------------------------------------------ */
.hb-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 16px;
}
/* A flex item will not shrink below its content unless told to. Without
   this a long category name ran under the "see all" pill instead of
   wrapping, and the two overlapped. */
.hb-head > div { min-width: 0; }
.hb-head h2 {
    margin: 0; font-size: clamp(17px, 2.2vw, 23px); font-weight: 700; line-height: 1.3;
    overflow-wrap: anywhere;
}
.hb-head p  { margin: 3px 0 0; font-size: 13.5px; opacity: .72; overflow-wrap: anywhere; }

@media (max-width: 480px) {
    /* Too little width for both on one line; the pill drops below. */
    .hb-head { flex-wrap: wrap; gap: 8px; }
}
.hb-more {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--hb-line); text-decoration: none; color: inherit;
    font-size: 12.5px; font-weight: 600; transition: background .16s, border-color .16s;
}
.hb-more:hover { background: rgba(148, 163, 184, .14); color: inherit; }

/* -- main slider ---------------------------------------------------------- */
.hb-slider { position: relative; overflow: hidden; }
.hb-slides { position: relative; }
.hb-slide { display: none; }
.hb-slide.is-on { display: block; animation: hb-fade .4s ease; }
@keyframes hb-fade { from { opacity: 0; } to { opacity: 1; } }
/* fill (not cover): whatever size gets uploaded shows in full, edge to
   edge, with no cropping -- it stretches to the box instead of clipping. */
.hb-slide img { width: 100%; display: block; object-fit: fill; }
.hb-slider-sm .hb-slide img { height: clamp(140px, 22vw, 260px); }
.hb-slider-md .hb-slide img { height: clamp(180px, 32vw, 420px); }
.hb-slider-lg .hb-slide img { height: clamp(220px, 42vw, 560px); }

.hb-slide-cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 34px 22px 18px; color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, .62));
}
.hb-slide-cap span { display: block; font-size: clamp(15px, 2.4vw, 24px); font-weight: 700; }
.hb-slide-cap em {
    display: inline-block; margin-top: 8px; padding: 7px 16px; border-radius: 999px;
    background: #fff; color: #12241a; font-style: normal; font-size: 13px; font-weight: 700;
}

/* -- arrows, shared by the slider and the rails --------------------------- */
.hb-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 36px; height: 36px; border-radius: 50%; padding: 0;
    display: grid; place-items: center; cursor: pointer;
    background: rgba(255, 255, 255, .92); border: 1px solid var(--hb-line);
    color: #1e293b; font-size: 13px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .16);
    transition: background .16s, opacity .16s;
}
.hb-nav:hover { background: #fff; }
.hb-nav.is-prev { left: 8px; }
.hb-nav.is-next { right: 8px; }
.hb-nav[hidden] { display: none; }

.hb-dots {
    position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
    display: flex; justify-content: center; gap: 6px;
}
.hb-dots button {
    width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .55); border: 0; transition: width .2s, background .2s;
}
.hb-dots button.is-on { width: 20px; border-radius: 999px; background: #fff; }

/* -- category tiles ------------------------------------------------------- */
.hb-cats { display: grid; gap: 14px; }
.hb-cats.is-circle, .hb-cats.is-card { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hb-cats.is-rail {
    display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px;
    scroll-snap-type: x mandatory; scrollbar-width: thin;
}
/* min-width: 0 -- a flex item's automatic minimum is its min-content width,
   so a long unbroken name ("Computers & Accessories") widened its own tile
   past 116px and the row came out in mismatched sizes. Two lines instead. */
.hb-cats.is-rail .hb-cat { flex: 0 0 124px; min-width: 0; scroll-snap-align: start; }
.hb-cats.is-rail .hb-cat-name { white-space: normal; min-height: 2.7em; }

.hb-cat { display: block; text-align: center; text-decoration: none; color: inherit; }
.hb-cat-img {
    display: grid; place-items: center; overflow: hidden;
    background: rgba(148, 163, 184, .12); border: 1px solid var(--hb-line);
    margin: 0 auto 8px; transition: transform .18s, border-color .18s;
}
.hb-cats.is-circle .hb-cat-img { width: 84px; height: 84px; border-radius: 50%; }
.hb-cats.is-card .hb-cat-img, .hb-cats.is-rail .hb-cat-img {
    width: 100%; aspect-ratio: 1; border-radius: var(--hb-radius);
}
.hb-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.hb-cat-img i { font-size: 22px; opacity: .5; }
.hb-cat:hover .hb-cat-img { transform: translateY(-3px); border-color: currentColor; }
.hb-cat-name {
    display: block; font-size: 13px; font-weight: 600; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* -- product grid --------------------------------------------------------- */
.hb-grid { display: grid; gap: 14px; }
.hb-cols-1 { grid-template-columns: minmax(0, 1fr); }
.hb-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hb-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hb-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hb-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hb-cell.is-hidden { display: none; }

.hb-more-wrap { text-align: center; margin-top: 18px; }
.hb-more-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 26px; border-radius: 999px; cursor: pointer;
    background: transparent; border: 1px solid var(--hb-line); color: inherit;
    font-size: 13.5px; font-weight: 700; transition: background .16s;
}
.hb-more-btn:hover { background: rgba(148, 163, 184, .16); }

/* -- product rail --------------------------------------------------------- */
.hb-rail-wrap { position: relative; }
.hb-rail {
    display: flex; gap: 14px; overflow-x: auto;
    /* overflow-x makes overflow-y compute to auto, so this box clips its
       cards -- the padding is the room their hover lift and shadow need. */
    padding: 6px 2px 10px;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    /* The arrows and a swipe are the controls; a scrollbar under a
       product row just looks like a stray line. Scrolling itself is
       untouched -- only the bar is hidden. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hb-rail::-webkit-scrollbar { width: 0; height: 0; display: none; }
.hb-rail-item { flex: 0 0 calc((100% - 4 * 14px) / 5); min-width: 0; scroll-snap-align: start; }

/* -- banner beside products ----------------------------------------------- */
.hb-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.hb-split.is-right { grid-template-columns: minmax(0, 1fr) 300px; }
.hb-split.is-right .hb-split-banner { order: 2; }
.hb-split-banner img { width: 100%; border-radius: var(--hb-radius); display: block; }

/* -- banner ads ----------------------------------------------------------- */
.hb-banners { display: grid; gap: 14px; }
.hb-banners img { width: 100%; border-radius: var(--hb-radius); display: block; }

/* -- offer countdown ------------------------------------------------------ */
.hb-deal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.hb-deal-head h2 { margin: 0; font-size: clamp(17px, 2.2vw, 23px); font-weight: 700; }
.hb-deal-head p { margin: 3px 0 0; font-size: 13.5px; opacity: .72; }
.hb-clock { display: flex; align-items: center; gap: 6px; }
.hb-clock > i { font-style: normal; font-weight: 700; opacity: .5; }
.hb-clock span {
    display: grid; min-width: 54px; padding: 6px 8px; border-radius: 10px; text-align: center;
    background: rgba(148, 163, 184, .16); border: 1px solid var(--hb-line);
}
.hb-clock b { font-size: 18px; font-weight: 800; line-height: 1.15; }
.hb-clock small { font-size: 10px; opacity: .7; }

/* -- service strip -------------------------------------------------------- */
/* div., not the bare class: the block's own <section> is also named
   hb-services (hb-{type}), and the grid landed on it too, squeezing the
   whole strip into its first column. */
div.hb-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hb-service {
    display: flex; align-items: center; gap: 11px;
    padding: 14px; border-radius: var(--hb-radius);
    border: 1px solid var(--hb-line); background: rgba(148, 163, 184, .07);
}
.hb-service i { font-size: 19px; flex: 0 0 auto; }
.hb-service strong { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.hb-service small { display: block; font-size: 11.5px; opacity: .7; }

/* -- notice --------------------------------------------------------------- */
.hb-notice { padding: 10px 0; font-weight: 600; text-align: center; overflow: hidden; }
.hb-notice.is-scrolling span {
    display: inline-block; white-space: nowrap; animation: hb-marquee 20s linear infinite;
}
@keyframes hb-marquee { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .hb-notice.is-scrolling span { animation: none; } }

/* -- text and spacer ------------------------------------------------------ */
.hb-text { max-width: 760px; margin: 0 auto; }
.hb-text h2 { margin: 0 0 10px; font-size: clamp(18px, 2.4vw, 25px); font-weight: 700; }
.hb-text p { margin: 0; line-height: 1.75; opacity: .8; }
.hb-divider { padding: 0; }
.hb-divider-sm { height: 10px; }
.hb-divider-md { height: 26px; }
.hb-divider-lg { height: 48px; }

/* -- tablets -------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .hb-cats.is-circle, .hb-cats.is-card { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hb-cols-4, .hb-cols-5, .hb-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hb-rail-item { flex-basis: calc((100% - 3 * 14px) / 4); }
    .hb-split, .hb-split.is-right { grid-template-columns: minmax(0, 1fr); }
    .hb-split.is-right .hb-split-banner { order: 0; }
    div.hb-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- phones --------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .hb { padding: 24px 0; }
    .hb-head { align-items: center; }
    .hb-head h2 { font-size: 17px; }
    .hb-more { padding: 6px 12px; font-size: 12px; }

    .hb-cats.is-circle, .hb-cats.is-card { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .hb-cats.is-circle .hb-cat-img { width: 68px; height: 68px; }
    .hb-cat-name { font-size: 11.5px; }

    .hb-grid { gap: 10px; }
    .hb-cols-2, .hb-cols-3, .hb-cols-4, .hb-cols-5, .hb-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hb-rail { gap: 10px; }
    .hb-rail-item { flex-basis: calc((100% - 10px) / 2); }

    .hb-nav { width: 30px; height: 30px; font-size: 11px; }
    .hb-banners { gap: 10px; }
    .hb-banners.hb-cols-3, .hb-banners.hb-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hb-deal-head { gap: 10px; }
    .hb-clock span { min-width: 46px; padding: 5px 6px; }
    .hb-clock b { font-size: 15px; }

    div.hb-services { gap: 8px; }
    .hb-service { padding: 11px; gap: 9px; }
    .hb-service i { font-size: 16px; }
    .hb-service strong { font-size: 12.5px; }
    .hb-service small { font-size: 10.5px; }
}

@media (max-width: 479.98px) {
    .hb-banners.hb-cols-2, .hb-banners.hb-cols-3, .hb-banners.hb-cols-4 {
        grid-template-columns: minmax(0, 1fr);
    }
    div.hb-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- category line that moves on its own ---------------------------------- */
.hb-marquee {
    overflow: hidden;
    /* Fade the two ends so tiles arrive and leave instead of being chopped. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.hb-marquee-track {
    display: flex; width: max-content;
    animation: hb-scroll var(--hb-speed, 38s) linear infinite;
}
.hb-marquee-set { display: flex; gap: 26px; padding-right: 26px; }
.hb-marquee .hb-cat { flex: 0 0 96px; }

/* The track holds two identical sets, so moving it half its own width lands
   the copy exactly where the original started. */
@keyframes hb-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.hb-speed-slow   { --hb-speed: 60s; }
.hb-speed-normal { --hb-speed: 38s; }
.hb-speed-fast   { --hb-speed: 22s; }

/* Reading a name is easier when it is not sliding away. */
.hb-marquee:hover .hb-marquee-track,
.hb-marquee:focus-within .hb-marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .hb-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .hb-marquee-track { animation: none; }
    .hb-marquee-set:last-child { display: none; }   /* no need for the copy */
}


/* The marquee tiles are always circles, whatever the wrapping styles do. */
.hb-marquee .hb-cat-img {
    width: 84px; height: 84px; border-radius: 50%;
    display: grid; place-items: center; overflow: hidden;
    background: rgba(148, 163, 184, .12); border: 1px solid var(--hb-line);
    margin: 0 auto 8px;
}
.hb-marquee .hb-cat-img img { width: 100%; height: 100%; object-fit: cover; }

/* Phone sizes for the moving line. These come last so they win over the
   base circle rule above. */
@media (max-width: 767.98px) {
    .hb-marquee-set { gap: 16px; padding-right: 16px; }
    .hb-marquee .hb-cat { flex-basis: 74px; }
    .hb-marquee .hb-cat-img { width: 64px; height: 64px; }
    .hb-marquee .hb-cat-name { font-size: 11px; }
    /* Fewer tiles fit, so the same duration reads as faster. */
    .hb-speed-slow   { --hb-speed: 40s; }
    .hb-speed-normal { --hb-speed: 26s; }
    .hb-speed-fast   { --hb-speed: 16s; }
}

/* --------------------------------------------------------------------------
   Rail width follows the block's "Per row" setting.

   --hb-per-row is written on the wrapper by _rail.blade.php; the fallback
   keeps older markup that does not set it working unchanged.
   -------------------------------------------------------------------------- */
.hb-rail-item {
    flex: 0 0 calc((100% - (var(--hb-per-row, 5) - 1) * 14px) / var(--hb-per-row, 5));
}

@media (max-width: 1199.98px) {
    /* Never more than four on a tablet, however the block is set. */
    .hb-rail-wrap { --hb-per-row: min(4, var(--hb-per-row-set, 4)); }
    .hb-rail-item { flex-basis: calc((100% - 3 * 14px) / 4); }
}
@media (max-width: 767.98px) {
    .hb-rail-item { flex-basis: calc((100% - 2 * 12px) / 3); }
}
@media (max-width: 575.98px) {
    .hb-rail-item { flex-basis: calc((100% - 10px) / 2); }
}