/* ==========================================================================
   Canin — homepage skin. Live on index.php.

   Everything is scoped under .hm, the wrapper on that page, so this file cannot
   affect any other page even if it were loaded site-wide. style.css is not
   touched: it is 6800+ lines with the same selectors redefined in several
   places, so a separate file loaded after it is far safer than editing in place.

   The product card is NOT here — it lives once, in product-card.css, which
   index.php loads straight after this file.

   Written mobile-first: the base rules are the phone layout and the wider
   breakpoints add to them, because most Canin traffic is mobile.
   ========================================================================== */

.hm {
    --hm-radius: 18px;
    --hm-radius-sm: 13px;
    --hm-ink: #0b2545;
    --hm-line: #e3edfb;
    --hm-gap: 14px;
    --hm-ok: #047857;
    --hm-ok-bg: #ecfdf5;
    --hm-warn: #b45309;
    --hm-warn-bg: #fff8ec;
    --hm-off: #94a3b8;
    --hm-off-bg: #f1f5f9;
    display: block;
    background: var(--bg);
}

.hm .container { width: 100%; padding-inline: 14px; }

/* preview-only ribbon */
.hm-demo-flag {
    padding: 9px 14px;
    background: #fff8e1;
    border-bottom: 1px solid #f0d999;
    color: #7a5a10;
    font-size: 12px;
    text-align: center;
}
.hm-demo-flag a { color: #0757c7; font-weight: 700; text-decoration: none; }

/* --------------------------------------------------------------------- bits */
.hm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--hm-line);
    color: var(--primary-strong);
    font-size: 11.5px;
    font-weight: 700;
}
.hm-eyebrow svg { width: 13px; height: 13px; }
.hm-eyebrow-light {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

.hm-sec { padding: 26px 0 0; }
.hm-sec.hm-tinted { background: linear-gradient(180deg, #f0f6ff, var(--bg) 70%); padding-bottom: 24px; }

/* ------------------------------------------------------------------- hero */
.hm-hero {
    padding: 20px 0 4px;
    background:
        radial-gradient(900px 340px at 90% -10%, rgba(22, 119, 255, .13), transparent 60%),
        linear-gradient(180deg, #eef5ff 0%, var(--bg) 78%);
}

.hm-hero-grid { display: grid; gap: 18px; }

/* Grid children default to min-width:auto, so a long word or a wide number can
   push a track past the viewport instead of wrapping. Every grid child in this
   layout is allowed to shrink. */
.hm-hero-grid > *,
.hm-stats > *,
.hm-how-list > *,
.hm-rail > *,
.hm-cta-box > * { min-width: 0; }

.hm-hero-copy h1 {
    margin: 11px 0 8px;
    font-size: clamp(19px, 5.4vw, 26px);
    font-weight: 900;
    line-height: 1.55;
    color: var(--hm-ink);
    letter-spacing: -.3px;
}

.hm-hero-sub {
    margin: 0 0 15px;
    font-size: 13px;
    line-height: 1.95;
    color: var(--muted);
    max-width: 34em;
}

/* search — the single most important control on the page, and on mobile it is
   now visible (the live homepage hides the whole hero under 900px) */
.hm-search {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 7px 7px 7px 7px;
    background: #fff;
    border: 1.5px solid var(--hm-line);
    border-radius: 15px;
    box-shadow: 0 10px 26px rgba(16, 60, 120, .07);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.hm-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 12px 30px rgba(22, 119, 255, .16);
}
.hm-search-ic {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--muted);
}
.hm-search-ic svg { width: 17px; height: 17px; }
.hm-search input {
    min-width: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    outline: none;
}
.hm-search input::placeholder { color: #9db1cb; }
.hm-search button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(22, 119, 255, .28);
}

.hm-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 11px;
}
.hm-quick-k { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.hm-quick a {
    padding: 4px 11px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--hm-line);
    color: #23507f;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
}
.hm-quick a:hover { border-color: var(--primary); color: var(--primary); }

.hm-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 16px;
}
.hm-stats div {
    padding: 11px 6px;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius-sm);
    text-align: center;
}
.hm-stats strong {
    display: block;
    font-size: 17px;
    font-weight: 900;
    color: var(--primary-strong);
    line-height: 1.3;
}
.hm-stats span {
    display: block;
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Banner keeps the existing slider markup and classes.
   min-height/margin are reset on purpose: style.css gives .home-banner-slider a
   min-height (210px under 768px, 260px above). Combined with aspect-ratio the
   browser satisfies BOTH by widening the box — 210 x 16/9 = 373px — which
   overflowed the container. Zeroing min-height lets the ratio drive the size. */
.hm-hero-banner .home-banner-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    border-radius: var(--hm-radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--surface-2);
    box-shadow: 0 10px 26px rgba(16, 60, 120, .1);
}
.hm-hero-banner .home-banner-slide {
    position: absolute;
    inset: 0;
    padding: 0;              /* style.css pads the slide for overlaid text */
    opacity: 0;
    transform: none;
    transition: opacity .45s ease;
}
.hm-hero-banner .home-banner-slide.active { opacity: 1; transform: none; }
/* the slide carries no caption here, so the dark scrim would only mute the art */
.hm-hero-banner .home-banner-slide::after { display: none; }
.hm-hero-banner .home-banner-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-hero-banner .banner-mobile { display: none; }
.hm-hero-banner .banner-desktop { display: block; }
.hm-hero-banner .home-banner-dots {
    position: absolute;
    inset-inline: 0;
    bottom: 9px;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 3;
}
.hm-hero-banner .home-banner-dots button {
    width: 7px; height: 7px; padding: 0;
    border: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
}
.hm-hero-banner .home-banner-dots button.active { background: #fff; width: 18px; }
.hm-hero-banner .banner-arrows { display: none; }

/* --------------------------------------------------------------- how it works */
.hm-how { padding: 22px 0 0; }
.hm-how-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: hmstep;
}
.hm-how-list li {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "ic title" "ic desc";
    align-items: center;
    gap: 0 11px;
    padding: 12px 13px;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius-sm);
    counter-increment: hmstep;
}
.hm-how-ic {
    grid-area: ic;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--surface-2);
    color: var(--primary-strong);
}
.hm-how-ic svg { width: 18px; height: 18px; }
.hm-how-list b {
    grid-area: title;
    font-size: 13px;
    font-weight: 800;
    color: var(--hm-ink);
}
.hm-how-list li > span:last-child {
    grid-area: desc;
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.7;
}
.hm-how-list li::after {
    content: counter(hmstep);
    position: absolute;
    inset-inline-end: 12px;
    top: 10px;
    font-size: 22px;
    font-weight: 900;
    color: rgba(22, 119, 255, .1);
    line-height: 1;
}

