/* file: xstylesheet_mib.refactored.css */
/* ========================================================================== */
/* MissionInfobank.org – Consolidated, Commented Styles                       */
/* - Keeps existing behavior                                       (2025-10)  */
/* - Groups by topic; removes duplicates; adds variables & clear comments     */
/* - Safe for Zen Cart selectors (no class/ID renaming)                       */
/* ========================================================================== */

/* =========================
   0) Design tokens (vars)
   ========================= */
:root{
  /* Brand-ish blues / neutrals (from existing palette) */
  --blue-600: #334466;
  --blue-500: #6080c0;
  --blue-400: #496293;
  --blue-300: #6080c0;
  --link:     #3300FF;
  --link-vis: #3300FF;
  --link-new: #6080c0;
  --link-new-vis:#496293;

  --danger:   #ff0000;
  --success:  #99FF99;
  --caution:  #FFFF66;
  --ink-900:  #000000;
  --ink-700:  #555;
  --ink-600:  #606000;
  --paper:    #ffffff;
  --panel:    #f8f8f8;
  --panel-alt:#eeeeee;
  --line:     #cccccc;

  --shadow:   #e0e0e0;
  --radius:   16px;

  /* Typographic scale (kept close to original) */
  --fs-h1: 1.5em;
  --fs-h2: 1.4em;
  --fs-h3: 1em;
  --fs-small: .9em;
}

/* ======================================
   1) Base elements / global normalizers
   ====================================== */
html, body{background: var(--paper);}
h1{font-size: var(--fs-h1); font-weight: bold;}
h2{font-size: var(--fs-h2); font-weight: normal; margin: .3em 3px 1em;}
h3{font-size: var(--fs-h3);}
h4, h5, h6, label, h4.optionName, legend, address, .sideBoxContent, .larger{font-size: var(--fs-small);}
.biggerText{font-size: 1em;}
h1, h3, h4, h5, h6{ margin: .3em 3px; } /* note: h2 already has its own margin */

textarea{ width:95%; }
input:focus, select:focus, textarea:focus{ background: #F0F8FF; }

fieldset{ padding:.5em; margin:.5em 0; border:1px solid var(--line); }
legend{ font-weight:bold; padding:.3em; }

hr{ border:0; border-bottom:1px solid #9A9C86; }

/* Links – preserve legacy look while centralizing colors */
a:link, #navEZPagesTOC ul li a{ color: var(--link); text-decoration:none; }
a:visited{ color: var(--link-vis); text-decoration:none; }
a:hover,
#navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover{
  color: var(--danger);
}
a:active{ color:#0000FF; }

/* “Added/modified by Greg Beeley” link tweaks kept, but simplified to vars */
a.category-top:link, a.category-top:visited{ color:#fff !important; }
a:link{ color: var(--link-new) !important; }
a:visited{ color: var(--link-new-vis) !important; }

/* ======================================
   2) Header / logo / tagline / search
   ====================================== */
#logo{ margin: 40px 0 0; }
#logo img{ width:90%; max-width:523px; }

#logoWrapper{
  margin:0;
  margin-top:-58px;
  display:inline-block;
  overflow:hidden;
  width:100%;
  background-image:url('/mib/includes/templates/MRIsage/images/worldbg.png');
  background-repeat:repeat-x;
  background-position:50% 0%;
}

#tagline{ color:#000; font-size:1.2em; margin:.3em 0 .5em; }

/* Main nav strip subtly tinted; keep bold feel */
#navMainWrapper{
  margin: 0 -50px 1.5em 0;
  padding-bottom:.2em;
  font-weight:bold;
  position:relative;
  background-color: rgba(192,192,192,0.33);
}
#navMain ul, #navSupp ul, #navCatTabs ul{ text-align:center; }
#navMain ul li, #navSupp ul li, #navCatTabs ul li{ display:inline; }
#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a{
  text-decoration:none; padding:0 .5em; margin:0; color:blue; white-space:nowrap;
}
#navMainSearch{ float:right; }
div#navMain ul{ padding:.1em 0; }

#navEZPagesTop,
#navBreadCrumb{
  background-color: var(--panel-alt);
}
#navBreadCrumb{
  box-shadow: 0 4px 4px #C0C0C0;
}
#navBreadCrumb, #navEZPagesTop{
  font-size:.95em; font-weight:bold; margin:0; padding:.5em;
}

/* Tab bar gradient & text color */
#navCatTabsWrapper{ margin:0; font-weight:bold; color:#fff; height:1%; width:100%; }
div#navCatTabsWrapper{ background: linear-gradient(to bottom, var(--blue-300), var(--blue-600)); }
div#navCatTabsWrapper li a{ color:#fff; }

/* ======================================
   3) Columns / sideboxes / banners
   ====================================== */
#navColumnOne, #navColumnTwo{
  background-color: var(--panel-alt);
  background-image: url(../images/menu_bg.gif);
  background-repeat: repeat-y;
}

