/**
 * Walmart-Style Theme for Zen Cart "responsive_classic" template
 * ------------------------------------------------------------------
 * Auto-loaded by the CSS loader (filename starts with "style").
 * Loads AFTER stylesheet.css / stylesheet_colors.css but BEFORE
 * responsive.css, so colors use !important to win against the
 * dynamic color file and the responsive overrides.
 *
 * Palette (Walmart official brand guidelines):
 *   Walmart Blue  #0071dc   (header / primary buttons)
 *   Spark Yellow  #ffc220   (search button accent)
 *   Ozark Noir    #041e42   (text on white, footer bg)
 *   Rollback Red  #de1c24   (special / rollback price)
 */

:root {
    --wm-blue: #0071dc;
    --wm-blue-dark: #004f9a;
    --wm-yellow: #ffc220;
    --wm-yellow-dark: #e6ad00;
    --wm-red: #de1c24;
    --wm-ink: #041e42;       /* Ozark Noir */
    --wm-text: #041e42;
    --wm-bg: #ffffff;
    --wm-gray-bg: #f5f5f5;
    --wm-border: #e2e2e3;
    --wm-green: #007600;
    --wm-font: "Martel Sans", "Walmart Sans", "Helvetica Neue", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Martel+Sans:wght@400;600;700;800&display=swap');

/* ---------- base ---------- */
body {
    color: var(--wm-ink) !important;
    background-color: #ffffff !important;
    font-family: var(--wm-font) !important;
    font-size: 14px;
    line-height: 1.5;
}
#mainWrapper { background: #ffffff !important; }
h1, h2, h3, h4, h5, h6 { color: var(--wm-ink) !important; font-family: var(--wm-font) !important; }
a:link, a:visited { color: var(--wm-blue) !important; text-decoration: none; }
a:hover { color: var(--wm-blue-dark) !important; text-decoration: underline; }

/*
 * The global rule above has specificity (0,1,1) and would beat the simple
 * class rules used inside the blue header bar, turning the logo / account /
 * cart links blue-on-blue (= invisible). These scoped rules restore white.
 */
#headerWrapper .wm-topbar a:link,
#headerWrapper .wm-topbar a:visited,
#headerWrapper .wm-topbar a:hover,
#headerWrapper .wm-topbar .wm-logo,
#headerWrapper .wm-topbar .wm-logo-text,
#headerWrapper .wm-topbar .wm-account-link,
#headerWrapper .wm-topbar .wm-cart-link {
    color: #ffffff !important;
    text-decoration: none !important;
}
#headerWrapper .wm-topbar .wm-account-link:hover,
#headerWrapper .wm-topbar .wm-cart-link:hover { color: var(--wm-yellow) !important; }

