@media (min-width: 768px) {
    .homepage-slider {
        height: 526px;
    }
    .homepage-slider .owl-carousel .owl-dots {
        height: 22px;
    }
}

/* Responsive homepage video */
.cs-home-video{position:relative;width:100%;max-width:min(1213px,calc(70vh*16/9));margin:0 auto 20px;aspect-ratio:16/9;}
.cs-home-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
@supports not (aspect-ratio:16/9){.cs-home-video{height:0;padding-bottom:56.25%;max-width:100%;}}

/* Category subcategory tiles: two per row on phones */
/* ==========================================================================
   Category pages: subcategory tiles 2-across on phones
   Append to: templates/3dcart-Brido-core-premium/css/custom.css
   (after the existing .homepage-slider and "Responsive homepage video" blocks)
   Scope: #category (every category_x.html template) and phones only.
   Desktop and tablet (768px and up) are not affected.
   ========================================================================== */
@media (max-width: 767px) {

    /* Each <ul class="columns-N"> becomes a wrapping flex row */
    #category .subcategories > ul {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;   /* a lone last tile sits centered */
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;      /* equal-height tiles in each row */
        margin: 0 -5px;
        padding: 0;
        list-style: none;
    }
    /* category.css adds a clearfix (:before/:after display:table) to these ULs.
       Inside a flex row those pseudo-elements would become flex items and push
       the 2nd tile onto a new line, so switch them off. */
    #category .subcategories > ul:before,
    #category .subcategories > ul:after {
        content: none;
        display: none;
    }

    /* Tiles (template uses <div class="col-sm-4 col-md-2">; li kept for safety).
       Overrides default_modified.css: min-width:210px, width:19.666667%,
       display:inline-table, min-height:293px, max-height:369px */
    #category .subcategories > ul > div,
    #category .subcategories > ul > li {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        width: 50% !important;     /* beats category.css/responsive.css li width:100% !important */
        max-width: 50%;
        min-width: 0;
        height: auto;
        min-height: 0;
        max-height: none;
        float: none;
        margin: 0;
        padding: 0 5px 12px;
        text-align: center;
        border: 0;
    }

    /* The link fills the whole tile so every tile in a row is the same height */
    #category .subcategories > ul > div > a,
    #category .subcategories > ul > li > a {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: 100%;
        min-height: 0 !important;
        margin: 0;
    }

    /* Images scale to the tile. Square box + contain keeps rows tidy when an image
       is not square (TOP SELLERS is portrait, Programmable is landscape).
       Browsers without aspect-ratio just use the natural height (height:auto). */
    #category .subcategories span.category-img {
        display: block;
        width: 100%;
    }
    #category .subcategories span.category-img > img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        -o-object-fit: contain;
        object-fit: contain;
        margin: 0 auto;
    }

    /* Orange title bar: wraps cleanly, same min-height (2 lines) on every tile */
    #category .subcategories .name-wrap {
        position: static;
        height: auto;
        padding: 0;
    }
    #category .subcategories .name-wrap span.name {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        min-height: 46px;          /* 2 lines x 13px x 1.25 + 12px padding */
        padding: 6px 4px;
        font-size: 13px;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: break-word;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
        text-align: center;
    }

    /* Description: max 3 lines so long blurbs don't make huge tiles.
       height:auto overrides default_modified.css ".category-onpage .col-sm-4.col-md-2 p {height:82px}" */
    #category .subcategories > ul > div p,
    #category .subcategories > ul > li p {
        height: auto;
        margin: 6px 2px 0;
        padding: 0;
        font-size: 12px;
        line-height: 1.35;
        text-align: center;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Homepage Popular Categories: two per row on phones */
/* ==========================================================================
   Scope: the homepage "Popular Categories" block only, phones only.
   The homepage has TWO elements with id="home-top-banners" (the Featured
   Products block and Popular Categories), so every selector goes through
   "#home-top-banners > .container > ul.row > li.banner-item", which only the
   Popular Categories markup has. Desktop and tablet (768px and up) unchanged.
   ========================================================================== */
