/* myzencartzone.com: brand gradient, the same slate-to-teal as the product tiles.
   Loads after stylesheet_zca_colors.css (Zen Cart loads stylesheet*.css in name order);
   !important is needed on the nav bar because Bootstrap's .bg-dark uses it. */
#navMain,
.leftBoxHeading,
.rightBoxHeading,
.centerBoxHeading {
    background: linear-gradient(135deg, #1A3B4D 0%, #075F87 100%) !important;
    color: #ffffff;
}
.leftBoxHeading a,
.rightBoxHeading a,
.centerBoxHeading a {
    color: #ffffff;
}

/* Product page: just the Add to Cart button, no card around it, no heading, no "Max: 1". */
#addToCart-card { border: 0; background: transparent; box-shadow: none; }
#addToCart-card-header, #min-max-units { display: none !important; }
#cartAdd { padding: 0 0 1rem; }

/* Product page, desktop: keep the right column (price, license, Add to Cart) in view while
   the long description scrolls, as on mysquarepay.com. align-self gives the sticky element
   room inside the flex row; the negative top lets the upper part scroll off before it pins.
   The price card starts 8.2rem down the column and the fixed navbar is 4.1rem tall, so
   -4.1rem + 8px pins the card just below the navbar, with the Model row and Ask a Question
   button behind it. In rem because both sizes follow the browser's font size (16px default,
   20px on "Large"). Everything from the price down to Add to Cart has to fit under the
   navbar or the button drops off the bottom, so that block is tightened (the "Please
   Choose:" heading goes; the option's own heading says what to pick), and a window too
   short to hold it (under 28rem) doesn't stick at all. */
#attributes-card-header { display: none; }
@media (min-width: 576px) and (min-height: 28rem) {
  #productInfo-displayColRight {
    position: sticky;
    align-self: flex-start;
    top: calc(-4.1rem + 8px);
  }
  #productsPriceTop-card, #attributes-card, #attributes-card .card { margin-bottom: 0.5rem !important; }
  #productsPriceTop-card-body { padding: 0.5rem 1rem !important; }
  #attributes-card-body { padding: 0.5rem; }
}

/* The Free badge (drawn by auto.mzz_free_badge.php in place of core's free.png) sits in the
   product page's price heading and in the listing's right-aligned price cell. On a phone in
   portrait both stack into one column and a badge hugging one edge looks dropped; centered
   reads as intended. Desktop keeps the price block's own alignment. */
@media (max-width: 575px) {
  .mzz-free-badge {
    display: block;
    margin: 0.25rem auto 0;
  }
  .productPriceTopPrice,
  .productListing-data .pl-dp {
    text-align: center;
  }
}

/* The navbar's dropdown toggles (Categories, Information, More Information, EZ-Pages) are
   <button>s now, not <a href="#"> -- a menu toggle goes nowhere, and Lighthouse reported the
   placeholder links as non-descriptive on mysquarepay.com; same template, same change here.
   Bootstrap's .btn draws them as filled buttons; this puts them back to looking like the nav
   links beside them. The focus ring is kept. */
.navbar-nav button.nav-link.dropdown-toggle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none;
  padding: .5rem 0;
  font: inherit;
  text-align: left;
  width: auto;
}
.navbar-nav button.nav-link.dropdown-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Bootstrap's <code> pink (#e83e8c) is 3.8:1 on white; WCAG AA wants 4.5:1 for body-size
   text, and the product descriptions use <code> for file names. This deeper pink is 6:1 and
   still reads as "code". Found by axe-core, 2026-09-08. */
code {
  color: #b3226b;
}

/* The New Products box title is a <p> styled as h3 (Bootstrap's centerbox modules do that),
   so Siteimprove measures it as body text and wants 1.5 line-height rather than the 1.2 a
   heading gets. John's rule, 2026-09-08. */
p#newCenterbox-card-header {
    line-height: 1.5;
}

/* The links Siteimprove's 44x44 "enhanced" check names: every sidebox heading link (the
   "[more]" on Reviews, Shopping Cart, and any box that grows one) and the Social Contact
   Footer's privacy link. Padding takes the box to 44px; the equal negative margin hands that
   space back, so the heading bar and the footer line stay the height they are and only the
   target grows. John, 2026-09-08. */