/* Sideboxes + headings */
.leftBoxHeading, .centerBoxHeading{ background:transparent; padding:.5em .2em; }
h3.leftBoxHeading, h3.leftBoxHeading a{ font-size:1em; color:#EEE; }
h3.leftBoxHeading a:hover{ color:#FFFF33; }
.rightBoxHeading{ margin:0; background:transparent; padding:.2em 0; }
h3.rightBoxHeading a:hover{ color: var(--ink-600); }
.sideBoxContent{ background: var(--panel-alt); padding:.4em; }
.rightBoxContent{ background:#000; }

.centerBoxHeading{ margin-top:16px; }

/* ======================================
   4) Notifications / alerts / messages
   ====================================== */
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution{
  padding:.2em; border:1px solid var(--ink-900);
}
.messageStackWarning, .messageStackError{ background: var(--danger); color:#fff; }
.messageStackSuccess{ background: var(--success); color:#000; }
.messageStackCaution{ background: var(--caution); color:#000; }
.alert{ color: var(--danger); }

/* ======================================
   5) Utility / small patterns
   ====================================== */
.clearBoth{ clear:both; }
.wrapperAttribsOptions{ margin:.3em 0; }
#sendSpendWrapper{ border:1px solid #cacaca; float:right; margin:0 0 1em 1em; }
#siteinfoLegal{ margin:.5em; }
.contentMainWrapper{ margin-bottom:32px; }
.smlogo{ display:none; }
.myheader{ z-index:5; }
.sticky{ position:fixed; top:0; width:100%; z-index:5; }
.sticky + .content{ padding-top:102px; }

/* ======================================
   6) Tables, rows, common list visuals
   ====================================== */
.tableHeading th{ border-bottom:1px solid var(--line); }
.tableHeading, #cartSubTotal{ background:#e9e9e9; }
#cartSubTotal{ border-top:1px solid var(--line); font-weight:bold; padding-right:2.5em; }

.rowOdd{ background:#E8E8E8; }
.rowEven{ background:#F0F0F0; }
tr.tableHeading{ background:#cacaca; height:2em; }
.ratingRow{ margin:1em 0 1.5em; }

/* Borders used in various detail tables */
#seQuoteResults td,
.listBoxContentTable td,
#quantityDiscountsDetails td,
.tableBorder1 td{ border:1px solid #000; }

/* ======================================
   7) Product “Topic” table – revert to 2020 flat links
      (Removes card/shadow/rounded look; restores true table rows)
   ====================================== */

/* 1) The container is forced elsewhere to display:table; switch it back so margins/shadows work */
.tabTable {
  display: block !important;        /* enables vertical margins between row "cards" */
}

/* 2) Style each listing row (odd/even) as a block-level card */
.productListing-odd,
.productListing-even {
  display: block !important;        /* overrides any display:table-row from older CSS */
  margin: 16px 0;                    /* ~8px separation between cards */
  padding: 16px;                 /* ~4px inner breathing room */
  border: 1px solid #ccc;           /* thin outline */
  border-radius: 8px;               /* curved corners */
  box-shadow: 0 2px 4px rgba(0,0,0,.08); /* subtle depth */
  background: #fff;                 /* ensures the shadow reads on gray backgrounds */
  overflow: hidden;                 /* clips child content to the rounded corners */
  box-sizing: border-box;           /* padding + border stay inside the width */
}

/* 3) Media inside rows: keep thumbnails tidy within rounded corners */
.product_listing_image_link img {
  display: block;                   /* removes inline-gap quirks */
  max-width: 100%;                  /* safety for unexpected large images */
  height: auto;
}


/* ======================================
   8) Kill global “neumorphic” hover on list tiles (flat, 2020 style)
   ====================================== */
.categoryListBoxContents:hover,
.centerBoxContentsListing:hover,
.centerBoxContents:hover,
.centerBoxContentsNew:hover,
.centerBoxContentsFeatured:hover,
.centerBoxContentsSpecials:hover,
.specialsListBoxContents:hover{
  background: transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* ======================================
   9) Product listing – image/summary alignment
      (Float image left; keep rows tidy; mobile stacks)
   ====================================== */
.productListing-odd a.product_listing_image_link,
.productListing-even a.product_listing_image_link{
  float:left !important;
  display:block;
  margin:1em 1em 1em 1em; /* space to text */
}
.productListing-odd a.product_listing_image_link > img.listingProductImage,
.productListing-even a.product_listing_image_link > img.listingProductImage{
  display:block; border:1px solid #ccc; background:#fff; padding:2px; box-sizing:border-box;
}
.productListing-odd, .productListing-even{
  overflow:hidden; /* new BFC clears inner float */
  padding:.5em 0;
  border-bottom:1px solid #ddd;
	background-color: whitesmoke;
}
/* Prevent text from tucking under small thumbs */
.productListing-odd h3.itemTitle,
.productListing-even h3.itemTitle,
.productListing-odd .listingDescription,
.productListing-even .listingDescription{
	/* margin-top: 1em; */
  overflow:hidden;
}

.productListing-odd h3.itemTitle,
.productListing-even h3.itemTitle {
	margin-top: 1em;
}

/* Make the empty .imgLink show the affordance text */
#productMainImage .imgLink::before{
  content: "larger image";
  display: inline-block;
  margin-top: .25rem;
  text-decoration: underline;
  font-size: .9rem;
  line-height: 1.2;
  color: var(--link-color, #06c);
}

/* Hover/Focus states (mirror link behavior) */
#productMainImage a:hover .imgLink::before,
#productMainImage a:focus .imgLink::before{
  color: var(--link-hover-color, #039);
  text-decoration: underline;
}

/* Center it if you keep .center on the element */
#productMainImage .imgLink.center::before{
  display: inline-block;
  text-align: center;
}



/* Hide the legacy line that sits immediately before #productMainImage */
/* It's a direct child of the form, not inside #productMainImage */
#addToCartForm > .imgLink.center {
  display: none !important;
}

/* Mobile: stack image above text */
@media (max-width: 768px){
  .productListing-odd a.product_listing_image_link,
  .productListing-even a.product_listing_image_link{
    float:none !important;
    display:block;
    margin:0 auto .75em;
    text-align:center;
  }
}

/* ======================================
   10) Product listing – TOP/BOTTOM pager bars
        (Single authoritative implementation)
   ====================================== */

/* Make each pager wrapper a real block with height */
#productListing > .prod-list-wrap{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap:.5rem;
  margin:.25rem 0 .5rem;
}

/* Inside the bars, turn off old floats so flex can control layout */
#productsListingTopNumber,
#productsListingListingTopLinks,
#productsListingBottomNumber,
#productsListingListingBottomLinks{
  float:none !important;
}

/* Order: counter on the left, links on the right (top & bottom) */
#productListing > .prod-list-wrap:first-of-type #productsListingTopNumber{ order:0; }
#productListing > .prod-list-wrap:first-of-type #productsListingListingTopLinks{ order:1; }

#productListing > .prod-list-wrap:last-of-type{
  margin-top:.5rem;
}
#productListing > .prod-list-wrap:last-of-type #productsListingBottomNumber{ order:0; }
#productListing > .prod-list-wrap:last-of-type #productsListingListingBottomLinks{ order:1; }

/* Core pagination list visuals (shared by top/bottom) */
#productsListingListingTopLinks .pagination,
#productsListingListingBottomLinks .pagination{
  display:inline-block; margin:0; padding:0; list-style:none; vertical-align:middle;
}
#productsListingListingTopLinks .pagination li,
#productsListingListingBottomLinks .pagination li{
  display:inline-block; margin:0; padding:0;
}
#productsListingListingTopLinks .pagination li:first-child,
#productsListingListingBottomLinks .pagination li:first-child{
  border-left:none;
}
#productsListingListingTopLinks .pagination li a,
#productsListingListingBottomLinks .pagination li a{
  display:inline-block; text-decoration:none; padding:.15em .5em; line-height:1.4;
}
/* Current page indicator */
#productsListingListingTopLinks .pagination li.current,
#productsListingListingTopLinks .pagination li.active,
#productsListingListingBottomLinks .pagination li.current,
#productsListingListingBottomLinks .pagination li.active{
  font-weight:bold; padding:.15em .5em;
}
/* Hover: slightly darker bg; darker text (as in 2020) */
#productsListingListingTopLinks.navSplitPagesLinks a:hover,
#productsListingListingBottomLinks.navSplitPagesLinks a:hover{ background:#999; }
#productsListingListingTopLinks .pagination li a:hover,
#productsListingListingBottomLinks .pagination li a:hover{ color:#000a06; }

