/* Category hub redesign (v3), 2026-10-15.
   Restyles the LIVE hub markup (ab-hub-category.php, generated into the redesign chrome by
   mu-plugins/ab-hub-v3-router.php). Scoped to body.ab-redesign-hub .ab-v3-main.
   Tokens: forest #2E331D, leaf #7FC688, marigold #FAAF3A, page-bg #EBF4E8, card #F7FFF4. */

body.ab-redesign-hub { background: var(--ab-color-page-bg); }
body.ab-redesign-hub .site-header .header-phone { color: var(--ab-color-forest); }
body.ab-redesign-hub .ab-v3-main { font-family: var(--ab-font-body); color: var(--ab-color-forest); }
body.ab-redesign-hub .ab-v3-main a { color: var(--ab-color-forest); }

/* ---------- Hero: light, brand type (was a dark green slab) ---------- */
body.ab-redesign-hub .ab-v3-main .ab-hub-hero { background: transparent; padding: 44px 32px 8px; }
body.ab-redesign-hub .ab-v3-main .ab-hub-hero__inner { max-width: 1256px; margin: 0 auto; padding: 0; }
body.ab-redesign-hub .ab-v3-main .ab-hub-hero__label,
body.ab-redesign-hub .ab-v3-main .ab-hub-hero__label a {
  font-family: var(--ab-font-body); font-size: 12px; letter-spacing: .03em; text-transform: none; color: rgba(46, 51, 29, .6); margin: 0 0 14px;
}
body.ab-redesign-hub .ab-v3-main .ab-hub-hero__title {
  font-family: var(--ab-font-display); font-weight: 400; text-transform: lowercase; letter-spacing: 0;
  font-size: clamp(40px, 5vw, 68px); line-height: 1; color: var(--ab-color-forest); margin: 0 0 16px;
}
body.ab-redesign-hub .ab-v3-main .ab-hub-hero__desc {
  font-family: var(--ab-font-body); font-weight: 300; font-size: 16px; line-height: 1.7; color: rgba(46, 51, 29, .85); max-width: 720px; margin: 0;
}

/* Intro (inline-styled grey box in the template) */
body.ab-redesign-hub .ab-v3-main .ab-hub-intro {
  max-width: 1256px !important; margin: 24px auto 8px !important; background: var(--ab-color-card-bg) !important;
  border: 0 !important; border-radius: 22px !important; padding: 22px 28px !important;
  font-family: var(--ab-font-body); font-size: 15px !important; line-height: 1.75 !important; color: rgba(46, 51, 29, .85) !important;
}
body.ab-redesign-hub .ab-v3-main .ab-hub-intro p:last-child { margin-bottom: 0; }

