.tf-sp-7 {
  padding-top: 15px;
}
/* The homepage stacks many product-carousel sections back to back (Deal Of
   The Day, each featured category - alternating grid/row style - Top 20,
   Featured products, Top selling product, On-sale product, Recently
   Viewed). The vendored theme's own .tf-sp-2 is a flat 50px/50px at every
   breakpoint (no responsive scaling at all - confirmed, styles.css defines
   it once with no media query), so two adjacent sections leave a full
   100px dead gap between them, repeated once per section - excessive once
   several near-identical carousels are stacked, and proportionally even
   more wasteful on a short mobile viewport. Scoped to the homepage only
   (this file only loads on index.html) rather than styles.css, which every
   other page also uses .tf-sp-2 on for its own (single, non-stacked)
   section spacing. */
.tf-sp-2 {
  padding-top: 10px;
  padding-bottom: 10px;
}
@media (max-width: 575.98px) {
  .tf-sp-2 {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
/* Reported: the wishlist heart icon is missing next to the cart icon on
   every homepage product card at mobile widths (both the row-style cards -
   Clothes etc. - and the grid-style overlay cards - Jewellery etc.).
   Cause: the theme's own markup puts `d-none d-sm-block` on every wishlist
   `<li>` (Bootstrap utility - hidden below 576px, shown from 576px up), a
   deliberate vendored decision to declutter a 2-icon cluster on narrow
   cards. Per direct request, show it at every width instead - same
   `display: block` Bootstrap's own d-sm-block would set, just without the
   under-576px cutoff. Needs !important to beat Bootstrap's own d-none
   (which carries it too). */
.wishlist.d-none {
  display: block !important;
}
/* Reported: too much vertical gap between stacked row-style product cards
   (Clothes etc. rendered as a single vertical list on mobile, multiple
   .card-product li's inside one .product-list-wrap). The vendored default
   (styles.css) gives every non-last li a 20px margin-bottom + 20px
   padding-bottom (40px total, plus the divider border) - tuned for a
   wider desktop list, proportionally large next to the tightened card
   heights fixed elsewhere in this file. Halved to 12px/12px (24px total)
   to match this file's other internal spacing (10-14px, see the .gap
   values above/below). Scoped to the featured-category row sections only,
   not every .product-list-wrap sitewide (e.g. the minicart list uses the
   same class and wasn't reported). */
.home-category-section .product-list-wrap > li:not(:last-child) {
  margin-bottom: 12px;
  padding-bottom: 12px;
}
/* The featured-category sections specifically (Apparel/Beauty & Personal
   Care/Electronics, alternating grid/row style - .home-category-section,
   added on both templates in index.html and carried along by every JS
   clone hydrateFeaturedCategoryProducts() makes for a 3rd+ category) get
   their own padding instead of the shared .tf-sp-2 value above: no top
   padding at all (the previous section's own bottom padding already
   separates them), and the vendored theme's original 50px kept on the
   bottom - both per direct request, overriding the generic rule above. */
.home-category-section {
  padding-top: 0;
  padding-bottom: 50px;
}
/* The "row" variant of these sections (Clothes, and any other category
   rendered via feature-category-row-slider - .card-product.style-row.row-small-2)
   has its own vendored @media (max-width: 425px) rule (styles.css) that flips
   the card from a horizontal thumbnail+info row into a stacked column with an
   unconstrained full-width image - on a real phone this balloons each card's
   height far past the grid-style category sections (Jewellery etc.) sitting
   right above/below it. Per direct request, mobile should look like desktop
   here: keep the row layout and the 122px thumbnail cap. Selectors match
   styles.css's own class count + 1 (.home-category-section prefix) so this
   wins on specificity outright, no !important or media query needed. */
.home-category-section .card-product.style-row.row-small-2 {
  flex-direction: row;
}
.home-category-section .card-product.style-row.row-small-2 .card-product-wrapper {
  max-width: 122px;
}
/* Per direct request 2026-09-16 ("768px / Bags & Footwear price smaller"):
   the default .price-text size (20px, styles.css) reads too large at
   tablet width - the info column has noticeably less available width there
   than at desktop, right where the row layout above keeps the 122px image
   at full size regardless of viewport. Scoped to this file's usual tablet
   range (576-1199.98px) rather than shrinking the default site-wide. */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .home-category-section .price-wrap .new-price {
    font-size: 16px;
  }
  .home-category-section .price-wrap .old-price {
    font-size: 13px;
  }
}
/* Real bug, confirmed via headless Chrome measurement (not guesswork): every
   .style-row.row-small-2 card (Clothes-style featured categories, Top
   Selling) is a flex row (image left, text column right). With the default
   align-items:stretch, the text column stretches to match the image's fixed
   height (122px/170px, from aspect-ratio:1 + the width caps above/below),
   but its real content - name + price + cart/wishlist icons - needs more
   than that (measured: 140px content in a 122px box). This file's own
   .card-product .card-product-info { overflow: hidden } rule (further down,
   added for a different card shape) was silently clipping the icon row's
   bottom half off-screen as a result - worse the bigger the icons got
   (harmless at the original 24px, very visible at 35px+). Let the text
   column size to its own content instead of stretching, and stop clipping
   it now that there's nothing left to clip. */
.card-product.style-row.row-small-2 {
  align-items: flex-start;
}
.card-product.style-row.row-small-2 .card-product-info {
  overflow: visible;
  align-content: start;
}
/* align-content:start (added above, alongside overflow:visible) - the
   min-height rules below (needed so short single-line titles don't clip the
   icon row on taller-title cards) create leftover space inside
   .card-product-info whenever a card's real content is shorter than the
   forced min-height. Confirmed via headless Chrome: CSS Grid's default
   align-content:normal treats that leftover as free space to distribute
   INTO the auto-sized rows (.box-title's two rows, and .group-btn's two
   rows nested inside it) rather than collapsing them to content size - so
   the "gap" between title/price and between price/icons appeared much
   larger than the actual `gap: 10px` on either grid, growing anywhere the
   min-height overshot real content (up to ~90px on short single-line
   titles). This is what was reported as pricing/add-to-cart "not showing
   nicely" even after the min-height values themselves were tuned tighter
   (below/further down). align-content:start stops the row tracks from
   stretching, so leftover space collects below the icon row (invisible
   dead space) instead of inflating the two visible gaps - measured:
   box-title's height drops to its true natural size and both gaps become
   the real 10px, with zero clipping at any breakpoint. */
/* align-items:flex-start + overflow:visible above stop the clipping but
   don't fully solve it on their own: .card-product-info is nested
   grid-in-grid-in-flex (.card-product-info > .box-title > .group-btn, all
   display:grid), and confirmed via direct headless Chrome testing, this
   specific nesting doesn't reliably auto-size to its own content's real
   height in Chrome - .card-product-info's box stayed ~18px short of its own
   measured scrollHeight even with overflow:visible and no other height
   constraint found on any element in the chain (tested + ruled out:
   group-btn's own height/min-height, box-title's grid-template-rows, every
   explicit height up to the <li> - none of them were the actual cause, and
   even min-height:min-content on card-product-info measured no better than
   no fix at all - only an explicit min-height in px reliably worked).
   Explicit min-height per breakpoint - the only current consumer of the
   un-overridden values below is Top Selling (home-category-section's row
   cards get min-height:0 further down, confirmed via grep 2026-09-16: the
   "row" ProductCard variant is used in exactly two places, and that's the
   other one). Per direct request 2026-09-16 ("card-product-info and
   card-product-wrapper size should be equal [at] desktop"), the base and
   1200px+ values are now set to exactly 170px, matching Top Selling's own
   card-product-wrapper (image) max-width at both those breakpoints (it has
   no 1200px-specific value of its own, so 170px applies at both) - real
   content only needs 143px at this section's font sizes, so 170px still
   carries the same clipping-safety-margin reasoning as the original tuned
   values, just tightened to equal the image exactly instead of overshooting
   it by 25-45px. Mobile (<576px) matched the same way per direct follow-up
   request - 100px, equal to the wrapper's own mobile max-width - but only
   safe to do once the mobile caption/name/price/icon tier (further down)
   was ALSO retuned smaller: real content measured 125px at the previous
   mobile text sizing, taller than 100px, which would have clipped the icon
   row if min-height had been dropped to 100px without that companion fix. */
.card-product.style-row.row-small-2 .card-product-info {
  min-height: 170px;
}
@media (max-width: 575.98px) {
  .card-product.style-row.row-small-2 .card-product-info {
    min-height: 100px;
  }
}
@media (min-width: 1200px) {
  .card-product.style-row.row-small-2 .card-product-info {
    min-height: 170px;
  }
}
/* The generic min-height block above was tuned to Top Selling's worst case
   (larger 18px/26px name/price fonts) and applied to every .style-row.row-
   small-2 card site-wide, including the featured-category sections
   (Clothes, and any other .home-category-section rendered this way), whose
   name/price fonts are the smaller default size and need noticeably less
   room - measured via headless Chrome across every product actually
   rendered there (name text varies): 165px worst case at mobile icon size,
   154px at tablet, 168px at desktop. Forcing Top Selling's larger min-height
   onto these smaller-font cards left 30-45px of dead vertical space between
   the price and the cart/wishlist icons - reported as pricing/add-to-cart
   "not showing nicely". More specific than the generic rule above (one more
   class, .home-category-section), so it wins outright for these sections
   without touching Top Selling's own already-tuned values. */
/* Originally 170px/180px/185px per breakpoint (retuned down from the
   Top-Selling-sized 195/200/215px above), then dropped to 0 on mobile only
   - reported again afterwards: still too much gap on DESKTOP too, same
   cause. min-height forces .card-product-info taller than a given card's
   real content whenever that content is shorter than the worst-case title
   measured across the whole section - the 12px/12px row-divider spacing
   (further up this file) then sits below that extra dead space, reading as
   one big gap, at every breakpoint, not just mobile.
   The min-height itself was originally a workaround for a specific Chrome
   quirk (this grid-in-grid-in-flex nesting under-measuring its own content
   by ~18px, see the long comment above the base min-height rule above) -
   but that was measured BEFORE align-content:start existed on
   .card-product-info (added earlier this session, further up this file).
   Re-tested removing min-height entirely at every breakpoint with that in
   place: zero clipping across all 30 real cards in this section from
   320px to 1920px (Playwright, min-height:0, checked every card's icon row
   and price against its own box's bottom edge) - the quirk doesn't
   reproduce anywhere, so the workaround isn't needed here at all now. */
.home-category-section .card-product.style-row.row-small-2 .card-product-info {
  min-height: 0;
}
.flat-title.flat-title-deal {
  margin-bottom: 12px;
}
.flat-title .view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.flat-title .view-all-link i {
  font-size: 14px;
  line-height: 1;
}
.card-product .card-product-info {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.card-product .card-product-wrapper.overflow-visible {
  width: 100%;
  box-sizing: border-box;
}
/* True vertical center for every card's icon OVERLAY (the absolutely-
   positioned cart/wishlist/quickview icons floating on the product image) -
   the wrapper is just the product image itself here, so plain
   50%/translateY(-50%) lands the icon stack on the image's actual center.
   Explicitly excludes .flex-row: that's the OTHER .list-product-btn variant
   (row-style cards' icons, inline next to the price inside .group-btn, not
   an overlay at all) - this rule's position:relative top:50% was bleeding
   into it too (same class name, broader selector than intended), pushing
   those icons down by 50% of their own container's height and out of the
   visible card. Root cause of the "icons not showing" bug on Clothes/
   Beauty/Top Selling - not the box height, which every other change in
   this file chased instead before this was found. */
.card-product .list-product-btn:not(.flex-row) {
  top: 50% !important;
  right: 15px !important;
  transform: translateY(-50%);
  gap: 4px;
}
/* The theme's default column stack for list-product-btn's icons is sized for
   the original wider 4-per-row card; measured against Deal Of The Day's
   5-per-row main image at each breakpoint, that column (127px-205px tall)
   is taller than the image itself (114px-194px). Keep it vertical but
   shrink icons/gap so the stack fits under the image at realistic widths
   (375px and up). Deal Of The Day's own wrapper isn't just the image though
   - it also has the .tf-product-view-thumbs gallery row stacked below it
   (see index.html/.product-thumb-slider), a fixed 10px gap plus the
   thumbnail row itself - so top:50% centers on wrapper+thumbnail-row+gap
   there, not the main image alone. Subtract half of that to land on the
   main image's actual center instead.
   Two bugs confirmed via headless Chrome at 425x785 (reported: icons
   floating well below center): (1) this selector (2 classes) was LESS
   specific than the base `.card-product .list-product-btn:not(.flex-row)`
   rule above it (3 classes, :not() counts its argument) - both carry
   !important, so the base rule's plain top:50% always won outright and
   this override never actually applied at any breakpoint. Fixed by
   matching + exceeding the base rule's selector shape. (2) the "constant
   55px" thumbnail-row assumption was only true at this site's >=1200px
   breakpoint (45px thumbs, home.css below); the thumbnail row is actually
   30px on mobile (<=575.98px) and the vendored default 50px in between -
   so the offset needs to vary by breakpoint too, not just the specificity
   fix alone. */
.slider-thumb-deal .card-product .list-product-btn:not(.flex-row) {
  top: calc(50% - 20px) !important;
}
@media (min-width: 576px) and (max-width: 1199.98px) {
  .slider-thumb-deal .card-product .list-product-btn:not(.flex-row) {
    top: calc(50% - 30px) !important;
  }
}
@media (min-width: 1200px) {
  .slider-thumb-deal .card-product .list-product-btn:not(.flex-row) {
    top: calc(50% - 27.5px) !important;
  }
}
.card-product .list-product-btn .box-icon {
  width: 24px;
  height: 24px;
}
.card-product .list-product-btn .box-icon .icon {
  font-size: 11px;
}
/* Per direct request: bump the icon overlay's box-icon back up to 35px on
   mobile (the 24px/11px compact sizing above stays for tablet/desktop grid
   cards, which have more icons stacked per column - see comment above). */
@media (max-width: 575.98px) {
  .card-product .list-product-btn .box-icon {
    width: 35px;
    height: 35px;
  }
  .card-product .list-product-btn .box-icon .icon {
    font-size: 16px;
  }
}
/* Per direct request: match every other homepage card's icon overlay to
   Deal Of The Day's size on desktop, where there's plenty of room under the
   (larger, at this breakpoint) main image; mobile is already unified at
   35px (rule above applies to every card already). No longer scoped to
   .slider-thumb-deal (Deal Of The Day's own swiper) - was originally
   Deal-Of-The-Day-only, now applies to every .card-product per direct
   follow-up request.
   Sizing itself (was 40px here, then a homepage-only 32px override) now
   lives directly in frontend/css/styles.css's own @media (min-width: 1200px)
   .card-product .box-icon rule instead of being duplicated here - this
   selector only applies .list-product-btn, a subset home.css was scoped to,
   but styles.css's own version is unscoped and loads on every page (Shop,
   Product, Cart, ...), where home.css does not. Keeping the 32px value only
   here meant the homepage matched Deal Of The Day but every other page
   still showed the vendored 40px - reported as icons "very small, not
   matched width/height like other screens" (2026-09-16). Fixed at the
   shared source instead of re-duplicating it per-page. */
/* Deal Of The Day shows 5 cards per row, so circles stay at this compact size
   at every breakpoint - the theme's default sizing (scaled up at 992px/1440px)
   is tuned for wider 4-per-row cards and overflows a 5-per-row card. */
.countdown-box .countdown__timer {
  gap: 14px;
}
.countdown-box .countdown__value {
  width: 26px;
  height: 26px;
  font-size: 11px;
  line-height: 14px;
}
.countdown-box .countdown__label {
  font-size: 10px;
  line-height: 16px;
}
/* Below 768px, Deal Of The Day cards show 2-3 per row, leaving even less
   width than the 5-per-row desktop case above was tuned for - the 146px
   countdown row no longer fits a ~104px-139px card, clipping "Secs" and
   "Available: 72". Shrink further to fit down to a 320px viewport. */
@media (max-width: 767.98px) {
  /* Reported: countdown row reads narrower than the title/Sold-Available
     rows above and below it, floating in the middle of the card with
     visible blank space on both sides - confirmed via headless Chrome at
     425x785. Cause: the vendored default justify-content:center (styles.css)
     clusters the 4 circular items together instead of spreading them, since
     their combined content width is well under the card's full width at
     this breakpoint. space-between matches how .box-quantity (the Sold/
     Available row directly below it) already spans edge-to-edge. Scoped to
     mobile only - the >=1600px override further down deliberately keeps
     center (a separate, earlier direct request for that breakpoint). */
  .countdown-box .countdown__timer {
    justify-content: space-between;
    gap: 5px;
  }
  .countdown-box .countdown__value {
    width: 22px;
    height: 22px;
    font-size: 9px;
    line-height: 12px;
  }
  .countdown-box .countdown__label {
    font-size: 8px;
    line-height: 12px;
  }
}
/* The vendored theme's own >=1600px override (styles.css) switches this
   row from centered to space-between and draws its own dot separators
   between items - both undone here rather than in the vendored file. */
@media (min-width: 1600px) {
  .countdown-box .countdown__timer {
    justify-content: center;
  }
  .countdown-box .countdown__item:not(:last-child)::after,
  .countdown-box .countdown__item:not(:last-child)::before {
    content: none;
  }
}
/* .new-price borrows Bootstrap's static .h4 (30px) and .old-price its .price-text
   (20px) - both sized for the original wider 4-per-row card. At 5-per-row they
   dwarf the product title, so scale them down to fit this card width. */
.card-product .price-wrap .new-price.h4 {
  font-size: 20px;
  line-height: 24px;
}
.card-product .price-wrap .old-price.price-text {
  font-size: 14px;
  line-height: 18px;
}
/* Deal cards wrap the product title in <h6>, which inherits the theme's 18px
   heading size - every other card grid on the site uses .body-md-2 (14px)
   directly instead. Match that standard so this section isn't oversized. */
.card-product h6 .name-product {
  font-size: 14px;
  line-height: 22px;
}
/* Product-card category captions (.caption.text-main-2) use the theme's
   --gray-2 (#73787d on white), which measures ~4.36:1 contrast - just under
   WCAG AA's 4.5:1 minimum for normal text. Darken locally rather than
   changing --gray-2 globally, since that variable is used site-wide. */
.card-product .caption.text-main-2 {
  color: #5a5f64;
}
/* Hero banner photo: ~400px tall at this site's large-screen container width
   (.container caps at 1520px in styles.css, 1490px inside its 15px padding -
   the hero slide has no extra row/col gutter, so that's the image's actual
   rendered width there), then scales down keeping that same ratio as the
   viewport narrows, instead of the vendored theme's height:100% (!important)
   + min-height:300px combo - that pairing stretched/cropped the real
   uploaded banner photos to whatever height the slide happened to be rather
   than scaling them proportionally with viewport width. min-height is reset
   to 0 (not just left unset) so aspect-ratio governs all the way down to the
   smallest phone widths, per the ask to keep the ratio itself responsive
   rather than clamping to a floor height. */
#homeHeroBannerSlider .img-style img {
  height: auto !important;
  width: 100%;
  aspect-ratio: 1490 / 400;
  object-fit: cover;
}
/* Proportional scaling above shrinks the hero to ~118px tall at an iPhone
   16 Pro Max's 430px viewport - too short for the heading/subtitle/CTA
   stack, which overflows the image box instead of sitting inside it (the
   overlay ".content" is sized off the image's own rendered box). Floor it
   at a fixed 300px on mobile instead of continuing the ratio down - per
   direct request, confirmed against a real iPhone 16 Pro Max viewport. */
@media (max-width: 575.98px) {
  #homeHeroBannerSlider .img-style img {
    height: 300px !important;
    aspect-ratio: auto;
  }
}
#homeHeroBannerSlider .banner-image-product.style-abs .img-box,
#homeHeroBannerSlider .banner-image-product.style-abs.type-abs-2 img {
  min-height: 0 !important;
}
/* Promo banner tiles (#homePromoBannersSlider .item-banner): the theme
   gives this box no height of its own, just padding (50px/30px) around
   the title/subtitle - so its rendered height was purely however many
   lines that text wrapped to, measured at 216px and 116px for the two
   tiles side by side on a large screen. The real uploaded photo (set as
   this box's background-image) got squeezed into whatever sliver that
   left, instead of reading as a banner photo the way the hero's does.
   Fix the height at this site's large-screen breakpoint (1200px, see the
   .tf-product-view-thumbs rule below) so both tiles match and the photo
   has real room; .inner's existing flex + align-items:center keeps the
   title vertically centered regardless of wrap length. Left responsive
   (auto, theme default) below 1200px, where these tiles stack closer to
   full-width and a flat 200px would look oversized.

   Shrunk from an original 400px to 200px per direct request - at 200px
   the theme's own text/image sizing (tuned for the taller box) breaks:
   confirmed by screenshot at 1600px wide, where .item-banner's own
   51px/23px padding (styles.css, >=1600px) leaves ~98px of content
   height, but the title+subtitle (one <h4>, split by <br>, both at the
   theme's default 30px/38px h4 size) wrapped to 3-4 lines totalling
   150px+ and visibly overlapped itself; separately the decorative
   .item-image (no width cap, sized off the source photo's natural
   dimensions, deliberately allowed to bleed outside the box via
   .overflow-visible for a "breakout product shot" look at 400px)
   rendered taller than the whole 200px tile and visually covered the
   text instead of merely peeking past an edge. Rebalance both for the
   shorter box: tighter padding to reclaim vertical room, smaller/tighter
   text with the subtitle clamped to 2 lines so longer copy truncates
   cleanly instead of overflowing, and the image capped to a max-height
   so it no longer dwarfs the tile. Even capped, at 200px tall the image
   still geometrically overlaps the text column on the right-hand tile
   (measured: image and subtitle bounding boxes intersect by ~120px) -
   unavoidable once both a floating device photo and two lines of text
   have to share a tile this short. Gave .item-banner its own stacking
   context (position:relative + z-index:1) so it (and the text inside
   it) paints above the sibling .item-image instead of the reverse -
   .item-banner was static by default, and static boxes always paint
   before positioned ones regardless of DOM order, which is why the
   absolutely-positioned .item-image was covering part of the subtitle
   before this. Net effect: the decorative image is now fully behind the
   opaque banner box rather than partially covering the text - a fair
   trade given hard constraint's note that these are blank placeholder
   photos anyway (nothing lost visually today); revisit this stacking
   choice once real product photos are uploaded and a floating mockup
   look is actually wanted again. */
