/* Genesis Stacks — storefront
   Tokens intentionally mirror the Genesis design system (navy #0e2944,
   soft teal, rounded cards, thin borders) so stacks sit inside the existing
   look rather than beside it. */

.gbstk-panel,
.gbstk-row,
.gbstk-grid { --gbstk-navy:#0e2944; --gbstk-teal:#12867f; --gbstk-line:#e6ecf2; --gbstk-soft:#f6f9fb; --gbstk-muted:#7d8c9b; }

/* =========================================================
   Savings chip (next to the price)
   ====================================================== */
.gbstk-save-chip {
	display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap;
	margin-left:10px; padding:4px 11px; border-radius:999px;
	background:linear-gradient(180deg,#eef7f5 0%,#e4f1ee 100%);
	border:1px solid rgba(18,134,127,.18);
	font-size:12.5px; line-height:1.4; vertical-align:middle;
}
.gbstk-save-chip__value  { color:var(--gbstk-muted); text-decoration:line-through; }
.gbstk-save-chip__sep    { color:#bcc9d4; }
.gbstk-save-chip__amount { color:#0f7a63; font-weight:600; }

ul.products .gbstk-save-chip { margin:6px 0 0; font-size:11.5px; padding:3px 9px; }

/* =========================================================
   Product page panels
   ====================================================== */
/* Blocksy renders woocommerce_after_single_product_summary OUTSIDE its content
   container, so these panels arrive full-bleed unless we constrain them
   ourselves. 1100px matches the site's own below-summary column
   (.gp-dossier-row), so the stack panels line up with everything else. */
.gbstk-panel {
	background:#fff; border:1px solid var(--gbstk-line); border-radius:20px;
	padding:26px 28px; margin:28px auto; box-shadow:0 2px 14px rgba(14,41,68,.04);
	max-width:var(--gbstk-content, 1100px);
	width:calc(100% - 40px);
	box-sizing:border-box;
}
@media (max-width:640px){
	.gbstk-panel { padding:20px 18px; border-radius:16px; width:calc(100% - 28px); }
}

.gbstk-panel__head { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.gbstk-panel__title { margin:0; font-size:19px; color:var(--gbstk-navy); letter-spacing:-.01em; }
.gbstk-panel__label { font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--gbstk-muted); }

/* Contents list */
.gbstk-items { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.gbstk-item {
	display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:14px;
	padding:12px 14px; border:1px solid var(--gbstk-line); border-radius:14px; background:var(--gbstk-soft);
}
@media (max-width:520px){
	.gbstk-item { grid-template-columns:52px 1fr; }
	.gbstk-item__price { grid-column:2; text-align:left; }
}

.gbstk-item__media { position:relative; }
.gbstk-item__img { width:100%; height:auto; border-radius:10px; background:#fff; display:block; }
.gbstk-item__qty {
	position:absolute; top:-7px; right:-7px; background:var(--gbstk-navy); color:#fff;
	font-size:11px; font-weight:600; border-radius:999px; padding:2px 7px; line-height:1.5;
}

.gbstk-item__body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.gbstk-item__name { color:var(--gbstk-navy); font-weight:600; font-size:15px; text-decoration:none; }
.gbstk-item__name:hover { color:var(--gbstk-teal); }
.gbstk-item__sku { font-size:11.5px; color:var(--gbstk-muted); letter-spacing:.03em; }

.gbstk-item__price { text-align:right; display:flex; flex-direction:column; gap:2px; }
.gbstk-item__sep-price { color:var(--gbstk-muted); font-size:14px; }
.gbstk-item__sep-note  { color:#a8b6c2; font-size:11px; }

/* Totals */
.gbstk-totals { margin-top:18px; padding-top:16px; border-top:1px solid var(--gbstk-line); display:grid; gap:8px; }
.gbstk-totals__row { display:flex; justify-content:space-between; gap:14px; font-size:14.5px; color:#5a6b7b; }
.gbstk-totals__strike { text-decoration:line-through; }
.gbstk-totals__row--stack { color:var(--gbstk-navy); font-weight:600; }
.gbstk-totals__row--save { color:#0f7a63; font-weight:700; }

.gbstk-availability { margin:16px 0 0; font-size:13px; }
.gbstk-availability--low { color:#9a6c14; }

.gbstk-ruo { margin:18px 0 0; font-size:11.5px; line-height:1.65; color:#98a6b3; }

/* COA cards */
.gbstk-coa-stack { display:grid; gap:22px; }
.gbstk-coa-item__name {
	margin:0 0 10px; font-size:14px; font-weight:700; color:var(--gbstk-navy);
	text-transform:uppercase; letter-spacing:.06em;
}
/* The site's own COA block (WPCode 1451) is dropped in whole, so strip the
   outer spacing it expects when it sits alone on a product page. */
.gbstk-coa-item .gp-dossier-row,
.gbstk-coa-item .gp-coa-card { margin:0; max-width:none; width:100%; }

.gbstk-coa-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.gbstk-coa-card {
	display:flex; flex-direction:column; gap:5px; padding:16px 18px;
	border:1px solid var(--gbstk-line); border-radius:14px; background:var(--gbstk-soft);
	text-decoration:none; transition:.18s;
}
.gbstk-coa-card:hover { border-color:rgba(18,134,127,.35); background:#fff; box-shadow:0 3px 12px rgba(14,41,68,.06); }
.gbstk-coa-card__name { color:var(--gbstk-navy); font-weight:600; font-size:14.5px; }
.gbstk-coa-card__sku  { color:var(--gbstk-muted); font-size:11.5px; letter-spacing:.03em; }
.gbstk-coa-card__cta  { color:var(--gbstk-teal); font-size:12.5px; font-weight:600; margin-top:4px; }

/* =========================================================
   Cards, row, grid
   ====================================================== */
.gbstk-card-badge {
	display:inline-block; margin:0 0 6px; padding:2px 9px; border-radius:999px;
	background:#eef4f9; color:#4a6a86; font-size:11px; font-weight:600;
	text-transform:uppercase; letter-spacing:.05em;
}

.gbstk-row { margin:0 0 42px; }
.gbstk-row__head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; flex-wrap:wrap; }
.gbstk-row__title { margin:0; font-size:24px; color:var(--gbstk-navy); letter-spacing:-.015em; }
.gbstk-row__sub { margin:5px 0 0; color:var(--gbstk-muted); font-size:14px; }
.gbstk-row__all { color:var(--gbstk-teal); font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap; }
.gbstk-row__all:hover { text-decoration:underline; }

/* Cap the column width. With minmax(258px,1fr) a single stack expanded to the
   full track width, which read as a giant empty billboard rather than a card. */
.gbstk-row__track {
	display:grid; grid-auto-flow:column; grid-auto-columns:minmax(258px,296px);
	justify-content:start;
	gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
	padding-bottom:8px; scrollbar-width:thin;
}
.gbstk-row__track > .gbstk-card { scroll-snap-align:start; }
@media (max-width:640px){ .gbstk-row__track { grid-auto-columns:78%; } }

/* auto-FIT collapses the empty tracks so a single stack centres instead of
   sitting in the leftmost of several phantom columns; the max track size still
   stops two stacks stretching to half the page each. */
.gbstk-grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,320px)); justify-content:center; }
.gbstk-grid--cols-2 { grid-template-columns:repeat(auto-fit,minmax(300px,380px)); }
.gbstk-grid--cols-4 { grid-template-columns:repeat(auto-fit,minmax(220px,280px)); }
@media (max-width:600px){ .gbstk-grid, .gbstk-grid--cols-2, .gbstk-grid--cols-4 { grid-template-columns:1fr; } }

.gbstk-card {
	border:1px solid var(--gbstk-line); border-radius:22px; overflow:hidden;
	background:linear-gradient(180deg,#f2f8fb 0%,#ffffff 75%);
	transition:.2s; display:flex;
}
.gbstk-card:hover { box-shadow:0 8px 26px rgba(14,41,68,.08); transform:translateY(-2px); }
.gbstk-card--out { opacity:.62; }
.gbstk-card__link { display:flex; flex-direction:column; width:100%; text-decoration:none; color:inherit; }

.gbstk-card__media { position:relative; padding:22px 22px 8px; }
.gbstk-card__img { width:100%; height:auto; display:block; border-radius:16px; background:#fff; }
.gbstk-card__save {
	position:absolute; top:16px; right:16px; background:#0f7a63; color:#fff;
	font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px;
	letter-spacing:.02em;
}

.gbstk-card__body { padding:4px 22px 22px; display:flex; flex-direction:column; gap:6px; flex:1; }
.gbstk-card__eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#768898; }
.gbstk-card__title { margin:0; font-size:17px; color:var(--gbstk-navy); line-height:1.3; }
.gbstk-card__contents { margin:0; font-size:12.5px; color:var(--gbstk-muted); line-height:1.5; }

/* Contents list — one row per compound, quantity in a small teal chip. */
.gbstk-card__list { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:7px; }
.gbstk-card__item { display:flex; align-items:center; gap:8px; font-size:13px; line-height:1.35; }
.gbstk-card__qty {
	flex:0 0 auto; padding:2px 6px; border-radius:6px;
	background:rgba(31,138,120,.10); color:#146A5B;
	font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
}
.gbstk-card__cname { color:#0E2944; font-weight:600; }

.gbstk-card__pricing { display:flex; align-items:baseline; gap:9px; margin-top:6px; }
.gbstk-card__was { color:#a8b6c2; font-size:13px; text-decoration:line-through; }
.gbstk-card__now { color:var(--gbstk-navy); font-size:18px; font-weight:700; }

.gbstk-card__cta {
	margin-top:auto; padding-top:16px;
	display:block; text-align:center;
	color:var(--gbstk-navy); font-weight:600; font-size:14px;
}
.gbstk-card__cta::before {
	content:""; display:block; height:1px; background:var(--gbstk-line); margin-bottom:16px;
}
.gbstk-card__link:hover .gbstk-card__cta { color:var(--gbstk-teal); }
.gbstk-card--out .gbstk-card__cta { color:#a8b6c2; }


/* =========================================================
   Stack product pages — suppress the site's single-SKU COA card
   ---------------------------------------------------------
   WPCode 1451 resolves COAs by the product's own SKU. A stack has no COA of
   its own, so that card renders "Coming soon", which is both wrong and
   confusing when our per-compound COA cards are right underneath it.

   This is a STOPGAP. The proper fix is one line in 1451: its existing
   has_term('essentials') guard already suppresses the card for accessories —
   add 'stacks' to that same check and delete this rule.
   ====================================================== */
body.gbstk-stack-page .gp-dossier-row--with-coa .gp-coa-card,
body.gbstk-stack-page .gp-dossier-row [class*="coa-card"] { display:none; }
body.gbstk-stack-page .gp-dossier-row--with-coa { grid-template-columns:1fr; }


/* =========================================================
   PDP savings row — sits directly above Add to cart
   ====================================================== */
.gbstk-pdp-savings {
	display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
	margin:0 0 14px; padding:11px 16px; border-radius:12px;
	background:linear-gradient(180deg,#f0f8f6 0%,#e7f3f0 100%);
	border:1px solid rgba(18,134,127,.18);
	font-size:14px; line-height:1.4;
}
.gbstk-pdp-savings__was  { color:#6b7c8a; text-decoration:line-through; }
.gbstk-pdp-savings__save { color:#0f7a63; font-weight:700; }
@media (max-width:520px){
	.gbstk-pdp-savings { flex-direction:column; align-items:flex-start; gap:4px; }
}


/* =========================================================
   Compact contents list — lives in the summary column
   ====================================================== */
.gbstk-mini { margin:0 0 16px; }
.gbstk-mini__label {
	display:block; font-size:11px; font-weight:700; letter-spacing:.09em;
	text-transform:uppercase; color:#7d8c9b; margin:0 0 8px;
}
.gbstk-mini__list { list-style:none; margin:0; padding:0; border:1px solid #e6ecf2; border-radius:14px; overflow:hidden; }
.gbstk-mini__item {
	display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:12px;
	padding:9px 14px; background:#fff;
}
.gbstk-mini__item + .gbstk-mini__item { border-top:1px solid #eef3f7; }

.gbstk-mini__media { position:relative; line-height:0; }
.gbstk-mini__img { width:38px; height:38px; object-fit:contain; border-radius:8px; background:#f6f9fb; display:block; }
.gbstk-mini__qty {
	position:absolute; top:-5px; right:-5px; background:#0e2944; color:#fff;
	font-size:10px; font-weight:700; border-radius:999px; padding:1px 5px; line-height:1.5;
}

.gbstk-mini__name {
	color:#0e2944; font-weight:600; font-size:14px; text-decoration:none; line-height:1.35;
}
.gbstk-mini__name:hover { color:#12867f; }
.gbstk-mini__price { color:#7d8c9b; font-size:13px; white-space:nowrap; }

@media (max-width:520px){
	.gbstk-mini__item { grid-template-columns:32px 1fr auto; gap:10px; padding:8px 12px; }
	.gbstk-mini__img { width:32px; height:32px; }
	.gbstk-mini__name { font-size:13px; }
}

/* =========================================================
   COA section — styled to sit like a normal product's COA area
   ====================================================== */
.gbstk-coas {
	max-width:var(--gbstk-content, 1100px);
	width:calc(100% - 40px);
	margin:34px auto;
	box-sizing:border-box;
}
.gbstk-coas__head { margin:0 0 18px; }
.gbstk-coas__eyebrow {
	display:block; font-size:11px; font-weight:700; letter-spacing:.09em;
	text-transform:uppercase; color:#12867f; margin-bottom:6px;
}
.gbstk-coas__title { margin:0; font-size:22px; color:#0e2944; letter-spacing:-.015em; }
.gbstk-coas__sub { margin:6px 0 0; color:#7d8c9b; font-size:14px; }

@media (max-width:640px){
	.gbstk-coas { width:calc(100% - 28px); margin:26px auto; }
	.gbstk-coas__title { font-size:19px; }
}


/* =========================================================
   Compound count prefix in the summary list ("1 x GHK-Cu")
   ====================================================== */
.gbstk-mini__count { color:#7d8c9b; font-weight:600; }

/* =========================================================
   COA cards in the site's dossier slot
   ---------------------------------------------------------
   The theme lays the dossier row out as [ COA column | Shipping card ], which
   leaves N stacked COA cards in a narrow column beside a tall empty gap.

   Instead we flatten our wrappers with display:contents so every COA card and
   the shipping card become siblings in ONE grid — shipping simply counts as
   another card. Column count is chosen from how many compounds the stack has.
   ====================================================== */
body.gbstk-stack-page .gp-dossier-row {
	grid-template-columns:repeat(2,minmax(0,1fr)) !important;
	align-items:stretch !important;
}

/* The theme pins the shipping card to grid-column 3. Release it, or it forces
   a phantom third column and refuses to wrap. */
body.gbstk-stack-page .gp-dossier-card--shipping {
	grid-column:auto !important;
	grid-row:auto !important;
	height:100%;
}

/* Flatten the wrappers so each COA card is itself a grid item. */
body.gbstk-stack-page .gp-dossier-coa-slot,
body.gbstk-stack-page .gbstk-coa-slot { display:contents !important; }

body.gbstk-stack-page .gbstk-coa-slot__item {
	grid-column:auto !important; grid-row:auto !important;
	min-width:0; display:flex;
}
body.gbstk-stack-page .gbstk-coa-slot__item > * { margin:0 !important; width:100%; display:flex; }
body.gbstk-stack-page .gbstk-coa-slot__item .gp-dossier-card,
body.gbstk-stack-page .gbstk-coa-slot__item .gp-coa-section > * { height:100%; }

/* Total tiles = compounds + 1 shipping card.
   2 or 3 tiles sit in a single row; 4 becomes a tidy 2x2; 5+ goes three across. */
body.gbstk-stack-page .gp-dossier-row:has(.gbstk-coa-slot--1) { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
body.gbstk-stack-page .gp-dossier-row:has(.gbstk-coa-slot--2) { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
body.gbstk-stack-page .gp-dossier-row:has(.gbstk-coa-slot--3) { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
body.gbstk-stack-page .gp-dossier-row:has(.gbstk-coa-slot--4),
body.gbstk-stack-page .gp-dossier-row:has(.gbstk-coa-slot--5),
body.gbstk-stack-page .gp-dossier-row:has(.gbstk-coa-slot--6) { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }

@media (max-width:1000px){
	body.gbstk-stack-page .gp-dossier-row,
	body.gbstk-stack-page .gp-dossier-row:has(.gbstk-coa-slot--1),
	body.gbstk-stack-page .gp-dossier-row:has(.gbstk-coa-slot--2),
	body.gbstk-stack-page .gp-dossier-row:has(.gbstk-coa-slot--3),
	body.gbstk-stack-page .gp-dossier-row:has(.gbstk-coa-slot--4),
	body.gbstk-stack-page .gp-dossier-row:has(.gbstk-coa-slot--5),
	body.gbstk-stack-page .gp-dossier-row:has(.gbstk-coa-slot--6) { grid-template-columns:1fr !important; }
}

/* =========================================================
   Cart / drawer contents line
   ====================================================== */
.gbstk-cart-contents {
	display:block; font-size:11px; line-height:1.45; color:#8b98a5;
	margin-top:2px; letter-spacing:.01em;
}
.woocommerce-cart .gbstk-cart-contents,
.woocommerce-checkout .gbstk-cart-contents { font-size:11.5px; }

/* =========================================================
   Builder: category checkboxes
   ====================================================== */

/* On a stack the compound name is the card headline, so give it a touch more
   presence than the generic "Certificate of Analysis" heading it replaces. */
body.gbstk-stack-page .gbstk-coa-slot__item .gp-coa-section__kicker { letter-spacing:.08em; }
body.gbstk-stack-page .gbstk-coa-slot__item .gp-coa-section__title { letter-spacing:-.01em; }

/* =========================================================
   Product-page stack rows (Other Research Stacks /
   Featured in Stacks) - Blocksy renders this hook area
   full-bleed, so constrain like the other panels.
   ====================================================== */
.single-product .gbstk-row {
	max-width:var(--gbstk-content, 1100px);
	margin:34px auto;
	padding:0 16px;
}
@media (max-width:640px){
	.single-product .gbstk-row { width:calc(100% - 28px); margin:26px auto; padding:0; }
}

/* =========================================================
   Product-page stack rows: hard layout guarantees.
   These duplicate the WPCode CSS on purpose - that CSS is
   inlined into cached page HTML, so pages cached during a
   bad window keep re-serving old styles. This file loads
   fresh on every view and always wins.
   ====================================================== */
.single-product .gbstk-row {
	max-width:1280px; margin:34px auto; padding:0 16px;
}
.single-product .gbstk-row__head { padding:0 8px; }
.single-product .gbstk-row__track {
	display:flex !important; gap:18px; overflow-x:auto;
	padding:4px 22px 10px; scrollbar-width:none;
}
.single-product .gbstk-row__track::-webkit-scrollbar { display:none; }
.single-product .gbstk-row__track > .gcard {
	flex:0 0 300px !important; max-width:300px !important;
	display:flex !important; flex-direction:column !important;
	height:auto !important; align-self:stretch;
}
.single-product .gbstk-row__track .gcard__media {
	display:block !important; width:100% !important;
	aspect-ratio:1/1 !important; height:auto !important;
	min-height:0 !important; overflow:hidden !important;
	position:relative !important;
}
/* The image is absolutely positioned so its intrinsic (portrait) size can
   never inflate the ratio box - aspect-ratio yields to content min-size
   otherwise, which is exactly how the tall-card bug kept coming back. */
.single-product .gbstk-row__track .gcard__media img,
.single-product .gbstk-row__track .gcard__img {
	position:absolute !important; inset:0 !important;
	width:100% !important; height:100% !important;
	object-fit:cover !important; padding:0 !important;
	margin:0 !important; max-width:none !important;
}
@media (max-width:640px){
	.single-product .gbstk-row { width:calc(100% - 28px); margin:26px auto; padding:0; }
	.single-product .gbstk-row__track > .gcard { flex:0 0 240px !important; }
}