/* ---------- Filter pills ---------- */
body.ab-redesign-hub .ab-v3-main .ab-hub-filters {
  max-width: 1256px; margin: 28px auto 0; padding: 0 0; display: flex; flex-wrap: wrap; gap: 8px; border: 0; background: none;
}
body.ab-redesign-hub .ab-v3-main .ab-filter-pill {
  font-family: var(--ab-font-body); font-size: 13px; font-weight: 400; letter-spacing: .02em; text-transform: none;
  background: #fff; color: var(--ab-color-forest); border: 1.5px solid rgba(46, 51, 29, .2); border-radius: 999px;
  padding: 8px 18px; line-height: 1.3; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease;
}
body.ab-redesign-hub .ab-v3-main .ab-filter-pill:hover { border-color: var(--ab-color-marigold); }
body.ab-redesign-hub .ab-v3-main .ab-filter-pill--active,
body.ab-redesign-hub .ab-v3-main .ab-filter-pill--active:hover { background: var(--ab-color-forest); border-color: var(--ab-color-forest); color: #fff; }

/* ---------- Count + sort ---------- */
body.ab-redesign-hub .ab-v3-main .ab-hub-products { max-width: 1256px; margin: 0 auto; padding: 22px 0 0; }
body.ab-redesign-hub .ab-v3-main .ab-hub-products__header {
  display: flex; align-items: center; justify-content: space-between; border: 0; padding: 0 0 18px; margin: 0;
}
body.ab-redesign-hub .ab-v3-main .ab-hub-products__count { font-family: var(--ab-font-body); font-size: 13px; color: rgba(46, 51, 29, .65); }
body.ab-redesign-hub .ab-v3-main .ab-hub-sort {
  font-family: var(--ab-font-body); font-size: 13px; color: var(--ab-color-forest); background: #fff;
  border: 1.5px solid rgba(46, 51, 29, .2); border-radius: 999px; padding: 8px 32px 8px 16px; height: auto;
}

/* ---------- Product grid: 4 across, cream cards like the homepage ---------- */
body.ab-redesign-hub .ab-v3-main .ab-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
body.ab-redesign-hub .ab-v3-main .ab-product-card {
  background: var(--ab-color-card-bg); border: 0; border-radius: 24px; box-shadow: none; overflow: hidden;
  display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease;
}
body.ab-redesign-hub .ab-v3-main .ab-product-card:hover { transform: translateY(-6px); box-shadow: 0 16px 28px rgba(46, 51, 29, .12); }
body.ab-redesign-hub .ab-v3-main .ab-product-card__img-wrap {
  display: block; background: transparent; padding: 18px 18px 0; aspect-ratio: 1 / 1; border: 0;
}
body.ab-redesign-hub .ab-v3-main .ab-product-card__img-wrap img {
  width: 100%; height: 100%; object-fit: contain; border-radius: 16px; background: transparent;
}
body.ab-redesign-hub .ab-v3-main .ab-product-card__body {
  padding: 14px 18px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1 1 auto;
}
body.ab-redesign-hub .ab-v3-main .ab-product-card__title,
body.ab-redesign-hub .ab-v3-main .ab-product-card__title a {
  font-family: var(--ab-font-display); font-weight: 400; text-transform: lowercase; letter-spacing: 0;
  font-size: 19px; line-height: 1.1; color: var(--ab-color-forest); margin: 0 0 8px; min-height: 2.2em;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
body.ab-redesign-hub .ab-v3-main .ab-product-card__price,
body.ab-redesign-hub .ab-v3-main .ab-product-card__price * {
  font-family: var(--ab-font-body); font-size: 14px; color: var(--ab-color-forest); font-weight: 400;
}
body.ab-redesign-hub .ab-v3-main .ab-product-card__price small,
body.ab-redesign-hub .ab-v3-main .ab-product-card__price .wcsatt-sub-options,
body.ab-redesign-hub .ab-v3-main .ab-product-card__price .wcsatt-sub-discount { font-size: 12px; color: rgba(46, 51, 29, .65); }
body.ab-redesign-hub .ab-v3-main .ab-grid-stars { margin: 6px 0 14px; justify-content: center; }
body.ab-redesign-hub .ab-v3-main .ab-grid-stars .ab-star { color: var(--ab-color-marigold); font-size: 14px; }
body.ab-redesign-hub .ab-v3-main .ab-grid-stars .ab-star-count { font-size: 12px; color: rgba(46, 51, 29, .55); }
body.ab-redesign-hub .ab-v3-main .ab-product-card__btn {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ab-color-forest); color: #fff !important; border: 0; border-radius: 999px; padding: 11px 24px;
  font-family: var(--ab-font-body); font-size: 14px; font-weight: 400; letter-spacing: .2px; text-transform: none; width: auto;
  transition: background .18s ease, color .18s ease; text-decoration: none;
}
body.ab-redesign-hub .ab-v3-main .ab-product-card__btn:hover { background: var(--ab-color-marigold); color: var(--ab-color-forest) !important; }

/* Load more */
body.ab-redesign-hub .ab-v3-main .ab-hub-load-more { text-align: center; margin: 32px 0 8px; }
body.ab-redesign-hub .ab-v3-main .ab-load-more-btn {
  font-family: var(--ab-font-body); font-size: 14px; font-weight: 400; letter-spacing: .3px; text-transform: none;
  background: transparent; color: var(--ab-color-forest); border: 1.5px solid var(--ab-color-forest); border-radius: 999px; padding: 12px 30px; cursor: pointer;
}
body.ab-redesign-hub .ab-v3-main .ab-load-more-btn:hover { background: var(--ab-color-forest); color: #fff; }

/* ---------- SEO buying guide: readable column in a card ---------- */
body.ab-redesign-hub .ab-v3-main .ab-hub-content {
  max-width: 1256px; margin: 56px auto 0; background: var(--ab-color-card-bg); border-radius: 28px; padding: 56px 64px;
  font-family: var(--ab-font-body); font-size: 16px; line-height: 1.8; color: rgba(46, 51, 29, .88);
}
body.ab-redesign-hub .ab-v3-main .ab-hub-content > * { max-width: 820px; margin-left: auto; margin-right: auto; }
body.ab-redesign-hub .ab-v3-main .ab-hub-content p { margin: 0 0 18px; font-weight: 300; }
body.ab-redesign-hub .ab-v3-main .ab-hub-content strong { font-weight: 700; color: var(--ab-color-forest); }
body.ab-redesign-hub .ab-v3-main .ab-hub-content h2 {
  font-family: var(--ab-font-display); font-weight: 400; text-transform: lowercase; letter-spacing: 0;
  font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; color: var(--ab-color-forest); margin: 48px auto 16px;
}
body.ab-redesign-hub .ab-v3-main .ab-hub-content > h2:first-child { margin-top: 0; }
body.ab-redesign-hub .ab-v3-main .ab-hub-content h3 {
  font-family: var(--ab-font-body); font-weight: 700; font-size: 18px; letter-spacing: 0; text-transform: none;
  color: var(--ab-color-forest); margin: 32px auto 10px; padding-top: 14px; position: relative;
}
body.ab-redesign-hub .ab-v3-main .ab-hub-content h3::before {
  content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 3px; border-radius: 3px; background: var(--ab-color-marigold);
}
body.ab-redesign-hub .ab-v3-main .ab-hub-content a {
  color: var(--ab-color-forest); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(46, 51, 29, .35); font-weight: 400;
}
body.ab-redesign-hub .ab-v3-main .ab-hub-content a:hover { text-decoration-color: var(--ab-color-marigold); }
body.ab-redesign-hub .ab-v3-main .ab-hub-content ul,
body.ab-redesign-hub .ab-v3-main .ab-hub-content ol { padding-left: 22px; }
body.ab-redesign-hub .ab-v3-main .ab-hub-content li { margin-bottom: 6px; }
body.ab-redesign-hub .ab-v3-main .ab-hub-content li::marker { color: var(--ab-color-leaf); }
body.ab-redesign-hub .ab-v3-main .ab-hub-content table {
  width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--ab-color-mint-medium); border-radius: 16px; overflow: hidden; margin: 8px auto 24px;
}
body.ab-redesign-hub .ab-v3-main .ab-hub-content th,
body.ab-redesign-hub .ab-v3-main .ab-hub-content td {
  font-size: 14px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--ab-color-mint-medium); text-align: left; background: transparent; color: var(--ab-color-forest);
}
body.ab-redesign-hub .ab-v3-main .ab-hub-content th { font-weight: 700; background: rgba(235, 244, 232, .7); }
body.ab-redesign-hub .ab-v3-main .ab-hub-content tr:last-child td { border-bottom: 0; }
/* FAQ details inside the content */
body.ab-redesign-hub .ab-v3-main .ab-hub-content details {
  background: #fff; border: 1px solid var(--ab-color-mint-medium); border-radius: 16px; padding: 0 22px; margin: 0 auto 10px;
}
body.ab-redesign-hub .ab-v3-main .ab-hub-content details[open] { border-color: var(--ab-color-marigold); }
body.ab-redesign-hub .ab-v3-main .ab-hub-content details summary {
  font-family: var(--ab-font-body); font-weight: 400; font-size: 15px; color: var(--ab-color-forest); padding: 16px 0; cursor: pointer; list-style: none;
}
body.ab-redesign-hub .ab-v3-main .ab-hub-content details > *:not(summary) { margin-bottom: 16px; }