@media (max-width: 767px) {

    /* The <ul class="row"> becomes a wrapping flex row; equal-height tiles */
    #home-top-banners > .container > ul.row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        margin: 0 -5px;
        padding: 0;
    }
    /* Bootstrap .row clearfix pseudo-elements would become flex items */
    #home-top-banners > .container > ul.row:before,
    #home-top-banners > .container > ul.row:after {
        content: none;
        display: none;
    }

    /* Tiles: 50% wide (overrides .col-xs-12 width:100%) */
    #home-top-banners > .container > ul.row > li.banner-item {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        float: none;
        width: 50%;
        min-width: 0;
        padding: 0 5px;
        margin: 0 0 14px;
    }

    /* Title: wraps cleanly, same 2-line min-height on every tile */
    #home-top-banners > .container > ul.row > li.banner-item > a.img-text {
        display: block;
        max-width: none;
        margin: 0 0 6px;
    }
    #home-top-banners > .container > ul.row > li.banner-item > a.img-text h4 {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        min-height: 34px;          /* 2 lines x 13px x 1.25, rounded up */
        margin: 0;
        font-size: 13px;
        line-height: 1.25;
        letter-spacing: 0.04em;
        white-space: normal;
        overflow-wrap: break-word;
        word-wrap: break-word;
        text-align: center;
    }

    /* Image box fills the rest of the tile; image scales to fit */
    #home-top-banners > .container > ul.row > li.banner-item > a.img-wrap {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
        margin: 0;
    }
    #home-top-banners > .container > ul.row > li.banner-item > a.img-wrap > img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
    }
}

/* Popular Categories: label under image on phones */
/* ==========================================================================
   Phones only (767px and down). Desktop and tablet (768px and up) unchanged.
   The markup is <li> -> <a.img-text><h4>name</h4></a> then <a.img-wrap><img>.
   In the 2-per-row grid the name sat above its image with about the same gap
   above and below it, so it read as a caption for the image in the row
   above. Here the image is shown first and the name directly under it, and
   rows get a larger gap than the image-to-name gap so each tile reads as
   image + name. The name keeps its 2-line min-height so rows stay aligned.
   ========================================================================== */
@media (max-width: 767px) {

    /* Larger gap between rows than between an image and its name */
    #home-top-banners > .container > ul.row > li.banner-item {
        margin: 0 0 20px;
    }

    /* Image first */
    #home-top-banners > .container > ul.row > li.banner-item > a.img-wrap {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    /* Name second, directly under its own image */
    #home-top-banners > .container > ul.row > li.banner-item > a.img-text {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2;
        margin: 8px 0 0;
    }

    /* Name hugs the image (top of its 2-line box, not centered in it) */
    #home-top-banners > .container > ul.row > li.banner-item > a.img-text h4 {
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
}

/* Sitewide product grids: two per row on phones */
/* ==========================================================================
   Phones only (767px and down). Desktop and tablet (768px and up) unchanged.
   Covers every grid that was still showing ONE item per row on phones:
   A. Homepage "Featured Industrial Sewing Products" (and Top Sellers if it
      is ever switched on). default_modified.css fixes these tiles at 239px
      wide, so phones only fit one per row.
   B. Product listing grids (category product lists, Top Sellers, Clearance,
      search results). core.css makes them 100% wide at 380px and down, so
      most phones (360px / 375px wide) see one per row. 381-767px keeps the
      theme's existing 2/3 columns.
   C. Shared tile tidy-up for A, B and D at 2-up: "VIEW DETAILS" no longer gets
      cut off, names wrap to 3 lines, less dead space around the price.
   D. Product pages: "Related Items", "Accessories" and "Recently Viewed".
      default_modified.css forces the carousel track to 100% width on product
      pages, so these already show as a stacked list (one per row on phones,
      a wrapped grid on desktop). On phones they become a tidy 2-up grid.
   ========================================================================== */