/* ---------- Walmart header bar ---------- */
.wm-topbar {
    background: var(--wm-blue);
    color: #fff;
    padding: 10px 0;
}
.wm-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.wm-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    color: #fff !important;
    flex: 0 0 auto;
}
.wm-spark { width: 34px; height: 34px; display: block; }
.wm-logo-text {
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -0.5px;
    color: #fff;
    font-family: var(--wm-font);
}
.wm-search {
    flex: 1 1 420px;
    margin: 0;
    min-width: 220px;
}
.wm-search-box {
    display: flex;
    background: #fff;
    border: 2px solid var(--wm-yellow);
    border-radius: 4px;
    overflow: hidden;
    min-width: 0;
}
.wm-search-input {
    flex: 1 1 auto;
    border: none !important;
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    margin: 0 !important;
    width: auto !important;
    /* keep it shrinkable, but never let the box squeeze the button away */
    min-width: 120px !important;
    outline: none;
    color: #333;
}
.wm-search-btn {
    background: var(--wm-yellow);
    border: none;
    color: #333;
    font-weight: 700;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 15px;
    flex: 0 0 auto;
    white-space: nowrap;
}
.wm-search-btn:hover { background: var(--wm-yellow-dark); }
.wm-account {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}
.wm-account-link, .wm-cart-link {
    color: #fff !important;
    text-decoration: none !important;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    line-height: 1.1;
    gap: 2px;
}
.wm-account-link i, .wm-cart-link i { font-size: 20px; }
.wm-account-link:hover, .wm-cart-link:hover { color: #fff !important; opacity: 0.9; }

/* ---------- category nav (Walmart-style light-blue strip + white pills) ---------- */
.wm-catnav {
    background: #e9f1fe;                 /* light blue strip (matches Walmart nav) */
    border-bottom: 1px solid var(--wm-border);
}
/* Full-bleed container so a single row of 19 categories has room to fit. */
.wm-catnav .wm-container {
    display: block;
    text-align: center;
    padding: 5px 10px;
    max-width: none;                      /* override the 1280px shared wrapper */
    overflow-x: auto;                     /* never wrap: scroll sideways if too narrow */
    overflow-y: hidden;
}
.wm-catnav-list {
    display: flex;
    flex-wrap: nowrap;                    /* keep every link on ONE row */
    justify-content: center;
    width: max-content;                   /* shrink-to-fit, then margin auto centres it */
    margin: 0 auto;
    list-style: none;
    padding: 0;
}
.wm-catnav-list li { display: block; flex: 0 0 auto; margin: 3px 1px; }
.wm-catnav-list a {
    display: block;
    color: var(--wm-ink) !important;
    background: #ffffff;                  /* white pill, like Walmart's Departments/Services */
    padding: 6px 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 999px;
    text-decoration: none !important;
    white-space: nowrap;
    border-bottom: none;
    box-shadow: 0 1px 2px rgba(4, 30, 66, .10);
    transition: box-shadow .15s ease, color .15s ease;
}
.wm-catnav-list a:hover {
    color: var(--wm-blue) !important;
    box-shadow: 0 2px 8px rgba(4, 30, 66, .20);
}

/* ---------- fallback for native nav selectors (just in case) ---------- */
#navMainWrapper, #navCatTabsWrapper { background: var(--wm-blue) !important; }
#navMain ul li a, #navCatTabs li a { color: #fff !important; }
#navMain ul li a:hover, #navCatTabs li a:hover { color: var(--wm-yellow) !important; }

/* ---------- center box headings (Walmart style) ---------- */
h2.centerBoxHeading, h3.centerBoxHeading, .centerBoxHeading, h2.leftBoxHeading, h3.leftBoxHeading, .leftBoxHeading, h2.rightBoxHeading, h3.rightBoxHeading, .rightBoxHeading {
    background: transparent !important;
    color: var(--wm-ink) !important;
    border-bottom: 2px solid var(--wm-border);
    padding: 8px 0 !important;
    font-size: 20px;
    font-weight: 700;
}

/* ---------- product cards (columnar / grid) ---------- */
.wm-listing { clear: both; }
.wm-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px;
    margin: 16px 0 !important;
}

/* Override the core rule "div.centerBoxContentsProducts.centeredContent { width:100%!important }"
   that otherwise forces every product card to a full-width row. With it neutralized, the flex
   sizing above (.wm-card { flex:1 1 200px; max-width:240px }) lays the cards out horizontally. */
#productListing div.centerBoxContentsProducts.centeredContent,
#productListing .wm-card {
    width: auto !important;
    clear: none !important;
    float: none !important;
}
.wm-card,
.centerBoxContentsProducts,
.centerBoxContents,
.categoryListBoxContents,
.centerBoxContentsListing,
.centerBoxContentsSpecials,
.centerBoxContentsFeatured,
.centerBoxContentsNew,
.centerBoxContentsAlsoPurch,
.centerBoxContentsFeaturedCategories {
    background: #fff !important;
    border: 1px solid var(--wm-border) !important;
    border-radius: 8px;
    padding: 12px !important;
    text-align: center;
    transition: box-shadow .15s ease, border-color .15s ease;
    flex: 1 1 200px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
}
.wm-card:hover,
.centerBoxContentsProducts:hover,
.centerBoxContents:hover,
.categoryListBoxContents:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,.12) !important;
    border-color: var(--wm-blue) !important;
}
.wm-card img,
.centerBoxContentsProducts img {
    max-width: 100% !important;
    height: auto;
    margin: 0 auto 10px;
}
.wm-card a,
.centerBoxContentsProducts a { color: var(--wm-ink) !important; text-decoration: none; }
.wm-card a:hover,
.centerBoxContentsProducts a:hover { color: var(--wm-blue) !important; text-decoration: underline; }

