/* Ticket-stub product cards for the [products]-style .ab-grid-item markup (hub templates: primary, simple, kava) and WooCommerce ul.products cards (/shop/),
   split out of hub-primary-v3.css 2026-10-15. Same build as the category-hub cards: ::before = cream scooped body,
   ::after (z -1) = filigree + green ring. Do NOT give card children a z-index (kills the photos' mix-blend multiply). */
body.ab-redesign-hub .ab-v3-main .ab-grid-item,
body.ab-redesign-hub .ab-v3-main ul.products li.product {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: none; border: 0; box-shadow: none; border-radius: 0; padding: 28px 24px 30px; transition: transform .25s ease, filter .25s ease;
}
body.ab-redesign-hub .ab-v3-main .ab-grid-item > *,
body.ab-redesign-hub .ab-v3-main ul.products li.product > * { position: relative; }
body.ab-redesign-hub .ab-v3-main .ab-grid-item::before,
body.ab-redesign-hub .ab-v3-main ul.products li.product::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 0 0,       transparent 27.5px, var(--hub-card-bg, var(--ab-color-card-bg)) 28px) top left     / 50.5% 50.5% no-repeat,
    radial-gradient(circle at 100% 0,    transparent 27.5px, var(--hub-card-bg, var(--ab-color-card-bg)) 28px) top right    / 50.5% 50.5% no-repeat,
    radial-gradient(circle at 0 100%,    transparent 27.5px, var(--hub-card-bg, var(--ab-color-card-bg)) 28px) bottom left  / 50.5% 50.5% no-repeat,
    radial-gradient(circle at 100% 100%, transparent 27.5px, var(--hub-card-bg, var(--ab-color-card-bg)) 28px) bottom right / 50.5% 50.5% no-repeat;
}
body.ab-redesign-hub .ab-v3-main .ab-grid-item::after,
body.ab-redesign-hub .ab-v3-main ul.products li.product::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%;
  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-grid-item:hover,
body.ab-redesign-hub .ab-v3-main ul.products li.product:hover {
  transform: translateY(-20px) scale(1.01); animation: card-body-bounce .45s cubic-bezier(0.22, 1, 0.36, 1) both;
  filter: drop-shadow(0 14px 22px rgba(46, 51, 29, .12));
}
body.ab-redesign-hub .ab-v3-main .ab-grid-item:hover::after,
body.ab-redesign-hub .ab-v3-main ul.products li.product:hover::after { --hub-ring: #7FC688; animation: hub-fili-bounce .45s cubic-bezier(0.22, 1, 0.36, 1) both; }
body.ab-redesign-hub .ab-v3-main .ab-grid-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; width: 100%; }
body.ab-redesign-hub .ab-v3-main .ab-grid-link img {
  width: 100%; max-width: 260px; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: multiply; border-radius: 16px; margin: 0 auto 14px; background: transparent;
}
body.ab-redesign-hub .ab-v3-main .ab-grid-title {
  font-family: var(--ab-font-display); font-weight: 400; text-transform: lowercase; letter-spacing: 0; font-size: 20px; 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;
}
body.ab-redesign-hub .ab-v3-main .ab-grid-price,
body.ab-redesign-hub .ab-v3-main .ab-grid-price * { font-family: var(--ab-font-body); font-size: 14px; font-weight: 400; color: var(--ab-color-forest); }
body.ab-redesign-hub .ab-v3-main .ab-grid-price small,
body.ab-redesign-hub .ab-v3-main .ab-grid-price .wcsatt-sub-options,
body.ab-redesign-hub .ab-v3-main .ab-grid-price .wcsatt-sub-discount { font-size: 12px; color: rgba(46, 51, 29, .65); }
body.ab-redesign-hub .ab-v3-main .ab-grid-sub { display: none; }   /* repeated the price line's "or subscribe to save up to 20%" */
body.ab-redesign-hub .ab-v3-main .ab-grid-item .ab-grid-stars { margin: 6px 0 16px; }
body.ab-redesign-hub .ab-v3-main .ab-grid-item .ab-star { color: var(--ab-color-marigold); font-size: 14px; }
body.ab-redesign-hub .ab-v3-main .ab-grid-item .ab-star-count { font-size: 12px; color: rgba(46, 51, 29, .55); }
body.ab-redesign-hub .ab-v3-main .ab-grid-btn {
  margin-top: auto; display: inline-flex; background: var(--ab-color-forest); color: #fff !important; border-radius: 999px; padding: 11px 24px; border: 0;
  font-family: var(--ab-font-body); font-size: 12.5px; font-weight: 400; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none;
}
body.ab-redesign-hub .ab-v3-main .ab-grid-btn:hover { background: var(--ab-color-marigold); color: var(--ab-color-forest) !important; }


/* Inside a reading card (strain pages) the content's h3 / link rules are more specific: reset them for cards */
body.ab-redesign-hub .ab-v3-main .ab-grid-item h3.ab-grid-title { font-family: var(--ab-font-display); font-weight: 400; font-size: 20px; text-transform: lowercase; padding-top: 0; margin: 0 0 8px; }
body.ab-redesign-hub .ab-v3-main .ab-grid-item h3.ab-grid-title::before { display: none; }
body.ab-redesign-hub .ab-v3-main .ab-grid-item a.ab-grid-link,
body.ab-redesign-hub .ab-v3-main .ab-grid-item a.ab-grid-btn { text-decoration: none; }

@media (max-width: 760px) {
  body.ab-redesign-hub .ab-v3-main .ab-grid-item,
  body.ab-redesign-hub .ab-v3-main ul.products li.product { padding: 16px 10px 18px; }
  body.ab-redesign-hub .ab-v3-main .ab-grid-item::before,
  body.ab-redesign-hub .ab-v3-main ul.products li.product::before {
    background:
      radial-gradient(circle at 0 0,       transparent 17.5px, var(--hub-card-bg, var(--ab-color-card-bg)) 18px) top left     / 50.5% 50.5% no-repeat,
      radial-gradient(circle at 100% 0,    transparent 17.5px, var(--hub-card-bg, var(--ab-color-card-bg)) 18px) top right    / 50.5% 50.5% no-repeat,
      radial-gradient(circle at 0 100%,    transparent 17.5px, var(--hub-card-bg, var(--ab-color-card-bg)) 18px) bottom left  / 50.5% 50.5% no-repeat,
      radial-gradient(circle at 100% 100%, transparent 17.5px, var(--hub-card-bg, var(--ab-color-card-bg)) 18px) bottom right / 50.5% 50.5% no-repeat;
  }
  body.ab-redesign-hub .ab-v3-main .ab-grid-item::after,
  body.ab-redesign-hub .ab-v3-main ul.products li.product::after { display: none; }
  body.ab-redesign-hub .ab-v3-main .ab-grid-item:hover,
  body.ab-redesign-hub .ab-v3-main ul.products li.product:hover { animation: none; transform: none; filter: none; }
  body.ab-redesign-hub .ab-v3-main .ab-grid-title,
  body.ab-redesign-hub .ab-v3-main .ab-grid-item h3.ab-grid-title { font-size: 15px; }
  body.ab-redesign-hub .ab-v3-main .ab-grid-btn { padding: 9px 14px; font-size: 12.5px; }
}