.leftBoxHeading a,
.rightBoxHeading a,
.singleBoxHeading a,
.scf-privacy a {
    display: inline-block;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    padding: 10px 4px;
    margin: -10px -4px;
    line-height: 24px;
}

/* Home page, New Products (and the other centerboxes): each product is a Bootstrap .card,
   which is a column flexbox, so the badge is a flex item and text-align on the card does
   nothing to it -- it sits at the cross-axis start, hard left, at every width. Centering a
   flex item is align-self. The card centers everything else it holds, so this applies at
   all widths, not only on phones. dbltoe saw it on a phone first. */
.centerBoxContents > .mzz-free-badge {
  align-self: center;
}

/* Centerbox product links at a 44x44 minimum target, per Siteimprove's checker (WCAG 2.5.5,
   the AAA size; AA's 2.5.8 is 24px and these already met it). min-height only counts on a
   box, so the link becomes inline-block, and the padding takes it to 44px with the text
   centered in the box rather than sitting on its top edge. John's call, 2026-09-08. */
.centerBoxContents > a:not(:has(img)) {
  min-width: 44px;
  min-height: 44px;
  padding: 10px 4px;
  line-height: 24px;
}

/* The customization offer under every plugin description (tpl_product_info_display.php;
   wording TEXT_MZZ_CUSTOMIZE in lang.mzz.php). A quiet panel in the brand teal, 2026-09-13. */
.mzz-customize {
  border-left: 4px solid #075F87;
  background: rgba(7, 95, 135, 0.06);
  padding: 12px 16px;
  border-radius: 4px;
}
.mzz-customize a {
  font-weight: 600;
}

/* Services and Hosting pages (Document - General, 2026-09-29). They have no image yet, so:
   the empty image column goes and the text takes the full width; the listing drops the
   broken image (src "images/"); no "notify me of updates" box and no "Product 2/4" bar,
   which are product ideas, not service ones. The :has() guard lets an image, once added,
   bring its column back without touching this file. */
#documentGeneralInfo-displayColRight:not(:has(*)) {
  display: none;
}
img.listingProductImage[src="images/"] {
  display: none;
}
#documentgeneralinfoBody #ProductNotifications-centerBoxContents,
#documentgeneralinfoBody #documentGeneralInfo-productPrevNextTop,
#documentgeneralinfoBody #documentGeneralInfo-productPrevNextBottom {
  display: none;
}

/* ---- Home page and header refresh, 2026-09-30 (John: "too much like a boring,
   out-of-the-box site"). ---- */

/* Hero band (tpl_index_default.php): headline, lead and two buttons on the brand gradient,
   the logo on a white panel beside them. Stacks below 768px. */
.mzz-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
  background: linear-gradient(135deg, #1A3B4D 0%, #075F87 100%);
  color: #ffffff;
  border-radius: 0.75rem;
  padding: 2.5rem;
  margin-bottom: 2rem;
}
.mzz-hero-text {
  flex: 1 1 22rem;
}
.mzz-hero h1.pageHeading {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  text-align: left !important;
}
.mzz-hero-lead {
  font-size: 1.2rem;
  line-height: 1.5;
  max-width: 44rem;
  margin-bottom: 1.5rem;
}
.mzz-hero-actions {
  margin: 0;
}
.mzz-hero-actions .btn {
  margin: 0 0.75rem 0.5rem 0;
}
.mzz-hero-logo {
  flex: 0 1 auto;
  background: #ffffff;
  border-radius: 0.5rem;
  padding: 0.75rem 1.25rem;
  margin: 0 auto;
}
.mzz-hero-logo img {
  display: block;
  max-width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  .mzz-hero { padding: 1.5rem; }
  .mzz-hero h1.pageHeading { font-size: 1.9rem; }
}

/* Buttons used by the hero and the cards. All three pairs are AAA (7:1 or better) at rest and
   on hover: slate #1A3B4D on yellow #FFD94D is 8.6:1 and on white 11.8:1; white on teal #075F87
   is 7.0:1 and on slate 11.8:1. (The first cut used the darker gold #E0B03B at rest, which is
   only 5.9:1.) !important on the colors because the template's own .btn:hover / a:hover color
   keys would otherwise repaint them. */
