/*
 * 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: auto;
}

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

/*
 * 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:
 *   - 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-widget` (the Deal of the day side rail, and any other sidebar
 * "related products" list) is deliberately NOT exempted, unlike the two
 * above: Wolmart's own markup already sizes its thumb at the same 300:338
 * ratio (`width="105" height="118"`, see `partials/sections/countdown.ejs`)
 * — it was only ever left unenforced because it rode along with the
 * `.product-cart` exemption's actual reasoning, which does not apply here
 * (a swiper row, not a height-capped scroll list). Without the box fixed, a
 * merchant's own photo renders at whatever raw ratio it was uploaded in, so
 * the three rows in one rail come out three different heights.
 */
.product:not(.product-single):not(.product-list):not(.product-cart) .product-media {
  aspect-ratio: 300 / 338;
  overflow: hidden;
}

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

.product:not(.product-single):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 for popover dropdowns.
 */
.cart-dropdown:not(.cart-offcanvas) .products {
  overflow-x: hidden;
  overflow-y: auto;
}

/*
 * Cart Offcanvas Drawer: Full-height flex layout.
 *
 * Pinned subtotal and buttons at the bottom of the drawer sidebar; products list
 * consumes all remaining vertical space and scrolls only when items exceed available height.
 */
.cart-dropdown.cart-offcanvas .dropdown-box {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.cart-dropdown.cart-offcanvas .cart-header {
  flex: 0 0 auto !important;
  margin-bottom: 1.5rem !important;
}

.cart-dropdown.cart-offcanvas .products {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 1.5rem !important;
  margin-bottom: 1rem !important;
}

.cart-dropdown.cart-offcanvas .products::-webkit-scrollbar {
  width: 5px;
}

.cart-dropdown.cart-offcanvas .products::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.cart-dropdown.cart-offcanvas .products::-webkit-scrollbar-track {
  background: transparent;
}

.cart-dropdown.cart-offcanvas .cart-total {
  flex: 0 0 auto !important;
  margin-top: auto !important;
  padding: 1.5rem 0 1rem !important;
  margin-bottom: 0.5rem !important;
  border-top: 1px solid #eee;
}

.cart-dropdown.cart-offcanvas .cart-action {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
}

/* 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;
}

/*
 * With the announcement off, `.header-left` renders empty and `.header-top`
 * (a flex row with no vertical padding of its own) collapses to
 * `.header-right`'s bare line-height — the welcome-msg's own 14px top/bottom
 * padding was doing all of the row's vertical padding, so losing it left the
 * currency/account links pressed flush against the row's top and bottom.
 */
.header-top--no-announce {
  padding: 14px 0;
}

/*
 * The account dashboard gates its content behind an auth check with a plain
 * `hidden` attribute while `me()` resolves. But that wrapper also carries
 * Bootstrap's `.row` (`display: flex`), an author-stylesheet rule of equal
 * specificity to the `hidden` attribute — author CSS always wins over the
 * UA default that makes `[hidden]` mean `display: none`, so the dashboard
 * rendered fully visible for the whole async round-trip instead of staying
 * hidden until the check finished.
 */
[data-jr-account-body][hidden] {
  display: none;
}

/*
 * Same `[hidden]`-vs-author-CSS collision as above, on the verify-email form:
 * `.btn` sets its own `display`, so hiding the token field/submit button once
 * the emailed link's token has been auto-submitted (account.js) needs the
 * same explicit override.
 */
[data-jr-auth-verify-submit][hidden],
[data-jr-auth-verify-resend][hidden] {
  display: none;
}

/*
 * A section's "Supporting line" — the merchant copy under a rail/tab/band
 * title (partials/section-head.ejs). Wolmart's own `h2.title` has no built-in
 * subtitle slot, so this reads like normal body copy sitting right under it
 * rather than fighting the theme's own heading styles.
 */
.section-subtitle {
  color: #777;
  font-size: 1.4rem;
  line-height: 1.5;
}

/*
 * 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;
}

/* ==========================================================================
   Compare page — highlight the spec rows that actually differ
   --------------------------------------------------------------------------
   With 3-4 products most spec rows read the same value over and over; the
   row the shopper is actually deciding on is the one that disagrees.
   ========================================================================== */

.jr-compare__row--differs {
  background: var(--jr-brand-tint, #fff8ec);
}

.jr-compare__row--differs .compare-col.compare-field {
  font-weight: 600;
}

/* ==========================================================================
   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;
}

/* ==========================================================================
   "nav-top" swiper arrows — visible on hover regardless of what's behind them
   --------------------------------------------------------------------------
   Wolmart's own hover state (style.min.css `.nav-top > .swiper-button-next/
   prev:hover`) only swaps the glyph's *color* (#777 -> its demo blue
   #336699), with no background of its own. These arrows float directly over
   whatever the section behind them is — a photo, a coloured band, a plain
   card — so a colour-only hover can land on a near-identical background and
   the arrow effectively vanishes right when a shopper is hovering to use it.

   Rather than picking a single hover colour (which only shifts *where* it
   can blend in), give the glyph a small opaque backdrop + shadow on hover,
   so it reads as a raised chip against any background instead of bare text
   that depends on contrast it doesn't control. `color` is deliberately left
   alone here: it is one of the 326 declarations `generate-brand-bridge.js`
   already re-emits as the merchant's real `--jr-primary` (see
   `style.brand.generated.css`, loaded after this file), so it keeps
   resolving to the merchant's own brand colour on top of this chip rather
   than a colour this rule would just be overriding again.

   Same treatment on the `.single-product` duplicate of this rule (product
   gallery thumbnail nav), which has the identical colour-only hover.
   ========================================================================== */
.nav-top > .swiper-button-next:not(.swiper-button-disabled):hover,
.nav-top > .swiper-button-next:not(.swiper-button-disabled):active,
.nav-top > .swiper-button-next:not(.swiper-button-disabled):focus,
.nav-top > .swiper-button-prev:not(.swiper-button-disabled):hover,
.nav-top > .swiper-button-prev:not(.swiper-button-disabled):active,
.nav-top > .swiper-button-prev:not(.swiper-button-disabled):focus {
  background-color: #fff;
  border-color: transparent;
  border-radius: 50%;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.single-product .nav-top > .swiper-button-next:not(.swiper-button-disabled):hover,
.single-product .nav-top > .swiper-button-prev:not(.swiper-button-disabled):hover {
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

/*
 * Hero / other inner + large arrows use the same colour-only hover as nav-top
 * (Wolmart keeps background transparent on `.swiper-nav-lg` / `.nav-inner`), so
 * they vanish over a photo the same way. Same opaque chip treatment.
 */
.nav-inner > .swiper-button-next:not(.swiper-button-disabled):hover,
.nav-inner > .swiper-button-next:not(.swiper-button-disabled):active,
.nav-inner > .swiper-button-next:not(.swiper-button-disabled):focus,
.nav-inner > .swiper-button-prev:not(.swiper-button-disabled):hover,
.nav-inner > .swiper-button-prev:not(.swiper-button-disabled):active,
.nav-inner > .swiper-button-prev:not(.swiper-button-disabled):focus,
.swiper-nav-lg > .swiper-button-next:not(.swiper-button-disabled):hover,
.swiper-nav-lg > .swiper-button-next:not(.swiper-button-disabled):active,
.swiper-nav-lg > .swiper-button-next:not(.swiper-button-disabled):focus,
.swiper-nav-lg > .swiper-button-prev:not(.swiper-button-disabled):hover,
.swiper-nav-lg > .swiper-button-prev:not(.swiper-button-disabled):active,
.swiper-nav-lg > .swiper-button-prev:not(.swiper-button-disabled):focus {
  background-color: #fff !important;
  border-color: transparent;
  border-radius: 50%;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   Hero slider arrows
   --------------------------------------------------------------------------
   Wolmart's demo used `nav-hide` + `nav-xxl-show` (arrows only ≥1600px) and
   `nav-inner` (opacity 0 until the carousel is hovered) plus `swiper-nav-lg`
   (4.8rem bare glyphs). On a photo that reads as missing or tiny blue chevrons.
   Always-on white chips, readable at laptop widths.
   ========================================================================== */
.intro-section .intro-hero-nav > .swiper-button-prev,
.intro-section .intro-hero-nav > .swiper-button-next {
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  visibility: visible !important;
  width: 4.4rem;
  height: 4.4rem;
  margin: 0;
  background-color: #fff !important;
  border: none !important;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  color: var(--jr-primary, #336699) !important;
  font-size: 2rem !important;
  font-weight: 400;
  z-index: 3;
}
.intro-section .intro-hero-nav > .swiper-button-prev {
  left: 1.2rem !important;
}
.intro-section .intro-hero-nav > .swiper-button-next {
  right: 1.2rem !important;
}
.intro-section .intro-hero-nav > .swiper-button-prev:not(.swiper-button-disabled):hover,
.intro-section .intro-hero-nav > .swiper-button-prev:not(.swiper-button-disabled):focus,
.intro-section .intro-hero-nav > .swiper-button-prev:not(.swiper-button-disabled):active,
.intro-section .intro-hero-nav > .swiper-button-next:not(.swiper-button-disabled):hover,
.intro-section .intro-hero-nav > .swiper-button-next:not(.swiper-button-disabled):focus,
.intro-section .intro-hero-nav > .swiper-button-next:not(.swiper-button-disabled):active {
  background-color: #fff !important;
  color: var(--jr-primary, #336699) !important;
  border-color: transparent !important;
}
@media (max-width: 575px) {
  .intro-section .intro-hero-nav > .swiper-button-prev,
  .intro-section .intro-hero-nav > .swiper-button-next {
    width: 3.6rem;
    height: 3.6rem;
    font-size: 1.6rem !important;
  }
  .intro-section .intro-hero-nav > .swiper-button-prev {
    left: 0.6rem !important;
  }
  .intro-section .intro-hero-nav > .swiper-button-next {
    right: 0.6rem !important;
  }
}

/* ==========================================================================
   "My Profile" page (account-profile.ejs).

   The page previously rendered with none of Wolmart's own My Account CSS
   scaffolding applied — no `#account-details`/`#account-addresses` id, no
   `.tab-vertical` sidebar, and the generated address cards
   (account.js#renderAddresses) use `.ecommerce-address`/`.billing-address`
   classes that don't exist anywhere in style.min.css/demo1.min.css — so every
   section ran together as one unstyled wall of inputs. This groups each
   section into a bordered card, adds an avatar component Wolmart never
   shipped (WooCommerce's My Account has no upload-photo pattern to copy),
   and styles the address cards to match.
   ========================================================================== */
/*
 * account-profile.ejs deliberately does NOT put Wolmart's own `.tab-pane`
 * class on `#account-details`/`#account-addresses` — both sections are
 * always-visible page content, not switchable tabs, and `.tab-content >
 * .tab-pane` (style.min.css) is absolutely positioned with
 * height:0/opacity:0/visibility:hidden unless it also carries `.active`,
 * which would permanently hide the addresses section (there is no JS here to
 * ever add that class). These two ids replace the `#account-details.tab-pane`
 * / `#account-addresses.tab-pane` padding-top and paragraph rules that
 * therefore no longer match.
 */
#account-details,
#account-addresses {
  padding-top: 0.8rem;
}
.my-account .link-item.active a {
  color: var(--jr-primary, #336699);
}
#account-addresses > p {
  margin-bottom: 2.1rem;
  line-height: 1.6;
}

.jr-account-card {
  padding: 3rem 3.2rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
}
.jr-account-card .account-details-form {
  margin-bottom: 0;
}
#account-details .account-details-form .form-control,
#account-addresses .account-details-form .form-control {
  margin-bottom: 1.6rem;
  border-radius: 4px;
  font-size: 1.4rem;
  color: #333;
  border-color: #e2e2e2;
}
#account-details .account-details-form .row:last-of-type .form-control,
#account-details .account-details-form .form-group:last-of-type .form-control {
  margin-bottom: 0;
}
@media (max-width: 575px) {
  .jr-account-card {
    padding: 2.2rem 1.8rem;
  }
}

.jr-avatar-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.8rem;
  margin-bottom: 2.8rem;
  padding-bottom: 2.8rem;
  border-bottom: 1px solid #f0f0f0;
}
.jr-avatar {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 8.8rem;
  height: 8.8rem;
}
.jr-avatar img,
.jr-avatar-fallback {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  background: #f4f4f4;
  color: #bbb;
  font-size: 2.8rem;
  border: 1px solid #eee;
}
.jr-avatar img[hidden] {
  display: none;
}
.jr-avatar img:not([hidden]) ~ .jr-avatar-fallback {
  display: none;
}
.jr-avatar-edit {
  position: absolute;
  right: -0.2rem;
  bottom: -0.2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--jr-primary, #336699);
  color: #fff;
  font-size: 1.2rem;
  border: 2px solid #fff;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.2s, background-color 0.2s;
  transition: -webkit-transform 0.2s, background-color 0.2s;
  transition: transform 0.2s, background-color 0.2s;
  transition: transform 0.2s, background-color 0.2s, -webkit-transform 0.2s;
}
.jr-avatar-edit:hover {
  -webkit-transform: scale(1.08);
          transform: scale(1.08);
  background: #274d73;
}
.jr-avatar-remove {
  position: absolute;
  left: -0.2rem;
  top: -0.2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  color: #999;
  font-size: 1rem;
  border: 1px solid #eee;
  cursor: pointer;
  -webkit-transition: color 0.2s, border-color 0.2s;
  transition: color 0.2s, border-color 0.2s;
}
.jr-avatar-remove:hover {
  color: #e02b27;
  border-color: #e02b27;
}
.jr-avatar-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
}
.jr-avatar-hint {
  font-size: 1.2rem;
  color: #999;
}

[data-jr-profile-addresses] .ecommerce-address {
  height: 100%;
  padding: 2.4rem 2.6rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  -webkit-transition: box-shadow 0.3s, border-color 0.3s;
  transition: box-shadow 0.3s, border-color 0.3s;
}
[data-jr-profile-addresses] .ecommerce-address:hover {
  border-color: #ddd;
  -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
[data-jr-profile-addresses] .ecommerce-address .title-underline {
  padding-bottom: 1.2rem;
  margin-bottom: 1.4rem;
}
[data-jr-profile-addresses] .address-table th {
  padding-right: 0.8rem;
  white-space: nowrap;
  vertical-align: top;
}

/*
 * Checkout Order Summary & Product Line Items Redesign.
 * Fixes text truncation, provides a clean layout, displays thumbnail image,
 * full product name, and an explicit Qty badge.
 */
.order-summary-wrapper {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  padding: 2.5rem 2rem;
}

.order-summary-wrapper .title {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1e293b;
  border-bottom: 2px solid #f1f5f9;
  padding-bottom: 1.2rem;
  margin-bottom: 1.5rem;
}

.order-summary .order-table {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
}

.order-summary .order-table th {
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
}

.order-summary .order-table td {
  padding: 1.2rem 0 !important;
  vertical-align: middle !important;
}

.order-summary .order-table .product-name {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 1.2rem !important;
}

.checkout-product-thumb {
  width: 48px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.checkout-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.checkout-product-info {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;
}

.product-title-text {
  font-size: 1.35rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: break-word;
}

.product-quantity-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  background: #f0f7ff;
  color: var(--jr-primary, #336699);
  border: 1px solid rgba(51, 102, 153, 0.25);
  padding: 0.15rem 0.65rem;
  border-radius: 12px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.order-summary .order-table .product-total,
.order-table .product-total {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap !important;
  text-align: right !important;
  vertical-align: middle !important;
  min-width: 125px !important;
  padding-left: 1rem !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.order-summary .order-table tfoot tr,
.order-table tfoot tr {
  border-bottom: 1px solid #f1f5f9;
}

.order-summary .order-table tfoot td,
.order-summary .order-table tfoot th,
.order-table tfoot td,
.order-table tfoot th {
  padding: 1.1rem 0 !important;
  font-size: 1.4rem;
  color: #475569;
}

.order-summary .order-table tfoot td:last-child,
.order-summary .order-table tfoot th:last-child,
.order-table tfoot td:last-child,
.order-table tfoot th:last-child,
.order-table tfoot td.text-right {
  text-align: right !important;
  white-space: nowrap !important;
  min-width: 125px !important;
  padding-left: 1rem !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.order-summary .order-table tfoot td:last-child b,
.order-summary .order-table tfoot td:last-child span,
.order-table tfoot td:last-child b,
.order-table tfoot td:last-child span {
  white-space: nowrap !important;
}

.order-summary .order-table tfoot .order-total th,
.order-summary .order-table tfoot .order-total td,
.order-table tfoot .order-total th,
.order-table tfoot .order-total td {
  padding-top: 1.6rem !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: var(--jr-primary, #336699) !important;
  border-top: 2px solid #e2e8f0 !important;
}

.order-summary .btn-checkout-submit,
.order-summary .place-order .btn {
  height: 4.8rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 10px;
  transition: all 0.2s ease;
}

/*
 * Cart page table column alignment.
 */
.shop-table.cart-table {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
}

.shop-table.cart-table thead th {
  padding: 1.2rem 1rem !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  border-bottom: 2px solid #e2e8f0 !important;
  vertical-align: middle !important;
}

.shop-table.cart-table thead th.product-name {
  text-align: left !important;
  padding-left: 0.5rem !important;
}

.shop-table.cart-table thead th.product-price {
  text-align: left !important;
}

.shop-table.cart-table thead th.product-quantity {
  text-align: center !important;
}

.shop-table.cart-table thead th.product-subtotal {
  text-align: right !important;
  padding-right: 0.5rem !important;
}

.shop-table.cart-table tbody td {
  padding: 1.8rem 1rem !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.shop-table.cart-table tbody td.product-thumbnail {
  width: 90px !important;
  padding-left: 0 !important;
  padding-right: 1rem !important;
}

.shop-table.cart-table tbody td.product-name {
  text-align: left !important;
  font-weight: 600 !important;
  font-size: 1.4rem !important;
  color: #1e293b !important;
}

.shop-table.cart-table tbody td.product-price {
  text-align: left !important;
  font-size: 1.45rem !important;
  white-space: nowrap !important;
  color: #475569 !important;
}

.shop-table.cart-table tbody td.product-quantity {
  text-align: center !important;
}

.shop-table.cart-table tbody td.product-quantity .input-group {
  margin: 0 auto !important;
  max-width: 110px !important;
}

.shop-table.cart-table tbody td.product-subtotal {
  text-align: right !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  color: #0f172a !important;
  padding-right: 0.5rem !important;
}

/*
 * Cart Offcanvas Drawer Premium Redesign
 */
.cart-dropdown .dropdown-box,
.cart-offcanvas .dropdown-box {
  padding: 2rem !important;
  width: 360px !important;
  max-width: 90vw !important;
}

.cart-dropdown .cart-header,
.cart-offcanvas .cart-header {
  padding-bottom: 1.2rem !important;
  margin-bottom: 1rem !important;
  border-bottom: 2px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.cart-dropdown .cart-header span,
.cart-offcanvas .cart-header span {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.cart-dropdown .cart-header .btn-close,
.cart-offcanvas .cart-header .btn-close {
  font-size: 1.3rem !important;
  color: #64748b !important;
  font-weight: 600 !important;
  transition: color 0.15s ease !important;
}

.cart-dropdown .cart-header .btn-close:hover,
.cart-offcanvas .cart-header .btn-close:hover {
  color: var(--jr-primary, #336699) !important;
}

/* Individual Cart Line Item inside Drawer */
.jr-drawer-cart-item,
.product-cart.jr-cart-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 1.2rem !important;
  position: relative !important;
  padding: 1.4rem 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  margin: 0 !important;
}

.jr-drawer-cart-item .product-media,
.product-cart.jr-cart-item .product-media {
  width: 72px !important;
  height: 78px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
}

.jr-drawer-cart-item .product-media img,
.product-cart.jr-cart-item .product-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.jr-drawer-cart-item .product-detail,
.product-cart.jr-cart-item .product-detail {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
}

.jr-drawer-cart-item .product-name,
.product-cart.jr-cart-item .product-name {
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  padding-right: 1.8rem !important; /* Leave room for top-right remove button */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

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

.jr-drawer-cart-item .price-box,
.product-cart.jr-cart-item .price-box {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.jr-drawer-cart-item .product-price,
.product-cart.jr-cart-item .product-price {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

/* Remove 'x' pseudo-element appended by Wolmart */
.product-quantity:after,
.product-quantity::after,
.product-cart .product-quantity:after,
.product-cart .product-quantity::after,
.cart-dropdown .product-quantity:after,
.cart-dropdown .product-quantity::after {
  content: none !important;
  display: none !important;
}

/* Qty Stepper in Drawer */
.cart-drawer-qty-stepper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 20px !important;
  padding: 0.15rem 0.4rem !important;
  width: fit-content !important;
  margin-top: 0.2rem !important;
}

.cart-drawer-qty-stepper .cart-qty-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border: none !important;
  background: transparent !important;
  color: #475569 !important;
  font-size: 0.85rem !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
  line-height: 1 !important;
}

.cart-drawer-qty-stepper .cart-qty-btn:hover {
  background: var(--jr-primary, #336699) !important;
  color: #ffffff !important;
}

.cart-drawer-qty-stepper .product-quantity {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  min-width: 22px !important;
  text-align: center !important;
  padding: 0 0.2rem !important;
  display: inline-block !important;
}

/* Remove button top right */
.jr-drawer-cart-item .jr-drawer-remove-btn,
.product-cart.jr-cart-item .btn-close {
  position: absolute !important;
  top: 1.2rem !important;
  right: 0 !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
}

.jr-drawer-cart-item .jr-drawer-remove-btn:hover,
.product-cart.jr-cart-item .btn-close:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
}

/* Cart Subtotal Footer */
.cart-dropdown .cart-total,
.cart-offcanvas .cart-total {
  padding: 1.6rem 0 1.2rem !important;
  margin-top: 1rem !important;
  border-top: 2px solid #f1f5f9 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.cart-dropdown .cart-total label,
.cart-offcanvas .cart-total label {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
}

.cart-dropdown .cart-total .price,
.cart-offcanvas .cart-total .price {
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: var(--jr-primary, #336699) !important;
}

.cart-dropdown .cart-action,
.cart-offcanvas .cart-action {
  display: flex !important;
  gap: 1rem !important;
  margin-top: 1.2rem !important;
}

.cart-dropdown .cart-action .btn,
.cart-offcanvas .cart-action .btn {
  flex: 1 !important;
  height: 4.4rem !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   Browse Categories Dropdown — Click Toggle Control
   --------------------------------------------------------------------------
   Overrides Wolmart demo1.min.css default pinning (.header-bottom:not(.fixed)
   .dropdown-box) so Browse Categories opens and closes strictly on click
   across all pages including the homepage.
   ========================================================================== */
.header-bottom:not(.fixed) .category-dropdown:not(.show) .dropdown-box,
.category-dropdown:not(.show) .dropdown-box,
.category-dropdown:not(.show)::after,
.category-dropdown:hover:not(.show) .dropdown-box,
.category-dropdown:hover:not(.show)::after {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(0, -1rem, 0) !important;
}

.category-dropdown.show .dropdown-box,
.category-dropdown.show::after,
.header-bottom:not(.fixed) .category-dropdown.show .dropdown-box {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
  z-index: 1090 !important;
}



/*
 * Account → Orders "Write a review" button.
 *
 * Wolmart styles every `#account-orders .order-action .btn` as an outline
 * button with `color: #333`, which also hits our solid `.btn-dark` — dark text
 * on a dark fill, readable only on hover. Restore the solid button's colours.
 */
#account-orders .order-action .btn-dark,
#account-orders .order-action .btn-dark:hover,
#account-orders .order-action .btn-dark:active,
#account-orders .order-action .btn-dark:focus {
  color: #fff;
  border-color: var(--jr-primary, #336699);
  background-color: var(--jr-primary, #336699);
}
#account-orders .order-action .btn-dark:hover {
  filter: brightness(0.92);
}

/* Merchant reply under a product review. */
.jr-review-reply {
  margin-top: 1.2rem;
  padding: 1.2rem 1.6rem;
  border: 1px solid color-mix(in srgb, var(--jr-primary, #336699) 18%, #e5e5e5);
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--jr-primary, #336699) 6%, #fff);
}
.jr-review-reply__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.4rem;
  color: var(--jr-primary, #336699);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.jr-review-reply__label i {
  font-size: 1.5rem;
}
.jr-review-reply__body {
  margin: 0;
  color: #444;
  line-height: 1.7;
  white-space: pre-line;
}

/* Checkout "Placing order..." spinner (src/public/js/checkout.js). */
.jr-btn-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: -0.125em;
  border: 0.15em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: jr-btn-spin 0.75s linear infinite;
}
@keyframes jr-btn-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .jr-btn-spinner { animation-duration: 1.5s; }
}