/* =========================================================
   TINTLANE — PRODUCTION MOBILE HOME PAGE
   Load AFTER style.css and featured-creators.css.
   Desktop is untouched: every layout rule is inside a media query.
   ========================================================= */

@media (max-width: 768px) {
  :root {
    --tl-mobile-gutter: 16px;
    --tl-burgundy: #6a0f20;
    --tl-surface: #fff;
    --tl-shadow: 0 8px 24px rgba(46, 14, 23, .10);
  }

  html { -webkit-text-size-adjust: 100%; }

  body.home-page {
    overflow-x: hidden;
    background: var(--cream, #fbf9f6);
    /* style.css's unscoped ".home-page{padding:0}" rule (specificity 0-1-0,
       applies at every width, not just mobile) beats the plain "body"
       selector mobile-shared.css uses to reserve space above the fixed
       bottom tab bar (specificity 0-0-1) — a higher-specificity selector
       always wins regardless of stylesheet load order. Since only this
       page's <body> carries "home-page", only this page lost its bottom
       clearance, letting the copyright line render under the nav bar.
       Restated here with a selector specific enough to win. */
    padding-bottom: calc(var(--tl-bottom-nav-height, 40px) + env(safe-area-inset-bottom)) !important;
  }

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

  .home-page button,
  .home-page a,
  .home-page input { touch-action: manipulation; }

  /* ========================
     Compact, complete header
     ======================== */
  /* Single row: logo, search bar, account icon — nothing wraps to a
     second line. (Previously "display:block" made .brand a full-width
     block that pushed search/account onto their own row underneath.) */
  .home-page .navbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: max(6px, env(safe-area-inset-top)) var(--tl-mobile-gutter) 6px;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid rgba(106, 15, 32, .08);
    box-shadow: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .home-page .brand {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
  }

  /* Desktop's ".brand-link{margin-left:-30px}" (style.css) tucks the logo
     into the wide desktop header. In a ~360-400px phone header that same
     -30px shove pushes the logo mostly off the left edge of the screen —
     that's the "logo not fully visible" clipping. */
  .home-page .brand-link { margin-left: 0; }

  .home-page .brand-logo {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow:
      0 0 0 2px #fff,
      0 4px 10px rgba(106, 15, 32, .28);
  }

  /* Hidden to keep the single row tight — logo, search and account are
     the only things that need to fit here now. */
  .home-page .social-icons { display: none; }

  .home-page .social-icons a {
    display: grid;
    width: 19px;
    height: 28px;
    place-items: center;
    padding: 0;
    color: var(--tl-burgundy);
    font-size: 13px;
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  .home-page .social-icons a i,
  .home-page .social-icons a::after {
    text-decoration: none !important;
    border-bottom: 0 !important;
  }

  /* Some older desktop rules add a decorative pseudo-element to these links.
     It reads as an underline on mobile, so remove it completely. */
  .home-page .navbar .social-icons a::before,
  .home-page .navbar .social-icons a::after {
    content: none !important;
    display: none !important;
  }

  .home-page .location-btn {
    width: 100px;
    min-width: 0;
    height: 32px;
    padding: 0 7px;
    overflow: hidden;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .home-page .header-wishlist-btn,
  .home-page .cart-btn {
    display: grid;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    place-items: center;
    border-radius: 50%;
    font-size: 16px;
  }

  .home-page .cart-container {
    display: inline-grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
  }

  .home-page .cart-count {
    top: -4px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 1px 3px;
    border: 1px solid #fff;
    font-size: 9px;
    line-height: 13px;
  }

  .home-page .nav-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    align-items: center;
  }

  .home-page .search-wrap {
    display: flex;
    min-width: 0;
    height: 32px;
  }

  .home-page #catAllBtn {
    flex: 0 0 54px;
    height: 32px;
    padding: 0 6px;
    border-radius: 20px 0 0 20px;
    font-size: 11px;
  }

  .home-page #searchBar {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border-radius: 0 20px 20px 0;
    font-size: 11px;
  }

  .home-page .auth-buttons {
    display: flex;
    width: auto;
    margin: 0;
    gap: 4px;
    flex-direction: row;
  }

  .home-page .auth-buttons .signup-btn {
    width: 68px !important;
    height: 34px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 10px;
    white-space: nowrap;
  }

  /* The account button needs a little more room once its label changes from
     "Log In" to "My Account" after authentication. */
  .home-page #headerLoginBtn { width: 82px !important; }

  .home-page .dropdown { margin: 0; }

  /* Compact version of the "My Account" / seller "My Dashboard" menu —
     the desktop dropdown's 230px width and 13px/18px item padding were
     built for a mouse-driven pill button, not a small round mobile icon;
     shrinking it (and its own <a> items + divider) matches the rest of
     the tightened-up header. */
  .home-page .dropdown-content {
    right: 0;
    min-width: 168px;
    max-width: calc(100vw - 24px);
    padding: 6px 0;
    border-radius: 12px;
  }

  .home-page .dropdown-content a {
    padding: 9px 14px;
    font-size: 13px;
  }

  .home-page .dropdown-divider { margin: 4px 0; }

  .home-page .dropdown-group-label { padding: 5px 14px 3px; }

  .home-page .search-suggestions {
    top: calc(100% + 6px);
    max-height: min(52vh, 360px);
    overflow-y: auto;
  }

  /* ========================
     Hero: original art and identity, responsive scale
     ======================== */
  .home-page .hero {
    height: 410px;
    min-height: 410px;
    padding: 28px var(--tl-mobile-gutter);
    background: #fffaf7;
    overflow: hidden;
  }

  /* "cover" fills the box edge-to-edge on every side — no margins. At
     this shorter height there's only room to show part of the photo's
     top-to-bottom span, so "background-position: center 30%" biases the
     crop window toward the top, keeping the colorful feather plume (the
     actual subject) fully in frame at the cost of cropping the lower
     decorative petals/pearls, which matter less. Shorter box so
     "Featured Creators" is visible without a full scroll. */
  .home-page .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #fffaf7;
    background-image: url("../../images/hero-straight-feather.webp");
    background-position: center 38%;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
  }

  /* Just the bottom seam fade into "Featured Creators" — no corner/edge
     vignette, so the photo's own corners stay untouched as asked. Fades
     to the same near-white (#fffaf7) the hero's own background and the
     section below share. Sits below the title/button content (z-index
     2) so nothing on top of the hero is faded. */
  .home-page .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 75%, #fffaf7 100%);
  }

  .home-page .hero-inner { width: 100%; }

  .home-page .hero-title {
    max-width: 330px;
    margin: 0 auto;
    font-size: clamp(28px, 8.6vw, 38px);
    line-height: 1.12;
  }

  .home-page .hero-sub {
    max-width: 300px;
    margin: 12px auto 0;
    font-size: 15px;
    line-height: 1.5;
  }

  .home-page .hero-buttons {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 22px;
  }

  .home-page .cta-btn {
    width: auto;
    min-width: 142px;
    height: 44px;
    padding: 0 13px;
    font-size: 12px;
  }

  /* ========================
     Full-height mobile category drawer
     ======================== */
  .home-page .cat-panel {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    max-height: 0;
    overflow: hidden auto;
    background: #fff;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height .28s ease, opacity .2s ease, transform .28s ease;
  }

  .home-page .cat-panel.show-mega {
    max-height: 100dvh;
    min-height: 100dvh;
    padding-top: 116px;
    opacity: 1;
    transform: translateY(0);
  }

  .home-page .cat-panel-inner { padding: 18px var(--tl-mobile-gutter) 28px; }

  .home-page .split-select {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 12px;
    background: #fff;
  }

  .home-page .split-btn { min-height: 42px; font-size: 14px; }

  .home-page .cat-panel.show-mega .cat-mega.active {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .home-page .mega-col {
    padding: 13px 0;
    border-bottom: 1px solid rgba(106, 15, 32, .10);
  }

  .home-page .mega-col strong { font-size: 16px; }
  .home-page .mega-col a { padding: 5px 0; font-size: 14px; }

  /* ========================
     Sections and horizontal card rails
     ======================== */
  .home-page .grid-section {
    padding: 38px 0;
    overflow: hidden;
  }

  .home-page .grid-section h2 {
    margin: 0 var(--tl-mobile-gutter) 8px;
    font-size: 25px;
    line-height: 1.2;
    text-align: left;
  }

  .home-page .grid-section > p {
    margin: 0 var(--tl-mobile-gutter) 18px !important;
    max-width: 620px !important;
    font-size: 13px;
    line-height: 1.55;
    text-align: left !important;
  }

  /* Products / Services headings: style.css's ".view-all-link" is a
     centered, block-level link with its own 28px bottom margin — meant
     to sit on its own line under a centered desktop heading. On mobile
     that put it on its own full row under "Products"/"Services",
     eating extra vertical space. Turning the section itself into a
     wrapping flex row puts the heading and link on the same line (link
     right-aligned), then forces the card rail (".grid") onto its own
     line below via "flex-basis:100%". Scoped to these two IDs (not all
     ".grid-section"s) since the other sections don't have this link. */
  .home-page #products,
  .home-page #services {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
  }

  .home-page #products h2,
  .home-page #services h2 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 8px 10px var(--tl-mobile-gutter);
  }

  .home-page #products .view-all-link,
  .home-page #services .view-all-link {
    flex: 0 0 auto;
    margin: 0 var(--tl-mobile-gutter) 10px 0;
    font-size: 12px;
    white-space: nowrap;
  }

  .home-page #products .grid,
  .home-page #services .grid {
    flex: 1 1 100%;
  }

  /* Gap between the "New on TintLane" rail and "Why TintLane?" below it
     was stacking three separate spacers: the rail's own 20px bottom
     padding, ".grid-section"'s generic 38px bottom padding, and
     "#whyTintLane"'s 28px top padding — 86px total. Trimmed to a single
     small gap via ID-scoped overrides. The rail's own padding-bottom
     needs "!important": the shared rail rule just below (the
     "#featuredCreatorsGrid, #productsGrid, ... #newArrivalsGrid" block)
     sets an equal-specificity "padding: 4px gutter 20px" shorthand that
     comes AFTER this in the file, so without "!important" it silently
     re-wins and resets bottom padding back to 20px regardless of what's
     set here. */
  .home-page #newArrivals {
    /* style.css has a separate legacy "#newArrivals{padding-bottom:100px
       !important}" rule (its own block, further down the file) built for
       desktop's much taller layout — !important beats a non-!important
       declaration regardless of specificity or order, so it was silently
       overriding this. Matched with !important + a more specific selector
       (".home-page #newArrivals" outranks the plain "#newArrivals") so it
       actually wins now. */
    padding-bottom: 40px !important;
  }

  /* This used to target "#newArrivalsGrid" alone, so "From Creators You
     Follow" kept the original 20px rail bottom-padding from the shared
     rail rule below while "New on TintLane" got squeezed to 4px — the
     two rails visibly didn't match. Same value on both now. */
  .home-page #followedGrid,
  .home-page #newArrivalsGrid {
    padding-bottom: 4px !important;
  }

  /* All discovery sections become swipeable rails. The side padding lets the
     next card peek in, making the interaction immediately clear. */
  .home-page #featuredCreatorsGrid,
  .home-page #productsGrid,
  .home-page #services .grid,
  .home-page #followedGrid,
  .home-page #newArrivalsGrid {
    display: flex !important;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 4px var(--tl-mobile-gutter) 20px;
    gap: 13px;
    overflow-x: auto;
    overflow-y: hidden;
    overflow-anchor: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--tl-mobile-gutter);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
  }

  /* style.css has a legacy bare "#followedGrid, #newArrivalsGrid" rule built
     for a desktop CSS-grid layout that sets "justify-content: center". That
     property is never touched by the flex override above, so it was still
     landing on these two rails once they became flex containers here — and
     centering an overflowing flex row makes the browser's default (0)
     scroll position start partway into the content instead of at its true
     start, permanently clipping card one no matter the viewport width or
     any scroll-position reset. flex-start (repeated here with the ID
     selector's own specificity so it can't lose the cascade) is what
     actually fixes it. */
  .home-page #followedGrid,
  .home-page #newArrivalsGrid {
    justify-content: flex-start !important;
  }

  /* "Unable to load…" / "no items yet" placeholder card (featured-creators.js,
     new-arrivals.js, followed-feed.js all render the same ".featured-empty-state"
     markup). Its desktop sizing (80px padding, 32px heading, 520px max-width)
     was built for a full-width CSS-grid cell — inside these mobile flex rails
     it just became an oversized card that overflowed sideways past the
     viewport instead of wrapping to fit it. Shrunk to fit one screen width
     and given a matching mobile font scale. */
  .home-page .featured-empty-state {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    padding: 32px 20px;
    margin-bottom: 0;
    border-radius: 16px;
  }

  .home-page .featured-empty-state h2 {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .home-page .featured-empty-state p {
    font-size: 13px;
    max-width: 100%;
    line-height: 1.5;
  }

  .home-page #featuredCreatorsGrid::-webkit-scrollbar,
  .home-page #productsGrid::-webkit-scrollbar,
  .home-page #services .grid::-webkit-scrollbar,
  .home-page #followedGrid::-webkit-scrollbar,
  .home-page #newArrivalsGrid::-webkit-scrollbar { display: none; }

  .home-page #featuredCreatorsGrid > *,
  .home-page #productsGrid > *,
  .home-page #services .grid > *,
  .home-page #followedGrid > *,
  .home-page #newArrivalsGrid > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Featured creator cards: one uniform premium card height, tint behaviour
     remains exactly as defined in featured-creators.css. */
  .home-page #featuredCreators { padding-top: 42px; }
  .home-page #featuredCreators h2,
  .home-page #featuredCreators > p { text-align: center !important; }

  .home-page .featured-creator-card {
    width: 210px;
    min-width: 210px;
    height: 320px;
    min-height: 320px;
    border-radius: 18px;
  }

  /* Image was only getting 125 of the card's 320px total (39%), leaving
     the text/tint area below it (195px, 61%) with far more room than its
     actual content (name + tagline + divider + button) needed — the
     leftover space just stretched as empty gap via the body's own
     "justify-content:space-between"/"margin-top:auto" (both defined in
     featured-creators.css, untouched). Rebalanced so the image now gets
     the larger share; card's total height is unchanged. */
  .home-page .featured-cover { height: 165px; }
  .home-page .featured-body { min-height: 155px; padding: 13px; }
  .home-page .featured-shop-name { font-size: 16px; min-height: 21px; }
  .home-page .featured-tagline { height: 34px; margin: 6px 0 10px; font-size: 11px; }
  .home-page .featured-chip { left: 10px; bottom: 10px; padding: 6px 10px; font-size: 10px; }
  .home-page .featured-business { font-size: 11px; }
  .home-page .featured-visit-btn { min-height: 34px; padding: 8px 12px; font-size: 11px; }

  /* Shadow only belongs to the tinted/active state below — on the plain
     resting card this text sits on a flat white/cream background where a
     shadow has nothing to sell depth against, so it just looked like
     stray noise under the text. */
  .home-page .featured-shop-name,
  .home-page .featured-tagline,
  .home-page .featured-business {
    text-shadow: none;
  }

  /* A single shadow with a wide blur radius reads as a solid dark
     rectangle sitting behind the text at these font sizes, not a shadow
     following the letters — a tight, low-blur "contact" layer plus a
     softer, wider "ambient" layer underneath it is what actually looks
     like a natural, seamless shadow instead of a drawn box. */
  .home-page .featured-creator-card.mobile-tint .featured-shop-name,
  .home-page .featured-creator-card.mobile-tint .featured-tagline,
  .home-page .featured-creator-card.mobile-tint .featured-business {
    text-shadow:
      0 1px 1px rgba(0, 0, 0, .5),
      0 2px 6px rgba(0, 0, 0, .3);
  }

  /* Products and services: compact, denser cards (~155 x 210) closer to
     Myntra/Amazon's mobile grid density than the original 185 x 252. */
  .home-page #productsGrid .category-card,
  .home-page #services .category-card {
    width: 155px;
    min-width: 155px;
    height: 212px;
    min-height: 212px;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: var(--tl-shadow);
  }

  .home-page #productsGrid .category-card img,
  .home-page #services .category-card img {
    width: 100%;
    height: 164px;
    object-fit: cover;
  }

  .home-page #productsGrid .category-card h3,
  .home-page #services .category-card h3 {
    display: grid;
    height: 48px;
    margin: 0;
    padding: 6px 8px;
    place-items: center;
    color: var(--tl-burgundy);
    font-family: "Playfair Display", serif;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    position: relative;
    /* Was z-index:2 — tied with the ".bottom-tint" gradient div that
       script.js appends as this card's LAST child (after the <img> and
       this <h3>). At a tied z-index, later DOM order wins, so the tint
       painted over the caption text the instant it revealed on tap —
       looking like the text had vanished. Desktop's ".card h3" is
       z-index:3, safely above bottom-tint's z-index:2; matching that
       here keeps the text on top on mobile too. */
    z-index: 3;
    text-shadow: 0 1px 2px rgba(46, 14, 23, .08);
    transition: color .3s ease, text-shadow .3s ease;
  }

  /* Dynamically rendered feed cards keep the same rail rhythm while their
     existing component-specific styles continue to control their contents.
     Force every card's own margin to 0 and give the RAIL itself the
     16px gutter as real padding — simpler and more reliable than trying
     to patch a spacer element in front of the first card, and it applies
     evenly to every card, not just the first. */
  .home-page #followedGrid > *,
  .home-page #newArrivalsGrid > * {
    width: 190px;
    min-width: 190px;
    margin: 0 !important;
    scroll-margin-left: var(--tl-mobile-gutter);
  }

  .home-page #followedGrid,
  .home-page #newArrivalsGrid {
    padding-left: var(--tl-mobile-gutter) !important;
    padding-right: var(--tl-mobile-gutter) !important;
  }

  /* The rail itself has "overflow-y: hidden" (needed so the horizontal
     swipe rail doesn't grow the page's vertical scroll), but its top
     padding was only the original 4px. The ".mobile-tint" state on a card
     lifts it "translateY(-6px) scale(1.02)" plus a soft box-shadow that
     reaches a bit further still — with just 4px of clearance, the rail's
     own top edge sliced straight through the risen card (its shadow
     reading as a hard dark clipped line across the top of the row).
     Enough top padding for the lift to clear the rail's edge fixes both
     the clipping and the "dark strip" look in one go. */
  .home-page #followedGrid,
  .home-page #newArrivalsGrid {
    padding-top: 18px;
  }

  .home-page #followedGrid > .category-lux-card,
  .home-page #newArrivalsGrid > .category-lux-card {
    transform-origin: center;
  }

  /* These feed cards actually render with the ".category-lux-card" markup
     (not ".category-card" — a different, unrelated card type used
     elsewhere), so that's what needs the size reduction. At the desktop
     250px image height plus all its text, the card was ~400px tall and
     badly out of proportion on a 190px-wide mobile card — which is what
     made it look partly cut off / "not visible". */
  /* Myntra/Amazon-style card proportions: the photo is the whole point,
     so it gets most of the card, and everything below it (creator label,
     title, price) is shrunk down to a compact caption instead of
     competing with the image for attention. */
  .home-page #followedGrid .category-lux-image-wrap,
  .home-page #newArrivalsGrid .category-lux-image-wrap {
    height: 190px;
  }

  .home-page #followedGrid .category-lux-content,
  .home-page #newArrivalsGrid .category-lux-content {
    padding: 10px 12px 12px;
  }

  /* Shadow only belongs to the tinted/active state below — on the plain
     resting card this text sits on a flat white/cream background where a
     shadow has nothing to sell depth against, so it just looked like
     stray noise under the text. */
  .home-page #followedGrid .category-lux-creator,
  .home-page #newArrivalsGrid .category-lux-creator,
  .home-page #followedGrid .category-lux-title,
  .home-page #newArrivalsGrid .category-lux-title,
  .home-page #followedGrid .category-lux-price,
  .home-page #newArrivalsGrid .category-lux-price,
  .home-page #followedGrid .category-lux-rating,
  .home-page #newArrivalsGrid .category-lux-rating {
    text-shadow: none;
  }

  .home-page #followedGrid .category-lux-creator,
  .home-page #newArrivalsGrid .category-lux-creator {
    font-size: 9.5px;
    margin-bottom: 4px;
  }

  .home-page #followedGrid .category-lux-title,
  .home-page #newArrivalsGrid .category-lux-title {
    font-size: 12.5px;
    min-height: 34px;
    line-height: 1.3;
  }

  .home-page #followedGrid .category-lux-bottom,
  .home-page #newArrivalsGrid .category-lux-bottom {
    padding-top: 8px;
  }

  .home-page #followedGrid .category-lux-price,
  .home-page #newArrivalsGrid .category-lux-price {
    font-size: 14px;
  }

  .home-page #followedGrid .category-lux-rating,
  .home-page #newArrivalsGrid .category-lux-rating {
    font-size: 10.5px;
  }

  /* Once tinted, this text sits on a solid burgundy overlay instead of a
     white card background, so it gets a stronger shadow for legibility.
     The "text-shadow: none" rule above is scoped to "#followedGrid"/
     "#newArrivalsGrid" (an ID selector), which out-specifies a plain
     ".category-lux-card.mobile-tint ..." rule regardless of source
     order — so this has to repeat the same ID-scoped selectors to
     actually win once a card is tinted. */
  .home-page #followedGrid .category-lux-card.mobile-tint .category-lux-creator,
  .home-page #newArrivalsGrid .category-lux-card.mobile-tint .category-lux-creator,
  .home-page #followedGrid .category-lux-card.mobile-tint .category-lux-title,
  .home-page #newArrivalsGrid .category-lux-card.mobile-tint .category-lux-title,
  .home-page #followedGrid .category-lux-card.mobile-tint .category-lux-price,
  .home-page #newArrivalsGrid .category-lux-card.mobile-tint .category-lux-price,
  .home-page #followedGrid .category-lux-card.mobile-tint .category-lux-rating,
  .home-page #newArrivalsGrid .category-lux-card.mobile-tint .category-lux-rating {
    text-shadow:
      0 1px 1px rgba(0, 0, 0, .5),
      0 2px 6px rgba(0, 0, 0, .3);
  }

  .home-page #followedGrid .category-lux-heart,
  .home-page #newArrivalsGrid .category-lux-heart {
    width: 30px;
    height: 30px;
    top: 8px;
    right: 8px;
    font-size: 12px;
  }

  .home-page #followedGrid .category-lux-badge,
  .home-page #newArrivalsGrid .category-lux-badge {
    left: 8px;
    bottom: 8px;
    padding: 5px 10px;
    font-size: 9px;
  }

  /* Scroll-driven TintLane tint state. mobile-tint is applied by the small
     observer file when a card is the prominent card in its horizontal rail. */
  .home-page .featured-creator-card.mobile-tint {
    transform: translateY(-4px);
    box-shadow: 0 20px 42px rgba(46, 14, 23, .18);
  }

  /* The reveal panel behind the featured-creator text (".featured-body
     ::before") is defined in featured-creators.css as a "height:0% -->
     height:100%" transition — animating "height" forces a full layout
     recalculation on every frame, which is what actually made this
     specific tint noticeably choppier on a phone than every other
     rail's tint (all of which animate "transform"/"opacity" only —
     compositor-only, no layout work, hence smooth). Re-implemented here
     as a permanently-full-height layer that's just scaled vertically
     from 0 with "transform-origin:bottom" — visually identical "grows
     up from the bottom" reveal, but GPU-composited instead of
     layout-driven. Scoped to mobile only; desktop's ":hover" version in
     featured-creators.css is untouched. */
  .home-page .featured-body::before {
    top: 0;
    height: 100% !important;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .45s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
  }

  .home-page .featured-creator-card.mobile-tint .featured-body::before {
    transform: scaleY(1);
  }

  .home-page .featured-creator-card.mobile-tint .featured-shop-name,
  .home-page .featured-creator-card.mobile-tint .featured-tagline,
  .home-page .featured-creator-card.mobile-tint .featured-business { color: #fff; }

  .home-page .featured-creator-card.mobile-tint .featured-divider { background: rgba(255, 255, 255, .96); }

  .home-page .featured-creator-card.mobile-tint .featured-visit-btn {
    background: #fff;
    color: var(--tl-burgundy);
  }

  /* "Creators You Follow" / "New on TintLane" cards use the
     ".category-lux-card" markup, which only had a tint-on-:hover effect
     (no touch equivalent) — so on a phone the tint never appeared no
     matter how much you scrolled. This mirrors the existing :hover rules
     as a ".mobile-tint" state, driven by mobile-tint-observer.js. */
  .home-page .category-lux-card.mobile-tint {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 42px rgba(46, 14, 23, .20);
  }

  .home-page .category-lux-card.mobile-tint .category-lux-image { transform: scale(1.06); }

  .home-page .category-lux-card.mobile-tint .category-lux-content::before { transform: translateY(0); }

  .home-page .category-lux-card.mobile-tint .category-lux-creator,
  .home-page .category-lux-card.mobile-tint .category-lux-title,
  .home-page .category-lux-card.mobile-tint .category-lux-price,
  .home-page .category-lux-card.mobile-tint .category-lux-rating { color: #fff; }

  /* Products / Services category cards: no tint/lift/zoom highlight on
     mobile — cards stay in their plain, untouched state at all times.
     (Removed per request; the "#products .card:hover .bottom-tint" /
     "#services .card:hover .bottom-tint" opacity:1 rule in style.css is
     for real mouse hover only and doesn't apply on touch, and the
     "(hover:none),(pointer:coarse)" safety net there explicitly keeps
     the tint off if a tap ever produces a synthetic ":hover" match.) */

  /* ========================
     Story, footer and modals

     "Why TintLane?" is <section id="whyTintLane" class="brand-story">, and
     style.css's desktop rules target the ID (with "!important" on the
     padding), so a plain ".brand-story" class override here could never
     win — that's why this section stayed at full desktop size (72px
     padding, 38px heading, 60px stat gaps) and looked "too big and
     zoomed" no matter what was set here. Targeting "#whyTintLane"
     directly (with matching !important on the properties that need it)
     is what actually overrides it now.
     ======================== */
  #whyTintLane {
    padding-top: 8px !important;
    padding-left: var(--tl-mobile-gutter) !important;
    padding-right: var(--tl-mobile-gutter) !important;
    padding-bottom: 28px !important;
    margin-bottom: 28px !important;
  }

  .home-page .brand-story-inner { padding: 0; }

  #whyTintLane h3,
  #whyTintLane h2 { font-size: 20px; }

  #whyTintLane p { font-size: 13px; line-height: 1.55; }

  .home-page .story-stats { gap: 18px; margin-top: 18px; }
  .home-page .story-stat-value { font-size: 19px; }
  .home-page .story-stat-label { font-size: 10.5px; }

  /* Footer, shrunk: a 50px logo, 15px headings and 30-38px section padding
     were sized for the wide desktop bar — condensed down so the footer
     reads as a compact closing strip on a phone instead of another
     full-height section to scroll through. */
  .home-page .site-footer { margin-top: 0; padding: 14px var(--tl-mobile-gutter) 0; }

  /* Was a single stacked column (brand, then 3 full-width link lists of
     up to 6 items each) — every link got its own row, making the footer
     a tall, separately-scrollable block beneath the tab bar. The 3 link
     columns now sit 2-up in a compact grid (brand banner stays full-width
     above them, centered), and every gap/font below is trimmed to the
     smallest still-legible size — shrinks the footer without dropping
     any links. */
  .home-page .footer-top {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 16px;
    text-align: center;
    padding-bottom: 10px;
  }
  /* Explicit reset on the 2 grid columns themselves — desktop's own
     ".footer-brand{padding-right:12px}" only ever targeted the brand
     block, but without this the 2 link columns had no guaranteed-equal
     box model of their own, which is what made the 2-up grid look
     unevenly split rather than a clean symmetric 50/50. */
  .home-page .footer-top > .footer-col:nth-child(2),
  .home-page .footer-top > .footer-col:nth-child(3) {
    padding: 0;
    margin: 0;
  }
  .home-page .footer-brand {
    grid-column: 1 / -1;
    padding: 0 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .home-page .footer-logo { width: 26px; height: 26px; margin: 0 auto 5px; }
  .home-page .footer-tagline {
    max-width: 260px;
    margin: 0 auto 8px;
    font-size: 10px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .home-page .footer-social { justify-content: center; gap: 5px; }
  .home-page .footer-social a { width: 23px; height: 23px; font-size: 11px; }
  .home-page .footer-heading { font-size: 11px; margin-bottom: 4px; }
  .home-page .footer-links { align-items: center; gap: 4px; }
  .home-page .footer-links a { font-size: 10px; line-height: 1.2; }
  .home-page .footer-loc { margin-top: 4px; font-size: 9.5px; }

  /* "Marketplace" and "Help & Policies" (6 links each) pair up evenly as
     the 2 grid columns — but "Support" (only 3 links) left alone in a
     3rd row sat lopsided in the left half with empty space beside it.
     Spanning it full-width and laying its links out as a single centered
     horizontal row (instead of another half-width vertical list) closes
     that gap and reads as one deliberate, evenly-balanced closing line
     rather than a leftover column. */
  .home-page .footer-top > .footer-col:nth-child(4) {
    /* The grid's own "row-gap:16px" already provides the space above this
       row (same 16px the brand block's "border-bottom" gets below it) —
       this padding is just breathing room between the divider line and
       the link row itself, not a second gap stacked on top of it. */
    grid-column: 1 / -1;
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .home-page .footer-top > .footer-col:nth-child(4) .footer-heading { display: none; }
  .home-page .footer-top > .footer-col:nth-child(4) .footer-links {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 14px;
  }
  .home-page .footer-top > .footer-col:nth-child(4) .footer-loc {
    width: 100%;
    text-align: center;
  }
  .home-page .footer-badges { padding: 8px 0 10px; gap: 5px 12px; }
  .home-page .footer-badge { font-size: 9.5px; gap: 4px; }
  .home-page .footer-badge i { font-size: 11px; }
  .home-page .footer-bottom { flex-direction: column; text-align: center; padding: 8px 0 10px; gap: 4px; }
  .home-page .footer-bottom .footer-copy { font-size: 9.5px; }
  .home-page .footer-legal { display: none; }

  /* Modal/popup/toast mobile treatment now lives entirely in
     mobile-shared.css, unscoped — it covers ".home-page" too (a plain
     ".modal" selector matches regardless of what class is on <body>).
     A duplicate ".home-page"-scoped copy here used to just carry the
     old, less complete version at higher specificity (2 classes beats
     1), silently overriding the shared file's fixes on this page only —
     removed instead of kept in sync by hand. */

  /* Sign up / Log in modal (#signupModal — one form, toggled between
     both modes by JS via #authToggle/#signupTitle). Its own
     "#signupModal .modal-content" rule in style.css is ID-scoped
     (specificity 121), which beat mobile-shared.css's generic
     ".modal-content" mobile fix (specificity 10) — so this modal never
     actually got compacted by that pass. Its fields are also all
     inline-"style="-ed rather than class-based, which no external rule
     can override without "!important" regardless of specificity. */
  #signupModal .modal-content{
    width: min(88vw, 300px) !important;
    max-width: 300px !important;
    padding: 18px 16px !important;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    border-radius: 16px !important;
  }
  #signupModal .close{ font-size: 18px; top: 8px; right: 10px; }
  #signupModal #signupTitle{ font-size: 19px; }
  #signupModal #signupForm{ margin-top: 6px !important; }
  #signupModal #signupForm > div{ gap: 8px !important; }
  #signupModal input{
    padding: 9px 10px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
  }
  /* ".pw-field input" (Create/Confirm Password) needs extra right-side
     room kept clear for the eye-toggle button — the generic
     "#signupModal input" rule just above is equal-ID-specificity but a
     more specific selector (".pw-field" adds a class), so this wins and
     restores that space instead of the icon sitting on top of the text. */
  #signupModal .pw-field input{
    padding: 9px 34px 9px 10px !important;
  }
  #signupModal .pw-toggle{ width: 26px; height: 26px; right: 4px; }
  #signupModal .pw-toggle i{ font-size: 13px; }
  #signupModal #forgotPasswordLink{ font-size: 11px !important; }
  #signupModal button[type="submit"]{
    padding: 9px 14px !important;
    font-size: 12.5px !important;
  }
  #signupModal .auth-switch-row{ margin-top: 10px; font-size: 11.5px; }
  #signupModal #authToggleText,
  #signupModal #authToggle{ font-size: 11.5px; }
  #signupModal #signupMessage{ font-size: 11.5px; margin-top: 8px !important; }

  /* New premium-upgrade elements: logo mark, subtitle, Google button and
     the "or continue with email" divider — sized down to fit the same
     ~300px-wide mobile modal as everything else above. */
  #signupModal .auth-modal-logo{ width: 36px !important; height: 36px !important; margin: 0 auto 6px !important; }
  #signupModal .auth-modal-head{ margin-bottom: 12px; }
  #signupModal .auth-modal-subtitle{ font-size: 11px; }
  #signupModal .google-signin-btn{
    padding: 9px 10px !important;
    font-size: 12.5px !important;
    gap: 8px !important;
  }
  #signupModal .google-signin-icon{ width: 16px !important; height: 16px !important; }
  #signupModal .auth-divider{ margin: 12px 0 10px !important; font-size: 10.5px !important; }

  /* Wishlist and Cart now live in the fixed bottom tab bar (see
     mobile-shared.css), so showing them again in the header was literal
     duplication (two cart icons on screen) — hidden here. The "All ▾"
     pill is hidden too since the bottom nav's Categories tab opens the
     same panel. Account stays visible, shrunk to just the round avatar
     icon (same reasoning and rules as the non-home-page header in
     mobile-shared.css — repeated here because ".home-page …" rules carry
     higher specificity and would otherwise keep winning over that file).
     Same goes for the Products/Services/Featured Creators/New Arrivals
     strip: Categories is a bottom-nav tab now, the other two are one
     scroll away. */
  .home-page .header-icons,
  .home-page .header-quicklinks { display: none; }

  .home-page #catAllBtn { display: none; }

  .home-page .nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin-top: 0;
  }

  .home-page .search-wrap { width: 100%; }

  .home-page #searchBar {
    border-radius: 20px;
    padding: 0 16px;
    box-shadow:
      inset 0 1px 3px rgba(106, 15, 32, .08),
      inset 0 -1px 0 rgba(255, 255, 255, .6);
  }

  .home-page .auth-buttons {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
  }

  .home-page .auth-buttons .dropdown { margin: 0; }

  .home-page .auth-buttons .signup-btn {
    width: 30px !important;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    display: grid;
    place-items: center;
    gap: 0;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .8),
      0 3px 8px rgba(106, 15, 32, .18);
  }

  /* Guest state: a proper Font Awesome person-outline glyph (drawn via
     ::before so no markup change is needed) instead of the old plain-text
     smiley — reads as a real account/profile icon and sits in the site's
     own burgundy rather than a stock emoji's fixed yellow. */
  .home-page .auth-buttons .signup-btn:not(.nav-account-chip)::before {
    content: "\f007";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #fff;
  }

  .home-page .nav-account-avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .home-page .nav-account-name,
  .home-page .nav-account-caret { display: none; }
}

/* Small phones: tighter sizing. Header wishlist/cart rules below are
   harmless leftovers (those elements are hidden — see the bottom tab bar
   note above) kept only so nothing breaks if that's ever revisited. The
   account button is deliberately NOT resized here — it must stay the
   36px round icon set above, not the old 60px text-button width. */
@media (max-width: 390px) {
  .home-page .navbar { padding-right: 10px; padding-left: 10px; }
  .home-page .brand { gap: 3px; }
  .home-page .brand-logo { width: 28px; height: 28px; flex-basis: 28px; }
  .home-page .social-icons a { width: 17px; font-size: 12px; }
  .home-page .location-btn { width: 90px; padding: 0 5px; font-size: 9px; }
  .home-page .header-wishlist-btn,
  .home-page .cart-btn,
  .home-page .cart-container { width: 29px; height: 29px; min-width: 29px; font-size: 14px; }
  .home-page .nav-actions { gap: 5px; }
  .home-page .cta-btn { min-width: 132px; font-size: 11px; }
  .home-page .featured-creator-card { width: 192px; min-width: 192px; }
  .home-page #productsGrid .category-card,
  .home-page #services .category-card { width: 142px; min-width: 142px; }
}

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