/* ---------- Cross-sell ---------- */
body.ab-redesign-hub .ab-v3-main .ab-hub-crosssell {
  max-width: 1256px; margin: 32px auto 72px; padding: 0; background: none; border: 0; text-align: center;
}
body.ab-redesign-hub .ab-v3-main .ab-hub-crosssell__label {
  font-family: var(--ab-font-body); font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: #8F5E08; font-weight: 700; margin: 0 0 14px;
}
body.ab-redesign-hub .ab-v3-main .ab-hub-crosssell__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
body.ab-redesign-hub .ab-v3-main .ab-hub-crosssell__pill {
  font-family: var(--ab-font-body); font-size: 13px; text-transform: none; letter-spacing: .02em; font-weight: 400;
  background: #fff; color: var(--ab-color-forest); border: 1.5px solid rgba(46, 51, 29, .2); border-radius: 999px; padding: 9px 18px; text-decoration: none;
}
body.ab-redesign-hub .ab-v3-main .ab-hub-crosssell__pill:hover { border-color: var(--ab-color-marigold); }

/* ---------- Tablet / mobile ---------- */
@media (max-width: 1280px) { body.ab-redesign-hub .ab-v3-main .ab-hub-products,
  body.ab-redesign-hub .ab-v3-main .ab-hub-filters,
  body.ab-redesign-hub .ab-v3-main .ab-hub-content,
  body.ab-redesign-hub .ab-v3-main .ab-hub-crosssell,
  body.ab-redesign-hub .ab-v3-main .ab-hub-intro { margin-left: 32px !important; margin-right: 32px !important; } }