@media (max-width: 767px) {

    /* ---- A. Homepage Featured Products / Top Sellers ---- */
    #home-top-banners .product-items,
    #modTopSellers .product-items {
        margin: 0 -5px;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
    }
    /* Overrides "html .product-items.product-items-6 .product-item {width:239px}"
       and ".home-page .product-item.wow.fadeInUp {display:inline-table}" */
    html body #home-top-banners .product-items > .product-item,
    html body #modTopSellers .product-items > .product-item {
        display: block;
        float: none;
        width: 50%;
        min-width: 0;
        margin: 0 0 18px;
        padding: 0 5px;
    }
    /* Name: ".home-page .product-desc {max-height:60px}" + 16px names made long
       titles spill over the next tile, so let the text block grow and keep the
       name to 3 lines */
    .home-page #home-top-banners .product-item .product-desc,
    .home-page #modTopSellers .product-item .product-desc {
        max-height: none;
    }
    #home-top-banners .product-item .name,
    #modTopSellers .product-item .name {
        height: auto;
        max-height: none;
        margin: 0 0 6px;
    }
    .home-page #home-top-banners .product-item .name a,
    .home-page #modTopSellers .product-item .name a {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-width: none;           /* responsive.css: #home-top-banners a {max-width:370px; margin-bottom:20px} */
        margin: 0;
        font-size: 13px;
        line-height: 1.35;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    #home-top-banners .product-item .img a,
    #modTopSellers .product-item .img a {
        max-width: none;
        margin: 0;
    }
}
/* ---- B. Listing grids at 380px and down: 50% instead of core.css 100% ---- */
@media (max-width: 380px) {
    /* keep a 15px outer gutter and a 10px gap between the two columns */
    html body .product-items:not(.owl-carousel) {
        margin-left: -5px;
        margin-right: -5px;
    }
    html body .product-items:not(.owl-carousel) > .product-item,
    html body #search .product-items:not(.owl-carousel) > .product-item {
        width: 50%;
        padding-left: 5px;
        padding-right: 5px;
    }
}
@media (max-width: 767px) {

    /* ---- C. Tile tidy-up (all product grids above + product-page grids in D) ---- */
    .product-items:not(.owl-carousel) > .product-item .img,
    #listing .sub-section .owl-item > .product-item .img {
        max-width: 100%;
    }
    /* Names: 3 lines instead of 2 at the narrower width, same height on every
       tile so prices and buttons line up across a row.
       Overrides "html .category-page .product-item .name {max-height/min-height:40px}"
       and "html .product-item .name {height:-webkit-fill-available}" */
    html body .product-items:not(.owl-carousel) > .product-item .name,
    html body #listing .sub-section .owl-item > .product-item .name {
        height: auto;
        min-height: 54px;          /* 3 lines x 18px */
        max-height: 54px;
        overflow: hidden;
        margin-bottom: 6px;
        font-size: 13px;
        line-height: 18px;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    /* Row gap: search results tiles carry core.css margin-bottom:40px on top of
       the button's own margin (category tiles already have margin:0) */
    html body .product-items:not(.owl-carousel) > .product-item,
    html body #listing .sub-section .owl-item > .product-item {
        margin-bottom: 0;
    }
    /* Price: less padding ("html .product-item .price {padding-top:2em; padding-bottom:1em}") */
    html .product-items:not(.owl-carousel) > .product-item .price,
    html body #listing .sub-section .owl-item > .product-item .price {
        height: auto;
        min-height: 18px;
        padding-top: 4px;
        padding-bottom: 6px;
        margin-bottom: 8px;
        font-size: 13px;
    }
    html .product-items:not(.owl-carousel) > .product-item .price del.regular-price,
    html body #listing .sub-section .owl-item > .product-item .price del.regular-price {
        margin-right: 6px;
    }
    /* Dead space: the review-stars box is empty (stars are switched off) but
       still reserves 31px, and a stray white-on-white "View Details" span
       (left over from a commented-out Quick View button) adds another line */
    .product-items .product-item .product-desc > .reviews {
        min-height: 0;
        margin-bottom: 0;
    }
    .product-items .product-item > span.text-white {
        display: none;
    }
    /* "VIEW DETAILS": was 71% wide + 22px padding + wide letter-spacing with
       nowrap, which clipped the text in a half-width tile */
    html .product-items:not(.owl-carousel) > .product-item .btn-details,
    html body #listing .sub-section .owl-item > .product-item .btn-details {
        width: 100%;
        max-width: 150px;
        height: auto;
        min-height: 30px;
        margin: 0 auto 28px;           /* clear gap before the next row */
        padding: 6px 4px;
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0.08em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ---- D. Product page Related Items / Accessories / Recently Viewed ---- */
    #listing .relatedBlock .owl-carousel .owl-stage,
    #listing .accessoriesBlock .owl-carousel .owl-stage,
    #listing .browsing_historyBlock .owl-carousel .owl-stage {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        width: auto !important;        /* beats inline width + listing-page 100% !important */
        -webkit-transform: none !important;
        transform: none !important;    /* everything is visible, so no sliding */
    }
    /* owl's clearfix pseudo-element would become a flex item */
    #listing .relatedBlock .owl-carousel .owl-stage:after,
    #listing .accessoriesBlock .owl-carousel .owl-stage:after,
    #listing .browsing_historyBlock .owl-carousel .owl-stage:after {
        content: none;
        display: none;
    }
    #listing .relatedBlock .owl-carousel .owl-item,
    #listing .accessoriesBlock .owl-carousel .owl-item,
    #listing .browsing_historyBlock .owl-carousel .owl-item {
        float: none;
        width: 50% !important;         /* beats owl's inline width */
        max-width: 50%;                /* default_modified.css: max-width 245px */
        margin: 0 !important;          /* beats owl's inline margin-right:30px */
        padding: 0 5px 14px;
    }
    #listing .relatedBlock .owl-carousel .owl-item:nth-child(odd),
    #listing .accessoriesBlock .owl-carousel .owl-item:nth-child(odd),
    #listing .browsing_historyBlock .owl-carousel .owl-item:nth-child(odd) {
        padding-left: 0;
    }
    #listing .relatedBlock .owl-carousel .owl-item:nth-child(even),
    #listing .accessoriesBlock .owl-carousel .owl-item:nth-child(even),
    #listing .browsing_historyBlock .owl-carousel .owl-item:nth-child(even) {
        padding-right: 0;
    }
    /* Prev/next arrows have nothing to do once every item is on screen */
    #listing .relatedBlock .owl-carousel .owl-nav,
    #listing .accessoriesBlock .owl-carousel .owl-nav,
    #listing .browsing_historyBlock .owl-carousel .owl-nav {
        display: none;
    }
}

