/*
 * Theme-owned corrections, loaded after Wolmart's stylesheets.
 *
 * Wolmart's CSS is byte-copied from the purchased theme and is never edited, so
 * anything that has to change lives here instead. Every rule needs a reason: a
 * demo page that a real catalogue breaks. Wolmart's demo copy is short and
 * uniform; a merchant's is not, and that difference is invisible until real
 * data is on the page.
 */

/*
 * Checkout order summary.
 *
 * `.order-table` has no width constraint, so it takes its intrinsic width from
 * its content. Wolmart's demo line items are short ("Beige knitted…"); a real
 * one — "Cast & Copper Enamelled Dutch Oven, 5.5 qt × 1" — pushes the table to
 * 385px inside a 375px viewport, and the whole checkout page then scrolls
 * sideways on a phone. Measured at 375px: 431px document width before, 375px
 * after.
 */
.order-table {
  width: 100%;
  table-layout: fixed;
}

.order-table th,
.order-table td {
  overflow-wrap: anywhere;
}

/*
 * Blog post author box.
 *
 * Wolmart's author name is `white-space: nowrap` inside a flex item with the
 * default `min-width: auto`, so the block cannot shrink and the name cannot
 * wrap. That holds together for its demo author ("John Doe") and breaks for a
 * real store name — "The Gourmet Kitchen (AUTHOR)" pushes the post page to
 * 406px inside a 375px viewport and the whole article scrolls sideways.
 *
 * Selectors match Wolmart's own specificity (`.post-single-content
 * .author-details .author-name`) because a shorter one loses to it. Measured at
 * 375px: 406px before, 375px after; unchanged at 414, 768 and 1440.
 */
.post-single-content .author-details,
.post-single-content .author-details .author-name-wrapper,
.post-single-content .author-details .author-name {
  min-width: 0;
}

.post-single-content .author-details .author-name {
  white-space: normal;
}

.post-single-content .author-details {
  overflow-wrap: anywhere;
}

/*
 * Header compare / wishlist badges.
 *
 * Reuse Wolmart's `.cart-count` pill on those icons; the icon itself needs
 * `position: relative` or the absolute badge floats against the header instead.
 * Wolmart only scopes the pill under `.cart-dropdown`, so wishlist/compare need
 * the same rules here or the count renders as plain text under the icon.
 */
.compare > i,
.wishlist > i {
  position: relative;
}