@media (max-width: 1100px) { body.ab-redesign-hub .ab-v3-main .ab-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  body.ab-redesign-hub .ab-v3-main .ab-hub-hero { padding: 26px 16px 4px; }
  body.ab-redesign-hub .ab-v3-main .ab-hub-products,
  body.ab-redesign-hub .ab-v3-main .ab-hub-filters,
  body.ab-redesign-hub .ab-v3-main .ab-hub-content,
  body.ab-redesign-hub .ab-v3-main .ab-hub-crosssell,
  body.ab-redesign-hub .ab-v3-main .ab-hub-intro { margin-left: 16px !important; margin-right: 16px !important; }
  body.ab-redesign-hub .ab-v3-main .ab-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.ab-redesign-hub .ab-v3-main .ab-product-card__img-wrap { padding: 10px 10px 0; }
  body.ab-redesign-hub .ab-v3-main .ab-product-card__body { padding: 10px 10px 14px; }
  body.ab-redesign-hub .ab-v3-main .ab-product-card__title,
  body.ab-redesign-hub .ab-v3-main .ab-product-card__title a { font-size: 15px; }
  body.ab-redesign-hub .ab-v3-main .ab-product-card__btn { padding: 9px 14px; font-size: 12.5px; }
  body.ab-redesign-hub .ab-v3-main .ab-hub-content { padding: 30px 20px; border-radius: 22px; font-size: 15px; }
  body.ab-redesign-hub .ab-v3-main .ab-hub-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  body.ab-redesign-hub .ab-v3-main .ab-filter-pill { flex: 0 0 auto; }
}

/* White-background product photos read as white squares on the cream card: multiply blends the white away
   (photos with real scenes are unaffected in practice). */
body.ab-redesign-hub .ab-v3-main .ab-product-card__img-wrap img { mix-blend-mode: multiply; }
body.ab-redesign-hub .ab-v3-main .ab-product-card__title,
body.ab-redesign-hub .ab-v3-main .ab-product-card__title a { min-height: 2.2em; margin-bottom: 6px; }

/* Round 2 (Brian 10/15): ticket-stub corners like the homepage product cards.
   Same technique as home-v2-pass2.css: four radial gradients scoop each corner (r 27.5px) out of the
   cream fill, so the shape fits any card size. drop-shadow (not box-shadow) follows the scooped outline. */
