/* Product catalogue on the public site: a grid of cards.

   Loaded AFTER style.css so these rules win, and versioned by mtime in the layout so an edit is
   picked up at once. Nothing new is introduced — the navy/cyan/green below are style.css's own
   custom properties and the type is the site's Space Grotesk + Inter, so the cards read as part
   of this page rather than as a store template.

   The card replaced an accordion row, so .p-try / .p-subscribe / .p-value / .p-tag keep their
   style.css look and only their placement inside a card is set here. */

/* ---- heading levels after the catalogue moved to the top of the page ----
   The catalogue leads the page, so its heading is the document's h1 and the hero's becomes an h2.
   Neither tag has a rule of its own in style.css: the section heading relies on a rule written
   for h2, and the hero's relied on the h1 browser default (2em). These two rules put both back to
   exactly the sizes they rendered at before the swap — the section heading at the same size as
   every other section, and the hero statement at its original weight. */
.section-head h1{font-size:clamp(28px,3.4vw,40px);line-height:1.15;}
.hero h2{font-size:2em;}

/* ---- search + category bar ---- */
.store-bar{display:flex;flex-direction:column;gap:14px;margin:30px 0 34px;}
.store-search{
  width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:3px;background:#fff;
  color:var(--blue-deep);font-family:'Inter';font-size:15px;
}
.store-search::placeholder{color:var(--ink-soft);}
.store-search:focus{outline:none;border-color:var(--blue-mid);box-shadow:0 0 0 3px rgba(18,58,99,0.08);}
.store-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
.store-chip{
  flex:none;font-family:'Inter';font-size:13.5px;font-weight:500;color:var(--blue-deep);
  background:var(--paper-warm);border:1px solid var(--line);border-radius:999px;padding:8px 15px;
  cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s;
}
.store-chip:hover{border-color:var(--blue-mid);}
.store-chip.on{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;}

/* ---- grid ---- */
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:18px;}

/* ---- card ---- */
.product-card{
  position:relative;display:flex;flex-direction:column;gap:13px;background:#fff;
  border:1px solid var(--line);border-radius:3px;padding:20px;
  transition:border-color .15s,box-shadow .15s;
}
.product-card:hover{border-color:rgba(10,37,64,0.28);box-shadow:0 6px 20px rgba(10,37,64,0.06);}
/* a filtered-out card must really disappear: the display:flex above outranks the HTML hidden state */
.product-card[hidden],.eco-category[hidden],.store-empty[hidden]{display:none;}

.pc-badge{
  position:absolute;top:16px;right:16px;font-family:'Space Grotesk';font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:3px;
  background:var(--paper-warm);color:var(--ink-soft);
}
.pc-badge.live{background:rgba(31,200,221,0.16);color:var(--blue-mid);}

.pc-top{display:flex;align-items:center;gap:14px;}
.pc-logo{
  width:56px;height:56px;flex:none;border:1px solid var(--line);border-radius:3px;
  background:var(--paper-warm);display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.pc-logo img{width:100%;height:100%;object-fit:contain;}
/* shown until artwork exists at public/logo/<slug>.<ext> */
.pc-logo-mono{
  background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;
  font-family:'Space Grotesk';font-size:17px;font-weight:700;letter-spacing:.03em;
}
.pc-head{display:flex;flex-direction:column;gap:2px;min-width:0;}
.pc-num{font-family:'Space Grotesk';font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--ink-soft);}
.pc-name{
  font-family:'Space Grotesk';font-size:17px;font-weight:600;color:var(--blue-deep);
  line-height:1.25;padding-right:104px; /* keeps the name clear of the absolutely placed badge */
}
.pc-type{font-size:13px;color:var(--ink-soft);line-height:1.45;}
.pc-price{font-family:'Space Grotesk';font-size:19px;font-weight:700;color:var(--blue-deep);}
.pc-price.soon{font-size:13.5px;font-weight:500;color:var(--ink-soft);}

.pc-feats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px;}
.pc-feats li{
  font-size:12px;color:var(--blue-deep);background:var(--paper-warm);
  border:1px solid var(--line);padding:5px 11px;border-radius:3px;
}

details.pc-more{margin-top:-2px;}
details.pc-more summary{
  cursor:pointer;list-style:none;font-family:'Space Grotesk';font-size:12.5px;font-weight:600;
  color:var(--blue-mid);
}
details.pc-more summary::-webkit-details-marker{display:none;}
details.pc-more .pc-feats{margin-top:12px;}
details.pc-more .p-value{font-size:13px;line-height:1.55;margin:12px 0 0;}
details.pc-more .p-tag{margin:8px 0 0;}
.pc-more-close{display:none;}
details.pc-more[open] .pc-more-open{display:none;}
details.pc-more[open] .pc-more-close{display:inline;}

.pc-actions{display:flex;gap:9px;margin-top:auto;padding-top:8px;}
.pc-actions .p-try,.pc-actions .p-subscribe{flex:1;text-align:center;}
.pc-notify{
  flex:1;text-align:center;padding:11px 16px;border:1px solid var(--line);border-radius:3px;
  font-family:'Space Grotesk';font-size:13.5px;font-weight:600;color:var(--ink-soft);
  text-decoration:none;background:var(--paper-warm);transition:border-color .15s,color .15s;
}
.pc-notify:hover{border-color:var(--blue-mid);color:var(--blue-deep);}

.store-empty{color:var(--ink-soft);text-align:center;padding:34px 0;font-size:14.5px;}

@media(max-width:640px){
  .store-grid{grid-template-columns:1fr;}
  /* a narrow card stacks: the badge moves above the text and stops fighting the title */
  .pc-badge{position:static;align-self:flex-start;order:-1;}
  .pc-name{padding-right:0;font-size:16px;}
  .pc-logo{width:48px;height:48px;}
  .pc-price{font-size:17px;}
  .store-chips{margin:0 -16px;padding:0 16px 4px;}
}