/* Counters (e.g., “Displaying X to Y”): lighter ink and italics */
#productsListingTopNumber,
#productsListingBottomNumber{
  margin:.5em 0; padding:.3em .5em; font-size:.9em; font-style:italic; color:var(--ink-700);
}

/* Mobile: stack lines neatly and center them */
@media (max-width: 768px){
  #productListing > .prod-list-wrap{
    flex-direction: column; text-align:center; gap:.25rem;
  }
}

/* ======================================
   11) “What’s New” panel – keep flat container look
   ====================================== */
#whatsNew{
  border-radius: 0;            /* flat */
  border: none;                /* flat */
  background-color: var(--panel);
  box-shadow: none;            /* flat */
  margin: 24px auto;
  width:95%; max-width:1000px;
}
@media (max-width:720px){
  #whatsNew .centeredContent{
    width:auto !important; margin:0 auto; float:none; padding:12px;
  }
}

/* ======================================
   12) Page-width containers for major pages
      (Keep 95%/1000px pattern consistent site-wide)
   ====================================== */
#indexProductList,
#indexDefaultMainContent,
#indexCategories,
#productGeneral,
#shoppingCartDefault,
#loginDefault,
#checkoutSuccess,
#accountHistInfo,
#accountDefault,
#accountHistoryDefault,
#accountEditDefault,
#addressBookDefault,
#addressBookProcessDefault,
#checkoutPayment,
#checkoutConfirmDefault,
#advSearchDefault,
#accountPassword{
  width:95%; max-width:1000px; margin-left:auto; margin-right:auto;
}

/* ======================================
   13) Shopping cart table – hide unneeded columns, tidy media
   ====================================== */
#shoppingCartDefault table#cartContentsDisplay{ margin-top:12px; }
#cartContentsDisplay tr th:nth-child(1),
#cartContentsDisplay tr td:nth-child(1),
#shoppingCartDefault #cartContentsDisplay tr th:nth-child(2),
#shoppingCartDefault #cartContentsDisplay tr td:nth-child(2),
#shoppingCartDefault #cartContentsDisplay tr th:nth-child(4),
#shoppingCartDefault #cartContentsDisplay tr td:nth-child(4){
  display:none;
}
.cartTotalsDisplay,
#cartContentsDisplay input[name="cart_delete[]"],
#shoppingCartDefault .buttonRow input{ display:none; }
#cartContentsDisplay span.cartImage{ float:left; }
#cartContentsDisplay br.clearBoth{ display:none; }
#cartContentsDisplay span.cartImage img{ margin-right:12px; }