/* Category product grids: bigger product photos */
/* ==========================================================================
   Applies to every category page product grid (body.category-page
   .cat-items-grid), grid view only. List view (.productList), owl
   carousels, search results, the homepage and product pages are untouched.
   Why the photos were small:
   - default_modified.css caps ".product-item .img img" at max-width/height
     150px (plus 4px padding) and fixes ".product-item .img" at 149px tall,
     so every photo was at most 150x150 in a 312px-wide (desktop) /
     165px-wide (phone) image area.
   - default_modified.css forces ".product-items-3" to 25% (4 across) at
     700px and up, even though the template asks for 3 across.
   Fix: 3 across from 581px up, a fixed-height image box that fills the
   card width, and the photo scaled to fit it with object-fit: contain.
   Phones (580px and down) stay 2 across; the photo fills the card width.
   NOTE: the listing still uses Shift4Shop's 150px "_thumbnail" files, so
   photos shown larger than 150px are upscaled and look slightly soft.
   ========================================================================== */

/* ---- Tablet & desktop: 3 per row (beats default_modified.css 25%) ---- */
@media (min-width: 581px) {
    html body.category-page .cat-items-grid .product-items:not(.owl-carousel):not(.productList) > .product-item {
        width: 33.33333333%;
    }
}

/* ---- Image box: all widths ---- */
html body.category-page .cat-items-grid .product-items:not(.owl-carousel):not(.productList) > .product-item .img {
    height: auto;               /* default_modified.css: .product-item .img {height:149px} */
    max-width: none;
    margin-bottom: 14px;
}
html body.category-page .cat-items-grid .product-items:not(.owl-carousel):not(.productList) > .product-item .img > a {
    display: block;
    width: 100%;
    height: 240px;              /* 581-991px */
    max-width: none;
    margin: 0;
    background: #fff;
}
/* Overrides ".product-item .img img {width:100%; max-width:150px;
   max-height:150px; padding:4px; height:auto}" (default_modified.css) */