/* ---------- product listing (table / tabular) ---------- */
#productListing { clear: both; }
.listBoxContentTable { width: 100%; border-collapse: collapse; }
.productListing-data { padding: 12px !important; border-bottom: 1px solid var(--wm-border); vertical-align: top; }
.productListing-rowheading { background: var(--wm-blue) !important; color: #fff !important; }
.productListing-rowheading a, .productListing-rowheading a:hover { color: #fff !important; }
.productListing-even { background: #fafafa !important; }
.productListing-odd { background: #ffffff !important; }
.productListing-heading { background: var(--wm-blue) !important; color: #fff !important; padding: 8px !important; }

/* ---------- prices ---------- */
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
    color: var(--wm-red) !important;
    font-weight: 700;
}
.productPriceDiscount { color: var(--wm-green) !important; }
.normalprice, .productBasePrice { color: var(--wm-ink) !important; }

/* ---------- buttons ---------- */
input.submit_button, input.button,
.cssButton, span.cssButton,
.button_update_cart, .cssButtonHover,
#cartAdd input[type=submit], .buttonRow input {
    background: var(--wm-blue) !important;
    border: 1px solid var(--wm-blue) !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    padding: 9px 20px !important;
    font-weight: 700 !important;
    font-family: var(--wm-font) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block;
    font-size: 14px;
}
input.submit_button:hover, .cssButton:hover, .button_update_cart:hover {
    background: var(--wm-blue-dark) !important;
    border-color: var(--wm-blue-dark) !important;
}
/* the "Add to cart" pill inside product cards */
.wm-card .cssButton, .centerBoxContentsProducts .cssButton,
a:has(.listingBuyNowButton) {
    background: var(--wm-blue) !important;
    border-color: var(--wm-blue) !important;
    color: #fff !important;
    border-radius: 20px;
    padding: 8px 18px;
    margin-top: 8px;
    font-weight: 700;
    display: inline-block;
    text-decoration: none;
}
a:has(.listingBuyNowButton):hover { background: var(--wm-blue-dark) !important; }

/* ---------- category tabs (fallback styling) ---------- */
#navCatTabsWrapper { background: #fff !important; border-bottom: 1px solid var(--wm-border); }
#navCatTabs li a { color: var(--wm-ink) !important; }
#navCatTabs li a:hover { background: #f5f5f5 !important; color: var(--wm-blue) !important; }

/* ---------- footer ---------- */
.wm-footer {
    background: var(--wm-ink);
    color: #cdd6e0;
    /* no bottom padding: the bottom legal bar owns the spacing below the columns */
    padding: 30px 0 0;
    margin-top: 30px;
}
/*
 * IMPORTANT — do not let this container wrap.
 * .wm-container ships with `flex-wrap: wrap`; combined with `flex-direction: column`
 * (set below) Chrome treats it as a multi-line column flex container and inflates the
 * cross size, adding ~152px of empty navy below the link columns. `nowrap` removes it.
 */
.wm-footer .wm-container {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
}
.wm-footer-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    /* natural column heights instead of stretching every column to the tallest one */
    align-items: flex-start;
    padding-bottom: 22px;
}
.wm-footer-col { flex: 1 1 180px; min-width: 150px; }
.wm-footer-col h5 {
    color: #fff;
    font-size: 16px;
    margin: 0 0 12px;
    font-weight: 700;
    border: none;
}
.wm-footer-col ul { list-style: none; margin: 0; padding: 0; }
.wm-footer-col li { margin: 0 0 9px; }
.wm-footer-col a { color: #cdd6e0 !important; text-decoration: none; font-size: 13px; }
.wm-footer-col a:hover { color: #fff !important; text-decoration: underline; }
.wm-legal {
    color: #93a4b7 !important;
    text-align: center;
    font-size: 12px;
}
/*
 * Bottom legal bar.
 * stylesheet_colors.css paints #siteinfoLegal with `background:#666665` + `1px solid #666`,
 * which renders as a grey slab floating on the navy footer. That id-level rule beats the
 * .wm-legal class rule above, so we override it with 2 ids + 1 class and turn the bar into
 * a hairline-separated strip that belongs to the footer.
 */
#footerWrapper .wm-footer #siteinfoLegal {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .14) !important;
    margin: 0 !important;
    padding: 16px 16px 18px !important;
    line-height: 1.7;
}
#footerWrapper .wm-footer #siteinfoLegal a { color: #cdd6e0 !important; text-decoration: none; }
#footerWrapper .wm-footer #siteinfoLegal a:hover { color: #fff !important; text-decoration: underline; }

/* keep native footer nav hidden when our .wm-footer is present */
#navSuppWrapper, #navSupp, #siteinfoIP, #bannerSix { display: none !important; }

/* ---------- misc polish ---------- */
#navBreadCrumb { padding: 10px 16px; color: #666; font-size: 13px; }
.messageStackCaution { background-color: #fff4ce !important; border: 1px solid #ffe08a !important; color: #5b4b00 !important; }
.messageStackError, .messageStackWarning { background-color: #fde8e8 !important; border: 1px solid #f5b5b5 !important; color: #8b0000 !important; }
.messageStackSuccess { background-color: #e7f6e7 !important; border: 1px solid #b6e0b6 !important; color: #1b5e20 !important; }

/* ============================================================================
   PRODUCT PAGE (PDP) — Walmart-style 3-column layout
   ----------------------------------------------------------------------------
   Structure lives in templates/tpl_product_info_display.php:
       #prod-info-top.wm-pdp
           #pinfo-left.wm-pdp-gallery      (main image + thumbnails)
           .wm-pdp-main                    (title + description / key features)
           aside.wm-pdp-buy                (#cart-box price+cart, #pinfo-right details)
   Every rule is scoped with the body id #productinfoBody (specificity 2 ids) so it
   beats the single-id rules that responsive_default/tablet/mobile.css set for
   #pinfo-left / #pinfo-right / #cart-box (those files load AFTER this one).
   ============================================================================ */

#productinfoBody .centerColumn { padding: 6px 2px 34px; }

/* ---------- 3-column grid ---------- */
#productinfoBody #prod-info-top.wm-pdp {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 340px !important;
    grid-template-areas: "gallery summary buy" !important;
    column-gap: 26px !important;
    row-gap: 0 !important;
    align-items: start !important;
    clear: both;
    margin: 4px 0 26px !important;
}

/* ---------- left: gallery ---------- */
#productinfoBody #pinfo-left.wm-pdp-gallery {
    grid-area: gallery;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 18px 16px !important;
    background: #fff !important;
    border: 1px solid var(--wm-border) !important;
    border-radius: 12px !important;
    text-align: center;
    position: sticky;
    top: 14px;
    z-index: 5;
    /* thumbnails strip (left) + main image (right) */
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
/* --- gallery stage (main image + overlays) --- */
#productinfoBody #productMainImage.centeredContent {
    flex: 1 1 auto;
    min-width: 0;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    text-align: center !important;
}
#productinfoBody .wm-gal-stage {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}
#productinfoBody .wm-gal-stage > a { display: inline-block; line-height: 0; }
#productinfoBody #productMainImage img {
    display: inline-block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 452px !important;
    border-radius: 8px;
    cursor: zoom-in;
}
/* prev / next arrows */
#productinfoBody .wm-gal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--wm-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: var(--wm-ink);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(4, 30, 66, .18);
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
#productinfoBody .wm-gal-arrow:hover { background: var(--wm-blue); color: #fff; border-color: var(--wm-blue); }
#productinfoBody .wm-gal-arrow[hidden] { display: none !important; }
#productinfoBody .wm-gal-prev { left: 8px; }
#productinfoBody .wm-gal-next { right: 8px; }
/* magnifier lens (circular inline fallback) */
#productinfoBody .wm-gal-lens {
    position: absolute;
    z-index: 4;
    display: none;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 6px 22px rgba(4, 30, 66, .38);
    background-color: #fff;
    background-repeat: no-repeat;
    pointer-events: none;
}
#productinfoBody .wm-gal-lens.is-on { display: block; }

/* rectangular selection frame drawn on the main image while zooming */
#productinfoBody .wm-gal-frame {
    position: absolute;
    z-index: 5;
    display: none;
    box-sizing: border-box;
    border: 1px solid rgba(4, 30, 66, .42);
    background: rgba(255, 255, 255, .26);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .85) inset, 0 2px 10px rgba(4, 30, 66, .16);
    border-radius: 4px;
    pointer-events: none;
}
#productinfoBody .wm-gal-frame.is-on { display: block; }