/* ======================================
   14) Checkout / confirmations – only the essentials
   ====================================== */
#checkoutPayment form fieldset{ display:none; }
#checkoutPayment form fieldset.payment,
#checkoutPayment form fieldset#checkoutOrderTotals{ display:block; }
#checkoutPayment h2#checkoutPaymentHeadingAddress,
#checkoutPayment #checkoutBillto,
#checkoutPayment .floatingBox,
#checkoutConfirmDefault #checkoutBillto,
#checkoutConfirmDefault #checkoutComments{
  display:none;
}

/* ======================================
   15) Account / downloads – declutter on small screens
   ====================================== */
#checkoutSuccess table#orderHistoryHeading,
#checkoutSuccess .forward,
#checkoutSuccess #orderTotals,
#checkoutSuccess h2#orderHistoryStatus,
#checkoutSuccess #myAccountOrdersStatus,
#checkoutSuccess #myAccountShipInfo{ display:none; }
#checkoutSuccess #checkoutSuccessOrderNumber,
#checkoutSuccess #checkoutSuccessLogoff,
#checkoutSuccess #checkoutSuccessOrderLink,
#checkoutSuccess #checkoutSuccessContactLink,
#checkoutSuccess #checkoutSuccessMainContent p,
#checkoutSuccess #accountHistInfo{ margin-left:4px; padding-left:4px; }

@media (max-width:800px){
  #downloads tr th:nth-child(5), #downloads tr td:nth-child(5){ display:none; }
}
@media (max-width:720px){
  #downloads tr th:nth-child(3), #downloads tr td:nth-child(3){ display:none; }
}
@media (max-width:500px){
  #downloads tr th:nth-child(4), #downloads tr td:nth-child(4){ display:none; }
}

/* ======================================
   16) Misc. product display / details
   ====================================== */
#productDisplayMain{
  border:1px solid var(--blue-300);
  border-radius: var(--radius);
  box-shadow: 4px 4px 4px var(--shadow);
  background: var(--panel);
  padding:12px; margin-bottom:12px;
}
table.libdesc td{ vertical-align:top; padding-bottom:0; }

/* ======================================
   17) Cart “Add to cart” callout (kept)
   ====================================== */
#cartAdd{ float:right; margin:1em; border:none; padding:0; box-shadow:0 0 12px #ffff00; }
#cartAddQty{ display:none; }

/* ======================================
   18) Popup image behavior – scale to viewport
   ====================================== */
body#popupImage img{ width:100%; height:auto; }

/* ======================================
   19) indexProductListCatDescription table
   ====================================== */
/* file: xstylesheet_mib.css */

/* Scope everything to this section only */
#indexProductListCatDescription {
  max-width: 1000px;
  margin: 0 auto 1.25rem;
}

/* Make the table behave like a simple list of cards */
#indexProductListCatDescription table {
  width: 100%;
  border-collapse: separate;       /* keep row padding */
  border-spacing: 0;               /* we’ll add our own gaps */
}

#indexProductListCatDescription tbody { display: block; }

/* Each row as a card with a fixed image column */
#indexProductListCatDescription tr {
  display: grid;
  grid-template-columns: 110px 1fr;  /* image | content */
  gap: 16px;
  margin: 12px 0;
  padding: 12px;
  background: #f8f8f8;
  border: 1px solid #6080c0;
  border-radius: 12px;
  box-shadow: 4px 4px 4px #e0e0e0;
}

/* Clean up cells */
#indexProductListCatDescription td {
  padding: 0;
  border: 0;
  vertical-align: top;
}

/* Hide the middle spacer column full of   */
#indexProductListCatDescription td:nth-child(2) { display: none; }

/* Image column */
#indexProductListCatDescription td:first-child {
  text-align: center;
}
#indexProductListCatDescription td:first-child img {
  max-width: 100px;   /* respect existing width/height in markup, but cap it */
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}

/* Content column: nicer link/readability */
#indexProductListCatDescription td:last-child a {
  font-size: 1.05rem;
  line-height: 1.45;
  text-decoration: none;
}
#indexProductListCatDescription td:last-child a:hover {
  text-decoration: underline;
}

/* Heading spacing */
#indexProductListCatDescription h3 {
  margin: 0.75rem 0 0.25rem;
}

/* Tame the <br>&nbsp; stack in the markup */
#indexProductListCatDescription td:last-child br + &nbsp { display: none; }

/* Responsive tweaks */
@media (max-width: 720px) {
  #indexProductListCatDescription tr {
    grid-template-columns: 85px 1fr;
    padding: 10px;
    gap: 12px;
  }
  #indexProductListCatDescription td:first-child img {
    max-width: 80px;
  }
}
@media (max-width: 480px) {
  #indexProductListCatDescription tr {
    grid-template-columns: 70px 1fr;
    margin: 10px 0;
  }
}

/* ======================================
   20) Odds & ends kept from original (minimized)
   ====================================== */
.centerBoxContents,
.specialsListBoxContents,
.categoryListBoxContents,
.centerBoxContentsAlsoPurch,
.attribImg{ float:left; }

div#productsListingTopNumber{ margin-left:3px; }
div#productsListingListingTopLinks{ margin-right:3px; }