/* --------------------------------------------------------------- rail header */
.hm-rail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.hm-kicker {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 2px;
}
.hm-rail-title h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    color: var(--hm-ink);
    line-height: 1.5;
}
.hm-rail-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.hm-more {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}
.hm-arrows { display: none; gap: 5px; }
.hm-arrow {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--hm-line);
    border-radius: 9px;
    background: #fff;
    color: var(--primary-strong);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s ease, opacity .2s ease;
}
.hm-arrow:hover { border-color: var(--primary); }
.hm-arrow.is-off { opacity: .35; cursor: default; }

/* ---------------------------------------------------------------------- rails */
.hm-rail {
    display: grid;
    grid-auto-flow: column;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.hm-rail::-webkit-scrollbar { display: none; }
.hm-rail > * { scroll-snap-align: start; }

.hm-rail-products { grid-auto-columns: 63%; }
.hm-rail-cats { grid-auto-columns: 30%; }
.hm-rail-vendors { grid-auto-columns: 29%; }

/* The product card used to be declared here. It now lives once, in
   assets/css/product-card.css, which index.php loads right after this file.
   See the header of that file for why the duplication was removed. */

/* -------------------------------------------------------------- category card */
/* The image runs the full width of the card instead of sitting in a 52px
   circle. The source files are 1254x1254 squares, so a circle with
   object-fit:cover was showing them ~20x smaller than their real size and
   clipping the corners off. Full width + contain shows the whole product.
   The card keeps its border: the photos are on white, so without it two
   neighbouring categories bleed into each other. */
.hm-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 0 11px;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius-sm);
    overflow: hidden;            /* clips the image to the rounded corner */
    text-decoration: none;
    text-align: center;
    transition: border-color .2s ease, transform .2s ease;
}
.hm-cat:hover { border-color: var(--primary); transform: translateY(-2px); }
.hm-cat-img {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    color: var(--primary);
    overflow: hidden;
}
.hm-cat-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
/* placeholder for a category with no image: scales with the box now that the
   box is no longer a fixed 52px, otherwise it would float in a large blank */