html body.category-page .cat-items-grid .product-items:not(.owl-carousel):not(.productList) > .product-item .img > a > img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
}
@media (min-width: 992px) {
    html body.category-page .cat-items-grid .product-items:not(.owl-carousel):not(.productList) > .product-item .img > a {
        height: 280px;
    }
}

/* ---- Phones: still 2 per row, photo fills the card width (square box) ---- */
@media (max-width: 580px) {
    /* 10px outer gutter + 10px gap instead of 15px padding inside each card
       (grid pulled 10px into the 15px container padding) */
    html body.category-page .cat-items-grid .product-items:not(.owl-carousel):not(.productList) {
        margin-left: -10px;
        margin-right: -10px;
        padding-left: 0;
        padding-right: 0;
    }
    html body.category-page .cat-items-grid .product-items:not(.owl-carousel):not(.productList) > .product-item {
        width: 50%;
        padding-left: 5px;
        padding-right: 5px;
    }
    html body.category-page .cat-items-grid .product-items:not(.owl-carousel):not(.productList) > .product-item .img > a {
        height: auto;
        aspect-ratio: 1 / 1;
    }
    @supports not (aspect-ratio: 1 / 1) {
        html body.category-page .cat-items-grid .product-items:not(.owl-carousel):not(.productList) > .product-item .img > a {
            height: 44vw;
        }
    }
}


/* ==========================================================================
   v7 - Homepage: gap between "Featured Industrial Sewing Products" and the
   brands banner / "Popular Categories"
   Homepage only (body.home-page #home). Nothing changes inside the Featured
   grid; the extra space after the LAST row is removed.

   Below the last row of Featured tiles there was (at 1366px):
     10px  .name margin-bottom
     21px  stray white-on-white "View Details" <span class="text-white">
           (from the commented-out Quick View button; v6 hides it on phones)
     40px  .product-item margin-bottom (the row gap, wasted after the last row)
     20px  #home-top-banners .container padding-bottom (default_modified.css)
     28px  #fullWidthBlock margin-top
   = ~120px of white before the brands banner. Other sections use ~45-55px
   (slider -> Featured heading 44px, banner -> Popular Categories heading 55px).
   Phones: 18px tile margin + 20px padding + 28px, plus an empty
   .category-header (only holds a <meta> tag) with 15px+15px padding under the
   banner.
   ========================================================================== */
/* cancel the last row's bottom margin (same value as the tile margin-bottom) */
body.home-page #home #home-top-banners.home-top-b .product-items {
    margin-bottom: -40px;
}
body.home-page #home #home-top-banners.home-top-b .cut-section > .container {
    padding-bottom: 0;
}
@media (max-width: 767px) {
    /* phone tiles use margin-bottom:18px (v6 section A) */
    body.home-page #home #home-top-banners.home-top-b .product-items {
        margin-bottom: -18px;
    }
    /* empty homepage category header (only holds a <meta> tag): drop its
       15px/15px phone padding. If header text is ever added in the admin,
       delete this rule. */
    body.home-page #home .category-header {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* ==========================================================================
   Top-bar mega menu: picture on the LEFT, subcategory list on the RIGHT
   in every dropdown (desktop only).
   Cause: default_modified.css has nth-child(6), (7) and (8) rules for
   #top-categories-menu that float .imageArea right (text-align:right,
   border-left, max-width:27% !important, img margin-top:-27px) and push
   .cateArea around with negative margins (-22em top, 19em/16em/-13em right,
   nth-child(8) margin-left:100em, single-column list). HaloMegaMenu.js
   already builds every dropdown as imageLeft (.imageArea.colLeft first),
   so the flip is purely those CSS rules. This block puts every full-width
   mega menu back on the same layout items 1, 2, 4 and 5 already use.
   The top menu is hidden on phones (.hide-mobile; phones use .st-menu),
   and this block is limited to min-width:768px anyway.
   ========================================================================== */