.prod-list-wrap{ height:auto; background:transparent; } /* ensure it never eats the pager */
.categoryIcon{ float:none; }

#bannerboxHeading{ background:transparent; }
#bestsellers .wrapper{ margin:0 0 0 1.5em; }
#bestsellers ol{ padding:0; margin-left:1.1em; }
#bestsellers li{ padding:0; margin:.3em 0; }

tr.productListing-rowheading{ display:none !important; } /* hide legacy headings */
td.productListing-data:nth-child(1){ display:inline-block; float:left; }
td.productListing-data:nth-child(3){ display:none; }

h1, h2.centerBoxHeading, #siteinfoLegal, h2.greeting{
  background:#fff; color:#000;
}

/* Keep pagination anchors visually consistent */
.pagination li a{
  background:#fff; color:#000;
  font-size:.8em;
}

/* Only the product listing pagers (top & bottom) */
#productsListingListingTopLinks .pagination li,
#productsListingListingBottomLinks .pagination li {
  border-left: 0;
}

/* Nav background gradients retained */
#navEZPagesTOCWrapper{
  font-weight:bold; float:right; height:1%;
  border:1px solid #000;
}

/* Shipping/help/info popups on white */
#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage,
#popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart{
  background: #fff;
}

/* Address highlight */
.seDisplayedAddressLabel{ background-color:#85C285; }

table.libdesc td.libdesc-tag{
padding-right: 1em;
}

/* Only the very last category card on the page */
#indexCategories > div > div > div:last-child > .categoryListBoxContents.centeredContent.back.gridlayout {
  margin-bottom: 1em !important;
}

/* Hide extra <br> */
.categoryListBoxContents a br {
  display: none;
}

/* Stack image above the link text */
.categoryListBoxContents a img{
  display:block;          /* puts text on a new line after the image */
  margin:0 auto .35em;    /* optional spacing + centers the img */
}

/* Only the last “New Products” box inside #whatsNew */
#whatsNew .centerBoxContentsNew.centeredContent.back:last-of-type {
  margin-bottom: 1em !important;
}

.centerColumn {
    max-width: 1000px;
    margin: 0 auto;
}

/* Constrain breadcrumb TEXT to 1000px while the bar stays full-width */
#navBreadCrumb{
  /* keep your existing bg/shadow/font rules as-is */
  box-sizing: border-box;
  /* vertical padding unchanged; horizontal padding creates centered 1000px gutter */
  padding: 0.5em max(1em, calc((100% - 1000px) / 2));
  /* ensures text is left-aligned inside the 1000px content area */
  text-align: left;
}



/* ======================================
   21) Country Landing Page
   ====================================== */
/* Override the inline height/overflow from HTML */
/* #productDescription > div[style*="overflow:auto"] {
  height: auto !important;
  overflow: visible !important;
} */

/* Wrapper: readable width, spacing, subtle card look */
#productDescription {
  max-width: 1000px;
  margin: 1.25rem auto;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid #e6e8ef;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  line-height: 1.6;
  color: #1f2937;
  font-size: 1rem; /* honors .biggerText without over-inflating */
}

/* Links */
#productDescription a {
  color: #2c4f9e;
  text-decoration: underline;
}
#productDescription a:hover,
#productDescription a:focus {
  text-decoration: none;
  outline: none;
}

/* “History” scroll box (the div with inline overflow) */
#productDescription > div[style*="overflow:auto"] {
  margin: .75rem 0 1rem 0;
  padding: .75rem .9rem;
  background: #f8fafc;
  border: 1px solid #e6e8ef;
  border-radius: 10px;
  line-height: 1.55;
}
#productDescription > div[style*="overflow:auto"]::-webkit-scrollbar{
  width: 10px;
}
#productDescription > div[style*="overflow:auto"]::-webkit-scrollbar-thumb{
  background: #cbd5e1;
  border-radius: 8px;
}

/* “Image:” heading built with <strong><font size="+2">… */
#productDescription strong font[size="+2"],
#productDescription th font[size="+2"]{
  display: block;
  font-size: 1.25rem !important;      /* normalize the old <font> tag */
  font-weight: 700;
  line-height: 1.3;
  color: #111827;
  /* many headings include leading &nbsp; — visually cancel them: */
  text-indent: -1em;
  /* padding-left: 1em; */
}

/* Flag image */
#productDescription img {
  height: auto;
  max-width: 100%;
  margin-left: 32px;
  /* border-radius: 6px; */
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
#productDescription a > img[width="100px"]{
  margin: .4rem 0 .9rem 2rem;
}

/* Table layout */
#productDescription table{
  width: 100% !important;
  border-collapse: collapse;
  margin: .5rem 0 0 0;
  table-layout: fixed;
}
#productDescription th,
#productDescription td{
  padding: .5rem .6rem;
  vertical-align: top;
}

/* First header row (Maps | Joshua Project) */
#productDescription th{
  font-weight: 700;
  background: #f3f6fb;
  color: #0f172a;
  border-top: 1px solid #e7edf7;
}

/* Two-column proportions on wide screens */
#productDescription table tr > td:nth-child(1),
#productDescription table tr > th:nth-child(1){ width: 60%; }
#productDescription table tr > td:nth-child(2),
#productDescription table tr > th:nth-child(2){ width: 40%; }