@media (min-width: 1200px) {
  #homePromoBannersSlider .item-banner {
    height: 200px;
    padding: 24px 28px;
    position: relative;
    z-index: 1;
  }
  #homePromoBannersSlider .item-banner .name {
    line-height: 1.35;
  }
  #homePromoBannersSlider .promo-banner-title {
    display: block;
    font-size: 15px;
    font-weight: 500;
  }
  #homePromoBannersSlider .promo-banner-subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 20px;
  }
  #homePromoBannersSlider .item-image img {
    max-height: 160px;
    width: auto;
  }
}
/* Category row under the hero banner (#homeCategoriesSlider): switched to
   themes/frontend/onsus/home-7.html's own post-banner category style per
   direct request (home-7 is what this homepage's hero section is already
   modeled on) - plain image tiles, no name label, dots-only nav (no
   arrows), replacing the previous home-6-sourced .wg-cls-2 (photo + name)
   design. That theme reference's own demo photos for this slot
   (images/section/product-10.jpg etc.) are 724x280 - a wide strip, not a
   square - so this fixes tiles to that same ~2.6:1 ratio rather than 1:1;
   real uploaded category photos are ordinary photos of whatever shape/size,
   so without a fixed ratio + object-fit:cover here a very tall/large source
   photo would blow out the row's height (each tile is 1/4 of the ~1490px
   container - a naive square would render ~372px tall, dwarfing the row
   that sits directly under the hero banner). A light border + neutral
   fill are added here too (the plain-image style has neither on its own)
   so an empty tile still reads as a placeholder box pending a real photo,
   instead of being fully invisible against the page background. */