@media (min-width: 768px) {
    html #top-categories-menu > .container > ul > li.hasMegamenu.fullWidth > .subMegaMenu.imageLeft > .container > .imageArea.colLeft {
        float: left;
        width: 100%;
        max-width: 30% !important;
        max-height: none;
        min-height: 1px;
        margin: 0;
        padding: 5px 0 10px 15px;
        text-align: left;
        border-left: 0;
    }
    html #top-categories-menu > .container > ul > li.hasMegamenu.fullWidth > .subMegaMenu.imageLeft > .container > .imageArea.colLeft img {
        margin-top: 0;
        border-right: 2px solid #ccc;
        padding-right: 12px;
    }
    html #top-categories-menu > .container > ul > li.hasMegamenu.fullWidth > .subMegaMenu.imageLeft > .container > .cateArea {
        float: left;
        width: 100%;
        max-width: 60% !important;
        min-height: 1px;
        margin: -11px 0 0 0 !important;
    }
    html #top-categories-menu > .container > ul > li.hasMegamenu.fullWidth > .subMegaMenu.imageLeft > .container.cate-3-col > .cateArea > ul > li {
        display: list-item;
        float: left;
        width: 33.33% !important;
        padding-right: 15px;
    }
}

/* ==========================================================================
   Top-bar dropdowns: very light gray panel (#f4f5f7) so they stand out from
   the white page and white menu bar. Desktop top menu only (the top menu is
   hidden on phones; the phone .st-menu is not touched).
   Mega menu pictures are JPEGs with a white background baked in;
   mix-blend-mode:multiply lets the panel gray show through their white
   (other colours darken by ~4%, not visible in practice).
   ========================================================================== */
@media (min-width: 768px) {
    html #top-categories-menu > .container > ul > li > .subMegaMenu,
    html #top-categories-menu > .container > ul > li > .subMenu,
    html #top-categories-menu > .container > ul > li.hasMegamenu > .subMegaMenu ul li.hasSub > ul {
        background-color: #f4f5f7;
    }
    html #top-categories-menu > .container > ul > li > .subMegaMenu .container,
    html #top-categories-menu > .container > ul > li > .subMegaMenu .imageArea,
    html #top-categories-menu > .container > ul > li > .subMegaMenu .imageArea a,
    html #top-categories-menu > .container > ul > li > .subMegaMenu .cateArea,
    html #top-categories-menu > .container > ul > li > .subMegaMenu .cateArea > ul,
    html #top-categories-menu > .container > ul > li > .subMegaMenu .cateArea > ul > li,
    html #top-categories-menu > .container > ul > li > .subMenu ul,
    html #top-categories-menu > .container > ul > li > .subMenu li {
        background-color: transparent;
    }
    html #top-categories-menu > .container > ul > li > .subMegaMenu .imageArea img {
        mix-blend-mode: multiply;
    }
}

/* ==========================================================================
   Homepage "Featured Industrial Sewing Products" grid: manual order.
   Only the first #home-top-banners (.home-top-b) on the homepage; category
   pages and the "Popular Categories" row are not matched. The grid is
   already flex-wrap (v7 sizing: 5 per row desktop, 2 per row phones); this
   only adds `order`. Items not listed below get order 99 (end of grid).
   Browsers without: has() ignore the: has rules and keep the store's order.
   Each href substring was checked to match exactly one Featured item.
   ========================================================================== */