/* Bullet-ish rows using .libdesc-bt (keeps your existing ·) */
#productDescription td.libdesc-bt strong{
  color: #64748b;
  margin-right: .35rem;
}
#productDescription td.libdesc-bt a{
  text-decoration: none;
  border-bottom: 1px dotted #94a3b8;
}
#productDescription td.libdesc-bt a:hover{
  border-bottom-color: transparent;
}

/* People Groups label + select (id=myselect) */
#productDescription label[for="myselect"]{
  display: block;
  margin: .25rem 0 .4rem 0;
  font-weight: 600;
  color: #0f172a;
}
#productDescription #myselect{
  width: 100%;
  max-height: 22rem; /* plays nicely with size="16" */
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: .35rem .45rem;
  background: #fff;
  font-size: .975rem;
  line-height: 1.35;
  box-sizing: border-box;
}
#productDescription #myselect:focus{
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* Clean up stray empty rows that exist in the markup */
#productDescription tr:empty { display: none; }
#productDescription td:empty { padding: 0; }

/* Typography niceties */
#productDescription br + br { line-height: 0; }
#productDescription em, #productDescription i { color:#374151; }

/* Responsive: stack table columns under 720px */
@media (max-width: 720px){
  #productDescription { padding: .9rem 1rem; }

  #productDescription table,
  #productDescription thead,
  #productDescription tbody,
  #productDescription tr,
  #productDescription th,
  #productDescription td{
    display: block;
    width: 100% !important;
  }
  #productDescription tr{
    padding: .5rem .4rem;
    margin: 0 0 .6rem 0;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    background: #fcfdff;
  }
  #productDescription th{
    border: 0;
    background: transparent;
    padding: 0 0 .25rem 0;
  }
  /* keep the People Groups select under its heading cleanly */
  #productDescription td[rowspan] { float:none; width:100%; }
}

/* Very small screens: tighten things */
@media (max-width: 420px){
  #productDescription > div[style*="overflow:auto"]{ padding:.6rem .7rem; }
  #productDescription #myselect{ font-size:.95rem; }
}

/* ======================================
   22) Fix Page Selector section on Search pages
   ====================================== */
/* 1) Make the bars a wrapping flex row on this page */
#searchResultsDefault #productListing > .prod-list-wrap{
  display:flex;
  flex-wrap:wrap;                 /* <<< prevents off-screen push */
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  width:100%;
}

/* 2) Cancel legacy floats/widths from older templates */
#searchResultsDefault #productsListingListingTopLinks,
#searchResultsDefault #productsListingListingBottomLinks,
#searchResultsDefault #productsListingTopNumber,
#searchResultsDefault #productsListingBottomNumber,
#searchResultsDefault #productListing > .prod-list-wrap > .back,
#searchResultsDefault #productListing > .prod-list-wrap > .forward{
  float:none !important;
  width:auto !important;
  max-width:100%;
}

/* 3) Let the pagination list itself wrap cleanly */
#searchResultsDefault #productListing nav.pagination ul.pagination{
  display:flex;
  flex-wrap:wrap;                 /* <<< allows 1, 2, 3, [Next »] to wrap */
  margin:0;
  padding:0;
  list-style:none;
  max-width:100%;
}

/* 4) Nice alignment: count on the left; links on the right */
#searchResultsDefault #productsListingTopNumber,
#searchResultsDefault #productsListingBottomNumber{
  text-align:left;
  flex:1 1 200px;
}
#searchResultsDefault #productsListingListingTopLinks,
#searchResultsDefault #productsListingListingBottomLinks{
  text-align:right;
  flex:1 1 240px;
}

/* 5) Small screens: stack & center */
@media (max-width: 768px){
  #searchResultsDefault #productListing > .prod-list-wrap{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:.25rem;
  }
  #searchResultsDefault #productsListingTopNumber,
  #searchResultsDefault #productsListingBottomNumber,
  #searchResultsDefault #productsListingListingTopLinks,
  #searchResultsDefault #productsListingListingBottomLinks{
    flex:0 1 auto;
    width:100%;
    text-align:center;
  }
}




/* ======================================
   23) FIX: Scope “Country Landing Page” styles to index only
   ====================================== */

/* Wrapper & link styles */
body#indexBody #productDescription {
  max-width: 1000px;
  margin: 1.25rem auto;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid #e6e8ef;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  line-height: 1.6;
  color: #1f2937;
  font-size: 1rem;
}
body#indexBody #productDescription a { color: #2c4f9e; text-decoration: underline; }
body#indexBody #productDescription a:hover,
body#indexBody #productDescription a:focus { text-decoration: none; outline: none; }

/* The long history box and its scrollbar styling */
body#indexBody #productDescription > div[style*="overflow:auto"] {
  margin: .75rem 0 1rem 0;
  padding: .75rem .9rem;
  background: #f8fafc;
  border: 1px solid #e6e8ef;
  border-radius: 10px;
  line-height: 1.55;
}
body#indexBody #productDescription > div[style*="overflow:auto"]::-webkit-scrollbar { width: 10px; }
body#indexBody #productDescription > div[style*="overflow:auto"]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }

/* Headings built via <font> */
body#indexBody #productDescription strong font[size="+2"],
body#indexBody #productDescription th font[size="+2"] {
  display: block;
  font-size: 1.25rem !important;
  font-weight: 700;
  line-height: 1.3;
  color: #111827;
  text-indent: -1em;
}