.hm-cat-img svg { width: 34%; height: 34%; opacity: .45; }
.hm-cat-name {
    padding: 0 6px;              /* card padding is 0 now; keep names off the edge */
    font-size: 10.5px;
    font-weight: 700;
    color: var(--hm-ink);
    line-height: 1.6;
}

/* ---------------------------------------------------------------- vendor card */
.hm-vendor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius-sm);
    text-decoration: none;
    text-align: center;
    transition: border-color .2s ease, transform .2s ease;
}
.hm-vendor:hover { border-color: var(--primary); transform: translateY(-2px); }
/* The logo frame is a rounded square, not a circle. Four of the five shop
   logos on file are square (1378², 1860², 640², 1080²) and a circle clipped
   their corners, so the artwork had to shrink to survive the crop. The square
   frame keeps the whole logo and matches the vendors page, which already uses
   one. Sizes went 50 -> 64 here and 58 -> 76 on desktop; object-fit stays
   `contain`, so nothing is ever stretched. */
.hm-vendor-logo {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--surface-2);
    border: 1px solid var(--hm-line);
    overflow: hidden;
}
.hm-vendor-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
/* fallback when a shop has no logo yet — vendor #10 is exactly this case */
.hm-vendor-initials { color: var(--primary-strong); font-weight: 900; font-size: 18px; letter-spacing: -.5px; }
.hm-vendor-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--hm-ink);
    line-height: 1.5;
}
.hm-vendor-city { font-size: 9.5px; color: var(--muted); }

/* --------------------------------------------------------- verified seal */
/* Sits inline with the shop name at 10.5px on a phone, so it is sized in em
   and never wraps onto its own line. Markup comes from
   caninVendorVerifiedMark() in includes/functions.php, which returns an empty
   string for any shop whose status is not 'approved'. */
.canin-verified {
    display: inline-flex;
    flex: none;
    align-items: center;
    color: var(--primary);
    vertical-align: -.12em;
}
.canin-verified svg { width: 1.15em; height: 1.15em; display: block; }

/* --------------------------------------------------------------- promo / grid */
.hm-promo .container { display: grid; gap: 10px; }
.hm-promo-item { display: block; border-radius: var(--hm-radius); overflow: hidden; }
.hm-promo-item img { width: 100%; height: auto; display: block; }
.hm-promo-item.device-desktop { display: none; }

.hm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hm-grid-item { display: block; border-radius: var(--hm-radius-sm); overflow: hidden; }
.hm-grid-item img { width: 100%; height: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }

/* ------------------------------------------------------------------- app box */
/* بازار فقط اندروید است، پس این بخش روی دسکتاپ اصلاً وجود ندارد. مثل بج
   مشترک در style.css، شرط یک media query است نه تشخیص User-Agent سمت سرور —
   تا HTML برای همه یکسان بماند و پشت CDN اشتباه کش نشود.
   عمداً آبی پررنگ نیست: باکس «ویژه فروشندگان» انتهای صفحه گرادیان برند را
   دارد و اگر این هم همان باشد، دو دعوتِ متفاوت با یک صدا حرف می‌زنند و
   هیچ‌کدام دیده نمی‌شود. این یکی برای خریدار است و آرام می‌ماند. */
.hm-app { display: none; }

