/* 32505 EPIC mockup (1095466 -> 32505 flip 2026-09-05) - operator-managed per-store CSS. 2026-08-27.
   Content-area links in brand blue so customers can spot them (Jeremy round-2 #4).
   Scoped to authored-content regions ONLY - nav, buttons and the header band keep
   their design colors (the topbar is dark; a blanket rule would go dark-on-dark).
   !important needed: the EPIC XML hard-codes epic-bundle.css AFTER css_advanced_user,
   so source order cannot win. :visited included - the bundle ships
   a:visited{color:inherit} which turns visited links into plain text, and the
   store owner has visited everything on his own site. getComputedStyle lies for
   visited links (privacy) - verify by screenshot, not computed color. */
.de_text-tool a,
.category-header-info a,
.epic-pd__prose a,
.epic-pd__abstract a,
.epic-blogview__content a,
#product-description a,
.de_text-tool a:visited,
.category-header-info a:visited,
.epic-pd__prose a:visited,
.epic-pd__abstract a:visited,
.epic-blogview__content a:visited,
#product-description a:visited {
  color: #2F9E44 !important;
  text-decoration: underline !important;
}

/* Round-4 (2026-08-28): links moved blue -> green (his blue buttons made blue
   links invisible). Links that ARE buttons (TinyMCE-authored anchors carrying
   an inline background) get white text instead - green-on-blue reads badly. */
.de_text-tool a[style*="background"],
.category-header-info a[style*="background"],
.epic-pd__prose a[style*="background"],
.epic-pd__abstract a[style*="background"],
#product-description a[style*="background"] {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Logo legibility on the toned header band: his logo art is blue/red on
   transparent, drawn for the live site's WHITE masthead. White chip behind it
   until a band-ready logo asset exists (photoroom white-bg version). */
.epic-header .epic-header__logo,
.epic-header a.logo_wrapper.main_logo {
  background: #ffffff;
  border-radius: 10px;
  padding: 6px 12px;
}


/* ================= Round-3 colour pass (Jeremy, 2026-08-27) =================
   Greens + reds alongside the brand blue, per his round-3 notes - kept as
   per-store CSS on purpose (shared EPIC tokens stay one brand pair).
   Green anchor #2F9E44 ~ the live site's cash-back green. */

/* Topbar (Need Help / Offers / email row): round-4 - red with white text per
   Jeremy's ask (was green in round 3; he moved the green to the links). */