body.ab-redesign-hub .ab-v3-main .ab-product-card {
  border-radius: 0; overflow: visible; box-shadow: none !important;
  background:
    radial-gradient(circle at 0 0,       transparent 27.5px, var(--ab-color-card-bg) 28px) top left     / 50.5% 50.5% no-repeat,
    radial-gradient(circle at 100% 0,    transparent 27.5px, var(--ab-color-card-bg) 28px) top right    / 50.5% 50.5% no-repeat,
    radial-gradient(circle at 0 100%,    transparent 27.5px, var(--ab-color-card-bg) 28px) bottom left  / 50.5% 50.5% no-repeat,
    radial-gradient(circle at 100% 100%, transparent 27.5px, var(--ab-color-card-bg) 28px) bottom right / 50.5% 50.5% no-repeat;
  transition: transform .25s ease, filter .25s ease;
}
body.ab-redesign-hub .ab-v3-main .ab-product-card:hover { filter: drop-shadow(0 14px 22px rgba(46, 51, 29, .14)); }
body.ab-redesign-hub .ab-v3-main .ab-product-card__img-wrap { padding: 28px 28px 0; }
body.ab-redesign-hub .ab-v3-main .ab-product-card__body { padding-bottom: 30px; }
@media (max-width: 760px) {
  body.ab-redesign-hub .ab-v3-main .ab-product-card {
    background:
      radial-gradient(circle at 0 0,       transparent 17.5px, var(--ab-color-card-bg) 18px) top left     / 50.5% 50.5% no-repeat,
      radial-gradient(circle at 100% 0,    transparent 17.5px, var(--ab-color-card-bg) 18px) top right    / 50.5% 50.5% no-repeat,
      radial-gradient(circle at 0 100%,    transparent 17.5px, var(--ab-color-card-bg) 18px) bottom left  / 50.5% 50.5% no-repeat,
      radial-gradient(circle at 100% 100%, transparent 17.5px, var(--ab-color-card-bg) 18px) bottom right / 50.5% 50.5% no-repeat;
  }
  body.ab-redesign-hub .ab-v3-main .ab-product-card__img-wrap { padding: 18px 14px 0; }
  body.ab-redesign-hub .ab-v3-main .ab-product-card__body { padding-bottom: 20px; }
}

/* ======================= Round 3 (Brian 10/15): homepage bounce + filigree + outline ======================= */
/* Built from pseudo-elements so it also applies to cards added by "Load more" (rendered by functions.php).
   Paint order inside the isolated card: ::after (z -1, 2px larger) = the 4 filigree corners + green outline,
   then ::before = the cream ticket body, then the content. No z-index on the content, so the photos'
   mix-blend-mode still multiplies against the cream (a z-index there turns white photo backgrounds into squares). */