#homeCategoriesSlider .image {
  aspect-ratio: 724 / 280;
  border: 1px solid var(--gray-5);
  background-color: var(--bg-3);
}
#homeCategoriesSlider .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Deal Of The Day card gallery thumbnails (.tf-product-view-thumbs): the
   vendored theme's own unconditional max-width:52px/max-height:50px (styles.css)
   applies at every width - shrink it slightly, but only from this site's
   large-screen breakpoint up (1200px, the theme's own existing desktop-nav
   breakpoint - see styles.css's other @media (min-width: 1200px) blocks).
   Below that the vendored 52x50 default stays as-is; it's already a sensible
   size for the narrower cards a smaller viewport renders. */
@media (min-width: 1200px) {
  .tf-product-view-thumbs .swiper-slide .item {
    max-width: 48px;
    max-height: 45px;
  }
}
/* Per direct request: on mobile the vendored 52px-wide thumbnail reads too
   large next to a narrow Deal Of The Day card (now that each card's gallery
   has 5 thumbnails instead of 1 - see index.html) - shrink to 32px, height
   scaled down proportionally (52:50 ratio kept). Matches this site's small-
   screen breakpoint used elsewhere in this file (575.98px). */
@media (max-width: 575.98px) {
  .tf-product-view-thumbs .swiper-slide .item {
    max-width: 32px;
    max-height: 30px;
  }
}
/* Top selling product (#topSellingSlider): exactly 4 products, no
   carousel (nothing to scroll to), 2 per row. Per direct follow-up, the
   card itself is now the exact same standard card the featured-category
   row sections use (.card-product.style-row.row-small-2 - the same
   "horizontal view" as the rest of the site) rather than the earlier
   bespoke larger-font/bigger-image treatment - but the nested "double
   box" frame around it (kept per direct request, it "looks good") stays:
   .topsell-item (outer) - grey background + border, 35px gap on every
   side - wraps .topsell-item-frame (inner) - its own border, also a
   35px gap before the product card. Both borders use the theme's own
   standard border color (var(--gray-5), #ebebeb - same as .style-border
   and every other bordered card on the page). */
.home-top-selling-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.home-top-selling-grid .topsell-item {
  background-color: var(--gray-6);
  border: 1px solid var(--gray-5);
  border-radius: 8px;
  padding: 35px;
}
.home-top-selling-grid .topsell-item-frame {
  border: 1px solid var(--gray-5);
  border-radius: 8px;
  padding: 35px;
  background-color: var(--white);
}
/* Per direct request 2026-09-16: make this section look exactly like the
   featured-category row cards (e.g. "Bags & Footwear" - .card-product
   .style-row.row-small-2 with NO home-top-selling-grid overrides, the
   default 122px image / 14px name / 20px price / 12px caption / 24px icon
   sizing, measured via getBoundingClientRect: wrapper 122x122, info column
   191x108), just bigger - not a bigger image paired with independently
   (and inconsistently) bumped text sizes, which is what the previous
   18px/26px name + 26px price + 42px (dead, see below) icon values were,
   and which was the root cause of every earlier "not centered" / "alignment
   not matched" report in this section: text and image scaled by different
   factors, so their heights stopped matching.
   Three explicit tiers below (desktop/tablet/mobile) instead of one
   unconditional "bigger" size applied everywhere - the first version of
   this fix used the same (desktop-tuned) sizing from 576px up, which read
   too large at 1024px/768px (reported 2026-09-16) and, at <576px, was
   actually TALLER than the 100px mobile wrapper (measured: 125px real
   content vs. 100px image) even though it looked visually fine, since
   info's min-height was still floating it at 200px regardless.
   .home-top-selling-grid .box-icon (42px) was dead code before this pass:
   .card-product .list-product-btn .box-icon above (261-267) is 3 classes vs.
   that rule's 2, so the 24px it set always won regardless - Top Selling's
   icons were actually rendering at 24px, same as every other homepage card.
   Each tier below uses .list-product-btn .box-icon (also 3 classes) so it
   wins on tie-breaking source order instead of losing outright. */
@media (min-width: 1200px) {
  .home-top-selling-grid .caption {
    font-size: 16px;
    line-height: 30px;
  }
  .home-top-selling-grid .name-product {
    font-size: 20px;
    line-height: 30px;
  }
  .home-top-selling-grid .price-wrap .new-price {
    font-size: 28px;
    line-height: 30px;
  }
  .home-top-selling-grid .price-wrap .old-price {
    font-size: 19px;
  }
  .home-top-selling-grid .list-product-btn .box-icon {
    width: 33px;
    height: 33px;
  }
  .home-top-selling-grid .list-product-btn .box-icon .icon {
    font-size: 15px;
  }
}
/* Tablet (576-1199.98px, matches this file's other tablet breakpoints) -
   the image stays 170px at this width too (no dedicated tablet wrapper
   size), so these are simply smaller than the desktop tier above rather
   than a further-scaled proportion of it - real content measured well
   within the 170px min-height (see below) at this size. */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .home-top-selling-grid .caption {
    font-size: 13px;
    line-height: 22px;
  }
  .home-top-selling-grid .name-product {
    font-size: 16px;
    line-height: 24px;
  }
  .home-top-selling-grid .price-wrap .new-price {
    font-size: 22px;
    line-height: 26px;
  }
  .home-top-selling-grid .price-wrap .old-price {
    font-size: 15px;
  }
  .home-top-selling-grid .list-product-btn .box-icon {
    width: 26px;
    height: 26px;
  }
  .home-top-selling-grid .list-product-btn .box-icon .icon {
    font-size: 11px;
  }
}
/* Mobile (<576px) - the wrapper drops to 100px (below) so text needs to be
   tighter than the tablet tier, not just smaller than desktop: real content
   measured 125px at the previous mobile sizing (14px/20 name unchanged,
   but this rule's own unconditional desktop caption/icon sizing was still
   leaking in below 576px before this pass existed) - taller than the
   100px wrapper it's supposed to match. Retuned to fit within 100px with
   headroom (measured ~92px at these values). */