.epic-header__topbar { background: #CF2E2E !important; }
.epic-header__topbar,
.epic-header__topbar a,
.epic-header__topbar a:visited,
.epic-header__topbar i { color: #ffffff !important; }

/* Shop-by cards: alternate the accent blue -> green on every second card.
   The tiles are inline-styled content blocks with no classes, so we key on
   the section's 230px grid template - operator-managed, revisit if he
   rebuilds the tiles in the editor. */
div[style*="minmax(230px"] > a:nth-child(even) strong { color: #2F9E44 !important; }
div[style*="minmax(230px"] > a:nth-child(even) span > span { color: #2F9E44 !important; }
div[style*="minmax(230px"] > a:nth-child(even) svg { stroke: #2F9E44 !important; }

/* Reds for the discount signals, echoing his legacy sale visuals. */
.flat-label.sale { background-color: #CF2E2E !important; color: #fff !important; }
.epic-badge--offer { background: #FDEBEB !important; color: #C22626 !important; border-color: #E9A8A8 !important; }

/* Blog cards: show roughly double the excerpt (his round-2 ask to expand
   the homepage blog block). Bundle clamps to 3 lines for everyone else. */
.epic-blog-card__excerpt { -webkit-line-clamp: 6 !important; line-clamp: 6 !important; }
/* ============== Round-5 (2026-08-28): desktop above-the-fold pass ==============
   Jeremy: "bring the Shop-by tiles closer to the banner - you can just barely
   see them at the bottom of the screen." Cap the hero band and trim the tile
   band's inline 48px padding (inline style needs !important). Scoped to the
   block directly after the slider so other 48px containers keep their rhythm.
   Desktop only - phones keep the full-height hero. */
@media (min-width: 992px) {
  .epic-hero--lg { min-height: 400px !important; }
  .epic-hero--lg .epic-hero__inner { padding-top: clamp(20px, 2.5vw, 40px); padding-bottom: clamp(20px, 2.5vw, 40px); }
  .slider-area + .container[style*="padding-top:48px"] { padding-top: 24px !important; padding-bottom: 28px !important; }
}

/* ============== Round-6 (2026-08-29): hero focal points ==============
   Jeremy: the 400px cap cropped the mini splits out of banners 2 and 3 -
   both photos have the unit mounted high on the wall (bedroom ~13-23% from
   the top, apartment ~4-13%) and object-fit:cover's default centre crop
   shows the 31-69% band at 1920px. Bias each image's crop toward its unit.
   Keyed on src (owl-carousel clones slides, so nth-child is unreliable).
   Same breakpoint as the cap - phones crop horizontally, units already show. */
@media (min-width: 992px) {
  /* Store-wide default for any FUTURE hero image: bias the crop toward the top,
     because mini split photos near-always have the unit high on a wall - the
     centred crop that caused this report would cause it again on his next upload.
     The per-image rules below have equal specificity, so they must FOLLOW this
     rule (source order decides). */
  .epic-hero--lg .epic-hero__img { object-position: center 25%; }
  .epic-hero--lg .epic-hero__img[src*="pexels_hero_closeup"] { object-position: center center; } /* slide 1: unit fills the frame, Jeremy approved the centre crop - keep it */
  .epic-hero--lg .epic-hero__img[src*="pexels_hero_bedroom"] { object-position: center 15%; }
  .epic-hero--lg .epic-hero__img[src*="pexels_hero_apartment"] { object-position: center 5%; }
}

/* ============== Round-8 (2026-09-01): round-7 mirror RETIRED ==============
   The bundle (epic-bundle.css?v=37) now skips its description normalizer for
   descriptions that ship their own  (#product-description:not(:has(style)),
   @supports-gated) - Jeremy's .msw-pd template styles itself again, so the 40-line
   color/size/line-height mirror that lived here is gone. If pills ever grey out
   again, check the bundle gate BEFORE re-adding a mirror. */

/* The template's document buttons are anchors - the round-3/4 green-link + underline
   rules above would repaint them; keep them as the template draws them. */
#product-description a.mpd-doc-btn,
#product-description a.mpd-doc-btn:visited {
  color: #1b1921 !important;
  text-decoration: none !important;
}

/* 2026-09-05 post-go-live (Jeremy): badge colours - blue New, red Sale, orange % OFF, green Promotion / Free Shipping stays as is */
.flat-label.percentage { background-color: #F28C28 !important; color: #fff !important; }
.epic-badge--promo { background: #E6F4EA !important; color: #1E7A34 !important; border-color: #8FCF9F !important; }
/* 2026-09-09: promotion pill on the listing cards. Solid + white text to match his other card
   pills (Sale, % OFF), in the same green as the PDP promotion badge above, so the listing and
   the product page agree. Platform default for this pill is the theme primary (his is blue);
   this keeps 32505 on the green he picked on 2026-09-05. */
.flat-label.promo { background-color: #1E7A34 !important; color: #fff !important; }

/* 2026-09-05 (Jeremy snag 1): subcategory strip always a flat grid - no side-scroll carousel, even for <= 8 subcategories */
.subcategories-carousel .owl-stage-outer { overflow: visible !important; }
.subcategories-carousel .owl-stage { transform: none !important; width: auto !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; padding: 6px 0; }
.subcategories-carousel .owl-item { width: auto !important; margin: 0 !important; text-align: center; }
.subcategories-carousel .owl-item img { width: 100%; max-width: 190px; height: auto; }
.subcategories-carousel .owl-dots, .subcategories-carousel .owl-nav { display: none !important; }

/* 2026-09-05 (Jeremy snag 3): "parent categories only" in the Products menu - hide the child lists under each mega-menu column */
.epic-header .megamenu-wrap .megamenu-wrap-item > ul { display: none !important; }

/* 2026-09-05 (Jeremy, clarified): Products mega-menu - every top-level category on its own full-width line (he meant the header menu, not the sidebar; sidebar tree rules removed) */
.epic-header .megamenu-wrap .megamenu-wrap-item { flex: 1 1 100% !important; max-width: none !important; min-width: 0 !important; order: 1; }

/* 2026-09-05 (Jeremy): /promotions/ page - eligible-product links were white on white */
.auto_discount_browse_products a, .auto_discount_offer_info a { color: var(--fws-primary) !important; text-decoration: underline !important; }

/* 2026-09-05 (Jeremy): hide the LOW STOCK label on product cards - he does not show stock levels, and with a low-stock threshold of 9 it was on 21 of 24 cards */
/* 2026-09-07: LOW STOCK hide retired - the card template now follows the store's "show stock levels" setting (off on this store). */

/* 2026-09-05 (Jeremy): the "Why Ductless Mini Splits" content block also sits under product pages and content pages - give it a readable width there */
.sidebar-content-block { max-width: 960px; margin-left: auto; margin-right: auto; }

/* 2026-09-06: the facet-tile icon cap that lived here moved into the shared epic_shop_by_facets template (.esbf-icon wrapper) - nothing store-specific needed now. */

/* 2026-09-17 (CLS): the 2026-09-05 rule above turns this store's subcategory carousel into a flat grid AFTER owl
   initialises. Give the strip that same grid from first paint at every width, so nothing jumps when owl takes over.
   (Shared epic-bundle.css pre-sizes a single carousel ROW for 8-or-fewer tiles, which is right for every other store.) */
.subcategories-wrapper.subcategories-carousel:not(.owl-carousel) { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; padding: 6px 0; overflow: visible !important; }
.subcategories-wrapper.subcategories-carousel:not(.owl-carousel) > .single-product { flex: none !important; text-align: center; }
.subcategories-wrapper.subcategories-carousel:not(.owl-carousel) > .single-product img { width: 100% !important; max-width: 190px; height: auto; }

div.hb-headline-text > p > span {
	
}

div.hb-text-holder > p {
	
}

a.hb-cta.hb-cta-button > div.hb-text-holder {
	background-color: #32CD32;
}