@property --hub-ring { syntax: '<color>'; inherits: false; initial-value: rgba(127, 198, 136, 0); }
body.ab-redesign-hub .ab-v3-main .ab-product-card {
  position: relative; isolation: isolate; background: none !important; filter: none;
}
body.ab-redesign-hub .ab-v3-main .ab-product-card > * { position: relative; }   /* no z-index: keeps photos blending with the cream body */
body.ab-redesign-hub .ab-v3-main .ab-product-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 0 0,       transparent 27.5px, var(--ab-color-card-bg) 28px) top left     / 50.5% 50.5% no-repeat,
    radial-gradient(circle at 100% 0,    transparent 27.5px, var(--ab-color-card-bg) 28px) top right    / 50.5% 50.5% no-repeat,
    radial-gradient(circle at 0 100%,    transparent 27.5px, var(--ab-color-card-bg) 28px) bottom left  / 50.5% 50.5% no-repeat,
    radial-gradient(circle at 100% 100%, transparent 27.5px, var(--ab-color-card-bg) 28px) bottom right / 50.5% 50.5% no-repeat;
}
body.ab-redesign-hub .ab-v3-main .ab-product-card::after {
  content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background-image:
    url("figma-export/corner-tl.svg"), url("figma-export/corner-tr.svg"), url("figma-export/corner-bl.svg"), url("figma-export/corner-br.svg"),
    radial-gradient(circle at 2px 2px,                           transparent 25.5px, var(--hub-ring) 26px),
    radial-gradient(circle at calc(100% - 2px) 2px,              transparent 25.5px, var(--hub-ring) 26px),
    radial-gradient(circle at 2px calc(100% - 2px),              transparent 25.5px, var(--hub-ring) 26px),
    radial-gradient(circle at calc(100% - 2px) calc(100% - 2px), transparent 25.5px, var(--hub-ring) 26px);
  background-repeat: no-repeat;
  background-size: 39px 43px, 39px 43px, 39px 43px, 39px 43px, 50.5% 50.5%, 50.5% 50.5%, 50.5% 50.5%, 50.5% 50.5%;
  /* rest: filigrees tucked 23px inside, behind the body (same as the homepage) */
  background-position:
    left 25px top 25px, right 25px top 25px, left 25px bottom 25px, right 25px bottom 25px,
    left top, right top, left bottom, right bottom;
  transition: --hub-ring .3s ease-out;
}
body.ab-redesign-hub .ab-v3-main .ab-product-card:hover {
  transform: translateY(-20px) scale(1.01);
  animation: card-body-bounce .45s cubic-bezier(0.22, 1, 0.36, 1) both;   /* keyframes live in redesign.css */
  filter: drop-shadow(0 14px 22px rgba(46, 51, 29, .12));
}
body.ab-redesign-hub .ab-v3-main .ab-product-card:hover::after {
  --hub-ring: #7FC688;
  animation: hub-fili-bounce .45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hub-fili-bounce {
  0%   { background-position: left 25px top 25px, right 25px top 25px, left 25px bottom 25px, right 25px bottom 25px, left top, right top, left bottom, right bottom; }
  38%  { background-position: left -5px top -5px, right -5px top -5px, left -5px bottom -5px, right -5px bottom -5px, left top, right top, left bottom, right bottom; }
  60%  { background-position: left 5px top 5px,   right 5px top 5px,   left 5px bottom 5px,   right 5px bottom 5px,   left top, right top, left bottom, right bottom; }
  80%  { background-position: left 1px top 1px,   right 1px top 1px,   left 1px bottom 1px,   right 1px bottom 1px,   left top, right top, left bottom, right bottom; }
  100% { background-position: left 2px top 2px,   right 2px top 2px,   left 2px bottom 2px,   right 2px bottom 2px,   left top, right top, left bottom, right bottom; }
}
@media (prefers-reduced-motion: reduce) {
  body.ab-redesign-hub .ab-v3-main .ab-product-card:hover,
  body.ab-redesign-hub .ab-v3-main .ab-product-card:hover::after { animation: none; transform: translateY(-6px); }
}
/* phones: no hover, smaller cut-outs, no filigree layer */
@media (max-width: 760px) {
  body.ab-redesign-hub .ab-v3-main .ab-product-card::before {
    background:
      radial-gradient(circle at 0 0,       transparent 17.5px, var(--ab-color-card-bg) 18px) top left     / 50.5% 50.5% no-repeat,
      radial-gradient(circle at 100% 0,    transparent 17.5px, var(--ab-color-card-bg) 18px) top right    / 50.5% 50.5% no-repeat,
      radial-gradient(circle at 0 100%,    transparent 17.5px, var(--ab-color-card-bg) 18px) bottom left  / 50.5% 50.5% no-repeat,
      radial-gradient(circle at 100% 100%, transparent 17.5px, var(--ab-color-card-bg) 18px) bottom right / 50.5% 50.5% no-repeat;
  }
  body.ab-redesign-hub .ab-v3-main .ab-product-card::after { display: none; }
  body.ab-redesign-hub .ab-v3-main .ab-product-card:hover { animation: none; transform: none; filter: none; }
}