body.home-page #home #home-top-banners.home-top-b .product-items.product-items-6 {
    display: flex;
    flex-wrap: wrap;
}
body.home-page #home #home-top-banners.home-top-b .product-items.product-items-6 > .product-item { order: 99; }
body.home-page #home #home-top-banners.home-top-b .product-items-6 > .product-item:has(> .img > a[href*="juki-dnu1541s-walking-foot-sewing-machine"]) { order: 1; }
body.home-page #home #home-top-banners.home-top-b .product-items-6 > .product-item:has(> .img > a[href*="juki-ddl8700-single-needle-lockstitch-fully-assembled-ready-to-sew"]) { order: 2; }
body.home-page #home #home-top-banners.home-top-b .product-items-6 > .product-item:has(> .img > a[href*="thread---spun-poly-tex-40"]) { order: 3; }
body.home-page #home #home-top-banners.home-top-b .product-items-6 > .product-item:has(> .img > a[href*="juki-bobbin-case"]) { order: 4; }
body.home-page #home #home-top-banners.home-top-b .product-items-6 > .product-item:has(> .img > a[href*="1-gallon-sewing-machine-oil"]) { order: 5; }
body.home-page #home #home-top-banners.home-top-b .product-items-6 > .product-item:has(> .img > a[href*="thread---69-nylon-spools"]) { order: 6; }
body.home-page #home #home-top-banners.home-top-b .product-items-6 > .product-item:has(> .img > a[href*="juki-ddl-8700-essentials-kit"]) { order: 7; }
body.home-page #home #home-top-banners.home-top-b .product-items-6 > .product-item:has(> .img > a[href*="juki-mo6814a-dd-direct-drive-four-thread-serger"]) { order: 8; }
body.home-page #home #home-top-banners.home-top-b .product-items-6 > .product-item:has(> .img > a[href*="juki-ddl-8000a"]) { order: 9; }
body.home-page #home #home-top-banners.home-top-b .product-items-6 > .product-item:has(> .img > a[href*="thread---spun-poly-tex-27"]) { order: 10; }
body.home-page #home #home-top-banners.home-top-b .product-items-6 > .product-item:has(> .img > a[href*="professional-wig-sewing-machine-consew-228r-wig"]) { order: 11; }
body.home-page #home #home-top-banners.home-top-b .product-items-6 > .product-item:has(> .img > a[href*="portable-ironing-workstation-with-vacuum-and-heat"]) { order: 12; }
body.home-page #home #home-top-banners.home-top-b .product-items-6 > .product-item:has(> .img > a[href*="ec1-cutter-easy-cut-12-electric-cordless-scissor"]) { order: 13; }
body.home-page #home #home-top-banners.home-top-b .product-items-6 > .product-item:has(> .img > a[href*="juki-du-1181-essentials-kit"]) { order: 14; }
body.home-page #home #home-top-banners.home-top-b .product-items-6 > .product-item:has(> .img > a[href*="16x257-Organ-Needles"]) { order: 15; }

/* ==========================================================================
   v9 - Homepage spacing tighten
   Homepage only (body.home-page #home ...). Do NOT apply on category/product
   pages. CSS-only; no home.html / admin changes required.

   Targets:
     1) Brand logo band (#fullWidthBlock) — was ~280–300px tall (empty
        .custom-content + .container padding:12% 0). Aim ~150–160px on
        desktop while keeping % hotspot <a class="link-*"> alignment.
     2) Featured Industrial Sewing Products — less air between rows / under
        titles (btn-details margin + uneven name heights).
     3) Popular Categories — second #home-top-banners (no .home-top-b):
        less section margin, heading margin, and img-wrap gap.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Brand logo band (#fullWidthBlock)
   Theme: #fullWidthBlock { margin-top:28px } and .container { padding:12% 0 }
   drive height because the <img> is position:absolute and .custom-content is
   empty. Hotspots (a.link-*) are % of #fullWidthBlock — keep the image
   filling the box so those % still land on logos.
   object-fit:fill mildly compresses the PNG vertically on wide desktops
   (native aspect ~1906x458 ˜ 328px tall at 1366px wide) but keeps every logo
   row visible and clickable. On phones min() falls back to near-native height.
   -------------------------------------------------------------------------- */