@media (max-width: 900px) {
    .hm-app { display: block; }

    /* تیره، نه گرادیان آبی برند: باکس «ویژه فروشندگان» انتهای همین صفحه آبی
       است و دو جعبه‌ی هم‌رنگ سر توجه با هم دعوا می‌کنند. سبزِ لهجه‌ای هم با
       رنگ خود بازار می‌خواند، پس دکمه غریبه به نظر نمی‌رسد. */
    .hm-app-box {
        position: relative;
        overflow: hidden;
        padding: 15px;
        border-radius: 18px;
        color: #fff;
        background:
            radial-gradient(circle at 88% 4%, rgba(76, 175, 80, .26), transparent 44%),
            radial-gradient(circle at 4% 96%, rgba(22, 119, 255, .30), transparent 42%),
            linear-gradient(150deg, #0b2545 0%, #16325e 100%);
        box-shadow: 0 14px 30px rgba(6, 25, 55, .32);
    }
    .hm-app-dots {
        position: absolute;
        inset: 0;
        opacity: .35;
        background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px);
        background-size: 15px 15px;
    }

    .hm-app-in { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }

    /* min-width:0 لازم است وگرنه آیتم فلکس از محتوایش کوچک‌تر نمی‌شود و روی
       گوشی باریک سرریز افقی می‌دهد — همان تله‌ای که قبلاً خوردیم. */
    .hm-app-copy { flex: 1; min-width: 0; }

    .hm-app-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 8px;
        padding: 3px 9px;
        border-radius: 999px;
        border: 1px solid rgba(76, 175, 80, .34);
        background: rgba(76, 175, 80, .18);
        color: #9ce8a6;
        font-size: 9px;
        font-weight: 800;
    }
    .hm-app-eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: #5fd36c; }

    .hm-app-copy h2 { font-size: 13.5px; margin: 0 0 6px; line-height: 1.72; font-weight: 800; }
    .hm-app-copy p  { font-size: 10px; margin: 0 0 9px; line-height: 1.95; color: rgba(255, 255, 255, .76); }

    .hm-app-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 11px; padding: 0; list-style: none; }
    .hm-app-chips li {
        padding: 3px 7px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, .14);
        background: rgba(255, 255, 255, .09);
        color: #dbe8fb;
        font-size: 8.5px;
        font-weight: 700;
    }

    /* بج داخل این جعبه کوچک‌تر از فوتر است، چون ستون متن اینجا باریک‌تر است. */
    .hm-app-badge img { height: 34px; }

    /* ماکت گوشی. شیب کم به جعبه حرکت می‌دهد بدون اینکه تصویر را ناخوانا کند. */
    .hm-app-mock {
        flex: none;
        width: 98px;
        padding: 4px;
        border-radius: 15px;
        transform: rotate(-4deg);
        background: linear-gradient(160deg, #3b5788, #16294a);
        box-shadow: 0 14px 26px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .12);
    }
    .hm-app-notch {
        display: block;
        width: 26px;
        height: 3px;
        margin: 2px auto;
        border-radius: 2px;
        background: rgba(255, 255, 255, .32);
    }
    .hm-app-scr { display: block; position: relative; border-radius: 11px; overflow: hidden; background: #fff; }
    .hm-app-scr img { display: block; width: 100%; height: auto; }
    .hm-app-glare {
        position: absolute;
        inset: 0;
        background: linear-gradient(200deg, rgba(255, 255, 255, .20) 0%, transparent 40%);
    }
}

/* زیر ۳۶۰ پیکسل ستون متن آن‌قدر باریک می‌شود که عنوان چهار خط می‌شکند؛
   آنجا گوشی می‌رود زیر متن و تمام عرض را می‌گیرد. */
@media (max-width: 359px) {
    .hm-app-in { display: block; }
    .hm-app-mock { width: 150px; margin: 12px auto 0; }
}

