/* Post-Weebly additions: pure-CSS desktop dropdown menus (Weebly's main.js
   used to build these as JS flyouts) plus small cleanups. */

/* Desktop nav dropdowns */
.desktop-nav li.wsite-menu-item-wrap,
.desktop-nav li.wsite-menu-subitem-wrap {
  position: relative;
}
/* Styling mirrors the theme's own flyout rules, which are scoped to `#wsite-menus`
   — the container Weebly's JS moved flyouts into. These dropdowns stay put in the
   markup, so they never matched that selector: white panel, 1px black border,
   black uppercase Montserrat, faint grey hover. */
.desktop-nav .wsite-menu-wrap {
  display: none !important;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3000;
  min-width: 230px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #000000, 0 2px 8px rgba(0, 0, 0, 0.18);
  padding: 4px 0;
}
.desktop-nav .wsite-menu-wrap a.wsite-menu-subitem,
.desktop-nav .wsite-menu-wrap a.wsite-menu-subitem .wsite-menu-title,
.desktop-nav .wsite-menu-wrap a.wsite-menu-subitem .wsite-menu-arrow {
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent;
}
.desktop-nav .wsite-menu-wrap a.wsite-menu-subitem:hover {
  background: rgba(0, 0, 0, 0.05);
}
.desktop-nav li:hover > .wsite-menu-wrap,
.desktop-nav li:focus-within > .wsite-menu-wrap {
  display: block !important;
}
/* The theme clips the nav's own <ul> (`.nav ul { overflow: hidden }`, there to
   stop a long menu spilling past `max-width: calc(100vw - 480px)`). Weebly's JS
   used to lift the flyouts out of that container before showing them — see
   `_moveFlyout` in files/theme/custom.js — so the clip never applied to them.
   These dropdowns are pure CSS and stay where they are in the markup, so without
   this they were laid out at full size and then clipped away to nothing: the
   hover worked, but nothing was ever painted.

   `.nav ul` matches the submenu <ul>s too, so the third-level flyouts
   ("Fat Bottom Trivia" →) need the same treatment or they get clipped by their
   own parent menu. */
.desktop-nav ul.wsite-menu-default,
.desktop-nav ul.wsite-menu {
  overflow: visible;
}
/* nested (third-level) flyouts open to the side */
.desktop-nav .wsite-menu .wsite-menu-wrap {
  top: 0;
  left: 100%;
}
.desktop-nav .wsite-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.desktop-nav .wsite-menu li {
  display: block;
  float: none;
}
.desktop-nav .wsite-menu a.wsite-menu-subitem {
  display: block;
  padding: 10px 16px;
  white-space: nowrap;
  text-align: left;
}

/* Weebly's JS-driven section "reveal" effect hid banner content until their
   platform JS animated it in; that JS is gone, so force content visible. */
[class*="wsite-section-effect"] .wsite-section-content > * {
  visibility: visible !important;
}

/* Hide leftover commerce / membership UI if any slipped through */
#wsite-mini-cart,
.wsite-com-search,
#wsite-com-product-fulfillment-options-container {
  display: none !important;
}

/* LemonSqueezy buy button spacing on product pages */
#wsite-com-product-buy .ls-buy {
  margin-top: 10px;
}

/* ------------------------------------------------------------------- CTA buttons
   The theme has no button variant that survives on a light body section:
   `.wsite-button-highlight.wsite-button-large:not(.wsite-buy-button)` is
   white-on-white (it was written for buttons sitting on a dark hero image), and
   a plain `.wsite-button` is transparent with white text. Both vanish on a white
   background. `.fce-cta` is the theme's own black button, reusable for content
   CTAs anywhere on the site. */
a.fce-cta,
a.fce-cta-secondary {
  display: inline-block;
  padding: 12px 26px;
  margin: 4px 6px 4px 0;
  border-radius: 2px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}
a.fce-cta {
  background-color: #000000;
  color: #ffffff !important;
  border: 1px solid #000000;
}
a.fce-cta:hover {
  background-color: transparent;
  color: #000000 !important;
}
a.fce-cta-secondary {
  background-color: transparent;
  color: #000000 !important;
  border: 1px solid #000000;
}
a.fce-cta-secondary:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

/* When a KDP product lists Kindle and paperback separately, ls-buy.js clones the
   buy button for the second edition and drops the duplicate `id`. The theme only
   gives buy buttons their white-on-black text via
   `#wsite-com-product-add-to-cart.wsite-button-highlight`, which out-specifies the
   green `#wsite-com-product-gen a` link colour — so without the id the clone came
   out with green text. These restore the theme's own pair for any .kdp-buy. */
#wsite-com-product-gen a.kdp-buy.wsite-button-highlight,
#wsite-com-product-buy a.kdp-buy.wsite-button-highlight {
  color: #ffffff !important;
}
#wsite-com-product-gen a.kdp-buy.wsite-button-highlight:hover,
#wsite-com-product-buy a.kdp-buy.wsite-button-highlight:hover {
  color: #000000 !important;
}

/* ------------------------------------------------------------------ store grid
   Weebly laid the product/category grids out with `float: left` columns. With
   floats, a tile shorter than its neighbours leaves a notch that the next tile
   drops into, and then nothing fits beside it — so it ends up alone on a row
   while the rest of the grid shifts down. Tile heights always vary here because
   product names wrap to one, two or three lines.

   Flex wrapping makes each row an actual row, so tiles can no longer snag on
   each other regardless of how long a product name is. The `width: N%` on the
   columns (set per-page and in the mobile media queries) still decides how many
   fit per row, so the existing responsive behaviour is unchanged. */
.wsite-com-category-product-featured-group,
.wsite-com-category-product-group,
.wsite-com-category-subcategory-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.wsite-com-category-product-featured-group > .wsite-com-column,
.wsite-com-category-product-group > .wsite-com-column,
.wsite-com-category-subcategory-group > .wsite-com-column {
  box-sizing: border-box;
}

/* Reserve two lines for the product name so the common one-line/two-line
   difference doesn't leave tiles in a row at visibly different heights.
   Longer names still grow; flex wrapping keeps the rows intact. */
.wsite-com-category-product-name {
  min-height: 40px; /* 2 x the 20px line-height */
}