@media (max-width: 575.98px) {
  .home-top-selling-grid .caption {
    font-size: 11px;
    line-height: 16px;
  }
  .home-top-selling-grid .list-product-btn .box-icon {
    width: 18px;
    height: 18px;
  }
  .home-top-selling-grid .list-product-btn .box-icon .icon {
    font-size: 8px;
  }
}
/* Per follow-up request: the product photo itself also reads larger here -
   .style-row.row-small-2's own card-product-wrapper caps at 122px
   (styles.css), specificity (0,4,0) via .card-product.style-row.row-small-2
   .card-product-wrapper - matched here (not just .home-top-selling-grid
   .card-product-wrapper, which lost to it at (0,2,0)) so this section's
   override actually wins without needing !important. aspect-ratio:1
   (styles.css) keeps it square, so height scales with width automatically -
   no separate height rule needed.
   Also tried: matching the wrapper's height to the info column's (215px,
   non-square, dropping aspect-ratio) - this DID make image/text flush at
   the row's top and gave equal 36px padding on all 4 sides (confirmed via
   getBoundingClientRect), but reverted per direct request - the resulting
   non-square photo crop "doesn't look good", keep the image dimensions
   as-is (2026-09-16). Back to the square image + centering it below - see
   that rule's comment for the known top-alignment tradeoff that comes with
   it. */