/* Images on the landing page */
body#indexBody #productDescription img {
  height: auto; max-width: 100%;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
body#indexBody #productDescription a > img[width="100px"] { margin: .4rem 0 .9rem 2rem; }

/* Landing page TABLE styling (keep this off product pages) */
body#indexBody #productDescription table {
  width: 100% !important;
  border-collapse: collapse;
  margin: .5rem 0 0 0;
  table-layout: fixed;
}
body#indexBody #productDescription th,
body#indexBody #productDescription td {
  padding: .5rem .6rem;
  vertical-align: top;
}
body#indexBody #productDescription th {
  font-weight: 700;
  background: #f3f6fb;
  color: #0f172a;
  border-top: 1px solid #e7edf7;
}
/* column widths */
body#indexBody #productDescription table tr > td:nth-child(1),
body#indexBody #productDescription table tr > th:nth-child(1) { width: 60%; }
body#indexBody #productDescription table tr > td:nth-child(2),
body#indexBody #productDescription table tr > th:nth-child(2) { width: 40%; }

/* bullet row tweaks */
body#indexBody #productDescription td.libdesc-bt strong { color: #64748b; margin-right: .35rem; }
body#indexBody #productDescription td.libdesc-bt a { text-decoration: none; border-bottom: 1px dotted #94a3b8; }
body#indexBody #productDescription td.libdesc-bt a:hover { border-bottom-color: transparent; }

/* People Groups select (landing page) */
body#indexBody #productDescription label[for="myselect"] {
  display: block; margin: .25rem 0 .4rem 0; font-weight: 600; color: #0f172a;
}
body#indexBody #productDescription #myselect {
  width: 100%; max-height: 22rem; border: 1px solid #d1d5db; border-radius: 8px;
  padding: .35rem .45rem; background: #fff; font-size: .975rem; line-height: 1.35; box-sizing: border-box;
}
body#indexBody #productDescription #myselect:focus { outline: 2px solid #93c5fd; outline-offset: 2px; }

/* Cleanups */
body#indexBody #productDescription tr:empty { display: none; }
body#indexBody #productDescription td:empty { padding: 0; }
body#indexBody #productDescription br + br { line-height: 0; }
body#indexBody #productDescription em, body#indexBody #productDescription i { color:#374151; }

/* Mobile “stack table to cards” — only on the landing page */
@media (max-width: 720px){
  body#indexBody #productDescription { padding: .9rem 1rem; }
  body#indexBody #productDescription table,
  body#indexBody #productDescription thead,
  body#indexBody #productDescription tbody,
  body#indexBody #productDescription tr,
  body#indexBody #productDescription th,
  body#indexBody #productDescription td{
    display: block; width: 100% !important;
  }
  body#indexBody #productDescription tr{
    padding: .5rem .4rem; margin: 0 0 .6rem 0;
    border: 1px solid #eef2f7; border-radius: 10px; background: #fcfdff;
  }
  body#indexBody #productDescription th{ border: 0; background: transparent; padding: 0 0 .25rem 0; }
  body#indexBody #productDescription td[rowspan]{ float:none; width:100%; }
}

/* ======================================
   Safety net: ensure product page .libdesc table stays simple
   ====================================== */
body#productinfoBody #productDescription table.libdesc {
  width: auto !important;
  border-collapse: separate;
  table-layout: auto;
  display: table;              /* defeat any display:block cascade */
}
body#productinfoBody #productDescription table.libdesc tr { display: table-row; }
body#productinfoBody #productDescription table.libdesc th,
body#productinfoBody #productDescription table.libdesc td { display: table-cell; padding: .25rem .5rem; }
@media (max-width: 720px){
  /* never stack the libdesc table on product pages */
  body#productinfoBody #productDescription table.libdesc,
  body#productinfoBody #productDescription table.libdesc thead,
  body#productinfoBody #productDescription table.libdesc tbody,
  body#productinfoBody #productDescription table.libdesc tr,
  body#productinfoBody #productDescription table.libdesc th,
  body#productinfoBody #productDescription table.libdesc td {
    display: table; width: auto !important;
  }
}


/* Further enhancements */

/* 1) COUNTRY LANDING PAGE: scope tightly to indexBody and to the NON-.libdesc table */
body#indexBody #contentMainWrapper #productDescription {
  max-width: 1000px;
  margin: 1.25rem auto;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid #e6e8ef;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  line-height: 1.6;
  color: #1f2937;
  font-size: 1rem;
}

/* History box override (inline height/overflow neutralized) */
body#indexBody #contentMainWrapper #productDescription > div[style*="overflow:auto"] {
  height: auto !important;
  overflow: visible !important;
  margin: .75rem 0 1rem 0;
  padding: .75rem .9rem;
  background: #f8fafc;
  border: 1px solid #e6e8ef;
  border-radius: 10px;
  line-height: 1.55;
}

/* Headings made with <font size="+2"> on landing */
body#indexBody #contentMainWrapper #productDescription strong font[size="+2"],
body#indexBody #contentMainWrapper #productDescription th font[size="+2"]{
  display: block;
  font-size: 1.25rem !important;
  font-weight: 700;
  line-height: 1.3;
  color: #111827;
  text-indent: -1em;
  padding-left: 1em;
}