.btn.mzz-btn-gold,
.btn.mzz-btn-light,
.btn.mzz-btn-teal {
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  border-radius: 0.4rem;
  border: 2px solid transparent;
  text-decoration: none !important;
}
.btn.mzz-btn-gold { background: #FFD94D !important; color: #1A3B4D !important; border-color: #FFD94D !important; }
.btn.mzz-btn-gold:hover, .btn.mzz-btn-gold:focus, .btn.mzz-btn-gold:active { background: #ffffff !important; color: #1A3B4D !important; border-color: #ffffff !important; }
.btn.mzz-btn-light { background: transparent !important; color: #ffffff !important; border-color: #ffffff !important; }
.btn.mzz-btn-light:hover, .btn.mzz-btn-light:focus, .btn.mzz-btn-light:active { background: #ffffff !important; color: #1A3B4D !important; border-color: #ffffff !important; }
.btn.mzz-btn-teal { background: #075F87 !important; color: #ffffff !important; border-color: #075F87 !important; }
.btn.mzz-btn-teal:hover, .btn.mzz-btn-teal:focus, .btn.mzz-btn-teal:active { background: #1A3B4D !important; color: #ffffff !important; border-color: #1A3B4D !important; }

/* The four section cards (define_main_page.php): tile on top, text, button pinned to the
   bottom so the four buttons line up whatever the text length. */
.mzz-card {
  border: 1px solid #d5dde2;
  border-radius: 0.6rem;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(26, 59, 77, 0.12);
  transition: box-shadow 0.2s ease;
}
/* Hover: the card stays where it is and its shadow deepens, so it reads as lifting off the
   page without anything moving (John, 2026-10-01: no "jumpy" hover). Two layers: a tight
   contact shadow and a wide soft one. */
.mzz-card:hover {
  box-shadow: 0 4px 8px rgba(26, 59, 77, 0.18), 0 14px 32px rgba(26, 59, 77, 0.28);
}
@media (prefers-reduced-motion: reduce) {
  .mzz-card { transition: none; }
}
.mzz-card .card-img-top {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 14%; /* the icon; the caption below it is cropped, the card title names the section */
}
.mzz-card h2.card-title {
  font-size: 1.5rem;
  color: #1A3B4D;
}

/* Navbar: the cart from the logo in front of the store name (the Trademark plugin prints
   the name as p.tradeMark), and the four section links a touch bolder than Home / Log In. */
.navbar p.tradeMark::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.6rem;
  margin-right: 0.5rem;
  vertical-align: -0.35rem;
  background: url(../images/cart-mark-white.png) center / contain no-repeat;
}
.navbar .mzz-nav-section .nav-link {
  font-weight: 600;
}

/* Listing: no "Max: 1" under the button (the product page already hides it). */
.mmu-wrap { display: none; }

/* With the Reviews sidebox off, the right column is empty unless the cart or best sellers
   have something to show. An empty column still took its width, so it steps aside and the
   main column takes the room. */
@media (min-width: 992px) {
  /* !important because Bootstrap's .d-lg-block carries it; :has() can't be nested, so the row is tested once. */
  #mainWrapper > .row:not(:has(.rightBoxCard)) > #navColumnTwo { display: none !important; }
  #mainWrapper > .row:not(:has(.rightBoxCard)) > .col-12 { flex: 1 1 0; max-width: 100%; }
}

/* ---- Listings as a card grid, and the footer, 2026-09-30 (items 5 and 6 of the refresh). ---- */

/* Product listings: PRODUCT_LISTING_COLUMNS_PER_ROW = 3 makes the template print cards.
   Here: the tile fills the card top, the stray <br>s go, and the price/badge and the button
   are pushed to the bottom so they line up across a row whatever the text length. */
.card:has(> .card-body > .card-deck) { border: 0; background: transparent; }
.card-body:has(> .card-deck) { padding: 0; }
.card-deck > .col { padding-left: 0.6rem; padding-right: 0.6rem; }
.centerBoxContentsListing {
  padding: 0 0 1.25rem !important;
  border: 1px solid #d5dde2;
  border-radius: 0.6rem;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(26, 59, 77, 0.12);
  transition: box-shadow 0.2s ease;
}
/* Hover: shadow only, no movement (see .mzz-card). */
.centerBoxContentsListing:hover {
  box-shadow: 0 4px 8px rgba(26, 59, 77, 0.18), 0 14px 32px rgba(26, 59, 77, 0.28);
}
@media (prefers-reduced-motion: reduce) {
  .centerBoxContentsListing { transition: none; }
}
.centerBoxContentsListing > br,
.centerBoxContentsListing .pl-dp br { display: none; }
.centerBoxContentsListing img.listingProductImage {
  display: block;
  width: 100%;
  height: auto;
}
.centerBoxContentsListing .itemTitle {
  margin: 1rem 1rem 0.5rem;
  font-weight: 700;
}
.centerBoxContentsListing .itemTitle a { color: #1A3B4D; text-decoration: none; }
.centerBoxContentsListing .itemTitle a:hover { text-decoration: underline; }
.centerBoxContentsListing .listingDescription {
  margin: 0 1rem 1rem;
  text-align: left;
}
.centerBoxContentsListing .pl-dp {
  margin-top: auto;
  font-size: 1.15rem;
  font-weight: 600;
}
.centerBoxContentsListing .listingBuyNowButton,
.centerBoxContentsListing .moreinfoLink {
  align-self: center;
  margin-top: 0.75rem !important;
  padding: 0.6rem 1.25rem !important;
  border-radius: 0.4rem;
  background: #075F87 !important;
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: none !important;
}
.centerBoxContentsListing .listingBuyNowButton:hover,
.centerBoxContentsListing .listingBuyNowButton:focus,
.centerBoxContentsListing .moreinfoLink:hover,
.centerBoxContentsListing .moreinfoLink:focus {
  background: #1A3B4D !important;
  color: #ffffff !important;
}

/* Footer: one slate band holding the link columns, the Social Contact Footer block and the
   legal line. Text and links are white on #1A3B4D (11.9:1). */
#footer-wrapper {
  background: #1A3B4D;
  color: #ffffff;
  margin-top: 2.5rem;
  padding-top: 2rem;
  padding-bottom: 1.5rem;
}
#footer-wrapper a { color: #ffffff; }
#footer-wrapper a:hover, #footer-wrapper a:focus { color: #FFD94D; }
#mzz-footer-nav {
  max-width: 72rem;
  margin: 0 auto 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.mzz-footer-heading {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFD94D;
  margin-bottom: 0.75rem;
}
#mzz-footer-nav li { margin-bottom: 0.15rem; }
#mzz-footer-nav li a {
  display: inline-block;
  padding: 0.3rem 0;
  text-decoration: none;
}
#mzz-footer-nav li a:hover { text-decoration: underline; }
.mzz-footer-host img {
  background: #ffffff;
  border-radius: 50%;
  margin-bottom: 0.5rem;
}
.mzz-footer-host p { font-size: 0.9rem; }
#footer-wrapper .scf-heading,
#footer-wrapper .scf-label,
#footer-wrapper .scf-radio,
#footer-wrapper #siteinfoLegal { color: #ffffff; }
#footer-wrapper #siteinfoLegal { margin-top: 1rem; }
/* The template paints the inner #footerWrapper white with black text (a ZCA color key);
   inside the slate band it has to be see-through and white. */
#footer-wrapper #footerWrapper { background: transparent; color: #ffffff; }

/* 44x44 targets for the breadcrumb and footer links (Siteimprove, WCAG 2.5.5), 2026-09-30.
   Same method as the sidebox heading links above: padding takes the link's box to 44px and,
   in the breadcrumb and the legal line, an equal negative margin hands the space back so the
   bar and the line keep their height. The footer columns simply get taller rows. */
#navBreadCrumb li a,
#footer-wrapper #siteinfoLegal a {
  display: inline-block;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 4px;
  margin: -10px -4px;
  line-height: 24px;
  text-align: center;
}
#mzz-footer-nav li { margin-bottom: 0; }
#mzz-footer-nav li a {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 0;
  line-height: 24px;
}
.mzz-footer-host a { display: inline-block; }
#back-to-top {
  min-width: 44px;
  min-height: 44px;
}

/* Centerboxes in carousel mode (New Products on the home and category pages, and any other
   scrolling box): the product links are children of .carousel-grid, not .centerBoxContents,
   so the 44x44 rule above never reached them. Inline links measure 22px high, and the image
   link was a 22px strip round an 80px image. inline-block gives each link its real box; the
   name link is padded to 44px. Siteimprove, 2026-10-01. */
.centerBoxWrapper .carousel-grid > a {
  display: inline-block;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
}
.centerBoxWrapper .carousel-grid > a:not(:has(img)) {
  padding: 10px 4px;
  line-height: 24px;
}
.centerBoxWrapper .carousel-control-prev,
.centerBoxWrapper .carousel-control-next {
  min-width: 44px;
  min-height: 44px;
}

/* The rest of the under-44px targets found by sweeping six pages after the above: navbar
   links (40px), listing card titles (26px), template buttons (38-42px) and the filter/sort
   and option dropdowns (38px). Links inside a sentence are left alone; WCAG 2.5.5 exempts
   inline links. */
nav.navbar .navbar-nav .nav-link {
  min-height: 44px;
  display: flex;
  align-items: center;
}
nav.navbar .navbar-nav .nav-link > i { margin-right: 0.3rem; }
.centerBoxContentsListing .itemTitle a {
  display: inline-block;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 4px;
  margin: -10px -4px;
  line-height: 24px;
}
a.btn, button.btn, input.btn { min-height: 44px; min-width: 44px; }
a.btn { display: inline-flex; align-items: center; justify-content: center; }
select.custom-select { min-height: 44px; }

/* Links inside the tinted panels on product pages (.mzz-customize, also used by the "See it
   working" demo line): teal on the 6% teal tint is 6.4:1, short of AAA. Slate is 10.7:1,
   black on hover. Siteimprove, 2026-10-01. */
.mzz-customize a { color: #1A3B4D; }
.mzz-customize a:hover, .mzz-customize a:focus { color: #000000; }

/* The price is a <p> styled as h2 now, so Siteimprove measures it as body text and wants a
   1.5 line-height, not the 1.2 Bootstrap's .h2 gives. Same case as p#newCenterbox-card-header. */
p.productPriceTopPrice,
p.productPriceBottomPrice {
  line-height: 1.5;
}

/* All Products / New Products / any paginated listing (Siteimprove, 2026-10-01):
   page-number links were 34x38 with a 1.25 line-height; card title links had a 1.2
   line-height (they inherit .h5, and the 44px rule above had pinned 24px on a 20px font);
   "More Info" was 43px high. All now 44px targets with a 1.5 line-height. */
.pagination .page-link {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.centerBoxContentsListing .itemTitle,
.centerBoxContentsListing .itemTitle a {
  line-height: 1.5;
}
.centerBoxContentsListing .itemTitle a {
  padding: 7px 4px;
  margin: -7px -4px;
}
.centerBoxContentsListing .moreinfoLink,
.centerBoxContentsListing .listingBuyNowButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  line-height: 1.5;
}

/* A listing whose count isn't a multiple of three (Services and Hosting have four) left one
   card alone on the last row, and a lone flex item grows to the full row: one giant card.
   Every card is a fixed third now, and a short last row is centered. Below 576px the deck
   is a block and the cards stack full width, as before. 2026-10-01. */
@media (min-width: 576px) {
  /* Scoped to listing decks: the template also uses .card-deck in sideboxes and on the
     checkout and order pages, which must keep their own widths. */
  .card-deck:has(> .col > .centerBoxContentsListing) { justify-content: center; }
  .card-deck > .col:has(> .centerBoxContentsListing) {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

/* A four-item list (Services, Hosting) is printed as one row of four by product_listing.php.
   Four across where the main column is wide enough (992px and up); two by two from 576px. */
@media (min-width: 576px) {
  .card-deck > .col:has(> .centerBoxContentsListing):first-child:nth-last-child(4),
  .card-deck > .col:has(> .centerBoxContentsListing):first-child:nth-last-child(4) ~ .col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 992px) {
  .card-deck > .col:has(> .centerBoxContentsListing):first-child:nth-last-child(4),
  .card-deck > .col:has(> .centerBoxContentsListing):first-child:nth-last-child(4) ~ .col {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* When the whole list is on one page (no page-number bar), the filter and sort row and the
   "Displaying 1 to N (of N Products)" lines say nothing useful, so they go. A list long
   enough to paginate (All Products today) keeps all three. */
main:not(:has(nav[aria-label*="Pagination"])) #indexProductList-filterRow,
main:not(:has(nav[aria-label*="Pagination"])) #productsListing-topNumber,
main:not(:has(nav[aria-label*="Pagination"])) #productsListing-bottomNumber {
  display: none;
}