.home-top-selling-grid .card-product.style-row.row-small-2 .card-product-wrapper {
  max-width: 170px;
}
/* Same vendored mobile bug as .home-category-section's row-style cards fix
   above: styles.css's own @media (max-width: 425px) rule flips
   .style-row.row-small-2 to flex-direction: column, leaving the (170px-
   capped) image left-aligned with dead space beside it instead of centered,
   and the name/price text awkwardly wrapping below. Keep the row layout
   here too so mobile matches desktop.
   align-items left at the vendored default (flex-start, styles.css's
   .card-product base) - back to matching Bags & Footwear's own alignment
   now that the text sizing above is proportionally scaled with the image
   instead of independently bumped (see that comment) - image and text both
   start flush at the row's top like the reference card, with only the same
   small (~13%), barely-visible excess below the image that the reference
   itself already has, rather than the previous 45px mismatch that needed
   center/stretch workarounds (and their own tradeoffs) to paper over. */
.home-top-selling-grid .card-product.style-row.row-small-2 {
  flex-direction: row;
}
@media (max-width: 767.98px) {
  .home-top-selling-grid {
    grid-template-columns: 1fr;
  }
}
/* The double-frame padding (35px topsell-item + 35px topsell-item-frame,
   kept on desktop per earlier direct request - "looks good") is excessive on
   a narrow phone screen once the grid above drops to a single column - each
   card was eating ~140px of pure padding out of a ~360px-wide viewport.
   Shrink both to a still-visible-but-proportionate frame below this site's
   existing small-screen breakpoint (575.98px, matches .tf-sp-2's own mobile
   breakpoint elsewhere in this file) without touching the desktop value. */