body.home-page #home #fullWidthBlock {
    margin-top: 16px;                          /* was 28px */
    height: min(160px, calc(100vw * 458 / 1906));
    overflow: hidden;
}
body.home-page #home #fullWidthBlock .container {
    padding: 0;                                /* was 12% 0 — empty custom-content */
    height: 100%;
    width: 100%;
    max-width: none;
}
body.home-page #home #fullWidthBlock > img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100% !important;                   /* beat inline height:auto + theme calc(100%+Npx) */
    max-height: none;
    -o-object-fit: fill;
    object-fit: fill;                          /* all logo rows stay in-box; % hotspots stay valid */
    -o-object-position: center;
    object-position: center;
}

/* --------------------------------------------------------------------------
   2) Featured Industrial Sewing Products
   Scope: first #home-top-banners only (.home-top-b). Popular Categories is
  : not(.home-top-b) and is not matched.
   - Theme html .btn-details { margin-bottom:40px }; homepage hides the button
     (display:none) but the margin still matters if that rule is relaxed, and
     .product-item itself carries core margin-bottom:40px (row gap).
   - Theme html .product-item .name { height:-webkit-fill-available; max-height:92px }
     makes short titles leave a tall empty name box.
   Phone tile margins (v6: 18px) and v7 last-row cancel stay coherent below.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    /* Tighter row gap inside Featured (was core 40px) */
    body.home-page #home #home-top-banners.home-top-b .product-items > .product-item {
        margin-bottom: 24px;
    }
    /* Keep v7 last-row cancel in sync with the new tile margin */
    body.home-page #home #home-top-banners.home-top-b .product-items {
        margin-bottom: -24px;                  /* was -40px in v7 */
    }

    /* Cap product names: 3 lines, shared min-height so short titles don’t
       leave a huge empty card bottom while long titles don’t blow the row */
    body.home-page #home #home-top-banners.home-top-b .product-item .name {
        height: auto;
        max-height: none;
        min-height: 63px;                      /* 3 Χ 21px theme line-height */
        margin-bottom: 8px;
        overflow: hidden;
    }
    body.home-page #home #home-top-banners.home-top-b .product-item .name a {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        line-height: 21px;
        max-height: 63px;
    }

    /* btn-details is display:none on .home-page, but if shown later / for
       specificity, keep a small bottom margin only inside Featured */
    body.home-page #home #home-top-banners.home-top-b .product-item .btn-details {
        margin-bottom: 18px;                   /* was 40px (theme) */
    }
}

/* Phone: keep v6 18px tile gap + v7 -18px cancel; only soften btn-details if shown */
@media (max-width: 767px) {
    body.home-page #home #home-top-banners.home-top-b .product-item .btn-details {
        margin: 0 auto 16px;                   /* was 28px in v6 phone tidy-up */
    }
}

/* --------------------------------------------------------------------------
   3) Popular Categories
   Second #home-top-banners — no .home-top-b class. Inline style is
   margin:35px auto (needs !important). Theme a.img-wrap { margin-bottom:30px }
   and h3.module-headings { margin-top/bottom:30px }.
   Phone popcat rules already set a.img-wrap { margin:0 }; keep that by
   limiting the img-wrap tighten to desktop/tablet.
   -------------------------------------------------------------------------- */
body.home-page #home #home-top-banners:not(.home-top-b) {
    margin: 18px auto !important;              /* was inline 35px auto */
}
body.home-page #home #home-top-banners:not(.home-top-b) > .container {
    padding-bottom: 10px;                      /* was 20px (theme html #home-top-banners .container) */
    margin-top: 0;                             /* was -10px */
}
body.home-page #home #home-top-banners:not(.home-top-b) h3.module-headings {
    margin-top: 16px;                          /* was 30px */
    margin-bottom: 16px;                       /* was 30px */
}
@media (min-width: 768px) {
    body.home-page #home #home-top-banners:not(.home-top-b) ul li > a.img-wrap {
        margin-bottom: 14px;                   /* was 30px */
    }
}