/* ----------------------------------------------------------------- vendor CTA */
.hm-cta { padding-bottom: 30px; }
.hm-cta-box {
    padding: 20px 16px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 255, 255, .16), transparent 45%),
        linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
    color: #fff;
    box-shadow: 0 16px 34px rgba(7, 87, 199, .24);
}
.hm-cta-copy h2 {
    margin: 10px 0 7px;
    font-size: clamp(17px, 4.6vw, 22px);
    font-weight: 900;
    line-height: 1.6;
    color: #fff;
}
.hm-cta-copy p {
    margin: 0 0 15px;
    font-size: 12.5px;
    line-height: 1.95;
    color: rgba(255, 255, 255, .9);
}
.hm-cta-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-btn-solid, .hm-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}
.hm-btn-solid { background: #fff; color: var(--primary-strong); box-shadow: 0 8px 20px rgba(0, 0, 0, .14); }
.hm-btn-ghost { border: 1px solid rgba(255, 255, 255, .45); color: #fff; }

.hm-cta-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 10px;
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .22);
    list-style: none;
}
.hm-cta-points li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .94);
    line-height: 1.6;
}
.hm-cta-points svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 3px; }

/* ======================================================== tablet and above */
@media (min-width: 640px) {
    .hm .container { padding-inline: 20px; }
    .hm-rail-products { grid-auto-columns: 43%; }
    .hm-rail-cats { grid-auto-columns: 21%; }
    .hm-rail-vendors { grid-auto-columns: 20%; }
    .hm-how-list { grid-template-columns: repeat(3, 1fr); }
    .hm-grid { grid-template-columns: repeat(4, 1fr); }
    .hm-cta-box { padding: 26px 24px; }
}

/* ============================================================== desktop */
@media (min-width: 901px) {
    .hm .container { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }

    .hm-hero { padding: 34px 0 10px; }
    .hm-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        align-items: center;
        gap: 34px;
    }
    .hm-hero-copy h1 { font-size: clamp(26px, 2.7vw, 36px); margin: 14px 0 12px; }
    .hm-hero-sub { font-size: 15px; margin-bottom: 20px; }

    .hm-search { padding: 9px; border-radius: 17px; }
    .hm-search input { font-size: 14.5px; }
    .hm-search button { min-height: 46px; padding: 0 26px; font-size: 14px; }
    .hm-search-ic { width: 34px; height: 34px; }
    .hm-search-ic svg { width: 19px; height: 19px; }

    .hm-quick-k, .hm-quick a { font-size: 12.5px; }
    .hm-stats { gap: 12px; margin-top: 22px; }
    .hm-stats div { padding: 14px 10px; }
    .hm-stats strong { font-size: 22px; }
    .hm-stats span { font-size: 11.5px; }

    .hm-hero-banner .banner-arrows {
        display: flex;
        gap: 6px;
        position: absolute;
        inset-inline-end: 12px;
        bottom: 12px;
        z-index: 3;
    }
    .hm-hero-banner .slider-arrow {
        width: 30px; height: 30px;
        border: 0; border-radius: 9px;
        background: rgba(255, 255, 255, .9);
        color: var(--primary-strong);
        font-size: 17px; line-height: 1; cursor: pointer;
    }

    .hm-sec { padding-top: 40px; }
    .hm-sec.hm-tinted { padding-bottom: 38px; }
    .hm-how { padding-top: 34px; }
    .hm-how-list { gap: 12px; }
    .hm-how-list li { padding: 15px 16px; }
    .hm-how-ic { width: 44px; height: 44px; }
    .hm-how-ic svg { width: 21px; height: 21px; }
    .hm-how-list b { font-size: 14.5px; }
    .hm-how-list li > span:last-child { font-size: 12.5px; }

    .hm-rail-head { margin-bottom: 16px; }
    .hm-rail-title h2 { font-size: 20px; }
    .hm-kicker { font-size: 12px; }
    .hm-more { font-size: 13px; }
    .hm-arrows { display: flex; }

    .hm-rail { gap: 14px; }
    .hm-rail-products { grid-auto-columns: calc((100% - 4 * 14px) / 5); }
    .hm-rail-cats { grid-auto-columns: calc((100% - 7 * 14px) / 8); }
    .hm-rail-vendors { grid-auto-columns: calc((100% - 6 * 14px) / 7); }

    /* .hm-cat-img is fluid now (100% of the card, square). The old fixed
       62px override lived here and would cancel that out. */
    .hm-cat-img img { padding: 8px; }
    .hm-cat-name, .hm-vendor-name { font-size: 12px; }
    .hm-vendor-logo { width: 76px; height: 76px; border-radius: 18px; }
    .hm-vendor-logo img { padding: 7px; }
    .hm-vendor-initials { font-size: 22px; }

    .hm-promo .container { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .hm-promo-item.device-desktop { display: block; }
    .hm-promo-item.device-mobile { display: none; }
    .hm-grid { gap: 14px; }

    .hm-cta { padding-bottom: 46px; }
    .hm-cta-box {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        align-items: center;
        gap: 34px;
        padding: 34px 32px;
    }
    .hm-cta-copy h2 { font-size: 27px; }
    .hm-cta-copy p { font-size: 14px; }
    .hm-cta-points {
        grid-template-columns: 1fr;
        margin: 0;
        padding: 0 0 0 0;
        border-top: 0;
        border-inline-start: 1px solid rgba(255, 255, 255, .22);
        padding-inline-start: 28px;
    }
    .hm-cta-points li { font-size: 13px; }
}