@media (max-width: 575.98px) {
  .home-top-selling-grid .topsell-item,
  .home-top-selling-grid .topsell-item-frame {
    padding: 16px;
  }
}
/* The "read a bit larger" image sizing above (170px) was tuned for the
   desktop double-frame card and applies at every width with no media query
   of its own. Once the frame padding shrinks on mobile (previous rule),
   that same 170px leaves the name/price column only ~90-100px wide on a
   real phone - text wraps badly and the row looks cramped. Bring the image
   back down near the site's normal row-card proportions (122px, matching
   the other row-style cards elsewhere on the page) below this site's small-
   screen breakpoint only; desktop keeps the larger treatment.
   name/price retuned smaller again (2026-09-16, alongside the mobile
   caption/icon tier above) - real content measured 125px, taller than this
   100px image, at the previous 14px/18px values once the (unrelated at the
   time) unconditional desktop caption/icon sizing was also leaking into
   mobile - fixed together so the whole info column fits within 100px to
   match the image (per direct request), not just individual pieces of it. */
@media (max-width: 575.98px) {
  .home-top-selling-grid .card-product.style-row.row-small-2 .card-product-wrapper {
    max-width: 100px;
  }
  .home-top-selling-grid .name-product {
    font-size: 13px;
    line-height: 18px;
  }
  .home-top-selling-grid .price-wrap .new-price {
    font-size: 16px;
    line-height: 20px;
  }
  .home-top-selling-grid .price-wrap .old-price {
    font-size: 12px;
  }
}
/* Top Selling is the last homepage carousel section before the footer -
   its own .tf-sp-2 bottom padding (10px, tightened site-wide for the
   stacked homepage sections above) reads too tight against the footer
   specifically, so add an extra 20px gap here, large screens only (this
   site's 1200px large-screen breakpoint - see the other @media
   (min-width: 1200px) blocks in this file). */