.wishlist .cart-count,
.compare .cart-count {
  position: absolute;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  font-style: normal;
  z-index: 1;
  right: -8px;
  top: -5px;
  font-family: Poppins, sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.8rem;
  background: var(--jr-primary, #336699);
  color: var(--jr-on-primary, #fff);
  text-align: center;
}

/*
 * Secondary brand utilities.
 *
 * The generated brand bridge maps Wolmart's #336699 wholesale because that hex
 * means exactly one thing. Its secondary hex does not: #f93 (style.min.css) and
 * #f77c29 (demo1.min.css) each paint .text-secondary AND .ratings::before AND
 * .alert-warning / .product-label.label-discount. Star ratings and warning
 * badges are not the merchant's secondary colour, so a blanket swap would be
 * wrong and the two utilities the theme actually renders are bridged by hand.
 *
 * Rendered by: the announcement bar (partials/header.ejs, `bg-secondary
 * text-white`), hero slide body, promo badges, the CTA band, and the 404.
 * .btn-secondary is deliberately absent — no view uses it, and listing it would
 * mean maintaining a bridge for something that never renders.
 *
 * !important matches Wolmart's own .text-secondary / .bg-secondary utilities,
 * which a plain rule loses to. The fallback hex is style.min.css's, used only if
 * the variable block in layouts/main.ejs is missing.
 */
.text-secondary {
  color: var(--jr-secondary, #f93) !important;
}

.bg-secondary {
  background-color: var(--jr-secondary, #f93) !important;
}

/*
 * The announcement bar is built as `bg-secondary text-white`, so the readable
 * foreground has to beat .text-white rather than sit alongside it. onSecondary
 * is resolved by contrastColor() in src/lib/theme.js, so a pale secondary gets
 * dark text instead of white-on-pale.
 */
.bg-secondary.text-white {
  color: var(--jr-on-secondary, #fff) !important;
}

/*
 * Storefront Logo (Header, Footer & Mobile).
 *
 * Responsive logo sizing for web and mobile viewports.
 * Max height is increased to 6.5rem (~65px) on desktop and 5.5rem / 5.0rem on mobile,
 * allowing merchant logos to appear crisp, prominent, and properly proportioned without fixed stretching.
 */
.header-middle .logo {
  display: flex;
  align-items: center;
}

.header-middle .logo img {
  max-height: 8.5rem;
  width: auto;
  max-width: 28rem;
  object-fit: contain;
  object-position: left center;
}

.logo-footer img {
  max-height: 7.5rem;
  width: auto;
  max-width: 25rem;
  object-fit: contain;
}

.coming-content .logo img {
  max-height: 8.5rem;
  width: auto;
  max-width: 28rem;
  object-fit: contain;
}

@media (max-width: 991px) {
  .header-middle .logo img {
    max-height: 6.5rem;
    max-width: 22rem;
  }
}

@media (max-width: 479px) {
  .header-middle .logo img {
    max-height: 5.5rem;
    max-width: 18rem;
    object-position: center;
  }
  .logo-footer img {
    max-height: 6.0rem;
    max-width: 20rem;
  }
}

/*
 * Compare popup empty slots.
 *
 * Wolmart paints a "+" via `li:empty::before` so unused slots look like add
 * buttons. They are not buttons — products are added from the card compare
 * control — so the plus is decorative and misleading. Hide it; keep the empty
 * frame so the four-slot layout still holds.
 */
.compare-product-list li:empty::before {
  content: none;
  display: none;
}

/*
 * Newsletter popup uses Wolmart's bundled `images/newsletter-1.jpg` (and
 * `newsletter-2.jpg` under 768px) from style/demo CSS. Merchants edit copy and
 * the on/off toggle only — there is no popup image upload on book-mart.
 */

/*
 * Image boxes: the card decides the shape, not the upload.
 *
 * Wolmart sizes every image with `width: 100%; height: auto`, so the picture
 * dictates the box. That works only because its demo photography is all
 * pre-cropped to 300x338 and 130x130. A merchant uploading a real file — a wide
 * logo, a portrait phone photo — gets a card the wrong height, a rail of
 * different-sized circles, and a grid that no longer lines up.
 *
 * So the box is fixed at Wolmart's own ratios and the image fills it with
 * `object-fit: cover`, which is already what Wolmart applies to the second
 * (hover) image of a product card — matching it keeps the two frames identical,
 * where `contain` would make the picture jump on hover.
 *
 * Scoped away from:
 *   - sidebar `.product-widget` thumbnails
 *   - list-view `.product-list` rows
 *   - mini-cart `.product-cart` lines — those are flex rows with an 8rem thumb;
 *     the card ratio turns each line ~9rem tall, the `.products` box caps at
 *     28rem without overflow scrolling, and four items paint over Subtotal /
 *     View Cart / Checkout (the "crashed" drawer).
 */
.product:not(.product-single):not(.product-widget):not(.product-list):not(.product-cart) .product-media {
  aspect-ratio: 300 / 338;
  overflow: hidden;
}

.product:not(.product-single):not(.product-widget):not(.product-list):not(.product-cart) .product-media > a {
  display: block;
  height: 100%;
}

.product:not(.product-single):not(.product-widget):not(.product-list):not(.product-cart) .product-media img {
  height: 100%;
  object-fit: cover;
}

/*
 * Mini-cart list: scroll when the shopper has more lines than Wolmart's
 * 28rem cap. Demo carts are two short items; a real four-item cart overflows
 * the box and, with `overflow: visible`, covers the footer actions.
 */
.cart-dropdown .products {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Category tiles and circles: square box, image fills it. A circle showing a
   letterboxed wide logo reads as a broken image. */
.category .category-media,
.category-ellipse .category-media,
.category-classic .category-media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.category .category-media img,
.category-ellipse .category-media img,
.category-classic .category-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Top Categories nav. Wolmart's default .swiper-theme arrows sit at ±40px
   outside the track; .container clips them on wide viewports so the strip
   looked undraggable. Keep the buttons inside the band (same inset Wolmart
   already uses below 1300px) and above the tiles. */
.category-section.top-category .swiper-theme > .swiper-button-prev {
  left: 0.5rem;
  z-index: 2;
}
.category-section.top-category .swiper-theme > .swiper-button-next {
  right: 0.5rem;
  z-index: 2;
}

/* About Us body: merchant HTML from Brand/About (sanitized). Match Wolmart's
   .introduce p column (max-width 57rem, centred) — left-aligned prose inside a
   full-width block left a blank half-page. */
.about-us .introduce .about-prose {
  max-width: 57rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4.3rem;
  text-align: center;
}
.about-us .introduce .about-prose p {
  margin-bottom: 1.25rem;
  max-width: none;
}
.about-us .introduce .about-prose p:last-child {
  margin-bottom: 0;
}
.about-us .introduce .about-prose ul,
.about-us .introduce .about-prose ol {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  text-align: left;
}
.about-us .introduce .about-prose h2,
.about-us .introduce .about-prose h3,
.about-us .introduce .about-prose h4 {
  margin: 1.75rem 0 0.75rem;
  text-align: center;
}

/*
 * Announcement bar CTA. Wolmart resets every `a` to no underline, so the link
 * label reads as more of the same uppercase message unless we mark it.
 */
.header-top .welcome-msg a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/*
 * Quick View Popup redesign & layout fixes.
 *
 * 1. Removes fixed height & inner scrollbar from `.product-details`.
 * 2. Allows full modal to extend naturally and scroll with screen overlay (`.mfp-wrap`).
 * 3. Modernizes Quick View typography, close button, badges, variant pills & add to cart.
 */
.mfp-product .mfp-container {
  padding: 3rem 1.5rem !important;
}

.mfp-product .mfp-content {
  max-width: 920px !important;
  margin: auto !important;
}

.product-popup {
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 3.5rem 3rem !important;
  position: relative !important;
  overflow: visible !important;
}

@media (max-width: 767px) {
  .product-popup {
    padding: 2.5rem 1.5rem 2rem !important;
  }
}

/* Force override on fixed height and inner scrollbar attached to .product-details */
.product-popup .product-details,
.mfp-product .product-details {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-left: 0 !important;
}

/* Modern circular close button positioned inside the top-right corner */
.mfp-product .mfp-close {
  position: absolute !important;
  top: 1.2rem !important;
  right: 1.2rem !important;
  width: 3.6rem !important;
  height: 3.6rem !important;
  border-radius: 50% !important;
  background: #f3f4f6 !important;
  color: #374151 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  z-index: 20 !important;
  border: none !important;
  transform: none !important;
  font-size: 0 !important;
}

.mfp-product .mfp-close::before,
.mfp-product .mfp-close::after {
  content: "" !important;
  position: absolute !important;
  width: 1.6rem !important;
  height: 2px !important;
  background-color: #374151 !important;
  top: 50% !important;
  left: 50% !important;
  border-radius: 1px !important;
  transition: background-color 0.2s ease !important;
}

.mfp-product .mfp-close::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.mfp-product .mfp-close::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.mfp-product .mfp-close:hover {
  background: #e5e7eb !important;
  transform: scale(1.08) !important;
}

.mfp-product .mfp-close:hover::before,
.mfp-product .mfp-close:hover::after {
  background-color: #111827 !important;
}

/* Gallery main media styling */
.product-popup .product-gallery figure {
  border-radius: 12px;
  overflow: hidden;
}

/* Typography, Title & Meta */
.product-popup .product-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  margin-bottom: 0.8rem;
  letter-spacing: -0.01em;
}

.product-popup .product-title a {
  color: inherit;
  transition: color 0.2s ease;
}

.product-popup .product-title a:hover {
  color: var(--jr-primary, #336699);
}

.product-popup .product-bm-wrapper {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.product-popup .brand {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.2rem;
  color: #374151;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  padding: 0.3rem 0.9rem;
  border-radius: 6px;
}

.product-popup .product-categories {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.2rem;
  color: #6b7280;
}

.product-popup .product-sku {
  font-size: 1.2rem;
  color: #6b7280;
  background: #f3f4f6;
  padding: 0.3rem 0.9rem;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.product-popup .product-divider {
  border: 0;
  border-top: 1px solid #f3f4f6;
  margin: 1.4rem 0;
}

.product-popup [data-jr-pdp-price] .product-price {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--jr-primary, #336699);
}

.product-popup .product-variation-price:empty,
.product-popup .product-variation-price span:empty {
  display: none !important;
}

/* Bullet list */
.product-popup .product-short-desc {
  color: #4b5563;
  font-size: 1.35rem;
  line-height: 1.65;
  margin: 1.2rem 0;
}

/* Options / Swatches */
.product-popup .product-variations a.size {
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #374151;
  font-weight: 500;
  font-size: 1.3rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.product-popup .product-variations a.size:hover {
  border-color: var(--jr-primary, #336699);
  color: var(--jr-primary, #336699);
  background: #f0f7ff;
}

.product-popup .product-variations a.size.active {
  border-color: var(--jr-primary, #336699);
  background: var(--jr-primary, #336699);
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

/* Cart & Quantity Row */
.product-popup .product-form {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.6rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}

.product-popup .product-qty-form .input-group {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  overflow: hidden;
  height: 4.6rem;
}

.product-popup .product-qty-form .form-control {
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 1.5rem;
  color: #111827;
  height: 100%;
}

.product-popup .product-qty-form button {
  background: transparent;
  border: none;
  color: #4b5563;
  width: 3.6rem;
  height: 100%;
  transition: background 0.2s;
}

.product-popup .product-qty-form button:hover {
  background: #e5e7eb;
  color: #111827;
}

.product-popup .btn-cart {
  height: 4.6rem;
  padding: 0 2.8rem;
  border-radius: 10px;
  background: var(--jr-primary, #336699);
  color: #ffffff;
  font-weight: 600;
  font-size: 1.4rem;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  flex: 1;
  min-width: 170px;
}

.product-popup .btn-cart:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  background: var(--jr-primary, #336699);
  color: #ffffff;
}

/* Footer links */
.product-popup .social-links-wrapper {
  border-top: 1px solid #f3f4f6;
  padding-top: 1.5rem;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/*
 * Home page categories section slider height cap.
 * Ensures categories stay strictly in a single-row slider without wrapping into multiple rows.
 */
.category-section.top-category .swiper-container {
  overflow: hidden;
  position: relative;
}

.category-section.top-category .swiper-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
}

.category-section.top-category .swiper-slide {
  flex-shrink: 0 !important;
  height: auto;
}

/*
 * Header Category Dropdown height & scrolling fix.
 * Caps dropdown height to max ~10 categories plus the View All Categories link.
 */
.category-dropdown .dropdown-box {
  max-height: 480px !important;
  /* overflow-y: auto !important; */
  overscroll-behavior: contain;
}

.category-dropdown .vertical-menu.category-menu {
  display: flex !important;
  flex-direction: column !important;
  max-height: 480px !important;
  width: 100% !important;
  min-width: 26rem !important;
}

.category-dropdown .vertical-menu.category-menu > li:last-child > a {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  border-top: 1px solid #f3f4f6;
  color: var(--jr-primary, #336699) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/*
 * Category Mega Menu Sizing & Text Truncation.
 * Respects Wolmart's native positioning, flex row layout, and hover state while preventing column overflow.
 */
.category-menu .megamenu {
  min-width: 65rem !important;
  max-width: 82rem !important;
}

.category-menu .megamenu > li {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.category-menu .megamenu .menu-title {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: #1e293b !important;
  margin-bottom: 0.8rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.category-menu .megamenu .menu-title a {
  color: inherit !important;
}

.category-menu .megamenu .menu-title a:hover {
  color: var(--jr-primary, #336699) !important;
}

.category-menu .megamenu ul li a {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

.menu-view-more a {
  color: var(--jr-primary, #336699) !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  margin-top: 0.4rem !important;
}

.menu-view-more a:hover {
  text-decoration: underline !important;
}

/*
 * Blog / News Sidebar Tag Badges styling.
 */
.widget-tags-wrapper .tag-badge,
.widget-tags .tag-badge {
  display: inline-block;
  padding: 0.4rem 1.2rem;
  margin: 0.3rem 0.4rem 0.3rem 0;
  border-radius: 20px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  font-size: 1.2rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.widget-tags-wrapper .tag-badge:hover,
.widget-tags .tag-badge:hover {
  background: var(--jr-primary, #336699);
  border-color: var(--jr-primary, #336699);
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Shop List View (.product-list) Layout
   ========================================================================== */
.product.product-list {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 2rem !important;
  padding: 1.5rem !important;
  background: #ffffff !important;
  border: 1px solid #eee !important;
  border-radius: 8px !important;
  margin-bottom: 2rem !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.product.product-list:hover {
  border-color: #ddd !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Fixed thumbnail image on the left */
.product.product-list .product-media {
  flex: 0 0 240px !important;
  width: 240px !important;
  max-width: 240px !important;
  height: 240px !important;
  aspect-ratio: 1 / 1 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  margin: 0 !important;
}

.product.product-list .product-media > a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.product.product-list .product-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Product details on the right */
.product.product-list .product-details {
  flex: 1 1 auto !important;
  padding: 0 !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.product.product-list .product-cat {
  font-size: 1.2rem !important;
  text-transform: uppercase !important;
  color: #999 !important;
  margin-bottom: 0.4rem !important;
}

.product.product-list .product-name {
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin-bottom: 0.6rem !important;
  line-height: 1.3 !important;
}

.product.product-list .product-name a {
  color: inherit !important;
}

.product.product-list .product-name a:hover {
  color: var(--jr-primary, #336699) !important;
}

.product.product-list .ratings-container {
  margin-bottom: 0.8rem !important;
}

.product.product-list .product-pa-wrapper {
  margin-bottom: 1rem !important;
}

.product.product-list .product-price {
  font-size: 2rem !important;
  font-weight: 700 !important;
}

.product.product-list .product-short-desc {
  font-size: 1.3rem !important;
  color: #666 !important;
  line-height: 1.6 !important;
  margin-bottom: 1.5rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.product.product-list .product-action-list {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-top: auto !important;
}

/* Action button styling in list view */
.product.product-list .btn-cart-list {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 0.8rem 1.8rem !important;
  background: var(--jr-primary, #336699) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  transition: background 0.2s ease !important;
}

.product.product-list .btn-cart-list:hover {
  background: #28527a !important;
  color: #fff !important;
}

.product.product-list .btn-product-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid #eee !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #666 !important;
  background: #fff !important;
  font-size: 1.4rem !important;
  transition: all 0.2s ease !important;
}

.product.product-list .btn-product-icon:hover {
  background: var(--jr-primary, #336699) !important;
  color: #fff !important;
  border-color: var(--jr-primary, #336699) !important;
}

@media (max-width: 575px) {
  .product.product-list {
    flex-direction: column !important;
  }
  .product.product-list .product-media {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;
  }
}

/* ==========================================================================
   Header Main Navigation Shop Megamenu Width & Overflow Fix
   ========================================================================== */
.header-bottom .inner-wrap {
  position: relative !important;
}

.main-nav .menu > li.has-megamenu {
  position: static !important;
}

/* Ensure megamenu spans full container width, wraps neatly with no inner scrollbar.
   Scoped to .main-nav only — the vertical category-menu uses a separate flyout rule below. */
.main-nav .menu .megamenu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  max-height: none !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
  border-radius: 8px !important;
  padding: 2rem 1.5rem !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
}

.main-nav .menu > li:hover .megamenu,
.main-nav .menu > li.show .megamenu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ==========================================================================
   Vertical category-menu megamenu flyout — starts from the right edge of the
   hovered <li>, not pinned to the page left edge.
   ========================================================================== */
.category-menu > li {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.category-menu > li > .megamenu {
  /* Flyout to the right of the hovered category row */
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  right: auto !important;
  /* Fixed wide panel */
  width: 680px !important;
  min-width: 680px !important;
  max-width: 680px !important;
  /* Flex row: sub-category columns on the left, banner image pinned right */
  display: none;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  /* Visual chrome */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  z-index: 1000 !important;
  overflow: hidden !important;
}

.category-menu > li:hover > .megamenu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Sub-category columns area */
.category-menu > li > .megamenu > li {
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 1.8rem 1.4rem !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  list-style: none;
}

/* Banner image <li> — pinned to the right at a fixed width */
.category-menu > li > .megamenu > li.menu-banner-col {
  flex: 0 0 200px !important;
  width: 200px !important;
  max-width: 200px !important;
  min-width: 200px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Banner image fills the right column exactly */
.category-menu li .megamenu > li:last-child .menu-banner,
.category-menu li .megamenu > li:last-child .banner-fixed {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

.category-menu li .megamenu > li:last-child .menu-banner figure,
.category-menu li .megamenu > li:last-child .banner-fixed figure {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.category-menu li .megamenu > li:last-child .menu-banner figure img,
.category-menu li .megamenu > li:last-child .banner-fixed figure img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Banner content overlay on the image */
.category-menu li .megamenu > li:last-child .banner-content {
  position: absolute !important;
  bottom: 1.6rem !important;
  left: 1.2rem !important;
  right: 1.2rem !important;
}

.category-menu li .megamenu > li:last-child .banner-title {
  color: #ffffff !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
  margin-bottom: 0.6rem !important;
}

/* Grid column formatting for megamenu category blocks (5 columns) — top nav only */
.main-nav .menu .megamenu > li {
  flex: 0 0 20% !important;
  max-width: 20% !important;
  padding: 1rem 1.2rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Responsive columns: 4 cols on smaller desktop screens — top nav only */
@media (max-width: 1200px) {
  .main-nav .menu .megamenu > li {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}

@media (max-width: 991px) {
  .main-nav .menu .megamenu > li,
  .megamenu > li {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }
}

/* Typography & divider styling inside megamenu columns */
.megamenu .menu-title {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #222 !important;
  margin-bottom: 0.6rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.megamenu .menu-title a {
  color: inherit !important;
}

.megamenu .menu-title a:hover {
  color: var(--jr-primary, #336699) !important;
}

.megamenu hr.divider {
  margin: 0.4rem 0 0.8rem 0 !important;
  border-top: 1px solid #eee !important;
}

.megamenu ul {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.megamenu ul li {
  margin-bottom: 0.5rem !important;
}

.megamenu ul li a {
  font-size: 1.3rem !important;
  color: #666 !important;
  transition: color 0.2s ease !important;
  display: inline-block !important;
}

.megamenu ul li a:hover {
  color: var(--jr-primary, #336699) !important;
}

/* View All Categories box in the 10th slot (last right corner) */
.megamenu .megamenu-view-all-box {
  background: #f8fafc !important;
  border: 1.5px dashed var(--jr-primary, #336699) !important;
  border-radius: 6px !important;
  padding: 1.2rem 1.4rem !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

.megamenu .megamenu-view-all-box .btn {
  margin-top: 0.4rem !important;
  font-size: 1.2rem !important;
  padding: 0.6rem 1.2rem !important;
}



/* ==========================================================================
   Brands We Carry — uniform logo grid
   --------------------------------------------------------------------------
   One swiper-slide per brand logo. Each slide contains a single .brand-wrapper
   figure. The swiper handles column count via slidesPerView breakpoints.
   ========================================================================== */

/* Each slide fills its swiper track slot */
.brands-wrapper .swiper-slide {
  height: auto !important;
}

/* Logo cell: fixed height, centred, white background */
.brands-wrapper .brand-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 110px !important;
  padding: 1.4rem 1.6rem !important;
  background: #ffffff !important;
  border: 1px solid #eeeeee !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  margin: 0 !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.brands-wrapper .brand-wrapper:hover {
  background: #f8fafc !important;
  border-color: #d9e4ef !important;
}


/* Logo image: proportional, contained, no checkerboard on transparent PNGs */
.brands-wrapper .brand-wrapper img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 140px !important;
  max-height: 70px !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: grayscale(20%) !important;
  transition: filter 0.25s ease, transform 0.2s ease !important;
}

.brands-wrapper .brand-wrapper:hover img {
  filter: grayscale(0%) !important;
  transform: scale(1.05) !important;
}

/* ==========================================================================
   Compare page — consistent product image size
   --------------------------------------------------------------------------
   With only 1 product the column takes ~50% of the container (cols-2 fallback),
   making the product image enormous. Cap the media figure at a fixed height and
   use object-fit:contain so 1-product and 4-product compare look identical.
   ========================================================================== */

.compare-product .product-media {
  width: 100% !important;
  max-width: 260px !important;
  height: 260px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fafafa !important;
  border: 1px solid #f0f0f0 !important;
  border-radius: 6px !important;
}

.compare-product .product-media a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.compare-product .product-media img {
  max-width: 100% !important;
  max-height: 220px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}

/* ==========================================================================
   Header "Browse Categories" panel — reserve its own height instead of
   overlapping whatever section leads the homepage
   --------------------------------------------------------------------------
   Wolmart's own panel (`.category-dropdown .dropdown-box`) is `position:
   absolute` and pinned permanently visible while the header has not gone
   sticky (`.header-bottom:not(.fixed) .dropdown-box { visibility: visible;
   }`, demo1.min.css) — untouched here, same hover-to-open behavior as
   stock Wolmart. That is fine when Hero (a tall banner) leads the page, but
   once Section order puts a shorter section first, the panel's fixed
   `max-height: 480px` (set above) sits over it instead of a photo corner.
   Give `.header-bottom` itself that same 480px as bottom padding — on the
   *row*, not on `.category-dropdown` (one item among several in that row's
   flex layout; padding there only stretched that one item and threw the
   rest of the row out of alignment). The row grows, so the next section
   starts below it; the panel keeps rendering at its normal position within
   that now-taller row, with nothing behind it to cover.
   `:not(.fixed)` mirrors Wolmart's own guard above: once the header goes
   sticky on scroll, its pinned-open rule stops applying and the panel goes
   back to a normal hover dropdown, so the reserved space must disappear
   too — leaving it in place produced a permanent blank gap under the fixed
   bar.
   Scoped to `jr-home-not-hero-first`, added to `<body>` by the layout
   (layouts/main.ejs) only on the home page, only when `sectionOrder[0]` is
   not `hero`.
   ========================================================================== */
body.jr-home-not-hero-first .header-bottom:not(.fixed) {
  padding-bottom: 480px;
}