/* =================================================================
   Pickleheart — Community shop page
   -----------------------------------------------------------------
   The self-service shop a community gets at /communities/<slug>/shop/
   when Shop is switched on — see templates/community-shop.php and
   includes/community/communities-public/communities-public-shop.php.

   A section-for-section match of the hand-built "Shop Insiders" Bricks
   page (post 6457) — see the docblock at the top of
   templates/community-shop.php for exactly which elements map to
   which and what was deliberately left out. Colors reuse
   pickleheart-tokens.css wherever the reference page's literal hex
   happens to already BE one of those tokens (it does, for the brand
   coral and cream — same brand, same palette); a couple of one-off
   values that aren't in the token set (the product card's button
   coral, the toolbar's own greys) are written literally rather than
   forcing an inexact token fit.

   Scoped under `.community-shop` so the Bricks header/footer and
   WooCommerce's own default styles elsewhere are untouched.
   ================================================================= */

.community-shop {
  background: var(--background-neutral);
}

/* -----------------------------------------------------------------
   CONTAINER — matches .community-public-subheader-inner exactly
   (communities-public-style.css: max-width 1100px, padding 0 24px,
   border-box) so this page's content lines up edge-to-edge with the
   Overview/Shop/Beta subheader above it. Deliberately NOT the kit's
   .pkl-wrap (1320px, padding added outside the max-width) — that
   would run wider than the subheader and read as misaligned.
   ----------------------------------------------------------------- */
.shop-wrap {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

/* -----------------------------------------------------------------
   HERO — photo band, wave-brush foot, community name (Bricks 1230a8)
   ----------------------------------------------------------------- */
.shop-hero {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: center;
  background-color: var(--pkl-grey-100);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* Photos vary per community; a flat scrim keeps the white heading
   legible over any of them, unlike the reference page's single fixed
   brand illustration which was already dark enough on its own. */
.shop-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.38), rgba(0,0,0,0.5));
}
.shop-hero .shop-wrap { position: relative; z-index: 1; padding-block: 56px 70px; }
.shop-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 46px;
  line-height: 1.05;
  color: #fff;
  text-wrap: pretty;
}
.shop-hero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 40px;
  display: block;
}
@media (max-width: 760px) {
  .shop-hero { min-height: 170px; }
  .shop-hero .shop-wrap { padding-block: 36px 46px; }
  .shop-hero__title { font-size: 32px; }
}

/* -----------------------------------------------------------------
   SHOP HEADER — tagline, heading, lead, badges, category quick-nav
   (Bricks 065e5e: ygxtus/wxbqho, 570d8f, nvmiyg, jkxnov, 108998).
   Background stops here — the product grid below (.shop-products)
   deliberately stays plain.
   ----------------------------------------------------------------- */
.shop-welcome {
  position: relative;
  /* The bundled default image (and most custom uploads) has transparent
     or empty areas background-size:cover doesn't fill with anything —
     a cream base, not white, means the whole band reads as one
     deliberate background rather than image-in-a-void. */
  background-color: var(--background-neutral-weak);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center left;
  padding: var(--space-10) 0 var(--space-8);
  overflow: hidden;
}
/* An image sits behind this band (admin upload, or the bundled default —
   see community_shop_welcome_background_url(), a soft pastel wave
   graphic on a transparent ground). A custom photo upload could be
   busier/higher-contrast than that default, so a light scrim still
   backs the eyebrow/heading/badge text — just faint, since the bundled
   default is already light enough not to need much help. */
.shop-welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.45);
}
.shop-welcome__inner { position: relative; z-index: 1; }
.shop-welcome__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.shop-welcome__tagline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 22px;
  color: var(--text-brand-strong);
}
.shop-welcome__tagline img { width: 25px; height: 25px; object-fit: contain; }

.shop-welcome__heading {
  margin-top: var(--space-4);
  margin-bottom: 30px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-neutral-strong);
  text-wrap: pretty;
}

.shop-welcome__lead {
  margin-top: var(--space-4);
  max-width: 600px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.535;
  letter-spacing: var(--tracking-body);
  color: rgba(0, 0, 0, 0.72);
  text-wrap: pretty;
}

/* Trust badges — three pill cards in a row. */
.shop-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.shop-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--background-neutral);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 14px;
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.35);
  padding: 13px 18px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-neutral-strong);
}
.shop-badge img { width: 18px; height: 18px; object-fit: contain; }