@media (min-width: 1200px) {
  #topSellingSection {
    margin-bottom: 20px;
  }
}
/* The vendored theme's own >=1440px rule (styles.css) turns .group-btn (the
   price + cart/wishlist icon row on every .style-row.row-small-2 card -
   Clothes-style featured categories, Top Selling) into a hover-swap: price
   and icons sit stacked in the same absolutely-positioned box, price shown
   by default and icons hidden (opacity:0) until the whole card is hovered,
   at which point price fades out and icons fade in. Since .group-btn itself
   doesn't establish a real height for the icon row, this reads as dead
   empty space next to the price until hovered - not obvious it's
   interactive. Per direct request, keep both always visible instead, same
   simple side-by-side layout the theme already uses below 1440px. Uses
   !important because the vendored :hover variant (styles.css) has one more
   selector than the plain rules here and would otherwise still win on
   actual hover. */
@media (min-width: 1440px) {
  .card-product .group-btn {
    position: static;
    display: grid;
  }
  .card-product .group-btn .price-wrap,
  .card-product:hover .group-btn .price-wrap {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .card-product .group-btn .list-product-btn,
  .card-product:hover .group-btn .list-product-btn {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    opacity: 1 !important;
  }
  .card-product .group-btn .list-product-btn li,
  .card-product:hover .group-btn .list-product-btn li {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}