/* the desktop/mobile banner swap follows the existing slider script */
@media (max-width: 900px) {
    .hm-hero-banner .banner-mobile { display: block; }
    .hm-hero-banner .banner-desktop { display: none; }
    .hm-promo-item.device-mobile { display: block; }
}

/* ==========================================================================
   MOBILE-ONLY LAYOUT CHANGES
   Everything below is confined to this query, so the desktop layout above
   (>= 901px) is byte-for-byte unaffected. No markup was changed to achieve
   any of it — the order is done entirely with flex/order.
   ========================================================================== */
@media (max-width: 900px) {

    /* 1. headline and its sub-line are hidden on phones: the banner already
          carries the message and the search is what the user came for.
          display:none keeps them in the DOM, so the page keeps its H1 for
          search engines — only the visual is removed. */
    .hm-hero-copy h1,
    .hm-hero-sub { display: none; }

    /* 2. hero order becomes: banner -> stats -> search */
    .hm-hero-grid { gap: 14px; }
    .hm-hero-grid > .hm-hero-banner { order: -1; }

    .hm-hero-copy { display: flex; flex-direction: column; }
    .hm-hero-copy > .hm-stats   { order: 1; margin: 0 0 14px; }
    .hm-hero-copy > .hm-eyebrow { order: 2; align-self: flex-start; margin-bottom: 9px; }
    .hm-hero-copy > .hm-search  { order: 3; }

    /* quick-search chips are dropped on phones: they duplicate the categories
       rail further down and cost two lines right under the search box */
    .hm-quick { display: none; }

    /* 3. categories come before vendors on phones. .hm is turned into a column
          flex container purely so the two sections can be reordered; every
          section already spaces itself with padding (no vertical margins), so
          stacking behaviour is unchanged. */
    .hm { display: flex; flex-direction: column; }
    .hm > * { order: 10; }             /* everything not listed keeps DOM order */
    .hm > .hm-demo-flag { order: 0; }
    .hm > .hm-hero      { order: 1; }
    .hm > .hm-how       { order: 2; }
    .hm > .hm-cats      { order: 3; }
    /* newest products and vendors trade places on phones */
    .hm > .hm-newest    { order: 4; }
    .hm > .hm-promo     { order: 5; }
    .hm > .hm-vendors   { order: 6; }

    /* 4. two cards per screen instead of 1.6. The card's own phone sizing
          (4:3 image, tighter spacing) moved to product-card.css; only the rail
          track width is a homepage concern and stays here. */
    .hm-rail-products { grid-auto-columns: 48%; }
}

@media (prefers-reduced-motion: reduce) {
    .hm * { transition: none !important; }
    /* .hm-card is handled by product-card.css's own reduced-motion block */
    .hm-cat:hover, .hm-vendor:hover { transform: none; }
}