/* large magnified panel shown beside the main image (Walmart style) */
#productinfoBody .wm-gal-zoompanel {
    position: absolute;
    z-index: 40;
    display: none;
    box-sizing: border-box;
    background-color: #fff;
    background-repeat: no-repeat;
    border: 1px solid var(--wm-border);
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(4, 30, 66, .24);
    pointer-events: none;
}
#productinfoBody .wm-gal-zoompanel.is-on { display: block; }

/* --- thumbnails: vertical strip to the LEFT of the main image --- */
#productinfoBody #productAdditionalImages.image-grid {
    order: -1;
    display: flex !important;
    flex: 0 0 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 !important;
    padding: 0 6px 0 0 !important;
    border-top: 0 !important;
    max-height: 452px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}
#productinfoBody #productAdditionalImages.image-grid::before { display: none !important; }
#productinfoBody #productAdditionalImages > .back { flex: 0 0 auto; line-height: 0; }
#productinfoBody #productAdditionalImages img {
    width: 62px !important;
    height: 62px !important;
    object-fit: cover;
    padding: 2px;
    background: #fff;
    border: 1px solid var(--wm-border) !important;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}
#productinfoBody #productAdditionalImages img:hover { border-color: var(--wm-blue) !important; }
#productinfoBody #productAdditionalImages a.wm-active img {
    border-color: var(--wm-blue) !important;
    box-shadow: 0 0 0 2px rgba(0, 113, 220, .30);
}

