/*
 * 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: #336699;
  color: #fff;
  text-align: center;
}

/*
 * Header logo.
 *
 * Wolmart's demo logo is 144×45. Merchant uploads are often square marks that
 * blow the middle header row open; cap height to the demo mark and keep width
 * auto so wide wordmarks still fit the logo rail.
 */
.header-middle .logo img {
  max-height: 4.5rem;
  width: auto;
  max-width: 14.4rem;
  object-fit: contain;
}

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

/*
 * Newsletter popup ground. Wolmart paints a stock photograph of its own models
 * behind this panel from demo1.min.css, so every store that has never uploaded
 * a popup image was advertising someone else's photo shoot — the same reason
 * the demo product and category imagery was pruned.
 *
 * The vendor sheets are byte-for-byte copies and are never edited, so the rule
 * is overridden here instead. A plain light ground keeps the popup's own dark
 * text and primary-coloured accent readable, which the photograph did not
 * reliably do either.
 */
.newsletter-popup {
  background-image: none;
  background-color: #f5f5f5;
}