/* Category quick-nav — icon + label, linking to each real child
   product category under this community's own Product Category.
   Full content width with the items spread across it (Bricks 95b490:
   _direction row, _justifyContent space-between) rather than a
   centered cluster — matches the toolbar/grid width below it instead
   of reading as a narrower, separate element. */
.shop-cat-nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-6);
  width: 100%;
  margin-top: 64px;
  background: var(--background-neutral-weak);
  border-radius: var(--radius-card);
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.35);
  padding: 10px;
}
.shop-cat-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 64px;
  flex: 1 1 0;
}
.shop-cat-nav__item img { width: 40px; height: 40px; object-fit: contain; }
.shop-cat-nav__item span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-neutral-strong);
}
.shop-cat-nav__item:hover span { color: var(--foreground-brand-strong); }

@media (max-width: 620px) {
  .shop-welcome__tagline { font-size: 16px; }
  .shop-welcome__tagline img { width: 18px; height: 18px; }
  .shop-welcome__heading { font-size: 30px; }
  .shop-welcome__lead { font-size: 18px; }
  .shop-badges { gap: var(--space-2); }
  .shop-badge { padding: 10px 14px; font-size: 12px; }
  .shop-cat-nav { gap: var(--space-4); margin-top: var(--space-8); }
  .shop-cat-nav__item img { width: 28px; height: 28px; }
  .shop-cat-nav__item span { font-size: 11px; }
}

/* -----------------------------------------------------------------
   TOOLBAR — result count + sort
   ----------------------------------------------------------------- */
.shop-products { padding: var(--space-10) 0 var(--space-20); }

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.shop-toolbar__count {
  font-size: 13px;
  letter-spacing: var(--tracking-body);
  color: var(--text-neutral-strong);
  text-transform: capitalize;
}
.shop-toolbar__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-4);
}
.shop-toolbar__field select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border-neutral);
  border-radius: 14px;
  padding: 0 34px 0 14px;
  height: 32px;
  font-family: var(--font-body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-body);
  color: #4f575f;
  background-color: var(--background-neutral);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%234F575F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.shop-toolbar__field select:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }

.shop-empty {
  text-align: center;
  padding: var(--space-16) 0;
  color: var(--text-neutral-weak);
  font-size: 17px;
}

/* -----------------------------------------------------------------
   PRODUCT GRID — circular photo with a decorative ring overlay
   ----------------------------------------------------------------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 900px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

.shop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shop-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.shop-card__photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--background-neutral-weak);
}
.shop-card__photo img:first-child { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.shop-card__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.shop-card__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-neutral-strong);
}
.shop-card__link:hover .shop-card__title { color: var(--foreground-brand-strong); }
.shop-card__price { font-size: 14px; color: var(--text-neutral-weak); }
.shop-card__price ins { text-decoration: none; color: var(--text-neutral-strong); }
.shop-card__price del { opacity: 0.6; margin-right: 6px; }

.shop-card__cta { margin-top: 12px; }
/* WooCommerce's own loop add-to-cart link/button, restyled to the
   reference page's coral pill (its own button color, not one of the
   shared pkl- tokens — Bricks' own "primary" button on that page).
   `.button` (not just `.add_to_cart_button`) because a variable or
   external product's loop link only carries `.button` plus a
   product_type_* class — matching only `.add_to_cart_button` left
   those rendering as unstyled text links.
   `.community-shop` prefix on the selector: Bricks ships a global
   inline rule — `body:not(.woocommerce) .product_type_variable
   {background-color: transparent}` — at equal specificity to a bare
   `.shop-card__cta a.button`, which then wins on source order and
   makes a variable product's button render as plain text. Adding the
   page's own root class breaks the tie in our favor without `!important`. */
.community-shop .shop-card__cta a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: #fa8787;
  color: #000;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  padding: 8px 24px;
  transition: filter 130ms ease;
}
.community-shop .shop-card__cta a.button:hover { filter: brightness(1.06); }

@media (max-width: 760px) {
  .shop-card__photo { width: 150px; height: 150px; }
}

/* -----------------------------------------------------------------
   PAGINATION
   ----------------------------------------------------------------- */
.shop-pagination { margin-top: var(--space-12); display: flex; justify-content: center; }
.shop-pagination ul {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.shop-pagination a,
.shop-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--text-neutral-strong);
}
.shop-pagination a:hover { background: var(--background-neutral-weak); }
.shop-pagination span.current {
  background: var(--foreground-brand-strong);
  color: #fff;
  font-weight: 800;
}