/* ---------- middle: summary ---------- */
#productinfoBody .wm-pdp-main { grid-area: summary; min-width: 0; }
#productinfoBody #productName {
    text-align: left !important;
    margin: 0 !important;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--wm-border);
    font-size: 25px !important;
    line-height: 1.28 !important;
    font-weight: 700 !important;
    color: var(--wm-ink) !important;
}
#productinfoBody #productDescription.wm-pdp-features {
    clear: none !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #3a4657 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}
#productinfoBody #productDescription hr { display: none !important; }
#productinfoBody #productDescription p {
    position: relative;
    margin: 0 0 12px !important;
    padding-left: 20px;
}
#productinfoBody #productDescription p:last-child { margin-bottom: 0 !important; }
#productinfoBody #productDescription p::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wm-blue);
}
#productinfoBody #productDescription strong { color: var(--wm-ink) !important; }

/* ---------- right: buy box ---------- */
#productinfoBody .wm-pdp-buy {
    grid-area: buy;
    float: none !important;
    width: auto !important;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 14px;
}
#productinfoBody #cart-box {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 18px !important;
    background: #fff !important;
    border: 1px solid var(--wm-border) !important;
    border-radius: 12px !important;
}
#productinfoBody #productPrices {
    text-align: left !important;
    margin: 0 0 14px !important;
    font-size: 30px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
}

/* quantity + add-to-cart */
#productinfoBody #cartAdd {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    text-align: left !important;
}
#productinfoBody #cartAdd .qty-text { font-weight: 600; color: var(--wm-ink); }
#productinfoBody #cartAdd .max-qty { flex: 1 1 100%; color: #6b7686; font-size: 13px; }
#productinfoBody #cartAdd .max-qty .qmax br { display: none; }
#productinfoBody #cartAdd input[type=text] {
    width: 72px !important;
    height: 44px !important;
    text-align: center;
    padding: 6px !important;
    border: 1px solid #b9c1cc !important;
    border-radius: 10px !important;
}
#productinfoBody #cartAdd input[type=submit],
#productinfoBody #cartAdd #addToCartButton {
    flex: 1 1 100%;
    height: 48px !important;
    margin: 4px 0 0 !important;
    padding: 0 24px !important;
    border-radius: 24px !important;
    background: var(--wm-blue) !important;
    border: 1px solid var(--wm-blue) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}