/* LANDING PAGE TABLE: only the table WITHOUT .libdesc */
body#indexBody #contentMainWrapper #productDescription > table:not(.libdesc){
  width: 100% !important;
  border-collapse: collapse;
  margin: .5rem 0 0 0;
  table-layout: fixed;
}
body#indexBody #contentMainWrapper #productDescription > table:not(.libdesc) th,
body#indexBody #contentMainWrapper #productDescription > table:not(.libdesc) td{
  padding: .5rem .6rem;
  vertical-align: top;
  border-bottom: 1px solid #eef2f7;
}
body#indexBody #contentMainWrapper #productDescription > table:not(.libdesc) th{
  font-weight: 700;
  background: #f3f6fb;
  color: #0f172a;
  border-top: 1px solid #e7edf7;
}
body#indexBody #contentMainWrapper #productDescription > table:not(.libdesc) tr > *:nth-child(1){ width: 60%; }
body#indexBody #contentMainWrapper #productDescription > table:not(.libdesc) tr > *:nth-child(2){ width: 40%; }

/* People Groups select — only on landing page */
body#indexBody #contentMainWrapper #productDescription label[for="myselect"]{
  display: block; margin: .25rem 0 .4rem 0; font-weight: 600; color: #0f172a;
}
body#indexBody #contentMainWrapper #productDescription #myselect{
  width: 100%; max-height: 22rem;
  border: 1px solid #d1d5db; border-radius: 8px; padding: .35rem .45rem;
  background: #fff; font-size: .975rem; line-height: 1.35; box-sizing: border-box;
}
body#indexBody #contentMainWrapper #productDescription #myselect:focus{
  outline: 2px solid #93c5fd; outline-offset: 2px;
}

/* Mobile “stack to cards” — ONLY for the landing table */
@media (max-width: 720px){
  body#indexBody #contentMainWrapper #productDescription > table:not(.libdesc),
  body#indexBody #contentMainWrapper #productDescription > table:not(.libdesc) thead,
  body#indexBody #contentMainWrapper #productDescription > table:not(.libdesc) tbody,
  body#indexBody #contentMainWrapper #productDescription > table:not(.libdesc) tr,
  body#indexBody #contentMainWrapper #productDescription > table:not(.libdesc) th,
  body#indexBody #contentMainWrapper #productDescription > table:not(.libdesc) td{
    display: block; width: 100% !important;
  }
  body#indexBody #contentMainWrapper #productDescription > table:not(.libdesc) tr{
    padding: .5rem .4rem; margin: 0 0 .6rem 0;
    border: 1px solid #eef2f7; border-radius: 10px; background: #fcfdff;
  }
  body#indexBody #contentMainWrapper #productDescription > table:not(.libdesc) th{
    border: 0; background: transparent; padding: 0 0 .25rem 0;
  }
  body#indexBody #contentMainWrapper #productDescription td[rowspan]{ float:none; width:100%; }
}

/* 2) PRODUCT PAGE GUARD: keep the small metadata table (.libdesc) untouched everywhere on product pages */
body#productinfoBody #contentMainWrapper #productDescription table.libdesc{
  width: auto !important;
  border-collapse: separate;
  table-layout: auto;
  display: table !important; /* defeat any block conversion */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body#productinfoBody #contentMainWrapper #productDescription table.libdesc tr{ display: table-row !important; }
body#productinfoBody #contentMainWrapper #productDescription table.libdesc th,
body#productinfoBody #contentMainWrapper #productDescription table.libdesc td{
  display: table-cell !important;
  padding: .25rem .5rem !important;
  border: 0 !important;
  background: transparent !important;
}

/* Make sure the product page wrapper doesn’t inherit the landing page “card” box */
body#productinfoBody #contentMainWrapper #productDescription{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: none !important;
}

/* 3) LAST-RESORT SHIELD (if any global #productDescription table rules remain elsewhere) */
@media (max-width: 9000px){
  body#productinfoBody #contentMainWrapper #productDescription table.libdesc,
  body#productinfoBody #contentMainWrapper #productDescription table.libdesc *{
    /* prevent later sheets (e.g., responsive.css) from blockifying */
    float: none !important;
    width: auto !important;
  }
}



/* ======================================
   24) "New Products…" card (canonical)
   - Outer wrapper = spacing only
   - Inner wrapper = actual card (contains floats)
   - Heading = flush to card top (no extra gap above)
   ====================================== */

/* Remove the inherited shading from all centerBoxWrapper elements
   but keep it inside the actual card (#whatsNew). */
.centerColumn .centerBoxWrapper {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Preserve the card styling for #whatsNew only */
.centerColumn #whatsNew > div {
  display: flow-root !important;
  /* Light Gray 5% */
  background: #f2f2f2 !important;
  border: 1px solid var(--blue-300, #6080c0) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.15) !important;
  padding: 0 16px 12px !important;
  overflow: hidden !important;
}

/* Heading placement and styling */
.centerColumn #whatsNew .centerBoxHeading {
  margin: 12px 0 .75rem !important;
  padding: 0 0 .5rem 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.12) !important;
  background: transparent !important;
  font-weight: 700;
}

/* Tile cleanup */
.centerColumn #whatsNew .centerBoxContentsNew {
  padding: .5rem 0 1rem !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


@media (max-width: 720px) {
  .centerColumn #whatsNew .centerBoxContentsNew {
    width: auto !important;
    float: none !important;
    margin: 0 auto !important;
    text-align: center;
  }
}