#productinfoBody #cartAdd input[type=submit]:hover {
    background: var(--wm-blue-dark) !important;
    border-color: var(--wm-blue-dark) !important;
}

/* stock / product details / ask-a-question */
#productinfoBody #pinfo-right.wm-pdp-details {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    background: #fff !important;
    border: 1px solid var(--wm-border) !important;
    border-radius: 12px !important;
}
#productinfoBody #productDetailsList {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
#productinfoBody #productDetailsList li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px dashed #eceef1;
    color: #2b3a4d;
    font-size: 14px;
}
#productinfoBody #productDetailsList li:last-child { border-bottom: 0; }
#productinfoBody #productDetailsList li::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wm-green);
}
#productinfoBody #productQuestions { display: inline-block; margin-top: 10px; }
#productinfoBody #freeShippingIcon { margin: 10px 0 0 !important; }

/* ---------- reviews / date / prev-next polish ---------- */
#productinfoBody #productReviewLink { float: none !important; text-align: left; margin-top: 18px; }
/* core stylesheet_css_buttons.css forces these to display:block (=full-width blue bar);
   restore them as compact inline pills. */
#productinfoBody span.cssButton.button_write_review,
#productinfoBody span.cssButton.button_more_reviews,
#productinfoBody span.cssButton.button_read_reviews {
    display: inline-block !important;
    width: auto !important;
    font-size: 14px !important;
    padding: 9px 22px !important;
}
#productinfoBody .reviewCount { text-align: left; color: #6b7686; }
#productinfoBody #productDateAdded,
#productinfoBody #productDateAvailable,
#productinfoBody #productInfoLink { text-align: left !important; color: #8a94a3; font-size: 13px; }
/* core stylesheet.css sets ".navNextPrevWrapper{float:right}" which pins the
   Previous/Next product nav to the right. Force it back to a centered, full-width row. */
#productinfoBody .navNextPrevWrapper {
    float: none !important;
    clear: both;
    width: 100%;
    text-align: center;
    margin: 4px 0 12px;
}
#productinfoBody .navNextPrevCounter { text-align: center; }
#productinfoBody .navNextPrevList { display: inline-block; vertical-align: middle; margin: 0 4px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    #productinfoBody #prod-info-top.wm-pdp {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-areas:
            "gallery summary"
            "buy buy" !important;
        row-gap: 20px !important;
    }
    #productinfoBody #pinfo-left.wm-pdp-gallery,
    #productinfoBody .wm-pdp-buy { position: static; }
}
@media (max-width: 760px) {
    #productinfoBody #prod-info-top.wm-pdp {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "gallery"
            "summary"
            "buy" !important;
        row-gap: 18px !important;
    }
    #productinfoBody #productName { font-size: 22px !important; }
    #productinfoBody #productPrices { font-size: 26px !important; }
    /* narrow screens: stack thumbs back to a horizontal row under the image */
    #productinfoBody #pinfo-left.wm-pdp-gallery { flex-direction: column; align-items: stretch; }
    /* the big zoom panel is desktop-only */
    #productinfoBody .wm-gal-zoompanel,
    #productinfoBody .wm-gal-frame { display: none !important; }
    #productinfoBody #productAdditionalImages.image-grid {
        order: 1;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        max-height: none;
        overflow: visible;
        padding: 12px 0 0 !important;
        border-top: 1px solid var(--wm-border) !important;
    }
}

/* ---------- footer responsive ---------- */
@media (max-width: 760px) {
    .wm-footer { padding: 24px 0 0; }
    .wm-footer-cols { gap: 20px 16px; padding-bottom: 18px; }
    .wm-footer-col { flex: 1 1 45%; min-width: 130px; }
}
@media (max-width: 520px) {
    /* one column per row on phones, centred like Walmart's mobile footer */
    .wm-footer-col { flex: 1 1 100%; }
    .wm-footer-cols { justify-content: flex-start; }
}